@workerdeck/ui 0.7.0 → 0.11.0

package/src/components/agent/Response.tsx

@@ -1,6 +1,131 @@
 import { memo } from 'react'
 import { Streamdown } from 'streamdown'
 import { cn } from '../../lib/utils.ts'
+import { useLines } from './transcript-variant.tsx'
+
+/**
+ * Markdown on a terminal's grid.
+ *
+ * Prose defaults give every block its own rhythm — a heading is bigger, a list
+ * item is looser, an inline `code` chip is padded taller than the line it sits
+ * in — and the result is text that visibly breathes at different rates as you
+ * scroll. A terminal has exactly one line height and one type size, and that
+ * uniformity is most of what makes it readable at a glance.
+ *
+ * So: every line 1.25rem, every block flush, and one blank line (1.25rem, i.e.
+ * exactly one row) between blocks. Headings keep their weight but lose their
+ * size. Inline code keeps a background — it still has to be distinguishable —
+ * but no vertical padding, because that is what pushes a line off the grid.
+ */
+const TERMINAL_PROSE = [
+  'text-body-sm leading-5',
+  '[&_*]:leading-5',
+  // Block rhythm: nothing has its own margins, and siblings are one row apart.
+  // `!` throughout because these fight the renderer's own utilities, and some of
+  // those (`space-y-*`, which is a `> * + *` rule) outrank a plain descendant
+  // selector — a list would otherwise keep its half-row gaps while every other
+  // block snapped to the grid.
+  '[&_p]:my-0! [&_pre]:my-0! [&_blockquote]:my-0! [&_table]:my-0!',
+  '[&_h1]:my-0! [&_h2]:my-0! [&_h3]:my-0! [&_h4]:my-0! [&_h5]:my-0! [&_h6]:my-0!',
+  '[&>*+*]:mt-5',
+  // Lists are rows, not paragraphs: no margin anywhere in them, and no
+  // inter-item spacing from a `space-y` on the list itself.
+  '[&_ul]:my-0! [&_ol]:my-0! [&_li]:my-0! [&_li>p]:my-0!',
+  '[&_li+li]:mt-0! [&_ul_ul]:mt-0! [&_ul_ol]:mt-0! [&_ol_ul]:mt-0! [&_ol_ol]:mt-0!',
+  '[&_li]:py-0! [&_ul]:py-0! [&_ol]:py-0!',
+  // Markers on their own column, at the width the marker actually is — the
+  // indent a terminal (and the markdown source) uses, not a typographic one.
+  // `ch` is the unit because this variant runs in a monospace face: `• ` is two
+  // cells, `1. ` is three, so the text starts exactly where it would in the raw
+  // document and a wrapped line hangs under it instead of under the bullet.
+  // Nesting then costs one marker width per level, which is the 2-space step.
+  // `list-outside` is the load-bearing half: the renderer marks lists `inside`,
+  // where the marker joins the text flow — so the indent moves the bullet too
+  // (the list sits a marker-width right of the paragraph above it) and a wrapped
+  // line runs back under the bullet instead of hanging under its own text.
+  '[&_ul]:list-outside! [&_ol]:list-outside!',
+  '[&_ul]:pl-[2ch]! [&_ol]:pl-[3ch]! [&_li]:pl-0!',
+  // Headings are weight, not size — a terminal has one type size.
+  '[&_h1]:text-body-sm [&_h2]:text-body-sm [&_h3]:text-body-sm',
+  '[&_h4]:text-body-sm [&_h5]:text-body-sm [&_h6]:text-body-sm',
+  '[&_h1]:font-semibold [&_h2]:font-semibold [&_h3]:font-semibold',
+  '[&_h4]:font-semibold [&_h5]:font-semibold [&_h6]:font-semibold',
+  '[&_blockquote]:border-l [&_blockquote]:border-border [&_blockquote]:pl-2',
+  // Inline code only (`:not(pre) > code`) — fenced blocks keep their own box.
+  // Horizontal padding is free; vertical padding is what pushes a line off grid.
+  '[&_:not(pre)>code]:rounded-none [&_:not(pre)>code]:px-1! [&_:not(pre)>code]:py-0!',
+  '[&_:not(pre)>code]:text-body-sm [&_:not(pre)>code]:leading-5! [&_:not(pre)>code]:text-fg-1',
+  '[&_th]:py-0! [&_td]:py-0!',
+  // The renderer's fenced-code card: rounded frame, its own header strip, a
+  // second rounded frame inside it, and a floating pill for the buttons. Four
+  // boxes around what is, in a terminal, a band of dim text. Flattened to
+  // exactly that — the band keeps a background so a block still reads as code,
+  // and the actions keep their top-right corner but lose the pill.
+  '[&_[data-streamdown=code-block]]:my-0! [&_[data-streamdown=code-block]]:gap-0!',
+  '[&_[data-streamdown=code-block]]:rounded-none! [&_[data-streamdown=code-block]]:border-0!',
+  '[&_[data-streamdown=code-block]]:bg-transparent! [&_[data-streamdown=code-block]]:p-0!',
+  // The language strip costs a whole row to say what the code already shows, and
+  // the actions cost another. Both go: the block is the band, and the buttons
+  // float over its top-right corner, appearing on hover or keyboard focus.
+  '[&_[data-streamdown=code-block]]:relative!',
+  '[&_[data-streamdown=code-block-header]]:hidden!',
+  '[&_div:has(>[data-streamdown=code-block-actions])]:absolute! [&_div:has(>[data-streamdown=code-block-actions])]:top-0!',
+  '[&_div:has(>[data-streamdown=code-block-actions])]:right-0! [&_div:has(>[data-streamdown=code-block-actions])]:mt-0!',
+  '[&_div:has(>[data-streamdown=code-block-actions])]:h-5! [&_div:has(>[data-streamdown=code-block-actions])]:opacity-0!',
+  '[&_div:has(>[data-streamdown=code-block-actions])]:transition-opacity',
+  '[&_[data-streamdown=code-block]:hover_div:has(>[data-streamdown=code-block-actions])]:opacity-100!',
+  '[&_[data-streamdown=code-block]:focus-within_div:has(>[data-streamdown=code-block-actions])]:opacity-100!',
+  '[&_[data-streamdown=code-block-actions]]:rounded-none! [&_[data-streamdown=code-block-actions]]:border-0!',
+  '[&_[data-streamdown=code-block-actions]]:bg-code-bg! [&_[data-streamdown=code-block-actions]]:px-1!',
+  '[&_[data-streamdown=code-block-actions]]:py-0! [&_[data-streamdown=code-block-actions]]:gap-1!',
+  '[&_[data-streamdown=code-block-actions]]:backdrop-blur-none!',
+  '[&_[data-streamdown=code-block-body]]:rounded-none! [&_[data-streamdown=code-block-body]]:border-0!',
+  '[&_[data-streamdown=code-block-body]]:bg-code-bg! [&_[data-streamdown=code-block-body]]:px-2!',
+  '[&_[data-streamdown=code-block-body]]:py-0! [&_[data-streamdown=code-block-body]]:text-body-sm!',
+  // The action buttons' hit areas, on the grid like everything else.
+  '[&_[data-streamdown=code-block-copy-button]]:p-0! [&_[data-streamdown=code-block-download-button]]:p-0!',
+  // Tables come in a frame of their own, plus a controls row above them and a
+  // second frame around the scroller — three boxes and a blank line to hold
+  // three buttons. Same treatment: the table is the content, the buttons float
+  // over its top-right on hover. The controls row is the child that has no
+  // `<table>` in it, which is also how it knows to disappear when the renderer
+  // draws no controls at all.
+  '[&_[data-streamdown=table-wrapper]]:rounded-none! [&_[data-streamdown=table-wrapper]]:border-0!',
+  '[&_[data-streamdown=table-wrapper]]:my-0! [&_[data-streamdown=table-wrapper]]:bg-transparent!',
+  '[&_[data-streamdown=table-wrapper]]:relative! [&_[data-streamdown=table-wrapper]]:gap-0!',
+  '[&_[data-streamdown=table-wrapper]]:p-0!',
+  '[&_[data-streamdown=table-wrapper]>div:not(:has(table))]:absolute! [&_[data-streamdown=table-wrapper]>div:not(:has(table))]:top-0!',
+  '[&_[data-streamdown=table-wrapper]>div:not(:has(table))]:right-0! [&_[data-streamdown=table-wrapper]>div:not(:has(table))]:z-10!',
+  '[&_[data-streamdown=table-wrapper]>div:not(:has(table))]:opacity-0! [&_[data-streamdown=table-wrapper]>div:not(:has(table))]:bg-code-bg!',
+  '[&_[data-streamdown=table-wrapper]>div:not(:has(table))]:px-1! [&_[data-streamdown=table-wrapper]>div:not(:has(table))]:transition-opacity',
+  '[&_[data-streamdown=table-wrapper]:hover>div:not(:has(table))]:opacity-100!',
+  '[&_[data-streamdown=table-wrapper]:focus-within>div:not(:has(table))]:opacity-100!',
+  '[&_[data-streamdown=table-wrapper]>div:has(table)]:rounded-none! [&_[data-streamdown=table-wrapper]>div:has(table)]:border-0!',
+  '[&_[data-streamdown=table-wrapper]>div:has(table)]:bg-transparent!',
+].join(' ')
+
+/**
+ * The controls' icons as characters.
+ *
+ * The renderer draws its copy/download affordances as line-art SVGs, which next
+ * to monospace text read as buttons from another application. These are the
+ * glyphs a terminal would use — and they inherit the surrounding font, so they
+ * sit on the same grid as the code they belong to.
+ */
+const glyphIcon = (glyph: string) =>
+  function GlyphIcon({ className }: { className?: string }) {
+    return (
+      <span aria-hidden className={cn('font-mono text-body-sm leading-5', className)}>
+        {glyph}
+      </span>
+    )
+  }
+
+const TERMINAL_ICONS = {
+  DownloadIcon: glyphIcon('⤓'),
+  CopyIcon: glyphIcon('⧉'),
+  CheckIcon: glyphIcon('✓'),
+}
 
 export interface ResponseProps {
   children: string
@@ -13,13 +138,16 @@ export interface ResponseProps {
  * highlighted with shiki (dual theme follows [data-theme] through the dark: variant). */
 export const Response = memo(
   function Response({ children, streaming, className }: ResponseProps) {
+    const lines = useLines()
     return (
       <Streamdown
         mode={streaming ? 'streaming' : 'static'}
         parseIncompleteMarkdown={streaming}
         shikiTheme={['github-light', 'github-dark']}
+        icons={lines ? TERMINAL_ICONS : undefined}
         className={cn(
           'size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0',
+          lines && TERMINAL_PROSE,
           className,
         )}>
         {children}

package/src/components/agent/SessionEmptyState.tsx

@@ -0,0 +1,65 @@
+import { AtSign, MessageSquareText, SlashSquare, Sparkles, Terminal } from 'lucide-react'
+import { cn } from '../../lib/utils.ts'
+
+export interface SessionEmptyStateProps {
+  cwd?: string
+  /** Whether `/command` completion is live yet — the CLI reports its commands a
+   * beat after the session starts, and promising a feature that isn't wired up
+   * yet is worse than not mentioning it. */
+  hasCommands?: boolean
+  /** Whether the engine has reported skills the `/` popover can offer. Its own
+   * flag, not a variant of `hasCommands`: what `/` does differs — a command is
+   * submitted, a skill is typed for you to edit — and an engine can have one
+   * without the other. */
+  hasSkills?: boolean
+  /** Whether this gateway serves `@file` search for the session's directory. */
+  canBrowseFiles?: boolean
+  className?: string
+}
+
+/**
+ * What a session shows before it has said anything: where the agent is sitting,
+ * and what the composer accepts beyond prose.
+ *
+ * Every hint is conditional on the affordance actually existing — an engine
+ * without slash commands, or a gateway without host files, is not told about
+ * them. Deliberately no project name (the header already carries it) and no
+ * brand mark (its geometry is inlined in several places already and they are
+ * meant to stay identical).
+ */
+export function SessionEmptyState({
+  cwd,
+  hasCommands,
+  hasSkills,
+  canBrowseFiles,
+  className,
+}: SessionEmptyStateProps) {
+  const hints = [
+    { icon: MessageSquareText, text: 'Tell the agent what to do.' },
+    // Two keys, two hints — they are different features, not two spellings of
+    // one. `$` is codex's own sigil for skills; `/` stays the CLI's commands.
+    ...(hasCommands ? [{ icon: SlashSquare, text: 'Type / for the CLI’s slash commands.' }] : []),
+    ...(hasSkills
+      ? [{ icon: Sparkles, text: 'Type $ to draft a message for one of the agent’s skills.' }]
+      : []),
+    ...(canBrowseFiles
+      ? [{ icon: AtSign, text: 'Type @ to search this project’s files.' }]
+      : []),
+  ]
+  return (
+    <div className={cn('flex flex-col items-center gap-4 py-10', className)}>
+      <div className='flex size-12 items-center justify-center rounded-xl bg-surface text-fg-3'>
+        <Terminal className='size-5' />
+      </div>
+      {cwd ? <p className='max-w-full truncate font-mono text-label text-fg-4'>{cwd}</p> : null}
+      <ul className='w-full max-w-sm divide-y divide-border overflow-hidden rounded-lg bg-surface'>
+        {hints.map((hint) => (
+          <li key={hint.text} className='flex items-center gap-3 px-3.5 py-2.5'>
+            <hint.icon className='size-4 shrink-0 text-fg-4' />
+            <span className='text-body-sm text-fg-3'>{hint.text}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

package/src/components/agent/SessionInfoDialog.tsx

@@ -0,0 +1,163 @@
+import { useEffect, useState } from 'react'
+import type { WorkerDeckClient } from '@workerdeck/client'
+import type { SessionFileInfo } from '@workerdeck/protocol'
+import type { TranscriptState } from '@workerdeck/react'
+import { Download } from 'lucide-react'
+import { CopyButton } from '../ui/CopyButton.tsx'
+import { Dialog, DialogBody, DialogContent, DialogHeader, DialogRow } from '../ui/Dialog.tsx'
+import { Spinner } from '../ui/Spinner.tsx'
+import { formatBytes, formatCost, formatRelativeTime } from '../../lib/format.ts'
+import { permissionModeMeta } from './PermissionModeSelect.tsx'
+
+export interface SessionInfoDialogProps {
+  state: TranscriptState
+  client: WorkerDeckClient
+  sessionId: string | undefined
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+/**
+ * What this session *is*: engine, profile, model, mode, where it runs, which
+ * credentials it found, and the files it has handed over.
+ *
+ * The identity half of the session's facts. Context and usage have their own
+ * panels — they change every turn and are consulted mid-run, while everything
+ * here is fixed at creation and looked up once.
+ */
+export function SessionInfoDialog({
+  state,
+  client,
+  sessionId,
+  open,
+  onOpenChange,
+}: SessionInfoDialogProps) {
+  const session = state.session
+  const mode = state.permissionMode ? permissionModeMeta(state.permissionMode) : undefined
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader title='Session info' description={session?.title} />
+        <DialogBody>
+          <div className='flex flex-col divide-y divide-border'>
+            <div className='pb-2'>
+              <DialogRow label='Engine'>{state.engine ?? 'claude'}</DialogRow>
+              {session?.profile ? (
+                <DialogRow label='Profile'>{session.profile}</DialogRow>
+              ) : null}
+              {state.model ? (
+                <DialogRow label='Model' mono>
+                  {state.model}
+                </DialogRow>
+              ) : null}
+              {mode ? <DialogRow label='Permission mode'>{mode.label}</DialogRow> : null}
+              {session?.apiKeySource ? (
+                <DialogRow label='Credentials'>{session.apiKeySource}</DialogRow>
+              ) : null}
+            </div>
+            <div className='py-2'>
+              {state.cwd ? <CopyRow label='Working directory' value={state.cwd} /> : null}
+              {state.sdkSessionId ? (
+                <CopyRow label='Engine session id' value={state.sdkSessionId} />
+              ) : null}
+              {session ? <CopyRow label='Gateway session id' value={session.id} /> : null}
+            </div>
+            <div className='py-2'>
+              {session?.createdAt ? (
+                <DialogRow label='Started'>{formatRelativeTime(session.createdAt)}</DialogRow>
+              ) : null}
+              {session?.numTurns !== undefined ? (
+                <DialogRow label='Turns'>{session.numTurns}</DialogRow>
+              ) : null}
+              <DialogRow label='Cost' mono>
+                {formatCost(state.totalCostUsd)}
+              </DialogRow>
+            </div>
+            {/* Only for an engine that has a scratch VFS — for the rest the route
+                404s, and a "Files" heading over nothing reads as a failed load. */}
+            {state.capabilities.vfs ? (
+              <SessionFiles client={client} sessionId={sessionId} open={open} />
+            ) : null}
+          </div>
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+/** Long ids are for pasting elsewhere, so give them a copy target. */
+function CopyRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div className='flex items-start justify-between gap-2 py-1.5'>
+      <div className='min-w-0 flex-1'>
+        <div className='text-label text-fg-3'>{label}</div>
+        <div className='mt-0.5 font-mono text-label break-all text-fg-1'>{value}</div>
+      </div>
+      <CopyButton value={value} aria-label={`Copy ${label.toLowerCase()}`} />
+    </div>
+  )
+}
+
+/** Files the agent produced inside the session's VFS. Fetched when the panel
+ * opens — this is not a live list and nothing pushes changes to it. */
+function SessionFiles({
+  client,
+  sessionId,
+  open,
+}: {
+  client: WorkerDeckClient
+  sessionId: string | undefined
+  open: boolean
+}) {
+  const [files, setFiles] = useState<SessionFileInfo[] | undefined>()
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    if (!open || !sessionId) return
+    let cancelled = false
+    setLoading(true)
+    client
+      .listSessionFiles(sessionId)
+      .then((list) => {
+        if (!cancelled) setFiles(list)
+      })
+      .catch(() => {
+        if (!cancelled) setFiles([])
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [client, sessionId, open])
+
+  return (
+    <div className='pt-3'>
+      <h3 className='text-label font-medium text-fg-3'>Files</h3>
+      {loading ? (
+        <div className='py-3 text-center'>
+          <Spinner className='size-4 text-fg-4' />
+        </div>
+      ) : !files?.length ? (
+        <p className='py-2 text-body-sm text-fg-4'>Nothing delivered yet.</p>
+      ) : (
+        <ul className='mt-1 flex flex-col'>
+          {files.map((file) => (
+            <li key={file.path}>
+              <a
+                href={sessionId ? client.sessionFileUrl(sessionId, file.path) : undefined}
+                className='flex items-center gap-2 rounded-md px-1 py-1.5 hover:bg-surface-hover'>
+                <Download className='size-3.5 shrink-0 text-fg-4' />
+                <span className='min-w-0 flex-1 truncate font-mono text-label text-fg-1'>
+                  {file.path}
+                </span>
+                <span className='shrink-0 text-label text-fg-4'>{formatBytes(file.bytes)}</span>
+              </a>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}