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.

1 files changed, 17 insertions, 14 deletions

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>