@silvery/examples 0.17.3 → 0.17.5

package/dist/apps/aichat/index.mjs

@@ -0,0 +1,1298 @@
+import { t as _usingCtx } from "../../usingCtx-CsEf0xO3.mjs";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Box, Link, ListView, Spinner, Text, TextInput, fx, useTea, useTerminalFocused, useWindowSize } from "silvery";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { run, useExit, useInput as useInput$1 } from "silvery/runtime";
+//#region apps/aichat/script.ts
+const CONTEXT_WINDOW = 2e5;
+const TOOL_COLORS = {
+	Read: "$info",
+	Edit: "$warning",
+	Bash: "$error",
+	Write: "$accent",
+	Glob: "$muted",
+	Grep: "$success"
+};
+/** Random user commands for Tab-to-inject feature. */
+const RANDOM_USER_COMMANDS = [
+	"Can you add unit tests for the auth module?",
+	"Refactor the database queries to use prepared statements.",
+	"Add TypeScript strict mode and fix any errors.",
+	"Set up CI/CD with GitHub Actions.",
+	"The search feature is slow — can you optimize it?",
+	"Add dark mode support to the UI.",
+	"We need input validation on the registration form.",
+	"Create a migration script for the new schema.",
+	"Add WebSocket support for real-time updates.",
+	"The CSV export is broken — dates are wrong."
+];
+/** Random agent responses for Tab-injected turns. */
+const RANDOM_AGENT_RESPONSES = [{
+	role: "agent",
+	thinking: "Let me analyze the codebase to understand the current structure.",
+	content: "I'll look at the relevant files and make the changes.",
+	toolCalls: [{
+		tool: "Read",
+		args: "src/index.ts",
+		output: ["export function main() { /* ... */ }"]
+	}, {
+		tool: "Edit",
+		args: "src/index.ts",
+		output: ["+  // Updated implementation"]
+	}],
+	tokens: {
+		input: 12400,
+		output: 890
+	}
+}, {
+	role: "agent",
+	content: "Done! I've made the changes and verified everything works.",
+	tokens: {
+		input: 15200,
+		output: 340
+	}
+}];
+/** Regex matching https/http URLs in output text. */
+const URL_RE = /https?:\/\/[^\s)]+/g;
+const SCRIPT = [
+	{
+		role: "user",
+		content: "Fix the login bug in auth.ts — expired tokens throw instead of refreshing.",
+		tokens: {
+			input: 84,
+			output: 0
+		}
+	},
+	{
+		role: "agent",
+		thinking: "The user reports expired tokens throw instead of refreshing. This is likely in the token validation flow. I should read auth.ts to see the current expiry check logic. The bug is probably comparing jwt.exp (seconds) with Date.now() (milliseconds).",
+		content: "Let me look at the auth module.",
+		toolCalls: [{
+			tool: "Read",
+			args: "src/auth.ts",
+			output: [
+				"export async function login(token: string) {",
+				"  const decoded = jwt.decode(token)",
+				"  if (decoded.exp < Date.now()) {",
+				"    throw new Error(\"Token expired\")",
+				"  }",
+				"  return decoded.user",
+				"}"
+			]
+		}],
+		tokens: {
+			input: 3694,
+			output: 624
+		}
+	},
+	{
+		role: "agent",
+		thinking: "Found it — decoded.exp is in seconds (Unix timestamp) but Date.now() returns milliseconds. Every token appears expired because exp (e.g. 1700000000) is always less than Date.now() (e.g. 1700000000000). I need to divide Date.now() by 1000, and change the throw to a refresh call.",
+		content: "Found it. The expiry check compares seconds (jwt.exp) to milliseconds (Date.now()). Fixing now.",
+		toolCalls: [{
+			tool: "Edit",
+			args: "src/auth.ts",
+			output: [
+				"  const decoded = jwt.decode(token)",
+				"- if (decoded.exp < Date.now()) {",
+				"-   throw new Error(\"Token expired\")",
+				"+ if (decoded.exp < Date.now() / 1000) {",
+				"+   return refreshToken(token)",
+				"  }"
+			]
+		}],
+		tokens: {
+			input: 4312,
+			output: 574
+		}
+	},
+	{
+		role: "agent",
+		content: "Running tests to verify the fix.",
+		toolCalls: [{
+			tool: "Bash",
+			args: "bun test src/auth.test.ts",
+			output: [
+				"auth.test.ts",
+				"  ✓ login with valid token (2ms)",
+				"  ✓ login with expired token refreshes (3ms)",
+				"  ✓ login with invalid token rejects (1ms)",
+				"",
+				"3 passed | 0 failed"
+			]
+		}],
+		tokens: {
+			input: 4978,
+			output: 312
+		}
+	},
+	{
+		role: "agent",
+		content: "Fixed! The bug was comparing jwt.exp (seconds since epoch) with Date.now() (milliseconds). Expired tokens now trigger a refresh instead of throwing.",
+		tokens: {
+			input: 5202,
+			output: 178
+		}
+	},
+	{
+		role: "user",
+		content: "Nice. Can you also add rate limiting to the login endpoint?",
+		tokens: {
+			input: 116,
+			output: 0
+		}
+	},
+	{
+		role: "agent",
+		thinking: "The user wants rate limiting on login. I should check if there's existing rate limiting infrastructure before building from scratch. Let me search for rate-limit patterns in the codebase.",
+		content: "I'll check what rate limiting infrastructure exists.",
+		toolCalls: [{
+			tool: "Grep",
+			args: "rateLimit|rate-limit",
+			output: [
+				"src/middleware/rate-limit.ts",
+				"src/config.ts",
+				"See https://docs.example.com/api/rate-limiting for API docs"
+			]
+		}, {
+			tool: "Read",
+			args: "src/middleware/rate-limit.ts",
+			output: [
+				"import { RateLimiter } from '@lib/rate-limit'",
+				"",
+				"export function createLimiter(opts: { window: number; max: number }) {",
+				"  return new RateLimiter(opts)",
+				"}"
+			]
+		}],
+		tokens: {
+			input: 6490,
+			output: 846
+		}
+	},
+	{
+		role: "agent",
+		thinking: "Good — there's already a RateLimiter abstraction. I just need to create an instance with appropriate settings (5 attempts per 60s window seems reasonable for login) and wire it into the auth route as middleware.",
+		content: "Good, there's already a rate limiter. I'll wire it into the auth route.",
+		toolCalls: [{
+			tool: "Edit",
+			args: "src/routes/auth.ts",
+			output: [
+				"+ import { createLimiter } from '../middleware/rate-limit'",
+				"+",
+				"+ const loginLimiter = createLimiter({ window: 60_000, max: 5 })",
+				"+",
+				"  router.post('/login', async (req, res) => {",
+				"+   const limited = await loginLimiter.check(req.ip)",
+				"+   if (limited) return res.status(429).json({ error: 'Too many attempts' })",
+				"    const { token } = req.body"
+			]
+		}],
+		tokens: {
+			input: 7782,
+			output: 756
+		}
+	},
+	{
+		role: "agent",
+		content: "Running the full test suite.",
+		toolCalls: [{
+			tool: "Bash",
+			args: "bun test",
+			output: [
+				"auth.test.ts ........... 3 passed",
+				"rate-limit.test.ts ..... 5 passed",
+				"routes/auth.test.ts .... 7 passed",
+				"",
+				"15 passed | 0 failed | 3 files"
+			]
+		}],
+		tokens: {
+			input: 8204,
+			output: 334
+		}
+	},
+	{
+		role: "agent",
+		content: "Rate limiting added: 5 attempts per minute per IP on the login endpoint. All 15 tests pass.",
+		tokens: {
+			input: 8468,
+			output: 156
+		}
+	},
+	{
+		role: "user",
+		content: "Now add i18n support for error messages. We need 日本語 (Japanese) and Deutsch (German). 🌍",
+		tokens: {
+			input: 146,
+			output: 0
+		}
+	},
+	{
+		role: "agent",
+		thinking: "i18n for error messages — I need to create translation JSON files for ja and de, then build a simple t() function that resolves message keys by locale. I'll also need to update the error responses in auth.ts to use t() with the request's locale.",
+		content: "I'll create the translation files and update the error handling.",
+		toolCalls: [{
+			tool: "Write",
+			args: "src/i18n/ja.json",
+			output: [
+				"{",
+				"  \"token_expired\": \"トークンの有効期限が切れました 🔧\",",
+				"  \"rate_limited\": \"リクエストが多すぎます。後でもう一度お試しください\",",
+				"  \"invalid_token\": \"無効なトークンです 🐛\",",
+				"  \"login_success\": \"ログイン成功 ✅\"",
+				"}"
+			]
+		}, {
+			tool: "Write",
+			args: "src/i18n/de.json",
+			output: [
+				"{",
+				"  \"token_expired\": \"Token abgelaufen\",",
+				"  \"rate_limited\": \"Zu viele Anfragen. Bitte versuchen Sie es später\",",
+				"  \"invalid_token\": \"Ungültiges Token\",",
+				"  \"login_success\": \"Anmeldung erfolgreich\"",
+				"}"
+			]
+		}],
+		tokens: {
+			input: 17868,
+			output: 1134
+		}
+	},
+	{
+		role: "agent",
+		thinking: "Now I need the i18n loader module that imports the locale files and exports a t() function. The function should look up the key in the requested locale, falling back to English defaults. Then I'll wire it into the auth error responses.",
+		content: "Now I'll create the i18n loader and wire it into the error responses.",
+		toolCalls: [{
+			tool: "Write",
+			args: "src/i18n/index.ts",
+			output: [
+				"import ja from './ja.json'",
+				"import de from './de.json'",
+				"",
+				"const locales = { ja, de, en: { /* defaults */ } }",
+				"",
+				"export function t(key: string, lang = 'en'): string {",
+				"  return locales[lang]?.[key] ?? locales.en[key] ?? key",
+				"}"
+			]
+		}, {
+			tool: "Edit",
+			args: "src/auth.ts",
+			output: [
+				"+ import { t } from './i18n'",
+				"",
+				"- return res.status(429).json({ error: 'Too many attempts' })",
+				"+ return res.status(429).json({ error: t('rate_limited', req.lang) })"
+			]
+		}],
+		tokens: {
+			input: 19752,
+			output: 890
+		}
+	},
+	{
+		role: "agent",
+		content: "Running tests with locale coverage.",
+		toolCalls: [{
+			tool: "Bash",
+			args: "bun test src/i18n/",
+			output: [
+				"i18n.test.ts",
+				"  ✓ English fallback for unknown key",
+				"  ✓ Japanese: トークンの有効期限が切れました 🔧",
+				"  ✓ German: Token abgelaufen",
+				"  ✓ Emoji preserved in translations 🐛✅",
+				"",
+				"4 passed | 0 failed"
+			]
+		}],
+		tokens: {
+			input: 20468,
+			output: 356
+		}
+	},
+	{
+		role: "agent",
+		content: "i18n support added with Japanese (日本語) and German (Deutsch) translations. Error messages are now locale-aware. 🌍✅",
+		tokens: {
+			input: 20802,
+			output: 134
+		}
+	},
+	{
+		role: "user",
+		content: "Add a health check endpoint at /health that returns the service version.",
+		tokens: {
+			input: 104,
+			output: 0
+		}
+	},
+	{
+		role: "agent",
+		thinking: "Simple task — read the version from package.json and expose it on GET /health alongside uptime. Quick implementation.",
+		content: "Simple addition — reading package.json for the version, then adding the route.",
+		toolCalls: [{
+			tool: "Read",
+			args: "package.json",
+			output: [
+				"{",
+				"  \"name\": \"auth-service\",",
+				"  \"version\": \"2.4.1\",",
+				"  ...",
+				"}"
+			]
+		}, {
+			tool: "Edit",
+			args: "src/routes/health.ts",
+			output: [
+				"+ import { version } from '../../package.json'",
+				"+",
+				"+ router.get('/health', (req, res) => {",
+				"+   res.json({ status: 'ok', version, uptime: process.uptime() })",
+				"+ })"
+			]
+		}],
+		tokens: {
+			input: 21578,
+			output: 468
+		}
+	},
+	{
+		role: "agent",
+		content: "Running final tests.",
+		toolCalls: [{
+			tool: "Bash",
+			args: "bun test",
+			output: [
+				"auth.test.ts ........... 3 passed",
+				"rate-limit.test.ts ..... 5 passed",
+				"routes/auth.test.ts .... 7 passed",
+				"routes/health.test.ts .. 2 passed",
+				"i18n.test.ts ........... 4 passed",
+				"",
+				"21 passed | 0 failed | 5 files"
+			]
+		}],
+		tokens: {
+			input: 22046,
+			output: 290
+		}
+	},
+	{
+		role: "agent",
+		content: "All done! Summary of changes:\n• Fixed token expiry bug (seconds vs milliseconds)\n• Added rate limiting (5 req/min per IP)\n• Added i18n support (日本語 + Deutsch) 🌍\n• Added /health endpoint (v2.4.1)\n\nAll 21 tests pass. Ready to commit?",
+		tokens: {
+			input: 22468,
+			output: 224
+		}
+	}
+];
+function generateStressScript() {
+	const exchanges = [];
+	const tools = [
+		"Read",
+		"Edit",
+		"Bash",
+		"Write",
+		"Grep",
+		"Glob"
+	];
+	const files = [
+		"src/auth.ts",
+		"src/db.ts",
+		"src/routes/api.ts",
+		"src/middleware/cors.ts",
+		"src/utils/crypto.ts",
+		"src/config.ts",
+		"tests/integration.test.ts",
+		"src/i18n/日本語.json"
+	];
+	let cumulativeInput = 4e3;
+	for (let i = 0; i < 200; i++) {
+		if (i % 5 === 0) {
+			const prompts = [
+				`Fix bug #${100 + i} in ${files[i % files.length]}`,
+				`Add feature: ${[
+					"caching",
+					"logging",
+					"retry",
+					"batching",
+					"バリデーション"
+				][i % 5]}`,
+				`Refactor ${files[i % files.length]} — it's too complex 🔧`,
+				`Why is test #${i} failing? 🐛`,
+				`Add 日本語 translations for module ${i}`
+			];
+			exchanges.push({
+				role: "user",
+				content: prompts[Math.floor(i / 5) % prompts.length],
+				tokens: {
+					input: 40 + i % 30,
+					output: 0
+				}
+			});
+		} else if (i % 5 === 4) exchanges.push({
+			role: "agent",
+			content: `Done with batch ${Math.floor(i / 5) + 1}. ${3 + i % 7} tests pass. ✅`,
+			tokens: {
+				input: cumulativeInput,
+				output: 45 + i % 60
+			}
+		});
+		else {
+			const tool = tools[i % tools.length];
+			const file = files[i % files.length];
+			cumulativeInput += 200 + i % 300;
+			exchanges.push({
+				role: "agent",
+				thinking: i % 3 === 0 ? `Analyzing ${file} for the reported issue...` : void 0,
+				content: `Working on ${file}...`,
+				toolCalls: [{
+					tool,
+					args: tool === "Bash" ? `bun test ${file.replace("src/", "tests/")}` : file,
+					output: [
+						`// ${tool} output for ${file}`,
+						`line ${i * 10 + 1}: processing...`,
+						tool === "Edit" ? `- old code at line ${i}` : `  existing line ${i}`,
+						tool === "Edit" ? `+ new code at line ${i}` : `  result: ok`,
+						i % 10 === 0 ? `✓ テスト合格 🎉` : `✓ done`
+					]
+				}],
+				tokens: {
+					input: cumulativeInput,
+					output: 120 + i % 200
+				}
+			});
+		}
+		if (i === 80 || i === 160) exchanges.push({
+			role: "system",
+			content: `📦 Compaction #${i === 80 ? 1 : 2}: context cleared. Scrollback preserved above.`
+		});
+	}
+	return exchanges;
+}
+const INIT_STATE = {
+	exchanges: [{
+		id: 0,
+		role: "system",
+		content: [
+			"Coding agent simulation showcasing ListView:",
+			" • ListView — unified virtualized list with cache",
+			" • Cache mode — completed exchanges cached for performance",
+			" • OSC 8 hyperlinks — clickable file paths and URLs",
+			" • $token theme colors — semantic color tokens"
+		].join("\n")
+	}],
+	scriptIdx: 0,
+	streamPhase: "done",
+	revealFraction: 1,
+	done: false,
+	compacting: false,
+	pulse: false,
+	ctrlDPending: false,
+	contextBaseline: 0,
+	offScript: false,
+	nextId: 1,
+	autoTyping: null
+};
+function formatTokens(n) {
+	if (n >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
+	if (n >= 1e3) return `${(n / 1e3).toFixed(1)}K`;
+	return String(n);
+}
+function formatCost(inputTokens, outputTokens) {
+	const cost = (inputTokens * 15 + outputTokens * 75) / 1e6;
+	if (cost < .01) return `$${cost.toFixed(4)}`;
+	return `$${cost.toFixed(2)}`;
+}
+/**
+* Compute token stats for display and compaction.
+*
+* Token values in the script are CUMULATIVE — each exchange's `input` represents
+* the total context consumed at that point. So:
+* - `currentContext`: the LAST exchange's input tokens (= current context window usage)
+* - `totalCost`: sum of all (input + output) for cost calculation (each API call costs)
+*/
+function computeCumulativeTokens(exchanges) {
+	let input = 0;
+	let output = 0;
+	let currentContext = 0;
+	for (const ex of exchanges) if (ex.tokens) {
+		input += ex.tokens.input;
+		output += ex.tokens.output;
+		if (ex.tokens.input > currentContext) currentContext = ex.tokens.input;
+	}
+	return {
+		input,
+		output,
+		currentContext
+	};
+}
+/** Next scripted user message for footer placeholder. */
+function getNextMessage(state, script, autoMode) {
+	if (autoMode || state.done || state.offScript || state.streamPhase !== "done" || state.exchanges.length === 0) return "";
+	const entry = script[state.scriptIdx];
+	return entry?.role === "user" ? entry.content : "";
+}
+function createDemoUpdate(script, fastMode, autoMode) {
+	function addExchange(state, entry) {
+		const exchange = {
+			...entry,
+			id: state.nextId
+		};
+		return {
+			...state,
+			exchanges: [...state.exchanges, exchange],
+			nextId: state.nextId + 1
+		};
+	}
+	function startStreaming(state, entry) {
+		const s = addExchange(state, entry);
+		if (entry.role !== "agent" || fastMode) return [{
+			...s,
+			streamPhase: "done",
+			revealFraction: 1
+		}, []];
+		if (entry.thinking) return [{
+			...s,
+			streamPhase: "thinking",
+			revealFraction: 0
+		}, [fx.delay(1200, { type: "endThinking" })]];
+		return [{
+			...s,
+			streamPhase: "streaming",
+			revealFraction: 0
+		}, [fx.interval(50, { type: "streamTick" }, "reveal")]];
+	}
+	function autoAdvanceEffects(state) {
+		if (state.done || state.compacting || state.streamPhase !== "done") return [];
+		const next = script[state.scriptIdx];
+		if (!next) return autoMode ? [fx.delay(0, { type: "autoAdvance" })] : [];
+		if (autoMode || next.role !== "user") return [fx.delay(fastMode ? 100 : 400, { type: "autoAdvance" })];
+		return [];
+	}
+	function doAdvance(state, extraEffects = []) {
+		if (state.done || state.compacting || state.streamPhase !== "done") return state;
+		if (state.scriptIdx >= script.length) return autoMode ? {
+			...state,
+			done: true
+		} : state;
+		const entry = script[state.scriptIdx];
+		let s = {
+			...state,
+			scriptIdx: state.scriptIdx + 1
+		};
+		const effects = [...extraEffects];
+		let streamFx;
+		[s, streamFx] = startStreaming(s, entry);
+		effects.push(...streamFx);
+		if (fastMode) {
+			while (s.scriptIdx < script.length && script[s.scriptIdx].role !== "user") {
+				[s, streamFx] = startStreaming({
+					...s,
+					scriptIdx: s.scriptIdx + 1
+				}, script[s.scriptIdx]);
+				effects.push(...streamFx);
+			}
+			effects.push(...autoAdvanceEffects(s));
+		} else if (entry.role === "user") {
+			if (s.scriptIdx < script.length && script[s.scriptIdx].role === "agent") {
+				[s, streamFx] = startStreaming({
+					...s,
+					scriptIdx: s.scriptIdx + 1
+				}, script[s.scriptIdx]);
+				effects.push(...streamFx);
+			}
+		}
+		return [s, effects];
+	}
+	return function update(state, msg) {
+		switch (msg.type) {
+			case "mount": return doAdvance(state, [fx.interval(400, { type: "pulse" }, "pulse")]);
+			case "advance":
+			case "autoAdvance":
+				if (autoMode && !fastMode && state.streamPhase === "done" && !state.done && !state.compacting) {
+					const next = script[state.scriptIdx];
+					if (next?.role === "user") return [{
+						...state,
+						autoTyping: {
+							full: next.content,
+							revealed: 0
+						}
+					}, [fx.interval(30, { type: "typingTick" }, "typing")]];
+				}
+				if (autoMode && state.scriptIdx >= script.length && state.streamPhase === "done") return {
+					...state,
+					done: true
+				};
+				return doAdvance(state);
+			case "typingTick": {
+				if (!state.autoTyping) return state;
+				const next = state.autoTyping.revealed + 1;
+				if (next >= state.autoTyping.full.length) return [{
+					...state,
+					autoTyping: {
+						...state.autoTyping,
+						revealed: state.autoTyping.full.length
+					}
+				}, [fx.cancel("typing"), fx.delay(300, { type: "autoTypingDone" })]];
+				return {
+					...state,
+					autoTyping: {
+						...state.autoTyping,
+						revealed: next
+					}
+				};
+			}
+			case "autoTypingDone": return doAdvance({
+				...state,
+				autoTyping: null
+			});
+			case "endThinking": return [{
+				...state,
+				streamPhase: "streaming",
+				revealFraction: 0
+			}, [fx.interval(50, { type: "streamTick" }, "reveal")]];
+			case "streamTick": {
+				const last = state.exchanges[state.exchanges.length - 1];
+				const rate = last?.thinking ? .08 : .12;
+				const frac = Math.min(state.revealFraction + rate, 1);
+				if (frac < 1) return {
+					...state,
+					revealFraction: frac
+				};
+				const tools = last?.toolCalls ?? [];
+				if (tools.length > 0) return [{
+					...state,
+					streamPhase: "tools",
+					revealFraction: 1
+				}, [fx.cancel("reveal"), fx.delay(600 * tools.length, { type: "endTools" })]];
+				const s = {
+					...state,
+					streamPhase: "done",
+					revealFraction: 1
+				};
+				return [s, [fx.cancel("reveal"), ...autoAdvanceEffects(s)]];
+			}
+			case "endTools": {
+				const s = {
+					...state,
+					streamPhase: "done"
+				};
+				return [s, autoAdvanceEffects(s)];
+			}
+			case "submit": {
+				const base = state.streamPhase !== "done" ? {
+					...state,
+					streamPhase: "done",
+					revealFraction: 1,
+					autoTyping: null
+				} : state.autoTyping ? {
+					...state,
+					autoTyping: null
+				} : state;
+				const cancelEffects = state.streamPhase !== "done" ? [fx.cancel("reveal"), fx.cancel("typing")] : [fx.cancel("typing")];
+				if (!msg.text.trim()) return [base, cancelEffects];
+				if (base.done) return base;
+				const s = addExchange(base, {
+					role: "user",
+					content: msg.text,
+					tokens: {
+						input: msg.text.length * 4,
+						output: 0
+					}
+				});
+				if (s.scriptIdx < script.length) {
+					let nextIdx = s.scriptIdx;
+					while (nextIdx < script.length && script[nextIdx].role === "user") nextIdx++;
+					return [{
+						...s,
+						scriptIdx: nextIdx
+					}, [...cancelEffects, fx.delay(150, { type: "autoAdvance" })]];
+				}
+				return [{
+					...s,
+					offScript: true
+				}, [...cancelEffects, fx.delay(150, { type: "respondRandom" })]];
+			}
+			case "respondRandom": {
+				const resp = RANDOM_AGENT_RESPONSES[Math.floor(Math.random() * RANDOM_AGENT_RESPONSES.length)];
+				const [s, effects] = startStreaming(state, resp);
+				return [{
+					...s,
+					offScript: true
+				}, effects];
+			}
+			case "compact": {
+				if (state.done || state.compacting) return state;
+				const cumulative = computeCumulativeTokens(state.exchanges);
+				return [{
+					...state,
+					streamPhase: "done",
+					revealFraction: 1,
+					compacting: true,
+					contextBaseline: cumulative.currentContext,
+					exchanges: state.exchanges,
+					autoTyping: null
+				}, [
+					fx.cancel("reveal"),
+					fx.cancel("typing"),
+					fx.delay(fastMode ? 300 : 3e3, { type: "compactDone" })
+				]];
+			}
+			case "compactDone": return doAdvance({
+				...state,
+				compacting: false
+			});
+			case "pulse": return {
+				...state,
+				pulse: !state.pulse
+			};
+			case "setCtrlDPending": return {
+				...state,
+				ctrlDPending: msg.pending
+			};
+			default: return state;
+		}
+	};
+}
+//#endregion
+//#region apps/aichat/components.tsx
+/** Split content into a short title (first sentence) and the remaining body.
+* Title must be ≤40 chars to fit on the header line with metadata. */
+function splitTitleBody(content) {
+	const match = content.match(/^(.+?[.!?])\s+(.+)$/s);
+	if (match && match[1].length <= 40) return {
+		title: match[1],
+		body: match[2]
+	};
+	if (content.length <= 40) return {
+		title: content,
+		body: ""
+	};
+	return {
+		title: "",
+		body: content
+	};
+}
+/** Render a line with auto-linked URLs. */
+function LinkifiedLine({ text, dim, color }) {
+	const parts = [];
+	let lastIndex = 0;
+	let match;
+	URL_RE.lastIndex = 0;
+	while ((match = URL_RE.exec(text)) !== null) {
+		if (match.index > lastIndex) parts.push(/* @__PURE__ */ jsx(Text, {
+			dim,
+			color,
+			children: text.slice(lastIndex, match.index)
+		}, `t${lastIndex}`));
+		const url = match[0];
+		parts.push(/* @__PURE__ */ jsx(Link, {
+			href: url,
+			dim,
+			children: url
+		}, `l${match.index}`));
+		lastIndex = match.index + url.length;
+	}
+	if (lastIndex < text.length) parts.push(/* @__PURE__ */ jsx(Text, {
+		dim,
+		color,
+		children: text.slice(lastIndex)
+	}, `t${lastIndex}`));
+	if (parts.length === 0) return /* @__PURE__ */ jsx(Text, {
+		dim,
+		color,
+		children: text
+	});
+	return /* @__PURE__ */ jsx(Text, { children: parts });
+}
+/** Thinking block — shows thinking text preview in the body. */
+function ThinkingBlock({ text, done }) {
+	if (done) return /* @__PURE__ */ jsx(Text, {
+		color: "$muted",
+		italic: true,
+		children: "▸ thought"
+	});
+	return /* @__PURE__ */ jsx(Text, {
+		color: "$muted",
+		wrap: "truncate",
+		italic: true,
+		children: text
+	});
+}
+/** Tool call with lifecycle: spinner -> output -> checkmark. */
+function ToolCallBlock({ call, phase }) {
+	const color = TOOL_COLORS[call.tool] ?? "$muted";
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		marginTop: 0,
+		children: [/* @__PURE__ */ jsxs(Text, { children: [
+			phase === "running" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Spinner, { type: "dots" }), " "] }) : phase === "done" ? /* @__PURE__ */ jsx(Text, {
+				color: "$success",
+				children: "✓ "
+			}) : /* @__PURE__ */ jsx(Text, {
+				color: "$muted",
+				children: "○ "
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				color,
+				bold: true,
+				children: call.tool
+			}),
+			" ",
+			call.tool === "Bash" || call.tool === "Grep" || call.tool === "Glob" ? /* @__PURE__ */ jsx(Text, {
+				color: "$muted",
+				children: call.args
+			}) : /* @__PURE__ */ jsx(Link, {
+				href: `file://${call.args}`,
+				children: call.args
+			})
+		] }), phase === "done" && /* @__PURE__ */ jsx(Box, {
+			flexDirection: "column",
+			paddingLeft: 2,
+			children: call.output.map((line, i) => {
+				if (line.startsWith("+")) return /* @__PURE__ */ jsx(LinkifiedLine, {
+					text: line,
+					color: "$success"
+				}, i);
+				if (line.startsWith("-")) return /* @__PURE__ */ jsx(LinkifiedLine, {
+					text: line,
+					color: "$error"
+				}, i);
+				return /* @__PURE__ */ jsx(LinkifiedLine, { text: line }, i);
+			})
+		})]
+	});
+}
+/** Streaming text — reveals content word by word. */
+function StreamingText({ fullText, revealFraction, showCursor }) {
+	if (revealFraction >= 1) return /* @__PURE__ */ jsx(Text, { children: fullText });
+	const words = fullText.split(/(\s+)/);
+	const totalWords = words.filter((w) => w.trim()).length;
+	const revealWords = Math.ceil(totalWords * revealFraction);
+	let wordCount = 0;
+	let revealedText = "";
+	for (const word of words) {
+		if (word.trim()) {
+			wordCount++;
+			if (wordCount > revealWords) break;
+		}
+		revealedText += word;
+	}
+	return /* @__PURE__ */ jsxs(Text, { children: [revealedText, showCursor && /* @__PURE__ */ jsx(Text, {
+		color: "$primary",
+		children: "▌"
+	})] });
+}
+function ExchangeItem({ exchange, streamPhase, revealFraction, pulse, isLatest, isFirstInGroup, isLastInGroup }) {
+	if (exchange.role === "system") return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		children: [
+			/* @__PURE__ */ jsx(Text, { children: " " }),
+			/* @__PURE__ */ jsx(Text, {
+				bold: true,
+				children: "AI Chat"
+			}),
+			/* @__PURE__ */ jsx(Text, { children: " " }),
+			/* @__PURE__ */ jsx(Text, {
+				color: "$muted",
+				children: exchange.content
+			}),
+			/* @__PURE__ */ jsx(Text, { children: " " })
+		]
+	});
+	if (exchange.role === "user") return /* @__PURE__ */ jsxs(Box, {
+		paddingX: 1,
+		flexDirection: "row",
+		backgroundColor: "$surface-bg",
+		children: [/* @__PURE__ */ jsxs(Text, {
+			bold: true,
+			color: "$focusring",
+			children: ["❯", " "]
+		}), /* @__PURE__ */ jsx(Box, {
+			flexShrink: 1,
+			children: /* @__PURE__ */ jsx(Text, { children: exchange.content })
+		})]
+	});
+	const phase = isLatest ? streamPhase : "done";
+	const fraction = isLatest ? revealFraction : 1;
+	const toolCalls = exchange.toolCalls ?? [];
+	const toolRevealCount = phase === "tools" || phase === "done" ? toolCalls.length : 0;
+	const hasOperations = toolCalls.length > 0 || !!exchange.thinking;
+	const metaParts = [];
+	if (exchange.tokens && phase === "done") metaParts.push(`${formatTokens(exchange.tokens.output)} tokens`);
+	if (exchange.thinking && (phase === "done" || phase === "streaming")) metaParts.push("thought for 1s");
+	const metaStr = metaParts.length > 0 ? ` (${metaParts.join(" · ")})` : "";
+	const { title, body } = splitTitleBody(exchange.content);
+	const bulletColor = hasOperations ? "$success" : "$muted";
+	const contentText = title ? body : exchange.content;
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		children: [/* @__PURE__ */ jsxs(Text, { children: [/* @__PURE__ */ jsx(Text, {
+			bold: true,
+			color: bulletColor,
+			dimColor: hasOperations && !pulse && phase !== "done",
+			children: "●"
+		}), phase === "thinking" ? /* @__PURE__ */ jsxs(Text, {
+			color: "$muted",
+			italic: true,
+			children: [
+				" ",
+				/* @__PURE__ */ jsx(Spinner, { type: "dots" }),
+				" thinking"
+			]
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [title && /* @__PURE__ */ jsxs(Text, { children: [" ", title] }), /* @__PURE__ */ jsx(Text, {
+			color: "$muted",
+			children: metaStr
+		})] })] }), /* @__PURE__ */ jsxs(Box, {
+			flexDirection: "column",
+			borderStyle: "bold",
+			borderColor: "$border",
+			borderLeft: true,
+			borderRight: false,
+			borderTop: false,
+			borderBottom: false,
+			paddingLeft: 1,
+			children: [
+				exchange.thinking && (phase === "thinking" || phase === "streaming") && /* @__PURE__ */ jsx(ThinkingBlock, {
+					text: exchange.thinking,
+					done: phase !== "thinking"
+				}),
+				(phase === "streaming" || phase === "tools" || phase === "done") && contentText && /* @__PURE__ */ jsx(StreamingText, {
+					fullText: contentText,
+					revealFraction: phase === "streaming" ? fraction : 1,
+					showCursor: phase === "streaming" && fraction < 1
+				}),
+				toolRevealCount > 0 && /* @__PURE__ */ jsx(Box, {
+					flexDirection: "column",
+					children: toolCalls.map((call, i) => /* @__PURE__ */ jsx(ToolCallBlock, {
+						call,
+						phase: phase === "done" ? "done" : i < toolRevealCount - 1 ? "done" : "running"
+					}, i))
+				})
+			]
+		})]
+	});
+}
+function StatusBar({ exchanges, compacting, done, elapsed, contextBaseline = 0, ctrlDPending = false }) {
+	const cumulative = computeCumulativeTokens(exchanges);
+	const cost = formatCost(cumulative.input, cumulative.output);
+	const elapsedStr = `${Math.floor(elapsed / 60)}:${(elapsed % 60).toString().padStart(2, "0")}`;
+	const CTX_W = 20;
+	const ctxFrac = Math.max(0, cumulative.currentContext - contextBaseline) / CONTEXT_WINDOW;
+	const ctxFilled = Math.round(Math.min(ctxFrac, 1) * CTX_W);
+	const ctxPct = Math.round(ctxFrac * 100);
+	const ctxColor = ctxPct > 100 ? "$error" : ctxPct > 80 ? "$warning" : "$primary";
+	const ctxBar = "█".repeat(ctxFilled) + "░".repeat(CTX_W - ctxFilled);
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "row",
+		justifyContent: "space-between",
+		width: "100%",
+		children: [/* @__PURE__ */ jsxs(Text, {
+			color: "$muted",
+			wrap: "truncate",
+			children: [
+				elapsedStr,
+				"  ",
+				ctrlDPending ? "Ctrl-D again to exit" : compacting ? "compacting..." : "esc quit"
+			]
+		}), /* @__PURE__ */ jsxs(Text, {
+			color: ctxPct > 80 ? ctxColor : "$muted",
+			wrap: "truncate",
+			children: [
+				"ctx ",
+				ctxBar,
+				" ",
+				ctxPct,
+				"%",
+				"  ",
+				cost
+			]
+		})]
+	});
+}
+const AUTO_SUBMIT_DELAY = 1e4;
+function DemoFooter({ controlRef, onSubmit, streamPhase, done, compacting, exchanges, contextBaseline = 0, ctrlDPending = false, nextMessage = "", autoTypingText = null }) {
+	const terminalFocused = useTerminalFocused();
+	const [inputText, setInputText] = useState("");
+	const inputTextRef = useRef(inputText);
+	inputTextRef.current = inputText;
+	const startRef = useRef(Date.now());
+	const [elapsed, setElapsed] = useState(0);
+	useEffect(() => {
+		const timer = setInterval(() => setElapsed(Math.floor((Date.now() - startRef.current) / 1e3)), 1e3);
+		return () => clearInterval(timer);
+	}, []);
+	const [randomIdx, setRandomIdx] = useState(() => Math.floor(Math.random() * RANDOM_USER_COMMANDS.length));
+	const randomPlaceholder = RANDOM_USER_COMMANDS[randomIdx % RANDOM_USER_COMMANDS.length];
+	const effectiveMessage = nextMessage || randomPlaceholder;
+	const placeholder = !terminalFocused ? "Click to focus" : ctrlDPending ? "Press Ctrl-D again to exit" : effectiveMessage;
+	const handleSubmit = useCallback((text) => {
+		if (!text.trim() && effectiveMessage) onSubmit(effectiveMessage);
+		else onSubmit(text);
+		setInputText("");
+		setRandomIdx((i) => i + 1);
+	}, [onSubmit, effectiveMessage]);
+	controlRef.current = { submit: () => handleSubmit(inputTextRef.current) };
+	const autoSubmitRef = useRef(null);
+	useEffect(() => {
+		if (autoSubmitRef.current) clearTimeout(autoSubmitRef.current);
+		if (done || compacting || streamPhase !== "done" || !effectiveMessage || inputText || autoTypingText || !terminalFocused) return;
+		autoSubmitRef.current = setTimeout(() => onSubmit(effectiveMessage), AUTO_SUBMIT_DELAY);
+		return () => {
+			if (autoSubmitRef.current) clearTimeout(autoSubmitRef.current);
+		};
+	}, [
+		done,
+		compacting,
+		streamPhase,
+		effectiveMessage,
+		inputText,
+		autoTypingText,
+		onSubmit
+	]);
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		width: "100%",
+		children: [
+			/* @__PURE__ */ jsx(Text, { children: " " }),
+			/* @__PURE__ */ jsxs(Box, {
+				flexDirection: "row",
+				borderStyle: "round",
+				borderColor: !done && terminalFocused ? "$focusborder" : "$inputborder",
+				paddingX: 1,
+				children: [/* @__PURE__ */ jsxs(Text, {
+					bold: true,
+					color: "$focusring",
+					children: ["❯", " "]
+				}), /* @__PURE__ */ jsx(Box, {
+					flexShrink: 1,
+					flexGrow: 1,
+					children: /* @__PURE__ */ jsx(TextInput, {
+						value: autoTypingText ?? inputText,
+						onChange: autoTypingText ? () => {} : setInputText,
+						onSubmit: handleSubmit,
+						placeholder,
+						isActive: !done && !autoTypingText && terminalFocused
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				paddingX: 2,
+				width: "100%",
+				children: /* @__PURE__ */ jsx(StatusBar, {
+					exchanges,
+					compacting,
+					done,
+					elapsed,
+					contextBaseline,
+					ctrlDPending
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region apps/aichat/index.tsx
+/**
+* AI Chat — Coding Agent Demo
+*
+* Showcases ListView with streaming, tool calls, context tracking.
+* TEA state machine drives all animation; ListView caches completed
+* exchanges while live content stays in the React tree.
+*
+* Flags: --auto (auto-advance) --fast (skip animation) --stress (200 exchanges)
+*/
+const meta = {
+	name: "AI Coding Agent",
+	description: "Coding agent showcase — ListView, streaming, context tracking",
+	demo: true,
+	features: [
+		"ListView",
+		"cache",
+		"inline mode",
+		"streaming",
+		"OSC 8 links"
+	]
+};
+function AIChat({ script, autoStart, fastMode }) {
+	const exit = useExit();
+	const { rows: termRows } = useWindowSize();
+	const [state, send] = useTea(INIT_STATE, useMemo(() => createDemoUpdate(script, fastMode, autoStart), [
+		script,
+		fastMode,
+		autoStart
+	]));
+	const footerControlRef = useRef({ submit: () => {} });
+	useEffect(() => send({ type: "mount" }), [send]);
+	useAutoCompact(state, send);
+	useAutoExit(autoStart, state.done, exit);
+	useKeyBindings(state, send, footerControlRef);
+	const renderExchange = useCallback((exchange, index, _meta) => {
+		const isLatest = index === state.exchanges.length - 1;
+		return /* @__PURE__ */ jsxs(Box, {
+			flexDirection: "column",
+			children: [
+				index > 0 && /* @__PURE__ */ jsx(Text, { children: " " }),
+				state.compacting && isLatest && /* @__PURE__ */ jsx(CompactingOverlay, {}),
+				state.done && autoStart && isLatest && /* @__PURE__ */ jsx(SessionComplete, {}),
+				/* @__PURE__ */ jsx(ExchangeItem, {
+					exchange,
+					streamPhase: state.streamPhase,
+					revealFraction: state.revealFraction,
+					pulse: state.pulse,
+					isLatest,
+					isFirstInGroup: exchange.role !== (index > 0 ? state.exchanges[index - 1].role : null),
+					isLastInGroup: exchange.role !== (index < state.exchanges.length - 1 ? state.exchanges[index + 1].role : null)
+				})
+			]
+		});
+	}, [state, autoStart]);
+	return /* @__PURE__ */ jsx(Box, {
+		flexDirection: "column",
+		paddingX: 1,
+		children: /* @__PURE__ */ jsx(ListView, {
+			items: state.exchanges,
+			getKey: (ex) => ex.id,
+			height: termRows,
+			estimateHeight: 6,
+			renderItem: renderExchange,
+			scrollTo: state.exchanges.length - 1,
+			cache: {
+				mode: "virtual",
+				isCacheable: (_ex, index) => index < state.exchanges.length - 1
+			},
+			listFooter: /* @__PURE__ */ jsx(DemoFooter, {
+				controlRef: footerControlRef,
+				onSubmit: (text) => send({
+					type: "submit",
+					text
+				}),
+				streamPhase: state.streamPhase,
+				done: state.done,
+				compacting: state.compacting,
+				exchanges: state.exchanges,
+				contextBaseline: state.contextBaseline,
+				ctrlDPending: state.ctrlDPending,
+				nextMessage: getNextMessage(state, script, autoStart),
+				autoTypingText: state.autoTyping ? state.autoTyping.full.slice(0, state.autoTyping.revealed) : null
+			})
+		})
+	});
+}
+async function main() {
+	try {
+		var _usingCtx$1 = _usingCtx();
+		const args = process.argv.slice(2);
+		const script = args.includes("--stress") ? generateStressScript() : SCRIPT;
+		const mode = args.includes("--inline") ? "inline" : "fullscreen";
+		await _usingCtx$1.u(await run(/* @__PURE__ */ jsx(AIChat, {
+			script,
+			autoStart: args.includes("--auto"),
+			fastMode: args.includes("--fast")
+		}), {
+			mode,
+			focusReporting: true
+		})).waitUntilExit();
+	} catch (_) {
+		_usingCtx$1.e = _;
+	} finally {
+		_usingCtx$1.d();
+	}
+}
+if (import.meta.main) await main();
+function useAutoCompact(state, send) {
+	useEffect(() => {
+		if (state.done || state.compacting) return;
+		const cumulative = computeCumulativeTokens(state.exchanges);
+		if (Math.max(0, cumulative.currentContext - state.contextBaseline) >= 2e5 * .95) send({ type: "compact" });
+	}, [
+		state.exchanges,
+		state.done,
+		state.compacting,
+		state.contextBaseline,
+		send
+	]);
+}
+function useAutoExit(autoStart, done, exit) {
+	useEffect(() => {
+		if (!autoStart || !done) return;
+		const timer = setTimeout(exit, 1e3);
+		return () => clearTimeout(timer);
+	}, [
+		autoStart,
+		done,
+		exit
+	]);
+}
+function useKeyBindings(state, send, footerControlRef) {
+	const lastCtrlDRef = useRef(0);
+	useInput$1((input, key) => {
+		if (key.escape) return "exit";
+		if (key.ctrl && input === "d") {
+			const now = Date.now();
+			if (now - lastCtrlDRef.current < 500) return "exit";
+			lastCtrlDRef.current = now;
+			send({
+				type: "setCtrlDPending",
+				pending: true
+			});
+			return;
+		}
+		if (lastCtrlDRef.current > 0) {
+			lastCtrlDRef.current = 0;
+			send({
+				type: "setCtrlDPending",
+				pending: false
+			});
+		}
+		if (key.tab) {
+			if (state.done || state.compacting) return;
+			footerControlRef.current.submit();
+			return;
+		}
+		if (key.ctrl && input === "l") send({ type: "compact" });
+	});
+}
+function CompactingOverlay() {
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		borderStyle: "round",
+		borderColor: "$warning",
+		paddingX: 1,
+		overflow: "hidden",
+		children: [
+			/* @__PURE__ */ jsxs(Text, {
+				color: "$warning",
+				bold: true,
+				children: [/* @__PURE__ */ jsx(Spinner, { type: "arc" }), " Compacting context"]
+			}),
+			/* @__PURE__ */ jsx(Text, { children: " " }),
+			/* @__PURE__ */ jsx(Text, {
+				color: "$muted",
+				children: "Freezing exchanges into terminal scrollback. Scroll up to review."
+			})
+		]
+	});
+}
+function SessionComplete() {
+	return /* @__PURE__ */ jsxs(Box, {
+		flexDirection: "column",
+		borderStyle: "round",
+		borderColor: "$success",
+		paddingX: 1,
+		children: [/* @__PURE__ */ jsxs(Text, {
+			color: "$success",
+			bold: true,
+			children: ["✓", " Session complete"]
+		}), /* @__PURE__ */ jsx(Text, {
+			color: "$muted",
+			children: "Scroll up to review — colors, borders, and hyperlinks preserved in scrollback."
+		})]
+	});
+}
+//#endregion
+export { AIChat, CONTEXT_WINDOW, SCRIPT, generateStressScript, main, meta };