fix(compat): distinguish auto and dontAsk permission pills

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

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", () => {

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">

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);

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":

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);
 }