rvlib-shipkit 2.3.0 → 2.4.0

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

@@ -3,7 +3,7 @@
 // the shown repo's row marked in its identity colour. Its width is the
 // panel the page gives it (hub-app.tsx, react-resizable-panels). A row says
 // three things and no more (faceOf): the open asks as its one badge, a dim
-// icon while VS Code does not have the folder open, a thin edge breathing
+// name (never the icon) while VS Code does not have the folder open, a thin edge breathing
 // while Claude sessions run in it; on the home, a dot while its hub starts
 // or crashed and a mark while a global process it uses is off. Everything
 // else is the hover card, placed by floating-ui beside the row. A click
@@ -72,6 +72,7 @@ export const Row = observer(({ app, p, i }: { app: ListHost; p: Project; i: numb
     const warn = s.warnOf(p.name)
     // the shown repo's row is marked in its own colour
     const mark = cur ? (idVars(s.identityOf(p.name)) as CSSProperties) : undefined
+    // folded, the rail wears the repo's app icon: its mark on its identity plate
     return (
         <>
             <button ref={f.refs.setReference} className={cls} aria-label={p.name} style={mark} draggable
@@ -95,7 +96,9 @@ export const Row = observer(({ app, p, i }: { app: ListHost; p: Project; i: numb
                     },
                     onDragEnd: () => s.dragEnd(),
                 })}>
-                <Face p={p} px={ROW_ICON} />
+                {app.layout?.listRail === true && p.appIcon != null
+                    ? <img className="pjapp" src={p.appIcon} alt="" width={ROW_ICON} height={ROW_ICON} draggable={false} />
+                    : <Face p={p} px={ROW_ICON} />}
                 <span className="pjname">{p.name}</span>
                 {face.badge != null ? <b className="pga">{face.badge}</b> : null}
                 {face.busy ? <i className="pgs" /> : null}

package/src/serve/hub-app/projects-svc.ts

@@ -134,8 +134,9 @@ export function sortNames(list: Project[], mode: SortMode): string[] {
 export type HubDot = 'starting' | 'crashed' | null
 
 /** what the icon face shows, and nothing more: at most ONE badge (the open
- *  asks, the only fact that needs a human's hands), dim while VS Code does
- *  not have the folder open, and a pulsing edge while Claude sessions run */
+ *  asks, the only fact that needs a human's hands), a dim name while VS Code
+ *  does not have the folder open (the icon stays whole), and a pulsing edge
+ *  while Claude sessions run */
 export type Face = { badge: number | null; dim: boolean; busy: boolean }
 export const faceOf = (p: Project): Face => ({
     badge: p.asks > 0 ? p.asks : null,

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

@@ -5,7 +5,7 @@
 // (hash-route.ts), and setSel is the one place both move together. A repo
 // that is not shown keeps all of it and polls nothing (resume, pause), and
 // only the shown one writes the url.
-import { makeAutoObservable } from 'mobx'
+import { makeAutoObservable, reaction } from 'mobx'
 import { ClockSvc } from './clock-svc.ts'
 import { ColsSvc } from './cols-svc.ts'
 import { canonicalSel, currentHash, hashFor, parseHash, selOf, type CheckOwner, type HashSel } from './hash-route.ts'
@@ -23,6 +23,7 @@ import { TestsSvc } from './tests-svc.ts'
 import { AdminSvc } from './admin-svc.ts'
 import { ReviewSt } from './review/review-st.ts'
 import { TrailerSt } from './review/trailer-st.ts'
+import { WikiSt } from './wiki-st.ts'
 import { repoSections } from './repo-sections.ts'
 import { isTreeWalk, sectionKeyLabel } from './keys.ts'
 import type { Resource } from './hub-types.ts'
@@ -72,6 +73,8 @@ export class RepoSt {
     review: ReviewSt
     /** the trailer page: a cut played with its timeline and his frame notes (review/trailer-st.ts) */
     trailer: TrailerSt
+    /** the wikis page's search and preview */
+    wiki: WikiSt
     sel: Sel = null
     filter: Filter = 'all'
     /** sidebar search — live substring filter over asset + collection rows */
@@ -111,7 +114,16 @@ export class RepoSt {
         this.admin = new AdminSvc(this)
         this.review = new ReviewSt(this)
         this.trailer = new TrailerSt(this)
-        makeAutoObservable<this, 'beat' | 'onceRead'>(this, { onceRead: false, home: false, key: false, base: false, clock: false, media: false, cols: false, tree: false, health: false, readme: false, checks: false, comfy: false, timeline: false, live: false, git: false, tests: false, admin: false, review: false, trailer: false, searchEl: false, beat: false })
+        this.wiki = new WikiSt(this)
+        makeAutoObservable<this, 'beat' | 'onceRead'>(this, { onceRead: false, home: false, key: false, base: false, clock: false, media: false, cols: false, tree: false, health: false, readme: false, checks: false, comfy: false, timeline: false, live: false, git: false, tests: false, admin: false, review: false, trailer: false, wiki: false, searchEl: false, beat: false })
+        // a view or a filter changed on the review page: its address follows, the card unchanged
+        reaction(
+            () => (this.sel?.t === 'review' ? this.review.address : null),
+            (q) => {
+                const s = this.sel
+                if (q !== null && s?.t === 'review' && (s.q ?? '') !== q) this.setSel({ t: 'review', id: s.id, ...(q ? { q } : {}) })
+            },
+        )
     }
 
     /** an absolute hub path ('/api/…', '/media/…', '/hub.json') as this
@@ -298,8 +310,9 @@ export class RepoSt {
         // the tool set rides after the asset id (media-svc syncHash), so an
         // address is the same page whatever tools it carries
         if (cur.kind === next.kind && cur.col === next.col && cur.id === next.id) {
-            // the trailer's note and filter ride on its page, as the tool set does on an asset: no history entry
-            if (next.kind === 'trailer' && currentHash() !== h) history.replaceState(null, '', `#${h}`)
+            // the trailer's note and filter, the review's view and filters ride on their page, as the tool set does on an
+            // asset: no history entry
+            if ((next.kind === 'trailer' || next.kind === 'review') && currentHash() !== h) history.replaceState(null, '', `#${h}`)
             return
         }
         if (this.walking && this.walked) history.replaceState(null, '', `#${h}`)
@@ -361,9 +374,11 @@ export class RepoSt {
         this.setSel({ t: 'processes', id })
     }
     /** the review page, `id` the card it opens, null for the first the list shows */
-    showReview(id: string | null): void {
+    showReview(id: string | null, q?: string): void {
         this.review.select(id)
-        this.setSel({ t: 'review', id })
+        if (q !== undefined) this.review.applyAddress(q)
+        const query = this.review.address
+        this.setSel({ t: 'review', id, ...(query ? { q: query } : {}) })
         if (this.polling) this.review.start()
     }
     /** a plain key the page shown claims for itself: the review page (V F R A N M, a clip's Space and arrows) and
@@ -400,7 +415,7 @@ export class RepoSt {
             case 'git': return this.showGit()
             case 'when': return this.showWhen()
             case 'checks': return this.showChecks(sel.from)
-            case 'review': return this.showReview(sel.id)
+            case 'review': return this.showReview(sel.id, sel.q ?? '')
             case 'trailer': return this.showTrailer(sel.trailer, sel.cut, sel.note ?? null, sel.filter ?? null)
         }
     }

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

@@ -1,7 +1,8 @@
-// the one clock of a clip on screen (a card's clip view, a trailer cut): it plays, pauses, seeks and steps every video
-// of the view at once, so a pair of clips stays in sync. A paused time is always the middle of a frame, so both videos
-// of a pair and every rectangle drawn on it agree on the frame. The sound choice and the volume are the page's, kept
-// in the browser
+// the one clock of a clip on screen (a card's clip view, a sound, a trailer cut): it plays, pauses, seeks and steps
+// every video of the view at once, so a pair of clips stays in sync. A paused time is always the middle of a frame, so
+// both videos of a pair and every rectangle drawn on it agree on the frame. The sound choice and the volume are the
+// page's, kept in the browser. One thing plays at a time on the whole page (`solo`): any clock or player that starts
+// pauses the one playing
 import { makeAutoObservable, runInAction } from 'mobx'
 
 /** the part of a video element the clock drives */
@@ -52,6 +53,45 @@ class Heard {
 
 export const heard = new Heard()
 
+/** what plays now, page wide: anything that starts pauses it first */
+interface Playing {
+    pause(): void
+}
+let playing: Playing | null = null
+/** the clock each media element of the page plays under; an element no clock drives is its own */
+const owners = new WeakMap<object, Playing>()
+
+export const solo = {
+    /** `p` starts: the one playing before it pauses */
+    claim(p: Playing): void {
+        const before = playing
+        playing = p
+        if (before && before !== p) before.pause()
+    },
+    /** `p` stopped or left the page */
+    release(p: Playing): void {
+        if (playing === p) playing = null
+    },
+}
+
+// every audio or video of the page that starts (a sound's own player, the atelier's rolls) claims under its clock, so
+// the rule holds for players no clock drives
+if (typeof document !== 'undefined')
+    document.addEventListener(
+        'play',
+        (e) => {
+            const el = e.target
+            if (!(el instanceof HTMLMediaElement)) return
+            let me = owners.get(el)
+            if (!me) {
+                me = { pause: () => el.pause() }
+                owners.set(el, me)
+            }
+            solo.claim(me)
+        },
+        true,
+    )
+
 export class ClipSt {
     /** which clip is on screen, empty when none */
     key = ''
@@ -79,14 +119,14 @@ export class ClipSt {
         return heard.level
     }
 
-    /** another clip on screen: from the start, playing; the same one again changes nothing */
-    load(key: string, duration: number, fps: number): void {
+    /** another clip on screen: from the start, playing unless `still`; the same one again changes nothing */
+    load(key: string, duration: number, fps: number, still = false): void {
         if (key === this.key) return
         this.key = key
         this.duration = duration
         this.fps = fps > 0 ? fps : 20
         this.time = 0
-        this.paused = false
+        this.paused = still
         this.error = null
     }
 
@@ -104,6 +144,7 @@ export class ClipSt {
     /** a video of the view on screen; it returns its release */
     attach(el: ClipEl): () => void {
         this.els.push(el)
+        owners.set(el, this)
         el.muted = !this.sound || this.els[0] !== el
         el.volume = heard.level
         el.playbackRate = this.rate
@@ -113,9 +154,16 @@ export class ClipSt {
         if (this.raf === 0 && typeof requestAnimationFrame === 'function') this.raf = requestAnimationFrame(this.follow)
         return () => {
             this.els = this.els.filter((e) => e !== el)
+            if (this.els.length === 0) solo.release(this)
         }
     }
 
+    /** played to be heard: its sound on, from where it stands */
+    listen(): void {
+        this.hear(true)
+        this.play()
+    }
+
     toggleSound(): void {
         this.hear(!this.sound)
         heard.setOn(this.sound)
@@ -142,6 +190,7 @@ export class ClipSt {
     play(): void {
         this.paused = false
         this.error = null
+        solo.claim(this)
         for (const el of this.els) this.start(el)
     }
 
@@ -181,6 +230,7 @@ export class ClipSt {
     }
 
     private start(el: ClipEl): void {
+        solo.claim(this)
         const p = el.play()
         if (p)
             p.catch((e: Error) => {

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

@@ -1,11 +1,13 @@
 // 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
+// kind's facts, links, a text or its change as a diff, its parts (a card each: logo, media beside the text, its change),
+// 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'
+import type { PartData } from '../../../review/project.ts'
+import type { Fact, Link, PartTone, 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 {
@@ -17,6 +19,7 @@ export interface KindData {
     links: Link[]
     live: string | null
     text: ViewText | null
+    parts: PartData[]
 }
 
 /** each item's data view, read once an item opens and again when its thread moves; « live » stays as he left it */
@@ -40,7 +43,7 @@ export class KindViewSt {
     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 })
+        this.views.set(key, { facts: [], links: [], live: null, text: null, parts: [] })
         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 }))
@@ -82,10 +85,8 @@ const kindViewOf = (st: Urls): KindViewSt => {
     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')
+/** a diff of two token lists: each token kept, gone or new */
+function diffSeq(a: readonly string[], b: readonly string[]): { t: ' ' | '-' | '+'; line: string }[] {
     const n = a.length
     const m = b.length
     const lcs: number[][] = Array.from({ length: n + 1 }, () => new Array<number>(m + 1).fill(0))
@@ -103,6 +104,12 @@ function diffLines(before: string, after: string): { t: ' ' | '-' | '+'; line: s
     return out
 }
 
+/** a line diff of two texts: each line kept, gone or new */
+const diffLines = (before: string, after: string) => diffSeq(before.split('\n'), after.split('\n'))
+
+/** a word diff of two texts, the spaces kept as tokens so each side reads as written */
+const diffWords = (before: string, after: string) => diffSeq(before.split(/(\s+)/), after.split(/(\s+)/))
+
 const TONE = { ' ': 'var(--dim)', '-': 'var(--red, #e5484d)', '+': 'var(--green, #46a758)' } as const
 
 /** the kind's data view of the open item, under its facts */
@@ -125,7 +132,7 @@ export const KindView = observer(({ app, x }: { app: Urls; x: ReviewItem }) => {
             ) : 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>)}
+                    {v.links.map((l) => <LinkTo key={l.url} l={l} />)}
                 </div>
             ) : null}
             {t !== null && 'text' in t ? <pre className="rv-pre rv-kindtext">{t.text}</pre> : null}
@@ -136,6 +143,7 @@ export const KindView = observer(({ app, x }: { app: Urls; x: ReviewItem }) => {
                     ))}
                 </pre>
             ) : null}
+            {v.parts.map((p, i) => <PartCard key={i} app={app} x={x} n={i} p={p} />)}
             {v.live !== null ? (
                 <div>
                     <button className="ghost" onClick={() => k.toggleLive()}>{k.live ? 'hide live' : 'live'}</button>
@@ -146,6 +154,67 @@ export const KindView = observer(({ app, x }: { app: Urls; x: ReviewItem }) => {
     )
 })
 
+/** a link: a page of the tool that frames the hub is posted to it, any other opens in a new tab */
+const LinkTo = ({ l }: { l: Link }) => {
+    const framed = l.host === true && window.parent !== window
+    return (
+        <a
+            href={l.url}
+            target="_blank"
+            rel="noreferrer"
+            onClick={(e) => {
+                if (!framed) return
+                e.preventDefault()
+                window.parent.postMessage({ shipkit: 'open', url: l.url }, location.origin)
+            }}
+        >
+            {l.label}
+        </a>
+    )
+}
+
+const BADGE: Record<PartTone, string> = { new: 'var(--green, #46a758)', changed: 'var(--orange, #e5932d)', gone: 'var(--red, #e5484d)', same: 'var(--dim)' }
+const GONE = { background: 'color-mix(in srgb, var(--red, #e5484d) 18%, transparent)', textDecoration: 'line-through' }
+const ADDED = { background: 'color-mix(in srgb, var(--green, #46a758) 20%, transparent)' }
+
+/** one side of a word diff: what stayed and what that side alone has, marked */
+const Side = ({ before, after, side }: { before: string; after: string; side: '-' | '+' }) => (
+    <div className="rv-pre rv-parttext">
+        {diffWords(before, after)
+            .filter((d) => d.t === ' ' || d.t === side)
+            .map((d, i) => <span key={i} style={d.t === ' ' ? undefined : side === '-' ? GONE : ADDED}>{d.line}</span>)}
+    </div>
+)
+
+/** a part of the subject as a card: its logo and name, its change, its media beside its text or the text's change */
+const PartCard = ({ app, x, n, p }: { app: Urls; x: ReviewItem; n: number; p: PartData }) => {
+    const t = p.text
+    const src = app.fileUrl(x.item.id, `part-${n}`)
+    return (
+        <div className="rv-part">
+            <div className="rv-parthead">
+                {p.icon ? <img className="rv-particon" src={p.icon} alt="" /> : null}
+                <b>{p.label}</b>
+                {p.detail ? <span className="rv-dim"> · {p.detail}</span> : null}
+                {p.badge ? <span className="rv-partbadge" style={{ color: BADGE[p.badge.tone], borderColor: BADGE[p.badge.tone] }}>{p.badge.text}</span> : null}
+            </div>
+            <div className="rv-partbody">
+                {p.media === 'video' ? <video src={src} muted loop autoPlay playsInline controls /> : p.media === 'image' ? <img src={src} alt="" /> : null}
+                {'text' in t ? (
+                    <div className="rv-pre rv-parttext">{t.text}</div>
+                ) : t.before === t.after ? (
+                    <div className="rv-pre rv-parttext">{t.after}</div>
+                ) : (
+                    <>
+                        <div><div className="rv-factl">before</div><Side before={t.before} after={t.after} side="-" /></div>
+                        <div><div className="rv-factl">after</div><Side before={t.before} after={t.after} side="+" /></div>
+                    </>
+                )}
+            </div>
+        </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) }] : []))

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

@@ -1,9 +1,11 @@
-// 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
+// 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 { aboutText, placeText, STATUS_LABEL, stateOf, verdictOf, viewName, withdrawnOf, type ReviewItem, type ReviewStatus, type ShownStatus } from '../../../review/model.ts'
+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, cap, Empty, LaneTag, Listeners, REACTIONS, Rework, secs, short, SIDE_LABEL, ThumbOf, toneOf, VERDICTS, when } from './kit.tsx'
+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'
 
@@ -11,21 +13,14 @@ 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)
+    // 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">
-            <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>
+            {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} />)}
@@ -37,8 +32,8 @@ export const ReviewForm = observer(({ rv }: { rv: ReviewSt }) => {
             <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' ? (
+            {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>
@@ -55,60 +50,84 @@ export const ReviewForm = observer(({ rv }: { rv: ReviewSt }) => {
     )
 })
 
-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)
+/** 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 auto rule ${o.rule}` : 'by you'
+        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'}, waiting for an agent`
+            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 (
-            <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>
-        )
+        return `raised ${by} ${short(x.item.created)} · ${now}`
     }
-    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)}`
+    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-status ${toneOf(status)}`}>
-            <div className="rv-statushead">{head}</div>
-            <div className="rv-dim">{sub}</div>
+        <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 }: { 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' : ''}
+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>
 )
 
@@ -163,25 +182,36 @@ const Outgoing = observer(({ rv }: { rv: ReviewSt }) => {
     const views = x.item.views
     const draft = rv.draft
     const reactions = rv.outgoingReactions
-    const empty = reactions.length === 0 && draft.rects.length === 0
+    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.clipKey
+                    {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 ?? '·'} {placeText(q, views).slice(1, -1)}
+                            {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)} />

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

@@ -1,6 +1,6 @@
 // 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; narrower than STACK_PX, the card over the answer
-// in one column. On a phone one pane at a time, the verdicts in a bar under the thumb. The list is read while the page
+// 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
 import { observer } from 'mobx-react-lite'
 import { useEffect, useRef } from 'react'
@@ -60,17 +60,12 @@ export const ReviewPage = observer(({ app }: { app: RepoSt }) => {
             </Panel>
             <Separator className="rsep" />
             {rv.stacked ? (
-                // one column: the card over its answer, the boundary dragged
+                // 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}>
-                    <Group className="rv-stack" orientation="vertical">
-                        <Panel id="review-image" defaultSize="62%" minSize={160} className="rv-pane" style={PANEL}>
-                            <div className="rv-scroll"><ReviewImage rv={rv} /></div>
-                        </Panel>
-                        <Separator className="rsep hsep" />
-                        <Panel id="review-form" defaultSize="38%" minSize={140} className="rv-pane" style={PANEL}>
-                            <div className="rv-scroll"><ReviewForm rv={rv} /></div>
-                        </Panel>
-                    </Group>
+                    <div className="rv-scroll">
+                        <ReviewImage rv={rv} />
+                        <ReviewForm rv={rv} />
+                    </div>
                 </Panel>
             ) : (
                 <>
@@ -87,11 +82,11 @@ export const ReviewPage = observer(({ app }: { app: RepoSt }) => {
     )
 })
 
-/** the phone's top line: the way back to the hub, and the repo the page is of. On a phone the page covers the hub's
+/** the phone's top line: the way back to the hub (none in another tool's frame), and the repo the page is of. On a phone the page covers the hub's
  *  panes, which leave it no room */
 export const PhoneTop = observer(({ app }: { app: RepoSt }) => (
     <div className="rv-phonetop">
-        <button className="ghost" onClick={() => app.showReadme()}>◂ hub</button>
+        {app.home.embedded ? null : <button className="ghost" onClick={() => app.showReadme()}>◂ hub</button>}
         <b>{app.name}</b>
         <span className="rv-dim">{app.sel?.t === 'trailer' ? 'trailer' : 'review'}</span>
     </div>