feat(ui): add session yolo mode controls (#256)

## Summary - add a per-session Yolo mode toggle for permission prompts and persist its state - move the control into the Status tab with clearer copy, an info tooltip, and a visible header badge when it is enabled - auto-accept queued permissions for any yolo-enabled session in the instance, not only the currently focused session ## Why - keeps this risky mode explicit and easy to audit from the session status area - matches the expected multi-session desktop behavior when several sessions stay active in parallel ## Testing - npm run typecheck --workspace @codenomad/ui - npm run build --workspace @codenomad/ui Closes #18
2026-03-31 15:46:20 +02:00
parent 1d953dfe64
commit 64ac885157
14 changed files with 387 additions and 124 deletions
--- a/packages/ui/src/components/instance/instance-shell2.tsx
+++ b/packages/ui/src/components/instance/instance-shell2.tsx
@@ -36,7 +36,7 @@ import { serverApi } from "../../lib/api-client"
 import { loadBackgroundProcesses } from "../../stores/background-processes"
 import { BackgroundProcessOutputDialog } from "../background-process-output-dialog"
 import { useI18n } from "../../lib/i18n"
-import { getPermissionQueueLength, getQuestionQueueLength } from "../../stores/instances"
+import { getPermissionQueue, getPermissionQueueLength, getQuestionQueueLength, sendPermissionResponse } from "../../stores/instances"
 import SessionSidebar from "./shell/SessionSidebar"
 import { useSessionSidebarRequests } from "./shell/useSessionSidebarRequests"
 import RightPanel from "./shell/right-panel/RightPanel"
@@ -57,6 +57,13 @@ import { useDrawerHostMeasure } from "./shell/useDrawerHostMeasure"
 import { useDrawerResize } from "./shell/useDrawerResize"
 import { useSessionCache } from "./shell/useSessionCache"
 import { useInstanceSessionContext } from "./shell/useInstanceSessionContext"
+import { getPermissionSessionId } from "../../types/permission"
+import {
+  canAutoRespondPermission,
+  finishAutoRespondPermission,
+  getPermissionAutoAcceptInFlightVersion,
+  isPermissionAutoAcceptEnabled,
+} from "../../stores/permission-auto-accept"

 const log = getLogger("session")

@@ -252,6 +259,33 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
    return permissions + questions > 0
  })

+  const permissionQueue = createMemo(() => getPermissionQueue(props.instance.id))
+
+  createEffect(() => {
+    getPermissionAutoAcceptInFlightVersion()
+
+    for (const permission of permissionQueue()) {
+      const sessionId = getPermissionSessionId(permission)
+      if (!sessionId) continue
+      if (!permission?.id) continue
+      if (!canAutoRespondPermission(props.instance.id, sessionId, permission.id)) continue
+
+      void sendPermissionResponse(props.instance.id, sessionId, permission.id, "once")
+        .catch((error) => {
+          log.error("Failed to auto-accept permission", error)
+        })
+        .finally(() => {
+          finishAutoRespondPermission(props.instance.id, sessionId, permission.id)
+        })
+    }
+  })
+
+  const yoloModeEnabled = createMemo(() => {
+    const session = activeSessionForInstance()
+    if (!session) return false
+    return isPermissionAutoAcceptEnabled(props.instance.id, session.id)
+  })
+
  const activeSessionStatusPill = createMemo(() => {
    const activeSessionId = activeSessionIdForInstance()
    if (!activeSessionId || activeSessionId === "info") return null
@@ -297,6 +331,32 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
    )
  }

+  const renderYoloModePill = () => {
+    if (!yoloModeEnabled()) return null
+    return (
+      <span
+        class="status-indicator session-status session-status-list session-yolo-mode"
+        aria-label={t("instanceShell.yoloMode.badgeAriaLabel")}
+        title={t("instanceShell.yoloMode.badgeAriaLabel")}
+      >
+        <span class="status-dot" />
+        {t("instanceShell.yoloMode.badge")}
+      </span>
+    )
+  }
+
+  const renderSessionHeaderIndicators = () => (
+    <div class="flex items-center flex-wrap justify-center gap-2">
+      {renderYoloModePill()}
+      <Show when={hasPendingRequests()} fallback={renderActiveSessionStatusPill()}>
+        <PermissionNotificationBanner
+          instanceId={props.instance.id}
+          onClick={() => setPermissionModalOpen(true)}
+        />
+      </Show>
+    </div>
+  )
+
  const handleCommandPaletteClick = () => {
    showCommandPalette(props.instance.id)
  }
@@ -622,12 +682,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                    </Show>

                    <div class="flex-1 flex items-center justify-center min-w-0">
-                      <Show when={hasPendingRequests()} fallback={renderActiveSessionStatusPill()}>
-                        <PermissionNotificationBanner
-                          instanceId={props.instance.id}
-                          onClick={() => setPermissionModalOpen(true)}
-                        />
-                      </Show>
+                      {renderSessionHeaderIndicators()}
                    </div>

                    <div class="flex flex-wrap items-center justify-center gap-1">
@@ -719,12 +774,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                </Show>

                <div class="ml-auto flex items-center session-header-hints">
-                  <Show when={hasPendingRequests()} fallback={renderActiveSessionStatusPill()}>
-                    <PermissionNotificationBanner
-                      instanceId={props.instance.id}
-                      onClick={() => setPermissionModalOpen(true)}
-                    />
-                  </Show>
+                  {renderSessionHeaderIndicators()}
                </div>
              </div>

--- a/packages/ui/src/components/instance/shell/SessionSidebar.tsx
+++ b/packages/ui/src/components/instance/shell/SessionSidebar.tsx
@@ -48,104 +48,103 @@ interface SessionSidebarProps {
 }

 const SessionSidebar: Component<SessionSidebarProps> = (props) => (
-  <div class="flex flex-col h-full min-h-0" ref={props.setContentEl}>
-    <div class="flex flex-col gap-2 px-4 py-3 border-b border-base">
-      <div class="flex items-center justify-between gap-2">
-        <span class="session-sidebar-title text-sm font-semibold uppercase text-primary">
-          {props.t("instanceShell.leftPanel.sessionsTitle")}
-        </span>
-        <div class="flex items-center gap-2 text-primary">
-          <IconButton
-            size="small"
-            color="inherit"
-            aria-label={props.t("sessionList.actions.newSession.ariaLabel")}
-            title={props.t("sessionList.actions.newSession.title")}
-            onClick={() => {
-              const result = props.onNewSession()
-              if (result instanceof Promise) {
-                void result.catch((error) => log.error("Failed to create session:", error))
-              }
-            }}
-          >
-            <PlusSquare class="w-5 h-5" />
-          </IconButton>
-          <IconButton
-            size="small"
-            color="inherit"
-            aria-label={props.t("sessionList.filter.ariaLabel")}
-            title={props.t("sessionList.filter.ariaLabel")}
-            aria-pressed={props.showSearch()}
-            onClick={props.onToggleSearch}
-            sx={{
-              color: props.showSearch() ? "var(--text-primary)" : "inherit",
-              backgroundColor: props.showSearch() ? "var(--surface-hover)" : "transparent",
-              "&:hover": {
-                backgroundColor: "var(--surface-hover)",
-              },
-            }}
-          >
-            <Search class="w-5 h-5" />
-          </IconButton>
-          <IconButton
-            size="small"
-            color="inherit"
-            aria-label={props.t("instanceShell.leftPanel.instanceInfo")}
-            title={props.t("instanceShell.leftPanel.instanceInfo")}
-            onClick={() => props.onSelectSession("info")}
-          >
-            <InfoOutlinedIcon fontSize="small" />
-          </IconButton>
-          <Show when={!props.isPhoneLayout()}>
+    <div class="flex flex-col h-full min-h-0" ref={props.setContentEl}>
+      <div class="flex flex-col gap-2 px-4 py-3 border-b border-base">
+        <div class="flex items-center justify-between gap-2">
+          <span class="session-sidebar-title text-sm font-semibold uppercase text-primary">
+            {props.t("instanceShell.leftPanel.sessionsTitle")}
+          </span>
+          <div class="flex items-center gap-2 text-primary">
            <IconButton
              size="small"
              color="inherit"
-              aria-label={props.leftPinned() ? props.t("instanceShell.leftDrawer.unpin") : props.t("instanceShell.leftDrawer.pin")}
-              onClick={() => (props.leftPinned() ? props.onUnpinLeftDrawer() : props.onPinLeftDrawer())}
+              aria-label={props.t("sessionList.actions.newSession.ariaLabel")}
+              title={props.t("sessionList.actions.newSession.title")}
+              onClick={() => {
+                const result = props.onNewSession()
+                if (result instanceof Promise) {
+                  void result.catch((error) => log.error("Failed to create session:", error))
+                }
+              }}
            >
-              {props.leftPinned() ? <PushPinIcon fontSize="small" /> : <PushPinOutlinedIcon fontSize="small" />}
+              <PlusSquare class="w-5 h-5" />
            </IconButton>
-          </Show>
-          <Show when={props.drawerState() === "floating-open"}>
            <IconButton
              size="small"
              color="inherit"
-              aria-label={props.t("instanceShell.leftDrawer.toggle.close")}
-              title={props.t("instanceShell.leftDrawer.toggle.close")}
-              onClick={props.onCloseLeftDrawer}
+              aria-label={props.t("sessionList.filter.ariaLabel")}
+              title={props.t("sessionList.filter.ariaLabel")}
+              aria-pressed={props.showSearch()}
+              onClick={props.onToggleSearch}
+              sx={{
+                color: props.showSearch() ? "var(--text-primary)" : "inherit",
+                backgroundColor: props.showSearch() ? "var(--surface-hover)" : "transparent",
+                "&:hover": {
+                  backgroundColor: "var(--surface-hover)",
+                },
+              }}
            >
-              <MenuOpenIcon fontSize="small" />
+              <Search class="w-5 h-5" />
            </IconButton>
+            <IconButton
+              size="small"
+              color="inherit"
+              aria-label={props.t("instanceShell.leftPanel.instanceInfo")}
+              title={props.t("instanceShell.leftPanel.instanceInfo")}
+              onClick={() => props.onSelectSession("info")}
+            >
+              <InfoOutlinedIcon fontSize="small" />
+            </IconButton>
+            <Show when={!props.isPhoneLayout()}>
+              <IconButton
+                size="small"
+                color="inherit"
+                aria-label={props.leftPinned() ? props.t("instanceShell.leftDrawer.unpin") : props.t("instanceShell.leftDrawer.pin")}
+                onClick={() => (props.leftPinned() ? props.onUnpinLeftDrawer() : props.onPinLeftDrawer())}
+              >
+                {props.leftPinned() ? <PushPinIcon fontSize="small" /> : <PushPinOutlinedIcon fontSize="small" />}
+              </IconButton>
+            </Show>
+            <Show when={props.drawerState() === "floating-open"}>
+              <IconButton
+                size="small"
+                color="inherit"
+                aria-label={props.t("instanceShell.leftDrawer.toggle.close")}
+                title={props.t("instanceShell.leftDrawer.toggle.close")}
+                onClick={props.onCloseLeftDrawer}
+              >
+                <MenuOpenIcon fontSize="small" />
+              </IconButton>
+            </Show>
+          </div>
+        </div>
+        <div class="session-sidebar-shortcuts">
+          <Show when={props.keyboardShortcuts().length}>
+            <KeyboardHint shortcuts={props.keyboardShortcuts()} separator=" " showDescription={false} />
          </Show>
        </div>
      </div>
-      <div class="session-sidebar-shortcuts">
-        <Show when={props.keyboardShortcuts().length}>
-          <KeyboardHint shortcuts={props.keyboardShortcuts()} separator=" " showDescription={false} />
-        </Show>
-      </div>
-    </div>

-    <div class="session-sidebar flex flex-col flex-1 min-h-0">
-      <SessionList
-        instanceId={props.instanceId}
-        threads={props.threads()}
-        activeSessionId={props.activeSessionId()}
-        onSelect={props.onSelectSession}
-        onNew={() => {
-          const result = props.onNewSession()
-          if (result instanceof Promise) {
-            void result.catch((error) => log.error("Failed to create session:", error))
-          }
-        }}
-        enableFilterBar={props.showSearch()}
-        showHeader={false}
-        showFooter={false}
-      />
+      <div class="session-sidebar flex flex-col flex-1 min-h-0">
+        <SessionList
+          instanceId={props.instanceId}
+          threads={props.threads()}
+          activeSessionId={props.activeSessionId()}
+          onSelect={props.onSelectSession}
+          onNew={() => {
+            const result = props.onNewSession()
+            if (result instanceof Promise) {
+              void result.catch((error) => log.error("Failed to create session:", error))
+            }
+          }}
+          enableFilterBar={props.showSearch()}
+          showHeader={false}
+          showFooter={false}
+        />

-      <div class="session-sidebar-separator" />
-      <Show when={props.activeSession()}>
-        {(activeSession) => (
-          <>
+        <div class="session-sidebar-separator" />
+        <Show when={props.activeSession()}>
+          {(activeSession) => (
            <div class="session-sidebar-controls px-4 py-4 border-t border-base flex flex-col gap-3">
              <WorktreeSelector instanceId={props.instanceId} sessionId={activeSession().id} />

@@ -177,11 +176,10 @@ const SessionSidebar: Component<SessionSidebarProps> = (props) => (
                showDescription={false}
              />
            </div>
-          </>
-        )}
-      </Show>
+          )}
+        </Show>
+      </div>
    </div>
-  </div>
-)
+  )

 export default SessionSidebar
--- a/packages/ui/src/components/instance/shell/right-panel/RightPanel.tsx
+++ b/packages/ui/src/components/instance/shell/right-panel/RightPanel.tsx
@@ -89,6 +89,7 @@ interface RightPanelProps {
 const RightPanel: Component<RightPanelProps> = (props) => {
  const [rightPanelTab, setRightPanelTab] = createSignal<RightPanelTab>(readStoredRightPanelTab("changes"))
  const [rightPanelExpandedItems, setRightPanelExpandedItems] = createSignal<string[]>([
+    "yolo-mode",
    "plan",
    "background-processes",
    "mcp",
@@ -787,7 +788,7 @@ const RightPanel: Component<RightPanelProps> = (props) => {
    setRightPanelTab("changes")
  }

-  const statusSectionIds = ["session-changes", "plan", "background-processes", "mcp", "lsp", "plugins"]
+  const statusSectionIds = ["yolo-mode", "session-changes", "plan", "background-processes", "mcp", "lsp", "plugins"]

  createEffect(() => {
    const currentExpanded = new Set(rightPanelExpandedItems())
--- a/packages/ui/src/components/instance/shell/right-panel/tabs/StatusTab.tsx
+++ b/packages/ui/src/components/instance/shell/right-panel/tabs/StatusTab.tsx
@@ -2,6 +2,7 @@ import { For, Show, type Accessor, type Component } from "solid-js"
 import type { ToolState } from "@opencode-ai/sdk/v2"
 import { Accordion } from "@kobalte/core"
 import { Tooltip } from "@kobalte/core/tooltip"
+import Switch from "@suid/material/Switch"

 import { ChevronDown, Info, TerminalSquare, Trash2, XOctagon } from "lucide-solid"

@@ -12,6 +13,7 @@ import type { Session } from "../../../../../types/session"
 import ContextUsagePanel from "../../../../session/context-usage-panel"
 import { TodoListView } from "../../../../tool-call/renderers/todo"
 import InstanceServiceStatus from "../../../../instance-service-status"
+import { isPermissionAutoAcceptEnabled, togglePermissionAutoAccept } from "../../../../../stores/permission-auto-accept"

 interface StatusTabProps {
  t: (key: string, vars?: Record<string, any>) => string
@@ -39,6 +41,35 @@ interface StatusTabProps {
 const StatusTab: Component<StatusTabProps> = (props) => {
  const isSectionExpanded = (id: string) => props.expandedItems().includes(id)

+  const renderYoloModeSection = () => {
+    const session = props.activeSession()
+    if (!session) {
+      return (
+        <div class="right-panel-empty right-panel-empty--left">
+          <span class="text-xs">{props.t("instanceShell.yoloMode.noSessionSelected")}</span>
+        </div>
+      )
+    }
+
+    return (
+      <div class="rounded-md border border-base bg-surface-secondary px-3 py-2">
+        <div class="flex items-start justify-between gap-3">
+          <div class="min-w-0">
+            <div class="text-sm font-medium text-primary">{props.t("instanceShell.yoloMode.title")}</div>
+            <p class="mt-1 text-xs text-secondary">{props.t("instanceShell.yoloMode.description")}</p>
+          </div>
+          <Switch
+            checked={isPermissionAutoAcceptEnabled(props.instanceId, session.id)}
+            color="warning"
+            size="small"
+            inputProps={{ "aria-label": props.t("instanceShell.yoloMode.title") }}
+            onChange={() => togglePermissionAutoAccept(props.instanceId, session.id)}
+          />
+        </div>
+      </div>
+    )
+  }
+
  const renderStatusSessionChanges = () => {
    const sessionId = props.activeSessionId()
    if (!sessionId || sessionId === "info") {
@@ -204,6 +235,12 @@ const StatusTab: Component<StatusTabProps> = (props) => {
  }

  const statusSections = [
+    {
+      id: "yolo-mode",
+      labelKey: "instanceShell.rightPanel.sections.yoloMode",
+      tooltipKey: "instanceShell.rightPanel.sections.yoloMode.tooltip",
+      render: renderYoloModeSection,
+    },
    {
      id: "session-changes",
      labelKey: "instanceShell.rightPanel.sections.sessionChanges",
@@ -281,29 +318,23 @@ const StatusTab: Component<StatusTabProps> = (props) => {
        <For each={statusSections}>
          {(section) => (
            <Accordion.Item value={section.id} class="right-panel-accordion-item">
-              <Accordion.Header>
+              <Accordion.Header class="right-panel-accordion-header-row">
                <Accordion.Trigger class="right-panel-accordion-trigger">
                  <span class="section-left">
-                    <Tooltip openDelay={200} gutter={4} placement="top">
-                      <Tooltip.Trigger
-                        class="section-info-trigger"
-                        aria-label={props.t(section.tooltipKey)}
-                        onClick={(e) => e.stopPropagation()}
-                      >
-                        <Info class="section-info-icon" />
-                      </Tooltip.Trigger>
-                      <Tooltip.Portal>
-                        <Tooltip.Content class="section-info-tooltip">
-                          {props.t(section.tooltipKey)}
-                        </Tooltip.Content>
-                      </Tooltip.Portal>
-                    </Tooltip>
                    <span class="section-label">{props.t(section.labelKey)}</span>
                  </span>
                  <ChevronDown
                    class={`right-panel-accordion-chevron ${isSectionExpanded(section.id) ? "right-panel-accordion-chevron-expanded" : ""}`}
                  />
                </Accordion.Trigger>
+                <Tooltip openDelay={200} gutter={4} placement="top">
+                  <Tooltip.Trigger as="button" type="button" class="section-info-trigger" aria-label={props.t(section.tooltipKey)}>
+                    <Info class="section-info-icon" />
+                  </Tooltip.Trigger>
+                  <Tooltip.Portal>
+                    <Tooltip.Content class="section-info-tooltip">{props.t(section.tooltipKey)}</Tooltip.Content>
+                  </Tooltip.Portal>
+                </Tooltip>
              </Accordion.Header>
              <Accordion.Content class="right-panel-accordion-content">{section.render()}</Accordion.Content>
            </Accordion.Item>
--- a/packages/ui/src/lib/i18n/messages/en/instance.ts
+++ b/packages/ui/src/lib/i18n/messages/en/instance.ts
@@ -26,7 +26,6 @@ export const instanceMessages = {

  "instanceShell.leftPanel.sessionsTitle": "Sessions",
  "instanceShell.leftPanel.instanceInfo": "Instance Info",
-
  "instanceShell.leftDrawer.pin": "Pin left drawer",
  "instanceShell.leftDrawer.unpin": "Unpin left drawer",
  "instanceShell.leftDrawer.toggle.pinned": "Left drawer pinned",
@@ -107,6 +106,8 @@ export const instanceMessages = {
  "instanceShell.rightPanel.actions.refreshDirty.cancelLabel": "Cancel",
  "instanceShell.rightPanel.toast.saveSuccess": "File saved successfully",
  "instanceShell.rightPanel.toast.saveError": "Failed to save file",
+  "instanceShell.rightPanel.sections.yoloMode": "Yolo Mode",
+  "instanceShell.rightPanel.sections.yoloMode.tooltip": "Automatically approves permission requests for the current session. Use it only when you trust the tools being run.",
  "instanceShell.rightPanel.sections.sessionChanges": "Session Changes",
  "instanceShell.rightPanel.sections.sessionChanges.tooltip": "Files modified in the current session. Shows additions and deletions for each file.",
  "instanceShell.rightPanel.sections.plan": "Plan",
@@ -150,6 +151,12 @@ export const instanceMessages = {
  "instanceShell.plan.noSessionSelected": "Select a session to view plan.",
  "instanceShell.plan.empty": "Nothing planned yet.",

+  "instanceShell.yoloMode.noSessionSelected": "Select a session to configure Yolo mode.",
+  "instanceShell.yoloMode.title": "Yolo mode",
+  "instanceShell.yoloMode.description": "Automatically approve permission requests for this session. Disabled by default.",
+  "instanceShell.yoloMode.badge": "Yolo mode",
+  "instanceShell.yoloMode.badgeAriaLabel": "Yolo mode enabled",
+
  "instanceShell.backgroundProcesses.empty": "No background processes.",
  "instanceShell.backgroundProcesses.status": "Status: {status}",
  "instanceShell.backgroundProcesses.output": "Output: {sizeKb}KB",
--- a/packages/ui/src/lib/i18n/messages/es/instance.ts
+++ b/packages/ui/src/lib/i18n/messages/es/instance.ts
@@ -26,7 +26,6 @@ export const instanceMessages = {

  "instanceShell.leftPanel.sessionsTitle": "Sesiones",
  "instanceShell.leftPanel.instanceInfo": "Info de la instancia",
-
  "instanceShell.leftDrawer.pin": "Fijar panel izquierdo",
  "instanceShell.leftDrawer.unpin": "Desfijar panel izquierdo",
  "instanceShell.leftDrawer.toggle.pinned": "Panel izquierdo fijado",
@@ -107,6 +106,8 @@ export const instanceMessages = {
  "instanceShell.rightPanel.actions.refreshDirty.cancelLabel": "Cancelar",
  "instanceShell.rightPanel.toast.saveSuccess": "Archivo guardado exitosamente",
  "instanceShell.rightPanel.toast.saveError": "Error al guardar el archivo",
+  "instanceShell.rightPanel.sections.yoloMode": "Modo yolo",
+  "instanceShell.rightPanel.sections.yoloMode.tooltip": "Aprueba automaticamente las solicitudes de permiso de la sesion actual. Usalo solo si confias en las herramientas que se estan ejecutando.",
  "instanceShell.rightPanel.sections.sessionChanges": "Cambios de sesión",
  "instanceShell.rightPanel.sections.sessionChanges.tooltip": "Archivos modificados en la sesión actual. Muestra las adiciones y eliminaciones de cada archivo.",
  "instanceShell.rightPanel.sections.plan": "Plan",
@@ -140,6 +141,12 @@ export const instanceMessages = {
  "instanceShell.plan.noSessionSelected": "Selecciona una sesión para ver el plan.",
  "instanceShell.plan.empty": "Aún no hay nada planificado.",

+  "instanceShell.yoloMode.noSessionSelected": "Selecciona una sesion para configurar el modo yolo.",
+  "instanceShell.yoloMode.title": "Modo yolo",
+  "instanceShell.yoloMode.description": "Aprueba automaticamente las solicitudes de permiso de esta sesion. Esta desactivado por defecto.",
+  "instanceShell.yoloMode.badge": "Modo yolo",
+  "instanceShell.yoloMode.badgeAriaLabel": "Modo yolo activado",
+
  "instanceShell.backgroundProcesses.empty": "No hay procesos en segundo plano.",
  "instanceShell.backgroundProcesses.status": "Estado: {status}",
  "instanceShell.backgroundProcesses.output": "Salida: {sizeKb} KB",
--- a/packages/ui/src/lib/i18n/messages/fr/instance.ts
+++ b/packages/ui/src/lib/i18n/messages/fr/instance.ts
@@ -26,7 +26,6 @@ export const instanceMessages = {

  "instanceShell.leftPanel.sessionsTitle": "Sessions",
  "instanceShell.leftPanel.instanceInfo": "Infos de l'instance",
-
  "instanceShell.leftDrawer.pin": "Épingler le tiroir gauche",
  "instanceShell.leftDrawer.unpin": "Désépingler le tiroir gauche",
  "instanceShell.leftDrawer.toggle.pinned": "Tiroir gauche épinglé",
@@ -107,6 +106,8 @@ export const instanceMessages = {
  "instanceShell.rightPanel.actions.refreshDirty.cancelLabel": "Annuler",
  "instanceShell.rightPanel.toast.saveSuccess": "Fichier enregistré avec succès",
  "instanceShell.rightPanel.toast.saveError": "Échec de l'enregistrement du fichier",
+  "instanceShell.rightPanel.sections.yoloMode": "Mode yolo",
+  "instanceShell.rightPanel.sections.yoloMode.tooltip": "Approuve automatiquement les demandes d'autorisation pour la session actuelle. A utiliser seulement si vous faites confiance aux outils executes.",
  "instanceShell.rightPanel.sections.sessionChanges": "Changements de session",
  "instanceShell.rightPanel.sections.sessionChanges.tooltip": "Fichiers modifiés dans la session actuelle. Affiche les ajouts et suppressions pour chaque fichier.",
  "instanceShell.rightPanel.sections.plan": "Plan",
@@ -140,6 +141,12 @@ export const instanceMessages = {
  "instanceShell.plan.noSessionSelected": "Sélectionnez une session pour voir le plan.",
  "instanceShell.plan.empty": "Aucun plan pour l'instant.",

+  "instanceShell.yoloMode.noSessionSelected": "Selectionnez une session pour configurer le mode yolo.",
+  "instanceShell.yoloMode.title": "Mode yolo",
+  "instanceShell.yoloMode.description": "Approuve automatiquement les demandes d'autorisation pour cette session. Desactive par defaut.",
+  "instanceShell.yoloMode.badge": "Mode yolo",
+  "instanceShell.yoloMode.badgeAriaLabel": "Mode yolo active",
+
  "instanceShell.backgroundProcesses.empty": "Aucun processus en arrière-plan.",
  "instanceShell.backgroundProcesses.status": "Statut : {status}",
  "instanceShell.backgroundProcesses.output": "Sortie : {sizeKb}KB",
--- a/packages/ui/src/lib/i18n/messages/he/instance.ts
+++ b/packages/ui/src/lib/i18n/messages/he/instance.ts
@@ -26,7 +26,6 @@ export const instanceMessages = {

  "instanceShell.leftPanel.sessionsTitle": "סשנים",
  "instanceShell.leftPanel.instanceInfo": "מידע על המופע",
-
  "instanceShell.leftDrawer.pin": "נעץ מגירה שמאלית",
  "instanceShell.leftDrawer.unpin": "שחרר נעיצת מגירה שמאלית",
  "instanceShell.leftDrawer.toggle.pinned": "המגירה השמאלית נעוצה",
@@ -107,6 +106,8 @@ export const instanceMessages = {
  "instanceShell.rightPanel.actions.refreshDirty.cancelLabel": "בטל",
  "instanceShell.rightPanel.toast.saveSuccess": "הקובץ נשמר בהצלחה",
  "instanceShell.rightPanel.toast.saveError": "כשלון בשמירת הקובץ",
+  "instanceShell.rightPanel.sections.yoloMode": "מצב Yolo",
+  "instanceShell.rightPanel.sections.yoloMode.tooltip": "מאשר אוטומטית בקשות הרשאה עבור הסשן הנוכחי. השתמשו בזה רק אם אתם סומכים על הכלים שרצים.",
  "instanceShell.rightPanel.sections.sessionChanges": "שינויי סשן",
  "instanceShell.rightPanel.sections.sessionChanges.tooltip": "קבצים שהשתנו בסשן הנוכחי. מציג הוספות ומחיקות לכל קובץ.",
  "instanceShell.rightPanel.sections.plan": "תוכנית",
@@ -148,6 +149,12 @@ export const instanceMessages = {
  "instanceShell.plan.noSessionSelected": "בחר סשן לצפייה בתוכנית.",
  "instanceShell.plan.empty": "עדיין לא תוכנן דבר.",

+  "instanceShell.yoloMode.noSessionSelected": "בחרו סשן כדי להגדיר מצב Yolo.",
+  "instanceShell.yoloMode.title": "מצב Yolo",
+  "instanceShell.yoloMode.description": "מאשר אוטומטית בקשות הרשאה עבור הסשן הזה. כבוי כברירת מחדל.",
+  "instanceShell.yoloMode.badge": "Yolo",
+  "instanceShell.yoloMode.badgeAriaLabel": "מצב Yolo פעיל",
+
  "instanceShell.backgroundProcesses.empty": "אין תהליכי רקע.",
  "instanceShell.backgroundProcesses.status": "סטטוס: {status}",
  "instanceShell.backgroundProcesses.output": "פלט: {sizeKb}KB",
--- a/packages/ui/src/lib/i18n/messages/ja/instance.ts
+++ b/packages/ui/src/lib/i18n/messages/ja/instance.ts
@@ -26,7 +26,6 @@ export const instanceMessages = {

  "instanceShell.leftPanel.sessionsTitle": "セッション",
  "instanceShell.leftPanel.instanceInfo": "インスタンス情報",
-
  "instanceShell.leftDrawer.pin": "左ドロワーを固定",
  "instanceShell.leftDrawer.unpin": "左ドロワーの固定を解除",
  "instanceShell.leftDrawer.toggle.pinned": "左ドロワーを固定しました",
@@ -107,6 +106,8 @@ export const instanceMessages = {
  "instanceShell.rightPanel.actions.refreshDirty.cancelLabel": "キャンセル",
  "instanceShell.rightPanel.toast.saveSuccess": "ファイルを保存しました",
  "instanceShell.rightPanel.toast.saveError": "ファイルの保存に失敗しました",
+  "instanceShell.rightPanel.sections.yoloMode": "Yoloモード",
+  "instanceShell.rightPanel.sections.yoloMode.tooltip": "現在のセッションの権限リクエストを自動承認します。実行中のツールを信頼できる場合にのみ使用してください。",
  "instanceShell.rightPanel.sections.sessionChanges": "セッション変更",
  "instanceShell.rightPanel.sections.sessionChanges.tooltip": "現在のセッションで変更されたファイル。各ファイルの追加と削除を表示します。",
  "instanceShell.rightPanel.sections.plan": "計画",
@@ -140,6 +141,12 @@ export const instanceMessages = {
  "instanceShell.plan.noSessionSelected": "計画を表示するにはセッションを選択してください。",
  "instanceShell.plan.empty": "まだ計画はありません。",

+  "instanceShell.yoloMode.noSessionSelected": "Yoloモードを設定するにはセッションを選択してください。",
+  "instanceShell.yoloMode.title": "Yoloモード",
+  "instanceShell.yoloMode.description": "このセッションの権限リクエストを自動承認します。デフォルトでは無効です。",
+  "instanceShell.yoloMode.badge": "Yolo",
+  "instanceShell.yoloMode.badgeAriaLabel": "Yoloモードが有効",
+
  "instanceShell.backgroundProcesses.empty": "バックグラウンドプロセスはありません。",
  "instanceShell.backgroundProcesses.status": "状態: {status}",
  "instanceShell.backgroundProcesses.output": "出力: {sizeKb}KB",
--- a/packages/ui/src/lib/i18n/messages/ru/instance.ts
+++ b/packages/ui/src/lib/i18n/messages/ru/instance.ts
@@ -26,7 +26,6 @@ export const instanceMessages = {

  "instanceShell.leftPanel.sessionsTitle": "Сессии",
  "instanceShell.leftPanel.instanceInfo": "Информация об экземпляре",
-
  "instanceShell.leftDrawer.pin": "Закрепить левую панель",
  "instanceShell.leftDrawer.unpin": "Открепить левую панель",
  "instanceShell.leftDrawer.toggle.pinned": "Левая панель закреплена",
@@ -107,6 +106,8 @@ export const instanceMessages = {
  "instanceShell.rightPanel.actions.refreshDirty.cancelLabel": "Отмена",
  "instanceShell.rightPanel.toast.saveSuccess": "Файл успешно сохранён",
  "instanceShell.rightPanel.toast.saveError": "Не удалось сохранить файл",
+  "instanceShell.rightPanel.sections.yoloMode": "Режим Yolo",
+  "instanceShell.rightPanel.sections.yoloMode.tooltip": "Автоматически одобряет запросы разрешений для текущей сессии. Включайте только если доверяете запускаемым инструментам.",
  "instanceShell.rightPanel.sections.sessionChanges": "Изменения сессии",
  "instanceShell.rightPanel.sections.sessionChanges.tooltip": "Файлы, измененные в текущей сессии. Показывает добавления и удаления для каждого файла.",
  "instanceShell.rightPanel.sections.plan": "План",
@@ -140,6 +141,12 @@ export const instanceMessages = {
  "instanceShell.plan.noSessionSelected": "Выберите сессию, чтобы просмотреть план.",
  "instanceShell.plan.empty": "Пока ничего не запланировано.",

+  "instanceShell.yoloMode.noSessionSelected": "Выберите сессию, чтобы настроить режим Yolo.",
+  "instanceShell.yoloMode.title": "Режим Yolo",
+  "instanceShell.yoloMode.description": "Автоматически одобряет запросы разрешений для этой сессии. По умолчанию выключен.",
+  "instanceShell.yoloMode.badge": "Yolo",
+  "instanceShell.yoloMode.badgeAriaLabel": "Режим Yolo включен",
+
  "instanceShell.backgroundProcesses.empty": "Нет фоновых процессов.",
  "instanceShell.backgroundProcesses.status": "Статус: {status}",
  "instanceShell.backgroundProcesses.output": "Вывод: {sizeKb}KB",
--- a/packages/ui/src/lib/i18n/messages/zh-Hans/instance.ts
+++ b/packages/ui/src/lib/i18n/messages/zh-Hans/instance.ts
@@ -26,7 +26,6 @@ export const instanceMessages = {

  "instanceShell.leftPanel.sessionsTitle": "会话",
  "instanceShell.leftPanel.instanceInfo": "实例信息",
-
  "instanceShell.leftDrawer.pin": "固定左侧抽屉",
  "instanceShell.leftDrawer.unpin": "取消固定左侧抽屉",
  "instanceShell.leftDrawer.toggle.pinned": "左侧抽屉已固定",
@@ -107,6 +106,8 @@ export const instanceMessages = {
  "instanceShell.rightPanel.actions.refreshDirty.cancelLabel": "取消",
  "instanceShell.rightPanel.toast.saveSuccess": "文件保存成功",
  "instanceShell.rightPanel.toast.saveError": "保存文件失败",
+  "instanceShell.rightPanel.sections.yoloMode": "Yolo 模式",
+  "instanceShell.rightPanel.sections.yoloMode.tooltip": "自动批准当前会话的权限请求。仅在你信任正在运行的工具时启用。",
  "instanceShell.rightPanel.sections.sessionChanges": "会话更改",
  "instanceShell.rightPanel.sections.sessionChanges.tooltip": "当前会话中修改的文件。显示每个文件的添加和删除。",
  "instanceShell.rightPanel.sections.plan": "计划",
@@ -140,6 +141,12 @@ export const instanceMessages = {
  "instanceShell.plan.noSessionSelected": "选择会话以查看计划。",
  "instanceShell.plan.empty": "暂无计划。",

+  "instanceShell.yoloMode.noSessionSelected": "请选择一个会话来配置 Yolo 模式。",
+  "instanceShell.yoloMode.title": "Yolo 模式",
+  "instanceShell.yoloMode.description": "自动批准此会话的权限请求。默认关闭。",
+  "instanceShell.yoloMode.badge": "Yolo",
+  "instanceShell.yoloMode.badgeAriaLabel": "Yolo 模式已启用",
+
  "instanceShell.backgroundProcesses.empty": "没有后台进程。",
  "instanceShell.backgroundProcesses.status": "状态：{status}",
  "instanceShell.backgroundProcesses.output": "输出：{sizeKb}KB",
--- a/packages/ui/src/stores/permission-auto-accept.ts
+++ b/packages/ui/src/stores/permission-auto-accept.ts
@@ -0,0 +1,81 @@
+import { createSignal } from "solid-js"
+
+const STORAGE_KEY = "codenomad:permission-auto-accept:v1"
+
+function makeKey(instanceId: string, sessionId: string) {
+  return `${instanceId}:${sessionId}`
+}
+
+function readInitialState() {
+  if (typeof window === "undefined" || !window.localStorage) {
+    return new Map<string, boolean>()
+  }
+
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY)
+    if (!raw) return new Map<string, boolean>()
+    const parsed = JSON.parse(raw) as Record<string, boolean>
+    return new Map(Object.entries(parsed).filter((entry): entry is [string, boolean] => entry[1] === true))
+  } catch {
+    return new Map<string, boolean>()
+  }
+}
+
+function persist(next: Map<string, boolean>) {
+  if (typeof window === "undefined" || !window.localStorage) {
+    return
+  }
+
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(Object.fromEntries(next)))
+  } catch {
+    // ignore persistence failures
+  }
+}
+
+const [autoAcceptState, setAutoAcceptState] = createSignal(readInitialState())
+const [inFlightVersion, setInFlightVersion] = createSignal(0)
+
+const inFlight = new Set<string>()
+
+export function isPermissionAutoAcceptEnabled(instanceId: string, sessionId: string) {
+  return autoAcceptState().get(makeKey(instanceId, sessionId)) ?? false
+}
+
+export function setPermissionAutoAcceptEnabled(instanceId: string, sessionId: string, enabled: boolean) {
+  const key = makeKey(instanceId, sessionId)
+  setAutoAcceptState((prev) => {
+    const next = new Map(prev)
+    if (enabled) {
+      next.set(key, true)
+    } else {
+      next.delete(key)
+    }
+    persist(next)
+    return next
+  })
+}
+
+export function togglePermissionAutoAccept(instanceId: string, sessionId: string) {
+  setPermissionAutoAcceptEnabled(instanceId, sessionId, !isPermissionAutoAcceptEnabled(instanceId, sessionId))
+}
+
+export function canAutoRespondPermission(instanceId: string, sessionId: string, requestId: string) {
+  const key = makeKey(instanceId, sessionId)
+  if (!autoAcceptState().get(key)) return false
+  const requestKey = `${key}:${requestId}`
+  if (inFlight.has(requestKey)) return false
+  inFlight.add(requestKey)
+  return true
+}
+
+export function getPermissionAutoAcceptInFlightVersion() {
+  return inFlightVersion()
+}
+
+export function finishAutoRespondPermission(instanceId: string, sessionId: string, requestId: string) {
+  if (!inFlight.delete(`${makeKey(instanceId, sessionId)}:${requestId}`)) {
+    return
+  }
+  setInFlightVersion((value) => value + 1)
+}
--- a/packages/ui/src/styles/panels/right-panel.css
+++ b/packages/ui/src/styles/panels/right-panel.css
@@ -412,6 +412,19 @@
  background-color: var(--surface-secondary);
 }

+.right-panel-accordion-header-row {
+  @apply flex items-center gap-2;
+}
+
+.right-panel-accordion-header-row .right-panel-accordion-trigger {
+  flex: 1 1 auto;
+}
+
+.right-panel-accordion-header-row .section-info-trigger {
+  flex: 0 0 auto;
+  margin-inline-end: 0.75rem;
+}
+
 .right-panel-accordion-trigger {
  @apply w-full flex items-center justify-between px-3 py-2.5 text-[11px] font-semibold uppercase tracking-wide transition-colors duration-150;
  color: var(--text-secondary);
@@ -452,6 +465,8 @@
  @apply inline-flex items-center justify-center p-0.5 rounded transition-all duration-150;
  color: var(--text-muted);
  flex-shrink: 0;
+  border: none;
+  background-color: transparent;
 }

 .section-info-trigger:hover {
@@ -459,6 +474,12 @@
  background-color: var(--surface-hover);
 }

+.section-info-trigger:focus-visible {
+  @apply ring-2 ring-offset-1;
+  ring-color: var(--accent-primary);
+  ring-offset-color: var(--surface-secondary);
+}
+
 .section-label {
  margin-inline-start: 2px;
 }
--- a/packages/ui/src/styles/panels/session-layout.css
+++ b/packages/ui/src/styles/panels/session-layout.css
@@ -107,6 +107,28 @@
  @apply w-full;
 }

+.session-sidebar-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.4rem 0.65rem;
+  border: 1px solid var(--border-base);
+  border-radius: 0.75rem;
+  background: var(--surface-base);
+  min-height: 2rem;
+  width: fit-content;
+  max-width: 100%;
+  margin-left: auto;
+}
+
+.session-sidebar-toggle-title {
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  line-height: 1.2;
+}
+
 .session-sidebar-controls .selector-trigger,
 .session-sidebar-controls [data-model-selector-control],
 .session-sidebar-controls .selector-trigger-label,
@@ -458,6 +480,16 @@ session-sidebar-controls .selector-trigger-primary {
  border: 1px solid transparent;
 }

+.status-indicator.session-yolo-mode {
+  color: var(--accent-primary);
+  background-color: color-mix(in oklab, var(--accent-primary) 14%, transparent);
+  border-color: color-mix(in oklab, var(--accent-primary) 28%, transparent);
+}
+
+.status-indicator.session-yolo-mode .status-dot {
+  background-color: var(--accent-primary);
+}
+
@media (max-width: 768px) {
  .session-list-container {
    min-width: 200px;