@flamingo-stack/openframe-frontend-core 0.0.847 → 0.0.848

package/src/components/chat/entity-cards/dispatch.tsx

@@ -48,11 +48,7 @@ import {
 } from '../../../types/trust-center';
 import { isAppOriginUrl } from '../../../utils/app-origins';
 import { formatDateShort } from '../../../utils/date-formatters';
-import {
-  DESIGN_DOC_READINESS_DISPLAY,
-  designDocReadiness,
-  formatCompletionLabel,
-} from '../../../utils/design-doc-readiness';
+import { designDocStatusDisplay, formatCompletionLabel } from '../../../utils/design-doc-readiness';
 import { faqItemAnchor } from '../../../utils/faq-anchor';
 import { formatDateUTC as formatDate } from '../../../utils/format';
 import { programMetaFormatters, programMetaLine } from '../../../utils/program-instant';
@@ -88,6 +84,7 @@ import type { LoadedProductReleaseCardProps } from '../../shared/product-release
 import { ProductReleaseCard } from '../../shared/product-release/product-release-card';
 import type { ActionsMenuGroup } from '../../ui/actions-menu';
 import { ExternalMediaNotice } from '../../ui/markdown/external-media-notice';
+import { tagVariantForBadgeColor } from '../../ui/tag';
 import { VendorIcon } from '../../vendor-icon';
 import { useChatPanel } from '../chat-panel-context';
 import type { ChatRef } from '../chat-ref.types';
@@ -1046,8 +1043,8 @@ function CustomerInterviewChatCard({
 }
 
 /**
- * Design doc → the doc glyph, its readiness as the pill (the hub's own wording: "Ready to build" / "Not ready",
- * `design-doc-readiness`) and "DRI · updated · n/m reviews signed off" under the title. The hub's card route attaches the doc's list row as
+ * Design doc → the doc glyph, its status as the pill (the status a person set, else its readiness, both vocabulary rows the hub resolves onto the
+ * doc: `designDocStatusDisplay`) and "DRI · updated · n/m signed off" under the title. The hub's card route attaches the doc's list row as
  * `item.doc`; a row without it (an older hub) renders the ref's own title and preview.
  */
 function DesignDocChatCard({
@@ -1063,7 +1060,7 @@ function DesignDocChatCard({
 }) {
   const displayRef = fetchedItemDisplayRef(item, chatRef);
   const doc = item?.doc;
-  const readiness = doc ? DESIGN_DOC_READINESS_DISPLAY[designDocReadiness(doc.completion)] : null;
+  const status = doc ? designDocStatusDisplay(doc) : null;
   return (
     <MingoInfoCard
       title={doc?.title ?? displayRef.title}
@@ -1074,8 +1071,8 @@ function DesignDocChatCard({
       }
       icon={<FileContentIcon size={24} />}
       status={
-        readiness
-          ? { label: readiness.label, variant: readiness.scheme === 'success' ? 'success' : 'grey' }
+        status
+          ? { label: status.label, variant: tagVariantForBadgeColor(status.color_scheme) }
           : { label: 'Design doc', variant: 'grey' }
       }
       anchorProps={buildAnchorProps(displayRef.url, isNewTab, displayRef.targetPlatform)}

package/src/components/features/status-filter-component.tsx

@@ -43,6 +43,12 @@ export interface StatusFilterComponentProps {
   showAll?: boolean;
   /** The options are read on the client and have not arrived: the row draws its skeleton, as in a loading scope. */
   loading?: boolean;
+  /**
+   * The options' labels are known but their counts are not ("Active" now, "Active (33)" once read): while loading,
+   * each option is drawn as its real button with a bar where the count goes, so the row keeps its width and, on a
+   * narrow screen, wraps onto the same lines as the loaded row.
+   */
+  countsPending?: boolean;
 }
 
 /** The row's frame, label and controls, read by the row and by its skeleton, so the skeleton is the row's size. */
@@ -74,6 +80,7 @@ export function StatusFilterComponent({
   label = 'Status',
   showAll = true,
   loading = false,
+  countsPending = false,
 }: StatusFilterComponentProps) {
   // Filter out 'all' from options since we render it separately
   const filteredOptions = statusOptions.filter(option => option.value !== 'all');
@@ -84,6 +91,7 @@ export function StatusFilterComponent({
         label={label}
         // Options the page states itself are its own words: drawn for real. Read ones arrive empty: boxes.
         options={filteredOptions.length > 0 ? filteredOptions.map(option => option.label) : undefined}
+        countsPending={countsPending}
         showAll={showAll}
         showCount={showCount}
         className={className}
@@ -142,6 +150,7 @@ function StatusFilterComponentSkeleton({
   label = 'Status',
   options,
   pills = STATUS_FILTER_SKELETON_PILLS,
+  countsPending = false,
   showAll = true,
   showCount = false,
   className,
@@ -150,6 +159,8 @@ function StatusFilterComponentSkeleton({
   /** Option labels the page states itself: drawn as real buttons (in place of `pills` boxes). */
   options?: string[];
   pills?: number;
+  /** Each option's count is still being read: a bar the width of " (00)" follows its label. */
+  countsPending?: boolean;
   showAll?: boolean;
   showCount?: boolean;
   className?: string;
@@ -182,6 +193,10 @@ function StatusFilterComponentSkeleton({
               tabIndex={-1}
             >
               {option}
+              {/* With the button's gap before it, a 2ch bar is the width of the " (00)" the count adds. */}
+              {countsPending && (
+                <TextLineSkeleton type="inherit" as="span" className="inline-block w-[2ch] align-top" />
+              )}
             </Button>
           ))
         : Array.from({ length: pills }, (_, index) => (

package/src/components/layout/back-button.tsx

@@ -14,6 +14,28 @@ export interface BackButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLBut
    * prefetch, right-click); without it, a button that runs `onClick`.
    */
   href?: string;
+  /**
+   * Go back the way the browser's own back button does: when this tab has an earlier page of the same site, the
+   * click returns to it (with the address it had: its filters, page and sort), and `href` is only where a visitor
+   * who arrived from outside (a shared link, a new tab) goes. Needs `href`.
+   */
+  historyBack?: boolean;
+}
+
+/** The earlier page of this tab, when it is a page of the same site (the Navigation API, else the referrer). */
+function hasSameSiteHistory(): boolean {
+  if (typeof window === 'undefined') return false;
+  const nav = (window as Window & { navigation?: { canGoBack?: boolean; currentEntry?: { index: number } | null } })
+    .navigation;
+  // The Navigation API lists only this tab's same-origin entries, so an earlier one is a page of this site.
+  if (nav && typeof nav.canGoBack === 'boolean') return nav.canGoBack && (nav.currentEntry?.index ?? 0) > 0;
+  try {
+    return (
+      window.history.length > 1 && !!document.referrer && new URL(document.referrer).origin === window.location.origin
+    );
+  } catch {
+    return false;
+  }
 }
 
 /** Its place in the page: the start of the column, above the title. The box is the `link` button's at `default` size. */
@@ -30,7 +52,14 @@ export const BACK_BUTTON_SKELETON_CLASS = 'h-11 w-40 rounded-md md:h-12';
  * Every detail page renders this one (through `PageLayout`'s `backButton` or
  * directly), never a hand-built link.
  */
-export function BackButton({ label = 'Back', className, type = 'button', href, ...props }: BackButtonProps) {
+export function BackButton({
+  label = 'Back',
+  className,
+  type = 'button',
+  href,
+  historyBack = false,
+  ...props
+}: BackButtonProps) {
   const content = (
     <>
       <Chevron02LeftIcon className="size-6 shrink-0" />
@@ -54,7 +83,30 @@ export function BackButton({ label = 'Back', className, type = 'button', href, .
     } = props;
     return (
       <Button asChild variant="link" noPaddingX className={cn(BACK_BUTTON_LAYOUT_CLASS, className)}>
-        <Link {...(shared as unknown as React.AnchorHTMLAttributes<HTMLAnchorElement>)} href={href}>
+        <Link
+          {...(shared as unknown as React.AnchorHTMLAttributes<HTMLAnchorElement>)}
+          href={href}
+          onClick={
+            historyBack
+              ? (event: React.MouseEvent<HTMLAnchorElement>) => {
+                  (shared.onClick as unknown as React.MouseEventHandler<HTMLAnchorElement> | undefined)?.(event);
+                  // A modified click (new tab, new window) keeps the link's own behaviour.
+                  if (
+                    event.defaultPrevented ||
+                    event.button !== 0 ||
+                    event.metaKey ||
+                    event.ctrlKey ||
+                    event.shiftKey ||
+                    event.altKey
+                  )
+                    return;
+                  if (!hasSameSiteHistory()) return;
+                  event.preventDefault();
+                  window.history.back();
+                }
+              : (shared.onClick as unknown as React.MouseEventHandler<HTMLAnchorElement> | undefined)
+          }
+        >
           {content}
         </Link>
       </Button>

package/src/components/loading/unified-skeleton.tsx

@@ -179,11 +179,16 @@ export function TextLineSkeleton({ type, lines = 1, as = 'div', width, className
   );
 }
 
-/** The lines a text run takes per breakpoint: on a phone, from `content-md`, and from `content-lg`. */
+/**
+ * THE lines a text run takes per width: on a phone, from `content-md`, from `content-lg`, and from `content-xl` where
+ * a wide screen wraps it differently (`lg` when not given). Every loading text whose length changes with the width
+ * states its lines in this one shape.
+ */
 export interface TextLinesByBreakpoint {
   phone: number;
   md: number;
   lg: number;
+  xl?: number;
 }
 
 /**
@@ -215,8 +220,19 @@ export function TextLinesByBreakpointSkeleton({
         type={type}
         as={as}
         lines={lines.lg}
-        className={cn('hidden w-full content-lg:flex', className)}
+        className={cn(
+          lines.xl === undefined ? 'hidden w-full content-lg:flex' : 'hidden w-full content-lg:flex content-xl:hidden',
+          className,
+        )}
       />
+      {lines.xl === undefined ? null : (
+        <TextLineSkeleton
+          type={type}
+          as={as}
+          lines={lines.xl}
+          className={cn('hidden w-full content-xl:flex', className)}
+        />
+      )}
     </>
   );
 }

package/src/components/ui/file-manager/file-manager-table.tsx

@@ -57,10 +57,15 @@ export function FileManagerTable({
     // The height its parent gives it, both forms: the rows scroll inside, under the header. Not
     // the window's: whatever is below the parent (a docked composer, a page's padding) would
     // hide the last rows under it. A parent of no definite height lets the table grow with its rows.
-    <div className={cn('flex h-full flex-col rounded-lg border border-ods-border bg-ods-bg', className)}>
+    // `overflow-hidden` rounds the header and the rows at the border's inner curve: a child rounded
+    // to the frame's own radius sits 1px inside it and leaves a sliver of the frame's fill at each
+    // corner. Nothing floats out of the table (the row menu is portalled).
+    <div
+      className={cn('flex h-full flex-col overflow-hidden rounded-lg border border-ods-border bg-ods-bg', className)}
+    >
       {/* ONE header in both forms: the column labels are copy, and while the folder is read the select-all box is the
           real checkbox, inert. */}
-      <div className="flex h-12 items-center rounded-t-lg border-b border-ods-border bg-ods-bg-surface px-4">
+      <div className="flex h-12 items-center border-b border-ods-border bg-ods-bg-surface px-4">
         {showCheckboxes && (
           <div
             className={FILE_MANAGER_CHECKBOX_CELL_CLASS}
@@ -84,7 +89,7 @@ export function FileManagerTable({
         <div className={FILE_MANAGER_ACTIONS_CELL_BOX_CLASS}>{/* Space for action buttons */}</div>
       </div>
 
-      <div className="flex-1 divide-y divide-ods-border overflow-auto rounded-b-lg">
+      <div className="flex-1 divide-y divide-ods-border overflow-auto">
         {loading ? (
           // A folder listing has no page size: a typical folder's rows, each the row's own loading form.
           <LoadingItems count={FILE_MANAGER_SKELETON_ROWS}>

package/src/components/ui/markdown/engine.tsx

@@ -35,7 +35,11 @@ import type { PluggableList } from 'unified';
 import type { ResolveLinkResult } from '../../../types/doc-source';
 import { readAppOrigins, SERVER_APP_ORIGINS, subscribeAppOrigins } from '../../../utils/app-origins';
 import { cn } from '../../../utils/cn';
-import { TextLineSkeleton } from '../../loading/unified-skeleton';
+import {
+  TextLineSkeleton,
+  TextLinesByBreakpointSkeleton,
+  type TextLinesByBreakpoint,
+} from '../../loading/unified-skeleton';
 import { LoadingItems, useLoadingScope } from '../loading-scope';
 import { buildBaseComponents, MARKDOWN_H1_CLASS, MARKDOWN_H2_CLASS, MARKDOWN_PARAGRAPH_CLASS } from './base-components';
 import { MarkdownMediaOriginsContext } from './external-media-notice';
@@ -193,8 +197,8 @@ export interface MarkdownEngineProps {
    * sections, each a heading and its paragraphs. Unset, one paragraph of `skeletonLines` lines.
    */
   skeletonSections?: number;
-  /** Lines of the one paragraph a loading body draws when it names no sections. Default 3. */
-  skeletonLines?: number;
+  /** Lines of the one paragraph a loading body draws when it names no sections, per width. Default 3 at every width. */
+  skeletonLines?: TextLinesByBreakpoint;
   /** A loading body opens with its own `# ` title (a legal document's): its title row is drawn first. */
   skeletonTitle?: boolean;
   /** The content is still being read: the body draws its skeleton (the `skeleton*` shape). A loading scope does the
@@ -203,16 +207,19 @@ export interface MarkdownEngineProps {
 }
 
 /** Lines a loading body draws when its caller names no shape. */
-export const MARKDOWN_SKELETON_LINES = 3;
+export const MARKDOWN_SKELETON_LINES: TextLinesByBreakpoint = { phone: 3, md: 3, lg: 3 };
 /** Paragraphs under each heading of a loading body, and their lines. */
-const SKELETON_SECTION_PARAGRAPHS = [3, 2] as const;
+const SKELETON_SECTION_PARAGRAPHS: readonly TextLinesByBreakpoint[] = [
+  { phone: 3, md: 3, lg: 3 },
+  { phone: 2, md: 2, lg: 2 },
+];
 /**
- * Lines a typical body's opening line set takes, on a phone (below `content-md`) and from `content-md`: a document's
+ * Lines a typical body's opening line set takes, per width: a document's
  * `# ` title wraps on a phone, and the opening paragraph every post and legal document starts with runs a few lines.
  * Typical lengths, never one record's: a longer record growing past them is a settle below its own lines.
  */
-const SKELETON_TITLE_LINES = { phone: 2, wide: 1 } as const;
-const SKELETON_LEAD_LINES = { phone: 5, wide: 3 } as const;
+const SKELETON_TITLE_LINES: TextLinesByBreakpoint = { phone: 2, md: 1, lg: 1 };
+const SKELETON_LEAD_LINES: TextLinesByBreakpoint = { phone: 5, md: 3, lg: 3 };
 /** The renderer's own frame: read by the engine and by its skeleton. */
 /** The renderer's root class, on the rendered document and on every skeleton of one: it names a markdown body. */
 export const MARKDOWN_RENDERER_CLASS = 'simple-markdown-renderer';
@@ -467,31 +474,15 @@ export const MarkdownEngine = memo(function MarkdownEngineGate(props: MarkdownEn
   return <MarkdownEngineImpl {...props} />;
 });
 
-/** A paragraph of `lines` lines at the body's own paragraph type, as one bar of its line height. */
-function ParagraphBar({ lines, className }: { lines: number; className: string }) {
+/** A paragraph of its `lines` per width at the body's own paragraph type. */
+function ParagraphBar({ lines, className }: { lines: TextLinesByBreakpoint; className: string }) {
   return (
     <div className={className}>
-      <TextLineSkeleton type="inherit" lines={lines} className="w-full" />
+      <TextLinesByBreakpointSkeleton lines={lines} />
     </div>
   );
 }
 
-/** Lines of a text run per breakpoint: on a phone, and from `content-md`. */
-interface SkeletonLinesByBreakpoint {
-  phone: number;
-  wide: number;
-}
-
-/** A text run of the lines it takes on a phone and from `content-md` (the content area's own steps). */
-function LinesByBreakpoint({ lines, as = 'div' }: { lines: SkeletonLinesByBreakpoint; as?: 'div' | 'span' }) {
-  return (
-    <>
-      <TextLineSkeleton type="inherit" as={as} lines={lines.phone} className="w-full content-md:hidden" />
-      <TextLineSkeleton type="inherit" as={as} lines={lines.wide} className="hidden w-full content-md:flex" />
-    </>
-  );
-}
-
 /**
  * A markdown body while it is read: the renderer's own frame and type. With `sections`, the body's opening paragraph
  * (a typical length per breakpoint), then each section a REAL `<h2>` (the renderer's heading classes) holding a bar,
@@ -506,7 +497,7 @@ export function MarkdownEngineSkeleton({
   className = '',
 }: {
   sections?: number;
-  lines?: number;
+  lines?: TextLinesByBreakpoint;
   textSize?: TextSizeConfig;
   /** The body opens with its own `# ` title (a legal document's, demoted to an `h2`): its H1 row is drawn first. */
   title?: boolean;
@@ -522,12 +513,12 @@ export function MarkdownEngineSkeleton({
         <div className={ARTICLE_CLASS}>
           {title && (
             <h2 className={cn(MARKDOWN_H1_CLASS, textSizes.h1)}>
-              <LinesByBreakpoint lines={SKELETON_TITLE_LINES} as="span" />
+              <TextLinesByBreakpointSkeleton lines={SKELETON_TITLE_LINES} as="span" />
             </h2>
           )}
           {sections ? (
             <div className={paragraphClass}>
-              <LinesByBreakpoint lines={SKELETON_LEAD_LINES} />
+              <TextLinesByBreakpointSkeleton lines={SKELETON_LEAD_LINES} />
             </div>
           ) : null}
           {sections ? (

package/src/components/ui/people-cell.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { cn } from '../../utils/cn';
 import { personFirstName } from '../../utils/format';
 import { TextLineSkeleton } from '../loading/unified-skeleton';
 import { AvatarStack } from './avatar-stack';
@@ -48,6 +49,11 @@ export interface PersonCellProps {
   size?: 'sm' | 'lg';
   /** The person is still being read: the cell draws its skeleton at its size. A loading scope does the same. */
   loading?: boolean;
+  /**
+   * `2` (default): the name and its second line. `1`: the name alone, one line, with the second line in a tooltip:
+   * for a table whose rows are one line in every column but the first.
+   */
+  lines?: 1 | 2;
 }
 
 const PERSON_CELL_SIZE = {
@@ -67,29 +73,35 @@ export function PersonCell({
   actionTitle,
   size = 'sm',
   loading,
+  lines = 2,
 }: PersonCellProps) {
   // In a page's loading state (or while the host reads the person) the cell is its skeleton.
-  if (useLoadingScope() || loading) return <PersonCellSkeleton size={size} />;
+  if (useLoadingScope() || loading) return <PersonCellSkeleton size={size} lines={lines} />;
   const displayName = name || fallbackName;
   const scale = PERSON_CELL_SIZE[size];
+  const nameLine = (
+    <TruncateText
+      variant={scale.primary}
+      className={onClick ? 'text-ods-accent group-hover/person-cell:underline' : undefined}
+    >
+      {displayName}
+    </TruncateText>
+  );
   const row = (
     <div className={`group/person-cell ${PERSON_ROW_CLASS} ${scale.gap}`}>
       <SquareAvatar size={scale.avatar} src={avatarUrl ?? undefined} alt={displayName} fallback={displayName} />
       <div className="min-w-0 flex-1">
-        <TruncateText
-          variant={scale.primary}
-          className={onClick ? 'text-ods-accent group-hover/person-cell:underline' : undefined}
-        >
-          {displayName}
-        </TruncateText>
-        <TruncateText variant="h6" tone="secondary">
-          {secondary === undefined ? ' ' : secondary || '·'}
-        </TruncateText>
+        {nameLine}
+        {lines === 2 ? (
+          <TruncateText variant="h6" tone="secondary">
+            {secondary === undefined ? ' ' : secondary || '·'}
+          </TruncateText>
+        ) : null}
       </div>
     </div>
   );
-  if (!onClick) return row;
-  return (
+  // A clickable cell is a button in both layouts, so `onClick` and `actionTitle` are never dropped by `lines`.
+  const cell = onClick ? (
     <Button
       variant="transparent"
       onClick={onClick}
@@ -100,18 +112,34 @@ export function PersonCell({
     >
       {row}
     </Button>
+  ) : (
+    row
+  );
+  // One line: the second line is not drawn, so it is the cell's tooltip.
+  return lines === 1 && secondary ? (
+    <FloatingTooltip content={`${displayName} · ${secondary}`} triggerClassName="min-w-0 max-w-full">
+      {cell}
+    </FloatingTooltip>
+  ) : (
+    cell
   );
 }
 
 /** The cell while it loads: the SAME avatar box, gap and two lines (the name's type step, then the caption's). */
-function PersonCellSkeleton({ size = 'sm' }: { size?: PersonCellProps['size'] }) {
+function PersonCellSkeleton({
+  size = 'sm',
+  lines = 2,
+}: {
+  size?: PersonCellProps['size'];
+  lines?: PersonCellProps['lines'];
+}) {
   const scale = PERSON_CELL_SIZE[size];
   return (
     <div className={`${PERSON_ROW_CLASS} ${scale.gap}`} aria-hidden>
       <SquareAvatar loading size={scale.avatar} />
       <div className="flex min-w-0 flex-1 flex-col">
         <TextLineSkeleton type={scale.primary} className="w-3/4" />
-        <TextLineSkeleton type="h6" className="w-1/2" />
+        {lines === 2 ? <TextLineSkeleton type="h6" className="w-1/2" /> : null}
       </div>
     </div>
   );
@@ -130,14 +158,16 @@ export interface PeopleCellProps {
   people: PeopleCellPerson[];
   /** Shown when the list is empty — the same slot `PersonCell` fills. */
   fallbackName?: string;
+  /** `1`: one line for one person or several (see `PersonCellProps.lines`). */
+  lines?: 1 | 2;
 }
 
 /** Positions the multi-person stack reserves: two faces, or one face and "+N". */
 const PEOPLE_CELL_STACK_SLOTS = 2;
 
-export function PeopleCell({ people, fallbackName = 'Unassigned' }: PeopleCellProps) {
+export function PeopleCell({ people, fallbackName = 'Unassigned', lines = 2 }: PeopleCellProps) {
   // In a page's loading state the people are read: the cell is a person cell's skeleton.
-  if (useLoadingScope()) return <PersonCellSkeleton />;
+  if (useLoadingScope()) return <PersonCellSkeleton lines={lines} />;
   if (people.length <= 1) {
     const [person] = people;
     return (
@@ -146,6 +176,7 @@ export function PeopleCell({ people, fallbackName = 'Unassigned' }: PeopleCellPr
         avatarUrl={person?.avatarUrl}
         secondary={person ? person.secondary : undefined}
         fallbackName={fallbackName}
+        lines={lines}
       />
     );
   }
@@ -163,7 +194,12 @@ export function PeopleCell({ people, fallbackName = 'Unassigned' }: PeopleCellPr
             people={people.map(p => ({ key: p.key, name: p.name || 'Unknown', avatarUrl: p.avatarUrl }))}
           />
         </div>
-        <p className="line-clamp-2 min-w-0 flex-1 break-words text-ods-text-primary text-h6">
+        <p
+          className={cn(
+            'min-w-0 flex-1 break-words text-ods-text-primary text-h6',
+            lines === 1 ? 'line-clamp-1' : 'line-clamp-2',
+          )}
+        >
           <span aria-hidden>{people.map(p => personFirstName(p.name, 'Unknown')).join(' & ')}</span>
           <span className="sr-only">{fullNames}</span>
         </p>

package/src/components/ui/progress-bar.tsx

@@ -27,6 +27,12 @@ type ProgressBarProps = {
   height?: number; // desktop height (px)
   mobileHeight?: number; // mobile height (px)
   inverted?: boolean; // if true, high values are good (green), low values are bad (red)
+  /**
+   * `threshold` (default): the fill takes the success, warning or error colour by the thresholds. `neutral`: the fill
+   * is the secondary text colour at every value, for a count that is progress, not a health reading (a sign-off
+   * count), so a partial bar never reads as an error.
+   */
+  tone?: 'threshold' | 'neutral';
   /** The value is still being read: the bar draws its `ProgressBarSkeleton` at its own height. A loading scope does
    *  the same. */
   loading?: boolean;
@@ -42,6 +48,7 @@ export const ProgressBar: React.FC<ProgressBarProps> = ({
   height = PROGRESS_BAR_HEIGHT.desktop,
   mobileHeight = PROGRESS_BAR_HEIGHT.mobile,
   inverted = false,
+  tone = 'threshold',
   loading: loadingProp,
 }) => {
   // ONE switch: in a page's loading state (or while the host reads the value) the bar is its skeleton.
@@ -76,6 +83,7 @@ export const ProgressBar: React.FC<ProgressBarProps> = ({
 
   // Pick color based on thresholds using ODS design tokens
   const getColor = () => {
+    if (tone === 'neutral') return 'var(--color-text-secondary)';
     if (inverted) {
       // Inverted: high values = good (green), low values = bad (red)
       // For battery health: 100% = green, <30% = red

package/src/components/ui/tag.tsx

@@ -201,6 +201,20 @@ function isEmptyTagLabel(label: React.ReactNode): boolean {
   return label == null || label === false || (typeof label === 'string' && label.trim() === '');
 }
 
+/** The tones a badge colour keeps when it is drawn as a tag. */
+const BADGE_COLOR_TAG_TONES = ['success', 'warning', 'error'] as const;
+
+/**
+ * THE tag variant for a badge colour that is data (a `StatusBadge` colour scheme a vocabulary row stores): the three
+ * semantic tones carry over, every other colour reads grey. Every card that draws such a colour as a tag reads it
+ * here, so a status is the same tone in a badge and in a chat card.
+ */
+export function tagVariantForBadgeColor(
+  color: string | null | undefined,
+): (typeof BADGE_COLOR_TAG_TONES)[number] | 'grey' {
+  return BADGE_COLOR_TAG_TONES.find(tone => tone === color) ?? 'grey';
+}
+
 export { Tag, tagVariants };
 
 /**