@flamingo-stack/openframe-frontend-core 0.0.420 → 0.0.421-snapshot.20260713170448

package/src/stories/ChatTypingIndicator.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import type React from "react";
+
+import { ChatTypingIndicator } from "../components/chat/chat-typing-indicator";
+
+/**
+ * Three pulsing dots shown while the assistant reply streams in — the
+ * "Fae is typing" affordance under the message header. Also rendered
+ * inside `<ChatInput>` (size="sm") while a send is in flight.
+ */
+
+const plainDecorator = (Story: React.ComponentType) => (
+	<div style={{ maxWidth: 400, background: "var(--color-bg)" }} className="p-4">
+		<Story />
+	</div>
+);
+
+const meta = {
+	title: "Chat/ChatTypingIndicator",
+	component: ChatTypingIndicator,
+	tags: ["autodocs"],
+	parameters: {
+		docs: {
+			description: {
+				component:
+					"Pulsing three-dot typing indicator. Sizes sm/md/lg; optional 'Assistant is typing' label; dot color overridable via dotClassName.",
+			},
+		},
+	},
+	decorators: [plainDecorator],
+} satisfies Meta<typeof ChatTypingIndicator>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Default — medium dots, no label. */
+export const Default: Story = {};
+
+/** Small — as rendered inside ChatInput while a send is in flight. */
+export const Small: Story = { args: { size: "sm" } };
+
+/** Large dots. */
+export const Large: Story = { args: { size: "lg" } };
+
+/** With the "Assistant is typing" label. */
+export const WithText: Story = { args: { showText: true } };
+
+/** Muted dots via dotClassName override. */
+export const MutedDots: Story = {
+	args: { dotClassName: "bg-ods-text-secondary" },
+};

package/src/stories/ContextCompactionDisplay.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import type React from "react";
+
+import { ContextCompactionDisplay } from "../components/chat/context-compaction-display";
+
+/**
+ * Inline status pill for `context_compaction` message segments — shown when
+ * the conversation hits the context limit and earlier messages get
+ * summarized. `started` shows a dots loader, `completed` a green check.
+ */
+
+const plainDecorator = (Story: React.ComponentType) => (
+	<div style={{ maxWidth: 640, background: "var(--color-bg)" }} className="p-4">
+		<Story />
+	</div>
+);
+
+const meta = {
+	title: "Chat/ContextCompactionDisplay",
+	component: ContextCompactionDisplay,
+	tags: ["autodocs"],
+	parameters: {
+		docs: {
+			description: {
+				component:
+					"Renders a `context_compaction` message segment — 'Context limit reached…' with a dots loader while running, 'Earlier context summarized.' with a check once done.",
+			},
+		},
+	},
+	decorators: [plainDecorator],
+} satisfies Meta<typeof ContextCompactionDisplay>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** In progress — summarizing earlier messages. */
+export const Started: Story = {
+	args: { status: "started" },
+};
+
+/** Finished — earlier context summarized. */
+export const Completed: Story = {
+	args: { status: "completed" },
+};

package/src/stories/DashboardInfoCard.stories.tsx

@@ -1,5 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { DashboardInfoCard } from '../components/ui/dashboard-info-card'
+import { Tag } from '../components/ui/tag'
+import { MonitorIcon } from '../components/icons-v2-generated/devices/monitor-icon'
+import { FaceSmile01Icon } from '../components/icons-v2-generated/users/face-smile-01-icon'
 
 const meta = {
   title: 'UI/DashboardInfoCard',
@@ -30,11 +33,13 @@ const meta = {
     },
     progressSize: {
       control: { type: 'number' },
-      description: 'Ring diameter in px (number), or `{ base, md?, lg? }` for a responsive ring. Default 56.',
+      description: 'Tablet/desktop ring diameter in px (mobile always shrinks to 24px), or `{ base, md?, lg? }` for full control. Default `{ base: 24, md: 56 }` (Figma spec).',
     },
     href: { control: 'text', description: 'Navigation URL — renders as a Next.js Link with pointer cursor' },
     tooltip: { control: 'text', description: 'Tooltip content for the question-mark icon' },
     valueClassName: { control: 'text', description: 'Override className for the value text' },
+    titleTag: { control: false, description: 'Tag rendered in the title row after the title (Figma "status" variant)' },
+    icon: { control: false, description: 'Icon or image in a bordered square slot on the left (Figma "icon" variant)' },
   },
 } satisfies Meta<typeof DashboardInfoCard>
 
@@ -276,7 +281,6 @@ export const DeviceStatusesOverview: Story = {
         showProgress
         progressVariant="success"
         percentageDisplay="plain"
-        progressSize={{ base: 24, md: 56 }}
       />
       <DashboardInfoCard
         title="Offline Devices"
@@ -285,7 +289,6 @@ export const DeviceStatusesOverview: Story = {
         showProgress
         progressVariant="error"
         percentageDisplay="plain"
-        progressSize={{ base: 24, md: 56 }}
       />
       <DashboardInfoCard
         title="Pending Devices"
@@ -294,7 +297,6 @@ export const DeviceStatusesOverview: Story = {
         showProgress
         progressVariant="warning"
         percentageDisplay="plain"
-        progressSize={{ base: 24, md: 56 }}
       />
       <DashboardInfoCard
         title="Archived Devices"
@@ -303,7 +305,6 @@ export const DeviceStatusesOverview: Story = {
         showProgress
         progressVariant="info"
         percentageDisplay="plain"
-        progressSize={{ base: 24, md: 56 }}
       />
     </div>
   ),
@@ -311,16 +312,17 @@ export const DeviceStatusesOverview: Story = {
     docs: {
       description: {
         story:
-          'Matches the Figma "Devices Overview" — green/red/amber/grey rings with neutral percentages via `percentageDisplay="plain"`, and a responsive ring (`progressSize={{ base: 24, md: 56 }}`) that is 24px on mobile and 56px on tablet and desktop (from the `md` breakpoint up).',
+          'Matches the Figma "Devices Overview" — green/red/amber/grey rings with neutral percentages via `percentageDisplay="plain"`. The responsive ring (24px on mobile, 56px from the `md` breakpoint up) is now the default — no `progressSize` needed.',
       },
     },
   },
 }
 
 /**
- * `progressSize` controls the ring diameter (stroke scales with it). Left: the
- * 24px mobile spec. Right: the 56px desktop default. In production pass
- * `progressSize={{ base: 24, md: 56 }}` for the responsive switch.
+ * `progressSize` controls the tablet/desktop ring diameter (stroke scales with
+ * it); on mobile the ring always shrinks to the 24px Figma spec. Left: 24px.
+ * Right: the 56px default. Pass `{ base: n }` to pin one size at every
+ * breakpoint.
  */
 export const ProgressSizeComparison: Story = {
   render: () => (
@@ -347,6 +349,89 @@ export const ProgressSizeComparison: Story = {
   ),
 }
 
+/**
+ * Tag in the title row instead of a plain title — matches the Figma
+ * dashboard-card "status" variant (e.g. tickets by status).
+ */
+export const WithTitleTag: Story = {
+  args: {
+    value: 75,
+    titleTag: <Tag variant="outline" label="AI-Assistance" />,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The Figma "status" variant: `titleTag` renders a `Tag` in the title row. Here without a `title`; combine with one for "TITLE + tag" (they sit in a 4px-gap row).',
+      },
+    },
+  },
+}
+
+/**
+ * Title and tag together in the title row.
+ */
+export const WithTitleAndTag: Story = {
+  args: {
+    title: 'Tickets',
+    value: 75,
+    titleTag: <Tag variant="outline" label="Resolved" />,
+  },
+}
+
+/**
+ * Icon in a bordered square slot on the left — matches the Figma
+ * dashboard-card "icon" variant (32px box on mobile, 56px from `md` up).
+ */
+export const WithIcon: Story = {
+  args: {
+    title: 'Endpoints',
+    value: 4046,
+    icon: <MonitorIcon />,
+  },
+}
+
+/**
+ * An `<img>` in the icon slot — the node is stretched to fill the slot's
+ * content area, so images work the same as icon components.
+ */
+export const WithImage: Story = {
+  args: {
+    title: 'Organization',
+    value: 'Flamingo',
+    icon: <img src="https://github.com/flamingo-stack.png" alt="Flamingo" className="rounded-[2px] object-cover" />,
+  },
+}
+
+/**
+ * Every prop at once: icon slot, title + tag, sub-value, percentage,
+ * colored progress ring with wrap overflow, and navigation href.
+ */
+export const KitchenSink: Story = {
+  args: {
+    title: 'Devices',
+    titleTag: <Tag variant="outline" label="Live" />,
+    icon: <FaceSmile01Icon />,
+    value: 4046,
+    subValue: '12 sites',
+    percentage: 104,
+    showProgress: true,
+    progressVariant: 'warning',
+    percentageDisplay: 'tag',
+    progressOverflow: 'wrap',
+    progressSize: { base: 24, md: 56 },
+    href: '/devices',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'All props together: `icon`, `title` + `titleTag`, `value` + `subValue`, `percentage` as a warning `Tag` (`percentageDisplay="tag"`), a wrap-overflow warning ring (`progressOverflow="wrap"`), explicit responsive `progressSize`, and `href`. The `tooltip` prop (question-mark trigger) is shown separately in the WithTooltip story.',
+      },
+    },
+  },
+}
+
 /**
  * Multiple cards in a dashboard grid layout.
  */

package/src/stories/EmbeddableChat.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { within, userEvent } from 'storybook/test'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
 import React, { useMemo } from 'react'
 import {
   ChatRuntimeContext,
@@ -14,6 +15,10 @@ import type {
 } from '../components/chat/hooks/use-nats-chat-adapter'
 import type { SlashCommandSummary } from '../components/chat/hooks/use-slash-commands'
 import type { DialogItem } from '../components/chat/types/component.types'
+import type {
+  UnifiedChatState,
+  UnifiedChatMessage,
+} from '../components/chat/types/unified-chat-state.types'
 import type { MingoQuickAction } from '../components/chat/mingo-welcome'
 import {
   BracketCurlyIcon,
@@ -775,3 +780,157 @@ export const AgentChipsWinOverHost: Story = {
     },
   },
 }
+
+// =============================================================================
+// 10. Scripted Mingo conversation — Figma "Flamingo Website" node 4050:23837
+// =============================================================================
+
+// Simple gradient user-avatar as a self-contained data URI — no external asset
+// dependency in the story. Roman's `user` bubble shows it via `message.avatar`.
+const ROMAN_AVATAR =
+  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0MCcgaGVpZ2h0PSc0MCc+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSdnJyB4MT0nMCcgeTE9JzAnIHgyPScxJyB5Mj0nMSc+PHN0b3Agb2Zmc2V0PScwJyBzdG9wLWNvbG9yPScjNWVmYWYwJy8+PHN0b3Agb2Zmc2V0PScxJyBzdG9wLWNvbG9yPScjZmY2YjlkJy8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PGNpcmNsZSBjeD0nMjAnIGN5PScyMCcgcj0nMjAnIGZpbGw9J3VybCgjZyknLz48Y2lyY2xlIGN4PScyMCcgY3k9JzE2JyByPSc2LjUnIGZpbGw9JyMxNjE2MTYnIG9wYWNpdHk9JzAuODUnLz48cGF0aCBkPSdNOCAzNGMxLjUtNiA2LTkgMTItOXMxMC41IDMgMTIgOXonIGZpbGw9JyMxNjE2MTYnIG9wYWNpdHk9JzAuODUnLz48L3N2Zz4='
+
+// Fixed timestamp so the bubbles render a stable "2:47 PM" (matches the Figma
+// mock) instead of the current clock — 14:47 local → 2:47 PM.
+const TS_247 = new Date(2024, 0, 1, 14, 47, 0)
+
+// The exact PowerShell command from the Figma command block. Passed as
+// `toolTitle` (not a `command`/`script` parameter) so `getToolCallTitle`
+// renders this whole string verbatim — including the backticks — as the
+// collapsed command-block preview line.
+const RUN_SCRIPT_TITLE =
+  '`run_script` -- PowerShell: `Get-LocalUser | Where-Object { $_.PasswordRequired -eq $false -or $_.PasswordLastSet -lt (Get-Date).AddDays(-90) }`'
+
+const SCRIPTED_MESSAGES: UnifiedChatMessage[] = [
+  {
+    id: 'm1',
+    role: 'assistant',
+    name: 'Mingo',
+    authorType: 'mingo', // cyan name (Figma flamingo-colors/cyan)
+    content: 'How can I help?',
+    timestamp: TS_247,
+  },
+  {
+    id: 'm2',
+    role: 'user',
+    name: 'Roman Smith',
+    authorType: 'admin', // yellow name (Figma open-colors/yellow)
+    avatar: ROMAN_AVATAR,
+    content: 'Check machines with weak password',
+    timestamp: TS_247,
+  },
+  {
+    id: 'm3',
+    role: 'assistant',
+    name: 'Mingo',
+    authorType: 'mingo',
+    content: '', // body lives entirely in `segments`
+    timestamp: TS_247,
+    segments: [
+      {
+        type: 'tool_execution',
+        data: {
+          type: 'EXECUTING_TOOL', // → DotsLoader status + collapsed command block
+          integratedToolType: 'OPENFRAME',
+          toolFunction: 'run_script',
+          toolTitle: RUN_SCRIPT_TITLE,
+          parameters: {},
+        },
+      },
+    ],
+  },
+]
+
+/**
+ * Fully-stubbed `UnifiedChatState` factory. This is the "inject a static Mingo
+ * thread" path (`EmbeddableChat`'s `mingoState` prop): the panel renders this
+ * object directly and opens NO NATS subscription. Every action is a no-op so
+ * the scene stays read-only. `isLoading: true` + `streamingPhase: 'thinking'`
+ * drives the trailing "Mingo is working" dots loader under the command block.
+ */
+function createScriptedMingoState(): UnifiedChatState {
+  const noop = () => {}
+  const asyncNoop = async () => {}
+  return {
+    messages: SCRIPTED_MESSAGES,
+    isLoading: true,
+    streamingPhase: 'thinking',
+    sendMessage: asyncNoop,
+    stopMessage: noop,
+    clearMessages: noop,
+    discussRef: noop,
+    displayRef: noop,
+    // Footer model chip — anthropic mark + "Claude Opus 4.1" (Figma footer).
+    currentProvider: 'anthropic',
+    currentModelLabel: 'Claude Opus 4.1',
+    currentContextWindowMaxTokens: null,
+    currentInputTokens: null,
+    currentOutputTokens: null,
+    currentCacheHitRatePct: null,
+    currentUsageBreakdown: null,
+    // A single active dialog titled "New Chat" so the header shows that title
+    // and the ⋯ menu (rename/archive) renders like the mock.
+    dialogs: [{ id: 'd-scripted', title: 'New Chat' }],
+    activeDialogId: 'd-scripted',
+    selectDialog: noop,
+    startNewDialog: async () => null,
+    deleteDialog: asyncNoop,
+    renameDialog: asyncNoop,
+    archiveDialog: asyncNoop,
+    isDialogsLoading: false,
+    dialogsError: false,
+    reloadDialogs: noop,
+    isMessagesLoading: false,
+    hasMoreDialogs: false,
+    loadMoreDialogs: asyncNoop,
+    hasMoreMessages: false,
+    loadMoreMessages: asyncNoop,
+    approveRequest: asyncNoop,
+    rejectRequest: asyncNoop,
+    dialogTokenUsage: null,
+    connectionState: 'connected',
+  }
+}
+
+/**
+ * Scripted Mingo conversation reproducing Figma "Flamingo Website" node
+ * 4050:23837 (the marketing hero chat panel): Mingo greeting → Roman Smith's
+ * "Check machines with weak password" → a PowerShell `run_script` command block
+ * (executing) → Mingo working (dots).
+ *
+ * Rendered via the `mingoState` injection path with `shell="none"`, so the chat
+ * body sits inline inside our own 440-wide framed box (matching the Figma
+ * frame) with zero backend — no NATS, no fetch, fully static + read-only.
+ *
+ * Known deviations from the mock (the shipped component is the source of
+ * truth): author names render with a trailing ":" ; the command-block icon is
+ * the OpenFrame mark (the `ToolIcon` registry has no PowerShell glyph); the
+ * composer placeholder reads "Ask a question…"; and the trailing loader is the
+ * component's dots+phrase streaming indicator.
+ */
+export const ScriptedConversation: Story = {
+  parameters: { layout: 'fullscreen' },
+  render: () => (
+    // `shell="none"` expects the HOST to own the Radix Dialog context (in the
+    // app, AppLayoutDrawer does). Storybook is that host here, so we supply a
+    // headless `Dialog.Root` — it renders no DOM and does not portal, so the
+    // panel's visually-hidden `Dialog.Title` gets its context without altering
+    // the inline layout.
+    <DialogPrimitive.Root open>
+      <div className="fixed inset-0 z-[10] flex items-center justify-center bg-ods-bg p-6">
+        <div className="w-[440px] h-[560px] overflow-hidden rounded-[6px] border border-ods-border shadow-2xl">
+          <EmbeddableChat
+            shell="none"
+            defaultOpen
+            defaultActiveMode="mingo"
+            showInternalTrigger={false}
+            previewMode
+            mingoState={createScriptedMingoState()}
+            mingoDialogCapabilities={{ canRename: true, canArchive: true }}
+          />
+        </div>
+      </div>
+    </DialogPrimitive.Root>
+  ),
+  args: {},
+}

package/src/stories/ErrorMessageDisplay.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import type React from "react";
+
+import { ErrorMessageDisplay } from "../components/chat/error-message-display";
+
+/**
+ * Inline error card for `error` message segments — mono uppercase title
+ * with an alert icon; optional details expand under the chevron.
+ * `type` tints the icon: error (red) / warning (yellow) / info (grey).
+ */
+
+const plainDecorator = (Story: React.ComponentType) => (
+	<div style={{ maxWidth: 640, background: "var(--color-bg)" }} className="p-4">
+		<Story />
+	</div>
+);
+
+const meta = {
+	title: "Chat/ErrorMessageDisplay",
+	component: ErrorMessageDisplay,
+	tags: ["autodocs"],
+	parameters: {
+		docs: {
+			description: {
+				component:
+					"Renders an `error` message segment — collapsed mono title row, expandable details. Icon tint follows type: error / warning / info.",
+			},
+		},
+	},
+	decorators: [plainDecorator],
+} satisfies Meta<typeof ErrorMessageDisplay>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Error with expandable details. */
+export const WithDetails: Story = {
+	args: {
+		title: "Tool execution failed",
+		details:
+			"run_script exited with code 1: brew not found on this endpoint. Install Homebrew first or use the direct .dmg fallback.",
+	},
+};
+
+/** Title only — no chevron, row is not clickable. */
+export const TitleOnly: Story = {
+	args: { title: "Stream disconnected — retrying" },
+};
+
+/** Warning tint. */
+export const Warning: Story = {
+	args: {
+		type: "warning",
+		title: "Approval expired",
+		details: "The approval request timed out after 15 minutes and was cancelled automatically.",
+	},
+};
+
+/** Info tint. */
+export const Info: Story = {
+	args: {
+		type: "info",
+		title: "Session resumed",
+		details: "Reconnected to the stream; missed chunks were replayed from history.",
+	},
+};

package/src/stories/ThinkingDisplay.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import type React from "react";
+
+import { ThinkingDisplay } from "../components/chat/thinking-display";
+
+/**
+ * Collapsible "Thought" block for `thinking` message segments — muted
+ * markdown inside a bordered card, one line collapsed, expandable via the
+ * chevron. While the segment is still streaming the label reads "Thinking"
+ * and the collapse transition is disabled.
+ */
+
+const SHORT_THOUGHT =
+	"The user wants Slack installed. Homebrew is present, so `brew install --cask slack` is the cleanest path.";
+
+const LONG_THOUGHT = `The user asked to install Slack on their Mac.
+
+**Options considered:**
+
+1. Direct \`.dmg\` download — needs manual mounting and copying, hard to automate.
+2. Homebrew Cask — \`brew install --cask slack\`, idempotent and scriptable.
+3. Mac App Store via \`mas\` — requires the user to be signed in to the store.
+
+Homebrew is already present on this endpoint (verified in the device inventory), so option 2 is the cleanest path. The install needs client approval because it modifies installed software.`;
+
+const plainDecorator = (Story: React.ComponentType) => (
+	<div style={{ maxWidth: 640, background: "var(--color-bg)" }} className="p-4">
+		<Story />
+	</div>
+);
+
+const meta = {
+	title: "Chat/ThinkingDisplay",
+	component: ThinkingDisplay,
+	tags: ["autodocs"],
+	parameters: {
+		docs: {
+			description: {
+				component:
+					"Renders a `thinking` message segment — collapsed single-line 'Thought' card that expands to the full muted-markdown reasoning. Streaming state shows 'Thinking' with a dots loader.",
+			},
+		},
+	},
+	decorators: [plainDecorator],
+} satisfies Meta<typeof ThinkingDisplay>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Finished thought — collapsed to one line, expandable. */
+export const Thought: Story = {
+	args: { text: SHORT_THOUGHT },
+};
+
+/** Streaming — "Thinking" label, transition disabled while tokens arrive. */
+export const Streaming: Story = {
+	args: { text: SHORT_THOUGHT, isStreaming: true },
+};
+
+/** Long markdown thought — headings, list, inline code; expand to read. */
+export const LongMarkdown: Story = {
+	args: { text: LONG_THOUGHT },
+};