@flikk/ui 1.0.0-beta.30 → 1.0.0-beta.32

package/dist/components/ai/AgentRequest/AgentRequest.types.d.ts

@@ -0,0 +1,241 @@
+import React from "react";
+/**
+ * What the agent is asking for.
+ *
+ * - `approval` — a permission gate. Approve / Deny (+ optional "always allow").
+ * - `choice`   — pick one of `options`.
+ * - `input`    — free text.
+ */
+export type AgentRequestKind = "approval" | "choice" | "input";
+/**
+ * How consequential the action is.
+ *
+ * The library paints NOTHING for this by default: a destructive question
+ * already reads as destructive through its `meta` line and the danger-outlined
+ * Deny action, and a coloured accent on top of those was noise. `destructive`
+ * lands on the row as `data-risk="destructive"` so a consumer can style it.
+ */
+export type AgentRequestRisk = "normal" | "destructive";
+/**
+ * How a question was settled.
+ *
+ * `deferred` is the escape hatch: the user declined to answer here (Skip). It
+ * is a first-class outcome, not a cancel — a composer takeover that cannot be
+ * escaped traps a user whose real answer isn't one of the offered options,
+ * which is also why a choice question can carry `allowOther`.
+ */
+export type AgentRequestOutcome = "resolved" | "rejected" | "deferred";
+export interface AgentRequestOption {
+    /** Serializable value handed back to `onAnswer`. */
+    value: string;
+    label: React.ReactNode;
+    /** Secondary line under the label — the trade-off, cost, or consequence. */
+    description?: React.ReactNode;
+}
+/** Fields every question kind shares. */
+export interface AgentRequestQuestionBase {
+    /** Stable identity. Required — answers are keyed by it, not by index. */
+    id: string;
+    /**
+     * Short summary shown in the collapsed row once answered, and in the
+     * dimmed row while pending. Keep it to a few words.
+     */
+    label: React.ReactNode;
+    /** The full question. Falls back to `label` when omitted. */
+    question?: React.ReactNode;
+    /** Secondary context line under the question. */
+    meta?: React.ReactNode;
+    /** @default "normal" */
+    risk?: AgentRequestRisk;
+    /**
+     * What is actually being approved — a command, a diff, a params list.
+     * Rendered in a monospace well. `ReactNode` on purpose: this is the one slot
+     * where a consumer legitimately needs to render their own component
+     * (a diff view, a table), so it is NOT part of the serializable schema.
+     */
+    payload?: React.ReactNode;
+}
+export interface AgentRequestApprovalQuestion extends AgentRequestQuestionBase {
+    /** @default "approval" */
+    kind?: "approval";
+    /** Overrides for the built-in action labels (i18n — §6: never trap strings). */
+    approveLabel?: string;
+    denyLabel?: string;
+    alwaysAllowLabel?: string;
+    /** Show the "always allow" action. @default false */
+    allowAlways?: boolean;
+    /**
+     * Renders a Skip action, recorded as `deferred`. @default false
+     *
+     * An approval has no free-text row to fall back on — Approve and Deny are
+     * both real answers — so this is its ONLY escape hatch, and a permission gate
+     * the user can neither approve, deny, nor step away from is the trap the
+     * `deferred` outcome exists to prevent.
+     */
+    optional?: boolean;
+    skipLabel?: string;
+}
+/** Fields shared by both choice shapes. */
+export interface AgentRequestChoiceBase extends AgentRequestQuestionBase {
+    kind: "choice";
+    options: AgentRequestOption[];
+    /**
+     * Append a free-text "something else" row to the bottom of the option list.
+     * Opt-in per question, NOT on by default: a closed question ("before or
+     * during the rollout?") is closed on purpose, and only the author of the
+     * question knows whether an answer off the list is meaningful. The typed
+     * answer is recorded as `resolved` with the text as its value.
+     * @default false
+     */
+    allowOther?: boolean;
+    /** Placeholder for the "something else" row. @default "Something else" */
+    otherPlaceholder?: string;
+    /** Label for the action that submits the "something else" text. @default "Send" */
+    otherSubmitLabel?: string;
+    /** Renders a Skip action. @default false */
+    optional?: boolean;
+    skipLabel?: string;
+}
+/** Pick exactly one — answers on selection. */
+export interface AgentRequestSingleChoiceQuestion extends AgentRequestChoiceBase {
+    multiple?: false;
+}
+/**
+ * Pick any number.
+ *
+ * Unlike single-choice this CANNOT auto-advance on click (the user isn't done
+ * until they say so), so it always renders an explicit confirm action.
+ */
+export interface AgentRequestMultiChoiceQuestion extends AgentRequestChoiceBase {
+    multiple: true;
+    /** Minimum selections before confirm enables. @default 0 */
+    minSelected?: number;
+    /** Maximum selections; further boxes disable once reached. */
+    maxSelected?: number;
+    confirmLabel?: string;
+}
+export interface AgentRequestInputQuestion extends AgentRequestQuestionBase {
+    kind: "input";
+    placeholder?: string;
+    /** Renders a Skip action. @default false */
+    optional?: boolean;
+    submitLabel?: string;
+    skipLabel?: string;
+}
+/**
+ * 🔴 A discriminated union, not one widened interface — `multiple` genuinely
+ * changes the shape of the ANSWER (`string` vs `string[]`), which §9 requires
+ * be modelled as a union rather than widened-and-cast. It also means `options`
+ * is required on a choice and meaningless on an approval, enforced by the
+ * compiler instead of by convention.
+ */
+export type AgentRequestQuestion = AgentRequestApprovalQuestion | AgentRequestSingleChoiceQuestion | AgentRequestMultiChoiceQuestion | AgentRequestInputQuestion;
+export interface AgentRequestAnswer {
+    /** The `id` of the question this answers. */
+    id: string;
+    /**
+     * Serializable answer value. `string[]` for a multi-choice question, `string`
+     * for every other kind — narrow with `Array.isArray`.
+     */
+    value: string | string[];
+    /** Human-readable answer, shown in the collapsed row. */
+    label: string;
+    outcome: AgentRequestOutcome;
+}
+export interface AgentRequestTheme {
+    baseStyle: string;
+    /**
+     * Geometry only. The panel's surface paint (rung background, elevation
+     * shadow, `--field-fill` for the controls inside) comes from `Card` and the
+     * relative-elevation engine, not from here.
+     */
+    panelStyle: string;
+    navStyle: string;
+    navButtonStyle: string;
+    navCountStyle: string;
+    /** The question-as-heading block. */
+    headerStyle: string;
+    /** Horizontal inset + bottom inset for the swapping question. */
+    contentStyle: string;
+    questionStyle: string;
+    metaStyle: string;
+    bodyStyle: string;
+    scrollAreaStyle: string;
+    fadeStyle: string;
+    fadeTopStyle: string;
+    fadeBottomStyle: string;
+    bodyInnerStyle: string;
+    answeredChipStyle: string;
+    badgeStyle: string;
+    /**
+     * Keyed by OUTCOME only. There are no `pending`/`active` badges any more —
+     * one question is on screen at a time, so there is no list of other
+     * questions to mark up.
+     */
+    badgeStates: Record<AgentRequestOutcome, string>;
+    answerStyle: string;
+    payloadStyle: string;
+    actionsStyle: string;
+    /** Left-anchored group inside the actions row (Skip). */
+    actionsStartStyle: string;
+    optionListStyle: string;
+    optionStyle: string;
+    otherInputStyle: string;
+    inputStyle: string;
+}
+export type AgentRequestThemeOverrides = Omit<Partial<AgentRequestTheme>, "badgeStates"> & {
+    badgeStates?: Partial<AgentRequestTheme["badgeStates"]>;
+};
+export interface AgentRequestProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "children" | "value" | "defaultValue" | "title"> {
+    /**
+     * The questions to ask, in order. Data-driven and serializable (except
+     * `payload`), so an LLM can emit a whole sequence as JSON.
+     */
+    questions?: AgentRequestQuestion[];
+    /**
+     * Escape hatch for a bespoke single-question body. Ignored when `questions`
+     * is provided (dev-warns if both).
+     */
+    children?: React.ReactNode;
+    /**
+     * The panel's accessible name, and only that — it is never painted. The
+     * QUESTION is the visible heading, so a second title line would be a heading
+     * competing with a heading. Pass a string; this is the i18n override for the
+     * default "Agent needs {n} decisions".
+     */
+    title?: React.ReactNode;
+    /** Controlled answers. */
+    value?: AgentRequestAnswer[];
+    /** Uncontrolled initial answers. @default [] */
+    defaultValue?: AgentRequestAnswer[];
+    /** Fires with the full answer list on every change. */
+    onValueChange?: (answers: AgentRequestAnswer[]) => void;
+    /** Fires once per answered question. */
+    onAnswer?: (answer: AgentRequestAnswer) => void;
+    /** Fires when the last question is answered. */
+    onComplete?: (answers: AgentRequestAnswer[]) => void;
+    /**
+     * Optional ceiling on the answering controls, as any CSS length. Unset by
+     * default: one question is on screen at a time, so the panel simply grows
+     * and shrinks to fit it. Set this when a question can be long enough to bury
+     * the conversation behind the composer (many options, a large `payload`) —
+     * beyond it the options scroll instead of growing, while the question itself
+     * stays put above them.
+     */
+    maxHeight?: string;
+    /** Accessible name for the back arrow. @default "Previous question" */
+    previousLabel?: string;
+    /** Accessible name for the forward arrow. @default "Next question" */
+    nextLabel?: string;
+    /**
+     * The progress line in the footer. A function rather than a string because it
+     * interpolates two numbers, and every visible string in the library has to be
+     * overridable for i18n. Whatever it returns is measured, and the actions row
+     * insets itself to clear it — a longer label is a layout choice, not a
+     * collision.
+     * @default "{current} of {total}"
+     */
+    progressLabel?: (current: number, total: number) => React.ReactNode;
+    className?: string;
+    theme?: AgentRequestThemeOverrides;
+}

package/dist/components/ai/AgentRequest/index.d.ts

@@ -0,0 +1,3 @@
+export { AgentRequest } from "./AgentRequest";
+export { agentRequestTheme } from "./AgentRequest.theme";
+export type { AgentRequestProps, AgentRequestKind, AgentRequestRisk, AgentRequestOutcome, AgentRequestOption, AgentRequestQuestion, AgentRequestAnswer, AgentRequestTheme, AgentRequestThemeOverrides, } from "./AgentRequest.types";

package/dist/components/ai/AgentStatus/AgentStatus.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { AgentStatusProps } from "./AgentStatus.types";
+export declare const AgentStatus: React.ForwardRefExoticComponent<AgentStatusProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ai/AgentStatus/AgentStatus.js

@@ -0,0 +1,144 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React__default, { useMemo, useId, useState, useEffect } from 'react';
+import { CaretRight } from '@phosphor-icons/react';
+import { useReducedMotion, motion, AnimatePresence } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { useElapsedTime } from '../../../hooks/useElapsedTime.js';
+import { Shimmer } from '../../effects/Shimmer/Shimmer.js';
+import { AIStatusIndicator } from '../shared/StatusIndicator.js';
+import { createTriggerIconVariants, accordionAnimations, accordionContentAnimations } from '../../core/Accordion/Accordion.animations.js';
+import { agentStatusTheme } from './AgentStatus.theme.js';
+
+const formatDuration = (duration) => {
+    const safe = Math.max(0, duration);
+    // Round once, up front. Rounding the minutes and seconds halves independently
+    // lets a value like 119.7 render as "1m 60s".
+    const rounded = safe < 60 ? Math.round(safe * 10) / 10 : Math.round(safe);
+    if (rounded < 60) {
+        return `${rounded.toFixed(Number.isInteger(rounded) ? 0 : 1)}s`;
+    }
+    return `${Math.floor(rounded / 60)}m ${rounded % 60}s`;
+};
+// The indicator + shimmering label + duration, without a root element. Both the
+// standalone status row (a <div role="status">) and the reasoning summary (a
+// phrasing <span> inside the trigger <button>) render this, so the visual row is
+// identical while each host picks a content-model-valid wrapper — a <div> may not
+// nest inside a <button>.
+const StatusRowInner = ({ theme, status, label, isActive, indicator, icon, wrap, activeSuffix, shimmerDuration, shimmerSpread, shimmerColor, shimmerHighlightColor, shownDuration, }) => {
+    const labelClass = cn(theme.labelStyle, wrap ? "" : "truncate");
+    return (jsxs(Fragment, { children: [indicator && (jsx("span", { className: theme.iconStyle, "aria-hidden": "true", children: icon !== null && icon !== void 0 ? icon : (jsx(AIStatusIndicator, { state: status, className: theme.indicatorStyles[status] })) })), isActive ? (jsx(Shimmer, { active: true, duration: shimmerDuration, spread: shimmerSpread, color: shimmerColor, highlightColor: shimmerHighlightColor, className: labelClass, children: jsxs(Fragment, { children: [label, activeSuffix] }) })) : (jsx("span", { className: labelClass, children: label })), shownDuration !== undefined && (
+            // aria-hidden: inside an aria-atomic live region a ticking timer would
+            // re-announce the whole label on every tick.
+            jsx("span", { className: theme.durationStyle, "aria-hidden": "true", children: formatDuration(shownDuration) }))] }));
+};
+const AgentStatus = React__default.forwardRef(({ mode = "status", status = "active", label, duration, startedAt, icon, indicator, wrap = false, activeSuffix = "…", shimmerDuration = 2, shimmerSpread = 16, shimmerColor = "color-mix(in oklab, var(--color-text-muted) 75%, transparent)", shimmerHighlightColor = "var(--color-text-primary)", live = "polite", steps, children, open, defaultOpen = false, onOpenChange, divider = true, className, theme: themeOverrides, ...rest }, ref) => {
+    // All hooks run unconditionally, before the mode branch.
+    const theme = useMemo(() => ({
+        ...agentStatusTheme,
+        ...themeOverrides,
+        stateStyles: {
+            ...agentStatusTheme.stateStyles,
+            ...themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.stateStyles,
+        },
+        indicatorStyles: {
+            ...agentStatusTheme.indicatorStyles,
+            ...themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.indicatorStyles,
+        },
+    }), [themeOverrides]);
+    const isReasoning = mode === "reasoning";
+    const isActive = status === "active";
+    // Ticks while active, freezes on settle. An explicit `duration` wins outright, so
+    // don't read the clock at all in that case — passing `startedAt` anyway would leave
+    // an interval re-rendering this row 10x/second only to discard every reading.
+    const ticked = useElapsedTime(duration === undefined ? startedAt : undefined, {
+        active: isActive,
+    });
+    const shownDuration = duration !== null && duration !== void 0 ? duration : ticked;
+    // A status row always carries an indicator; a reasoning summary drops it once
+    // settled, because the chevron carries the affordance from there. Either default
+    // yields to an explicit `indicator`, and a custom `icon` opts back in — you only
+    // pass an icon in order to see it.
+    const showIndicator = indicator !== null && indicator !== void 0 ? indicator : (isReasoning ? isActive || icon !== undefined : true);
+    const reactId = useId();
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const shouldReduceMotion = useReducedMotion();
+    const isControlled = open !== undefined;
+    const hasOnOpenChange = onOpenChange !== undefined;
+    const hasSteps = steps !== undefined;
+    const hasChildren = children !== undefined;
+    // Dev warnings belong in an effect, not the render body: `startedAt` re-renders this
+    // component ten times a second, and a render-body warning reprints on every tick.
+    // The deps are booleans on purpose — depending on `steps`/`children`/`onOpenChange`
+    // directly would re-fire on every parent render and bring the flood back.
+    useEffect(() => {
+        if (process.env.NODE_ENV === "production" || !isReasoning)
+            return;
+        /* eslint-disable no-console */
+        if (isControlled && defaultOpen) {
+            console.warn("[AgentStatus]: both `open` and `defaultOpen` were provided — `open` (controlled) wins.");
+        }
+        if (isControlled && !hasOnOpenChange) {
+            console.warn("[AgentStatus]: `open` was provided without `onOpenChange`, so the reasoning block can never be toggled. Pass `defaultOpen` for uncontrolled usage.");
+        }
+        if (hasSteps && hasChildren) {
+            console.warn("[AgentStatus]: both `steps` and `children` were provided — `steps` takes precedence.");
+        }
+        /* eslint-enable no-console */
+    }, [
+        isReasoning,
+        isControlled,
+        defaultOpen,
+        hasOnOpenChange,
+        hasSteps,
+        hasChildren,
+    ]);
+    // Shimmer + theme config shared with the nested rows a reasoning block renders.
+    // Memoized so a ticking summary duration doesn't churn the step list's props.
+    const sharedRowProps = useMemo(() => ({
+        activeSuffix,
+        shimmerDuration,
+        shimmerSpread,
+        shimmerColor,
+        shimmerHighlightColor,
+        theme: themeOverrides,
+    }), [
+        activeSuffix,
+        shimmerDuration,
+        shimmerSpread,
+        shimmerColor,
+        shimmerHighlightColor,
+        themeOverrides,
+    ]);
+    // steps => structured list of rows; otherwise raw children (prose / markdown
+    // / mixed). Memoized so it survives the 100ms duration ticks while active —
+    // only the summary row's duration should re-render, not the whole step list.
+    const reasoningBody = useMemo(() => {
+        if (steps) {
+            return (jsx("ol", { className: theme.stepsStyle, children: steps.map((step, index) => {
+                    var _a, _b;
+                    return (jsx("li", { className: theme.stepItemStyle, children: jsx(AgentStatus, { mode: "status", status: (_a = step.status) !== null && _a !== void 0 ? _a : "complete", label: step.label, duration: step.duration, wrap: true, live: "off", ...sharedRowProps }) }, (_b = step.id) !== null && _b !== void 0 ? _b : index));
+                }) }));
+        }
+        return children !== undefined ? (jsx("div", { className: theme.proseStyle, children: children })) : null;
+    }, [steps, children, theme, sharedRowProps]);
+    // ===== STATUS MODE: a single activity row =====
+    if (!isReasoning) {
+        return (jsx("div", { ref: ref, role: "status", "aria-live": live, "aria-atomic": "true", "data-state": status, className: cn(theme.baseStyle, theme.stateStyles[status], className), ...rest, children: jsx(StatusRowInner, { theme: theme, status: status, label: label, isActive: isActive, indicator: showIndicator, icon: icon, wrap: wrap, activeSuffix: activeSuffix, shimmerDuration: shimmerDuration, shimmerSpread: shimmerSpread, shimmerColor: shimmerColor, shimmerHighlightColor: shimmerHighlightColor, shownDuration: shownDuration }) }));
+    }
+    // ===== REASONING MODE: a collapsible disclosure of the same rows =====
+    const contentId = `${reactId}-reasoning`;
+    const triggerId = `${contentId}-trigger`;
+    const isOpen = isControlled ? open : uncontrolledOpen;
+    const instantTransition = shouldReduceMotion ? { duration: 0 } : undefined;
+    const toggle = () => {
+        const next = !isOpen;
+        if (!isControlled)
+            setUncontrolledOpen(next);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
+    };
+    return (jsxs("div", { ref: ref, "data-state": isOpen ? "open" : "closed", className: cn(theme.reasoningRootStyle, className), ...rest, children: [jsx("button", { id: triggerId, type: "button", className: theme.triggerStyle, "aria-expanded": isOpen, "aria-controls": isOpen ? contentId : undefined, onClick: toggle, children: jsxs("span", { className: theme.triggerContentStyle, children: [jsx("span", { className: cn(theme.baseStyle, theme.stateStyles[status]), "aria-live": live, "aria-atomic": "true", children: jsx(StatusRowInner, { theme: theme, status: status, label: label, isActive: isActive, indicator: showIndicator, icon: icon, wrap: false, activeSuffix: activeSuffix, shimmerDuration: shimmerDuration, shimmerSpread: shimmerSpread, shimmerColor: shimmerColor, shimmerHighlightColor: shimmerHighlightColor, shownDuration: shownDuration }) }), jsx(motion.span, { className: theme.chevronStyle, initial: false, animate: isOpen ? "open" : "closed", variants: createTriggerIconVariants(90), transition: instantTransition, "aria-hidden": "true", children: jsx(CaretRight, { className: "size-full" }) })] }) }), divider && jsx("div", { className: theme.dividerStyle, "aria-hidden": "true" }), jsx(AnimatePresence, { initial: false, children: isOpen && (jsx(motion.div, { id: contentId, role: "region", "aria-labelledby": triggerId, className: theme.contentStyle, "data-state": "open", initial: "collapsed", animate: "open", exit: "collapsed", variants: accordionAnimations, transition: instantTransition, children: jsx(motion.div, { className: theme.contentInnerStyle, initial: "collapsed", animate: "open", exit: "collapsed", variants: accordionContentAnimations, transition: instantTransition, children: reasoningBody }) })) })] }));
+});
+AgentStatus.displayName = "AgentStatus";
+
+export { AgentStatus };

package/dist/components/ai/AgentStatus/AgentStatus.theme.d.ts

@@ -0,0 +1,2 @@
+import type { AgentStatusTheme } from "./AgentStatus.types";
+export declare const agentStatusTheme: AgentStatusTheme;

package/dist/components/ai/AgentStatus/AgentStatus.theme.js

@@ -0,0 +1,37 @@
+const agentStatusTheme = {
+    baseStyle: "inline-flex min-w-0 items-center gap-2 text-sm",
+    iconStyle: "flex size-4 shrink-0 items-center justify-center",
+    // truncate is applied at the call site (only when `wrap` is off) so steps can wrap.
+    labelStyle: "min-w-0 font-medium",
+    durationStyle: "shrink-0 text-sm tabular-nums text-[var(--color-text-muted)]",
+    stateStyles: {
+        idle: "text-[var(--color-text-muted)]",
+        active: "text-[var(--color-text-secondary)]",
+        complete: "text-[var(--color-text-muted)]",
+        pending: "text-[var(--color-text-placeholder)]",
+        error: "text-[var(--color-danger)]",
+    },
+    indicatorStyles: {
+        idle: "text-[var(--color-text-muted)]",
+        active: "text-[var(--color-primary)]",
+        complete: "text-[var(--color-success)]",
+        pending: "text-[var(--color-text-placeholder)]",
+        error: "text-[var(--color-danger)]",
+    },
+    // --- reasoning mode: borderless inline disclosure ---
+    reasoningRootStyle: "w-full min-w-0",
+    triggerStyle: "flex w-full items-center py-2 text-left transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-primary)]",
+    triggerContentStyle: "inline-flex min-w-0 items-center gap-1.5",
+    chevronStyle: "inline-flex size-3.5 shrink-0 items-center justify-center text-[var(--color-text-muted)]",
+    dividerStyle: "h-px w-full bg-[var(--color-border)]",
+    contentStyle: "w-full min-w-0 overflow-hidden",
+    contentInnerStyle: "w-full min-w-0 pt-3",
+    stepsStyle: "space-y-2",
+    stepItemStyle: "min-w-0",
+    // Raw children (prose / markdown / mixed). flex-col so any child — a <p>, a
+    // MarkdownRenderer, or an inline-flex AgentStatus row — stacks vertically; the
+    // gap lives on the container, so it survives child margin resets.
+    proseStyle: "flex flex-col gap-3 text-sm leading-relaxed text-[var(--color-text-secondary)] [&_p]:m-0",
+};
+
+export { agentStatusTheme };

package/dist/components/ai/AgentStatus/AgentStatus.types.d.ts

@@ -0,0 +1,116 @@
+import React from "react";
+export type AgentStatusState = "idle" | "active" | "complete" | "pending" | "error";
+/**
+ * Presentation mode. `status` is a single activity row; `reasoning` turns that
+ * same row into a collapsible disclosure whose body holds steps and/or prose.
+ * The two axes are independent — a `reasoning` block is itself `active`,
+ * `complete`, etc.
+ */
+export type AgentStatusMode = "status" | "reasoning";
+/** A single reasoning step — a serializable AgentStatus row. */
+export interface AgentStatusStepData {
+    id?: React.Key;
+    label: React.ReactNode;
+    status?: AgentStatusState;
+    /** Elapsed or final step duration in seconds. */
+    duration?: number;
+}
+export interface AgentStatusTheme {
+    baseStyle: string;
+    iconStyle: string;
+    labelStyle: string;
+    durationStyle: string;
+    stateStyles: Record<AgentStatusState, string>;
+    indicatorStyles: Record<AgentStatusState, string>;
+    reasoningRootStyle: string;
+    triggerStyle: string;
+    triggerContentStyle: string;
+    chevronStyle: string;
+    dividerStyle: string;
+    contentStyle: string;
+    contentInnerStyle: string;
+    stepsStyle: string;
+    stepItemStyle: string;
+    proseStyle: string;
+}
+export interface AgentStatusThemeOverrides extends Omit<Partial<AgentStatusTheme>, "stateStyles" | "indicatorStyles"> {
+    stateStyles?: Partial<AgentStatusTheme["stateStyles"]>;
+    indicatorStyles?: Partial<AgentStatusTheme["indicatorStyles"]>;
+}
+export interface AgentStatusProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Single status row (default) or a collapsible reasoning disclosure. @default "status" */
+    mode?: AgentStatusMode;
+    /** Current execution state. Active labels shimmer; settled labels are static. */
+    status?: AgentStatusState;
+    /** Human-readable activity, for example "Thinking" or "Searching sources". */
+    label: React.ReactNode;
+    /**
+     * Elapsed or final duration in seconds. Takes precedence over `startedAt`, so
+     * pass it when the duration is authoritative (for example, returned by the server).
+     */
+    duration?: number;
+    /**
+     * Epoch milliseconds the activity began. The duration then ticks on its own
+     * while `status` is `"active"` and freezes the moment it settles — no timer
+     * wiring in the consumer. Ignored when `duration` is supplied.
+     */
+    startedAt?: number;
+    /** Optional icon. When omitted, the animated semantic indicator is rendered. */
+    icon?: React.ReactNode;
+    /**
+     * Show the leading status indicator (or custom `icon`). Set `false` for an
+     * icon-less, text-only row — the label then sits flush left.
+     *
+     * Defaults differ by mode: a `status` row always shows one, while a `reasoning`
+     * summary shows one only while active (the chevron carries the affordance once
+     * settled) — unless an `icon` is supplied, which opts back in. Pass explicitly
+     * to override either default.
+     * @default true in `status` mode; active-only in `reasoning` mode
+     */
+    indicator?: boolean;
+    /**
+     * Let the label wrap onto multiple lines instead of truncating. Steps render
+     * with this on; the standalone/summary row truncates by default.
+     * @default false
+     */
+    wrap?: boolean;
+    /** Text appended while active. @default "…" */
+    activeSuffix?: React.ReactNode;
+    /** Active shimmer cycle duration in seconds. @default 2 */
+    shimmerDuration?: number;
+    /** Width of the active shimmer highlight band. @default 16 */
+    shimmerSpread?: number;
+    /** Base color for the active shimmer text. */
+    shimmerColor?: string;
+    /** Highlight color for the active shimmer sweep. */
+    shimmerHighlightColor?: string;
+    /**
+     * Accessible announcement behavior. `"polite"` waits for a pause rather than
+     * interrupting, which is what a background activity warrants.
+     * @default "polite"
+     */
+    live?: "off" | "polite" | "assertive";
+    /**
+     * Structured reasoning steps. Rendered as a list of AgentStatus rows.
+     * Ignored unless `mode="reasoning"`.
+     */
+    steps?: AgentStatusStepData[];
+    /**
+     * Free-form reasoning body — prose, a `<MarkdownRenderer>`, or a mix of prose
+     * and `<AgentStatus>` rows. Rendered raw (not wrapped in a list), so paragraphs
+     * are valid. `steps` takes precedence when both are supplied.
+     */
+    children?: React.ReactNode;
+    /** Controlled expanded state (reasoning mode). */
+    open?: boolean;
+    /** Initial expanded state for uncontrolled reasoning usage. @default false */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Render the full-width hairline under the reasoning trigger.
+     * @default true
+     */
+    divider?: boolean;
+    className?: string;
+    theme?: AgentStatusThemeOverrides;
+}

package/dist/components/ai/AgentStatus/index.d.ts

@@ -0,0 +1,3 @@
+export { AgentStatus } from "./AgentStatus";
+export { agentStatusTheme } from "./AgentStatus.theme";
+export type { AgentStatusProps, AgentStatusState, AgentStatusMode, AgentStatusStepData, AgentStatusTheme, AgentStatusThemeOverrides, } from "./AgentStatus.types";

package/dist/components/ai/CodeBlock/CodeBlock.js

@@ -3,7 +3,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React__default, { useState, useMemo, useCallback, useRef } from 'react';
 import { Prism } from 'react-syntax-highlighter';
 import { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
-import { DocumentTextIcon, DocumentCheckIcon, DocumentDuplicateIcon } from '@heroicons/react/24/outline';
+import { FileText, ListChecks, Copy } from '@phosphor-icons/react';
 import { codeBlockTheme } from './CodeBlock.theme.js';
 import { LanguageIcon } from './LanguageIcon.js';
 import { cn } from '../../../utils/cn.js';
@@ -177,7 +177,7 @@ const CodeBlock = React__default.forwardRef(({ children, language = "text", show
     // `lineProps` starts counting from line 1 every time, regardless of
     // `showLineNumbers`.
     lineCounterRef.current = 0;
-    return (jsxs("div", { ref: ref, className: cn(mergedTheme.baseStyle, className), ...props, children: [showHeader && (jsxs("div", { className: mergedTheme.header, children: [jsx("div", { className: mergedTheme.headerLeft, children: filename && (jsxs(Fragment, { children: [jsx(DocumentTextIcon, { className: "size-4 text-[var(--color-text-muted)]" }), jsx("span", { className: mergedTheme.filename, children: filename })] })) }), jsxs("div", { className: mergedTheme.headerRight, children: [showLanguage && (jsxs("div", { className: "flex items-center gap-2", children: [jsx(LanguageIcon, { language: language, className: "size-4" }), jsx("span", { className: mergedTheme.languageLabel, children: displayLanguage })] })), copyable && (jsx("button", { onClick: handleCopy, className: cn(mergedTheme.copyButton, copied && mergedTheme.copySuccess), "aria-label": copied ? "Copied!" : "Copy code", title: copied ? "Copied!" : "Copy code", children: copied ? (jsx(DocumentCheckIcon, { className: "size-4" })) : (jsx(DocumentDuplicateIcon, { className: "size-4" })) }))] })] })), jsx("div", { className: mergedTheme.codeWrapper, style: {
+    return (jsxs("div", { ref: ref, className: cn(mergedTheme.baseStyle, className), ...props, children: [showHeader && (jsxs("div", { className: mergedTheme.header, children: [jsx("div", { className: mergedTheme.headerLeft, children: filename && (jsxs(Fragment, { children: [jsx(FileText, { className: "size-4 text-[var(--color-text-muted)]" }), jsx("span", { className: mergedTheme.filename, children: filename })] })) }), jsxs("div", { className: mergedTheme.headerRight, children: [showLanguage && (jsxs("div", { className: "flex items-center gap-2", children: [jsx(LanguageIcon, { language: language, className: "size-4" }), jsx("span", { className: mergedTheme.languageLabel, children: displayLanguage })] })), copyable && (jsx("button", { onClick: handleCopy, className: cn(mergedTheme.copyButton, copied && mergedTheme.copySuccess), "aria-label": copied ? "Copied!" : "Copy code", title: copied ? "Copied!" : "Copy code", children: copied ? (jsx(ListChecks, { className: "size-4" })) : (jsx(Copy, { className: "size-4" })) }))] })] })), jsx("div", { className: mergedTheme.codeWrapper, style: {
                     maxHeight: maxHeight,
                     overflowY: maxHeight ? "auto" : undefined,
                 }, children: jsx(Prism, { language: language, style: syntaxTheme === "dark" ? oneDark : oneLight, showLineNumbers: showLineNumbers, wrapLines: true, wrapLongLines: wrapLines, lineProps: lineProps, lineNumberStyle: {
@@ -192,7 +192,7 @@ const CodeBlock = React__default.forwardRef(({ children, language = "text", show
                         fontSize: "0.875rem",
                         lineHeight: "1.5",
                         background: "transparent",
-                    }, children: code }) }), !showHeader && copyable && (jsx("button", { onClick: handleCopy, className: cn("absolute top-2 right-2", mergedTheme.copyButton, copied && mergedTheme.copySuccess), "aria-label": copied ? "Copied!" : "Copy code", title: copied ? "Copied!" : "Copy code", children: copied ? (jsx(DocumentCheckIcon, { className: "size-4" })) : (jsx(DocumentDuplicateIcon, { className: "size-4" })) }))] }));
+                    }, children: code }) }), !showHeader && copyable && (jsx("button", { onClick: handleCopy, className: cn("absolute top-2 right-2", mergedTheme.copyButton, copied && mergedTheme.copySuccess), "aria-label": copied ? "Copied!" : "Copy code", title: copied ? "Copied!" : "Copy code", children: copied ? (jsx(ListChecks, { className: "size-4" })) : (jsx(Copy, { className: "size-4" })) }))] }));
 });
 CodeBlock.displayName = "CodeBlock";
 

package/dist/components/ai/CodeBlock/CodeBlock.theme.js

@@ -1,12 +1,12 @@
 const codeBlockTheme = {
     baseStyle: "relative rounded-[var(--codeblock-radius)] border border-[var(--color-border)] overflow-hidden bg-[var(--color-surface-sunken)] shadow-inner-real-sm",
-    header: "flex items-center justify-between px-3 py-1.5 bg-[var(--color-background-secondary)] border-b border-[var(--color-border)]",
+    header: "flex items-center justify-between px-3 py-1.5 bg-[var(--color-surface)] border-b border-[var(--color-border)]",
     headerLeft: "flex items-center gap-2 min-w-0 flex-1 ",
     headerRight: "flex items-center gap-2 flex-shrink-0",
     filename: "text-sm font-medium text-[var(--color-text-secondary)] truncate",
     languageLabel: "text-xs uppercase tracking-wider font-semibold text-[var(--color-text-muted)]",
     codeWrapper: "overflow-x-auto",
-    highlightedLine: " -mx-4 px-4 bg-[var(--color-primary-50)] border-l-2 border-l-[var(--color-primary)] dark:bg-[var(--color-neutral-400)]/5 dark:border-l-[var(--color-neutral-200)]",
+    highlightedLine: " -mx-4 px-4 bg-[var(--color-primary-50)] border-l-2 border-l-[var(--color-primary)] dark:bg-[var(--color-mono-400)]/5 dark:border-l-[var(--color-mono-200)]",
     diffAddition: "-mx-4 px-4 bg-[var(--color-success-50)] border-l-4 border-l-[var(--color-success)] dark:bg-[var(--color-success-600)]/20 dark:border-l-[var(--color-success-700)]",
     diffDeletion: "-mx-4 px-4 bg-[var(--color-danger-50)] border-l-4 border-l-[var(--color-danger)] dark:bg-[var(--color-danger-600)]/20 dark:border-l-[var(--color-danger-700)]",
     copyButton: "p-1.5 rounded-[calc(var(--radius-base)*0.75)] text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)] transition-colors cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)]",