feat: harden workflow gates and expose token usage

frontend/src/shell/SteerInput.test.tsx

@@ -2,8 +2,10 @@
 import { render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { http, HttpResponse } from "msw";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { server } from "../test/msw";
-import { SteerInput } from "./SteerInput";
+import { useSessionStore } from "../store/sessionStore";
+import { ComposerFooter, ContextGauge, SteerInput } from "./SteerInput";
 
 beforeEach(() => {
   server.use(
@@ -83,6 +85,52 @@ test("marks the composer as awaiting input only when requested", () => {
   expect(input).toHaveClass("thot-awaiting-input");
 });
 
+test("the context gauge uses green, yellow, and red at the requested thresholds", () => {
+  const { rerender } = render(<ContextGauge pct={0.699} />);
+  expect(screen.getByLabelText("Context usage 70%")).toHaveAttribute("data-level", "green");
+
+  rerender(<ContextGauge pct={0.7} />);
+  expect(screen.getByLabelText("Context usage 70%")).toHaveAttribute("data-level", "yellow");
+
+  rerender(<ContextGauge pct={0.85} />);
+  expect(screen.getByLabelText("Context usage 85%")).toHaveAttribute("data-level", "yellow");
+
+  rerender(<ContextGauge pct={0.851} />);
+  expect(screen.getByLabelText("Context usage 85%")).toHaveAttribute("data-level", "red");
+});
+
+test("footer shows cumulative k-token counters after workspace and context gauge after thinking", async () => {
+  server.use(
+    http.get("http://localhost:8787/settings", () => HttpResponse.json({
+      workspace: "psd", provider: "zai", model: "glm-5.2", thinking: "medium",
+    })),
+    http.get("http://localhost:8787/workspaces", () => HttpResponse.json([{ name: "psd" }])),
+    http.get("http://localhost:8787/models", () => HttpResponse.json({
+      models: [{ provider: "zai", id: "glm-5.2", name: "GLM-5.2", reasoning: true }],
+    })),
+  );
+  useSessionStore.getState().resetSession();
+  useSessionStore.getState().applyEvent({
+    type: "usage",
+    usage: {
+      input: 110_348,
+      cacheRead: 633_344,
+      output: 33_652,
+      totalTokens: 55_935,
+      contextWindow: 200_000,
+    },
+  });
+  const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  render(<QueryClientProvider client={client}><ComposerFooter /></QueryClientProvider>);
+
+  const counters = screen.getByText("110k/633k/34k");
+  const workspace = await screen.findByRole("combobox", { name: "Workspace" });
+  const gauge = screen.getByLabelText("Context usage 28%");
+  const thinking = await screen.findByRole("combobox", { name: "Thinking level" });
+  expect(workspace.compareDocumentPosition(counters) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  expect(thinking.compareDocumentPosition(gauge) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+});
+
 test("pulses the stop dot only while the harness is working", () => {
   const { rerender } = render(<SteerInput sessionId="s1" working />);
   const dot = () =>