@flamingo-stack/openframe-frontend-core 0.0.715 → 0.0.716

package/dist/index.js

@@ -33,7 +33,7 @@ import {
   isMegaMenu,
   navLinkLabel,
   siteNavHasMobileMenus
-} from "./chunk-JHSPIDV5.js";
+} from "./chunk-BVZ7W4HW.js";
 import {
   MobileNavigationDropdown,
   MultiLevelNavigation,
@@ -73,6 +73,7 @@ import {
   AlertDialogTrigger,
   AlertTitle,
   AllowedDomainsInput,
+  AnalyzingState,
   AnnouncementBarView,
   AppLayoutDrawerBody,
   AppLayoutDrawerClose,
@@ -85,8 +86,7 @@ import {
   AppLayoutDrawerTrigger,
   AppStoreBadge,
   AppWindowFrame,
-  ApprovalLevelControl,
-  ApprovalLevelMark,
+  ApprovalLevelView,
   ApprovalRequestNotificationTile,
   ArrayEntryManager,
   ArticleDetailLayout,
@@ -565,7 +565,7 @@ import {
   useTrackerClock,
   useWalkthroughVideo,
   usersCountLabel
-} from "./chunk-2LZ3IYGT.js";
+} from "./chunk-C5AGSZBT.js";
 import {
   Board,
   BoardColumn,
@@ -2129,6 +2129,7 @@ export {
   AlertTitle,
   AlertTriangleIcon,
   AllowedDomainsInput,
+  AnalyzingState,
   AnnouncementBarView,
   AppHeader,
   AppLayout,
@@ -2145,8 +2146,7 @@ export {
   AppWindowFrame,
   AppleIcon,
   ApprovalBatchMessage,
-  ApprovalLevelControl,
-  ApprovalLevelMark,
+  ApprovalLevelView,
   ApprovalRequestMessage,
   ApprovalRequestNotificationTile,
   ApprovalStatusTag,

package/dist/{knowledge-GDMGHFEC.cjs → knowledge-LHQYZJE7.cjs}

@@ -8,7 +8,7 @@ var _chunkII4QMH26cjs = require('./chunk-II4QMH26.cjs');
 var _chunkKHXZFLINcjs = require('./chunk-KHXZFLIN.cjs');
 
 
-var _chunkZSJ6WWFHcjs = require('./chunk-ZSJ6WWFH.cjs');
+var _chunkS2VWQX6Tcjs = require('./chunk-S2VWQX6T.cjs');
 require('./chunk-4HJRHEXD.cjs');
 require('./chunk-HQQE74RO.cjs');
 require('./chunk-DEY6XXGO.cjs');
@@ -96,7 +96,7 @@ function KnowledgeScreen(_props) {
   const cast = _chunkII4QMH26cjs.useProductDemoCast.call(void 0, );
   const fixture = _react.useMemo.call(void 0, () => buildKnowledgeFixture(cast), [cast]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full bg-ods-bg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkZSJ6WWFHcjs.KnowledgeBaseArticleView,
+    _chunkS2VWQX6Tcjs.KnowledgeBaseArticleView,
     {
       ...fixture.article,
       content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHETQETPVcjs.SimpleMarkdownRenderer, { content: fixture.content, textSize: "compact" })

package/dist/{knowledge-YWCB7HNC.js → knowledge-YCQITBJB.js}

@@ -8,7 +8,7 @@ import {
 } from "./chunk-CYUUHFXL.js";
 import {
   KnowledgeBaseArticleView
-} from "./chunk-2LZ3IYGT.js";
+} from "./chunk-C5AGSZBT.js";
 import "./chunk-ILNN6QRW.js";
 import "./chunk-LQYXMEYF.js";
 import "./chunk-4JPLYOS6.js";

package/dist/{logs-7QDRV3GN.cjs → logs-DUVKSQU3.cjs}

@@ -16,7 +16,7 @@ var _chunkKHXZFLINcjs = require('./chunk-KHXZFLIN.cjs');
 
 
 
-var _chunkZSJ6WWFHcjs = require('./chunk-ZSJ6WWFH.cjs');
+var _chunkS2VWQX6Tcjs = require('./chunk-S2VWQX6T.cjs');
 require('./chunk-4HJRHEXD.cjs');
 require('./chunk-HQQE74RO.cjs');
 require('./chunk-DEY6XXGO.cjs');
@@ -77,7 +77,7 @@ function entry(logId, minutesAgo, severity, toolType, device2, summary) {
     id: logId,
     logId,
     timestamp: displayTime(_chunkKHXZFLINcjs.demoMinutesAgo.call(void 0, minutesAgo)),
-    status: { label: severity, variant: _chunkZSJ6WWFHcjs.logSeverityVariant.call(void 0, severity) },
+    status: { label: severity, variant: _chunkS2VWQX6Tcjs.logSeverityVariant.call(void 0, severity) },
     source: { name: toolType, toolType },
     device: device2,
     description: { title: summary }
@@ -149,13 +149,13 @@ var NO_FILTERS = {};
 var ACTION_COLUMNS = ["copy", "quickView", "open"];
 var BESIDE_DRAWER_HIDDEN = [...ACTION_COLUMNS, "tool", "source"];
 var logHref = () => "#";
-var copyAction = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZSJ6WWFHcjs.LogCopyIconButton, {});
+var copyAction = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkS2VWQX6Tcjs.LogCopyIconButton, {});
 function LogsScreen({ compact = false }) {
   const [dock, setDock] = _react.useState.call(void 0, null);
   const selected = LOGS_FIXTURE_SELECTED;
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full bg-ods-bg", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "min-w-0 flex-1 overflow-clip", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkZSJ6WWFHcjs.LogsPageView,
+      _chunkS2VWQX6Tcjs.LogsPageView,
       {
         showHeader: false,
         className: "p-[var(--spacing-system-l)]",
@@ -163,7 +163,7 @@ function LogsScreen({ compact = false }) {
         onSearchChange: noop,
         onOpenFilters: noop,
         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkZSJ6WWFHcjs.LogsTableView,
+          _chunkS2VWQX6Tcjs.LogsTableView,
           {
             logs: LOGS_FIXTURE_ENTRIES,
             facets: LOGS_FIXTURE_FACETS,
@@ -177,8 +177,8 @@ function LogsScreen({ compact = false }) {
         )
       }
     ) }),
-    !compact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: setDock, className: "relative w-[calc(400px+var(--spacing-system-m))] shrink-0", children: dock && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZSJ6WWFHcjs.AppLayoutDrawerContainerContext.Provider, { value: dock, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkZSJ6WWFHcjs.LogDrawer,
+    !compact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: setDock, className: "relative w-[calc(400px+var(--spacing-system-m))] shrink-0", children: dock && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkS2VWQX6Tcjs.AppLayoutDrawerContainerContext.Provider, { value: dock, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkS2VWQX6Tcjs.LogDrawer,
       {
         docked: true,
         isOpen: true,
@@ -190,12 +190,12 @@ function LogsScreen({ compact = false }) {
           { label: "Log ID", value: selected.logId },
           {
             label: "Source",
-            value: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZSJ6WWFHcjs.ToolBadge, { toolType: _chunkHETQETPVcjs.normalizeToolTypeWithFallback.call(void 0, selected.source.toolType) })
+            value: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkS2VWQX6Tcjs.ToolBadge, { toolType: _chunkHETQETPVcjs.normalizeToolTypeWithFallback.call(void 0, selected.source.toolType) })
           },
-          { label: "Device", value: _chunkZSJ6WWFHcjs.logSourceLabels.call(void 0, selected.device).deviceName }
+          { label: "Device", value: _chunkS2VWQX6Tcjs.logSourceLabels.call(void 0, selected.device).deviceName }
         ],
         deviceCard: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkZSJ6WWFHcjs.DeviceCard,
+          _chunkS2VWQX6Tcjs.DeviceCard,
           {
             ...LOGS_FIXTURE_DEVICE,
             actions: {

package/dist/{logs-E742S5A2.js → logs-LZNXGOSW.js}

@@ -16,7 +16,7 @@ import {
   ToolBadge,
   logSeverityVariant,
   logSourceLabels
-} from "./chunk-2LZ3IYGT.js";
+} from "./chunk-C5AGSZBT.js";
 import "./chunk-ILNN6QRW.js";
 import "./chunk-LQYXMEYF.js";
 import "./chunk-4JPLYOS6.js";

package/dist/{policies-BEVF6AEM.cjs → policies-5H74FS4S.cjs}

@@ -10,7 +10,7 @@ var _chunkKHXZFLINcjs = require('./chunk-KHXZFLIN.cjs');
 
 
 
-var _chunkZSJ6WWFHcjs = require('./chunk-ZSJ6WWFH.cjs');
+var _chunkS2VWQX6Tcjs = require('./chunk-S2VWQX6T.cjs');
 require('./chunk-4HJRHEXD.cjs');
 require('./chunk-HQQE74RO.cjs');
 require('./chunk-DEY6XXGO.cjs');
@@ -82,14 +82,14 @@ var POLICIES = [
   policy("policy-local-admins", "No local admins", "No everyday account is a local administrator.", false, 0)
 ];
 var POLICIES_FIXTURE = {
-  summary: _chunkZSJ6WWFHcjs.computePolicySummary.call(void 0, POLICIES),
+  summary: _chunkS2VWQX6Tcjs.computePolicySummary.call(void 0, POLICIES),
   rows: POLICIES.map((item) => ({
     id: item.id,
     name: item.name,
     description: item.description,
     critical: item.critical,
     severityLabel: item.critical ? "Critical" : "Low",
-    status: _chunkZSJ6WWFHcjs.getPolicyTableStatus.call(void 0, item),
+    status: _chunkS2VWQX6Tcjs.getPolicyTableStatus.call(void 0, item),
     actions: [
       { label: "Policy Details", onClick: noop },
       { label: "Delete Policy", onClick: noop }
@@ -103,16 +103,16 @@ var POLICIES_FIXTURE = {
 var _jsxruntime = require('react/jsx-runtime');
 function PoliciesScreen({ compact = false }) {
   const table = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkZSJ6WWFHcjs.PoliciesTable,
+    _chunkS2VWQX6Tcjs.PoliciesTable,
     {
       rows: POLICIES_FIXTURE.rows,
       rowAsLink: true,
-      rightSlot: compact ? void 0 : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZSJ6WWFHcjs.DataTable.RowCount, {}),
+      rightSlot: compact ? void 0 : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkS2VWQX6Tcjs.DataTable.RowCount, {}),
       emptyMessage: "No policies found."
     }
   );
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col gap-[var(--spacing-system-l)] bg-ods-bg p-[var(--spacing-system-l)]", children: [
-    !compact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZSJ6WWFHcjs.PolicySummaryCards, { summary: POLICIES_FIXTURE.summary, now: POLICIES_FIXTURE.now }),
+    !compact && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkS2VWQX6Tcjs.PolicySummaryCards, { summary: POLICIES_FIXTURE.summary, now: POLICIES_FIXTURE.now }),
     table
   ] });
 }

package/dist/{policies-XTPAKRHI.js → policies-VYWOJ7IF.js}

@@ -10,7 +10,7 @@ import {
   PolicySummaryCards,
   computePolicySummary,
   getPolicyTableStatus
-} from "./chunk-2LZ3IYGT.js";
+} from "./chunk-C5AGSZBT.js";
 import "./chunk-ILNN6QRW.js";
 import "./chunk-LQYXMEYF.js";
 import "./chunk-4JPLYOS6.js";

package/dist/{software-update-FXWIEKSW.js → software-update-MSDY3OLX.js}

@@ -16,7 +16,7 @@ import {
   PACKAGE_SEARCH_LABEL,
   PACKAGE_SEARCH_PLACEHOLDER,
   SoftwareActionForm
-} from "./chunk-2LZ3IYGT.js";
+} from "./chunk-C5AGSZBT.js";
 import "./chunk-ILNN6QRW.js";
 import "./chunk-LQYXMEYF.js";
 import "./chunk-4JPLYOS6.js";

package/dist/{software-update-KPHX4XQ7.cjs → software-update-VRRX5U4W.cjs}

@@ -16,7 +16,7 @@ var _chunkKHXZFLINcjs = require('./chunk-KHXZFLIN.cjs');
 
 
 
-var _chunkZSJ6WWFHcjs = require('./chunk-ZSJ6WWFH.cjs');
+var _chunkS2VWQX6Tcjs = require('./chunk-S2VWQX6T.cjs');
 require('./chunk-4HJRHEXD.cjs');
 require('./chunk-HQQE74RO.cjs');
 require('./chunk-DEY6XXGO.cjs');
@@ -114,14 +114,14 @@ var noop = () => {
 var HIDDEN_WHEN_COMPACT = ["organization"];
 function StaticPackageField({ value }) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkZSJ6WWFHcjs.Autocomplete,
+    _chunkS2VWQX6Tcjs.Autocomplete,
     {
-      label: _chunkZSJ6WWFHcjs.PACKAGE_SEARCH_LABEL,
+      label: _chunkS2VWQX6Tcjs.PACKAGE_SEARCH_LABEL,
       labelVariant: "large",
       options: value ? [{ value: value.id, label: value.name, description: _nullishCoalesce(value.description, () => ( void 0)) }] : [],
       value: _nullishCoalesce(_optionalChain([value, 'optionalAccess', _ => _.id]), () => ( null)),
       onChange: noop,
-      placeholder: _chunkZSJ6WWFHcjs.PACKAGE_SEARCH_PLACEHOLDER
+      placeholder: _chunkS2VWQX6Tcjs.PACKAGE_SEARCH_PLACEHOLDER
     }
   );
 }
@@ -135,7 +135,7 @@ function SoftwareUpdateScreen({ compact = false }) {
     [fixture.devices, fixture.selectedIds]
   );
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full bg-ods-bg pt-[var(--spacing-system-l)]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkZSJ6WWFHcjs.SoftwareActionForm,
+    _chunkS2VWQX6Tcjs.SoftwareActionForm,
     {
       action: fixture.action,
       showHeader: false,
@@ -147,7 +147,7 @@ function SoftwareUpdateScreen({ compact = false }) {
       initialValues: fixture.initialValues,
       renderPackageSearch,
       renderDevicePicker: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkZSJ6WWFHcjs.DeviceSelector,
+        _chunkS2VWQX6Tcjs.DeviceSelector,
         {
           devices: selected,
           loading: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.715",
+  "version": "0.0.716",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/features/approval-level.tsx

@@ -30,8 +30,8 @@ export interface ApprovalLevelMeta {
 
 /**
  * THE look and wording of an approval level: its name, its one-line meaning,
- * its icon and its colour. The guardrails panel's dropdown, the icon control
- * below and any read-only mark read it, so a level is the same everywhere.
+ * its icon and its colour. The guardrails panel's dropdown and `ApprovalLevelView`
+ * below read it, so a level is the same everywhere.
  */
 export const APPROVAL_LEVEL_META: Record<ApprovalLevel, ApprovalLevelMeta> = {
   ALLOW: {
@@ -57,61 +57,79 @@ export const APPROVAL_LEVEL_META: Record<ApprovalLevel, ApprovalLevelMeta> = {
 
 const ICON_PX = 16;
 
-export interface ApprovalLevelMarkProps {
-  level: ApprovalLevel;
-  /** Icon only: the name is the mark's accessible name and its tooltip. Default false (icon and name). */
-  iconOnly?: boolean;
-  className?: string;
-}
-
-/** One level, read-only: its icon in its colour, with its name beside it or as its tooltip. */
-export function ApprovalLevelMark({ level, iconOnly = false, className }: ApprovalLevelMarkProps) {
-  const { label, hint, Icon, toneClassName } = APPROVAL_LEVEL_META[level];
-  const mark = (
-    <span className={cn('inline-flex items-center gap-[var(--spacing-system-xxs)] text-h6', toneClassName, className)}>
-      <Icon size={ICON_PX} className="shrink-0" aria-hidden />
-      {iconOnly ? <span className="sr-only">{label}</span> : label}
-    </span>
-  );
-  return iconOnly ? (
-    <TouchFriendlyTooltip content={`${label}: ${hint}`} side="top">
-      {mark}
-    </TouchFriendlyTooltip>
-  ) : (
-    mark
-  );
-}
-
-export interface ApprovalLevelControlProps {
+export interface ApprovalLevelViewProps {
+  /** The level in force. */
   value: ApprovalLevel;
-  onChange: (level: ApprovalLevel) => void;
-  /** The id of the element that names what is being decided (the rule's label). */
-  'aria-labelledby'?: string;
-  /** The level in force, written beside the icons. Default true: a row reads without hovering, and on touch. */
-  showLabel?: boolean;
+  /**
+   * Whether the level can be changed here. `false`: the level's own icon.
+   * `true`: four icons, one per level, in a single-choice group. Default: true
+   * when `onChange` is given.
+   */
+  editable?: boolean;
+  /** Editable: the level picked. */
+  onChange?: (level: ApprovalLevel) => void;
+  /** Editable: the group is shown and cannot be changed (a locked rule). */
   disabled?: boolean;
+  /**
+   * The level's name, written before the icons. Default true: a row reads
+   * without hovering, and on touch. False keeps the name as the accessible
+   * name (and, read-only, as the icon's tooltip).
+   */
+  showLabel?: boolean;
+  /** Editable: the id of the element that names what is being decided (the rule's label). */
+  'aria-labelledby'?: string;
   className?: string;
 }
 
 /**
- * A choice of approval level as four icons, one per level, in a single-choice
- * group (arrow keys move, like every toggle group). Each icon has the level's
- * name as its accessible name and a tooltip with what the level means (hover
- * or keyboard focus; a tap selects). The level in force wears its colour, and its name
- * is written beside the group, so the choice never depends on a tooltip.
+ * THE way a level is shown, read-only or editable, by one prop: the level's
+ * name in its colour, then its icon (read-only) or the four levels' icons as a
+ * single-choice group (editable; arrow keys move, like every toggle group).
+ * Name, icon, colour and tooltip are `APPROVAL_LEVEL_META`'s in both, so a
+ * rule reads the same on a page that shows it and on one that lets it change.
+ *
+ * Editable, each icon has its level's name as its accessible name and a
+ * tooltip with what the level means (hover or keyboard focus; a tap selects).
  */
-export function ApprovalLevelControl({
+export function ApprovalLevelView({
   value,
+  editable,
   onChange,
-  'aria-labelledby': labelledBy,
-  showLabel = true,
   disabled = false,
+  showLabel = true,
+  'aria-labelledby': labelledBy,
   className,
-}: ApprovalLevelControlProps) {
+}: ApprovalLevelViewProps) {
   const current = APPROVAL_LEVEL_META[value];
+  const canEdit = editable ?? onChange !== undefined;
+  const name = showLabel ? (
+    <span className={cn('whitespace-nowrap text-h6', current.toneClassName)}>{current.label}</span>
+  ) : null;
+
+  if (!canEdit) {
+    const icon = (
+      <span className={cn('inline-flex shrink-0', current.toneClassName)}>
+        <current.Icon size={ICON_PX} aria-hidden />
+        {!showLabel && <span className="sr-only">{current.label}</span>}
+      </span>
+    );
+    return (
+      <span className={cn('inline-flex shrink-0 items-center gap-[var(--spacing-system-xxs)]', className)}>
+        {name}
+        {showLabel ? (
+          icon
+        ) : (
+          <TouchFriendlyTooltip content={`${current.label}: ${current.hint}`} side="top">
+            {icon}
+          </TouchFriendlyTooltip>
+        )}
+      </span>
+    );
+  }
+
   return (
     <div className={cn('flex shrink-0 items-center gap-[var(--spacing-system-sf)]', className)}>
-      {showLabel && <span className={cn('whitespace-nowrap text-h6', current.toneClassName)}>{current.label}</span>}
+      {name}
       <TooltipProvider delayDuration={150}>
         <ToggleGroup
           type="single"
@@ -121,7 +139,7 @@ export function ApprovalLevelControl({
           disabled={disabled}
           // Clicking the level in force reports '' (deselect): a rule always has a level.
           onValueChange={(next: string) => {
-            if (next && next !== value) onChange(next as ApprovalLevel);
+            if (next && next !== value) onChange?.(next as ApprovalLevel);
           }}
           aria-labelledby={labelledBy}
         >

package/src/components/ui/analyzing-state.tsx

@@ -0,0 +1,57 @@
+import { cn } from '../../utils/cn';
+import { ChatTypingIndicator } from '../chat/chat-typing-indicator';
+import { Skeleton } from './skeleton';
+
+export interface AnalyzingStateProps {
+  /** What is being worked on, as a sentence with no closing mark ("Mingo is analyzing your logs"). */
+  label: string;
+  className?: string;
+}
+
+/** How far each row being read has faded: the list trails off instead of ending. */
+const ROW_OPACITY = ['opacity-100', 'opacity-60', 'opacity-30'] as const;
+/** Each row pulses a beat after the one above it, so the eye reads them as a scan. */
+const ROW_STAGGER_MS = 200;
+
+/**
+ * THE "it is working, nothing to show yet" state of a feed or a window: three
+ * rows still being read, pulsing one after another, over the caller's words
+ * and the chat's own typing dots. It says an agent is at work, where a bare
+ * sentence in an empty box reads as idle.
+ *
+ * Built from the shared pieces only: `Skeleton` for the rows and
+ * `ChatTypingIndicator` for the dots. Still under reduced motion. It is
+ * announced as a status; the rows and dots are decoration.
+ */
+export function AnalyzingState({ label, className }: AnalyzingStateProps) {
+  return (
+    <div role="status" className={cn('flex w-full max-w-sm flex-col items-center gap-4', className)}>
+      <div aria-hidden className="grid w-full grid-cols-1 gap-2">
+        {ROW_OPACITY.map((opacity, row) => {
+          const delay = { animationDelay: `${row * ROW_STAGGER_MS}ms` };
+          return (
+            <div
+              key={opacity}
+              className={cn(
+                'flex items-center gap-3 rounded-md border border-ods-border bg-ods-bg px-3.5 py-3',
+                opacity,
+              )}
+            >
+              <Skeleton
+                className="h-2 w-2 shrink-0 rounded-full bg-ods-flamingo-cyan motion-reduce:animate-none"
+                style={delay}
+              />
+              <Skeleton className="h-2.5 min-w-0 flex-1 motion-reduce:animate-none" style={delay} />
+              <Skeleton className="h-2.5 w-12 shrink-0 motion-reduce:animate-none" style={delay} />
+            </div>
+          );
+        })}
+      </div>
+      {/* A div, not a paragraph: the typing dots are block elements. */}
+      <div className="flex items-center gap-1.5 text-center text-ods-text-secondary text-h4">
+        {label}
+        <ChatTypingIndicator aria-hidden size="sm" dotClassName="bg-ods-text-secondary motion-reduce:animate-none" />
+      </div>
+    </div>
+  );
+}

package/src/components/ui/feature-list.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import type React from 'react';
+import { Button } from './button';
 
 export interface FeatureListItemData {
   /** Shown in the boxed slot. Not used by the `numbered` variant. */
@@ -15,13 +16,13 @@ export interface FeatureListProps {
   iconBoxSize?: number;
   /**
    * `boxed` (default): one bordered card, a boxed icon per row.
-   * `numbered`: an ordered list of open rows separated by hairlines, each led
-   * by its two-digit number (process steps).
+   * `numbered`: an ordered list of open rows, each led by its number in a
+   * round marker (process steps).
    */
   variant?: 'boxed' | 'numbered';
   /**
-   * `numbered` only. The step being shown now: it stays at full strength and
-   * the others step back, so the list reads as "you are here" beside a timed
+   * `numbered` only. The step being shown now: it stays at full strength with
+   * its marker lit and the others step back, so the list reads as "you are here" beside a timed
    * demo. Omit for a plain list where every step is equal.
    */
   activeIndex?: number;
@@ -43,38 +44,47 @@ export function FeatureList({
   if (variant === 'numbered') {
     const dims = typeof activeIndex === 'number';
     return (
-      <ol className={`flex flex-col ${className}`}>
+      <ol className={`flex flex-col gap-[var(--spacing-system-lf)] ${className}`}>
         {items.map((item, index) => {
           const current = dims && index === activeIndex;
           const row = (
             <>
-              <span className={`text-h5 ${current ? 'text-ods-flamingo-pink' : 'text-ods-text-secondary'}`}>
-                {String(index + 1).padStart(2, '0')}
+              <span
+                className={`grid h-7 w-7 shrink-0 place-items-center rounded-full border transition-colors duration-200 text-h5 motion-reduce:transition-none ${
+                  current
+                    ? 'border-ods-flamingo-pink bg-ods-flamingo-pink-secondary text-ods-text-primary'
+                    : 'border-ods-border text-ods-text-secondary'
+                }`}
+              >
+                {index + 1}
               </span>
               <div className="flex min-w-0 flex-col gap-[var(--spacing-system-xxs)]">
-                <h3 className="text-ods-text-primary text-h3">{item.title}</h3>
-                <p className="text-ods-text-secondary text-h4">{item.description}</p>
+                <h3 className="text-ods-text-primary text-h4">{item.title}</h3>
+                <p className="text-ods-text-secondary text-h6">{item.description}</p>
               </div>
             </>
           );
-          const layout =
-            'grid grid-cols-[48px_minmax(0,1fr)] gap-[var(--spacing-system-m)] py-[var(--spacing-system-l)]';
+          const layout = 'flex items-start gap-[var(--spacing-system-sf)]';
           return (
             <li
               key={index}
               aria-current={current ? 'step' : undefined}
-              className={`border-t border-ods-border transition-opacity duration-200 last:border-b motion-reduce:transition-none ${
+              className={`transition-opacity duration-200 motion-reduce:transition-none ${
                 dims && !current ? 'opacity-55 focus-within:opacity-100 hover:opacity-100' : ''
               }`}
             >
               {onSelect ? (
-                <button
-                  type="button"
+                // The unified Button with no box of its own (`wrap`): it brings the
+                // target, the focus ring and the keyboard semantics; the row is the look.
+                <Button
+                  variant="transparent"
+                  size="wrap"
+                  fullWidth
                   onClick={() => onSelect(index)}
-                  className={`${layout} w-full cursor-pointer text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus`}
+                  className={`${layout} justify-start whitespace-normal text-left hover:bg-transparent active:bg-transparent`}
                 >
                   {row}
-                </button>
+                </Button>
               ) : (
                 <div className={layout}>{row}</div>
               )}

package/src/components/ui/incident-feed.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react';
 import { cn } from '../../utils/cn';
+import { AnalyzingState } from './analyzing-state';
 import { StatusLine, type StatusLineTone } from './status-line';
 
 /** Where one incident stands. `waiting` is the only state that needs a person. */
@@ -46,7 +47,10 @@ export interface IncidentFeedProps {
   /** Oldest first. The newest is open; earlier ones collapse to a row. */
   items: readonly IncidentFeedItem[];
   statusLabels: Record<IncidentStatus, string>;
-  /** Shown while there is nothing in the feed. */
+  /**
+   * Shown while there is nothing in the feed, under rows that are still being
+   * read: the agent is at work, it has just not found anything yet.
+   */
   emptyLabel?: string;
   /**
    * `top`: the list grows downward (a wide window). `bottom`: the newest item
@@ -91,7 +95,7 @@ export function IncidentFeed({ items, statusLabels, emptyLabel, anchor = 'top',
         className,
       )}
     >
-      {items.length === 0 && emptyLabel && <p className="m-auto text-ods-text-secondary text-h4">{emptyLabel}</p>}
+      {items.length === 0 && emptyLabel && <AnalyzingState label={emptyLabel} className="m-auto" />}
       {items.map((item, index) => {
         const open = index === lastIndex || item.status === 'waiting';
         if (!open) {

package/src/components/ui/index.ts

@@ -236,6 +236,7 @@ export { LazyMount, type LazyMountProps } from './lazy-mount';
 export * from './app-window-frame';
 export * from './product-screen-frame';
 export * from './phone-frame';
+export * from './analyzing-state';
 export * from './incident-feed';
 export * from './status-line';
 export * from './snap-carousel';

package/src/components/ui/playback-toggle.tsx

@@ -17,10 +17,16 @@ export interface PlaybackToggleProps {
 
 /**
  * THE stop/start control of anything that moves on its own (WCAG 2.2.2): one
- * small, quiet round icon button. A looping demo and an auto-advancing
- * carousel show the same one, wired to `useAutoplay`'s `paused` / `setPaused`.
- * Quiet on purpose: it takes the accent only on hover, so it never competes
- * with what it controls.
+ * small icon button beside what it controls. A looping demo and an
+ * auto-advancing carousel show the same one, wired to `useAutoplay`'s
+ * `paused` / `setPaused`.
+ *
+ * It has to be there and easy to reach (a 32px target, a name, a focus ring),
+ * never the thing the eye lands on: no border and no surface, only a small
+ * grey glyph that takes the accent on hover and focus. The grey is the muted
+ * text token, the quietest one that still clears the 3:1 a control's glyph
+ * needs against the page (WCAG 1.4.11); the next grey down does not. The
+ * target stays 32px; it is the glyph that is small.
  */
 export function PlaybackToggle({
   paused,
@@ -34,14 +40,14 @@ export function PlaybackToggle({
       variant="transparent"
       size="icon-sm"
       className={cn(
-        'shrink-0 rounded-full border border-ods-border text-ods-text-secondary hover:border-ods-accent hover:text-ods-accent',
+        'shrink-0 rounded-full border-0 text-ods-text-muted hover:text-ods-accent focus-visible:text-ods-accent [&_svg]:h-3 [&_svg]:w-3',
         className,
       )}
       aria-label={paused ? playLabel : pauseLabel}
       aria-pressed={paused}
       onClick={() => onChange(!paused)}
     >
-      {paused ? <PlayIcon size={16} /> : <PauseIcon size={16} />}
+      {paused ? <PlayIcon size={12} /> : <PauseIcon size={12} />}
     </Button>
   );
 }