meno-core 1.1.3 → 1.1.4

package/lib/server/routes/api/cssAudit.ts

@@ -0,0 +1,138 @@
+/**
+ * CSS Audit API Route (read-only)
+ *
+ * GET /api/css-audit
+ *   Parses the project's monolithic (Webflow-exported) stylesheet and returns an ownership map:
+ *   which rules would split into base / vendor / shared / per-section buckets, plus the flags that
+ *   make a naive split unsafe (cross-boundary selectors, fuzzy-middle classes, dead classes,
+ *   page-only classes). Pure analysis — nothing is moved or rewritten.
+ *
+ * Query params:
+ *   - css=<relative path>     stylesheet to audit (default: auto-detected `_mirror/css/*.css`)
+ *   - sharedMinPages=<n>      override the shared/local page-usage threshold
+ *   - format=md|markdown      return a human-readable summary instead of JSON
+ */
+
+import { existsSync, readdirSync, readFileSync, statSync } from 'node:fs';
+import path from 'node:path';
+import type { PageService } from '../../services/pageService';
+import { getProjectRoot } from '../../projectContext';
+import { auditStylesheet, collectClassesFromPageData, renderAuditMarkdown, type PageClassUsage } from '../../cssAudit';
+import { jsonResponse } from './shared';
+
+/** Directories never worth descending into when hunting for the mirror stylesheet. */
+const SKIP_DIRS = new Set(['node_modules', '.git', 'dist', '.meno', 'rendered-websites']);
+
+/**
+ * Locate Webflow mirror stylesheets under the project root. Webflow exports land them at
+ * `public/_mirror/css/*.css`, but the project layout varies (some nest under `src/`), so scan for
+ * any `_mirror/css/*.css` with a bounded-depth walk.
+ */
+export function findMirrorCss(root: string, maxDepth = 6): string[] {
+  const found: string[] = [];
+  const walk = (dir: string, depth: number): void => {
+    if (depth > maxDepth) return;
+    let entries: string[];
+    try {
+      entries = readdirSync(dir);
+    } catch {
+      return;
+    }
+    for (const entry of entries) {
+      const full = path.join(dir, entry);
+      let isDir = false;
+      try {
+        isDir = statSync(full).isDirectory();
+      } catch {
+        continue;
+      }
+      if (isDir) {
+        if (SKIP_DIRS.has(entry)) continue;
+        walk(full, depth + 1);
+      } else if (entry.endsWith('.css') && full.replace(/\\/g, '/').includes('/_mirror/css/')) {
+        found.push(full);
+      }
+    }
+  };
+  walk(root, 0);
+  return found.sort();
+}
+
+/** Resolve a caller-supplied stylesheet path, guarding against escaping the project root. */
+export function resolveCssParam(root: string, rel: string): string | null {
+  const resolved = path.resolve(root, rel);
+  const normalizedRoot = path.resolve(root);
+  if (resolved !== normalizedRoot && !resolved.startsWith(normalizedRoot + path.sep)) return null;
+  return existsSync(resolved) ? resolved : null;
+}
+
+/**
+ * Handle GET /api/css-audit
+ */
+export function handleCssAuditRoute(url: URL, pageService: PageService): Response {
+  const root = getProjectRoot();
+
+  // 1. Resolve the stylesheet(s) to audit.
+  const cssParam = url.searchParams.get('css');
+  let cssFiles: string[];
+  if (cssParam) {
+    const resolved = resolveCssParam(root, cssParam);
+    if (!resolved) {
+      return jsonResponse({ error: `Stylesheet not found or outside project: ${cssParam}` }, { status: 404 });
+    }
+    cssFiles = [resolved];
+  } else {
+    cssFiles = findMirrorCss(root);
+    if (cssFiles.length === 0) {
+      return jsonResponse(
+        {
+          error: 'No mirror stylesheet found',
+          hint: 'Expected a Webflow export at public/_mirror/css/*.css. Pass ?css=<relative path> to audit a specific stylesheet.',
+        },
+        { status: 404 },
+      );
+    }
+  }
+
+  const css = cssFiles.map((f) => readFileSync(f, 'utf8')).join('\n');
+
+  // 2. Build per-page class usage from the parsed page node trees.
+  const pages: PageClassUsage[] = [];
+  for (const pagePath of pageService.getAllPagePaths()) {
+    const data = pageService.getPageData(pagePath);
+    if (!data) continue;
+    pages.push({ path: pagePath, classes: collectClassesFromPageData(data) });
+  }
+
+  // 3. Options — numeric knobs from the query string.
+  const intParam = (name: string): number | undefined => {
+    const raw = url.searchParams.get(name);
+    if (!raw) return undefined;
+    const n = Number.parseInt(raw, 10);
+    return Number.isFinite(n) ? n : undefined;
+  };
+  const options: Record<string, number> = {};
+  const sharedMinPages = intParam('sharedMinPages');
+  const minSectionClasses = intParam('minSectionClasses');
+  if (sharedMinPages !== undefined) options.sharedMinPages = sharedMinPages;
+  if (minSectionClasses !== undefined) options.minSectionClasses = minSectionClasses;
+
+  const report = auditStylesheet({
+    css,
+    pages,
+    options: Object.keys(options).length > 0 ? options : undefined,
+  });
+
+  // Annotate which files were audited (relative to root) without bloating the kernel's contract.
+  const cssFilesRel = cssFiles.map((f) => path.relative(root, f));
+
+  const format = url.searchParams.get('format');
+  if (format === 'md' || format === 'markdown') {
+    const md = `${renderAuditMarkdown(report)}\n\n_Audited: ${cssFilesRel.join(', ')}_\n`;
+    return new Response(md, {
+      headers: { 'Content-Type': 'text/markdown; charset=utf-8', 'Cache-Control': 'no-store, max-age=0' },
+    });
+  }
+
+  return jsonResponse({ ...report, cssFiles: cssFilesRel });
+}

package/lib/server/routes/api/deMirror.test.ts

@@ -0,0 +1,105 @@
+import { describe, test, expect, beforeEach, afterEach } from 'bun:test';
+import { join } from 'node:path';
+import { mkdirSync, rmSync, writeFileSync } from 'node:fs';
+import { setProjectRoot, getProjectRoot } from '../../projectContext';
+import type { PageService } from '../../services/pageService';
+import type { ComponentService } from '../../services/componentService';
+import { handleDeMirrorRoute } from './deMirror';
+
+const TEST_DIR = join('/tmp', `deMirrorRoute-test-${process.pid}`);
+
+const MIRROR_CSS = `
+.team-card { border: 1px solid #ccc; }
+.case-card { padding: 8px; }
+.container { max-width: 1200px; }
+.orphan { color: red; }
+@media screen and (max-width: 767px) { .team-card { padding: 4px; } }
+`;
+
+function fakeComponentService(comps: Record<string, unknown>): ComponentService {
+  return { getAllComponents: () => comps } as unknown as ComponentService;
+}
+function fakePageService(pages: Record<string, unknown>): PageService {
+  return { getPageData: (p: string) => (pages[p] as never) ?? null } as unknown as PageService;
+}
+
+// TeamCard uses team-card + container; CaseCard uses case-card + container.
+const COMPONENTS = {
+  TeamCard: { component: { structure: { tag: 'div', attributes: { class: 'team-card container' } } } },
+  CaseCard: { component: { structure: { tag: 'div', attributes: { class: 'case-card container' } } } },
+};
+
+describe('De-mirror API Route', () => {
+  let originalRoot: string;
+  beforeEach(() => {
+    originalRoot = getProjectRoot();
+    mkdirSync(join(TEST_DIR, 'public', '_mirror', 'css'), { recursive: true });
+    writeFileSync(join(TEST_DIR, 'public', '_mirror', 'css', 'site.webflow.abc.css'), MIRROR_CSS);
+    setProjectRoot(TEST_DIR);
+  });
+  afterEach(() => {
+    setProjectRoot(originalRoot);
+    rmSync(TEST_DIR, { recursive: true, force: true });
+  });
+
+  test('plans a lossless de-mirror and marks it dry-run', async () => {
+    const res = handleDeMirrorRoute(
+      new URL('http://x/api/de-mirror'),
+      fakePageService({}),
+      fakeComponentService(COMPONENTS),
+    );
+    expect(res.status).toBe(200);
+    const body = (await res.json()) as any;
+    expect(body.dryRun).toBe(true);
+    expect(body.roundTrip).toBe(true);
+    // team-card → TeamCard, case-card → CaseCard; container shared, orphan dead.
+    expect(body.moved.components).toBe(2);
+    expect(body.global.sharedRules).toBe(1); // .container
+    expect(body.global.deadRules).toBe(1); // .orphan
+    // slice text stripped by default.
+    expect(body.components[0].css).toBeUndefined();
+  });
+
+  test('slices=true includes the de-minified CSS text', async () => {
+    const res = handleDeMirrorRoute(
+      new URL('http://x/api/de-mirror?slices=true'),
+      fakePageService({}),
+      fakeComponentService(COMPONENTS),
+    );
+    const body = (await res.json()) as any;
+    const team = body.components.find((c: any) => c.name === 'TeamCard');
+    expect(team.css).toContain('.team-card {');
+    expect(team.css).toContain('@media screen and (max-width:767px)');
+  });
+
+  test('format=md returns markdown', async () => {
+    const res = handleDeMirrorRoute(
+      new URL('http://x/api/de-mirror?format=md'),
+      fakePageService({}),
+      fakeComponentService(COMPONENTS),
+    );
+    expect(res.headers.get('Content-Type')).toContain('text/markdown');
+    expect(await res.text()).toContain('# De-mirror plan');
+  });
+
+  test('422 when the project has no components', async () => {
+    const res = handleDeMirrorRoute(new URL('http://x/api/de-mirror'), fakePageService({}), fakeComponentService({}));
+    expect(res.status).toBe(422);
+  });
+
+  test('404 when no mirror stylesheet exists', async () => {
+    const empty = join('/tmp', `deMirrorRoute-empty-${process.pid}`);
+    mkdirSync(empty, { recursive: true });
+    setProjectRoot(empty);
+    try {
+      const res = handleDeMirrorRoute(
+        new URL('http://x/api/de-mirror'),
+        fakePageService({}),
+        fakeComponentService(COMPONENTS),
+      );
+      expect(res.status).toBe(404);
+    } finally {
+      rmSync(empty, { recursive: true, force: true });
+    }
+  });
+});

package/lib/server/routes/api/deMirror.ts

@@ -0,0 +1,127 @@
+/**
+ * De-mirror API Route (read-only DRY-RUN)
+ *
+ * GET /api/de-mirror
+ *   Plans moving each component's CSS slice off the global mirror monolith onto the component that
+ *   owns it (relocation — class names preserved, NOT a utility conversion). Read-only: it computes
+ *   the plan, the de-minified slice text, and the round-trip verdict; it writes nothing. Applying
+ *   the plan is a separate write step.
+ *
+ * Query params:
+ *   - css=<relative path>   stylesheet to de-mirror (default: auto-detected `_mirror/css/*.css`)
+ *   - slug=<page>           show only the slices for components used by this page (view filter;
+ *                           ownership is still computed project-wide)
+ *   - slices=true           include each component's full slice CSS text (omitted by default —
+ *                           the plan can be large)
+ *   - format=md|markdown    human-readable summary instead of JSON
+ */
+
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
+import type { PageService } from '../../services/pageService';
+import type { ComponentService } from '../../services/componentService';
+import { getProjectRoot } from '../../projectContext';
+import { collectClassesFromPageData } from '../../cssAudit';
+import { planDeMirror, renderDeMirrorMarkdown, type ComponentClassUsage } from '../../deMirror';
+import { findMirrorCss, resolveCssParam } from './cssAudit';
+import { jsonResponse } from './shared';
+
+/** Component names referenced by a page (best-effort: names appearing in the page's node tree). */
+function componentsUsedByPage(pageData: unknown, allNames: string[]): Set<string> {
+  const hay = JSON.stringify(pageData ?? '');
+  const used = new Set<string>();
+  for (const name of allNames) {
+    if (hay.includes(`"${name}"`)) used.add(name);
+  }
+  return used;
+}
+
+/**
+ * Handle GET /api/de-mirror
+ */
+export function handleDeMirrorRoute(url: URL, pageService: PageService, componentService: ComponentService): Response {
+  const root = getProjectRoot();
+
+  // 1. Resolve the stylesheet(s).
+  const cssParam = url.searchParams.get('css');
+  let cssFiles: string[];
+  if (cssParam) {
+    const resolved = resolveCssParam(root, cssParam);
+    if (!resolved) {
+      return jsonResponse({ error: `Stylesheet not found or outside project: ${cssParam}` }, { status: 404 });
+    }
+    cssFiles = [resolved];
+  } else {
+    cssFiles = findMirrorCss(root);
+    if (cssFiles.length === 0) {
+      return jsonResponse(
+        {
+          error: 'No mirror stylesheet found',
+          hint: 'Expected a Webflow export at public/_mirror/css/*.css. Pass ?css=<relative path> to target a specific stylesheet.',
+        },
+        { status: 404 },
+      );
+    }
+  }
+  const css = cssFiles.map((f) => readFileSync(f, 'utf8')).join('\n');
+
+  // 2. Build each component's class usage from its node tree.
+  const all = componentService.getAllComponents();
+  const components: ComponentClassUsage[] = Object.entries(all).map(([name, def]) => ({
+    name,
+    classes: collectClassesFromPageData(def),
+  }));
+  if (components.length === 0) {
+    return jsonResponse(
+      {
+        error: 'No components found',
+        hint: 'Componentize the project first (e.g. /componentize-mirror), then de-mirror.',
+      },
+      { status: 422 },
+    );
+  }
+
+  // 3. Plan project-wide (ownership needs the full component graph).
+  const plan = planDeMirror({ css, components });
+
+  // 4. Optional per-page view filter — narrow the reported slices to one page's components.
+  const slug = url.searchParams.get('slug');
+  let scoped = plan.components;
+  let scopedNote: string | undefined;
+  if (slug) {
+    const pagePath = slug === 'index' ? '/' : `/${slug.replace(/^\//, '')}`;
+    const pageData = pageService.getPageData(pagePath);
+    if (!pageData) {
+      return jsonResponse({ error: `Page not found: ${slug}` }, { status: 404 });
+    }
+    const used = componentsUsedByPage(
+      pageData,
+      components.map((c) => c.name),
+    );
+    scoped = plan.components.filter((c) => used.has(c.name));
+    scopedNote = `filtered to ${scoped.length} component(s) used by /${slug} (ownership computed project-wide)`;
+  }
+
+  const cssFilesRel = cssFiles.map((f) => path.relative(root, f));
+  const view = { ...plan, components: scoped };
+
+  const format = url.searchParams.get('format');
+  if (format === 'md' || format === 'markdown') {
+    const md = `${renderDeMirrorMarkdown(view)}\n${scopedNote ? `\n_${scopedNote}_\n` : ''}\n_Sheet: ${cssFilesRel.join(', ')}_\n`;
+    return new Response(md, {
+      headers: { 'Content-Type': 'text/markdown; charset=utf-8', 'Cache-Control': 'no-store, max-age=0' },
+    });
+  }
+
+  // JSON: strip the (potentially large) slice text unless explicitly requested.
+  const includeSlices = url.searchParams.get('slices') === 'true';
+  const responseComponents = includeSlices ? scoped : scoped.map(({ css: _css, ...meta }) => meta);
+
+  return jsonResponse({
+    ...view,
+    components: responseComponents,
+    cssFiles: cssFilesRel,
+    ...(scopedNote ? { scopedNote } : {}),
+    dryRun: true,
+  });
+}

package/lib/server/routes/api/pages.ts

@@ -14,8 +14,8 @@ import { jsonResponse, cachedJsonResponse } from './shared';
  * Handle pages API endpoint - GET /api/pages
  * Returns pages with draft status info
  */
-export function handlePagesRoute(pageService: PageService): Response {
-  const pages = pageService.getAllPagesWithInfo();
+export async function handlePagesRoute(pageService: PageService): Promise<Response> {
+  const pages = await pageService.getAllPagesWithInfo();
   return jsonResponse({ pages });
 }
 

package/lib/server/services/componentService.test.ts

@@ -509,6 +509,49 @@ describe('ComponentService', () => {
       expect(cached?.component?.javascript).toBe('x();');
     });
 
+    test('concurrent saveComponentCSS + saveComponentJavaScript do not clobber each other', async () => {
+      // The Custom Code modal's Save fires a JS save AND a CSS save together. For
+      // single-file (astro) components each writer call re-emits the WHOLE file
+      // from a snapshot of the other field — so a race lets the slower write
+      // overwrite the file with a stale snapshot, silently losing one edit.
+      // This models that whole-file re-emit and asserts both edits survive.
+      let file: { javascript: string; css: string } = { javascript: '', css: '' };
+      const dir = '/virtual/src/components';
+      // Yield so unserialized calls would interleave (and race) if not locked.
+      const tick = () => new Promise<void>((r) => setTimeout(r, 5));
+      const writer: ComponentWriter = {
+        componentsDir: () => dir,
+        writeComponent: async (_d, _n, def) => {
+          file = { javascript: def.component?.javascript ?? '', css: def.component?.css ?? '' };
+        },
+        writeJavaScript: async (_d, _n, js, current) => {
+          await tick();
+          file = { javascript: js, css: current?.component?.css ?? '' };
+        },
+        writeCSS: async (_d, _n, css, current) => {
+          await tick();
+          file = { javascript: current?.component?.javascript ?? '', css };
+        },
+        removeComponent: async () => {},
+        componentExists: async () => false,
+        moveComponent: async () => {},
+      };
+      const svc = new ComponentService({ writer });
+      await svc.saveComponent('Widget', createMockComponentDefinition('Widget'));
+
+      await Promise.all([
+        svc.saveComponentCSS('Widget', '.hello {}'),
+        svc.saveComponentJavaScript('Widget', 'console.log(1);'),
+      ]);
+
+      // Both the on-disk file and the in-memory cache keep both fields.
+      expect(file.css).toBe('.hello {}');
+      expect(file.javascript).toBe('console.log(1);');
+      const cached = svc.getComponent('Widget');
+      expect(cached?.component?.css).toBe('.hello {}');
+      expect(cached?.component?.javascript).toBe('console.log(1);');
+    });
+
     test('renameComponent uses writer.moveComponent with the new name', async () => {
       const { writer, calls } = makeSpyWriter();
       const svc = new ComponentService({

package/lib/server/services/componentService.ts

@@ -98,6 +98,35 @@ export class ComponentService {
   private writer?: ComponentWriter;
   private loadErrors = new Map<string, ComponentLoadDiagnostic>();
   private loadWarnings: ComponentLoadDiagnostic[] = [];
+  /** Per-component serialization of whole-file re-emits. @see withComponentWriteLock */
+  private writeLocks = new Map<string, Promise<unknown>>();
+
+  /**
+   * Serialize whole-file re-emits for one component.
+   *
+   * `saveComponentCSS` and `saveComponentJavaScript` each read the in-memory
+   * definition, re-emit the ENTIRE `.astro` file, then write the result back.
+   * Fired concurrently — the Custom Code modal's Save issues a JS save AND a CSS
+   * save together — their read-modify-write races: each reads a snapshot taken
+   * before the other's `components.set`, so the writer that lands last clobbers
+   * the other field with a stale value (a fresh CSS edit silently reverting is
+   * the visible symptom). Chaining per component name makes each op observe the
+   * previous op's committed state. Prior failures are swallowed on the chain tail
+   * so one bad write can't wedge the queue.
+   */
+  private withComponentWriteLock<T>(name: string, fn: () => Promise<T>): Promise<T> {
+    const prev = this.writeLocks.get(name) ?? Promise.resolve();
+    const run = prev.then(fn, fn);
+    const tail = run.then(
+      () => {},
+      () => {},
+    );
+    this.writeLocks.set(name, tail);
+    tail.finally(() => {
+      if (this.writeLocks.get(name) === tail) this.writeLocks.delete(name);
+    });
+    return run;
+  }
 
   /**
    * Creates a new ComponentService instance
@@ -569,12 +598,16 @@ export class ComponentService {
     if (this.writer) {
       // Single-file formats (astro) fold JS into the `.astro` file. Re-emit from
       // the latest in-memory definition with the new JS so structure/CSS survive.
-      const current = this.components.get(name);
-      await this.writer.writeJavaScript(componentDir, name, javascript || '', current);
-      const next: ComponentDefinition = current
-        ? { ...current, component: { ...current.component, javascript: javascript || '' } }
-        : { component: { javascript: javascript || '' } };
-      this.components.set(name, next);
+      // Serialized against a concurrent CSS save so the two whole-file re-emits
+      // don't clobber each other (see withComponentWriteLock).
+      await this.withComponentWriteLock(name, async () => {
+        const current = this.components.get(name);
+        await this.writer!.writeJavaScript(componentDir, name, javascript || '', current);
+        const next: ComponentDefinition = current
+          ? { ...current, component: { ...current.component, javascript: javascript || '' } }
+          : { component: { javascript: javascript || '' } };
+        this.components.set(name, next);
+      });
       return;
     }
 
@@ -625,12 +658,16 @@ export class ComponentService {
     if (this.writer) {
       // Single-file formats (astro) fold CSS into the `.astro` file. Re-emit from
       // the latest in-memory definition with the new CSS so structure/JS survive.
-      const current = this.components.get(name);
-      await this.writer.writeCSS(componentDir, name, css || '', current);
-      const next: ComponentDefinition = current
-        ? { ...current, component: { ...current.component, css: css || '' } }
-        : { component: { css: css || '' } };
-      this.components.set(name, next);
+      // Serialized against a concurrent JS save so the two whole-file re-emits
+      // don't clobber each other (see withComponentWriteLock).
+      await this.withComponentWriteLock(name, async () => {
+        const current = this.components.get(name);
+        await this.writer!.writeCSS(componentDir, name, css || '', current);
+        const next: ComponentDefinition = current
+          ? { ...current, component: { ...current.component, css: css || '' } }
+          : { component: { css: css || '' } };
+        this.components.set(name, next);
+      });
       return;
     }
 

package/lib/server/services/pageService.test.ts

@@ -38,6 +38,21 @@ describe('PageService', () => {
       expect(mockProvider.loadAll).toHaveBeenCalledTimes(1);
     });
 
+    test('reloading prunes cached paths the provider no longer reports (no ghost entries)', async () => {
+      mockProvider._pages['/'] = JSON.stringify(createMockPageData({ meta: { title: 'Home' } }));
+      mockProvider._pages['/blog/index'] = JSON.stringify(createMockPageData({ meta: { title: 'Blog' } }));
+      await pageService.loadAllPages();
+      expect(pageService.getAllPagePaths().sort()).toEqual(['/', '/blog/index']);
+
+      // Simulate the page's path changing on disk (folder-index collapse / rename).
+      delete mockProvider._pages['/blog/index'];
+      mockProvider._pages['/blog'] = JSON.stringify(createMockPageData({ meta: { title: 'Blog' } }));
+      await pageService.loadAllPages();
+
+      // The stale `/blog/index` key must be gone — only the current paths remain.
+      expect(pageService.getAllPagePaths().sort()).toEqual(['/', '/blog']);
+    });
+
     test('should handle empty provider gracefully', async () => {
       await pageService.loadAllPages();
 

package/lib/server/services/pageService.ts

@@ -7,11 +7,11 @@
  */
 
 import { existsSync, readdirSync, mkdirSync, rmdirSync } from 'node:fs';
-import { join } from 'node:path';
+import { join, relative, sep } from 'node:path';
 import type { PageCache } from '../pageCache';
 import { parseJSON } from '../jsonLoader';
 import { buildLineMap } from '../utils/jsonLineMapper';
-import { projectPaths } from '../projectContext';
+import { projectPaths, getProjectRoot } from '../projectContext';
 import { logRuntimeError } from '../../shared/errorLogger';
 import { isPathWithinRoot } from '../../shared/pathSecurity';
 import type { JSONPage } from '../../shared/types';
@@ -64,6 +64,13 @@ export class PageService {
       const lineMap = buildLineMap(content);
       this.pageCache.set(path, content, lineMap);
     }
+    // Reconcile: drop cached paths the provider no longer reports. Without this, a page whose
+    // path CHANGES on disk (a rename, or a folder-index file `blog/index.astro` that now maps
+    // to `/blog` instead of `/blog/index`) leaves its old key behind as a ghost entry — it
+    // keeps showing up in the page picker until the process restarts.
+    for (const path of this.pageCache.keys()) {
+      if (!pages.has(path)) this.pageCache.delete(path);
+    }
   }
 
   /**
@@ -241,30 +248,45 @@ export class PageService {
    *
    * @example
    * ```typescript
-   * const pages = pageService.getAllPagesWithInfo();
+   * const pages = await pageService.getAllPagesWithInfo();
    * // [{ path: "/", isDraft: false }, { path: "/about", isDraft: true }]
    * ```
    */
-  getAllPagesWithInfo(): Array<{ path: string; isDraft: boolean; folder?: string; source?: 'cms' | 'ssr' }> {
+  async getAllPagesWithInfo(): Promise<
+    Array<{ path: string; isDraft: boolean; folder?: string; source?: 'cms' | 'ssr'; sourcePath?: string }>
+  > {
     const paths = this.pageCache.keys().filter((p) => !p.startsWith('/_sketch/'));
-    return paths.map((path) => {
-      const pageData = this.getPageData(path);
-      // Extract folder from path: /blog/post -> blog, /templates/blog-post -> templates
-      // Root-level pages (e.g., /, /about) have no folder
-      const pathWithoutSlash = path === '/' ? 'index' : path.substring(1);
-      const slashIndex = pathWithoutSlash.lastIndexOf('/');
-      const folder = slashIndex > 0 ? pathWithoutSlash.substring(0, slashIndex) : undefined;
-      // Surface a non-static page source (`cms` template / `ssr` live page) so the editor's
-      // page picker can group them apart from plain static pages. Static/undefined omitted.
-      const metaSource = pageData?.meta?.source;
-      const source = metaSource === 'cms' || metaSource === 'ssr' ? metaSource : undefined;
-      return {
-        path,
-        isDraft: pageData?.meta?.draft === true,
-        ...(folder ? { folder } : {}),
-        ...(source ? { source } : {}),
-      };
-    });
+    return Promise.all(
+      paths.map(async (path) => {
+        const pageData = this.getPageData(path);
+        // Extract folder from path: /blog/post -> blog, /templates/blog-post -> templates
+        // Root-level pages (e.g., /, /about) have no folder
+        const pathWithoutSlash = path === '/' ? 'index' : path.substring(1);
+        const slashIndex = pathWithoutSlash.lastIndexOf('/');
+        const folder = slashIndex > 0 ? pathWithoutSlash.substring(0, slashIndex) : undefined;
+        // Surface a non-static page source (`cms` template / `ssr` live page) so the editor's
+        // page picker can group them apart from plain static pages. Static/undefined omitted.
+        const metaSource = pageData?.meta?.source;
+        const source = metaSource === 'cms' || metaSource === 'ssr' ? metaSource : undefined;
+        // For template pages the logical editor path (`/templates/<col>`) diverges from the
+        // on-disk file (`src/pages/<routeDir>/[slug].astro`), so a naive `<pagesDir>/<path>`
+        // mapping opens the wrong (nonexistent) file. Ask the provider to resolve the real
+        // source file and surface it project-root-relative so "Open source file" targets it.
+        // Only resolved for templates — normal pages' paths map directly.
+        let sourcePath: string | undefined;
+        if (source === 'cms' && this.provider?.resolveSourcePath) {
+          const abs = await this.provider.resolveSourcePath(path);
+          if (abs) sourcePath = relative(getProjectRoot(), abs).split(sep).join('/');
+        }
+        return {
+          path,
+          isDraft: pageData?.meta?.draft === true,
+          ...(folder ? { folder } : {}),
+          ...(source ? { source } : {}),
+          ...(sourcePath ? { sourcePath } : {}),
+        };
+      }),
+    );
   }
 
   /**