@event4u/agent-config 17.0.0 → 17.2.0

package/src/scripts/code_graph/map_verify.ts

@@ -0,0 +1,140 @@
+/**
+ * Render check for `agents/map/index.html`.
+ *
+ * The map draws its labels on a canvas, so a DOM overflow check passes while a
+ * label is cut off or sits on top of another. This opens the page in a real
+ * browser at the three widths `ui:render` uses and asks the viewer itself for
+ * the boxes it placed (`window.__mapLabelBoxes`), in the overview and inside
+ * the largest area. It also fails on a page error, on any request that is not
+ * the file itself, and on horizontal scroll.
+ *
+ * Playwright is a devDependency: a consumer usually has no browser, and then
+ * the result is `unverified` with the reason — never a pass.
+ */
+import { pathToFileURL } from 'node:url';
+
+/**
+ * The slice of Playwright this check drives, declared here rather than
+ * imported: the package is a devDependency, and even a type-only import of it
+ * makes this module look like it needs one at runtime.
+ */
+interface PwLocator {
+    first(): PwLocator;
+    count(): Promise<number>;
+    click(): Promise<void>;
+}
+interface PwPage {
+    on(event: 'pageerror', fn: () => void): void;
+    on(event: 'request', fn: (r: { url(): string }) => void): void;
+    goto(url: string): Promise<unknown>;
+    waitForFunction(fn: () => boolean): Promise<unknown>;
+    evaluate<T>(fn: () => T): Promise<T>;
+    locator(selector: string): PwLocator;
+    close(): Promise<void>;
+}
+interface PwBrowser {
+    newPage(opts: { viewport: { width: number; height: number } }): Promise<PwPage>;
+    close(): Promise<void>;
+}
+interface PwChromium {
+    launch(): Promise<PwBrowser>;
+}
+
+export const MAP_VIEWPORTS = [
+    { name: 'desktop', width: 1440, height: 900 },
+    { name: 'mobile-375', width: 375, height: 812 },
+    { name: 'mobile-320', width: 320, height: 640 },
+] as const;
+
+export interface MapRenderCheck {
+    verification: 'verified' | 'failed' | 'unverified';
+    reason?: string;
+    viewports: Array<{
+        name: string;
+        pageErrors: number;
+        externalRequests: number;
+        horizontalScroll: boolean;
+        views: Array<{ view: string; labels: number; outside: number; overlapping: number }>;
+    }>;
+}
+
+interface Box {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+
+/** Labels outside the canvas and label pairs that overlap — pure, so it is testable without a browser. */
+export function labelProblems(boxes: readonly Box[], width: number, height: number): { outside: number; overlapping: number } {
+    let outside = 0;
+    let overlapping = 0;
+    for (const b of boxes) if (b.x < 0 || b.y < 0 || b.x + b.w > width || b.y + b.h > height) outside += 1;
+    for (let i = 0; i < boxes.length; i++) {
+        for (let j = i + 1; j < boxes.length; j++) {
+            const a = boxes[i] as Box;
+            const c = boxes[j] as Box;
+            if (a.x < c.x + c.w && c.x < a.x + a.w && a.y < c.y + c.h && c.y < a.y + a.h) overlapping += 1;
+        }
+    }
+    return { outside, overlapping };
+}
+
+export async function verifyMap(htmlPath: string): Promise<MapRenderCheck> {
+    let chromium: PwChromium;
+    try {
+        // Through a variable: a literal specifier lets every bundle that reaches
+        // this module (the MCP server does, via cli.ts) try to inline a
+        // devDependency it does not ship.
+        const specifier = '@playwright/test';
+        ({ chromium } = (await import(specifier)) as { chromium: PwChromium });
+    } catch {
+        return { verification: 'unverified', reason: '@playwright/test is not installed (a devDependency)', viewports: [] };
+    }
+    let browser: PwBrowser;
+    try {
+        browser = await chromium.launch();
+    } catch (e) {
+        return { verification: 'unverified', reason: `no browser could start: ${(e as Error).message.split('\n')[0]}`, viewports: [] };
+    }
+    const url = pathToFileURL(htmlPath).href;
+    const out: MapRenderCheck = { verification: 'verified', viewports: [] };
+    try {
+        for (const vp of MAP_VIEWPORTS) {
+            const page = await browser.newPage({ viewport: { width: vp.width, height: vp.height } });
+            let pageErrors = 0;
+            let externalRequests = 0;
+            page.on('pageerror', () => {
+                pageErrors += 1;
+            });
+            page.on('request', (r) => {
+                if (r.url() !== url) externalRequests += 1;
+            });
+            await page.goto(url);
+            await page.waitForFunction(() => (window as unknown as { __mapLabelBoxes?: unknown }).__mapLabelBoxes !== undefined);
+            const read = async (view: string): Promise<{ view: string; labels: number; outside: number; overlapping: number }> => {
+                const r = (await page.evaluate(() => (window as unknown as { __mapLabelBoxes: { boxes: Box[]; width: number; height: number } }).__mapLabelBoxes)) as {
+                    boxes: Box[];
+                    width: number;
+                    height: number;
+                };
+                return { view, labels: r.boxes.length, ...labelProblems(r.boxes, r.width, r.height) };
+            };
+            const views = [await read('overview')];
+            const firstArea = page.locator('#panel .plist button').first();
+            if ((await firstArea.count()) > 0) {
+                await firstArea.click();
+                views.push(await read('largest-area'));
+            }
+            const horizontalScroll = await page.evaluate(() => document.documentElement.scrollWidth > window.innerWidth);
+            out.viewports.push({ name: vp.name, pageErrors, externalRequests, horizontalScroll, views });
+            if (pageErrors || externalRequests || horizontalScroll || views.some((v) => v.outside || v.overlapping)) {
+                out.verification = 'failed';
+            }
+            await page.close();
+        }
+    } finally {
+        await browser.close();
+    }
+    return out;
+}

package/src/scripts/code_graph/map_viewer/viewer.css

@@ -0,0 +1,278 @@
+:root {
+    --bg: #f7f7f5;
+    --panel: #ffffff;
+    --text: #1d1f23;
+    --muted: #5d636e;
+    --line: #d9dbe0;
+    --edge: rgba(40, 48, 64, 0.32);
+    --edge-strong: rgba(40, 48, 64, 0.62);
+    --grey-node: #b4b8c1;
+    --accent: #2f5bd3;
+    --focus: #2f5bd3;
+    --change: #d1495b;
+    --good: #2e8b57;
+    --contested: #d98b1d;
+}
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+        --bg: #14161a;
+        --panel: #1c1f25;
+        --text: #e7e9ee;
+        --muted: #9aa1ad;
+        --line: #2e333c;
+        --edge: rgba(200, 208, 224, 0.22);
+        --edge-strong: rgba(220, 228, 244, 0.55);
+        --grey-node: #555b66;
+        --accent: #8aa8ff;
+        --focus: #8aa8ff;
+        --change: #ff7a8a;
+        --good: #5fd39a;
+        --contested: #ffb347;
+    }
+}
+:root[data-theme='dark'] {
+    --bg: #14161a;
+    --panel: #1c1f25;
+    --text: #e7e9ee;
+    --muted: #9aa1ad;
+    --line: #2e333c;
+    --edge: rgba(200, 208, 224, 0.22);
+    --edge-strong: rgba(220, 228, 244, 0.55);
+    --grey-node: #555b66;
+    --accent: #8aa8ff;
+    --focus: #8aa8ff;
+    --change: #ff7a8a;
+    --good: #5fd39a;
+    --contested: #ffb347;
+}
+* {
+    box-sizing: border-box;
+}
+html,
+body {
+    margin: 0;
+    height: 100%;
+    background: var(--bg);
+    color: var(--text);
+    font: 14px/1.4 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+}
+body {
+    display: grid;
+    grid-template-rows: auto 1fr;
+    overflow: hidden;
+}
+header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 16px;
+    border-bottom: 1px solid var(--line);
+    background: var(--panel);
+}
+header h1 {
+    font-size: 15px;
+    margin: 0 8px 0 0;
+    white-space: nowrap;
+}
+.crumbs {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    min-width: 0;
+    flex: 1 1 200px;
+    overflow: hidden;
+}
+.crumbs button {
+    max-width: 220px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.crumbs span {
+    color: var(--muted);
+}
+button,
+input,
+select {
+    font: inherit;
+    color: var(--text);
+    background: var(--bg);
+    border: 1px solid var(--line);
+    border-radius: 6px;
+    padding: 4px 8px;
+}
+button {
+    cursor: pointer;
+}
+button[aria-pressed='true'] {
+    border-color: var(--accent);
+    color: var(--accent);
+}
+:focus-visible {
+    outline: 2px solid var(--focus);
+    outline-offset: 1px;
+}
+.search {
+    position: relative;
+    flex: 0 1 260px;
+    min-width: 140px;
+}
+.search input {
+    width: 100%;
+}
+.results {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: 5;
+    margin: 2px 0 0;
+    padding: 0;
+    list-style: none;
+    background: var(--panel);
+    border: 1px solid var(--line);
+    border-radius: 6px;
+    max-height: 50vh;
+    overflow: auto;
+}
+.results li button {
+    width: 100%;
+    text-align: left;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+}
+.toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+}
+main {
+    display: grid;
+    grid-template-columns: 1fr 340px;
+    min-height: 0;
+}
+.stage {
+    position: relative;
+    min-width: 0;
+    min-height: 0;
+}
+canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+    touch-action: none;
+}
+aside {
+    border-left: 1px solid var(--line);
+    background: var(--panel);
+    overflow: auto;
+    padding: 12px 16px;
+    min-width: 0;
+}
+aside h2 {
+    font-size: 15px;
+    margin: 0 0 4px;
+    overflow-wrap: anywhere;
+}
+aside h3 {
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--muted);
+    margin: 14px 0 4px;
+}
+.meta {
+    color: var(--muted);
+    font-size: 12px;
+}
+.plist {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+.plist li {
+    margin: 0 0 2px;
+}
+.plist button {
+    display: block;
+    width: 100%;
+    text-align: left;
+    border: 0;
+    background: transparent;
+    padding: 2px 4px;
+}
+.plist button:hover {
+    background: var(--bg);
+}
+.fname {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.fdir {
+    display: block;
+    color: var(--muted);
+    font-size: 12px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.swatch {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    margin-right: 6px;
+    vertical-align: baseline;
+}
+.kv {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 2px 10px;
+    font-size: 13px;
+}
+.kv dt {
+    color: var(--muted);
+}
+.kv dd {
+    margin: 0;
+    overflow-wrap: anywhere;
+}
+code {
+    font: 12px ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+.more {
+    color: var(--muted);
+    font-size: 12px;
+    padding: 2px 4px;
+}
+@media (max-width: 760px) {
+    main {
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr minmax(160px, 40vh);
+    }
+    aside {
+        border-left: 0;
+        border-top: 1px solid var(--line);
+    }
+    header h1 {
+        display: none;
+    }
+}
+@media (prefers-reduced-motion: reduce) {
+    * {
+        transition: none !important;
+        animation: none !important;
+    }
+}
+details summary {
+    cursor: pointer;
+    padding: 2px 0;
+    overflow-wrap: anywhere;
+}
+details summary .swatch {
+    margin: 0 0 0 4px;
+}