@flamingo-stack/openframe-frontend-core 0.0.481 → 0.0.482

package/src/stories/.Tag.stories.md

@@ -1,22 +1,23 @@
-<!-- source-hash: 6142d73d82bfcb3ba377d2f80cb29999 -->
-Storybook stories for the `Tag` UI component, covering all visual variants, icon/close button combinations, disabled states, and composite showcase renders.
+<!-- source-hash: f18130ebfbca951caf39d3dd0646a0a4 -->
+Storybook stories for the `Tag` UI component, covering all variants, icon/close button combinations, disabled states, and composite showcase renders.
 
 ## Key Components
 
 | Export | Description |
-|--------|-------------|
-| `Primary` | Default primary variant |
-| `Outline` | Outline/bordered variant |
-| `Success` / `Warning` / `Error` / `Critical` / `Grey` | Semantic status variants |
-| `WithIcon` | Tag with a leading icon |
-| `WithCloseButton` | Tag with dismissible close handler |
+|---|---|
+| `Primary` | Tag with `primary` variant |
+| `Outline` | Tag with `outline` variant |
+| `Success` / `Warning` / `Error` / `Critical` / `Grey` | Semantic variant stories |
+| `WithIcon` | Tag with a leading lucide icon |
+| `WithCloseButton` | Tag with an `onClose` dismiss handler |
 | `WithIconAndClose` | Tag combining icon and close button |
-| `Disabled` / `AllDisabled` | Disabled state across all variants |
-| `AllVariants` | Showcase of every variant side-by-side |
-| `AllWithIcons` | All variants with icons |
-| `AllWithClose` | All variants with close buttons |
+| `AllVariants` | Side-by-side showcase of all 7 variants |
+| `AllWithIcons` | All variants rendered with icons |
+| `AllWithClose` | All variants rendered with close buttons |
+| `Disabled` | Single disabled tag |
+| `DisabledWithIconAndClose` | Disabled tag with icon and close |
+| `AllDisabled` | All variants in disabled state |
 | `AllWithIconAndClose` | All variants with both icon and close |
-| `DisabledWithIconAndClose` | Disabled state with full feature set |
 
 ## Usage Example
 
@@ -27,26 +28,30 @@ import { Smile } from 'lucide-react';
 // Basic variant
 <Tag variant="success" label="Active" />
 
-// With icon
-<Tag variant="primary" label="Category" icon={<Smile className="size-5" />} />
-
-// Dismissible
-<Tag variant="warning" label="Pending" onClose={() => handleRemove()} />
-
-// Full featured
+// With icon and dismissible close button
 <Tag
-  variant="error"
-  label="Failed"
+  variant="primary"
+  label="Assigned"
   icon={<Smile className="size-5" />}
   onClose={() => handleRemove()}
-  disabled={false}
 />
+
+// Disabled state
+<Tag variant="warning" label="Pending" disabled />
 ```
 
 ## Variants
 
-The `Tag` component supports 7 variants controlled via the Storybook `select` control:
+| Variant | Typical Use |
+|---|---|
+| `primary` | Default / general purpose |
+| `outline` | Subtle / secondary |
+| `success` | Positive status |
+| `warning` | Cautionary status |
+| `error` | Failure / invalid |
+| `critical` | High-severity alert |
+| `grey` | Neutral / inactive |
+
+## Source
 
-```text
-primary | outline | success | warning | error | critical | grey
-```
+[`Tag.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/Tag.stories.tsx)

package/src/stories/.ThinkingDisplay.stories.md

@@ -0,0 +1,43 @@
+<!-- source-hash: ac60f93004b9e402b8bae16130a1e2c8 -->
+Storybook stories for `ThinkingDisplay`, a collapsible reasoning block that surfaces AI "thinking" segments in the chat interface.
+
+## Key Components
+
+| Export | Type | Description |
+|---|---|---|
+| `Thought` | `Story` | Finished thought — collapsed to a single line, expandable via chevron |
+| `Streaming` | `Story` | Active streaming state — shows "Thinking" label with dots loader, collapse disabled |
+| `LongMarkdown` | `Story` | Multi-paragraph markdown thought with headings, lists, and inline code |
+
+## Usage Example
+
+```typescript
+import { ThinkingDisplay } from "../components/chat/thinking-display";
+
+// Completed thought (collapsed by default)
+<ThinkingDisplay text="Homebrew is present, so `brew install --cask slack` is the cleanest path." />
+
+// Actively streaming
+<ThinkingDisplay
+  text="Evaluating install options..."
+  isStreaming={true}
+/>
+```
+
+## Story Variants
+
+| Story | `isStreaming` | Content |
+|---|---|---|
+| `Thought` | `false` | Short single-line reasoning |
+| `Streaming` | `true` | Same short text, streaming UI active |
+| `LongMarkdown` | `false` | Multi-section markdown with bold, numbered list, inline code |
+
+## Notes
+
+- All stories are wrapped in a `640px` max-width container using `--color-bg` to match the chat canvas
+- `autodocs` is enabled — Storybook auto-generates API docs from prop types
+- The decorator (`plainDecorator`) provides consistent padding and background without additional story boilerplate
+
+## Source
+
+[`ThinkingDisplay.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/ThinkingDisplay.stories.tsx)

package/src/stories/.TicketCard.stories.md

@@ -0,0 +1,60 @@
+<!-- source-hash: 683edd8a6fb103f7ce880f7847fc90e2 -->
+Storybook stories for the `TicketCard` board component, covering drag-and-drop context setup and all visual/behavioral variants.
+
+## Key Components
+
+| Export | Type | Description |
+|---|---|---|
+| `Default` | `Story` | Full card with all fields: title, device/org, priority, assignee, tags, timestamp |
+| `Minimal` | `Story` | Only required fields — all optional rows absent |
+| `LongContent` | `Story` | Truncation behavior for long titles and device/org rows |
+| `ManyAssigneesAndTags` | `Story` | Overflow badges (`+N`) for assignees and tag pills |
+| `WithNewMessage` | `Story` | Colored "New Message" tag and tinted card border via `columnColor` |
+| `PendingClientApproval` | `Story` | Collapsed client approval row with approve/reject handlers |
+| `PendingTechApproval` | `Story` | Yellow shield admin approval header variant |
+| `Approved` | `Story` | Green checkmark resolved state |
+| `AsLink` | `Story` | Full-card anchor overlay via `href` |
+| `DragDisabled` | `Story` | Pinned card — no grab cursor, sortable listeners off |
+| `DragOverlay` | `Story` | Drag-overlay presentation (tilted + elevated shadow) |
+| `Priorities` | `Story` | All four priority colors (`low`, `medium`, `high`, `urgent`) side by side |
+| `Harness` | Helper | Wraps `TicketCard` in the minimal `DndContext` + `SortableContext` required by `useSortable` |
+
+## Usage Example
+
+```typescript
+// Render the card in a DnD harness (as stories do)
+import { DndContext } from '@dnd-kit/core'
+import { SortableContext } from '@dnd-kit/sortable'
+import { TicketCard } from '../components/features/board'
+
+const ticket = {
+  id: 'ticket-1',
+  title: 'VPN drops every few minutes',
+  ticketNumber: '#1042',
+  status: 'TECH_REQUIRED',
+  priority: 'high',
+  assignees: [{ id: 'u1', initials: 'RS', name: 'Rachel Santos' }],
+  tags: ['network', 'vpn'],
+  createdAt: new Date().toISOString(),
+}
+
+export function Example() {
+  return (
+    <DndContext>
+      <SortableContext items={[ticket.id]}>
+        <TicketCard
+          ticket={ticket}
+          columnId="TECH_REQUIRED"
+          columnColor="#2890fa"
+          onApprove={(ticketId, requestId) => console.log('approve', ticketId, requestId)}
+          onReject={(ticketId, requestId) => console.log('reject', ticketId, requestId)}
+        />
+      </SortableContext>
+    </DndContext>
+  )
+}
+```
+
+> **Note:** `TicketCard` internally calls `useSortable`, which requires both `DndContext` and `SortableContext` ancestors with the card's own `id` registered. In the app the Board provides these; in isolation (tests, stories) you must supply the `Harness` wrapper shown above.
+
+**Source:** [`TicketCard.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/TicketCard.stories.tsx)

package/src/stories/.TicketInfoSection.stories.md

@@ -1,40 +1,48 @@
-<!-- source-hash: 82f8ca355b8119e08afe608bf0b4cf05 -->
+<!-- source-hash: 9c86c7c558b8e84471d042872e05ba8a -->
 Storybook stories for the `TicketInfoSection` component, covering collapsed, expanded, interactive, and minimal display states of the collapsible ticket info bar.
 
 ## Key Components
 
-- **`Collapsed`** — Default header-only view showing organization, user, device, and status fields
-- **`Expanded`** — Fully populated view with description, attachments, tags, knowledge base articles, and notes
-- **`Interactive`** — Stateful story demonstrating expand/collapse toggle with `useState`, device click handler, and note CRUD callbacks
-- **`Minimal`** — Expanded state with all fields set to "Unassigned", useful for empty-state validation
+| Export | Description |
+|---|---|
+| `Collapsed` | Default collapsed header row showing org, user, device, and status |
+| `Expanded` | Fully populated expanded state with description, attachments, tags, notes, and assignee |
+| `Interactive` | Stateful story demonstrating live expand/collapse toggling with `useState` |
+| `Minimal` | Expanded state with no optional data beyond required fields and assignee options |
 
 ## Usage Example
 
 ```typescript
-import { TicketInfoSection } from '../components/ui/ticket-info-section';
-
-// Basic collapsed header
+// Collapsed header row
 <TicketInfoSection
   organization={{ name: 'Acme Corp' }}
-  user="John Doe"
+  user="Unassigned"
   device={{ name: 'WIN-SERVER-01', icon: <Monitor className="size-4" /> }}
   status="TECH_REQUIRED"
   expanded={false}
 />
 
-// Expanded with notes and attachments
+// Expanded with full detail sections
 <TicketInfoSection
   organization={{ name: 'Acme Corp' }}
-  user="John Doe"
-  device={{ name: 'WIN-SERVER-01' }}
-  status="ACTIVE"
+  user="Unassigned"
+  device={{ name: 'WIN-SERVER-01', icon: <Monitor className="size-4" /> }}
+  status="TECH_REQUIRED"
   expanded={true}
-  notes={mockNotes}
+  assigned={{
+    currentAssignee: { id: 'u1', name: 'Roman Smith' },
+    options: [{ value: 'u1', label: 'Roman Smith' }],
+    onAssign={(userId) => console.log('Assigned:', userId)}
+  }}
+  createdAt="2025/07/12, 22:27"
+  description="Ticket description with **markdown** support."
   attachments={mockAttachments}
-  knowledgeBaseArticles={mockArticles}
-  tags={['Client-onboarding']}
-  onAddNote={(text) => console.log('Add note:', text)}
-  onEditNote={(id) => console.log('Edit note:', id)}
-  onDeleteNote={(id) => console.log('Delete note:', id)}
+  tags={['Client-onboarding', 'Process-management']}
+  notes={mockNotes}
+  onAddNote={(text) => console.log('Note added:', text)}
+  onEditNote={(id) => console.log('Note edited:', id)}
+  onDeleteNote={(id) => console.log('Note deleted:', id)}
 />
-```
+```
+
+**Source:** [`TicketInfoSection.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/TicketInfoSection.stories.tsx)

package/src/stories/.TimeTracker.stories.md

@@ -0,0 +1,35 @@
+<!-- source-hash: f40f70a6039dee228c17777e9753c266 -->
+Storybook stories for the `TimeTracker` feature, providing interactive demos of the time tracker panel and header button across all status states, along with a full playground with simulated server-side ticket search.
+
+## Key Components
+
+- **`useTimeTrackerHost`** — Custom React hook that simulates the OpenFrame frontend backend: manages timer state transitions (`ready` → `tracking` → `paused`), ticket search (sync or async with 350ms debounce), and entry persistence
+- **`HeaderBar`** — Mock app header strip used to correctly anchor the `TimeTrackerHeaderButton` popover
+- **Panel Stories** — `PanelReady`, `PanelTracking`, `PanelPaused`, `PanelFinishGate`, `PanelNoEntries`
+- **Header Button Stories** — `HeaderButtonIdle`, `HeaderButtonTracking`, `HeaderButtonPaused`
+- **`Playground`** — Fully interactive story combining provider, header button, and async ticket search
+
+## Usage Example
+
+```typescript
+// Minimal host setup for a custom story
+function MyStory() {
+  const host = useTimeTrackerHost({
+    status: 'tracking',
+    runningSince: Date.now() - 30_000,
+    selectedTicketId: 'TICK-102',
+    serverSearch: true, // enables async ticket filtering
+  })
+
+  return (
+    <TimeTrackerProvider {...host}>
+      <HeaderBar />
+      <TimeTrackerPanel {...host} onClose={() => {}} />
+    </TimeTrackerProvider>
+  )
+}
+```
+
+The `HostInit` interface accepts `status`, `runningSince`, `accumulatedMs`, `selectedTicketId`, `notes`, `lastEntries`, and `serverSearch` to seed each story's initial state. `formatDuration` and `formatDate` are used internally to format submitted entries.
+
+**Source:** [`TimeTracker.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/TimeTracker.stories.tsx)

package/src/stories/.Toaster.stories.md

@@ -1,40 +1,46 @@
-<!-- source-hash: 8385ab6a043167836b17b6b41deb0581 -->
-Storybook stories for the `Toaster` / `ToastCard` component system, covering static previews, interactive playground, command-approval flows, and live Sonner-powered triggers.
+<!-- source-hash: a4b281a933e60702674f5785f8ad266a -->
+Storybook stories for the `Toaster` component system, providing static previews and interactive demos for toast notifications built on Sonner with ODS-styled cards.
 
 ## Key Components
 
 | Export | Type | Description |
-|--------|------|-------------|
-| `AllVariants` | Story | Static grid of every `ToastVariant` (`default`, `success`, `warning`, `error`, `info`) plus edge cases (title-only, description-only, non-dismissible, persistent) |
-| `Playground` | Story | Arg-driven interactive card — use Storybook Controls to tweak `variant`, `title`, `description`, `duration`, and `dismissible` |
+|---|---|---|
+| `AllVariants` | Story | Static grid showing all five toast variants plus edge cases (title-only, description-only, non-dismissible, persistent) |
+| `Playground` | Story | Interactive arg-driven story for tweaking `ToastCard` props via Storybook controls |
 | `CommandApprovalCollapsed` | Story | `CommandApprovalToast` in its default collapsed state |
-| `CommandApprovalExpanded` | Story | `CommandApprovalToast` with `defaultExpanded` showing the command preview and Approve/Reject actions |
-| `CommandApprovalPerTool` | Story | One expanded approval toast per supported tool type (`FLEET_MDM`, `MESHCENTRAL`, `AUTHENTIK`, `OSQUERY`, `OPENFRAME`) to verify icon mapping |
-| `CommandApprovalLive` | Story | Fires real Sonner toasts via `showCommandApprovalToast()` with `onApprove`/`onReject` callbacks |
-| `LiveTriggers` | Story | Button panel that fires every variant as a live Sonner toast using both `toast()` and `showToast()` |
+| `CommandApprovalExpanded` | Story | `CommandApprovalToast` pre-expanded to show command preview and Approve/Reject actions |
+| `CommandApprovalPerTool` | Story | Renders one approval toast per supported tool type to verify icon mapping |
+| `CommandApprovalLive` | Story | Fires real Sonner toasts via `showCommandApprovalToast()` with approve/reject callbacks |
+| `LiveTriggers` | Story | Button grid for firing all five variants plus edge cases using the live `toast()` and `showToast()` APIs |
 
 ## Usage Example
 
 ```typescript
-// Render once near your app root
-import { Toaster } from '@/components/ui/toaster';
-<Toaster />
+// Fire a warning toast from anywhere in the app
+import { showToast } from '../components/ui/toaster';
 
-// Fire a standard toast from anywhere
-import { toast } from '@/hooks/use-toast';
-toast({ variant: 'success', title: 'Saved', description: 'All changes committed.' });
+showToast({
+  variant: 'warning',
+  title: 'Device Package limit',
+  description: 'Extra devices will be billed at pay-as-you-go rates.',
+  duration: 4000,
+  dismissible: true,
+});
+
+// Fire a command approval toast with action callbacks
+import { showCommandApprovalToast } from '../components/ui/toaster';
+import { toast } from '../hooks/use-toast';
+import { ToolTypeValues } from '../types/tool.types';
 
-// Fire a command-approval toast requiring tech sign-off
-import { showCommandApprovalToast } from '@/components/ui/toaster';
 showCommandApprovalToast({
   title: 'Tech Required',
   description: 'Approval is required to execute the command.',
   command: 'fleetctl query --hosts mac-* "SELECT * FROM system_info"',
   toolType: ToolTypeValues.FLEET_MDM,
-  approvalDescription: 'Queries system info across all macOS endpoints.',
+  approvalDescription: 'Queries system info across all macOS hosts.',
   onApprove: () => toast({ variant: 'success', title: 'Command approved' }),
-  onReject:  () => toast({ variant: 'error',   title: 'Command rejected' }),
+  onReject: () => toast({ variant: 'error', title: 'Command rejected' }),
 });
 ```
 
-> **Note:** `<Toaster />` must be mounted in the render tree for live stories (`CommandApprovalLive`, `LiveTriggers`) — both stories include it inline so the Storybook canvas is self-contained.
+Place `<Toaster />` once near your app root to render the Sonner portal. Supported variants: `default`, `success`, `warning`, `error`, `info`.

package/src/stories/.ToolBadge.stories.md

@@ -1,33 +1,43 @@
-<!-- source-hash: 1f71a33edd36a6a22cc6854ed4e9a2c8 -->
-Storybook configuration file for the ToolBadge component, providing interactive examples and documentation for all supported OpenFrame integrated tool types.
+<!-- source-hash: 8a4662b67f2730f64ed12f36116fd1a5 -->
+Storybook stories for the `ToolBadge` component, covering all supported OpenFrame tool type variants with individual and combined display stories.
 
 ## Key Components
 
-- **meta**: Main Storybook configuration with component metadata, controls, and documentation
-- **Story exports**: Individual stories showcasing different tool types (Fleet MDM, MeshCentral, etc.)
-- **AllTools story**: Comparison view showing multiple tool badges together
-- **argTypes**: Interactive controls for `toolType` selection and `className` customization
+| Export | Type | Description |
+|--------|------|-------------|
+| `Default` | `Story` | `OPENFRAME_RMM` badge |
+| `Fleet` | `Story` | `FLEET_MDM` badge |
+| `MeshCentral` | `Story` | `MESHCENTRAL` badge |
+| `Authentik` | `Story` | `AUTHENTIK` badge |
+| `OpenFrame` | `Story` | `OPENFRAME` badge |
+| `OpenFrameChat` | `Story` | `OPENFRAME_CHAT` badge |
+| `OpenFrameClient` | `Story` | `OPENFRAME_CLIENT` badge |
+| `System` | `Story` | `SYSTEM` badge |
+| `AllTools` | `Story` | Side-by-side comparison of all badges |
+
+**Supported `toolType` values:** `OPENFRAME_RMM` · `FLEET_MDM` · `MESHCENTRAL` · `AUTHENTIK` · `OPENFRAME` · `OPENFRAME_CHAT` · `OPENFRAME_CLIENT` · `SYSTEM`
 
 ## Usage Example
 
 ```typescript
-// Individual tool badge stories
-export const Default: Story = {
-  args: {
-    toolType: 'OPENFRAME_RMM',
-  },
-};
-
-// Custom render for multiple badges
-export const AllTools: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
-      <ToolBadge toolType="OPENFRAME" />
-      <ToolBadge toolType="FLEET_MDM" />
-      <ToolBadge toolType="MESHCENTRAL" />
-    </div>
-  ),
-};
+import { ToolBadge } from '../components/platform/ToolBadge';
+
+// Single badge
+<ToolBadge toolType="OPENFRAME_RMM" />
+
+// With optional class override
+<ToolBadge toolType="FLEET_MDM" className="my-custom-class" />
+
+// Inline comparison (mirrors AllTools story)
+<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+  <ToolBadge toolType="OPENFRAME" />
+  <ToolBadge toolType="OPENFRAME_CHAT" />
+  <ToolBadge toolType="OPENFRAME_CLIENT" />
+</div>
 ```
 
-This Storybook configuration enables developers and designers to preview all available tool badge variants, test different configurations, and understand the component's visual hierarchy within the OpenFrame platform interface.
+## Notes
+
+- Stories live under the **Platform/ToolBadge** Storybook path with `autodocs` enabled.
+- The `toolType` arg is exposed as a `select` control in the Storybook UI, making it easy to cycle through all tool types interactively.
+- See [`ToolBadge`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/components/platform/ToolBadge.tsx) and [`ToolType`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/types/tool.types.ts) for implementation details.

package/src/stories/.ToolExecutionDisplay.stories.md

@@ -1,14 +1,22 @@
-<!-- source-hash: 5d594bd4947331ddd5432015be5899f2 -->
-Storybook stories for the `ToolExecutionDisplay` chat component, covering executing, success, and failure states in a constrained-width layout.
+<!-- source-hash: 533347f65ca290eed5d328bc474e10fa -->
+Storybook stories for the `ToolExecutionDisplay` chat component, covering executing, success, and failure states in both collapsed and expanded views.
 
 ## Key Components
 
 | Export | Description |
-|--------|-------------|
-| `CollapsedExecuting` | Spinner state while a tool (e.g. `run_script` via OpenFrame RMM) is in progress |
-| `CollapsedSuccess` | Green check state after successful tool execution, with result output |
-| `CollapsedFailure` | Red error icon state after a failed tool execution (e.g. Fleet MDM profile deploy) |
-| `constrainedDecorator` | Helper decorator that wraps stories in a `max-width` container (default 400px) |
+|---|---|
+| `CollapsedExecuting` | Story showing spinner state while a tool is actively running |
+| `CollapsedSuccess` | Story showing green check after successful RMM script execution |
+| `CollapsedFailure` | Story showing red error icon after a failed MDM profile deployment |
+| `constrainedDecorator` | Helper that wraps stories in a max-width container (default 400px) to simulate chat bubble constraints |
+
+### Fixture Data
+
+| Variable | Type | Description |
+|---|---|---|
+| `executingMessage` | `ToolExecutionData` | In-progress RMM `run_script` call |
+| `executedSuccessMessage` | `ToolExecutionData` | Completed RMM `run_script` with process list output |
+| `executedFailureMessage` | `ToolExecutionData` | Failed Fleet MDM `deploy_profile` with error string |
 
 ## Usage Example
 
@@ -17,25 +25,19 @@ import { ToolExecutionDisplay } from "../components/chat/tool-execution-display"
 import type { ToolExecutionData } from "../components/chat/types";
 
 const message: ToolExecutionData = {
-  type: "EXECUTED_TOOL",
+  type: "EXECUTING_TOOL",
   integratedToolType: "OPENFRAME_RMM",
   toolFunction: "run_script",
   parameters: { RunAsUser: "False", timeoutSeconds: 60 },
-  result: "Script output here...",
-  success: true,
 };
 
+// Render the component directly in your chat UI
 <ToolExecutionDisplay message={message} />
 ```
 
-## Story Data
-
-Three fixture payloads cover the core display states:
-
-| Fixture | `type` | `integratedToolType` | `success` |
-|---------|--------|----------------------|-----------|
-| `executingMessage` | `EXECUTING_TOOL` | `OPENFRAME_RMM` | — |
-| `executedSuccessMessage` | `EXECUTED_TOOL` | `OPENFRAME_RMM` | `true` |
-| `executedFailureMessage` | `EXECUTED_TOOL` | `FLEET_MDM` | `false` |
+## Notes
 
-The component renders a collapsed card by default; clicking toggles full details including parameters and result output.
+- Stories are registered under `Chat/Admin/ToolExecutionDisplay` in Storybook.
+- The `constrainedDecorator` accepts an optional `width` argument (default `400`) to test layout at narrow chat widths.
+- The success fixture includes a realistic suspicious process output to validate result rendering.
+- Source: [`ToolExecutionDisplay.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/ToolExecutionDisplay.stories.tsx)

package/src/stories/.ToolExecutionDisplayClient.stories.md

@@ -0,0 +1,33 @@
+<!-- source-hash: 31d09281389b3132fd1d2113059efe86 -->
+Storybook stories for the **client (Fae) variant** of `ToolExecutionDisplay`, demonstrating the component rendered with `assistantType="fae"` — which hides the tool icon compared to the Admin variant.
+
+## Key Components
+
+| Export | Type | Description |
+|---|---|---|
+| `CollapsedExecuting` | `Story` | Card in executing state — spinner, 2-line parameter preview, no tool icon |
+| `CollapsedSuccess` | `Story` | Card in success state — green check indicator, no tool icon |
+| `meta` | `Meta` | Storybook metadata registering under `Chat/Client/ToolExecutionDisplay` with `assistantType: "fae"` default arg |
+
+## Usage Example
+
+```typescript
+// Render the Fae (client) tool-execution card directly in tests or other stories
+import { ToolExecutionDisplay } from "../components/chat/tool-execution-display";
+import type { ToolExecutionData } from "../components/chat/types";
+
+const message: ToolExecutionData = {
+  type: "EXECUTING_TOOL",
+  integratedToolType: "OPENFRAME_RMM",
+  toolFunction: "run_script",
+  parameters: { RunAsUser: "False", timeoutSeconds: 60 },
+};
+
+<ToolExecutionDisplay assistantType="fae" message={message} />;
+```
+
+## Notes
+
+- `assistantType="fae"` is the only prop that differentiates this from the Admin card — no other props or component logic differs.
+- The `constrainedDecorator` wraps each story in a `400px` max-width container with the design-system background token (`--color-bg`) to approximate the chat panel context.
+- Source: [`ToolExecutionDisplayClient.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/ToolExecutionDisplayClient.stories.tsx)

package/src/stories/.VideoBitesStrip.stories.md

@@ -0,0 +1,37 @@
+<!-- source-hash: 382f5135f62cf6f535679afcc02e0379 -->
+Storybook stories for the `VideoBitesStrip` feature component, covering mixed aspect ratios, marquee behavior, thumbnail fallbacks, auto-scroll toggling, and unpublished filtering.
+
+## Key Components
+
+| Export | Type | Description |
+|---|---|---|
+| `MixedRatiosMarquee` | `Story` | Seven bites with mixed aspect ratios; marquee activates on overflow |
+| `TwoBitesNoMarquee` | `Story` | Two bites — no overflow, no marquee, no clone rows, no chevrons |
+| `NoThumbnails` | `Story` | All thumbnails stripped; verifies `PlayIcon` fallback and hover-mount preview |
+| `AutoScrollDisabled` | `Story` | `autoScroll=false` — plain scrollable row with chevrons only |
+| `AllUnpublishedRendersNull` | `Story` | All bites unpublished; asserts component returns `null` |
+
+**Helpers**
+
+- `bite(over)` — factory that merges partial `VideoBiteStripItem` overrides onto a base fixture, using public-domain Google CDN MP4s for realistic hover-preview testing
+- `PROFILE` — shared presenter profile fixture (`name`, `avatarUrl`, `subtitle`)
+- `MANY_MIXED` — seven-item array covering portrait, landscape, square, and no-thumbnail variants
+
+## Usage Example
+
+```typescript
+import { MixedRatiosMarquee } from './VideoBitesStrip.stories'
+
+// Render the story directly in a test or composition
+<MixedRatiosMarquee.args.bites /> // not typical — use via Storybook or play() functions
+
+// Or compose your own fixture with the bite() pattern:
+const items: VideoBiteStripItem[] = [
+  bite({ title: 'Custom Clip', aspect_ratio: '16:9' }),
+  bite({ title: 'No Thumb', thumbnail_url: undefined }),
+]
+```
+
+## Source
+
+[`VideoBitesStrip.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/VideoBitesStrip.stories.tsx)

package/src/stories/.WarningBlock.stories.md

@@ -0,0 +1,51 @@
+<!-- source-hash: 71794302d8c9acc340a02fd7550a5df2 -->
+Storybook stories for the `WarningBlock` component, demonstrating all usage variants from minimal banners to the full New Device onboarding warning stack.
+
+## Key Components
+
+| Export | Description |
+|---|---|
+| `Default` | Minimal story — banner title with a single description paragraph |
+| `AntivirusWarning` | Warning with a `PathsDisplay` exclusion folder list and closing text |
+| `DoctorMode` | Warning with a descriptive paragraph and a single copyable doctor command |
+| `AdministratorPrivileges` | Warning with a platform icon row (no copy button) framed by paragraphs |
+| `NewDeviceBlocks` | All three New Device warnings stacked, matching the Figma layout |
+
+## Usage Example
+
+```typescript
+// Minimal warning block
+<WarningBlock title="Administrator privileges are required.">
+  <p className="text-h4 text-ods-text-primary">
+    Run the command with appropriate permissions for your platform.
+  </p>
+</WarningBlock>
+
+// With PathsDisplay — antivirus exclusion paths
+<WarningBlock title="Your antivirus may block OpenFrame installation.">
+  <PathsDisplay
+    title="Add these folders to your antivirus exclusions list:"
+    paths={[
+      'C:\\Program Files\\OpenFrame\\',
+      'C:\\Users\\[Username]\\AppData\\Local\\OpenFrame\\',
+    ]}
+    onCopyPath={(path) => navigator.clipboard.writeText(path)}
+  />
+</WarningBlock>
+
+// With OSTypeIcon — no copy button, platform-specific instruction
+<WarningBlock title="Administrator privileges are required.">
+  <PathsDisplay
+    paths={['Run PowerShell as Local Administrator']}
+    showCopyButtons={false}
+    leadingIcon={<OSTypeIcon osType="windows" size="w-6 h-6" />}
+  />
+</WarningBlock>
+```
+
+## Notes
+
+- Body content is fully composable via `children` — mix paragraphs and multiple `PathsDisplay` lists freely.
+- Typography scales via ODS tokens: `14px` on mobile, `18px` from `md` breakpoint up.
+- The `OPENFRAME_DOCTOR_COMMANDS` constant from `PathsDisplay` provides the canonical doctor command strings per platform.
+- Source: [`WarningBlock.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/WarningBlock.stories.tsx)