Feat/mode redesign (#56)

### Issue for this PR

Closes #

### Type of change

- [ ] Bug fix
- [ ] New feature
- [ ] Refactor / code improvement
- [ ] Documentation

### What does this PR do?

Please provide a description of the issue, the changes you made to fix
it, and why they work. It is expected that you understand why your
changes work and if you do not understand why at least say as much so a
maintainer knows how much to value the PR.

**If you paste a large clearly AI generated description here your PR may
be IGNORED or CLOSED!**

### How did you verify your code works?

### Screenshots / recordings

_If this is a UI change, please include a screenshot or recording._

### Checklist

- [ ] I have tested my changes locally
- [ ] I have not included unrelated changes in this PR

_If you do not follow this template your PR will be automatically
rejected._

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: deepagent-ai

packages/app/src/components/deepagent-settings-ux.test.ts

@@ -35,9 +35,11 @@ describe("DeepAgent settings UX", () => {
     // …it is a composer control next to the agent selector, backed by directory-level auto-accept.
     expect(composer).toContain("ApprovalControl")
     expect(control).toContain('"data-action": "prompt-approval"')
-    expect(control).toContain("toggleAutoAcceptDirectory")
+    // Tri-state Read-Only / Request / Full-Access selector backed by the permission context.
+    expect(control).toContain("setDirectoryApprovalMode")
     expect(control).toContain("composer.approval.request")
-    expect(control).toContain("composer.approval.auto")
+    expect(control).toContain("composer.approval.readOnly")
+    expect(control).toContain("composer.approval.fullAccess")
   })
 
   test("routes the legacy settings dialog import to the unified settings page", async () => {

packages/app/src/components/deepagent/approval-control.tsx

@@ -1,39 +1,49 @@
 import { createMemo, type JSX } from "solid-js"
 import { Select } from "@deepagent-code/ui/select"
 import { useLanguage } from "@/context/language"
-import { usePermission } from "@/context/permission"
+import { usePermission, type DirectoryApprovalMode } from "@/context/permission"
 
 /**
  * Approval-mode control for the composer toolbar, next to the agent (build/plan) selector.
  *
- * Mirrors Codex's approval selector UX, simplified to two options: the button shows the CURRENT mode
- * ("Request approval" by default, "Auto-approve" when armed); clicking opens a small picker to switch.
- * The mode is DIRECTORY-scoped (persists across sessions in the same workspace), backed by the existing
- * permission context (isAutoAcceptingDirectory / toggleAutoAcceptDirectory) — the same state the old
- * settings toggle drove, now surfaced where the user acts.
+ * Mirrors Codex's approval selector UX: it collapses the approval×sandbox space into three named
+ * presets. The button shows the CURRENT mode; clicking opens a small picker to switch:
+ *   - "Read-Only"     — the agent may read/search but write/edit/bash requests are auto-rejected.
+ *   - "Request" (default) — normal permission flow; the agent asks before write/execute.
+ *   - "Full-Access"   — auto-approve everything (the old directory-level auto-accept).
+ *
+ * The mode is DIRECTORY-scoped (persists across sessions in the same workspace), backed by the
+ * permission context tri-state (directoryApprovalMode / setDirectoryApprovalMode). Full-Access maps
+ * onto the existing isAutoAcceptingDirectory / toggleAutoAcceptDirectory state the old settings
+ * toggle drove, now surfaced where the user acts.
  */
 
-type ApprovalMode = "request" | "auto"
+type ApprovalMode = DirectoryApprovalMode
 
 export function ApprovalControl(props: { directory: string; triggerStyle?: JSX.CSSProperties; onAfter?: () => void }) {
   const language = useLanguage()
   const permission = usePermission()
 
-  const auto = createMemo(() => (props.directory ? permission.isAutoAcceptingDirectory(props.directory) : false))
-  const current = createMemo<ApprovalMode>(() => (auto() ? "auto" : "request"))
+  const current = createMemo<ApprovalMode>(() =>
+    props.directory ? permission.directoryApprovalMode(props.directory) : "request",
+  )
 
-  const options: ApprovalMode[] = ["request", "auto"]
-  const label = (mode: ApprovalMode) =>
-    mode === "auto"
-      ? language.t("composer.approval.auto")
-      : language.t("composer.approval.request")
+  const options: ApprovalMode[] = ["read-only", "request", "full-access"]
+  const label = (mode: ApprovalMode) => {
+    switch (mode) {
+      case "read-only":
+        return language.t("composer.approval.readOnly")
+      case "full-access":
+        return language.t("composer.approval.fullAccess")
+      default:
+        return language.t("composer.approval.request")
+    }
+  }
 
   const onSelect = (mode: ApprovalMode | undefined) => {
     if (!mode || !props.directory) return
-    const isAuto = mode === "auto"
-    if (isAuto === auto()) return
-    // toggleAutoAcceptDirectory flips the directory-level state; only call it when the target differs.
-    permission.toggleAutoAcceptDirectory(props.directory)
+    if (mode === current()) return
+    permission.setDirectoryApprovalMode(props.directory, mode)
     props.onAfter?.()
   }
 
@@ -46,7 +56,7 @@ export function ApprovalControl(props: { directory: string; triggerStyle?: JSX.C
       value={(o) => o}
       label={label}
       onSelect={onSelect}
-      class="capitalize max-w-[160px] text-text-base"
+      class="max-w-[180px] text-text-base"
       valueClass="truncate text-13-regular text-text-base"
       triggerStyle={props.triggerStyle}
       triggerProps={{ "data-action": "prompt-approval" }}

packages/app/src/components/deepagent/goal-status-bar.tsx

@@ -3,6 +3,7 @@ import { Button } from "@deepagent-code/ui/button"
 import { Icon } from "@deepagent-code/ui/icon"
 import { useServerSync } from "@/context/server-sync"
 import { useSDK } from "@/context/sdk"
+import { useLanguage } from "@/context/language"
 import { pauseGoal, resumeGoal, stopGoal, type PanelGoalClient } from "./panel-goal.api"
 
 /**
@@ -12,13 +13,13 @@ import { pauseGoal, resumeGoal, stopGoal, type PanelGoalClient } from "./panel-g
  * while the background loop ticks and after a terminal phase (until the user starts a new goal).
  */
 
-const PHASE_LABEL: Record<string, string> = {
-  running: "Running",
-  paused: "Paused",
-  done: "Complete",
-  needs_human: "Needs you",
-  rolled_back: "Rolled back",
-  stopped: "Stopped",
+const PHASE_LABEL_KEY: Record<string, string> = {
+  running: "composer.goal.phase.running",
+  paused: "composer.goal.phase.paused",
+  done: "composer.goal.phase.done",
+  needs_human: "composer.goal.phase.needsHuman",
+  rolled_back: "composer.goal.phase.rolledBack",
+  stopped: "composer.goal.phase.stopped",
 }
 
 const PHASE_ICON: Record<string, Parameters<typeof Icon>[0]["name"]> = {
@@ -36,6 +37,7 @@ const isTerminal = (phase: string) =>
 export function GoalStatusBar(props: { sessionID: string }) {
   const serverSync = useServerSync()
   const sdk = useSDK()
+  const language = useLanguage()
   const [busy, setBusy] = createSignal(false)
 
   const goal = createMemo(() => (props.sessionID ? serverSync.data.session_goal[props.sessionID] : undefined))
@@ -74,31 +76,36 @@ export function GoalStatusBar(props: { sessionID: string }) {
           class="flex items-center gap-2 px-2.5 py-1.5 rounded-md bg-surface-raised border border-border-subtle text-13-regular"
         >
           <Icon name={PHASE_ICON[g().phase] ?? "status-active"} class="size-4 shrink-0 text-text-muted" />
-          <span class="text-text-base font-medium">{PHASE_LABEL[g().phase] ?? g().phase}</span>
+          <span class="text-text-base font-medium">
+            {PHASE_LABEL_KEY[g().phase] ? language.t(PHASE_LABEL_KEY[g().phase] as never) : g().phase}
+          </span>
           <span class="text-text-muted truncate">
-            {ticks()} {ticks() === 1 ? "tick" : "ticks"} · {tokens().toLocaleString()} tokens
+            {language.t(ticks() === 1 ? "composer.goal.budget.one" : "composer.goal.budget.other", {
+              ticks: ticks(),
+              tokens: tokens().toLocaleString(),
+            })}
           </span>
           <Show when={g().gaps.length > 0}>
             <span class="text-text-muted truncate italic">— {g().gaps[0]}</span>
           </Show>
           <div class="flex items-center gap-1 ml-auto shrink-0">
             <Show when={running()}>
               <Button variant="ghost" size="small" class="h-7 px-2" disabled={busy()} onClick={onPause}>
-                Pause
+                {language.t("composer.goal.pause")}
               </Button>
             </Show>
             <Show when={paused()}>
               <Button variant="ghost" size="small" class="h-7 px-2" disabled={busy()} onClick={onResume}>
-                Resume
+                {language.t("composer.goal.resume")}
               </Button>
             </Show>
             <Show when={!terminal()}>
-              <Button variant="ghost" size="small" class="size-7 p-0" disabled={busy()} onClick={onStop} aria-label="Stop goal">
+              <Button variant="ghost" size="small" class="size-7 p-0" disabled={busy()} onClick={onStop} aria-label={language.t("composer.goal.stop")}>
                 <Icon name="circle-ban-sign" class="size-4" />
               </Button>
             </Show>
             <Show when={terminal()}>
-              <Button variant="ghost" size="small" class="size-7 p-0" onClick={onDismiss} aria-label="Dismiss goal">
+              <Button variant="ghost" size="small" class="size-7 p-0" onClick={onDismiss} aria-label={language.t("composer.goal.dismiss")}>
                 <Icon name="close-small" class="size-4" />
               </Button>
             </Show>

packages/app/src/components/deepagent/mode-selector.tsx

@@ -0,0 +1,160 @@
+import { Popover as Kobalte } from "@kobalte/core/popover"
+import { type Component, type ComponentProps, createMemo, type JSX, Show, type ValidComponent } from "solid-js"
+import { createStore } from "solid-js/store"
+import { useLocal } from "@/context/local"
+import { useLanguage } from "@/context/language"
+import { List, type ListRef } from "@deepagent-code/ui/list"
+
+/**
+ * Composer collaboration-mode selector.
+ *
+ * Replaces the old label-only <Select> mode switcher with a LARGE popup (mirroring the model
+ * picker) where each mode is a bold title + a dimmed one-line description. It lists the primary
+ * agents (auto / loop / design — subagents and hidden agents are already filtered out by
+ * local.agent.list()), marks the active one with a trailing check, and switches on select.
+ *
+ * The mode is SESSION-scoped: local.agent.set(name) persists per session via the model-selection
+ * store. The command.agent.cycle keybind (local.agent.move) remains the keyboard way to cycle; this
+ * popup is an additional pointer/keyboard way to pick.
+ */
+
+type Agent = ReturnType<ReturnType<typeof useLocal>["agent"]["list"]>[number]
+type Dismiss = "escape" | "outside" | "select"
+type ModeName = "auto" | "loop" | "design"
+
+const MODE_LABEL_KEY = {
+  auto: "composer.mode.auto",
+  loop: "composer.mode.loop",
+  design: "composer.mode.design",
+} as const
+
+const MODE_DESC_KEY = {
+  auto: "composer.mode.auto.desc",
+  loop: "composer.mode.loop.desc",
+  design: "composer.mode.design.desc",
+} as const
+
+const isModeName = (name: string): name is ModeName => name in MODE_LABEL_KEY
+
+/**
+ * The localized display label for a mode name — used both by the popup rows and the composer trigger
+ * (so the closed trigger shows "自动/目标/设计", not the raw agent name). Falls back to the raw name
+ * for custom primary agents that have no composer.mode.* key.
+ */
+export const useModeLabel = () => {
+  const language = useLanguage()
+  return (name: string | undefined): string => {
+    if (!name) return language.t("command.agent.cycle")
+    if (isModeName(name)) {
+      const label = language.t(MODE_LABEL_KEY[name])
+      if (label) return label
+    }
+    return name
+  }
+}
+
+type ModeSelectorTriggerProps = Omit<ComponentProps<typeof Kobalte.Trigger>, "as" | "ref">
+
+export function ModeSelector(props: {
+  children?: JSX.Element
+  triggerAs?: ValidComponent
+  triggerProps?: ModeSelectorTriggerProps
+  onClose?: (cause: "escape" | "select") => void
+}) {
+  const local = useLocal()
+  const language = useLanguage()
+
+  const [store, setStore] = createStore<{ open: boolean; dismiss: Dismiss | null }>({
+    open: false,
+    dismiss: null,
+  })
+
+  const close = (dismiss: Dismiss) => {
+    setStore("dismiss", dismiss)
+    setStore("open", false)
+  }
+
+  const modes = createMemo(() => local.agent.list())
+
+  const modeLabel = useModeLabel()
+  const title = (agent: Agent) => modeLabel(agent.name)
+
+  const description = (agent: Agent) => {
+    if (isModeName(agent.name)) {
+      const desc = language.t(MODE_DESC_KEY[agent.name])
+      if (desc) return desc
+    }
+    return agent.description ?? ""
+  }
+
+  let listRef: ListRef | undefined
+
+  return (
+    <Kobalte
+      open={store.open}
+      onOpenChange={(next) => {
+        if (next) setStore("dismiss", null)
+        setStore("open", next)
+      }}
+      modal={false}
+      placement="top-start"
+      gutter={4}
+    >
+      <Kobalte.Trigger as={props.triggerAs ?? "div"} {...props.triggerProps}>
+        {props.children}
+      </Kobalte.Trigger>
+      <Kobalte.Portal>
+        <Kobalte.Content
+          class="w-80 max-h-96 flex flex-col p-2 rounded-md border border-border-base bg-surface-raised-stronger-non-alpha shadow-md z-50 outline-none overflow-hidden
+            [&_[data-slot=list-item-selected-icon]]:absolute
+            [&_[data-slot=list-item-selected-icon]]:right-3
+            [&_[data-slot=list-item-selected-icon]]:top-1/2
+            [&_[data-slot=list-item-selected-icon]]:-translate-y-1/2"
+          onKeyDown={(event) => listRef?.onKeyDown(event)}
+          onEscapeKeyDown={(event) => {
+            close("escape")
+            event.preventDefault()
+            event.stopPropagation()
+          }}
+          onPointerDownOutside={() => close("outside")}
+          onFocusOutside={() => close("outside")}
+          onCloseAutoFocus={(event) => {
+            const dismiss = store.dismiss
+            if (dismiss === "outside") event.preventDefault()
+            if (dismiss === "escape" || dismiss === "select") {
+              event.preventDefault()
+              props.onClose?.(dismiss)
+            }
+            setStore("dismiss", null)
+          }}
+        >
+          <Kobalte.Title class="sr-only">{language.t("command.agent.cycle")}</Kobalte.Title>
+          <List
+            ref={(ref) => (listRef = ref)}
+            class="flex-1 min-h-0 p-1 [&_[data-slot=list-scroll]]:flex-1 [&_[data-slot=list-scroll]]:min-h-0"
+            key={(agent) => agent.name}
+            items={modes()}
+            current={local.agent.current()}
+            onSelect={(agent) => {
+              if (!agent) return
+              local.agent.set(agent.name)
+              close("select")
+            }}
+          >
+            {(agent) => (
+              // flex-1 + text-left so content is left-aligned. pr-7 reserves a fixed right column for
+              // the check on EVERY row (selected or not), so text has a uniform right margin and never
+              // runs under the check — the check is absolutely positioned into that reserved column.
+              <div class="flex flex-1 min-w-0 flex-col gap-0.5 pr-7 text-left">
+                <span class="text-13-medium text-text-base capitalize">{title(agent)}</span>
+                <Show when={description(agent)}>
+                  <span class="text-11-regular text-text-weaker whitespace-normal leading-snug">{description(agent)}</span>
+                </Show>
+              </div>
+            )}
+          </List>
+        </Kobalte.Content>
+      </Kobalte.Portal>
+    </Kobalte>
+  )
+}

packages/app/src/components/deepagent/panel-button.tsx

@@ -4,6 +4,7 @@ import { Icon } from "@deepagent-code/ui/icon"
 import { Tooltip } from "@deepagent-code/ui/tooltip"
 import { useDialog } from "@deepagent-code/ui/context/dialog"
 import { useSDK } from "@/context/sdk"
+import { useLanguage } from "@/context/language"
 import { armPanel, consultPanel, fetchPanelStatus, type PanelGoalClient } from "./panel-goal.api"
 import { PanelVerdictDialog } from "./panel-verdict-dialog"
 
@@ -21,6 +22,7 @@ import { PanelVerdictDialog } from "./panel-verdict-dialog"
 export function PanelButton(props: { sessionID: string }) {
   const sdk = useSDK()
   const dialog = useDialog()
+  const language = useLanguage()
   const [busy, setBusy] = createSignal(false)
   const [armedOverride, setArmedOverride] = createSignal<boolean | undefined>(undefined)
 
@@ -71,7 +73,11 @@ export function PanelButton(props: { sessionID: string }) {
   }
 
   return (
-    <Tooltip placement="top" gutter={4} value={armed() ? "Expert panel armed — click to consult now" : "Convene expert panel"}>
+    <Tooltip
+      placement="top"
+      gutter={4}
+      value={armed() ? language.t("composer.panel.armed") : language.t("composer.panel.convene")}
+    >
       <div class="flex items-center" data-component="prompt-panel-control">
         <Button
           data-action="prompt-panel"
@@ -82,10 +88,10 @@ export function PanelButton(props: { sessionID: string }) {
           disabled={busy() || !props.sessionID}
           onClick={onClick}
           aria-pressed={armed()}
-          aria-label="Expert panel"
+          aria-label={language.t("composer.panel.label")}
         >
           <Icon name="speech-bubble" class="size-4" />
-          <span>Panel</span>
+          <span>{language.t("composer.panel.label")}</span>
         </Button>
         <Show when={armed()}>
           <Button
@@ -94,7 +100,7 @@ export function PanelButton(props: { sessionID: string }) {
             class="size-6 p-0"
             disabled={busy()}
             onClick={onDisarm}
-            aria-label="Disarm expert panel"
+            aria-label={language.t("composer.panel.disarm")}
           >
             <Icon name="close-small" class="size-3.5" />
           </Button>