@w6w/ui 0.0.0-stage → 0.1.0

package/dist/app-pages.d.ts

@@ -0,0 +1,111 @@
+import { AppSummary } from './types.ts';
+/** The user-controlled inputs that identify a distinct page fetch. */
+export interface AppsPageQuery {
+    /** Trimmed search text; `""` means no search term. */
+    q: string;
+    /** Server-side category filter (e.g. `"ai"` for the AI tab), or absent. */
+    category?: string;
+}
+/**
+ * Two queries are the same fetch target when both fields match exactly
+ * (empty-string `q` included) — used to short-circuit a reducer action that
+ * would otherwise restart an identical in-flight query.
+ */
+export declare function sameAppsPageQuery(a: AppsPageQuery, b: AppsPageQuery): boolean;
+export type AppsPageStatus = "loading" | "loading-more" | "ready" | "error";
+export interface AppsPageState {
+    query: AppsPageQuery;
+    /**
+     * Bumped every time the query changes (new search/category/tab). A
+     * response tagged with an older generation is stale and MUST be dropped by
+     * the caller before dispatching — {@link isStalePageGeneration} is the
+     * check; the reducer itself also refuses a stale `page-loaded`/`page-failed`
+     * defensively, so a caller that forgets the check still cannot corrupt state.
+     */
+    generation: number;
+    status: AppsPageStatus;
+    /** Every app fetched so far for the CURRENT query, in server order, deduped by id. */
+    apps: AppSummary[];
+    /** Cursor to send on the NEXT "load more"; absent once the server has no more pages. */
+    cursor?: string;
+    hasMore: boolean;
+    error?: string;
+}
+export declare function initialAppsPageState(query: AppsPageQuery, generation?: number): AppsPageState;
+export type AppsPageAction = 
+/** A new search/category/tab was selected — resets `apps`/`cursor` and starts a fresh fetch. */
+{
+    type: "query-changed";
+    query: AppsPageQuery;
+    generation: number;
+}
+/** The user asked for more results on the CURRENT query. No-op unless `status==="ready" && hasMore`. */
+ | {
+    type: "load-more";
+}
+/**
+ * The user pressed Retry after a failure. Only meaningful from `"error"`:
+ * back to `"loading"` when nothing is shown yet, `"loading-more"` when a
+ * list is already on screen (apps and cursor kept, so the retry resends the
+ * SAME cursor). No-op in any other status.
+ */
+ | {
+    type: "retry";
+}
+/**
+ * One page arrived. `requestedCursor` is the cursor that page was fetched
+ * WITH (undefined for a first page) — compared against the server's own
+ * `nextCursor` to catch a server that echoes back the same cursor forever
+ * (a repeated/non-advancing cursor is treated as "no more pages", never
+ * retried, so it can neither loop nor duplicate a request).
+ */
+ | {
+    type: "page-loaded";
+    generation: number;
+    apps: AppSummary[];
+    nextCursor?: string;
+    requestedCursor?: string;
+} | {
+    type: "page-failed";
+    generation: number;
+    error: string;
+};
+/**
+ * Dedupe-append: every app in `incoming` not already present (by `id`) in
+ * `existing`, in `incoming`'s own order, appended after `existing`.
+ * Immutable — always returns a new array, and existing entries in `existing`
+ * are shared references, never mutated, so a caller that kept the old array
+ * around still sees the original values (copy-safety for cache reads).
+ */
+export declare function dedupeAppend(existing: AppSummary[], incoming: AppSummary[]): AppSummary[];
+/**
+ * The paged-picker reducer. Every transition is a pure function of
+ * `(state, action)` — no timers, no fetch; the caller performs the actual
+ * request and feeds the result back in as `page-loaded`/`page-failed`.
+ */
+export declare function appsPageReducer(state: AppsPageState, action: AppsPageAction): AppsPageState;
+/** Whether a response tagged `generation` is stale against `state` — check before dispatching. */
+export declare function isStalePageGeneration(state: AppsPageState, generation: number): boolean;
+/**
+ * Reserved `@w6w/*` pseudo-apps are never a pickable catalog entry (mirrors
+ * `AppPicker`'s existing exclusion) — factored out so the paged path and the
+ * id-batch path apply the exact same rule.
+ */
+export declare function excludeInternalApps(apps: readonly AppSummary[]): AppSummary[];
+/**
+ * The next batch of ids to resolve: up to `batchSize` entries from `ids`,
+ * preserving `ids`' own order, skipping anything already in `requested`.
+ * Returns `[]` once every id has been requested — the caller's signal to stop
+ * showing "load more". Never re-requests an id already in `requested`, even
+ * across repeated calls with a growing `requested` set (idempotent given the
+ * same two inputs).
+ */
+export declare function nextIdBatch(ids: readonly string[], requested: ReadonlySet<string>, batchSize: number): string[];
+/**
+ * Merge a batch of resolved summaries into the accumulated visible list,
+ * preserving `ids`' overall order (not fetch-arrival order) and silently
+ * dropping any id with no entry in `resolved` — the caller's contract for a
+ * missing/404 id (see `useReadyToUse`'s id-batch rewrite): omitted, not shown
+ * as an error.
+ */
+export declare function mergeResolvedApps(ids: readonly string[], resolved: ReadonlyMap<string, AppSummary>): AppSummary[];

package/dist/code.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./CodeBlock-CZu4TFSi.cjs"),o=require("./Copyable-CYZU1o4X.cjs");exports.CodeBlock=e.CodeBlock;exports.Copyable=o.Copyable;
+//# sourceMappingURL=code.cjs.map

package/dist/code.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"code.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/code.d.ts

@@ -0,0 +1,29 @@
+/**
+ * `@w6w/ui/code` — the read-only code block, on its own.
+ *
+ * The third entrypoint, for the same reason `./flow` is the second: importing
+ * the root `index.ts` pulls that module's WHOLE graph, and a bundler resolves
+ * imports before it tree-shakes, so "we only use one component" does not save
+ * the consumer anything. From `index.ts` that graph reaches:
+ *
+ *   - `@w6w/expr` — the expression engine, an npm dependency of this package.
+ *     In this monorepo it is overridden to a `link:../core/packages/expr`
+ *     sibling checkout (`packages/core`, itself a submodule), so a consumer
+ *     that links this package's SOURCE without that checkout fails to build,
+ *     with an unresolved-import error naming a package it never asked for.
+ *     Measured, not theorised: it is what broke the frontend site's first
+ *     build. (An npm install of the published package is unaffected.)
+ *   - `@uiw/react-codemirror` + `@codemirror/*` — the editors, which are far
+ *     heavier than the thing being imported.
+ *
+ * Nothing here reaches either. `CodeBlock` imports `prism-react-renderer` and
+ * `Copyable`; `Copyable` imports React and nothing else.
+ *
+ * The matching stylesheet is `@w6w/ui/code.css` (13 KB) — `@w6w/ui/styles.css`
+ * also contains these rules, so a host already importing the full sheet needs
+ * no second import.
+ */
+export { CodeBlock } from './CodeBlock.tsx';
+export type { CodeBlockProps, CodeLanguage } from './CodeBlock.tsx';
+export { Copyable } from './components/Copyable.tsx';
+export type { CopyableProps } from './components/Copyable.tsx';

package/dist/code.mjs

@@ -0,0 +1,7 @@
+import { C as r } from "./CodeBlock-Dot3Pd7P.js";
+import { C as a } from "./Copyable-1niV9gUa.js";
+export {
+  r as CodeBlock,
+  a as Copyable
+};
+//# sourceMappingURL=code.mjs.map

package/dist/code.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"code.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/components/ApiCallsPanel.d.ts

@@ -0,0 +1,41 @@
+import { ReactNode } from 'react';
+import { ApiCallRecord } from '../types.ts';
+export interface ApiCallsPanelProps {
+    /** The captured outbound calls to render, in the order they were made. */
+    calls: ApiCallRecord[];
+    /**
+     * Open every call's `<details>` on first render. Default `false` — the wire
+     * log is ground truth you reach for, not something to read on every run. A
+     * host that already landed the user on ONE specific call (e.g. a drill-down
+     * that scoped the list to it) passes `true` so the user isn't made to click
+     * twice through their own target.
+     */
+    defaultOpen?: boolean;
+    /**
+     * React `key` for each call. Defaults to method + url + array index, which is
+     * stable within a single run because captured calls carry no id of their own.
+     * A host rendering PERSISTED rows (which do have an id) across a paginated
+     * list must pass its own — index keys collide between pages and React then
+     * reuses the wrong `<details>` open-state.
+     */
+    keyOf?: (call: ApiCallRecord, index: number) => string;
+    /**
+     * Section header. Defaults to `API call(s) (N)`. Pass `false` to suppress it
+     * entirely when the host already owns the heading — same idiom as
+     * `ActionTestForm`'s `embedded` prop, which suppresses its own pop-out chrome
+     * because the host provides it. Any other node replaces the default text.
+     */
+    title?: ReactNode | false;
+}
+/**
+ * The wire log for a run: each outbound HTTP call the action made, with the
+ * request we sent and the response we got back. Collapsed by default — it is the
+ * ground truth you open when the result looks wrong (e.g. a template variable
+ * that came through unrendered), not something to read on every run.
+ *
+ * Purely presentational: it renders exactly what it is given, with no fetching,
+ * no context, and no derivation of state from the calls. Credential redaction
+ * happens server-side at capture time (request AND response headers); nothing
+ * here re-inspects or re-redacts them.
+ */
+export declare function ApiCallsPanel({ calls, defaultOpen, keyOf, title }: ApiCallsPanelProps): import("react").JSX.Element | null;

package/dist/components/AppIcon.d.ts

@@ -0,0 +1,25 @@
+import { ThemeMode } from '../types.ts';
+interface Props {
+    /** Data URI or absolute URL for the light-mode icon. Falsy → render an initials tile. */
+    src?: string;
+    /** Optional dark-mode variant; used when `theme === "dark"`. */
+    srcDark?: string;
+    /** Background color when falling back to the initials tile. */
+    brandColor?: string;
+    /** Display name used to produce initials when there's no image. */
+    name?: string;
+    /** Square px size. Defaults to 32. */
+    size?: number;
+    /**
+     * Explicit theme. If omitted, reads `data-theme` from `<html>` and falls
+     * back to `prefers-color-scheme` — matches how most theme systems work.
+     */
+    theme?: ThemeMode;
+}
+/**
+ * Renders an app's icon. Prefers the inlined SVG served by the w6w server;
+ * falls back to a small initials tile when no icon is provided or when both
+ * light and dark variants are missing.
+ */
+export declare function AppIcon({ src, srcDark, brandColor, name, size, theme }: Props): import("react").JSX.Element;
+export {};

package/dist/components/AuthFieldsForm.d.ts

@@ -0,0 +1,22 @@
+import { KeyboardEventHandler } from 'react';
+import { AuthField } from '../types.ts';
+interface Props {
+    fields: AuthField[];
+    values: Record<string, unknown>;
+    onChange: (values: Record<string, unknown>) => void;
+    /**
+     * Spread onto every field's `<input>` — from the caller's own
+     * `useEnterSubmit(submit, { enabled })`, so Enter in a credential field
+     * submits the same way the form's primary button does. Optional so this
+     * component still works with no submit-on-Enter wiring at all.
+     */
+    enterSubmitProps?: {
+        onKeyDown: KeyboardEventHandler<HTMLElement>;
+    };
+}
+/**
+ * Renders the form for an Auth method's `fields` declaration. Field shape
+ * comes from the app's manifest so no app-specific knowledge is needed here.
+ */
+export declare function AuthFieldsForm({ fields, values, onChange, enterSubmitProps }: Props): import("react").JSX.Element;
+export {};

package/dist/components/Combobox.d.ts

@@ -0,0 +1,24 @@
+export interface ComboboxOption {
+    value: string;
+    label: string;
+}
+export interface ComboboxProps {
+    options: ComboboxOption[];
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    "aria-label"?: string;
+    /** `auto` picks a native `<select>` for short lists, a combobox for long ones. */
+    mode?: "select" | "combobox" | "auto";
+    /** true (default): typing only filters; value changes by picking. false: free text is a value. */
+    forceSelection?: boolean;
+    /** Estimated option height in px, used by `auto` mode. Default 32. */
+    optionHeight?: number;
+    className?: string;
+}
+/** Combobox is chosen when the list would take more than 60% of the viewport. */
+export declare function shouldUseCombobox(count: number, optionHeight: number, viewportHeight: number): boolean;
+/** Case-insensitive substring match on label and value. */
+export declare function filterOptions(options: ComboboxOption[], query: string): ComboboxOption[];
+export declare function Combobox({ options, value, onChange, placeholder, disabled, "aria-label": ariaLabel, mode, forceSelection, optionHeight, className, }: ComboboxProps): import("react").JSX.Element;

package/dist/components/ConfirmModal.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+export interface ConfirmModalProps {
+    title: string;
+    message: string;
+    /** Fired when the user confirms. The caller clears its pending state via onClose. */
+    onConfirm: () => void;
+    /** Fired on Cancel, Esc, or outside-click — dismisses without confirming. */
+    onClose: () => void;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /** Style the confirm button as destructive (default true — this dialog gates dangerous actions). */
+    destructive?: boolean;
+    /** Extra consequence copy under the message (e.g. a warning line) that a string cannot carry. */
+    children?: ReactNode;
+}
+/**
+ * A reusable confirmation dialog built on `@w6w/ui`'s <Modal>, so it inherits the
+ * same backdrop, Esc-dismiss and outside-click close as every other dialog here.
+ * Replaces the browser's native confirmation prompt: Confirm fires `onConfirm`;
+ * Cancel/Esc/outside-click fires `onClose` only (no confirmation).
+ *
+ * Prop API mirrors `packages/studio/src/components/ConfirmModal.tsx` and
+ * `packages/admin/src/components/ConfirmModal.tsx` so all three consoles share one
+ * vocabulary. Only the class names differ — this one is `w6w-*` namespaced.
+ *
+ * It owns its own <Modal>, so never render it *inside* another modal's body: ui's
+ * Modal is a native <dialog>, so nesting one works mechanically and fails no gate —
+ * it just looks wrong. Render it as a **sibling** of the other modal instead.
+ *
+ * Confirmations are `{pending}` state + a rendered sibling modal, never a blocking
+ * call: a caller reachable from a keydown handler cannot swap in a boolean.
+ */
+export declare function ConfirmModal({ title, message, onConfirm, onClose, confirmLabel, cancelLabel, destructive, children, }: ConfirmModalProps): import("react").JSX.Element;

package/dist/components/Copyable.d.ts

@@ -0,0 +1,51 @@
+import { ReactNode } from 'react';
+/** The copy glyph, now from the shared set (`icons.tsx`'s `copy`) rather than
+ *  colocated: the set exists precisely so this glyph (drawn inline at 21+ sites
+ *  elsewhere, e.g. `CallFromCodeButton.tsx:44-63`) has one definition. Still
+ *  exported, and still 14px, because `JsonEditor` and `YamlEditor` reuse it
+ *  rather than redraw it; `Icon`'s `currentColor` paint is what keeps
+ *  `.is-copied`'s colour applying with no extra prop. */
+export declare function CopyGlyph(): import("react").JSX.Element;
+/** The copied-state checkmark, same deal (`icons.tsx`'s `check`). */
+export declare function CheckGlyph(): import("react").JSX.Element;
+export interface CopyableProps {
+    /** Exact text written to the clipboard. */
+    value: string;
+    /**
+     * How long the checkmark stays before reverting to the copy glyph, in ms.
+     *
+     * Defaults to the 1500 ms every other copy affordance in the tree already
+     * uses — a number worth keeping unless a caller has a reason, because the
+     * revert delay is the only feedback that the copy happened at all and an
+     * inconsistent one reads as a different control.
+     *
+     * `0` is not a way to disable the revert: the timer still fires, it just
+     * fires on the next tick, so the checkmark is effectively never seen.
+     */
+    copiedMs?: number;
+    /** Read-only display: a click anywhere in the box copies. Default false ⇒ the icon only. */
+    readOnly?: boolean;
+    /** Accessible name of the copy button. CONSTANT across states. Default "Copy". */
+    label?: string;
+    className?: string;
+    /** The control that displays `value`: an <input>, <textarea>, or <pre>/<CodeBlock>. */
+    children: ReactNode;
+}
+/**
+ * Decorates a value-displaying control with an in-box copy affordance — a
+ * button at the trailing top/centre that writes `value` to the clipboard, and
+ * (when `readOnly`) a click anywhere in the box that does the same.
+ *
+ * This is the FIRST factored clipboard helper in `@w6w/ui`: every existing
+ * copy-to-clipboard call in the tree today (studio's five pages,
+ * `CallFromCodeButton`, admin's own `CopyButton`) is an independently authored
+ * inline clipboard write — the sole call in this package's `src` now lives in
+ * `./use-copy.ts`'s `useCopyToClipboard`, which this component and
+ * `JsonEditor` both consume.
+ *
+ * A decorating component, not a new `TextField`/`TextArea` primitive
+ * (HITL-2): the copy behaviour, the glyphs, the box geometry and the copied
+ * visual all live in this one place, so a future `TextField` can compose it
+ * rather than re-implement it.
+ */
+export declare function Copyable(props: CopyableProps): import("react").JSX.Element;

package/dist/components/CopyableText.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Truncate `value` on a character budget, keeping `chars` VALUE characters and
+ * adding {@link MARKER} on top (the marker is extra, not counted against
+ * `chars`) — mirrors `page-title.ts`'s `clamp()` in STYLE (a single budget,
+ * slice + marker, pure) but NOT its arithmetic: `clamp` slices at
+ * `MAX - 1` so its marker counts inside the budget, which is the wrong shape
+ * here (see `CopyableText.test.ts`'s fixture table).
+ *
+ * `chars` omitted, less than 1, or covering the whole value: returned as-is,
+ * no marker.
+ */
+export declare function cropText(value: string, chars?: number, crop?: "start" | "end" | "middle"): string;
+export interface CopyableTextProps {
+    /** The full string. Always what gets written to the clipboard, regardless
+     *  of how much of it the cropped display shows. */
+    value: string;
+    /** How many VALUE characters to show. Omitted, `< 1`, or `>= value.length`
+     *  ⇒ shown in full. */
+    chars?: number;
+    /** Where the marker goes. Default `"end"`. */
+    crop?: "start" | "end" | "middle";
+    /** Accessible name of the copy button. Default "Copy" (per `Copyable`). */
+    label?: string;
+    className?: string;
+    /** Forwarded to `Copyable`. See its own doc for the revert-delay caveat. */
+    copiedMs?: number;
+}
+/**
+ * A chrome-less, croppable copy-to-clipboard text — for a value too long to
+ * show in full inline (an id, a token, a URL fragment) that still needs to be
+ * copyable exactly.
+ *
+ * Composes `Copyable` rather than widening it (`Copyable`'s box chrome has 9
+ * existing call sites depending on it) — `readOnly` + the
+ * `.w6w-copyable--bare` modifier (`_copyable.scss`) strip the box, and the
+ * FULL `value` is what `Copyable` receives, so a click always copies the
+ * whole string even when the display is cropped. No `navigator.clipboard`
+ * call lives in this file — that stays `Copyable`'s alone.
+ */
+export declare function CopyableText(props: CopyableTextProps): import("react").JSX.Element;

package/dist/components/DeleteButton.d.ts

@@ -0,0 +1,16 @@
+export interface DeleteButtonProps {
+    label: string;
+    onClick: () => void;
+    disabled?: boolean;
+    className?: string;
+    "data-testid"?: string;
+}
+/**
+ * An `IconButton` bundling the canonical trash glyph — `icons.tsx`'s `delete`,
+ * the fuller 4-shape Feather `trash-2` — always `danger`-styled.
+ *
+ * Presentational only (HITL-1, binding): takes a plain `onClick`, never an
+ * `onConfirm`, and never imports any confirm-dialog component — the call
+ * site owns whether and which one gates the click.
+ */
+export declare function DeleteButton(props: DeleteButtonProps): import("react").JSX.Element;

package/dist/components/EditButton.d.ts

@@ -0,0 +1,10 @@
+export interface EditButtonProps {
+    label: string;
+    onClick: () => void;
+    disabled?: boolean;
+    className?: string;
+    "data-testid"?: string;
+}
+/** An `IconButton` bundling the canonical pencil glyph — `icons.tsx`'s `edit`,
+ *  the two-path Feather pencil — with no `danger` styling. */
+export declare function EditButton(props: EditButtonProps): import("react").JSX.Element;

package/dist/components/ExecutionDetail.d.ts

@@ -0,0 +1,70 @@
+import { ReactNode } from 'react';
+import { ExecutionKind } from './ExecutionList.tsx';
+import { ExecutionLogStep } from './ExecutionLogPanel.tsx';
+import { ExecutionStatus } from './StepStatusPill.tsx';
+/**
+ * One past execution in full — an already-mapped slice of the host's history
+ * payload, the detail-level sibling of `ExecutionListItem`. The HOST maps its
+ * own record into this shape; this component never fetches, polls or reaches
+ * for an SDK.
+ *
+ * D2: there is no log-line field anywhere in this shape, on purpose — "logs"
+ * for an execution ARE its status, timing, input, output and error, and for a
+ * workflow that is the per-step `steps` list below.
+ */
+export interface ExecutionDetailValue {
+    id: string;
+    kind: ExecutionKind;
+    callableName: string;
+    status: ExecutionStatus;
+    /** ISO-8601 instant the run started. */
+    startedAt: string;
+    /** ISO-8601 instant the run finished, or `null` while it is still
+     * queued/running (rendered as `—`). */
+    finishedAt: string | null;
+    /** Wall-clock duration once the run has finished, or `null` while it has not
+     * (rendered as `—`). */
+    durationMs: number | null;
+    /** The run's own input, once it is known. `undefined` = "not available" (no
+     * section); `null` = "available, and it is null" (section renders `null`). */
+    input?: unknown;
+    output?: unknown;
+    /** The failure's payload for a failed run. `null`/`undefined` = no error
+     * section at all — the reverse gate to `input`/`output`, because an error
+     * that is `null` is the absence of an error. */
+    error?: unknown;
+    /** A workflow run's steps. `undefined` = not a step-bearing run (no section);
+     * `[]` = it ran and no step did (the panel's own empty state). */
+    steps?: ExecutionLogStep[];
+}
+export interface ExecutionDetailProps {
+    /** The execution to show, or `null` when there is nothing to show yet. */
+    execution: ExecutionDetailValue | null;
+    /** `true` while the fetch for a `null` `execution` is still in flight —
+     * renders the loading branch. Once an `execution` is present it is rendered
+     * as-is: a host re-fetching (polling a running run) keeps showing the last
+     * known state rather than flashing back to "Loading…". */
+    loading?: boolean;
+    /** A failure to surface, e.g. the fetch for this execution failed. Rendered
+     * as an alert in EVERY branch — it is about the view, not about the run. */
+    errorMessage?: ReactNode;
+    /** Supplied ⇒ a dismiss control renders and calls this. Omitted ⇒ no
+     * control. */
+    onClose?: () => void;
+    /** Supplied ⇒ the "Open in visual editor" button renders and calls this.
+     * Omitted ⇒ no button (a function/endpoint run has no visual editor to open). */
+    onOpenInEditor?: () => void;
+}
+/**
+ * Everything known about one past execution: which callable it was and how it
+ * went, its timing, its own input/output/error, and — for a workflow run — the
+ * per-step list.
+ *
+ * The per-step list sits directly under the timing, above the run's own
+ * payloads: for a workflow it is the substance of the view (D2), and burying it
+ * under three JSON blocks would make the run read as a function call with
+ * appendices.
+ *
+ * A pure display leaf — no fetching, no polling, no live-ticking timer.
+ */
+export declare function ExecutionDetail({ execution, loading, errorMessage, onClose, onOpenInEditor, }: ExecutionDetailProps): import("react").JSX.Element;

package/dist/components/ExecutionFilters.d.ts

@@ -0,0 +1,59 @@
+import { ExecutionKind } from './ExecutionList.tsx';
+import { ExecutionStatus } from './StepStatusPill.tsx';
+/**
+ * The filter/search state of the history view — one plain object, owned by the
+ * HOST. This component is fully controlled: it holds no state of its own, it
+ * only renders `value` and reports the next one. Same "host owns the data, the
+ * control is presentational" split `ExecutionList` establishes, and the same
+ * reason: the host owns where the filters live (URL search params today, a
+ * query cache tomorrow) and this leaf must not disagree with it.
+ */
+export interface ExecutionFilterValue {
+    /** `""` = "no status filter" (the `Any status` option), never `null`. */
+    status: ExecutionStatus | "";
+    /** `""` = "no kind filter" (the `Any type` option). Only reachable when the
+     * host renders the kind select (`showKind`). */
+    kind: ExecutionKind | "";
+    /** Inclusive lower bound on the run's start, as `YYYY-MM-DD` — exactly what
+     * `input[type=date]` reports and accepts. `""` = unbounded. */
+    from: string;
+    /** Inclusive upper bound on the run's start, same format. `""` = unbounded. */
+    to: string;
+    /** Free-text query. D3: the server matches execution id + callable name/key,
+     * never payload JSON. */
+    q: string;
+}
+export interface ExecutionFiltersProps {
+    /** The current filter state — rendered verbatim, never re-derived. */
+    value: ExecutionFilterValue;
+    /** Called ONCE per user interaction with the ONE field that changed:
+     * `{ ...value, <that field>: next }`. No debounce, no batching — the host
+     * decides when a request is worth making (it may debounce `q` itself). */
+    onChange: (next: ExecutionFilterValue) => void;
+    /** `true` ⇒ the kind select renders between the status select and the date
+     * bounds. Defaults to `false`: the per-callable history view already knows
+     * the kind, so a kind filter there would be a control of one option. */
+    showKind?: boolean;
+    /** Placeholder for the search box. Defaults to `"Search by id or name"` —
+     * the same two fields D3 pins the server-side search to. */
+    searchPlaceholder?: string;
+    /** `true` ⇒ every control (the clear button included) renders disabled — the
+     * state a host uses while a request is already in flight. */
+    disabled?: boolean;
+}
+/**
+ * The history view's filter/search bar: free text, status, (optionally) kind,
+ * and a start-date window, plus a Clear control that appears only once there is
+ * something to clear.
+ *
+ * A pure controlled leaf. Every change reports exactly one field's new value,
+ * spread over the value it was given — a control that rebuilt the whole object
+ * would silently drop a sibling filter the moment the two are edited close
+ * together, and the host is the only party that knows the authoritative value.
+ *
+ * Each control carries its own `aria-label`: the visible layout is one dense
+ * row of heterogeneous controls (a search box, three or four dropdowns, two
+ * date pickers) with no room for a label per control, so the accessible name is
+ * what tells them apart.
+ */
+export declare function ExecutionFilters({ value, onChange, showKind, searchPlaceholder, disabled, }: ExecutionFiltersProps): import("react").JSX.Element;

package/dist/components/ExecutionList.d.ts

@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+import { ExecutionStatus } from './StepStatusPill.tsx';
+/** What kind of callable a run belongs to. A thin LOCAL literal — the same
+ * deliberate duplication `StepStatusPill`'s unions keep. */
+export type ExecutionKind = "function" | "endpoint" | "workflow";
+/** One past execution's display row — an already-mapped slice of the host's
+ * history payload. The HOST maps its own record into this shape (the same
+ * "host owns the data, the list is presentational" split `ExecutionLogPanel`
+ * establishes): this component never fetches, paginates or reaches for an SDK. */
+export interface ExecutionListItem {
+    /** Stable id for this row — what `onSelect` reports and `selectedId` matches. */
+    id: string;
+    kind: ExecutionKind;
+    /** The callable's name/key this run belongs to. */
+    callableName: string;
+    status: ExecutionStatus;
+    /** ISO-8601 instant the run started. */
+    startedAt: string;
+    /** Wall-clock duration once the run has finished; `null` while it is still
+     * queued/running (rendered as `—`). */
+    durationMs: number | null;
+}
+export interface ExecutionListProps {
+    /** The page of past executions, rendered in exactly this order — never re-sorted. */
+    items: ExecutionListItem[];
+    /** The row to highlight as current. `null`/omitted ⇒ no row is active. */
+    selectedId?: string | null;
+    /** Supplied ⇒ rows are clickable and report their id here. Omitted ⇒ every
+     * row is a plain, non-interactive row. */
+    onSelect?: (id: string) => void;
+    /**
+     * `true` ⇒ each row's title is the callable's name and its subtitle carries
+     * the kind + start time (the project-wide history view). `false` ⇒ the title
+     * is the start time and the subtitle is the run id (the per-callable view,
+     * where the callable is already known). Defaults to `false`.
+     */
+    showCallable?: boolean;
+    /** `true` ⇒ the loading branch while there is nothing to show yet. */
+    loading?: boolean;
+    /** Shown instead of the list when `items` is empty. */
+    emptyLabel?: ReactNode;
+    /** Whether a previous page exists — drives the pager's `Previous` state. */
+    hasPrev?: boolean;
+    /** Whether a next page exists — drives the pager's `Next` state. */
+    hasNext?: boolean;
+    /** Supplied ⇒ the pager renders and `Previous` calls this. */
+    onPrev?: () => void;
+    /** Supplied ⇒ the pager renders and `Next` calls this. */
+    onNext?: () => void;
+}
+/**
+ * A paged list of past executions: one row per run, click-to-select, with a
+ * prev/next pager.
+ *
+ * A pure display leaf — no fetching, no polling, no sorting, no local
+ * selection state. It renders `items` in the order given, reports a click, and
+ * reports a page request; the host owns which page is loaded and which row is
+ * selected.
+ */
+export declare function ExecutionList({ items, selectedId, onSelect, showCallable, loading, emptyLabel, hasPrev, hasNext, onPrev, onNext, }: ExecutionListProps): import("react").JSX.Element;