@thomas.f/prnext 0.1.16-alpha → 0.1.18-alpha

package/runtime/dev-element-picker.mjs

@@ -0,0 +1,213 @@
+import { elementPickerStyle } from './dev-element-picker-style.mjs';
+
+const PROPERTIES = ['display', 'position', 'width', 'height', 'color', 'background-color', 'font-family', 'font-size', 'font-weight', 'line-height', 'padding', 'margin', 'gap', 'border-radius', 'align-items', 'justify-content', 'grid-template-columns'];
+const HOVER_HOLD = 35, SMALL_HOVER_HOLD = 75, POINTER_REST = 50;
+const pickerEpochs=new WeakMap();
+const toolNode = node => {
+  for(let current=node;current;current=current.getRootNode?.().host)
+    if(current.closest?.('prnext-dev-tools,prnext-dev-picker,#__prnext_dev_error__'))return true;
+  return false;
+};
+
+function sourceLocation(element) {
+  for(let owner=element;owner;owner=owner.parentElement||owner.getRootNode?.().host) {
+    const source=owner.getAttribute?.('data-prnext-source');
+    if(source)return {source,sourceRelation:owner===element?'element':'ancestor'};
+  }
+  return {source:null,sourceRelation:null};
+}
+
+export function describeElement(element, view = globalThis) {
+  const bounds = element.getBoundingClientRect(), style = view.getComputedStyle(element);
+  const {source,sourceRelation}=sourceLocation(element);
+  const tag = element.tagName.toLowerCase(), selector = element.id ? '#' + view.CSS.escape(element.id) : tag + [...element.classList].slice(0, 3).map(name => '.' + view.CSS.escape(name)).join('');
+  let text = '';
+  if (['input', 'textarea', 'select'].includes(tag)) text = '[Form value omitted]';
+  else {
+    const walker = view.document.createTreeWalker(element, view.NodeFilter.SHOW_TEXT);
+    while (walker.nextNode() && text.length < 4000) {
+      if (!walker.currentNode.parentElement?.closest('input,textarea,select,script,style,[hidden],[aria-hidden="true"]')) text += walker.currentNode.textContent + ' ';
+    }
+    text = text.trim().replace(/\s+/g, ' ').slice(0, 4000);
+  }
+  return { kind: 'element', path: view.location.pathname, selector, tag, text, source, sourceRelation,
+    bounds: { x: Math.round(bounds.x), y: Math.round(bounds.y), width: Math.round(bounds.width), height: Math.round(bounds.height) },
+    styles: Object.fromEntries(PROPERTIES.map(property => [property, style.getPropertyValue(property)])) };
+}
+
+// User-triggered capture only. Form controls, scripts, frames and development UI
+// never enter an image; a CORS/CSP failure is reported rather than hidden.
+export async function captureElementImage(element) {
+  const { toPng } = await import('html-to-image');
+  const bounds = element.getBoundingClientRect();
+  if (!bounds.width || !bounds.height) throw Error('The element has no visible size.');
+  if (['INPUT', 'TEXTAREA', 'SELECT', 'IFRAME', 'VIDEO'].includes(element.tagName)) throw Error('Form values and embedded content are excluded from images.');
+  const scale = Math.min(1, 1400 / bounds.width, 1000 / bounds.height);
+  const result = await toPng(element, { pixelRatio: scale, skipFonts: true, cacheBust: false,
+    filter: node => !toolNode(node) && !['SCRIPT', 'IFRAME', 'INPUT', 'TEXTAREA', 'SELECT', 'VIDEO', 'AUDIO'].includes(node.tagName),
+  });
+  if (result.length > 349525) throw Error('The image exceeds the 256 KB context limit. Select a smaller element.');
+  return { mimeType: 'image/png', data: result.slice(result.indexOf(',') + 1), width: Math.round(bounds.width * scale), height: Math.round(bounds.height * scale) };
+}
+
+export function createElementPicker({ tools, onSelect, onCancel = () => {}, view = globalThis }) {
+  const document = view.document, controller = new AbortController(), options = { signal: controller.signal, capture: true };
+  const epoch=(pickerEpochs.get(tools)||0)+1;pickerEpochs.set(tools,epoch);
+  const host = document.createElement('prnext-dev-picker'), shadow = host.attachShadow({ mode: 'open' });
+  const style = document.createElement('style'); style.textContent=elementPickerStyle;
+  const node=(tag,className,text)=>{const result=document.createElement(tag);if(className)result.className=className;if(text!==undefined)result.textContent=text;return result;};
+  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>`;
+  const box = node('div','target'); box.hidden = true; box.setAttribute('aria-hidden','true');
+  for(const corner of ['tl','t','tr','r','br','b','bl','l']){const mark=node('span','corner');mark.dataset.corner=corner;box.append(mark);}
+  const tag=node('div','picker-tag');tag.hidden=true;tag.setAttribute('aria-hidden','true');
+  const tagTop=node('div','picker-tag-top'),dimensions=node('span','picker-dimensions'),source=node('span','picker-source');
+  const fileIcon=node('span','picker-file-icon'),fileName=node('span','picker-source-name'),fileLine=node('span','picker-source-line'),parentSource=node('span','picker-source-parent','Parent');
+  source.append(fileIcon,fileName,fileLine,parentSource);tagTop.append(dimensions);tag.append(tagTop,source);
+  const fileTypes={js:['javascript','JS'],jsx:['javascript','JS'],mjs:['javascript','JS'],cjs:['javascript','JS'],ts:['typescript','TS'],tsx:['typescript','TS'],mts:['typescript','TS'],cts:['typescript','TS'],html:['html','<>'],htm:['html','<>'],css:['css','#'],scss:['css','#'],json:['json','{}'],vue:['vue','V'],svelte:['svelte','S'],md:['markdown','M'],mdx:['markdown','M'],py:['python','Py'],rs:['rust','Rs']};
+  let fileIconKey;
+  function updateFileIcon(filename) {
+    const extension=filename?.split('.').at(-1)?.toLowerCase(),type=Object.hasOwn(fileTypes,extension)?fileTypes[extension]:null,key=type?.[0]||'file';
+    if(fileIconKey===key)return;fileIconKey=key;fileIcon.dataset.language=key;
+    if(type){fileIcon.textContent=type[1];fileIcon.title=key;}
+    else{fileIcon.innerHTML=icon('<path d="M14 3H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8Z"/><path d="M14 3v5h5"/>');fileIcon.title='File';}
+  }
+  const hint=node('div','hint');hint.setAttribute('role','region');hint.setAttribute('aria-label','Element picker');
+  const instruction=node('span','picker-instruction','Pick an element'),enter=node('kbd','picker-enter','↵');enter.setAttribute('aria-hidden','true');
+  const cancelButton=node('button','picker-cancel','Cancel');cancelButton.type='button';cancelButton.setAttribute('aria-label','Cancel');
+  const escape=node('kbd','','esc');escape.setAttribute('aria-hidden','true');cancelButton.append(escape);cancelButton.onclick=()=>cancel();
+  const live=node('span','sr-only');live.setAttribute('role','status');
+  hint.append(instruction,enter,cancelButton);shadow.append(style,box,tag,hint,live);document.documentElement.append(host);
+  const previous = document.activeElement; let active, frame, pending, hoverTimer, pointer, stopped = false, viewportKey, placed = false;
+  const viewport=()=>({left:view.visualViewport?.offsetLeft||0,top:view.visualViewport?.offsetTop||0,width:view.visualViewport?.width||view.innerWidth,height:view.visualViewport?.height||view.innerHeight});
+  function placeHint() {
+    const visible=viewport(),key=[visible.left,visible.top,visible.width,visible.height].join(':');
+    if(viewportKey!==key){viewportKey=key;hint.style.maxWidth=Math.max(1,visible.width-24)+'px';}
+    const height=hint.offsetHeight,width=hint.offsetWidth;let top=Math.max(visible.top+8,visible.top+visible.height-height-16),left=visible.left+(visible.width-width)/2;
+    const hud=document.querySelector('prnext-dev-tools')?.getBoundingClientRect();
+    if(hud?.width&&left<hud.right&&left+width>hud.left&&top<hud.bottom&&top+height>hud.top){
+      const candidates=[hud.right+8,hud.left-width-8],fitting=candidates.find(candidate=>candidate>=visible.left+12&&candidate+width<=visible.left+visible.width-12);
+      if(fitting!==undefined)left=fitting;else top=Math.max(visible.top+8,hud.top-height-12);
+    }
+    hint.style.left=(left+width/2)+'px';hint.style.bottom='auto';hint.style.top=top+'px';
+    return {visible,hint:{top,height}};
+  }
+  function placeTag(rect, animate) {
+    const {visible,hint:bar}=placeHint(),margin=8,gap=9;
+    tag.style.maxWidth=Math.max(1,Math.min(280,visible.width-margin*2))+'px';
+    const size=tag.getBoundingClientRect(),minX=visible.left+margin,maxX=visible.left+visible.width-size.width-margin;
+    const maxY=Math.min(visible.top+visible.height-size.height-margin,bar.top-size.height-margin),minY=visible.top+margin;
+    if(maxY<minY){tag.hidden=true;return;}
+    const above=rect.top-size.height-gap,below=rect.bottom+gap;
+    const top=above>=minY&&above<=maxY?above:below>=minY&&below<=maxY?below:Math.min(maxY,Math.max(minY,above));
+    const left=Math.min(Math.max(minX,maxX),Math.max(minX,rect.left));
+    // A wider filename must not travel outside the viewport from its old anchor.
+    // Otherwise CSS can retarget the current animation without restarting it.
+    tag.dataset.motion=String(animate&&size.left>=minX&&size.left<=maxX&&size.top>=minY&&size.top<=maxY);
+    tag.style.translate=left+'px '+top+'px';tag.dataset.side=top+size.height<=rect.top?'above':'below';
+  }
+  function highlight(element, keyboard=false, animate=true) {
+    const node=element;
+    if (!node || toolNode(node) || node === document.documentElement || node === document.body) return;
+    active = node; const rect = node.getBoundingClientRect();
+    if(!rect.width||!rect.height){box.hidden=true;tag.hidden=true;placed=false;return;}
+    const moving=animate&&placed;
+    box.dataset.motion=String(moving);box.hidden = false; Object.assign(box.style, { translate: rect.left+'px '+rect.top+'px', width: rect.width+'px', height: rect.height+'px' });
+    const location=sourceLocation(node),parsed=location.source?.match(/^(.*?):(\d+)(?::(\d+))?$/),filename=parsed?.[1].replaceAll('\\','/').split('/').at(-1);
+    dimensions.textContent=Math.round(rect.width)+' × '+Math.round(rect.height);
+    updateFileIcon(filename);fileName.textContent=filename||location.source||'<'+node.tagName.toLowerCase()+'>';
+    fileLine.textContent=parsed?':'+parsed[2]:'';fileLine.hidden=!parsed;parentSource.hidden=location.sourceRelation!=='ancestor';
+    source.title=location.source?(location.sourceRelation==='ancestor'?'Parent source: ':'')+location.source:'Source location unavailable';source.dataset.ancestor=String(location.sourceRelation==='ancestor');
+    tag.hidden=false;placeTag(rect,moving);
+    // Commit the first rectangle in place; later targets interpolate from it.
+    // The existing layout read in placeTag also commits the frame's geometry.
+    placed=true;
+    if(keyboard)live.textContent=node.tagName.toLowerCase()+', '+Math.round(rect.width)+' by '+Math.round(rect.height)+' pixels'+(filename?', '+(location.sourceRelation==='ancestor'?'parent source ':'source ')+filename+', line '+parsed[2]:'')+'. Enter selects.';
+  }
+  function clearHover(resetPointer=true) {
+    view.clearTimeout(hoverTimer);view.cancelAnimationFrame(frame);
+    hoverTimer=undefined;frame=undefined;pending=undefined;if(resetPointer)pointer=undefined;
+  }
+  function hoverReadyAt() {
+    const minimum=pending.since+pending.hold;
+    const slow=pending.slowSince===undefined?Infinity:Math.max(minimum,pending.slowSince+pending.hold);
+    return Math.min(slow,Math.max(minimum,pointer.lastMove+POINTER_REST));
+  }
+  function queueHover() {
+    view.clearTimeout(hoverTimer);hoverTimer=undefined;
+    if(stopped||!pending)return;
+    const remaining=hoverReadyAt()-view.performance.now();
+    if(frame!==undefined){if(remaining<=0)return;view.cancelAnimationFrame(frame);frame=undefined;}
+    if(remaining>0){hoverTimer=view.setTimeout(queueHover,remaining);return;}
+    frame=view.requestAnimationFrame(()=>{
+      frame=undefined;
+      // Acceleration between the timer and paint must not commit a stale hover.
+      if(stopped||!pending)return;
+      if(hoverReadyAt()>view.performance.now()){queueHover();return;}
+      const candidate=pending.node;pending=undefined;
+      if(candidate.isConnected)highlight(candidate);
+    });
+  }
+  function hover(node,event) {
+    if(!node||toolNode(node)||node===document.documentElement||node===document.body){clearHover();return;}
+    const now=view.performance.now(),x=event.clientX,y=event.clientY;
+    if(!pointer)pointer={x,y,time:now,lastMove:now,speed:0,instant:0};
+    else{
+      const distance=Math.hypot(x-pointer.x,y-pointer.y),elapsed=now-pointer.time;
+      // Compare with the last meaningful position so subpixel steps accumulate.
+      if(distance>1){
+        const instant=distance/Math.max(1,Math.min(elapsed,64));
+        pointer={x,y,time:now,lastMove:now,instant,speed:elapsed>120?instant:pointer.speed*.35+instant*.65};
+      }
+    }
+    if(node===active){
+      clearHover(false);frame=view.requestAnimationFrame(()=>{frame=undefined;if(!stopped&&node.isConnected)highlight(node);});return;
+    }
+    if(node!==pending?.node){
+      clearHover(false);const rect=node.getBoundingClientRect();
+      pending={node,since:now,hold:Math.min(rect.width,rect.height)<28||active?.contains(node)?SMALL_HOVER_HOLD:HOVER_HOLD};
+    }
+    // Hysteresis accepts deliberate slow movement, while a sudden acceleration
+    // cancels that decision. A short pause also confirms intent after a fast move.
+    if(pointer.instant>=.85||pointer.speed>=.65)pending.slowSince=undefined;
+    else if(pointer.speed<=.45&&pending.slowSince===undefined)pending.slowSince=now;
+    queueHover();
+  }
+  function stop(restore = true) { if (stopped) return; stopped = true; controller.abort(); clearHover(); host.remove(); if (restore && previous?.isConnected) previous.focus({ preventScroll: true }); }
+  function cancel(){if(stopped)return;stop();onCancel();}
+  async function select(node) {
+    if (!node || toolNode(node)) return;
+    const context = describeElement(node, view); stop(false); onSelect(context);
+    let expectedContext,knownContext=false;
+    try{const state=tools.snapshot?.();knownContext=Boolean(state&&Object.hasOwn(state,'context'));expectedContext=state?.context;}catch{}
+    const image = captureElementImage(node).then(screenshot => ({ screenshot })).catch(error => ({ screenshot: null, screenshotError: error.message }));
+    const mapped = context.source ? tools.call('dev_source', { source: context.source }).catch(error => ({ mapped: false, error: error.message })) : Promise.resolve({ mapped: false, error: 'No source location was emitted for this element.' });
+    const [capture, source] = await Promise.all([image, mapped]);
+    if(pickerEpochs.get(tools)!==epoch)return;
+    if(knownContext){try{if(tools.snapshot().context!==expectedContext)return;}catch{return;}}
+    const complete = { ...context, ...capture, mappedSource: source }; tools.setContext(complete); void tools.browser('selection', { selection: complete }); onSelect(complete);
+  }
+  document.addEventListener('pointermove', event => {
+    hover(event.composedPath().find(item => item instanceof view.Element),event);
+  }, options);
+  document.addEventListener('pointerout',event=>{if(!event.relatedTarget)clearHover();},options);
+  document.addEventListener('pointercancel',clearHover,options);view.addEventListener('blur',clearHover,options);
+  document.addEventListener('click', event => {
+    const node = event.composedPath().find(item => item instanceof view.Element); if (toolNode(node)) return;
+    event.preventDefault(); event.stopImmediatePropagation(); void select(node);
+  }, options);
+  document.addEventListener('keydown', event => {
+    if (event.key === 'Escape') { event.preventDefault(); event.stopImmediatePropagation(); cancel(); }
+    else if (event.key === 'Enter' && active && !toolNode(event.composedPath().find(item=>item instanceof view.Element))) { event.preventDefault(); event.stopImmediatePropagation(); void select(active); }
+  }, options);
+  document.addEventListener('focusin', event => {clearHover();highlight(event.composedPath().find(item=>item instanceof view.Element),true);}, options);
+  // Scrolling and resizing keep the outline attached, without a trailing frame.
+  const reposition=()=>{clearHover();placeHint();if(active)highlight(active,false,false);};
+  view.addEventListener('scroll',reposition,options);view.addEventListener('resize',reposition,options);
+  view.visualViewport?.addEventListener('scroll',reposition,options);view.visualViewport?.addEventListener('resize',reposition,options);
+  placeHint();queueMicrotask(()=>{if(!stopped)live.textContent='Pick an element. Click, or use Tab and Enter. Escape or Cancel exits.';});
+  // Leave the inert logo menu's tab sequence. The next Tab starts with the
+  // application's first control rather than cycling back through tool buttons.
+  const tabindex=document.body.getAttribute('tabindex');document.body.tabIndex=-1;document.body.focus({preventScroll:true});
+  if(tabindex===null)document.body.removeAttribute('tabindex');else document.body.setAttribute('tabindex',tabindex);
+  return { dispose: stop };
+}

package/runtime/dev-error-overlay-style.mjs

@@ -0,0 +1,41 @@
+// Development-only error dialog; application styles never enter this shadow root.
+export const devErrorOverlayStyle = `
+  :host{all:initial;position:fixed;inset:0;z-index:2147483647;background:#080808;color-scheme:dark;color:#ededed;font:13px/1.5 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-align:left;direction:ltr;-webkit-font-smoothing:antialiased}
+  *,*::before,*::after{box-sizing:border-box}[hidden]{display:none!important}
+  dialog{position:fixed;inset:0;margin:auto;width:min(960px,calc(100vw - 48px));height:fit-content;max-width:none;max-height:calc(100dvh - 48px);padding:0;border:0;border-radius:14px;background:#080808;color:#ededed;box-shadow:0 0 0 1px #242424;overflow:hidden;overscroll-behavior:contain;font:inherit;text-align:left}
+  dialog[open]{display:flex;flex-direction:column}dialog::backdrop{background:#080808}
+  .error-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 16px;padding:14px 20px;border-bottom:1px solid #202020;flex:none}
+  .error-brand{display:flex;align-items:center;gap:8px;min-width:0;color:#aaa;font-size:12px}.error-brand strong{color:#ededed;font-weight:600}.error-brand-label::before{content:'/';margin-right:8px;color:#555}.error-count{min-width:20px;padding:1px 5px;border-radius:5px;background:#1b1b1b;color:#bbb;text-align:center;font:11px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;font-variant-numeric:tabular-nums}
+  .error-header-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px;margin-left:auto;max-width:100%}.icon{display:inline-flex;flex:none}.icon svg{display:block;width:14px;height:14px;flex:none}
+  button,a{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:7px 10px;border:1px solid #303030;border-radius:8px;background:#111;color:#ddd;font:500 12px/1.5 ui-sans-serif,system-ui;white-space:nowrap;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
+  button:hover,a:hover{background:#1a1a1a;color:#fff}button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:none;background:#242424;color:#fff;box-shadow:inset 0 0 0 1px #555}
+  dialog[open]:focus,dialog[open]:focus-visible{outline:none}.error-ai:focus-visible{background:#fff;color:#080808;box-shadow:inset 0 0 0 1px #777}
+  .error-dismiss{flex:none;width:36px;padding:0;background:transparent;border-color:transparent;color:#999}.error-dismiss .icon svg{width:16px;height:16px}.error-copy{min-width:108px}.error-copy[data-status=copied]{color:#a8dabd}.error-copy[data-status=error]{color:#f39199}
+  .error-ai{background:#e5e5e5;border-color:transparent;color:#111}.error-ai:hover{background:#fff;color:#080808}
+  .error-issue-region{flex:none;min-width:0;padding:8px 12px;border-bottom:1px solid #202020}.error-list{max-height:min(216px,28dvh);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#333 #080808}
+  .error-row{display:grid;grid-template-columns:126px minmax(0,1fr) 8px;align-items:center;gap:3px 12px;width:100%;min-height:40px;padding:10px 12px;border:0;border-radius:7px;background:transparent;text-align:left;font-weight:400;white-space:normal}
+  .error-row:hover{background:#111}.error-row[aria-pressed=true]{background:#191919;color:#eee}.error-row-type{display:flex;align-items:center;gap:7px;min-width:0;color:#aaa;font-size:11px;white-space:nowrap}.error-row-dot{width:5px;height:5px;border-radius:50%;background:#eb707b;flex:none}.error-row[data-recoverable=true] .error-row-dot{background:transparent;box-shadow:inset 0 0 0 1px #eb707b}
+  .error-row-message{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#c6c6c6;font-size:12px}.error-row-file{grid-column:2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#888;font:10px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace}.error-list-note{margin:6px 12px 2px;color:#888;font-size:11px}
+  .error-row[data-kind=hydration]{grid-template-columns:minmax(0,1fr) 8px}.error-row[data-kind=hydration] .error-row-type{font-size:12px;color:#ddd}.error-row[data-kind=hydration] .error-row-file{grid-column:1}.error-row[aria-expanded=false] .error-row-file{display:none}.error-row:focus-visible{background:#242424;box-shadow:inset 0 0 0 1px #555}
+  .error-row-chevron{grid-column:-2;grid-row:1;justify-self:end;width:6px;height:6px;border-right:1px solid #888;border-bottom:1px solid #888;rotate:45deg;translate:0 -2px}.error-row[aria-expanded=true] .error-row-chevron{rotate:225deg;translate:0 1px}
+  .error-body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:20px;scrollbar-width:thin;scrollbar-color:#333 #080808}
+  .error-intro{margin-bottom:18px}.error-intro h1{margin:0;color:#f0f0f0;font-size:20px;line-height:1.3;letter-spacing:-.025em;font-weight:600;text-wrap:balance}
+  .error-title-toggle{justify-content:flex-start;gap:12px;max-width:100%;min-height:32px;padding:2px 0;border:0;border-radius:4px;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;white-space:normal;text-align:left}.error-title-toggle::after{content:'';width:7px;height:7px;flex:none;border-right:1px solid #888;border-bottom:1px solid #888;rotate:225deg;translate:0 2px}.error-title-toggle:hover{background:transparent;color:#fff}
+  .error-summary{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;max-width:70ch;margin:9px 0 0;color:#b8b8b8;font-size:13px;line-height:1.6;overflow-wrap:anywhere;text-wrap:pretty}
+  .error-editor-actions{display:flex;justify-content:flex-end;margin:-6px 0 18px}.error-editor-actions a{min-height:32px;padding:5px 8px;font-size:11px;background:transparent;color:#aaa;border-color:transparent}.error-editor-actions a:hover{color:#eee;background:#191919}
+  .source{margin:0 0 18px;min-width:0;border-radius:11px;background:#111;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff08}
+  .source-head{display:flex;align-items:center;gap:8px;min-width:0;padding:11px 16px;border-bottom:1px solid #222;color:#bbb}.source-head svg{width:14px;height:14px;flex:none;color:#888}.location{min-width:0;overflow-wrap:anywhere;font:12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace}
+  .source pre{max-height:310px;margin:0;padding:14px 16px;overflow:auto;overscroll-behavior:contain;white-space:pre;overflow-wrap:normal;tab-size:2;color:#d4d4d4;font:12px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace;scrollbar-width:thin;scrollbar-color:#3b3b3b #111}
+  .source pre:focus-visible{outline-offset:-2px}
+  .error-disclosures{border-top:1px solid #202020}.error-disclosure+.error-disclosure{border-top:1px solid #202020}
+  summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;padding:10px 2px;color:#aaa;font-size:12px;list-style:none;cursor:pointer}
+  summary::-webkit-details-marker{display:none}summary::after{content:'';width:6px;height:6px;flex:none;margin-right:4px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;rotate:45deg;translate:0 -2px}details[open]>summary::after{rotate:225deg;translate:0 1px}summary:hover{color:#eee}
+  .error-full{max-height:min(260px,35dvh);margin:0 0 14px;padding:14px 16px;border-radius:8px;background:#111;color:#bbb;overflow:auto;overscroll-behavior:contain;white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.65 ui-sans-serif,system-ui;tab-size:2;scrollbar-width:thin;scrollbar-color:#333 #111}
+  .error-stack{white-space:pre;overflow-wrap:normal;font:11px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace}
+  .error-full:focus-visible{outline-offset:-2px}.error-source-status{margin:14px 0 0;color:#888;font-size:12px;line-height:1.5;overflow-wrap:anywhere}.error-source-status:empty{display:none}
+  .sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
+  @media(max-width:600px){dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 24px);border-radius:12px}.error-header{padding:12px 16px}.error-header-actions{flex:1 1 100%;justify-content:flex-start}.error-header-actions .error-dismiss{margin-left:auto}.error-issue-region{padding:7px 8px}.error-row{grid-template-columns:minmax(0,1fr) 8px;gap:3px;padding:9px 10px}.error-row-message,.error-row-file{grid-column:1}.error-list-note{margin-inline:10px}.error-body{padding:18px 16px}.error-intro h1{font-size:18px}.source-head{padding:10px 12px}.source pre{padding:12px;max-height:260px;font-size:11px}.error-full{padding:12px}}
+  @media(pointer:coarse){button,a,summary,.error-editor-actions a,.error-row,.error-title-toggle{min-height:44px}.error-dismiss{width:44px}}
+  @media(prefers-reduced-motion:no-preference){button:not(.error-row),a,summary{transition:background-color 120ms ease-out,color 120ms ease-out}}
+  @media(forced-colors:active){:host,dialog,dialog::backdrop{background:Canvas;color:CanvasText}dialog{border:1px solid CanvasText}.error-header,.error-issue-region,.error-disclosures,.error-disclosure+.error-disclosure,.source-head{border-color:CanvasText}.error-intro h1,.error-brand,.error-brand strong,.error-count,.error-summary,.error-row-type,.error-row-message,.error-row-file,.error-list-note,summary,.error-source-status,.location{color:CanvasText}.error-count,.error-row[aria-pressed=true]{background:Canvas}.error-row[aria-pressed=true]{outline:1px solid Highlight;outline-offset:-1px}.error-row-dot,.error-row[data-recoverable=true] .error-row-dot{background:CanvasText;box-shadow:none}.source,.error-full{background:Canvas;color:CanvasText;border:1px solid CanvasText;box-shadow:none}.source pre{color:CanvasText}.error-ai,button,a{background:ButtonFace;color:ButtonText;border-color:ButtonText}button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:1px solid Highlight;outline-offset:-2px;box-shadow:none}}
+`;

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);}}
+}