rvlib-shipkit 2.2.0 → 2.4.0

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,269 @@
+// the review page's right column: the card's header (title, state pill, what), a kind'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. When the page reads in one column the header sits over the views instead (review-views.tsx)
+import { observer } from 'mobx-react-lite'
+import { useState } from 'react'
+import { laneOf, placeText, STATUS_LABEL, stateOf, verdictOf, viewName, withdrawnOf, type ReviewItem, type ReviewStatus } from '../../../review/model.ts'
+import { renderMd } from '../md.ts'
+import { AutoTag, blurOnEscape, Empty, LaneTag, Listeners, REACTIONS, Rework, secs, short, SIDE_LABEL, ThumbOf, toneOf, VERDICTS } 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 draft = rv.draft
+    const sent = verdictOf(x)
+    // in one column the header and the verdicts sit over the views
+    const headAbove = rv.headInViews
+    const verdictsAbove = rv.stacked && !rv.phone.on
+    return (
+        <div className="rv-form">
+            {headAbove ? null : <CardHead rv={rv} x={x} verdicts={false} />}
+            <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)} />
+            {verdictsAbove ? null : <div className="rv-listenrow"><span className="rv-dim">who reads your answer</span><Listeners rv={rv} cards={[x]} /></div>}
+            {!rv.phone.on && !verdictsAbove && !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 RAISED_NOW: Record<string, string> = {
+    new: 'waiting for a dispatcher',
+    question: 'a question for you',
+    blocked: 'blocked: it waits on your decision',
+}
+
+/** where the item stands, in a few words beside its pill: when it was sent or answered, who holds a raised item */
+function stateWords(x: ReviewItem): string {
+    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 rule ${o.rule}` : 'by you'
+        const now =
+            st.state === 'open' ? `sent to ${st.topic ?? 'a topic'}`
+                : 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 `raised ${by} ${short(x.item.created)} · ${now}`
+    }
+    const fb = verdictOf(x)
+    if (fb) return `answered ${short(fb.at)} · ${fb.seen ? 'read by the agent' : 'not read yet'}`
+    const withdrawn = withdrawnOf(x)
+    if (withdrawn !== undefined) return `withdrawn: ${withdrawn}`
+    return x.item.wip ? 'the agent works on it' : `sent ${short(x.item.created)}`
+}
+
+/** the card's header, for every card: the title, one tight line (the state as the list's pill, the lane, when, the
+ *  commit, the id to copy), then what the agent says. No subject row: the list's row names it, a kind's facts say the
+ *  rest; no id row: the url carries it. With `verdicts`, the four verdicts under it (the page in one column) */
+export const CardHead = observer(({ rv, x, verdicts }: { rv: ReviewSt; x: ReviewItem; verdicts: boolean }) => {
+    const r = x.item
+    const status = rv.statusOf(x)
+    const sent = verdictOf(x)
+    const lane = laneOf(x)
+    return (
+        <div className="rv-head">
+            <h3 className="rv-title">{r.title}</h3>
+            <div className="rv-meta">
+                <span className={`rv-badge ${toneOf(status)}`}>{STATUS_LABEL[status]}</span>
+                {lane ? <LaneTag lane={lane} /> : null}
+                {r.origin.by === 'auto' ? <AutoTag rule={r.origin.rule} /> : null}
+                <span>{stateWords(x)}</span>
+                {r.commit ? <span className="rv-mono" title={`commit ${r.commit}`}>@{r.commit.slice(0, 9)}</span> : null}
+                <CopyId id={r.id} />
+            </div>
+            <Rework rv={rv} x={x} />
+            {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-pre rv-why">another subject: {r.why}</div> : null}
+            {verdicts && !r.wip && r.origin.by === 'agent' ? (
+                <div className="rv-headverdicts">
+                    {VERDICTS.map((v) => <VerdictButton key={v.status} v={v} sent={sent?.status} busy={rv.busy} send={() => void rv.submit(v.status)} short />)}
+                    <Listeners rv={rv} cards={[x]} />
+                </div>
+            ) : null}
+        </div>
+    )
+})
+
+/** the id, copied on a click: an agent names a card by it */
+const CopyId = ({ id }: { id: string }) => {
+    const [done, setDone] = useState(false)
+    return (
+        <button className="rv-copyid ghost" title={`${id}: click to copy`} onClick={() => {
+            void navigator.clipboard?.writeText(id).then(() => {
+                setDone(true)
+                setTimeout(() => setDone(false), 1200)
+            })
+        }}>
+            {done ? '✓ copied' : '⧉ id'}
+        </button>
+    )
+}
+
+/** one verdict: plain until one is sent, then the chosen one filled and the others dimmed */
+const VerdictButton = ({ v, sent, busy, send, short: brief }: { v: (typeof VERDICTS)[number]; sent: ReviewStatus | undefined; busy: boolean; send: () => void; short?: boolean }) => (
+    <button className={`rv-verdict ${toneOf(v.status)}${sent === v.status ? ' chosen' : ''}${sent && sent !== v.status ? ' off' : ''}`} disabled={busy} onClick={send} title={brief ? `${v.label} (${v.key})` : undefined}>
+        <span className="rv-vglyph">{sent === v.status ? '✓' : v.glyph}</span> {brief ? v.short : v.label} ({v.key}){sent === v.status && !brief ? ' · 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 && draft.pick === undefined
+    return (
+        <div className="rv-outgoing">
+            <div className="rv-divider">what goes to the agent</div>
+            {empty ? (
+                <div className="rv-dim rv-small">
+                    {rv.choice && rv.rows
+                        ? 'Score the options (stars, or ⇧1 to ⇧5 on the one playing), a word on one with ✎, then pick one (P): the pick is your answer.'
+                        : rv.rows
+                          ? 'Play each one (1 to 9), then OK, fix or no on a row, or a word with ✎.'
+                          : 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}
+            {draft.pick !== undefined ? (
+                <div className="rv-outrow">
+                    <button className="rv-outbadge re-approved on" title="see the option you picked" onClick={() => { rv.setView(draft.pick ?? 0); jumpTo(draft.pick ?? 0) }}>
+                        ✓ picked {viewName(views[draft.pick], draft.pick)}
+                    </button>
+                </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 ?? (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)} />
+                        <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>
+    )
+})

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

@@ -0,0 +1,156 @@
+// the review page's left column: the search and the filters, one card per thread, its older versions nested
+import { observer } from 'mobx-react-lite'
+import { useEffect, useRef } from 'react'
+import { aboutText, firstView, isGallery, isPair, laneOf, MOVE_LABEL, STATUS_LABEL, subjectLabel, verdictOf, type Move, type ReviewItem, type ShownStatus } from '../../../review/model.ts'
+import type { Thread } from '../../../review/threads.ts'
+import { AutoTag, LaneTag, laneColor, Listeners, Rework, ThumbOf, toneOf } from './kit.tsx'
+import { ReviewBoard } from './review-board.tsx'
+import type { ReviewSt } from './review-st.ts'
+import { Caret } from '../tree-row.tsx'
+
+const ALL = ''
+
+export const ReviewList = observer(({ rv }: { rv: ReviewSt }) => {
+    const shown = rv.visible
+    const open = rv.open?.item.id
+    return (
+        <div className="rv-listcol">
+            <div className="rv-filters">
+                <input className="rv-search" placeholder="search" aria-label="search the cards" value={rv.query} onChange={(e) => rv.setQuery(e.currentTarget.value)}
+                    onKeyDown={(e) => { if (e.key === 'Escape') { rv.setQuery(''); e.currentTarget.blur() } }} />
+                <div className="rv-selects">
+                    <select aria-label="subject" value={rv.subject ?? ALL} onChange={(e) => rv.setFilter({ subject: e.currentTarget.value === ALL ? null : e.currentTarget.value })}>
+                        <option value={ALL}>every subject</option>
+                        {rv.subjects.map((k) => <option key={k} value={k}>{subjectLabel(k, rv.spec ?? undefined)}</option>)}
+                    </select>
+                    <select aria-label="state" value={rv.status ?? ALL} onChange={(e) => rv.setFilter({ status: e.currentTarget.value === ALL ? null : (e.currentTarget.value as ShownStatus) })}>
+                        <option value={ALL}>every state</option>
+                        {(Object.keys(STATUS_LABEL) as ShownStatus[]).map((s) => <option key={s} value={s}>{STATUS_LABEL[s]}</option>)}
+                    </select>
+                </div>
+                <span className="seg rv-whose" aria-label="whose move">
+                    <button className={rv.whose === null ? 'on' : ''} onClick={() => rv.setFilter({ whose: null })}>all</button>
+                    {(['owner', 'agents', 'none'] as const).map((m: Move) => (
+                        <button key={m} className={rv.whose === m ? 'on' : ''} onClick={() => rv.setFilter({ whose: m })}>{MOVE_LABEL[m]}</button>
+                    ))}
+                </span>
+                <div className="rv-switches">
+                    <label className="rv-switch"><input type="checkbox" checked={rv.hideHandled} onChange={(e) => rv.setHideHandled(e.currentTarget.checked)} />hide handled</label>
+                    <label className="rv-switch"><input type="checkbox" checked={rv.byLane} onChange={(e) => rv.setByLane(e.currentTarget.checked)} />by lane</label>
+                    {rv.spec?.dispatcher ? <label className="rv-switch"><input type="checkbox" checked={rv.board} onChange={(e) => rv.setBoard(e.currentTarget.checked)} />board</label> : null}
+                </div>
+                <div className="rv-count">
+                    {rv.activeCount} active · {rv.pendingCount} waiting{rv.hideHandled ? '' : ` · ${shown.length} / ${rv.threads.length} threads`}
+                </div>
+            </div>
+            {rv.board && rv.spec?.dispatcher ? <ReviewBoard rv={rv} /> : <div className="rv-listscroll">
+                {rv.byLane
+                    ? rv.laneGroups.map((g) => (
+                        <div key={g.lane ?? ''}>
+                            <LaneHeader rv={rv} lane={g.lane} threads={g.threads} />
+                            {g.threads.map((t) => <ThreadRow key={t.head.item.id} rv={rv} t={t} openId={open} />)}
+                        </div>
+                    ))
+                    : shown.map((t) => <ThreadRow key={t.head.item.id} rv={rv} t={t} openId={open} />)}
+                {shown.length === 0 && rv.list != null ? (
+                    <div className="rv-empty">{rv.items.length === 0 ? 'No card yet. An agent sends one with sk review add.' : rv.hideHandled ? 'Nothing active: « hide handled » hides the handled threads.' : 'No card matches.'}</div>
+                ) : null}
+                {rv.list == null && rv.listError == null ? <div className="rv-empty"><span className="spin" /> reading the cards…</div> : null}
+                {rv.listError != null ? <div className="rv-err">{rv.listError}</div> : null}
+                {rv.broken.map((b) => <div key={b.id} className="rv-err">unreadable: {b.id} ({b.error})</div>)}
+            </div>}
+        </div>
+    )
+})
+
+const LaneHeader = observer(({ rv, lane, threads }: { rv: ReviewSt; lane: string | null; threads: readonly Thread[] }) => (
+    <div className="rv-lanehead" style={lane ? { ['--lane' as string]: laneColor(lane) } : undefined}>
+        <b>{lane ?? 'no lane'}</b>
+        <span className="rv-dim">{threads.length}</span>
+        <span className="sp" />
+        <Listeners rv={rv} cards={threads.map((t) => t.head)} />
+    </div>
+))
+
+const ThreadRow = observer(({ rv, t, openId }: { rv: ReviewSt; t: Thread; openId: string | undefined }) => {
+    const older = t.versions.slice(1)
+    const unfolded = older.length > 0 && rv.showsVersions(t)
+    const n = t.versions.length
+    return (
+        <>
+            <ReviewRow rv={rv} x={t.head} on={t.head.item.id === openId} unread={rv.unread(t)} version={n}
+                fold={older.length > 0 ? { open: unfolded, toggle: () => rv.fold(t.head.item.id) } : undefined} />
+            {unfolded ? older.map((x, i) => <VersionRow key={x.item.id} rv={rv} x={x} n={n - 1 - i} on={x.item.id === openId} />) : null}
+        </>
+    )
+})
+
+const laneStyle = (x: ReviewItem): React.CSSProperties | undefined => {
+    const lane = laneOf(x)
+    return lane ? { ['--lane' as string]: laneColor(lane) } : undefined
+}
+
+/** an older version under its thread's head: small, its own status, a click opens it */
+const VersionRow = observer(({ rv, x, n, on }: { rv: ReviewSt; x: ReviewItem; n: number; on: boolean }) => {
+    const status = rv.statusOf(x)
+    const lane = laneOf(x)
+    return (
+        <div className={`rv-vrow ${toneOf(status)}${on ? ' on' : ''}${lane ? ' laned' : ''}`} style={laneStyle(x)} onClick={() => rv.pick(x.item.id)}>
+            <div className="rv-thumb sm"><ThumbOf rv={rv} x={x} /></div>
+            <b className="rv-vn">v{n}</b>
+            <span className="rv-badge">{STATUS_LABEL[status]}</span>
+            {lane ? <LaneTag lane={lane} /> : null}
+            {x.item.origin.by === 'auto' ? <AutoTag rule={x.item.origin.rule} /> : null}
+            <span className="rv-vtitle">{x.item.title}</span>
+        </div>
+    )
+})
+
+const ReviewRow = observer(({ rv, x, on, version, unread, fold }: {
+    rv: ReviewSt
+    x: ReviewItem
+    on: boolean
+    version: number
+    unread: boolean
+    fold: { open: boolean; toggle: () => void } | undefined
+}) => {
+    const r = x.item
+    const status = rv.statusOf(x)
+    const rework = rv.reworkOf(x)
+    // handled by the agent: its answer marked seen, or a newer version sent; never while a lane reworks it
+    const muted = !on && !rework && (verdictOf(x)?.seen === true || status === 'superseded' || status === 'withdrawn')
+    const lane = laneOf(x)
+    const ref = useRef<HTMLDivElement>(null)
+    useEffect(() => {
+        if (on) ref.current?.scrollIntoView({ block: 'nearest' })
+    }, [on])
+    const first = firstView(r)
+    return (
+        <div ref={ref} className={`rv-row ${toneOf(status)}${on ? ' on' : ''}${muted ? ' muted' : ''}${lane ? ' laned' : ''}`} style={laneStyle(x)} onClick={() => rv.pick(r.id)}>
+            <div className="rv-thumb"><ThumbOf rv={rv} x={x} /></div>
+            <div className="rv-rowbody">
+                <div className={`rv-rowtitle${on || status === 'pending' ? ' strong' : ''}`}>
+                    {unread ? <span className="rv-unread" title="a message of the agent to read" /> : null}
+                    {r.title}
+                </div>
+                <div className="rv-rowmeta">
+                    <span className="rv-badge">{STATUS_LABEL[status]}</span>
+                    {version > 1 ? <span className="rv-badge outline">v{version}</span> : null}
+                    {lane ? <LaneTag lane={lane} /> : null}
+                    {r.origin.by === 'auto' ? <AutoTag rule={r.origin.rule} /> : null}
+                    <span className="rv-about">
+                        {aboutText(r, rv.spec ?? undefined)}
+                        {r.views.some((v) => !isGallery(v) && v.clip) ? ' · clip' : ''}
+                        {first && isPair(first.files) ? ' · before/after' : ''}
+                    </span>
+                </div>
+                <Rework rv={rv} x={x} />
+            </div>
+            {fold ? (
+                <button className="rv-fold" aria-label={fold.open ? 'fold the versions' : 'unfold the versions'} onClick={(e) => { e.stopPropagation(); fold.toggle() }}>
+                    <Caret open={fold.open} />
+                </button>
+            ) : null}
+        </div>
+    )
+})