tweak(ui): bump button heights and align permission prompt layout

1 files changed, 74 insertions, 54 deletions

diff --git a/packages/app/src/pages/session/session-prompt-dock.tsx b/packages/app/src/pages/session/session-prompt-dock.tsx
index 2b9571982..2bdb4ee2c 100644
--- a/packages/app/src/pages/session/session-prompt-dock.tsx
+++ b/packages/app/src/pages/session/session-prompt-dock.tsx
@@ -1,7 +1,6 @@
 import { For, Show, createEffect, createMemo, createSignal, on, onCleanup } from "solid-js"
 import type { QuestionRequest, Todo } from "@opencode-ai/sdk/v2"
 import { Button } from "@opencode-ai/ui/button"
-import { BasicTool } from "@opencode-ai/ui/basic-tool"
 import { PromptInput } from "@/components/prompt-input"
 import { QuestionDock } from "@/components/question-dock"
 import { SessionTodoDock } from "@/components/session-todo-dock"
@@ -123,63 +122,84 @@ export function SessionPromptDock(props: {
         </Show>
 
         <Show when={props.permissionRequest()} keyed>
-          {(perm) => (
-            <div data-component="tool-part-wrapper" data-permission="true" class="mb-3">
-              <BasicTool
-                icon="checklist"
-                locked
-                defaultOpen
-                trigger={{
-                  title: props.t("notification.permission.title"),
-                  subtitle:
-                    perm.permission === "doom_loop"
-                      ? props.t("settings.permissions.tool.doom_loop.title")
-                      : perm.permission,
-                }}
-              >
-                <Show when={perm.patterns.length > 0}>
-                  <div class="flex flex-col gap-1 py-2 px-3 max-h-40 overflow-y-auto no-scrollbar">
-                    <For each={perm.patterns}>
-                      {(pattern) => <code class="text-12-regular text-text-base break-all">{pattern}</code>}
-                    </For>
+          {(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)
+              if (value === key) return ""
+              return value
+            }
+
+            return (
+              <div>
+                <div data-component="question-prompt" data-permission="true">
+                  <div data-slot="question-body">
+                    <div data-slot="question-header">
+                      <div data-slot="question-header-title">
+                        {props.t("notification.permission.title")}{" "}
+                        <span class="text-13-regular text-text-weak">{toolTitle()}</span>
+                      </div>
+                    </div>
+
+                    <div data-slot="question-content">
+                      <Show when={toolDescription()}>
+                        <div data-slot="question-hint">{toolDescription()}</div>
+                      </Show>
+
+                      <Show when={perm.patterns.length > 0}>
+                        <div data-slot="question-options">
+                          <For each={perm.patterns}>
+                            {(pattern) => (
+                              <div class="px-[10px]">
+                                <code class="text-12-regular text-text-base break-all">{pattern}</code>
+                              </div>
+                            )}
+                          </For>
+                        </div>
+                      </Show>
+                    </div>
                   </div>
-                </Show>
-                <Show when={perm.permission === "doom_loop"}>
-                  <div class="text-12-regular text-text-weak pb-2 px-3">
-                    {props.t("settings.permissions.tool.doom_loop.description")}
+
+                  <div data-slot="question-footer">
+                    <div />
+                    <div data-slot="question-footer-actions">
+                      <Button
+                        variant="ghost"
+                        size="normal"
+                        onClick={() => props.onDecide("reject")}
+                        disabled={props.responding}
+                      >
+                        {props.t("ui.permission.deny")}
+                      </Button>
+                      <Button
+                        variant="secondary"
+                        size="normal"
+                        onClick={() => props.onDecide("always")}
+                        disabled={props.responding}
+                      >
+                        {props.t("ui.permission.allowAlways")}
+                      </Button>
+                      <Button
+                        variant="primary"
+                        size="normal"
+                        onClick={() => props.onDecide("once")}
+                        disabled={props.responding}
+                      >
+                        {props.t("ui.permission.allowOnce")}
+                      </Button>
+                    </div>
                   </div>
-                </Show>
-              </BasicTool>
-              <div data-component="permission-prompt">
-                <div data-slot="permission-actions">
-                  <Button
-                    variant="ghost"
-                    size="small"
-                    onClick={() => props.onDecide("reject")}
-                    disabled={props.responding}
-                  >
-                    {props.t("ui.permission.deny")}
-                  </Button>
-                  <Button
-                    variant="secondary"
-                    size="small"
-                    onClick={() => props.onDecide("always")}
-                    disabled={props.responding}
-                  >
-                    {props.t("ui.permission.allowAlways")}
-                  </Button>
-                  <Button
-                    variant="primary"
-                    size="small"
-                    onClick={() => props.onDecide("once")}
-                    disabled={props.responding}
-                  >
-                    {props.t("ui.permission.allowOnce")}
-                  </Button>
                 </div>
               </div>
-            </div>
-          )}
+            )
+          }}
         </Show>
 
         <Show when={!props.blocked}>