rvlib-shipkit 2.7.0 → 2.9.0

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 {