@spunto/design-system 0.28.0 → 0.30.1

package/src/components/tasks/task-state.tsx

@@ -0,0 +1,180 @@
+"use client"
+
+// One visual language for a task's five states, shared by every surface that names a task — the
+// project's list, the org-wide conversation list, the cockpit's top bar, a workspace row. Two
+// copies of a state colour map is how a product ends up with `in-review` amber in one place and
+// flame in another.
+
+import { useEffect, useState } from "react"
+import { CheckCircle2Icon, CircleAlertIcon, ClockIcon, GitPullRequestIcon, Loader2Icon } from "lucide-react"
+
+import { cn } from "../../utils"
+import { Badge } from "../badge"
+import type { TaskPendingAction, TaskState } from "./types"
+
+export interface TaskStateStyle {
+  label: string
+  /** Background + text + border, for a badge or a chip. */
+  className: string
+  /** The text colour alone — for an icon or a line of text in that state's colour. */
+  textClass: string
+  /** The 8 px dot, for places a badge would be too loud. */
+  dotClass: string
+}
+
+/**
+ * The lifecycle order a task travels — queued → running → in review — then history. Lists group
+ * in this order so a column reads as a pipeline; `done` and `failed` sink because they are over.
+ */
+export const TASK_STATE_ORDER: TaskState[] = ["queued", "running", "in-review", "failed", "done"]
+
+// `in-review` is the one that wants the eye — the only state waiting on a human — so it gets the
+// brand flame; running stays calm.
+export const taskStateConfig: Record<TaskState, TaskStateStyle> = {
+  queued: {
+    label: "Queued",
+    className: "bg-muted text-muted-foreground border-border",
+    textClass: "text-muted-foreground",
+    dotClass: "bg-muted-foreground/40",
+  },
+  running: {
+    label: "Running",
+    className: "bg-amber-500/15 text-amber-700 dark:text-amber-400 border-amber-500/30",
+    textClass: "text-amber-700 dark:text-amber-400",
+    dotClass: "bg-amber-500",
+  },
+  "in-review": {
+    label: "In review",
+    className: "bg-primary/15 text-primary border-primary/30",
+    textClass: "text-primary",
+    dotClass: "bg-primary",
+  },
+  done: {
+    label: "Done",
+    className: "bg-green-500/15 text-green-700 dark:text-green-400 border-green-500/30",
+    textClass: "text-green-700 dark:text-green-400",
+    dotClass: "bg-green-500",
+  },
+  failed: {
+    label: "Failed",
+    className: "bg-red-500/15 text-red-700 dark:text-red-400 border-red-500/30",
+    textClass: "text-red-700 dark:text-red-400",
+    dotClass: "bg-red-500",
+  },
+}
+
+export const taskPendingActionConfig: Record<TaskPendingAction, { label: string; className: string; textClass: string }> = {
+  accepting: { label: "Accepting", className: "bg-primary/10 text-primary border-primary/30", textClass: "text-primary" },
+  dropping: {
+    label: "Dropping",
+    className: "bg-destructive/10 text-destructive border-destructive/30",
+    textClass: "text-destructive",
+  },
+  replying: { label: "Sending", className: "bg-primary/10 text-primary border-primary/30", textClass: "text-primary" },
+}
+
+/** Lax lookup: an unknown state reads as `queued` (neutral) instead of throwing. */
+export function taskStateStyle(state: string): TaskStateStyle {
+  return taskStateConfig[state as TaskState] ?? taskStateConfig.queued
+}
+
+/** Queued, running or in review — the task still holds its machine and can still move. */
+export function isLiveTaskState(state: string): boolean {
+  return state === "queued" || state === "running" || state === "in-review"
+}
+
+export function TaskStateIcon({ state, className }: { state: string; className?: string }) {
+  const c = cn("h-3 w-3", className)
+  if (state === "queued") return <ClockIcon className={c} />
+  if (state === "running") return <Loader2Icon className={cn(c, "animate-spin")} />
+  if (state === "in-review") return <GitPullRequestIcon className={c} />
+  if (state === "done") return <CheckCircle2Icon className={c} />
+  return <CircleAlertIcon className={c} />
+}
+
+export interface TaskStateBadgeProps {
+  state: string
+  pendingAction?: TaskPendingAction | null
+  pendingSince?: string | null
+  className?: string
+}
+
+/**
+ * Where the task stands — unless something is happening to it, in which case *that*.
+ *
+ * The two are never shown side by side: while an accept runs, "In review · Accepting…" is two
+ * badges saying one thing, and the state is the half that is about to stop being true. A dashed
+ * border is the whole of the extra vocabulary, and the clock answers "is this stuck?".
+ */
+export function TaskStateBadge({ state, pendingAction = null, pendingSince = null, className }: TaskStateBadgeProps) {
+  if (pendingAction) return <TaskPendingBadge action={pendingAction} since={pendingSince} className={className} />
+  const style = taskStateStyle(state)
+  return (
+    <Badge variant="outline" className={cn("h-5 shrink-0 gap-1 px-1.5 text-[10px]", style.className, className)}>
+      <TaskStateIcon state={state} />
+      {style.label}
+    </Badge>
+  )
+}
+
+export function TaskPendingBadge({
+  action,
+  since = null,
+  className,
+}: {
+  action: TaskPendingAction
+  since?: string | null
+  className?: string
+}) {
+  const style = taskPendingActionConfig[action]
+  const elapsed = useElapsed(since)
+  return (
+    <Badge variant="outline" className={cn("h-5 shrink-0 gap-1 border-dashed px-1.5 text-[10px]", style.className, className)}>
+      <Loader2Icon className="h-3 w-3 animate-spin" />
+      {style.label}
+      {elapsed && <span className="tabular-nums opacity-70">{elapsed}</span>}
+    </Badge>
+  )
+}
+
+/** The same five states as an 8 px dot — context rather than subject (a task named in a workspace row). */
+export function TaskStateDot({ state, className }: { state: string; className?: string }) {
+  return <span className={cn("h-1.5 w-1.5 shrink-0 rounded-full", taskStateStyle(state).dotClass, className)} />
+}
+
+/**
+ * A ticking "for how long", for something still going: a tool call in flight, a machine being
+ * prepared, an accept in progress. `null` stops the clock.
+ *
+ * The one live clock of the package: `formatRelativeTime` deliberately doesn't tick, but a spinner
+ * with a frozen number next to it reads as stuck — which is exactly the question it is answering.
+ */
+export function useElapsed(since: string | null | undefined): string | null {
+  const [now, setNow] = useState(() => Date.now())
+  useEffect(() => {
+    if (!since) return
+    const id = setInterval(() => setNow(Date.now()), 1000)
+    return () => clearInterval(id)
+  }, [since])
+  if (!since) return null
+  const seconds = Math.max(0, Math.round((now - new Date(since).getTime()) / 1000))
+  if (!Number.isFinite(seconds)) return null
+  if (seconds < 60) return `${seconds}s`
+  const minutes = Math.floor(seconds / 60)
+  // An hours tier: a tool call going since yesterday must not read "1850m 20s".
+  if (minutes < 60) return `${minutes}m ${seconds % 60}s`
+  return `${Math.floor(minutes / 60)}h ${minutes % 60}m`
+}
+
+/** How long something took, between two ISO dates, in the coarsest unit that still says something. */
+export function taskSpan(startIso: string | null | undefined, endIso: string | null | undefined): string | null {
+  if (!startIso || !endIso) return null
+  const ms = new Date(endIso).getTime() - new Date(startIso).getTime()
+  if (!Number.isFinite(ms) || ms < 0) return null
+  if (ms < 1000) return `${ms}ms`
+  const s = Math.round(ms / 1000)
+  if (s < 60) return `${s}s`
+  const m = Math.floor(s / 60)
+  if (m < 60) return `${m}m ${s % 60}s`
+  return `${Math.floor(m / 60)}h ${m % 60}m`
+}

package/src/components/tasks/tasks.test.tsx

@@ -0,0 +1,205 @@
+/**
+ * The derivations `/tasks` makes on its own — what a folded run says, what the boot panel claims,
+ * which task a workspace row names — and the rows that have to show up (or not) in jsdom.
+ *
+ * The timeline itself is virtualized and measures real layout, which jsdom does not have; what it
+ * draws is covered by the pure functions it folds events with.
+ */
+import { describe, it, expect, vi } from "vitest"
+import { render, screen, fireEvent } from "@testing-library/react"
+
+import { renderInlineMarkdown } from "./agent-markdown"
+import { TaskComposer } from "./composer"
+import { bootSteps } from "./machine"
+import { formatCost, formatTokens } from "./session-usage"
+import { TaskList } from "./task-list"
+import { taskSpan } from "./task-state"
+import { runStats, toolSubject, toolVerb, type ToolRun } from "./tool-stack"
+import type { TaskCommand, TaskEvent, TaskItem } from "./types"
+import { indexTasksByWorker } from "./worker-link"
+
+const ev = (seq: number, type: string, payload: Record<string, unknown>, ts = `2026-09-24T10:00:${String(seq).padStart(2, "0")}Z`): TaskEvent => ({
+  seq,
+  ts,
+  type,
+  payload,
+})
+
+const task = (over: Partial<TaskItem> = {}): TaskItem => ({
+  id: "t1",
+  title: "Fix the login on Safari",
+  prompt: "The login button does nothing on Safari 18.",
+  state: "running",
+  branch: "task/fix-login-a1b2c3",
+  createdAt: "2026-09-24T10:00:00Z",
+  lastActivityAt: "2026-09-24T10:05:00Z",
+  ...over,
+})
+
+describe("tool runs", () => {
+  it("reads a tool name as a verb, by prefix, with a fallback", () => {
+    expect(toolVerb("Read")).toBe("read")
+    expect(toolVerb("MultiEdit")).toBe("edit")
+    expect(toolVerb("Bash")).toBe("run")
+    expect(toolVerb("mcp__weird__thing")).toBe("other")
+  })
+
+  it("pulls the subject out of JSON arguments, and keeps raw text otherwise", () => {
+    expect(toolSubject(JSON.stringify({ file_path: "/src/app.ts", limit: 40 }))).toBe("/src/app.ts")
+    expect(toolSubject(JSON.stringify({ command: "npm   test\n -- --run" }))).toBe("npm test -- --run")
+    expect(toolSubject("{clipped json")).toBe("{clipped json")
+  })
+
+  it("summarises a run in verbs, keeps failures counted, and shows only the last call as running", () => {
+    const run: ToolRun = {
+      items: [
+        { kind: "tool", entry: { call: ev(1, "tool.call", { name: "Read" }), result: ev(2, "tool.result", {}) } },
+        { kind: "tool", entry: { call: ev(3, "tool.call", { name: "Read" }), result: ev(4, "tool.result", {}) } },
+        // An earlier call with no result is a capture gap, not a tool running for hours.
+        { kind: "tool", entry: { call: ev(5, "tool.call", { name: "Grep" }) } },
+        { kind: "thinking", event: ev(6, "thinking", { text: "hm" }) },
+        { kind: "tool", entry: { call: ev(7, "tool.call", { name: "Bash" }), result: ev(8, "tool.result", { isError: true }) } },
+      ],
+    }
+    const stats = runStats(run)
+    expect(stats.label).toBe("read 2 files · 1 search · ran 1 command · 1 thought")
+    expect(stats.failed).toBe(1)
+    expect(stats.running).toBeNull()
+
+    const live: ToolRun = { items: [...run.items, { kind: "tool", entry: { call: ev(9, "tool.call", { name: "Edit" }) } }] }
+    expect(runStats(live).running?.call.seq).toBe(9)
+  })
+})
+
+describe("boot steps", () => {
+  const branchSetup = (status: string): TaskCommand => ({
+    id: "c1",
+    command: "git checkout -B …",
+    status,
+    createdAt: "2026-09-24T10:00:10Z",
+    label: "Branch setup (spunto)",
+  })
+
+  it("is looking for a machine while queued without a worker", () => {
+    const steps = bootSteps({ task: task({ state: "queued" }), worker: null, commands: [] })
+    expect(steps.map((s) => s.key)).toEqual(["machine", "container", "setup", "branch", "session"])
+    expect(steps[0].state).toBe("running")
+  })
+
+  it("says the machine was never allocated on a task that died before one", () => {
+    const steps = bootSteps({ task: task({ state: "failed" }), worker: null, commands: [] })
+    // A post-mortem drops the container/setup rows: the machine is no longer the task's.
+    expect(steps.map((s) => s.key)).toEqual(["machine", "branch", "session"])
+    expect(steps[0].state).toBe("error")
+    expect(steps[2].detail).toBe("never started")
+  })
+
+  it("starts the session step once the branch is ready on a ready worker", () => {
+    const worker = { id: "w1", name: "pool-1", state: "ready", dockerState: "running", createdAt: "2026-09-20T00:00:00Z" }
+    const steps = bootSteps({ task: task({ state: "queued" }), worker, commands: [branchSetup("succeeded")] })
+    expect(steps.find((s) => s.key === "machine")?.detail).toBe("recycled from the pool · pool-1")
+    expect(steps.find((s) => s.key === "branch")?.state).toBe("done")
+    expect(steps.find((s) => s.key === "session")?.state).toBe("running")
+  })
+})
+
+describe("worker ↔ task", () => {
+  it("names the live task on a worker, else the most recent one", () => {
+    const tasks = [
+      task({ id: "old", state: "done", workerId: "w1", lastActivityAt: "2026-09-24T12:00:00Z" }),
+      task({ id: "live", state: "in-review", workerId: "w1", lastActivityAt: "2026-09-24T09:00:00Z" }),
+      task({ id: "other", state: "failed", workerId: "w2" }),
+    ]
+    const index = indexTasksByWorker(tasks)
+    expect(index.get("w1")).toMatchObject({ task: { id: "live" }, live: true })
+    expect(index.get("w2")).toMatchObject({ task: { id: "other" }, live: false })
+  })
+})
+
+describe("formatters", () => {
+  it("reads token counts as orders of magnitude", () => {
+    expect(formatTokens(812)).toBe("812")
+    expect(formatTokens(41_234)).toBe("41.2k")
+    expect(formatTokens(1_000_000)).toBe("1M")
+    expect(formatCost(0.0042)).toBe("$0.0042")
+    expect(formatCost(1.5)).toBe("$1.50")
+  })
+
+  it("spans two dates, and refuses a clock going backwards", () => {
+    expect(taskSpan("2026-09-24T10:00:00Z", "2026-09-24T10:02:05Z")).toBe("2m 5s")
+    expect(taskSpan("2026-09-24T10:00:00Z", "2026-09-24T09:00:00Z")).toBeNull()
+    expect(taskSpan("2026-09-24T10:00:00Z", null)).toBeNull()
+  })
+})
+
+describe("agent markdown", () => {
+  it("never turns a non-http link into an anchor", () => {
+    render(<p>{renderInlineMarkdown("[click](javascript:alert(1)) and https://spunto.net/x.", "t")}</p>)
+    expect(screen.queryByText("click")?.closest("a")).toBeNull()
+    // Trailing sentence punctuation is not part of the URL.
+    expect(screen.getByText("https://spunto.net/x").closest("a")?.getAttribute("href")).toBe("https://spunto.net/x")
+  })
+})
+
+describe("TaskList", () => {
+  it("offers Accept only in review, and hands the row to the callback", () => {
+    const onAccept = vi.fn()
+    render(
+      <TaskList
+        tasks={[task({ id: "a", state: "in-review", title: "Review me" }), task({ id: "b", state: "running", title: "Still going" })]}
+        taskHref={(t) => `/tasks/${t.id}`}
+        onAccept={onAccept}
+        onDrop={() => {}}
+      />,
+    )
+    const accepts = screen.getAllByRole("button", { name: /accept/i })
+    expect(accepts).toHaveLength(1)
+    fireEvent.click(accepts[0])
+    expect(onAccept).toHaveBeenCalledWith(expect.objectContaining({ id: "a" }))
+    expect(screen.getByText("Review me").closest("a")?.getAttribute("href")).toBe("/tasks/a")
+  })
+
+  it("holds both buttons while an action is in flight, and says which", () => {
+    render(
+      <TaskList
+        tasks={[task({ state: "in-review", pendingAction: "accepting", pendingSince: new Date().toISOString() })]}
+        taskHref={() => "#"}
+        onAccept={() => {}}
+        onDrop={() => {}}
+      />,
+    )
+    expect(screen.getByRole("button", { name: /accepting…/i })).toHaveProperty("disabled", true)
+    expect(screen.getByRole("button", { name: /drop/i })).toHaveProperty("disabled", true)
+  })
+
+  it("starts history folded", () => {
+    render(<TaskList tasks={[task({ state: "done", title: "Old work" })]} taskHref={() => "#"} />)
+    expect(screen.queryByText("Old work")).toBeNull()
+    fireEvent.click(screen.getByText("show 1 more"))
+    expect(screen.getByText("Old work")).toBeTruthy()
+  })
+})
+
+describe("TaskComposer", () => {
+  it("says why it is closed on a one-shot harness that is still working", () => {
+    render(<TaskComposer state="running" protocol="claude-json" onSubmit={() => {}} />)
+    expect((screen.getByRole("textbox") as HTMLTextAreaElement).disabled).toBe(true)
+    expect(screen.getByRole("textbox").getAttribute("placeholder")).toMatch(/reads its prompt once/)
+  })
+
+  it("sends on Enter in an interactive session, and clears the box", () => {
+    const onSubmit = vi.fn()
+    render(<TaskComposer state="running" protocol="claude-stream" canResume onSubmit={onSubmit} onInterrupt={() => {}} />)
+    const box = screen.getByRole("textbox") as HTMLTextAreaElement
+    fireEvent.change(box, { target: { value: "  do X instead  " } })
+    fireEvent.keyDown(box, { key: "Enter" })
+    expect(onSubmit).toHaveBeenCalledWith("do X instead", [])
+    expect(box.value).toBe("")
+    expect(screen.getByRole("button", { name: /stop/i })).toBeTruthy()
+  })
+
+  it("renders nothing once the task is over", () => {
+    const { container } = render(<TaskComposer state="done" protocol="claude-stream" onSubmit={() => {}} />)
+    expect(container.innerHTML).toBe("")
+  })
+})