@workerdeck/ui 2.10.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/TranscriptItemView.tsx

@@ -10,6 +10,7 @@ import { Response } from './Response.tsx'
 import { ToolCallCard } from './ToolCallCard.tsx'
 import { Row } from '../terminal/row.tsx'
 import { TerminalItemView } from '../terminal/TerminalTranscript.tsx'
+import { peerLabel } from '../terminal/items.tsx'
 
 function TurnResultRow({ item }: { item: Extract<TranscriptItem, { kind: 'turn_result' }> }) {
   return (
@@ -69,6 +70,7 @@ export function TranscriptItemView({
     case 'user': {
       return (
         <Message from="user">
+          {item.origin ? <div className="wd-peer-origin text-xs text-muted-foreground">{peerLabel(item.origin)}</div> : null}
           {item.attachments?.length ? <SentAttachments attachments={item.attachments} attachmentUrl={attachmentUrl} /> : null}
           {item.text ? (
             <MessageContent>

package/src/components/agent/TranscriptRows.tsx

@@ -6,14 +6,15 @@ import type { PermissionRequest } from '@workerdeck/protocol'
 import type { TranscriptItem } from '@workerdeck/react'
 import { cn } from '../../lib/utils.ts'
 import { resolveAffordances, type TerminalAffordances } from '../terminal/affordances.tsx'
-import { ToolRunRow } from '../terminal/items.tsx'
+import { RunRow } from '../terminal/items.tsx'
 import { parentOf } from '../terminal/blocks.ts'
 import { briefPx, estimateBlockPx } from '../terminal/height.ts'
+import { PeerNamesProvider } from '../terminal/peer-names.tsx'
 import { TerminalScrubber } from '../terminal/scrubber.tsx'
 import { Scrubber } from './Scrubber.tsx'
 import { gapBefore, positionInRow, rowIndexForItem, type TranscriptRow } from './transcript-rows.ts'
 import { useHeightEpoch } from './use-height-epoch.ts'
-import { useTranscriptJumps } from './use-transcript-jumps.ts'
+import { absorbScrollerResize, useTranscriptJumps } from './use-transcript-jumps.ts'
 import { BriefRow, TaskRow } from '../terminal/TerminalTranscript.tsx'
 import { RecapRow, TranscriptItemView } from './TranscriptItemView.tsx'
 
@@ -167,9 +168,10 @@ export function TranscriptRows({
       if (height === last) {
         return
       }
+      const difference = height - last
       last = height
       if (stick.state.isAtBottom) {
-        void stick.scrollToBottom('instant')
+        absorbScrollerResize(stick, difference)
       }
     })
     observer.observe(scrollElement)
@@ -318,64 +320,66 @@ export function TranscriptRows({
 
   return (
     <div ref={rowsRef} data-slot="transcript-rows" className="relative w-full" style={{ height: virtualizer.getTotalSize() }}>
-      {virtualizer.getVirtualItems().map((virtualRow) => {
-        const row = rows[virtualRow.index]
-        const gapClass = virtualRow.index > 0 && (!terminal || gapBefore(rows, virtualRow.index)) ? gap.className : undefined
-        const content =
-          'run' in row ? (
-            <div className={cn(read(boundary, row.index) && 'opacity-45')}>
-              <ToolRunRow items={row.run} />
-            </div>
-          ) : 'item' in row ? (
-            <div className={cn(read(boundary, row.index) && 'opacity-45', nestedClass(row.item, frameParentId))}>
-              <TranscriptItemView
-                item={row.item}
-                fileUrl={fileUrl}
-                attachmentUrl={attachmentUrl}
-                hostImage={hostImage}
+      <PeerNamesProvider items={items}>
+        {virtualizer.getVirtualItems().map((virtualRow) => {
+          const row = rows[virtualRow.index]
+          const gapClass = virtualRow.index > 0 && (!terminal || gapBefore(rows, virtualRow.index)) ? gap.className : undefined
+          const content =
+            'run' in row ? (
+              <div className={cn(read(boundary, row.index) && 'opacity-45')}>
+                <RunRow items={row.run} />
+              </div>
+            ) : 'item' in row ? (
+              <div className={cn(read(boundary, row.index) && 'opacity-45', nestedClass(row.item, frameParentId))}>
+                <TranscriptItemView
+                  item={row.item}
+                  fileUrl={fileUrl}
+                  attachmentUrl={attachmentUrl}
+                  hostImage={hostImage}
+                  terminal={terminal}
+                />
+              </div>
+            ) : 'text' in row && row.key === 'brief' ? (
+              <BriefRow text={row.text} terminal={terminal} />
+            ) : 'line' in row ? (
+              <RecapRow line={row.line} since={since} terminal={terminal} />
+            ) : (
+              <div className={cn(read(boundary, row.index) && 'opacity-45')}>
+                <TaskRow block={row} fileUrl={fileUrl} onOpenSubagent={onOpenSubagent} />
+              </div>
+            )
+          if (stickyPrompt && 'item' in row && row.item.kind === 'user' && parentOf(row.item) === undefined) {
+            const next = promptRows.find((index) => index > virtualRow.index)
+            const laneEnd = next === undefined ? virtualizer.getTotalSize() : (measurements[next]?.start ?? virtualRow.start)
+            return (
+              <StickyPromptLane
+                key={row.key}
+                top={virtualRow.start}
+                height={Math.max(laneEnd - virtualRow.start, 0)}
+                gapClass={gapClass}
+                gapPx={gap.px}
                 terminal={terminal}
+                scrollRoot={scrollElement}
+                index={virtualRow.index}
+                measureRef={virtualizer.measureElement}
+                head={terminal ? content : promptHeadText(row.item)}
+                content={content}
               />
-            </div>
-          ) : 'text' in row && row.key === 'brief' ? (
-            <BriefRow text={row.text} terminal={terminal} />
-          ) : 'line' in row ? (
-            <RecapRow line={row.line} since={since} terminal={terminal} />
-          ) : (
-            <div className={cn(read(boundary, row.index) && 'opacity-45')}>
-              <TaskRow block={row} fileUrl={fileUrl} onOpenSubagent={onOpenSubagent} />
-            </div>
-          )
-        if (stickyPrompt && 'item' in row && row.item.kind === 'user' && parentOf(row.item) === undefined) {
-          const next = promptRows.find((index) => index > virtualRow.index)
-          const laneEnd = next === undefined ? virtualizer.getTotalSize() : (measurements[next]?.start ?? virtualRow.start)
+            )
+          }
           return (
-            <StickyPromptLane
+            <div
               key={row.key}
-              top={virtualRow.start}
-              height={Math.max(laneEnd - virtualRow.start, 0)}
-              gapClass={gapClass}
-              gapPx={gap.px}
-              terminal={terminal}
-              scrollRoot={scrollElement}
-              index={virtualRow.index}
-              measureRef={virtualizer.measureElement}
-              head={terminal ? content : promptHeadText(row.item)}
-              content={content}
-            />
+              ref={virtualizer.measureElement}
+              data-index={virtualRow.index}
+              className={cn('absolute inset-x-0 top-0', gapClass)}
+              style={{ transform: `translateY(${virtualRow.start}px)` }}
+            >
+              {content}
+            </div>
           )
-        }
-        return (
-          <div
-            key={row.key}
-            ref={virtualizer.measureElement}
-            data-index={virtualRow.index}
-            className={cn('absolute inset-x-0 top-0', gapClass)}
-            style={{ transform: `translateY(${virtualRow.start}px)` }}
-          >
-            {content}
-          </div>
-        )
-      })}
+        })}
+      </PeerNamesProvider>
       {scrubber && scrollElement?.parentElement
         ? createPortal(
             terminal ? (

package/src/components/agent/UsageDialog.tsx

@@ -1,5 +1,5 @@
-import type { ByModel, ProfileEngine, ProfileSpend, UsageWindowRow } from '@workerdeck/protocol'
-import { PRICING_NOTE } from '@workerdeck/protocol'
+import type { ByModel, PricingTable, ProfileEngine, ProfileSpend, UsageWindowRow } from '@workerdeck/protocol'
+import { PRICING_NOTE, pricingAgeNote } from '@workerdeck/protocol'
 import { Badge } from '../ui/Badge.tsx'
 import { Dialog, DialogBody, DialogContent, DialogHeader } from '../ui/Dialog.tsx'
 import { formatAgoPrecise, formatCost, formatTokens } from '../../lib/format.ts'
@@ -13,6 +13,7 @@ export interface UsageDialogProps {
   totalCostUsd?: number
   costUsd?: number
   usageByModel?: ByModel
+  pricing?: PricingTable
   spend?: ProfileSpend
   updatedAt?: number
   open: boolean
@@ -20,6 +21,10 @@ export interface UsageDialogProps {
   className?: string
 }
 
+function engineLabel(engine: ProfileEngine): string {
+  return engine === 'claude' ? 'Claude Code' : engine
+}
+
 function Line({ label, value, tone }: { label: string; value: string; tone?: 'muted' }) {
   return (
     <div className="flex items-baseline justify-between gap-4">
@@ -62,9 +67,15 @@ function CostEvidence({ cost, engine }: { cost: SessionCost; engine: ProfileEngi
           rather than an estimate.
         </p>
       ) : null}
+      {cost.unknownBasisModels.length > 0 ? (
+        <p className="text-label text-warning">
+          {engineLabel(engine)} matched no rate table of its own to {cost.unknownBasisModels.join(', ')}, so the figure it reports for those
+          tokens is a guess rather than a rate.
+        </p>
+      ) : null}
       {cost.gapUsd !== undefined ? (
         <p className="text-label text-fg-4">
-          {engine === 'claude' ? 'Claude Code' : engine} reports {formatCost(cost.reportedUsd)} for the same tokens.
+          {engineLabel(engine)} reports {formatCost(cost.reportedUsd)} for the same tokens.
         </p>
       ) : null}
     </div>
@@ -98,6 +109,7 @@ export function UsageDialog({
   totalCostUsd,
   costUsd,
   usageByModel,
+  pricing,
   spend,
   updatedAt,
   open,
@@ -105,13 +117,14 @@ export function UsageDialog({
   className,
 }: UsageDialogProps) {
   const now = useMinuteClock(open)
-  const cost = sessionCost({ costUsd, totalCostUsd, usageByModel })
+  const cost = sessionCost({ costUsd, totalCostUsd, usageByModel, pricing })
+  const ageNote = pricingAgeNote(now)
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className={className}>
         <DialogHeader
           title="Usage"
-          description={engine === 'claude' ? 'Claude Code' : engine}
+          description={engineLabel(engine)}
           actions={
             subscriptionType ? (
               <Badge variant="accent" className="mt-0.5 shrink-0 capitalize">
@@ -134,7 +147,7 @@ export function UsageDialog({
             <CostEvidence cost={cost} engine={engine} />
           </div>
           {spend ? <ProfileSpendSection spend={spend} /> : null}
-          <p className="mt-3 text-label text-fg-4">{PRICING_NOTE}</p>
+          <p className="mt-3 text-label text-fg-4">{ageNote ? `${PRICING_NOTE} ${ageNote}` : PRICING_NOTE}</p>
           {updatedAt ? <p className="mt-2 text-label text-fg-4">Updated {formatAgoPrecise(updatedAt, now)}</p> : null}
         </DialogBody>
       </DialogContent>

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/components/agent/pulse.tsx

@@ -1,9 +1,57 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useSyncExternalStore } from 'react'
 
-export const PULSE_FRAMES = ['⋄', '◇', '◈', '◆'] as const
-export const PULSE_MS = 150
+export const PULSE_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'] as const
+export const PULSE_MS = 90
 
-export const PULSE_REST = PULSE_FRAMES[PULSE_FRAMES.length - 1]
+export const PULSE_REST = '⠿'
+
+const listeners = new Set<() => void>()
+let ticker: ReturnType<typeof setInterval> | undefined
+let current = PULSE_REST
+
+export function pulseFrameAt(now: number): string {
+  return PULSE_FRAMES[Math.floor(now / PULSE_MS) % PULSE_FRAMES.length]!
+}
+
+function tick(): void {
+  const next = pulseFrameAt(Date.now())
+  if (next === current) {
+    return
+  }
+  current = next
+  for (const listener of listeners) {
+    listener()
+  }
+}
+
+function subscribe(listener: () => void): () => void {
+  listeners.add(listener)
+  if (ticker === undefined) {
+    current = pulseFrameAt(Date.now())
+    ticker = setInterval(tick, PULSE_MS)
+  }
+  return () => {
+    listeners.delete(listener)
+    if (listeners.size === 0 && ticker !== undefined) {
+      clearInterval(ticker)
+      ticker = undefined
+    }
+  }
+}
+
+function subscribeRest(): () => void {
+  return unsubscribeRest
+}
+
+function unsubscribeRest(): void {}
+
+function readFrame(): string {
+  return current
+}
+
+function readRest(): string {
+  return PULSE_REST
+}
 
 export function usePrefersReducedMotion(): boolean {
   const [reduced, setReduced] = useState(false)
@@ -23,16 +71,5 @@ export function usePrefersReducedMotion(): boolean {
 export function usePulse(animated: boolean): string {
   const reduced = usePrefersReducedMotion()
   const running = animated && !reduced
-  const [frame, setFrame] = useState(0)
-  useEffect(() => {
-    if (!running) {
-      return
-    }
-    const timer = setInterval(() => setFrame((f) => f + 1), PULSE_MS)
-    return () => clearInterval(timer)
-  }, [running])
-  if (!running) {
-    return PULSE_REST
-  }
-  return PULSE_FRAMES[frame % PULSE_FRAMES.length]!
+  return useSyncExternalStore(running ? subscribe : subscribeRest, running ? readFrame : readRest, readRest)
 }

package/src/components/agent/use-transcript-jumps.ts

@@ -26,6 +26,31 @@ export function repinToBottom(stick: RepinTarget): void {
   state.scrollTop = state.calculatedTargetScrollTop
 }
 
+// A scroller whose height changes clamps `scrollTop`, and the browser reports that clamp as an
+// ordinary scroll event, which the library reads as scroll-up intent and answers by escaping the
+// bottom lock. Its guard against exactly that, `resizeDifference`, is set only by the observer on
+// the *content*, so a composer collapsing after send breaks the lock while the view still sits at
+// the bottom, and the turn's later output streams past unfollowed (GOTCHAS "A scroller resize
+// escapes the bottom lock"). Set the flag ourselves, on the library's schedule. A live send re-pin
+// owns `state.animation` and `scrollToBottom` would clear it, dropping the `ignoreEscapes` hold
+// into the momentum tail, so press that scroll by hand instead.
+export function absorbScrollerResize(stick: RepinTarget, difference: number): void {
+  const { state } = stick
+  state.resizeDifference = difference
+  requestAnimationFrame(() => {
+    setTimeout(() => {
+      if (state.resizeDifference === difference) {
+        state.resizeDifference = 0
+      }
+    }, 1)
+  })
+  if (state.animation?.ignoreEscapes) {
+    state.scrollTop = state.calculatedTargetScrollTop
+    return
+  }
+  void stick.scrollToBottom('instant')
+}
+
 export function useTranscriptJumps(options: {
   rows: TranscriptRow[]
   terminal: boolean