@workerdeck/ui 0.7.0 → 0.11.0

package/src/components/agent/SessionWorkspace.tsx

@@ -0,0 +1,282 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, useState, type RefObject } from 'react'
+import { createPortal } from 'react-dom'
+import type { WorkerDeckClient } from '@workerdeck/client'
+import {
+  useHostFileRoots,
+  useHostFileSearch,
+  useHostFileTree,
+  useOpenFiles,
+  useSessionInfo,
+  isDirty,
+} from '@workerdeck/react'
+import { PanelLeftOpen } from 'lucide-react'
+import { cn } from '../../lib/utils.ts'
+import { Button } from '../ui/Button.tsx'
+import { Splitter } from '../ui/Splitter.tsx'
+import { EditorTabs } from './EditorTabs.tsx'
+import { FileTree } from './FileTree.tsx'
+import { FileViewer } from './FileViewer.tsx'
+import { SessionPanel, type SessionPanelProps } from './SessionPanel.tsx'
+
+export interface SessionWorkspaceProps {
+  client: WorkerDeckClient
+  sessionId: string | undefined
+  /** Passed straight through to {@link SessionPanel} — including the render-prop
+   * form that claims the session-actions menu. */
+  header?: SessionPanelProps['header']
+  /** Rail width in pixels on first render. */
+  defaultRailWidth?: number
+  /** Start with the file rail collapsed even on a wide viewport. */
+  defaultRailCollapsed?: boolean
+  className?: string
+}
+
+const RAIL_MIN = 180
+const RAIL_MAX = 520
+/** How little of the agent column the editor may leave. Below this the composer
+ * and a line of transcript stop fitting together, which is the point at which the
+ * agent has stopped being usable rather than merely small. */
+const AGENT_MIN = 220
+const EDITOR_MIN = 120
+
+/**
+ * A VS Code-shaped workspace around a live session: file tree on the left, open
+ * files above, the agent below.
+ *
+ * **Strictly additive.** {@link SessionPanel} is untouched and still the whole
+ * session surface on its own — an embedder picks one or the other, and one that
+ * has its own file tree keeps using the panel.
+ *
+ * Two things here are load-bearing and easy to break:
+ *
+ * 1. **The editor region is absent from the layout when nothing is open**, not
+ *    collapsed to zero height. A zero-height pane leaves a draggable splitter and
+ *    parks the composer at an odd offset; absence is what makes the agent's
+ *    "claims the full column" state actually look like the panel alone.
+ * 2. **`SessionPanel` keeps its position in the tree across that transition.** It
+ *    holds the WebSocket attach and the entire transcript, so moving it between
+ *    parents — or wrapping it conditionally — would remount it and drop the
+ *    session's rendered history on the floor the first time someone opens a file.
+ *    The conditional children before it are `? :` expressions that leave a null in
+ *    their slot, which is exactly what keeps its index stable.
+ */
+export function SessionWorkspace({
+  client,
+  sessionId,
+  header,
+  defaultRailWidth = 260,
+  defaultRailCollapsed,
+  className,
+}: SessionWorkspaceProps) {
+  // The cwd is the tree's root, and it comes from the registry rather than from
+  // the panel: reading it off the panel's own session hook would mean attaching
+  // a second WebSocket client, and the tool bridge asks the *first* attached
+  // client — a second one changes who answers.
+  const { info } = useSessionInfo(client, sessionId)
+  const cwd = info?.cwd
+
+  const tree = useHostFileTree(client, cwd)
+  const search = useHostFileSearch(client, cwd)
+  const files = useOpenFiles(client)
+  // Writing is a separate server opt-in from reading and defaults off, so the
+  // editor asks before it offers to save anything.
+  const { canWrite } = useHostFileRoots(client)
+
+  // Nothing here can save on the user's behalf when the tab is going away, so
+  // the browser's own guard is the last line. Registered only while there is
+  // something to lose — an unconditional handler makes every navigation prompt.
+  useEffect(() => {
+    if (!files.hasUnsaved) return
+    const warn = (event: BeforeUnloadEvent) => event.preventDefault()
+    window.addEventListener('beforeunload', warn)
+    return () => window.removeEventListener('beforeunload', warn)
+  }, [files.hasUnsaved])
+
+  const wide = useIsWide()
+  const [railCollapsed, setRailCollapsed] = useState(defaultRailCollapsed ?? false)
+  const [railWidth, setRailWidth] = useState(defaultRailWidth)
+  const [editorHeight, setEditorHeight] = useState(360)
+
+  // Closing every tab returns the agent to the full column; opening one again
+  // should restore the height the user had chosen, so this is not reset here.
+  const hasFiles = files.files.length > 0
+
+  // A narrow viewport cannot spare 260px of rail beside a transcript, so there
+  // the rail overlays the workspace instead of sitting next to it — and starts
+  // out of the way.
+  const overlayRail = !wide
+  const railOpen = tree.available && !railCollapsed
+  useEffect(() => {
+    if (overlayRail) setRailCollapsed(true)
+  }, [overlayRail])
+
+  // Closing a dirty tab is the one destructive thing the strip can do, and the
+  // edits are not recoverable once the tab is gone. `confirm` rather than a
+  // styled dialog on purpose: it is modal, it cannot be missed, and a
+  // custom one here would be a second modal system inside a component an
+  // embedder already renders inside their own.
+  const closeTab = useCallback(
+    (path: string) => {
+      const file = files.files.find((f) => f.path === path)
+      if (file && isDirty(file)) {
+        const name = file.name
+        if (!window.confirm(`${name} has unsaved changes. Close it and lose them?`)) return
+      }
+      files.close(path)
+    },
+    [files],
+  )
+
+  const column = useRef<HTMLDivElement>(null)
+  const columnHeight = useElementHeight(column)
+  const editorMax = Math.max(EDITOR_MIN, columnHeight - AGENT_MIN)
+
+  // The embedder's header is app chrome and belongs above everything — but only
+  // `SessionPanel` can *build* the `⋯` menu it is handed, and only if it is the
+  // one calling the render-prop. So the panel still calls it, in its own tree,
+  // and the result is portalled up here. That keeps `SessionPanel` untouched and
+  // keeps the menu's own context (it is a Base UI popup) intact.
+  const [topBar, setTopBar] = useState<HTMLDivElement | null>(null)
+  const hoisted: SessionPanelProps['header'] =
+    header === undefined || topBar === null
+      ? undefined
+      : typeof header === 'function'
+        ? (slots) => createPortal(header(slots), topBar)
+        : createPortal(header, topBar)
+
+  return (
+    <div
+      data-slot='session-workspace'
+      className={cn('flex h-full min-h-0 w-full flex-col overflow-hidden bg-bg', className)}>
+      {header !== undefined ? <div ref={setTopBar} className='shrink-0' /> : null}
+      <div className='relative flex min-h-0 flex-1'>
+      {railOpen ? (
+        <FileTree
+          tree={tree}
+          search={search}
+          activePath={files.activePath}
+          onOpenFile={files.open}
+          onCollapse={() => setRailCollapsed(true)}
+          style={{ width: overlayRail ? Math.min(railWidth, 320) : railWidth }}
+          className={cn(
+            'shrink-0 border-r border-border',
+            overlayRail && 'absolute inset-y-0 left-0 z-20 shadow-lg',
+          )}
+        />
+      ) : tree.available ? (
+        // Collapsed: a slim strip that keeps the rail one click away. In flow
+        // rather than floating over the panel, so it can never land on top of an
+        // embedder's own header controls.
+        <div className='flex w-8 shrink-0 flex-col items-center border-r border-border bg-surface pt-1.5'>
+          <Button
+            variant='ghost'
+            size='icon-sm'
+            aria-label='Show project files'
+            onClick={() => setRailCollapsed(false)}>
+            <PanelLeftOpen className='size-4 text-fg-3' />
+          </Button>
+        </div>
+      ) : null}
+      {/* No splitter over an overlay rail — dragging a drawer's edge on a phone
+          fights the scroll it is sitting on top of. */}
+      {railOpen && !overlayRail ? (
+        <Splitter
+          orientation='vertical'
+          value={railWidth}
+          onValueChange={setRailWidth}
+          min={RAIL_MIN}
+          max={RAIL_MAX}
+          aria-label='Resize the file tree'
+        />
+      ) : null}
+
+      <div ref={column} className='flex min-h-0 min-w-0 flex-1 flex-col'>
+        {/* Slot 1 of 3. The `? :` leaves a null here when nothing is open, which
+            is what holds the agent's slot below and keeps it from remounting. */}
+        {hasFiles ? (
+          <div
+            className='flex min-h-0 shrink-0 flex-col overflow-hidden'
+            style={{ height: Math.min(editorHeight, editorMax || editorHeight) }}>
+            <EditorTabs
+              files={files.files}
+              activePath={files.activePath}
+              onActivate={files.activate}
+              onClose={closeTab}
+            />
+            <FileViewer
+              file={files.active}
+              canWrite={canWrite}
+              onChange={files.edit}
+              onSave={(path) => void files.save(path)}
+              onRevert={files.revert}
+              onReload={files.reload}
+              onOverwrite={(path) => void files.overwrite(path)}
+              onDismissConflict={files.dismissConflict}
+            />
+          </div>
+        ) : null}
+        {/* Slot 2 of 3. */}
+        {hasFiles ? (
+          <Splitter
+            orientation='horizontal'
+            value={Math.min(editorHeight, editorMax || editorHeight)}
+            onValueChange={setEditorHeight}
+            min={EDITOR_MIN}
+            max={editorMax}
+            aria-label='Resize the open file'
+          />
+        ) : null}
+        {/* Slot 3 of 3 — always here, always at this index. */}
+        <SessionPanel
+          client={client}
+          sessionId={sessionId}
+          header={hoisted}
+          className='min-h-0 flex-1'
+        />
+      </div>
+
+        {/* Tapping away closes the drawer, which is the only way back to the
+            transcript on a narrow screen. */}
+        {overlayRail && railOpen ? (
+          <button
+            type='button'
+            aria-label='Close the file tree'
+            onClick={() => setRailCollapsed(true)}
+            className='absolute inset-0 z-10 bg-black/30'
+          />
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+/** Live height of an element, for a splitter that needs to know how much room it
+ * is dividing. Zero until the first observation, which callers treat as
+ * "unmeasured" rather than as a real bound. */
+function useElementHeight(ref: RefObject<HTMLElement | null>): number {
+  const [height, setHeight] = useState(0)
+  useLayoutEffect(() => {
+    const element = ref.current
+    if (!element) return
+    const observer = new ResizeObserver(([entry]) => {
+      if (entry) setHeight(entry.contentRect.height)
+    })
+    observer.observe(element)
+    return () => observer.disconnect()
+  }, [ref])
+  return height
+}
+
+/** Whether there is room for a rail beside the content. Presentation only — the
+ * workspace's actual state lives in the hooks from `@workerdeck/react`. */
+function useIsWide(): boolean {
+  const [wide, setWide] = useState(true)
+  useEffect(() => {
+    const query = window.matchMedia('(min-width: 768px)')
+    const sync = () => setWide(query.matches)
+    sync()
+    query.addEventListener('change', sync)
+    return () => query.removeEventListener('change', sync)
+  }, [])
+  return wide
+}

package/src/components/agent/SkillsDialog.tsx

@@ -0,0 +1,195 @@
+import { useState } from 'react'
+import type { SkillInfo } from '@workerdeck/protocol'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { Badge } from '../ui/Badge.tsx'
+import { Button } from '../ui/Button.tsx'
+import { Dialog, DialogBody, DialogContent, DialogHeader, DialogRow } from '../ui/Dialog.tsx'
+
+export interface SkillsDialogProps {
+  skills: SkillInfo[] | undefined
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  /** Insert a skill's opening message into the composer, if the host offers
+   * that. Omit and the dialog is read-only. */
+  onUse?: (skill: SkillInfo) => void
+}
+
+/** Where the skill came from. The engine's set is open, so an unrecognised
+ * scope renders as itself rather than being forced into a bucket. */
+const SCOPE_LABEL: Record<string, string> = {
+  user: 'Personal',
+  repo: 'This project',
+  system: 'System',
+  admin: 'Managed',
+}
+
+/**
+ * What this session's engine can do beyond its own tools: the skills it found,
+ * grouped by where they came from, with one drilled-down view each.
+ *
+ * The framing matters more here than in most panels. A skill is **not** a
+ * command — the model decides to use one by reading its description, and there
+ * is no wire syntax that invokes it. So this screen is a *discovery* surface,
+ * and the one action it offers ("Use this skill") is honest about being a
+ * drafting aid: it types a message for the operator to edit and send.
+ *
+ * Fed from the session's `skills` event rather than a REST route, because that
+ * is the channel the engine refreshes on its own when a skill changes on disk.
+ */
+export function SkillsDialog({ skills, open, onOpenChange, onUse }: SkillsDialogProps) {
+  const [selected, setSelected] = useState<string | undefined>()
+  const skill = skills?.find((s) => s.name === selected)
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(next) => {
+        if (!next) setSelected(undefined)
+        onOpenChange(next)
+      }}>
+      <DialogContent>
+        <DialogHeader
+          title={skill ? (skill.displayName ?? skill.name) : 'Skills'}
+          description={
+            skill
+              ? skill.name !== (skill.displayName ?? skill.name)
+                ? skill.name
+                : undefined
+              : 'Capabilities the agent can choose to use. Not commands — the model picks them from their descriptions.'
+          }
+          actions={
+            skill ? (
+              <Button variant='ghost' size='xs' onClick={() => setSelected(undefined)}>
+                <ChevronLeft className='size-3.5' />
+                Back
+              </Button>
+            ) : undefined
+          }
+        />
+        <DialogBody>
+          {skill ? (
+            <SkillView skill={skill} onUse={onUse} onUsed={() => onOpenChange(false)} />
+          ) : (
+            <SkillList skills={skills} onSelect={setSelected} />
+          )}
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function SkillList({
+  skills,
+  onSelect,
+}: {
+  skills: SkillInfo[] | undefined
+  onSelect: (name: string) => void
+}) {
+  if (!skills) {
+    // Not "none" — codex can only list skills over a live child, which it does
+    // not spawn until the session has something to do. Saying so beats an empty
+    // list that reads as "you have no skills".
+    return (
+      <p className='py-6 text-center text-body-sm text-fg-4'>
+        Skills are listed once the session connects — send a message first.
+      </p>
+    )
+  }
+  if (skills.length === 0) {
+    return <p className='py-6 text-center text-body-sm text-fg-4'>This session found no skills.</p>
+  }
+  const scopes = [...new Set(skills.map((s) => s.scope ?? 'other'))]
+  return (
+    <div className='flex flex-col gap-4'>
+      {scopes.map((scope) => (
+        <div key={scope}>
+          <h3 className='text-label font-medium text-fg-3'>{SCOPE_LABEL[scope] ?? scope}</h3>
+          <ul className='mt-1 flex flex-col'>
+            {skills
+              .filter((s) => (s.scope ?? 'other') === scope)
+              .map((s) => (
+                <li key={s.name}>
+                  <button
+                    type='button'
+                    onClick={() => onSelect(s.name)}
+                    className='flex w-full items-start gap-2 rounded-md px-2 py-2 text-left transition-colors hover:bg-surface-hover'>
+                    <span className='min-w-0 flex-1'>
+                      <span className='block truncate text-body-sm text-fg-1'>
+                        {s.displayName ?? s.name}
+                      </span>
+                      {s.shortDescription ?? s.description ? (
+                        <span className='block truncate text-label text-fg-4'>
+                          {s.shortDescription ?? s.description}
+                        </span>
+                      ) : null}
+                    </span>
+                    {/* Listed but switched off: a different answer from absent,
+                        and the one an operator hunting for a missing skill needs. */}
+                    {!s.enabled ? (
+                      <Badge variant='neutral' className='mt-0.5 shrink-0'>
+                        off
+                      </Badge>
+                    ) : null}
+                    <ChevronRight className='mt-0.5 size-3.5 shrink-0 text-fg-4' />
+                  </button>
+                </li>
+              ))}
+          </ul>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function SkillView({
+  skill,
+  onUse,
+  onUsed,
+}: {
+  skill: SkillInfo
+  onUse?: (skill: SkillInfo) => void
+  onUsed: () => void
+}) {
+  return (
+    <div className='flex flex-col gap-4'>
+      <div>
+        {skill.scope ? (
+          <DialogRow label='Scope'>{SCOPE_LABEL[skill.scope] ?? skill.scope}</DialogRow>
+        ) : null}
+        <DialogRow label='Status'>
+          <Badge variant={skill.enabled ? 'success' : 'neutral'} dot>
+            {skill.enabled ? 'enabled' : 'disabled'}
+          </Badge>
+        </DialogRow>
+      </div>
+      {skill.description ? (
+        <div>
+          <h3 className='text-label font-medium text-fg-3'>Description</h3>
+          {/* Shown verbatim because this is the text the MODEL selects on —
+              paraphrasing it here would describe a different skill than the one
+              the agent is reading about. */}
+          <p className='mt-1 text-body-sm whitespace-pre-wrap text-fg-2'>{skill.description}</p>
+        </div>
+      ) : (
+        <p className='text-body-sm text-fg-4'>This skill carries no description.</p>
+      )}
+      {onUse && skill.enabled ? (
+        <div>
+          <Button
+            variant='outline'
+            size='sm'
+            onClick={() => {
+              onUse(skill)
+              onUsed()
+            }}>
+            Use this skill
+          </Button>
+          <p className='mt-1.5 text-label text-fg-4'>
+            Writes an opening message into the composer for you to edit — it isn’t sent, and there
+            is no command that runs a skill directly.
+          </p>
+        </div>
+      ) : null}
+    </div>
+  )
+}

package/src/components/agent/StatusBar.tsx

@@ -1,7 +1,7 @@
-import { useEffect, useState } from 'react'
-import type { TranscriptState } from '@workerdeck/react'
+import { useEffect, useState, type ReactNode } from 'react'
+import type { ConnectionState, TranscriptState } from '@workerdeck/react'
 import type { ContextUsage, RateLimitInfo } from '@workerdeck/protocol'
-import { WifiOff } from 'lucide-react'
+import { RefreshCw, WifiOff } from 'lucide-react'
 import { Badge } from '../ui/Badge.tsx'
 import { ProgressRing } from '../ui/ProgressRing.tsx'
 import { Spinner } from '../ui/Spinner.tsx'
@@ -12,7 +12,24 @@ import { STATUS_META } from './status.ts'
 
 export interface StatusBarProps {
   state: TranscriptState
-  connected: boolean
+  /** @deprecated Pass {@link StatusBarProps.connection}; kept so an embedder
+   * still handing over a boolean keeps working. */
+  connected?: boolean
+  /** How the client is doing at reaching the gateway. A dropped socket wins the
+   * status slot: the session status held over a dead socket is a stale reading,
+   * and presenting it as a live one is the thing worth avoiding. */
+  connection?: ConnectionState
+  /**
+   * Where the gauges lead. Each one opens the panel that answers *its* question
+   * — the two meters measure different things, so sending both to one "details"
+   * list would be a detour every time. Omit a handler and that gauge stays a
+   * read-only tooltip.
+   */
+  onOpenStatus?: () => void
+  onOpenContext?: () => void
+  onOpenUsage?: () => void
+  /** Trailing slot — the session-actions menu, in the panel's top-right. */
+  actions?: ReactNode
   className?: string
 }
 
@@ -109,32 +126,82 @@ function RateLimitMeter({ label, info, now }: { label: string; info: RateLimitIn
   )
 }
 
-export function StatusBar({ state, connected, className }: StatusBarProps) {
+/** A gauge that leads somewhere. `undefined` handler leaves it inert, so an
+ * embedder that mounts no panels doesn't get buttons that do nothing. */
+function Slot({ onClick, hint, children }: { onClick?: () => void; hint: string; children: ReactNode }) {
+  if (!onClick) return <>{children}</>
+  return (
+    <button
+      type='button'
+      onClick={onClick}
+      aria-label={hint}
+      className='rounded-md px-1 py-0.5 transition-colors outline-none hover:bg-surface-hover focus-visible:bg-surface-hover'>
+      {children}
+    </button>
+  )
+}
+
+export function StatusBar({
+  state,
+  connected,
+  connection,
+  onOpenStatus,
+  onOpenContext,
+  onOpenUsage,
+  actions,
+  className,
+}: StatusBarProps) {
   const meta = STATUS_META[state.status]
   const now = useNow()
   const session = state.rateLimits?.five_hour
   const weekly = state.rateLimits?.seven_day
+  const link: ConnectionState = connection ?? (connected === false ? 'reconnecting' : 'live')
   return (
     <div
       data-slot='status-bar'
       className={cn(
-        'flex items-center gap-3 border-b border-border bg-surface px-3 py-2',
+        'flex items-center gap-2 border-b border-border bg-surface px-3 py-1.5',
         className,
       )}>
-      <Badge variant={meta.variant} dot={!meta.busy}>
-        {meta.busy ? <Spinner className='size-3 text-current' /> : null}
-        {meta.label}
-      </Badge>
-      {state.contextUsage ? <ContextMeter usage={state.contextUsage} /> : null}
-      {session ? <RateLimitMeter label='Session' info={session} now={now} /> : null}
-      {weekly ? <RateLimitMeter label='Weekly' info={weekly} now={now} /> : null}
-      <span className='flex-1' />
-      {!connected ? (
-        <span className='inline-flex items-center gap-1 text-label text-warning'>
-          <WifiOff className='size-3' /> reconnecting…
-        </span>
+      {/* One slot, two meanings: connection trouble wins it, because a session
+          status shown over a dead socket is a stale reading presented as a live
+          one. Tapping it opens the session's own facts — where it runs, on what,
+          with which credentials — which is the question a status prompts. */}
+      <Slot onClick={onOpenStatus} hint='Session info'>
+        {link === 'live' ? (
+          <Badge variant={meta.variant} dot={!meta.busy}>
+            {meta.busy ? <Spinner className='size-3 text-current' /> : null}
+            {meta.label}
+          </Badge>
+        ) : (
+          <Badge variant={link === 'offline' ? 'danger' : 'warning'} dot={false}>
+            {link === 'offline' ? (
+              <WifiOff className='size-3 text-current' />
+            ) : (
+              <RefreshCw className='size-3 animate-spin text-current' />
+            )}
+            {link === 'offline' ? 'Offline' : 'Reconnecting…'}
+          </Badge>
+        )}
+      </Slot>
+      {/* Never a 0% meter for an engine that doesn't measure: an absent reading
+          and a full window are not the same claim. */}
+      {state.capabilities.contextUsage && state.contextUsage ? (
+        <Slot onClick={onOpenContext} hint='Context breakdown'>
+          <ContextMeter usage={state.contextUsage} />
+        </Slot>
+      ) : null}
+      {session || weekly ? (
+        <Slot onClick={onOpenUsage} hint='Plan usage'>
+          <span className='inline-flex items-center gap-2'>
+            {session ? <RateLimitMeter label='Session' info={session} now={now} /> : null}
+            {weekly ? <RateLimitMeter label='Weekly' info={weekly} now={now} /> : null}
+          </span>
+        </Slot>
       ) : null}
+      <span className='flex-1' />
       <span className='font-mono text-label text-fg-3'>{formatCost(state.totalCostUsd)}</span>
+      {actions}
     </div>
   )
 }