@workerdeck/ui 2.11.0 → 2.12.0

package/build/workspace.d.mts

@@ -1,4 +1,4 @@
-import { i as SessionPanelProps } from "./SessionPanel-BVbau2eR.mjs";
+import { i as SessionPanelProps } from "./SessionPanel-CJwp5B3q.mjs";
 import { CSSProperties } from "react";
 import { OpenFile, UseHostFileSearchResult, UseHostFileTreeResult } from "@workerdeck/react";
 import { WorkerDeckClient } from "@workerdeck/client";

package/build/workspace.mjs

@@ -1,4 +1,4 @@
-import { At as Spinner, B as EntryIcon, Ft as TooltipProvider, Nt as Tip, Ot as Splitter, an as Button, i as SessionPanel, n as usePathLinks, nn as Input, sn as cn, t as resolveAgainstCwd } from "./use-path-links-DO_79-wX.mjs";
+import { B as EntryIcon, It as Tip, Nt as Spinner, Rt as TooltipProvider, an as Input, cn as Button, i as SessionPanel, jt as Splitter, n as usePathLinks, t as resolveAgainstCwd, un as cn } from "./use-path-links-CepFsMdW.mjs";
 import { m as formatBytes } from "./status-kmsBhuFG.mjs";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workerdeck/ui",
-  "version": "2.11.0",
+  "version": "2.12.0",
   "type": "module",
   "description": "Styled agent-control component library for WorkerDeck: session panel, transcript with streaming, tool-call cards, permission prompts, session list, composer. Tailwind v4 + Base UI + cva. Pairs with the headless @workerdeck/react layer.",
   "license": "MIT",
@@ -39,9 +39,9 @@
     "streamdown": "^2.6.0",
     "tailwind-merge": "^3.7.0",
     "use-stick-to-bottom": "^1.1.6",
-    "@workerdeck/client": "2.11.0",
-    "@workerdeck/protocol": "2.11.0",
-    "@workerdeck/react": "2.11.0"
+    "@workerdeck/protocol": "2.12.0",
+    "@workerdeck/client": "2.12.0",
+    "@workerdeck/react": "2.12.0"
   },
   "peerDependencies": {
     "monaco-editor": "^0.56.0",

package/src/components/agent/Composer.tsx

@@ -10,15 +10,15 @@ import {
   type Ref,
 } from 'react'
 import type { SkillInfo, SlashCommandInfo } from '@workerdeck/protocol'
-import type { StagedAttachment, UseAttachmentsResult } from '@workerdeck/react'
-import { ArrowUp, FileText, Paperclip, RotateCw, SlidersHorizontal, Sparkles, Square, TriangleAlert, X } from 'lucide-react'
+import type { PeerSessionOption, StagedAttachment, UseAttachmentsResult } from '@workerdeck/react'
+import { ArrowUp, FileText, Paperclip, RotateCw, SlidersHorizontal, Sparkles, Square, TriangleAlert, Users, X } from 'lucide-react'
 import { Button } from '../ui/Button.tsx'
 import { Spinner } from '../ui/Spinner.tsx'
 import { PromptArea } from '../prompt-area/prompt-area.tsx'
 import { usePromptAreaState } from '../prompt-area/use-prompt-area-state.ts'
 import { plainTextToSegments } from '../prompt-area/prompt-area-engine.ts'
-import { commandTrigger, launchTrigger, mentionTrigger } from '../prompt-area/trigger-presets.ts'
-import { mergeComposerRows, rankComposerRows, skillTrailingText, type ClientCommand } from './composer-commands.ts'
+import { commandTrigger, hashtagTrigger, launchTrigger, mentionTrigger } from '../prompt-area/trigger-presets.ts'
+import { mergeComposerRows, rankComposerRows, rankPeerSessions, skillTrailingText, type ClientCommand } from './composer-commands.ts'
 import { useTranscriptVariant } from './transcript-variant.tsx'
 import type { TerminalAffordances } from '../terminal/affordances.tsx'
 import { PROMPT_GLYPH } from '../terminal/items.tsx'
@@ -49,6 +49,9 @@ export interface ComposerProps {
   // commands, and suppressed name-for-name by an engine command so the real one always wins.
   clientCommands?: ClientCommand[]
   onSearchFiles?: (query: string, options: { signal: AbortSignal }) => Promise<ComposerFileMatch[]>
+  // The other sessions on this gateway, offered on `#`. The token is a hint the gateway resolves at
+  // send: it never messages the named session, and an unresolvable name stays ordinary text.
+  peers?: readonly PeerSessionOption[]
   // Shell mode: `!` as the first character turns the composer into a host shell prompt. Omit to leave the
   // mode off entirely - the gateway only offers it to an operator on a session whose engine reaches a host cwd.
   onShellCommand?: (command: string) => void
@@ -75,6 +78,7 @@ export function Composer({
   skills,
   clientCommands,
   onSearchFiles,
+  peers,
   onShellCommand,
   attachments,
   toolbar,
@@ -172,6 +176,24 @@ export function Composer({
         }),
       )
     }
+    if (peers?.length) {
+      configured.push(
+        hashtagTrigger({
+          accessibilityLabel: 'session',
+          onSearch: (query: string): TriggerSuggestion[] =>
+            rankPeerSessions(query, peers).map((peer) => ({
+              value: peer.slug,
+              label: peer.label,
+              description: [peer.engine, peer.project, peer.status].filter(Boolean).join(' · '),
+              icon: <Users className="size-3.5 text-fg-3" />,
+            })),
+          onSelect: (suggestion) => suggestion.value,
+          chipStyle: 'inline',
+          chipClassName: 'font-mono',
+          emptyMessage: 'No matching sessions',
+        }),
+      )
+    }
     if (onShellCommand) {
       configured.push(
         launchTrigger({
@@ -182,7 +204,7 @@ export function Composer({
       )
     }
     return configured.length > 0 ? configured : undefined
-  }, [commands, skills, clientCommands, onSearchFiles, onShellCommand])
+  }, [commands, skills, clientCommands, onSearchFiles, peers, onShellCommand])
 
   const saveDraft = draft?.save
   useEffect(() => {
@@ -223,6 +245,7 @@ export function Composer({
   const hints = [
     triggers?.some((t) => t.char === '/') ? { key: '/', what: 'commands and skills' } : undefined,
     onSearchFiles ? { key: '@', what: 'mention a file' } : undefined,
+    peers?.length ? { key: '#', what: 'refer to another session' } : undefined,
     onShellCommand ? { key: '!', what: 'run a shell command' } : undefined,
     { key: '?', what: 'this list, on an empty composer' },
   ].filter((h) => h !== undefined)

package/src/components/agent/PromptTokenText.tsx

@@ -4,14 +4,22 @@ import { cn } from '../../lib/utils.ts'
 
 const SkillNamesContext = createContext<readonly string[] | undefined>(undefined)
 
+const SessionNamesContext = createContext<readonly string[] | undefined>(undefined)
+
 // The skill names a `$name` in a sent message may resolve to; unset, nothing is a skill token.
 export function SkillNamesProvider({ names, children }: { names: readonly string[] | undefined; children: ReactNode }) {
   return <SkillNamesContext.Provider value={names}>{children}</SkillNamesContext.Provider>
 }
 
+// The folded peer slugs a `#Name` in a sent message may resolve to; unset, nothing is a session token.
+export function SessionNamesProvider({ names, children }: { names: readonly string[] | undefined; children: ReactNode }) {
+  return <SessionNamesContext.Provider value={names}>{children}</SessionNamesContext.Provider>
+}
+
 export function PromptTokenText({ text, className }: { text: string; className?: string }) {
   const skills = useContext(SkillNamesContext)
-  const tokens = scanPromptTokens(text, { skills })
+  const sessions = useContext(SessionNamesContext)
+  const tokens = scanPromptTokens(text, { skills, sessions })
   if (tokens.length === 0) {
     return <span className={className}>{text}</span>
   }

package/src/components/agent/SessionBrowser.tsx

@@ -12,7 +12,7 @@ import {
   projectsOf,
   subsetSummary,
 } from '@workerdeck/protocol'
-import type { GroupBy, SessionRow, SessionState, SortBy, ViewConfig, WorkspaceScope } from '@workerdeck/protocol'
+import type { GroupBy, SessionRow, SessionState, SortBy, SubagentDisplay, ViewConfig, WorkspaceScope } from '@workerdeck/protocol'
 import { Button } from '../ui/Button.tsx'
 import { Empty } from '../ui/Empty.tsx'
 import { Input } from '../ui/Input.tsx'
@@ -142,6 +142,18 @@ export function SessionBrowser({
             onChange={(groupBy) => set({ groupBy: groupBy as GroupBy })}
           />
         </FilterRow>
+        <FilterRow label="Sub-agents">
+          <OneOfSelect
+            label="Sub-agents"
+            value={config.subagents}
+            options={[
+              { value: 'active', label: 'Hide completed' },
+              { value: 'all', label: 'Show all' },
+              { value: 'none', label: 'Hide all' },
+            ]}
+            onChange={(subagents) => set({ subagents: subagents as SubagentDisplay })}
+          />
+        </FilterRow>
         <FilterRow label="Sort">
           <OneOfSelect
             label="Sort"
@@ -209,6 +221,7 @@ export function SessionBrowser({
                   activeSubagentId={activeSubagentId}
                   showGateway={gateways.length > 1 && config.groupBy !== 'gateway'}
                   showProject={config.groupBy !== 'project'}
+                  subagents={config.subagents}
                   projectIcons={projectIcons}
                   onSelect={onSelect}
                   onDelete={onDelete}
@@ -236,6 +249,7 @@ interface SessionRowItemProps {
   activeSubagentId?: string
   showGateway?: boolean
   showProject?: boolean
+  subagents?: SubagentDisplay
   projectIcons?: Record<string, string>
   onSelect?: (row: SessionRow) => void
   onDelete?: (row: SessionRow) => void
@@ -250,6 +264,7 @@ function SessionRowItem({
   activeSubagentId,
   showGateway,
   showProject = true,
+  subagents,
   projectIcons,
   onSelect,
   onDelete,
@@ -267,6 +282,7 @@ function SessionRowItem({
       activeStepKey={activeSubagentId}
       showGateway={showGateway}
       showProject={showProject}
+      subagents={subagents}
       projectIcons={projectIcons}
       onSelect={() => onSelect?.(row)}
       onSelectSubagent={onSelectSubagent ? (id) => onSelectSubagent(row, id) : undefined}

package/src/components/agent/SessionItem.tsx

@@ -1,12 +1,12 @@
 import { Fragment, useEffect, useRef, useState } from 'react'
 import type { ReactNode } from 'react'
 import { projectLabel, projectName, projectSubpath, sessionLabel } from '@workerdeck/protocol'
-import type { SessionRow } from '@workerdeck/protocol'
+import type { SessionRow, SubagentDisplay } from '@workerdeck/protocol'
 import { ContextRing } from './ContextRing.tsx'
 import { EngineIcon, vendorMarkClass, vendorTextClass } from './EngineIcon.tsx'
 import { ProjectIcon } from './ProjectIcon.tsx'
 import { SessionStatusIcon } from './SessionStatusIcon.tsx'
-import { StepRow, StepToggle, runningSteps, sessionSteps } from './SessionSteps.tsx'
+import { StepRow, sessionSteps } from './SessionSteps.tsx'
 import type { Step } from './SessionSteps.tsx'
 import { cn } from '../../lib/utils.ts'
 import { formatCost, formatRelativeTime, friendlyModel } from '../../lib/format.ts'
@@ -20,8 +20,7 @@ export interface SessionItemProps {
   showGateway?: boolean
   showProject?: boolean
   projectIcons?: Record<string, string>
-  expanded?: boolean
-  onExpandedChange?: (expanded: boolean) => void
+  subagents?: SubagentDisplay
   onSelect?: (modifiers: SelectModifiers) => void
   onSelectSubagent?: (toolUseId: string) => void
   onRename?: (title: string) => void
@@ -41,8 +40,7 @@ export function SessionItem({
   showGateway,
   showProject = true,
   projectIcons,
-  expanded,
-  onExpandedChange,
+  subagents = 'active',
   onSelect,
   onSelectSubagent,
   onRename,
@@ -53,12 +51,6 @@ export function SessionItem({
   className,
 }: SessionItemProps) {
   const { info } = row
-  const [ownExpanded, setOwnExpanded] = useState(false)
-  const open = expanded ?? ownExpanded
-  const setOpen = (next: boolean) => {
-    setOwnExpanded(next)
-    onExpandedChange?.(next)
-  }
   const [ownEditing, setOwnEditing] = useState(false)
   const isEditing = editing ?? ownEditing
   const setEditing = (next: boolean) => {
@@ -98,7 +90,7 @@ export function SessionItem({
   for (const extra of extras) {
     parts.push(<span key={extra}>{extra}</span>)
   }
-  const steps = sessionSteps(info, (toolUseId) => (onSelectSubagent ? onSelectSubagent(toolUseId) : onSelect?.(NO_MODIFIERS)))
+  const steps = sessionSteps(info, (toolUseId) => (onSelectSubagent ? onSelectSubagent(toolUseId) : onSelect?.(NO_MODIFIERS)), subagents)
   const holdsOpenAgent = steps.some((s) => s.key === activeStepKey)
 
   return (
@@ -195,20 +187,11 @@ export function SessionItem({
             {formatRelativeTime(info.lastActivityAt ?? info.createdAt)}
           </span>
           <span className="min-w-0 flex-1" />
-          {steps.length > 0 ? (
-            <StepToggle
-              expanded={open}
-              running={runningSteps(steps)}
-              total={steps.length}
-              noun={steps[0]!.noun}
-              onToggle={() => setOpen(!open)}
-            />
-          ) : null}
           {actions}
         </div>
       </div>
 
-      {open && steps.length > 0 ? (
+      {steps.length > 0 ? (
         <div className="flex flex-col">
           {steps.map((step: Step) => (
             <StepRow key={step.key} step={step} active={step.key === activeStepKey} onSelect={step.onSelect} />

package/src/components/agent/SessionPanel.tsx

@@ -28,6 +28,7 @@ import {
   useClaudeSession,
   useDraft,
   useHostFileSearch,
+  usePeerSessions,
   useProfileUsage,
   useToolCallHost,
   type ClientToolHandler,
@@ -133,6 +134,9 @@ export interface SessionPanelProps {
   scrubber?: boolean
   // Bookmarked transcript item ids - the host owns membership and persistence.
   bookmarks?: readonly string[]
+  // `#` mentions of the other sessions on this gateway. On by default; an embedder whose people
+  // should not learn that the other sessions exist turns it off.
+  peerMentions?: boolean
   onToggleBookmark?: (itemId: string) => void
   // Where a file link in the transcript goes. Without it, such a link stays an ordinary anchor.
   onOpenFile?: FileLinkOpener
@@ -226,6 +230,7 @@ export function SessionPanel({
   terminalMetrics,
   scrubber = false,
   bookmarks,
+  peerMentions = true,
   onToggleBookmark,
   reveal,
   subagents,
@@ -499,6 +504,9 @@ export function SessionPanel({
     engine: state.engine,
   })
   const hostFiles = useHostFileSearch(client, state.cwd)
+  // Read here rather than taken as a prop, the way file search is: every embedding that has a
+  // gateway has the sessions list, and a host that has to wire it would be a host that forgets to.
+  const peers = usePeerSessions(client, sessionId, peerMentions)
   const draft = useDraft(client, sessionId)
   // Stable identity: an inline arrow here would bust the Composer's `triggers`
   // memo on every streaming re-render, and with it every prompt-area callback
@@ -699,6 +707,7 @@ export function SessionPanel({
                       fileUrl={sessionId ? (path) => client.sessionFileUrl(sessionId, path) : undefined}
                       attachmentUrl={sessionId ? (id) => client.attachmentUrl(sessionId, id) : undefined}
                       canBrowseFiles={hostFiles.available}
+                      sessionNames={peers.names}
                       hostImage={hostImage}
                       variant={transcriptVariant}
                       density={transcriptDensity}
@@ -803,6 +812,7 @@ export function SessionPanel({
                         attachments={attachments}
                         draft={draft}
                         onSearchFiles={hostFiles.available ? searchComposerFiles : undefined}
+                        peers={peers.peers}
                         onShellCommand={shell ? runShell : undefined}
                         layout={controlsExternal ? 'inline' : 'stacked'}
                         toolbar={controlsExternal ? undefined : sessionControls}

package/src/components/agent/SessionSteps.tsx

@@ -1,6 +1,6 @@
-import { ArrowRight, Check, ChevronDown, ChevronRight, CircleAlert } from 'lucide-react'
-import { isAgentRecord, subagentLabel } from '@workerdeck/protocol'
-import type { SessionInfo, SubagentInfo } from '@workerdeck/protocol'
+import { ArrowRight, Check, CircleAlert } from 'lucide-react'
+import { isAgentRecord, subagentLabel, visibleSubagents } from '@workerdeck/protocol'
+import type { SessionInfo, SubagentDisplay, SubagentInfo } from '@workerdeck/protocol'
 import { Spinner } from '../ui/Spinner.tsx'
 import { cn } from '../../lib/utils.ts'
 
@@ -14,16 +14,18 @@ export type Step = {
   onSelect: () => void
 }
 
-export function sessionSteps(info: SessionInfo, onSelect: (toolUseId: string) => void): Step[] {
-  return (info.subagents ?? []).filter(isAgentRecord).map((sub) => ({
-    key: sub.toolUseId,
-    label: subagentLabel(sub),
-    noun: 'agent',
-    state: stepState(sub.status),
-    detail: sub.toolCount > 0 ? String(sub.toolCount) : undefined,
-    title: `${subagentLabel(sub)} · ${sub.toolCount} tool${sub.toolCount === 1 ? '' : 's'}`,
-    onSelect: () => onSelect(sub.toolUseId),
-  }))
+export function sessionSteps(info: SessionInfo, onSelect: (toolUseId: string) => void, show: SubagentDisplay = 'all'): Step[] {
+  return visibleSubagents(info, show)
+    .filter(isAgentRecord)
+    .map((sub) => ({
+      key: sub.toolUseId,
+      label: subagentLabel(sub),
+      noun: 'agent',
+      state: stepState(sub.status),
+      detail: sub.toolCount > 0 ? String(sub.toolCount) : undefined,
+      title: `${subagentLabel(sub)} · ${sub.toolCount} tool${sub.toolCount === 1 ? '' : 's'}`,
+      onSelect: () => onSelect(sub.toolUseId),
+    }))
 }
 
 function stepState(status: SubagentInfo['status']): Step['state'] {
@@ -40,48 +42,6 @@ function stepState(status: SubagentInfo['status']): Step['state'] {
   }
 }
 
-export function runningSteps(steps: readonly Step[]): number {
-  return steps.filter((s) => s.state === 'running').length
-}
-
-export function StepToggle({
-  expanded,
-  running,
-  total,
-  noun,
-  onToggle,
-}: {
-  expanded: boolean
-  running: number
-  total: number
-  noun: string
-  onToggle: () => void
-}) {
-  const label = running > 0 && running < total ? `${running}/${total}` : String(total)
-  const words = running > 0 && running < total ? `${running} of ${total} ${noun}s running` : `${total} ${noun}${total === 1 ? '' : 's'}`
-  const Chevron = expanded ? ChevronDown : ChevronRight
-  return (
-    <button
-      type="button"
-      aria-expanded={expanded}
-      aria-label={`${expanded ? 'Hide' : 'Show'} ${words}`}
-      title={`${expanded ? 'Hide' : 'Show'} ${words}`}
-      onClick={(e) => {
-        e.stopPropagation()
-        onToggle()
-      }}
-      className={cn(
-        'flex shrink-0 items-center gap-0.5 rounded-[4px] py-0.5 pr-1 pl-0.5 outline-none',
-        'text-[0.75rem] leading-3 hover:bg-row-hover hover:text-fg-2',
-        running > 0 ? 'text-info' : 'text-fg-4',
-      )}
-    >
-      <Chevron className="size-3" />
-      <span className="tabular-nums">{label}</span>
-    </button>
-  )
-}
-
 export function StepRow({ step, active = false, onSelect }: { step: Step; active?: boolean; onSelect: () => void }) {
   const body = step.state === 'failed' ? 'text-danger' : 'text-success'
   return (

package/src/components/agent/SubagentToggle.tsx

@@ -0,0 +1,69 @@
+import { Check, ChevronDown } from 'lucide-react'
+import type { SubagentDisplay } from '@workerdeck/protocol'
+import { Button } from '../ui/Button.tsx'
+import { Menu, MenuContent, MenuItem, MenuTrigger } from '../ui/Menu.tsx'
+import { cn } from '../../lib/utils.ts'
+
+export const SUBAGENT_DISPLAY_ORDER: readonly SubagentDisplay[] = ['all', 'active', 'none']
+
+export const SUBAGENT_DISPLAY_META: Record<SubagentDisplay, { label: string; hint: string }> = {
+  all: { label: 'All sub-agents', hint: 'Showing every sub-agent' },
+  active: { label: 'Hide completed', hint: 'Showing running and failed sub-agents' },
+  none: { label: 'Hide sub-agents', hint: 'Sub-agents hidden' },
+}
+
+const HIDDEN_ROW = 0.34
+
+// A session line at full strength over two child rows, and a hidden child is greyed rather than
+// struck: a sub-agent the card is not drawing has not failed, and a cross would say it had.
+export function SubagentDisplayIcon({ value, className }: { value: SubagentDisplay; className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      className={className}
+    >
+      <path d="M3 5h18" />
+      <path d="M9 12h12" opacity={value === 'none' ? HIDDEN_ROW : 1} />
+      <path d="M9 19h12" opacity={value === 'all' ? 1 : HIDDEN_ROW} />
+    </svg>
+  )
+}
+
+export type SubagentToggleProps = {
+  value: SubagentDisplay
+  onChange: (value: SubagentDisplay) => void
+  className?: string
+}
+
+// A menu rather than a press-to-cycle button: three stops are one more than a person can read off
+// a single glyph, and the caret is what promises the other two.
+export function SubagentToggle({ value, onChange, className }: SubagentToggleProps) {
+  const meta = SUBAGENT_DISPLAY_META[value]
+  return (
+    <Menu>
+      <MenuTrigger
+        render={
+          <Button variant="ghost" size="icon-sm" aria-label={`Sub-agents: ${meta.label}`} title={meta.hint} className={cn('w-9 gap-0.5', className)}>
+            <SubagentDisplayIcon value={value} className="size-4" />
+            <ChevronDown className="size-2.5 text-fg-4" />
+          </Button>
+        }
+      />
+      <MenuContent className="min-w-44">
+        {SUBAGENT_DISPLAY_ORDER.map((option) => (
+          <MenuItem key={option} onClick={() => onChange(option)}>
+            <SubagentDisplayIcon value={option} className="size-4 shrink-0 text-fg-3" />
+            <span className="flex-1">{SUBAGENT_DISPLAY_META[option].label}</span>
+            {option === value ? <Check className="size-3.5 shrink-0 text-accent" /> : null}
+          </MenuItem>
+        ))}
+      </MenuContent>
+    </Menu>
+  )
+}