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",[],[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