rvlib-shipkit 1.1.0 → 1.2.0

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

@@ -0,0 +1,55 @@
+// the page's two resizable widths, a node of the root (home-st.ts): the
+// project list at the far left and a repo's own sidebar. Each is dragged by
+// its separator (react-resizable-panels) and kept per browser in px, so the
+// next load renders at that width from its first paint. A stored value that
+// is not a number, or is out of bounds, reads as the default: no runtime
+// value can hand the page a list wider than LIST.max.
+import { makeAutoObservable } from 'mobx'
+
+export type Bounds = { key: string; min: number; max: number; def: number }
+
+/** the project list: icon and name on one line */
+export const LIST: Bounds = { key: 'hub:list-width', min: 140, max: 360, def: 200 }
+/** a repo's sidebar: the resource tree */
+export const SIDEBAR: Bounds = { key: 'hub:sidebar-width', min: 220, max: 640, def: 330 }
+
+/** a width in its bounds, or the default for anything else */
+export const clampWidth = (v: unknown, b: Bounds): number => {
+    const n = typeof v === 'string' ? Number(v) : typeof v === 'number' ? v : NaN
+    return Number.isFinite(n) && n >= b.min && n <= b.max ? Math.round(n) : b.def
+}
+
+export function loadWidth(b: Bounds): number {
+    try {
+        return clampWidth(globalThis.localStorage?.getItem(b.key), b)
+    } catch {
+        return b.def
+    }
+}
+
+function saveWidth(b: Bounds, px: number): void {
+    try {
+        globalThis.localStorage?.setItem(b.key, String(px))
+    } catch { /* private window or blocked site data: the width lasts the tab */ }
+}
+
+export class LayoutSt {
+    listWidth = loadWidth(LIST)
+    sidebarWidth = loadWidth(SIDEBAR)
+
+    constructor() {
+        makeAutoObservable(this)
+    }
+
+    /** a drag of the list's separator ended at this width */
+    setListWidth(px: number): void {
+        this.listWidth = clampWidth(Math.round(px), LIST)
+        saveWidth(LIST, this.listWidth)
+    }
+
+    /** a drag of the sidebar's separator ended at this width */
+    setSidebarWidth(px: number): void {
+        this.sidebarWidth = clampWidth(Math.round(px), SIDEBAR)
+        saveWidth(SIDEBAR, this.sidebarWidth)
+    }
+}

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

@@ -10,7 +10,7 @@ import { makeAutoObservable, observableRef, runInAction } from 'mobx'
 import type { LiveView } from '../../ledger/live-timeline.ts'
 import type { TimelineInvocation } from '../../ledger/run-timeline.ts'
 import { ChartView, type ChartSource } from './chart-view.ts'
-import type { HubSt } from './hub-st.ts'
+import type { RepoSt } from './repo-st.ts'
 import { chartHeight } from './timeline-geometry.ts'
 
 /** how often the page asks. A strip a second behind the runner is still live */
@@ -75,10 +75,11 @@ export class LiveSvc {
     chart: ChartView
     private timer: ReturnType<typeof setInterval> | null = null
     private inFlight = false
+    private started = false
 
-    constructor(private st: HubSt) {
+    constructor(private st: RepoSt) {
         this.chart = new ChartView(null, () => liveSource(this.view, this.now, this.open, this.st.timeline.data?.invocations ?? []))
-        makeAutoObservable<this, 'st' | 'timer' | 'inFlight'>(this, { st: false, timer: false, inFlight: false, view: observableRef, chart: false })
+        makeAutoObservable<this, 'st' | 'timer' | 'inFlight' | 'started'>(this, { st: false, timer: false, inFlight: false, started: false, view: observableRef, chart: false })
     }
 
     /** the server clock, as of the page clock's last tick */
@@ -112,13 +113,15 @@ export class LiveSvc {
         this.held = settleHeight(this.held, Math.min(OPEN_MAX_H, chartHeight(lanes)), now)
     }
 
+    /** a resume keeps the chart where it was: only the first start homes it */
     start(): void {
         if (this.timer != null) return
-        this.opened()
+        if (!this.started) this.opened()
+        this.started = true
         void this.poll()
         this.timer = setInterval(() => void this.poll(), LIVE_POLL_MS)
     }
-    dispose(): void {
+    stop(): void {
         if (this.timer != null) clearInterval(this.timer)
         this.timer = null
     }
@@ -128,7 +131,7 @@ export class LiveSvc {
         if (this.inFlight) return
         this.inFlight = true
         try {
-            const r = await fetch('/api/live.json')
+            const r = await fetch(this.st.url('/api/live.json'))
             if (!r.ok) throw new Error(await r.text())
             const v = (await r.json()) as LiveView
             const ended = this.running && v.runs.length === 0
@@ -142,8 +145,8 @@ export class LiveSvc {
             // wrote new numbers: the rows and the timeline read them now
             // rather than on the next ten second poll
             if (ended) {
-                void this.st.cols.poll()
-                if (this.st.timeline.data != null) void this.st.timeline.load()
+                void this.st.cols.poll(true)
+                if (this.st.timeline.data != null) void this.st.timeline.load(true)
             }
         } catch (e) {
             runInAction(() => { this.error = `the live runs could not be read: ${(e as Error).message}` })
@@ -159,7 +162,7 @@ export class LiveSvc {
     /** a repo lane was clicked: its hub, when it serves */
     async openRepo(repo: string): Promise<void> {
         try {
-            const r = (await (await fetch(`/api/repo-hub?repo=${encodeURIComponent(repo)}`)).json()) as { url: string | null }
+            const r = (await (await fetch(this.st.url(`/api/repo-hub?repo=${encodeURIComponent(repo)}`))).json()) as { url: string | null }
             if (r.url != null) window.open(r.url, '_blank')
             else this.say(`${repo} has no hub serving`)
         } catch (e) {

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

@@ -0,0 +1,270 @@
+// the machine, as a page on the home sees it: every repo's hub state and the
+// active flags from the daemon's /api/home.json, the widgets from its
+// /api/home/widgets.json, the global processes and pm's children from pm's
+// /api/pm/status.json. A node of the page tree
+// (home-st.ts): the root reads it for the list's dots, and says loudly when the
+// daemon behind the page does not answer. A hub serving on its own has none
+// of this (HomeSt.machine is null).
+import { makeAutoObservable, observableRef, runInAction } from 'mobx'
+import type { HomeAnswer, WidgetsAnswer } from '../../home/home-routes.ts'
+import type { WorkerView } from '../../home/hubs.ts'
+import type { ResourceView } from '../../home/resources.ts'
+import type { PmAnswer, Role } from '../../home/pm.ts'
+import type { HomeSt } from './home-st.ts'
+import type { HubDot } from './projects-svc.ts'
+
+export const MACHINE_POLL_MS = 1_500
+/** past the web's own wait on the daemon (serve-web.ts MACHINE_ANSWER_MS), so
+ *  a hung daemon reads in its words, and a hung web still reads as down */
+export const MACHINE_TIMEOUT_MS = 8_000
+
+/** where this browser keeps the machine as it last read it, painted at once
+ *  on the next load (the overview) while the daemon and pm are asked again */
+export const MACHINE_KEY = 'hub:machine'
+
+type Kept = { data: HomeAnswer | null; pm: PmAnswer | null; widgets: WidgetsAnswer | null }
+
+function loadKept(): Kept | null {
+    try {
+        const v = JSON.parse(globalThis.localStorage?.getItem(MACHINE_KEY) ?? 'null') as Kept | null
+        return v != null && typeof v === 'object' && (v.data == null || Array.isArray(v.data.workers)) ? v : null
+    } catch {
+        return null
+    }
+}
+
+/** the poll failed because nothing behind the page answers, not on an error of an answer */
+class DownError extends Error {}
+
+export type MachineOpts = { reload?: () => void; timeoutMs?: number }
+
+export class MachineSt {
+    data: HomeAnswer | null = null
+    /** pm's answer: the resources and the daemon and web states */
+    pm: PmAnswer | null = null
+    /** every house repo's widgets, as the daemon last rendered them */
+    widgets: WidgetsAnswer | null = null
+    /** why pm did not answer the last poll, or '' while it does */
+    pmDown = ''
+    /** the last action that failed */
+    error = ''
+    /** why the daemon did not answer the last poll, or '' while it does */
+    down = ''
+    /** the daemon answered once since the load: until then data, pm and
+     *  widgets are what this browser kept, shown but never acted on */
+    fresh = false
+    /** what was last kept, so an unchanged machine is not written again */
+    private kept = ''
+    private timer: ReturnType<typeof setInterval> | null = null
+    private wasDown = false
+    private polling = false
+    private widgetsPolling = false
+    /** `error` holds a poll's error, which the next good poll clears */
+    private pollError = false
+
+    constructor(private st: HomeSt, private o: MachineOpts = {}) {
+        const k = loadKept()
+        if (k != null) {
+            this.data = k.data
+            this.pm = k.pm
+            this.widgets = k.widgets
+        }
+        makeAutoObservable<this, 'st' | 'timer' | 'wasDown' | 'polling' | 'widgetsPolling' | 'pollError' | 'o' | 'kept' | 'keep'>(this, { st: false, timer: false, wasDown: false, polling: false, widgetsPolling: false, pollError: false, o: false, kept: false, keep: false, data: observableRef, pm: observableRef, widgets: observableRef })
+    }
+
+    /** the repo the page shows, null on the overview and the plan */
+    get repo(): string | null {
+        return this.st.page === 'repo' ? this.st.selected : null
+    }
+
+    worker(name: string | null): WorkerView | null {
+        return name == null ? null : this.data?.workers.find((w) => w.repo === name) ?? null
+    }
+
+    get shown(): WorkerView | null {
+        return this.worker(this.repo)
+    }
+
+    resource(id: string): ResourceView | null {
+        return this.pm?.resources.find((r) => r.id === id) ?? null
+    }
+
+    dotOf(name: string): HubDot {
+        const s = this.worker(name)?.status
+        return s === 'starting' || s === 'crashed' ? s : null
+    }
+
+    /** the resources this repo uses that are not up, as one line */
+    warnOf(name: string): string | null {
+        const off = (this.worker(name)?.uses ?? []).filter((id) => this.resource(id)?.status !== 'up')
+        return off.length === 0 ? null : `needs ${off.join(', ')}, which ${off.length === 1 ? 'is' : 'are'} off`
+    }
+
+    isActive(name: string): boolean {
+        return this.data?.active.includes(name) === true
+    }
+
+    boot(): void {
+        void this.load().then(() => {
+            // a repo page asks its hub to load when it is down
+            if (this.repo != null && this.data != null) void this.hub(this.repo, 'ensure')
+        })
+        this.timer = setInterval(() => void this.load(), MACHINE_POLL_MS)
+    }
+
+    stop(): void {
+        if (this.timer != null) clearInterval(this.timer)
+    }
+
+    /** pm is polled beside the daemon: either one down leaves the other shown */
+    private async loadPm(): Promise<void> {
+        try {
+            const r = await fetch('/api/pm/status.json', { signal: AbortSignal.timeout(this.o.timeoutMs ?? MACHINE_TIMEOUT_MS) })
+            if (!r.ok) throw new Error(await r.text())
+            const j = (await r.json()) as PmAnswer
+            runInAction(() => {
+                this.pm = j
+                this.pmDown = ''
+            })
+        } catch (e) {
+            runInAction(() => {
+                this.pm = null
+                this.pmDown = (e as Error).message
+            })
+        }
+    }
+
+    /** a widget poll that fails keeps the last html shown: the daemon's own
+     *  poll says why */
+    private async loadWidgets(): Promise<void> {
+        try {
+            const r = await fetch('/api/home/widgets.json', { signal: AbortSignal.timeout(this.o.timeoutMs ?? MACHINE_TIMEOUT_MS) })
+            if (!r.ok) return
+            const j = (await r.json()) as WidgetsAnswer
+            runInAction(() => { this.widgets = j })
+        } catch {
+            // the daemon poll beside it reports a daemon that does not answer
+        }
+    }
+
+    async load(): Promise<void> {
+        // a stalled poll is not stacked on
+        if (this.polling) return
+        this.polling = true
+        const pm = this.loadPm()
+        // never held on: a widget that answers late only shows late
+        if (!this.widgetsPolling) {
+            this.widgetsPolling = true
+            void this.loadWidgets().finally(() => { this.widgetsPolling = false })
+        }
+        try {
+            let r: Response
+            try {
+                r = await fetch('/api/home.json', { signal: AbortSignal.timeout(this.o.timeoutMs ?? MACHINE_TIMEOUT_MS) })
+            } catch (e) {
+                throw new DownError(`the home does not answer: ${(e as Error).message}`)
+            }
+            if (r.headers.get('x-shipkit-daemon') === 'down') throw new DownError(await r.text())
+            if (!r.ok) throw new Error(`/api/home.json answered ${r.status}: ${await r.text()}`)
+            const j = (await r.json()) as HomeAnswer
+            const back = this.wasDown
+            const cleared = this.pollError
+            this.wasDown = false
+            this.pollError = false
+            runInAction(() => {
+                this.data = j
+                this.down = ''
+                this.fresh = true
+                if (cleared) this.error = ''
+            })
+            // the shown repo starts once its hub answers
+            this.st.wake()
+            // and every other one is read ahead behind it
+            void this.st.prefetch()
+            // what the page loaded while the daemon was away failed: start over
+            if (back) this.reload()
+        } catch (e) {
+            const msg = (e as Error).message
+            if (e instanceof DownError) {
+                this.wasDown = true
+                runInAction(() => { this.down = msg })
+            } else {
+                this.pollError = true
+                runInAction(() => {
+                    this.down = ''
+                    this.error = msg
+                })
+            }
+        } finally {
+            await pm
+            this.polling = false
+            this.keep()
+        }
+    }
+
+    /** the machine as read now, kept for the next load. Only a change is written */
+    private keep(): void {
+        if (!this.fresh) return
+        try {
+            // the log tails change on every poll and only show on a hover: not kept
+            const pm = this.pm == null ? null : { ...this.pm, children: this.pm.children.map((c) => ({ ...c, tail: [] })), resources: this.pm.resources.map((r) => ({ ...r, tail: [] })) }
+            const s = JSON.stringify({ data: this.data, pm, widgets: this.widgets } satisfies Kept)
+            if (s === this.kept) return
+            globalThis.localStorage?.setItem(MACHINE_KEY, s)
+            this.kept = s
+        } catch { /* private window or blocked site data: the next load waits on the daemon */ }
+    }
+
+    private reload(): void {
+        if (this.o.reload != null) this.o.reload()
+        else window.location.reload()
+    }
+
+    private async post(path: string, body: unknown): Promise<boolean> {
+        try {
+            const r = await fetch(path, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(body) })
+            if (!r.ok) throw new Error(await r.text())
+            this.pollError = false
+            runInAction(() => { this.error = '' })
+            void this.load()
+            return true
+        } catch (e) {
+            runInAction(() => { this.error = (e as Error).message })
+            return false
+        }
+    }
+
+    hub(name: string, act: 'ensure' | 'restart'): Promise<boolean> {
+        return this.post('/api/home/hub', { name, act })
+    }
+
+    setActive(name: string, on: boolean): Promise<boolean> {
+        return this.post('/api/home/active', { name, on })
+    }
+
+    /** a global process: start, stop, restart, take over the copy started
+     *  elsewhere, open its url in the default browser or as an app window
+     *  (started first when it is down), or run one of its actions */
+    processAct(id: string, act: 'start' | 'stop' | 'restart' | 'takeover' | 'open' | 'app' | 'action', action?: string): Promise<boolean> {
+        return this.post('/api/pm/resource', { id, act, action })
+    }
+
+    /** restart the daemon or the web through pm */
+    restartChild(id: Role): Promise<boolean> {
+        return this.post('/api/pm/child', { id, act: 'restart' })
+    }
+
+    modernize(name: string): Promise<boolean> {
+        return this.post('/api/home/modernize', { name })
+    }
+
+    /** one more window on this page. In a gui window (a Chrome app) a popup
+     *  opens as its own app window */
+    newWindow(): void {
+        window.open(`${window.location.origin}${window.location.pathname}`, '_blank', 'popup,width=1400,height=900')
+    }
+
+    openInCode(name: string): void {
+        void this.st.projects.open(name)
+    }
+}