npm - @workerdeck/ui - Versions diffs - 0.9.0 → 0.12.0 - Mend

@workerdeck/ui 0.9.0 → 0.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (65) hide show

package/README.md +81 -3
package/build/SessionPanel-Dy9lQrOV.d.mts +319 -0
package/build/SessionPanel-NQ8ksCfj.mjs +8474 -0
package/build/SessionPanel-NQ8ksCfj.mjs.map +1 -0
package/build/format-DqR56Y8l.mjs +162 -0
package/build/format-DqR56Y8l.mjs.map +1 -0
package/build/format-ljc3lKpA.d.mts +59 -0
package/build/format.d.mts +66 -0
package/build/format.mjs +119 -0
package/build/format.mjs.map +1 -0
package/build/index.d.mts +671 -88
package/build/index.mjs +387 -5160
package/build/index.mjs.map +1 -1
package/build/workspace.d.mts +226 -0
package/build/workspace.mjs +861 -0
package/build/workspace.mjs.map +1 -0
package/package.json +22 -4
package/src/components/agent/CodeEditor.tsx +300 -0
package/src/components/agent/Composer.tsx +522 -87
package/src/components/agent/ContextDialog.tsx +99 -0
package/src/components/agent/Conversation.tsx +11 -3
package/src/components/agent/EditorTabs.tsx +165 -0
package/src/components/agent/FileCard.tsx +26 -0
package/src/components/agent/FileTree.tsx +287 -0
package/src/components/agent/FileViewer.tsx +148 -0
package/src/components/agent/HostFilesDialog.tsx +218 -0
package/src/components/agent/Loader.tsx +82 -14
package/src/components/agent/McpDialog.tsx +363 -0
package/src/components/agent/Message.tsx +51 -17
package/src/components/agent/ModelSelect.tsx +34 -6
package/src/components/agent/PermissionModeSelect.tsx +133 -22
package/src/components/agent/PermissionPrompt.tsx +164 -6
package/src/components/agent/PromptTokenText.tsx +39 -0
package/src/components/agent/QuestionPrompt.tsx +122 -0
package/src/components/agent/Reasoning.tsx +20 -5
package/src/components/agent/Response.tsx +128 -0
package/src/components/agent/SessionBrowser.tsx +428 -0
package/src/components/agent/SessionEmptyState.tsx +65 -0
package/src/components/agent/SessionInfoDialog.tsx +163 -0
package/src/components/agent/SessionPanel.tsx +783 -91
package/src/components/agent/SessionWorkspace.tsx +317 -0
package/src/components/agent/SkillsDialog.tsx +195 -0
package/src/components/agent/StatusBar.tsx +85 -18
package/src/components/agent/ToolCallCard.tsx +252 -30
package/src/components/agent/Transcript.tsx +513 -30
package/src/components/agent/UsageDialog.tsx +168 -0
package/src/components/agent/line-prompt.tsx +249 -0
package/src/components/agent/pulse.tsx +60 -0
package/src/components/agent/transcript-variant.tsx +123 -0
package/src/components/prompt-area/prompt-area-engine.ts +53 -0
package/src/components/prompt-area/types.ts +15 -0
package/src/components/prompt-area/use-prompt-area.ts +20 -0
package/src/components/ui/CodeBlock.tsx +40 -2
package/src/components/ui/CopyButton.tsx +28 -3
package/src/components/ui/Dialog.tsx +92 -0
package/src/components/ui/Menu.tsx +55 -0
package/src/components/ui/Splitter.tsx +133 -0
package/src/components/ui/Tooltip.tsx +22 -5
package/src/format.ts +11 -0
package/src/index.ts +67 -2
package/src/lib/clipboard.ts +56 -0
package/src/lib/format.ts +114 -0
package/src/lib/status.ts +124 -0
package/src/lib/tool-icon.ts +96 -0
package/src/workspace.ts +28 -0

package/README.md CHANGED Viewed

@@ -1,9 +1,17 @@
 # @workerdeck/ui
 Styled agent-control component library for WorkerDeck hosts: `SessionPanel` (status bar +
-streaming transcript + tool-call cards + permission prompts + composer), `SessionList`, and the
-underlying primitives (Button, Badge, Card, Select, AlertDialog, …). Built on **Tailwind v4 +
-Base UI + cva**, themed by CSS tokens with light/dark via `<html data-theme>`.
+streaming transcript + tool-call cards + permission prompts + composer with attachments and
+`@file` / `/command` completion, plus the panels behind it — session info, context, plan usage,
+MCP servers, project files), `SessionWorkspace` (a VS Code-shaped layout *around* that panel —
+file tree, editor tabs, Monaco — at `@workerdeck/ui/workspace`, so Monaco stays out of hosts that
+don't want it), `SessionList`, and the underlying primitives (Button, Badge,
+Card, Select, Dialog, AlertDialog, …). Built on **Tailwind v4 + Base UI + cva**, themed by CSS
+tokens with light/dark via `<html data-theme>`.
+Everything `SessionPanel` offers is gated on the session's **engine capability record**, so the
+same component is correct for a Claude, Codex or provider session without the host branching:
+a control the engine can't honor is absent rather than present-and-failing.
 The headless layer (`useClaudeSession`, transcript reducer) lives in `@workerdeck/react`;
 this package is the styling opinion on top.
@@ -57,6 +65,53 @@ const client = new WorkerDeckClient({ baseUrl: `${location.origin}/v1` })
 <SessionPanel key={sessionId} client={client} sessionId={sessionId} />
 ```
+### The workspace (optional)
+`SessionWorkspace` wraps that same panel in a three-region layout — project tree on the left,
+open files above, agent below — and is **strictly additive**: `SessionPanel` is untouched and
+still complete on its own, so pick whichever fits. An app with its own file tree keeps the panel.
+It lives at its **own entry point**, and Monaco is an **optional peer dependency** — install it
+alongside `@workerdeck/ui` if you want the workspace, and skip both if you don't:
+```sh
+npm install monaco-editor
+```
+```tsx
+import { SessionWorkspace } from '@workerdeck/ui/workspace'
+<SessionWorkspace key={sessionId} client={client} sessionId={sessionId} />
+```
+It needs the gateway's host-filesystem routes (`hostFiles` in the server config); without them
+the rail is simply absent and you get the panel. Editing additionally needs `hostFiles.write`,
+which is a separate opt-in and defaults **off** — the editor reads `/fs/roots` and renders
+read-only when it's not enabled. Saves are conditional on the hash the tab read, so a save that
+collides with the agent's own edit is refused (409) and offered as a choice rather than silently
+winning.
+**If you bundle with Vite, you need one line** — the workspace uses Monaco, which reaches its
+web workers with `new Worker(new URL(…, import.meta.url))`. Rollup resolves that at build time,
+but Vite's dev dep-optimizer rewrites the package into `.vite/deps/` and breaks the relative URL;
+Monaco then *silently* runs worker code on the main thread:
+```ts
+// vite.config.ts
+export default defineConfig({ optimizeDeps: { exclude: ['monaco-editor'] } })
+```
+Monaco is loaded through a dynamic `import()`, so it costs nothing at runtime until a file is
+opened. Our own dashboard additionally aliases away Monaco's four worker-backed language services
+(TypeScript/JSON/CSS/HTML) — 8.8MB of build output for IntelliSense and schema validation, with
+syntax highlighting unaffected — see `packages/web/vite.config.ts` if you want the same trade.
+None of this reaches you through the root entry. That separation is why the workspace has its own
+subpath rather than living in `@workerdeck/ui`: tree-shaking alone is not enough. Rollup does drop
+`CodeEditor` from a `SessionPanel`-only bundle, but Vite resolves Monaco's worker URLs while
+*transforming* the module — before tree-shaking runs — and emits ~9MB of worker assets that are
+never retracted. Keeping Monaco unreachable from the root entry is what actually prevents that.
 Every component takes `className` and carries `data-slot` attributes for targeted overrides.
 `SessionPanel` is self-sufficient for errors: a `protocol_error` (the gateway or CLI refusing a
@@ -72,3 +127,26 @@ lose by forgetting a second mount isn't one.
   scoping — file an issue with your case.
 - Dark mode is driven **only** by `[data-theme='dark']` on the root element (the Tailwind
   `dark:` variant is remapped to it); `prefers-color-scheme` is not consulted at CSS level.
+- The session surface centers its content at `--wd-content-max-w` (default `48rem`).
+  Embedders in narrow docks (a VS Code bottom panel, a drawer) set it to `100%` for
+  edge-to-edge content. Every component also carries `data-slot` attributes for targeted
+  overrides — e.g. `[data-slot='composer-hint']` is the "Enter to send" line, which a host
+  whose vertical space is precious can `display: none`.
+- `SessionPanel` can hand its dialog surfaces to the embedder: `panelSurface: 'external'`
+  renders no dialogs and no `⋯` menu — every affordance that would open one calls
+  `onOpenPanel(panel)` instead, and `onVitals` streams the live readings (status, context,
+  rate limits, capabilities) those external surfaces need, so host chrome never has to
+  attach a second time (the tool bridge asks the first attached client). The VS Code
+  extension's sidebar sections are the reference consumer.
+- `statusSurface: 'external'` is the separate opt-out for the **status bar itself**, for a host
+  whose chrome already has a status line (VS Code's window bar): the panel draws no bar and the
+  readings leave through `onVitals` as before. The two flags are independent, with one coupling
+  — the `⋯` menu lives in the bar's trailing slot, so `statusSurface: 'external'` alongside
+  `panelSurface: 'internal'` must pass a **function** `header` for the menu to land in.
+  Whatever draws the bar owes the panel's own rule: `SessionVitals.connection` wins the status
+  slot whenever it isn't `'live'`, because a session status held over a dropped socket is a
+  stale reading presented as a current one.
+- `@workerdeck/ui/format` is a third entry point carrying the pure formatters (`45.2k`,
+  `2h 10m`) with no React in the graph — for a host that renders session readings outside
+  React, like an extension host drawing them into a window status bar, and wants them spelled
+  exactly as the panel spells them.

package/build/SessionPanel-Dy9lQrOV.d.mts ADDED Viewed

@@ -0,0 +1,319 @@
+import * as _$react from "react";
+import { ReactNode } from "react";
+import { LucideIcon } from "lucide-react";
+import { ModelOption, PermissionMode } from "@workerdeck/protocol";
+import { ConnectionState, TranscriptState } from "@workerdeck/react";
+import { WorkerDeckClient } from "@workerdeck/client";
+//#region src/components/agent/PermissionModeSelect.d.ts
+type PermissionModeMeta = {
+  value: PermissionMode; /** The name Claude Code itself uses. */
+  label: string;
+  /** The chip form, for bars where the label shares a line with three other
+   * things and "Bypass permissions" would eat half of it. */
+  shortLabel: string; /** What the mode actually does — the CLI's own one-liners. */
+  description: string;
+  icon: LucideIcon;
+  dangerous?: boolean;
+};
+/**
+ * The modes surfaced across UI surfaces (session creation, in-session switcher),
+ * ordered by how much of the approval gate they give away.
+ *
+ * Notably `default` is **"Manual"**: the wire value is `default`, but calling it
+ * that in the UI conflates a real mode (ask me every time) with "whatever the
+ * server picked", which is the one confusion a mode chip exists to avoid. The
+ * naming, the icons and the summaries are shared with the iOS app on purpose —
+ * the two surfaces should read as the same list.
+ */
+declare const PERMISSION_MODES: PermissionModeMeta[];
+declare const permissionModeMeta: (mode: PermissionMode) => PermissionModeMeta | undefined;
+/** One offered mode as plain data — no icon, no React. What a host chrome
+ * outside the panel (a VS Code QuickPick) needs to draw the same list. */
+type PermissionModeChoice = {
+  value: PermissionMode;
+  label: string;
+  description: string;
+  dangerous?: boolean;
+  /** Offered but unreachable: a session not started for bypass can never gain
+   * it, and saying so beats omitting the row. */
+  disabled?: boolean;
+};
+/**
+ * The modes this session may actually be switched into, with the reasons baked
+ * in — the same filtering {@link PermissionModeSelect} applies, so an embedder
+ * rendering its own picker cannot drift from the panel's.
+ */
+declare function permissionModeChoices(modes?: readonly PermissionMode[], canBypass?: boolean): PermissionModeChoice[];
+interface PermissionModeSelectProps {
+  /** The session's current mode (TranscriptState.permissionMode). */
+  mode?: PermissionMode;
+  onModeChange: (mode: PermissionMode) => void;
+  /** Restrict what is offered — most of {@link PERMISSION_MODES} is Claude Code
+   * vocabulary the other engines have no meaning for. Defaults to all of them;
+   * pass the session's `capabilities.permissionModes`. */
+  modes?: readonly PermissionMode[];
+  /**
+   * Whether this session may be switched into `bypassPermissions` at all. The
+   * CLI refuses unless the process was spawned for it, so a session that didn't
+   * ask up front can never gain it. The row is shown disabled rather than hidden
+   * — "you can't have this here" is a more useful answer than a row that
+   * silently isn't there. `undefined` (an older server) offers it.
+   */
+  canBypass?: boolean;
+  /** 'toolbar' (default) is the composer's compact borderless trigger;
+   * 'form' is a standard field-sized Select for create/settings forms. */
+  variant?: 'toolbar' | 'form';
+  disabled?: boolean;
+  className?: string;
+}
+/** Permission-mode switcher: compact in the composer toolbar, field-sized in forms. */
+declare function PermissionModeSelect({
+  mode,
+  onModeChange,
+  modes,
+  canBypass,
+  variant,
+  disabled,
+  className
+}: PermissionModeSelectProps): _$react.JSX.Element;
+//#endregion
+//#region src/components/agent/transcript-variant.d.ts
+/**
+ * How the transcript draws a turn.
+ *
+ * - `cards` — the chat convention: bubbles, bordered tool cards, generous gaps.
+ *   Right for a wide dashboard where the transcript is the page.
+ * - `lines` — one full-width line item per event, transparent, hover-highlit,
+ *   with a glyph in a fixed left gutter. Right where vertical space is the
+ *   scarce resource (a VS Code dock) and the terminal is the reference UX:
+ *   nothing is boxed, the content and its marker carry the comprehension.
+ *
+ * A context rather than a prop chain because every row component needs it and
+ * only the transcript root knows it — and because `Message`/`ToolCallCard` are
+ * exported on their own, so an embedder composing them by hand gets the right
+ * treatment for free.
+ */
+type TranscriptVariant = 'cards' | 'lines';
+declare function TranscriptVariantProvider({
+  value,
+  children
+}: {
+  value: TranscriptVariant;
+  children: ReactNode;
+}): _$react.JSX.Element;
+declare function useTranscriptVariant(): TranscriptVariant;
+/**
+ * How much room the transcript gives each row.
+ *
+ * - `comfortable` — a blank line between messages, which is what the Claude Code
+ *   CLI does and what the `lines` variant is trying to read like. The default:
+ *   a transcript is prose before it is a table.
+ * - `compact` — rows tight against each other, for a dock where every line of
+ *   vertical space is contested.
+ *
+ * Separate from the variant, and deliberately: they answer different questions.
+ * The variant decides *how a row is drawn* (boxed or not) and follows from the
+ * surface; density decides *how much air is around it* and is a preference the
+ * reader holds. Coupling them would mean a dock could not be roomy and a
+ * dashboard could not be dense.
+ */
+type TranscriptDensity = 'comfortable' | 'compact';
+declare function TranscriptDensityProvider({
+  value,
+  children
+}: {
+  value: TranscriptDensity;
+  children: ReactNode;
+}): _$react.JSX.Element;
+declare function useTranscriptDensity(): TranscriptDensity;
+//#endregion
+//#region src/components/agent/SessionPanel.d.ts
+interface SessionPanelProps {
+  client: WorkerDeckClient;
+  sessionId: string | undefined;
+  /**
+   * Optional slot rendered at the top, above the status bar.
+   *
+   * Pass a **function** to take the session-actions (`⋯`) menu into your own
+   * chrome: it is called with the menu element, and wherever you put it is
+   * where it lives — the status bar then renders without it, so it never
+   * appears twice. Pass a plain node (or nothing) and the menu stays in the
+   * status bar's trailing slot.
+   *
+   * The seam exists because the menu can only be *built* here — it needs the
+   * capability record, the host-file verdict and the panel's own dialog state —
+   * but an embedder with a real header usually wants it up there with the rest
+   * of the session's controls, not stranded on the status line.
+   */
+  header?: ReactNode | ((slots: {
+    actions: ReactNode;
+  }) => ReactNode);
+  /**
+   * Where the info/context/usage/MCP/skills/files surfaces live. `'internal'`
+   * (default) renders them as dialogs inside the panel. `'external'` renders
+   * NO dialogs and no `⋯` menu: every affordance that would open one calls
+   * {@link onOpenPanel} instead, so an embedder can host those surfaces in its
+   * own chrome (a VS Code sidebar, a drawer) and keep the panel purely a
+   * conversation surface.
+   */
+  panelSurface?: 'internal' | 'external';
+  /**
+   * Where the status bar lives. `'internal'` (default) draws it across the top
+   * of the panel. `'external'` draws none — the readings still leave through
+   * {@link onVitals}, so an embedder with a status line of its own (VS Code's
+   * window status bar) renders them there instead of stacking a second bar
+   * inside a panel that already sits in one.
+   *
+   * Deliberately independent of {@link panelSurface}: hosting the dialogs and
+   * hosting the bar are separate decisions. One coupling to know about — the
+   * `⋯` menu lives in the bar's trailing slot, so `statusSurface: 'external'`
+   * with `panelSurface: 'internal'` must pass a **function** {@link header} to
+   * take the menu, or it has nowhere left to go.
+   */
+  statusSurface?: 'internal' | 'external';
+  /** Where `panelSurface: 'external'` routes opens. Absent = the affordances
+   * (status-bar clicks, `/mcp`) become inert rather than half-working. */
+  onOpenPanel?: (panel: SessionSurfacePanel) => void;
+  /** Live session vitals, fired whenever they change — for embedders mirroring
+   * status/context/usage into chrome outside the panel (identity-stable via an
+   * internal ref, so an inline closure is fine). */
+  onVitals?: (vitals: SessionVitals) => void;
+  /**
+   * How the transcript draws a turn — `'cards'` (default) or `'lines'`, the
+   * space-efficient terminal treatment: no boxes, no bubbles, one full-width
+   * hover-highlit row per event behind a gutter glyph. An embedder in a dock
+   * (the VS Code panel) wants `'lines'`; a full-width dashboard usually doesn't.
+   */
+  transcriptVariant?: TranscriptVariant;
+  /**
+   * How much air the transcript gives each row — `'comfortable'` (default: a
+   * blank line between messages, as the Claude Code CLI leaves) or `'compact'`
+   * (rows tight against one another). Independent of `transcriptVariant`: the
+   * variant follows from the surface, density is the reader's preference, and a
+   * dock is allowed to be roomy.
+   */
+  transcriptDensity?: TranscriptDensity;
+  /**
+   * Where the session's own controls — model and permission mode — live.
+   * `'internal'` (default) draws them in the composer's toolbar row.
+   * `'external'` draws neither, and the composer collapses to a single line
+   * with its attach/send buttons beside the field: the embedder renders the
+   * pickers in its own chrome (VS Code's status bar, where a click opens a
+   * QuickPick) and drives them through {@link onControls}.
+   *
+   * The options themselves ride {@link SessionVitals} — an embedder must not
+   * attach a second time to learn what the models are.
+   */
+  controlsSurface?: 'internal' | 'external';
+  /**
+   * Handed the session's setters once the panel is live, and `undefined` on
+   * unmount. The counterpart to `controlsSurface: 'external'`: vitals carry the
+   * readings out, this carries the commands back in. Stable identity — safe to
+   * stash in a ref.
+   */
+  onControls?: (controls: SessionControls | undefined) => void;
+  /**
+   * Click anywhere the panel isn't already doing something and the caret lands
+   * in the composer — the terminal/chat convention, and what a docked panel
+   * wants: the field is why the panel is focussed at all.
+   *
+   * Only dead space. A click that hits a control (a tool row expanding, a link,
+   * a button) or that ends a text selection is that action, not a request for
+   * the input. Off by default: a full-page surface has plenty of dead space that
+   * means nothing in particular.
+   */
+  focusComposerOnClick?: boolean;
+  /**
+   * What this session looked like when it was last looked at: how many
+   * transcript items had been seen, and when. Present and behind the current
+   * transcript → **catch-up**: a recap row at the boundary, everything above it
+   * dimmed, and a bar offering to jump there or to dismiss.
+   *
+   * The embedder owns the watermark because only it knows what "looked at"
+   * means in its own chrome — a hidden dock is not being read. The panel reports
+   * the number to remember through `SessionVitals.itemCount`.
+   */
+  unseen?: {
+    itemCount: number;
+    since?: number;
+  };
+  className?: string;
+}
+/** What an embedder needs to *change* a session it doesn't own the attach for. */
+type SessionControls = {
+  setModel: (model?: string) => void;
+  setPermissionMode: (mode: PermissionMode) => void;
+  interrupt: () => void;
+  /**
+   * Put the caret in the composer.
+   *
+   * For an embedder whose own chrome is how you arrive at a session — clicking a
+   * row in VS Code's sidebar — where revealing the panel and being able to type
+   * are the same intention. The panel cannot infer it: from in here, a session
+   * appearing looks identical whether someone asked for it or it was restored.
+   */
+  focusComposer: () => void;
+};
+/** The panels the session surface can raise. One at a time, by identity: a bag
+ * of booleans would let two open at once. */
+type SessionSurfacePanel = 'info' | 'context' | 'usage' | 'mcp' | 'files' | 'skills';
+/** What {@link SessionPanelProps.onVitals} reports: the live readings a host
+ * chrome outside the panel would otherwise have to attach a second time for —
+ * which the tool bridge forbids (it asks the first attached client). */
+type SessionVitals = {
+  status: TranscriptState['status'];
+  /**
+   * How the client is reaching the gateway. Load-bearing for a host rendering
+   * these outside the panel: `status` is the last thing the session *said*, and
+   * over a dropped socket that is a stale reading. The panel's own bar gives
+   * the connection the status slot when it isn't `'live'` for exactly this
+   * reason — an embedder showing `status` alone would present stale as current.
+   */
+  connection: ConnectionState;
+  engine: TranscriptState['engine'];
+  capabilities: TranscriptState['capabilities'];
+  model: string | undefined;
+  /** The models this session can switch to — the panel's own list, so an
+   * external picker offers exactly what the internal one would. */
+  models: ModelOption[];
+  permissionMode: TranscriptState['permissionMode'];
+  /** The modes it can switch into, already filtered by the capability record
+   * and the session's bypass grant (see `permissionModeChoices`). */
+  permissionModes: PermissionModeChoice[];
+  cwd: TranscriptState['cwd'];
+  contextUsage: TranscriptState['contextUsage'];
+  rateLimits: TranscriptState['rateLimits'];
+  /** How many transcript rows exist right now — the number an embedder stores
+   * as its "seen" watermark while the panel is actually on screen, and compares
+   * against later to know what is new. */
+  itemCount: number;
+};
+/**
+ * The all-in-one embeddable session surface: status bar, streaming transcript,
+ * permission prompts, composer. Attaches via useClaudeSession; remount (key) to switch
+ * sessions.
+ *
+ * Every affordance is gated on the session's **capability record** rather than on
+ * the engine name — an absent capability hides the control instead of offering
+ * one that can only fail.
+ */
+declare function SessionPanel({
+  client,
+  sessionId,
+  header,
+  panelSurface,
+  statusSurface,
+  onOpenPanel,
+  onVitals,
+  transcriptVariant,
+  transcriptDensity,
+  controlsSurface,
+  onControls,
+  focusComposerOnClick,
+  unseen,
+  className
+}: SessionPanelProps): _$react.JSX.Element;
+//#endregion
+export { permissionModeChoices as _, SessionVitals as a, TranscriptVariant as c, useTranscriptVariant as d, PERMISSION_MODES as f, PermissionModeSelectProps as g, PermissionModeSelect as h, SessionSurfacePanel as i, TranscriptVariantProvider as l, PermissionModeMeta as m, SessionPanel as n, TranscriptDensity as o, PermissionModeChoice as p, SessionPanelProps as r, TranscriptDensityProvider as s, SessionControls as t, useTranscriptDensity as u, permissionModeMeta as v };
+//# sourceMappingURL=SessionPanel-Dy9lQrOV.d.mts.map