@workerdeck/ui 0.9.0 → 0.11.0

package/src/components/agent/Composer.tsx

@@ -1,15 +1,42 @@
-import { useMemo, type ReactNode } from 'react'
-import type { SlashCommandInfo } from '@workerdeck/protocol'
-import { ArrowUp, Square } from 'lucide-react'
+import { useImperativeHandle, useMemo, useRef, useState, type ReactNode, type Ref } 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 { 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 { commandTrigger } from '../prompt-area/trigger-presets.ts'
+import { commandTrigger, mentionTrigger } from '../prompt-area/trigger-presets.ts'
 import type { TriggerSuggestion } from '../prompt-area/types.ts'
 import { cn } from '../../lib/utils.ts'
+import { formatBytes } from '../../lib/format.ts'
+
+/** Files matching an `@` query, for the composer's file trigger. Structural so
+ * the ui package doesn't have to reach for the protocol's `HostFileMatch`. */
+export type ComposerFileMatch = { path: string; relative: string }
+
+/** Imperative surface for panels that draft a message the user then finishes —
+ * the skills dialog's "Use this skill". Nothing here sends. */
+export type ComposerHandle = {
+  /** Append plain text at the caret's end and focus, separating it from
+   * whatever is already there. */
+  insertText: (text: string) => void
+  /** Put the caret in the field, changing nothing. */
+  focus: () => void
+}
 
 export interface ComposerProps {
-  onSend: (text: string) => void
+  /** `attachmentIds` are the staged uploads, in the order they were picked. */
+  onSend: (text: string, attachmentIds: string[]) => void
   onInterrupt: () => void
   busy: boolean
   /** Disable input entirely (session failed/closed). */
@@ -17,123 +44,531 @@ export interface ComposerProps {
   placeholder?: string
   /** Slash commands offered as autocomplete; picked ones render as chips. */
   commands?: SlashCommandInfo[]
-  /** Left side of the toolbar row (mode selects, attachments, …). */
+  /**
+   * Skills offered under a **`$`** popover of their own — codex's sigil, kept
+   * separate from `/` because the two behave differently. A skill is a typing
+   * aid, not a command: picking one inserts editable text (the skill's own
+   * `defaultPrompt` where it has one, else `$name`) and nothing is sent. No
+   * engine parses `$skillname` as syntax, which is exactly why these can never
+   * resolve to a chip the way `commands` do.
+   */
+  skills?: SkillInfo[]
+  /** Host-file search behind the `@` trigger. Omit to leave `@` inert — a
+   * gateway without host files has nothing to complete. */
+  onSearchFiles?: (query: string, options: { signal: AbortSignal }) => Promise<ComposerFileMatch[]>
+  /** Attachment staging (see `useAttachments`). Omit for a text-only composer. */
+  attachments?: UseAttachmentsResult
+  /** Left side of the toolbar row (mode selects, …). */
   toolbar?: ReactNode
+  /**
+   * `'stacked'` (default) gives the buttons a row of their own under the field —
+   * right where a toolbar belongs. `'inline'` puts the field and the buttons on
+   * ONE line, growing from a single row as the message does: for a host whose
+   * session controls live in its own chrome (VS Code's status bar), where the
+   * empty composer would otherwise spend two rows saying nothing.
+   */
+  layout?: 'stacked' | 'inline'
   className?: string
+  ref?: Ref<ComposerHandle>
 }
 
 /** CLI names may carry display annotations (e.g. "foo (MCP)") the parser rejects. */
 const cleanName = (name: string) => name.replace(/\s*\(MCP\)$/i, '')
 
-/** Framed prompt input built on prompt-area's contentEditable: typing "/" — at the
- * start or after whitespace — opens a suggestion dropdown fed by `commands`, and a
- * picked command becomes an inline chip. Submit button flips to stop while a turn
- * is running (messages still queue while busy). */
+/**
+ * What a picked skill types into the composer.
+ *
+ * The engine's own `defaultPrompt` when it declared one — it knows what its
+ * skill wants to be asked — and otherwise `$name`, which is codex's native way
+ * of referring to a skill in prompt text: its `skill-creator` documents the form
+ * (`Use $skill-x at /path/to/skill-x to solve problem y`) and its own bundled
+ * prompts are written that way ("Use $pdf to …"). Spelling it the way the engine
+ * spells it beats paraphrasing into "Use the X skill to".
+ *
+ * Either way it ends in a space so the caret lands ready for the rest of the
+ * sentence, and either way it is ordinary text: nothing here is submitted, and
+ * nothing is parsed back out.
+ */
+export function skillPrompt(skill: SkillInfo): string {
+  const base = skill.defaultPrompt?.trim() || `$${skill.name}`
+  return /\s$/.test(base) ? base : base + ' '
+}
+
+/** Ranks a haystack set against the typed query: 2 for a prefix hit, 1 for a
+ * substring, 0 for no match. Shared so commands and skills sort as one list
+ * rather than two concatenated ones. */
+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
+}
+
+/**
+ * Framed prompt input built on prompt-area's contentEditable.
+ *
+ * Three completions ride the same field and behave nothing alike. `/` is the
+ * CLI's command list and `$` is the engine's skill list — both local, so they
+ * filter completely and instantly; `@` is a search against the host filesystem,
+ * debounced and abortable so a fast typist makes one request rather than eight.
+ *
+ * `/` and `$` are separate keys rather than one merged menu, and that mirrors
+ * the engines themselves: codex completes skills on `$` and reserves `/` for
+ * commands. The behaviours differ too — a command resolves to a **chip**,
+ * because the CLI really does parse `/name` out of the message, while a skill
+ * resolves to plain editable **text**, because no engine parses `$name` as
+ * syntax; it is prose the model reads. Rendering them alike would promise
+ * something that does not happen.
+ *
+ * Files can arrive three ways — the paperclip, a drop, or a paste — because on a
+ * desktop all three are things people already do, and the upload starts the
+ * moment one lands rather than at send time.
+ */
 export function Composer({
   onSend,
   onInterrupt,
   busy,
   disabled,
-  placeholder = 'Message Claude…',
+  placeholder = 'Message the agent…',
   commands,
+  skills,
+  onSearchFiles,
+  attachments,
   toolbar,
+  layout = 'stacked',
   className,
+  ref,
 }: ComposerProps) {
+  const inline = layout === 'inline'
   const { bind, plainText, isEmpty, clear, focus } = usePromptAreaState()
+  const fileInput = useRef<HTMLInputElement>(null)
+  const [dragging, setDragging] = useState(false)
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      insertText: (text: string) => {
+        // A space in front only when there is something to separate from, so a
+        // draft into an empty composer doesn't start with one.
+        const prefix = plainText.length > 0 && !/\s$/.test(plainText) ? ' ' : ''
+        bind.ref.current?.appendText(prefix + text)
+        focus()
+      },
+      focus,
+    }),
+    [bind.ref, plainText, focus],
+  )
 
   const triggers = useMemo(() => {
-    if (!commands || commands.length === 0) return undefined
-    // The CLI list can contain the same skill name from several sources — first wins.
-    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 }]
-    })
-    return [
-      commandTrigger({
-        onSearch: (query: string): TriggerSuggestion[] => {
-          const needle = query.toLowerCase()
-          const scored = unique.flatMap((c) => {
-            const haystacks = [c.name, ...(c.aliases ?? [])].map((s) => s.toLowerCase())
-            const score = haystacks.some((h) => h.startsWith(needle))
-              ? 2
-              : haystacks.some((h) => h.includes(needle))
-                ? 1
-                : 0
-            return score === 0 ? [] : [{ c, score }]
-          })
-          scored.sort((a, b) => b.score - a.score)
-          return scored.map(({ c }) => ({
-            value: c.name,
-            label: `/${c.name}${c.argumentHint ? ` ${c.argumentHint}` : ''}`,
-            description: c.description,
-          }))
-        },
-        // Chip text renders as trigger + displayText — return the bare name so
-        // the chip reads "/name" (label carries the argument hint for the menu).
-        onSelect: (suggestion) => suggestion.value,
-        chipClassName: 'font-mono',
-      }),
-    ]
-  }, [commands])
+    const configured = []
+    const usableSkills = (skills ?? []).filter((s) => s.enabled)
+    if (commands && commands.length > 0) {
+      // The CLI list can contain the same skill name from several sources — first wins.
+      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 }]
+      })
+      configured.push(
+        commandTrigger({
+          onSearch: (query: string): TriggerSuggestion[] => {
+            const scored: Array<{ score: number; suggestion: TriggerSuggestion }> = []
+            for (const c of unique) {
+              // "wrapup" should find "dev:wrapup" — the bare half of a
+              // namespaced name is what people type.
+              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,
+                },
+              })
+            }
+            scored.sort((a, b) => b.score - a.score)
+            return scored.map(({ suggestion }) => suggestion)
+          },
+          // Chip text renders as trigger + displayText — return the bare name so
+          // the chip reads "/name" (label carries the argument hint for the menu).
+          onSelect: (suggestion) => suggestion.value,
+          chipClassName: 'font-mono',
+        }),
+      )
+    }
+    if (usableSkills.length > 0) {
+      // `$`, not `/`, because that is codex's own sigil — its TUI completes
+      // skills on `$` and reserves `/` for commands, and its bundled prompts
+      // refer to skills that way in prose ("Use $pdf to …"). Matching it means
+      // muscle memory transfers, and it keeps the two lists from being one
+      // ambiguous menu of things that behave differently.
+      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)
+          },
+          // Always text, never a chip: a skill is not wire syntax the engine
+          // parses back out, so what lands has to stay ordinary editable prose.
+          // Returning a string unconditionally is what makes this trigger's
+          // whole list behave that way.
+          insertAsText: (suggestion) => {
+            const skill = usableSkills.find((s) => s.name === suggestion.value)
+            return skill ? skillPrompt(skill) : `$${suggestion.value} `
+          },
+        }),
+      )
+    }
+    if (onSearchFiles) {
+      configured.push(
+        mentionTrigger({
+          // A round trip per keystroke would be eight requests for one word; the
+          // route is cheap but not free.
+          searchDebounceMs: 150,
+          onSearch: async (query, options) => {
+            const matches = await onSearchFiles(query, options)
+            return matches.map((match) => ({
+              value: match.relative,
+              label: match.relative,
+              description: match.path,
+            }))
+          },
+          onSelect: (suggestion) => suggestion.value,
+          chipStyle: 'inline',
+          chipClassName: 'font-mono',
+          emptyMessage: 'No matching files',
+        }),
+      )
+    }
+    return configured.length > 0 ? configured : undefined
+  }, [commands, skills, onSearchFiles])
+
+  const staged = attachments?.items ?? []
+  // A photo on its own is a message — send doesn't wait for text. It does wait
+  // for the upload, since an id that hasn't landed can't be named.
+  const canSend =
+    !disabled &&
+    (!isEmpty || staged.length > 0) &&
+    !attachments?.uploading &&
+    !attachments?.hasFailure
 
   const submit = () => {
-    const trimmed = plainText.trim()
-    if (!trimmed || disabled) return
-    onSend(trimmed)
+    if (!canSend) return
+    onSend(plainText.trim(), attachments?.readyIds ?? [])
+    attachments?.clear()
     clear()
     focus()
   }
 
-  const canSend = !disabled && !isEmpty
+  const pick = (files: FileList | null) => {
+    if (files && files.length > 0) attachments?.add(files)
+  }
+
+  // Built once, placed twice: the stacked layout gives these a toolbar row, the
+  // inline one sets them either side of the field. An attach affordance the
+  // engine has no meaning for is not a choice — the capability record decides it
+  // exists.
+  const fileField =
+    attachments && !attachments.disabled ? (
+      <input
+        ref={fileInput}
+        type='file'
+        multiple
+        accept={attachments.accept || undefined}
+        className='hidden'
+        onChange={(e) => {
+          pick(e.target.files)
+          // Re-picking the same file must fire `change` again.
+          e.target.value = ''
+        }}
+      />
+    ) : null
+  const canAttach = !!attachments && !attachments.disabled
+
+  const attach = canAttach ? (
+    <>
+      {fileField}
+      {inline ? (
+        // The glyph sits in the same 14px gutter the transcript's markers use,
+        // so the typed line starts on the column the conversation does.
+        <GlyphButton label='Attach files' disabled={disabled} onClick={() => fileInput.current?.click()}>
+          +
+        </GlyphButton>
+      ) : (
+        <Button
+          variant='ghost'
+          size='icon-sm'
+          aria-label='Attach files'
+          disabled={disabled}
+          onClick={() => fileInput.current?.click()}>
+          <Paperclip className='size-4' />
+        </Button>
+      )}
+    </>
+  ) : null
+
+  const interrupting = busy && !canSend
+  const submitButton = inline ? (
+    // Terminal furniture rather than chat furniture: a glyph that lights up on
+    // hover/focus instead of a filled pill. `↵` is what sends, `■` is what stops
+    // — the same two symbols the keyboard and a shell already use.
+    <GlyphButton
+      label={interrupting ? 'Interrupt' : 'Send'}
+      disabled={!interrupting && !canSend}
+      onClick={interrupting ? onInterrupt : submit}
+      className={interrupting ? 'text-warning' : canSend ? 'text-accent' : undefined}>
+      {interrupting ? '■' : '↵'}
+    </GlyphButton>
+  ) : interrupting ? (
+    <Button
+      variant='outline'
+      size='icon-sm'
+      aria-label='Interrupt'
+      className='rounded-full'
+      onClick={onInterrupt}>
+      <Square className='size-3' />
+    </Button>
+  ) : (
+    <Button
+      size='icon-sm'
+      aria-label='Send'
+      className='rounded-full'
+      disabled={!canSend}
+      onClick={submit}>
+      <ArrowUp className='size-4' />
+    </Button>
+  )
 
   return (
     <div data-slot='composer' className={cn('px-3 pb-3', className)}>
       <div
+        onDragOver={(e) => {
+          if (attachments && !attachments.disabled) {
+            e.preventDefault()
+            setDragging(true)
+          }
+        }}
+        onDragLeave={() => setDragging(false)}
+        onDrop={(e) => {
+          if (!attachments || attachments.disabled) return
+          e.preventDefault()
+          setDragging(false)
+          pick(e.dataTransfer.files)
+        }}
         className={cn(
-          'mx-auto w-full max-w-3xl overflow-hidden rounded-lg border border-border bg-bg shadow-(--shadow-xs)',
+          'mx-auto w-full max-w-[var(--wd-content-max-w,48rem)] overflow-hidden rounded-lg border border-border bg-bg shadow-(--shadow-xs)',
           'transition-colors focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/30',
+          dragging && 'border-ring ring-2 ring-ring/30',
           disabled && 'opacity-60',
         )}>
-        <PromptArea
-          {...bind}
-          triggers={triggers}
-          onSubmit={submit}
-          disabled={disabled}
-          placeholder={disabled ? 'Session ended' : placeholder}
-          minHeight={28}
-          maxHeight={192}
-          aria-label='Message Claude'
-          className='px-3 pt-2.5 pb-1 text-body-sm text-text'
-        />
-        <div className='flex items-center justify-between gap-2 px-2 pb-2'>
-          <div className='flex min-w-0 items-center gap-1'>{toolbar}</div>
-          {busy ? (
-            <Button
-              variant='outline'
-              size='icon-sm'
-              aria-label='Interrupt'
-              className='rounded-full'
-              onClick={onInterrupt}>
-              <Square className='size-3' />
-            </Button>
-          ) : (
-            <Button
-              size='icon-sm'
-              aria-label='Send'
-              className='rounded-full'
-              disabled={!canSend}
-              onClick={submit}>
-              <ArrowUp className='size-4' />
-            </Button>
-          )}
-        </div>
+        {/* Above the field, like the picture you are talking about should be. */}
+        {staged.length > 0 && attachments ? (
+          <AttachmentStrip attachments={attachments} />
+        ) : null}
+        {inline ? (
+          // One row until the message needs more: the field grows into the space
+          // rather than the frame reserving it, and the buttons stay bottom-
+          // aligned as it does. 4px of padding and gap all round against 24px
+          // buttons and a 24px line box (20px of text, 2px either side) — on a
+          // single line everything centres without anything being nudged.
+          <div className='flex items-end gap-1 p-1'>
+            {attach}
+            <PromptArea
+              {...bind}
+              triggers={triggers}
+              onSubmit={submit}
+              disabled={disabled}
+              placeholder={disabled ? 'Session ended' : placeholder}
+              minHeight={20}
+              maxHeight={192}
+              aria-label='Message the agent'
+              className='min-w-0 flex-1 py-0.5 text-body-sm text-text'
+              onImagePaste={(file) => attachments?.add([file])}
+            />
+            {submitButton}
+          </div>
+        ) : (
+          <>
+            <PromptArea
+              {...bind}
+              triggers={triggers}
+              onSubmit={submit}
+              disabled={disabled}
+              placeholder={disabled ? 'Session ended' : placeholder}
+              minHeight={28}
+              maxHeight={192}
+              aria-label='Message the agent'
+              className='px-3 pt-2.5 pb-1 text-body-sm text-text'
+              onImagePaste={(file) => attachments?.add([file])}
+            />
+            <div className='flex items-center justify-between gap-2 px-2 pb-2'>
+              <div className='flex min-w-0 items-center gap-1'>
+                {attach}
+                {toolbar}
+              </div>
+              {submitButton}
+            </div>
+          </>
+        )}
       </div>
-      <div className='mx-auto mt-1 w-full max-w-3xl text-center text-label text-fg-4'>
-        Enter to send · Shift+Enter for a new line
+      {attachments?.error ? (
+        <div className='mx-auto mt-1 flex w-full max-w-[var(--wd-content-max-w,48rem)] items-center gap-2 text-label text-danger'>
+          <TriangleAlert className='size-3 shrink-0' />
+          <span className='min-w-0 flex-1'>{attachments.error}</span>
+          <button
+            type='button'
+            onClick={attachments.dismissError}
+            aria-label='Dismiss'
+            className='shrink-0 opacity-70 hover:opacity-100'>
+            <X className='size-3' />
+          </button>
+        </div>
+      ) : (
+        <div
+          data-slot='composer-hint'
+          className='mx-auto mt-1 w-full max-w-[var(--wd-content-max-w,48rem)] text-center text-label text-fg-4'>
+          Enter to send · Shift+Enter for a new line
+        </div>
+      )}
+    </div>
+  )
+}
+
+/**
+ * A composer action as a **character**, for the inline (terminal) layout: no
+ * pill, no border, nothing drawn until you reach for it — the surface only
+ * appears on hover/focus/press, which is how a terminal's own affordances
+ * behave. Sized to the transcript's gutter glyph (14px) so the row's furniture
+ * lines up with the conversation above it rather than towering over it.
+ */
+function GlyphButton({
+  label,
+  disabled,
+  onClick,
+  className,
+  children,
+}: {
+  label: string
+  disabled?: boolean
+  onClick: () => void
+  className?: string
+  children: ReactNode
+}) {
+  return (
+    <button
+      type='button'
+      aria-label={label}
+      title={label}
+      disabled={disabled}
+      onClick={onClick}
+      className={cn(
+        'flex size-6 shrink-0 items-center justify-center rounded-sm font-mono text-body-sm leading-none',
+        'text-fg-3 transition-colors outline-none select-none',
+        'hover:bg-surface-hover hover:text-fg-1 focus-visible:bg-surface-hover focus-visible:text-fg-1',
+        'active:bg-accent-bg disabled:pointer-events-none disabled:opacity-40',
+        className,
+      )}>
+      {children}
+    </button>
+  )
+}
+
+/** Staged files as a scrolling row of chips above the field. The thumbnail is
+ * the local blob, so nothing here waits on the network; the upload's state rides
+ * on top of it and the ✕ takes it back off. */
+function AttachmentStrip({ attachments }: { attachments: UseAttachmentsResult }) {
+  return (
+    <div className='flex gap-2 overflow-x-auto border-b border-border px-2 py-2'>
+      {attachments.items.map((item) => (
+        <AttachmentChip
+          key={item.key}
+          item={item}
+          onRetry={() => attachments.retry(item.key)}
+          onRemove={() => attachments.remove(item.key)}
+        />
+      ))}
+    </div>
+  )
+}
+
+function AttachmentChip({
+  item,
+  onRetry,
+  onRemove,
+}: {
+  item: StagedAttachment
+  onRetry: () => void
+  onRemove: () => void
+}) {
+  const failed = item.status === 'failed'
+  return (
+    <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 rounded-md border border-border bg-surface',
+          failed && 'border-danger/50',
+        )}>
+        {item.previewUrl ? (
+          <img src={item.previewUrl} alt={item.name} className='size-full object-cover' />
+        ) : (
+          <div className='flex flex-col items-center gap-0.5 text-fg-3'>
+            <FileText className='size-4' />
+            <span className='max-w-12 truncate text-[9px] font-semibold uppercase'>
+              {extensionOf(item.name)}
+            </span>
+          </div>
+        )}
       </div>
+      {item.status === 'uploading' ? (
+        <div className='absolute inset-0 flex items-center justify-center rounded-md bg-black/35'>
+          <Spinner className='size-4 text-white' />
+        </div>
+      ) : null}
+      {failed ? (
+        <button
+          type='button'
+          onClick={onRetry}
+          aria-label={`Retry ${item.name}`}
+          className='absolute inset-0 flex items-center justify-center rounded-md bg-black/45 text-warning'>
+          <RotateCw className='size-4' />
+        </button>
+      ) : null}
+      <button
+        type='button'
+        onClick={onRemove}
+        aria-label={`Remove ${item.name}`}
+        className='absolute -top-1 -right-1 flex size-4 items-center justify-center rounded-full border border-border bg-surface text-fg-3 shadow-(--shadow-xs) hover:text-fg-1'>
+        <X className='size-2.5' />
+      </button>
     </div>
   )
 }
+
+const extensionOf = (name: string) => {
+  const dot = name.lastIndexOf('.')
+  return dot > 0 ? name.slice(dot + 1).toUpperCase() : 'FILE'
+}