@flamingo-stack/openframe-frontend-core 0.0.351 → 0.0.352-snapshot.20260701170615

package/src/stories/ApprovalBatchMessage.stories.tsx

@@ -0,0 +1,169 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import type React from "react";
+
+import { ApprovalBatchMessage } from "../components/chat/approval-batch-message";
+import type {
+	ApprovalBatchData,
+	ApprovalBatchExecutionState,
+	PendingToolCallData,
+} from "../components/chat/types";
+
+/**
+ * The "Command Block" from Figma (open-design-system, node 1092-2807).
+ *
+ * A single command/tool call the AI wants to run, rendered as an approvable
+ * card: a command title line, an expandable body with the call arguments
+ * (RunAsUser, timeoutSeconds, …) and — once executed — a Result block. The
+ * footer flips between Approve/Reject buttons (pending) and a resolved status
+ * tag ("Approved / Rejected / Cancelled by {name}").
+ *
+ * Click a row to expand/collapse its body.
+ */
+
+const LONG_COMMAND = `Get-CimInstance Win32_Process |
+  Select-Object ProcessId, Name, Path, CommandLine |
+  Where-Object { $_.Path -like 'C:\\Users\\Public\\*' }`;
+
+const RESULT = `pid  | name           | path                          | cmdline
+4821 | suspicious.exe | C:\\Users\\Public\\suspicious.exe | suspicious.exe --hidden --connect 185.220.101.45`;
+
+const REQUEST_ID = "req-1";
+
+const toolCall: PendingToolCallData = {
+	toolExecutionRequestId: REQUEST_ID,
+	toolName: "run_script",
+	toolTitle: "Run Script",
+	toolExplanation:
+		"Runs a diagnostic script on the endpoint to inspect running processes.",
+	toolType: "TACTICAL_RMM",
+	requiresApproval: true,
+	approvalType: "ADMIN",
+	toolCallArguments: {
+		command: LONG_COMMAND,
+		RunAsUser: "False",
+		timeoutSeconds: 60,
+	},
+};
+
+const makeData = (
+	executions?: Record<string, ApprovalBatchExecutionState>,
+): ApprovalBatchData => ({
+	approvalRequestId: "batch-1",
+	approvalType: "ADMIN",
+	toolCalls: [toolCall],
+	executions,
+});
+
+const executingData = makeData({ [REQUEST_ID]: { status: "executing" } });
+const doneData = makeData({
+	[REQUEST_ID]: { status: "done", result: RESULT, success: true },
+});
+
+const constrainedDecorator =
+	(width?: number) => (Story: React.ComponentType) => (
+		<div style={{ maxWidth: width ?? 400, background: "var(--color-bg)" }}>
+			<Story />
+		</div>
+	);
+
+const meta = {
+	title: "Chat/Admin/ApprovalBatchMessage",
+	component: ApprovalBatchMessage,
+	tags: ["autodocs"],
+	parameters: {
+		docs: {
+			description: {
+				component:
+					"Command Block (Figma node 1092-2807). Approvable tool-call card with pending / approved / rejected / cancelled states, an expandable body of call arguments, and a Result block after execution.",
+			},
+		},
+	},
+	decorators: [constrainedDecorator()],
+} satisfies Meta<typeof ApprovalBatchMessage>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Pending — Approve / Reject buttons shown. Click the row to expand args. */
+export const Pending: Story = {
+	args: {
+		data: makeData(),
+		status: "pending",
+		onApprove: () => {},
+		onReject: () => {},
+	},
+};
+
+/** Approved and still executing — grey loader on the row, no result yet. */
+export const ApprovedExecuting: Story = {
+	args: {
+		data: executingData,
+		status: "approved",
+		resolvedByName: "Michael Johnson",
+	},
+};
+
+/** Approved and finished — green check + expandable Result block. */
+export const ApprovedDone: Story = {
+	args: {
+		data: doneData,
+		status: "approved",
+		resolvedByName: "Michael Johnson",
+	},
+};
+
+/** Rejected by a user — red status tag, no execution. */
+export const Rejected: Story = {
+	args: {
+		data: makeData(),
+		status: "rejected",
+		resolvedByName: "Michael Johnson",
+	},
+};
+
+/** Cancelled — grey status tag, no execution. */
+export const Cancelled: Story = {
+	args: {
+		data: makeData(),
+		status: "cancelled",
+		resolvedByName: "Michael Johnson",
+	},
+};
+
+/**
+ * All states side by side — mirrors the Figma "Command Blocks" board so the
+ * full set can be reviewed at a glance.
+ */
+export const AllStates: Story = {
+	decorators: [constrainedDecorator(420)],
+	render: () => (
+		<div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
+			<ApprovalBatchMessage
+				data={makeData()}
+				status="pending"
+				onApprove={() => {}}
+				onReject={() => {}}
+			/>
+			<ApprovalBatchMessage
+				data={executingData}
+				status="approved"
+				resolvedByName="Michael Johnson"
+			/>
+			<ApprovalBatchMessage
+				data={doneData}
+				status="approved"
+				resolvedByName="Michael Johnson"
+			/>
+			<ApprovalBatchMessage
+				data={makeData()}
+				status="rejected"
+				resolvedByName="Michael Johnson"
+			/>
+			<ApprovalBatchMessage
+				data={makeData()}
+				status="cancelled"
+				resolvedByName="Michael Johnson"
+			/>
+		</div>
+	),
+};

package/src/stories/ApprovalBatchMessageClient.stories.tsx

@@ -0,0 +1,172 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import type React from "react";
+
+import { ApprovalBatchMessage } from "../components/chat/approval-batch-message";
+import type {
+	ApprovalBatchData,
+	ApprovalBatchExecutionState,
+	PendingToolCallData,
+} from "../components/chat/types";
+
+/**
+ * CLIENT (Fae) variant of the Command Block — Figma node 1092-2807.
+ *
+ * Same component and props as the Admin card, driven by `assistantType="fae"`.
+ * Differences vs Admin: no tool icon next to the command, no footer divider,
+ * and a single full-text status pill ("Approved by Michael Johnson") instead
+ * of a compact tag + separate "by {name}".
+ */
+
+const LONG_COMMAND = `Get-CimInstance Win32_Process |
+  Select-Object ProcessId, Name, Path, CommandLine |
+  Where-Object { $_.Path -like 'C:\\Users\\Public\\*' }`;
+
+const RESULT = `pid  | name           | path                          | cmdline
+4821 | suspicious.exe | C:\\Users\\Public\\suspicious.exe | suspicious.exe --hidden --connect 185.220.101.45`;
+
+const REQUEST_ID = "req-1";
+
+const toolCall: PendingToolCallData = {
+	toolExecutionRequestId: REQUEST_ID,
+	toolName: "run_script",
+	toolTitle: "Run Script",
+	toolType: "TACTICAL_RMM",
+	requiresApproval: true,
+	approvalType: "CLIENT",
+	toolCallArguments: {
+		command: LONG_COMMAND,
+		RunAsUser: "False",
+		timeoutSeconds: 60,
+	},
+};
+
+const makeData = (
+	executions?: Record<string, ApprovalBatchExecutionState>,
+): ApprovalBatchData => ({
+	approvalRequestId: "batch-1",
+	approvalType: "CLIENT",
+	toolCalls: [toolCall],
+	executions,
+});
+
+const executingData = makeData({ [REQUEST_ID]: { status: "executing" } });
+const doneData = makeData({
+	[REQUEST_ID]: { status: "done", result: RESULT, success: true },
+});
+
+/**
+ * The assistant's message text that precedes the command block in the real
+ * chat (Figma "Command description text."). It is NOT part of the component —
+ * shown here only so the story matches the Figma frame.
+ */
+const CommandHeading = () => (
+	<p className="text-h4 text-ods-text-primary mb-[var(--spacing-system-xxs)]">
+		Command description text.
+	</p>
+);
+
+const constrainedDecorator =
+	(width?: number) => (Story: React.ComponentType) => (
+		<div style={{ maxWidth: width ?? 400, background: "var(--color-bg)" }}>
+			<CommandHeading />
+			<Story />
+		</div>
+	);
+
+const plainDecorator =
+	(width?: number) => (Story: React.ComponentType) => (
+		<div style={{ maxWidth: width ?? 400, background: "var(--color-bg)" }}>
+			<Story />
+		</div>
+	);
+
+const meta = {
+	title: "Chat/Client/ApprovalBatchMessage",
+	component: ApprovalBatchMessage,
+	tags: ["autodocs"],
+	args: { assistantType: "fae" },
+	parameters: {
+		docs: {
+			description: {
+				component:
+					"CLIENT (Fae) Command Block — no tool icon, no divider, full-text status pill. Same component/props as Admin, gated by assistantType='fae' (Figma 1092-2807).",
+			},
+		},
+	},
+	decorators: [constrainedDecorator()],
+} satisfies Meta<typeof ApprovalBatchMessage>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Pending — Approve / Reject buttons. Click the row to expand args. */
+export const Pending: Story = {
+	args: {
+		data: makeData(),
+		status: "pending",
+		onApprove: () => {},
+		onReject: () => {},
+	},
+};
+
+/** Approved and still executing — grey loader on the row, no result yet. */
+export const ApprovedExecuting: Story = {
+	args: {
+		data: executingData,
+		status: "approved",
+		resolvedByName: "Michael Johnson",
+	},
+};
+
+/** Approved and finished — green check + expandable Result block. */
+export const ApprovedDone: Story = {
+	args: {
+		data: doneData,
+		status: "approved",
+		resolvedByName: "Michael Johnson",
+	},
+};
+
+/** Rejected by a user — full-text red status pill. */
+export const Rejected: Story = {
+	args: {
+		data: makeData(),
+		status: "rejected",
+		resolvedByName: "Michael Johnson",
+	},
+};
+
+/** Cancelled — full-text grey status pill. */
+export const Cancelled: Story = {
+	args: {
+		data: makeData(),
+		status: "cancelled",
+		resolvedByName: "Michael Johnson",
+	},
+};
+
+/**
+ * All states side by side — mirrors the Figma CLIENT "Command Blocks" board.
+ */
+export const AllStates: Story = {
+	decorators: [plainDecorator(420)],
+	render: () => {
+		const states = [
+			{ data: makeData(), status: "pending" as const, onApprove: () => {}, onReject: () => {} },
+			{ data: executingData, status: "approved" as const, resolvedByName: "Michael Johnson" },
+			{ data: doneData, status: "approved" as const, resolvedByName: "Michael Johnson" },
+			{ data: makeData(), status: "rejected" as const, resolvedByName: "Michael Johnson" },
+			{ data: makeData(), status: "cancelled" as const, resolvedByName: "Michael Johnson" },
+		];
+		return (
+			<div style={{ display: "flex", flexDirection: "column", gap: 32 }}>
+				{states.map((s, i) => (
+					<div key={i}>
+						<CommandHeading />
+						<ApprovalBatchMessage assistantType="fae" {...s} />
+					</div>
+				))}
+			</div>
+		);
+	},
+};

package/src/stories/ApprovalRequestMessage.stories.tsx

@@ -0,0 +1,95 @@
+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";
+
+/**
+ * Single-command approval card (the legacy, non-batch variant of the Figma
+ * "Command Block"). Renders a command bar, an optional structured field list
+ * or explanation, and an Approve/Reject footer that flips to an
+ * Approved/Rejected status tag once resolved.
+ *
+ * Newer surfaces use `ApprovalBatchMessage` (see the ApprovalBatchMessage
+ * story) which additionally tracks per-tool execution + results.
+ */
+
+const LONG_COMMAND = `Get-CimInstance Win32_Process |
+  Select-Object ProcessId, Name, Path, CommandLine |
+  Where-Object { $_.Path -like 'C:\\Users\\Public\\*' }`;
+
+const baseData: ApprovalRequestData = {
+	command: LONG_COMMAND,
+	requestId: "req-1",
+	approvalType: "ADMIN",
+	fields: [
+		{ label: "Tool", value: "Tactical RMM" },
+		{ label: "RunAsUser", value: "False" },
+		{ label: "timeoutSeconds", value: "60" },
+	],
+};
+
+const constrainedDecorator =
+	(width?: number) => (Story: React.ComponentType) => (
+		<div style={{ maxWidth: width ?? 400, background: "var(--color-bg)" }}>
+			<Story />
+		</div>
+	);
+
+const meta = {
+	title: "Chat/Admin/ApprovalRequestMessage",
+	component: ApprovalRequestMessage,
+	tags: ["autodocs"],
+	parameters: {
+		docs: {
+			description: {
+				component:
+					"Single-command approval card — the legacy variant of the Figma Command Block. Prefer ApprovalBatchMessage for new work.",
+			},
+		},
+	},
+	decorators: [constrainedDecorator()],
+} satisfies Meta<typeof ApprovalRequestMessage>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Pending — Approve / Reject buttons shown. */
+export const Pending: Story = {
+	args: {
+		data: baseData,
+		status: "pending",
+		onApprove: () => {},
+		onReject: () => {},
+	},
+};
+
+/** Approved — green status tag. */
+export const Approved: Story = {
+	args: { data: baseData, status: "approved" },
+};
+
+/** Rejected — red status tag. */
+export const Rejected: Story = {
+	args: { data: baseData, status: "rejected" },
+};
+
+/** Cancelled — grey status tag. */
+export const Cancelled: Story = {
+	args: { data: baseData, status: "cancelled" },
+};
+
+/** Explanation prose instead of a structured field list. */
+export const WithExplanation: Story = {
+	args: {
+		data: {
+			command: LONG_COMMAND,
+			requestId: "req-2",
+			explanation:
+				"This runs a read-only diagnostic to inspect processes launched from the public folder. It does not modify the endpoint.",
+		},
+		status: "pending",
+		onApprove: () => {},
+		onReject: () => {},
+	},
+};

package/src/stories/ToolExecutionDisplay.stories.tsx

@@ -52,7 +52,7 @@ const constrainedDecorator =
 	);
 
 const meta = {
-	title: "Chat/ToolExecutionDisplay",
+	title: "Chat/Admin/ToolExecutionDisplay",
 	component: ToolExecutionDisplay,
 	tags: ["autodocs"],
 	parameters: {

package/src/stories/ToolExecutionDisplayClient.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import type React from "react";
+
+import { ToolExecutionDisplay } from "../components/chat/tool-execution-display";
+import type { ToolExecutionData } from "../components/chat/types";
+
+/**
+ * CLIENT (Fae) variant of the standalone tool-execution card. Same component
+ * and props as the Admin card, gated by `assistantType="fae"` — the only
+ * visual difference is that the tool icon next to the command is hidden.
+ */
+
+const executingMessage: ToolExecutionData = {
+	type: "EXECUTING_TOOL",
+	integratedToolType: "TACTICAL_RMM",
+	toolFunction: "run_script",
+	parameters: { RunAsUser: "False", timeoutSeconds: 60 },
+};
+
+const executedSuccessMessage: ToolExecutionData = {
+	type: "EXECUTED_TOOL",
+	integratedToolType: "TACTICAL_RMM",
+	toolFunction: "run_script",
+	parameters: { RunAsUser: "False", timeoutSeconds: 60 },
+	result: `pid  | name           | path                          | cmdline
+4821 | suspicious.exe | C:\\Users\\Public\\suspicious.exe | suspicious.exe --hidden --connect 185.220.101.45`,
+	success: true,
+};
+
+const constrainedDecorator =
+	(width?: number) => (Story: React.ComponentType) => (
+		<div style={{ maxWidth: width ?? 400, background: "var(--color-bg)" }}>
+			<Story />
+		</div>
+	);
+
+const meta = {
+	title: "Chat/Client/ToolExecutionDisplay",
+	component: ToolExecutionDisplay,
+	tags: ["autodocs"],
+	args: { assistantType: "fae" },
+	parameters: {
+		docs: {
+			description: {
+				component:
+					"CLIENT (Fae) tool-execution card — no tool icon. Same component/props as Admin, gated by assistantType='fae'.",
+			},
+		},
+	},
+	decorators: [constrainedDecorator()],
+} satisfies Meta<typeof ToolExecutionDisplay>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Collapsed, executing — spinner + 2-line preview, no tool icon. */
+export const CollapsedExecuting: Story = {
+	args: { message: executingMessage },
+};
+
+/** Collapsed, success — green check, no tool icon. */
+export const CollapsedSuccess: Story = {
+	args: { message: executedSuccessMessage },
+};

package/src/utils/platform-config.tsx

@@ -199,7 +199,10 @@ export function getPlatformIconComponent(platformName: string, className: string
     case 'openframe':
       return <OpenFrameLogo className={className} />;
     case 'openmsp':
-      return <OpenmspLogo className={className} color="#f1f1f1" />;
+      // `OpenmspLogo` ignores `color`; it uses the three bubble props. On a dark
+      // surface the default black front-bubble vanishes — use the canonical dark
+      // treatment (matches getPlatformIcon above + every hub call-site).
+      return <OpenmspLogo className={className} frontBubbleColor="#f1f1f1" innerFrontBubbleColor="#000000" backBubbleColor="#FFC008" />;
     case 'flamingo':
     case 'flamingo-teaser':
       return <FlamingoLogo className={`${className} text-white`} />;