From bd3d1413fdd1ae7708191c25c26bfb2cff347fd7 Mon Sep 17 00:00:00 2001
From: David Hill <iamdavidhill@gmail.com>
Date: Tue, 17 Feb 2026 17:21:33 +0000
Subject: tui: add warning icon to permission requests for better visibility

Adds a visual warning indicator to permission request dialogs to make

them more noticeable and help users understand when the agent needs

approval to use tools. Also improves the layout with consistent

spacing and icon alignment.
---
 .../app/src/pages/session/session-prompt-dock.tsx  | 31 ++++++++++++----------
 1 file changed, 17 insertions(+), 14 deletions(-)

(limited to 'packages/app/src')

diff --git a/packages/app/src/pages/session/session-prompt-dock.tsx b/packages/app/src/pages/session/session-prompt-dock.tsx
index 5728817fb..83fc615b5 100644
--- a/packages/app/src/pages/session/session-prompt-dock.tsx
+++ b/packages/app/src/pages/session/session-prompt-dock.tsx
@@ -2,6 +2,7 @@ import { For, Show, createEffect, createMemo, createSignal, on, onCleanup } from
 import type { QuestionRequest, Todo } from "@opencode-ai/sdk/v2"
 import { Button } from "@opencode-ai/ui/button"
 import { DockPrompt } from "@opencode-ai/ui/dock-prompt"
+import { Icon } from "@opencode-ai/ui/icon"
 import { PromptInput } from "@/components/prompt-input"
 import { QuestionDock } from "@/components/question-dock"
 import { SessionTodoDock } from "@/components/session-todo-dock"
@@ -124,13 +125,6 @@ export function SessionPromptDock(props: {
 
         <Show when={props.permissionRequest()} keyed>
           {(perm) => {
-            const toolTitle = () => {
-              const key = `settings.permissions.tool.${perm.permission}.title`
-              const value = props.t(key)
-              if (value === key) return perm.permission
-              return value
-            }
-
             const toolDescription = () => {
               const key = `settings.permissions.tool.${perm.permission}.description`
               const value = props.t(key)
@@ -143,9 +137,12 @@ export function SessionPromptDock(props: {
                 <DockPrompt
                   kind="permission"
                   header={
-                    <>
+                    <div data-slot="permission-row" data-variant="header">
+                      <span data-slot="permission-icon">
+                        <Icon name="warning" size="normal" />
+                      </span>
                       <div data-slot="permission-header-title">{props.t("notification.permission.title")}</div>
-                    </>
+                    </div>
                   }
                   footer={
                     <>
@@ -180,14 +177,20 @@ export function SessionPromptDock(props: {
                   }
                 >
                   <Show when={toolDescription()}>
-                    <div data-slot="permission-hint">{toolDescription()}</div>
+                    <div data-slot="permission-row">
+                      <span data-slot="permission-spacer" aria-hidden="true" />
+                      <div data-slot="permission-hint">{toolDescription()}</div>
+                    </div>
                   </Show>
 
                   <Show when={perm.patterns.length > 0}>
-                    <div data-slot="permission-patterns">
-                      <For each={perm.patterns}>
-                        {(pattern) => <code class="text-12-regular text-text-base break-all">{pattern}</code>}
-                      </For>
+                    <div data-slot="permission-row">
+                      <span data-slot="permission-spacer" aria-hidden="true" />
+                      <div data-slot="permission-patterns">
+                        <For each={perm.patterns}>
+                          {(pattern) => <code class="text-12-regular text-text-base break-all">{pattern}</code>}
+                        </For>
+                      </div>
                     </div>
                   </Show>
                 </DockPrompt>
-- 
cgit v1.2.3