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);