1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
import { useMemo } from "react";
import type { DirectiveSummary, DirectiveStatus } from "../../lib/api";
import { useSupervisorQuestions } from "../../contexts/SupervisorQuestionsContext";
const STATUS_BADGE: Record<DirectiveStatus, { color: string; label: string }> = {
draft: { color: "text-[#7788aa] border-[#2a3a5a]", label: "DRAFT" },
active: { color: "text-green-400 border-green-800", label: "ACTIVE" },
idle: { color: "text-yellow-400 border-yellow-800", label: "IDLE" },
paused: { color: "text-orange-400 border-orange-800", label: "PAUSED" },
archived: { color: "text-[#556677] border-[#2a3a5a]", label: "ARCHIVED" },
};
interface DirectiveListProps {
directives: DirectiveSummary[];
selectedId: string | null;
onSelect: (id: string) => void;
onCreate: () => void;
}
export function DirectiveList({ directives, selectedId, onSelect, onCreate }: DirectiveListProps) {
const { pendingQuestions } = useSupervisorQuestions();
const questionsPerDirective = useMemo(() => {
const counts = new Map<string, number>();
for (const q of pendingQuestions) {
if (q.directiveId) {
counts.set(q.directiveId, (counts.get(q.directiveId) || 0) + 1);
}
}
return counts;
}, [pendingQuestions]);
return (
<div className="flex flex-col h-full">
<div className="flex items-center justify-between px-3 py-2 border-b border-dashed border-[rgba(117,170,252,0.2)]">
<span className="text-[11px] font-mono text-[#9bc3ff] uppercase tracking-wide">
Directives
</span>
<button
type="button"
onClick={onCreate}
className="text-[11px] font-mono text-[#75aafc] hover:text-white bg-transparent border border-[rgba(117,170,252,0.3)] rounded px-2 py-0.5 hover:border-[rgba(117,170,252,0.6)] transition-colors"
>
+ New
</button>
</div>
<div className="flex-1 overflow-y-auto">
{directives.length === 0 ? (
<div className="px-3 py-6 text-center text-[#556677] font-mono text-[11px]">
No directives yet
</div>
) : (
directives.map((d) => {
const badge = STATUS_BADGE[d.status] || STATUS_BADGE.draft;
const progress = d.totalSteps > 0
? Math.round((d.completedSteps / d.totalSteps) * 100)
: 0;
return (
<button
key={d.id}
type="button"
onClick={() => onSelect(d.id)}
className={`w-full text-left px-3 py-2.5 border-b border-[rgba(117,170,252,0.1)] hover:bg-[rgba(117,170,252,0.05)] transition-colors ${
selectedId === d.id ? "bg-[rgba(117,170,252,0.1)]" : ""
}`}
>
<div className="flex items-center justify-between mb-1">
<span className="text-[12px] font-mono text-white truncate pr-2">
{d.title}
</span>
{questionsPerDirective.has(d.id) && (
<span className="inline-block w-2.5 h-2.5 rounded-full bg-amber-400 animate-pulse shrink-0" title={`${questionsPerDirective.get(d.id)} pending question(s)`} />
)}
<span
className={`text-[9px] font-mono ${badge.color} border rounded px-1.5 py-0.5 shrink-0`}
>
{badge.label}
</span>
</div>
<p className="text-[10px] text-[#7788aa] font-mono truncate mb-1.5">
{d.goal}
</p>
{d.totalSteps > 0 && (
<div className="flex items-center gap-2">
<div className="flex-1 h-1 bg-[#1a2540] rounded overflow-hidden">
<div
className="h-full bg-emerald-600 rounded transition-all"
style={{ width: `${progress}%` }}
/>
</div>
<span className="text-[9px] font-mono text-[#556677] shrink-0">
{d.completedSteps}/{d.totalSteps}
</span>
</div>
)}
</button>
);
})
)}
</div>
</div>
);
}
|
