rvlib-shipkit 1.1.0 → 1.2.0

package/src/serve/hub-app/home-strip.tsx

@@ -0,0 +1,245 @@
+// the home's strip over every page it serves: one quiet line. On a repo page
+// the shown repo (its icon, its name in its own colour, the two swatches that
+// set those colours); on the overview and the plan, the page's name. On the
+// right, only machine wide trouble, and only while it lasts (pm or the daemon
+// down, a child or a global process crashed). The places themselves are the
+// two buttons at the top of the project list (⌘J, ⌘P) and the first two
+// entries of the picker.
+// What belongs to one repo (its hub state, restart, the active flag, VS
+// Code, modernize) is RepoControls, in that repo's own header. NotUp stands
+// in for the hub page while its hub cannot answer, with the fix. Every link
+// of the home is a page of the same app: a plain click moves it in place.
+import { observer } from 'mobx-react-lite'
+import type { ReactNode } from 'react'
+import type { ResourceView } from '../../home/resources.ts'
+import type { WorkerView } from '../../home/hubs.ts'
+import { NOT_INSTALLED } from '../../home/home-words.ts'
+import type { MachineSt } from './machine-st.ts'
+import { plainClick, type HomeSt } from './home-st.ts'
+import { Icon, ICON } from './icons.tsx'
+import { Tip } from './floating.tsx'
+
+const STATUS_WORD: Record<WorkerView['status'], string> = { up: 'up', starting: 'starting', crashed: 'crashed', down: 'down', stopping: 'stopping' }
+
+export const Dot = ({ s }: { s: WorkerView['status'] }) => <i className={`hdot ${s}`} />
+
+/** a link to a page of the home: a plain click shows it in place, any other
+ *  click keeps the browser's own behaviour */
+export const HomeLink = ({ app, to, className, title, children }: { app: HomeSt; to: string; className?: string; title?: string; children: ReactNode }) => (
+    <a className={className} href={to} title={title} onClick={(e) => {
+        if (!plainClick(e)) return
+        e.preventDefault()
+        app.navigate(to)
+    }}>{children}</a>
+)
+
+const Log = ({ lines }: { lines: string[] }) => (lines.length === 0 ? null : <pre className="hlog">{lines.join('\n')}</pre>)
+
+/** one switch per global process; its log floats under it on hover */
+export const ResourceChip = observer(({ m, r }: { m: MachineSt; r: ResourceView }) => {
+    const on = r.status === 'up' || r.status === 'starting'
+    const title = [r.description, r.where != null ? `on ${r.where}` : null, r.note].filter((x) => x != null).join(' · ')
+    const log = r.tail.length > 0 ? `${title !== '' ? `${title}\n\n` : ''}${r.tail.join('\n')}` : null
+    return (
+        <Tip className="hproc" tipClass="hpop" placement="bottom-start" interactive content={log} data-log={log == null ? undefined : 'yes'}>
+            <button className={`hres ${r.status}`} title={log != null ? undefined : title}
+                disabled={r.status === 'stopping' || (on && !r.canStop)}
+                onClick={() => void m.processAct(r.id, on ? 'stop' : 'start')}>
+                <Dot s={r.status} />{r.label}
+            </button>
+        </Tip>
+    )
+})
+
+/** a global process on the overview, as one card: its switch (its log
+ *  floats on hover), its state in words, the repo and file that declare it,
+ *  its url, then its buttons: restart, take over when a copy started
+ *  elsewhere runs, open in the browser, open as an app window (app: true
+ *  only), its declared actions */
+const ProcessCard = observer(({ m, r }: { m: MachineSt; r: ResourceView }) => {
+    const up = r.status === 'up'
+    return (
+        <section className="hcard">
+            <div className="hchead">
+                <ResourceChip m={m} r={r} />
+                <span className={`hcstate ${r.status}`}>{STATUS_WORD[r.status]}</span>
+            </div>
+            <div className="hdim hcfile">{r.repo}/{r.file}</div>
+            {r.url != null ? (
+                <a className="hcurl" href={r.url} title={`open ${r.url} in the default browser`} onClick={(e) => {
+                    // the default browser, through pm, never inside the shipkit window
+                    e.preventDefault()
+                    void m.processAct(r.id, 'open')
+                }}>{r.url.replace(/^https?:\/\//, '')}</a>
+            ) : null}
+            {r.description != null || r.where != null ? <div className="hdim">{[r.description, r.where != null ? `on ${r.where}` : null].filter((x) => x != null).join(' · ')}</div> : null}
+            <div className="hcbtns">
+                {up && r.canStop ? <button className="ghost" onClick={() => void m.processAct(r.id, 'restart')} title={`stop ${r.label} and start it again`}>restart</button> : null}
+                {r.takeOver?.ok === true ? <button className="ghost" onClick={() => void m.processAct(r.id, 'takeover')} title={`stop the copy of ${r.label} started elsewhere (the process group listening on its port) and start one pm supervises, in one go`}>take over</button> : null}
+                {r.url != null ? <button className="ghost" onClick={() => void m.processAct(r.id, 'open')} title={up ? `open ${r.url} in the default browser` : `start ${r.label}, then open ${r.url} in the default browser`}>{up ? 'open' : 'start and open'}</button> : null}
+                {r.app && r.url != null ? <button className="ghost" onClick={() => void m.processAct(r.id, 'app')} title={up ? `open ${r.url} as a shipkit app window` : `start ${r.label}, then open ${r.url} as a shipkit app window`}>open as app</button> : null}
+                {r.actions.map((a) => (
+                    <button key={a.id} className="ghost" disabled={r.running != null} onClick={() => void m.processAct(r.id, 'action', a.id)}>{r.running === a.id ? <span className="spin" /> : null}{a.label}</button>
+                ))}
+            </div>
+            {r.takeOver?.ok === false ? <div className="hnote">cannot take over: {r.takeOver.why}</div> : null}
+            {r.note != null ? <div className="hnote">{r.note}</div> : null}
+        </section>
+    )
+})
+
+/** every house repo's widgets: the html the daemon last rendered, each under its title */
+const Monitor = observer(({ m }: { m: MachineSt }) => {
+    const w = m.widgets
+    if (w == null || (w.widgets.length === 0 && w.errors.length === 0)) return null
+    return (
+        <section className="hsec">
+            <h2><Icon d={ICON.monitor} />monitor</h2>
+            <div className="hmon">
+                {w.widgets.map((x) => (
+                    <section key={`${x.repo}/${x.id}`} className="hwidget" title={`${x.repo}/${x.file}`}>
+                        <h3>{x.title}<span className="hdim"> · {x.repo}</span></h3>
+                        {x.error != null ? <p className="hnote">{x.error}</p> : null}
+                        {x.html == null ? <p className="twait"><span className="spin" /></p> : <div dangerouslySetInnerHTML={{ __html: x.html }} />}
+                    </section>
+                ))}
+            </div>
+            {w.errors.map((e) => <p key={e} className="hnote">{e}</p>)}
+        </section>
+    )
+})
+
+/** the two colours of a repo, a picker each: the page draws the dark one */
+export const IdentitySwatches = observer(({ app, name }: { app: HomeSt; name: string }) => {
+    const id = app.projects.identityOf(name)
+    return (
+        <span className="hswatch">
+            <input type="color" aria-label="colour on a dark background" title={`${name} on a dark background (this page): ${id.colorDark}, written to repo.config.ts identity.colorDark`}
+                value={id.colorDark} onChange={(e) => app.projects.setIdentity(name, { colorDark: e.currentTarget.value })} />
+            <input type="color" aria-label="colour on a light background" title={`${name} on a light background: ${id.colorLight}, written to repo.config.ts identity.colorLight`}
+                value={id.colorLight} onChange={(e) => app.projects.setIdentity(name, { colorLight: e.currentTarget.value })} />
+        </span>
+    )
+})
+
+/** the shown repo in the strip: its icon, its name in its colour */
+const ShownRepo = observer(({ app, name }: { app: HomeSt; name: string }) => {
+    const p = app.projects.list.find((x) => x.name === name)
+    const id = app.projects.identityOf(name)
+    return (
+        <span className="hrepo">
+            {/* the icon's box is there before the project list is, so the name never moves */}
+            {p?.icon != null ? <img src={p.icon} alt="" width={18} height={18} /> : <i className="hrico" />}
+            <b className="hrname" style={{ color: id.colorDark }}>{name}</b>
+            <IdentitySwatches app={app} name={name} />
+        </span>
+    )
+})
+
+/** what is wrong with the machine itself, one chip each. Nothing when all is
+ *  well: the strip states trouble, never health */
+const MachineAlerts = observer(({ m }: { m: MachineSt }) => (
+    <>
+        {(m.pm?.children ?? []).filter((c) => c.status === 'crashed' || c.status === 'down').map((c) => (
+            <span key={c.id} className="halert" title={c.note ?? c.tail.at(-1) ?? ''}><Dot s={c.status} />{c.id} {STATUS_WORD[c.status]}</span>
+        ))}
+        {(m.pm?.resources ?? []).filter((r) => r.status === 'crashed').map((r) => <ResourceChip key={r.id} m={m} r={r} />)}
+        {m.error !== '' ? <span className="herr" title={m.error}>{m.error}</span> : null}
+    </>
+))
+
+export const HomeStrip = observer(({ app }: { app: HomeSt }) => {
+    const m = app.machine
+    if (m == null) return null
+    const name = m.repo
+    return (
+        <>
+            {m.down !== '' ? <div className="hdown" role="alert"><b>daemon down</b> {m.down}</div> : null}
+            {m.pmDown !== '' ? <div className="hdown" role="alert"><b>pm down</b> {m.pmDown}</div> : null}
+            <div className="hstrip">
+                {name == null ? <span className="hplace">{app.page === 'planned' ? 'planned' : 'overview'}</span> : <ShownRepo app={app} name={name} />}
+                <span className="sp" />
+                <MachineAlerts m={m} />
+            </div>
+        </>
+    )
+})
+
+/** one repo's own controls on the home, in that repo's header: its hub
+ *  state, restart, the active flag, VS Code, and modernize when it is behind */
+export const RepoControls = observer(({ app, name }: { app: HomeSt; name: string }) => {
+    const m = app.machine
+    if (m == null) return null
+    const w = m.worker(name)
+    const behind = m.data?.behind[name]
+    return (
+        <span className="hctl">
+            {w == null || w.status === 'up' ? null : <span className="hstat"><Dot s={w.status} />{STATUS_WORD[w.status]}</span>}
+            <button className="ghost" onClick={() => void m.hub(name, 'restart')} title="load this repo's hub again, its config read fresh">restart</button>
+            <label className="hflag" title="an active repo runs the checks the plan holds for it, and gets its pings, even with no agent in it">
+                <input type="checkbox" checked={m.isActive(name)} onChange={(e) => void m.setActive(name, e.currentTarget.checked)} />active
+            </label>
+            <button className="ghost" onClick={() => m.openInCode(name)} title="open the folder in VS Code (or double click its icon)">VS Code</button>
+            {behind == null ? null : <button className="primary" onClick={() => void m.modernize(name)} title={`this repo runs shipkit ${behind}, the home runs ${m.data?.version}`}>modernize {behind} → {m.data?.version}</button>}
+        </span>
+    )
+})
+
+/** why the shown repo's hub does not answer, and what to do about it */
+export const NotUp = observer(({ app }: { app: HomeSt }) => {
+    const m = app.machine
+    const name = m?.repo
+    if (m == null || name == null) return null
+    const w = m.shown
+    const mod = m.data?.modernize[name]
+    if (w == null) return <div className="hwait"><p className="twait"><span className="spin" />{m.down !== '' ? `waiting for the daemon to load ${name}…` : `looking for ${name}…`}</p></div>
+    return (
+        <div className="hwait">
+            {w.blocked != null ? <p>{w.blocked}</p> : <p><Dot s={w.status} />{name}'s hub is {STATUS_WORD[w.status]}{w.note != null ? `: ${w.note}` : ''}</p>}
+            {w.blocked == null && (w.status === 'down' || w.status === 'crashed') ? <button className="primary" onClick={() => void m.hub(name, 'restart')}>start it</button> : null}
+            {w.blocked != null && mod?.status !== 'running' ? <button className="primary" onClick={() => void m.modernize(name)}>{w.blocked === NOT_INSTALLED ? 'bun install' : 'modernize'}</button> : null}
+            {mod == null ? null : <><p>modernize: {mod.status}{mod.code != null ? `, exit ${mod.code}` : ''}</p><Log lines={mod.tail} /></>}
+            <Log lines={w.tail} />
+        </div>
+    )
+})
+
+/** the overview at `/`: shipkit's own processes, a card per global process,
+ *  then the widgets. The repos are the project list's, not a section here */
+export const Overview = observer(({ app }: { app: HomeSt }) => {
+    const m = app.machine
+    if (m == null) return null
+    if (m.data == null) return <div className="hwait"><p className="twait"><span className="spin" />{m.down !== '' ? 'the daemon does not answer yet' : 'loading…'}</p></div>
+    const procs = m.pm?.resources ?? []
+    return (
+        <div className="hall">
+            <div className="hstack">
+                <section className="hsec">
+                    <h2><Icon d={ICON.shipkit} />shipkit<span className="sp" /><button className="ghost" title="open one more window on this page" onClick={() => m.newWindow()}>new window</button></h2>
+                    {m.pm == null ? <p className="hdim">pm does not answer, so its children and the global processes are unknown</p> : (
+                        <div className="hcards"><section className="hcard">
+                            <div className="hrow"><span className="hlink"><Dot s="up" />pm</span><span className="hdim">pid {m.pm.pid} · shipkit {m.pm.version}</span></div>
+                            {m.pm.children.map((c) => (
+                                <div key={c.id} className="hrow">
+                                    <span className="hlink"><Dot s={c.status} />{c.id}</span>
+                                    <span className="hdim">{STATUS_WORD[c.status]}{c.pid != null ? ` · pid ${c.pid}` : ''}{c.restarts > 0 ? ` · ${c.restarts} restart(s)` : ''}</span>
+                                    {c.note != null ? <span className="hnote">{c.note}</span> : null}
+                                    <span className="sp" />
+                                    <button className="ghost" onClick={() => void m.restartChild(c.id as 'daemon' | 'web')} title={`stop the ${c.id} and start it again, through pm`}>restart</button>
+                                    {c.status === 'crashed' ? <Log lines={c.tail} /> : null}
+                                </div>
+                            ))}
+                        </section></div>
+                    )}
+                </section>
+                <section className="hsec">
+                    <h2><Icon d={ICON.process} />global processes</h2>
+                    {procs.length === 0 ? <p className="hdim">{m.pm == null ? 'unknown while pm does not answer' : 'none declared: a repo declares one in a <name>.shipkit.ts file, as export default globalProcess({...})'}</p> : null}
+                    <div className="hcards">{procs.map((r) => <ProcessCard key={r.id} m={m} r={r} />)}</div>
+                    {(m.pm?.unitErrors ?? []).map((e) => <p key={e} className="hnote">{e}</p>)}
+                </section>
+                <Monitor m={m} />
+            </div>
+        </div>
+    )
+})

package/src/serve/hub-app/home.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>home</title>
+  <link rel="stylesheet" href="./hub.css" />
+  <link rel="stylesheet" href="./project-list.css" />
+  <link rel="stylesheet" href="./prose-hits.css" />
+  <link rel="stylesheet" href="./home-strip.css" />
+  <link rel="stylesheet" href="./planned.css" />
+</head>
+<body data-home>
+  <div id="root"></div>
+  <script type="module" src="./hub-app.tsx"></script>
+</body>
+</html>