@workerdeck/ui 2.11.0 → 2.12.0

package/src/components/agent/Transcript.tsx

@@ -10,7 +10,7 @@ import { subagentItems, terminalBlocks, type ToolCallItem } from '../terminal/bl
 import { taskBrief, taskBusy } from '../terminal/tool-run.ts'
 import { type TranscriptRow } from './transcript-rows.ts'
 import { TranscriptRows } from './TranscriptRows.tsx'
-import { SkillNamesProvider } from './PromptTokenText.tsx'
+import { SessionNamesProvider, SkillNamesProvider } from './PromptTokenText.tsx'
 import { TerminalSurface } from '../terminal/surface.tsx'
 import { ROW_GAP, TranscriptVariantProvider, type TranscriptDensity, type TranscriptVariant } from './transcript-variant.tsx'
 
@@ -79,6 +79,8 @@ export interface TranscriptProps {
   stickyPrompt?: boolean
   scrubber?: boolean
   bookmarks?: readonly string[]
+  // Folded peer slugs, so a `#Name` this client can name draws as a token.
+  sessionNames?: readonly string[]
   replaying?: boolean
   catchUp?: { from: number; since?: number }
   jumpToRecapRef?: RefObject<(() => void) | null>
@@ -104,6 +106,7 @@ export function Transcript({
   stickyPrompt = false,
   scrubber,
   bookmarks,
+  sessionNames,
   replaying = false,
   catchUp,
   jumpToRecapRef,
@@ -141,88 +144,96 @@ export function Transcript({
   return (
     <TranscriptVariantProvider value={variant}>
       <SkillNamesProvider names={skillNames}>
-        <Conversation className={cn(replaying && 'invisible', className)}>
-          <ConversationContent className={cn(terminal && 'gap-0 p-0')}>
-            <TerminalShell active={terminal} fontSize={fontSize} lineHeight={lineHeight} affordances={affordances}>
-              {frame ? (
-                frameTask === undefined && !replaying ? (
-                  <div className={cn(terminal ? 'term-row text-fg-4' : 'p-4 text-body-sm text-fg-4')}>
-                    This sub-agent's work is not in this transcript.
-                  </div>
-                ) : null
-              ) : items.length === 0 && state.status !== 'starting' ? (
-                emptyState !== undefined ? (
-                  emptyState
-                ) : (
-                  <SessionEmptyState
-                    cwd={state.cwd}
-                    hasCommands={!!state.commands?.length}
-                    hasSkills={!!state.skills?.some((s) => s.enabled)}
-                    canBrowseFiles={canBrowseFiles}
-                  />
-                )
-              ) : null}
-              {frame && frameTask === undefined && !replaying ? null : (
-                <TranscriptRows
-                  rows={rows}
-                  boundary={boundary}
-                  since={catchUp?.since}
-                  terminal={terminal}
-                  replaying={replaying}
-                  stickyPrompt={!frame && stickyPrompt}
-                  gap={gap}
-                  fontSize={fontSize}
-                  lineHeight={lineHeight}
-                  items={items}
-                  pendingApprovals={state.pendingApprovals}
-                  scrubber={scrubber}
-                  bookmarks={frame ? undefined : bookmarks}
-                  affordances={affordances}
-                  fileUrl={fileUrl}
-                  attachmentUrl={attachmentUrl}
-                  hostImage={hostImage}
-                  jumpToRecapRef={jumpToRecapRef}
-                  repinRef={repinRef}
-                  reveal={frame ? undefined : reveal}
-                  frameParentId={frame?.parentToolUseId}
-                  onOpenSubagent={frame ? undefined : onOpenSubagent}
-                />
-              )}
-              {(frame ? frameTask !== undefined && taskBusy(frameTask, items) : showLoader(state)) ? (
-                terminal ? (
-                  <>
-                    {state.items.length > 0 ? <div className="term-blank" aria-hidden /> : null}
-                    <WorkingRow
-                      label={state.status === 'starting' ? 'Starting…' : 'Working…'}
-                      startedAt={runStartedAt}
-                      tokens={state.contextUsage?.totalTokens}
+        <SessionNamesProvider names={sessionNames}>
+          <Conversation className={cn(replaying && 'invisible', className)}>
+            <ConversationContent className={cn(terminal && 'gap-0 p-0')}>
+              <TerminalShell active={terminal} fontSize={fontSize} lineHeight={lineHeight} affordances={affordances}>
+                {frame ? (
+                  frameTask === undefined && !replaying ? (
+                    <div className={cn(terminal ? 'term-row text-fg-4' : 'p-4 text-body-sm text-fg-4')}>
+                      This sub-agent's work is not in this transcript.
+                    </div>
+                  ) : null
+                ) : items.length === 0 && state.status !== 'starting' ? (
+                  emptyState !== undefined ? (
+                    emptyState
+                  ) : (
+                    <SessionEmptyState
+                      cwd={state.cwd}
+                      hasCommands={!!state.commands?.length}
+                      hasSkills={!!state.skills?.some((s) => s.enabled)}
+                      canBrowseFiles={canBrowseFiles}
                     />
-                  </>
-                ) : (
-                  <Loader label={state.status === 'starting' ? 'Starting session…' : undefined} />
-                )
-              ) : null}
-            </TerminalShell>
-          </ConversationContent>
-          <ConversationScrollButton />
-          {replaying ? (
-            <div
-              data-slot="transcript-hold"
-              aria-hidden
-              className="wd-hold-appear visible pointer-events-none absolute inset-0 overflow-hidden"
-            >
-              <div className={cn('mx-auto w-full max-w-[var(--wd-transcript-max-width)]', !terminal && 'px-4 py-4')}>
-                {terminal ? (
-                  <TerminalSurface fontSize={fontSize} lineHeight={lineHeight} affordances={false} bleed="1ch" className="term-transcript">
-                    <WorkingRow label="Loading…" />
-                  </TerminalSurface>
-                ) : (
-                  <Loader label="Loading session…" />
+                  )
+                ) : null}
+                {frame && frameTask === undefined && !replaying ? null : (
+                  <TranscriptRows
+                    rows={rows}
+                    boundary={boundary}
+                    since={catchUp?.since}
+                    terminal={terminal}
+                    replaying={replaying}
+                    stickyPrompt={!frame && stickyPrompt}
+                    gap={gap}
+                    fontSize={fontSize}
+                    lineHeight={lineHeight}
+                    items={items}
+                    pendingApprovals={state.pendingApprovals}
+                    scrubber={scrubber}
+                    bookmarks={frame ? undefined : bookmarks}
+                    affordances={affordances}
+                    fileUrl={fileUrl}
+                    attachmentUrl={attachmentUrl}
+                    hostImage={hostImage}
+                    jumpToRecapRef={jumpToRecapRef}
+                    repinRef={repinRef}
+                    reveal={frame ? undefined : reveal}
+                    frameParentId={frame?.parentToolUseId}
+                    onOpenSubagent={frame ? undefined : onOpenSubagent}
+                  />
                 )}
+                {(frame ? frameTask !== undefined && taskBusy(frameTask, items) : showLoader(state)) ? (
+                  terminal ? (
+                    <>
+                      {state.items.length > 0 ? <div className="term-blank" aria-hidden /> : null}
+                      <WorkingRow
+                        label={state.status === 'starting' ? 'Starting…' : 'Working…'}
+                        startedAt={runStartedAt}
+                        tokens={state.contextUsage?.totalTokens}
+                      />
+                    </>
+                  ) : (
+                    <Loader label={state.status === 'starting' ? 'Starting session…' : undefined} />
+                  )
+                ) : null}
+              </TerminalShell>
+            </ConversationContent>
+            <ConversationScrollButton />
+            {replaying ? (
+              <div
+                data-slot="transcript-hold"
+                aria-hidden
+                className="wd-hold-appear visible pointer-events-none absolute inset-0 overflow-hidden"
+              >
+                <div className={cn('mx-auto w-full max-w-[var(--wd-transcript-max-width)]', !terminal && 'px-4 py-4')}>
+                  {terminal ? (
+                    <TerminalSurface
+                      fontSize={fontSize}
+                      lineHeight={lineHeight}
+                      affordances={false}
+                      bleed="1ch"
+                      className="term-transcript"
+                    >
+                      <WorkingRow label="Loading…" />
+                    </TerminalSurface>
+                  ) : (
+                    <Loader label="Loading session…" />
+                  )}
+                </div>
               </div>
-            </div>
-          ) : null}
-        </Conversation>
+            ) : null}
+          </Conversation>
+        </SessionNamesProvider>
       </SkillNamesProvider>
     </TranscriptVariantProvider>
   )

package/src/components/agent/composer-commands.ts

@@ -109,6 +109,24 @@ export function rankComposerRows(query: string, rows: readonly ComposerRow[]): C
   return scored.map(({ row }) => row)
 }
 
+// The `#` picker's ranking. Peers arrive most-recently-active first, and an empty query keeps that
+// order: which session moved last is the most useful thing the list can say before anything is typed.
+export function rankPeerSessions<T extends { slug: string; label: string }>(query: string, peers: readonly T[]): T[] {
+  const needle = query.trim()
+  if (!needle) {
+    return [...peers]
+  }
+  const scored: Array<{ score: number; index: number; peer: T }> = []
+  peers.forEach((peer, index) => {
+    const score = matchScore(needle, [peer.slug, peer.label, ...peer.slug.split('-')])
+    if (score > 0) {
+      scored.push({ score, index, peer })
+    }
+  })
+  scored.sort((a, b) => b.score - a.score || a.index - b.index)
+  return scored.map(({ peer }) => peer)
+}
+
 export function matchClientCommand(text: string, commands: readonly ClientCommand[]): { command: ClientCommand; args: string } | undefined {
   const match = /^\/([\w:-]+)[ \t]*([\s\S]*)$/.exec(text.trim())
   if (!match) {

package/src/index.ts

@@ -94,6 +94,7 @@ export { Composer, type ComposerFileMatch, type ComposerHandle, type ComposerPro
 export {
   mergeComposerRows,
   rankComposerRows,
+  rankPeerSessions,
   matchClientCommand,
   skillPrompt,
   type ClientCommand,
@@ -124,11 +125,18 @@ export { SessionBrowser, rowShapeClass, type SessionBrowserProps } from './compo
 export { SessionItem, type SelectModifiers, type SessionItemProps } from './components/agent/SessionItem.tsx'
 export { SessionStatusIcon } from './components/agent/SessionStatusIcon.tsx'
 export { EngineIcon, engineMark, vendorMarkClass, vendorTextClass } from './components/agent/EngineIcon.tsx'
-export { type Step, StepRow, StepToggle, runningSteps, sessionSteps } from './components/agent/SessionSteps.tsx'
+export { type Step, StepRow, sessionSteps } from './components/agent/SessionSteps.tsx'
+export {
+  SUBAGENT_DISPLAY_META,
+  SUBAGENT_DISPLAY_ORDER,
+  SubagentDisplayIcon,
+  SubagentToggle,
+  type SubagentToggleProps,
+} from './components/agent/SubagentToggle.tsx'
 export { SubagentStrip } from './components/agent/SubagentStrip.tsx'
 export { ProjectIcon } from './components/agent/ProjectIcon.tsx'
 export { SessionEmptyState, type SessionEmptyStateProps } from './components/agent/SessionEmptyState.tsx'
-export { PromptTokenText } from './components/agent/PromptTokenText.tsx'
+export { PromptTokenText, SessionNamesProvider, SkillNamesProvider } from './components/agent/PromptTokenText.tsx'
 export { STATUS_META } from './components/agent/status.ts'
 export { ContextRing } from './components/agent/ContextRing.tsx'
 

package/src/styles/terminal.css

@@ -699,10 +699,18 @@ button.term-link {
 /* The head's own strip: the full lane, out of flow, so the head needs no
    footprint-cancelling margin - sticky confinement clamps the margin box, and
    a negative margin shrinks it to nothing, letting the head overshoot the
-   lane's end by its own height (two pinned prompts on screen at once). */
+   lane's end by its own height (two pinned prompts on screen at once).
+
+   The z-index is what makes the head's ground actually cover: the row it
+   overlays is a later sibling and carries `term-hoverable`, which is
+   `position: relative` for the row actions, so at `z-index: auto` the row's
+   text painted OVER the pinned head and the two read as one line of overlap.
+   Raising the strip - inside the lane's own stacking context, so it still
+   sits under nothing else - puts it back above the row it is there to hide. */
 [data-terminal] [data-sticky-lane] > [data-sticky-headlane] {
   position: absolute;
   inset: 0;
+  z-index: 1;
   pointer-events: none;
 }