From b6b55d1a3454bc057ddd24144b0f8d21f870ee55 Mon Sep 17 00:00:00 2001
From: Jean du Plessis <jeandp@gmail.com>
Date: Fri, 10 Jul 2026 17:41:45 +0200
Subject: [PATCH 1/2] feat(cli): improve model usage layout

---
 .changeset/clear-model-usage.md               |   5 +
 .../src/kilocode/plugins/sidebar-usage.tsx    | 119 ++++++++++++------
 2 files changed, 88 insertions(+), 36 deletions(-)
 create mode 100644 .changeset/clear-model-usage.md

diff --git a/.changeset/clear-model-usage.md b/.changeset/clear-model-usage.md
new file mode 100644
index 000000000000..aa29fe3bcdcf
--- /dev/null
+++ b/.changeset/clear-model-usage.md
@@ -0,0 +1,5 @@
+---
+"@kilocode/cli": patch
+---
+
+Make session model usage easier to scan with collapsible summary rows and aligned steps and cost columns.
diff --git a/packages/opencode/src/kilocode/plugins/sidebar-usage.tsx b/packages/opencode/src/kilocode/plugins/sidebar-usage.tsx
index e9a57dc4f2b7..53a6e966d135 100644
--- a/packages/opencode/src/kilocode/plugins/sidebar-usage.tsx
+++ b/packages/opencode/src/kilocode/plugins/sidebar-usage.tsx
@@ -1,7 +1,8 @@
 import type { TuiPlugin, TuiPluginApi, TuiPluginModule } from "@kilocode/plugin/tui"
-import { createMemo, createResource, For, onCleanup, onMount, Show } from "solid-js"
+import { createMemo, createResource, createSignal, For, onCleanup, onMount, Show } from "solid-js"
 import { useLocal } from "@tui/context/local"
 import * as Model from "@tui/util/model"
+import { Locale } from "@/util/locale"
 import { RoutedModelMeta } from "@/kilocode/cli/cmd/tui/routes/session/routed-model-meta"
 import { fmtAttemptCost, fmtScore } from "@/kilocode/components/model-info-panel-utils"
 import {
@@ -18,6 +19,8 @@ import {
 const id = "internal:kilo-sidebar-usage"
 
 function View(props: { api: TuiPluginApi; session_id: string }) {
+  const [modelsOpen, setModelsOpen] = createSignal(true)
+  const [expanded, setExpanded] = createSignal(new Set<string>())
   const theme = () => props.api.theme.current
   const local = useLocal()
   const [result, { refetch }] = createResource(
@@ -44,6 +47,13 @@ function View(props: { api: TuiPluginApi; session_id: string }) {
       <text fg={theme().textMuted}>{props.value}</text>
     </box>
   )
+  const toggle = (key: string) =>
+    setExpanded((current) => {
+      const next = new Set(current)
+      if (next.has(key)) next.delete(key)
+      else next.add(key)
+      return next
+    })
 
   onMount(() => {
     const refresh = () => void refetch()
@@ -109,43 +119,80 @@ function View(props: { api: TuiPluginApi; session_id: string }) {
       <Show when={usage()}>
         {(data) => (
           <box>
-            <text fg={theme().text}>
-              <b>Models ({data().models.length})</b>
-            </text>
-            <Show when={data().models.length > 0} fallback={<text fg={theme().textMuted}>No model usage yet</text>}>
-              <box gap={1}>
-                <For each={groups()}>
-                  {(group) => (
-                    <box>
-                      <text fg={theme().text}>
-                        <b>{group.providerName}</b>
-                      </text>
-                      <box gap={1} paddingLeft={1}>
-                        <For each={group.models}>
-                          {(model) => (
-                            <box>
-                              <text fg={theme().text} wrapMode="char">
-                                <b>{RoutedModelMeta.label(providers(), model)}</b>
-                              </text>
-                              <text fg={theme().textMuted} wrapMode="word">
-                                Steps {formatCount(model.steps)} | Cost {formatCost(model.cost)}
-                              </text>
-                              <text fg={theme().textMuted} wrapMode="word">
-                                In {formatCount(model.tokens.input)} | Out {formatCount(model.tokens.output)} | Reason{" "}
-                                {formatCount(model.tokens.reasoning)}
-                              </text>
-                              <text fg={theme().textMuted} wrapMode="word">
-                                Cache R {formatCount(model.tokens.cache.read)} | W{" "}
-                                {formatCount(model.tokens.cache.write)} | Rate {formatRate(model.tokens)}
-                              </text>
+            <box flexDirection="row" gap={1} onMouseDown={() => setModelsOpen((open) => !open)}>
+              <text fg={theme().text}>{modelsOpen() ? "▼" : "▶"}</text>
+              <text fg={theme().text}>
+                <b>Models ({data().models.length})</b>
+              </text>
+            </box>
+            <Show when={modelsOpen()}>
+              <Show when={data().models.length > 0} fallback={<text fg={theme().textMuted}>No model usage yet</text>}>
+                <box gap={1}>
+                  <For each={groups()}>
+                    {(group) => (
+                      <box>
+                        <text fg={theme().text}>
+                          <b>{group.providerName}</b>
+                        </text>
+                        <box>
+                          <box flexDirection="row" gap={1}>
+                            <box width={1} flexShrink={0} />
+                            <text fg={theme().textMuted} flexGrow={1} minWidth={0} wrapMode="none">
+                              Model
+                            </text>
+                            <box width={5} flexShrink={0} justifyContent="flex-end">
+                              <text fg={theme().textMuted}>Steps</text>
+                            </box>
+                            <box width={9} flexShrink={0} justifyContent="flex-end">
+                              <text fg={theme().textMuted}>Cost</text>
                             </box>
-                          )}
-                        </For>
+                          </box>
+                          <For each={group.models}>
+                            {(model) => {
+                              const key = `${props.session_id}/${model.providerID}/${model.modelID}`
+                              return (
+                                <box>
+                                  <box flexDirection="row" gap={1} onMouseDown={() => toggle(key)}>
+                                    <text fg={theme().text} flexShrink={0}>
+                                      {expanded().has(key) ? "▼" : "▶"}
+                                    </text>
+                                    <box flexGrow={1} minWidth={0} overflow="hidden">
+                                      <text fg={theme().text} wrapMode="none">
+                                        <b>
+                                          {Locale.truncate(
+                                            RoutedModelMeta.label(providers(), model) ?? model.modelID,
+                                            19,
+                                          )}
+                                        </b>
+                                      </text>
+                                    </box>
+                                    <box width={5} flexShrink={0} justifyContent="flex-end">
+                                      <text fg={theme().textMuted}>{formatCount(model.steps)}</text>
+                                    </box>
+                                    <box width={9} flexShrink={0} justifyContent="flex-end">
+                                      <text fg={theme().textMuted}>{formatCost(model.cost)}</text>
+                                    </box>
+                                  </box>
+                                  <Show when={expanded().has(key)}>
+                                    <box paddingLeft={2}>
+                                      <Row label="Input" value={formatCount(model.tokens.input)} />
+                                      <Row label="Output" value={formatCount(model.tokens.output)} />
+                                      <Row label="Reasoning" value={formatCount(model.tokens.reasoning)} />
+                                      <Row label="Cache read" value={formatCount(model.tokens.cache.read)} />
+                                      <Row label="Cache write" value={formatCount(model.tokens.cache.write)} />
+                                      <Row label="Cache rate" value={formatRate(model.tokens)} />
+                                    </box>
+                                  </Show>
+                                </box>
+                              )
+                            }}
+                          </For>
+                        </box>
                       </box>
-                    </box>
-                  )}
-                </For>
-              </box>
+                    )}
+                  </For>
+                </box>
+              </Show>
             </Show>
           </box>
         )}

From 1fd73ba2c00da3ec38a40f2db8893bc1d31550ce Mon Sep 17 00:00:00 2001
From: Jean du Plessis <jeandp@gmail.com>
Date: Fri, 10 Jul 2026 17:58:53 +0200
Subject: [PATCH 2/2] fix(cli): space model usage sections

---
 packages/opencode/src/kilocode/plugins/sidebar-usage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/opencode/src/kilocode/plugins/sidebar-usage.tsx b/packages/opencode/src/kilocode/plugins/sidebar-usage.tsx
index 53a6e966d135..296b9444d660 100644
--- a/packages/opencode/src/kilocode/plugins/sidebar-usage.tsx
+++ b/packages/opencode/src/kilocode/plugins/sidebar-usage.tsx
@@ -127,10 +127,10 @@ function View(props: { api: TuiPluginApi; session_id: string }) {
             </box>
             <Show when={modelsOpen()}>
               <Show when={data().models.length > 0} fallback={<text fg={theme().textMuted}>No model usage yet</text>}>
-                <box gap={1}>
+                <box gap={1} paddingTop={1}>
                   <For each={groups()}>
                     {(group) => (
-                      <box>
+                      <box gap={1}>
                         <text fg={theme().text}>
                           <b>{group.providerName}</b>
                         </text>