From 0a5807b1b89f98b745c199de557d85a2f99f0ee9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Catriel=20M=C3=BCller?= <catrielmuller@gmail.com>
Date: Mon, 11 May 2026 09:50:01 -0300
Subject: [PATCH] fix(cli): improve model info panel scrollbar padding and
 capabilities display

---
 .../kilocode/components/model-info-panel.tsx  | 25 ++++++++++++++-----
 .../kilocode/model-info-panel-utils.test.ts   |  4 +--
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/packages/opencode/src/kilocode/components/model-info-panel.tsx b/packages/opencode/src/kilocode/components/model-info-panel.tsx
index b726d606433..c228eb7e1f2 100644
--- a/packages/opencode/src/kilocode/components/model-info-panel.tsx
+++ b/packages/opencode/src/kilocode/components/model-info-panel.tsx
@@ -61,6 +61,7 @@ export function ModelInfoPanel(props: Props) {
     >
       <scrollbox
         maxHeight={maxHeight()}
+        paddingRight={1}
       >
         <box>
           <text fg={theme.text} attributes={TextAttributes.BOLD}>
@@ -114,22 +115,34 @@ export function ModelInfoPanel(props: Props) {
           </box>
         </Show>
         <Show when={caps()?.reasoning || inputLine() || outputLine()}>
-          <text fg={theme.textMuted}></text>
           <box flexDirection="column">
             <Show when={caps()?.reasoning}>
-              <text fg={theme.textMuted}>  [Reasoning]</text>
+              <box flexDirection="row" justifyContent="space-between">
+                <text fg={theme.textMuted}>Reasoning</text>
+                <text fg={theme.text}>Yes</text>
+              </box>
             </Show>
             <Show when={inputLine()}>
-              {(line) => <text fg={theme.textMuted}>  {line()}</text>}
+              {(line) => (
+                <box flexDirection="row" justifyContent="space-between">
+                  <text fg={theme.textMuted}>Caps</text>
+                  <text fg={theme.text}>{line().replace(/^In:\s*/, "")}</text>
+                </box>
+              )}
             </Show>
             <Show when={outputLine()}>
-              {(line) => <text fg={theme.textMuted}>  {line()}</text>}
+              {(line) => (
+                <box flexDirection="row" justifyContent="space-between">
+                  <text fg={theme.textMuted}>Out</text>
+                  <text fg={theme.text}>{line().replace(/^Out:\s*/, "")}</text>
+                </box>
+              )}
             </Show>
           </box>
-          <text fg={theme.textMuted}></text>
         </Show>
         <Show when={desc()}>
-          <text fg={theme.textMuted} width={28}>
+          <text fg={theme.textMuted}>{" "}</text>
+          <text fg={theme.textMuted} width={23}>
             {desc()}
           </text>
         </Show>
diff --git a/packages/opencode/test/kilocode/model-info-panel-utils.test.ts b/packages/opencode/test/kilocode/model-info-panel-utils.test.ts
index 07159e5bb22..8a07fcb2291 100644
--- a/packages/opencode/test/kilocode/model-info-panel-utils.test.ts
+++ b/packages/opencode/test/kilocode/model-info-panel-utils.test.ts
@@ -22,8 +22,8 @@ describe("model info panel price formatting", () => {
     expect(fmtCachedPrice({ input: 0, output: 0, cache: { read: 0, write: 0 } })).toBe("Free")
   })
 
-  test("fmtCachedPrice returns N/A without cache read", () => {
-    expect(fmtCachedPrice({ input: 3, output: 15, cache: { read: 0, write: 0 } })).toBe("N/A")
+  test("fmtCachedPrice returns null without cache read", () => {
+    expect(fmtCachedPrice({ input: 3, output: 15, cache: { read: 0, write: 0 } })).toBeNull()
   })
 
   test("avgPrice uses cache weighted formula when cache read exists", () => {