Cosmic Studio

\");\n const html = renderWithContext(source, ctx);\n ctx.set(outKey, html);\n } else if (node.kind === \"api\") {\n const outKey = String(cfg.outKey || \"response:json\");\n const source = String(cfg.compute || \"{}\");\n const payload = computeWithContext(source, ctx);\n ctx.set(outKey, payload);\n } else if (node.kind === \"transform\") {\n const code = String(cfg.code || \"\");\n execWithContext(code, ctx);\n } else if (node.kind === \"branch\") {\n const predicate = String(cfg.predicate || \"true\");\n const ok = evalCondition(predicate, ctx);\n ctx.set(`${node.id}:cond`, ok);\n } else if (node.kind === \"sink\") {\n // no-op\n } else if (node.kind === \"parallel\") {\n // naive: run each sub-id listed in cfg.children sequentially (can be extended)\n const children: string[] = Array.isArray(cfg.children) ? cfg.children : [];\n for (const child of children) {\n const sub = ctx.get(`${child}:rows`) || [];\n ctx.set(`${node.id}:${child}`, sub);\n }\n }\n}\n\nfunction renderWithContext(template: string, ctx: Context): string {\n // Ultra-simple handlebars: {{varName}} substitution\n return template.replace(\n /\\{\\{\\s*([a-zA-Z0-9:_-]+)\\s*\\}\\}/g,\n (_, k) => escapeHtml(String(ctx.get(k) ?? \"\")),\n );\n}\n\nfunction computeWithContext(code: string, ctx: Context): any {\n try {\n const f = new Function(\"ctx\", `with(ctx.vars){ return (${code}); }`);\n return f(ctx);\n } catch {\n return { error: \"compute_failed\" };\n }\n}\n\nfunction execWithContext(code: string, ctx: Context): void {\n try {\n const f = new Function(\"ctx\", `with(ctx.vars){ ${code} }`);\n f(ctx);\n } catch {\n // swallow\n }\n}\n\n// ---------- Layout ----------\nconst app = new Hono();\napp.use(\n \"*\",\n jsxRenderer(\n ({ children }) => (\n \n \n Cosmic Studio\n \n \n \n {children}\n \n ),\n { docType: false },\n ),\n);\n\n// ---------- Page: Studio ----------\napp.get(\"/\", async (c) => {\n const rows = await sqlite.execute(\n \"SELECT id,label,createdAt FROM graphs ORDER BY createdAt DESC\",\n );\n const graphs = rows.rows.map((r) => ({\n id: String(r[0]),\n label: String(r[1]),\n createdAt: String(r[2]),\n }));\n return c.render(\n

\n \n\n

Create graph

\n \n

\n\n

Graphs

\n {g.label}\n • {g.id}\n \n Export JSON\n \n

\n\n \n

,\n );\n});\n\n// ---------- Page: Graph editor ----------\napp.get(\"/graph/:id\", async (c) => {\n const { id } = c.req.param();\n const gRes = await sqlite.execute({\n sql: \"SELECT id,label FROM graphs WHERE id=?\",\n args: [id],\n });\n if (!gRes.rows.length) return c.text(\"Graph not found\", 404);\n const graph = { id: String(gRes.rows[0][0]), label: String(gRes.rows[0][1]) };\n\n const nRes = await sqlite.execute({\n sql: \"SELECT id,kind,label,config FROM nodes WHERE graphId=? ORDER BY id\",\n args: [id],\n });\n const nodes = nRes.rows.map((r) => ({\n id: String(r[0]),\n kind: String(r[1]),\n label: String(r[2]),\n config: safeJson(String(r[3]), {}),\n }));\n\n const eRes = await sqlite.execute({\n sql:\n \"SELECT id,fromNode,toNode,label,condition FROM edges WHERE graphId=? ORDER BY id\",\n args: [id],\n });\n const edges = eRes.rows.map((r) => ({\n id: String(r[0]),\n fromNode: String(r[1]),\n toNode: String(r[2]),\n label: String(r[3] ?? \"\"),\n condition: String(r[4] ?? \"\"),\n }));\n\n const def: GraphDef = { id: graph.id, label: graph.label, nodes, edges };\n const runtime = new Runtime(def);\n\n return c.render(\n

\n \n\n

Editor

Nodes

Edges

\n \n

\n {e.id} • {e.fromNode} → {e.toNode}\n {\" \"}\n {e.label ? `• ${e.label}` : \"\"}\n \n

\n\n

Diagram

\n \n

\n\n

Run

\n \n

\n\n \n

,\n );\n});\n\n// ---------- API: create graph ----------\n\napp.post(\"/api/graphs\", async (c) => {\n const ct = c.req.header(\"content-type\") || \"\";\n console.log(\"[/api/graphs] Content-Type:\", ct);\n\n let body: any = {};\n try {\n if (ct.includes(\"application/json\")) {\n body = await c.req.json();\n console.log(\"[/api/graphs] Parsed JSON body:\", body);\n } else {\n body = await c.req.parseBody();\n console.log(\"[/api/graphs] Parsed form body:\", body);\n }\n } catch (err) {\n console.error(\"[/api/graphs] Body parse error:\", err);\n return c.json({ error: \"Body parse failed\" }, 400);\n }\n\n const label = String(body.label || \"\").trim();\n console.log(\"[/api/graphs] Label extracted:\", label);\n\n if (!label) {\n console.warn(\"[/api/graphs] Missing label, aborting\");\n return c.json({ error: \"Label required\" }, 400);\n }\n\n const id = crypto.randomUUID();\n const createdAt = new Date().toISOString();\n console.log(\"[/api/graphs] Inserting graph:\", { id, label, createdAt });\n\n try {\n const res = await sqlite.execute({\n sql: \"INSERT INTO graphs (id,label,createdAt) VALUES (?,?,?)\",\n args: [id, label, createdAt],\n });\n console.log(\"[/api/graphs] Insert result:\", res);\n } catch (err) {\n console.error(\"[/api/graphs] SQLite error:\", err);\n return c.json({ error: \"DB insert failed\" }, 500);\n }\n\n return c.json({ ok: true, id, label });\n});\n// ---------- API: add/delete node ----------\napp.post(\"/api/graphs/:id/nodes\", async (c) => {\n const { id } = c.req.param();\n const body = await c.req.parseBody();\n const nid = String(body.id || \"\");\n const kind = String(body.kind || \"\");\n const label = String(body.label || nid);\n let configObj: any = {};\n try {\n configObj = body.config ? JSON.parse(String(body.config)) : {};\n } catch {\n return c.json({ error: \"Invalid JSON config\" }, 400);\n }\n if (!nid || !kind) return c.json({ error: \"id and kind required\" }, 400);\n await sqlite.execute({\n sql: \"INSERT INTO nodes (id,graphId,kind,label,config) VALUES (?,?,?,?,?)\",\n args: [nid, id, kind, label, JSON.stringify(configObj)],\n });\n return c.json({ ok: true });\n});\napp.post(\"/api/graphs/:id/nodes/:nid/delete\", async (c) => {\n const { id, nid } = c.req.param();\n await sqlite.execute({\n sql: \"DELETE FROM nodes WHERE graphId=? AND id=?\",\n args: [id, nid],\n });\n await sqlite.execute({\n sql: \"DELETE FROM edges WHERE graphId=? AND (fromNode=? OR toNode=?)\",\n args: [id, nid, nid],\n });\n return c.json({ ok: true });\n});\n\n// ---------- API: add/delete edge ----------\napp.post(\"/api/graphs/:id/edges\", async (c) => {\n const { id } = c.req.param();\n const body = await c.req.parseBody();\n const eid = String(body.id || \"\");\n const fromNode = String(body.fromNode || \"\");\n const toNode = String(body.toNode || \"\");\n const label = String(body.label || \"\");\n const condition = String(body.condition || \"\");\n if (!eid || !fromNode || !toNode) {\n return c.json({ error: \"id, fromNode, toNode required\" }, 400);\n }\n await sqlite.execute({\n sql:\n \"INSERT INTO edges (id,graphId,fromNode,toNode,label,condition) VALUES (?,?,?,?,?,?)\",\n args: [eid, id, fromNode, toNode, label, condition],\n });\n return c.json({ ok: true });\n});\napp.post(\"/api/graphs/:id/edges/:eid/delete\", async (c) => {\n const { id, eid } = c.req.param();\n await sqlite.execute({\n sql: \"DELETE FROM edges WHERE graphId=? AND id=?\",\n args: [id, eid],\n });\n return c.json({ ok: true });\n});\n\n// ---------- API: export/import ----------\napp.get(\"/export/:id\", async (c) => {\n const { id } = c.req.param();\n const gRes = await sqlite.execute({\n sql: \"SELECT id,label FROM graphs WHERE id=?\",\n args: [id],\n });\n if (!gRes.rows.length) return c.text(\"Not found\", 404);\n const nRes = await sqlite.execute({\n sql: \"SELECT id,kind,label,config FROM nodes WHERE graphId=?\",\n args: [id],\n });\n const eRes = await sqlite.execute({\n sql: \"SELECT id,fromNode,toNode,label,condition FROM edges WHERE graphId=?\",\n args: [id],\n });\n const json = {\n id: String(gRes.rows[0][0]),\n label: String(gRes.rows[0][1]),\n nodes: nRes.rows.map((r) => ({\n id: String(r[0]),\n kind: String(r[1]),\n label: String(r[2]),\n config: safeJson(String(r[3]), {}),\n })),\n edges: eRes.rows.map((r) => ({\n id: String(r[0]),\n fromNode: String(r[1]),\n toNode: String(r[2]),\n label: String(r[3] ?? \"\"),\n condition: String(r[4] ?? \"\"),\n })),\n };\n return new Response(JSON.stringify(json, null, 2), {\n headers: {\n \"content-type\": \"application/json; charset=utf-8\",\n \"content-disposition\": `attachment; filename=\"${id}.json\"`,\n },\n });\n});\n\napp.post(\"/import\", async (c) => {\n const bodyText = await c.req.text();\n let data: any;\n try {\n data = JSON.parse(bodyText);\n } catch {\n return c.json({ error: \"Invalid JSON\" }, 400);\n }\n const id = data.id || crypto.randomUUID();\n const label = String(data.label || \"Imported Graph\");\n await sqlite.execute({\n sql: \"INSERT OR REPLACE INTO graphs (id,label,createdAt) VALUES (?,?,?)\",\n args: [id, label, new Date().toISOString()],\n });\n await sqlite.execute({\n sql: \"DELETE FROM nodes WHERE graphId=?\",\n args: [id],\n });\n await sqlite.execute({\n sql: \"DELETE FROM edges WHERE graphId=?\",\n args: [id],\n });\n for (const n of data.nodes || []) {\n await sqlite.execute({\n sql:\n \"INSERT INTO nodes (id,graphId,kind,label,config) VALUES (?,?,?,?,?)\",\n args: [\n String(n.id),\n id,\n String(n.kind),\n String(n.label || n.id),\n JSON.stringify(n.config || {}),\n ],\n });\n }\n for (const e of data.edges || []) {\n await sqlite.execute({\n sql:\n \"INSERT INTO edges (id,graphId,fromNode,toNode,label,condition) VALUES (?,?,?,?,?,?)\",\n args: [\n String(e.id),\n id,\n String(e.fromNode),\n String(e.toNode),\n String(e.label || \"\"),\n String(e.condition || \"\"),\n ],\n });\n }\n return c.json({ ok: true, id, label });\n});\n\n// ---------- SSE: live run ----------\napp.get(\"/sse/run/:id\", async (c) => {\n const { id } = c.req.param();\n const startNodeId = String(c.req.query(\"startNodeId\") || \"\");\n if (!startNodeId) return c.text(\"startNodeId required\", 400);\n\n const graph = await loadGraph(id);\n if (!graph) return c.text(\"Graph not found\", 404);\n\n const stream = new ReadableStream({\n start(controller) {\n const enc = new TextEncoder();\n const emit: EmitFn = (event, payload) => {\n controller.enqueue(enc.encode(`event: ${event}\\n`));\n controller.enqueue(enc.encode(`data: ${JSON.stringify(payload)}\\n\\n`));\n };\n (async () => {\n const runtime = new Runtime(graph, emit);\n const ctx = new Context();\n await runtime.execute(startNodeId, ctx);\n controller.close();\n })();\n },\n });\n return new Response(stream, {\n headers: {\n \"content-type\": \"text/event-stream\",\n \"cache-control\": \"no-cache\",\n \"connection\": \"keep-alive\",\n },\n });\n});\n\n// ---------- Helpers ----------\nfunction safeJson(s: string, fallback: any) {\n try {\n return JSON.parse(s);\n } catch {\n return fallback;\n }\n}\nasync function loadGraph(id: string): Promise {\n const gRes = await sqlite.execute({\n sql: \"SELECT id,label FROM graphs WHERE id=?\",\n args: [id],\n });\n if (!gRes.rows.length) return null;\n const nRes = await sqlite.execute({\n sql: \"SELECT id,kind,label,config FROM nodes WHERE graphId=? ORDER BY id\",\n args: [id],\n });\n const eRes = await sqlite.execute({\n sql:\n \"SELECT id,fromNode,toNode,label,condition FROM edges WHERE graphId=? ORDER BY id\",\n args: [id],\n });\n return {\n id: String(gRes.rows[0][0]),\n label: String(gRes.rows[0][1]),\n nodes: nRes.rows.map((r) => ({\n id: String(r[0]),\n kind: String(r[1]) as NodeKind,\n label: String(r[2]),\n config: safeJson(String(r[3]), {}),\n })),\n edges: eRes.rows.map((r) => ({\n id: String(r[0]),\n fromNode: String(r[1]),\n toNode: String(r[2]),\n label: String(r[3] ?? \"\"),\n condition: String(r[4] ?? \"\"),\n })),\n };\n}\n\n// ---------- Clients ----------\nconst homeClientJs = `\nconst createForm = document.getElementById('createGraphForm');\nconst graphList = document.getElementById('graphList');\ncreateForm.addEventListener('submit', async (e) => {\n e.preventDefault();\n const fd = new FormData(createForm);\n const body = new URLSearchParams(fd as any);\n const res = await fetch('/api/graphs', { method: 'POST', body });\n const data = await res.json();\n if (res.ok) {\n const li = document.createElement('li');\n li.innerHTML = '' + (fd.get('label')||'') + ' • ' + data.id + '';\n graphList.prepend(li);\n createForm.reset();\n } else {\n alert(data.error || 'Failed to create');\n }\n});\n`;\n\nfunction graphClientJs(graphId: string) {\n return `\nconst graphId = \"${graphId}\";\nconst nodeList = document.getElementById('nodeList');\nconst edgeList = document.getElementById('edgeList');\nconst addNodeForm = document.getElementById('addNodeForm');\nconst addEdgeForm = document.getElementById('addEdgeForm');\nconst diagram = document.getElementById('diagram');\nconst runForm = document.getElementById('runForm');\nconst runOutput = document.getElementById('runOutput');\nconst traceBox = document.getElementById('trace');\n\naddNodeForm.addEventListener('submit', async (e) => {\n e.preventDefault();\n const fd = new FormData(addNodeForm);\n const res = await fetch('/api/graphs/' + graphId + '/nodes', { method: 'POST', body: new URLSearchParams(fd as any) });\n const data = await res.json();\n if (res.ok) location.reload();\n else alert(data.error || 'Failed to add node');\n});\n\nnodeList.querySelectorAll('[data-del-node]').forEach(btn => {\n btn.addEventListener('click', async () => {\n const nid = btn.getAttribute('data-del-node');\n if (!confirm('Delete node ' + nid + ' and its edges?')) return;\n const res = await fetch('/api/graphs/' + graphId + '/nodes/' + nid + '/delete', { method: 'POST' });\n if (res.ok) location.reload();\n });\n});\n\naddEdgeForm.addEventListener('submit', async (e) => {\n e.preventDefault();\n const fd = new FormData(addEdgeForm);\n const res = await fetch('/api/graphs/' + graphId + '/edges', { method: 'POST', body: new URLSearchParams(fd as any) });\n const data = await res.json();\n if (res.ok) location.reload();\n else alert(data.error || 'Failed to add edge');\n});\n\nedgeList.querySelectorAll('[data-del-edge]').forEach(btn => {\n btn.addEventListener('click', async () => {\n const eid = btn.getAttribute('data-del-edge');\n if (!confirm('Delete edge ' + eid + '?')) return;\n const res = await fetch('/api/graphs/' + graphId + '/edges/' + eid + '/delete', {headers: { 'content-type': 'application/x-www-form-urlencoded', method: 'POST' });\n if (res.ok) location.reload();\n });\n});\n\nrunForm.addEventListener('submit', (e) => {\n e.preventDefault();\n traceBox.innerHTML = '';\n runOutput.innerHTML = '';\n const fd = new FormData(runForm);\n const startNodeId = fd.get('startNodeId');\n const src = new EventSource('/sse/run/' + graphId + '?startNodeId=' + encodeURIComponent(String(startNodeId||'')));\n src.addEventListener('node:start', (ev) => addTrace('node:start', ev.data));\n src.addEventListener('edge', (ev) => {\n addTrace('edge', ev.data);\n highlightEdge(JSON.parse(ev.data));\n });\n src.addEventListener('trace', (ev) => addTrace('trace', ev.data));\n src.addEventListener('done', (ev) => { addTrace('done', ev.data); src.close(); refreshDiagram(); });\n src.onerror = () => { addTrace('error', '{\"error\":\"stream error\"}'); src.close(); };\n});\n\nfunction addTrace(type, dataStr) {\n const pre = document.createElement('pre');\n pre.textContent = '[' + type + '] ' + dataStr;\n traceBox.appendChild(pre);\n traceBox.scrollTop = traceBox.scrollHeight;\n}\n\nfunction highlightEdge(edge) {\n // quick flash by re-rendering diagram line color (requires a server redraw to be perfect; we simulate client flash)\n const lines = diagram.querySelectorAll('line');\n lines.forEach(l => {\n l.style.stroke = '#4fb3ff';\n });\n}\n\nasync function refreshDiagram() {\n const res = await fetch(location.href, { headers: { 'accept': 'text/html' } });\n const html = await res.text();\n const tmp = document.createElement('div');\n tmp.innerHTML = html;\n const newDiagram = tmp.querySelector('#diagram');\n if (newDiagram) diagram.innerHTML = newDiagram.innerHTML;\n}\n`;\n}\n\n// ---------- Styles ----------\nconst styles = `\n:root { --bg:#0b0f14; --card:#131922; --text:#e6edf3; --muted:#9aa7b0; --accent:#2bbf74; --danger:#ff5c5c; --border:#223042; }\n* { box-sizing:border-box; }\nbody { margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; background: var(--bg); color: var(--text); }\n.container { max-width: 1000px; margin: 0 auto; padding: 20px; }\n.header { margin-bottom: 12px; }\n.sub { color: var(--muted); }\n.card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin: 12px 0; }\n.list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }\n.editor { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }\ninput, select, textarea { width: 100%; padding: 10px 12px; background: #0f141b; color: var(--text); border: 1px solid var(--border); border-radius: 8px; outline: none; }\ntextarea { min-height: 80px; }\n.btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; text-decoration: none; color: var(--text); background: transparent; }\n.btn.primary { background: var(--accent); color: #06210f; border-color: #1a8e56; }\n.btn.danger { background: var(--danger); color: #210606; border-color: #c94848; }\n.btn.outline { background: transparent; color: var(--text); }\n.small { font-size: 12px; }\n.muted { color: var(--muted); }\n.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; }\n.badge { font-size: 12px; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--border); color: var(--muted); margin: 0 6px; }\n.diagram { overflow: auto; }\n.output { background: #0f141b; border-radius: 8px; padding: 12px; min-height: 48px; }\n.trace { background: #0f141b; border-radius: 8px; padding: 12px; max-height: 240px; overflow: auto; }\n`;\n\n// ---------- Export ----------\nexport default app.fetch;","deleted","label","cosmic-studio",[99],"permalink","https://www.val.town/x/ziggyware/CosmicStudio/code/main.ts","extension","actionData","errors"]