diff --git a/docs/superpowers/plans/2026-07-30-settings-navigation-stream-performance.md b/docs/superpowers/plans/2026-07-30-settings-navigation-stream-performance.md new file mode 100644 index 0000000..4850026 --- /dev/null +++ b/docs/superpowers/plans/2026-07-30-settings-navigation-stream-performance.md @@ -0,0 +1,456 @@ +# Settings Navigation And Stream Performance Implementation Plan + +> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** Make top-level settings security-only, switch internal pages without document reloads, and let the browser observe an idle SSE connection immediately. + +**Architecture:** Keep the existing pathname-based `AppShell` and add one focused browser-navigation Hook that owns pathname state, eligible link interception, history traversal, focus, and scroll restoration. Keep the instance editor route intact while turning the legacy top-level instance-settings route into the existing redirect route shape. Preserve streaming proxy behavior and explicitly flush downstream headers as soon as upstream headers arrive. + +**Tech Stack:** React 19, TypeScript 5.9, Testing Library, Vitest/jsdom, Node HTTP, Chrome DevTools Protocol browser E2E + +## Global Constraints + +- Do not add a third-party router. +- Top-level settings contains only password protection and HTTP/HTTPS security information. +- `/settings/instances` resolves as a redirect to `/settings/system`. +- `/settings/instances/:instanceId` remains available for instance editing from node details. +- Eligible same-origin links use `history.pushState`; external, download, target, cross-origin, and modified-click links retain browser behavior. +- Browser back and forward remain functional through `popstate`. +- Page changes focus `#main-content` and scroll to the top. +- `AppShell` remains mounted across top-navigation changes so the event subscription is not recreated. +- SSE remains streaming and authenticated; do not replace it with polling or conceal genuine reconnect states. +- Production code changes must follow an observed failing test. +- Do not push the resulting commits unless the user explicitly requests it. + +--- + +## File Structure + +- `apps/web/src/app-shell.tsx`: route ownership and the three-entry global navigation; no browser event ownership. +- `apps/web/src/app-shell.integration.test.tsx`: route, navigation, security-only settings, and instance-editor regression coverage. +- `apps/web/src/navigation/use-browser-pathname.ts`: browser pathname state and document-level navigation interception. +- `apps/web/src/navigation/use-browser-pathname.test.tsx`: jsdom behavior contract for same-page navigation. +- `apps/web/src/main.tsx`: thin browser root that supplies the Hook pathname to the persistent `AppShell`. +- `apps/web/src/styles.css`: remove now-unused top-level settings sub-navigation styles. +- `apps/api/src/canary-gateway.ts`: downstream proxy header forwarding. +- `apps/api/src/canary-gateway.test.ts`: idle SSE header-flush regression. +- `scripts/real-browser-e2e.mjs`: browser-level assertions for navigation persistence, request volume, focus, and live status. + +### Task 1: Security-Only Top-Level Settings Route + +**Files:** +- Modify: `apps/web/src/app-shell.integration.test.tsx` +- Modify: `apps/web/src/app-shell.tsx` +- Modify: `apps/web/src/styles.css` + +**Interfaces:** +- Consumes: existing `resolveRoute(input: string): ResolvedRoute` and `AppShellProps`. +- Produces: `resolveRoute('/settings/instances')` with `{ kind: 'redirect', to: '/settings/system' }`; global settings link `href="/settings/system"`. + +- [ ] **Step 1: Write failing route and rendering tests** + +Add an explicit `resolveRoute` import and assertions to `app-shell.integration.test.tsx`: + +```tsx +expect(resolveRoute('/settings/instances')).toMatchObject({ + kind: 'redirect', + to: '/settings/system', +}); +expect(resolveRoute('/settings/instances/bravo')).toMatchObject({ + kind: 'settings-instance-detail', + params: { instanceId: 'bravo' }, +}); +``` + +Update the global-workspace test so settings points directly to `/settings/system`, the system settings content renders, and there is no top-level settings sub-navigation: + +```tsx +expect(within(navigation).getByRole('link', { name: '设置' })).toHaveAttribute( + 'href', + '/settings/system', +); +rerender(); +expect(screen.getByRole('heading', { name: '系统与安全' })).toBeTruthy(); +expect(screen.queryByRole('navigation', { name: '设置导航' })).toBeNull(); +``` + +Render `/settings/instances` with a spying Fleet source and assert it renders security settings without loading Fleet: + +```tsx +const load = vi.fn().mockResolvedValue(snapshot); +render( + , +); +expect(screen.getByRole('heading', { name: '系统与安全' })).toBeTruthy(); +expect(load).not.toHaveBeenCalled(); +``` + +- [ ] **Step 2: Run the focused test and verify failure** + +Run: `corepack pnpm exec vitest run apps/web/src/app-shell.integration.test.tsx` + +Expected: FAIL because settings still links to `/settings/instances`, renders the settings sub-navigation, and owns the Fleet-backed instance settings page. + +- [ ] **Step 3: Implement the minimal settings route change** + +In `resolveRoute`, remove `/settings/instances` from `staticRoutes` and return the redirect before dynamic instance-edit matching: + +```tsx +if (pathname === '/settings/instances') + return { kind: 'redirect', pathname, to: '/settings/system' }; +``` + +Change the global item and remove the obsolete page branch and import: + +```tsx +{ section: 'settings', href: '/settings/system', label: '设置', icon: 'settings' } +``` + +Delete the conditional `