feat(web): pre-highlight session code server-side, reject show_code placeholders

Author: ryanwaits

apps/web/src/components/console/tabbed-code.tsx

@@ -9,28 +9,54 @@ export interface CodeTab {
 	lang: string;
 	/** Code displayed in the block (may be masked) */
 	code: string;
+	/** Pre-rendered highlighted HTML. If set, no client highlighting runs. */
+	html?: string;
 	/** If set, CopyButton copies this instead of displayed code (for API key masking) */
 	copyCode?: string;
 }
 
 export function TabbedCode({ tabs }: { tabs: CodeTab[] }) {
 	const [active, setActive] = useState(0);
-	const [htmlCache, setHtmlCache] = useState<Record<number, string>>({});
 
-	const tab = tabs[active];
+	// Seed cache with any pre-rendered html from props (server-rendered path).
+	const [htmlCache, setHtmlCache] = useState<Record<number, string>>(() => {
+		const seed: Record<number, string> = {};
+		tabs.forEach((t, i) => {
+			if (t.html) seed[i] = t.html;
+		});
+		return seed;
+	});
 
+	// For tabs without pre-rendered html, batch-highlight all of them on mount
+	// so tab switches are instant cache reads instead of per-click server hits.
+	// biome-ignore lint/correctness/useExhaustiveDependencies: keyed on tabs identity; htmlCache reads are a one-shot guard
 	useEffect(() => {
-		if (htmlCache[active]) return;
+		const missing = tabs
+			.map((t, i) => ({ t, i }))
+			.filter(({ t, i }) => !t.html && htmlCache[i] === undefined);
+		if (missing.length === 0) return;
+
 		let cancelled = false;
-		highlightCode(tab.code, tab.lang).then((result) => {
-			if (!cancelled) {
-				setHtmlCache((prev) => ({ ...prev, [active]: result }));
-			}
-		});
+		Promise.all(missing.map(({ t }) => highlightCode(t.code, t.lang))).then(
+			(results) => {
+				if (cancelled) return;
+				setHtmlCache((prev) => {
+					const next = { ...prev };
+					missing.forEach(({ i }, idx) => {
+						next[i] = results[idx];
+					});
+					return next;
+				});
+			},
+		);
 		return () => {
 			cancelled = true;
 		};
-	}, [active, tab.code, tab.lang, htmlCache]);
+		// Intentionally depend on tabs identity — re-highlights when tab set changes.
+	}, [tabs]);
+
+	const tab = tabs[active];
+	const activeHtml = htmlCache[active];
 
 	return (
 		<div className="tabbed-code">
@@ -49,8 +75,8 @@ export function TabbedCode({ tabs }: { tabs: CodeTab[] }) {
 			</div>
 			<div className="tabbed-code-body">
 				<CopyButton code={tab.copyCode ?? tab.code} />
-				{htmlCache[active] ? (
-					<div dangerouslySetInnerHTML={{ __html: htmlCache[active] }} />
+				{activeHtml ? (
+					<div dangerouslySetInnerHTML={{ __html: activeHtml }} />
 				) : (
 					<pre>
 						<code>{tab.code}</code>

apps/web/src/components/sessions/message-list.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { highlightCode } from "@/components/command-palette/actions";
 import {
 	type ChatStatus,
 	type UIDataTypes,
@@ -9,7 +10,7 @@ import {
 	isTextUIPart,
 	isToolUIPart,
 } from "ai";
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { ToolPartRenderer } from "./tool-part-renderer";
 import { SessionCodeBlock } from "./tool-parts/session-code-block";
 import { StepFlow, type StepInfo } from "./tool-parts/step-flow";
@@ -365,6 +366,37 @@ function parseTextWithCodeBlocks(
 function MessageTextContent({ text }: { text: string }) {
 	const chunks = useMemo(() => parseTextWithCodeBlocks(text), [text]);
 
+	// Batch-highlight every code chunk in parallel once chunks stabilize.
+	// Keyed by chunk index; cleared when chunks identity changes.
+	const [htmlByIndex, setHtmlByIndex] = useState<Record<number, string>>({});
+
+	useEffect(() => {
+		const codeChunks = chunks
+			.map((c, i) => ({ c, i }))
+			.filter(({ c }) => c.type === "code") as Array<{
+			c: { type: "code"; code: string; lang: string };
+			i: number;
+		}>;
+		if (codeChunks.length === 0) {
+			setHtmlByIndex({});
+			return;
+		}
+		let cancelled = false;
+		Promise.all(codeChunks.map(({ c }) => highlightCode(c.code, c.lang))).then(
+			(results) => {
+				if (cancelled) return;
+				const next: Record<number, string> = {};
+				codeChunks.forEach(({ i }, idx) => {
+					next[i] = results[idx];
+				});
+				setHtmlByIndex(next);
+			},
+		);
+		return () => {
+			cancelled = true;
+		};
+	}, [chunks]);
+
 	// No code blocks — fast path
 	if (chunks.length === 1 && chunks[0].type === "prose") {
 		return (
@@ -383,6 +415,7 @@ function MessageTextContent({ text }: { text: string }) {
 						<SessionCodeBlock
 							key={`code-${i}`}
 							code={chunk.code}
+							html={htmlByIndex[i]}
 							lang={chunk.lang}
 						/>
 					);

apps/web/src/components/sessions/tool-part-renderer.tsx

@@ -223,12 +223,12 @@ function renderOutputCard(toolName: string, output: Record<string, unknown>) {
 
 		case "scaffold_subgraph": {
 			if ((output as { error?: boolean }).error) return null;
-			return (
-				<CodeCard
-					code={(output as { code: string }).code}
-					filename={(output as { filename?: string }).filename}
-				/>
-			);
+			const o = output as {
+				code: string;
+				html?: string;
+				filename?: string;
+			};
+			return <CodeCard code={o.code} html={o.html} filename={o.filename} />;
 		}
 
 		case "recall_sessions": {
@@ -266,7 +266,9 @@ function renderOutputCard(toolName: string, output: Record<string, unknown>) {
 		}
 
 		case "show_code": {
+			if ((output as { error?: boolean }).error) return null;
 			const tabs = (output.tabs ?? []) as CodeTab[];
+			if (tabs.length === 0) return null;
 			return <TabbedCode tabs={tabs} />;
 		}
 

apps/web/src/components/sessions/tool-parts/code-card.tsx

@@ -5,27 +5,31 @@ import { useCallback, useEffect, useState } from "react";
 
 interface CodeCardProps {
 	code: string;
+	/** Pre-rendered highlighted HTML. If set, no client highlighting runs. */
+	html?: string;
 	filename?: string;
 	lang?: string;
 }
 
 export function CodeCard({
 	code,
+	html: initialHtml,
 	filename,
 	lang = "typescript",
 }: CodeCardProps) {
 	const [copied, setCopied] = useState(false);
-	const [html, setHtml] = useState<string | null>(null);
+	const [html, setHtml] = useState<string | null>(initialHtml ?? null);
 
 	useEffect(() => {
+		if (initialHtml) return;
 		let cancelled = false;
 		highlightCode(code, lang).then((result) => {
 			if (!cancelled) setHtml(result);
 		});
 		return () => {
 			cancelled = true;
 		};
-	}, [code, lang]);
+	}, [code, lang, initialHtml]);
 
 	const handleCopy = useCallback(() => {
 		navigator.clipboard.writeText(code);

apps/web/src/components/sessions/tool-parts/session-code-block.tsx

@@ -5,14 +5,24 @@ import { useCallback, useEffect, useState } from "react";
 
 interface SessionCodeBlockProps {
 	code: string;
+	/** Pre-rendered highlighted HTML. If set, no client highlighting runs. */
+	html?: string;
 	lang?: string;
 }
 
-export function SessionCodeBlock({ code, lang }: SessionCodeBlockProps) {
-	const [html, setHtml] = useState<string | null>(null);
+export function SessionCodeBlock({
+	code,
+	html: initialHtml,
+	lang,
+}: SessionCodeBlockProps) {
+	const [html, setHtml] = useState<string | null>(initialHtml ?? null);
 	const [copied, setCopied] = useState(false);
 
 	useEffect(() => {
+		if (initialHtml) {
+			setHtml(initialHtml);
+			return;
+		}
 		if (!lang) return;
 		let cancelled = false;
 		highlightCode(code, lang).then((result) => {
@@ -21,7 +31,7 @@ export function SessionCodeBlock({ code, lang }: SessionCodeBlockProps) {
 		return () => {
 			cancelled = true;
 		};
-	}, [code, lang]);
+	}, [code, lang, initialHtml]);
 
 	const handleCopy = useCallback(() => {
 		navigator.clipboard.writeText(code);

apps/web/src/lib/sessions/tools/scaffold-subgraph.ts

@@ -1,3 +1,4 @@
+import { highlight } from "@/lib/highlight";
 import { generateSubgraphCode } from "@/lib/scaffold/generate";
 import { tool } from "ai";
 import { z } from "zod";
@@ -34,9 +35,7 @@ export function createScaffoldSubgraph() {
 			}
 
 			const abi = await res.json();
-			const publicFunctions = (
-				abi.functions ?? []
-			).filter(
+			const publicFunctions = (abi.functions ?? []).filter(
 				(f: Record<string, unknown>) => f.access === "public",
 			);
 
@@ -48,8 +47,10 @@ export function createScaffoldSubgraph() {
 			}
 
 			const code = generateSubgraphCode(contractId, publicFunctions);
+			const html = await highlight(code, "typescript");
 			return {
 				code,
+				html,
 				contractId,
 				filename: `subgraphs/${name}.ts`,
 				functionCount: publicFunctions.length,

apps/web/src/lib/sessions/tools/show-code.ts

@@ -1,23 +1,61 @@
+import { highlight, normalizeLang } from "@/lib/highlight";
 import { tool } from "ai";
 import { z } from "zod";
 
+// Reject obvious placeholder tokens — forces the model to substitute
+// real resource names instead of emitting {table-name} / your-api-key.
+// Allowed: real values like sk-sl_7b3719eb, contracts-registry, etc.
+const PLACEHOLDER_PATTERNS: Array<{ re: RegExp; label: string }> = [
+	{ re: /\{[a-z][a-z0-9_-]*\}/i, label: "{placeholder}" },
+	{ re: /\byour[-_][a-z0-9_-]+\b/i, label: "your-*" },
+	{ re: /\bYOUR_[A-Z0-9_]+\b/, label: "YOUR_*" },
+	{ re: /<[a-z][a-z0-9_-]*>/i, label: "<placeholder>" },
+];
+
+function findPlaceholder(code: string): string | null {
+	for (const { re, label } of PLACEHOLDER_PATTERNS) {
+		if (re.test(code)) return label;
+	}
+	return null;
+}
+
 export const showCode = tool({
 	description:
-		"Display a tabbed code example card to the user. Use this for multi-language examples with tabs: curl, Node.js, and SDK (@secondlayer/sdk). Do NOT include Python. Each tab gets syntax highlighting and a copy button.",
+		"Display a tabbed code example card to the user. Use for multi-language examples with tabs: curl, Node.js, SDK (@secondlayer/sdk). Do NOT include Python. Each tab gets syntax highlighting and a copy button. CRITICAL: every tab's code must use concrete resource values from the user's account (real subgraph name, real table name, real API key prefix). Never emit placeholder tokens like {table-name}, your-api-key, or <id> — the tool will reject them.",
 	inputSchema: z.object({
 		tabs: z
 			.array(
 				z.object({
-					label: z.string().describe("Tab label (e.g. 'curl', 'JavaScript')"),
+					label: z
+						.string()
+						.describe("Tab label (e.g. 'curl', 'Node.js', 'SDK')"),
 					lang: z
 						.string()
-						.describe(
-							"Language for syntax highlighting (bash, javascript, typescript, python, json, sql)",
-						),
-					code: z.string().describe("Code content for this tab"),
+						.describe("Language: bash, javascript, typescript, json, sql"),
+					code: z.string().describe("Code content with real resource values"),
 				}),
 			)
 			.describe("Array of code tabs to display"),
 	}),
-	execute: async ({ tabs }) => ({ tabs }),
+	execute: async ({ tabs }) => {
+		for (const t of tabs) {
+			const hit = findPlaceholder(t.code);
+			if (hit) {
+				return {
+					error: true,
+					message: `Tab "${t.label}" contains placeholder token (${hit}). Rewrite using concrete values from the user's resources — real subgraph name, real table name, real API key prefix. Do not use {braces}, <angles>, or your-* / YOUR_* tokens.`,
+				};
+			}
+		}
+
+		const rendered = await Promise.all(
+			tabs.map(async (t) => {
+				const lang = normalizeLang(t.lang);
+				const html = await highlight(t.code, lang);
+				return { label: t.label, lang, code: t.code, html };
+			}),
+		);
+
+		return { tabs: rendered };
+	},
 });