@flamingo-stack/openframe-frontend-core 0.0.737 → 0.0.738

package/dist/utils/index.cjs

@@ -85851,6 +85851,57 @@ function pathMatchesAny(pathname, patterns) {
   return (patterns ?? []).some((pattern) => matchesPathPattern(pathname, pattern));
 }
 
+// src/utils/demo-clock.ts
+function hashSeed(seed) {
+  let hash = 2166136261;
+  for (let i = 0; i < seed.length; i++) {
+    hash ^= seed.charCodeAt(i);
+    hash = Math.imul(hash, 16777619);
+  }
+  return hash >>> 0;
+}
+function seededRandom(seed) {
+  let state = hashSeed(seed);
+  return () => {
+    state = state + 1831565813 >>> 0;
+    let t = state;
+    t = Math.imul(t ^ t >>> 15, t | 1);
+    t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function formatDemoClock(minutesOfDay) {
+  const minutes = (Math.floor(minutesOfDay) % 1440 + 1440) % 1440;
+  const hour24 = Math.floor(minutes / 60);
+  const hour12 = hour24 % 12 === 0 ? 12 : hour24 % 12;
+  return `${hour12}:${String(minutes % 60).padStart(2, "0")} ${hour24 < 12 ? "AM" : "PM"}`;
+}
+function demoClockTimes(seed, options = {}) {
+  const { count = 2, fromHour = 8, toHour = 18, maxGapMinutes = 3 } = options;
+  const random = seededRandom(seed);
+  const span = Math.max(1, (toHour - fromHour) * 60);
+  let minutes = fromHour * 60 + Math.floor(random() * span);
+  const times = [];
+  for (let i = 0; i < Math.max(0, count); i++) {
+    if (i > 0) minutes += Math.floor(random() * (maxGapMinutes + 1));
+    times.push(formatDemoClock(minutes));
+  }
+  return times;
+}
+
+// src/utils/identity-tint.ts
+function identityTint(accent) {
+  if (!accent) return void 0;
+  const wash = `color-mix(in srgb, ${accent} 2%, transparent)`;
+  return {
+    borderColor: `color-mix(in srgb, ${accent} 30%, transparent)`,
+    backgroundImage: [
+      `radial-gradient(120% 120% at 100% 100%, color-mix(in srgb, ${accent} 4%, transparent), transparent 70%)`,
+      `linear-gradient(${wash}, ${wash})`
+    ].join(", ")
+  };
+}
+
 exports.ACTIVE_ANCHOR_ATTRIBUTE = ACTIVE_ANCHOR_ATTRIBUTE;
 exports.AI_PROVIDERS = AI_PROVIDERS;
 exports.ANTHROPIC_SUPPORTED_IMAGE_MIME = ANTHROPIC_SUPPORTED_IMAGE_MIME;
@@ -85985,6 +86036,7 @@ exports.deepClone = deepClone;
 exports.defineParamSchema = defineParamSchema;
 exports.defineRescueForm = defineRescueForm;
 exports.delay = delay;
+exports.demoClockTimes = demoClockTimes;
 exports.deriveActiveColor = deriveActiveColor;
 exports.deriveHoverColor = deriveHoverColor;
 exports.designDocReadiness = designDocReadiness;
@@ -86042,6 +86094,7 @@ exports.formatDateTimeAt = formatDateTimeAt;
 exports.formatDateTimeYmd = formatDateTimeYmd;
 exports.formatDateUTC = formatDateUTC;
 exports.formatDateWithTimezone = formatDateWithTimezone;
+exports.formatDemoClock = formatDemoClock;
 exports.formatDocName = formatDocName;
 exports.formatDuration = formatDuration;
 exports.formatDurationCompact = formatDurationCompact;
@@ -86146,6 +86199,7 @@ exports.groupsByTable = groupsByTable;
 exports.hasGenericEmailDomain = hasGenericEmailDomain;
 exports.hexToRgb = hexToRgb2;
 exports.hostMatches = hostMatches;
+exports.identityTint = identityTint;
 exports.isAnnouncementDismissed = isAnnouncementDismissed;
 exports.isBadgePaletteKey = isBadgePaletteKey;
 exports.isBlankLine = isBlankLine;

package/dist/utils/index.d.ts

@@ -97,4 +97,6 @@ export type { ProgramDateFields, ProgramInstant, ProgramMetaRenderers } from './
 export { copyrightLine } from './copyright-line';
 export * from './path-pattern';
 export * from './random-id';
+export * from './demo-clock';
+export * from './identity-tint';
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"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"}

package/dist/utils/index.js

@@ -261,6 +261,8 @@ import { PROGRAM_META_RENDERERS } from "./program-meta-renderers.js";
 import { copyrightLine } from "./copyright-line.js";
 export * from "./path-pattern.js";
 export * from "./random-id.js";
+export * from "./demo-clock.js";
+export * from "./identity-tint.js";
 export {
   ACTIVE_ANCHOR_ATTRIBUTE,
   ANTHROPIC_SUPPORTED_IMAGE_MIME,

package/dist/{video-file-player-6NWGXZ3W.cjs → video-file-player-ZH2ILAPO.cjs}

@@ -2,7 +2,7 @@
 "use client";
 
 
-var _chunkHZJRERJWcjs = require('./chunk-HZJRERJW.cjs');
+var _chunk3RFQPQ7Zcjs = require('./chunk-3RFQPQ7Z.cjs');
 
 
 var _chunkJKX2C3I2cjs = require('./chunk-JKX2C3I2.cjs');
@@ -13,7 +13,7 @@ var _chunkJKX2C3I2cjs = require('./chunk-JKX2C3I2.cjs');
 
 
 
-var _chunkYADG5Q7Ccjs = require('./chunk-YADG5Q7C.cjs');
+var _chunk63N4FN5Vcjs = require('./chunk-63N4FN5V.cjs');
 require('./chunk-S5C3OZCO.cjs');
 require('./chunk-4IYNDV3G.cjs');
 require('./chunk-CW3ML76U.cjs');
@@ -23,7 +23,7 @@ var _chunkVOX4E6AXcjs = require('./chunk-VOX4E6AX.cjs');
 require('./chunk-UJ7AXHRZ.cjs');
 
 
-var _chunkAZL332TKcjs = require('./chunk-AZL332TK.cjs');
+var _chunk2QMBXGMQcjs = require('./chunk-2QMBXGMQ.cjs');
 require('./chunk-V45KLJQP.cjs');
 require('./chunk-3ATAYP36.cjs');
 
@@ -244,7 +244,7 @@ function useHoverPlayback(mediaRef, sound, { playOnHover, playWhenHovered, muted
     onLiveElement(() => {
       element.volume = SOUND_VOLUME;
     });
-    if (_chunkYADG5Q7Ccjs.hasUserInteracted.call(void 0, )) {
+    if (_chunk63N4FN5Vcjs.hasUserInteracted.call(void 0, )) {
       void playWithSound(element, hostMutedRef.current, wanted);
       return;
     }
@@ -257,8 +257,8 @@ function useHoverPlayback(mediaRef, sound, { playOnHover, playWhenHovered, muted
       });
       endMutedFallback();
     };
-    _chunkYADG5Q7Ccjs.activationWaiters.add(onFirstGesture);
-    cleanups.push(() => _chunkYADG5Q7Ccjs.activationWaiters.delete(onFirstGesture));
+    _chunk63N4FN5Vcjs.activationWaiters.add(onFirstGesture);
+    cleanups.push(() => _chunk63N4FN5Vcjs.activationWaiters.delete(onFirstGesture));
   }, [mediaRef, hostMutedRef, playWithSound, playMuted, endMutedFallback]);
   _react.useEffect.call(void 0, () => () => _optionalChain([endHoverRef, 'access', _41 => _41.current, 'optionalCall', _42 => _42()]), []);
   const controlled = typeof playWhenHovered === "boolean";
@@ -284,7 +284,7 @@ function usePlaybackHealth(mediaRef, url, monitored) {
       if (!monitored) return;
       clearStallTimer();
       setFailed(true);
-      _chunkYADG5Q7Ccjs.reportPlaybackFailure.call(void 0, { kind: "file", src: url, reason });
+      _chunk63N4FN5Vcjs.reportPlaybackFailure.call(void 0, { kind: "file", src: url, reason });
     },
     [monitored, clearStallTimer, url]
   );
@@ -294,7 +294,7 @@ function usePlaybackHealth(mediaRef, url, monitored) {
     stallTimerRef.current = setTimeout(() => {
       stallTimerRef.current = null;
       fail("stall");
-    }, _chunkYADG5Q7Ccjs.VIDEO_STALL_TIMEOUT_MS);
+    }, _chunk63N4FN5Vcjs.VIDEO_STALL_TIMEOUT_MS);
   }, [mediaRef, monitored, fail]);
   const alive = _react.useCallback.call(void 0, () => {
     clearStallTimer();
@@ -415,7 +415,7 @@ function FilePlayer({
       src: url,
       poster: poster || void 0,
       streamType: "on-demand",
-      preload: _nullishCoalesce(preload, () => ( (_chunkHZJRERJWcjs.saveDataEnabled.call(void 0, ) ? "none" : "metadata"))),
+      preload: _nullishCoalesce(preload, () => ( (_chunk3RFQPQ7Zcjs.saveDataEnabled.call(void 0, ) ? "none" : "metadata"))),
       playsInline: true,
       muted,
       preferCmcd: "header",
@@ -433,7 +433,7 @@ function FilePlayer({
   const unmute = sound.mutedFallback && !hideMutedBadge ? (
     // The common Button's bare media glyph: white at rest, the accent while hovered.
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkAZL332TKcjs.Button,
+      _chunk2QMBXGMQcjs.Button,
       {
         type: "button",
         variant: "glyph",
@@ -442,11 +442,11 @@ function FilePlayer({
         title: "Unmute",
         onClick: sound.unmute,
         className: "absolute inset-0 z-10 m-auto",
-        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYADG5Q7Ccjs.VideoUnmuteGlyph, {})
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk63N4FN5Vcjs.VideoUnmuteGlyph, {})
       }
     )
   ) : null;
-  const failure = health.failed ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYADG5Q7Ccjs.VideoErrorOverlay, { onRetry: health.retry }) : null;
+  const failure = health.failed ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk63N4FN5Vcjs.VideoErrorOverlay, { onRetry: health.retry }) : null;
   const boxed = Boolean(playOnHover) || hover.controlled || Boolean(autoPlayUnmuted) || Boolean(startMuted) || !chromeless;
   if (!boxed) return player;
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative h-full w-full", ...hover.pointerHandlers, children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.737",
+  "version": "0.0.738",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "sideEffects": [

package/src/components/agent-identity.tsx

@@ -1,12 +1,13 @@
 'use client';
 
-import { createContext, useCallback, useContext, useEffect, useMemo, type ReactNode } from 'react';
+import { createContext, useCallback, useContext, useEffect, useMemo, type CSSProperties, type ReactNode } from 'react';
 import {
   AGENT_IDENTITIES_API_PATH,
   useAgentIdentities,
   type AgentIdentityIcon,
   type AgentIdentityIcons,
 } from '../hooks/use-agent-identities';
+import { identityTint } from '../utils/identity-tint';
 import { HEX_PATTERN } from '../utils/ods-color-utils';
 
 export { AGENT_IDENTITIES_API_PATH, type AgentIdentityIcon, type AgentIdentityIcons };
@@ -126,3 +127,13 @@ export function useAgentAccents(): (slug: string | null | undefined) => string |
     [identities],
   );
 }
+
+/**
+ * The tint of a surface that belongs to an agent (a card of its answer, the
+ * window it works in), from the agent's own identity colour. THE way a surface
+ * is tinted for an agent: a component names the agent, never a colour. With no
+ * agent, or one whose identity names no colour, there is no tint.
+ */
+export function useAgentTint(slug: string | null | undefined): CSSProperties | undefined {
+  return identityTint(useAgentAccents()(slug));
+}

package/src/components/chat/chat-turn.tsx

@@ -0,0 +1,52 @@
+import type { ReactNode } from 'react';
+import { cn } from '../../utils/cn';
+
+export interface ChatTurnProps {
+  /** Rendered as given, at the size the caller draws it (a person's picture, an agent's mark). */
+  avatar?: ReactNode;
+  name: string;
+  /** A quieter word after the name ("on her laptop"). */
+  meta?: string;
+  /** `quiet` steps the name back to the caption size and colour (a turn inside a denser card). */
+  nameSize?: 'default' | 'quiet';
+  /** Shown as given, at the far end of the name row ("2:47 PM"). */
+  time?: string | null;
+  /** What was said. A string is drawn as the message text; a node is drawn as given. */
+  children?: ReactNode;
+  className?: string;
+}
+
+/**
+ * THE turn of a scripted conversation (an example card, a step of a demo): the
+ * speaker's picture, then beside it their name, the time at the far end, and
+ * what was said under them. Names read as they do everywhere else: the body
+ * face, the text colour.
+ */
+export function ChatTurn({ avatar, name, meta, nameSize = 'default', time, children, className }: ChatTurnProps) {
+  return (
+    <div className={cn('flex min-w-0 items-start gap-[var(--spacing-system-sf)]', className)}>
+      {avatar && <span className="shrink-0">{avatar}</span>}
+      <div className="flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-xxs)]">
+        <div className="flex min-w-0 items-baseline gap-[var(--spacing-system-xsf)]">
+          <span className="flex min-w-0 flex-1 items-baseline gap-[var(--spacing-system-xsf)]">
+            <span
+              className={cn(
+                'min-w-0 truncate',
+                nameSize === 'quiet' ? 'text-ods-text-secondary text-h6' : 'text-ods-text-primary text-h4',
+              )}
+            >
+              {name}
+            </span>
+            {meta && <span className="min-w-0 truncate text-ods-text-secondary text-h6">{meta}</span>}
+          </span>
+          {time && <span className="shrink-0 text-ods-text-secondary text-h6">{time}</span>}
+        </div>
+        {typeof children === 'string' ? (
+          <p className="m-0 whitespace-pre-wrap text-ods-text-primary text-h4">{children}</p>
+        ) : (
+          children
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/chat/index.ts

@@ -23,6 +23,7 @@ export * from './slash-command-suggestions';
 export * from './chat-message-enhanced';
 export * from './chat-message-list';
 export * from './chat-message-row';
+export * from './chat-turn';
 export * from './chat-message-skeleton';
 
 export * from './quick-action-chip';

package/src/components/faq/faq-section.tsx

@@ -498,8 +498,11 @@ export function FaqSection({
   const titleNode = heading === undefined ? <h2 className={SECTION_HEADING_CLASS}>{DEFAULT_HEADING_TEXT}</h2> : heading;
   const headingNode =
     showTopic && topic ? (
+      // The host's heading may arrive from a server component, still streaming: React cannot check such a
+      // node when it sits in a list of siblings and warns about a missing key. So it is the ONLY child of its
+      // own wrapper, and the two siblings here are this component's own elements.
       <div className="space-y-1">
-        {titleNode}
+        <div>{titleNode}</div>
         <p className="text-ods-text-muted text-h6">{topic}</p>
       </div>
     ) : (

package/src/components/features/auth/auth-benefits-panel.tsx

@@ -1,19 +1,12 @@
 'use client';
 
-import type { ReactNode } from 'react';
 import { cn } from '../../../utils/cn';
-import { trialLabels } from '../../../utils/trial';
-import { FileOffIcon } from '../../icons-v2-generated/documents/file-off-icon';
-import { CreditCardXmarkIcon } from '../../icons-v2-generated/finance/credit-card-xmark-icon';
 import { OpenframeLogoIcon } from '../../icons-v2-generated/logos/openframe-logo-icon';
-import { FlaskVialIcon } from '../../icons-v2-generated/school/flask-vial-icon';
-import { XmarkAltIcon } from '../../icons-v2-generated/signs-and-symbols/xmark-alt-icon';
+import { BenefitList, trialBenefits, type BenefitItem } from '../../ui/benefit-list';
 import { Button } from '../../ui/button';
 
-export interface AuthBenefit {
-  icon: ReactNode;
-  label: string;
-}
+/** One benefit of the panel: the lib's benefit item. */
+export type AuthBenefit = BenefitItem;
 
 export interface AuthBenefitsPanelProps {
   title?: string;
@@ -31,17 +24,6 @@ const DEFAULT_TITLE = 'The All-in-One Open Platform for MSPs';
 const DEFAULT_DESCRIPTION =
   'All your core ops in one place - built for MSPs who are done duct-taping tools together. Unified stack, AI-ready, no vendor tax. Just solid software that lets you run lean and fast.';
 
-/** The default chips: the trial's terms, and its length when the host knows it. */
-function defaultBenefits(trialDays: number | null | undefined): AuthBenefit[] {
-  const labels = trialLabels(trialDays);
-  return [
-    { icon: <CreditCardXmarkIcon />, label: labels.noCard },
-    { icon: <XmarkAltIcon />, label: labels.cancel },
-    ...(labels.length ? [{ icon: <FlaskVialIcon />, label: labels.length }] : []),
-    { icon: <FileOffIcon />, label: labels.noContract },
-  ];
-}
-
 /**
  * Marketing panel shown alongside the auth forms — title, blurb, benefit chips
  * and a "learn more" link. Presentational; content is overridable via props.
@@ -50,7 +32,7 @@ export function AuthBenefitsPanel({
   title = DEFAULT_TITLE,
   description = DEFAULT_DESCRIPTION,
   trialDays,
-  benefits = defaultBenefits(trialDays),
+  benefits = trialBenefits(trialDays),
   learnMoreLabel = 'Learn More About OpenFrame',
   learnMoreUrl = 'https://www.flamingo.run/',
   className,
@@ -65,16 +47,7 @@ export function AuthBenefitsPanel({
       <h2 className="tracking-[-0.64px] text-ods-text-primary text-h2">{title}</h2>
       <p className="text-ods-text-primary text-h4">{description}</p>
 
-      <div className="flex flex-wrap content-center items-center gap-[var(--spacing-system-m)]">
-        {benefits.map(benefit => (
-          <div key={benefit.label} className="flex items-center gap-[var(--spacing-system-xs)]">
-            <span className="flex size-4 shrink-0 items-center justify-center text-ods-text-secondary [&_svg]:size-4">
-              {benefit.icon}
-            </span>
-            <span className="whitespace-nowrap text-ods-text-primary text-h4">{benefit.label}</span>
-          </div>
-        ))}
-      </div>
+      <BenefitList items={benefits} />
 
       <Button
         variant="outline"

package/src/components/features/conversation-card.tsx

@@ -1,6 +1,11 @@
+'use client';
+
 import type { ReactNode } from 'react';
 import { cn } from '../../utils/cn';
+import { useAgentTint } from '../agent-identity';
+import { ChatTurn } from '../chat/chat-turn';
 import { CheckCircleIcon } from '../icons-v2-generated/signs-and-symbols/check-circle-icon';
+import { Tag } from '../ui/tag';
 
 export interface ConversationCardSpeaker {
   /** Rendered as given (an avatar, an agent mark). */
@@ -8,11 +13,13 @@ export interface ConversationCardSpeaker {
   name: string;
   /** A quieter word after the name ("on her laptop", "this computer"). */
   meta?: string;
+  /** When they spoke, as shown ("2:47 PM"). */
+  time?: string;
 }
 
 export interface ConversationCardProps {
   requester: ConversationCardSpeaker;
-  /** What they said, shown in quotation marks. */
+  /** What they said. */
   request: string;
   responder: ConversationCardSpeaker;
   /** What was done about it. */
@@ -25,22 +32,19 @@ export interface ConversationCardProps {
   footerValue: string;
   /** `attention` paints the answer in the warning colour: it needs a person. */
   footerTone?: 'default' | 'attention';
+  /**
+   * The slug of the agent that answered. The card takes that agent's tint from
+   * its identity, so it reads as that agent's at a glance. A card names its
+   * agent, never a colour.
+   */
+  agent?: string | null;
   className?: string;
 }
 
-function Who({ speaker }: { speaker: ConversationCardSpeaker }) {
-  return (
-    <div className="flex items-baseline gap-2 text-ods-text-primary text-h4">
-      {speaker.name}
-      {speaker.meta && <span className="text-ods-text-secondary text-h6">{speaker.meta}</span>}
-    </div>
-  );
-}
-
 /**
  * A request and what was done about it, as two turns and a footer: who asked
- * and what they said, who answered and the result, then one line that sums up
- * the reader's own part in it.
+ * and what they said, who answered and the result (a command block with its
+ * check), then one line that sums up the reader's own part in it.
  */
 export function ConversationCard({
   requester,
@@ -51,47 +55,45 @@ export function ConversationCard({
   footerLabel,
   footerValue,
   footerTone = 'default',
+  agent,
   className,
 }: ConversationCardProps) {
+  const tint = useAgentTint(agent);
   return (
     <div
-      className={cn('flex h-full flex-col gap-4 rounded-xl border border-ods-border bg-ods-card p-5 md:p-7', className)}
+      className={cn(
+        'flex h-full flex-col gap-[var(--spacing-system-mf)] overflow-hidden rounded-md border border-ods-border bg-ods-bg p-[var(--spacing-system-mf)]',
+        className,
+      )}
+      style={tint}
     >
-      <div className="flex items-start gap-3">
-        <span className="shrink-0">{requester.avatar}</span>
-        <div className="min-w-0 flex-1">
-          <Who speaker={requester} />
-          {/* Every part keeps a fixed number of lines, so cards in a row or a carousel line up part by part. */}
-          <p className="m-0 mt-1 line-clamp-2 min-h-[2lh] text-ods-text-primary text-h3" title={request}>
-            &ldquo;{request}&rdquo;
-          </p>
-        </div>
-      </div>
-      <div className="flex items-start gap-3 rounded-md border border-ods-border bg-ods-bg p-3.5">
-        <span className="shrink-0">{responder.avatar}</span>
-        <div className="min-w-0 flex-1">
-          <Who speaker={responder} />
-          <div className="mt-1 flex items-start gap-2 text-ods-text-secondary text-h4">
-            <CheckCircleIcon size={16} className="mt-1 shrink-0 text-ods-success" aria-hidden />
-            <span className="line-clamp-3 min-h-[3lh] min-w-0 flex-1" title={outcome}>
-              {outcome}
-            </span>
-            {outcomeAside}
-          </div>
+      {/* Every part keeps a fixed number of lines, so cards in a row or a carousel line up part by part. */}
+      <ChatTurn avatar={requester.avatar} name={requester.name} meta={requester.meta} time={requester.time}>
+        <p className="m-0 line-clamp-2 min-h-[2lh] text-ods-text-primary text-h3" title={request}>
+          &ldquo;{request}&rdquo;
+        </p>
+      </ChatTurn>
+      {/* The answer is a command block: who did it, what was done, and its check. */}
+      <ChatTurn
+        avatar={responder.avatar}
+        name={responder.name}
+        meta={responder.meta}
+        time={responder.time}
+        className="rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-sf)]"
+      >
+        <div className="flex items-start gap-[var(--spacing-system-xsf)] text-ods-text-secondary text-h4">
+          <span className="line-clamp-3 min-h-[3lh] min-w-0 flex-1" title={outcome}>
+            {outcome}
+          </span>
+          {outcomeAside}
+          <span className="flex h-[1lh] shrink-0 items-center">
+            <CheckCircleIcon size={16} className="text-ods-success" aria-hidden />
+          </span>
         </div>
-      </div>
-      <div className="mt-auto flex items-center justify-between gap-3 border-t border-ods-border pt-3.5 text-ods-text-secondary text-h6">
+      </ChatTurn>
+      <div className="mt-auto flex items-center justify-between gap-[var(--spacing-system-sf)] text-ods-text-secondary text-h6">
         <span>{footerLabel}</span>
-        <span
-          className={cn(
-            'inline-flex whitespace-nowrap rounded-full border px-3 py-1',
-            footerTone === 'attention'
-              ? 'border-ods-warning text-ods-warning'
-              : 'border-ods-border text-ods-text-secondary',
-          )}
-        >
-          {footerValue}
-        </span>
+        <Tag as="span" label={footerValue} variant={footerTone === 'attention' ? 'warning' : 'badge'} />
       </div>
     </div>
   );

package/src/components/platform/ToolBadge.tsx

@@ -85,13 +85,14 @@ export const ToolBadge: React.FC<ToolBadgeProps> = ({
     return linked(
       <span
         className={cn(
-          'inline-flex h-7 items-center gap-1.5 rounded-md border border-ods-border px-2 text-ods-text-secondary text-h6',
-          href && 'transition-colors hover:border-ods-border-hover hover:text-ods-text-primary',
+          // The house tag (Figma `tag`): 32px, on the card surface, the caption face.
+          'inline-flex h-8 items-center gap-[var(--spacing-system-xs)] rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-xsf)] text-ods-text-primary text-h5',
+          href && 'transition-colors hover:border-ods-border-hover',
           className,
         )}
       >
         {mark && (
-          <span className="flex h-3.5 w-3.5 shrink-0 items-center justify-center [&_img]:h-full [&_img]:w-full [&_img]:object-contain [&_svg]:h-full [&_svg]:w-full">
+          <span className="flex h-4 w-4 shrink-0 items-center justify-center [&_img]:h-full [&_img]:w-full [&_img]:rounded-sm [&_img]:object-contain [&_svg]:h-full [&_svg]:w-full">
             {mark}
           </span>
         )}

package/src/components/ui/app-window-frame.tsx

@@ -1,5 +1,8 @@
+'use client';
+
 import type { ReactNode } from 'react';
 import { cn } from '../../utils/cn';
+import { useAgentTint } from '../agent-identity';
 
 export interface AppWindowFrameProps {
   /** Centered in the title bar. */
@@ -7,6 +10,12 @@ export interface AppWindowFrameProps {
   children: ReactNode;
   /** A bar pinned under the body (a status line, an action). */
   footer?: ReactNode;
+  /**
+   * The slug of the agent whose window this is. The window takes that agent's
+   * tint from its identity, like every card of the agent's. A window names its
+   * agent, never a colour.
+   */
+  agent?: string | null;
   className?: string;
   /** The scrolling body between the title bar and the footer. */
   bodyClassName?: string;
@@ -19,10 +28,17 @@ export interface AppWindowFrameProps {
  *
  * The frame is a column, so give it a height and the body fills what is left.
  */
-export function AppWindowFrame({ title, children, footer, className, bodyClassName }: AppWindowFrameProps) {
+export function AppWindowFrame({ title, children, footer, agent, className, bodyClassName }: AppWindowFrameProps) {
+  const tint = useAgentTint(agent);
   return (
     <div
-      className={cn('flex min-w-0 flex-col overflow-hidden rounded-xl border border-ods-border bg-ods-card', className)}
+      className={cn(
+        'flex min-w-0 flex-col overflow-hidden rounded-xl border border-ods-border',
+        // An agent's window sits on the page surface under that agent's tint.
+        tint ? 'bg-ods-bg' : 'bg-ods-card',
+        className,
+      )}
+      style={tint}
     >
       <div className="relative flex h-10 shrink-0 items-center gap-2 border-b border-ods-border px-4" aria-hidden>
         <span className="h-2.5 w-2.5 rounded-full bg-ods-border" />