@flamingo-stack/openframe-frontend-core 0.0.389 → 0.0.390-snapshot.20260709094846

package/src/components/features/notifications/notification-drawer.tsx

@@ -3,6 +3,8 @@
 import { useEffect, useRef } from 'react'
 import { BellOffIcon } from '../../icons-v2-generated/interface/bell-off-icon'
 import { ClockHistoryIcon, ArrowRightUpIcon } from '../../icons-v2-generated'
+import { useAppLayoutDrawerContainer } from '../../navigation/app-layout-context'
+import { AppLayoutDrawer, AppLayoutDrawerContent } from '../../navigation/app-layout-drawer'
 import { SplitButton } from '../../ui/button'
 import { Drawer, DrawerContent, DrawerTitle } from '../../ui/drawer'
 import { Switch } from '../../ui/switch'
@@ -27,6 +29,10 @@ export function NotificationDrawer({
   renderTile: renderTileProp,
 }: NotificationDrawerProps) {
   const ctx = useOptionalNotifications()
+  // Inside AppLayout the drawer renders in-layout (dims and covers only the
+  // main content area — header and sidebar stay interactive). Outside of it
+  // (Storybook, non-AppLayout hosts) it falls back to the viewport Drawer.
+  const layoutContainer = useAppLayoutDrawerContainer()
 
   if (!ctx) return null
 
@@ -56,6 +62,71 @@ export function NotificationDrawer({
 
   const unreadNotifications = notifications.filter((n) => !n.read)
 
+  const content = (
+    <>
+      <div className="px-[var(--spacing-system-m)] pt-[var(--spacing-system-m)]">
+        <DrawerTitle
+          hideClose
+          className="truncate"
+          actions={
+            <button
+              type="button"
+              disabled={unreadCount === 0}
+              onClick={markAllRead}
+              className="self-center text-h6 text-ods-text-secondary underline transition-colors hover:text-ods-text-primary disabled:opacity-40"
+            >
+              Mark All Complete
+            </button>
+          }
+        >
+          New Notifications
+        </DrawerTitle>
+      </div>
+
+      <DrawerScrollList
+        unreadNotifications={unreadNotifications}
+        liveDurationMs={liveDurationMs}
+        onComplete={markRead}
+        onSettle={markSettled}
+        hasMore={hasMore}
+        isLoadingMore={isLoadingMore}
+        loadMore={loadMore}
+        loadMoreRootMargin={loadMoreRootMargin}
+        renderTile={renderTile}
+      />
+
+      <div className="flex flex-col gap-[var(--spacing-system-xs)] px-[var(--spacing-system-m)] pb-[var(--spacing-system-m)]">
+        <div className="overflow-hidden rounded-md border border-ods-border bg-ods-card">
+          <ShowNotificationsToggleRow checked={showPopups} onChange={setShowPopups} />
+          {desktopPopupsConfigured && (
+            <DesktopNotificationsToggleRow checked={showDesktopPopups} onChange={setShowDesktopPopups} />
+          )}
+        </div>
+        <NotificationsHistoryButton
+          onClick={onHistoryClick ? () => { onHistoryClick(); close() } : undefined}
+          historyHref={historyHref}
+        />
+      </div>
+    </>
+  )
+
+  if (layoutContainer) {
+    return (
+      <AppLayoutDrawer open={isOpen} onOpenChange={(v) => (v ? open() : close())}>
+        <AppLayoutDrawerContent
+          side="right"
+          aria-describedby={undefined}
+          // md matches the content's default mobileBreakpoint: below it the
+          // panel is forced full-bleed (w-full), so the fixed width must not
+          // apply there or the panel would detach from the right edge.
+          className={cn('md:w-[26rem] gap-[var(--spacing-system-m)] p-[var(--spacing-system-zero)]', className)}
+        >
+          {content}
+        </AppLayoutDrawerContent>
+      </AppLayoutDrawer>
+    )
+  }
+
   return (
     <Drawer open={isOpen} onOpenChange={(v) => (v ? open() : close())}>
       <DrawerContent
@@ -67,49 +138,7 @@ export function NotificationDrawer({
           className,
         )}
       >
-        <div className="px-[var(--spacing-system-m)] pt-[var(--spacing-system-m)]">
-          <DrawerTitle
-            hideClose
-            className="truncate"
-            actions={
-              <button
-                type="button"
-                disabled={unreadCount === 0}
-                onClick={markAllRead}
-                className="self-center text-h6 text-ods-text-secondary underline transition-colors hover:text-ods-text-primary disabled:opacity-40"
-              >
-                Complete All
-              </button>
-            }
-          >
-            New Notifications
-          </DrawerTitle>
-        </div>
-
-        <DrawerScrollList
-          unreadNotifications={unreadNotifications}
-          liveDurationMs={liveDurationMs}
-          onComplete={markRead}
-          onSettle={markSettled}
-          hasMore={hasMore}
-          isLoadingMore={isLoadingMore}
-          loadMore={loadMore}
-          loadMoreRootMargin={loadMoreRootMargin}
-          renderTile={renderTile}
-        />
-
-        <div className="flex flex-col gap-[var(--spacing-system-xs)] px-[var(--spacing-system-m)] pb-[var(--spacing-system-m)]">
-          <div className="overflow-hidden rounded-md border border-ods-border bg-ods-card">
-            <ShowNotificationsToggleRow checked={showPopups} onChange={setShowPopups} />
-            {desktopPopupsConfigured && (
-              <DesktopNotificationsToggleRow checked={showDesktopPopups} onChange={setShowDesktopPopups} />
-            )}
-          </div>
-          <NotificationsHistoryButton
-            onClick={onHistoryClick ? () => { onHistoryClick(); close() } : undefined}
-            historyHref={historyHref}
-          />
-        </div>
+        {content}
       </DrawerContent>
     </Drawer>
   )

package/src/components/features/time-tracker/time-tracker-header-button.tsx

@@ -1,8 +1,14 @@
 'use client'
 
 import * as PopoverPrimitive from '@radix-ui/react-popover'
+import { useEffect, useRef } from 'react'
 import { cn } from '../../../utils/cn'
 import { ClockHistoryIcon } from '../../icons-v2-generated/date-and-time/clock-history-icon'
+import {
+  type AppLayoutDrawerHandle,
+  useAppLayoutDrawerContainer,
+  useAppLayoutDrawerCoordination,
+} from '../../navigation/app-layout-context'
 import { HeaderButton } from '../../navigation/header-button'
 import { OVERLAY_BACKDROP_CLASS } from '../../ui/drawer'
 import { TimeTrackerPanel } from './time-tracker-panel'
@@ -19,8 +25,11 @@ export interface TimeTrackerHeaderButtonProps {
  * Header affordance for the time tracker. Renders nothing unless wrapped in a
  * `<TimeTrackerProvider>`. The trigger is the standard `HeaderButton`; when a
  * session is active it also shows the live elapsed time. The popup is a Radix
- * Popover anchored under the button (not a modal/drawer), backed by the same
- * dim overlay as the Drawer so all panels darken the page identically.
+ * Popover anchored under the button (not a modal/drawer). Inside AppLayout the
+ * dim backdrop covers only the main content area (header and sidebar stay
+ * interactive) and the popup joins the layout's panel coordination — opening
+ * it closes any open in-layout drawer and vice versa. Outside AppLayout it
+ * falls back to a viewport-wide backdrop.
  */
 export function TimeTrackerHeaderButton({ className, disabled }: TimeTrackerHeaderButtonProps) {
   const ctx = useOptionalTimeTracker()
@@ -29,10 +38,38 @@ export function TimeTrackerHeaderButton({ className, disabled }: TimeTrackerHead
     runningSince: ctx?.runningSince,
     accumulatedMs: ctx?.accumulatedMs,
   })
+  const layoutContainer = useAppLayoutDrawerContainer()
+  const coordination = useAppLayoutDrawerCoordination()
+
+  const isOpen = ctx?.isOpen ?? false
+  const isOpenRef = useRef(isOpen)
+  isOpenRef.current = isOpen
+  const closeRef = useRef(ctx?.close)
+  closeRef.current = ctx?.close
+  // Stable handle: the same object must be registered AND passed as `self`
+  // to notifyDrawerDidOpen so the coordinator can skip it when closing the
+  // other panels.
+  const selfHandleRef = useRef<AppLayoutDrawerHandle | null>(null)
+  if (!selfHandleRef.current) {
+    selfHandleRef.current = {
+      close: () => {
+        if (isOpenRef.current) closeRef.current?.()
+      },
+    }
+  }
+
+  useEffect(() => {
+    if (isOpen) coordination?.notifyDrawerDidOpen(selfHandleRef.current ?? undefined)
+  }, [isOpen, coordination])
+
+  useEffect(() => {
+    if (!selfHandleRef.current) return
+    return coordination?.registerDrawer(selfHandleRef.current)
+  }, [coordination])
 
   if (!ctx) return null
 
-  const { isOpen, open, close, status } = ctx
+  const { open, close, status } = ctx
   const isPaused = status === 'paused'
   const isActive = status === 'tracking' || isPaused
 
@@ -72,13 +109,16 @@ export function TimeTrackerHeaderButton({ className, disabled }: TimeTrackerHead
       </PopoverPrimitive.Trigger>
       {/* Popovers have no built-in overlay — portal a dim backdrop behind the
           panel. Clicks land on it (outside Content), so Radix still closes the
-          popover. Own Portal: Radix's Portal slots a single child. */}
-      <PopoverPrimitive.Portal>
+          popover. Own Portal: Radix's Portal slots a single child. Inside
+          AppLayout the backdrop portals into the main-area container (absolute,
+          AppLayoutDrawer-overlay tier) so header/sidebar stay undimmed and
+          interactive; standalone it dims the whole viewport. */}
+      <PopoverPrimitive.Portal container={layoutContainer ?? undefined}>
         <div
           aria-hidden="true"
           data-state={isOpen ? 'open' : 'closed'}
           className={cn(
-            'fixed inset-0 z-[1299]',
+            layoutContainer ? 'absolute inset-0 z-[102]' : 'fixed inset-0 z-[1299]',
             OVERLAY_BACKDROP_CLASS,
             'data-[state=open]:animate-in data-[state=open]:fade-in-0',
             'data-[state=closed]:animate-out data-[state=closed]:fade-out-0',

package/src/components/navigation/app-header.tsx

@@ -251,16 +251,20 @@ function NotificationsHeaderButton({
   return (
     <HeaderButton
       icon={
-        <div className="relative w-4 h-4 md:w-6 md:h-6">
-          <BellIcon className="w-full h-full" />
-          {hasUnread && (
-            <span
-              className="absolute top-0 right-0 bg-ods-warning rounded-full w-1.5 h-1.5 md:w-2 md:h-2"
-            />
-          )}
-        </div>
+        isActive ? (
+          <XmarkIcon className="w-4 h-4 md:w-6 md:h-6" />
+        ) : (
+          <div className="relative w-4 h-4 md:w-6 md:h-6">
+            <BellIcon className="w-full h-full" />
+            {hasUnread && (
+              <span
+                className="absolute top-0 right-0 bg-ods-warning rounded-full w-1.5 h-1.5 md:w-2 md:h-2"
+              />
+            )}
+          </div>
+        )
       }
-      aria-label="Notifications"
+      aria-label={isActive ? 'Close notifications' : 'Notifications'}
       onClick={onClick}
       isActive={isActive}
       disabled={disabled || !onClick}

package/src/components/navigation/app-layout-context.ts

@@ -0,0 +1,46 @@
+'use client'
+
+import { createContext, useContext } from 'react'
+
+/**
+ * Container element that wraps `<main>` and serves as the portal target for
+ * `AppLayoutDrawer`. Drawers rendered into this container sit on top of the
+ * main content area only — the sidebar and header remain visible and
+ * interactive. Null when AppLayout hasn't mounted (or when used outside of it).
+ *
+ * Lives in its own module (not app-layout.tsx) so in-layout panels
+ * (AppLayoutDrawer, NotificationDrawer, TimeTrackerHeaderButton) can consume
+ * these contexts without importing AppLayout itself — AppLayout renders those
+ * panels, so importing it back would create a module cycle.
+ */
+export const AppLayoutDrawerContainerContext = createContext<HTMLElement | null>(null)
+
+export function useAppLayoutDrawerContainer(): HTMLElement | null {
+  return useContext(AppLayoutDrawerContainerContext)
+}
+
+/**
+ * Coordination between AppLayout's in-layout panels (`AppLayoutDrawer`, the
+ * time-tracker popup) and the mobile burger menu. At most ONE of them may be
+ * open at a time — each dims the main area, so stacking them reads as broken:
+ *   - a panel that opens calls `notifyDrawerDidOpen(self)` so the layout
+ *     closes the burger menu AND every other registered panel;
+ *   - each panel registers a close handle so opening the menu via the burger
+ *     button (or another panel) closes it. Null outside of AppLayout.
+ */
+export interface AppLayoutDrawerHandle {
+  close: () => void
+}
+
+export interface AppLayoutDrawerCoordination {
+  /** `self` is skipped when closing the other registered panels. */
+  notifyDrawerDidOpen: (self?: AppLayoutDrawerHandle) => void
+  /** Returns an unregister cleanup. */
+  registerDrawer: (handle: AppLayoutDrawerHandle) => () => void
+}
+
+export const AppLayoutDrawerCoordinationContext = createContext<AppLayoutDrawerCoordination | null>(null)
+
+export function useAppLayoutDrawerCoordination(): AppLayoutDrawerCoordination | null {
+  return useContext(AppLayoutDrawerCoordinationContext)
+}

package/src/components/navigation/app-layout-drawer.tsx

@@ -14,7 +14,11 @@ import {
   OVERLAY_BACKDROP_CLASS,
   type DrawerSide,
 } from "../ui/drawer"
-import { useAppLayoutDrawerContainer, useAppLayoutDrawerCoordination } from "./app-layout"
+import {
+  type AppLayoutDrawerHandle,
+  useAppLayoutDrawerContainer,
+  useAppLayoutDrawerCoordination,
+} from "./app-layout-context"
 
 /**
  * AppLayoutDrawer is a Drawer variant that renders **inside** AppLayout's main
@@ -68,26 +72,32 @@ const AppLayoutDrawerRoot = ({
     [isControlled, onOpenChange],
   )
 
-  // Coordinate with AppLayout's mobile burger menu (the drawer covers it):
-  // opening the drawer closes the menu, and opening the menu closes the
-  // drawer via the registered close handle. Refs keep the registration
-  // effect independent of render-to-render identity changes.
+  // Coordinate with AppLayout's other in-layout panels and the mobile burger
+  // menu: opening this drawer closes them, and opening any of them closes
+  // this drawer via the registered close handle. Refs keep the handle
+  // identity stable across renders — the same object must be registered AND
+  // passed as `self` so the coordinator can skip it when closing the rest.
   const coordination = useAppLayoutDrawerCoordination()
   const openRef = React.useRef(open)
   openRef.current = open
   const handleOpenChangeRef = React.useRef(handleOpenChange)
   handleOpenChangeRef.current = handleOpenChange
+  const selfHandleRef = React.useRef<AppLayoutDrawerHandle | null>(null)
+  if (!selfHandleRef.current) {
+    selfHandleRef.current = {
+      close: () => {
+        if (openRef.current) handleOpenChangeRef.current(false)
+      },
+    }
+  }
 
   React.useEffect(() => {
-    if (open) coordination?.notifyDrawerDidOpen()
+    if (open) coordination?.notifyDrawerDidOpen(selfHandleRef.current ?? undefined)
   }, [open, coordination])
 
   React.useEffect(() => {
-    return coordination?.registerDrawer({
-      close: () => {
-        if (openRef.current) handleOpenChangeRef.current(false)
-      },
-    })
+    if (!selfHandleRef.current) return
+    return coordination?.registerDrawer(selfHandleRef.current)
   }, [coordination])
 
   return (

package/src/components/navigation/app-layout.tsx

@@ -1,50 +1,21 @@
 'use client'
 
-import { createContext, Suspense, useCallback, useContext, useMemo, useRef, useState } from 'react'
+import { Suspense, useCallback, useMemo, useRef, useState } from 'react'
 import { NavigationSidebarConfig } from '../../types/navigation'
 import { cn } from '../../utils'
 import { NotificationDrawer } from '../features/notifications/notification-drawer'
 import { AppHeader, AppHeaderProps } from './app-header'
+import {
+  AppLayoutDrawerContainerContext,
+  type AppLayoutDrawerCoordination,
+  AppLayoutDrawerCoordinationContext,
+  type AppLayoutDrawerHandle,
+} from './app-layout-context'
 import { MobileBurgerMenu, MobileBurgerMenuProps } from './mobile-burger-menu'
 import { NavigationSidebar } from './navigation-sidebar'
 
-/**
- * Container element that wraps `<main>` and serves as the portal target for
- * `AppLayoutDrawer`. Drawers rendered into this container sit on top of the
- * main content area only — the sidebar and header remain visible and
- * interactive. Null when AppLayout hasn't mounted (or when used outside of it).
- */
-const AppLayoutDrawerContainerContext = createContext<HTMLElement | null>(null)
-
-export function useAppLayoutDrawerContainer(): HTMLElement | null {
-  return useContext(AppLayoutDrawerContainerContext)
-}
-
-/**
- * Two-way coordination between AppLayout's mobile burger menu and in-layout
- * drawers (`AppLayoutDrawer`), which render above the menu (z-[103] vs
- * z-[101]) — the two must never be open at the same time:
- *   - a drawer that opens calls `notifyDrawerDidOpen` so the layout closes
- *     the menu (otherwise it would resurface once the drawer closes);
- *   - each drawer registers a close handle so opening the menu via the
- *     burger button closes any open drawer instead of hiding the menu
- *     underneath it. Null outside of AppLayout.
- */
-export interface AppLayoutDrawerHandle {
-  close: () => void
-}
-
-interface AppLayoutDrawerCoordination {
-  notifyDrawerDidOpen: () => void
-  /** Returns an unregister cleanup. */
-  registerDrawer: (handle: AppLayoutDrawerHandle) => () => void
-}
-
-const AppLayoutDrawerCoordinationContext = createContext<AppLayoutDrawerCoordination | null>(null)
-
-export function useAppLayoutDrawerCoordination(): AppLayoutDrawerCoordination | null {
-  return useContext(AppLayoutDrawerCoordinationContext)
-}
+export { useAppLayoutDrawerContainer, useAppLayoutDrawerCoordination } from './app-layout-context'
+export type { AppLayoutDrawerHandle } from './app-layout-context'
 
 export interface AppLayoutProps {
   children: React.ReactNode
@@ -113,7 +84,14 @@ export function AppLayout({
   }, [])
 
   const drawerCoordination = useMemo<AppLayoutDrawerCoordination>(() => ({
-    notifyDrawerDidOpen: () => setMobileMenuOpen(false),
+    notifyDrawerDidOpen: (self) => {
+      setMobileMenuOpen(false)
+      // Only one in-layout panel may be open at a time — each dims the main
+      // area, so stacking them reads as broken.
+      for (const handle of drawerHandlesRef.current) {
+        if (handle !== self) handle.close()
+      }
+    },
     registerDrawer: (handle) => {
       drawerHandlesRef.current.add(handle)
       return () => drawerHandlesRef.current.delete(handle)

package/src/stories/ApprovalBatchMessageClient.stories.tsx

@@ -4,34 +4,31 @@ 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.
+ * CLIENT (end-user Fae desktop app) variant of the approval block — Figma
+ * node 203-11947 ("fae-approval-block").
  *
- * 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}".
+ * Same component and props as the Admin card, driven by `variant="client"`.
+ * The end client sees ONLY the BE-generated title plus the Approve/Reject
+ * buttons, or the full-text resolved pill ("Approved by Michael Johnson").
+ * Commands, scripts, expandable args/results and execution icons are never
+ * rendered in this variant.
  */
 
 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",
-	// Human-readable description shown as the collapsed row header (CLIENT);
-	// the raw command moves into the expanded body (Figma 1972-6100).
+	// BE-generated human-readable title — the ONLY content the client sees.
 	toolExplanation:
 		"Collects today's system, application, and security event logs and exports them to a CSV file.",
 	toolType: "OPENFRAME_RMM",
@@ -44,39 +41,12 @@ const toolCall: PendingToolCallData = {
 	},
 };
 
-const makeData = (
-	executions?: Record<string, ApprovalBatchExecutionState>,
-): ApprovalBatchData => ({
+const makeData = (): 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)" }}>
@@ -88,22 +58,22 @@ const meta = {
 	title: "Chat/Client/ApprovalBatchMessage",
 	component: ApprovalBatchMessage,
 	tags: ["autodocs"],
-	args: { assistantType: "fae" },
+	args: { variant: "client" },
 	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).",
+					"CLIENT (Fae end-user) approval block — title-only card with Approve/Reject or a full-text status pill. Commands/scripts are never shown. Gated by variant='client' (Figma 203-11947).",
 			},
 		},
 	},
-	decorators: [constrainedDecorator()],
+	decorators: [plainDecorator()],
 } satisfies Meta<typeof ApprovalBatchMessage>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-/** Pending — Approve / Reject buttons. Click the row to expand args. */
+/** Pending — title + Approve / Reject buttons. No expandable command. */
 export const Pending: Story = {
 	args: {
 		data: makeData(),
@@ -113,19 +83,10 @@ export const Pending: Story = {
 	},
 };
 
-/** Approved and still executing — grey loader on the row, no result yet. */
-export const ApprovedExecuting: Story = {
+/** Approved — full-text green status pill. */
+export const Approved: Story = {
 	args: {
-		data: executingData,
-		status: "approved",
-		resolvedByName: "Michael Johnson",
-	},
-};
-
-/** Approved and finished — green check + expandable Result block. */
-export const ApprovedDone: Story = {
-	args: {
-		data: doneData,
+		data: makeData(),
 		status: "approved",
 		resolvedByName: "Michael Johnson",
 	},
@@ -150,25 +111,22 @@ export const Cancelled: Story = {
 };
 
 /**
- * All states side by side — mirrors the Figma CLIENT "Command Blocks" board.
+ * All states side by side — mirrors the Figma CLIENT approval-block frames
+ * (1-6575 / 1-6621 / 1-6637 / 1-6653).
  */
 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: "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>
+					<ApprovalBatchMessage key={i} variant="client" {...s} />
 				))}
 			</div>
 		);