@workerdeck/ui 0.7.0 → 0.11.0

package/src/components/agent/FileViewer.tsx

@@ -0,0 +1,148 @@
+import type { ReactNode } from 'react'
+import type { OpenFile } from '@workerdeck/react'
+import { currentText, isDirty } from '@workerdeck/react'
+import { FileWarning, TriangleAlert } from 'lucide-react'
+import { cn } from '../../lib/utils.ts'
+import { Button } from '../ui/Button.tsx'
+import { Spinner } from '../ui/Spinner.tsx'
+import { CodeEditor } from './CodeEditor.tsx'
+
+export interface FileViewerProps {
+  file: OpenFile | undefined
+  /** From `/fs/roots`. False renders the editor read-only rather than letting
+   * someone type into a file this gateway will refuse to write. */
+  canWrite?: boolean
+  onChange?: (path: string, content: string) => void
+  onSave?: (path: string) => void
+  /** Discard this tab's edits — local only, no re-read. */
+  onRevert?: (path: string) => void
+  /** Take the version on disk, discarding this tab's edits. */
+  onReload?: (path: string) => void
+  /** Take this tab's version, over whatever is on disk now. */
+  onOverwrite?: (path: string) => void
+  onDismissConflict?: (path: string) => void
+  className?: string
+}
+
+/**
+ * The focused file: Monaco, plus the states a file can be in that are not
+ * "here is some text".
+ *
+ * No path row — the tab's tooltip carries the path and the size, and a line of
+ * monospace above every file is chrome that never earns its height.
+ */
+export function FileViewer({
+  file,
+  canWrite,
+  onChange,
+  onSave,
+  onRevert,
+  onReload,
+  onOverwrite,
+  onDismissConflict,
+  className,
+}: FileViewerProps) {
+  if (!file) return null
+
+  return (
+    <div
+      data-slot='file-viewer'
+      className={cn('flex min-h-0 min-w-0 flex-1 flex-col bg-bg', className)}>
+      {/* The one failure with a choice attached, so it gets a bar rather than a
+          toast: the agent rewrote this file while it was open, and which
+          version wins is not something to decide on the user's behalf. */}
+      {file.conflict ? (
+        <div className='flex shrink-0 flex-wrap items-center gap-2 border-b border-warning/40 bg-warning-bg px-3 py-2'>
+          <TriangleAlert className='size-3.5 shrink-0 text-warning' />
+          <span className='min-w-0 flex-1 text-body-sm text-warning'>
+            This file changed on disk since you opened it.
+          </span>
+          <Button variant='outline' size='xs' onClick={() => onReload?.(file.path)}>
+            Use the version on disk
+          </Button>
+          <Button variant='outline' size='xs' onClick={() => onOverwrite?.(file.path)}>
+            Keep mine
+          </Button>
+          <Button variant='ghost' size='xs' onClick={() => onDismissConflict?.(file.path)}>
+            Dismiss
+          </Button>
+        </div>
+      ) : file.saveError ? (
+        <div className='flex shrink-0 items-center gap-2 border-b border-danger/40 bg-danger-bg px-3 py-2'>
+          <TriangleAlert className='size-3.5 shrink-0 text-danger' />
+          <span className='min-w-0 flex-1 text-body-sm text-danger'>{file.saveError}</span>
+          <Button variant='ghost' size='xs' onClick={() => onDismissConflict?.(file.path)}>
+            Dismiss
+          </Button>
+        </div>
+      ) : null}
+
+      {file.status === 'loading' ? (
+        <Centred>
+          <Spinner className='size-4 text-fg-4' />
+        </Centred>
+      ) : file.status === 'error' ? (
+        <Centred>
+          <TriangleAlert className='size-4 text-danger' />
+          <p className='text-body-sm text-danger'>{file.error}</p>
+        </Centred>
+      ) : file.status === 'binary' ? (
+        <Centred>
+          <FileWarning className='size-4 text-fg-4' />
+          <p className='text-body-sm text-fg-4'>This file isn’t text.</p>
+          {/* Said out loud, because "can't show it" and "editing it here would
+              destroy it" are different reassurances. */}
+          <p className='text-label text-fg-4'>It can’t be edited here without corrupting it.</p>
+        </Centred>
+      ) : (
+        <CodeEditor
+          path={file.path}
+          value={currentText(file)}
+          readOnly={!canWrite}
+          onChange={onChange ? (content) => onChange(file.path, content) : undefined}
+          onSave={onSave ? () => onSave(file.path) : undefined}
+        />
+      )}
+
+      {/* A status strip only while there is something to say. Saving is fast
+          enough that a permanent row would mostly be blank. */}
+      {file.status === 'ready' && (file.saving || isDirty(file) || !canWrite) ? (
+        <div className='flex shrink-0 items-center gap-2 border-t border-border px-3 py-1'>
+          {file.saving ? (
+            <>
+              <Spinner className='size-3 text-fg-4' />
+              <span className='text-label text-fg-4'>Saving…</span>
+            </>
+          ) : !canWrite ? (
+            <span className='text-label text-fg-4'>
+              Read-only — this gateway doesn’t allow writes.
+            </span>
+          ) : (
+            <>
+              <span className='text-label text-fg-3'>Unsaved changes</span>
+              <span className='flex-1' />
+              {/* Revert, not reload: discard *my* edits and go back to what
+                  this tab read. Re-reading is the conflict bar's job, and it is
+                  a different question. */}
+              <Button variant='ghost' size='xs' onClick={() => onRevert?.(file.path)}>
+                Revert
+              </Button>
+              <Button variant='outline' size='xs' onClick={() => onSave?.(file.path)}>
+                Save
+                <span className='ml-1 text-fg-4'>⌘S</span>
+              </Button>
+            </>
+          )}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+function Centred({ children }: { children: ReactNode }) {
+  return (
+    <div className='flex min-h-0 flex-1 flex-col items-center justify-center gap-2 p-6'>
+      {children}
+    </div>
+  )
+}

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

@@ -1,21 +1,127 @@
+import { useEffect, useState } from 'react'
 import { cn } from '../../lib/utils.ts'
+import { formatDuration, formatTokens } from '../../lib/format.ts'
+import { LineGlyph, useLines } from './transcript-variant.tsx'
+
+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. */
+  startedAt?: number
+  /** Context tokens in play, shown beside the clock. */
+  tokens?: number
+  className?: string
+}
+
+/**
+ * The frames of the working marker, and the rate they turn over.
+ *
+ * A four-pointed star growing and shrinking — it reads as *activity* at a glance
+ * without any of the pixel-fitting a braille or block spinner needs, and it is
+ * the same shape a terminal agent uses because a terminal is where this
+ * vocabulary comes from. ~8fps: fast enough to be alive, slow enough not to
+ * strobe next to streaming text.
+ */
+const FRAMES = ['✢', '✳', '✶', '✻', '✽', '✻', '✶', '✳']
+const FRAME_MS = 120
+
+/**
+ * What it says it is doing while it hasn't said anything yet. Cycled on a slow
+ * clock so a long turn doesn't sit under one frozen word — a still label reads
+ * as a hung process, which is exactly what this is meant to disprove.
+ */
+const VERBS = [
+  'Working',
+  'Thinking',
+  'Churning',
+  'Pondering',
+  'Whirring',
+  'Computing',
+  'Percolating',
+  'Tinkering',
+  'Deliberating',
+  'Simmering',
+  'Crunching',
+  'Noodling',
+]
+const VERB_MS = 4000
+
+/** Ticks while mounted, at the spinner's rate. Mounted only while a turn is in
+ * flight, so nothing here runs on an idle session. */
+function useFrames(animated: boolean): number {
+  const [frame, setFrame] = useState(0)
+  useEffect(() => {
+    if (!animated) return
+    const timer = setInterval(() => setFrame((f) => f + 1), FRAME_MS)
+    return () => clearInterval(timer)
+  }, [animated])
+  return frame
+}
+
+/** The OS-level "stop moving things" setting. A spinner is decoration; the word
+ * beside it carries the meaning, so honouring this costs nothing. */
+function usePrefersReducedMotion(): boolean {
+  const [reduced, setReduced] = useState(false)
+  useEffect(() => {
+    const query = window.matchMedia?.('(prefers-reduced-motion: reduce)')
+    if (!query) return
+    setReduced(query.matches)
+    const onChange = () => setReduced(query.matches)
+    query.addEventListener('change', onChange)
+    return () => query.removeEventListener('change', onChange)
+  }, [])
+  return reduced
+}
+
+/**
+ * "The agent is working and hasn't produced output yet."
+ *
+ * `lines`: a terminal working line — animated glyph in the gutter, a verb, and
+ * the readings that answer "should I still be waiting?" in one parenthesis.
+ * `cards`: the three-dot pulse, unchanged.
+ */
+export function Loader({ label, startedAt, tokens, className }: LoaderProps) {
+  const lines = useLines()
+  const reducedMotion = usePrefersReducedMotion()
+  const frame = useFrames(lines && !reducedMotion)
+
+  if (!lines) {
+    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'>
+          {[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>
+        {label ? <span>{label}</span> : null}
+      </div>
+    )
+  }
+
+  // Derived from the clock rather than kept in state: the frame tick is already
+  // re-rendering, so the seconds and the verb come along for free.
+  const elapsed = startedAt === undefined ? undefined : Date.now() - startedAt
+  const verb =
+    label ?? VERBS[Math.floor((elapsed ?? 0) / VERB_MS) % VERBS.length] ?? VERBS[0]
+  const readings = [
+    elapsed !== undefined ? formatDuration(elapsed) : undefined,
+    tokens !== undefined ? `↓ ${formatTokens(tokens)}` : undefined,
+  ].filter(Boolean)
 
-/** Three-dot pulse shown while the assistant hasn't produced output yet. */
-export function Loader({ label, className }: { label?: string; className?: string }) {
   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'>
-        {[0, 1, 2].map((i) => (
-          <span
-            key={i}
-            className='size-1.5 animate-pulse rounded-full bg-fg-4'
-            style={{ animationDelay: `${i * 160}ms` }}
-          />
-        ))}
+    <div data-slot='loader' className={cn('flex items-baseline gap-2', className)}>
+      <LineGlyph className='text-accent'>{FRAMES[frame % FRAMES.length]}</LineGlyph>
+      <span className='min-w-0 flex-1 text-body-sm leading-5 text-fg-3'>
+        {verb}…{' '}
+        {readings.length ? <span className='text-label text-fg-4'>({readings.join(' · ')})</span> : null}
       </span>
-      {label ? <span>{label}</span> : null}
     </div>
   )
 }