From abe17f1f9d0d20d25aede46b6c2299865d14a40b Mon Sep 17 00:00:00 2001
From: Bruno Agatao <bagatao@anaconda.com>
Date: Fri, 31 Jul 2026 16:31:49 +0200
Subject: [PATCH] fix(tui): move the tool approval/denial note back onto the
 header line
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The note was appended after the tool's own output (or, in an interim
revert, on its own line above it), which either looked like part of
the output or was visually noisier than desired. Render it inline on
the header/title line instead, matching the existing RoutedModelMeta
badge convention (' · note'), so it reads unambiguously as metadata
about the call rather than output.
---
 packages/tui/src/kilocode/tool-approval.tsx | 12 +++++++-----
 packages/tui/src/routes/session/index.tsx   | 14 +++++---------
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/packages/tui/src/kilocode/tool-approval.tsx b/packages/tui/src/kilocode/tool-approval.tsx
index fefc09419b..36719d83dc 100644
--- a/packages/tui/src/kilocode/tool-approval.tsx
+++ b/packages/tui/src/kilocode/tool-approval.tsx
@@ -52,13 +52,15 @@ export function describeApproval(metadata: Record<string, unknown> | undefined):
   return source ? `${decision} ${source}${ruleText}` : decision
 }
 
-/** The muted "why" row rendered under a completed/failed inline or block tool. */
-export function ApprovalNote(props: { note: string | undefined; color?: RGBA; paddingLeft: number }) {
+/**
+ * The muted "why" annotation appended inline after a tool's title/summary text, matching the
+ * `RoutedModelMeta.Badge` convention. Rendered on the header line (not after the tool's own
+ * output) so it reads as metadata about the call rather than part of the output itself.
+ */
+export function ApprovalBadge(props: { note: string | undefined; color?: RGBA }) {
   return (
     <Show when={props.note}>
-      <box paddingLeft={props.paddingLeft}>
-        <text fg={props.color}>{props.note}</text>
-      </box>
+      <span style={{ fg: props.color }}> · {props.note}</span>
     </Show>
   )
 }
diff --git a/packages/tui/src/routes/session/index.tsx b/packages/tui/src/routes/session/index.tsx
index 1b41ba61d3..7cc3f9150f 100644
--- a/packages/tui/src/routes/session/index.tsx
+++ b/packages/tui/src/routes/session/index.tsx
@@ -63,7 +63,7 @@ import { Toast, useToast } from "../../ui/toast"
 import { useKV } from "../../context/kv.tsx"
 import stripAnsi from "strip-ansi"
 import { usePromptRef } from "../../context/prompt"
-import { ApprovalNote, describeApproval, stateMetadata } from "../../kilocode/tool-approval" // kilocode_change
+import { ApprovalBadge, describeApproval, stateMetadata } from "../../kilocode/tool-approval" // kilocode_change
 import { useEpilogue } from "../../context/epilogue"
 import { normalizePath } from "../../util/path"
 import { PermissionPrompt } from "./permission"
@@ -2317,6 +2317,8 @@ export function InlineToolRow(props: {
                 attributes={props.denied ? TextAttributes.STRIKETHROUGH : undefined}
               >
                 {props.failed && !props.complete ? (props.failure ?? props.children) : props.children}
+                {/* kilocode_change - explain why the call was auto-approved or denied, inline on the header */}
+                <ApprovalBadge note={props.note} color={props.noteColor} />
               </text>
             </box>
           </Show>
@@ -2327,12 +2329,6 @@ export function InlineToolRow(props: {
           <text fg={props.errorColor}>{props.error}</text>
         </box>
       </Show>
-      {/* kilocode_change - explain why the call was auto-approved or denied */}
-      <ApprovalNote
-        note={props.note && (props.complete || props.failed) ? props.note : undefined}
-        color={props.noteColor}
-        paddingLeft={INLINE_TOOL_ICON_WIDTH}
-      />
     </box>
   )
 }
@@ -2377,6 +2373,8 @@ function BlockTool(props: {
             {props.title}
             {/* kilocode_change start */}
             <RoutedModelMeta.View id={props.part?.id} />
+            {/* explain why the call was auto-approved or denied, inline on the title */}
+            <ApprovalBadge note={approvalNote()} color={theme.textMuted} />
             {/* kilocode_change end */}
           </text>
         }
@@ -2384,8 +2382,6 @@ function BlockTool(props: {
         <Spinner color={theme.textMuted}>{props.title.replace(/^# /, "")}</Spinner>
       </Show>
       {props.children}
-      {/* kilocode_change - explain why the call was auto-approved or denied */}
-      <ApprovalNote note={approvalNote()} color={theme.textMuted} paddingLeft={3} />
       <Show when={error()}>
         <text fg={theme.error}>{error()}</text>
       </Show>