@flamingo-stack/openframe-frontend-core 0.0.850 → 0.0.852

package/src/components/chat/tool-execution-display.tsx

@@ -11,6 +11,7 @@ import { StatusLine, type StatusLineTone } from '../ui/status-line';
 import { CHAT_BLOCK_FRAME_CLASS } from './chat-block-frame';
 import { ExpandChevron } from './expand-chevron';
 import { useCollapsible } from './hooks/use-collapsible';
+import { PolicyEscalationAlert, PolicyReviewRows, hasPolicyReviewRows, isPolicyEscalated } from './policy-review';
 import { ArgRow, ResultBlock } from './tool-call-blocks';
 import type { ToolExecutionDisplayProps } from './types';
 import { COMMAND_BODY_ARG_KEYS } from './utils/tool-call-helpers';
@@ -56,6 +57,9 @@ const ToolExecutionDisplay = forwardRef<HTMLDivElement, ToolExecutionDisplayProp
     }, [message.parameters, variant]);
 
     const hasResult = isExecuted && typeof message.result === 'string' && message.result.length > 0;
+    // Admin-only detail, like the command: the end-client card is the static row below, which draws no body.
+    const review = message.policyReview;
+    const reviewRows = hasPolicyReviewRows(review);
 
     // A remote (MCP) read-only tool deliberately publishes NO parameters and NO
     // result — the backend hides both, and sends a human title instead. There is
@@ -67,9 +71,15 @@ const ToolExecutionDisplay = forwardRef<HTMLDivElement, ToolExecutionDisplayProp
     // remote rather than one of ours — and guarded on there being a title to
     // show, so a title-less row keeps the old behaviour rather than collapsing
     // to a blank line.
-    const isConciseRemoteRead = !message.integratedToolType && !!previewText && argEntries.length === 0 && !hasResult;
+    const isConciseRemoteRead =
+      !message.integratedToolType &&
+      !!previewText &&
+      argEntries.length === 0 &&
+      !hasResult &&
+      !reviewRows &&
+      !isPolicyEscalated(review);
     const isStaticRow = isClientView || isConciseRemoteRead;
-    const hasBody = argEntries.length > 0 || hasResult || isExecuting;
+    const hasBody = argEntries.length > 0 || reviewRows || hasResult || isExecuting;
     // A run with no arguments and no result has nothing behind a chevron either:
     // its header stays, with no chevron and no click target, so the row never
     // opens onto an empty box. (A run still executing has a body: its live
@@ -166,17 +176,23 @@ const ToolExecutionDisplay = forwardRef<HTMLDivElement, ToolExecutionDisplayProp
                     {argEntries.map(([key, value]) => (
                       <ArgRow key={key} argKey={key} value={value} />
                     ))}
+                    {reviewRows && (
+                      <PolicyReviewRows
+                        review={review}
+                        className={argEntries.length > 0 ? 'mt-[var(--spacing-system-xsf)]' : undefined}
+                      />
+                    )}
                     {hasResult && (
                       <ResultBlock
                         result={message.result}
-                        className={argEntries.length > 0 ? 'mt-[var(--spacing-system-xsf)]' : undefined}
+                        className={argEntries.length > 0 || reviewRows ? 'mt-[var(--spacing-system-xsf)]' : undefined}
                       />
                     )}
                     {isExecuting && (
                       <div
                         className={cn(
                           'flex w-full flex-col items-start gap-[var(--spacing-system-xxs)]',
-                          argEntries.length > 0 && 'mt-[var(--spacing-system-xsf)]',
+                          (argEntries.length > 0 || reviewRows) && 'mt-[var(--spacing-system-xsf)]',
                         )}
                       >
                         <span className="text-ods-text-secondary">Result:</span>
@@ -187,6 +203,9 @@ const ToolExecutionDisplay = forwardRef<HTMLDivElement, ToolExecutionDisplayProp
                 )}
               </div>
             </div>
+
+            {/* A run Mingo escalated (approved, then run) keeps saying so, outside the collapsible part. */}
+            <PolicyEscalationAlert review={review} className="border-t border-ods-border" />
           </>
         )}
       </div>

package/src/components/chat/types/message.types.ts

@@ -3,6 +3,7 @@
  * Contains all message structures, segments, and content types
  */
 
+import type { ApprovalLevel } from '../../../types/permissions';
 import type { ChatRef } from '../chat-ref.types';
 import type { QuickActionIconSpec } from '../quick-action-chip';
 import type { AssistantType, AuthorType, ChatApprovalStatus, MessageOwner } from './chat.types';
@@ -55,6 +56,36 @@ export const SCROLL_ANCHOR = { TOP: 'top', BOTTOM: 'bottom' } as const;
 
 export type ScrollAnchor = (typeof SCROLL_ANCHOR)[keyof typeof SCROLL_ANCHOR];
 
+// ========== Policy Review Types ==========
+
+/** One guardrail rule the command review matched (ai-agent `PolicyReviewRule`). */
+export interface PolicyReviewRuleData {
+  code: string;
+  /** The rule's name when it matched; the history keeps the name it had then. */
+  label: string;
+}
+
+/**
+ * Why the security policy gave a tool call its approval level (ai-agent `PolicyReview`). Sent only while
+ * the semantic guardrail is on, on approval tool calls and on `EXECUTING_TOOL`. Enum values stay open
+ * strings: the backend is narrowing `decision` (`SOFT_DENY` / `HARD_DENY` become `DENY`), and a value
+ * this build does not know must not drop the review. Normalized by `chat-protocol/policy-review`.
+ */
+export interface PolicyReviewData {
+  /** `CLASSIFIER` (the AI review) or `REGEX`. */
+  source?: string;
+  /** `POLICY`, `FALLBACK` (no rule of the policy matched), or a deny by a matched guardrail rule. */
+  decision?: string;
+  /** The level in force for this call. */
+  approvalLevel?: ApprovalLevel;
+  /** The level the organization's policy sets; differs from `approvalLevel` when a rule raised it. */
+  policyLevel?: ApprovalLevel;
+  operationCodes: string[];
+  matchedRules: PolicyReviewRuleData[];
+  /** The review's one-line reason; absent from a regex review. */
+  reason?: string;
+}
+
 // ========== Tool Execution Types ==========
 
 export interface ToolExecutionData {
@@ -69,6 +100,9 @@ export interface ToolExecutionData {
    * the accumulator restores it onto the merged `EXECUTED_TOOL` segment.
    */
   toolExplanation?: string;
+  /** The security policy's review of this call. Only sent on `EXECUTING_TOOL`, restored onto `EXECUTED_TOOL` like
+   *  `toolExplanation`. */
+  policyReview?: PolicyReviewData;
   parameters?: Record<string, unknown>;
   result?: string;
   success?: boolean;
@@ -100,6 +134,8 @@ export interface ExecutingToolState {
   toolTitle?: string;
   /** Mirrors {@link ToolExecutionData.toolExplanation}; absent on `EXECUTED_TOOL`. */
   toolExplanation?: string;
+  /** Mirrors {@link ToolExecutionData.policyReview}; absent on `EXECUTED_TOOL`. */
+  policyReview?: PolicyReviewData;
   parameters?: Record<string, unknown>;
 }
 
@@ -211,6 +247,8 @@ export interface PendingToolCallData {
   requiresApproval: boolean;
   approvalType?: string | null;
   toolCallArguments?: Record<string, unknown> | null;
+  /** Why the policy gave this call its approval level; absent while the semantic guardrail is off. */
+  policyReview?: PolicyReviewData;
 }
 
 /**
@@ -517,6 +555,8 @@ export interface ExecutingToolMessageData extends MessageDataBase {
   title?: string;
   /** Backend-issued human-readable explanation (what/why) of the tool call. */
   toolExplanation?: string;
+  /** WIRE shape of the policy review: normalized by `normalizePolicyReview` on the way in. */
+  policyReview?: unknown;
   parameters?: Record<string, unknown>;
   toolExecutionRequestId?: string;
 }
@@ -539,8 +579,8 @@ export interface ApprovalRequestMessageData extends MessageDataBase {
   approvalType?: string;
   command?: string;
   explanation?: string;
-  /** Present when the approval is a batch of tool calls (new format). */
-  toolCalls?: PendingToolCallData[];
+  /** Present when the approval is a batch of tool calls (new format). WIRE shape: the review is normalized on replay. */
+  toolCalls?: Array<Omit<PendingToolCallData, 'policyReview'> & { policyReview?: unknown }>;
 }
 
 export interface ApprovalResultMessageData extends MessageDataBase {

package/src/components/chat/utils/extract-incomplete-message-state.ts

@@ -3,6 +3,7 @@
  * Used to continue building messages across realtime connections
  */
 
+import { keptPolicyReview } from '../../../chat-protocol/policy-review';
 import type { InitializeExtras } from '../stream/chat-stream-reducer';
 import type { ProcessedMessage, MessageSegment, PendingApproval, ExecutingToolState } from '../types';
 
@@ -51,6 +52,7 @@ export function extractIncompleteMessageState(
             toolFunction: segment.data.toolFunction,
             toolTitle: segment.data.toolTitle,
             toolExplanation: segment.data.toolExplanation,
+            ...keptPolicyReview(segment.data.policyReview),
             parameters: segment.data.parameters,
           });
           hasIncompleteState = true;

package/src/components/chat/utils/message-segment-accumulator.ts

@@ -8,6 +8,7 @@
  * - Creating approval segments when results arrive
  */
 
+import { keptPolicyReview } from '../../../chat-protocol/policy-review';
 import { applyApprovalStatusToSegment, nextBatchExecution, withBatchExecution } from '../stream/message-mutations';
 import type {
   AskOptionData,
@@ -197,6 +198,7 @@ export class MessageSegmentAccumulator {
         toolFunction: toolData.toolFunction,
         toolTitle: toolData.toolTitle,
         toolExplanation: toolData.toolExplanation,
+        ...keptPolicyReview(toolData.policyReview),
         parameters: toolData.parameters,
       });
       this.segments.push(segment);
@@ -225,6 +227,7 @@ export class MessageSegmentAccumulator {
           toolTitle: toolData.toolTitle ?? existingExecuting?.data.toolTitle ?? executingTool?.toolTitle,
           toolExplanation:
             toolData.toolExplanation ?? existingExecuting?.data.toolExplanation ?? executingTool?.toolExplanation,
+          ...keptPolicyReview(toolData.policyReview, existingExecuting?.data.policyReview, executingTool?.policyReview),
           parameters: toolData.parameters || executingTool?.parameters,
         },
       };

package/src/components/chat/utils/process-historical-messages.ts

@@ -34,6 +34,8 @@ import {
 // One normalizer for ask rows, shared with the live decoder — history and the
 // stream must agree on which options are usable.
 import { normalizeAskOptions } from '../../../chat-protocol/nats-decoder';
+// The same review normalizer as the live decoder, for the same reason.
+import { policyReviewField } from '../../../chat-protocol/policy-review';
 import {
   attachmentsEvent,
   mergeSourceMetadata,
@@ -57,6 +59,14 @@ import { approvalDisplaysInline } from './approval-display';
 import { type MessageSegmentAccumulator, createMessageSegmentAccumulator } from './message-segment-accumulator';
 import { getCommandText } from './tool-call-helpers';
 
+/** A history tool call with its wire `policyReview` normalized (or dropped), as the live decoder does it. */
+function withNormalizedReview(
+  call: Omit<PendingToolCallData, 'policyReview'> & { policyReview?: unknown },
+): PendingToolCallData {
+  const { policyReview: raw, ...rest } = call;
+  return { ...rest, ...policyReviewField(raw) };
+}
+
 function getOwnerDisplayName(owner?: MessageOwner): string {
   if (owner?.type === OWNER_TYPE.ADMIN && owner.user) {
     const { firstName, lastName } = owner.user;
@@ -106,8 +116,8 @@ function pushStandaloneMessages(
  *     the resolver's name as `displayName`);
  *   - `approvalType` defaults to 'CLIENT' (legacy history parity;
  *     realtime defaults APPROVAL_REQUEST to 'USER');
- *   - batch `toolCalls` pass through verbatim (already the persisted
- *     `PendingToolCallData` shape — no normalization pass).
+ *   - batch `toolCalls` pass through as persisted, except `policyReview`,
+ *     normalized as the live decoder does it.
  *
  * Returns `null` for rows the assistant-turn path doesn't decode (SYSTEM
  * is handled by the envelope's standalone path; user TEXT rows are handled
@@ -166,6 +176,7 @@ export function decodeHistoricalMessageData(data: MessageData): ChatStreamEvent
             // EXECUTING chunk only, so a history replay that drops it renders
             // an empty tool card even though the live stream showed one.
             toolExplanation: typeof data.toolExplanation === 'string' ? data.toolExplanation : undefined,
+            ...policyReviewField(data.policyReview),
             parameters: data.parameters,
             toolExecutionRequestId: data.toolExecutionRequestId,
           },
@@ -199,7 +210,7 @@ export function decodeHistoricalMessageData(data: MessageData): ChatStreamEvent
           approvalType: data.approvalType || 'CLIENT',
           command: data.command || '',
           explanation: data.explanation,
-          ...(Array.isArray(data.toolCalls) ? { toolCalls: data.toolCalls } : {}),
+          ...(Array.isArray(data.toolCalls) ? { toolCalls: data.toolCalls.map(withNormalizedReview) } : {}),
         };
       }
       return null;

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

@@ -3,24 +3,18 @@
 import type { ComponentType } from 'react';
 import type { ApprovalLevel } from '../../types/permissions';
 import { cn } from '../../utils/cn';
-import { HeadsetIcon } from '../icons-v2-generated/audio-and-visual/headset-icon';
 import { BannedIcon } from '../icons-v2-generated/security/banned-icon';
+import { ShieldCheckIcon } from '../icons-v2-generated/security/shield-check-icon';
 import { CheckCircleIcon } from '../icons-v2-generated/signs-and-symbols/check-circle-icon';
-import { UserIcon } from '../icons-v2-generated/users/user-icon';
+import { UserCheckIcon } from '../icons-v2-generated/users/user-check-icon';
 import { UnifiedSkeleton } from '../loading/unified-skeleton';
-import { TOGGLE_GROUP_CLASS, ToggleGroup, ToggleGroupItem } from '../toggle-group';
 import { TextHold } from '../ui/layout-hold';
 import { useLoadingScope } from '../ui/loading-scope';
-import { TOGGLE_SIZE_CLASS } from '../ui/toggle';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip';
+import { TabSelector } from '../ui/tab-selector';
 import { TouchFriendlyTooltip } from '../ui/touch-friendly-tooltip';
 
-/**
- * The approval levels, in the order a choice reads: the two that need nobody
- * (allow, never) side by side, then the two that ask someone (a technician,
- * the user) side by side.
- */
-export const APPROVAL_LEVELS: readonly ApprovalLevel[] = ['ALLOW', 'DENY', 'ASK_TECHNICIAN', 'ASK_USER'];
+/** The approval levels, from the freest to the strictest, as the guardrails settings order them (Figma 4365-22670). */
+export const APPROVAL_LEVELS: readonly ApprovalLevel[] = ['ALLOW', 'ASK_USER', 'ASK_TECHNICIAN', 'DENY'];
 
 export interface ApprovalLevelMeta {
   /** The level's name, as every surface writes it. */
@@ -47,31 +41,48 @@ export const APPROVAL_LEVEL_META: Record<ApprovalLevel, ApprovalLevelMeta> = {
   ASK_USER: {
     label: 'Ask User',
     hint: 'Asks the person at the computer first.',
-    Icon: UserIcon,
+    Icon: UserCheckIcon,
     toneClassName: 'text-ods-warning',
   },
   ASK_TECHNICIAN: {
     label: 'Ask Technician',
     hint: 'Asks a technician first. Nothing runs until they approve.',
-    Icon: HeadsetIcon,
+    Icon: ShieldCheckIcon,
     toneClassName: 'text-ods-warning',
   },
   DENY: { label: 'Restrict', hint: 'Never runs.', Icon: BannedIcon, toneClassName: 'text-ods-error' },
 };
 
-const ICON_PX = 16;
+/** A read-only level's icon (Figma 1608-49531: 24px, before the name). */
+const ICON_PX = 24;
 
 /** The view's layout, read by the view and by its skeleton, so the skeleton is the view's size. */
 const READ_ONLY_ROW_CLASS = 'inline-flex shrink-0 items-center gap-[var(--spacing-system-xxs)]';
-const EDITABLE_ROW_CLASS = 'flex shrink-0 items-center gap-[var(--spacing-system-sf)]';
+/** Editable: the name after the strip on a phone, before it from `content-md` (Figma 4365-22461 / 4365-22663). */
+const EDITABLE_ROW_CLASS =
+  'flex shrink-0 items-center gap-[var(--spacing-system-xxs)] content-md:gap-[var(--spacing-system-m)]';
+const EDITABLE_NAME_ORDER_CLASS = 'order-last content-md:order-none';
+/** A read-only level's icon box: 16px on a phone, 24 from `content-md` (Figma 555-39573 / 1608-49531). */
+const READ_ONLY_ICON_BOX_CLASS = '[&>*]:!size-4 content-md:[&>*]:!size-6';
+/** Read-only, the name is the row's value (h4, primary); editable, a caption in the level's colour beside the strip. */
+const READ_ONLY_NAME_CLASS = 'whitespace-nowrap text-ods-text-primary text-h4';
 const LEVEL_NAME_CLASS = 'whitespace-nowrap text-h6';
-/** An editable level's button: the small toggle with tighter sides. */
-const LEVEL_BUTTON_CLASS = 'px-2';
+/** An editable level's icon (Figma: 20px in the segment). */
+const EDITABLE_ICON_PX = 20;
 /** The longest level name: the skeleton's name bar is exactly its width (the component's own words, unseen). */
 const LONGEST_LEVEL_LABEL = APPROVAL_LEVELS.map(level => APPROVAL_LEVEL_META[level].label).reduce((a, b) =>
   b.length > a.length ? b : a,
 );
 
+/** The strip's four levels: the one in force (none while loading) in the primary colour, the others secondary (Figma 4365-22670). */
+function levelItems(inForce: ApprovalLevel | undefined) {
+  return APPROVAL_LEVELS.map(level => {
+    const { label, Icon } = APPROVAL_LEVEL_META[level];
+    const tone = level === inForce ? 'text-ods-text-primary' : 'text-ods-text-secondary';
+    return { id: level, ariaLabel: label, icon: <Icon size={EDITABLE_ICON_PX} className={tone} aria-hidden /> };
+  });
+}
+
 export interface ApprovalLevelViewProps {
   /** The level in force. */
   value: ApprovalLevel;
@@ -100,13 +111,11 @@ export interface ApprovalLevelViewProps {
 
 /**
  * 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).
+ * icon in its colour, then its name (read-only, Figma 1608-49531), or its name
+ * in its colour, then the four levels' icons in a compact `TabSelector` strip,
+ * the one in force filled (editable, Figma 4365-22670). Name, icon and colour
+ * are `APPROVAL_LEVEL_META`'s in both. Editable, each icon has its level's name
+ * as its accessible name.
  */
 export function ApprovalLevelView({
   value,
@@ -124,18 +133,16 @@ export function ApprovalLevelView({
     return <ApprovalLevelSkeleton editable={canEdit} showLabel={showLabel} className={className} />;
   }
   const current = APPROVAL_LEVEL_META[value];
-  const name = showLabel ? <span className={cn(LEVEL_NAME_CLASS, current.toneClassName)}>{current.label}</span> : null;
 
   if (!canEdit) {
     const icon = (
-      <span className={cn('inline-flex shrink-0', current.toneClassName)}>
+      <span className={cn('inline-flex shrink-0', READ_ONLY_ICON_BOX_CLASS, current.toneClassName)}>
         <current.Icon size={ICON_PX} aria-hidden />
         {!showLabel && <span className="sr-only">{current.label}</span>}
       </span>
     );
     return (
       <span className={cn(READ_ONLY_ROW_CLASS, className)}>
-        {name}
         {showLabel ? (
           icon
         ) : (
@@ -143,49 +150,32 @@ export function ApprovalLevelView({
             {icon}
           </TouchFriendlyTooltip>
         )}
+        {showLabel && <span className={READ_ONLY_NAME_CLASS}>{current.label}</span>}
       </span>
     );
   }
 
+  const name = showLabel ? (
+    <span className={cn(LEVEL_NAME_CLASS, EDITABLE_NAME_ORDER_CLASS, current.toneClassName)}>{current.label}</span>
+  ) : null;
+
   return (
     <div className={cn(EDITABLE_ROW_CLASS, className)}>
       {name}
-      <TooltipProvider delayDuration={150}>
-        <ToggleGroup
-          type="single"
-          variant="outline"
-          size="sm"
+      {/* The settings design's segmented control: one strip, the level in force filled (Figma 4365-22670). */}
+      <div role="group" aria-labelledby={labelledBy}>
+        <TabSelector
+          variant="secondary"
+          size="compact"
           value={value}
           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);
+          onValueChange={next => {
+            if (next !== value) onChange?.(next as ApprovalLevel);
           }}
-          aria-labelledby={labelledBy}
-        >
-          {APPROVAL_LEVELS.map(level => {
-            const { label, hint, Icon, toneClassName } = APPROVAL_LEVEL_META[level];
-            return (
-              // A plain tooltip (hover and keyboard focus): a tap must SELECT the level, and on
-              // touch the name beside the group says what is in force.
-              <Tooltip key={level}>
-                <TooltipTrigger asChild>
-                  <ToggleGroupItem
-                    value={level}
-                    aria-label={label}
-                    className={cn(LEVEL_BUTTON_CLASS, level === value && toneClassName)}
-                  >
-                    <Icon size={ICON_PX} aria-hidden />
-                  </ToggleGroupItem>
-                </TooltipTrigger>
-                <TooltipContent side="top" className="max-w-xs">
-                  <b>{label}</b>: {hint}
-                </TooltipContent>
-              </Tooltip>
-            );
-          })}
-        </ToggleGroup>
-      </TooltipProvider>
+          items={levelItems(value)}
+          className="w-auto"
+        />
+      </div>
     </div>
   );
 }
@@ -200,35 +190,41 @@ interface ApprovalLevelSkeletonProps {
 
 /**
  * `ApprovalLevelView`'s own skeleton (a level chip, not a whole view): a level while it is read: the view's own row, the name a bar at its type step (the longest name's width), and the
- * read-only icon's box or the editable group's four small toggle boxes. Inert: nothing in it can be picked.
+ * read-only icon's box or the editable strip itself, disabled. Inert: nothing in it can be picked.
  */
 function ApprovalLevelSkeleton({ editable = false, showLabel = true, className }: ApprovalLevelSkeletonProps) {
-  const name = showLabel ? (
-    <span className={LEVEL_NAME_CLASS}>
-      <TextHold>{LONGEST_LEVEL_LABEL}</TextHold>
-    </span>
-  ) : null;
   if (!editable) {
     return (
       <span aria-hidden className={cn(READ_ONLY_ROW_CLASS, className)}>
-        {name}
-        <UnifiedSkeleton as="span" className="inline-block shrink-0 rounded-sm" width={ICON_PX} height={ICON_PX} />
+        <span className={cn('inline-flex shrink-0', READ_ONLY_ICON_BOX_CLASS)}>
+          <UnifiedSkeleton as="span" className="inline-block shrink-0 rounded-sm" width={ICON_PX} height={ICON_PX} />
+        </span>
+        {showLabel && (
+          <span className={READ_ONLY_NAME_CLASS}>
+            <TextHold>{LONGEST_LEVEL_LABEL}</TextHold>
+          </span>
+        )}
       </span>
     );
   }
+  const name = showLabel ? (
+    <span className={cn(LEVEL_NAME_CLASS, EDITABLE_NAME_ORDER_CLASS)}>
+      <TextHold>{LONGEST_LEVEL_LABEL}</TextHold>
+    </span>
+  ) : null;
   return (
     <div aria-hidden inert className={cn(EDITABLE_ROW_CLASS, className)}>
       {name}
-      <div className={TOGGLE_GROUP_CLASS}>
-        {APPROVAL_LEVELS.map(level => (
-          <UnifiedSkeleton
-            key={level}
-            // The small toggle's height and its tighter sides around one icon (`box-content`: the padding adds).
-            className={cn(TOGGLE_SIZE_CLASS.sm, LEVEL_BUTTON_CLASS, 'box-content shrink-0 rounded-md')}
-            width={ICON_PX}
-          />
-        ))}
-      </div>
+      {/* The real strip, inert, with no level in force yet. */}
+      <TabSelector
+        variant="secondary"
+        size="compact"
+        value=""
+        disabled
+        onValueChange={() => {}}
+        items={levelItems(undefined)}
+        className="w-auto"
+      />
     </div>
   );
 }