fix: pre-release cleanup of review findings and tracker leftovers

.github/workflows/compat.yml

@@ -102,3 +102,31 @@ jobs:
 
       - name: Test the page side
         run: pnpm exec vitest run --root packages/devtools --config vitest.compat.config.ts
+
+  vite:
+    name: Vite ${{ matrix.vite }}
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    strategy:
+      fail-fast: false
+      matrix:
+        # The `vite` peer range is `>=6`; the workspace installs the newest major.
+        vite: ['6', '7']
+    steps:
+      - uses: actions/checkout@v7
+        with:
+          persist-credentials: false
+
+      - uses: ./.github/actions/setup
+
+      - name: Install Vite ${{ matrix.vite }}
+        env:
+          VITE_MAJOR: ${{ matrix.vite }}
+        # Only this job's copy of the workspace changes; the committed lockfile stays as it is.
+        run: |
+          printf "\noverrides:\n  vite: '^%s.0.0'\n" "$VITE_MAJOR" >> pnpm-workspace.yaml
+          pnpm install --no-frozen-lockfile
+          echo "- vite $(node -p "require('vite/package.json').version")" | tee -a "$GITHUB_STEP_SUMMARY"
+
+      - name: Test the Vite plugin
+        run: pnpm exec vitest run --root packages/devtools src/__tests__/vite- src/__tests__/lan-address.test.ts

.github/workflows/docs-check.yml

@@ -37,6 +37,7 @@ jobs:
           elif [ "$NO_DOCS" = "true" ]; then
             echo "Code changed without docs, marked no-docs."
           else
-            echo "::warning title=Docs not updated::This pull request changes code but no page in apps/docs/src/content. Update the docs in this pull request, or add the no-docs label and say why in the description."
+            echo "::error title=Docs not updated::This pull request changes code but no page in apps/docs/src/content. Update the docs in this pull request, or add the no-docs label and say why in the description."
             printf '%s\n' "$code"
+            exit 1
           fi

CONTRIBUTING.md

@@ -29,7 +29,7 @@ By taking part you agree to the [Code of Conduct](./CODE_OF_CONDUCT.md). Report
 - **A new tab, RPC function or agent tool:** follow the steps in [Development setup](./apps/docs/src/content/contributing/development.md). Describe what an agent tool returns and when it is empty, and add tests.
 - **UI changes:** follow the [UI guidelines](docs/contributing/ui-guidelines.md). Use the theme variables, the SCSS mixins and the shared dropdown.
 - **Docs changes:** follow the [writing guide](./apps/docs/src/content/contributing/writing-docs.md). Run the docs site with `pnpm docs:dev`.
-- **Keep the docs in step with the code:** when a pull request changes behaviour, an option, a UI label or an agent tool, update the matching page in `apps/docs` in the same pull request. If no docs change is needed, add the `no-docs` label and say why in the description. The Docs check workflow warns when code changes without docs.
+- **Keep the docs in step with the code:** when a pull request changes behaviour, an option, a UI label or an agent tool, update the matching page in `apps/docs` in the same pull request. If no docs change is needed, add the `no-docs` label and say why in the description. The Docs check workflow fails when code changes without docs.
 
 ## Open an issue
 

app/src/__tests__/analog-views.test.ts

@@ -317,6 +317,38 @@ describe('Analog Nitro tasks', () => {
     expect((fixture.nativeElement as HTMLElement).textContent).toContain('[redacted]');
   });
 
+  it('keeps the confirm panel and payload open when a run fails, and closes it after a run that works', async () => {
+    let ok = false;
+    const { rpcClient } = client({
+      'analog-runtime-config': () => ({ env: [], runtimeConfig: [], options: [] }),
+      'analog-nitro': () => ({
+        plugins: [],
+        tasks: [{ name: 'db:migrate', file: '/src/server/tasks/db/migrate.ts' }],
+        storage: [],
+        cachedRules: [],
+        cacheDirs: [],
+        entries: [],
+        notes: [],
+      }),
+      'analog-run-nitro-task': () =>
+        ok
+          ? { ok: true, name: 'db:migrate', status: 200, ms: 1, output: '' }
+          : { ok: false, name: 'db:migrate', error: 'Task failed.' },
+    });
+    const fixture = TestBed.createComponent(AnalogRuntime);
+    fixture.componentRef.setInput('rpc', rpcClient);
+    await settle(fixture);
+    const runtime = fixture.componentInstance;
+    runtime.askTask('db:migrate');
+    runtime.taskPayload.set('{"dry":true}');
+    await runtime.runTask('db:migrate');
+    expect(runtime.taskConfirm()).toBe('db:migrate');
+    expect(runtime.taskPayload()).toBe('{"dry":true}');
+    ok = true;
+    await runtime.runTask('db:migrate');
+    expect(runtime.taskConfirm()).toBeNull();
+  });
+
   it('starts a task once, even when Run task is used again while it runs', async () => {
     let answer!: (value: unknown) => void;
     const { rpcClient, calls } = client({

app/src/__tests__/app-shell.test.ts

@@ -404,6 +404,22 @@ describe('App scroll memory while content loads', () => {
   });
 });
 
+describe('App connection error', () => {
+  it('links to the troubleshooting docs when it cannot reach the server', async () => {
+    const fixture = TestBed.createComponent(App);
+    document.body.appendChild(host(fixture));
+    await settle(fixture);
+    fixture.componentInstance.connectionFailed.set(true);
+    await settle(fixture);
+    const link = host(fixture).querySelector<HTMLAnchorElement>('.connection-error a')!;
+    expect(link.getAttribute('href')).toBe(
+      'https://pangular-inspector.dev/getting-started/troubleshooting/#the-panel-says-disconnected',
+    );
+    expect(link.getAttribute('rel')).toBe('noopener noreferrer');
+    fixture.destroy();
+  });
+});
+
 describe('App counts launcher setting', () => {
   it('sends the stored counts launcher to the popup once the panel connects', async () => {
     localStorage.setItem('pangular-pref:pill', 'true');

app/src/__tests__/component-pick-keys.test.ts

@@ -65,6 +65,13 @@ describe('keyboard pick', () => {
     expect(fixture.componentInstance.announcement()).toBe(
       'App <app-root>. Press Enter to pick it.',
     );
+    // The same component again changes the live text, so a screen reader repeats it.
+    press('ArrowDown');
+    await settle(fixture);
+    expect(fixture.componentInstance.announcement()).toBe(
+      'App <app-root>. Press Enter to pick it.\u00a0',
+    );
+    expect(fixture.componentInstance.pickMessage()).toBe('App <app-root>. Press Enter to pick it.');
     expect(press('Enter').defaultPrevented).toBe(true);
     expect(calls.at(-1)).toEqual({
       name: 'request-component-pick-move',

app/src/__tests__/page-conventions.test.ts

@@ -110,3 +110,31 @@ describe('pages use the shared state component', () => {
     for (const { file, tag } of states) expect(tag, file).toMatch(/\(clear\)=/);
   });
 });
+
+describe('pages with a keyboard list use the shared roving list', () => {
+  it('has no hand-written arrow key list handler left in a page', async () => {
+    // Trees, charts and the graph move in two dimensions and keep their own keys.
+    const handWritten = [...(await pageSources())]
+      .filter(([, source]) => /\['ArrowDown',\s*'ArrowUp',\s*'Home',\s*'End'\]/.test(source))
+      .map(([file]) => file);
+    expect(handWritten).toEqual([]);
+  });
+
+  it('puts appRovingList on the lists that moved to it', async () => {
+    const sources = await pageSources();
+    const lists = {
+      'capacitor-inspector.ts': '[data-cap-call]',
+      'pipes-inspector.ts': '[data-pipe-row]',
+      'network-inspector.ts': '',
+      'query-inspector.ts': '',
+      'signal-inspector.ts': '',
+      'store-inspector.ts': '',
+      'timeline.ts': '',
+    };
+    for (const [file, selector] of Object.entries(lists)) {
+      const source = sources.get(file) ?? '';
+      expect(source, file).toContain('appRovingList="');
+      if (selector) expect(source, file).toContain(`appRovingList="${selector}"`);
+    }
+  });
+});

app/src/__tests__/pipes-record-page.test.ts

@@ -166,6 +166,32 @@ describe('pipes live data per page', () => {
     expect(fixture.componentInstance.liveFor('price')?.instanceCount).toBe(2);
   });
 
+  it('shows the page another tab asked for over the page the panel belongs to', async () => {
+    scopeToPage('A');
+    const fixture = TestBed.createComponent(PipesInspector);
+    fixture.componentRef.setInput('pageId', 'B');
+    fixture.componentRef.setInput(
+      'rpc',
+      withPages({
+        pipes: [live(5)],
+        async: [],
+        reportedAt: 0,
+        instrumented: [],
+        pages: [
+          { pageId: 'A', pipes: [live(3)], async: [] },
+          { pageId: 'B', pipes: [live(2)], async: [] },
+        ],
+      }),
+    );
+    for (let i = 0; i < 4; i++) {
+      await new Promise((resolve) => setTimeout(resolve));
+      await fixture.whenStable();
+    }
+    expect(fixture.componentInstance.liveFor('price')?.instanceCount).toBe(2);
+    fixture.componentRef.setInput('pageId', null);
+    expect(fixture.componentInstance.liveFor('price')?.instanceCount).toBe(3);
+  });
+
   it('lists the template usages of a custom pipe', async () => {
     const fixture = await render(
       withPages({ pipes: [], async: [], reportedAt: 0, instrumented: [] }),

app/src/__tests__/popout-window.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from 'vitest';
-import { popoutOpener, returnFromPopout } from '../shell-prefs';
+import { popoutOpener, postToOpener, returnFromPopout } from '../shell-prefs';
 
 /** A stand-in for a window, with the fields the helpers read. */
 function fakeWindow(name: string, opener: unknown, referrer = '') {
@@ -42,4 +42,13 @@ describe('the pop-out window', () => {
     );
     expect(returnFromPopout(fakeWindow('pangular-inspector-k3x9', opener))).toBe(false);
   });
+
+  it('sends a setting to the app page only from the window the popup opened', () => {
+    const opener = { postMessage: vi.fn(), location: { origin: 'http://localhost:4200' } };
+    const message = { type: 'pangular:popup-pill', pill: true };
+    expect(postToOpener(message, fakeWindow('pangular-inspector-k3x9', opener))).toBe(true);
+    expect(opener.postMessage).toHaveBeenCalledWith(message, 'http://localhost:4200');
+    expect(postToOpener(message, fakeWindow('other', opener))).toBe(false);
+    expect(opener.postMessage).toHaveBeenCalledTimes(1);
+  });
 });

app/src/__tests__/roving-list.test.ts

@@ -59,6 +59,31 @@ describe('RovingList', () => {
     expect(tabStops(fixture)).toEqual(['c']);
   });
 
+  it('moves the Tab stop to a row that becomes selected without focus', async () => {
+    const fixture = mount();
+    await settle(fixture);
+    expect(tabStops(fixture)).toEqual(['a']);
+    // A click in Safari selects a row without focusing it.
+    fixture.componentInstance.selected.set('c');
+    await settle(fixture);
+    expect(tabStops(fixture)).toEqual(['c']);
+  });
+
+  it('keeps the Tab stop when a row that stays selected changes another class', async () => {
+    const fixture = mount();
+    const outside = document.createElement('button');
+    document.body.appendChild(outside);
+    fixture.componentInstance.selected.set('c');
+    await settle(fixture);
+    rows(fixture)[0].focus();
+    outside.focus();
+    await settle(fixture);
+    expect(tabStops(fixture)).toEqual(['a']);
+    rows(fixture)[2].classList.add('hovered');
+    await settle(fixture);
+    expect(tabStops(fixture)).toEqual(['a']);
+  });
+
   it('moves focus with the arrow keys, Home and End, and stops at the ends', async () => {
     const fixture = mount();
     await settle(fixture);

app/src/__tests__/signal-focus.test.ts

@@ -3,8 +3,8 @@ import type { DevframeRpcClient } from 'devframe/client';
 import { afterEach, describe, expect, it } from 'vitest';
 import { SignalInspector } from '../pages/signal-inspector';
 
-const graphOf = (componentId: string) => ({
-  pageId: 'p1',
+const graphOf = (componentId: string, pageId = 'p1') => ({
+  pageId,
   component: { id: componentId, name: 'Cart', tag: 'app-cart', path: 'app-cart' },
   nodes: [
     {
@@ -78,4 +78,36 @@ describe('SignalInspector focus', () => {
     await settle(fixture);
     expect(fixture.componentInstance.selectedId()).toBe('1');
   });
+
+  it('forgets the focused signal when another component is picked', async () => {
+    const fixture = TestBed.createComponent(SignalInspector);
+    const { client, push } = fakeClient();
+    fixture.componentRef.setInput('rpc', client);
+    document.body.append(fixture.nativeElement);
+    await settle(fixture);
+
+    fixture.componentRef.setInput('focus', { componentId: 'c1', pageId: 'p1', key: 'count' });
+    await settle(fixture);
+    fixture.componentInstance.pickComponent('c2');
+    push({ graph: graphOf('c1'), pages: { p1: graphOf('c1') } });
+    await settle(fixture);
+    expect(fixture.componentInstance.selectedId()).toBeNull();
+  });
+
+  it('shows the page a focus names once that page reports its graph', async () => {
+    const fixture = TestBed.createComponent(SignalInspector);
+    const { client, push } = fakeClient();
+    fixture.componentRef.setInput('rpc', client);
+    document.body.append(fixture.nativeElement);
+    await settle(fixture);
+
+    fixture.componentRef.setInput('focus', { componentId: 'c5', pageId: 'p2' });
+    await settle(fixture);
+    expect(fixture.componentInstance.shownPageId()).toBe('p1');
+
+    // p1 reports last, but the focus asked for p2.
+    push({ graph: graphOf('c0'), pages: { p1: graphOf('c0'), p2: graphOf('c5', 'p2') } });
+    await settle(fixture);
+    expect(fixture.componentInstance.shownPageId()).toBe('p2');
+  });
 });

app/src/__tests__/store-state-tree.test.ts

@@ -18,6 +18,14 @@ describe('stateRows', () => {
     expect(childPath('cart', 'items')).toBe('cart.items');
     expect(childPath('cart.items', 0)).toBe('cart.items[0]');
     expect(childPath('user', 'first name')).toBe('user["first name"]');
+    // The collector writes a top-level key that needs quotes the same way.
+    expect(childPath('', 'display name')).toBe('"display name"');
+  });
+
+  it('marks a changed key that needs quotes', () => {
+    const rows = stateRows(state, { changed: ['user["first name"]'] }).rows;
+    expect(rows.find((r) => r.path === 'user["first name"]')!.changed).toBe(true);
+    expect(rows.find((r) => r.path === 'user')!.holdsChange).toBe(true);
   });
 
   it('opens the first level, nodes holding a change, and what the user opened', () => {