create-hyper-effect 0.0.0-stage → 0.1.0

package/template/scripts/check.mjs

@@ -0,0 +1,76 @@
+import { chromium } from 'playwright'
+
+/* Browser check: two people on the task list, in Chromium, against a running
+   server (npm start). Extend it with every feature you add; unit tests do
+   not see what only a browser does (morphs, focus, typing while the page
+   updates).
+
+   Usage: node scripts/check.mjs   (URL=… for another server) */
+
+const base = process.env.URL ?? 'http://localhost:4000'
+const results = []
+const check = (name, ok, detail = '') => {
+  results.push({ name, ok })
+  console.log(`${ok ? 'PASS' : 'FAIL'} ${name}${detail ? ` (${detail})` : ''}`)
+}
+const until = (page, predicate, arg) =>
+  page.waitForFunction(predicate, arg, { timeout: 5000 }).then(() => true, () => false)
+
+const browser = await chromium.launch()
+const signIn = async name => {
+  const page = await (await browser.newContext()).newPage()
+  const errors = []
+  page.on('pageerror', error => errors.push(String(error)))
+  page.on('console', message => {
+    if (message.type() === 'error') errors.push(message.text())
+  })
+  await page.goto(`${base}/`)
+  await page.getByLabel('Your name').fill(name)
+  const stream = page.waitForRequest(request => request.url().includes('/stream'))
+  await page.getByRole('button', { name: 'Sign in' }).click()
+  await stream
+  return { page, errors }
+}
+
+try {
+  const ada = await signIn('Ada')
+  const bob = await signIn('Bob')
+  check('signing in shows the task list', (await ada.page.locator('#task-list li').count()) >= 1)
+
+  // Type and press Enter at once: the typed text travels with the submit.
+  const title = `Check task ${Date.now() % 10000}`
+  await ada.page.getByLabel('New task').pressSequentially(title, { delay: 5 })
+  await ada.page.getByLabel('New task').press('Enter')
+  check('a task typed and submitted at once is added', await until(ada.page, text => document.querySelector('#task-list')?.textContent?.includes(text), title))
+  check('the form is cleared after adding', await until(ada.page, () => document.querySelector('#task-title')?.value === ''))
+  check("the other person's page shows it live", await until(bob.page, text => document.querySelector('#task-list')?.textContent?.includes(text), title))
+
+  // A page-wide shortcut: N focuses the new-task input (a key binding, then
+  // a forwarded focus).
+  await ada.page.locator('body').click({ position: { x: 5, y: 300 } })
+  await ada.page.keyboard.press('n')
+  check('N focuses the new-task input', await until(ada.page, () => document.activeElement?.id === 'task-title'))
+  await ada.page.keyboard.type('x')
+  check('typing there does not trigger the shortcut again', (await ada.page.getByLabel('New task').inputValue()) === 'x')
+  await ada.page.getByLabel('New task').fill('')
+
+  await ada.page.getByRole('button', { name: 'Add', exact: true }).click()
+  check('an empty title is refused with a message', await until(ada.page, () => document.querySelector('#new-task')?.textContent?.includes('Describe the task.')))
+
+  await bob.page.getByRole('button', { name: `Done: ${title}` }).click()
+  check('marking it done shows on both pages', await until(ada.page, text => document.querySelector(`[aria-label="Done: ${text}"]`)?.getAttribute('aria-pressed') === 'true', title))
+
+  await ada.page.getByRole('button', { name: 'Done', exact: true }).click()
+  check('the Done filter shows done tasks only', await until(ada.page, () => [...document.querySelectorAll('#task-list li')].every(li => li.textContent.includes('✓'))))
+  await ada.page.getByRole('button', { name: 'All', exact: true }).click()
+
+  await ada.page.getByRole('button', { name: `Remove ${title}` }).click()
+  check('removing it removes it everywhere', await until(bob.page, text => !document.querySelector('#task-list')?.textContent?.includes(text), title))
+  check('no page errors', ada.errors.length + bob.errors.length === 0, [...ada.errors, ...bob.errors].slice(0, 2).join(' | '))
+} finally {
+  await browser.close()
+}
+
+const failed = results.filter(result => !result.ok).length
+console.log(`\n${results.length - failed}/${results.length} checks passed`)
+process.exit(failed === 0 ? 0 : 1)

package/template/src/app/auth.ts

@@ -0,0 +1,132 @@
+import { createHmac, timingSafeEqual } from 'node:crypto'
+
+import { Effect, Layer } from 'effect'
+import { HttpRouter, HttpServerRequest, HttpServerResponse } from 'effect/http'
+
+import { PageRedirect, type PageRequest, type RequestContext, secretFromEnvironment } from '@hyper-effect/core'
+
+/* Demo sign-in: any name, no password. The name travels in an HMAC-signed,
+   HttpOnly cookie:
+   - Flags read it (`requireUser`), so a signed-out visit goes to /login;
+   - `principal` binds every session to it, so signing out ends the page.
+   A real app verifies its own session or token here instead; keep the same
+   three exports. */
+
+const USER_COOKIE = '{{name}}-user'
+const SECRET = secretFromEnvironment('APP_SECRET', 'dev-secret, set APP_SECRET')
+const MAX_AGE = 60 * 60 * 12
+
+const signature = (name: string) => createHmac('sha256', SECRET).update(name).digest()
+
+/** The cookie value for a signed-in user (exported for tests). */
+export const cookieValue = (name: string) =>
+  `${Buffer.from(name, 'utf8').toString('base64url')}.${signature(name).toString('base64url')}`
+
+/** The signed-in user's name, if the cookie is valid. */
+export const signedInUser = (cookies: RequestContext['cookies']): string | undefined => {
+  const [encodedName, encodedSignature] = (cookies[USER_COOKIE] ?? '').split('.')
+  if (encodedName === undefined || encodedSignature === undefined) return undefined
+  const name = Buffer.from(encodedName, 'base64url').toString('utf8')
+  const expected = signature(name)
+  const actual = Buffer.from(encodedSignature, 'base64url')
+  return actual.length === expected.length && timingSafeEqual(actual, expected) ? name : undefined
+}
+
+/** For `Hyper.layer`: sessions belong to the signed-in user. */
+export const principal = ({ cookies }: RequestContext) => Effect.succeed(signedInUser(cookies))
+
+/** For Flags: the signed-in user, or a redirect to /login and back. */
+export const requireUser = ({ cookies, url }: PageRequest) => {
+  const user = signedInUser(cookies)
+  return user === undefined
+    ? Effect.fail(new PageRedirect({ location: `/login?next=${encodeURIComponent(url.pathname + url.search)}` }))
+    : Effect.succeed(user)
+}
+
+export const USER_COOKIE_NAME = USER_COOKIE
+
+const safeNext = (next: string | null): string =>
+  next !== null && next.startsWith('/') && !next.startsWith('//') && !next.startsWith('/\\') ? next : '/'
+
+const escapeHtml = (value: string) =>
+  value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
+
+const loginPage = (next: string, error: string | undefined) => `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Sign in · {{title}}</title>
+<link rel="stylesheet" href="/styles.css">
+</head>
+<body class="flex min-h-screen items-center justify-center bg-muted/40 p-4">
+<form method="post" action="/login" class="flex w-full max-w-sm flex-col gap-4 rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
+<h1 class="text-lg font-semibold">{{title}}</h1>
+<input type="hidden" name="next" value="${escapeHtml(next)}">
+<label for="name" class="text-sm font-medium">Your name</label>
+<input id="name" name="name" required maxlength="32" autocomplete="username" autofocus class="h-9 rounded-md border bg-transparent px-3 text-sm shadow-xs outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50">
+${error === undefined ? '' : `<p class="text-sm text-destructive">${escapeHtml(error)}</p>`}
+<button type="submit" class="h-9 rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:bg-primary/90">Sign in</button>
+</form>
+</body>
+</html>`
+
+const html = (body: string, status = 200) =>
+  HttpServerResponse.text(body, {
+    status,
+    contentType: 'text/html',
+    headers: { 'content-security-policy': "default-src 'self'; frame-ancestors 'none'; form-action 'self'" },
+  })
+
+/** Sign-in and sign-out posts must come from this site. */
+const isSameOrigin = (request: HttpServerRequest.HttpServerRequest) => {
+  const origin = request.headers['origin']
+  if (origin === undefined) return request.headers['sec-fetch-site'] !== 'cross-site'
+  try {
+    return new URL(origin).host === request.headers['host']
+  } catch {
+    return false
+  }
+}
+
+const cookie = (request: HttpServerRequest.HttpServerRequest, value: string, maxAge: number) =>
+  `${USER_COOKIE}=${value}; Path=/; Max-Age=${maxAge}; SameSite=Lax; HttpOnly${
+    request.headers['x-forwarded-proto'] === 'https' ? '; Secure' : ''
+  }`
+
+export const routes = Layer.mergeAll(
+  HttpRouter.add(
+    'GET',
+    '/login',
+    Effect.gen(function* () {
+      const request = yield* HttpServerRequest.HttpServerRequest
+      return html(loginPage(safeNext(new URL(request.url, 'http://localhost').searchParams.get('next')), undefined))
+    }),
+  ),
+  HttpRouter.add(
+    'POST',
+    '/login',
+    Effect.gen(function* () {
+      const request = yield* HttpServerRequest.HttpServerRequest
+      if (!isSameOrigin(request)) return HttpServerResponse.empty({ status: 403 })
+      const form = new URLSearchParams(yield* request.text)
+      const name = (form.get('name') ?? '').trim()
+      const next = safeNext(form.get('next'))
+      if (name.length === 0 || name.length > 32) return html(loginPage(next, 'Enter a name of up to 32 characters.'), 400)
+      return HttpServerResponse.redirect(next, { status: 303 }).pipe(
+        HttpServerResponse.setHeader('set-cookie', cookie(request, cookieValue(name), MAX_AGE)),
+      )
+    }).pipe(Effect.catch(() => Effect.succeed(HttpServerResponse.empty({ status: 400 })))),
+  ),
+  HttpRouter.add(
+    'POST',
+    '/logout',
+    Effect.gen(function* () {
+      const request = yield* HttpServerRequest.HttpServerRequest
+      if (!isSameOrigin(request)) return HttpServerResponse.empty({ status: 403 })
+      return HttpServerResponse.redirect('/login', { status: 303 }).pipe(
+        HttpServerResponse.setHeader('set-cookie', cookie(request, '', 0)),
+      )
+    }),
+  ),
+)

package/template/src/app/tasks/page.ts

@@ -0,0 +1,408 @@
+import { Effect, Match as M, Schema as S, SchemaIssue, Stream } from 'effect'
+import { Command, Subscription, type Update } from 'foldkit'
+import * as Dom from 'foldkit/dom'
+import type { Document, Html, HtmlBuilder } from 'foldkit/html'
+import { defineMessageUnion } from 'foldkit/message'
+
+import { type Program, keyBindings, memoizeLast, region } from '@hyper-effect/core'
+
+import { cn } from '@/lib/utils'
+import { button } from '@/ui/button'
+import { card, cardContent, cardHeader, cardTitle } from '@/ui/card'
+import { input } from '@/ui/input'
+
+import { requireUser } from '../auth'
+import { Task, Tasks } from './store'
+
+/* The task list: a Foldkit program whose loop runs on the server.
+
+   - Model, Message, update and view are plain Foldkit; the browser only
+     receives morphs and posts events.
+   - Every page shows the shared list live, through a Subscription on the
+     store's change feed.
+   - Regions: each part of the page re-renders and travels only when its
+     deps change; a change to one task sends one row. */
+
+// MODEL
+
+export const Filter = S.Literals(['all', 'open', 'done'])
+export type Filter = typeof Filter.Type
+
+export const Model = S.Struct({
+  user: S.String,
+  tasks: S.Array(Task),
+  filter: Filter,
+  /** What the user is typing; the input is client-owned (bound with
+   *  onInput), so the morph never overwrites it while they type. */
+  draft: S.String,
+  draftError: S.NullOr(S.String),
+  isAdding: S.Boolean,
+  /** The last change that failed, such as a task someone else deleted. */
+  notice: S.NullOr(S.String),
+})
+export type Model = typeof Model.Type
+
+// MESSAGE
+
+export const Message = defineMessageUnion({
+  ChangedDraft: { title: S.String },
+  SubmittedDraft: {},
+  ClickedToggle: { id: S.String },
+  ClickedRemove: { id: S.String },
+  ClickedFilter: { filter: Filter },
+  ClickedDismissNotice: {},
+  PressedNewTask: {},
+  CompletedFocus: {},
+  GotTasks: { tasks: S.Array(Task) },
+  SucceededAdd: {},
+  CompletedChange: {},
+  FailedChange: { reason: S.String },
+})
+export type Message = typeof Message.Type
+
+/** The Messages a browser may post as they are. Typed text arrives through
+ *  the session's handlers (onInput); store changes and Command results are
+ *  server facts and cannot be forged. Anything posted is still checked in
+ *  update: the browser is not trusted. */
+export const ClientMessage = S.Union([
+  Message.SubmittedDraft,
+  Message.ClickedToggle,
+  Message.ClickedRemove,
+  Message.ClickedFilter,
+  Message.ClickedDismissNotice,
+  Message.PressedNewTask,
+])
+export type ClientMessage = typeof ClientMessage.Type
+
+// VALIDATION
+
+const MAX_TITLE = 120
+
+export const Title = S.String.pipe(
+  S.check(
+    S.isMinLength(1, { message: 'Describe the task.' }),
+    S.isMaxLength(MAX_TITLE, { message: `At most ${MAX_TITLE} characters.` }),
+  ),
+)
+const decodeTitle = S.decodeUnknownExit(Title)
+const formatIssues = SchemaIssue.makeFormatterStandardSchemaV1()
+
+/** The trimmed title, or the message of the first check it fails. */
+export const validateTitle = (draft: string): Readonly<{ title: string } | { error: string }> => {
+  const decoded = decodeTitle(draft.trim())
+  if (decoded._tag === 'Success') return { title: decoded.value }
+  const error = decoded.cause.reasons.find(reason => reason._tag === 'Fail')?.error
+  return {
+    error: (S.isSchemaError(error) ? formatIssues(error.issue).issues[0]?.message : undefined) ?? 'Check the title.',
+  }
+}
+
+// COMMAND
+
+export const AddTask = Command.define('AddTask', {
+  args: { title: S.String, by: S.String },
+  messages: [Message.SucceededAdd],
+  execute: ({ title, by }) =>
+    Tasks.use(tasks => tasks.add(title, by)).pipe(Effect.as(Message.SucceededAdd())),
+})
+
+export const ToggleTask = Command.define('ToggleTask', {
+  args: { id: S.String },
+  messages: [Message.CompletedChange, Message.FailedChange],
+  execute: ({ id }) =>
+    Tasks.use(tasks => tasks.toggle(id)).pipe(
+      Effect.as(Message.CompletedChange()),
+      Effect.catchTag('TaskNotFound', () => Effect.succeed(Message.FailedChange({ reason: 'That task was just deleted.' }))),
+    ),
+})
+
+export const RemoveTask = Command.define('RemoveTask', {
+  args: { id: S.String },
+  messages: [Message.CompletedChange, Message.FailedChange],
+  execute: ({ id }) =>
+    Tasks.use(tasks => tasks.remove(id)).pipe(
+      Effect.as(Message.CompletedChange()),
+      Effect.catchTag('TaskNotFound', () => Effect.succeed(Message.CompletedChange())),
+    ),
+})
+
+/** Runs in the browser after the next morph: forwarded as a focus action
+ *  (see `clientCommands` in the program). */
+export const FocusNewTask = Command.define('FocusNewTask', {
+  messages: [Message.CompletedFocus],
+  execute: Dom.focus('#task-title').pipe(Effect.ignore, Effect.as(Message.CompletedFocus())),
+})
+
+// INIT
+
+export type Flags = Readonly<{ user: string; tasks: ReadonlyArray<Task> }>
+
+export const init = (flags: Flags): Update.Return<Model, Message> => ({
+  model: {
+    user: flags.user,
+    tasks: flags.tasks,
+    filter: 'all',
+    draft: '',
+    draftError: null,
+    isAdding: false,
+    notice: null,
+  },
+})
+
+// UPDATE
+
+type UpdateReturn = Update.Return<Model, Message, Tasks>
+
+export const update = (model: Model, message: Message): UpdateReturn =>
+  M.value(message).pipe(
+    M.withReturnType<UpdateReturn>(),
+    M.tagsExhaustive({
+      ChangedDraft: ({ title }) => ({ model: { ...model, draft: title, draftError: null } }),
+      SubmittedDraft: () => {
+        if (model.isAdding) return { model }
+        const validated = validateTitle(model.draft)
+        return 'error' in validated
+          ? { model: { ...model, draftError: validated.error } }
+          : { model: { ...model, isAdding: true }, commands: [AddTask({ title: validated.title, by: model.user })] }
+      },
+      // Clearing the draft in the Model clears the input: the server patches
+      // a client-owned input when the Model diverges from what it sent.
+      SucceededAdd: () => ({ model: { ...model, draft: '', isAdding: false } }),
+      ClickedToggle: ({ id }) => ({ model, commands: [ToggleTask({ id })] }),
+      ClickedRemove: ({ id }) => ({ model, commands: [RemoveTask({ id })] }),
+      ClickedFilter: ({ filter }) => ({ model: { ...model, filter } }),
+      ClickedDismissNotice: () => ({ model: { ...model, notice: null } }),
+      PressedNewTask: () => ({ model, commands: [FocusNewTask()] }),
+      CompletedFocus: () => ({ model }),
+      GotTasks: ({ tasks }) => ({ model: { ...model, tasks } }),
+      CompletedChange: () => ({ model }),
+      FailedChange: ({ reason }) => ({ model: { ...model, notice: reason } }),
+    }),
+  )
+
+// SUBSCRIPTION
+
+// One Message per change of the list, shared by every session (instead of
+// each session building its own copy).
+const gotTasks = memoizeLast((tasks: ReadonlyArray<Task>) => Message.GotTasks({ tasks }))
+
+export const subscriptions = Subscription.make<Model, Message, Tasks>()(entry => ({
+  tasks: entry(
+    {},
+    {
+      modelToDependencies: () => ({}),
+      dependenciesToStream: () =>
+        Stream.unwrap(Tasks.use(tasks => Effect.succeed(tasks.changes.pipe(Stream.map(gotTasks))))),
+    },
+  ),
+}))
+
+// VIEW
+
+const visibleTasks = (model: Model): ReadonlyArray<Task> =>
+  model.filter === 'all' ? model.tasks : model.tasks.filter(task => task.isDone === (model.filter === 'done'))
+
+const header = (user: string, h: HtmlBuilder<Message>): Html =>
+  h.header(
+    [h.Id('page-header'), h.Class('flex items-center justify-between gap-3 border-b bg-background px-4 py-3 sm:px-6')],
+    [
+      h.span([h.Class('text-base font-semibold')], ['{{title}}']),
+      h.div(
+        [h.Class('flex items-center gap-2 text-sm text-muted-foreground')],
+        [
+          h.span([], [user]),
+          // A plain form post: signing out is a navigation, not an event.
+          h.form(
+            [h.Method('post'), h.Action('/logout')],
+            [button({ children: ['Sign out'], type: 'submit', variant: 'ghost', size: 'sm' }, h)],
+          ),
+        ],
+      ),
+    ],
+  )
+
+const newTaskForm = (model: Model, h: HtmlBuilder<Message>): Html =>
+  h.form(
+    [h.Id('new-task'), h.Class('flex items-start gap-2'), h.OnSubmit(Message.SubmittedDraft())],
+    [
+      h.div(
+        [h.Class('flex-1')],
+        [
+          input(
+            {
+              id: 'task-title',
+              ariaLabel: 'New task',
+              value: model.draft,
+              placeholder: 'What needs doing?',
+              onInput: title => Message.ChangedDraft({ title }),
+              ...(model.draftError === null ? {} : { description: model.draftError, isInvalid: true }),
+            },
+            h,
+          ),
+        ],
+      ),
+      button({ children: ['Add'], type: 'submit', isLoading: model.isAdding }, h),
+    ],
+  )
+
+const FILTERS: ReadonlyArray<Readonly<{ value: Filter; label: string }>> = [
+  { value: 'all', label: 'All' },
+  { value: 'open', label: 'Open' },
+  { value: 'done', label: 'Done' },
+]
+
+const filters = (model: Model, h: HtmlBuilder<Message>): Html => {
+  const open = model.tasks.filter(task => !task.isDone).length
+  return h.div(
+    [h.Id('filters'), h.Class('flex items-center justify-between gap-2 text-sm')],
+    [
+      h.div(
+        [h.Class('flex gap-1'), h.Role('group'), h.AriaLabel('Show')],
+        FILTERS.map(({ value, label }) =>
+          button(
+            {
+              children: [label],
+              variant: model.filter === value ? 'secondary' : 'ghost',
+              size: 'sm',
+              onClick: Message.ClickedFilter({ filter: value }),
+            },
+            h,
+          ),
+        ),
+      ),
+      h.span([h.Class('text-muted-foreground'), h.AriaLive('polite')], [`${open} open of ${model.tasks.length}`]),
+    ],
+  )
+}
+
+const taskRow = (task: Task, h: HtmlBuilder<Message>): Html =>
+  h.li(
+    [h.Id(`task-${task.id}`), h.Class('flex items-center gap-3 py-2')],
+    [
+      h.button(
+        [
+          h.Type('button'),
+          h.Class(
+            cn(
+              'flex size-5 shrink-0 items-center justify-center rounded border text-xs',
+              task.isDone && 'border-primary bg-primary text-primary-foreground',
+            ),
+          ),
+          h.AriaPressed(task.isDone ? 'true' : 'false'),
+          h.AriaLabel(`Done: ${task.title}`),
+          h.OnClick(Message.ClickedToggle({ id: task.id })),
+        ],
+        [task.isDone ? '✓' : ''],
+      ),
+      h.div(
+        [h.Class('min-w-0 flex-1')],
+        [
+          h.p([h.Class(cn('truncate', task.isDone && 'text-muted-foreground line-through'))], [task.title]),
+          h.p([h.Class('text-xs text-muted-foreground')], [`by ${task.createdBy}`]),
+        ],
+      ),
+      button(
+        { children: ['Remove'], variant: 'ghost', size: 'xs', ariaLabel: `Remove ${task.title}`, onClick: Message.ClickedRemove({ id: task.id }) },
+        h,
+      ),
+    ],
+  )
+
+const taskList = (tasks: ReadonlyArray<Task>, h: HtmlBuilder<Message>): Html =>
+  tasks.length === 0
+    ? h.p([h.Id('task-list'), h.Class('py-6 text-center text-sm text-muted-foreground')], ['Nothing here.'])
+    : h.ul(
+        [h.Id('task-list'), h.Class('divide-y')],
+        // A region per task: a change to one task sends only its row.
+        tasks.map(task => region(h, { id: `task-${task.id}`, deps: [task], render: () => taskRow(task, h) })),
+      )
+
+const notice = (message: string | null, h: HtmlBuilder<Message>): Html =>
+  h.div(
+    [h.Id('notice'), h.AriaLive('polite')],
+    message === null
+      ? []
+      : [
+          h.div(
+            [h.Class('flex items-center justify-between gap-2 rounded-md border bg-muted px-3 py-2 text-sm')],
+            [
+              message,
+              button({ children: ['Dismiss'], variant: 'ghost', size: 'xs', onClick: Message.ClickedDismissNotice() }, h),
+            ],
+          ),
+        ],
+  )
+
+export const view = (model: Model, h: HtmlBuilder<Message>): Document => {
+  const visible = visibleTasks(model)
+  const open = model.tasks.filter(task => !task.isDone).length
+  return {
+    title: open === 0 ? '{{title}}' : `(${open}) {{title}}`,
+    body: h.div(
+      [h.Class('flex min-h-screen flex-col bg-muted/30')],
+      [
+        // deps list every Model field the region's view reads; outside
+        // production a region whose deps miss one fails to render.
+        region(h, { id: 'page-header', deps: [model.user], render: () => header(model.user, h) }),
+        // Shortcuts for the whole page, matched in the browser: only a
+        // matching key posts its Message.
+        keyBindings(h, [{ keys: 'N', message: Message.PressedNewTask() }]),
+        h.main(
+          [h.Class('mx-auto grid w-full max-w-2xl gap-4 p-4 sm:p-6')],
+          [
+            card(
+              {
+                children: [
+                  cardHeader({ children: [cardTitle({ children: ['Tasks'] }, h)] }, h),
+                  cardContent(
+                    {
+                      class: 'grid gap-4',
+                      children: [
+                        region(h, {
+                          id: 'new-task',
+                          deps: [model.draft, model.draftError, model.isAdding],
+                          render: () => newTaskForm(model, h),
+                        }),
+                        region(h, { id: 'notice', deps: [model.notice], render: () => notice(model.notice, h) }),
+                        region(h, { id: 'filters', deps: [model.filter, model.tasks], render: () => filters(model, h) }),
+                        region(h, { id: 'task-list', deps: [visible], render: () => taskList(visible, h) }),
+                      ],
+                    },
+                    h,
+                  ),
+                ],
+              },
+              h,
+            ),
+          ],
+        ),
+      ],
+    ),
+  }
+}
+
+// PROGRAM
+
+export const program: Program<Model, Message, ClientMessage, Flags, Tasks> = {
+  name: 'tasks',
+  Model,
+  ClientMessage,
+  // Runs per page load: authenticate, then load what the page shows.
+  flags: request =>
+    Effect.gen(function* () {
+      const user = yield* requireUser(request)
+      const tasks = yield* Tasks.use(store => store.current)
+      return { user, tasks }
+    }),
+  init,
+  update,
+  view,
+  subscriptions,
+  // Snapshots keep only this user's own state; the list comes back from the
+  // Subscription after a restore.
+  snapshotDeps: model => [model.filter, model.draft, model.draftError, model.notice],
+  // Browser-only Commands, performed by the page after the next morph.
+  clientCommands: {
+    FocusNewTask: () => ({ focus: '#task-title' }),
+  },
+}