@xeplr/cli 0.1.3 → 0.1.5

package/templates/ui/src/pages/EditTask.jsx

@@ -0,0 +1,57 @@
+// THE TASK FORM — and what the task screens do in the browser.
+//
+// The form itself is the "task_edit" screen, designed in Configure UI → Forms. This
+// module holds its HOOKS, used by this page, by the Tasks list and by the
+// popup the list opens.
+import { useEffect, useState } from 'react'
+import { FactoryScreen, FactoryHooks } from '@xeplr/ui-factory'
+import { factory } from '../api/factory.js'
+
+// ── WHAT THE TASK SCREENS DO IN THE BROWSER ──────────────────────────────
+// Every method runs the default (super). Change the ones you need; leave the
+// rest as they are.
+//
+//   before    change the input, then call super
+//   after     call super, then use or change what it returns
+//   override  do not call super
+//
+// ctx.screen says which screen is calling ("task_list" or "task_edit").
+// Keep them as methods (save(values, ctx) { … }) — super does not work in
+// arrow functions. Rules that must hold belong in the server's hooks
+// (api/screens/task/task.hooks.js).
+export class TaskHooks extends FactoryHooks {
+  /** A list's rows (ctx.many), or the record Edit opens (ctx.id). */
+  get(ctx) {
+    return super.get(ctx)
+  }
+
+  /** Every autosave — keep it quick. Returns the saved record. */
+  save(values, ctx) {
+    return super.save(values, ctx)
+  }
+
+  /** A list row, after the person confirmed. */
+  delete(record, ctx) {
+    return super.delete(record, ctx)
+  }
+
+  /** Extra row buttons beside Edit / Delete: [{ label, onClick: (record, ctx) => … }]. ctx.refresh() reloads. */
+  actions(ctx) {
+    return super.actions(ctx)
+  }
+}
+
+export const taskHooks = new TaskHooks()
+
+/** The task form on a page of its own: <EditTask /> for a new task, <EditTask record={task} /> for one. */
+export default function EditTask({ record }) {
+  const [screen, setScreen] = useState(null)
+  const [error, setError] = useState(null)
+
+  useEffect(() => {
+    factory.loadScreen('task_edit').then(setScreen, (e) => setError(e.message))
+  }, [])
+
+  if (error) return <div className="app-error">Could not load the task form — {error}</div>
+  return screen ? <FactoryScreen document={screen} record={record} {...factory.screenProps} hooks={taskHooks} /> : null
+}

package/templates/ui/src/pages/FormDesigner.jsx

@@ -0,0 +1,74 @@
+// DESIGN ONE FORM — its add / edit form, or its list. Move and resize fields,
+// add new ones, change labels, rules, fonts and colours.
+//
+// Edits are kept as a DRAFT automatically; nobody sees them until Publish,
+// which also changes the table to match: a new field adds a column; removing
+// one asks first, because its column and every value in it would be deleted.
+import { useCallback, useEffect, useState } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+import { FactoryBuilder } from '@xeplr/ui-factory'
+import { factory } from '../api/factory.js'
+
+const PARTS = [
+  { part: 'form', suffix: '_edit', label: 'Form' },
+  { part: 'list', suffix: '_list', label: 'List' }
+]
+
+export default function FormDesigner() {
+  const { form, part } = useParams()
+  const navigate = useNavigate()
+  const screenKey = form + (part === 'list' ? '_list' : '_edit')
+  const [current, setCurrent] = useState(null)      // { key, document, lockedNames }
+  const [error, setError] = useState(null)
+
+  useEffect(() => {
+    let cancelled = false
+    setCurrent(null)
+    // The draft if there is one, else the published version — with the field
+    // names that are already columns, which cannot be renamed.
+    factory.loadDraft(screenKey).then(
+      (row) => { if (!cancelled) { setCurrent({ key: screenKey, document: row.document, lockedNames: row.lockedNames || [] }); setError(null) } },
+      (e) => { if (!cancelled) setError(e.message) }
+    )
+    return () => { cancelled = true }
+  }, [screenKey])
+
+  const publish = useCallback(async (doc, options) => {
+    const result = await factory.publish(doc, options)
+    const row = await factory.loadDraft(doc.id)
+    setCurrent((c) => (c && c.key === doc.id ? { ...c, lockedNames: row.lockedNames || [] } : c))
+    return result
+  }, [])
+
+  return (
+    <div className="app-designer">
+      <div className="app-designer-bar">
+        <button type="button" className="app-btn app-btn-quiet" onClick={() => navigate('/configure')}>← Configure UI</button>
+        <span className="app-designer-title">{current ? current.document.name : form}</span>
+        {PARTS.map((p) => (
+          <button
+            key={p.part}
+            type="button"
+            className={'app-btn app-btn-quiet' + ((part === 'list') === (p.part === 'list') ? ' is-active' : '')}
+            onClick={() => navigate('/configure/forms/' + form + '/design/' + p.part)}
+          >
+            {p.label}
+          </button>
+        ))}
+      </div>
+      {error && <div className="app-error">{error}</div>}
+      {current && (
+        <div className="app-designer-canvas">
+          <FactoryBuilder
+            key={current.key}
+            {...factory.builderProps}
+            document={current.document}
+            lockedNames={current.lockedNames}
+            onPublish={publish}
+            screens={PARTS.map((p) => ({ id: form + p.suffix, name: p.label }))}
+          />
+        </div>
+      )}
+    </div>
+  )
+}

package/templates/ui/src/pages/FormRecords.jsx

@@ -0,0 +1,24 @@
+// USE ANY FORM — its published list, with New / Edit opening the form in a
+// popup. Tasks.jsx is the same thing for one form, with a help panel beside it.
+import { useEffect, useState } from 'react'
+import { useParams } from 'react-router-dom'
+import { FactoryScreen } from '@xeplr/ui-factory'
+import { factory } from '../api/factory.js'
+
+export default function FormRecords() {
+  const { form } = useParams()
+  const [screen, setScreen] = useState(null)
+  const [error, setError] = useState(null)
+
+  useEffect(() => {
+    setScreen(null)
+    factory.loadScreen(form + '_list').then((doc) => { setScreen(doc); setError(null) }, (e) => setError(e.message))
+  }, [form])
+
+  return (
+    <div className="app-page">
+      {error && <div className="app-error">Could not open this form — {error}</div>}
+      {screen && <FactoryScreen key={form} document={screen} {...factory.screenProps} />}
+    </div>
+  )
+}

package/templates/ui/src/pages/Forms.jsx

@@ -0,0 +1,185 @@
+// FORMS — every UI in the app (Configure UI → Forms). Make one, design it,
+// publish it, open it, add it to the side rail.
+//
+// A form is two screens: a LIST of its records, and the add / edit FORM the list
+// opens in a popup. Its KEY (farming_department) names the screens and the table
+// (farming_departments) and cannot change once published; its LABEL is what
+// people see, renamed any time in its design.
+//
+// Claude can make forms too — see "Create a new UI" in CLAUDE.md.
+import { useCallback, useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { listMenuItems, addMenuItem, removeMenuItem, useAccess } from '@xeplr/ui-account'
+import { factory } from '../api/factory.js'
+import { FORM_MENU_PREFIX } from '../menu.js'
+
+/** listScreens rows → one entry per form: { key, name, source, list, edit }. */
+function groupForms(rows) {
+  const byKey = new Map()
+  rows.forEach((row) => {
+    const m = /^(.*)_(list|edit)$/.exec(row.screenKey)
+    const key = m ? m[1] : row.screenKey
+    const entry = byKey.get(key) || { key, name: null, source: null, list: null, edit: null }
+    if (m) entry[m[2]] = row
+    else entry.edit = row
+    if (m && m[2] === 'list') entry.name = row.name
+    entry.name = entry.name || row.name
+    entry.source = entry.source || row.source
+    byKey.set(key, entry)
+  })
+  return [...byKey.values()].sort((a, b) => String(a.name).localeCompare(String(b.name)))
+}
+
+function state(screen) {
+  if (!screen) return { label: '—', unpublished: false }
+  if (screen.version === null) return { label: 'Not published yet', unpublished: true }
+  return { label: 'v' + screen.version + (screen.hasDraft ? ' · unpublished changes' : ''), unpublished: screen.hasDraft }
+}
+
+/** "Farming departments" → "farming_department": a suggestion, editable. */
+function suggestKey(label) {
+  const words = String(label).toLowerCase().replace(/[^a-z0-9]+/g, ' ').trim().split(' ').filter(Boolean)
+  if (!words.length) return ''
+  const last = words[words.length - 1]
+  words[words.length - 1] = /ies$/.test(last) ? last.slice(0, -3) + 'y' : /(ss|us)$/.test(last) ? last : last.replace(/s$/, '')
+  const key = words.join('_')
+  return /^[a-z]/.test(key) ? key : 'form_' + key
+}
+
+export default function Forms() {
+  const navigate = useNavigate()
+  const { refreshAccess } = useAccess()
+  const [forms, setForms] = useState(null)
+  const [inMenu, setInMenu] = useState(new Set())
+  const [error, setError] = useState(null)
+  const [notice, setNotice] = useState(null)
+  const [label, setLabel] = useState('')
+  const [key, setKey] = useState('')
+  const [keyEdited, setKeyEdited] = useState(false)
+  const [busy, setBusy] = useState(null)
+
+  const load = useCallback(() => {
+    factory.listScreens().then((rows) => { setForms(groupForms(rows)); setError(null) }, (e) => setError(e.message))
+    listMenuItems().then(
+      (items) => setInMenu(new Set(items.filter((m) => m.name.startsWith(FORM_MENU_PREFIX) && !m.isHidden).map((m) => m.name.slice(FORM_MENU_PREFIX.length)))),
+      () => {}
+    )
+  }, [])
+  useEffect(load, [load])
+
+  const onLabel = (value) => {
+    setLabel(value)
+    if (!keyEdited) setKey(suggestKey(value))
+  }
+
+  const create = async (e) => {
+    e.preventDefault()
+    setBusy('new')
+    try {
+      const made = await factory.createEntity({ key: key.trim(), label: label.trim() })
+      navigate('/configure/forms/' + made.key + '/design/form')
+    } catch (err) {
+      setError(err.message)
+      setBusy(null)
+    }
+  }
+
+  // The form first — publishing it creates or changes the table — then the list.
+  const publish = async (form) => {
+    setBusy(form.key)
+    setNotice(null)
+    try {
+      for (const screen of [form.edit, form.list]) {
+        if (!screen || (screen.version !== null && !screen.hasDraft)) continue
+        const row = await factory.loadDraft(screen.screenKey)
+        await factory.publish(row.document)
+      }
+      setNotice('Published "' + form.name + '"')
+      setError(null)
+      load()
+    } catch (err) {
+      setError(err.confirm
+        ? 'Publishing "' + form.name + '" would remove columns and their data — open Design form and publish there to see what, and confirm.'
+        : err.message)
+    } finally {
+      setBusy(null)
+    }
+  }
+
+  const toggleMenu = async (form) => {
+    setBusy(form.key)
+    try {
+      if (inMenu.has(form.key)) await removeMenuItem(FORM_MENU_PREFIX + form.key)
+      else await addMenuItem({ name: FORM_MENU_PREFIX + form.key, label: form.name })
+      await refreshAccess()
+      setNotice(inMenu.has(form.key) ? 'Removed "' + form.name + '" from the menu' : 'Added "' + form.name + '" to the menu — rename or move it in the Menu tab')
+      load()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setBusy(null)
+    }
+  }
+
+  return (
+    <div className="app-forms">
+      <p className="app-page-lead">
+        Every UI in the app. A new one starts with a Name field — add the rest in its design, then publish to create its table.
+      </p>
+
+      <form className="app-forms-new" onSubmit={create}>
+        <label className="app-forms-field">
+          <span>Label — what people see</span>
+          <input value={label} onChange={(e) => onLabel(e.target.value)} placeholder="Farming departments" />
+        </label>
+        <label className="app-forms-field">
+          <span>Key — names its table; fixed once published</span>
+          <input value={key} onChange={(e) => { setKey(e.target.value); setKeyEdited(true) }} placeholder="farming_department" />
+        </label>
+        <button type="submit" className="app-btn" disabled={!key.trim() || busy === 'new'}>
+          {busy === 'new' ? 'Creating…' : 'New form'}
+        </button>
+      </form>
+
+      {error && <div className="app-error">{error}</div>}
+      {notice && <div className="app-notice">{notice}</div>}
+
+      {forms && forms.length === 0 && <p className="app-sub">No forms yet.</p>}
+      {forms && forms.length > 0 && (
+        <table className="app-table">
+          <thead>
+            <tr><th>Label</th><th>Table</th><th>Form</th><th>List</th><th /></tr>
+          </thead>
+          <tbody>
+            {forms.map((form) => {
+              const edit = state(form.edit)
+              const list = state(form.list)
+              const canOpen = form.list && form.list.version !== null
+              return (
+                <tr key={form.key}>
+                  <td><strong>{form.name || form.key}</strong><div className="app-sub">{form.key}</div></td>
+                  <td><code>{form.source || '—'}</code></td>
+                  <td className={edit.unpublished ? 'app-forms-pending' : undefined}>{edit.label}</td>
+                  <td className={list.unpublished ? 'app-forms-pending' : undefined}>{list.label}</td>
+                  <td className="app-row-actions">
+                    <button className="app-btn app-btn-quiet" disabled={!canOpen} title={canOpen ? '' : 'Publish it first'} onClick={() => navigate('/forms/' + form.key)}>Open</button>
+                    {form.edit && <button className="app-btn app-btn-quiet" onClick={() => navigate('/configure/forms/' + form.key + '/design/form')}>Design form</button>}
+                    {form.list && <button className="app-btn app-btn-quiet" onClick={() => navigate('/configure/forms/' + form.key + '/design/list')}>Design list</button>}
+                    <button className="app-btn app-btn-quiet" disabled={!canOpen || busy === form.key} title={canOpen ? '' : 'Publish it first'} onClick={() => toggleMenu(form)}>
+                      {inMenu.has(form.key) ? 'Remove from menu' : 'Add to menu'}
+                    </button>
+                    {(edit.unpublished || list.unpublished) && (
+                      <button className="app-btn" disabled={busy === form.key} onClick={() => publish(form)}>
+                        {busy === form.key ? 'Publishing…' : 'Publish'}
+                      </button>
+                    )}
+                  </td>
+                </tr>
+              )
+            })}
+          </tbody>
+        </table>
+      )}
+    </div>
+  )
+}

package/templates/ui/src/pages/Home.jsx

@@ -59,8 +59,8 @@ export default function Home() {
           sample logo, in the top bar and the side rail.
         </li>
         <li>
-          <strong>Designer</strong>, in the side rail — change the sample task
-          screens, or see how they are made. Publish changes the table too.
+          <strong>Configure UI</strong>, in the settings menu — every form (make one,
+          design it, publish it, add it to the menu) and the side rail's labels.
         </li>
         <li>
           <code>src/App.jsx</code> — add your own pages, and the side-rail items

package/templates/ui/src/pages/MenuSettings.jsx

@@ -0,0 +1,99 @@
+// THE SIDE RAIL'S ITEMS (Configure UI → Menu) — rename, reorder, hide.
+//
+// Each item has a KEY, which the code matches on and which never changes here,
+// and a LABEL, which is what people read. Leave the label empty to show the key.
+// Saved for everyone at once; your own rail updates straight away.
+import { useCallback, useEffect, useState } from 'react'
+import { listMenuItems, saveMenuItems, useAccess } from '@xeplr/ui-account'
+import { APP_MENU_KEYS, FORM_MENU_PREFIX } from '../menu.js'
+
+// The app's own items (ui/src/menu.js) and forms added to the menu. The rest —
+// sign-in's pages (Login, Register …) and admin screens — only with "Show all".
+const isAppItem = (name) => APP_MENU_KEYS.includes(name) || name.startsWith(FORM_MENU_PREFIX)
+
+export default function MenuSettings() {
+  const { refreshAccess } = useAccess()
+  const [items, setItems] = useState(null)
+  const [error, setError] = useState(null)
+  const [notice, setNotice] = useState(null)
+  const [saving, setSaving] = useState(false)
+  const [showAll, setShowAll] = useState(false)
+
+  const load = useCallback(() => {
+    listMenuItems().then((rows) => { setItems(rows.map((r) => ({ ...r, label: r.label || '' }))); setError(null) }, (e) => setError(e.message))
+  }, [])
+  useEffect(load, [load])
+
+  const shown = (it) => showAll || isAppItem(it.name)
+  const change = (name, patch) => setItems((list) => list.map((it) => (it.name === name ? { ...it, ...patch } : it)))
+  // Swap with the next row ON SCREEN — entries filtered out keep their places.
+  const move = (name, by) => setItems((list) => {
+    const visible = list.filter(shown).map((it) => it.name)
+    const k = visible.indexOf(name) + by
+    if (k < 0 || k >= visible.length) return list
+    const a = list.findIndex((it) => it.name === name)
+    const b = list.findIndex((it) => it.name === visible[k])
+    const next = [...list]
+    ;[next[a], next[b]] = [next[b], next[a]]
+    return next
+  })
+
+  const save = async () => {
+    setSaving(true)
+    setNotice(null)
+    try {
+      // The order on screen becomes the order in the rail.
+      await saveMenuItems(items.map((it, i) => ({ name: it.name, label: it.label, sortOrder: i, isHidden: it.isHidden })))
+      await refreshAccess()
+      setNotice('Saved — the menu shows it now')
+      setError(null)
+      load()
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div className="app-menu-settings">
+      <p className="app-page-lead">
+        What the side rail and the settings menu show, and in what order. Add a form to the menu from the Forms tab.
+      </p>
+      <label className="app-menu-shown">
+        <input type="checkbox" checked={showAll} onChange={(e) => setShowAll(e.target.checked)} /> Show all menu entries, including sign-in and admin pages
+      </label>
+      {error && <div className="app-error">{error}</div>}
+      {notice && <div className="app-notice">{notice}</div>}
+      {items && (
+        <table className="app-table">
+          <thead>
+            <tr><th>Order</th><th>Label</th><th>Key</th><th>Shown</th></tr>
+          </thead>
+          <tbody>
+            {items.filter(shown).map((it, i, visible) => (
+              <tr key={it.name} className={it.isHidden ? 'app-menu-hidden' : undefined}>
+                <td className="app-row-actions">
+                  <button type="button" className="app-btn app-btn-quiet" aria-label={'Move ' + it.shown + ' up'} disabled={i === 0} onClick={() => move(it.name, -1)}>↑</button>
+                  <button type="button" className="app-btn app-btn-quiet" aria-label={'Move ' + it.shown + ' down'} disabled={i === visible.length - 1} onClick={() => move(it.name, 1)}>↓</button>
+                </td>
+                <td>
+                  <input className="app-menu-label" value={it.label} placeholder={it.name} aria-label={'Label for ' + it.name} onChange={(e) => change(it.name, { label: e.target.value })} />
+                </td>
+                <td><code>{it.name}</code></td>
+                <td>
+                  <label className="app-menu-shown">
+                    <input type="checkbox" checked={!it.isHidden} onChange={(e) => change(it.name, { isHidden: !e.target.checked })} /> Shown
+                  </label>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+      {items && (
+        <button type="button" className="app-btn" disabled={saving} onClick={save}>{saving ? 'Saving…' : 'Save menu'}</button>
+      )}
+    </div>
+  )
+}

package/templates/ui/src/pages/Tasks.jsx

@@ -2,12 +2,14 @@
 // where it saves itself as you type; there is no Save button.
 //
 // Nothing about tasks is written in this file. The list and the form are
-// SCREENS, designed in the Designer page and stored by the API; this page only
-// loads the published "task_list" and hands it the calls it needs.
+// SCREENS, designed in Configure UI → Forms and stored by the API; this page only
+// loads the published "task_list" and hands it the calls it needs — and the
+// task hooks (EditTask.jsx), which the popup uses too.
 import { useEffect, useState } from 'react'
 import { FactoryScreen } from '@xeplr/ui-factory'
 import { factory } from '../api/factory.js'
 import TasksHelp from './TasksHelp.jsx'
+import { taskHooks } from './EditTask.jsx'
 
 export default function Tasks() {
   const [screen, setScreen] = useState(null)
@@ -22,7 +24,7 @@ export default function Tasks() {
       <div className="app-page-main">
         {error && <div className="app-error">Could not load the task list — {error}</div>}
         {/* loadScreen lets the list's Edit / New fetch "task_edit" when first opened. */}
-        {screen && <FactoryScreen document={screen} {...factory.screenProps} />}
+        {screen && <FactoryScreen document={screen} {...factory.screenProps} hooks={taskHooks} />}
       </div>
       <TasksHelp />
     </div>

package/templates/ui/src/pages/TasksHelp.jsx

@@ -1,11 +1,41 @@
+import { useState } from 'react'
+
 // The panel beside the sample. It is here so the first thing anybody builds is
 // explained where they are looking, rather than in a document they have to go
 // and find.
+
+// The same prompt as in CLAUDE.md. Replace the form and its fields.
+const PROMPT = 'Create a new UI for farming departments. One record is a farming department with: Name (required), Region (dropdown: North, South, East, West), Area in acres (number, at least 0), Started on (date), Notes (long text). Show Name, Region and Area in the list. Follow "Create a new UI" in CLAUDE.md.'
+
 export default function TasksHelp() {
+  const [copied, setCopied] = useState(false)
+  const copy = () => {
+    navigator.clipboard.writeText(PROMPT).then(() => {
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    }, () => {})
+  }
+
   return (
     <aside className="app-help">
       <div className="app-help-badge">Sample</div>
-      <h2>This page is an example</h2>
+      <h2>Create your own UI with Claude</h2>
+      <p>
+        Open Claude in this project's folder (the one with <code>api</code> and{' '}
+        <code>ui</code>) and give it this — change the name and the fields:
+      </p>
+      <pre className="app-help-prompt">{PROMPT}</pre>
+      <button type="button" className="app-btn app-btn-quiet" onClick={copy}>
+        {copied ? 'Copied' : 'Copy prompt'}
+      </button>
+      <p>
+        Add behaviour in the same message if you want it — "a Mark active button
+        on each row", "Region is required when Area is over 100". When Claude is
+        done, restart the sign-in service and the API: the menu item appears and
+        the table is created.
+      </p>
+
+      <h3>This page is an example</h3>
       <p>
         A task has a title, a status, a due date and a description. Neither the
         list nor the form is written by hand — both are <strong>screens</strong>,
@@ -15,44 +45,28 @@ export default function TasksHelp() {
 
       <h3>Change it</h3>
       <p>
-        Open <strong>Designer</strong> in the side rail. Add a field, move one,
-        change a label or a colour — then <strong>Publish</strong>. The table
-        gains its new column as you publish.
+        Open <strong>Configure UI</strong> in the settings menu (top right) and{' '}
+        <strong>Design form</strong> on Tasks. Add a field, move one, change a
+        label or a colour — then <strong>Publish</strong>. The table gains its
+        new column as you publish.
       </p>
 
-      <h3>Add your own</h3>
-      <ol className="app-help-steps">
-        <li>
-          <strong>Describe it</strong>
-          <code>api/screens/project/project.entity.json</code>
-          <span>Its name and fields — copy <code>task/task.entity.json</code>.</span>
-        </li>
-        <li>
-          <strong>Make its screens</strong>
-          <code>npx xeplr-factory screens screens/project/project.entity.json -o screens/project</code>
-          <span>From the api folder. Then list them in <code>api/screens/index.js</code>.</span>
-        </li>
-        <li>
-          <strong>The page</strong>
-          <code>ui/src/pages/Projects.jsx</code>
-          <span>Copy <code>Tasks.jsx</code> and load <code>project_list</code>.</span>
-        </li>
-        <li>
-          <strong>The menu entry</strong>
-          <code>api/migrations-auth/000N_projects_menu.sql</code>
-          <span>
-            The side-rail item appears only if its name exists in the database,
-            spelled exactly the same.
-          </span>
-        </li>
-      </ol>
-      <p>Restart the API and the new table is created for you.</p>
+      <h3>Or by hand</h3>
+      <p>
+        <strong>Configure UI → Forms → New form</strong>: label and key, design,
+        publish, add to menu — no code. The full steps for a form with its own page, hooks and
+        model are in <code>CLAUDE.md</code>, under "Create a new UI".
+      </p>
 
       <h3>More than saving</h3>
       <p>
-        A value worked out on save, an email afterwards, a list only managers
-        see: <code>api/screens/task/task.hooks.js</code> — before, after, error
-        and override, for save, get and delete.
+        In the browser — a value added before saving, rows filtered for display,
+        an extra button on each row: <code>ui/src/pages/EditTask.jsx</code>.
+        Every method calls <code>super</code>; change the one you need.
+      </p>
+      <p>
+        On the server — a check against other records, an email afterwards, a
+        list only managers see: <code>api/screens/task/task.hooks.js</code>.
       </p>
 
       <h3>Two things that catch people</h3>
@@ -60,7 +74,7 @@ export default function TasksHelp() {
         <li>
           Once a screen is published, the <em>database</em> holds its design.
           Editing its <code>.screen.json</code> afterwards changes nothing — use
-          the Designer.
+          Forms.
         </li>
         <li>
           A new menu entry is remembered for ten minutes. Restart the sign-in

package/templates-tenancy/api/migrations-auth/0004_switch_menu.sql

@@ -1,7 +1,8 @@
 -- "__MT_SWITCH_NAME__" — the drawer item that goes back to the picker.
 --
 -- Public: everybody who signs in works inside one, so everybody can change it.
--- The name must match ui/src/App.jsx's drawerItems entry EXACTLY.
+-- The name is the KEY: it must match ui/src/App.jsx's drawerItems `key` EXACTLY.
+-- What people read is the label, changed in Configure UI → Menu.
 
 INSERT INTO "menus" (id, name, "menuGroup", "isPublic", "isActive", "mtId1", "recordCreatedDate", "recordModifiedDate")
 SELECT encode(gen_random_bytes(12), 'hex'), '__MT_SWITCH_NAME__', '', true, true, '*', now(), now()

package/templates-tenancy/api/routes/tenants.js

@@ -18,6 +18,7 @@ var { respond } = require('@xeplr/utils/lib/response');
 var { HTTP, STATUS } = require('@xeplr/utils/isomorphic');
 var authLib = require('@xeplr/auth');
 var tenancy = require('../tenancy');
+var { isSuperAdmin } = require('./access');
 var appDatabase = require('../db/setup');
 
 // The sign-in database, read directly — this app does not run the sign-in
@@ -29,11 +30,6 @@ var auth = authLib.attach();
 var CREATOR_ROLE = { 1: 'CompanyAdmin' };
 var DEEPER_ROLE = 'Creator';
 
-function isSuperAdmin(req) {
-  var roles = (req.access && req.access.roles) || (req.user && req.user.roles) || [];
-  return roles.indexOf('Super Admin') !== -1;
-}
-
 var membership = null;
 
 /**

package/templates/api/migrations-auth/0003_designer_menu.sql

@@ -1,19 +0,0 @@
--- "Designer" — the drawer item for designing screens (ui/src/pages/Designer.jsx).
---
--- NOT public: Publish changes database tables, so only the roles that hold
--- @xeplr/factory's design permission see the item. The API refuses everyone
--- else anyway ("Access denied: Publish factory screen"); this keeps the menu
--- honest about it.
---
--- The name must match ui/src/App.jsx's drawerItems entry EXACTLY.
-
-INSERT INTO "menus" (id, name, "menuGroup", "isPublic", "isActive", "mtId1", "recordCreatedDate", "recordModifiedDate")
-SELECT encode(gen_random_bytes(12), 'hex'), 'Designer', '', false, true, '*', now(), now()
-WHERE NOT EXISTS (SELECT 1 FROM "menus" WHERE name = 'Designer');
-
-INSERT INTO "menuRolesMapping" (id, "roleId", "menuId", "isActive", "mtId1", "recordCreatedDate", "recordModifiedDate")
-SELECT encode(gen_random_bytes(12), 'hex'), r.id, m.id, true, '*', now(), now()
-FROM "roles" r CROSS JOIN "menus" m
-WHERE r.name IN ('Super Admin', 'CompanyAdmin')
-  AND m.name = 'Designer'
-  AND NOT EXISTS (SELECT 1 FROM "menuRolesMapping" x WHERE x."roleId" = r.id AND x."menuId" = m.id);