rvlib-shipkit 2.8.0 → 2.9.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 2.9.0
+
+- **`sk fleet --update` commits and pushes each bump.** Every repo the update moved gets one commit of package.json and its lock alone, by pathspec, through the repo's own hooks: `chore(deps): rvlib-shipkit <range>`, then the plain push of `sk fleet push`. A repo whose manifest held changes before the update, whose package.json moved more than the bump, mid-merge, mid-rebase, on a detached HEAD or nested in another repo is skipped, its bump left in the tree and the command to run printed. A refused hook, a failed push or a branch behind its upstream is a FAIL line, and the command exits 1. `--no-commit` leaves every bump in its tree, as before.
+- **`sk fleet --update` moves a published package's devDependencies.** A repo that declares `release.npm` was only told its bump (« published to npm, never updated by a check »), so comfy-ts stayed behind on every release. Under the fleet, SK005 now moves its devDependencies; a `dependencies` entry stays named, and a plain gate still never writes either.
+- **The review card: a rectangle's note opens beside it, every image starts full, every text box grows.** A rectangle drawn on an image opens its note box right there, under it (over it when it sits low), numbered and focused, to type in at once, Enter or Escape closes it, a click on the rectangle opens it again, ✕ deletes it; the answer column still lists every note. Each image, pair and clip of a choice or a group shows full under its row from the start (⤢ folds one); a sound stays a row. Every text box of the page (the overall word, a view's or a tile's word, a note, the reply, a trailer note) grows with its text, no inner scrollbar and no drag handle: `AutoText` (`hub-app/auto-text.tsx`), which the atelier's prompt now uses too. On a phone the card pane holds the answer under the views (no third « answer » pane), a field's text is 16 px so the page no longer zooms into it, and the views' labels take the whole width. Another card opens at its top. A draft card's history cycles in place over its live frame again (a slider), and its files carry the frame, so a new frame shows. A clip's sound button and volume sit on one line with its time (a sound view's class had taken the same name).
+
 ## 2.8.0
 
 - **A brand's `icon` draws the favicon family at each size.** `icon: canvas(draw)` in `.shipkit/identity/brand.ts` draws `favicon.png` (512), `favicon-32.png`, `favicon-16.png` and `apple-touch-icon.png` (180, flattened on `palette.bg`), each at its own size, `asset.id` naming the file, so a 16 px tab reads a shape made for it, never a shrunk logo. Without one the favicon is the logo master resized, as before.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "rvlib-shipkit",
-    "version": "2.8.0",
+    "version": "2.9.0",
     "funding": "https://github.com/sponsors/rvion",
     "description": "All-in-one repo companion: ci gate (task DAG), auto-discovered health checks, release-contract fulfillness, asks queue, md-wiki tools, asset atelier, live tui",
     "license": "MIT",

package/src/checks/SK005-rvlib-versions.check.ts

@@ -40,7 +40,8 @@
 //             exists for: package.json moves, package-lock.json does not, and
 //             the `npm ci` a deploy runs refuses that pair
 //   registry unreachable → loud skip, never red (offline is not a defect)
-// Committing the bump stays with the working agent — shipkit never commits.
+// Committing the bump stays with the working agent: a check never commits
+// (`sk fleet --update` commits the bump it asked for, fleet/commit-bump.ts).
 // Clean passes cache 24h (rule ttl), so the registry is fetched at most
 // daily per repo; skip/WARN/FAIL runs are never cached. The key carries the
 // INSTALLED versions, so a manual `bun add -d rvlib-x@N` busts it: keyed on
@@ -51,7 +52,7 @@
 import { existsSync, readFileSync } from 'fs'
 import { basename, join } from 'path'
 import type { CheckCtx } from '../core/check-ctx.ts'
-import { allowMajor, breakingAdvice, isBreaking, isLinkedInstall, pinFloor } from '../core/update-policy.ts'
+import { allowMajor, breakingAdvice, fleetAsked, isBreaking, isLinkedInstall, pinFloor } from '../core/update-policy.ts'
 import { isRunningCopy, rememberLatest } from '../core/self-update.ts'
 import { rootPublishesNpm } from '../core/repo-facts.ts'
 import { mutateLease, withMutateLease } from '../core/locked-write.ts'
@@ -153,23 +154,28 @@ export const rvlibVersions = check({
         }
         if (stale.length === 0) return
 
-        const drift = stale.map((s) => `${s.name}${s.linked ? ' pin' : ''} ${s.installed} → ${s.latest}`).join(', ')
-        const names = stale.map((s) => s.name)
+        const driftOf = (xs: typeof stale): string => xs.map((s) => `${s.name}${s.linked ? ' pin' : ''} ${s.installed} → ${s.latest}`).join(', ')
         if (isRefusal(pm)) {
-            c.warn(`newer rvlib live: ${drift}, not updating: ${pm.refused}`)
+            c.warn(`newer rvlib live: ${driftOf(stale)}, not updating: ${pm.refused}`)
             return
         }
-        const cmd = pm.update(names)
         if (process.env['SHIPKIT_FROZEN'] === '1') {
-            c.warn(`newer rvlib live: ${drift} (frozen — apply with: ${cmd.join(' ')})`)
+            c.warn(`newer rvlib live: ${driftOf(stale)} (frozen — apply with: ${pm.update(stale.map((s) => s.name)).join(' ')})`)
             return
         }
         // a package published to npm: its package.json is its public
         // contract, so the bump is a release decision, named and never made
+        // by a check. `sk fleet --update` is the operator naming it, and a
+        // devDependency is read by no one who installs the package: it moves
+        let moving = stale
         if (rootPublishesNpm(c.config)) {
-            c.warn(`newer rvlib live: ${drift} (published to npm, never updated by a check — apply with: ${cmd.join(' ')})`)
-            return
+            const held = fleetAsked() ? stale.filter((s) => pkg.dependencies?.[s.name] != null) : stale
+            if (held.length > 0) c.warn(`newer rvlib live: ${driftOf(held)} (published to npm, never updated by a check${fleetAsked() ? ' nor the fleet: a dependency its installers get' : ''} — apply with: ${pm.update(held.map((s) => s.name)).join(' ')})`)
+            moving = stale.filter((s) => !held.includes(s))
+            if (moving.length === 0) return
         }
+        const drift = driftOf(moving)
+        const cmd = pm.update(moving.map((s) => s.name))
         const dirty = await c.exec(['git', 'status', '--porcelain', '--', ...manifest], { cwd: c.root })
         if (dirty.code !== 0 || dirty.out.trim() !== '') {
             c.warn(`newer rvlib live: ${drift} — self-update deferred (${dirty.code !== 0 ? `git says: ${dirty.out.trim().split('\n')[0] ?? `exit ${dirty.code}`}` : 'package.json/lockfile dirty'}); commit first, then re-run check`)
@@ -188,7 +194,7 @@ export const rvlibVersions = check({
             const up = await c.exec(cmd, { cwd: c.root, timeoutMs: 120_000 })
             // the update may swap a link for the tarball: put every link back,
             // whatever the update did, inside the same lease
-            for (const s of stale) if (s.linked) await c.exec(['bun', 'link', s.name], { cwd: c.root, timeoutMs: 60_000 })
+            for (const s of moving) if (s.linked) await c.exec(['bun', 'link', s.name], { cwd: c.root, timeoutMs: 60_000 })
             return up
         })
         if (!leased.ok) {
@@ -212,7 +218,7 @@ export const rvlibVersions = check({
             else c.warn(`self-update failed (${why}) and nothing was written — the registry or the network, not this repo. Retry with: ${cmd.join(' ')}: ${tail}`)
             return
         }
-        for (const s of stale) {
+        for (const s of moving) {
             if (s.linked) {
                 const now = pinFloor(readPin(c.root, s.name) ?? '')
                 if (!isLinkedInstall(c.root, s.name)) c.fail(`${s.name} pin ${s.installed} → ${now ?? 'unreadable'} but node_modules/${s.name} is no longer linked to its source — run: bun link ${s.name}`)

package/src/cli/cmd_Fleet.ts

@@ -1,7 +1,8 @@
 // shipkit fleet — every repo on this disk that installs the toolkit, and how
 // far behind each one is. Reports by default. `--update` hands the work to
 // each repo's OWN shipkit, so rule SK005 performs the update with the lease,
-// the dirty-tree guard and the frozen guard it already owns.
+// the dirty-tree guard and the frozen guard it already owns, then commits and
+// pushes each repo's bump unless `--no-commit`.
 import { Command, Option } from 'clipanion'
 import { join } from 'path'
 import { npmLatest, resolveLatest, scanFleet, type FleetRepo } from '../fleet/scan-fleet.ts'
@@ -17,7 +18,8 @@ export class FleetCommand extends Command {
         examples: [
             ['what is stale out there', 'sk fleet'],
             ['filesystem only, no registry', 'sk fleet --offline'],
-            ['bring every behind repo up, through its own gate', 'sk fleet --update'],
+            ['bring every behind repo up through its own gate, commit and push each bump', 'sk fleet --update'],
+            ['update, leave the bumps in the trees', 'sk fleet --update --no-commit'],
             ['one repo only', 'sk fleet --update --only my-app'],
             ['machine-readable', 'sk fleet --json'],
         ],
@@ -25,6 +27,7 @@ export class FleetCommand extends Command {
 
     root = Option.String('--root', { required: false, description: 'directory holding the repos (default: the parent of this repo)' })
     update = Option.Boolean('--update', false, { description: "run each behind repo's own `shipkit check`, which is where rule SK005 performs the guarded update" })
+    noCommit = Option.Boolean('--no-commit', false, { description: 'with --update: leave each bump in its tree. By default each moved repo commits package.json and its lock alone, by pathspec, as `chore(deps): <dep> <range>`, then pushes; a repo whose manifest was dirty before, whose package.json moved more than the bump, mid-merge, mid-rebase, on a detached HEAD or nested in another repo is skipped with the command to run' })
     only = Option.Array('--only', { description: 'limit to these repo directory names (repeatable)' })
     offline = Option.Boolean('--offline', false, { description: 'skip the registry: report what is installed, never what is current' })
     major = Option.Boolean('--major', false, { description: 'let --update cross a breaking boundary too. Default off: a major (or a 0.x minor, as npm caret reads it) is a porting job, not a bump, and no automatic update path takes one' })
@@ -58,11 +61,11 @@ export class FleetCommand extends Command {
             return 0
         }
         if (!this.update) {
-            w(`WARN ${behind.length}/${repos.length} repo(s) behind — rerun with --update, which runs each repo's own gate so SK005 does the write`)
+            w(`WARN ${behind.length}/${repos.length} repo(s) behind — rerun with --update, which runs each repo's own gate so SK005 does the write, then commits and pushes each bump`)
             return 0
         }
-        await updateFleet(behind, { major: this.major, print: w })
-        return 0
+        const res = await updateFleet(behind, { major: this.major, commit: !this.noCommit, print: w })
+        return res.failed > 0 ? 1 : 0
     }
 
     private row(r: FleetRepo): string {

package/src/core/update-policy.ts

@@ -10,6 +10,12 @@ export const ALLOW_MAJOR_ENV = 'SHIPKIT_ALLOW_MAJOR'
 
 export const allowMajor = (): boolean => process.env[ALLOW_MAJOR_ENV] === '1'
 
+/** set by `shipkit fleet --update` on every repo run it spawns: the operator
+ *  named the bump, so a published package's devDependencies may move */
+export const FLEET_UPDATE_ENV = 'SHIPKIT_FLEET_UPDATE'
+
+export const fleetAsked = (): boolean => process.env[FLEET_UPDATE_ENV] === '1'
+
 /** a jump across the boundary npm's caret draws: a changed major, or on a
  *  `0.x` package a changed minor (`^0.2.0` means `<0.3.0`). A porting job
  *  rather than a bump, so no automatic path takes it. */

package/src/fleet/commit-bump.ts

@@ -0,0 +1,123 @@
+// the commit `fleet --update` makes once a repo moved: package.json and its lock
+// only, by pathspec (never a private index, never `add -A`, never a stash or a
+// branch switch), then the plain push of `sk fleet push`. It commits nothing
+// that is not the bump: a manifest dirty before the update, a package.json diff
+// beyond the moved deps, a merge or rebase under way and a detached HEAD each
+// skip, the files left updated and the line saying what to run.
+import { existsSync, readFileSync } from 'fs'
+import { isAbsolute, join } from 'path'
+import { detectPackageManager, isRefusal, LOCK_FILES } from '../core/package-manager.ts'
+import { git, pushRepo } from './push-fleet.ts'
+
+export type BumpResult = { status: 'pushed' | 'skip' | 'fail' | 'none'; line: string }
+
+type Change = { path: string; tracked: boolean }
+
+/** what the repo held before the update: its manifest (package.json and the
+ *  locks of the manager it installs with) and which of those files were
+ *  already changed, someone else's work. Null outside a git repo */
+export type Baseline = { manifest: string[]; dirty: Change[] } | null
+
+async function changes(dir: string, manifest: string[]): Promise<Change[] | null> {
+    const r = await git(dir, ['status', '--porcelain', '--', ...manifest])
+    if (r.code !== 0) return null
+    return r.out.split('\n').filter((l) => l !== '').map((l) => ({ path: l.slice(3), tracked: !l.startsWith('??') }))
+}
+
+export async function bumpBaseline(dir: string): Promise<Baseline> {
+    const pm = detectPackageManager(dir)
+    const manifest = ['package.json', ...(isRefusal(pm) ? LOCK_FILES : pm.locks)]
+    const dirty = await changes(dir, manifest)
+    return dirty == null ? null : { manifest, dirty }
+}
+
+const OPERATIONS: Array<[string, string]> = [['MERGE_HEAD', 'a merge'], ['rebase-merge', 'a rebase'], ['rebase-apply', 'a rebase'], ['CHERRY_PICK_HEAD', 'a cherry-pick'], ['REVERT_HEAD', 'a revert']]
+
+/** why this repo takes no commit of ours right now, or null. One git call:
+ *  the dir's place in its work tree (a nested repo is a folder of another
+ *  repo's history, never committed on), the ref HEAD names (`HEAD` itself
+ *  when detached), then where each operation in progress leaves its state */
+async function headRefusal(dir: string): Promise<string | null> {
+    const r = await git(dir, ['rev-parse', '--show-prefix', '--symbolic-full-name', 'HEAD', ...OPERATIONS.flatMap(([p]) => ['--git-path', p])])
+    if (r.code !== 0) return `git rev-parse failed: ${r.err.trim().split('\n')[0]}`
+    const [prefix, ref, ...paths] = r.out.split('\n').map((l) => l.trim())
+    if (prefix != null && prefix !== '') return `it is the folder ${prefix} of a larger repo, whose history is not its own`
+    for (const [i, [, label]] of OPERATIONS.entries()) {
+        const p = paths[i]
+        if (p != null && p !== '' && existsSync(isAbsolute(p) ? p : join(dir, p))) return `${label} is under way`
+    }
+    return ref === 'HEAD' ? 'HEAD is detached' : null
+}
+
+/** a value with its object keys sorted, so key order is never a change */
+const canonical = (v: unknown): unknown =>
+    Array.isArray(v) ? v.map(canonical) : v != null && typeof v === 'object' ? Object.fromEntries(Object.keys(v).sort().map((k) => [k, canonical((v as Record<string, unknown>)[k])])) : v
+
+const DEP_FIELDS = ['dependencies', 'devDependencies', 'optionalDependencies', 'peerDependencies']
+
+/** every field of package.json the update changed besides the moved deps,
+ *  as `devDependencies.left-pad` or `scripts` */
+export function extraChanges(before: Record<string, unknown>, after: Record<string, unknown>, moved: string[]): string[] {
+    const out: string[] = []
+    for (const key of new Set([...Object.keys(before), ...Object.keys(after)])) {
+        const [b, a] = [before[key], after[key]]
+        if (DEP_FIELDS.includes(key) && (b == null || typeof b === 'object') && (a == null || typeof a === 'object')) {
+            const [bs, as] = [(b ?? {}) as Record<string, unknown>, (a ?? {}) as Record<string, unknown>]
+            for (const dep of new Set([...Object.keys(bs), ...Object.keys(as)])) {
+                if (moved.includes(dep) && (key === 'dependencies' || key === 'devDependencies')) continue
+                if (bs[dep] !== as[dep]) out.push(`${key}.${dep}`)
+            }
+            continue
+        }
+        if (JSON.stringify(canonical(b)) !== JSON.stringify(canonical(a))) out.push(key)
+    }
+    return out
+}
+
+const lastLine = (text: string): string | null => text.split('\n').map((l) => l.trim()).filter((l) => l !== '' && !l.startsWith('hint:')).at(-1) ?? null
+
+/** commit and push the bump of `moved` in `dir`, against the baseline read
+ *  before the update ran */
+export async function commitBump(repo: { name: string; dir: string }, moved: string[], base: Baseline): Promise<BumpResult> {
+    const { name, dir } = repo
+    const skip = (why: string, then: string): BumpResult => ({ status: 'skip', line: `skip: ${name}: ${why}, so the bump is not committed. It stays in the tree: cd ${dir} && ${then}` })
+    if (base == null) return skip('git status failed before the update', 'git status')
+    if (base.dirty.length > 0) {
+        const held = base.dirty.map((c) => c.path)
+        return skip(`${held.join(', ')} held changes before the update`, `git diff -- ${held.join(' ')}, then commit the bump with them by hand`)
+    }
+    const refused = await headRefusal(dir)
+    if (refused != null) return skip(refused, 'commit the bump by hand once it can take one')
+    const after = await changes(dir, base.manifest)
+    if (after == null) return { status: 'fail', line: `FAIL: ${name}: git status failed after the update: cd ${dir} && git status` }
+    const paths = after.filter((c) => c.tracked).map((c) => c.path).sort((a, b) => Number(b === 'package.json') - Number(a === 'package.json'))
+    if (paths.length === 0) return { status: 'none', line: `ok: ${name}: package.json and its lock unchanged, nothing to commit` }
+
+    const head = await git(dir, ['show', 'HEAD:./package.json'])
+    let was: Record<string, unknown>
+    let now: Record<string, unknown>
+    try {
+        was = JSON.parse(head.out) as Record<string, unknown>
+        now = JSON.parse(readFileSync(join(dir, 'package.json'), 'utf8')) as Record<string, unknown>
+    } catch {
+        return skip('package.json is unreadable in HEAD or on disk', 'git diff -- package.json')
+    }
+    const extra = extraChanges(was, now, moved)
+    if (extra.length > 0) return skip(`the update changed ${extra.join(', ')} in package.json too`, 'git diff -- package.json')
+
+    const deps = now as { dependencies?: Record<string, string>; devDependencies?: Record<string, string> }
+    const message = `chore(deps): ${[...moved].sort().map((d) => `${d} ${deps.dependencies?.[d] ?? deps.devDependencies?.[d] ?? '?'}`).join(', ')}`
+    const by = `git commit -m '${message}' -- ${paths.join(' ')}`
+
+    // its first line names the commit: `[main 1a2b3c4] chore(deps): …`
+    const done = await git(dir, ['commit', '-m', message, '--', ...paths], 120_000)
+    if (done.code !== 0) return { status: 'fail', line: `FAIL: ${name}: the commit was refused: ${lastLine(`${done.out}\n${done.err}`) ?? `git commit exited ${done.code}`}. The bump stays in the tree: cd ${dir} && ${by}` }
+    const sha = done.out.match(/^\[\S+ ([0-9a-f]+)\]/m)?.[1] ?? 'HEAD'
+    const push = await pushRepo({ name, path: dir })
+    const committed = `committed ${sha} ${message}`
+    if (push.ok && push.action !== 'none') return { status: 'pushed', line: `ok: ${name}: ${committed}, pushed (${push.branch})` }
+    // never a force: a branch behind its upstream waits for a pull, and the
+    // operator is told as loudly as a failed push
+    if (push.action === 'skip') return { status: 'fail', line: `FAIL: ${name}: ${committed}, not pushed: ${push.why}` }
+    return { status: 'fail', line: `FAIL: ${name}: ${committed}, the push failed: ${push.line.replace(/^FAIL: [^:]+: /, '')}. Run: cd ${dir} && git push` }
+}

package/src/fleet/push-fleet.ts

@@ -15,9 +15,12 @@ export type PushResult = PushPlan & { ok: boolean; line: string }
 const PARALLEL = 4
 const PUSH_MS = 60_000
 
-async function git(cwd: string, args: string[], ms = 15_000): Promise<{ code: number; out: string; err: string }> {
-    // a push that would ask for a password fails instead of hanging the page
-    const p = Bun.spawn(['git', ...args], { cwd, stdout: 'pipe', stderr: 'pipe', env: { ...process.env, GIT_TERMINAL_PROMPT: '0' } })
+/** git in another repo: a push that would ask for a password fails instead of
+ *  hanging, and a GIT_DIR or GIT_INDEX_FILE this process inherited (a hook) is
+ *  never carried into it */
+export async function git(cwd: string, args: string[], ms = 15_000): Promise<{ code: number; out: string; err: string }> {
+    const env = Object.fromEntries(Object.entries(process.env).filter(([k]) => k !== 'GIT_DIR' && k !== 'GIT_INDEX_FILE' && k !== 'GIT_WORK_TREE'))
+    const p = Bun.spawn(['git', ...args], { cwd, stdout: 'pipe', stderr: 'pipe', env: { ...env, GIT_TERMINAL_PROMPT: '0' } })
     const timer = setTimeout(() => p.kill(), ms)
     const [out, err, code] = await Promise.all([new Response(p.stdout).text(), new Response(p.stderr).text(), p.exited])
     clearTimeout(timer)
@@ -63,6 +66,9 @@ async function pushOne(p: PushPlan): Promise<PushResult> {
     return { ...p, ok: false, line: `FAIL: ${p.name}: git ${args.join(' ')}: ${why}` }
 }
 
+/** one repo planned and pushed: what `fleet --update` runs after its commit */
+export const pushRepo = async (repo: { name: string; path: string }): Promise<PushResult> => pushOne(await pushPlan(repo))
+
 /** every repo planned, the ones that need it pushed, a few at a time; `dry`
  *  plans only. Results come back in the repos' order */
 export async function pushFleet(repos: { name: string; path: string }[], o: { dry?: boolean } = {}): Promise<PushResult[]> {

package/src/fleet/update-fleet.ts

@@ -1,13 +1,15 @@
 // `shipkit fleet --update`: hand each behind repo its own update. The update
 // is NOT performed here. Each repo runs its own binary, which is the only copy
 // whose SK005 matches the rules that repo is pinned to, and the only one
-// holding that repo's mutate lease.
+// holding that repo's mutate lease. What it does write is the commit of the
+// bump each repo made, and its push (commit-bump.ts).
 import { existsSync } from 'fs'
 import { join } from 'path'
 import { spawnWithTimeout } from '../core/spawn-timeout.ts'
 import { detectPackageManager, isRefusal } from '../core/package-manager.ts'
-import { ALLOW_MAJOR_ENV, breakingAdvice } from '../core/update-policy.ts'
+import { ALLOW_MAJOR_ENV, breakingAdvice, FLEET_UPDATE_ENV } from '../core/update-policy.ts'
 import { isBehind, judgedVersion, updateRefusal, type FleetRepo } from './scan-fleet.ts'
+import { bumpBaseline, commitBump } from './commit-bump.ts'
 
 
 export const short = (name: string): string => name.replace(/^rvlib-/, '')
@@ -23,26 +25,36 @@ export type FleetUpdateOpts = {
     /** cross a breaking boundary too (`--major`) */
     major: boolean
     print: (line: string) => void
+    /** commit and push each repo's bump (fleet/commit-bump.ts); `--no-commit` leaves it in the tree */
+    commit?: boolean
+    /** runs the repo's own binary (tests pass a fake) */
+    spawn?: typeof spawnWithTimeout
     /** per repo run (default 10 minutes: a fresh health pass probes the world) */
     timeoutMs?: number
 }
 
-/** returns how many repos did not update. A repo whose gate refused (dirty
- *  tree, frozen, a lease held elsewhere) is a REPORT, not a failure of the
- *  command: SK005 defers on purpose */
 /** the env of one repo's guarded run. It stays in its own process
  *  (SHIPKIT_NO_HOME): a check the home daemon answers never sees this env, so
  *  --major would be dropped on the way */
 export function fleetEnv(base: Record<string, string | undefined>, major: boolean): Record<string, string> {
     const env: Record<string, string> = Object.fromEntries(Object.entries(base).filter((e): e is [string, string] => e[1] != null && e[0] !== 'SHIPKIT_SELF_UPDATED' && e[0] !== ALLOW_MAJOR_ENV))
     env['SHIPKIT_NO_HOME'] = '1'
+    env[FLEET_UPDATE_ENV] = '1'
     if (major) env[ALLOW_MAJOR_ENV] = '1'
     return env
 }
 
-export async function updateFleet(behind: FleetRepo[], o: FleetUpdateOpts): Promise<number> {
+/** `notMoved`: repos that did not update. A repo whose gate refused (dirty
+ *  tree, frozen, a lease held elsewhere) is a REPORT, not a failure of the
+ *  command: SK005 defers on purpose. `failed`: a commit a hook refused or a
+ *  push that failed, the lines the operator must act on */
+export type FleetUpdateResult = { notMoved: number; committed: number; failed: number }
+
+export async function updateFleet(behind: FleetRepo[], o: FleetUpdateOpts): Promise<FleetUpdateResult> {
     const w = o.print
     let failed = 0
+    let committed = 0
+    let broke = 0
     for (const r of behind) {
         // the same policy SK005 applies inside the repo: a breaking jump is reported,
         // never taken, and a safe jump beside it still moves
@@ -71,8 +83,9 @@ export async function updateFleet(behind: FleetRepo[], o: FleetUpdateOpts): Prom
         // way around it: SK005 has no autofix, so the binary refuses the id.
         // The re-exec guard is dropped so the repo's own startup self-update
         // can still fire, and --major travels as the one env the policy reads.
+        const before = o.commit === true ? await bumpBaseline(r.dir) : null
         const env = fleetEnv(process.env, o.major === true)
-        const res = await spawnWithTimeout(['bun', cli, 'check', '--fresh'], { cwd: r.dir, env, timeoutMs: o.timeoutMs ?? 600_000 })
+        const res = await (o.spawn ?? spawnWithTimeout)(['bun', cli, 'check', '--fresh'], { cwd: r.dir, env, timeoutMs: o.timeoutMs ?? 600_000 })
         // judge by what node_modules carries now (the pin, for a linked dep),
         // never by the exit code or a printed line: the code covers every rule
         // in that repo, and the line format belongs to whatever version that repo runs
@@ -82,13 +95,29 @@ export async function updateFleet(behind: FleetRepo[], o: FleetUpdateOpts): Prom
         })
         if (stuck.length === 0) {
             w(`ok: ${r.name} — ${wanted.map((d) => `${short(d.name)}${d.linkedInstall ? ' pin' : ''} ${d.at} → ${judgedVersion(r.dir, d.name)}`).join(', ')}`)
+            if (o.commit === true) {
+                const c = await commitBump({ name: r.name, dir: r.dir }, wanted.map((d) => d.name), before)
+                w(c.line)
+                if (c.status === 'pushed') committed++
+                if (c.status === 'fail') broke++
+            }
             continue
         }
         failed++
+        // what did move is committed: left in the tree, the next run reads it
+        // as someone else's work
+        const moved = wanted.filter((d) => !stuck.includes(d))
+        if (o.commit === true && moved.length > 0) {
+            const c = await commitBump({ name: r.name, dir: r.dir }, moved.map((d) => d.name), before)
+            w(c.line)
+            if (c.status === 'pushed') committed++
+            if (c.status === 'fail') broke++
+        }
         const said = res.out.split('\n').find((l) => /\brvlib-/.test(l) && (l.startsWith('WARN') || l.startsWith('FAIL')))
         w(`WARN ${r.name} did not move ${stuck.map((d) => short(d.name)).join(', ')} — ${said ?? `check exited ${res.code}${res.timedOut ? ', timed out' : ''} with no rvlib line`}`)
         w(`      fix: cd ${r.dir} && ${manualUpdate(r)}`)
     }
-    w(failed === 0 ? `ok: ${behind.length} repo(s) updated through their own gate` : `WARN ${failed}/${behind.length} repo(s) did not update — each line above says why`)
-    return failed
+    const commits = o.commit === true ? `, ${committed} committed${broke > 0 ? `, ${broke} FAILED to commit or push` : ''}` : ''
+    w(failed === 0 ? `ok: ${behind.length} repo(s) updated through their own gate${commits}` : `WARN ${failed}/${behind.length} repo(s) did not update — each line above says why${commits}`)
+    return { notMoved: failed, committed, failed: broke }
 }

package/src/serve/hub-app/auto-text.tsx

@@ -0,0 +1,52 @@
+// the hub's one text box that grows with its text: never an inner scrollbar, unless a sheet caps its height
+// (max-height), past which it scrolls. Every multi line field of the hub is this one
+import { useCallback, useLayoutEffect, useRef, type TextareaHTMLAttributes } from 'react'
+
+type Props = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onChange' | 'rows'> & {
+    value: string
+    onText: (text: string) => void
+    /** the height it never shrinks under, in lines */
+    rows?: number
+    /** the element, for a caller that focuses it */
+    el?: (t: HTMLTextAreaElement | null) => void
+}
+
+/** a textarea at the height of its text: its value, a new width, a font that loads all size it again */
+export function AutoText({ value, onText, rows = 1, el, className, ...rest }: Props) {
+    const ref = useRef<HTMLTextAreaElement | null>(null)
+    const size = useCallback((): void => {
+        const t = ref.current
+        if (t == null) return
+        t.style.height = 'auto'
+        const edge = t.offsetHeight - t.clientHeight
+        t.style.height = `${t.scrollHeight + edge}px`
+        // a sheet's max-height stops it: only then may it scroll
+        t.style.overflowY = t.scrollHeight > t.clientHeight + 1 ? 'auto' : 'hidden'
+    }, [])
+    useLayoutEffect(size, [value, size])
+    useLayoutEffect(() => {
+        const t = ref.current
+        if (t == null || typeof ResizeObserver === 'undefined') return
+        let w = t.clientWidth
+        const ro = new ResizeObserver(() => {
+            if (t.clientWidth === w) return
+            w = t.clientWidth
+            size()
+        })
+        ro.observe(t)
+        return () => ro.disconnect()
+    }, [size])
+    return (
+        <textarea
+            {...rest}
+            ref={(t) => {
+                ref.current = t
+                el?.(t)
+            }}
+            className={className ? `autotext ${className}` : 'autotext'}
+            rows={rows}
+            value={value}
+            onChange={(e) => onText(e.currentTarget.value)}
+        />
+    )
+}

package/src/serve/hub-app/hub.css

@@ -225,6 +225,8 @@ main{display:flex;flex-direction:column;min-height:0;overflow:hidden}
 .bar{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s2) var(--s4);border-bottom:1px solid var(--line);background:var(--panel)}
 textarea{width:100%;min-height:64px;background:var(--bg);color:var(--ink);border:1px solid var(--line);
  border-radius:3px;padding:var(--s2) var(--s3);font:12px/1.5 ui-monospace,Menlo,monospace;resize:vertical}
+/* auto-text.tsx: the box is as tall as its text, so it never drags nor scrolls (a sheet's max-height may cap it) */
+textarea.autotext{box-sizing:border-box;min-height:0;resize:none;overflow-y:hidden}
 .promptrow{display:flex;gap:var(--s1);align-items:flex-start}
 .promptrow .fold{flex:none;background:var(--panel2);color:var(--dim);border:1px solid var(--line);border-radius:3px;
  padding:var(--s1) var(--s2);font-size:11px;line-height:1.5}

package/src/serve/hub-app/media-view.tsx

@@ -6,6 +6,7 @@ import { runInAction } from 'mobx'
 import { observer } from 'mobx-react-lite'
 import { useEffect, useRef, useState, type DragEvent, type ReactNode } from 'react'
 import type { RepoSt } from './repo-st.ts'
+import { AutoText } from './auto-text.tsx'
 import { isAud, type MediaSvc } from './media-svc.ts'
 import { GeometryLayer, Rectbar, measureBox, type Box } from './geometry-view.tsx'
 import type { CatRow, CustomPanelRef } from './hub-types.ts'
@@ -17,17 +18,8 @@ const MIX_GROUND = 44
 export const MediaTopbar = observer(({ app }: { app: RepoSt }) => {
     const m = app.media
     const fileRef = useRef<HTMLInputElement>(null)
-    const taRef = useRef<HTMLTextAreaElement>(null)
     const manual = m.cur?.manual === true
     const det = m.deterministic
-    // auto-grow on EVERY prompt change, programmatic (selection) included —
-    // the css max-height caps it, overflow scrolls only past ~14 lines
-    useEffect(() => {
-        const t = taRef.current
-        if (t == null) return
-        t.style.height = 'auto'
-        t.style.height = `${t.scrollHeight + 2}px`
-    }, [m.prompt, m.promptOpen])
     return (
         <div className="bar">
             {/* the prompt AUTOSAVES (debounced), no save button, no fear.
@@ -36,8 +28,8 @@ export const MediaTopbar = observer(({ app }: { app: RepoSt }) => {
                 <button className="fold" title={m.promptOpen ? 'fold the prompt' : 'expand the prompt'}
                     onClick={() => m.togglePrompt()}>{m.promptOpen ? '▾' : '▸'}</button>
                 {m.promptOpen
-                    ? <textarea className="prompt" ref={taRef} value={m.prompt} placeholder="select an asset ←"
-                        onChange={(e) => m.setPrompt(e.target.value)} />
+                    // it grows on every prompt change, a selection's included; the css max-height caps it near 14 lines
+                    ? <AutoText className="prompt" value={m.prompt} placeholder="select an asset ←" onText={(t) => m.setPrompt(t)} />
                     : <div className="prompt folded" onClick={() => m.togglePrompt()}>
                         {/* placeholder only when NOTHING is selected, a selected
                             asset with an empty prompt shows an empty line */}

package/src/serve/hub-app/review/review-answer.tsx

@@ -2,6 +2,7 @@
 // goes to the agent, the verdicts (the phone's in a bar under the thumb), then the thread's conversation and his reply
 // box. When the page reads in one column the header sits over the views instead (review-views.tsx)
 import { observer } from 'mobx-react-lite'
+import { AutoText } from '../auto-text.tsx'
 import { Icon, ICON } from '../icons.tsx'
 import { laneOf, placeText, STATUS_LABEL, stateOf, verdictOf, viewName, withdrawnOf, type ReviewItem, type ReviewStatus } from '../../../review/model.ts'
 import { renderMd } from '../md.ts'
@@ -98,7 +99,7 @@ export const CardHead = observer(({ rv, x }: { rv: ReviewSt; x: ReviewItem }) =>
                     <Listeners rv={rv} cards={[x]} />
                 </div>
             ) : null}
-            <textarea className="rv-comment" rows={2} placeholder="your overall word (a verdict sends it)" value={draft.comment} onKeyDown={blurOnEscape} onChange={(e) => rv.setComment(e.currentTarget.value)} />
+            <AutoText className="rv-comment" rows={2} placeholder="your overall word (a verdict sends it)" value={draft.comment} onKeyDown={blurOnEscape} onText={(t) => rv.setComment(t)} />
         </div>
     )
 })
@@ -175,7 +176,7 @@ const Outgoing = observer(({ rv }: { rv: ReviewSt }) => {
                         ? 'React to a view (OK, fix, no, a word), or drag on the clip to circle a detail: it pauses, the rectangle keeps its moment.'
                         : rv.phone.on
                             ? 'React to a view (OK, fix, no, a word), or turn « Circle » on above the image, then drag to circle a detail.'
-                            : 'React to a view (OK, fix, no, a word), or drag on the image to circle a detail.'}
+                            : 'React to a view (OK, fix, no, a word), or drag on the image to circle a detail, then write beside it.'}
                 </div>
             ) : null}
             {draft.pick !== undefined ? (
@@ -192,8 +193,8 @@ const Outgoing = observer(({ rv }: { rv: ReviewSt }) => {
                         <button className={`rv-outbadge${q.status ? ` re-${q.status} on` : ''}`} title="see this image" onClick={() => { rv.setView(q.view); jumpTo(q.view, q.tile) }}>
                             {o?.glyph ?? (q.stars ? '' : '·')}{q.stars ? `★${q.stars}` : ''} {placeText(q, views).slice(1, -1)}
                         </button>
-                        <textarea rows={1} placeholder={o ? `${o.label}, with no word` : 'a word'} value={q.comment} onKeyDown={blurOnEscape}
-                            onChange={(e) => rv.setReactionComment(q.view, q.tile, e.currentTarget.value)} />
+                        <AutoText placeholder={o ? `${o.label}, with no word` : 'a word'} value={q.comment} onKeyDown={blurOnEscape}
+                            onText={(t) => rv.setReactionComment(q.view, q.tile, t)} />
                         <button className="ghost rv-x" aria-label="remove this reaction" onClick={() => rv.removeReaction(q.view, q.tile)}>✕</button>
                     </div>
                 )
@@ -203,8 +204,8 @@ const Outgoing = observer(({ rv }: { rv: ReviewSt }) => {
                     <button className={`rv-outbadge rect${rv.rect === i ? ' on' : ''}`} title="see this rectangle" onClick={() => { rv.pickRect(i); jumpTo(q.view ?? 0) }}>
                         ⬚ {i + 1}{views.length > 1 ? ` · ${viewName(views[q.view ?? 0], q.view ?? 0)}` : ''}{q.side ? ` ${SIDE_LABEL[q.side]}` : ''}{q.t !== undefined ? ` · ${secs(q.t)}` : ''}
                     </button>
-                    <textarea rows={1} placeholder="what is wrong here" value={q.comment} onFocus={() => rv.pickRect(i)} onKeyDown={blurOnEscape}
-                        onChange={(e) => rv.setRectComment(i, e.currentTarget.value)} />
+                    <AutoText placeholder="what is wrong here" value={q.comment} onFocus={() => rv.pickRect(i)} onKeyDown={blurOnEscape}
+                        onText={(t) => rv.setRectComment(i, t)} />
                     <button className="ghost rv-x" aria-label="delete this rectangle" onClick={() => rv.removeRect(i)}>✕</button>
                 </div>
             ))}
@@ -235,7 +236,7 @@ const Messages = observer(({ rv }: { rv: ReviewSt }) => {
                     </div>
                 )
             })}
-            <textarea className="rv-reply" rows={2} placeholder="Answer the agent (⌘Enter sends)" value={rv.reply} onChange={(e) => rv.setReply(e.currentTarget.value)}
+            <AutoText className="rv-reply" rows={2} placeholder="Answer the agent (⌘Enter sends)" value={rv.reply} onText={(t) => rv.setReply(t)}
                 onKeyDown={(e) => {
                     if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
                         e.preventDefault()

package/src/serve/hub-app/review/review-page.tsx

@@ -1,9 +1,10 @@
 // a repo's review page (`#page:review`, wiki build/shipkit/review.md, The review page): the cards on the left, the open
 // one in the middle with every view stacked, the answer on the right; `top` (or `auto` narrower than STACK_PX) reads in
-// one column from the top: the header and the verdicts, the views, the answer. On a phone one pane at a time, the verdicts in a bar under the thumb. The list is read while the page
-// shows
+// one column from the top: the header and the verdicts, the views, the answer. On a phone the cards or the card (its
+// views, then its answer), the verdicts in a bar under the thumb. Another card opens at its top. The list is read while
+// the page shows
 import { observer } from 'mobx-react-lite'
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, type ReactNode } from 'react'
 import { Group, Panel, Separator } from 'react-resizable-panels'
 import type { RepoSt } from '../repo-st.ts'
 import { ReviewForm, VerdictBar } from './review-answer.tsx'
@@ -11,7 +12,7 @@ import { ReviewList } from './review-list.tsx'
 import type { PhonePane, ReviewSt } from './review-st.ts'
 import { ReviewImage } from './review-views.tsx'
 
-const PANE_LABEL: Record<PhonePane, string> = { list: 'cards', card: 'card', answer: 'answer' }
+const PANE_LABEL: Record<PhonePane, string> = { list: 'cards', card: 'card' }
 
 export const ReviewPage = observer(({ app }: { app: RepoSt }) => {
     const rv = app.review
@@ -41,15 +42,20 @@ export const ReviewPage = observer(({ app }: { app: RepoSt }) => {
             <div className="rv-phone">
                 <PhoneTop app={app} />
                 <div className="rv-phonetabs seg">
-                    {(['list', 'card', 'answer'] as const).map((p) => (
+                    {(['list', 'card'] as const).map((p) => (
                         <button key={p} className={rv.phone.pane === p ? 'on' : ''} onClick={() => rv.phone.show(p)}>
                             {PANE_LABEL[p]}{p === 'list' && rv.pendingCount > 0 ? ` · ${rv.pendingCount}` : ''}
                         </button>
                     ))}
                 </div>
-                <div className="rv-phonepane">
-                    {rv.phone.pane === 'list' ? <ReviewList rv={rv} /> : rv.phone.pane === 'card' ? <ReviewImage rv={rv} /> : <ReviewForm rv={rv} />}
-                </div>
+                {rv.phone.pane === 'list' ? (
+                    <div className="rv-phonepane"><ReviewList rv={rv} /></div>
+                ) : (
+                    <CardScroll rv={rv} className="rv-phonepane">
+                        <ReviewImage rv={rv} />
+                        <ReviewForm rv={rv} />
+                    </CardScroll>
+                )}
                 {rv.phone.pane === 'list' ? null : <VerdictBar rv={rv} />}
                 <Toast rv={rv} />
             </div>
@@ -65,19 +71,19 @@ export const ReviewPage = observer(({ app }: { app: RepoSt }) => {
             {rv.stacked ? (
                 // one column read from the top: the header and the verdicts, the views, then the answer
                 <Panel id="review-stack" defaultSize="68%" minSize={300} className="rv-pane" style={PANEL}>
-                    <div className="rv-scroll">
+                    <CardScroll rv={rv} className="rv-scroll">
                         <ReviewImage rv={rv} />
                         <ReviewForm rv={rv} />
-                    </div>
+                    </CardScroll>
                 </Panel>
             ) : (
                 <>
                     <Panel id="review-image" defaultSize="54%" minSize={300} className="rv-pane" style={PANEL}>
-                        <div className="rv-scroll"><ReviewImage rv={rv} /></div>
+                        <CardScroll rv={rv} className="rv-scroll"><ReviewImage rv={rv} /></CardScroll>
                     </Panel>
                     <Separator className="rsep" />
                     <Panel id="review-form" defaultSize="26%" minSize={260} className="rv-pane" style={PANEL}>
-                        <div className="rv-scroll"><ReviewForm rv={rv} /></div>
+                        <CardScroll rv={rv} className="rv-scroll"><ReviewForm rv={rv} /></CardScroll>
                     </Panel>
                 </>
             )}
@@ -96,6 +102,16 @@ export const PhoneTop = observer(({ app }: { app: RepoSt }) => (
     </div>
 ))
 
+/** a column of the open card: another card opens at its top, never where the last one was scrolled */
+const CardScroll = observer(({ rv, className, children }: { rv: ReviewSt; className: string; children: ReactNode }) => {
+    const el = useRef<HTMLDivElement | null>(null)
+    const id = rv.open?.item.id
+    useEffect(() => {
+        if (el.current) el.current.scrollTop = 0
+    }, [id])
+    return <div ref={el} className={className}>{children}</div>
+})
+
 /** what the last copy put on the clipboard, a moment over the page */
 const Toast = observer(({ rv }: { rv: ReviewSt }) => (rv.toast ? <div className="rv-toast" role="status">{rv.toast}</div> : null))
 

package/src/serve/hub-app/review/review-st.ts

@@ -77,7 +77,7 @@ export const STACK_PX = 900
 /** where the card sits against its answer: on top of it, left of it, or by the page's width */
 export const CARD_PLACES = ['top', 'left', 'auto'] as const
 export type CardPlace = (typeof CARD_PLACES)[number]
-export type PhonePane = 'list' | 'card' | 'answer'
+export type PhonePane = 'list' | 'card'
 export type PairSide = 'before' | 'after' | 'swipe'
 
 const POLL_MS = 2000
@@ -87,6 +87,8 @@ const SOUND_FPS = 10
 const SOUND_JUMP = 2
 
 const sameSpot = (r: ReviewReaction, view: number, tile: number | undefined): boolean => r.view === view && r.tile === tile
+/** a draft card's frame on its file urls: a new frame is a new url, past the browser's cache of the old one */
+const frameTag = (x: ReviewItem | null | undefined): string => (x?.item.wip ? `?f=${x.item.wip.frame}` : '')
 
 /** what a reload must not lose, under keys of this repo: a blocked storage only loses persistence */
 const store = {
@@ -232,8 +234,10 @@ export class ReviewSt {
     whose: Move | null = null
     status: ShownStatus | null = null
     drafts: Record<string, Draft> = {}
-    /** the rectangle of the open card picked on the image, its index */
+    /** the rectangle of the open card picked, its index: its note box opens beside it */
     rect: number | null = null
+    /** the rectangle whose note box takes the focus once it shows: one just drawn, or picked on the image */
+    noteFocus: number | null = null
     /** the subject rings over the image (M) */
     marksOn = true
     /** the open card's active view, its index: the one last drawn on or picked, whose clip the keys drive */
@@ -242,9 +246,11 @@ export class ReviewSt {
     viewZoom: Record<number, Zoom> = {}
     /** the gallery tile shown large across the column, `<view>/<tile>` */
     bigTile: string | null = null
+    /** a draft card's past frame shown in place of its live one, an index of its history; null is now */
+    frame: number | null = null
     /** a card of options shown full, every view stacked, by id: his switch, this visit */
     full: Record<string, boolean> = {}
-    /** the option rows unfolded to their full view, by view index */
+    /** an option row he folded or unfolded, by view index; a row he never touched follows `rowOpen` */
     openRows: Record<number, boolean> = {}
     replies: Record<string, string> = {}
     private reading = new Set<string>()
@@ -300,8 +306,16 @@ export class ReviewSt {
     get headInViews(): boolean {
         return this.stacked || this.phone.on || this.choice
     }
+    /** an option row shows its full view under it: from the start for an image, a pair or a clip, never for a sound
+     *  (its strip is its view), else as he folded it */
+    rowOpen(i: number): boolean {
+        const own = this.openRows[i]
+        if (own !== undefined) return own
+        const v = this.open?.item.views[i]
+        return v !== undefined && (isGallery(v) || v.audio === undefined)
+    }
     toggleRow(i: number): void {
-        this.openRows = { ...this.openRows, [i]: !this.openRows[i] }
+        this.openRows = { ...this.openRows, [i]: !this.rowOpen(i) }
     }
 
     constructor(private readonly st: RepoSt) {
@@ -407,12 +421,14 @@ export class ReviewSt {
         this.board = on
     }
 
+    /** a card's file; a draft card's carries its frame, so each new frame is a new url the browser loads again */
     fileUrl(id: string, name: string): string {
-        return this.st.url(`/api/review/${id}/${name}`)
+        const x = this.open?.item.id === id ? this.open : this.list?.items.find((y) => y.item.id === id)
+        return `${this.st.url(`/api/review/${id}/${name}`)}${frameTag(x)}`
     }
 
     thumbUrl(x: ReviewItem, name: string): string {
-        return /\.(png|jpe?g|webp)$/.test(name) ? this.st.url(`/api/review/${x.item.id}/thumb/${name}`) : this.fileUrl(x.item.id, name)
+        return /\.(png|jpe?g|webp)$/.test(name) ? `${this.st.url(`/api/review/${x.item.id}/thumb/${name}`)}${frameTag(x)}` : this.fileUrl(x.item.id, name)
     }
 
     threadImageUrl(id: string, name: string): string {
@@ -621,6 +637,7 @@ export class ReviewSt {
             this.view = 0
             this.viewZoom = {}
             this.bigTile = null
+            this.frame = null
             this.openRows = {}
             // a link to a card on the phone opens the card, never the list
             if (id !== null && this.phone.on) this.phone.show('card')
@@ -635,6 +652,7 @@ export class ReviewSt {
             }
         }
         this.rect = null
+        this.noteFocus = null
         this.error = null
     }
 
@@ -662,6 +680,7 @@ export class ReviewSt {
         const t = this.clipKey ? { t: Math.round(this.clip.time * 1000) / 1000 } : {}
         this.edit((d) => ({ ...d, rects: [...d.rects, { ...r, comment: '', ...view, ...(side ? { side } : {}), ...t }] }))
         this.rect = this.draft.rects.length - 1
+        this.noteFocus = this.rect
     }
 
     setView(i: number): void {
@@ -694,6 +713,10 @@ export class ReviewSt {
         this.viewZoom = { ...this.viewZoom, [i]: z }
     }
 
+    setFrame(f: number | null): void {
+        this.frame = f
+    }
+
     toggleTile(view: number, tile: number): void {
         const k = `${view}/${tile}`
         this.bigTile = this.bigTile === k ? null : k
@@ -847,9 +870,11 @@ export class ReviewSt {
         this.marksOn = !this.marksOn
     }
 
-    /** a rectangle picked: its view comes on screen, and on a clip its frame, paused */
-    pickRect(i: number | null): void {
+    /** a rectangle picked: its view comes on screen, and on a clip its frame, paused; `focus` (a click on it on the
+     *  image) puts the cursor in its note box */
+    pickRect(i: number | null, focus = false): void {
         this.rect = i
+        this.noteFocus = focus ? i : null
         if (i === null) return
         const r = this.draft.rects[i]
         this.view = r?.view ?? 0
@@ -857,6 +882,11 @@ export class ReviewSt {
         this.clip.seek(r.t)
     }
 
+    /** the note box took the focus it was asked */
+    noteFocused(): void {
+        this.noteFocus = null
+    }
+
     setRectComment(i: number, comment: string): void {
         this.edit((d) => ({ ...d, rects: d.rects.map((r, j) => (j === i ? { ...r, comment } : r)) }))
     }
@@ -864,6 +894,7 @@ export class ReviewSt {
     removeRect(i: number): void {
         this.edit((d) => ({ ...d, rects: d.rects.filter((_, j) => j !== i) }))
         this.rect = null
+        this.noteFocus = null
     }
 
     setComment(comment: string): void {

package/src/serve/hub-app/review/review-views.tsx

@@ -1,10 +1,12 @@
 // the review page's middle column: every view of the open card stacked, each under its heading with the owner's reaction and
 // its zoom; a view is an image, a clip, a pair (side by side, the curtain, the onion skin, the after alone) or a
-// gallery of tiles. A drag on an image draws a rectangle, on a clip it pauses and keeps the frame's time. A choice, or
-// views that each play alone, show as thin option rows; the card's header sits on top when the page reads in one column
+// gallery of tiles. A drag on an image draws a rectangle, on a clip it pauses and keeps the frame's time; the picked
+// rectangle's note box opens beside it. A choice, or views that each play alone, show as option rows, each image and
+// clip shown full under its row; the card's header sits on top when the page reads in one column
 import { observer } from 'mobx-react-lite'
 import { useEffect, useRef, useState, type ReactNode } from 'react'
 import { isGallery, isPair, onFrame, STARS, thumbFileOf, verdictOf, viewName, type GalleryView, type MediaView, type Rect, type ReviewClip, type ReviewItem, type ReviewMark, type ReviewView, type Side } from '../../../review/model.ts'
+import { AutoText } from '../auto-text.tsx'
 import { blurOnEscape, Empty, FIT_ROOM, keepFocus, PAIR_NAMES, REACTIONS, secs } from './kit.tsx'
 import { CardHead } from './review-answer.tsx'
 import type { ClipSt } from './clip-st.ts'
@@ -20,11 +22,13 @@ export const ReviewImage = observer(({ rv }: { rv: ReviewSt }) => {
     const views = r.views
     const drawable = views.some((v) => !isGallery(v) && !v.clip && !v.audio)
     const rows = rv.rows
+    // a draft card's history is no view of its own: its frames cycle in place over the live one
+    const history = r.wip ? views.find(isGallery) : undefined
     return (
         <div className="rv-views">
             {rv.headInViews ? <CardHead rv={rv} x={x} /> : null}
             <div className="rv-viewsbar">
-                {views.length > 1 && !rows ? <JumpList rv={rv} /> : <span />}
+                {views.length > 1 && !rows && !history ? <JumpList rv={rv} /> : <span />}
                 <span className="rv-viewsctl">
                     {asOptionsCard(rv) ? (
                         <span className="seg" title="the options as thin rows, one below the other, or every view full">
@@ -49,7 +53,9 @@ export const ReviewImage = observer(({ rv }: { rv: ReviewSt }) => {
             {rows ? (
                 <div className="rv-opts">{views.map((v, i) => <OptionRow key={`${r.id}#${i}`} rv={rv} x={x} v={v} i={i} />)}</div>
             ) : (
-                views.map((v, i) => <ViewBlock key={`${r.id}#${i}`} rv={rv} id={r.id} v={v} i={i} many={views.length > 1} />)
+                views.map((v, i) => (v === history ? null : (
+                    <ViewBlock key={`${r.id}#${i}`} rv={rv} id={r.id} v={v} i={i} many={views.length > (history ? 2 : 1)} {...(i === 0 && history && isGallery(history) ? { frames: history } : {})} />
+                )))
             )}
             {views.length === 0 ? <TextOnly x={x} /> : null}
         </div>
@@ -59,8 +65,9 @@ export const ReviewImage = observer(({ rv }: { rv: ReviewSt }) => {
 /** the open card may show as rows: a choice, or views that each play alone (the switch shows while it shows full) */
 const asOptionsCard = (rv: ReviewSt): boolean => rv.rows || rv.full[rv.open?.item.id ?? ''] === true
 
-/** one option of a choice, or one view of a group, as a thin row: its number, ▶ and the clock, its label, a strip that
- *  scrubs it, its stars and « pick » (a choice) or OK, fix, no (a group), ✎ his word, ⤢ the full view under it */
+/** one option of a choice, or one view of a group, as a row: its number, ▶ and the clock, its label, a strip that
+ *  scrubs it, its stars and « pick » (a choice) or OK, fix, no (a group), ✎ his word, ⤢ folds or unfolds the full view
+ *  under it (an image or a clip shows it from the start) */
 const OptionRow = observer(({ rv, x, v, i }: { rv: ReviewSt; x: ReviewItem; v: ReviewView; i: number }) => {
     const [word, setWord] = useState(false)
     const id = x.item.id
@@ -71,7 +78,7 @@ const OptionRow = observer(({ rv, x, v, i }: { rv: ReviewSt; x: ReviewItem; v: R
     const choice = rv.choice
     const picked = rv.draft.pick === i
     const sent = verdictOf(x)?.pick === i
-    const unfolded = rv.openRows[i] === true
+    const unfolded = rv.rowOpen(i)
     const file = playable ? ('video' in playable.files ? playable.files.video : 'audio' in playable.files ? playable.files.audio : '') : ''
     const duration = playable?.clip?.duration ?? playable?.audio?.duration ?? 0
     const showWord = word || (reaction?.comment ?? '') !== ''
@@ -92,7 +99,7 @@ const OptionRow = observer(({ rv, x, v, i }: { rv: ReviewSt; x: ReviewItem; v: R
                 ) : null}
                 {c && playable ? (
                     <Strip clip={c} duration={duration} wave={playable.audio ? rv.fileUrl(id, playable.audio.wave) : undefined} />
-                ) : (
+                ) : unfolded ? null : (
                     <span className="rv-optthumb img" onClick={() => rv.toggleRow(i)} title="the full view"><img src={rv.thumbUrl(x, thumbFileOf(v))} alt="" draggable={false} /></span>
                 )}
                 {c ? <span className="rv-mono rv-opttime">{clock(c.time)} / {clock(duration)}</span> : null}
@@ -112,8 +119,8 @@ const OptionRow = observer(({ rv, x, v, i }: { rv: ReviewSt; x: ReviewItem; v: R
             </div>
             {media?.note ? <div className="rv-optnote">{media.note}</div> : null}
             {showWord ? (
-                <textarea className="rv-word" rows={1} placeholder="a word on this one" value={reaction?.comment ?? ''} autoFocus={word && !reaction?.comment}
-                    onKeyDown={blurOnEscape} onChange={(e) => rv.setReactionComment(i, undefined, e.currentTarget.value)} />
+                <AutoText className="rv-word" placeholder="a word on this one" value={reaction?.comment ?? ''} autoFocus={word && !reaction?.comment}
+                    onKeyDown={blurOnEscape} onText={(t) => rv.setReactionComment(i, undefined, t)} />
             ) : null}
             {c && playable?.audio ? <SoundEl clip={c} src={rv.fileUrl(id, file)} /> : null}
             {unfolded ? (
@@ -223,8 +230,11 @@ const JumpList = observer(({ rv }: { rv: ReviewSt }) => {
     )
 })
 
-/** one view: its label, its reaction and zoom, its image, pair, clip or gallery, then his word on it */
-const ViewBlock = observer(({ rv, id, v, i, many }: { rv: ReviewSt; id: string; v: ReviewView; i: number; many: boolean }) => {
+/** one view: its label, its reaction and zoom, its image, pair, clip or gallery, then his word on it; a draft card's
+ *  live view carries its history's frames, one shown in its place */
+const ViewBlock = observer(({ rv, id, v: live, i, many, frames }: { rv: ReviewSt; id: string; v: ReviewView; i: number; many: boolean; frames?: GalleryView }) => {
+    const past = frames && rv.frame !== null ? frames.gallery[rv.frame] : undefined
+    const v: ReviewView = past && !isGallery(live) ? { ...live, files: { image: past.file }, size: past.size } : live
     const reaction = rv.reactionOf(i)
     const media = isGallery(v) ? null : v
     const zoom = rv.zoomOf(i)
@@ -243,9 +253,25 @@ const ViewBlock = observer(({ rv, id, v, i, many }: { rv: ReviewSt; id: string;
                         onClick={() => rv.setViewZoom(i, zoom === 'fit' ? '1' : 'fit')}>{zoom === 'fit' ? '100 %' : 'Fit'}</button>
                 ) : null}
             </div>
+            {frames ? <FrameSlider rv={rv} frames={frames} /> : null}
             {isGallery(v) ? <Gallery rv={rv} id={id} v={v} view={i} /> : <MediaBody rv={rv} id={id} v={v} i={i} zoom={zoom} />}
-            <textarea className="rv-word" rows={1} placeholder={isGallery(v) ? 'a word on these images' : 'a word on this image'} value={reaction?.comment ?? ''}
-                onKeyDown={blurOnEscape} onChange={(e) => rv.setReactionComment(i, undefined, e.currentTarget.value)} />
+            <AutoText className="rv-word" placeholder={isGallery(v) ? 'a word on these images' : 'a word on this image'} value={reaction?.comment ?? ''}
+                onKeyDown={blurOnEscape} onText={(t) => rv.setReactionComment(i, undefined, t)} />
+        </div>
+    )
+})
+
+/** a draft card's frames over its live view: a slider and two arrows cycle them in place, the live one at the right end */
+const FrameSlider = observer(({ rv, frames }: { rv: ReviewSt; frames: GalleryView }) => {
+    const last = frames.gallery.length
+    const at = rv.frame ?? last
+    const go = (f: number): void => rv.setFrame(f >= last ? null : Math.max(0, f))
+    return (
+        <div className="rv-frames">
+            <button title="the frame before" disabled={at === 0} onMouseDown={keepFocus} onClick={() => go(at - 1)}>‹</button>
+            <input type="range" min={0} max={last} step={1} value={at} aria-label="the draft's frames" onChange={(e) => go(Number(e.currentTarget.value))} onMouseUp={(e) => e.currentTarget.blur()} />
+            <button title="the frame after" disabled={at === last} onMouseDown={keepFocus} onClick={() => go(at + 1)}>›</button>
+            <span className="rv-dim rv-small">{at === last ? 'now' : (frames.gallery[at]?.label ?? `frame ${at + 1}`)}</span>
         </div>
     )
 })
@@ -285,8 +311,8 @@ const Gallery = observer(({ rv, id, v, view }: { rv: ReviewSt; id: string; v: Ga
                     </div>
                     <div className="rv-tilelabel" title={t.label}>{t.label}</div>
                     <ReactionToggles rv={rv} view={view} tile={k} small />
-                    <textarea className="rv-word" rows={1} placeholder="a word" value={r?.comment ?? ''} onKeyDown={blurOnEscape}
-                        onChange={(e) => rv.setReactionComment(view, k, e.currentTarget.value)} />
+                    <AutoText className="rv-word" placeholder="a word" value={r?.comment ?? ''} onKeyDown={blurOnEscape}
+                        onText={(t) => rv.setReactionComment(view, k, t)} />
                 </div>
             )
         })}
@@ -309,7 +335,8 @@ const MediaBody = observer(({ rv, id, v, i, zoom }: { rv: ReviewSt; id: string;
         return (
             <div style={scroll}>
                 <div style={{ width: scale ? `${v.size.w * scale}px` : `min(100%, calc((100vh - ${room}px) * ${ratio}))`, margin: '0 auto' }}>
-                    <Compare c={rv.compare} base={rv.fileUrl(id, name)} mod={undefined} aspect={aspect} draw={(s) => <Marks rv={rv} src={s} side={undefined} view={i} />} />
+                    <Compare c={rv.compare} base={rv.fileUrl(id, name)} mod={undefined} aspect={aspect} draw={(s) => <Marks rv={rv} src={s} side={undefined} view={i} />}
+                        over={() => <RectNote rv={rv} view={i} sides={[undefined]} />} />
                     {bar}
                     <Downloads rv={rv} id={id} files={[{ file: name }]} />
                 </div>
@@ -334,7 +361,8 @@ const MediaBody = observer(({ rv, id, v, i, zoom }: { rv: ReviewSt; id: string;
             <div style={scroll}>
                 <div className="rv-pairgrid" style={{ width: scale ? `${v.size.w * scale * cols + 8 * (cols - 1)}px` : fitW, gridTemplateColumns: `repeat(${cols}, 1fr)` }}>
                     <Compare c={c} base={before} mod={after} names={PAIR_NAMES} aspect={aspect}
-                        draw={(s) => <Marks rv={rv} src={s} side={drawnSide(c.mode, s === before ? 'before' : 'after')} view={i} />} />
+                        draw={(s) => <Marks rv={rv} src={s} side={drawnSide(c.mode, s === before ? 'before' : 'after')} view={i} />}
+                        over={(srcs) => <RectNote rv={rv} view={i} sides={srcs.map((s) => drawnSide(c.mode, s === before ? 'before' : 'after'))} />} />
                 </div>
             </div>
             {bar ? <div style={{ width: fitW, margin: '0 auto' }}>{bar}</div> : null}
@@ -351,7 +379,7 @@ const SoundBody = ({ rv, id, v }: { rv: ReviewSt; id: string; v: MediaView }) =>
     if (!a) return null
     const rows = isPair(f) ? [{ label: 'before', file: f.before, wave: a.waveBefore ?? a.wave }, { label: 'after', file: f.after, wave: a.wave }] : [{ label: '', file: 'audio' in f ? f.audio : '', wave: a.wave }]
     return (
-        <div className="rv-sound">
+        <div className="rv-soundview">
             {rows.map((r) => (
                 <div key={r.file} className="rv-soundrow">
                     {r.label ? <div className="rv-dim">{r.label}</div> : null}
@@ -412,9 +440,11 @@ const PhonePair = observer(({ rv, view, bar, before, after, aspect, size, scale
             <div style={scale ? { overflow: 'auto', maxHeight: '70vh' } : undefined}>
                 <div style={{ width: scale ? `${size.w * scale}px` : '100%' }}>
                     {side === 'swipe' ? (
-                        <Compare c={c} base={before} mod={after} names={PAIR_NAMES} aspect={aspect} draw={(s) => <Marks rv={rv} src={s} side={s === before ? 'before' : 'after'} view={view} />} />
+                        <Compare c={c} base={before} mod={after} names={PAIR_NAMES} aspect={aspect} draw={(s) => <Marks rv={rv} src={s} side={s === before ? 'before' : 'after'} view={view} />}
+                            over={(srcs) => <RectNote rv={rv} view={view} sides={srcs.map((s) => (s === before ? 'before' : 'after'))} />} />
                     ) : (
-                        <Compare key={side} c={c} base={one} mod={undefined} aspect={aspect} draw={(s) => <Marks rv={rv} src={s} side={side} view={view} />} />
+                        <Compare key={side} c={c} base={one} mod={undefined} aspect={aspect} draw={(s) => <Marks rv={rv} src={s} side={side} view={view} />}
+                            over={() => <RectNote rv={rv} view={view} sides={[side]} />} />
                     )}
                     {bar}
                 </div>
@@ -458,27 +488,28 @@ function track(move: (e: PointerEvent) => void): void {
 }
 
 /** THE pair: side by side, the curtain clipping both images, the after over the before as an onion skin, or the
- *  after alone (the before while the pointer is over it). One image alone when `mod` is undefined */
-const Compare = observer(({ c, base, mod, names, aspect, draw }: { c: CompareSt; base: string; mod: string | undefined; names?: { base: string; mod: string }; aspect: string; draw: (src: string) => ReactNode }) => {
+ *  after alone (the before while the pointer is over it). One image alone when `mod` is undefined. `over` draws what
+ *  sits over a frame unclipped (the picked rectangle's note box), given the images that frame shows */
+const Compare = observer(({ c, base, mod, names, aspect, draw, over }: { c: CompareSt; base: string; mod: string | undefined; names?: { base: string; mod: string }; aspect: string; draw: (src: string) => ReactNode; over?: (srcs: string[]) => ReactNode }) => {
     const [peek, setPeek] = useState(false)
-    if (mod === undefined) return <Cell aspect={aspect} caption={null}><div className="rv-fill">{draw(base)}</div></Cell>
+    if (mod === undefined) return <Cell aspect={aspect} caption={null} over={over?.([base])}><div className="rv-fill">{draw(base)}</div></Cell>
     const n = names ?? PAIR_NAMES
     if (c.mode === 'side')
         return (
             <>
-                <Cell aspect={aspect} caption={n.base}><div className="rv-fill">{draw(base)}</div></Cell>
-                <Cell aspect={aspect} caption={n.mod} modCap><div className="rv-fill">{draw(mod)}</div></Cell>
+                <Cell aspect={aspect} caption={n.base} over={over?.([base])}><div className="rv-fill">{draw(base)}</div></Cell>
+                <Cell aspect={aspect} caption={n.mod} modCap over={over?.([mod])}><div className="rv-fill">{draw(mod)}</div></Cell>
             </>
         )
     if (c.mode === 'mod')
         return (
-            <Cell aspect={aspect} caption={peek ? n.base : n.mod} modCap={!peek} onPeek={setPeek}>
+            <Cell aspect={aspect} caption={peek ? n.base : n.mod} modCap={!peek} onPeek={setPeek} over={over?.([peek ? base : mod])}>
                 <div className="rv-fill">{draw(peek ? base : mod)}</div>
             </Cell>
         )
     const pct = Math.round(c.split * 100)
     return (
-        <Cell aspect={aspect} caption={<>{n.base} {c.mode === 'swipe' ? '◀ ▶' : '+'} <span className="rv-modcap">{n.mod}</span></>} swipe={c.mode === 'swipe' ? c : undefined}>
+        <Cell aspect={aspect} caption={<>{n.base} {c.mode === 'swipe' ? '◀ ▶' : '+'} <span className="rv-modcap">{n.mod}</span></>} swipe={c.mode === 'swipe' ? c : undefined} over={over?.([base, mod])}>
             <div className="rv-fill" style={c.mode === 'swipe' ? { clipPath: `inset(0 ${100 - pct}% 0 0)` } : undefined}>{draw(base)}</div>
             <div className="rv-fill" style={c.mode === 'swipe' ? { clipPath: `inset(0 0 0 ${pct}%)` } : { opacity: c.opacity }}>{draw(mod)}</div>
             {c.mode === 'swipe' ? <div className="rv-curtain" style={{ left: `${pct}%` }} /> : null}
@@ -486,8 +517,8 @@ const Compare = observer(({ c, base, mod, names, aspect, draw }: { c: CompareSt;
     )
 })
 
-/** one frame and its caption; the curtain's line follows the pointer */
-const Cell = ({ aspect, caption, modCap, swipe, onPeek, children }: { aspect: string; caption: ReactNode; modCap?: boolean; swipe?: CompareSt | undefined; onPeek?: (on: boolean) => void; children: ReactNode }) => {
+/** one frame and its caption; the curtain's line follows the pointer; `over` sits on the frame, free of its clip */
+const Cell = ({ aspect, caption, modCap, swipe, onPeek, over, children }: { aspect: string; caption: ReactNode; modCap?: boolean; swipe?: CompareSt | undefined; onPeek?: (on: boolean) => void; over?: ReactNode; children: ReactNode }) => {
     const frame = useRef<HTMLDivElement>(null)
     const down = (e: React.PointerEvent): void => {
         const el = frame.current
@@ -502,9 +533,12 @@ const Cell = ({ aspect, caption, modCap, swipe, onPeek, children }: { aspect: st
     }
     return (
         <div className="rv-cell">
-            <div ref={frame} className={`rv-frame${swipe ? ' swipe' : ''}`} style={{ aspectRatio: aspect }} onPointerDown={down}
-                onMouseEnter={() => onPeek?.(true)} onMouseLeave={() => onPeek?.(false)}>
-                {children}
+            <div className="rv-framebox">
+                <div ref={frame} className={`rv-frame${swipe ? ' swipe' : ''}`} style={{ aspectRatio: aspect }} onPointerDown={down}
+                    onMouseEnter={() => onPeek?.(true)} onMouseLeave={() => onPeek?.(false)}>
+                    {children}
+                </div>
+                {over ? <div className="rv-over">{over}</div> : null}
             </div>
             {caption != null ? <div className={`rv-caption${modCap ? ' mod' : ''}`}>{caption}</div> : null}
         </div>
@@ -578,7 +612,7 @@ const Marks = observer(({ rv, src, side, view }: { rv: ReviewSt; src: string; si
             {clip ? <ClipVideo key={src} clip={c} src={src} /> : <img src={src} alt="" draggable={false} className="rv-markimg" />}
             {shown && rings.length > 0 ? <Rings marks={rings} w={shown.size.w} h={shown.size.h} /> : null}
             {rects.map(([r, i]) => (
-                <RectMark key={i} r={r} n={i + 1} on={rv.rect === i} faint={!onIts(r)} at={clip && r.t !== undefined ? secs(r.t) : undefined} pick={() => rv.pickRect(i)} />
+                <RectMark key={i} r={r} n={i + 1} on={rv.rect === i} faint={!onIts(r)} at={clip && r.t !== undefined ? secs(r.t) : undefined} pick={() => rv.pickRect(i, true)} />
             ))}
             {drag ? <div className="rv-drag" style={pct(box(drag))} /> : null}
         </div>
@@ -600,11 +634,46 @@ const Rings = ({ marks, w, h }: { marks: readonly ReviewMark[]; w: number; h: nu
 /** a rectangle of his; on a clip, faint and dashed away from its frame, its time on its number */
 const RectMark = ({ r, n, on, faint, at, pick }: { r: Rect; n: number; on: boolean; faint: boolean; at: string | undefined; pick: () => void }) => (
     <div className={`rv-rect${on ? ' on' : ''}${faint ? ' faint' : ''}`} style={pct(r)} title={r.comment || `rectangle ${n}`}
-        onPointerDown={(e) => { e.stopPropagation(); pick() }}>
+        onPointerDown={(e) => { e.stopPropagation(); pick() }} onMouseDown={keepFocus}>
         <span className="rv-rectn">{n}{at ? ` · ${at}` : ''}</span>
     </div>
 )
 
+/** the picked rectangle's note box, beside it on the image: under it, or over it when it sits low, focused once drawn
+ *  or clicked. Enter or Escape closes it (the rectangle stays), Shift Enter is a new line; `sides` are the sides the
+ *  frame shows */
+const RectNote = observer(({ rv, view, sides }: { rv: ReviewSt; view: number; sides: readonly (Side | undefined)[] }) => {
+    const box = useRef<HTMLTextAreaElement | null>(null)
+    const i = rv.rect
+    const r = i === null ? undefined : rv.draft.rects[i]
+    const here = i !== null && r !== undefined && (r.view ?? 0) === view && sides.includes(r.side)
+    const focus = here && rv.noteFocus === i
+    useEffect(() => {
+        if (!focus || box.current === null) return
+        box.current.focus()
+        rv.noteFocused()
+    }, [focus, rv])
+    if (!here) return null
+    const below = r.y + r.h <= NOTE_LOW || r.y < 1 - NOTE_LOW
+    const place = below ? { top: `${(r.y + r.h) * 100}%` } : { bottom: `${(1 - r.y) * 100}%` }
+    return (
+        <div className={`rv-note${below ? ' below' : ' above'}`} style={{ ...place, ['--nx' as string]: `${r.x * 100}%` }} onPointerDown={(e) => e.stopPropagation()}>
+            <span className="rv-noten">{i + 1}{r.t !== undefined ? ` · ${secs(r.t)}` : ''}</span>
+            <AutoText el={(t) => (box.current = t)} placeholder="what is wrong here · Enter closes" value={r.comment}
+                onText={(t) => rv.setRectComment(i, t)}
+                onKeyDown={(e) => {
+                    if ((e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) || e.key === 'Escape') {
+                        e.preventDefault()
+                        rv.pickRect(null)
+                    }
+                }} />
+            <button className="ghost rv-x" title="delete this rectangle" aria-label="delete this rectangle" onMouseDown={keepFocus} onClick={() => rv.removeRect(i)}>✕</button>
+        </div>
+    )
+})
+/** a rectangle whose bottom is lower than this share of the image opens its note over it, when there is room above */
+const NOTE_LOW = 0.78
+
 // ── a clip ──
 
 /** one video of the open view, driven by the view's one clock; muted until the sound button, inline; looping, or at its

package/src/serve/hub-app/review/trailer-page.tsx

@@ -4,6 +4,7 @@
 import { observer } from 'mobx-react-lite'
 import { Fragment, useEffect, useRef, useState, type ReactNode } from 'react'
 import { Group, Panel, Separator } from 'react-resizable-panels'
+import { AutoText } from '../auto-text.tsx'
 import { clock, cutsByRecent, shotAt, type CutInfo, type TrailerNote } from '../../../review/trailer-model.ts'
 import { editorHref } from '../check-words.ts'
 import { renderMd } from '../md.ts'
@@ -271,7 +272,7 @@ const DraftBox = observer(({ tr }: { tr: TrailerSt }) => {
                     <span className="tr-dim tr-small">click the image to pin a point</span>
                 )}
             </div>
-            <textarea autoFocus rows={3} placeholder="What is wrong, what you want instead…" value={d.text} onChange={(e) => tr.setDraftText(e.currentTarget.value)}
+            <AutoText autoFocus rows={3} placeholder="What is wrong, what you want instead…" value={d.text} onText={(t) => tr.setDraftText(t)}
                 onKeyDown={(e) => {
                     if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
                         e.preventDefault()
@@ -362,7 +363,7 @@ const NoteCard = observer(({ tr, n: p }: { tr: TrailerSt; n: PlacedNote }) => {
             {on ? <Still tr={tr} n={n} w="100%" /> : null}
             {editing ? (
                 <div className="tr-edit">
-                    <textarea autoFocus rows={3} value={editing.text} onChange={(e) => tr.setEditText(e.currentTarget.value)} onKeyDown={enterSaves(() => void tr.saveEdit(), () => tr.cancelEdit())} />
+                    <AutoText autoFocus rows={3} value={editing.text} onText={(t) => tr.setEditText(t)} onKeyDown={enterSaves(() => void tr.saveEdit(), () => tr.cancelEdit())} />
                     <div className="tr-dim tr-small">Enter saves · Escape drops it · on its frame, a click moves the pin</div>
                 </div>
             ) : null}
@@ -374,8 +375,8 @@ const NoteCard = observer(({ tr, n: p }: { tr: TrailerSt; n: PlacedNote }) => {
             ) : null}
             {closing ? (
                 <div className="tr-edit">
-                    <textarea autoFocus rows={2} placeholder={closing.state === 'done' ? 'The commit, or what was done (optional)' : 'Why (optional)'} value={closing.reply}
-                        onChange={(e) => tr.setReply(e.currentTarget.value)} onKeyDown={enterSaves(() => void tr.confirmClose(), () => tr.cancelClose())} />
+                    <AutoText autoFocus rows={2} placeholder={closing.state === 'done' ? 'The commit, or what was done (optional)' : 'Why (optional)'} value={closing.reply}
+                        onText={(t) => tr.setReply(t)} onKeyDown={enterSaves(() => void tr.confirmClose(), () => tr.cancelClose())} />
                     <div className="tr-draftbtns">
                         <button onClick={() => tr.cancelClose()}>Cancel</button>
                         <button className="primary" onClick={() => void tr.confirmClose()}>{closing.state === 'done' ? 'Mark done' : 'Not doing it'}</button>

package/src/serve/hub-app/review.css

@@ -120,6 +120,9 @@
 .rv-raisedimg{display:block;max-width:100%;max-height:320px;margin-top:var(--s2);border-radius:4px}
 .rv-pairgrid{display:grid;gap:var(--s2)}
 .rv-cell{display:flex;flex-direction:column;align-items:center;gap:var(--s0);min-width:0}
+/* the frame's box: what sits over the frame free of its clip (the note box) shares its size */
+.rv-framebox{position:relative;width:100%}
+.rv-over{position:absolute;inset:0;z-index:4;pointer-events:none}
 .rv-frame{position:relative;width:100%;max-width:100%;border-radius:4px;border:1px solid var(--line);overflow:hidden;
  background:repeating-conic-gradient(var(--chk1) 0 25%,var(--chk2) 0 50%) 0 0/16px 16px}
 .rv-frame.swipe{cursor:ew-resize;touch-action:none}
@@ -142,6 +145,13 @@
 .rv-rectn{position:absolute;left:-2px;top:-2px;transform:translateY(-100%);padding:0 var(--s1);border-radius:3px;background:var(--warn);color:var(--bg);font-size:11px;font-weight:800;line-height:16px;white-space:nowrap}
 .rv-rect.on .rv-rectn{background:var(--blue)}
 .rv-drag{position:absolute;border:2px dashed var(--warn)}
+/* the picked rectangle's note box, in the picked rectangle's blue: under it, or over it (clearing its number) */
+.rv-note{position:absolute;left:clamp(0px,var(--nx),calc(100% - min(300px,100%)));width:min(300px,100%);pointer-events:auto;display:flex;gap:var(--s1);align-items:flex-start;
+ padding:var(--s1);border-radius:6px;border:2px solid var(--blue);background:var(--panel);box-shadow:0 2px 10px var(--shadow)}
+.rv-note.below{margin-top:var(--s1)}
+.rv-note.above{margin-bottom:var(--s4)}
+.rv-noten{flex:none;padding:0 var(--s1);border-radius:3px;background:var(--blue);color:var(--bg);font-size:11px;font-weight:800;line-height:18px;white-space:nowrap}
+.rv-note textarea{flex:1;min-width:0}
 .rv-downloads{display:flex;gap:var(--s2);justify-content:flex-end;margin-top:var(--s1)}
 .rv-dl{font-size:11.5px;text-decoration:none}
 .rv-gallery{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:flex-start}
@@ -153,8 +163,12 @@
 .rv-tileimg img{display:block;width:100%;height:100%;object-fit:contain}
 .rv-tilelabel{font-size:11px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .rv-clipbar{display:flex;gap:var(--s1);align-items:center;margin-top:var(--s2)}
+.rv-frames{display:flex;gap:var(--s1);align-items:center;margin-bottom:var(--s2)}
+.rv-frames input{flex:1;min-width:60px}
+.rv-frames button{padding:0 var(--s2);line-height:22px}
 .rv-clipbar button{padding:0 var(--s2);line-height:22px}
 .rv-scrub{flex:1;min-width:60px}
+.rv-clipbar .rv-mono{flex:none;white-space:nowrap}
 .rv-sound{display:inline-flex;align-items:center;gap:var(--s1)}
 .rv-sound button{padding:0 var(--s1);line-height:22px}
 .rv-sound input{width:72px}
@@ -223,7 +237,7 @@
 .rv-linkedtitle{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
 .rv-outgoing,.rv-messages{display:flex;flex-direction:column;gap:var(--s1)}
 .rv-outrow{display:flex;gap:var(--s1);align-items:flex-start}
-.rv-outrow textarea{flex:1;min-height:44px}
+.rv-outrow textarea{flex:1}
 .rv-outbadge{flex:none;max-width:170px;margin-top:var(--s0);font-size:11px;padding:0 var(--s2);line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--tone,var(--ink));border-color:color-mix(in srgb,var(--tone,var(--line)) 50%,var(--line))}
 .rv-outbadge.rect{--tone:var(--warn)}
@@ -251,6 +265,8 @@
 .rv-verdictbar .rv-verdict{flex:1;text-align:center;font-size:14px;padding:var(--s2) var(--s1);color:var(--tone)}
 .rv-verdictbar .rv-verdict.chosen{color:var(--bg)}
 .rv-phone .rv-views{gap:var(--s3)}
+/* the views' labels take the phone's whole width, the zoom under them */
+.rv-phone .rv-jumps{flex:1 1 100%}
 .rv-phone .rv-toast{top:var(--s4);bottom:auto}
 /* a row on a phone: ▶, the label and the time on one line, the strip and the acts under them */
 .rv-phone .rv-optrow{flex-wrap:wrap;row-gap:var(--s1)}
@@ -261,6 +277,8 @@
 .rv-phone .rv-stars button{font-size:22px;padding:0 var(--s1)}
 .rv-phone .rv-optplay{width:40px;height:34px}
 .rv-phone .rv-optnote,.rv-phone .rv-opt .rv-word{margin-left:0;width:100%}
+/* a phone zooms the page into a field whose text is under 16px: the field takes 16px instead */
+.rv-phone textarea,.tr-phone textarea{font-size:16px}
 
 /* ── the trailer page ── */
 .tr-cuts{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s3)}
@@ -385,5 +403,5 @@
 .rv-parttext{font-size:13px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
 .rv-anim select{font-size:12px}
 /* a sound view (review-views.tsx SoundBody): its waveform over the player, a row a side on a pair */
-.rv-sound{display:flex;flex-direction:column;gap:var(--s2)}
+.rv-soundview{display:flex;flex-direction:column;gap:var(--s2)}
 .rv-soundrow{display:flex;flex-direction:column;gap:var(--s1);background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:var(--s2)}