fix: wire conversation panel to DAG nodes with toggle support
- Add MessageSquare icon to GraphNodeCard; prop-thread onConversationOpen and selectedTaskId through WorkflowGraph node data (no useUrlState inside ReactFlow nodes — avoids context/timing issues) - Fix ContextualRightPanel: check taskId before epicId so clicking the conversation icon always opens ThreadDrawer even when an epic filter is active - setEpicId now clears task from URL so selecting an epic resets any open conversation thread - handleGraphSelect toggles: second click on same node calls setTaskId(null) closing the right panel - Add onSelect to WorkflowGraph flowModel deps to prevent stale callbacks - Fix ContextualRightPanel onClose no-ops: wired to setTaskId(null) / setSwarmId(null) so back button works - Right panel always visible (removed panel==='open' gate in UnifiedShell) - SmartDag task grid: horizontal scroll, fixed-width cards, hideClosed=true - Add <Suspense> in page.tsx for useSearchParams compatibility - Enable dolt auto-start in .beads/config.yaml - Add 14 static analysis tests (graph-node-conversation.test.tsx) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
ZenchantLive
parent
cb83fd92a9
commit
861ae89491
11 changed files with 1279 additions and 1174 deletions
|
|
@ -1,67 +1,5 @@
|
|||
# Beads Configuration File
|
||||
# This file configures default behavior for all bd commands in this repository
|
||||
# All settings can also be set via environment variables (BD_* prefix)
|
||||
# or overridden with command-line flags
|
||||
sync:
|
||||
mode: dolt-native
|
||||
|
||||
# Issue prefix for this repository (used by bd init)
|
||||
# If not set, bd init will auto-detect from directory name
|
||||
# Example: issue-prefix: "myproject" creates issues like "myproject-1", "myproject-2", etc.
|
||||
# issue-prefix: ""
|
||||
|
||||
# Use no-db mode: load from JSONL, no SQLite, write back after each command
|
||||
# When true, bd will use .beads/issues.jsonl as the source of truth
|
||||
# instead of SQLite database
|
||||
# no-db: false
|
||||
|
||||
# Disable daemon for RPC communication (forces direct database access)
|
||||
# no-daemon: false
|
||||
|
||||
# Disable auto-flush of database to JSONL after mutations
|
||||
# no-auto-flush: false
|
||||
|
||||
# Disable auto-import from JSONL when it's newer than database
|
||||
# no-auto-import: false
|
||||
|
||||
# Enable JSON output by default
|
||||
# json: false
|
||||
|
||||
# Default actor for audit trails (overridden by BD_ACTOR or --actor)
|
||||
# actor: ""
|
||||
|
||||
# Path to database (overridden by BEADS_DB or --db)
|
||||
# db: ""
|
||||
|
||||
# Auto-start daemon if not running (can also use BEADS_AUTO_START_DAEMON)
|
||||
# auto-start-daemon: true
|
||||
|
||||
# Debounce interval for auto-flush (can also use BEADS_FLUSH_DEBOUNCE)
|
||||
# flush-debounce: "5s"
|
||||
|
||||
# Export events (audit trail) to .beads/events.jsonl on each flush/sync
|
||||
# When enabled, new events are appended incrementally using a high-water mark.
|
||||
# Use 'bd export --events' to trigger manually regardless of this setting.
|
||||
# events-export: false
|
||||
|
||||
# Git branch for beads commits (bd sync will commit to this branch)
|
||||
# IMPORTANT: Set this for team projects so all clones use the same sync branch.
|
||||
# This setting persists across clones (unlike database config which is gitignored).
|
||||
# Can also use BEADS_SYNC_BRANCH env var for local override.
|
||||
# If not set, bd sync will require you to run 'bd config set sync.branch <branch>'.
|
||||
# sync-branch: "beads-sync"
|
||||
|
||||
# Multi-repo configuration (experimental - bd-307)
|
||||
# Allows hydrating from multiple repositories and routing writes to the correct JSONL
|
||||
# repos:
|
||||
# primary: "." # Primary repo (where this database lives)
|
||||
# additional: # Additional repos to hydrate from (read-only)
|
||||
# - ~/beads-planning # Personal planning repo
|
||||
# - ~/work-planning # Work planning repo
|
||||
|
||||
# Integration settings (access with 'bd config get/set')
|
||||
# These are stored in the database, not in this file:
|
||||
# - jira.url
|
||||
# - jira.project
|
||||
# - linear.url
|
||||
# - linear.api-key
|
||||
# - github.org
|
||||
# - github.repo
|
||||
dolt:
|
||||
auto-start: true
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"start": "next start",
|
||||
"lint": "eslint .",
|
||||
"typecheck": "tsc --noEmit",
|
||||
"test": "node --test tests/bootstrap.test.mjs && node --import tsx --test tests/components/shared/base-card.test.tsx && node --import tsx --test tests/components/shared/agent-avatar.test.tsx && node --import tsx --test tests/components/sessions/sessions-header.test.ts && node --import tsx --test tests/components/sessions/agent-station-logic.test.ts && node --import tsx --test tests/lib/parser.test.ts && node --import tsx --test tests/lib/pathing.test.ts && node --import tsx --test tests/components/shared/left-panel.test.tsx && node --import tsx --test tests/components/shared/top-bar.test.tsx && node --import tsx --test tests/components/shared/mobile-nav.test.tsx && node --import tsx --test tests/components/swarm/swarm-card.test.tsx && node --import tsx --test tests/hooks/url-state-integration.test.ts && node --import tsx --test tests/hooks/use-graph-analysis.test.ts && node --import tsx --test tests/components/graph/smart-dag.test.tsx && node --import tsx --test tests/components/unified-shell.test.tsx && node --import tsx --test tests/components/graph/graph-node-labels.test.tsx && node --import tsx --test tests/components/graph/graph-node-assign.test.tsx && node --import tsx --test tests/lib/coord-schema.test.ts && node --import tsx --test tests/lib/coord-events.test.ts && node --import tsx --test tests/api/coord-events-route.test.ts && node --import tsx --test tests/lib/coord-projections-inbox.test.ts && node --import tsx --test tests/lib/coord-projections-reservations.test.ts && node --import tsx --test tests/components/sessions/conversation-drawer-coord.test.tsx",
|
||||
"test": "node --test tests/bootstrap.test.mjs && node --import tsx --test tests/components/shared/base-card.test.tsx && node --import tsx --test tests/components/shared/agent-avatar.test.tsx && node --import tsx --test tests/components/sessions/sessions-header.test.ts && node --import tsx --test tests/components/sessions/agent-station-logic.test.ts && node --import tsx --test tests/lib/parser.test.ts && node --import tsx --test tests/lib/pathing.test.ts && node --import tsx --test tests/components/shared/left-panel.test.tsx && node --import tsx --test tests/components/shared/top-bar.test.tsx && node --import tsx --test tests/components/shared/mobile-nav.test.tsx && node --import tsx --test tests/components/swarm/swarm-card.test.tsx && node --import tsx --test tests/hooks/url-state-integration.test.ts && node --import tsx --test tests/hooks/use-graph-analysis.test.ts && node --import tsx --test tests/components/graph/smart-dag.test.tsx && node --import tsx --test tests/components/unified-shell.test.tsx && node --import tsx --test tests/components/graph/graph-node-labels.test.tsx && node --import tsx --test tests/components/graph/graph-node-assign.test.tsx && node --import tsx --test tests/components/graph/graph-node-conversation.test.tsx && node --import tsx --test tests/lib/coord-schema.test.ts && node --import tsx --test tests/lib/coord-events.test.ts && node --import tsx --test tests/api/coord-events-route.test.ts && node --import tsx --test tests/lib/coord-projections-inbox.test.ts && node --import tsx --test tests/lib/coord-projections-reservations.test.ts && node --import tsx --test tests/components/sessions/conversation-drawer-coord.test.tsx",
|
||||
"video": "remotion preview src/video/index.ts",
|
||||
"video:render": "remotion render src/video/index.ts Main out/video.mp4",
|
||||
"video:thumbnail": "remotion still src/video/index.ts Main out/thumbnail.png --frame=60"
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { Suspense } from 'react';
|
||||
import { UnifiedShell } from '../components/shared/unified-shell';
|
||||
import { readIssuesForScope } from '../lib/aggregate-read';
|
||||
import { resolveProjectScope } from '../lib/project-scope';
|
||||
|
|
@ -28,12 +29,14 @@ export default async function Page({ searchParams }: PageProps) {
|
|||
});
|
||||
|
||||
return (
|
||||
<UnifiedShell
|
||||
issues={issues}
|
||||
projectRoot={scope.selected.root}
|
||||
projectScopeKey={scope.selected.key}
|
||||
projectScopeOptions={scope.options}
|
||||
projectScopeMode={scope.mode}
|
||||
/>
|
||||
<Suspense>
|
||||
<UnifiedShell
|
||||
issues={issues}
|
||||
projectRoot={scope.selected.root}
|
||||
projectScopeKey={scope.selected.key}
|
||||
projectScopeOptions={scope.options}
|
||||
projectScopeMode={scope.mode}
|
||||
/>
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import { SwarmCommandFeed } from './swarm-command-feed';
|
|||
import { ThreadDrawer } from '../shared/thread-drawer';
|
||||
import { MissionInspector } from '../mission/mission-inspector';
|
||||
import { useSwarmList } from '../../hooks/use-swarm-list';
|
||||
import { useUrlState } from '../../hooks/use-url-state';
|
||||
|
||||
export interface ContextualRightPanelProps {
|
||||
epicId?: string | null;
|
||||
|
|
@ -17,23 +18,16 @@ export interface ContextualRightPanelProps {
|
|||
}
|
||||
|
||||
export function ContextualRightPanel({ epicId, taskId, swarmId, issues, projectRoot }: ContextualRightPanelProps) {
|
||||
if (epicId) {
|
||||
return (
|
||||
<SwarmCommandFeed
|
||||
epicId={epicId}
|
||||
issues={issues}
|
||||
projectRoot={projectRoot}
|
||||
/>
|
||||
);
|
||||
}
|
||||
const { setTaskId } = useUrlState();
|
||||
|
||||
// Task conversation takes priority — user explicitly clicked the conversation icon
|
||||
if (taskId) {
|
||||
const selectedIssue = issues.find(i => i.id === taskId) ?? null;
|
||||
return (
|
||||
<ThreadDrawer
|
||||
isOpen={true}
|
||||
embedded={true}
|
||||
onClose={() => {}}
|
||||
onClose={() => setTaskId(null)}
|
||||
title={selectedIssue?.title ?? taskId}
|
||||
id={taskId}
|
||||
issue={selectedIssue}
|
||||
|
|
@ -43,6 +37,16 @@ export function ContextualRightPanel({ epicId, taskId, swarmId, issues, projectR
|
|||
);
|
||||
}
|
||||
|
||||
if (epicId) {
|
||||
return (
|
||||
<SwarmCommandFeed
|
||||
epicId={epicId}
|
||||
issues={issues}
|
||||
projectRoot={projectRoot}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (swarmId) {
|
||||
return (
|
||||
<SwarmIdBranch
|
||||
|
|
@ -63,6 +67,7 @@ export function ContextualRightPanel({ epicId, taskId, swarmId, issues, projectR
|
|||
|
||||
// Inner component so hooks can be called conditionally via component boundary
|
||||
function SwarmIdBranch({ swarmId, projectRoot }: { swarmId: string; projectRoot: string }) {
|
||||
const { setSwarmId } = useUrlState();
|
||||
const { swarms } = useSwarmList(projectRoot);
|
||||
const swarm = swarms.find(s => s.swarmId === swarmId);
|
||||
// Fall back to swarmId as title while swarm list loads
|
||||
|
|
@ -76,7 +81,7 @@ function SwarmIdBranch({ swarmId, projectRoot }: { swarmId: string; projectRoot:
|
|||
missionTitle={missionTitle}
|
||||
projectRoot={projectRoot}
|
||||
assignedAgents={assignedAgents}
|
||||
onClose={() => {}}
|
||||
onClose={() => setSwarmId(null)}
|
||||
onAssign={async () => {}}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,421 +1,441 @@
|
|||
'use client';
|
||||
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { Handle, Position, type NodeProps, type Node } from '@xyflow/react';
|
||||
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
|
||||
import { Loader2, ChevronDown, UserPlus, X } from 'lucide-react';
|
||||
import type { BeadIssue } from '../../lib/types';
|
||||
import type { AgentArchetype } from '../../lib/types-swarm';
|
||||
|
||||
/** Data payload for each custom ReactFlow node. */
|
||||
export interface GraphNodeData {
|
||||
/** Index signature required by ReactFlow's Node<Record<string, unknown>> constraint. */
|
||||
[key: string]: unknown;
|
||||
/** Display title of the task/epic. */
|
||||
title: string;
|
||||
/** Whether this is an epic or a regular issue. */
|
||||
kind: 'epic' | 'issue';
|
||||
/** Current workflow status. */
|
||||
status: BeadIssue['status'];
|
||||
/** Priority level (0 = highest). */
|
||||
priority: number;
|
||||
/** Number of issues blocking this node. */
|
||||
blockedBy: number;
|
||||
/** Number of issues this node blocks. */
|
||||
blocks: number;
|
||||
/** Whether this node has zero open blockers and is actionable. */
|
||||
isActionable: boolean;
|
||||
/** Whether this node is part of a dependency cycle. */
|
||||
isCycleNode: boolean;
|
||||
/** Whether this node should appear dimmed (not in selected chain). */
|
||||
isDimmed: boolean;
|
||||
/** Tooltip lines describing blocker details for hover display. */
|
||||
blockerTooltipLines: string[];
|
||||
/** Labels attached to this node, including agent assignments (agent:archetype-id). */
|
||||
labels: string[];
|
||||
/** Available agent archetypes for assignment. */
|
||||
archetypes?: AgentArchetype[];
|
||||
}
|
||||
|
||||
function getAssignedArchetypes(labels: string[], archetypes: AgentArchetype[]): AgentArchetype[] {
|
||||
const ids = labels.filter(l => l.startsWith('agent:')).map(l => l.replace('agent:', ''));
|
||||
return archetypes.filter(a => ids.includes(a.id));
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the Tailwind background color class for a status dot indicator.
|
||||
*/
|
||||
function statusDot(status: BeadIssue['status']): string {
|
||||
switch (status) {
|
||||
case 'open':
|
||||
return 'bg-sky-400';
|
||||
case 'in_progress':
|
||||
return 'bg-amber-400';
|
||||
case 'blocked':
|
||||
return 'bg-rose-500';
|
||||
case 'deferred':
|
||||
return 'bg-slate-400';
|
||||
case 'closed':
|
||||
return 'bg-emerald-400';
|
||||
case 'pinned':
|
||||
return 'bg-violet-400';
|
||||
case 'hooked':
|
||||
return 'bg-orange-400';
|
||||
default:
|
||||
return 'bg-zinc-500';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the base card style class based on the node kind (epic vs issue).
|
||||
*/
|
||||
function nodeStyle(kind: GraphNodeData['kind']): string {
|
||||
return kind === 'epic'
|
||||
? 'bg-[var(--graph-node-epic)] border-[var(--accent-info)]/30'
|
||||
: 'bg-[var(--graph-node-default)] border-[var(--border-subtle)]';
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom ReactFlow node component with:
|
||||
* - Status-aware styling (green glow for actionable, red ring for cycles)
|
||||
* - Hover tooltip showing blocker details or "Ready to work"
|
||||
* - Pulse animation on selection
|
||||
* - Dim effect when not in the selected dependency chain
|
||||
* - Agent archetype assignment badges and dropdown
|
||||
*/
|
||||
export function GraphNodeCard({ id, data, selected }: NodeProps<Node<GraphNodeData>>) {
|
||||
const [hovered, setHovered] = useState(false);
|
||||
const [isAssigning, setIsAssigning] = useState(false);
|
||||
const [assignError, setAssignError] = useState<string | null>(null);
|
||||
const [assignSuccess, setAssignSuccess] = useState<string | null>(null);
|
||||
|
||||
// Local state for labels with optimistic updates
|
||||
const [localLabels, setLocalLabels] = useState<string[]>(data.labels ?? []);
|
||||
|
||||
// Track pending optimistic labels to prevent SSE overwrites
|
||||
const pendingOptimisticLabels = useRef<Set<string>>(new Set());
|
||||
|
||||
// Sync local labels when parent data changes, but preserve pending optimistic updates
|
||||
useEffect(() => {
|
||||
const serverLabels = data.labels ?? [];
|
||||
const pending = pendingOptimisticLabels.current;
|
||||
if (pending.size === 0) {
|
||||
setLocalLabels(serverLabels);
|
||||
} else {
|
||||
// Merge: include pending labels that aren't yet in server data
|
||||
const merged = new Set([...serverLabels, ...pending]);
|
||||
setLocalLabels(Array.from(merged));
|
||||
}
|
||||
}, [data.labels]);
|
||||
|
||||
const archetypes = data.archetypes ?? [];
|
||||
const assignedArchetypes = getAssignedArchetypes(localLabels, archetypes);
|
||||
const isClosed = data.status === 'closed';
|
||||
|
||||
const handleAssignAgent = async (archetypeId: string) => {
|
||||
// Don't do anything if this archetype is already assigned
|
||||
const labelToAdd = `agent:${archetypeId}`;
|
||||
if (assignedArchetypes.some(a => a.id === archetypeId)) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsAssigning(true);
|
||||
setAssignError(null);
|
||||
setAssignSuccess(null);
|
||||
|
||||
// Track the new label as pending
|
||||
pendingOptimisticLabels.current.add(labelToAdd);
|
||||
|
||||
// Get current agent labels to remove (single archetype constraint)
|
||||
const currentAgentLabels = localLabels.filter(l => l.startsWith('agent:'));
|
||||
|
||||
// Optimistic update: remove all agent: labels, add new one
|
||||
const previousLabels = localLabels;
|
||||
setLocalLabels(prev => [...prev.filter(l => !l.startsWith('agent:')), labelToAdd]);
|
||||
|
||||
try {
|
||||
// First remove existing agent labels (if any)
|
||||
if (currentAgentLabels.length > 0) {
|
||||
for (const existingLabel of currentAgentLabels) {
|
||||
const existingArchetypeId = existingLabel.replace('agent:', '');
|
||||
await fetch('/api/swarm/prep', {
|
||||
method: 'DELETE',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ beadId: id, archetypeId: existingArchetypeId }),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Then add the new label
|
||||
const response = await fetch('/api/swarm/prep', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ beadId: id, archetypeId }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({}));
|
||||
throw new Error(errorData.error ?? 'Failed to assign agent');
|
||||
}
|
||||
|
||||
const archetype = archetypes.find(a => a.id === archetypeId);
|
||||
setAssignSuccess(`Assigned ${archetype?.name ?? archetypeId}`);
|
||||
setTimeout(() => setAssignSuccess(null), 2000);
|
||||
} catch (err) {
|
||||
// Revert on error - restore previous labels
|
||||
pendingOptimisticLabels.current.delete(labelToAdd);
|
||||
setLocalLabels(previousLabels);
|
||||
setAssignError(err instanceof Error ? err.message : 'Failed to assign agent');
|
||||
setTimeout(() => setAssignError(null), 3000);
|
||||
} finally {
|
||||
pendingOptimisticLabels.current.delete(labelToAdd);
|
||||
setIsAssigning(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUnassignAgent = async (archetypeId: string) => {
|
||||
setIsAssigning(true);
|
||||
setAssignError(null);
|
||||
setAssignSuccess(null);
|
||||
|
||||
// Optimistic update
|
||||
const labelToRemove = `agent:${archetypeId}`;
|
||||
setLocalLabels(prev => prev.filter(l => l !== labelToRemove));
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/swarm/prep', {
|
||||
method: 'DELETE',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ beadId: id, archetypeId }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({}));
|
||||
throw new Error(errorData.error ?? 'Failed to unassign agent');
|
||||
}
|
||||
|
||||
const archetype = archetypes.find(a => a.id === archetypeId);
|
||||
setAssignSuccess(`Unassigned ${archetype?.name ?? archetypeId}`);
|
||||
setTimeout(() => setAssignSuccess(null), 2000);
|
||||
} catch (err) {
|
||||
// Revert on error
|
||||
setLocalLabels(prev => [...prev, labelToRemove]);
|
||||
setAssignError(err instanceof Error ? err.message : 'Failed to unassign agent');
|
||||
setTimeout(() => setAssignError(null), 3000);
|
||||
} finally {
|
||||
setIsAssigning(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative"
|
||||
onMouseEnter={() => setHovered(true)}
|
||||
onMouseLeave={() => setHovered(false)}
|
||||
>
|
||||
<Handle type="target" position={Position.Left} className="!opacity-0" />
|
||||
|
||||
<div
|
||||
className={`group w-[18.5rem] rounded-xl border px-3 py-3 text-left transition-all duration-300 ${nodeStyle(data.kind)} ${
|
||||
data.status === 'in_progress' ? 'border-l-2 border-l-amber-400/60' :
|
||||
data.status === 'blocked' ? 'border-l-2 border-l-rose-500/60' :
|
||||
data.status === 'closed' ? 'border-l-2 border-l-emerald-400/40 opacity-60' : ''
|
||||
} ${
|
||||
data.isCycleNode ? 'ring-2 ring-rose-400/55' : ''
|
||||
} ${
|
||||
data.isActionable && !selected
|
||||
? 'ring-1 ring-[var(--accent-success)]/30 shadow-[var(--glow-success)]'
|
||||
: ''
|
||||
} ${
|
||||
selected
|
||||
? 'border-[var(--accent-info)]/50 shadow-[var(--shadow-lg)] ring-1 ring-[var(--accent-info)]/20 node-select-pulse'
|
||||
: 'hover:border-[var(--border-default)] hover:shadow-[var(--shadow-md)]'
|
||||
} ${
|
||||
data.isDimmed ? 'opacity-30' : 'opacity-100'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-2 border-b border-[var(--border-subtle)] pb-1.5 mb-1.5">
|
||||
<span className="font-mono text-[9px] uppercase tracking-[0.12em] text-[var(--text-tertiary)]/60">{id}</span>
|
||||
<div className="flex items-center gap-1.5 flex-wrap">
|
||||
{assignedArchetypes.map((archetype) => (
|
||||
<span
|
||||
key={archetype.id}
|
||||
className="rounded-md px-1.5 py-0.5 text-[7px] font-bold uppercase tracking-wider text-[var(--text-inverse)] ring-1"
|
||||
style={{
|
||||
backgroundColor: `${archetype.color}20`,
|
||||
borderColor: `${archetype.color}40`,
|
||||
color: archetype.color,
|
||||
}}
|
||||
>
|
||||
{archetype.name}
|
||||
</span>
|
||||
))}
|
||||
{data.isActionable ? (
|
||||
<span className="rounded-md bg-[var(--status-ready)] px-1.5 py-0.5 text-[7px] font-bold uppercase tracking-wider text-[var(--accent-success)] ring-1 ring-[var(--accent-success)]/20">
|
||||
Ready
|
||||
</span>
|
||||
) : null}
|
||||
{data.status === 'in_progress' ? (
|
||||
<span className="rounded-md bg-[var(--status-in-progress)] px-1.5 py-0.5 text-[7px] font-bold uppercase tracking-wider text-[var(--accent-warning)]">
|
||||
In Progress
|
||||
</span>
|
||||
) : data.status === 'blocked' ? (
|
||||
<span className="rounded-md bg-[var(--status-blocked)] px-1.5 py-0.5 text-[7px] font-bold uppercase tracking-wider text-[var(--accent-danger)]">
|
||||
Blocked
|
||||
</span>
|
||||
) : data.status === 'closed' ? (
|
||||
<span className="rounded-md bg-[var(--status-closed)] px-1.5 py-0.5 text-[7px] font-bold uppercase tracking-wider text-[var(--accent-success)]">
|
||||
Done
|
||||
</span>
|
||||
) : null}
|
||||
<span className="text-[9px] font-bold uppercase tracking-wider text-[var(--text-tertiary)]/40">p{data.priority}</span>
|
||||
<span className={`h-2 w-2 rounded-full ring-2 ring-[var(--alpha-black-medium)] ${statusDot(data.status)}`} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className={`text-[15px] font-bold leading-[1.2] tracking-tight text-[var(--text-primary)] group-hover:text-[var(--accent-info)] transition-colors ${data.status === 'closed' ? 'line-through opacity-70' : ''}`}>
|
||||
{data.title}
|
||||
</p>
|
||||
|
||||
{data.blockerTooltipLines.length > 0 ? (
|
||||
<div className="mt-2 border-t border-[var(--border-subtle)] pt-1.5">
|
||||
<p className="text-[8px] font-bold uppercase tracking-widest text-[var(--accent-danger)]/70 mb-0.5">Waiting on</p>
|
||||
{data.blockerTooltipLines.slice(0, 2).map((line) => (
|
||||
<p key={line} className="text-[9px] text-[var(--text-tertiary)]/70 truncate leading-tight">
|
||||
{line}
|
||||
</p>
|
||||
))}
|
||||
{data.blockerTooltipLines.length > 2 ? (
|
||||
<p className="text-[8px] text-[var(--text-tertiary)]/50">
|
||||
+{data.blockerTooltipLines.length - 2} more
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{!isClosed && archetypes.length > 0 ? (
|
||||
<div className="mt-2 border-t border-[var(--border-subtle)] pt-2">
|
||||
{assignSuccess ? (
|
||||
<div className="text-[9px] text-[var(--accent-success)] font-medium mb-1.5">
|
||||
{assignSuccess}
|
||||
</div>
|
||||
) : null}
|
||||
{assignError ? (
|
||||
<div className="text-[9px] text-[var(--accent-danger)] font-medium mb-1.5">
|
||||
{assignError}
|
||||
</div>
|
||||
) : null}
|
||||
{assignedArchetypes.length > 0 ? (
|
||||
<div className="mb-2 flex flex-wrap gap-1">
|
||||
{assignedArchetypes.map((archetype) => (
|
||||
<div
|
||||
key={archetype.id}
|
||||
className="flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[8px] font-medium ring-1"
|
||||
style={{
|
||||
backgroundColor: `${archetype.color}15`,
|
||||
borderColor: `${archetype.color}30`,
|
||||
color: archetype.color,
|
||||
}}
|
||||
>
|
||||
<span>{archetype.name}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleUnassignAgent(archetype.id);
|
||||
}}
|
||||
disabled={isAssigning}
|
||||
className="hover:opacity-70 transition-opacity"
|
||||
>
|
||||
<X className="h-2.5 w-2.5" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
disabled={isAssigning}
|
||||
className="flex items-center gap-1.5 w-full rounded-md bg-[var(--alpha-white-low)] hover:bg-[var(--alpha-white-medium)] px-2 py-1.5 text-[9px] font-medium text-[var(--text-tertiary)]/80 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{isAssigning ? (
|
||||
<Loader2 className="h-3 w-3 animate-spin" />
|
||||
) : (
|
||||
<UserPlus className="h-3 w-3" />
|
||||
)}
|
||||
<span>Assign Agent</span>
|
||||
<ChevronDown className="h-3 w-3 ml-auto" />
|
||||
</button>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Portal>
|
||||
<DropdownMenu.Content
|
||||
className="min-w-[180px] rounded-lg border border-[var(--border-subtle)] bg-[var(--surface-overlay)] p-1 shadow-[var(--shadow-lg)] backdrop-blur-lg z-50"
|
||||
sideOffset={4}
|
||||
>
|
||||
{archetypes.map((archetype) => {
|
||||
const isAssigned = assignedArchetypes.some(a => a.id === archetype.id);
|
||||
return (
|
||||
<DropdownMenu.Item
|
||||
key={archetype.id}
|
||||
disabled={isAssigned || isAssigning}
|
||||
onClick={() => handleAssignAgent(archetype.id)}
|
||||
className={`flex items-center gap-2 rounded-md px-2 py-1.5 text-[11px] font-medium outline-none cursor-pointer transition-colors ${
|
||||
isAssigned
|
||||
? 'opacity-50 cursor-not-allowed'
|
||||
: 'text-[var(--text-primary)] hover:bg-[var(--alpha-white-low)] focus:bg-[var(--alpha-white-low)]'
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className="h-2 w-2 rounded-full"
|
||||
style={{ backgroundColor: archetype.color }}
|
||||
/>
|
||||
<span>{archetype.name}</span>
|
||||
{isAssigned && (
|
||||
<span className="ml-auto text-[9px] text-[var(--text-tertiary)]/60">Assigned</span>
|
||||
)}
|
||||
</DropdownMenu.Item>
|
||||
);
|
||||
})}
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Portal>
|
||||
</DropdownMenu.Root>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{hovered ? (
|
||||
<div className="absolute left-1/2 top-full z-50 mt-2 -translate-x-1/2 animate-fade-in">
|
||||
<div className="max-w-xs rounded-lg border border-[var(--border-subtle)] bg-[var(--surface-overlay)] px-3 py-2 shadow-[var(--shadow-lg)] backdrop-blur-lg">
|
||||
{data.isActionable ? (
|
||||
<>
|
||||
<p className="text-[10px] font-bold text-[var(--accent-success)]">Ready to work</p>
|
||||
<p className="mt-0.5 text-[10px] text-[var(--text-tertiary)]/80">
|
||||
No open blockers. {data.blocks} task{data.blocks === 1 ? '' : 's'} depend{data.blocks === 1 ? 's' : ''} on this.
|
||||
</p>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<p className="text-[10px] font-bold text-[var(--accent-danger)]">
|
||||
Blocked by {data.blockedBy} task{data.blockedBy === 1 ? '' : 's'}
|
||||
</p>
|
||||
{data.blockerTooltipLines.length > 0 ? (
|
||||
<ul className="mt-1 space-y-0.5">
|
||||
{data.blockerTooltipLines.map((line) => (
|
||||
<li key={line} className="text-[9px] text-[var(--text-tertiary)]/80">
|
||||
• {line}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<Handle type="source" position={Position.Right} className="!opacity-0" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { Handle, Position, type NodeProps, type Node } from '@xyflow/react';
|
||||
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
|
||||
import { Loader2, ChevronDown, UserPlus, X, MessageSquare } from 'lucide-react';
|
||||
import type { BeadIssue } from '../../lib/types';
|
||||
import type { AgentArchetype } from '../../lib/types-swarm';
|
||||
|
||||
/** Data payload for each custom ReactFlow node. */
|
||||
export interface GraphNodeData {
|
||||
/** Index signature required by ReactFlow's Node<Record<string, unknown>> constraint. */
|
||||
[key: string]: unknown;
|
||||
/** Display title of the task/epic. */
|
||||
title: string;
|
||||
/** Whether this is an epic or a regular issue. */
|
||||
kind: 'epic' | 'issue';
|
||||
/** Current workflow status. */
|
||||
status: BeadIssue['status'];
|
||||
/** Priority level (0 = highest). */
|
||||
priority: number;
|
||||
/** Number of issues blocking this node. */
|
||||
blockedBy: number;
|
||||
/** Number of issues this node blocks. */
|
||||
blocks: number;
|
||||
/** Whether this node has zero open blockers and is actionable. */
|
||||
isActionable: boolean;
|
||||
/** Whether this node is part of a dependency cycle. */
|
||||
isCycleNode: boolean;
|
||||
/** Whether this node should appear dimmed (not in selected chain). */
|
||||
isDimmed: boolean;
|
||||
/** Tooltip lines describing blocker details for hover display. */
|
||||
blockerTooltipLines: string[];
|
||||
/** Labels attached to this node, including agent assignments (agent:archetype-id). */
|
||||
labels: string[];
|
||||
/** Available agent archetypes for assignment. */
|
||||
archetypes?: AgentArchetype[];
|
||||
/** ID of the currently selected task (for conversation icon highlight). */
|
||||
selectedTaskId?: string;
|
||||
/** Opens the conversation panel for this node. Passed from UnifiedShell via WorkflowGraph. */
|
||||
onConversationOpen?: (id: string) => void;
|
||||
}
|
||||
|
||||
function getAssignedArchetypes(labels: string[], archetypes: AgentArchetype[]): AgentArchetype[] {
|
||||
const ids = labels.filter(l => l.startsWith('agent:')).map(l => l.replace('agent:', ''));
|
||||
return archetypes.filter(a => ids.includes(a.id));
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the Tailwind background color class for a status dot indicator.
|
||||
*/
|
||||
function statusDot(status: BeadIssue['status']): string {
|
||||
switch (status) {
|
||||
case 'open':
|
||||
return 'bg-sky-400';
|
||||
case 'in_progress':
|
||||
return 'bg-amber-400';
|
||||
case 'blocked':
|
||||
return 'bg-rose-500';
|
||||
case 'deferred':
|
||||
return 'bg-slate-400';
|
||||
case 'closed':
|
||||
return 'bg-emerald-400';
|
||||
case 'pinned':
|
||||
return 'bg-violet-400';
|
||||
case 'hooked':
|
||||
return 'bg-orange-400';
|
||||
default:
|
||||
return 'bg-zinc-500';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the base card style class based on the node kind (epic vs issue).
|
||||
*/
|
||||
function nodeStyle(kind: GraphNodeData['kind']): string {
|
||||
return kind === 'epic'
|
||||
? 'bg-[var(--graph-node-epic)] border-[var(--accent-info)]/30'
|
||||
: 'bg-[var(--graph-node-default)] border-[var(--border-subtle)]';
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom ReactFlow node component with:
|
||||
* - Status-aware styling (green glow for actionable, red ring for cycles)
|
||||
* - Hover tooltip showing blocker details or "Ready to work"
|
||||
* - Pulse animation on selection
|
||||
* - Dim effect when not in the selected dependency chain
|
||||
* - Agent archetype assignment badges and dropdown
|
||||
*/
|
||||
export function GraphNodeCard({ id, data, selected }: NodeProps<Node<GraphNodeData>>) {
|
||||
const onConversationOpen = data.onConversationOpen as ((id: string) => void) | undefined;
|
||||
const isConvOpen = (data.selectedTaskId as string | undefined) === id;
|
||||
const [hovered, setHovered] = useState(false);
|
||||
const [isAssigning, setIsAssigning] = useState(false);
|
||||
const [assignError, setAssignError] = useState<string | null>(null);
|
||||
const [assignSuccess, setAssignSuccess] = useState<string | null>(null);
|
||||
|
||||
// Local state for labels with optimistic updates
|
||||
const [localLabels, setLocalLabels] = useState<string[]>(data.labels ?? []);
|
||||
|
||||
// Track pending optimistic labels to prevent SSE overwrites
|
||||
const pendingOptimisticLabels = useRef<Set<string>>(new Set());
|
||||
|
||||
// Sync local labels when parent data changes, but preserve pending optimistic updates
|
||||
useEffect(() => {
|
||||
const serverLabels = data.labels ?? [];
|
||||
const pending = pendingOptimisticLabels.current;
|
||||
if (pending.size === 0) {
|
||||
setLocalLabels(serverLabels);
|
||||
} else {
|
||||
// Merge: include pending labels that aren't yet in server data
|
||||
const merged = new Set([...serverLabels, ...pending]);
|
||||
setLocalLabels(Array.from(merged));
|
||||
}
|
||||
}, [data.labels]);
|
||||
|
||||
const archetypes = data.archetypes ?? [];
|
||||
const assignedArchetypes = getAssignedArchetypes(localLabels, archetypes);
|
||||
const isClosed = data.status === 'closed';
|
||||
|
||||
const handleAssignAgent = async (archetypeId: string) => {
|
||||
// Don't do anything if this archetype is already assigned
|
||||
const labelToAdd = `agent:${archetypeId}`;
|
||||
if (assignedArchetypes.some(a => a.id === archetypeId)) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsAssigning(true);
|
||||
setAssignError(null);
|
||||
setAssignSuccess(null);
|
||||
|
||||
// Track the new label as pending
|
||||
pendingOptimisticLabels.current.add(labelToAdd);
|
||||
|
||||
// Get current agent labels to remove (single archetype constraint)
|
||||
const currentAgentLabels = localLabels.filter(l => l.startsWith('agent:'));
|
||||
|
||||
// Optimistic update: remove all agent: labels, add new one
|
||||
const previousLabels = localLabels;
|
||||
setLocalLabels(prev => [...prev.filter(l => !l.startsWith('agent:')), labelToAdd]);
|
||||
|
||||
try {
|
||||
// First remove existing agent labels (if any)
|
||||
if (currentAgentLabels.length > 0) {
|
||||
for (const existingLabel of currentAgentLabels) {
|
||||
const existingArchetypeId = existingLabel.replace('agent:', '');
|
||||
await fetch('/api/swarm/prep', {
|
||||
method: 'DELETE',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ beadId: id, archetypeId: existingArchetypeId }),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Then add the new label
|
||||
const response = await fetch('/api/swarm/prep', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ beadId: id, archetypeId }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({}));
|
||||
throw new Error(errorData.error ?? 'Failed to assign agent');
|
||||
}
|
||||
|
||||
const archetype = archetypes.find(a => a.id === archetypeId);
|
||||
setAssignSuccess(`Assigned ${archetype?.name ?? archetypeId}`);
|
||||
setTimeout(() => setAssignSuccess(null), 2000);
|
||||
} catch (err) {
|
||||
// Revert on error - restore previous labels
|
||||
pendingOptimisticLabels.current.delete(labelToAdd);
|
||||
setLocalLabels(previousLabels);
|
||||
setAssignError(err instanceof Error ? err.message : 'Failed to assign agent');
|
||||
setTimeout(() => setAssignError(null), 3000);
|
||||
} finally {
|
||||
pendingOptimisticLabels.current.delete(labelToAdd);
|
||||
setIsAssigning(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUnassignAgent = async (archetypeId: string) => {
|
||||
setIsAssigning(true);
|
||||
setAssignError(null);
|
||||
setAssignSuccess(null);
|
||||
|
||||
// Optimistic update
|
||||
const labelToRemove = `agent:${archetypeId}`;
|
||||
setLocalLabels(prev => prev.filter(l => l !== labelToRemove));
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/swarm/prep', {
|
||||
method: 'DELETE',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ beadId: id, archetypeId }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({}));
|
||||
throw new Error(errorData.error ?? 'Failed to unassign agent');
|
||||
}
|
||||
|
||||
const archetype = archetypes.find(a => a.id === archetypeId);
|
||||
setAssignSuccess(`Unassigned ${archetype?.name ?? archetypeId}`);
|
||||
setTimeout(() => setAssignSuccess(null), 2000);
|
||||
} catch (err) {
|
||||
// Revert on error
|
||||
setLocalLabels(prev => [...prev, labelToRemove]);
|
||||
setAssignError(err instanceof Error ? err.message : 'Failed to unassign agent');
|
||||
setTimeout(() => setAssignError(null), 3000);
|
||||
} finally {
|
||||
setIsAssigning(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative"
|
||||
onMouseEnter={() => setHovered(true)}
|
||||
onMouseLeave={() => setHovered(false)}
|
||||
>
|
||||
<Handle type="target" position={Position.Left} className="!opacity-0" />
|
||||
|
||||
<div
|
||||
className={`group w-[18.5rem] rounded-xl border px-3 py-3 text-left transition-all duration-300 ${nodeStyle(data.kind)} ${
|
||||
data.status === 'in_progress' ? 'border-l-2 border-l-amber-400/60' :
|
||||
data.status === 'blocked' ? 'border-l-2 border-l-rose-500/60' :
|
||||
data.status === 'closed' ? 'border-l-2 border-l-emerald-400/40 opacity-60' : ''
|
||||
} ${
|
||||
data.isCycleNode ? 'ring-2 ring-rose-400/55' : ''
|
||||
} ${
|
||||
data.isActionable && !selected
|
||||
? 'ring-1 ring-[var(--accent-success)]/30 shadow-[var(--glow-success)]'
|
||||
: ''
|
||||
} ${
|
||||
selected
|
||||
? 'border-[var(--accent-info)]/50 shadow-[var(--shadow-lg)] ring-1 ring-[var(--accent-info)]/20 node-select-pulse'
|
||||
: 'hover:border-[var(--border-default)] hover:shadow-[var(--shadow-md)]'
|
||||
} ${
|
||||
data.isDimmed ? 'opacity-30' : 'opacity-100'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-2 border-b border-[var(--border-subtle)] pb-1.5 mb-1.5">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="font-mono text-[9px] uppercase tracking-[0.12em] text-[var(--text-tertiary)]/60">{id}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => { e.stopPropagation(); onConversationOpen?.(id); }}
|
||||
className={`rounded p-0.5 transition-colors ${
|
||||
isConvOpen
|
||||
? 'text-[var(--accent-info)] bg-[var(--accent-info)]/15 ring-1 ring-[var(--accent-info)]/30'
|
||||
: 'text-sky-400/50 hover:text-[var(--accent-info)] hover:bg-[var(--alpha-white-low)]'
|
||||
}`}
|
||||
title={isConvOpen ? 'Close conversation' : 'Open conversation'}
|
||||
>
|
||||
<MessageSquare className="h-3 w-3" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 flex-wrap">
|
||||
{assignedArchetypes.map((archetype) => (
|
||||
<span
|
||||
key={archetype.id}
|
||||
className="rounded-md px-1.5 py-0.5 text-[7px] font-bold uppercase tracking-wider text-[var(--text-inverse)] ring-1"
|
||||
style={{
|
||||
backgroundColor: `${archetype.color}20`,
|
||||
borderColor: `${archetype.color}40`,
|
||||
color: archetype.color,
|
||||
}}
|
||||
>
|
||||
{archetype.name}
|
||||
</span>
|
||||
))}
|
||||
{data.isActionable ? (
|
||||
<span className="rounded-md bg-[var(--status-ready)] px-1.5 py-0.5 text-[7px] font-bold uppercase tracking-wider text-[var(--accent-success)] ring-1 ring-[var(--accent-success)]/20">
|
||||
Ready
|
||||
</span>
|
||||
) : null}
|
||||
{data.status === 'in_progress' ? (
|
||||
<span className="rounded-md bg-[var(--status-in-progress)] px-1.5 py-0.5 text-[7px] font-bold uppercase tracking-wider text-[var(--accent-warning)]">
|
||||
In Progress
|
||||
</span>
|
||||
) : data.status === 'blocked' ? (
|
||||
<span className="rounded-md bg-[var(--status-blocked)] px-1.5 py-0.5 text-[7px] font-bold uppercase tracking-wider text-[var(--accent-danger)]">
|
||||
Blocked
|
||||
</span>
|
||||
) : data.status === 'closed' ? (
|
||||
<span className="rounded-md bg-[var(--status-closed)] px-1.5 py-0.5 text-[7px] font-bold uppercase tracking-wider text-[var(--accent-success)]">
|
||||
Done
|
||||
</span>
|
||||
) : null}
|
||||
<span className="text-[9px] font-bold uppercase tracking-wider text-[var(--text-tertiary)]/40">p{data.priority}</span>
|
||||
<span className={`h-2 w-2 rounded-full ring-2 ring-[var(--alpha-black-medium)] ${statusDot(data.status)}`} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className={`text-[15px] font-bold leading-[1.2] tracking-tight text-[var(--text-primary)] group-hover:text-[var(--accent-info)] transition-colors ${data.status === 'closed' ? 'line-through opacity-70' : ''}`}>
|
||||
{data.title}
|
||||
</p>
|
||||
|
||||
{data.blockerTooltipLines.length > 0 ? (
|
||||
<div className="mt-2 border-t border-[var(--border-subtle)] pt-1.5">
|
||||
<p className="text-[8px] font-bold uppercase tracking-widest text-[var(--accent-danger)]/70 mb-0.5">Waiting on</p>
|
||||
{data.blockerTooltipLines.slice(0, 2).map((line) => (
|
||||
<p key={line} className="text-[9px] text-[var(--text-tertiary)]/70 truncate leading-tight">
|
||||
{line}
|
||||
</p>
|
||||
))}
|
||||
{data.blockerTooltipLines.length > 2 ? (
|
||||
<p className="text-[8px] text-[var(--text-tertiary)]/50">
|
||||
+{data.blockerTooltipLines.length - 2} more
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{!isClosed && archetypes.length > 0 ? (
|
||||
<div className="mt-2 border-t border-[var(--border-subtle)] pt-2">
|
||||
{assignSuccess ? (
|
||||
<div className="text-[9px] text-[var(--accent-success)] font-medium mb-1.5">
|
||||
{assignSuccess}
|
||||
</div>
|
||||
) : null}
|
||||
{assignError ? (
|
||||
<div className="text-[9px] text-[var(--accent-danger)] font-medium mb-1.5">
|
||||
{assignError}
|
||||
</div>
|
||||
) : null}
|
||||
{assignedArchetypes.length > 0 ? (
|
||||
<div className="mb-2 flex flex-wrap gap-1">
|
||||
{assignedArchetypes.map((archetype) => (
|
||||
<div
|
||||
key={archetype.id}
|
||||
className="flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[8px] font-medium ring-1"
|
||||
style={{
|
||||
backgroundColor: `${archetype.color}15`,
|
||||
borderColor: `${archetype.color}30`,
|
||||
color: archetype.color,
|
||||
}}
|
||||
>
|
||||
<span>{archetype.name}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleUnassignAgent(archetype.id);
|
||||
}}
|
||||
disabled={isAssigning}
|
||||
className="hover:opacity-70 transition-opacity"
|
||||
>
|
||||
<X className="h-2.5 w-2.5" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
disabled={isAssigning}
|
||||
className="flex items-center gap-1.5 w-full rounded-md bg-[var(--alpha-white-low)] hover:bg-[var(--alpha-white-medium)] px-2 py-1.5 text-[9px] font-medium text-[var(--text-tertiary)]/80 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{isAssigning ? (
|
||||
<Loader2 className="h-3 w-3 animate-spin" />
|
||||
) : (
|
||||
<UserPlus className="h-3 w-3" />
|
||||
)}
|
||||
<span>Assign Agent</span>
|
||||
<ChevronDown className="h-3 w-3 ml-auto" />
|
||||
</button>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Portal>
|
||||
<DropdownMenu.Content
|
||||
className="min-w-[180px] rounded-lg border border-[var(--border-subtle)] bg-[var(--surface-overlay)] p-1 shadow-[var(--shadow-lg)] backdrop-blur-lg z-50"
|
||||
sideOffset={4}
|
||||
>
|
||||
{archetypes.map((archetype) => {
|
||||
const isAssigned = assignedArchetypes.some(a => a.id === archetype.id);
|
||||
return (
|
||||
<DropdownMenu.Item
|
||||
key={archetype.id}
|
||||
disabled={isAssigned || isAssigning}
|
||||
onClick={() => handleAssignAgent(archetype.id)}
|
||||
className={`flex items-center gap-2 rounded-md px-2 py-1.5 text-[11px] font-medium outline-none cursor-pointer transition-colors ${
|
||||
isAssigned
|
||||
? 'opacity-50 cursor-not-allowed'
|
||||
: 'text-[var(--text-primary)] hover:bg-[var(--alpha-white-low)] focus:bg-[var(--alpha-white-low)]'
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className="h-2 w-2 rounded-full"
|
||||
style={{ backgroundColor: archetype.color }}
|
||||
/>
|
||||
<span>{archetype.name}</span>
|
||||
{isAssigned && (
|
||||
<span className="ml-auto text-[9px] text-[var(--text-tertiary)]/60">Assigned</span>
|
||||
)}
|
||||
</DropdownMenu.Item>
|
||||
);
|
||||
})}
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Portal>
|
||||
</DropdownMenu.Root>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{hovered ? (
|
||||
<div className="absolute left-1/2 top-full z-50 mt-2 -translate-x-1/2 animate-fade-in">
|
||||
<div className="max-w-xs rounded-lg border border-[var(--border-subtle)] bg-[var(--surface-overlay)] px-3 py-2 shadow-[var(--shadow-lg)] backdrop-blur-lg">
|
||||
{data.isActionable ? (
|
||||
<>
|
||||
<p className="text-[10px] font-bold text-[var(--accent-success)]">Ready to work</p>
|
||||
<p className="mt-0.5 text-[10px] text-[var(--text-tertiary)]/80">
|
||||
No open blockers. {data.blocks} task{data.blocks === 1 ? '' : 's'} depend{data.blocks === 1 ? 's' : ''} on this.
|
||||
</p>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<p className="text-[10px] font-bold text-[var(--accent-danger)]">
|
||||
Blocked by {data.blockedBy} task{data.blockedBy === 1 ? '' : 's'}
|
||||
</p>
|
||||
{data.blockerTooltipLines.length > 0 ? (
|
||||
<ul className="mt-1 space-y-0.5">
|
||||
{data.blockerTooltipLines.map((line) => (
|
||||
<li key={line} className="text-[9px] text-[var(--text-tertiary)]/80">
|
||||
• {line}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<Handle type="source" position={Position.Right} className="!opacity-0" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,271 +1,271 @@
|
|||
'use client';
|
||||
|
||||
import React, { useState, useMemo, useCallback } from 'react';
|
||||
import { Filter, UserPlus } from 'lucide-react';
|
||||
|
||||
import type { BeadIssue } from '../../lib/types';
|
||||
import type { GraphHopDepth } from '../../lib/graph-view';
|
||||
import { WorkflowGraph } from '../shared/workflow-graph';
|
||||
import { WorkflowTabs, type WorkflowTab } from './workflow-tabs';
|
||||
import { TaskCardGrid, type BlockerDetail } from './task-card-grid';
|
||||
import { useArchetypes } from '../../hooks/use-archetypes';
|
||||
import { useGraphAnalysis } from '../../hooks/use-graph-analysis';
|
||||
|
||||
export interface SmartDagProps {
|
||||
issues: BeadIssue[];
|
||||
epicId?: string | null;
|
||||
selectedTaskId?: string;
|
||||
onSelectTask?: (id: string) => void;
|
||||
projectRoot: string;
|
||||
hideClosed?: boolean;
|
||||
onAssignModeChange?: (assignMode: boolean) => void;
|
||||
onSelectedIssueChange?: (issue: BeadIssue | null) => void;
|
||||
}
|
||||
|
||||
const DEPTH_OPTIONS: GraphHopDepth[] = [1, 2, 'full'];
|
||||
|
||||
export function SmartDag({
|
||||
issues,
|
||||
epicId,
|
||||
selectedTaskId,
|
||||
onSelectTask,
|
||||
projectRoot,
|
||||
hideClosed: hideClosedProp = false,
|
||||
onAssignModeChange,
|
||||
onSelectedIssueChange,
|
||||
}: SmartDagProps) {
|
||||
const { archetypes } = useArchetypes(projectRoot);
|
||||
|
||||
const [showFilters, setShowFilters] = useState(false);
|
||||
const [activeTab, setActiveTab] = useState<WorkflowTab>('tasks');
|
||||
const [assignMode, setAssignMode] = useState(false);
|
||||
|
||||
const [hideClosed, setHideClosed] = useState(hideClosedProp);
|
||||
const [depth, setDepth] = useState<GraphHopDepth>('full');
|
||||
const [blockingOnly, setBlockingOnly] = useState(false);
|
||||
const [sortReadyFirst, setSortReadyFirst] = useState(true);
|
||||
|
||||
const displayBeads = useMemo(() => {
|
||||
if (!epicId) return issues;
|
||||
return issues.filter(issue => {
|
||||
if (issue.issue_type === 'epic') return false;
|
||||
const parent = issue.dependencies.find(d => d.type === 'parent');
|
||||
return parent?.target === epicId;
|
||||
});
|
||||
}, [issues, epicId]);
|
||||
|
||||
const {
|
||||
signalById,
|
||||
cycleNodeIdSet,
|
||||
actionableNodeIds,
|
||||
blockerTooltipMap,
|
||||
} = useGraphAnalysis(issues, projectRoot, selectedTaskId ?? null);
|
||||
|
||||
const blockerDetailsMap = useMemo(() => {
|
||||
const map = new Map<string, BlockerDetail[]>();
|
||||
for (const issue of displayBeads) {
|
||||
const blockers: BlockerDetail[] = [];
|
||||
for (const dep of issue.dependencies) {
|
||||
if (dep.type === 'blocks') {
|
||||
const blocker = issues.find(i => i.id === dep.target);
|
||||
if (blocker && blocker.status !== 'closed') {
|
||||
blockers.push({
|
||||
id: blocker.id,
|
||||
title: blocker.title,
|
||||
status: blocker.status,
|
||||
priority: blocker.priority,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
if (blockers.length > 0) {
|
||||
map.set(issue.id, blockers);
|
||||
}
|
||||
}
|
||||
return map;
|
||||
}, [displayBeads, issues]);
|
||||
|
||||
const blocksDetailsMap = useMemo(() => {
|
||||
const map = new Map<string, BlockerDetail[]>();
|
||||
for (const issue of displayBeads) {
|
||||
const blocking: BlockerDetail[] = [];
|
||||
for (const other of issues) {
|
||||
for (const dep of other.dependencies) {
|
||||
if (dep.type === 'blocks' && dep.target === issue.id) {
|
||||
if (other.status !== 'closed') {
|
||||
blocking.push({
|
||||
id: other.id,
|
||||
title: other.title,
|
||||
status: other.status,
|
||||
priority: other.priority,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (blocking.length > 0) {
|
||||
map.set(issue.id, blocking);
|
||||
}
|
||||
}
|
||||
return map;
|
||||
}, [displayBeads, issues]);
|
||||
|
||||
const sortedTasks = useMemo(() => {
|
||||
let tasks = displayBeads.filter(issue =>
|
||||
hideClosed ? issue.status !== 'closed' : true
|
||||
);
|
||||
|
||||
if (blockingOnly && activeTab === 'dependencies') {
|
||||
tasks = tasks.filter(issue => {
|
||||
const blockers = blockerDetailsMap.get(issue.id) ?? [];
|
||||
return blockers.length > 0 || issue.status === 'blocked';
|
||||
});
|
||||
}
|
||||
|
||||
if (sortReadyFirst && activeTab === 'tasks') {
|
||||
tasks = [...tasks].sort((a, b) => {
|
||||
const aReady = actionableNodeIds.has(a.id) && a.status !== 'closed';
|
||||
const bReady = actionableNodeIds.has(b.id) && b.status !== 'closed';
|
||||
if (aReady && !bReady) return -1;
|
||||
if (!aReady && bReady) return 1;
|
||||
return a.priority - b.priority;
|
||||
});
|
||||
}
|
||||
|
||||
return tasks;
|
||||
}, [displayBeads, hideClosed, blockingOnly, blockerDetailsMap, sortReadyFirst, actionableNodeIds, activeTab]);
|
||||
|
||||
const handleAssignModeToggle = useCallback(() => {
|
||||
const newMode = !assignMode;
|
||||
setAssignMode(newMode);
|
||||
onAssignModeChange?.(newMode);
|
||||
}, [assignMode, onAssignModeChange]);
|
||||
|
||||
const handleTaskSelect = useCallback((id: string, shouldOpenDrawer?: boolean) => {
|
||||
onSelectTask?.(id);
|
||||
const selectedIssue = issues.find(i => i.id === id) ?? null;
|
||||
onSelectedIssueChange?.(selectedIssue);
|
||||
}, [onSelectTask, issues, onSelectedIssueChange]);
|
||||
|
||||
const selectedIssue = useMemo(() =>
|
||||
issues.find(i => i.id === selectedTaskId) ?? null,
|
||||
[issues, selectedTaskId]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="w-full h-full flex flex-col animate-in fade-in duration-500 relative bg-[var(--surface-secondary)]">
|
||||
<div className="flex items-center justify-between gap-4 border-b border-[var(--border-subtle)] px-4 py-3 bg-[var(--surface-tertiary)]">
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowFilters(current => !current)}
|
||||
className={`flex items-center gap-2 rounded-xl border px-3 py-1.5 text-xs font-bold transition-all ${
|
||||
showFilters
|
||||
? 'border-[var(--accent-info)]/30 bg-[var(--accent-info)]/10 text-[var(--accent-info)]'
|
||||
: 'border-[var(--border-subtle)] bg-[var(--surface-quaternary)] text-[var(--text-tertiary)] hover:bg-[var(--surface-hover)]'
|
||||
}`}
|
||||
>
|
||||
<Filter className="w-3.5 h-3.5" />
|
||||
Filters {showFilters ? '▴' : '▾'}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleAssignModeToggle}
|
||||
className={`flex items-center gap-2 rounded-xl border px-3 py-1.5 text-xs font-bold transition-all ${
|
||||
assignMode
|
||||
? 'border-emerald-400/30 bg-emerald-400/10 text-emerald-300'
|
||||
: 'border-white/10 bg-white/5 text-text-muted hover:bg-white/10'
|
||||
}`}
|
||||
>
|
||||
<UserPlus className="w-3.5 h-3.5" />
|
||||
Assign
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<WorkflowTabs activeTab={activeTab} onTabChange={setActiveTab} />
|
||||
</div>
|
||||
|
||||
{showFilters ? (
|
||||
<div className="flex flex-wrap items-center gap-4 border-b border-white/5 px-4 py-3 bg-white/[0.01]">
|
||||
<label className="inline-flex cursor-pointer items-center gap-3 rounded-xl border border-white/10 bg-black/40 px-4 py-1.5 text-xs font-medium text-text-body transition-all hover:bg-white/5">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="h-3.5 w-3.5 rounded border-white/20 bg-white/5 text-sky-500"
|
||||
checked={hideClosed}
|
||||
onChange={(e) => setHideClosed(e.target.checked)}
|
||||
/>
|
||||
Hide closed
|
||||
</label>
|
||||
|
||||
{activeTab === 'tasks' ? (
|
||||
<label className="inline-flex cursor-pointer items-center gap-3 rounded-xl border border-white/10 bg-black/40 px-4 py-1.5 text-xs font-medium text-text-body transition-all hover:bg-white/5">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="h-3.5 w-3.5 rounded border-white/20 bg-white/5 text-sky-500"
|
||||
checked={sortReadyFirst}
|
||||
onChange={(e) => setSortReadyFirst(e.target.checked)}
|
||||
/>
|
||||
Ready first
|
||||
</label>
|
||||
) : null}
|
||||
|
||||
{activeTab === 'dependencies' ? (
|
||||
<>
|
||||
<div className="inline-flex items-center gap-2 rounded-xl border border-white/10 bg-black/40 px-3 py-1.5 text-xs font-medium text-text-body">
|
||||
<span className="text-text-muted">Depth:</span>
|
||||
<select
|
||||
className="bg-transparent text-text-body focus:outline-none"
|
||||
value={depth}
|
||||
onChange={(e) => setDepth(e.target.value as GraphHopDepth)}
|
||||
>
|
||||
{DEPTH_OPTIONS.map(opt => (
|
||||
<option key={String(opt)} value={opt} className="bg-zinc-900">
|
||||
{opt === 'full' ? 'Full' : `${opt} hop${opt === 1 ? '' : 's'}`}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<label className="inline-flex cursor-pointer items-center gap-3 rounded-xl border border-white/10 bg-black/40 px-4 py-1.5 text-xs font-medium text-text-body transition-all hover:bg-white/5">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="h-3.5 w-3.5 rounded border-white/20 bg-white/5 text-sky-500"
|
||||
checked={blockingOnly}
|
||||
onChange={(e) => setBlockingOnly(e.target.checked)}
|
||||
/>
|
||||
Blocking only
|
||||
</label>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="flex-1 overflow-hidden">
|
||||
{activeTab === 'tasks' ? (
|
||||
<div className="h-full overflow-y-auto p-4">
|
||||
<TaskCardGrid
|
||||
tasks={sortedTasks}
|
||||
selectedId={selectedTaskId ?? null}
|
||||
blockerDetailsMap={blockerDetailsMap}
|
||||
blocksDetailsMap={blocksDetailsMap}
|
||||
actionableIds={actionableNodeIds}
|
||||
onSelect={handleTaskSelect}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-full p-4">
|
||||
<WorkflowGraph
|
||||
beads={sortedTasks}
|
||||
selectedId={selectedTaskId}
|
||||
onSelect={onSelectTask}
|
||||
hideClosed={hideClosed}
|
||||
archetypes={archetypes}
|
||||
assignMode={assignMode}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
'use client';
|
||||
|
||||
import React, { useState, useMemo, useCallback } from 'react';
|
||||
import { Filter, UserPlus } from 'lucide-react';
|
||||
|
||||
import type { BeadIssue } from '../../lib/types';
|
||||
import type { GraphHopDepth } from '../../lib/graph-view';
|
||||
import { WorkflowGraph } from '../shared/workflow-graph';
|
||||
import { WorkflowTabs, type WorkflowTab } from './workflow-tabs';
|
||||
import { TaskCardGrid, type BlockerDetail } from './task-card-grid';
|
||||
import { useArchetypes } from '../../hooks/use-archetypes';
|
||||
import { useGraphAnalysis } from '../../hooks/use-graph-analysis';
|
||||
|
||||
export interface SmartDagProps {
|
||||
issues: BeadIssue[];
|
||||
epicId?: string | null;
|
||||
selectedTaskId?: string;
|
||||
onSelectTask?: (id: string) => void;
|
||||
projectRoot: string;
|
||||
hideClosed?: boolean;
|
||||
onAssignModeChange?: (assignMode: boolean) => void;
|
||||
onSelectedIssueChange?: (issue: BeadIssue | null) => void;
|
||||
}
|
||||
|
||||
const DEPTH_OPTIONS: GraphHopDepth[] = [1, 2, 'full'];
|
||||
|
||||
export function SmartDag({
|
||||
issues,
|
||||
epicId,
|
||||
selectedTaskId,
|
||||
onSelectTask,
|
||||
projectRoot,
|
||||
hideClosed: hideClosedProp = false,
|
||||
onAssignModeChange,
|
||||
onSelectedIssueChange,
|
||||
}: SmartDagProps) {
|
||||
const { archetypes } = useArchetypes(projectRoot);
|
||||
|
||||
const [showFilters, setShowFilters] = useState(false);
|
||||
const [activeTab, setActiveTab] = useState<WorkflowTab>('tasks');
|
||||
const [assignMode, setAssignMode] = useState(false);
|
||||
|
||||
const [hideClosed, setHideClosed] = useState(true);
|
||||
const [depth, setDepth] = useState<GraphHopDepth>('full');
|
||||
const [blockingOnly, setBlockingOnly] = useState(false);
|
||||
const [sortReadyFirst, setSortReadyFirst] = useState(true);
|
||||
|
||||
const displayBeads = useMemo(() => {
|
||||
if (!epicId) return issues;
|
||||
return issues.filter(issue => {
|
||||
if (issue.issue_type === 'epic') return false;
|
||||
const parent = issue.dependencies.find(d => d.type === 'parent');
|
||||
return parent?.target === epicId;
|
||||
});
|
||||
}, [issues, epicId]);
|
||||
|
||||
const {
|
||||
signalById,
|
||||
cycleNodeIdSet,
|
||||
actionableNodeIds,
|
||||
blockerTooltipMap,
|
||||
} = useGraphAnalysis(issues, projectRoot, selectedTaskId ?? null);
|
||||
|
||||
const blockerDetailsMap = useMemo(() => {
|
||||
const map = new Map<string, BlockerDetail[]>();
|
||||
for (const issue of displayBeads) {
|
||||
const blockers: BlockerDetail[] = [];
|
||||
for (const dep of issue.dependencies) {
|
||||
if (dep.type === 'blocks') {
|
||||
const blocker = issues.find(i => i.id === dep.target);
|
||||
if (blocker && blocker.status !== 'closed') {
|
||||
blockers.push({
|
||||
id: blocker.id,
|
||||
title: blocker.title,
|
||||
status: blocker.status,
|
||||
priority: blocker.priority,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
if (blockers.length > 0) {
|
||||
map.set(issue.id, blockers);
|
||||
}
|
||||
}
|
||||
return map;
|
||||
}, [displayBeads, issues]);
|
||||
|
||||
const blocksDetailsMap = useMemo(() => {
|
||||
const map = new Map<string, BlockerDetail[]>();
|
||||
for (const issue of displayBeads) {
|
||||
const blocking: BlockerDetail[] = [];
|
||||
for (const other of issues) {
|
||||
for (const dep of other.dependencies) {
|
||||
if (dep.type === 'blocks' && dep.target === issue.id) {
|
||||
if (other.status !== 'closed') {
|
||||
blocking.push({
|
||||
id: other.id,
|
||||
title: other.title,
|
||||
status: other.status,
|
||||
priority: other.priority,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (blocking.length > 0) {
|
||||
map.set(issue.id, blocking);
|
||||
}
|
||||
}
|
||||
return map;
|
||||
}, [displayBeads, issues]);
|
||||
|
||||
const sortedTasks = useMemo(() => {
|
||||
let tasks = displayBeads.filter(issue =>
|
||||
hideClosed ? issue.status !== 'closed' : true
|
||||
);
|
||||
|
||||
if (blockingOnly && activeTab === 'dependencies') {
|
||||
tasks = tasks.filter(issue => {
|
||||
const blockers = blockerDetailsMap.get(issue.id) ?? [];
|
||||
return blockers.length > 0 || issue.status === 'blocked';
|
||||
});
|
||||
}
|
||||
|
||||
if (sortReadyFirst && activeTab === 'tasks') {
|
||||
tasks = [...tasks].sort((a, b) => {
|
||||
const aReady = actionableNodeIds.has(a.id) && a.status !== 'closed';
|
||||
const bReady = actionableNodeIds.has(b.id) && b.status !== 'closed';
|
||||
if (aReady && !bReady) return -1;
|
||||
if (!aReady && bReady) return 1;
|
||||
return a.priority - b.priority;
|
||||
});
|
||||
}
|
||||
|
||||
return tasks;
|
||||
}, [displayBeads, hideClosed, blockingOnly, blockerDetailsMap, sortReadyFirst, actionableNodeIds, activeTab]);
|
||||
|
||||
const handleAssignModeToggle = useCallback(() => {
|
||||
const newMode = !assignMode;
|
||||
setAssignMode(newMode);
|
||||
onAssignModeChange?.(newMode);
|
||||
}, [assignMode, onAssignModeChange]);
|
||||
|
||||
const handleTaskSelect = useCallback((id: string, shouldOpenDrawer?: boolean) => {
|
||||
onSelectTask?.(id);
|
||||
const selectedIssue = issues.find(i => i.id === id) ?? null;
|
||||
onSelectedIssueChange?.(selectedIssue);
|
||||
}, [onSelectTask, issues, onSelectedIssueChange]);
|
||||
|
||||
const selectedIssue = useMemo(() =>
|
||||
issues.find(i => i.id === selectedTaskId) ?? null,
|
||||
[issues, selectedTaskId]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="w-full h-full flex flex-col animate-in fade-in duration-500 relative bg-[var(--surface-secondary)]">
|
||||
<div className="flex items-center justify-between gap-4 border-b border-[var(--border-subtle)] px-4 py-3 bg-[var(--surface-tertiary)]">
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowFilters(current => !current)}
|
||||
className={`flex items-center gap-2 rounded-xl border px-3 py-1.5 text-xs font-bold transition-all ${
|
||||
showFilters
|
||||
? 'border-[var(--accent-info)]/30 bg-[var(--accent-info)]/10 text-[var(--accent-info)]'
|
||||
: 'border-[var(--border-subtle)] bg-[var(--surface-quaternary)] text-[var(--text-tertiary)] hover:bg-[var(--surface-hover)]'
|
||||
}`}
|
||||
>
|
||||
<Filter className="w-3.5 h-3.5" />
|
||||
Filters {showFilters ? '▴' : '▾'}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleAssignModeToggle}
|
||||
className={`flex items-center gap-2 rounded-xl border px-3 py-1.5 text-xs font-bold transition-all ${
|
||||
assignMode
|
||||
? 'border-emerald-400/30 bg-emerald-400/10 text-emerald-300'
|
||||
: 'border-white/10 bg-white/5 text-text-muted hover:bg-white/10'
|
||||
}`}
|
||||
>
|
||||
<UserPlus className="w-3.5 h-3.5" />
|
||||
Assign
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<WorkflowTabs activeTab={activeTab} onTabChange={setActiveTab} />
|
||||
</div>
|
||||
|
||||
{showFilters ? (
|
||||
<div className="flex flex-wrap items-center gap-4 border-b border-white/5 px-4 py-3 bg-white/[0.01]">
|
||||
<label className="inline-flex cursor-pointer items-center gap-3 rounded-xl border border-white/10 bg-black/40 px-4 py-1.5 text-xs font-medium text-text-body transition-all hover:bg-white/5">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="h-3.5 w-3.5 rounded border-white/20 bg-white/5 text-sky-500"
|
||||
checked={hideClosed}
|
||||
onChange={(e) => setHideClosed(e.target.checked)}
|
||||
/>
|
||||
Hide closed
|
||||
</label>
|
||||
|
||||
{activeTab === 'tasks' ? (
|
||||
<label className="inline-flex cursor-pointer items-center gap-3 rounded-xl border border-white/10 bg-black/40 px-4 py-1.5 text-xs font-medium text-text-body transition-all hover:bg-white/5">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="h-3.5 w-3.5 rounded border-white/20 bg-white/5 text-sky-500"
|
||||
checked={sortReadyFirst}
|
||||
onChange={(e) => setSortReadyFirst(e.target.checked)}
|
||||
/>
|
||||
Ready first
|
||||
</label>
|
||||
) : null}
|
||||
|
||||
{activeTab === 'dependencies' ? (
|
||||
<>
|
||||
<div className="inline-flex items-center gap-2 rounded-xl border border-white/10 bg-black/40 px-3 py-1.5 text-xs font-medium text-text-body">
|
||||
<span className="text-text-muted">Depth:</span>
|
||||
<select
|
||||
className="bg-transparent text-text-body focus:outline-none"
|
||||
value={depth}
|
||||
onChange={(e) => setDepth(e.target.value as GraphHopDepth)}
|
||||
>
|
||||
{DEPTH_OPTIONS.map(opt => (
|
||||
<option key={String(opt)} value={opt} className="bg-zinc-900">
|
||||
{opt === 'full' ? 'Full' : `${opt} hop${opt === 1 ? '' : 's'}`}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<label className="inline-flex cursor-pointer items-center gap-3 rounded-xl border border-white/10 bg-black/40 px-4 py-1.5 text-xs font-medium text-text-body transition-all hover:bg-white/5">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="h-3.5 w-3.5 rounded border-white/20 bg-white/5 text-sky-500"
|
||||
checked={blockingOnly}
|
||||
onChange={(e) => setBlockingOnly(e.target.checked)}
|
||||
/>
|
||||
Blocking only
|
||||
</label>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="flex-1 overflow-hidden">
|
||||
{activeTab === 'tasks' ? (
|
||||
<div className="h-full overflow-x-auto p-4">
|
||||
<TaskCardGrid
|
||||
tasks={sortedTasks}
|
||||
selectedId={selectedTaskId ?? null}
|
||||
blockerDetailsMap={blockerDetailsMap}
|
||||
blocksDetailsMap={blocksDetailsMap}
|
||||
actionableIds={actionableNodeIds}
|
||||
onSelect={handleTaskSelect}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-full p-4">
|
||||
<WorkflowGraph
|
||||
beads={sortedTasks}
|
||||
selectedId={selectedTaskId}
|
||||
onSelect={onSelectTask}
|
||||
hideClosed={hideClosed}
|
||||
archetypes={archetypes}
|
||||
assignMode={assignMode}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,382 +1,382 @@
|
|||
'use client';
|
||||
|
||||
import type { BeadIssue } from '../../lib/types';
|
||||
|
||||
/** Props for an individual task card in the grid. */
|
||||
/** Details for a blocker task shown on the card. */
|
||||
export interface BlockerDetail {
|
||||
id: string;
|
||||
title: string;
|
||||
status: BeadIssue['status'];
|
||||
priority: BeadIssue['priority'];
|
||||
epicTitle?: string;
|
||||
}
|
||||
|
||||
/** Props for an individual task card in the grid. */
|
||||
interface TaskCardProps {
|
||||
/** The issue data for this card. */
|
||||
issue: BeadIssue;
|
||||
/** Whether this card is the currently selected task. */
|
||||
selected: boolean;
|
||||
/** List of issues blocking this task. */
|
||||
blockers: BlockerDetail[];
|
||||
/** List of issues this task blocks. */
|
||||
blocking: BlockerDetail[];
|
||||
/** Whether this task is actionable (unblocked). */
|
||||
isActionable: boolean;
|
||||
/** Callback fired when the user clicks this card (or a blocker). */
|
||||
onSelect: (id: string, shouldOpenDrawer?: boolean) => void;
|
||||
}
|
||||
|
||||
/** Props for the TaskCardGrid component. */
|
||||
interface TaskCardGridProps {
|
||||
/** List of tasks to display in the grid. */
|
||||
tasks: BeadIssue[];
|
||||
/** ID of the currently selected task, or null. */
|
||||
selectedId: string | null;
|
||||
/** Map of issue ID to detailed blocker info. */
|
||||
blockerDetailsMap: Map<string, BlockerDetail[]>;
|
||||
/** Map of issue ID to detailed downstream blocking info. */
|
||||
blocksDetailsMap: Map<string, BlockerDetail[]>;
|
||||
/** Set of actionable (unblocked) task IDs. */
|
||||
actionableIds: Set<string>;
|
||||
/** Callback fired when the user selects a task. */
|
||||
onSelect: (id: string, shouldOpenDrawer?: boolean) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the Tailwind background color class for a status dot indicator.
|
||||
* Mirrors the statusDot function from the original monolith.
|
||||
*/
|
||||
function statusDot(status: BeadIssue['status']): string {
|
||||
switch (status) {
|
||||
case 'open':
|
||||
return 'bg-emerald-400';
|
||||
case 'in_progress':
|
||||
return 'bg-amber-400';
|
||||
case 'blocked':
|
||||
return 'bg-rose-500';
|
||||
case 'deferred':
|
||||
return 'bg-slate-400';
|
||||
case 'closed':
|
||||
return 'bg-slate-400';
|
||||
case 'pinned':
|
||||
return 'bg-violet-400';
|
||||
case 'hooked':
|
||||
return 'bg-orange-400';
|
||||
default:
|
||||
return 'bg-zinc-500';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns status-tinted gradient background for simplified flat styling.
|
||||
*/
|
||||
function statusGradient(status: BeadIssue['status']): string {
|
||||
switch (status) {
|
||||
case 'open':
|
||||
return 'border-l-2 border-emerald-400 bg-emerald-500/15';
|
||||
case 'in_progress':
|
||||
return 'border-l-2 border-amber-400 bg-amber-500/15';
|
||||
case 'blocked':
|
||||
return 'border-l-2 border-rose-400 bg-rose-500/15';
|
||||
case 'closed':
|
||||
return 'border-l-2 border-slate-400/60 bg-slate-500/10 opacity-80';
|
||||
case 'deferred':
|
||||
return 'border-l-2 border-slate-400/60 bg-slate-500/10';
|
||||
default:
|
||||
return 'border-l-2 border-slate-400/60 bg-slate-500/10';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns status-colored border for Aero Chrome styling.
|
||||
*/
|
||||
function statusBorder(status: BeadIssue['status']): string {
|
||||
switch (status) {
|
||||
case 'open':
|
||||
return 'border-emerald-500/20';
|
||||
case 'in_progress':
|
||||
return 'border-amber-500/20';
|
||||
case 'blocked':
|
||||
return 'border-rose-500/20';
|
||||
case 'closed':
|
||||
return 'border-rose-500/30';
|
||||
case 'deferred':
|
||||
return 'border-slate-500/20';
|
||||
default:
|
||||
return 'border-white/[0.06]';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns title text color class - greyed out for closed status.
|
||||
*/
|
||||
function titleColorClass(status: BeadIssue['status']): string {
|
||||
return status === 'closed' ? 'text-text-muted/70' : 'text-text-strong';
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a human-friendly label and text color class for a status.
|
||||
*/
|
||||
function statusBadge(status: BeadIssue['status'], isActionable: boolean, hasBlockers: boolean): { label: string; textColor: string; bgColor: string } {
|
||||
// Actual blocked status always shows as Blocked in red
|
||||
if (status === 'blocked') {
|
||||
return { label: 'Blocked', textColor: 'text-rose-400', bgColor: 'bg-rose-400/10' };
|
||||
}
|
||||
|
||||
// If effectively blocked (has open blockers), show Blocked (unless closed/done)
|
||||
if (hasBlockers && status !== 'closed' && status !== 'in_progress') {
|
||||
return { label: 'Blocked', textColor: 'text-rose-400', bgColor: 'bg-rose-400/10' };
|
||||
}
|
||||
|
||||
switch (status) {
|
||||
case 'in_progress':
|
||||
return { label: 'In Progress', textColor: 'text-amber-400', bgColor: 'bg-amber-400/10' };
|
||||
case 'closed':
|
||||
return { label: 'Done', textColor: 'text-emerald-400', bgColor: 'bg-emerald-400/10' };
|
||||
case 'deferred':
|
||||
return { label: 'Deferred', textColor: 'text-slate-400', bgColor: 'bg-slate-400/10' };
|
||||
case 'open':
|
||||
// Open with no blockers -> Ready
|
||||
return { label: 'Ready', textColor: 'text-cyan-400', bgColor: 'bg-cyan-400/10' };
|
||||
default:
|
||||
return { label: status, textColor: 'text-zinc-400', bgColor: 'bg-zinc-400/10' };
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* A single task card displaying the issue ID, title, priority, type, assignee,
|
||||
* and detailed blocker list (interactive).
|
||||
*/
|
||||
function TaskCard({ issue, selected, blockers, blocking, isActionable, onSelect }: TaskCardProps) {
|
||||
const hasBlockers = blockers.length > 0; // Note: blockers list only contains OPEN blockers (computed in page)
|
||||
const badge = statusBadge(issue.status, isActionable, hasBlockers);
|
||||
const projectName = (issue as BeadIssue & { project?: { name?: string } }).project?.name ?? null;
|
||||
|
||||
// Determine effective status: in_progress always shows as in_progress, blocked always blocked, otherwise check blockers
|
||||
const effectiveStatus: BeadIssue['status'] = issue.status === 'in_progress' ? 'in_progress' :
|
||||
issue.status === 'blocked' ? 'blocked' :
|
||||
hasBlockers ? 'blocked' :
|
||||
issue.status;
|
||||
|
||||
return (
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => onSelect(issue.id, false)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
onSelect(issue.id, false);
|
||||
}
|
||||
}}
|
||||
className={`group relative flex w-full flex-col rounded-xl border ${statusBorder(effectiveStatus)} ${statusGradient(effectiveStatus)} px-4 py-4 text-left transition duration-200 shadow-[0_4px_24px_rgba(0,0,0,0.35),inset_0_1px_0_rgba(255,255,255,0.06)] ${selected
|
||||
? 'ring-1 ring-amber-200/30 shadow-[0_0_20px_rgba(251,191,36,0.15)]'
|
||||
: 'hover:shadow-[0_8px_30px_rgba(0,0,0,0.4)]'
|
||||
}`}
|
||||
>
|
||||
{/* Expand / Open Drawer Button */}
|
||||
<button
|
||||
type="button"
|
||||
className="absolute right-2 top-2 z-10 rounded p-1.5 text-text-muted/50 hover:bg-white/10 hover:text-sky-300 transition-colors hover:opacity-100"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onSelect(issue.id, true);
|
||||
}}
|
||||
title="Open Details"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="opacity-70 group-hover:opacity-100"><polyline points="15 3 21 3 21 9" /><polyline points="9 21 3 21 3 15" /><line x1="21" y1="3" x2="14" y2="10" /><line x1="3" y1="21" x2="10" y2="14" /></svg>
|
||||
</button>
|
||||
|
||||
<div className="flex w-full items-start justify-between gap-3 pr-6">
|
||||
<div className="flex flex-col gap-1.5 min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`h-2 w-2 rounded-full ${statusDot(effectiveStatus)} ring-1 ring-white/10`} />
|
||||
<span className="font-mono text-[10px] text-text-muted">{issue.id}</span>
|
||||
{/* Status Badge */}
|
||||
<span className={`rounded px-1.5 py-0.5 text-[9px] font-bold uppercase tracking-wider ${badge.textColor} ${badge.bgColor}`}>
|
||||
{badge.label}
|
||||
</span>
|
||||
</div>
|
||||
{projectName ? (
|
||||
<div className="inline-flex w-fit rounded border border-sky-300/25 bg-sky-500/10 px-1.5 py-0.5 font-mono text-[9px] text-sky-200">
|
||||
project: {projectName}
|
||||
</div>
|
||||
) : null}
|
||||
<h3 className={`line-clamp-3 text-sm font-medium leading-snug ${titleColorClass(issue.status)}`}>
|
||||
{issue.title}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Labels */}
|
||||
{issue.labels?.length > 0 ? (
|
||||
<div className="mt-2 flex flex-wrap gap-1">
|
||||
{issue.labels.map((label) => (
|
||||
<span key={label} className="rounded bg-white/5 px-1.5 py-0.5 text-[9px] font-medium text-text-muted/80 backdrop-blur-sm border border-white/5">
|
||||
{label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* "Unlocks" section for blockers */}
|
||||
{blockers.length > 0 ? (
|
||||
<div className="mt-auto pt-2 w-full">
|
||||
<div className="rounded-lg bg-black/20 p-2 border border-white/5">
|
||||
<p className="mb-1.5 text-[9px] font-bold uppercase tracking-widest text-rose-400/80">Unlocks</p>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
{blockers.map((blocker) => (
|
||||
<div
|
||||
key={blocker.id}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onSelect(blocker.id, false);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.stopPropagation();
|
||||
onSelect(blocker.id, false);
|
||||
}
|
||||
}}
|
||||
className="group relative flex flex-col gap-0.5 rounded border border-white/5 bg-white/5 px-2.5 py-2 hover:border-sky-400/30 hover:bg-white/10 transition-colors"
|
||||
>
|
||||
{/* Expand Button */}
|
||||
<button
|
||||
type="button"
|
||||
className="absolute right-1 top-1 z-10 rounded p-1 text-text-muted/50 hover:bg-white/10 hover:text-sky-300 transition-colors hover:opacity-100"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onSelect(blocker.id, true);
|
||||
}}
|
||||
title="Open Details"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="opacity-70 group-hover:opacity-100"><polyline points="15 3 21 3 21 9" /><polyline points="9 21 3 21 3 15" /><line x1="21" y1="3" x2="14" y2="10" /><line x1="3" y1="21" x2="10" y2="14" /></svg>
|
||||
</button>
|
||||
|
||||
<div className="flex items-center gap-2 pr-5">
|
||||
<span className={`h-1.5 w-1.5 shrink-0 rounded-full ${statusDot(blocker.status)}`} />
|
||||
<span className="font-mono text-[9px] text-text-muted">{blocker.id}</span>
|
||||
<span className="line-clamp-1 text-[10px] font-medium text-text-body">{blocker.title}</span>
|
||||
</div>
|
||||
{blocker.epicTitle ? (
|
||||
<div className="pl-3.5 text-[9px] text-text-muted/60 truncate max-w-full pr-5">
|
||||
<span className="group-hover:text-sky-300/70 transition-colors">↳ {blocker.epicTitle}</span>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* "Blocks" section (downstream) */}
|
||||
{blocking.length > 0 ? (
|
||||
<div className={`${blockers.length > 0 ? 'mt-2' : 'mt-auto'} w-full`}>
|
||||
<div className="rounded-lg bg-black/20 p-2 border border-white/5">
|
||||
<p className="mb-1.5 text-[9px] font-bold uppercase tracking-widest text-amber-400/80">Blocks</p>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
{blocking.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onSelect(item.id, false);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.stopPropagation();
|
||||
onSelect(item.id, false);
|
||||
}
|
||||
}}
|
||||
className="group relative flex flex-col gap-0.5 rounded border border-white/5 bg-white/5 px-2.5 py-2 hover:border-sky-400/30 hover:bg-white/10 transition-colors"
|
||||
>
|
||||
{/* Expand Button */}
|
||||
<button
|
||||
type="button"
|
||||
className="absolute right-1 top-1 z-10 rounded p-1 text-text-muted/50 hover:bg-white/10 hover:text-sky-300 transition-colors hover:opacity-100"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onSelect(item.id, true);
|
||||
}}
|
||||
title="Open Details"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="opacity-70 group-hover:opacity-100"><polyline points="15 3 21 3 21 9" /><polyline points="9 21 3 21 3 15" /><line x1="21" y1="3" x2="14" y2="10" /><line x1="3" y1="21" x2="10" y2="14" /></svg>
|
||||
</button>
|
||||
|
||||
<div className="flex items-center gap-2 pr-5">
|
||||
<span className={`h-1.5 w-1.5 shrink-0 rounded-full ${statusDot(item.status)}`} />
|
||||
<span className="font-mono text-[9px] text-text-muted">{item.id}</span>
|
||||
<span className="line-clamp-1 text-[10px] font-medium text-text-body">{item.title}</span>
|
||||
</div>
|
||||
{item.epicTitle ? (
|
||||
<div className="pl-3.5 text-[9px] text-text-muted/60 truncate max-w-full pr-5">
|
||||
<span className="group-hover:text-sky-300/70 transition-colors">↳ {item.epicTitle}</span>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* Footer Metadata: Assignee, Due Date */}
|
||||
<div className={`mt-3 flex w-full items-center justify-between border-t border-white/5 pt-3 text-[10px] text-text-muted/60`}>
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Assignee */}
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="i-lucide-user h-3 w-3 opacity-70" />
|
||||
<span>{issue.assignee ?? 'Unassigned'}</span>
|
||||
</div>
|
||||
{/* Due Date (if exists) */}
|
||||
{issue.due_at ? (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="i-lucide-calendar h-3 w-3 opacity-70" />
|
||||
<span>{new Date(issue.due_at as string).toLocaleDateString(undefined, { month: 'short', day: 'numeric' })}</span>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders a responsive grid of task cards.
|
||||
* Uses auto-fill with minmax to prevent cards from being too narrow to read.
|
||||
*/
|
||||
export function TaskCardGrid({ tasks, selectedId, blockerDetailsMap, blocksDetailsMap, actionableIds, onSelect }: TaskCardGridProps) {
|
||||
// Show an empty state when no tasks exist in the selected epic
|
||||
if (tasks.length === 0) {
|
||||
return (
|
||||
<div className="rounded-2xl border border-dashed border-white/10 bg-white/[0.02] px-6 py-12 text-center">
|
||||
<p className="text-xs font-medium uppercase tracking-widest text-text-muted/50">No tasks in this epic</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid gap-3 overflow-y-auto overscroll-contain pr-1 custom-scrollbar grid-cols-[repeat(auto-fill,minmax(18rem,1fr))]">
|
||||
{tasks.map((task) => (
|
||||
<TaskCard
|
||||
key={task.id}
|
||||
issue={task}
|
||||
selected={selectedId === task.id}
|
||||
blockers={blockerDetailsMap?.get(task.id) ?? []}
|
||||
blocking={blocksDetailsMap?.get(task.id) ?? []}
|
||||
isActionable={actionableIds?.has(task.id) ?? false}
|
||||
onSelect={onSelect}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
'use client';
|
||||
|
||||
import type { BeadIssue } from '../../lib/types';
|
||||
|
||||
/** Props for an individual task card in the grid. */
|
||||
/** Details for a blocker task shown on the card. */
|
||||
export interface BlockerDetail {
|
||||
id: string;
|
||||
title: string;
|
||||
status: BeadIssue['status'];
|
||||
priority: BeadIssue['priority'];
|
||||
epicTitle?: string;
|
||||
}
|
||||
|
||||
/** Props for an individual task card in the grid. */
|
||||
interface TaskCardProps {
|
||||
/** The issue data for this card. */
|
||||
issue: BeadIssue;
|
||||
/** Whether this card is the currently selected task. */
|
||||
selected: boolean;
|
||||
/** List of issues blocking this task. */
|
||||
blockers: BlockerDetail[];
|
||||
/** List of issues this task blocks. */
|
||||
blocking: BlockerDetail[];
|
||||
/** Whether this task is actionable (unblocked). */
|
||||
isActionable: boolean;
|
||||
/** Callback fired when the user clicks this card (or a blocker). */
|
||||
onSelect: (id: string, shouldOpenDrawer?: boolean) => void;
|
||||
}
|
||||
|
||||
/** Props for the TaskCardGrid component. */
|
||||
interface TaskCardGridProps {
|
||||
/** List of tasks to display in the grid. */
|
||||
tasks: BeadIssue[];
|
||||
/** ID of the currently selected task, or null. */
|
||||
selectedId: string | null;
|
||||
/** Map of issue ID to detailed blocker info. */
|
||||
blockerDetailsMap: Map<string, BlockerDetail[]>;
|
||||
/** Map of issue ID to detailed downstream blocking info. */
|
||||
blocksDetailsMap: Map<string, BlockerDetail[]>;
|
||||
/** Set of actionable (unblocked) task IDs. */
|
||||
actionableIds: Set<string>;
|
||||
/** Callback fired when the user selects a task. */
|
||||
onSelect: (id: string, shouldOpenDrawer?: boolean) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the Tailwind background color class for a status dot indicator.
|
||||
* Mirrors the statusDot function from the original monolith.
|
||||
*/
|
||||
function statusDot(status: BeadIssue['status']): string {
|
||||
switch (status) {
|
||||
case 'open':
|
||||
return 'bg-emerald-400';
|
||||
case 'in_progress':
|
||||
return 'bg-amber-400';
|
||||
case 'blocked':
|
||||
return 'bg-rose-500';
|
||||
case 'deferred':
|
||||
return 'bg-slate-400';
|
||||
case 'closed':
|
||||
return 'bg-slate-400';
|
||||
case 'pinned':
|
||||
return 'bg-violet-400';
|
||||
case 'hooked':
|
||||
return 'bg-orange-400';
|
||||
default:
|
||||
return 'bg-zinc-500';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns status-tinted gradient background for simplified flat styling.
|
||||
*/
|
||||
function statusGradient(status: BeadIssue['status']): string {
|
||||
switch (status) {
|
||||
case 'open':
|
||||
return 'border-l-2 border-emerald-400 bg-emerald-500/15';
|
||||
case 'in_progress':
|
||||
return 'border-l-2 border-amber-400 bg-amber-500/15';
|
||||
case 'blocked':
|
||||
return 'border-l-2 border-rose-400 bg-rose-500/15';
|
||||
case 'closed':
|
||||
return 'border-l-2 border-slate-400/60 bg-slate-500/10 opacity-80';
|
||||
case 'deferred':
|
||||
return 'border-l-2 border-slate-400/60 bg-slate-500/10';
|
||||
default:
|
||||
return 'border-l-2 border-slate-400/60 bg-slate-500/10';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns status-colored border for Aero Chrome styling.
|
||||
*/
|
||||
function statusBorder(status: BeadIssue['status']): string {
|
||||
switch (status) {
|
||||
case 'open':
|
||||
return 'border-emerald-500/20';
|
||||
case 'in_progress':
|
||||
return 'border-amber-500/20';
|
||||
case 'blocked':
|
||||
return 'border-rose-500/20';
|
||||
case 'closed':
|
||||
return 'border-rose-500/30';
|
||||
case 'deferred':
|
||||
return 'border-slate-500/20';
|
||||
default:
|
||||
return 'border-white/[0.06]';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns title text color class - greyed out for closed status.
|
||||
*/
|
||||
function titleColorClass(status: BeadIssue['status']): string {
|
||||
return status === 'closed' ? 'text-text-muted/70' : 'text-text-strong';
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a human-friendly label and text color class for a status.
|
||||
*/
|
||||
function statusBadge(status: BeadIssue['status'], isActionable: boolean, hasBlockers: boolean): { label: string; textColor: string; bgColor: string } {
|
||||
// Actual blocked status always shows as Blocked in red
|
||||
if (status === 'blocked') {
|
||||
return { label: 'Blocked', textColor: 'text-rose-400', bgColor: 'bg-rose-400/10' };
|
||||
}
|
||||
|
||||
// If effectively blocked (has open blockers), show Blocked (unless closed/done)
|
||||
if (hasBlockers && status !== 'closed' && status !== 'in_progress') {
|
||||
return { label: 'Blocked', textColor: 'text-rose-400', bgColor: 'bg-rose-400/10' };
|
||||
}
|
||||
|
||||
switch (status) {
|
||||
case 'in_progress':
|
||||
return { label: 'In Progress', textColor: 'text-amber-400', bgColor: 'bg-amber-400/10' };
|
||||
case 'closed':
|
||||
return { label: 'Done', textColor: 'text-emerald-400', bgColor: 'bg-emerald-400/10' };
|
||||
case 'deferred':
|
||||
return { label: 'Deferred', textColor: 'text-slate-400', bgColor: 'bg-slate-400/10' };
|
||||
case 'open':
|
||||
// Open with no blockers -> Ready
|
||||
return { label: 'Ready', textColor: 'text-cyan-400', bgColor: 'bg-cyan-400/10' };
|
||||
default:
|
||||
return { label: status, textColor: 'text-zinc-400', bgColor: 'bg-zinc-400/10' };
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* A single task card displaying the issue ID, title, priority, type, assignee,
|
||||
* and detailed blocker list (interactive).
|
||||
*/
|
||||
function TaskCard({ issue, selected, blockers, blocking, isActionable, onSelect }: TaskCardProps) {
|
||||
const hasBlockers = blockers.length > 0; // Note: blockers list only contains OPEN blockers (computed in page)
|
||||
const badge = statusBadge(issue.status, isActionable, hasBlockers);
|
||||
const projectName = (issue as BeadIssue & { project?: { name?: string } }).project?.name ?? null;
|
||||
|
||||
// Determine effective status: in_progress always shows as in_progress, blocked always blocked, otherwise check blockers
|
||||
const effectiveStatus: BeadIssue['status'] = issue.status === 'in_progress' ? 'in_progress' :
|
||||
issue.status === 'blocked' ? 'blocked' :
|
||||
hasBlockers ? 'blocked' :
|
||||
issue.status;
|
||||
|
||||
return (
|
||||
<div
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => onSelect(issue.id, false)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
onSelect(issue.id, false);
|
||||
}
|
||||
}}
|
||||
className={`group relative flex w-72 flex-shrink-0 flex-col rounded-xl border ${statusBorder(effectiveStatus)} ${statusGradient(effectiveStatus)} px-4 py-4 text-left transition duration-200 shadow-[0_4px_24px_rgba(0,0,0,0.35),inset_0_1px_0_rgba(255,255,255,0.06)] ${selected
|
||||
? 'ring-1 ring-amber-200/30 shadow-[0_0_20px_rgba(251,191,36,0.15)]'
|
||||
: 'hover:shadow-[0_8px_30px_rgba(0,0,0,0.4)]'
|
||||
}`}
|
||||
>
|
||||
{/* Expand / Open Drawer Button */}
|
||||
<button
|
||||
type="button"
|
||||
className="absolute right-2 top-2 z-10 rounded p-1.5 text-text-muted/50 hover:bg-white/10 hover:text-sky-300 transition-colors hover:opacity-100"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onSelect(issue.id, true);
|
||||
}}
|
||||
title="Open Details"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="opacity-70 group-hover:opacity-100"><polyline points="15 3 21 3 21 9" /><polyline points="9 21 3 21 3 15" /><line x1="21" y1="3" x2="14" y2="10" /><line x1="3" y1="21" x2="10" y2="14" /></svg>
|
||||
</button>
|
||||
|
||||
<div className="flex w-full items-start justify-between gap-3 pr-6">
|
||||
<div className="flex flex-col gap-1.5 min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`h-2 w-2 rounded-full ${statusDot(effectiveStatus)} ring-1 ring-white/10`} />
|
||||
<span className="font-mono text-[10px] text-text-muted">{issue.id}</span>
|
||||
{/* Status Badge */}
|
||||
<span className={`rounded px-1.5 py-0.5 text-[9px] font-bold uppercase tracking-wider ${badge.textColor} ${badge.bgColor}`}>
|
||||
{badge.label}
|
||||
</span>
|
||||
</div>
|
||||
{projectName ? (
|
||||
<div className="inline-flex w-fit rounded border border-sky-300/25 bg-sky-500/10 px-1.5 py-0.5 font-mono text-[9px] text-sky-200">
|
||||
project: {projectName}
|
||||
</div>
|
||||
) : null}
|
||||
<h3 className={`line-clamp-3 text-sm font-medium leading-snug ${titleColorClass(issue.status)}`}>
|
||||
{issue.title}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Labels */}
|
||||
{issue.labels?.length > 0 ? (
|
||||
<div className="mt-2 flex flex-wrap gap-1">
|
||||
{issue.labels.map((label) => (
|
||||
<span key={label} className="rounded bg-white/5 px-1.5 py-0.5 text-[9px] font-medium text-text-muted/80 backdrop-blur-sm border border-white/5">
|
||||
{label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* "Unlocks" section for blockers */}
|
||||
{blockers.length > 0 ? (
|
||||
<div className="mt-auto pt-2 w-full">
|
||||
<div className="rounded-lg bg-black/20 p-2 border border-white/5">
|
||||
<p className="mb-1.5 text-[9px] font-bold uppercase tracking-widest text-rose-400/80">Unlocks</p>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
{blockers.map((blocker) => (
|
||||
<div
|
||||
key={blocker.id}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onSelect(blocker.id, false);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.stopPropagation();
|
||||
onSelect(blocker.id, false);
|
||||
}
|
||||
}}
|
||||
className="group relative flex flex-col gap-0.5 rounded border border-white/5 bg-white/5 px-2.5 py-2 hover:border-sky-400/30 hover:bg-white/10 transition-colors"
|
||||
>
|
||||
{/* Expand Button */}
|
||||
<button
|
||||
type="button"
|
||||
className="absolute right-1 top-1 z-10 rounded p-1 text-text-muted/50 hover:bg-white/10 hover:text-sky-300 transition-colors hover:opacity-100"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onSelect(blocker.id, true);
|
||||
}}
|
||||
title="Open Details"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="opacity-70 group-hover:opacity-100"><polyline points="15 3 21 3 21 9" /><polyline points="9 21 3 21 3 15" /><line x1="21" y1="3" x2="14" y2="10" /><line x1="3" y1="21" x2="10" y2="14" /></svg>
|
||||
</button>
|
||||
|
||||
<div className="flex items-center gap-2 pr-5">
|
||||
<span className={`h-1.5 w-1.5 shrink-0 rounded-full ${statusDot(blocker.status)}`} />
|
||||
<span className="font-mono text-[9px] text-text-muted">{blocker.id}</span>
|
||||
<span className="line-clamp-1 text-[10px] font-medium text-text-body">{blocker.title}</span>
|
||||
</div>
|
||||
{blocker.epicTitle ? (
|
||||
<div className="pl-3.5 text-[9px] text-text-muted/60 truncate max-w-full pr-5">
|
||||
<span className="group-hover:text-sky-300/70 transition-colors">↳ {blocker.epicTitle}</span>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* "Blocks" section (downstream) */}
|
||||
{blocking.length > 0 ? (
|
||||
<div className={`${blockers.length > 0 ? 'mt-2' : 'mt-auto'} w-full`}>
|
||||
<div className="rounded-lg bg-black/20 p-2 border border-white/5">
|
||||
<p className="mb-1.5 text-[9px] font-bold uppercase tracking-widest text-amber-400/80">Blocks</p>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
{blocking.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onSelect(item.id, false);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.stopPropagation();
|
||||
onSelect(item.id, false);
|
||||
}
|
||||
}}
|
||||
className="group relative flex flex-col gap-0.5 rounded border border-white/5 bg-white/5 px-2.5 py-2 hover:border-sky-400/30 hover:bg-white/10 transition-colors"
|
||||
>
|
||||
{/* Expand Button */}
|
||||
<button
|
||||
type="button"
|
||||
className="absolute right-1 top-1 z-10 rounded p-1 text-text-muted/50 hover:bg-white/10 hover:text-sky-300 transition-colors hover:opacity-100"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onSelect(item.id, true);
|
||||
}}
|
||||
title="Open Details"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="opacity-70 group-hover:opacity-100"><polyline points="15 3 21 3 21 9" /><polyline points="9 21 3 21 3 15" /><line x1="21" y1="3" x2="14" y2="10" /><line x1="3" y1="21" x2="10" y2="14" /></svg>
|
||||
</button>
|
||||
|
||||
<div className="flex items-center gap-2 pr-5">
|
||||
<span className={`h-1.5 w-1.5 shrink-0 rounded-full ${statusDot(item.status)}`} />
|
||||
<span className="font-mono text-[9px] text-text-muted">{item.id}</span>
|
||||
<span className="line-clamp-1 text-[10px] font-medium text-text-body">{item.title}</span>
|
||||
</div>
|
||||
{item.epicTitle ? (
|
||||
<div className="pl-3.5 text-[9px] text-text-muted/60 truncate max-w-full pr-5">
|
||||
<span className="group-hover:text-sky-300/70 transition-colors">↳ {item.epicTitle}</span>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* Footer Metadata: Assignee, Due Date */}
|
||||
<div className={`mt-3 flex w-full items-center justify-between border-t border-white/5 pt-3 text-[10px] text-text-muted/60`}>
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Assignee */}
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="i-lucide-user h-3 w-3 opacity-70" />
|
||||
<span>{issue.assignee ?? 'Unassigned'}</span>
|
||||
</div>
|
||||
{/* Due Date (if exists) */}
|
||||
{issue.due_at ? (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="i-lucide-calendar h-3 w-3 opacity-70" />
|
||||
<span>{new Date(issue.due_at as string).toLocaleDateString(undefined, { month: 'short', day: 'numeric' })}</span>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders a responsive grid of task cards.
|
||||
* Uses auto-fill with minmax to prevent cards from being too narrow to read.
|
||||
*/
|
||||
export function TaskCardGrid({ tasks, selectedId, blockerDetailsMap, blocksDetailsMap, actionableIds, onSelect }: TaskCardGridProps) {
|
||||
// Show an empty state when no tasks exist in the selected epic
|
||||
if (tasks.length === 0) {
|
||||
return (
|
||||
<div className="rounded-2xl border border-dashed border-white/10 bg-white/[0.02] px-6 py-12 text-center">
|
||||
<p className="text-xs font-medium uppercase tracking-widest text-text-muted/50">No tasks in this epic</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex gap-3 overflow-x-auto overscroll-contain pb-2 custom-scrollbar" style={{ flexWrap: 'nowrap' }}>
|
||||
{tasks.map((task) => (
|
||||
<TaskCard
|
||||
key={task.id}
|
||||
issue={task}
|
||||
selected={selectedId === task.id}
|
||||
blockers={blockerDetailsMap?.get(task.id) ?? []}
|
||||
blocking={blocksDetailsMap?.get(task.id) ?? []}
|
||||
isActionable={actionableIds?.has(task.id) ?? false}
|
||||
onSelect={onSelect}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -63,9 +63,14 @@ export function UnifiedShell({
|
|||
const selectedIssue = taskId ? issues.find((issue) => issue.id === taskId) ?? null : null;
|
||||
|
||||
const handleGraphSelect = useMemo(() => (id: string) => {
|
||||
setTaskId(id);
|
||||
setCustomRightPanel(null); // Reset when switching context
|
||||
}, [setTaskId]);
|
||||
// Toggle: clicking the same node again closes the conversation panel
|
||||
if (taskId === id) {
|
||||
setTaskId(null);
|
||||
} else {
|
||||
setTaskId(id);
|
||||
}
|
||||
setCustomRightPanel(null);
|
||||
}, [taskId, setTaskId]);
|
||||
|
||||
const handleCardSelect = useMemo(() => (id: string) => {
|
||||
if (view === 'social') {
|
||||
|
|
@ -203,17 +208,15 @@ export function UnifiedShell({
|
|||
{renderMiddleContent()}
|
||||
</div>
|
||||
|
||||
{/* RESIZE HANDLE: Right (only when panel open) */}
|
||||
{panel === 'open' && <ResizeHandle direction="right" onResize={handleRightResize} />}
|
||||
{/* RESIZE HANDLE: Right */}
|
||||
<ResizeHandle direction="right" onResize={handleRightResize} />
|
||||
|
||||
{/* RIGHT PANEL */}
|
||||
{panel === 'open' && (
|
||||
<div style={{ width: rightWidth }} className="flex-shrink-0 overflow-hidden">
|
||||
<RightPanel isOpen={true}>
|
||||
{renderRightPanelContent()}
|
||||
</RightPanel>
|
||||
</div>
|
||||
)}
|
||||
{/* RIGHT PANEL: always visible, content adapts to selection */}
|
||||
<div style={{ width: rightWidth }} className="flex-shrink-0 overflow-hidden">
|
||||
<RightPanel isOpen={true}>
|
||||
{renderRightPanelContent()}
|
||||
</RightPanel>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* THREAD DRAWER: Popup overlay when a task is selected */}
|
||||
|
|
|
|||
|
|
@ -116,6 +116,8 @@ function WorkflowGraphInner({
|
|||
isAssignMode: assignMode,
|
||||
labels: issue.labels,
|
||||
archetypes: archetypes,
|
||||
selectedTaskId: selectedId,
|
||||
onConversationOpen: onSelect,
|
||||
},
|
||||
position: { x: 0, y: 0 },
|
||||
sourcePosition: Position.Right,
|
||||
|
|
@ -178,7 +180,7 @@ function WorkflowGraphInner({
|
|||
nodes: layoutDagre(baseNodes, graphEdges),
|
||||
edges: graphEdges,
|
||||
};
|
||||
}, [beads, hideClosed, selectedId, signalById, actionableNodeIds, cycleNodeIdSet, chainNodeIds, blockerTooltipMap, archetypes, assignMode]);
|
||||
}, [beads, hideClosed, selectedId, signalById, actionableNodeIds, cycleNodeIdSet, chainNodeIds, blockerTooltipMap, archetypes, assignMode, onSelect]);
|
||||
|
||||
const nodeTypes: NodeTypes = useMemo(
|
||||
() => ({
|
||||
|
|
|
|||
|
|
@ -227,7 +227,8 @@ export function useUrlState(): UrlState {
|
|||
}, [updateUrl]);
|
||||
|
||||
const setEpicId = useCallback((id: string | null) => {
|
||||
updateUrl({ epic: id });
|
||||
// Selecting an epic clears any active task conversation so SwarmCommandFeed shows
|
||||
updateUrl({ epic: id, task: null });
|
||||
}, [updateUrl]);
|
||||
|
||||
const togglePanel = toggleRightPanel;
|
||||
|
|
|
|||
133
tests/components/graph/graph-node-conversation.test.tsx
Normal file
133
tests/components/graph/graph-node-conversation.test.tsx
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
import test from 'node:test';
|
||||
import assert from 'node:assert/strict';
|
||||
import fs from 'fs/promises';
|
||||
import path from 'path';
|
||||
|
||||
const NODE_CARD = path.join(process.cwd(), 'src/components/graph/graph-node-card.tsx');
|
||||
const RIGHT_PANEL = path.join(process.cwd(), 'src/components/activity/contextual-right-panel.tsx');
|
||||
const SHELL = path.join(process.cwd(), 'src/components/shared/unified-shell.tsx');
|
||||
const WORKFLOW_GRAPH = path.join(process.cwd(), 'src/components/shared/workflow-graph.tsx');
|
||||
const PAGE = path.join(process.cwd(), 'src/app/page.tsx');
|
||||
|
||||
// ── GraphNodeCard: conversation icon ────────────────────────────────────────
|
||||
|
||||
test('GraphNodeCard - has MessageSquare conversation icon', async () => {
|
||||
const src = await fs.readFile(NODE_CARD, 'utf-8');
|
||||
assert.ok(src.includes('MessageSquare'), 'must import and render MessageSquare');
|
||||
});
|
||||
|
||||
test('GraphNodeCard - does NOT use useUrlState (ReactFlow context/timing issues)', async () => {
|
||||
const src = await fs.readFile(NODE_CARD, 'utf-8');
|
||||
assert.ok(
|
||||
!src.includes('useUrlState'),
|
||||
'GraphNodeCard must NOT call useUrlState — hooks inside ReactFlow node renderers have context issues; use prop-threading through data instead'
|
||||
);
|
||||
});
|
||||
|
||||
test('GraphNodeCard - reads onConversationOpen callback from node data', async () => {
|
||||
const src = await fs.readFile(NODE_CARD, 'utf-8');
|
||||
assert.ok(
|
||||
src.includes('onConversationOpen'),
|
||||
'GraphNodeCard must read onConversationOpen from data (not from hooks)'
|
||||
);
|
||||
assert.ok(
|
||||
src.includes('onConversationOpen?.(id)') || src.includes('onConversationOpen(id)'),
|
||||
'onConversationOpen must be called with the node id on icon click'
|
||||
);
|
||||
});
|
||||
|
||||
test('GraphNodeCard - stops event propagation on icon click', async () => {
|
||||
const src = await fs.readFile(NODE_CARD, 'utf-8');
|
||||
assert.ok(
|
||||
src.includes('stopPropagation'),
|
||||
'must call e.stopPropagation() to prevent ReactFlow from swallowing the click'
|
||||
);
|
||||
});
|
||||
|
||||
test('GraphNodeCard - highlights icon when selectedTaskId matches this node', async () => {
|
||||
const src = await fs.readFile(NODE_CARD, 'utf-8');
|
||||
assert.ok(
|
||||
src.includes('selectedTaskId') || src.includes('isConvOpen'),
|
||||
'must use selectedTaskId from data for icon highlight, not local URL state'
|
||||
);
|
||||
});
|
||||
|
||||
// ── WorkflowGraph: threads callbacks into node data ─────────────────────────
|
||||
|
||||
test('WorkflowGraph - passes onConversationOpen into node data', async () => {
|
||||
const src = await fs.readFile(WORKFLOW_GRAPH, 'utf-8');
|
||||
assert.ok(
|
||||
src.includes('onConversationOpen'),
|
||||
'WorkflowGraph must pass onConversationOpen into node data so GraphNodeCard can call it without hooks'
|
||||
);
|
||||
});
|
||||
|
||||
test('WorkflowGraph - passes selectedTaskId into node data for icon highlight', async () => {
|
||||
const src = await fs.readFile(WORKFLOW_GRAPH, 'utf-8');
|
||||
assert.ok(
|
||||
src.includes('selectedTaskId'),
|
||||
'WorkflowGraph must pass selectedTaskId into node data so GraphNodeCard can highlight the active conversation icon'
|
||||
);
|
||||
});
|
||||
|
||||
// ── ContextualRightPanel: back button wired ──────────────────────────────────
|
||||
|
||||
test('ContextualRightPanel - task branch onClose is NOT a no-op', async () => {
|
||||
const src = await fs.readFile(RIGHT_PANEL, 'utf-8');
|
||||
const hasNoOp = /onClose=\{.*\(\)\s*=>\s*\{\s*\}\s*\}/.test(src);
|
||||
assert.ok(
|
||||
!hasNoOp,
|
||||
'onClose must not be a no-op () => {} — the back button in ThreadDrawer would do nothing'
|
||||
);
|
||||
});
|
||||
|
||||
test('ContextualRightPanel - task branch onClose clears taskId', async () => {
|
||||
const src = await fs.readFile(RIGHT_PANEL, 'utf-8');
|
||||
assert.ok(
|
||||
src.includes('setTaskId(null)') || src.includes('clearSelection'),
|
||||
'onClose must call setTaskId(null) so the back button navigates back to the activity feed'
|
||||
);
|
||||
});
|
||||
|
||||
test('ContextualRightPanel - swarm branch onClose clears swarmId', async () => {
|
||||
const src = await fs.readFile(RIGHT_PANEL, 'utf-8');
|
||||
assert.ok(
|
||||
src.includes('setSwarmId(null)') || src.includes('clearSelection'),
|
||||
'SwarmIdBranch onClose must call setSwarmId(null)'
|
||||
);
|
||||
});
|
||||
|
||||
test('ContextualRightPanel - taskId if-branch appears before epicId if-branch', async () => {
|
||||
const src = await fs.readFile(RIGHT_PANEL, 'utf-8');
|
||||
const taskIfIdx = src.indexOf('if (taskId)');
|
||||
const epicIfIdx = src.indexOf('if (epicId)');
|
||||
assert.ok(taskIfIdx !== -1, 'must have an if (taskId) branch');
|
||||
assert.ok(epicIfIdx !== -1, 'must have an if (epicId) branch');
|
||||
assert.ok(
|
||||
taskIfIdx < epicIfIdx,
|
||||
'if (taskId) check must come before if (epicId) check — task conversation takes priority over epic feed when user clicks conversation icon in graph'
|
||||
);
|
||||
});
|
||||
|
||||
// ── UnifiedShell: right panel always visible ─────────────────────────────────
|
||||
|
||||
test('UnifiedShell - right panel NOT gated behind panel === open', async () => {
|
||||
const src = await fs.readFile(SHELL, 'utf-8');
|
||||
const hasGate = /panel\s*===\s*['"]open['"]\s*&&\s*[\s\S]{0,60}<div[^>]*rightWidth/.test(src);
|
||||
assert.ok(!hasGate, 'Right panel div must render unconditionally');
|
||||
});
|
||||
|
||||
test('UnifiedShell - passes taskId to ContextualRightPanel', async () => {
|
||||
const src = await fs.readFile(SHELL, 'utf-8');
|
||||
assert.ok(src.includes('taskId={taskId}'), 'must pass taskId so right panel shows conversation on selection');
|
||||
});
|
||||
|
||||
// ── page.tsx: Suspense boundary for useSearchParams ──────────────────────────
|
||||
|
||||
test('page.tsx - wraps UnifiedShell in Suspense for useSearchParams', async () => {
|
||||
const src = await fs.readFile(PAGE, 'utf-8');
|
||||
assert.ok(
|
||||
src.includes('Suspense'),
|
||||
'page.tsx must wrap UnifiedShell in <Suspense> — without it, useSearchParams updates from deep components (like inside ReactFlow nodes) may not propagate correctly'
|
||||
);
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue