rvlib-shipkit 1.1.1 → 1.3.0

package/src/serve/hub-app/hub.css

@@ -4,7 +4,11 @@
    action, and red/orange/green reserved for STATE. No rule outside this
    block writes a colour, and tests/hub-css-invariants.test.ts fails one
    that does. */
-:root{--bg:#0d0e10;--panel:#141619;--panel2:#1b1e22;--line:#282c31;--ink:#e2e4e7;--dim:#8d9299;
+:root{--bg:#0d0e10;--panel:#141619;
+ /* the surfaces of the regions, each a small step from the page so the rail,
+    the header and the dock read apart at a glance (no light theme: the page
+    is dark only, and colorDark is what it draws) */
+ --bg-side:#131519;--bg-top:#171a1f;--bg-dock:#10151b;--panel2:#1b1e22;--line:#282c31;--ink:#e2e4e7;--dim:#8d9299;
  --accent:#6b8fb3;--sel:#1a2430;--chk1:#16181b;--chk2:#121417;
  /* state, and nothing else: red broken · orange taste pending · green measured passing */
  --red:#d2605c;--warn:#cf9a4e;--ok:#6faa86;--blue:#6f9bd1;
@@ -16,58 +20,91 @@
  --k1:#8ca8c7;--k2:#a892c9;--k3:#6fb0b8;--k4:#c792b4;--k5:#9198a1;--k6:#8f95cf;
  --wash:rgba(107,143,179,.15);--wash2:rgba(107,143,179,.11);--hair:rgba(107,143,179,.5);
  --errbg:#2a1a1a;--errline:#4a2c2c;--errink:#e3bebe;
+ /* a running thing's wash, the green twin of errbg and errline */
+ --okbg:#15251c;--okline:#2f5a40;
  /* the ONE spacing scale: every padding, margin and gap in this sheet is a
     value from it or 0, and tests/hub-css-invariants.test.ts fails the rest */
  --s0:2px;--s1:4px;--s2:8px;--s3:12px;--s4:16px}
 *{box-sizing:border-box}html,body,#root{height:100%}
 body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 system-ui,sans-serif;overflow:hidden}
-/* the page is a flex ROW: a column mounted before .appcol sits left of the
-   header and everything under it, and .appcol stacks the header, the live
-   strip and the body */
-.app{display:flex;height:100vh}
-.appcol{flex:1;min-width:0;display:flex;flex-direction:column}
-.appbody{flex:1;min-height:0;display:grid;grid-template-columns:330px 1fr}
+/* a link with no class of its own: the browser default is dark blue on this dark page */
+a,a:visited{color:var(--accent)}
+/* the page is the window's height, the dock under it (hub-app.tsx): over
+   the dock two panels, the project list, then .appcol, which stacks the
+   strip, the header and the body */
+.appv{height:100vh}
+.app{height:100%}
+/* a panel's class lands on the div inside the panel (react-resizable-panels) */
+.pjpanel,.appcol,.pside,.pmain{height:100%;min-width:0}
+.apptop,.pdock{height:100%;min-height:0}
+.pjpanel{display:flex}
+.appcol{display:flex;flex-direction:column}
+/* one region per repo visited, the shown one alone displayed */
+.repo{flex:1;min-height:0;display:flex;flex-direction:column}
+.repo[hidden]{display:none}
+.appbody{flex:1;min-height:0}
+.pside{display:flex;flex-direction:column}
+.pside > aside{flex:1}
+.pmain{display:flex;flex-direction:column}
+.pmain > main{flex:1}
 
-/* ── the header: repo name, the core pages, the two runs and the run state ── */
-.hdr{display:flex;gap:var(--s2);align-items:center;height:36px;flex:none;padding:0 var(--s3);border-bottom:1px solid var(--line);background:var(--panel)}
+/* ── a repo's bar: on the home the strip (home-strip.css .hstrip), on a hub
+   of its own the header (.hdr). Its name, what runs now and the two runs,
+   then its processes, its trouble and its editor icons. One line at any
+   width: the container queries shrink the labels to their icons, then the
+   run state to its spinner ── */
+/* the repo's processes (serve.processes): a dot, its id, a link once up */
+.hprocs{display:inline-flex;gap:var(--s1);align-items:center}
+.hproc{display:inline-flex;align-items:center;gap:var(--s0)}
+.hproc button{padding:var(--s0) var(--s2);font-size:12px}
+.hproc a{color:var(--accent);text-decoration:none;font-size:12px}
+.pdot{display:inline-block;width:7px;height:7px;border-radius:4px;margin-right:var(--s1);background:var(--line)}
+.pdot.up{background:var(--ok)}.pdot.starting,.pdot.stopping{background:var(--warn)}.pdot.crashed{background:var(--red)}
+.hdr{display:flex;gap:var(--s2);align-items:center;height:36px;flex:none;padding:0 var(--s3);border-bottom:1px solid var(--line);background:var(--bg-top)}
 .hdr .sp{flex:1}
 .hname{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);font-weight:600;margin-right:var(--s2);white-space:nowrap}
-.hnav{display:flex;gap:var(--s1);overflow:hidden}
-.hnav button{border-color:transparent;color:var(--dim);border-radius:0;border-bottom:1px solid transparent;white-space:nowrap}
-.hnav button:hover{color:var(--ink);border-color:transparent;border-bottom-color:var(--line)}
-.hnav button.on{color:var(--accent);border-bottom-color:var(--accent)}
+.hdr,.hstrip{container-type:inline-size;white-space:nowrap}
+.hrun{display:inline-flex;align-items:center;gap:var(--s1);flex:none;margin-left:var(--s2)}
+.hbtn{display:inline-flex;align-items:center;gap:var(--s1);height:22px;padding:0 var(--s2);font-size:11.5px;white-space:nowrap;flex:none}
+.hbtn .hico{width:13px;height:13px}
+/* the editor icons: bare, dim, lit on hover, as the activity page's Fork icon */
+.hicon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:22px;padding:0;border:0;background:none;color:var(--dim)}
+.hicon:hover{color:var(--accent)}
+.hicon .hico{width:15px;height:15px}
 /* the run state holds its width whatever it says, so a run never moves the buttons beside it */
 .hstatus{max-width:420px;flex:0 1 auto;font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .hstatus.red{color:var(--red)}
 .hstatus.warn{color:var(--warn)}
-.hstate{display:inline-flex;gap:var(--s1);align-items:center;width:260px;min-width:260px;flex:none;justify-content:flex-end;font-size:11.5px;color:var(--dim);overflow:hidden}
+/* its words sit against the run buttons, cut with an ellipsis */
+.hstate{display:inline-flex;gap:var(--s1);align-items:center;width:200px;min-width:200px;flex:none;justify-content:flex-end;font-size:11.5px;color:var(--dim);overflow:hidden}
 .hstate.on{color:var(--ink)}
-.hstate .htext{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.hstate .htext{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.hstate .spin.idle{visibility:hidden;animation:none}
+/* after .hstate, so a narrow bar wins over its width */
+@container (max-width:600px){.hbtn .lbl{display:none}.hbtn{padding:0 var(--s1)}}
+@container (max-width:520px){.hstate{width:120px;min-width:120px}}
+@container (max-width:420px){.hstate .htext{display:none}.hstate{width:16px;min-width:16px}}
 
-/* ── the live strip: the one run chart. Folded, one thin row of ONE height
-   whatever runs; unfolded, the chart at the height its lanes hold, set
-   inline from a held value that grows at once and shrinks only after a
-   while, so it never jumps every second. The strip clips nothing itself, so
-   its (?) opens below it over the page; the chart box clips the chart ── */
-.live{display:flex;flex-direction:column;height:30px;flex:none;border-bottom:1px solid var(--line);background:var(--bg);font-size:11px;color:var(--dim)}
-.live .hbub{top:calc(100% + 6px);bottom:auto;z-index:30}
+/* a row of a (?) legend: one glyph or word, then its meaning */
 .lrow{display:flex;gap:var(--s2);align-items:center;height:29px;flex:none;padding:0 var(--s3)}
-.lrow .sp{flex:1}
-.lfold{display:inline-flex;gap:var(--s1);align-items:center;border-color:transparent;color:var(--dim);padding:var(--s0) var(--s1)}
-.lfold .sk{font-size:9px;opacity:.55}
-.lwho{width:180px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
-.live.idle .lwho{color:var(--dim)}
-.lwho i{font-style:normal;color:var(--dim);margin-left:var(--s1)}
-.lwho b{font-weight:500;color:var(--accent);margin-left:var(--s1)}
-.lchart{flex:1;min-width:0;height:21px;border:1px solid var(--line);border-radius:3px;overflow:hidden}
-.lopen{flex:1;min-height:0;overflow-y:auto;padding:0 var(--s3);scrollbar-width:thin;scrollbar-color:var(--line) transparent}
-.lnote,.lmore{flex:none;color:var(--warn);white-space:nowrap}
-.lbusy{flex:none;white-space:nowrap}
 
-/* ── sidebar ── */
-aside{border-right:1px solid var(--line);background:var(--panel);overflow-y:auto;min-height:0}
-.shead{position:sticky;top:0;background:var(--panel);padding:var(--s3);border-bottom:1px solid var(--line);
- font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);z-index:2;display:flex;justify-content:space-between;align-items:center}
+/* ── the left pane: the sections, the filter, then the tree, the one part
+   that scrolls ── */
+aside{border-right:1px solid var(--line);background:var(--panel);min-height:0;display:flex;flex-direction:column;overflow:hidden}
+aside > *{flex:none}
+aside > .tscroll{flex:1;min-height:0;overflow-y:auto}
+/* a repo's sections: the project list's lines (project-list.css .pjpl), a
+   little shorter, the current one lit and marked in the accent */
+.rsecs{display:flex;flex-direction:column;padding:var(--s1) 0;border-bottom:1px solid var(--line)}
+.rsec{display:flex;align-items:center;gap:var(--s2);width:100%;height:26px;padding:0 var(--s3);background:transparent;border:0;border-radius:0;text-align:left;color:var(--dim);font-size:13px;cursor:pointer}
+.rsec:hover{background:var(--panel2);color:var(--ink);border-color:transparent}
+.rsec.cur{background:var(--sel);color:var(--ink);box-shadow:inset 3px 0 0 var(--accent);font-weight:600}
+.rsec .hico{flex:none;width:16px;height:16px}
+.rsecl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.rsecn{flex:none;min-width:16px;height:16px;padding:0 var(--s1);border-radius:8px;font-size:10px;font-weight:700;line-height:16px;text-align:center;color:var(--bg)}
+.rsecn.nred{background:var(--red)}
+.rsecn.nwarn{background:var(--warn)}
+.rsec:hover .pjkey,.rsec.cur .pjkey{opacity:1}
 /* segmented severity filter — all · needs · red. A thin border and an
    underline on the live one: no fill, no pill */
 .seg{display:inline-flex;border:1px solid var(--line);border-radius:3px;overflow:hidden;flex:none}
@@ -78,10 +115,16 @@ aside{border-right:1px solid var(--line);background:var(--panel);overflow-y:auto
 .seg button.on{color:var(--accent);border-bottom-color:var(--accent)}
 .seg button .sk{margin-left:var(--s1);font-size:9px;opacity:.55}
 .swhen{padding:0 var(--s3) var(--s2);font-size:11px;color:var(--dim)}
-.ssearch{padding:var(--s2) var(--s3)}
+/* a narrow pane puts the severity filter under the input, never over it */
+.ssearch{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3)}
+.sfield{position:relative;flex:1 1 96px;min-width:0;display:flex}
 .ssearch input{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:4px;color:var(--ink);
- padding:var(--s1) var(--s2);font-size:12.5px;outline:none}
+ padding:var(--s0) var(--s4) var(--s0) var(--s2);font-size:12px;outline:none}
+.ssearch input::placeholder{color:var(--dim);opacity:.6;font-size:11.5px}
 .ssearch input:focus{border-color:var(--accent)}
+/* its key, the way the project list prints its keys (.pjkey) */
+.skey{position:absolute;right:var(--s2);top:50%;transform:translateY(-50%);pointer-events:none;font:10px/1 ui-monospace,Menlo,monospace;color:var(--dim);opacity:.6;background:none;border:0;padding:0}
+.sfield input:focus + .skey{opacity:0}
 /* ── the resource tree: ONE row shape, a fixed grid. The indent rides in
    the FIRST column and the label eats the slack, so every right side slot
    lines up down the whole column whatever the depth. Colour is on the
@@ -135,10 +178,11 @@ aside{border-right:1px solid var(--line);background:var(--panel);overflow-y:auto
 .tnote b{font-weight:600;color:var(--red)}
 .stabs{display:flex;gap:var(--s2);align-items:center;padding:var(--s1) var(--s3);border-bottom:1px solid var(--line)}
 .stabs .sp{flex:1}
-.stabs .cnt{font-size:11px;color:var(--dim)}
+.stabs .cnt{min-width:4ch;text-align:right;font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
 .catgen{display:inline-flex;gap:var(--s1)}
 .catgen button{padding:var(--s0) var(--s2);font-size:11px;font-weight:700}
 .tempty{padding:var(--s2) var(--s3);font-size:12px;color:var(--dim);white-space:pre-wrap}
+.twait{display:flex;align-items:center;gap:var(--s2)}
 .warnline{color:var(--red)}
 .fold{cursor:pointer;color:var(--dim);font-size:15px;display:inline-block;width:22px;text-align:center;
  padding:var(--s0);border-radius:3px;user-select:none}
@@ -373,7 +417,6 @@ kbd{background:var(--panel2);border:1px solid var(--line);border-radius:4px;padd
 .tlb.bad,.tlb.red{fill:var(--red)}
 .tlb.rep{fill:var(--line)}
 .tlb.run{fill:var(--accent);animation:pulse 1.6s ease-in-out infinite}
-.tlb.repo{fill:var(--k6)}
 .tlband.run{stroke:var(--accent)}
 .tlconc{fill:var(--hair)}
 .tlconc.over{fill:var(--warn)}
@@ -388,9 +431,9 @@ kbd{background:var(--panel2);border:1px solid var(--line);border-radius:4px;padd
 .tlgap.live text{fill:var(--ink)}
 .tlgap text{font-size:10px;pointer-events:none}
 .tlnow{stroke:var(--accent)}
-/* fixed to the viewport, placed from the pointer: every box of the strip
-   clips its overflow, and a tooltip inside them is cut to a sliver */
-.tlaxtip{position:fixed;z-index:30;display:flex;flex-direction:column;gap:0;padding:var(--s1) var(--s2);pointer-events:none;
+/* placed by floating-ui under the pointer, in a portal: every box of the
+   strip clips its overflow, and a tooltip inside them is cut to a sliver */
+.tlaxtip{z-index:30;display:flex;flex-direction:column;gap:0;padding:var(--s1) var(--s2);pointer-events:none;
  background:var(--panel);border:1px solid var(--line);border-radius:3px;box-shadow:0 2px 12px var(--shadow);font-size:11px;white-space:nowrap}
 .tlaxtip .dim{color:var(--dim)}
 /* the runs page: one tab bar, then one list. Every line on a grid of fixed
@@ -422,6 +465,8 @@ kbd{background:var(--panel2);border:1px solid var(--line);border-radius:4px;padd
    per test check (the tests page), the failing files with their failure line */
 .rtime{grid-template-columns:minmax(0,1fr) 88px 72px 128px 72px 40px 88px}
 .rcheckt{grid-template-columns:152px 88px 48px 56px minmax(0,1fr) 72px}
+/* every test file: file, check, duration, status, age */
+.rall{grid-template-columns:minmax(0,1fr) 152px 88px 52px 72px}
 .rhead .tleft{text-align:left}
 .tshare{display:grid;grid-template-columns:minmax(0,1fr) 36px;gap:var(--s1);align-items:center}
 .ttrack{display:block;height:6px;border-radius:1px;overflow:hidden;background:var(--panel2)}
@@ -542,17 +587,18 @@ a.tok{color:var(--accent)}
    height, so a streaming run never jumps the card it sits in */
 .wlog{margin:0;min-height:120px;max-height:320px;overflow-y:auto;background:var(--panel2);border:1px solid var(--line);
  border-radius:3px;padding:var(--s2);font:11.5px/1.5 ui-monospace,Menlo,monospace;color:var(--ink);white-space:pre-wrap}
-/* THE HELP: a `(?)` that says its one sentence at once, on hover and on
-   focus. No delay, no library, no state */
+/* THE HELP: a `(?)` that says its one sentence on hover and on focus, the
+   bubble placed by floating-ui (floating.tsx) */
 .hlp{display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;flex:none;
  border:1px solid var(--line);border-radius:50%;color:var(--dim);font-size:9px;line-height:1;cursor:help;
- position:relative;outline:none;user-select:none}
+ outline:none;user-select:none}
 .hlp:hover,.hlp:focus{color:var(--accent);border-color:var(--accent)}
-.hbub{display:none;position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);width:max-content;
+/* out of sight, still read by a screen reader and found by a page search */
+.vh{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
+.hbub,.ftip{z-index:40;width:max-content;
  max-width:260px;background:var(--panel2);border:1px solid var(--line);border-radius:3px;box-shadow:0 2px 10px var(--shadow);
  padding:var(--s1) var(--s2);font:11.5px/1.4 system-ui,sans-serif;text-transform:none;letter-spacing:0;
- color:var(--ink);white-space:normal;z-index:9}
-.hlp:hover .hbub,.hlp:focus .hbub{display:block}
+ color:var(--ink);white-space:normal;pointer-events:none}
 /* the type legend: every glyph of the tree with its word, in one bubble */
 .legend{display:flex;flex-direction:column;gap:var(--s1)}
 .legend .lrow{display:flex;gap:var(--s2);align-items:baseline;white-space:normal}
@@ -596,7 +642,9 @@ a.tok{color:var(--accent)}
 .graphview{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--s2);padding:var(--s3) var(--s4) var(--s4)}
 .gvhead{display:flex;gap:var(--s2);align-items:center;font-size:13px;min-width:0}
 .gvhead .gvtext{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-.graphview iframe{flex:1;min-height:0;width:100%;border:1px solid var(--line);border-radius:3px;background:var(--bg)}
+.gvframe{flex:1;min-height:0;position:relative;display:flex;border:1px solid var(--line);border-radius:3px;background:var(--bg)}
+.gvwait{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:var(--s2);font-size:12px;color:var(--dim)}
+.graphview iframe{position:relative;flex:1;min-height:0;width:100%;border:0;background:transparent}
 
 /* ── comfy item view (comfy-ts's own panel fills the stage) ── */
 .comfyview{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--s2);padding:var(--s3) var(--s4) var(--s4)}
@@ -646,7 +694,7 @@ a.mint{color:var(--accent);font-size:12px;text-decoration:none}
 a.mint:hover{text-decoration:underline}
 .colcard h3 .stchip,.colcard h3 a.mint{margin-left:var(--s2)}
 
-/* ── cmd+j palette ── */
+/* ── the cmd+k picker ── */
 .palov{position:fixed;inset:0;background:var(--scrim);z-index:100;display:flex;justify-content:center;align-items:flex-start;
  padding-top:14vh}
 .pal{width:min(560px,90vw);background:var(--panel);border:1px solid var(--line);border-radius:3px;
@@ -658,6 +706,9 @@ a.mint:hover{text-decoration:underline}
 .prow.on{background:var(--panel2)}
 .prow.none{color:var(--dim);cursor:default}
 .prow .plabel{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+/* the entry's icon: a place's button icon, a repo's own (project-list.tsx Face) */
+.prow .pface{flex:none;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;color:var(--dim)}
+.prow .pface img,.prow .pface .pgi{width:16px;height:16px;border-radius:4px;object-fit:contain}
 .prow .pchip{font-size:10px;color:var(--dim);background:var(--bg);border:1px solid var(--line);border-radius:5px;
  padding:var(--s0) var(--s1);text-transform:uppercase;letter-spacing:.08em;flex:none}
 
@@ -669,3 +720,12 @@ a.mint:hover{text-decoration:underline}
 pre{background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:var(--s4);overflow-x:auto;
  font:12.5px/1.55 ui-monospace,Menlo,monospace;white-space:pre-wrap}
 .ok{color:var(--ok)}.warn{color:var(--warn)}.fail{color:var(--red)}.dim{color:var(--dim)}
+
+/* ── the admin page: one row per control, its sentence under its name ── */
+.adrow{display:flex;align-items:center;gap:var(--s4);padding:var(--s3) 0;border-top:1px solid var(--line)}
+.adtext{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--s0);font-size:13px}
+.adtext .dim{font-size:12px}
+.adctl{flex:none;display:flex;align-items:center}
+.adflag{display:inline-flex;align-items:center;gap:var(--s1);font-size:12px;color:var(--dim)}
+.adflag input{width:auto;margin:0}
+.adconfirm{display:inline-flex;align-items:center;gap:var(--s2);font-size:12px}

package/src/serve/hub-app/icons.tsx

@@ -0,0 +1,34 @@
+// the few line icons of the home (the overview's section headers, the places
+// on top of the project list, a repo page's sections and its top bar): one 20
+// unit path each, stroked in the text colour, so the page's tokens colour them
+// and nothing else does.
+export const ICON = {
+    shipkit: 'M3 7.5 10 4l7 3.5v5L10 16l-7-3.5zM3 7.5 10 11l7-3.5M10 11v5',
+    process: 'M2 10h3.5l2-5 5 10 2-5H18',
+    monitor: 'M3 4h14v9H3zM7 16.5h6M10 13v3.5',
+    archived: 'M2.5 4h15v3.5h-15zM4 7.5V16h12V7.5M8 10.5h4',
+    home: 'M3 9.5 10 3.5l7 6M5 8v8.5h10V8M8.5 16.5v-4.5h3v4.5',
+    planned: 'M5.5 3h9M5.5 17h9M6.5 3c0 4 7 4 7 7s-7 3-7 7M13.5 3c0 4-7 4-7 7s7 3 7 7',
+    browser: 'M10 2.5a7.5 7.5 0 1 0 0 15a7.5 7.5 0 1 0 0-15M2.5 10h15M10 2.5c-3 3-3 12 0 15M10 2.5c3 3 3 12 0 15',
+    window: 'M2.5 4h15v12h-15zM2.5 7.5h15M5 5.75h.01M7 5.75h.01',
+    activity: 'M6 3v14M6 6.5a2 2 0 1 0 0 .01M6 13.5a2 2 0 1 0 0 .01M10 6.5h7M10 13.5h7M10 10h5',
+    fork: 'M6 5v10M6 3a2 2 0 1 0 0 .01M6 17a2 2 0 1 0 0 .01M14 5a2 2 0 1 0 0 .01M14 7c0 4.5-8 3.5-8 7',
+    search: 'M8.5 3a5.5 5.5 0 1 0 0 11a5.5 5.5 0 1 0 0-11M12.5 12.5 17 17',
+    // a repo page's sections, then its two runs and its editor
+    checks: 'M4 10.5 7.5 14 16 5.5',
+    runs: 'M3 5h8M3 10h12M3 15h6',
+    asks: 'M3 4h14v9H8l-4 3.5V13H3z',
+    tests: 'M8 3h4M8.5 3v5L4 16.5h12L11.5 8V3M6.2 12.5h7.6',
+    media: 'M3 4h14v12H3zM3 13l4-4 4 4 2-2 4 4M13 7.5h.01',
+    wikis: 'M10 5.5C8.5 4 6 3.5 3 4v11c3-.5 5.5 0 7 1.5c1.5-1.5 4-2 7-1.5V4c-3-.5-5.5 0-7 1.5zM10 5.5v11',
+    admin: 'M4 5h12M4 10h12M4 15h12M7 3.5v3M13 8.5v3M9 13.5v3',
+    health: 'M2 10h3.5l2-5 5 10 2-5H18',
+    gate: 'M10 2.5 16 5v4.5c0 4-2.7 6.5-6 8c-3.3-1.5-6-4-6-8V5zM7.5 10l2 2 3.5-3.5',
+    // the VS Code mark, its ribbon drawn as one outline
+    vscode: 'M14 2.5l3.5 1.7v11.6L14 17.5zM14 2.5 4.5 12.3 2.5 11V9l2-1.3L14 17.5M14 6.8 10.2 10l3.8 3.2',
+    sort: 'M6 3.5v13M3 13.5l3 3 3-3M14 16.5v-13M11 6.5l3-3 3 3',
+} as const
+
+export const Icon = ({ d }: { d: string }) => (
+    <svg className="hico" viewBox="0 0 20 20" width="16" height="16" aria-hidden="true" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d={d} /></svg>
+)

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

@@ -5,8 +5,14 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>hub</title>
   <link rel="stylesheet" href="./hub.css" />
-  <link rel="stylesheet" href="./project-gutter.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" />
+  <link rel="stylesheet" href="./activity.css" />
+  <link rel="stylesheet" href="./readme.css" />
+  <link rel="stylesheet" href="./dock.css" />
+  <link rel="stylesheet" href="./controls.css" />
 </head>
 <body>
   <div id="root"></div>

package/src/serve/hub-app/keys.ts

@@ -0,0 +1,60 @@
+// the page's command keys, read the same on every layout: ⌘1 to ⌘9 select the
+// nth repo of the project list, then the home row under the right hand: ⌘J
+// the overview, ⌘K the picker, ⌘L the activity, ⌘' the plan. ⌘B cycles the
+// dock at the bottom of the page (dock-st.ts): the line, slim, open.
+// A digit and the quote are read from the physical key (`code`), so an
+// AZERTY keyboard, where the key under 1 types `&`, selects the same repo. Ctrl stands in for
+// ⌘ off a Mac. The macOS app binds none of these to a menu item, so they
+// reach the page (tests/home-strip.test.tsx reads ShipkitGui.swift).
+export type PageKey = { t: 'repo'; n: number } | { t: 'home' } | { t: 'planned' } | { t: 'activity' } | { t: 'picker' } | { t: 'dock' }
+
+type KeyLike = { key: string; code: string; metaKey: boolean; ctrlKey: boolean; shiftKey: boolean; altKey: boolean }
+
+export function pageKey(e: KeyLike): PageKey | null {
+    if (!(e.metaKey || e.ctrlKey) || e.altKey) return null
+    const digit = /^Digit([1-9])$/.exec(e.code)
+    if (digit != null) return { t: 'repo', n: Number(digit[1]) }
+    if (e.shiftKey) return null
+    if (e.code === 'Quote' || e.key === "'") return { t: 'planned' }
+    const k = e.key.toLowerCase()
+    if (k === 'j') return { t: 'home' }
+    if (k === 'k') return { t: 'picker' }
+    if (k === 'l') return { t: 'activity' }
+    if (k === 'b') return { t: 'dock' }
+    return null
+}
+
+/** the shortcut each place of the home carries on its button */
+export const PLACE_KEY = { overview: '⌘J', planned: "⌘'", activity: '⌘L' } as const
+/** the picker's shortcut, on the second button, after home */
+export const PICKER_KEY = '⌘K'
+/** the dock's shortcut, on the dock's own header */
+export const DOCK_KEY = '⌘B'
+
+/** the tree's filter, on a repo page: a plain `/` focuses it, and its
+ *  badge at the input's right prints this */
+export const SEARCH_KEY = '/'
+
+export function isSearchKey(e: Pick<KeyLike, 'key' | 'metaKey' | 'ctrlKey' | 'altKey'>): boolean {
+    return e.key === SEARCH_KEY && !e.metaKey && !e.ctrlKey && !e.altKey
+}
+
+/** a repo page's sections, each on ⌥ and its letter. ⌥ because every other
+ *  layer is spoken for: the plain letters are the severity filter (a n r)
+ *  and the chart's follow key, ⌘ with these letters is copy, reload, select
+ *  all, new tab, minimize and close in the browser and the macOS app, and ⌥
+ *  plus a letter only types a character inside a text field, where the page
+ *  leaves the key alone. Read from the physical key (`code`): on a Mac ⌥C
+ *  types ç, and AZERTY moves the letters */
+export type SectionId = 'checks' | 'runs' | 'asks' | 'tests' | 'media' | 'wikis' | 'admin'
+export const SECTION_LETTER: Record<SectionId, string> = { checks: 'C', runs: 'R', asks: 'A', tests: 'T', media: 'M', wikis: 'W', admin: 'D' }
+/** the badge at the end of a section's line */
+export const sectionKeyLabel = (id: SectionId): string => `⌥${SECTION_LETTER[id]}`
+
+export function sectionKey(e: KeyLike): SectionId | null {
+    if (!e.altKey || e.metaKey || e.ctrlKey || e.shiftKey) return null
+    const m = /^Key([A-Z])$/.exec(e.code)
+    if (m == null) return null
+    const hit = Object.entries(SECTION_LETTER).find(([, l]) => l === m[1])
+    return hit == null ? null : (hit[0] as SectionId)
+}

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

@@ -1,30 +1,28 @@
-// The live strip under the header, as the page holds it: `/api/live.json`
-// read every second (the runs of the last ten minutes, the ones in flight,
-// here and in the other house repos), whether the strip is folded, and the
-// chart it draws. Folded, the chart is the thin rolling window of the last
-// two minutes; unfolded, the whole record (the recent runs of /api/live.json
-// over the older ones of /api/timeline.json), opened on its last ten minutes
-// and fit to all of it on demand. It is the hub's one run chart
-// (chart-view.ts, timeline-chart.tsx).
+// A repo's live runs, as the page holds them: `/api/live.json` read every
+// second while the repo shows (the runs of the last ten minutes and the ones
+// in flight), which the header's run state reads, and the chart of the runs
+// page over it: the whole record (the recent runs of /api/live.json over the
+// older ones of /api/timeline.json), opened on its last ten minutes and fit
+// to all of it on demand (chart-view.ts, timeline-chart.tsx). What runs in
+// every repo at once is the dock's (dock-st.ts).
 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 */
 export const LIVE_POLL_MS = 1_000
-/** the folded strip's window, and the span the unfolded one opens on */
-export const FOLDED_WINDOW_MS = 120_000
+/** the span the chart opens on */
 export const OPEN_WINDOW_MS = 600_000
-/** the most the unfolded chart grows to: past it the lanes scroll inside it */
+/** the most the chart grows to: past it the lanes scroll inside it */
 export const OPEN_MAX_H = 320
-/** how long the unfolded chart keeps a height its lanes no longer fill,
+/** how long the chart keeps a height its lanes no longer fill,
  *  so it grows at once and never shrinks under the eye every second */
 export const HEIGHT_HOLD_MS = 10_000
 
-/** the height the unfolded chart shows: up at once, down only once the
+/** the height the chart shows: up at once, down only once the
  *  lanes have wanted less for HEIGHT_HOLD_MS */
 export type HeldHeight = { h: number; lowSince: number | null }
 export function settleHeight(prev: HeldHeight, wanted: number, now: number, holdMs = HEIGHT_HOLD_MS): HeldHeight {
@@ -33,32 +31,20 @@ export function settleHeight(prev: HeldHeight, wanted: number, now: number, hold
     return now - prev.lowSince >= holdMs ? { h: wanted, lowSince: null } : prev
 }
 
-/** the whole record the unfolded chart draws: every run of the live view,
+/** the whole record the chart draws: every run of the live view,
  *  then the older runs of the record it does not carry, newest first */
 export function mergeRuns(recent: TimelineInvocation[], record: TimelineInvocation[]): TimelineInvocation[] {
     const seen = new Set(recent.map((i) => i.runId))
     return [...recent, ...record.filter((i) => !seen.has(i.runId))].sort((a, b) => b.started - a.started)
 }
-/** the lanes the folded strip has room for */
-export const FOLDED_LANES = 5
-
-/** where the fold is remembered. localStorage is per origin and every
- *  repo's hub has its own port, so this is per repo already */
-export const OPEN_KEY = 'hub:liveOpen'
-
-const readOpen = (): boolean => {
-    try { return globalThis.localStorage?.getItem(OPEN_KEY) === '1' } catch { return false }
-}
-
 /** the server clock now: the view's stamp plus what the page clock has
  *  counted since it arrived, since the page may be another machine */
-export const serverNow = (view: LiveView, receivedAt: number, clientNow: number): number => view.now + Math.max(0, clientNow - receivedAt)
+export const serverNow = (view: { now: number }, receivedAt: number, clientNow: number): number => view.now + Math.max(0, clientNow - receivedAt)
 
-/** what the chart draws: folded, the rolling two minutes; open, the whole
- *  record, opening on its last ten */
-export function liveSource(view: LiveView | null, now: number, open: boolean, record: TimelineInvocation[] = []): ChartSource | null {
+/** what the runs page's chart draws: the whole record, opening on its last
+ *  ten minutes */
+export function liveSource(view: LiveView | null, now: number, record: TimelineInvocation[] = []): ChartSource | null {
     if (view == null) return null
-    if (!open) return { invocations: view.invocations, now, windowMs: FOLDED_WINDOW_MS, laneCap: Math.max(1, FOLDED_LANES - view.repos.length), zoomable: false, cap: view.cap }
     return { invocations: mergeRuns(view.invocations, record), now, windowMs: null, zoomable: true, cap: view.cap, homeSpanMs: OPEN_WINDOW_MS }
 }
 
@@ -67,18 +53,16 @@ export class LiveSvc {
     /** the page clock when `view` arrived */
     receivedAt = 0
     error = ''
-    /** a short answer to a click (a repo whose hub is not serving) */
-    note = ''
-    open = readOpen()
-    /** the unfolded chart's height, held so it does not jump every second */
+    /** the chart's height, held so it does not jump every second */
     held: HeldHeight = { h: 0, lowSince: null }
     chart: ChartView
     private timer: ReturnType<typeof setInterval> | null = null
     private inFlight = false
+    private started = false
 
-    constructor(private st: HubSt) {
-        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 })
+    constructor(private st: RepoSt) {
+        this.chart = new ChartView(null, () => liveSource(this.view, this.now, this.st.timeline.data?.invocations ?? []))
+        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 */
@@ -86,18 +70,9 @@ export class LiveSvc {
         return this.view == null ? this.st.clock.now : serverNow(this.view, this.receivedAt, this.st.clock.now)
     }
 
-    toggle(): void {
-        this.open = !this.open
-        try { globalThis.localStorage?.setItem(OPEN_KEY, this.open ? '1' : '0') } catch { /* private window: the fold lasts the tab */ }
-        // either fold starts live: the folded strip is a trail, nothing else
-        this.chart.attach()
-        this.opened()
-    }
-
-    /** unfolded: back to the last ten minutes, the older record fetched, and
-     *  a height from the lanes as they are */
+    /** back to the last ten minutes, the older record fetched, and a height
+     *  from the lanes as they are */
     private opened(): void {
-        if (!this.open) return
         this.chart.home()
         this.chart.attach()
         this.held = { h: 0, lowSince: null }
@@ -107,18 +82,22 @@ export class LiveSvc {
 
     /** the height the lanes want now, as the held rule lets it show */
     settle(now: number): void {
+        // no runs page on screen, no chart to size: the record is not laid out
+        if (this.chart.viewW === 0) return
         const l = this.chart.layout
-        const lanes = (l?.lanes ?? 0) + (this.view?.repos.length ?? 0)
+        const lanes = l?.lanes ?? 0
         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 +107,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
@@ -136,14 +115,14 @@ export class LiveSvc {
                 this.view = v
                 this.receivedAt = Date.now()
                 this.error = ''
-                if (this.open) this.settle(Date.now())
+                this.settle(Date.now())
             })
             // a run that ended, from a terminal as much as from a button,
             // 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}` })
@@ -155,20 +134,4 @@ export class LiveSvc {
     get running(): boolean {
         return (this.view?.runs.length ?? 0) > 0
     }
-
-    /** 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 }
-            if (r.url != null) window.open(r.url, '_blank')
-            else this.say(`${repo} has no hub serving`)
-        } catch (e) {
-            this.say(`${repo}: ${(e as Error).message}`)
-        }
-    }
-
-    private say(text: string): void {
-        runInAction(() => { this.note = text })
-        setTimeout(() => runInAction(() => { if (this.note === text) this.note = '' }), 4_000)
-    }
 }