feat(app): context window window

Author: adamdotdevin

packages/app/src/components/session-context-usage.tsx

@@ -1,13 +1,25 @@
-import { createMemo, Show } from "solid-js"
+import { Match, Show, Switch, createMemo } from "solid-js"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { ProgressCircle } from "@opencode-ai/ui/progress-circle"
-import { useSync } from "@/context/sync"
+import { Button } from "@opencode-ai/ui/button"
 import { useParams } from "@solidjs/router"
 import { AssistantMessage } from "@opencode-ai/sdk/v2/client"
 
-export function SessionContextUsage() {
+import { useLayout } from "@/context/layout"
+import { useSync } from "@/context/sync"
+
+interface SessionContextUsageProps {
+  variant?: "button" | "indicator"
+}
+
+export function SessionContextUsage(props: SessionContextUsageProps) {
   const sync = useSync()
   const params = useParams()
+  const layout = useLayout()
+
+  const variant = createMemo(() => props.variant ?? "button")
+  const sessionKey = createMemo(() => `${params.dir}${params.id ? "/" + params.id : ""}`)
+  const tabs = createMemo(() => layout.tabs(sessionKey()))
   const messages = createMemo(() => (params.id ? (sync.data.message[params.id] ?? []) : []))
 
   const cost = createMemo(() => {
@@ -19,7 +31,11 @@ export function SessionContextUsage() {
   })
 
   const context = createMemo(() => {
-    const last = messages().findLast((x) => x.role === "assistant" && x.tokens.output > 0) as AssistantMessage
+    const last = messages().findLast((x) => {
+      if (x.role !== "assistant") return false
+      const total = x.tokens.input + x.tokens.output + x.tokens.reasoning + x.tokens.cache.read + x.tokens.cache.write
+      return total > 0
+    }) as AssistantMessage
     if (!last) return
     const total =
       last.tokens.input + last.tokens.output + last.tokens.reasoning + last.tokens.cache.read + last.tokens.cache.write
@@ -30,33 +46,57 @@ export function SessionContextUsage() {
     }
   })
 
-  return (
-    <Show when={context?.()}>
-      {(ctx) => (
-        <Tooltip
-          value={
-            <div class="">
-              <div class="flex items-center gap-2">
-                <span class="text-text-invert-strong">{ctx().tokens}</span>
-                <span class="text-text-invert-base">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>
-              </div>
-              <div class="flex items-center gap-2">
-                <span class="text-text-invert-strong">{cost()}</span>
-                <span class="text-text-invert-base">Cost</span>
-              </div>
+  const openContext = () => {
+    if (!params.id) return
+    layout.review.open()
+    tabs().open("context")
+    tabs().setActive("context")
+  }
+
+  const circle = () => (
+    <div class="p-1">
+      <ProgressCircle size={16} strokeWidth={2} percentage={context()?.percentage ?? 0} />
+    </div>
+  )
+
+  const tooltipValue = () => (
+    <div>
+      <Show when={context()}>
+        {(ctx) => (
+          <>
+            <div class="flex items-center gap-2">
+              <span class="text-text-invert-strong">{ctx().tokens}</span>
+              <span class="text-text-invert-base">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>
             </div>
-          }
-          placement="top"
-        >
-          <div class="p-1">
-            <ProgressCircle size={16} strokeWidth={2} percentage={ctx().percentage ?? 0} />
-          </div>
-        </Tooltip>
-      )}
+          </>
+        )}
+      </Show>
+      <div class="flex items-center gap-2">
+        <span class="text-text-invert-strong">{cost()}</span>
+        <span class="text-text-invert-base">Cost</span>
+      </div>
+      <Show when={variant() === "button"}>
+        <div class="text-11-regular text-text-invert-base mt-1">Click to view context</div>
+      </Show>
+    </div>
+  )
+
+  return (
+    <Show when={params.id}>
+      <Tooltip value={tooltipValue()} placement="top">
+        <Switch>
+          <Match when={variant() === "indicator"}>{circle()}</Match>
+          <Match when={true}>
+            <Button type="button" variant="ghost" class="size-6" onClick={openContext}>
+              {circle()}
+            </Button>
+          </Match>
+        </Switch>
+      </Tooltip>
     </Show>
   )
 }

packages/app/src/context/layout.tsx

@@ -209,38 +209,58 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
           },
           async open(tab: string) {
             const current = store.sessionTabs[sessionKey] ?? { all: [] }
-            if (tab !== "review") {
-              if (!current.all.includes(tab)) {
-                if (!store.sessionTabs[sessionKey]) {
-                  setStore("sessionTabs", sessionKey, { all: [tab], active: tab })
-                } else {
-                  setStore("sessionTabs", sessionKey, "all", [...current.all, tab])
-                  setStore("sessionTabs", sessionKey, "active", tab)
-                }
+
+            if (tab === "review") {
+              if (!store.sessionTabs[sessionKey]) {
+                setStore("sessionTabs", sessionKey, { all: [], active: tab })
                 return
               }
+              setStore("sessionTabs", sessionKey, "active", tab)
+              return
             }
-            if (!store.sessionTabs[sessionKey]) {
-              setStore("sessionTabs", sessionKey, { all: [], active: tab })
-            } else {
+
+            if (tab === "context") {
+              const all = [tab, ...current.all.filter((x) => x !== tab)]
+              if (!store.sessionTabs[sessionKey]) {
+                setStore("sessionTabs", sessionKey, { all, active: tab })
+                return
+              }
+              setStore("sessionTabs", sessionKey, "all", all)
               setStore("sessionTabs", sessionKey, "active", tab)
+              return
             }
+
+            if (!current.all.includes(tab)) {
+              if (!store.sessionTabs[sessionKey]) {
+                setStore("sessionTabs", sessionKey, { all: [tab], active: tab })
+                return
+              }
+              setStore("sessionTabs", sessionKey, "all", [...current.all, tab])
+              setStore("sessionTabs", sessionKey, "active", tab)
+              return
+            }
+
+            if (!store.sessionTabs[sessionKey]) {
+              setStore("sessionTabs", sessionKey, { all: current.all, active: tab })
+              return
+            }
+            setStore("sessionTabs", sessionKey, "active", tab)
           },
           close(tab: string) {
             const current = store.sessionTabs[sessionKey]
             if (!current) return
+
+            const all = current.all.filter((x) => x !== tab)
             batch(() => {
-              setStore(
-                "sessionTabs",
-                sessionKey,
-                "all",
-                current.all.filter((x) => x !== tab),
-              )
-              if (current.active === tab) {
-                const index = current.all.findIndex((f) => f === tab)
-                const previous = current.all[Math.max(0, index - 1)]
-                setStore("sessionTabs", sessionKey, "active", previous)
+              setStore("sessionTabs", sessionKey, "all", all)
+              if (current.active !== tab) return
+
+              const index = current.all.findIndex((f) => f === tab)
+              if (index <= 0) {
+                setStore("sessionTabs", sessionKey, "active", undefined)
+                return
               }
+              setStore("sessionTabs", sessionKey, "active", current.all[index - 1])
             })
           },
           move(tab: string, to: number) {