amorphous-cli 0.3.4 → 0.3.6

package/lib/agent-contract.test.mjs

@@ -3,6 +3,7 @@ import { existsSync, mkdtempSync, readFileSync, writeFileSync } from 'node:fs'
 import { tmpdir } from 'node:os'
 import { join } from 'node:path'
 import test from 'node:test'
+import { Script } from 'node:vm'
 import {
   CONTRACT_VERSION,
   installUserSkill,
@@ -12,6 +13,22 @@ import {
 } from './agent-contract.mjs'
 import { CLI_VERSION } from './version.mjs'
 
+test('starter app scripts parse as browser classic scripts', () => {
+  for (const template of ['blank', 'list', 'board', 'landing']) {
+    const dir = mkdtempSync(join(tmpdir(), `amorphous-${template}-script-`))
+    writeStarter(dir, template)
+    const source = readFileSync(join(dir, 'app.js'), 'utf8')
+    assert.doesNotThrow(() => new Script(source), `${template} app.js must parse in a browser classic script`)
+  }
+})
+
+test('board starter explains horizontal scrolling on mobile', () => {
+  const dir = mkdtempSync(join(tmpdir(), 'amorphous-board-scroll-hint-'))
+  writeStarter(dir, 'board')
+  const html = readFileSync(join(dir, 'index.html'), 'utf8')
+  assert.match(html, /Scroll sideways to see all columns\./)
+})
+
 test('setup copies the skill, and an edited contract is left alone', () => {
   const home = mkdtempSync(join(tmpdir(), 'amorphous-skill-'))
   const dirs = installUserSkill(home)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amorphous-cli",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "mcpName": "io.github.amorphous-one/amorphous",
   "description": "Make whatever you want, yourself, with your own agent, or with others.",
   "type": "module",

package/templates.json

@@ -11,13 +11,13 @@
     "description": "A shared checklist everyone can update",
     "html": "<main class=\"shell\">\n  <header><p class=\"eyebrow\">SHARED LIST</p><h1>Things to do</h1><p class=\"muted\">Add an item or check one off. Everyone sees the same list.</p></header>\n  <form id=\"add-form\"><input id=\"new-item\" aria-label=\"New item\" placeholder=\"Add something…\" maxlength=\"180\" required><button>Add</button></form>\n  <p id=\"empty\" class=\"muted\">Your list is empty.</p><ul id=\"items\"></ul>\n</main>",
     "css": "* { box-sizing: border-box; } body { margin: 0; background: #f5f4f0; color: #20201e; font: 16px/1.5 system-ui, sans-serif; } .shell { max-width: 680px; margin: 8vh auto; padding: 32px; background: #fff; border: 1px solid #e8e6e0; border-radius: 18px; } .eyebrow { color: #77746c; font-size: 11px; font-weight: 700; letter-spacing: .14em; } h1 { margin: 4px 0; font-size: clamp(32px, 8vw, 52px); letter-spacing: -.055em; } .muted { color: #77746c; } form { display: flex; gap: 8px; margin: 28px 0 18px; } input { min-width: 0; flex: 1; padding: 12px 14px; border: 1px solid #d8d5cd; border-radius: 9px; font: inherit; } button { padding: 10px 18px; border: 0; border-radius: 9px; background: #242421; color: white; font: inherit; cursor: pointer; } ul { display: grid; gap: 8px; padding: 0; list-style: none; } li { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #eeece7; border-radius: 9px; } li.done span { color: #929087; text-decoration: line-through; } li span { flex: 1; overflow-wrap: anywhere; } li button { padding: 5px 8px; color: #66635d; background: transparent; }",
-    "js": "const form = document.querySelector('#add-form')\nconst input = document.querySelector('#new-item')\nconst list = document.querySelector('#items')\nconst empty = document.querySelector('#empty')\n\nfunction render(rows) {\n  list.replaceChildren()\n  empty.hidden = rows.length > 0\n  for (const row of rows.filter(item => item.kind === 'list-item')) {\n    const li = document.createElement('li')\n    if (row.done) li.classList.add('done')\n    const check = document.createElement('input')\n    check.type = 'checkbox'\n    check.checked = Boolean(row.done)\n    check.setAttribute('aria-label', `Mark ${row.text} complete`)\n    check.addEventListener('change', async () => {\n      await amorphous.data.replace(row.id, { ...row, done: check.checked })\n      render(await amorphous.data.find())\n    })\n    const text = document.createElement('span')\n    text.textContent = row.text\n    const remove = document.createElement('button')\n    remove.type = 'button'\n    remove.textContent = 'Remove'\n    remove.addEventListener('click', async () => {\n      // The bridge intentionally has no delete method; mark removed items instead.\n      await amorphous.data.replace(row.id, { ...row, removed: true })\n      render(await amorphous.data.find())\n    })\n    if (row.removed) continue\n    li.append(check, text, remove)\n    list.append(li)\n  }\n}\n\nform.addEventListener('submit', async event => {\n  event.preventDefault()\n  const text = input.value.trim()\n  if (!text) return\n  await amorphous.data.insert({ kind: 'list-item', text, done: false })\n  input.value = ''\n  render(await amorphous.data.find())\n})\n\nrender(await amorphous.data.find())"
+    "js": "const form = document.querySelector('#add-form')\nconst input = document.querySelector('#new-item')\nconst list = document.querySelector('#items')\nconst empty = document.querySelector('#empty')\n\nfunction render(rows) {\n  list.replaceChildren()\n  empty.hidden = rows.length > 0\n  for (const row of rows.filter(item => item.kind === 'list-item')) {\n    const li = document.createElement('li')\n    if (row.done) li.classList.add('done')\n    const check = document.createElement('input')\n    check.type = 'checkbox'\n    check.checked = Boolean(row.done)\n    check.setAttribute('aria-label', `Mark ${row.text} complete`)\n    check.addEventListener('change', async () => {\n      await amorphous.data.replace(row.id, { ...row, done: check.checked })\n      render(await amorphous.data.find())\n    })\n    const text = document.createElement('span')\n    text.textContent = row.text\n    const remove = document.createElement('button')\n    remove.type = 'button'\n    remove.textContent = 'Remove'\n    remove.addEventListener('click', async () => {\n      // The bridge intentionally has no delete method; mark removed items instead.\n      await amorphous.data.replace(row.id, { ...row, removed: true })\n      render(await amorphous.data.find())\n    })\n    if (row.removed) continue\n    li.append(check, text, remove)\n    list.append(li)\n  }\n}\n\nform.addEventListener('submit', async event => {\n  event.preventDefault()\n  const text = input.value.trim()\n  if (!text) return\n  await amorphous.data.insert({ kind: 'list-item', text, done: false })\n  input.value = ''\n  render(await amorphous.data.find())\n})\n\namorphous.data.find().then(render)"
   },
   "board": {
     "label": "Board",
     "description": "A small kanban board with shared cards",
-    "html": "<main class=\"shell\">\n  <header><p class=\"eyebrow\">TEAM BOARD</p><h1>Project board</h1><p class=\"muted\">Move cards across the columns as work progresses.</p></header>\n  <form id=\"add-form\"><input id=\"new-card\" aria-label=\"New card\" placeholder=\"Add a card…\" maxlength=\"180\" required><button>Add card</button></form>\n  <section id=\"columns\" class=\"columns\"></section>\n</main>",
-    "css": "* { box-sizing: border-box; } body { margin: 0; background: #f4f5f7; color: #20242b; font: 15px/1.5 system-ui, sans-serif; } .shell { max-width: 1120px; margin: 7vh auto; padding: 28px; } .eyebrow { color: #727985; font-size: 11px; font-weight: 700; letter-spacing: .14em; } h1 { margin: 4px 0; font-size: clamp(32px, 7vw, 48px); letter-spacing: -.05em; } .muted { color: #727985; } form { display: flex; gap: 8px; max-width: 580px; margin: 24px 0; } input { min-width: 0; flex: 1; padding: 11px 13px; border: 1px solid #d7dbe2; border-radius: 8px; font: inherit; } button { padding: 9px 14px; border: 0; border-radius: 8px; background: #29313d; color: #fff; font: inherit; cursor: pointer; } .columns { display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 14px; align-items: start; overflow-x: auto; } .column { min-height: 190px; padding: 12px; border: 1px solid #e0e3e9; border-radius: 12px; background: #e9ecf1; } .column h2 { margin: 0 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; } .card { display: flex; align-items: center; gap: 8px; margin: 8px 0; padding: 11px; border: 1px solid #e2e4e9; border-radius: 9px; background: white; } .card span { flex: 1; overflow-wrap: anywhere; } .card select { max-width: 105px; padding: 5px; border: 1px solid #d7dbe2; border-radius: 6px; background: white; font: inherit; font-size: 12px; } @media (max-width: 760px) { .columns { grid-template-columns: repeat(3, minmax(250px, 1fr)); } }",
+    "html": "<main class=\"shell\">\n  <header><p class=\"eyebrow\">TEAM BOARD</p><h1>Project board</h1><p class=\"muted\">Move cards across the columns as work progresses.</p></header>\n  <p id=\"columns-scroll-hint\" class=\"muted scroll-hint\">Scroll sideways to see all columns.</p>\n  <form id=\"add-form\"><input id=\"new-card\" aria-label=\"New card\" placeholder=\"Add a card…\" maxlength=\"180\" required><button>Add card</button></form>\n  <section id=\"columns\" class=\"columns\" aria-describedby=\"columns-scroll-hint\"></section>\n</main>",
+    "css": "* { box-sizing: border-box; } body { margin: 0; background: #f4f5f7; color: #20242b; font: 15px/1.5 system-ui, sans-serif; } .shell { max-width: 1120px; margin: 7vh auto; padding: 28px; } .eyebrow { color: #727985; font-size: 11px; font-weight: 700; letter-spacing: .14em; } h1 { margin: 4px 0; font-size: clamp(32px, 7vw, 48px); letter-spacing: -.05em; } .muted { color: #727985; } .scroll-hint { display: none; } form { display: flex; gap: 8px; max-width: 580px; margin: 24px 0; } input { min-width: 0; flex: 1; padding: 11px 13px; border: 1px solid #d7dbe2; border-radius: 8px; font: inherit; } button { padding: 9px 14px; border: 0; border-radius: 8px; background: #29313d; color: #fff; font: inherit; cursor: pointer; } .columns { display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 14px; align-items: start; overflow-x: auto; } .column { min-height: 190px; padding: 12px; border: 1px solid #e0e3e9; border-radius: 12px; background: #e9ecf1; } .column h2 { margin: 0 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; } .card { display: flex; align-items: center; gap: 8px; margin: 8px 0; padding: 11px; border: 1px solid #e2e4e9; border-radius: 9px; background: white; } .card span { flex: 1; overflow-wrap: anywhere; } .card select { max-width: 105px; padding: 5px; border: 1px solid #d7dbe2; border-radius: 6px; background: white; font: inherit; font-size: 12px; } @media (max-width: 760px) { .scroll-hint { display: block; margin: -8px 0 14px; } .columns { grid-template-columns: repeat(3, minmax(250px, 1fr)); } }",
     "js": "const stages = ['To do', 'In progress', 'Done']\nconst form = document.querySelector('#add-form')\nconst input = document.querySelector('#new-card')\nconst columns = document.querySelector('#columns')\n\nasync function render() {\n  const rows = (await amorphous.data.find()).filter(row => row.kind === 'board-card')\n  columns.replaceChildren()\n  for (const stage of stages) {\n    const column = document.createElement('section')\n    column.className = 'column'\n    const heading = document.createElement('h2')\n    heading.textContent = `${stage} · ${rows.filter(row => (row.stage || stages[0]) === stage).length}`\n    column.append(heading)\n    for (const row of rows.filter(item => (item.stage || stages[0]) === stage)) {\n      const card = document.createElement('article')\n      card.className = 'card'\n      const text = document.createElement('span')\n      text.textContent = row.text\n      const select = document.createElement('select')\n      select.setAttribute('aria-label', `Move ${row.text}`)\n      for (const optionText of stages) {\n        const option = document.createElement('option')\n        option.value = optionText\n        option.textContent = optionText\n        option.selected = optionText === (row.stage || stages[0])\n        select.append(option)\n      }\n      select.addEventListener('change', async () => {\n        await amorphous.data.replace(row.id, { ...row, stage: select.value })\n        await render()\n      })\n      card.append(text, select)\n      column.append(card)\n    }\n    columns.append(column)\n  }\n}\n\nform.addEventListener('submit', async event => {\n  event.preventDefault()\n  const text = input.value.trim()\n  if (!text) return\n  await amorphous.data.insert({ kind: 'board-card', text, stage: stages[0] })\n  input.value = ''\n  await render()\n})\n\nrender()"
   },
   "landing": {