acrylblends 1.3.1 → 1.4.0

package/templates/agent/src/routes.ts

@@ -3,6 +3,7 @@ import { Acryl } 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 Home, renderWidgets } from '../plugins/home/index.ts'
 import type {} from '../plugins/tasks/index.ts'
 
 export const APP_NAME = '__APP_NAME__'
@@ -59,20 +60,24 @@ const appearanceScript = (prefix: string) => `<script src="${prefix}/appearance.
 const settingsPage = (prefix: string) =>
   `<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Settings - ${APP_NAME}</title>${APPEARANCE_STYLE}${appearanceScript(prefix)}</head><body><h1>Settings</h1><p><label for="theme">Appearance</label> <select id="theme" name="theme"><option value="system">Match the system</option><option value="light">Light</option><option value="dark">Dark</option></select></p><p id="saved" role="status"></p><p><a href="${prefix}/">Back to ${APP_NAME}</a></p><script>(function(){var select=document.getElementById('theme'),saved=document.getElementById('saved');try{select.value=localStorage.getItem('theme')||'system'}catch(e){}select.addEventListener('change',function(){var value=select.value;try{if(value==='system'){localStorage.removeItem('theme');delete document.documentElement.dataset.theme}else{localStorage.setItem('theme',value);document.documentElement.dataset.theme=value}saved.textContent='Saved: '+select.options[select.selectedIndex].text}catch(e){saved.textContent='This browser would not keep the setting.'}})})()</script></body></html>`
 
+const widgetsOf = (home: Home | undefined): Promise<string> =>
+  home === undefined ? Promise.resolve('') : renderWidgets(home)
+
 /**
  * The app's own pages and routes, mountable at any prefix: the standalone server mounts it at the root, the frame row at {@link FRAME_MOUNT_PREFIX}.
- * Every absolute URL a page writes is derived from the prefix it is mounted at.
+ * Every absolute URL a page writes is derived from the prefix it is mounted at. The home page shows the widgets of the app's plugins (`ctx.home`), read
+ * at each request through `home()`, so a plugin pulled, switched off or removed shows at the next load; without a home service the page has none.
  */
-export function makeApp(prefix = ''): Acryl {
+export function makeApp(prefix = '', home: () => Home | undefined = () => undefined): Acryl {
   const limit = bodyLimit({ maxSize: 64 * 1024 })
   return (
     new Acryl()
       .use(limit)
       // A browser gets a page (the door's and the agent panel's script tags are added where they are mounted); everything else gets the JSON.
-      .get('/', (c) =>
+      .get('/', async (c) =>
         (c.req.header('accept') ?? '').includes('text/html')
           ? c.html(
-              `<!doctype html><html lang="en"><head><meta charset="utf-8"><title>${APP_NAME}</title>${APPEARANCE_STYLE}${appearanceScript(prefix)}</head><body><h1>${APP_NAME}</h1><p>This app runs an agent unless it is switched off (production switches it off, see ACRYL_PRODUCTION_KEEP in AGENTS.md). In ACRYL, ask it for a change in the chat beside the app (or with <code>POST /ask</code>); published with the assistant on, it helps visitors use the app without changing it.</p>${DOOR_TAG}</body></html>`,
+              `<!doctype html><html lang="en"><head><meta charset="utf-8"><title>${APP_NAME}</title>${APPEARANCE_STYLE}${appearanceScript(prefix)}</head><body><h1>${APP_NAME}</h1><p>This app runs an agent unless it is switched off (production switches it off, see ACRYL_PRODUCTION_KEEP in AGENTS.md). In ACRYL, ask it for a change in the chat beside the app (or with <code>POST /ask</code>); published with the assistant on, it helps visitors use the app without changing it.</p>${await widgetsOf(home())}${DOOR_TAG}</body></html>`,
             )
           : c.json({ app: APP_NAME, ok: true }),
       )
@@ -102,7 +107,20 @@ export const routes = {
     }
     const limit = bodyLimit({ maxSize: 64 * 1024 })
     // The app's own page and routes at the one prefix; the agent routes below mount at the same prefix.
-    ctx.router.route(prefix === '' ? '/' : prefix, makeApp(prefix))
+    // The home page's widgets while a `home` row runs: an app made before the agent template mounted `home` (its blend.yaml has no such row) keeps its pages.
+    let home: Home | undefined
+    ctx.inject(['home'], (inner) => {
+      inner.effect(() => {
+        home = inner.home
+        return () => {
+          home = undefined
+        }
+      }, 'routes: the home page widgets')
+    })
+    ctx.router.route(
+      prefix === '' ? '/' : prefix,
+      makeApp(prefix, () => home),
+    )
     // The routes that give a visitor the agent: mounted only while the agent, the extensions and the tasks run (see the header).
     // `agentRoutes: false` (the production Assistant) keeps them unmounted although the agent runs.
     if (options.agentRoutes === false) return

package/templates/agent/template.json

@@ -2,6 +2,7 @@
   "plugins": [
     "instance",
     "acryl-router",
+    "home",
     "acryl-state",
     "acryl-node-server",
     "acryl-page",

package/templates/agent/test/app.test.ts

@@ -44,6 +44,32 @@ test('answers health checks and 404 for unknown paths', () =>
     await missing.body?.cancel()
   }))
 
+test('a plugin puts its widget on the home page, and the widget leaves with the plugin', () =>
+  withApp(async (app) => {
+    const page = async () =>
+      (await app.root.router.request('/', { headers: { accept: 'text/html' } })).text()
+    const feature = app.root.plugin({
+      name: 'hello-widget',
+      inject: ['home'],
+      apply(ctx: typeof app.root) {
+        ctx.effect(() =>
+          ctx.home.widget({
+            id: 'hello-widget',
+            title: 'Hello',
+            render: () => '<p id="hello">hi</p>',
+          }),
+        )
+      },
+    })
+    await feature.await()
+    assert.match(
+      await page(),
+      /<section class="widget" data-widget="hello-widget">[\s\S]*<p id="hello">hi<\/p>/,
+    )
+    await feature.dispose()
+    assert.doesNotMatch(await page(), /data-widget="hello-widget"/)
+  }))
+
 /** A sandbox may forbid listening on a port (Codex's workspace-write does); the one test that starts the real server is skipped there, and says so. */
 /**
  * Whether this environment forbids listening at all: only a sandbox's refusal (EPERM/EACCES) means the real-server test must skip. A loaded