ompchamber 0.3.0

package/src/client/components/workspace/context-panel/CostBreakdownPopover.tsx

@@ -0,0 +1,74 @@
+
+import { useRef } from 'preact/hooks';
+import { X } from 'lucide-preact';
+import type { ContextCostBreakdown } from '@/shared/types/context';
+import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
+
+interface CostBreakdownPopoverProps {
+  open: boolean;
+  onClose: () => void;
+  breakdown?: ContextCostBreakdown;
+  costFormatted?: string;
+}
+
+function money(value: number): string {
+  return value < 0.01 ? '$0.01' : `$${value.toFixed(6).replace(/0+$/, '').replace(/\.$/, '')}`;
+}
+
+export function CostBreakdownPopover({
+  open,
+  onClose,
+  breakdown,
+  costFormatted,
+}: CostBreakdownPopoverProps) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useOnClickOutside(ref, onClose);
+
+  if (!open) return null;
+
+  const rows = breakdown
+    ? [
+        { label: 'Total Cost', value: money(breakdown.total), strong: true },
+        { label: 'Input (cache miss)', value: money(breakdown.input) },
+        { label: 'Output', value: money(breakdown.output) },
+        { label: 'Cache Read (cache hit)', value: money(breakdown.cacheRead) },
+        { label: 'Cache Write', value: money(breakdown.cacheWrite) },
+      ]
+    : [{ label: 'Total Cost', value: costFormatted ?? '$0.01', strong: true }];
+
+  return (
+    <div
+      ref={ref}
+      className="absolute top-full right-0 mt-1.5 z-50 w-64 bg-paper border border-ink/10 rounded-lg shadow-lg p-3"
+      role="dialog"
+      aria-modal="false"
+    >
+      <div className="flex items-center justify-between mb-2.5">
+        <span className="text-xs font-semibold text-ink tracking-tight">Cost Breakdown</span>
+        <button
+          type="button"
+          onClick={onClose}
+          className="p-1 rounded hover:bg-ink/5 text-ink/60 hover:text-ink transition-colors"
+          aria-label="Close cost breakdown"
+        >
+          <X size={14} />
+        </button>
+      </div>
+
+      <div className="space-y-1.5">
+        {rows.map((row) => (
+          <div
+            key={row.label}
+            className="flex items-center justify-between text-[11px] font-mono border-b border-ink/5 last:border-0 pb-1.5 last:pb-0"
+          >
+            <span className="text-ink/60">{row.label}</span>
+            <span className={`${row.strong ? 'font-semibold text-ink' : 'text-ink/80'}`}>
+              {row.value}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/client/components/workspace/context-panel/LastMessageCard.tsx

@@ -0,0 +1,34 @@
+import { StatCard } from '@/client/components/common/StatCard';
+
+interface LastMessageCardProps {
+  input: number;
+  output: number;
+  reasoning: number;
+  cacheRead: number;
+  cacheWrite: number;
+  cacheHitPercent: number;
+}
+
+export function LastMessageCard({
+  input,
+  output,
+  reasoning,
+  cacheRead,
+  cacheWrite,
+  cacheHitPercent
+}: LastMessageCardProps) {
+  return (
+    <>
+      <div className="mb-1.5">
+        <span className="text-xs font-semibold text-ink/80">Last Assistant Message</span>
+      </div>
+      <div className="flex gap-2 flex-wrap">
+        <StatCard variant="compact" label="In" value={input.toLocaleString()} />
+        <StatCard variant="compact" label="Out" value={output.toLocaleString()} />
+        <StatCard variant="compact" label="Reason" value={reasoning.toLocaleString()} />
+        <StatCard variant="compact" label="Cache" value={`${cacheRead.toLocaleString()}/${cacheWrite.toLocaleString()}`} />
+        <StatCard variant="compact" label="Hit" value={`${cacheHitPercent.toFixed(1)}%`} />
+      </div>
+    </>
+  );
+}

package/src/client/components/workspace/context-panel/RawJsonViewer.tsx

@@ -0,0 +1,94 @@
+import { useCallback, useRef, useState } from 'preact/hooks';
+import type { UIEvent } from 'preact/compat';
+import type { TargetedMouseEvent } from 'preact';
+import { Check, Copy } from 'lucide-preact';
+import { highlightJson } from '@/shared/lib/code/syntax-highlight';
+import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
+
+interface RawJsonViewerProps {
+  data: Record<string, any>;
+}
+
+export function RawJsonViewer({ data }: RawJsonViewerProps) {
+  useSyntaxReady();
+  const [copied, setCopied] = useState(false);
+  const preRef = useRef<HTMLPreElement>(null);
+  const overlayRef = useRef<HTMLPreElement>(null);
+
+  const jsonString = JSON.stringify(data, null, 2);
+  const highlightedHtml = highlightJson(jsonString);
+
+  const syncOverlayScroll = useCallback((e: UIEvent<HTMLPreElement>) => {
+    const overlay = overlayRef.current;
+    if (!overlay) return;
+    overlay.scrollLeft = e.currentTarget.scrollLeft;
+    overlay.scrollTop = e.currentTarget.scrollTop;
+  }, []);
+
+  const handleCopy = useCallback(async (e: TargetedMouseEvent<HTMLElement>) => {
+    e.stopPropagation();
+    try {
+      await navigator.clipboard.writeText(jsonString);
+    } catch {
+      const textarea = document.createElement('textarea');
+      textarea.value = jsonString;
+      textarea.style.position = 'fixed';
+      textarea.style.opacity = '0';
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand('copy');
+      document.body.removeChild(textarea);
+    }
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }, [jsonString]);
+
+  return (
+    <div className="relative my-1.5 rounded-lg bg-paper/80 border border-ink/10 overflow-hidden">
+      {/* Action Header Bar */}
+      <div className="flex items-center justify-between px-2.5 py-1.5 bg-ink/[0.04] border-b border-ink/10">
+        <span className="text-[10px] font-mono text-ink/50 select-none">
+          {Object.keys(data).length} keys · {jsonString.length} chars
+        </span>
+        <button
+          type="button"
+          onClick={handleCopy}
+          className="flex items-center space-x-1 px-2 py-1 rounded bg-canvas hover:bg-paper text-ink/70 hover:text-ink border border-ink/10 text-[10px] transition-colors shadow-xs"
+          title="Copy Pretty JSON"
+        >
+          {copied ? (
+            <>
+              <Check size={11} className="text-emerald-600" />
+              <span className="text-emerald-600 font-sans font-medium">Copied</span>
+            </>
+          ) : (
+            <>
+              <Copy size={11} />
+              <span className="font-sans">Copy JSON</span>
+            </>
+          )}
+        </button>
+      </div>
+
+      {/* Code Block: inert highlight layer + real selectable text layer */}
+      <div className="relative">
+        {/* Highlight overlay — visuals only, non-interactive */}
+        <pre
+          ref={overlayRef}
+          aria-hidden
+          className="absolute inset-0 p-2.5 m-0 font-mono text-[11px] leading-5 overflow-x-auto overflow-y-auto whitespace-pre pointer-events-none"
+          dangerouslySetInnerHTML={{ __html: highlightedHtml }}
+        />
+
+        {/* Real selectable text — transparent ink, sits on top */}
+        <pre
+          ref={preRef}
+          onScroll={syncOverlayScroll}
+          className="relative p-2.5 m-0 font-mono text-[11px] leading-5 overflow-x-auto overflow-y-auto whitespace-pre select-text selection:bg-ink selection:text-canvas"
+        >
+          <code className="text-transparent">{jsonString}</code>
+        </pre>
+      </div>
+    </div>
+  );
+}

package/src/client/components/workspace/context-panel/RawMessagesList.tsx

@@ -0,0 +1,293 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronsUpDown } from 'lucide-preact';
+import { useSessionState } from '@/client/hooks/workspace/session-state';
+import { usePanelRefresh, useFileMutationRefresh } from '@/client/hooks/workspace/panel-refresh';
+import type { RawMessageItem } from '@/shared/types';
+import { RawJsonViewer } from '@/client/components/workspace/context-panel/RawJsonViewer';
+import {
+  MODEL_COLORS,
+  PAGE_SIZE,
+  hashModel,
+  modelLabel,
+  pageWindow,
+} from '@/client/components/workspace/context-panel/raw-messages';
+
+interface RawMessagesPageResponse {
+  items: RawMessageItem[];
+  total: number;
+  filteredTotal: number;
+  error?: string;
+}
+
+interface RawMessagesListProps {
+  sessionId: string | null;
+  /** Bumped by the parent on panel refresh ticks so the page re-reads. */
+  refreshKey?: number;
+}
+
+/**
+ * Server-side paged raw messages: only the current 20-row page is held in
+ * client state. Every fetch REPLACES the array (never appends), so memory
+ * stays flat no matter how long the session runs.
+ */
+export function RawMessagesList({ sessionId, refreshKey = 0 }: RawMessagesListProps) {
+  // All messages collapsed by default
+  const [expandedIds, setExpandedIds] = useSessionState<Record<string, boolean>>('context.rawExpandedIds', {});
+  const [filterRole, setFilterRole] = useSessionState<'all' | 'assistant' | 'user'>('context.rawFilterRole', 'all');
+  const [page, setPage] = useState(1);
+
+  // The single source of truth for visible rows — swapped wholesale on each
+  // page load, never accumulated.
+  const [items, setItems] = useState<RawMessageItem[]>([]);
+  const [filteredTotal, setFilteredTotal] = useState(0);
+  const [loading, setLoading] = useState(false);
+
+  // Tracks the latest request so stale responses can never clobber a newer
+  // page (rapid page flips, session switches mid-flight).
+  const requestSeqRef = useRef(0);
+  const cancelledRef = useRef(false);
+
+  const loadPage = useCallback((opts?: { silent?: boolean }) => {
+    if (typeof window === 'undefined') return;
+    const seq = ++requestSeqRef.current;
+    if (!opts?.silent) setLoading(true);
+    const params = new URLSearchParams({ page: String(page), pageSize: String(PAGE_SIZE), role: filterRole });
+    if (sessionId) params.set('sessionId', sessionId);
+    fetch(`/api/telemetry/raw-messages?${params.toString()}`)
+      .then((res) => (res.ok ? res.json() : null))
+      .then((data: RawMessagesPageResponse | null) => {
+        if (cancelledRef.current || seq !== requestSeqRef.current) return;
+        setItems(data && Array.isArray(data.items) ? data.items : []);
+        setFilteredTotal(data && Number.isFinite(data.filteredTotal) ? data.filteredTotal : 0);
+      })
+      .catch(() => {
+        if (cancelledRef.current || seq !== requestSeqRef.current) return;
+        setItems([]);
+        setFilteredTotal(0);
+      })
+      .finally(() => {
+        if (!opts?.silent && seq === requestSeqRef.current) setLoading(false);
+      });
+  }, [sessionId, page, filterRole]);
+
+  useEffect(() => {
+    cancelledRef.current = false;
+    loadPage();
+    return () => {
+      cancelledRef.current = true;
+    };
+  }, [loadPage, refreshKey]);
+
+  // Auto refresh: silent — the spinner stays reserved for the user's own
+  // interactions (page flips, filter, refresh button). The seq guard above
+  // keeps a slow poll response from clobbering a newer user-driven page load.
+  usePanelRefresh(() => loadPage({ silent: true }), sessionId !== null);
+  // A completed file-mutating tool changes what the JSONL holds — re-read now
+  // instead of on the next poll tick.
+  useFileMutationRefresh(() => loadPage({ silent: true }), sessionId !== null);
+
+  const totalPages = Math.max(1, Math.ceil(filteredTotal / PAGE_SIZE));
+  const safePage = Math.min(page, totalPages);
+  const goToPage = (p: number) => setPage(Math.min(Math.max(1, p), totalPages));
+
+  const toggleExpand = (id: string) => {
+    setExpandedIds(prev => ({
+      ...prev,
+      [id]: !prev[id]
+    }));
+  };
+
+  const handleToggleAll = () => {
+    const allExpanded = items.every(item => expandedIds[item.id]);
+    if (allExpanded) {
+      setExpandedIds({});
+    } else {
+      const next: Record<string, boolean> = {};
+      items.forEach(item => { next[item.id] = true; });
+      setExpandedIds(next);
+    }
+  };
+
+  const modelLegend = useMemo(() => {
+    const seen: string[] = [];
+    for (const item of items) {
+      const id = item.info.modelID;
+      if (!id || seen.includes(id)) continue;
+      seen.push(id);
+    }
+    return seen;
+  }, [items]);
+
+  const colorForModel = (id: string) =>
+    id ? MODEL_COLORS[hashModel(id) % MODEL_COLORS.length] : 'bg-ink/20';
+
+  return (
+    <div className="space-y-3">
+      {/* Legend */}
+      {modelLegend.length > 0 && (
+        <div>
+          <div className="mb-1.5">
+            <span className="text-xs font-semibold text-ink/80">Legend</span>
+          </div>
+          <div className="bg-canvas border border-ink/10 rounded-xl px-3 py-2">
+            <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-[10px] font-mono text-ink/60">
+              {modelLegend.map(id => (
+                <span key={id} className="flex items-center gap-1.5">
+                  <span className={`w-2 h-2 rounded-full ${colorForModel(id)}`} />
+                  <span>{modelLabel(id)}</span>
+                </span>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Section Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center space-x-2">
+          <span className="text-xs font-semibold text-ink/80">Raw Messages</span>
+          <span className="text-[10px] font-mono text-ink/50 bg-ink/5 px-1.5 py-0.5 rounded-full border border-ink/10">
+            {filteredTotal}
+          </span>
+        </div>
+
+        <div className="flex items-center space-x-1">
+          {/* Quick Filter (resets to first page) */}
+          <div className="flex items-center bg-canvas border border-ink/10 rounded-lg p-0.5 text-[10px]">
+            <button
+              type="button"
+              onClick={() => { setFilterRole('all'); setPage(1); }}
+              className={`px-1.5 py-0.5 rounded ${filterRole === 'all' ? 'bg-ink text-canvas font-medium' : 'text-ink/60 hover:text-ink'}`}
+            >
+              All
+            </button>
+            <button
+              type="button"
+              onClick={() => { setFilterRole('assistant'); setPage(1); }}
+              className={`px-1.5 py-0.5 rounded ${filterRole === 'assistant' ? 'bg-ink text-canvas font-medium' : 'text-ink/60 hover:text-ink'}`}
+            >
+              AI
+            </button>
+            <button
+              type="button"
+              onClick={() => { setFilterRole('user'); setPage(1); }}
+              className={`px-1.5 py-0.5 rounded ${filterRole === 'user' ? 'bg-ink text-canvas font-medium' : 'text-ink/60 hover:text-ink'}`}
+            >
+              User
+            </button>
+          </div>
+
+          <button
+            type="button"
+            onClick={handleToggleAll}
+            className="p-1 rounded text-ink/60 hover:text-ink hover:bg-ink/5 transition-colors text-[10px] flex items-center"
+            title="Expand / Collapse All"
+          >
+            <ChevronsUpDown size={14} />
+          </button>
+        </div>
+      </div>
+
+      {/* Accordion Messages */}
+      <div className="space-y-1.5">
+        {!loading && items.length === 0 ? (
+          <div className="p-4 text-center text-xs text-ink/40 italic bg-canvas rounded-xl border border-ink/10">
+            No raw messages recorded yet.
+          </div>
+        ) : (
+          items.map((item) => {
+            const isExpanded = Boolean(expandedIds[item.id]);
+
+            return (
+              <div
+                key={item.id}
+                className={`bg-canvas border border-ink/10 rounded-xl overflow-hidden transition-all duration-200 ${loading ? 'opacity-50' : ''}`}
+              >
+                {/* Accordion Header */}
+                <button
+                  type="button"
+                  onClick={() => toggleExpand(item.id)}
+                  className="w-full text-left px-3.5 py-2.5 flex items-center justify-between hover:bg-ink/5 transition-colors cursor-pointer"
+                >
+                  <div className="flex items-center space-x-2 min-w-0 flex-1 mr-2">
+                    <span className="text-ink/40 flex-shrink-0">
+                      {isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+                    </span>
+                    <span className="text-xs font-mono text-ink/90 truncate">
+                      {item.badgeLabel}
+                    </span>
+                  </div>
+
+                  <div className="flex items-center space-x-3 text-[11px] font-mono text-ink/50 flex-shrink-0">
+                    {item.tokenSummary && (
+                      <span className="text-ink/60">{item.tokenSummary}</span>
+                    )}
+                    <span className="flex items-center gap-1.5">
+                      <span className={`w-2 h-2 rounded-full ${colorForModel(item.info.modelID)}`} />
+                      <span>{item.timestamp}</span>
+                    </span>
+                  </div>
+                </button>
+
+                {/* Expanded Payload Viewer */}
+                {isExpanded && (
+                  <div className="px-3.5 pb-3 pt-1 border-t border-ink/5 bg-canvas/60">
+                    <RawJsonViewer data={item.rawPayload} />
+                  </div>
+                )}
+              </div>
+            );
+          })
+        )}
+      </div>
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <div className="flex items-center justify-between pt-1">
+          <span className="text-[10px] font-mono text-ink/50">
+            {(safePage - 1) * PAGE_SIZE + 1}–{Math.min(safePage * PAGE_SIZE, filteredTotal)} of {filteredTotal}
+          </span>
+
+          <div className="flex items-center gap-0.5">
+            <button
+              type="button"
+              disabled={safePage <= 1}
+              onClick={() => goToPage(safePage - 1)}
+              className="p-1 rounded text-ink/60 hover:text-ink hover:bg-ink/5 disabled:opacity-30 disabled:hover:bg-transparent transition-colors"
+              title="Previous page"
+            >
+              <ChevronLeft size={14} />
+            </button>
+
+            {pageWindow(safePage, totalPages).map((p, i) =>
+              p === '…' ? (
+                <span key={`gap-${i}`} className="px-1 text-[10px] font-mono text-ink/40 select-none">…</span>
+              ) : (
+                <button
+                  key={p}
+                  type="button"
+                  onClick={() => goToPage(p)}
+                  className={`min-w-[22px] h-[22px] px-1 rounded text-[10px] font-mono transition-colors ${
+                    p === safePage ? 'bg-ink text-canvas font-medium' : 'text-ink/60 hover:text-ink hover:bg-ink/5'
+                  }`}
+                >
+                  {p}
+                </button>
+              ),
+            )}
+
+            <button
+              type="button"
+              disabled={safePage >= totalPages}
+              onClick={() => goToPage(safePage + 1)}
+              className="p-1 rounded text-ink/60 hover:text-ink hover:bg-ink/5 disabled:opacity-30 disabled:hover:bg-transparent transition-colors"
+              title="Next page"
+            >
+              <ChevronRight size={14} />
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/client/components/workspace/context-panel/StatsGrid.tsx

@@ -0,0 +1,64 @@
+import { useState } from 'preact/hooks';
+import { Info } from 'lucide-preact';
+import type { ContextCostBreakdown } from '@/shared/types';
+import { CostBreakdownPopover } from '@/client/components/workspace/context-panel/CostBreakdownPopover';
+import { StatCard } from '@/client/components/common/StatCard';
+
+interface ContextStatsGridProps {
+  messagesCount: number;
+  userCount: number;
+  assistantCount: number;
+  costFormatted: string;
+  cacheHitAverage?: number;
+  costBreakdown?: ContextCostBreakdown;
+}
+
+export function ContextStatsGrid({
+  messagesCount,
+  userCount,
+  assistantCount,
+  costFormatted,
+  cacheHitAverage,
+  costBreakdown
+}: ContextStatsGridProps) {
+  const [costOpen, setCostOpen] = useState(false);
+
+  return (
+    <>
+      <div className="mb-1.5">
+        <span className="text-xs font-semibold text-ink/80">Session Stats</span>
+      </div>
+      <div className="flex gap-2 flex-wrap">
+        <StatCard variant="compact" label="Messages" value={messagesCount} />
+        <StatCard variant="compact" label="User" value={userCount} />
+        <StatCard variant="compact" label="Assistant" value={assistantCount} />
+        <StatCard
+          variant="compact"
+          label="Cache Hit"
+          value={cacheHitAverage !== undefined ? `${cacheHitAverage.toFixed(1)}%` : '—'}
+        />
+        <div className="relative 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 flex items-center gap-1">
+            Cost
+            <button
+              type="button"
+              onClick={() => setCostOpen(true)}
+              className="p-0.5 rounded text-ink/40 hover:text-ink hover:bg-ink/5 transition-colors"
+              aria-label="Show cost breakdown"
+              title="Cost breakdown"
+            >
+              <Info size={11} />
+            </button>
+          </span>
+          <span className="text-xs font-semibold font-mono text-ink truncate">{costFormatted}</span>
+          <CostBreakdownPopover
+            open={costOpen}
+            onClose={() => setCostOpen(false)}
+            breakdown={costBreakdown}
+            costFormatted={costFormatted}
+          />
+        </div>
+      </div>
+    </>
+  );
+}

package/src/client/components/workspace/context-panel/TokenDistributionBar.tsx

@@ -0,0 +1,62 @@
+
+interface TokenDistributionBarProps {
+  userPercent: number;
+  assistantPercent: number;
+  toolPercent: number;
+  otherPercent: number;
+}
+
+export function TokenDistributionBar({
+  userPercent,
+  assistantPercent,
+  toolPercent,
+  otherPercent
+}: TokenDistributionBarProps) {
+  return (
+    <div className="space-y-2.5">
+      {/* Multi-segment distribution bar */}
+      <div className="w-full h-1.5 rounded-full overflow-hidden flex bg-ink/10">
+        <div
+          className="h-full bg-emerald-500 transition-all duration-300"
+          style={{ width: `${userPercent}%` }}
+          title={`User: ${userPercent}%`}
+        />
+        <div
+          className="h-full bg-sky-500 transition-all duration-300"
+          style={{ width: `${assistantPercent}%` }}
+          title={`Assistant: ${assistantPercent}%`}
+        />
+        <div
+          className="h-full bg-amber-500 transition-all duration-300"
+          style={{ width: `${toolPercent}%` }}
+          title={`Tool Calls: ${toolPercent}%`}
+        />
+        <div
+          className="h-full bg-slate-400 transition-all duration-300"
+          style={{ width: `${otherPercent}%` }}
+          title={`Other: ${otherPercent}%`}
+        />
+      </div>
+
+      {/* Legend */}
+      <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-[11px] text-ink/70">
+        <div className="flex items-center space-x-1.5">
+          <span className="w-2 h-2 rounded-full bg-emerald-500 flex-shrink-0" />
+          <span>User {userPercent}%</span>
+        </div>
+        <div className="flex items-center space-x-1.5">
+          <span className="w-2 h-2 rounded-full bg-sky-500 flex-shrink-0" />
+          <span>Assistant {assistantPercent}%</span>
+        </div>
+        <div className="flex items-center space-x-1.5">
+          <span className="w-2 h-2 rounded-full bg-amber-500 flex-shrink-0" />
+          <span>Tool Calls {toolPercent}%</span>
+        </div>
+        <div className="flex items-center space-x-1.5">
+          <span className="w-2 h-2 rounded-full bg-slate-400 flex-shrink-0" />
+          <span>Other {otherPercent}%</span>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/client/components/workspace/context-panel/WindowCard.tsx

@@ -0,0 +1,35 @@
+
+interface ContextWindowCardProps {
+  used: number;
+  limit: number;
+  percent: number;
+}
+
+export function ContextWindowCard({ used, limit, percent }: ContextWindowCardProps) {
+  const formattedUsed = used.toLocaleString();
+  const formattedLimit = limit.toLocaleString();
+  const clampedPercent = Math.min(100, Math.max(0, percent));
+
+  return (
+    <div className="bg-canvas border border-ink/10 rounded-xl p-4 transition-all">
+      <div className="flex items-center justify-between text-xs mb-2">
+        <span className="font-semibold text-ink/80">Context</span>
+        <span className="font-mono text-ink/70 text-[11px]">
+          {formattedUsed} / {formattedLimit}
+        </span>
+      </div>
+
+      {/* Progress Bar */}
+      <div className="w-full h-1.5 bg-ink/10 rounded-full overflow-hidden mb-2">
+        <div
+          className="h-full bg-ink/70 rounded-full transition-all duration-500 ease-out"
+          style={{ width: `${clampedPercent}%` }}
+        />
+      </div>
+
+      <div className="text-[11px] font-mono text-ink/50 text-left">
+        {clampedPercent.toFixed(1)}% used
+      </div>
+    </div>
+  );
+}