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

package/src/components/features/time-tracker/time-tracker-panel.tsx

@@ -303,6 +303,7 @@ export function TimeTrackerPanel({
               'aria-label': 'Open my time in a new view',
               onClick: onOpenMyTimeMenu,
               disabled: !onOpenMyTimeMenu,
+              openInNewTab: true,
             }}
           >
             Open My Time

package/src/components/ui/actions-menu.tsx

@@ -90,6 +90,7 @@ const SecondaryAction: React.FC<{ action: ActionsMenuItemIconAction }> = ({ acti
 
 	const classes = cn(
 		SECONDARY_ACTION_CLASSES,
+		action.openInNewTab && "max-md:hidden",
 		action.disabled && "cursor-not-allowed opacity-60 pointer-events-none",
 	);
 

package/src/components/ui/button/split-button.tsx

@@ -32,6 +32,7 @@ const splitHalfVariants = cva(splitHalfBase, {
       small: "h-6 md:h-8 px-[var(--spacing-system-xs)] text-h5 [&_svg]:h-3 [&_svg]:w-3 md:[&_svg]:h-4 md:[&_svg]:w-4",
     },
     side: { main: "", icon: "" },
+    soloOnMobile: { true: "", false: "" },
   },
   compoundVariants: [
     // Rounded corners + per-variant seam. The icon-side's left border is the divider.
@@ -55,8 +56,12 @@ const splitHalfVariants = cva(splitHalfBase, {
     // Icon half: per Figma, narrower than main height (default: 40×48; small: 32×32).
     { side: "icon", size: "default", class: "w-10 px-0" },
     { side: "icon", size: "small", class: "w-6 md:w-8 px-0" },
+
+    { side: "icon", soloOnMobile: true, class: "max-md:hidden" },
+    { side: "main", soloOnMobile: true, class: "max-md:rounded-r-md" },
+    { variant: "outline", side: "main", soloOnMobile: true, class: "max-md:border-r" },
   ],
-  defaultVariants: { variant: "accent", size: "default", side: "main" },
+  defaultVariants: { variant: "accent", size: "default", side: "main", soloOnMobile: false },
 })
 
 type SplitButtonVariant = NonNullable<VariantProps<typeof splitHalfVariants>["variant"]>
@@ -68,6 +73,11 @@ interface SplitButtonIconAction {
   "aria-label": string
   onClick?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>
   href?: string
+  /**
+   * Opens `href` with `target="_blank"`. Also marks the half as a new-tab
+   * affordance, which hides it below `md` (set it for `onClick` handlers that
+   * open a new tab/window themselves).
+   */
   openInNewTab?: boolean
   prefetch?: boolean
   disabled?: boolean
@@ -101,6 +111,7 @@ interface HalfOptions {
   variant: SplitButtonVariant
   size: SplitButtonSize
   side: "main" | "icon"
+  soloOnMobile?: boolean
   href?: string
   openInNewTab?: boolean
   prefetch?: boolean
@@ -113,8 +124,8 @@ interface HalfOptions {
   children: React.ReactNode
 }
 
-function Half({ variant, size, side, href, openInNewTab, prefetch, onClick, disabled, grow, type = "button", ariaLabel, children }: HalfOptions) {
-  const classes = cn(splitHalfVariants({ variant, size, side }), grow && "flex-1")
+function Half({ variant, size, side, soloOnMobile, href, openInNewTab, prefetch, onClick, disabled, grow, type = "button", ariaLabel, children }: HalfOptions) {
+  const classes = cn(splitHalfVariants({ variant, size, side, soloOnMobile }), grow && "flex-1")
 
   if (href) {
     return (
@@ -169,6 +180,8 @@ const SplitButton = React.forwardRef<HTMLDivElement, SplitButtonProps>(function
   },
   ref,
 ) {
+  const soloOnMobile = !!iconAction.openInNewTab
+
   return (
     <div
       ref={ref}
@@ -180,6 +193,7 @@ const SplitButton = React.forwardRef<HTMLDivElement, SplitButtonProps>(function
         variant={variant}
         size={size}
         side="main"
+        soloOnMobile={soloOnMobile}
         href={href}
         openInNewTab={openInNewTab}
         prefetch={prefetch}
@@ -197,6 +211,7 @@ const SplitButton = React.forwardRef<HTMLDivElement, SplitButtonProps>(function
         variant={variant}
         size={size}
         side="icon"
+        soloOnMobile={soloOnMobile}
         href={iconAction.href}
         openInNewTab={iconAction.openInNewTab}
         prefetch={iconAction.prefetch}

package/src/components/ui/page-actions.tsx

@@ -245,6 +245,12 @@ function IconButtonsVariant({
   const singleAction = isSingleAction ? actions[0] : null
   const useSingleActionMobile = isSingleAction && !hasMenuActions
 
+  const mobileMenuGroups = [
+    { items: actions.flatMap(actionToMenuItems) },
+    ...(menuActions ?? []),
+  ]
+  const hasMobileMenuItems = mobileMenuGroups.some(g => g.items.length > 0)
+
   return (
     <>
       {/* Desktop: every action as an icon button + optional overflow menu */}
@@ -262,14 +268,9 @@ function IconButtonsVariant({
       <div className={cn('flex md:hidden', className)}>
         {useSingleActionMobile && singleAction ? (
           renderActionButton(singleAction, { iconOnly: true })
-        ) : (
-          <ActionsMenuDropdown
-            groups={[
-              { items: actions.flatMap(actionToMenuItems) },
-              ...(menuActions ?? []),
-            ]}
-          />
-        )}
+        ) : hasMobileMenuItems ? (
+          <ActionsMenuDropdown groups={mobileMenuGroups} />
+        ) : null}
       </div>
     </>
   )
@@ -328,6 +329,12 @@ function MenuPrimaryVariant({
   const desktopActions = actions.filter(a => !a.showOnlyMobile)
   const hasMenuActions = menuActions.some(g => g.items.length > 0)
 
+  const mobileMenuGroups = [
+    { items: actions.flatMap(actionToMenuItems) },
+    ...menuActions,
+  ]
+  const hasMobileMenuItems = mobileMenuGroups.some(g => g.items.length > 0)
+
   return (
     <>
       <div className={cn('hidden md:flex items-center', ACTIONS_GAP, className)}>
@@ -341,12 +348,7 @@ function MenuPrimaryVariant({
       </div>
 
       <div className={cn('flex md:hidden', className)}>
-        <ActionsMenuDropdown
-          groups={[
-            { items: actions.flatMap(actionToMenuItems) },
-            ...menuActions,
-          ]}
-        />
+        {hasMobileMenuItems ? <ActionsMenuDropdown groups={mobileMenuGroups} /> : null}
       </div>
     </>
   )

package/src/stories/ApprovalRequestMessageClient.stories.tsx

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

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

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