@workerdeck/ui 0.9.0 → 0.10.0

package/src/components/agent/EditorTabs.tsx

@@ -0,0 +1,165 @@
+import { useEffect, useRef, type MouseEvent as ReactMouseEvent } from 'react'
+import { isDirty, type OpenFile } from '@workerdeck/react'
+import { X } from 'lucide-react'
+import { cn } from '../../lib/utils.ts'
+import { Tip, TooltipProvider } from '../ui/Tooltip.tsx'
+import { formatBytes } from '../../lib/format.ts'
+
+export interface EditorTabsProps {
+  files: OpenFile[]
+  activePath?: string
+  onActivate: (path: string) => void
+  onClose: (path: string) => void
+  className?: string
+}
+
+/**
+ * The open-file tab strip.
+ *
+ * Hand-rolled rather than built on `@base-ui/react`'s `Tabs`: a VS Code tab
+ * carries a close button, and a `<button>` inside a `<button>` is invalid HTML —
+ * getting the primitive to render something else costs more than the roving
+ * tabindex it would have provided. So that part is here, explicitly, along with
+ * the two affordances that actually make a tab strip feel right: middle-click to
+ * close, and the active tab scrolling itself into view.
+ *
+ * Deliberately state-free. Which files are open, which is focused and what
+ * closing does are all decided by `useOpenFiles`.
+ */
+export function EditorTabs({ files, activePath, onActivate, onClose, className }: EditorTabsProps) {
+  return (
+    // Grouped, so moving along the strip shows each tab's path immediately
+    // instead of re-serving the open delay on every tab.
+    <TooltipProvider delay={500} closeDelay={0}>
+      <div
+        data-slot='editor-tabs'
+        role='tablist'
+        aria-label='Open files'
+        className={cn(
+          'flex shrink-0 items-stretch overflow-x-auto border-b border-border bg-surface',
+          className,
+        )}>
+        {files.map((file) => (
+          <Tab
+            key={file.path}
+            file={file}
+            active={file.path === activePath}
+            onActivate={() => onActivate(file.path)}
+            onClose={() => onClose(file.path)}
+            onArrow={(direction) => {
+              const index = files.findIndex((f) => f.path === file.path)
+              const next = files[index + direction]
+              if (next) onActivate(next.path)
+            }}
+          />
+        ))}
+      </div>
+    </TooltipProvider>
+  )
+}
+
+function Tab({
+  file,
+  active,
+  onActivate,
+  onClose,
+  onArrow,
+}: {
+  file: OpenFile
+  active: boolean
+  onActivate: () => void
+  onClose: () => void
+  onArrow: (direction: 1 | -1) => void
+}) {
+  const dirty = isDirty(file)
+  const ref = useRef<HTMLDivElement>(null)
+  // Opening a file from the tree can push the new tab off the end of the strip;
+  // the point of opening it was to look at it. `nearest` scrolls the minimum, so
+  // a tab already on screen stays exactly where it is.
+  useEffect(() => {
+    if (active) ref.current?.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+  }, [active])
+
+  const onAuxClick = (event: ReactMouseEvent) => {
+    // Middle click. `auxclick` rather than `mousedown` so it matches how every
+    // other middle-click target on the platform behaves.
+    if (event.button !== 1) return
+    event.preventDefault()
+    onClose()
+  }
+
+  return (
+    // The tab *is* the trigger (`render`), and it carries the full path — which
+    // is why the viewer no longer spends a whole row on a line of monospace
+    // nobody reads. No `title` alongside it: the browser's native tooltip would
+    // show up underneath this one.
+    <Tip
+      side='bottom'
+      render={
+        <div
+          ref={ref}
+          role='tab'
+          tabIndex={active ? 0 : -1}
+          aria-selected={active}
+          onClick={onActivate}
+          onAuxClick={onAuxClick}
+          onKeyDown={(event) => {
+            if (event.key === 'ArrowRight') onArrow(1)
+            else if (event.key === 'ArrowLeft') onArrow(-1)
+            else if (event.key === 'Enter' || event.key === ' ') onActivate()
+            else return
+            event.preventDefault()
+          }}
+          className={cn(
+            'group flex min-w-0 shrink-0 cursor-pointer items-center gap-1.5 border-r border-border px-3 py-1.5 transition-colors',
+            'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent focus-visible:ring-inset',
+            active ? 'bg-bg text-fg-1' : 'text-fg-3 hover:bg-surface-hover hover:text-fg-2',
+          )}
+        />
+      }
+      content={
+        <span className='flex flex-col gap-0.5'>
+          <span className='font-mono break-all'>{file.path}</span>
+          {file.bytes !== undefined ? (
+            <span className='text-fg-4'>{formatBytes(file.bytes)}</span>
+          ) : null}
+        </span>
+      }>
+      <span className={cn('max-w-40 truncate font-mono text-label', dirty && 'italic')}>
+        {file.name}
+      </span>
+      {/* Errors are the one state the strip shows, because a failed tab
+          otherwise looks identical to a loaded one until you focus it. */}
+      {file.status === 'error' ? <span className='shrink-0 text-danger'>!</span> : null}
+      <button
+        type='button'
+        aria-label={dirty ? `Close ${file.name} (unsaved changes)` : `Close ${file.name}`}
+        onClick={(event) => {
+          // Without this the click also activates the tab being closed, which
+          // fights the reducer's focus-the-neighbour rule.
+          event.stopPropagation()
+          onClose()
+        }}
+        className={cn(
+          'shrink-0 rounded p-0.5 text-fg-4 transition-opacity hover:bg-surface-hover hover:text-fg-1',
+          // Always reachable by keyboard and on touch; only *shown* on hover for
+          // the tab you are pointing at, as VS Code does.
+          active || dirty
+            ? 'opacity-70'
+            : 'opacity-0 group-hover:opacity-70 focus-visible:opacity-100',
+        )}>
+        {/* VS Code's move: a dirty tab shows a dot where the ✕ goes, and the ✕
+            comes back when you point at it — so unsaved work is visible at rest
+            without taking away the way to close it. */}
+        <span className={cn('block', dirty && 'group-hover:hidden')}>
+          {dirty ? <span className='block size-3 rounded-full bg-fg-2' /> : <X className='size-3' />}
+        </span>
+        {dirty ? (
+          <span className='hidden group-hover:block'>
+            <X className='size-3' />
+          </span>
+        ) : null}
+      </button>
+    </Tip>
+  )
+}

package/src/components/agent/FileTree.tsx

@@ -0,0 +1,287 @@
+import { useEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react'
+import type { UseHostFileSearchResult, UseHostFileTreeResult } from '@workerdeck/react'
+import type { HostDirEntry, HostFileMatch } from '@workerdeck/protocol'
+import {
+  ChevronRight,
+  File,
+  Folder,
+  FolderOpen,
+  Link2,
+  PanelLeftClose,
+  RefreshCw,
+  Search,
+  X,
+} from 'lucide-react'
+import { cn } from '../../lib/utils.ts'
+import { Button } from '../ui/Button.tsx'
+import { Input } from '../ui/Input.tsx'
+import { Spinner } from '../ui/Spinner.tsx'
+
+export interface FileTreeProps {
+  /** Tree state from `useHostFileTree` — this component holds none of its own. */
+  tree: UseHostFileTreeResult
+  /** Optional search from `useHostFileSearch`; omit and the box is not offered. */
+  search?: UseHostFileSearchResult
+  /** Path of the focused file, highlighted in the tree. */
+  activePath?: string
+  onOpenFile: (path: string) => void
+  /** Offered as a button in the header when given. */
+  onCollapse?: () => void
+  style?: CSSProperties
+  className?: string
+}
+
+/** How far one level of nesting indents, in pixels. Inline rather than a Tailwind
+ * class because depth is a number at runtime and `pl-${n}` is not a class. */
+const INDENT = 12
+
+/**
+ * The workspace's left rail: an expandable tree of the session's project,
+ * with a search box over the same fuzzy route `@file` completion uses.
+ *
+ * Presentational by construction — every piece of state it renders comes from
+ * the hooks in `@workerdeck/react`, and the only thing it owns is the search
+ * query, which is the text in its own input.
+ *
+ * Searching replaces the tree with matches rather than filtering it: the route
+ * answers with paths from all over the project, and threading those back into
+ * tree positions would mean expanding a dozen directories to show six results.
+ */
+export function FileTree({
+  tree,
+  search,
+  activePath,
+  onOpenFile,
+  onCollapse,
+  style,
+  className,
+}: FileTreeProps) {
+  const [query, setQuery] = useState('')
+  const [matches, setMatches] = useState<HostFileMatch[] | undefined>()
+  const searching = query.trim().length > 0
+
+  // Debounced, and only while there is something to search for — an empty box
+  // means "show me the tree again", not "match everything".
+  useEffect(() => {
+    if (!search?.available) return
+    const q = query.trim()
+    if (!q) {
+      setMatches(undefined)
+      return
+    }
+    const controller = new AbortController()
+    const timer = setTimeout(() => {
+      void search.search(q, { limit: 60, signal: controller.signal }).then((found) => {
+        if (!controller.signal.aborted) setMatches(found)
+      })
+    }, 150)
+    return () => {
+      controller.abort()
+      clearTimeout(timer)
+    }
+  }, [search, query])
+
+  return (
+    <div
+      data-slot='file-tree'
+      style={style}
+      className={cn('flex min-h-0 min-w-0 flex-col bg-surface', className)}>
+      <div className='flex items-center gap-1 px-2 pt-2'>
+        {search?.available ? (
+          <div className='relative min-w-0 flex-1'>
+            <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 files…'
+              className='h-7 pr-7 pl-7 text-label'
+              spellCheck={false}
+            />
+            {searching ? (
+              <button
+                type='button'
+                onClick={() => setQuery('')}
+                aria-label='Clear search'
+                className='absolute top-1/2 right-1.5 -translate-y-1/2 text-fg-4 transition-colors hover:text-fg-2'>
+                <X className='size-3.5' />
+              </button>
+            ) : null}
+          </div>
+        ) : (
+          <span className='min-w-0 flex-1 truncate px-1 font-mono text-label text-fg-4'>
+            {tree.root}
+          </span>
+        )}
+        <Button
+          variant='ghost'
+          size='icon-sm'
+          aria-label='Refresh the file tree'
+          onClick={() => tree.refresh()}>
+          <RefreshCw className='size-3.5 text-fg-3' />
+        </Button>
+        {onCollapse ? (
+          <Button variant='ghost' size='icon-sm' aria-label='Hide project files' onClick={onCollapse}>
+            <PanelLeftClose className='size-3.5 text-fg-3' />
+          </Button>
+        ) : null}
+      </div>
+
+      <div className='min-h-0 flex-1 overflow-auto px-1 py-1'>
+        {tree.error ? (
+          <p className='px-2 py-3 text-body-sm text-danger'>{tree.error}</p>
+        ) : searching ? (
+          matches === undefined ? (
+            <div className='py-6 text-center'>
+              <Spinner className='size-4 text-fg-4' />
+            </div>
+          ) : matches.length === 0 ? (
+            <p className='px-2 py-6 text-center text-body-sm text-fg-4'>No matching files.</p>
+          ) : (
+            <ul>
+              {matches.map((match) => (
+                <li key={match.path}>
+                  <Row
+                    label={fileName(match.relative)}
+                    // The directory, dimmed and truncated separately, so a deep
+                    // path cannot push the filename out of the row — a rail full
+                    // of `apps/ios/DerivedData/B…` says nothing about which file
+                    // each hit is.
+                    detail={directoryOf(match.relative)}
+                    title={match.relative}
+                    icon={<File className='size-3.5 shrink-0 text-fg-4' />}
+                    active={match.path === activePath}
+                    onClick={() => onOpenFile(match.path)}
+                  />
+                </li>
+              ))}
+            </ul>
+          )
+        ) : tree.loading ? (
+          <div className='py-6 text-center'>
+            <Spinner className='size-4 text-fg-4' />
+          </div>
+        ) : tree.rows.length === 0 ? (
+          <p className='px-2 py-6 text-center text-body-sm text-fg-4'>This project is empty.</p>
+        ) : (
+          <ul role='tree' aria-label='Project files'>
+            {tree.rows.map((row) => (
+              <li key={row.entry.path} role='treeitem' aria-expanded={row.expanded} aria-level={row.depth + 1}>
+                <Row
+                  label={row.entry.name}
+                  indent={row.depth}
+                  active={row.entry.path === activePath}
+                  icon={
+                    row.entry.type === 'dir' ? (
+                      row.loading ? (
+                        <Spinner className='size-3.5 shrink-0 text-fg-4' />
+                      ) : row.expanded ? (
+                        <FolderOpen className='size-3.5 shrink-0 text-accent' />
+                      ) : (
+                        <Folder className='size-3.5 shrink-0 text-accent' />
+                      )
+                    ) : (
+                      <EntryIcon type={row.entry.type} />
+                    )
+                  }
+                  chevron={
+                    row.entry.type === 'dir' ? (
+                      <ChevronRight
+                        className={cn(
+                          'size-3 shrink-0 text-fg-4 transition-transform',
+                          row.expanded && 'rotate-90',
+                        )}
+                      />
+                    ) : undefined
+                  }
+                  onClick={() =>
+                    row.entry.type === 'dir'
+                      ? tree.toggle(row.entry.path)
+                      : onOpenFile(row.entry.path)
+                  }
+                />
+                {row.truncated ? (
+                  <p
+                    className='truncate py-0.5 text-label text-fg-4'
+                    style={{ paddingLeft: (row.depth + 1) * INDENT + 22 }}>
+                    More entries than the server will return — use search.
+                  </p>
+                ) : null}
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  )
+}
+
+/** One clickable line. A directory and a file differ only in what the click does
+ * and whether there is a chevron — visually they are the same row. */
+function Row({
+  label,
+  detail,
+  title,
+  icon,
+  chevron,
+  indent = 0,
+  active,
+  onClick,
+}: {
+  label: string
+  /** Secondary text after the label, dimmed and the first thing to be truncated. */
+  detail?: string
+  title?: string
+  icon: ReactNode
+  chevron?: ReactNode
+  indent?: number
+  active?: boolean
+  onClick: () => void
+}) {
+  // Scroll a row that became active elsewhere (a search hit, a `reveal`) into
+  // view, but never yank the list while someone is reading it — `nearest` moves
+  // the minimum and does nothing when the row is already visible.
+  const ref = useRef<HTMLButtonElement>(null)
+  useEffect(() => {
+    if (active) ref.current?.scrollIntoView({ block: 'nearest' })
+  }, [active])
+
+  return (
+    <button
+      ref={ref}
+      type='button'
+      onClick={onClick}
+      title={title ?? label}
+      style={{ paddingLeft: indent * INDENT + 4 }}
+      className={cn(
+        'flex w-full items-center gap-1 rounded py-1 pr-2 text-left transition-colors',
+        active ? 'bg-surface-hover text-fg-1' : 'text-fg-2 hover:bg-surface-hover',
+      )}>
+      <span className='flex size-3 shrink-0 items-center justify-center'>{chevron}</span>
+      {icon}
+      {/* `shrink-0` on the name and `min-w-0` on the detail: when the row runs
+          out of room the directory gives way and the filename stays whole. */}
+      <span className='shrink-0 truncate font-mono text-label'>{label}</span>
+      {detail ? (
+        <span className='min-w-0 flex-1 truncate font-mono text-label text-fg-4'>{detail}</span>
+      ) : null}
+    </button>
+  )
+}
+
+/** Last segment of a relative match. */
+function fileName(relative: string): string {
+  return relative.slice(relative.lastIndexOf('/') + 1)
+}
+
+/** Everything before it, or `undefined` for a file at the search root. */
+function directoryOf(relative: string): string | undefined {
+  const cut = relative.lastIndexOf('/')
+  return cut === -1 ? undefined : relative.slice(0, cut)
+}
+
+/** 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 === '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/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>
+  )
+}