@spunto/design-system 0.28.0 → 0.30.1

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

@@ -0,0 +1,239 @@
+"use client"
+
+// Everything that is a *fact about* a task rather than a moment in it — branch, cost, the pull
+// request, the machine, the prompt, what ran — in one component with two shapes:
+//
+//  - `sidebar`: the cockpit's right column, each block a fold, glanced at without pushing the
+//    work off screen;
+//  - `sheet`: the phone's details sheet, flat blocks, and Drop at the bottom — a destructive
+//    action a thumb can reach by accident one pixel from Accept is a bug waiting for a bad week.
+//
+// Before, those were two hand-kept copies of the same list (a sidebar and a mobile sheet) that
+// had to agree on order and wording. The order is an argument, so it lives once: what the session
+// is spending (asked *while* it runs), then did it land (the PR), then can I still poke at it (the
+// machine), then how it was set up.
+
+import { createContext, useContext, useState, type ReactNode } from "react"
+import { ChevronRightIcon, ExternalLinkIcon, GitBranchIcon, Loader2Icon, XCircleIcon } from "lucide-react"
+
+import { cn, formatRelativeTime } from "../../utils"
+import { TaskCommandLog } from "./command-log"
+import { TaskPullRequest } from "./pull-request"
+import { TaskSessionUsage } from "./session-usage"
+import { isLiveTaskState, taskSpan } from "./task-state"
+import type { TaskCommand, TaskItem, TaskPendingAction, TaskPullRequests, TaskSessionUsageData } from "./types"
+
+/** Set by `TaskCockpitMobile` around its sheet, so Drop can close it. @internal */
+export const TaskDetailsSheetContext = createContext<{ close: () => void } | null>(null)
+
+export interface TaskDetailsProps {
+  task: TaskItem
+  /** @default "sidebar" */
+  variant?: "sidebar" | "sheet"
+  /** What the session consumed. Absent → no Session block (nothing measured is not "free"). */
+  usage?: TaskSessionUsageData | null
+  /** What the forge says about the branch. Absent or `supported: false` → no block at all. */
+  pullRequests?: TaskPullRequests | null
+  /** The Machine block's content — typically a `TaskMachine`. */
+  machine?: ReactNode
+  /** Every command the platform ran for the task, oldest first. */
+  commands?: TaskCommand[]
+  /** The project's `taskAgentProtocol` — only for a footnote. */
+  protocol?: string
+  /** `sheet` only: the Drop button at the bottom, on a live task. */
+  onDrop?: () => void
+  pendingAction?: TaskPendingAction | null
+  className?: string
+}
+
+function Fact({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div className="min-w-0">
+      <p className="text-[10px] font-medium tracking-wide text-muted-foreground uppercase">{label}</p>
+      <div className="mt-0.5 text-xs">{children}</div>
+    </div>
+  )
+}
+
+function Block({
+  variant,
+  title,
+  hint,
+  defaultOpen = true,
+  children,
+}: {
+  variant: "sidebar" | "sheet"
+  title: string
+  hint?: string
+  defaultOpen?: boolean
+  children: ReactNode
+}) {
+  const [open, setOpen] = useState(defaultOpen)
+  if (variant === "sheet") {
+    return (
+      <div className="border-b px-4 py-3">
+        <p className="mb-2 text-[10px] font-medium tracking-wide text-muted-foreground uppercase">
+          {title}
+          {hint && ` · ${hint}`}
+        </p>
+        {children}
+      </div>
+    )
+  }
+  return (
+    <div className="border-b border-border/60 last:border-b-0">
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        aria-expanded={open}
+        className="flex w-full items-center gap-1.5 px-4 py-2.5 text-left transition-colors hover:bg-muted/40"
+      >
+        <ChevronRightIcon className={cn("h-3 w-3 shrink-0 text-muted-foreground transition-transform", open && "rotate-90")} />
+        <span className="text-xs font-medium">{title}</span>
+        {hint && <span className="ml-auto shrink-0 text-[10px] text-muted-foreground">{hint}</span>}
+      </button>
+      {open && <div className="px-4 pb-4">{children}</div>}
+    </div>
+  )
+}
+
+export function TaskDetails({
+  task,
+  variant = "sidebar",
+  usage,
+  pullRequests,
+  machine,
+  commands = [],
+  protocol = "none",
+  onDrop,
+  pendingAction = task.pendingAction ?? null,
+  className,
+}: TaskDetailsProps) {
+  const sheet = useContext(TaskDetailsSheetContext)
+  const meta = task.meta && Object.keys(task.meta).length > 0 ? task.meta : null
+  const ran = task.completedAt ? taskSpan(task.startedAt ?? task.createdAt, task.completedAt) : null
+
+  return (
+    <div className={className}>
+      <div className={cn("border-b", variant === "sidebar" ? "border-border/60 px-4 py-3" : "space-y-3 px-4 py-3")}>
+        <p className="text-xs text-muted-foreground">
+          Delegated {formatRelativeTime(task.createdAt)}
+          {/* From `startedAt`, not `createdAt`: the wait for a worker is not run time. */}
+          {ran && ` · ran ${ran}`}
+        </p>
+
+        {task.error && (
+          <p
+            className={cn(
+              "rounded-md border border-destructive/25 bg-destructive/5 px-2.5 py-2 whitespace-pre-wrap break-words text-destructive",
+              variant === "sidebar" ? "mt-2.5 text-[11px]" : "text-xs",
+            )}
+          >
+            {task.error}
+          </p>
+        )}
+
+        <div className={cn("grid grid-cols-2 gap-3", variant === "sidebar" && "mt-3")}>
+          {/* Not truncated: a branch name ends in the part that identifies the task. */}
+          {task.branch && (
+            <div className="col-span-2">
+              <Fact label="Branch">
+                <span className="flex items-start gap-1 font-mono break-all">
+                  <GitBranchIcon className="mt-0.5 h-3 w-3 shrink-0 text-muted-foreground" />
+                  {task.branch}
+                </span>
+              </Fact>
+            </div>
+          )}
+          <Fact label="Base">
+            <span className="font-mono text-muted-foreground">{task.baseBranch ?? "project default"}</span>
+          </Fact>
+          {task.outcomeUrl && (
+            <Fact label="Result">
+              <a href={task.outcomeUrl} target="_blank" rel="noreferrer" className="flex items-center gap-1 text-primary hover:underline">
+                {task.outcomeLabel ?? "link"}
+                <ExternalLinkIcon className="h-3 w-3 shrink-0" />
+              </a>
+            </Fact>
+          )}
+        </div>
+      </div>
+
+      {usage && (
+        <Block variant={variant} title="Session">
+          <TaskSessionUsage usage={usage} />
+        </Block>
+      )}
+
+      {pullRequests?.supported && (
+        <Block variant={variant} title="Pull request">
+          <TaskPullRequest data={pullRequests} />
+        </Block>
+      )}
+
+      {machine && (
+        <Block variant={variant} title="Machine">
+          {machine}
+        </Block>
+      )}
+
+      {task.prompt && (
+        <Block variant={variant} title="Prompt">
+          <p className="text-xs leading-relaxed whitespace-pre-wrap break-words">{task.prompt}</p>
+        </Block>
+      )}
+
+      <Block
+        variant={variant}
+        title="What ran"
+        hint={`${commands.length} command${commands.length === 1 ? "" : "s"}`}
+        defaultOpen={false}
+      >
+        {commands.length > 0 ? (
+          <div className="-mx-4 overflow-hidden border-y border-border/60">
+            {commands.map((command) => (
+              <TaskCommandLog key={command.id} command={command} />
+            ))}
+          </div>
+        ) : (
+          <p className="text-[11px] text-muted-foreground">
+            {task.state === "queued" ? "Nothing yet — the task is still waiting for a worker." : "No command was recorded for this task."}
+          </p>
+        )}
+        {variant === "sidebar" && protocol !== "none" && (
+          <p className="mt-2.5 text-[10px] leading-relaxed text-muted-foreground">
+            The agent session&apos;s raw stdout is the stream on the left, one JSON event per line.
+          </p>
+        )}
+      </Block>
+
+      {/* Only ever filled by a status command that no longer exists — kept for the tasks that ran under it. */}
+      {meta && (
+        <Block variant={variant} title="Reported" hint="from a removed setting" defaultOpen={false}>
+          <pre className="overflow-x-auto font-mono text-[11px] whitespace-pre-wrap break-words">{JSON.stringify(meta, null, 2)}</pre>
+        </Block>
+      )}
+
+      {variant === "sheet" && onDrop && isLiveTaskState(task.state) && (
+        <div className="px-4 py-4">
+          <button
+            type="button"
+            disabled={pendingAction !== null}
+            onClick={() => {
+              onDrop()
+              sheet?.close()
+            }}
+            className="flex min-h-11 w-full touch-manipulation items-center justify-center gap-2 rounded-xl border border-destructive/30 bg-destructive/5 px-3 text-sm font-medium text-destructive transition-colors active:bg-destructive/15 disabled:opacity-50"
+          >
+            {pendingAction === "dropping" ? <Loader2Icon className="h-4 w-4 animate-spin" /> : <XCircleIcon className="h-4 w-4" />}
+            {pendingAction === "dropping" ? "Dropping this task…" : "Drop this task"}
+          </button>
+          <p className="mt-2 text-center text-[11px] leading-relaxed text-muted-foreground">
+            Kills the agent session{protocol !== "none" && " and stops the stream"}, then runs the project&apos;s cleanup command if it
+            has one.
+          </p>
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,272 @@
+"use client"
+
+// The delegated work of one project, grouped by state — the "Tasks" tab of a project page.
+//
+// Grouped, not merely sorted, and in the order a task travels — queued, running, in review — so
+// the panel reads as a pipeline; `done` and `failed` sink and start folded, because they are
+// history. Past a handful of rows per group the panel stops growing: that is what the org-wide
+// conversation list (`TaskConversationList`) is for, and `cockpitHref` points there.
+//
+// Presentational: the rows come in as `tasks`, and the two actions go out as callbacks. The wait
+// after a click is read off the task itself (`pendingAction`), which the app predicts into its
+// cache on click — so a row accepted from another screen shows it here too.
+
+import { useState, type ReactNode } from "react"
+import { CheckCircle2Icon, GitBranchIcon, GitPullRequestIcon, Loader2Icon, SparklesIcon, XCircleIcon } from "lucide-react"
+
+import { cn, formatRelativeTime } from "../../utils"
+import type { LinkRender } from "../workers/worker-card"
+import { TASK_STATE_ORDER, TaskStateBadge, isLiveTaskState, taskStateStyle } from "./task-state"
+import type { TaskItem } from "./types"
+
+const defaultLink: LinkRender = ({ href, className, children }) => (
+  <a href={href} className={className}>
+    {children}
+  </a>
+)
+
+export interface TaskListProps<T extends TaskItem = TaskItem> {
+  tasks: T[]
+  /** A task's own page — the title is the way in. */
+  taskHref: (task: T) => string
+  /** Accept, on a task in review. Omitted → no button. */
+  onAccept?: (task: T) => void
+  /** Drop, on any live task. Omitted → no button. */
+  onDrop?: (task: T) => void
+  /** The machine chip on the row's last line — typically a `TaskWorkerChip`. */
+  renderWorker?: (task: T) => ReactNode
+  /** "Open agent cockpit →", shown once the project has more work than a panel holds. */
+  cockpitHref?: string
+  /** Under the empty state's sentence — typically the "New task" button. */
+  emptyAction?: ReactNode
+  /** Rows per live group before "show N more". Done and failed always start folded. @default 5 */
+  visiblePerGroup?: number
+  render?: { link?: LinkRender }
+  className?: string
+}
+
+/**
+ * A task's failure, readable. Clamped to two lines so a long stack doesn't take over the list,
+ * expandable because the useful part of "could not create branch: …" is often at the end.
+ */
+function TaskError({ text }: { text: string }) {
+  const [open, setOpen] = useState(false)
+  const long = text.length > 140
+  return (
+    <div className="mt-1.5 rounded-md border border-destructive/25 bg-destructive/5 px-2.5 py-1.5">
+      <p className={cn("text-[11px] whitespace-pre-wrap break-words text-destructive", !open && "line-clamp-2")}>{text}</p>
+      {long && (
+        <button
+          type="button"
+          onClick={() => setOpen((v) => !v)}
+          className="mt-1 text-[10px] font-medium text-destructive/80 transition-colors hover:text-destructive"
+        >
+          {open ? "Show less" : "Show full error"}
+        </button>
+      )}
+    </div>
+  )
+}
+
+function TaskRow<T extends TaskItem>({
+  task,
+  href,
+  onAccept,
+  onDrop,
+  worker,
+  Link,
+}: {
+  task: T
+  href: string
+  onAccept?: (task: T) => void
+  onDrop?: (task: T) => void
+  worker?: ReactNode
+  Link: LinkRender
+}) {
+  const pendingAction = task.pendingAction ?? null
+  const busy = pendingAction !== null
+  const live = isLiveTaskState(task.state)
+  // Always offered on a task in review: Accept and Drop are the *only* way a task leaves review.
+  const showAccept = task.state === "in-review" && !!onAccept
+
+  return (
+    <div data-task-row className="group/task border-b border-border/40 px-4 py-2 transition-colors last:border-b-0 hover:bg-muted/30">
+      <div className="flex items-center gap-2">
+        <Link href={href} className="truncate text-sm font-medium underline-offset-2 hover:underline">
+          {task.title}
+        </Link>
+        <TaskStateBadge state={task.state} pendingAction={pendingAction} pendingSince={task.pendingSince} />
+
+        {/* Actions live on the row, not behind a menu: reviewing is the moment the panel exists
+            for. On a task in review they are always visible; a merely live task only offers Drop,
+            revealed on hover — except on touch, where there is no hover, and while something is in
+            flight, so the only sign the click did anything doesn't vanish with the cursor. */}
+        {live && (showAccept || onDrop) && (
+          <div
+            className={cn(
+              "ml-auto flex shrink-0 items-center gap-1 transition-opacity",
+              showAccept || busy
+                ? "opacity-100"
+                : "opacity-100 focus-within:opacity-100 [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-hover/task:opacity-100",
+            )}
+          >
+            {showAccept && (
+              <button
+                type="button"
+                disabled={busy}
+                onClick={() => onAccept?.(task)}
+                className="flex touch-manipulation items-center gap-1 rounded-md px-2.5 py-1 text-[11px] font-medium text-green-700 transition-colors hover:bg-green-500/10 active:bg-green-500/15 disabled:opacity-50 dark:text-green-400"
+                title="Mark this task done, running the project's accept command if it has one"
+              >
+                {pendingAction === "accepting" ? <Loader2Icon className="h-3 w-3 animate-spin" /> : <CheckCircle2Icon className="h-3 w-3" />}
+                {pendingAction === "accepting" ? "Accepting…" : "Accept"}
+              </button>
+            )}
+            {onDrop && (
+              <button
+                type="button"
+                disabled={busy}
+                onClick={() => onDrop(task)}
+                className="flex touch-manipulation items-center gap-1 rounded-md px-2.5 py-1 text-[11px] font-medium text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive active:bg-destructive/15 disabled:opacity-50"
+                title="Kill the agent session and drop this task"
+              >
+                {pendingAction === "dropping" ? <Loader2Icon className="h-3 w-3 animate-spin" /> : <XCircleIcon className="h-3 w-3" />}
+                {pendingAction === "dropping" ? "Dropping…" : "Drop"}
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+
+      {task.prompt && <p className="mt-0.5 line-clamp-1 text-xs text-muted-foreground/80">{task.prompt}</p>}
+
+      {task.error && <TaskError text={task.error} />}
+
+      {/* Branch, result, workspace — the task's coordinates. */}
+      <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] text-muted-foreground">
+        {task.branch && (
+          <span className="flex items-center gap-1 font-mono">
+            <GitBranchIcon className="h-3 w-3 shrink-0" />
+            {task.branch}
+          </span>
+        )}
+        {task.outcomeUrl && (
+          <a
+            href={task.outcomeUrl}
+            target="_blank"
+            rel="noreferrer"
+            className="flex items-center gap-1 text-primary hover:underline"
+            title={task.outcomeUrl}
+          >
+            <GitPullRequestIcon className="h-3 w-3 shrink-0" />
+            {task.outcomeLabel ?? "result"}
+          </a>
+        )}
+        {worker}
+        {/* When it last moved, which is also what the list is ordered by. */}
+        <span className="ml-auto whitespace-nowrap">{formatRelativeTime(task.lastActivityAt ?? task.createdAt)}</span>
+      </div>
+    </div>
+  )
+}
+
+function TaskGroup<T extends TaskItem>({
+  state,
+  rows,
+  visible,
+  children,
+}: {
+  state: string
+  rows: T[]
+  visible: number
+  children: (row: T) => ReactNode
+}) {
+  const [expanded, setExpanded] = useState(false)
+  // Live groups open, history folded: what is happening is what the panel is for.
+  const foldedByDefault = state === "done" || state === "failed"
+  const shown = expanded ? rows : rows.slice(0, foldedByDefault ? 0 : visible)
+
+  return (
+    <div className="border-b border-border/60 last:border-b-0">
+      <button
+        type="button"
+        onClick={() => setExpanded((v) => !v)}
+        className="flex w-full items-center gap-2 bg-muted/25 px-4 py-1.5 text-left transition-colors hover:bg-muted/50"
+      >
+        <span className="text-[10px] font-medium tracking-wide text-muted-foreground uppercase">{taskStateStyle(state).label}</span>
+        <span className="text-[10px] tabular-nums text-muted-foreground/70">{rows.length}</span>
+        {rows.length > shown.length && (
+          <span className="ml-auto text-[10px] text-muted-foreground">show {rows.length - shown.length} more</span>
+        )}
+        {expanded && rows.length > visible && <span className="ml-auto text-[10px] text-muted-foreground">collapse</span>}
+      </button>
+      {shown.map(children)}
+    </div>
+  )
+}
+
+export function TaskList<T extends TaskItem>({
+  tasks,
+  taskHref,
+  onAccept,
+  onDrop,
+  renderWorker,
+  cockpitHref,
+  emptyAction,
+  visiblePerGroup = 5,
+  render,
+  className,
+}: TaskListProps<T>) {
+  const Link = render?.link ?? defaultLink
+  const groups = TASK_STATE_ORDER.map((state) => ({ state, rows: tasks.filter((t) => t.state === state) })).filter(
+    (g) => g.rows.length > 0,
+  )
+  // A state the package doesn't know still gets its rows drawn, in a group of its own at the end.
+  const unknown = tasks.filter((t) => !TASK_STATE_ORDER.includes(t.state))
+  if (unknown.length > 0) groups.push({ state: "queued", rows: unknown })
+
+  return (
+    <div className={cn("space-y-3", className)}>
+      {cockpitHref && tasks.length > visiblePerGroup && (
+        <div className="flex items-center justify-end">
+          <Link href={cockpitHref} className="text-[11px] text-muted-foreground transition-colors hover:text-foreground">
+            Open agent cockpit →
+          </Link>
+        </div>
+      )}
+
+      {tasks.length > 0 ? (
+        <div className="overflow-hidden rounded-xl border bg-card shadow-sm">
+          {groups.map((group, i) => (
+            <TaskGroup key={`${group.state}-${i}`} state={group.state} rows={group.rows} visible={visiblePerGroup}>
+              {(task) => (
+                <TaskRow
+                  key={task.id}
+                  task={task}
+                  href={taskHref(task)}
+                  onAccept={onAccept}
+                  onDrop={onDrop}
+                  worker={renderWorker?.(task)}
+                  Link={Link}
+                />
+              )}
+            </TaskGroup>
+          ))}
+        </div>
+      ) : (
+        <div className="flex flex-col items-center justify-center gap-3 rounded-xl border border-dashed bg-card py-12 text-center">
+          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-muted">
+            <SparklesIcon className="h-5 w-5 text-muted-foreground" />
+          </div>
+          <div>
+            <p className="text-sm font-medium">No tasks yet</p>
+            <p className="mt-0.5 text-xs text-muted-foreground">
+              Delegate a unit of work — it gets its own worker, branch and agent session
+            </p>
+          </div>
+          {emptyAction}
+        </div>
+      )}
+    </div>
+  )
+}