@407dev/cms-astro 0.1.0

package/src/toolbar/app.ts

@@ -0,0 +1,1091 @@
+import { chromeTokens } from '@407dev/design-tokens/tokens';
+import { defineToolbarApp } from 'astro/toolbar';
+import { DEFAULT_EDITOR_ORIGINS } from '../preview/origins';
+import { isLightweightType, resolveToolbarWidget } from './widgets';
+
+interface RenderedFieldInstance {
+  key: string;
+  kind?: string;
+  group?: string;
+  entryRef?: {
+    collection?: string;
+    slug?: string;
+    path?: string;
+  };
+  instances?: number;
+}
+
+interface FieldDefinitionItem {
+  key: string;
+  type: string;
+  constraints?: Record<string, unknown>;
+  default_value?: unknown;
+  value?: unknown;
+  orphaned_at?: string | null;
+}
+
+interface DevStatusResponse {
+  status: 'ok' | 'read-only' | 'refused' | 'unconfigured';
+  siteId: string;
+  devSiteId?: string;
+  apiUrl: string;
+  identity?: { sub: string; email?: string; exp?: number; workspaceRole?: string } | null;
+  mismatch?: { source: string; expected: string; actual: string } | null;
+  manifest: {
+    fresh: boolean;
+    localHash: string | null;
+    pushedHash: string | null;
+  };
+  verifier: {
+    available: boolean;
+    errors: Array<{
+      type: string;
+      message: string;
+      file?: string;
+      line?: number;
+      column?: number;
+    }>;
+    warnings: Array<{
+      type: string;
+      message: string;
+      file?: string;
+      line?: number;
+      column?: number;
+    }>;
+  };
+  editorOrigins?: string[];
+  error?: string;
+}
+
+interface DevBundleResponse {
+  bundle?: {
+    fields?: Record<string, unknown>;
+    site_id?: string;
+  } | null;
+  fields?: FieldDefinitionItem[];
+}
+
+export default defineToolbarApp({
+  init(canvas, app, server) {
+    let isEmbedded = false;
+    try {
+      isEmbedded = window.self !== window.top || window.parent !== window;
+    } catch {
+      isEmbedded = true;
+    }
+
+    if (isEmbedded) {
+      const hideToolbar = () => {
+        const toolbar = document.querySelector('astro-dev-toolbar');
+        if (toolbar instanceof HTMLElement) {
+          toolbar.style.setProperty('display', 'none', 'important');
+        }
+      };
+      hideToolbar();
+      document.addEventListener('astro:page-load', hideToolbar);
+      document.addEventListener('astro:after-swap', hideToolbar);
+    }
+
+    let devStatus: DevStatusResponse | null = null;
+    let fieldDefinitions: Map<string, FieldDefinitionItem> = new Map();
+    let bundleFieldsMap: Record<string, unknown> = {};
+    let renderedFieldsList: RenderedFieldInstance[] = [];
+
+    // Inject Toolbar Styles into Canvas ShadowRoot
+    const style = document.createElement('style');
+    style.textContent = `
+      :host {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+        color: ${chromeTokens.foreground};
+        font-size: 12px;
+        line-height: 1.4;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      astro-dev-toolbar-window {
+        position: fixed !important;
+        top: 0 !important;
+        right: 0 !important;
+        bottom: 0 !important;
+        left: auto !important;
+        transform: none !important;
+        width: 440px !important;
+        max-width: 100vw !important;
+        height: 100vh !important;
+        height: 100dvh !important;
+        max-height: 100vh !important;
+        max-height: 100dvh !important;
+        border-radius: 0 !important;
+        border: none !important;
+        border-left: 1px solid ${chromeTokens.border} !important;
+        padding: 0 !important;
+        margin: 0 !important;
+        background: ${chromeTokens.background} !important;
+        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.5) !important;
+        z-index: 999999999 !important;
+        overflow: hidden !important;
+        display: flex !important;
+        flex-direction: column !important;
+      }
+      .toolbar-container {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        padding: 16px 16px 56px 16px;
+        width: 100%;
+        height: 100%;
+        max-height: 100vh;
+        max-height: 100dvh;
+        min-height: 0;
+        flex: 1 1 auto;
+        overflow-y: auto;
+        overflow-x: hidden;
+        overscroll-behavior: contain;
+        scrollbar-gutter: stable;
+        scrollbar-width: thin;
+        scrollbar-color: ${chromeTokens.border} transparent;
+        background: ${chromeTokens.background};
+        border: none;
+        border-radius: 0;
+        box-shadow: none;
+        box-sizing: border-box;
+      }
+      .toolbar-container > * {
+        flex-shrink: 0;
+      }
+      .toolbar-container::-webkit-scrollbar {
+        width: 6px;
+      }
+      .toolbar-container::-webkit-scrollbar-track {
+        background: transparent;
+      }
+      .toolbar-container::-webkit-scrollbar-thumb {
+        background: ${chromeTokens.border};
+        border-radius: 3px;
+      }
+      .toolbar-container::-webkit-scrollbar-thumb:hover {
+        background: ${chromeTokens.borderStrong};
+      }
+      .header-card {
+        background: ${chromeTokens.card};
+        border: 1px solid ${chromeTokens.border};
+        border-radius: 6px;
+        padding: 12px;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        flex-shrink: 0;
+      }
+      .header-top {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .title-area {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .app-title {
+        font-weight: 600;
+        font-size: 13px;
+        color: ${chromeTokens.cardForeground};
+      }
+      .meta-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 11px;
+        color: ${chromeTokens.mutedForeground};
+      }
+      .meta-chips {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        flex-wrap: wrap;
+      }
+      .chip {
+        display: inline-flex;
+        align-items: center;
+        padding: 2px 6px;
+        border-radius: 4px;
+        font-size: 10px;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+      }
+      .chip-site {
+        background: ${chromeTokens.muted};
+        color: ${chromeTokens.foregroundSecondary};
+      }
+      .chip-fresh {
+        background: rgba(16, 185, 129, 0.15);
+        color: ${chromeTokens.successText};
+        border: 1px solid rgba(16, 185, 129, 0.3);
+      }
+      .chip-unpushed {
+        background: rgba(234, 179, 8, 0.15);
+        color: ${chromeTokens.warningText};
+        border: 1px solid rgba(234, 179, 8, 0.3);
+      }
+      .toggle-wrap {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 11px;
+        cursor: pointer;
+        user-select: none;
+      }
+      .toggle-input {
+        cursor: pointer;
+      }
+      .banner {
+        border-radius: 6px;
+        padding: 10px 12px;
+        font-size: 11px;
+        flex-shrink: 0;
+      }
+      .banner-error {
+        background: rgba(239, 68, 68, 0.15);
+        border: 1px solid rgba(239, 68, 68, 0.4);
+        color: ${chromeTokens.destructiveText};
+      }
+      .banner-warning {
+        background: rgba(234, 179, 8, 0.15);
+        border: 1px solid rgba(234, 179, 8, 0.4);
+        color: ${chromeTokens.warningText};
+      }
+      .banner-info {
+        background: rgba(59, 130, 246, 0.15);
+        border: 1px solid rgba(59, 130, 246, 0.4);
+        color: ${chromeTokens.infoText};
+      }
+      .section-title {
+        font-size: 11px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: ${chromeTokens.foregroundSubtle};
+        margin-top: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-shrink: 0;
+      }
+      .diag-list {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        flex-shrink: 0;
+      }
+      .diag-item {
+        background: ${chromeTokens.card};
+        border: 1px solid ${chromeTokens.border};
+        border-radius: 6px;
+        padding: 8px 10px;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        flex-shrink: 0;
+      }
+      .diag-item-error {
+        border-left: 3px solid ${chromeTokens.destructive};
+      }
+      .diag-item-warning {
+        border-left: 3px solid ${chromeTokens.warning};
+      }
+      .diag-loc {
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+        font-size: 10px;
+        color: ${chromeTokens.infoText};
+        text-decoration: none;
+      }
+      .diag-loc:hover {
+        text-decoration: underline;
+      }
+      .diag-msg {
+        color: ${chromeTokens.foregroundSecondary};
+        font-size: 11px;
+      }
+      .group-card {
+        background: ${chromeTokens.card};
+        border: 1px solid ${chromeTokens.border};
+        border-radius: 6px;
+        overflow: hidden;
+        flex-shrink: 0;
+      }
+      .group-header {
+        background: ${chromeTokens.muted};
+        padding: 6px 10px;
+        font-weight: 600;
+        font-size: 11px;
+        color: ${chromeTokens.foregroundSecondary};
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-shrink: 0;
+      }
+      .field-list {
+        display: flex;
+        flex-direction: column;
+        flex-shrink: 0;
+      }
+      .field-row {
+        padding: 8px 10px;
+        border-top: 1px solid ${chromeTokens.border};
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        transition: background-color 0.3s ease;
+        flex-shrink: 0;
+      }
+      @keyframes fieldHighlightPulse {
+        0% {
+          background: rgba(99, 102, 241, 0.35);
+          box-shadow: inset 0 0 0 1px ${chromeTokens.primary};
+        }
+        70% {
+          background: rgba(99, 102, 241, 0.15);
+          box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.4);
+        }
+        100% {
+          background: transparent;
+          box-shadow: none;
+        }
+      }
+      .field-row-highlighted {
+        animation: fieldHighlightPulse 2s ease-out;
+      }
+      .field-meta {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 6px;
+      }
+      .field-key {
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+        font-size: 11px;
+        font-weight: 500;
+        color: ${chromeTokens.foregroundSecondary};
+      }
+      .badge-group {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+      .badge {
+        font-size: 9px;
+        padding: 1px 4px;
+        border-radius: 3px;
+        font-weight: 500;
+        text-transform: lowercase;
+      }
+      .badge-no-value {
+        background: rgba(239, 68, 68, 0.2);
+        color: ${chromeTokens.destructiveText};
+      }
+      .badge-no-default {
+        background: rgba(234, 179, 8, 0.2);
+        color: ${chromeTokens.warningText};
+      }
+      .badge-orphaned {
+        background: rgba(168, 85, 247, 0.2);
+        color: ${chromeTokens.primaryText};
+      }
+      .badge-type {
+        background: ${chromeTokens.muted};
+        color: ${chromeTokens.mutedForeground};
+      }
+      /* Widget inputs */
+      .cms-widget-container {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+      .cms-widget-form {
+        display: flex;
+        gap: 6px;
+        align-items: center;
+      }
+      .cms-widget-input {
+        flex: 1;
+        background: ${chromeTokens.sunken};
+        border: 1px solid ${chromeTokens.borderStrong};
+        border-radius: 4px;
+        color: ${chromeTokens.foreground};
+        padding: 4px 8px;
+        font-size: 11px;
+        outline: none;
+      }
+      .cms-widget-input:focus {
+        border-color: ${chromeTokens.ring};
+      }
+      .cms-widget-input:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+      .cms-widget-save-btn {
+        background: ${chromeTokens.primary};
+        color: ${chromeTokens.primaryForeground};
+        border: none;
+        border-radius: 4px;
+        padding: 4px 10px;
+        font-size: 11px;
+        font-weight: 500;
+        cursor: pointer;
+      }
+      .cms-widget-save-btn:hover:not(:disabled) {
+        background: color-mix(in srgb, ${chromeTokens.primary} 85%, black);
+      }
+      .cms-widget-save-btn:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+      .cms-widget-select {
+        width: 100%;
+        background: ${chromeTokens.sunken};
+        border: 1px solid ${chromeTokens.borderStrong};
+        border-radius: 4px;
+        color: ${chromeTokens.foreground};
+        padding: 4px 8px;
+        font-size: 11px;
+        outline: none;
+      }
+      .cms-widget-toggle-row {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+      .cms-widget-toggle-label {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        cursor: pointer;
+      }
+      .cms-widget-checkbox {
+        cursor: pointer;
+      }
+      .cms-widget-toggle-text {
+        font-size: 11px;
+        color: ${chromeTokens.foregroundSecondary};
+      }
+      .cms-widget-summary-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 8px;
+        background: ${chromeTokens.sunken};
+        border: 1px solid ${chromeTokens.border};
+        border-radius: 4px;
+        padding: 4px 8px;
+      }
+      .cms-widget-summary-text {
+        font-size: 11px;
+        color: ${chromeTokens.mutedForeground};
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width: 260px;
+      }
+      .cms-widget-editor-link {
+        font-size: 11px;
+        color: ${chromeTokens.primaryText};
+        text-decoration: none;
+        white-space: nowrap;
+      }
+      .cms-widget-editor-link:hover {
+        text-decoration: underline;
+      }
+      .cms-widget-error {
+        font-size: 10px;
+        color: ${chromeTokens.destructiveText};
+        margin-top: 2px;
+      }
+      .empty-notice {
+        font-size: 11px;
+        color: ${chromeTokens.foregroundSubtle};
+        font-style: italic;
+        padding: 8px 0;
+        flex-shrink: 0;
+      }
+    `;
+
+    canvas.appendChild(style);
+
+    const windowEl = document.createElement('astro-dev-toolbar-window');
+    windowEl.style.position = 'fixed';
+    windowEl.style.top = '0';
+    windowEl.style.right = '0';
+    windowEl.style.bottom = '0';
+    windowEl.style.left = 'auto';
+    windowEl.style.transform = 'none';
+    windowEl.style.width = '440px';
+    windowEl.style.maxWidth = '100vw';
+    windowEl.style.height = '100vh';
+    windowEl.style.maxHeight = '100vh';
+    windowEl.style.borderRadius = '0';
+    windowEl.style.border = 'none';
+    windowEl.style.borderLeft = `1px solid ${chromeTokens.border}`;
+    windowEl.style.padding = '0';
+    windowEl.style.margin = '0';
+    windowEl.style.background = chromeTokens.background;
+    windowEl.style.boxShadow = '-4px 0 24px rgba(0, 0, 0, 0.5)';
+    windowEl.style.zIndex = '999999999';
+    windowEl.style.display = 'flex';
+    windowEl.style.flexDirection = 'column';
+    windowEl.style.overflow = 'hidden';
+
+    const container = document.createElement('div');
+    container.className = 'toolbar-container';
+    container.style.height = '100%';
+    container.style.minHeight = '0';
+    container.style.flex = '1 1 auto';
+    container.style.overflowY = 'auto';
+    container.style.boxSizing = 'border-box';
+    windowEl.appendChild(container);
+    canvas.appendChild(windowEl);
+
+    function patchDomElement(key: string, kind: string, value: unknown, entryRef?: unknown) {
+      let selector: string;
+      const eRef = entryRef as { collection?: string; slug?: string; path?: string } | undefined;
+      const fPath = eRef?.path || key;
+
+      if (eRef && (eRef.collection || eRef.slug)) {
+        const colAttr = eRef.collection ? `[data-cms-collection="${eRef.collection}"]` : '';
+        const entryAttr = eRef.slug ? `[data-cms-entry="${eRef.slug}"]` : '';
+        const scopeSel = `${colAttr}${entryAttr}`;
+        selector = `${scopeSel} [data-cms-entry-field="${fPath}"], ${scopeSel}[data-cms-entry-field="${fPath}"]`;
+      } else if (eRef) {
+        selector = `[data-cms-entry-field="${fPath}"]`;
+      } else {
+        selector = `[data-cms-field="${key}"]`;
+      }
+
+      const els = document.querySelectorAll(selector);
+      for (let i = 0; i < els.length; i++) {
+        const el = els[i];
+        if (kind === 'image' || el.tagName.toLowerCase() === 'img') {
+          if (value && typeof value === 'object') {
+            const imgVal = value as { url?: string; alt?: string };
+            if (imgVal.url) el.setAttribute('src', imgVal.url);
+            if (imgVal.alt !== undefined) el.setAttribute('alt', imgVal.alt);
+          } else if (typeof value === 'string') {
+            el.setAttribute('src', value);
+          }
+        } else {
+          el.textContent = value !== null && value !== undefined ? String(value) : '';
+        }
+      }
+    }
+
+    async function handleSaveValue(
+      key: string,
+      val: unknown,
+      kind: string,
+      entryRef?: unknown,
+    ): Promise<{ ok: boolean; error?: string }> {
+      try {
+        const res = await fetch('/_cms/dev/value', {
+          method: 'PATCH',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ key, value: val }),
+        });
+
+        if (res.ok) {
+          // Update local bundle store representation
+          bundleFieldsMap[key] = val;
+          const def = fieldDefinitions.get(key);
+          if (def) {
+            def.value = val;
+          }
+
+          // Patch DOM in place
+          patchDomElement(key, kind, val, entryRef);
+
+          // Rescan fields
+          const w = window as unknown as { __CMS_RESCAN__?: () => void };
+          w.__CMS_RESCAN__?.();
+
+          render();
+          return { ok: true };
+        }
+
+        const data = (await res.json().catch(() => ({}))) as {
+          error?: string;
+          errors?: Array<{ message?: string }>;
+        };
+        const errorMsg =
+          data.errors?.map((e) => e.message).join(', ') ||
+          data.error ||
+          `Save failed (HTTP ${res.status})`;
+        return { ok: false, error: errorMsg };
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : String(err);
+        return { ok: false, error: msg };
+      }
+    }
+
+    function render() {
+      container.innerHTML = '';
+
+      if (!devStatus) {
+        const loadingDiv = document.createElement('div');
+        loadingDiv.className = 'empty-notice';
+        loadingDiv.textContent = 'Loading CMS dev status...';
+        container.appendChild(loadingDiv);
+        return;
+      }
+
+      const isReadOnly = devStatus.status === 'read-only';
+      const isRefused = devStatus.status === 'refused';
+      const isUnconfigured = devStatus.status === 'unconfigured';
+      const disabled = isReadOnly || isRefused || isUnconfigured;
+
+      // 1. Header Card
+      const headerCard = document.createElement('div');
+      headerCard.className = 'header-card';
+
+      const headerTop = document.createElement('div');
+      headerTop.className = 'header-top';
+
+      const titleArea = document.createElement('div');
+      titleArea.className = 'title-area';
+      const titleSpan = document.createElement('span');
+      titleSpan.className = 'app-title';
+      titleSpan.textContent = 'CMS Content';
+      titleArea.appendChild(titleSpan);
+
+      // Highlight toggle
+      const toggleWrap = document.createElement('label');
+      toggleWrap.className = 'toggle-wrap';
+      const toggleCheckbox = document.createElement('input');
+      toggleCheckbox.type = 'checkbox';
+      toggleCheckbox.className = 'toggle-input';
+      toggleCheckbox.checked = document.documentElement.hasAttribute('data-cms-edit-mode');
+      toggleCheckbox.addEventListener('change', () => {
+        if (toggleCheckbox.checked) {
+          document.documentElement.setAttribute('data-cms-edit-mode', 'true');
+        } else {
+          document.documentElement.removeAttribute('data-cms-edit-mode');
+        }
+      });
+      const toggleLabel = document.createElement('span');
+      toggleLabel.textContent = 'Outlines';
+      toggleWrap.appendChild(toggleCheckbox);
+      toggleWrap.appendChild(toggleLabel);
+
+      headerTop.appendChild(titleArea);
+      headerTop.appendChild(toggleWrap);
+      headerCard.appendChild(headerTop);
+
+      // Meta chips
+      const metaRow = document.createElement('div');
+      metaRow.className = 'meta-row';
+
+      const chips = document.createElement('div');
+      chips.className = 'meta-chips';
+
+      const siteChip = document.createElement('span');
+      siteChip.className = 'chip chip-site';
+      siteChip.textContent = devStatus.siteId || 'No Site';
+      chips.appendChild(siteChip);
+
+      if (devStatus.identity?.email || devStatus.identity?.sub) {
+        const userChip = document.createElement('span');
+        userChip.className = 'chip chip-site';
+        userChip.textContent = devStatus.identity.email || devStatus.identity.sub;
+        chips.appendChild(userChip);
+      }
+
+      if (devStatus.verifier?.available) {
+        const freshChip = document.createElement('span');
+        if (devStatus.manifest?.fresh) {
+          freshChip.className = 'chip chip-fresh';
+          freshChip.textContent = '● Fresh';
+        } else {
+          freshChip.className = 'chip chip-unpushed';
+          freshChip.textContent = '▲ Unpushed';
+        }
+        chips.appendChild(freshChip);
+      }
+
+      metaRow.appendChild(chips);
+      headerCard.appendChild(metaRow);
+      container.appendChild(headerCard);
+
+      // 2. Alert Banners
+      if (isReadOnly && devStatus.mismatch) {
+        const banner = document.createElement('div');
+        banner.className = 'banner banner-error';
+        banner.textContent = `Toolbar is READ-ONLY: ${devStatus.mismatch.source} (${devStatus.mismatch.actual}) ≠ site rendered by this dev server (${devStatus.mismatch.expected})`;
+        container.appendChild(banner);
+      } else if (isRefused) {
+        const banner = document.createElement('div');
+        banner.className = 'banner banner-error';
+        banner.textContent = `CMS dev routes disabled: ${devStatus.error || 'Access refused'}`;
+        container.appendChild(banner);
+      } else if (isUnconfigured) {
+        const banner = document.createElement('div');
+        banner.className = 'banner banner-info';
+        banner.textContent =
+          devStatus.error || 'Not logged in. Run `cms login` to enable dev-time editing.';
+        container.appendChild(banner);
+      }
+
+      // 3. Diagnostics Section
+      const errors = devStatus.verifier?.errors || [];
+      const warnings = devStatus.verifier?.warnings || [];
+      const allDiags = [...errors, ...warnings];
+
+      if (allDiags.length > 0) {
+        const diagSec = document.createElement('div');
+        diagSec.className = 'section-title';
+        diagSec.textContent = `Diagnostics (${allDiags.length})`;
+        container.appendChild(diagSec);
+
+        const diagList = document.createElement('div');
+        diagList.className = 'diag-list';
+
+        for (const diag of allDiags) {
+          const item = document.createElement('div');
+          item.className = `diag-item ${diag.type === 'error' ? 'diag-item-error' : 'diag-item-warning'}`;
+
+          if (diag.file) {
+            const locLink = document.createElement('a');
+            locLink.className = 'diag-loc';
+            locLink.href = `vscode://file/${diag.file}:${diag.line || 1}:${diag.column || 1}`;
+            locLink.textContent = `${diag.file}:${diag.line || 1}:${diag.column || 1}`;
+            item.appendChild(locLink);
+          }
+
+          const msg = document.createElement('div');
+          msg.className = 'diag-msg';
+          msg.textContent = diag.message;
+          item.appendChild(msg);
+
+          diagList.appendChild(item);
+        }
+
+        container.appendChild(diagList);
+      }
+
+      // 4. Current Page Rendered Fields List
+      const fieldsSecTitle = document.createElement('div');
+      fieldsSecTitle.className = 'section-title';
+      fieldsSecTitle.textContent = `Rendered Fields (${renderedFieldsList.length})`;
+      container.appendChild(fieldsSecTitle);
+
+      if (renderedFieldsList.length === 0) {
+        const empty = document.createElement('div');
+        empty.className = 'empty-notice';
+        empty.textContent = 'No CMS fields detected on current page.';
+        container.appendChild(empty);
+      } else {
+        // Group rendered fields by data-cms-group, or scope prefix, or "Ungrouped"
+        const groupsMap = new Map<string, RenderedFieldInstance[]>();
+
+        for (const field of renderedFieldsList) {
+          let groupName = field.group;
+          if (!groupName) {
+            const parts = field.key.split('.');
+            if (parts.length > 1) {
+              groupName = parts.slice(0, -1).join('.');
+            } else {
+              groupName = 'Ungrouped';
+            }
+          }
+          if (!groupsMap.has(groupName)) {
+            groupsMap.set(groupName, []);
+          }
+          groupsMap.get(groupName)?.push(field);
+        }
+
+        const currentRoute = window.location.pathname || '/';
+        const editorOrigin = devStatus.editorOrigins?.[0] || DEFAULT_EDITOR_ORIGINS[0];
+
+        for (const [groupName, groupFields] of groupsMap.entries()) {
+          const groupCard = document.createElement('div');
+          groupCard.className = 'group-card';
+
+          const groupHeader = document.createElement('div');
+          groupHeader.className = 'group-header';
+          groupHeader.textContent = groupName;
+          groupCard.appendChild(groupHeader);
+
+          const fieldList = document.createElement('div');
+          fieldList.className = 'field-list';
+
+          for (const field of groupFields) {
+            const def = fieldDefinitions.get(field.key);
+            const rawVal =
+              bundleFieldsMap[field.key] !== undefined
+                ? bundleFieldsMap[field.key]
+                : def?.value !== undefined
+                  ? def.value
+                  : def?.default_value;
+
+            const typeId = def?.type || field.kind || 'text';
+            const isOrphaned = Boolean(def?.orphaned_at);
+            const hasNoValue = rawVal === undefined || rawVal === null || rawVal === '';
+            const hasNoDefault = def?.default_value === undefined || def?.default_value === null;
+
+            const row = document.createElement('div');
+            row.className = 'field-row';
+            row.dataset.fieldKey = field.key;
+            row.setAttribute('data-field-key', field.key);
+
+            const meta = document.createElement('div');
+            meta.className = 'field-meta';
+
+            const keySpan = document.createElement('span');
+            keySpan.className = 'field-key';
+            keySpan.textContent = field.key;
+            meta.appendChild(keySpan);
+
+            const badgeGroup = document.createElement('div');
+            badgeGroup.className = 'badge-group';
+
+            if (isOrphaned) {
+              const b = document.createElement('span');
+              b.className = 'badge badge-orphaned';
+              b.textContent = 'orphaned';
+              badgeGroup.appendChild(b);
+            }
+            if (hasNoValue) {
+              const b = document.createElement('span');
+              b.className = 'badge badge-no-value';
+              b.textContent = 'no value';
+              badgeGroup.appendChild(b);
+            }
+            if (hasNoDefault) {
+              const b = document.createElement('span');
+              b.className = 'badge badge-no-default';
+              b.textContent = 'no default';
+              badgeGroup.appendChild(b);
+            }
+
+            const typeBadge = document.createElement('span');
+            typeBadge.className = 'badge badge-type';
+            typeBadge.textContent = typeId;
+            badgeGroup.appendChild(typeBadge);
+
+            meta.appendChild(badgeGroup);
+            row.appendChild(meta);
+
+            // Widget resolution
+            const renderer = resolveToolbarWidget(typeId);
+            const widgetEl = renderer({
+              key: field.key,
+              typeId,
+              value: rawVal,
+              defaultValue: def?.default_value,
+              constraints: def?.constraints,
+              disabled,
+              siteId: devStatus.siteId,
+              routePath: currentRoute,
+              editorOrigin,
+              onSave: async (v) =>
+                handleSaveValue(field.key, v, field.kind || typeId, field.entryRef),
+            });
+
+            row.appendChild(widgetEl);
+            fieldList.appendChild(row);
+          }
+
+          groupCard.appendChild(fieldList);
+          container.appendChild(groupCard);
+        }
+      }
+
+      // 5. Orphaned Fields Section
+      const renderedKeys = new Set(renderedFieldsList.map((f) => f.key));
+      const orphanedDefs: FieldDefinitionItem[] = [];
+      for (const def of fieldDefinitions.values()) {
+        if (def.orphaned_at || !renderedKeys.has(def.key)) {
+          orphanedDefs.push(def);
+        }
+      }
+
+      if (orphanedDefs.length > 0) {
+        const orphanTitle = document.createElement('div');
+        orphanTitle.className = 'section-title';
+        orphanTitle.textContent = `Unrendered / Orphaned Fields (${orphanedDefs.length})`;
+        container.appendChild(orphanTitle);
+
+        const orphanCard = document.createElement('div');
+        orphanCard.className = 'group-card';
+        const orphanList = document.createElement('div');
+        orphanList.className = 'field-list';
+
+        for (const o of orphanedDefs) {
+          const row = document.createElement('div');
+          row.className = 'field-row';
+          row.dataset.fieldKey = o.key;
+          row.setAttribute('data-field-key', o.key);
+
+          const meta = document.createElement('div');
+          meta.className = 'field-meta';
+
+          const keySpan = document.createElement('span');
+          keySpan.className = 'field-key';
+          keySpan.textContent = o.key;
+          meta.appendChild(keySpan);
+
+          const badgeGroup = document.createElement('div');
+          badgeGroup.className = 'badge-group';
+          if (o.orphaned_at) {
+            const b = document.createElement('span');
+            b.className = 'badge badge-orphaned';
+            b.textContent = 'orphaned';
+            badgeGroup.appendChild(b);
+          } else {
+            const b = document.createElement('span');
+            b.className = 'badge badge-type';
+            b.textContent = 'unrendered';
+            badgeGroup.appendChild(b);
+          }
+          meta.appendChild(badgeGroup);
+          row.appendChild(meta);
+          orphanList.appendChild(row);
+        }
+
+        orphanCard.appendChild(orphanList);
+        container.appendChild(orphanCard);
+      }
+    }
+
+    async function loadData() {
+      try {
+        const statusRes = await fetch('/_cms/dev/status');
+        if (statusRes.ok) {
+          devStatus = (await statusRes.json()) as DevStatusResponse;
+        } else if (statusRes.status === 503) {
+          const errData = (await statusRes.json().catch(() => ({}))) as {
+            error?: string;
+            status?: 'refused' | 'unconfigured';
+          };
+          devStatus = {
+            status: errData.status || 'refused',
+            siteId: '',
+            apiUrl: '',
+            manifest: { fresh: true, localHash: null, pushedHash: null },
+            verifier: { available: false, errors: [], warnings: [] },
+            error: errData.error,
+          };
+        }
+
+        // Toggle app notification state based on diagnostics
+        if (devStatus?.verifier?.errors && devStatus.verifier.errors.length > 0) {
+          app.toggleNotification({ state: true, level: 'error' });
+        } else if (devStatus?.verifier?.warnings && devStatus.verifier.warnings.length > 0) {
+          app.toggleNotification({ state: true, level: 'warning' });
+        } else {
+          app.toggleNotification({ state: false });
+        }
+
+        if (devStatus && devStatus.status !== 'refused' && devStatus.status !== 'unconfigured') {
+          const bundleRes = await fetch('/_cms/dev/bundle');
+          if (bundleRes.ok) {
+            const bundleData = (await bundleRes.json()) as DevBundleResponse;
+            if (bundleData.bundle?.fields) {
+              bundleFieldsMap = bundleData.bundle.fields;
+            }
+            if (Array.isArray(bundleData.fields)) {
+              fieldDefinitions = new Map(bundleData.fields.map((f) => [f.key, f]));
+            }
+          }
+        }
+      } catch (_err) {
+        // Fetch failed
+      }
+
+      // Read rendered fields from window
+      const winFields = (window as unknown as { __CMS_FIELDS__?: RenderedFieldInstance[] })
+        .__CMS_FIELDS__;
+      if (Array.isArray(winFields)) {
+        renderedFieldsList = winFields;
+      }
+
+      render();
+    }
+
+    // Server HMR diagnostic events
+    server.on('cms:diagnostics', (data: DevStatusResponse['verifier'] & { fresh?: boolean }) => {
+      if (devStatus) {
+        devStatus.verifier = {
+          available: Boolean(data.available),
+          errors: data.errors || [],
+          warnings: data.warnings || [],
+        };
+        if (data.fresh !== undefined) {
+          devStatus.manifest.fresh = data.fresh;
+        }
+
+        if (data.errors && data.errors.length > 0) {
+          app.toggleNotification({ state: true, level: 'error' });
+        } else if (data.warnings && data.warnings.length > 0) {
+          app.toggleNotification({ state: true, level: 'warning' });
+        } else {
+          app.toggleNotification({ state: false });
+        }
+
+        render();
+      }
+    });
+
+    function escapeCssKey(str: string): string {
+      if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') {
+        return CSS.escape(str);
+      }
+      return str.replace(/([!"#$%&'()*+,.\/:;<=>?@[\\\]^`{|}~])/g, '\\$1');
+    }
+
+    function focusFieldRow(key: string) {
+      if (!key) return;
+      const targetRow = container.querySelector(
+        `[data-field-key="${escapeCssKey(key)}"]`,
+      ) as HTMLElement | null;
+      if (targetRow) {
+        targetRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        targetRow.classList.remove('field-row-highlighted');
+        // Force layout reflow to restart CSS animation
+        void targetRow.offsetWidth;
+        targetRow.classList.add('field-row-highlighted');
+
+        const inputEl = targetRow.querySelector(
+          'input:not([type="checkbox"]), select, textarea, button, a',
+        ) as HTMLInputElement | null;
+        if (inputEl) {
+          setTimeout(() => {
+            inputEl.focus();
+            if (typeof inputEl.select === 'function') {
+              inputEl.select();
+            }
+          }, 150);
+        }
+      }
+    }
+
+    // Document events from bridge-script
+    document.addEventListener('cms:fields-updated', ((e: CustomEvent<RenderedFieldInstance[]>) => {
+      if (Array.isArray(e.detail)) {
+        renderedFieldsList = e.detail;
+        render();
+      }
+    }) as EventListener);
+
+    document.addEventListener('cms:field-selected', ((e: CustomEvent<{ key?: string }>) => {
+      if (e.detail?.key) {
+        focusFieldRow(e.detail.key);
+      }
+    }) as EventListener);
+
+    document.addEventListener('astro:page-load', () => {
+      loadData();
+    });
+
+    // Initial load
+    loadData();
+  },
+});