diff --git a/GRAPHLINK_REPO_NAVIGATION.md b/GRAPHLINK_REPO_NAVIGATION.md
index 03ddcb38..1b245659 100644
--- a/GRAPHLINK_REPO_NAVIGATION.md
+++ b/GRAPHLINK_REPO_NAVIGATION.md
@@ -19,7 +19,7 @@ Last refreshed: 2026-07-27 (post R7.6b Qt-removal cutover)
   - 18 loose top-level `.py` modules at the repo root (see list below) - unchanged content, just living at the repo root now instead of inside `graphlink_app/`.
   - `tests/` - not a package (no `__init__.py`). Currently one file, `test_no_qt_anywhere.py`, the permanent Qt-removal gate.
   - `doc/` - **gitignored** (`.gitignore` has `/doc/`), local-only planning scratch. It is never pushed to the remote and is not part of what a clone or contributor sees. Treat it as a historical record of past planning, not shipped documentation - do not "fix" its content as if it were user-facing.
-- 18 loose top-level `.py` modules (unchanged content, relocated over R7.2 and earlier increments): `api_provider.py`, `graphlink_artifact_agent.py`, `graphlink_audio.py`, `graphlink_chart_agent.py`, `graphlink_chart_data.py`, `graphlink_chart_rendering.py`, `graphlink_chat_agent.py`, `graphlink_desktop.py`, `graphlink_grid_view_settings.py`, `graphlink_memory.py`, `graphlink_model_catalog.py`, `graphlink_navigation_pins.py`, `graphlink_prompts.py`, `graphlink_secrets.py`, `graphlink_settings_store.py`, `graphlink_task_config.py`, `graphlink_token_estimator.py`, `graphlink_version.py`.
+- 18 loose top-level `.py` modules (unchanged content, relocated over R7.2 and earlier increments): `api_provider.py`, `graphlink_artifact_agent.py`, `graphlink_audio.py`, `graphlink_chart_data.py`, `graphlink_chart_rendering.py`, `graphlink_chat_agent.py`, `graphlink_desktop.py`, `graphlink_grid_view_settings.py`, `graphlink_memory.py`, `graphlink_model_catalog.py`, `graphlink_navigation_pins.py`, `graphlink_prompts.py`, `graphlink_secrets.py`, `graphlink_settings_store.py`, `graphlink_task_config.py`, `graphlink_token_estimator.py`, `graphlink_version.py`.
 - Real entry point: `graphlink_desktop.py` (repo root). `pyproject.toml`'s `[project.gui-scripts]` reads `graphlink = "graphlink_desktop:main"`.
 - Runtime modes exposed in Settings: `Ollama (Local)`, `Llama.cpp (Local)`, `API Endpoint` (OpenAI-Compatible / Anthropic Claude / Google Gemini). The AppBar's own provider-mode `<select>` is still hardcoded-disabled to one option (`Ollama (Local)`) with `title="Switching provider modes isn't available yet"` - see the Architecture Truths section.
 - Runtime persistence outside the repo:
@@ -321,7 +321,7 @@ This is the practical lookup map for where code actually lives today.
 - `graphlink_task_config.py` - task keys, mode labels, `API_PROVIDER_*` constants.
 - `graphlink_desktop.py` - the real entry point (see Runtime Ownership Map).
 - `graphlink_memory.py` - branch/history helpers used by `backend/canvas.py::send_message`.
-- `graphlink_chart_agent.py`, `graphlink_chart_data.py`, `graphlink_chart_rendering.py` - the chart-node pipeline (spec extraction/repair, rendering to PNG).
+- `graphlink_chart_data.py` - canonical chart-data validation/schemas + the shared respond_json prompt (ADR-013 stage 13.3); `graphlink_chart_rendering.py` - chart rendering to PNG.
 - `graphlink_artifact_agent.py`, `graphlink_chat_agent.py` - LLM-facing agent logic `backend/agents.py`/`backend/canvas.py` call into.
 - `graphlink_wire_schema.py` - dataclass -> JSON Schema generation + payload validation (ADR-003 stage 3.2). Shared by `contracts/codegen.py` (dev-time TS generation) and `backend/events.py` (runtime intent-arg validation) - lives at the repo root, not inside `contracts/`, specifically so the runtime backend can import it (`contracts/` is excluded from the shipped wheel).
 
diff --git a/api_provider.py b/api_provider.py
index b0ec04ec..da7a3b3c 100644
--- a/api_provider.py
+++ b/api_provider.py
@@ -3027,6 +3027,13 @@ def _chat_dispatch(task: str, messages: list, **kwargs) -> dict:
     # ADR-018 stage 18.4: popped the same way - only used by the auto-
     # fallback rung below, never forwarded to a provider call.
     settings_manager = kwargs.pop("settings_manager", None)
+    # ADR-013 stage 13.3: popped the same way and threaded into ChatRequest
+    # explicitly below (not left in extra_kwargs) - only backend/
+    # structured_output.py's Anthropic native path sets these today (a
+    # single forced tool whose input_schema is the caller's JSON schema),
+    # but the shape is provider-agnostic should a future caller need it.
+    tools = kwargs.pop("tools", ())
+    tool_choice = kwargs.pop("tool_choice", None)
 
     # One consistent view of the provider state for the whole request (#9). Worker
     # threads call chat() while the UI thread can re-run initialize_* at any time;
@@ -3048,7 +3055,10 @@ def _chat_dispatch(task: str, messages: list, **kwargs) -> dict:
             from backend.providers.base import CancelToken, ChatRequest
 
             provider = _provider_for_model_ref(model_ref, state)
-            chat_request = ChatRequest(task=task, messages=messages, extra_kwargs=kwargs, model_ref=model_ref)
+            chat_request = ChatRequest(
+                task=task, messages=messages, extra_kwargs=kwargs,
+                tools=tools, tool_choice=tool_choice, model_ref=model_ref,
+            )
             token = CancelToken(cancel_event)
             if model_ref.provider == config.LOCAL_PROVIDER_LLAMACPP:
                 # llama.cpp is excluded from transport retry - in-process
@@ -3091,7 +3101,8 @@ def _chat_dispatch(task: str, messages: list, **kwargs) -> dict:
                         # still fires, just without a notification.
                         return chat(
                             task, messages, model_ref=auto_ref, settings_manager=settings_manager,
-                            cancellation_event=cancel_event, runtime=runtime, **kwargs,
+                            cancellation_event=cancel_event, runtime=runtime,
+                            tools=tools, tool_choice=tool_choice, **kwargs,
                         )
                     raise ValueError(f"No Ollama model configured for task: {task}")
 
@@ -3172,7 +3183,8 @@ def _chat_dispatch(task: str, messages: list, **kwargs) -> dict:
                 # fallback attempt.
                 return chat(
                     task, messages, model_ref=auto_ref, settings_manager=settings_manager,
-                    cancellation_event=cancel_event, runtime=runtime, **kwargs,
+                    cancellation_event=cancel_event, runtime=runtime,
+                    tools=tools, tool_choice=tool_choice, **kwargs,
                 )
             raise RuntimeError(
                 f"No API model configured for task '{task}'.\n"
@@ -3187,7 +3199,9 @@ def _chat_dispatch(task: str, messages: list, **kwargs) -> dict:
         # the OpenAI content-part format instead of being passed through raw.
         from backend.providers.base import CancelToken, ChatRequest
 
-        chat_request = ChatRequest(task=task, messages=messages, extra_kwargs=kwargs)
+        chat_request = ChatRequest(
+            task=task, messages=messages, extra_kwargs=kwargs, tools=tools, tool_choice=tool_choice,
+        )
         token = CancelToken(cancel_event)
 
         if state.api_provider_type == config.API_PROVIDER_OPENAI:
diff --git a/backend/agents.py b/backend/agents.py
index 0a81469e..aaba99ea 100644
--- a/backend/agents.py
+++ b/backend/agents.py
@@ -72,7 +72,7 @@
 import api_provider
 import graphlink_task_config as config
 from graphlink_artifact_agent import ArtifactAgent
-from graphlink_chart_agent import ChartDataAgent
+from graphlink_chart_data import CHART_JSON_SCHEMAS, chart_generation_messages
 from graphlink_chat_agent import ChatAgent
 from graphlink_note_agent import BranchComparisonAgent, BranchSynthesisAgent, ExplainerAgent, KeyTakeawayAgent
 from graphlink_settings_store import SettingsManager  # type hint only
@@ -112,6 +112,7 @@
 
 from backend.events import SessionBus  # type hint only
 from backend.run_lifecycle import RunRegistry, run_single_shot
+from backend.structured_output import StructuredOutputError, respond_json
 
 logger = logging.getLogger(__name__)
 
@@ -3111,36 +3112,38 @@ async def start_chart_generation(
         marker, so two overlapping generateChart calls (e.g. from two tabs
         open on the same session) cannot race each other.
 
-        No cancel_event: ChartDataAgent has no cancellation checkpoint of
-        its own, and its own legacy caller (ChartWorkerThread) has no
-        stop() method either - same honestly-documented limitation as every
-        other dispatch surface.
+        ADR-013 stage 13.3: `_call_chart_agent` now receives run_single_shot's
+        own cancel_event and forwards it to respond_json as a real
+        cancellation_event - a genuine interruption (api_provider.
+        RequestCancelledError), not the "no cancellation checkpoint of its
+        own" gap this docstring used to document for ChartDataAgent
+        (retired this same stage). run_single_shot's own exception handling
+        already treats a caught exception while cancel_event.is_set() as a
+        silent cancel rather than a failure, so a cancelled generation
+        neither calls on_failure nor shows a notification.
 
         Two distinct failure shapes, both routed through on_failure plus a
         notification, NEITHER of which creates a node (node creation only
         ever happens in on_success):
           1. `_call_chart_agent` returns a dict carrying a top-level "error"
-             key - ChartDataAgent.get_response's own fully-degraded case
-             (even its heuristic_chart_data fallback found nothing usable).
-             Mirrors ChartWorkerThread.run()'s identical `if 'error' in
-             parsed: raise ValueError(...)` check at the one legacy call
-             site.
+             key - respond_json's StructuredOutputError case (the model
+             could not produce schema-conforming JSON even after its own
+             one repair attempt).
           2. A timeout or any other exception raised getting there.
         A dict with NO "error" key is still not guaranteed to be canonical -
         on_success (backend/canvas.py's own closure) is responsible for its
         own defensive canonicalize_chart_data/ChartDataError handling before
         calling document.add_chart_node, exactly as this feature's own
         contract requires; this method's job ends at handing back whatever
-        ChartDataAgent produced.
+        _call_chart_agent produced.
 
         Reuses WATCHDOG_TIMEOUT_SECONDS (420s), not a new constant:
-        ChartDataAgent.get_response makes at most TWO sequential blocking
-        api_provider.chat() calls (the initial extraction call, plus one
-        repair_chart_data round trip on a non-canonical first attempt) -
-        double Artifact's own single-call shape, but nowhere near Web
-        Research's ~10-call chain that justified ITS own 900s bump, and 420s
-        already carries ample headroom for two calls at any realistic
-        per-call latency.
+        respond_json makes at most TWO sequential blocking api_provider.
+        chat() calls (the initial extraction call, plus one repair round
+        trip on a non-canonical first attempt) - double Artifact's own
+        single-call shape, but nowhere near Web Research's ~10-call chain
+        that justified ITS own 900s bump, and 420s already carries ample
+        headroom for two calls at any realistic per-call latency.
 
         ADR-002 stage 2.3: the guard/timeout/exception/notify skeleton
         below now lives once, shared with start_note_generation, in
@@ -3157,7 +3160,7 @@ async def start_chart_generation(
             notifications_state=notifications_state,
             node_id=node_id,
             timeout=WATCHDOG_TIMEOUT_SECONDS,
-            call=lambda: _call_chart_agent(source_text, chart_type),
+            call=lambda cancel_event: _call_chart_agent(source_text, chart_type, cancel_event),
             validate=lambda result: (
                 str(result["error"]) if isinstance(result, dict) and "error" in result else None
             ),
@@ -3215,7 +3218,7 @@ async def start_note_generation(
             notifications_state=notifications_state,
             node_id=node_id,
             timeout=WATCHDOG_TIMEOUT_SECONDS,
-            call=lambda: _call_note_agent(note_kind, source_text),
+            call=lambda _cancel_event: _call_note_agent(note_kind, source_text),
             validate=lambda text: (
                 # An agent that returns nothing usable must not silently
                 # create an empty note - that reads as a broken feature.
@@ -3268,7 +3271,7 @@ async def start_branch_comparison(
             notifications_state=notifications_state,
             node_id=None,
             timeout=WATCHDOG_TIMEOUT_SECONDS,
-            call=lambda: _call_branch_comparison_agent(source_text),
+            call=lambda _cancel_event: _call_branch_comparison_agent(source_text),
             validate=lambda text: (
                 "Branch comparison returned an empty response. Please try again."
                 if not str(text or "").strip() else None
@@ -3316,7 +3319,7 @@ async def start_branch_synthesis(
             notifications_state=notifications_state,
             node_id=None,
             timeout=WATCHDOG_TIMEOUT_SECONDS,
-            call=lambda: _call_branch_synthesis_agent(source_text, instructions),
+            call=lambda _cancel_event: _call_branch_synthesis_agent(source_text, instructions),
             validate=lambda text: (
                 "Branch synthesis returned an empty response. Please try again."
                 if not str(text or "").strip() else None
@@ -3539,19 +3542,56 @@ def _call_artifact_agent(current_artifact, history):
     return ArtifactAgent().get_response(current_artifact, history)
 
 
-def _call_chart_agent(source_text: str, chart_type: str) -> dict:
+def _call_chart_agent(source_text: str, chart_type: str, cancel_event: threading.Event | None = None) -> dict:
     """Runs inside asyncio.to_thread - the blocking driver for
     start_chart_generation above, mirroring _call_artifact_agent's own
-    shape. ChartDataAgent.get_response returns a JSON STRING (its own
-    unchanged public contract, preserved byte-for-byte by the R6.2
-    extraction into graphlink_chart_agent.py - see that module's own
-    docstring), so this parses it back into a dict the same way
-    ChartWorkerThread.run() already does at the one legacy call site
-    (`parsed = json.loads(data)`) before start_chart_generation inspects it
-    for a top-level "error" key."""
-    agent = ChartDataAgent()
-    raw = agent.get_response(source_text, chart_type)
-    return json.loads(raw)
+    shape. ADR-013 stage 13.3: retired graphlink_chart_agent.py's whole
+    ChartDataAgent pipeline (five hand-maintained per-type prompts, a
+    bespoke clean_response/repair_chart_data pair, a manual per-provider
+    JSON-mode if/elif, and a heuristic-regex fallback of last resort) in
+    favor of ONE respond_json call against a real JSON Schema - the module
+    ChartDataAgent existed specifically to replace (see structured_output.py's
+    own docstring). graphlink_chart_data.CHART_JSON_SCHEMAS/
+    chart_generation_messages are shared with backend/evals/runner.py's own
+    chart eval fixture, so the eval drives the identical shape this
+    actually ships.
+
+    `cancel_event`, when set, is respond_json's own cancellation_event -
+    forwarded all the way to api_provider.chat(), a REAL interruption
+    (api_provider.RequestCancelledError, checked before the request is sent
+    and between any transport retries) rather than the pre-13.3 gap this
+    surface's own start_chart_generation docstring used to document ("no
+    cancellation checkpoint of its own"). A cancellation raises straight
+    through - run_single_shot's own exception handling already treats a
+    caught exception while cancel_event.is_set() as a silent cancel, not a
+    failure, so this function does not catch it itself.
+
+    Returns a dict either way: the canonical shape on success, or
+    {"error": <message>} on respond_json's own StructuredOutputError (the
+    model could not produce schema-conforming JSON even after one repair
+    attempt) - the exact contract start_chart_generation/_run_chart already
+    expect (top-level "error" key => surfaced as a failure, never reaches
+    on_success/add_chart_node)."""
+    try:
+        schema = CHART_JSON_SCHEMAS[chart_type]
+    except KeyError:
+        # Defensive only - both real callers (intents_chart.py's
+        # generate_chart, tools_graph.py's _run_chart) already validate
+        # chart_type against SUPPORTED_CHART_TYPES before ever reaching
+        # here; this guards against a raw KeyError if a future caller
+        # regresses that, matching the retired ChartDataAgent's own
+        # equivalent internal guard.
+        return {"error": f"Unsupported chart type: {chart_type!r}"}
+    try:
+        return respond_json(
+            config.TASK_CHART,
+            chart_generation_messages(source_text, chart_type),
+            schema,
+            schema_name=f"{chart_type}_chart",
+            cancellation_event=cancel_event,
+        )
+    except StructuredOutputError as exc:
+        return {"error": str(exc)}
 
 
 # -- R5.3: Gitlink - blocking helpers, each runs inside asyncio.to_thread ----
diff --git a/backend/api/intents_chart.py b/backend/api/intents_chart.py
index f351974d..63c2dc70 100644
--- a/backend/api/intents_chart.py
+++ b/backend/api/intents_chart.py
@@ -81,11 +81,12 @@ async def _on_success(result):
                 chart_data = canonicalize_chart_data(result, normalized_chart_type)
                 chart_error = ""
             except ChartDataError as exc:
-                # R6.2 contract: ChartDataAgent's own validate_chart_data
-                # pipeline (repair round trip, then heuristic fallback)
-                # already tries hard to guarantee canonical output before
-                # ever returning successfully - this is the rare defensive
-                # case where it still somehow didn't. Never a silent no-op:
+                # R6.2 contract, ADR-013 stage 13.3: _call_chart_agent's own
+                # respond_json call (one repair round trip against the real
+                # JSON Schema, then StructuredOutputError) already tries
+                # hard to guarantee schema-conforming output before ever
+                # returning successfully - this is the rare defensive case
+                # where it still somehow didn't. Never a silent no-op:
                 # still create a real chart node with a minimal placeholder
                 # shape and chart_error set, same "degrade gracefully, never
                 # drop the request" contract as the agent's own internal
@@ -95,9 +96,9 @@ async def _on_success(result):
             # ADR-010 stage 10.1: agent provenance - this node is produced by
             # a model generation, not a direct user action (stage 10.5's
             # "undo this build" is what will consume that distinction).
-            # add_chart_node also mints chart asset bytes into image_assets;
-            # record_command captures those alongside the node, so undoing a
-            # generated chart does not strand its PNG.
+            # ADR-013 stage 13.4 retired add_chart_node's own PNG render (see
+            # ChartState's own docstring) - there is no longer an asset for
+            # record_command to snapshot alongside the node.
             node, _command = document.record_command(
                 "generateChart", "agent",
                 lambda: document.add_chart_node(
diff --git a/backend/assets.py b/backend/assets.py
index 516529bd..533160d5 100644
--- a/backend/assets.py
+++ b/backend/assets.py
@@ -7,9 +7,11 @@
 so inlined bytes there would compound in size on every unrelated mutation).
 Instead the frontend fetches them on demand from this dedicated HTTP route,
 addressed by the opaque image_asset_id each image-kind SceneNode carries.
-R6.2's chart nodes REUSE this exact same route/dict for their own
-display-resolution PNG (chart_asset_id, same image_assets store) - no
-parallel asset store.
+R6.2's chart nodes used to REUSE this exact same route/dict for their own
+display-resolution PNG (chart_asset_id, same image_assets store) - ADR-013
+stage 13.4 retired that render outright (see ChartState's own docstring,
+backend/domain/node_states.py), so this route today serves only real
+image-kind nodes.
 
 This route needs to reach the SAME SceneDocument instance register_canvas()
 built for a given session - not a fresh one - so it goes through the same
@@ -24,10 +26,22 @@
 resolution RE-RENDER (legacy ChartItem.EXPORT_SCALE), not a lookup of
 anything cached in image_assets - so it is a distinct endpoint, not a query
 flag on the shared one.
+
+ADR-013 stage 13.4: export_chart's render (~50-108ms of synchronous
+matplotlib work, measured) is the LAST inline render this app makes -
+add_chart_node/resize_chart's own display-PNG renders were retired outright
+once stage 13.2's client-side interactive renderer made them dead weight
+(see ChartState's own docstring, backend/domain/node_states.py). Wrapped in
+asyncio.to_thread so this route no longer blocks the event loop (closing
+C6/M1's own finding) - a plain `async def` route handler awaiting a
+synchronous call would otherwise still stall every other in-flight request
+on this same process for the full render duration. Also gained a real SVG
+export option this same stage - vector, so no dpi_scale multiplier applies.
 """
 
 from __future__ import annotations
 
+import asyncio
 import re
 
 from fastapi import FastAPI, Response
@@ -35,7 +49,7 @@
 
 from backend.events import EventBus, UnknownSessionError
 from backend.session_context import get_session_context
-from graphlink_chart_rendering import render_chart_png
+from graphlink_chart_rendering import render_chart_png, render_chart_svg
 
 # 3x the display resolution - mirrors legacy ChartItem.EXPORT_SCALE exactly.
 CHART_EXPORT_DPI_SCALE = 3.0
@@ -83,7 +97,7 @@ async def get_asset(asset_id: str, session: str = "default") -> Response:
         return Response(content=image_bytes, media_type=mime_type)
 
     @app.get("/api/assets/chart/{node_id}/export")
-    async def export_chart(node_id: str, session: str = "default") -> Response:
+    async def export_chart(node_id: str, session: str = "default", fmt: str = "png") -> Response:
         try:
             document = get_session_context(bus.session(session)).canvas_document
         except UnknownSessionError:
@@ -93,15 +107,35 @@ async def export_chart(node_id: str, session: str = "default") -> Response:
         if node is None or node.kind != "chart":
             return JSONResponse({"error": "unknown chart"}, status_code=404)
 
-        png_bytes = render_chart_png(
+        normalized_format = str(fmt or "png").strip().lower()
+        if normalized_format not in ("png", "svg"):
+            return JSONResponse({"error": "unsupported export format"}, status_code=400)
+
+        title = node.state.chart_data.get("title") if isinstance(node.state.chart_data, dict) else ""
+        filename = _sanitize_chart_filename(title)
+
+        if normalized_format == "svg":
+            svg_bytes = await asyncio.to_thread(
+                render_chart_svg,
+                node.state.chart_type,
+                node.state.chart_data,
+                node.state.chart_width,
+                node.state.chart_height,
+            )
+            return Response(
+                content=svg_bytes,
+                media_type="image/svg+xml",
+                headers={"Content-Disposition": f'attachment; filename="{filename}.svg"'},
+            )
+
+        png_bytes = await asyncio.to_thread(
+            render_chart_png,
             node.state.chart_type,
             node.state.chart_data,
             node.state.chart_width,
             node.state.chart_height,
             dpi_scale=CHART_EXPORT_DPI_SCALE,
         )
-        title = node.state.chart_data.get("title") if isinstance(node.state.chart_data, dict) else ""
-        filename = _sanitize_chart_filename(title)
         return Response(
             content=png_bytes,
             media_type="image/png",
diff --git a/backend/canvas.py b/backend/canvas.py
index da0b111d..9769865e 100644
--- a/backend/canvas.py
+++ b/backend/canvas.py
@@ -145,7 +145,8 @@ def _history_turn_text(turn: dict) -> str:
     """Flattens one chat_branch_history entry's "content" into plain text,
     for callers whose interface is a flat string (token estimation here;
     _chart_source_text below has its own, separate flattening for
-    ChartDataAgent). A turn's content is a plain str for an ordinary
+    backend/agents.py's _call_chart_agent). A turn's content is a plain str
+    for an ordinary
     message, or (R8a attachments) a content_parts list of {"type", ...}
     dicts - only the "text" part has a token-count analog, so image/audio
     parts are skipped rather than stringified."""
@@ -171,8 +172,10 @@ def _chart_source_text(branch_history: list[dict]) -> str:
     """R6.2: flattens chat_branch_history's own {"role","content"} list (the
     SAME branch walk web_research/pycoder/gitlink already reuse via
     document.chat_branch_history - see this module's own docstring
-    convention) into the single plain-text string ChartDataAgent.get_response
-    expects. NOT a new branch-walking helper (chat_branch_history already IS
+    convention) into the single plain-text string backend/agents.py's
+    _call_chart_agent (ADR-013 stage 13.3: respond_json-based, replacing the
+    retired ChartDataAgent.get_response) expects. NOT a new branch-walking
+    helper (chat_branch_history already IS
     that, reused as-is) - just the formatting step its list-of-dicts shape
     needs before it can be handed to an agent whose interface is a flat
     string, mirroring legacy graphlink_window_actions.py's own
@@ -215,8 +218,8 @@ def _format_branches_for_comparison(branches: list[tuple[str, list[dict]]]) -> s
 def _placeholder_chart_data(chart_type: str) -> dict[str, Any]:
     """R6.2: a minimal, already-canonical-SHAPED payload (matching
     canonicalize_chart_data's own output keys exactly) for the rare
-    defensive case in generate_chart below where ChartDataAgent's response
-    carries no top-level "error" key yet still fails
+    defensive case in generate_chart below where _call_chart_agent's
+    response carries no top-level "error" key yet still fails
     canonicalize_chart_data - see that function's own call site for the full
     reasoning. One trivial data point per chart kind: just enough for
     render_chart_png to draw SOMETHING rather than leave the request a
diff --git a/backend/domain/branches.py b/backend/domain/branches.py
index 7f599e49..9d0d8d55 100644
--- a/backend/domain/branches.py
+++ b/backend/domain/branches.py
@@ -403,7 +403,7 @@ def chat_branch_history(self, node_id: str) -> list[dict]:
             # node.kind == "chat" check, since this method's own docstring
             # promises to stop quietly on a stray non-chat node/edge shape,
             # never raise. Same duck-typed posture as remove_nodes's own
-            # image_asset_id/chart_asset_id reads (backend/domain/graph.py).
+            # image_asset_id read (backend/domain/graph.py).
             history.append({
                 "role": "user" if getattr(node.state, "is_user", False) else "assistant",
                 "content": getattr(node.state, "content_parts", None) or node.content,
diff --git a/backend/domain/commands.py b/backend/domain/commands.py
index bb27fbcf..ebb753dd 100644
--- a/backend/domain/commands.py
+++ b/backend/domain/commands.py
@@ -430,11 +430,13 @@ def record_command(
         recon, not just the one the recon happened to name.
 
         Asset bytes (image_assets) are snapshotted only for explicitly
-        named node_ids that currently carry an image_asset_id/
-        chart_asset_id - deliberately NOT defensive like the frame case,
-        since asset bytes are the one genuinely expensive thing here and
-        only a node's OWN delete evicts its OWN asset (see
-        remove_nodes' - never a side effect of some other node's edit).
+        named node_ids that currently carry an image_asset_id -
+        deliberately NOT defensive like the frame case, since asset bytes
+        are the one genuinely expensive thing here and only a node's OWN
+        delete evicts its OWN asset (see remove_nodes' - never a side
+        effect of some other node's edit). Chart nodes carried a second
+        such attr (chart_asset_id) before ADR-013 stage 13.4 retired their
+        backend-rendered display PNG - see ChartState's own docstring.
 
         Raises AssertionError if a node/edge disappears during `mutator()`
         that was not in the watched set - a Command silently missing a
@@ -471,10 +473,9 @@ def record_command(
             node = self.nodes.get(nid)
             if node is None or node.state is None:
                 continue
-            for attr in ("image_asset_id", "chart_asset_id"):
-                asset_id = getattr(node.state, attr, None)
-                if asset_id and asset_id in self.image_assets:
-                    asset_snapshot_before[asset_id] = self.image_assets[asset_id]
+            asset_id = getattr(node.state, "image_asset_id", None)
+            if asset_id and asset_id in self.image_assets:
+                asset_snapshot_before[asset_id] = self.image_assets[asset_id]
 
         node_ids_before = set(self.nodes.keys())
         edge_ids_before = set(self.edges.keys())
diff --git a/backend/domain/graph.py b/backend/domain/graph.py
index 1fc217ab..9cb1aa47 100644
--- a/backend/domain/graph.py
+++ b/backend/domain/graph.py
@@ -14,15 +14,14 @@
 total_session_tokens, saved chats.db rows, and autosave's change hash -
 are bit-identical.
 
-render_chart_png (matplotlib, via root module graphlink_chart_rendering)
-is imported here deliberately: it is a pure (chart_type, data, w, h,
-dpi_scale) -> PNG-bytes function with no I/O and no backend
-infrastructure, and "a chart node owns a versioned rendered asset"
-(chart_asset_id/chart_asset_version/image_assets) genuinely is a document
-invariant - the same category of root-module dependency as
-NavigationPinStore/GridViewSettings, which this class has always carried
-as fields. Keeping it module-level also preserves today's import-order
-side effects (matplotlib backend selection at import time).
+ADR-013 stage 13.4 retired this module's own render_chart_png import: a
+chart node's PNG used to be rendered here (add_chart_node's initial
+render, resize_chart's re-render), but that output went dead the moment
+stage 13.2 shipped the client-side interactive renderer - nothing has
+fetched it since. Matplotlib rendering now lives only behind the export/
+copy endpoint (backend/assets.py), off the event loop via asyncio.to_thread
+- a domain method staying synchronous (record_command's own contract)
+could never do that itself, so it was never this layer's job to keep.
 
 backend/canvas.py imports SceneDocument back, so every existing
 `from backend.canvas import SceneDocument` consumer keeps working
@@ -42,7 +41,6 @@
 from typing import Any
 
 from graphlink_chart_data import SUPPORTED_CHART_TYPES
-from graphlink_chart_rendering import render_chart_png
 from graphlink_grid_view_settings import (
     GRID_SIZE_PRESETS,
     GRID_STYLE_PRESETS,
@@ -1642,13 +1640,11 @@ def add_chart_node(
         else the literal "Chart" (not a chart-type-specific default; that is
         genuinely what legacy does).
 
-        Renders the display PNG immediately at the freshly-constructed
-        node's OWN chart_width/chart_height (the dataclass defaults, 680x500
-        - read off `node`, not a second literal, so they can never drift
-        apart - see those fields' own comments), stores the bytes in the
-        SAME image_assets dict R3.21's image nodes already use (reused, not
-        a parallel store), and sets chart_asset_version = 1 for this first
-        render."""
+        ADR-013 stage 13.4: no longer renders a PNG here - the client-side
+        interactive renderer (stage 13.2) draws straight from chart_data,
+        and nothing has consumed the backend-rendered display asset since.
+        A chart's ONLY remaining matplotlib render is the export/copy
+        endpoint (backend/assets.py), a fresh re-render on every request."""
         if parent_id is not None and parent_id not in self.nodes:
             raise SceneError(f"unknown parent node: {parent_id}")
         normalized_type = str(chart_type or "").strip().lower()
@@ -1672,15 +1668,6 @@ def add_chart_node(
             ),
         )
 
-        png_bytes = render_chart_png(
-            node.state.chart_type, node.state.chart_data, node.state.chart_width, node.state.chart_height,
-            dpi_scale=1.0,
-        )
-        asset_id = f"chart{uuid.uuid4().hex}"
-        self.image_assets[asset_id] = (png_bytes, "image/png")
-        node.state.chart_asset_id = asset_id
-        node.state.chart_asset_version = 1
-
         self.nodes[node_id] = node
         if parent_id is not None:
             self.connect(parent_id, node_id)
@@ -1703,10 +1690,8 @@ def resize_chart(self, node_id: str, width: float, height: float) -> None:
         re-clamps once more, so the final stored size never violates either
         the lock or the min/max bounds even after that re-derivation.
 
-        Re-renders the PNG at the final clamped size, OVERWRITING
-        self.image_assets[chart_asset_id] IN PLACE (same id, new bytes - the
-        old bytes are simply replaced, never left behind) and increments
-        chart_asset_version so the frontend can cache-bust the <img> src."""
+        ADR-013 stage 13.4: no longer re-renders a PNG here - see
+        add_chart_node's own docstring for why."""
         node = self.nodes.get(node_id)
         if node is None:
             raise SceneError(f"unknown node: {node_id}")
@@ -1737,18 +1722,8 @@ def resize_chart(self, node_id: str, width: float, height: float) -> None:
         node.state.chart_width = clamped_width
         node.state.chart_height = clamped_height
 
-        png_bytes = render_chart_png(
-            node.state.chart_type, node.state.chart_data, node.state.chart_width, node.state.chart_height,
-            dpi_scale=1.0,
-        )
-        self.image_assets[node.state.chart_asset_id] = (png_bytes, "image/png")
-        node.state.chart_asset_version += 1
-
     def toggle_chart_aspect_lock(self, node_id: str) -> None:
-        """Chart kind only (SceneError otherwise). Flips chart_aspect_locked.
-        No re-render - the current PNG is still correct for the current
-        size regardless of the lock flag; only a later resize_chart call's
-        BEHAVIOR changes."""
+        """Chart kind only (SceneError otherwise). Flips chart_aspect_locked."""
         node = self.nodes.get(node_id)
         if node is None:
             raise SceneError(f"unknown node: {node_id}")
@@ -1962,16 +1937,12 @@ def remove_nodes(self, node_ids: list[str]) -> None:
                 image_asset_id = getattr(node.state, "image_asset_id", None)
                 if image_asset_id:
                     self.image_assets.pop(image_asset_id, None)
-                # R6.2: a chart node's rendered PNG lives in the SAME
-                # image_assets dict (reused, not a parallel store - see
-                # ChartState's own docstring, backend/domain/node_states.py)
-                # - same leak-prevention reasoning as image_asset_id just
-                # above, and the same ADR-002 stage 2.5 getattr posture
-                # (chart_asset_id lives on node.state now, None for every
-                # non-chart kind).
-                chart_asset_id = getattr(node.state, "chart_asset_id", None)
-                if chart_asset_id:
-                    self.image_assets.pop(chart_asset_id, None)
+                # R6.2 minted a chart node's rendered PNG into this same
+                # image_assets dict, evicted here on delete - ADR-013 stage
+                # 13.4 retired that render (add_chart_node/resize_chart no
+                # longer produce one; see ChartState's own docstring), so
+                # there is no longer a chart-owned image_assets entry to
+                # clean up here.
                 self._detach_node_from_membership(node_id)
 
     # -- edges -------------------------------------------------------------
@@ -2269,8 +2240,6 @@ def _node_wire(self, n: SceneNode) -> dict[str, Any]:
             "chartType": n.state.chart_type if isinstance(n.state, ChartState) else "",
             "chartData": dict(n.state.chart_data) if isinstance(n.state, ChartState) else {},
             "chartError": n.state.chart_error if isinstance(n.state, ChartState) else "",
-            "chartAssetId": n.state.chart_asset_id if isinstance(n.state, ChartState) else "",
-            "chartAssetVersion": n.state.chart_asset_version if isinstance(n.state, ChartState) else 0,
             "chartWidth": n.state.chart_width if isinstance(n.state, ChartState) else 680.0,
             "chartHeight": n.state.chart_height if isinstance(n.state, ChartState) else 500.0,
             "chartAspectLocked": n.state.chart_aspect_locked if isinstance(n.state, ChartState) else True,
diff --git a/backend/domain/node_states.py b/backend/domain/node_states.py
index 86f3092f..0d62b08a 100644
--- a/backend/domain/node_states.py
+++ b/backend/domain/node_states.py
@@ -198,23 +198,21 @@ class ChartState(NodeState):
       hard-fail contract, rather than add_chart_node raising and aborting
       node creation entirely.
     - chart_error: non-empty if generation/canonicalization degraded to a
-      placeholder - the chart still has a real (if minimal) chart_asset_id
-      and renders SOMETHING, never a blank/broken state (mirrors
-      ChartDataAgent's own get_response/repair_chart_data/
-      heuristic_chart_data degrade-gracefully chain, which never
-      hard-fails outright for a genuine LLM response).
-    - chart_asset_id: opaque key into the EXISTING
-      SceneDocument.image_assets dict (REUSED, not a parallel store - same
-      dict R3.21's image nodes already use, see that field's own
-      transport-decision comment on image_assets) - the rendered
-      display-resolution PNG. Export (the 3x-resolution download)
-      re-renders fresh rather than reading this asset - see
-      backend/assets.py.
-    - chart_asset_version: incremented every time chart_asset_id's bytes
-      are (re)written (by add_chart_node's initial render, or
-      resize_chart's re-render) - lets the frontend cache-bust the <img>
-      src with a version query param after a resize re-render, since the
-      asset id itself never changes.
+      placeholder - the chart still has real (if minimal) chart_data and
+      renders SOMETHING client-side, never a blank/broken state (the intent
+      layer's own never-hard-fail contract - ADR-013 stage 13.3's
+      respond_json raises StructuredOutputError rather than silently
+      degrading through several fallback tiers the way the retired
+      ChartDataAgent used to; catching that and showing a placeholder is
+      this layer's job, not generation's).
+    - ADR-013 stage 13.4 retired chart_asset_id/chart_asset_version: the
+      backend-rendered display PNG they addressed (add_chart_node's initial
+      render, resize_chart's re-render) went dead the moment stage 13.2
+      shipped the client-side interactive renderer - the frontend has drawn
+      every chart straight from chart_data ever since, never fetching that
+      PNG. Matplotlib now renders ONLY for the export/copy endpoint
+      (backend/assets.py), which re-renders fresh on every request rather
+      than reading anything cached on this state.
     - chart_width/chart_height: default to legacy ChartItem.DEFAULT_WIDTH/
       DEFAULT_HEIGHT - add_chart_node reads these dataclass defaults
       directly off a freshly-constructed node's state (not a second
@@ -235,8 +233,6 @@ class ChartState(NodeState):
     chart_type: str = ""
     chart_data: dict = field(default_factory=dict)
     chart_error: str = ""
-    chart_asset_id: str = ""
-    chart_asset_version: int = 0
     chart_width: float = 680.0
     chart_height: float = 500.0
     chart_aspect_locked: bool = True
diff --git a/backend/evals/README.md b/backend/evals/README.md
index 4e2e3cf2..33ab0c7f 100644
--- a/backend/evals/README.md
+++ b/backend/evals/README.md
@@ -9,8 +9,11 @@ be reproducible locally with either a scripted response or a real model.
 
 ## The three dimensions
 
-- **chart** - drives the real `ChartDataAgent.get_response` (in
-  `graphlink_chart_agent.py`) and canonicalizes the result the same way
+- **chart** - drives the real `backend.structured_output.respond_json` call
+  against `graphlink_chart_data.CHART_JSON_SCHEMAS`/`chart_generation_messages`
+  (the exact schema+messages `backend/agents.py`'s `_call_chart_agent` uses -
+  ADR-013 stage 13.3 retired the old `ChartDataAgent` pipeline this dimension
+  used to drive) and canonicalizes the result the same way
   `backend/api/intents_chart.py`'s `generate_chart` does downstream, via
   `graphlink_chart_data.canonicalize_chart_data`.
 - **structured_output** - drives the real `backend.structured_output.respond_json`
@@ -70,8 +73,7 @@ Each fixture is one JSON file under `backend/evals/fixtures/<kind>/`, where
 `input` needs `chart_type` (`"bar"` / `"line"` / `"pie"` / `"histogram"` /
 `"sankey"`) and `source_text` (what a user's node history would contain).
 `scripted_response` is the exact raw JSON text a model would emit for that
-`chart_type`, matching the `STRUCTURE` documented in
-`ChartDataAgent.CHART_PROMPTS[chart_type]` in `graphlink_chart_agent.py`.
+`chart_type`, matching `graphlink_chart_data.CHART_JSON_SCHEMAS[chart_type]`.
 
 `expected` must be the **actual** output of
 `canonicalize_chart_data(json.loads(scripted_response), chart_type)` - do
diff --git a/backend/evals/__init__.py b/backend/evals/__init__.py
index 37bfb54f..fa0299d9 100644
--- a/backend/evals/__init__.py
+++ b/backend/evals/__init__.py
@@ -3,7 +3,7 @@
 
 Local-only, reproducible, off-CI by default. Three dimensions:
 
-- **chart**: does ``ChartDataAgent.get_response`` + ``canonicalize_chart_data``
+- **chart**: does ``respond_json`` (ADR-013 stage 13.3) + ``canonicalize_chart_data``
   turn a scripted model response into the exact canonical chart payload
   (backend/api/intents_chart.py's own downstream shape)? Real, working code.
 - **structured_output**: does ``backend.structured_output.respond_json`` parse
diff --git a/backend/evals/fixtures/chart/bar_support_tickets.json b/backend/evals/fixtures/chart/bar_support_tickets.json
index 66f63266..7e403a5d 100644
--- a/backend/evals/fixtures/chart/bar_support_tickets.json
+++ b/backend/evals/fixtures/chart/bar_support_tickets.json
@@ -7,6 +7,7 @@
   },
   "scripted_response": "{\"type\": \"bar\", \"title\": \"Support Tickets by Category\", \"labels\": [\"Billing Issues\", \"Login Problems\", \"Feature Requests\", \"Bug Reports\"], \"values\": [42, 87, 65, 23], \"xAxis\": \"Category\", \"yAxis\": \"Ticket Count\"}",
   "expected": {
+    "version": 1,
     "type": "bar",
     "title": "Support Tickets by Category",
     "labels": ["Billing Issues", "Login Problems", "Feature Requests", "Bug Reports"],
diff --git a/backend/evals/fixtures/chart/line_daily_active_users.json b/backend/evals/fixtures/chart/line_daily_active_users.json
index 7c3cd4f5..811eea62 100644
--- a/backend/evals/fixtures/chart/line_daily_active_users.json
+++ b/backend/evals/fixtures/chart/line_daily_active_users.json
@@ -7,6 +7,7 @@
   },
   "scripted_response": "{\"type\": \"line\", \"title\": \"Daily Active Users This Week\", \"labels\": [\"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\", \"Sunday\"], \"values\": [3200, 3450, 3100, 3800, 4200, 2900, 2700], \"xAxis\": \"Day\", \"yAxis\": \"Active Users\"}",
   "expected": {
+    "version": 1,
     "type": "line",
     "title": "Daily Active Users This Week",
     "labels": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
diff --git a/backend/evals/fixtures/chart/pie_engineering_budget.json b/backend/evals/fixtures/chart/pie_engineering_budget.json
index 2bf07b2d..7f8190f1 100644
--- a/backend/evals/fixtures/chart/pie_engineering_budget.json
+++ b/backend/evals/fixtures/chart/pie_engineering_budget.json
@@ -7,6 +7,7 @@
   },
   "scripted_response": "{\"type\": \"pie\", \"title\": \"Engineering Budget Allocation\", \"labels\": [\"Infrastructure\", \"Personnel\", \"Tooling\", \"Contingency\"], \"values\": [45, 30, 15, 10]}",
   "expected": {
+    "version": 1,
     "type": "pie",
     "title": "Engineering Budget Allocation",
     "labels": ["Infrastructure", "Personnel", "Tooling", "Contingency"],
diff --git a/backend/evals/runner.py b/backend/evals/runner.py
index 8d61f015..b28cda80 100644
--- a/backend/evals/runner.py
+++ b/backend/evals/runner.py
@@ -25,8 +25,8 @@
 from unittest import mock
 
 import api_provider
-from graphlink_chart_agent import ChartDataAgent
-from graphlink_chart_data import ChartDataError, canonicalize_chart_data
+import graphlink_task_config as config
+from graphlink_chart_data import CHART_JSON_SCHEMAS, ChartDataError, canonicalize_chart_data, chart_generation_messages
 
 from backend.evals.fixtures import EvalFixture, load_fixtures
 from backend.structured_output import StructuredOutputError, respond_json
@@ -71,32 +71,29 @@ def _scripted_chat(fixture: EvalFixture):
 
 
 def run_chart_fixture(fixture: EvalFixture, *, live: bool = False) -> EvalResult:
-    """Drives the real ChartDataAgent.get_response, then canonicalizes the
-    result exactly the way backend/api/intents_chart.py's generate_chart
-    does downstream (``canonicalize_chart_data(result, chart_type)`` on the
-    parsed agent output) before diffing against fixture.expected."""
+    """ADR-013 stage 13.3: drives the real backend.agents._call_chart_agent
+    path's own machinery directly - respond_json against
+    graphlink_chart_data.CHART_JSON_SCHEMAS/chart_generation_messages, the
+    exact schema+messages backend/agents.py's _call_chart_agent builds -
+    then canonicalizes the result exactly the way backend/api/
+    intents_chart.py's generate_chart does downstream
+    (``canonicalize_chart_data(result, chart_type)``) before diffing against
+    fixture.expected. Calls respond_json directly rather than importing
+    backend.agents (a much heavier module - SessionBus/RunLifecycle/etc -
+    for a single function this eval doesn't otherwise need)."""
     chart_type = fixture.input["chart_type"]
     source_text = fixture.input["source_text"]
-    agent = ChartDataAgent()
-
-    if live:
-        raw = agent.get_response(source_text, chart_type)
-    else:
-        with _scripted_chat(fixture):
-            raw = agent.get_response(source_text, chart_type)
+    messages = chart_generation_messages(source_text, chart_type)
+    schema = CHART_JSON_SCHEMAS[chart_type]
 
     try:
-        parsed = json.loads(raw)
-    except json.JSONDecodeError as exc:
-        return EvalResult(
-            fixture.name, "chart", "failed",
-            f"agent response was not valid JSON: {exc}\nraw response: {raw[:500]}",
-        )
-
-    # Mirrors start_chart_generation's own check (backend/agents.py) for
-    # ChartDataAgent's fully-degraded case.
-    if isinstance(parsed, dict) and "error" in parsed:
-        return EvalResult(fixture.name, "chart", "failed", f"agent returned an error payload: {parsed['error']}")
+        if live:
+            parsed = respond_json(config.TASK_CHART, messages, schema, schema_name=f"{chart_type}_chart")
+        else:
+            with _scripted_chat(fixture):
+                parsed = respond_json(config.TASK_CHART, messages, schema, schema_name=f"{chart_type}_chart")
+    except StructuredOutputError as exc:
+        return EvalResult(fixture.name, "chart", "failed", f"respond_json raised StructuredOutputError: {exc}")
 
     try:
         canonical = canonicalize_chart_data(parsed, chart_type)
diff --git a/backend/providers/anthropic_provider.py b/backend/providers/anthropic_provider.py
index 6126739b..c1b0fbac 100644
--- a/backend/providers/anthropic_provider.py
+++ b/backend/providers/anthropic_provider.py
@@ -48,6 +48,23 @@
 _ANTHROPIC_MESSAGES_URL = "https://api.anthropic.com/v1/messages"
 
 
+def _extract_anthropic_tool_input(response, tool_name: str) -> dict:
+    """ADR-013 stage 13.3: walk a non-streaming response's `content` blocks
+    for the forced tool's `tool_use` block and return its already-parsed
+    `input` dict. Mirrors stream()'s own content_block_start/tool_use
+    handling, but reads one complete response object instead of an event
+    stream - a forced single-tool call always has exactly one such block."""
+    for block in _extract_response_field(response, "content", []) or []:
+        block_type = str(_extract_response_field(block, "type", "")).strip().lower()
+        if block_type != "tool_use":
+            continue
+        block_name = str(_extract_response_field(block, "name", "") or "")
+        if block_name and block_name != tool_name:
+            continue
+        return _extract_response_field(block, "input", {}) or {}
+    raise RuntimeError(f"Anthropic did not return a {tool_name!r} tool call despite tool_choice forcing it.")
+
+
 def _system_blocks_with_cache_control(system_prompt: str) -> list[dict]:
     """ADR-006 stage 6.7: send the system prompt as a content-block list
     with cache_control instead of a bare string, so Anthropic caches the
@@ -82,6 +99,14 @@ def __init__(self, *, client, api_key: str, model: str, reasoning_level: str = "
             # native tool use unconditionally (base.py's own
             # ProviderCapabilities.tools comment) - no capability call needed.
             tools=True,
+            # ADR-013 stage 13.3: complete() now honors request.tool_choice
+            # by forcing a single tool call and returning its arguments as
+            # JSON text - see complete()'s own comment for the mechanism.
+            # Anthropic joins OpenAI/Gemini/Ollama/llama.cpp, all of which
+            # already had a real native structured-output mode; this closes
+            # the one documented gap structured_output.py's own module
+            # docstring named.
+            structured_output=True,
             # ADR-017 stage 17.3: Anthropic has no embeddings API at all
             # (unlike audio, which is a real "this provider genuinely
             # cannot" case with the same False value) - False, and this
@@ -89,11 +114,16 @@ def __init__(self, *, client, api_key: str, model: str, reasoning_level: str = "
             embedding=False,
         )
 
-    # ADR-007 stage 7.1: deliberately NOT given tool-call support, matching
-    # every other provider's complete() - it returns a bare str with no
-    # channel for ToolCall events, and its callers never supply
-    # request.tools. A future caller passing tools here has them silently
-    # ignored (no `tools` kwarg built below).
+    # ADR-007 stage 7.1: complete() carried no tool-call support at first,
+    # matching every other provider's blocking path - it returns a bare str
+    # with no channel for ToolCall events, and no caller supplied
+    # request.tools. ADR-013 stage 13.3 gives it exactly ONE tool-shaped
+    # use: request.tool_choice forces a single named tool (never "the model
+    # picks among several"), and the tool call's arguments become the
+    # returned string instead of visible text - see below. A caller that
+    # sets request.tools without tool_choice still gets the OLD behavior
+    # (tools declared but never forced, text extracted as always) since
+    # nothing in this codebase does that on the blocking path today.
 
     def complete(self, request: ChatRequest, cancel: CancelToken) -> str:
         system_prompt, anthropic_messages = _prepare_anthropic_messages(
@@ -108,6 +138,21 @@ def complete(self, request: ChatRequest, cancel: CancelToken) -> str:
         }
         if system_prompt:
             request_kwargs["system"] = _system_blocks_with_cache_control(system_prompt)
+        if request.tools:
+            # Same {"name","description","input_schema"} shape stream()
+            # already builds for streaming tool use (ADR-007 stage 7.1) -
+            # Anthropic's native tool param is the ToolSpec's own three
+            # fields verbatim.
+            request_kwargs["tools"] = [
+                {"name": tool.name, "description": tool.description, "input_schema": tool.input_schema}
+                for tool in request.tools
+            ]
+        if request.tool_choice:
+            # ADR-013 stage 13.3: force exactly this tool - Anthropic's
+            # documented shape for "the model MUST call this specific tool",
+            # not the default "tools are available, model decides" behavior
+            # request.tools alone would otherwise leave in place.
+            request_kwargs["tool_choice"] = {"type": "tool", "name": request.tool_choice}
 
         create_callable = getattr(getattr(self.client, "messages", None), "create", None)
         if callable(create_callable):
@@ -132,6 +177,14 @@ def complete(self, request: ChatRequest, cancel: CancelToken) -> str:
                 _extract_response_field(response_usage, "input_tokens", None),
                 _extract_response_field(response_usage, "output_tokens", None),
             )
+        if request.tool_choice:
+            # ADR-013 stage 13.3: a forced tool call's `input` (already a
+            # parsed dict, same as every ToolCall.arguments elsewhere in
+            # this codebase) IS the structured result - re-serialized to a
+            # JSON string so this still matches complete()'s -> str
+            # contract, letting respond_json's own json.loads(...) parse it
+            # exactly like any other provider's raw text content.
+            return json.dumps(_extract_anthropic_tool_input(response, request.tool_choice))
         return _extract_anthropic_text(response)
 
     def stream(self, request: ChatRequest, cancel: CancelToken) -> Iterator[ProviderEvent]:
diff --git a/backend/providers/base.py b/backend/providers/base.py
index 406908b7..55ccea56 100644
--- a/backend/providers/base.py
+++ b/backend/providers/base.py
@@ -185,12 +185,26 @@ class ChatRequest:
     provider still gets its model at construction time exactly as before
     (each `*Provider.__init__` takes `model`); this field never overrides
     that. None for every call site that predates ADR-018 (nothing has
-    broken; `model_ref` is purely additive)."""
+    broken; `model_ref` is purely additive).
+
+    `tool_choice` (ADR-013 stage 13.3): the name of a tool in `tools` to
+    FORCE the model to call - never optional/auto. None (every caller before
+    this stage) means the model chooses freely among `tools`, exactly as
+    today. This is the mechanism backend/structured_output.py's respond_json
+    uses to get schema-constrained JSON out of Anthropic, which has no
+    native JSON-schema response mode (unlike OpenAI/Gemini/Ollama/
+    llama.cpp): it defines one single-purpose tool whose input_schema IS the
+    caller's schema, forces it, and reads the tool call's arguments back as
+    the structured result - see AnthropicProvider.complete()'s own handling.
+    A provider whose capabilities.tools is False must never receive a
+    non-None tool_choice (same caller-checks-capabilities contract `tools`
+    itself already documents)."""
 
     task: str
     messages: list
     extra_kwargs: Mapping[str, Any] = field(default_factory=dict)
     tools: tuple[ToolSpec, ...] = ()
+    tool_choice: str | None = None
     model_ref: ModelRef | None = None
 
 
diff --git a/backend/run_lifecycle.py b/backend/run_lifecycle.py
index 36dc7873..8e3894cc 100644
--- a/backend/run_lifecycle.py
+++ b/backend/run_lifecycle.py
@@ -448,7 +448,7 @@ async def run_single_shot(
     notifications_state,
     node_id: str | None,
     timeout: float,
-    call: Callable[[], Any],
+    call: Callable[[threading.Event], Any],
     validate: Callable[[Any], str | None],
     on_success,
     on_failure,
@@ -464,7 +464,18 @@ async def run_single_shot(
     the generation, return immediately) - see the inline comment at the
     claim below for why the old directly-awaited shape had to go.
 
-    `call`: zero-arg callable, run inside asyncio.to_thread. `validate`:
+    `call`: callable run inside asyncio.to_thread, receiving THIS run's own
+    cancel_event (below) as its one argument - ADR-013 stage 13.3: previously
+    a zero-arg callable, the cancel_event was created here but never reached
+    `call` itself, so a cancelled run's blocking work (an in-flight
+    api_provider.chat()) always ran to completion regardless; only the
+    result was discarded (see the cancel_event comment just below). A
+    surface that wants a REAL interruption threads it through to something
+    that checks it (respond_json's own cancellation_event kwarg, ultimately
+    api_provider.RequestCancelledError) - chart's own `_call_chart_agent` is
+    the first to do so; note/branch-comparison/branch-synthesis accept and
+    ignore it today (no change in their own behavior), a call signature
+    change rather than a behavior one for those three. `validate`:
     inspects a SUCCESSFUL `call` result and returns a human-readable
     failure message when it is well-formed but not usable (e.g. chart's
     top-level "error" key, note's empty-string check) - this is a
@@ -514,7 +525,7 @@ async def run_single_shot(
 
     async def _task() -> None:
         try:
-            result = await asyncio.wait_for(asyncio.to_thread(call), timeout=timeout)
+            result = await asyncio.wait_for(asyncio.to_thread(call, cancel_event), timeout=timeout)
             if cancel_event.is_set():
                 return
             message = validate(result)
diff --git a/backend/structured_output.py b/backend/structured_output.py
index 2cdc7928..95adb802 100644
--- a/backend/structured_output.py
+++ b/backend/structured_output.py
@@ -2,10 +2,12 @@
 used by every caller that needs a model's answer to conform to a schema
 (charts, plugins, the agentic planner) instead of each one hand-rolling its
 own JSON-mode kwargs and repair chain the way graphlink_chart_agent.py's
-ChartDataAgent currently does (five hardcoded chart schemas, a bespoke
+now-retired ChartDataAgent used to (five hardcoded chart schemas, a bespoke
 clean_response/repair_chart_data pair, and an if/elif on API_PROVIDER_TYPE
 picking response_format/response_mime_type/format by hand - exactly the
 per-caller sprawl this ADR's own "Alternatives considered" rejects).
+ADR-013 stage 13.3 retired that whole pipeline in favor of this module -
+backend/agents.py's _call_chart_agent is now just one respond_json call.
 
 Two paths per provider, chosen from THIS request's own provider snapshot
 (api_provider._snapshot_provider_state()/ProviderRuntime.snapshot() - the
@@ -25,9 +27,14 @@
   constrained server-side, so this path should essentially never need
   repair - but the response is still parsed+validated as a safety net, not
   trusted blindly.
-- **Fallback** (Anthropic - no native JSON-schema mode today): the schema is
-  embedded in an extra system message (schema-guided generation, no
-  server-side enforcement) instead of native kwargs.
+- **Native, tool-forced** (Anthropic - ADR-013 stage 13.3): Anthropic has no
+  native JSON-schema RESPONSE mode, but it does have hard-enforced tool
+  argument schemas - so the native path defines exactly one single-purpose
+  tool (name=`schema_name`, input_schema=`schema`) and forces it via
+  `tool_choice`. AnthropicProvider.complete() reads the forced tool call's
+  arguments back as the result instead of visible text (see that method's
+  own comment) - server-side constrained, same posture as every other
+  native branch, not the schema-guided prompting the fallback below is.
 
 Both paths converge on the SAME validate-and-repair tail: parse, validate
 against `schema` (a hand-rolled Draft-2020-12 SUBSET validator - type/
@@ -60,6 +67,7 @@
 
 import api_provider
 import graphlink_task_config as config
+from backend.providers.base import ToolSpec
 
 
 class StructuredOutputError(RuntimeError):
@@ -139,11 +147,15 @@ def _validate_against_schema(data, schema: dict, path: str = "$") -> list[str]:
 
 def _native_kwargs_for_active_provider(state, schema: dict, schema_name: str) -> dict | None:
     """None means the active provider/mode has no native structured-output
-    affordance (Anthropic today) - the caller falls back to a schema-guided
-    system message instead. Branches on the exact same snapshot fields
-    api_provider.chat() itself branches on (state.use_api_mode/
-    local_provider_type/api_provider_type), so "which provider is active"
-    is never derived two different, potentially-divergent ways."""
+    affordance at all - the caller falls back to a schema-guided system
+    message instead. As of ADR-013 stage 13.3 that is no longer any real
+    provider (Anthropic now has a native path too, via tool-forcing below) -
+    None stays reachable only for a provider/mode this function doesn't
+    recognize, so the fallback remains a real safety net, not dead code.
+    Branches on the exact same snapshot fields api_provider.chat() itself
+    branches on (state.use_api_mode/local_provider_type/api_provider_type),
+    so "which provider is active" is never derived two different,
+    potentially-divergent ways."""
     if not state.use_api_mode:
         if state.local_provider_type == config.LOCAL_PROVIDER_OLLAMA:
             # Ollama's `format` accepts a raw JSON Schema dict directly
@@ -175,8 +187,23 @@ def _native_kwargs_for_active_provider(state, schema: dict, schema_name: str) ->
         # by GeminiProvider._request_body, and Google's protobuf-JSON codec
         # accepts either casing on ingest.
         return {"response_mime_type": "application/json", "response_schema": schema}
-    # Anthropic (config.API_PROVIDER_ANTHROPIC): no native mode - None
-    # signals the schema-guided fallback below.
+    if state.api_provider_type == config.API_PROVIDER_ANTHROPIC:
+        # ADR-013 stage 13.3: no native JSON-schema RESPONSE mode, but a
+        # forced tool call's arguments ARE hard-schema-constrained - define
+        # one single-purpose tool named `schema_name` whose input_schema is
+        # exactly the caller's schema, and force it. AnthropicProvider.
+        # complete() reads the tool call back as the structured result
+        # instead of visible text (see its own request.tool_choice handling).
+        return {
+            "tools": (
+                ToolSpec(
+                    name=schema_name,
+                    description=f"Return the {schema_name} result, matching the required schema exactly.",
+                    input_schema=schema,
+                ),
+            ),
+            "tool_choice": schema_name,
+        }
     return None
 
 
diff --git a/backend/tests/perf/test_loop_watchdog.py b/backend/tests/perf/test_loop_watchdog.py
index 97e9dce1..68c78fd7 100644
--- a/backend/tests/perf/test_loop_watchdog.py
+++ b/backend/tests/perf/test_loop_watchdog.py
@@ -1,5 +1,5 @@
-"""ADR-019 stage 19.2: the event-loop blocking watchdog, plus the inline
-chart-render call-site freeze.
+"""ADR-019 stage 19.2: the event-loop blocking watchdog, plus a permanent
+freeze on synchronous render_chart_png/render_chart_svg call sites.
 
 The budget (ADR-019 §2): no single operation blocks the event loop > 16 ms.
 Wall-clock timing that tight would flake on shared CI runners, and ADR-019 §4
@@ -8,33 +8,36 @@
 wall-clock job. So this file enforces two things CI can hold reliably:
 
 1. THE WATCHDOG (timing, generous ceiling): representative mutations and a
-   full publish build+serialize on a 500-node graph must never block the loop
-   longer than CI_STALL_CEILING_MS. The ceiling is 100 ms - ~7x today's worst
-   measured legitimate cost (13.24 ms publish on `large`, measure_baselines
+   full publish build+serialize on a 500-node graph (WITH charts, since
+   ADR-013 stage 13.4 - see below) must never block the loop longer than
+   CI_STALL_CEILING_MS. The ceiling is 100 ms - ~7x today's worst measured
+   legitimate cost (13.24 ms publish on `large`, measure_baselines
    2026-08-02), far below the ~125 ms+ matplotlib-class regression this
    exists to catch. Each operation is yielded around individually, so the
    assertion is per-operation, matching the budget's own wording. The batch
    runs twice and the SMALLER max-stall wins: a one-off GC/scheduler spike
    hits one run, a real synchronous block hits both.
 
-2. THE CALL-SITE FREEZE (counting, fully stable): render_chart_png - the one
-   known ~125 ms synchronous loop-blocker - is called from EXACTLY the sites
-   listed in _KNOWN_RENDER_CALL_SITES, all three of which are today's
-   documented, deliberately-excluded offenders owned by ADR-013 ("0 ms on the
-   loop" via off-thread render is that ADR's exit criterion). A NEW call site
-   fails this test immediately: you may not add another inline render to the
-   loop - wrap it in asyncio.to_thread or route it through the ADR-013 work.
-   When ADR-013 lands and moves these off-loop, the freeze table shrinks with
-   it - that failure is the reminder to update both this test and the
-   watchdog's chart exclusion.
-
-Known offenders excluded from the watchdog window (all ADR-013's to fix):
-  - SceneDocument.add_chart_node's inline render (backend/domain/graph.py)
-  - SceneDocument's chart re-render on resize/update (same file)
-  - the 3x-DPI export route (backend/assets.py)
-The watchdog's fixture is therefore built with chart_count=0 - not to hide
-the problem (the freeze above pins it visibly) but because a gate that is
-red on day one enforces nothing.
+2. THE CALL-SITE FREEZE (counting, permanent, zero-tolerance): matplotlib
+   rendering (render_chart_png/render_chart_svg, graphlink_chart_rendering.py)
+   - the ~50-125 ms synchronous class this whole file exists to keep off the
+   loop - must NEVER be called directly (as opposed to via
+   asyncio.to_thread) anywhere under backend/. ADR-019 stages 19.2-13.3
+   pinned three deliberately-excluded offenders here while ADR-013 was still
+   in flight (SceneDocument.add_chart_node's inline render, its chart
+   resize re-render, and the export route's own inline render); ADR-013
+   stage 13.4 closed all three - the first two by retiring the now-dead
+   display-PNG render entirely (see ChartState's own docstring,
+   backend/domain/node_states.py), the third by moving the export route's
+   render behind asyncio.to_thread (backend/assets.py) - so
+   _KNOWN_RENDER_CALL_SITES is now permanently empty: a ratchet, not a
+   waypoint. A NEW direct call site fails this test immediately - wrap it in
+   asyncio.to_thread instead.
+
+The watchdog's own fixture now includes real chart nodes (chart_count=10,
+matching LARGE's own workload proportion, backend/tests/perf/graph_factory.py)
+rather than chart_count=0's stage-19.2-era exclusion - add_chart_node no
+longer renders anything, so there is nothing left to exclude.
 """
 
 from __future__ import annotations
@@ -118,7 +121,7 @@ def test_no_representative_operation_blocks_the_loop_beyond_the_ci_ceiling():
     # only, see pyproject.toml), and every other async-touching test here
     # already uses this same convention (test_event_bus.py et al.).
     async def _run() -> float:
-        doc = build_graph(node_count=500, content_bytes=1200, chart_count=0, image_count=0, extra_edges=200)
+        doc = build_graph(node_count=500, content_bytes=1200, chart_count=10, image_count=0, extra_edges=200)
         runs = []
         for _ in range(2):
             runs.append(await _max_stall_ms(_representative_operations(doc)))
@@ -136,11 +139,15 @@ async def _run() -> float:
 
 # -- the call-site freeze -----------------------------------------------------
 
-# module (repo-relative, posix) -> exact number of render_chart_png() calls.
-_KNOWN_RENDER_CALL_SITES = {
-    "backend/domain/graph.py": 2,  # add_chart_node + the resize/update re-render
-    "backend/assets.py": 1,        # the 3x-DPI export route
-}
+# module (repo-relative, posix) -> exact number of direct render_chart_png()/
+# render_chart_svg() calls. Permanently empty as of ADR-013 stage 13.4 - see
+# this module's own docstring. Kept as a dict (not just an assertion of
+# emptiness) so a future legitimate exception, if one is ever deliberately
+# added, has an obvious place to be pinned rather than silently widening
+# the scanner's own matching.
+_KNOWN_RENDER_CALL_SITES = {}
+
+_WATCHED_RENDER_NAMES = {"render_chart_png", "render_chart_svg"}
 
 
 def _count_render_calls(tree: ast.Module) -> int:
@@ -151,7 +158,7 @@ def _count_render_calls(tree: ast.Module) -> int:
             name = func.id if isinstance(func, ast.Name) else (
                 func.attr if isinstance(func, ast.Attribute) else None
             )
-            if name == "render_chart_png":
+            if name in _WATCHED_RENDER_NAMES:
                 count += 1
     return count
 
@@ -167,20 +174,10 @@ def test_inline_chart_render_call_sites_are_frozen():
             found[path.relative_to(REPO_ROOT).as_posix()] = count
 
     assert found == _KNOWN_RENDER_CALL_SITES, (
-        "the set of render_chart_png() call sites under backend/ changed.\n"
+        "a direct (non-asyncio.to_thread) render_chart_png()/render_chart_svg() "
+        "call site appeared under backend/ - this table has been permanently "
+        "empty since ADR-013 stage 13.4 closed the last known offender.\n"
         f"  expected: {_KNOWN_RENDER_CALL_SITES}\n"
         f"  found:    {found}\n"
-        "A NEW site means another synchronous ~125 ms matplotlib render landed on "
-        "the event loop - wrap it in asyncio.to_thread or route it through ADR-013's "
-        "off-loop render work instead of adding it here. A REMOVED site most likely "
-        "means ADR-013 landed - shrink this table and the watchdog's chart_count=0 "
-        "exclusion together, deliberately."
+        "Wrap the new call in asyncio.to_thread instead of adding it here."
     )
-
-
-def test_the_freeze_scan_finds_the_known_offenders_at_all():
-    # Guards the guard: if the scan's glob or name-matching broke, the freeze
-    # above could pass vacuously against an empty `found`. The two known
-    # offender modules must actually exist and parse.
-    for rel in _KNOWN_RENDER_CALL_SITES:
-        assert (REPO_ROOT / rel).is_file(), f"{rel} vanished - update _KNOWN_RENDER_CALL_SITES"
diff --git a/backend/tests/test_agent_layer_qt_free.py b/backend/tests/test_agent_layer_qt_free.py
index a42b298a..e0f0a5ed 100644
--- a/backend/tests/test_agent_layer_qt_free.py
+++ b/backend/tests/test_agent_layer_qt_free.py
@@ -86,18 +86,6 @@ def test_pycoder_domain_imports_qt_free():
     _assert_import_is_qt_free("graphlink_plugins.pycoder.domain")
 
 
-def test_chart_agent_imports_qt_free():
-    # R6.2 prerequisite: graphlink_agents_tools.py (home of ChartDataAgent
-    # before this split) has its own unconditional `from PySide6.QtCore
-    # import QThread, Signal` at module level, needed only by its
-    # ChartWorkerThread/ImageGenerationWorkerThread/ModelPullWorkerThread
-    # classes - importing anything from it, including the Qt-free
-    # ChartDataAgent, pulled Qt in regardless. This is the machine-checked
-    # fact that the real chart-generation path backend/ needs (backend/
-    # agents.py's generateChart dispatch) no longer does.
-    _assert_import_is_qt_free("graphlink_chart_agent")
-
-
 def test_note_agent_imports_qt_free():
     # R8a: graphlink_note_agent.py restores KeyTakeawayAgent/ExplainerAgent,
     # which were lost when R7.6b deleted graphlink_app/ (they lived in
diff --git a/backend/tests/test_agents.py b/backend/tests/test_agents.py
index a752139b..accec857 100644
--- a/backend/tests/test_agents.py
+++ b/backend/tests/test_agents.py
@@ -6139,16 +6139,15 @@ async def run():
     asyncio.run(run())
 
 
-# -- R6.2: start_chart_generation/_call_chart_agent - the independent chart
-# generation slot -------------------------------------------------------------
+# -- ADR-013 stage 13.3: start_chart_generation/_call_chart_agent - the
+# independent chart generation slot -------------------------------------------
 #
 # Mirrors the R5.2 artifact section's own structure: these tests never touch
-# Ollama/api_provider.chat plumbing - start_chart_generation's only real
-# dependency is ChartDataAgent.get_response, monkeypatched directly on the
-# class (agents.py constructs a fresh ChartDataAgent() instance per call, so
-# patching the class method is the seam, mirroring how ArtifactAgent.
-# get_response and WebResearchService.run are patched as class-level seams
-# for their own dispatch paths).
+# Ollama/api_provider.chat plumbing directly - start_chart_generation's only
+# real dependency is backend.structured_output.respond_json, monkeypatched
+# directly on the `respond_json` name backend/agents.py imported (retired
+# ChartDataAgent's own class-method seam - respond_json is a plain function,
+# not a class ChartDataAgent-style instance-per-call agents.py constructs).
 
 
 def _make_chart_env():
@@ -6160,26 +6159,54 @@ def _make_chart_env():
     return bus, notifications, dispatcher
 
 
-def test_call_chart_agent_calls_get_response_and_returns_the_parsed_dict(monkeypatch):
+def test_call_chart_agent_calls_respond_json_and_returns_the_parsed_dict(monkeypatch):
     captured = []
 
-    def fake_get_response(self, text, chart_type):
-        captured.append((text, chart_type))
-        return '{"type": "bar", "title": "T", "labels": ["A"], "values": [1]}'
+    def fake_respond_json(task, messages, schema, **kwargs):
+        captured.append((task, messages, schema, kwargs))
+        return {"type": "bar", "title": "T", "labels": ["A"], "values": [1]}
 
-    monkeypatch.setattr(agents_module.ChartDataAgent, "get_response", fake_get_response)
+    monkeypatch.setattr(agents_module, "respond_json", fake_respond_json)
 
     result = agents_module._call_chart_agent("some source text", "bar")
 
     assert result == {"type": "bar", "title": "T", "labels": ["A"], "values": [1]}
-    assert captured == [("some source text", "bar")]
+    assert len(captured) == 1
+    task, messages, schema, kwargs = captured[0]
+    assert task == config.TASK_CHART
+    assert messages[-1]["content"].endswith("some source text")
+    assert schema == agents_module.CHART_JSON_SCHEMAS["bar"]
+    assert kwargs["schema_name"] == "bar_chart"
+    assert kwargs["cancellation_event"] is None
+
+
+def test_call_chart_agent_forwards_cancel_event_to_respond_json(monkeypatch):
+    # ADR-013 stage 13.3 exit criterion: "cancel not swallowed" - the run's
+    # own cancel_event reaches respond_json's cancellation_event kwarg,
+    # rather than being discarded (the pre-13.3 ChartDataAgent had no
+    # cancellation checkpoint of its own to receive it at all).
+    captured = []
+    monkeypatch.setattr(
+        agents_module, "respond_json",
+        lambda task, messages, schema, **kwargs: (
+            captured.append(kwargs)
+            or {"type": "bar", "title": "T", "labels": ["A"], "values": [1]}
+        ),
+    )
+    event = threading.Event()
 
+    agents_module._call_chart_agent("text", "bar", event)
 
-def test_start_chart_generation_calls_on_success_with_the_parsed_result_then_clears_the_slot(monkeypatch):
-    def fake_get_response(self, text, chart_type):
-        return '{"type": "bar", "title": "T", "labels": ["A", "B"], "values": [1, 2]}'
+    assert captured[0]["cancellation_event"] is event
 
-    monkeypatch.setattr(agents_module.ChartDataAgent, "get_response", fake_get_response)
+
+def test_start_chart_generation_calls_on_success_with_the_parsed_result_then_clears_the_slot(monkeypatch):
+    monkeypatch.setattr(
+        agents_module, "respond_json",
+        lambda task, messages, schema, **kwargs: {
+            "type": "bar", "title": "T", "labels": ["A", "B"], "values": [1, 2],
+        },
+    )
 
     async def run():
         bus, notifications, dispatcher = _make_chart_env()
@@ -6212,12 +6239,12 @@ def test_start_chart_generation_second_call_while_in_flight_is_rejected(monkeypa
     started = threading.Event()
     release = threading.Event()
 
-    def blocking_get_response(self, text, chart_type):
+    def blocking_respond_json(task, messages, schema, **kwargs):
         started.set()
         release.wait(5)
-        return '{"type": "bar", "title": "T", "labels": ["A"], "values": [1]}'
+        return {"type": "bar", "title": "T", "labels": ["A"], "values": [1]}
 
-    monkeypatch.setattr(agents_module.ChartDataAgent, "get_response", blocking_get_response)
+    monkeypatch.setattr(agents_module, "respond_json", blocking_respond_json)
 
     async def run():
         bus, notifications, dispatcher = _make_chart_env()
@@ -6268,15 +6295,15 @@ async def run():
     asyncio.run(run())
 
 
-def test_start_chart_generation_top_level_error_key_calls_on_failure_and_shows_notification_never_calls_on_success(monkeypatch):
-    # Mirrors ChartWorkerThread.run()'s own `if 'error' in parsed: raise
-    # ValueError(...)` check at the one legacy call site - a fully-degraded
-    # ChartDataAgent response (even its own heuristic fallback found
-    # nothing) must never reach on_success.
-    def fake_get_response(self, text, chart_type):
-        return '{"error": "Could not find sufficient data to generate a bar chart."}'
+def test_start_chart_generation_structured_output_error_calls_on_failure_and_shows_notification_never_calls_on_success(monkeypatch):
+    # _call_chart_agent's own contract: respond_json's StructuredOutputError
+    # (the model never produced schema-conforming JSON, even after its own
+    # one repair attempt) becomes a top-level "error" key dict - must never
+    # reach on_success.
+    def failing_respond_json(task, messages, schema, **kwargs):
+        raise agents_module.StructuredOutputError("Could not find sufficient data to generate a bar chart.")
 
-    monkeypatch.setattr(agents_module.ChartDataAgent, "get_response", fake_get_response)
+    monkeypatch.setattr(agents_module, "respond_json", failing_respond_json)
 
     async def run():
         bus, notifications, dispatcher = _make_chart_env()
@@ -6311,11 +6338,11 @@ async def run():
 def test_start_chart_generation_timeout_fires_the_exact_message_and_clears_the_slot(monkeypatch):
     monkeypatch.setattr(agents_module, "WATCHDOG_TIMEOUT_SECONDS", 0.05)
 
-    def slow_get_response(self, text, chart_type):
+    def slow_respond_json(task, messages, schema, **kwargs):
         time.sleep(0.3)
-        return '{"type": "bar", "title": "T", "labels": ["A"], "values": [1]}'
+        return {"type": "bar", "title": "T", "labels": ["A"], "values": [1]}
 
-    monkeypatch.setattr(agents_module.ChartDataAgent, "get_response", slow_get_response)
+    monkeypatch.setattr(agents_module, "respond_json", slow_respond_json)
 
     async def run():
         bus, notifications, dispatcher = _make_chart_env()
@@ -6344,6 +6371,64 @@ async def run():
     asyncio.run(run())
 
 
+def test_start_chart_generation_cancellation_mid_flight_is_silent_no_notification_no_failure_callback(monkeypatch):
+    # ADR-013 stage 13.3 exit criterion: cancel is not swallowed - the run's
+    # own cancel_event now reaches respond_json's cancellation_event kwarg
+    # for real, so a cancelled generation raises
+    # api_provider.RequestCancelledError instead of running to completion
+    # with its result silently discarded (the pre-13.3 gap). run_single_shot's
+    # own cancel-aware exception handling (shared by every kind through that
+    # skeleton) treats this as a clean cancel: no on_failure, no
+    # notification - UNLIKE chat's own cancellation path (a different
+    # dispatch surface entirely, see test_cancellation_mid_flight_fires_
+    # info_notification_and_clears_registry above), which does show an info
+    # toast. That asymmetry is deliberate, not a gap: chat's cancel path
+    # predates run_single_shot's shared skeleton and was never migrated onto
+    # it.
+    started = threading.Event()
+
+    def blocking_then_cancelled(task, messages, schema, cancellation_event=None, **kwargs):
+        started.set()
+        while not cancellation_event.is_set():
+            time.sleep(0.01)
+        raise api_provider.RequestCancelledError("Request cancelled.")
+
+    monkeypatch.setattr(agents_module, "respond_json", blocking_then_cancelled)
+
+    async def run():
+        bus, notifications, dispatcher = _make_chart_env()
+        successes = []
+        failures = []
+
+        await dispatcher.start_chart_generation(
+            bus=bus,
+            notifications_state=notifications,
+            node_id="n1",
+            chart_type="bar",
+            source_text="text",
+            on_success=lambda result: successes.append(result),
+            on_failure=lambda message: failures.append(message),
+        )
+        handle = next(h for h in dispatcher._runs.values() if h.kind == "chart")
+
+        await asyncio.to_thread(started.wait, 5)
+        # AgentDispatcher.cancel() is chat-only (hardcoded kind="chat" - see
+        # its own docstring); chart has no dedicated per-kind cancel entry
+        # point, only cancel_all() reaches it - the same mechanism the
+        # release-on-cancel test above (test_cancel_all_now_cancels_a_
+        # chart_generation...) already exercises for this exact kind.
+        dispatcher.cancel_all()
+
+        await handle.task
+
+        assert successes == []
+        assert failures == []
+        assert busy_count(dispatcher, "chart") == 0
+        assert notifications.visible is False
+
+    asyncio.run(run())
+
+
 def test_chart_request_and_chat_request_run_concurrently_both_busy(monkeypatch):
     """ADR-002 stage 2.3 regression guard: chat and chart now claim into
     the SAME self._runs registry (previously two fully disjoint dicts),
@@ -6363,13 +6448,13 @@ def blocking_chat(task, messages, **kwargs):
         chat_release.wait(5)
         return {"message": {"content": "chat reply"}}
 
-    def blocking_get_response(self, text, chart_type):
+    def blocking_respond_json(task, messages, schema, **kwargs):
         chart_started.set()
         chart_release.wait(5)
-        return '{"type": "bar", "title": "T", "labels": ["A"], "values": [1]}'
+        return {"type": "bar", "title": "T", "labels": ["A"], "values": [1]}
 
     _configure_fake_ollama(monkeypatch, blocking_chat)
-    monkeypatch.setattr(agents_module.ChartDataAgent, "get_response", blocking_get_response)
+    monkeypatch.setattr(agents_module, "respond_json", blocking_respond_json)
 
     async def run():
         bus, notifications, composer_document, dispatcher = _make_dispatch_env()
@@ -7097,12 +7182,12 @@ def test_cancel_all_now_cancels_a_chart_generation_and_frees_its_slot_immediatel
     started = threading.Event()
     release = threading.Event()
 
-    def blocking_get_response(self, text, chart_type):
+    def blocking_respond_json(task, messages, schema, **kwargs):
         started.set()
         release.wait(5)
-        return '{"type": "bar", "title": "T", "labels": ["A"], "values": [1]}'
+        return {"type": "bar", "title": "T", "labels": ["A"], "values": [1]}
 
-    monkeypatch.setattr(agents_module.ChartDataAgent, "get_response", blocking_get_response)
+    monkeypatch.setattr(agents_module, "respond_json", blocking_respond_json)
 
     async def run():
         bus, notifications, dispatcher = _make_chart_env()
diff --git a/backend/tests/test_assets.py b/backend/tests/test_assets.py
index d9438278..b8793935 100644
--- a/backend/tests/test_assets.py
+++ b/backend/tests/test_assets.py
@@ -133,25 +133,49 @@ def test_asset_ids_do_not_collide_across_sessions_with_identical_creation_order(
 _CHART_DATA = {"type": "bar", "title": "Widgets Sold", "labels": ["Q1", "Q2"], "values": [10.0, 20.0]}
 
 
-def test_export_chart_returns_a_real_higher_resolution_png():
+def test_export_chart_returns_a_real_png():
     client = make_client()
     bus = client.app.state.bus
     document = get_session_context(bus.session("default")).canvas_document
     parent = document.add_node(0, 0, "parent")
     chart = document.add_chart_node(0, 0, parent.id, "bar", dict(_CHART_DATA))
 
-    display_bytes, _ = document.get_image_asset(chart.state.chart_asset_id)
     response = client.get(f"/api/assets/chart/{chart.id}/export")
 
     assert response.status_code == 200
     assert response.headers["content-type"] == "image/png"
     assert response.content.startswith(b"\x89PNG\r\n\x1a\n")
-    # A real 3x re-render, not a copy of the cached display asset - export is
-    # a distinct render pass at CHART_EXPORT_DPI_SCALE, so its bytes (and, in
-    # practice, its size at 3x the pixel dimensions) differ from the display
-    # asset's.
-    assert response.content != display_bytes
-    assert len(response.content) > len(display_bytes)
+    assert len(response.content) > 1000
+
+
+def test_export_chart_svg_returns_real_svg_bytes():
+    # ADR-013 stage 13.4's new export option - vector, so no dpi_scale
+    # multiplier applies (see render_chart_svg's own docstring).
+    client = make_client()
+    bus = client.app.state.bus
+    document = get_session_context(bus.session("default")).canvas_document
+    parent = document.add_node(0, 0, "parent")
+    chart = document.add_chart_node(0, 0, parent.id, "bar", dict(_CHART_DATA))
+
+    response = client.get(f"/api/assets/chart/{chart.id}/export?fmt=svg")
+
+    assert response.status_code == 200
+    assert response.headers["content-type"] == "image/svg+xml"
+    assert response.content.startswith(b"<?xml") or response.content.lstrip().startswith(b"<svg")
+    assert response.headers["content-disposition"] == 'attachment; filename="Widgets_Sold.svg"'
+
+
+def test_export_chart_rejects_an_unsupported_format():
+    client = make_client()
+    bus = client.app.state.bus
+    document = get_session_context(bus.session("default")).canvas_document
+    parent = document.add_node(0, 0, "parent")
+    chart = document.add_chart_node(0, 0, parent.id, "bar", dict(_CHART_DATA))
+
+    response = client.get(f"/api/assets/chart/{chart.id}/export?fmt=pdf")
+
+    assert response.status_code == 400
+    assert response.json() == {"error": "unsupported export format"}
 
 
 def test_export_chart_content_disposition_uses_the_sanitized_title():
diff --git a/backend/tests/test_canvas.py b/backend/tests/test_canvas.py
index f24701d0..8c0157ca 100644
--- a/backend/tests/test_canvas.py
+++ b/backend/tests/test_canvas.py
@@ -700,9 +700,10 @@ def test_non_image_node_deletion_does_not_touch_image_assets():
 
 
 def test_deleting_one_node_of_every_kind_does_not_raise():
-    """ADR-002 stage 2.5 regression net: remove_nodes() has generic,
-    kind-agnostic cross-kind scans (the image_asset_id/chart_asset_id
-    eviction above being the first two) that used to rely on every
+    """ADR-002 stage 2.5 regression net: remove_nodes() has a generic,
+    kind-agnostic cross-kind scan (the image_asset_id eviction above -
+    chart nodes carried a second such scan, chart_asset_id, until ADR-013
+    stage 13.4 retired their backend-rendered PNG) that used to rely on every
     SceneNode carrying every kind's fields with a safe default. As fields
     migrate onto per-kind node.state objects one kind at a time, a scan
     that isn't updated in lockstep raises AttributeError the moment ANY
@@ -6688,7 +6689,7 @@ async def run():
 _CHART_DATA = {"type": "bar", "title": "Widgets Sold", "labels": ["Q1", "Q2"], "values": [10.0, 20.0]}
 
 
-def test_add_chart_node_creates_a_real_rendered_chart_connected_to_its_parent():
+def test_add_chart_node_creates_a_chart_connected_to_its_parent():
     doc = SceneDocument()
     parent = doc.add_node(0, 0, "parent")
 
@@ -6698,15 +6699,24 @@ def test_add_chart_node_creates_a_real_rendered_chart_connected_to_its_parent():
     assert chart.state.chart_type == "bar"
     assert chart.state.chart_data == _CHART_DATA
     assert chart.state.chart_source_node_id == parent.id
-    assert chart.state.chart_asset_version == 1
     assert chart.state.chart_width == 680.0 and chart.state.chart_height == 500.0
     assert chart.state.chart_aspect_locked is True
     assert any(e.source == parent.id and e.target == chart.id for e in doc.edges.values())
-    asset = doc.get_image_asset(chart.state.chart_asset_id)
-    assert asset is not None
-    png_bytes, mime_type = asset
-    assert mime_type == "image/png"
-    assert png_bytes.startswith(b"\x89PNG\r\n\x1a\n")
+
+
+def test_add_chart_node_does_not_render_or_touch_image_assets():
+    # ADR-013 stage 13.4: the backend-rendered display PNG went dead once
+    # stage 13.2 shipped the client-side interactive renderer - nothing
+    # fetches it, so add_chart_node no longer produces one (closing one of
+    # the event-loop-blocking offenders backend/tests/perf/
+    # test_loop_watchdog.py used to pin outright, rather than just moving
+    # it off-thread).
+    doc = SceneDocument()
+    parent = doc.add_node(0, 0, "parent")
+
+    doc.add_chart_node(0, 0, parent.id, "bar", dict(_CHART_DATA))
+
+    assert doc.image_assets == {}
 
 
 def test_add_chart_node_title_defaults_to_chart_when_data_has_none():
@@ -6755,19 +6765,15 @@ def test_resize_chart_preserves_aspect_ratio_when_locked():
     assert chart.state.chart_width / chart.state.chart_height == pytest.approx(2.0, rel=1e-6)
 
 
-def test_resize_chart_rerenders_and_bumps_asset_version_overwriting_same_id():
+def test_resize_chart_does_not_render_or_touch_image_assets():
+    # ADR-013 stage 13.4: see add_chart_node's own equivalent test above.
     doc = SceneDocument()
     parent = doc.add_node(0, 0, "parent")
     chart = doc.add_chart_node(0, 0, parent.id, "bar", dict(_CHART_DATA))
-    original_asset_id = chart.state.chart_asset_id
-    original_bytes, _ = doc.get_image_asset(original_asset_id)
 
     doc.resize_chart(chart.id, 900.0, 900.0)
 
-    assert chart.state.chart_asset_id == original_asset_id, "same id, overwritten in place"
-    assert chart.state.chart_asset_version == 2
-    new_bytes, _ = doc.get_image_asset(original_asset_id)
-    assert new_bytes != original_bytes
+    assert doc.image_assets == {}
 
 
 def test_resize_chart_rejects_a_non_chart_node():
@@ -6799,18 +6805,6 @@ def test_toggle_chart_aspect_lock_rejects_a_non_chart_node():
         doc.toggle_chart_aspect_lock(plain.id)
 
 
-def test_removing_a_chart_node_cleans_up_its_asset_from_image_assets():
-    doc = SceneDocument()
-    parent = doc.add_node(0, 0, "parent")
-    chart = doc.add_chart_node(0, 0, parent.id, "bar", dict(_CHART_DATA))
-    asset_id = chart.state.chart_asset_id
-    assert doc.get_image_asset(asset_id) is not None
-
-    doc.remove_nodes([chart.id])
-
-    assert doc.get_image_asset(asset_id) is None
-
-
 def test_scene_payload_exposes_all_chart_fields():
     doc = SceneDocument()
     parent = doc.add_node(0, 0, "parent")
@@ -6822,8 +6816,6 @@ def test_scene_payload_exposes_all_chart_fields():
     assert row["chartType"] == "bar"
     assert row["chartData"] == _CHART_DATA
     assert row["chartError"] == "degraded"
-    assert row["chartAssetId"] == chart.state.chart_asset_id
-    assert row["chartAssetVersion"] == 1
     assert row["chartWidth"] == 680.0
     assert row["chartHeight"] == 500.0
     assert row["chartAspectLocked"] is True
diff --git a/backend/tests/test_chart_data_validation.py b/backend/tests/test_chart_data_validation.py
index 4567c972..011c531c 100644
--- a/backend/tests/test_chart_data_validation.py
+++ b/backend/tests/test_chart_data_validation.py
@@ -1,23 +1,24 @@
-"""canonicalize_chart_data's own validation rules, and ChartDataAgent.
-validate_chart_data's use of that same contract (Qt-removal plan R7.3).
+"""canonicalize_chart_data's own validation rules (Qt-removal plan R7.3).
 
-R7.3 gap: graphlink_chart_data.py and graphlink_chart_agent.py are both
-confirmed Qt-free survivor modules backend/ imports directly (from
-backend/domain/graph.py and backend/agents.py) - live production logic, not legacy-only code. Before this
-file, their own validation/rejection rules had no backend/tests coverage at
-all: backend/tests/test_canvas.py's chart tests only cover the "unsupported
-chart_type string" rejection path (SceneDocument.add_chart_node's own guard),
-never canonicalize_chart_data's own ChartDataError branch for malformed-but-
-otherwise-valid-type data (non-finite numbers, wrong container types, sankey
-cycles) - the exact defensive `except ChartDataError` guard in canvas.py's
-generateChart wrapper this
-file's absence left completely unexercised. Ported from graphlink_app/tests/
-test_chart_nodes.py's own Qt-free test functions (the file's other tests
-construct a real Qt ChatScene and stay behind).
-"""
+R7.3 gap: graphlink_chart_data.py is a confirmed Qt-free survivor module
+backend/ imports directly (from backend/domain/graph.py) - live production
+logic, not legacy-only code. Before this file, its own validation/rejection
+rules had no backend/tests coverage at all: backend/tests/test_canvas.py's
+chart tests only cover the "unsupported chart_type string" rejection path
+(SceneDocument.add_chart_node's own guard), never canonicalize_chart_data's
+own ChartDataError branch for malformed-but-otherwise-valid-type data
+(non-finite numbers, wrong container types, sankey cycles) - the exact
+defensive `except ChartDataError` guard in canvas.py's generateChart wrapper
+this file's absence left completely unexercised. Ported from graphlink_app/
+tests/test_chart_nodes.py's own Qt-free test functions (the file's other
+tests construct a real Qt ChatScene and stay behind).
 
-from graphlink_chart_agent import ChartDataAgent
-from graphlink_chart_data import ChartDataError, canonicalize_chart_data
+ADR-013 stage 13.3 retired ChartDataAgent (graphlink_chart_agent.py) - this
+file's own tests of its validate_chart_data wrapper went with it; the
+canonicalize_chart_data tests below are unaffected (they exercise the
+canonical validator directly, not through any wrapper)."""
+
+from graphlink_chart_data import CHART_SPEC_VERSION, ChartDataError, canonicalize_chart_data
 
 
 def _bar_data(**overrides):
@@ -72,40 +73,9 @@ def test_canonicalize_chart_data_aggregates_duplicate_sankey_flows_and_rejects_c
         assert "cannot contain cycles" in str(exc)
 
 
-def test_chart_data_agent_validate_chart_data_uses_the_canonical_contract():
-    # ChartDataAgent.validate_chart_data (graphlink_chart_agent.py:541-558) is
-    # a thin wrapper: call canonicalize_chart_data, report (True, None) on
-    # success or (False, message) on ChartDataError. This proves the wrapper
-    # actually delegates rather than reimplementing (and drifting from) its
-    # own copy of the validation rules.
-    agent = ChartDataAgent()
-
-    valid, error = agent.validate_chart_data(_bar_data(values="123"), "bar")
-    assert valid is False
-    assert "both be lists" in error
-
-    valid, error = agent.validate_chart_data(
-        {"type": "sankey", "flows": [{"source": "A", "target": "B", "value": float("nan")}]},
-        "sankey",
-    )
-    assert valid is False
-    assert "finite" in error
-
-    valid, error = agent.validate_chart_data(_bar_data(), "bar")
-    assert valid is True
-    assert error is None
-
-
-def test_chart_data_agent_validate_chart_data_canonicalizes_the_dict_in_place():
-    # validate_chart_data's own contract (graphlink_chart_agent.py:555-556):
-    # on success it clears and repopulates the SAME dict with the canonical
-    # shape, rather than returning a new one - callers rely on the caller's
-    # own `data` reference already being canonical afterward.
-    agent = ChartDataAgent()
-    data = _bar_data(values=["1", "2", "3"])  # strings - canonical form is floats
-
-    valid, error = agent.validate_chart_data(data, "bar")
-
-    assert valid is True
-    assert error is None
-    assert data["values"] == [1.0, 2.0, 3.0]
+def test_canonicalize_chart_data_stamps_the_spec_version():
+    # ADR-013 stage 13.1: every canonical shape carries an explicit,
+    # typed version - a future migration reads this rather than sniffing
+    # field presence to know which shape it's looking at.
+    canonical = canonicalize_chart_data(_bar_data(), "bar")
+    assert canonical["version"] == CHART_SPEC_VERSION == 1
diff --git a/backend/tests/test_prompt_registry.py b/backend/tests/test_prompt_registry.py
index 4b1fa822..8d731fa0 100644
--- a/backend/tests/test_prompt_registry.py
+++ b/backend/tests/test_prompt_registry.py
@@ -24,8 +24,11 @@
     {
         "chat-system-core",
         "context-summary",
-        "chart-output-hard-rules",
-        "chart-schema-templates",
+        # ADR-013 stage 13.3: replaces the retired ChartDataAgent's two
+        # entries (chart-output-hard-rules/chart-schema-templates) with the
+        # one stable system prompt respond_json-based chart generation
+        # actually sends now.
+        "chart-generation-system",
         "note-key-takeaway",
         "note-branch-comparison",
         "note-branch-synthesis",
diff --git a/backend/tests/test_providers.py b/backend/tests/test_providers.py
index 8420df27..5814a344 100644
--- a/backend/tests/test_providers.py
+++ b/backend/tests/test_providers.py
@@ -26,6 +26,7 @@
 
 from __future__ import annotations
 
+import json
 import threading
 import time
 
@@ -765,6 +766,81 @@ def fake_stream_sse(url, body, timeout=180, cancel_event=None, api_key=None):
     assert "system" not in rest_calls["body"]
 
 
+def test_anthropic_complete_with_tool_choice_forces_the_tool_and_sends_its_shape(monkeypatch):
+    # ADR-013 stage 13.3: request.tools/tool_choice on the BLOCKING path -
+    # previously only stream() ever built a `tools` kwarg.
+    from backend.providers import AnthropicProvider, CancelToken as CT, ChatRequest as CR, ToolSpec
+
+    captured = {}
+
+    def fake_post(url, body, **kwargs):
+        captured.update(body)
+        return {
+            "content": [
+                {"type": "tool_use", "id": "call_1", "name": "bar_chart", "input": {"labels": ["A"], "values": [1]}}
+            ]
+        }
+
+    monkeypatch.setattr("backend.providers.anthropic_provider._anthropic_post_json", fake_post)
+    provider = AnthropicProvider(
+        client={"provider": "anthropic", "transport": "rest"}, api_key="k", model="claude-opus-5"
+    )
+    request = CR(
+        task=config.TASK_CHART,
+        messages=[{"role": "user", "content": "extract"}],
+        tools=(ToolSpec(name="bar_chart", description="Return the bar_chart result.", input_schema={"type": "object"}),),
+        tool_choice="bar_chart",
+    )
+    result = provider.complete(request, CT())
+
+    assert captured["tools"] == [
+        {"name": "bar_chart", "description": "Return the bar_chart result.", "input_schema": {"type": "object"}}
+    ]
+    assert captured["tool_choice"] == {"type": "tool", "name": "bar_chart"}
+    assert json.loads(result) == {"labels": ["A"], "values": [1]}
+
+
+def test_anthropic_complete_without_tool_choice_still_extracts_visible_text(monkeypatch):
+    # request.tools alone (no tool_choice) keeps the OLD behavior - tools
+    # declared but not forced, text extracted as always. Nothing in this
+    # codebase actually does this on the blocking path today, but the
+    # branch exists and should not regress silently.
+    from backend.providers import AnthropicProvider, CancelToken as CT, ChatRequest as CR
+
+    def fake_post(url, body, **kwargs):
+        assert "tool_choice" not in body
+        return {"content": [{"type": "text", "text": "plain answer"}]}
+
+    monkeypatch.setattr("backend.providers.anthropic_provider._anthropic_post_json", fake_post)
+    provider = AnthropicProvider(
+        client={"provider": "anthropic", "transport": "rest"}, api_key="k", model="claude-opus-5"
+    )
+    result = provider.complete(
+        CR(task=config.TASK_CHAT, messages=[{"role": "user", "content": "hi"}]), CT()
+    )
+    assert result == "plain answer"
+
+
+def test_anthropic_complete_with_tool_choice_raises_when_the_model_ignores_the_force(monkeypatch):
+    from backend.providers import AnthropicProvider, CancelToken as CT, ChatRequest as CR, ToolSpec
+
+    def fake_post(url, body, **kwargs):
+        return {"content": [{"type": "text", "text": "I decided not to call the tool"}]}
+
+    monkeypatch.setattr("backend.providers.anthropic_provider._anthropic_post_json", fake_post)
+    provider = AnthropicProvider(
+        client={"provider": "anthropic", "transport": "rest"}, api_key="k", model="claude-opus-5"
+    )
+    request = CR(
+        task=config.TASK_CHART,
+        messages=[{"role": "user", "content": "extract"}],
+        tools=(ToolSpec(name="bar_chart", description="d", input_schema={"type": "object"}),),
+        tool_choice="bar_chart",
+    )
+    with pytest.raises(RuntimeError, match="bar_chart"):
+        provider.complete(request, CT())
+
+
 def test_gemini_deletes_uploaded_files_even_when_the_generation_call_fails(monkeypatch):
     from backend.providers import CancelToken as CT, ChatRequest as CR, GeminiProvider
 
diff --git a/backend/tests/test_run_node_tool.py b/backend/tests/test_run_node_tool.py
index 07bad642..51af5b79 100644
--- a/backend/tests/test_run_node_tool.py
+++ b/backend/tests/test_run_node_tool.py
@@ -185,7 +185,7 @@ def test_generates_a_chart_node_from_the_source_content(self, monkeypatch):
         source = document.add_chat_node(0, 0, "sales: Q1 10, Q2 20, Q3 15", False)
         monkeypatch.setattr(
             agents_module, "_call_chart_agent",
-            lambda text, chart_type: {"labels": ["Q1", "Q2", "Q3"], "values": [10, 20, 15]},
+            lambda text, chart_type, cancel_event=None: {"labels": ["Q1", "Q2", "Q3"], "values": [10, 20, 15]},
         )
 
         result = run_node(registry, make_ctx(run_id="build-9"), source.id, action="chart", chart_type="bar")
@@ -201,7 +201,7 @@ def test_a_chart_agent_error_key_is_surfaced_as_a_tool_error(self, monkeypatch):
         source = document.add_chat_node(0, 0, "unchartable", False)
         monkeypatch.setattr(
             agents_module, "_call_chart_agent",
-            lambda text, chart_type: {"error": "no numeric series found"},
+            lambda text, chart_type, cancel_event=None: {"error": "no numeric series found"},
         )
 
         result = run_node(registry, make_ctx(), source.id, action="chart", chart_type="bar")
@@ -233,7 +233,7 @@ def test_the_stored_chart_data_is_canonicalized_not_the_raw_model_output(self, m
         document, dispatcher, registry = make_setup()
         source = document.add_chat_node(0, 0, "sales: Q1 10, Q2 20", False)
         raw = {"labels": ["Q1", "Q2"], "values": [10, 20]}
-        monkeypatch.setattr(agents_module, "_call_chart_agent", lambda text, chart_type: dict(raw))
+        monkeypatch.setattr(agents_module, "_call_chart_agent", lambda text, chart_type, cancel_event=None: dict(raw))
 
         result = run_node(registry, make_ctx(), source.id, action="chart", chart_type="bar")
 
@@ -249,7 +249,7 @@ def test_non_finite_chart_values_are_rejected_not_stored(self, monkeypatch):
         source = document.add_chat_node(0, 0, "bad data", False)
         monkeypatch.setattr(
             agents_module, "_call_chart_agent",
-            lambda text, chart_type: {"labels": ["a", "b"], "values": [1, float("nan")]},
+            lambda text, chart_type, cancel_event=None: {"labels": ["a", "b"], "values": [1, float("nan")]},
         )
 
         result = run_node(registry, make_ctx(), source.id, action="chart", chart_type="bar")
diff --git a/backend/tests/test_structured_output.py b/backend/tests/test_structured_output.py
index 18a24b8d..1e33d06a 100644
--- a/backend/tests/test_structured_output.py
+++ b/backend/tests/test_structured_output.py
@@ -113,9 +113,18 @@ def test_native_kwargs_llama_cpp_shape(monkeypatch):
     }
 
 
-def test_native_kwargs_anthropic_is_none_the_fallback_signal(monkeypatch):
+def test_native_kwargs_anthropic_shape(monkeypatch):
+    # ADR-013 stage 13.3: Anthropic's native path is tool-forcing - one
+    # single-purpose tool named after schema_name, whose input_schema is the
+    # caller's schema verbatim, with tool_choice forcing exactly that tool.
+    from backend.providers.base import ToolSpec
+
     state = _snapshot(monkeypatch, USE_API_MODE=True, API_PROVIDER_TYPE=config.API_PROVIDER_ANTHROPIC)
-    assert so._native_kwargs_for_active_provider(state, SCHEMA, "response") is None
+    result = so._native_kwargs_for_active_provider(state, SCHEMA, "response")
+    assert result["tool_choice"] == "response"
+    assert result["tools"] == (
+        ToolSpec(name="response", description=result["tools"][0].description, input_schema=SCHEMA),
+    )
 
 
 # -- full dispatch: the golden, all-5-providers exit criterion ------------
@@ -212,24 +221,34 @@ def complete(self, request, cancel):
     }
 
 
-def test_respond_json_embeds_the_schema_as_a_system_message_for_the_anthropic_fallback(monkeypatch):
+def test_respond_json_forces_a_tool_call_for_anthropics_native_path(monkeypatch):
+    # ADR-013 stage 13.3: Anthropic now has a native path (tool-forcing),
+    # not the schema-guided-system-message fallback - no system message is
+    # prepended, and the forced tool/tool_choice reach the provider's own
+    # request.tools/tool_choice fields.
     _activate_mode(monkeypatch, "anthropic")
     from backend.providers import anthropic_provider as ap
 
     seen_messages = []
+    seen_tools = []
+    seen_tool_choice = []
 
     class Fake(ap.AnthropicProvider):
         def complete(self, request, cancel):
             seen_messages.append(request.messages)
+            seen_tools.append(request.tools)
+            seen_tool_choice.append(request.tool_choice)
             return '{"answer": "42"}'
 
     monkeypatch.setattr(ap, "AnthropicProvider", Fake)
-    so.respond_json(config.TASK_CHAT, [{"role": "user", "content": "hi"}], SCHEMA, schema_name="my_schema")
+    result = so.respond_json(config.TASK_CHAT, [{"role": "user", "content": "hi"}], SCHEMA, schema_name="my_schema")
 
-    first_call_messages = seen_messages[0]
-    assert first_call_messages[0]["role"] == "system"
-    assert "my_schema" in first_call_messages[0]["content"]
-    assert first_call_messages[1] == {"role": "user", "content": "hi"}
+    assert result == {"answer": "42"}
+    assert seen_messages[0] == [{"role": "user", "content": "hi"}]
+    assert seen_tool_choice[0] == "my_schema"
+    assert len(seen_tools[0]) == 1
+    assert seen_tools[0][0].name == "my_schema"
+    assert seen_tools[0][0].input_schema == SCHEMA
 
 
 # -- validate-and-repair tail -----------------------------------------------
diff --git a/backend/tools_graph.py b/backend/tools_graph.py
index bc7907bb..1c861348 100644
--- a/backend/tools_graph.py
+++ b/backend/tools_graph.py
@@ -475,7 +475,7 @@ async def handler(call: ToolCall, ctx: RunContext) -> ToolResult:
                 return await _run_chat(document, dispatcher, node_id, run_id, cancel_event, ctx)
             if action == "research":
                 return await _run_research(document, node, node_id, claim, cancel_event)
-            return await _run_chart(document, node, node_id, run_id, call, _agents)
+            return await _run_chart(document, node, node_id, run_id, call, _agents, cancel_event)
         finally:
             if node.pending_request_id == claim:
                 node.pending_request_id = None
@@ -627,7 +627,7 @@ async def _bridge_cancel() -> None:
             "sources": [s.final_url for s in result.sources][:8],
         }))
 
-    async def _run_chart(document, node, node_id, run_id, call, _agents):
+    async def _run_chart(document, node, node_id, run_id, call, _agents, cancel_event):
         from graphlink_chart_data import ChartDataError, SUPPORTED_CHART_TYPES, canonicalize_chart_data
 
         chart_type = str(call.arguments.get("chart_type") or "bar")
@@ -639,8 +639,15 @@ async def _run_chart(document, node, node_id, run_id, call, _agents):
         source_text = node.content or ""
         if not source_text.strip():
             return _error(f"Node {node_id!r} has no content to chart.")
+        # ADR-013 stage 13.3: cancel_event (ctx.cancel.event, same primitive
+        # every other run_node branch above already threads through) reaches
+        # _call_chart_agent's own respond_json call now - a real
+        # api_provider.RequestCancelledError on Stop, propagating straight
+        # out of asyncio.to_thread and into ToolRegistry.invoke's own
+        # special-casing for that exact type (see _run_web_research's own
+        # comment above for why that type specifically matters).
         parsed = await asyncio.wait_for(
-            asyncio.to_thread(_agents._call_chart_agent, source_text, chart_type),
+            asyncio.to_thread(_agents._call_chart_agent, source_text, chart_type, cancel_event),
             timeout=_agents_const("WATCHDOG_TIMEOUT_SECONDS"),
         )
         if isinstance(parsed, dict) and parsed.get("error"):
diff --git a/contracts/graphlink_scene_payload.py b/contracts/graphlink_scene_payload.py
index 9836c7de..a3460cde 100644
--- a/contracts/graphlink_scene_payload.py
+++ b/contracts/graphlink_scene_payload.py
@@ -99,11 +99,14 @@
 real type and a real runtime validator for them, and the unsafe casts
 can be deleted outright rather than merely narrowed.
 
-`chartType`/`chartData`/`chartError`/`chartAssetId`/`chartAssetVersion`/
-`chartWidth`/`chartHeight`/`chartAspectLocked`/`chartSourceNodeId` are
-the R6.2 chart node's real persisted shape - populated for kind=="chart"
-rows, defaulted for every other kind, same additive rule as every field
-above. `chartData` is the one genuinely hard case: graphlink_chart_data.
+`chartType`/`chartData`/`chartError`/`chartWidth`/`chartHeight`/
+`chartAspectLocked`/`chartSourceNodeId` are the R6.2 chart node's real
+persisted shape - populated for kind=="chart" rows, defaulted for every
+other kind, same additive rule as every field above. `chartAssetId`/
+`chartAssetVersion` (the backend-rendered display PNG's own key/version)
+rode this same shape until ADR-013 stage 13.4 retired them - the client-
+side interactive renderer (stage 13.2) draws straight from chartData, so
+nothing had read them since. `chartData` is the one genuinely hard case: graphlink_chart_data.
 py's canonicalize_chart_data() returns one of THREE different shapes
 depending on chart type (bar/line/pie: labels+values+xAxis+yAxis;
 histogram: values+bins+xAxis+yAxis; sankey: flows only) - a real
@@ -295,6 +298,12 @@ class ChartDataRow:
     the file's existing `gitlinkChangeFingerprint`-style fields already
     accept."""
 
+    # ADR-013 stage 13.1: the spec's own schema version - canonicalize_chart_data
+    # always stamps 1 today. Bumped only when the CANONICAL SHAPE this dataclass
+    # describes changes incompatibly (a new required field, a renamed key) - not
+    # on every feature addition. A future migration reads this to know which
+    # shape it's looking at rather than sniffing field presence.
+    version: int | None = None
     type: Literal["bar", "line", "pie", "histogram", "sankey"] | None = None
     title: str | None = None
     # bar/line/pie
@@ -490,8 +499,6 @@ class SceneNodeRow:
     chartType: str = ""
     chartData: ChartDataRow = field(default_factory=ChartDataRow)
     chartError: str = ""
-    chartAssetId: str = ""
-    chartAssetVersion: int = 0
     chartWidth: float = 680.0
     chartHeight: float = 500.0
     chartAspectLocked: bool = True
diff --git a/graphlink_chart_agent.py b/graphlink_chart_agent.py
deleted file mode 100644
index 87fee395..00000000
--- a/graphlink_chart_agent.py
+++ /dev/null
@@ -1,727 +0,0 @@
-"""Qt-free chart-data-agent core (Qt-removal plan R6.2 prerequisite).
-
-`ChartDataAgent` moved out of graphlink_agents_tools.py: that module's
-unconditional `from PySide6.QtCore import QThread, Signal` (needed only by
-its `ChartWorkerThread`/`ImageGenerationWorkerThread`/`ModelPullWorkerThread`
-classes) meant importing anything from it - including this Qt-free class -
-pulled PySide6 into the process. That made it unimportable from backend/
-despite containing zero Qt code itself, the exact same problem R5.2 fixed for
-Artifact by splitting graphlink_artifact_agent.py out of
-graphlink_agents_artifact.py (see that module's own docstring) - this is the
-same split, applied to the chart agent.
-
-graphlink_agents_tools.py re-exports this class unchanged for its own
-ChartWorkerThread (which constructs one internally) and the legacy Qt call
-site (graphlink_window_actions.py, which imports ChartWorkerThread) - see
-its own import line.
-
-This file must stay Qt-free forever - it exists to be importable from
-backend/, which test_no_qt_anywhere.py holds to zero tolerance.
-"""
-
-import json
-import re
-
-# graphlink_task_config (NOT graphlink_config) - the R4.1 Qt-free split of
-# task/provider/model config. graphlink_config itself chains to
-# PySide6.QtGui/QtWidgets (theming) - importing it here would silently
-# re-taint this module with Qt despite containing no Qt code, defeating the
-# entire point of this extraction (see the module's own docstring above).
-import graphlink_task_config as config
-import api_provider
-from graphlink_chart_data import ChartDataError, canonicalize_chart_data
-
-
-class ChartDataAgent:
-    """
-    An agent that extracts structured data from natural language text to generate JSON
-    payloads suitable for creating various types of charts.
-    """
-    # A dictionary of system prompts, one for each supported chart type.
-    # Each prompt strictly defines the required JSON output format.
-    CHART_PROMPTS = {
-        'bar': """You are a data extraction agent specializing in creating JSON for BAR charts.
-Your task is to analyze the user's text and extract data to fit the following JSON structure precisely.
-
-STRUCTURE:
-{
-    "type": "bar",
-    "title": "<A concise title for the chart>",
-    "labels": ["<label_for_value_1>", "<label_for_value_2>", ...],
-    "values": [<numeric_value_1>, <numeric_value_2>, ...],
-    "xAxis": "<Label for the X-axis>",
-    "yAxis": "<Label for the Y-axis>"
-}
-
-EXAMPLE:
-User Text: "The report shows our Q3 sales figures. We sold 150 units of Product A, 220 of Product B, and 95 of Product C. This is an overview of sales per product."
-Your Output:
-{
-    "type": "bar",
-    "title": "Q3 Sales Figures",
-    "labels": ["Product A", "Product B", "Product C"],
-    "values": [150, 220, 95],
-    "xAxis": "Product",
-    "yAxis": "Units Sold"
-}
-
-RULES:
-1. ONLY output the raw JSON object. Do not include `json`, markdown backticks, or any explanatory text.
-2. The `labels` and `values` arrays must have the same number of elements.
-3. If you cannot find appropriate data in the text, return this exact error object: {"error": "Could not find sufficient data to generate a bar chart."}""",
-
-        'line': """You are a data extraction agent specializing in creating JSON for LINE charts.
-Your task is to analyze the user's text and extract data to fit the following JSON structure precisely.
-
-STRUCTURE:
-{
-    "type": "line",
-    "title": "<A concise title for the chart>",
-    "labels": ["<point_1_label>", "<point_2_label>", ...],
-    "values": [<numeric_value_1>, <numeric_value_2>, ...],
-    "xAxis": "<Label for the X-axis, often time or sequence>",
-    "yAxis": "<Label for the Y-axis>"
-}
-
-EXAMPLE:
-User Text: "Our website traffic over the last week was: Monday 1200 visitors, Tuesday 1350, Wednesday 1600, Thursday 1550, and Friday 1800. Let's visualize weekly visitor trends."
-Your Output:
-{
-    "type": "line",
-    "title": "Weekly Visitor Trends",
-    "labels": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
-    "values": [1200, 1350, 1600, 1550, 1800],
-    "xAxis": "Day of the Week",
-    "yAxis": "Number of Visitors"
-}
-
-RULES:
-1. ONLY output the raw JSON object. Do not include `json`, markdown backticks, or any explanatory text.
-2. The `labels` and `values` arrays must have the same number of elements.
-3. If you cannot find appropriate data in the text, return this exact error object: {"error": "Could not find sufficient data to generate a line chart."}""",
-
-        'pie': """You are a data extraction agent specializing in creating JSON for PIE charts.
-Your task is to analyze the user's text and extract data representing parts of a whole to fit the following JSON structure precisely.
-
-STRUCTURE:
-{
-    "type": "pie",
-    "title": "<A concise title for the chart>",
-    "labels": ["<category_1>", "<category_2>", ...],
-    "values": [<numeric_value_1>, <numeric_value_2>, ...]
-}
-
-EXAMPLE:
-User Text: "Our team's budget allocation is as follows: 50% for salaries, 30% for marketing, 15% for software, and 5% for miscellaneous expenses."
-Your Output:
-{
-    "type": "pie",
-    "title": "Team Budget Allocation",
-    "labels": ["Salaries", "Marketing", "Software", "Miscellaneous"],
-    "values": [50, 30, 15, 5]
-}
-
-RULES:
-1. ONLY output the raw JSON object. Do not include `json`, markdown backticks, or any explanatory text.
-2. The `labels` and `values` arrays must have the same number of elements.
-3. If you cannot find appropriate data in the text, return this exact error object: {"error": "Could not find sufficient data for a pie chart."}""",
-
-        'histogram': """You are a data extraction agent specializing in creating JSON for HISTOGRAMS.
-Your task is to analyze the user's text and extract a dataset of raw numerical values to fit the following JSON structure precisely.
-
-STRUCTURE:
-{
-    "type": "histogram",
-    "title": "<A concise title for the chart>",
-    "values": [<raw_numeric_value_1>, <raw_numeric_value_2>, ...],
-    "bins": 10,
-    "xAxis": "<Label for the values being measured>",
-    "yAxis": "Frequency"
-}
-
-EXAMPLE:
-User Text: "Here are the scores from the recent exam: 88, 92, 75, 81, 95, 88, 79, 83, 85, 91, 77, 89, 88. Let's see the score distribution."
-Your Output:
-{
-    "type": "histogram",
-    "title": "Exam Score Distribution",
-    "values": [88, 92, 75, 81, 95, 88, 79, 83, 85, 91, 77, 89, 88],
-    "bins": 10,
-    "xAxis": "Exam Scores",
-    "yAxis": "Frequency"
-}
-
-RULES:
-1. ONLY output the raw JSON object. Do not include `json`, markdown backticks, or any explanatory text.
-2. The `values` key must contain an array of raw numbers, not aggregated data.
-3. If you cannot find a dataset of raw numbers, return this exact error object: {"error": "Could not find a valid dataset to generate a histogram."}""",
-
-        'sankey': """You are a data extraction agent specializing in creating JSON for SANKEY diagrams.
-Your task is to analyze text describing a flow or distribution between different stages or categories and extract this data to fit the following JSON structure precisely.
-
-STRUCTURE:
-{
-    "type": "sankey",
-    "title": "<A concise title for the flow diagram>",
-    "flows": [
-        {"source": "<source_category>", "target": "<target_category>", "value": <numeric_value>},
-        ...
-    ]
-}
-
-EXAMPLE:
-User Text: "In our energy plant, we start with 1000 units of raw coal. 200 units are lost during transport. Of the remaining 800, 500 units are converted to electricity and 300 are lost as heat. The 500 electricity units are then sent to the grid."
-Your Output:
-{
-    "type": "sankey",
-    "title": "Energy Plant Flow",
-    "flows": [
-        {"source": "Raw Coal", "target": "Transport Loss", "value": 200},
-        {"source": "Raw Coal", "target": "Processing", "value": 800},
-        {"source": "Processing", "target": "Electricity", "value": 500},
-        {"source": "Processing", "target": "Heat Loss", "value": 300},
-        {"source": "Electricity", "target": "Grid", "value": 500}
-    ]
-}
-
-RULES:
-1. ONLY output the raw JSON object. Do not include `json`, markdown backticks, or any explanatory text.
-2. Each item in the `flows` array must have a `source`, `target`, and `value`.
-3. If you cannot identify a flow between distinct categories, return this exact error object: {"error": "Could not extract valid flow data for a Sankey diagram."}"""
-    }
-
-    CHART_SCHEMA_TEMPLATES = {
-        'bar': '{"type":"bar","title":"<title>","labels":["<label_1>","<label_2>"],"values":[1,2],"xAxis":"<x-axis>","yAxis":"<y-axis>"}',
-        'line': '{"type":"line","title":"<title>","labels":["<point_1>","<point_2>"],"values":[1,2],"xAxis":"<x-axis>","yAxis":"<y-axis>"}',
-        'pie': '{"type":"pie","title":"<title>","labels":["<category_1>","<category_2>"],"values":[50,30]}',
-        'histogram': '{"type":"histogram","title":"<title>","values":[1,2,3,4],"bins":10,"xAxis":"<x-axis>","yAxis":"Frequency"}',
-        'sankey': '{"type":"sankey","title":"<title>","flows":[{"source":"<source>","target":"<target>","value":10}]}',
-    }
-
-    CHART_OUTPUT_HARD_RULES = """
-STRICT OUTPUT RULES:
-- Return exactly one top-level raw JSON object and nothing else.
-- Do not wrap the JSON in markdown, prose, or explanations.
-- Do not nest the final payload under keys like chart, data, payload, result, output, response, or content.
-- For bar, line, and pie charts, the final object must include top-level `labels` and `values` arrays.
-- For histogram charts, the final object must include top-level `values`, `bins`, `xAxis`, and `yAxis`.
-- For sankey charts, the final object must include a top-level `flows` array.
-- Do not use alternate keys like items, segments, categories, amounts, records, series, or links in place of the required final schema.
-- If the source text does not support the requested chart, return only an `error` object.
-"""
-
-    def clean_response(self, text):
-        """
-        Cleans the raw string response from the LLM to isolate the JSON object.
-        Models often wrap JSON in markdown backticks or add explanatory text.
-
-        Args:
-            text (str): The raw response string.
-
-        Returns:
-            str: The cleaned string, hopefully containing only a valid JSON object.
-        """
-        text = re.sub(r'<think>[\s\S]*?</think>', '', text, flags=re.IGNORECASE).strip()
-
-        # 1. Try to extract from markdown code blocks first using regex
-        block_match = re.search(r'```(?:json)?\s*([\[{][\s\S]*?[\]}])\s*```', text, re.IGNORECASE)
-        if block_match:
-            return block_match.group(1).strip()
-
-        # 2. Fallback: regex to find the first { and last } robustly
-        fallback_match = re.search(r'([\[{][\s\S]*[\]}])', text)
-        if fallback_match:
-            return fallback_match.group(1).strip()
-
-        return text.strip()
-
-    def _build_chart_system_prompt(self, chart_type):
-        return (
-            "You are Graphlink's chart payload extractor.\n"
-            f"Your job is to read source text and produce a valid {chart_type} chart payload.\n"
-            "Return exactly one raw JSON object and nothing else.\n"
-            "Do not include markdown fences, explanations, commentary, or wrapper keys.\n"
-            "Do not return a nested object like chart/data/result/output/content.\n"
-            f"{self.CHART_OUTPUT_HARD_RULES}\n"
-            f"EXACT FINAL SCHEMA:\n{self.CHART_SCHEMA_TEMPLATES[chart_type]}\n\n"
-            "If the source text does not contain enough information, return only:\n"
-            '{"error":"<brief reason>"}'
-        )
-
-    def _build_chart_user_prompt(self, text, chart_type):
-        return (
-            f"Analyze the source text and extract a {chart_type} chart payload.\n"
-            f"Return only one JSON object that matches the exact final schema.\n\n"
-            f"--- SOURCE TEXT ---\n{text}"
-        )
-
-    def _build_chart_repair_prompt(self, chart_type):
-        return (
-            "You repair malformed chart JSON into a strict Graphlink chart payload.\n"
-            "Return only one raw JSON object matching the exact final schema.\n"
-            "Do not wrap the payload in other keys.\n"
-            "If the malformed payload is unusable, regenerate the chart payload from the source text.\n"
-            "If the source text still does not support the chart, return only an error object.\n\n"
-            f"{self.CHART_OUTPUT_HARD_RULES}\n"
-            f"EXACT FINAL SCHEMA:\n{self.CHART_SCHEMA_TEMPLATES[chart_type]}"
-        )
-
-    def _walk_nested_values(self, obj, max_depth=5):
-        if max_depth < 0:
-            return
-        yield obj
-        if isinstance(obj, dict):
-            for value in obj.values():
-                yield from self._walk_nested_values(value, max_depth - 1)
-        elif isinstance(obj, list):
-            for value in obj:
-                yield from self._walk_nested_values(value, max_depth - 1)
-
-    def _coerce_numeric_value(self, value):
-        try:
-            return float(str(value).replace(',', '').replace('%', '').strip())
-        except (TypeError, ValueError):
-            return None
-
-    def _clean_chart_label(self, label):
-        cleaned = re.sub(r'\s+', ' ', str(label)).strip(" -:;,.")
-        cleaned = re.sub(r'^(for|of|to|in|on)\s+', '', cleaned, flags=re.IGNORECASE)
-        cleaned = re.sub(r'\b(units?|users?|visitors?|people|items|tasks|hours?|days?|weeks?|months?|percent|percentage|%)\b\s*$', '', cleaned, flags=re.IGNORECASE)
-        return cleaned.strip(" -:;,.")
-
-    def _extract_pairs_from_text(self, text):
-        clauses = [chunk.strip() for chunk in re.split(r'[\n;,]+', text) if chunk.strip()]
-        pairs = []
-
-        label_before_patterns = [
-            re.compile(r'^(?P<label>[A-Za-z][A-Za-z0-9/&()\- ]{1,60}?)\s*(?:[:=\-]|(?:is|was|were|at))?\s*(?P<value>-?\d[\d,]*(?:\.\d+)?)\s*%?(?:\b.*)?$', re.IGNORECASE),
-            re.compile(r'^(?P<label>[A-Za-z][A-Za-z0-9/&()\- ]{1,60}?)\s+(?P<value>-?\d[\d,]*(?:\.\d+)?)\s*%?(?:\b.*)?$', re.IGNORECASE),
-        ]
-        value_before_patterns = [
-            re.compile(r'^(?P<value>-?\d[\d,]*(?:\.\d+)?)\s*%?\s*(?:for|of|to|in|on)?\s*(?P<label>[A-Za-z][A-Za-z0-9/&()\- ]{1,60})$', re.IGNORECASE),
-        ]
-
-        for clause in clauses:
-            match = None
-            for pattern in label_before_patterns:
-                match = pattern.search(clause)
-                if match:
-                    label = self._clean_chart_label(match.group('label'))
-                    value = self._coerce_numeric_value(match.group('value'))
-                    if label and value is not None:
-                        pairs.append((label, value))
-                    break
-            if match:
-                continue
-
-            for pattern in value_before_patterns:
-                match = pattern.search(clause)
-                if match:
-                    label = self._clean_chart_label(match.group('label'))
-                    value = self._coerce_numeric_value(match.group('value'))
-                    if label and value is not None:
-                        pairs.append((label, value))
-                    break
-
-        deduped = []
-        seen = set()
-        for label, value in pairs:
-            key = (label.lower(), value)
-            if key in seen:
-                continue
-            seen.add(key)
-            deduped.append((label, value))
-        return deduped
-
-    def _extract_numbers_from_text(self, text):
-        values = []
-        for match in re.finditer(r'-?\d[\d,]*(?:\.\d+)?', text):
-            number = self._coerce_numeric_value(match.group(0))
-            if number is not None:
-                values.append(number)
-        return values
-
-    def heuristic_chart_data(self, text, chart_type):
-        source_text = str(text or '').strip()
-        if not source_text:
-            return None
-
-        title = source_text.splitlines()[0].strip()[:80] or f"{chart_type.title()} Chart"
-        pairs = self._extract_pairs_from_text(source_text)
-
-        if chart_type in ['bar', 'line', 'pie'] and len(pairs) >= 2:
-            labels = [label for label, _ in pairs]
-            values = [value for _, value in pairs]
-            payload = {
-                'type': chart_type,
-                'title': title,
-                'labels': labels,
-                'values': values,
-            }
-            if chart_type == 'bar':
-                payload['xAxis'] = 'Category'
-                payload['yAxis'] = 'Value'
-            elif chart_type == 'line':
-                payload['xAxis'] = 'Sequence'
-                payload['yAxis'] = 'Value'
-            return payload
-
-        if chart_type == 'histogram':
-            values = self._extract_numbers_from_text(source_text)
-            if len(values) >= 4:
-                return {
-                    'type': 'histogram',
-                    'title': title,
-                    'values': values,
-                    'bins': min(12, max(4, len(values) // 2)),
-                    'xAxis': 'Value',
-                    'yAxis': 'Frequency',
-                }
-
-        if chart_type == 'sankey':
-            flow_pattern = re.compile(
-                r'(?P<source>[A-Za-z][A-Za-z0-9/&()\- ]{1,40})\s*(?:->|to)\s*(?P<target>[A-Za-z][A-Za-z0-9/&()\- ]{1,40})\s*[:=-]?\s*(?P<value>\d[\d,]*(?:\.\d+)?)',
-                re.IGNORECASE,
-            )
-            flows = []
-            for match in flow_pattern.finditer(source_text):
-                value = self._coerce_numeric_value(match.group('value'))
-                if value is None:
-                    continue
-                flows.append({
-                    'source': self._clean_chart_label(match.group('source')),
-                    'target': self._clean_chart_label(match.group('target')),
-                    'value': value,
-                })
-            if flows:
-                return {
-                    'type': 'sankey',
-                    'title': title,
-                    'flows': flows,
-                }
-
-        return None
-
-    def _extract_labeled_series(self, data):
-        reserved = {
-            'type', 'title', 'labels', 'values', 'xAxis', 'yAxis', 'bins', 'error',
-            'chart', 'data', 'items', 'segments', 'points', 'records', 'entries',
-            'series', 'flows', 'links', 'payload', 'result', 'output', 'response',
-            'content'
-        }
-
-        for candidate in self._walk_nested_values(data):
-            if isinstance(candidate, dict):
-                dict_values = list(candidate.values())
-                if dict_values and all(not isinstance(value, (dict, list)) for value in dict_values):
-                    scalar_pairs = []
-                    for key, value in candidate.items():
-                        if key in reserved:
-                            continue
-                        try:
-                            numeric_value = float(value)
-                        except (TypeError, ValueError):
-                            continue
-                        scalar_pairs.append((key, numeric_value))
-                    if len(scalar_pairs) >= 2:
-                        return [label for label, _ in scalar_pairs], [value for _, value in scalar_pairs]
-
-                labels = None
-                values = None
-                for key in ['labels', 'categories', 'names', 'x', 'xValues']:
-                    nested = candidate.get(key)
-                    if isinstance(nested, list) and nested:
-                        labels = nested
-                        break
-                for key in ['values', 'amounts', 'counts', 'y', 'yValues', 'totals']:
-                    nested = candidate.get(key)
-                    if isinstance(nested, list) and nested:
-                        values = nested
-                        break
-                if labels and values:
-                    return labels, values
-
-            if isinstance(candidate, list) and candidate and all(isinstance(item, dict) for item in candidate):
-                extracted_labels = []
-                extracted_values = []
-                for item in candidate:
-                    label = next((item.get(k) for k in ['label', 'name', 'category', 'segment', 'x', 'title'] if item.get(k) is not None), None)
-                    value = next((item.get(k) for k in ['value', 'amount', 'count', 'y', 'total', 'percent'] if item.get(k) is not None), None)
-                    if label is None or value is None:
-                        extracted_labels = []
-                        extracted_values = []
-                        break
-                    extracted_labels.append(label)
-                    extracted_values.append(value)
-                if extracted_labels and extracted_values:
-                    return extracted_labels, extracted_values
-        return None, None
-
-    def _extract_numeric_values(self, data):
-        for candidate in self._walk_nested_values(data):
-            if isinstance(candidate, list) and candidate:
-                if all(not isinstance(item, dict) for item in candidate):
-                    return candidate
-                if all(isinstance(item, dict) for item in candidate):
-                    extracted = []
-                    for item in candidate:
-                        value = next((item.get(k) for k in ['value', 'amount', 'count', 'score', 'number', 'y'] if item.get(k) is not None), None)
-                        if value is None:
-                            extracted = []
-                            break
-                        extracted.append(value)
-                    if extracted:
-                        return extracted
-        return None
-
-    def _extract_flows(self, data):
-        for candidate in self._walk_nested_values(data):
-            if not isinstance(candidate, list) or not candidate or not all(isinstance(item, dict) for item in candidate):
-                continue
-            flows = []
-            for item in candidate:
-                source = next((item.get(k) for k in ['source', 'from', 'start'] if item.get(k) is not None), None)
-                target = next((item.get(k) for k in ['target', 'to', 'end'] if item.get(k) is not None), None)
-                value = next((item.get(k) for k in ['value', 'amount', 'count', 'weight'] if item.get(k) is not None), None)
-                if source is None or target is None or value is None:
-                    flows = []
-                    break
-                flows.append({'source': source, 'target': target, 'value': value})
-            if flows:
-                return flows
-        return None
-
-    def normalize_chart_data(self, data, chart_type):
-        if not isinstance(data, dict):
-            return data
-
-        normalized = dict(data)
-        nested_keys = [
-            'chart', 'payload', 'result', 'output', 'response', 'content',
-            chart_type, f'{chart_type}Chart', f'{chart_type}_chart'
-        ]
-        for key in nested_keys:
-            nested_chart = normalized.get(key)
-            if isinstance(nested_chart, dict):
-                for nested_key, value in nested_chart.items():
-                    normalized.setdefault(nested_key, value)
-
-        nested_dict_values = [value for value in normalized.values() if isinstance(value, dict)]
-        if len(nested_dict_values) == 1:
-            for nested_key, value in nested_dict_values[0].items():
-                normalized.setdefault(nested_key, value)
-
-        normalized['type'] = str(normalized.get('type') or chart_type).strip().lower() or chart_type
-        normalized['title'] = str(normalized.get('title') or f"{chart_type.title()} Chart").strip()
-
-        if chart_type in ['bar', 'line', 'pie']:
-            labels, values = self._extract_labeled_series(normalized)
-            if labels is not None and values is not None:
-                normalized['labels'] = labels
-                normalized['values'] = values
-            if chart_type in ['bar', 'line']:
-                normalized.setdefault('xAxis', 'Category' if chart_type == 'bar' else 'Sequence')
-                normalized.setdefault('yAxis', 'Value')
-
-        elif chart_type == 'histogram':
-            values = self._extract_numeric_values(normalized)
-            if values is not None:
-                normalized['values'] = values
-            normalized.setdefault('bins', 10)
-            normalized.setdefault('xAxis', 'Value')
-            normalized.setdefault('yAxis', 'Frequency')
-
-        elif chart_type == 'sankey':
-            flows = self._extract_flows(normalized)
-            if flows is not None:
-                normalized['flows'] = flows
-
-        return normalized
-
-    def validate_chart_data(self, data, chart_type):
-        """
-        Validates the structure and data types of the parsed JSON object.
-
-        Args:
-            data (dict): The parsed JSON data from the LLM.
-            chart_type (str): The expected type of chart.
-
-        Returns:
-            tuple[bool, str or None]: A tuple containing a boolean success flag
-                                      and an error message if validation fails.
-        """
-        try:
-            canonical = canonicalize_chart_data(data, chart_type)
-            data.clear()
-            data.update(canonical)
-            return True, None
-        except (ChartDataError, TypeError, ValueError) as exc:
-            return False, str(exc)
-
-    def process_sankey_data(self, raw_data):
-        """
-        Converts the LLM's 'flows' format for Sankey diagrams into the format
-        required by the Matplotlib Sankey library (nodes and links with indices).
-
-        Args:
-            raw_data (list[dict]): The list of flow dictionaries from the LLM.
-
-        Returns:
-            dict: A dictionary containing 'nodes' and 'links' lists for plotting.
-
-        Raises:
-            ValueError: If the raw data cannot be processed.
-        """
-        try:
-            # Extract unique node names from all sources and targets.
-            nodes = []
-            node_indices = {}
-
-            for flow in raw_data:
-                for node_name in [str(flow['source']), str(flow['target'])]:
-                    if node_name not in node_indices:
-                        node_indices[node_name] = len(nodes)
-                        nodes.append({"name": node_name})
-
-            # Create links using the integer indices of the nodes.
-            links = [
-                {
-                    "source": node_indices[str(flow['source'])],
-                    "target": node_indices[str(flow['target'])],
-                    "value": flow['value']
-                }
-                for flow in raw_data
-            ]
-
-            return {
-                "nodes": nodes,
-                "links": links
-            }
-        except Exception as e:
-            raise ValueError(f"Error processing Sankey data: {str(e)}")
-
-    def repair_chart_data(self, source_text, raw_payload, chart_type, kwargs):
-        messages = [
-            {'role': 'system', 'content': self._build_chart_repair_prompt(chart_type)},
-            {
-                'role': 'user',
-                'content': (
-                    f"Chart type: {chart_type}\n\n"
-                    f"--- SOURCE TEXT ---\n{source_text}\n\n"
-                    f"--- MALFORMED OR NON-CANONICAL PAYLOAD ---\n{raw_payload}\n\n"
-                    "Rewrite this into the exact final schema."
-                ),
-            },
-        ]
-
-        response = api_provider.chat(task=config.TASK_CHART, messages=messages, **kwargs)
-        repaired_response = self.clean_response(response['message']['content'])
-        repaired_data = json.loads(repaired_response)
-        return self.normalize_chart_data(repaired_data, chart_type)
-
-    def _format_chart_debug_error(self, error_message, raw_payload):
-        excerpt = " ".join(str(raw_payload).split())
-        excerpt = excerpt[:500]
-        return f"{error_message}\nRaw payload excerpt: {excerpt}"
-
-    def get_response(self, text, chart_type):
-        """
-        Extracts chart data from a given text for a specific chart type.
-
-        Args:
-            text (str): The natural language text containing data.
-            chart_type (str): The type of chart to generate (e.g., 'bar', 'line').
-
-        Returns:
-            str: A JSON string of the chart data, or a JSON string with an error message.
-        """
-        if chart_type not in self.CHART_PROMPTS:
-            return json.dumps({"error": f"Invalid chart type specified: {chart_type}"})
-
-        system_prompt = self._build_chart_system_prompt(chart_type)
-
-        # Determine appropriate JSON-mode kwargs based on the active provider
-        kwargs = {}
-        if not api_provider.USE_API_MODE:
-            kwargs['format'] = 'json'
-        elif api_provider.API_PROVIDER_TYPE == config.API_PROVIDER_OPENAI:
-            kwargs['response_format'] = {"type": "json_object"}
-        elif api_provider.API_PROVIDER_TYPE == config.API_PROVIDER_GEMINI:
-            kwargs['response_mime_type'] = "application/json"
-
-        try:
-            messages = [
-                {'role': 'system', 'content': system_prompt},
-                {'role': 'user', 'content': self._build_chart_user_prompt(text, chart_type)}
-            ]
-
-            response = api_provider.chat(task=config.TASK_CHART, messages=messages, **kwargs)
-            cleaned_response = self.clean_response(response['message']['content'])
-
-            try:
-                data = json.loads(cleaned_response)
-            except json.JSONDecodeError:
-                try:
-                    data = self.repair_chart_data(text, response['message']['content'], chart_type, kwargs)
-                except Exception:
-                    heuristic_data = self.heuristic_chart_data(text, chart_type)
-                    if heuristic_data:
-                        data = heuristic_data
-                    else:
-                        return json.dumps({"error": "Invalid JSON response from model"})
-
-            if isinstance(data, dict) and 'error' in data:
-                heuristic_data = self.heuristic_chart_data(text, chart_type)
-                if heuristic_data:
-                    data = heuristic_data
-                else:
-                    return json.dumps({"error": str(data['error'])})
-
-            data = self.normalize_chart_data(data, chart_type)
-
-            is_valid, error_message = self.validate_chart_data(data, chart_type)
-            if not is_valid:
-                try:
-                    repaired_data = self.repair_chart_data(text, cleaned_response, chart_type, kwargs)
-                    if isinstance(repaired_data, dict) and 'error' in repaired_data:
-                        heuristic_data = self.heuristic_chart_data(text, chart_type)
-                        if heuristic_data:
-                            data = heuristic_data
-                            repaired_data = None
-                        else:
-                            return json.dumps({"error": str(repaired_data['error'])})
-                    if repaired_data is None:
-                        pass
-                    else:
-                        is_valid, error_message = self.validate_chart_data(repaired_data, chart_type)
-                        if not is_valid:
-                            heuristic_data = self.heuristic_chart_data(text, chart_type)
-                            if heuristic_data:
-                                data = heuristic_data
-                            else:
-                                return json.dumps({"error": self._format_chart_debug_error(error_message, cleaned_response)})
-                        else:
-                            data = repaired_data
-                except Exception:
-                    heuristic_data = self.heuristic_chart_data(text, chart_type)
-                    if heuristic_data:
-                        data = heuristic_data
-                    else:
-                        return json.dumps({"error": self._format_chart_debug_error(error_message, cleaned_response)})
-
-            data = self.normalize_chart_data(data, chart_type)
-            is_valid, error_message = self.validate_chart_data(data, chart_type)
-            if not is_valid:
-                return json.dumps({"error": self._format_chart_debug_error(error_message, cleaned_response)})
-
-            # Special processing for Sankey data format.
-            if chart_type == 'sankey' and 'flows' in data:
-                try:
-                    data['data'] = self.process_sankey_data(data['flows'])
-                except ValueError as e:
-                    return json.dumps({"error": str(e)})
-
-            return json.dumps(data)
-
-        except Exception as e:
-            return json.dumps({"error": f"Data extraction failed: {str(e)}"})
diff --git a/graphlink_chart_data.py b/graphlink_chart_data.py
index 6a29c549..da713ac1 100644
--- a/graphlink_chart_data.py
+++ b/graphlink_chart_data.py
@@ -11,11 +11,129 @@
 MAX_LABEL_LENGTH = 160
 MAX_TITLE_LENGTH = 200
 
+# ADR-013 stage 13.1: the canonical shape's own schema version - every spec
+# canonicalize_chart_data produces today is version 1. Bumped only when this
+# function's OUTPUT shape changes incompatibly (a renamed/removed key, a new
+# required field) - not on every chart-type addition, which stays additive.
+CHART_SPEC_VERSION = 1
+
 
 class ChartDataError(ValueError):
     """Raised when a chart payload cannot be converted to the canonical schema."""
 
 
+# -- ADR-013 stage 13.3: chart generation via respond_json --------------------
+#
+# The JSON Schema respond_json (backend/structured_output.py) constrains a
+# model's chart-generation output to, and the system/user messages that ask
+# for it - shared by backend/agents.py's _call_chart_agent (the real
+# generation path) and backend/evals/runner.py's chart eval fixture (so the
+# eval drives the SAME shape actually shipping, not a stand-in). Kept here
+# rather than in backend/ since chart-shape knowledge already lives in this
+# module (SUPPORTED_CHART_TYPES/canonicalize_chart_data) and both callers
+# need it Qt-free. These schemas are deliberately looser than
+# canonicalize_chart_data's own rules (no length caps, no cross-field checks
+# like "pie values must be positive") - canonicalize_chart_data remains the
+# single source of truth for what's actually ACCEPTED; this schema only
+# exists to steer generation and give the provider's own native constraint
+# something concrete to enforce, catching the most common shape mistakes
+# (wrong container type, missing key) before canonicalize_chart_data's own,
+# stricter pass.
+_SERIES_PROPERTIES = {
+    "title": {"type": "string"},
+    "labels": {"type": "array", "items": {"type": "string"}},
+    "values": {"type": "array", "items": {"type": "number"}},
+    "xAxis": {"type": "string"},
+    "yAxis": {"type": "string"},
+}
+
+CHART_JSON_SCHEMAS: dict[str, dict] = {
+    "bar": {
+        "type": "object",
+        "properties": {"type": {"type": "string", "enum": ["bar"]}, **_SERIES_PROPERTIES},
+        "required": ["type", "labels", "values"],
+    },
+    "line": {
+        "type": "object",
+        "properties": {"type": {"type": "string", "enum": ["line"]}, **_SERIES_PROPERTIES},
+        "required": ["type", "labels", "values"],
+    },
+    "pie": {
+        "type": "object",
+        "properties": {
+            "type": {"type": "string", "enum": ["pie"]},
+            "title": {"type": "string"},
+            "labels": {"type": "array", "items": {"type": "string"}},
+            "values": {"type": "array", "items": {"type": "number"}},
+        },
+        "required": ["type", "labels", "values"],
+    },
+    "histogram": {
+        "type": "object",
+        "properties": {
+            "type": {"type": "string", "enum": ["histogram"]},
+            "title": {"type": "string"},
+            "values": {"type": "array", "items": {"type": "number"}},
+            "bins": {"type": "integer"},
+            "xAxis": {"type": "string"},
+            "yAxis": {"type": "string"},
+        },
+        "required": ["type", "values"],
+    },
+    "sankey": {
+        "type": "object",
+        "properties": {
+            "type": {"type": "string", "enum": ["sankey"]},
+            "title": {"type": "string"},
+            "flows": {
+                "type": "array",
+                "items": {
+                    "type": "object",
+                    "properties": {
+                        "source": {"type": "string"},
+                        "target": {"type": "string"},
+                        "value": {"type": "number"},
+                    },
+                    "required": ["source", "target", "value"],
+                },
+            },
+        },
+        "required": ["type", "flows"],
+    },
+}
+
+
+# Registered in graphlink_prompts.py's prompt registry ("chart-generation-
+# system") as its own STABLE constant rather than embedded inline in
+# chart_generation_messages below - that registry's own convention is
+# "only stable template text is registered, per-request interpolation
+# (chart type, source text) stays at the call site" (see
+# BASE_SYSTEM_PROMPT/CONTEXT_SUMMARY_SYSTEM_PROMPT's identical shape). The
+# chart TYPE lives in the user message instead of being f-string-baked into
+# this text, specifically so this string never varies per call.
+CHART_GENERATION_SYSTEM_PROMPT = (
+    "You are Graphlink's chart data extractor. Read the source text and "
+    "produce a chart payload as a single JSON object matching the required "
+    "schema exactly for the requested chart type. Use only data present in "
+    "the source text - never invent numbers. Keep the title concise."
+)
+
+
+def chart_generation_messages(source_text: str, chart_type: str) -> list[dict]:
+    """The system+user pair respond_json sends to extract `chart_type` chart
+    data from `source_text`. A plain data function (no api_provider/
+    respond_json import here - see this section's own module-level comment
+    on why this stays in graphlink_chart_data.py) so both real callers build
+    the identical request rather than maintaining their own copies."""
+    return [
+        {"role": "system", "content": CHART_GENERATION_SYSTEM_PROMPT},
+        {
+            "role": "user",
+            "content": f"Chart type: {chart_type}\n\n--- SOURCE TEXT ---\n{source_text}",
+        },
+    ]
+
+
 def _finite_number(value, field_name):
     if isinstance(value, bool):
         raise ChartDataError(f"{field_name} must be a finite number")
@@ -112,6 +230,7 @@ def canonicalize_chart_data(data, chart_type=None):
         raise ChartDataError(f"Chart payload type must be {expected_type}")
 
     result = {
+        "version": CHART_SPEC_VERSION,
         "type": expected_type,
         "title": _clean_text(
             data.get("title"),
diff --git a/graphlink_chart_rendering.py b/graphlink_chart_rendering.py
index 2464191c..e9186c43 100644
--- a/graphlink_chart_rendering.py
+++ b/graphlink_chart_rendering.py
@@ -660,29 +660,24 @@ def _render_chart_content(figure, chart_type: str, chart_data: dict[str, Any], t
         figure.tight_layout(pad=1.25)
 
 
-def render_chart_png(chart_type: str, chart_data: dict[str, Any], width: float, height: float, dpi_scale: float = 1.0) -> bytes:
-    """Render one chart to PNG bytes. Port of ChartItem.generate_chart +
-    _render_chart_to_image + _figure_to_image, minus the render cache (no
-    long-lived widget here to cache against) and minus the card chrome (see
-    module docstring).
-
-    `width`/`height` are the desired on-screen box size in CSS px (the
-    node's chart_width/chart_height); `dpi_scale` multiplies the base render
-    density (1.0 for normal display/resize, 3.0 for the export endpoint -
-    mirrors legacy's own EXPORT_SCALE).
-
-    Never raises for a malformed `chart_data` under a KNOWN chart_type -
-    canonicalize_chart_data's ChartDataError (or any other exception a
-    renderer hits) is caught and swapped for a placeholder "Chart rendering
-    issue" image instead, exactly as ChartItem.generate_chart never crashes
-    on bad data. DOES raise ValueError for a `chart_type` outside
-    SUPPORTED_CHART_TYPES - there is no such thing as a placeholder chart
-    TYPE, only placeholder chart DATA."""
+def _build_chart_figure(chart_type: str, chart_data: dict[str, Any], width: float, height: float, dpi: float):
+    """Shared figure-construction path for both render_chart_png and
+    render_chart_svg below (ADR-013 stage 13.4) - everything through
+    `canvas.draw()` is format-agnostic; only the final `figure.savefig(...)`
+    call differs (raster vs vector). Returns `(figure, theme)` - the theme
+    carries `surface`, the facecolor every caller's own savefig needs.
+
+    Raises ValueError for a `chart_type` outside SUPPORTED_CHART_TYPES -
+    there is no such thing as a placeholder chart TYPE, only placeholder
+    chart DATA (a malformed `chart_data` under a KNOWN type never raises;
+    canonicalize_chart_data's ChartDataError, or any other exception a
+    renderer hits, is caught and swapped for a placeholder "Chart rendering
+    issue" image instead, exactly as legacy ChartItem.generate_chart never
+    crashed on bad data)."""
     normalized_type = str(chart_type or "").strip().lower()
     if normalized_type not in SUPPORTED_CHART_TYPES:
         raise ValueError(f"Unsupported chart type: {normalized_type or 'unknown'}")
 
-    dpi = BASE_DPI * max(1.0, float(dpi_scale))
     fig_width_in = max(MIN_FIGURE_WIDTH_PX, float(width)) / CSS_PX_PER_INCH
     fig_height_in = max(MIN_FIGURE_HEIGHT_PX, float(height)) / CSS_PX_PER_INCH
 
@@ -697,6 +692,35 @@ def render_chart_png(chart_type: str, chart_data: dict[str, Any], width: float,
         _render_error_image(figure, theme, str(exc))
 
     canvas.draw()
+    return figure, theme
+
+
+def render_chart_png(chart_type: str, chart_data: dict[str, Any], width: float, height: float, dpi_scale: float = 1.0) -> bytes:
+    """Render one chart to PNG bytes. Port of ChartItem.generate_chart +
+    _render_chart_to_image + _figure_to_image, minus the render cache (no
+    long-lived widget here to cache against) and minus the card chrome (see
+    module docstring).
+
+    `width`/`height` are the desired on-screen box size in CSS px; `dpi_scale`
+    multiplies the base render density (3.0 for the export endpoint - mirrors
+    legacy's own EXPORT_SCALE; ADR-013 stage 13.4 retired every OTHER caller,
+    see this module's own docstring)."""
+    dpi = BASE_DPI * max(1.0, float(dpi_scale))
+    figure, theme = _build_chart_figure(chart_type, chart_data, width, height, dpi)
     buffer = BytesIO()
     figure.savefig(buffer, format="png", dpi=dpi, facecolor=theme["surface"])
     return buffer.getvalue()
+
+
+def render_chart_svg(chart_type: str, chart_data: dict[str, Any], width: float, height: float) -> bytes:
+    """Render one chart to SVG bytes (ADR-013 stage 13.4's new export
+    option) - same figure/content pipeline as render_chart_png, but vector
+    output, so there is no dpi_scale parameter: SVG is resolution-
+    independent, unlike a PNG's fixed pixel grid. BASE_DPI still sets the
+    figure's internal layout density (font/line sizing in figure-relative
+    units), matching the PNG export's own proportions rather than picking
+    an unrelated second constant."""
+    figure, theme = _build_chart_figure(chart_type, chart_data, width, height, BASE_DPI)
+    buffer = BytesIO()
+    figure.savefig(buffer, format="svg", facecolor=theme["surface"])
+    return buffer.getvalue()
diff --git a/graphlink_prompts.py b/graphlink_prompts.py
index 9ccb427d..866ed8e4 100644
--- a/graphlink_prompts.py
+++ b/graphlink_prompts.py
@@ -98,19 +98,16 @@ def _resolve_context_summary() -> str:
     return CONTEXT_SUMMARY_SYSTEM_PROMPT
 
 
-def _resolve_chart_output_hard_rules() -> str:
-    from graphlink_chart_agent import ChartDataAgent
-    return ChartDataAgent.CHART_OUTPUT_HARD_RULES
-
-
-def _resolve_chart_schema_templates() -> str:
-    # A dict of per-chart-type schema strings; canonicalized as sorted
-    # "name: template" lines so the registry hashes ONE deterministic text.
-    from graphlink_chart_agent import ChartDataAgent
-    return "\n".join(
-        f"{name}: {template}"
-        for name, template in sorted(ChartDataAgent.CHART_SCHEMA_TEMPLATES.items())
-    )
+def _resolve_chart_generation_system() -> str:
+    # ADR-013 stage 13.3: replaces the retired ChartDataAgent's two
+    # registry entries (chart-output-hard-rules/chart-schema-templates -
+    # five hand-maintained per-type prompt strings + a hard-rules block)
+    # with the ONE stable system prompt respond_json-based chart generation
+    # actually sends now; the per-type schema itself is real JSON Schema
+    # (graphlink_chart_data.CHART_JSON_SCHEMAS), not prompt text, so it has
+    # no place in a PROMPT registry at all.
+    from graphlink_chart_data import CHART_GENERATION_SYSTEM_PROMPT
+    return CHART_GENERATION_SYSTEM_PROMPT
 
 
 def _resolve_note_key_takeaway() -> str:
@@ -206,8 +203,7 @@ def _resolve_reasoning_hint_high() -> str:
 _PROMPT_RESOLVERS = {
     "chat-system-core": _resolve_chat_system_core,
     "context-summary": _resolve_context_summary,
-    "chart-output-hard-rules": _resolve_chart_output_hard_rules,
-    "chart-schema-templates": _resolve_chart_schema_templates,
+    "chart-generation-system": _resolve_chart_generation_system,
     "note-key-takeaway": _resolve_note_key_takeaway,
     "note-branch-comparison": _resolve_note_branch_comparison,
     "note-branch-synthesis": _resolve_note_branch_synthesis,
@@ -250,8 +246,7 @@ def resolve_prompt_text(prompt_id: str) -> str:
         # 325f3b5b928865e1e41813c863ac56364660b2877a.
         ("chat-system-core", 2, "5509e4da2049f63c08a2209209b03291c175c321669a20cb91fb08c88d1906e1"),
         ("context-summary", 1, "2dbdc7b34ebcbd909bfe17eef2cc93f3295d63b2f2f12aaea17c00fe3c4e5564"),
-        ("chart-output-hard-rules", 1, "a852599cfd04506adf05d91bcc7fdfabe0e2e90cb45e5c436a4b3b27cf9292a8"),
-        ("chart-schema-templates", 1, "4e3453902371676fbca08e5b9d0d63cfd6b51ee85442542f4b0126b4a0b9663c"),
+        ("chart-generation-system", 1, "3527adee7721dfe61516d658a91627fabc7d4cbdfb817c33dbe9e44f5a56e57c"),
         ("note-key-takeaway", 1, "6c353e7c606ab20f197a5ee4eafb0aac2f86c7c9a491ccddfac63bf2349ec936"),
         ("note-branch-comparison", 1, "0713d59157923e1ea9dd71715a1ffc9e394e6fedec5a42e62cacb143ef06dfc1"),
         ("note-branch-synthesis", 1, "7513752343c8bc7d4aecfaf388d0513114fd18ad425fa86bab237dfcf38fe2ff"),
diff --git a/pyproject.toml b/pyproject.toml
index bbae19e5..69aef737 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -101,7 +101,6 @@ py-modules = [
     "api_provider",
     "graphlink_artifact_agent",
     "graphlink_audio",
-    "graphlink_chart_agent",
     "graphlink_chart_data",
     "graphlink_chart_rendering",
     "graphlink_chat_agent",
diff --git a/tests/test_node_state_migration.py b/tests/test_node_state_migration.py
index 2e7de533..d53674f7 100644
--- a/tests/test_node_state_migration.py
+++ b/tests/test_node_state_migration.py
@@ -68,7 +68,7 @@
         "research_active_source_id", "research_error", "research_result",
     ],
     "chart": [
-        "chart_type", "chart_data", "chart_error", "chart_asset_id", "chart_asset_version",
+        "chart_type", "chart_data", "chart_error",
         "chart_width", "chart_height", "chart_aspect_locked", "chart_source_node_id",
     ],
     # is_locked/group_manual_* are frame-only; group_width/group_height are
@@ -304,7 +304,7 @@ def test_scene_node_core_field_count():
 # is sufficient; the point is the KEY SET, not per-kind values.
 _EXPECTED_SCENE_NODE_WIRE_KEYS = sorted([
     "artifactContent", "attachmentKind", "branchStatus", "byteSize",
-    "chartAspectLocked", "chartAssetId", "chartAssetVersion", "chartData",
+    "chartAspectLocked", "chartData",
     "chartError", "chartHeight", "chartSourceNodeId", "chartType", "chartWidth",
     "chatScrollValue", "code", "codeSandboxAnalysis",
     "codeSandboxApprovalAllowSourceBuilds", "codeSandboxApprovalIsRepair",
@@ -399,8 +399,6 @@ def test_scene_payload_key_set_is_unchanged_by_the_migration():
     "chartType": "",
     "chartData": {},
     "chartError": "",
-    "chartAssetId": "",
-    "chartAssetVersion": 0,
     "chartWidth": 680.0,
     "chartHeight": 500.0,
     "chartAspectLocked": True,
diff --git a/web_ui/src/app/canvas/ChartNodeView.test.tsx b/web_ui/src/app/canvas/ChartNodeView.test.tsx
index 511264df..d09b28c3 100644
--- a/web_ui/src/app/canvas/ChartNodeView.test.tsx
+++ b/web_ui/src/app/canvas/ChartNodeView.test.tsx
@@ -1,9 +1,8 @@
 import { ReactFlowProvider, type NodeProps } from "@xyflow/react";
-import { fireEvent, render, screen } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import {
   ChartNodeView,
-  chartAssetUrl,
   chartExportUrl,
   chartNodePropsAreEqual,
   makeDebouncedChartResize,
@@ -25,8 +24,6 @@ function renderChartNode(overrides: Partial<ChartFlowNode["data"]> = {}, id = "n
       chartType: "bar",
       chartData: { type: "bar", title: "Quarterly Revenue" },
       chartError: "",
-      chartAssetId: "asset-chart-1",
-      chartAssetVersion: 1,
       chartWidth: 680,
       chartHeight: 500,
       chartAspectLocked: true,
@@ -46,11 +43,13 @@ function renderChartNode(overrides: Partial<ChartFlowNode["data"]> = {}, id = "n
 }
 
 describe("ChartNodeView", () => {
-  it("renders the img with the correct cache-busting src (asset endpoint + ?v=chartAssetVersion)", () => {
-    const { container } = renderChartNode({ chartAssetId: "asset-chart-1", chartAssetVersion: 3 });
-    const img = container.querySelector("img");
-    expect(img).not.toBeNull();
-    expect(img).toHaveAttribute("src", "/api/assets/asset-chart-1?v=3");
+  it("renders the interactive chart canvas (lazy-loaded) instead of a static image", async () => {
+    const { container } = renderChartNode({
+      chartType: "bar",
+      chartData: { type: "bar", title: "Quarterly Revenue", labels: ["Q1", "Q2"], values: [10, 20] },
+    });
+    await waitFor(() => expect(container.querySelector(".chart-canvas-wrapper")).not.toBeNull());
+    expect(container.querySelector("img")).toBeNull();
   });
 
   it("renders the title from chartData.title and the type badge from chartType", () => {
@@ -69,23 +68,12 @@ describe("ChartNodeView", () => {
     expect(screen.queryByLabelText("Chart generation warning")).toBeNull();
   });
 
-  it("shows an inline warning badge carrying chartError as its title, WITHOUT hiding the chart image", () => {
+  it("shows an inline warning badge carrying chartError as its title, WITHOUT hiding the chart canvas", async () => {
     const { container } = renderChartNode({ chartError: "used a placeholder - generation failed" });
     const badge = screen.getByLabelText("Chart generation warning");
     expect(badge).toHaveAttribute("title", "used a placeholder - generation failed");
-    // The chart image still renders - a chart_error never blocks the card.
-    expect(container.querySelector("img")).not.toBeNull();
-  });
-
-  it("onError shows the 'Chart unavailable' placeholder and hides the broken img", () => {
-    const { container } = renderChartNode();
-    const img = container.querySelector("img");
-    expect(img).not.toBeNull();
-
-    fireEvent.error(img!);
-
-    expect(screen.getByText("Chart unavailable")).toBeInTheDocument();
-    expect(container.querySelector("img")).toBeNull();
+    // The chart canvas still renders - a chart_error never blocks the card.
+    await waitFor(() => expect(container.querySelector(".chart-canvas-wrapper")).not.toBeNull());
   });
 
   it("the aspect-lock toggle button reads 'Unlock Aspect' when locked and calls onToggleAspectLock", async () => {
@@ -103,21 +91,24 @@ describe("ChartNodeView", () => {
     expect(button).toHaveAttribute("aria-pressed", "false");
   });
 
-  it("the Export link points at the dedicated export endpoint for this node's id", () => {
+  it("the Export PNG/SVG links point at the dedicated export endpoint for this node's id", () => {
     renderChartNode({}, "chart-42");
-    const link = screen.getByRole("link", { name: "Export" });
-    expect(link).toHaveAttribute("href", "/api/assets/chart/chart-42/export?session=default");
-    expect(link).toHaveAttribute("target", "_blank");
+    const pngLink = screen.getByRole("link", { name: "Export PNG" });
+    expect(pngLink).toHaveAttribute("href", "/api/assets/chart/chart-42/export?session=default&fmt=png");
+    expect(pngLink).toHaveAttribute("target", "_blank");
+    const svgLink = screen.getByRole("link", { name: "Export SVG" });
+    expect(svgLink).toHaveAttribute("href", "/api/assets/chart/chart-42/export?session=default&fmt=svg");
+    expect(svgLink).toHaveAttribute("target", "_blank");
   });
 });
 
-describe("chartAssetUrl / chartExportUrl", () => {
-  it("chartAssetUrl builds /api/assets/{id}?v={version}", () => {
-    expect(chartAssetUrl("abc", 7)).toBe("/api/assets/abc?v=7");
+describe("chartExportUrl", () => {
+  it("defaults to fmt=png", () => {
+    expect(chartExportUrl("node-1")).toBe("/api/assets/chart/node-1/export?session=default&fmt=png");
   });
 
-  it("chartExportUrl builds /api/assets/chart/{nodeId}/export?session=default", () => {
-    expect(chartExportUrl("node-1")).toBe("/api/assets/chart/node-1/export?session=default");
+  it("builds an fmt=svg url when asked", () => {
+    expect(chartExportUrl("node-1", "svg")).toBe("/api/assets/chart/node-1/export?session=default&fmt=svg");
   });
 });
 
@@ -175,8 +166,6 @@ describe("ChartNodeView React.memo comparator (ADR-011 stage 11.1)", () => {
         chartType: "bar",
         chartData: { type: "bar", title: "Quarterly Revenue" },
         chartError: "",
-        chartAssetId: "asset-chart-1",
-        chartAssetVersion: 1,
         chartWidth: 680,
         chartHeight: 500,
         chartAspectLocked: true,
@@ -194,16 +183,18 @@ describe("ChartNodeView React.memo comparator (ADR-011 stage 11.1)", () => {
     expect(chartNodePropsAreEqual(p, { ...p })).toBe(true);
   });
 
-  it("treats a fresh-but-value-identical chartData object (same title) as equal", () => {
+  it("treats an unchanged chartData reference as equal even when other unread fields differ", () => {
+    const a = props({ chartWidth: 680, chartData: { type: "bar", title: "Quarterly Revenue", values: [1, 2, 3] } });
+    const b = { ...a, data: { ...a.data, chartWidth: 999 } };
+    expect(a.data.chartData).toBe(b.data.chartData);
+    expect(chartNodePropsAreEqual(a, b)).toBe(true);
+  });
+
+  it("returns false when chartData is a fresh object reference, even with byte-identical content - the renderer reads the whole shape now, so only a real upstream rebuild (see SceneCanvas.tsx's toFlowNodes cache) should mint a new reference", () => {
     const a = props({ chartData: { type: "bar", title: "Quarterly Revenue", values: [1, 2, 3] } });
-    const b = {
-      ...a,
-      data: { ...a.data, chartData: { type: "line" as const, title: "Quarterly Revenue", values: [9, 9] } },
-    };
-    // Different object, even different unread sub-fields (type/values) - only
-    // `.title` is ever read by this component, and it matches.
+    const b = { ...a, data: { ...a.data, chartData: { type: "bar" as const, title: "Quarterly Revenue", values: [1, 2, 3] } } };
     expect(a.data.chartData).not.toBe(b.data.chartData);
-    expect(chartNodePropsAreEqual(a, b)).toBe(true);
+    expect(chartNodePropsAreEqual(a, b)).toBe(false);
   });
 
   it("is unaffected by ChartNodeData fields this component never reads (chartWidth, chartHeight, chartSourceNodeId) or unread NodeProps fields (dragging, zIndex)", () => {
@@ -232,8 +223,6 @@ describe("ChartNodeView React.memo comparator (ADR-011 stage 11.1)", () => {
   it.each([
     ["chartType", { chartType: "line" }],
     ["chartError", { chartError: "boom" }],
-    ["chartAssetId", { chartAssetId: "asset-2" }],
-    ["chartAssetVersion", { chartAssetVersion: 2 }],
     ["chartAspectLocked", { chartAspectLocked: false }],
     ["onToggleAspectLock", { onToggleAspectLock: vi.fn() }],
     ["onResize", { onResize: vi.fn() }],
@@ -243,12 +232,6 @@ describe("ChartNodeView React.memo comparator (ADR-011 stage 11.1)", () => {
     expect(chartNodePropsAreEqual(a, b)).toBe(false);
   });
 
-  it("returns false when chartData.title differs, even with everything else on chartData identical", () => {
-    const a = props({ chartData: { type: "bar", title: "A" } });
-    const b = { ...a, data: { ...a.data, chartData: { type: "bar" as const, title: "B" } } };
-    expect(chartNodePropsAreEqual(a, b)).toBe(false);
-  });
-
   it("real render: skipped when only an unread field changes, and actually happens when chartType changes", () => {
     const p = props({ chartType: "bar" }, { selected: false });
     const { container, rerender } = render(
diff --git a/web_ui/src/app/canvas/ChartNodeView.tsx b/web_ui/src/app/canvas/ChartNodeView.tsx
index ba65795d..88cc9d8d 100644
--- a/web_ui/src/app/canvas/ChartNodeView.tsx
+++ b/web_ui/src/app/canvas/ChartNodeView.tsx
@@ -1,5 +1,5 @@
 import { Handle, NodeResizer, Position, type Node, type NodeProps } from "@xyflow/react";
-import { memo, useEffect, useRef, useState } from "react";
+import { lazy, memo, Suspense, useEffect, useRef } from "react";
 import type { ChartDataRow } from "../../lib/bridge-core/generated/scene-state";
 import { withAuthToken } from "../../lib/auth/token";
 import {
@@ -11,17 +11,25 @@ import {
 } from "./canvasConstants";
 import { useLodVisibility } from "./useLodVisibility";
 
+// ADR-013 stage 13.2: the interactive renderer lives in its own lazily
+// loaded chunk (web_ui/src/app/canvas/charts/) - a plain SVG/React
+// implementation with no new charting dependency, code-split the same way
+// ChatLibraryDialog/HelpDialog/SettingsDialog already are. Defined once at
+// module scope (not inside the component) so every chart node on the canvas
+// shares the same lazy promise instead of each mounting its own chunk load.
+const LazyChartRenderer = lazy(() => import("./charts/ChartRenderer"));
+
 /**
- * The chart node (Qt-removal plan R6.2) - graphlink_canvas_chart_item.py's
- * React successor: a card wrapping a backend-rendered PNG (bar/line/pie/
- * histogram/sankey). Push-only, same as every other content card - the
- * chart DATA arrives already canonicalized via the scene document; this
- * view never touches matplotlib or chart math itself (see
- * graphlink_chart_rendering.py for that). Unlike the legacy QPainter chart
- * item, there is no "card chrome painted on top of the chart image" here at
- * all: the rounded-rect/header/badge/resize-handle chrome legacy drew
- * itself is now just this ordinary React/CSS card wrapping a plain <img> -
- * matplotlib already renders the bars/lines/pie/etc into that image.
+ * The chart node (Qt-removal plan R6.2, re-rendered client-side as of
+ * ADR-013 stage 13.2) - graphlink_canvas_chart_item.py's React successor: a
+ * card wrapping an interactive SVG chart (bar/line/pie/histogram/sankey)
+ * drawn directly from `chartData` in the browser. Unlike the legacy
+ * QPainter chart item, there is no "card chrome painted on top of the chart
+ * image" here at all: the rounded-rect/header/badge/resize-handle chrome
+ * legacy drew itself is now just this ordinary React/CSS card; the chart
+ * ITSELF used to be a backend-rendered PNG (R6.2's original cut) and is now
+ * charts/ChartRenderer.tsx's own SVG, re-validated client-side via
+ * chartSpec.ts (stage 13.1) rather than trusted blindly off the wire.
  *
  * Sizing works exactly like GroupNodeView.tsx's R6.1 frame/container: width/
  * height are set on the FLOW NODE OBJECT itself (SceneCanvas.tsx's
@@ -32,42 +40,43 @@ import { useLodVisibility } from "./useLodVisibility";
  * `data` (part of the 9-field wire contract every other chart field rides
  * through) - the flow-node-level width/height exists purely for the
  * NodeResizer controlled-mode technique, not as the single source of truth.
+ * ChartRenderer itself doesn't read either one - it measures its own
+ * rendered box directly (see charts/chartHooks.ts's useElementSize).
  *
- * Resize -> re-render: every resize needs a REAL matplotlib re-layout at the
- * settled size (see backend/canvas.py's resize_chart), not a cheap CSS
- * stretch of the existing PNG - so onResizeEnd is debounced
- * (CHART_RESIZE_DEBOUNCE_MS, see makeDebouncedChartResize below) before
- * firing resizeChart, guarding against a user chaining several quick resize
- * gestures in a row each hitting the network. Aspect-lock uses xyflow's own
- * NodeResizer `keepAspectRatio` prop rather than any hand-rolled ratio math -
- * the backend's own resize_chart still re-derives/clamps against MIN/MAX
+ * Resize -> re-render: the interactive renderer re-lays-out INSTANTLY at
+ * any size (no network round-trip - stage 13.2's whole point); onResizeEnd
+ * is still debounced (CHART_RESIZE_DEBOUNCE_MS, see makeDebouncedChartResize
+ * below) before firing resizeChart purely to avoid hitting the network on
+ * every intermediate frame of a drag - ADR-013 stage 13.4 retired the
+ * backend's own display-PNG re-render entirely (nothing has read it since
+ * this renderer shipped), so resizeChart today persists only the settled
+ * chartWidth/chartHeight. Aspect-lock uses xyflow's own NodeResizer
+ * `keepAspectRatio` prop rather than any hand-rolled ratio math - the
+ * backend's own resize_chart still re-derives/clamps against MIN/MAX
  * server-side regardless of what the client sends (this component's MIN/MAX
  * are just a UI-side floor/ceiling matching legacy's own bounds, not the
  * authoritative clamp - same posture as GROUP_RESIZE_MIN_WIDTH/HEIGHT).
  *
  * chartError never hides or blocks the card (the backend's own
- * never-hard-fail contract guarantees SOME renderable PNG always exists,
- * even a placeholder one) - it only adds a small inline warning badge
- * carrying the error text in its title, next to the type badge.
+ * never-hard-fail contract guarantees a renderable chart always exists) -
+ * it only adds a small inline warning badge carrying the error text in its
+ * title, next to the type badge. A chartData shape ChartRenderer itself
+ * can't render (fails its own canonicalizeChartSpec re-check) shows its own
+ * inline placeholder instead of crashing - see ChartRenderer.tsx.
  *
- * The asset URL reuses the exact `/api/assets/{assetId}` convention
- * ImageNodeView.tsx established, with a `?v=chartAssetVersion` cache-buster
- * appended so a resize's freshly re-rendered bytes (same assetId, new bytes -
- * see backend/canvas.py's resize_chart) actually reload instead of showing a
- * browser-cached stale image. Export hits a DISTINCT endpoint (a real
- * 3x-resolution re-render, not the cached display asset) - opened directly
- * in a new tab, the simpler of the two download patterns this codebase
- * already uses (ImageNodeView.tsx's fetch->blob->object-URL dance is only
- * needed there because that same code path also backs Copy Image; chart
- * export has no such second consumer, so a plain link is enough).
+ * Export/PNG and Export/SVG both hit the same dedicated export endpoint (a
+ * real matplotlib re-render server-side - PNG at 3x resolution, SVG as
+ * vector - not anything this renderer draws), opened directly in a new tab.
+ * That stays server-side deliberately: a downloadable, print-quality
+ * raster/vector asset is a different job than "draw this interactively."
+ * ADR-013 stage 13.4 moved that render off the event loop
+ * (asyncio.to_thread, backend/assets.py) and added the SVG option.
  */
 
 export interface ChartNodeData extends Record<string, unknown> {
   chartType: string;
   chartData: ChartDataRow;
   chartError: string;
-  chartAssetId: string;
-  chartAssetVersion: number;
   chartWidth: number;
   chartHeight: number;
   chartAspectLocked: boolean;
@@ -78,30 +87,16 @@ export interface ChartNodeData extends Record<string, unknown> {
 
 export type ChartFlowNode = Node<ChartNodeData, "chart">;
 
-/** Same one-place-builds-the-URL discipline as ImageNodeView.tsx's own
- * assetUrl() - the <img> render below is the only call site, so nothing else
- * can disagree with it about the endpoint shape. The `v` query param is
- * chartAssetVersion, not something this endpoint itself enforces - it exists
- * purely so the BROWSER treats a re-rendered chart (same assetId, new bytes)
- * as a different URL and actually refetches instead of serving a cached
- * response. */
-export function chartAssetUrl(chartAssetId: string, version: number): string {
-  // ADR-004 stage 4.1: the capability token appends AFTER the `v` param
-  // (withAuthToken picks "&" because a query string already exists), same
-  // browser-image-loader-cannot-send-headers reason as ImageNodeView's own
-  // assetUrl. A no-op when no token is present.
-  return withAuthToken(`/api/assets/${chartAssetId}?v=${version}`);
-}
-
-/** The dedicated export endpoint (a real 3x-resolution re-render - see
- * graphlink_chart_rendering.py's dpi_scale - never the cached display
- * asset), matching this increment's contract exactly. `session=default`
- * mirrors this app's single-session-per-window assumption everywhere else
- * (see lib/ws/transport.ts's own defaultWsUrl default parameter). */
-export function chartExportUrl(nodeId: string): string {
+/** The dedicated export endpoint - a real matplotlib re-render server-side
+ * (PNG at 3x resolution via graphlink_chart_rendering.py's dpi_scale, or
+ * SVG as vector - see render_chart_png/render_chart_svg), never anything
+ * cached. `session=default` mirrors this app's single-session-per-window
+ * assumption everywhere else (see lib/ws/transport.ts's own defaultWsUrl
+ * default parameter). */
+export function chartExportUrl(nodeId: string, format: "png" | "svg" = "png"): string {
   // ADR-004 stage 4.1: this one is a plain <a href> the user clicks, so it
   // has no way to carry a header either - same query-param treatment.
-  return withAuthToken(`/api/assets/chart/${nodeId}/export?session=default`);
+  return withAuthToken(`/api/assets/chart/${nodeId}/export?session=default&fmt=${format}`);
 }
 
 function chartTypeBadgeLabel(chartType: string): string {
@@ -130,22 +125,23 @@ export function makeDebouncedChartResize(
   };
 }
 
-function chartTitlesEqual(a: ChartDataRow, b: ChartDataRow): boolean {
-  if (a === b) return true;
-  return (a.title ?? null) === (b.title ?? null);
-}
-
-/** ADR-011 stage 11.1: React.memo comparator - id (read into the resizer's
- * nodeId and chartExportUrl), selected, and only the ChartNodeData fields
- * this component actually reads. chartWidth/chartHeight/chartSourceNodeId
- * ride on the wire (see this file's own module doc) but this component never
- * reads them directly - the node's own width/height comes through the flow
- * node object itself, not `data` - so they're deliberately excluded rather
- * than compared for no reason. chartData is object-shaped but only its
- * `.title` is ever read here, so the compare is scoped to that field instead
- * of the whole object reference: a plain `===` would make this comparator
- * too tight, forcing a re-render whenever an upstream rebuild mints a fresh,
- * value-identical chartData object. */
+/** ADR-011 stage 11.1 comparator, widened under ADR-013 stage 13.2: id (read
+ * into the resizer's nodeId and chartExportUrl), selected, and only the
+ * ChartNodeData fields this component actually reads. chartWidth/
+ * chartHeight/chartSourceNodeId ride on the wire (see this file's own
+ * module doc) but this component never reads them directly - the node's
+ * own width/height comes through the flow node object itself, not `data` -
+ * so they're deliberately excluded rather than compared for no reason.
+ * chartAssetId/chartAssetVersion (the backend-rendered display PNG's own
+ * key/version) rode ChartNodeData until ADR-013 stage 13.4 retired them
+ * outright - the interactive renderer draws from `chartData` alone, so
+ * nothing had read them since stage 13.2 shipped. chartData IS compared by
+ * reference rather than scoped to
+ * `.title` - the renderer reads the whole shape, and SceneCanvas.tsx's own
+ * toFlowNodes cache (keyed by the raw scene-node object) guarantees a fresh
+ * chartData reference only appears when the underlying node actually
+ * changed, so a plain `===` here is both correct and cheap (no risk of
+ * forcing a re-render off a value-identical-but-freshly-rebuilt object). */
 export function chartNodePropsAreEqual(prev: NodeProps<ChartFlowNode>, next: NodeProps<ChartFlowNode>): boolean {
   if (prev.id !== next.id || prev.selected !== next.selected) return false;
   const a = prev.data;
@@ -153,12 +149,10 @@ export function chartNodePropsAreEqual(prev: NodeProps<ChartFlowNode>, next: Nod
   return (
     a.chartType === b.chartType &&
     a.chartError === b.chartError &&
-    a.chartAssetId === b.chartAssetId &&
-    a.chartAssetVersion === b.chartAssetVersion &&
     a.chartAspectLocked === b.chartAspectLocked &&
     a.onToggleAspectLock === b.onToggleAspectLock &&
     a.onResize === b.onResize &&
-    chartTitlesEqual(a.chartData, b.chartData)
+    a.chartData === b.chartData
   );
 }
 
@@ -168,7 +162,6 @@ export const ChartNodeView = memo(function ChartNodeView({
   selected,
 }: NodeProps<ChartFlowNode>) {
   const collapsed = useLodVisibility();
-  const [imageFailed, setImageFailed] = useState(false);
   const resizeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(
@@ -210,16 +203,9 @@ export const ChartNodeView = memo(function ChartNodeView({
       </div>
       {!collapsed && (
         <div className="scene-node-body chart-node-content">
-          {imageFailed ? (
-            <div className="chart-node-placeholder">Chart unavailable</div>
-          ) : (
-            <img
-              className="chart-node-img"
-              src={chartAssetUrl(data.chartAssetId, data.chartAssetVersion)}
-              alt={title}
-              onError={() => setImageFailed(true)}
-            />
-          )}
+          <Suspense fallback={<div className="chart-node-placeholder">Loading chart…</div>}>
+            <LazyChartRenderer chartType={data.chartType} chartData={data.chartData} />
+          </Suspense>
           <div className="chart-node-toolbar nodrag">
             <button
               type="button"
@@ -231,11 +217,19 @@ export const ChartNodeView = memo(function ChartNodeView({
             </button>
             <a
               className="chart-node-btn chart-node-export-link"
-              href={chartExportUrl(id)}
+              href={chartExportUrl(id, "png")}
+              target="_blank"
+              rel="noreferrer"
+            >
+              Export PNG
+            </a>
+            <a
+              className="chart-node-btn chart-node-export-link"
+              href={chartExportUrl(id, "svg")}
               target="_blank"
               rel="noreferrer"
             >
-              Export
+              Export SVG
             </a>
           </div>
         </div>
diff --git a/web_ui/src/app/canvas/SceneCanvas.pinSearchJump.test.tsx b/web_ui/src/app/canvas/SceneCanvas.pinSearchJump.test.tsx
index a75af4a7..c07cb16f 100644
--- a/web_ui/src/app/canvas/SceneCanvas.pinSearchJump.test.tsx
+++ b/web_ui/src/app/canvas/SceneCanvas.pinSearchJump.test.tsx
@@ -119,7 +119,7 @@ function chatRow(id: string, x: number, y: number, title = id): SceneNodeRow {
         color: null, headerColor: null, isSystemPrompt: false, isSummaryNote: false,
         isBranchComparison: false, itemIds: [], isLocked: true, groupWidth: null,
         groupHeight: null, chartType: "", chartData: {}, chartError: "",
-        chartAssetId: "", chartAssetVersion: 0, chartWidth: 680.0, chartHeight: 500.0,
+        chartWidth: 680.0, chartHeight: 500.0,
         chartAspectLocked: true, chartSourceNodeId: "", htmlSplitterState: null,
         chatScrollValue: 0.0,
         toolCalls: [],
diff --git a/web_ui/src/app/canvas/SceneCanvas.test.tsx b/web_ui/src/app/canvas/SceneCanvas.test.tsx
index f8dc3624..463f5bf6 100644
--- a/web_ui/src/app/canvas/SceneCanvas.test.tsx
+++ b/web_ui/src/app/canvas/SceneCanvas.test.tsx
@@ -124,8 +124,6 @@ function baseNode(overrides: Partial<SceneNodeRow> = {}): SceneNodeRow {
     chartType: "",
     chartData: {},
     chartError: "",
-    chartAssetId: "",
-    chartAssetVersion: 0,
     chartWidth: 680.0,
     chartHeight: 500.0,
     chartAspectLocked: true,
@@ -1618,10 +1616,12 @@ describe("toFlowNodes (R6.1 frame/container nodes)", () => {
 });
 
 // R6.2: Chart node. ADR-003 stage 3.3 (C9) put chartType/chartData/
-// chartError/chartAssetId/chartAssetVersion/chartWidth/chartHeight/
-// chartAspectLocked/chartSourceNodeId directly on the generated
-// SceneNodeRow type - this helper only exists now for its convenient
-// chart-kind defaults, not to work around missing fields.
+// chartError/chartWidth/chartHeight/chartAspectLocked/chartSourceNodeId
+// directly on the generated SceneNodeRow type (chartAssetId/
+// chartAssetVersion rode alongside them until ADR-013 stage 13.4 retired
+// the backend-rendered display PNG they addressed) - this helper only
+// exists now for its convenient chart-kind defaults, not to work around
+// missing fields.
 function chartNode(overrides: Partial<SceneNodeRow> = {}): SceneNodeRow {
   return {
     ...baseNode(),
@@ -1629,8 +1629,6 @@ function chartNode(overrides: Partial<SceneNodeRow> = {}): SceneNodeRow {
     chartType: "bar",
     chartData: { type: "bar", title: "Revenue" },
     chartError: "",
-    chartAssetId: "asset-chart-1",
-    chartAssetVersion: 1,
     chartWidth: 680,
     chartHeight: 500,
     chartAspectLocked: true,
@@ -1640,7 +1638,7 @@ function chartNode(overrides: Partial<SceneNodeRow> = {}): SceneNodeRow {
 }
 
 describe("toFlowNodes (R6.2 chart node)", () => {
-  it("maps all 9 chart wire fields onto the flow node's data, and chartWidth/chartHeight ALSO onto the flow node object itself (NodeResizer controlled-mode)", () => {
+  it("maps all 7 chart wire fields onto the flow node's data, and chartWidth/chartHeight ALSO onto the flow node object itself (NodeResizer controlled-mode)", () => {
     const scene = baseScene({
       nodes: [
         chartNode({
@@ -1650,8 +1648,6 @@ describe("toFlowNodes (R6.2 chart node)", () => {
           chartType: "sankey",
           chartData: { type: "sankey", title: "Flow" },
           chartError: "used a placeholder chart",
-          chartAssetId: "asset-9",
-          chartAssetVersion: 4,
           chartWidth: 900,
           chartHeight: 640,
           chartAspectLocked: false,
@@ -1673,8 +1669,6 @@ describe("toFlowNodes (R6.2 chart node)", () => {
       chartType: "sankey",
       chartData: { type: "sankey", title: "Flow" },
       chartError: "used a placeholder chart",
-      chartAssetId: "asset-9",
-      chartAssetVersion: 4,
       chartWidth: 900,
       chartHeight: 640,
       chartAspectLocked: false,
diff --git a/web_ui/src/app/canvas/SceneCanvas.tsx b/web_ui/src/app/canvas/SceneCanvas.tsx
index ecdf493d..590e3af4 100644
--- a/web_ui/src/app/canvas/SceneCanvas.tsx
+++ b/web_ui/src/app/canvas/SceneCanvas.tsx
@@ -1640,8 +1640,6 @@ export function toFlowNodes(
           chartType: n.chartType,
           chartData: n.chartData,
           chartError: n.chartError,
-          chartAssetId: n.chartAssetId,
-          chartAssetVersion: n.chartAssetVersion,
           chartWidth: n.chartWidth,
           chartHeight: n.chartHeight,
           chartAspectLocked: n.chartAspectLocked,
diff --git a/web_ui/src/app/canvas/SceneCanvas.virtualization.test.tsx b/web_ui/src/app/canvas/SceneCanvas.virtualization.test.tsx
index 7830b084..9f0835e1 100644
--- a/web_ui/src/app/canvas/SceneCanvas.virtualization.test.tsx
+++ b/web_ui/src/app/canvas/SceneCanvas.virtualization.test.tsx
@@ -127,7 +127,7 @@ function chatRow(id: string, x: number, y = 0): SceneNodeRow {
         color: null, headerColor: null, isSystemPrompt: false, isSummaryNote: false,
         isBranchComparison: false, itemIds: [], isLocked: true, groupWidth: null,
         groupHeight: null, chartType: "", chartData: {}, chartError: "",
-        chartAssetId: "", chartAssetVersion: 0, chartWidth: 680.0, chartHeight: 500.0,
+        chartWidth: 680.0, chartHeight: 500.0,
         chartAspectLocked: true, chartSourceNodeId: "", htmlSplitterState: null,
         chatScrollValue: 0.0,
         toolCalls: [],
diff --git a/web_ui/src/app/canvas/chartSpec.test.ts b/web_ui/src/app/canvas/chartSpec.test.ts
new file mode 100644
index 00000000..6b56e1fb
--- /dev/null
+++ b/web_ui/src/app/canvas/chartSpec.test.ts
@@ -0,0 +1,109 @@
+/**
+ * ADR-013 stage 13.1 exit criterion: "Spec validates on both ends; a
+ * hand-authored spec renders." This file proves the first half - the same
+ * validation rules backend/tests/test_chart_data_validation.py pins for
+ * graphlink_chart_data.py's canonicalize_chart_data, ported here.
+ */
+import { describe, expect, it } from "vitest";
+import { CHART_SPEC_VERSION, ChartSpecError, canonicalizeChartSpec } from "./chartSpec";
+
+function barData(overrides: Record<string, unknown> = {}) {
+  return { type: "bar", title: "Sales", labels: ["A", "B", "C"], values: [1, 2, 3], ...overrides };
+}
+
+describe("canonicalizeChartSpec", () => {
+  it("stamps the spec version", () => {
+    const canonical = canonicalizeChartSpec(barData(), "bar");
+    expect(canonical.version).toBe(CHART_SPEC_VERSION);
+    expect(CHART_SPEC_VERSION).toBe(1);
+  });
+
+  it("renders a hand-authored bar spec with defaults filled in", () => {
+    const canonical = canonicalizeChartSpec({ type: "bar", labels: ["Q1", "Q2"], values: [10, 20] }, "bar");
+    expect(canonical).toEqual({
+      version: 1,
+      type: "bar",
+      title: "Bar Chart",
+      labels: ["Q1", "Q2"],
+      values: [10, 20],
+      xAxis: "Category",
+      yAxis: "Value",
+    });
+  });
+
+  it("rejects a non-list values container", () => {
+    expect(() => canonicalizeChartSpec(barData({ values: { A: 1 } }), "bar")).toThrow(/both be lists/);
+  });
+
+  it("rejects a non-finite value", () => {
+    expect(() => canonicalizeChartSpec(barData({ values: [1, NaN, 3] }), "bar")).toThrow(/finite/);
+  });
+
+  it("rejects mismatched labels/values length", () => {
+    expect(() => canonicalizeChartSpec(barData({ values: [1, 2] }), "bar")).toThrow(/same length/);
+  });
+
+  it("rejects pie values that are not strictly positive", () => {
+    expect(() =>
+      canonicalizeChartSpec({ type: "pie", labels: ["A", "B"], values: [5, 0] }, "pie"),
+    ).toThrow(/greater than zero/);
+  });
+
+  it("requires at least two points for a line chart", () => {
+    expect(() => canonicalizeChartSpec({ type: "line", labels: ["A"], values: [1] }, "line")).toThrow(
+      /at least two data points/,
+    );
+  });
+
+  it("clamps histogram bins to [2, 24, valueCount]", () => {
+    const canonical = canonicalizeChartSpec(
+      { type: "histogram", values: [1, 2, 3, 4], bins: 999 },
+      "histogram",
+    );
+    expect(canonical.bins).toBe(4);
+  });
+
+  it("aggregates duplicate sankey flows and sorts them", () => {
+    const canonical = canonicalizeChartSpec(
+      {
+        type: "sankey",
+        flows: [
+          { source: "A", target: "B", value: 1 },
+          { source: "A", target: "B", value: 2 },
+        ],
+      },
+      "sankey",
+    );
+    expect(canonical.flows).toEqual([{ source: "A", target: "B", value: 3 }]);
+  });
+
+  it("rejects a sankey cycle", () => {
+    expect(() =>
+      canonicalizeChartSpec(
+        {
+          type: "sankey",
+          flows: [
+            { source: "A", target: "B", value: 1 },
+            { source: "B", target: "A", value: 1 },
+          ],
+        },
+        "sankey",
+      ),
+    ).toThrow(/cannot contain cycles/);
+  });
+
+  it("rejects an unsupported chart type", () => {
+    expect(() => canonicalizeChartSpec(barData({ type: "radar" }), "radar")).toThrow(ChartSpecError);
+  });
+
+  it("rejects a payload type mismatched with the requested type", () => {
+    expect(() => canonicalizeChartSpec(barData(), "line")).toThrow(/must be line/);
+  });
+
+  it("never mutates the input object", () => {
+    const input = barData();
+    const snapshot = JSON.stringify(input);
+    canonicalizeChartSpec(input, "bar");
+    expect(JSON.stringify(input)).toBe(snapshot);
+  });
+});
diff --git a/web_ui/src/app/canvas/chartSpec.ts b/web_ui/src/app/canvas/chartSpec.ts
new file mode 100644
index 00000000..b17f5a96
Binary files /dev/null and b/web_ui/src/app/canvas/chartSpec.ts differ
diff --git a/web_ui/src/app/canvas/charts/BarChartMarks.tsx b/web_ui/src/app/canvas/charts/BarChartMarks.tsx
new file mode 100644
index 00000000..f8e8fbbd
--- /dev/null
+++ b/web_ui/src/app/canvas/charts/BarChartMarks.tsx
@@ -0,0 +1,124 @@
+/**
+ * ADR-013 stage 13.2: bar chart marks. Bar geometry (0.62 relative bar
+ * width, the >=10-bars value-label cutoff, the negative-value zero-baseline
+ * stroke) mirrors graphlink_chart_rendering.py's _render_bar_chart so the
+ * live client render and the exported PNG read as the same chart, not two
+ * designs.
+ */
+
+import type { RefObject } from "react";
+import type { ChartDataRow } from "../../../lib/bridge-core/generated/scene-state";
+import type { ChartTheme } from "./chartTheme";
+import { createLinearScale, formatValue, niceTicks, pickCategoricalTicks, wrapLabel } from "./chartScales";
+import { computeBottomMargin, computeLeftMargin, tooltipPositionFromEvent } from "./chartLayout";
+import { CartesianAxes, type XTick } from "./CartesianAxes";
+import type { TooltipContent } from "./ChartTooltip";
+
+const BAR_WIDTH_FRACTION = 0.62;
+const MAX_LABELED_BARS = 10;
+
+export interface ChartMarksProps {
+  chartData: ChartDataRow;
+  theme: ChartTheme;
+  width: number;
+  height: number;
+  onHover: (content: TooltipContent | null) => void;
+  wrapperRef: RefObject<HTMLElement>;
+}
+
+export function BarChartMarks({ chartData, theme, width, height, onHover, wrapperRef }: ChartMarksProps) {
+  const values = chartData.values ?? [];
+  const labels = chartData.labels ?? [];
+  if (values.length === 0 || width <= 0 || height <= 0) return null;
+
+  const rawMin = Math.min(0, ...values);
+  const rawMax = Math.max(0, ...values);
+  let domainMin: number;
+  let domainMax: number;
+  if (rawMin >= 0) {
+    domainMin = 0;
+    domainMax = rawMax * 1.18 || 1;
+  } else {
+    const buffer = (rawMax - rawMin) * 0.12 || 1;
+    domainMin = rawMin - buffer;
+    domainMax = rawMax + buffer;
+  }
+  const yTicks = niceTicks(domainMin, domainMax, 5);
+  domainMin = Math.min(domainMin, yTicks[0]);
+  domainMax = Math.max(domainMax, yTicks[yTicks.length - 1]);
+
+  const hasYAxisLabel = Boolean(chartData.yAxis);
+  const marginLeft = computeLeftMargin(yTicks, hasYAxisLabel);
+  const marginRight = 16;
+  const marginTop = 12;
+  const innerWidth = Math.max(1, width - marginLeft - marginRight);
+
+  const { indexes: tickIndexes, rotate } = pickCategoricalTicks(labels.length, innerWidth);
+  const marginBottom = computeBottomMargin(rotate, Boolean(chartData.xAxis));
+  const innerHeight = Math.max(1, height - marginTop - marginBottom);
+
+  const yScale = createLinearScale([domainMin, domainMax], [innerHeight, 0]);
+  const slot = innerWidth / values.length;
+  const barWidth = slot * BAR_WIDTH_FRACTION;
+  const zeroY = yScale(0);
+  const zeroLineY = domainMin < 0 && domainMax > 0 ? zeroY : null;
+
+  const xTicks: XTick[] = tickIndexes.map((index) => ({
+    position: index * slot + slot / 2,
+    lines: wrapLabel(labels[index] ?? "", 14, 2),
+  }));
+
+  return (
+    <g transform={`translate(${marginLeft} ${marginTop})`}>
+      <CartesianAxes
+        theme={theme}
+        innerWidth={innerWidth}
+        innerHeight={innerHeight}
+        yTicks={yTicks}
+        yScale={yScale}
+        xAxisLabel={chartData.xAxis ?? ""}
+        yAxisLabel={chartData.yAxis ?? ""}
+        xTicks={xTicks}
+        rotateXTicks={rotate}
+        zeroLineY={zeroLineY}
+      />
+      {values.map((value, index) => {
+        const barX = index * slot + slot / 2 - barWidth / 2;
+        const barY = Math.min(zeroY, yScale(value));
+        const barHeight = Math.max(0.5, Math.abs(yScale(value) - zeroY));
+        const color = theme.categorical[index % theme.categorical.length];
+        const label = labels[index] ?? "";
+        return (
+          <g key={`${label}-${index}`}>
+            <rect
+              x={barX}
+              y={barY}
+              width={barWidth}
+              height={barHeight}
+              fill={color}
+              stroke={theme.text}
+              strokeOpacity={0.16}
+              rx={2}
+              onPointerMove={(event) => {
+                const position = tooltipPositionFromEvent(event, wrapperRef);
+                onHover({ title: label, rows: [{ label: chartData.yAxis ?? "Value", value: formatValue(value) }], ...position });
+              }}
+              onPointerLeave={() => onHover(null)}
+            />
+            {values.length <= MAX_LABELED_BARS && (
+              <text
+                x={barX + barWidth / 2}
+                y={value >= 0 ? barY - 6 : barY + barHeight + 14}
+                textAnchor="middle"
+                fontSize={10}
+                fill={theme.text}
+              >
+                {formatValue(value)}
+              </text>
+            )}
+          </g>
+        );
+      })}
+    </g>
+  );
+}
diff --git a/web_ui/src/app/canvas/charts/CartesianAxes.tsx b/web_ui/src/app/canvas/charts/CartesianAxes.tsx
new file mode 100644
index 00000000..1bb53d72
--- /dev/null
+++ b/web_ui/src/app/canvas/charts/CartesianAxes.tsx
@@ -0,0 +1,101 @@
+/**
+ * ADR-013 stage 13.2: the shared axis/gridline chrome for bar, line, and
+ * histogram (the three cartesian chart types) - one place for tick
+ * rendering so each chart type only supplies its own marks.
+ */
+
+import { Fragment } from "react";
+import type { ChartTheme } from "./chartTheme";
+import { formatValue, type Scale } from "./chartScales";
+
+export interface XTick {
+  position: number;
+  lines: string[];
+}
+
+export interface CartesianAxesProps {
+  theme: ChartTheme;
+  innerWidth: number;
+  innerHeight: number;
+  yTicks: number[];
+  yScale: Scale;
+  xAxisLabel: string;
+  yAxisLabel: string;
+  xTicks: XTick[];
+  rotateXTicks: boolean;
+  /** Pixel y-position of the zero baseline, when the value domain spans
+   * both signs (bar/line charts with negative values) and it should be
+   * called out with its own stroke, matching graphlink_chart_rendering.py's
+   * ax.axhline(0, ...) for the same case. */
+  zeroLineY?: number | null;
+}
+
+const LINE_HEIGHT = 12;
+
+export function CartesianAxes({
+  theme,
+  innerWidth,
+  innerHeight,
+  yTicks,
+  yScale,
+  xAxisLabel,
+  yAxisLabel,
+  xTicks,
+  rotateXTicks,
+  zeroLineY = null,
+}: CartesianAxesProps) {
+  return (
+    <g className="chart-axes">
+      {yTicks.map((tick) => {
+        const y = yScale(tick);
+        return (
+          <Fragment key={tick}>
+            <line x1={0} x2={innerWidth} y1={y} y2={y} stroke={theme.gridline} strokeOpacity={0.35} strokeDasharray="3 3" />
+            <text x={-8} y={y} textAnchor="end" dominantBaseline="middle" fill={theme.textMuted} fontSize={10}>
+              {formatValue(tick)}
+            </text>
+          </Fragment>
+        );
+      })}
+      {zeroLineY !== null && (
+        <line x1={0} x2={innerWidth} y1={zeroLineY} y2={zeroLineY} stroke={theme.text} strokeOpacity={0.5} strokeWidth={1} />
+      )}
+      <line x1={0} x2={0} y1={0} y2={innerHeight} stroke={theme.border} />
+      <line x1={0} x2={innerWidth} y1={innerHeight} y2={innerHeight} stroke={theme.border} />
+      {xTicks.map((tick) => (
+        <text
+          key={tick.position}
+          x={tick.position}
+          y={innerHeight + 16}
+          textAnchor={rotateXTicks ? "end" : "middle"}
+          fill={theme.textMuted}
+          fontSize={10}
+          transform={rotateXTicks ? `rotate(-25 ${tick.position} ${innerHeight + 16})` : undefined}
+        >
+          {tick.lines.map((line, index) => (
+            <tspan key={line} x={tick.position} dy={index === 0 ? 0 : LINE_HEIGHT}>
+              {line}
+            </tspan>
+          ))}
+        </text>
+      ))}
+      {xAxisLabel && (
+        <text x={innerWidth / 2} y={innerHeight + (rotateXTicks ? 52 : 34)} textAnchor="middle" fill={theme.textMuted} fontSize={11}>
+          {xAxisLabel}
+        </text>
+      )}
+      {yAxisLabel && (
+        <text
+          x={-44}
+          y={innerHeight / 2}
+          textAnchor="middle"
+          fill={theme.textMuted}
+          fontSize={11}
+          transform={`rotate(-90 ${-44} ${innerHeight / 2})`}
+        >
+          {yAxisLabel}
+        </text>
+      )}
+    </g>
+  );
+}
diff --git a/web_ui/src/app/canvas/charts/ChartRenderer.test.tsx b/web_ui/src/app/canvas/charts/ChartRenderer.test.tsx
new file mode 100644
index 00000000..2fa3e2da
--- /dev/null
+++ b/web_ui/src/app/canvas/charts/ChartRenderer.test.tsx
@@ -0,0 +1,106 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import ChartRenderer from "./ChartRenderer";
+
+// ChartRenderer gates its own SVG on a real measured size (useElementSize,
+// see chartHooks.ts). vitest.setup.ts's global ResizeObserver stub is a
+// deliberate no-op (firing it for real breaks @xyflow/react's own internal
+// ResizeObserver usage under jsdom - see that file's own comment) so this
+// file installs its own local, firing stub for the duration of these tests
+// only: real ResizeObserver always delivers one synchronous-ish initial
+// observation, which is all useElementSize needs to pick up a size.
+const originalResizeObserver = globalThis.ResizeObserver;
+
+beforeEach(() => {
+  vi.spyOn(Element.prototype, "getBoundingClientRect").mockReturnValue({
+    width: 600,
+    height: 400,
+    top: 0,
+    left: 0,
+    right: 600,
+    bottom: 400,
+    x: 0,
+    y: 0,
+    toJSON() {
+      return {};
+    },
+  });
+
+  class FiringResizeObserverStub {
+    #callback: ResizeObserverCallback;
+    constructor(callback: ResizeObserverCallback) {
+      this.#callback = callback;
+    }
+    observe(target: Element) {
+      const entry = { target, contentRect: target.getBoundingClientRect() } as ResizeObserverEntry;
+      this.#callback([entry], this as unknown as ResizeObserver);
+    }
+    unobserve() {}
+    disconnect() {}
+  }
+  globalThis.ResizeObserver = FiringResizeObserverStub as unknown as typeof ResizeObserver;
+});
+
+afterEach(() => {
+  globalThis.ResizeObserver = originalResizeObserver;
+  vi.restoreAllMocks();
+});
+
+const SAMPLE_DATA: Record<string, Record<string, unknown>> = {
+  bar: { type: "bar", title: "Sales", labels: ["Q1", "Q2", "Q3"], values: [10, -4, 20] },
+  line: { type: "line", title: "Trend", labels: ["Mon", "Tue", "Wed"], values: [1, 5, 3] },
+  pie: { type: "pie", title: "Share", labels: ["A", "B", "C"], values: [30, 20, 50] },
+  histogram: { type: "histogram", title: "Distribution", values: [1, 2, 2, 3, 4, 5, 5, 5, 6], bins: 4 },
+  sankey: {
+    type: "sankey",
+    title: "Flow",
+    flows: [
+      { source: "A", target: "B", value: 3 },
+      { source: "A", target: "C", value: 7 },
+    ],
+  },
+};
+
+describe("ChartRenderer", () => {
+  it.each(Object.keys(SAMPLE_DATA))("renders %s chart data as SVG marks without crashing", (chartType) => {
+    const { container } = render(<ChartRenderer chartType={chartType} chartData={SAMPLE_DATA[chartType] as never} />);
+    const svg = container.querySelector(".chart-canvas-svg");
+    expect(svg).not.toBeNull();
+    const marks = svg!.querySelectorAll("rect, path, circle");
+    expect(marks.length).toBeGreaterThan(0);
+  });
+
+  it("shows the inline placeholder (not a crash) for chart data that fails re-validation", () => {
+    const { container } = render(<ChartRenderer chartType="bar" chartData={{ type: "bar" } as never} />);
+    expect(container.querySelector(".chart-canvas-placeholder")).not.toBeNull();
+    expect(container.querySelector(".chart-canvas-svg")).toBeNull();
+    expect(screen.getByText(/both be lists/)).toBeInTheDocument();
+  });
+
+  it("shows a tooltip on hovering a bar and hides it again on pointer leave", () => {
+    const { container } = render(<ChartRenderer chartType="bar" chartData={SAMPLE_DATA.bar as never} />);
+    const bar = container.querySelector(".chart-canvas-svg rect")!;
+
+    expect(screen.queryByRole("tooltip")).toBeNull();
+    fireEvent.pointerMove(bar, { clientX: 50, clientY: 50 });
+    expect(screen.getByRole("tooltip")).toBeInTheDocument();
+
+    fireEvent.pointerLeave(bar);
+    expect(screen.queryByRole("tooltip")).toBeNull();
+  });
+
+  it("zooms in on wheel-up and shows a reset control, which restores the original transform", () => {
+    const { container } = render(<ChartRenderer chartType="bar" chartData={SAMPLE_DATA.bar as never} />);
+    const svg = container.querySelector(".chart-canvas-svg")!;
+    const zoomGroup = svg.querySelector("g")!;
+    expect(zoomGroup.getAttribute("transform")).toBe("translate(0 0) scale(1)");
+
+    fireEvent.wheel(svg, { deltaY: -100, clientX: 100, clientY: 100 });
+    expect(zoomGroup.getAttribute("transform")).not.toBe("translate(0 0) scale(1)");
+    const resetButton = screen.getByRole("button", { name: "Reset zoom" });
+
+    fireEvent.click(resetButton);
+    expect(zoomGroup.getAttribute("transform")).toBe("translate(0 0) scale(1)");
+    expect(screen.queryByRole("button", { name: "Reset zoom" })).toBeNull();
+  });
+});
diff --git a/web_ui/src/app/canvas/charts/ChartRenderer.tsx b/web_ui/src/app/canvas/charts/ChartRenderer.tsx
new file mode 100644
index 00000000..fbbdc021
--- /dev/null
+++ b/web_ui/src/app/canvas/charts/ChartRenderer.tsx
@@ -0,0 +1,99 @@
+/**
+ * ADR-013 stage 13.2: the interactive client-side chart renderer's entry
+ * point - the module ChartNodeView.tsx React.lazy()-imports, replacing the
+ * static backend-rendered <img>. Owns the plumbing every chart type shares
+ * (measuring, theme, zoom/pan, the hover tooltip) and dispatches to the
+ * per-type marks component for the actual drawing.
+ *
+ * Re-validates chartData through canonicalizeChartSpec (this stage's own
+ * chartSpec.ts, from stage 13.1) before rendering anything - the wire
+ * already carries backend-canonicalized data, but this is the one place a
+ * hand-authored or as-yet-unvalidated spec (stage 13.1's own exit
+ * criterion) gets checked before it reaches SVG geometry math that assumes
+ * a valid shape. On failure this renders the SAME kind of inline
+ * placeholder graphlink_chart_rendering.py's own never-blank contract
+ * guarantees for a bad render server-side, never a hard crash.
+ */
+
+import { useMemo, useState } from "react";
+import type { ChartDataRow } from "../../../lib/bridge-core/generated/scene-state";
+import { canonicalizeChartSpec, ChartSpecError } from "../chartSpec";
+import { useChartTheme, useElementSize } from "./chartHooks";
+import { useZoomPane } from "./useZoomPane";
+import { ChartTooltip, type TooltipContent } from "./ChartTooltip";
+import { BarChartMarks } from "./BarChartMarks";
+import { LineChartMarks } from "./LineChartMarks";
+import { PieChartMarks } from "./PieChartMarks";
+import { HistogramChartMarks } from "./HistogramChartMarks";
+import { SankeyChartMarks } from "./SankeyChartMarks";
+
+export interface ChartRendererProps {
+  chartType: string;
+  chartData: ChartDataRow;
+}
+
+function ChartRenderer({ chartType, chartData }: ChartRendererProps) {
+  const [wrapperRef, size] = useElementSize<HTMLDivElement>();
+  const theme = useChartTheme(wrapperRef);
+  const { zoom, isZoomed, handlers, reset } = useZoomPane();
+  const [hover, setHover] = useState<TooltipContent | null>(null);
+
+  const canonical = useMemo(() => {
+    try {
+      return { data: canonicalizeChartSpec(chartData, chartType), error: null as string | null };
+    } catch (error) {
+      return { data: null, error: error instanceof ChartSpecError ? error.message : "Chart data is invalid" };
+    }
+  }, [chartData, chartType]);
+
+  if (canonical.error || !canonical.data) {
+    return (
+      <div className="chart-canvas-wrapper chart-canvas-placeholder" ref={wrapperRef}>
+        <span>{canonical.error ?? "Chart unavailable"}</span>
+      </div>
+    );
+  }
+
+  const marksProps = {
+    chartData: canonical.data,
+    theme,
+    width: size.width,
+    height: size.height,
+    onHover: setHover,
+    wrapperRef,
+  };
+
+  return (
+    <div className="chart-canvas-wrapper" ref={wrapperRef}>
+      {size.width > 0 && size.height > 0 && (
+        <svg
+          className="chart-canvas-svg nodrag nowheel nopan"
+          width={size.width}
+          height={size.height}
+          onPointerDown={handlers.onPointerDown}
+          onPointerMove={handlers.onPointerMove}
+          onPointerUp={handlers.onPointerUp}
+          onPointerCancel={handlers.onPointerCancel}
+          onWheel={handlers.onWheel}
+          style={{ cursor: zoom.scale > 1 ? "grab" : "default" }}
+        >
+          <g transform={`translate(${zoom.x} ${zoom.y}) scale(${zoom.scale})`}>
+            {chartType === "bar" && <BarChartMarks {...marksProps} />}
+            {chartType === "line" && <LineChartMarks {...marksProps} />}
+            {chartType === "pie" && <PieChartMarks {...marksProps} />}
+            {chartType === "histogram" && <HistogramChartMarks {...marksProps} />}
+            {chartType === "sankey" && <SankeyChartMarks {...marksProps} />}
+          </g>
+        </svg>
+      )}
+      {isZoomed && (
+        <button type="button" className="chart-zoom-reset nodrag" onClick={reset}>
+          Reset zoom
+        </button>
+      )}
+      <ChartTooltip content={hover} theme={theme} />
+    </div>
+  );
+}
+
+export default ChartRenderer;
diff --git a/web_ui/src/app/canvas/charts/ChartTooltip.tsx b/web_ui/src/app/canvas/charts/ChartTooltip.tsx
new file mode 100644
index 00000000..323985ec
--- /dev/null
+++ b/web_ui/src/app/canvas/charts/ChartTooltip.tsx
@@ -0,0 +1,51 @@
+/**
+ * ADR-013 stage 13.2: the one tooltip presentation every chart type's hover
+ * state feeds. An HTML overlay (not SVG <text>) positioned in the wrapper's
+ * own CSS pixel space - deliberately NOT inside the zoomed/panned <g> that
+ * useZoomPane drives, so the tooltip text never scales or drifts with the
+ * chart's zoom level, matching how tooltips behave on the outer xyflow
+ * canvas itself.
+ */
+
+import type { ChartTheme } from "./chartTheme";
+
+export interface TooltipRow {
+  label: string;
+  value: string;
+}
+
+export interface TooltipContent {
+  title: string;
+  rows: TooltipRow[];
+  /** Position in the wrapper's own CSS pixel space (not SVG/content space). */
+  x: number;
+  y: number;
+}
+
+export function ChartTooltip({ content, theme }: { content: TooltipContent | null; theme: ChartTheme }) {
+  if (!content) return null;
+  return (
+    <div
+      className="chart-tooltip"
+      style={{
+        left: content.x,
+        top: content.y,
+        backgroundColor: theme.tooltipBackground,
+        borderColor: theme.tooltipBorder,
+        color: theme.text,
+        fontFamily: theme.fontFamily,
+      }}
+      role="tooltip"
+    >
+      <div className="chart-tooltip-title">{content.title}</div>
+      {content.rows.map((row) => (
+        <div className="chart-tooltip-row" key={row.label}>
+          <span className="chart-tooltip-row-label" style={{ color: theme.textMuted }}>
+            {row.label}
+          </span>
+          <span className="chart-tooltip-row-value">{row.value}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/web_ui/src/app/canvas/charts/HistogramChartMarks.tsx b/web_ui/src/app/canvas/charts/HistogramChartMarks.tsx
new file mode 100644
index 00000000..48eadf1e
--- /dev/null
+++ b/web_ui/src/app/canvas/charts/HistogramChartMarks.tsx
@@ -0,0 +1,115 @@
+/**
+ * ADR-013 stage 13.2: histogram marks - equal-width binned bars over a
+ * continuous value axis, with mean (dashed) / median (dash-dot) reference
+ * lines and a small legend, mirroring graphlink_chart_rendering.py's
+ * _render_histogram.
+ */
+
+import type { ChartMarksProps } from "./BarChartMarks";
+import { computeHistogramBins, createLinearScale, formatValue, mean, median, niceTicks } from "./chartScales";
+import { computeBottomMargin, computeLeftMargin, tooltipPositionFromEvent } from "./chartLayout";
+import { CartesianAxes, type XTick } from "./CartesianAxes";
+
+const BIN_GAP_FRACTION = 0.08;
+
+export function HistogramChartMarks({ chartData, theme, width, height, onHover, wrapperRef }: ChartMarksProps) {
+  const values = chartData.values ?? [];
+  const bins = chartData.bins ?? 10;
+  if (values.length === 0 || width <= 0 || height <= 0) return null;
+
+  const histogram = computeHistogramBins(values, bins);
+  const maxCount = Math.max(...histogram.map((bin) => bin.count));
+  const yDomainMax = maxCount * 1.18 || 1;
+  const yTicks = niceTicks(0, yDomainMax, 5);
+  const domainMax = Math.max(yDomainMax, yTicks[yTicks.length - 1]);
+
+  const marginLeft = computeLeftMargin(yTicks, Boolean(chartData.yAxis));
+  const marginRight = 16;
+  const marginTop = 12;
+  const innerWidth = Math.max(1, width - marginLeft - marginRight);
+  const marginBottom = computeBottomMargin(false, Boolean(chartData.xAxis));
+  const innerHeight = Math.max(1, height - marginTop - marginBottom);
+
+  const yScale = createLinearScale([0, domainMax], [innerHeight, 0]);
+  const valueMin = histogram[0].x0;
+  const valueMax = histogram[histogram.length - 1].x1;
+  const xScale = createLinearScale([valueMin, valueMax], [0, innerWidth]);
+
+  const xTickValues = niceTicks(valueMin, valueMax, 6).filter((tick) => tick >= valueMin && tick <= valueMax);
+  const xTicks: XTick[] = xTickValues.map((tick) => ({ position: xScale(tick), lines: [formatValue(tick)] }));
+
+  const avg = mean(values);
+  const med = median(values);
+
+  return (
+    <g transform={`translate(${marginLeft} ${marginTop})`}>
+      <CartesianAxes
+        theme={theme}
+        innerWidth={innerWidth}
+        innerHeight={innerHeight}
+        yTicks={yTicks}
+        yScale={yScale}
+        xAxisLabel={chartData.xAxis ?? ""}
+        yAxisLabel={chartData.yAxis ?? ""}
+        xTicks={xTicks}
+        rotateXTicks={false}
+      />
+      {histogram.map((bin, index) => {
+        const x0 = xScale(bin.x0);
+        const x1 = xScale(bin.x1);
+        const gap = (x1 - x0) * BIN_GAP_FRACTION;
+        const barY = yScale(bin.count);
+        return (
+          <rect
+            key={`${bin.x0}-${index}`}
+            x={x0 + gap / 2}
+            y={barY}
+            width={Math.max(0.5, x1 - x0 - gap)}
+            height={Math.max(0, innerHeight - barY)}
+            fill={theme.categorical[index % theme.categorical.length]}
+            fillOpacity={0.82}
+            stroke={theme.text}
+            strokeOpacity={0.24}
+            onPointerMove={(event) => {
+              const position = tooltipPositionFromEvent(event, wrapperRef);
+              onHover({
+                title: `${formatValue(bin.x0)} – ${formatValue(bin.x1)}`,
+                rows: [{ label: chartData.yAxis ?? "Frequency", value: formatValue(bin.count) }],
+                ...position,
+              });
+            }}
+            onPointerLeave={() => onHover(null)}
+          />
+        );
+      })}
+      <line
+        x1={xScale(avg)}
+        x2={xScale(avg)}
+        y1={0}
+        y2={innerHeight}
+        stroke={theme.categorical[0]}
+        strokeWidth={1.6}
+        strokeDasharray="6 4"
+      />
+      <line
+        x1={xScale(med)}
+        x2={xScale(med)}
+        y1={0}
+        y2={innerHeight}
+        stroke={theme.categorical[1 % theme.categorical.length]}
+        strokeWidth={1.6}
+        strokeDasharray="7 3 1 3"
+      />
+      <g transform="translate(8 8)" fontSize={9}>
+        <line x1={0} x2={14} y1={2} y2={2} stroke={theme.categorical[0]} strokeWidth={1.6} strokeDasharray="6 4" />
+        <text x={18} y={5} fill={theme.textMuted}>
+          {`Mean ${formatValue(avg)}`}
+        </text>
+        <line x1={0} x2={14} y1={16} y2={16} stroke={theme.categorical[1 % theme.categorical.length]} strokeWidth={1.6} strokeDasharray="7 3 1 3" />
+        <text x={18} y={19} fill={theme.textMuted}>
+          {`Median ${formatValue(med)}`}
+        </text>
+      </g>
+    </g>
+  );
+}
diff --git a/web_ui/src/app/canvas/charts/LineChartMarks.tsx b/web_ui/src/app/canvas/charts/LineChartMarks.tsx
new file mode 100644
index 00000000..52b6b625
--- /dev/null
+++ b/web_ui/src/app/canvas/charts/LineChartMarks.tsx
@@ -0,0 +1,108 @@
+/**
+ * ADR-013 stage 13.2: line chart marks - a stroked polyline with a
+ * translucent fill down to the zero baseline (when in range) and point
+ * markers, mirroring graphlink_chart_rendering.py's _render_line_chart
+ * (same y-domain padding rule, same <=12-points value-label cutoff).
+ */
+
+import { createLinearScale, formatValue, niceTicks, pickCategoricalTicks, wrapLabel } from "./chartScales";
+import { computeBottomMargin, computeLeftMargin, tooltipPositionFromEvent } from "./chartLayout";
+import { CartesianAxes, type XTick } from "./CartesianAxes";
+import type { ChartMarksProps } from "./BarChartMarks";
+
+const MAX_LABELED_POINTS = 12;
+const POINT_RADIUS = 4.5;
+
+export function LineChartMarks({ chartData, theme, width, height, onHover, wrapperRef }: ChartMarksProps) {
+  const values = chartData.values ?? [];
+  const labels = chartData.labels ?? [];
+  if (values.length === 0 || width <= 0 || height <= 0) return null;
+
+  const rawMin = Math.min(...values);
+  const rawMax = Math.max(...values);
+  const span = rawMax - rawMin;
+  const buffer = span * 0.18 || Math.max(Math.abs(rawMax), 1) * 0.18 || 1;
+  let domainMin = rawMin - buffer;
+  let domainMax = rawMax + buffer;
+  const yTicks = niceTicks(domainMin, domainMax, 5);
+  domainMin = Math.min(domainMin, yTicks[0]);
+  domainMax = Math.max(domainMax, yTicks[yTicks.length - 1]);
+
+  const hasYAxisLabel = Boolean(chartData.yAxis);
+  const marginLeft = computeLeftMargin(yTicks, hasYAxisLabel);
+  const marginRight = 16;
+  const marginTop = 12;
+  const innerWidth = Math.max(1, width - marginLeft - marginRight);
+
+  const { indexes: tickIndexes, rotate } = pickCategoricalTicks(labels.length, innerWidth);
+  const marginBottom = computeBottomMargin(rotate, Boolean(chartData.xAxis));
+  const innerHeight = Math.max(1, height - marginTop - marginBottom);
+
+  const yScale = createLinearScale([domainMin, domainMax], [innerHeight, 0]);
+  const slot = values.length > 1 ? innerWidth / (values.length - 1) : 0;
+  const positions = values.map((_, index) => (values.length > 1 ? index * slot : innerWidth / 2));
+  const baseline = Math.min(0, rawMin);
+  const baselineInRange = baseline >= domainMin && baseline <= domainMax;
+
+  const linePath = positions.map((x, index) => `${index === 0 ? "M" : "L"} ${x} ${yScale(values[index])}`).join(" ");
+  const areaPath = baselineInRange
+    ? [
+        `M ${positions[0]} ${yScale(baseline)}`,
+        ...positions.map((x, index) => `L ${x} ${yScale(values[index])}`),
+        `L ${positions[positions.length - 1]} ${yScale(baseline)}`,
+        "Z",
+      ].join(" ")
+    : "";
+
+  const xTicks: XTick[] = tickIndexes.map((index) => ({
+    position: positions[index],
+    lines: wrapLabel(labels[index] ?? "", 14, 2),
+  }));
+
+  const lineColor = theme.categorical[0];
+
+  return (
+    <g transform={`translate(${marginLeft} ${marginTop})`}>
+      <CartesianAxes
+        theme={theme}
+        innerWidth={innerWidth}
+        innerHeight={innerHeight}
+        yTicks={yTicks}
+        yScale={yScale}
+        xAxisLabel={chartData.xAxis ?? ""}
+        yAxisLabel={chartData.yAxis ?? ""}
+        xTicks={xTicks}
+        rotateXTicks={rotate}
+        zeroLineY={domainMin < 0 && domainMax > 0 ? yScale(0) : null}
+      />
+      {areaPath && <path d={areaPath} fill={lineColor} fillOpacity={0.15} stroke="none" />}
+      <path d={linePath} fill="none" stroke={lineColor} strokeWidth={2.8} strokeLinejoin="round" strokeLinecap="round" />
+      {positions.map((x, index) => {
+        const value = values[index];
+        const label = labels[index] ?? "";
+        return (
+          <g key={`${label}-${index}`}>
+            <circle
+              cx={x}
+              cy={yScale(value)}
+              r={POINT_RADIUS}
+              fill={theme.surface}
+              stroke={lineColor}
+              strokeWidth={1.8}
+              onPointerMove={(event) => {
+                const position = tooltipPositionFromEvent(event, wrapperRef);
+                onHover({ title: label, rows: [{ label: chartData.yAxis ?? "Value", value: formatValue(value) }], ...position });
+              }}
+              onPointerLeave={() => onHover(null)}
+            />
+            {values.length <= MAX_LABELED_POINTS && (
+              <text x={x} y={yScale(value) - 10} textAnchor="middle" fontSize={10} fill={theme.text}>
+                {formatValue(value)}
+              </text>
+            )}
+          </g>
+        );
+      })}
+    </g>
+  );
+}
diff --git a/web_ui/src/app/canvas/charts/PieChartMarks.tsx b/web_ui/src/app/canvas/charts/PieChartMarks.tsx
new file mode 100644
index 00000000..0818d58a
--- /dev/null
+++ b/web_ui/src/app/canvas/charts/PieChartMarks.tsx
@@ -0,0 +1,131 @@
+/**
+ * ADR-013 stage 13.2: pie/donut chart marks - a hand-rolled SVG arc path
+ * (no charting library pulled in for this), matching
+ * graphlink_chart_rendering.py's _render_pie_chart geometry: a donut
+ * (0.38-relative ring width => inner radius = 0.62 x outer), starting at 12
+ * o'clock and sweeping clockwise, the same >10-slices "top 9 + Other"
+ * collapse, and a center total/"Total" callout.
+ */
+
+import { useMemo } from "react";
+import type { ChartMarksProps } from "./BarChartMarks";
+import { formatValue } from "./chartScales";
+import { tooltipPositionFromEvent } from "./chartLayout";
+
+const MAX_SLICES = 10;
+const RING_WIDTH_FRACTION = 0.38;
+const LEGEND_ITEM_HEIGHT = 18;
+
+interface Slice {
+  label: string;
+  value: number;
+  startAngle: number;
+  endAngle: number;
+}
+
+function polarToCartesian(cx: number, cy: number, radius: number, angleDeg: number): { x: number; y: number } {
+  const rad = ((angleDeg - 90) * Math.PI) / 180;
+  return { x: cx + radius * Math.cos(rad), y: cy + radius * Math.sin(rad) };
+}
+
+function describeDonutSlice(cx: number, cy: number, outerR: number, innerR: number, a0: number, a1: number): string {
+  const clampedA1 = a1 - a0 >= 359.999 ? a0 + 359.999 : a1;
+  const startOuter = polarToCartesian(cx, cy, outerR, a0);
+  const endOuter = polarToCartesian(cx, cy, outerR, clampedA1);
+  const startInner = polarToCartesian(cx, cy, innerR, clampedA1);
+  const endInner = polarToCartesian(cx, cy, innerR, a0);
+  const largeArc = clampedA1 - a0 > 180 ? 1 : 0;
+  return [
+    `M ${startOuter.x} ${startOuter.y}`,
+    `A ${outerR} ${outerR} 0 ${largeArc} 1 ${endOuter.x} ${endOuter.y}`,
+    `L ${startInner.x} ${startInner.y}`,
+    `A ${innerR} ${innerR} 0 ${largeArc} 0 ${endInner.x} ${endInner.y}`,
+    "Z",
+  ].join(" ");
+}
+
+function buildSlices(labels: string[], values: number[]): Slice[] {
+  let entries = labels.map((label, index) => ({ label, value: values[index] }));
+  if (entries.length > MAX_SLICES) {
+    const ranked = [...entries].sort((a, b) => b.value - a.value);
+    const top = ranked.slice(0, MAX_SLICES - 1);
+    const remainder = ranked.slice(MAX_SLICES - 1).reduce((sum, entry) => sum + entry.value, 0);
+    entries = [...top, { label: "Other", value: remainder }];
+  }
+  const total = entries.reduce((sum, entry) => sum + entry.value, 0) || 1;
+  let cursor = 0;
+  return entries.map((entry) => {
+    const sweep = (entry.value / total) * 360;
+    const slice: Slice = { label: entry.label, value: entry.value, startAngle: cursor, endAngle: cursor + sweep };
+    cursor += sweep;
+    return slice;
+  });
+}
+
+export function PieChartMarks({ chartData, theme, width, height, onHover, wrapperRef }: ChartMarksProps) {
+  const slices = useMemo(
+    () => buildSlices(chartData.labels ?? [], chartData.values ?? []),
+    [chartData.labels, chartData.values],
+  );
+  if (slices.length === 0 || width <= 0 || height <= 0) return null;
+
+  const total = slices.reduce((sum, slice) => sum + slice.value, 0);
+  const legendWidth = width > 380 ? Math.min(180, width * 0.34) : 0;
+  const plotWidth = width - legendWidth;
+  const cx = plotWidth / 2;
+  const cy = height / 2;
+  const outerR = Math.max(10, Math.min(plotWidth, height) / 2 - 12);
+  const innerR = outerR * (1 - RING_WIDTH_FRACTION);
+
+  return (
+    <g>
+      {slices.map((slice, index) => {
+        const color = theme.categorical[index % theme.categorical.length];
+        const percentage = total ? (slice.value / total) * 100 : 0;
+        return (
+          <path
+            key={`${slice.label}-${index}`}
+            d={describeDonutSlice(cx, cy, outerR, innerR, slice.startAngle, slice.endAngle)}
+            fill={color}
+            stroke={theme.surface}
+            strokeWidth={2}
+            onPointerMove={(event) => {
+              const position = tooltipPositionFromEvent(event, wrapperRef);
+              onHover({
+                title: slice.label,
+                rows: [
+                  { label: "Value", value: formatValue(slice.value) },
+                  { label: "Share", value: `${percentage.toFixed(1)}%` },
+                ],
+                ...position,
+              });
+            }}
+            onPointerLeave={() => onHover(null)}
+          />
+        );
+      })}
+      <text x={cx} y={cy - 4} textAnchor="middle" fontSize={18} fontWeight={700} fill={theme.text}>
+        {formatValue(total)}
+      </text>
+      <text x={cx} y={cy + 16} textAnchor="middle" fontSize={11} fill={theme.textMuted}>
+        Total
+      </text>
+      {legendWidth > 0 && (
+        <g transform={`translate(${plotWidth + 16} ${height / 2 - (slices.length * LEGEND_ITEM_HEIGHT) / 2})`}>
+          {slices.map((slice, index) => {
+            const percentage = total ? (slice.value / total) * 100 : 0;
+            return (
+              <g key={`${slice.label}-legend-${index}`} transform={`translate(0 ${index * LEGEND_ITEM_HEIGHT})`}>
+                <rect width={10} height={10} y={-9} fill={theme.categorical[index % theme.categorical.length]} rx={2} />
+                <text x={16} fontSize={10} fill={theme.text}>
+                  {slice.label.length > 20 ? `${slice.label.slice(0, 19)}…` : slice.label}
+                  <tspan fill={theme.textMuted}>{`  ${percentage.toFixed(1)}%`}</tspan>
+                </text>
+              </g>
+            );
+          })}
+        </g>
+      )}
+    </g>
+  );
+}
diff --git a/web_ui/src/app/canvas/charts/SankeyChartMarks.tsx b/web_ui/src/app/canvas/charts/SankeyChartMarks.tsx
new file mode 100644
index 00000000..0ff3ce1f
--- /dev/null
+++ b/web_ui/src/app/canvas/charts/SankeyChartMarks.tsx
@@ -0,0 +1,126 @@
+/**
+ * ADR-013 stage 13.2: sankey marks - renders the layout sankeyLayout.ts
+ * computes (itself a port of graphlink_chart_rendering.py's own algorithm)
+ * as SVG: colored node blocks plus curved, variable-width flow ribbons
+ * blended between their endpoint colors, matching the backend PNG's design.
+ */
+
+import { useMemo } from "react";
+import type { ChartMarksProps } from "./BarChartMarks";
+import { computeSankeyLayout, sankeyFlowPath, type SankeyFlowLayout, type SankeyNodeLayout } from "./sankeyLayout";
+import { formatValue, wrapLabel } from "./chartScales";
+import { tooltipPositionFromEvent } from "./chartLayout";
+
+function hexToRgb(hex: string): [number, number, number] {
+  const clean = hex.replace("#", "");
+  return [parseInt(clean.slice(0, 2), 16), parseInt(clean.slice(2, 4), 16), parseInt(clean.slice(4, 6), 16)];
+}
+
+function blendHex(colorA: string, colorB: string, ratio: number): string {
+  const [ra, ga, ba] = hexToRgb(colorA);
+  const [rb, gb, bb] = hexToRgb(colorB);
+  const mix = (a: number, b: number) => Math.round(a * (1 - ratio) + b * ratio);
+  return `rgb(${mix(ra, rb)}, ${mix(ga, gb)}, ${mix(ba, bb)})`;
+}
+
+function scaleNode(node: SankeyNodeLayout, width: number, height: number): SankeyNodeLayout {
+  return { ...node, x: node.x * width, y: node.y * height, width: node.width * width, height: node.height * height };
+}
+
+function scaleFlow(flow: SankeyFlowLayout, width: number, height: number): SankeyFlowLayout {
+  return {
+    ...flow,
+    x0: flow.x0 * width,
+    x1: flow.x1 * width,
+    control: flow.control * width,
+    startY0: flow.startY0 * height,
+    startY1: flow.startY1 * height,
+    endY0: flow.endY0 * height,
+    endY1: flow.endY1 * height,
+  };
+}
+
+export function SankeyChartMarks({ chartData, theme, width, height, onHover, wrapperRef }: ChartMarksProps) {
+  const flows = chartData.flows ?? [];
+  const layout = useMemo(() => computeSankeyLayout(chartData.flows ?? []), [chartData.flows]);
+  if (flows.length === 0 || width <= 0 || height <= 0) return null;
+
+  const nodes = layout.nodes.map((node) => scaleNode(node, width, height));
+  const scaledFlows = layout.flows.map((flow) => scaleFlow(flow, width, height));
+  const colorByNode = new Map(nodes.map((node) => [node.name, theme.categorical[node.level % theme.categorical.length]]));
+
+  const throughput = new Map<string, { inflow: number; outflow: number }>();
+  for (const flow of flows) {
+    const source = throughput.get(flow.source) ?? { inflow: 0, outflow: 0 };
+    source.outflow += flow.value;
+    throughput.set(flow.source, source);
+    const target = throughput.get(flow.target) ?? { inflow: 0, outflow: 0 };
+    target.inflow += flow.value;
+    throughput.set(flow.target, target);
+  }
+
+  return (
+    <g>
+      {scaledFlows.map((flow, index) => {
+        const color = blendHex(colorByNode.get(flow.source) ?? theme.categorical[0], colorByNode.get(flow.target) ?? theme.categorical[0], 0.5);
+        return (
+          <path
+            key={`${flow.source}-${flow.target}-${index}`}
+            d={sankeyFlowPath(flow)}
+            fill={color}
+            fillOpacity={0.5}
+            stroke={color}
+            strokeOpacity={0.35}
+            onPointerMove={(event) => {
+              const position = tooltipPositionFromEvent(event, wrapperRef);
+              onHover({ title: `${flow.source} → ${flow.target}`, rows: [{ label: "Flow", value: formatValue(flow.value) }], ...position });
+            }}
+            onPointerLeave={() => onHover(null)}
+          />
+        );
+      })}
+      {nodes.map((node) => {
+        const isLastColumn = node.level === layout.maxLevel;
+        const labelX = isLastColumn ? node.x - 10 : node.x + node.width + 10;
+        const lines = wrapLabel(node.name, 16, 3);
+        const flowStats = throughput.get(node.name);
+        return (
+          <g key={node.name}>
+            <rect
+              x={node.x}
+              y={node.y}
+              width={node.width}
+              height={Math.max(1, node.height)}
+              fill={colorByNode.get(node.name)}
+              stroke={theme.text}
+              strokeOpacity={0.28}
+              rx={2}
+              onPointerMove={(event) => {
+                const position = tooltipPositionFromEvent(event, wrapperRef);
+                const rows = [];
+                if (flowStats?.outflow) rows.push({ label: "Out", value: formatValue(flowStats.outflow) });
+                if (flowStats?.inflow) rows.push({ label: "In", value: formatValue(flowStats.inflow) });
+                onHover({ title: node.name, rows, ...position });
+              }}
+              onPointerLeave={() => onHover(null)}
+            />
+            <text
+              x={labelX}
+              y={node.y + node.height / 2}
+              textAnchor={isLastColumn ? "end" : "start"}
+              dominantBaseline="middle"
+              fontSize={10}
+              fill={theme.text}
+            >
+              {lines.map((line, lineIndex) => (
+                <tspan key={line} x={labelX} dy={lineIndex === 0 ? -((lines.length - 1) * 6) : 12}>
+                  {line}
+                </tspan>
+              ))}
+            </text>
+          </g>
+        );
+      })}
+    </g>
+  );
+}
diff --git a/web_ui/src/app/canvas/charts/chartHooks.ts b/web_ui/src/app/canvas/charts/chartHooks.ts
new file mode 100644
index 00000000..b18bef69
--- /dev/null
+++ b/web_ui/src/app/canvas/charts/chartHooks.ts
@@ -0,0 +1,54 @@
+/**
+ * ADR-013 stage 13.2: small React hooks shared by every chart renderer.
+ * Split from the components themselves so the plumbing (ResizeObserver
+ * wiring, one-time theme read) doesn't have to be re-derived per chart type.
+ */
+
+import { useEffect, useRef, useState, type RefObject } from "react";
+import { FALLBACK_CHART_THEME, readChartTheme, type ChartTheme } from "./chartTheme";
+
+export interface ElementSize {
+  width: number;
+  height: number;
+}
+
+/** Tracks a DOM element's content-box size via ResizeObserver - the chart
+ * SVG's viewBox is derived from this rather than from the flow node's own
+ * chartWidth/chartHeight (see ChartNodeView.tsx's own module doc: those
+ * drive the NodeResizer's controlled size, but the actual renderable area
+ * is whatever remains after the title/toolbar chrome, which isn't a fixed
+ * pixel offset). Returns {0, 0} until the element is measured at least
+ * once - callers should not render chart geometry against a zero size. */
+export function useElementSize<T extends Element>(): [RefObject<T>, ElementSize] {
+  const ref = useRef<T>(null);
+  const [size, setSize] = useState<ElementSize>({ width: 0, height: 0 });
+
+  useEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      const box = entry.contentRect;
+      setSize((prev) => (prev.width === box.width && prev.height === box.height ? prev : { width: box.width, height: box.height }));
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, []);
+
+  return [ref, size];
+}
+
+/** Reads the chart theme once the host element is mounted. Deliberately a
+ * single read rather than a live-updating subscription: nothing in this
+ * codebase mutates `--gl-*` at runtime today (ADR-012's theme toggle is
+ * still proposed, not shipped) - see chartTheme.ts's own module doc. When
+ * ADR-012 ships a real toggle, this is the one place that would grow a
+ * listener. */
+export function useChartTheme<T extends Element>(ref: RefObject<T>): ChartTheme {
+  const [theme, setTheme] = useState<ChartTheme>(FALLBACK_CHART_THEME);
+  useEffect(() => {
+    if (ref.current) setTheme(readChartTheme(ref.current));
+  }, [ref]);
+  return theme;
+}
diff --git a/web_ui/src/app/canvas/charts/chartLayout.ts b/web_ui/src/app/canvas/charts/chartLayout.ts
new file mode 100644
index 00000000..94d2bf21
--- /dev/null
+++ b/web_ui/src/app/canvas/charts/chartLayout.ts
@@ -0,0 +1,47 @@
+/**
+ * ADR-013 stage 13.2: small DOM-adjacent layout helpers shared by every
+ * chart type - margin sizing and hover-tooltip positioning. Kept separate
+ * from chartScales.ts (which stays pure math with no DOM/event types) and
+ * from the components themselves so each chart type isn't re-deriving the
+ * same two calculations.
+ */
+
+import type { PointerEvent as ReactPointerEvent, RefObject } from "react";
+import { formatValue } from "./chartScales";
+
+export interface Margin {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
+
+const APPROX_CHAR_WIDTH_PX = 6.5;
+
+/** Left margin sized to fit the widest y-axis tick label actually being
+ * rendered, rather than a fixed guess - a chart with values in the
+ * thousands needs more room than one with single digits. */
+export function computeLeftMargin(yTicks: number[], hasYAxisLabel: boolean): number {
+  const widest = yTicks.reduce((max, tick) => Math.max(max, formatValue(tick).length), 1);
+  const tickSpace = widest * APPROX_CHAR_WIDTH_PX + 14;
+  return Math.max(hasYAxisLabel ? 44 : 32, tickSpace + (hasYAxisLabel ? 16 : 0));
+}
+
+export function computeBottomMargin(rotateXTicks: boolean, hasXAxisLabel: boolean): number {
+  const tickSpace = rotateXTicks ? 46 : 30;
+  return tickSpace + (hasXAxisLabel ? 18 : 0);
+}
+
+/** Position for an HTML tooltip overlay in the wrapper element's own CSS
+ * pixel space - deliberately derived from the pointer event's clientX/Y
+ * against the wrapper's bounding rect, NOT from any SVG-internal
+ * coordinate, so the tooltip never drifts under useZoomPane's transform
+ * (see ChartTooltip.tsx's own module doc). */
+export function tooltipPositionFromEvent(
+  event: ReactPointerEvent<Element>,
+  wrapperRef: RefObject<HTMLElement>,
+): { x: number; y: number } {
+  const rect = wrapperRef.current?.getBoundingClientRect();
+  if (!rect) return { x: 0, y: 0 };
+  return { x: event.clientX - rect.left + 12, y: event.clientY - rect.top + 12 };
+}
diff --git a/web_ui/src/app/canvas/charts/chartScales.test.ts b/web_ui/src/app/canvas/charts/chartScales.test.ts
new file mode 100644
index 00000000..e6689f78
--- /dev/null
+++ b/web_ui/src/app/canvas/charts/chartScales.test.ts
@@ -0,0 +1,137 @@
+import { describe, expect, it } from "vitest";
+import {
+  computeHistogramBins,
+  createLinearScale,
+  formatValue,
+  mean,
+  median,
+  niceTicks,
+  pickCategoricalTicks,
+  wrapLabel,
+} from "./chartScales";
+
+describe("createLinearScale", () => {
+  it("maps the domain endpoints to the range endpoints", () => {
+    const scale = createLinearScale([0, 100], [200, 0]);
+    expect(scale(0)).toBe(200);
+    expect(scale(100)).toBe(0);
+    expect(scale(50)).toBe(100);
+  });
+
+  it("extrapolates linearly for values outside the domain", () => {
+    const scale = createLinearScale([0, 10], [0, 100]);
+    expect(scale(-5)).toBe(-50);
+    expect(scale(15)).toBe(150);
+  });
+
+  it("returns the range midpoint for a zero-width domain rather than dividing by zero", () => {
+    const scale = createLinearScale([5, 5], [0, 100]);
+    expect(scale(5)).toBe(50);
+  });
+});
+
+describe("niceTicks", () => {
+  it("produces round-number ticks spanning the requested range", () => {
+    const ticks = niceTicks(0, 97, 5);
+    expect(ticks[0]).toBeLessThanOrEqual(0);
+    expect(ticks[ticks.length - 1]).toBeGreaterThanOrEqual(97);
+    for (let i = 1; i < ticks.length; i += 1) {
+      expect(ticks[i] - ticks[i - 1]).toBeCloseTo(ticks[1] - ticks[0]);
+    }
+  });
+
+  it("handles a degenerate single-value domain without crashing", () => {
+    expect(niceTicks(5, 5)).toEqual([4, 5, 6]);
+    expect(niceTicks(0, 0)).toEqual([0]);
+  });
+
+  it("handles negative domains", () => {
+    const ticks = niceTicks(-50, -10, 4);
+    expect(ticks[0]).toBeLessThanOrEqual(-50);
+    expect(ticks[ticks.length - 1]).toBeGreaterThanOrEqual(-10);
+  });
+});
+
+describe("formatValue", () => {
+  it("thousands-groups large numbers with no decimals", () => {
+    expect(formatValue(12345)).toBe("12,345");
+  });
+
+  it("snaps near-integers to whole numbers", () => {
+    expect(formatValue(4.0004)).toBe("4");
+  });
+
+  it("keeps two decimals for genuine fractions, trimming trailing zeros", () => {
+    expect(formatValue(4.5)).toBe("4.5");
+    expect(formatValue(4.25)).toBe("4.25");
+  });
+});
+
+describe("wrapLabel", () => {
+  it("returns a single line when the text fits", () => {
+    expect(wrapLabel("Q1", 14, 2)).toEqual(["Q1"]);
+  });
+
+  it("wraps onto multiple lines at word boundaries", () => {
+    const lines = wrapLabel("North America Region", 10, 2);
+    expect(lines.length).toBe(2);
+    expect(lines.join(" ")).toContain("North");
+  });
+
+  it("truncates with an ellipsis when content remains after maxLines", () => {
+    const lines = wrapLabel("one two three four five six seven eight", 6, 2);
+    expect(lines.length).toBe(2);
+    expect(lines[1].endsWith("...")).toBe(true);
+  });
+
+  it("returns an empty array for blank input", () => {
+    expect(wrapLabel("   ")).toEqual([]);
+  });
+});
+
+describe("pickCategoricalTicks", () => {
+  it("keeps every index when they all fit", () => {
+    const { indexes, rotate } = pickCategoricalTicks(3, 400);
+    expect(indexes).toEqual([0, 1, 2]);
+    expect(rotate).toBe(false);
+  });
+
+  it("thins a large label count down to a readable stride and always keeps the last index", () => {
+    const { indexes, rotate } = pickCategoricalTicks(50, 360);
+    expect(indexes[indexes.length - 1]).toBe(49);
+    expect(indexes.length).toBeLessThan(50);
+    expect(rotate).toBe(true);
+  });
+
+  it("returns nothing for zero categories", () => {
+    expect(pickCategoricalTicks(0, 400)).toEqual({ indexes: [], rotate: false });
+  });
+});
+
+describe("computeHistogramBins", () => {
+  it("splits the value range into equal-width bins and counts membership", () => {
+    const bins = computeHistogramBins([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], 5);
+    expect(bins).toHaveLength(5);
+    expect(bins.reduce((sum, bin) => sum + bin.count, 0)).toBe(10);
+    expect(bins[0].x0).toBe(0);
+    expect(bins[bins.length - 1].x1).toBe(9);
+  });
+
+  it("puts a value exactly equal to the max into the last bin, not an overflow bin", () => {
+    const bins = computeHistogramBins([0, 10], 2);
+    expect(bins).toHaveLength(2);
+    expect(bins[0].count + bins[1].count).toBe(2);
+    expect(bins[1].count).toBeGreaterThanOrEqual(1);
+  });
+});
+
+describe("mean/median", () => {
+  it("computes the arithmetic mean", () => {
+    expect(mean([1, 2, 3, 4])).toBe(2.5);
+  });
+
+  it("computes the median for both odd and even-length inputs", () => {
+    expect(median([1, 3, 2])).toBe(2);
+    expect(median([1, 2, 3, 4])).toBe(2.5);
+  });
+});
diff --git a/web_ui/src/app/canvas/charts/chartScales.ts b/web_ui/src/app/canvas/charts/chartScales.ts
new file mode 100644
index 00000000..00d690f5
--- /dev/null
+++ b/web_ui/src/app/canvas/charts/chartScales.ts
@@ -0,0 +1,165 @@
+/**
+ * ADR-013 stage 13.2: pure, framework-free scale/formatting/layout math
+ * shared by the bar/line/histogram renderers. Kept separate from any React
+ * component (same posture as ChartNodeView.tsx's own
+ * makeDebouncedChartResize) so the arithmetic is unit-testable without
+ * mounting anything, and reused across all three cartesian chart types
+ * rather than each reimplementing its own scale.
+ *
+ * `niceTicks`/`_format_value`(->formatValue)/`_wrap_label`(->wrapLabel) are
+ * deliberate ports of graphlink_chart_rendering.py's own helpers - not
+ * pixel-identical (this renders live SVG, that renders a static PNG at a
+ * fixed DPI), but the same rounding/wrapping RULES, so a chart looks like
+ * the same design language whether it's the live client render or the
+ * exported PNG.
+ */
+
+export type Scale = (value: number) => number;
+
+/** Linear interpolation from a numeric domain to a pixel range. Does not
+ * clamp - callers that need values outside the domain to just be linearly
+ * extrapolated (e.g. a zero baseline slightly outside [min, max]) rely on
+ * that. */
+export function createLinearScale(domain: [number, number], range: [number, number]): Scale {
+  const [d0, d1] = domain;
+  const [r0, r1] = range;
+  const span = d1 - d0;
+  if (span === 0) return () => (r0 + r1) / 2;
+  return (value: number) => r0 + ((value - d0) / span) * (r1 - r0);
+}
+
+/** "Nice" round-number ticks spanning at least [min, max] - the classic
+ * Sparks/D3-style algorithm: pick a step from the {1, 2, 5} x 10^n family
+ * closest to the ideal step for the requested tick count, then emit every
+ * multiple of that step inside the (slightly widened) span. */
+export function niceTicks(min: number, max: number, targetCount = 5): number[] {
+  if (!Number.isFinite(min) || !Number.isFinite(max)) return [0];
+  if (min === max) {
+    if (min === 0) return [0];
+    const magnitude = 10 ** Math.floor(Math.log10(Math.abs(min)));
+    return [min - magnitude, min, min + magnitude];
+  }
+  const span = max - min;
+  const roughStep = span / Math.max(1, targetCount);
+  const magnitude = 10 ** Math.floor(Math.log10(roughStep));
+  const residual = roughStep / magnitude;
+  let step: number;
+  if (residual >= 5) step = 5 * magnitude;
+  else if (residual >= 2) step = 2 * magnitude;
+  else step = magnitude;
+
+  const niceMin = Math.floor(min / step) * step;
+  const niceMax = Math.ceil(max / step) * step;
+  const ticks: number[] = [];
+  // Round to kill float noise (e.g. 0.1 + 0.2 style drift) at the step's own precision.
+  const decimals = Math.max(0, -Math.floor(Math.log10(step)));
+  for (let tick = niceMin; tick <= niceMax + step / 2; tick += step) {
+    ticks.push(Number(tick.toFixed(decimals + 2)));
+  }
+  return ticks;
+}
+
+/** Port of graphlink_chart_rendering.py's _format_value: thousands-grouped
+ * integers, near-integers snapped to whole numbers, everything else to 2
+ * decimal places with trailing zeros trimmed. */
+export function formatValue(value: number): string {
+  if (Math.abs(value) >= 1000) {
+    return Math.round(value).toLocaleString("en-US");
+  }
+  if (Math.abs(value - Math.round(value)) < 0.001) {
+    return Math.round(value).toLocaleString("en-US");
+  }
+  return value
+    .toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+    .replace(/0+$/, "")
+    .replace(/\.$/, "");
+}
+
+/** Port of _wrap_label - greedy word-wrap into at most `maxLines` lines of
+ * at most `width` characters, the last line ellipsis-truncated if content
+ * remains. Returns the lines as an array (the caller renders one <tspan>
+ * per line) rather than a "\n"-joined string, since SVG <text> does not
+ * wrap or honor newlines on its own. */
+export function wrapLabel(text: string, width = 14, maxLines = 2): string[] {
+  const clean = String(text).trim().replace(/\s+/g, " ");
+  if (!clean) return [];
+  const words = clean.split(" ");
+  const lines: string[] = [];
+  let current = "";
+  for (const word of words) {
+    const candidate = current ? `${current} ${word}` : word;
+    if (candidate.length > width && current) {
+      lines.push(current);
+      current = word;
+    } else {
+      current = candidate;
+    }
+  }
+  if (current) lines.push(current);
+
+  if (lines.length <= maxLines) return lines;
+  const kept = lines.slice(0, maxLines - 1);
+  const remainder = lines.slice(maxLines - 1).join(" ");
+  const budget = Math.max(1, width - 1);
+  const truncated = remainder.length > width ? `${remainder.slice(0, budget)}...` : remainder;
+  kept.push(truncated);
+  return kept;
+}
+
+export interface CategoricalTicks {
+  /** Indexes into the original labels/positions array that should render a tick. */
+  indexes: number[];
+  /** Whether the caller should rotate those tick labels (too many to fit horizontally). */
+  rotate: boolean;
+}
+
+/** Port of _set_categorical_ticks's thinning rule: show a readable subset of
+ * evenly-strided labels while always keeping the very last one, scaled to
+ * how much horizontal room is actually available. */
+export function pickCategoricalTicks(count: number, plotWidthPx: number): CategoricalTicks {
+  if (count <= 0) return { indexes: [], rotate: false };
+  const maxTicks = Math.max(4, Math.min(12, Math.floor(Math.max(1, plotWidthPx) / 72)));
+  const stride = Math.max(1, Math.ceil(count / maxTicks));
+  const indexes: number[] = [];
+  for (let index = 0; index < count; index += stride) indexes.push(index);
+  if (indexes[indexes.length - 1] !== count - 1) indexes.push(count - 1);
+  return { indexes, rotate: indexes.length > 5 };
+}
+
+export interface HistogramBin {
+  x0: number;
+  x1: number;
+  count: number;
+}
+
+/** Equal-width binning matching matplotlib's ax.hist default: `bins` equal
+ * intervals spanning [min(values), max(values)], right edge inclusive only
+ * for the final bin (a value exactly equal to the max lands in the last
+ * bin rather than overflowing). */
+export function computeHistogramBins(values: number[], bins: number): HistogramBin[] {
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  const width = (max - min) / bins || 1;
+  const counts = new Array(bins).fill(0);
+  for (const value of values) {
+    let index = Math.floor((value - min) / width);
+    if (index >= bins) index = bins - 1;
+    if (index < 0) index = 0;
+    counts[index] += 1;
+  }
+  return counts.map((count, index) => ({
+    x0: min + index * width,
+    x1: min + (index + 1) * width,
+    count,
+  }));
+}
+
+export function mean(values: number[]): number {
+  return values.reduce((sum, value) => sum + value, 0) / values.length;
+}
+
+export function median(values: number[]): number {
+  const sorted = [...values].sort((a, b) => a - b);
+  const mid = Math.floor(sorted.length / 2);
+  return sorted.length % 2 === 0 ? (sorted[mid - 1] + sorted[mid]) / 2 : sorted[mid];
+}
diff --git a/web_ui/src/app/canvas/charts/chartTheme.ts b/web_ui/src/app/canvas/charts/chartTheme.ts
new file mode 100644
index 00000000..cb260f66
--- /dev/null
+++ b/web_ui/src/app/canvas/charts/chartTheme.ts
@@ -0,0 +1,70 @@
+/**
+ * ADR-013 stage 13.2: the client renderer's theme source. Reads the SAME
+ * `--gl-*` custom properties graphlink_web_island_host.py injects into the
+ * page <head> at construction time (see gl-theme.css/gl-vars-dev.css) rather
+ * than hardcoding hex - so this renderer is automatically correct for
+ * whichever theme is actually active, with zero dependency on ADR-012's
+ * (still-proposed) theme toggle ever shipping.
+ *
+ * The categorical series palette deliberately does NOT reuse `--gl-frame-*`:
+ * those tokens are near-identical grays by design in the current theme (see
+ * GroupColorPicker.tsx's own module doc - confirmed there, not re-derived
+ * here) and would render a bar/pie/sankey chart with indistinguishable
+ * series. GROUP_NAMED_COLORS is this app's own already-established
+ * "visually distinct hues" palette (used for note/frame/container color-
+ * coding) - reusing it keeps the chart's palette consistent with the rest
+ * of the canvas instead of inventing a second one.
+ */
+
+import { GROUP_NAMED_COLORS } from "../GroupColorPicker";
+
+export interface ChartTheme {
+  categorical: string[];
+  text: string;
+  textMuted: string;
+  border: string;
+  gridline: string;
+  surface: string;
+  tooltipBackground: string;
+  tooltipBorder: string;
+  fontFamily: string;
+}
+
+/** Values mirror gl-vars-dev.css's own dark-theme defaults - used only
+ * before the first live read (SSR-safe, and jsdom-safe for tests that don't
+ * bother stubbing computed styles), never trusted over an actual read. */
+export const FALLBACK_CHART_THEME: ChartTheme = {
+  categorical: GROUP_NAMED_COLORS.map((color) => color.hex),
+  text: "#F1F1F1",
+  textMuted: "#A4A4A4",
+  border: "#3F3F3F",
+  gridline: "#424242",
+  surface: "#1E1E1E",
+  tooltipBackground: "#121212",
+  tooltipBorder: "#505050",
+  fontFamily: "'Segoe UI', sans-serif",
+};
+
+function readVar(style: CSSStyleDeclaration, name: string, fallback: string): string {
+  const value = style.getPropertyValue(name).trim();
+  return value || fallback;
+}
+
+/** Reads the live theme off `element`'s computed style. Callers pass the
+ * chart's own DOM node (or any descendant of the island root) so this picks
+ * up the values actually cascading to it, rather than assuming
+ * `document.documentElement` carries them. */
+export function readChartTheme(element: Element): ChartTheme {
+  const style = getComputedStyle(element);
+  return {
+    categorical: FALLBACK_CHART_THEME.categorical,
+    text: readVar(style, "--gl-surface-text-primary", FALLBACK_CHART_THEME.text),
+    textMuted: readVar(style, "--gl-surface-text-muted", FALLBACK_CHART_THEME.textMuted),
+    border: readVar(style, "--gl-surface-border", FALLBACK_CHART_THEME.border),
+    gridline: readVar(style, "--gl-surface-divider", FALLBACK_CHART_THEME.gridline),
+    surface: readVar(style, "--gl-surface-node-body", FALLBACK_CHART_THEME.surface),
+    tooltipBackground: readVar(style, "--gl-surface-inset-deep", FALLBACK_CHART_THEME.tooltipBackground),
+    tooltipBorder: readVar(style, "--gl-surface-border-strong", FALLBACK_CHART_THEME.tooltipBorder),
+    fontFamily: readVar(style, "--gl-font-family", FALLBACK_CHART_THEME.fontFamily),
+  };
+}
diff --git a/web_ui/src/app/canvas/charts/sankeyLayout.test.ts b/web_ui/src/app/canvas/charts/sankeyLayout.test.ts
new file mode 100644
index 00000000..68da011f
--- /dev/null
+++ b/web_ui/src/app/canvas/charts/sankeyLayout.test.ts
@@ -0,0 +1,83 @@
+import { describe, expect, it } from "vitest";
+import { computeSankeyLayout, sankeyFlowPath } from "./sankeyLayout";
+
+describe("computeSankeyLayout", () => {
+  it("levels a simple two-node chain and places the target to the right of the source", () => {
+    const layout = computeSankeyLayout([{ source: "A", target: "B", value: 5 }]);
+    const byName = new Map(layout.nodes.map((node) => [node.name, node]));
+    expect(byName.get("A")?.level).toBe(0);
+    expect(byName.get("B")?.level).toBe(1);
+    expect(byName.get("B")!.x).toBeGreaterThan(byName.get("A")!.x);
+    expect(layout.maxLevel).toBe(1);
+    expect(layout.flows).toHaveLength(1);
+  });
+
+  it("assigns a longer chain increasing levels by longest path", () => {
+    const layout = computeSankeyLayout([
+      { source: "A", target: "B", value: 4 },
+      { source: "B", target: "C", value: 4 },
+      { source: "C", target: "D", value: 4 },
+    ]);
+    const byName = new Map(layout.nodes.map((node) => [node.name, node]));
+    expect(byName.get("A")?.level).toBe(0);
+    expect(byName.get("B")?.level).toBe(1);
+    expect(byName.get("C")?.level).toBe(2);
+    expect(byName.get("D")?.level).toBe(3);
+  });
+
+  it("orders same-column nodes by descending throughput (heavier flow placed first/above)", () => {
+    const layout = computeSankeyLayout([
+      { source: "A", target: "B", value: 3 },
+      { source: "A", target: "C", value: 7 },
+    ]);
+    const byName = new Map(layout.nodes.map((node) => [node.name, node]));
+    expect(byName.get("B")?.level).toBe(1);
+    expect(byName.get("C")?.level).toBe(1);
+    // C carries more flow (7 > 3) so it's placed first in the column - a
+    // smaller y than B, which is placed after it.
+    expect(byName.get("C")!.y).toBeLessThan(byName.get("B")!.y);
+  });
+
+  it("stacks two flows out of the same source without overlapping vertical ports", () => {
+    const layout = computeSankeyLayout([
+      { source: "A", target: "B", value: 3 },
+      { source: "A", target: "C", value: 7 },
+    ]);
+    const [first, second] = layout.flows
+      .filter((flow) => flow.source === "A")
+      .sort((a, b) => a.startY0 - b.startY0);
+    // The second flow's port starts where the first one's ends - no gap,
+    // no overlap.
+    expect(second.startY0).toBeCloseTo(first.startY1, 6);
+  });
+
+  it("keeps every node's height proportional to its total throughput", () => {
+    const layout = computeSankeyLayout([
+      { source: "A", target: "B", value: 2 },
+      { source: "A", target: "C", value: 8 },
+    ]);
+    const byName = new Map(layout.nodes.map((node) => [node.name, node]));
+    // C carries 4x the flow of B, so C's node block should be ~4x as tall.
+    const ratio = byName.get("C")!.height / byName.get("B")!.height;
+    expect(ratio).toBeCloseTo(4, 1);
+  });
+
+  it("does not throw on a disconnected multi-source, multi-sink graph", () => {
+    const layout = computeSankeyLayout([
+      { source: "A", target: "X", value: 1 },
+      { source: "B", target: "Y", value: 1 },
+    ]);
+    expect(layout.nodes).toHaveLength(4);
+    expect(layout.flows).toHaveLength(2);
+  });
+});
+
+describe("sankeyFlowPath", () => {
+  it("builds a closed SVG ribbon path from the flow's geometry", () => {
+    const layout = computeSankeyLayout([{ source: "A", target: "B", value: 5 }]);
+    const path = sankeyFlowPath(layout.flows[0]);
+    expect(path.startsWith("M ")).toBe(true);
+    expect(path).toContain("C ");
+    expect(path.trim().endsWith("Z")).toBe(true);
+  });
+});
diff --git a/web_ui/src/app/canvas/charts/sankeyLayout.ts b/web_ui/src/app/canvas/charts/sankeyLayout.ts
new file mode 100644
index 00000000..a43c443a
--- /dev/null
+++ b/web_ui/src/app/canvas/charts/sankeyLayout.ts
@@ -0,0 +1,185 @@
+/**
+ * ADR-013 stage 13.2: sankey column/port layout, ported from
+ * graphlink_chart_rendering.py's _render_sankey_chart (the proven-correct
+ * longest-path leveling + proportional port-stacking algorithm the backend
+ * PNG renderer already uses) rather than inventing a fresh one or pulling in
+ * a layout library. Operates in the SAME normalized [0, 1] x [0, 1] space
+ * the Python version does - a pure function of the flow list alone, with no
+ * opinion on actual pixel size - so a caller just multiplies by its real
+ * width/height. Kept framework-free for direct unit testing (see this
+ * file's sibling chartScales.ts for the same posture).
+ */
+
+import type { ChartFlowRow } from "../../../lib/bridge-core/generated/scene-state";
+
+export interface SankeyNodeLayout {
+  name: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  level: number;
+}
+
+export interface SankeyFlowLayout {
+  source: string;
+  target: string;
+  value: number;
+  x0: number;
+  x1: number;
+  startY0: number;
+  startY1: number;
+  endY0: number;
+  endY1: number;
+  control: number;
+}
+
+export interface SankeyLayout {
+  nodes: SankeyNodeLayout[];
+  flows: SankeyFlowLayout[];
+  maxLevel: number;
+}
+
+const COLUMN_GAP = 0.03;
+const CHART_HEIGHT = 0.82;
+const X_START = 0.08;
+const X_END = 0.92;
+const FALLBACK_SCALE = 0.04;
+const MIN_FLOW_THICKNESS = 0.008;
+
+export function computeSankeyLayout(flows: ChartFlowRow[]): SankeyLayout {
+  const outgoing = new Map<string, ChartFlowRow[]>();
+  const incoming = new Map<string, ChartFlowRow[]>();
+  const indegree = new Map<string, number>();
+  const nodes = new Set<string>();
+
+  for (const flow of flows) {
+    nodes.add(flow.source);
+    nodes.add(flow.target);
+    if (!outgoing.has(flow.source)) outgoing.set(flow.source, []);
+    outgoing.get(flow.source)!.push(flow);
+    if (!incoming.has(flow.target)) incoming.set(flow.target, []);
+    incoming.get(flow.target)!.push(flow);
+    indegree.set(flow.target, (indegree.get(flow.target) ?? 0) + 1);
+    if (!indegree.has(flow.source)) indegree.set(flow.source, 0);
+  }
+
+  const levels = new Map<string, number>();
+  const queue = [...nodes].filter((node) => (indegree.get(node) ?? 0) === 0).sort();
+  for (const node of queue) levels.set(node, 0);
+
+  for (let cursor = 0; cursor < queue.length; cursor += 1) {
+    const node = queue[cursor];
+    for (const flow of outgoing.get(node) ?? []) {
+      const nextLevel = Math.max(levels.get(flow.target) ?? 0, (levels.get(node) ?? 0) + 1);
+      levels.set(flow.target, nextLevel);
+      indegree.set(flow.target, (indegree.get(flow.target) ?? 0) - 1);
+      if (indegree.get(flow.target) === 0) queue.push(flow.target);
+    }
+  }
+  for (const node of nodes) {
+    if (!levels.has(node)) {
+      const fallback = (incoming.get(node) ?? []).reduce(
+        (max, flow) => Math.max(max, (levels.get(flow.source) ?? 0) + 1),
+        0,
+      );
+      levels.set(node, fallback);
+    }
+  }
+
+  const nodeWeights = new Map<string, number>();
+  const columnMap = new Map<number, string[]>();
+  for (const node of nodes) {
+    const outWeight = (outgoing.get(node) ?? []).reduce((sum, flow) => sum + flow.value, 0);
+    const inWeight = (incoming.get(node) ?? []).reduce((sum, flow) => sum + flow.value, 0);
+    nodeWeights.set(node, Math.max(outWeight, inWeight, 1.0));
+    const level = levels.get(node) ?? 0;
+    if (!columnMap.has(level)) columnMap.set(level, []);
+    columnMap.get(level)!.push(node);
+  }
+
+  const availableColumns = columnMap.size ? Math.max(...columnMap.keys()) + 1 : 1;
+  let globalScale: number | null = null;
+  for (const columnNodes of columnMap.values()) {
+    const totalWeight = columnNodes.reduce((sum, node) => sum + (nodeWeights.get(node) ?? 0), 0);
+    const availableHeight = CHART_HEIGHT - COLUMN_GAP * Math.max(0, columnNodes.length - 1);
+    if (totalWeight <= 0 || availableHeight <= 0) continue;
+    const columnScale = availableHeight / totalWeight;
+    globalScale = globalScale === null ? columnScale : Math.min(globalScale, columnScale);
+  }
+  const scale = globalScale ?? FALLBACK_SCALE;
+
+  const step = (X_END - X_START) / Math.max(1, availableColumns - 1);
+  const nodeWidth = Math.min(0.05, step * 0.28);
+  const nodeLayout = new Map<string, SankeyNodeLayout>();
+
+  for (const level of [...columnMap.keys()].sort((a, b) => a - b)) {
+    const columnNodes = [...columnMap.get(level)!].sort((a, b) => {
+      const weightDiff = (nodeWeights.get(b) ?? 0) - (nodeWeights.get(a) ?? 0);
+      return weightDiff !== 0 ? weightDiff : a.toLowerCase().localeCompare(b.toLowerCase());
+    });
+    const totalHeight =
+      columnNodes.reduce((sum, node) => sum + (nodeWeights.get(node) ?? 0) * scale, 0) +
+      COLUMN_GAP * Math.max(0, columnNodes.length - 1);
+    let currentY = 0.5 - totalHeight / 2;
+    for (const node of columnNodes) {
+      const height = (nodeWeights.get(node) ?? 0) * scale;
+      nodeLayout.set(node, { name: node, x: X_START + level * step, y: currentY, width: nodeWidth, height, level });
+      currentY += height + COLUMN_GAP;
+    }
+  }
+
+  const outgoingCursor = new Map<string, number>();
+  const incomingCursor = new Map<string, number>();
+  for (const [node, layout] of nodeLayout) {
+    outgoingCursor.set(node, layout.y);
+    incomingCursor.set(node, layout.y);
+  }
+  const maxLevel = Math.max(0, ...[...nodeLayout.values()].map((layout) => layout.level));
+
+  const sortedFlows = [...flows].sort((a, b) => {
+    const sourceA = nodeLayout.get(a.source)!;
+    const sourceB = nodeLayout.get(b.source)!;
+    if (sourceA.level !== sourceB.level) return sourceA.level - sourceB.level;
+    if (sourceA.y !== sourceB.y) return sourceA.y - sourceB.y;
+    return nodeLayout.get(a.target)!.y - nodeLayout.get(b.target)!.y;
+  });
+
+  const flowLayouts: SankeyFlowLayout[] = sortedFlows.map((flow) => {
+    const sourceLayout = nodeLayout.get(flow.source)!;
+    const targetLayout = nodeLayout.get(flow.target)!;
+    const thickness = Math.max(flow.value * scale, MIN_FLOW_THICKNESS);
+
+    const startY0 = outgoingCursor.get(flow.source)!;
+    const startY1 = startY0 + thickness;
+    outgoingCursor.set(flow.source, startY1);
+
+    const endY0 = incomingCursor.get(flow.target)!;
+    const endY1 = endY0 + thickness;
+    incomingCursor.set(flow.target, endY1);
+
+    const x0 = sourceLayout.x + sourceLayout.width;
+    const x1 = targetLayout.x;
+    const control = Math.max(0.05, (x1 - x0) * 0.45);
+
+    return { source: flow.source, target: flow.target, value: flow.value, x0, x1, startY0, startY1, endY0, endY1, control };
+  });
+
+  return { nodes: [...nodeLayout.values()], flows: flowLayouts, maxLevel };
+}
+
+/** Builds the same 8-point ribbon path _render_sankey_chart draws (two
+ * cubic Bezier curves for the top and bottom edges of a variable-width
+ * flow, closed into one filled shape), as an SVG path `d` string. Callers
+ * pass already-pixel-scaled coordinates (this function does no scaling of
+ * its own). */
+export function sankeyFlowPath(flow: SankeyFlowLayout): string {
+  const { x0, x1, startY0, startY1, endY0, endY1, control } = flow;
+  return [
+    `M ${x0} ${startY0}`,
+    `C ${x0 + control} ${startY0} ${x1 - control} ${endY0} ${x1} ${endY0}`,
+    `L ${x1} ${endY1}`,
+    `C ${x1 - control} ${endY1} ${x0 + control} ${startY1} ${x0} ${startY1}`,
+    "Z",
+  ].join(" ");
+}
diff --git a/web_ui/src/app/canvas/charts/useZoomPane.ts b/web_ui/src/app/canvas/charts/useZoomPane.ts
new file mode 100644
index 00000000..feae7933
--- /dev/null
+++ b/web_ui/src/app/canvas/charts/useZoomPane.ts
@@ -0,0 +1,105 @@
+/**
+ * ADR-013 stage 13.2: the shared zoom/pan behavior every chart type gets for
+ * free by wrapping its content in the transformed <g> this hook drives.
+ * Deliberately a whole-content viewport transform (scale + translate applied
+ * to everything - axes included) rather than a D3-style domain-rescaling
+ * zoom: the latter would need each chart type to recompute its own scales
+ * live, which is real added complexity for a canvas where the user already
+ * has an equivalent "zoom the whole thing" gesture on the outer xyflow
+ * canvas itself - this mirrors that same mental model at the chart level
+ * instead of introducing a second, different one.
+ */
+
+import { useRef, useState, type PointerEvent as ReactPointerEvent, type WheelEvent as ReactWheelEvent } from "react";
+
+export interface ZoomState {
+  scale: number;
+  x: number;
+  y: number;
+}
+
+const IDENTITY: ZoomState = { scale: 1, x: 0, y: 0 };
+const MIN_SCALE = 1;
+const MAX_SCALE = 6;
+const WHEEL_ZOOM_FACTOR = 1.15;
+
+interface DragState {
+  pointerId: number;
+  startX: number;
+  startY: number;
+  originX: number;
+  originY: number;
+}
+
+export interface ZoomPaneHandlers {
+  onWheel: (event: ReactWheelEvent<SVGSVGElement>) => void;
+  onPointerDown: (event: ReactPointerEvent<SVGSVGElement>) => void;
+  onPointerMove: (event: ReactPointerEvent<SVGSVGElement>) => void;
+  onPointerUp: (event: ReactPointerEvent<SVGSVGElement>) => void;
+  onPointerCancel: (event: ReactPointerEvent<SVGSVGElement>) => void;
+}
+
+export interface ZoomPane {
+  zoom: ZoomState;
+  isZoomed: boolean;
+  handlers: ZoomPaneHandlers;
+  reset: () => void;
+}
+
+export function useZoomPane(): ZoomPane {
+  const [zoom, setZoom] = useState<ZoomState>(IDENTITY);
+  const dragRef = useRef<DragState | null>(null);
+
+  const onWheel = (event: ReactWheelEvent<SVGSVGElement>) => {
+    event.preventDefault();
+    const rect = event.currentTarget.getBoundingClientRect();
+    const pointerX = event.clientX - rect.left;
+    const pointerY = event.clientY - rect.top;
+    setZoom((prev) => {
+      const factor = event.deltaY < 0 ? WHEEL_ZOOM_FACTOR : 1 / WHEEL_ZOOM_FACTOR;
+      const nextScale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, prev.scale * factor));
+      if (nextScale === prev.scale) return prev;
+      // Keep the point under the cursor fixed across the zoom step: that
+      // point's position in un-scaled content space must be identical
+      // before and after, so solve for the new translate from that.
+      const contentX = (pointerX - prev.x) / prev.scale;
+      const contentY = (pointerY - prev.y) / prev.scale;
+      return { scale: nextScale, x: pointerX - contentX * nextScale, y: pointerY - contentY * nextScale };
+    });
+  };
+
+  const onPointerDown = (event: ReactPointerEvent<SVGSVGElement>) => {
+    if (zoom.scale <= MIN_SCALE) return;
+    dragRef.current = {
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      startY: event.clientY,
+      originX: zoom.x,
+      originY: zoom.y,
+    };
+    event.currentTarget.setPointerCapture(event.pointerId);
+  };
+
+  const onPointerMove = (event: ReactPointerEvent<SVGSVGElement>) => {
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    setZoom((prev) => ({
+      ...prev,
+      x: drag.originX + (event.clientX - drag.startX),
+      y: drag.originY + (event.clientY - drag.startY),
+    }));
+  };
+
+  const endDrag = (event: ReactPointerEvent<SVGSVGElement>) => {
+    if (dragRef.current?.pointerId === event.pointerId) dragRef.current = null;
+  };
+
+  const reset = () => setZoom(IDENTITY);
+
+  return {
+    zoom,
+    isZoomed: zoom.scale !== IDENTITY.scale || zoom.x !== IDENTITY.x || zoom.y !== IDENTITY.y,
+    handlers: { onWheel, onPointerDown, onPointerMove, onPointerUp: endDrag, onPointerCancel: endDrag },
+    reset,
+  };
+}
diff --git a/web_ui/src/app/canvas/renderCountGate.test.tsx b/web_ui/src/app/canvas/renderCountGate.test.tsx
index b525a051..cbb139cf 100644
--- a/web_ui/src/app/canvas/renderCountGate.test.tsx
+++ b/web_ui/src/app/canvas/renderCountGate.test.tsx
@@ -140,7 +140,7 @@ function chatRow(id: string, x: number): SceneNodeRow {
         color: null, headerColor: null, isSystemPrompt: false, isSummaryNote: false,
         isBranchComparison: false, itemIds: [], isLocked: true, groupWidth: null,
         groupHeight: null, chartType: "", chartData: {}, chartError: "",
-        chartAssetId: "", chartAssetVersion: 0, chartWidth: 680.0, chartHeight: 500.0,
+        chartWidth: 680.0, chartHeight: 500.0,
         chartAspectLocked: true, chartSourceNodeId: "", htmlSplitterState: null,
         chatScrollValue: 0.0,
         toolCalls: [], // ADR-007 stage 7.4
diff --git a/web_ui/src/app/canvas/sceneStore.test.ts b/web_ui/src/app/canvas/sceneStore.test.ts
index 880e4ecf..fa906be0 100644
--- a/web_ui/src/app/canvas/sceneStore.test.ts
+++ b/web_ui/src/app/canvas/sceneStore.test.ts
@@ -172,8 +172,6 @@ function validScenePayload(overrides: Record<string, unknown> = {}) {
         chartType: "",
         chartData: {},
         chartError: "",
-        chartAssetId: "",
-        chartAssetVersion: 0,
         chartWidth: 680.0,
         chartHeight: 500.0,
         chartAspectLocked: true,
@@ -266,8 +264,6 @@ describe("SceneStore", () => {
           { source: "B", target: "C", value: 4.5 },
         ],
       },
-      chartAssetId: "asset-chart-1",
-      chartAssetVersion: 1,
     };
 
     listeners.get("scene")!(validScenePayload({ nodes: [chartNode] }));
@@ -296,8 +292,6 @@ describe("SceneStore", () => {
         xAxis: "Quarter",
         yAxis: "Revenue",
       },
-      chartAssetId: "asset-chart-1",
-      chartAssetVersion: 1,
     };
 
     listeners.get("scene")!(validScenePayload({ nodes: [chartNode] }));
diff --git a/web_ui/src/app/styles.css b/web_ui/src/app/styles.css
index 079365f9..d5c5f7f5 100644
--- a/web_ui/src/app/styles.css
+++ b/web_ui/src/app/styles.css
@@ -6398,18 +6398,86 @@ mark.document-view-search-match-current {
   min-height: 0;
 }
 
-/* max-width/max-height + object-fit: contain - same "never blow out the
-   card, only ever scale down" contract as .image-node-img. */
-.chart-node-img {
+/* ADR-013 stage 13.2: the interactive renderer's own wrapper - position:
+   relative anchors the zoom-reset button and hover tooltip (both absolutely
+   positioned children), flex:1/min-height:0 fills the remaining card body
+   exactly like .chart-node-img used to. */
+.chart-canvas-wrapper {
+  position: relative;
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.chart-canvas-svg {
   display: block;
   width: 100%;
-  max-width: 100%;
-  height: auto;
-  max-height: 100%;
-  object-fit: contain;
+  height: 100%;
+  touch-action: none;
+}
+
+.chart-zoom-reset {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  font-size: 10px;
+  font-weight: 600;
+  font-family: inherit;
+  padding: 3px 8px;
+  color: var(--gl-surface-text-muted);
+  background-color: var(--gl-surface-inset-deep);
+  border: 1px solid var(--gl-surface-border-strong);
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.chart-zoom-reset:hover {
+  color: var(--gl-surface-text-primary);
+  background-color: var(--gl-neutral-button-hover);
+}
+
+.chart-tooltip {
+  position: absolute;
+  z-index: 10;
+  pointer-events: none;
+  min-width: 90px;
+  padding: 6px 9px;
+  border: 1px solid;
   border-radius: 6px;
-  flex: 1;
-  min-height: 0;
+  font-size: 11px;
+  line-height: 1.5;
+  box-shadow: var(--gl-shadow-2);
+}
+
+.chart-tooltip-title {
+  font-weight: 600;
+  margin-bottom: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 220px;
+}
+
+.chart-tooltip-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  white-space: nowrap;
+}
+
+.chart-canvas-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 120px;
+  padding: 16px;
+  color: var(--gl-surface-text-muted);
+  font-size: 11px;
+  text-align: center;
+  border: 1px dashed var(--gl-surface-border);
+  border-radius: 8px;
 }
 
 .chart-node-placeholder {
diff --git a/web_ui/src/lib/bridge-core/generated/scene-state.schema.json b/web_ui/src/lib/bridge-core/generated/scene-state.schema.json
index 32039ad3..0370ae55 100644
--- a/web_ui/src/lib/bridge-core/generated/scene-state.schema.json
+++ b/web_ui/src/lib/bridge-core/generated/scene-state.schema.json
@@ -110,12 +110,6 @@
           "chartAspectLocked": {
             "type": "boolean"
           },
-          "chartAssetId": {
-            "type": "string"
-          },
-          "chartAssetVersion": {
-            "type": "integer"
-          },
           "chartData": {
             "additionalProperties": false,
             "properties": {
@@ -170,6 +164,9 @@
                 },
                 "type": "array"
               },
+              "version": {
+                "type": "integer"
+              },
               "xAxis": {
                 "type": "string"
               },
@@ -755,8 +752,6 @@
           "chartType",
           "chartData",
           "chartError",
-          "chartAssetId",
-          "chartAssetVersion",
           "chartWidth",
           "chartHeight",
           "chartAspectLocked",
diff --git a/web_ui/src/lib/bridge-core/generated/scene-state.ts b/web_ui/src/lib/bridge-core/generated/scene-state.ts
index 00bd0534..7ea71e3b 100644
--- a/web_ui/src/lib/bridge-core/generated/scene-state.ts
+++ b/web_ui/src/lib/bridge-core/generated/scene-state.ts
@@ -86,8 +86,6 @@ export interface SceneNodeRow {
   chartType: string;
   chartData: ChartDataRow;
   chartError: string;
-  chartAssetId: string;
-  chartAssetVersion: number;
   chartWidth: number;
   chartHeight: number;
   chartAspectLocked: boolean;
@@ -163,6 +161,7 @@ export interface GitlinkPendingChangeRow {
 }
 
 export interface ChartDataRow {
+  version?: number | null;
   type?: "bar" | "line" | "pie" | "histogram" | "sankey" | null;
   title?: string | null;
   labels?: string[] | null;
@@ -653,16 +652,6 @@ function checkSceneNodeRow(value: unknown, path: string, errors: string[]): void
     if (fieldValue === undefined || fieldValue === null) errors.push(`${path}.chartError: missing required field`);
     else { if (typeof fieldValue !== "string") errors.push(`${path}.chartError` + ": expected string"); }
   }
-  {
-    const fieldValue = value["chartAssetId"];
-    if (fieldValue === undefined || fieldValue === null) errors.push(`${path}.chartAssetId: missing required field`);
-    else { if (typeof fieldValue !== "string") errors.push(`${path}.chartAssetId` + ": expected string"); }
-  }
-  {
-    const fieldValue = value["chartAssetVersion"];
-    if (fieldValue === undefined || fieldValue === null) errors.push(`${path}.chartAssetVersion: missing required field`);
-    else { if (typeof fieldValue !== "number") errors.push(`${path}.chartAssetVersion` + ": expected number"); }
-  }
   {
     const fieldValue = value["chartWidth"];
     if (fieldValue === undefined || fieldValue === null) errors.push(`${path}.chartWidth: missing required field`);
@@ -976,6 +965,10 @@ function checkGitlinkPendingChangeRow(value: unknown, path: string, errors: stri
 
 function checkChartDataRow(value: unknown, path: string, errors: string[]): void {
   if (!isRecord(value)) { errors.push(`${path}: expected object`); return; }
+  {
+    const fieldValue = value["version"];
+    if (fieldValue !== undefined && fieldValue !== null) { if (typeof fieldValue !== "number") errors.push(`${path}.version` + ": expected number"); }
+  }
   {
     const fieldValue = value["type"];
     if (fieldValue !== undefined && fieldValue !== null) { if (!["bar", "line", "pie", "histogram", "sankey"].includes(fieldValue as string)) errors.push(`${path}.type` + `: ${JSON.stringify(fieldValue)} is not one of [` + "bar, line, pie, histogram, sankey" + `]`); }
diff --git a/web_ui/vitest.setup.ts b/web_ui/vitest.setup.ts
index 0bee81e9..4c0a6795 100644
--- a/web_ui/vitest.setup.ts
+++ b/web_ui/vitest.setup.ts
@@ -13,7 +13,15 @@ afterEach(() => {
 // pin-overlay island (Phase 5 increment 1) is the first component needing
 // one, for its content-driven height negotiation. A minimal stub that never
 // actually fires is enough for tests: none exercise real layout, so nothing
-// needs the callback to run.
+// needs the callback to run. Deliberately stays a true no-op globally - an
+// earlier attempt at ADR-013 stage 13.2 made this fire synchronously off
+// getBoundingClientRect, which broke @xyflow/react's OWN internal
+// ResizeObserver usage (updateNodeInternals reaches for
+// window.DOMMatrixReadOnly, which jsdom also doesn't implement, and crashed
+// the moment the callback actually ran). A component whose rendering
+// depends on a real measured size (see charts/ChartRenderer.test.tsx) mocks
+// ResizeObserver locally in its own test file instead of changing this
+// shared global.
 class ResizeObserverStub {
   observe() {}
   unobserve() {}