rvlib-shipkit 2.1.1 → 2.3.0

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

@@ -13,7 +13,10 @@
 // labeled sorts (a pick sorts once, the button names the order the list is
 // in), archived shows or hides the archived repos just above the foot
 // (names only, no ⌘ number, a row opens the archived page, nothing loads),
-// the foot never moving. On the home a section of four lines on top, in the
+// the foot never moving. ⌘B (or the foot's fold button, or a drag of the
+// separator below the list's min) folds the list to its icon rail: the
+// names, the ⌘ hints and the step hint hide, the badge rides the icon's
+// corner, the hover card still names the row. On the home a section of four lines on top, in the
 // repo rows' style, opens the picker, the overview, the activity and the
 // plan, each with its shortcut at the line's end, the page shown lit. It
 // renders from the first paint with the list this browser kept, so a load
@@ -24,14 +27,17 @@ import { useEffect, type CSSProperties } from 'react'
 import { middleware, OPEN_MS } from './floating.tsx'
 import { Icon, ICON } from './icons.tsx'
 import { plainClick } from './home-st.ts'
-import { PICKER_KEY, PLACE_KEY, STEP_KEYS } from './keys.ts'
-import { cardModel, faceOf, hueOf, SORTS, type Place, type Project, type ProjectsSvc } from './projects-svc.ts'
+import { PICKER_KEY, PLACE_KEY, RAIL_KEY, STEP_KEYS } from './keys.ts'
+import { cardModel, faceOf, hueOf, idVars, SORTS, type Place, type Project, type ProjectsSvc } from './projects-svc.ts'
+import { THEMES, type ThemePick } from './theme-st.ts'
+import { RAIL_ICONS, type RailIcon } from './layout-st.ts'
 
-/** what the list needs of its page: the hub and the home both carry one */
-export type ListHost = { projects: ProjectsSvc }
+/** what the list needs of its page: the hub and the home both carry one;
+ *  the layout, when the page can fold the list to its rail */
+export type ListHost = { projects: ProjectsSvc; layout?: { listRail: boolean; toggleRail(): void; railIcon: RailIcon; cycleRailIcon(): void }; theme?: { pick: ThemePick; cycle(): void } }
 
 /** the lines on top of the list, in their order: the picker, the overview,
- *  then the places, their shortcuts ⌘J ⌘K ⌘L ⌘' top to bottom */
+ *  then the places, each with its shortcut (keys.ts) */
 const PLACES: { id: Place | 'picker'; label: string; title: string }[] = [
     { id: 'picker', label: 'jump to…', title: 'jump to a page, a repo or one of its resources' },
     { id: 'overview', label: 'overview', title: 'the overview: shipkit, every global process and every repo on this machine' },
@@ -65,7 +71,7 @@ export const Row = observer(({ app, p, i }: { app: ListHost; p: Project; i: numb
     const dot = s.dotOf(p.name)
     const warn = s.warnOf(p.name)
     // the shown repo's row is marked in its own colour
-    const mark = cur ? ({ '--pjc': s.identityOf(p.name).colorDark } as CSSProperties) : undefined
+    const mark = cur ? (idVars(s.identityOf(p.name)) as CSSProperties) : undefined
     return (
         <>
             <button ref={f.refs.setReference} className={cls} aria-label={p.name} style={mark} draggable
@@ -155,8 +161,10 @@ export const Card = ({ p, now }: { p: Project; now: number }) => {
 export const ProjectList = observer(({ app }: { app: ListHost }) => {
     useEffect(() => app.projects.start(), [app])
     const s = app.projects
+    const lay = app.layout
+    const rail = lay?.listRail === true
     return (
-        <nav className="pjlist" aria-label="projects">
+        <nav className={`pjlist${rail ? ' rail' : ''}`} aria-label="projects" style={rail ? ({ '--ri': `${RAIL_ICONS[lay!.railIcon]}px` } as CSSProperties) : undefined}>
             {s.onPlace == null && s.onPicker == null && s.error === '' ? null : (
                 <div className="pjhead">
                     {PLACES.map((pl) => {
@@ -195,6 +203,17 @@ export const ProjectList = observer(({ app }: { app: ListHost }) => {
                 </div>
             ) : null}
             <div className="pjfoot">
+                {lay == null ? null : (
+                    <button className="pjfold" aria-pressed={rail} title={`${rail ? 'show the names' : 'fold the list to its icons'} (${RAIL_KEY})`} onClick={() => lay.toggleRail()}>
+                        <Icon d={ICON.rail} />
+                    </button>
+                )}
+                {lay == null || !rail ? null : (
+                    <button className="pjfold pjsize" aria-label={`icon size: ${lay.railIcon}`} title={`the icons: ${SIZE_WORDS[lay.railIcon]}; click for the next size`} onClick={() => lay.cycleRailIcon()}>
+                        {lay.railIcon.toUpperCase()}
+                    </button>
+                )}
+                {app.theme == null ? null : <ThemeButton t={app.theme} />}
                 <SortButton s={s} />
                 <span className="pjstep" title={`${STEP_KEYS[0]} and ${STEP_KEYS[1]} open the repo above or below, from any page`}>
                     {STEP_KEYS.map((k) => <kbd key={k}>{k}</kbd>)}
@@ -211,6 +230,20 @@ export const ProjectList = observer(({ app }: { app: ListHost }) => {
     )
 })
 
+const SIZE_WORDS: Record<RailIcon, string> = { s: 'small', m: 'medium', l: 'large' }
+
+const THEME_ICON: Record<ThemePick, keyof typeof ICON> = { dark: 'moon', light: 'sun', auto: 'auto' }
+
+/** the theme: dark, light or auto (the system's), one click to the next */
+const ThemeButton = observer(({ t }: { t: { pick: ThemePick; cycle(): void } }) => {
+    const next = THEMES[(THEMES.indexOf(t.pick) + 1) % THEMES.length]
+    return (
+        <button className="pjfold" aria-label={`theme: ${t.pick}`} title={`theme: ${t.pick}${t.pick === 'auto' ? ' (follows the system)' : ''}; click for ${next}`} onClick={() => t.cycle()}>
+            <Icon d={ICON[THEME_ICON[t.pick]]} />
+        </button>
+    )
+})
+
 /** the words for the order the list is in */
 const orderWords = (s: ProjectsSvc): string => {
     const m = s.sortMode

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

@@ -7,6 +7,10 @@ import type { ArchivedRow, ProjectRow as Project, Release } from '../project-gut
 import { identityOfName, type Identity } from '../../core/identity-color.ts'
 import { ownTrouble, reach } from './reach.ts'
 
+/** a repo's two colours as the vars a `.idc` element or a list row reads,
+ *  hub.css picking the one for the page's theme */
+export const idVars = (id: Pick<Identity, 'colorDark' | 'colorLight'>): Record<'--idd' | '--idl', string> => ({ '--idd': id.colorDark, '--idl': id.colorLight })
+
 /** the list never says the page's server is gone, even where no machine
  *  card is (a hub on its own): that hub's trouble card says it */
 const SAID_ELSEWHERE = true

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

@@ -8,7 +8,7 @@
 // own has none of the three. The counts read the severity filter, like everything under them,
 // and come from what the page already holds (the kept screen on a reload), so
 // none arrives late and moves the tree.
-import { RUNS_ID } from '../../collections/collection-types.ts'
+import { REVIEW_COL, RUNS_ID, TRAILER_COL } from '../../collections/collection-types.ts'
 import type { CheckOwner, HashSel } from './hash-route.ts'
 import { sectionLabel, type SectionId } from './keys.ts'
 import type { RepoSt } from './repo-st.ts'
@@ -45,6 +45,8 @@ export function sectionOfSel(sel: HashSel | null, ownerOf: (checkItemId: string)
         case 'when': return 'when'
         case 'checks': return sel.from
         case 'admin': return 'admin'
+        case 'review': return 'review'
+        case 'trailer': return 'trailer'
         case 'tests': return 'tests'
         case 'asset': case 'cat': return 'media'
         case 'status': return null
@@ -54,6 +56,8 @@ export function sectionOfSel(sel: HashSel | null, ownerOf: (checkItemId: string)
             if (col === WIKIS) return 'wikis'
             if (col === 'contracts') return 'contracts'
             if (col === 'creds') return 'secrets'
+            if (col === REVIEW_COL) return 'review'
+            if (col === TRAILER_COL) return 'trailer'
             if (col === 'checks') return sel.t === 'item' ? ownerOf(sel.id) : null
             return col === 'asks' || col === 'tests' || col === 'reflections' ? col : null
         }
@@ -87,11 +91,14 @@ export function openSection(app: RepoSt, id: SectionId): void {
         }
         case 'wikis': return openWikis(app)
         case 'admin': return app.showAdmin()
+        case 'review': return app.showReview(app.review.selectedId)
+        case 'trailer': return app.showTrailer(app.trailer.trailerId, app.trailer.cutId)
     }
 }
 
-/** the sections whose page says it is empty, so an empty row still opens it */
-const EMPTY_PAGES = new Set<SectionId>(['processes'])
+/** the sections whose page says it is empty, so an empty row still opens it: the review and trailer pages say how a
+ *  first card or a first cut comes */
+const EMPTY_PAGES = new Set<SectionId>(['processes', 'review', 'trailer'])
 
 export function repoSections(app: RepoSt): RepoSection[] {
     const has = (col: string): boolean => app.cols.colMeta.some((c) => c.id === col)
@@ -106,6 +113,11 @@ export function repoSections(app: RepoSt): RepoSection[] {
     const out: RepoSection[] = [line('readme', 'the README, what the repo is', none)]
     const ownReds = (from: CheckOwner): number => res.filter((r) => r.check?.from === from && r.state === 'red').length
     const unless = (on: boolean, why: string): string | null => (on ? null : why)
+    // review and trailer sit right under the readme: the pages he answers
+    out.push(line('review', 'the review cards agents send you: approve, fix, reject, circle a detail', counted(res.filter((r) => r.type === 'card').length, 'warn'),
+        unless(has(REVIEW_COL), 'no review card yet: an agent sends one with sk review add')))
+    out.push(line('trailer', 'the trailer cuts: play one with its timeline, pin a note on any frame', none,
+        unless(has(TRAILER_COL), 'no trailer: write trailer/<name>/main.trailer, then sk trailer')))
     out.push(line('contracts', 'what a release venue asks of this repo, and what it still lacks', counted(reds('contracts'), 'red'), unless(has('contracts'), 'no contract: no release venue applies to this repo')))
     const noChecks = unless(has('checks'), 'no checks yet: its hub has not answered')
     out.push(line('shipkit', 'the checks shipkit ships to every repo, one page each', counted(ownReds('shipkit'), 'red'), noChecks))

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

@@ -21,8 +21,10 @@ import { GitSt } from './git-st.ts'
 import type { ProcessRow } from '../../home/process-rows.ts'
 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 { repoSections } from './repo-sections.ts'
-import { sectionKeyLabel } from './keys.ts'
+import { isTreeWalk, sectionKeyLabel } from './keys.ts'
 import type { Resource } from './hub-types.ts'
 import type { HomeSt } from './home-st.ts'
 
@@ -66,6 +68,10 @@ export class RepoSt {
     tests: TestsSvc
     /** the admin page: archive behind its confirmation, reload, keep active */
     admin: AdminSvc
+    /** the review page: the cards of the one store and his answers (review/review-st.ts) */
+    review: ReviewSt
+    /** the trailer page: a cut played with its timeline and his frame notes (review/trailer-st.ts) */
+    trailer: TrailerSt
     sel: Sel = null
     filter: Filter = 'all'
     /** sidebar search — live substring filter over asset + collection rows */
@@ -103,7 +109,9 @@ export class RepoSt {
         this.git = new GitSt(this)
         this.tests = new TestsSvc(this)
         this.admin = new AdminSvc(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, searchEl: false, beat: false })
+        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 })
     }
 
     /** an absolute hub path ('/api/…', '/media/…', '/hub.json') as this
@@ -175,6 +183,8 @@ export class RepoSt {
         this.media.start()
         this.cols.start()
         this.live.start()
+        if (this.sel?.t === 'review') this.review.start()
+        if (this.sel?.t === 'trailer') this.trailer.start()
     }
 
     /** stop polling, keep every state: a resume shows the same page */
@@ -185,6 +195,8 @@ export class RepoSt {
         this.media.stop()
         this.cols.stop()
         this.live.stop()
+        this.review.stop()
+        this.trailer.stop()
     }
 
     dispose(): void {
@@ -285,7 +297,11 @@ export class RepoSt {
         const next = parseHash(h)
         // 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) return
+        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}`)
+            return
+        }
         if (this.walking && this.walked) history.replaceState(null, '', `#${h}`)
         else history.pushState(null, '', `#${h}`)
         this.walked = this.walking
@@ -295,6 +311,11 @@ export class RepoSt {
      *  lands on the raw wall of text unless it is asked for by name */
     openResource(r: Resource): void {
         if (r.type === 'process') return this.showProcesses(r.id.replace(/^process:/, ''))
+        if (r.type === 'card') return this.showReview(r.id.replace(/^card:/, ''))
+        if (r.type === 'cut') {
+            const [trailer = null, cut = null] = r.id.replace(/^cut:/, '').split('/')
+            return this.showTrailer(trailer, cut)
+        }
         const assetId = r.id.replace(/^media:/, '')
         if (r.collection === 'media' && this.media.assets.some((a) => a.id === assetId)) {
             this.selectAsset(assetId)
@@ -339,6 +360,25 @@ export class RepoSt {
     showProcesses(id: string | null): void {
         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 {
+        this.review.select(id)
+        this.setSel({ t: 'review', id })
+        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
+     *  the trailer page (its player keys), as the atelier takes its roll keys. True when the page used it. ↑ ↓ stay
+     *  the tree's while its cursor walks it, so a walk crosses these sections; a click in the page hands them back */
+    pageKey(e: Pick<KeyboardEvent, 'key' | 'shiftKey'>): boolean {
+        if (isTreeWalk(e.key) && !e.shiftKey && this.tree.cursor != null) return false
+        return (this.sel?.t === 'review' && this.review.key(e)) || (this.sel?.t === 'trailer' && this.trailer.key(e))
+    }
+    /** the trailer page on a trailer folder and one of its cuts, null for the first */
+    showTrailer(trailer: string | null, cut: string | null, note: string | null = null, filter: 'open' | 'all' | null = null): void {
+        this.trailer.select(trailer, cut, note, filter)
+        this.setSel({ t: 'trailer', trailer, cut, note, filter })
+        if (this.polling) this.trailer.start()
+    }
 
     /** collection view — one card per instance */
     showCol(id: string): void {
@@ -360,6 +400,8 @@ 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 'trailer': return this.showTrailer(sel.trailer, sel.cut, sel.note ?? null, sel.filter ?? null)
         }
     }
     /** the url decides the page: a reload, back, forward and a pasted link

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

@@ -0,0 +1,208 @@
+// 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
+import { makeAutoObservable, runInAction } from 'mobx'
+
+/** the part of a video element the clock drives */
+interface ClipEl {
+    currentTime: number
+    muted: boolean
+    volume: number
+    playbackRate: number
+    readonly paused: boolean
+    play(): Promise<void> | void
+    pause(): void
+}
+
+/** a follower further than this from the first video, in seconds, is put back on it */
+const DRIFT = 0.06
+const KEY = 'shipkit.review.sound'
+
+/** the page's one sound choice and volume, kept for the next visit */
+class Heard {
+    on = false
+    level = 0.8
+    constructor() {
+        try {
+            const v = JSON.parse(localStorage.getItem(KEY) ?? '{}') as { on?: boolean; level?: number }
+            if (typeof v.on === 'boolean') this.on = v.on
+            if (typeof v.level === 'number' && v.level > 0 && v.level <= 1) this.level = v.level
+        } catch {
+            // a blocked storage only loses the kept choice
+        }
+        makeAutoObservable(this)
+    }
+    private save(): void {
+        try {
+            localStorage.setItem(KEY, JSON.stringify({ on: this.on, level: this.level }))
+        } catch {
+            // as above
+        }
+    }
+    setOn(on: boolean): void {
+        this.on = on
+        this.save()
+    }
+    set(level: number): void {
+        this.level = Math.max(0, Math.min(1, level))
+        this.save()
+    }
+}
+
+export const heard = new Heard()
+
+export class ClipSt {
+    /** which clip is on screen, empty when none */
+    key = ''
+    /** the clip's length in seconds, its frames a second */
+    duration = 0
+    fps = 20
+    paused = false
+    /** the audio track on: only the first video is heard */
+    sound: boolean
+    /** the time on screen, in seconds: exact while paused, the first video's while it plays */
+    time = 0
+    /** a play the browser refused, shown under the clip */
+    error: string | null = null
+    /** the playback speed, 1 the clip's own */
+    rate = 1
+    private els: ClipEl[] = []
+    private raf = 0
+
+    constructor() {
+        this.sound = heard.on
+        makeAutoObservable<this, 'els' | 'raf' | 'follow'>(this, { els: false, raf: false, follow: false })
+    }
+
+    get volume(): number {
+        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 {
+        if (key === this.key) return
+        this.key = key
+        this.duration = duration
+        this.fps = fps > 0 ? fps : 20
+        this.time = 0
+        this.paused = false
+        this.error = null
+    }
+
+    /** the frame index of a time */
+    frameOf(t: number): number {
+        const last = Math.max(0, Math.round(this.duration * this.fps) - 1)
+        return Math.max(0, Math.min(last, Math.floor(t * this.fps + 1e-6)))
+    }
+
+    /** the middle of frame `k`, where a seek lands on that frame for sure */
+    private centerOf(k: number): number {
+        return (k + 0.5) / this.fps
+    }
+
+    /** a video of the view on screen; it returns its release */
+    attach(el: ClipEl): () => void {
+        this.els.push(el)
+        el.muted = !this.sound || this.els[0] !== el
+        el.volume = heard.level
+        el.playbackRate = this.rate
+        el.currentTime = this.paused ? this.time : (this.els[0]?.currentTime ?? this.time)
+        if (this.paused) el.pause()
+        else this.start(el)
+        if (this.raf === 0 && typeof requestAnimationFrame === 'function') this.raf = requestAnimationFrame(this.follow)
+        return () => {
+            this.els = this.els.filter((e) => e !== el)
+        }
+    }
+
+    toggleSound(): void {
+        this.hear(!this.sound)
+        heard.setOn(this.sound)
+    }
+
+    /** this clip's sound on or off, the kept choice left as it is */
+    hear(on: boolean): void {
+        this.sound = on
+        this.els.forEach((el, i) => (el.muted = !this.sound || i > 0))
+    }
+
+    /** a volume asked is a sound wanted, and none is the sound off */
+    setVolume(v: number): void {
+        if (v > 0) heard.set(v)
+        for (const el of this.els) el.volume = heard.level
+        if (this.sound !== v > 0) this.toggleSound()
+    }
+
+    toggle(): void {
+        if (this.paused) this.play()
+        else this.pause()
+    }
+
+    play(): void {
+        this.paused = false
+        this.error = null
+        for (const el of this.els) this.start(el)
+    }
+
+    /** stops on the frame the first video shows */
+    pause(): void {
+        this.seek(this.els[0]?.currentTime ?? this.time)
+    }
+
+    /** paused on the frame at `t` */
+    seek(t: number): void {
+        this.paused = true
+        this.time = this.centerOf(this.frameOf(t))
+        for (const el of this.els) {
+            el.pause()
+            el.currentTime = this.time
+        }
+    }
+
+    /** to `t`, playing on when it played: a jump while it plays never stops it */
+    jump(t: number): void {
+        if (this.paused) return this.seek(t)
+        const to = Math.max(0, Math.min(this.duration, t))
+        this.time = to
+        for (const el of this.els) el.currentTime = to
+    }
+
+    setRate(r: number): void {
+        this.rate = r
+        for (const el of this.els) el.playbackRate = r
+    }
+
+    /** `n` frames on (or back), paused, wrapping round the loop */
+    step(n: number): void {
+        const count = Math.max(1, Math.round(this.duration * this.fps))
+        const from = this.paused ? this.time : (this.els[0]?.currentTime ?? this.time)
+        this.seek(this.centerOf((((this.frameOf(from) + n) % count) + count) % count))
+    }
+
+    private start(el: ClipEl): void {
+        const p = el.play()
+        if (p)
+            p.catch((e: Error) => {
+                // a pause that lands before the play resolves aborts it: that is the pause working
+                if (e.name === 'AbortError') return
+                runInAction(() => {
+                    this.paused = true
+                    this.error = `play refused: ${e.message}`
+                })
+            })
+    }
+
+    /** each frame while it plays: the time read from the first video, the others put back on it */
+    private follow = (): void => {
+        this.raf = 0
+        if (this.els.length === 0) return
+        const lead = this.els[0]
+        if (lead && !this.paused) {
+            const t = lead.currentTime
+            runInAction(() => (this.time = t))
+            for (const el of this.els.slice(1)) if (Math.abs(el.currentTime - t) > DRIFT) el.currentTime = t
+        }
+        this.raf = requestAnimationFrame(this.follow)
+    }
+}

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

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