rvlib-shipkit 2.2.0 → 2.3.0

package/src/serve/hub-app/review/kind-view.tsx

@@ -0,0 +1,171 @@
+// what the repo's review unit says of the open item, drawn from DATA the hub computed (review/project.ts viewOfItem): its
+// kind's facts, links, a text or its change as a diff, and « live », the kind's url in a frame, off until he opens it;
+// and a pair's animation to download. The page never runs the repo's code
+import { makeAutoObservable, runInAction } from 'mobx'
+import { observer } from 'mobx-react-lite'
+import { useEffect } from 'react'
+import { isGallery, isPair, viewName, type ReviewItem } from '../../../review/model.ts'
+import type { Fact, Link, ViewText } from '../../../review/unit.ts'
+
+/** where an item's files and routes answer under the repo's base: the review page's own url maker */
+interface Urls {
+    fileUrl(id: string, name: string): string
+}
+
+export interface KindData {
+    facts: Fact[]
+    links: Link[]
+    live: string | null
+    text: ViewText | null
+}
+
+/** each item's data view, read once an item opens and again when its thread moves; « live » stays as he left it */
+export class KindViewSt {
+    views = new Map<string, KindData | { error: string }>()
+    live = false
+    anim = { view: 0, mode: 'fade', format: 'mp4', labels: 'en' }
+
+    constructor(private readonly st: Urls) {
+        try {
+            this.live = localStorage.getItem('rv.kindLive') === '1'
+            const a = JSON.parse(localStorage.getItem('rv.anim') ?? 'null') as Partial<KindViewSt['anim']> | null
+            if (a) this.anim = { ...this.anim, ...a, view: 0 }
+        } catch {
+            // a private window: the defaults
+        }
+        makeAutoObservable<this, 'st'>(this, { st: false })
+    }
+
+    /** the view of item `x`, read when its stamp (its last message) moved */
+    read(x: ReviewItem): void {
+        const key = `${x.item.id}@${x.thread.at(-1)?.id ?? ''}`
+        if (this.views.has(key)) return
+        this.views.set(key, { facts: [], links: [], live: null, text: null })
+        void fetch(this.st.fileUrl(x.item.id, 'view'))
+            .then(async (r) => (r.ok ? ((await r.json()) as KindData) : { error: ((await r.json().catch(() => ({}))) as { error?: string }).error ?? `HTTP ${r.status}` }))
+            .catch((e: Error) => ({ error: e.message }))
+            .then((v) => runInAction(() => this.views.set(key, v)))
+    }
+
+    of(x: ReviewItem): KindData | { error: string } | undefined {
+        return this.views.get(`${x.item.id}@${x.thread.at(-1)?.id ?? ''}`)
+    }
+
+    toggleLive(): void {
+        this.live = !this.live
+        try {
+            localStorage.setItem('rv.kindLive', this.live ? '1' : '0')
+        } catch {
+            // kept for this page only
+        }
+    }
+
+    setAnim(k: 'view' | 'mode' | 'format' | 'labels', v: string): void {
+        this.anim = { ...this.anim, [k]: k === 'view' ? Number(v) : v }
+        try {
+            localStorage.setItem('rv.anim', JSON.stringify(this.anim))
+        } catch {
+            // kept for this page only
+        }
+    }
+
+    animUrl(x: ReviewItem, view: number): string {
+        const a = this.anim
+        return `${this.st.fileUrl(x.item.id, 'anim')}?view=${view}&mode=${a.mode}&format=${a.format}&labels=${a.labels}`
+    }
+}
+
+const held = new WeakMap<Urls, KindViewSt>()
+const kindViewOf = (st: Urls): KindViewSt => {
+    let k = held.get(st)
+    if (!k) held.set(st, (k = new KindViewSt(st)))
+    return k
+}
+
+/** a line diff of two texts: each line kept, gone or new */
+function diffLines(before: string, after: string): { t: ' ' | '-' | '+'; line: string }[] {
+    const a = before.split('\n')
+    const b = after.split('\n')
+    const n = a.length
+    const m = b.length
+    const lcs: number[][] = Array.from({ length: n + 1 }, () => new Array<number>(m + 1).fill(0))
+    for (let i = n - 1; i >= 0; i--) for (let j = m - 1; j >= 0; j--) lcs[i]![j] = a[i] === b[j] ? lcs[i + 1]![j + 1]! + 1 : Math.max(lcs[i + 1]![j]!, lcs[i]![j + 1]!)
+    const out: { t: ' ' | '-' | '+'; line: string }[] = []
+    let i = 0
+    let j = 0
+    while (i < n && j < m) {
+        if (a[i] === b[j]) out.push({ t: ' ', line: a[i++]! }), j++
+        else if (lcs[i + 1]![j]! >= lcs[i]![j + 1]!) out.push({ t: '-', line: a[i++]! })
+        else out.push({ t: '+', line: b[j++]! })
+    }
+    while (i < n) out.push({ t: '-', line: a[i++]! })
+    while (j < m) out.push({ t: '+', line: b[j++]! })
+    return out
+}
+
+const TONE = { ' ': 'var(--dim)', '-': 'var(--red, #e5484d)', '+': 'var(--green, #46a758)' } as const
+
+/** the kind's data view of the open item, under its facts */
+export const KindView = observer(({ app, x }: { app: Urls; x: ReviewItem }) => {
+    const k = kindViewOf(app)
+    const last = x.thread.at(-1)?.id
+    useEffect(() => k.read(x), [k, x, last])
+    const v = k.of(x)
+    if (v === undefined) return null
+    if ('error' in v) return <div className="rv-err rv-pre">the repo's view of this item: {v.error}</div>
+    const t = v.text
+    return (
+        <div className="rv-kindview">
+            {v.facts.length > 0 ? (
+                <div className="rv-facts">
+                    {v.facts.map((f, i) => (
+                        <div key={i} className="rv-fact"><span className="rv-factl">{f.label}</span><span className="rv-factv">{f.value}</span></div>
+                    ))}
+                </div>
+            ) : null}
+            {v.links.length > 0 ? (
+                <div className="rv-fact">
+                    {v.links.map((l) => <a key={l.url} href={l.url} target="_blank" rel="noreferrer">{l.label}</a>)}
+                </div>
+            ) : null}
+            {t !== null && 'text' in t ? <pre className="rv-pre rv-kindtext">{t.text}</pre> : null}
+            {t !== null && 'before' in t ? (
+                <pre className="rv-kindtext">
+                    {diffLines(t.before, t.after).map((d, i) => (
+                        <div key={i} style={{ color: TONE[d.t] }}>{d.t} {d.line}</div>
+                    ))}
+                </pre>
+            ) : null}
+            {v.live !== null ? (
+                <div>
+                    <button className="ghost" onClick={() => k.toggleLive()}>{k.live ? 'hide live' : 'live'}</button>
+                    {k.live ? <iframe title="live" src={v.live} style={{ width: '100%', aspectRatio: '16 / 10', border: '1px solid var(--line)', borderRadius: 3, marginTop: 6 }} /> : null}
+                </div>
+            ) : null}
+        </div>
+    )
+})
+
+/** a pair of images as a looping animation to download: the mode, the format, the corner labels */
+export const AnimPanel = observer(({ app, x }: { app: Urls; x: ReviewItem }) => {
+    const pairs = x.item.views.flatMap((v, i) => (!isGallery(v) && isPair(v.files) && !v.clip && !v.audio ? [{ i, name: viewName(v, i) }] : []))
+    if (pairs.length === 0) return null
+    const k = kindViewOf(app)
+    const a = k.anim
+    const view = pairs.some((p) => p.i === a.view) ? a.view : (pairs[0]?.i ?? 0)
+    const pick = (key: 'view' | 'mode' | 'format' | 'labels', options: [string, string][], value: string) => (
+        <select value={value} onChange={(e) => k.setAnim(key, e.currentTarget.value)}>
+            {options.map(([v, l]) => <option key={v} value={v}>{l}</option>)}
+        </select>
+    )
+    return (
+        <div className="rv-fact rv-anim" style={{ flexWrap: 'wrap' }}>
+            <span className="rv-factl">animation</span>
+            {pairs.length > 1 ? pick('view', pairs.map((p) => [String(p.i), p.name]), String(view)) : null}
+            {pick('mode', [['cut', 'cut'], ['fade', 'fade'], ['wipe', 'wipe']], a.mode)}
+            {pick('format', [['mp4', 'MP4'], ['gif', 'GIF']], a.format)}
+            {pick('labels', [['en', 'EN'], ['fr', 'FR'], ['none', 'no labels']], a.labels)}
+            <a href={k.animUrl(x, view)} download>download</a>
+        </div>
+    )
+})

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

@@ -0,0 +1,113 @@
+// the review page's shared kit: a status's tone class, the verdicts and reactions as rows, the lane tag, the rework
+// spinner, who listens, the thumbnail. Colours come from review.css, which reads hub.css tokens
+import { observer } from 'mobx-react-lite'
+import { useEffect, useState } from 'react'
+import { firstView, thumbFileOf, type ReviewItem, type ReviewStatus, type ShownStatus, type Side } from '../../../review/model.ts'
+import type { ReviewSt } from './review-st.ts'
+
+/** a status's tone, as a class review.css colours: its tint, its line, its badge */
+export const toneOf = (s: ShownStatus): string => `st-${s}`
+
+/** the verdicts the owner gives, in the order of their buttons */
+export const VERDICTS: { status: ReviewStatus; label: string; short: string; key: string; glyph: string }[] = [
+    { status: 'approved', label: 'Approve', short: 'Approve', key: 'V', glyph: '✓' },
+    { status: 'approved-with-fix', label: 'OK with a fix', short: 'Fix', key: 'F', glyph: '⚒' },
+    { status: 'rejected', label: 'Reject', short: 'Reject', key: 'R', glyph: '✕' },
+    { status: 'archived', label: 'Archive, I will answer later, another way', short: 'Later', key: 'A', glyph: '▤' },
+]
+
+/** the owner's reaction to a view or a tile, in the order of the toggles */
+export const REACTIONS: { status: ReviewStatus; label: string; tip: string; glyph: string }[] = [
+    { status: 'approved', label: 'OK', tip: 'this image is right', glyph: '✓' },
+    { status: 'approved-with-fix', label: 'Fix', tip: 'almost: a fix', glyph: '⚒' },
+    { status: 'rejected', label: 'No', tip: 'this image is wrong', glyph: '✕' },
+]
+
+export const PAIR_NAMES = { base: 'before', mod: 'after' }
+export const SIDE_LABEL: Record<Side, string> = { before: 'before', after: 'after' }
+
+export const when = (iso: string): string => new Date(iso).toLocaleString(undefined, { dateStyle: 'short', timeStyle: 'short' })
+/** `02/10 22:39` */
+export const short = (iso: string): string => new Date(iso).toLocaleString(undefined, { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' })
+export const cap = (t: string): string => t.charAt(0).toUpperCase() + t.slice(1)
+/** `1.25 s` */
+export const secs = (t: number): string => `${t.toFixed(2)} s`
+
+/** the room above and below a fitted image: a tall one stops there, so it shows whole */
+export const FIT_ROOM = 190
+
+/** keeps the focus where it was: a click on a bar never takes the keys V, R, N or Space */
+export const keepFocus = (e: React.MouseEvent): void => e.preventDefault()
+
+/** Escape leaves a text field, so V, R and N work again */
+export const blurOnEscape = (e: React.KeyboardEvent<HTMLElement>): void => {
+    if (e.key === 'Escape') e.currentTarget.blur()
+}
+
+/** a lane's colour, hashed from its name: one lane always one colour, neighbours far apart on the wheel */
+export function laneColor(lane: string): string {
+    let h = 2166136261
+    for (let i = 0; i < lane.length; i++) h = Math.imul(h ^ lane.charCodeAt(i), 16777619)
+    return `hsl(${Math.round(((h >>> 0) * 137.508) % 360)} 55% 58%)`
+}
+
+export const LaneTag = ({ lane }: { lane: string }) => (
+    <span className="rv-lane" title={`lane ${lane}`} style={{ ['--lane' as string]: laneColor(lane) }}>
+        {lane}
+    </span>
+)
+
+export const AutoTag = ({ rule }: { rule: string }) => (
+    <span className="rv-auto" title={`raised by the auto rule ${rule}`}>
+        auto
+    </span>
+)
+
+/** a lane reworking the card: a slow spinner and « in work · L147 » in the lane's colour; nothing when nobody does */
+export const Rework = observer(({ rv, x }: { rv: ReviewSt; x: ReviewItem }) => {
+    const r = rv.reworkOf(x)
+    const [, redraw] = useState(0)
+    const until = r?.until
+    useEffect(() => {
+        if (until === undefined) return
+        const t = setTimeout(() => redraw((n) => n + 1), Math.max(0, until - Date.now()) + 1000)
+        return () => clearTimeout(t)
+    }, [until])
+    if (!r) return null
+    return (
+        <div className="rv-reworkrow">
+            <span className="rv-rework" style={{ ['--lane' as string]: laneColor(r.lane) }} title={`${r.lane} reworks this card since ${when(r.since)}`}>
+                <span className="rv-spin" />
+                in work · {r.lane}
+            </span>
+        </div>
+    )
+})
+
+/** who listens: the pid of each live `sk review watch` that reads his answer on these cards, or « nobody listens » */
+export const Listeners = observer(({ rv, cards }: { rv: ReviewSt; cards: readonly ReviewItem[] }) => {
+    const ws = rv.listenersOf(cards)
+    const on = ws.length > 0
+    return (
+        <span
+            className={`rv-listen${on ? ' on' : ''}`}
+            title={
+                on
+                    ? ws.map((w) => `sk review watch, pid ${w.pid}, ${w.lane ? `lane ${w.lane}` : w.session ? `session ${w.session.slice(0, 8)}` : 'every card'}, since ${when(w.started)}`).join('\n')
+                    : 'no sk review watch reads these cards: your answer will wait'
+            }
+        >
+            ◉ {on ? ws.map((w) => w.pid).join(' · ') : 'nobody listens'}
+        </span>
+    )
+})
+
+/** an item's thumbnail: its first view's image, else a speech mark (a note with no image) */
+export const ThumbOf = ({ rv, x }: { rv: ReviewSt; x: ReviewItem }) => {
+    const first = firstView(x.item)
+    if (!first) return <div className="rv-thumbnone">✎</div>
+    return <img className="rv-thumbimg" src={rv.thumbUrl(x, thumbFileOf(first))} alt="" loading="lazy" />
+}
+
+/** the page's empty pane: one line of dim words */
+export const Empty = ({ text }: { text: string }) => <div className="rv-empty">{text}</div>

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

@@ -0,0 +1,239 @@
+// the review page's right column: the status line, the card's facts, the linked cards, what goes to the agent, the
+// verdicts (the phone's in a bar under the thumb), then the thread's conversation and his reply box
+import { observer } from 'mobx-react-lite'
+import { aboutText, placeText, STATUS_LABEL, stateOf, verdictOf, viewName, withdrawnOf, type ReviewItem, type ReviewStatus, type ShownStatus } from '../../../review/model.ts'
+import { renderMd } from '../md.ts'
+import { AutoTag, blurOnEscape, cap, Empty, LaneTag, Listeners, REACTIONS, Rework, secs, short, SIDE_LABEL, ThumbOf, toneOf, VERDICTS, when } from './kit.tsx'
+import { AnimPanel, KindView } from './kind-view.tsx'
+import type { ReviewSt } from './review-st.ts'
+
+export const ReviewForm = observer(({ rv }: { rv: ReviewSt }) => {
+    const x = rv.open
+    if (!x) return <Empty text="The open card, its comment and its answer." />
+    const r = x.item
+    const status = rv.statusOf(x)
+    const draft = rv.draft
+    const sent = verdictOf(x)
+    return (
+        <div className="rv-form">
+            <StatusLine rv={rv} x={x} status={status} />
+            <h3 className="rv-title">{r.title}</h3>
+            {r.views.length > 0 && r.what ? <div className="md rv-what" dangerouslySetInnerHTML={{ __html: renderMd(r.what) }} /> : null}
+            {r.keeps ? <div className="rv-keeps"><b>keeps:</b> {r.keeps}</div> : null}
+            {r.why ? <div className="rv-dim rv-pre">another subject: {r.why}</div> : null}
+            <div className="rv-facts">
+                <Fact label="subject">{aboutText(r, rv.spec ?? undefined)}</Fact>
+                {r.commit ? <Fact label="commit"><span className="rv-mono">{r.commit}</span></Fact> : null}
+                <Fact label="id"><span className="rv-mono rv-dim">{r.id}</span></Fact>
+            </div>
+            <KindView app={rv} x={x} />
+            <AnimPanel app={rv} x={x} />
+            {rv.newer.map((y) => <Linked key={y.item.id} rv={rv} label="replaced by" id={y.item.id} item={y} />)}
+            {r.supersedes && rv.history.length === 0 ? <Linked rv={rv} label="replaces" id={r.supersedes} item={null} /> : null}
+            {rv.answered.map((y) => <Linked key={y.item.id} rv={rv} label="answers" id={y.item.id} item={y} />)}
+            {rv.answeredBy ? <Linked rv={rv} label="answered by" id={rv.answeredBy.item.id} item={rv.answeredBy} /> : null}
+            {rv.history.length > 0 ? <div className="rv-divider">earlier versions</div> : null}
+            {rv.history.map((y, i) => <Linked key={y.item.id} rv={rv} label={`v${rv.history.length - i}`} id={y.item.id} item={y} />)}
+            <Outgoing rv={rv} />
+            <label className="rv-label">Comment</label>
+            <textarea className="rv-comment" rows={3} placeholder="the overall word" value={draft.comment} onKeyDown={blurOnEscape} onChange={(e) => rv.setComment(e.currentTarget.value)} />
+            <div className="rv-listenrow"><span className="rv-dim">who reads your answer</span><Listeners rv={rv} cards={[x]} /></div>
+            {!rv.phone.on && !r.wip && r.origin.by === 'agent' ? (
+                <div className="rv-verdicts">
+                    {VERDICTS.map((v) => <VerdictButton key={v.status} v={v} sent={sent?.status} busy={rv.busy} send={() => void rv.submit(v.status)} />)}
+                </div>
+            ) : null}
+            <Messages rv={rv} />
+            <div className="rv-formfoot">
+                <button className="ghost" onClick={() => rv.nextPending()}>next waiting (N)</button>
+                {rv.dirty && sent ? <button className="ghost" onClick={() => rv.dropDraft()}>back to the answer sent</button> : null}
+            </div>
+            {sent && rv.dirty ? <div className="rv-dim">The changes are not sent yet: a verdict sends them.</div> : null}
+            {!sent && rv.dirty ? <div className="rv-dim">Draft kept in this browser until it is sent.</div> : null}
+            {rv.error ? <div className="rv-err rv-pre">{rv.error}</div> : null}
+        </div>
+    )
+})
+
+const Fact = ({ label, children }: { label: string; children: React.ReactNode }) => (
+    <div className="rv-fact"><span className="rv-factl">{label}</span><span className="rv-factv">{children}</span></div>
+)
+
+const RAISED_NOW: Record<string, string> = {
+    new: 'waiting for a dispatcher',
+    question: 'a question for you',
+    blocked: 'blocked: it waits on your decision',
+}
+
+/** the answer at a glance, in its status colour: the verdict sent and its time, or that it waits */
+const StatusLine = observer(({ rv, x, status }: { rv: ReviewSt; x: ReviewItem; status: ShownStatus }) => {
+    const fb = verdictOf(x)
+    const withdrawn = withdrawnOf(x)
+    const o = x.item.origin
+    if (o.by !== 'agent') {
+        const st = stateOf(x, false)
+        const by = o.by === 'player' ? `by ${o.player}` : o.by === 'auto' ? `by the auto rule ${o.rule}` : 'by you'
+        const now =
+            st.state === 'open' ? `sent to ${st.topic ?? 'a topic'}, waiting for an agent`
+                : st.state === 'claimed' ? `taken by ${st.worker ?? 'an agent'}`
+                    : st.state === 'closed' ? (st.why === 'wontfix' ? 'closed, not done' : st.why === 'superseded' ? 'replaced by a card' : st.why === 'rated' ? 'rated' : 'done')
+                        : RAISED_NOW[st.state] ?? st.state
+        return (
+            <div className={`rv-status ${toneOf(status)}`}>
+                <div className="rv-statushead">{cap(`raised ${by} · ${now}`)} {o.by === 'auto' ? <><LaneTag lane={o.lane} /><AutoTag rule={o.rule} /></> : null}</div>
+                <div className="rv-dim">on {when(x.item.created)}</div>
+                <Rework rv={rv} x={x} />
+            </div>
+        )
+    }
+    const head = fb
+        ? `Your answer: ${cap(STATUS_LABEL[fb.status])}, ${short(fb.at)}`
+        : status === 'superseded'
+            ? 'Replaced by a newer version'
+            : withdrawn !== undefined
+                ? `Withdrawn by the agent: ${withdrawn}`
+                : x.item.wip
+                    ? 'In progress: the agent works on it'
+                    : 'Waiting for your answer'
+    const sub = fb ? (fb.seen ? 'read by the agent' : 'not read by the agent yet') : `sent on ${when(x.item.created)}`
+    return (
+        <div className={`rv-status ${toneOf(status)}`}>
+            <div className="rv-statushead">{head}</div>
+            <div className="rv-dim">{sub}</div>
+            <Rework rv={rv} x={x} />
+        </div>
+    )
+})
+
+/** one verdict: plain until one is sent, then the chosen one filled and the others dimmed */
+const VerdictButton = ({ v, sent, busy, send }: { v: (typeof VERDICTS)[number]; sent: ReviewStatus | undefined; busy: boolean; send: () => void }) => (
+    <button className={`rv-verdict ${toneOf(v.status)}${sent === v.status ? ' chosen' : ''}${sent && sent !== v.status ? ' off' : ''}`} disabled={busy} onClick={send}>
+        <span className="rv-vglyph">{sent === v.status ? '✓' : v.glyph}</span> {v.label} ({v.key}){sent === v.status ? ' · chosen' : ''}
+    </button>
+)
+
+/** the phone's verdicts: one row stuck to the bottom of the open card, under the thumb */
+export const VerdictBar = observer(({ rv }: { rv: ReviewSt }) => {
+    const x = rv.open
+    if (!x || x.item.wip || x.item.origin.by !== 'agent') return null
+    const sent = verdictOf(x)?.status
+    return (
+        <div className="rv-verdictbar">
+            {VERDICTS.map((v) => (
+                <button key={v.status} className={`rv-verdict ${toneOf(v.status)}${sent === v.status ? ' chosen' : ''}${sent && sent !== v.status ? ' off' : ''}`} disabled={rv.busy}
+                    onClick={() => void rv.submit(v.status)}>
+                    {sent === v.status ? '✓' : v.glyph} {v.short}
+                </button>
+            ))}
+        </div>
+    )
+})
+
+/** the card this one replaces, or the one replacing it: a click opens it, its answer shown here */
+const Linked = observer(({ rv, label, id, item }: { rv: ReviewSt; label: string; id: string; item: ReviewItem | null }) => {
+    if (!item) return <div className="rv-err">{label} {id}: not found</div>
+    const status = rv.statusOf(item)
+    const fb = verdictOf(item)
+    return (
+        <div className={`rv-linked ${toneOf(status)}`}>
+            <div className="rv-linkedrow">
+                <div className="rv-thumb xs" onClick={() => rv.pick(item.item.id)}><ThumbOf rv={rv} x={item} /></div>
+                <span className="rv-dim">{label}</span>
+                <a className="rv-linkedtitle" onClick={() => rv.pick(item.item.id)}>{item.item.title}</a>
+                <span className="rv-badge">{STATUS_LABEL[status]}</span>
+            </div>
+            {fb?.comment ? <div className="rv-pre rv-small">{fb.comment}</div> : null}
+            {fb?.rects.map((q, i) => (q.comment ? (
+                <div key={i} className="rv-dim rv-small">{i + 1}{q.side ? ` ${SIDE_LABEL[q.side]}` : ''}{q.t !== undefined ? ` · ${secs(q.t)}` : ''}: {q.comment}</div>
+            ) : null))}
+        </div>
+    )
+})
+
+/** scrolls the middle column to a view, or to one tile of a gallery */
+function jumpTo(view: number, tile?: number): void {
+    document.getElementById(tile === undefined ? `review-view-${view}` : `review-tile-${view}-${tile}`)?.scrollIntoView({ behavior: 'smooth', block: tile === undefined ? 'start' : 'center' })
+}
+
+/** « what goes to the agent »: every reaction to a view or a tile, then every rectangle, each by its view's label; a
+ *  click on its badge scrolls to it, its comment edits in place, the cross removes it */
+const Outgoing = observer(({ rv }: { rv: ReviewSt }) => {
+    const x = rv.open
+    if (!x) return null
+    const views = x.item.views
+    const draft = rv.draft
+    const reactions = rv.outgoingReactions
+    const empty = reactions.length === 0 && draft.rects.length === 0
+    return (
+        <div className="rv-outgoing">
+            <div className="rv-divider">what goes to the agent</div>
+            {empty ? (
+                <div className="rv-dim rv-small">
+                    {rv.clipKey
+                        ? '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.'}
+                </div>
+            ) : null}
+            {reactions.map((q) => {
+                const o = REACTIONS.find((r) => r.status === q.status)
+                return (
+                    <div key={`${q.view}/${q.tile ?? ''}`} className="rv-outrow">
+                        <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 ?? '·'} {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)} />
+                        <button className="ghost rv-x" aria-label="remove this reaction" onClick={() => rv.removeReaction(q.view, q.tile)}>✕</button>
+                    </div>
+                )
+            })}
+            {draft.rects.map((q, i) => (
+                <div key={`rect${i}`} className="rv-outrow">
+                    <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)} />
+                    <button className="ghost rv-x" aria-label="delete this rectangle" onClick={() => rv.removeRect(i)}>✕</button>
+                </div>
+            ))}
+        </div>
+    )
+})
+
+/** the thread's conversation, every version's and every answered item's messages in time order, then his reply box
+ *  (⌘Enter sends) */
+const Messages = observer(({ rv }: { rv: ReviewSt }) => {
+    const conv = rv.conversation
+    const versions = rv.openThread?.versions ?? []
+    const vOf = (id: string): number => versions.length - versions.findIndex((x) => x.item.id === id)
+    const multi = new Set(conv.map((m) => m.on)).size > 1
+    return (
+        <div className="rv-messages">
+            <div className="rv-divider">talk</div>
+            {conv.length === 0 ? <div className="rv-dim rv-small">No message. An agent answers with sk review reply.</div> : null}
+            {conv.map((m) => {
+                const mine = m.who === 'owner'
+                return (
+                    <div key={`${m.on}/${m.id}`} className={`rv-msg${mine ? ' mine' : ''}`}>
+                        <div className="rv-dim rv-small">{mine ? 'you' : m.who} · {short(m.at)}{multi ? ` · v${vOf(m.on)}` : ''}</div>
+                        <div className="rv-pre">{m.text}</div>
+                        {m.image ? (
+                            <a href={rv.threadImageUrl(m.on, m.image)} target="_blank" rel="noreferrer"><img className="rv-msgimg" src={rv.threadImageUrl(m.on, m.image)} alt="" /></a>
+                        ) : null}
+                    </div>
+                )
+            })}
+            <textarea className="rv-reply" rows={2} placeholder="Answer the agent (⌘Enter sends)" value={rv.reply} onChange={(e) => rv.setReply(e.currentTarget.value)}
+                onKeyDown={(e) => {
+                    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+                        e.preventDefault()
+                        void rv.sendReply()
+                    } else blurOnEscape(e)
+                }} />
+            <div className="rv-replyrow"><button className="primary" disabled={!rv.reply.trim() || rv.busy} onClick={() => void rv.sendReply()}>Reply</button></div>
+        </div>
+    )
+})

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

@@ -0,0 +1,46 @@
+// the dispatcher's board (wiki build/shipkit/review.md, Raised items): what the owner, a player or a rule raised, by state,
+// each with its topic and its worker, a stale claim marked; who holds the dispatcher role. A row opens its item
+import { observer } from 'mobx-react-lite'
+import { isMarkItem, isStale, stateOf, topicLabel, type State } from '../../../review/model.ts'
+import type { ReviewSt } from './review-st.ts'
+
+const STATES: { state: State; label: string }[] = [
+    { state: 'new', label: 'new: waits on the dispatcher' },
+    { state: 'question', label: 'a question for you' },
+    { state: 'blocked', label: 'blocked on you' },
+    { state: 'open', label: 'open: waits on a worker' },
+    { state: 'claimed', label: 'claimed' },
+]
+
+export const ReviewBoard = observer(({ rv }: { rv: ReviewSt }) => {
+    const spec = rv.spec
+    const now = new Date()
+    const rows = rv.items.filter((x) => x.item.origin.by !== 'agent' && !isMarkItem(x)).map((x) => ({ x, st: stateOf(x, rv.followed.has(x.item.id)) }))
+    const role = spec?.role
+    return (
+        <div className="rv-listscroll rv-board">
+            <div className="rv-count">{role ? `dispatcher: ${role.name}, since ${role.since.slice(0, 16).replace('T', ' ')}` : 'dispatcher: nobody (sk review dispatcher --as <name>)'}</div>
+            {STATES.map(({ state, label }) => {
+                const of = rows.filter((r) => r.st.state === state)
+                if (of.length === 0) return null
+                return (
+                    <div key={state}>
+                        <div className="rv-divider">{label} · {of.length}</div>
+                        {of.map(({ x, st }) => (
+                            <div key={x.item.id} className={`rv-boardrow${rv.open?.item.id === x.item.id ? ' on' : ''}`} onClick={() => rv.pick(x.item.id)}>
+                                <div className="rv-linkedtitle">{x.item.title}</div>
+                                <div className="rv-dim">
+                                    {st.topic ? topicLabel(st.topic, spec ?? undefined) : 'no topic'}
+                                    {st.worker ? ` · ${st.worker}` : ''}
+                                    {isStale(x, now) ? ' · stale claim' : ''}
+                                    {x.item.origin.by === 'player' ? ` · ${x.item.origin.server}#${x.item.origin.serverId}` : x.item.origin.by === 'auto' ? ` · auto ${x.item.origin.rule}` : ''}
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                )
+            })}
+            {rows.every((r) => r.st.state === 'closed') ? <div className="rv-empty">Nothing raised is open.</div> : null}
+        </div>
+    )
+})