@spunto/design-system 0.27.0 → 0.30.0

package/src/components/tasks/command-log.tsx

@@ -0,0 +1,102 @@
+"use client"
+
+import { useState } from "react"
+import { ChevronRightIcon, TerminalIcon } from "lucide-react"
+
+import { cn, formatRelativeTime } from "../../utils"
+import { taskSpan } from "./task-state"
+import type { TaskCommand } from "./types"
+
+
+const STATUS_STYLES: Record<string, string> = {
+  running: "bg-amber-500/15 text-amber-700 dark:text-amber-400 border-amber-500/30",
+  succeeded: "bg-green-500/15 text-green-700 dark:text-green-400 border-green-500/30",
+  failed: "bg-red-500/15 text-red-700 dark:text-red-400 border-red-500/30",
+  timeout: "bg-red-500/15 text-red-700 dark:text-red-400 border-red-500/30",
+  canceled: "bg-muted text-muted-foreground border-border",
+  lost: "bg-muted text-muted-foreground border-border",
+}
+
+function Stream({ name, text }: { name: string; text: string }) {
+  if (!text.trim()) return null
+  return (
+    <div>
+      <p className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground mb-1">{name}</p>
+      {/* Left as one scrollable block rather than a terminal emulator: this is a finished
+          command's captured tail, not a live TTY — there is nothing to interact with. */}
+      <pre className="max-h-96 overflow-auto rounded-md bg-muted/50 border px-3 py-2 text-[11px] leading-relaxed font-mono whitespace-pre-wrap break-words">
+        {text}
+      </pre>
+    </div>
+  )
+}
+
+/**
+ * One command Spunto ran for a task, with its output.
+ *
+ * Open by default when it failed, is still running, or is the **latest** one — that last case
+ * matters more than it looks: the newest command is almost always the agent session, which is
+ * the thing the page exists to show. A green branch setup above it is context, not news, so it
+ * stays folded.
+ */
+export function TaskCommandLog({ command, defaultOpen = false }: { command: TaskCommand; defaultOpen?: boolean }) {
+  const interesting = command.status !== "succeeded"
+  const [open, setOpen] = useState(interesting || defaultOpen)
+  const took = taskSpan(command.createdAt, command.finishedAt)
+  const stdout = command.stdout ?? ""
+  const stderr = command.stderr ?? ""
+  const hasOutput = Boolean(stdout.trim() || stderr.trim())
+
+  return (
+    <div className="border-b border-border/60 last:border-b-0">
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className="w-full flex items-center gap-2 px-4 py-2.5 text-left hover:bg-muted/30 transition-colors"
+      >
+        <ChevronRightIcon className={cn("h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform", open && "rotate-90")} />
+        <TerminalIcon className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+        <span className="text-xs font-medium truncate">{command.label ?? "Command"}</span>
+        <span className={cn("rounded-full border px-1.5 py-px text-[10px] shrink-0", STATUS_STYLES[command.status] ?? STATUS_STYLES.lost)}>
+          {command.status}
+          {command.exitCode !== null && command.exitCode !== 0 ? ` · ${command.exitCode}` : ""}
+        </span>
+        {command.mode === "background" && (
+          <span className="text-[10px] text-muted-foreground shrink-0">background</span>
+        )}
+        <span className="ml-auto flex items-center gap-2 text-[10px] text-muted-foreground shrink-0">
+          {took && <span>{took}</span>}
+          <span>{formatRelativeTime(command.createdAt)}</span>
+        </span>
+      </button>
+
+      {open && (
+        <div className="px-4 pb-4 space-y-3">
+          <div>
+            <p className="text-[10px] font-medium uppercase tracking-wide text-muted-foreground mb-1">
+              Command{command.cwd && <> · <span className="font-mono normal-case tracking-normal">{command.cwd}</span></>}
+            </p>
+            <pre className="max-h-64 overflow-auto rounded-md bg-muted/50 border px-3 py-2 text-[11px] leading-relaxed font-mono whitespace-pre-wrap break-words">
+              {command.command}
+            </pre>
+          </div>
+
+          <Stream name="stdout" text={stdout} />
+          <Stream name="stderr" text={stderr} />
+
+          {!hasOutput && (
+            <p className="text-[11px] text-muted-foreground">
+              {command.status === "running" ? "Still running — no output captured yet." : "No output."}
+            </p>
+          )}
+
+          {command.truncated && (
+            <p className="text-[10px] text-muted-foreground">
+              Output was longer than the 64 KiB kept per stream — this is the tail.
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/tasks/composer.tsx

@@ -0,0 +1,252 @@
+"use client"
+
+import { useState } from "react"
+import { ArrowUpIcon, CornerDownLeftIcon, Loader2Icon, SquareIcon } from "lucide-react"
+
+import { cn } from "../../utils"
+import { Button } from "../button"
+import { AttachFileButton, AttachmentDraftStrip, FileDropOverlay, useAttachmentDraft } from "./task-attachments"
+import type { DraftFile, TaskPendingAction } from "./types"
+
+/**
+ * Answering a task — the bottom of the cockpit's centre column.
+ *
+ * What it does is a **new turn, not an interruption**: the harness is resumed with what you wrote,
+ * on the same branch, in the same worker, and its events continue the timeline above. Which is
+ * why it only appears while the task is in review — a session that is still talking has no open
+ * stdin to interrupt, and a box that pretended otherwise would be the worst kind of lie: one that
+ * looks like it worked.
+ *
+ * So the disabled states are not decoration, they are the honest half of the feature. Each says
+ * which of the three reasons applies, because "the box is greyed out" is not an answer.
+ *
+ * It also takes **files** — any file (RFC 0022) — and all three ways in are meant to be findable:
+ *
+ *  - **paste** is the one that carries the feature — a screenshot of the thing that is wrong lives
+ *    on the clipboard, and any path that asks someone to save it to a file first is a path they
+ *    will not take;
+ *  - **drop** anywhere on the box, which lights up to say so;
+ *  - **the paperclip**, at the left edge of the writing area, where a messaging app puts it.
+ *
+ * That last one is placed rather than merely present: it started life as a small icon in the hint
+ * bar under the textarea and the first person who looked for it did not find it. A control for one
+ * of the two things you do with a message does not belong in the footnotes.
+ *
+ * What is picked rides along as tiles above the box, the way an attachment does in a mail client,
+ * so the words keep the room. Images show a thumbnail; everything else shows what it is called and
+ * how big it is, which is all there is to say about a tarball.
+ */
+
+export interface TaskComposerProps {
+  state: string
+  /** Did the stream give us a session id to resume? Without one there is nothing to continue. */
+  canResume?: boolean
+  /** The project's `taskAgentProtocol`. `claude-stream` is interactive: answer while it works, and Stop. */
+  protocol: string
+  /**
+   * The turn: the words, and the files prepared in the browser (`DraftFile.data` is base64). The
+   * composer hands the thumbnails' object URLs over with them — the app draws the pending bubble
+   * from them and revokes them once it is done with them.
+   */
+  onSubmit: (prompt: string, files: DraftFile[]) => void
+  onInterrupt?: () => void
+  /** A turn of yours is on its way — the send button spins and the box holds. */
+  pending?: boolean
+  /**
+   * Whatever else the platform is doing to this task. Accepting and dropping both borrow the
+   * machine the session lives in, so the box closes for their duration and says which one — a
+   * fourth reason, in a component whose whole argument is that a greyed-out box owes an answer.
+   */
+  pendingAction?: TaskPendingAction | null
+  error?: string | null
+  /**
+   * `compact` is the phone layout: one line, a round send button on the right, the paperclip on
+   * the left. Chosen by the caller rather than by a media query — it is the cockpit's layout that
+   * decides, and `TaskCockpitMobile` passes it.
+   */
+  layout?: "default" | "compact"
+  className?: string
+}
+
+export function TaskComposer({
+  state,
+  canResume = false,
+  protocol,
+  onSubmit,
+  onInterrupt,
+  pending = false,
+  pendingAction = null,
+  error = null,
+  layout = "default",
+  className,
+}: TaskComposerProps) {
+  const [prompt, setPrompt] = useState("")
+  const draft = useAttachmentDraft()
+  const isMobile = layout === "compact"
+
+  if (state === "done" || state === "failed") return null
+
+  // Interactive: the harness is alive with an open stdin, so it can be talked to *while it
+  // works*, and asked to stop. One-shot: its stdin closed with the prompt, so the only moment
+  // there is anywhere to put words is once it has handed back.
+  const interactive = protocol === "claude-stream"
+
+  const reason =
+    pendingAction === "accepting"
+      ? "Accepting this task — the project's accept command is running in its machine."
+      : pendingAction === "dropping"
+      ? "Dropping this task."
+      : state === "queued"
+      ? "The task is still waiting for a worker."
+      : state === "running" && !interactive
+        ? "The session is working, and this harness reads its prompt once. You can answer as soon as it hands back."
+        : protocol === "none"
+          ? "This project doesn't capture its agent session, so there is no session to resume. Set Session stream in its delegated-work settings."
+          : !canResume && state !== "running"
+            ? "No session id was captured for this task, so there is nothing to resume."
+            : null
+
+  const disabled = reason !== null || pending
+
+  function submit() {
+    const text = prompt.trim()
+    // Words are still required with an attachment: "look at this" is a turn, a bare file is a
+    // riddle — and the harness is handed a path, so something has to say what to do with it.
+    if (!text || disabled) return
+    onSubmit(text, draft.files)
+    setPrompt("")
+    // `release`, not `clear`: the cockpit is now drawing these very thumbnails under the pending
+    // message, and revoking them here would blank it the instant it appeared. It owns them now.
+    draft.release()
+  }
+
+  const textarea = (
+    <textarea
+      value={prompt}
+      onChange={(e) => setPrompt(e.target.value)}
+      // Enter sends, Shift+Enter breaks the line: this is a reply box, and the common case
+      // by far is one or two sentences.
+      onKeyDown={(e) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+          e.preventDefault()
+          submit()
+        }
+      }}
+      disabled={disabled}
+      // Paste stays on the textarea (it is a keyboard event, it needs the focused element);
+      // dropping is handled by the whole composer below.
+      onPaste={draft.onPaste}
+      rows={isMobile ? 1 : 2}
+      // Two lines of placeholder cost a third of a phone screen before a word is typed.
+      placeholder={reason ?? (isMobile ? "Answer the agent…" : "Answer the agent — “in fact, do X instead”. Enter to send.")}
+      // 16px in the compact layout: below that, iOS zooms the whole page in the moment the field
+      // takes focus — and a reply box that rearranges the screen around it is not a reply box.
+      className={cn(
+        "w-full resize-none bg-transparent px-3 py-2 outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed",
+        isMobile ? "text-base" : "text-sm",
+      )}
+    />
+  )
+
+  const errorLine = error && (
+    <p className="mb-2 rounded-md border border-destructive/25 bg-destructive/5 px-2.5 py-1.5 text-[11px] text-destructive">
+      {error}
+    </p>
+  )
+
+  // ── Phone: the field and its send button on one line ──────────────────────────────────
+  //
+  // The desktop layout stacks a footer under the textarea — the hint, Stop, Send. On a phone
+  // that is a second row of chrome above the keyboard for one button, so the button moves into
+  // the line, round, on the right, where every messaging app has trained a thumb to find it.
+  if (isMobile) {
+    return (
+      <div className={cn("shrink-0 border-t border-border bg-card/40 px-2.5 py-2", className)}>
+        {errorLine}
+        {reason && <p className="mb-1.5 px-1 text-[11px] leading-snug text-muted-foreground">{reason}</p>}
+        <div className="flex items-end gap-2">
+          {/* Left of the field, like every phone messaging app — a thumb reaches for it there. */}
+          <AttachFileButton size="lg" disabled={disabled} onFiles={(files: File[]) => void draft.add(files)} />
+          <div
+            className={cn(
+              "min-w-0 flex-1 rounded-2xl border bg-background transition-colors focus-within:border-primary/40",
+              disabled && "opacity-60",
+            )}
+          >
+            <AttachmentDraftStrip draft={draft} />
+            {textarea}
+          </div>
+          {interactive && state === "running" && onInterrupt && (
+            <button
+              type="button"
+              onClick={() => onInterrupt?.()}
+              aria-label="Stop the current turn"
+              className="flex h-10 w-10 shrink-0 touch-manipulation items-center justify-center rounded-full border border-border text-muted-foreground transition-transform active:scale-95"
+            >
+              <SquareIcon className="h-4 w-4" />
+            </button>
+          )}
+          <button
+            type="button"
+            onClick={submit}
+            disabled={disabled || !prompt.trim()}
+            aria-label="Send"
+            className="flex h-10 w-10 shrink-0 touch-manipulation items-center justify-center rounded-full bg-primary text-primary-foreground transition-transform active:scale-95 disabled:opacity-40"
+          >
+            {pending ? <Loader2Icon className="h-4 w-4 animate-spin" /> : <ArrowUpIcon className="h-5 w-5" />}
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn("shrink-0 border-t border-border bg-card/40 px-8 py-3", className)}>
+      <div className="mx-auto max-w-3xl">
+        {errorLine}
+
+        <div
+          {...draft.dropZone}
+          className={cn(
+            "relative rounded-lg border bg-background transition-colors focus-within:border-primary/40",
+            disabled && "opacity-60",
+          )}
+        >
+          {draft.draggingOver && <FileDropOverlay />}
+          <AttachmentDraftStrip draft={draft} />
+          {/* The paperclip sits in the writing row, at its left edge, not in the hint bar below:
+              it is a control of the message, not a note about it. */}
+          <div className="flex items-start gap-1.5 pl-2 pt-2">
+            <AttachFileButton disabled={disabled} onFiles={(files: File[]) => void draft.add(files)} />
+            <div className="-ml-1 min-w-0 flex-1">{textarea}</div>
+          </div>
+          <div className="flex items-center gap-2 border-t border-border/60 px-2 py-1.5">
+            <span className="mr-auto truncate text-[10px] text-muted-foreground">
+              {reason ??
+                (interactive
+                  ? // Both paths are real and the composer cannot know which one it will take:
+                    // the session is usually still listening, and is resumed if it has exited.
+                    "Goes to the live session — or resumes it if it has exited."
+                  : "Resumes the session with your message — same branch, same worker.")}
+            </span>
+            {interactive && state === "running" && onInterrupt && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => onInterrupt?.()}
+                className="h-7 shrink-0 gap-1.5 px-2.5 text-xs text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
+              >
+                <SquareIcon className="h-3 w-3" />
+                Stop
+              </Button>
+            )}
+            <Button size="sm" className="h-7 gap-1.5 px-2.5 text-xs" disabled={disabled || !prompt.trim()} onClick={submit}>
+              {pending ? <Loader2Icon className="h-3 w-3 animate-spin" /> : <CornerDownLeftIcon className="h-3 w-3" />}
+              Send
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/tasks/conversation-list.tsx

@@ -0,0 +1,238 @@
+"use client"
+
+// Every conversation of an organization, as a messaging app's list — the left column of the agent
+// cockpit (`/agents`), answering "what are my agents doing, and which one needs me?".
+//
+// Grouped by state in lifecycle order (queued → running → in review, then failed and done), and
+// inside a group most recently active first — the order the API already returns — so the task
+// that just handed back is the top row of the review group, however long ago it was delegated.
+//
+// Controlled: search, state filter, selection and paging are the app's (the selection belongs in
+// the URL so a conversation stays linkable). The component owns only what is drawn.
+//
+// Sized by input, not by width: a phone's full-width list and a desktop's 320 px sidebar are the
+// same width, so what changes is `pointer-coarse` — bigger rows and a drawn chevron for a thumb.
+
+import type { ReactNode } from "react"
+import { ChevronRightIcon, Loader2Icon, MessagesSquareIcon, SearchIcon } from "lucide-react"
+
+import { cn, formatRelativeTime } from "../../utils"
+import { Button } from "../button"
+import { TASK_STATE_ORDER, TaskStateIcon, taskPendingActionConfig, taskStateStyle, useElapsed } from "./task-state"
+import type { TaskConversation, TaskState } from "./types"
+
+export interface TaskConversationListProps<T extends TaskConversation = TaskConversation> {
+  /** The loaded page, most recently active first. */
+  tasks: T[]
+  /** How many match the current filter in total — drives "N of M" and "Load more". */
+  total?: number
+  /**
+   * Per-state counts, **ignoring** the state filter: a filter you cannot see out of is a trap,
+   * and "3 failed" is how you find your way back.
+   */
+  counts?: Partial<Record<TaskState, number>>
+  loading?: boolean
+  selectedId?: string | null
+  onSelect: (task: T) => void
+
+  query: string
+  onQueryChange: (query: string) => void
+  /** Active state chips. Empty → every state. */
+  states: TaskState[]
+  onStatesChange: (states: TaskState[]) => void
+
+  /** "Load N more" under the list, while `tasks.length < total`. */
+  onLoadMore?: () => void
+  /** How many the next page brings, for the button's label. @default 40 */
+  pageSize?: number
+
+  /** @default "Agents" */
+  title?: string
+  /** Next to the title — typically the "New" task button. */
+  action?: ReactNode
+  className?: string
+}
+
+function Chip({
+  label,
+  count,
+  active,
+  onClick,
+  tint,
+}: {
+  label: string
+  count: number
+  active: boolean
+  onClick: () => void
+  tint: string
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-pressed={active}
+      className={cn(
+        "flex shrink-0 touch-manipulation items-center gap-1.5 rounded-full border px-2.5 py-1 text-[11px] font-medium transition-colors active:bg-muted pointer-coarse:px-3 pointer-coarse:py-1.5 pointer-coarse:text-[12px]",
+        active ? tint : "text-muted-foreground hover:bg-muted/60",
+      )}
+    >
+      {label}
+      <span className={cn("tabular-nums", !active && "text-muted-foreground/70")}>{count}</span>
+    </button>
+  )
+}
+
+function RowTime({ task }: { task: TaskConversation }) {
+  const elapsed = useElapsed(task.pendingAction ? task.pendingSince : null)
+  const pending = task.pendingAction ? taskPendingActionConfig[task.pendingAction] : null
+  return (
+    <span className={cn("shrink-0 text-[10px] tabular-nums pointer-coarse:text-[11px]", pending ? pending.textClass : "text-muted-foreground")}>
+      {pending ? `${pending.label}${elapsed ? ` ${elapsed}` : "…"}` : formatRelativeTime(task.lastActivityAt ?? task.createdAt)}
+    </span>
+  )
+}
+
+function ConversationRow({ task, selected, onSelect }: { task: TaskConversation; selected: boolean; onSelect: () => void }) {
+  const tone = task.pendingAction ? taskPendingActionConfig[task.pendingAction].textClass : taskStateStyle(task.state).textClass
+  return (
+    <button
+      type="button"
+      onClick={onSelect}
+      aria-current={selected || undefined}
+      className={cn(
+        "w-full touch-manipulation border-b border-border/50 px-3 py-2.5 text-left transition-colors active:bg-muted pointer-coarse:px-4 pointer-coarse:py-3",
+        selected ? "bg-primary/[0.07]" : "hover:bg-muted/50",
+      )}
+    >
+      <div className="flex items-center gap-2">
+        <span className={cn("shrink-0", tone)}>
+          {task.pendingAction ? <Loader2Icon className="h-3 w-3 animate-spin" /> : <TaskStateIcon state={task.state} />}
+        </span>
+        <span className={cn("min-w-0 flex-1 truncate text-xs pointer-coarse:text-sm", selected ? "font-semibold" : "font-medium")}>
+          {task.title}
+        </span>
+        {/* When it last moved — replaced, while something is in flight, by how long it has been. */}
+        <RowTime task={task} />
+        {/* Touch has no hover to say "this leads somewhere", so the affordance is drawn. */}
+        <ChevronRightIcon className="hidden h-4 w-4 shrink-0 text-muted-foreground/40 pointer-coarse:block" />
+      </div>
+      {/* The project is a coordinate, so it is subordinate — but it has to be there: two
+          conversations called "fix the login" in two projects are otherwise the same row. */}
+      {task.projectName && (
+        <p className="mt-0.5 truncate pl-5 text-[10px] text-muted-foreground pointer-coarse:pl-6 pointer-coarse:text-[11px]">
+          {task.projectName}
+        </p>
+      )}
+    </button>
+  )
+}
+
+export function TaskConversationList<T extends TaskConversation>({
+  tasks,
+  total,
+  counts = {},
+  loading = false,
+  selectedId = null,
+  onSelect,
+  query,
+  onQueryChange,
+  states,
+  onStatesChange,
+  onLoadMore,
+  pageSize = 40,
+  title = "Agents",
+  action,
+  className,
+}: TaskConversationListProps<T>) {
+  const groups = TASK_STATE_ORDER.map((state) => ({ state, rows: tasks.filter((t) => t.state === state) })).filter(
+    (g) => g.rows.length > 0,
+  )
+  const toggle = (state: TaskState) =>
+    onStatesChange(states.includes(state) ? states.filter((s) => s !== state) : [...states, state])
+
+  return (
+    <div className={cn("flex min-h-0 flex-col bg-card/40", className)}>
+      <div className="shrink-0 space-y-2 border-b border-border px-3 py-2.5 pointer-coarse:space-y-2.5 pointer-coarse:px-4 pointer-coarse:py-3">
+        <div className="flex items-center gap-2">
+          <MessagesSquareIcon className="h-4 w-4 shrink-0 text-primary" />
+          <h1 className="text-sm font-semibold pointer-coarse:text-base">{title}</h1>
+          <span className="text-[10px] text-muted-foreground">
+            {total !== undefined ? `${tasks.length} of ${total}` : loading ? "…" : null}
+          </span>
+          {action && <div className="ml-auto">{action}</div>}
+        </div>
+
+        <div className="relative">
+          <SearchIcon className="pointer-events-none absolute top-1/2 left-2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground pointer-coarse:left-2.5 pointer-coarse:h-4 pointer-coarse:w-4" />
+          <input
+            value={query}
+            onChange={(e) => onQueryChange(e.target.value)}
+            placeholder="Search conversations…"
+            aria-label="Search conversations"
+            // 16px on touch, deliberately: anything smaller and iOS zooms the page in on focus.
+            className="w-full rounded-md border bg-background py-1.5 pr-2 pl-7 text-xs outline-none focus-visible:border-primary/40 pointer-coarse:rounded-lg pointer-coarse:py-2 pointer-coarse:pl-8 pointer-coarse:text-base"
+          />
+        </div>
+
+        {/* One scrolling line on touch rather than wrapped rows: five chips would otherwise eat a
+            third of a phone screen before a single conversation shows up. */}
+        <div className="flex flex-wrap gap-1 pointer-coarse:-mx-4 pointer-coarse:flex-nowrap pointer-coarse:gap-1.5 pointer-coarse:overflow-x-auto pointer-coarse:px-4 pointer-coarse:pb-0.5 pointer-coarse:[scrollbar-width:none]">
+          {TASK_STATE_ORDER.map((state) => (
+            <Chip
+              key={state}
+              label={taskStateStyle(state).label}
+              count={counts[state] ?? 0}
+              active={states.includes(state)}
+              tint={taskStateStyle(state).className}
+              onClick={() => toggle(state)}
+            />
+          ))}
+        </div>
+      </div>
+
+      <div className="min-h-0 flex-1 overflow-y-auto">
+        {loading && tasks.length === 0 && <p className="px-3 py-4 text-xs text-muted-foreground">Loading…</p>}
+        {!loading && tasks.length === 0 && (
+          <p className="px-3 py-4 text-xs leading-relaxed text-muted-foreground">
+            {query || states.length > 0 ? "No conversation matches that filter." : "No delegated work yet. Open a project and start a task."}
+          </p>
+        )}
+
+        {groups.map((group) => (
+          <div key={group.state}>
+            <p className="sticky top-0 z-10 border-b border-border/60 bg-card/95 px-3 py-1 text-[10px] font-medium tracking-wide text-muted-foreground uppercase backdrop-blur pointer-coarse:px-4 pointer-coarse:py-1.5">
+              {taskStateStyle(group.state).label}
+              <span className="ml-1.5 tabular-nums opacity-60">{group.rows.length}</span>
+            </p>
+            {group.rows.map((task) => (
+              <ConversationRow key={task.id} task={task} selected={task.id === selectedId} onSelect={() => onSelect(task)} />
+            ))}
+          </div>
+        ))}
+
+        {onLoadMore && total !== undefined && tasks.length < total && (
+          <div className="p-2">
+            <Button variant="outline" size="sm" className="h-7 w-full text-xs" onClick={onLoadMore}>
+              Load {Math.min(pageSize, total - tasks.length)} more
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+/** The right-hand side of the agent cockpit before a conversation is picked. */
+export function TaskConversationPlaceholder({ children, className }: { children?: ReactNode; className?: string }) {
+  return (
+    <div className={cn("flex min-h-0 flex-1 items-center justify-center p-6", className)}>
+      <div className="max-w-sm text-center">
+        <MessagesSquareIcon className="mx-auto h-8 w-8 text-muted-foreground/40" />
+        <p className="mt-3 text-sm font-medium">Pick a conversation</p>
+        <p className="mt-1 text-xs leading-relaxed text-muted-foreground">
+          {children ?? "Every task of this organization is on the left, whichever project it belongs to — the ones waiting on you first."}
+        </p>
+      </div>
+    </div>
+  )
+}