@flamingo-stack/openframe-frontend-core 0.0.204 → 0.0.205

package/dist/utils/local-storage-adapter.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Thin JSON-typed Web-Storage adapter (localStorage or sessionStorage).
+ *
+ * Centralizes the SSR-guard + try/catch + silent quota-failure pattern
+ * that every per-feature storage util would otherwise re-implement.
+ *
+ * Optional `namespace` prefix supports platform / user partitioning —
+ * the resolver runs lazily at call time so the namespace can vary across
+ * the lifetime of the page (e.g. proxy-auth switches user, which switches
+ * the key suffix).
+ *
+ * Backend selection (`backend: 'local' | 'session'`):
+ *   - `'local'` (default): persists across browser sessions. Use for
+ *     UI state, chat history metadata, feature-flag opt-ins.
+ *   - `'session'`: cleared when the tab closes. Use for ANY auth-adjacent
+ *     value (bearer tokens, act-as identity, proxy credentials). Reduces
+ *     the XSS-exfiltration attack window from "indefinite" to "until tab
+ *     close" without losing per-session ergonomics.
+ */
+export type WebStorageBackend = 'local' | 'session';
+export interface LocalStorageAdapter<T> {
+    load(): T | null;
+    save(value: T): void;
+    clear(): void;
+    /** Resolved storage key for the current call. Useful for tests. */
+    resolveKey(): string;
+}
+export interface LocalStorageAdapterOptions<T> {
+    /** Base storage key. Combined with `namespace()` when provided. */
+    key: string;
+    /** Optional dynamic namespace prefix appended via `.` separator.
+     *  Called on EVERY read/write so the key can vary across the page
+     *  lifetime (e.g. when the platform or user identity changes). */
+    namespace?: () => string | null | undefined;
+    /** Runtime shape check. Falsey return → `load()` yields null. */
+    validate?: (parsed: unknown) => parsed is T;
+    /** Diagnostic prefix written to `console.warn` on parse / write
+     *  failures. Defaults to `'[local-storage]'`. */
+    logTag?: string;
+    /** Which Web-Storage backend to use. Defaults to `'local'`. Pass
+     *  `'session'` for anything auth-adjacent so the value evaporates
+     *  when the tab closes. */
+    backend?: WebStorageBackend;
+}
+export declare function createLocalStorageAdapter<T>(options: LocalStorageAdapterOptions<T>): LocalStorageAdapter<T>;
+//# sourceMappingURL=local-storage-adapter.d.ts.map

package/dist/utils/local-storage-adapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"local-storage-adapter.d.ts","sourceRoot":"","sources":["../../src/utils/local-storage-adapter.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,SAAS,CAAA;AAEnD,MAAM,WAAW,mBAAmB,CAAC,CAAC;IACpC,IAAI,IAAI,CAAC,GAAG,IAAI,CAAA;IAChB,IAAI,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,CAAA;IACpB,KAAK,IAAI,IAAI,CAAA;IACb,mEAAmE;IACnE,UAAU,IAAI,MAAM,CAAA;CACrB;AAED,MAAM,WAAW,0BAA0B,CAAC,CAAC;IAC3C,mEAAmE;IACnE,GAAG,EAAE,MAAM,CAAA;IACX;;sEAEkE;IAClE,SAAS,CAAC,EAAE,MAAM,MAAM,GAAG,IAAI,GAAG,SAAS,CAAA;IAC3C,iEAAiE;IACjE,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,MAAM,IAAI,CAAC,CAAA;IAC3C;qDACiD;IACjD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;+BAE2B;IAC3B,OAAO,CAAC,EAAE,iBAAiB,CAAA;CAC5B;AAaD,wBAAgB,yBAAyB,CAAC,CAAC,EACzC,OAAO,EAAE,0BAA0B,CAAC,CAAC,CAAC,GACrC,mBAAmB,CAAC,CAAC,CAAC,CA2CxB"}

package/dist/utils/source-icons.d.ts

@@ -0,0 +1,78 @@
+/**
+ * Per-source icon-name + label lookup. Keyed by `RagTableConfig.id` (the same
+ * id used in `chat_source_rag_tables.rag_table_id` and on each
+ * `ChatRef.sourceRepo`).
+ *
+ * Server-safe — lives in `src/utils/` (no `'use client'` banner) so
+ * hub server-side rag-mappers + chat route handlers can call
+ * `getSourceLabel()` / `getSourceIconName()` directly. The client-side
+ * chat barrel re-exports from here for ergonomic client imports.
+ *
+ * Used by SOURCE-LEVEL chip surfaces:
+ *   - The chip strip below an assistant message.
+ *   - The tracking-row source glyph on inline entity cards.
+ *
+ * Why a small map here instead of a column on RAG_TABLE_CONFIGS:
+ *   - The icon NAME is a small string; the resolver (icon-name → React
+ *     component) lives in `src/components/chat/utils/icon-registry.ts`
+ *     where it can stay client-only. Server-side consumers stay
+ *     icon-component-free.
+ *   - The mapping is intrinsic to the TABLE, not per-platform — same
+ *     entry serves every (platform, source) binding.
+ *
+ * Per-table admin-UI bucket id (`SOURCE_CATEGORIES_BY_TABLE`) stays
+ * hub-side because it depends on the hub's `RagSourceCategoryId` enum.
+ */
+/** Map RagTableConfig.id → icon_name (resolvable via `getIconComponent`). */
+export declare const SOURCE_ICON_NAMES: Record<string, string>;
+/** Lookup an icon name by RagTableConfig.id. Returns undefined when
+ *  unknown so callers can decide whether to fall back to documentType
+ *  or to the generic FileText glyph in the icon registry. */
+export declare function getSourceIconName(tableId: string | null | undefined): string | undefined;
+/**
+ * Per-table display LABEL — used by SERVER-SIDE chip-strip rendering
+ * (the row's "Customer Interviews (8 records)" chip below an assistant
+ * message).
+ *
+ * The chip GRID + autocomplete DROPDOWN read their command label
+ * from the DB (per-source `chat_admin_slash_commands.label`) — those
+ * surfaces can carry per-source labels (e.g. "OpenFrame Commits" vs
+ * "GitHub Commits" for the same table). This map is the TABLE-LEVEL
+ * label used by sub-message chips where a SINGLE label per table is
+ * sufficient regardless of which source's chat is rendering.
+ */
+export declare const SOURCE_LABELS_BY_TABLE: Record<string, string>;
+/** Lookup a human-readable label by RagTableConfig.id. Falls back
+ *  to the raw id (chip text becomes the table slug — visible bug
+ *  that prompts an entry to land in `SOURCE_LABELS_BY_TABLE`). */
+export declare function getSourceLabel(tableId: string): string;
+/**
+ * Default `documentType → RagTableConfig.id` reverse map.
+ *
+ * Mirrors the canonical lookup the hub registers via
+ * `lib/config/rag-table-config.ts:tableIdForDocumentType()` — same vocabulary
+ * the LLM emits inside `[card://<type>:<id>]` markers, same tableIds the
+ * retrieval layer routes by, and same set of keys covered by
+ * `SOURCE_ICON_NAMES` / `SOURCE_LABELS_BY_TABLE` above.
+ *
+ * Server-safe (no `'use client'` banner), keyed by string for forward
+ * compatibility — adding a new RAG table is a single-line edit here so
+ * lib-based embedders pick it up without re-publishing.
+ *
+ * Embedders that need a CUSTOM mapping (e.g. polymorphic types whose
+ * tableId depends on per-tenant config) still pass their own
+ * `tableIdForDocumentType` callback to `useEmbeddedChat`; this default
+ * only applies when no callback is supplied.
+ *
+ * Inverse mapping audited 2026-05-24 against the hub registry — every
+ * entry in `RAG_TABLE_CONFIGS` with a `documentType` is represented.
+ */
+export declare const DEFAULT_DOCUMENT_TYPE_TO_TABLE_ID: Record<string, string>;
+/**
+ * Default `tableIdForDocumentType` resolver used by `useEmbeddedChat` when
+ * the caller didn't pass an explicit callback. Returns `null` for
+ * unrecognized document types so downstream `discussRef` / `displayRef`
+ * still short-circuits gracefully on stale or custom types.
+ */
+export declare function defaultTableIdForDocumentType(documentType: string): string | null;
+//# sourceMappingURL=source-icons.d.ts.map

package/dist/utils/source-icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"source-icons.d.ts","sourceRoot":"","sources":["../../src/utils/source-icons.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,6EAA6E;AAC7E,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CA2CpD,CAAA;AAED;;6DAE6D;AAC7D,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAGxF;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CA2CzD,CAAA;AAED;;kEAEkE;AAClE,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAEtD;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,iCAAiC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CA2CpE,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,6BAA6B,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAEjF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.204",
+  "version": "0.0.205",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",
@@ -18,6 +18,12 @@
       "require": "./dist/index.cjs",
       "default": "./dist/index.js"
     },
+    "./contexts": {
+      "types": "./dist/contexts/index.d.ts",
+      "import": "./dist/contexts/index.js",
+      "require": "./dist/contexts/index.cjs",
+      "default": "./dist/contexts/index.js"
+    },
     "./components": {
       "types": "./dist/components/index.d.ts",
       "import": "./dist/components/index.js",
@@ -30,6 +36,12 @@
       "require": "./dist/components/ui/index.cjs",
       "default": "./dist/components/ui/index.js"
     },
+    "./components/chat": {
+      "types": "./dist/components/chat/index.d.ts",
+      "import": "./dist/components/chat/index.js",
+      "require": "./dist/components/chat/index.cjs",
+      "default": "./dist/components/chat/index.js"
+    },
     "./components/ui/file-manager": {
       "types": "./dist/components/ui/file-manager/index.d.ts",
       "import": "./dist/components/ui/file-manager/index.js",
@@ -66,6 +78,18 @@
       "require": "./dist/hooks/index.cjs",
       "default": "./dist/hooks/index.js"
     },
+    "./embed-shims": {
+      "types": "./dist/embed-shims/index.d.ts",
+      "import": "./dist/embed-shims/index.js",
+      "require": "./dist/embed-shims/index.cjs",
+      "default": "./dist/embed-shims/index.js"
+    },
+    "./embed-shims/*": {
+      "types": "./dist/embed-shims/*.d.ts",
+      "import": "./dist/embed-shims/*.js",
+      "require": "./dist/embed-shims/*.cjs",
+      "default": "./dist/embed-shims/*.js"
+    },
     "./nats": {
       "types": "./dist/nats/index.d.ts",
       "import": "./dist/nats/index.js",
@@ -137,7 +161,7 @@
     "test:ui": "vitest --ui",
     "test:run": "vitest run",
     "test:coverage": "vitest run --coverage",
-    "yalc:watch": "NODE_OPTIONS='--max-old-space-size=4096' nodemon --watch src --watch tsconfig.json --watch tsup.config.ts --watch tailwind.config.ts -e ts,tsx,json,css --ignore dist --ignore node_modules --ignore '*.lock' --ignore .yalc --ignore yalc.lock --exec 'tsup && yalc push --changed'",
+    "yalc:watch": "NODE_OPTIONS='--max-old-space-size=4096' nodemon --watch src --watch tsconfig.json --watch tsup.config.ts --watch tailwind.config.ts --watch package.json -e ts,tsx,json,css --ignore dist --ignore node_modules --ignore '*.lock' --ignore .yalc --ignore yalc.lock --exec 'rm -rf dist && tsup && yalc push --changed'",
     "yalc:push": "yalc push",
     "yalc:publish": "yalc publish",
     "generate:icons": "node scripts/generate-icons.mjs",
@@ -157,6 +181,8 @@
     "@floating-ui/react": "^0.27.15",
     "@headlessui/react": "^2.2.9",
     "@mux/mux-player-react": "^3.13.0",
+    "@react-aria/overlays": "^3.31.0",
+    "@react-aria/utils": "^3.32.0",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.1.14",
     "@radix-ui/react-aspect-ratio": "^1.0.3",
@@ -192,6 +218,7 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.0.4",
     "embla-carousel-react": "^8.6.0",
+    "file-type": "^22.0.1",
     "framer-motion": "^12.23.12",
     "graphql": "^16.12.0",
     "libphonenumber-js": "^1.12.40",

package/src/components/announcement-bar.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useEffect } from 'react';
-import Image from 'next/image';
+import Image from '../embed-shims/next-image';
 import { X } from 'lucide-react';
 import { Button } from './ui/button';
 import { renderSvgIcon } from './icon-utils';
@@ -12,6 +12,7 @@ import {
 } from '../utils/announcement-storage';
 import { Announcement } from '../types/announcement';
 import { getAppType } from '../utils/app-config';
+import { useEndpointsRuntime } from '../contexts/endpoints-runtime-context';
 
 // Helper that defers to renderSvgIcon so we don't need local icon imports
 const getSvgIcon = (
@@ -33,6 +34,15 @@ export function AnnouncementBar() {
   // Get the platform type for platform-specific localStorage keys
   const platform = getAppType();
 
+  // Optional endpoint runtime: when no provider is mounted (e.g. on a
+  // bare React-tree page that doesn't wrap with HubRuntimeProvider),
+  // the bar silently skips its fetch instead of throwing. Apps that DO
+  // mount the provider get the configured URL — typically
+  // '/api/announcements/active' in the hub, or a proxied path in an
+  // embedded host.
+  const endpoints = useEndpointsRuntime();
+  const announcementsUrl = endpoints?.announcementsUrl;
+
   // Helper to determine dismissal key for localStorage
   const getDismissKey = (id: string) => `${platform}-announcement-${id}-dismissed`;
   
@@ -41,9 +51,12 @@ export function AnnouncementBar() {
 
   // Fetch active announcement from API and update state + LS
   const fetchActiveAnnouncement = async () => {
+    // No provider mounted → no URL configured → skip fetch silently.
+    // Cached announcement from previous sessions still renders if present.
+    if (!announcementsUrl) return;
     try {
       // Server-side platform injection - no URL parameter needed
-      const response = await fetch(`/api/announcements/active`);
+      const response = await fetch(announcementsUrl);
       
       if (response.ok) {
         const data = await response.json();
@@ -92,13 +105,22 @@ export function AnnouncementBar() {
       setIsVisible(!isDismissed);
     }
 
+    // No provider mounted → no URL → no fetch / no polling. Cached
+    // announcement still painted above. Skip scheduling the 5-min
+    // interval entirely to avoid an idle timer + repeated short-circuit
+    // calls.
+    if (!announcementsUrl) return;
+
     // Always fetch latest on mount
     fetchActiveAnnouncement();
 
-    // Schedule refresh every 5 minutes
+    // Schedule refresh every 5 minutes. When announcementsUrl flips
+    // (e.g. provider value swap), the effect re-runs and restarts the
+    // interval against the new URL — no stale captured fetch.
     const interval = setInterval(fetchActiveAnnouncement, 300_000);
     return () => clearInterval(interval);
-  }, []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [announcementsUrl]);
 
   // helpers
   const handleDismiss = () => {

package/src/components/categories-cart.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import React from 'react';
-import Link from 'next/link';
+import Link from '../embed-shims/next-link';
 import { ChevronRight } from 'lucide-react';
 import { VendorIcon } from './vendor-icon';
 import type { CategoryCardProps, RealCategoryCardProps } from '../types/category';

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

@@ -0,0 +1,323 @@
+'use client'
+
+/**
+ * Chat-attachment UI primitives.
+ *
+ * Split into two NAMED EXPORTS following 2026 chat-compose conventions
+ * (Claude.ai / ChatGPT / Cursor / Linear AI / etc.):
+ *
+ *   1. `<ChatAttachmentChipStrip>` — the thumbnail strip with per-file
+ *      progress / × remove. Renders ABOVE the textarea (only when
+ *      chips exist). Visible to the user as a small horizontal row of
+ *      file pills that disappears when they Send.
+ *
+ *   2. `<ChatAttachmentAddButton>` — the standalone `+` glyph.
+ *      Renders INLINE in the bottom-controls row alongside the
+ *      `ModelDisplay` (BELOW the textarea, 2026 pattern).
+ *      `attachmentsEnabled` arrives as a prop — the hub wires the
+ *      `useChatIdentity().attachmentsEnabled` boolean; embedders supply
+ *      their own gate. Reserves layout space when disabled
+ *      (visibility, not display) so the row's width doesn't jump
+ *      when chat-identity resolves.
+ *
+ * UI principles applied:
+ *   - Borderless icon-only `+` (Claude.ai compose-box style).
+ *   - Chips strip floats above input, dismissible per-file via ×.
+ *   - All colors via ODS tokens; NO hex anywhere.
+ *   - NO `capture="environment"` on the file input — iOS Safari would
+ *     force camera-only mode and disable file picking.
+ */
+
+import { useEffect, useRef, useState } from 'react'
+import { PlusIcon } from '../icons-v2-generated/signs-and-symbols/plus-icon'
+import { XmarkIcon } from '../icons-v2-generated/signs-and-symbols/xmark-icon'
+import { Button } from '../ui/button'
+import { ANTHROPIC_SUPPORTED_IMAGE_MIME } from './utils/chat-attachment-markdown'
+
+// ===========================================================================
+// CONSTANTS & TYPES — inlined from hub `lib/config/chat-attachment-config.ts`
+// ===========================================================================
+
+/** Hand-curated chat-attachment allow-list. Intentionally excludes
+ *  `image/svg+xml` for XSS safety. */
+export const CHAT_ATTACHMENT_MIME_TYPES = [
+  'image/jpeg',
+  'image/png',
+  'image/webp',
+  'image/gif',
+  'video/mp4',
+  'video/webm',
+  'video/quicktime',
+] as const
+
+/** Client-side cap on `addFiles` (the upload hook rejects 6+ files in a
+ *  single selection). Server-side is per-IP-rate-limit; this is a UX
+ *  hint more than a security boundary. */
+export const CHAT_ATTACHMENT_CONCURRENT_UPLOADS_PER_USER = 5
+
+type Status = 'sniffing' | 'uploading' | 'ready' | 'error'
+
+/** Staged-attachment shape consumed by the chip strip. Mirrors the hub
+ *  `StagedAttachment` produced by `useChatAttachments`. */
+export interface StagedAttachment {
+  /** Stable client-side id; survives across re-renders. */
+  id: string
+  file: File
+  status: Status
+  /** Set when `status === 'ready'`. Server-issued. */
+  storagePath?: string
+  /** Set when `status === 'ready'`. Server-issued HMAC view token. */
+  viewToken?: string
+  /** 0-100 during 'uploading'. */
+  progress: number
+  /** Set when `status === 'error'`. */
+  errorMessage?: string
+}
+
+// ===========================================================================
+// `+` ADD BUTTON — inline in the bottom-controls row (below input)
+// ===========================================================================
+
+export interface ChatAttachmentAddButtonProps {
+  /** Auth-gate flag. Hub passes `useChatIdentity().attachmentsEnabled`;
+   *  embedders supply their own boolean. Disabled state collapses the
+   *  button to a layout-reserving invisible placeholder. */
+  attachmentsEnabled: boolean
+  /** Current attachment count — drives the limit-reached disabled state. */
+  attachmentsCount: number
+  onAddFiles: (files: FileList | File[]) => void
+  /** External disable (e.g. while chat is streaming). */
+  disabled?: boolean
+}
+
+/**
+ * Settled `+` icon-only button for the bottom-controls row.
+ *
+ * LAYOUT STABILITY — first-paint placeholder pattern:
+ *   `attachmentsEnabled` typically resolves ASYNCHRONOUSLY on mount
+ *   (hub's `useChatIdentity()` round-trip ~100-500ms). When the flag is
+ *   false (loading OR anon final state), the component renders an
+ *   INVISIBLE placeholder `<span>` with the same `h-7 w-7 shrink-0`
+ *   footprint as the real button. The placeholder reserves layout space
+ *   from the very first paint; if `attachmentsEnabled` flips to `true`
+ *   the button replaces the placeholder at the IDENTICAL 28×28
+ *   position — ZERO shift.
+ *
+ *   Truly-anon users see the invisible 28×28 spacer permanently —
+ *   acceptable trade-off vs the universal jump on every panel open.
+ */
+export function ChatAttachmentAddButton({
+  attachmentsEnabled,
+  attachmentsCount,
+  onAddFiles,
+  disabled = false,
+}: ChatAttachmentAddButtonProps) {
+  const fileInputRef = useRef<HTMLInputElement | null>(null)
+
+  if (!attachmentsEnabled) {
+    return <span aria-hidden="true" className="inline-block h-7 w-7 shrink-0" />
+  }
+
+  const slotsAvailable = Math.max(
+    0,
+    CHAT_ATTACHMENT_CONCURRENT_UPLOADS_PER_USER - attachmentsCount,
+  )
+  const canAddMore = slotsAvailable > 0 && !disabled
+
+  const handlePick = () => {
+    if (!canAddMore) return
+    fileInputRef.current?.click()
+  }
+
+  return (
+    <>
+      <input
+        ref={fileInputRef}
+        type="file"
+        multiple
+        accept={CHAT_ATTACHMENT_MIME_TYPES.join(',')}
+        className="hidden"
+        onChange={(e) => {
+          const files = e.target.files
+          if (files && files.length > 0) {
+            onAddFiles(files)
+          }
+          // Reset so picking the same file twice in a row works
+          // (browsers don't refire change on identical selection).
+          e.target.value = ''
+        }}
+      />
+      <Button
+        type="button"
+        variant="transparent"
+        size="small"
+        onClick={handlePick}
+        disabled={!canAddMore}
+        aria-label={canAddMore ? 'Add attachments' : 'Attachment limit reached'}
+        title={
+          canAddMore
+            ? 'Add attachments'
+            : `Limit reached (${CHAT_ATTACHMENT_CONCURRENT_UPLOADS_PER_USER})`
+        }
+        leftIcon={<PlusIcon className="h-4 w-4" />}
+        className="!h-7 !w-7 !p-0 shrink-0 text-ods-text-muted hover:text-ods-text-primary"
+      />
+    </>
+  )
+}
+
+// ===========================================================================
+// CHIP STRIP — above input, only when chips exist
+// ===========================================================================
+
+export interface ChatAttachmentChipStripProps {
+  attachments: StagedAttachment[]
+  onRemove: (id: string) => void
+  /** External disable (e.g. while chat is streaming). */
+  disabled?: boolean
+}
+
+/**
+ * Horizontal strip of file chips that appears ABOVE the input when one
+ * or more attachments are staged. Returns `null` when empty — no
+ * permanent UI footprint.
+ */
+export function ChatAttachmentChipStrip({
+  attachments,
+  onRemove,
+  disabled = false,
+}: ChatAttachmentChipStripProps) {
+  if (attachments.length === 0) return null
+  return (
+    <div className="flex-shrink-0 px-5 pb-2">
+      <div className="flex items-center gap-2 flex-wrap">
+        {attachments.map((att) => (
+          <AttachmentChip
+            key={att.id}
+            attachment={att}
+            onRemove={() => onRemove(att.id)}
+            disabled={disabled}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// AttachmentChip — single row inside the chip strip
+// ---------------------------------------------------------------------------
+
+interface AttachmentChipProps {
+  attachment: StagedAttachment
+  onRemove: () => void
+  disabled: boolean
+}
+
+function AttachmentChip({ attachment, onRemove, disabled }: AttachmentChipProps) {
+  const { file, status, progress, errorMessage } = attachment
+  const isImage = (ANTHROPIC_SUPPORTED_IMAGE_MIME as readonly string[]).includes(file.type)
+
+  // Inline thumbnail for images during STAGING (pre-upload-complete).
+  // Local `URL.createObjectURL` blob — the user sees their image
+  // immediately, no waiting on the upload to finish.
+  const blobUrl = useObjectUrl(isImage ? file : null)
+
+  return (
+    <div
+      className="flex items-center gap-2 rounded-md border border-ods-border bg-ods-card px-2 py-1.5 max-w-[240px]"
+      role="group"
+      aria-label={`Attachment ${file.name}`}
+    >
+      {/* Thumbnail OR file-type initials */}
+      <div className="relative h-8 w-8 shrink-0 overflow-hidden rounded bg-ods-bg">
+        {isImage && blobUrl ? (
+          // eslint-disable-next-line @next/next/no-img-element -- blob: URLs
+          //  cannot go through next/image; this is a transient pre-upload
+          //  preview, NOT the chat-history render path.
+          <img src={blobUrl} alt={file.name} className="h-full w-full object-cover" />
+        ) : (
+          <div className="flex h-full w-full items-center justify-center text-[10px] font-mono uppercase text-ods-text-muted">
+            {extLabel(file.name)}
+          </div>
+        )}
+        {/* Progress overlay during 'uploading' state */}
+        {status === 'uploading' && (
+          <div className="absolute inset-x-0 bottom-0 h-1 bg-ods-bg">
+            <div
+              className="h-full bg-ods-accent transition-[width]"
+              style={{ width: `${progress}%` }}
+            />
+          </div>
+        )}
+      </div>
+
+      {/* Filename + status */}
+      <div className="min-w-0 flex-1">
+        <div className="truncate text-xs text-ods-text-primary" title={file.name}>
+          {file.name}
+        </div>
+        <div className="text-[10px] text-ods-text-muted">
+          {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}>
+              {errorMessage ?? 'Upload failed'}
+            </span>
+          )}
+        </div>
+      </div>
+
+      {/* Remove button — UI-Kit Button with `transparent` + `small`. */}
+      <Button
+        type="button"
+        variant="transparent"
+        size="small"
+        onClick={onRemove}
+        disabled={disabled}
+        aria-label={`Remove ${file.name}`}
+        leftIcon={<XmarkIcon className="h-3.5 w-3.5" />}
+        className="!h-5 !w-5 !p-0 shrink-0 text-ods-text-muted hover:text-ods-text-primary"
+      />
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Helpers — inlined from hub upload-utils.ts to keep this file standalone
+// ---------------------------------------------------------------------------
+
+/** Same byte-rounding shape as the hub `formatFileSize` in
+ *  `lib/utils/upload-utils.ts`. Inlined so the lib doesn't pull in the
+ *  hub upload service. */
+function formatFileSize(bytes: number): string {
+  if (bytes === 0) return '0 B'
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`
+}
+
+function extLabel(fileName: string): string {
+  const dot = fileName.lastIndexOf('.')
+  if (dot === -1 || dot === fileName.length - 1) return '?'
+  return fileName.slice(dot + 1, dot + 4).toLowerCase()
+}
+
+/** Manage an `URL.createObjectURL` blob URL for the lifetime of the
+ *  component. Returns null when `file` is null or during SSR.
+ *  Revokes on unmount AND when `file` changes. */
+function useObjectUrl(file: File | null): string | null {
+  const [url, setUrl] = useState<string | null>(null)
+  useEffect(() => {
+    if (!file) {
+      setUrl(null)
+      return
+    }
+    const next = URL.createObjectURL(file)
+    setUrl(next)
+    return () => URL.revokeObjectURL(next)
+  }, [file])
+  return url
+}