@nanocollective/roster 0.1.0-alpha.5 → 0.1.0-alpha.7

package/templates/portal/css/layout.css

@@ -1,86 +1,102 @@
 /* The page frame: sidebar, main column, and the tree-beside-viewer split every screen uses. */
 
-.app{display:grid;grid-template-columns:246px 1fr;min-height:100vh}
+.app{display:grid;grid-template-columns:252px 1fr;min-height:100vh}
 /* ---------- sidebar ---------- */
-.side{background:var(--panel);border-right:1px solid var(--line);padding:20px 0 14px;
-      position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column}
-.brand{padding:0 20px 18px;font:600 15px var(--sans);letter-spacing:-.01em}
+.side{background:var(--side);border-right:1px solid var(--line);padding:16px 10px 12px;
+      position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;
+      gap:1px}
+.brand{padding:4px 10px 16px;font:600 15px/1.2 var(--sans);letter-spacing:-.02em;
+       display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}
 /* The tab icon, in the corner it belongs in. Drawn rather than fetched so it takes the
    theme's accent and costs no request. */
-.brand .mark{display:inline-block;width:9px;height:9px;border-radius:50%;
-             background:var(--accent);margin-right:7px;vertical-align:1px}
+.brand .mark{grid-row:1/3;display:inline-block;width:24px;height:24px;border-radius:7px;
+             background:var(--accent-fill)}
 .brand small{display:block;color:var(--ink-faint);font-weight:400;font-size:11.5px;
-             letter-spacing:.02em;margin-top:2px;margin-left:16px}
-.refreshall{display:flex;align-items:center;gap:8px;width:calc(100% - 24px);margin:0 12px 4px;
-      background:var(--panel-2);border:1px solid var(--line);color:var(--ink-faint);
-      border-radius:7px;padding:7px 10px;cursor:pointer;font:11px var(--sans);text-align:left}
-.refreshall:hover{color:var(--ink);border-color:var(--accent-dim)}
+             letter-spacing:0;margin-top:2px;overflow:hidden;text-overflow:ellipsis;
+             white-space:nowrap}
+.refreshall{display:flex;align-items:center;gap:8px;width:100%;margin:0 0 12px;
+      background:var(--hover);border:1px solid transparent;color:var(--ink-dim);
+      border-radius:8px;padding:6px 10px;cursor:pointer;font:11.5px var(--sans);text-align:left;
+      transition:color .15s var(--ease),background .15s var(--ease)}
+.refreshall:hover{color:var(--ink);background:var(--active)}
 .refreshall .sync{display:inline-flex;--ic:13px;flex:none}
 .refreshall.spin .sync{animation:spin .9s linear infinite}
 
-.sect{padding:14px 20px 6px;font:600 10.5px var(--sans);letter-spacing:.09em;
+.sect{padding:16px 10px 6px;font:600 11px var(--sans);letter-spacing:.08em;
       text-transform:uppercase;color:var(--ink-faint)}
 /* The Staff heading is also the fold for the list under it, so it is a button — and has to
-   go on reading as a heading rather than as a control. The caret and the 20px left padding
+   go on reading as a heading rather than as a control. The caret and the left padding
    are the staff rows' own, so the two carets line up in one column. */
 .sectfold{display:flex;align-items:center;gap:7px;width:100%;background:none;border:0;
-      cursor:pointer;text-align:left;font:600 10.5px var(--sans);letter-spacing:.09em;
-      text-transform:uppercase;color:var(--ink-faint)}
+      border-radius:6px;cursor:pointer;text-align:left;font:600 11px var(--sans);letter-spacing:.08em;
+      text-transform:uppercase;color:var(--ink-faint);margin-top:12px;
+      transition:color .15s var(--ease)}
 .sectfold:hover{color:var(--ink-dim)}
-.sectfold .caret{display:inline-flex;--ic:12px;flex:none;transition:transform .12s ease}
+.sectfold .caret{display:inline-flex;--ic:12px;flex:none;transition:transform .15s var(--ease)}
 .sectfold[aria-expanded="false"] .caret{transform:rotate(-90deg)}
 /* The count is a number, not a heading: mono, and none of the heading's letterspacing. */
-.sectfold .n{font:10.5px var(--mono);letter-spacing:0;text-transform:none;color:var(--ink-faint)}
+.sectfold .n{font:10.5px var(--mono);letter-spacing:0;text-transform:none;color:var(--ink-faint);
+      font-variant-numeric:tabular-nums}
 /* Flex, not block with a float. The icons are block-level SVGs and the trailing count has to
    sit hard right; `float` does neither of those inside a flex row, and did neither of them
    outside one once the icons arrived. */
-.nav{display:flex;align-items:center;width:100%;text-align:left;background:none;border:0;
-     color:var(--ink-dim);font:14px var(--sans);padding:7px 20px;cursor:pointer;
-     border-left:2px solid transparent}
-.nav:hover{color:var(--ink);background:var(--panel-2)}
-.nav[aria-current="true"]{color:var(--ink);border-left-color:var(--accent);background:var(--panel-2)}
-.nav .ic{color:var(--ink-faint);margin-right:9px;--ic:15px;flex:none}
-.nav .n{margin-left:auto;padding-left:10px;color:var(--ink-faint);font:11px var(--mono)}
-.nav.top{margin-bottom:2px}
+.nav{position:relative;display:flex;align-items:center;width:100%;text-align:left;background:none;
+     border:0;border-radius:7px;color:var(--ink-dim);font:500 13.5px var(--sans);padding:6px 10px;
+     cursor:pointer;min-height:32px;
+     transition:background .15s var(--ease),color .15s var(--ease)}
+.nav:hover{color:var(--ink);background:var(--hover)}
+.nav:focus-visible{box-shadow:0 0 0 2px var(--accent-soft),inset 0 0 0 1px var(--accent-dim)}
+.nav[aria-current="true"]{color:var(--ink);background:var(--sel)}
+.nav .ic{color:var(--ink-faint);margin-right:10px;--ic:15px;flex:none;
+     transition:color .15s var(--ease)}
+.nav:hover .ic{color:var(--ink-dim)}
+.nav[aria-current="true"] .ic{color:var(--accent)}
+.nav .n{margin-left:auto;padding-left:10px;color:var(--ink-faint);font:500 10.5px var(--mono);
+     font-variant-numeric:tabular-nums}
+.nav .n:not(:empty):not(.wait){padding:1px 7px;border-radius:999px;margin-left:auto;
+     background:var(--sel);color:var(--ink-dim);min-width:20px;
+     text-align:center}
+.nav .n.wait{margin-left:auto}
+.nav.top{margin-bottom:0}
 
 /* Staff are rows that unfold into their own views, rather than a dropdown plus a list you
    have to connect for yourself. The nesting is the hierarchy, said out loud. */
-.staffrow{display:flex;align-items:center;gap:7px;font:13.5px var(--sans);color:var(--ink);
-      padding-right:14px}
-.staffrow .caret{color:var(--ink-faint);--ic:12px;flex:none;transition:transform .12s ease}
+.staffrow{display:flex;align-items:center;gap:7px;font:500 13px var(--sans);color:var(--ink);
+      padding-right:10px}
+.staffrow .caret{color:var(--ink-faint);--ic:12px;flex:none;transition:transform .15s var(--ease)}
 .staffrow[aria-expanded="false"] .caret{transform:rotate(-90deg)}
 .staffrow .t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .staffrow .hh{font:10.5px var(--mono);color:var(--ink-faint);flex:none}
 .staffrow[aria-selected="true"]{color:var(--ink)}
-.staffviews{padding-bottom:4px}
-/* `subnav`, not `sub`: `.sub` is the page subtitle and carries a 24px bottom margin, which
+.staffviews{position:relative;padding:2px 0 6px;margin-left:12px}
+/* `subnav`, not `sub`: `.sub` is the page subtitle and carries a bottom margin, which
    these rows inherited as a gap you could park a car in. */
-.nav.subnav{padding:5px 20px 5px 40px;font-size:13px}
+.nav.subnav{padding:4px 10px 4px 16px;font-size:12.5px;min-height:28px}
 .nav.subnav .n{font-size:10px}
-.sidefoot{margin-top:auto;padding-top:14px}
+.sidefoot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
 .sidefoot .nav{font-size:12.5px;color:var(--ink-faint)}
 .sidefoot .nav:hover{color:var(--ink-dim)}
 
 /* ---------- main ---------- */
-main{padding:28px 34px 80px;max-width:1180px;overflow-x:hidden}
+main{padding:36px 44px 96px;max-width:1220px;overflow-x:hidden}
 
 /* ---------- tree beside viewer ---------- */
 .split{display:grid;grid-template-columns:314px 1fr;gap:16px;align-items:start}
 @media (max-width:900px){.split{grid-template-columns:1fr}}
-.tree{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:9px;
-      max-height:74vh;overflow:auto}
-.tdir{font:600 11px var(--mono);color:var(--ink-faint);padding:8px 8px 4px;letter-spacing:.04em}
-.tdir.first{padding-top:2px}
+.tree{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:6px;
+      max-height:74vh;overflow:auto;box-shadow:var(--shadow-sm)}
+.tdir{font:600 11px var(--mono);color:var(--ink-faint);padding:9px 8px 4px;letter-spacing:.02em}
+.tdir.first{padding-top:3px}
 .tfile{display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;background:none;
-       border:0;color:var(--ink-dim);font:12.5px var(--mono);padding:4px 8px;border-radius:5px;
-       cursor:pointer}
-.tfile:hover{background:var(--panel-2);color:var(--ink)}
-.tfile[aria-current="true"]{background:var(--panel-2);color:var(--accent)}
+       border:0;color:var(--ink-dim);font:12.5px var(--mono);padding:5px 8px;border-radius:6px;
+       cursor:pointer;transition:background .12s var(--ease),color .12s var(--ease)}
+.tfile:hover{background:var(--hover);color:var(--ink)}
+.tfile[aria-current="true"]{background:var(--accent-soft);color:var(--accent)}
 .tfile span.t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .tfile i{color:var(--ink-faint);font-style:normal;font-size:10.5px;flex:none;
       font-variant-numeric:tabular-nums}
 .tfile:focus{outline:none}
-.tfile:focus-visible{outline:2px solid var(--accent-dim);outline-offset:-2px}
+.tfile:focus-visible{box-shadow:inset 0 0 0 1px var(--accent-dim)}
 
 /* A search result: the page, and the lines the words were actually found in. Without the lines
    this is a filter on titles, which is the thing that was not good enough. */
@@ -93,8 +109,8 @@ main{padding:28px 34px 80px;max-width:1180px;overflow-x:hidden}
 .thit .hitline em{font-style:normal;color:var(--ink);background:color-mix(in srgb,var(--accent) 22%,transparent);
       border-radius:3px;padding:0 2px}
 
-.viewer{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:20px 22px;
-        min-height:340px;max-height:74vh;overflow:auto}
+.viewer{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 26px;
+        min-height:340px;max-height:74vh;overflow:auto;box-shadow:var(--shadow-sm)}
 .viewer pre{margin:0;white-space:pre-wrap;word-break:break-word;font:12.5px/1.65 var(--mono);color:var(--ink-dim)}
 /* Source keeps its own line breaks and scrolls, rather than wrapping into soup. */
 .viewer pre.code{white-space:pre;word-break:normal;overflow-x:auto}
@@ -105,12 +121,14 @@ main{padding:28px 34px 80px;max-width:1180px;overflow-x:hidden}
 .viewer audio.player{background:none}
 .viewer table{border-collapse:collapse;font:12px var(--mono);width:100%}
 .viewer td,.viewer th{border:1px solid var(--line);padding:4px 8px;text-align:left;white-space:nowrap}
-.viewer th{position:sticky;top:0;background:var(--panel-2);color:var(--ink)}
+.viewer th{position:sticky;top:0;background:var(--panel-2);color:var(--ink);font-weight:600}
 
 .gallery{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
 .gallery figure{margin:0;position:relative}
 .gallery img,.gallery video{width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--panel-2);
-             border-radius:6px;border:1px solid var(--line);cursor:pointer;display:block}
+             border-radius:var(--r);border:1px solid var(--line);cursor:pointer;display:block;
+             transition:border-color .15s var(--ease),transform .15s var(--ease)}
+.gallery img:hover,.gallery video:hover{border-color:var(--border-strong)}
 /* A still frame and a photograph look identical in a grid, so the video says which it is. */
 .playmark{position:absolute;top:8px;right:8px;display:inline-flex;padding:4px;border-radius:50%;
           background:color-mix(in srgb,#000 55%,transparent);color:#fff;--ic:12px;pointer-events:none}

package/templates/portal/css/markdown.css

@@ -1,34 +1,37 @@
 /* One renderer, two sizes: .cbody is a comment in a thread, .doc is a file being read.
    Everything shared lives on .md so a fix reaches both. */
 
-.md{line-height:1.65}
+.md{line-height:1.7}
 .md>:first-child{margin-top:0}
 .md p{margin:0 0 10px}
 .md h1,.md h2,.md h3,.md h4,.md h5,.md h6{color:var(--ink);font-weight:600;line-height:1.3;
-      margin:22px 0 8px;letter-spacing:-.012em}
-.md h1{font-size:20px} .md h2{font-size:17px} .md h3{font-size:15px}
+      margin:26px 0 10px;letter-spacing:-.02em}
+.md h1{font-size:22px} .md h2{font-size:17.5px} .md h3{font-size:15px}
 .md h4,.md h5,.md h6{font-size:13.5px;color:var(--ink-dim)}
-.md h1,.md h2{padding-bottom:6px;border-bottom:1px solid var(--line)}
+.md h1,.md h2{padding-bottom:8px;border-bottom:1px solid var(--line)}
 .md ul,.md ol{margin:0 0 10px;padding-left:20px}
 .md li{margin:3px 0}
 .md li>ul,.md li>ol{margin:4px 0 0}
 .md ul.tasks{list-style:none;padding-left:1px}
 .md .box{color:var(--ink-faint);margin-right:6px;display:inline-flex;--ic:14px;
       vertical-align:-3px}
-.md code{font:12px var(--mono);color:var(--accent);background:var(--panel-2);
-      padding:1px 4px;border-radius:4px;word-break:break-word}
-.md pre{background:var(--panel-2);border:1px solid var(--line);border-radius:7px;
-      padding:11px 13px;font:12px/1.62 var(--mono);margin:10px 0;color:var(--ink-dim);
+.md code{font:12px var(--mono);color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent);
+      padding:1px 5px;border-radius:5px;word-break:break-word}
+.md pre{background:var(--surface-2);border:0;border-radius:var(--r);
+      padding:13px 15px;font:12px/1.62 var(--mono);margin:10px 0;color:var(--ink-dim);
       overflow-x:auto;white-space:pre}
-.md pre code{background:none;padding:0;color:inherit;font-size:inherit}
-.md a{color:var(--ruled)}
-.md blockquote{margin:10px 0;padding:2px 0 2px 12px;border-left:2px solid var(--line);color:var(--ink-dim)}
+.md pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit}
+.md a{color:var(--accent);text-decoration:underline;text-decoration-color:var(--accent-dim);
+      text-underline-offset:3px;text-decoration-thickness:1px}
+.md a:hover{text-decoration-color:var(--accent)}
+.md blockquote{margin:12px 0;padding:2px 0 2px 14px;border-left:3px solid var(--line);color:var(--ink-dim)}
 .md hr{border:0;border-top:1px solid var(--line);margin:16px 0}
 .md img{max-width:100%;border-radius:6px;background:var(--panel-2)}
 .md .ctable{overflow-x:auto;margin:10px 0;max-width:100%}
 .md table{border-collapse:collapse;font-size:12.5px;width:100%}
-.md th,.md td{border:1px solid var(--line);padding:6px 9px;text-align:left;vertical-align:top}
-.md th{background:var(--panel-2);color:var(--ink);font-weight:600;white-space:nowrap}
+.md th,.md td{border:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top}
+.md th{background:var(--panel-2);color:var(--ink);font-weight:600;white-space:nowrap;
+      font-size:11.5px;letter-spacing:.02em}
 .md td{color:var(--ink-dim)}
 .md td b,.md td strong{color:var(--ink)}
 .cbody{margin-top:8px;font-size:13.5px;max-width:74ch}
@@ -70,5 +73,5 @@ pre.yaml{color:var(--ink)}
    Bordered and inset so it reads as a figure rather than the page bleeding into another one:
    these are pictures of this same UI, and without a frame the two run together. */
 .md img{display:block;max-width:100%;height:auto;margin:14px 0;
-        border:1px solid var(--line);border-radius:8px}
+        border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
 .md img+em,.md p>img+em{display:block}

package/templates/portal/css/runs.css

@@ -0,0 +1,13 @@
+/* The Runs screen: a spend strip, then one table per staff member. */
+
+.runsum{margin-bottom:6px}
+.hsect i.warn{color:var(--warn)}
+.runtable{border-collapse:collapse;width:100%;margin-top:8px;font:12px var(--mono);
+      font-variant-numeric:tabular-nums}
+.runtable th{text-align:left;font:600 10.5px var(--sans);letter-spacing:.06em;text-transform:uppercase;
+      color:var(--ink-faint);padding:6px 10px 6px 0;border-bottom:1px solid var(--line)}
+.runtable td{padding:7px 10px 7px 0;border-bottom:1px solid var(--line);color:var(--ink-dim);
+      white-space:nowrap}
+.runtable td:last-child,.runtable th:last-child{text-align:right;padding-right:0}
+/* The table is wider than a phone; it scrolls inside its section, never the page. */
+.hbody.runs{overflow-x:auto}

package/templates/portal/css/setup.css

@@ -1,55 +1,60 @@
 /* The setup screen, and the copy-a-prompt panel it shares with the authoring screens. */
 
-.step{background:var(--panel);border:1px solid var(--line);border-radius:10px;
-      padding:18px 20px 20px;margin-bottom:14px}
-.step.done{border-color:var(--accent-dim)}
+.step{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
+      padding:20px 22px 22px;margin-bottom:14px;box-shadow:var(--shadow-sm)}
+.step.done{border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
 .stephead{display:flex;align-items:center;gap:11px;margin-bottom:10px}
-.stephead h2{margin:0;font:600 16px var(--sans);letter-spacing:-.01em}
-.stepn{flex:none;width:23px;height:23px;border-radius:50%;display:grid;place-items:center;
-      background:var(--panel-2);border:1px solid var(--line);color:var(--ink-faint);
+.stephead h2{margin:0;font:600 16px var(--sans);letter-spacing:-.018em}
+.stepn{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
+      background:var(--surface-2);border:1px solid transparent;color:var(--ink-dim);
       font:600 11px var(--mono)}
-.step.done .stepn{background:var(--accent-dim);border-color:var(--accent-dim);color:var(--bg)}
+.step.done .stepn{background:var(--accent-fill);border-color:transparent;color:var(--accent-ink)}
 
 /* ---------- the form ---------- */
 
 .setupform{display:grid;gap:13px;margin:14px 0 18px;max-width:520px}
 .field{display:grid;gap:4px}
 .field>span{font:600 12px var(--sans);color:var(--ink-dim)}
-.field input,.field select{background:var(--panel-2);border:1px solid var(--line);color:var(--ink);
-      border-radius:7px;padding:8px 11px;font:13px var(--sans);outline:none;width:100%}
-.field input:focus,.field select:focus{border-color:var(--accent-dim)}
+.field input,.field select{background:var(--bg-elev);border:1px solid var(--border-strong);color:var(--ink);
+      border-radius:var(--r);padding:8px 11px;font:13px var(--sans);outline:none;width:100%;
+      transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
+.field input:focus,.field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
 .field small{color:var(--ink-faint);font-size:11.5px;line-height:1.45}
 
 .choices{display:grid;gap:8px;margin:10px 0 4px;max-width:640px}
 .choice{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;align-items:start;
-      background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
-      padding:11px 13px;cursor:pointer}
-.choice:has(input:checked){border-color:var(--accent-dim)}
+      background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--r);
+      padding:12px 14px;cursor:pointer;
+      transition:border-color .15s var(--ease),background .15s var(--ease),box-shadow .15s var(--ease)}
+.choice:hover{border-color:var(--border-strong)}
+.choice:has(input:checked){border-color:var(--accent-dim);background:var(--accent-soft)}
 .choice input{grid-row:1/3;margin-top:3px;accent-color:var(--accent)}
 .choice b{font:600 13px var(--sans)}
 .choice small{color:var(--ink-dim);font-size:12px;line-height:1.45}
 .choice code{grid-column:2;font:10.5px var(--mono);color:var(--ink-faint)}
 
 .row{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:6px}
-.btn{background:var(--panel-2);border:1px solid var(--line);color:var(--ink);border-radius:7px;
-      padding:8px 13px;font:13px var(--sans);cursor:pointer;text-decoration:none;display:inline-block}
-.btn:hover{border-color:var(--accent-dim)}
+.btn{background:var(--surface-2);border:1px solid transparent;color:var(--ink);border-radius:8px;
+      padding:7px 14px;font:500 13px var(--sans);cursor:pointer;text-decoration:none;display:inline-block;
+      transition:background .15s var(--ease),opacity .15s var(--ease)}
+.btn:hover{background:color-mix(in srgb,var(--surface-2) 88%,var(--ink) 12%)}
+.btn:active{opacity:.8}
 /* The full accent, not the dim one. Dim on the page background is pale-green-on-white with
    near-white text: the button that does the main thing on the screen read as disabled. */
-.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--bg);font-weight:600}
-.btn.primary:hover{filter:brightness(1.08);background:var(--accent);border-color:var(--accent)}
-.btn[disabled]{opacity:.5;cursor:default}
+.btn.primary{background:var(--accent-fill);border-color:transparent;color:var(--accent-ink);font-weight:600}
+.btn.primary:hover{background:var(--accent-fill);opacity:.88}
+.btn[disabled]{opacity:.45;cursor:default}
 
-.cmd{background:var(--panel-2);border:1px solid var(--line);border-radius:7px;padding:10px 12px;
+.cmd{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;
       font:12px/1.6 var(--mono);color:var(--ink);overflow-x:auto;white-space:pre-wrap;
       word-break:break-word;margin:9px 0}
 
 .planout{margin-top:12px}
 .filelist{display:grid;gap:2px;margin:9px 0;max-height:240px;overflow-y:auto;
-      background:var(--panel-2);border:1px solid var(--line);border-radius:7px;padding:10px 12px}
+      background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px}
 .filelist code{font:11px var(--mono);color:var(--ink-dim)}
 
-.manual{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
+.manual{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--r);
       padding:13px 15px;margin:11px 0}
 .manual b{display:block;font:600 13px var(--sans);margin-bottom:4px}
 .manual p{margin:0 0 6px;font-size:13px}
@@ -59,22 +64,23 @@
 
 .paste{border-top:1px solid var(--line);margin-top:16px;padding-top:15px}
 .paste h3{margin:0 0 5px;font:600 14px var(--sans)}
-.briefpreview{background:var(--panel-2);border:1px solid var(--line);border-radius:7px;
+.briefpreview{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
       padding:12px 14px;font:11.5px/1.6 var(--mono);max-height:340px;overflow:auto;
       white-space:pre-wrap;word-break:break-word;margin:10px 0}
-.pastebox{width:100%;background:var(--panel-2);border:1px solid var(--line);color:var(--ink);
-      border-radius:7px;padding:10px 12px;font:12px/1.6 var(--mono);outline:none;resize:vertical;
+.pastebox{width:100%;background:var(--bg-elev);border:1px solid var(--border-strong);color:var(--ink);
+      border-radius:var(--r);padding:10px 12px;font:12px/1.6 var(--mono);outline:none;resize:vertical;
       margin:4px 0}
-.pastebox:focus{border-color:var(--accent-dim)}
+.pastebox:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
 
 .pasteresult{margin-top:12px}
 /* A model that replied in prose is the common case and not the person's mistake, so this reads
    as a next step rather than as a failure. */
-.problem{background:var(--panel-2);border:1px solid var(--warn);border-radius:8px;
+.problem{background:color-mix(in srgb,var(--warn) 9%,transparent);
+      border:1px solid transparent;border-radius:var(--r);
       padding:12px 14px;margin-bottom:10px}
 .problem b{display:block;font:600 13px var(--sans);margin-bottom:7px}
 
-.pastefile{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
+.pastefile{background:var(--bg-elev);border:1px solid var(--line);border-radius:var(--r);
       padding:12px 14px;margin-bottom:10px}
 .pastefile.saved{border-color:var(--accent-dim)}
 .pastefile b{font:600 13px var(--mono)}
@@ -83,8 +89,8 @@
 
 /* ---------- the doctor checklist ---------- */
 
-.check{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:start;
-      padding:10px 0;border-top:1px solid var(--line)}
+.check{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:start;
+      padding:12px 0;border-top:1px solid var(--line)}
 .check:first-child{border-top:none}
 .checkmark{font:600 13px var(--mono);line-height:1.5}
 .check.fail .checkmark{color:var(--err)}
@@ -95,7 +101,7 @@
 /* ---------- the repo picker ---------- */
 
 .repolist{display:grid;gap:1px;max-height:280px;overflow-y:auto;
-      border:1px solid var(--line);border-radius:7px;background:var(--line)}
+      border:1px solid var(--line);border-radius:var(--r);background:var(--line)}
 /* Scoped to the picker. Bare `.repo` also matched the project label on every inbox row,
    which is where the white box and the stray padding behind MARKETING came from. */
 .repolist .repo{display:flex;align-items:center;justify-content:space-between;gap:12px;
@@ -106,6 +112,6 @@
 .repolist .repo .sub{margin:2px 0 0;font-size:11.5px}
 
 /* Which of the two things this is: a new org, or one that already runs roster. */
-.verdict{background:var(--panel-2);border:1px solid var(--line);border-radius:7px;
+.verdict{background:var(--accent-soft);border:1px solid transparent;border-radius:var(--r);
       padding:9px 12px;font-size:12.5px}
 .verdict p{margin:0}

package/templates/portal/index.html

@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>roster</title>
 <!-- Inline, so a local page with no network still has a tab icon and the console stays clean. -->
-<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%237cc7a4'/%3E%3C/svg%3E">
+<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='8' fill='%2334c759'/%3E%3C/svg%3E">
 <!-- Stylesheets and modules are served from /assets by `roster portal`. No build step:
      editing one of these files and reloading is the whole edit loop. -->
 <link rel="stylesheet" href="/assets/css/base.css">
@@ -16,6 +16,7 @@
 <link rel="stylesheet" href="/assets/css/graph.css">
 <link rel="stylesheet" href="/assets/css/diff.css">
 <link rel="stylesheet" href="/assets/css/health.css">
+<link rel="stylesheet" href="/assets/css/runs.css">
 <link rel="stylesheet" href="/assets/css/setup.css">
 </head>
 <body>
@@ -36,6 +37,9 @@
       <span class="ic" data-icon="merged"></span> Pending work
       <span class="n" id="prcount"></span>
     </button>
+    <button class="nav" id="runsnav" data-view="runs" title="What ran, how it ended, and what it cost">
+      <span class="ic" data-icon="play"></span> Runs
+    </button>
     <button class="nav" id="orgnav" data-view="org">
       <span class="ic" data-icon="file"></span> Org
     </button>

package/templates/portal/js/api.js

@@ -7,6 +7,9 @@ export const getDocs = () => json("/api/docs");
 export const getInbox = (force) => json("/api/inbox" + (force ? "?refresh=1" : ""));
 export const getSync = () => json("/api/sync").catch(() => null);
 
+/** Every staff member's recent runs and 30-day spend. Online only; offline it says so. */
+export const getRuns = (force) => json("/api/runs" + (force ? "?refresh=1" : ""));
+
 /** The repos org.yaml lists. Off disk, so the new-issue form does not wait on the inbox. */
 export const getRepos = () => json("/api/repos");
 
@@ -47,7 +50,12 @@ export async function post(payload, url = "/api/act") {
     body: JSON.stringify(payload),
   });
   const data = await res.json().catch(() => ({}));
-  if (!res.ok || data.error) throw new Error(data.error || "failed with " + res.status);
+  if (!res.ok || data.error) {
+    // The body travels with the error: a refusal often carries the next step, like a link.
+    const err = new Error(data.error || "failed with " + res.status);
+    err.data = data;
+    throw err;
+  }
   return data;
 }
 
@@ -78,8 +86,12 @@ export const planTenant = (params) =>
 export const createTenant = (params) => post(params, "/api/setup/apply");
 
 /** The copyable prompt, with every file it refers to carried inside it. */
-export const getBrief = (kind, staff) =>
-  json("/api/brief?kind=" + encodeURIComponent(kind) + (staff ? "&staff=" + encodeURIComponent(staff) : ""));
+export const getBrief = (kind, staff, example) =>
+  json(
+    "/api/brief?kind=" + encodeURIComponent(kind) +
+      (staff ? "&staff=" + encodeURIComponent(staff) : "") +
+      (example ? "&example=" + encodeURIComponent(example) : ""),
+  );
 
 /** Parse what came back from the model. Reads only: saving is a second, deliberate step. */
 export const parsePaste = (kind, staff, answer) =>
@@ -105,3 +117,17 @@ export const appResult = (state) => json("/api/setup/app-result?state=" + encode
 /** Does this org already run roster. "Create" and "join" are different answers. */
 export const checkOrg = (org) => json("/api/setup/check-org?org=" + encodeURIComponent(org));
 export const joinOrg = (org) => post({ org }, "/api/setup/join");
+
+/** The ops repo's Actions access: read it, or ask the server to set it. */
+export const getAccess = () => json("/api/setup/access");
+export const setAccess = () => post({}, "/api/setup/access");
+
+/** Where the agent credential goes, and storing it. The value only ever travels in a POST. */
+export const getCredential = () => json("/api/setup/credential");
+export const storeCredential = (value, repoSecrets) =>
+  post({ value, repoSecrets }, "/api/setup/credential");
+
+/** One daily run, now, and where it has got to. */
+export const startRun = (staff) => post({ staff }, "/api/run/start");
+export const runStatus = (staff, id) =>
+  json("/api/run/state?staff=" + encodeURIComponent(staff) + "&id=" + encodeURIComponent(id));

package/templates/portal/js/app.js

@@ -23,12 +23,14 @@ import { viewHealth } from "./views/health.js";
 import { viewInbox, viewPrs } from "./views/inbox.js";
 import { viewOrg } from "./views/org.js";
 import { viewPrompt } from "./views/prompt.js";
+import { viewRuns } from "./views/runs.js";
 import { viewSetup } from "./views/setup.js";
 import { viewStaff } from "./views/staff.js";
 
 const SCREEN = {
   inbox: viewInbox,
   prs: viewPrs,
+  runs: viewRuns,
   org: viewOrg,
   staff: viewStaff,
   docs: viewDocs,
@@ -66,7 +68,7 @@ export async function boot() {
     /* Every one of these reads a tenant, so during setup they answer 409 and the sidebar is a
        row of four dead ends beside an empty Staff heading. There is one thing to do on this
        screen; the navigation comes back with the org. */
-    for (const el of document.querySelectorAll("#inboxnav, #prsnav, #orgnav, #staffnav, #docsnav, #refreshall, .sect, #stafflist")) {
+    for (const el of document.querySelectorAll("#inboxnav, #prsnav, #runsnav, #orgnav, #staffnav, #docsnav, #refreshall, .sect, #stafflist")) {
       el.hidden = true;
     }
     for (const slot of document.querySelectorAll("[data-icon]")) {
@@ -94,6 +96,7 @@ export async function boot() {
 
   $("#inboxnav").onclick = () => { S.view = "inbox"; render(); };
   $("#prsnav").onclick = () => { S.view = "prs"; render(); };
+  $("#runsnav").onclick = () => { S.view = "runs"; render(); };
   $("#staffnav").onclick = () => { S.view = "staff"; render(); };
   $("#orgnav").onclick = () => { S.view = "org"; render(); };
   $("#docsnav").onclick = () => { S.view = "docs"; render(); };

package/templates/portal/js/state.js

@@ -22,7 +22,7 @@ export const VIEWS = [
 export const VIEW_ALIAS = { memory: "brain" };
 
 /** Screens that belong to the org rather than to one staff member. */
-export const ORG_WIDE = new Set(["inbox", "prs", "org", "staff", "docs"]);
+export const ORG_WIDE = new Set(["inbox", "prs", "runs", "org", "staff", "docs"]);
 
 /** The two screens that read the inbox, and so share its filters and its `?t=` thread. */
 const INBOXY = new Set(["inbox", "prs"]);
@@ -32,6 +32,8 @@ export const S = {
   data: null,
   docs: null,
   inbox: null,
+  /** /api/runs. Kept once read: it is minutes of downloads on a cold cache. */
+  runs: null,
   sync: null,
   loadedAt: null,
 

package/templates/portal/js/views/app.js

@@ -6,8 +6,8 @@
  * it is one browser, one origin, and nothing extra to explain.
  *
  * What it still cannot do is install the App. Installing is a grant of access to specific
- * repositories and GitHub asks a human to choose them, which is correct behaviour and should not
- * be worked around. */
+ * repositories and GitHub asks a human to confirm them, which is correct behaviour and should not
+ * be worked around. The link it hands back has the right repos already selected. */
 
 import { appResult, startApp } from "../api.js";
 import { el } from "../dom.js";
@@ -48,6 +48,11 @@ export function appPanel(opts) {
          it: an App that exists is not a problem, it is a step you have already done. */
       const note = el("div");
       note.append(el("p", { className: "err", textContent: String(err.message || err) }));
+      if (err.data?.install) {
+        note.append(
+          el("a", { className: "btn", href: err.data.install, target: "_blank", textContent: "Install it" }),
+        );
+      }
       out.replaceChildren(note);
       return;
     }
@@ -102,9 +107,21 @@ export function appPanel(opts) {
         el("p", {
           className: "sub",
           textContent:
-            "Grant it every tracker this staff member writes to, not just their own: the token " +
-            "is minted organisation-wide and a peer's board is where a brief lands.",
+            "The link opens GitHub's install page with the org and the repos already selected: " +
+            "this staff member's brain, every peer tracker it writes to, and the product repos. " +
+            "Check the list and confirm.",
         }),
+        ...((result.preselected ?? []).length
+          ? [el("p", { className: "sub", textContent: "Selected: " + result.preselected.join(", ") })]
+          : []),
+        ...((result.missing ?? []).length
+          ? [
+              el("p", {
+                className: "err",
+                textContent: "Tick these yourself, their ids could not be read: " + result.missing.join(", "),
+              }),
+            ]
+          : []),
         el("a", {
           className: "btn primary",
           href: result.install,
@@ -115,7 +132,8 @@ export function appPanel(opts) {
           className: "sub",
           textContent:
             "Do not verify this by reading the API. It reports what an App declares separately " +
-            "from what an installation was granted. Only a run that finished proves the chain.",
+            "from what an installation was granted. Only a run that finished proves the chain, " +
+            "which is what Run once now on the staff card is for.",
         }),
       );
       out.replaceChildren(done);