@calliopelabs/ui 0.16.0 → 0.18.0

package/README.md

@@ -534,7 +534,9 @@ Headers on the provider run in the browser: never put a secret there. Keys, the
 
 ## Workbench
 
-`@calliopelabs/ui/workbench` is an opt-in entry for IDE-style tools (File Manager, Loadr, Chat Studio): an app without a file browser never loads it. It needs nothing beyond the package's own dependencies, and its styles come from the preset. Like the rest, it is host-driven: data comes in as props, every change goes out through a callback, and nothing fetches.
+`@calliopelabs/ui/workbench` is an opt-in entry for IDE-style tools (File Manager, Loadr, Chat Studio): an app without one never loads it. Its styles come from the preset. The code editors and the chart need optional peers the host installs and loads itself (`monaco-editor` through `configureMonaco`, `recharts` through `DataChart`'s `loadCharts`), so the entry builds without either. Like the rest, it is host-driven: data comes in as props, every change goes out through a callback, and nothing fetches.
+
+**New in 0.17.0** (calliopeai/calliope-ux#12, extracted from Loadr and serving Chat Studio's fork too): the IDE shell (`WorkbenchShell`, `MenuBar`, `ActivityBar`, `EditorTabs` and `EditorGroup`, `PaneGroup`, `BottomPanel`, `StatusBar`, `CommandPalette`, `useShortcuts`; #79), the `Menubar` primitive in the main entry (#79), `DataGrid` with editing and pending changes, `DataProfile` and `DataChart` (#81), and `CodeEditor` and `SqlEditor` on Monaco (#80). New dependency: `@tanstack/react-virtual`. New optional peers: `monaco-editor`, `recharts`. Nothing existing changed. The file browser, upload dropzone and preview shipped in 0.16.0.
 
 - **`FileBrowser`**: breadcrumb (its crumbs are drop targets), list and grid views, sorting (folders first, natural order), selection, a context menu, drag-and-drop moves (Alt copies) and an optional folder tree. View, sort and selection work uncontrolled or controlled. Copy for an empty folder, a toolbar slot, and thumbnails for grid tiles.
 - **`FileTree`**: a lazy tree on the WAI-ARIA tree pattern (arrows open and move, Home, End, typeahead). The host answers `onLoad(path)` with a `FileBranch` (`loading`, `error`, `ready`) per directory in `branches`; a failed branch retries through `onRetry`.
@@ -569,6 +571,97 @@ import {
 
 Their copy is in the `workbench` message group. The catalog's **Workbench** section shows every state, light and dark, narrow, and large trees.
 
+### The IDE shell
+
+Extracted from Loadr's layout (shared with Chat Studio). Every region is host content and every toggle a prop; the shell holds no state but the pane sizes.
+
+- **`WorkbenchShell`**: menu bar, activity bar, a resizable side bar, the editors over a bottom panel, an optional right-hand panel, and the status bar. Hidden regions stay mounted, so an open page keeps its state; a maximized panel collapses the editors without unmounting them. `storageKey` remembers pane sizes per person.
+- **`MenuBar`**: menus from data (`WorkbenchMenu`: items with shortcuts, checkbox items, labels, separators) on the `Menubar` primitive (WAI-ARIA menubar). `start` and `end` slots for the product mark and name.
+- **`ActivityBar`**: the rail of views as a vertical toolbar of toggle buttons (one tab stop, arrows move), with labels, badges, footer items, and items that toggle a panel instead of choosing a view. Choosing the open view passes `null`, so the host closes the side bar.
+- **`EditorTabs`** and **`EditorGroup`**: the WAI-ARIA tabs pattern with an unsaved marker (spoken), close by button, middle click or Delete, reorder by drag or Alt+Shift+Left/Right, a menu of every tab once the strip overflows, a per-tab context menu, trailing actions and a focused-group marker for split layouts. `EditorGroup` adds the labelled tab panel.
+- **`PaneGroup`** and **`Pane`**: resizable panes on the WAI-ARIA window-splitter pattern (focusable `separator`s; arrows step, Home and End go to the bounds; pointer drag). Bounds in percent or pixels, collapsed panes stay mounted, sizes persist through `storageKey` (the library's local store).
+- **`BottomPanel`**: views as tabs with counts, maximize, restore and close.
+- **`StatusBar`** and **`StatusBarItem`**: a labelled region with start and end slots; `tone` paints it with a status colour (a production connection in `error`).
+- **`CommandPalette`**: a modal WAI-ARIA combobox over a grouped listbox with fuzzy ranking (`fuzzyScore`, `rankItems`), recent entries, key caps, a loading state, controlled query for prefix modes ("@" for objects), and `onItemKeyDown` for host keys on the highlighted entry. Focus returns where it was.
+- **`useShortcuts`**, **`KeyboardShortcutsDialog`**, **`ShortcutKeys`**: a page-wide registry with one listener; chords are strings (`"Mod+K"`: Command on a Mac, Control elsewhere); bare keys stay out of text fields; the last mounted binding wins; the dialog lists whatever is registered. `parseShortcut`, `matchesShortcut`, `formatShortcut` are pure.
+
+```tsx
+useShortcuts([
+  { id: "palette", keys: "Mod+K", label: "Command palette", run: () => setPalette(true) },
+  { id: "sidebar", keys: "Mod+B", label: "Toggle side bar", run: toggleSidebar },
+]);
+
+<WorkbenchShell
+  storageKey="loadr"
+  menuBar={<MenuBar menus={menus} end="Loadr" />}
+  activityBar={<ActivityBar items={views} active={view} onActiveChange={setView} />}
+  sidebar={<Explorer />}
+  sidebarOpen={view !== null}
+  bottomPanel={<BottomPanel views={panels} maximized={max} onMaximizedChange={setMax} />}
+  bottomPanelOpen={panelOpen}
+  bottomPanelMaximized={max}
+  statusBar={<StatusBar tone={envTone} start={connection} end={version} />}
+  overlays={
+    <CommandPalette open={palette} onOpenChange={setPalette} items={commands} onSelect={run} />
+  }
+>
+  <EditorGroup tabs={tabs} activeId={active} onSelect={setActive} onClose={close} onReorder={move}>
+    <ActivePage />
+  </EditorGroup>
+</WorkbenchShell>;
+```
+
+### Code and SQL editors
+
+`CodeEditor` wraps Monaco once; `SqlEditor` adds schema-aware completion. Monaco is an optional peer dependency (`monaco-editor` `>=0.52 <1`) that the package never imports: the host hands over its own import, so its bundler resolves Monaco, puts it in its own chunk and fetches it the first time an editor mounts. An app without an editor never loads it; without a loader (or if it fails) a plain text area stands in.
+
+```ts
+// Once, at startup (Vite shown; the worker setup is the bundler's part).
+import { configureMonaco } from "@calliopelabs/ui/workbench";
+
+configureMonaco({
+  load: async () => {
+    const [monaco, worker] = await Promise.all([
+      import("monaco-editor"),
+      import("monaco-editor/editor/editor.worker?worker"),
+    ]);
+    self.MonacoEnvironment = { getWorker: () => new worker.default() };
+    return monaco;
+  },
+});
+```
+
+- **`CodeEditor`**: `value`, `onChange`, `language`, `label` (its accessible name), `readOnly`, `onRun` (Ctrl or Command with Enter, the selection or the whole buffer), `options` (Monaco's own), `onMount(editor, monaco)` with an optional cleanup, and a per-editor `loader`. Host value changes are applied as edits, so undo still works. The theme comes from the library's tokens under the editor (ground, text, accent, border; syntax from the chart series) and follows a change of ground or mode; Monaco themes are page-wide.
+- **`SqlEditor`**: a `schema` (`tables` with optional `columns`, `schemas`, `databases`, `otherDatabases`) drives completion: tables after FROM and JOIN, columns after SELECT and WHERE (qualified when two tables share a name), `alias.` resolved against the statement under the cursor, `schema.` and `db.` qualifiers, keywords, functions and window-function snippets. Completion never waits: what the schema lacks (a table's columns, another database's tables) comes out once through `onSchemaRequest`, and the host passes a new `schema`.
+- Pure helpers for anything else: `sqlCompletions(text, offset, schema)`, `sqlCursorContext`, `statementAt`, `extractTableRefs`, `resolveSqlDot`, `isDdlStatement` (a host's cue to refresh its schema), `editorTheme`, `readEditorPalette`.
+
+### Data grid, profile and chart
+
+Extracted from Loadr's result grid and data editor (Chat Studio runs a fork of the same files). Host-driven: rows in, changes and copies out through callbacks, nothing fetches, no toasts.
+
+- **`DataGrid`**: `columns` (names, or `GridColumn` with `type` in any driver spelling, `primaryKey`, `foreignKey`, `nullable`; undeclared types are sniffed) and `rows`. Rows and columns are virtualized (`@tanstack/react-virtual`), so 50,000 rows by 30 columns is a few hundred nodes. The WAI-ARIA grid pattern: arrows, Home and End, Ctrl+Home and Ctrl+End, Page Up and Down, Shift extends, Ctrl or Command with A selects all, with C copies TSV (Shift adds headers); Enter opens the cell, Shift+Enter the row. Cell, row and column selection (Shift and Ctrl or Command with the mouse), sort with NULLs last, a filter, hidden columns, resize by pointer or keyboard (a focusable `separator`; widths persist under `storageKey` in the library's local store), selection statistics, copy as TSV, CSV, JSON, INSERT or Markdown, and export as CSV, TSV, JSON, JSON Lines, SQL INSERT or Markdown. `totalRows` or `hasMore` shows the truncation banner; `loading`, `error` and `onRetry` the states. `onCopy` hears every copy; `onExport` takes over export (each request carries the library's `file` for its formats, `null` for the host's own `exportFormats`, such as a workbook), and `downloadExport(file)` saves one.
+- **Editing**: `editable` turns on in-place editing (Enter, F2, double click or typing; Enter and Tab keep and move, Escape cancels), add, duplicate and delete rows, and a `PendingChangesBar` with Commit and Discard. Existing rows change only when a column is a `primaryKey`; without one, rows can be added. Commit calls `onCommit(changeSet)`: inserts with the filled cells, updates keyed on the primary key with the changed cells and their old values (for an optimistic-concurrency check), deletes by key. Resolve and the grid clears the changes; reject with `{ message, key }` and they stay, with the failed row marked. `pending` and `onPendingChange` control the changes from outside. The model is pure (`editCell`, `addRow`, `deleteRows`, `revertRow`, `pendingCounts`, `toChangeSet`), and `changeSetToSql(changeSet, { table })` writes the statements for a host that runs SQL.
+- **`DataProfile`**: a card per column (completeness, distinct, range, mean and median, top values), sampling at most `rowCap` rows (10,000) and saying so.
+- **`DataChart`**: bar, line, area, scatter or pie of an X column and Y columns, in the theme's chart series. Recharts is an optional peer (`recharts` `^3`) that the package never imports: the host passes `loadCharts={() => import("recharts")}`, so an app without charts builds without it and one with them loads it when a chart opens. Plots at most `rowCap` rows (500).
+- Also exported: `CellDetailDialog`, `RowDetailDrawer`, `TruncationBanner`, `GridCellValue`, `ColumnTypeIcon`, and the pure helpers (`viewRowIndexes`, `compareCells`, `normalizeColumnType`, `buildColumnMeta`, the selection model, `formatMatrix`, `exportMatrix`, `toTSV`, `toCSV`, `toInsert`, `toMarkdown`, `computeStats`, `profileColumn`).
+
+```tsx
+<DataGrid
+  label="public.people"
+  columns={[{ name: "id", type: "int8", primaryKey: true }, "name", "email"]}
+  rows={result.rows}
+  totalRows={result.rowCount}
+  storageKey="table:public.people"
+  tableName="public.people"
+  editable={editMode}
+  onCommit={(changes) => api.apply({ table: "public.people", ...changes })}
+  onExport={(request) =>
+    request.file ? downloadExport(request.file) : writeWorkbook(request.matrix)
+  }
+  exportFormats={[{ id: "xlsx", label: "Excel workbook" }]}
+/>
+```
+
 ## Appearance
 
 The person sets four axes, per product: the **ground** (black, charcoal, graphite, emerald, navy, paper, mist; it decides light or dark), the **accent** (the product's own, a family accent, or any colour that stands 3:1 off the ground), the **density** (`compact` hairline rows or boxed `cards`) and the **corners** (0, 2, 4 or 10 px). `AppearancePicker` is the settings UI for all four.

package/dist/index.d.ts

@@ -63,6 +63,7 @@ export { Popover, PopoverAnchor, PopoverContent, PopoverHeader, PopoverTrigger,
 export { Tabs, TabsContent, TabsList, TabsTrigger } from "./primitives/Tabs.js";
 export { Skeleton } from "./primitives/Skeleton.js";
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./primitives/Tooltip.js";
+export { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarTrigger, } from "./primitives/Menubar.js";
 export { ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuTrigger, } from "./primitives/ContextMenu.js";
 export { ScrollArea, type ScrollAreaProps } from "./primitives/ScrollArea.js";
 export { Badge, badgeVariants, type BadgeProps } from "./primitives/Badge.js";
@@ -70,6 +71,8 @@ export { ToastProvider, useToast, type ToastApi, type ToastOptions, type ToastPr
 export type { WorkflowAction, WorkflowAvailability, WorkflowModule, WorkflowPermissions, WorkflowScope, WorkflowStatus, WorkflowSummary, } from "./workflow/model.js";
 export { WorkflowCard, WorkflowCardSkeleton, type WorkflowCardActions, type WorkflowCardProps, } from "./workflow/WorkflowCard.js";
 export { WorkflowQuestionCard, type WorkflowQuestionCardProps, } from "./workflow/WorkflowQuestionCard.js";
+export { WorkflowRuntimeControls, type WorkflowRuntimeControlsProps, } from "./workflow/WorkflowRuntimeControls.js";
+export type { WorkflowRuntimeState, WorkflowRuntimeBinding, WorkflowPauseReceipt, WorkflowRuntimeIntent, } from "./workflow/runtime-controls.js";
 export type { WorkflowQuestion, WorkflowQuestionField, WorkflowQuestionState, WorkflowQuestionAnswers, WorkflowQuestionSubmission, } from "./workflow/question.js";
 export { ANY_FILTER, DEFAULT_WORKFLOW_FILTERS, filterWorkflows, isFiltered, type WorkflowGalleryFilters, } from "./workflow/gallery.js";
 export { WorkflowGallery, type WorkflowGalleryProps, type WorkflowGalleryView, } from "./workflow/WorkflowGallery.js";

package/dist/index.js

@@ -74,12 +74,14 @@ export { Popover, PopoverAnchor, PopoverContent, PopoverHeader, PopoverTrigger,
 export { Tabs, TabsContent, TabsList, TabsTrigger } from "./primitives/Tabs.js";
 export { Skeleton } from "./primitives/Skeleton.js";
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./primitives/Tooltip.js";
+export { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarTrigger, } from "./primitives/Menubar.js";
 export { ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuTrigger, } from "./primitives/ContextMenu.js";
 export { ScrollArea } from "./primitives/ScrollArea.js";
 export { Badge, badgeVariants } from "./primitives/Badge.js";
 export { ToastProvider, useToast, } from "./primitives/Toast.js";
 export { WorkflowCard, WorkflowCardSkeleton, } from "./workflow/WorkflowCard.js";
 export { WorkflowQuestionCard, } from "./workflow/WorkflowQuestionCard.js";
+export { WorkflowRuntimeControls, } from "./workflow/WorkflowRuntimeControls.js";
 export { ANY_FILTER, DEFAULT_WORKFLOW_FILTERS, filterWorkflows, isFiltered, } from "./workflow/gallery.js";
 export { WorkflowGallery, } from "./workflow/WorkflowGallery.js";
 export { ARTIFACT_TONE, GATE_TONE, RUN_STAGE_TONE, VERDICT_TONE, } from "./workflow/run.js";

package/dist/primitives/Menubar.d.ts

@@ -0,0 +1,21 @@
+import { Menubar as MenubarPrimitive } from "radix-ui";
+import type * as React from "react";
+/**
+ * A desktop-style menu bar (File, Edit, View) with the ARIA menubar pattern:
+ * one tab stop, Left and Right move between menus, Down or Enter opens one,
+ * and an open menu follows the pointer and the arrows to its neighbours.
+ * Tools with an IDE layout use it through the workbench's `MenuBar`.
+ */
+export declare function Menubar({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Root>): React.JSX.Element;
+export declare function MenubarMenu(props: React.ComponentProps<typeof MenubarPrimitive.Menu>): React.JSX.Element;
+export declare function MenubarTrigger({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Trigger>): React.JSX.Element;
+export declare function MenubarContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof MenubarPrimitive.Content>): React.JSX.Element;
+export declare function MenubarGroup(props: React.ComponentProps<typeof MenubarPrimitive.Group>): React.JSX.Element;
+export declare function MenubarItem({ className, variant, ...props }: React.ComponentProps<typeof MenubarPrimitive.Item> & {
+    variant?: "default" | "destructive";
+}): React.JSX.Element;
+export declare function MenubarCheckboxItem({ className, children, ...props }: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>): React.JSX.Element;
+export declare function MenubarLabel({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Label>): React.JSX.Element;
+export declare function MenubarSeparator({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Separator>): React.JSX.Element;
+/** The item's keyboard shortcut, right-aligned. Decorative: the shortcut itself is the app's. */
+export declare function MenubarShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;

package/dist/primitives/Menubar.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIcon } from "lucide-react";
+import { Menubar as MenubarPrimitive } from "radix-ui";
+import { cn } from "../lib/cn.js";
+/**
+ * A desktop-style menu bar (File, Edit, View) with the ARIA menubar pattern:
+ * one tab stop, Left and Right move between menus, Down or Enter opens one,
+ * and an open menu follows the pointer and the arrows to its neighbours.
+ * Tools with an IDE layout use it through the workbench's `MenuBar`.
+ */
+export function Menubar({ className, ...props }) {
+    return (_jsx(MenubarPrimitive.Root, { "data-slot": "menubar", className: cn("flex items-center gap-0.5", className), ...props }));
+}
+export function MenubarMenu(props) {
+    return _jsx(MenubarPrimitive.Menu, { "data-slot": "menubar-menu", ...props });
+}
+export function MenubarTrigger({ className, ...props }) {
+    return (_jsx(MenubarPrimitive.Trigger, { "data-slot": "menubar-trigger", className: cn("flex items-center rounded-lg px-2 py-0.5 text-xs text-muted-foreground outline-hidden select-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:bg-accent data-[state=open]:text-accent-foreground", className), ...props }));
+}
+export function MenubarContent({ className, align = "start", sideOffset = 4, ...props }) {
+    return (_jsx(MenubarPrimitive.Portal, { children: _jsx(MenubarPrimitive.Content, { "data-slot": "menubar-content", align: align, sideOffset: sideOffset, className: cn("z-50 max-h-(--radix-menubar-content-available-height) min-w-48 origin-(--radix-menubar-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 data-[state=open]:animate-cui-fade-in", className), ...props }) }));
+}
+export function MenubarGroup(props) {
+    return _jsx(MenubarPrimitive.Group, { "data-slot": "menubar-group", ...props });
+}
+const itemClass = "relative flex cursor-default items-center gap-1.5 rounded-lg px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+export function MenubarItem({ className, variant = "default", ...props }) {
+    return (_jsx(MenubarPrimitive.Item, { "data-slot": "menubar-item", "data-variant": variant, className: cn(itemClass, "data-[variant=destructive]:text-danger-fg data-[variant=destructive]:focus:bg-danger/10", className), ...props }));
+}
+export function MenubarCheckboxItem({ className, children, ...props }) {
+    return (_jsxs(MenubarPrimitive.CheckboxItem, { "data-slot": "menubar-checkbox-item", className: cn(itemClass, "pr-8", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2 flex items-center justify-center", children: _jsx(MenubarPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { "aria-hidden": true }) }) }), children] }));
+}
+export function MenubarLabel({ className, ...props }) {
+    return (_jsx(MenubarPrimitive.Label, { "data-slot": "menubar-label", className: cn("px-1.5 py-1 text-xs font-medium text-muted-foreground", className), ...props }));
+}
+export function MenubarSeparator({ className, ...props }) {
+    return (_jsx(MenubarPrimitive.Separator, { "data-slot": "menubar-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
+}
+/** The item's keyboard shortcut, right-aligned. Decorative: the shortcut itself is the app's. */
+export function MenubarShortcut({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "menubar-shortcut", "aria-hidden": true, className: cn("ml-auto pl-4 font-mono text-xs text-muted-foreground", className), ...props }));
+}

package/dist/provider/messages.d.ts

@@ -1,7 +1,10 @@
 import type { ProductTheme } from "../appearance/product.js";
 import type { ChatRole, ChatRunStatus, ChatToolCallStatus } from "../chat/model.js";
+import type { CopyFormat as GridCopyFormat, ExportFormat as GridExportFormat } from "../workbench/grid-format.js";
+import type { ColumnType as GridColumnType } from "../workbench/grid-model.js";
 import type { UploadState } from "../workbench/model.js";
 import type { WorkflowQuestionState } from "../workflow/question.js";
+import type { WorkflowRuntimeState } from "../workflow/runtime-controls.js";
 import type { WorkflowAction, WorkflowAvailability, WorkflowScope, WorkflowStatus } from "../workflow/model.js";
 import type { ArtifactStatus, GateStatus, ReviewDecision, ReviewVerdict, RunStageStatus } from "../workflow/run.js";
 import type { WorkflowConnectReason, WorkflowFlowNameProblem, WorkflowNode, WorkflowNodeKind, WorkflowSelector } from "../workflow/definition.js";
@@ -24,6 +27,21 @@ import type { WorkflowReadError } from "../workflow/portable.js";
  * it (plurals, numbers, word order).
  */
 export interface Messages {
+    workflowRuntime: {
+        title: string;
+        state: (state: WorkflowRuntimeState) => string;
+        description: (state: WorkflowRuntimeState) => string;
+        loading: string;
+        empty: string;
+        readOnly: string;
+        pause: string;
+        resume: string;
+        refresh: string;
+        steering: string;
+        steeringHint: string;
+        invalidSteering: string;
+        send: string;
+    };
     workflowQuestion: {
         title: string;
         worker: (worker: string) => string;
@@ -158,6 +176,136 @@ export interface Messages {
         /** A CSV column with no header. */
         column: (index: number) => string;
         noRows: string;
+        /** The menu bar's name. */
+        menuBar: string;
+        /** The activity bar's name. */
+        activityBar: string;
+        /** The editor tab strip's name. */
+        openEditors: string;
+        /** Spoken after a tab's title when it has unsaved changes. */
+        unsaved: string;
+        closeTab: (title: string) => string;
+        /** The overflow menu that lists every open tab. */
+        allTabs: (count: number) => string;
+        /** A resize handle's name: "Resize Explorer". */
+        resize: (pane: string) => string;
+        maximizePanel: string;
+        restorePanel: string;
+        closePanel: string;
+        /** The status bar's landmark name. */
+        statusBar: string;
+        commandPalette: string;
+        searchCommands: string;
+        noCommands: string;
+        commandsLoading: string;
+        /** The palette's group for entries the person ran lately. */
+        recent: string;
+        keyboardShortcuts: string;
+        keyboardShortcutsDescription: string;
+        /** Spoken between the keys of a chord: "Control plus K". */
+        keyJoin: string;
+        /** The shell's panes, for their resize handles. */
+        sideBar: string;
+        editor: string;
+        panel: string;
+        secondarySideBar: string;
+        /** The grid's name when the host gives none. */
+        gridLabel: string;
+        /** "1,204 rows", or "12 of 1,204 rows" while a filter is on. */
+        gridRows: (shown: number, total: number) => string;
+        gridColumns: (count: number) => string;
+        gridFilter: string;
+        gridClearFilter: string;
+        /** The button that shows hidden columns again. */
+        gridHidden: (count: number) => string;
+        gridSelected: (count: number) => string;
+        gridSelectAll: string;
+        gridExport: string;
+        gridExportScope: (rows: number, columns: number) => string;
+        gridExportFormat: (format: GridExportFormat) => string;
+        gridSortBy: (column: string) => string;
+        gridSortAscending: string;
+        gridSortDescending: string;
+        gridClearSort: string;
+        gridColumnMenu: (column: string) => string;
+        /** Null while no cell of the column is active. */
+        gridFilterByValue: (value: string | null) => string;
+        gridHideColumn: string;
+        gridShowAllColumns: (hidden: number) => string;
+        gridCopyColumnName: string;
+        gridResizeColumn: (column: string) => string;
+        gridType: (type: GridColumnType) => string;
+        gridPrimaryKey: string;
+        gridForeignKey: (references: string | null) => string;
+        gridNullable: string;
+        gridNotNull: string;
+        gridNull: string;
+        gridEmptyText: string;
+        gridBinary: (bytes: number) => string;
+        gridNoRows: string;
+        gridNoMatches: string;
+        gridLoading: string;
+        gridLoadFailed: string;
+        gridCopy: string;
+        gridCopyWithHeaders: string;
+        gridCopyAs: string;
+        gridCopyFormat: (format: GridCopyFormat) => string;
+        gridRowDetail: string;
+        gridCellDetail: string;
+        gridClearSelection: string;
+        /** The statistics bar's name. */
+        gridStatistics: string;
+        gridStat: (stat: "rows" | "nulls" | "distinct" | "min" | "max" | "avg" | "sum") => string;
+        gridNoNumeric: string;
+        /** A result the server capped: total known, or only that more exist. */
+        gridTruncated: (shown: number, total: number | null) => string;
+        gridCharacters: (count: number) => string;
+        gridBytes: (count: number, truncated: boolean) => string;
+        gridDownload: string;
+        gridCopied: string;
+        gridCopyValue: string;
+        gridRowOf: (row: number, total: number) => string;
+        gridPreviousRow: string;
+        gridNextRow: string;
+        gridCopyRow: string;
+        gridAddRow: string;
+        gridDeleteRows: (count: number) => string;
+        gridDuplicateRow: string;
+        gridRevertRow: string;
+        gridEditCell: (column: string) => string;
+        /** Spoken with a changed row's number. */
+        gridRowState: (state: "added" | "modified" | "deleted") => string;
+        /** The pending changes bar's name. */
+        gridPendingChanges: string;
+        gridPendingSummary: (inserts: number, updates: number, deletes: number) => string;
+        gridCommit: string;
+        gridCommitting: string;
+        gridDiscard: string;
+        /** Nothing was written; `row` is the 1-based row the host reported, when it did. */
+        gridCommitFailed: (message: string, row: number | null) => string;
+        gridNoPrimaryKey: string;
+        profileLabel: string;
+        profileSummary: (rows: number, columns: number, nulls: number) => string;
+        profileKind: (kind: "numeric" | "text" | "boolean" | "date" | "null") => string;
+        profileComplete: (share: number) => string;
+        profileMean: string;
+        profileMedian: string;
+        profileTopValues: string;
+        profileNoData: string;
+        /** The client capped what it profiled or charted: "Profiling the first 10,000 of 50,000 rows". */
+        profileCap: (cap: number, fetched: number) => string;
+        chartLabel: string;
+        chartType: string;
+        chartKind: (kind: "bar" | "line" | "area" | "scatter" | "pie") => string;
+        chartX: string;
+        chartY: string;
+        chartPickY: string;
+        chartNoData: string;
+        chartLoading: string;
+        chartLoadFailed: string;
+        chartCap: (cap: number, fetched: number) => string;
+        /** The code editor while Monaco loads. */
+        editorLoading: string;
     };
     toast: {
         /** The notifications region; Radix fills `{hotkey}` with the shortcut that focuses it. */

package/dist/provider/messages.js

@@ -144,6 +144,43 @@ function problemText({ code, values: v }) {
     }
 }
 export const defaultMessages = {
+    workflowRuntime: {
+        title: "Agent controls",
+        state: (state) => ({
+            running: "Agent running",
+            paused: "Agent paused",
+            "pause-requested": "Pause requested",
+            "resume-requested": "Resume requested",
+            "steering-queued": "Steering queued",
+            "steering-applied": "Steering applied",
+            refused: "Control refused",
+            "delivery-unknown": "Delivery unconfirmed",
+            unavailable: "Controls unavailable",
+            finished: "Agent finished",
+        })[state],
+        description: (state) => ({
+            running: "Control this agent while it works on the original goal.",
+            paused: "The agent confirmed its pause. Resume continues the same goal.",
+            "pause-requested": "Waiting for the agent to confirm its pause.",
+            "resume-requested": "Waiting for the agent to confirm it resumed.",
+            "steering-queued": "The agent has not yet confirmed this steering message.",
+            "steering-applied": "The agent applied the steering message to this goal.",
+            refused: "The command was refused. Check the current agent state before continuing.",
+            "delivery-unknown": "Check the original command's status before sending another command.",
+            unavailable: "The current agent controls could not be read.",
+            finished: "This agent is no longer accepting commands.",
+        })[state],
+        loading: "Loading agent controls…",
+        empty: "The original agent is not available.",
+        readOnly: "An operator can control this agent.",
+        pause: "Pause agent",
+        resume: "Resume agent",
+        refresh: "Check agent status",
+        steering: "Steering message",
+        steeringHint: "Up to 4,000 characters. Steering preserves the original goal and limits.",
+        invalidSteering: "Enter a nonempty message of up to 4,000 valid characters.",
+        send: "Send steering",
+    },
     workflowQuestion: {
         title: "Question for this run",
         worker: (worker) => `Worker: ${worker}`,
@@ -286,6 +323,147 @@ export const defaultMessages = {
         partial: "Showing the start of the file",
         column: (index) => `Column ${index}`,
         noRows: "No rows",
+        menuBar: "Menu bar",
+        activityBar: "Activity bar",
+        openEditors: "Open editors",
+        unsaved: "unsaved",
+        closeTab: (title) => `Close ${title}`,
+        allTabs: (count) => `All open tabs (${count.toLocaleString()})`,
+        resize: (pane) => `Resize ${pane}`,
+        maximizePanel: "Maximize panel",
+        restorePanel: "Restore panel",
+        closePanel: "Close panel",
+        statusBar: "Status bar",
+        commandPalette: "Command palette",
+        searchCommands: "Type a command or search",
+        noCommands: "No matching commands",
+        commandsLoading: "Loading",
+        recent: "Recent",
+        keyboardShortcuts: "Keyboard shortcuts",
+        keyboardShortcutsDescription: "Every keyboard shortcut this app responds to",
+        keyJoin: "+",
+        sideBar: "Side bar",
+        editor: "Editor",
+        panel: "Panel",
+        secondarySideBar: "Secondary side bar",
+        gridLabel: "Results",
+        gridRows: (shown, total) => shown === total
+            ? `${total.toLocaleString()} ${total === 1 ? "row" : "rows"}`
+            : `${shown.toLocaleString()} of ${total.toLocaleString()} rows`,
+        gridColumns: (count) => `${count.toLocaleString()} ${count === 1 ? "column" : "columns"}`,
+        gridFilter: "Filter rows",
+        gridClearFilter: "Clear filter",
+        gridHidden: (count) => `${count.toLocaleString()} hidden`,
+        gridSelected: (count) => `${count.toLocaleString()} selected`,
+        gridSelectAll: "Select all cells",
+        gridExport: "Export",
+        gridExportScope: (rows, columns) => `The current view: ${rows.toLocaleString()} ${rows === 1 ? "row" : "rows"}, ${columns.toLocaleString()} ${columns === 1 ? "column" : "columns"}`,
+        gridExportFormat: (format) => ({
+            csv: "CSV",
+            tsv: "TSV",
+            json: "JSON",
+            jsonl: "JSON Lines",
+            sql: "SQL INSERT",
+            markdown: "Markdown",
+        })[format],
+        gridSortBy: (column) => `Sort by ${column}`,
+        gridSortAscending: "Sort ascending",
+        gridSortDescending: "Sort descending",
+        gridClearSort: "Clear sort",
+        gridColumnMenu: (column) => `${column} column menu`,
+        gridFilterByValue: (value) => value === null
+            ? "Filter by value"
+            : `Filter by \u201c${value.length > 20 ? `${value.slice(0, 20)}\u2026` : value}\u201d`,
+        gridHideColumn: "Hide column",
+        gridShowAllColumns: (hidden) => `Show all columns (${hidden.toLocaleString()} hidden)`,
+        gridCopyColumnName: "Copy column name",
+        gridResizeColumn: (column) => `Resize ${column}`,
+        gridType: (type) => type,
+        gridPrimaryKey: "Primary key",
+        gridForeignKey: (references) => (references ? `Foreign key to ${references}` : "Foreign key"),
+        gridNullable: "nullable",
+        gridNotNull: "not null",
+        gridNull: "NULL",
+        gridEmptyText: "empty",
+        gridBinary: (bytes) => `binary, ${bytes.toLocaleString()} bytes`,
+        gridNoRows: "No rows",
+        gridNoMatches: "No rows match the filter",
+        gridLoading: "Loading rows",
+        gridLoadFailed: "Could not load the rows",
+        gridCopy: "Copy",
+        gridCopyWithHeaders: "Copy with headers",
+        gridCopyAs: "Copy as",
+        gridCopyFormat: (format) => ({
+            tsv: "TSV",
+            "tsv-headers": "TSV with headers",
+            csv: "CSV",
+            json: "JSON",
+            insert: "INSERT statements",
+            markdown: "Markdown",
+        })[format],
+        gridRowDetail: "Row detail",
+        gridCellDetail: "Expand cell",
+        gridClearSelection: "Clear selection",
+        gridStatistics: "Selection statistics",
+        gridStat: (stat) => ({
+            rows: "Rows",
+            nulls: "Nulls",
+            distinct: "Distinct",
+            min: "Min",
+            max: "Max",
+            avg: "Avg",
+            sum: "Sum",
+        })[stat],
+        gridNoNumeric: "No numeric values selected",
+        gridTruncated: (shown, total) => total === null
+            ? `Truncated at the ${shown.toLocaleString()}-row limit; more rows match.`
+            : `Showing ${shown.toLocaleString()} of ${total.toLocaleString()} rows, truncated at the ${shown.toLocaleString()}-row limit.`,
+        gridCharacters: (count) => `${count.toLocaleString()} ${count === 1 ? "character" : "characters"}`,
+        gridBytes: (count, truncated) => `${count.toLocaleString()} bytes${truncated ? ", preview truncated" : ""}`,
+        gridDownload: "Download",
+        gridCopied: "Copied",
+        gridCopyValue: "Copy",
+        gridRowOf: (row, total) => `Row ${row.toLocaleString()} of ${total.toLocaleString()}`,
+        gridPreviousRow: "Previous row",
+        gridNextRow: "Next row",
+        gridCopyRow: "Copy row",
+        gridAddRow: "Add row",
+        gridDeleteRows: (count) => count === 1 ? "Delete row" : `Delete ${count.toLocaleString()} rows`,
+        gridDuplicateRow: "Duplicate row",
+        gridRevertRow: "Revert row",
+        gridEditCell: (column) => `Edit ${column}`,
+        gridRowState: (state) => state,
+        gridPendingChanges: "Pending changes",
+        gridPendingSummary: (inserts, updates, deletes) => [
+            `${inserts.toLocaleString()} ${inserts === 1 ? "insert" : "inserts"}`,
+            `${updates.toLocaleString()} ${updates === 1 ? "update" : "updates"}`,
+            `${deletes.toLocaleString()} ${deletes === 1 ? "delete" : "deletes"}`,
+        ].join(", "),
+        gridCommit: "Commit",
+        gridCommitting: "Committing",
+        gridDiscard: "Discard",
+        gridCommitFailed: (message, row) => `${row === null ? "" : `Row ${row.toLocaleString()}: `}${message} Nothing was written.`,
+        gridNoPrimaryKey: "No primary key: rows can be added, not changed or deleted.",
+        profileLabel: "Column profile",
+        profileSummary: (rows, columns, nulls) => `Profile of ${rows.toLocaleString()} ${rows === 1 ? "row" : "rows"}, ${columns.toLocaleString()} ${columns === 1 ? "column" : "columns"}, ${nulls.toLocaleString()} ${nulls === 1 ? "null" : "nulls"}`,
+        profileKind: (kind) => kind,
+        profileComplete: (share) => `${share.toLocaleString(undefined, { style: "percent", maximumFractionDigits: 1 })} complete`,
+        profileMean: "Mean",
+        profileMedian: "Median",
+        profileTopValues: "Top values",
+        profileNoData: "No data to profile",
+        profileCap: (cap, fetched) => `Profiling the first ${cap.toLocaleString()} of ${fetched.toLocaleString()} rows.`,
+        chartLabel: "Chart",
+        chartType: "Chart type",
+        chartKind: (kind) => ({ bar: "Bar", line: "Line", area: "Area", scatter: "Scatter", pie: "Pie" })[kind],
+        chartX: "X axis",
+        chartY: "Y axis",
+        chartPickY: "Choose at least one Y axis column",
+        chartNoData: "No data to chart",
+        chartLoading: "Loading the chart",
+        chartLoadFailed: "Could not load the chart library",
+        chartCap: (cap, fetched) => `Charting the first ${cap.toLocaleString()} of ${fetched.toLocaleString()} rows.`,
+        editorLoading: "Loading the editor",
     },
     toast: {
         region: "Notifications ({hotkey})",

package/dist/shell/RailPanel.js

@@ -27,7 +27,7 @@ export function RailPanel({ label, title, actions, footer, children, collapsed,
 }
 /* A focusable separator is the WAI-ARIA window splitter, an interactive
    widget; jsx-a11y counts every separator as static. */
-/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-noninteractive-tabindex */
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 function ResizeHandle({ label, width, minWidth, maxWidth, onWidthChange, }) {
     const drag = React.useRef(null);
     return (_jsx("div", { role: "separator", "aria-orientation": "vertical", "aria-label": label, "aria-valuenow": width, "aria-valuemin": minWidth, "aria-valuemax": maxWidth, tabIndex: 0, onKeyDown: (event) => {

package/dist/workbench/ActivityBar.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+export interface ActivityItem {
+    id: string;
+    /** The word under the icon ("Explore"). */
+    label: string;
+    /** The full name, spoken and shown on hover ("Database explorer"). Defaults to `label`. */
+    title?: string;
+    icon: React.ReactNode;
+    /** A count or marker on the icon (running tasks). */
+    badge?: React.ReactNode;
+    /** Pressed state for an item that is a toggle (the AI panel) rather than a view. */
+    pressed?: boolean;
+    /** Run instead of selecting the item as the view. */
+    onSelect?: () => void;
+}
+export interface ActivityBarProps {
+    /** The views, top down. */
+    items: readonly ActivityItem[];
+    /** Items pinned to the bottom (tasks, settings). */
+    footer?: readonly ActivityItem[];
+    /** The view on screen, or null when the side panel is closed. */
+    active: string | null;
+    /**
+     * A view was chosen. Choosing the active one again passes null: the
+     * host closes the side panel, as an IDE does.
+     */
+    onActiveChange: (id: string | null) => void;
+    /** Show the word under each icon. Defaults to true. */
+    showLabels?: boolean;
+    className?: string;
+}
+/**
+ * The rail of views down the left of an IDE layout: a vertical toolbar with
+ * one tab stop (Up and Down move, Home and End jump), each item a toggle
+ * button that says whether its view is open.
+ */
+export declare function ActivityBar({ items, footer, active, onActiveChange, showLabels, className, }: ActivityBarProps): React.JSX.Element;