@workerdeck/ui 0.7.0 → 0.10.0

package/src/components/agent/HostFilesDialog.tsx

@@ -0,0 +1,218 @@
+import { useCallback, useEffect, useState } from 'react'
+import type { WorkerDeckClient } from '@workerdeck/client'
+import type { HostDirEntry, HostFileMatch } from '@workerdeck/protocol'
+import { ChevronLeft, File, Folder, Link2, Search } from 'lucide-react'
+import { Button } from '../ui/Button.tsx'
+import { CodeBlock } from '../ui/CodeBlock.tsx'
+import { Dialog, DialogBody, DialogContent, DialogHeader } from '../ui/Dialog.tsx'
+import { Input } from '../ui/Input.tsx'
+import { Spinner } from '../ui/Spinner.tsx'
+import { formatBytes } from '../../lib/format.ts'
+
+export interface HostFilesDialogProps {
+  client: WorkerDeckClient
+  /** The session's working directory — the browser is rooted here. */
+  cwd: string | undefined
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+/**
+ * Browse the project the session is working in.
+ *
+ * Deliberately rooted at the session's cwd rather than at the server's
+ * `hostFiles.roots`: the roots are the *security* boundary (the server enforces
+ * them on every request), but what someone wants while watching an agent is this
+ * project's tree. Read-only — writing is a separate server opt-in and not
+ * something a session viewer should be doing behind the agent's back.
+ */
+export function HostFilesDialog({ client, cwd, open, onOpenChange }: HostFilesDialogProps) {
+  const [path, setPath] = useState<string | undefined>(cwd)
+  const [entries, setEntries] = useState<HostDirEntry[]>([])
+  const [truncated, setTruncated] = useState(false)
+  const [query, setQuery] = useState('')
+  const [matches, setMatches] = useState<HostFileMatch[] | undefined>()
+  const [file, setFile] = useState<{ path: string; content: string; bytes: number } | undefined>()
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | undefined>()
+
+  const list = useCallback(
+    async (target: string) => {
+      setLoading(true)
+      setError(undefined)
+      try {
+        const response = await client.listHostDir(target)
+        setPath(response.path)
+        setEntries(response.entries)
+        setTruncated(response.truncated ?? false)
+      } catch (e) {
+        setError(e instanceof Error ? e.message : 'Could not read that directory')
+      } finally {
+        setLoading(false)
+      }
+    },
+    [client],
+  )
+
+  // Opening resets the browser to the session's directory. Navigation from here
+  // is explicit (`list`) rather than an effect on `path`, so walking into a
+  // folder is one request and not two.
+  useEffect(() => {
+    if (!open) return
+    setFile(undefined)
+    setQuery('')
+    setMatches(undefined)
+    setError(undefined)
+    if (cwd) void list(cwd)
+  }, [open, cwd, list])
+
+  // Debounced, and only while there is something to search for; an empty box is
+  // "show me the directory again", not "search for everything".
+  useEffect(() => {
+    if (!open || !cwd) return
+    const q = query.trim()
+    if (!q) {
+      setMatches(undefined)
+      return
+    }
+    const timer = setTimeout(() => {
+      client
+        .findHostFiles(cwd, q, 40)
+        .then((response) => setMatches(response.matches))
+        .catch(() => setMatches([]))
+    }, 150)
+    return () => clearTimeout(timer)
+  }, [client, cwd, query, open])
+
+  const openFile = async (target: string) => {
+    setLoading(true)
+    setError(undefined)
+    try {
+      const response = await client.readHostFile(target)
+      setFile({
+        path: response.path,
+        bytes: response.bytes,
+        content:
+          response.encoding === 'utf8'
+            ? response.content
+            : '(binary file — not shown)',
+      })
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Could not read that file')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const parent = path && cwd && path !== cwd ? path.slice(0, path.lastIndexOf('/')) || '/' : undefined
+  const shown = matches ?? entries
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent size='lg'>
+        <DialogHeader
+          title={file ? file.path.split('/').pop()! : 'Files'}
+          description={file ? file.path : path}
+          actions={
+            file ? (
+              <Button variant='ghost' size='xs' onClick={() => setFile(undefined)}>
+                <ChevronLeft className='size-3.5' />
+                Back
+              </Button>
+            ) : parent ? (
+              <Button variant='ghost' size='xs' onClick={() => void list(parent)}>
+                <ChevronLeft className='size-3.5' />
+                Up
+              </Button>
+            ) : null
+          }
+        />
+        <DialogBody className='flex flex-col gap-3'>
+          {error ? (
+            <div className='rounded-md bg-danger-bg px-3 py-2 text-body-sm text-danger'>{error}</div>
+          ) : null}
+
+          {file ? (
+            <>
+              <p className='text-label text-fg-4'>{formatBytes(file.bytes)}</p>
+              <CodeBlock code={file.content} label={file.path.split('/').pop()} />
+            </>
+          ) : (
+            <>
+              <div className='relative'>
+                <Search className='absolute top-1/2 left-2 size-3.5 -translate-y-1/2 text-fg-4' />
+                <Input
+                  value={query}
+                  onChange={(e) => setQuery(e.target.value)}
+                  placeholder='Search this project…'
+                  className='pl-7'
+                  spellCheck={false}
+                />
+              </div>
+              {loading && shown.length === 0 ? (
+                <div className='py-6 text-center'>
+                  <Spinner className='size-4 text-fg-4' />
+                </div>
+              ) : shown.length === 0 ? (
+                <p className='py-6 text-center text-body-sm text-fg-4'>
+                  {matches ? 'No matching files.' : 'This directory is empty.'}
+                </p>
+              ) : (
+                <ul className='flex flex-col'>
+                  {matches
+                    ? matches.map((match) => (
+                        <li key={match.path}>
+                          <button
+                            type='button'
+                            onClick={() => void openFile(match.path)}
+                            className='flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-surface-hover'>
+                            <File className='size-3.5 shrink-0 text-fg-4' />
+                            <span className='min-w-0 flex-1 truncate font-mono text-label text-fg-1'>
+                              {match.relative}
+                            </span>
+                          </button>
+                        </li>
+                      ))
+                    : entries.map((entry) => (
+                        <li key={entry.path}>
+                          <button
+                            type='button'
+                            onClick={() =>
+                              entry.type === 'dir' ? void list(entry.path) : void openFile(entry.path)
+                            }
+                            className='flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-surface-hover'>
+                            <EntryIcon type={entry.type} />
+                            <span className='min-w-0 flex-1 truncate font-mono text-label text-fg-1'>
+                              {entry.name}
+                              {entry.type === 'dir' ? '/' : ''}
+                            </span>
+                            {entry.bytes !== undefined ? (
+                              <span className='shrink-0 text-label text-fg-4'>
+                                {formatBytes(entry.bytes)}
+                              </span>
+                            ) : null}
+                          </button>
+                        </li>
+                      ))}
+                </ul>
+              )}
+              {truncated && !matches ? (
+                <p className='text-label text-fg-4'>
+                  More entries than the server will return — use the search box.
+                </p>
+              ) : null}
+            </>
+          )}
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+/** A symlink is reported as itself and never silently resolved — following it is
+ * the next request's problem, and that request is refused if it escapes the roots. */
+function EntryIcon({ type }: { type: HostDirEntry['type'] }) {
+  if (type === 'dir') return <Folder className='size-3.5 shrink-0 text-accent' />
+  if (type === 'symlink') return <Link2 className='size-3.5 shrink-0 text-fg-4' />
+  return <File className='size-3.5 shrink-0 text-fg-4' />
+}

package/src/components/agent/McpDialog.tsx

@@ -0,0 +1,363 @@
+import { useCallback, useEffect, useState } from 'react'
+import type { WorkerDeckClient } from '@workerdeck/client'
+import type {
+  McpServerActionRequest,
+  McpServerStatusInfo,
+  McpServerToolInfo,
+} from '@workerdeck/protocol'
+import { ChevronLeft, ChevronRight, Power, PowerOff, RotateCw } from 'lucide-react'
+import { Badge, type BadgeProps } from '../ui/Badge.tsx'
+import { Button } from '../ui/Button.tsx'
+import { Dialog, DialogBody, DialogContent, DialogHeader, DialogRow } from '../ui/Dialog.tsx'
+import { Spinner } from '../ui/Spinner.tsx'
+import { cn } from '../../lib/utils.ts'
+
+export interface McpDialogProps {
+  client: WorkerDeckClient
+  sessionId: string | undefined
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  /**
+   * Whether this engine can reconnect/enable/disable a server
+   * (`EngineCapabilities.mcpServerActions`). False renders the panel read-only:
+   * codex reports rich status but exposes no per-server action, and buttons
+   * that 501 are worse than buttons that aren't there.
+   */
+  canManageServers?: boolean
+}
+
+/** The engine's status vocabulary is open — anything unrecognised renders
+ * neutrally rather than being forced into one of these. */
+const STATUS_VARIANT: Record<string, NonNullable<BadgeProps['variant']>> = {
+  connected: 'success',
+  failed: 'danger',
+  'needs-auth': 'warning',
+  pending: 'info',
+  disabled: 'neutral',
+}
+
+/**
+ * The session's MCP servers, at the CLI's own `/mcp` depth: servers → one server
+ * → its tools → one tool, with Reconnect / Enable / Disable where they apply.
+ *
+ * Two things vary by engine rather than being fixed here. **The actions** exist
+ * only where the engine has them (`canManageServers`): codex reports rich status
+ * but has no per-server reconnect or toggle, so its panel is read-only. And
+ * **tool parameters** appear only where the engine reports a schema — codex
+ * returns each tool's full JSON Schema, the Agent SDK returns none at all, so
+ * the tool view either renders it or says why it can't, rather than leaving a
+ * silent gap or claiming the absence is universal.
+ */
+export function McpDialog({
+  client,
+  sessionId,
+  open,
+  onOpenChange,
+  canManageServers = true,
+}: McpDialogProps) {
+  const [servers, setServers] = useState<McpServerStatusInfo[] | undefined>()
+  const [error, setError] = useState<string | undefined>()
+  const [loading, setLoading] = useState(false)
+  const [busyServer, setBusyServer] = useState<string | undefined>()
+  // The drill-down, by name rather than by object — an action replaces the whole
+  // list, and a held reference would go stale on the first Reconnect.
+  const [selectedServer, setSelectedServer] = useState<string | undefined>()
+  const [selectedTool, setSelectedTool] = useState<string | undefined>()
+
+  const load = useCallback(async () => {
+    if (!sessionId) return
+    setLoading(true)
+    setError(undefined)
+    try {
+      setServers(await client.listMcpServers(sessionId))
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Could not read MCP status')
+    } finally {
+      setLoading(false)
+    }
+  }, [client, sessionId])
+
+  useEffect(() => {
+    if (!open) return
+    setSelectedServer(undefined)
+    setSelectedTool(undefined)
+    void load()
+  }, [open, load])
+
+  const act = async (name: string, action: McpServerActionRequest['action']) => {
+    if (!sessionId) return
+    setBusyServer(name)
+    setError(undefined)
+    try {
+      setServers(await client.mcpServerAction(sessionId, name, action))
+    } catch (e) {
+      setError(e instanceof Error ? e.message : `Could not ${action} ${name}`)
+    } finally {
+      setBusyServer(undefined)
+    }
+  }
+
+  const server = servers?.find((s) => s.name === selectedServer)
+  const tool = server?.tools?.find((t) => t.name === selectedTool)
+  const title = tool?.name ?? server?.name ?? 'MCP servers'
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader
+          title={title}
+          description={
+            tool ? `${server?.name} tool` : server ? server.serverInfo?.name : undefined
+          }
+          actions={
+            selectedServer ? (
+              <Button
+                variant='ghost'
+                size='xs'
+                onClick={() => (selectedTool ? setSelectedTool(undefined) : setSelectedServer(undefined))}>
+                <ChevronLeft className='size-3.5' />
+                Back
+              </Button>
+            ) : (
+              <Button variant='ghost' size='xs' onClick={() => void load()} disabled={loading}>
+                {loading ? <Spinner className='size-3 text-current' /> : <RotateCw className='size-3' />}
+                Refresh
+              </Button>
+            )
+          }
+        />
+        <DialogBody>
+          {error ? (
+            <div className='mb-3 rounded-md bg-danger-bg px-3 py-2 text-body-sm text-danger'>
+              {error}
+            </div>
+          ) : null}
+          {tool ? (
+            <ToolView tool={tool} />
+          ) : server ? (
+            <ServerView
+              server={server}
+              busy={busyServer === server.name}
+              canManage={canManageServers}
+              onAct={(action) => void act(server.name, action)}
+              onSelectTool={setSelectedTool}
+            />
+          ) : error && !servers ? (
+            // The strip above already says what went wrong. Falling through to
+            // the list here would print "No MCP servers configured" underneath
+            // it — a claim about the operator's config that a failed request
+            // gives us no standing to make.
+            null
+          ) : (
+            <ServerList
+              servers={servers}
+              loading={loading}
+              onSelect={setSelectedServer}
+            />
+          )}
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function ServerList({
+  servers,
+  loading,
+  onSelect,
+}: {
+  servers: McpServerStatusInfo[] | undefined
+  loading: boolean
+  onSelect: (name: string) => void
+}) {
+  if (loading && !servers) {
+    return (
+      <div className='py-6 text-center'>
+        <Spinner className='size-4 text-fg-4' />
+      </div>
+    )
+  }
+  if (!servers?.length) {
+    return (
+      <p className='py-6 text-center text-body-sm text-fg-4'>
+        No MCP servers configured for this session.
+      </p>
+    )
+  }
+  // Grouped by where they were configured, like the CLI's own screen.
+  const scopes = [...new Set(servers.map((s) => s.scope ?? 'other'))]
+  return (
+    <div className='flex flex-col gap-4'>
+      {scopes.map((scope) => (
+        <div key={scope}>
+          <h3 className='text-label font-medium text-fg-3 capitalize'>{scope}</h3>
+          <ul className='mt-1 flex flex-col'>
+            {servers
+              .filter((s) => (s.scope ?? 'other') === scope)
+              .map((s) => (
+                <li key={s.name}>
+                  <button
+                    type='button'
+                    onClick={() => onSelect(s.name)}
+                    className='flex w-full items-center gap-2 rounded-md px-2 py-2 text-left transition-colors hover:bg-surface-hover'>
+                    <span className='min-w-0 flex-1 truncate text-body-sm text-fg-1'>{s.name}</span>
+                    {s.tools?.length ? (
+                      <span className='shrink-0 text-label text-fg-4'>{s.tools.length} tools</span>
+                    ) : null}
+                    <Badge variant={STATUS_VARIANT[s.status] ?? 'neutral'} dot className='shrink-0'>
+                      {s.status}
+                    </Badge>
+                    <ChevronRight className='size-3.5 shrink-0 text-fg-4' />
+                  </button>
+                </li>
+              ))}
+          </ul>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function ServerView({
+  server,
+  busy,
+  canManage,
+  onAct,
+  onSelectTool,
+}: {
+  server: McpServerStatusInfo
+  busy: boolean
+  canManage: boolean
+  onAct: (action: McpServerActionRequest['action']) => void
+  onSelectTool: (name: string) => void
+}) {
+  const disabled = server.status === 'disabled'
+  return (
+    <div className='flex flex-col gap-4'>
+      <div>
+        <DialogRow label='Status'>
+          <Badge variant={STATUS_VARIANT[server.status] ?? 'neutral'} dot>
+            {server.status}
+          </Badge>
+        </DialogRow>
+        {server.transport ? <DialogRow label='Transport'>{server.transport}</DialogRow> : null}
+        {server.scope ? <DialogRow label='Scope'>{server.scope}</DialogRow> : null}
+        {server.serverInfo ? (
+          <DialogRow label='Server'>
+            {server.serverInfo.name} {server.serverInfo.version}
+          </DialogRow>
+        ) : null}
+        {server.command ? (
+          <DialogRow label='Command' mono>
+            {[server.command, ...(server.args ?? [])].join(' ')}
+          </DialogRow>
+        ) : null}
+        {server.url ? (
+          <DialogRow label='URL' mono>
+            {server.url}
+          </DialogRow>
+        ) : null}
+      </div>
+
+      {server.error ? (
+        <div className='rounded-md bg-danger-bg px-3 py-2 text-body-sm break-words text-danger'>
+          {server.error}
+        </div>
+      ) : null}
+
+      {/* Absent, not disabled, when the engine has no per-server action: a
+          greyed-out Reconnect invites the question "why can't I?" on every
+          visit, where nothing at all reads as "this engine works differently". */}
+      {canManage ? (
+        <div className='flex gap-2'>
+          <Button variant='outline' size='sm' disabled={busy} onClick={() => onAct('reconnect')}>
+            {busy ? <Spinner className='size-3 text-current' /> : <RotateCw className='size-3' />}
+            Reconnect
+          </Button>
+          <Button
+            variant='outline'
+            size='sm'
+            disabled={busy}
+            onClick={() => onAct(disabled ? 'enable' : 'disable')}>
+            {disabled ? <Power className='size-3' /> : <PowerOff className='size-3' />}
+            {disabled ? 'Enable' : 'Disable'}
+          </Button>
+        </div>
+      ) : null}
+
+      <div>
+        <h3 className='text-label font-medium text-fg-3'>Tools</h3>
+        {!server.tools?.length ? (
+          <p className='py-2 text-body-sm text-fg-4'>
+            {server.status === 'connected'
+              ? 'This server exposes no tools.'
+              : 'Tools are listed once the server connects.'}
+          </p>
+        ) : (
+          <ul className='mt-1 flex flex-col'>
+            {server.tools.map((t) => (
+              <li key={t.name}>
+                <button
+                  type='button'
+                  onClick={() => onSelectTool(t.name)}
+                  className='flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-surface-hover'>
+                  <span className='min-w-0 flex-1 truncate font-mono text-label text-fg-1'>
+                    {t.name}
+                  </span>
+                  <ChevronRight className='size-3.5 shrink-0 text-fg-4' />
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function ToolView({ tool }: { tool: McpServerToolInfo }) {
+  const annotations = tool.annotations
+  return (
+    <div className='flex flex-col gap-3'>
+      {tool.description ? (
+        <p className='text-body-sm whitespace-pre-wrap text-fg-2'>{tool.description}</p>
+      ) : (
+        <p className='text-body-sm text-fg-4'>This tool carries no description.</p>
+      )}
+      {annotations ? (
+        <div className='flex flex-wrap gap-1.5'>
+          {annotations.readOnly ? <Badge variant='success'>read-only</Badge> : null}
+          {annotations.destructive ? <Badge variant='danger'>destructive</Badge> : null}
+          {annotations.openWorld ? <Badge variant='warning'>open world</Badge> : null}
+        </div>
+      ) : null}
+      {/* Engine-dependent, and said as such: codex returns each tool's full
+          JSON Schema, the Agent SDK returns none at all. So this is a real
+          section where one exists and an explanation where it doesn't — never a
+          silent gap, and never a claim that no engine has them. */}
+      {tool.inputSchema !== undefined ? (
+        <div>
+          <h3 className='text-label font-medium text-fg-3'>Parameters</h3>
+          <pre className='mt-1 max-h-64 overflow-auto rounded-md bg-surface px-3 py-2 text-label text-fg-2'>
+            {safeSchema(tool.inputSchema)}
+          </pre>
+        </div>
+      ) : (
+        <p className={cn('text-label text-fg-4')}>
+          Parameters aren’t available: this engine names and describes each tool but reports no
+          input schema.
+        </p>
+      )}
+    </div>
+  )
+}
+
+/** The schema is an opaque JSON document from another process — pretty-print it,
+ * and never let an unserializable value take the dialog down with it. */
+function safeSchema(schema: unknown): string {
+  try {
+    return JSON.stringify(schema, null, 2)
+  } catch {
+    return String(schema)
+  }
+}

package/src/components/agent/ModelSelect.tsx

@@ -29,15 +29,43 @@ export interface ModelSelectProps {
  * is a sentinel, not a model id — selecting it means "clear the override". */
 const isDefaultOption = (value: string) => value === 'default'
 
+/** Everything before a '[1m]'-style context-window suffix. */
+const dropVariant = (id: string) => id.replace(/\[.*\]$/, '')
+
+/** 'claude-opus-4-8' → "opus", 'sonnet' → "sonnet". The vendor prefix and the
+ * version tail are dropped; what is left is the name a person would say. */
+function family(id: string): string {
+  const parts = id.toLowerCase().split('-')
+  if (parts[0] === 'claude') parts.shift()
+  return parts[0] ?? ''
+}
+
+/**
+ * Whether a row is the one naming `model`.
+ *
+ * Three passes, narrowest first, because the rows and the id a session *reports*
+ * are written differently: the rows are aliases ('opus[1m]', 'sonnet',
+ * 'claude-fable-5[1m]') and a session reports a resolved wire id
+ * ('claude-opus-5[1m]'). `resolvedModel` is the server's own answer to this and
+ * wins when present; the family fallback covers a server that doesn't send it,
+ * which is the difference between the chip reading "Opus 5" and reading
+ * `claude-opus-5[1m]`. Kept identical to the iOS client's `ModelOption.matches`.
+ */
+function optionMatches(option: ModelOption, model: string): boolean {
+  if (model === option.value || model === option.resolvedModel) return true
+  const stripped = dropVariant(model)
+  // A row that declares what it resolves to is *authoritative*, including when
+  // it disagrees: two rows of the same family ("Opus 5" and "Opus 4.8") differ
+  // only here, so falling through to the family would match both.
+  if (option.resolvedModel) return stripped === dropVariant(option.resolvedModel)
+  const token = family(stripped)
+  return token !== '' && token === family(dropVariant(option.value))
+}
+
 /** Find the option matching a (possibly decorated/aliased) session model id. */
 function matchModel(models: ModelOption[], model?: string): ModelOption | undefined {
   if (!model) return undefined
-  const normalized = model.replace(/\[.*\]$/, '')
-  const concrete = models.filter((m) => !isDefaultOption(m.value))
-  return (
-    concrete.find((m) => m.value === normalized) ??
-    concrete.find((m) => normalized.includes(m.value) || m.value.includes(normalized))
-  )
+  return models.filter((m) => !isDefaultOption(m.value)).find((m) => optionMatches(m, model))
 }
 
 /** Compact model switcher for the composer toolbar; fed by the `capabilities` event.