@workerdeck/ui 2.7.2 → 2.9.0

package/src/components/agent/Composer.tsx

@@ -11,13 +11,14 @@ import {
 } from 'react'
 import type { SkillInfo, SlashCommandInfo } from '@workerdeck/protocol'
 import type { StagedAttachment, UseAttachmentsResult } from '@workerdeck/react'
-import { ArrowUp, FileText, Paperclip, RotateCw, Sparkles, Square, TriangleAlert, X } from 'lucide-react'
+import { ArrowUp, FileText, Paperclip, RotateCw, SlidersHorizontal, Sparkles, Square, TriangleAlert, 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, skillPrompt, 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'
@@ -44,9 +45,12 @@ export interface ComposerProps {
   placeholder?: string
   commands?: SlashCommandInfo[]
   skills?: SkillInfo[]
+  // Session controls the host offers as `/` rows. Merged into the same ranked list as the engine's own
+  // 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[]>
   // 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.
+  // mode off entirely - the gateway only offers it to an operator on a session whose engine reaches a host cwd.
   onShellCommand?: (command: string) => void
   attachments?: UseAttachmentsResult
   toolbar?: ReactNode
@@ -61,24 +65,6 @@ export interface ComposerProps {
   ref?: Ref<ComposerHandle>
 }
 
-function cleanName(name: string) {
-  return name.replace(/\s*\(MCP\)$/i, '')
-}
-
-export function skillPrompt(skill: SkillInfo): string {
-  const base = skill.defaultPrompt?.trim() || `$${skill.name}`
-  return /\s$/.test(base) ? base : base + ' '
-}
-
-function matchScore(query: string, haystacks: string[]): number {
-  const needle = query.toLowerCase()
-  const lowered = haystacks.map((s) => s.toLowerCase())
-  if (lowered.some((h) => h.startsWith(needle))) {
-    return 2
-  }
-  return lowered.some((h) => h.includes(needle)) ? 1 : 0
-}
-
 export function Composer({
   onSend,
   onInterrupt,
@@ -87,6 +73,7 @@ export function Composer({
   placeholder = 'Message the agent…',
   commands,
   skills,
+  clientCommands,
   onSearchFiles,
   onShellCommand,
   attachments,
@@ -109,6 +96,7 @@ export function Composer({
   const fileInput = useRef<HTMLInputElement>(null)
   const [dragging, setDragging] = useState(false)
   const [shellMode, setShellMode] = useState(false)
+  const [helpOpen, setHelpOpen] = useState(false)
 
   useImperativeHandle(
     ref,
@@ -125,76 +113,43 @@ export function Composer({
 
   const triggers = useMemo(() => {
     const configured = []
-    const usableSkills = (skills ?? []).filter((s) => s.enabled)
-    if (commands && commands.length > 0) {
-      const seen = new Set<string>()
-      const unique = commands.flatMap((c) => {
-        const name = cleanName(c.name)
-        if (seen.has(name)) {
-          return []
-        }
-        seen.add(name)
-        return [{ ...c, name }]
-      })
+    const rows = mergeComposerRows({ commands, clientCommands, skills })
+    if (rows.length > 0) {
+      // Keyed by kind as well as name: an engine command and a skill may share one, and a chip's `data`
+      // is serialized into the DOM, so the row itself never travels there.
+      const byTag = new Map(rows.map((row) => [`${row.kind}:${row.name}`, row]))
       configured.push(
         commandTrigger({
-          onSearch: (query: string): TriggerSuggestion[] => {
-            const scored: Array<{ score: number; suggestion: TriggerSuggestion }> = []
-            for (const c of unique) {
-              const score = matchScore(query, [c.name, ...(c.aliases ?? []), ...c.name.split(':')])
-              if (score === 0) {
-                continue
-              }
-              scored.push({
-                score,
-                suggestion: {
-                  value: c.name,
-                  label: `/${c.name}${c.argumentHint ? ` ${c.argumentHint}` : ''}`,
-                  description: c.description,
-                },
-              })
+          onSearch: (query: string): TriggerSuggestion[] =>
+            rankComposerRows(query, rows).map((row) =>
+              row.kind === 'skill'
+                ? {
+                    value: row.name,
+                    label: row.label,
+                    description: row.description ? `Skill · ${row.description}` : 'Skill · inserts a message you can edit',
+                    icon: <Sparkles className="size-3.5 text-fg-3" />,
+                    data: `${row.kind}:${row.name}`,
+                  }
+                : {
+                    value: row.name,
+                    label: `/${row.name}${row.argumentHint ? ` ${row.argumentHint}` : ''}`,
+                    description: row.description,
+                    icon: row.kind === 'client' ? <SlidersHorizontal className="size-3.5 text-fg-3" /> : undefined,
+                    data: `${row.kind}:${row.name}`,
+                  },
+            ),
+          insertAsText: (suggestion) => {
+            const row = byTag.get(String(suggestion.data))
+            if (row?.kind === 'skill') {
+              return skillPrompt(row.skill)
             }
-            scored.sort((a, b) => b.score - a.score)
-            return scored.map(({ suggestion }) => suggestion)
+            return row?.kind === 'client' && row.command.requiresArgs ? `/${row.name} ` : undefined
           },
           onSelect: (suggestion) => suggestion.value,
           chipClassName: 'font-mono',
         }),
       )
     }
-    if (usableSkills.length > 0) {
-      configured.push(
-        commandTrigger({
-          char: '$',
-          accessibilityLabel: 'skill',
-          onSearch: (query: string): TriggerSuggestion[] => {
-            const scored: Array<{ score: number; suggestion: TriggerSuggestion }> = []
-            for (const skill of usableSkills) {
-              const score = matchScore(query, [skill.name, ...skill.name.split(/[-:_]/)])
-              if (score === 0) {
-                continue
-              }
-              const summary = skill.shortDescription ?? skill.description
-              scored.push({
-                score,
-                suggestion: {
-                  value: skill.name,
-                  label: skill.displayName ?? skill.name,
-                  description: summary ? `Skill · ${summary}` : 'Skill · inserts a message you can edit',
-                  icon: <Sparkles className="size-3.5 text-fg-3" />,
-                },
-              })
-            }
-            scored.sort((a, b) => b.score - a.score)
-            return scored.map(({ suggestion }) => suggestion)
-          },
-          insertAsText: (suggestion) => {
-            const skill = usableSkills.find((s) => s.name === suggestion.value)
-            return skill ? skillPrompt(skill) : `$${suggestion.value} `
-          },
-        }),
-      )
-    }
     if (onSearchFiles) {
       configured.push(
         mentionTrigger({
@@ -224,7 +179,7 @@ export function Composer({
       )
     }
     return configured.length > 0 ? configured : undefined
-  }, [commands, skills, onSearchFiles, onShellCommand])
+  }, [commands, skills, clientCommands, onSearchFiles, onShellCommand])
 
   const saveDraft = draft?.save
   useEffect(() => {
@@ -261,6 +216,13 @@ export function Composer({
     setShellMode(false)
     focus()
   }
+
+  const hints = [
+    triggers?.some((t) => t.char === '/') ? { key: '/', what: 'commands and skills' } : undefined,
+    onSearchFiles ? { key: '@', what: 'mention a file' } : undefined,
+    onShellCommand ? { key: '!', what: 'run a shell command' } : undefined,
+    { key: '?', what: 'this list, on an empty composer' },
+  ].filter((h) => h !== undefined)
   // Escape and backspace-on-empty both leave, because both are what a person reaches for when the
   // pink frame was not what they meant. Backspace only when there is nothing left to delete.
   const shellKeys = shellMode
@@ -273,7 +235,40 @@ export function Composer({
           }
         },
       }
-    : {}
+    : {
+        onEscape: helpOpen ? () => setHelpOpen(false) : undefined,
+        // Only on a genuinely empty composer, so a message that opens with a question mark still types.
+        onKeyDown: (e: KeyboardEvent<HTMLDivElement>) => {
+          if (e.key === '?' && isEmpty && !e.metaKey && !e.ctrlKey) {
+            e.preventDefault()
+            setHelpOpen(true)
+            return
+          }
+          if (helpOpen) {
+            setHelpOpen(false)
+          }
+        },
+      }
+
+  const helpHints = helpOpen ? (
+    <>
+      {hints.map((hint) => (
+        <span key={hint.key} className="flex items-center gap-1">
+          <kbd className="font-mono text-text">{hint.key}</kbd>
+          {hint.what}
+        </span>
+      ))}
+    </>
+  ) : null
+  const helpRow = helpOpen ? (
+    <div
+      role="note"
+      aria-label="Composer shortcuts"
+      className="mx-auto mb-1 flex w-full max-w-[var(--wd-transcript-max-width)] flex-wrap items-center gap-x-3 gap-y-1 text-label text-fg-3"
+    >
+      {helpHints}
+    </div>
+  ) : null
 
   const pick = (files: FileList | null) => {
     if (files && files.length > 0) {
@@ -405,6 +400,12 @@ export function Composer({
                 {submitButton}
               </div>
             </div>
+            {helpOpen ? (
+              <div role="note" aria-label="Composer shortcuts" className="term-row">
+                <span aria-hidden className="term-gutter" />
+                <div className="flex min-w-0 flex-wrap items-center gap-x-[2ch] text-fg-3">{helpHints}</div>
+              </div>
+            ) : null}
             {shellMode ? (
               <div className="term-row">
                 <span aria-hidden className="term-gutter" />
@@ -425,6 +426,7 @@ export function Composer({
 
   return (
     <div data-slot="composer" className={cn('px-[var(--wd-composer-padding)] pb-[var(--wd-composer-padding)]', className)}>
+      {helpRow}
       <div
         {...dropHandlers}
         className={cn(
@@ -544,7 +546,7 @@ function AttachmentChip({ item, onRetry, onRemove }: { item: StagedAttachment; o
   const terminal = useTranscriptVariant() === 'terminal'
   const round = terminal ? '' : 'rounded-md'
   return (
-    <div className="group relative shrink-0" title={failed ? `${item.name} — ${item.error}` : `${item.name} · ${formatBytes(item.bytes)}`}>
+    <div className="group relative shrink-0" title={failed ? `${item.name} - ${item.error}` : `${item.name} · ${formatBytes(item.bytes)}`}>
       <div
         className={cn(
           'flex size-14 items-center justify-center overflow-hidden bg-surface',

package/src/components/agent/ContextDialog.tsx

@@ -23,7 +23,7 @@ export function ContextDialog({ usage, engine, open, onOpenChange, className }:
         <DialogBody>
           {!usage ? (
             <p className="py-6 text-center text-body-sm text-fg-4">
-              No reading yet — the context window is measured after a turn completes.
+              No reading yet - the context window is measured after a turn completes.
             </p>
           ) : (
             <>

package/src/components/agent/EntryIcon.tsx

@@ -2,7 +2,7 @@ import { File, Folder, Link2 } from 'lucide-react'
 import type { HostDirEntry } from '@workerdeck/protocol'
 
 // The icon for one host directory entry. A symlink is drawn as a link and never silently
-// resolved — the caller decides what a symlink means, the tree only says it is one.
+// resolved - the caller decides what a symlink means, the tree only says it is one.
 export function EntryIcon({ type }: { type: HostDirEntry['type'] }) {
   if (type === 'dir') {
     return <Folder className="size-3.5 shrink-0 text-accent" />

package/src/components/agent/FileTree.tsx

@@ -147,7 +147,7 @@ export function FileTree({ tree, search, activePath, onOpenFile, onCollapse, sty
                 />
                 {row.truncated ? (
                   <p className="truncate py-0.5 text-label text-fg-4" style={{ paddingLeft: (row.depth + 1) * INDENT + 22 }}>
-                    More entries than the server will return — use search.
+                    More entries than the server will return - use search.
                   </p>
                 ) : null}
               </li>

package/src/components/agent/FileViewer.tsx

@@ -93,7 +93,7 @@ export function FileViewer({
               <span className="text-label text-fg-4">Saving…</span>
             </>
           ) : !canWrite ? (
-            <span className="text-label text-fg-4">Read-only — this gateway doesn’t allow writes.</span>
+            <span className="text-label text-fg-4">Read-only - this gateway doesn’t allow writes.</span>
           ) : (
             <>
               <span className="text-label text-fg-3">Unsaved changes</span>

package/src/components/agent/HostFilesDialog.tsx

@@ -84,7 +84,7 @@ export function HostFilesDialog({ client, cwd, open, onOpenChange }: HostFilesDi
       setFile({
         path: response.path,
         bytes: response.bytes,
-        content: response.encoding === 'utf8' ? response.content : '(binary file — not shown)',
+        content: response.encoding === 'utf8' ? response.content : '(binary file - not shown)',
       })
     } catch (e) {
       setError(e instanceof Error ? e.message : 'Could not read that file')
@@ -178,7 +178,7 @@ export function HostFilesDialog({ client, cwd, open, onOpenChange }: HostFilesDi
                 </ul>
               )}
               {truncated && !matches ? (
-                <p className="text-label text-fg-4">More entries than the server will return — use the search box.</p>
+                <p className="text-label text-fg-4">More entries than the server will return - use the search box.</p>
               ) : null}
             </>
           )}

package/src/components/agent/PermissionModeSelect.tsx

@@ -46,14 +46,14 @@ export const PERMISSION_MODES: PermissionModeMeta[] = [
     value: 'dontAsk',
     label: "Don't ask",
     shortLabel: "Don't ask",
-    description: 'Never ask — deny anything not pre-approved',
+    description: 'Never ask - deny anything not pre-approved',
     icon: ShieldCheck,
   },
   {
     value: 'bypassPermissions',
     label: 'Bypass permissions',
     shortLabel: 'Bypass',
-    description: 'Skip every approval — the agent is unsupervised',
+    description: 'Skip every approval - the agent is unsupervised',
     icon: TriangleAlert,
     dangerous: true,
   },

package/src/components/agent/PermissionPrompt.tsx

@@ -96,8 +96,8 @@ export function PermissionPrompt({ request, onApprove, onDeny, className }: Perm
             }}
             placeholder={
               plan
-                ? 'What should change? (optional) — the agent keeps planning and reads this'
-                : 'Reason (optional) — the agent reads this and can try something else'
+                ? 'What should change? (optional) - the agent keeps planning and reads this'
+                : 'Reason (optional) - the agent reads this and can try something else'
             }
             className="h-7 flex-1"
           />

package/src/components/agent/SessionBrowser.tsx

@@ -284,7 +284,7 @@ function SessionRowItem({
           {onClearContext && info.capabilities?.clearContext ? (
             <RowAction
               label="Clear context"
-              title="Clear the conversation — the session keeps running and the old conversation stays resumable"
+              title="Clear the conversation - the session keeps running and the old conversation stays resumable"
               onClick={() => onClearContext(row)}
             >
               <Eraser className="size-3 text-fg-3" />

package/src/components/agent/SessionItem.tsx

@@ -70,7 +70,7 @@ export function SessionItem({
   const extras = [
     showGateway ? row.hostName : undefined,
     info.profile ? `@${info.profile}` : undefined,
-    cost === '—' ? undefined : cost,
+    cost === '-' ? undefined : cost,
   ].filter((part): part is string => Boolean(part))
 
   const model = friendlyModel(info.model)
@@ -162,7 +162,9 @@ export function SessionItem({
               className={cn(
                 'flex h-4 min-w-6 shrink-0 items-center justify-center rounded-full px-2',
                 'text-[0.75rem] leading-none tracking-[-0.005em] tabular-nums',
-                row.state === 'working' || row.state === 'attention' ? 'bg-accent text-accent-fg' : 'bg-badge text-badge-fg',
+                // Grey while the turn is still producing, accent once it has stopped: the badge's colour
+                // answers "is this waiting for me", and a working session is not yet.
+                row.state === 'working' ? 'bg-badge text-badge-fg' : 'bg-accent text-accent-fg',
               )}
             >
               {row.unseen}