Foundry Epic — app workshop

\n \n\n

\n \n Brief\n 0/5000\n \n \n\n

\n or start from a seed prompt\n

\n\n \n

⌘/Ctrl + Enter to build

\n\n

\n build log\n ▌\n

\n \n

\n\n

\n preview\n

\n waiting for a build\n launch ↗\n \n

\n \n

Your built app renders here, sandboxed.

No build yet — write a brief and press Build app.

\n\n \n \n\n\n",[19,86],"6cc0831c-b6ac-4121-a230-69e6750e8b83","app.ts","6277971e-9baa-11f1-8d0b-1607ee4eb77e",34,["D",1787129681965],8,"// Foundry client — drives the workshop console, preview, and records.\n\nconst $ = (id: string): T => document.getElementById(id) as T;\n\nconst promptEl = $(\"prompt\");\nconst providerEl = $(\"provider\");\nconst buildBtn = $(\"build\");\nconst buildLabel = $(\"buildLabel\");\nconst logEl = $(\"log\");\nconst preview = $(\"preview\");\nconst previewEmpty = $(\"previewEmpty\");\nconst previewMeta = $(\"previewMeta\");\nconst recordList = $(\"recordList\");\nconst recordsEmpty = $(\"recordsEmpty\");\nconst clearBtn = $(\"clearRecords\");\nconst errorBanner = $(\"errorBanner\");\nconst errorText = $(\"errorText\");\nconst charCount = $(\"charCount\");\nconst launchBtn = $(\"launchBtn\");\nconst downloadBtn = $(\"downloadBtn\");\nconst shareBtn = $(\"shareBtn\");\nconst toastEl = $(\"toast\");\n\ntype Provider = { id: string; label: string; model: string; available: boolean };\ntype Build = { id: number; prompt: string; html: string; created_at: number };\n\nlet records: Build[] = [];\nlet busy = false;\nlet activeId: number | null = null;\nlet currentBuild: Build | null = null;\nconst stageEls: Record = {};\n\nfunction setLaunchState(b: Build | null): void {\n currentBuild = b;\n const ready = !!b;\n if (ready) {\n launchBtn.href = `/p/${b.id}`;\n launchBtn.removeAttribute(\"aria-disabled\");\n launchBtn.tabIndex = 0;\n downloadBtn.disabled = false;\n } else {\n launchBtn.href = \"#\";\n launchBtn.setAttribute(\"aria-disabled\", \"true\");\n launchBtn.tabIndex = -1;\n downloadBtn.disabled = true;\n }\n}\n\nfunction downloadCurrent(): void {\n if (!currentBuild) return;\n const blob = new Blob([currentBuild.html], { type: \"text/html;charset=utf-8\" });\n const url = URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = `foundry-${currentBuild.id}.html`;\n document.body.appendChild(a);\n a.click();\n a.remove();\n URL.revokeObjectURL(url);\n}\n\nconst EXEMPLARS: Array<{ label: string; text: string }> = [\n { label: \"focus timer\", text: \"A pomodoro timer that tracks daily focus time, lets you set work and break lengths, and logs a history of finished sessions with a running total.\" },\n { label: \"memory game\", text: \"A memory-match card game where you flip tiles to find pairs in the fewest moves, with a timer, a moves counter, a win screen, and a new-game shuffle.\" },\n { label: \"habit tracker\", text: \"A habit tracker with check-in toggles for each day of the week, a streak counter per habit, and a compact weekly progress bar.\" },\n { label: \"password mint\", text: \"A password generator with toggles for length and character types, a live strength meter, and a one-click copy button.\" },\n { label: \"ledger\", text: \"A simple income-and-expense ledger that sums rows in real time, shows a running balance, and can flag an overdraft in red.\" },\n];\n\n// ---- init ---------------------------------------------------------------\n\nasync function init(): Promise {\n populateProviders();\n renderExemplars();\n promptEl.addEventListener(\"input\", () => {\n charCount.textContent = String(promptEl.value.length);\n });\n\n buildBtn.addEventListener(\"click\", runBuild);\n promptEl.addEventListener(\"keydown\", (e) => {\n if ((e.metaKey || e.ctrlKey) && e.key === \"Enter\") runBuild();\n });\n clearBtn.addEventListener(\"click\", clearRecords);\n downloadBtn.addEventListener(\"click\", downloadCurrent);\n shareBtn.addEventListener(\"click\", shareFoundry);\n setLaunchState(null);\n registerSW();\n\n await loadRecords();\n}\n\nconst SHARE_TEXT = \"Foundry Epic — describe an app in plain English, watch it build live, preview it, and launch it.\";\n\nfunction notify(msg: string): void {\n toastEl.textContent = msg;\n toastEl.hidden = false;\n clearTimeout((notify as any)._t);\n (notify as any)._t = setTimeout(() => {\n toastEl.hidden = true;\n }, 2600);\n}\n\nasync function shareFoundry(): Promise {\n const url = location.origin + \"/\";\n if (navigator.share) {\n try {\n await navigator.share({ title: \"Foundry Epic\", text: SHARE_TEXT, url });\n return;\n } catch (e) {\n if (/abort|dismiss/i.test(String(e))) return; // user closed the sheet\n }\n }\n // Fallback for desktop / non-supporting browsers: copy the link.\n try {\n await navigator.clipboard.writeText(`${SHARE_TEXT} ${url}`);\n notify(\"Link copied — paste it anywhere.\");\n } catch {\n notify(url);\n }\n}\n\nfunction registerSW(): void {\n if (\"serviceWorker\" in navigator) {\n navigator.serviceWorker.register(\"/sw.js\").catch(() => {});\n }\n}\n\nfunction populateProviders(): void {\n const meta = { providers: [] as Provider[] };\n // fetched synchronously below\n void fetch(\"/api/meta\")\n .then((r) => r.json())\n .then((m) => {\n const provs: Provider[] = m.providers ?? [];\n providerEl.innerHTML = \"\";\n let firstAvailable: string | null = null;\n for (const p of provs) {\n const opt = document.createElement(\"option\");\n opt.value = p.id;\n opt.textContent = p.available ? `${p.label} · ${p.model}` : `${p.label} · needs a key`;\n if (p.available && !firstAvailable) firstAvailable = p.id;\n providerEl.appendChild(opt);\n }\n if (firstAvailable) providerEl.value = firstAvailable;\n else if (provs.length === 0) {\n const opt = document.createElement(\"option\");\n opt.value = \"claude\";\n opt.textContent = \"Claude\";\n providerEl.appendChild(opt);\n }\n });\n}\n\nfunction renderExemplars(): void {\n const row = document.querySelector(\".chip-row\")!;\n for (const ex of EXEMPLARS) {\n const b = document.createElement(\"button\");\n b.type = \"button\";\n b.className = \"chip\";\n b.textContent = ex.label;\n b.setAttribute(\"aria-label\", `Use example prompt: ${ex.text}`);\n b.addEventListener(\"click\", () => {\n promptEl.value = ex.text;\n charCount.textContent = String(ex.text.length);\n promptEl.focus();\n });\n row.appendChild(b);\n }\n}\n\n// ---- records ------------------------------------------------------------\n\nasync function loadRecords(): Promise {\n try {\n const r = await fetch(\"/api/history\");\n const data = await r.json();\n records = (data.builds ?? []).map((b: Build) => b);\n renderRecords();\n } catch (e) {\n addLogEntry(\"note\", \"records\", `couldn't load history (${String(e)})`);\n }\n}\n\nfunction renderRecords(): void {\n recordList.innerHTML = \"\";\n recordsEmpty.hidden = records.length > 0;\n for (const b of records) {\n const li = document.createElement(\"li\");\n const btn = document.createElement(\"button\");\n btn.type = \"button\";\n btn.className = \"record\" + (b.id === activeId ? \" active\" : \"\");\n btn.addEventListener(\"click\", () => openRecord(b, btn));\n const time = new Date(b.created_at).toLocaleTimeString([], { hour: \"2-digit\", minute: \"2-digit\" });\n btn.innerHTML = \"\";\n const p = document.createElement(\"span\");\n p.className = \"record-prompt\";\n p.textContent = b.prompt.length > 90 ? b.prompt.slice(0, 90) + \"…\" : b.prompt;\n const t = document.createElement(\"span\");\n t.className = \"record-time\";\n t.textContent = time;\n btn.append(p, t);\n li.appendChild(btn);\n recordList.appendChild(li);\n }\n}\n\nfunction openRecord(b: Build, el: HTMLButtonElement): void {\n activeId = b.id;\n preview.srcdoc = b.html;\n previewEmpty.classList.add(\"hidden\");\n previewMeta.textContent = b.prompt.length > 60 ? b.prompt.slice(0, 60) + \"…\" : b.prompt;\n document.querySelectorAll(\".record\").forEach((n) => n.classList.remove(\"active\"));\n el.classList.add(\"active\");\n setLaunchState(b);\n}\n\nasync function clearRecords(): Promise {\n if (records.length === 0) return;\n await fetch(\"/api/history\", { method: \"DELETE\" });\n records = [];\n renderRecords();\n}\n\n// ---- console ------------------------------------------------------------\n\nfunction ts(): string {\n return new Date().toLocaleTimeString([], { hour12: false, hour: \"2-digit\", minute: \"2-digit\", second: \"2-digit\" });\n}\n\nfunction addLogEntry(kind: \"stage\" | \"ok\" | \"err\" | \"note\", tag: string, msg: string): HTMLLIElement {\n const li = document.createElement(\"li\");\n li.className = kind;\n const time = document.createElement(\"span\");\n time.className = \"t-time\";\n time.textContent = ts();\n const tagEl = document.createElement(\"span\");\n tagEl.className = \"t-tag\";\n tagEl.textContent = tag;\n const msgEl = document.createElement(\"span\");\n msgEl.className = \"t-msg\";\n msgEl.textContent = msg;\n li.append(time, tagEl, msgEl);\n logEl.appendChild(li);\n logEl.scrollTop = logEl.scrollHeight;\n return li;\n}\n\nfunction updateStage(stage: string, chars: number, lines: number): void {\n let li = stageEls[stage];\n const msg = `streaming ${chars.toLocaleString()} chars · ${lines} lines`;\n if (!li) {\n li = addLogEntry(\"stage\", stage, \"\");\n stageEls[stage] = li;\n }\n li.querySelector(\".t-msg\")!.innerHTML = msg;\n logEl.scrollTop = logEl.scrollHeight;\n}\n\nfunction handleEvent(ev: any): void {\n switch (ev?.type) {\n case \"log\":\n addLogEntry(\"note\", ev.stage ?? \"engine\", ev.detail ?? \"\");\n break;\n case \"progress\":\n updateStage(ev.stage, Number(ev.chars) || 0, Number(ev.lines) || 0);\n break;\n case \"result\": {\n for (const k of Object.keys(stageEls)) stageEls[k].classList.add(\"ok\");\n addLogEntry(\"ok\", \"built\", `ready — opened in preview.`);\n activeId = ev.id ?? null;\n preview.srcdoc = ev.html;\n previewEmpty.classList.add(\"hidden\");\n previewMeta.textContent = (ev.prompt ?? \"\").slice(0, 60) + \"…\";\n // move to front of local records + save\n records = [\n { id: ev.id, prompt: ev.prompt, html: ev.html, created_at: Date.now() },\n ...records.filter((r) => r.id !== ev.id),\n ];\n renderRecords();\n setLaunchState(records[0]);\n break;\n }\n case \"error\":\n addLogEntry(\"err\", \"error\", ev.message ?? \"Unknown error\");\n errorText.textContent = ev.message ?? \"Unknown error\";\n errorBanner.hidden = false;\n break;\n }\n}\n\nfunction resetConsole(): void {\n logEl.innerHTML = \"\";\n for (const k of Object.keys(stageEls)) delete stageEls[k];\n errorBanner.hidden = true;\n addLogEntry(\"note\", \"session\", `started · engine ${providerEl.value}`);\n}\n\n// ---- build --------------------------------------------------------------\n\nasync function runBuild(): Promise {\n if (busy) return;\n const prompt = promptEl.value.trim();\n if (!prompt) {\n errorText.textContent = \"Enter a prompt describing the app you want to build first.\";\n errorBanner.hidden = false;\n promptEl.focus();\n return;\n }\n busy = true;\n buildBtn.disabled = true;\n buildLabel.textContent = \"Forging…\";\n errorBanner.hidden = true;\n resetConsole();\n\n try {\n const res = await fetch(\"/api/build\", {\n method: \"POST\",\n headers: { \"content-type\": \"application/json\" },\n body: JSON.stringify({ prompt, provider: providerEl.value }),\n });\n if (!res.ok || !res.body) {\n addLogEntry(\"err\", \"error\", `Request failed (HTTP ${res.status}). Try again.`);\n return;\n }\n const reader = res.body.getReader();\n const dec = new TextDecoder();\n let buf = \"\";\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n buf += dec.decode(value, { stream: true });\n let i: number;\n while ((i = buf.indexOf(\"\\n\")) >= 0) {\n const line = buf.slice(0, i);\n buf = buf.slice(i + 1);\n if (line.trim()) {\n try {\n handleEvent(JSON.parse(line));\n } catch { /* skip partial */ }\n }\n }\n }\n } catch (e) {\n addLogEntry(\"err\", \"error\", `Connection error: ${String(e)}`);\n errorText.textContent = `Connection error: ${String(e)}`;\n errorBanner.hidden = false;\n } finally {\n busy = false;\n buildBtn.disabled = false;\n buildLabel.textContent = \"Build app\";\n }\n}\n\nvoid init();\n",[19,94],"d1d2970f-dfd4-42ef-8de9-a78dc1b55f30",7,["D",1787129152304],"directory",[19],{"_39":147,"_13":148,"_42":149,"_44":-5,"_46":47,"_48":68,"_50":51,"_52":150,"_17":54,"_55":104,"_57":-5,"_59":60,"_61":-5,"_117":151,"_18":152},{"_39":101,"_13":19,"_42":45,"_44":-5,"_46":47,"_48":102,"_50":51,"_52":120,"_17":54,"_55":104,"_57":-5,"_59":60,"_61":-5,"_117":121,"_18":122},{"_39":109,"_13":110,"_42":111,"_44":-5,"_46":47,"_48":112,"_50":51,"_52":113,"_17":102,"_55":114,"_57":115,"_59":60,"_61":116,"_117":118,"_18":119},"ed4b54a1-b4c2-41ad-9d34-26c202bd4410","main.ts","41fa0a8a-9baa-11f1-a031-1607ee4eb77e",31,["D",1787129676440],"http","import { readFile, parseVal } from \"https://esm.town/v/std/utils/index.ts\";\nimport { availableProviders, generateApp } from \"./lib/llm.ts\";\nimport { listBuilds, saveBuild, clearBuilds, getBuild } from \"./lib/db.ts\";\nimport { validateOutput } from \"./lib/prompt.ts\";\n\nconst MIME = {\n \".html\": \"text/html; charset=utf-8\",\n \".css\": \"text/css; charset=utf-8\",\n \".js\": \"text/javascript; charset=utf-8\",\n \".svg\": \"image/svg+xml\",\n};\n\nexport default async function (req: Request): Promise {\n const url = new URL(req.url);\n const { pathname } = url;\n try {\n // Static assets\n if (pathname === \"/\" || pathname === \"/index.html\") return asset(\"views/index.html\", \".html\");\n if (pathname === \"/style.css\") return asset(\"views/style.css\", \".css\");\n if (pathname === \"/app.js\") return asset(\"views/app.ts\", \".js\");\n if (pathname === \"/favicon.svg\") return new Response(FAVICON, { headers: { \"content-type\": \"image/svg+xml\" } });\n if (pathname === \"/og.svg\") return asset(\"views/og.svg\", \".svg\");\n if (pathname === \"/manifest.webmanifest\") return new Response(await readFile(\"views/manifest.webmanifest\"), { headers: { \"content-type\": \"application/manifest+json\" } });\n if (pathname === \"/sw.js\") return new Response(await readFile(\"views/sw.js\"), { headers: { \"content-type\": \"text/javascript\" } });\n if (pathname === \"/source\") return new Response(null, { status: 302, headers: { Location: parseVal().links.self.val } });\n\n // Launch a saved build full-screen at its own persistent URL (/p/:id).\n if (pathname.startsWith(\"/p/\")) {\n const id = Number(pathname.slice(3));\n const build = id ? await getBuild(id) : null;\n if (!build) return json({ error: \"Not found\" }, 404);\n return new Response(build.html, {\n headers: {\n \"content-type\": \"text/html; charset=utf-8\",\n // Generated code runs isolated: no same-origin privileges and no\n // outbound network — keeps every launched app self-contained.\n \"content-security-policy\":\n \"sandbox allow-scripts; default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; img-src data:; font-src data:; object-src 'none'; base-uri 'none'\",\n },\n });\n }\n\n // API\n if (pathname === \"/api/meta\" && req.method === \"GET\") {\n return json({ providers: availableProviders() });\n }\n if (pathname === \"/api/history\" && req.method === \"GET\") {\n return json({ builds: await listBuilds() });\n }\n if (pathname === \"/api/history\" && req.method === \"DELETE\") {\n await clearBuilds();\n return json({ ok: true });\n }\n if (pathname === \"/api/build\" && req.method === \"POST\") {\n return handleBuild(req);\n }\n return json({ error: \"Not found\" }, 404);\n } catch (e) {\n console.error(e);\n return json({ error: String(e) }, 500);\n }\n}\n\nasync function asset(path: string, ext: string): Promise {\n return new Response(await readFile(path), { headers: { \"content-type\": MIME[ext] } });\n}\n\nfunction json(obj: unknown, status = 200): Response {\n return new Response(JSON.stringify(obj), {\n status,\n headers: { \"content-type\": \"application/json; charset=utf-8\" },\n });\n}\n\nfunction handleBuild(req: Request): Response {\n const stream = new ReadableStream({\n async start(controller) {\n const enc = new TextEncoder();\n const emit = (obj: unknown) => controller.enqueue(enc.encode(JSON.stringify(obj) + \"\\n\"));\n try {\n let body: any = {};\n try { body = await req.json(); } catch { /* ignore */ }\n const prompt = String(body.prompt || \"\").trim();\n const requested = String(body.provider || \"claude\");\n\n if (!prompt) { emit({ type: \"error\", message: \"No prompt supplied. Describe the app you want to build.\" }); return; }\n if (prompt.length > 5000) { emit({ type: \"error\", message: \"Prompt is too long (max 5000 characters).\" }); return; }\n\n const providers = availableProviders();\n const prov = providers.find((p) => p.id === requested) ?? providers[0];\n if (!prov || !prov.available) {\n emit({\n type: \"error\",\n message: `No API key configured for ${prov?.label ?? requested}. Add ${prov?.id === \"openai\" ? \"OPENAI_API_KEY\" : \"ANTHROPIC_API_KEY\"} in the val's environment variables, then try again.`,\n });\n return;\n }\n\n emit({ type: \"log\", stage: \"reading brief\", detail: `“${truncate(prompt, 70)}”` });\n const html = await generateApp({\n provider: prov.id,\n model: prov.model,\n prompt,\n onProgress: (p) => emit({ type: \"progress\", stage: p.stage, chars: p.chars, lines: p.lines }),\n });\n\n emit({ type: \"log\", stage: \"validating output\", detail: `${(html.length / 1024).toFixed(1)} KB received` });\n const problem = validateOutput(html);\n if (problem) {\n emit({ type: \"error\", message: `Build failed validation: ${problem} Your prompt is still here — hit Build to retry.` });\n return;\n }\n\n const saved = await saveBuild(prompt, html);\n emit({ type: \"log\", stage: \"finishing touches\", detail: \"saved to records\" });\n emit({ type: \"result\", id: saved.id, prompt, html });\n } catch (e) {\n console.error(e);\n emit({ type: \"error\", message: `Build failed: ${String(e)}` });\n } finally {\n controller.close();\n }\n },\n });\n return new Response(stream, {\n headers: {\n \"content-type\": \"application/x-ndjson; charset=utf-8\",\n \"cache-control\": \"no-cache\",\n \"x-accel-buffering\": \"no\",\n },\n });\n}\n\nfunction truncate(s: string, n: number): string {\n return s.length > n ? s.slice(0, n) + \"…\" : s;\n}\n\nconst FAVICON = ``;\n","foundry","children",[],[110],["D",1787129152304],[123,124,125,126,127,128],[19],{"_39":93,"_13":94,"_42":95,"_44":45,"_46":47,"_48":96,"_50":51,"_52":144,"_17":98,"_55":56,"_57":99,"_59":60,"_61":-5,"_117":145,"_18":146},{"_39":85,"_13":86,"_42":87,"_44":45,"_46":47,"_48":88,"_50":51,"_52":141,"_17":90,"_55":24,"_57":91,"_59":60,"_61":-5,"_117":142,"_18":143},{"_39":78,"_13":79,"_42":80,"_44":45,"_46":47,"_48":81,"_50":51,"_52":138,"_17":54,"_55":24,"_57":83,"_59":60,"_61":-5,"_117":139,"_18":140},{"_39":71,"_13":72,"_42":73,"_44":45,"_46":47,"_48":74,"_50":51,"_52":135,"_17":54,"_55":24,"_57":76,"_59":60,"_61":-5,"_117":136,"_18":137},{"_39":63,"_13":64,"_42":65,"_44":45,"_46":47,"_48":66,"_50":51,"_52":132,"_17":68,"_55":24,"_57":69,"_59":60,"_61":-5,"_117":133,"_18":134},{"_39":40,"_13":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":129,"_17":54,"_55":56,"_57":58,"_59":60,"_61":-5,"_117":130,"_18":131},["D",1787129665179],[],[19,41],["D",1787129676489],[],[19,64],["D",1787129665087],[],[19,72],["D",1787129665139],[],[19,79],["D",1787129671209],[],[19,86],["D",1787129681965],[],[19,94],"08bd9ba8-fe3c-46b0-b5db-6a737b8f9cff","lib","4ff44d5b-fd11-4a12-a0d1-08cf71d5f9b1",["D",1787129107718],[153,154,155],[148],{"_39":171,"_13":172,"_42":173,"_44":149,"_46":47,"_48":174,"_50":51,"_52":175,"_17":176,"_55":56,"_57":177,"_59":60,"_61":-5,"_117":178,"_18":179},{"_39":163,"_13":164,"_42":165,"_44":149,"_46":47,"_48":166,"_50":51,"_52":167,"_17":54,"_55":56,"_57":168,"_59":60,"_61":-5,"_117":169,"_18":170},{"_39":156,"_13":157,"_42":158,"_44":149,"_46":47,"_48":68,"_50":51,"_52":159,"_17":54,"_55":56,"_57":160,"_59":60,"_61":-5,"_117":161,"_18":162},"495c7788-2e14-48b9-a83d-10e854b469c9","prompt.ts","47d7d356-9baa-11f1-af80-1607ee4eb77e",["D",1787129107718],"// Shared prompt template, output validation, and build-stage mapping.\n\nexport const SYSTEM_PROMPT = `You are Foundry, an expert front-end engineer. You transform a plain-English brief into a single, complete, self-contained HTML file for a polished, interactive web app.\n\nProduce a complete document. Every build MUST satisfy all of the following:\n\n1. FULLY FUNCTIONAL ON LOAD. Real, working interactivity — no mockups, no dead buttons, no \"--\" placeholder values, no unimplemented features. If it's a counter it counts; if it's a game it plays; if it's a tracker it tracks.\n2. SELF-CONTAINED single HTML file. All CSS and JS inline in