@spunto/design-system 0.30.1 → 0.31.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spunto/design-system",
-  "version": "0.30.1",
+  "version": "0.31.1",
   "description": "Spunto's shared design system — warm/flame tokens, color constants, and UI primitives.",
   "type": "module",
   "license": "MIT",

package/src/components/tasks/event-stream.tsx

@@ -68,7 +68,13 @@ type Item =
   /** A chain of machinery, folded — see `tool-stack.tsx`. */
   | { kind: "run"; run: ToolRun }
 
-/** A marker on the rail. `tone` is what carries meaning at a glance, so it stays a small set. */
+/**
+ * A marker on the rail. `tone` is what carries meaning at a glance, so it stays a small set.
+ *
+ * The rail runs *behind* every marker, so the disc must stay opaque: the tone's tint is a
+ * background-image laid over `bg-background`, never a translucent background-color (a `bg-x/10`
+ * would replace the opaque fill and let the line show through the icon).
+ */
 function Marker({
   icon,
   tone = "muted",
@@ -80,10 +86,12 @@ function Marker({
     <span
       className={cn(
         "absolute left-0 top-0.5 flex h-6 w-6 -translate-x-1/2 items-center justify-center rounded-full border bg-background",
-        tone === "primary" && "border-primary/40 bg-primary/10 text-primary",
-        tone === "success" && "border-green-500/40 bg-green-500/10 text-green-600 dark:text-green-500",
-        tone === "danger" && "border-destructive/40 bg-destructive/10 text-destructive",
-        tone === "pending" && "border-amber-500/40 bg-amber-500/10 text-amber-600 dark:text-amber-500",
+        tone === "primary" && "border-primary/40 bg-linear-to-b from-primary/10 to-primary/10 text-primary",
+        tone === "success" &&
+          "border-green-500/40 bg-linear-to-b from-green-500/10 to-green-500/10 text-green-600 dark:text-green-500",
+        tone === "danger" && "border-destructive/40 bg-linear-to-b from-destructive/10 to-destructive/10 text-destructive",
+        tone === "pending" &&
+          "border-amber-500/40 bg-linear-to-b from-amber-500/10 to-amber-500/10 text-amber-600 dark:text-amber-500",
         tone === "muted" && "text-muted-foreground",
       )}
     >

package/src/components/tasks/index.ts

@@ -38,6 +38,8 @@ 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 { TASK_TITLE_MAX_LENGTH, TaskTitle } from "./task-title"
+export type { TaskTitleProps } from "./task-title"
 export type { TaskDetailsProps } from "./task-details"
 
 // ── The conversation ────────────────────────────────────────────────────────────────────────

package/src/components/tasks/task-cockpit-mobile.tsx

@@ -26,6 +26,7 @@ import type { LinkRender } from "../workers/worker-card"
 import { TaskPanelTabs, useCockpitView, type TaskCockpitProps } from "./task-cockpit"
 import { TaskDetailsSheetContext } from "./task-details"
 import { TaskStateIcon, taskPendingActionConfig, taskStateStyle, useElapsed } from "./task-state"
+import { TaskTitle } from "./task-title"
 import type { TaskItem, TaskPendingAction } from "./types"
 
 export interface TaskCockpitMobileProps extends Omit<TaskCockpitProps, "className"> {
@@ -163,6 +164,8 @@ export function TaskCockpitMobile({
   pendingAction,
   pendingSince,
   onAccept,
+  onTitleChange,
+  titleUpdating,
   backHref,
   onBack,
   render,
@@ -219,7 +222,13 @@ export function TaskCockpitMobile({
       >
         {back}
         <div className="min-w-0 flex-1 pl-1">
-          <p className="truncate text-sm leading-tight font-semibold">{task?.title ?? "Conversation"}</p>
+          {task ? (
+            <p className="flex min-w-0">
+              <TaskTitle title={task.title} onTitleChange={onTitleChange} updating={titleUpdating} className="text-sm leading-tight font-semibold" />
+            </p>
+          ) : (
+            <p className="truncate text-sm leading-tight font-semibold">Conversation</p>
+          )}
           {task && <NavStatus task={task} action={action} since={since} />}
         </div>
 

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

@@ -30,6 +30,7 @@ import { Button } from "../button"
 import { buttonVariants } from "../button-variants"
 import type { LinkRender } from "../workers/worker-card"
 import { TaskStateBadge, isLiveTaskState } from "./task-state"
+import { TaskTitle } from "./task-title"
 import type { TaskItem, TaskPendingAction } from "./types"
 
 export type TaskCockpitView = "session" | "diff"
@@ -46,6 +47,13 @@ export interface TaskCockpitProps {
   onAccept?: () => void
   /** Drop, on any live task. Omitted → no button. */
   onDrop?: () => void
+  /**
+   * Rename the task, in any state: the title becomes a click-to-edit field. Called with the
+   * trimmed new title, only when it changed. Omitted → the title is read-only.
+   */
+  onTitleChange?: (title: string) => void
+  /** The rename is in flight — the submitted title stays drawn, with a spinner, until it is false. */
+  titleUpdating?: boolean
 
   /** Back arrow in the top bar. Omitted when the cockpit sits next to its own list. */
   backHref?: string
@@ -125,6 +133,8 @@ export function TaskCockpit({
   pendingSince,
   onAccept,
   onDrop,
+  onTitleChange,
+  titleUpdating,
   backHref,
   render,
   view: viewProp,
@@ -176,7 +186,9 @@ export function TaskCockpit({
               <div className="h-4 w-px shrink-0 bg-border" />
             </>
           )}
-          <h1 className="truncate text-sm font-semibold">{task.title}</h1>
+          <h1 className="flex min-w-0">
+            <TaskTitle title={task.title} onTitleChange={onTitleChange} updating={titleUpdating} className="text-sm font-semibold" />
+          </h1>
           <TaskStateBadge state={task.state} pendingAction={action} pendingSince={since} />
         </div>
 

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

@@ -0,0 +1,115 @@
+"use client"
+
+// A conversation's title, renamed in place.
+//
+// Without `onTitleChange` it is just the title — the cockpits mount it either way, so an app that
+// cannot rename (or a reader who may not) sees exactly what it saw before. With it, the title is a
+// button: a click turns it into a field, Enter or leaving the field saves, Escape gives up. An
+// empty or unchanged field saves nothing — a title can be replaced, not removed.
+//
+// Nothing here fetches. The new name goes out through the callback; `updating` says the app is
+// still writing it, and until it stops the field's value stays on screen with a spinner, so the
+// old name never flashes back between Enter and the answer — whether or not the app patches its
+// own cache optimistically.
+
+import { useEffect, useRef, useState } from "react"
+import { Loader2Icon, PencilIcon } from "lucide-react"
+
+import { cn } from "../../utils"
+
+/** The API's bound on a task title (`RenameTaskSchema` / `CreateTaskSchema`). */
+export const TASK_TITLE_MAX_LENGTH = 200
+
+export interface TaskTitleProps {
+  title: string
+  /** Called with the trimmed new title, only when it differs. Omitted → read-only. */
+  onTitleChange?: (title: string) => void
+  /** The rename is in flight: spinner, no second edit, and the submitted title stays drawn. */
+  updating?: boolean
+  /** The heading's own type — `text-sm font-semibold` in both cockpits. Also applied to the field. */
+  className?: string
+}
+
+export function TaskTitle({ title, onTitleChange, updating = false, className }: TaskTitleProps) {
+  const [editing, setEditing] = useState(false)
+  const [draft, setDraft] = useState(title)
+  const [submitted, setSubmitted] = useState<string | null>(null)
+  const input = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (!editing) return
+    input.current?.focus()
+    input.current?.select()
+  }, [editing])
+
+  // The submitted title is only a bridge over the wait: once the app says it is done, the prop is
+  // the truth again — including when the rename was refused and the old title is still the name.
+  useEffect(() => {
+    if (!updating) setSubmitted(null)
+  }, [updating])
+
+  const shown = updating && submitted !== null ? submitted : title
+
+  if (!onTitleChange) return <span className={cn("min-w-0 truncate", className)}>{title}</span>
+
+  const commit = () => {
+    setEditing(false)
+    const next = draft.trim()
+    if (!next || next === title) return
+    setSubmitted(next)
+    onTitleChange(next)
+  }
+
+  if (editing) {
+    return (
+      <input
+        ref={input}
+        value={draft}
+        maxLength={TASK_TITLE_MAX_LENGTH}
+        aria-label="Conversation title"
+        onChange={(e) => setDraft(e.target.value)}
+        onBlur={commit}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            e.preventDefault()
+            commit()
+          } else if (e.key === "Escape") {
+            e.preventDefault()
+            setEditing(false)
+          }
+        }}
+        className={cn(
+          // Sized to what is typed (`field-sizing`), from a width worth typing in, up to the room the
+          // bar gives it — a default-width input cut a 40-character title in half.
+          "-mx-1 min-w-48 rounded-sm bg-transparent pr-2 pl-1 ring-1 ring-ring/60 outline-none [field-sizing:content]",
+          className,
+        )}
+      />
+    )
+  }
+
+  return (
+    <button
+      type="button"
+      disabled={updating}
+      onClick={() => {
+        setDraft(title)
+        setEditing(true)
+      }}
+      title="Rename"
+      aria-label={`Rename “${shown}”`}
+      className="group flex min-w-0 items-center gap-1.5 rounded-sm text-left focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-default"
+    >
+      <span className={cn("min-w-0 truncate", className)}>{shown}</span>
+      {updating ? (
+        <Loader2Icon aria-label="Renaming" className="h-3 w-3 shrink-0 animate-spin text-muted-foreground" />
+      ) : (
+        // Shown on hover or focus — and always on a touch screen, which has no hover to reveal it.
+        <PencilIcon
+          aria-hidden
+          className="h-3 w-3 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100 [@media(hover:none)]:opacity-60"
+        />
+      )}
+    </button>
+  )
+}

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

@@ -12,8 +12,10 @@ import { renderInlineMarkdown } from "./agent-markdown"
 import { TaskComposer } from "./composer"
 import { bootSteps } from "./machine"
 import { formatCost, formatTokens } from "./session-usage"
+import { TaskCockpit } from "./task-cockpit"
 import { TaskList } from "./task-list"
 import { taskSpan } from "./task-state"
+import { TaskTitle } from "./task-title"
 import { runStats, toolSubject, toolVerb, type ToolRun } from "./tool-stack"
 import type { TaskCommand, TaskEvent, TaskItem } from "./types"
 import { indexTasksByWorker } from "./worker-link"
@@ -203,3 +205,62 @@ describe("TaskComposer", () => {
     expect(container.innerHTML).toBe("")
   })
 })
+
+describe("TaskTitle", () => {
+  const edit = (name = /Rename/) => {
+    fireEvent.click(screen.getByRole("button", { name }))
+    return screen.getByRole("textbox", { name: "Conversation title" }) as HTMLInputElement
+  }
+
+  it("is plain text without a callback", () => {
+    render(<TaskTitle title="Fix the login" />)
+    expect(screen.getByText("Fix the login")).toBeTruthy()
+    expect(screen.queryByRole("button")).toBeNull()
+  })
+
+  it("saves the trimmed title on Enter, and on leaving the field", () => {
+    const onTitleChange = vi.fn()
+    const { rerender } = render(<TaskTitle title="Fix the login" onTitleChange={onTitleChange} />)
+    fireEvent.change(edit(), { target: { value: "  Safari login  " } })
+    fireEvent.keyDown(screen.getByRole("textbox"), { key: "Enter" })
+    expect(onTitleChange).toHaveBeenLastCalledWith("Safari login")
+
+    rerender(<TaskTitle title="Safari login" onTitleChange={onTitleChange} />)
+    const input = edit()
+    fireEvent.change(input, { target: { value: "Safari 18 login" } })
+    fireEvent.blur(input)
+    expect(onTitleChange).toHaveBeenLastCalledWith("Safari 18 login")
+  })
+
+  it("saves nothing on Escape, on an empty field, or on the same title", () => {
+    const onTitleChange = vi.fn()
+    render(<TaskTitle title="Fix the login" onTitleChange={onTitleChange} />)
+    fireEvent.change(edit(), { target: { value: "Something else" } })
+    fireEvent.keyDown(screen.getByRole("textbox"), { key: "Escape" })
+    fireEvent.change(edit(), { target: { value: "   " } })
+    fireEvent.keyDown(screen.getByRole("textbox"), { key: "Enter" })
+    fireEvent.keyDown(edit(), { key: "Enter" })
+    expect(onTitleChange).not.toHaveBeenCalled()
+    expect(screen.getByText("Fix the login")).toBeTruthy()
+  })
+
+  it("keeps the submitted title drawn while updating, then defers to the prop", () => {
+    const { rerender } = render(<TaskTitle title="Fix the login" onTitleChange={() => {}} />)
+    fireEvent.change(edit(), { target: { value: "Safari login" } })
+    fireEvent.keyDown(screen.getByRole("textbox"), { key: "Enter" })
+    rerender(<TaskTitle title="Fix the login" onTitleChange={() => {}} updating />)
+    expect(screen.getByText("Safari login")).toBeTruthy()
+    expect((screen.getByRole("button") as HTMLButtonElement).disabled).toBe(true)
+    // Refused: the app stops updating without renaming, and the old name is the name again.
+    rerender(<TaskTitle title="Fix the login" onTitleChange={() => {}} />)
+    expect(screen.getByText("Fix the login")).toBeTruthy()
+  })
+
+  it("is editable from the cockpit's top bar when the app can rename", () => {
+    const onTitleChange = vi.fn()
+    render(<TaskCockpit task={task()} session={() => null} onTitleChange={onTitleChange} />)
+    fireEvent.change(edit(/Fix the login on Safari/), { target: { value: "Safari 18 login" } })
+    fireEvent.keyDown(screen.getByRole("textbox"), { key: "Enter" })
+    expect(onTitleChange).toHaveBeenCalledWith("Safari 18 login")
+  })
+})