@data-club/ai-hub 0.0.1

package/dist/components/ToolCallView/index.d.ts

@@ -0,0 +1,120 @@
+/**
+ * `<ToolCallView />` — collapsible tool-call card inside an assistant
+ * bubble.
+ *
+ * Header carries the tool name + status (`running`/`done`/`error`) +
+ * duration. Body shows input + output (or input + error). Default
+ * collapsed; click `[▶]` to expand. Tool errors do NOT fail the turn
+ * — the card stays as evidence of what happened (§10.3).
+ *
+ * Step 10 only renders tool calls when `toolCallsVisible` (resolved) is
+ * true. The decision lives in `MessageList`.
+ *
+ * Exported under `AIHub.ToolCallView`.
+ *
+ * @see SPECIFICATIONS.md §9.3 — tool events
+ * @see SPECIFICATIONS.md §10.3 — tool error vs. agent error
+ * @see ui-sketches/03-chat.md — tool_call_card
+ */
+import { type ReactNode } from "react";
+import { type AIHubTexts, type DeepPartial } from "../../auth/texts.js";
+/** Status of a tool call. */
+export type ToolCallStatus = "running" | "done" | "error";
+/** BEM class names emitted by `<ToolCallView />`. */
+export interface ToolCallViewClassNames {
+    /** Outer card. */
+    root: string;
+    /** Modifier — `--collapsed`. */
+    rootCollapsed: string;
+    /** Modifier — `--expanded`. */
+    rootExpanded: string;
+    /** Status modifier — `--running`. */
+    rootRunning: string;
+    /** Status modifier — `--done`. */
+    rootDone: string;
+    /** Status modifier — `--error`. */
+    rootError: string;
+    /** Header element. */
+    header: string;
+    /** Tool name inside header. */
+    toolName: string;
+    /** Status icon + text inside header. */
+    status: string;
+    /** Duration text inside header. */
+    duration: string;
+    /** Expand/collapse toggle. */
+    toggle: string;
+    /** Body element (mounted only when expanded). */
+    body: string;
+    /** Modifier on the body — `--error`. */
+    bodyError: string;
+    /** Input section. */
+    inputSection: string;
+    /** Output section. */
+    outputSection: string;
+    /** Section label (Input: / Output: / Error:). */
+    sectionLabel: string;
+    /** Section pre/code content. */
+    sectionContent: string;
+}
+/** Props for `<ToolCallView />`. */
+export interface ToolCallViewProps {
+    /** Tool name (e.g. "search_web"). */
+    toolName: string;
+    /** Current status. Drives the icon + the body's error modifier. */
+    status: ToolCallStatus;
+    /** Tool input — pretty-printed JSON usually. */
+    input: string;
+    /** Tool output (only meaningful when `status === "done"`). */
+    output?: string;
+    /** Error message (only meaningful when `status === "error"`). */
+    error?: string;
+    /** Duration in seconds, when known. */
+    durationSeconds?: number;
+    /**
+     * Override initial expanded state. Default false (collapsed); the
+     * spec's `tool_call_card --collapsed` is the default visual.
+     *
+     * Ignored when `expanded` is passed (controlled mode).
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Controlled expanded state. When set, `<ToolCallView />` defers all
+     * expand/collapse decisions to the parent — `onToggle` fires on the
+     * user's toggle click and the parent computes the next `expanded`.
+     * Used by `<MessageList />` to enforce the accordion +
+     * auto-expand-while-streaming rules across blocks. When omitted, the
+     * component falls back to internal `useState` (default-collapsed,
+     * per-instance toggle) for backward compatibility.
+     */
+    expanded?: boolean;
+    /**
+     * Toggle handler for the controlled mode. Fires on the user's click;
+     * the parent decides what to do with it. Ignored in uncontrolled mode.
+     */
+    onToggle?: () => void;
+    /** Wrapper-supplied i18n. */
+    texts?: DeepPartial<AIHubTexts>;
+    /** Extra class merged onto the root. */
+    className?: string;
+    /** Per-element class overrides. */
+    classNames?: Partial<ToolCallViewClassNames>;
+    /**
+     * Transform applied to the displayed `input` / `output` / `error`
+     * strings. Defaults to [[formatToolContentForDisplay]], which
+     * JSON-pretty-prints the value (when parseable) and unescapes the
+     * whitespace JSON-escape sequences (`\n`, `\t`, `\r`) so they render
+     * as actual layout. Pass `(s) => s` to opt out (e.g. for a raw
+     * debugging view), or supply a custom formatter to reshape the
+     * content (e.g. redact secrets).
+     */
+    formatContent?: (raw: string) => string;
+}
+/**
+ * Renders the card.
+ *
+ * @param props - see `ToolCallViewProps`.
+ * @returns the rendered card.
+ */
+export declare function ToolCallView(props: ToolCallViewProps): ReactNode;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ToolCallView/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ToolCallView/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAEL,KAAK,UAAU,EACf,KAAK,WAAW,EACjB,MAAM,qBAAqB,CAAC;AAG7B,6BAA6B;AAC7B,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAE1D,qDAAqD;AACrD,MAAM,WAAW,sBAAsB;IACrC,kBAAkB;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,gCAAgC;IAChC,aAAa,EAAE,MAAM,CAAC;IACtB,+BAA+B;IAC/B,YAAY,EAAE,MAAM,CAAC;IACrB,qCAAqC;IACrC,WAAW,EAAE,MAAM,CAAC;IACpB,kCAAkC;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,mCAAmC;IACnC,SAAS,EAAE,MAAM,CAAC;IAClB,sBAAsB;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,wCAAwC;IACxC,MAAM,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,QAAQ,EAAE,MAAM,CAAC;IACjB,8BAA8B;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,IAAI,EAAE,MAAM,CAAC;IACb,wCAAwC;IACxC,SAAS,EAAE,MAAM,CAAC;IAClB,qBAAqB;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,sBAAsB;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,iDAAiD;IACjD,YAAY,EAAE,MAAM,CAAC;IACrB,gCAAgC;IAChC,cAAc,EAAE,MAAM,CAAC;CACxB;AAsBD,oCAAoC;AACpC,MAAM,WAAW,iBAAiB;IAChC,qCAAqC;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,mEAAmE;IACnE,MAAM,EAAE,cAAc,CAAC;IACvB,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;IAChC,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC,sBAAsB,CAAC,CAAC;IAC7C;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;CACzC;AAoCD;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,SAAS,CA0FhE"}

package/dist/components/ToolCallView/index.js

@@ -0,0 +1,104 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * `<ToolCallView />` — collapsible tool-call card inside an assistant
+ * bubble.
+ *
+ * Header carries the tool name + status (`running`/`done`/`error`) +
+ * duration. Body shows input + output (or input + error). Default
+ * collapsed; click `[▶]` to expand. Tool errors do NOT fail the turn
+ * — the card stays as evidence of what happened (§10.3).
+ *
+ * Step 10 only renders tool calls when `toolCallsVisible` (resolved) is
+ * true. The decision lives in `MessageList`.
+ *
+ * Exported under `AIHub.ToolCallView`.
+ *
+ * @see SPECIFICATIONS.md §9.3 — tool events
+ * @see SPECIFICATIONS.md §10.3 — tool error vs. agent error
+ * @see ui-sketches/03-chat.md — tool_call_card
+ */
+import { useState } from "react";
+import { resolveAIHubTexts, } from "../../auth/texts.js";
+import { formatToolContentForDisplay } from "./formatContent.js";
+const DEFAULT_CLASS_NAMES = Object.freeze({
+    root: "data-club-ai-hub__tool-call-card",
+    rootCollapsed: "data-club-ai-hub__tool-call-card--collapsed",
+    rootExpanded: "data-club-ai-hub__tool-call-card--expanded",
+    rootRunning: "data-club-ai-hub__tool-call-card--running",
+    rootDone: "data-club-ai-hub__tool-call-card--done",
+    rootError: "data-club-ai-hub__tool-call-card--error",
+    header: "data-club-ai-hub__tool-call-card__header",
+    toolName: "data-club-ai-hub__tool-call-card__tool-name",
+    status: "data-club-ai-hub__tool-call-card__status",
+    duration: "data-club-ai-hub__tool-call-card__duration",
+    toggle: "data-club-ai-hub__tool-call-card__toggle",
+    body: "data-club-ai-hub__tool-call-card__body",
+    bodyError: "data-club-ai-hub__tool-call-card__body--error",
+    inputSection: "data-club-ai-hub__tool-call-card__input-section",
+    outputSection: "data-club-ai-hub__tool-call-card__output-section",
+    sectionLabel: "data-club-ai-hub__tool-call-card__section-label",
+    sectionContent: "data-club-ai-hub__tool-call-card__section-content",
+});
+/**
+ * Returns the BEM modifier for the status.
+ */
+function statusModifier(status, cls) {
+    switch (status) {
+        case "running":
+            return cls.rootRunning;
+        case "done":
+            return cls.rootDone;
+        case "error":
+            return cls.rootError;
+    }
+}
+/**
+ * Returns the i18n status text for the header.
+ */
+function statusText(status, chat) {
+    switch (status) {
+        case "running":
+            return chat.toolCallRunningStatus;
+        case "done":
+            return chat.toolCallDoneStatus;
+        case "error":
+            return chat.toolCallErrorStatus;
+    }
+}
+/**
+ * Renders the card.
+ *
+ * @param props - see `ToolCallViewProps`.
+ * @returns the rendered card.
+ */
+export function ToolCallView(props) {
+    const texts = resolveAIHubTexts(props.texts);
+    const cls = { ...DEFAULT_CLASS_NAMES, ...(props.classNames ?? {}) };
+    const [uncontrolledExpanded, setUncontrolledExpanded] = useState(props.defaultExpanded ?? false);
+    const isControlled = props.expanded !== undefined;
+    const expanded = isControlled ? props.expanded : uncontrolledExpanded;
+    const handleToggle = isControlled
+        ? props.onToggle ?? (() => { })
+        : () => setUncontrolledExpanded((e) => !e);
+    const seconds = props.durationSeconds ?? 0;
+    const durationText = seconds > 0 ? `(${seconds.toFixed(1)}s)` : "";
+    const formatContent = props.formatContent ?? formatToolContentForDisplay;
+    const rootClass = [
+        cls.root,
+        expanded ? cls.rootExpanded : cls.rootCollapsed,
+        statusModifier(props.status, cls),
+        props.className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    const bodyClass = [
+        cls.body,
+        props.status === "error" ? cls.bodyError : null,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (_jsxs("div", { className: rootClass, "data-testid": "tool-call-view", "data-status": props.status, "data-expanded": expanded ? "true" : "false", children: [_jsxs("div", { className: cls.header, children: [_jsxs("span", { className: cls.toolName, "data-testid": "tool-call-view-name", children: ["\uD83D\uDD27 ", props.toolName] }), _jsx("span", { className: cls.status, "data-testid": "tool-call-view-status", children: statusText(props.status, texts.chat) }), durationText ? (_jsx("span", { className: cls.duration, children: durationText })) : null, _jsx("button", { type: "button", className: cls.toggle, onClick: handleToggle, "aria-expanded": expanded, "aria-label": expanded
+                            ? texts.chat.toolCallCollapseAriaLabel
+                            : texts.chat.toolCallExpandAriaLabel, "data-testid": "tool-call-view-toggle", children: expanded ? "▼" : "▶" })] }), expanded ? (_jsxs("div", { className: bodyClass, "data-testid": "tool-call-view-body", children: [_jsxs("div", { className: cls.inputSection, children: [_jsx("div", { className: cls.sectionLabel, children: texts.chat.toolCallInputLabel }), _jsx("pre", { className: cls.sectionContent, children: formatContent(props.input) })] }), props.status === "error" ? (_jsxs("div", { className: cls.outputSection, children: [_jsx("div", { className: cls.sectionLabel, children: texts.chat.toolCallErrorLabel }), _jsx("pre", { className: cls.sectionContent, children: formatContent(props.error ?? "") })] })) : props.output !== undefined ? (_jsxs("div", { className: cls.outputSection, children: [_jsx("div", { className: cls.sectionLabel, children: texts.chat.toolCallOutputLabel }), _jsx("pre", { className: cls.sectionContent, children: formatContent(props.output) })] })) : null] })) : null] }));
+}
+//# sourceMappingURL=index.js.map

package/dist/components/ToolCallView/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ToolCallView/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/TpmBanner/index.d.ts

@@ -0,0 +1,53 @@
+/**
+ * `<TpmBanner />` — TPM-recovery banner with countdown.
+ *
+ * Specialization of `<SystemNotice />` that:
+ *
+ * 1. Reads the active turn's `tpm_retry_at` from `useAIHub().state` and
+ *    computes the remaining seconds at ~1Hz.
+ * 2. Switches variant based on §10.4: `tpm-wait` while `phase ===
+ *    waiting_provider`, transient `resumed` flash on the `running →
+ *    running(model_*)` recovery transition, and `error` when the
+ *    `lastTurnError` is `tpm_exhausted`.
+ * 3. Renders nothing when none of the conditions apply — components can
+ *    mount it unconditionally without flicker.
+ *
+ * The provider's reducer already clears `tpm_retry_at` on the `resumed`
+ * notice; the banner observes that change and shows the brief "Resumed."
+ * flash for 2s. The exhausted-error path renders a Retry button that
+ * re-issues the last user message (delegated to the parent via
+ * `onRetry`).
+ *
+ * @see SPECIFICATIONS.md §6.5 — TPM recovery
+ * @see SPECIFICATIONS.md §10.4 — predicates bound to (status, phase)
+ * @see ui-sketches/03-chat.md — system_notice variants
+ */
+import { type ReactNode } from "react";
+import { type AIHubTexts, type DeepPartial } from "../../auth/texts.js";
+/** Props for `<TpmBanner />`. */
+export interface TpmBannerProps {
+    /**
+     * Called when the user clicks the Retry button on the `--error`
+     * variant. Wraps `sendMessage` of the last user message; the parent
+     * decides what "last user message" means (the monolith threads its
+     * own ref through).
+     */
+    onRetry?: () => void;
+    /** Wrapper-supplied i18n. */
+    texts?: DeepPartial<AIHubTexts>;
+    /** Extra class merged onto the root. */
+    className?: string;
+    /**
+     * Override the resolved "now" — test injection point. Production code
+     * leaves this unset (defaults to `Date.now()` at each tick).
+     */
+    nowProvider?: () => number;
+}
+/**
+ * Renders the banner.
+ *
+ * @param props - see `TpmBannerProps`.
+ * @returns the rendered banner, or `null` when nothing should render.
+ */
+export declare function TpmBanner(props: TpmBannerProps): ReactNode;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/TpmBanner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TpmBanner/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,EAEL,KAAK,UAAU,EACf,KAAK,WAAW,EACjB,MAAM,qBAAqB,CAAC;AAiC7B,iCAAiC;AACjC,MAAM,WAAW,cAAc;IAC7B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;IAChC,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,MAAM,CAAC;CAC5B;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,SAAS,CAiF1D"}

package/dist/components/TpmBanner/index.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * `<TpmBanner />` — TPM-recovery banner with countdown.
+ *
+ * Specialization of `<SystemNotice />` that:
+ *
+ * 1. Reads the active turn's `tpm_retry_at` from `useAIHub().state` and
+ *    computes the remaining seconds at ~1Hz.
+ * 2. Switches variant based on §10.4: `tpm-wait` while `phase ===
+ *    waiting_provider`, transient `resumed` flash on the `running →
+ *    running(model_*)` recovery transition, and `error` when the
+ *    `lastTurnError` is `tpm_exhausted`.
+ * 3. Renders nothing when none of the conditions apply — components can
+ *    mount it unconditionally without flicker.
+ *
+ * The provider's reducer already clears `tpm_retry_at` on the `resumed`
+ * notice; the banner observes that change and shows the brief "Resumed."
+ * flash for 2s. The exhausted-error path renders a Retry button that
+ * re-issues the last user message (delegated to the parent via
+ * `onRetry`).
+ *
+ * @see SPECIFICATIONS.md §6.5 — TPM recovery
+ * @see SPECIFICATIONS.md §10.4 — predicates bound to (status, phase)
+ * @see ui-sketches/03-chat.md — system_notice variants
+ */
+import { useEffect, useState } from "react";
+import { resolveAIHubTexts, } from "../../auth/texts.js";
+import { useAIHub } from "../../context/useAIHub.js";
+import { SystemNotice } from "../SystemNotice/index.js";
+/** Duration of the post-recovery "Resumed." flash, in milliseconds. */
+const RESUMED_FLASH_MS = 2000;
+/**
+ * Renders the countdown text by replacing `{seconds}` in the template.
+ *
+ * @param template - i18n template with `{seconds}` placeholder.
+ * @param seconds - integer seconds remaining; floors at 0.
+ * @returns the resolved text.
+ */
+function renderCountdown(template, seconds) {
+    const safe = Math.max(0, Math.floor(seconds));
+    return template.replace("{seconds}", String(safe));
+}
+/**
+ * Computes seconds-until against an ISO timestamp.
+ *
+ * @param retryAt - ISO timestamp from `tpm_retry_at`.
+ * @param now - epoch ms (test injection point).
+ * @returns seconds remaining (>= 0). Returns 0 when `retryAt` is invalid.
+ */
+function secondsUntil(retryAt, now) {
+    const target = Date.parse(retryAt);
+    if (!Number.isFinite(target))
+        return 0;
+    return Math.max(0, (target - now) / 1000);
+}
+/**
+ * Renders the banner.
+ *
+ * @param props - see `TpmBannerProps`.
+ * @returns the rendered banner, or `null` when nothing should render.
+ */
+export function TpmBanner(props) {
+    const { state, lastTurnError } = useAIHub();
+    const texts = resolveAIHubTexts(props.texts);
+    // Tick at 1Hz while we're in the wait phase. The interval is
+    // re-installed when the deadline changes (new wait) or removed when
+    // we leave the wait phase.
+    const [, forceTick] = useState(0);
+    useEffect(() => {
+        if (state.phase !== "waiting_provider")
+            return;
+        const tick = setInterval(() => {
+            forceTick((n) => n + 1);
+        }, 1000);
+        return () => clearInterval(tick);
+    }, [state.phase, state.tpm_retry_at]);
+    // Track the *previous* phase so the `running(waiting_provider) →
+    // running(model_*)` transition triggers the "Resumed." flash. We hold
+    // the flash on the screen for RESUMED_FLASH_MS, then clear.
+    const [showResumed, setShowResumed] = useState(false);
+    const [prevPhase, setPrevPhase] = useState(state.phase);
+    useEffect(() => {
+        if (prevPhase === "waiting_provider" &&
+            state.phase !== "waiting_provider" &&
+            state.status === "running") {
+            setShowResumed(true);
+            const t = setTimeout(() => setShowResumed(false), RESUMED_FLASH_MS);
+            setPrevPhase(state.phase);
+            return () => clearTimeout(t);
+        }
+        setPrevPhase(state.phase);
+        return undefined;
+    }, [state.phase, state.status]);
+    // Wait phase: render `--tpm-wait` with countdown.
+    if (state.phase === "waiting_provider" && state.tpm_retry_at) {
+        const now = (props.nowProvider ?? Date.now)();
+        const remaining = secondsUntil(state.tpm_retry_at, now);
+        return (_jsx(SystemNotice, { variant: "tpm-wait", message: renderCountdown(texts.chat.tpmWaitText, remaining), ...(props.className !== undefined ? { className: props.className } : {}) }));
+    }
+    // Brief "Resumed." flash right after a successful recovery.
+    if (showResumed) {
+        return (_jsx(SystemNotice, { variant: "resumed", message: texts.chat.systemResumedText, ...(props.className !== undefined ? { className: props.className } : {}) }));
+    }
+    // Exhausted-error path — the provider sets `lastTurnError` on
+    // `error{tpm_exhausted}` + `stream_end{error}`. The retry button only
+    // surfaces here (the generic `--failed` Retry button on the message
+    // bubble is the equivalent for non-TPM failures).
+    if (lastTurnError &&
+        lastTurnError.toLowerCase().includes("rate")) {
+        return (_jsx(SystemNotice, { variant: "error", message: texts.chat.tpmExhaustedText, ...(props.onRetry !== undefined
+                ? { action: { label: texts.chat.tpmRetryButton, onClick: props.onRetry } }
+                : {}), ...(props.className !== undefined ? { className: props.className } : {}) }));
+    }
+    return null;
+}
+//# sourceMappingURL=index.js.map

package/dist/components/TpmBanner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/TpmBanner/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/TurnStatusIndicator/index.d.ts

@@ -0,0 +1,77 @@
+/**
+ * `<TurnStatusIndicator />` — a small `●` dot + short label reflecting the
+ * active turn's `(status, phase)`.
+ *
+ * Pure function of state (via `turnStatusVisual` in `state/affordances.ts`).
+ * Two soft-state behaviors are local to the component:
+ *
+ * 1. **`done` flash.** On the transition `running → done`, the indicator
+ *    briefly shows "Done" (~2s) and then settles to "Ready" — this is the
+ *    visual "the turn finished" affordance the predicate table calls for.
+ * 2. **`cancelled` auto-clear.** After ~3s the indicator clears back to
+ *    "Ready" so the cancelled stamp doesn't sit forever in the header.
+ *
+ * Both timers respect `prefers-reduced-motion` by skipping the pulse
+ * animation; the timer logic still runs, but the dot stays static.
+ *
+ * Rendering is gated by:
+ *
+ * - the `showTurnStatus` React prop (default true) AND
+ * - the `turn_status_visible` server toggle (§8.4) — precedence: server > prop.
+ *
+ * Both gates are AND-combined in `useAffordanceFlags` upstream so the
+ * primitive itself only checks `if (!visible) return null`.
+ *
+ * Exported under `AIHub.TurnStatusIndicator`.
+ *
+ * @see SPECIFICATIONS.md §10.4 — predicate table + label map
+ * @see ui-sketches/03-chat.md — turn_status_indicator
+ */
+import { type ReactNode } from "react";
+import type { AIHubState } from "../../types.js";
+/**
+ * BEM class names emitted by `<TurnStatusIndicator />`.
+ */
+export interface TurnStatusIndicatorClassNames {
+    /** Outer wrapper. */
+    root: string;
+    /** Dot element — pulse animation hooks here. */
+    dot: string;
+    /** Modifier on the dot — `--idle` (gray static). */
+    dotIdle: string;
+    /** Modifier on the dot — `--running` (accent pulsing). */
+    dotRunning: string;
+    /** Modifier on the dot — `--warning` (yellow pulsing). */
+    dotWarning: string;
+    /** Modifier on the dot — `--error` (red static). */
+    dotError: string;
+    /** Modifier added when pulsing is allowed (drops under reduced-motion). */
+    dotPulse: string;
+    /** Label text. */
+    label: string;
+}
+/**
+ * Props for `<TurnStatusIndicator />`.
+ *
+ * `state` is optional — when omitted the component reads it from the
+ * provider via `useAIHub()`. Passing it explicitly is useful for the
+ * Storybook stories (Step 10 ships them for every cell of the §10.4
+ * table) and for the test harness, both of which render the indicator
+ * in isolation without a real reducer in scope.
+ */
+export interface TurnStatusIndicatorProps {
+    /** Override the state read from context (used by stories + tests). */
+    state?: AIHubState;
+    /** Extra class merged onto the root. */
+    className?: string;
+    /** Per-element class overrides. */
+    classNames?: Partial<TurnStatusIndicatorClassNames>;
+}
+/**
+ * Renders the indicator.
+ *
+ * @param props - see `TurnStatusIndicatorProps`.
+ * @returns the rendered indicator.
+ */
+export declare function TurnStatusIndicator(props: TurnStatusIndicatorProps): ReactNode;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/TurnStatusIndicator/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TurnStatusIndicator/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIpE,OAAO,KAAK,EACV,UAAU,EAGX,MAAM,gBAAgB,CAAC;AAExB;;GAEG;AACH,MAAM,WAAW,6BAA6B;IAC5C,qBAAqB;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,gDAAgD;IAChD,GAAG,EAAE,MAAM,CAAC;IACZ,oDAAoD;IACpD,OAAO,EAAE,MAAM,CAAC;IAChB,0DAA0D;IAC1D,UAAU,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,UAAU,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,QAAQ,EAAE,MAAM,CAAC;IACjB,2EAA2E;IAC3E,QAAQ,EAAE,MAAM,CAAC;IACjB,kBAAkB;IAClB,KAAK,EAAE,MAAM,CAAC;CACf;AAgCD;;;;;;;;GAQG;AACH,MAAM,WAAW,wBAAwB;IACvC,sEAAsE;IACtE,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC,6BAA6B,CAAC,CAAC;CACrD;AAaD;;;;;GAKG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,wBAAwB,GAC9B,SAAS,CAyEX"}

package/dist/components/TurnStatusIndicator/index.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * `<TurnStatusIndicator />` — a small `●` dot + short label reflecting the
+ * active turn's `(status, phase)`.
+ *
+ * Pure function of state (via `turnStatusVisual` in `state/affordances.ts`).
+ * Two soft-state behaviors are local to the component:
+ *
+ * 1. **`done` flash.** On the transition `running → done`, the indicator
+ *    briefly shows "Done" (~2s) and then settles to "Ready" — this is the
+ *    visual "the turn finished" affordance the predicate table calls for.
+ * 2. **`cancelled` auto-clear.** After ~3s the indicator clears back to
+ *    "Ready" so the cancelled stamp doesn't sit forever in the header.
+ *
+ * Both timers respect `prefers-reduced-motion` by skipping the pulse
+ * animation; the timer logic still runs, but the dot stays static.
+ *
+ * Rendering is gated by:
+ *
+ * - the `showTurnStatus` React prop (default true) AND
+ * - the `turn_status_visible` server toggle (§8.4) — precedence: server > prop.
+ *
+ * Both gates are AND-combined in `useAffordanceFlags` upstream so the
+ * primitive itself only checks `if (!visible) return null`.
+ *
+ * Exported under `AIHub.TurnStatusIndicator`.
+ *
+ * @see SPECIFICATIONS.md §10.4 — predicate table + label map
+ * @see ui-sketches/03-chat.md — turn_status_indicator
+ */
+import { useEffect, useRef, useState } from "react";
+import { useAIHub } from "../../context/useAIHub.js";
+import { turnStatusVisual } from "../../state/affordances.js";
+const DEFAULT_CLASS_NAMES = Object.freeze({
+    root: "data-club-ai-hub__turn-status",
+    dot: "data-club-ai-hub__turn-status__dot",
+    dotIdle: "data-club-ai-hub__turn-status__dot--idle",
+    dotRunning: "data-club-ai-hub__turn-status__dot--running",
+    dotWarning: "data-club-ai-hub__turn-status__dot--warning",
+    dotError: "data-club-ai-hub__turn-status__dot--error",
+    dotPulse: "data-club-ai-hub__turn-status__dot--pulse",
+    label: "data-club-ai-hub__turn-status__label",
+});
+/**
+ * Maps the visual variant to its modifier class.
+ */
+function dotModifier(variant, cls) {
+    switch (variant) {
+        case "running":
+            return cls.dotRunning;
+        case "warning":
+            return cls.dotWarning;
+        case "error":
+            return cls.dotError;
+        case "idle":
+            return cls.dotIdle;
+    }
+}
+/**
+ * Duration of the post-done "Done" flash, in milliseconds. After this
+ * expires the indicator settles back to "Ready" (`idle` dot).
+ */
+const DONE_FLASH_MS = 2000;
+/**
+ * Duration of the post-cancel "Cancelled" stamp, in milliseconds.
+ */
+const CANCELLED_CLEAR_MS = 3000;
+/**
+ * Renders the indicator.
+ *
+ * @param props - see `TurnStatusIndicatorProps`.
+ * @returns the rendered indicator.
+ */
+export function TurnStatusIndicator(props) {
+    const ctx = useAIHub();
+    const state = props.state ?? ctx.state;
+    const cls = { ...DEFAULT_CLASS_NAMES, ...(props.classNames ?? {}) };
+    // Capture the *effective* status / phase for rendering. After done /
+    // cancelled clear timers expire we treat the state as `idle` so the
+    // dot doesn't sit on "Done" forever.
+    const [effective, setEffective] = useState({ status: state.status, phase: state.phase });
+    // Track the previous status so we know when to start the
+    // done/cancelled clear timer (state only updates on transitions).
+    const prevStatusRef = useRef(state.status);
+    useEffect(() => {
+        const prev = prevStatusRef.current;
+        prevStatusRef.current = state.status;
+        // No timer needed when the status is steady at running or idle.
+        if (state.status === prev) {
+            setEffective({ status: state.status, phase: state.phase });
+            return;
+        }
+        // Fresh state — lift it.
+        setEffective({ status: state.status, phase: state.phase });
+        if (state.status === "done") {
+            const t = setTimeout(() => {
+                setEffective({ status: "idle", phase: null });
+            }, DONE_FLASH_MS);
+            return () => clearTimeout(t);
+        }
+        if (state.status === "cancelled") {
+            const t = setTimeout(() => {
+                setEffective({ status: "idle", phase: null });
+            }, CANCELLED_CLEAR_MS);
+            return () => clearTimeout(t);
+        }
+        return undefined;
+    }, [state.status, state.phase]);
+    const visual = turnStatusVisual(effective.status, effective.phase);
+    const rootClass = props.className
+        ? `${cls.root} ${props.className}`
+        : cls.root;
+    const dotClass = [
+        cls.dot,
+        dotModifier(visual.dot, cls),
+        visual.pulse ? cls.dotPulse : null,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (_jsxs("div", { className: rootClass, "data-testid": "turn-status-indicator", "data-status": effective.status, "data-phase": effective.phase ?? "none", "data-variant": visual.dot, role: "status", "aria-live": "polite", children: [_jsx("span", { className: dotClass, "aria-hidden": "true" }), _jsx("span", { className: cls.label, "data-testid": "turn-status-label", children: visual.label })] }));
+}
+//# sourceMappingURL=index.js.map

package/dist/components/TurnStatusIndicator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/TurnStatusIndicator/index.tsx"],"names":[],"mappings":"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"}