Athena/NexusOS
1
0
Fork 0
forked from enderofwings/NexusOS
Code Pull Requests Activity

refactor(preview): simplify compile and validation paths

Browse Source 
Load Sucrase only when a JSX/TSX preview is opened, remove the hand-written transform, and leave subjective render evaluation to the reader while retaining structural fence validation.
This commit is contained in:
Athena
2026-08-26 03:37:29 -05:00
parent 7262e7730e
commit 952ef8a0c4
10 changed files with 399 additions and 1981 deletions
Download Patch File Download Diff File Expand all files Collapse all files
synapse/chat.py
+4 -113
View File
@@ -139,7 +139,6 @@ async def _normalize_to_async_generator(maybe_iterable) -> AsyncGenerator[str, N
pending_approvals: Dict[str, Dict[str, Any]] = {}
_APPROVAL_TIMEOUT = 300 # seconds; a timeout is treated as "deny all"
def _as_tool_calls(obj) -> list:
"""Normalize a parsed JSON value into Ollama-style tool_calls entries."""
if isinstance(obj, list):
@@ -208,27 +207,6 @@ def _coerce_tool_calls(msg: dict, allowed_names: set[str] | None = None) -> list
return []
_VISUAL_HINTS = _tools._RENDER_HINTS
def _render_nudge_text() -> str:
"""The one retry given to a model that ignored render_preview on a visual ask.
It arrives as a *user* turn, which means the model answers whatever it says.
Earlier wording pointed at "THIS user request" — a thing the model cannot
see — and offered "if the user's term is unclear, ask them to clarify". It
took both: two transcripts answered with "please provide the user's request
for the rendering" and nothing else. So this says only what to do next, with
no dangling reference and no escape hatch, and it names the languages the
render window actually supports rather than a hardcoded pair."""
return (
f"Use the render_preview tool now. Send complete {_tools._lang_prose()} "
f"markup drawn on a {_tools._STAGE_W}x{_tools._STAGE_H} stage, with the "
"values computed into an array and plotted point by point. Do not write "
"a ``` fence yourself."
)
def _strip_internal_turns(messages: list) -> list:
"""Flatten tool-loop messages for the final, tool-free streaming turn.
@@ -236,15 +214,13 @@ def _strip_internal_turns(messages: list) -> list:
the tools schema isn't re-sent. Their content must not go with them, though:
search/memory/document results are the reason the loop ran. Preserve those
results as an explicitly untrusted user-context turn immediately before the
real request, while dropping assistant tool-call envelopes and the synthetic
render nudge. Keeping the real request last also prevents the model from
answering the nudge or treating a tool result as the user's question."""
nudge = _render_nudge_text()
real request, while dropping assistant tool-call envelopes. Keeping the real
request last prevents the model from treating a tool result as the user's
question."""
kept = [
m for m in messages
if m.get("role") != "tool"
and not m.get("tool_calls")
and m.get("content") != nudge
]
results = [
str(m.get("content") or "")
@@ -270,35 +246,6 @@ def _strip_internal_turns(messages: list) -> list:
return kept
def _should_nudge_render(messages: list, tool_schemas: list | None) -> bool:
"""True when render_preview is available, unused, and the user asked for a visual."""
names = {
(s.get("function") or {}).get("name")
for s in (tool_schemas or [])
if isinstance(s, dict)
}
if "render_preview" not in names:
return False
for m in messages:
if m.get("role") == "assistant":
for c in (m.get("tool_calls") or []):
if (c.get("function") or {}).get("name") == "render_preview":
return False
if m.get("role") == "tool":
try:
body = _json.loads(m.get("content") or "")
if isinstance(body, dict) and ("fence" in body or "issues" in body):
return False
except Exception:
pass
user = ""
for m in reversed(messages):
if m.get("role") == "user":
user = (m.get("content") or "").lower()
break
return _tools.wants_render_preview(user)
async def _run_tool_loop(manager, messages, model, tool_schemas, temperature, num_gpu,
conversation_id="", policy="allow"):
"""Let the model call tools before the final streamed answer.
@@ -317,8 +264,6 @@ async def _run_tool_loop(manager, messages, model, tool_schemas, temperature, nu
# Let the UI show activity immediately — the first tool-turn is a full
# non-stream generation and can sit silent for a long time otherwise.
yield "__status__tools"
nudged_render = False
render_rejects = 0
allowed_names = {
(schema.get("function") or {}).get("name")
for schema in (tool_schemas or [])
@@ -333,11 +278,6 @@ async def _run_tool_loop(manager, messages, model, tool_schemas, temperature, nu
break # None/error or no tool support -> fall back to plain stream
calls = _coerce_tool_calls(msg, allowed_names)
if not calls:
# One retry: small models often skip render_preview on visual asks.
if not nudged_render and _should_nudge_render(messages, tool_schemas):
nudged_render = True
messages.append({"role": "user", "content": _render_nudge_text()})
continue
break
# Normalize content-JSON tool calls into the shape later turns expect.
if not msg.get("tool_calls"):
@@ -380,50 +320,19 @@ async def _run_tool_loop(manager, messages, model, tool_schemas, temperature, nu
continue
yield f"__status__{name}"
call_args = fn.get("arguments")
# Tell render_preview how many times it has already turned this
# model away. It withholds its scaffold on a first rejection - a
# complete, styled demo handed to a struggling model gets pasted
# rather than adapted, and then persists into the conversation as a
# template for later requests.
if name == "render_preview" and isinstance(call_args, dict):
call_args = {**call_args, "_attempt": render_rejects}
result = await _tools.dispatch(name, call_args)
messages.append({"role": "tool", "content": result})
# Cap render_preview reject loops — each retry is another full
# non-stream generation and looks like the UI is "stuck thinking".
if name == "render_preview":
try:
body = _json.loads(result)
except Exception:
body = {}
if isinstance(body, dict) and body.get("ok") is False:
render_rejects += 1
if render_rejects >= 2:
stop_after = True
elif isinstance(body, dict) and body.get("ok") is True:
if isinstance(body, dict) and body.get("ok") is True:
# Good fence in hand — let the model write the reply next.
stop_after = True
if stop_after:
break
def _last_ok_render_fence(messages: list) -> tuple[str | None, dict]:
"""Return (fence, tool_payload) from the latest successful render_preview."""
for m in reversed(messages or []):
if m.get("role") != "tool":
continue
try:
body = _json.loads(m.get("content") or "")
except Exception:
continue
if not isinstance(body, dict) or not body.get("ok"):
continue
fence = str(body.get("fence") or "").strip()
if fence.startswith("```"):
return fence, body
return None, {}
# -------------------------
# Streaming implementation
# -------------------------
@@ -471,24 +380,6 @@ async def stream_chat_response(
except Exception:
_logger.exception("tool loop failed; streaming without tools")
# If render_preview already produced a validated fence, emit it ourselves.
# Small models often "paste" a rewritten, broken copy that never runs in Preview.
forced_fence, render_meta = _last_ok_render_fence(messages)
if forced_fence:
label = render_meta.get("title") or "Interactive preview"
reply = f"{label}:\n\n{forced_fence}\n"
_logger.info(
"stream_chat_response: emitting validated render fence (chars=%d)",
len(forced_fence),
)
_synapse_trace(f"\n── TURN [{model} | render fence] {'─' * 30}\n")
_synapse_trace(f"USR: {user_message}\n{'─' * 50}\n")
_synapse_trace(reply.replace("\n", " ")[:500] + "\n")
step = 64
for i in range(0, len(reply), step):
yield reply[i:i + step]
return
messages = _strip_internal_turns(messages)
_logger.info("stream_chat_response: starting stream (model=%s, turns=%d, timeout=%s)", model, len(messages), timeout)
synapse/main.py
+1 -1
View File
@@ -72,7 +72,7 @@ _MEMORY_PREAMBLE = (
# Static capability hint, appended to every system prompt. The live Preview UI
# is frontend-only (Markdown.jsx); the model reaches it by calling the standing
# `render_preview` tool (structured markup in, validated fence out) rather than
# `render_preview` tool (structured markup in, packaged fence out) rather than
# freestyling an empty ```html stub. The tool schema carries the detailed
# requirements; this preamble just points at it.
# See synapse/tools.py: keep this short and imperative for the same reason the
synapse/tools.py
+25 -555
View File
@@ -215,473 +215,24 @@ async def _list_files(pattern: str = "", **_) -> str:
return json.dumps(sorted(hits))
# Canvas drawing APIs a real visualization must use — resizing width/height alone
# clears the buffer and draws nothing (a failure mode small models hit often).
_CANVAS_DRAW_APIS = (
"fillrect", "strokerect", "filltext", "stroketext", "lineto", "arc(",
"beziercurveto", "quadraticcurveto", "fill(", "stroke(", "putimagedata",
"drawimage", "ellips(",
)
# Rejection threshold for a preview stage. Tiny 40×40 tiles (a recurring
# small-model collapse, often copied from earlier demos) can't show a sequence.
#
# These numbers are a threshold, never advice: every message that mentions a
# size quotes _STAGE_W/_STAGE_H instead. Weak models copy the first dimensions
# they read, so a message saying "at least 320x200, prefer 480x280" reliably
# produces 320x200 — three separate transcripts landed on exactly the minimum,
# including one that had a 480x280 example in front of it. Name one size.
_MIN_CANVAS_W = 320
_MIN_CANVAS_H = 200
# The size to ask for, and the only one any message should mention.
_STAGE_W = 480
_STAGE_H = 280
# Domain-agnostic interactive shell returned on reject as a *pattern* to adapt —
# not a finished demo for any particular algorithm. The model must implement
# generate() for the user's request (or ask them to clarify first).
_INTERACTIVE_SCAFFOLD_HTML = """<!DOCTYPE html>
<html><head><meta charset="utf-8"><style>
body{margin:0;font:14px/1.4 system-ui,sans-serif;background:#111;color:#eee;padding:12px}
.row{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
input,button{font:inherit;padding:6px 10px}
canvas{display:block;width:480px;max-width:100%;height:auto;background:#1a1a1a;border:1px solid #333}
</style></head><body>
<div class="row">
<label>n <input id="n" type="number" min="1" value="20"></label>
<button id="go">Plot</button>
<span id="meta"></span>
</div>
<canvas id="c" width="480" height="280"></canvas>
<script>
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
/** Return an array of numbers (or {x,y} points) for THIS demo. */
function generate(n) {
// TODO: implement the user's algorithm / data here. Do not leave empty.
const seq = [];
for (let i = 0; i < n; i++) seq.push(i); // placeholder — replace
return seq;
}
function plot(seq) {
if (!seq || seq.length < 2) return;
const vals = seq.map(v => (typeof v === 'number' ? v : v.y));
const max = Math.max(1, ...vals);
const w = canvas.width, h = canvas.height, pad = 16;
ctx.clearRect(0, 0, w, h);
ctx.strokeStyle = '#3b82f6';
ctx.lineWidth = 2;
ctx.beginPath();
seq.forEach((v, i) => {
const x = pad + i * ((w - 2 * pad) / Math.max(1, seq.length - 1));
const y = h - pad - ((typeof v === 'number' ? v : v.y) / max) * (h - 2 * pad);
if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
});
ctx.stroke();
document.getElementById('meta').textContent = seq.length + ' points · max ' + max;
}
function go() {
plot(generate(+document.getElementById('n').value || 20));
}
document.getElementById('go').onclick = go;
go();
</script></body></html>"""
def _wants_data_visual(purpose: str = "", title: str = "", markup: str = "") -> bool:
"""True when the submission claims to be a chart/plot/interactive visual."""
blob = f"{purpose} {title} {markup}".lower()
return any(k in blob for k in (
"plot", "chart", "graph", "visual", "sequence", "orbit", "interactive",
"demo", "canvas", "diagram", "animation", "simulate", "conjecture",
))
# Component counterpart to _INTERACTIVE_SCAFFOLD_HTML, handed back when a
# jsx/tsx submission is rejected. Same contract: a pattern to adapt, not a demo
# to paste. No imports — the preview puts hooks and h/render in scope already,
# and there is no module loader in the sandbox to satisfy an import anyway.
_INTERACTIVE_SCAFFOLD_JSX = """export default function App() {
const canvasRef = useRef(null);
const [n, setN] = useState(20);
/** Return an array of numbers for THIS demo. */
function generate(count) {
// TODO: implement the user's algorithm / data here. Do not leave empty.
const seq = [];
for (let i = 0; i < count; i++) seq.push(i); // placeholder — replace
return seq;
}
useEffect(() => {
const canvas = canvasRef.current;
const ctx = canvas.getContext('2d');
const seq = generate(n);
const max = Math.max(1, ...seq);
const w = canvas.width, h = canvas.height, pad = 16;
ctx.clearRect(0, 0, w, h);
ctx.strokeStyle = '#3b82f6';
ctx.lineWidth = 2;
ctx.beginPath();
seq.forEach((v, i) => {
const x = pad + i * ((w - 2 * pad) / Math.max(1, seq.length - 1));
const y = h - pad - (v / max) * (h - 2 * pad);
if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
});
ctx.stroke();
}, [n]);
return (
<div style={{ font: '14px system-ui', background: '#111', color: '#eee', padding: 12 }}>
<label>n <input type="number" value={n} onInput={(e) => setN(+e.target.value || 1)} /></label>
<canvas ref={canvasRef} width="480" height="280" style={{ display: 'block', background: '#1a1a1a' }} />
</div>
);
}"""
def _wants_chart(purpose: str = "", title: str = "", markup: str = "") -> bool:
"""True only when the submission claims to draw *data* — a narrower test
than _wants_data_visual, which also counts "interactive" and "demo".
That wider net is right for an HTML fence, where an interactive demo with no
canvas is usually a model writing prose and calling it a visualization. It
is wrong for a component fence: a JSX counter or form is interactive through
its own elements and state, and demanding a <canvas> of it would reject the
most ordinary thing JSX is for."""
blob = f"{purpose} {title} {markup}".lower()
return any(k in blob for k in (
"plot", "chart", "graph", "visualiz", "diagram", "sequence", "orbit",
"histogram", "scatter",
))
def _decorative_svg_not_plot(markup: str) -> bool:
"""True when SVG is present but doesn't encode a multi-point data chart."""
import re
lower = markup.lower()
if "<svg" not in lower:
return False
# <defs> holds definitions, not output — nothing in it is drawn unless a
# <use>/fill references it. A long path parked in there was passing as proof
# of a real chart while the preview rendered an empty box.
if "<defs" in lower and not re.search(r"<use\b|url\(#", lower):
lower = re.sub(r"<defs\b.*?</defs\s*>", " ", lower, flags=re.S)
rich_poly = bool(re.search(
r"<polyline\b[^>]*\bpoints\s*=\s*[\"'][^\"']{40,}", lower,
))
rich_path = bool(re.search(
r"<path\b[^>]*\bd\s*=\s*[\"'][^\"']{40,}", lower,
))
builds_plot = bool(
re.search(r"createelementns\s*\(", lower)
and ("polyline" in lower or "path" in lower or "line" in lower)
and any(k in lower for k in ("foreach", "for (", "for(", "while(", "while ("))
and any(k in lower for k in ("seq", "points", "push(", "data"))
)
canvas_plot = "getcontext" in lower and any(a in lower for a in _CANVAS_DRAW_APIS)
return not (rich_poly or rich_path or builds_plot or canvas_plot)
def _critique_shared(markup: str) -> list[str]:
"""Checks that hold for every preview language."""
import re
issues: list[str] = []
lower = markup.lower()
external_attr = re.search(
r"""(?i)\b(?:src|srcset|href|xlink:href|poster|action|formaction|data)\b\s*=\s*(?:['"]\s*)?https?://""",
markup,
)
external_css = re.search(
r"""(?i)(?:url\s*\(\s*['"]?\s*https?://|@import\s+(?:url\s*\(\s*)?['"]?\s*https?://)""",
markup,
)
if external_attr or external_css:
issues.append(
"Remove external http(s) URLs — the sandboxed preview blocks them. "
"Inline CSS/JS; use data: URIs for images/fonts."
)
# Model talking about the chat UI instead of building the visual.
if any(p in lower for p in (
"preview/code", "render_preview", "live preview/code",
"paste the returned", "fenced block",
)):
issues.append(
"Do not describe the chat Preview UI — submit only the visualization "
"markup (canvas/SVG that plots data)."
)
return issues
def _critique_svg(markup: str, wants_plot: bool) -> list[str]:
import re
issues: list[str] = []
lower = markup.lower()
if "<svg" not in lower:
issues.append("SVG markup must include an <svg> root element.")
root = re.search(r"<svg\b[^>]*>", markup, re.I)
if root:
tag = root.group(0)
wm = re.search(r'\bwidth\s*=\s*["\']?(\d+)', tag, re.I)
hm = re.search(r'\bheight\s*=\s*["\']?(\d+)', tag, re.I)
if wm and int(wm.group(1)) < _MIN_CANVAS_W:
issues.append(
f'SVG width is {wm.group(1)}px — too small to read. Use '
f'width="{_STAGE_W}" height="{_STAGE_H}".'
)
if hm and int(hm.group(1)) < _MIN_CANVAS_H:
issues.append(
f'SVG height is {hm.group(1)}px — too small. Use height="{_STAGE_H}".'
)
if len(re.sub(r"\s+", "", markup)) < 60:
issues.append(
"SVG is too empty — add shapes (path/rect/circle/line/text) that "
"actually illustrate the idea."
)
if wants_plot and _decorative_svg_not_plot(markup):
issues.append(
"This SVG is decorative (gradient/rect/single line), not a data "
"chart. Build a <polyline>/<path> from many computed points, or "
"prefer a <canvas> with getContext + lineTo over an array."
)
return issues
def _critique_html(markup: str, wants_plot: bool) -> list[str]:
import re
issues: list[str] = []
lower = markup.lower()
if re.search(r"(?:width|height)\s*:\s*40px", markup, re.I):
issues.append(
"Do not use 40x40 CSS tiles — that is not a visualization. Size the "
f"stage {_STAGE_W}x{_STAGE_H}px."
)
if "<pre" in lower and ("<html" in lower or "<!doctype" in lower):
issues.append(
"Do not nest another HTML document inside <pre>. Put one interactive "
"<canvas> (or <svg>) in the body and draw there."
)
has_canvas = "<canvas" in lower
has_svg = "<svg" in lower
issues += _critique_prose(markup)
if wants_plot and not has_canvas and not has_svg:
issues.append(
"For chart/plot/interactive demos include a <canvas> or <svg> that "
"draws the data — prose alone is rejected."
)
if wants_plot and has_svg and not has_canvas and _decorative_svg_not_plot(markup):
issues.append(
"SVG stage present but it does not plot data (no multi-point "
"polyline/path, no JS that builds one from an array). Prefer "
f'<canvas width="{_STAGE_W}" height="{_STAGE_H}"> + getContext + lineTo.'
)
issues += _critique_canvas(markup)
if len(re.sub(r"\s+", "", markup)) < 40:
issues.append("markup is too short to be a useful preview.")
return issues
def _critique_prose(markup: str) -> list[str]:
"""Reject an explanation dressed up as a visualization — paragraphs, a list,
maybe a button that reveals more text, and nothing that draws.
Shared by html and jsx: a component returning four <p> elements is the same
non-answer as a page of them, and for a while jsx was accepted precisely
because this check lived only on the html side."""
import re
lower = markup.lower()
if "<canvas" in lower or "<svg" in lower:
return []
prose_tags = len(re.findall(r"<(?:p|li|h[1-6]|ul|ol)\b", lower))
toggle_only = prose_tags >= 3 and (
"display" in lower or "toggle" in lower or "<button" in lower
)
if prose_tags >= 4 or toggle_only:
return [
"This is an explanation, not a visualization. Draw the data on a "
f'<canvas width="{_STAGE_W}" height="{_STAGE_H}"> (or an <svg> chart) '
"— not paragraphs, lists, or a button that only reveals more text."
]
return []
def _critique_canvas(markup: str) -> list[str]:
"""Checks for markup that has a <canvas> in it, wherever that markup came
from — a plain HTML body or the JSX that renders one."""
import re
issues: list[str] = []
lower = markup.lower()
if "<canvas" in lower:
if "getcontext" not in lower:
issues.append(
"Canvas is present but never gets a 2D context — call "
"canvas.getContext('2d') and draw with it."
)
if not any(api in lower for api in _CANVAS_DRAW_APIS):
issues.append(
"Canvas never draws anything — plot each step with "
"fillRect/stroke/lineTo/arc/fillText (etc.). Do not only assign "
"canvas.width/height inside a loop; that clears the canvas."
)
for tag in re.findall(r"<canvas\b[^>]*>", markup, re.I):
wm = re.search(r'\bwidth\s*=\s*["\']?(\d+)', tag, re.I)
hm = re.search(r'\bheight\s*=\s*["\']?(\d+)', tag, re.I)
if wm and int(wm.group(1)) < _MIN_CANVAS_W:
issues.append(
f'Canvas width="{wm.group(1)}" is too small — use width="{_STAGE_W}" '
f'height="{_STAGE_H}", then map each data value to (x, y) pixels.'
)
if hm and int(hm.group(1)) < _MIN_CANVAS_H:
issues.append(
f'Canvas height="{hm.group(1)}" is too small — use height="{_STAGE_H}".'
)
if re.search(r'\bwidth\s*=\s*["\']?100%', tag, re.I):
issues.append(
"Use numeric canvas width/height attributes (e.g. width=\"480\"), "
"not percentages — the bitmap size must be explicit."
)
full_blit = bool(re.search(
r"(?:fillrect|clearrect)\s*\(\s*0\s*,\s*0\s*,\s*\d+\s*,\s*\d+\s*\)",
lower,
))
plots_points = bool(
re.search(r"lineto\s*\(", lower)
or re.search(r"fillrect\s*\(\s*(?!0\s*,\s*0)", lower)
or re.search(r"filltext\s*\(", lower)
or re.search(r"arc\s*\(", lower)
or re.search(r"strokerect\s*\(\s*(?!0\s*,\s*0)", lower)
)
if full_blit and not plots_points:
issues.append(
"You are only fillRect/clearRect(0,0,W,H) — that paints the whole "
"canvas, not the data. Collect values into an array, then for each "
"index i draw at x=i*step, y=height - value*scale (lineTo or "
"fillRect(x, y, barW, barH))."
)
return issues
def _critique_jsx(markup: str, wants_plot: bool) -> list[str]:
"""A JSX/TSX fence is one self-contained component. It is transformed and
mounted in the browser (interface/web/src/preview/), so the checks here are
the things that transform cannot recover from or would mount into nothing."""
import re
issues: list[str] = []
lower = markup.lower()
# Something has to be mounted: an explicit default export, a component named
# App, or some capitalized declaration to fall back to.
has_component = bool(
re.search(r"\bexport\s+default\b", markup)
or re.search(r"\bfunction\s+[A-Z]\w*", markup)
or re.search(r"\b(?:const|let|var)\s+[A-Z]\w*\s*=", markup)
or re.search(r"\bclass\s+[A-Z]\w*", markup)
)
if not has_component:
issues.append(
"No component to mount — define one with a capitalized name "
"(e.g. `function App() { ... }`) or `export default` it."
)
if "<" not in markup or not re.search(r"<[A-Za-z>]", markup):
issues.append(
"No JSX found — the component must return elements "
"(e.g. `return <div>…</div>;`)."
)
# Imports are stripped before the code runs: there is no module loader and
# no network in the sandbox. React/Preact itself is already in scope.
for module in re.findall(r"""\bfrom\s+['"]([^'"]+)['"]""", markup):
if module.split("/")[0] not in ("react", "react-dom", "preact"):
issues.append(
f"Cannot import '{module}' — the preview has no module loader and "
"no network. Inline what you need; React/Preact hooks are already "
"in scope without importing."
)
if wants_plot and "<canvas" not in lower and "<svg" not in lower:
issues.append(
"For chart/plot/interactive demos render a <canvas> or <svg> that "
"draws the data — prose alone is rejected."
)
issues += _critique_prose(markup)
issues += _critique_canvas(markup)
if len(re.sub(r"\s+", "", markup)) < 40:
issues.append("markup is too short to be a useful preview.")
return issues
# The one place that says which languages the render window supports. Each entry
# owns that language's validation; the tool schema's `lang` enum, the dispatch in
# _critique_render, and the capability line in the system prompt are all derived
# from these keys rather than repeating them.
# The one place that says which languages the render window supports. The tool
# schema's `lang` enum and the capability line in the system prompt are derived
# from these keys rather than repeated.
#
# The frontend keeps its own matching registry (PREVIEW_LANGS in
# interface/web/src/Markdown.jsx) because the two sides need different things per
# language - this side validates, that side renders - and neither should depend
# on the other at runtime. tests/test_tools.py asserts the key sets stay equal,
# so drift fails the check gate instead of silently degrading to a plain code
# block in the chat.
# interface/web/src/preview/languages.js) because the two sides need different
# things per language - this side describes them, that side renders them - and
# neither should depend on the other at runtime. tests/test_tools.py asserts the key sets
# stay equal, so drift fails the check gate instead of silently degrading to a
# plain code block in the chat.
PREVIEW_LANGS: dict[str, dict] = {
"html": {
"summary": "self-contained HTML document",
"critique": _critique_html,
# HTML also covers ordinary interactive UIs (forms, calculators, DOM
# demos). Only require a drawing surface when the request specifically
# claims to be a chart/plot/data visualization.
"wants_visual": _wants_chart,
"scaffold": _INTERACTIVE_SCAFFOLD_HTML,
},
"svg": {
"summary": "standalone SVG image",
"critique": _critique_svg,
"wants_visual": _wants_data_visual,
"scaffold": _INTERACTIVE_SCAFFOLD_HTML,
},
"jsx": {
"summary": "single Preact/React component (JSX)",
"critique": _critique_jsx,
"wants_visual": _wants_chart,
"scaffold": _INTERACTIVE_SCAFFOLD_JSX,
},
"tsx": {
"summary": "single Preact/React component (TypeScript JSX)",
"critique": _critique_jsx,
"wants_visual": _wants_chart,
"scaffold": _INTERACTIVE_SCAFFOLD_JSX,
},
"html": {"summary": "self-contained HTML document"},
"svg": {"summary": "standalone SVG image"},
"jsx": {"summary": "single Preact/React component (JSX)"},
"tsx": {"summary": "single Preact/React component (TypeScript JSX)"},
}
def _scaffold_for(lang: str) -> str:
"""The starting pattern handed back on reject. Per-language: answering a
rejected component with a full HTML document tells the model to write the
wrong thing entirely."""
entry = PREVIEW_LANGS.get(lang)
return (entry["scaffold"] if entry else _INTERACTIVE_SCAFFOLD_HTML).strip()
def _lang_prose() -> str:
"""'html or svg' — the supported languages as a phrase for prompts/errors."""
names = list(PREVIEW_LANGS)
@@ -690,74 +241,15 @@ def _lang_prose() -> str:
return f"{', '.join(names[:-1])} or {names[-1]}"
def _critique_render(lang: str, markup: str, purpose: str = "", title: str = "") -> list[str]:
"""Cheap static checks so render_preview rejects empty/fake visuals before
the model pastes them into the chat as a 'working' demo.
Scope: things that RUN but are not what was asked for — a 40x40 stage, a
decorative gradient standing in for a chart, prose with no drawing in it, a
canvas that only paints itself one colour. These fail silently no matter
what, so static checks are the only thing that can catch them.
Not in scope: code that throws. The preview reports its own runtime errors
now (the bootstrap in interface/web/src/Markdown.jsx), so guessing at them
here bought nothing and cost accuracy. Three checks were removed once that
landed, each verified against the real error channel first:
const canvas = el.getContext('2d') ... ctx.lineTo()
-> "ReferenceError: ctx is not defined (line 4)"
function collatz() ... coll(27)
-> "ReferenceError: coll is not defined (line 5)"
document.createElementNS('line')
-> "TypeError: ... 2 arguments required, but only 1 present. (line 3)"
The real messages are better than the regexes were: they carry a line
number, and they catch *any* undefined name rather than the two spellings
someone thought to anticipate. Resist re-adding a static check for anything
that already throws."""
entry = PREVIEW_LANGS.get(lang)
if entry is None:
return [f"unsupported preview language {lang!r} — use {_lang_prose()}."]
# What counts as "claimed a visual" differs by language: see _wants_chart.
wants_plot = entry["wants_visual"](purpose, title, markup)
return _critique_shared(markup) + entry["critique"](markup, wants_plot)
def _with_scaffold(payload: dict, lang: str, attempt: int) -> dict:
"""Attach the starting pattern, but only from the second rejection on.
A complete, styled, runnable document handed to a struggling model does not
get adapted — it gets pasted, and then it persists in the conversation and
comes back as retrieved context for the next request, carrying its example
domain with it. Transcripts show exactly that: a scaffold's CSS reappearing
verbatim in an answer to an unrelated prompt, in a conversation where this
tool was never even called. So the first rejection says only what is wrong;
the pattern appears once that has not been enough."""
if attempt < 1:
return payload
return {
**payload,
"scaffold": _scaffold_for(lang),
"scaffold_note": (
"A pattern to adapt, not an answer to paste. Replace generate() with "
"the logic this request actually needs; keep nothing you do not use."
),
}
async def _render_preview(
lang: str = "html",
title: str = "",
markup: str = "",
purpose: str = "",
_attempt: int = 0,
**_,
) -> str:
"""Validate + package a live-preview fence. Read-only: nothing is executed
server-side; the chat UI renders the returned fence in a sandboxed iframe.
`_attempt` is supplied by the tool loop, not by the model — it is how many
times this call has already been rejected in the current turn."""
"""Package a live-preview fence. Read-only: nothing is executed server-side;
the chat UI parses and renders the fence in a sandboxed iframe."""
lang = (lang or "html").strip().lower()
markup = (markup or "").strip()
title = (title or "").strip()
@@ -766,28 +258,10 @@ async def _render_preview(
if lang not in PREVIEW_LANGS:
return json.dumps({"ok": False, "error": f"lang must be {_lang_prose()}"})
if not markup:
return json.dumps(_with_scaffold({
return json.dumps({
"ok": False,
"error": (
f"markup is required — send the complete {lang} for the visual you "
"want, with all CSS and JS inline and no external URLs."
),
}, lang, _attempt))
issues = _critique_render(lang, markup, purpose=purpose, title=title)
if issues:
return json.dumps(_with_scaffold({
"ok": False,
"issues": issues,
"hint": (
"Fix these and call render_preview again, building the thing that "
f"was actually asked for. Draw on a {_STAGE_W}x{_STAGE_H} stage; "
"compute the values into an array first, then plot them point by "
"point with lineTo/fillRect(x,y,w,h); add <input>/<button> controls "
"when it should be interactive."
),
"purpose": purpose or None,
}, lang, _attempt))
"error": f"markup is required — send the complete {lang} preview.",
})
fence = f"```{lang}\n{markup}\n```"
return json.dumps({
@@ -912,16 +386,10 @@ REGISTRY: dict[str, tuple[dict, Callable[..., Awaitable[str]]]] = {
# terse, keep it second-person, and add nothing the model can
# recite in place of acting.
"description": (
f"Build a working visual — chart, plot, diagram, interactive demo — "
f"as self-contained {_lang_prose()} and send it here to check. "
f"Draw on a {_STAGE_W}x{_STAGE_H} stage. Compute your values into an "
"array, then plot them point by point (canvas: getContext, then "
"lineTo/fillRect(x,y,w,h)/arc per point). Add <input>/<button> "
"controls if it should be interactive. Inline all CSS and JS; the "
"preview is sandboxed with no network, so external URLs will not "
"load. Build what was asked for, not a similar demo you know better. "
"Rejected: fix what `issues` lists and send it again. "
"Accepted: paste the returned `fence` into your reply unchanged."
f"Package a working visual or interactive demo as self-contained "
f"{_lang_prose()}. Inline required CSS and JS; the sandbox has no "
"network, so external resources will not load. Paste the returned "
"`fence` into your reply unchanged."
),
"parameters": {
"type": "object",
@@ -948,8 +416,10 @@ REGISTRY: dict[str, tuple[dict, Callable[..., Awaitable[str]]]] = {
"markup": {
"type": "string",
"description": (
"Full self-contained HTML document or SVG. Inline all "
"CSS/JS. No external script/style/img URLs."
"Complete self-contained source for the selected preview "
"language. React, ReactDOM, Preact, and Preact hooks are "
"available locally; other packages and external resources "
"cannot be loaded."
),
},
},