From d39403c8f5063418797590ec9bc0372df3329814 Mon Sep 17 00:00:00 2001
From: murashit <murashit@proton.me>
Date: Fri, 5 Jun 2026 09:31:11 +0900
Subject: [PATCH] Show runtime mode icons in status bar

---
 src/features/chat/ui/composer.tsx             | 99 +++++++++++++++++--
 src/features/chat/view-model.ts               | 46 ++++++---
 src/styles/33-chat-composer.css               | 70 ++++++++++++-
 .../chat/chat-composer-controller.test.ts     | 18 +++-
 .../chat/ui/renderers/composer.test.ts        | 89 ++++++++++++++++-
 tests/features/chat/view-model.test.ts        | 54 +++++++++-
 tests/styles.test.ts                          | 37 ++++++-
 7 files changed, 380 insertions(+), 33 deletions(-)

diff --git a/src/features/chat/ui/composer.tsx b/src/features/chat/ui/composer.tsx
index 976af20a..5394b53a 100644
--- a/src/features/chat/ui/composer.tsx
+++ b/src/features/chat/ui/composer.tsx
@@ -3,7 +3,7 @@ import { useLayoutEffect, useRef } from "preact/hooks";
 
 import type { ComposerSuggestion } from "../composer/suggestions";
 import type { ComposerMetaViewModel } from "../view-model";
-import { IconButton } from "../../../shared/ui/components";
+import { IconButton, ObsidianIcon } from "../../../shared/ui/components";
 import { renderUiRoot } from "../../../shared/ui/ui-root";
 import { syncTextareaHeight } from "../../../shared/ui/textarea-autogrow";
 
@@ -27,9 +27,20 @@ type ButtonProps = ButtonHTMLAttributes & {
 
 const DEFAULT_COMPOSER_META: ComposerMetaViewModel = {
   fatal: null,
-  context: "ctx      --%",
+  context: {
+    cells: [
+      { text: "⣀", placeholder: true },
+      { text: "⣀", placeholder: true },
+      { text: "⣀", placeholder: true },
+      { text: "⣀", placeholder: true },
+    ],
+    percent: "--%",
+  },
   model: "default",
   effort: null,
+  planActive: false,
+  autoReviewActive: false,
+  fastActive: false,
 };
 
 export function renderComposerShell(
@@ -154,6 +165,31 @@ function ComposerMeta({
   sendMode: ComposerSendMode;
   onSendOrInterrupt: () => void;
 }): UiNode {
+  const statusRef = useRef<HTMLSpanElement | null>(null);
+  useLayoutEffect(() => {
+    const status = statusRef.current;
+    if (!status) return;
+    const win = status.win;
+    let frame = 0;
+    const update = () => {
+      frame = 0;
+      updateComposerMetaStatusOverflow(status);
+    };
+    const scheduleUpdate = () => {
+      if (frame) win.cancelAnimationFrame(frame);
+      frame = win.requestAnimationFrame(update);
+    };
+    update();
+    const ResizeObserverCtor = (win as Window & { ResizeObserver?: typeof ResizeObserver }).ResizeObserver;
+    const observer = ResizeObserverCtor ? new ResizeObserverCtor(scheduleUpdate) : null;
+    observer?.observe(status);
+    win.addEventListener("resize", scheduleUpdate);
+    return () => {
+      if (frame) win.cancelAnimationFrame(frame);
+      observer?.disconnect();
+      win.removeEventListener("resize", scheduleUpdate);
+    };
+  }, [meta]);
   if (meta.fatal) {
     return (
       <div className="codex-panel__composer-meta codex-panel__composer-meta--fatal">
@@ -164,15 +200,23 @@ function ComposerMeta({
   }
   return (
     <div className="codex-panel__composer-meta">
-      <span className="codex-panel__composer-meta-status" aria-hidden="true">
-        <span className="codex-panel__composer-meta-context">{meta.context}</span>
+      <span ref={statusRef} className="codex-panel__composer-meta-status" aria-hidden="true">
+        <span className="codex-panel__composer-meta-modes">
+          <ComposerMetaIcon icon="list-todo" active={meta.planActive} />
+          <ComposerMetaIcon icon="shield" active={meta.autoReviewActive} />
+          <ComposerMetaIcon icon="zap" active={meta.fastActive} />
+        </span>
         <span className="codex-panel__composer-meta-separator">|</span>
-        <span className="codex-panel__composer-meta-model">{meta.model}</span>
+        <ComposerContextMeter context={meta.context} />
+        <span className="codex-panel__composer-meta-field codex-panel__composer-meta-field--model">
+          <span className="codex-panel__composer-meta-separator">|</span>
+          <span className="codex-panel__composer-meta-model">{meta.model}</span>
+        </span>
         {meta.effort ? (
-          <>
+          <span className="codex-panel__composer-meta-field codex-panel__composer-meta-field--effort">
             <span className="codex-panel__composer-meta-separator">|</span>
             <span className="codex-panel__composer-meta-effort">{meta.effort}</span>
-          </>
+          </span>
         ) : null}
       </span>
       <ComposerSendButton sendMode={sendMode} onSendOrInterrupt={onSendOrInterrupt} />
@@ -180,6 +224,47 @@ function ComposerMeta({
   );
 }
 
+const COMPOSER_META_EFFORT_HIDDEN_CLASS = "is-effort-hidden";
+const COMPOSER_META_MODEL_HIDDEN_CLASS = "is-model-hidden";
+
+function updateComposerMetaStatusOverflow(status: HTMLElement): void {
+  status.classList.remove(COMPOSER_META_EFFORT_HIDDEN_CLASS, COMPOSER_META_MODEL_HIDDEN_CLASS);
+  if (!composerMetaStatusOverflowing(status)) return;
+  if (status.querySelector(".codex-panel__composer-meta-field--effort")) {
+    status.classList.add(COMPOSER_META_EFFORT_HIDDEN_CLASS);
+  }
+  if (!composerMetaStatusOverflowing(status)) return;
+  if (status.querySelector(".codex-panel__composer-meta-field--model")) {
+    status.classList.add(COMPOSER_META_MODEL_HIDDEN_CLASS);
+  }
+}
+
+function composerMetaStatusOverflowing(status: HTMLElement): boolean {
+  return status.scrollWidth > status.clientWidth;
+}
+
+function ComposerContextMeter({ context }: { context: ComposerMetaViewModel["context"] }): UiNode {
+  return (
+    <span className="codex-panel__composer-meta-context">
+      <span className="codex-panel__composer-meta-context-dots">
+        {context.cells.map((cell, index) => (
+          <span
+            key={index}
+            className={["codex-panel__composer-meta-context-dot", cell.placeholder ? "is-placeholder" : ""].filter(Boolean).join(" ")}
+          >
+            {cell.text}
+          </span>
+        ))}
+      </span>
+      <span className="codex-panel__composer-meta-context-percent">{context.percent}</span>
+    </span>
+  );
+}
+
+function ComposerMetaIcon({ icon, active }: { icon: string; active: boolean }): UiNode {
+  return <ObsidianIcon icon={icon} className={["codex-panel__composer-meta-icon", active ? "is-active" : ""].filter(Boolean).join(" ")} />;
+}
+
 interface ComposerSendMode {
   icon: string;
   label: string;
diff --git a/src/features/chat/view-model.ts b/src/features/chat/view-model.ts
index 13471062..bf7fa5d2 100644
--- a/src/features/chat/view-model.ts
+++ b/src/features/chat/view-model.ts
@@ -26,9 +26,22 @@ export interface RuntimeSnapshotInput {
 
 export interface ComposerMetaViewModel {
   fatal: string | null;
-  context: string;
+  context: ComposerContextMeterViewModel;
   model: string;
   effort: string | null;
+  planActive: boolean;
+  autoReviewActive: boolean;
+  fastActive: boolean;
+}
+
+export interface ComposerContextMeterCellViewModel {
+  text: string;
+  placeholder: boolean;
+}
+
+export interface ComposerContextMeterViewModel {
+  cells: ComposerContextMeterCellViewModel[];
+  percent: string;
 }
 
 export interface ToolbarViewModelInput {
@@ -146,9 +159,12 @@ export function composerMetaViewModel(state: ChatState, snapshot: RuntimeSnapsho
   if (state.status === "Connection failed.") {
     return {
       fatal: "Codex app-server disconnected",
-      context: "",
+      context: contextComposerMeter(null),
       model: "",
       effort: null,
+      planActive: false,
+      autoReviewActive: false,
+      fastActive: false,
     };
   }
 
@@ -158,9 +174,12 @@ export function composerMetaViewModel(state: ChatState, snapshot: RuntimeSnapsho
   const effort = currentReasoningEffort(snapshot, config);
   return {
     fatal: null,
-    context: contextComposerLabel(context?.percent ?? null),
+    context: contextComposerMeter(context?.percent ?? null),
     model: model ?? "default",
     effort: effort ? compactReasoningEffortLabel(effort) : null,
+    planActive: state.selectedCollaborationMode === "plan",
+    autoReviewActive: autoReviewActive(snapshot, config),
+    fastActive: fastModeActive(snapshot, config),
   };
 }
 
@@ -205,27 +224,30 @@ const CONTEXT_DOT_WIDTH = 4;
 const CONTEXT_CELL_PERCENT = 100 / CONTEXT_DOT_WIDTH;
 const CONTEXT_PARTIAL_DOTS = ["", "⣀", "⣤", "⣶", "⣿"] as const;
 const CONTEXT_FULL_DOT = "⣿";
+const CONTEXT_EMPTY_DOT = "⣀";
 
-function contextComposerLabel(percent: number | null): string {
-  const dots = contextBrailleDots(percent);
+function contextComposerMeter(percent: number | null): ComposerContextMeterViewModel {
   const percentLabel = percent === null ? "--%" : `${String(Math.round(Math.max(0, Math.min(100, percent)))).padStart(2, " ")}%`;
-  return `ctx ${dots} ${percentLabel}`;
+  return {
+    cells: contextBrailleCells(percent),
+    percent: percentLabel,
+  };
 }
 
-function contextBrailleDots(percent: number | null): string {
-  if (percent === null) return " ".repeat(CONTEXT_DOT_WIDTH);
+function contextBrailleCells(percent: number | null): ComposerContextMeterCellViewModel[] {
+  if (percent === null) return Array.from({ length: CONTEXT_DOT_WIDTH }, () => ({ text: CONTEXT_EMPTY_DOT, placeholder: true }));
   const clamped = Math.max(0, Math.min(100, percent));
-  const chars: string[] = [];
+  const cells: ComposerContextMeterCellViewModel[] = [];
   for (let index = 0; index < CONTEXT_DOT_WIDTH; index += 1) {
     const remaining = clamped - index * CONTEXT_CELL_PERCENT;
     if (remaining <= 0) {
-      chars.push(index === 0 ? CONTEXT_PARTIAL_DOTS[1] : " ");
+      cells.push({ text: CONTEXT_EMPTY_DOT, placeholder: true });
       continue;
     }
     const partialIndex = Math.min(CONTEXT_PARTIAL_DOTS.length - 1, Math.ceil((remaining / CONTEXT_CELL_PERCENT) * 4));
-    chars.push(CONTEXT_PARTIAL_DOTS[partialIndex] ?? CONTEXT_FULL_DOT);
+    cells.push({ text: CONTEXT_PARTIAL_DOTS[partialIndex] ?? CONTEXT_FULL_DOT, placeholder: false });
   }
-  return chars.join("");
+  return cells;
 }
 
 export function connectionDiagnosticsModel(input: ConnectionDiagnosticsModelInput): ReturnType<typeof connectionDiagnosticSections> {
diff --git a/src/styles/33-chat-composer.css b/src/styles/33-chat-composer.css
index 0249e624..b68b9bca 100644
--- a/src/styles/33-chat-composer.css
+++ b/src/styles/33-chat-composer.css
@@ -48,8 +48,29 @@
 }
 
 .codex-panel__composer-meta-context {
+  display: inline-flex;
   flex: 0 0 auto;
+  gap: var(--codex-panel-control-gap);
+  align-items: center;
   font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.codex-panel__composer-meta-context-dots {
+  display: inline-flex;
+  flex: 0 0 auto;
+}
+
+.codex-panel__composer-meta-context-dot {
+  color: currentcolor;
+}
+
+.codex-panel__composer-meta-context-dot.is-placeholder {
+  color: var(--text-faint);
+}
+
+.codex-panel__composer-meta-context-percent {
+  flex: 0 0 auto;
   white-space: pre;
 }
 
@@ -58,11 +79,46 @@
   color: var(--text-faint);
 }
 
+.codex-panel__composer-meta-field {
+  display: inline-flex;
+  flex: 0 0 auto;
+  gap: var(--size-4-2);
+  align-items: center;
+}
+
+.codex-panel__composer-meta-field--model {
+  flex: 0 0 auto;
+}
+
+.codex-panel__composer-meta-modes {
+  display: inline-flex;
+  flex: 0 0 auto;
+  gap: var(--codex-panel-control-gap);
+  align-items: center;
+  color: var(--text-faint);
+}
+
+.codex-panel__composer-meta-icon {
+  display: inline-flex;
+  width: var(--codex-panel-size-icon-xs);
+  height: var(--codex-panel-size-icon-xs);
+  align-items: center;
+  justify-content: center;
+  color: var(--text-faint);
+}
+
+.codex-panel__composer-meta-icon.is-active {
+  color: var(--icon-color-active);
+}
+
+.codex-panel__composer-meta-icon svg {
+  width: calc(var(--codex-panel-size-icon-xs) - var(--codex-panel-rail-width) / 2);
+  height: calc(var(--codex-panel-size-icon-xs) - var(--codex-panel-rail-width) / 2);
+  stroke-width: 2;
+}
+
 .codex-panel__composer-meta-model,
 .codex-panel__composer-meta-effort {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
@@ -78,6 +134,14 @@
   white-space: nowrap;
 }
 
+.codex-panel__composer-meta-status.is-effort-hidden .codex-panel__composer-meta-field--effort {
+  display: none;
+}
+
+.codex-panel__composer-meta-status.is-model-hidden .codex-panel__composer-meta-field--model {
+  display: none;
+}
+
 .codex-panel__composer-suggestions {
   position: absolute;
   right: var(--codex-panel-edge-padding-x);
diff --git a/tests/features/chat/chat-composer-controller.test.ts b/tests/features/chat/chat-composer-controller.test.ts
index 99011801..4a6b7e23 100644
--- a/tests/features/chat/chat-composer-controller.test.ts
+++ b/tests/features/chat/chat-composer-controller.test.ts
@@ -24,7 +24,23 @@ describe("ChatComposerController", () => {
       scrollThreadFromComposerEdges: () => false,
       canInterrupt: () => false,
       composerPlaceholder: () => "Ask Codex to work on this task...",
-      composerMeta: () => ({ fatal: null, context: "ctx      --%", model: "default", effort: null }),
+      composerMeta: () => ({
+        fatal: null,
+        context: {
+          cells: [
+            { text: "⣀", placeholder: true },
+            { text: "⣀", placeholder: true },
+            { text: "⣀", placeholder: true },
+            { text: "⣀", placeholder: true },
+          ],
+          percent: "--%",
+        },
+        model: "default",
+        effort: null,
+        planActive: false,
+        autoReviewActive: false,
+        fastActive: false,
+      }),
       currentModelForSuggestions: () => null,
       renderIfDetached: vi.fn(),
       onDraftChange: vi.fn(),
diff --git a/tests/features/chat/ui/renderers/composer.test.ts b/tests/features/chat/ui/renderers/composer.test.ts
index 169c8404..be739590 100644
--- a/tests/features/chat/ui/renderers/composer.test.ts
+++ b/tests/features/chat/ui/renderers/composer.test.ts
@@ -3,6 +3,7 @@
 import { describe, expect, it, vi } from "vitest";
 
 import { renderComposerShell, scrollComposerSuggestionIntoView, syncComposerHeight } from "../../../../../src/features/chat/ui/composer";
+import { waitForAsyncWork } from "../../../../support/async";
 import { changeInputValue, composerSuggestionScrollFixture, installObsidianDomShims } from "../../../../support/dom";
 
 installObsidianDomShims();
@@ -47,30 +48,110 @@ describe("composer renderer decisions", () => {
 
     renderComposerShell(parent, "view", "", false, false, "Ask Codex to work on this task...", [], 0, composerCallbacks(), {
       fatal: null,
-      context: "ctx ⣿⣶   42%",
+      context: {
+        cells: [
+          { text: "⣿", placeholder: false },
+          { text: "⣶", placeholder: false },
+          { text: "⣀", placeholder: true },
+          { text: "⣀", placeholder: true },
+        ],
+        percent: "42%",
+      },
       model: "gpt-5.5",
       effort: "high",
+      planActive: true,
+      autoReviewActive: false,
+      fastActive: true,
     });
 
     const meta = parent.querySelector<HTMLElement>(".codex-panel__composer-meta");
+    const statusItems = Array.from(parent.querySelectorAll<HTMLElement>(".codex-panel__composer-meta-status > span"));
+    const fields = Array.from(parent.querySelectorAll<HTMLElement>(".codex-panel__composer-meta-field"));
+    const contextDots = Array.from(parent.querySelectorAll<HTMLElement>(".codex-panel__composer-meta-context-dot"));
+    const modeIcons = Array.from(parent.querySelectorAll<HTMLElement>(".codex-panel__composer-meta-icon"));
     expect(meta?.getAttribute("aria-hidden")).toBeNull();
-    expect(meta?.textContent).toBe("ctx ⣿⣶   42%|gpt-5.5|high");
+    expect(meta?.textContent).toBe("|⣿⣶⣀⣀42%|gpt-5.5|high");
+    expect(statusItems.map((item) => item.className)).toEqual([
+      "codex-panel__composer-meta-modes",
+      "codex-panel__composer-meta-separator",
+      "codex-panel__composer-meta-context",
+      "codex-panel__composer-meta-field codex-panel__composer-meta-field--model",
+      "codex-panel__composer-meta-field codex-panel__composer-meta-field--effort",
+    ]);
+    expect(fields.map((field) => field.textContent)).toEqual(["|gpt-5.5", "|high"]);
     expect(parent.querySelector(".codex-panel__composer-meta-status")?.getAttribute("aria-hidden")).toBe("true");
-    expect(parent.querySelector(".codex-panel__composer-meta-context")?.textContent).toBe("ctx ⣿⣶   42%");
+    expect(parent.querySelector(".codex-panel__composer-meta-context")?.textContent).toBe("⣿⣶⣀⣀42%");
+    expect(contextDots.map((dot) => dot.textContent)).toEqual(["⣿", "⣶", "⣀", "⣀"]);
+    expect(contextDots.map((dot) => dot.classList.contains("is-placeholder"))).toEqual([false, false, true, true]);
     expect(parent.querySelector(".codex-panel__composer-meta-model")?.textContent).toBe("gpt-5.5");
     expect(parent.querySelector(".codex-panel__composer-meta-effort")?.textContent).toBe("high");
+    expect(modeIcons.map((icon) => icon.dataset["icon"])).toEqual(["list-todo", "shield", "zap"]);
+    expect(modeIcons.map((icon) => icon.classList.contains("is-active"))).toEqual([true, false, true]);
     expect(parent.querySelector(".codex-panel__composer-action.codex-panel__send")).not.toBeNull();
     expect(parent.querySelector(".codex-panel__new-chat")).toBeNull();
   });
 
+  it("hides composer meta fields only after measured overflow", async () => {
+    const parent = document.createElement("div");
+
+    renderComposerShell(parent, "view", "", false, false, "Ask Codex to work on this task...", [], 0, composerCallbacks(), {
+      fatal: null,
+      context: {
+        cells: [
+          { text: "⣿", placeholder: false },
+          { text: "⣶", placeholder: false },
+          { text: "⣀", placeholder: true },
+          { text: "⣀", placeholder: true },
+        ],
+        percent: "42%",
+      },
+      model: "gpt-5.5",
+      effort: "high",
+      planActive: true,
+      autoReviewActive: false,
+      fastActive: true,
+    });
+
+    const status = parent.querySelector<HTMLElement>(".codex-panel__composer-meta-status");
+    if (!status) throw new Error("Expected composer meta status to render.");
+    Object.defineProperty(status, "clientWidth", { configurable: true, value: 100 });
+    Object.defineProperty(status, "scrollWidth", {
+      configurable: true,
+      get: () => (status.classList.contains("is-model-hidden") ? 80 : status.classList.contains("is-effort-hidden") ? 120 : 140),
+    });
+
+    window.dispatchEvent(new Event("resize"));
+    await new Promise<void>((resolve) => {
+      window.requestAnimationFrame(() => {
+        resolve();
+      });
+    });
+
+    await waitForAsyncWork(() => {
+      expect(status.classList.contains("is-effort-hidden")).toBe(true);
+      expect(status.classList.contains("is-model-hidden")).toBe(true);
+    });
+  });
+
   it("replaces composer meta with fatal status text", () => {
     const parent = document.createElement("div");
 
     renderComposerShell(parent, "view", "", false, false, "Ask Codex to work on this task...", [], 0, composerCallbacks(), {
       fatal: "Codex app-server disconnected",
-      context: "",
+      context: {
+        cells: [
+          { text: "⣀", placeholder: true },
+          { text: "⣀", placeholder: true },
+          { text: "⣀", placeholder: true },
+          { text: "⣀", placeholder: true },
+        ],
+        percent: "--%",
+      },
       model: "",
       effort: null,
+      planActive: false,
+      autoReviewActive: false,
+      fastActive: false,
     });
 
     expect(parent.querySelector(".codex-panel__composer-meta-fatal")?.textContent).toBe("Codex app-server disconnected");
diff --git a/tests/features/chat/view-model.test.ts b/tests/features/chat/view-model.test.ts
index bcacb23b..9ffad042 100644
--- a/tests/features/chat/view-model.test.ts
+++ b/tests/features/chat/view-model.test.ts
@@ -80,7 +80,13 @@ describe("chat view model", () => {
   it("builds composer meta from context and runtime state", () => {
     const state = createChatState();
     state.activeThreadId = "thread-1";
-    state.effectiveConfig = effectiveConfigFixture({ model: "gpt-5.5", model_reasoning_effort: "high" });
+    state.selectedCollaborationMode = "plan";
+    state.effectiveConfig = effectiveConfigFixture({
+      model: "gpt-5.5",
+      model_reasoning_effort: "high",
+      approvals_reviewer: "auto_review",
+      service_tier: "fast",
+    });
     state.tokenUsage = {
       last: { inputTokens: 42, cachedInputTokens: 0, outputTokens: 2, reasoningOutputTokens: 0, totalTokens: 44 },
       total: { inputTokens: 40, cachedInputTokens: 0, outputTokens: 2, reasoningOutputTokens: 0, totalTokens: 42 },
@@ -89,9 +95,20 @@ describe("chat view model", () => {
 
     expect(composerMetaViewModel(state, runtimeSnapshotForChatState({ state }))).toEqual({
       fatal: null,
-      context: "ctx ⣿⣶   42%",
+      context: {
+        cells: [
+          { text: "⣿", placeholder: false },
+          { text: "⣶", placeholder: false },
+          { text: "⣀", placeholder: true },
+          { text: "⣀", placeholder: true },
+        ],
+        percent: "42%",
+      },
       model: "gpt-5.5",
       effort: "high",
+      planActive: true,
+      autoReviewActive: true,
+      fastActive: true,
     });
   });
 
@@ -113,7 +130,15 @@ describe("chat view model", () => {
 
     expect(composerMetaViewModel(state, runtimeSnapshotForChatState({ state }))).toMatchObject({
       fatal: null,
-      context: "ctx      --%",
+      context: {
+        cells: [
+          { text: "⣀", placeholder: true },
+          { text: "⣀", placeholder: true },
+          { text: "⣀", placeholder: true },
+          { text: "⣀", placeholder: true },
+        ],
+        percent: "--%",
+      },
       model: "gpt-5.5",
       effort: null,
     });
@@ -129,7 +154,15 @@ describe("chat view model", () => {
     };
 
     expect(composerMetaViewModel(state, runtimeSnapshotForChatState({ state }))).toMatchObject({
-      context: "ctx ⣀     0%",
+      context: {
+        cells: [
+          { text: "⣀", placeholder: true },
+          { text: "⣀", placeholder: true },
+          { text: "⣀", placeholder: true },
+          { text: "⣀", placeholder: true },
+        ],
+        percent: " 0%",
+      },
     });
   });
 
@@ -139,9 +172,20 @@ describe("chat view model", () => {
 
     expect(composerMetaViewModel(state, runtimeSnapshotForChatState({ state }))).toEqual({
       fatal: "Codex app-server disconnected",
-      context: "",
+      context: {
+        cells: [
+          { text: "⣀", placeholder: true },
+          { text: "⣀", placeholder: true },
+          { text: "⣀", placeholder: true },
+          { text: "⣀", placeholder: true },
+        ],
+        percent: "--%",
+      },
       model: "",
       effort: null,
+      planActive: false,
+      autoReviewActive: false,
+      fastActive: false,
     });
   });
 
diff --git a/tests/styles.test.ts b/tests/styles.test.ts
index 47e91caa..116edf76 100644
--- a/tests/styles.test.ts
+++ b/tests/styles.test.ts
@@ -110,9 +110,16 @@ describe("chat toolbar CSS", () => {
 
   it("keeps the composer context status text fixed-width", () => {
     const contextMeter = /\.codex-panel__composer-meta-context \{(?<body>[^}]+)\}/.exec(styles)?.groups?.["body"] ?? "";
+    const contextDots = /\.codex-panel__composer-meta-context-dots \{(?<body>[^}]+)\}/.exec(styles)?.groups?.["body"] ?? "";
+    const placeholderDot =
+      /\.codex-panel__composer-meta-context-dot\.is-placeholder \{(?<body>[^}]+)\}/.exec(styles)?.groups?.["body"] ?? "";
+    const contextPercent = /\.codex-panel__composer-meta-context-percent \{(?<body>[^}]+)\}/.exec(styles)?.groups?.["body"] ?? "";
 
     expect(contextMeter).toContain("font-variant-numeric: tabular-nums");
-    expect(contextMeter).toContain("white-space: pre");
+    expect(contextMeter).toContain("white-space: nowrap");
+    expect(contextDots).toContain("display: inline-flex");
+    expect(placeholderDot).toContain("color: var(--text-faint)");
+    expect(contextPercent).toContain("white-space: pre");
     expect(styles).not.toContain(".codex-panel__composer-meta-context::before");
     expect(styles).not.toContain("conic-gradient");
   });
@@ -125,6 +132,34 @@ describe("chat toolbar CSS", () => {
     expect(composerMetaFatal).toContain("padding-inline-start: calc(var(--size-4-1) / 2)");
   });
 
+  it("keeps composer runtime mode icons compact and state-colored", () => {
+    const modes = /\.codex-panel__composer-meta-modes \{(?<body>[^}]+)\}/.exec(styles)?.groups?.["body"] ?? "";
+    const field = /\.codex-panel__composer-meta-field \{(?<body>[^}]+)\}/.exec(styles)?.groups?.["body"] ?? "";
+    const labels =
+      /\.codex-panel__composer-meta-model,\n\.codex-panel__composer-meta-effort \{(?<body>[^}]+)\}/.exec(styles)?.groups?.["body"] ?? "";
+    const icon = /\.codex-panel__composer-meta-icon \{(?<body>[^}]+)\}/.exec(styles)?.groups?.["body"] ?? "";
+    const activeIcon = /\.codex-panel__composer-meta-icon\.is-active \{(?<body>[^}]+)\}/.exec(styles)?.groups?.["body"] ?? "";
+    const iconSvg = /\.codex-panel__composer-meta-icon svg \{(?<body>[^}]+)\}/.exec(styles)?.groups?.["body"] ?? "";
+
+    expect(modes).toContain("gap: var(--codex-panel-control-gap)");
+    expect(field).toContain("display: inline-flex");
+    expect(field).toContain("flex: 0 0 auto");
+    expect(field).toContain("gap: var(--size-4-2)");
+    expect(labels).toContain("white-space: nowrap");
+    expect(labels).not.toContain("text-overflow");
+    expect(icon).toContain("width: var(--codex-panel-size-icon-xs)");
+    expect(icon).toContain("height: var(--codex-panel-size-icon-xs)");
+    expect(activeIcon).toContain("color: var(--icon-color-active)");
+    expect(iconSvg).toContain("width: calc(var(--codex-panel-size-icon-xs) - var(--codex-panel-rail-width) / 2)");
+    expect(iconSvg).toContain("height: calc(var(--codex-panel-size-icon-xs) - var(--codex-panel-rail-width) / 2)");
+    expect(styles).toContain(
+      ".codex-panel__composer-meta-status.is-effort-hidden .codex-panel__composer-meta-field--effort {\n  display: none;",
+    );
+    expect(styles).toContain(
+      ".codex-panel__composer-meta-status.is-model-hidden .codex-panel__composer-meta-field--model {\n  display: none;",
+    );
+  });
+
   it("keeps nav inline input reset in the shared primitive", () => {
     const navInlineInput =
       /\.codex-panel-ui__nav-inline-input\.codex-panel-ui__nav-inline-input \{(?<body>[^}]+)\}/.exec(styles)?.groups?.["body"] ?? "";