@workerdeck/ui 0.16.0 → 0.18.0

package/src/components/agent/ProjectIcon.tsx

@@ -0,0 +1,119 @@
+import type { ProjectIcon as ProjectIconSpec } from '@workerdeck/protocol'
+import {
+  Anchor, Atom, Beaker, Bike, Binary, Blocks, Bot, Box, Brain, Briefcase, Brush, Bug,
+  Building2, Cable, Camera, Car, Cat, CircuitBoard, Cloud, Code, Coffee, Cog, Compass,
+  Container, Cpu, CreditCard, Database, Diamond, Dog, Feather, Film, Flame, FlaskConical,
+  Folder, Gamepad2, Gauge, Gem, Ghost, Gift, GitBranch, Globe, GraduationCap, Hammer,
+  Hexagon, House, Image, Key, Landmark, Laptop, Layers, Leaf, Library, Lightbulb, Lock,
+  Mail, Map, MessageCircle, Mic, Monitor, Moon, Mountain, Music, Network, Newspaper,
+  Notebook, Orbit, Package, Palette, PenTool, Phone, PiggyBank, Plane, Plug, Puzzle,
+  Radar, Radio, Receipt, Rocket, Ruler, Satellite, Scale, Scissors, Server, Shield, Ship,
+  ShoppingCart, Signal, Smartphone, Sparkles, Sprout, Square, Star, Sun, Table, Tag,
+  Target, Telescope, Terminal, TestTube, TreePine, Trophy, Truck, Umbrella, Users, Wallet,
+  Wand, Waves, Webhook, Wifi, Wrench, Zap,
+} from 'lucide-react'
+import type { ComponentType } from 'react'
+import { cn } from '../../lib/utils.ts'
+
+/**
+ * A project's icon — the render side of protocol's `ProjectIcon`, for a list
+ * row or a group header.
+ *
+ * **The glyph arm is a curated set, and that is the design rather than a
+ * shortcut.** The gateway validates a glyph name by *shape* only (lucide's
+ * lowercase-kebab convention) and explicitly declines to grow an icon catalog,
+ * so the contract already says a client must fall back on a name it does not
+ * know.
+ *
+ * The alternative was measured rather than argued, against the VS Code
+ * sidebar's own bundle: `sidebar.js` is **31 KB** with one glyph, **77 KB**
+ * with the 110 below (~418 bytes each), and **927 KB** with a
+ * `import * as` over lucide's ~1,600 — which is what it costs, because a
+ * namespace import defeats tree-shaking by construction. (`DynamicIcon` is the
+ * third option and worse in a different currency: ~1,600 chunk files shipped
+ * inside the `.vsix`.) Twelve times the bundle to render a name nobody has
+ * declared yet is not a trade worth making; 46 KB to cover the names people
+ * actually use is.
+ *
+ * The set is chosen to cover what people call a project; an unlisted-but-valid
+ * name draws {@link Folder}, which is what the row drew before this feature
+ * existed. **Grow it freely** — each addition is ~400 bytes and the fallback
+ * means a missing one is a shrug, not a hole.
+ *
+ * **The image arm draws nothing until its bytes arrive**, and takes them as a
+ * resolved `src` rather than fetching: the wire carries only an address
+ * (media type, size, content hash), and *who* fetches it differs per client —
+ * a VS Code webview cannot reach a gateway at all and must be handed a data
+ * URL by its extension host, while a browser can fetch and `createObjectURL`.
+ * A component that fetched would be wrong on one of them. Absent `src` renders
+ * nothing rather than a placeholder box: an icon is decoration beside a name
+ * that is already there, and a box that becomes a picture a beat later is more
+ * movement than the picture is worth.
+ *
+ * One thing an image icon cannot do, and a glyph can: **take the row's
+ * colour.** An `<img>`-embedded SVG is its own document, so `currentColor` does
+ * not reach it and its own `prefers-color-scheme` resolves against the *OS*
+ * rather than the host's theme (measured: it does resolve, which is the
+ * surprise — so a monochrome mark tuned for both schemes is right on a dark OS
+ * in a dark editor and wrong on a light OS in a dark one). A repo that wants a
+ * mark that always matches its row should declare a glyph; one that wants its
+ * brand should declare the image and accept that it is a picture.
+ */
+const GLYPHS: Record<string, ComponentType<{ className?: string }>> = {
+  anchor: Anchor, atom: Atom, beaker: Beaker, bike: Bike, binary: Binary, blocks: Blocks,
+  bot: Bot, box: Box, brain: Brain, briefcase: Briefcase, brush: Brush, bug: Bug,
+  'building-2': Building2, cable: Cable, camera: Camera, car: Car, cat: Cat,
+  'circuit-board': CircuitBoard, cloud: Cloud, code: Code, coffee: Coffee, cog: Cog,
+  compass: Compass, container: Container, cpu: Cpu, 'credit-card': CreditCard,
+  database: Database, diamond: Diamond, dog: Dog, feather: Feather, film: Film,
+  flame: Flame, 'flask-conical': FlaskConical, folder: Folder, 'gamepad-2': Gamepad2,
+  gauge: Gauge, gem: Gem, ghost: Ghost, gift: Gift, 'git-branch': GitBranch, globe: Globe,
+  'graduation-cap': GraduationCap, hammer: Hammer, hexagon: Hexagon, house: House,
+  image: Image, key: Key, landmark: Landmark, laptop: Laptop, layers: Layers, leaf: Leaf,
+  library: Library, lightbulb: Lightbulb, lock: Lock, mail: Mail, map: Map,
+  'message-circle': MessageCircle, mic: Mic, monitor: Monitor, moon: Moon,
+  mountain: Mountain, music: Music, network: Network, newspaper: Newspaper,
+  notebook: Notebook, orbit: Orbit, package: Package, palette: Palette, 'pen-tool': PenTool,
+  phone: Phone, 'piggy-bank': PiggyBank, plane: Plane, plug: Plug, puzzle: Puzzle,
+  radar: Radar, radio: Radio, receipt: Receipt, rocket: Rocket, ruler: Ruler,
+  satellite: Satellite, scale: Scale, scissors: Scissors, server: Server, shield: Shield,
+  ship: Ship, 'shopping-cart': ShoppingCart, signal: Signal, smartphone: Smartphone,
+  sparkles: Sparkles, sprout: Sprout, square: Square, star: Star, sun: Sun, table: Table,
+  tag: Tag, target: Target, telescope: Telescope, terminal: Terminal, 'test-tube': TestTube,
+  'tree-pine': TreePine, trophy: Trophy, truck: Truck, umbrella: Umbrella, users: Users,
+  wallet: Wallet, wand: Wand, waves: Waves, webhook: Webhook, wifi: Wifi, wrench: Wrench,
+  zap: Zap,
+}
+
+export function ProjectIcon({
+  icon,
+  src,
+  name,
+  className,
+}: {
+  icon: ProjectIconSpec | undefined
+  /** Resolved bytes for the `image` arm — an object URL or a data URL. The
+   * caller fetches (see the note above); absent draws nothing. */
+  src?: string
+  /** The project's name, for the alt text. */
+  name?: string
+  className?: string
+}) {
+  if (!icon) return null
+  if (icon.type === 'image') {
+    if (!src) return null
+    return (
+      <img
+        src={src}
+        alt=''
+        aria-hidden
+        title={name}
+        // `object-contain` because a declared icon is whatever aspect the repo
+        // checked in, and a squashed logo reads worse than a letterboxed one.
+        className={cn('inline-block size-3 shrink-0 object-contain', className)}
+      />
+    )
+  }
+  const Glyph = GLYPHS[icon.name] ?? Folder
+  return <Glyph className={cn('inline-block size-3 shrink-0', className)} />
+}

package/src/components/agent/SessionBrowser.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
+import type { ReactNode } from 'react'
 import {
   BellRing,
   CircleAlert,
@@ -20,6 +21,9 @@ import {
   filterRows,
   groupRows,
   hasFacetFilter,
+  projectLabel,
+  projectSubpath,
+  projectsOf,
   sessionLabel,
   subsetSummary,
 } from '@workerdeck/protocol'
@@ -36,6 +40,10 @@ import { Empty } from '../ui/Empty.tsx'
 import { Input } from '../ui/Input.tsx'
 import { Select, SelectContent, SelectItem, SelectItemText, SelectTrigger, SelectValue } from '../ui/Select.tsx'
 import { Spinner } from '../ui/Spinner.tsx'
+import { ContextRing } from './ContextRing.tsx'
+import { EngineIcon, vendorMarkClass, vendorTextClass } from './EngineIcon.tsx'
+import { ProjectIcon } from './ProjectIcon.tsx'
+import { StepRow, StepToggle, runningSteps, sessionSteps } from './SessionSteps.tsx'
 import { cn } from '../../lib/utils.ts'
 import { formatCost, formatRelativeTime, friendlyModel } from '../../lib/format.ts'
 
@@ -74,6 +82,10 @@ export interface SessionBrowserProps {
    * double-click would have already left the page.
    */
   onRename?: (row: SessionRow, title: string) => void
+  /** Open a session *at* one of its sub-agents, when the host can scroll a
+   * transcript to a `Task` row. Absent, the sub-agent list still expands and a
+   * step just opens its session — see `SessionRowItemProps`. */
+  onSelectSubagent?: (row: SessionRow, toolUseId: string) => void
   /** Rendered when nothing at all exists (as opposed to nothing matching). */
   emptyState?: React.ReactNode
   /**
@@ -88,6 +100,15 @@ export interface SessionBrowserProps {
    * filtered by a control you can't currently see still says so.
    */
   showControls?: boolean
+  /**
+   * Resolved project-icon bytes by content hash — `useProjectIcons`' output.
+   *
+   * Passed in rather than fetched here for the reason `ProjectIcon` states: the
+   * wire carries an *address*, and who can fetch it differs per client. Absent,
+   * or a hash not in it yet, simply draws no picture; the project's name is
+   * already there.
+   */
+  projectIcons?: Record<string, string>
   className?: string
 }
 
@@ -123,8 +144,10 @@ export function SessionBrowser({
   onSelect,
   onDelete,
   onRename,
+  onSelectSubagent,
   emptyState,
   showControls = true,
+  projectIcons,
   className,
 }: SessionBrowserProps) {
   const visible = useMemo(() => filterRows(rows, config, scope), [rows, config, scope])
@@ -133,6 +156,7 @@ export function SessionBrowser({
   // Derived, not enumerated: a new engine or a new gateway needs no change here,
   // and a facet with one possible value is not a choice worth showing.
   const adapters = useMemo(() => adaptersOf(rows), [rows])
+  const projects = useMemo(() => projectsOf(rows), [rows])
   const gateways = useMemo(() => {
     const seen = new Map<string, string>()
     for (const row of rows) seen.set(row.hostId, row.hostName)
@@ -187,6 +211,16 @@ export function SessionBrowser({
             />
           </FilterRow>
         ) : null}
+        {projects.length > 1 ? (
+          <FilterRow label='Project'>
+            <FacetSelect
+              label='Project'
+              value={config.projects ?? []}
+              options={projects.map((p) => ({ value: p.key, label: p.label }))}
+              onChange={(next) => set({ projects: next })}
+            />
+          </FilterRow>
+        ) : null}
         <FilterRow label='Group'>
           <OneOfSelect
             label='Group'
@@ -195,6 +229,7 @@ export function SessionBrowser({
               { value: 'none', label: 'No grouping' },
               { value: 'state', label: 'By state' },
               { value: 'adapter', label: 'By engine' },
+              ...(projects.length > 1 ? [{ value: 'project' as const, label: 'By project' }] : []),
               ...(gateways.length > 1 ? [{ value: 'gateway' as const, label: 'By gateway' }] : []),
             ]}
             onChange={(groupBy) => set({ groupBy: groupBy as GroupBy })}
@@ -208,6 +243,7 @@ export function SessionBrowser({
               { value: 'recent', label: 'Recent' },
               { value: 'name', label: 'Name' },
               { value: 'state', label: 'State' },
+              ...(projects.length > 1 ? [{ value: 'project' as const, label: 'Project' }] : []),
               ...(gateways.length > 1 ? [{ value: 'gateway' as const, label: 'Gateway' }] : []),
             ]}
             onChange={(sortBy) => set({ sortBy: sortBy as SortBy })}
@@ -253,7 +289,16 @@ export function SessionBrowser({
           {groups.map((group) => (
             <div key={group.key} className='flex flex-col gap-1'>
               {config.groupBy !== 'none' && group.label ? (
-                <div className='flex items-baseline gap-2 px-3 text-label font-medium text-fg-4'>
+                <div className='flex items-center gap-2 px-3 text-label font-medium text-fg-4'>
+                  {/* Only the project facet has a mark of its own, and a group
+                      IS one project root, so the first row is a fair source. */}
+                  {config.groupBy === 'project' ? (
+                    <ProjectIcon
+                      icon={group.rows[0]?.info.project?.icon}
+                      src={iconSrcOf(group.rows[0], projectIcons)}
+                      name={group.label}
+                    />
+                  ) : null}
                   <span className='uppercase tracking-wide'>{group.label}</span>
                   <span className='text-fg-4/70'>{group.rows.length}</span>
                 </div>
@@ -263,10 +308,13 @@ export function SessionBrowser({
                   key={`${row.hostId}:${row.info.id}`}
                   row={row}
                   active={row.info.id === activeId}
-                  showGateway={gateways.length > 1}
+                  showGateway={gateways.length > 1 && config.groupBy !== 'gateway'}
+                  showProject={config.groupBy !== 'project'}
+                  projectIcons={projectIcons}
                   onSelect={onSelect}
                   onDelete={onDelete}
                   onRename={onRename}
+                  onSelectSubagent={onSelectSubagent}
                 />
               ))}
             </div>
@@ -277,36 +325,86 @@ export function SessionBrowser({
   )
 }
 
+/** The bytes for a row's project icon, if it has an image one and the caller has
+ * fetched it yet. Shared by the row and its group header so the two cannot draw
+ * different pictures for one project. */
+function iconSrcOf(
+  row: SessionRow | undefined,
+  icons: Record<string, string> | undefined,
+): string | undefined {
+  const icon = row?.info.project?.icon
+  return icon?.type === 'image' ? icons?.[icon.hash] : undefined
+}
+
 interface SessionRowItemProps {
   row: SessionRow
   active?: boolean
   showGateway?: boolean
+  /** False when the list is already grouped by project — the header has said the
+   * name, so the row must not spend its metadata line repeating it. What takes
+   * the slot is the *sub-path inside the project* (`projectSubpath`), which is
+   * the one thing the header cannot say and the only thing that tells two
+   * sessions in the same repo apart; a session sitting at the project root has
+   * nothing to add and the slot disappears entirely. The rule `showGateway`
+   * follows one facet over. */
+  showProject?: boolean
+  projectIcons?: Record<string, string>
   onSelect?: (row: SessionRow) => void
   onDelete?: (row: SessionRow) => void
   onRename?: (row: SessionRow, title: string) => void
+  /** Open one of a session's sub-agents — which now means handing the session
+   * panel over to that agent's own work (`SessionPanel.openSubagent`), and meant
+   * "scroll to its `Task` row" before that surface existed. Both are honest; a
+   * host picks what it can draw. Optional, and its absence is not a missing
+   * feature: without it a step just opens the session, which is all a host with
+   * neither can offer. Only *agent* steps ever call it — see `Step.kind`. */
+  onSelectSubagent?: (row: SessionRow, toolUseId: string) => void
 }
 
 function SessionRowItem({
   row,
   active,
   showGateway,
+  showProject = true,
+  projectIcons,
   onSelect,
   onDelete,
   onRename,
+  onSelectSubagent,
 }: SessionRowItemProps) {
   const { info } = row
   const [editing, setEditing] = useState(false)
+  // Expansion is the row's own state and deliberately not persisted: a list that
+  // reopened yesterday's work on every reload would be showing a settled tail
+  // nobody asked for.
+  const [expanded, setExpanded] = useState(false)
 
   // What it is and what it has spent, in one line — the same set the extension
   // shows, joined the same way, so the two lists read as one product.
-  const folder = info.cwd.split('/').filter(Boolean).pop() ?? info.cwd
+  // protocol's own spelling, so this row, the group header above it and the
+  // project facet cannot disagree about what a project is called. Under a
+  // project group it is the sub-path instead — see `showProject` — and a session
+  // at the root contributes nothing at all rather than a name already on screen.
+  const project = showProject ? projectLabel(row) : projectSubpath(row)
+  const projectIcon = showProject ? info.project?.icon : undefined
+  const engine = info.engine ?? 'claude'
+  // Everything after the model. The model itself is drawn separately because it
+  // is the one segment that wears a colour — see `vendorTextClass` — and a
+  // coloured run inside a joined string would have to be spliced back out.
   const details = [
+    project,
     showGateway ? row.hostName : undefined,
-    friendlyModel(info.model),
-    folder,
     info.profile ? `@${info.profile}` : undefined,
     formatCost(info.totalCostUsd),
   ].filter(Boolean)
+  const steps = sessionSteps(info, (toolUseId) =>
+    onSelectSubagent ? onSelectSubagent(row, toolUseId) : onSelect?.(row),
+  )
+  // Where the icon goes: immediately before the project's own name, wherever
+  // that landed in the joined line. Split rather than interleaved as nodes,
+  // because everything here is one truncating mono run and a flex of pieces
+  // would each shrink a little and leave several half-words.
+  const cut = project === undefined ? -1 : details.indexOf(project)
 
   return (
     <div
@@ -324,9 +422,20 @@ function SessionRowItem({
         'group flex cursor-pointer flex-col gap-0.5 text-left transition-colors',
         rowShapeClass(active === true),
       )}>
-      {/* Line one: what you scan the list by on the left, how it is doing on the
-          right, state last. */}
+      {/* Line one: how it is doing, then what you scan the list by, then how
+          long since it moved.
+
+          State leads. It used to sit last, on the argument that the title is
+          what you read and the state is what you glance at — but a glance wants
+          a *column*, and a trailing glyph has no fixed x: it lands wherever the
+          age and the ring leave it. Leading, every row's state stacks into one
+          scannable strip, and the mark on line two lands under it in the same
+          gutter. This is the VS Code sidebar's shape, and all three clients are
+          on it now. */}
       <div className='flex items-center gap-1.5'>
+        <Gutter>
+          <SessionStatusIcon row={row} />
+        </Gutter>
         {/* The editor replaces the link rather than sitting inside it — an
             input nested in a button is invalid, and disabling the button to
             protect the edit disables the field with it. */}
@@ -361,18 +470,59 @@ function SessionRowItem({
         <span className='shrink-0 text-label text-fg-4'>
           {formatRelativeTime(info.lastActivityAt ?? info.createdAt)}
         </span>
-        <SessionStatusIcon row={row} />
+        <ContextRing usage={info.contextUsage} />
       </div>
 
-      {/* Line two: what it is, with the actions at the far right — away from the
-          state icon, and away from the title you are actually reading. */}
+      {/* Line two: what it is — the engine's mark and its model in the vendor's
+          own colour, then where it runs — with the actions at the far right,
+          away from the title you are actually reading. */}
       <div className='flex items-center gap-1 text-label text-fg-4'>
+        <Gutter>
+          {/* The colour goes on the icon, not on this cell: the svg ships its
+              own `text-fg-3` and only a class on the element itself merges over
+              it. */}
+          <EngineIcon
+            engine={engine}
+            model={info.model}
+            className={vendorMarkClass(engine, info.model)}
+          />
+        </Gutter>
         <button
           type='button'
           tabIndex={-1}
           className='min-w-0 flex-1 truncate text-left font-mono outline-none'>
-          {details.join(' · ')}
+          <span className={vendorTextClass(engine, info.model)}>
+            {/* The model id as a person says it — `claude-opus-5[1m]` is a wire
+                value, and a list line has no room for a context-window suffix. */}
+            {friendlyModel(info.model)}
+          </span>
+          {details.length > 0 ? ' · ' : ''}
+          {cut < 0 ? (
+            details.join(' · ')
+          ) : (
+            <>
+              {details.slice(0, cut).map((part) => `${part} · `)}
+              <ProjectIcon
+                icon={projectIcon}
+                src={iconSrcOf(row, projectIcons)}
+                name={project}
+                /* Nudged onto the text baseline: a 12px glyph box against an
+                   11px line sits a hair proud without it. */
+                className='mr-1 align-[-0.2em]'
+              />
+              {details.slice(cut).join(' · ')}
+            </>
+          )}
         </button>
+        {steps.length > 0 ? (
+          <StepToggle
+            expanded={expanded}
+            running={runningSteps(steps)}
+            total={steps.length}
+            noun={steps[0]!.noun}
+            onToggle={() => setExpanded((v) => !v)}
+          />
+        ) : null}
         {onRename && !editing ? (
           <Button
             variant='ghost'
@@ -400,22 +550,46 @@ function SessionRowItem({
           </Button>
         ) : null}
       </div>
+      {expanded ? steps.map((step) => <StepRow key={step.key} step={step} onSelect={step.onSelect} />) : null}
     </div>
   )
 }
 
 /**
- * State as one glyph on the right edge — a ringing bell when it wants a human, a
- * spinner while it works, a moon when it is only sleeping. Replaces the text
- * badge: in a sidebar the word costs more room than it earns, and the states
- * that matter are the two you can recognise without reading.
+ * The one 14px cell both lines hang their glyph in.
+ *
+ * A shared column rather than a leading character: the state and the engine mark
+ * are different widths and a bare glyph would let the two text columns start at
+ * different x. Centring inside a fixed cell is what makes them agree —
+ * `packages/ui`'s terminal-gutter argument at row scale.
+ */
+function Gutter({ children }: { children: ReactNode }) {
+  return <span className='flex w-3.5 shrink-0 items-center justify-center'>{children}</span>
+}
+
+/**
+ * State as one glyph — a ringing bell when it wants a human, a spinner while it
+ * works, a moon when it is only sleeping. Replaces the text badge: in a sidebar
+ * the word costs more room than it earns, and the states that matter are the two
+ * you can recognise without reading.
+ *
+ * **It reads `row.state`, not `info.status`, and that distinction is the whole
+ * point of the row model.** `sessionState` already folds in the arm this glyph
+ * cannot see for itself: a *background* sub-agent outlives its turn by design, so
+ * the turn ends, `status` comes to rest at `idle`, and the agent keeps working.
+ * Reading the raw status drew a **moon on a row filed under the "Working"
+ * header** — the list contradicting itself on one line, which is exactly what a
+ * derived view model exists to prevent. The value was in scope and unread.
+ *
+ * The terminal statuses still come off `info.status`, because `ended` collapses
+ * `failed` and `closed` into one bucket and those are worth telling apart here.
  */
 export function SessionStatusIcon({ row }: { row: SessionRow }) {
   const { info } = row
-  if (info.pendingPermissionCount > 0 || info.status === 'awaiting_approval') {
+  if (row.state === 'attention') {
     return <BellRing className='size-3.5 shrink-0 animate-pulse text-warning' />
   }
-  if (info.status === 'running' || info.status === 'starting') {
+  if (row.state === 'working') {
     return <Spinner className='size-3.5 shrink-0 text-info' />
   }
   switch (info.status) {