@workerdeck/ui 0.23.0 → 1.1.0

package/build/SessionPanel-yNO60Tzw.d.mts

@@ -0,0 +1,151 @@
+import { ReactNode } from "react";
+import { LucideIcon } from "lucide-react";
+import { ModelOption, PermissionMode, SkillInfo } from "@workerdeck/protocol";
+import { ClientToolHandler, ConnectionState, TranscriptState, UseToolCallHostOptions } from "@workerdeck/react";
+import { WorkerDeckClient } from "@workerdeck/client";
+//#region src/components/agent/PermissionModeSelect.d.ts
+type PermissionModeMeta = {
+  value: PermissionMode;
+  label: string;
+  shortLabel: string;
+  description: string;
+  icon: LucideIcon;
+  dangerous?: boolean;
+};
+declare const PERMISSION_MODES: PermissionModeMeta[];
+declare function permissionModeMeta(mode: PermissionMode): PermissionModeMeta | undefined;
+type PermissionModeChoice = {
+  value: PermissionMode;
+  label: string;
+  description: string;
+  dangerous?: boolean;
+  disabled?: boolean;
+};
+declare function permissionModeChoices(modes?: readonly PermissionMode[], canBypass?: boolean): PermissionModeChoice[];
+interface PermissionModeSelectProps {
+  mode?: PermissionMode;
+  onModeChange: (mode: PermissionMode) => void;
+  modes?: readonly PermissionMode[];
+  canBypass?: boolean;
+  variant?: 'toolbar' | 'form';
+  disabled?: boolean;
+  className?: string;
+}
+declare function PermissionModeSelect({ mode, onModeChange, modes, canBypass, variant, disabled, className }: PermissionModeSelectProps): import("react").JSX.Element;
+//#endregion
+//#region src/components/terminal/affordances.d.ts
+type TerminalAffordances = {
+  hover?: boolean;
+  actions?: boolean;
+};
+declare function useAffordances(): Required<TerminalAffordances>;
+declare function WithActions({ actions, children, className }: {
+  actions: ReactNode;
+  children: ReactNode;
+  className?: string;
+}): import("react").JSX.Element;
+declare function CopyAction({ text, label }: {
+  text: string;
+  label?: string;
+}): import("react").JSX.Element;
+//#endregion
+//#region src/components/agent/transcript-variant.d.ts
+type TranscriptVariant = 'cards' | 'terminal';
+declare function TranscriptVariantProvider({ value, children }: {
+  value: TranscriptVariant;
+  children: ReactNode;
+}): import("react").JSX.Element;
+declare function useTranscriptVariant(): TranscriptVariant;
+type TranscriptDensity = 'comfortable' | 'compact';
+declare function TranscriptDensityProvider({ value, children }: {
+  value: TranscriptDensity;
+  children: ReactNode;
+}): import("react").JSX.Element;
+declare function useTranscriptDensity(): TranscriptDensity;
+type TranscriptFont = 'sans' | 'mono';
+//#endregion
+//#region src/components/agent/SessionPanel.d.ts
+type TerminalMetrics = {
+  fontSize?: number;
+  lineHeight?: number;
+};
+interface SessionPanelProps {
+  client: WorkerDeckClient;
+  sessionId: string | undefined;
+  header?: ReactNode | ((slots: {
+    actions: ReactNode;
+  }) => ReactNode);
+  panelSurface?: 'internal' | 'external';
+  statusSurface?: 'internal' | 'external';
+  statusPlacement?: 'top' | 'bottom';
+  onOpenPanel?: (panel: SessionSurfacePanel) => void;
+  onVitals?: (vitals: SessionVitals) => void;
+  transcriptVariant?: TranscriptVariant;
+  affordances?: TerminalAffordances | boolean;
+  terminalMetrics?: TerminalMetrics;
+  scrubber?: boolean;
+  /** Bookmarked transcript item ids — the host owns membership and persistence. */
+  bookmarks?: readonly string[];
+  onToggleBookmark?: (itemId: string) => void;
+  reveal?: {
+    toolUseId: string;
+    nonce: number;
+  };
+  openSubagent?: {
+    toolUseId: string;
+    nonce: number;
+  };
+  onSubagentChange?: (toolUseId: string | undefined) => void;
+  stickyPrompt?: boolean;
+  transcriptDensity?: TranscriptDensity;
+  transcriptFont?: TranscriptFont;
+  controlsSurface?: 'internal' | 'external' | 'status';
+  onControls?: (controls: SessionControls | undefined) => void;
+  focusComposerOnClick?: boolean;
+  unseen?: {
+    itemCount: number;
+    since?: number;
+  };
+  readOnly?: boolean;
+  toolHost?: UseToolCallHostOptions | false;
+  cacheTranscript?: boolean;
+  emptyState?: ReactNode;
+  onLinkClick?: (href: string) => boolean | void;
+  clientTools?: Record<string, ClientToolHandler>;
+  fontSize?: number;
+  className?: string;
+}
+type SessionControls = {
+  setModel: (model?: string) => void;
+  setPermissionMode: (mode: PermissionMode) => void;
+  interrupt: () => void;
+  focusComposer: () => void;
+  insertComposerText: (text: string) => void;
+};
+type SessionSurfacePanel = 'info' | 'context' | 'usage' | 'mcp' | 'files' | 'skills';
+type SessionVitals = {
+  status: TranscriptState['status'];
+  connection: ConnectionState;
+  engine: TranscriptState['engine'];
+  capabilities: TranscriptState['capabilities'];
+  model: string | undefined;
+  models: ModelOption[];
+  permissionMode: TranscriptState['permissionMode'];
+  permissionModes: PermissionModeChoice[];
+  skills: SkillInfo[] | undefined;
+  cwd: TranscriptState['cwd'];
+  contextUsage: TranscriptState['contextUsage'];
+  rateLimits: TranscriptState['rateLimits'];
+  /**
+   * When the newest window in `rateLimits` was reported, as event time — not receive time. External chrome (the
+   * VS Code status bar, iOS) cannot otherwise tell a live reading from one a days-old session just replayed.
+   * Absent means unknown, which is not the same as fresh.
+   */
+  rateLimitsUpdatedAt: number | undefined;
+  itemCount: number;
+  totalCostUsd: number;
+};
+declare function SessionPanel({ client, sessionId, header, panelSurface, statusSurface, statusPlacement, onOpenPanel, onVitals, transcriptVariant, transcriptDensity, transcriptFont, affordances, terminalMetrics, scrubber, bookmarks, onToggleBookmark, reveal, openSubagent, onSubagentChange, stickyPrompt, controlsSurface, onControls, focusComposerOnClick, unseen, readOnly, toolHost, clientTools, cacheTranscript, emptyState, onLinkClick, fontSize, className }: SessionPanelProps): import("react").JSX.Element;
+//#endregion
+export { permissionModeChoices as C, PermissionModeSelectProps as S, useAffordances as _, SessionVitals as a, PermissionModeMeta as b, TranscriptDensityProvider as c, TranscriptVariantProvider as d, useTranscriptDensity as f, WithActions as g, TerminalAffordances as h, SessionSurfacePanel as i, TranscriptFont as l, CopyAction as m, SessionPanel as n, TerminalMetrics as o, useTranscriptVariant as p, SessionPanelProps as r, TranscriptDensity as s, SessionControls as t, TranscriptVariant as u, PERMISSION_MODES as v, permissionModeMeta as w, PermissionModeSelect as x, PermissionModeChoice as y };
+//# sourceMappingURL=SessionPanel-yNO60Tzw.d.mts.map

package/build/format-C_lpFq0l.d.mts

@@ -0,0 +1,16 @@
+//#region src/lib/format.d.ts
+declare function formatCost(usd: number | undefined): string;
+declare function formatDuration(ms: number): string;
+declare function formatTokens(tokens: number): string;
+declare function formatBytes(bytes: number): string;
+declare function formatCountdown(untilEpochMs: number, now?: number): string;
+declare function formatRelativeTime(epochMs: number | undefined, now?: number): string;
+declare function formatRateLimitWindow(key: string): string;
+declare function formatRateLimitWindowLong(key: string): string;
+declare function rateLimitWindowSeconds(key: string): number | undefined;
+declare function formatAgoPrecise(epochMs: number, now?: number): string;
+declare function toolInputPreview(input: unknown, max?: number): string;
+declare function friendlyModel(id: string | undefined): string | undefined;
+//#endregion
+export { formatDuration as a, formatRelativeTime as c, rateLimitWindowSeconds as d, toolInputPreview as f, formatCountdown as i, formatTokens as l, formatBytes as n, formatRateLimitWindow as o, formatCost as r, formatRateLimitWindowLong as s, formatAgoPrecise as t, friendlyModel as u };
+//# sourceMappingURL=format-C_lpFq0l.d.mts.map

package/build/format.d.mts

@@ -1,22 +1,7 @@
-import { a as formatDuration, c as formatRelativeTime, d as rateLimitWindowSeconds, f as toolInputPreview, i as formatCountdown, l as formatTokens, n as formatBytes, o as formatRateLimitWindow, r as formatCost, s as formatRateLimitWindowLong, t as formatAgoPrecise, u as friendlyModel } from "./format-ljc3lKpA.mjs";
+import { a as formatDuration, c as formatRelativeTime, d as rateLimitWindowSeconds, f as toolInputPreview, i as formatCountdown, l as formatTokens, n as formatBytes, o as formatRateLimitWindow, r as formatCost, s as formatRateLimitWindowLong, t as formatAgoPrecise, u as friendlyModel } from "./format-C_lpFq0l.mjs";
 import { ModelOption, RateLimitInfo, SessionStatus } from "@workerdeck/protocol";
-
 //#region src/lib/status.d.ts
-/**
- * How a session's live readings become a status line — the pure half, so every
- * host spells "Needs approval", "80% is a warning" and "which window is the
- * binding one" the same way.
- *
- * Structurally typed against `SessionVitals` rather than importing it: this file
- * ships from the React-free `@workerdeck/ui/format` entry, and a host drawing
- * the readings outside React (the VS Code extension host in the window status
- * bar) must not pull a component graph in to do it. A real `SessionVitals`
- * satisfies every shape here.
- */
 type StatusSeverity = 'none' | 'warning' | 'error';
-/** What a status slot shows, before any host's icon vocabulary gets involved.
- * `icon` is a VS Code codicon name — the one host-shaped thing left, because the
- * alternative is a second mapping table in the only consumer. */
 type StatusPresentation = {
   icon: string;
   label: string;
@@ -24,89 +9,36 @@ type StatusPresentation = {
 };
 type StatusReadings = {
   status: SessionStatus;
-  /** `@workerdeck/react`'s `ConnectionState`, structurally — the link state wins
-   * the slot, so it has to be part of the reading. */
   connection?: 'live' | 'reconnecting' | 'offline';
 };
-/**
- * The status slot, connection first. A session status held over a dead socket is
- * the last thing we heard, not the current state — so a lost link takes the slot
- * rather than letting "Running" imply a turn is still streaming.
- */
 declare function statusPresentation(vitals: StatusReadings | undefined): StatusPresentation;
-/** 0–100 → the colour a meter wears. One pair of thresholds for every surface. */
 declare function meterSeverity(pct: number | undefined): StatusSeverity;
-/**
- * The three *lanes* a plan-usage reading can occupy, and the whole reason this
- * is a rule rather than a per-client `if`.
- *
- * The CLI reports one window per limit (`five_hour`, `seven_day`, and a
- * `seven_day_<model>` bucket per model-scoped limit — `seven_day_opus`,
- * `seven_day_sonnet`, and whatever `model_scoped` names next). A surface with
- * one slot shows the fullest of them, which is why `tightestWindow` exists —
- * but that answers "what is closest to blocking me", not "how much of *this
- * session's* budget have I spent", and those are different questions a reader
- * asks at different times. A weekly window at 71% will win the single slot over
- * a five-hour window at 60% every time, so the reading you actually watch while
- * working is the one you can never see.
- *
- * Hence three lanes, each independently showable:
- *
- * - `'session'` — the five-hour window. The one that resets while you work.
- * - `'weekly'` — the plain seven-day window, the account-wide ceiling.
- * - `'model'` — the fullest of the *model-scoped* weekly buckets. Deliberately
- *   not a named model: which models have their own bucket is the plan's
- *   business and changes without notice, so a client that hardcoded
- *   `seven_day_opus` would show nothing the month it becomes something else.
- *   The label comes from the key, so this lane names whatever it found.
- */
 type UsageLane = 'session' | 'weekly' | 'model';
-/** The window a lane points at, or `undefined` when this account has none. */
 declare function usageWindow(rateLimits: Record<string, RateLimitInfo> | undefined, lane: UsageLane): {
   key: string;
   info: RateLimitInfo;
 } | undefined;
-/** The rate-limit window that gets the one visible slot: whichever is fullest,
- * since the binding constraint is the one worth glancing at. Still the right
- * rule for a surface with exactly one slot; {@link usageWindow} is for one with
- * three. */
 declare function tightestWindow(rateLimits: Record<string, RateLimitInfo> | undefined): {
   key: string;
   info: RateLimitInfo;
 } | undefined;
-/** A rate-limit window's key, named for a human. A model-scoped bucket is named
- * for its model alone (`seven_day_fable` → "Fable"): the lane it sits in
- * already says weekly, and "Seven day fable" in a status bar is three words to
- * say one. */
 declare function windowLabel(key: string): string;
 type ModelReadings = {
   model?: string;
   models: readonly ModelOption[];
 };
-/**
- * The catalog row a session is actually running, or `undefined` for a model the
- * list doesn't name. Matched leniently: a session reports the *resolved* id
- * (`claude-sonnet-5`) where the row may be keyed on the alias (`sonnet`), and
- * either can carry a `[1m]` context-window suffix.
- */
 declare function currentModel(vitals: ModelReadings | undefined): ModelOption | undefined;
-/** A session's model, named the way the picker names it. Falls back to the raw
- * id, and to "Default" while the session is on the CLI's own pick. */
 declare function modelLabel(vitals: ModelReadings | undefined): string;
-/** Context percentage as its meter severity — the reading and the colour come
- * from one place so a panel and a status bar never disagree.
- *
- * Takes only the number it reads, so the compact `ContextReading` that rides
- * the sessions list and the full `ContextUsage` on the event stream are coloured
- * by one rule rather than two. */
 declare function contextSeverity(usage: {
   percentage: number;
 } | undefined): StatusSeverity;
-/** {@link meterSeverity} as a text colour class. Here rather than beside each
- * meter because the status bar, the context dialog and a sessions-list row all
- * paint the same reading, and a fourth copy of the thresholds is a fourth
- * chance for one surface to call 81% orange and another call it grey. */
 declare function meterColorClass(pct: number | undefined): string;
+/**
+ * The fill colour for a meter bar. Deliberately a different ramp from
+ * {@link meterColorClass}: a bar reads as alarming later than a number does, so the tint
+ * turns at 70/90 where the text severity turns at 80/95.
+ */
+declare function meterTintClass(pct: number): string;
 //#endregion
-export { ModelReadings, StatusPresentation, StatusReadings, StatusSeverity, UsageLane, contextSeverity, currentModel, formatAgoPrecise, formatBytes, formatCost, formatCountdown, formatDuration, formatRateLimitWindow, formatRateLimitWindowLong, formatRelativeTime, formatTokens, friendlyModel, meterColorClass, meterSeverity, modelLabel, rateLimitWindowSeconds, statusPresentation, tightestWindow, toolInputPreview, usageWindow, windowLabel };
+export { ModelReadings, StatusPresentation, StatusReadings, StatusSeverity, UsageLane, contextSeverity, currentModel, formatAgoPrecise, formatBytes, formatCost, formatCountdown, formatDuration, formatRateLimitWindow, formatRateLimitWindowLong, formatRelativeTime, formatTokens, friendlyModel, meterColorClass, meterSeverity, meterTintClass, modelLabel, rateLimitWindowSeconds, statusPresentation, tightestWindow, toolInputPreview, usageWindow, windowLabel };
 //# sourceMappingURL=format.d.mts.map

package/build/format.mjs

@@ -1,2 +1,2 @@
-import { _ as formatRelativeTime, a as modelLabel, b as rateLimitWindowSeconds, c as usageWindow, d as formatBytes, f as formatCost, g as formatRateLimitWindowLong, h as formatRateLimitWindow, i as meterSeverity, l as windowLabel, m as formatDuration, n as currentModel, o as statusPresentation, p as formatCountdown, r as meterColorClass, s as tightestWindow, t as contextSeverity, u as formatAgoPrecise, v as formatTokens, x as toolInputPreview, y as friendlyModel } from "./status-BE-zg88x.mjs";
-export { contextSeverity, currentModel, formatAgoPrecise, formatBytes, formatCost, formatCountdown, formatDuration, formatRateLimitWindow, formatRateLimitWindowLong, formatRelativeTime, formatTokens, friendlyModel, meterColorClass, meterSeverity, modelLabel, rateLimitWindowSeconds, statusPresentation, tightestWindow, toolInputPreview, usageWindow, windowLabel };
+import { S as toolInputPreview, _ as formatRateLimitWindowLong, a as meterTintClass, b as friendlyModel, c as tightestWindow, d as formatAgoPrecise, f as formatBytes, g as formatRateLimitWindow, h as formatDuration, i as meterSeverity, l as usageWindow, m as formatCountdown, n as currentModel, o as modelLabel, p as formatCost, r as meterColorClass, s as statusPresentation, t as contextSeverity, u as windowLabel, v as formatRelativeTime, x as rateLimitWindowSeconds, y as formatTokens } from "./status-Dm9INVTt.mjs";
+export { contextSeverity, currentModel, formatAgoPrecise, formatBytes, formatCost, formatCountdown, formatDuration, formatRateLimitWindow, formatRateLimitWindowLong, formatRelativeTime, formatTokens, friendlyModel, meterColorClass, meterSeverity, meterTintClass, modelLabel, rateLimitWindowSeconds, statusPresentation, tightestWindow, toolInputPreview, usageWindow, windowLabel };