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 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: { {(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 36d2a5431..63242f318 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 2cfa286d2..bfcedde83 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 6b8f151c1..0899090c1 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);