@spunto/design-system 0.28.0 → 0.30.0

package/src/components/tasks/index.ts

@@ -0,0 +1,111 @@
+// @spunto/design-system/tasks — delegated work (docs/tasks.md): the lists that name a task, the
+// cockpit that follows one, and every panel inside it.
+//
+// A domain sub-export like `/workers`: nothing here fetches. Lists take their rows, panels take
+// their data, actions go out as callbacks, and whatever reads an API is a slot or a
+// promise-returning callback (`TaskDiffPanel.loadPatch`). The cockpit is a layout whose panels are
+// the package's own components, assembled by the app.
+
+// ── Vocabulary ──────────────────────────────────────────────────────────────────────────────
+export {
+  TASK_STATE_ORDER,
+  TaskPendingBadge,
+  TaskStateBadge,
+  TaskStateDot,
+  TaskStateIcon,
+  isLiveTaskState,
+  taskPendingActionConfig,
+  taskSpan,
+  taskStateConfig,
+  taskStateStyle,
+  useElapsed,
+} from "./task-state"
+export type { TaskStateBadgeProps, TaskStateStyle } from "./task-state"
+
+// ── Lists ───────────────────────────────────────────────────────────────────────────────────
+export { TaskList } from "./task-list"
+export type { TaskListProps } from "./task-list"
+export { TaskConversationList, TaskConversationPlaceholder } from "./conversation-list"
+export type { TaskConversationListProps } from "./conversation-list"
+export { TaskWorkerChip, WorkerTaskChip, indexTasksByWorker } from "./worker-link"
+export type { WorkerTask } from "./worker-link"
+export { NewTaskDialog } from "./new-task-dialog"
+export type { NewTaskDialogProps, NewTaskModelGroup, NewTaskValue } from "./new-task-dialog"
+
+// ── The cockpit ─────────────────────────────────────────────────────────────────────────────
+export { TaskCockpit, TaskPanelTabs } from "./task-cockpit"
+export type { TaskCockpitProps, TaskCockpitView } from "./task-cockpit"
+export { TaskCockpitMobile, useVisualViewport } from "./task-cockpit-mobile"
+export type { TaskCockpitMobileProps, VisualViewportState } from "./task-cockpit-mobile"
+export { TaskDetails } from "./task-details"
+export type { TaskDetailsProps } from "./task-details"
+
+// ── The conversation ────────────────────────────────────────────────────────────────────────
+export { TaskEventStream } from "./event-stream"
+export type { TaskEventStreamProps } from "./event-stream"
+export { TaskComposer } from "./composer"
+export type { TaskComposerProps } from "./composer"
+export { AgentMarkdown, renderInlineMarkdown } from "./agent-markdown"
+export {
+  TaskToolStackButton,
+  TaskToolStackSheet,
+  ToolLine,
+  ToolRunBody,
+  runCalls,
+  runDuration,
+  runFiles,
+  runStats,
+  toolSubject,
+  toolVerb,
+} from "./tool-stack"
+export type { RunItem, RunStats, StackedCall, ToolCall, ToolRun, ToolVerb } from "./tool-stack"
+
+// ── Files (RFC 0022) ────────────────────────────────────────────────────────────────────────
+export { AttachFileButton, AttachmentDraftStrip, FileDropOverlay, TaskFiles, fileRefs, useAttachmentDraft } from "./task-attachments"
+export type { AttachmentDraft } from "./task-attachments"
+export {
+  MAX_FILES_PER_TURN,
+  MAX_FILE_BYTES,
+  MAX_TURN_BYTES,
+  fileKind,
+  filesFrom,
+  formatBytes,
+  isPreviewable,
+  prepareFile,
+} from "./attachments"
+
+// ── Side panels ─────────────────────────────────────────────────────────────────────────────
+export { TaskDiffPanel } from "./diff-panel"
+export type { TaskDiffPanelProps } from "./diff-panel"
+export { TaskPullRequest } from "./pull-request"
+export { TaskSessionUsage, formatCost, formatTokens } from "./session-usage"
+export { TaskCommandLog } from "./command-log"
+export { TaskBoot, TaskMachine, bootSteps, workerLabel } from "./machine"
+export type { TaskBootStep, TaskMachineProps, TaskMachineTask } from "./machine"
+
+export type {
+  AttachmentUrl,
+  DraftFile,
+  PendingMessage,
+  TaskCommand,
+  TaskConversation,
+  TaskDiff,
+  TaskDiffFile,
+  TaskEvent,
+  TaskFilePatch,
+  TaskFileRef,
+  TaskItem,
+  TaskMachineNode,
+  TaskMachinePort,
+  TaskPatchHunk,
+  TaskPatchLine,
+  TaskPendingAction,
+  TaskPullRequestData,
+  TaskPullRequests,
+  TaskRepoDiff,
+  TaskSessionUsageData,
+  TaskState,
+} from "./types"
+
+export type { LinkRender } from "../workers/worker-card"
+export { cn, formatRelativeTime } from "../../utils"

package/src/components/tasks/machine.tsx

@@ -0,0 +1,455 @@
+"use client"
+
+import { useState } from "react"
+import {
+  Code2Icon,
+  ExternalLinkIcon,
+  GitBranchIcon,
+  MoonIcon,
+  NetworkIcon,
+  ServerIcon,
+  SparklesIcon,
+  WifiOffIcon,
+} from "lucide-react"
+
+import { cn, formatDuration } from "../../utils"
+import { ResourceBars, type WorkerStats } from "../workers/resource-bars"
+import { SetupWaterfall } from "../workers/setup-waterfall"
+import { StepIndicator, phaseLabel, setupTotalMs, type StepState } from "../workers/setup-progress"
+import type { WorkerCardWorker, WorkerSetupStatus } from "../workers/types"
+import type { LinkRender } from "../workers/worker-card"
+import { WorkerSetupTimeline } from "../workers/worker-setup-timeline"
+import { WorkerStatusDot, WorkerStatusPill, resolveWorkerStatus } from "../workers/worker-status"
+import { useElapsed } from "./task-state"
+import type { TaskCommand, TaskItem, TaskMachineNode, TaskMachinePort } from "./types"
+
+/**
+ * The machine behind a task.
+ *
+ * A task is a conversation, but it happens *somewhere* — a container, on a node, that had to be
+ * found or built before a single token was generated. The cockpit used to say so in three words
+ * ("Worker · open"), which is fine right up until the interesting thing is the machine itself:
+ *
+ *  - a `queued` task is **entirely** a machine being prepared. "Waiting for the session's first
+ *    event…" described none of it, while the platform knew the phase, the repositories being
+ *    cloned and the lifecycle command running.
+ *  - a task in review holds a **parked** container (`taskReviewMode: "stop"`) — stopped, disk
+ *    intact, because releasing it would wipe what you opened the review to look at.
+ *  - a running session is a container burning CPU and memory, which is the difference between an
+ *    agent thinking and an agent stuck in a test suite.
+ *
+ * Everything here is observed, never guessed: the worker row, its container-side setup status,
+ * its live stats, and the task's own command history. Where the platform doesn't know (has the
+ * pool recycled this machine since the task ended?) the component says so rather than implying.
+ */
+
+/** The task fields the machine block and the boot panel read. */
+export type TaskMachineTask = Pick<TaskItem, "state" | "createdAt"> &
+  Partial<Pick<TaskItem, "startedAt" | "branch" | "baseBranch" | "error">>
+
+/** A worker's display name — `name` when it has one, its index otherwise (same rule as the card). */
+export function workerLabel(worker: WorkerCardWorker): string {
+  return worker.name?.trim() || (worker.index != null ? `Workspace #${worker.index}` : "Workspace")
+}
+
+/**
+ * Did this task get a machine that already existed?
+ *
+ * The pool is the whole point — the first task of a project pays for an image build and a clone,
+ * the tenth should not — and "recycled" vs "fresh" is exactly the difference between a boot of
+ * seconds and one of minutes. Read from the timestamps rather than recorded: a worker older than
+ * the task that took it was not created for it.
+ */
+function recycled(task: TaskMachineTask, worker: WorkerCardWorker): boolean {
+  if (!worker.createdAt) return false
+  return new Date(worker.createdAt).getTime() < new Date(task.createdAt).getTime()
+}
+
+// ── The sidebar block ────────────────────────────────────────────────────────────────────────
+
+export interface TaskMachineProps {
+  task: TaskMachineTask
+  /** The worker row, as the app reads it. `null` → the task has no machine (yet). */
+  worker: WorkerCardWorker | null | undefined
+  /** The node it lives on. `online: false` draws "offline". */
+  node?: TaskMachineNode | null
+  /** Live container stats — pass them only while the task is live and the container up. */
+  stats?: WorkerStats | null
+  /** Ports detected listening in the container (editor and SSH are filtered out). */
+  ports?: TaskMachinePort[]
+  /** The worker's own page (logs, terminal, files). */
+  workerHref?: string
+  /** The editor (code-server). Shown only while the container runs. */
+  editorHref?: string
+  portHref?: (port: number) => string | undefined
+  render?: { link?: LinkRender }
+}
+
+export function TaskMachine({ task, worker, node = null, stats = null, ports = [], workerHref, editorHref, portHref, render }: TaskMachineProps) {
+  const [showBreakdown, setShowBreakdown] = useState(false)
+  const Link: LinkRender =
+    render?.link ?? (({ href, className, children }) => <a href={href} className={className}>{children}</a>)
+
+  if (!worker) {
+    return (
+      <p className="text-[11px] leading-relaxed text-muted-foreground">
+        {task.state === "queued"
+          ? "Looking for a machine — a free worker from the project's pool, or a fresh one."
+          : "This task never got a machine."}
+      </p>
+    )
+  }
+
+  const status = resolveWorkerStatus(worker)
+  const setup = worker.setupStatus ?? null
+  const running = worker.dockerState === "running"
+  // 8080 is the editor, already its own link; 22 is SSH, not a browser tab.
+  const detectedPorts = ports.filter((p) => p.port !== 8080 && p.port !== 22)
+  const startup = setupTotalMs(setup)
+  // A terminal task no longer holds its worker: the next task may already be using it. Saying
+  // "Running" without saying whose is how a cockpit lies quietly.
+  const released = task.state === "done" || task.state === "failed"
+  const parked = task.state === "in-review" && !running
+  const label = workerLabel(worker)
+
+  return (
+    <div className="space-y-2.5">
+      <div className="flex items-center gap-2">
+        <WorkerStatusDot status={status} />
+        {workerHref ? (
+          <Link href={workerHref} className="min-w-0 flex-1 truncate text-xs font-medium hover:underline">
+            {label}
+          </Link>
+        ) : (
+          <span className="min-w-0 flex-1 truncate text-xs font-medium">{label}</span>
+        )}
+        <WorkerStatusPill status={status} label={status.settingUp ? phaseLabel(setup) : undefined} />
+      </div>
+
+      <div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-[11px] text-muted-foreground">
+        <span className="flex items-center gap-1">
+          <ServerIcon className="h-3 w-3 shrink-0" />
+          {node ? node.name : "node unknown"}
+        </span>
+        {node && !node.online && (
+          <span className="flex items-center gap-1 text-orange-600 dark:text-orange-400">
+            <WifiOffIcon className="h-3 w-3 shrink-0" />
+            offline
+          </span>
+        )}
+        <span aria-hidden>·</span>
+        <span className="flex items-center gap-1">
+          <SparklesIcon className="h-3 w-3 shrink-0" />
+          {recycled(task, worker) ? "recycled from the pool" : "spawned for this task"}
+        </span>
+      </div>
+
+      {/* Not while the task is `queued`: the boot panel in the centre column is showing this very
+          timeline, in full, and two copies of a cloning repository on one screen is one too many.
+          It stays here for the rest — a parked machine restarting for a follow-up, say. */}
+      {status.settingUp && task.state !== "queued" && <WorkerSetupTimeline status={setup} settingUp />}
+
+      {/* `@container`, deliberately: ResourceBars decides to go two-up from its *nearest container
+          ancestor*'s width, and outside a WorkerCard there is none — the bars would stay stacked
+          for ever (docs/design-system.md § "une brique réutilisée hors de sa carte"). */}
+      {stats && (
+        <div className="@container">
+          <ResourceBars stats={stats} />
+        </div>
+      )}
+
+      {parked && (
+        <p className="flex items-start gap-1.5 rounded-md border border-border/60 bg-muted/30 px-2.5 py-2 text-[11px] leading-relaxed text-muted-foreground">
+          <MoonIcon className="mt-0.5 h-3 w-3 shrink-0" />
+          <span>
+            Parked for review — stopped, disk kept as it was. Accepting or dropping the task
+            releases it to the pool.
+          </span>
+        </p>
+      )}
+
+      {released && (
+        <p className="text-[11px] leading-relaxed text-muted-foreground">
+          This task is over, so the machine is back in the pool — what it runs now may belong to
+          another task.
+        </p>
+      )}
+
+      <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px]">
+        {editorHref && running && (
+          <a
+            href={editorHref}
+            target="_blank"
+            rel="noreferrer"
+            className="flex items-center gap-1 text-primary hover:underline"
+          >
+            <Code2Icon className="h-3 w-3 shrink-0" />
+            Open the editor
+            <ExternalLinkIcon className="h-3 w-3 shrink-0" />
+          </a>
+        )}
+        {workerHref && (
+          <Link href={workerHref} className="flex items-center gap-1 text-muted-foreground transition-colors hover:text-foreground">
+            Logs, terminal, files →
+          </Link>
+        )}
+      </div>
+
+      {running && portHref && detectedPorts.length > 0 && (
+        <div className="flex flex-wrap items-center gap-1.5">
+          {detectedPorts.map((p) => (
+            <a
+              key={p.port}
+              href={portHref(p.port)}
+              target="_blank"
+              rel="noreferrer"
+              title={p.process ? `${p.process} · :${p.port}` : `Port ${p.port}`}
+              className="inline-flex items-center gap-1 rounded-md bg-muted px-2 py-1 font-mono text-[11px] text-muted-foreground transition-colors hover:bg-primary/10 hover:text-primary"
+            >
+              <NetworkIcon className="h-3 w-3 shrink-0" />:{p.port}
+            </a>
+          ))}
+        </div>
+      )}
+
+      {startup !== null && (
+        <div>
+          <button
+            type="button"
+            onClick={() => setShowBreakdown((v) => !v)}
+            className="text-[11px] text-muted-foreground transition-colors hover:text-foreground"
+          >
+            Booted in <span className="font-mono tabular-nums">{formatDuration(startup)}</span> ·{" "}
+            {showBreakdown ? "hide" : "breakdown"}
+          </button>
+          {showBreakdown && <SetupWaterfall timings={setup?.timings} className="mt-2" />}
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ── The boot panel, centre column ────────────────────────────────────────────────────────────
+
+export type TaskBootStep = { key: string; label: string; state: StepState; detail?: string }
+
+/**
+ * What the platform is doing before the first token — as steps, each one read from something it
+ * actually observed.
+ *
+ * Exported for the same reason it is a pure function: it is the part worth arguing with.
+ */
+export function bootSteps({
+  task,
+  worker,
+  setup,
+  commands,
+}: {
+  task: TaskMachineTask
+  worker: WorkerCardWorker | null | undefined
+  setup?: WorkerSetupStatus | null
+  commands: TaskCommand[]
+}): TaskBootStep[] {
+  const machine: TaskBootStep = worker
+    ? {
+        key: "machine",
+        label: "Machine",
+        state: "done",
+        detail: recycled(task, worker)
+          ? `recycled from the pool · ${workerLabel(worker)}`
+          : `spawned for this task · ${workerLabel(worker)}`,
+      }
+    : {
+        key: "machine",
+        label: "Machine",
+        // A queued task with no worker is being allocated one; a task that stopped here never got
+        // one at all, and pretending it is still looking would be a lie with a spinner on it.
+        state: task.state === "queued" ? "running" : "error",
+        detail: task.state === "queued" ? "looking for a free worker, or spawning one…" : "never allocated",
+      }
+
+  // `ready` and nothing else: it is the platform's own definition of a usable machine (what
+  // `waitForWorkerReady` blocks on). A restarting pool worker reports `dockerState: running`
+  // seconds before its setup has caught up, and calling that "up" ticks the step while the box
+  // right underneath is still cloning.
+  const containerState: StepState = !worker
+    ? "pending"
+    : worker.state === "error"
+      ? "error"
+      : worker.state === "ready"
+        ? "done"
+        : "running"
+  const container: TaskBootStep = {
+    key: "container",
+    label: "Container",
+    state: containerState,
+    detail: worker
+      ? containerState === "done"
+        ? "up"
+        : resolveWorkerStatus(worker).label.toLowerCase().replace(/…$/, "…")
+      : undefined,
+  }
+
+  // A `ready` worker counts as set up even with no status to show for it: old workers predate the
+  // container-side reporting, and a step spinning for ever on a machine that is demonstrably up
+  // would be the component contradicting the platform.
+  const setupState: StepState = !worker
+    ? "pending"
+    : setup?.phase === "error"
+      ? "error"
+      : worker.state === "ready" || setup?.phase === "ready"
+        ? "done"
+        : "running"
+  const setupStep: TaskBootStep = {
+    key: "setup",
+    label: "Setup",
+    state: setupState,
+    detail: setup ? phaseLabel(setup) : worker ? "waiting for the container's first report…" : undefined,
+  }
+
+  // The platform creates the task's branch in every repository of the project before the session
+  // starts — one recorded command per repo, which is where this reads from.
+  const branchCommands = commands.filter((c) => (c.label ?? "").startsWith("Branch setup"))
+  const branchState: StepState =
+    branchCommands.length === 0
+      ? "pending"
+      : branchCommands.some((c) => c.status === "running")
+        ? "running"
+        : branchCommands.some((c) => c.status !== "succeeded")
+          ? "error"
+          : "done"
+  const branch: TaskBootStep = {
+    key: "branch",
+    label: "Branch",
+    state: branchState,
+    detail: `${task.branch} from ${task.baseBranch ?? "the project's default"}`,
+  }
+
+  // Only a recycled machine runs the project's reset command, so the step exists if and only if
+  // that command has a row — the same rule as everything else here: nothing ran, nothing to show.
+  const resetCommand = commands.find((c) => (c.label ?? "") === "Reset")
+  const reset: TaskBootStep | null = resetCommand
+    ? {
+        key: "reset",
+        label: "Reset",
+        state:
+          resetCommand.status === "running" ? "running" : resetCommand.status === "succeeded" ? "done" : "error",
+        detail: "putting the reused machine back in shape",
+      }
+    : null
+
+  const queued = task.state === "queued"
+  const ready = branchState === "done" && (!reset || reset.state === "done")
+  const session: TaskBootStep = {
+    key: "session",
+    label: "Agent session",
+    state: task.startedAt ? "done" : queued && ready ? "running" : "pending",
+    detail: task.startedAt
+      ? "started"
+      : queued
+        ? reset && reset.state !== "done"
+          ? "starts once the machine is back in shape"
+          : "starts as soon as the branch is ready"
+        : "never started",
+  }
+
+  // A post-mortem drops the container and setup rows on purpose. Their only source is the
+  // machine's state *now* — and a task that is over no longer owns its machine, so those two rows
+  // would describe someone else's boot. What is left is recorded: which worker it got, whether
+  // its branch commands ran, whether a session ever started.
+  const rest = reset ? [branch, reset, session] : [branch, session]
+  return queued ? [machine, container, setupStep, ...rest] : [machine, ...rest]
+}
+
+/**
+ * The centre column of a task that has no session yet — which is every `queued` task, and any
+ * task that died before one started.
+ *
+ * The steps are the ones the platform actually goes through, so a failed boot shows *where* it
+ * stopped instead of an empty transcript — including the reset, on a machine that needed one.
+ */
+export function TaskBoot({
+  task,
+  worker,
+  commands,
+}: {
+  task: TaskMachineTask
+  worker: WorkerCardWorker | null | undefined
+  commands: TaskCommand[]
+}) {
+  const setup = worker?.setupStatus ?? null
+  const steps = bootSteps({ task, worker, setup, commands })
+  const elapsed = useElapsed(task.state === "queued" ? task.createdAt : null)
+  const queued = task.state === "queued"
+
+  return (
+    // `min-h-full` + `my-auto`, not `h-full items-center`: centred while it fits, and growing (so
+    // the parent's scroll takes over) once the setup timeline unfolds — a box that is centred
+    // *and* capped overflows at both ends, cutting off the title and the footnote.
+    <div className="flex min-h-full flex-col p-4">
+      <div className="mx-auto my-auto w-full max-w-md">
+        <div className="mb-3 flex items-center gap-2">
+          <span className="relative flex h-2 w-2 shrink-0">
+            <span className={cn("h-2 w-2 rounded-full", queued ? "bg-yellow-400" : "bg-destructive")} />
+            {queued && (
+              <span className="absolute inset-0 h-2 w-2 animate-ping rounded-full bg-yellow-400 opacity-60 motion-reduce:animate-none" />
+            )}
+          </span>
+          <h3 className="text-sm font-medium">{queued ? "Preparing the machine" : "The session never started"}</h3>
+          {elapsed && <span className="ml-auto font-mono text-[11px] tabular-nums text-muted-foreground">{elapsed}</span>}
+        </div>
+
+        <div className="overflow-hidden rounded-lg border bg-card/60">
+          {steps.map((step) => (
+            <div key={step.key} className="flex items-start gap-2.5 border-b border-border/50 px-3 py-2.5 last:border-b-0">
+              <span className="mt-0.5">
+                <StepIndicator state={step.state} />
+              </span>
+              <div className="min-w-0 flex-1">
+                <p
+                  className={cn(
+                    "text-xs",
+                    step.state === "pending" ? "text-muted-foreground/50" : "font-medium",
+                    step.state === "error" && "text-destructive",
+                  )}
+                >
+                  {step.label}
+                </p>
+                {step.detail && (
+                  <p className="mt-0.5 break-words font-mono text-[11px] leading-relaxed text-muted-foreground">
+                    {step.detail}
+                  </p>
+                )}
+                {/* The setup is the long one, and the only step with sub-steps worth watching:
+                    which repository is cloning, which lifecycle command is running. Tied to the
+                    step's own state rather than the worker's: a recycled machine carries the
+                    setup status of its previous boot — which is the whole point of recycling —
+                    and unfolding a finished timeline under a ticked step is just noise. */}
+                {step.key === "setup" && step.state === "running" && (
+                  <WorkerSetupTimeline status={setup} settingUp className="mt-2" />
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* The reason, where the eye already is. It is in the sidebar too, but a post-mortem whose
+            centre column says only "never started" makes you hunt for the one line that matters. */}
+        {!queued && task.error && (
+          <p className="mt-3 whitespace-pre-wrap break-words rounded-md border border-destructive/25 bg-destructive/5 px-2.5 py-2 text-[11px] leading-relaxed text-destructive">
+            {task.error}
+          </p>
+        )}
+
+        <p className="mt-3 flex items-start gap-1.5 text-[11px] leading-relaxed text-muted-foreground">
+          <GitBranchIcon className="mt-0.5 h-3 w-3 shrink-0" />
+          <span>
+            {queued
+              ? "The session appears here on its own as soon as the agent starts. Tasks of the same project share this pool of machines — the first one pays for the image build, the next ones reuse it."
+              : "Nothing was streamed for this task. The sidebar has every command the platform ran."}
+          </span>
+        </p>
+      </div>
+    </div>
+  )
+}