@workerdeck/ui 0.22.0 → 1.0.0

package/src/components/agent/FileTree.tsx

@@ -1,69 +1,34 @@
 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 type { HostFileMatch } from '@workerdeck/protocol'
+import { ChevronRight, File, Folder, FolderOpen, 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'
+import { EntryIcon } from './EntryIcon.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) {
+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
+    if (!search?.available) {
+      return
+    }
     const q = query.trim()
     if (!q) {
       setMatches(undefined)
@@ -72,7 +37,9 @@ export function FileTree({
     const controller = new AbortController()
     const timer = setTimeout(() => {
       void search.search(q, { limit: 60, signal: controller.signal }).then((found) => {
-        if (!controller.signal.aborted) setMatches(found)
+        if (!controller.signal.aborted) {
+          setMatches(found)
+        }
       })
     }, 150)
     return () => {
@@ -82,71 +49,61 @@ export function FileTree({
   }, [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'>
+    <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' />
+          <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'
+              placeholder="Search files…"
+              className="h-7 pr-7 pl-7 text-label"
               spellCheck={false}
             />
             {searching ? (
               <button
-                type='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' />
+                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 text-label text-fg-4'>{tree.root}</span>
+          <span className="min-w-0 flex-1 truncate px-1 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 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 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'>
+      <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>
+          <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 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>
+            <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' />}
+                    icon={<File className="size-3.5 shrink-0 text-fg-4" />}
                     active={match.path === activePath}
                     onClick={() => onOpenFile(match.path)}
                   />
@@ -155,15 +112,15 @@ export function FileTree({
             </ul>
           )
         ) : tree.loading ? (
-          <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>
         ) : tree.rows.length === 0 ? (
-          <p className='px-2 py-6 text-center text-body-sm text-fg-4'>This project is empty.</p>
+          <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'>
+          <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}>
+              <li key={row.entry.path} role="treeitem" aria-expanded={row.expanded} aria-level={row.depth + 1}>
                 <Row
                   label={row.entry.name}
                   indent={row.depth}
@@ -171,11 +128,11 @@ export function FileTree({
                   icon={
                     row.entry.type === 'dir' ? (
                       row.loading ? (
-                        <Spinner className='size-3.5 shrink-0 text-fg-4' />
+                        <Spinner className="size-3.5 shrink-0 text-fg-4" />
                       ) : row.expanded ? (
-                        <FolderOpen className='size-3.5 shrink-0 text-accent' />
+                        <FolderOpen className="size-3.5 shrink-0 text-accent" />
                       ) : (
-                        <Folder className='size-3.5 shrink-0 text-accent' />
+                        <Folder className="size-3.5 shrink-0 text-accent" />
                       )
                     ) : (
                       <EntryIcon type={row.entry.type} />
@@ -183,24 +140,13 @@ export function FileTree({
                   }
                   chevron={
                     row.entry.type === 'dir' ? (
-                      <ChevronRight
-                        className={cn(
-                          'size-3 shrink-0 text-fg-4 transition-transform',
-                          row.expanded && 'rotate-90',
-                        )}
-                      />
+                      <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)
-                  }
+                  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 }}>
+                  <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}
@@ -213,8 +159,6 @@ export function FileTree({
   )
 }
 
-/** 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,
@@ -226,7 +170,6 @@ function Row({
   onClick,
 }: {
   label: string
-  /** Secondary text after the label, dimmed and the first thing to be truncated. */
   detail?: string
   title?: string
   icon: ReactNode
@@ -235,54 +178,38 @@ function Row({
   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' })
+    if (active) {
+      ref.current?.scrollIntoView({ block: 'nearest' })
+    }
   }, [active])
 
   return (
     <button
       ref={ref}
-      type='button'
+      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>
+      )}
+    >
+      <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.
-          The rail reads in the **UI font**, never mono: it is workbench chrome
-          — a list you scan — and the editors it sits beside (VS Code, Finder)
-          all set filenames in their UI face. Mono is for content on a grid, and
-          nothing here is on one. It is also independent of `transcriptFont`,
-          which scopes to the session panel alone. */}
-      <span className='shrink-0 truncate text-label'>{label}</span>
-      {detail ? <span className='min-w-0 flex-1 truncate text-label text-fg-4'>{detail}</span> : null}
+      <span className="shrink-0 truncate text-label">{label}</span>
+      {detail ? <span className="min-w-0 flex-1 truncate 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

@@ -9,28 +9,16 @@ 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,
@@ -42,36 +30,31 @@ export function FileViewer({
   onDismissConflict,
   className,
 }: FileViewerProps) {
-  if (!file) return null
+  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. */}
+    <div data-slot="file-viewer" className={cn('flex min-h-0 min-w-0 flex-1 flex-col bg-bg', className)}>
       {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)}>
+        <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)}>
+          <Button variant="outline" size="xs" onClick={() => onOverwrite?.(file.path)}>
             Keep mine
           </Button>
-          <Button variant='ghost' size='xs' onClick={() => onDismissConflict?.(file.path)}>
+          <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)}>
+        <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>
@@ -79,20 +62,18 @@ export function FileViewer({
 
       {file.status === 'loading' ? (
         <Centred>
-          <Spinner className='size-4 text-fg-4' />
+          <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>
+          <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>
+          <FileWarning className="size-4 text-fg-4" />
+          <p className="text-body-sm text-fg-4">This file isn’t text.</p>
+          <p className="text-label text-fg-4">It can’t be edited here without corrupting it.</p>
         </Centred>
       ) : (
         <CodeEditor
@@ -104,32 +85,25 @@ export function FileViewer({
         />
       )}
 
-      {/* 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'>
+        <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>
+              <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-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)}>
+              <span className="text-label text-fg-3">Unsaved changes</span>
+              <span className="flex-1" />
+              <Button variant="ghost" size="xs" onClick={() => onRevert?.(file.path)}>
                 Revert
               </Button>
-              <Button variant='outline' size='xs' onClick={() => onSave?.(file.path)}>
+              <Button variant="outline" size="xs" onClick={() => onSave?.(file.path)}>
                 Save
-                <span className='ml-1 text-fg-4'>⌘S</span>
+                <span className="ml-1 text-fg-4">⌘S</span>
               </Button>
             </>
           )}
@@ -140,9 +114,5 @@ export function FileViewer({
 }
 
 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>
-  )
+  return <div className="flex min-h-0 flex-1 flex-col items-center justify-center gap-2 p-6">{children}</div>
 }