feat(tui): make Context sidebar section collapsible (#11986)

The TUI session sidebar already lets Token Usage, Models, and Terminal
Bench 2.0 collapse on header click (▼/▶), but Context was always
expanded. Match the existing collapsible pattern so users can fold it
away when they want a less cluttered sidebar. When collapsed, the header
shows a one-line summary of percent used and total cost.

.changeset/collapsible-context-sidebar.md

@@ -0,0 +1,5 @@
+---
+"@kilocode/cli": patch
+---
+
+Let the Context section in the TUI session sidebar collapse and expand on header click, matching the existing collapsible pattern used by Token Usage, Models, and Terminal Bench 2.0. When collapsed, the header shows a one-line summary of percent used and total cost.

packages/tui/src/feature-plugins/sidebar/context.tsx

@@ -1,7 +1,7 @@
 import type { AssistantMessage } from "@kilocode/sdk/v2"
 import type { TuiPlugin, TuiPluginApi } from "@kilocode/plugin/tui"
 import type { BuiltinTuiPlugin } from "../builtins"
-import { createMemo } from "solid-js"
+import { createMemo, createSignal, Show } from "solid-js" // kilocode_change
 
 const id = "internal:sidebar-context"
 
@@ -11,6 +11,9 @@ const money = new Intl.NumberFormat("en-US", {
 })
 
 function View(props: { api: TuiPluginApi; session_id: string }) {
+  // kilocode_change start
+  const [open, setOpen] = createSignal(true)
+  // kilocode_change end
   const theme = () => props.api.theme.current
   const msg = createMemo(() => props.api.state.session.messages(props.session_id))
   const session = createMemo(() => props.api.state.session.get(props.session_id))
@@ -44,12 +47,25 @@ function View(props: { api: TuiPluginApi; session_id: string }) {
 
   return (
     <box>
-      <text fg={theme().text}>
-        <b>Context</b>
-      </text>
-      <text fg={theme().textMuted}>{state().tokens.toLocaleString()} tokens</text>
-      <text fg={theme().textMuted}>{state().percent ?? 0}% used</text>
-      <text fg={theme().textMuted}>{money.format(cost())} spent</text>
+      {/* kilocode_change start */}
+      <box flexDirection="row" gap={1} onMouseDown={() => setOpen((x) => !x)}>
+        <text fg={theme().text}>{open() ? "▼" : "▶"}</text>
+        <text fg={theme().text}>
+          <b>Context</b>
+          <Show when={!open()}>
+            <span style={{ fg: theme().textMuted }}>
+              {" "}
+              ({state().percent ?? 0}% · {money.format(cost())})
+            </span>
+          </Show>
+        </text>
+      </box>
+      <Show when={open()}>
+        <text fg={theme().textMuted}>{state().tokens.toLocaleString()} tokens</text>
+        <text fg={theme().textMuted}>{state().percent ?? 0}% used</text>
+        <text fg={theme().textMuted}>{money.format(cost())} spent</text>
+      </Show>
+      {/* kilocode_change end */}
     </box>
   )
 }