ompchamber 0.3.0

package/src/client/components/common/CopyButton.tsx

@@ -0,0 +1,73 @@
+import type { TargetedMouseEvent } from 'preact';
+import { Check, Copy } from 'lucide-preact';
+import { copyToClipboard } from '@/client/hooks/ui/clipboard';
+import { useCopyFlag } from '@/client/hooks/ui/copy-flag';
+
+export interface CopyButtonProps {
+  /** Text written to the clipboard. */
+  text: string;
+  /** Full button className. Defaults to the shared compact toolbar style. */
+  className?: string;
+  /** Copy (idle) icon size. Default 10. */
+  iconSize?: number;
+  /** Optional className applied to the idle Copy icon (e.g. a colour). */
+  iconClassName?: string;
+  /** Optional className applied to the success Check icon (default text-success). */
+  copiedIconClassName?: string;
+  /** Visible idle label. Omit for an icon-only button. */
+  label?: string;
+  /** Visible label while copied. Default 'Copied'. */
+  copiedLabel?: string;
+  /** Wrap the label text in a <span> (call sites that style the label). */
+  wrapLabel?: boolean;
+  /** className for the copied label span (requires wrapLabel). */
+  copiedLabelClassName?: string;
+  /** Native title / tooltip. */
+  title?: string;
+  /** Extra click handler run before copying (e.g. stopPropagation). */
+  onClick?: (event: TargetedMouseEvent<HTMLButtonElement>) => void;
+  /** Copied-state reset delay in ms. Default 2000. */
+  resetMs?: number;
+}
+
+const DEFAULT_CLASSNAME =
+  'flex cursor-pointer items-center gap-1 rounded px-1.5 py-0.5 text-[10px] text-ink/45 transition-colors hover:bg-ink/5 hover:text-ink';
+
+/** Clipboard copy control: idle Copy icon → success Check, with a timed revert. */
+export function CopyButton({
+  text,
+  className = DEFAULT_CLASSNAME,
+  iconSize = 10,
+  iconClassName,
+  copiedIconClassName = 'text-success',
+  label,
+  copiedLabel = 'Copied',
+  wrapLabel = false,
+  copiedLabelClassName,
+  title,
+  onClick,
+  resetMs = 2000,
+}: CopyButtonProps) {
+  const { copied, flagCopied } = useCopyFlag(resetMs);
+
+  const handleClick = async (event: TargetedMouseEvent<HTMLButtonElement>) => {
+    onClick?.(event);
+    if (!text) return;
+    const ok = await copyToClipboard(text);
+    if (ok) flagCopied();
+  };
+
+  const labelText = copied ? copiedLabel : label;
+
+  return (
+    <button type="button" onClick={handleClick} className={className} title={title}>
+      {copied ? (
+        <Check size={iconSize} className={copiedIconClassName} />
+      ) : (
+        <Copy size={iconSize} className={iconClassName} />
+      )}
+      {labelText !== undefined &&
+        (wrapLabel ? <span className={copied ? copiedLabelClassName : undefined}>{labelText}</span> : labelText)}
+    </button>
+  );
+}

package/src/client/components/common/FolderPicker.tsx

@@ -0,0 +1,270 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * FolderPicker — modal directory browser used by "New Workspace" to choose a
+ * project path. Lists subdirectories via /api/fs/browse (server-side, starts
+ * at the OS home), supports manual path entry and parent navigation, and
+ * returns the selected absolute path.
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import type { FormEvent } from 'preact/compat';
+import { ChevronRight, Folder, FolderOpen, Home, Loader2, RefreshCw, X } from 'lucide-preact';
+
+interface DirectoryEntry {
+  name: string;
+  path: string;
+}
+
+interface BrowseResponse {
+  path?: string;
+  parentPath?: string | null;
+  directories?: DirectoryEntry[];
+  error?: string;
+  code?: string;
+}
+
+interface FolderPickerProps {
+  /** The folder to start browsing from (defaults to home). */
+  initialPath?: string;
+  /** Called when the user confirms a folder. */
+  onSelect: (path: string) => void;
+  /** Called when the user dismisses the picker. */
+  onClose: () => void;
+}
+
+async function browse(path?: string): Promise<BrowseResponse> {
+  const query = path ? `?path=${encodeURIComponent(path)}` : '';
+  const res = await fetch(`/api/fs/browse${query}`);
+  const data = (await res.json()) as BrowseResponse;
+  if (!res.ok || data.error) {
+    throw new Error(data.error || `HTTP ${res.status}`);
+  }
+  return data;
+}
+
+export function FolderPicker({ initialPath, onSelect, onClose }: FolderPickerProps) {
+  const [currentPath, setCurrentPath] = useState(initialPath ?? '');
+  const [pathInput, setPathInput] = useState('');
+  const [directories, setDirectories] = useState<DirectoryEntry[]>([]);
+  const [parentPath, setParentPath] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedPath, setSelectedPath] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const navigate = useCallback(async (target?: string) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await browse(target);
+      setCurrentPath(data.path ?? target ?? '');
+      setParentPath(data.parentPath ?? null);
+      setPathInput(data.path ?? target ?? '');
+      setDirectories(data.directories ?? []);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void navigate(initialPath);
+  }, [initialPath, navigate]);
+
+  const handleGoUp = () => {
+    if (parentPath) void navigate(parentPath);
+  };
+
+  const handlePathSubmit = (e: FormEvent) => {
+    e.preventDefault();
+    const candidate = pathInput.trim();
+    if (candidate) void navigate(candidate);
+  };
+
+  const handleOpenDir = (dir: DirectoryEntry) => {
+    void navigate(dir.path);
+  };
+
+  const handlePick = (dir: DirectoryEntry) => {
+    setSelectedPath(dir.path);
+    onSelect(dir.path);
+  };
+
+  const handlePickCurrent = () => {
+    if (currentPath) {
+      setSelectedPath(currentPath);
+      onSelect(currentPath);
+    }
+  };
+
+  return (
+    <div
+      className="fixed inset-0 bg-ink/30 z-[60] flex items-center justify-center p-4"
+      onClick={onClose}
+    >
+      <div
+        className="bg-paper border border-ink/15 rounded-lg shadow-2xl w-full max-w-lg flex flex-col overflow-hidden"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-3 border-b border-ink/10">
+          <h3 className="font-semibold text-sm flex items-center space-x-2">
+            <FolderOpen size={15} className="text-ink/70" />
+            <span>Choose Project Folder</span>
+          </h3>
+          <button
+            type="button"
+            onClick={onClose}
+            className="p-1 rounded hover:bg-ink/10 text-ink/60 hover:text-ink transition-colors"
+            aria-label="Close picker"
+          >
+            <X size={15} />
+          </button>
+        </div>
+
+        {/* Path bar */}
+        <div className="px-4 py-2 border-b border-ink/10 bg-canvas/50">
+          <form onSubmit={handlePathSubmit} className="flex items-center space-x-2">
+            <Home size={14} className="text-ink/40 flex-shrink-0" />
+            <input
+              ref={inputRef}
+              type="text"
+              value={pathInput}
+              onChange={(e) => setPathInput(e.currentTarget.value)}
+              placeholder="~ or /absolute/path"
+              className="flex-1 bg-transparent outline-none text-xs font-mono text-ink placeholder-ink/30 py-1"
+              spellcheck={false}
+            />
+            <button
+              type="submit"
+              className="px-2 py-1 rounded bg-ink/5 border border-ink/10 text-[11px] font-medium hover:bg-ink/10 transition-colors"
+            >
+              Go
+            </button>
+          </form>
+          <div className="flex items-center space-x-1 mt-1 text-[11px] text-ink/40 truncate">
+            <button
+              type="button"
+              onClick={() => void navigate()}
+              className="hover:text-ink transition-colors flex items-center"
+            >
+              <Home size={11} className="mr-0.5" /> home
+            </button>
+            {currentPath.split('/').filter(Boolean).map((seg, idx, arr) => {
+              const pathUpTo = '/' + currentPath.split('/').filter(Boolean).slice(0, idx + 1).join('/');
+              const isLast = idx === arr.length - 1;
+              return (
+                <span key={pathUpTo} className="flex items-center space-x-1 min-w-0">
+                  <ChevronRight size={10} className="text-ink/20 flex-shrink-0" />
+                  {isLast ? (
+                    <span className="text-ink/70 truncate">{seg}</span>
+                  ) : (
+                    <button
+                      type="button"
+                      onClick={() => void navigate(pathUpTo)}
+                      className="hover:text-ink transition-colors truncate max-w-[120px]"
+                    >
+                      {seg}
+                    </button>
+                  )}
+                </span>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Directory list */}
+        <div className="flex-1 min-h-[240px] max-h-[360px] scrollbar-overlay-container scrollbar-overlay-static p-2">
+          {loading ? (
+            <div className="flex items-center justify-center h-40 text-ink/40">
+              <Loader2 size={18} className="animate-spin" />
+            </div>
+          ) : error ? (
+            <div className="flex flex-col items-center justify-center h-40 text-xs text-red-600 space-y-2 px-4">
+              <span>{error}</span>
+              <button
+                type="button"
+                onClick={() => void navigate(currentPath || undefined)}
+                className="px-2 py-1 rounded bg-ink/5 border border-ink/10 text-ink/70 hover:bg-ink/10 flex items-center space-x-1"
+              >
+                <RefreshCw size={11} /> Retry
+              </button>
+            </div>
+          ) : directories.length === 0 ? (
+            <div className="text-center py-16 text-xs text-ink/40">No subfolders</div>
+          ) : (
+            directories.map((dir) => (
+              <div
+                key={dir.path}
+                className={`group flex items-center justify-between px-2.5 py-2 rounded cursor-pointer transition-colors ${
+                  selectedPath === dir.path ? 'bg-ink/10' : 'hover:bg-ink/5'
+                }`}
+                onDblClick={() => handleOpenDir(dir)}
+              >
+                <button
+                  type="button"
+                  onClick={() => handleOpenDir(dir)}
+                  className="flex items-center space-x-2 min-w-0 flex-1 text-left"
+                >
+                  <Folder size={15} className="text-ink/50 flex-shrink-0" />
+                  <span className="text-xs truncate text-ink/85">{dir.name}</span>
+                </button>
+                <button
+                  type="button"
+                  onClick={() => handlePick(dir)}
+                  className="hidden group-hover:flex px-2 py-0.5 rounded bg-ink text-canvas text-[10px] font-semibold hover:bg-ink/80 transition-colors flex-shrink-0"
+                >
+                  Choose
+                </button>
+              </div>
+            ))
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-between px-4 py-3 border-t border-ink/10">
+          <div className="flex items-center space-x-2 min-w-0">
+            <button
+              type="button"
+              onClick={handleGoUp}
+              disabled={!parentPath}
+              className="px-2.5 py-1.5 rounded bg-ink/5 border border-ink/10 text-[11px] font-medium hover:bg-ink/10 disabled:opacity-40 transition-colors flex items-center space-x-1"
+            >
+              <span>↑</span>
+              <span>Up</span>
+            </button>
+            <button
+              type="button"
+              onClick={() => void navigate()}
+              className="px-2.5 py-1.5 rounded bg-ink/5 border border-ink/10 text-[11px] font-medium hover:bg-ink/10 transition-colors"
+            >
+              Home
+            </button>
+          </div>
+          <div className="flex items-center space-x-2">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-3 py-1.5 text-xs font-medium text-ink/60 hover:text-ink transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={handlePickCurrent}
+              disabled={!currentPath}
+              className="px-3.5 py-1.5 text-xs font-medium bg-ink text-canvas rounded hover:bg-ink/90 disabled:opacity-50 transition-colors"
+            >
+              Use This Folder
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/client/components/common/MarkdownRenderer.tsx

@@ -0,0 +1,107 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Markdown renderer for the chat timeline and editor previews.
+ *
+ * Pipeline: remend (heal streaming) → marked (GFM, autolink, KaTeX) →
+ * DOMPurify (sanitize). Renders as sanitized HTML. Raw HTML in the source is
+ * escaped by DOMPurify (default profile) rather than executed. A single
+ * delegated click handler manages the per-block "Copy" buttons. Mermaid
+ * fences hydrate async into sanitized SVGs after mount.
+ */
+
+import type { TargetedMouseEvent } from 'preact';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'preact/hooks';
+import { renderMarkdown } from '@/shared/lib/markdown/marked';
+import { sanitizeHtml } from '@/shared/lib/markdown/sanitize';
+import { hydrateMermaidBlocks } from '@/shared/lib/markdown/mermaid';
+import { copyToClipboard } from '@/client/hooks/ui/clipboard';
+import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
+
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+
+interface MarkdownRendererProps {
+  content: string;
+  className?: string;
+}
+
+export function MarkdownRenderer({ content, className = '' }: MarkdownRendererProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const syntaxReady = useSyntaxReady();
+
+  const html = useMemo(() => {
+    if (!content) return '';
+    const rendered = renderMarkdown(content);
+    return sanitizeHtml(rendered);
+  }, [content, syntaxReady]);
+
+  const hasMermaid = html.includes('mermaid-block');
+
+  useIsomorphicLayoutEffect(() => {
+    if (!hasMermaid || typeof window === 'undefined') return;
+    const container = containerRef.current;
+    if (!container) return;
+
+    let timer: number | undefined;
+    const hydrate = () => {
+      const current = containerRef.current;
+      if (!current || !current.isConnected) return;
+      void hydrateMermaidBlocks(current);
+    };
+
+    hydrate();
+    // React can rewrite the container's innerHTML with an identical html
+    // string (timeline re-renders) without this effect re-running, which
+    // would strand freshly-inserted pending blocks. Re-hydrate on any
+    // direct-child replacement; hydrate writes only to grandchildren, so it
+    // never re-triggers this observer.
+    const observer = new MutationObserver(() => {
+      const current = containerRef.current;
+      if (current?.isConnected) void hydrateMermaidBlocks(current, { cachedOnly: true });
+      window.clearTimeout(timer);
+      timer = window.setTimeout(hydrate, 120);
+    });
+    observer.observe(container, { childList: true });
+
+    const onThemeChange = () => hydrate();
+    window.addEventListener('omp:theme-changed', onThemeChange);
+    return () => {
+      window.clearTimeout(timer);
+      observer.disconnect();
+      window.removeEventListener('omp:theme-changed', onThemeChange);
+    };
+  }, [hasMermaid, html]);
+
+  const handleContainerClick = useCallback((e: TargetedMouseEvent<HTMLDivElement>) => {
+    const target = (e.target as HTMLElement).closest<HTMLButtonElement>('button.code-copy-float');
+    if (!target) return;
+    const text = target.dataset.copy ?? '';
+    if (!text) return;
+    e.preventDefault();
+    e.stopPropagation();
+    void copyToClipboard(text).then((ok) => {
+      if (!ok) return;
+      target.setAttribute('data-copied', 'true');
+      target.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>';
+      setTimeout(() => {
+        target.removeAttribute('data-copied');
+        target.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
+      }, 2000);
+    });
+  }, []);
+
+  if (!content) return null;
+
+  return (
+    <div
+      ref={containerRef}
+      className={`prose-content text-[13px] text-ink leading-relaxed select-text ${className}`}
+      onClick={handleContainerClick}
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  );
+}

package/src/client/components/common/Modal.tsx

@@ -0,0 +1,75 @@
+import type { FormEvent, ReactNode } from 'preact/compat';
+import { X } from 'lucide-preact';
+
+export interface ModalProps {
+  /** Backdrop click / close-button handler. */
+  onClose: () => void;
+  /** Header content rendered left of the close button. */
+  header: ReactNode;
+  /** Body content. */
+  children: ReactNode;
+  /** Optional footer row, rendered after the body. */
+  footer?: ReactNode;
+  /**
+   * When set, the body + footer are wrapped in a `<form>` with this onSubmit and
+   * className — preserving modals whose whole content is one form.
+   */
+  form?: { onSubmit: (event: FormEvent) => void; className: string };
+  /** Panel width class. Default `max-w-md`. */
+  maxWidthClass?: string;
+  /** Backdrop z-index class. Default `z-[60]`. */
+  zClass?: string;
+}
+
+/**
+ * Centered modal shell: dimmed backdrop, bordered panel, standard header with
+ * close button, and an optional footer. Body/footer stay caller-owned so each
+ * modal keeps its exact DOM order, classes and text.
+ */
+export function Modal({
+  onClose,
+  header,
+  children,
+  footer,
+  form,
+  maxWidthClass = 'max-w-md',
+  zClass = 'z-[60]',
+}: ModalProps) {
+  const body = (
+    <>
+      {children}
+      {footer}
+    </>
+  );
+
+  return (
+    <div
+      className={`fixed inset-0 bg-ink/40 backdrop-blur-[2px] ${zClass} flex items-center justify-center p-4`}
+      onClick={onClose}
+    >
+      <div
+        className={`bg-paper border border-ink/15 rounded-xl shadow-2xl w-full ${maxWidthClass} overflow-hidden text-ink`}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="px-5 py-4 border-b border-ink/10 flex items-center justify-between">
+          {header}
+          <button
+            type="button"
+            onClick={onClose}
+            className="p-1 rounded text-ink/40 hover:text-ink hover:bg-ink/5 transition-colors cursor-pointer"
+          >
+            <X size={16} />
+          </button>
+        </div>
+
+        {form ? (
+          <form onSubmit={form.onSubmit} className={form.className}>
+            {body}
+          </form>
+        ) : (
+          body
+        )}
+      </div>
+    </div>
+  );
+}

package/src/client/components/common/PWAInstallButton.tsx

@@ -0,0 +1,113 @@
+import { useEffect, useState } from 'preact/hooks';
+import type { FunctionComponent } from 'preact/compat';
+import { Download } from 'lucide-preact';
+
+interface BeforeInstallPromptEvent extends Event {
+  prompt: () => Promise<void>;
+  userChoice: Promise<{ outcome: 'accepted' | 'dismissed'; platform: string }>;
+}
+
+interface NavigatorWithStandalone extends Navigator {
+  standalone?: boolean;
+}
+
+export function usePWAInstall() {
+  const [deferredPrompt, setDeferredPrompt] = useState<BeforeInstallPromptEvent | null>(null);
+  const [isInstalled, setIsInstalled] = useState(false);
+  const [isIOS, setIsIOS] = useState(false);
+
+  useEffect(() => {
+    const isStandalone =
+      window.matchMedia('(display-mode: standalone)').matches ||
+      (window.navigator as NavigatorWithStandalone).standalone === true;
+    setIsInstalled(isStandalone);
+
+    const userAgent = window.navigator.userAgent.toLowerCase();
+    const isIOSDevice = /iphone|ipad|ipod/.test(userAgent);
+    setIsIOS(isIOSDevice);
+
+    const handleBeforeInstallPrompt = (e: Event) => {
+      e.preventDefault();
+      setDeferredPrompt(e as BeforeInstallPromptEvent);
+    };
+
+    const handleAppInstalled = () => {
+      setIsInstalled(true);
+      setDeferredPrompt(null);
+    };
+
+    window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
+    window.addEventListener('appinstalled', handleAppInstalled);
+
+    return () => {
+      window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
+      window.removeEventListener('appinstalled', handleAppInstalled);
+    };
+  }, []);
+
+  const install = async () => {
+    if (!deferredPrompt) return false;
+    await deferredPrompt.prompt();
+    const { outcome } = await deferredPrompt.userChoice;
+    if (outcome === 'accepted') {
+      setIsInstalled(true);
+      setDeferredPrompt(null);
+      return true;
+    }
+    return false;
+  };
+
+  return { isInstallable: !!deferredPrompt, isInstalled, isIOS, install };
+}
+
+export const PWAInstallButton: FunctionComponent = () => {
+  const { isInstallable, isInstalled, isIOS, install } = usePWAInstall();
+  const [showIOSGuide, setShowIOSGuide] = useState(false);
+
+  if (isInstalled) return null;
+
+  if (isInstallable) {
+    return (
+      <button
+        onClick={install}
+        className="p-1.5 rounded hover:bg-ink/10 transition-colors text-ink/60 hover:text-ink"
+        title="Install OMPChamber"
+      >
+        <Download size={16} />
+      </button>
+    );
+  }
+
+  if (isIOS) {
+    return (
+      <>
+        <button
+          onClick={() => setShowIOSGuide(true)}
+          className="p-1.5 rounded hover:bg-ink/10 transition-colors text-ink/60 hover:text-ink"
+          title="Install on iOS"
+        >
+          <Download size={16} />
+        </button>
+        {showIOSGuide && (
+          <div className="fixed inset-0 z-50 flex items-center justify-center bg-ink/20 p-4">
+            <div className="w-full max-w-sm rounded bg-paper border border-ink/10 p-6 shadow-xl text-ink">
+              <h3 className="text-sm font-semibold">Install on iPhone / iPad</h3>
+              <p className="mt-2 text-xs opacity-80">
+                1. Tap the <strong>Share</strong> button in Safari toolbar.<br />
+                2. Scroll down and tap <strong>Add to Home Screen</strong>.
+              </p>
+              <button
+                onClick={() => setShowIOSGuide(false)}
+                className="mt-4 w-full rounded bg-ink text-canvas py-2 text-xs font-semibold hover:bg-ink/90"
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        )}
+      </>
+    );
+  }
+
+  return null;
+};

package/src/client/components/common/StatCard.tsx

@@ -0,0 +1,52 @@
+interface StatCardProps {
+  /** Primary metric shown first (or the compact tile's value). */
+  value: string | number;
+  /** Tile caption. */
+  label: string;
+  /** Optional secondary line under the caption (metric variant only). */
+  hint?: string;
+  /** Muted surface for a de-emphasised tile (metric variant only). */
+  tone?: 'default' | 'muted';
+  /**
+   * `metric` — the large value-first tile used by usage/token grids.
+   * `compact` — the dense label-first chip used by the context panel.
+   */
+  variant?: 'metric' | 'compact';
+  /** Extra classes on the tile root (e.g. grid span). */
+  className?: string;
+}
+
+/**
+ * Shared stat tile. Two shapes are supported so every existing call site keeps
+ * its exact markup: the value-first `metric` tile and the dense `compact` chip.
+ */
+export function StatCard({
+  value,
+  label,
+  hint,
+  tone = 'default',
+  variant = 'metric',
+  className = '',
+}: StatCardProps) {
+  if (variant === 'compact') {
+    return (
+      <div className="bg-canvas border border-ink/10 rounded-lg px-2.5 py-1.5 flex flex-col gap-0.5 flex-1 min-w-0">
+        <span className="text-[10px] font-medium text-ink/50">{label}</span>
+        <span className="text-xs font-semibold font-mono text-ink truncate">{value}</span>
+      </div>
+    );
+  }
+
+  const shell = tone === 'muted' ? 'bg-ink/5 border-ink/10' : 'bg-paper border-ink/15';
+  return (
+    <div className={`${shell} border rounded-lg p-3 shadow-xs flex flex-col justify-between h-full min-w-0 ${className}`}>
+      <div className="min-w-0">
+        <div className="text-base font-bold tracking-tight text-ink leading-tight tabular-nums break-normal">{value}</div>
+        <div className="text-[11px] font-semibold text-ink/75 mt-1.5 leading-snug min-h-[30px] flex items-start">
+          <span className="min-w-0 break-normal">{label}</span>
+        </div>
+      </div>
+      {hint && <div className="text-[10px] text-ink/50 mt-1.5 leading-tight break-words">{hint}</div>}
+    </div>
+  );
+}