fix(tui): move the tool approval/denial note back onto the header line

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

@@ -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>
   )
 }

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>