Turn the dev status bar into a Linear-style developer toolbar

[ComputelessComputer]

Summary

Problem: After #7259 the developer tooling was still split three ways: the new status bar, React Scan as its own floating toolbar (Vite dev only, third-party dependency), and the Devtools actions in a separate macOS-native NSPanel that other platforms never got. The bar itself also only covered FPS/IPC/memory and had none of the health signals or controls Linear's internal toolbar is built around.

Fix: Remove React Scan and the Devtools panel, fold their features into the bar, and grow the bar into a proper developer toolbar modelled on Linear's (Prod · user · internal · flags … Mem · Delay · Jank · Net · ↓ · _).

Developer bar while typing in a note

The bar

Neutral dark strip, monospace, 24px. Left to right:

• Channel — colored dot + DEV/STAGING, version and short git hash. Click opens the devtools menu (below).
• Plan badge — free / trial 12d / pro / lite, or signed out; tooltip lists subscription status, payment method and entitlements.
• FPS — with a line chart pinned to 60; amber under 80% of the observed peak, red under 50%.
• Jank — share of frames over 34ms per second (a dropped frame at 60Hz), bar chart; amber >3%, red >10%.
• Delay — worst main-thread stall in the last second, measured from a 50ms timer's drift; amber >60ms, red >200ms.
• Renders — React renders per second from our own commit observer; click toggles purple re-render outlines with component labels. Tooltip lists the most rendered components over the last 10s.
• IPC — ↑ invokes / ↓ callbacks per second. Tooltip lists the most invoked Tauri commands (e.g. plugin:db|execute ×3), the Tauri equivalent of Linear's network panel.
• Net — HTTP requests in flight (IPC excluded), with per-second and window totals in the tooltip.
• Mem — host process RSS with a min/max-scaled chart so slow growth stays visible; tooltip shows min/max and the change over the window.
• ↓ — copies a diagnostics snapshot as JSON (build, device, window, every metric's last/avg/min/max/history, top IPC commands, top components, CloudSync status) for pasting into bug reports.
• _ — collapses the bar to a 6px strip (persisted); click the strip to expand.

IPC tooltip listing Tauri commands

The menu

Clicking the channel badge opens a dropdown with, at the top, Theme (system/light/dark) and Toggles — one-click switches for display-affecting settings (floating bar, sidebar folders/tags, tray and dock icons, notification kinds). This is the closest Anarlog equivalent of Linear's feature-flag tiles: flip a build between two states without leaving the current view. Below that are the former Devtools panel groups: Navigation, Toasts, OTA, Notifications, Billing, Countdown, Data (recurring-notes seeder, previously unwired) and Error, with the same handlers as before (devtools-bar/actions.tsx).

Every group and item is self-describing: each submenu opens with a one-line description of what the group is for, and hovering an item shows a short explanation in a tooltip beside the submenu.

Devtools menu with group description and item tooltip

Render tracking without react-scan

devtools-bar/render-hook.ts installs a minimal React DevTools global hook (or chains onto React Refresh's in Vite dev) and must stay the first import of main.tsx, since React only reports commits to a hook that exists before react-dom evaluates. With no subscribers it costs a no-op call per commit, so it is safe in every build. render-tracker.ts walks only the part of the fiber tree React worked on (skipping subtrees whose child pointer is unchanged, the same pruning React DevTools uses), counts PerformedWork composite fibers, and resolves their nearest host nodes; render-outlines.ts draws fading purple rectangles with labels on a fixed canvas. The bar marks its own subtree as ignored so tooltips, menus and dialogs it renders never show up in counts. Because the hook is ours, this works in staging (production React) too, which react-scan could not do.

Render outlines while typing

Removed

• react-scan dependency and its bootstrap in main.tsx (lockfile updated).
• The macOS Devtools panel: Swift DevtoolsPanelManager/DevtoolsPanelView, the devtools_panel_show/hide commands and DevtoolsPanelAction event in plugins/windows (bindings and permissions regenerated), their capability entries, devtools-panel/host.tsx, and the Settings → Developers "Devtools panel" section (Lingui catalogs regenerated).

Copy in the bar is English-only on purpose: it never ships in stable, so it is kept out of the Lingui catalogs.

Verification

• pnpm -F desktop typecheck, pnpm -F @anlg/plugin-windows typecheck
• pnpm -F desktop test — 435 files / 3728 tests pass, including tests for render-hook, render-tracker (mount/update pruning, subtree ignoring), metrics (IPC per-command counts, HTTP in-flight tracking, self-exclusion, tick sampling) and the bar (tones, plan badge, menu actions and descriptions, outline toggle, copy, collapse persistence)
• pnpm exec oxlint --quiet --format=github apps/desktop/src/ — 0 errors
• lingui extract --clean + lingui compile --strict — catalogs stable. Note: @lingui/cli 6 silently no-ops on Node < 22.18 (import.meta.main), so this was run with Node 22.23; CI's node-version: "22" resolves to a current 22.x.
• pnpm exec dprint check on changed files; pnpm install --frozen-lockfile passes
• cargo test -p tauri-plugin-windows (regenerates bindings/permissions, committed). cargo clippy --no-deps -D warnings on the plugin reports only pre-existing findings in untouched code.
• Full tauri dev build on Linux compiled and ran. Manually verified in the app: live FPS/Jank/Delay/IPC/Net/Mem with charts, FPS turning amber under load, idle Renders at 0 and rising while typing with labelled outlines, all tooltips (IPC listing plugin:db|execute ×N, Renders listing components), ↓ showing "Diagnostics copied" and pasting valid JSON, _ collapsing to a strip and expanding again, Theme switching to dark and back, Toggles flipping "Sidebar tags" with the menu staying open, group descriptions and item tooltips in every submenu without breaking hover/click, and the action groups (toast preview, trial dialog, error trigger) working.
• Not run locally: swift build --package-path plugins/windows/swift-lib (macOS only; Swift changes are file deletions plus removal of the matching RustBridge symbol and test stub) and cargo check -p desktop --features direct-distribution|app-store.

_{To show artifacts inline, enable in settings.}

  

[netlify]

✅ Deploy Preview for anarlog canceled.

Name	Link
🔨 Latest commit	f678c40
🔍 Latest deploy log	https://app.netlify.com/projects/anarlog/deploys/6a98be3713e2130008d2d8a3

[cla-assistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[cursor]

Cursor Bugbot has reviewed your changes using default effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 2c5dbd7. Configure here.}