@workerdeck/ui 0.22.0 → 1.0.0

package/src/components/agent/HostFilesDialog.tsx

@@ -1,31 +1,22 @@
 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 { ChevronLeft, File, 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'
+import { EntryIcon } from './EntryIcon.tsx'
 
 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[]>([])
@@ -54,22 +45,23 @@ export function HostFilesDialog({ client, cwd, open, onOpenChange }: HostFilesDi
     [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
+    if (!open) {
+      return
+    }
     setFile(undefined)
     setQuery('')
     setMatches(undefined)
     setError(undefined)
-    if (cwd) void list(cwd)
+    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
+    if (!open || !cwd) {
+      return
+    }
     const q = query.trim()
     if (!q) {
       setMatches(undefined)
@@ -92,10 +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')
@@ -109,87 +98,79 @@ export function HostFilesDialog({ client, cwd, open, onOpenChange }: HostFilesDi
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent size='lg'>
+      <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' />
+              <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' />
+              <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}
+        <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>
+              <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' />
+              <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'
+                  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 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>
+                <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'>
+                <ul className="flex flex-col">
                   {matches
                     ? matches.map((match) => (
                         <li key={match.path}>
                           <button
-                            type='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>
+                            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'>
+                            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'>
+                            <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>
+                              <span className="shrink-0 text-label text-fg-4">{formatBytes(entry.bytes)}</span>
                             ) : null}
                           </button>
                         </li>
@@ -197,9 +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}
             </>
           )}
@@ -208,11 +187,3 @@ export function HostFilesDialog({ client, cwd, open, onOpenChange }: HostFilesDi
     </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/Loader.tsx

@@ -1,39 +1,18 @@
 import { cn } from '../../lib/utils.ts'
 
 export interface LoaderProps {
-  /** Overrides the cycling verb — for a state that has one true name
-   * ("Starting session…"). */
   label?: string
-  /** When the current run began, for the elapsed clock. Absent = no clock.
-   * Unused by the card treatment; kept so the `cards` and `terminal` loaders
-   * take the same call site in `Transcript`. */
   startedAt?: number
-  /** Context tokens in play. Same story as `startedAt`. */
   tokens?: number
   className?: string
 }
 
-/**
- * "The agent is working and hasn't produced output yet."
- *
- * Three dots pulsing in CSS — the chat convention, for the `cards` variant. The
- * terminal theme has its own working line (`terminal/items.tsx`'s `WorkingRow`,
- * with the mark's pulse in the gutter and the run's readings beside the verb),
- * because there it is a *row of the transcript* rather than a spinner floating
- * over one.
- */
 export function Loader({ label, className }: LoaderProps) {
   return (
-    <div
-      data-slot='loader'
-      className={cn('flex items-center gap-2 py-1 text-body-sm text-fg-4', className)}>
-      <span className='flex items-center gap-1'>
+    <div data-slot="loader" className={cn('flex items-center gap-2 py-1 text-body-sm text-fg-4', className)}>
+      <span className="flex items-center gap-1">
         {[0, 1, 2].map((i) => (
-          <span
-            key={i}
-            className='size-1.5 animate-pulse rounded-full bg-fg-4'
-            style={{ animationDelay: `${i * 160}ms` }}
-          />
+          <span key={i} className="size-1.5 animate-pulse rounded-full bg-fg-4" style={{ animationDelay: `${i * 160}ms` }} />
         ))}
       </span>
       {label ? <span>{label}</span> : null}

package/src/components/agent/McpDialog.tsx

@@ -1,10 +1,6 @@
 import { useCallback, useEffect, useState } from 'react'
 import type { WorkerDeckClient } from '@workerdeck/client'
-import type {
-  McpServerActionRequest,
-  McpServerStatusInfo,
-  McpServerToolInfo,
-} from '@workerdeck/protocol'
+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'
@@ -17,18 +13,10 @@ export interface McpDialogProps {
   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
   className?: string
 }
 
-/** 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',
@@ -37,37 +25,18 @@ const STATUS_VARIANT: Record<string, NonNullable<BadgeProps['variant']>> = {
   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,
-  className,
-}: McpDialogProps) {
+export function McpDialog({ client, sessionId, open, onOpenChange, canManageServers = true, className }: 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
+    if (!sessionId) {
+      return
+    }
     setLoading(true)
     setError(undefined)
     try {
@@ -80,14 +49,18 @@ export function McpDialog({
   }, [client, sessionId])
 
   useEffect(() => {
-    if (!open) return
+    if (!open) {
+      return
+    }
     setSelectedServer(undefined)
     setSelectedTool(undefined)
     void load()
   }, [open, load])
 
   const act = async (name: string, action: McpServerActionRequest['action']) => {
-    if (!sessionId) return
+    if (!sessionId) {
+      return
+    }
     setBusyServer(name)
     setError(undefined)
     try {
@@ -108,32 +81,23 @@ export function McpDialog({
       <DialogContent className={className}>
         <DialogHeader
           title={title}
-          description={
-            tool ? `${server?.name} tool` : server ? server.serverInfo?.name : undefined
-          }
+          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' />
+              <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' />}
+              <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}
+          {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 ? (
@@ -144,18 +108,8 @@ export function McpDialog({
               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}
-            />
+          ) : error && !servers ? null : (
+            <ServerList servers={servers} loading={loading} onSelect={setSelectedServer} />
           )}
         </DialogBody>
       </DialogContent>
@@ -174,42 +128,36 @@ function ServerList({
 }) {
   if (loading && !servers) {
     return (
-      <div className='py-6 text-center'>
-        <Spinner className='size-4 text-fg-4' />
+      <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>
-    )
+    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'>
+    <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'>
+          <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'
+                    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'>
+                    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' />
+                    <ChevronRight className="size-3.5 shrink-0 text-fg-4" />
                   </button>
                 </li>
               ))}
@@ -235,78 +183,64 @@ function ServerView({
 }) {
   const disabled = server.status === 'disabled'
   return (
-    <div className='flex flex-col gap-4'>
+    <div className="flex flex-col gap-4">
       <div>
-        <DialogRow label='Status'>
+        <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.transport ? <DialogRow label="Transport">{server.transport}</DialogRow> : null}
+        {server.scope ? <DialogRow label="Scope">{server.scope}</DialogRow> : null}
         {server.serverInfo ? (
-          <DialogRow label='Server'>
+          <DialogRow label="Server">
             {server.serverInfo.name} {server.serverInfo.version}
           </DialogRow>
         ) : null}
         {server.command ? (
-          <DialogRow label='Command' mono>
+          <DialogRow label="Command" mono>
             {[server.command, ...(server.args ?? [])].join(' ')}
           </DialogRow>
         ) : null}
         {server.url ? (
-          <DialogRow label='URL' mono>
+          <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}
+      {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' />}
+        <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' />}
+          <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>
+        <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 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'>
+          <ul className="mt-1 flex flex-col">
             {server.tools.map((t) => (
               <li key={t.name}>
                 <button
-                  type='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' />
+                  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>
             ))}
@@ -320,42 +254,35 @@ function ServerView({
 function ToolView({ tool }: { tool: McpServerToolInfo }) {
   const annotations = tool.annotations
   return (
-    <div className='flex flex-col gap-3'>
+    <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 whitespace-pre-wrap text-fg-2">{tool.description}</p>
       ) : (
-        <p className='text-body-sm text-fg-4'>This tool carries no 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 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'>
+          <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.
+          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)