From bd3d1413fdd1ae7708191c25c26bfb2cff347fd7 Mon Sep 17 00:00:00 2001 From: David Hill Date: Tue, 17 Feb 2026 17:21:33 +0000 Subject: [PATCH] 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. --- .../src/pages/session/session-prompt-dock.tsx | 31 ++++++++++--------- packages/ui/src/components/icon.tsx | 1 + packages/ui/src/components/message-part.css | 31 ++++++++++++++----- packages/ui/src/styles/theme.css | 2 +- 4 files changed, 43 insertions(+), 22 deletions(-) diff --git a/packages/app/src/pages/session/session-prompt-dock.tsx b/packages/app/src/pages/session/session-prompt-dock.tsx index 5728817fbed..83fc615b596 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: { {(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: { +
+ + +
{props.t("notification.permission.title")}
- +
} footer={ <> @@ -180,14 +177,20 @@ export function SessionPromptDock(props: { } > -
{toolDescription()}
+
+
0}> -
- - {(pattern) => {pattern}} - +
+
diff --git a/packages/ui/src/components/icon.tsx b/packages/ui/src/components/icon.tsx index 36d2a54319f..63242f318ab 100644 --- a/packages/ui/src/components/icon.tsx +++ b/packages/ui/src/components/icon.tsx @@ -78,6 +78,7 @@ const icons = { keyboard: ``, selector: ``, "arrow-down-to-line": ``, + warning: ``, link: ``, providers: ``, models: ``, diff --git a/packages/ui/src/components/message-part.css b/packages/ui/src/components/message-part.css index 2cfa286d296..bfcedde832f 100644 --- a/packages/ui/src/components/message-part.css +++ b/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; diff --git a/packages/ui/src/styles/theme.css b/packages/ui/src/styles/theme.css index 6b8f151c1e4..0899090c167 100644 --- a/packages/ui/src/styles/theme.css +++ b/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);