@spunto/design-system 0.35.1 → 0.36.0

package/package.json

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

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

@@ -14,7 +14,7 @@
 // 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 { CheckIcon, ChevronRightIcon, CopyIcon, ExternalLinkIcon, GitBranchIcon, Loader2Icon, XCircleIcon } from "lucide-react"
 
 import { cn, formatRelativeTime } from "../../utils"
 import { TaskCommandLog } from "./command-log"
@@ -55,6 +55,27 @@ function Fact({ label, children }: { label: string; children: ReactNode }) {
   )
 }
 
+/** The branch is what you type next (`git fetch`, `git checkout`), so it is one click from the clipboard. */
+function CopyBranchButton({ branch }: { branch: string }) {
+  const [copied, setCopied] = useState(false)
+  return (
+    <button
+      type="button"
+      title={copied ? "Copied" : "Copy branch name"}
+      aria-label="Copy branch name"
+      onClick={() => {
+        navigator.clipboard?.writeText(branch).then(() => {
+          setCopied(true)
+          setTimeout(() => setCopied(false), 1500)
+        })
+      }}
+      className="mt-0.5 shrink-0 text-muted-foreground transition-colors hover:text-foreground"
+    >
+      {copied ? <CheckIcon className="h-3 w-3 text-emerald-600 dark:text-emerald-400" /> : <CopyIcon className="h-3 w-3" />}
+    </button>
+  )
+}
+
 function Block({
   variant,
   title,
@@ -140,7 +161,8 @@ export function TaskDetails({
               <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 className="min-w-0">{task.branch}</span>
+                  <CopyBranchButton branch={task.branch} />
                 </span>
               </Fact>
             </div>

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

@@ -7,7 +7,7 @@
  */
 import type { ReactNode } from "react"
 import { describe, it, expect, vi } from "vitest"
-import { render, screen, fireEvent } from "@testing-library/react"
+import { render, screen, fireEvent, waitFor } from "@testing-library/react"
 
 import { renderInlineMarkdown } from "./agent-markdown"
 import { emptyCommandTerminalState, planCommandTerminalWrites } from "./command-terminal"
@@ -15,6 +15,7 @@ import { TaskComposer } from "./composer"
 import { TaskBoot, bootSteps } from "./machine"
 import { formatCost, formatTokens } from "./session-usage"
 import { TaskCockpit } from "./task-cockpit"
+import { TaskDetails } from "./task-details"
 import { TaskList } from "./task-list"
 import { taskSpan } from "./task-state"
 import { TaskTitle } from "./task-title"
@@ -382,3 +383,14 @@ describe("TaskCockpit panels", () => {
     expect(screen.getByText("session panel")).toBeTruthy()
   })
 })
+
+describe("TaskDetails", () => {
+  it("copies the branch name from its icon", async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined)
+    Object.defineProperty(navigator, "clipboard", { value: { writeText }, configurable: true })
+    render(<TaskDetails task={task()} />)
+    fireEvent.click(screen.getByRole("button", { name: "Copy branch name" }))
+    expect(writeText).toHaveBeenCalledWith("task/fix-login-a1b2c3")
+    await waitFor(() => expect(screen.getByTitle("Copied")).toBeTruthy())
+  })
+})