@swarmclawai/swarmclaw 1.5.62 → 1.5.64

package/src/app/api/chats/compact-route.test.ts

@@ -0,0 +1,70 @@
+import assert from 'node:assert/strict'
+import test from 'node:test'
+
+import { runWithTempDataDir } from '@/lib/server/test-utils/run-with-temp-data-dir'
+
+test('POST /api/chats/[id]/compact returns no_action when transcript is smaller than keepLastN', () => {
+  const output = runWithTempDataDir<{
+    status: number
+    payload: { status?: string; messageCount?: number; keepLastN?: number }
+    missingStatus: number
+  }>(`
+    const storageMod = await import('./src/lib/server/storage')
+    const repoMod = await import('@/lib/server/messages/message-repository')
+    const routeMod = await import('./src/app/api/chats/[id]/compact/route')
+    const storage = storageMod.default || storageMod
+    const repo = repoMod.default || repoMod
+    const route = routeMod.default || routeMod
+
+    const now = Date.now()
+    storage.saveSessions({
+      sess_compact_1: {
+        id: 'sess_compact_1',
+        name: 'Compact test',
+        cwd: process.env.WORKSPACE_DIR,
+        user: 'tester',
+        provider: 'openai',
+        model: 'gpt-4o-mini',
+        claudeSessionId: null,
+        messages: [],
+        createdAt: now,
+        lastActiveAt: now,
+      },
+    })
+
+    // Only 2 messages — smaller than default keepLastN (10), so compact should no-op.
+    repo.appendMessage('sess_compact_1', { role: 'user', text: 'hi', time: now })
+    repo.appendMessage('sess_compact_1', { role: 'assistant', text: 'hello', time: now + 1 })
+
+    const response = await route.POST(
+      new Request('http://local/api/chats/sess_compact_1/compact', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({}),
+      }),
+      { params: Promise.resolve({ id: 'sess_compact_1' }) },
+    )
+    const payload = await response.json()
+
+    const missingResponse = await route.POST(
+      new Request('http://local/api/chats/missing/compact', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({}),
+      }),
+      { params: Promise.resolve({ id: 'missing' }) },
+    )
+
+    console.log(JSON.stringify({
+      status: response.status,
+      payload,
+      missingStatus: missingResponse.status,
+    }))
+  `, { prefix: 'swarmclaw-compact-route-' })
+
+  assert.equal(output.status, 200)
+  assert.equal(output.payload.status, 'no_action')
+  assert.equal(output.payload.messageCount, 2)
+  assert.equal(output.payload.keepLastN, 10)
+  assert.equal(output.missingStatus, 404)
+})

package/src/app/api/chats/context-status-route.test.ts

@@ -0,0 +1,68 @@
+import assert from 'node:assert/strict'
+import test from 'node:test'
+
+import { runWithTempDataDir } from '@/lib/server/test-utils/run-with-temp-data-dir'
+
+test('GET /api/chats/[id]/context-status returns token usage summary', () => {
+  const output = runWithTempDataDir<{
+    status: number
+    hasContextWindow: boolean
+    percentUsed: number
+    messageCount: number
+    strategy: string
+    missingStatus: number
+  }>(`
+    const storageMod = await import('./src/lib/server/storage')
+    const repoMod = await import('@/lib/server/messages/message-repository')
+    const routeMod = await import('./src/app/api/chats/[id]/context-status/route')
+    const storage = storageMod.default || storageMod
+    const repo = repoMod.default || repoMod
+    const route = routeMod.default || routeMod
+
+    const now = Date.now()
+    storage.saveSessions({
+      sess_ctx_1: {
+        id: 'sess_ctx_1',
+        name: 'Context status test',
+        cwd: process.env.WORKSPACE_DIR,
+        user: 'tester',
+        provider: 'openai',
+        model: 'gpt-4o-mini',
+        claudeSessionId: null,
+        messages: [],
+        createdAt: now,
+        lastActiveAt: now,
+      },
+    })
+
+    repo.appendMessage('sess_ctx_1', { role: 'user', text: 'hello world', time: now })
+    repo.appendMessage('sess_ctx_1', { role: 'assistant', text: 'hi there, how can I help?', time: now + 1 })
+
+    const response = await route.GET(
+      new Request('http://local/api/chats/sess_ctx_1/context-status'),
+      { params: Promise.resolve({ id: 'sess_ctx_1' }) },
+    )
+    const payload = await response.json()
+
+    const missingResponse = await route.GET(
+      new Request('http://local/api/chats/missing/context-status'),
+      { params: Promise.resolve({ id: 'missing' }) },
+    )
+
+    console.log(JSON.stringify({
+      status: response.status,
+      hasContextWindow: typeof payload.contextWindow === 'number' && payload.contextWindow > 0,
+      percentUsed: payload.percentUsed,
+      messageCount: payload.messageCount,
+      strategy: payload.strategy,
+      missingStatus: missingResponse.status,
+    }))
+  `, { prefix: 'swarmclaw-context-status-route-' })
+
+  assert.equal(output.status, 200)
+  assert.equal(output.hasContextWindow, true)
+  assert.ok(output.percentUsed >= 0 && output.percentUsed <= 100)
+  assert.equal(output.messageCount, 2)
+  assert.ok(['ok', 'warning', 'critical'].includes(output.strategy))
+  assert.equal(output.missingStatus, 404)
+})

package/src/app/api/mcp-servers/[id]/route.ts

@@ -2,6 +2,7 @@ import { NextResponse } from 'next/server'
 import { safeParseBody } from '@/lib/server/safe-parse-body'
 import { loadMcpServers, saveMcpServers, deleteMcpServer } from '@/lib/server/storage'
 import { mutateItem, deleteItem, notFound, type CollectionOps } from '@/lib/server/collection-helpers'
+import { evictMcpClient } from '@/lib/server/mcp-connection-pool'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const ops: CollectionOps<any> = { load: loadMcpServers, save: saveMcpServers, deleteFn: deleteMcpServer }
@@ -21,11 +22,15 @@ export async function PUT(req: Request, { params }: { params: Promise<{ id: stri
     ...server, ...body, id, updatedAt: Date.now(),
   }))
   if (!result) return notFound()
+  // Connection pool caches by config fingerprint; evicting here is defense in
+  // depth — getOrConnectMcpClient also detects fingerprint mismatches.
+  await evictMcpClient(id)
   return NextResponse.json(result)
 }
 
 export async function DELETE(_req: Request, { params }: { params: Promise<{ id: string }> }) {
   const { id } = await params
   if (!deleteItem(ops, id)) return notFound()
+  await evictMcpClient(id)
   return NextResponse.json({ deleted: id })
 }

package/src/app/api/mcp-servers/[id]/test/route.ts

@@ -2,6 +2,7 @@ import { NextResponse } from 'next/server'
 import { loadMcpServers } from '@/lib/server/storage'
 import { notFound } from '@/lib/server/collection-helpers'
 import { connectMcpServer, mcpToolsToLangChain, disconnectMcpServer } from '@/lib/server/mcp-client'
+import { evictMcpClient } from '@/lib/server/mcp-connection-pool'
 import { errorMessage } from '@/lib/shared-utils'
 
 export async function POST(_req: Request, { params }: { params: Promise<{ id: string }> }) {
@@ -10,6 +11,10 @@ export async function POST(_req: Request, { params }: { params: Promise<{ id: st
   const server = servers[id]
   if (!server) return notFound()
 
+  // Force a fresh connection for the test — if a pooled client is in a weird
+  // state, the test button is the user's signal to rebuild it.
+  await evictMcpClient(id)
+
   try {
     const { client, transport } = await connectMcpServer(server)
     const tools = await mcpToolsToLangChain(client, server.name)

package/src/app/api/mcp-servers/[id]/tools-info/route.ts

@@ -0,0 +1,75 @@
+import { NextResponse } from 'next/server'
+import { loadMcpServers } from '@/lib/server/storage'
+import { notFound } from '@/lib/server/collection-helpers'
+import { connectMcpServer, disconnectMcpServer } from '@/lib/server/mcp-client'
+
+// Tokenizer-free estimate — same formula as @swarmclawai/mcp-gateway's
+// tokens.ts so the two numbers line up when users compare side-by-side.
+const CHARS_PER_TOKEN = 3.5
+
+function estimateToolTokens(tool: {
+  name: string
+  description?: string
+  inputSchema?: unknown
+}): number {
+  const json = JSON.stringify({
+    name: tool.name,
+    description: tool.description ?? '',
+    inputSchema: tool.inputSchema ?? {},
+  })
+  return Math.ceil(json.length / CHARS_PER_TOKEN)
+}
+
+/**
+ * Discovery + token-cost endpoint for an MCP server. Connects, lists tools,
+ * estimates per-tool schema tokens, and returns aggregate totals — including
+ * how many tokens would actually be bound given the server's current
+ * alwaysExpose policy. The MCP servers UI uses this to render the token-cost
+ * badge on each card and the per-tool checklist in the allow-list editor.
+ */
+export async function GET(_req: Request, { params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params
+  const servers = loadMcpServers()
+  const config = servers[id]
+  if (!config) return notFound()
+
+  let client: Awaited<ReturnType<typeof connectMcpServer>>['client'] | null = null
+  let transport: Awaited<ReturnType<typeof connectMcpServer>>['transport'] | null = null
+  try {
+    const conn = await connectMcpServer(config)
+    client = conn.client
+    transport = conn.transport
+    const { tools } = await client.listTools()
+    const detailed = tools.map((t: { name: string; description?: string; inputSchema?: unknown }) => ({
+      name: t.name,
+      description: t.description ?? '',
+      inputSchema: t.inputSchema ?? {},
+      tokens: estimateToolTokens(t),
+    }))
+    const totalTokens = detailed.reduce((n: number, t: { tokens: number }) => n + t.tokens, 0)
+    const mode = config.alwaysExpose === undefined ? true : config.alwaysExpose
+    const exposedTokens =
+      mode === true
+        ? totalTokens
+        : mode === false
+          ? 0
+          : detailed
+              .filter((t: { name: string }) => (mode as string[]).includes(t.name))
+              .reduce((n: number, t: { tokens: number }) => n + t.tokens, 0)
+    return NextResponse.json({
+      tools: detailed,
+      totalTokens,
+      exposedTokens,
+      alwaysExpose: mode,
+    })
+  } catch (err: unknown) {
+    return NextResponse.json(
+      { error: err instanceof Error ? err.message : 'MCP connection failed' },
+      { status: 502 },
+    )
+  } finally {
+    if (client && transport) {
+      await disconnectMcpServer(client, transport)
+    }
+  }
+}

package/src/cli/index.js

@@ -367,6 +367,7 @@ const COMMAND_GROUPS = [
       cmd('delete', 'DELETE', '/mcp-servers/:id', 'Delete MCP server'),
       cmd('test', 'POST', '/mcp-servers/:id/test', 'Test MCP server connection'),
       cmd('tools', 'GET', '/mcp-servers/:id/tools', 'List tools available on an MCP server'),
+      cmd('tools-info', 'GET', '/mcp-servers/:id/tools-info', 'List tools with token-cost estimates and exposure status'),
       cmd('conformance', 'POST', '/mcp-servers/:id/conformance', 'Run MCP conformance checks for a server', { expectsJsonBody: true }),
       cmd('invoke', 'POST', '/mcp-servers/:id/invoke', 'Invoke an MCP tool on a server', { expectsJsonBody: true }),
     ],
@@ -585,7 +586,10 @@ const COMMAND_GROUPS = [
         responseType: 'sse',
       }),
       cmd('stop', 'POST', '/chats/:id/stop', 'Stop chat run(s)'),
-      cmd('clear', 'POST', '/chats/:id/clear', 'Clear chat messages'),
+      cmd('clear', 'POST', '/chats/:id/clear', 'Clear chat messages (returns undoToken with a 30s TTL)'),
+      cmd('clear-undo', 'POST', '/chats/:id/clear/undo', 'Restore a cleared chat via its undoToken', { expectsJsonBody: true }),
+      cmd('compact', 'POST', '/chats/:id/compact', 'Summarize and compact chat history (accepts optional keepLastN)', { expectsJsonBody: true }),
+      cmd('context-status', 'GET', '/chats/:id/context-status', 'Report token usage and context-window status for a chat'),
       cmd('browser-status', 'GET', '/chats/:id/browser', 'Check browser status'),
       cmd('browser-close', 'DELETE', '/chats/:id/browser', 'Close browser'),
       cmd('mailbox', 'GET', '/chats/:id/mailbox', 'List chat mailbox envelopes'),

package/src/cli/spec.js

@@ -435,7 +435,10 @@ const COMMAND_GROUPS = {
       'edit-resend': { description: 'Edit and resend from a specific message index', method: 'POST', path: '/chats/:id/edit-resend', params: ['id'] },
       chat: { description: 'Send chat message (SSE stream)', method: 'POST', path: '/chats/:id/chat', params: ['id'], stream: true, waitable: true },
       stop: { description: 'Cancel active/running chat work', method: 'POST', path: '/chats/:id/stop', params: ['id'] },
-      clear: { description: 'Clear chat history', method: 'POST', path: '/chats/:id/clear', params: ['id'] },
+      clear: { description: 'Clear chat history (returns undoToken with 30s TTL)', method: 'POST', path: '/chats/:id/clear', params: ['id'] },
+      'clear-undo': { description: 'Restore a cleared chat via its undoToken', method: 'POST', path: '/chats/:id/clear/undo', params: ['id'] },
+      compact: { description: 'Summarize and compact chat history', method: 'POST', path: '/chats/:id/compact', params: ['id'] },
+      'context-status': { description: 'Report token usage and context-window status', method: 'GET', path: '/chats/:id/context-status', params: ['id'] },
       mailbox: { description: 'List mailbox envelopes for a chat', method: 'GET', path: '/chats/:id/mailbox', params: ['id'] },
       'mailbox-action': { description: 'Send/ack/clear mailbox envelopes', method: 'POST', path: '/chats/:id/mailbox', params: ['id'] },
       queue: { description: 'List queued follow-up turns for a chat', method: 'GET', path: '/chats/:id/queue', params: ['id'] },

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

@@ -6,7 +6,9 @@ import { useAppStore } from '@/stores/use-app-store'
 import { selectActiveSessionId } from '@/stores/slices/session-slice'
 import { useWs } from '@/hooks/use-ws'
 import { useChatStore } from '@/stores/use-chat-store'
-import { fetchMessages, fetchMessagesPaginated, clearMessages, deleteChat, devServer, checkBrowser, stopBrowser } from '@/lib/chat/chats'
+import { fetchMessages, fetchMessagesPaginated, clearMessages, undoClearMessages, deleteChat, devServer, checkBrowser, stopBrowser } from '@/lib/chat/chats'
+import { toast } from 'sonner'
+import { errorMessage } from '@/lib/shared-utils'
 import { uploadImage } from '@/lib/upload'
 import { deleteAgent } from '@/lib/agents'
 import { useMediaQuery } from '@/hooks/use-media-query'
@@ -432,11 +434,59 @@ export function ChatArea() {
   const handleClear = useCallback(async () => {
     setConfirmClear(false)
     if (!sessionId) return
-    await clearMessages(sessionId)
-    setMessages([], { startIndex: 0, totalMessages: 0 })
-    await refreshSession(sessionId)
+    const targetSessionId = sessionId
+    let result
+    try {
+      result = await clearMessages(targetSessionId)
+    } catch (err) {
+      toast.error(`Clear failed: ${errorMessage(err)}`)
+      return
+    }
+    if (selectActiveSessionId(useAppStore.getState()) === targetSessionId) {
+      setMessages([], { startIndex: 0, totalMessages: 0 })
+    }
+    await refreshSession(targetSessionId)
+    const { undoToken, cleared } = result
+    if (!undoToken) return
+    const clearedLabel = cleared === 1 ? '1 message cleared' : `${cleared.toLocaleString()} messages cleared`
+    toast(clearedLabel, {
+      duration: 10_000,
+      action: {
+        label: 'Undo',
+        onClick: async () => {
+          try {
+            await undoClearMessages(targetSessionId, undoToken)
+            const restored = await fetchMessages(targetSessionId)
+            if (selectActiveSessionId(useAppStore.getState()) === targetSessionId) {
+              setMessages(restored, { startIndex: 0, totalMessages: restored.length })
+            }
+            await refreshSession(targetSessionId)
+            toast.success('Chat restored.')
+          } catch (err) {
+            toast.error(`Undo failed: ${errorMessage(err)}`)
+          }
+        },
+      },
+    })
   }, [refreshSession, sessionId, setMessages])
 
+  const handleCompactComplete = useCallback(async () => {
+    if (!sessionId) return
+    const targetSessionId = sessionId
+    try {
+      const refreshed = await fetchMessages(targetSessionId)
+      if (selectActiveSessionId(useAppStore.getState()) === targetSessionId) {
+        setMessages(refreshed, { startIndex: 0, totalMessages: refreshed.length })
+      }
+    } catch {
+      // silent — next poll will catch up
+    }
+  }, [sessionId, setMessages])
+
+  const handleClearRequest = useCallback(() => {
+    setConfirmClear(true)
+  }, [])
+
   const handleDelete = useCallback(async () => {
     setConfirmDelete(false)
     if (!sessionId) return
@@ -515,6 +565,9 @@ export function ChatArea() {
           connectorFilter={connectorFilter}
           onConnectorFilterChange={setConnectorFilter}
           hasMultipleSources={hasMultipleSources}
+          messageCount={messages.length}
+          onCompactComplete={handleCompactComplete}
+          onClearRequest={handleClearRequest}
         />
       )}
       {!isDesktop && (
@@ -533,6 +586,9 @@ export function ChatArea() {
           connectorFilter={connectorFilter}
           onConnectorFilterChange={setConnectorFilter}
           hasMultipleSources={hasMultipleSources}
+          messageCount={messages.length}
+          onCompactComplete={handleCompactComplete}
+          onClearRequest={handleClearRequest}
         />
       )}
       <DevServerBar status={devServerStatus} onStop={handleStopDevServer} />
@@ -660,8 +716,8 @@ export function ChatArea() {
 
       <ConfirmDialog
         open={confirmClear}
-        title="Clear History"
-        message="This will delete all messages in this chat. This cannot be undone."
+        title="Clear chat"
+        message="Clear every message in this chat. Long-term memory, skills, and facts are preserved. You'll have 10 seconds to undo."
         confirmLabel="Clear"
         danger
         onConfirm={handleClear}

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

@@ -17,6 +17,7 @@ import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip
 import { copyTextToClipboard } from '@/lib/clipboard'
 import { useNavigate } from '@/lib/app/navigation'
 import { getEnabledToolIds } from '@/lib/capability-selection'
+import { ContextMeterBadge } from './context-meter-badge'
 
 function Tip({ label, children, side = 'bottom' }: { label: string; children: ReactNode; side?: 'top' | 'bottom' | 'left' | 'right' }) {
   return (
@@ -80,9 +81,12 @@ interface Props {
   connectorFilter?: string | null
   onConnectorFilterChange?: (filter: string | null) => void
   hasMultipleSources?: boolean
+  messageCount?: number
+  onCompactComplete?: () => void
+  onClearRequest?: () => void
 }
 
-export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, mobile, browserActive, onStopBrowser, onVoiceToggle, voiceActive, voiceSupported, connectorSources, connectorFilter, onConnectorFilterChange, hasMultipleSources }: Props) {
+export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, mobile, browserActive, onStopBrowser, onVoiceToggle, voiceActive, voiceSupported, connectorSources, connectorFilter, onConnectorFilterChange, hasMultipleSources, messageCount = 0, onCompactComplete, onClearRequest }: Props) {
   const now = useNow()
   const agentStatus = useChatStore((s) => s.agentStatus)
   const agents = useAppStore((s) => s.agents)
@@ -419,6 +423,14 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
                 Responding
               </HeaderChip>
             )}
+            {messageCount > 0 && onCompactComplete && onClearRequest && (
+              <ContextMeterBadge
+                sessionId={session.id}
+                messageCount={messageCount}
+                onCompactComplete={onCompactComplete}
+                onClearRequest={onClearRequest}
+              />
+            )}
           </div>
           {liveStatus?.status && (
           <div className="mt-1.5 flex min-w-0 flex-wrap items-center gap-1.5">

package/src/components/chat/context-meter-badge.tsx

@@ -0,0 +1,227 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { toast } from 'sonner'
+import {
+  compactChat,
+  fetchContextStatus,
+  type ContextStatusResponse,
+} from '@/lib/chat/chats'
+import { useWs } from '@/hooks/use-ws'
+import { errorMessage } from '@/lib/shared-utils'
+
+interface Props {
+  sessionId: string
+  messageCount: number
+  onCompactComplete: () => void
+  onClearRequest: () => void
+}
+
+function formatTokens(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`
+  if (n >= 1_000) return `${(n / 1_000).toFixed(n < 10_000 ? 1 : 0)}k`
+  return `${n}`
+}
+
+function resolveColor(strategy: ContextStatusResponse['strategy']): {
+  dot: string
+  text: string
+  border: string
+  bg: string
+} {
+  if (strategy === 'critical') {
+    return {
+      dot: 'bg-red-400',
+      text: 'text-red-300',
+      border: 'border-red-500/25',
+      bg: 'bg-red-500/10',
+    }
+  }
+  if (strategy === 'warning') {
+    return {
+      dot: 'bg-amber-400',
+      text: 'text-amber-300',
+      border: 'border-amber-500/25',
+      bg: 'bg-amber-500/10',
+    }
+  }
+  return {
+    dot: 'bg-emerald-400/80',
+    text: 'text-text-3/70',
+    border: 'border-white/[0.06]',
+    bg: 'bg-white/[0.03]',
+  }
+}
+
+export function ContextMeterBadge({ sessionId, messageCount, onCompactComplete, onClearRequest }: Props) {
+  const [status, setStatus] = useState<ContextStatusResponse | null>(null)
+  const [open, setOpen] = useState(false)
+  const [compacting, setCompacting] = useState(false)
+  const anchorRef = useRef<HTMLDivElement>(null)
+  const panelRef = useRef<HTMLDivElement>(null)
+
+  const loadStatus = useCallback(async () => {
+    try {
+      const next = await fetchContextStatus(sessionId)
+      setStatus(next)
+    } catch {
+      // silent — badge just won't render
+    }
+  }, [sessionId])
+
+  useEffect(() => {
+    void loadStatus()
+  }, [loadStatus, messageCount])
+
+  useWs(`messages:${sessionId}`, loadStatus)
+
+  useEffect(() => {
+    if (!open) return
+    const handler = (event: MouseEvent) => {
+      const target = event.target as Node
+      if (anchorRef.current?.contains(target)) return
+      if (panelRef.current?.contains(target)) return
+      setOpen(false)
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [open])
+
+  useEffect(() => {
+    if (!open) return
+    const handler = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setOpen(false)
+    }
+    document.addEventListener('keydown', handler)
+    return () => document.removeEventListener('keydown', handler)
+  }, [open])
+
+  const handleCompact = useCallback(async () => {
+    if (compacting) return
+    setCompacting(true)
+    try {
+      const result = await compactChat(sessionId)
+      if (result.status === 'no_action') {
+        toast('Nothing to compact yet.')
+      } else {
+        toast.success(
+          `Compacted ${result.prunedCount ?? 0} message${result.prunedCount === 1 ? '' : 's'}.`,
+        )
+      }
+      onCompactComplete()
+      await loadStatus()
+      setOpen(false)
+    } catch (err) {
+      toast.error(`Compact failed: ${errorMessage(err)}`)
+    } finally {
+      setCompacting(false)
+    }
+  }, [compacting, loadStatus, onCompactComplete, sessionId])
+
+  const handleClearClick = useCallback(() => {
+    setOpen(false)
+    onClearRequest()
+  }, [onClearRequest])
+
+  if (!status) return null
+  const colors = resolveColor(status.strategy)
+  const percent = Math.min(100, Math.max(0, status.percentUsed))
+
+  return (
+    <div className="relative" ref={anchorRef}>
+      <button
+        type="button"
+        onClick={() => setOpen((prev) => !prev)}
+        className={`inline-flex items-center gap-1.5 rounded-[9px] border px-2.5 py-1 text-[10px] font-600 transition-colors shrink-0 cursor-pointer ${colors.bg} ${colors.border} ${colors.text} hover:border-white/[0.15] hover:text-text-2`}
+        title={`${status.effectiveTokens.toLocaleString()} of ${status.contextWindow.toLocaleString()} tokens used`}
+        aria-expanded={open}
+        aria-label={`Context usage ${percent}%. Click for details.`}
+      >
+        <span className={`w-1.5 h-1.5 rounded-full ${colors.dot}`} />
+        <span>{percent}%</span>
+        <span className="text-text-3/45 font-500">
+          {formatTokens(status.effectiveTokens)}
+        </span>
+      </button>
+      {open && (
+        <div
+          ref={panelRef}
+          className="absolute right-0 top-[calc(100%+6px)] z-50 w-[280px] rounded-[14px] border border-white/[0.08] bg-raised/95 p-3 shadow-[0_16px_64px_rgba(0,0,0,0.6)] backdrop-blur-xl"
+          style={{ animation: 'fade-in 0.15s cubic-bezier(0.16, 1, 0.3, 1)' }}
+        >
+          <div className="flex items-baseline justify-between">
+            <span className="text-[11px] font-600 uppercase tracking-wider text-text-3/60">Context window</span>
+            <span className={`text-[11px] font-600 ${colors.text}`}>{percent}%</span>
+          </div>
+          <div className="mt-2 h-1.5 w-full rounded-full bg-white/[0.06] overflow-hidden">
+            <div
+              className={`h-full rounded-full transition-all ${
+                status.strategy === 'critical' ? 'bg-red-400'
+                : status.strategy === 'warning' ? 'bg-amber-400'
+                : 'bg-emerald-400/80'
+              }`}
+              style={{ width: `${percent}%` }}
+            />
+          </div>
+          <dl className="mt-3 space-y-1 text-[11px]">
+            <div className="flex justify-between">
+              <dt className="text-text-3/60">Used</dt>
+              <dd className="text-text-2 font-mono">
+                {status.effectiveTokens.toLocaleString()} / {status.contextWindow.toLocaleString()}
+              </dd>
+            </div>
+            <div className="flex justify-between">
+              <dt className="text-text-3/60">Remaining</dt>
+              <dd className="text-text-2 font-mono">{status.remainingTokens.toLocaleString()}</dd>
+            </div>
+            <div className="flex justify-between">
+              <dt className="text-text-3/60">Messages</dt>
+              <dd className="text-text-2 font-mono">{status.messageCount}</dd>
+            </div>
+          </dl>
+          <div className="mt-3 flex gap-2">
+            <button
+              type="button"
+              onClick={handleCompact}
+              disabled={compacting || status.messageCount < 3}
+              className="flex-1 inline-flex items-center justify-center gap-1.5 rounded-[10px] border border-accent-bright/25 bg-accent-soft/40 px-2.5 py-1.5 text-[11px] font-600 text-accent-bright transition-colors hover:border-accent-bright/40 hover:bg-accent-soft/60 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              {compacting ? (
+                <>
+                  <span className="w-3 h-3 rounded-full border-2 border-accent-bright/30 border-t-accent-bright animate-spin" />
+                  Compacting
+                </>
+              ) : (
+                <>
+                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                    <path d="M4 14h6v6" />
+                    <path d="M20 10h-6V4" />
+                    <path d="M14 10 21 3" />
+                    <path d="M3 21l7-7" />
+                  </svg>
+                  Compact
+                </>
+              )}
+            </button>
+            <button
+              type="button"
+              onClick={handleClearClick}
+              className="flex-1 inline-flex items-center justify-center gap-1.5 rounded-[10px] border border-white/[0.08] bg-white/[0.03] px-2.5 py-1.5 text-[11px] font-600 text-text-2 transition-colors hover:border-red-500/25 hover:bg-red-500/10 hover:text-red-300"
+            >
+              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M3 6h18" />
+                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
+                <path d="M10 11v6" />
+                <path d="M14 11v6" />
+              </svg>
+              Clear
+            </button>
+          </div>
+          <p className="mt-2.5 text-[10px] leading-relaxed text-text-3/55">
+            Long-term memory, skills, and facts are preserved. Clear only affects this chat transcript.
+          </p>
+        </div>
+      )}
+    </div>
+  )
+}