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

package/src/stories/ApprovalRequestMessageClient.stories.tsx

@@ -1,89 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import type React from "react";
-
-import { ApprovalRequestMessage } from "../components/chat/approval-request-message";
-import type { ApprovalRequestData } from "../components/chat/types";
-
-/**
- * CLIENT (end-user Fae desktop app) variant of the single-command approval
- * card — Figma node 203-11947 ("fae-approval-block").
- *
- * Same component and props as the Admin card, driven by `variant="client"`.
- * The end client sees ONLY the BE-generated title (`explanation`) plus the
- * Approve/Reject buttons, or the full-text resolved pill
- * ("APPROVED BY JOHN SMITH"). The raw command is never rendered.
- */
-
-const baseData: ApprovalRequestData = {
-	command: 'brew install --cask slack',
-	requestId: "req-client-1",
-	approvalType: "CLIENT",
-	// BE-generated human-readable title — the ONLY content the client sees.
-	explanation: "Install Slack via Homebrew Cask on macOS",
-};
-
-const plainDecorator =
-	(width?: number) => (Story: React.ComponentType) => (
-		<div style={{ maxWidth: width ?? 400, background: "var(--color-bg)" }}>
-			<Story />
-		</div>
-	);
-
-const meta = {
-	title: "Chat/Client/ApprovalRequestMessage",
-	component: ApprovalRequestMessage,
-	tags: ["autodocs"],
-	args: { variant: "client" },
-	parameters: {
-		docs: {
-			description: {
-				component:
-					"CLIENT (Fae end-user) single-command approval card — title-only with Approve/Reject or a full-text status pill ('APPROVED BY {NAME}'). The raw command is never shown. Gated by variant='client' (Figma 203-11947).",
-			},
-		},
-	},
-	decorators: [plainDecorator()],
-} satisfies Meta<typeof ApprovalRequestMessage>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/** Pending — BE title + Approve / Reject buttons. No command block. */
-export const Pending: Story = {
-	args: {
-		data: baseData,
-		status: "pending",
-		onApprove: () => {},
-		onReject: () => {},
-	},
-};
-
-/** Approved with resolver — green "APPROVED BY JOHN SMITH" pill. */
-export const ApprovedByUser: Story = {
-	args: { data: baseData, status: "approved", resolvedByName: "John Smith" },
-};
-
-/** Approved without a resolver name — plain "APPROVED" pill (system action). */
-export const Approved: Story = {
-	args: { data: baseData, status: "approved" },
-};
-
-/** Rejected with resolver — red "REJECTED BY JOHN SMITH" pill. */
-export const RejectedByUser: Story = {
-	args: { data: baseData, status: "rejected", resolvedByName: "John Smith" },
-};
-
-/** Cancelled — grey status pill. */
-export const Cancelled: Story = {
-	args: { data: baseData, status: "cancelled" },
-};
-
-/** Missing BE title — falls back to the "Approval required" placeholder. */
-export const NoTitleFallback: Story = {
-	args: {
-		data: { ...baseData, explanation: undefined },
-		status: "pending",
-		onApprove: () => {},
-		onReject: () => {},
-	},
-};

package/src/stories/ChatMessageEnhanced.stories.tsx

@@ -1,219 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-import type React from "react";
-
-import { ChatMessageEnhanced } from "../components/chat/chat-message-enhanced";
-import { ChatTypingIndicator } from "../components/chat/chat-typing-indicator";
-import type { MessageSegment } from "../components/chat/types";
-
-/**
- * `<ChatMessageEnhanced>` — THE chat message renderer used by
- * ChatMessageList / EmbeddableChat. Renders the avatar + name + timestamp
- * header (Fae pink / Mingo cyan / user grey) and every message-segment type:
- * text (markdown), thinking, tool_execution, approval_request/batch, error,
- * context_compaction.
- *
- * The Fae conversation scenes reproduce the Fae desktop-app flow: greeting →
- * user request → approval block → typing dots (Figma "fae-approval-block").
- */
-
-// Fixed time-of-day so the header always reads "2:47 PM" — messages dated
-// today render time-only (see formatMessageTimestamp).
-const at247 = () => {
-	const d = new Date();
-	d.setHours(14, 47, 0, 0);
-	return d;
-};
-
-const panelDecorator = (Story: React.ComponentType) => (
-	<div
-		style={{ maxWidth: 640, background: "var(--color-bg)" }}
-		className="p-[var(--spacing-system-m)]"
-	>
-		<Story />
-	</div>
-);
-
-const meta = {
-	title: "Chat/ChatMessageEnhanced",
-	component: ChatMessageEnhanced,
-	tags: ["autodocs"],
-	parameters: {
-		docs: {
-			description: {
-				component:
-					"Single chat message row — avatar + colored author name + timestamp header, plus the full segment renderer (text/thinking/tool/approval/error/compaction). Used by ChatMessageList in both the admin (Mingo) and client (Fae) chats.",
-			},
-		},
-	},
-	decorators: [panelDecorator],
-} satisfies Meta<typeof ChatMessageEnhanced>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/** Assistant (Fae) text message — pink mono name + timestamp. */
-export const AssistantFae: Story = {
-	args: {
-		role: "assistant",
-		name: "Fae",
-		content: "Good morning! How can I help you today?",
-		timestamp: at247(),
-	},
-};
-
-/** Assistant (Mingo) text message — cyan mono name. */
-export const AssistantMingo: Story = {
-	args: {
-		role: "assistant",
-		name: "Mingo",
-		assistantType: "mingo",
-		content: "I've pulled the device list for Acme Corp — 3 endpoints are offline.",
-		timestamp: at247(),
-	},
-};
-
-/** User message — grey mono name, no avatar block until user avatars ship. */
-export const UserMessage: Story = {
-	args: {
-		role: "user",
-		name: "John Smith",
-		content: "hey can u install slack on my mac",
-		timestamp: at247(),
-	},
-};
-
-/**
- * Fae flow, step 1 — greeting, user request, and the assistant "typing"
- * row (empty message + `<ChatTypingIndicator>`, as the Fae desktop host
- * renders it while the reply streams in).
- */
-export const FaeConversationTyping: Story = {
-	args: { role: "assistant", content: "" },
-	render: () => (
-		<div className="flex flex-col">
-			<ChatMessageEnhanced
-				role="assistant"
-				name="Fae"
-				content="Good morning! How can I help you today?"
-				timestamp={at247()}
-			/>
-			<ChatMessageEnhanced
-				role="user"
-				name="John Smith"
-				content="hey can u install slack on my mac"
-				timestamp={at247()}
-			/>
-			<ChatMessageEnhanced role="assistant" name="Fae" content="" isTyping timestamp={at247()} />
-			<ChatTypingIndicator size="sm" />
-		</div>
-	),
-};
-
-const approvedSegments: MessageSegment[] = [
-	{ type: "text", text: "On it! Just need your quick approval here." },
-	{
-		type: "approval_request",
-		data: {
-			command: "brew install --cask slack",
-			requestId: "req-1",
-			approvalType: "CLIENT",
-			explanation: "Install Slack via Homebrew Cask on macOS",
-		},
-		status: "approved",
-		resolvedByName: "John Smith",
-	},
-];
-
-/**
- * Fae flow, step 2 — the reply carries an `approval_request` segment
- * rendered as the CLIENT card with the resolved "APPROVED BY JOHN SMITH"
- * pill (`approvalVariant="client"`), then Fae keeps typing.
- */
-export const FaeConversationApproved: Story = {
-	args: { role: "assistant", content: "" },
-	render: () => (
-		<div className="flex flex-col">
-			<ChatMessageEnhanced
-				role="assistant"
-				name="Fae"
-				content="Good morning! How can I help you today?"
-				timestamp={at247()}
-			/>
-			<ChatMessageEnhanced
-				role="user"
-				name="John Smith"
-				content="hey can u install slack on my mac"
-				timestamp={at247()}
-			/>
-			<ChatMessageEnhanced
-				role="assistant"
-				name="Fae"
-				content={approvedSegments}
-				approvalVariant="client"
-				timestamp={at247()}
-			/>
-			<ChatMessageEnhanced role="assistant" name="Fae" content="" isTyping timestamp={at247()} />
-			<ChatTypingIndicator size="sm" />
-		</div>
-	),
-};
-
-/** Pending approval inside a message — Approve/Reject buttons (client card). */
-export const PendingApprovalSegment: Story = {
-	args: {
-		role: "assistant",
-		name: "Fae",
-		approvalVariant: "client",
-		timestamp: at247(),
-		content: [
-			{ type: "text", text: "On it! Just need your quick approval here." },
-			{
-				type: "approval_request",
-				data: {
-					command: "brew install --cask slack",
-					requestId: "req-2",
-					approvalType: "CLIENT",
-					explanation: "Install Slack via Homebrew Cask on macOS",
-				},
-				status: "pending",
-				onApprove: () => {},
-				onReject: () => {},
-			},
-		] satisfies MessageSegment[],
-	},
-};
-
-/** Every remaining segment type in one message — thinking, tool execution, context compaction, error. */
-export const AllSegmentTypes: Story = {
-	args: {
-		role: "assistant",
-		name: "Fae",
-		timestamp: at247(),
-		content: [
-			{
-				type: "thinking",
-				text: "The user wants Slack installed. Homebrew is present on the endpoint, so `brew install --cask slack` is the cleanest path.",
-			},
-			{ type: "text", text: "Installing Slack now." },
-			{
-				type: "tool_execution",
-				data: {
-					type: "EXECUTED_TOOL",
-					integratedToolType: "OPENFRAME_RMM",
-					toolFunction: "run_script",
-					toolTitle: "Install Slack via Homebrew Cask",
-					parameters: { command: "brew install --cask slack" },
-					result: "🍺  slack was successfully installed!",
-					success: true,
-				},
-			},
-			{ type: "context_compaction", status: "completed" },
-			{
-				type: "error",
-				title: "Notification delivery failed",
-				details: "Slack webhook returned 429 — the completion ping was skipped. The install itself succeeded.",
-			},
-			{ type: "text", text: "Done — Slack is installed and ready to use." },
-		] satisfies MessageSegment[],
-	},
-};

package/src/stories/ChatTypingIndicator.stories.tsx

@@ -1,51 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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/ErrorMessageDisplay.stories.tsx

@@ -1,66 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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 },
-};