Workbench Header

The frame over an agent session: title and branch on the left, live telemetry and actions on the right. Deliberately thin — the value is the consistent slots where agent-status, branch-chip, context-meter, and pickers snap in.

migrate-billing-webhooks

seamui/seamui

Working

Thread

tsx

import { Plus } from "lucide-react"

import { AgentStatus } from "@/registry/seam/ui/agent-status"
import { BranchChip } from "@/registry/seam/ui/branch-chip"
import { Button } from "@/registry/seam/ui/button"
import { ContextMeter } from "@/registry/seam/ui/context-meter"
import {
  WorkbenchHeader,
  WorkbenchHeaderActions,
  WorkbenchHeaderTitle,
} from "@/registry/seam/ui/workbench-header"

export default function WorkbenchHeaderDemo() {
  return (
    <div className="bg-background w-full overflow-hidden rounded-lg border">
      <WorkbenchHeader>
        <WorkbenchHeaderTitle description="seamui/seamui">
          migrate-billing-webhooks
        </WorkbenchHeaderTitle>
        <AgentStatus status="working" />
        <WorkbenchHeaderActions>
          <ContextMeter value={124_000} max={200_000} showValue />
          <BranchChip branch="claude/billing-webhooks" ahead={2} />
          <Button size="sm" variant="secondary" className="h-8 gap-1.5">
            <Plus className="size-4" /> New session
          </Button>
        </WorkbenchHeaderActions>
      </WorkbenchHeader>
      <div className="text-muted-foreground flex h-32 items-center justify-center text-sm">
        Thread
      </div>
    </div>
  )
}

bunx --bun @seamui/cli@latest add workbench-header

Notes

Canvas, not key: the bar is flat bg-background with a hairline border, so the embossed chips inside it carry the depth. Nothing in the frame animates.
WorkbenchHeaderTitle renders a semantic <h1> (override via className/props as needed) and truncates; the bar is a <header> landmark.
The “full shell” example is the v0 workbench skeleton — sidebar + header composed entirely from seamui parts, with the thread and review pane left as slots.

Press feedback, reduced motion, and haptics follow the global policy — see Motion and Haptics.