feat(gui): Usage workspace view

[Wibias]

Summary

• Add a Usage workspace layout (section rail + main pane) matching Models/Subagents
• Wire it to the global sidebar Classic/Workspace preference (no per-page toggle)
• Stack via @container usage-workspace when the shell is narrow; keep mobile media query
• Add usage.section.overview i18n (en/de/ja/ko/zh/ru) and focused GUI contract tests

Test plan

• Open Usage in Classic — stacked panels unchanged
• Switch sidebar to Workspace — rail sections + main pane
• Navigate Overview / Models / Providers / Coverage
• Models search still filters in workspace mode
• Range/surface filters still reload data in both modes
• Narrow window stacks rail above main (~720px container)
• bun test ./gui/tests/usage-workspace.test.ts
• bun run typecheck

Summary by CodeRabbit

• New Features
  • Added a “workspace” layout for the Usage page with a left-rail section switcher (Overview, Models, Providers, Coverage) and responsive single-column behavior.
  • Usage now honors the current view mode, and workspace mode hides the Codex auth entry from the sidebar navigation.
  • Added the localized “Overview” label to the Usage UI across supported languages.
• Bug Fixes
  • Improved Logs auto-refresh so silent polling no longer causes loading flicker or unnecessary state changes.

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@gui/src/pages/Logs.tsx`:
- Around line 280-297: Update fetchLogs to maintain an AbortController for the
active request, aborting the previous request before starting each new call and
aborting it during the owning effect cleanup. Pass the signal to fetch, ignore
AbortError in the catch path, and ensure aborted or stale requests cannot update
logs, errors, or loading state.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 4d1f2520-db3e-4a50-bf7b-3ea17729d276

📥 Commits

Reviewing files that changed from the base of the PR and between 545d9cd and df59b24.

📒 Files selected for processing (13)

• gui/src/App.tsx
• gui/src/i18n/de.ts
• gui/src/i18n/en.ts
• gui/src/i18n/ja.ts
• gui/src/i18n/ko.ts
• gui/src/i18n/ru.ts
• gui/src/i18n/zh.ts
• gui/src/pages/Logs.tsx
• gui/src/pages/Usage.tsx
• gui/src/styles-usage-workspace.css
• gui/tests/logs-auto-refresh.test.tsx
• gui/tests/usage-workspace.test.ts
• gui/tests/workspace-sidebar-codex-auth.test.ts

[coderabbitai]

🩺 Stability & Availability | 🔵 Trivial | ⚡ Quick win

No cancellation/sequencing for polling fetch — stale response can overwrite fresher state.

fetchLogs fires a bare fetch(${apiBase}/api/logs) on every call (initial, retry, and every 2s silent poll) with no AbortController and no "latest request wins" guard. If two overlapping requests resolve out of order (e.g., a slow non-silent retry started at t=0 finishes after a silent poll fired at t=2000 already updated logs), the older response's setLogs/setError call will win and clobber the newer state. There's also no timeout, so a hung request leaves loading (and the disabled Retry button) stuck indefinitely, and repeated intervals can pile up in-flight requests against a slow backend.

Add an AbortController per call, abort the previous one before starting a new one (and on cleanup), and ignore AbortError in the catch:

🔧 Suggested fix

+  const fetchAbortRef = useRef<AbortController | null>(null);
   const fetchLogs = useCallback(async (opts?: { silent?: boolean }) => {
     const silent = opts?.silent === true;
+    fetchAbortRef.current?.abort();
+    const controller = new AbortController();
+    fetchAbortRef.current = controller;
     if (!silent) setLoading(true);
     try {
-      const res = await fetch(`${apiBase}/api/logs`);
+      const res = await fetch(`${apiBase}/api/logs`, { signal: controller.signal });
       if (!res.ok) throw new Error(`${res.status} ${res.statusText}`.trim());
       setLogs(await res.json());
       setError(null);
     } catch (cause) {
+      if (cause instanceof DOMException && cause.name === "AbortError") return;
       if (silent) return;
       const detail = cause instanceof Error ? cause.message : "";
       setError(detail ? `${t("logs.loadError")} ${detail}` : t("logs.loadError"));
     } finally {
       if (!silent) setLoading(false);
     }
   }, [apiBase, t]);

Also applies to: 299-305

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@gui/src/pages/Logs.tsx` around lines 280 - 297, Update fetchLogs to maintain
an AbortController for the active request, aborting the previous request before
starting each new call and aborting it during the owning effect cleanup. Pass
the signal to fetch, ignore AbortError in the catch path, and ensure aborted or
stale requests cannot update logs, errors, or loading state.