@thomas.f/prnext 0.1.15-alpha → 0.1.17-alpha

package/runtime/dev-error-overlay.mjs

@@ -0,0 +1,167 @@
+import { svg } from './dev-ui-icons.mjs';
+import { devErrorOverlayStyle } from './dev-error-overlay-style.mjs';
+
+const hydrationMessage = /\bHydration failed because\b|\bA tree hydrated but some attributes\b|\bText content does not match server-rendered HTML\b/i;
+const buildSourcePrefix = /^(?:(?:[A-Za-z]:[\\/]|\/)[^:\r\n]*|[^\s:\r\n]+)\.(?:[cm]?[jt]sx?|css|scss|sass|less|json|html?|vue|svelte|astro)(?:\(\d+(?:,\d+)?\)|:\d+(?::\d+)?)?:\s*/i;
+
+function stripBuildSourcePrefixes(line) {
+  // Compiler errors can nest an entry filename around an original source path.
+  // Remove only recognizable source prefixes, never arbitrary colon-separated text.
+  for (let count = 0; count < 16; count++) {
+    const next = line.replace(buildSourcePrefix, '');
+    if (next === line) break;
+    line = next;
+  }
+  return line;
+}
+
+// Only the summary is shortened. The original message and stack stay in the dialog.
+export function summarizeDevError(report, { recoverable = false, kind = 'runtime' } = {}) {
+  const message = typeof report === 'string' ? report : String(report?.message ?? '');
+  const normalizedKind = String(kind).toLowerCase();
+  const hydration = hydrationMessage.test(message);
+  const title = hydration ? 'Hydration mismatch' : ['typescript', 'type', 'typecheck'].includes(normalizedKind) ? 'TypeScript'
+    : normalizedKind === 'build' ? 'Build error' : recoverable || normalizedKind === 'recoverable' ? 'Recovered error' : 'Runtime error';
+  let firstLine = message.split(/\r?\n/).find(line => line.trim())?.replace(/^(?:Uncaught\s+)?(?:[\w.]*Error):\s*/, '').trim() || '';
+  if (normalizedKind === 'build') firstLine = stripBuildSourcePrefixes(firstLine);
+  const description = hydration ? 'The server and browser rendered different output.' : firstLine
+    || (title === 'Build error' ? 'Compilation could not finish.' : title === 'TypeScript' ? 'TypeScript reported a problem in your project.' : 'An error occurred while running this page.');
+  return { title, description: description.length > 240 ? description.slice(0, 237).trimEnd() + '…' : description, hydration };
+}
+
+export function createDevErrorOverlay({ onDismiss = () => {}, onSendToAI = () => {}, onSelectIssue = () => {}, onCopyForAI = () => {} } = {}) {
+  const document = globalThis.document;
+  const node = (tag, className, text) => { const element = document.createElement(tag); if (className) element.className = className; if (text !== undefined) element.textContent = text; return element; };
+  const host = node('div'); host.id = '__prnext_dev_error__';
+  const shadow = host.attachShadow({ mode: 'open' }), style = node('style'); style.textContent = devErrorOverlayStyle;
+  const dialog = node('dialog'); dialog.setAttribute('role', 'alertdialog'); dialog.setAttribute('aria-label', 'PRNext development error');
+  const icon = paths => { const result = node('span', 'icon'); result.innerHTML = svg(paths); return result; };
+  const header = node('header', 'error-header'), brand = node('div', 'error-brand');
+  const count = node('span', 'error-count'); count.setAttribute('aria-live', 'polite'); count.setAttribute('aria-atomic', 'true');
+  brand.append(node('strong', '', 'PRNext'), node('span', 'error-brand-label', 'Errors'), count);
+  const actions = node('div', 'error-header-actions');
+  const copy = node('button', 'error-copy'), copyIcon = icon(''), copyLabel = node('span', '', 'Copy for AI'); copy.type = 'button'; copy.id = 'copy-for-ai'; copy.append(copyIcon, copyLabel);
+  const ai = node('button', 'error-ai'); ai.type = 'button'; ai.append(icon('<path d="m12 3 2.2 6.8L21 12l-6.8 2.2L12 21l-2.2-6.8L3 12l6.8-2.2L12 3Z"/>'), node('span', '', 'Send to AI'));
+  const dismiss = node('button', 'error-dismiss'); dismiss.type = 'button'; dismiss.autofocus = true; dismiss.setAttribute('aria-label', 'Dismiss'); dismiss.title = 'Dismiss (Esc)'; dismiss.append(icon('<path d="m6 6 12 12M6 18 18 6"/>'));
+  const copyStatus = node('span', 'sr-only'); copyStatus.id = 'error-copy-status'; copyStatus.setAttribute('role', 'status'); copyStatus.setAttribute('aria-atomic', 'true');
+  actions.append(copy, ai, dismiss); header.append(brand, actions, copyStatus);
+  const issueRegion = node('section', 'error-issue-region');
+  const issueList = node('div', 'error-list'); issueList.setAttribute('role', 'group'); issueList.setAttribute('aria-label', 'Errors');
+  const omittedNote = node('p', 'error-list-note'); omittedNote.hidden = true; issueRegion.append(issueList, omittedNote);
+  const body = node('div', 'error-body'), intro = node('div', 'error-intro'), heading = node('h1'), title = node('button', 'error-title-toggle'), summary = node('p', 'error-summary');
+  body.id = 'error-details'; body.hidden = true; body.setAttribute('role', 'region'); body.setAttribute('aria-labelledby', 'error-title');
+  title.type = 'button'; title.id = 'error-title'; title.setAttribute('aria-controls', body.id); title.setAttribute('aria-expanded', 'false');
+  summary.id = 'error-summary'; heading.append(title); intro.append(heading, summary);
+  const editorActions = node('div', 'error-editor-actions'), editor = node('a'); editor.id = 'editor'; editor.hidden = true; editorActions.hidden = true;
+  editor.append(icon('<path d="M14 3h7v7m0-7L10 14"/><path d="M10 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5"/>'), node('span', '', 'Open in editor'));
+  editorActions.append(editor);
+  const source = node('section', 'source'); source.id = 'source'; source.hidden = true; source.setAttribute('aria-label', 'Source');
+  const sourceHead = node('div', 'source-head'), location = node('code', 'location'); location.id = 'source-location';
+  sourceHead.append(icon('<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6Z"/><path d="M14 2v6h6"/>'), location);
+  const sourceFrame = node('pre'); sourceFrame.id = 'source-frame'; sourceFrame.tabIndex = 0; sourceFrame.setAttribute('aria-label', 'Source code');
+  source.append(sourceHead, sourceFrame);
+  const disclosures = node('div', 'error-disclosures');
+  const messageDisclosure = node('details', 'error-disclosure'); messageDisclosure.id = 'message-disclosure';
+  const fullMessage = node('pre', 'error-full'); fullMessage.id = 'message'; fullMessage.tabIndex = 0; fullMessage.setAttribute('aria-label', 'Full error message');
+  messageDisclosure.append(node('summary', '', 'Full message'), fullMessage);
+  const stackDisclosure = node('details', 'error-disclosure'); stackDisclosure.id = 'stack-disclosure';
+  const stack = node('pre', 'error-full error-stack'); stack.id = 'details'; stack.tabIndex = 0; stack.setAttribute('aria-label', 'Error stack trace');
+  stackDisclosure.append(node('summary', '', 'Stack trace'), stack); disclosures.append(messageDisclosure, stackDisclosure);
+  const sourceStatus = node('p', 'error-source-status'); sourceStatus.id = 'source-feedback'; sourceStatus.setAttribute('role', 'status');
+  body.append(intro, source, editorActions, disclosures, sourceStatus); dialog.append(header, issueRegion, body); shadow.append(style, dialog);
+  const rows = new Map();
+  let disposed = false, lastReport, selectedId, dismissing = false, expanded = false;
+  function setExpanded(value) {
+    expanded = Boolean(value);
+    const restoreFocus = !expanded && body.contains(shadow.activeElement);
+    body.hidden = !expanded; title.setAttribute('aria-expanded', String(expanded));
+    for (const [id, row] of rows) row.button.setAttribute('aria-expanded', String(expanded && id === selectedId));
+    if (expanded) dialog.setAttribute('aria-describedby', summary.id); else dialog.removeAttribute('aria-describedby');
+    if (restoreFocus) rows.get(selectedId)?.button.focus({ preventScroll: true });
+  }
+  title.onclick = () => { if (!disposed) setExpanded(!expanded); };
+  function requestDismiss() {
+    if (disposed || dismissing) return;
+    dismissing = true; if (dialog.open) dialog.close(); onDismiss();
+  }
+  dismiss.onclick = requestDismiss;
+  dialog.addEventListener('cancel', event => { event.preventDefault(); requestDismiss(); });
+  ai.onclick = () => { if (!disposed) onSendToAI(); };
+  copy.onclick = () => { if (!disposed) onCopyForAI(); };
+  function setCopyStatus(value = 'idle') {
+    if (disposed) return;
+    const status = value === 'copied' || value === 'error' ? value : 'idle';
+    copy.dataset.status = status;
+    copyLabel.textContent = status === 'copied' ? 'Copied' : status === 'error' ? 'Copy failed' : 'Copy for AI';
+    copy.setAttribute('aria-label', status === 'idle' ? 'Copy for AI' : `Copy for AI. ${copyLabel.textContent}.`);
+    copyIcon.innerHTML = svg(status === 'copied' ? '<path d="m5 12 4 4L19 6"/>' : status === 'error' ? '<circle cx="12" cy="12" r="9"/><path d="M12 7v6m0 3h.01"/>' : '<rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V4H4v12h4"/>');
+    copyStatus.textContent = status === 'copied' ? 'Copied for AI.' : status === 'error' ? 'Could not copy for AI.' : '';
+  }
+  function syncIssues(report, options) {
+    const issues = Array.isArray(options.issues) && options.issues.length ? options.issues : [{ id: 'current', report, kind: options.kind, recoverable: options.recoverable }];
+    const nextSelected = issues.find(issue => issue.id === options.selectedId)?.id ?? issues.find(issue => issue.report === report)?.id ?? issues[0].id;
+    const live = new Set(issues.map(issue => issue.id));
+    for (const [id, row] of rows) if (!live.has(id)) { row.button.remove(); rows.delete(id); }
+    issues.forEach((issue, index) => {
+      let row = rows.get(issue.id);
+      if (!row) {
+        const button = node('button', 'error-row'); button.type = 'button'; button.dataset.issueId = String(issue.id);
+        const type = node('span', 'error-row-type'), dot = node('span', 'error-row-dot'), label = node('span'); dot.setAttribute('aria-hidden', 'true'); type.append(dot, label);
+        const message = node('span', 'error-row-message'), file = node('code', 'error-row-file'); file.hidden = true;
+        const chevron = node('span', 'error-row-chevron'); chevron.setAttribute('aria-hidden', 'true');
+        button.setAttribute('aria-controls', body.id);
+        button.append(type, message, file, chevron); button.onclick = () => {
+          if (disposed) return;
+          const next = selectedId !== issue.id || !expanded;
+          onSelectIssue(issue.id); setExpanded(next);
+        };
+        row = { button, label, message, file }; rows.set(issue.id, row);
+      }
+      const next = summarizeDevError(issue.report, issue);
+      const message = typeof issue.report === 'string' ? issue.report : String(issue.report?.message ?? ''), stack = String(issue.report?.stack ?? '');
+      if (row.reportMessage !== message || row.reportStack !== stack || row.kind !== issue.kind) { row.file.textContent = ''; row.file.hidden = true; }
+      row.reportMessage = message; row.reportStack = stack; row.kind = issue.kind; row.label.textContent = next.title; row.message.textContent = next.description; row.message.title = next.description;
+      row.message.hidden = next.hydration;
+      row.button.dataset.kind = next.hydration ? 'hydration' : issue.kind || 'runtime'; row.button.dataset.recoverable = String(issue.recoverable === true); row.button.setAttribute('aria-pressed', String(issue.id === nextSelected));
+      row.button.setAttribute('aria-expanded', String(expanded && issue.id === nextSelected));
+      if (issueList.children[index] !== row.button) issueList.insertBefore(row.button, issueList.children[index] || null);
+    });
+    const omitted = Number.isFinite(options.omitted) ? Math.max(0, Math.trunc(options.omitted)) : 0, total = issues.length + omitted;
+    count.textContent = String(total); count.setAttribute('aria-label', `${total} ${total === 1 ? 'error' : 'errors'}`);
+    omittedNote.hidden = omitted === 0; omittedNote.textContent = omitted ? `${issues.length} shown · ${omitted} more` : '';
+    return nextSelected;
+  }
+  function setSourceStatus(text) { if (!disposed) sourceStatus.textContent = text || ''; }
+  function setSource(value) {
+    if (disposed) return;
+    const file = typeof value?.file === 'string' ? value.file : '';
+    const line = Number.isFinite(value?.line) ? value.line : undefined, column = Number.isFinite(value?.column) ? value.column : undefined;
+    location.textContent = file + (line ? ':' + line : '') + (column ? ':' + column : '');
+    location.title = location.textContent;
+    const frame = typeof value?.frame === 'string' ? value.frame : Array.isArray(value?.excerpt) ? value.excerpt.map(entry => `${entry.line === line ? '>' : ' '} ${entry.line} | ${entry.text}`).join('\n') : '';
+    sourceFrame.textContent = frame; sourceFrame.hidden = !frame; sourceHead.hidden = !file; source.hidden = !file && !frame;
+    editor.hidden = !/^(?:vscode|cursor):\/\/file\//.test(value?.editorUrl || '');
+    if (editor.hidden) editor.removeAttribute('href'); else editor.href = value.editorUrl;
+    editorActions.hidden = editor.hidden;
+    const row = rows.get(selectedId); if (row) { row.file.textContent = location.textContent; row.file.title = location.textContent; row.file.hidden = !file; }
+  }
+  return {
+    host,
+    render(report, options = {}) {
+      if (disposed) return;
+      const nextSelected = syncIssues(report, options), next = summarizeDevError(report, options), changed = report !== lastReport || nextSelected !== selectedId;
+      selectedId = nextSelected;
+      title.textContent = next.title; summary.textContent = next.description;
+      fullMessage.textContent = typeof report === 'string' ? report : String(report?.message ?? '');
+      stack.textContent = String(report?.stack ?? ''); stackDisclosure.hidden = !stack.textContent;
+      dialog.dataset.kind = next.hydration ? 'hydration' : options.kind || 'runtime'; dialog.dataset.recoverable = String(options.recoverable === true);
+      if (changed) { setExpanded(false); messageDisclosure.open = false; stackDisclosure.open = false; setSource(undefined); setSourceStatus(''); setCopyStatus('idle'); body.scrollTop = 0; }
+      lastReport = report; dismissing = false;
+      if (!host.isConnected) document.documentElement.append(host);
+      if (!dialog.open) { dialog.showModal(); dismiss.focus({ preventScroll: true }); }
+    },
+    setSource, setSourceStatus, setCopyStatus,
+    focusDismiss() { if (!disposed && dialog.open) dismiss.focus({ preventScroll: true }); },
+    dispose() { if (disposed) return; disposed = true; rows.clear(); if (dialog.open) dialog.close(); host.remove(); },
+  };
+}

package/runtime/dev-error-report.mjs

@@ -0,0 +1,121 @@
+// Pure diagnostic snapshots and clipboard reports; no browser or connection state.
+export const MAX_DEV_ISSUES = 50;
+export const MAX_DEV_ISSUE_TEXT = 48 * 1024;
+export const MAX_DEV_SOURCE_BYTES = 48 * 1024;
+export const MAX_DEV_AI_REPORT_BYTES = 512 * 1024;
+
+const encoder = new TextEncoder();
+const read = (value, key) => { try { return value?.[key]; } catch { return undefined; } };
+const string = value => { try { return String(value ?? ''); } catch { return '[unavailable diagnostic]'; } };
+const provided = value => value !== undefined && value !== null;
+
+function diagnostic(error) {
+  const name = read(error, 'name'), message = read(error, 'message'), stack = read(error, 'stack');
+  return { name: typeof name === 'string' ? name : 'Error', message: string(message || error), stack: string(stack || message || error) };
+}
+function boundedReport(value) {
+  return { name: value.name.slice(0, 256), message: value.message.slice(0, MAX_DEV_ISSUE_TEXT), stack: value.stack.slice(0, MAX_DEV_ISSUE_TEXT) };
+}
+const report = error => boundedReport(diagnostic(error));
+function hash(value) {
+  let result = 2166136261;
+  for (let index = 0; index < value.length; index++) result = Math.imul(result ^ value.charCodeAt(index), 16777619);
+  return (result >>> 0).toString(36);
+}
+
+/** Current issues only. Preserve the original error identity separately from its bounded snapshot. */
+export function collectDevIssues({ critical, criticalKind = 'runtime', typeErrors = [], recoverable } = {}) {
+  const types = [], unique = new Set(), groups = new Map();
+  for (const error of Array.isArray(typeErrors) ? typeErrors : []) {
+    const value = diagnostic(error), key = JSON.stringify([value.name, value.message, value.stack]);
+    if (unique.has(key)) continue;
+    unique.add(key);
+    const base = 'ts-' + hash(key), item = { key, base, error, report: boundedReport(value) };
+    types.push(item);
+    if (!groups.has(base)) groups.set(base, []);
+    groups.get(base).push(item);
+  }
+  // Rare short-hash collisions get deterministic suffixes independent of display order.
+  for (const group of groups.values()) {
+    group.sort((left, right) => left.key < right.key ? -1 : left.key > right.key ? 1 : 0);
+    for (let index = 0; index < group.length; index++) group[index].id = group[index].base + (index ? '-' + (index + 1) : '');
+  }
+  const issues = [], hasCritical = provided(critical), hasRecoverable = provided(recoverable);
+  if (hasCritical) issues.push({ id: 'critical', error: critical, report: report(critical), kind: string(criticalKind || 'runtime').slice(0, 64), recoverable: false });
+  const available = MAX_DEV_ISSUES - Number(hasCritical) - Number(hasRecoverable);
+  for (const item of types.slice(0, available)) issues.push({ id: item.id, error: item.error, report: item.report, kind: 'typescript', recoverable: false });
+  if (hasRecoverable) issues.push({ id: 'recoverable', error: recoverable, report: report(recoverable), kind: 'recoverable', recoverable: true });
+  return { issues, omitted: Math.max(0, types.length - available) };
+}
+
+function pathname(value) {
+  try { return new URL(string(value || '/'), 'http://prnext.local').pathname.slice(0, 2048) || '/'; } catch { return '/'; }
+}
+const bytes = value => encoder.encode(value).length;
+function clipBytes(value, limit) {
+  if (limit <= 0) return '';
+  if (bytes(value) <= limit) return value;
+  let low = 0, high = Math.min(value.length, limit);
+  while (low < high) {
+    const middle = Math.ceil((low + high) / 2);
+    if (bytes(value.slice(0, middle)) <= limit) low = middle; else high = middle - 1;
+  }
+  // Never split a UTF-16 pair at the byte boundary.
+  if (low && /[\uD800-\uDBFF]/.test(value[low - 1]) && /[\uDC00-\uDFFF]/.test(value[low] || '')) low--;
+  return value.slice(0, low);
+}
+function stackWithoutMessage({ name, message, stack }) {
+  for (const prefix of [name + ': ' + message, message]) {
+    if (stack === prefix || prefix.startsWith(stack)) return '';
+    for (const newline of ['\r\n', '\n']) if (stack.startsWith(prefix + newline)) return stack.slice(prefix.length + newline.length);
+  }
+  return stack;
+}
+function sourceFor(sourceById, id) {
+  try {
+    if (sourceById instanceof Map) return sourceById.get(id);
+    return sourceById && Object.hasOwn(sourceById, id) ? sourceById[id] : undefined;
+  } catch { return undefined; }
+}
+function sourceText(source) {
+  if (!source || typeof source !== 'object') return '';
+  const file = read(source, 'file'), frame = read(source, 'frame');
+  if (typeof file !== 'string' && typeof frame !== 'string') return '';
+  const line = read(source, 'line'), column = read(source, 'column');
+  let location = typeof file === 'string' ? file.slice(0, 2048) : '';
+  if (location && Number.isSafeInteger(line) && line > 0) {
+    location += ':' + line;
+    if (Number.isSafeInteger(column) && column > 0) location += ':' + column;
+  }
+  const original = [location ? 'Source: ' + location : '', typeof frame === 'string' ? frame : ''].filter(Boolean).join('\n');
+  if (bytes(original) <= MAX_DEV_SOURCE_BYTES) return original;
+  const note = '\n[Source frame truncated at 48 KiB.]';
+  return clipBytes(original, MAX_DEV_SOURCE_BYTES - bytes(note)) + note;
+}
+
+/** This preserves recorded diagnostic text; it does not claim to sanitize user-logged secrets. */
+export function formatDevIssuesForAI(issues, { route = '/', sourceById, omitted = 0 } = {}) {
+  const values = Array.isArray(issues) ? issues : [], selected = values.slice(0, MAX_DEV_ISSUES);
+  const knownOmitted = Number.isSafeInteger(omitted) && omitted > 0 ? omitted : 0;
+  let omittedCount = knownOmitted + Math.max(0, values.length - selected.length), truncated = false, limitedFields = false;
+  let output = 'Fix all errors below.\n\nRoute: ' + pathname(route);
+  // Reserve enough UTF-8 bytes for explicit omission/truncation notices.
+  const budget = MAX_DEV_AI_REPORT_BYTES - 512;
+  for (let index = 0; index < selected.length; index++) {
+    const issue = selected[index] || {}, detail = report(read(issue, 'report') || read(issue, 'error'));
+    const stack = stackWithoutMessage(detail), source = sourceText(sourceFor(sourceById, read(issue, 'id')));
+    limitedFields ||= detail.message.length === MAX_DEV_ISSUE_TEXT || detail.stack.length === MAX_DEV_ISSUE_TEXT;
+    const block = '\n\n' + (index + 1) + '. ' + string(read(issue, 'kind') || 'runtime').slice(0, 64) + ' — ' + detail.name
+      + '\n' + detail.message + (stack ? '\n\nStack:\n' + stack : '') + (source ? '\n\n' + source : '');
+    const remaining = budget - bytes(output);
+    if (bytes(block) > remaining) {
+      output += clipBytes(block, remaining);truncated = true;omittedCount += selected.length - index - 1;break;
+    }
+    output += block;
+  }
+  if (!selected.length) output += '\n\nNo current errors.';
+  if (limitedFields) output += '\n\n[Diagnostic message and stack fields are limited to 48 KiB each.]';
+  if (truncated) output += '\n\n[Report truncated at 512 KiB.]';
+  if (omittedCount) output += '\n\n[' + omittedCount + ' additional current issue' + (omittedCount === 1 ? '' : 's') + ' omitted.]';
+  return output;
+}

package/runtime/dev-file-changes.mjs

@@ -105,6 +105,6 @@ export function createDevChangeFilter(root, {maxEntries=512,maxBytes=1024*1024}=
     }
     return changed;
   };
-  filter.acceptInputs=inputs=>{for(const [file,value] of inputs)remember(file,value);};
+  filter.acceptInputs=inputs=>{const changed=[];for(const [file,value] of inputs){if(fingerprints.get(file)?.value!==value)changed.push(file);remember(file,value);}return changed;};
   return filter;
 }

package/runtime/dev-gateway.mjs

@@ -0,0 +1,44 @@
+import {spawn} from 'node:child_process';
+
+export class DevGateway {
+  constructor(binary,root,{hostname,port,onEnsure,onOpen,onClose,onFatal}) {
+    this.next=0;this.pending=new Map();this.stopping=false;
+    this.child=spawn(binary,['dev-gateway',root,'--hostname',hostname,'--port',String(port)],{stdio:['pipe','pipe','inherit'],windowsHide:true});
+    this.closed=new Promise(resolve=>this.child.once('close',resolve));
+    this.ready=new Promise((resolve,reject)=>{
+      const timer=setTimeout(()=>{reject(Error('Development listener did not start'));this.child.kill();},15000);
+      let buffer='';this.child.stdout.setEncoding('utf8');
+      this.child.stdout.on('data',chunk=>{
+        buffer+=chunk;if(buffer.length>1024*1024){this.child.kill();return;}
+        for(let end;(end=buffer.indexOf('\n'))>=0;){
+          const line=buffer.slice(0,end);buffer=buffer.slice(end+1);let message;
+          try{message=JSON.parse(line);}catch{this.child.kill();return;}
+          if(message.type==='ready'){clearTimeout(timer);resolve(message);continue;}
+          if(message.type==='open'){onOpen(message);continue;}
+          if(message.type==='close'){onClose(message);continue;}
+          if(message.type==='ensure'){
+            Promise.resolve().then(()=>onEnsure(message.path,message.client)).then(value=>this.request('result',{request:message.id,value}),error=>this.request('result',{request:message.id,value:{error:String(error.message).slice(0,8000)}})).catch(error=>{if(!this.stopping)onFatal(error);});continue;
+          }
+          const pending=this.pending.get(message.id);if(!pending)continue;
+          this.pending.delete(message.id);clearTimeout(pending.timer);message.ok?pending.resolve(message.value):pending.reject(Error(message.error));
+        }
+      });
+      const failed=error=>{clearTimeout(timer);reject(error);for(const pending of this.pending.values()){clearTimeout(pending.timer);pending.reject(error);}this.pending.clear();if(!this.stopping)onFatal(error);};
+      this.child.once('error',failed);this.child.once('exit',(code,signal)=>failed(Error(`Development listener exited ${signal||code}`)));
+    });
+    this.child.stdin.on('error',()=>{});
+  }
+  async request(command,values={}) {
+    await this.ready;
+    if(this.stopping||this.child.exitCode!==null)throw Error('Development listener is closed');
+    const id=++this.next;
+    const line=JSON.stringify({id,command,...values})+'\n';
+    if(Buffer.byteLength(line)>65536)throw Error(`Development ${command} control exceeds the 64 KiB frame budget`);
+    return new Promise((resolve,reject)=>{
+      const timer=setTimeout(()=>{this.pending.delete(id);reject(Error(`Development ${command} control timed out`));this.child.kill();},35000);
+      this.pending.set(id,{resolve,reject,timer});
+      this.child.stdin.write(line);
+    });
+  }
+  async close(){this.stopping=true;this.child.stdin.end();const timer=setTimeout(()=>this.child.kill('SIGKILL'),6000);try{await this.closed;}finally{clearTimeout(timer);}}
+}

package/runtime/dev-host-relay.mjs

@@ -0,0 +1,66 @@
+import path from 'node:path';
+import {setTimeout as delay} from 'node:timers/promises';
+import {createCloudClient} from './cloud/client.mjs';
+import {cloudOrigin,credentialPath,linkPath,readState} from './cloud/state.mjs';
+
+// Explicit --host-ai only. The cloud never receives a localhost capability or
+// an address to fetch: this process pulls a bounded, allowlisted command queue.
+const allowed = new Set(['dev_snapshot','dev_connection','dev_logs','dev_routes','dev_route_ensure','dev_cache_invalidate','dev_verify','dev_source','dev_ai_context']);
+export async function startDevHostRelay({root,tools,env=process.env,fetcher=fetch,interval=1000,signal:parentSignal}) {
+  const controller=new AbortController(),signal=AbortSignal.any([controller.signal,...(parentSignal?[parentSignal]:[])]);
+  const link=await readState(linkPath(root));
+  const origin=cloudOrigin(env.PRNEXT_CLOUD_URL||link?.origin||'https://app.prnext.dev');
+  const credential=await readState(credentialPath(origin,env));
+  const log=(level,message)=>tools.addServerLog(level,message,{process:'host-relay'});
+  const status=value=>tools.setHostRelayState?.({enabled:true,linked:false,origin,...value});
+  status({});
+  if(!credential||credential.origin!==origin||!/^prn_[A-Za-z0-9_-]{43}$/.test(credential.accessToken||'')||credential.expiresAt<=Date.now()) {
+    log('warn',`Host AI relay is off. Run prnext login --server ${origin}, then restart with --host-ai.`);
+    status({error:'Run prnext login to connect this terminal.'});
+    return {close:async()=>{}};
+  }
+  const api=createCloudClient(origin,{token:credential.accessToken,signal,fetcher});
+  let relayId,stopped=false;
+  const register=async()=>{
+    const reply=await api('/ai/dev/register',{method:'POST',body:{session:tools.session,title:path.basename(root).slice(0,80),...(link?.origin===origin&&link.projectId?{projectId:link.projectId}:{})}});
+    if(typeof reply.id!=='string'||reply.id.length>100)throw Error('Host returned an invalid development relay.');
+    relayId=reply.id;status({linked:true,lastSeen:Date.now()});log('info','Host AI relay ready. Your existing Host MCP can discover this local development session.');
+  };
+  try{await register();}catch(error){const message=error.status===404?'This Host server needs the local development relay update. Local MCP remains available.':`Host AI relay unavailable: ${error.message}`;status({error:message});log('warn',message);return {close:async()=>{}};}
+  async function work(command) {
+    let result;
+    if(!command||typeof command.id!=='string'||!allowed.has(command.tool)||!command.args||typeof command.args!=='object'||Array.isArray(command.args))
+      result={error:'Unsupported development command.'};
+    else if(!Number.isFinite(command.expiresAt)||command.expiresAt<=Date.now())result={error:'Development command expired before execution.'};
+    else {
+      try{result={result:await tools.executeTool(command.tool,command.args,{client:`Host MCP: ${String(command.client||'assistant').slice(0,70)}`})};}
+      catch(error){result={error:String(error.message).slice(0,1000)};}
+    }
+    if(!stopped)await api('/ai/dev/result',{method:'POST',body:{id:relayId,commandId:command.id,...result}});
+  }
+  const running=(async()=>{
+    let failures=0;
+    while(!stopped){
+      try{
+        const reply=await api('/ai/dev/poll',{method:'POST',body:{id:relayId}});
+        status({linked:true,lastSeen:Date.now()});
+        for(const command of (Array.isArray(reply.commands)?reply.commands:[]).slice(0,1)) {if(stopped||signal.aborted)break;await work(command);}
+        failures=0;
+      }catch(error){
+        if(stopped)break;
+        status({error:error.message});
+        if(error.status===401||error.status===403){log('warn','Host AI relay disconnected: terminal access expired or was revoked.');break;}
+        if(error.status===404){try{await register();failures=0;}catch{failures++;}}
+        else failures++;
+        if(failures===1)log('warn','Host AI relay reconnecting; no command is replayed.');
+      }
+      try{await delay(Math.min(10000,interval*2**Math.min(failures,3)),undefined,{signal});}catch{break;}
+    }
+  })();
+  return {id:relayId,async close(){
+    if(stopped)return;stopped=true;controller.abort();status({enabled:false});
+    // Abort long local verification without blocking development shutdown.
+    await Promise.race([running,delay(100)]);
+    try{await createCloudClient(origin,{token:credential.accessToken,signal:AbortSignal.timeout(1500),fetcher})('/ai/dev/close',{method:'POST',body:{id:relayId}});}catch{}
+  }};
+}

package/runtime/dev-indicator.mjs

@@ -0,0 +1,186 @@
+import logo from './dev-logo.mjs';
+import { createLazyDevTool } from './dev-lazy-tool.mjs';
+import { popoutIcon } from './dev-popout.mjs';
+import { deviceIcons } from './dev-ui-icons.mjs';
+import { createDevPosition } from './dev-position.mjs';
+import { createDevIssueMotion } from './dev-issue-motion.mjs';
+
+// This module is imported only by the development browser entry. No framework
+// contexts, application CSS, network requests or additional SSE streams.
+export function createDevIndicator({ position = 'bottom-left', snapshot, showIssues, capture, tools }) {
+  const host = document.createElement('prnext-dev-tools');
+  host.id = '__prnext_dev_tools__';
+  const shadow = host.attachShadow({ mode: 'open' });
+  const style = document.createElement('style');
+  style.textContent = `
+    :host{all:initial;position:fixed;bottom:max(18px,env(safe-area-inset-bottom));left:max(18px,env(safe-area-inset-left));width:44px;height:44px;--issue-rgb:240,92,102;--issue-alpha:.5;--origin-x:22px;--origin-y:calc(100% - 22px);--flip-x:1;--flip-y:1;--panel-from:8px;z-index:2147483646;color-scheme:dark;font:13px/1.5 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#ededf0;text-align:left;direction:ltr}
+    :host([data-position^=top]){top:max(18px,env(safe-area-inset-top));bottom:auto;--origin-y:22px;--flip-y:-1;--panel-from:-8px}:host([data-position$=right]){right:max(18px,env(safe-area-inset-right));left:auto;--origin-x:calc(100% - 22px);--flip-x:-1}
+    *,*::before,*::after{box-sizing:border-box}button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;cursor:pointer}button:focus-visible{outline:1px solid #858585;outline-offset:-2px}button:disabled{cursor:default}svg{width:16px;height:16px;flex:none}
+    .trigger{position:relative;z-index:3;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #303030;border-radius:999px;background:#080808;box-shadow:0 2px 5px #0006,0 8px 22px #0004,inset 0 1px 0 #ffffff06;user-select:none;cursor:grab}:host([data-dragging=true]) .trigger{cursor:grabbing;scale:1.06;border-color:#777;box-shadow:0 10px 24px #0008}
+    .trigger:hover{border-color:#555;background:#101010}.trigger[aria-expanded=true]{border-color:transparent;background:transparent;box-shadow:none}.trigger img{width:28px;height:28px;border-radius:50%;pointer-events:none;filter:grayscale(1) contrast(1.25)}
+    .bubble{position:absolute;bottom:0;left:0;z-index:1;pointer-events:none;filter:drop-shadow(0 12px 22px #0008) drop-shadow(0 2px 5px #0006)}.bubble-mask{width:100%;height:100%;clip-path:circle(22px at var(--origin-x) var(--origin-y))}.bubble-mask[data-open=true]{clip-path:circle(var(--bubble-radius) at var(--origin-x) var(--origin-y))}.bubble svg{display:block;width:100%;height:100%;transform:scale(var(--flip-x),var(--flip-y));transform-origin:center}.bubble path{fill:#080808;stroke:#292929;stroke-width:1}
+    .ring{position:absolute;inset:3px;pointer-events:none}.ring svg{display:block;width:100%;height:100%;overflow:visible}.ring circle{fill:none;stroke:transparent;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:0 50 0 50;transform:rotate(-113.4deg);transform-origin:center}
+    .trigger[data-busy=true] .ring circle{stroke:#b3c1ff;stroke-dasharray:25 0 25 50}.trigger[data-issue-severity=error] .ring circle{stroke:rgba(var(--issue-rgb),var(--issue-alpha));stroke-dasharray:13 37 13 37}.trigger[data-issue-severity=critical] .ring circle{stroke:rgba(var(--issue-rgb),var(--issue-alpha));stroke-dasharray:50 0 50 0}
+    .issue-motion{position:absolute;top:0;left:0;width:1px;height:1px;overflow:visible;z-index:4;pointer-events:none;visibility:hidden;opacity:var(--issue-alpha)}.issue-motion[data-running=true]{visibility:visible}.issue-motion-path,.issue-motion-ring,.issue-motion-streak{stroke:rgb(var(--issue-rgb))}
+    :host([data-issue-transfer]) .trigger[data-issue-severity=error] .ring circle,:host([data-issue-transfer]) .trigger[data-issue-severity=critical] .ring circle{transition:none}
+    :host([data-issue-transfer=moving]) .trigger[data-issue-severity=error] .ring circle,:host([data-issue-transfer=moving]) .trigger[data-issue-severity=critical] .ring circle,:host([data-issue-transfer=open]) .trigger[data-issue-severity=error] .ring circle,:host([data-issue-transfer=open]) .trigger[data-issue-severity=critical] .ring circle{stroke:transparent}
+    :host([data-issue-transfer=moving]) .action-issues{border-color:transparent}
+    .panel{position:absolute;bottom:36px;left:0;width:264px;max-width:calc(100vw - 36px);max-height:calc(100dvh - 100px);overflow:auto;overscroll-behavior:contain;padding:8px 8px 12px;border:0;border-radius:20px;background:transparent;scrollbar-color:#333 #080808;transform-origin:var(--origin-x) bottom}
+    :host([data-position^=top]) .bubble{top:0;bottom:auto}:host([data-position^=top]) .panel{top:36px;bottom:auto;transform-origin:var(--origin-x) top}:host([data-position$=right]) .bubble,:host([data-position$=right]) .panel{right:0;left:auto}
+    .corner-hints{position:fixed;inset:0;pointer-events:none;z-index:0}.corner-hint{position:absolute;width:44px;height:44px;bottom:max(18px,env(safe-area-inset-bottom));left:max(18px,env(safe-area-inset-left));border:1px dashed #ffffff35;border-radius:50%;background:#08080888}.corner-hint[data-corner^=top]{top:max(18px,env(safe-area-inset-top));bottom:auto}.corner-hint[data-corner$=right]{right:max(18px,env(safe-area-inset-right));left:auto}.corner-hint[data-active=true]{border-style:solid;border-color:#aaa;background:#ffffff16;scale:1.1}
+    :host([hidden]),[hidden]{display:none!important}.panel{z-index:2}.panel:not([data-open=true]){opacity:0;pointer-events:none}
+    .panel:focus{outline:none}.trigger:focus-visible{outline-offset:-4px}.action:focus-visible{background:#171717}
+    .action{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;border:0;padding:9px 10px;border-radius:11px;background:transparent;text-decoration:none;text-align:left;font-size:12px}.action:hover:not(:disabled){background:#161616}.action:disabled{color:#a1a1a1}.action .hint{margin-left:auto;color:#a1a1a1;font-size:11px}.divider{height:1px;margin:6px 8px;background:#202020}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
+    .action-issues{border:1px solid rgba(var(--issue-rgb),var(--issue-alpha));padding:8px 9px}.action-issues .hint{color:rgb(var(--issue-rgb))}
+    .action-split{display:flex;align-items:center}.action-split .action{flex:1;min-width:0}.detach{display:grid;place-items:center;flex:none;width:32px;min-height:36px;border:0;border-radius:8px;background:transparent;color:#aaa;padding:4px}.detach:hover{background:#161616;color:#fff}.detach svg{width:14px;height:14px}
+    .devices{display:flex;gap:3px;padding:4px;background:#111;border-radius:11px;margin:6px 4px}.device-choice{position:relative;display:grid;place-items:center;flex:1;min-width:0;min-height:34px;padding:6px 0;border:0;border-radius:8px;background:transparent;color:#aaa}.device-choice:hover{background:#1c1c1c;color:#fff}.device-choice[aria-pressed=true]{background:#222;color:#fff}.devices .detach{width:32px;min-height:34px}.device-choice::after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 8px);left:0;background:#1b1b1b;color:#eee;padding:6px 9px;border-radius:7px;font-size:11px;white-space:nowrap;box-shadow:0 3px 14px #0005;opacity:0;visibility:hidden;pointer-events:none;z-index:4}.device-choice:hover::after,.device-choice:focus-visible::after{opacity:1;visibility:visible}
+    @media(prefers-reduced-motion:no-preference){.trigger{transition:background-color 150ms,border-color 150ms,box-shadow 150ms,transform 150ms,scale 180ms}.trigger:active{transform:scale(.96)}.ring circle{transition:stroke 160ms ease-out,stroke-dasharray 160ms ease-out}.corner-hint{transition:background-color 150ms,border-color 150ms,scale 180ms}.bubble-mask{transition:clip-path 260ms cubic-bezier(.3,0,.3,1)}.bubble-mask[data-open=true]{transition-duration:360ms;transition-timing-function:cubic-bezier(.16,1,.3,1)}.panel{transition:opacity 110ms ease-out,transform 230ms cubic-bezier(.16,1,.3,1)}.panel:not([data-open=true]){transform:translateY(var(--panel-from)) scale(.97)}.panel[data-open=true]{transition:opacity 120ms ease-out 60ms,transform 180ms cubic-bezier(.16,1,.3,1) 60ms}:host([data-position^=top]) .bubble-mask{transition-duration:180ms}:host([data-position^=top]) .bubble-mask[data-open=true]{transition-duration:220ms}:host([data-position^=top]) .panel{transition:opacity 90ms ease-out,transform 180ms cubic-bezier(.16,1,.3,1)}:host([data-position^=top]) .panel[data-open=true]{transition:opacity 90ms ease-out,transform 140ms cubic-bezier(.16,1,.3,1)}.trigger[data-busy=true] .ring{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}}
+    @media(pointer:coarse){.action,.device-choice,.devices .detach{min-height:44px}.devices .detach{width:44px}}
+    @media(forced-colors:active){.trigger,.action-issues{border-color:ButtonText}.bubble path{fill:Canvas;stroke:ButtonText}.trigger[data-busy=true] .ring circle,.trigger[data-issue-severity=error] .ring circle,.trigger[data-issue-severity=critical] .ring circle{stroke:CanvasText}.issue-motion{opacity:1}.issue-motion-path,.issue-motion-ring,.issue-motion-streak{stroke:CanvasText}button:focus-visible{outline:2px solid Highlight;outline-offset:-3px}}
+  `;
+  const trigger = document.createElement('button');
+  trigger.type = 'button'; trigger.className = 'trigger';
+  trigger.setAttribute('aria-label', 'Open PRNext developer tools');
+  trigger.setAttribute('aria-haspopup', 'dialog');
+  trigger.setAttribute('aria-expanded', 'false'); trigger.setAttribute('aria-controls', 'tools');
+  const mark = document.createElement('img'); mark.src = logo; mark.alt = ''; mark.draggable = false;
+  const ring = document.createElement('span'); ring.className = 'ring'; ring.setAttribute('aria-hidden', 'true');
+  const ringSvg=document.createElementNS('http://www.w3.org/2000/svg','svg');ringSvg.setAttribute('viewBox','0 0 36 36');
+  const ringCircle=document.createElementNS('http://www.w3.org/2000/svg','circle');
+  for(const[name,value]of Object.entries({cx:'18',cy:'18',r:'17.25',pathLength:'100'}))ringCircle.setAttribute(name,value);
+  ringSvg.append(ringCircle);ring.append(ringSvg);
+  trigger.append(mark, ring);
+  const panel = document.createElement('section');
+  panel.id = 'tools'; panel.className = 'panel'; panel.hidden = true; panel.inert = true; panel.tabIndex = -1;
+  panel.setAttribute('role', 'dialog'); panel.setAttribute('aria-label', 'PRNext developer tools');
+  const bubble=document.createElement('div');bubble.className='bubble';bubble.hidden=true;bubble.setAttribute('aria-hidden','true');
+  const mask=document.createElement('div');mask.className='bubble-mask';
+  const surface=document.createElementNS('http://www.w3.org/2000/svg','svg');surface.setAttribute('preserveAspectRatio','none');
+  const shape=document.createElementNS('http://www.w3.org/2000/svg','path');surface.append(shape);mask.append(surface);bubble.append(mask);
+  function measureBubble(){
+    if(panel.hidden)return;
+    const width=panel.offsetWidth,height=panel.offsetHeight;
+    bubble.style.width=width+'px';bubble.style.height=(height+36)+'px';bubble.style.setProperty('--bubble-radius',Math.ceil(Math.hypot(width-22,height+14)+2)+'px');surface.setAttribute('viewBox',`0 0 ${width} ${height+36}`);
+    // One contour: rounded menu, curved shoulder, and the logo's circular foot.
+    shape.setAttribute('d',`M20.5 .5H${width-20.5}Q${width-.5} .5 ${width-.5} 20.5V${height-20}Q${width-.5} ${height} ${width-20.5} ${height}H64Q44 ${height} 44 ${height+14}A21.75 21.75 0 0 1 .5 ${height+14}V20.5Q.5 .5 20.5 .5Z`);
+    issueMotion?.refresh();
+  }
+  // Only constant icon markup goes through innerHTML. Labels use textContent.
+  const icon = paths => `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths}</svg>`;
+  function action(label, drawing, handler) {
+    const button = document.createElement('button'); button.type = 'button'; button.className = 'action';
+    button.innerHTML = icon(drawing); const text = document.createElement('span'); text.textContent = label;
+    button.append(text); button.onclick = handler; panel.append(button); return button;
+  }
+  const issues = action('View issues', '<circle cx="12" cy="12" r="8.5"/><path d="M12 7.5v5m0 3.5h.01"/>', () => { close(false); showIssues(); });
+  issues.classList.add('action-issues');
+  const issueCount = document.createElement('span'); issueCount.className = 'hint'; issues.append(issueCount);
+  action('Reload page', '<path d="M20 7v5h-5M4 17v-5h5"/><path d="M6 7a7 7 0 0 1 12-1l2 6M4 12l2 6a7 7 0 0 0 12-1"/>', () => location.reload());
+  let workbench;
+  const toolError=error=>{feedback.textContent='Could not open development tool. Try again.';console.error(error);};
+  const getWorkbench = () => workbench ||= createLazyDevTool(async()=>{
+    const {createDevWorkbench}=await import('./dev-workbench.mjs');
+    return createDevWorkbench({shadow,capture,tools,restoreFocus:()=>trigger.focus()});
+  },{onError:toolError,reserve(method,args){
+    if(!['popConsole','popPreview'].includes(method))return;
+    try{return window.open('about:blank','_blank',`popup=yes,width=${method==='popConsole'?860:args[0]==='tablet'?1000:560},height=${method==='popConsole'?520:960},resizable=yes,scrollbars=yes`);}catch{return null;}
+  }});
+  function detachButton(label,handler) {
+    const button=document.createElement('button');button.type='button';button.className='detach';button.innerHTML=popoutIcon;
+    button.setAttribute('aria-label',label);button.title=label;button.onclick=handler;return button;
+  }
+  const consoleAction=action('Client console', '<path d="m5 7 5 5-5 5m8 0h6"/>', () => { close(false); getWorkbench().showConsole(); });
+  const consoleRow=document.createElement('div');consoleRow.className='action-split';consoleAction.replaceWith(consoleRow);
+  consoleRow.append(consoleAction,detachButton('Open console in new window',()=>{close(false);getWorkbench().popConsole();}));
+  let inspector;
+  const getInspector = () => inspector ||= createLazyDevTool(async()=>{
+    const {createDevToolsPanel}=await import('./dev-tools-panel.mjs');
+    return createDevToolsPanel({shadow,tools,restoreFocus:()=>trigger.focus()});
+  },{onError:toolError});
+  if (tools) {
+    action('Inspect','<path d="M3 12h4l3-8 4 16 3-8h4"/>',()=>{close(false);getInspector().open('requests');});
+    action('Select element for AI','<path d="m4 3 7 17 2-7 7-2L4 3Z"/>',()=>{close(false);getInspector().pick();});
+  }
+  const devices = document.createElement('div'); devices.className = 'devices'; devices.setAttribute('role','group'); devices.setAttribute('aria-label','Preview device');
+  let selectedDevice='desktop',previewSelected=false;
+  const deviceChoices=new Map();
+  const currentDevice=()=>previewSelected?workbench?.previewState().device||selectedDevice:selectedDevice;
+  function updateDevices(){
+    const current=currentDevice();
+    for(const [value,button] of deviceChoices)button.setAttribute('aria-pressed',String(value===current));
+    devicePopout.title=`Open ${current} in new window`;
+  }
+  for (const [value,label,width] of [
+    ['desktop','Desktop','Responsive'],['phone','Phone','390px'],['tablet','Tablet','768px'],
+  ]) {
+    const button = document.createElement('button'); button.type = 'button'; button.className='device-choice'; button.innerHTML = deviceIcons[value];
+    button.setAttribute('aria-label',label);button.setAttribute('aria-description',width);button.dataset.tooltip=`${label} · ${width}`;
+    button.onclick = () => { selectedDevice=value;previewSelected=true;close(false);getWorkbench().openPreview(value);updateDevices(); };
+    deviceChoices.set(value,button);devices.append(button);
+  }
+  const devicePopout=detachButton('Open device preview in new window',()=>{const value=currentDevice();close(false);getWorkbench().popPreview(value);});
+  devices.append(devicePopout);updateDevices();
+  panel.append(devices);
+  const divider = document.createElement('div'); divider.className = 'divider'; panel.append(divider);
+  action('Hide until reload', '<path d="m3 3 18 18M10.6 10.6a2 2 0 0 0 2.8 2.8M9.5 5.2A10 10 0 0 1 12 5c6 0 10 7 10 7a17 17 0 0 1-3 3.5M6.3 6.3A22 22 0 0 0 2 12s4 7 10 7a10 10 0 0 0 4.5-1.1"/>', () => {
+    close(false);issueMotion.closeImmediately(); workbench?.hide(); inspector?.hide(); host.hidden = true; restorePageFocus();
+  });
+  const live = document.createElement('span'); live.className = 'sr-only'; live.setAttribute('role', 'status');
+  const feedback = document.createElement('span'); feedback.className = 'sr-only'; feedback.setAttribute('role', 'status');
+  shadow.append(style,bubble,panel,trigger,live,feedback); document.body.append(host);
+  const issueMotion = createDevIssueMotion({ host, shadow, ringSvg, issues, panel });
+  const geometry=new ResizeObserver(measureBubble);geometry.observe(panel);
+  let opened = false, timer, previousSummary, previousPageFocus = document.activeElement;
+  function restorePageFocus() {
+    if (previousPageFocus?.isConnected && previousPageFocus !== document.body && previousPageFocus !== host) previousPageFocus.focus();
+    else { const body = document.body, old = body.getAttribute('tabindex'); body.tabIndex = -1; body.focus(); if (old === null) body.removeAttribute('tabindex'); else body.setAttribute('tabindex', old); }
+  }
+  function close(restore) {
+    opened = false; clearTimeout(timer); trigger.setAttribute('aria-expanded', 'false');
+    issueMotion.update({severity:trigger.dataset.issueSeverity,open:false});
+    panel.dataset.open = 'false';mask.dataset.open='false';panel.inert = true; panel.setAttribute('aria-hidden', 'true');
+    if (restore) trigger.focus();
+    timer = setTimeout(() => { if (!opened) {panel.hidden=true;bubble.hidden=true;} }, matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : 280);
+  }
+  function update() {
+    // App Router's global error boundary can replace the document body.
+    if (!host.isConnected && document.body) document.body.append(host);
+    const info = snapshot();
+    const count = info.issues || 0;
+    const severity=count?(info.criticalIssues>0?'critical':'error'):'none';
+    const status = count ? 'error' : info.connection !== 'connected' ? 'reconnecting' : info.building ? 'building' : 'ready';
+    const label = count ? `${count} ${count === 1 ? 'issue' : 'issues'}` : status === 'building' ? 'Compiling…' : status === 'reconnecting' ? 'Connecting…' : 'Ready';
+    if (count === 0 && shadow.activeElement === issues) panel.focus();
+    issues.hidden = count === 0; issueCount.textContent = String(count);
+    trigger.dataset.busy = String(info.building && !count); trigger.title = `PRNext · ${label}`;
+    trigger.dataset.issueSeverity=severity;
+    issueMotion.update({severity,open:opened&&!panel.hidden});
+    if(count)trigger.setAttribute('aria-description',severity==='critical'?'Critical error. Open issues to view details.':'Non-blocking issue. Open issues to view details.');else trigger.removeAttribute('aria-description');
+    trigger.setAttribute('aria-label', 'Open PRNext developer tools' + (count ? ` (${label})` : ''));
+    const summary=count?`${label}. ${severity==='critical'?'Critical error':'Non-blocking issue'}`:label;
+    if (previousSummary !== summary) { live.textContent = `PRNext: ${summary}`; previousSummary = summary; }
+  }
+  trigger.onclick = () => {
+    if (opened) { close(true); return; }
+    opened = true; clearTimeout(timer); feedback.textContent = '';
+    update();updateDevices(); panel.hidden = false;bubble.hidden=false;panel.inert = false;measureBubble();
+    panel.removeAttribute('aria-hidden'); trigger.setAttribute('aria-expanded', 'true');
+    mask.getBoundingClientRect();panel.dataset.open='true';mask.dataset.open='true';panel.focus();
+    issueMotion.update({severity:trigger.dataset.issueSeverity,open:true});
+  };
+  const placement = createDevPosition({ host, trigger, position, announce: text => { feedback.textContent = text; }, onDrag() {
+    close(false);issueMotion.closeImmediately(); panel.hidden = true; bubble.hidden = true;
+  } });
+  const controller = new AbortController(), options = { capture: true, signal: controller.signal };
+  document.addEventListener('pointerdown', event => { if (opened && !event.composedPath().some(node => node === panel || node === trigger)) close(false); }, options);
+  document.addEventListener('focusin', event => {
+    if (!event.composedPath().includes(host)) { previousPageFocus = event.target; if (opened) close(false); }
+  }, options);
+  shadow.addEventListener('focusin', event => { if (opened && !panel.contains(event.target) && event.target !== trigger) close(false); }, {signal:controller.signal});
+  shadow.addEventListener('keydown', event => { if (event.key === 'Escape' && opened) { event.preventDefault(); event.stopPropagation(); close(true); } });
+  globalThis.addEventListener('popstate', update, { signal: controller.signal });
+  update();
+  const contextListener = event => { close(false); getInspector().open('ai', event.detail); };
+  if (tools) globalThis.addEventListener('prnext:devtools:context', contextListener, {signal:controller.signal});
+  return { update, dispose() { clearTimeout(timer);issueMotion.dispose();placement.dispose();geometry.disconnect();controller.abort();workbench?.dispose();inspector?.dispose();host.remove(); } };
+}