From 07c2e00e5582fc79580c5201b094be990be830ee Mon Sep 17 00:00:00 2001
From: monsterlag <64719697+monsterlag@users.noreply.github.com>
Date: Thu, 22 Oct 2026 05:54:38 +0000
Subject: [PATCH] fix(compat): distinguish auto and dontAsk permission pills

---
 specs/05-frontend-web.md        | 12 ++++++++++++
 src/components/InfoBar.test.tsx | 25 ++++++++++++++++++++++---
 src/components/InfoBar.tsx      |  6 +++++-
 src/lib/format.test.ts          |  4 ++++
 src/lib/format.ts               |  4 ++++
 src/styles/global.css           | 10 ++++++++++
 6 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/specs/05-frontend-web.md b/specs/05-frontend-web.md
index 76b14350..b6005906 100644
--- a/specs/05-frontend-web.md
+++ b/specs/05-frontend-web.md
@@ -320,6 +320,18 @@ Supports text search and project filtering (via `ProjectTree` selection).
 Top bar showing: project · session_id (8 chars) · git branch · permission mode ·
 context % · tokens · cost · ongoing spinner.
 
+Permission mode pills use explicit labels and colours:
+
+| Mode                | Label       | Background |
+| ------------------- | ----------- | ---------- |
+| `default`, `manual` | hidden      | —          |
+| `acceptEdits`       | `auto-edit` | purple     |
+| `bypassPermissions` | `yolo`      | red        |
+| `plan`              | `plan`      | green      |
+| `auto`              | `auto`      | blue       |
+| `dontAsk`           | `don't ask` | orange     |
+| unknown mode        | raw value   | muted grey |
+
 Context % uses a colour gradient:
 
 - `< 50%` → green
diff --git a/src/components/InfoBar.test.tsx b/src/components/InfoBar.test.tsx
index 6a6973d7..99854ffb 100644
--- a/src/components/InfoBar.test.tsx
+++ b/src/components/InfoBar.test.tsx
@@ -124,7 +124,7 @@ describe("InfoBar", () => {
         canFocus={false}
       />,
     );
-    expect(screen.getByText("yolo")).toBeInTheDocument();
+    expect(screen.getByText("yolo")).toHaveClass("info-bar__pill--bypass");
   });
 
   it("shows permission mode pill for acceptEdits", () => {
@@ -139,7 +139,7 @@ describe("InfoBar", () => {
         canFocus={false}
       />,
     );
-    expect(screen.getByText("auto-edit")).toBeInTheDocument();
+    expect(screen.getByText("auto-edit")).toHaveClass("info-bar__pill--acceptEdits");
   });
 
   it("shows permission mode pill for plan", () => {
@@ -154,7 +154,26 @@ describe("InfoBar", () => {
         canFocus={false}
       />,
     );
-    expect(screen.getByText("plan")).toBeInTheDocument();
+    expect(screen.getByText("plan")).toHaveClass("info-bar__pill--plan");
+  });
+
+  it.each([
+    ["auto", "auto", "info-bar__pill--auto"],
+    ["dontAsk", "don't ask", "info-bar__pill--dontAsk"],
+    ["customMode", "customMode", "info-bar__pill--default"],
+  ])("shows the label and pill class for %s", (mode, label, pillClass) => {
+    render(
+      <InfoBar
+        meta={makeMeta({ permission_mode: mode })}
+        gitInfo={null}
+        contextTokens={0}
+        sessionTotals={makeTotals()}
+        sessionPath=""
+        ongoing={false}
+        canFocus={false}
+      />,
+    );
+    expect(screen.getByText(label)).toHaveClass("info-bar__pill", pillClass);
   });
 
   it("does not show permission mode pill for default", () => {
diff --git a/src/components/InfoBar.tsx b/src/components/InfoBar.tsx
index 9c7a1cc7..a2319ba5 100644
--- a/src/components/InfoBar.tsx
+++ b/src/components/InfoBar.tsx
@@ -68,7 +68,11 @@ export function InfoBar({
         ? "info-bar__pill--acceptEdits"
         : mode === "plan"
           ? "info-bar__pill--plan"
-          : "info-bar__pill--default";
+          : mode === "auto"
+            ? "info-bar__pill--auto"
+            : mode === "dontAsk"
+              ? "info-bar__pill--dontAsk"
+              : "info-bar__pill--default";
 
   return (
     <div className="info-bar">
diff --git a/src/lib/format.test.ts b/src/lib/format.test.ts
index 2944c116..6b668b47 100644
--- a/src/lib/format.test.ts
+++ b/src/lib/format.test.ts
@@ -271,6 +271,8 @@ describe("shortMode", () => {
     expect(shortMode("default")).toBe("default");
     expect(shortMode("manual")).toBe("manual");
     expect(shortMode("acceptEdits")).toBe("auto-edit");
+    expect(shortMode("auto")).toBe("auto");
+    expect(shortMode("dontAsk")).toBe("don't ask");
     expect(shortMode("bypassPermissions")).toBe("yolo");
     expect(shortMode("plan")).toBe("plan");
   });
@@ -292,6 +294,8 @@ describe("isDefaultMode", () => {
 
   it("returns false for special modes", () => {
     expect(isDefaultMode("acceptEdits")).toBe(false);
+    expect(isDefaultMode("auto")).toBe(false);
+    expect(isDefaultMode("dontAsk")).toBe(false);
     expect(isDefaultMode("bypassPermissions")).toBe(false);
     expect(isDefaultMode("plan")).toBe(false);
     expect(isDefaultMode("")).toBe(false);
diff --git a/src/lib/format.ts b/src/lib/format.ts
index 8c054fd6..60ebc47c 100644
--- a/src/lib/format.ts
+++ b/src/lib/format.ts
@@ -119,6 +119,10 @@ export function shortMode(mode: string): string {
       return "manual";
     case "acceptEdits":
       return "auto-edit";
+    case "auto":
+      return "auto";
+    case "dontAsk":
+      return "don't ask";
     case "bypassPermissions":
       return "yolo";
     case "plan":
diff --git a/src/styles/global.css b/src/styles/global.css
index 75da1f77..8219658a 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -592,6 +592,16 @@ body {
   background: var(--pill-plan);
 }
 
+.info-bar__pill--auto {
+  background: var(--accent);
+  color: var(--bg);
+}
+
+.info-bar__pill--dontAsk {
+  background: var(--context-warn);
+  color: var(--bg);
+}
+
 .info-bar__pill--default {
   background: var(--text-muted);
 }