@workerdeck/ui 2.15.0 → 3.1.0

package/src/components/agent/Response.tsx

@@ -1,6 +1,11 @@
 import { memo } from 'react'
-import { Streamdown } from 'streamdown'
+import { Streamdown, type Components } from 'streamdown'
 import { cn } from '../../lib/utils.ts'
+import { MARKDOWN_REHYPE_PLUGINS, MarkdownImage } from './markdown-image.tsx'
+
+const COMPONENTS: Components = {
+  img: ({ src, alt }) => <MarkdownImage src={src} alt={alt} />,
+}
 
 export interface ResponseProps {
   children: string
@@ -16,6 +21,8 @@ export const Response = memo(
         parseIncompleteMarkdown={streaming}
         shikiTheme={['github-light', 'github-dark']}
         linkSafety={{ enabled: false }}
+        components={COMPONENTS}
+        rehypePlugins={MARKDOWN_REHYPE_PLUGINS}
         className={cn('size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0', className)}
       >
         {children}

package/src/components/agent/Scrubber.tsx

@@ -1,19 +1,17 @@
-import { useEffect, useLayoutEffect, useMemo, useRef, useState, type ReactNode } from 'react'
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import type { PermissionRequest } from '@workerdeck/protocol'
 import type { TranscriptItem } from '@workerdeck/react'
-import { toolInputPreview } from '../../lib/format.ts'
 import { cn } from '../../lib/utils.ts'
 import {
   approvalCluster,
   buildMarks,
   clusterMarks,
-  doneLine,
-  excerpt,
-  KIND_NAME,
   nearestMember,
+  proportionalPlacement,
   type Cluster,
   type Mark,
 } from './scrubber-marks.ts'
+import { CARD_PEEK, peekContent } from './scrubber-peek.tsx'
 
 export interface ScrubberProps {
   items: readonly TranscriptItem[]
@@ -26,74 +24,6 @@ export interface ScrubberProps {
   className?: string
 }
 
-function peekContent(
-  cluster: Cluster,
-  first: Mark | undefined,
-  items: readonly TranscriptItem[],
-  pendingApprovals: readonly PermissionRequest[],
-): ReactNode {
-  const more = cluster.marks.length > 1 ? ` · ${cluster.marks.length} marks` : ''
-  let body: ReactNode = null
-  if (cluster.kind === 'approval') {
-    const request = pendingApprovals[0]
-    body = request ? (
-      <>
-        <div>{request.title ?? 'Permission required'}</div>
-        <div className="wd-scrub-ex" data-tone="muted">
-          {`${request.displayName ?? request.toolName}(${toolInputPreview(request.input)})`}
-        </div>
-      </>
-    ) : null
-  } else if (first && first.kind !== 'recap') {
-    const item = items[first.itemIndex]
-    if (first.kind === 'turn' || first.kind === 'turnFailed') {
-      const turn = first.turnIndex === undefined ? undefined : items[first.turnIndex]
-      body = (
-        <>
-          {item?.kind === 'assistant_text' ? <div className="wd-scrub-ex">{item.text}</div> : null}
-          {turn?.kind === 'turn_result' ? (
-            <>
-              <div data-tone={turn.isError ? 'danger' : 'muted'}>{doneLine(turn)}</div>
-              {turn.errors?.map((message, index) => (
-                <div key={index} data-tone="danger">
-                  {message}
-                </div>
-              ))}
-            </>
-          ) : null}
-        </>
-      )
-    } else if (item) {
-      const failure =
-        first.kind === 'toolFailed' && item.kind === 'tool_call'
-          ? item.result?.text.split('\n').find((line) => line.trim() !== '')
-          : undefined
-      body = (
-        <>
-          <div className="wd-scrub-ex" data-tone={first.kind === 'error' || first.kind === 'toolFailed' ? 'danger' : undefined}>
-            {first.kind === 'user' ? <span data-tone="muted">{'❯ '}</span> : null}
-            {excerpt(item)}
-          </div>
-          {failure ? (
-            <div className="wd-scrub-ex" data-tone="danger">
-              {failure}
-            </div>
-          ) : null}
-        </>
-      )
-    }
-  }
-  return (
-    <>
-      <div data-tone="muted">
-        {KIND_NAME[first?.kind ?? cluster.kind]}
-        {more}
-      </div>
-      {body}
-    </>
-  )
-}
-
 export function Scrubber({
   items,
   pendingApprovals,
@@ -138,7 +68,8 @@ export function Scrubber({
     if (railH <= 0) {
       return []
     }
-    const built = clusterMarks(buildMarks(items, { frameParentId, bookmarks, recapItemIndex }), railH, items.length)
+    const marks = buildMarks(items, { frameParentId, bookmarks, recapItemIndex })
+    const built = clusterMarks(marks, proportionalPlacement(railH, items.length))
     if (pendingApprovals.length > 0) {
       built.push(approvalCluster(railH))
     }
@@ -191,7 +122,7 @@ export function Scrubber({
       ))}
       {peek ? (
         <div ref={peekRef} className="wd-scrub-peek" style={{ top: peek.y }}>
-          {peekContent(peek.cluster, peek.mark, items, pendingApprovals)}
+          {peekContent({ cluster: peek.cluster, first: peek.mark, items, pendingApprovals }, CARD_PEEK)}
         </div>
       ) : null}
     </div>

package/src/components/agent/SessionBrowser.tsx

@@ -1,24 +1,14 @@
 import { useMemo, useState } from 'react'
 import type { ReactNode } from 'react'
-import { Eraser, Layers, Pencil, Search, SearchX, Trash2, X } from 'lucide-react'
-import {
-  STATE_LABELS,
-  STATE_ORDER,
-  adaptersOf,
-  clearFilters,
-  filterRows,
-  groupRows,
-  hasFacetFilter,
-  projectsOf,
-  subsetSummary,
-} from '@workerdeck/protocol'
-import type { GroupBy, SessionRow, SessionState, SortBy, SubagentDisplay, ViewConfig, WorkspaceScope } from '@workerdeck/protocol'
+import { Eraser, FolderOpen, Layers, Pencil, Search, SearchX, Trash2, X } from 'lucide-react'
+import { clearFilters, filterRows, groupRows, hasFacetFilter, scopeActive, subsetSummary } from '@workerdeck/protocol'
+import type { SessionRow, SessionTask, StepDisplay, SubagentDisplay, ViewConfig, WorkspaceScope } from '@workerdeck/protocol'
 import { Button } from '../ui/Button.tsx'
 import { Empty } from '../ui/Empty.tsx'
 import { Input } from '../ui/Input.tsx'
-import { Select, SelectContent, SelectItem, SelectItemText, SelectTrigger, SelectValue } from '../ui/Select.tsx'
 import { ProjectIcon } from './ProjectIcon.tsx'
-import { SessionItem } from './SessionItem.tsx'
+import { SessionFilters } from './SessionFilters.tsx'
+import { SessionItem, type SelectModifiers } from './SessionItem.tsx'
 import { cn } from '../../lib/utils.ts'
 
 export { SessionStatusIcon } from './SessionStatusIcon.tsx'
@@ -32,15 +22,28 @@ export interface SessionBrowserProps {
   activeSubagentId?: string
   activeShellId?: string
   now?: number
-  onSelect?: (row: SessionRow) => void
+  // Overrides `activeId`, for a host whose session ids are unique only per gateway.
+  isActive?: (row: SessionRow) => boolean
+  // Replaces the pencil / eraser / trash; rename then falls back to the card's own double-click.
+  rowActions?: (row: SessionRow) => ReactNode
+  // Overrides the count of gateways among `rows` when deciding whether a card names its gateway.
+  gatewayCount?: number
+  showSubset?: boolean
+  onSelect?: (row: SessionRow, modifiers: SelectModifiers) => void
   onDelete?: (row: SessionRow) => void
   onRename?: (row: SessionRow, title: string) => void
   onClearContext?: (row: SessionRow) => void
   onSelectSubagent?: (row: SessionRow, toolUseId: string) => void
+  onSelectTask?: (row: SessionRow, task: SessionTask) => void
+  onStopTask?: (row: SessionRow, toolUseId: string) => void
   onSelectShell?: (row: SessionRow, shellId: string) => void
   onKillShell?: (row: SessionRow, shellId: string) => void
-  emptyState?: React.ReactNode
+  onShellAgentWrite?: (row: SessionRow, shellId: string, enabled: boolean) => void
+  emptyState?: ReactNode
+  // The facet controls, drawn inline. A host with a header puts `SessionFiltersButton` there instead.
   showControls?: boolean
+  showSearch?: boolean
+  autoFocusSearch?: boolean
   projectIcons?: Record<string, string>
   className?: string
 }
@@ -58,127 +61,42 @@ export function SessionBrowser({
   activeSubagentId,
   activeShellId,
   now,
+  isActive = (row) => row.info.id === activeId,
+  rowActions,
+  gatewayCount,
+  showSubset = true,
   onSelect,
   onDelete,
   onRename,
   onClearContext,
   onSelectSubagent,
+  onSelectTask,
+  onStopTask,
   onSelectShell,
   onKillShell,
+  onShellAgentWrite,
   emptyState,
   showControls = true,
+  showSearch = showControls,
+  autoFocusSearch,
   projectIcons,
   className,
 }: SessionBrowserProps) {
   const visible = useMemo(() => filterRows(rows, config, scope), [rows, config, scope])
   const groups = useMemo(() => groupRows(visible, config), [visible, config])
   const subset = subsetSummary(config, scope, visible.length, rows.length)
-  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)
-    }
-    return [...seen].map(([id, name]) => ({ id, name }))
-  }, [rows])
+  const rowGateways = useMemo(() => new Set(rows.map((row) => row.hostId)).size, [rows])
 
   const set = (patch: Partial<ViewConfig>) => onConfigChange({ ...config, ...patch })
 
   return (
     <div data-slot="session-browser" className={cn('flex flex-col gap-3', className)}>
-      <div className={cn('flex flex-col gap-1.5 px-2', !showControls && 'hidden')}>
-        <div className="relative">
-          <Search className="pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2 text-fg-4" />
-          <Input
-            value={config.search}
-            onChange={(e) => set({ search: e.target.value })}
-            placeholder="Search sessions"
-            aria-label="Search sessions"
-            className="pl-8"
-          />
-        </div>
-        <FilterRow label="State">
-          <FacetSelect
-            label="State"
-            value={config.states}
-            options={STATE_ORDER.map((s) => ({ value: s, label: STATE_LABELS[s] }))}
-            onChange={(states) => set({ states: states as SessionState[] })}
-          />
-        </FilterRow>
-        {adapters.length > 1 ? (
-          <FilterRow label="Engine">
-            <FacetSelect
-              label="Engine"
-              value={config.adapters}
-              options={adapters.map((a) => ({ value: a, label: a }))}
-              onChange={(adapters) => set({ adapters })}
-            />
-          </FilterRow>
-        ) : null}
-        {gateways.length > 1 ? (
-          <FilterRow label="Gateway">
-            <FacetSelect
-              label="Gateway"
-              value={config.gateways}
-              options={gateways.map((g) => ({ value: g.id, label: g.name }))}
-              onChange={(gateways) => set({ gateways })}
-            />
-          </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"
-            value={config.groupBy}
-            options={[
-              { 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 })}
-          />
-        </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"
-            value={config.sortBy}
-            options={[
-              { 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 })}
-          />
-        </FilterRow>
-      </div>
+      {showSearch ? (
+        <SessionSearch value={config.search} onChange={(search) => set({ search })} autoFocus={autoFocusSearch} className="px-2" />
+      ) : null}
+      {showControls ? <SessionFilters config={config} onConfigChange={onConfigChange} rows={rows} scope={scope} className="px-2" /> : null}
 
-      {subset ? (
+      {subset && showSubset ? (
         <div className="flex items-center gap-2 px-3 text-label text-fg-4">
           <span>
             {subset.shown} of {subset.total}
@@ -205,6 +123,14 @@ export function SessionBrowser({
             action="Clear filters"
             onAction={() => onConfigChange(clearFilters(config))}
           />
+        ) : scope && scopeActive(config, scope) ? (
+          <Empty
+            icon={<FolderOpen />}
+            title="Nothing in this folder"
+            description={`No session is running in ${scope.label}.`}
+            action="Show all folders"
+            onAction={() => set({ scoped: false })}
+          />
         ) : (
           <Empty icon={<Layers />} title="Nothing here" description="No session to show." />
         )
@@ -225,21 +151,27 @@ export function SessionBrowser({
                 <SessionRowItem
                   key={`${row.hostId}:${row.info.id}`}
                   row={row}
-                  active={row.info.id === activeId}
+                  active={isActive(row)}
                   activeSubagentId={activeSubagentId}
                   activeShellId={activeShellId}
+                  actions={rowActions?.(row)}
                   now={now}
-                  showGateway={gateways.length > 1 && config.groupBy !== 'gateway'}
+                  showGateway={(gatewayCount ?? rowGateways) > 1 && config.groupBy !== 'gateway'}
                   showProject={config.groupBy !== 'project'}
                   subagents={config.subagents}
+                  shells={config.shells}
+                  tasks={config.tasks}
                   projectIcons={projectIcons}
                   onSelect={onSelect}
                   onDelete={onDelete}
                   onRename={onRename}
                   onClearContext={onClearContext}
                   onSelectSubagent={onSelectSubagent}
+                  onSelectTask={onSelectTask}
+                  onStopTask={onStopTask}
                   onSelectShell={onSelectShell}
                   onKillShell={onKillShell}
+                  onShellAgentWrite={onShellAgentWrite}
                 />
               ))}
             </div>
@@ -258,39 +190,51 @@ function iconSrcOf(row: SessionRow | undefined, icons: Record<string, string> |
 interface SessionRowItemProps {
   row: SessionRow
   active?: boolean
+  actions?: ReactNode
   activeSubagentId?: string
   activeShellId?: string
   now?: number
   showGateway?: boolean
   showProject?: boolean
   subagents?: SubagentDisplay
+  shells?: StepDisplay
+  tasks?: StepDisplay
   projectIcons?: Record<string, string>
-  onSelect?: (row: SessionRow) => void
+  onSelect?: (row: SessionRow, modifiers: SelectModifiers) => void
   onDelete?: (row: SessionRow) => void
   onRename?: (row: SessionRow, title: string) => void
   onClearContext?: (row: SessionRow) => void
   onSelectSubagent?: (row: SessionRow, toolUseId: string) => void
+  onSelectTask?: (row: SessionRow, task: SessionTask) => void
+  onStopTask?: (row: SessionRow, toolUseId: string) => void
   onSelectShell?: (row: SessionRow, shellId: string) => void
   onKillShell?: (row: SessionRow, shellId: string) => void
+  onShellAgentWrite?: (row: SessionRow, shellId: string, enabled: boolean) => void
 }
 
 function SessionRowItem({
   row,
   active,
+  actions,
   activeSubagentId,
   activeShellId,
   now,
   showGateway,
   showProject = true,
   subagents,
+  shells,
+  tasks,
   projectIcons,
   onSelect,
   onDelete,
   onRename,
   onClearContext,
   onSelectSubagent,
+  onSelectTask,
+  onStopTask,
   onSelectShell,
   onKillShell,
+  onShellAgentWrite,
 }: SessionRowItemProps) {
   const { info } = row
   const [editing, setEditing] = useState(false)
@@ -299,42 +243,49 @@ function SessionRowItem({
     <SessionItem
       row={row}
       active={active === true}
-      activeStepKey={activeShellId ?? activeSubagentId}
+      activeStepKey={active ? (activeShellId ?? activeSubagentId) : undefined}
       now={now}
       showGateway={showGateway}
       showProject={showProject}
       subagents={subagents}
+      shells={shells}
+      tasks={tasks}
       projectIcons={projectIcons}
-      onSelect={() => onSelect?.(row)}
+      onSelect={(modifiers) => onSelect?.(row, modifiers)}
       onSelectSubagent={onSelectSubagent ? (id) => onSelectSubagent(row, id) : undefined}
+      onSelectTask={onSelectTask ? (task) => onSelectTask(row, task) : undefined}
+      onStopTask={onStopTask ? (id) => onStopTask(row, id) : undefined}
       onSelectShell={onSelectShell ? (id) => onSelectShell(row, id) : undefined}
       onKillShell={onKillShell ? (id) => onKillShell(row, id) : undefined}
+      onShellAgentWrite={onShellAgentWrite ? (id, enabled) => onShellAgentWrite(row, id, enabled) : undefined}
       onRename={onRename ? (title) => onRename(row, title) : undefined}
-      renameOn="external"
-      editing={editing}
-      onEditingChange={setEditing}
+      renameOn={actions === undefined ? 'external' : 'doubleClick'}
+      editing={actions === undefined ? editing : undefined}
+      onEditingChange={actions === undefined ? setEditing : undefined}
       actions={
-        <>
-          {onRename && !editing ? (
-            <RowAction label="Rename session" onClick={() => setEditing(true)}>
-              <Pencil className="size-3 text-fg-3" />
-            </RowAction>
-          ) : null}
-          {onClearContext && info.capabilities?.clearContext ? (
-            <RowAction
-              label="Clear context"
-              title="Clear the conversation - the session keeps running and the old conversation stays resumable"
-              onClick={() => onClearContext(row)}
-            >
-              <Eraser className="size-3 text-fg-3" />
-            </RowAction>
-          ) : null}
-          {onDelete ? (
-            <RowAction label="Close session" onClick={() => onDelete(row)}>
-              <Trash2 className="size-3 text-fg-3" />
-            </RowAction>
-          ) : null}
-        </>
+        actions ?? (
+          <>
+            {onRename && !editing ? (
+              <RowAction label="Rename session" onClick={() => setEditing(true)}>
+                <Pencil className="size-3 text-fg-3" />
+              </RowAction>
+            ) : null}
+            {onClearContext && info.capabilities?.clearContext ? (
+              <RowAction
+                label="Clear context"
+                title="Clear the conversation - the session keeps running and the old conversation stays resumable"
+                onClick={() => onClearContext(row)}
+              >
+                <Eraser className="size-3 text-fg-3" />
+              </RowAction>
+            ) : null}
+            {onDelete ? (
+              <RowAction label="Close session" onClick={() => onDelete(row)}>
+                <Trash2 className="size-3 text-fg-3" />
+              </RowAction>
+            ) : null}
+          </>
+        )
       }
     />
   )
@@ -358,80 +309,46 @@ function RowAction({ label, title, onClick, children }: { label: string; title?:
   )
 }
 
-function FilterRow({ label, children }: { label: string; children: React.ReactNode }) {
-  return (
-    <div className="flex items-center gap-2">
-      <span aria-hidden className="w-14 shrink-0 truncate text-label text-fg-3">
-        {label}
-      </span>
-      <div className="min-w-0 flex-1">{children}</div>
-    </div>
-  )
-}
-
-function FacetSelect({
-  label,
+export function SessionSearch({
   value,
-  options,
-  onChange,
-}: {
-  label: string
-  value: string[]
-  options: { value: string; label: string }[]
-  onChange: (value: string[]) => void
-}) {
-  return (
-    <div className="flex items-center gap-1">
-      <Select multiple value={value} onValueChange={(v) => onChange(v as string[])}>
-        <SelectTrigger aria-label={label} className="min-w-0 flex-1">
-          <SelectValue>
-            {value.length === 0
-              ? 'All'
-              : value.length === 1
-                ? (options.find((o) => o.value === value[0])?.label ?? 'All')
-                : `${value.length} selected`}
-          </SelectValue>
-        </SelectTrigger>
-        <SelectContent>
-          {options.map((option) => (
-            <SelectItem key={option.value} value={option.value}>
-              <SelectItemText>{option.label}</SelectItemText>
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-      {value.length > 0 ? (
-        <Button variant="ghost" size="icon-sm" aria-label={`Clear ${label}`} onClick={() => onChange([])}>
-          <X className="size-3 text-fg-4" />
-        </Button>
-      ) : null}
-    </div>
-  )
-}
-
-function OneOfSelect({
-  label,
-  value,
-  options,
   onChange,
+  autoFocus,
+  className,
+  inputClassName,
 }: {
-  label: string
   value: string
-  options: readonly { value: string; label: string }[]
   onChange: (value: string) => void
+  autoFocus?: boolean
+  className?: string
+  inputClassName?: string
 }) {
   return (
-    <Select value={value} onValueChange={(v) => onChange(v as string)}>
-      <SelectTrigger aria-label={label} className="w-full min-w-0">
-        <SelectValue>{options.find((o) => o.value === value)?.label ?? label}</SelectValue>
-      </SelectTrigger>
-      <SelectContent>
-        {options.map((option) => (
-          <SelectItem key={option.value} value={option.value}>
-            <SelectItemText>{option.label}</SelectItemText>
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
+    <div className={cn('relative', className)}>
+      <Search className="pointer-events-none absolute top-1/2 left-4.5 size-3.5 -translate-y-1/2 text-fg-4" />
+      <Input
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Escape' && value) {
+            e.stopPropagation()
+            onChange('')
+          }
+        }}
+        placeholder="Search sessions"
+        aria-label="Search sessions"
+        autoFocus={autoFocus}
+        className={cn('pr-7 pl-8', inputClassName)}
+      />
+      {value ? (
+        <button
+          type="button"
+          aria-label="Clear search"
+          onClick={() => onChange('')}
+          className="absolute top-1/2 right-3.5 -translate-y-1/2 rounded p-0.5 text-fg-4 hover:text-fg-1"
+        >
+          <X className="size-3" />
+        </button>
+      ) : null}
+    </div>
   )
 }