rvlib-shipkit 1.3.0 → 1.5.0

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

@@ -38,7 +38,7 @@ 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}
-.appcol{display:flex;flex-direction:column}
+.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}
 .repo[hidden]{display:none}
@@ -49,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)}
@@ -63,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}
@@ -71,40 +70,34 @@ 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.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}
@@ -114,9 +107,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}
@@ -132,8 +124,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
@@ -167,21 +159,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;
@@ -368,7 +359,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)}
@@ -559,6 +558,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}
@@ -627,7 +635,29 @@ a.tok{color:var(--accent)}
 .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);
  display:flex;gap:var(--s2);align-items:baseline;margin:0 0 var(--s3)}
+.ctlead{font-size:11px;color:var(--dim);margin:calc(-1 * var(--s1)) 0 var(--s2)}
 .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
+   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}
+.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.g-fail td{color:var(--red)}
+.ctgrp.g-warn td{color:var(--warn)}
+.ctcaret{display:inline-block;width:14px}
+.ctrow{cursor:pointer}
+.ctrow:hover{background:var(--panel2)}
+.ctdot{font-size:10px}
+.ctid,.ctkind{font:11.5px ui-monospace,Menlo,monospace}
+.ctfind{font:11.5px ui-monospace,Menlo,monospace;color:var(--dim)}
+.ctdur{text-align:right;font:11.5px ui-monospace,Menlo,monospace}
+.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}
+@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)}
@@ -694,7 +724,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)}
 
-/* ── the cmd+k picker ── */
+/* ── the cmd+j 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;
@@ -723,9 +753,23 @@ 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}
 .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',
@@ -27,6 +36,12 @@ export const ICON = {
     // 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',
+    // 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
 
 export const Icon = ({ d }: { d: string }) => (

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,6 +1,6 @@
 // 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
+// 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
@@ -17,17 +17,17 @@ export function pageKey(e: KeyLike): PageKey | null {
     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 === 'j') return { t: 'picker' }
+    if (k === 'k') return { t: 'home' }
     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'
+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 dock's shortcut, on the dock's own header */
 export const DOCK_KEY = '⌘B'
 
@@ -46,8 +46,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

@@ -8,12 +8,13 @@
 import { makeAutoObservable, observableRef, runInAction } from 'mobx'
 import type { HomeAnswer, WidgetsAnswer } from '../../home/home-routes.ts'
 import type { WorkerView } from '../../home/hubs.ts'
-import type { ResourceView } from '../../home/resources.ts'
+import type { OpenHow, ResourceView } from '../../home/resources.ts'
 import type { PmAnswer, Role } from '../../home/pm.ts'
 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
@@ -27,18 +28,6 @@ export const MACHINE_KEY = 'hub:machine'
 /** how long a copied pid says so */
 export const COPIED_MS = 1_200
 
-/** how open opens a global process's url, kept per browser */
-export const OPEN_HOW_KEY = 'hub:open-how'
-export type OpenHow = 'browser' | 'app'
-
-function loadOpenHow(): OpenHow {
-    try {
-        return globalThis.localStorage?.getItem(OPEN_HOW_KEY) === 'app' ? 'app' : 'browser'
-    } catch {
-        return 'browser'
-    }
-}
-
 type Kept = { data: HomeAnswer | null; pm: PmAnswer | null; widgets: WidgetsAnswer | null }
 
 function loadKept(): Kept | null {
@@ -50,8 +39,9 @@ function loadKept(): Kept | null {
     }
 }
 
-/** the poll failed because nothing behind the page answers, not on an error of an answer */
-class DownError extends Error {}
+/** 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 }
 
@@ -67,9 +57,10 @@ export class MachineSt {
     error = ''
     /** where open sends a global process's url: the default browser, or a
      *  shipkit app window */
-    openHow: OpenHow = loadOpenHow()
     /** why the daemon did not answer the last poll, or '' while it does */
     down = ''
+    /** which one did not answer: the web itself, or the daemon behind it */
+    downWho: 'web' | 'daemon' = 'daemon'
     /** the daemon answered once since the load: until then data, pm and
      *  widgets are what this browser kept, shown but never acted on */
     fresh = false
@@ -115,7 +106,8 @@ export class MachineSt {
      *  the project list's order, one row per process (process-rows.ts, what
      *  `shipkit global-processes` prints) */
     get processGroups(): ProcessGroup[] {
-        return processGroups(this.pm, this.st.projects.list.map((p) => p.name), { daemonVersion: this.data?.version ?? null })
+        const silent = { ...(this.down === '' ? {} : { [this.downWho]: this.down }), ...(this.pmDown === '' ? {} : { pm: this.pmDown }) }
+        return processGroups(this.pm, this.st.projects.list.map((p) => p.name), { daemonVersion: this.data?.version ?? null, silent })
     }
 
     resource(id: string): ResourceView | null {
@@ -154,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(() => {
@@ -162,10 +154,8 @@ export class MachineSt {
                 this.pmDown = ''
             })
         } catch (e) {
-            runInAction(() => {
-                this.pm = null
-                this.pmDown = (e as Error).message
-            })
+            // the last answer stays, its rows unknown (processGroups): the table keeps its lines
+            runInAction(() => { this.pmDown = (e as Error).message })
         }
     }
 
@@ -187,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}`)
-            }
-            if (r.headers.get('x-shipkit-daemon') === 'down') throw new DownError(await r.text())
+            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
@@ -220,9 +206,13 @@ 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
-                runInAction(() => { this.down = msg })
+                const who = e.who === 'web' ? 'web' : 'daemon'
+                runInAction(() => {
+                    this.down = who === 'web' ? webDownText(msg) : msg
+                    this.downWho = who
+                })
             } else {
                 this.pollError = true
                 runInAction(() => {
@@ -257,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
         }
     }
@@ -278,16 +270,16 @@ export class MachineSt {
     }
 
     /** a global process: start, stop, restart, take over the copy started
-     *  elsewhere, open its url in the default browser or as an app window
-     *  (started first when it is down), or run one of its actions */
-    processAct(id: string, act: 'start' | 'stop' | 'restart' | 'takeover' | 'open' | 'app' | 'action', action?: string): Promise<boolean> {
+     *  elsewhere, open its url (started first when it is down), or run one
+     *  of its actions */
+    processAct(id: string, act: 'start' | 'stop' | 'restart' | 'takeover' | 'open' | 'chrome' | 'app' | 'action', action?: string): Promise<boolean> {
         return this.post('/api/pm/resource', { id, act, action })
     }
 
-    /** the url of a global process, the way this browser picked (started
-     *  first when it is down) */
-    openProcess(id: string): Promise<boolean> {
-        return this.processAct(id, this.openHow === 'app' ? 'app' : 'open')
+    /** the url of a global process in the default browser, in Chrome, or as
+     *  its own app (started first when it is down) */
+    openProcess(id: string, how: OpenHow): Promise<boolean> {
+        return this.processAct(id, how === 'browser' ? 'open' : how)
     }
 
     /** a process's pid to the clipboard, and the "copied" flash on it; a
@@ -305,13 +297,6 @@ export class MachineSt {
         this.copiedTimer = setTimeout(() => runInAction(() => { this.copiedPid = null }), COPIED_MS)
     }
 
-    setOpenHow(how: OpenHow): void {
-        this.openHow = how
-        try {
-            globalThis.localStorage?.setItem(OPEN_HOW_KEY, how)
-        } catch { /* private window or blocked site data: the pick lasts the tab */ }
-    }
-
     /** restart the daemon or the web through pm */
     restartChild(id: Role): Promise<boolean> {
         return this.post('/api/pm/child', { id, act: 'restart' })

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

@@ -1,8 +1,8 @@
-// the one picker of the page (cmd+k, keys.ts), a node of the root: the
-// home's places (home, planned, activity) first, then the shown repo's own jump
+// the one picker of the page (cmd+j, keys.ts), a node of the root: the
+// home's places (home, activity, planned, in the list's order) first, then the shown repo's own jump
 // targets, then every other house repo as a place to go. Another repo's
 // resources are never listed: a jump to a repo selects it in place, and its
-// own targets are one more cmd+k away.
+// own targets are one more cmd+j away.
 import { makeAutoObservable } from 'mobx'
 import type { HomeSt } from './home-st.ts'
 import type { Jump } from './repo-st.ts'
@@ -25,8 +25,8 @@ export class PaletteSt {
         if (st.machine == null) return []
         return [
             { id: 'place:home', label: 'home', section: 'place', face: { place: 'home' }, run: () => st.navigate('/') },
-            { id: 'place:planned', label: 'planned', section: 'place', face: { place: 'planned' }, run: () => st.navigate('/planned') },
             { id: 'place:activity', label: 'activity', section: 'place', face: { place: 'activity' }, run: () => st.navigate('/activity') },
+            { id: 'place:planned', label: 'planned', section: 'place', face: { place: 'planned' }, run: () => st.navigate('/planned') },
             { id: 'place:archived', label: 'archived', section: 'place', face: { place: 'archived' }, run: () => st.navigate('/archived') },
         ]
     }
@@ -45,7 +45,7 @@ export class PaletteSt {
     }
 
     /** ranked: prefix matches first, then substring. With no query, home,
-     *  planned and activity, then the shown repo's first targets, then every other repo,
+     *  activity and planned, then the shown repo's first targets, then every other repo,
      *  so a jump elsewhere is always in reach */
     get results(): Jump[] {
         const q = this.query.trim().toLowerCase()

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

@@ -1,4 +1,4 @@
-// the one picker, cmd+k (palette-st.ts): home, planned, activity and
+// the one picker, cmd+j (palette-st.ts): home, activity, planned and
 // archived, the shown repo's targets, then every other repo. A place wears
 // its button's icon, a repo its own icon, as the project list shows them.
 import { observer } from 'mobx-react-lite'

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>
+    )
+})