execweave 0.8.15__tar.gz → 0.8.16__tar.gz

{execweave-0.8.15 → execweave-0.8.16}/.github/workflows/provider-capability-stage-integrity.yml

@@ -87,6 +87,24 @@ jobs:
               && -n "$threat_model_changed" ]]; then
             args+=(--allow-test-change "tests/test_threat_model.py=0.8.15 RC follow-up makes the existing outliving-child assertion hermetic against ambient host PID collisions; the historical test node ID and product expectation are unchanged")
           fi
+          if [[ "$HEAD_REF" == "fix/gif-dashboard-parity" ]]; then
+            while IFS= read -r path; do
+              case "$path" in
+                tests/test_dashboard_gif_export_e2e.py)
+                  args+=(--allow-test-change "$path=GIF export now records the real displayed SVG timeline instead of reconstructing animation from the final graph; the historical repeatable-download test node ID is retained and new screenshot-to-decoded-frame parity regressions are added")
+                  ;;
+                tests/test_live_logs_export.py)
+                  args+=(--allow-test-change "$path=the GIF contract now requires captureGifFrame and forbids the retired sortedGifSteps reconstruction path; historical test node IDs remain unchanged")
+                  ;;
+                tests/test_pr25_premerge_hardening_contract.py)
+                  args+=(--allow-test-change "$path=GIF export now freezes measured SVG geometry directly, so the historical hardening assertion must reject the old separate drawGifFrame renderer while retaining the same test node ID")
+                  ;;
+                tests/test_v069_dashboard_release.py)
+                  args+=(--allow-test-change "$path=the GIF encoder changed from the historical fixed-code replay implementation to the recorded-SVG encoder and is now validated through an independent GIF decoder; release/version assertions and historical test node IDs remain intact")
+                  ;;
+              esac
+            done < <(git diff --name-only "$BASELINE_REF...HEAD" -- tests)
+          fi
           if [[ "$HEAD_REF" == "fix/provider-isolation" ]]; then
             while IFS= read -r path; do
               case "$path" in

{execweave-0.8.15 → execweave-0.8.16}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.5
 Name: execweave
-Version: 0.8.15
+Version: 0.8.16
 Summary: Turn AI-agent runtime behavior into a local interactive execution graph.
 Project-URL: Homepage, https://github.com/Irish-kw/ExecWeave
 Project-URL: Repository, https://github.com/Irish-kw/ExecWeave
@@ -42,10 +42,12 @@ Requires-Python: >=3.10
 Requires-Dist: psutil>=5.9
 Requires-Dist: watchdog>=4.0
 Provides-Extra: dev
+Requires-Dist: pillow>=10.0; extra == 'dev'
 Requires-Dist: pytest>=8.0; extra == 'dev'
 Requires-Dist: pywinpty<4,>=3.0.5; (platform_system == 'Windows') and extra == 'dev'
 Requires-Dist: ruff<0.17,>=0.16; extra == 'dev'
 Provides-Extra: e2e
+Requires-Dist: pillow>=10.0; extra == 'e2e'
 Requires-Dist: playwright>=1.44; extra == 'e2e'
 Requires-Dist: pywinpty<4,>=3.0.5; (platform_system == 'Windows') and extra == 'e2e'
 Provides-Extra: release
@@ -188,6 +190,15 @@ The dashboard is designed to keep large, multi-agent runs inspectable without ch
 - **Large-run folding:** high-cardinality node types can collapse older members while keeping them inspectable.
 - **Selection-focused layout:** selecting an agent or runtime object de-emphasizes unrelated graph traffic.
 
+**Download GIF** saves the graph viewport as it appeared while this Dashboard page
+was open and visible, including labels, folding, camera changes, and elapsed time
+(sampled at up to 10 frames per second). It excludes the inspector and logs. A
+reopened finished run has no recorded screen history and exports a still image.
+Keep the viewport size fixed for a consistent frame; resizing adds padding rather
+than rescaling older frames. Recording stops with an explicit message if the page
+is hidden during a live run, rendering is paused, or the 64 MB recording limit is
+reached; it never substitutes an animation reconstructed from the final graph.
+
 You can tune large-run rendering with:
 
 ```text

{execweave-0.8.15 → execweave-0.8.16}/README.md

@@ -133,6 +133,15 @@ The dashboard is designed to keep large, multi-agent runs inspectable without ch
 - **Large-run folding:** high-cardinality node types can collapse older members while keeping them inspectable.
 - **Selection-focused layout:** selecting an agent or runtime object de-emphasizes unrelated graph traffic.
 
+**Download GIF** saves the graph viewport as it appeared while this Dashboard page
+was open and visible, including labels, folding, camera changes, and elapsed time
+(sampled at up to 10 frames per second). It excludes the inspector and logs. A
+reopened finished run has no recorded screen history and exports a still image.
+Keep the viewport size fixed for a consistent frame; resizing adds padding rather
+than rescaling older frames. Recording stops with an explicit message if the page
+is hidden during a live run, rendering is paused, or the 64 MB recording limit is
+reached; it never substitutes an animation reconstructed from the final graph.
+
 You can tune large-run rendering with:
 
 ```text

{execweave-0.8.15 → execweave-0.8.16}/pyproject.toml

@@ -4,8 +4,8 @@ build-backend = "hatchling.build"
 
 [project]
 name = "execweave"
-# ExecWeave v0.8.15 release metadata
-version = "0.8.15"
+# ExecWeave v0.8.16 release metadata
+version = "0.8.16"
 description = "Turn AI-agent runtime behavior into a local interactive execution graph."
 readme = "README.md"
 requires-python = ">=3.10"
@@ -44,6 +44,7 @@ dependencies = [
 [project.optional-dependencies]
 dev = [
   "pytest>=8.0",
+  "pillow>=10.0",
   "ruff>=0.16,<0.17",
   "pywinpty>=3.0.5,<4; platform_system == 'Windows'",
 ]
@@ -55,6 +56,7 @@ release = [
 # development install stays small; CI installs it and requires the checks to run.
 e2e = [
   "playwright>=1.44",
+  "pillow>=10.0",
   "pywinpty>=3.0.5,<4; platform_system == 'Windows'",
 ]
 

{execweave-0.8.15 → execweave-0.8.16}/src/execweave/__init__.py

@@ -1,3 +1,3 @@
 """ExecWeave runtime graph package."""
 
-__version__ = "0.8.15"
+__version__ = "0.8.16"

{execweave-0.8.15 → execweave-0.8.16}/src/execweave/live_view.py

@@ -1,7 +1,5 @@
 from __future__ import annotations
 
-import re
-
 from .live_view_extra_style import LIVE_EXTRA_STYLE
 from .live_view_markup import LIVE_MARKUP
 from .live_view_process_layout import LIVE_PROCESS_LAYOUT_SCRIPT
@@ -15,21 +13,6 @@ from .viewer_agent_panel import inject_agent_panel
 from .viewer_dashboard_hardening_v2 import harden_dashboard_html
 
 
-_SAFE_GIF_LZW = (
-    "function lzw(indices,minCodeSize=8){"
-    "const clear=1<<minCodeSize,end=clear+1,out=[];"
-    "let buffer=0,bits=0;const codeSize=minCodeSize+1;"
-    "const chunk=Math.max(1,(1<<codeSize)-clear-8);"
-    "const emit=code=>{buffer|=code<<bits;bits+=codeSize;"
-    "while(bits>=8){out.push(buffer&255);buffer>>>=8;bits-=8}};"
-    "if(!indices.length)emit(clear);"
-    "for(let start=0;start<indices.length;start+=chunk){"
-    "emit(clear);const stop=Math.min(indices.length,start+chunk);"
-    "for(let i=start;i<stop;i++)emit(indices[i])}"
-    "emit(end);if(bits>0)out.push(buffer&255);return out}"
-)
-
-
 def _restore_live_safety_contracts(html: str) -> str:
     """Preserve live-view safety contracts while retiring legacy final-page swapping."""
     html = html.replace(
@@ -62,16 +45,6 @@ def _restore_live_safety_contracts(html: str) -> str:
         1,
     )
 
-    html, lzw_count = re.subn(
-        r"function lzw\(indices,minCodeSize=8\)\{.*?\}\nfunction gifBlocks",
-        _SAFE_GIF_LZW + "\nfunction gifBlocks",
-        html,
-        count=1,
-        flags=re.DOTALL,
-    )
-    if lzw_count != 1:
-        raise RuntimeError("live GIF encoder patch target not found")
-
     open_final_button = '<button id="open-final" type="button">Open final graph</button>'
     if open_final_button not in html:
         raise RuntimeError("legacy final action patch target not found")

execweave-0.8.16/src/execweave/live_view_script_d.py

@@ -0,0 +1,40 @@
+from __future__ import annotations
+
+from .viewer_gif import GIF_SCRIPT
+
+LIVE_SCRIPT_D = r"""
+(()=>{
+const core=window.__execweaveCore;
+if(!core)return;
+const structuredList=document.getElementById('activity-list'),rawLog=document.getElementById('raw-log'),rawRows=document.getElementById('raw-rows'),activityCount=document.getElementById('activity-count'),filterGroup=document.querySelector('.filter-group'),finishedActions=document.getElementById('finished-actions'),replayButton=document.getElementById('replay-run'),gifButton=document.getElementById('download-gif'),openFinalButton=document.getElementById('open-final'),details=document.getElementById('details'),detailsEmpty=document.getElementById('details-empty');
+const MAX_RAW=640;
+let rawEntries=[],logMode='structured',finishedShown=false,finalHtmlCache=null,replaying=false;
+function rawId(entry){return`raw-${entry.stream||'events'}-${entry.line??'x'}-${entry.event?.event_id||entry.event?.sequence||''}`}
+function rawTime(event){const value=event?.timestamp;if(!value)return'—';const d=new Date(value);if(Number.isNaN(d.getTime()))return String(value);return d.toLocaleTimeString([],{hour:'2-digit',minute:'2-digit',second:'2-digit',fractionalSecondDigits:3})}
+function rawEventType(event){return String(event?.event_type||event?.type||'event')}
+function rawRelation(event){return String(event?.relation||'—')}
+function rawSummary(event){try{return JSON.stringify(event)}catch(_){return String(event)}}
+function setRawEntries(items){rawEntries=(items||[]).slice(-MAX_RAW);renderRaw(false)}
+function addRawEntries(items){if(!items?.length)return;rawEntries.push(...items);if(rawEntries.length>MAX_RAW)rawEntries=rawEntries.slice(-MAX_RAW);renderRaw(logMode==='raw')}
+function findGraphEdge(event){const source=event?.source?.id,target=event?.target?.id,relation=event?.relation;if(!source||!target||!relation)return null;const visible=[...document.querySelectorAll('.edge')].find(el=>el.dataset.source===source&&el.dataset.target===target&&el.dataset.relation===String(relation).toLowerCase());return visible?.dataset.edgeId||null}
+function showRaw(entry){const event=entry.event||{};detailsEmpty.hidden=true;details.innerHTML='';const title=document.createElement('div');title.className='current-title';title.textContent=rawEventType(event);const sub=document.createElement('div');sub.className='current-sub';sub.textContent=`${entry.stream||'events.jsonl'} line ${entry.line??'—'} · ${rawRelation(event)}`;const pre=document.createElement('pre');pre.textContent=JSON.stringify(event,null,2);const raw=document.createElement('details');raw.className='raw-toggle';raw.open=true;const summary=document.createElement('summary');summary.textContent='Raw event JSON';raw.append(summary,pre);details.append(title,sub,raw);const nodeMap=new Map();for(const node of(core.getGraph()?.nodes||[])){if(node?.id)nodeMap.set(node.id,node);for(const key of['viewer_member_ids','viewer_agent_member_ids'])for(const member of(node?.attributes?.[key]||[]))nodeMap.set(String(member),node)}const targets=document.createElement('div');targets.className='raw-target-actions';for(const entity of [event.source,event.target]){if(!entity?.id||!nodeMap.has(entity.id))continue;const node=nodeMap.get(entity.id);const button=document.createElement('button');button.type='button';button.textContent=`Inspect ${node.type||'node'}${node.name?` · ${node.name}`:''}`;button.addEventListener('click',()=>core.selectNode(node.id,{syncLog:false}));targets.appendChild(button)}if(targets.childElementCount)details.appendChild(targets)}
+function selectRaw(entry,row){document.querySelectorAll('.raw-row.selected').forEach(el=>el.classList.remove('selected'));row.classList.add('selected');const edge=findGraphEdge(entry.event);if(edge)core.selectEdge(edge,{syncLog:false});showRaw(entry)}
+function renderRaw(scrollLatest=false){rawRows.replaceChildren();activityCount.textContent=logMode==='raw'?`${rawEntries.length} raw event${rawEntries.length===1?'':'s'}`:`${core.getActivities().length} transition${core.getActivities().length===1?'':'s'}`;if(!rawEntries.length){const empty=document.createElement('div');empty.className='empty-activity';empty.textContent='Waiting for runtime or semantic activity…';rawRows.appendChild(empty);return}for(const entry of rawEntries){const row=document.createElement('div');row.className='raw-row';row.dataset.rawId=rawId(entry);const line=document.createElement('span');line.className='raw-line';line.textContent=String(entry.line??'—');const time=document.createElement('span');time.className='raw-time';time.textContent=rawTime(entry.event);const event=document.createElement('span');event.className='raw-event';event.textContent=rawEventType(entry.event);const relation=document.createElement('span');relation.className='raw-relation';relation.textContent=rawRelation(entry.event);const json=document.createElement('span');json.className='raw-json';json.textContent=rawSummary(entry.event);json.title=json.textContent;row.append(line,time,event,relation,json);row.onclick=()=>selectRaw(entry,row);rawRows.appendChild(row)}if(scrollLatest)rawRows.lastElementChild?.scrollIntoView({block:'nearest'})}
+function setLogMode(mode){logMode=mode==='raw'?'raw':'structured';document.querySelectorAll('[data-log-mode]').forEach(button=>button.classList.toggle('active',button.dataset.logMode===logMode));structuredList.hidden=logMode==='raw';rawLog.hidden=logMode!=='raw';filterGroup.hidden=logMode==='raw';if(logMode==='raw')renderRaw(false);else activityCount.textContent=`${core.getActivities().length} transition${core.getActivities().length===1?'':'s'}`}
+document.querySelectorAll('[data-log-mode]').forEach(button=>button.onclick=()=>setLogMode(button.dataset.logMode));
+function onPayload(data){observeGifPayload(data);if(data.kind==='snapshot')setRawEntries(data.raw_events||[]);else if(data.kind==='delta'){const added=[];for(const update of data.updates||[])added.push(...(update.raw_events_added||[]));addRawEntries(added)}}
+function timelineItems(){const activities=core.getActivities().filter(item=>item.edgeId||item.nodeId);return activities.length?activities:[]}
+function revealNode(id){if(!id)return;document.querySelector(`.node[data-id="${CSS.escape(id)}"]`)?.classList.remove('replay-hidden')}
+function revealEdge(id){if(!id)return;const edge=document.querySelector(`.edge[data-edge-id="${CSS.escape(id)}"]`);edge?.classList.remove('replay-hidden');document.querySelector(`.label[data-edge-id="${CSS.escape(id)}"]`)?.classList.remove('replay-hidden');if(edge){revealNode(edge.dataset.source);revealNode(edge.dataset.target)}}
+function restoreReplayDom(){document.querySelectorAll('.replay-hidden,.replay-active').forEach(el=>el.classList.remove('replay-hidden','replay-active'))}
+const sleep=ms=>new Promise(resolve=>setTimeout(resolve,ms));
+async function replayRun(){if(replaying)return;const timeline=timelineItems();if(!timeline.length)return;replaying=true;replayButton.disabled=true;restoreReplayDom();document.querySelectorAll('.node,.edge,.label').forEach(el=>el.classList.add('replay-hidden'));core.setCameraMode('fit');const delay=Math.max(55,Math.min(180,7000/Math.max(1,timeline.length)));for(const item of timeline){document.querySelectorAll('.replay-active').forEach(el=>el.classList.remove('replay-active'));if(item.edgeId){revealEdge(item.edgeId);document.querySelector(`.edge[data-edge-id="${CSS.escape(item.edgeId)}"]`)?.classList.add('replay-active')}if(item.nodeId){revealNode(item.nodeId);document.querySelector(`.node[data-id="${CSS.escape(item.nodeId)}"]`)?.classList.add('replay-active')}core.markLatest(item.nodeId||null,item.edgeId||null);await sleep(delay)}await sleep(380);restoreReplayDom();const last=timeline[timeline.length-1];core.markLatest(last.nodeId||null,last.edgeId||null);replaying=false;replayButton.disabled=false}
+""" + GIF_SCRIPT + r"""
+async function prepareFinalView(){try{const response=await fetch('/final',{cache:'no-store'});if(!response.ok)throw new Error(String(response.status));finalHtmlCache=await response.text()}catch(_){finalHtmlCache=null}}
+function openFinal(){if(!finalHtmlCache)return;document.open();document.write(finalHtmlCache);document.close()}
+function onFinished(){if(finishedShown)return;finishedShown=true;finishedActions.hidden=false;prepareFinalView()}
+replayButton.onclick=replayRun;gifButton.onclick=downloadGif;openFinalButton.onclick=openFinal;
+window.__execweaveDashboard={onPayload,onFinished};
+if(window.__execweaveStaticMode)onFinished();
+})();
+"""

{execweave-0.8.15 → execweave-0.8.16}/src/execweave/viewer_dashboard_clean.py

@@ -397,9 +397,4 @@ def inject_live_dashboard_clean(html: str) -> str:
         html = html[:render_index] + html[render_index:].replace(render_marker, render_replacement, 1)
     html = html.replace(_LIVE_CORE_EXPORT, _LIVE_CORE_EXPORT_CLEAN, 1)
     html = html.replace(_LIVE_NOOP_STATS, _LIVE_NOOP_STATS_CLEAN, 1)
-    html = html.replace(
-        "const graph=core.getGraph(),positions=core.getPositions(),steps=sortedGifSteps(graph);",
-        "const graph=core.getDisplayGraph?.()||core.getGraph(),positions=core.getPositions(),steps=sortedGifSteps(graph);",
-        1,
-    )
     return html

{execweave-0.8.15 → execweave-0.8.16}/src/execweave/viewer_dashboard_hardening_v2.py

@@ -58,26 +58,5 @@ def harden_dashboard_html(html: str) -> str:
         label="delta geometry rerender",
     )
 
-    # PM-008 (discovered while tightening PM-002): GIF replay used the old fixed 160x50
-    # node rectangle even after the dashboard became adaptive. Export is a projection of
-    # the same graph, so its bounds, edge anchors and drawn rectangles must use the same
-    # per-node geometry as Live/Finished/viewer rather than silently reverting to v0.8.2.
-    html = _replace_once(
-        html,
-        "minX=Math.min(minX,p.x);maxX=Math.max(maxX,p.x+160);minY=Math.min(minY,p.y);maxY=Math.max(maxY,p.y+50)",
-        "minX=Math.min(minX,p.x);maxX=Math.max(maxX,p.x+execweaveCameraWidth(node.id));minY=Math.min(minY,p.y);maxY=Math.max(maxY,p.y+execweaveCameraHeight(node.id))",
-        label="gif adaptive bounds",
-    )
-    html = _replace_once(
-        html,
-        "const point=(id,right=false)=>{const p=positions.get(id)||{x:0,y:0};return{x:ox+(p.x+(right?160:0))*scale,y:oy+(p.y+25)*scale}};",
-        "const point=(id,right=false)=>{const p=positions.get(id)||{x:0,y:0},w=execweaveCameraWidth(id),h=execweaveCameraHeight(id);return{x:ox+(p.x+(right?w:0))*scale,y:oy+(p.y+h/2)*scale}};",
-        label="gif adaptive anchors",
-    )
-    html = _replace_once(
-        html,
-        "const x=ox+p.x*scale,y=oy+p.y*scale,w=160*scale,h=50*scale;",
-        "const x=ox+p.x*scale,y=oy+p.y*scale,w=execweaveCameraWidth(node.id)*scale,h=execweaveCameraHeight(node.id)*scale;",
-        label="gif adaptive rectangles",
-    )
+    # GIF captures measured SVG geometry directly; it has no separate layout.
     return html

execweave-0.8.16/src/execweave/viewer_gif.py

@@ -0,0 +1,232 @@
+"""Record the displayed SVG, rather than inventing history from the final graph."""
+
+GIF_SCRIPT = r"""
+const gifSvg=document.getElementById('svg');
+const gifNotice=document.createElement('span');
+gifNotice.id='gif-notice';gifNotice.setAttribute('role','status');
+gifNotice.style.cssText='font-size:11px;color:var(--muted);max-width:230px';
+finishedActions.appendChild(gifNotice);
+const gifScope='Graph viewport only, at screen resolution. Records this page while it is visible; reopening a finished run exports a still image.';
+gifButton.title=gifScope;
+gifButton.setAttribute('aria-description',gifScope);
+// Keep actual display states, including folding, labels, edge routing and camera.
+// Never discard old states silently to meet a frame or memory cap.
+const GIF_INTERVAL=100,GIF_MAX_BYTES=64*1024*1024;
+const gifHistory=[];
+let gifSnapshotOnly=!!window.__execweaveStaticMode;
+let gifBytes=0,gifSession=null,gifFailure='',gifExporting=false,gifLastSample=0,gifLastSvg='',gifEpoch=0;
+let gifDirty=true;
+const gifObserver=new MutationObserver(()=>{gifDirty=true;});
+gifObserver.observe(gifSvg,{subtree:true,childList:true,attributes:true,characterData:true});
+gifObserver.observe(document.documentElement,{attributes:true,attributeFilter:['data-theme']});
+const gifResizeObserver=new ResizeObserver(()=>{gifDirty=true;});
+gifResizeObserver.observe(gifSvg);
+const gifProperties=[
+  'color','fill','fill-opacity','fill-rule','stroke','stroke-width','stroke-opacity',
+  'stroke-dasharray','stroke-dashoffset','stroke-linecap','stroke-linejoin',
+  'stroke-miterlimit','paint-order','opacity','display','visibility','filter',
+  'font-family','font-size','font-weight','font-style','font-stretch','letter-spacing',
+  'word-spacing','text-anchor','dominant-baseline','text-transform','text-rendering',
+  'white-space','transform','transform-origin','transform-box','vector-effect',
+  'marker-start','marker-mid','marker-end','clip-path','rx','ry'
+];
+function gifError(message){
+  gifFailure=message;gifNotice.textContent=message;gifButton.disabled=true;
+}
+function observeGifPayload(data){
+  if(!gifHistory.length&&data.live_finished)gifSnapshotOnly=true;
+  if(!data.live_finished&&core.getGraph()?.session_id!==gifSession)gifSnapshotOnly=false;
+}
+function gifSnapshot(){
+  const box=gifSvg.getBoundingClientRect();
+  const width=Math.round(box.width),height=Math.round(box.height);
+  if(!width||!height)return null;
+  const clone=gifSvg.cloneNode(true);
+  const originals=[gifSvg,...gifSvg.querySelectorAll('*')];
+  const copies=[clone,...clone.querySelectorAll('*')];
+  const styles=new Map();
+  for(let i=0;i<originals.length;i++){
+    const computed=getComputedStyle(originals[i]),copy=copies[i];
+    // Routing metadata contains NUL-delimited bundle keys, legal in HTML DOM
+    // attributes but not XML. It has no visual role once styles are frozen.
+    for(const attribute of [...copy.attributes]){
+      if(attribute.name.startsWith('data-')||attribute.name.startsWith('aria-'))copy.removeAttribute(attribute.name);
+    }
+    copy.removeAttribute('style');
+    for(const property of gifProperties){
+      const value=computed.getPropertyValue(property).replace(/url\(["']?[^)"']*#([^)'" ]+)["']?\)/g,'url(#$1)');
+      if(value)copy.style.setProperty(property,value);
+    }
+    // Freeze the sampled appearance; animations must not restart when decoded.
+    copy.style.setProperty('animation','none');copy.style.setProperty('transition','none');
+    const css=copy.style.cssText;
+    if(!styles.has(css))styles.set(css,`execweave-gif-style-${styles.size}`);
+    copy.removeAttribute('style');copy.classList.add(styles.get(css));
+  }
+  clone.setAttribute('xmlns','http://www.w3.org/2000/svg');
+  clone.setAttribute('width',width);clone.setAttribute('height',height);
+  clone.setAttribute('viewBox',`0 0 ${width} ${height}`);
+  const ns='http://www.w3.org/2000/svg';
+  const stylesheet=document.createElementNS(ns,'style');
+  stylesheet.textContent=[...styles].map(([css,name])=>`.${name}{${css}}`).join('\n');
+  clone.insertBefore(stylesheet,clone.firstChild);
+  const background=document.createElementNS(ns,'rect');
+  background.setAttribute('width',width);background.setAttribute('height',height);
+  background.setAttribute('fill',getComputedStyle(document.getElementById('graph-panel')).backgroundColor);
+  clone.insertBefore(background,clone.firstChild);
+  // The graph's dotted paper is CSS on #wrap, outside the SVG itself.
+  const defs=document.createElementNS(ns,'defs'),pattern=document.createElementNS(ns,'pattern');
+  pattern.id='execweave-gif-paper';pattern.setAttribute('width','22');pattern.setAttribute('height','22');pattern.setAttribute('patternUnits','userSpaceOnUse');
+  const dot=document.createElementNS(ns,'circle');dot.setAttribute('cx','1');dot.setAttribute('cy','1');dot.setAttribute('r','1');
+  dot.setAttribute('fill',`color-mix(in srgb,${getComputedStyle(gifSvg).getPropertyValue('--border')} 52%,transparent)`);
+  pattern.appendChild(dot);defs.appendChild(pattern);clone.insertBefore(defs,background);
+  const paper=background.cloneNode();paper.setAttribute('fill','url(#execweave-gif-paper)');background.after(paper);
+  return{svg:new XMLSerializer().serializeToString(clone),width,height,time:performance.now()};
+}
+function captureGifFrame(force=false){
+  if(gifExporting||replaying)return;
+  const graph=core.getGraph(),session=graph?.session_id;
+  if(!session)return;
+  if(session!==gifSession){gifHistory.length=0;gifBytes=0;gifSession=session;gifFailure='';gifLastSvg='';gifEpoch++;gifNotice.textContent='';gifButton.disabled=false;}
+  if(gifFailure||!gifSvg.querySelector('.node'))return;
+  if(document.hidden){gifError('GIF unavailable: this page was hidden during recording.');return;}
+  const protective=document.getElementById('protective');
+  if(protective&&!protective.hidden){gifError('GIF unavailable: graph rendering was paused.');return;}
+  const now=performance.now();
+  if(!force&&now-gifLastSample<GIF_INTERVAL)return;
+  if(!force&&!gifDirty&&!gifSvg.getAnimations({subtree:true}).some(a=>a.playState==='running'))return;
+  gifLastSample=now;
+  try{
+    const frame=gifSnapshot();if(!frame)return;
+    gifDirty=false;
+    if(gifHistory.length&&frame.svg===gifLastSvg)return;
+    gifLastSvg=frame.svg;
+    const raw=new Blob([frame.svg],{type:'image/svg+xml;charset=utf-8'}),bytes=raw.size;
+    if(gifBytes+bytes>GIF_MAX_BYTES){gifError('GIF unavailable: recording exceeded 64 MB.');return;}
+    delete frame.svg;
+    const epoch=gifEpoch;
+    // Compress immutable snapshots, never drop historical frames. Account for
+    // in-flight uncompressed bytes too, so a slow compressor cannot grow a queue.
+    frame.data=(async()=>{
+      if(typeof CompressionStream==='undefined')return raw;
+      try{
+        const compressed=await new Response(raw.stream().pipeThrough(new CompressionStream('gzip'))).blob();
+        frame.compressed=true;if(epoch===gifEpoch)gifBytes+=compressed.size-bytes;
+        return compressed;
+      }catch(_){return raw;}
+    })();
+    gifHistory.push(frame);gifBytes+=bytes;
+  }catch(error){gifError(`GIF unavailable: ${error.message}`);}
+}
+// Sample painted frames, not network events: camera motion and user layout changes
+// also matter. Stop sampling when the page closes; background gaps are explicit.
+let gifAnimationFrame=0;
+function sampleGif(){if(!gifSnapshotOnly)captureGifFrame();gifAnimationFrame=requestAnimationFrame(sampleGif);}
+gifAnimationFrame=requestAnimationFrame(sampleGif);
+window.addEventListener('pagehide',()=>{cancelAnimationFrame(gifAnimationFrame);gifObserver.disconnect();gifResizeObserver.disconnect();});
+document.addEventListener('visibilitychange',()=>{
+  if(document.hidden&&gifHistory.length&&!finishedShown)gifError('GIF unavailable: this page was hidden during recording.');
+});
+
+function pushWord(out,value){out.push(value&255,(value>>8)&255);}
+function pushText(out,text){for(let i=0;i<text.length;i++)out.push(text.charCodeAt(i)&255);}
+function gifBlocks(data){
+  const out=new Uint8Array(data.length+Math.ceil(data.length/255)+1);
+  let source=0,target=0;
+  while(source<data.length){const size=Math.min(255,data.length-source);out[target++]=size;out.set(data.subarray(source,source+size),target);source+=size;target+=size;}
+  return out;
+}
+function lzw(indices){
+  const clear=256,end=257,out=[],dictionary=new Map();
+  let next=258,size=9,buffer=0,bits=0;
+  const emit=code=>{buffer|=code<<bits;bits+=size;while(bits>=8){out.push(buffer&255);buffer>>>=8;bits-=8;}};
+  emit(clear);
+  if(indices.length){
+    let prefix=indices[0];
+    for(let i=1;i<indices.length;i++){
+      const symbol=indices[i],key=prefix*256+symbol,hit=dictionary.get(key);
+      if(hit!==undefined){prefix=hit;continue;}
+      emit(prefix);
+      if(next<4096){
+        dictionary.set(key,next++);
+        // The decoder adds each entry one emitted code later than the encoder.
+        if(next>(1<<size)&&size<12)size++;
+      }else{emit(clear);dictionary.clear();next=258;size=9;}
+      prefix=symbol;
+    }
+    emit(prefix);
+    if(next===(1<<size)&&size<12)size++;
+  }
+  emit(end);if(bits)out.push(buffer&255);return Uint8Array.from(out);
+}
+function gifPixels(imageData){
+  // A local palette preserves dark backgrounds and small colored/text details;
+  // the old six-level cube quantized most of the dashboard to black.
+  const data=imageData.data,counts=new Uint32Array(32768),rs=new Float64Array(32768),gs=new Float64Array(32768),bs=new Float64Array(32768);
+  for(let i=0;i<data.length;i+=4){const key=(data[i]>>3)*1024+(data[i+1]>>3)*32+(data[i+2]>>3);counts[key]++;rs[key]+=data[i];gs[key]+=data[i+1];bs[key]+=data[i+2];}
+  const colors=[];for(let key=0;key<counts.length;key++)if(counts[key])colors.push(key);
+  colors.sort((a,b)=>counts[b]-counts[a]||a-b);
+  const palette=new Uint8Array(768),lookup=new Int16Array(32768);lookup.fill(-1);
+  const chosen=colors.slice(0,256);
+  for(let i=0;i<chosen.length;i++){const k=chosen[i];palette[i*3]=Math.round(rs[k]/counts[k]);palette[i*3+1]=Math.round(gs[k]/counts[k]);palette[i*3+2]=Math.round(bs[k]/counts[k]);lookup[k]=i;}
+  for(const k of colors){
+    if(lookup[k]>=0)continue;
+    const r=rs[k]/counts[k],g=gs[k]/counts[k],b=bs[k]/counts[k];let best=Infinity,index=0;
+    for(let j=0;j<chosen.length;j++){const distance=(r-palette[j*3])**2+(g-palette[j*3+1])**2+(b-palette[j*3+2])**2;if(distance<best){best=distance;index=j;}}
+    lookup[k]=index;
+  }
+  const pixels=new Uint8Array(imageData.width*imageData.height);
+  for(let i=0,j=0;i<data.length;i+=4,j++)pixels[j]=lookup[(data[i]>>3)*1024+(data[i+1]>>3)*32+(data[i+2]>>3)];
+  return{palette,pixels};
+}
+async function rasterGifFrame(frame,width,height){
+  let data=await frame.data;
+  if(frame.compressed)data=await new Response(data.stream().pipeThrough(new DecompressionStream('gzip'))).blob();
+  const url=URL.createObjectURL(new Blob([data],{type:'image/svg+xml;charset=utf-8'}));
+  try{
+    const image=new Image();image.src=url;await image.decode();
+    const canvas=document.createElement('canvas');canvas.width=width;canvas.height=height;
+    const ctx=canvas.getContext('2d',{willReadFrequently:true});
+    ctx.fillStyle='#0a0f16';ctx.fillRect(0,0,width,height);
+    // Resizes are letterboxed at original pixel size, never re-laid out or scaled.
+    ctx.drawImage(image,0,0,frame.width,frame.height);
+    return gifPixels(ctx.getImageData(0,0,width,height));
+  }finally{URL.revokeObjectURL(url);}
+}
+async function downloadGif(){
+  if(gifButton.disabled||gifExporting)return;
+  if(replaying){gifNotice.textContent='Wait for replay to finish before exporting.';return;}
+  if(gifSnapshotOnly){gifHistory.length=0;gifBytes=0;gifLastSvg='';gifEpoch++;}
+  captureGifFrame(true);if(gifFailure)return;
+  if(!gifHistory.length){gifNotice.textContent='No visible graph recorded yet.';return;}
+  const frames=gifHistory.slice(),session=gifSession;
+  const stop=performance.now();
+  const width=Math.max(...frames.map(f=>f.width)),height=Math.max(...frames.map(f=>f.height));
+  if(width>65535||height>65535){gifError('GIF unavailable: viewport is too large.');return;}
+  gifExporting=true;gifButton.disabled=true;replayButton.disabled=true;
+  const original=gifButton.textContent;
+  try{
+    const header=[];pushText(header,'GIF89a');pushWord(header,width);pushWord(header,height);header.push(0x70,0,0);
+    header.push(0x21,0xFF,0x0B);pushText(header,'NETSCAPE2.0');header.push(3,1,0,0,0);
+    const parts=[Uint8Array.from(header)];let previousEnd=0;
+    for(let i=0;i<frames.length;i++){
+      gifButton.textContent=`Encoding ${i+1}/${frames.length}`;await sleep(0);
+      const raster=await rasterGifFrame(frames[i],width,height);
+      const end=Math.round(((frames[i+1]?.time??stop)-frames[0].time)/10);
+      let delay=Math.max(2,end-previousEnd);previousEnd+=delay;
+      // GIF's delay field is 16-bit centiseconds; preserve long idle intervals.
+      do{
+        const chunk=Math.min(65535,delay),block=[0x21,0xF9,4,4];pushWord(block,chunk);block.push(0,0,0x2C);
+        pushWord(block,0);pushWord(block,0);pushWord(block,width);pushWord(block,height);block.push(0x87);
+        parts.push(Uint8Array.from(block),raster.palette,Uint8Array.of(8),gifBlocks(lzw(raster.pixels)));delay-=chunk;
+      }while(delay>0);
+    }
+    parts.push(Uint8Array.of(0x3B));
+    const blob=new Blob(parts,{type:'image/gif'}),url=URL.createObjectURL(blob),a=document.createElement('a');
+    a.href=url;a.download=`execweave-${session}.gif`;document.body.appendChild(a);a.click();a.remove();
+    setTimeout(()=>URL.revokeObjectURL(url),1000);
+    gifNotice.textContent=frames.length===1?'Saved current graph (still image).':'Saved recorded graph viewport.';
+  }catch(error){gifNotice.textContent=`GIF export failed: ${error.message}`;}
+  finally{gifExporting=false;gifButton.disabled=!!gifFailure;replayButton.disabled=false;gifButton.textContent=original;}
+}
+"""