diff --git a/package.json b/package.json
index 66d2523652dd..e6d0daa45b62 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "description": "AI-powered development tool",
   "private": true,
   "type": "module",
-  "packageManager": "bun@1.3.5",
+  "packageManager": "bun@1.3.6",
   "scripts": {
     "dev": "bun run --cwd packages/opencode --conditions=browser src/index.ts",
     "typecheck": "bun turbo typecheck",
diff --git a/packages/app/src/components/session-context-usage.tsx b/packages/app/src/components/session-context-usage.tsx
index 53e578214b9d..0fc0fa038a02 100644
--- a/packages/app/src/components/session-context-usage.tsx
+++ b/packages/app/src/components/session-context-usage.tsx
@@ -1,4 +1,4 @@
-import { Match, Show, Switch, createMemo } from "solid-js"
+import { For, Match, Show, Switch, createMemo } from "solid-js"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { ProgressCircle } from "@opencode-ai/ui/progress-circle"
 import { Button } from "@opencode-ai/ui/button"
@@ -12,6 +12,74 @@ interface SessionContextUsageProps {
   variant?: "button" | "indicator"
 }
 
+interface ProviderUsage {
+  provider: string
+  tokens: number
+  cost: number
+  requests: number
+  percentage: number
+}
+
+interface ModelUsage {
+  model: string
+  provider: string
+  input: number
+  output: number
+  cost: number
+  requests: number
+  total: number
+}
+
+function getProviderEmoji(provider: string): string {
+  const p = provider.toLowerCase()
+  if (p.includes("anthropic")) return "🟣"
+  if (p.includes("google")) return "🔵"
+  if (p.includes("openai")) return "🟢"
+  if (p.includes("antigravity")) return "🌌"
+  if (p.includes("xai") || p.includes("grok")) return "⚡"
+  if (p.includes("groq")) return "🟠"
+  if (p.includes("mistral")) return "🔶"
+  if (p.includes("deepseek")) return "🐋"
+  return "⚪"
+}
+
+function shortenModelName(model: string): string {
+  return model
+    .replace("claude-", "")
+    .replace("gpt-", "")
+    .replace("gemini-", "")
+    .replace("-latest", "")
+    .replace("-20250514", "")
+    .replace("-20250219", "")
+    .replace("-20241022", "")
+    .replace("-20240620", "")
+}
+
+function formatCost(n: number): string {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 4,
+    maximumFractionDigits: 4,
+  }).format(n)
+}
+
+function getProviderLabel(provider: string): string {
+  const p = provider.toLowerCase()
+  if (p.includes("anthropic")) return "Anthropic"
+  if (p.includes("google")) return "Google"
+  if (p.includes("openai")) return "OpenAI"
+  if (p.includes("antigravity")) return "Antigravity"
+  if (p.includes("xai") || p.includes("grok")) return "xAI"
+  return provider
+}
+
+function formatTokens(tokens: number): string {
+  if (tokens >= 1_000_000) return `${(tokens / 1_000_000).toFixed(1)}M`
+  if (tokens >= 1_000) return `${(tokens / 1_000).toFixed(1)}K`
+  return tokens.toString()
+}
+
 export function SessionContextUsage(props: SessionContextUsageProps) {
   const sync = useSync()
   const params = useParams()
@@ -30,6 +98,83 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
     }).format(total)
   })
 
+  // Per-provider usage breakdown
+  const providerUsage = createMemo((): ProviderUsage[] => {
+    const byProvider = new Map<string, { tokens: number; cost: number; requests: number }>()
+    
+    for (const msg of messages()) {
+      if (msg.role !== "assistant") continue
+      const assistant = msg as AssistantMessage
+      const providerId = assistant.providerID
+      if (!providerId) continue
+      
+      const tokens = assistant.tokens.input + assistant.tokens.output + 
+                     assistant.tokens.reasoning + assistant.tokens.cache.read + 
+                     assistant.tokens.cache.write
+      
+      const existing = byProvider.get(providerId) || { tokens: 0, cost: 0, requests: 0 }
+      existing.tokens += tokens
+      existing.cost += assistant.cost || 0
+      existing.requests += 1
+      byProvider.set(providerId, existing)
+    }
+    
+    const totalTokens = Array.from(byProvider.values()).reduce((sum, x) => sum + x.tokens, 0)
+    
+    const result: ProviderUsage[] = []
+    for (const [provider, usage] of byProvider) {
+      result.push({
+        provider,
+        tokens: usage.tokens,
+        cost: usage.cost,
+        requests: usage.requests,
+        percentage: totalTokens > 0 ? (usage.tokens / totalTokens) * 100 : 0,
+      })
+    }
+    
+    return result.sort((a, b) => b.tokens - a.tokens)
+  })
+
+  // Per-model usage breakdown
+  const modelUsage = createMemo((): ModelUsage[] => {
+    const byModel = new Map<string, { provider: string; input: number; output: number; cost: number; requests: number }>()
+
+    for (const msg of messages()) {
+      if (msg.role !== "assistant") continue
+      const assistant = msg as AssistantMessage
+      const providerId = assistant.providerID || "unknown"
+      const modelId = assistant.modelID || "unknown"
+      const key = `${providerId}:${modelId}`
+
+      const existing = byModel.get(key) || { provider: providerId, input: 0, output: 0, cost: 0, requests: 0 }
+      existing.input += assistant.tokens.input + assistant.tokens.cache.read
+      existing.output += assistant.tokens.output + assistant.tokens.reasoning
+      existing.cost += assistant.cost || 0
+      existing.requests += 1
+      byModel.set(key, existing)
+    }
+
+    const result: ModelUsage[] = []
+    for (const [key, usage] of byModel) {
+      const modelId = key.split(":").slice(1).join(":")
+      result.push({
+        model: modelId,
+        provider: usage.provider,
+        input: usage.input,
+        output: usage.output,
+        cost: usage.cost,
+        requests: usage.requests,
+        total: usage.input + usage.output,
+      })
+    }
+
+    return result.sort((a, b) => b.total - a.total)
+  })
+
+  const totalTokens = createMemo(() => {
+    return providerUsage().reduce((sum, x) => sum + x.tokens, 0)
+  })
+
   const context = createMemo(() => {
     const last = messages().findLast((x) => {
       if (x.role !== "assistant") return false
@@ -60,27 +205,80 @@ export function SessionContextUsage(props: SessionContextUsageProps) {
   )
 
   const tooltipValue = () => (
-    <div>
+    <div class="min-w-48">
+      {/* Provider Usage Breakdown */}
+      <Show when={providerUsage().length > 0}>
+        <div class="mb-2 pb-2 border-b border-border-base/30">
+          <div class="text-11-medium text-text-invert-base mb-1.5">Provider Usage</div>
+          <For each={providerUsage()}>
+            {(usage) => (
+              <div class="flex items-center justify-between gap-3 py-0.5">
+                <div class="flex items-center gap-1.5">
+                  <span>{getProviderEmoji(usage.provider)}</span>
+                  <span class="text-text-invert-base text-11-regular">{getProviderLabel(usage.provider)}</span>
+                </div>
+                <div class="flex items-center gap-2">
+                  <span class="text-text-invert-strong text-11-medium">{formatTokens(usage.tokens)}</span>
+                  <span class="text-text-invert-weak text-10-regular w-8 text-right">{Math.round(usage.percentage)}%</span>
+                </div>
+              </div>
+            )}
+          </For>
+          <div class="flex items-center justify-between gap-3 pt-1 mt-1 border-t border-border-base/20">
+            <span class="text-text-invert-base text-11-medium">Total</span>
+            <span class="text-text-invert-strong text-11-medium">{formatTokens(totalTokens())}</span>
+          </div>
+        </div>
+      </Show>
+
+      {/* Model Usage Breakdown */}
+      <Show when={modelUsage().length > 0}>
+        <div class="mb-2 pb-2 border-b border-border-base/30">
+          <div class="text-11-medium text-text-invert-base mb-1.5">Model Usage</div>
+          <For each={modelUsage()}>
+            {(usage) => (
+              <div class="py-0.5">
+                <div class="flex items-center justify-between gap-3">
+                  <div class="flex items-center gap-1.5">
+                    <span>{getProviderEmoji(usage.provider)}</span>
+                    <span class="text-text-invert-base text-11-regular truncate max-w-32">{shortenModelName(usage.model)}</span>
+                  </div>
+                  <span class="text-text-invert-weak text-10-regular">{usage.requests}x</span>
+                </div>
+                <div class="flex items-center justify-between gap-3 pl-5">
+                  <span class="text-text-invert-weak text-10-regular">↑{formatTokens(usage.input)} ↓{formatTokens(usage.output)}</span>
+                  <span class="text-text-invert-strong text-10-medium">{formatCost(usage.cost)}</span>
+                </div>
+              </div>
+            )}
+          </For>
+        </div>
+      </Show>
+
+      {/* Context Window Usage */}
       <Show when={context()}>
         {(ctx) => (
-          <>
+          <div class="mb-1">
             <div class="flex items-center gap-2">
               <span class="text-text-invert-strong">{ctx().tokens}</span>
-              <span class="text-text-invert-base">Tokens</span>
+              <span class="text-text-invert-base">Context Tokens</span>
             </div>
             <div class="flex items-center gap-2">
               <span class="text-text-invert-strong">{ctx().percentage ?? 0}%</span>
-              <span class="text-text-invert-base">Usage</span>
+              <span class="text-text-invert-base">Window Usage</span>
             </div>
-          </>
+          </div>
         )}
       </Show>
+      
+      {/* Cost */}
       <div class="flex items-center gap-2">
         <span class="text-text-invert-strong">{cost()}</span>
-        <span class="text-text-invert-base">Cost</span>
+        <span class="text-text-invert-base">Total Cost</span>
       </div>
+      
       <Show when={variant() === "button"}>
-        <div class="text-11-regular text-text-invert-base mt-1">Click to view context</div>
+        <div class="text-11-regular text-text-invert-base mt-2 pt-1 border-t border-border-base/20">Click to view context</div>
       </Show>
     </div>
   )
diff --git a/packages/app/src/components/session/session-header.tsx b/packages/app/src/components/session/session-header.tsx
index 4958ad2c353b..89aec7770db5 100644
--- a/packages/app/src/components/session/session-header.tsx
+++ b/packages/app/src/components/session/session-header.tsx
@@ -19,6 +19,7 @@ import { TextField } from "@opencode-ai/ui/text-field"
 import { DialogSelectServer } from "@/components/dialog-select-server"
 import { SessionLspIndicator } from "@/components/session-lsp-indicator"
 import { SessionMcpIndicator } from "@/components/session-mcp-indicator"
+import { SessionContextUsage } from "@/components/session-context-usage"
 import type { Session } from "@opencode-ai/sdk/v2/client"
 import { same } from "@/utils/same"
 
@@ -161,6 +162,7 @@ export function SessionHeader() {
               <Icon name="server" size="small" class="text-icon-weak" />
               <span class="text-12-regular text-text-weak truncate max-w-[200px]">{server.name}</span>
             </Button>
+            <SessionContextUsage />
             <SessionLspIndicator />
             <SessionMcpIndicator />
           </div>
diff --git a/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx b/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx
index 0561e5eacd49..3c96ae997443 100644
--- a/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx
+++ b/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx
@@ -887,7 +887,7 @@ export function Session() {
       <box flexDirection="row">
         <box flexGrow={1} paddingBottom={1} paddingTop={1} paddingLeft={2} paddingRight={2} gap={1}>
           <Show when={session()}>
-            <Show when={!sidebarVisible()}>
+            <Show when={!sidebarVisible() || !wide()}>
               <Header />
             </Show>
             <scrollbox
@@ -1028,9 +1028,6 @@ export function Session() {
                 sessionID={route.sessionID}
               />
             </box>
-            <Show when={!sidebarVisible()}>
-              <Footer />
-            </Show>
           </Show>
           <Toast />
         </box>
diff --git a/packages/opencode/src/cli/cmd/tui/routes/session/sidebar.tsx b/packages/opencode/src/cli/cmd/tui/routes/session/sidebar.tsx
index c0f4bd74abd8..8c3f7035c88c 100644
--- a/packages/opencode/src/cli/cmd/tui/routes/session/sidebar.tsx
+++ b/packages/opencode/src/cli/cmd/tui/routes/session/sidebar.tsx
@@ -25,6 +25,7 @@ export function Sidebar(props: { sessionID: string; overlay?: boolean }) {
     diff: true,
     todo: true,
     lsp: true,
+    models: true,
   })
 
   // Sort MCP servers alphabetically for consistent display order
@@ -48,6 +49,100 @@ export function Sidebar(props: { sessionID: string; overlay?: boolean }) {
     }).format(total)
   })
 
+  // Provider usage statistics (including Antigravity)
+  const providerUsage = createMemo(() => {
+    const usage: Record<string, { input: number; output: number; cost: number; requests: number }> = {}
+
+    for (const msg of messages()) {
+      if (msg.role !== "assistant") continue
+      const assistant = msg as AssistantMessage
+
+      // Determine provider name
+      let providerName = assistant.providerID || "unknown"
+      const modelID = assistant.modelID || ""
+
+      // Check if it's an Antigravity model
+      if (modelID.includes("antigravity") || providerName.includes("antigravity")) {
+        providerName = "antigravity"
+      } else if (providerName === "google" && modelID.includes("antigravity")) {
+        providerName = "antigravity"
+      }
+
+      if (!usage[providerName]) {
+        usage[providerName] = { input: 0, output: 0, cost: 0, requests: 0 }
+      }
+
+      usage[providerName].input += assistant.tokens.input + assistant.tokens.cache.read
+      usage[providerName].output += assistant.tokens.output + assistant.tokens.reasoning
+      usage[providerName].cost += assistant.cost
+      usage[providerName].requests += 1
+    }
+
+    // Sort by total tokens descending
+    return Object.entries(usage)
+      .map(([provider, stats]) => ({ provider, ...stats, total: stats.input + stats.output }))
+      .sort((a, b) => b.total - a.total)
+  })
+
+  // Model usage statistics (per-model breakdown)
+  const modelUsage = createMemo(() => {
+    const usage: Record<string, { provider: string; input: number; output: number; cost: number; requests: number }> = {}
+
+    for (const msg of messages()) {
+      if (msg.role !== "assistant") continue
+      const assistant = msg as AssistantMessage
+
+      const providerName = assistant.providerID || "unknown"
+      const modelID = assistant.modelID || "unknown"
+      const key = `${providerName}:${modelID}`
+
+      if (!usage[key]) {
+        usage[key] = { provider: providerName, input: 0, output: 0, cost: 0, requests: 0 }
+      }
+
+      usage[key].input += assistant.tokens.input + assistant.tokens.cache.read
+      usage[key].output += assistant.tokens.output + assistant.tokens.reasoning
+      usage[key].cost += assistant.cost
+      usage[key].requests += 1
+    }
+
+    // Sort by total tokens descending
+    return Object.entries(usage)
+      .map(([key, stats]) => {
+        const modelID = key.split(":").slice(1).join(":")
+        return { model: modelID, ...stats, total: stats.input + stats.output }
+      })
+      .sort((a, b) => b.total - a.total)
+  })
+
+  const formatCost = (n: number) => {
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: "USD",
+      minimumFractionDigits: 4,
+      maximumFractionDigits: 4,
+    }).format(n)
+  }
+
+  const shortenModelName = (model: string) => {
+    // Shorten common model names for display
+    return model
+      .replace("claude-", "")
+      .replace("gpt-", "")
+      .replace("gemini-", "")
+      .replace("-latest", "")
+      .replace("-20250514", "")
+      .replace("-20250219", "")
+      .replace("-20241022", "")
+      .replace("-20240620", "")
+  }
+
+  const formatTokens = (n: number) => {
+    if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`
+    if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`
+    return n.toString()
+  }
+
   const context = createMemo(() => {
     const last = messages().findLast((x) => x.role === "assistant" && x.tokens.output > 0) as AssistantMessage
     if (!last) return
@@ -97,6 +192,98 @@ export function Sidebar(props: { sessionID: string; overlay?: boolean }) {
               <text fg={theme.textMuted}>{context()?.percentage ?? 0}% used</text>
               <text fg={theme.textMuted}>{cost()} spent</text>
             </box>
+            <Show when={providerUsage().length > 0}>
+              <box>
+                <text fg={theme.text}>
+                  <b>Provider Usage</b>
+                </text>
+                <For each={providerUsage()}>
+                  {(item) => {
+                    const providerIcon = () => {
+                      switch (item.provider.toLowerCase()) {
+                        case "antigravity": return "🌌"
+                        case "anthropic": return "🟣"
+                        case "google": return "🔵"
+                        case "openai": return "🟢"
+                        default: return "⚪"
+                      }
+                    }
+                    const percentage = () => {
+                      const total = providerUsage().reduce((sum, p) => sum + p.total, 0)
+                      return total > 0 ? Math.round((item.total / total) * 100) : 0
+                    }
+                    return (
+                      <box flexDirection="row" gap={1} justifyContent="space-between">
+                        <text fg={theme.text} wrapMode="char">
+                          {providerIcon()} {item.provider}
+                        </text>
+                        <text fg={theme.textMuted} flexShrink={0}>
+                          {formatTokens(item.total)} ({percentage()}%)
+                        </text>
+                      </box>
+                    )
+                  }}
+                </For>
+              </box>
+            </Show>
+            <Show when={modelUsage().length > 0}>
+              <box>
+                <box
+                  flexDirection="row"
+                  gap={1}
+                  onMouseDown={() => modelUsage().length > 3 && setExpanded("models", !expanded.models)}
+                >
+                  <Show when={modelUsage().length > 3}>
+                    <text fg={theme.text}>{expanded.models ? "▼" : "▶"}</text>
+                  </Show>
+                  <text fg={theme.text}>
+                    <b>Model Usage</b>
+                    <Show when={!expanded.models}>
+                      <span style={{ fg: theme.textMuted }}> ({modelUsage().length} models)</span>
+                    </Show>
+                  </text>
+                </box>
+                <Show when={modelUsage().length <= 3 || expanded.models}>
+                  <For each={modelUsage()}>
+                    {(item) => {
+                      const providerIcon = () => {
+                        switch (item.provider.toLowerCase()) {
+                          case "antigravity": return "🌌"
+                          case "anthropic": return "🟣"
+                          case "google": return "🔵"
+                          case "openai": return "🟢"
+                          case "xai": return "⚡"
+                          case "groq": return "🟠"
+                          case "mistral": return "🔶"
+                          case "deepseek": return "🐋"
+                          default: return "⚪"
+                        }
+                      }
+                      return (
+                        <box>
+                          <box flexDirection="row" gap={1} justifyContent="space-between">
+                            <text fg={theme.text} wrapMode="char">
+                              {providerIcon()} {shortenModelName(item.model)}
+                            </text>
+                            <text fg={theme.textMuted} flexShrink={0}>
+                              {item.requests}x
+                            </text>
+                          </box>
+                          <box flexDirection="row" gap={1} justifyContent="space-between" paddingLeft={2}>
+                            <text fg={theme.textMuted}>
+                              ↑{formatTokens(item.input)} ↓{formatTokens(item.output)}
+                            </text>
+                            <text fg={theme.textMuted} flexShrink={0}>
+                              {formatCost(item.cost)}
+                            </text>
+                          </box>
+                        </box>
+                      )
+                    }}
+                  </For>
+                </Show>
+              </box>
+            </Show>
             <Show when={mcpEntries().length > 0}>
               <box>
                 <box