@workerdeck/ui 0.9.0 → 0.12.0

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/Message.tsx

@@ -1,41 +1,75 @@
 import type { HTMLAttributes } from 'react'
 import { cn } from '../../lib/utils.ts'
+import { LINE_TEXT, LineGlyph, useLines } from './transcript-variant.tsx'
 
 export interface MessageProps extends HTMLAttributes<HTMLDivElement> {
   from: 'user' | 'assistant'
 }
 
-/** One chat turn row. User messages sit right in a bubble; assistant content is flat,
- * full-width (the AI-chat convention — assistant output is the page, user input is quoted). */
-export function Message({ from, className, ...props }: MessageProps) {
+/**
+ * One chat turn row.
+ *
+ * `cards`: user messages sit right in a bubble; assistant content is flat,
+ * full-width (the AI-chat convention — assistant output is the page, user input
+ * is quoted).
+ *
+ * `lines`: both are left-aligned full-width line items behind a gutter glyph —
+ * `❯` for what was typed, `●` for what the model said. No bubble: a prompt is
+ * already distinguishable by its marker, and the bubble's padding is vertical
+ * space the terminal treatment refuses to spend.
+ */
+export function Message({ from, className, children, ...props }: MessageProps) {
+  const lines = useLines()
   return (
     <div
       data-slot='message'
       data-from={from}
       className={cn(
-        'flex w-full flex-col gap-1',
-        from === 'user' ? 'items-end' : 'items-start',
+        'flex w-full',
+        lines
+          ? cn(
+              'flex-row gap-2',
+              // What YOU said, on a band of its own — the CLI's own treatment.
+              // Full-bleed (the negative margin cancels the row's padding) so
+              // the band lines up with the hover highlight rather than sitting
+              // inside it, and square-ish so it reads as a strip, not a bubble.
+              from === 'user' && '-mx-1 rounded-sm bg-surface px-1',
+            )
+          : cn('flex-col gap-1', from === 'user' ? 'items-end' : 'items-start'),
         className,
       )}
-      {...props}
-    />
+      {...props}>
+      {lines ? (
+        <>
+          <LineGlyph className={from === 'user' ? 'text-accent' : 'text-fg-3'}>
+            {from === 'user' ? '❯' : '●'}
+          </LineGlyph>
+          <div className='flex min-w-0 flex-1 flex-col gap-1'>{children}</div>
+        </>
+      ) : (
+        children
+      )}
+    </div>
   )
 }
 
-export function MessageContent({
-  className,
-  ...props
-}: HTMLAttributes<HTMLDivElement>) {
+export function MessageContent({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  const lines = useLines()
   return (
     <div
       data-slot='message-content'
       className={cn(
-        'min-w-0 text-body-sm leading-6 text-fg-1',
-        // Bubble treatment only within a user message row.
-        'in-data-[from=user]:max-w-[85%] in-data-[from=user]:rounded-lg in-data-[from=user]:rounded-br-sm',
-        'in-data-[from=user]:bg-accent-bg in-data-[from=user]:px-3 in-data-[from=user]:py-2',
-        'in-data-[from=user]:whitespace-pre-wrap',
-        'in-data-[from=assistant]:w-full',
+        'min-w-0',
+        lines
+          ? cn('w-full text-fg-1', LINE_TEXT, 'in-data-[from=user]:whitespace-pre-wrap')
+          : cn(
+              'text-body-sm leading-6 text-fg-1',
+              // Bubble treatment only within a user message row.
+              'in-data-[from=user]:max-w-[85%] in-data-[from=user]:rounded-lg in-data-[from=user]:rounded-br-sm',
+              'in-data-[from=user]:bg-accent-bg in-data-[from=user]:px-3 in-data-[from=user]:py-2',
+              'in-data-[from=user]:whitespace-pre-wrap',
+              'in-data-[from=assistant]:w-full',
+            ),
         className,
       )}
       {...props}

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.