feat: activate context bar, fix token counting, port 3002 (#32)

- Render ContextBar in chat screen (was imported but never placed)
- Pass sessionId to context-usage API for accurate token data
- Count all tokens (cached + uncached) for real context window usage
- Model-aware max tokens (200k for Claude, 128k for GPT)
- Return model name in context-usage response
- Remove header border-b (context bar replaces separator)
- Remove context bar own border-b for clean look
- Change dev server port from 3000 to 3002

Co-authored-by: outsourc-e <eric@outsourc.e>

Author: outsourc-e

src/routes/api/context-usage.ts

@@ -17,34 +17,67 @@ export const Route = createFileRoute('/api/context-usage')({
         try {
           // Try to get session token usage from Hermes
           let usedTokens = 0
-          let maxTokens = 128000 // default context window
+          let maxTokens = 200000 // default context window
+          let model = ''
+
+          // Known context window sizes for common models
+          const MODEL_CONTEXT: Record<string, number> = {
+            'claude-opus-4-6': 200000,
+            'claude-sonnet-4-6': 200000,
+            'claude-sonnet-4': 200000,
+            'claude-opus-4': 200000,
+            'claude-3-5-sonnet': 200000,
+            'claude-3-opus': 200000,
+            'gpt-5.4': 128000,
+            'gpt-4o': 128000,
+            'gpt-4-turbo': 128000,
+          }
 
           if (sessionId) {
             const res = await fetch(`${HERMES_API}/api/sessions/${sessionId}`, {
               signal: AbortSignal.timeout(3000),
             })
             if (res.ok) {
-              const data = (await res.json()) as { session?: { input_tokens?: number; output_tokens?: number } }
+              const data = (await res.json()) as { session?: {
+                input_tokens?: number
+                output_tokens?: number
+                cache_read_tokens?: number
+                cache_write_tokens?: number
+                model?: string
+              } }
               const session = data.session
               if (session) {
-                usedTokens = (session.input_tokens || 0) + (session.output_tokens || 0)
+                // Total context = all tokens in the window (cached + uncached)
+                usedTokens = (session.input_tokens || 0)
+                  + (session.output_tokens || 0)
+                  + (session.cache_read_tokens || 0)
+                  + (session.cache_write_tokens || 0)
+                model = session.model || ''
+
+                // Set max based on model
+                const modelKey = Object.keys(MODEL_CONTEXT).find(
+                  (k) => model.toLowerCase().includes(k.toLowerCase()),
+                )
+                if (modelKey) maxTokens = MODEL_CONTEXT[modelKey]
               }
             }
           }
 
-          // Try to get model context window from /v1/models
-          try {
-            const modelsRes = await fetch(`${HERMES_API}/v1/models`, {
-              signal: AbortSignal.timeout(3000),
-            })
-            if (modelsRes.ok) {
-              const modelsData = (await modelsRes.json()) as { data?: Array<{ context_length?: number }> }
-              const firstModel = modelsData.data?.[0]
-              if (firstModel?.context_length) {
-                maxTokens = firstModel.context_length
+          // Fallback: try /v1/models for context_length
+          if (maxTokens === 200000 && !model) {
+            try {
+              const modelsRes = await fetch(`${HERMES_API}/v1/models`, {
+                signal: AbortSignal.timeout(3000),
+              })
+              if (modelsRes.ok) {
+                const modelsData = (await modelsRes.json()) as { data?: Array<{ context_length?: number }> }
+                const firstModel = modelsData.data?.[0]
+                if (firstModel?.context_length) {
+                  maxTokens = firstModel.context_length
+                }
               }
-            }
-          } catch { /* use default */ }
+            } catch { /* use default */ }
+          }
 
           const contextPercent = maxTokens > 0 ? Math.round((usedTokens / maxTokens) * 100) : 0
 
@@ -53,7 +86,7 @@ export const Route = createFileRoute('/api/context-usage')({
             contextPercent,
             maxTokens,
             usedTokens,
-            model: '',
+            model,
             staticTokens: 0,
             conversationTokens: usedTokens,
           })

src/screens/chat/chat-screen.tsx

@@ -2399,6 +2399,8 @@ export function ChatScreen({
             </div>
           )}
 
+          {hideUi ? null : <ContextBar sessionId={activeSession?.key || activeSessionKey || resolvedSessionKey} />}
+
           {hideUi ? null : (
             <ChatMessageList
               messages={finalDisplayMessages}

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

@@ -229,7 +229,7 @@ function ChatHeaderComponent({
     return (
       <div
         ref={wrapperRef}
-        className="shrink-0 border-b border-primary-200 bg-surface transition-transform"
+        className="shrink-0 bg-surface transition-transform"
         style={pullOffset > 0 ? { transform: `translateY(${pullOffset}px)` } : undefined}
       >
         <div className="px-3 h-12 flex items-center gap-0">
@@ -271,7 +271,7 @@ function ChatHeaderComponent({
   return (
     <div
       ref={wrapperRef}
-      className="shrink-0 border-b border-primary-200 bg-surface"
+      className="shrink-0 bg-surface"
     >
       <div className="px-4 h-12 flex items-center">
         {showFileExplorerButton ? (

src/screens/chat/components/context-bar.tsx

@@ -30,7 +30,7 @@ function formatTokens(n: number): string {
   return String(n)
 }
 
-function ContextBarComponent({ compact: _compact }: { compact?: boolean }) {
+function ContextBarComponent({ compact: _compact, sessionId }: { compact?: boolean; sessionId?: string }) {
   const [ctx, setCtx] = useState<ContextData>(EMPTY)
   const [showLabel, setShowLabel] = useState(false)
   const [isMobile, setIsMobile] = useState(false)
@@ -45,7 +45,8 @@ function ContextBarComponent({ compact: _compact }: { compact?: boolean }) {
 
   const refresh = useCallback(async () => {
     try {
-      const res = await fetch('/api/context-usage')
+      const params = sessionId ? `?sessionId=${encodeURIComponent(sessionId)}` : ''
+      const res = await fetch(`/api/context-usage${params}`)
       if (!res.ok) return
       const data = await res.json()
       if (data.ok) {
@@ -59,7 +60,7 @@ function ContextBarComponent({ compact: _compact }: { compact?: boolean }) {
     } catch {
       /* ignore */
     }
-  }, [])
+  }, [sessionId])
 
   useEffect(() => {
     void refresh()
@@ -143,7 +144,7 @@ function ContextBarComponent({ compact: _compact }: { compact?: boolean }) {
       <PreviewCardTrigger className="block w-full cursor-pointer">
         <div
           className={cn(
-            'shrink-0 w-full h-2 border-b border-primary-200/50 dark:border-primary-700/30 transition-colors duration-300 relative',
+            'shrink-0 w-full h-2 transition-colors duration-300 relative',
             barBg,
           )}
         >

vite.config.ts

@@ -388,8 +388,8 @@ const config = defineConfig(({ mode, command }) => {
     server: {
       // Force IPv4 — 'localhost' resolves to ::1 (IPv6) on Windows, breaking connectivity
       host: '0.0.0.0',
-      port: 3000,
-      strictPort: false, // allow fallback if 3000 is taken, but log clearly
+      port: 3002,
+      strictPort: false, // allow fallback if 3002 is taken, but log clearly
       allowedHosts: true,
       watch: {
         // Exclude generated route tree — TanStack Router's file watcher