Foundry Epic — app workshop

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_292":293,"_294":295},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_221":-5,"_20":222,"_22":223,"_224":225,"_226":227,"_26":228,"_24":229,"_230":-5,"_231":-5,"_232":53,"_233":234,"_235":45,"_236":-5,"_237":-5,"_238":239},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","Et12eqtf","name","foundry-epic","branchName","main","version","path","views/manifest.webmanifest","project",{"_33":163,"_13":14,"_46":164,"_165":-5,"_166":53,"_167":168,"_169":168,"_170":171,"_172":-5,"_173":174,"_175":62,"_176":45,"_177":-5,"_178":-5,"_179":48,"_180":181,"_182":183,"_184":185,"_186":187,"_188":-5,"_189":190,"_191":190,"_192":193,"_194":193,"_195":193,"_196":190,"_197":190,"_198":199,"_200":201,"_202":203,"_204":53},"tree",[57,58,59],"file",{"_33":34,"_13":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_17":48,"_49":24,"_50":51,"_52":53,"_54":-5,"_18":55},"contents",[],"upstream","pull","ahead","behind","envVars","id","34441609-86e6-4b7f-90cd-818c26664522","manifest.webmanifest","fileId","941775a4-9bab-11f1-94bf-1607ee4eb77e","parentId","5bcfd898-d4b2-4f34-b83b-e07f962670b8","branchId","ee22e3ae-218e-4882-89bb-63b59fd716fd","branchVersion",25,"latest",true,"createdAt",["D",1787129665139],0,"fileType","content","{\n \"name\": \"Foundry Epic\",\n \"short_name\": \"Foundry Epic\",\n \"description\": \"AI app workshop — describe an app in English, watch it build live, preview, and launch it.\",\n \"start_url\": \"/\",\n \"scope\": \"/\",\n \"display\": \"standalone\",\n \"orientation\": \"any\",\n \"background_color\": \"#12141B\",\n \"theme_color\": \"#12141B\",\n \"icons\": [\n {\n \"src\": \"/favicon.svg\",\n \"sizes\": \"any\",\n \"type\": \"image/svg+xml\",\n \"purpose\": \"any\"\n }\n ]\n}\n","deleted",false,"label",[56,35],"views",{"_33":130,"_13":131,"_36":132,"_38":-5,"_40":41,"_42":97,"_44":45,"_46":133,"_17":48,"_49":74,"_50":-5,"_52":53,"_54":-5,"_69":134,"_18":135},{"_33":72,"_13":56,"_36":39,"_38":-5,"_40":41,"_42":65,"_44":45,"_46":73,"_17":48,"_49":74,"_50":-5,"_52":53,"_54":-5,"_69":75,"_18":76},{"_33":60,"_13":61,"_36":62,"_38":-5,"_40":41,"_42":63,"_44":45,"_46":64,"_17":65,"_49":66,"_50":67,"_52":53,"_54":68,"_69":70,"_18":71},"ed4b54a1-b4c2-41ad-9d34-26c202bd4410","main.ts","41fa0a8a-9baa-11f1-a031-1607ee4eb77e",31,["D",1787129676440],7,"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",[],[61],"d1d2970f-dfd4-42ef-8de9-a78dc1b55f30",["D",1787129152304],"directory",[77,78,79,80,81,82],[56],{"_33":121,"_13":122,"_36":123,"_38":39,"_40":41,"_42":124,"_44":45,"_46":125,"_17":126,"_49":88,"_50":127,"_52":53,"_54":-5,"_69":128,"_18":129},{"_33":112,"_13":113,"_36":114,"_38":39,"_40":41,"_42":115,"_44":45,"_46":116,"_17":117,"_49":24,"_50":118,"_52":53,"_54":-5,"_69":119,"_18":120},{"_33":34,"_13":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":109,"_17":48,"_49":24,"_50":51,"_52":53,"_54":-5,"_69":110,"_18":111},{"_33":101,"_13":102,"_36":103,"_38":39,"_40":41,"_42":104,"_44":45,"_46":105,"_17":48,"_49":24,"_50":106,"_52":53,"_54":-5,"_69":107,"_18":108},{"_33":92,"_13":93,"_36":94,"_38":39,"_40":41,"_42":95,"_44":45,"_46":96,"_17":97,"_49":24,"_50":98,"_52":53,"_54":-5,"_69":99,"_18":100},{"_33":83,"_13":84,"_36":85,"_38":39,"_40":41,"_42":86,"_44":45,"_46":87,"_17":48,"_49":88,"_50":89,"_52":53,"_54":-5,"_69":90,"_18":91},"085e05a7-f51e-458b-af33-6bc4d9b77663","sw.js","941d9df8-9bab-11f1-94bf-1607ee4eb77e",26,["D",1787129665179],"script","// Foundry Epic service worker — makes the workshop installable (PWA) and\n// gives light offline support for the app shell (never API responses).\nconst CACHE = \"foundry-epic-v1\";\nconst SHELL = [\"/\", \"/style.css\", \"/app.js\", \"/favicon.svg\", \"/manifest.webmanifest\"];\n\nself.addEventListener(\"install\", (e) => {\n self.skipWaiting();\n e.waitUntil(\n caches.open(CACHE).then((c) => c.addAll(SHELL)).catch(() => {}),\n );\n});\n\nself.addEventListener(\"activate\", (e) => {\n e.waitUntil(\n caches.keys()\n .then((keys) => Promise.all(keys.filter((k) => k !== CACHE).map((k) => caches.delete(k))))\n .then(() => self.clients.claim()),\n );\n});\n\nself.addEventListener(\"fetch\", (e) => {\n const url = new URL(e.request.url);\n if (url.origin !== self.location.origin || e.request.method !== \"GET\") return;\n if (url.pathname.startsWith(\"/api/\")) return; // never cache API/build streams\n\n // Network-first with cache fallback (cached app shell is fine offline).\n e.respondWith(\n fetch(e.request)\n .then((res) => {\n const copy = res.clone();\n caches.open(CACHE).then((c) => c.put(e.request, copy)).catch(() => {});\n return res;\n })\n .catch(() => caches.match(e.request).then((m) => m || caches.match(\"/\"))),\n );\n});\n",[],[56,84],"8b796d34-bdc7-4bcf-aa9c-460adea20488","style.css","627277f2-9baa-11f1-8d0b-1607ee4eb77e",32,["D",1787129676489],2,"/* ---- Foundry design tokens ---- */\n:root {\n --ink: #12141B;\n --panel: #171A23;\n --panel-2: #1D212D;\n --panel-3: #232836;\n --line: #262B38;\n --line-2: #313749;\n --text: #E8E9EE;\n --muted: #9399AC;\n --dim: #5A6074;\n --amber: #E8A33D;\n --amber-soft: rgba(232, 163, 61, 0.14);\n --teal: #4FB0A5;\n --teal-soft: rgba(79, 176, 165, 0.13);\n --red: #E06C75;\n --red-soft: rgba(224, 108, 117, 0.14);\n --ok: #7FD0A8;\n --font-display: \"Space Grotesk\", ui-sans-serif, system-ui, sans-serif;\n --font-body: \"Inter\", ui-sans-serif, system-ui, -apple-system, sans-serif;\n --font-mono: \"JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, monospace;\n}\n\n* { box-sizing: border-box; }\n\nhtml, body {\n margin: 0;\n height: 100%;\n}\n\nbody {\n background: var(--ink);\n color: var(--text);\n font-family: var(--font-body);\n font-size: 14px;\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n}\n\n.app { height: 100vh; display: flex; flex-direction: column; }\n\nbutton { font-family: inherit; cursor: pointer; }\na { color: inherit; }\n\n/* focus states */\n:focus-visible {\n outline: 2px solid var(--amber);\n outline-offset: 2px;\n border-radius: 3px;\n}\n\n/* ---- top bar ---- */\n.topbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n padding: 0 18px;\n height: 54px;\n border-bottom: 1px solid var(--line);\n background: var(--panel);\n flex: none;\n}\n\n.brand { display: flex; align-items: center; gap: 10px; }\n.brand-mark { width: 22px; height: 22px; }\n.brand-name {\n font-family: var(--font-display);\n font-weight: 700;\n letter-spacing: 0.12em;\n font-size: 15px;\n}\n.brand-sub {\n font-family: var(--font-mono);\n font-size: 10px;\n color: var(--dim);\n letter-spacing: 0.14em;\n text-transform: uppercase;\n padding-left: 10px;\n border-left: 1px solid var(--line-2);\n}\n\n.topbar-meta { display: flex; align-items: center; gap: 18px; }\n\n.engine { display: flex; align-items: center; gap: 8px; }\n.engine-label {\n font-family: var(--font-mono);\n font-size: 10px;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: var(--dim);\n}\n#provider {\n background: var(--panel-2);\n border: 1px solid var(--line-2);\n color: var(--text);\n font-family: var(--font-mono);\n font-size: 12px;\n padding: 6px 8px;\n border-radius: 6px;\n min-height: 32px;\n}\n\n.source-link {\n font-family: var(--font-mono);\n font-size: 11px;\n color: var(--muted);\n text-decoration: none;\n padding: 6px 10px;\n border: 1px solid var(--line-2);\n border-radius: 6px;\n}\n.source-link:hover { color: var(--amber); border-color: var(--amber); }\n\n/* ---- workspace grid ---- */\n.workspace {\n flex: 1;\n display: grid;\n grid-template-columns: 212px minmax(360px, 460px) 1fr;\n overflow: hidden;\n}\n\n/* ---- records sidebar ---- */\n.records {\n border-right: 1px solid var(--line);\n background: var(--panel);\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n padding: 16px 12px 20px;\n}\n.records-head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 12px;\n padding: 0 4px;\n}\n.records-title {\n font-family: var(--font-mono);\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: var(--dim);\n margin: 0;\n}\n.muted-btn {\n background: none;\n border: none;\n color: var(--dim);\n font-family: var(--font-mono);\n font-size: 11px;\n padding: 4px 6px;\n border-radius: 4px;\n}\n.muted-btn:hover { color: var(--red); }\n\n.record-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }\n.record {\n width: 100%;\n text-align: left;\n background: var(--panel-2);\n border: 1px solid var(--line);\n border-radius: 8px;\n padding: 10px 12px;\n color: var(--text);\n min-height: 48px;\n display: flex;\n flex-direction: column;\n gap: 4px;\n transition: border-color 0.15s ease, background 0.15s ease;\n}\n.record:hover { border-color: var(--line-2); background: var(--panel-3); }\n.record.active { border-color: var(--amber); background: var(--amber-soft); }\n.record-prompt {\n font-size: 12.5px;\n color: var(--text);\n line-height: 1.35;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n.record-time {\n font-family: var(--font-mono);\n font-size: 10px;\n color: var(--dim);\n text-transform: uppercase;\n letter-spacing: 0.06em;\n}\n\n.records-empty {\n color: var(--dim);\n font-size: 12.5px;\n line-height: 1.6;\n padding: 8px 6px;\n}\n.records-empty strong { color: var(--amber); font-weight: 600; }\n\n/* ---- workshop column ---- */\n.workshop {\n border-right: 1px solid var(--line);\n background: var(--panel-2);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.prompt-panel {\n padding: 18px 18px 14px;\n border-bottom: 1px solid var(--line);\n display: flex;\n flex-direction: column;\n gap: 10px;\n flex: none;\n}\n\n.field-label {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n font-family: var(--font-mono);\n font-size: 11px;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: var(--dim);\n}\n.char-count { font-size: 10px; letter-spacing: 0; color: var(--dim); }\n\n#prompt {\n width: 100%;\n resize: vertical;\n min-height: 120px;\n background: var(--ink);\n border: 1px solid var(--line-2);\n border-radius: 10px;\n padding: 12px 14px;\n color: var(--text);\n font-family: var(--font-body);\n font-size: 14px;\n line-height: 1.55;\n}\n#prompt::placeholder { color: var(--dim); }\n#prompt:focus { border-color: var(--amber); }\n\n.examples { display: flex; flex-direction: column; gap: 8px; }\n.examples-label {\n font-family: var(--font-mono);\n font-size: 10px;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: var(--dim);\n}\n.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }\n.chip {\n background: var(--panel-3);\n border: 1px solid var(--line);\n color: var(--muted);\n font-family: var(--font-mono);\n font-size: 11px;\n padding: 8px 10px;\n border-radius: 999px;\n min-height: 32px;\n transition: color 0.15s ease, border-color 0.15s ease;\n}\n.chip:hover { color: var(--teal); border-color: var(--teal); }\n\n.build-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n width: 100%;\n min-height: 48px;\n margin-top: 4px;\n background: linear-gradient(180deg, var(--amber), #d68c24);\n border: none;\n border-radius: 10px;\n color: #151107;\n font-family: var(--font-display);\n font-weight: 700;\n font-size: 15px;\n letter-spacing: 0.02em;\n box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 8px 20px -10px rgba(232,163,61,0.5);\n}\n.build-btn:disabled {\n opacity: 0.55;\n cursor: wait;\n}\n.build-btn:not(:disabled):hover { filter: brightness(1.06); }\n.build-glyph { width: 20px; height: 20px; }\n.build-btn:disabled .build-glyph { animation: spin 1.2s linear infinite; }\n@keyframes spin { to { transform: rotate(360deg); } }\n\n.build-hint {\n margin: 0;\n text-align: center;\n font-family: var(--font-mono);\n font-size: 10px;\n color: var(--dim);\n letter-spacing: 0.04em;\n}\n\n/* ---- console ---- */\n.console {\n flex: 1;\n min-height: 0;\n background: var(--ink);\n display: flex;\n flex-direction: column;\n border-top: 1px solid var(--line);\n}\n.console-head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 14px;\n border-bottom: 1px solid var(--line);\n background: var(--panel);\n}\n.console-title {\n font-family: var(--font-mono);\n font-size: 10px;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: var(--dim);\n}\n.cursor { color: var(--amber); animation: blink 1s steps(1) infinite; }\n@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }\n\n.log {\n list-style: none;\n margin: 0;\n padding: 12px 14px;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n gap: 8px;\n font-family: var(--font-mono);\n font-size: 12px;\n}\n.log li {\n display: flex;\n align-items: baseline;\n gap: 10px;\n min-width: 0;\n}\n.log .t-time {\n color: var(--dim);\n font-size: 10px;\n flex: none;\n font-variant-numeric: tabular-nums;\n}\n.log .t-tag {\n flex: none;\n color: var(--teal);\n letter-spacing: 0.04em;\n}\n.log .t-tag::before { content: \"● \"; font-size: 9px; }\n.log .t-msg { color: var(--muted); word-break: break-word; }\n.log li.stage .t-msg { color: var(--text); }\n.log li.stage .t-tag { color: var(--amber); }\n.log li.stage .t-msg .tick::after { content: \"▌\"; color: var(--amber); animation: blink 1s steps(1) infinite; }\n.log li.ok .t-tag { color: var(--ok); }\n.log li.err .t-tag { color: var(--red); }\n.log li.err .t-msg { color: var(--red); }\n.log li.note { opacity: 0.6; }\n\n.error-banner {\n flex: none;\n margin: 0 14px 14px;\n border: 1px solid var(--red);\n background: var(--red-soft);\n color: var(--red);\n border-radius: 8px;\n padding: 10px 12px;\n font-family: var(--font-mono);\n font-size: 12px;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n/* ---- preview ---- */\n.preview {\n background: var(--panel-2);\n display: flex;\n flex-direction: column;\n min-width: 0;\n}\n.preview-head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 14px;\n height: 37px;\n border-bottom: 1px solid var(--line);\n flex: none;\n}\n.preview-title {\n font-family: var(--font-mono);\n font-size: 10px;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: var(--dim);\n}\n.preview-meta {\n font-family: var(--font-mono);\n font-size: 11px;\n color: var(--teal);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n min-width: 0;\n}\n.preview-tools {\n display: flex;\n align-items: center;\n gap: 8px;\n min-width: 0;\n justify-content: flex-end;\n}\n.tool-btn {\n flex: none;\n font-family: var(--font-mono);\n font-size: 11px;\n text-decoration: none;\n color: var(--muted);\n background: var(--panel-2);\n border: 1px solid var(--line-2);\n border-radius: 6px;\n padding: 6px 10px;\n min-height: 30px;\n}\n.tool-btn:hover:not(:disabled):not([aria-disabled=\"true\"]) { color: var(--amber); border-color: var(--amber); }\n.tool-btn:disabled, .tool-btn[aria-disabled=\"true\"] {\n opacity: 0.4;\n cursor: not-allowed;\n pointer-events: none;\n}\n.share-btn { color: var(--teal); border-color: var(--teal); }\n.share-btn:hover { color: var(--amber); border-color: var(--amber); }\n\n/* ---- toast ---- */\n.toast {\n position: fixed;\n left: 50%;\n bottom: 22px;\n transform: translateX(-50%) translateY(0);\n max-width: min(420px, calc(100vw - 32px));\n background: var(--panel-3);\n border: 1px solid var(--teal);\n color: var(--text);\n font-family: var(--font-mono);\n font-size: 12px;\n padding: 12px 16px;\n border-radius: 8px;\n box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.7);\n z-index: 50;\n}\n.frame-wrap { position: relative; flex: 1; min-height: 0; background: #0d0f14; }\n.sandbox {\n width: 100%;\n height: 100%;\n border: none;\n display: block;\n background: #fff;\n}\n\n.preview-empty {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n gap: 6px;\n color: var(--dim);\n padding: 24px;\n background:\n radial-gradient(circle at 50% 40%, rgba(79,176,165,0.06), transparent 60%),\n #0d0f14;\n}\n.empty-glyph { width: 44px; height: 44px; margin-bottom: 6px; }\n.preview-empty p { margin: 0; font-family: var(--font-body); font-size: 13px; }\n.empty-sub { opacity: 0.8; }\n.preview-empty strong { color: var(--amber); font-weight: 600; }\n.preview-empty.hidden { display: none; }\n\n/* ---- responsive ---- */\n@media (max-width: 1080px) {\n .workspace { grid-template-columns: 180px minmax(330px, 1fr) 1fr; }\n}\n@media (max-width: 920px) {\n .workspace {\n grid-template-columns: 1fr;\n grid-template-rows: auto 1fr 1fr;\n overflow-y: auto;\n height: auto;\n }\n .app { height: 100%; min-height: 100vh; }\n .records { border-right: none; border-bottom: 1px solid var(--line); flex-direction: row; align-items: flex-start; flex-wrap: wrap; }\n .record-list { flex-direction: row; flex-wrap: wrap; }\n .record { width: auto; flex: 1 1 200px; }\n .workshop { border-right: none; border-bottom: 1px solid var(--line); }\n .console { min-height: 220px; }\n .preview { min-height: 480px; }\n .frame-wrap { min-height: 440px; }\n .topbar { flex-wrap: wrap; height: auto; padding: 10px 14px; gap: 8px; }\n}\n\n@media (max-width: 560px) {\n .chip { flex: 1 1 auto; }\n .brand-sub { display: none; }\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .record, .chip, .build-btn, .source-link { transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, filter 0.15s ease; }\n}\n@media (prefers-reduced-motion: reduce) {\n .cursor, .log li.stage .t-msg .tick::after, .build-btn:disabled .build-glyph { animation: none; }\n * { scroll-behavior: auto !important; }\n}\n",[],[56,93],"723cb1f5-4895-4ef8-acbd-5d7d59d350f9","og.svg","940ffca2-9bab-11f1-94bf-1607ee4eb77e",24,["D",1787129665087],"\n\n",[],[56,102],["D",1787129665139],[],[56,35],"f784367d-685e-4ecf-a9b6-d963c88780c9","index.html","626b8bc2-9baa-11f1-8d0b-1607ee4eb77e",29,["D",1787129671209],6,"\n\n\n \n \n Foundry Epic — app workshop\n \n\n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n\n\n

\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",[],[56,113],"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",[],[56,122],"08bd9ba8-fe3c-46b0-b5db-6a737b8f9cff","lib","4ff44d5b-fd11-4a12-a0d1-08cf71d5f9b1",["D",1787129107718],[136,137,138],[131],{"_33":154,"_13":155,"_36":156,"_38":132,"_40":41,"_42":157,"_44":45,"_46":158,"_17":159,"_49":88,"_50":160,"_52":53,"_54":-5,"_69":161,"_18":162},{"_33":146,"_13":147,"_36":148,"_38":132,"_40":41,"_42":149,"_44":45,"_46":150,"_17":48,"_49":88,"_50":151,"_52":53,"_54":-5,"_69":152,"_18":153},{"_33":139,"_13":140,"_36":141,"_38":132,"_40":41,"_42":97,"_44":45,"_46":142,"_17":48,"_49":88,"_50":143,"_52":53,"_54":-5,"_69":144,"_18":145},"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