+
+)
diff --git a/website/src/components/tui/data.ts b/website/src/components/tui/data.ts
new file mode 100644
index 0000000..c62813c
--- /dev/null
+++ b/website/src/components/tui/data.ts
@@ -0,0 +1,216 @@
+/*
+ * Sample data for the TUI recreation in the hero.
+ *
+ * Everything here is invented, public-domain, or Creative Commons. No real
+ * artist, album, or track names — see TONE-OF-VOICE.md §5 "Banned for legal
+ * reasons". Anything added here has to keep that true.
+ */
+
+export interface SearchRow {
+ id: string
+ query: string
+ results: number | string
+ status: string
+}
+
+export interface ResultRow {
+ name: string
+ size: string
+ user: string
+ bitrate: string
+ speed: string
+ slots: number
+ /** Marked for download with Space, not yet queued. */
+ marked?: boolean
+ /** Handed to the transfer list. */
+ queued?: boolean
+}
+
+export type TransferStatus = 'queued' | 'active' | 'done' | 'fail'
+
+export interface TransferRow {
+ id: string
+ status: TransferStatus
+ name: string
+ user: string
+ progress: string
+ speed: string
+ /** Present only on transfers the demo drives; the static rows leave it out. */
+ pct?: number
+ sizeMb?: number
+ rateMbps?: number
+}
+
+interface TmuxWindow {
+ n: number
+ name: string
+ active?: boolean
+}
+
+export const HOST = 'michels-macbook-pro-m4'
+export const CLOCK = '01:45 PM'
+export const DATE = '2026-07-24'
+export const SESSION = 'develop'
+export const SHARE = '/Users/micheldegraaf/Downloads/Soulseek'
+
+export const WINDOWS: readonly TmuxWindow[] = [
+ { n: 1, name: 'fish #' },
+ { n: 2, name: 'fish #' },
+ { n: 3, name: 'fish #' },
+ { n: 4, name: 'fish #-' },
+ { n: 5, name: 'fish *', active: true },
+]
+
+export const SEARCHES: readonly SearchRow[] = [
+ { id: 's1', query: 'public domain field recordings', results: 606, status: 'Done' },
+ { id: 's2', query: 'creative commons ambient', results: 33, status: 'Done' },
+ { id: 's3', query: 'netlabel 2004', results: 608, status: 'Done' },
+]
+
+const pd = (name: string, size: string, bitrate: string): ResultRow => ({
+ name: `shared\\archive\\PD Field Recordings\\${name}`,
+ size,
+ user: 'loopdigger',
+ bitrate,
+ speed: '3.35 MB/s',
+ slots: 1,
+})
+
+export const RESULTS: Readonly> = {
+ s1: [
+ pd('01 - Coastal Dawn (Sunrise Take).flac', '30.5 MB', '675 kbps'),
+ pd('02 - Reservoir Wind.flac', '22.6 MB', '569 kbps'),
+ pd('cover.jpg', '0.0 MB', '-'),
+ pd('03 - Marsh at Night (Long).flac', '48.0 MB', '920 kbps'),
+ pd('04 - Tram Depot, 06h.flac', '32.2 MB', '725 kbps'),
+ pd('05 - Harbour Bells.flac', '52.5 MB', '902 kbps'),
+ pd('06 - Rain on Zinc Roof.flac', '30.4 MB', '804 kbps'),
+ pd('07 - Empty Chapel Tone.flac', '17.4 MB', '836 kbps'),
+ pd('08 - Forest Floor.flac', '38.0 MB', '741 kbps'),
+ pd('09 - Quarry Echo.flac', '34.6 MB', '753 kbps'),
+ pd('10 - Night Ferry.flac', '18.7 MB', '723 kbps'),
+ pd('11 - Last Train.flac', '19.5 MB', '621 kbps'),
+ {
+ name: 'shared\\netlabel\\Explorers of the Interior [CC-BY]\\readme.txt',
+ size: '1.0 MB',
+ user: 'loopdigger',
+ bitrate: '128 kbps',
+ speed: '3.35 MB/s',
+ slots: 1,
+ },
+ ],
+ s2: [
+ {
+ name: 'shared\\cc\\Ambient Works [CC0]\\01 - Slow Meadow.flac',
+ size: '41.2 MB',
+ user: 'tapehiss',
+ bitrate: '911 kbps',
+ speed: '2.10 MB/s',
+ slots: 2,
+ },
+ {
+ name: 'shared\\cc\\Ambient Works [CC0]\\02 - Held Note.flac',
+ size: '28.9 MB',
+ user: 'tapehiss',
+ bitrate: '740 kbps',
+ speed: '2.10 MB/s',
+ slots: 2,
+ },
+ {
+ name: 'shared\\cc\\Ambient Works [CC0]\\03 - Grain.flac',
+ size: '33.1 MB',
+ user: 'tapehiss',
+ bitrate: '812 kbps',
+ speed: '2.10 MB/s',
+ slots: 2,
+ },
+ ],
+ s3: [
+ {
+ name: 'shared\\netlabel\\2004 Comp [CC-BY-NC]\\01 - Opener.mp3',
+ size: '9.4 MB',
+ user: 'nectoUA',
+ bitrate: '320 kbps',
+ speed: '1.05 MB/s',
+ slots: 0,
+ },
+ {
+ name: 'shared\\netlabel\\2004 Comp [CC-BY-NC]\\02 - Interlude.mp3',
+ size: '5.1 MB',
+ user: 'nectoUA',
+ bitrate: '320 kbps',
+ speed: '1.05 MB/s',
+ slots: 0,
+ },
+ ],
+}
+
+export const TRANSFERS: readonly TransferRow[] = [
+ {
+ id: 'x1',
+ status: 'done',
+ name: '@@lrfkq\\Contents\\Rotterdam',
+ user: 'Dan Dillion',
+ progress: 'Completed',
+ speed: '-',
+ },
+ {
+ id: 'x2',
+ status: 'done',
+ name: '@@lrfkq\\Contents\\Journal',
+ user: 'Dan Dillion',
+ progress: 'Completed',
+ speed: '-',
+ },
+ {
+ id: 'x3',
+ status: 'active',
+ name: '@@lrfkq\\Contents\\Context',
+ user: 'Dan Dillion',
+ progress: '37.5 MB/53.4 MB (70%)',
+ speed: '12.4 MB/s',
+ },
+ {
+ id: 'x4',
+ status: 'fail',
+ name: '@@gufoo\\put all musics',
+ user: 'publicdomainbot',
+ progress: 'Failed',
+ speed: '-',
+ },
+ {
+ id: 'x5',
+ status: 'active',
+ name: '02-RawMusic\\Embark Studio',
+ user: 'tapehiss',
+ progress: '10.4 MB/14.3 MB (72%)',
+ speed: '11.5 MB/s',
+ },
+ {
+ id: 'x6',
+ status: 'fail',
+ name: '@@medvw\\Soulseek\\complete',
+ user: 'x100',
+ progress: 'Failed',
+ speed: '-',
+ },
+ {
+ id: 'x7',
+ status: 'active',
+ name: '@@hnttf\\complete\\(2004 netlabel)',
+ user: 'nectoUA',
+ progress: '10.5 MB/25.5 MB (41%)',
+ speed: '9.3 MB/s',
+ },
+]
+
+export const SHORTCUTS: readonly (readonly [string, string])[] = [
+ ['Space', 'select'],
+ ['Enter', 'download'],
+ ['b', 'browse owner'],
+ ['c', 'chat'],
+ ['/', 'filter'],
+ ['a/A', 'select all/none'],
+ ['1-3', 'focus pane'],
+ ['q', 'quit'],
+]
diff --git a/website/src/components/tui/hero-terminal.tsx b/website/src/components/tui/hero-terminal.tsx
new file mode 100644
index 0000000..bb588af
--- /dev/null
+++ b/website/src/components/tui/hero-terminal.tsx
@@ -0,0 +1,482 @@
+import { useCallback, useEffect, useMemo, useRef, useState, type KeyboardEvent } from 'react'
+
+import { MacWindow, ShortcutBar, StatusLine, TmuxBar, type StatusCounts } from './chrome'
+import {
+ RESULTS,
+ SEARCHES,
+ SHARE,
+ TRANSFERS,
+ type ResultRow,
+ type SearchRow,
+ type TransferRow,
+} from './data'
+import { InfoPane, ResultsPane, SearchesPane, TransfersPane } from './panes'
+import { useFitScale } from './use-fit-scale'
+
+const DESIGN_WIDTH = 1360
+const TICK_MS = 480
+const MAX_CONCURRENT = 2
+/** Where the scripted run leaves the cursor. */
+const RESTING_ROW = 5
+
+type Phase = 'searching' | 'results' | 'interactive'
+
+/** Pages are prerendered in Node, where there is no window. */
+const isBrowser = typeof window !== 'undefined'
+
+const matches = (query: string): boolean =>
+ isBrowser && window.matchMedia(query).matches
+
+const prefersReducedMotion = (): boolean => matches('(prefers-reduced-motion: reduce)')
+
+const sizeMb = (size: string): number => {
+ const parsed = Number.parseFloat(size)
+ return Number.isNaN(parsed) || parsed === 0 ? 12 : parsed
+}
+
+/*
+ * Deterministic on purpose: the id is derived from the filename and the rate
+ * from its length, so queueing the same row twice is a no-op and nothing
+ * random runs inside a state updater. Both matter under StrictMode, which
+ * double-invokes updaters in development.
+ */
+const toTransfer = (row: ResultRow): TransferRow => ({
+ id: `t:${row.name}`,
+ status: 'queued',
+ name: row.name,
+ user: row.user,
+ progress: 'Queued',
+ speed: '-',
+ pct: 0,
+ sizeMb: sizeMb(row.size),
+ rateMbps: 1.4 + (row.name.length % 7) * 0.4,
+})
+
+/**
+ * The hero: a working recreation of the TUI.
+ *
+ * It plays one scripted run (search → results → queue two files) and then
+ * hands over to the keyboard. Only transfers carrying a `pct` are simulated;
+ * the seeded rows stay put so the pane looks lived-in from the first frame.
+ *
+ * Under `prefers-reduced-motion` it starts at the end state instead, so the
+ * page never animates at someone who asked it not to.
+ */
+export const HeroTerminal = () => {
+ const [searches, setSearches] = useState(SEARCHES)
+ const [results, setResults] =
+ useState>>(RESULTS)
+ const [activeId, setActiveId] = useState('s1')
+ const [transfers, setTransfers] = useState(TRANSFERS)
+ const [focus, setFocus] = useState(2)
+
+ // Reduced motion skips the performance, so the resting state is the initial
+ // state. Resolved once, in the initialiser, to keep it out of an effect.
+ const [phase, setPhase] = useState(() =>
+ prefersReducedMotion() ? 'interactive' : 'searching',
+ )
+ const [selected, setSelected] = useState(() =>
+ prefersReducedMotion() ? RESTING_ROW : 0,
+ )
+
+ const shellRef = useRef(null)
+
+ // Mirrors `results` so queueFrom can read the latest rows without taking a
+ // dependency on them. Synced after commit, which is soon enough: every
+ // reader is a timer or an event handler, never a render.
+ const resultsRef = useRef(results)
+ useEffect(() => {
+ resultsRef.current = results
+ }, [results])
+
+ const rows = useMemo(() => results[activeId] ?? [], [results, activeId])
+ const activeSearch = searches.find((search) => search.id === activeId)
+
+ const counts = useMemo(() => {
+ const tally: StatusCounts = { active: 0, done: 0, fail: 0, queued: 0 }
+ for (const transfer of transfers) tally[transfer.status] += 1
+ return tally
+ }, [transfers])
+
+ // Derived, not stored: the status bar is a pure function of what is moving.
+ const pct = useMemo(() => {
+ const live = transfers.filter(
+ (t) => t.pct !== undefined && (t.status === 'active' || t.status === 'done'),
+ )
+ if (live.length === 0) return 0
+ return Math.round(live.reduce((sum, t) => sum + (t.pct ?? 0), 0) / live.length)
+ }, [transfers])
+
+ /** True while any simulated transfer still has somewhere to go. */
+ const hasWork = useMemo(
+ () => transfers.some((t) => t.pct !== undefined && t.status !== 'done'),
+ [transfers],
+ )
+
+ // Stops once everything has finished. Without the `hasWork` gate the timer
+ // would tick twice a second for as long as the tab is open, re-rendering
+ // the whole TUI to produce identical output.
+ useEffect(() => {
+ if (!hasWork || prefersReducedMotion()) return
+
+ const timer = setInterval(() => {
+ setTransfers((list) => {
+ let live = list.filter((t) => t.status === 'active' && t.pct !== undefined).length
+
+ const next = list.map((t) => {
+ if (t.pct === undefined) return t
+ const total = t.sizeMb ?? 12
+ const rate = t.rateMbps ?? 2
+
+ if (t.status === 'queued' && live < MAX_CONCURRENT) {
+ live += 1
+ return {
+ ...t,
+ status: 'active' as const,
+ speed: `${rate.toFixed(2)} MB/s`,
+ progress: `0.0/${total.toFixed(1)} MB (0%)`,
+ }
+ }
+ if (t.status !== 'active') return t
+
+ // Step size varies per file but is a pure function of it, so the
+ // updater stays free of side effects under StrictMode's double call.
+ const step = 4 + ((t.name.length + Math.round(t.pct)) % 9)
+ const pct = Math.min(100, t.pct + step)
+ const finished = pct >= 100
+ return {
+ ...t,
+ status: finished ? ('done' as const) : ('active' as const),
+ pct,
+ speed: finished ? '-' : `${rate.toFixed(2)} MB/s`,
+ progress: finished
+ ? 'Complete'
+ : `${((total * pct) / 100).toFixed(1)}/${total.toFixed(1)} MB (${String(Math.round(pct))}%)`,
+ }
+ })
+
+ // map() always allocates, so without this every tick would hand React
+ // a fresh array and force a re-render that produces identical output.
+ // Returning the original lets React bail out instead.
+ const moved = next.some((t, i) => t !== list[i])
+ return moved ? next : list
+ })
+ }, TICK_MS)
+
+ return () => {
+ clearInterval(timer)
+ }
+ }, [hasWork])
+
+ /*
+ * Queue rows by index within a named search.
+ *
+ * Reads the current rows through a ref rather than closing over `results`,
+ * so the callback identity never changes — the opening script can then
+ * depend on it without restarting itself every time state moves.
+ */
+ const queueFrom = useCallback((searchId: string, indexes: readonly number[]) => {
+ if (indexes.length === 0) return
+
+ const current = resultsRef.current[searchId] ?? []
+ const picked = indexes
+ .map((i) => current[i])
+ .filter((row): row is ResultRow => row !== undefined && row.queued !== true)
+ if (picked.length === 0) return
+
+ const wanted = new Set(picked.map((row) => row.name))
+ setResults((prev) => ({
+ ...prev,
+ [searchId]: (prev[searchId] ?? []).map((row) =>
+ wanted.has(row.name) ? { ...row, queued: true, marked: false } : row,
+ ),
+ }))
+ setTransfers((list) => {
+ const seen = new Set(list.map((transfer) => transfer.id))
+ const additions = picked.map(toTransfer).filter((t) => !seen.has(t.id))
+ return additions.length === 0 ? list : [...additions, ...list]
+ })
+ }, [])
+
+ const queueIndexes = useCallback(
+ (indexes: readonly number[]) => {
+ queueFrom(activeId, indexes)
+ },
+ [queueFrom, activeId],
+ )
+
+ const toggleMark = useCallback(
+ (index: number) => {
+ setResults((prev) => ({
+ ...prev,
+ [activeId]: (prev[activeId] ?? []).map((row, i) =>
+ i === index && row.queued !== true ? { ...row, marked: row.marked !== true } : row,
+ ),
+ }))
+ },
+ [activeId],
+ )
+
+ const markAll = useCallback(
+ (on: boolean) => {
+ setResults((prev) => ({
+ ...prev,
+ [activeId]: (prev[activeId] ?? []).map((row) =>
+ row.queued === true ? row : { ...row, marked: on },
+ ),
+ }))
+ },
+ [activeId],
+ )
+
+ const onKeyDown = (event: KeyboardEvent) => {
+ if (event.target instanceof HTMLInputElement) return
+ const list = results[activeId] ?? []
+
+ switch (event.key) {
+ case 'ArrowDown':
+ case 'j':
+ event.preventDefault()
+ setFocus(2)
+ setSelected((s) => Math.min(list.length - 1, s + 1))
+ return
+ case 'ArrowUp':
+ case 'k':
+ event.preventDefault()
+ setFocus(2)
+ setSelected((s) => Math.max(0, s - 1))
+ return
+ case ' ':
+ event.preventDefault()
+ setFocus(2)
+ toggleMark(selected)
+ return
+ case 'Enter': {
+ event.preventDefault()
+ const marked = list.flatMap((row, i) =>
+ row.marked === true && row.queued !== true ? [i] : [],
+ )
+ queueIndexes(marked.length > 0 ? marked : [selected])
+ setFocus(3)
+ return
+ }
+ case 'a':
+ event.preventDefault()
+ markAll(true)
+ return
+ case 'A':
+ event.preventDefault()
+ markAll(false)
+ return
+ case '1':
+ case '2':
+ case '3':
+ event.preventDefault()
+ setFocus(Number(event.key))
+ return
+ default:
+ return
+ }
+ }
+
+ /*
+ * The scripted opening run.
+ *
+ * No "has this already started" ref: the cleanup cancels every timer, so a
+ * StrictMode remount simply replays from the top. A ref guard would let the
+ * first cleanup cancel the run and the re-run skip scheduling it, leaving
+ * the demo frozen on its first frame in development.
+ *
+ * It targets 's1' directly rather than whatever is selected, because the
+ * script only ever describes the opening state.
+ */
+ useEffect(() => {
+ if (prefersReducedMotion()) return
+
+ const timers: ReturnType[] = []
+ const at = (fn: () => void, ms: number) => timers.push(setTimeout(fn, ms))
+ const mark = (i: number) => {
+ setResults((prev) => ({
+ ...prev,
+ s1: (prev['s1'] ?? []).map((row, ix) => (ix === i ? { ...row, marked: true } : row)),
+ }))
+ }
+
+ at(() => {
+ setPhase('results')
+ }, 1050)
+ at(() => {
+ setSelected(3)
+ }, 1550)
+ at(() => {
+ setSelected(7)
+ }, 2050)
+ at(() => {
+ setSelected(10)
+ }, 2550)
+ at(() => {
+ mark(10)
+ }, 2850)
+ at(() => {
+ queueFrom('s1', [10])
+ }, 3050)
+ at(() => {
+ setSelected(3)
+ }, 3950)
+ at(() => {
+ mark(3)
+ }, 4150)
+ at(() => {
+ queueFrom('s1', [3])
+ }, 4350)
+ at(() => {
+ setSelected(RESTING_ROW)
+ setPhase('interactive')
+ }, 5050)
+
+ return () => {
+ for (const timer of timers) clearTimeout(timer)
+ }
+ }, [queueFrom])
+
+ const submitSearch = (query: string) => {
+ const id = `s${String(searches.length + 1)}`
+ setSearches((prev) => [
+ ...prev,
+ { id, query, results: 40 + Math.floor(Math.random() * 900), status: 'Done' },
+ ])
+ setResults((prev) => ({
+ ...prev,
+ [id]: Array.from({ length: 6 }, (_, i) => ({
+ name: `shared\\results\\${query.replace(/[^a-z0-9]+/gi, '_')}\\0${String(i + 1)} - track.flac`,
+ size: `${(10 + i * 7).toFixed(1)} MB`,
+ user: ['loopdigger', 'tapehiss', 'nectoUA'][i % 3] ?? 'loopdigger',
+ bitrate: `${String(500 + i * 60)} kbps`,
+ speed: '2.20 MB/s',
+ slots: i % 2,
+ })),
+ }))
+ setActiveId(id)
+ setSelected(0)
+ setFocus(2)
+ setPhase('interactive')
+ }
+
+ // Below 820px, stop shrinking at half size and let the wrapper scroll.
+ const [minScale, setMinScale] = useState(() =>
+ matches('(max-width: 820px)') ? 0.5 : 0,
+ )
+ useEffect(() => {
+ const query = window.matchMedia('(max-width: 820px)')
+ const sync = (event: MediaQueryListEvent) => {
+ setMinScale(event.matches ? 0.5 : 0)
+ }
+ query.addEventListener('change', sync)
+ return () => {
+ query.removeEventListener('change', sync)
+ }
+ }, [])
+
+ const { wrapRef, innerRef, scale, height, ready } = useFitScale(DESIGN_WIDTH, minScale)
+
+ const shownSearches = searches.map((search, i) =>
+ i === 0 && phase === 'searching' ? { ...search, status: '⋯', results: '—' } : search,
+ )
+ const shownRows = phase === 'searching' ? [] : rows
+
+ return (
+
+
+
+
+
+ {/*
+ role="application" is the ARIA escape hatch for a widget that
+ handles its own keys: it stops screen readers intercepting
+ j/k/arrows so the demo behaves like the real TUI. Every control
+ inside is still a native button or input.
+ */}
+