rvlib-shipkit 2.3.0 → 2.4.0

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

@@ -3,10 +3,16 @@
 // sent. The list is read while the page shows, every 2 s, answered 304 when the store did not move
 import { makeAutoObservable, reaction, runInAction } from 'mobx'
 import {
+    asOptions,
+    isApproved,
+    isChoice,
     isGallery,
+    isPair,
     laneOf,
     moveOf,
     reworkOf,
+    STARS,
+    STATUS_LABEL,
     stateOf,
     unreadBy,
     verdictOf,
@@ -31,6 +37,8 @@ interface Draft {
     rects: Rect[]
     comment: string
     reactions?: ReviewReaction[]
+    /** the option he picked, on a choice card */
+    pick?: number
 }
 
 /** a live `sk review watch`: its process, the session or lane it keeps, when it started */
@@ -71,6 +79,10 @@ export type PhonePane = 'list' | 'card' | 'answer'
 export type PairSide = 'before' | 'after' | 'swipe'
 
 const POLL_MS = 2000
+/** a sound's clock steps a tenth of a second */
+const SOUND_FPS = 10
+/** ← → on a sound jump this many seconds */
+const SOUND_JUMP = 2
 
 const sameSpot = (r: ReviewReaction, view: number, tile: number | undefined): boolean => r.view === view && r.tile === tile
 
@@ -97,7 +109,7 @@ const draftOf = (s: string | null): Draft | null => {
     try {
         const d = s === null ? null : (JSON.parse(s) as Partial<Draft>)
         if (!d || !Array.isArray(d.rects) || typeof d.comment !== 'string') return null
-        return { rects: d.rects, comment: d.comment, ...(Array.isArray(d.reactions) ? { reactions: d.reactions } : {}) }
+        return { rects: d.rects, comment: d.comment, ...(Array.isArray(d.reactions) ? { reactions: d.reactions } : {}), ...(typeof d.pick === 'number' ? { pick: d.pick } : {}) }
     } catch {
         return null
     }
@@ -179,6 +191,8 @@ export class PhoneSt {
     }
 }
 
+const isShownStatus = (s: string): s is ShownStatus => Object.hasOwn(STATUS_LABEL, s)
+
 export class ReviewSt {
     list: Listing | null = null
     listError: string | null = null
@@ -206,6 +220,10 @@ export class ReviewSt {
     viewZoom: Record<number, Zoom> = {}
     /** the gallery tile shown large across the column, `<view>/<tile>` */
     bigTile: string | null = null
+    /** a card of options shown full, every view stacked, by id: his switch, this visit */
+    full: Record<string, boolean> = {}
+    /** the option rows unfolded to their full view, by view index */
+    openRows: Record<number, boolean> = {}
     replies: Record<string, string> = {}
     private reading = new Set<string>()
     /** « hide handled »: only the active threads in the list */
@@ -239,6 +257,27 @@ export class ReviewSt {
     setPlace(p: CardPlace): void {
         this.place = p
     }
+    /** the open card as thin option rows: a choice, or views that each play alone, unless he asked them full */
+    get rows(): boolean {
+        const x = this.open
+        return x !== null && asOptions(x.item) && this.full[x.item.id] !== true
+    }
+    setFull(on: boolean): void {
+        const id = this.open?.item.id
+        if (id) this.full = { ...this.full, [id]: on }
+    }
+    get choice(): boolean {
+        const x = this.open
+        return x !== null && isChoice(x.item)
+    }
+    /** the card's header (title, state, what, and in one column the verdicts) sits over its views: one column, the
+     *  phone's card pane, a choice's options */
+    get headInViews(): boolean {
+        return this.stacked || this.phone.on || this.choice
+    }
+    toggleRow(i: number): void {
+        this.openRows = { ...this.openRows, [i]: !this.openRows[i] }
+    }
 
     constructor(private readonly st: RepoSt) {
         this.prefix = `shipkit.review.${st.key}.`
@@ -470,7 +509,14 @@ export class ReviewSt {
         if (!x) return { rects: [], comment: '' }
         const v = verdictOf(x)
         const sent = v?.reactions
-        return this.drafts[x.item.id] ?? { rects: v?.rects ?? [], comment: v?.comment ?? '', ...(sent && sent.length > 0 ? { reactions: sent } : {}) }
+        return (
+            this.drafts[x.item.id] ?? {
+                rects: v?.rects ?? [],
+                comment: v?.comment ?? '',
+                ...(sent && sent.length > 0 ? { reactions: sent } : {}),
+                ...(v?.pick !== undefined ? { pick: v.pick } : {}),
+            }
+        )
     }
 
     get dirty(): boolean {
@@ -482,7 +528,7 @@ export class ReviewSt {
         const x = this.open
         if (!x) return
         const d = this.draft
-        const { reactions, ...rest } = f({ rects: [...d.rects], comment: d.comment, reactions: [...(d.reactions ?? [])] })
+        const { reactions, ...rest } = f({ ...d, rects: [...d.rects], reactions: [...(d.reactions ?? [])] })
         const next: Draft = reactions && reactions.length > 0 ? { ...rest, reactions } : rest
         this.drafts = { ...this.drafts, [x.item.id]: next }
         store.put(`${this.prefix}draft.${x.item.id}`, JSON.stringify(next))
@@ -494,12 +540,43 @@ export class ReviewSt {
         if (this.phone.on) this.phone.show('card')
     }
 
+    /** what the address carries beside the card: its view and the list's filters, `view=1&subject=place`, each only
+     *  off its default (`handled=1` shows the handled threads, `lanes=1` groups by lane) */
+    get address(): string {
+        const q = new URLSearchParams()
+        if (this.view > 0) q.set('view', String(this.view))
+        if (this.subject !== null) q.set('subject', this.subject)
+        if (this.whose !== null) q.set('whose', this.whose)
+        if (this.status !== null) q.set('status', this.status)
+        if (!this.hideHandled) q.set('handled', '1')
+        if (this.byLane) q.set('lanes', '1')
+        return q.toString()
+    }
+
+    /** an address's view and filters read back: a key it leaves out keeps what the page has; an unknown value is dropped */
+    applyAddress(raw: string): void {
+        const q = new URLSearchParams(raw)
+        const view = Number(q.get('view'))
+        if (Number.isInteger(view) && view > 0) this.view = view
+        const subject = q.get('subject')
+        if (subject) this.subject = subject
+        const whose = q.get('whose')
+        if (whose === 'owner' || whose === 'agents' || whose === 'none') this.whose = whose
+        const status = q.get('status')
+        if (status !== null && isShownStatus(status)) this.status = status
+        if (q.get('handled') === '1') this.hideHandled = false
+        if (q.get('lanes') === '1') this.byLane = true
+    }
+
     /** the card the address names; its draft is read again from storage, the truth over every window */
     select(id: string | null): void {
         if (id !== this.selectedId) {
             this.view = 0
             this.viewZoom = {}
             this.bigTile = null
+            this.openRows = {}
+            // a link to a card on the phone opens the card, never the list
+            if (id !== null && this.phone.on) this.phone.show('card')
         }
         this.selectedId = id
         if (id !== null) {
@@ -545,6 +622,13 @@ export class ReviewSt {
         this.rect = null
     }
 
+    /** the playable view an option row or a clip shows: a clip, or a sound shown as a row */
+    private playableAt(i: number): MediaView | null {
+        const v = this.open?.item.views[i]
+        if (!v || isGallery(v)) return null
+        return v.clip || (v.audio && this.rows && !isPair(v.files)) ? v : null
+    }
+
     get openView(): MediaView | null {
         const v = this.open?.item.views[this.view]
         return v && !isGallery(v) ? v : null
@@ -575,15 +659,28 @@ export class ReviewSt {
     /** a reaction's toggle: sets that status, or clears it when it is already the one */
     react(view: number, tile: number | undefined, status: ReviewStatus): void {
         const cur = this.reactionOf(view, tile)
-        this.putReaction(view, tile, { status: cur?.status === status ? undefined : status, comment: cur?.comment ?? '' })
+        this.putReaction(view, tile, { ...cur, status: cur?.status === status ? undefined : status, comment: cur?.comment ?? '' })
     }
 
     setReactionComment(view: number, tile: number | undefined, comment: string): void {
-        this.putReaction(view, tile, { status: this.reactionOf(view, tile)?.status, comment })
+        this.putReaction(view, tile, { ...this.reactionOf(view, tile), comment })
+    }
+
+    /** an option's stars; the same number again clears them */
+    setStars(view: number, n: number): void {
+        const cur = this.reactionOf(view)
+        this.putReaction(view, undefined, { ...cur, comment: cur?.comment ?? '', stars: cur?.stars === n ? undefined : n })
     }
 
     removeReaction(view: number, tile: number | undefined): void {
-        this.putReaction(view, tile, { status: undefined, comment: '' })
+        this.putReaction(view, tile, { comment: '' })
+    }
+
+    /** « pick »: that option is his answer, sent at once as an approval; his stars and words go with it */
+    async choose(view: number): Promise<void> {
+        if (!this.choice) return
+        this.edit((d) => ({ ...d, pick: view }))
+        await this.submit('approved')
     }
 
     /** the reactions that go to the agent with the verdict, in the card's order */
@@ -591,19 +688,27 @@ export class ReviewSt {
         return [...(this.draft.reactions ?? [])].sort((a, b) => a.view - b.view || (a.tile ?? -1) - (b.tile ?? -1))
     }
 
-    private putReaction(view: number, tile: number | undefined, r: { status: ReviewStatus | undefined; comment: string }): void {
-        const next: ReviewReaction = { view, ...(tile !== undefined ? { tile } : {}), ...(r.status ? { status: r.status } : {}), comment: r.comment }
-        const empty = !r.status && r.comment === ''
+    private putReaction(view: number, tile: number | undefined, r: { status?: ReviewStatus | undefined; comment: string; stars?: number | undefined }): void {
+        const next: ReviewReaction = { view, ...(tile !== undefined ? { tile } : {}), ...(r.status ? { status: r.status } : {}), comment: r.comment, ...(r.stars ? { stars: r.stars } : {}) }
+        const empty = !r.status && r.comment === '' && !r.stars
         this.edit((d) => {
             const rest = (d.reactions ?? []).filter((q) => !sameSpot(q, view, tile))
             return { ...d, reactions: empty ? rest : [...rest, next] }
         })
     }
 
-    /** the open view's clip identity, empty when it shows images */
+    /** the open view's clip identity (a clip, or a sound on a row), empty when it shows images */
     get clipKey(): string {
         const x = this.open
-        return x && this.openView?.clip ? `${x.item.id}#${this.view}` : ''
+        return x && this.playableAt(this.view) ? `${x.item.id}#${this.view}` : ''
+    }
+
+    /** a row's ▶: that option plays with its sound, the one playing before it stops; again, it pauses */
+    listen(i: number): void {
+        this.setView(i)
+        const c = this.clipOf(i)
+        if (c.paused) c.listen()
+        else c.pause()
     }
 
     /** the clock of a clip view of the open card: every clip view plays and steps on its own */
@@ -616,9 +721,14 @@ export class ReviewSt {
         let c = this.clips.get(view)
         if (!c) {
             c = new ClipSt()
-            const v = this.open?.item.views[view]
-            const info = v && !isGallery(v) ? v.clip : undefined
-            c.load(`${id}#${view}`, info?.duration ?? 0, info?.fps ?? 20)
+            const views = this.open?.item.views ?? []
+            const v = views[view]
+            const media = v && !isGallery(v) ? v : undefined
+            // one thing plays at a time: the first clip of a card loops on its own, the others and every option wait
+            const first = views.findIndex((w) => !isGallery(w) && w.clip !== undefined)
+            const still = this.rows || view !== first
+            if (media?.audio) c.load(`${id}#${view}`, media.audio.duration, SOUND_FPS, true)
+            else c.load(`${id}#${view}`, media?.clip?.duration ?? 0, media?.clip?.fps ?? 20, still)
             this.clips.set(view, c)
         }
         return c
@@ -740,7 +850,8 @@ export class ReviewSt {
         this.busy = true
         this.error = null
         try {
-            const m = await postJson<Message>(this.st.url(`/api/review/${id}/feedback`), { status, comment: d.comment, rects: d.rects, reactions: d.reactions ?? [] })
+            const pick = isChoice(x.item) && isApproved(status) && d.pick !== undefined ? { pick: d.pick } : {}
+            const m = await postJson<Message>(this.st.url(`/api/review/${id}/feedback`), { status, comment: d.comment, rects: d.rects, reactions: d.reactions ?? [], ...pick })
             runInAction(() => {
                 // the verdict shows at once: the list of every card comes back after it
                 const r = this.list
@@ -760,10 +871,22 @@ export class ReviewSt {
     }
 
     /** the page's keys, as the atelier takes its own: true when it used the key. V approves, F ok with a fix, R rejects,
-     *  A archives, N the next waiting card, M the rings, Delete the picked rectangle; on a clip Space plays, ← → a frame */
-    key(e: Pick<KeyboardEvent, 'key' | 'shiftKey'>): boolean {
+     *  A archives, N the next waiting card, M the rings, Delete the picked rectangle; on a clip Space plays, ← → a frame
+     *  (a sound: two seconds); on option rows 1 to 9 play that row, ⇧1 to ⇧5 score the row playing, P picks it. A digit is
+     *  read from its physical key (`code`), so ⇧ and an AZERTY keyboard read the same */
+    key(e: Pick<KeyboardEvent, 'key' | 'shiftKey'> & { code?: string }): boolean {
         const k = e.key.toLowerCase()
-        if (this.clipKey && e.key === ' ') this.clip.toggle()
+        const digit = Number(/^Digit([1-9])$/.exec(e.code ?? '')?.[1] ?? (/^[1-9]$/.test(e.key) ? e.key : 0))
+        const sound = this.openView?.audio !== undefined
+        if (this.rows && digit > 0 && !e.shiftKey) {
+            if (digit <= (this.open?.item.views.length ?? 0)) this.listen(digit - 1)
+        } else if (this.choice && this.rows && digit > 0 && e.shiftKey) {
+            if (digit <= STARS) this.setStars(this.view, digit)
+        } else if (this.choice && k === 'p') void this.choose(this.view)
+        else if (this.clipKey && e.key === ' ') {
+            if (this.clip.paused && this.rows) this.clip.listen()
+            else this.clip.toggle()
+        } else if (this.clipKey && sound && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) this.clip.jump(this.clip.time + (e.key === 'ArrowRight' ? SOUND_JUMP : -SOUND_JUMP))
         else if (this.clipKey && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) this.clip.step(e.key === 'ArrowRight' ? 1 : -1)
         else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') this.move(e.key === 'ArrowDown' ? 1 : -1)
         else if (k === 'v') void this.submit('approved')

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

@@ -1,10 +1,12 @@
 // the review page's middle column: every view of the open card stacked, each under its heading with the owner's reaction and
 // its zoom; a view is an image, a clip, a pair (side by side, the curtain, the onion skin, the after alone) or a
-// gallery of tiles. A drag on an image draws a rectangle, on a clip it pauses and keeps the frame's time
+// gallery of tiles. A drag on an image draws a rectangle, on a clip it pauses and keeps the frame's time. A choice, or
+// views that each play alone, show as thin option rows; the card's header sits on top when the page reads in one column
 import { observer } from 'mobx-react-lite'
 import { useEffect, useRef, useState, type ReactNode } from 'react'
-import { isGallery, isPair, onFrame, viewName, type GalleryView, type MediaView, type Rect, type ReviewClip, type ReviewItem, type ReviewMark, type ReviewView, type Side } from '../../../review/model.ts'
+import { isGallery, isPair, onFrame, STARS, thumbFileOf, verdictOf, viewName, type GalleryView, type MediaView, type Rect, type ReviewClip, type ReviewItem, type ReviewMark, type ReviewView, type Side } from '../../../review/model.ts'
 import { blurOnEscape, Empty, FIT_ROOM, keepFocus, PAIR_NAMES, REACTIONS, secs } from './kit.tsx'
+import { CardHead } from './review-answer.tsx'
 import type { ClipSt } from './clip-st.ts'
 import { CARD_PLACES, COMPARE_MODES, drawnSide, ZOOMS, type CompareMode, type CompareSt, type PairSide, type ReviewSt, type Zoom } from './review-st.ts'
 
@@ -16,12 +18,20 @@ export const ReviewImage = observer(({ rv }: { rv: ReviewSt }) => {
     if (!x) return <Empty text={rv.list ? 'No card. An agent adds one with sk review add.' : 'Reading the cards…'} />
     const r = x.item
     const views = r.views
-    const drawable = views.some((v) => !isGallery(v) && !v.clip)
+    const drawable = views.some((v) => !isGallery(v) && !v.clip && !v.audio)
+    const rows = rv.rows
     return (
         <div className="rv-views">
+            {rv.headInViews ? <CardHead rv={rv} x={x} verdicts={rv.stacked && !rv.phone.on} /> : null}
             <div className="rv-viewsbar">
-                {views.length > 1 ? <JumpList rv={rv} /> : <span />}
+                {views.length > 1 && !rows ? <JumpList rv={rv} /> : <span />}
                 <span className="rv-viewsctl">
+                    {asOptionsCard(rv) ? (
+                        <span className="seg" title="the options as thin rows, one below the other, or every view full">
+                            <button className={rows ? 'on' : ''} onMouseDown={keepFocus} onClick={() => rv.setFull(false)}>rows</button>
+                            <button className={rows ? '' : 'on'} onMouseDown={keepFocus} onClick={() => rv.setFull(true)}>full</button>
+                        </span>
+                    ) : null}
                     {rv.phone.on && drawable ? (
                         <button className={rv.phone.draw ? 'primary' : ''} onClick={() => rv.phone.toggleDraw()}>Circle</button>
                     ) : null}
@@ -36,12 +46,144 @@ export const ReviewImage = observer(({ rv }: { rv: ReviewSt }) => {
                 </span>
             </div>
             {rv.answered.map((y) => <Raised key={y.item.id} rv={rv} x={y} />)}
-            {views.map((v, i) => <ViewBlock key={`${r.id}#${i}`} rv={rv} id={r.id} v={v} i={i} many={views.length > 1} />)}
+            {rows ? (
+                <div className="rv-opts">{views.map((v, i) => <OptionRow key={`${r.id}#${i}`} rv={rv} x={x} v={v} i={i} />)}</div>
+            ) : (
+                views.map((v, i) => <ViewBlock key={`${r.id}#${i}`} rv={rv} id={r.id} v={v} i={i} many={views.length > 1} />)
+            )}
             {views.length === 0 ? <TextOnly x={x} /> : null}
         </div>
     )
 })
 
+/** the open card may show as rows: a choice, or views that each play alone (the switch shows while it shows full) */
+const asOptionsCard = (rv: ReviewSt): boolean => rv.rows || rv.full[rv.open?.item.id ?? ''] === true
+
+/** one option of a choice, or one view of a group, as a thin row: its number, ▶ and the clock, its label, a strip that
+ *  scrubs it, its stars and « pick » (a choice) or OK, fix, no (a group), ✎ his word, ⤢ the full view under it */
+const OptionRow = observer(({ rv, x, v, i }: { rv: ReviewSt; x: ReviewItem; v: ReviewView; i: number }) => {
+    const [word, setWord] = useState(false)
+    const id = x.item.id
+    const media = isGallery(v) ? null : v
+    const playable = media !== null && !isPair(media.files) && (media.clip !== undefined || media.audio !== undefined) ? media : null
+    const c = playable ? rv.clipOf(i) : null
+    const reaction = rv.reactionOf(i)
+    const choice = rv.choice
+    const picked = rv.draft.pick === i
+    const sent = verdictOf(x)?.pick === i
+    const unfolded = rv.openRows[i] === true
+    const file = playable ? ('video' in playable.files ? playable.files.video : 'audio' in playable.files ? playable.files.audio : '') : ''
+    const duration = playable?.clip?.duration ?? playable?.audio?.duration ?? 0
+    const showWord = word || (reaction?.comment ?? '') !== ''
+    return (
+        <div id={`review-view-${i}`} className={`rv-opt${rv.view === i ? ' active' : ''}${picked ? ' picked' : ''}${toneClass(reaction?.status)}`} onMouseDownCapture={() => rv.view !== i && rv.setView(i)}>
+            <div className="rv-optrow">
+                <span className="rv-optn">{i + 1}</span>
+                {c ? (
+                    <button className={`rv-optplay${c.paused ? '' : ' on'}`} title={`${c.paused ? 'play' : 'pause'} (${i + 1})`} onMouseDown={keepFocus} onClick={() => rv.listen(i)}>
+                        {c.paused ? '▶' : '❚❚'}
+                    </button>
+                ) : null}
+                <b className="rv-optlabel" title={viewName(v, i)}>{viewName(v, i)}</b>
+                {c && playable?.clip && !unfolded ? (
+                    <span className="rv-optthumb" style={{ aspectRatio: `${playable.size.w} / ${playable.size.h}` }} onClick={() => rv.toggleRow(i)} title="the full view">
+                        <ClipVideo clip={c} src={rv.fileUrl(id, file)} poster={rv.fileUrl(id, playable.clip.poster)} loop={false} />
+                    </span>
+                ) : null}
+                {c && playable ? (
+                    <Strip clip={c} duration={duration} wave={playable.audio ? rv.fileUrl(id, playable.audio.wave) : undefined} />
+                ) : (
+                    <span className="rv-optthumb img" onClick={() => rv.toggleRow(i)} title="the full view"><img src={rv.thumbUrl(x, thumbFileOf(v))} alt="" draggable={false} /></span>
+                )}
+                {c ? <span className="rv-mono rv-opttime">{clock(c.time)} / {clock(duration)}</span> : null}
+                <span className="rv-optacts">
+                    {choice ? <Stars rv={rv} view={i} /> : <ReactionToggles rv={rv} view={i} small />}
+                    <button className={`rv-optword${showWord ? ' on' : ''}`} title="a word on this one" onMouseDown={keepFocus} onClick={() => setWord(!word)}>✎</button>
+                    {playable?.clip || !playable ? (
+                        <button className={unfolded ? 'on' : ''} title={unfolded ? 'fold it back to its row' : 'the full view'} onMouseDown={keepFocus} onClick={() => rv.toggleRow(i)}>⤢</button>
+                    ) : null}
+                    {playable?.audio ? <a className="rv-dl" href={rv.fileUrl(id, file)} download={`${id}-${file}`} title="download the sound">⤓</a> : null}
+                    {choice ? (
+                        <button className={`rv-pick${picked ? ' on' : ''}`} title={`pick this one: it is your answer (P)${sent ? ', sent' : ''}`} disabled={rv.busy} onClick={() => void rv.choose(i)}>
+                            {picked ? '✓ picked' : 'pick'}
+                        </button>
+                    ) : null}
+                </span>
+            </div>
+            {media?.note ? <div className="rv-optnote">{media.note}</div> : null}
+            {showWord ? (
+                <textarea className="rv-word" rows={1} placeholder="a word on this one" value={reaction?.comment ?? ''} autoFocus={word && !reaction?.comment}
+                    onKeyDown={blurOnEscape} onChange={(e) => rv.setReactionComment(i, undefined, e.currentTarget.value)} />
+            ) : null}
+            {c && playable?.audio ? <SoundEl clip={c} src={rv.fileUrl(id, file)} /> : null}
+            {unfolded ? (
+                <div className="rv-optbody">
+                    {isGallery(v) ? <Gallery rv={rv} id={id} v={v} view={i} /> : <MediaBody rv={rv} id={id} v={v} i={i} zoom={rv.zoomOf(i)} />}
+                </div>
+            ) : null}
+        </div>
+    )
+})
+
+/** `1:05`: a time on a row, short */
+const clock = (t: number): string => `${Math.floor(t / 60)}:${String(Math.floor(t % 60)).padStart(2, '0')}`
+
+/** an option's score: STARS stars, a click on the one given clears it */
+const Stars = observer(({ rv, view }: { rv: ReviewSt; view: number }) => {
+    const n = rv.reactionOf(view)?.stars ?? 0
+    return (
+        <span className="rv-stars" title={`your score (⇧1 to ⇧${STARS} on the row playing)`}>
+            {Array.from({ length: STARS }, (_, k) => (
+                <button key={k} className={k < n ? 'on' : ''} aria-label={`${k + 1} of ${STARS}`} onMouseDown={keepFocus} onClick={() => rv.setStars(view, k + 1)}>{k < n ? '★' : '☆'}</button>
+            ))}
+        </span>
+    )
+})
+
+/** a thin track a row scrubs: a sound's waveform under what has played; a click or a drag moves the time */
+const Strip = observer(({ clip, duration, wave }: { clip: ClipSt; duration: number; wave: string | undefined }) => {
+    const el = useRef<HTMLDivElement>(null)
+    const down = (e: React.PointerEvent): void => {
+        const b = el.current?.getBoundingClientRect()
+        if (!b || duration <= 0) return
+        e.preventDefault()
+        const at = (px: number): void => clip.jump(Math.max(0, Math.min(1, (px - b.left) / b.width)) * duration)
+        at(e.clientX)
+        track((m) => at(m.clientX))
+    }
+    const played = duration > 0 ? Math.min(1, clip.time / duration) : 0
+    return (
+        <div ref={el} className={`rv-strip${wave ? ' wave' : ''}`} onPointerDown={down}>
+            {wave ? (
+                <>
+                    <Wave src={wave} className="rv-stripwave" />
+                    <Wave src={wave} className="rv-stripwave done" style={{ clipPath: `inset(0 ${100 - played * 100}% 0 0)` }} />
+                </>
+            ) : (
+                <div className="rv-stripdone" style={{ width: `${played * 100}%` }} />
+            )}
+            <div className="rv-striphead" style={{ left: `${played * 100}%` }} />
+        </div>
+    )
+})
+
+/** a waveform png as a mask the page fills with its own colour, so it reads on either theme (any colour it was drawn in) */
+const Wave = ({ src, className, style }: { src: string; className: string; style?: React.CSSProperties }) => {
+    const mask = `url("${src}") center / 100% 100% no-repeat`
+    return <div className={className} style={{ ...style, mask, WebkitMask: mask }} />
+}
+
+/** a sound row's player, no controls of its own: the row's clock drives it; at its end it waits at the start */
+const SoundEl = ({ clip, src }: { clip: ClipSt; src: string }) => {
+    const ref = useRef<HTMLAudioElement>(null)
+    useEffect(() => {
+        const el = ref.current
+        if (!el) return
+        return clip.attach(el)
+    }, [clip, src])
+    return <audio ref={ref} src={src} preload="metadata" onEnded={() => clip.seek(0)} />
+}
+
 /** a raised item the open card answers, nested above its views: the owner's words, his still */
 const Raised = observer(({ rv, x }: { rv: ReviewSt; x: ReviewItem }) => {
     const opening = x.thread.find((m) => m.op === undefined && m.text !== undefined)
@@ -213,7 +355,9 @@ const SoundBody = ({ rv, id, v }: { rv: ReviewSt; id: string; v: MediaView }) =>
             {rows.map((r) => (
                 <div key={r.file} className="rv-soundrow">
                     {r.label ? <div className="rv-dim">{r.label}</div> : null}
-                    <img src={rv.fileUrl(id, r.wave)} alt={`the waveform of ${r.file}`} draggable={false} style={{ width: '100%', aspectRatio: `${v.size.w} / ${v.size.h}`, display: 'block' }} />
+                    <div role="img" aria-label={`the waveform of ${r.file}`} className="rv-wavebox" style={{ aspectRatio: `${v.size.w} / ${v.size.h}` }}>
+                        <Wave src={rv.fileUrl(id, r.wave)} className="rv-stripwave full" />
+                    </div>
                     <audio controls preload="metadata" src={rv.fileUrl(id, r.file)} style={{ width: '100%' }} />
                 </div>
             ))}
@@ -463,15 +607,16 @@ const RectMark = ({ r, n, on, faint, at, pick }: { r: Rect; n: number; on: boole
 
 // ── a clip ──
 
-/** one video of the open view, driven by the view's one clock; muted until the sound button, looping, inline */
-const ClipVideo = ({ clip, src }: { clip: ClipSt; src: string }) => {
+/** one video of the open view, driven by the view's one clock; muted until the sound button, inline; looping, or at its
+ *  end waiting at the start */
+const ClipVideo = ({ clip, src, poster, loop = true }: { clip: ClipSt; src: string; poster?: string; loop?: boolean }) => {
     const ref = useRef<HTMLVideoElement>(null)
     useEffect(() => {
         const el = ref.current
         if (!el) return
         return clip.attach(el)
     }, [clip, src])
-    return <video ref={ref} className="rv-video" src={src} muted loop playsInline preload="auto" />
+    return <video ref={ref} className="rv-video" src={src} poster={poster} muted loop={loop} playsInline preload="auto" onEnded={loop ? undefined : () => clip.seek(0)} />
 }
 
 /** the sound button and the volume: a volume moved turns the sound on */

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

@@ -118,7 +118,7 @@
 .rv-word{margin-top:var(--s2)}
 .rv-raised{padding:var(--s2) var(--s3);border:1px solid var(--line);border-left:4px solid var(--warn);border-radius:4px;background:var(--panel)}
 .rv-raisedimg{display:block;max-width:100%;max-height:320px;margin-top:var(--s2);border-radius:4px}
-.rv-pairgrid{margin:0 auto;display:grid;gap:var(--s2)}
+.rv-pairgrid{display:grid;gap:var(--s2)}
 .rv-cell{display:flex;flex-direction:column;align-items:center;gap:var(--s0);min-width:0}
 .rv-frame{position:relative;width:100%;max-width:100%;border-radius:4px;border:1px solid var(--line);overflow:hidden;
  background:repeating-conic-gradient(var(--chk1) 0 25%,var(--chk2) 0 50%) 0 0/16px 16px}
@@ -148,7 +148,7 @@
 .rv-tile{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s1);border-radius:6px;border:2px solid var(--line)}
 .rv-tile[class*=' re-']{border-color:var(--tone);background:color-mix(in srgb,var(--tone) 8%,transparent)}
 .rv-tile.big{width:100%}
-.rv-tileimg{border-radius:4px;cursor:zoom-in;margin:0 auto;width:100%;background:repeating-conic-gradient(var(--chk1) 0 25%,var(--chk2) 0 50%) 0 0/12px 12px}
+.rv-tileimg{border-radius:4px;cursor:zoom-in;width:100%;background:repeating-conic-gradient(var(--chk1) 0 25%,var(--chk2) 0 50%) 0 0/12px 12px}
 .rv-tile.big .rv-tileimg{cursor:zoom-out}
 .rv-tileimg img{display:block;width:100%;height:100%;object-fit:contain}
 .rv-tilelabel{font-size:11px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@@ -159,19 +159,62 @@
 .rv-sound button{padding:0 var(--s1);line-height:22px}
 .rv-sound input{width:72px}
 .rv-phonepair{display:flex;flex-direction:column;gap:var(--s2)}
+/* options: one thin row a view, one below the other; the row playing or last touched has the line, the picked one its tone */
+.rv-opts{display:flex;flex-direction:column;gap:var(--s1)}
+.rv-opt{scroll-margin-top:8px;padding:var(--s1) var(--s2);border-radius:6px;border:1px solid var(--line);border-left:4px solid transparent;background:var(--panel)}
+.rv-opt.active{border-left-color:var(--accent)}
+.rv-opt[class*=' re-']{border-left-color:var(--tone)}
+.rv-opt.picked{--tone:var(--ok);border-color:var(--tone);border-left-color:var(--tone);background:color-mix(in srgb,var(--tone) 9%,var(--panel))}
+.rv-optrow{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s2);align-items:center;min-height:32px}
+.rv-optn{flex:none;width:16px;text-align:right;font:600 12px ui-monospace,Menlo,monospace;color:var(--dim)}
+.rv-optplay{flex:none;width:32px;height:28px;padding:0;font-size:13px}
+.rv-optplay.on{color:var(--bg);background:var(--accent);border-color:var(--accent)}
+.rv-optlabel{flex:0 1 auto;min-width:48px;max-width:30%;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.rv-optthumb{flex:none;height:32px;max-width:72px;border-radius:3px;overflow:hidden;cursor:zoom-in;border:1px solid var(--line);background:var(--panel2)}
+.rv-optthumb.img{width:48px}
+.rv-optthumb img{display:block;width:100%;height:100%;object-fit:cover}
+.rv-strip{position:relative;flex:1 1 140px;min-width:120px;height:28px;border-radius:3px;cursor:pointer;touch-action:none;background:var(--panel2);border:1px solid var(--line);overflow:hidden}
+.rv-stripdone{position:absolute;inset:0 auto 0 0;background:var(--wash)}
+/* a waveform is a mask filled with tokens: --dim to play (5.0:1 on --panel2 light, 5.3:1 dark), --accent played
+   (4.9:1 both) */
+.rv-stripwave{position:absolute;inset:0;background:var(--dim)}
+.rv-stripwave.done{background:var(--accent)}
+.rv-stripwave.full{background:var(--accent)}
+.rv-wavebox{position:relative;width:100%;border-radius:4px;background:var(--panel2)}
+.rv-striphead{position:absolute;top:0;bottom:0;width:2px;transform:translateX(-1px);background:var(--accent)}
+.rv-opttime{flex:none;font-size:11px;color:var(--dim)}
+.rv-optacts{flex:none;display:inline-flex;gap:var(--s1);align-items:center;margin-left:auto}
+.rv-optacts > button{padding:0 var(--s1);line-height:22px}
+.rv-optacts > button.on{border-color:var(--accent)}
+.rv-stars{display:inline-flex}
+.rv-stars button{border:0;background:none;padding:0;font-size:16px;line-height:22px;color:var(--dim)}
+.rv-stars button.on{color:var(--warn)}
+.rv-pick{font-weight:700;padding:0 var(--s3)!important;color:var(--ok);border-color:color-mix(in srgb,var(--ok) 55%,var(--line))}
+.rv-pick.on{color:var(--bg);background:var(--ok);border-color:var(--ok)}
+.rv-optnote{margin:var(--s0) 0 0 var(--s4);font-size:12.5px;color:var(--ink)}
+.rv-opt .rv-word{margin:var(--s1) 0 0 var(--s4);width:calc(100% - var(--s4))}
+.rv-optbody{margin-top:var(--s2)}
 
 /* ── the answer ── */
 .rv-form{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s3)}
-.rv-status{padding:var(--s1) var(--s3);border-radius:4px;border:1px solid color-mix(in srgb,var(--tone) 45%,var(--line));border-left:4px solid var(--tone);background:color-mix(in srgb,var(--tone) 10%,var(--panel))}
-.rv-statushead{font-weight:800;color:var(--tone);display:flex;gap:var(--s1);align-items:center;flex-wrap:wrap}
-.rv-title{margin:0;font-size:17px;line-height:1.3}
-.rv-what{font-size:13px}
-.rv-what ul{margin:var(--s1) 0;padding-left:var(--s4)}
-.rv-what p{margin:var(--s1) 0}
+.rv-title{margin:0;font-size:16px;line-height:1.3;color:var(--ink)}
+/* the card's header: the title, one tight line of state, then what the agent says at full ink; --dim holds 5.6:1 or
+   more on --bg and --panel in both themes */
+.rv-head{display:flex;flex-direction:column;gap:var(--s1)}
+.rv-meta{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s2);align-items:center;font-size:12px;color:var(--dim);line-height:18px}
+.rv-meta .rv-badge{font-size:10px;line-height:18px;max-width:none}
+.rv-copyid{font-size:11.5px;padding:0 var(--s1);line-height:18px;color:var(--dim)}
+.rv-copyid:hover{color:var(--ink)}
+.rv-what{font-size:13.5px;line-height:1.45;color:var(--ink)}
+.rv-what ul{margin:var(--s0) 0;padding-left:var(--s4)}
+.rv-what p{margin:var(--s0) 0}
+.rv-why{color:var(--dim);font-size:12px}
+.rv-headverdicts{display:flex;flex-wrap:wrap;gap:var(--s1);align-items:center;margin-top:var(--s1)}
+.rv-headverdicts .rv-verdict{padding:0 var(--s2);line-height:24px;font-size:12.5px}
 .rv-keeps{color:var(--ok);font-size:13px}
 .rv-facts{display:flex;flex-direction:column}
-.rv-fact{display:flex;gap:var(--s2);align-items:center;min-height:24px;font-size:12.5px}
-.rv-factl{width:64px;flex:none;color:var(--dim);font-size:11px}
+.rv-fact{display:flex;gap:var(--s2);align-items:center;min-height:22px;font-size:12.5px}
+.rv-factl{width:64px;flex:none;color:var(--dim);font-size:12px}
 .rv-factv{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .rv-linked{padding:var(--s1) var(--s2);border:1px solid var(--line);border-radius:4px;background:var(--panel)}
 .rv-linkedrow{display:flex;gap:var(--s2);align-items:center;font-size:12px}
@@ -208,6 +251,16 @@
 .rv-verdictbar{flex:none;display:flex;gap:var(--s1);padding:var(--s2);border-top:1px solid var(--line);background:var(--panel)}
 .rv-verdictbar .rv-verdict{flex:1;text-align:center;font-size:14px;padding:var(--s2) var(--s1);color:var(--tone)}
 .rv-verdictbar .rv-verdict.chosen{color:var(--bg)}
+.rv-phone .rv-views{gap:var(--s3)}
+/* a row on a phone: ▶, the label and the time on one line, the strip and the acts under them */
+.rv-phone .rv-optrow{flex-wrap:wrap;row-gap:var(--s1)}
+.rv-phone .rv-optlabel{flex:1;max-width:none}
+.rv-phone .rv-strip{order:5;flex:1 1 100%;height:32px}
+.rv-phone .rv-optthumb{order:4}
+.rv-phone .rv-optacts{order:6;flex:1 1 100%;justify-content:space-between}
+.rv-phone .rv-stars button{font-size:22px;padding:0 var(--s1)}
+.rv-phone .rv-optplay{width:40px;height:34px}
+.rv-phone .rv-optnote,.rv-phone .rv-opt .rv-word{margin-left:0;width:100%}
 
 /* ── the trailer page ── */
 .tr-cuts{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s3)}
@@ -323,6 +376,13 @@
 .rv-boardrow .rv-linkedtitle{display:block}
 .rv-kindview{display:flex;flex-direction:column;gap:var(--s2);margin:var(--s2) 0}
 .rv-kindtext{font:12px/1.5 ui-monospace,Menlo,monospace;background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:var(--s2) var(--s3);margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
+.rv-part{border:1px solid var(--line);border-radius:4px;padding:var(--s2) var(--s3);margin-top:var(--s2);background:var(--panel)}
+.rv-parthead{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s2)}
+.rv-particon{width:20px;height:20px;border-radius:5px;flex:none}
+.rv-partbadge{margin-left:auto;font-size:11px;font-weight:700;border:1px solid;border-radius:3px;padding:0 var(--s1)}
+.rv-partbody{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s3);align-items:start}
+.rv-partbody img,.rv-partbody video{width:100%;max-height:320px;object-fit:contain;border-radius:6px;display:block}
+.rv-parttext{font-size:13px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
 .rv-anim select{font-size:12px}
 /* a sound view (review-views.tsx SoundBody): its waveform over the player, a row a side on a pair */
 .rv-sound{display:flex;flex-direction:column;gap:var(--s2)}