@flamingo-stack/openframe-frontend-core 0.0.438 → 0.0.439-snapshot.20260717095442

package/src/components/categories-cart.tsx

@@ -19,7 +19,7 @@ export function CategoriesCart({
   return (
     <Link
       href={`/vendors?category=${category.slug}`}
-      className={`block bg-ods-card border border-ods-border rounded-lg p-3 md:p-4 pb-4 md:pb-6 hover:border-[#FFC008] transition-colors group relative ${className}`}
+      className={`block bg-ods-card border border-ods-border rounded-lg p-3 md:p-4 pb-4 md:pb-6 hover:border-ods-accent transition-colors group relative ${className}`}
     >
       <div className="flex flex-col gap-4 md:gap-6">
         {/* Vendor Icons Grid */}
@@ -49,7 +49,7 @@ export function CategoriesCart({
                   key={index}
                   className="w-8 h-8 md:w-10 md:h-10 bg-ods-border rounded flex items-center justify-center opacity-30 flex-shrink-0"
                 >
-                  <div className="w-4 h-4 md:w-6 md:h-6 bg-[#888888] rounded-sm" />
+                  <div className="w-4 h-4 md:w-6 md:h-6 bg-ods-skeleton rounded-sm" />
                 </div>
               ))
             )}
@@ -66,22 +66,22 @@ export function CategoriesCart({
             <h3 className="text-xl md:text-2xl font-bold text-ods-text-primary group-hover:text-ods-accent transition-colors leading-[1.33] font-body">
               {category.name}
             </h3>
-            <p className="text-sm md:text-base font-medium text-ods-text-secondary leading-[1.43] font-body">
+            <p className="text-h6 text-ods-text-secondary">
               {subcategoryCount || 0} Subcategories • {vendorCount || 0} Products
             </p>
           </div>
 
           <div className="flex items-start md:items-end justify-between gap-4 md:gap-6">
-            <p className="font-['DM_Sans'] font-medium text-lg leading-[1.33] text-ods-text-primary flex-1">
+            <p className="text-h4 text-ods-text-primary flex-1">
               {category.description}
             </p>
 
             {/* Arrow Button */}
             <div
-              className="flex items-center justify-center w-10 h-10 md:w-12 md:h-12 bg-transparent border border-ods-border rounded-md group-hover:bg-[#FFC008] transition-colors flex-shrink-0"
+              className="flex items-center justify-center w-10 h-10 md:w-12 md:h-12 bg-transparent border border-ods-border rounded-md group-hover:bg-ods-accent transition-colors flex-shrink-0"
               aria-label={`View ${category.name} category`}
             > 
-              <ChevronRight className="w-5 h-5 md:w-6 md:h-6 text-ods-text-primary group-hover:text-black transition-colors" />
+              <ChevronRight className="w-5 h-5 md:w-6 md:h-6 text-ods-text-primary group-hover:text-ods-text-on-accent transition-colors" />
             </div>
           </div>
         </div>

package/src/components/category-card.tsx

@@ -12,23 +12,23 @@ interface CategoryCardProps {
 
 export function CategoryCard({ name, description, categoryCount, productCount, icons = [] }: CategoryCardProps) {
   return (
-    <article className="bg-[#1A1A1A] border border-[#424242] rounded-[12px] p-8 flex flex-col min-w-0 box-border">
+    <article className="bg-ods-card border border-ods-border rounded-[12px] p-8 flex flex-col min-w-0 box-border">
       <div className="flex gap-6 mb-8 justify-center items-center">
         {(icons.length > 0 ? icons : Array(10).fill(null)).map((icon, i) => (
-          <div key={i} className="w-10 h-10 bg-gray-700 rounded flex items-center justify-center">
+          <div key={i} className="w-10 h-10 bg-ods-skeleton rounded flex items-center justify-center">
             {icon}
           </div>
         ))}
       </div>
       <div className="flex-1 flex flex-col">
         <h2 className="text-[24px] font-bold text-ods-text-primary mb-2 text-left leading-tight">{name}</h2>
-        <div className="text-[16px] text-ods-text-secondary mb-4 text-left">
+        <div className="text-h6 text-ods-text-secondary mb-4 text-left">
           {categoryCount} Categories • {productCount} Products
         </div>
         <div className="flex flex-row items-start">
-          <p className="text-[16px] text-ods-text-primary text-left leading-snug flex-1">{description}</p>
+          <p className="text-h6 text-ods-text-primary text-left flex-1">{description}</p>
           <button
-            className="w-12 h-12 flex items-center justify-center border border-ods-border rounded-[6px] bg-transparent hover:bg-[#FFC008] transition-colors ml-4"
+            className="w-12 h-12 flex items-center justify-center border border-ods-border rounded-[6px] bg-transparent hover:bg-ods-accent transition-colors ml-4"
             style={{ minWidth: 48, minHeight: 48 }}
             aria-label={`View ${name}`}
           >

package/src/components/chart.tsx

@@ -52,7 +52,7 @@ const ChartContainer = React.forwardRef<
         data-chart={chartId}
         ref={ref}
         className={cn(
-          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          "flex aspect-video justify-center text-h6 [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
           className
         )}
         {...props}
@@ -178,7 +178,7 @@ const ChartTooltipContent = React.forwardRef<
       <div
         ref={ref}
         className={cn(
-          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-h6 shadow-xl",
           className
         )}
       >
@@ -238,7 +238,7 @@ const ChartTooltipContent = React.forwardRef<
                         </span>
                       </div>
                       {item.value && (
-                        <span className="font-mono font-medium tabular-nums text-foreground">
+                        <span className="text-code tabular-nums text-foreground">
                           {item.value.toLocaleString()}
                         </span>
                       )}

package/src/components/chat/approval-request-message.tsx

@@ -22,10 +22,7 @@ function ApprovalFieldList({ fields }: { fields: ApprovalRequestField[] }) {
     <dl className="flex flex-col gap-2.5 mt-[var(--spacing-system-xxs)]">
       {fields.map((f, i) => (
         <div key={i} className="flex flex-col gap-0.5">
-          {/* NOTE: 11px DM Sans small-caps label has no ODS composite token
-              (h5 is Azeret Mono, h6 is 14px) — flagged for a future caption
-              token; kept as-is rather than forcing a mismatched h-class. */}
-          <dt className="font-['DM_Sans'] font-semibold text-[11px] uppercase tracking-wide text-ods-text-tertiary leading-4">
+          <dt className="text-h6 font-semibold uppercase text-ods-text-tertiary">
             {f.label}
           </dt>
           <dd className="text-h6 text-ods-text-primary whitespace-pre-wrap break-words">
@@ -55,7 +52,7 @@ function ApprovalCardBody({
   return (
     <div className="flex flex-col gap-[var(--spacing-system-xxs)]">
       <div className="bg-ods-bg border border-ods-border rounded-md p-[var(--spacing-system-sf)] flex gap-[var(--spacing-system-xsf)] items-start max-h-32 overflow-y-auto">
-        <code className="text-h6 text-ods-text-primary flex-1 whitespace-pre-wrap break-words">
+        <code className="text-code text-ods-text-primary flex-1 whitespace-pre-wrap break-words">
           {data.command}
         </code>
         {data.icon && (

package/src/components/chat/chat-archive-page.tsx

@@ -4,75 +4,102 @@ import * as React from 'react'
 import { Chevron02LeftIcon, BoxArchiveIcon } from '../icons-v2-generated'
 import { XmarkIcon } from '../icons-v2-generated/signs-and-symbols/xmark-icon'
 import { ChatHeaderIconButton } from './chat-header-icon-button'
-import { COMPACT_HEADER_BUTTON } from './chat-panel-header'
 import { ChatPanelHeaderMobile } from './chat-panel-header-mobile'
-import { MingoChatHistory } from './mingo-chat-history'
+import { MingoChatHistory, MingoChatHistorySkeleton } from './mingo-chat-history'
+import { ChatListEmptyState } from './chat-list-empty-state'
 import type { DialogItem } from './types/component.types'
 
-export interface ChatArchivePageProps {
+interface ChatArchivePageBaseProps {
   /** Archived dialogs, grouped (Today / Yesterday / Older) by the list. */
   dialogs: ReadonlyArray<DialogItem>
   /** Open an archived dialog. */
   onSelectDialog: (id: string) => void
-  /** Back chevron — returns to the previous (list) view. */
-  onBack: () => void
-  /** Close the whole chat panel. */
-  onClose: () => void
-  /** True while a page is loading (drives the empty/loading copy + spinner). */
+  /** The delayed skeleton is visible (a slow first page is loading). */
   isLoading?: boolean
+  /** A first-page load is in flight but the delayed skeleton hasn't appeared
+   *  yet — keeps the empty state suppressed so it never flashes before the
+   *  skeleton/data arrives. */
+  isFetching?: boolean
   /** Whether another page of archived dialogs remains. */
   hasMore?: boolean
   /** Fetch the next page. */
   onLoadMore?: () => void
 }
 
+/** Standalone (default): renders its own back/close header, so BOTH handlers
+ *  are required. */
+export interface ChatArchivePageStandaloneProps extends ChatArchivePageBaseProps {
+  embedded?: false
+  /** Back chevron — returns to the previous (list) view. */
+  onBack: () => void
+  /** Close the whole chat panel. */
+  onClose: () => void
+}
+
+/** Embedded (wide split layout): the archive lives in the left rail and the
+ *  host header already provides the "Chat Archive" back + close controls, so
+ *  the built-in header — and its handlers — are dropped. */
+export interface ChatArchivePageEmbeddedProps extends ChatArchivePageBaseProps {
+  embedded: true
+  onBack?: never
+  onClose?: never
+}
+
+export type ChatArchivePageProps =
+  | ChatArchivePageStandaloneProps
+  | ChatArchivePageEmbeddedProps
+
 /**
  * Chat Archive page — Figma node `7361:427312`. Back + title + close header
  * over the date-grouped archived-dialog list (reuses `MingoChatHistory`
- * without the row action menus).
+ * without the row action menus). In `embedded` mode the header is dropped so
+ * the list can slot into the split layout's left rail.
  */
-export function ChatArchivePage({
-  dialogs,
-  onSelectDialog,
-  onBack,
-  onClose,
-  isLoading = false,
-  hasMore = false,
-  onLoadMore,
-}: ChatArchivePageProps) {
+export function ChatArchivePage(props: ChatArchivePageProps) {
+  const {
+    dialogs,
+    onSelectDialog,
+    isLoading = false,
+    isFetching = false,
+    hasMore = false,
+    onLoadMore,
+  } = props
   return (
     <>
       {/* Mobile (<md): the shared mobile header — back to the list + a ⋯ menu
-          (Close only here, since the archive list has no per-chat actions). */}
-      <ChatPanelHeaderMobile
-        className="flex md:hidden"
-        showBack
-        title="Chat Archive"
-        backAriaLabel="Back"
-        onBack={onBack}
-        onClose={onClose}
-      />
+          (Close only here, since the archive list has no per-chat actions).
+          `!props.embedded` narrows the union so `onBack` / `onClose` are the
+          required standalone handlers (no no-op fallbacks). */}
+      {!props.embedded && (
+        <ChatPanelHeaderMobile
+          className="flex md:hidden"
+          showBack
+          title="Chat Archive"
+          backAriaLabel="Back"
+          onBack={props.onBack}
+          onClose={props.onClose}
+        />
+      )}
 
-      {/* Desktop (md+): fixed-height bar with back + full-height close cell. */}
-      <div className="hidden md:flex flex-shrink-0 h-14 w-full overflow-hidden border-b border-ods-border bg-ods-card">
-        <div className="flex flex-1 min-w-0 items-center gap-2 px-4 py-3">
-          <button
-            type="button"
-            onClick={onBack}
-            aria-label="Back"
-            className={`${COMPACT_HEADER_BUTTON} -ml-1`}
-          >
-            <Chevron02LeftIcon size={20} />
-          </button>
-          <span className="truncate text-h3 text-ods-text-primary">
-            Chat Archive
-          </span>
-        </div>
+      {/* Desktop (md+): fixed-height bar with full-height divider action cells —
+          the back chevron is a leading `ChatHeaderIconButton` cell matching the
+          trailing close cell (not a small inline chevron). */}
+      {!props.embedded && (
+        <div className="hidden md:flex flex-shrink-0 h-14 w-full overflow-hidden border-b border-ods-border bg-ods-card">
+          <ChatHeaderIconButton divider="right" onClick={props.onBack} aria-label="Back">
+            <Chevron02LeftIcon size={24} />
+          </ChatHeaderIconButton>
+          <div className="flex flex-1 min-w-0 items-center px-[var(--spacing-system-mf)] py-[var(--spacing-system-sf)]">
+            <span className="truncate text-h3 text-ods-text-primary">
+              Chat Archive
+            </span>
+          </div>
 
-        <ChatHeaderIconButton onClick={onClose} aria-label="Close">
-          <XmarkIcon size={24} />
-        </ChatHeaderIconButton>
-      </div>
+          <ChatHeaderIconButton onClick={props.onClose} aria-label="Close">
+            <XmarkIcon size={24} />
+          </ChatHeaderIconButton>
+        </div>
+      )}
       <div className="flex flex-1 min-h-0 flex-col p-[var(--spacing-system-m)]">
         {dialogs.length > 0 ? (
           <MingoChatHistory
@@ -83,34 +110,23 @@ export function ChatArchivePage({
             onLoadMore={onLoadMore}
           />
         ) : isLoading ? (
-          // First-load skeleton — `h-12` rows matching the dialog-list layout
-          // so results land without a shift (auth → data → empty → content).
-          <div className="flex flex-col" aria-hidden>
-            {[...Array(6)].map((_, i) => (
-              <div
-                key={i}
-                className="flex h-12 items-center gap-[var(--spacing-system-xsf)] border-b border-ods-border px-[var(--spacing-system-s)] last:border-b-0"
-              >
-                <div className="h-4 w-full max-w-[60%] animate-pulse rounded bg-ods-bg-secondary" />
-              </div>
-            ))}
-          </div>
+          // First-load skeleton — the SAME grouped/bordered placeholder the
+          // active list uses, so the archive loads and lands without a layout
+          // shift or a mismatched flat-list skeleton.
+          <MingoChatHistorySkeleton />
+        ) : isFetching ? (
+          // A first, uncached load is in flight but the delayed skeleton hasn't
+          // appeared yet (the 120ms window). Render nothing rather than flashing
+          // the empty state before the skeleton / data arrives.
+          null
         ) : (
-          // Empty state — no archived chats. Centred icon + title + hint,
-          // mirroring the panel's other empty surfaces (icon in a muted token,
-          // h-scale title, secondary body copy). Pure ODS tokens.
-          <div className="flex flex-1 flex-col items-center justify-center gap-[var(--spacing-system-s)] px-[var(--spacing-system-l)] text-center">
-            <div className="flex size-14 items-center justify-center rounded-full bg-ods-bg-secondary text-ods-text-secondary">
-              <BoxArchiveIcon size={28} />
-            </div>
-            <div className="flex flex-col gap-[var(--spacing-system-xxs)]">
-              <p className="text-h3 text-ods-text-primary">No archived chats</p>
-              <p className="max-w-xs text-h5 text-ods-text-secondary">
-                Chats you archive will appear here. Archive a chat from its
-                actions menu to tuck it away without deleting it.
-              </p>
-            </div>
-          </div>
+          // Empty state — mirrors the "Current Chats" rail empty state
+          // (Figma 113:60939): centred 24px muted glyph + h4 title + h6 caption.
+          <ChatListEmptyState
+            icon={<BoxArchiveIcon size={24} />}
+            title="No Archived Chats"
+            description="Archived Mingo sessions will show here"
+          />
         )}
       </div>
     </>

package/src/components/chat/chat-attachment-bar.tsx

@@ -288,18 +288,18 @@ function AttachmentChip({ attachment, onRemove, disabled, size = 'default' }: At
 
       {/* Filename + status */}
       <div className="min-w-0 flex-1">
-        <div className={cn('truncate text-ods-text-primary', compact ? 'text-[11px] leading-tight' : 'text-xs')} title={file.name}>
+        <div className="truncate text-ods-text-primary text-h6" title={file.name}>
           {file.name}
         </div>
         {/* Compact mode hides the size/status sub-line for ready files to keep the
             chip to a single line; uploading/error states still surface. */}
         {(!compact || status !== 'ready') && (
-          <div className={cn('text-ods-text-muted', compact ? 'text-[9px] leading-tight' : 'text-[10px]')}>
+          <div className="text-ods-text-muted text-h6">
             {status === 'sniffing' && 'Checking…'}
             {status === 'uploading' && `${progress}% · ${formatFileSize(file.size)}`}
             {status === 'ready' && formatFileSize(file.size)}
             {status === 'error' && (
-              <span className="text-ods-attention-red-error" title={errorMessage}>
+              <span className="text-ods-error" title={errorMessage}>
                 {errorMessage ?? 'Upload failed'}
               </span>
             )}

package/src/components/chat/chat-header-icon-button.tsx

@@ -4,12 +4,17 @@ import * as React from 'react'
 import { cn } from '../../utils/cn'
 
 export interface ChatHeaderIconButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Which side carries the 1px cell divider. Trailing cells (close, ⋯,
+   *  archive) use the default `'left'`; a leading cell (the back chevron) uses
+   *  `'right'`; `'none'` drops it. */
+  divider?: 'left' | 'right' | 'none'
+}
 
 /**
  * Square 56×56 icon cell used in the chat panel's top-navigation
- * (archive / restore / close, and the `⋯` menu trigger). A left border acts
- * as the 1px divider between cells.
+ * (archive / restore / close, the `⋯` menu trigger, and the leading back
+ * chevron). A border on one side acts as the 1px divider between cells.
  *
  * On hover only the background changes (`ods-bg-hover`) — the icon keeps its
  * `ods-text-secondary` colour. `forwardRef` + prop spread so it works as a
@@ -18,12 +23,14 @@ export interface ChatHeaderIconButtonProps
 export const ChatHeaderIconButton = React.forwardRef<
   HTMLButtonElement,
   ChatHeaderIconButtonProps
->(({ className, children, type = 'button', ...props }, ref) => (
+>(({ className, children, type = 'button', divider = 'left', ...props }, ref) => (
   <button
     ref={ref}
     type={type}
     className={cn(
-      'flex size-14 shrink-0 items-center justify-center border-l border-ods-border',
+      'flex size-14 shrink-0 items-center justify-center border-ods-border',
+      divider === 'left' && 'border-l',
+      divider === 'right' && 'border-r',
       'text-ods-text-secondary transition-colors hover:bg-ods-bg-hover',
       'focus:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent',
       className,

package/src/components/chat/chat-header-search-field.tsx

@@ -0,0 +1,144 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../../utils/cn'
+import { useDebounce } from '../../hooks/ui/use-debounce'
+import { SearchIcon } from '../icons-v2-generated'
+
+export interface ChatHeaderSearchFieldProps {
+  /** Seeds the field on mount (the current server-side search term). */
+  initialValue?: string
+  /** Emits the DEBOUNCED term. The host owns the query and refetches the
+   *  dialog list server-side — the field never filters locally. */
+  onSearchChange: (query: string) => void
+  /** Collapse the field back to the title. Fired on Escape and on blur while
+   *  the field is empty (an accidental open closes itself). */
+  onCollapse?: () => void
+  /** Focus the input on mount (default true — the field only mounts when the
+   *  user opens search, so we drop them straight into typing). */
+  autoFocus?: boolean
+  /** Appended to the root element (e.g. to tweak the open animation). */
+  className?: string
+}
+
+/**
+ * Inline chat-header search field (Figma node 116:51217). When search is
+ * toggled on, the panel header's title area is REPLACED in place by this
+ * full-height field — a leading magnifier + a bare, borderless input — instead
+ * of dropping a separate search bar into the list body. Holds its own text for
+ * snappy typing and emits the debounced term via `onSearchChange`.
+ */
+export function ChatHeaderSearchField({
+  initialValue,
+  onSearchChange,
+  onCollapse,
+  autoFocus = true,
+  className,
+}: ChatHeaderSearchFieldProps) {
+  const [value, setValue] = React.useState(initialValue ?? '')
+  const debounced = useDebounce(value, 300)
+  const lastEmitted = React.useRef(initialValue ?? '')
+
+  // Exit animation: collapsing plays `animate-out` (slide/fade back toward the
+  // right) BEFORE the parent unmounts us. We stay mounted through the leave —
+  // the parent only drops the field once we call `onCollapse`, which we defer
+  // to the animation's end.
+  const [exiting, setExiting] = React.useState(false)
+  const collapsedRef = React.useRef(false)
+
+  React.useEffect(() => {
+    // Once the collapse starts, no further emits: Escape already flushed the
+    // cleared term synchronously, and a still-pending debounce of the typed
+    // text ("abc" → Escape before 300ms) must not resurrect a stale query
+    // while the field animates out.
+    if (exiting) return
+    if (debounced === lastEmitted.current) return
+    lastEmitted.current = debounced
+    onSearchChange(debounced)
+  }, [debounced, exiting, onSearchChange])
+
+  const finishCollapse = React.useCallback(() => {
+    if (collapsedRef.current) return
+    collapsedRef.current = true
+    onCollapse?.()
+  }, [onCollapse])
+
+  const beginCollapse = React.useCallback(() => {
+    setExiting(true)
+  }, [])
+
+  // Fallback for when `animationend` never fires (reduced motion, or the
+  // animation utilities are disabled) — otherwise the field would hang open.
+  React.useEffect(() => {
+    if (!exiting) return
+    const t = setTimeout(finishCollapse, 240)
+    return () => clearTimeout(t)
+  }, [exiting, finishCollapse])
+
+  return (
+    <div
+      onAnimationEnd={(e) => {
+        // Only the root's OWN leave animation collapses — ignore the child
+        // icon's animations bubbling up, and the enter animation.
+        if (e.target === e.currentTarget && exiting) finishCollapse()
+      }}
+      className={cn(
+        'flex min-w-0 flex-1 items-center gap-[var(--spacing-system-xs)] px-[var(--spacing-system-sf)]',
+        exiting
+          ? // Elegant leave: sweep back out to the right + fade, holding the end
+            // frame (`fill-mode-forwards`) so it stays hidden until unmount.
+            'animate-out fade-out-0 slide-out-to-right-4 duration-200 ease-in fill-mode-forwards pointer-events-none'
+          : // Elegant open: sweep in from the right (where the magnifier toggle
+            // sat) and fade up as it takes over the title area.
+            'animate-in fade-in-0 slide-in-from-right-4 duration-200 ease-out',
+        className,
+      )}
+    >
+      {/* The magnifier eases in a touch later + scales up, so the icon reads as
+          "growing" into the field rather than hard-cutting in. */}
+      <SearchIcon
+        size={24}
+        className="shrink-0 text-ods-text-secondary animate-in fade-in-0 zoom-in-75 duration-300 ease-out"
+      />
+      {/* biome-ignore lint/a11y/noAutofocus: the field only mounts on an
+          explicit search toggle, so focusing it is the intended behaviour. */}
+      <input
+        autoFocus={autoFocus}
+        type="text"
+        value={value}
+        disabled={exiting}
+        onChange={(e) => setValue(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Escape') {
+            e.preventDefault()
+            setValue('')
+            // Emit the cleared term immediately AND record it as the last emit,
+            // so the 300ms debounce effect doesn't fire a second, redundant
+            // `onSearchChange('')` (extra server round-trip) before we unmount.
+            lastEmitted.current = ''
+            onSearchChange('')
+            beginCollapse()
+          }
+        }}
+        onBlur={() => {
+          // An accidental open (no query typed) collapses itself; a field with
+          // an active query stays open so the filtered state stays visible.
+          if (!value.trim()) {
+            // Flush the cleared term synchronously (mirrors Escape) — the
+            // debounce effect is muted once `exiting` flips, so a just-deleted
+            // query ("abc" → "" → immediate blur) must emit its reset here or
+            // the host would keep filtering by the stale term.
+            if (lastEmitted.current !== '') {
+              lastEmitted.current = ''
+              onSearchChange('')
+            }
+            beginCollapse()
+          }
+        }}
+        placeholder="Search for Chats"
+        aria-label="Search chats"
+        className="min-w-0 flex-1 bg-transparent text-h4 text-ods-text-primary placeholder:text-ods-text-secondary focus:outline-none"
+      />
+    </div>
+  )
+}

package/src/components/chat/chat-list-empty-state.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../../utils/cn'
+
+export interface ChatListEmptyStateProps {
+  /** Centred 24px glyph — rendered muted (`ods-text-secondary`). Pass the icon
+   *  already sized (e.g. `<ChatsIcon size={24} />`). */
+  icon: React.ReactNode
+  /** Title line (`h4`). */
+  title: React.ReactNode
+  /** Caption line under the title (`h6`). Omitted → title alone. */
+  description?: React.ReactNode
+  /** Appended to the root element. */
+  className?: string
+}
+
+/**
+ * Shared empty state for the chat-list surfaces — the "Current Chats" rail and
+ * the Chat Archive page (Figma node 113:60939). A centred 24px muted glyph over
+ * a title (`h4`) + caption (`h6`), both in `ods-text-secondary`. Kept in one
+ * place so the two lists can't drift apart.
+ */
+export function ChatListEmptyState({
+  icon,
+  title,
+  description,
+  className,
+}: ChatListEmptyStateProps) {
+  return (
+    <div
+      className={cn(
+        'flex flex-1 min-h-0 flex-col items-center justify-center gap-[var(--spacing-system-l)] p-[var(--spacing-system-l)] text-center text-ods-text-secondary',
+        className,
+      )}
+    >
+      <span className="flex size-6 shrink-0 items-center justify-center">{icon}</span>
+      <div className="flex flex-col">
+        <p className="text-h4">{title}</p>
+        {description && <p className="text-h6">{description}</p>}
+      </div>
+    </div>
+  )
+}

package/src/components/chat/chat-message-enhanced.tsx

@@ -478,7 +478,7 @@ const ChatMessageEnhanced = forwardRef<HTMLDivElement, ChatMessageEnhancedProps>
               {name || (isUser ? "User" : assistantType === 'mingo' ? "Mingo" : "Fae")}{!isSystem && ':'}
             </span>
             {timestamp && (
-              <span className="font-sans text-heading-5 font-medium text-ods-text-secondary shrink-0 whitespace-nowrap">
+              <span className="text-h6 text-ods-text-secondary shrink-0 whitespace-nowrap">
                 {formatMessageTimestamp(timestamp)}
               </span>
             )}

package/src/components/chat/chat-message-list.tsx

@@ -569,7 +569,7 @@ const ChatMessageList = forwardRef<HTMLDivElement, ChatMessageListProps>(
             aria-live="polite"
           >
             <DotsLoaderIcon className="w-6 h-6" />
-            <CyclingPhrase words={STREAMING_WORDS} className="text-sm" />
+            <CyclingPhrase words={STREAMING_WORDS} className="text-h6" />
           </div>
         )}
 

package/src/components/chat/chat-message-row.tsx

@@ -75,7 +75,7 @@ export function ChatMessageRow({
           onError={() => setFailedSrc(resolvedAvatar ?? null)}
         />
       ) : (
-        <div className="w-8 h-8 md:w-10 md:h-10 rounded-lg flex-shrink-0 flex items-center justify-center bg-ods-bg border border-ods-border text-[12px] font-medium text-ods-text-primary font-body">
+        <div className="w-8 h-8 md:w-10 md:h-10 rounded-lg flex-shrink-0 flex items-center justify-center bg-ods-bg border border-ods-border text-h6 text-ods-text-primary">
           {getFirstLastInitials(displayName) || '?'}
         </div>
       )}
@@ -88,7 +88,7 @@ export function ChatMessageRow({
             {displayName}
           </span>
           {timeLabel && (
-            <span className="text-[11px] md:text-[12px] font-medium leading-[1.43] text-ods-text-secondary font-body flex-shrink-0">
+            <span className="text-h6 text-ods-text-secondary flex-shrink-0">
               {timeLabel}
             </span>
           )}
@@ -96,7 +96,7 @@ export function ChatMessageRow({
 
         {/* Body — verbatim Slack: 12/14px, pre-wrap, break-words. */}
         {hasBody && (
-          <div className="text-[12px] md:text-[14px] font-medium leading-[1.43] text-ods-text-primary font-body whitespace-pre-wrap break-words min-w-0 max-w-full">
+          <div className="text-h6 text-ods-text-primary whitespace-pre-wrap break-words min-w-0 max-w-full">
             {body}
           </div>
         )}