rvlib-shipkit 0.38.0 → 1.0.0

package/src/serve/hub-app/tree-row.tsx

@@ -0,0 +1,42 @@
+// ONE ROW of the resource tree: a fixed grid of caret, kind, label, duration,
+// note and state glyph. The indent rides in the first column, the label eats
+// the slack, and the glyph is LAST so the wide duration column never pushes it
+// around. No row carries prose: the words are the tooltip and the page it opens.
+import { observer } from 'mobx-react-lite'
+import type { CSSProperties } from 'react'
+import type { HubSt } from './hub-st.ts'
+import { GLYPH, markOf, rowName, rowSlots, type TreeRow } from './tree-build.ts'
+
+/** the fold marker: a chevron, right when the branch is shut and down when
+ *  it is open. The 9px triangle it replaces read as a dot with an opinion */
+export const Caret = ({ open }: { open: boolean }): React.ReactElement => (
+    <svg className={open ? 'cvt open' : 'cvt'} viewBox="0 0 24 24" width="11" height="11" aria-hidden="true">
+        <path d="M9 5l7 7-7 7" fill="none" stroke="currentColor" strokeWidth="3.4" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+)
+
+export const TreeRowView = observer(({ app, row }: { app: HubSt; row: TreeRow }) => {
+    const t = app.tree
+    const u = app.checks
+    const running = row.checks.some((id) => u.isRunning(id))
+    const s = rowSlots(row, running)
+    const mark = markOf(row.res, row.dir, row.kind)
+    const name = rowName(row)
+    return (
+        <div className={`trow${t.cursor === row.key ? ' on' : ''}`} style={{ '--d': row.depth } as CSSProperties}
+            title={s.hint} onClick={() => t.click(row)}>
+            {/* the chevron folds, the rest of the row opens: on a folder with a
+                page of its own the two differ, everywhere else both fold */}
+            <span className="tw" onClick={row.dir ? (e) => { e.stopPropagation(); t.fold(row) } : undefined}>
+                {row.dir ? <Caret open={t.expanded.has(row.key)} /> : null}
+            </span>
+            <span className={`ty ${mark.hue}`} title={mark.word}>{mark.glyph}</span>
+            <span className={`tl ${row.state}`}>{name.tag == null ? null : <span className="tid">{name.tag}</span>}{name.title}</span>
+            <span className={`tdur ${s.durTone ?? ''}`}>{s.dur}</span>
+            <span className="tnote">
+                {s.count == null ? s.note : <>{s.count.reds > 0 ? <b>{s.count.reds}</b> : null} {s.count.total}</>}
+            </span>
+            <span className={`tg ${s.tone}`}>{GLYPH[s.state]}</span>
+        </div>
+    )
+})

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

@@ -0,0 +1,174 @@
+// The resource tree, as state: which tab, what is expanded, where the
+// keyboard cursor sits. The trie itself is pure (tree-build.ts) and cached
+// here as computeds. Everything hand tuned persists to localStorage as
+// newline separated paths, text encodable and hand editable, and comes back
+// on reopen.
+import { makeAutoObservable } from 'mobx'
+import type { HubSt } from './hub-st.ts'
+import type { Resource } from './hub-types.ts'
+import { buildPathTree, buildTypeTree, dirKeys, flattenTree, whenCounts, type TreeNode, type TreeRow } from './tree-build.ts'
+
+export type TreeTab = 'path' | 'type'
+
+const EXPANDED_KEY = 'shipkit.tree.expanded'
+const TAB_KEY = 'shipkit.tree.tab'
+
+// every access is guarded: a private window, blocked site data or a stale
+// origin throws on read AND on write, and a tree that cannot remember is
+// still a working tree
+const readStore = (k: string): string => {
+    try {
+        return localStorage.getItem(k) ?? ''
+    } catch {
+        return ''
+    }
+}
+const writeStore = (k: string, v: string): void => {
+    try {
+        localStorage.setItem(k, v)
+    } catch {
+        /* nothing to do: persistence is a convenience, never state the page needs */
+    }
+}
+
+export class TreeSvc {
+    tab: TreeTab = 'path'
+    expanded = new Set<string>()
+    /** the row key under the keyboard cursor */
+    cursor: string | null = null
+
+    constructor(private st: HubSt) {
+        this.tab = readStore(TAB_KEY) === 'type' ? 'type' : 'path'
+        for (const p of readStore(EXPANDED_KEY).split('\n')) if (p !== '') this.expanded.add(p)
+        makeAutoObservable<this, 'st'>(this, { st: false })
+    }
+
+    /** the filter and the search apply BEFORE the grouping, so a filtered
+     *  tree prunes to the branches that still hold something */
+    get visible(): Resource[] {
+        const f = this.st.filter
+        const q = this.st.query.trim().toLowerCase()
+        return this.st.cols.resources.filter((r) => {
+            // the filter reads the COLOUR, so what `red` shows is what reads
+            // red on the tree. An ask is proactive work, so it is in needs
+            // and never in red (collection-types stateOf owns that rule)
+            if (f === 'red' && r.state !== 'red') return false
+            if (f === 'needs' && r.severity == null) return false
+            if (q !== '' && !r.title.toLowerCase().includes(q) && !r.path.toLowerCase().includes(q)) return false
+            return true
+        })
+    }
+
+    get nodes(): TreeNode[] {
+        return this.tab === 'type' ? buildTypeTree(this.visible) : buildPathTree(this.visible)
+    }
+
+    get rows(): TreeRow[] {
+        // a live search must SHOW its matches: folds yield while it runs
+        if (this.st.query.trim() !== '') return flattenTree(this.nodes, new Set(dirKeys(this.nodes, false)))
+        return flattenTree(this.nodes, this.expanded)
+    }
+
+    /** the one line above the tree: what runs always and what does not */
+    get whenLine(): string {
+        const c = whenCounts(this.st.cols.resources)
+        const total = c.always + c.release + c.health + c.off
+        if (total === 0) return ''
+        return [`${c.always} always`, `${c.release} release`, `${c.health} health`, `${c.off} off`].join(' · ')
+    }
+
+    get redCount(): number {
+        return this.st.cols.redCount
+    }
+
+    private save(): void {
+        writeStore(EXPANDED_KEY, [...this.expanded].join('\n'))
+        writeStore(TAB_KEY, this.tab)
+    }
+
+    setTab(t: TreeTab): void {
+        this.tab = t
+        this.cursor = null
+        this.save()
+    }
+    toggle(key: string): void {
+        this.expanded.has(key) ? this.expanded.delete(key) : this.expanded.add(key)
+        this.save()
+    }
+    expandAll(): void {
+        for (const k of dirKeys(this.nodes)) this.expanded.add(k)
+        this.save()
+    }
+    collapseAll(): void {
+        this.expanded.clear()
+        this.save()
+    }
+
+    rowAt(key: string | null): TreeRow | null {
+        return this.rows.find((r) => r.key === key) ?? null
+    }
+    get cur(): TreeRow | null {
+        return this.rowAt(this.cursor)
+    }
+
+    /** a row click is both a cursor move and the open: one click, one result.
+     *  A folder with a page of its own opens the page, and only its chevron
+     *  folds (fold): the one convention for a row that is both */
+    click(row: TreeRow): void {
+        this.cursor = row.key
+        if (row.page != null) this.st.go(row.page)
+        else if (row.dir) this.toggle(row.key)
+        else if (row.res != null) this.st.openResource(row.res)
+    }
+    /** the chevron: fold or unfold, never open */
+    fold(row: TreeRow): void {
+        this.cursor = row.key
+        if (row.dir) this.toggle(row.key)
+    }
+
+    move(d: number): void {
+        const rows = this.rows
+        if (rows.length === 0) return
+        const i = rows.findIndex((r) => r.key === this.cursor)
+        const next = i === -1 ? (d > 0 ? 0 : rows.length - 1) : Math.min(rows.length - 1, Math.max(0, i + d))
+        this.cursor = rows[next]!.key
+    }
+    /** right descends: a collapsed directory opens, anything else steps down */
+    right(): void {
+        const r = this.cur
+        if (r != null && r.dir && !this.expanded.has(r.key)) this.toggle(r.key)
+        else this.move(1)
+    }
+    /** left ascends: an open directory closes, anything else climbs to its parent */
+    left(): void {
+        const r = this.cur
+        if (r == null) return this.move(-1)
+        if (r.dir && this.expanded.has(r.key)) return this.toggle(r.key)
+        const rows = this.rows
+        const i = rows.findIndex((x) => x.key === r.key)
+        for (let n = i - 1; n >= 0; n--) {
+            if (rows[n]!.depth < r.depth) {
+                this.cursor = rows[n]!.key
+                return
+            }
+        }
+    }
+    open(): void {
+        const r = this.cur
+        if (r == null) return
+        if (r.page != null) this.st.go(r.page)
+        else if (r.dir) this.toggle(r.key)
+        else if (r.res != null) this.st.openResource(r.res)
+    }
+
+    /** true = the key was ours, so the page must not also scroll */
+    key(k: string): boolean {
+        if (k === 'ArrowDown') this.move(1)
+        else if (k === 'ArrowUp') this.move(-1)
+        else if (k === 'ArrowRight') this.right()
+        else if (k === 'ArrowLeft') this.left()
+        else if (k === 'Enter' || k === ' ') this.open()
+        else return false
+        return true
+    }
+}

package/src/serve/hub-app/wikis-view.tsx

@@ -0,0 +1,53 @@
+// The wikis page: one tab per mounted markdown wiki, one link graph at a
+// time, embedded from its own /graph/<id> route. A tab is an item of the
+// wikis collection, so the open wiki is in the url like any other page.
+import { observer } from 'mobx-react-lite'
+import type { HubSt } from './hub-st.ts'
+import type { Resource } from './hub-types.ts'
+
+/** the collection id, and the address segment of every wiki */
+export const WIKIS = 'wikis'
+
+/** `state` colours the tab label the way the tree colours the wiki's row */
+export type WikiTab = { id: string; label: string; state: Resource['state']; on: boolean; go: () => void }
+
+const wikisOf = (app: HubSt): Resource[] => app.cols.resources.filter((r) => r.collection === WIKIS)
+
+/** the tabs over the page, in the order the server mounted the wikis */
+export function wikiTabs(app: HubSt): WikiTab[] {
+    const sel = app.sel
+    return wikisOf(app).map((r) => ({
+        id: r.id,
+        label: r.title,
+        state: r.state,
+        on: sel?.t === 'item' && sel.col === WIKIS && sel.id === r.id,
+        go: () => app.cols.select(WIKIS, r.id),
+    }))
+}
+
+/** the header link: the first wiki, or the bare section while the first
+ *  poll has not listed any */
+export function openWikis(app: HubSt): void {
+    const first = wikisOf(app)[0]
+    if (first != null) app.cols.select(WIKIS, first.id)
+    else app.showCol(WIKIS)
+}
+
+export const WikisView = observer(({ app, id }: { app: HubSt; id: string }) => {
+    const i = app.cols.find(WIKIS, id)
+    const tabs = (
+        <span className="seg">
+            {wikiTabs(app).map((t) => <button key={t.id} className={t.on ? 'on' : ''} onClick={t.go}><span className={`tl ${t.state}`}>{t.label}</span></button>)}
+        </span>
+    )
+    if (i == null) return <div className="graphview"><div className="gvhead">{tabs}</div><div className="ph">this wiki is not mounted here</div></div>
+    return (
+        <div className="graphview">
+            <div className="gvhead">
+                {tabs}
+                <span className={`gvtext tl ${i.state}`}>{i.text}</span>
+            </div>
+            {i.href == null ? <div className="ph">this wiki carries no page to embed</div> : <iframe src={i.href} title={i.title} />}
+        </div>
+    )
+})

package/src/serve/other-repos.ts

@@ -0,0 +1,79 @@
+// The OTHER house repos on this disk, as the live strip reads them: their
+// runs in flight from their own run record, read only, and their hub url
+// when one serves. Which repos count is houseRepos (project-gutter.ts), the
+// same discovery the project gutter lists, minus this repo.
+//
+// Cheap on purpose, because the strip asks every second: the list is read at
+// most every LIST_TTL_MS, and a repo's record is opened only when its file or
+// its write ahead log moved since the last read.
+import { existsSync, realpathSync } from 'fs'
+import { homedir } from 'os'
+import type { LiveRow } from '../ledger/live-runs.ts'
+import { readLiveReadonly } from '../ledger/run-log.ts'
+import { houseRepos, hubPortOf, recordOf, recordStamp, type WiredRepo } from './project-gutter.ts'
+
+/** how long the list of repos is trusted before the dev root is read again */
+export const LIST_TTL_MS = 30_000
+
+const real = (p: string): string => {
+    try {
+        return realpathSync(p)
+    } catch {
+        return p
+    }
+}
+
+/** the house repos around `root`, its own checkout left out */
+export function otherHouseRepos(root: string, userHome: string = homedir()): WiredRepo[] {
+    const { home, repos } = houseRepos(root, userHome)
+    const me = real(home)
+    return repos.filter((r) => real(r.path) !== me)
+}
+
+/** the other repos and their live rows, re-read only when something moved */
+export class OtherRepos {
+    private list: WiredRepo[] = []
+    private listedAt = -Infinity
+    private rows = new Map<string, { stamp: string; rows: LiveRow[] }>()
+
+    constructor(private root: string, private now: () => number = Date.now, private userHome: string = homedir()) {}
+
+    repos(): WiredRepo[] {
+        if (this.now() - this.listedAt >= LIST_TTL_MS) {
+            this.list = otherHouseRepos(this.root, this.userHome)
+            this.listedAt = this.now()
+        }
+        return this.list
+    }
+
+    /** every repo's live rows, as its record holds them */
+    read(): { repo: string; rows: LiveRow[] }[] {
+        const out: { repo: string; rows: LiveRow[] }[] = []
+        for (const r of this.repos()) {
+            const path = recordOf(r.path)
+            if (path == null || !existsSync(path)) continue
+            const stamp = recordStamp(path)
+            let hit = this.rows.get(r.path)
+            if (hit == null || hit.stamp !== stamp) {
+                hit = { stamp, rows: readLiveReadonly(path) }
+                this.rows.set(r.path, hit)
+            }
+            out.push({ repo: r.name, rows: hit.rows })
+        }
+        return out
+    }
+
+    /** a repo's hub url when it serves, checked by asking it who it is */
+    async hubOf(repo: string): Promise<string | null> {
+        const r = this.repos().find((x) => x.name === repo)
+        if (r == null) return null
+        const url = `http://localhost:${hubPortOf(r.path)}`
+        try {
+            const res = await fetch(`${url}/hub.json`, { signal: AbortSignal.timeout(500) })
+            const j = (await res.json()) as { hub?: string; root?: string }
+            return j.hub === 'shipkit' && j.root != null && real(j.root) === real(r.path) ? url : null
+        } catch {
+            return null
+        }
+    }
+}