feat(ui): Enhance Graph and Kanban UX (bb-18e)
- feat(kanban): Add progressive disclosure to task details drawer - feat(kanban): Fix title layout on mobile (remove flex-row constraint) - feat(kanban): Add bead count and metadata to epics - style(globals): Add status color tokens and refined scrollbars - deps: Add dagre for true DAG layout in graph view - chore: Update capture scripts
This commit is contained in:
zenchantlive
parent
8490cb1d8c
commit
e1f3d48f6e
10 changed files with 5591 additions and 103 deletions
|
|
@ -3,21 +3,25 @@
|
|||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--color-bg: #090909;
|
||||
--color-surface: #161616;
|
||||
--color-surface-muted: #212121;
|
||||
--color-surface-raised: #2a2a2a;
|
||||
--color-text-strong: #f5f5f5;
|
||||
--color-text-body: #d0d0d0;
|
||||
--color-text-muted: #9a9a9a;
|
||||
--color-border-soft: rgba(255, 255, 255, 0.15);
|
||||
--color-border-strong: rgba(255, 255, 255, 0.3);
|
||||
--color-bg: #0b0c10;
|
||||
--color-surface: #14171f;
|
||||
--color-surface-muted: #1c212b;
|
||||
--color-surface-raised: #252b38;
|
||||
--color-text-strong: #f8fafc;
|
||||
--color-text-body: #cbd5e1;
|
||||
--color-text-muted: #94a3b8;
|
||||
--color-border-soft: rgba(255, 255, 255, 0.08);
|
||||
--color-border-strong: rgba(255, 255, 255, 0.18);
|
||||
|
||||
--aurora-blue: rgba(125, 175, 245, 0.14);
|
||||
--aurora-amber: rgba(235, 185, 125, 0.11);
|
||||
--aurora-purple: rgba(185, 125, 245, 0.08);
|
||||
|
||||
--status-open: #60a5fa;
|
||||
--status-open: #38bdf8;
|
||||
--status-progress: #fbbf24;
|
||||
--status-blocked: #fb7185;
|
||||
--status-blocked: #f43f5e;
|
||||
--status-deferred: #94a3b8;
|
||||
--status-closed: #34d399;
|
||||
--status-closed: #10b981;
|
||||
|
||||
--priority-p0: #f43f5e;
|
||||
--priority-p1: #f59e0b;
|
||||
|
|
@ -38,9 +42,173 @@ body {
|
|||
|
||||
body {
|
||||
background:
|
||||
radial-gradient(circle at 14% 12%, rgba(255, 255, 255, 0.05), transparent 36%),
|
||||
radial-gradient(circle at 84% 18%, rgba(255, 180, 80, 0.06), transparent 32%),
|
||||
linear-gradient(160deg, #070707 0%, #101010 48%, #161616 100%);
|
||||
radial-gradient(circle at 10% 10%, var(--aurora-blue), transparent 40%),
|
||||
radial-gradient(circle at 90% 10%, var(--aurora-amber), transparent 40%),
|
||||
radial-gradient(circle at 50% 90%, var(--aurora-purple), transparent 50%),
|
||||
#0b0c10;
|
||||
color: var(--color-text-body);
|
||||
font-family: 'DM Sans', 'Segoe UI', Inter, system-ui, sans-serif;
|
||||
letter-spacing: -0.011em;
|
||||
}
|
||||
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(148, 163, 184, 0.25) transparent;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background: rgba(148, 163, 184, 0.2);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(148, 163, 184, 0.35);
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: rgba(148, 163, 184, 0.15);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(148, 163, 184, 0.3);
|
||||
}
|
||||
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
|
||||
.workflow-card {
|
||||
border: 1px solid var(--color-border-soft);
|
||||
background: linear-gradient(165deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
|
||||
box-shadow: 0 4px 24px -2px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.03);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.workflow-card-selected {
|
||||
border-color: rgba(56, 189, 248, 0.4);
|
||||
background: linear-gradient(165deg, rgba(56, 189, 248, 0.12), rgba(15, 23, 42, 0.8));
|
||||
box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
/* Shared dark form controls to avoid white-on-white browser defaults */
|
||||
.ui-field {
|
||||
border: 1px solid var(--color-border-soft);
|
||||
background: linear-gradient(160deg, rgba(28, 33, 43, 0.9), rgba(20, 23, 31, 0.92));
|
||||
color: var(--color-text-strong);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.ui-field::placeholder {
|
||||
color: color-mix(in srgb, var(--color-text-muted) 88%, transparent);
|
||||
}
|
||||
|
||||
.ui-field:focus-visible {
|
||||
outline: none;
|
||||
border-color: var(--color-border-strong);
|
||||
box-shadow:
|
||||
0 0 0 2px rgba(125, 175, 245, 0.12),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.ui-select {
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.ui-select option,
|
||||
.ui-option {
|
||||
background-color: #10141d;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
|
||||
.workflow-graph-legend {
|
||||
backdrop-filter: blur(12px);
|
||||
background: rgba(20, 23, 31, 0.72);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.workflow-graph-flow .react-flow__viewport {
|
||||
background:
|
||||
radial-gradient(circle at 20% 20%, var(--aurora-blue), transparent 45%),
|
||||
radial-gradient(circle at 80% 15%, var(--aurora-amber), transparent 45%);
|
||||
}
|
||||
|
||||
.workflow-graph-flow .react-flow__edges {
|
||||
z-index: 10 !important;
|
||||
}
|
||||
|
||||
.workflow-graph-flow .react-flow__nodes {
|
||||
z-index: 20 !important;
|
||||
}
|
||||
|
||||
.workflow-graph-flow .react-flow__edge-path {
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
|
||||
.workflow-graph-flow .workflow-edge-muted .react-flow__edge-path {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.workflow-graph-flow .workflow-edge-selected .react-flow__edge-path {
|
||||
opacity: 1;
|
||||
filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.6));
|
||||
}
|
||||
|
||||
.workflow-graph-flow .workflow-edge-cycle .react-flow__edge-path {
|
||||
opacity: 1;
|
||||
filter: drop-shadow(0 0 10px rgba(251, 113, 133, 0.65));
|
||||
}
|
||||
|
||||
.react-flow__edge-label {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Node selection pulse animation - sky-blue ring expands and fades */
|
||||
@keyframes node-select-pulse {
|
||||
0% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.4); }
|
||||
70% { box-shadow: 0 0 0 12px rgba(56, 189, 248, 0); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); }
|
||||
}
|
||||
.node-select-pulse {
|
||||
animation: node-select-pulse 1s ease-out;
|
||||
}
|
||||
|
||||
/* Tooltip fade-in animation */
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
|
||||
to { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||||
}
|
||||
.animate-fade-in {
|
||||
animation: fade-in 200ms ease-out;
|
||||
}
|
||||
|
||||
/* Hide scrollbar but keep scrolling (for epic chip strip) */
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,36 @@
|
|||
import { KanbanPage } from '../components/kanban/kanban-page';
|
||||
import { readIssuesFromDisk } from '../lib/read-issues';
|
||||
import { readIssuesForScope } from '../lib/aggregate-read';
|
||||
import { resolveProjectScope } from '../lib/project-scope';
|
||||
import { listProjects } from '../lib/registry';
|
||||
|
||||
export default async function Page() {
|
||||
const issues = await readIssuesFromDisk();
|
||||
return <KanbanPage issues={issues} projectRoot={process.cwd()} />;
|
||||
interface PageProps {
|
||||
searchParams?: Promise<Record<string, string | string[] | undefined>>;
|
||||
}
|
||||
|
||||
export default async function Page({ searchParams }: PageProps) {
|
||||
const params = (await searchParams) ?? {};
|
||||
const requestedProjectKey = typeof params.project === 'string' ? params.project : null;
|
||||
const requestedMode = typeof params.mode === 'string' ? params.mode : null;
|
||||
const registryProjects = await listProjects();
|
||||
const scope = resolveProjectScope({
|
||||
currentProjectRoot: process.cwd(),
|
||||
registryProjects,
|
||||
requestedProjectKey,
|
||||
requestedMode,
|
||||
});
|
||||
|
||||
const issues = await readIssuesForScope({
|
||||
mode: scope.mode,
|
||||
selected: scope.selected,
|
||||
scopeOptions: scope.options,
|
||||
});
|
||||
return (
|
||||
<KanbanPage
|
||||
issues={issues}
|
||||
projectRoot={scope.selected.root}
|
||||
projectScopeKey={scope.selected.key}
|
||||
projectScopeOptions={scope.options}
|
||||
projectScopeMode={scope.mode}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,9 @@ import { KanbanCard } from './kanban-card';
|
|||
|
||||
interface KanbanBoardProps {
|
||||
columns: Record<(typeof KANBAN_STATUSES)[number], BeadIssue[]>;
|
||||
parentEpicByIssueId: Map<string, { id: string; title: string }>;
|
||||
graphBaseHref: string;
|
||||
showClosed: boolean;
|
||||
selectedIssueId: string | null;
|
||||
pendingIssueIds: Set<string>;
|
||||
activeStatus: KanbanStatus | null;
|
||||
|
|
@ -19,23 +22,33 @@ interface KanbanBoardProps {
|
|||
}
|
||||
|
||||
const STATUS_META: Record<(typeof KANBAN_STATUSES)[number], { label: string; dot: string }> = {
|
||||
open: { label: 'Open', dot: 'bg-zinc-300' },
|
||||
ready: { label: 'Ready', dot: 'bg-sky-300' },
|
||||
in_progress: { label: 'In Progress', dot: 'bg-amber-300' },
|
||||
blocked: { label: 'Blocked', dot: 'bg-rose-300' },
|
||||
deferred: { label: 'Deferred', dot: 'bg-stone-400' },
|
||||
closed: { label: 'Done', dot: 'bg-emerald-300' },
|
||||
};
|
||||
|
||||
const STATUS_COLUMN_CLASS: Record<(typeof KANBAN_STATUSES)[number], string> = {
|
||||
open: 'bg-zinc-500/10',
|
||||
ready: 'bg-sky-500/10',
|
||||
in_progress: 'bg-amber-500/10',
|
||||
blocked: 'bg-rose-500/10',
|
||||
deferred: 'bg-stone-500/10',
|
||||
closed: 'bg-emerald-500/10',
|
||||
};
|
||||
|
||||
export function KanbanBoard({ columns, selectedIssueId, pendingIssueIds, activeStatus, onActivateStatus, onMoveIssue, onSelect }: KanbanBoardProps) {
|
||||
export function KanbanBoard({
|
||||
columns,
|
||||
parentEpicByIssueId,
|
||||
graphBaseHref,
|
||||
showClosed,
|
||||
selectedIssueId,
|
||||
pendingIssueIds,
|
||||
activeStatus,
|
||||
onActivateStatus,
|
||||
onMoveIssue,
|
||||
onSelect,
|
||||
}: KanbanBoardProps) {
|
||||
const allIssues = KANBAN_STATUSES.flatMap((status) => columns[status]);
|
||||
const visibleStatuses = KANBAN_STATUSES.filter((status) => status !== 'closed' || showClosed);
|
||||
|
||||
const issueLookup = new Map(allIssues.map((issue) => [issue.id, issue]));
|
||||
|
||||
|
|
@ -44,16 +57,16 @@ export function KanbanBoard({ columns, selectedIssueId, pendingIssueIds, activeS
|
|||
onSelect(issue);
|
||||
};
|
||||
|
||||
const onDragStart = (issue: BeadIssue, event: DragEvent<HTMLButtonElement>) => {
|
||||
const onDragStart = (issue: BeadIssue, sourceLane: KanbanStatus, event: DragEvent<HTMLElement>) => {
|
||||
event.dataTransfer.setData('application/x-bead-id', issue.id);
|
||||
event.dataTransfer.setData('application/x-bead-status', issue.status);
|
||||
event.dataTransfer.setData('application/x-bead-lane', sourceLane);
|
||||
event.dataTransfer.effectAllowed = 'move';
|
||||
};
|
||||
|
||||
const onDropLane = (targetStatus: KanbanStatus, event: DragEvent<HTMLDivElement>) => {
|
||||
event.preventDefault();
|
||||
const issueId = event.dataTransfer.getData('application/x-bead-id');
|
||||
const sourceStatus = event.dataTransfer.getData('application/x-bead-status') as KanbanStatus;
|
||||
const sourceStatus = event.dataTransfer.getData('application/x-bead-lane') as KanbanStatus;
|
||||
if (!issueId || !sourceStatus || sourceStatus === targetStatus) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -68,7 +81,7 @@ export function KanbanBoard({ columns, selectedIssueId, pendingIssueIds, activeS
|
|||
|
||||
return (
|
||||
<section className="grid min-h-[58vh] gap-2.5">
|
||||
{KANBAN_STATUSES.map((status) => (
|
||||
{visibleStatuses.map((status) => (
|
||||
<div
|
||||
key={status}
|
||||
onDragOver={(event) => event.preventDefault()}
|
||||
|
|
@ -114,10 +127,12 @@ export function KanbanBoard({ columns, selectedIssueId, pendingIssueIds, activeS
|
|||
<KanbanCard
|
||||
key={issue.id}
|
||||
issue={issue}
|
||||
parentEpic={parentEpicByIssueId.get(issue.id) ?? null}
|
||||
graphBaseHref={graphBaseHref}
|
||||
pending={pendingIssueIds.has(issue.id)}
|
||||
selected={selectedIssueId === issue.id}
|
||||
draggable={!pendingIssueIds.has(issue.id)}
|
||||
onNativeDragStart={onDragStart}
|
||||
onNativeDragStart={(dragIssue, event) => onDragStart(dragIssue, status, event)}
|
||||
onSelect={onSelect}
|
||||
/>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,22 @@
|
|||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { motion } from 'framer-motion';
|
||||
import type { DragEvent } from 'react';
|
||||
|
||||
import { formatUpdatedRecency } from '../../lib/kanban';
|
||||
import type { BeadIssue } from '../../lib/types';
|
||||
|
||||
import { Chip } from '../shared/chip';
|
||||
|
||||
interface KanbanCardProps {
|
||||
issue: BeadIssue;
|
||||
parentEpic?: { id: string; title: string } | null;
|
||||
graphBaseHref: string;
|
||||
selected: boolean;
|
||||
pending?: boolean;
|
||||
draggable?: boolean;
|
||||
onNativeDragStart?: (issue: BeadIssue, event: DragEvent<HTMLButtonElement>) => void;
|
||||
onNativeDragStart?: (issue: BeadIssue, event: DragEvent<HTMLElement>) => void;
|
||||
onSelect: (issue: BeadIssue) => void;
|
||||
}
|
||||
|
||||
|
|
@ -31,24 +35,61 @@ function priorityClass(priority: number): string {
|
|||
}
|
||||
}
|
||||
|
||||
export function KanbanCard({ issue, selected, pending = false, draggable = false, onNativeDragStart, onSelect }: KanbanCardProps) {
|
||||
export function KanbanCard({
|
||||
issue,
|
||||
parentEpic = null,
|
||||
graphBaseHref,
|
||||
selected,
|
||||
pending = false,
|
||||
draggable = false,
|
||||
onNativeDragStart,
|
||||
onSelect,
|
||||
}: KanbanCardProps) {
|
||||
const projectName = (issue as BeadIssue & { project?: { name?: string } }).project?.name ?? null;
|
||||
const unblocksCount = new Set(
|
||||
issue.dependencies.filter((dependency) => dependency.type === 'blocks').map((dependency) => dependency.target),
|
||||
).size;
|
||||
const selectedClass = selected
|
||||
? 'border-amber-200/60 bg-surface-raised shadow-card ring-1 ring-amber-200/20'
|
||||
: 'border-border-soft bg-surface/95 shadow-[0_6px_18px_rgba(4,8,17,0.5)] hover:border-border-strong hover:bg-surface-raised/95';
|
||||
|
||||
const graphDetailHref = parentEpic
|
||||
? (() => {
|
||||
const url = new URL(graphBaseHref, 'http://localhost');
|
||||
url.searchParams.set('epic', parentEpic.id);
|
||||
url.searchParams.set('task', issue.id);
|
||||
url.searchParams.set('tab', 'tasks');
|
||||
return `${url.pathname}${url.search}`;
|
||||
})()
|
||||
: null;
|
||||
|
||||
return (
|
||||
<motion.button
|
||||
<motion.article
|
||||
layout
|
||||
transition={{ duration: 0.18, ease: 'easeOut' }}
|
||||
type="button"
|
||||
draggable={draggable}
|
||||
onDragStartCapture={(event) => onNativeDragStart?.(issue, event)}
|
||||
onClick={() => onSelect(issue)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === 'Enter' || event.key === ' ') {
|
||||
event.preventDefault();
|
||||
onSelect(issue);
|
||||
}
|
||||
}}
|
||||
className={`w-full cursor-pointer rounded-2xl border px-3 py-2.5 text-left transition ${selectedClass} ${
|
||||
pending ? 'opacity-70' : ''
|
||||
}`}
|
||||
>
|
||||
<div className="font-mono text-[11px] text-text-muted break-all">{issue.id}</div>
|
||||
{projectName ? (
|
||||
<div className="mt-1">
|
||||
<span className="rounded-md border border-sky-300/25 bg-sky-500/10 px-1.5 py-0.5 font-mono text-[10px] text-sky-200">
|
||||
project: {projectName}
|
||||
</span>
|
||||
</div>
|
||||
) : null}
|
||||
<div className="mt-1 text-sm font-semibold leading-5 text-text-strong break-words">{issue.title}</div>
|
||||
<div className="mt-2 flex flex-wrap gap-1.5">
|
||||
<span
|
||||
|
|
@ -58,10 +99,23 @@ export function KanbanCard({ issue, selected, pending = false, draggable = false
|
|||
</span>
|
||||
<Chip>{issue.issue_type}</Chip>
|
||||
<Chip tone="status">deps {issue.dependencies.length}</Chip>
|
||||
{unblocksCount > 0 ? <Chip tone="status">Unblocks {unblocksCount}</Chip> : null}
|
||||
</div>
|
||||
<div className="mt-2 break-words font-mono text-xs text-amber-100/90">
|
||||
{issue.assignee ? `@${issue.assignee}` : 'unassigned'}
|
||||
</div>
|
||||
<div className="mt-1 font-mono text-[11px] text-text-muted">{formatUpdatedRecency(issue.updated_at)}</div>
|
||||
{parentEpic ? (
|
||||
<div className="mt-2">
|
||||
<Link
|
||||
href={graphDetailHref ?? graphBaseHref}
|
||||
className="inline-flex items-center gap-1 rounded-md border border-sky-300/25 bg-sky-500/10 px-2 py-1 font-mono text-[11px] text-sky-200 hover:border-sky-300/45 hover:bg-sky-500/15"
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
>
|
||||
epic: {parentEpic.title}
|
||||
</Link>
|
||||
</div>
|
||||
) : null}
|
||||
{issue.labels.length > 0 ? (
|
||||
<div className="mt-2 flex flex-wrap gap-1.5">
|
||||
{issue.labels.slice(0, 3).map((label) => (
|
||||
|
|
@ -70,6 +124,6 @@ export function KanbanCard({ issue, selected, pending = false, draggable = false
|
|||
</div>
|
||||
) : null}
|
||||
{pending ? <div className="mt-2 text-[11px] font-medium text-amber-200">Saving…</div> : null}
|
||||
</motion.button>
|
||||
</motion.article>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,11 +10,19 @@ interface KanbanControlsProps {
|
|||
filters: KanbanFilterOptions;
|
||||
stats: KanbanStats;
|
||||
onFiltersChange: (filters: KanbanFilterOptions) => void;
|
||||
onNextActionable: () => void;
|
||||
nextActionableFeedback?: string | null;
|
||||
}
|
||||
|
||||
export function KanbanControls({ filters, stats, onFiltersChange }: KanbanControlsProps) {
|
||||
export function KanbanControls({
|
||||
filters,
|
||||
stats,
|
||||
onFiltersChange,
|
||||
onNextActionable,
|
||||
nextActionableFeedback = null,
|
||||
}: KanbanControlsProps) {
|
||||
const inputClass =
|
||||
'rounded-xl border border-border-soft bg-surface-muted/78 px-3 py-2.5 text-sm text-text-strong outline-none transition placeholder:text-text-muted focus:border-border-strong focus:ring-2 focus:ring-white/10';
|
||||
'ui-field rounded-xl px-3 py-2.5 text-sm outline-none transition';
|
||||
|
||||
return (
|
||||
<section className="grid gap-3">
|
||||
|
|
@ -29,28 +37,28 @@ export function KanbanControls({ filters, stats, onFiltersChange }: KanbanContro
|
|||
<select
|
||||
value={filters.type ?? ''}
|
||||
onChange={(event) => onFiltersChange({ ...filters, type: event.target.value })}
|
||||
className={`${inputClass} w-full sm:w-44`}
|
||||
className={`${inputClass} ui-select w-full sm:w-44`}
|
||||
aria-label="Type filter"
|
||||
>
|
||||
<option value="">All types</option>
|
||||
<option value="task">Task</option>
|
||||
<option value="bug">Bug</option>
|
||||
<option value="feature">Feature</option>
|
||||
<option value="epic">Epic</option>
|
||||
<option value="chore">Chore</option>
|
||||
<option className="ui-option" value="">All types</option>
|
||||
<option className="ui-option" value="task">Task</option>
|
||||
<option className="ui-option" value="bug">Bug</option>
|
||||
<option className="ui-option" value="feature">Feature</option>
|
||||
<option className="ui-option" value="epic">Epic</option>
|
||||
<option className="ui-option" value="chore">Chore</option>
|
||||
</select>
|
||||
<select
|
||||
value={filters.priority ?? ''}
|
||||
onChange={(event) => onFiltersChange({ ...filters, priority: event.target.value })}
|
||||
className={`${inputClass} w-full sm:w-36`}
|
||||
className={`${inputClass} ui-select w-full sm:w-36`}
|
||||
aria-label="Priority filter"
|
||||
>
|
||||
<option value="">All priorities</option>
|
||||
<option value="0">P0</option>
|
||||
<option value="1">P1</option>
|
||||
<option value="2">P2</option>
|
||||
<option value="3">P3</option>
|
||||
<option value="4">P4</option>
|
||||
<option className="ui-option" value="">All priorities</option>
|
||||
<option className="ui-option" value="0">P0</option>
|
||||
<option className="ui-option" value="1">P1</option>
|
||||
<option className="ui-option" value="2">P2</option>
|
||||
<option className="ui-option" value="3">P3</option>
|
||||
<option className="ui-option" value="4">P4</option>
|
||||
</select>
|
||||
<label className="inline-flex w-full items-center justify-center gap-2 rounded-xl border border-border-soft bg-surface-muted/60 px-3 py-2 text-sm text-text-body sm:w-auto sm:justify-start">
|
||||
<input
|
||||
|
|
@ -61,15 +69,25 @@ export function KanbanControls({ filters, stats, onFiltersChange }: KanbanContro
|
|||
/>
|
||||
Show closed
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onNextActionable}
|
||||
className="w-full rounded-xl border border-border-soft bg-surface-muted/70 px-3 py-2 text-sm font-semibold text-text-body transition hover:border-border-strong hover:bg-surface-raised sm:w-auto"
|
||||
>
|
||||
Next Actionable
|
||||
</button>
|
||||
</motion.div>
|
||||
<motion.div layout className="flex flex-wrap gap-2">
|
||||
<StatPill label="Total" value={stats.total} />
|
||||
<StatPill label="Open" value={stats.open} />
|
||||
<StatPill label="Ready" value={stats.ready} />
|
||||
<StatPill label="Active" value={stats.active} />
|
||||
<StatPill label="Blocked" value={stats.blocked} />
|
||||
<StatPill label="Done" value={stats.done} />
|
||||
<StatPill label="P0" value={stats.p0} tone={stats.p0 > 0 ? 'critical' : 'default'} />
|
||||
</motion.div>
|
||||
{nextActionableFeedback ? (
|
||||
<p className="text-xs text-text-muted">{nextActionableFeedback}</p>
|
||||
) : null}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,65 +1,434 @@
|
|||
'use client';
|
||||
|
||||
import { AnimatePresence, motion } from 'framer-motion';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
|
||||
import { buildExecutionChecklist, type BlockedTreeNode } from '../../lib/kanban';
|
||||
import {
|
||||
buildEditableIssueDraft,
|
||||
buildIssueUpdatePayload,
|
||||
validateEditableIssueDraft,
|
||||
type EditableIssueDraft,
|
||||
type EditableIssueFieldErrors,
|
||||
} from '../../lib/issue-editor';
|
||||
import type { UpdateMutationPayload } from '../../lib/mutations';
|
||||
import type { BeadIssue } from '../../lib/types';
|
||||
|
||||
import { Chip } from '../shared/chip';
|
||||
|
||||
interface KanbanDetailProps {
|
||||
issue: BeadIssue | null;
|
||||
issues?: BeadIssue[];
|
||||
framed?: boolean;
|
||||
blockedTree?: { total: number; nodes: BlockedTreeNode[] };
|
||||
outgoingBlocks?: { id: string; title: string; status: string }[];
|
||||
onSelectBlockedIssue?: (issueId: string) => void;
|
||||
projectRoot?: string;
|
||||
editable?: boolean;
|
||||
onIssueUpdated?: (issueId: string) => Promise<void> | void;
|
||||
}
|
||||
|
||||
export function KanbanDetail({ issue, framed = true }: KanbanDetailProps) {
|
||||
const LEVEL_INDENT: Record<number, string> = {
|
||||
1: 'ml-0',
|
||||
2: 'ml-3',
|
||||
3: 'ml-6',
|
||||
};
|
||||
|
||||
async function postIssueUpdate(body: UpdateMutationPayload): Promise<void> {
|
||||
const response = await fetch('/api/beads/update', {
|
||||
method: 'POST',
|
||||
headers: { 'content-type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
const payload = (await response.json()) as { ok: boolean; error?: { message?: string } };
|
||||
if (!response.ok || !payload.ok) {
|
||||
throw new Error(payload.error?.message ?? 'Update failed');
|
||||
}
|
||||
}
|
||||
|
||||
export function KanbanDetail({
|
||||
issue,
|
||||
issues = [],
|
||||
framed = true,
|
||||
blockedTree,
|
||||
outgoingBlocks = [],
|
||||
onSelectBlockedIssue,
|
||||
projectRoot,
|
||||
editable = true,
|
||||
onIssueUpdated,
|
||||
}: KanbanDetailProps) {
|
||||
const frameClass = framed ? 'rounded-2xl border border-border-soft bg-surface/90 p-4 shadow-panel' : 'p-1';
|
||||
const sectionClass = 'rounded-xl border border-border-soft/70 bg-surface/55 px-2.5 py-2';
|
||||
const [editMode, setEditMode] = useState(false);
|
||||
const [draft, setDraft] = useState<EditableIssueDraft | null>(null);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [saveError, setSaveError] = useState<string | null>(null);
|
||||
const [fieldErrors, setFieldErrors] = useState<EditableIssueFieldErrors>({});
|
||||
const [optimisticIssue, setOptimisticIssue] = useState<BeadIssue | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setEditMode(false);
|
||||
setSaving(false);
|
||||
setSaveError(null);
|
||||
setFieldErrors({});
|
||||
setDraft(issue ? buildEditableIssueDraft(issue) : null);
|
||||
setOptimisticIssue(issue);
|
||||
}, [issue]);
|
||||
|
||||
const effectiveIssue = optimisticIssue ?? issue;
|
||||
const executionChecklist = useMemo(
|
||||
() => (effectiveIssue ? buildExecutionChecklist(effectiveIssue, issues) : []),
|
||||
[effectiveIssue, issues],
|
||||
);
|
||||
const projectName = (effectiveIssue as BeadIssue & { project?: { name?: string } } | null)?.project?.name ?? null;
|
||||
const formattedSummary = effectiveIssue?.description?.replace(/\s-\s/g, '\n- ') ?? '';
|
||||
|
||||
const beginEdit = () => {
|
||||
if (!effectiveIssue) {
|
||||
return;
|
||||
}
|
||||
setEditMode(true);
|
||||
setDraft(buildEditableIssueDraft(effectiveIssue));
|
||||
setFieldErrors({});
|
||||
setSaveError(null);
|
||||
};
|
||||
|
||||
const cancelEdit = () => {
|
||||
if (effectiveIssue) {
|
||||
setDraft(buildEditableIssueDraft(effectiveIssue));
|
||||
}
|
||||
setEditMode(false);
|
||||
setFieldErrors({});
|
||||
setSaveError(null);
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!effectiveIssue || !draft || !projectRoot || !editable) {
|
||||
return;
|
||||
}
|
||||
|
||||
const validation = validateEditableIssueDraft(draft);
|
||||
if (!validation.ok) {
|
||||
setFieldErrors(validation.errors);
|
||||
return;
|
||||
}
|
||||
|
||||
const payload = buildIssueUpdatePayload(effectiveIssue, draft, projectRoot);
|
||||
if (!payload) {
|
||||
setEditMode(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setSaving(true);
|
||||
setSaveError(null);
|
||||
setFieldErrors({});
|
||||
try {
|
||||
await postIssueUpdate(payload);
|
||||
setOptimisticIssue((current) => {
|
||||
if (!current) {
|
||||
return current;
|
||||
}
|
||||
return {
|
||||
...current,
|
||||
title: payload.title ?? current.title,
|
||||
description: payload.description ?? current.description,
|
||||
status: payload.status ?? current.status,
|
||||
priority: payload.priority ?? current.priority,
|
||||
issue_type: payload.issueType ?? current.issue_type,
|
||||
assignee: payload.assignee ?? current.assignee,
|
||||
labels: payload.labels ?? current.labels,
|
||||
};
|
||||
});
|
||||
await onIssueUpdated?.(effectiveIssue.id);
|
||||
setEditMode(false);
|
||||
} catch (error) {
|
||||
setSaveError(error instanceof Error ? error.message : 'Save failed');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<AnimatePresence mode="wait" initial={false}>
|
||||
{issue ? (
|
||||
{effectiveIssue ? (
|
||||
<motion.aside
|
||||
key={issue.id}
|
||||
key={effectiveIssue.id}
|
||||
initial={{ opacity: 0, x: 24 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: 24 }}
|
||||
transition={{ duration: 0.2, ease: 'easeOut' }}
|
||||
className={frameClass}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div>
|
||||
<div className="font-mono text-xs text-text-muted break-all">{issue.id}</div>
|
||||
<h2 className="mt-1 text-lg font-semibold leading-7 text-text-strong sm:text-xl">{issue.title}</h2>
|
||||
<div className="flex flex-col gap-2 border-b border-border-soft/60 pb-3">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="font-mono text-xs text-text-muted break-all">{effectiveIssue.id}</div>
|
||||
<h2 className="mt-1 break-words text-lg font-semibold leading-7 text-text-strong sm:text-xl">{effectiveIssue.title}</h2>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-2 self-start">
|
||||
<Chip tone="status">{effectiveIssue.status}</Chip>
|
||||
<Chip tone="priority">P{effectiveIssue.priority}</Chip>
|
||||
{effectiveIssue.assignee ? <Chip>@{effectiveIssue.assignee}</Chip> : null}
|
||||
{projectName ? <Chip tone="status">project {projectName}</Chip> : null}
|
||||
{projectRoot && editable ? (
|
||||
<button
|
||||
type="button"
|
||||
className="whitespace-nowrap rounded-md border border-border-soft bg-surface-muted/70 px-2 py-1 text-xs text-text-body hover:bg-surface-raised"
|
||||
onClick={editMode ? cancelEdit : beginEdit}
|
||||
>
|
||||
{editMode ? 'Cancel edit' : 'Edit'}
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
<Chip tone="status">{issue.status}</Chip>
|
||||
</div>
|
||||
{issue.description ? <p className="mt-3 text-sm leading-6 text-text-body break-words">{issue.description}</p> : null}
|
||||
<div className="mt-3 flex flex-wrap gap-1.5">
|
||||
<Chip tone="priority">priority {issue.priority}</Chip>
|
||||
<Chip>{issue.issue_type}</Chip>
|
||||
<Chip>{issue.assignee ? `@${issue.assignee}` : 'unassigned'}</Chip>
|
||||
<Chip>{issue.dependencies.length} dependencies</Chip>
|
||||
|
||||
{editMode && draft ? (
|
||||
<section className={`mt-3 ${sectionClass}`}>
|
||||
<div className="mb-2 flex items-center justify-between gap-2">
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.12em] text-text-muted">Edit fields</p>
|
||||
{saving ? <span className="text-xs text-sky-100">Saving...</span> : null}
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<label className="text-xs text-text-muted">
|
||||
Title
|
||||
<input
|
||||
className="ui-field mt-1 w-full rounded-md px-2 py-1 text-sm"
|
||||
value={draft.title}
|
||||
onChange={(event) => setDraft((current) => (current ? { ...current, title: event.target.value } : current))}
|
||||
/>
|
||||
</label>
|
||||
{fieldErrors.title ? <p className="text-xs text-rose-200">{fieldErrors.title}</p> : null}
|
||||
|
||||
<label className="text-xs text-text-muted">
|
||||
Description
|
||||
<textarea
|
||||
className="ui-field mt-1 min-h-20 w-full rounded-md px-2 py-1 text-sm"
|
||||
value={draft.description}
|
||||
onChange={(event) => setDraft((current) => (current ? { ...current, description: event.target.value } : current))}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
|
||||
<label className="text-xs text-text-muted">
|
||||
Status
|
||||
<select
|
||||
className="ui-field ui-select mt-1 w-full rounded-md px-2 py-1 text-sm"
|
||||
value={draft.status}
|
||||
onChange={(event) =>
|
||||
setDraft((current) => (current ? { ...current, status: event.target.value as EditableIssueDraft['status'] } : current))
|
||||
}
|
||||
>
|
||||
<option value="open">open</option>
|
||||
<option value="in_progress">in_progress</option>
|
||||
<option value="blocked">blocked</option>
|
||||
<option value="deferred">deferred</option>
|
||||
<option value="closed">closed</option>
|
||||
</select>
|
||||
</label>
|
||||
<label className="text-xs text-text-muted">
|
||||
Priority
|
||||
<select
|
||||
className="ui-field ui-select mt-1 w-full rounded-md px-2 py-1 text-sm"
|
||||
value={String(draft.priority)}
|
||||
onChange={(event) => setDraft((current) => (current ? { ...current, priority: Number(event.target.value) } : current))}
|
||||
>
|
||||
{[0, 1, 2, 3, 4].map((priority) => (
|
||||
<option key={priority} value={priority}>
|
||||
{priority}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<label className="text-xs text-text-muted">
|
||||
Type
|
||||
<input
|
||||
className="ui-field mt-1 w-full rounded-md px-2 py-1 text-sm"
|
||||
value={draft.issueType}
|
||||
onChange={(event) => setDraft((current) => (current ? { ...current, issueType: event.target.value } : current))}
|
||||
/>
|
||||
</label>
|
||||
{fieldErrors.status ? <p className="text-xs text-rose-200">{fieldErrors.status}</p> : null}
|
||||
{fieldErrors.priority ? <p className="text-xs text-rose-200">{fieldErrors.priority}</p> : null}
|
||||
{fieldErrors.issueType ? <p className="text-xs text-rose-200">{fieldErrors.issueType}</p> : null}
|
||||
|
||||
<label className="text-xs text-text-muted">
|
||||
Assignee
|
||||
<input
|
||||
className="ui-field mt-1 w-full rounded-md px-2 py-1 text-sm"
|
||||
value={draft.assignee}
|
||||
onChange={(event) => setDraft((current) => (current ? { ...current, assignee: event.target.value } : current))}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="text-xs text-text-muted">
|
||||
Owner (read-only from beads)
|
||||
<input className="ui-field mt-1 w-full rounded-md px-2 py-1 text-sm opacity-70" value={draft.owner} disabled />
|
||||
</label>
|
||||
|
||||
<label className="text-xs text-text-muted">
|
||||
Labels (comma separated)
|
||||
<input
|
||||
className="ui-field mt-1 w-full rounded-md px-2 py-1 text-sm"
|
||||
value={draft.labelsInput}
|
||||
onChange={(event) => setDraft((current) => (current ? { ...current, labelsInput: event.target.value } : current))}
|
||||
/>
|
||||
</label>
|
||||
{fieldErrors.labelsInput ? <p className="text-xs text-rose-200">{fieldErrors.labelsInput}</p> : null}
|
||||
</div>
|
||||
{saveError ? <p className="mt-2 text-xs text-rose-200">{saveError}</p> : null}
|
||||
<div className="mt-3 flex items-center justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="rounded-md border border-border-soft bg-surface-muted/70 px-2 py-1 text-xs text-text-body hover:bg-surface-raised"
|
||||
onClick={cancelEdit}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
disabled={saving}
|
||||
className="rounded-md border border-sky-300/50 bg-sky-500/15 px-2 py-1 text-xs text-sky-100 hover:bg-sky-500/25 disabled:opacity-60"
|
||||
onClick={() => void handleSave()}
|
||||
>
|
||||
{saving ? 'Saving...' : 'Save changes'}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
) : null}
|
||||
|
||||
<div className="mt-3 space-y-3">
|
||||
<section className={sectionClass}>
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.12em] text-text-muted">Summary</p>
|
||||
{effectiveIssue.description ? (
|
||||
<p className="mt-1.5 whitespace-pre-line text-sm leading-6 text-text-body break-words">{formattedSummary}</p>
|
||||
) : (
|
||||
<p className="mt-1.5 text-sm text-text-muted">No description provided.</p>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className={sectionClass}>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.12em] text-text-muted">Execution checklist</p>
|
||||
<span className="rounded-md border border-border-soft/70 bg-surface-muted/60 px-1.5 py-0.5 text-[10px] font-mono text-text-body">
|
||||
{executionChecklist.filter((item) => item.passed).length}/{executionChecklist.length}
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-1.5 space-y-1">
|
||||
{executionChecklist.map((item) => (
|
||||
<div
|
||||
key={`${effectiveIssue.id}-${item.key}`}
|
||||
className="flex items-center justify-between rounded-md border border-border-soft/60 bg-surface-muted/40 px-2 py-1 text-xs"
|
||||
>
|
||||
<span className="text-text-body">{item.label}</span>
|
||||
<span className={`font-mono ${item.passed ? 'text-emerald-200' : 'text-rose-200'}`}>
|
||||
{item.passed ? 'pass' : 'fail'}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<dl className="mt-4 grid gap-1.5 text-sm text-text-body">
|
||||
<div>
|
||||
<dt className="inline font-semibold text-text-strong">Created:</dt>{' '}
|
||||
<dd className="inline break-all">{issue.created_at || '-'}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="inline font-semibold text-text-strong">Updated:</dt>{' '}
|
||||
<dd className="inline break-all">{issue.updated_at || '-'}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="inline font-semibold text-text-strong">Closed:</dt>{' '}
|
||||
<dd className="inline">{issue.closed_at || '-'}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
{issue.labels.length > 0 ? (
|
||||
<div className="mt-4 flex flex-wrap gap-1.5">
|
||||
{issue.labels.map((label) => (
|
||||
<Chip key={`${issue.id}-${label}`}>#{label}</Chip>
|
||||
))}
|
||||
|
||||
{blockedTree && blockedTree.total > 0 ? (
|
||||
<div className={`mt-3 rounded-xl border border-rose-500/20 bg-rose-500/5 px-2.5 py-2`}>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.12em] text-rose-200">Blocked by</p>
|
||||
<span className="rounded-md border border-rose-500/30 bg-rose-500/10 px-1.5 py-0.5 text-[10px] font-mono text-rose-100">
|
||||
{blockedTree.total}
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-1.5 space-y-1">
|
||||
{blockedTree.nodes.map((node) => (
|
||||
<button
|
||||
key={node.id}
|
||||
type="button"
|
||||
onClick={() => onSelectBlockedIssue?.(node.id)}
|
||||
className={`block w-full rounded-md border border-rose-500/20 bg-rose-500/5 px-2 py-1 text-left hover:border-rose-500/40 hover:bg-rose-500/10 ${LEVEL_INDENT[node.level] ?? 'ml-6'
|
||||
}`}
|
||||
>
|
||||
<div className="font-mono text-[10px] text-rose-300/70">{node.id}</div>
|
||||
<div className="line-clamp-1 text-xs text-rose-100">{node.title}</div>
|
||||
</button>
|
||||
))}
|
||||
{blockedTree.total > blockedTree.nodes.length ? (
|
||||
<p className="text-[10px] text-rose-300/50">+{blockedTree.total - blockedTree.nodes.length} more blockers</p>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* Outgoing Blocks (Unlocks) */}
|
||||
{outgoingBlocks.length > 0 ? (
|
||||
<div className={`mt-3 rounded-xl border border-emerald-500/20 bg-emerald-500/5 px-2.5 py-2`}>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.12em] text-emerald-200">Unlocks</p>
|
||||
<span className="rounded-md border border-emerald-500/30 bg-emerald-500/10 px-1.5 py-0.5 text-[10px] font-mono text-emerald-100">
|
||||
{outgoingBlocks.length}
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-1.5 space-y-1">
|
||||
{outgoingBlocks.map((block) => (
|
||||
<button
|
||||
key={block.id}
|
||||
type="button"
|
||||
onClick={() => onSelectBlockedIssue?.(block.id)}
|
||||
className="block w-full rounded-md border border-emerald-500/20 bg-emerald-500/5 px-2 py-1 text-left hover:border-emerald-500/40 hover:bg-emerald-500/10"
|
||||
>
|
||||
<div className="font-mono text-[10px] text-emerald-300/70">{block.id}</div>
|
||||
<div className="line-clamp-1 text-xs text-emerald-100">{block.title}</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* Collapsible Metadata Section */}
|
||||
<details className="group mt-3">
|
||||
<summary className="flex cursor-pointer items-center gap-2 rounded-lg border border-white/5 bg-white/[0.02] p-2 text-[10px] font-semibold uppercase tracking-widest text-text-muted transition-colors hover:bg-white/5">
|
||||
<span>Task metadata</span>
|
||||
<span className="ml-auto transition-transform group-open:rotate-180">▼</span>
|
||||
</summary>
|
||||
<div className="mt-2 space-y-3 pl-1">
|
||||
<section className={sectionClass}>
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.12em] text-text-muted">Properties</p>
|
||||
<div className="mt-1.5 flex flex-wrap gap-1.5">
|
||||
<Chip>{effectiveIssue.issue_type}</Chip>
|
||||
<Chip>{effectiveIssue.dependencies.length} dependencies</Chip>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className={sectionClass}>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.12em] text-text-muted">Timeline</p>
|
||||
</div>
|
||||
<dl className="mt-1.5 grid gap-1.5 text-sm text-text-body">
|
||||
<div>
|
||||
<dt className="inline font-semibold text-text-strong">Created:</dt>{' '}
|
||||
<dd className="inline break-all">{effectiveIssue.created_at || '-'}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="inline font-semibold text-text-strong">Updated:</dt>{' '}
|
||||
<dd className="inline break-all">{effectiveIssue.updated_at || '-'}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt className="inline font-semibold text-text-strong">Closed:</dt>{' '}
|
||||
<dd className="inline">{effectiveIssue.closed_at || '-'}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
{effectiveIssue.labels.length > 0 ? (
|
||||
<section className={sectionClass}>
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.12em] text-text-muted">Labels</p>
|
||||
<div className="mt-1.5 flex flex-wrap gap-1.5">
|
||||
{effectiveIssue.labels.map((label) => (
|
||||
<Chip key={`${effectiveIssue.id}-${label}`}>#{label}</Chip>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
) : null}
|
||||
</div>
|
||||
</details>
|
||||
</motion.aside>
|
||||
) : (
|
||||
<motion.aside
|
||||
|
|
|
|||
|
|
@ -1,20 +1,34 @@
|
|||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import Link from 'next/link';
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
|
||||
import type { KanbanFilterOptions, KanbanStatus } from '../../lib/kanban';
|
||||
import { buildKanbanColumns, buildKanbanStats, filterKanbanIssues } from '../../lib/kanban';
|
||||
import {
|
||||
buildBlockedByTree,
|
||||
buildKanbanColumns,
|
||||
buildKanbanStats,
|
||||
filterKanbanIssues,
|
||||
findIssueLane,
|
||||
laneToMutationStatus,
|
||||
pickNextActionableIssue,
|
||||
} from '../../lib/kanban';
|
||||
import type { BeadIssue } from '../../lib/types';
|
||||
import type { ProjectScopeOption } from '../../lib/project-scope';
|
||||
import { applyOptimisticStatus, planStatusTransition } from '../../lib/writeback';
|
||||
|
||||
import { KanbanBoard } from './kanban-board';
|
||||
import { KanbanControls } from './kanban-controls';
|
||||
import { KanbanDetail } from './kanban-detail';
|
||||
import { ProjectScopeControls } from '../shared/project-scope-controls';
|
||||
|
||||
interface KanbanPageProps {
|
||||
issues: BeadIssue[];
|
||||
projectRoot: string;
|
||||
projectScopeKey: string;
|
||||
projectScopeOptions: ProjectScopeOption[];
|
||||
projectScopeMode: 'single' | 'aggregate';
|
||||
}
|
||||
|
||||
type MutationOperation = 'create' | 'update' | 'close' | 'reopen' | 'comment';
|
||||
|
|
@ -47,7 +61,13 @@ async function fetchIssues(projectRoot: string): Promise<BeadIssue[]> {
|
|||
return payload.issues;
|
||||
}
|
||||
|
||||
export function KanbanPage({ issues, projectRoot }: KanbanPageProps) {
|
||||
export function KanbanPage({
|
||||
issues,
|
||||
projectRoot,
|
||||
projectScopeKey,
|
||||
projectScopeOptions,
|
||||
projectScopeMode,
|
||||
}: KanbanPageProps) {
|
||||
const [localIssues, setLocalIssues] = useState<BeadIssue[]>(issues);
|
||||
const [filters, setFilters] = useState<KanbanFilterOptions>({
|
||||
query: '',
|
||||
|
|
@ -57,8 +77,9 @@ export function KanbanPage({ issues, projectRoot }: KanbanPageProps) {
|
|||
});
|
||||
const [selectedIssueId, setSelectedIssueId] = useState<string | null>(null);
|
||||
const [mobileDetailOpen, setMobileDetailOpen] = useState(false);
|
||||
const [activeStatus, setActiveStatus] = useState<KanbanStatus | null>('open');
|
||||
const [activeStatus, setActiveStatus] = useState<KanbanStatus | null>('ready');
|
||||
const [desktopDetailMinimized, setDesktopDetailMinimized] = useState(false);
|
||||
const [nextActionableFeedback, setNextActionableFeedback] = useState<string | null>(null);
|
||||
const [pendingIssueIds, setPendingIssueIds] = useState<Set<string>>(new Set());
|
||||
const [mutationError, setMutationError] = useState<string | null>(null);
|
||||
const refreshInFlightRef = useRef(false);
|
||||
|
|
@ -70,9 +91,83 @@ export function KanbanPage({ issues, projectRoot }: KanbanPageProps) {
|
|||
const filteredIssues = useMemo(() => filterKanbanIssues(localIssues, filters), [localIssues, filters]);
|
||||
const columns = useMemo(() => buildKanbanColumns(filteredIssues), [filteredIssues]);
|
||||
const stats = useMemo(() => buildKanbanStats(filteredIssues), [filteredIssues]);
|
||||
const parentEpicByIssueId = useMemo(() => {
|
||||
const epicById = new Map(
|
||||
localIssues.filter((issue) => issue.issue_type === 'epic').map((epic) => [epic.id, epic]),
|
||||
);
|
||||
const map = new Map<string, { id: string; title: string }>();
|
||||
|
||||
for (const issue of localIssues) {
|
||||
if (issue.issue_type === 'epic') {
|
||||
continue;
|
||||
}
|
||||
const parentDep = issue.dependencies.find((dependency) => dependency.type === 'parent');
|
||||
const inferredParent = issue.id.includes('.') ? issue.id.split('.')[0] : null;
|
||||
const parentEpicId = parentDep?.target ?? inferredParent;
|
||||
if (!parentEpicId) {
|
||||
continue;
|
||||
}
|
||||
const parentEpic = epicById.get(parentEpicId);
|
||||
if (!parentEpic) {
|
||||
continue;
|
||||
}
|
||||
map.set(issue.id, { id: parentEpic.id, title: parentEpic.title });
|
||||
}
|
||||
|
||||
return map;
|
||||
}, [localIssues]);
|
||||
|
||||
const selectedIssue = useMemo(() => filteredIssues.find((issue) => issue.id === selectedIssueId) ?? null, [filteredIssues, selectedIssueId]);
|
||||
const activeScope = useMemo(
|
||||
() => projectScopeOptions.find((option) => option.key === projectScopeKey) ?? projectScopeOptions[0] ?? null,
|
||||
[projectScopeKey, projectScopeOptions],
|
||||
);
|
||||
const graphHref = useMemo(() => {
|
||||
const params = new URLSearchParams();
|
||||
if (projectScopeMode !== 'single') {
|
||||
params.set('mode', projectScopeMode);
|
||||
}
|
||||
if (projectScopeKey !== 'local') {
|
||||
params.set('project', projectScopeKey);
|
||||
}
|
||||
const query = params.toString();
|
||||
return query ? `/graph?${query}` : '/graph';
|
||||
}, [projectScopeKey, projectScopeMode]);
|
||||
const allowMutations = projectScopeMode === 'single';
|
||||
const blockedTree = useMemo(
|
||||
() => buildBlockedByTree(filteredIssues, selectedIssue?.id ?? null, { maxNodes: 8 }),
|
||||
[filteredIssues, selectedIssue?.id],
|
||||
);
|
||||
const nextActionableIssue = useMemo(
|
||||
() => pickNextActionableIssue(columns, filteredIssues),
|
||||
[columns, filteredIssues],
|
||||
);
|
||||
const showDesktopDetail = Boolean(selectedIssue) && !desktopDetailMinimized;
|
||||
const focusIssueFromDetailLink = useCallback(
|
||||
(issueId: string) => {
|
||||
setSelectedIssueId(issueId);
|
||||
setDesktopDetailMinimized(false);
|
||||
const lane = findIssueLane(columns, issueId);
|
||||
setActiveStatus(lane ?? 'ready');
|
||||
},
|
||||
[columns],
|
||||
);
|
||||
|
||||
const selectIssueWithDetailBehavior = useCallback((issueId: string, lane: KanbanStatus = 'ready') => {
|
||||
setSelectedIssueId(issueId);
|
||||
setActiveStatus(lane);
|
||||
setDesktopDetailMinimized(false);
|
||||
setMobileDetailOpen(true);
|
||||
}, []);
|
||||
|
||||
const handleNextActionable = useCallback(() => {
|
||||
if (!nextActionableIssue) {
|
||||
setNextActionableFeedback('No ready issue available for current filters.');
|
||||
return;
|
||||
}
|
||||
setNextActionableFeedback(null);
|
||||
selectIssueWithDetailBehavior(nextActionableIssue.id, 'ready');
|
||||
}, [nextActionableIssue, selectIssueWithDetailBehavior]);
|
||||
|
||||
const refreshIssues = useCallback(async (options: { silent?: boolean } = {}) => {
|
||||
if (refreshInFlightRef.current) {
|
||||
|
|
@ -93,6 +188,9 @@ export function KanbanPage({ issues, projectRoot }: KanbanPageProps) {
|
|||
}, [projectRoot]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!allowMutations) {
|
||||
return;
|
||||
}
|
||||
const source = new EventSource(`/api/events?projectRoot=${encodeURIComponent(projectRoot)}`);
|
||||
const onIssues = () => {
|
||||
void refreshIssues({ silent: true });
|
||||
|
|
@ -104,10 +202,14 @@ export function KanbanPage({ issues, projectRoot }: KanbanPageProps) {
|
|||
source.removeEventListener('issues', onIssues as EventListener);
|
||||
source.close();
|
||||
};
|
||||
}, [projectRoot, refreshIssues]);
|
||||
}, [allowMutations, projectRoot, refreshIssues]);
|
||||
|
||||
const mutateStatus = async (issue: BeadIssue, targetStatus: KanbanStatus) => {
|
||||
const steps = planStatusTransition(issue, targetStatus);
|
||||
if (!allowMutations) {
|
||||
return;
|
||||
}
|
||||
const mutationStatus = laneToMutationStatus(targetStatus);
|
||||
const steps = planStatusTransition(issue, mutationStatus);
|
||||
if (steps.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -115,7 +217,7 @@ export function KanbanPage({ issues, projectRoot }: KanbanPageProps) {
|
|||
setMutationError(null);
|
||||
const previous = localIssues;
|
||||
setPendingIssueIds((value) => new Set(value).add(issue.id));
|
||||
setLocalIssues((current) => applyOptimisticStatus(current, issue.id, targetStatus));
|
||||
setLocalIssues((current) => applyOptimisticStatus(current, issue.id, mutationStatus));
|
||||
|
||||
try {
|
||||
for (const step of steps) {
|
||||
|
|
@ -142,10 +244,39 @@ export function KanbanPage({ issues, projectRoot }: KanbanPageProps) {
|
|||
<main className="mx-auto min-h-screen max-w-[1800px] px-4 py-4 sm:px-6 sm:py-6">
|
||||
<header className="mb-4 rounded-2xl border border-border-soft bg-surface/90 px-4 py-4 shadow-card backdrop-blur md:px-5">
|
||||
<p className="font-mono text-xs uppercase tracking-[0.14em] text-text-muted">BeadBoard</p>
|
||||
<h1 className="mt-1 text-2xl font-semibold text-text-strong sm:text-3xl">Kanban Dashboard</h1>
|
||||
<div className="mt-1 flex flex-wrap items-center gap-3">
|
||||
<h1 className="text-2xl font-semibold text-text-strong sm:text-3xl">Kanban Dashboard</h1>
|
||||
<Link href={graphHref} className="rounded-lg border border-border-soft bg-surface-muted/70 px-2.5 py-1 text-xs text-text-body hover:bg-surface-raised">
|
||||
Open Graph
|
||||
</Link>
|
||||
</div>
|
||||
<p className="mt-2 text-sm text-text-muted">Tracer Bullet 1 from live `.beads/issues.jsonl` on Windows-native paths.</p>
|
||||
{activeScope ? (
|
||||
<p className="mt-2 text-xs text-text-muted">
|
||||
Scope:{' '}
|
||||
<span className="rounded-md border border-border-soft bg-surface-muted/50 px-2 py-0.5 font-mono text-[11px] text-text-body">
|
||||
{activeScope.source === 'local' ? 'local workspace' : activeScope.displayPath}
|
||||
</span>
|
||||
</p>
|
||||
) : null}
|
||||
<div className="mt-3">
|
||||
<ProjectScopeControls
|
||||
projectScopeKey={projectScopeKey}
|
||||
projectScopeMode={projectScopeMode}
|
||||
projectScopeOptions={projectScopeOptions}
|
||||
/>
|
||||
</div>
|
||||
{!allowMutations ? (
|
||||
<p className="mt-2 text-xs text-amber-200/90">Aggregate mode is read-only. Switch to single project mode to edit status/details.</p>
|
||||
) : null}
|
||||
</header>
|
||||
<KanbanControls filters={filters} stats={stats} onFiltersChange={setFilters} />
|
||||
<KanbanControls
|
||||
filters={filters}
|
||||
stats={stats}
|
||||
onFiltersChange={setFilters}
|
||||
onNextActionable={handleNextActionable}
|
||||
nextActionableFeedback={nextActionableFeedback}
|
||||
/>
|
||||
{mutationError ? (
|
||||
<div className="mt-3 rounded-xl border border-rose-300/40 bg-rose-950/40 px-3 py-2 text-sm text-rose-100">{mutationError}</div>
|
||||
) : null}
|
||||
|
|
@ -157,15 +288,17 @@ export function KanbanPage({ issues, projectRoot }: KanbanPageProps) {
|
|||
<motion.div layout className="p-2.5 sm:p-3">
|
||||
<KanbanBoard
|
||||
columns={columns}
|
||||
parentEpicByIssueId={parentEpicByIssueId}
|
||||
graphBaseHref={graphHref}
|
||||
showClosed={Boolean(filters.showClosed)}
|
||||
selectedIssueId={selectedIssue?.id ?? null}
|
||||
pendingIssueIds={pendingIssueIds}
|
||||
activeStatus={activeStatus}
|
||||
onActivateStatus={setActiveStatus}
|
||||
onMoveIssue={mutateStatus}
|
||||
onSelect={(issue) => {
|
||||
setSelectedIssueId(issue.id);
|
||||
setDesktopDetailMinimized(false);
|
||||
setMobileDetailOpen(true);
|
||||
const lane = findIssueLane(columns, issue.id) ?? 'ready';
|
||||
selectIssueWithDetailBehavior(issue.id, lane);
|
||||
}}
|
||||
/>
|
||||
</motion.div>
|
||||
|
|
@ -189,7 +322,15 @@ export function KanbanPage({ issues, projectRoot }: KanbanPageProps) {
|
|||
</button>
|
||||
</div>
|
||||
<div className="max-h-[calc(100vh-16rem)] overflow-y-auto pr-1">
|
||||
<KanbanDetail issue={selectedIssue} framed={false} />
|
||||
<KanbanDetail
|
||||
issue={selectedIssue}
|
||||
issues={filteredIssues}
|
||||
framed={false}
|
||||
blockedTree={blockedTree}
|
||||
onSelectBlockedIssue={focusIssueFromDetailLink}
|
||||
projectRoot={allowMutations ? projectRoot : undefined}
|
||||
onIssueUpdated={() => refreshIssues()}
|
||||
/>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
|
@ -200,7 +341,7 @@ export function KanbanPage({ issues, projectRoot }: KanbanPageProps) {
|
|||
<div className="fixed inset-0 z-40 lg:hidden">
|
||||
<button
|
||||
type="button"
|
||||
className="absolute inset-0 bg-black/55"
|
||||
className="absolute inset-0 bg-black/70 backdrop-blur-sm"
|
||||
aria-label="Close details"
|
||||
onClick={() => setMobileDetailOpen(false)}
|
||||
/>
|
||||
|
|
@ -209,7 +350,7 @@ export function KanbanPage({ issues, projectRoot }: KanbanPageProps) {
|
|||
animate={{ y: 0, opacity: 1 }}
|
||||
exit={{ y: 36, opacity: 0 }}
|
||||
transition={{ duration: 0.2, ease: 'easeOut' }}
|
||||
className="absolute inset-x-3 bottom-3 top-20 overflow-y-auto rounded-2xl border border-border-soft bg-surface/95 p-3 shadow-panel"
|
||||
className="absolute inset-x-3 bottom-3 top-20 overflow-y-auto rounded-2xl border border-border-soft bg-surface/98 p-3 shadow-panel backdrop-blur-2xl"
|
||||
>
|
||||
<div className="mb-2 flex justify-end">
|
||||
<button
|
||||
|
|
@ -220,7 +361,15 @@ export function KanbanPage({ issues, projectRoot }: KanbanPageProps) {
|
|||
Close
|
||||
</button>
|
||||
</div>
|
||||
<KanbanDetail issue={selectedIssue} framed={false} />
|
||||
<KanbanDetail
|
||||
issue={selectedIssue}
|
||||
issues={filteredIssues}
|
||||
framed={false}
|
||||
blockedTree={blockedTree}
|
||||
onSelectBlockedIssue={focusIssueFromDetailLink}
|
||||
projectRoot={allowMutations ? projectRoot : undefined}
|
||||
onIssueUpdated={() => refreshIssues()}
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
) : null}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue