@signalflare-ai/ui 0.5.0 → 1.0.0

package/dist/sparkline-DdbeM4Ai.js

@@ -0,0 +1,108 @@
+"use client";
+import { t as Chart } from "./echart-DURZEyai.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/sparkline/sparkline.tsx
+/** Tailwind variant classes for Sparkline. */
+var SF_SPARKLINE_VARIANTS = { variant: {
+	line: "",
+	area: "",
+	bars: ""
+} };
+/** Default variants for Sparkline. */
+var SF_SPARKLINE_DEFAULT_VARIANTS = { variant: "line" };
+/**
+* Sparkline — a tiny inline chart intended for embedding in cards, tables, or
+* row-level cells. Renders without axes, grid, or legend by default.
+*
+* @example
+* ```tsx
+* <Sparkline echarts={echarts} data={[1, 3, 2, 5, 4, 6]} />
+* ```
+*/
+function Sparkline({ echarts, data, color, height = 32, width = 80, variant = "line", tooltip, isDarkMode, className }) {
+	const options = useMemo(() => {
+		const normalised = typeof data[0] === "number" ? data.map((v, i) => [i, v]) : data;
+		const strokeColor = color ?? "#086FFF";
+		const common = {
+			grid: {
+				left: 0,
+				right: 0,
+				top: 2,
+				bottom: 2
+			},
+			xAxis: {
+				type: "value",
+				show: false
+			},
+			yAxis: {
+				type: "value",
+				show: false,
+				scale: true
+			},
+			tooltip: tooltip ? { trigger: "axis" } : { show: false }
+		};
+		if (variant === "bars") return {
+			...common,
+			series: [{
+				type: "bar",
+				data: normalised,
+				itemStyle: { color: strokeColor },
+				barCategoryGap: "20%"
+			}]
+		};
+		return {
+			...common,
+			series: [{
+				type: "line",
+				smooth: true,
+				showSymbol: false,
+				data: normalised,
+				lineStyle: {
+					color: strokeColor,
+					width: 1.5
+				},
+				itemStyle: { color: strokeColor },
+				areaStyle: variant === "area" ? {
+					color: {
+						type: "linear",
+						x: 0,
+						y: 0,
+						x2: 0,
+						y2: 1,
+						colorStops: [{
+							offset: 0,
+							color: strokeColor
+						}, {
+							offset: 1,
+							color: "rgba(0,0,0,0)"
+						}]
+					},
+					opacity: .4
+				} : void 0
+			}]
+		};
+	}, [
+		data,
+		color,
+		variant,
+		tooltip
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			width,
+			height
+		},
+		className,
+		children: /* @__PURE__ */ jsx(Chart, {
+			echarts,
+			options,
+			height,
+			isDarkMode
+		})
+	});
+}
+//#endregion
+export { SF_SPARKLINE_VARIANTS as n, Sparkline as r, SF_SPARKLINE_DEFAULT_VARIANTS as t };
+
+//# sourceMappingURL=sparkline-DdbeM4Ai.js.map

package/dist/sparkline-DdbeM4Ai.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sparkline-DdbeM4Ai.js","names":[],"sources":["../src/components/sparkline/sparkline.tsx"],"sourcesContent":["import type { EChartsOption } from \"echarts\";\nimport type * as echarts from \"echarts/core\";\nimport { useMemo } from \"react\";\n\nimport { Chart } from \"../chart/echart\";\n\n/** Tailwind variant classes for Sparkline. */\nexport const SF_SPARKLINE_VARIANTS = {\n  variant: {\n    line: \"\",\n    area: \"\",\n    bars: \"\",\n  },\n} as const;\n\n/** Default variants for Sparkline. */\nexport const SF_SPARKLINE_DEFAULT_VARIANTS = {\n  variant: \"line\",\n} as const;\n\n/** Props for `Sparkline` */\nexport interface SparklineProps {\n  /**\n   * The ECharts core instance imported by the consumer.\n   * Passed in rather than imported directly so the consumer controls which\n   * ECharts modules are bundled (tree-shaking).\n   */\n  echarts: typeof echarts;\n  /**\n   * Series data. Accepts either plain numbers (evenly spaced on the x-axis) or\n   * `[x, y]` tuples when the x-axis has meaningful values.\n   */\n  data: number[] | [number, number][];\n  /** Stroke/fill color. Defaults to the first categorical palette entry. */\n  color?: string;\n  /** Height of the sparkline in pixels. Defaults to `32`. */\n  height?: number;\n  /** Width of the sparkline in pixels. Defaults to `80`. */\n  width?: number;\n  /** Visual variant. Defaults to `\"line\"`. */\n  variant?: \"line\" | \"area\" | \"bars\";\n  /** When `true`, enables a tooltip on hover (disabled by default). */\n  tooltip?: boolean;\n  /** When `true`, switches ECharts to its built-in dark theme */\n  isDarkMode?: boolean;\n  /** Additional CSS classes applied to the chart container */\n  className?: string;\n}\n\n/**\n * Sparkline — a tiny inline chart intended for embedding in cards, tables, or\n * row-level cells. Renders without axes, grid, or legend by default.\n *\n * @example\n * ```tsx\n * <Sparkline echarts={echarts} data={[1, 3, 2, 5, 4, 6]} />\n * ```\n */\nexport function Sparkline({\n  echarts,\n  data,\n  color,\n  height = 32,\n  width = 80,\n  variant = \"line\",\n  tooltip,\n  isDarkMode,\n  className,\n}: SparklineProps) {\n  const options = useMemo<EChartsOption>(() => {\n    const normalised: [number, number][] =\n      typeof data[0] === \"number\"\n        ? (data as number[]).map((v, i) => [i, v])\n        : (data as [number, number][]);\n\n    const strokeColor = color ?? \"#086FFF\";\n\n    const common = {\n      grid: { left: 0, right: 0, top: 2, bottom: 2 },\n      xAxis: { type: \"value\" as const, show: false },\n      yAxis: { type: \"value\" as const, show: false, scale: true },\n      tooltip: tooltip ? { trigger: \"axis\" as const } : { show: false },\n    };\n\n    if (variant === \"bars\") {\n      return {\n        ...common,\n        series: [\n          {\n            type: \"bar\",\n            data: normalised,\n            itemStyle: { color: strokeColor },\n            barCategoryGap: \"20%\",\n          },\n        ],\n      };\n    }\n\n    return {\n      ...common,\n      series: [\n        {\n          type: \"line\",\n          smooth: true,\n          showSymbol: false,\n          data: normalised,\n          lineStyle: { color: strokeColor, width: 1.5 },\n          itemStyle: { color: strokeColor },\n          areaStyle:\n            variant === \"area\"\n              ? {\n                  color: {\n                    type: \"linear\" as const,\n                    x: 0,\n                    y: 0,\n                    x2: 0,\n                    y2: 1,\n                    colorStops: [\n                      { offset: 0, color: strokeColor },\n                      { offset: 1, color: \"rgba(0,0,0,0)\" },\n                    ],\n                  },\n                  opacity: 0.4,\n                }\n              : undefined,\n        },\n      ],\n    };\n  }, [data, color, variant, tooltip]);\n\n  return (\n    <div style={{ width, height }} className={className}>\n      <Chart\n        echarts={echarts}\n        options={options}\n        height={height}\n        isDarkMode={isDarkMode}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAOA,IAAa,wBAAwB,EACnC,SAAS;CACP,MAAM;CACN,MAAM;CACN,MAAM;CACP,EACF;;AAGD,IAAa,gCAAgC,EAC3C,SAAS,QACV;;;;;;;;;;AAwCD,SAAgB,UAAU,EACxB,SACA,MACA,OACA,SAAS,IACT,QAAQ,IACR,UAAU,QACV,SACA,YACA,aACiB;CACjB,MAAM,UAAU,cAA6B;EAC3C,MAAM,aACJ,OAAO,KAAK,OAAO,WACd,KAAkB,KAAK,GAAG,MAAM,CAAC,GAAG,EAAE,CAAC,GACvC;EAEP,MAAM,cAAc,SAAS;EAE7B,MAAM,SAAS;GACb,MAAM;IAAE,MAAM;IAAG,OAAO;IAAG,KAAK;IAAG,QAAQ;IAAG;GAC9C,OAAO;IAAE,MAAM;IAAkB,MAAM;IAAO;GAC9C,OAAO;IAAE,MAAM;IAAkB,MAAM;IAAO,OAAO;IAAM;GAC3D,SAAS,UAAU,EAAE,SAAS,QAAiB,GAAG,EAAE,MAAM,OAAO;GAClE;AAED,MAAI,YAAY,OACd,QAAO;GACL,GAAG;GACH,QAAQ,CACN;IACE,MAAM;IACN,MAAM;IACN,WAAW,EAAE,OAAO,aAAa;IACjC,gBAAgB;IACjB,CACF;GACF;AAGH,SAAO;GACL,GAAG;GACH,QAAQ,CACN;IACE,MAAM;IACN,QAAQ;IACR,YAAY;IACZ,MAAM;IACN,WAAW;KAAE,OAAO;KAAa,OAAO;KAAK;IAC7C,WAAW,EAAE,OAAO,aAAa;IACjC,WACE,YAAY,SACR;KACE,OAAO;MACL,MAAM;MACN,GAAG;MACH,GAAG;MACH,IAAI;MACJ,IAAI;MACJ,YAAY,CACV;OAAE,QAAQ;OAAG,OAAO;OAAa,EACjC;OAAE,QAAQ;OAAG,OAAO;OAAiB,CACtC;MACF;KACD,SAAS;KACV,GACD,KAAA;IACP,CACF;GACF;IACA;EAAC;EAAM;EAAO;EAAS;EAAQ,CAAC;AAEnC,QACE,oBAAC,OAAD;EAAK,OAAO;GAAE;GAAO;GAAQ;EAAa;YACxC,oBAAC,OAAD;GACW;GACA;GACD;GACI;GACZ,CAAA;EACE,CAAA"}

package/dist/src/blocks/agent-harness/agent-harness.d.ts

@@ -79,15 +79,14 @@ export interface AgentHarnessProps extends ComponentProps<"div"> {
      */
     hitlPlacement?: SFAgentHarnessHitlPlacement;
     /**
-     * Show the mode badge in the header (mode name + color dot).
-     * @default true
-     */
-    showMode?: boolean;
-    /**
-     * Show the model badge in the header.
-     * @default true
+     * Group ephemeral activity (reasoning, observations, tool calls) into a
+     * single rolling {@link AiPartGroup} per assistant message. While
+     * streaming, the group shows a persistent title row with the latest few
+     * activity rows underneath. On completion (or scroll-back), the group
+     * collapses to a single frozen summary line.
+     * @default false
      */
-    showModel?: boolean;
+    groupActivity?: boolean;
     /**
      * Show token usage bar above the prompt input.
      * @default true
@@ -148,6 +147,28 @@ export interface AgentHarnessProps extends ComponentProps<"div"> {
         modeId: string;
         modeName: string;
     }[];
+    /**
+     * Available models for the model selector in the toolbar.
+     * When provided, a model selector will be shown in the prompt input toolbar.
+     */
+    availableModels?: {
+        value: string;
+        label?: string;
+    }[];
+    /**
+     * Rendering style for the mode picker.
+     * - `"select"` (default): compact dropdown
+     * - `"cycle"`: single click-to-cycle button
+     * @default "select"
+     */
+    modeVariant?: "select" | "cycle";
+    /**
+     * Rendering style for the model picker.
+     * - `"select"` (default): compact dropdown
+     * - `"cycle"`: single click-to-cycle button
+     * @default "select"
+     */
+    modelVariant?: "select" | "cycle";
 }
 /**
  * `AgentHarness` — a full-chrome agent chat UI block.
@@ -168,7 +189,7 @@ export interface AgentHarnessProps extends ComponentProps<"div"> {
  * }
  * ```
  */
-export declare function AgentHarness({ adapter, state: controlledState, onSendMessage, onApproveToolCall, onAnswerQuestion, onApprovePlan, onAbort, hitlPlacement, showMode, showModel, showUsage, showTaskList, placeholder, header, footer, emptyState, renderSubmit, suggestions, onSuggestionClick, allowAttachments, allowSpeech, availableModes, className, ...props }: AgentHarnessProps): import("react/jsx-runtime").JSX.Element;
+export declare function AgentHarness({ adapter, state: controlledState, onSendMessage, onApproveToolCall, onAnswerQuestion, onApprovePlan, onAbort, hitlPlacement, groupActivity, showUsage, showTaskList, placeholder, header, footer, emptyState, renderSubmit, suggestions, onSuggestionClick, allowAttachments, allowSpeech, availableModes, availableModels, modeVariant, modelVariant, className, ...props }: AgentHarnessProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace AgentHarness {
     var displayName: string;
 }

package/dist/src/blocks/agent-harness/agent-harness.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"agent-harness.d.ts","sourceRoot":"","sources":["../../../../src/blocks/agent-harness/agent-harness.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"agent-harness.d.ts","sourceRoot":"","sources":["../../../../src/blocks/agent-harness/agent-harness.tsx"],"names":[],"mappings":"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"}

package/dist/src/blocks/agent-harness/agent-harness.stories.tsx

@@ -0,0 +1,114 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useEffect, useState } from "react";
+
+import {
+  AgentHarness,
+  type HarnessAdapter,
+  type HarnessEvent,
+} from "./agent-harness";
+
+function createMockAdapter(): HarnessAdapter {
+  const listeners = new Set<(event: HarnessEvent) => void>();
+
+  return {
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    async sendMessage({ content }) {
+      const id = crypto.randomUUID();
+      listeners.forEach((listener) =>
+        listener({
+          type: "message_start",
+          messageId: id,
+          role: "assistant",
+        } as HarnessEvent)
+      );
+      listeners.forEach((listener) =>
+        listener({
+          type: "message_update",
+          messageId: id,
+          contentDelta: `You said: ${content}`,
+        } as HarnessEvent)
+      );
+      listeners.forEach((listener) =>
+        listener({ type: "message_end", messageId: id } as HarnessEvent)
+      );
+    },
+  };
+}
+
+function AgentHarnessFullStory() {
+  const [adapter] = useState(() => createMockAdapter());
+
+  useEffect(() => {
+    adapter.sendMessage({ content: "Build an AI agent dashboard" });
+  }, [adapter]);
+
+  return (
+    <div style={{ height: 560 }}>
+      <AgentHarness
+        adapter={adapter}
+        hitlPlacement="inline"
+        showMode
+        showModel
+        showUsage
+        showTaskList
+        placeholder="Type a message…"
+        suggestions={[
+          "Refactor the auth module",
+          "Explain the JWT flow",
+          "Add refresh token rotation",
+        ]}
+        footer="AI can make mistakes. Review changes before applying."
+      />
+    </div>
+  );
+}
+
+function AgentHarnessMinimalStory() {
+  const [adapter] = useState(() => createMockAdapter());
+
+  useEffect(() => {
+    adapter.sendMessage({ content: "Hello" });
+  }, [adapter]);
+
+  return (
+    <div style={{ height: 400 }}>
+      <AgentHarness
+        adapter={adapter}
+        hitlPlacement="inline"
+        showMode={false}
+        showModel={false}
+        showUsage={false}
+        showTaskList={false}
+        placeholder="Send a message…"
+        emptyState={
+          <div className="flex flex-col items-center gap-2">
+            <span className="text-3xl">🤖</span>
+            <p className="text-sm text-sf-subtle">Ready when you are.</p>
+          </div>
+        }
+      />
+    </div>
+  );
+}
+
+const meta: Meta<any> = {
+  title: "Blocks/AgentHarness",
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export default meta;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Story = StoryObj<any>;
+
+export const Full: Story = {
+  render: () => <AgentHarnessFullStory />,
+};
+
+export const Minimal: Story = {
+  render: () => <AgentHarnessMinimalStory />,
+};

package/dist/src/blocks/agent-harness/agent-harness.tsx

@@ -31,6 +31,7 @@ import {
   useAgentHarness,
 } from "../../components/use-agent-harness";
 import {
+  AiPartGroup,
   AiApproval,
   AiConversation,
   AiConversationScrollButton,
@@ -45,13 +46,17 @@ import {
   AiResponse,
   AiSubagent,
   AiTaskList,
+  AiToolCall,
   AiToolCallGroup,
   AiUsageBar,
   Button,
   PromptInput,
   PromptInputAttachButton,
   PromptInputBackLayer,
-  PromptInputModeSelector,
+  PromptInputModeCycle,
+  PromptInputModeSelect,
+  PromptInputModelCycle,
+  PromptInputModelSelect,
   PromptInputSpeechButton,
   PromptInputSubmit,
   PromptInputTextarea,
@@ -160,15 +165,14 @@ export interface AgentHarnessProps extends ComponentProps<"div"> {
    */
   hitlPlacement?: SFAgentHarnessHitlPlacement;
   /**
-   * Show the mode badge in the header (mode name + color dot).
-   * @default true
-   */
-  showMode?: boolean;
-  /**
-   * Show the model badge in the header.
-   * @default true
+   * Group ephemeral activity (reasoning, observations, tool calls) into a
+   * single rolling {@link AiPartGroup} per assistant message. While
+   * streaming, the group shows a persistent title row with the latest few
+   * activity rows underneath. On completion (or scroll-back), the group
+   * collapses to a single frozen summary line.
+   * @default false
    */
-  showModel?: boolean;
+  groupActivity?: boolean;
   /**
    * Show token usage bar above the prompt input.
    * @default true
@@ -226,16 +230,29 @@ export interface AgentHarnessProps extends ComponentProps<"div"> {
    * When provided, a mode selector will be shown in the prompt input toolbar.
    */
   availableModes?: { modeId: string; modeName: string }[];
+  /**
+   * Available models for the model selector in the toolbar.
+   * When provided, a model selector will be shown in the prompt input toolbar.
+   */
+  availableModels?: { value: string; label?: string }[];
+  /**
+   * Rendering style for the mode picker.
+   * - `"select"` (default): compact dropdown
+   * - `"cycle"`: single click-to-cycle button
+   * @default "select"
+   */
+  modeVariant?: "select" | "cycle";
+  /**
+   * Rendering style for the model picker.
+   * - `"select"` (default): compact dropdown
+   * - `"cycle"`: single click-to-cycle button
+   * @default "select"
+   */
+  modelVariant?: "select" | "cycle";
 }
 
 // ─── Internal helpers ─────────────────────────────────────────────────────────
 
-function getModelDisplayName(modelId?: string, modelName?: string): string {
-  if (modelName) return modelName;
-  if (!modelId) return "";
-  return modelId.split("/").pop() ?? modelId;
-}
-
 /** Render a single OM activity as an AiReasoning with the right icon/label. */
 function OmActivityView({ activity }: { activity: AgentOMActivity }) {
   const isObservation = activity.type === "observation";
@@ -407,6 +424,7 @@ function AssistantMessageBody({
   message,
   harnessState,
   hitlPlacement,
+  groupActivity = false,
   onApprove,
   onReject,
   onAnswer,
@@ -416,6 +434,7 @@ function AssistantMessageBody({
   message: AgentMessage;
   harnessState: AgentHarnessState;
   hitlPlacement: SFAgentHarnessHitlPlacement;
+  groupActivity?: boolean;
   onApprove: () => void;
   onReject: () => void;
   onAnswer: (questionId: string, answer: string) => void;
@@ -453,25 +472,77 @@ function AssistantMessageBody({
 
   const showInlineHitl = hitlPlacement === "inline" || hitlPlacement === "both";
 
+  // Top-level tool call parts (no subagent)
+  const topLevelToolCalls = message.toolCallIds
+    .map((id) => harnessState.toolCalls[id])
+    .filter((tc) => tc != null);
+
+  const hasActivity =
+    thinkingBlocks.length > 0 ||
+    omActivities.length > 0 ||
+    topLevelToolCalls.length > 0;
+
   return (
     <div className="flex flex-col gap-2">
-      {/* Thinking / reasoning blocks */}
-      {thinkingBlocks.map((t) => (
-        <AiReasoning
-          key={t.id}
-          part={{ text: t.text }}
-          isStreaming={t.isStreaming}
-          icon={SparkleIcon}
-          label="Reasoning"
-          streamingLabel="Thinking..."
-          variant="default"
-        />
-      ))}
-
-      {/* OM activities (observations / reflections) */}
-      {omActivities.map((a) => (
-        <OmActivityView key={a.id} activity={a} />
-      ))}
+      {groupActivity && hasActivity ? (
+        <AiPartGroup
+          complete={!message.isStreaming}
+          groupKey={`${message.id}:activity`}
+          max={3}
+        >
+          {thinkingBlocks.map((t) => (
+            <AiReasoning
+              key={t.id}
+              part={{ text: t.text }}
+              isStreaming={t.isStreaming}
+              variant="ephemeral"
+            />
+          ))}
+          {omActivities.map((a) => (
+            <AiReasoning
+              key={a.id}
+              part={{ text: a.text || a.type }}
+              isStreaming={a.status === "streaming"}
+              variant="ephemeral"
+            />
+          ))}
+          {topLevelToolCalls.map((tc) => (
+            <AiToolCall
+              key={tc.id}
+              part={{
+                toolCallId: tc.id,
+                toolName: tc.toolName,
+                state: tc.state,
+                input: tc.input,
+                output: tc.output,
+                errorText: tc.errorText,
+              }}
+              duration={tc.durationMs}
+              variant="ephemeral"
+            />
+          ))}
+        </AiPartGroup>
+      ) : (
+        <>
+          {/* Thinking / reasoning blocks */}
+          {thinkingBlocks.map((t) => (
+            <AiReasoning
+              key={t.id}
+              part={{ text: t.text }}
+              isStreaming={t.isStreaming}
+              icon={SparkleIcon}
+              label="Reasoning"
+              streamingLabel="Thinking..."
+              variant="default"
+            />
+          ))}
+
+          {/* OM activities (observations / reflections) */}
+          {omActivities.map((a) => (
+            <OmActivityView key={a.id} activity={a} />
+          ))}
+        </>
+      )}
 
       {/* Response text */}
       {message.content && (
@@ -480,8 +551,8 @@ function AssistantMessageBody({
         </AiResponse>
       )}
 
-      {/* Tool calls (top-level, no subagent) */}
-      {message.toolCallIds.length > 0 && (
+      {/* Tool calls (top-level, no subagent) — only when not grouped */}
+      {!groupActivity && message.toolCallIds.length > 0 && (
         <ToolCallsView
           toolCallIds={message.toolCallIds}
           toolCalls={harnessState.toolCalls}
@@ -636,8 +707,7 @@ export function AgentHarness({
   onApprovePlan,
   onAbort,
   hitlPlacement = SF_AGENT_HARNESS_DEFAULT_VARIANTS.hitlPlacement,
-  showMode = true,
-  showModel = true,
+  groupActivity = false,
   showUsage = true,
   showTaskList = true,
   placeholder = "Ask anything...",
@@ -650,6 +720,9 @@ export function AgentHarness({
   allowAttachments = false,
   allowSpeech = false,
   availableModes,
+  availableModels,
+  modeVariant = "select",
+  modelVariant = "select",
   className,
   ...props
 }: AgentHarnessProps) {
@@ -881,6 +954,7 @@ export function AgentHarness({
                     message={msg}
                     harnessState={state}
                     hitlPlacement={hitlPlacement}
+                    groupActivity={groupActivity}
                     onApprove={handleApprove}
                     onReject={handleReject}
                     onAnswer={handleAnswer}
@@ -1047,33 +1121,40 @@ export function AgentHarness({
             <PromptInputTools>
               {allowAttachments && <PromptInputAttachButton />}
               {allowSpeech && <PromptInputSpeechButton />}
-              {availableModes && availableModes.length > 0 ? (
-                <PromptInputModeSelector
-                  modes={availableModes}
-                  value={state.modeId}
-                  onChange={selectMode}
-                />
-              ) : (
-                (showMode || showModel) &&
-                (state.modeName || state.modelId) && (
-                  <span className="flex items-center gap-1.5 text-[11px] text-sf-subtle">
-                    {showMode && state.modeName && (
-                      <span className="font-medium">{state.modeName}</span>
-                    )}
-                    {showMode &&
-                      state.modeName &&
-                      showModel &&
-                      state.modelId && (
-                        <span className="text-sf-inactive">·</span>
-                      )}
-                    {showModel && state.modelId && (
-                      <span>
-                        {getModelDisplayName(state.modelId, state.modelName)}
-                      </span>
-                    )}
-                  </span>
-                )
-              )}
+              {availableModes &&
+                availableModes.length > 0 &&
+                (modeVariant === "cycle" ? (
+                  <PromptInputModeCycle
+                    options={availableModes.map((m) => ({
+                      value: m.modeId,
+                      label: m.modeName,
+                    }))}
+                    value={state.modeId}
+                    onChange={selectMode}
+                  />
+                ) : (
+                  <PromptInputModeSelect
+                    options={availableModes.map((m) => ({
+                      value: m.modeId,
+                      label: m.modeName,
+                    }))}
+                    value={state.modeId}
+                    onChange={selectMode}
+                  />
+                ))}
+              {availableModels &&
+                availableModels.length > 0 &&
+                (modelVariant === "cycle" ? (
+                  <PromptInputModelCycle
+                    options={availableModels}
+                    value={state.modelId}
+                  />
+                ) : (
+                  <PromptInputModelSelect
+                    options={availableModels}
+                    value={state.modelId}
+                  />
+                ))}
             </PromptInputTools>
             {renderSubmit ? (
               renderSubmit(state)

package/dist/src/blocks/commander/commander.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import {
+  CommanderFullDemo as Demo_CommanderFullDemo,
+  CommanderTimelineOnlyDemo as Demo_CommanderTimelineOnlyDemo,
+  CommanderCardsOnlyDemo as Demo_CommanderCardsOnlyDemo,
+} from "../../../../docs/src/components/demos/CommanderDemo";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const meta: Meta<any> = {
+  title: "Blocks/Commander",
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export default meta;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Story = StoryObj<any>;
+
+export const Full: Story = {
+  render: () => <Demo_CommanderFullDemo />,
+};
+
+export const TimelineOnly: Story = {
+  render: () => <Demo_CommanderTimelineOnlyDemo />,
+};
+
+export const CardsOnly: Story = {
+  render: () => <Demo_CommanderCardsOnlyDemo />,
+};