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.

Author: iamdavidhill

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>

packages/ui/src/components/icon.tsx

@@ -78,6 +78,7 @@ const icons = {
   keyboard: `<path d="M5.125 7.375V4.375H14.875V2.875M8.3125 13.9375H11.6875M8.125 13.9375H11.875M2.125 7.375H17.875V17.125H2.125V7.375ZM5.5 10.375H5.125V10.75H5.5V10.375ZM8.5 10.375H8.125V10.75H8.5V10.375ZM11.875 10.375H11.5V10.75H11.875V10.375ZM14.875 10.375H14.5V10.75H14.875V10.375ZM14.875 13.75H14.5V14.125H14.875V13.75ZM5.5 13.75H5.125V14.125H5.5V13.75Z" stroke="currentColor" stroke-linecap="square"/>`,
   selector: `<path d="M6.66626 12.5033L9.99959 15.8366L13.3329 12.5033M6.66626 7.50326L9.99959 4.16992L13.3329 7.50326" stroke="currentColor" stroke-linecap="square"/>`,
   "arrow-down-to-line": `<path d="M15.2083 11.6667L10 16.875L4.79167 11.6667M10 16.25V3.125" stroke="currentColor" stroke-width="1.25" stroke-linecap="square"/>`,
+  warning: `<path d="M10 7.91667V11.6667M10 13.7417V13.75M10 2.5L1.875 16.25H18.125L10 2.5Z" stroke="currentColor" stroke-linecap="square"/>`,
   link: `<path d="M2.08334 12.0833L1.72979 11.7298L1.37624 12.0833L1.72979 12.4369L2.08334 12.0833ZM7.91668 17.9167L7.56312 18.2702L7.91668 18.6238L8.27023 18.2702L7.91668 17.9167ZM17.9167 7.91666L18.2702 8.27022L18.6238 7.91666L18.2702 7.56311L17.9167 7.91666ZM12.0833 2.08333L12.4369 1.72977L12.0833 1.37622L11.7298 1.72977L12.0833 2.08333ZM8.39646 5.06311L8.0429 5.41666L8.75001 6.12377L9.10356 5.77021L8.75001 5.41666L8.39646 5.06311ZM5.77023 9.10355L6.12378 8.74999L5.41668 8.04289L5.06312 8.39644L5.41668 8.74999L5.77023 9.10355ZM14.2298 10.8964L13.8762 11.25L14.5833 11.9571L14.9369 11.6035L14.5833 11.25L14.2298 10.8964ZM11.6036 14.9369L11.9571 14.5833L11.25 13.8762L10.8965 14.2298L11.25 14.5833L11.6036 14.9369ZM7.14646 12.1464L6.7929 12.5L7.50001 13.2071L7.85356 12.8535L7.50001 12.5L7.14646 12.1464ZM12.8536 7.85355L13.2071 7.49999L12.5 6.79289L12.1465 7.14644L12.5 7.49999L12.8536 7.85355ZM2.08334 12.0833L1.72979 12.4369L7.56312 18.2702L7.91668 17.9167L8.27023 17.5631L2.4369 11.7298L2.08334 12.0833ZM17.9167 7.91666L18.2702 7.56311L12.4369 1.72977L12.0833 2.08333L11.7298 2.43688L17.5631 8.27022L17.9167 7.91666ZM12.0833 2.08333L11.7298 1.72977L8.39646 5.06311L8.75001 5.41666L9.10356 5.77021L12.4369 2.43688L12.0833 2.08333ZM5.41668 8.74999L5.06312 8.39644L1.72979 11.7298L2.08334 12.0833L2.4369 12.4369L5.77023 9.10355L5.41668 8.74999ZM14.5833 11.25L14.9369 11.6035L18.2702 8.27022L17.9167 7.91666L17.5631 7.56311L14.2298 10.8964L14.5833 11.25ZM7.91668 17.9167L8.27023 18.2702L11.6036 14.9369L11.25 14.5833L10.8965 14.2298L7.56312 17.5631L7.91668 17.9167ZM7.50001 12.5L7.85356 12.8535L12.8536 7.85355L12.5 7.49999L12.1465 7.14644L7.14646 12.1464L7.50001 12.5Z" fill="currentColor"/>`,
   providers: `<path d="M10.0001 4.37562V2.875M13 4.37793V2.87793M7.00014 4.37793V2.875M10 17.1279V15.6279M13 17.1279V15.6279M7 17.1279V15.6279M15.625 13.0029H17.125M15.625 7.00293H17.125M15.625 10.0029H17.125M2.875 10.0029H4.375M2.875 13.0029H4.375M2.875 7.00293H4.375M4.375 4.37793H15.625V15.6279H4.375V4.37793ZM12.6241 10.0022C12.6241 11.4519 11.4488 12.6272 9.99908 12.6272C8.54934 12.6272 7.37408 11.4519 7.37408 10.0022C7.37408 8.55245 8.54934 7.3772 9.99908 7.3772C11.4488 7.3772 12.6241 8.55245 12.6241 10.0022Z" stroke="currentColor" stroke-linecap="square"/>`,
   models: `<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 10C12.2917 10 10 12.2917 10 17.5C10 12.2917 7.70833 10 2.5 10C7.70833 10 10 7.70833 10 2.5C10 7.70833 12.2917 10 17.5 10Z" stroke="currentColor"/>`,

packages/ui/src/components/message-part.css

@@ -767,7 +767,7 @@
     gap: 16px;
     flex: 1;
     min-height: 0;
-    padding: 8px 8px 0;
+    padding: 12px 12px 0;
     background-color: var(--surface-raised-stronger-non-alpha);
     border-radius: 12px;
     box-shadow: var(--shadow-xs-border);
@@ -777,11 +777,28 @@
   }
 
   [data-slot="permission-header"] {
-    display: flex;
+    padding: 0;
+  }
+
+  [data-slot="permission-row"] {
+    display: grid;
+    grid-template-columns: 20px 1fr;
+    column-gap: 8px;
+    align-items: start;
+  }
+
+  [data-slot="permission-row"][data-variant="header"] {
     align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-    padding: 0 10px;
+  }
+
+  [data-slot="permission-icon"] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  [data-slot="permission-icon"] [data-component="icon"] {
+    color: var(--icon-warning-base);
   }
 
   [data-slot="permission-header-title"] {
@@ -807,7 +824,7 @@
     font-weight: var(--font-weight-regular);
     line-height: var(--line-height-large);
     color: var(--text-weak);
-    padding: 0 10px;
+    padding: 0;
   }
 
   [data-slot="permission-patterns"] {
@@ -816,7 +833,7 @@
     gap: 6px;
     margin-top: 8px;
     margin-bottom: 16px;
-    padding: 1px 10px 8px;
+    padding: 1px 0 8px;
     flex: 1;
     min-height: 0;
     overflow-y: auto;

packages/ui/src/styles/theme.css

@@ -253,7 +253,7 @@
   --icon-success-base: var(--apple-light-7);
   --icon-success-hover: var(--apple-light-8);
   --icon-success-active: var(--apple-light-11);
-  --icon-warning-base: var(--amber-light-7);
+  --icon-warning-base: var(--amber-light-9);
   --icon-warning-hover: var(--amber-light-8);
   --icon-warning-active: var(--amber-light-11);
   --icon-critical-base: var(--ember-light-10);