@flamingo-stack/openframe-frontend-core 0.0.213 → 0.0.214-snapshot.20260528192313

package/src/components/.unified-filter-logic.md

@@ -1,56 +1,63 @@
-<!-- source-hash: a78a85bced74a6606ab1527239b9cfab -->
-A comprehensive React hook for managing URL-based filtering with AND logic across multiple filter types. This module provides unified filtering functionality that applies all selected filters simultaneously rather than using OR operations.
+<!-- source-hash: 1d107abaa66df6045feade13e2cfcdf0 -->
+Provides a unified, URL-driven AND-based filtering system for Next.js pages, exposing a React hook and pre-built filter configurations for managing multi-dimensional filter state via search parameters.
 
 ## Key Components
 
-- **`useUnifiedFiltering`** - Main hook that manages filter state and URL synchronization
-- **`FilterState`** - Interface defining all possible filter parameters (search, categories, tags, etc.)
-- **`FilterConfig`** - Configuration object specifying supported filters and base path for different contexts
-- **Predefined configs** - `vendorFilterConfig` and `blogFilterConfig` for common use cases
+### Interfaces
+- **`FilterState`** — Represents the current filter state: `search`, `categories`, `subcategories`, `tags`, `filters`, `pricing`, and `page`
+- **`FilterConfig`** — Configures a filter instance with a `basePath` and a feature flag map (`supportedFilters`) to enable/disable filter dimensions
+
+### Hook
+- **`useUnifiedFiltering(config)`** — Core hook that reads/writes filter state from URL search params using AND logic. Returns:
+  - `getCurrentFilterState()` — Parses current URL params into a `FilterState` object
+  - `updateFilters(newFilters, preserveScroll?)` — Rebuilds the URL with merged filter state
+  - `addFilter(type, value, preserveScroll?)` — Appends a value to a filter dimension
+  - `removeFilter(type, value?, preserveScroll?)` — Removes a specific or all values from a filter dimension
+  - `toggleFilter(type, value, preserveScroll?)` — Adds or removes a value depending on current state
+  - `clearAllFilters()` — Navigates to the base path, removing all params
+  - `getFilterChips(categories?, tags?)` — Generates display chip descriptors from active filters
+  - `handleFilterChipRemove(chipId)` — Removes a filter based on a chip's `id` string
+  - `isPending` — React transition pending state for UI feedback
+
+### Pre-built Configs
+- **`vendorFilterConfig`** — Config for `/vendors` with categories, subcategories, filters, pricing, and search enabled
+- **`blogFilterConfig`** — Config for `/blog` with categories, tags, and search enabled
 
 ## Usage Example
 
 ```typescript
 import { useUnifiedFiltering, vendorFilterConfig } from './unified-filter-logic'
 
-function VendorListPage() {
+function VendorFilters() {
   const {
     getCurrentFilterState,
     toggleFilter,
-    addFilter,
-    removeFilter,
     clearAllFilters,
     getFilterChips,
     handleFilterChipRemove,
     isPending
   } = useUnifiedFiltering(vendorFilterConfig)
 
-  const currentFilters = getCurrentFilterState()
-  const filterChips = getFilterChips(categories, tags)
+  const state = getCurrentFilterState()
 
   return (
     <div>
-      {/* Add filters */}
-      <button onClick={() => toggleFilter('categories', 'ai-tools')}>
-        Toggle AI Tools
+      <button onClick={() => toggleFilter('categories', 'security')}>
+        Toggle Security
+      </button>
+      <button onClick={() => toggleFilter('pricing', 'free')}>
+        Toggle Free
       </button>
-      
-      {/* Display active filters */}
-      {filterChips.map(chip => (
-        <div key={chip.id}>
-          {chip.label}
-          <button onClick={() => handleFilterChipRemove(chip.id)}>×</button>
-        </div>
-      ))}
-      
-      {/* Clear all button */}
       <button onClick={clearAllFilters}>Clear All</button>
-      
-      {/* Loading state */}
-      {isPending && <div>Loading...</div>}
+
+      {getFilterChips().map(chip => (
+        <span key={chip.id} onClick={() => handleFilterChipRemove(chip.id)}>
+          {chip.label} ✕
+        </span>
+      ))}
+
+      {isPending && <span>Loading...</span>}
     </div>
   )
 }
-```
-
-The hook automatically handles URL parameter encoding/decoding, scroll preservation, and page reset when filters change. It uses React's `useTransition` for smooth navigation updates.
+```

package/src/components/.unified-pagination.md

@@ -1,39 +1,40 @@
-<!-- source-hash: b1542126bdb853cacb1d8b7318fdd48f -->
-A unified pagination component that combines URL state management with local state updates, preserving scroll position during page changes.
+<!-- source-hash: 0b1ed7fecc99180fa753ffdca0b769d0 -->
+Wrapper component around `Pagination` that synchronizes page state with the URL query string without triggering a full navigation, while preserving scroll position.
 
 ## Key Components
 
-- **UnifiedPagination**: Main component that wraps the base `Pagination` component with enhanced functionality
-- **handlePageChange**: Core method that coordinates local state updates, URL synchronization, and scroll position preservation
-- **UnifiedPaginationProps**: Interface defining component props including optional callback and styling options
+- **`UnifiedPagination`** — Primary export; renders `Pagination` only when `totalPages > 1`
+- **`UnifiedPaginationProps`** — Interface defining `currentPage`, `totalPages`, optional `onPageChange` callback, and `className`
+- **`handlePageChange`** — Internal handler that updates local state via `onPageChange`, syncs the `page` query param via `window.history.replaceState`, and restores scroll position after render
 
 ## Usage Example
 
 ```typescript
 import { UnifiedPagination } from "./unified-pagination"
 
-function BlogList() {
-  const [currentPage, setCurrentPage] = useState(1)
-  const [posts, setPosts] = useState([])
-  
-  const handlePageChange = (page: number) => {
-    setCurrentPage(page)
-    // Fetch new data for the page
-    fetchPosts(page).then(setPosts)
-  }
+function ArticleList() {
+  const [page, setPage] = useState(1)
+  const totalPages = 10
 
   return (
-    <div>
-      {posts.map(post => <BlogPost key={post.id} post={post} />)}
-      
+    <>
+      {/* ...list content... */}
       <UnifiedPagination
-        currentPage={currentPage}
-        totalPages={Math.ceil(totalPosts / postsPerPage)}
-        onPageChange={handlePageChange}
+        currentPage={page}
+        totalPages={totalPages}
+        onPageChange={setPage}
+        className="mt-4 flex justify-center"
       />
-    </div>
+    </>
   )
 }
 ```
 
-The component automatically updates the browser URL for bookmarking support while preventing page reloads, and maintains the user's scroll position during pagination. It conditionally renders only when there are multiple pages to navigate through.
+## Behavior Notes
+
+| Behavior | Detail |
+|---|---|
+| URL sync | Updates `?page=N` via `replaceState` — no re-render or navigation |
+| Scroll preservation | Captures `window.scrollY` before page change, restores with `behavior: 'instant'` after a `setTimeout(0)` |
+| Hidden when unnecessary | Returns `null` when `totalPages <= 1` |
+| Bookmark support | URL reflects current page, allowing users to share or reload at the correct page |

package/src/components/.user-summary-stub.md

@@ -1,41 +1,57 @@
-<!-- source-hash: 7d4442772751d72738b728e95b82eca1 -->
-A client-side React component that displays user profile information with avatar, contact details, authentication providers, and optional MSP (Managed Service Provider) data in both compact and full layouts.
+<!-- source-hash: e8fdad9190b0ce783dc9a5712636e90d -->
+A client-side React component that renders a user profile summary card with avatar, name, email/subtitle, auth provider icons, and optional MSP organization preview data.
 
 ## Key Components
 
-- **UserSummary** - Main component with two display modes: compact horizontal layout for comments/headers and full vertical layout for profile pages
-- **getAuthProviderIcon** - Helper function that returns provider-specific icons (Google, Microsoft, Slack) or fallback placeholders
-- **formatNumber** - Utility function that abbreviates large numbers (1.2K, 15K, 2M, etc.) for display
+### `UserSummary` (exported component)
+The primary export. Accepts a `Props` interface and renders in two layout modes:
+- **Compact mode** (`compact=true`): Horizontal row with small avatar, name, and subtitle — intended for comment headers or inline contexts.
+- **Full mode** (default): Vertical card with large avatar, name, email, MSP info row, and auth provider badges. Responsive with a separate mobile row for auth/edit controls.
+
+### `getAuthProviderIcon(provider)`
+Internal helper that maps provider strings (`"google"`, `"microsoft"`, `"azure"`, `"slack"`) to icon elements.
+
+### `formatNumber(n)`
+Internal utility that abbreviates large numbers (e.g., `1200 → 1.2K`, `2000000 → 2M`, `1500000000 → 1.5B`).
+
+## Key Props
+
+| Prop | Type | Description |
+|---|---|---|
+| `name` / `email` | `string` | Required user identity fields |
+| `avatarUrl` | `string \| null` | Optional avatar, proxied via `getProxiedImageUrl` |
+| `mspPreview` | object | Optional MSP org info (name, seats, revenue, logo badge) |
+| `compact` | `boolean` | Switches to minimal horizontal layout |
+| `authProviders` | `string[]` | Displays provider icons (Google, Microsoft, Slack) |
+| `showEditButton` | `boolean` | Shows an edit profile affordance |
 
 ## Usage Example
 
 ```typescript
-// Full profile display
+import { UserSummary } from "./user-summary-stub";
+
+// Full card with MSP info
 <UserSummary
-  name="John Doe"
-  email="john@company.com"
-  avatarUrl="https://example.com/avatar.jpg"
-  authProviders={["google", "microsoft"]}
-  showEditButton={true}
-  editHref="/profile/edit"
+  name="Jane Smith"
+  email="jane@example.com"
+  avatarUrl="https://cdn.example.com/jane.jpg"
+  authProviders={["google"]}
+  showEditButton
   mspPreview={{
-    name: "TechCorp MSP",
-    seatCount: 250,
+    name: "Acme MSP",
+    seatCount: 1500,
     technicianCount: 12,
-    annualRevenue: 2500000,
-    logoUrl: "https://example.com/msp-logo.jpg"
+    annualRevenue: 2000000,
+    logoUrl: "https://cdn.example.com/acme-logo.png",
   }}
 />
 
 // Compact mode for comment headers
 <UserSummary
   name="Jane Smith"
-  email="jane@company.com"
-  avatarUrl="https://example.com/avatar2.jpg"
-  compact={true}
+  email="jane@example.com"
+  compact
   avatarSize={32}
   subtitle="2 hours ago"
 />
-```
-
-The component handles responsive design, avatar fallbacks (initials), MSP badge overlays, and proxied image URLs for enhanced security and performance.
+```

package/src/components/.vendor-display-button.md

@@ -1,38 +1,38 @@
-<!-- source-hash: b69b6459568132d1683eed5725d711e0 -->
-A clickable button component that displays vendor information with logo and title, supporting both default and compact display variants for the OpenFrame platform.
+<!-- source-hash: 6fb4d3c3dedfd71f1af226c49bd112fd -->
+A client-side React button component that renders a vendor with its logo and title, supporting two visual variants and navigation to vendor profile pages.
 
 ## Key Components
 
-- **VendorDisplayButton** - Main component that renders a clickable vendor button
-- **VendorDisplayButtonProps** - TypeScript interface defining component props
-- **handleClick** - Click handler that opens external URLs or triggers custom onClick callbacks
-- **Variant support** - Two display modes: 'default' (full-sized) and 'compact' (minimal)
-- **Logo handling** - Displays vendor logos with fallback to initials when no logo is available
+### `VendorDisplayButtonProps`
+| Prop | Type | Description |
+|------|------|-------------|
+| `vendor` | `VendorWithMedia` | Vendor data including slug, title, and media |
+| `onClick` | `(vendorSlug: string) => void` | Optional internal click handler |
+| `variant` | `'default' \| 'compact'` | Display style (defaults to `'default'`) |
+| `externalUrl` | `string` | Fallback base URL for external navigation |
+
+### `VendorDisplayButton`
+Main export. Renders one of two button variants:
+- **`default`** — Card-style button with an 8×8 logo container, used in standard listings
+- **`compact`** — Pill-shaped button with a smaller 5×5 logo, designed for teaser/inline contexts (e.g. `flamingo-teaser`)
+
+Logo display gracefully falls back to the vendor's initial character when no logo URL is available. External navigation uses `NEXT_PUBLIC_OPENMSP_URL` env variable with `externalUrl` as fallback, opening in a new tab.
 
 ## Usage Example
 
 ```typescript
-import { VendorDisplayButton } from './vendor-display-button'
+import { VendorDisplayButton } from "./vendor-display-button"
 
-// Default variant with external URL
-<VendorDisplayButton 
-  vendor={vendorData}
-  externalUrl="https://openmsp.example.com"
-  onClick={(slug) => console.log('Clicked:', slug)}
+// Default variant — navigates externally
+<VendorDisplayButton
+  vendor={vendorWithMedia}
+  externalUrl="https://www.openmsp.ai"
 />
 
-// Compact variant for space-constrained layouts
-<VendorDisplayButton 
-  vendor={vendorData}
+// Compact variant — triggers internal handler
+<VendorDisplayButton
+  vendor={vendorWithMedia}
   variant="compact"
   onClick={(slug) => router.push(`/vendors/${slug}`)}
 />
-
-// External link behavior (opens in new tab)
-<VendorDisplayButton 
-  vendor={vendorData}
-  externalUrl="https://external-site.com"
-/>
-```
-
-The component automatically handles image proxying, responsive design, and provides hover effects with the signature Flamingo yellow accent color (`#FFC008`). It supports both internal navigation callbacks and external URL opening in new tabs.
+```

package/src/components/.vendor-icon.md

@@ -1,44 +1,52 @@
-<!-- source-hash: 1b5ad3ddc5bbf8333a3911ee37761474 -->
-A reusable React component for displaying vendor logos with consistent styling and fallback handling across the Flamingo platform.
+<!-- source-hash: f84ca33f36e32d62304615a416d5acac -->
+Renders a vendor logo icon with configurable size, background style, and fallback initials when no logo is available.
 
 ## Key Components
 
-- **VendorIcon**: Main component that renders vendor logos with configurable sizing and background styles
-- **VendorIconProps**: TypeScript interface defining component props including vendor data, size options, and styling preferences
-- **Size mappings**: Predefined size classes (`xs` to `xl`) with corresponding Tailwind CSS classes and image dimensions
-- **Background styles**: Three background options (`dark`, `light`, `white`) with appropriate border and color schemes
-- **Fallback display**: Shows vendor initials when logo is unavailable
+### `VendorIconProps`
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `vendor` | `VendorWithMedia & { id?, title, slug?, logo? }` | — | Vendor data including logo URL |
+| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'l' \| 'xl'` | `'md'` | Icon container size |
+| `className` | `string` | `''` | Additional CSS classes |
+| `showBackground` | `boolean` | `true` | Toggles container background/border |
+| `backgroundStyle` | `'dark' \| 'light' \| 'white'` | `'dark'` | Container background variant |
+
+### Size Map
+| Size | Container | Image (px) |
+|------|-----------|------------|
+| `xs` | 24×24 | 16×16 |
+| `sm` | 32×32 | 20×20 |
+| `md` | 40×40 | 32×32 |
+| `lg` | 48×48 | 40×40 |
+| `xl` | 64×64 | 40×40 |
+
+### `VendorIcon` (named export)
+The primary export. Resolves the logo via `getVendorLogo`, proxies the URL via `getProxiedImageUrl`, and falls back to a two-character uppercase initials placeholder when no logo is found.
 
 ## Usage Example
 
 ```typescript
 import { VendorIcon } from './vendor-icon'
 
-// Basic usage with default medium size and dark background
-<VendorIcon vendor={vendorData} />
+// Default dark background, medium size
+<VendorIcon vendor={vendor} />
 
-// Large icon with white background
-<VendorIcon 
-  vendor={vendorData}
-  size="xl"
+// White background, large, no border
+<VendorIcon
+  vendor={vendor}
+  size="lg"
   backgroundStyle="white"
   showBackground={true}
 />
 
-// Small icon without background for compact layouts
-<VendorIcon 
-  vendor={vendorData}
+// Logo only, no background (e.g. inside a styled card)
+<VendorIcon
+  vendor={vendor}
   size="sm"
   showBackground={false}
-  className="border border-gray-200"
-/>
-
-// Usage in comparison tables or dropdowns
-<VendorIcon 
-  vendor={vendorData}
-  size="xs"
-  backgroundStyle="light"
+  className="rounded-full"
 />
 ```
 
-The component automatically handles image proxying, provides accessible alt text, and gracefully degrades to showing vendor initials when logos are unavailable.
+> When `logoUrl` resolves to `null` or `undefined`, the component renders a dark/light pill with the first two characters of `vendor.title` (e.g. `"MI"` for *Microsoft*).

package/src/components/.why-it-matters.md

@@ -1,39 +1,42 @@
-<!-- source-hash: 3bab9ef8a96e7e082f214935b6b961d1 -->
-A React component that renders a numbered list section highlighting key benefits of the platform with hover effects and responsive design.
+<!-- source-hash: 0a0456d4a0a372cdfeb0bc7afca3a55f -->
+A Next.js client component that renders a numbered list section highlighting the key value propositions of the OpenFrame/Flamingo platform.
 
 ## Key Components
 
-- **`WhyItMattersItem`** - Individual list item component with number, title, description, and conditional bottom border
-- **`WhyItMatters`** - Main section component that renders the complete "Why It Matters" section with predefined benefits
-- **`WhyItMattersItemProps`** - TypeScript interface defining props for individual items
+### `WhyItMattersItem` (internal)
+A list item component rendering a numbered entry with title and description. Accepts:
+- `number` — display number string (e.g. `"1."`)
+- `title` — short benefit headline
+- `description` — supporting copy
+- `isLast?` — omits bottom border on the final item
+
+### `WhyItMatters` (default export)
+The parent section component containing four hardcoded value propositions:
+
+| # | Title | Description |
+|---|-------|-------------|
+| 1 | Cut Costs | Eliminate vendor fees with proven open-source alternatives |
+| 2 | Stay in Control | Full visibility and data ownership |
+| 3 | Build What You Need | Customize without vendor limitations |
+| 4 | Scale Freely | Designed for multi-tenant MSP environments |
 
 ## Usage Example
 
 ```typescript
-import WhyItMatters from './components/WhyItMatters';
+import WhyItMatters from '@/components/why-it-matters';
 
-// Use the component directly - items are predefined
-function HomePage() {
+export default function LandingPage() {
   return (
-    <div>
+    <main>
       <WhyItMatters />
-    </div>
-  );
-}
-
-// Or create a custom version with different items
-function CustomSection() {
-  return (
-    <section className="bg-[#161616]">
-      <WhyItMattersItem
-        number="1."
-        title="Custom Benefit"
-        description="Your custom description here"
-        isLast={true}
-      />
-    </section>
+    </main>
   );
 }
 ```
 
-The component features a dark theme design with custom fonts (Azeret Mono for headings, DM Sans for descriptions), hover animations, and responsive layout that stacks vertically on mobile devices. The predefined items focus on cost reduction, control, customization, and scalability benefits for MSP environments.
+## Notes
+
+- Marked `"use client"` — requires a Next.js App Router client boundary.
+- Styled with Tailwind CSS using `ods-` design tokens (`ods-accent`, `ods-border`, `ods-text-primary`, `ods-card`).
+- Items hover to `#2A2A2A` with a smooth transition for subtle interactivity.
+- Layout is responsive: stacks vertically on mobile (`flex-col`), switches to row on `md+`.

package/src/components/chat/.approval-batch-message.md

@@ -0,0 +1,51 @@
+<!-- source-hash: 0d9faa5f98d4a04ec4d4d1a8221ac7cd -->
+A React component that renders a batch of pending AI tool-call approvals, allowing users to approve or reject multiple tool executions at once, with expandable argument details and live execution status indicators.
+
+## Key Components
+
+### `ApprovalBatchMessage` (default export)
+A `forwardRef` component that renders the full approval card. Accepts:
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `data` | `ApprovalBatchSegment["data"]` | Tool calls, executions, and request ID |
+| `status` | `ApprovalBatchSegment["status"]` | `"pending"` \| `"approved"` \| `"rejected"` |
+| `onApprove` | `(requestId?) => void \| Promise<void>` | Called when user approves the batch |
+| `onReject` | `(requestId?) => void \| Promise<void>` | Called when user rejects the batch |
+
+### `ToolCallRow` (internal)
+Renders a single collapsible tool call row showing the command text, filtered arguments via `ArgRow`, execution result via `ResultBlock`, and a live `ExecutionStatusIcon`.
+
+### `ExecutionStatusIcon` (internal)
+Displays the per-tool execution state:
+- **Pending batch** → hidden
+- **Approved / executing** → `DotsLoaderIcon` (spinner)
+- **Done + success** → green `CheckCircleIcon`
+- **Done + failure** → red `XmarkCircleIcon`
+
+### Helper: `getArgEntries`
+Filters tool call arguments, excluding body-level keys (via `COMMAND_BODY_KEYS`) and null/empty values.
+
+## Usage Example
+
+```typescript
+import { ApprovalBatchMessage } from "./approval-batch-message"
+
+<ApprovalBatchMessage
+  data={{
+    approvalRequestId: "req_123",
+    toolCalls: [
+      {
+        toolExecutionRequestId: "exec_1",
+        toolType: "SHELL",
+        toolCallArguments: { command: "ls -la" },
+        toolExplanation: "List directory contents",
+      },
+    ],
+    executions: {},
+  }}
+  status="pending"
+  onApprove={(id) => console.log("Approved:", id)}
+  onReject={(id) => console.log("Rejected:", id)}
+/>
+```

package/src/components/chat/.approval-request-message.md

@@ -1,44 +1,45 @@
-<!-- source-hash: 30c5ced23ca0232bfbe8389e52e373e0 -->
-A React component that displays approval request messages with interactive approve/reject functionality for command execution workflows.
+<!-- source-hash: 8ff0735cc63d1ea7a83dab6aab9e0cc6 -->
+A React component that renders an AI approval request card with pending (Approve/Reject buttons) and resolved (status tag) states, used in Mingo AI's chat interface for human-in-the-loop action confirmation.
 
 ## Key Components
 
-- **ApprovalRequestMessage** - Main component that renders approval requests with command details, explanations, and action buttons
-- **Status handling** - Displays different UI states for pending, approved, and rejected requests
-- **Interactive controls** - Provides approve/reject buttons with loading states and async handling
-- **StatusTag integration** - Shows visual status indicators with icons for completed requests
+| Export | Type | Description |
+|--------|------|-------------|
+| `ApprovalRequestMessage` | `forwardRef` component | Main approval card with pending/resolved display states |
+| `ApprovalCardBody` | Internal component | Shared card body (command block + fields/explanation) |
+| `ApprovalFieldList` | Internal component | Stacked label/value `<dl>` rows for structured fields |
 
 ## Usage Example
 
 ```typescript
 import { ApprovalRequestMessage } from "./approval-request-message"
-import { Terminal } from "lucide-react"
-
-function ApprovalFlow() {
-  const handleApprove = async (requestId: string) => {
-    // Execute the approved command
-    await executeCommand(requestId)
-  }
-
-  const handleReject = async (requestId: string) => {
-    // Log rejection and notify user
-    await rejectRequest(requestId)
-  }
-
-  return (
-    <ApprovalRequestMessage
-      data={{
-        requestId: "req-123",
-        command: "sudo rm -rf /tmp/cache",
-        explanation: "Clearing temporary cache files",
-        icon: <Terminal className="w-4 h-4" />
-      }}
-      status="pending"
-      onApprove={handleApprove}
-      onReject={handleReject}
-    />
-  )
-}
+
+// Pending state — shows Approve / Reject buttons
+<ApprovalRequestMessage
+  data={{
+    requestId: "req_abc123",
+    command: "apt-get install nginx --yes",
+    explanation: "Installing nginx on the production web server.",
+    fields: [
+      { label: "Host", value: "web-01.prod" },
+      { label: "Risk", value: "Low" },
+    ],
+  }}
+  status="pending"
+  onApprove={async (id) => await approveAction(id)}
+  onReject={async (id) => await rejectAction(id)}
+/>
+
+// Resolved state — shows Approved/Rejected tag
+<ApprovalRequestMessage
+  data={{ requestId: "req_abc123", command: "apt-get install nginx --yes" }}
+  status="approved"
+/>
 ```
 
-The component automatically handles processing states, prevents double-clicks during async operations, and displays appropriate status indicators based on the request state.
+## Behavior Notes
+
+- `status` defaults to `"pending"`; transitions to `"approved"` or `"rejected"` render a `<Tag>` with a `CheckCircle` or `XCircle` icon respectively
+- Both `handleApprove` and `handleReject` set `isProcessing = true` during the async callback, disabling both buttons to prevent double-submission
+- `fields` take rendering priority over `explanation` — if both are provided, only `fields` is shown
+- The command block is scrollable (`max-h-32 overflow-y-auto`) for long commands