@workerdeck/ui 0.9.0 → 0.11.0

package/src/components/agent/ContextDialog.tsx

@@ -0,0 +1,99 @@
+import type { ContextUsage } from '@workerdeck/protocol'
+import { Dialog, DialogBody, DialogContent, DialogHeader } from '../ui/Dialog.tsx'
+import { cn } from '../../lib/utils.ts'
+import { formatTokens } from '../../lib/format.ts'
+
+export interface ContextDialogProps {
+  usage?: ContextUsage
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+/** The CLI reports category colors as its own theme token names ('inactive',
+ * 'promptBorder', ...), not CSS colors — only pass through what CSS can render. */
+const cssColor = (color: string): string | undefined =>
+  typeof CSS !== 'undefined' && CSS.supports('color', color) ? color : undefined
+
+const usageTint = (pct: number) => (pct >= 90 ? 'bg-danger' : pct >= 70 ? 'bg-warning' : 'bg-accent')
+
+/**
+ * What is in the model's context window right now, category by category.
+ *
+ * One of the three panels the status bar opens. Context, usage and session info
+ * are different questions asked at different moments, so they are different
+ * screens rather than one "details" list you scroll past two answers to reach.
+ */
+export function ContextDialog({ usage, open, onOpenChange }: ContextDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader title='Context' description={usage?.model} />
+        <DialogBody>
+          {!usage ? (
+            <p className='py-6 text-center text-body-sm text-fg-4'>
+              No reading yet — the context window is measured after a turn completes.
+            </p>
+          ) : (
+            <>
+              <div className='flex items-baseline justify-between gap-4'>
+                <span className='text-label text-fg-3'>Used</span>
+                <span className='font-mono text-body-sm text-fg-1'>
+                  {formatTokens(usage.totalTokens)} / {formatTokens(usage.maxTokens)} ·{' '}
+                  {usage.percentage.toFixed(0)}%
+                </span>
+              </div>
+              <div className='mt-2 h-2 overflow-hidden rounded-full bg-border'>
+                <div
+                  className={cn('h-full rounded-full', usageTint(usage.percentage))}
+                  style={{ width: `${Math.min(100, Math.max(2, usage.percentage))}%` }}
+                />
+              </div>
+              {/* Codex reports occupancy with no breakdown, so an engine can send
+                  a real reading and an empty `categories`. A "Breakdown" heading
+                  over nothing reads as a failed load; the row above already says
+                  everything that is known. */}
+              {usage.categories.length > 0 ? (
+                <div className='mt-5'>
+                  <h3 className='text-label font-medium text-fg-3'>Breakdown</h3>
+                  <div className='mt-2 flex flex-col gap-3'>
+                    {usage.categories.map((category) => {
+                      const share = (category.tokens / Math.max(usage.maxTokens, 1)) * 100
+                      const color = cssColor(category.color)
+                      return (
+                        <div key={category.name}>
+                          <div className='flex items-baseline justify-between gap-3'>
+                            <span className='flex min-w-0 items-center gap-2'>
+                              <span
+                                className='size-2 shrink-0 rounded-full bg-fg-4'
+                                style={color ? { backgroundColor: color } : undefined}
+                              />
+                              <span className='truncate text-body-sm text-fg-1'>
+                                {category.name}
+                              </span>
+                            </span>
+                            <span className='shrink-0 font-mono text-label text-fg-3'>
+                              {formatTokens(category.tokens)}
+                            </span>
+                          </div>
+                          <div className='mt-1 h-1 overflow-hidden rounded-full bg-border'>
+                            <div
+                              className='h-full rounded-full bg-fg-4'
+                              style={{
+                                width: `${Math.min(100, share)}%`,
+                                backgroundColor: color,
+                              }}
+                            />
+                          </div>
+                        </div>
+                      )
+                    })}
+                  </div>
+                </div>
+              ) : null}
+            </>
+          )}
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/agent/Conversation.tsx

@@ -6,17 +6,25 @@ import { cn } from '../../lib/utils.ts'
 
 export interface ConversationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
   children: ReactNode
+  /**
+   * How the view follows content that grows. `'smooth'` is right for a live
+   * turn — the text scrolls as it is written. `'instant'` is right while a
+   * transcript is *filling* (an attach replaying a whole session), where
+   * animating each arrival makes opening a session a several-second journey
+   * from its first row to its last.
+   */
+  resize?: 'smooth' | 'instant'
 }
 
 /** Scroll container that stays pinned to the bottom while streaming, unless the user
  * scrolls up — plus a floating scroll-to-bottom button. */
-export function Conversation({ className, children, ...props }: ConversationProps) {
+export function Conversation({ className, children, resize = 'smooth', ...props }: ConversationProps) {
   return (
     <StickToBottom
       data-slot='conversation'
       className={cn('relative flex-1 overflow-y-auto', className)}
       initial='instant'
-      resize='smooth'
+      resize={resize}
       role='log'
       {...props}>
       {children}
@@ -32,7 +40,7 @@ export function ConversationContent({
   return (
     <StickToBottom.Content
       data-slot='conversation-content'
-      className={cn('mx-auto flex w-full max-w-3xl flex-col gap-4 px-4 py-4', className)}
+      className={cn('mx-auto flex w-full max-w-[var(--wd-content-max-w,48rem)] flex-col gap-4 px-4 py-4', className)}
       {...props}>
       {children}
     </StickToBottom.Content>

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

@@ -2,6 +2,7 @@ import type { TranscriptItem } from '@workerdeck/react'
 import { Download, FileText } from 'lucide-react'
 import { cn } from '../../lib/utils.ts'
 import { formatBytes } from '../../lib/format.ts'
+import { LineGlyph, useLines } from './transcript-variant.tsx'
 
 export type FileDeliveredItem = Extract<TranscriptItem, { kind: 'file_delivered' }>
 
@@ -17,7 +18,32 @@ export interface FileCardProps {
  * The file lives in the session's in-memory VFS — the link works while the
  * session lives. */
 export function FileCard({ item, href, className }: FileCardProps) {
+  const lines = useLines()
   const name = item.path.split('/').pop() || item.path
+  if (lines) {
+    // One row: what arrived, how big, and the link — no box around it.
+    return (
+      <div data-slot='file-delivered' className={cn('flex w-full items-baseline gap-2', className)}>
+        <LineGlyph className='text-fg-4'>◇</LineGlyph>
+        <span className='min-w-0 flex-1 truncate text-body-sm leading-5'>
+          <span className='font-medium text-fg-1'>{name}</span>
+          <span className='text-fg-4'>
+            {' · '}
+            {formatBytes(item.bytes)}
+            {item.description ? ` · ${item.description}` : ''}
+          </span>
+        </span>
+        {href ? (
+          <a
+            href={href}
+            download={name}
+            className='shrink-0 text-label text-fg-3 underline-offset-2 hover:text-fg-1 hover:underline'>
+            download
+          </a>
+        ) : null}
+      </div>
+    )
+  }
   return (
     <div
       data-slot='file-delivered'

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' />
+}