Spaces:
Running
Running
File size: 2,608 Bytes
dd87944 | 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 | import React, { useState } from "react";
import { Brain, CheckSquare, ChevronDown, ChevronUp } from "lucide-react";
export default function AgentTodoPanel({ todos = [], planningComplete, thinkNotes = [] }) {
const [open, setOpen] = useState(true);
if (!todos.length && !thinkNotes.length) return null;
const done = todos.filter((t) => t.status === "done").length;
return (
<div
className="mx-3 mb-1 rounded-lg border text-[11px]"
style={{ borderColor: "var(--emo-border)", background: "var(--emo-surface)" }}
>
<button
type="button"
onClick={() => setOpen((v) => !v)}
className="w-full flex items-center gap-2 px-2.5 py-1.5 text-left"
>
<CheckSquare size={12} className="shrink-0 text-[var(--emo-accent)]" />
<span className="flex-1 font-medium">Plan & todos</span>
{!planningComplete && (
<span className="text-[9px] px-1.5 py-0.5 rounded emo-alert-warning shrink-0">plan requis</span>
)}
<span className="text-secondary-em shrink-0">{done}/{todos.length}</span>
{open ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
</button>
{open && (
<div className="px-2.5 pb-2 space-y-2 max-h-40 overflow-y-auto">
{thinkNotes.slice(0, 2).map((n) => (
<div
key={n.id || n.ts}
className="flex gap-1.5 text-[10px] p-1.5 rounded"
style={{ background: "var(--emo-bg)" }}
>
<Brain size={11} className="shrink-0 mt-0.5 opacity-70" />
<div className="min-w-0">
<p className="text-secondary-em line-clamp-3">{n.thought}</p>
{n.next_action && (
<p className="text-[var(--emo-accent)] mt-0.5 truncate">→ {n.next_action}</p>
)}
</div>
</div>
))}
<ul className="space-y-0.5">
{todos.map((t) => (
<li
key={t.id}
className="flex items-start gap-1.5 text-[10px]"
style={{
opacity: t.status === "done" ? 0.5 : 1,
color: t.status === "active" ? "var(--emo-accent)" : "var(--emo-text-secondary)",
}}
>
<span className="w-3 shrink-0 text-center">
{t.status === "done" ? "✓" : t.status === "active" ? "▸" : "○"}
</span>
<span className="truncate">{t.text}</span>
</li>
))}
</ul>
</div>
)}
</div>
);
}
|