acrylblends 0.2.0 → 0.4.0

package/templates/agent/src/app.ts

@@ -1,11 +1,12 @@
 import { join } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { Context, type Fiber } from '@deepseek-ai/cordis'
+import * as nodeServer from './plugins/acryl-node-server/src/index.ts'
+import * as router from './plugins/acryl-router/src/index.ts'
+import * as state from './plugins/acryl-state/src/index.ts'
 import { agent, memory, model, tools } from './plugins/agent/index.ts'
 import { builder } from './plugins/builder/index.ts'
-import { events } from './plugins/events/index.ts'
 import { extensions } from './plugins/extensions/index.ts'
-import { http } from './plugins/http/index.ts'
 import { type AppInstance, instance } from './plugins/instance/index.ts'
 import {
   blueprintsIn,
@@ -16,7 +17,6 @@ import {
 import { type OpenAIConfig, openai } from './plugins/openai/index.ts'
 import { sandboxPlugin } from './plugins/sandbox/index.ts'
 import { save } from './plugins/save/index.ts'
-import { server } from './plugins/server/index.ts'
 import { tasks } from './plugins/tasks/index.ts'
 import { routes } from './routes.ts'
 
@@ -27,14 +27,14 @@ export const registry = {
   tools,
   memory,
   agent,
-  http,
-  events,
+  'acryl-router': router,
+  'acryl-state': state,
   extensions,
   builder,
   save,
   sandbox: sandboxPlugin,
   routes,
-  server,
+  'acryl-node-server': nodeServer,
 }
 
 /** The manifest next to this app's source. */
@@ -85,12 +85,12 @@ export async function createApp(
       // The `approval` parameter in blend.yaml (the extensions row) turns this source into one that asks.
       extensions: { sources: [{ dir: extensionsDir, trust: 'install' }] },
       builder: { dir: extensionsDir },
-      server: { port: chosen.port.start, scan: chosen.port.scan, hostname: chosen.host },
+      server: { port: chosen.port.start, scan: chosen.port.scan ? 20 : 0, hostname: chosen.host },
     })),
   ]
   return {
     root,
-    url: root.server.url,
+    url: root.nodeServer.url,
     async stop() {
       for (const fiber of [...fibers].reverse()) await fiber.dispose()
     },

package/templates/agent/src/routes.ts

@@ -1,62 +1,63 @@
 import type { Context } from '@deepseek-ai/cordis'
+import { App } from './plugins/acryl-router/src/index.ts'
+import { bodyLimit } from './plugins/acryl-router/src/middleware/index.ts'
 import type {} from './plugins/agent/index.ts'
 import type {} from './plugins/extensions/index.ts'
-import type {} from './plugins/http/index.ts'
 import type {} from './plugins/tasks/index.ts'
 
 export const APP_NAME = '__APP_NAME__'
 
 /**
- * The app's own routes: `POST /ask` for the agent; `GET /extensions` and `GET /tasks` to observe what it did (every run is a durable
- * task owning one task per tool call); `POST /tasks/cancel`. Each route lives in a `ctx.effect`.
+ * The app's own routes on the router: `POST /ask` for the agent; `GET /extensions` and `GET /tasks` to observe what it did (every run is a
+ * durable task owning one task per tool call); `POST /tasks/cancel`. What changes is also streamed: `GET /api/state/tasks/events` and
+ * `GET /api/state/extensions/events`. The mount is removed when the plugin is disposed.
  */
 export const routes = {
   name: 'routes',
-  inject: ['http', 'agent', 'extensions', 'tasks'],
+  inject: ['router', 'agent', 'extensions', 'tasks'],
   apply(ctx: Context) {
-    ctx.effect(() => ctx.http.route('GET', '/', () => ({ body: { app: APP_NAME, ok: true } })))
-    ctx.effect(() => ctx.http.route('GET', '/health', () => ({ body: { ok: true } })))
-    ctx.effect(() =>
-      ctx.http.route('GET', '/extensions', () => ({
-        body: {
+    // A body here is a name, an id or a question; anything bigger is refused before it is read.
+    const json = async (c: {
+      req: { json(): Promise<unknown> }
+    }): Promise<Record<string, unknown>> => {
+      const body = await c.req.json().catch(() => undefined)
+      return typeof body === 'object' && body !== null ? (body as Record<string, unknown>) : {}
+    }
+    const app = new App()
+      .use(bodyLimit({ maxSize: 64 * 1024 }))
+      .get('/', (c) => c.json({ app: APP_NAME, ok: true }))
+      .get('/health', (c) => c.json({ ok: true }))
+      .get('/extensions', (c) =>
+        c.json({
           installed: ctx.extensions.list(),
           notInstalled: ctx.extensions.pending(),
           waitingForApproval: ctx.extensions.approvals(),
-        },
-      })),
-    )
+        }),
+      )
     // The owner's decision on an install that is waiting (the `approval` parameter in blend.yaml).
     for (const [path, decide] of [
       ['/extensions/approve', (name: string) => ctx.extensions.approve(name)],
       ['/extensions/deny', (name: string) => ctx.extensions.deny(name)],
     ] as const) {
-      ctx.effect(() =>
-        ctx.http.route('POST', path, async ({ body }) => {
-          const name = (body as { name?: unknown } | undefined)?.name
-          if (typeof name !== 'string')
-            return { status: 400, body: { error: 'name must be a string' } }
-          return { body: await decide(name) }
-        }),
-      )
+      app.post(path, async (c) => {
+        const { name } = await json(c)
+        if (typeof name !== 'string') return c.json({ error: 'name must be a string' }, 400)
+        return c.json(await decide(name))
+      })
     }
-    ctx.effect(() =>
-      ctx.http.route('GET', '/tasks', () => ({ body: ctx.tasks.list().slice(0, 100) })),
-    )
-    ctx.effect(() =>
-      ctx.http.route('POST', '/tasks/cancel', ({ body }) => {
-        const id = (body as { id?: unknown } | undefined)?.id
+    app
+      .get('/tasks', (c) => c.json(ctx.tasks.list().slice(0, 100)))
+      .post('/tasks/cancel', async (c) => {
+        const { id } = await json(c)
         if (typeof id !== 'string' || !ctx.tasks.get(id))
-          return { status: 404, body: { error: 'no such task' } }
-        return { body: { cancelled: ctx.tasks.cancel(id) } }
-      }),
-    )
-    ctx.effect(() =>
-      ctx.http.route('POST', '/ask', async ({ body }) => {
-        const question = (body as { question?: unknown } | undefined)?.question
-        if (typeof question !== 'string')
-          return { status: 400, body: { error: 'question must be a string' } }
-        return { body: await ctx.agent.run(question) }
-      }),
-    )
+          return c.json({ error: 'no such task' }, 404)
+        return c.json({ cancelled: ctx.tasks.cancel(id) })
+      })
+      .post('/ask', async (c) => {
+        const { question } = await json(c)
+        if (typeof question !== 'string') return c.json({ error: 'question must be a string' }, 400)
+        return c.json(await ctx.agent.run(question))
+      })
+    ctx.router.route('/', app)
   },
 }

package/templates/agent/template.json

@@ -1,9 +1,9 @@
 {
   "plugins": [
     "instance",
-    "http",
-    "events",
-    "server",
+    "acryl-router",
+    "acryl-state",
+    "acryl-node-server",
     "tasks",
     "agent",
     "openai",

package/templates/agent/test/builder.test.ts

@@ -134,51 +134,59 @@ test('the agent builds a sandboxed tool, calls it, and the sandbox refuses a too
   }
 })
 
-test('GET /events streams what happens: the run as a task, and the install as an extension change', async () => {
+test('what happens is streamed from the state cells: the run as a task, and the install as an extension', async () => {
   const project = await mkdtemp(join(tmpdir(), 'events-project-'))
   const chosen = withPort(pinnedInstance(join(project, '.acrylblends'), { root: project }), 0)
   const app = await createApp(chosen)
   const controller = new AbortController()
-  try {
-    const stream = await fetch(`${app.url}/events`, { signal: controller.signal })
+  /** Follow one server-sent stream: its text so far. */
+  const follow = async (path: string) => {
+    const stream = await fetch(`${app.url}${path}`, { signal: controller.signal })
+    assert.equal(stream.status, 200, path)
     const reader = stream.body!.getReader()
     const decoder = new TextDecoder()
-    let text = ''
-    const seen = (what: RegExp) => what.test(text)
+    const seen = { text: '' }
     const pump = (async () => {
       for (;;) {
         const { value, done } = await reader.read()
         if (done) return
-        text += decoder.decode(value, { stream: true })
+        seen.text += decoder.decode(value, { stream: true })
       }
     })().catch(() => undefined)
+    return { seen, pump }
+  }
+  try {
+    const tasksStream = await follow('/api/state/tasks/events')
+    const extensionsStream = await follow('/api/state/extensions/events')
     await fetch(`${app.url}/ask`, {
       method: 'POST',
       headers: { 'content-type': 'application/json' },
       body: JSON.stringify({ question: 'create route hello /hello Hello' }),
     })
+    const arrived = (stream: { text: string }, what: RegExp) => what.test(stream.text)
     for (
       let waited = 0;
-      waited < 3000 && !seen(/event: extensions\/changed\ndata: [^\n]*"installed"/);
+      waited < 3000 && !arrived(extensionsStream.seen, /"name":"hello"[^\n]*"state":"active"/);
       waited += 25
     ) {
       await new Promise((done) => setTimeout(done, 25))
     }
-    assert.ok(seen(/event: connected/), 'connected')
     assert.ok(
-      seen(/event: tasks\/changed\ndata: [^\n]*"kind":"agent-run"[^\n]*"status":"running"/),
-      'the run starts as a task',
+      arrived(tasksStream.seen, /event: value\ndata: \[\]/),
+      'the stream starts with the current value',
     )
     assert.ok(
-      seen(/event: tasks\/changed\ndata: [^\n]*"kind":"tool:install_plugin"/),
-      'the install is a task',
+      arrived(tasksStream.seen, /"kind":"agent-run"[^\n]*"status":"running"/) ||
+        arrived(tasksStream.seen, /"kind":"agent-run"/),
+      'the run is a task',
     )
+    assert.ok(arrived(tasksStream.seen, /"kind":"tool:install_plugin"/), 'the install is a task')
     assert.ok(
-      seen(/event: extensions\/changed\ndata: \{"args":\["hello","installed"\]\}/),
+      arrived(extensionsStream.seen, /"name":"hello"[^\n]*"state":"active"/),
       'the extension is reported',
     )
     controller.abort()
-    await pump
+    await Promise.all([tasksStream.pump, extensionsStream.pump])
   } finally {
     await app.stop()
     await rm(project, { recursive: true, force: true })

package/templates/agent/test/model.test.ts

@@ -10,12 +10,12 @@ import { pinnedInstance, withPort } from '../src/plugins/instance/index.ts'
 
 /** A plugin no scripted command knows: the model writes it from scratch. */
 const COUNTER = `import type { Context } from '@deepseek-ai/cordis'
+import { App } from 'acryl-router'
 export const name = 'counter'
-export const inject = ['http']
+export const inject = ['router']
 export function apply(ctx: Context) {
   let count = 0
-  const http = ctx.get('http') as { route(m: string, p: string, h: () => { body: unknown }): () => void }
-  ctx.effect(() => http.route('GET', '/count', () => ({ body: { count: ++count } })))
+  ctx.router.route('/', new App().get('/count', (c) => c.json({ count: ++count })))
 }
 `
 

package/templates/agent/tsconfig.json

@@ -1,19 +1,22 @@
 {
   "compilerOptions": {
-    "target": "ES2023",
-    "lib": ["ES2023"],
+    "target": "ES2024",
+    "lib": ["ES2024", "DOM", "DOM.Iterable"],
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
     "strict": true,
-    "noUncheckedIndexedAccess": true,
-    "exactOptionalPropertyTypes": true,
     "noImplicitOverride": true,
     "verbatimModuleSyntax": true,
     "erasableSyntaxOnly": true,
     "allowImportingTsExtensions": true,
     "noEmit": true,
     "skipLibCheck": true,
-    "types": ["node"]
+    "types": ["node"],
+    "paths": {
+      "acryl-router": ["./src/plugins/acryl-router/src/index.ts"],
+      "acryl-router/middleware": ["./src/plugins/acryl-router/src/middleware/index.ts"],
+      "acryl-router/helpers": ["./src/plugins/acryl-router/src/helpers/index.ts"]
+    }
   },
   "include": ["src", "test", "extensions"]
 }

package/templates/{app → blank}/blend.yaml

@@ -13,11 +13,11 @@ spec:
     # The address the server listens on.
     hostname: { type: string, default: 127.0.0.1 }
   rows:
-    - id: http
-      name: http
+    - id: router
+      name: acryl-router
     - id: routes
       name: routes
     - id: server
-      name: server
+      name: acryl-node-server
       config:
         hostname: "{{parameters.hostname}}"

package/templates/{app → blank}/src/app.ts

@@ -1,7 +1,8 @@
 import { join } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { Context, type Fiber } from '@deepseek-ai/cordis'
-import { http } from './plugins/http/index.ts'
+import * as nodeServer from './plugins/acryl-node-server/src/index.ts'
+import * as router from './plugins/acryl-router/src/index.ts'
 import { type AppInstance, instance } from './plugins/instance/index.ts'
 import {
   blueprintsIn,
@@ -9,11 +10,10 @@ import {
   loadManifest,
   type ParameterValue,
 } from './plugins/manifest/index.ts'
-import { server } from './plugins/server/index.ts'
 import { routes } from './routes.ts'
 
 /** The plugins this app's code provides. `blend.yaml` chooses, orders and configures them. */
-export const registry = { http, routes, server }
+export const registry = { 'acryl-router': router, 'acryl-node-server': nodeServer, routes }
 
 /** The manifest next to this app's source. */
 export const MANIFEST = join(fileURLToPath(new URL('..', import.meta.url)), 'blend.yaml')
@@ -48,12 +48,12 @@ export async function createApp(
   const fibers: Fiber[] = [
     first,
     ...(await compose(root, manifest, registry, {
-      server: { port: chosen.port.start, scan: chosen.port.scan },
+      server: { port: chosen.port.start, scan: chosen.port.scan ? 20 : 0 },
     })),
   ]
   return {
     root,
-    url: root.server.url,
+    url: root.nodeServer.url,
     async stop() {
       for (const fiber of [...fibers].reverse()) await fiber.dispose()
     },

package/templates/blank/src/routes.ts

@@ -0,0 +1,16 @@
+import type { Context } from '@deepseek-ai/cordis'
+import { App } from './plugins/acryl-router/src/index.ts'
+
+export const APP_NAME = '__APP_NAME__'
+
+/** The app's own routes: an `App` mounted on the router. The mount is removed when this plugin is disposed. */
+export const routes = {
+  name: 'routes',
+  inject: ['router'],
+  apply(ctx: Context) {
+    const app = new App()
+      .get('/', (c) => c.json({ app: APP_NAME, ok: true }))
+      .get('/health', (c) => c.json({ ok: true }))
+    ctx.router.route('/', app)
+  },
+}

package/templates/blank/template.json

@@ -0,0 +1 @@
+{ "plugins": ["instance", "acryl-router", "acryl-node-server", "manifest", "save"] }

package/templates/{app → blank}/test/app.test.ts

@@ -50,7 +50,7 @@ test('the manifest decides what is mounted: a parameter changes the server, an u
   const manifest = readManifest()
   assert.deepEqual(
     manifest.plugins.map((row) => row.id),
-    ['http', 'routes', 'server'],
+    ['router', 'routes', 'server'],
   )
   assert.throws(() => readManifest({ nothing: 1 }), /parameter-override-unknown/)
 })

package/templates/{app → blank}/tsconfig.json

@@ -1,12 +1,10 @@
 {
   "compilerOptions": {
-    "target": "ES2023",
-    "lib": ["ES2023"],
+    "target": "ES2024",
+    "lib": ["ES2024", "DOM", "DOM.Iterable"],
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
     "strict": true,
-    "noUncheckedIndexedAccess": true,
-    "exactOptionalPropertyTypes": true,
     "noImplicitOverride": true,
     "verbatimModuleSyntax": true,
     "erasableSyntaxOnly": true,

package/templates/todo/README.md

@@ -0,0 +1,27 @@
+# __APP_NAME__
+
+A todo list built on the ACRYL framework: only the router and shared state. The list is a state cell, the routes are on the router, and the list is
+written to a file in the app's home so it survives a restart. `src/todo.ts` is ACRYL's reference app, copied as it is; the files you own are
+`blend.yaml` (what is mounted), `src/app.ts` (the composition) and the tests.
+
+```sh
+npm install
+npm test
+npm run dev          # prints the URL, for example http://127.0.0.1:3100
+```
+
+```sh
+URL=http://127.0.0.1:3100   # the address `npm run dev` printed
+curl -X POST $URL/todo/api -H 'content-type: application/json' -d '{"title":"write the docs"}'   # {"id":1,"title":"write the docs","done":false}
+curl $URL/todo/api                                                                                  # the list
+curl -X PATCH $URL/todo/api/1 -H 'content-type: application/json' -d '{"done":true}'
+curl -X DELETE $URL/todo/api/1
+curl -N $URL/todo/events                                                                            # the list now, then again on every change
+```
+
+The routes only answer a caller on this machine: a request from another site's page (a foreign `Origin`, or `Origin: null`) or addressed to another host name gets `403`.
+
+Open `$URL/todo` for the page. Stop the app and start it again: the list is still there (`<home>/todo.json`, `.acrylblends/` unless `ACRYLBLENDS_HOME` says otherwise).
+
+- `blend.yaml` is the app as data. `npm run lock` records what it is built from; `npm run save` commits it, refusing secrets and public remotes for a private app.
+- The framework plugins are in `src/plugins/acryl-*/src`. Do not edit them: they are ACRYL's, vendored; the text that explains them is in the ACRYLBLENDS docs.

package/templates/todo/blend.yaml

@@ -0,0 +1,25 @@
+# The app as data, in ACRYL's Blend format (blends.acryl.dev/v1alpha1): which plugins it mounts, in what order, with what config.
+# Edit this, not app.ts, to switch a plugin off (disabled: true) or change its config. `npm run lock` records what the app is built from.
+apiVersion: blends.acryl.dev/v1alpha1
+kind: Blueprint
+metadata:
+  id: acrylblends.__APP_NAME__
+  name: __APP_NAME__
+  version: 0.1.0
+  visibility: private # `npm run save` never pushes a private app to a public remote
+spec:
+  runtime: cordis
+  parameters:
+    # The address the server listens on.
+    hostname: { type: string, default: 127.0.0.1 }
+  rows:
+    - id: router
+      name: acryl-router
+    - id: state
+      name: acryl-state
+    - id: todo
+      name: todo
+    - id: server
+      name: acryl-node-server
+      config:
+        hostname: "{{parameters.hostname}}"

package/templates/todo/gitignore

@@ -0,0 +1,2 @@
+node_modules/
+.acrylblends/

package/templates/todo/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "__APP_NAME__",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "engines": {
+    "node": ">=22.19.0"
+  },
+  "scripts": {
+    "start": "node src/main.ts",
+    "dev": "node --watch src/main.ts",
+    "test": "node --test",
+    "check": "tsc --noEmit",
+    "lock": "node src/plugins/manifest/lock.ts",
+    "save": "node src/plugins/save/cli.ts",
+    "upgrade": "node src/plugins/manifest/upgrade-cli.ts"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@types/node": "^24.0.0",
+    "typescript": "6.0.3"
+  }
+}

package/templates/todo/src/app.ts

@@ -0,0 +1,71 @@
+import { join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { Context, type Fiber } from '@deepseek-ai/cordis'
+import * as nodeServer from './plugins/acryl-node-server/src/index.ts'
+import * as router from './plugins/acryl-router/src/index.ts'
+import * as state from './plugins/acryl-state/src/index.ts'
+import { type AppInstance, instance } from './plugins/instance/index.ts'
+import {
+  blueprintsIn,
+  compose,
+  loadManifest,
+  type ParameterValue,
+} from './plugins/manifest/index.ts'
+import * as todo from './todo.ts'
+
+/** The plugins this app's code provides. `blend.yaml` chooses, orders and configures them. */
+export const registry = {
+  'acryl-router': router,
+  'acryl-state': state,
+  todo,
+  'acryl-node-server': nodeServer,
+}
+
+export const APP_NAME = '__APP_NAME__'
+
+/** The manifest next to this app's source. */
+export const MANIFEST = join(fileURLToPath(new URL('..', import.meta.url)), 'blend.yaml')
+
+/**
+ * The app's manifest, resolved. A Blend finds its Blueprint in `blueprints/<id>.yaml`; an app that is itself a Blueprint never looks.
+ * `createApp` and the tests read it the same way.
+ */
+export function readManifest(values?: Readonly<Record<string, ParameterValue>>) {
+  return loadManifest(MANIFEST, {
+    known: Object.keys(registry),
+    getBlueprint: blueprintsIn(join(fileURLToPath(new URL('..', import.meta.url)), 'blueprints')),
+    ...(values ? { values } : {}),
+  })
+}
+
+export interface App {
+  readonly root: Context
+  readonly url: string
+  stop(): Promise<void>
+}
+
+/** The app: `instance` first (where it lives, chosen at run time), then the manifest's rows in order. */
+export async function createApp(
+  chosen: AppInstance,
+  options: { values?: Readonly<Record<string, ParameterValue>> } = {},
+): Promise<App> {
+  const manifest = readManifest(options.values)
+  const root = new Context()
+  const first = root.plugin(instance, chosen)
+  await first.await()
+  const fibers: Fiber[] = [
+    first,
+    ...(await compose(root, manifest, registry, {
+      // Runtime values the manifest cannot hold: where the list is kept (in the app's home) and where the server listens.
+      todo: { file: join(chosen.home, 'todo.json') },
+      server: { port: chosen.port.start, scan: chosen.port.scan ? 20 : 0 },
+    })),
+  ]
+  return {
+    root,
+    url: root.nodeServer.url,
+    async stop() {
+      for (const fiber of [...fibers].reverse()) await fiber.dispose()
+    },
+  }
+}

package/templates/todo/src/main.ts

@@ -0,0 +1,19 @@
+import { fileURLToPath } from 'node:url'
+import { APP_NAME, createApp } from './app.ts'
+import { selectInstance } from './plugins/instance/index.ts'
+
+// The composition root: the one place that reads the environment (through selectInstance) and chooses where the app lives.
+const chosen = selectInstance({
+  projectRoot: fileURLToPath(new URL('..', import.meta.url)),
+  env: process.env,
+})
+const app = await createApp(chosen)
+console.log(`${APP_NAME} listening on ${app.url} (data in ${chosen.home})`)
+
+const stop = async () => {
+  await app.stop()
+  console.log('stopped')
+  process.exit(0)
+}
+process.once('SIGINT', stop)
+process.once('SIGTERM', stop)

package/templates/todo/src/page.ts

@@ -0,0 +1,28 @@
+/** The page: plain HTML and a few lines of script; it follows the list through the server-sent event stream. */
+export const PAGE = `<!doctype html>
+<meta charset="utf-8"><title>Todo</title>
+<style>body{font:16px system-ui;max-width:32rem;margin:2rem auto}ul{list-style:none;padding:0}li{display:flex;gap:.5rem;padding:.25rem 0}.done span{text-decoration:line-through;opacity:.6}</style>
+<h1>Todo</h1>
+<form id="add"><input id="title" placeholder="What needs doing?" autofocus> <button>Add</button></form>
+<ul id="list"></ul>
+<script>
+const list = document.getElementById('list')
+const send = (url, method, body) => fetch(url, { method, headers: { 'content-type': 'application/json' }, body: body && JSON.stringify(body) })
+document.getElementById('add').onsubmit = async event => {
+  event.preventDefault()
+  const input = document.getElementById('title')
+  await send('/todo/api', 'POST', { title: input.value })
+  input.value = ''
+}
+new EventSource('/todo/events').onmessage = event => {
+  list.replaceChildren(...JSON.parse(event.data).map(todo => {
+    const item = document.createElement('li')
+    item.className = todo.done ? 'done' : ''
+    const box = Object.assign(document.createElement('input'), { type: 'checkbox', checked: todo.done, onchange: () => send('/todo/api/' + todo.id, 'PATCH', { done: box.checked }) })
+    const title = document.createElement('span'); title.textContent = todo.title
+    const remove = Object.assign(document.createElement('button'), { textContent: 'x', onclick: () => send('/todo/api/' + todo.id, 'DELETE') })
+    item.append(box, title, remove)
+    return item
+  }))
+}
+</script>`