refactor: adopt OverflowTabs for hand-rolled tab/nav strips (design-system p9/p10)

[vybe]

Summary

OverflowTabs.vue (#1114) is the tab primitive — overflowing tabs collapse into a counted "+N more" menu, re-measured on resize (principles 9/10). Three audited surfaces hand-roll tab/nav strips instead, and the raw-color scanner counts 13 overflow-x-auto strips repo-wide that are adoption candidates.

Context

Found by the 2026-07-31 design-system audit (dev@022710dc). The worst case is NavBar: its link row is an overflow-x-auto strip with the scrollbar suppressed, so overflowed links are invisible and undiscoverable — there is no signal that more navigation exists. Settings mitigated its ten-tab overflow by widening the page (#1862) rather than adopting the primitive, so sub-7xl widths still overflow silently.

Acceptance Criteria

• src/frontend/src/views/Settings.vue:23 renders its tabs through OverflowTabs
• src/frontend/src/views/Operations.vue:22 renders its six tabs through OverflowTabs (v-model on activeTab)
• src/frontend/src/components/NavBar.vue:25 nav links use a priority+ pattern: visible links + counted "More ▾" menu, no hidden-scrollbar overflow
• Scanner candidates below are triaged: tab-strip-like ones migrate; legitimate horizontal-scroll containers (wide tables) are marked as such
• No tab strip wraps to a second row or truncates silently

Technical Notes

Scanner candidates (overflow-x-auto, tab-nav-shaped) to triage:

• src/frontend/src/components/DashboardPanel.vue:283
• src/frontend/src/components/FileSharingPanel.vue:55
• src/frontend/src/components/LoopsPanel.vue:314
• src/frontend/src/components/NeverminedPanel.vue:187
• src/frontend/src/components/SharingPanel.vue:232
• src/frontend/src/components/process/RoleMatrix.vue:63
• src/frontend/src/components/reports/ReportTable.vue:2
• src/frontend/src/components/settings/McpKeysTab.vue:34 (+ :260)
• src/frontend/src/views/enterprise/Audit.vue:619 (+ :667)

Several of these are bounded tables where horizontal scroll inside the container is correct per principle 7 — triage, don't blanket-convert. Advisory from the audit: src/frontend/src/views/enterprise/Audit.vue:526 hand-rolls a two-tab role="tablist" pill strip (cannot overflow, but diverges from the primitive).

[dolho]

/claim

[github-actions]

@dolho This issue is already assigned to dolho. Use /unclaim first if you want to take over.

[dolho]

Handled as a stacked draft: #2781 (on top of #2780 / #1924, which stacks on #2778 / #1923).

All five ACs addressed:

• Settings.vue and Operations.vue render their tabs through OverflowTabs.
• NavBar.vue gets the priority+ pattern — visible links plus a counted "N more ▾", no hidden-scrollbar overflow. It deliberately does not mount the primitive: its items are <router-link>s that must keep a real href (middle-click, Workspace _blank, per-link active predicates, a badge and a pill), while the primitive renders selection <button>s. The fit arithmetic is shared instead, via a new pure utils/overflowFit.js that both surfaces now call.
• The nine scanner candidates are triaged: all nine are bounded wide tables or preformatted code blocks, where horizontal scroll inside the container is the correct treatment per principle 7 — collapsing columns into a menu would hide data, not navigation. None migrate; each is marked in place, and a ratchet fails if a marker disappears. The advisory two-pill strip in Audit.vue is a segmented control (two short fixed labels, cannot overflow) and is recorded as such rather than left unexplained.
• No strip wraps or truncates: verified against a local dev instance across 1440 → 700 and back up again, plus Settings collapsing at 560 and Operations at 760.

One thing worth review attention: the first version hid four of five links at 1440px. The row sized to its own min-content, so the fit rule was correct about a container that was lying to it — a row that scrolls sizes to its content, but a row that collapses has to be told how much space it actually has. The suite could not catch that; the live check did.

Colour note: new code is semantic-token only, so the nav active underline moves from raw blue-500/400 to action-primary (the primitive's own active token) and the PRO pill to accent-purple-*. Visible as a slight indigo shift.