rvlib-shipkit 1.4.0 → 1.6.0

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

@@ -38,7 +38,6 @@ a,a:visited{color:var(--accent)}
 .pjpanel,.appcol,.pside,.pmain{height:100%;min-width:0}
 .apptop,.pdock{height:100%;min-height:0}
 .pjpanel{display:flex}
-/* the box the machine toasts float in (home-strip.css .htoasts) */
 .appcol{position:relative;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}
@@ -50,10 +49,9 @@ a,a:visited{color:var(--accent)}
 .pmain > main{flex:1}
 
 /* ── 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 ── */
+   of its own the header (.hdr). Its name, its check… button and a spinner
+   while a run goes, then its processes and its editor icons, on one line.
+   Its trouble floats under it (home-strip.css .htoasts) ── */
 /* 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)}
@@ -64,7 +62,7 @@ a,a:visited{color:var(--accent)}
 .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}
-.hdr,.hstrip{container-type:inline-size;white-space:nowrap}
+.hdr,.hstrip{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}
@@ -72,40 +70,37 @@ a,a:visited{color:var(--accent)}
 .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)}
-/* 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{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}}
 
 /* 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)}
 
-/* ── the left pane: the sections, the filter, then the tree, the one part
-   that scrolls ── */
+/* ── the left pane: 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)}
+/* the tree is long, so it keeps a scroll indicator, a thin one with no track:
+   WebKit (the macOS app) ignores scrollbar-width and draws a wide dark band */
+aside > .tscroll{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
+aside > .tscroll::-webkit-scrollbar{width:6px}
+aside > .tscroll::-webkit-scrollbar-track{background:transparent}
+aside > .tscroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
+/* a section, the tree's top row: the project list's lines (project-list.css
+   .pjpl), a little shorter, the current one lit and marked in the accent.
+   The chevron column is the tree's own, so a section's rows line up under it */
+.tsec{display:grid;grid-template-columns:14px 16px minmax(0,1fr) auto auto;align-items:center;gap:var(--s2);height:26px;padding:0 var(--s1) 0 var(--s2);color:var(--dim);font-size:13px;cursor:pointer;white-space:nowrap}
+.tsec:hover{background:var(--panel2);color:var(--ink)}
+.tsec.empty{opacity:.4}
+.tsec.noop{cursor:default}
+.tsec.noop:hover{background:none;color:var(--dim)}
+.tsec.on{box-shadow:inset 2px 0 0 var(--accent)}
+.tsec.cur{background:var(--sel);color:var(--ink);box-shadow:inset 3px 0 0 var(--accent);font-weight:600}
+.tsec .hico{width:16px;height:16px}
+.tsec:hover .tw{color:var(--ink)}
+.rsecl{min-width:0;overflow:hidden;text-overflow:ellipsis}
+.rsecn{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}
+.tsec:hover .pjkey,.tsec.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}
@@ -115,9 +110,8 @@ aside > .tscroll{flex:1;min-height:0;overflow-y:auto}
 .seg button:hover{color:var(--ink)}
 .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)}
 /* 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)}
+.ssearch{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);border-bottom:1px solid var(--line)}
 .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(--s0) var(--s4) var(--s0) var(--s2);font-size:12px;outline:none}
@@ -133,8 +127,8 @@ aside > .tscroll{flex:1;min-height:0;overflow-y:auto}
    no prose, no dash separators ── */
 .tree{padding:var(--s1) 0 var(--s4);outline:none}
 .tree:focus-visible{box-shadow:inset 2px 0 0 var(--accent)}
-.trow{display:grid;grid-template-columns:calc(var(--d,0)*12px + 18px) 14px minmax(0,1fr) 58px 46px 14px;
- align-items:center;gap:var(--s1);padding:0 var(--s2);height:20px;line-height:20px;cursor:pointer;white-space:nowrap}
+.trow{display:grid;grid-template-columns:calc(var(--d,0)*10px + 14px) 14px minmax(0,1fr) 12px auto 14px;
+ align-items:center;gap:var(--s1);padding:0 var(--s1) 0 var(--s2);height:20px;line-height:20px;cursor:pointer;white-space:nowrap}
 .trow:hover{background:var(--panel2)}
 .trow.on{background:var(--sel);box-shadow:inset 2px 0 0 var(--accent)}
 /* the fold marker: an 11px chevron with the whole first column as its hit
@@ -168,21 +162,20 @@ aside > .tscroll{flex:1;min-height:0;overflow-y:auto}
 .tg.ok{color:var(--ok)}
 .tg.adv{color:var(--warn);opacity:.75}
 .tg.run{color:var(--accent);animation:pulse 1.1s ease-in-out infinite}
-/* right aligned, tabular figures, ONE unit (ms) and one tone table, so a
-   column of durations compares by eye (hub-app/dur.ts owns both) */
-.tdur{font:10.5px ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;text-align:right;color:var(--dim);overflow:hidden}
+/* the duration: a clock tinted by the tone table (hub-app/dur.ts), the
+   figure in its tooltip, so the label keeps the width */
+.tdur{display:flex;align-items:center;justify-content:center;color:var(--dim)}
+.tdur .hico{width:11px;height:11px;color:inherit}
 .tdur.fast,.dnum.fast{color:var(--ok)}
 .tdur.plain,.dnum.plain{color:var(--ink)}
 .tdur.slow,.dnum.slow{color:var(--warn)}
 .tdur.bad,.dnum.bad{color:var(--red)}
 .tnote{font-size:10px;text-align:right;color:var(--dim);overflow:hidden;text-overflow:ellipsis}
 .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{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}
+.thidden{cursor:pointer}.thidden:hover{color:var(--ink)}
 .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;
@@ -369,7 +362,15 @@ kbd{background:var(--panel2);border:1px solid var(--line);border-radius:4px;padd
 .assetrem .rem{color:var(--ok);border-left:2px solid var(--ok);padding-left:var(--s2);font-size:12.5px;margin:0 0 var(--s2);white-space:pre-wrap}
 
 /* ── collection item card + status card ── */
-.colcard{max-width:760px;width:100%;background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:var(--s4);text-align:left}
+/* a repo page sits on the page background, never in a box of its own: its
+   header and its sentence are unboxed, and each group it holds (the facts,
+   a titled section, the command, the admin rows, the runs list) is one
+   lighter box, so a box always means "these belong together" */
+.colcard{max-width:760px;width:100%;padding:var(--s2) 0;text-align:left}
+.colcard>.cfacts,.colcard>.csec,.colcard>.ccmd,.colcard>.md:not(.usays),.colcard>.adbox,.tlcard>.rlist{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:var(--s2) var(--s3)}
+.colcard>.cfacts,.colcard>.ccmd,.colcard>.md:not(.usays),.colcard>.adbox{margin-top:var(--s3)}
+.ccmd>.cf:first-child,.cfacts>.cf:nth-child(-n+2){border-top:0}
+@media (max-width:900px){.cfacts>.cf:nth-child(2){border-top:1px solid var(--line)}}
 .colcard h3{margin:0 0 var(--s2);font-size:15px;display:flex;gap:var(--s2);align-items:baseline}
 .colcard h3 .sp{flex:1}
 .colcard .truth{margin-left:auto;font:11px ui-monospace,Menlo,monospace;color:var(--dim)}
@@ -560,6 +561,15 @@ a.tok{color:var(--accent)}
 .checkcard .dim{color:var(--dim)}
 /* what is not a fact: the output and the slow suites, titled, unboxed */
 .csec{margin-top:var(--s4)}
+/* where it runs: one line per context, the value then its meaning. A context
+   that never runs the check stays dim, so the lit lines read down the list */
+.cruns{display:grid;grid-template-columns:auto auto minmax(0,1fr);column-gap:var(--s3);row-gap:var(--s0);align-items:baseline}
+.crun{display:contents;color:var(--dim)}
+.crv{font:11px ui-monospace,Menlo,monospace;white-space:nowrap}
+.crun.on .crv{color:var(--ok)}
+.crun.cache .crv{color:var(--ink)}
+.crm{font-size:11.5px;color:var(--dim);opacity:.8}
+.crun:not(.on) .crm{opacity:.5}
 .cstitle{display:flex;gap:var(--s1);align-items:center;font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--dim);margin-bottom:var(--s2)}
 .wline{margin-bottom:var(--s1);word-break:break-word}
@@ -624,18 +634,21 @@ a.tok{color:var(--accent)}
  padding:var(--s1) var(--s2);font-size:12.5px;outline:none}
 .wform input:focus{border-color:var(--accent)}
 
-/* ── collection view (one card per instance) ── */
-.colgrid{flex:1;min-height:0;overflow-y:auto;padding:var(--s3) var(--s4)}
-.cghead{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
+/* ── a collection's page: its title and count, then its table ── */
+.cghead{font-size:15px;font-weight:600;color:var(--ink);
  display:flex;gap:var(--s2);align-items:baseline;margin:0 0 var(--s3)}
-.cghead .cnt{font-size:11px;color:var(--dim);letter-spacing:0;text-transform:none}
-/* the checks and asks pages: one dense table each (col-tables-view.tsx), on
+.ctlead{font-size:11px;color:var(--dim);margin:calc(-1 * var(--s1)) 0 var(--s2)}
+.cghead .cnt{font-size:12px;font-weight:400;color:var(--dim)}
+/* the checks, asks and secrets pages: one dense table each (col-tables-view.tsx), on
    the activity table (.actable), a group header per state that folds */
 .ctpage{flex:1;min-height:0;overflow-y:auto;padding:var(--s3) var(--s4);font-size:12.5px;container-type:inline-size}
+/* the table sits on the panel surface, the way every card section does, so
+   its lines read against something lighter than the page */
+.ctbox{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:var(--s1) 0}
 .cttable{font-variant-numeric:tabular-nums}
 .cttable td{padding:var(--s0) var(--s2);vertical-align:baseline}
-.ctgrp td{padding:var(--s2) var(--s2) var(--s1);color:var(--dim);font-size:11.5px;border-bottom:1px solid var(--line);cursor:pointer;user-select:none}
-.ctgrp:hover td{color:var(--ink)}
+.ctgrp td{padding:var(--s2) var(--s2) var(--s1);color:var(--ink);font-size:12.5px;font-weight:600;border-bottom:1px solid var(--line);cursor:pointer;user-select:none}
+.ctgrp:hover td{color:var(--accent)}
 .ctgrp.g-fail td{color:var(--red)}
 .ctgrp.g-warn td{color:var(--warn)}
 .ctcaret{display:inline-block;width:14px}
@@ -648,17 +661,8 @@ a.tok{color:var(--accent)}
 .ctbudget,.ctplan,.ctblocks{color:var(--dim)}
 .ctprobe{font-size:11.5px}
 .cttable .c-dot{width:22px}.cttable .c-id{width:140px}.cttable .c-title{width:16%}.cttable .c-age{width:72px}.cttable .c-dur{width:152px}.cttable .c-plan{width:88px}
-.cttable .c-kind{width:92px}.cttable .c-blocks{width:32%}.cttable .c-probe{width:84px}
+.cttable .c-name{width:30%}.cttable .c-file{width:34%}.cttable .c-kind{width:92px}.cttable .c-blocks{width:32%}.cttable .c-probe{width:84px}
 @container (max-width:760px){.cttable .c-title{width:0}.cttable .cttitle{display:none}.cttable .c-plan{width:0}.cttable .ctplan{display:none}}
-.cgcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--s3)}
-.cgcard{background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:var(--s2) var(--s3);cursor:pointer;min-width:0}
-.cgcard:hover{border-color:var(--accent)}
-.cgcard .cgtop{display:flex;gap:var(--s2);align-items:center;min-width:0}
-.cgcard .cgtop b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-.cgcard .truth{display:block;font:11px ui-monospace,Menlo,monospace;color:var(--dim);margin-top:var(--s1);
- white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-.cgcard .cgrem{color:var(--ok);border-left:2px solid var(--ok);padding-left:var(--s2);font-size:12px;margin-top:var(--s1);
- white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 
 /* ── graph item view (the graph itself fills the stage) ── */
 .graphview{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--s2);padding:var(--s3) var(--s4) var(--s4)}
@@ -701,13 +705,10 @@ a.tok{color:var(--accent)}
  overflow-x:auto;font:11px/1.5 ui-monospace,Menlo,monospace;white-space:pre}
 .md pre code{background:none;border:0;padding:0}
 .md a{color:var(--accent)}
-.md.clamp{max-height:180px;overflow:hidden;margin-top:var(--s1);
- -webkit-mask-image:linear-gradient(var(--solid) 65%,transparent);mask-image:linear-gradient(var(--solid) 65%,transparent)}
 
 /* ── secret (cred) cards ── */
 .credname{font:600 13px ui-monospace,Menlo,monospace}
 .creddesc{font-size:12px;color:var(--dim);margin-top:var(--s1)}
-.credrow{display:flex;gap:var(--s2);align-items:center;margin-top:var(--s2)}
 .stchip{font-size:10px;border-radius:5px;padding:var(--s0) var(--s2);letter-spacing:.08em;text-transform:uppercase;
  border:1px solid;flex:none;font-weight:600}
 .stchip.ok{color:var(--ok);border-color:var(--ok)}
@@ -745,9 +746,34 @@ pre{background:var(--panel);border:1px solid var(--line);border-radius:3px;paddi
 
 /* ── 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)}
+.adrow:first-child{border-top:0}
 .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}
+.adid{display:flex;align-items:flex-start;gap:var(--s4)}
+.adicon{flex:none;width:128px;display:flex;flex-direction:column;gap:var(--s1);font-size:12px}
+.adicon img{display:block;width:128px;height:128px}
+.adicon img[hidden]{display:none}
+.adpick{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s1);font-size:12px;cursor:pointer}
+.colcard .adpick input{flex:none;min-width:0;width:28px;height:28px;padding:0;margin:0;border:1px solid var(--line);border-radius:4px;background:none;cursor:pointer}
+.adpick input::-webkit-color-swatch-wrapper{padding:0}
+.adpick input::-webkit-color-swatch{border:none;border-radius:3px}
+.adsample{padding:var(--s0) var(--s2);border-radius:4px;font-weight:600;font-size:13px}
+.adsample.dark{background:var(--bg)}
+.adsample.light{background:var(--tag)}
 .adconfirm{display:inline-flex;align-items:center;gap:var(--s2);font-size:12px}
+/* a repo's plan page: one line per planned check */
+.plntable{width:100%;border-collapse:collapse;font-size:12.5px}
+.plntable td{padding:var(--s1) var(--s2);border-top:1px solid var(--line);vertical-align:baseline}
+.plntable tr:first-child td{border-top:0}
+.plnwhen{white-space:nowrap;font-variant-numeric:tabular-nums}
+.plnrun{text-align:right;white-space:nowrap}
+/* a repo's git page */
+.gitfiles,.gitcommits{width:100%;border-collapse:collapse;font-size:12.5px}
+.gitfiles td,.gitcommits td{padding:2px var(--s2);vertical-align:baseline}
+.gitkind{width:1%;white-space:nowrap;color:var(--dim)}
+.gitkind.staged{color:var(--ok)}
+.gitkind.untracked{color:var(--warn)}
+.gitpath{font:12px ui-monospace,Menlo,monospace;overflow-wrap:anywhere}

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

@@ -5,6 +5,11 @@
 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',
+    processes: 'M2 10h3.5l2-5 5 10 2-5H18',
+    when: 'M10 3a7 7 0 1 0 .01 0M10 6v4l2.5 2',
+    plan: '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',
+    git: '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',
+    reflections: 'M4 3.5h12v9H9l-4 3.5v-3.5H4zM7.5 7h5M7.5 9.5h3',
     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',
@@ -15,7 +20,11 @@ export const ICON = {
     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
+    readme: 'M5 2.5h7l3 3v12H5zM12 2.5v3h3M7.5 9h5M7.5 12h5M7.5 15h3',
     checks: 'M4 10.5 7.5 14 16 5.5',
+    contracts: 'M5 2.5h10v15H5zM7.5 6h5M7.5 9h5M7.5 12h2.5',
+    repo: 'M2.5 5h5l1.5 1.5h8.5v9.5h-15z',
+    secrets: 'M7 7a3 3 0 1 0 0 6a3 3 0 1 0 0-6M10 10h7.5M15 10v2.5M17.5 10v2',
     runs: 'M3 5h8M3 10h12M3 15h6',
     asks: 'M3 4h14v9H8l-4 3.5V13H3z',
     tests: 'M8 3h4M8.5 3v5L4 16.5h12L11.5 8V3M6.2 12.5h7.6',
@@ -30,6 +39,8 @@ export const ICON = {
     // a process's own switches on the overview
     play: 'M6.5 4.5v11l9-5.5z',
     stop: 'M5.5 5.5h9v9h-9z',
+    link: 'M8.5 11.5a3.5 3.5 0 0 0 5 0l2.5-2.5a3.5 3.5 0 0 0-5-5l-1 1M11.5 8.5a3.5 3.5 0 0 0-5 0L4 11a3.5 3.5 0 0 0 5 5l1-1',
+    clock: 'M10 2.5a7.5 7.5 0 1 0 0 15a7.5 7.5 0 1 0 0-15M10 6v4l2.5 2',
     restart: 'M15.5 10a5.5 5.5 0 1 1-1.6-3.9M14.2 3v3.3h-3.3',
 } as const
 

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

@@ -9,6 +9,7 @@
   <link rel="stylesheet" href="./prose-hits.css" />
   <link rel="stylesheet" href="./home-strip.css" />
   <link rel="stylesheet" href="./planned.css" />
+  <link rel="stylesheet" href="./when.css" />
   <link rel="stylesheet" href="./activity.css" />
   <link rel="stylesheet" href="./readme.css" />
   <link rel="stylesheet" href="./dock.css" />

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

@@ -1,12 +1,12 @@
 // 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
+// nth repo of the project list, ⌘↑ and ⌘↓ the repo above or below, then the home row under the right hand: ⌘J
 // the picker, ⌘K the overview, ⌘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' }
+export type PageKey = { t: 'repo'; n: number } | { t: 'step'; by: -1 | 1 } | { t: 'home' } | { t: 'planned' } | { t: 'activity' } | { t: 'picker' } | { t: 'dock' }
 
 type KeyLike = { key: string; code: string; metaKey: boolean; ctrlKey: boolean; shiftKey: boolean; altKey: boolean }
 
@@ -15,6 +15,8 @@ export function pageKey(e: KeyLike): PageKey | 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.key === 'ArrowUp') return { t: 'step', by: -1 }
+    if (e.key === 'ArrowDown') return { t: 'step', by: 1 }
     if (e.code === 'Quote' || e.key === "'") return { t: 'planned' }
     const k = e.key.toLowerCase()
     if (k === 'j') return { t: 'picker' }
@@ -28,6 +30,8 @@ export function pageKey(e: KeyLike): PageKey | null {
 export const PLACE_KEY = { overview: '⌘K', planned: "⌘'", activity: '⌘L' } as const
 /** the picker's shortcut, on the first button, before home */
 export const PICKER_KEY = '⌘J'
+/** the repo above and below, hinted at the project list's foot */
+export const STEP_KEYS = ['⌘↑', '⌘↓'] as const
 /** the dock's shortcut, on the dock's own header */
 export const DOCK_KEY = '⌘B'
 
@@ -35,6 +39,10 @@ export const DOCK_KEY = '⌘B'
  *  badge at the input's right prints this */
 export const SEARCH_KEY = '/'
 
+/** in the filter, up and down walk the tree rows the filter keeps; left
+ *  and right stay the text caret's */
+export const isTreeWalk = (key: string): boolean => key === 'ArrowUp' || key === 'ArrowDown'
+
 export function isSearchKey(e: Pick<KeyLike, 'key' | 'metaKey' | 'ctrlKey' | 'altKey'>): boolean {
     return e.key === SEARCH_KEY && !e.metaKey && !e.ctrlKey && !e.altKey
 }
@@ -46,8 +54,11 @@ export function isSearchKey(e: Pick<KeyLike, 'key' | 'metaKey' | 'ctrlKey' | 'al
  *  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' }
+export type SectionId = 'readme' | 'contracts' | 'shipkit' | 'repo' | 'secrets' | 'when' | 'runs' | 'plan' | 'processes' | 'git' | 'asks' | 'reflections' | 'tests' | 'media' | 'wikis' | 'admin'
+export const SECTION_LETTER: Record<SectionId, string> = { readme: 'E', contracts: 'K', shipkit: 'S', repo: 'C', secrets: 'X', when: 'O', runs: 'R', plan: 'N', processes: 'P', git: 'G', asks: 'A', reflections: 'F', tests: 'T', media: 'M', wikis: 'W', admin: 'D' }
+/** a section's words on its row, where the id alone would not say it */
+export const SECTION_LABEL: Partial<Record<SectionId, string>> = { shipkit: 'shipkit checks', repo: 'repo checks' }
+export const sectionLabel = (id: SectionId): string => SECTION_LABEL[id] ?? id
 /** the badge at the end of a section's line */
 export const sectionKeyLabel = (id: SectionId): string => `⌥${SECTION_LETTER[id]}`
 

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

@@ -11,6 +11,7 @@ import type { TimelineInvocation } from '../../ledger/run-timeline.ts'
 import { ChartView, type ChartSource } from './chart-view.ts'
 import type { RepoSt } from './repo-st.ts'
 import { chartHeight } from './timeline-geometry.ts'
+import { ownTrouble, reach } from './reach.ts'
 
 /** how often the page asks. A strip a second behind the runner is still live */
 export const LIVE_POLL_MS = 1_000
@@ -107,7 +108,7 @@ export class LiveSvc {
         if (this.inFlight) return
         this.inFlight = true
         try {
-            const r = await fetch(this.st.url('/api/live.json'))
+            const r = await reach(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
@@ -125,7 +126,7 @@ export class LiveSvc {
                 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}` })
+            runInAction(() => { this.error = ownTrouble(e, this.st.home.machine, (m) => `the live runs could not be read: ${m}`) })
         } finally {
             this.inFlight = false
         }

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

@@ -14,6 +14,7 @@ import { processGroups, type ProcessGroup } from '../../home/process-rows.ts'
 import { ClockSvc } from './clock-svc.ts'
 import type { HomeSt } from './home-st.ts'
 import type { HubDot } from './projects-svc.ts'
+import { ownTrouble, reach, Unreachable } from './reach.ts'
 
 export const MACHINE_POLL_MS = 1_500
 /** past the web's own wait on the daemon (serve-web.ts MACHINE_ANSWER_MS), so
@@ -38,13 +39,9 @@ function loadKept(): Kept | null {
     }
 }
 
-/** the poll failed because nothing behind the page answers, not on an error of an answer */
-/** the web (no answer at all) or the daemon behind it (the web says so) */
-class DownError extends Error {
-    constructor(msg: string, readonly who: 'web' | 'daemon') {
-        super(msg)
-    }
-}
+/** the web not answering, in the words of the daemon's (serve-web.ts daemonDownText) */
+export const webDownText = (why: string): string =>
+    `the shipkit web does not answer on ${globalThis.location?.origin ?? 'this page\'s origin'} (${why}). \`shipkit pm\` runs it; this page comes back by itself once it answers`
 
 export type MachineOpts = { reload?: () => void; timeoutMs?: number }
 
@@ -149,7 +146,7 @@ export class MachineSt {
     /** 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) })
+            const r = await reach('/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(() => {
@@ -180,19 +177,15 @@ export class MachineSt {
         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) {
+        // never held on: a widget that answers late only shows late. Asked only
+        // while the overview shows: the daemon renders a widget for a reader,
+        // and a render can cost another machine an ssh session
+        if (!this.widgetsPolling && this.st.page === 'overview' && globalThis.document?.visibilityState !== 'hidden') {
             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}`, 'web')
-            }
-            if (r.headers.get('x-shipkit-daemon') === 'down') throw new DownError(await r.text(), 'daemon')
+            const r = await reach('/api/home.json', { signal: AbortSignal.timeout(this.o.timeoutMs ?? MACHINE_TIMEOUT_MS) })
             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
@@ -213,11 +206,12 @@ export class MachineSt {
             if (back) this.reload()
         } catch (e) {
             const msg = (e as Error).message
-            if (e instanceof DownError) {
+            if (e instanceof Unreachable) {
                 this.wasDown = true
+                const who = e.who === 'web' ? 'web' : 'daemon'
                 runInAction(() => {
-                    this.down = msg
-                    this.downWho = e.who
+                    this.down = who === 'web' ? webDownText(msg) : msg
+                    this.downWho = who
                 })
             } else {
                 this.pollError = true
@@ -253,14 +247,16 @@ export class MachineSt {
 
     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) })
+            const r = await reach(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 })
+            // the machine not answering is the down card's, which the next poll raises
+            runInAction(() => { this.error = ownTrouble(e, this) })
+            void this.load()
             return false
         }
     }

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

@@ -0,0 +1,51 @@
+// A repo's plan page: what the machine runs here on its own time, soonest
+// first, then the checks only a save runs. The rows are this repo's slice of
+// the machine's plan, already carried by /api/resources.json, so the page
+// reads nothing of its own. The home's planned page is the same plan for
+// every repo at once.
+import { observer } from 'mobx-react-lite'
+import type { PlanRow } from '../../plan/planner.ts'
+import { LAST_TONE, markOf, reasonWords, whenWords } from './planned-st.ts'
+import type { RepoSt } from './repo-st.ts'
+import { ageWords } from './time-ago.tsx'
+
+const soonest = (a: PlanRow, b: PlanRow): number => (a.dueAt ?? Infinity) - (b.dueAt ?? Infinity) || a.check.localeCompare(b.check)
+
+const PlanLine = observer(({ app, r }: { app: RepoSt; r: PlanRow }) => {
+    const now = app.clock.now
+    const m = markOf(r)
+    const running = r.state === 'running'
+    return (
+        <tr className={`pln m-${m.mark}`}>
+            <td className="plnwhen">{whenWords(r, now)}</td>
+            <td><a href="#" title={r.title ?? r.check} onClick={(e) => { e.preventDefault(); app.timeline.openCheck(r.check) }}>{r.check}</a>{r.title != null ? <span className="dim"> {r.title}</span> : null}</td>
+            <td className="dim" title={`rule: ${r.rule}\ninactive: ${r.inactive}`}>{r.error != null ? <span className="tl red">{r.error}</span> : reasonWords(r)}</td>
+            <td>{r.last == null ? <span className="dim">never ran</span> : <span className={`tl ${LAST_TONE[r.last.status]}`}>{r.last.status}, {ageWords(r.last.at, now)}</span>}</td>
+            <td className="plnrun"><button className="ghost" disabled={running} onClick={() => void app.home.planned.run(r)}>{running ? <><span className="spin" />running</> : 'run now'}</button></td>
+        </tr>
+    )
+})
+
+const PlanTable = observer(({ app, rows }: { app: RepoSt; rows: PlanRow[] }) => (
+    <table className="plntable">
+        <tbody>{rows.map((r) => <PlanLine key={r.check} app={app} r={r} />)}</tbody>
+    </table>
+))
+
+export const PlanPage = observer(({ app }: { app: RepoSt }) => {
+    const all = [...(app.cols.planned ?? [])].sort(soonest)
+    const timed = all.filter((r) => r.dueAt != null)
+    const onSave = all.filter((r) => r.dueAt == null)
+    return (
+        <div className="colcard checkcard">
+            <div className="chead">
+                <span className="tid">plan</span>
+                <h3 className="ctitle">{app.name}</h3>
+            </div>
+            <div className="usays">what the machine runs here on its own time, soonest first. Every repo at once: the planned page (⌘')</div>
+            {app.cols.planned == null ? <div className="dim">no plan covers this repo</div> : null}
+            {timed.length > 0 ? <section className="csec"><div className="cstitle">next</div><PlanTable app={app} rows={timed} /></section> : null}
+            {onSave.length > 0 ? <section className="csec"><div className="cstitle">on a save only</div><PlanTable app={app} rows={onSave} /></section> : null}
+        </div>
+    )
+})

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

@@ -8,6 +8,7 @@ import type { PlannedAnswer } from '../../home/home-routes.ts'
 import type { PlanRow } from '../../plan/planner.ts'
 import { sectionOf, timeline, titleWords, waitingRows, waitingWords } from '../../plan/plan-timeline.ts'
 import type { HomeSt } from './home-st.ts'
+import { ownTrouble, reach } from './reach.ts'
 
 export const PLANNED_POLL_MS = 1_000
 
@@ -78,18 +79,22 @@ export class PlannedSt {
 
     async poll(): Promise<void> {
         try {
-            const r = await fetch('/api/home/planned.json', { signal: AbortSignal.timeout(8_000) })
+            const r = await reach('/api/home/planned.json', { signal: AbortSignal.timeout(8_000) })
             if (!r.ok) throw new Error(`${r.status} ${await r.text()}`)
             const j = (await r.json()) as PlannedAnswer
             runInAction(() => { this.data = j; this.error = '' })
         } catch (e) {
-            runInAction(() => { this.error = (e as Error).message })
+            runInAction(() => { this.error = ownTrouble(e, this.st.machine) })
         }
     }
 
     async run(row: PlanRow): Promise<void> {
-        const r = await fetch('/api/home/planned/run', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ repo: row.repo, check: row.check }) })
-        if (!r.ok) runInAction(() => { this.error = `run ${row.check}: ${r.status} ${r.statusText}` })
+        try {
+            const r = await reach('/api/home/planned/run', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ repo: row.repo, check: row.check }) })
+            if (!r.ok) throw new Error(`${r.status} ${r.statusText}`)
+        } catch (e) {
+            runInAction(() => { this.error = ownTrouble(e, this.st.machine, (m) => `run ${row.check}: ${m}`) })
+        }
         await this.poll()
     }
 

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

@@ -0,0 +1,45 @@
+// The processes page of a repo: the overview's process table, this repo's
+// lines alone, never a card per process. The process a tree row opened gets
+// its description and its log under the table. pm runs them, so the page
+// reads the machine, never the hub.
+import { observer } from 'mobx-react-lite'
+import { useEffect, useRef } from 'react'
+import { Log, ProcessMenu, ProcessTable } from './home-strip.tsx'
+import type { RepoSt } from './repo-st.ts'
+import type { ProcessRow } from '../../home/process-rows.ts'
+
+const noop = (): void => {}
+
+/** the opened process: its menu (actions, then its description) and its log */
+const ProcessDetail = observer(({ app, r }: { app: RepoSt; r: ProcessRow }) => {
+    const el = useRef<HTMLElement>(null)
+    useEffect(() => { el.current?.scrollIntoView({ block: 'nearest' }) }, [r.id])
+    const m = app.home.machine
+    if (m == null) return null
+    return (
+        <section ref={el} className="csec pdetail" id={`process-${r.id}`}>
+            <div className="cstitle">{r.label}</div>
+            <ProcessMenu m={m} r={r} close={noop} lastLog={r.tail.length === 0} />
+            {r.tail.length === 0 ? null : <><div className="cstitle">log</div><Log lines={r.tail} /></>}
+        </section>
+    )
+})
+
+export const ProcessesPage = observer(({ app, id }: { app: RepoSt; id: string | null }) => {
+    const rows = app.globalProcesses
+    const m = app.home.machine
+    const lit = rows.find((r) => r.id === id) ?? null
+    return (
+        <div className="colcard checkcard">
+            <div className="chead">
+                <span className="tid">processes</span>
+                <h3 className="ctitle">{app.name}</h3>
+            </div>
+            <div className="usays">the processes this repo declares in its <code>.shipkit.ts</code> files. pm runs them, so they run whether or not the hub answers</div>
+            {rows.length === 0 || m == null
+                ? <div className="dim">this repo declares no global process</div>
+                : <section className="csec"><ProcessTable app={app.home} m={m} repo={app.key} /></section>}
+            {lit == null ? null : <ProcessDetail app={app} r={lit} />}
+        </div>
+    )
+})