feat(vscode): show the permission mode in the chat

`/yolo` and `/auto` toggle when sent without an argument, and the chat never
showed which mode was in effect. Sending `/yolo` to make sure YOLO was on
turned it off instead, and nothing on screen said so — the next tool call
asked for approval and the command looked broken rather than inverted.

The host already fetched the mode for every status announce and dropped it
before sending. It now rides along, a mode change announces itself to every
attached view, and the composer carries a red badge for YOLO and AUTO in the
same danger colour the terminal footer uses. Manual stays unlabelled.

Author: elkaix

apps/vscode/shared/legacy-sdk.ts

@@ -76,11 +76,15 @@ export interface TokenUsage {
   input_cache_creation: number;
 }
 
+export type PermissionMode = "manual" | "auto" | "yolo";
+
 export interface StatusUpdate {
   context_usage?: number | null;
   token_usage?: TokenUsage | null;
   message_id?: string | null;
   plan_mode?: boolean | null;
+  /** The live permission mode. Without it the chat cannot show which one is on. */
+  permission?: PermissionMode | null;
   model?: string | null;
   thinking_effort?: string | null;
   retrying?: {

apps/vscode/src/runtime/session-runtime.ts

@@ -144,6 +144,10 @@ export class SessionRuntime {
       await persistPermissionMode(this.session, mode);
       this.currentPermissionMode = mode;
     }
+    // Tell every attached view at once. `/yolo` is a toggle, so a chat that
+    // cannot see the mode it landed on is how a user turns YOLO off while
+    // trying to turn it on.
+    await Promise.all([...this.webviewIds].map((id) => this.announceStatus(id)));
   }
 
   subscribe(webviewId: string): void {
@@ -168,6 +172,7 @@ export class SessionRuntime {
           model: status.model,
           thinking_effort: status.thinkingLevel,
           plan_mode: status.planMode,
+          permission: status.permission,
         },
         _sessionId: this.id,
       },

apps/vscode/test/pythinker-runtime.test.ts

@@ -392,7 +392,40 @@ describe("Pythinker runtime (owns shared SDK sessions for Webviews)", () => {
       event: Events.StreamEvent,
       data: {
         type: "StatusUpdate",
-        payload: { model: "kimi-test", thinking_effort: "max", plan_mode: true },
+        // The permission mode rides along: the chat badge is the only place the
+        // user can see which mode a toggle command just landed on.
+        payload: { model: "kimi-test", thinking_effort: "max", plan_mode: true, permission: "manual" },
+        _sessionId: "saved-1",
+      },
+      webviewId: "view-1",
+    });
+  });
+
+  it("announces the new permission mode so the chat badge can show it", async () => {
+    const sdk = createFakeHarness();
+    const broadcasts: { event: string; data: unknown; webviewId?: string }[] = [];
+    const runtime = new PythinkerRuntime({
+      version: "0.6.0",
+      harness: sdk.harness,
+      broadcast: (event: string, data: unknown, webviewId?: string) => {
+        broadcasts.push({ event, data, webviewId });
+      },
+      captureBaseline: () => undefined,
+      log: () => undefined,
+    });
+    sdk.addSession("saved-1", "/workspace", { permission: "manual" });
+    const opened = await runtime.openSession(openOptions({ sessionId: "saved-1" }));
+
+    broadcasts.length = 0;
+    await opened.setPermissionMode("yolo");
+
+    // `/yolo` toggles, so a mode the chat cannot see is a command that silently
+    // does the opposite of what the user meant.
+    expect(broadcasts).toContainEqual({
+      event: Events.StreamEvent,
+      data: {
+        type: "StatusUpdate",
+        payload: { model: "kimi-test", thinking_effort: "off", plan_mode: false, permission: "yolo" },
         _sessionId: "saved-1",
       },
       webviewId: "view-1",

apps/vscode/webview-ui/src/components/PermissionModeBadge.tsx

@@ -0,0 +1,37 @@
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import type { PermissionMode } from "shared/legacy-sdk";
+
+const LABELS: Partial<Record<PermissionMode, { text: string; hint: string }>> = {
+  yolo: {
+    text: "YOLO",
+    hint: "Tool actions are auto-approved; the agent may still ask questions. Send /yolo off to stop.",
+  },
+  auto: {
+    text: "AUTO",
+    hint: "Fully autonomous; the agent will not ask questions. Send /auto off to stop.",
+  },
+};
+
+/**
+ * Shows the permission mode whenever it is not the default.
+ *
+ * `/yolo` and `/auto` toggle when sent without an argument, so a chat that
+ * never showed the mode let the same command mean "on" or "off" depending on
+ * state nobody could see — sending `/yolo` to be sure it was on turned it off.
+ * The terminal has always shown this; the red matches its danger row.
+ */
+export function PermissionModeBadge({ mode }: { mode: PermissionMode }) {
+  const label = LABELS[mode];
+  if (label === undefined) return null;
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span className="inline-flex items-center rounded border border-destructive/40 bg-destructive/10 px-1.5 py-0.5 text-[10px] font-semibold tracking-wide text-destructive select-none">
+          {label.text}
+        </span>
+      </TooltipTrigger>
+      <TooltipContent>{label.hint}</TooltipContent>
+    </Tooltip>
+  );
+}

apps/vscode/webview-ui/src/components/index.ts

@@ -24,5 +24,6 @@ export { InlineError } from "./InlineError";
 export { QuestionDialog } from "./QuestionDialog";
 export { PlanCard } from "./PlanCard";
 export { PlanModeButton } from "./PlanModeButton";
+export { PermissionModeBadge } from "./PermissionModeBadge";
 export { BrailleSpinner } from "./BrailleSpinner";
 export { SilverSpinner } from "./SilverSpinner";

apps/vscode/webview-ui/src/components/inputarea/InputArea.tsx

@@ -20,6 +20,7 @@ import { BottomToolbar } from "../BottomToolbar";
 import { StreamingConfirmDialog } from "../StreamingConfirmDialog";
 import { ThinkingButton } from "../ThinkingButton";
 import { PlanModeButton } from "../PlanModeButton";
+import { PermissionModeBadge } from "../PermissionModeBadge";
 import {
   getModelById,
   getMediaFallbackModel,
@@ -53,7 +54,7 @@ export function InputArea({ onAuthAction }: InputAreaProps) {
   const [cursorPos, setCursorPos] = useState(0);
   const [previewMedia, setPreviewMedia] = useState<string | null>(null);
 
-  const { isStreaming, sendMessage, abort, draftMedia, removeDraftMedia, hasProcessingMedia, getMediaInConversation, pendingInput, planMode, messages } = useChatStore();
+  const { isStreaming, sendMessage, abort, draftMedia, removeDraftMedia, hasProcessingMedia, getMediaInConversation, pendingInput, planMode, permissionMode, messages } = useChatStore();
   const { currentModel, thinkingEffort, updateModel, toggleThinking, selectThinkingEffort, models, extensionConfig, getCurrentThinkingMode } = useSettingsStore();
 
   const isProcessing = hasProcessingMedia();
@@ -483,6 +484,7 @@ export function InputArea({ onAuthAction }: InputAreaProps) {
                 onSelectEffort={selectThinkingEffort}
               />
               <PlanModeButton active={planMode} onToggle={handleTogglePlanMode} />
+              <PermissionModeBadge mode={permissionMode} />
             </div>
 
             <div className="flex items-center gap-2 shrink-0">

apps/vscode/webview-ui/src/stores/chat.store.ts

@@ -7,7 +7,7 @@ import { toast } from "@/components/ui/sonner";
 
 import { useSettingsStore } from "./settings.store";
 import { processEvent } from "./event-handlers";
-import type { StatusUpdate, ContentPart, QuestionRequest, ToolResult } from "shared/legacy-sdk";
+import type { StatusUpdate, ContentPart, PermissionMode, QuestionRequest, ToolResult } from "shared/legacy-sdk";
 import type { UIStreamEvent } from "shared/types";
 
 const HANDSHAKE_TIMEOUT_MS = 30_000;
@@ -122,6 +122,8 @@ export interface ChatState {
   queue: QueuedItem[];
   pendingQuestion: QuestionRequest | null;
   planMode: boolean;
+  /** The mode the engine is actually in, as last reported by the host. */
+  permissionMode: PermissionMode;
 
   sendMessage: (text: string) => void;
   retryLastMessage: () => void;
@@ -249,6 +251,7 @@ export const useChatStore = create<ChatState>((set, get) => ({
   queue: [],
   pendingQuestion: null,
   planMode: false,
+  permissionMode: "manual",
 
   sendMessage: (text) => {
     const { draftMedia, isStreaming } = get();
@@ -375,6 +378,7 @@ export const useChatStore = create<ChatState>((set, get) => ({
       queue: [],
       pendingQuestion: null,
       planMode: false,
+      permissionMode: "manual",
     });
     useApprovalStore.getState().clearRequests();
 
@@ -429,6 +433,7 @@ export const useChatStore = create<ChatState>((set, get) => ({
       queue: [],
       pendingQuestion: null,
       planMode: false,
+      permissionMode: "manual",
     });
     useApprovalStore.getState().clearRequests();
   },

apps/vscode/webview-ui/src/stores/event-handlers.ts

@@ -637,7 +637,7 @@ const eventHandlers: Record<string, EventHandler> = {
   },
 
   StatusUpdate: (draft, payload) => {
-    const { context_usage, token_usage, plan_mode, model, thinking_effort, retrying } = payload;
+    const { context_usage, token_usage, plan_mode, permission, model, thinking_effort, retrying } = payload;
 
     if (typeof model === "string" && model.length > 0) {
       useSettingsStore.getState().setCurrentModel(model);
@@ -650,6 +650,10 @@ const eventHandlers: Record<string, EventHandler> = {
       draft.planMode = plan_mode;
     }
 
+    if (permission !== undefined && permission !== null) {
+      draft.permissionMode = permission;
+    }
+
     if (token_usage) {
       addTokenUsage(draft.activeTokenUsage, {
         input_other: token_usage.input_other || 0,