ceos/opencode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

tui: add warning icon to permission requests for better visibility

Browse source 
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.
This commit is contained in:
David Hill 2026-02-17 17:21:33 +00:00
commit bd3d1413fd
4 changed files with 43 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

31
packages/app/src/pages/session/session-prompt-dock.tsx
View file

@ -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>