@flamingo-stack/openframe-frontend-core 0.0.351 → 0.0.352

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 },
+};