@nanocollective/roster 0.1.0-alpha.2 → 0.1.0-alpha.4

package/templates/portal/css/base.css

@@ -5,7 +5,7 @@
   --ink:#e6e9ef; --ink-dim:#9aa3b2; --ink-faint:#6b7484;
   --accent:#7cc7a4; --accent-dim:#3d6b56;
   --warn:#d8a657; --err:#e07b7b;
-  --will:#7aa2f7; --measured:#7cc7a4; --derived:#c99bd6;
+  --ruled:#7aa2f7; --measured:#7cc7a4; --derived:#c99bd6;
   --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
   --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
 }
@@ -16,7 +16,7 @@
     --ink:#1b1f26; --ink-dim:#5b6472; --ink-faint:#8b95a5;
     --accent:#2f7d5b; --accent-dim:#a8d5bf;
     --warn:#a5701d; --err:#b34a4a;
-    --will:#3b5fa8; --measured:#2f7d5b; --derived:#8a52a8;
+    --ruled:#3b5fa8; --measured:#2f7d5b; --derived:#8a52a8;
   }
 }
 :root[data-theme="light"]{
@@ -24,10 +24,16 @@
     --ink:#1b1f26; --ink-dim:#5b6472; --ink-faint:#8b95a5;
     --accent:#2f7d5b; --accent-dim:#a8d5bf;
     --warn:#a5701d; --err:#b34a4a;
-    --will:#3b5fa8; --measured:#2f7d5b; --derived:#8a52a8;
+    --ruled:#3b5fa8; --measured:#2f7d5b; --derived:#8a52a8;
 }
 
 *{box-sizing:border-box}
+/* `hidden` loses to any author rule that sets `display`, which is most of them: a hidden
+   `.field` is still `display:grid` and a hidden `.btn` is still `display:block`. Every element
+   the page hides would otherwise need its own `[hidden]` rule, and the ones nobody remembered
+   just stayed on screen. Said once, here. */
+[hidden]{display:none!important}
+
 body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.55 var(--sans);
      -webkit-font-smoothing:antialiased}
 a{color:inherit}
@@ -44,16 +50,21 @@ h1{font:600 21px var(--sans);margin:0 0 4px;letter-spacing:-.015em}
 .grid{display:grid;gap:11px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
 
 /* ---------- controls ---------- */
-input[type=search],select{background:var(--panel-2);border:1px solid var(--line);color:var(--ink);
+input[type=search],input[type=time],select{background:var(--panel-2);
+  border:1px solid var(--line);color:var(--ink);
   border-radius:7px;padding:7px 11px;font:13px var(--sans);outline:none}
 input[type=search]{width:280px}
-input[type=search]:focus,select:focus{border-color:var(--accent-dim)}
+input[type=search]:focus,input[type=time]:focus,select:focus{border-color:var(--accent-dim)}
 textarea{width:100%;background:var(--panel-2);border:1px solid var(--line);color:var(--ink);
       border-radius:8px;padding:10px 12px;font:13px/1.55 var(--sans);outline:none;resize:vertical}
 textarea:focus{border-color:var(--accent-dim)}
 
-.ghbtn{display:inline-block;padding:5px 11px;border:1px solid var(--line);border-radius:7px;
-       font:12px var(--sans);color:var(--ink-dim);text-decoration:none;white-space:nowrap}
+/* One size, whether it is a button or a link. They sit in rows together, and `a` taking its
+   line-height from the font shorthand while `button` set its own made every such row a set of
+   controls at two different heights. */
+.ghbtn{display:inline-flex;align-items:center;justify-content:center;min-height:28px;
+       padding:5px 11px;border:1px solid var(--line);border-radius:7px;
+       font:12px/1.4 var(--sans);color:var(--ink-dim);text-decoration:none;white-space:nowrap}
 .ghbtn:hover{color:var(--ink);border-color:var(--accent-dim);background:var(--panel-2)}
 button.ghbtn{cursor:pointer;font-family:var(--sans);background:transparent;
       -webkit-appearance:none;appearance:none;font-size:12px;line-height:1.4}
@@ -80,12 +91,49 @@ svg.ic{width:var(--ic,15px);height:var(--ic,15px);display:block;flex:none}
       border:1px solid var(--line);color:var(--ink-faint);white-space:nowrap}
 .chip.hot{color:var(--err);border-color:color-mix(in srgb,var(--err) 45%,transparent)}
 .chip.warm{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
-.chip.cool{color:var(--will);border-color:color-mix(in srgb,var(--will) 40%,transparent)}
+.chip.cool{color:var(--ruled);border-color:color-mix(in srgb,var(--ruled) 40%,transparent)}
 .pill{font:11px var(--mono);color:var(--ink-faint);border:1px solid var(--line);
       border-radius:20px;padding:2px 9px}
 kbd{font:11px var(--mono);border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;
     padding:1px 5px;color:var(--ink-dim)}
 
+/* ---------- waiting ----------
+   The inbox reads every repo in the org, which is seconds on a cold cache. What used to stand
+   there was one line of grey text in an otherwise empty panel beside a second empty panel,
+   which reads as a page that has failed rather than one that is working. These are the shape
+   of what is coming: rows in the list, a title and paragraphs in the viewer. */
+.sk{--skbg:color-mix(in srgb,var(--ink) 7%,transparent);border-radius:6px;
+    background:linear-gradient(90deg,var(--skbg) 25%,
+      color-mix(in srgb,var(--ink) 12%,transparent) 37%,var(--skbg) 63%);
+    background-size:400% 100%;animation:shimmer 1.4s ease-in-out infinite}
+.sk-row{background:none;animation:none;padding:11px 10px;border-top:1px solid var(--line)}
+.sk-row:first-of-type{border-top:0}
+.sk-row .skbar{height:11px;border-radius:6px;background:inherit;
+    background:linear-gradient(90deg,var(--skbg) 25%,
+      color-mix(in srgb,var(--ink) 12%,transparent) 37%,var(--skbg) 63%);
+    background-size:400% 100%;animation:shimmer 1.4s ease-in-out infinite}
+.sk-row .skbar.t{width:84%}
+.sk-row .skbar.m{width:38%;height:8px;margin-top:8px}
+/* Staggered, so the list reads as several things loading rather than one block flashing. */
+.sk-row:nth-child(2n) .skbar.t{width:68%}
+.sk-row:nth-child(3n) .skbar.t{width:92%}
+.sk-row:nth-child(3n) .skbar.m{width:52%}
+.sk-head{height:19px;width:56%;margin:6px 0 18px}
+.sk-line{height:10px;width:100%;margin:9px 0}
+.sk-line:nth-child(2n){width:88%}
+.sk-line:nth-child(3n){width:94%}
+.sk-line:last-child{width:42%}
+/* The word beside them. It is the only part a screen reader gets, so it stays real text. */
+.skhead{color:var(--ink-faint);font-size:12.5px;padding:4px 10px 8px}
+@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
+/* A count that is still being fetched is not zero, and an empty badge reads as zero. */
+.nav .n.wait{display:inline-block;width:15px;height:8px;border-radius:5px;
+    background:color-mix(in srgb,var(--ink) 10%,transparent);animation:pulse 1.3s ease-in-out infinite}
+@keyframes pulse{0%,100%{opacity:.35}50%{opacity:.85}}
+@media (prefers-reduced-motion:reduce){
+  .sk,.sk-row .skbar,.nav .n.wait{animation:none}
+}
+
 .notice{background:color-mix(in srgb,var(--warn) 12%,transparent);border:1px solid
       color-mix(in srgb,var(--warn) 40%,transparent);color:var(--ink-dim);border-radius:8px;
       padding:10px 13px;margin-bottom:16px;font-size:12.5px;line-height:1.6}
@@ -100,5 +148,71 @@ dialog.ask::backdrop{background:rgba(0,0,0,.45);backdrop-filter:blur(2px)}
 dialog.ask h3{margin:0;font:600 15.5px var(--sans);letter-spacing:-.012em}
 dialog.ask .askhint{margin:6px 0 12px;font:12.5px/1.55 var(--sans);color:var(--ink-faint)}
 dialog.ask textarea{font:13.5px/1.6 var(--sans);min-height:96px;max-height:44vh}
+/* The attach control, when the dialog is a reply rather than a question. */
+dialog.ask .attach{margin-top:9px}
 dialog.ask .askrow{margin-top:12px;justify-content:flex-end}
 dialog.ask .askrow .meta{margin-right:auto}
+
+/* The lightbox: an image, over the page, that zooms.
+ *
+ * Not a <dialog>, so the stacking and the backdrop are declared here rather than inherited
+ * from ::backdrop. 60 puts it over the `@` mention list (30) and over the dialog, which is
+ * correct: a picture opened from inside a reply box should still open. */
+.lightbox{position:fixed;inset:0;z-index:60;display:flex;
+          background:rgba(0,0,0,.82);backdrop-filter:blur(3px)}
+/* The stage is inset rather than the whole window, and that is not decoration.
+   Most images here are screenshots *of this interface*, and one fitted edge to edge reads as
+   the app having navigated rather than as a picture of it. The margin of backdrop around it,
+   and the border on it, are the only things that say which you are looking at.
+
+   Fit and centring are arithmetic in the module rather than layout: the transform has to be
+   the single source of truth, or zooming fights the flexbox. The module measures this box, so
+   changing the inset here is all it takes to change what "fitted" means. */
+.lightbox .lbstage{position:absolute;inset:46px 56px 52px;overflow:hidden}
+.lightbox img{position:absolute;top:0;left:0;transform-origin:0 0;
+              max-width:none;max-height:none;border-radius:8px;
+              border:1px solid rgba(255,255,255,.14);
+              box-shadow:0 18px 50px rgba(0,0,0,.5);
+              cursor:zoom-in;user-select:none;-webkit-user-drag:none}
+/* Zoomed past fitted it is being read, not looked at, so the frame comes off: a border and a
+   drop shadow in the middle of a diff you are inspecting is furniture in the way. */
+.lightbox[data-zoomed="true"] img{border-radius:0;border-color:transparent;box-shadow:none}
+.lightbox[data-zoomed="true"] img{cursor:grab}
+.lightbox[data-zoomed="true"] img:active{cursor:grabbing}
+
+.lightbox .lbx,.lightbox .lbctl{--ic:17px;
+               display:inline-flex;align-items:center;justify-content:center;
+               width:34px;height:34px;padding:0;border-radius:9px;
+               border:1px solid var(--line);background:var(--panel);color:var(--ink-dim);
+               cursor:pointer}
+.lightbox .lbx{position:absolute;top:14px;right:16px;--ic:18px}
+.lightbox .lbx:hover,.lightbox .lbctl:not(:disabled):hover{color:var(--ink);
+               border-color:var(--ink-faint)}
+/* At a stop the button stays where it is and stops responding. Removing it would move the two
+   beside it, which reads as the control having changed rather than as a limit being reached. */
+.lightbox .lbctl:disabled{opacity:.35;cursor:default}
+
+/* Bottom right, which is the one corner nothing else uses: close is top right, the hint is top
+   centre and the caption is bottom centre. */
+.lightbox .lbzoom{position:absolute;bottom:12px;right:16px;display:flex;gap:6px;align-items:center}
+/* Wide enough for "1600%" so the group does not resize as the number grows, and tabular so the
+   digits do not shuffle while you hold the button down. */
+.lightbox .lblevel{width:auto;min-width:60px;padding:0 9px;
+                   font:12px var(--mono);font-variant-numeric:tabular-nums;
+                   color:var(--ink-dim)}
+
+/* Both of these are over the picture, so they are quiet and they do not take the pointer:
+   a click that lands on the caption still means "fit", not "nothing happened". */
+.lightbox .lbhint,.lightbox .lbcap{position:absolute;left:0;right:0;margin:0;
+                                   pointer-events:none;text-align:center;
+                                   font:11.5px var(--sans);color:var(--ink-faint)}
+.lightbox .lbhint{top:16px;padding:0 60px}
+.lightbox .lbcap{bottom:19px;padding:0 200px;color:var(--ink-dim);font-size:12.5px;
+                 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+
+/* The page behind must not scroll under an overlay. A wheel event that misses the image
+   would otherwise scroll the document instead of doing nothing. */
+body[data-lightbox] {overflow:hidden}
+
+/* And the affordance on the document side: an image you can open should say so. */
+.md img,img.zoomable{cursor:zoom-in}

package/templates/portal/css/brain.css

@@ -47,7 +47,7 @@
 .factsub{color:var(--ink-faint);font-size:12.5px;margin:0 0 14px}
 .tag{display:inline-block;font:10.5px var(--mono);padding:1px 6px;border-radius:20px;
      border:1px solid var(--line);color:var(--ink-faint);margin-left:6px;vertical-align:1px}
-.tag.will{color:var(--will);border-color:var(--will)}
+.tag.ruled{color:var(--ruled);border-color:var(--ruled)}
 .tag.measured{color:var(--measured);border-color:var(--measured)}
 .tag.derived{color:var(--derived);border-color:var(--derived)}
 .notelink{font:11.5px var(--mono);color:var(--ink-faint);cursor:pointer;margin-left:6px}
@@ -89,6 +89,13 @@
 .editor{font:12.5px/1.7 var(--mono);min-height:340px;overflow:hidden;resize:none}
 .editnote{margin:8px 0 0;font:11.5px var(--sans);color:var(--ink-faint)}
 
+/* The path, then the controls, pushed to the far end. Editing these files is the whole point
+   of the Org screen, and the way in used to be a grey word in a row of grey words — which is
+   why "there is no easy way to edit the org docs" was fair about a screen that could. */
+.filehead{margin-bottom:6px;gap:8px;align-items:center}
+.filehead .meta{margin-right:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.editbtn{gap:6px;--ic:13px}
+
 /* A prompt audit finding. Not a tree row: it carries an explanation and two buttons, and
    squeezing that into the navigator's row shape is how it would get ignored. */
 .prob{border:1px solid var(--line);border-radius:7px;padding:9px 10px;margin:0 3px 6px}

package/templates/portal/css/diff.css

@@ -13,15 +13,19 @@
 .ddel{background:color-mix(in srgb,var(--err) 13%,transparent)}
 .ddel .tx{color:var(--ink-dim)}
 .ddel .ln{background:color-mix(in srgb,var(--err) 22%,transparent);color:var(--err)}
-.dhunk{background:color-mix(in srgb,var(--will) 13%,transparent);
+.dhunk{background:color-mix(in srgb,var(--ruled) 13%,transparent);
       border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
-.dhunk .tx{color:var(--will);font-size:11.5px}
+.dhunk .tx{color:var(--ruled);font-size:11.5px}
 .dmeta .tx{color:var(--ink-faint);font-size:11.5px}
 .dfocus{box-shadow:inset 3px 0 0 var(--warn)}
 .dfile{font:11.5px var(--mono);color:var(--ink-dim);background:var(--panel);padding:8px 12px;
       border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:baseline}
 .dfile b{color:var(--ink);font-weight:600}
 .dfile .p{color:var(--accent)} .dfile .m{color:var(--err)}
+/* Pushed to the far end and kept faint: the diff is what this row is for, and a button that
+   competes with the filename for attention is one you stop reading past. */
+.askfile{margin-left:auto;padding:1px 8px;font-size:11px;opacity:.55}
+.dblock:hover .askfile,.askfile:focus-visible{opacity:1}
 .dempty{padding:20px;color:var(--ink-faint);font-size:12.5px}
 
 /* The learned/forgotten marker on a "what changed" row. */

package/templates/portal/css/health.css

@@ -8,8 +8,27 @@
 .kv.bad .v{color:var(--err)}
 .card .fix{margin-top:10px}
 .card .fixed{color:var(--accent);font:11.5px var(--mono)}
-.hsect{font:600 10.5px var(--sans);letter-spacing:.09em;text-transform:uppercase;
-      color:var(--ink-faint);margin:24px 0 10px}
+
+/* ---------- sections ----------
+   Doctor, the prompt audit and lint ask the same kind of question, and used to answer it in
+   three different shapes: hairline rows, bordered boxes, and cards with two buttons each. One
+   shape now. A heading carries its own count, so the page can be read by scanning the left
+   edge, and each section's own actions sit at its end rather than above its findings. */
+.hsect{display:flex;align-items:baseline;gap:10px;
+      font:600 10.5px var(--sans);letter-spacing:.09em;text-transform:uppercase;
+      color:var(--ink-faint);margin:28px 0 0;padding-bottom:8px;
+      border-bottom:1px solid var(--line)}
+.hsect i{margin-left:auto;font:11.5px var(--mono);font-style:normal;letter-spacing:0;
+      text-transform:none;color:var(--ink-faint)}
+.hbody{padding-top:2px}
+/* What the section is, in one line, before any of its findings. */
+.hnote{margin:10px 0 0;font:12.5px/1.55 var(--sans);color:var(--ink-faint)}
+.hacts{margin-top:12px}
+.hacts:empty{margin-top:0}
+/* Per-finding actions, in the text column rather than under the marker. */
+.facts{margin-top:9px}
+/* Two tags in a row read as one word without this: `too-longINDEX.md:49`. */
+.hbody .check .meta + .meta{margin-left:8px}
 
 /* ---------- the staff screen ---------- */
 .staffcard .v small{margin-top:4px}

package/templates/portal/css/inbox.css

@@ -1,7 +1,14 @@
 /* The inbox list, and the thread beside it. */
 
+/* One row per item, with a hairline between them. Without it a list of two-line titles is a
+   wall of sentences and you have to work out where one item ends — which is most of what made
+   the inbox hard to scan. The line is dropped either side of the selected row, whose own
+   background is already doing the separating. */
 .irow{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
-      padding:9px 10px;border-radius:7px;color:var(--ink-dim)}
+      padding:11px 10px;border-radius:7px;color:var(--ink-dim);
+      border-top:1px solid transparent}
+.irow + .irow{border-top-color:var(--line)}
+.irow[aria-current="true"],.irow[aria-current="true"] + .irow{border-top-color:transparent}
 .irow:hover{background:var(--panel-2)}
 .irow:focus{outline:none}
 .irow:focus-visible{outline:2px solid var(--accent-dim);outline-offset:-2px}
@@ -9,6 +16,12 @@
 .ititle{font:13.5px/1.4 var(--sans);color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;
         -webkit-box-orient:vertical;overflow:hidden}
 .irow[aria-current="true"] .ititle{color:var(--accent)}
+/* The rest of the row follows the title. The project label kept the flat grey it has when
+   nothing is selected, which read as a piece of the row that had not got the message. */
+.irow[aria-current="true"] .repo{color:color-mix(in srgb,var(--accent) 72%,var(--ink-dim));
+      border-right-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
+.irow[aria-current="true"] .num,.irow[aria-current="true"] .when{
+      color:color-mix(in srgb,var(--accent) 45%,var(--ink-faint))}
 .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--warn);
      margin-right:6px;vertical-align:2px}
 .imeta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:5px}
@@ -17,6 +30,9 @@
 .imeta .num{font:10.5px var(--mono);color:var(--ink-faint)}
 .imeta .when{font:10.5px var(--sans);color:var(--ink-faint);margin-left:auto}
 .ck{display:inline-flex;--ic:13px}
+.cc{display:inline-flex;align-items:center;gap:3px;--ic:12px;font:10.5px var(--mono);
+    color:var(--ink-faint)}
+.irow[aria-current="true"] .cc{color:color-mix(in srgb,var(--accent) 45%,var(--ink-faint))}
 /* Closed work reads as finished at a glance, so it can share a list with open work without
    competing with it. */
 .irow.shut .ititle{color:var(--ink-dim)}
@@ -26,12 +42,84 @@
 .ck.passing{color:var(--accent)} .ck.failing{color:var(--err)} .ck.pending{color:var(--warn)}
 
 /* ---------- thread ---------- */
-.thead{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:4px}
-.trow{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
+.thead{border-bottom:1px solid var(--line);padding-bottom:16px}
 .thead h3{margin:8px 0 0;font:600 17px/1.35 var(--sans);letter-spacing:-.012em;color:var(--ink)}
+.tlabels{margin-top:10px}
 .cmt{border-top:1px solid var(--line);padding:16px 0}
 .cmt.first{border-top:0}
-.reply{border-top:1px solid var(--line);margin-top:16px;padding-top:14px}
+/* The header already draws a line under itself. Whatever the reversed thread puts first must
+   not draw a second one right under it. */
+.lead{border-top:0}
+/* Reactions. Small, under the comment they belong to, the way GitHub puts them — an agent's
+   👀 is an acknowledgement and it should be readable at a glance rather than counted. */
+.reacts{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
+.react{font:11px var(--sans);border:1px solid var(--line);border-radius:20px;padding:2px 9px;
+       color:var(--ink-dim);background:var(--panel-2);cursor:default}
+/* Reply, close and merge, beside the title rather than under the last comment. A thread is
+   read newest-first and answered from the top, so nothing here is worth scrolling to. */
+.tacts{margin-top:16px;gap:8px}
+.tacts select{min-height:28px;padding:4px 8px;font-size:12px}
+/* The way out of the screen, not one of the things you do on it. */
+.tacts .out{margin-left:auto}
+
+/* ---------- pull requests ----------
+   Conversation, commits, files. Three views of one thing, so they are tabs on the thread
+   rather than three places to navigate to. */
+.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:2px 0 0}
+.tab{background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;
+     font:12.5px var(--sans);color:var(--ink-faint);padding:9px 12px;margin-bottom:-1px}
+.tab:hover{color:var(--ink)}
+.tab[aria-current="true"]{color:var(--ink);border-bottom-color:var(--accent)}
+.tab:focus-visible{outline:2px solid var(--accent-dim);outline-offset:-2px}
+
+.prcommit{display:flex;gap:10px;align-items:baseline;padding:8px 0;
+          border-top:1px solid var(--line);font-size:12.5px}
+.prcommit:first-of-type{border-top:0}
+.prcommit .sha{font:11.5px var(--mono);color:var(--ink-faint);flex:none;text-decoration:none}
+.prcommit .sha:hover{color:var(--accent)}
+.prcommit .subj{color:var(--ink);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
+                white-space:nowrap}
+.prcommit .meta{flex:none}
+
+/* ---------- writing: labels and attachments ----------
+   The label set is small and knowable, so it is a row of toggles rather than a text box that
+   quietly accepts a typo as a new label. Pressed state carries the same tones the inbox rows
+   use, so a `decision` chip is the same colour wherever you meet it. */
+.labelpick{margin-top:12px}
+.labelpick .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
+.chip.pick{background:none;cursor:pointer;padding:3px 9px;font-size:11px;color:var(--ink-dim)}
+.chip.pick:hover{border-color:var(--ink-faint);color:var(--ink)}
+.chip.pick:focus-visible{outline:2px solid var(--accent-dim);outline-offset:1px}
+.chip.pick[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 16%,transparent);
+      border-color:var(--accent-dim);color:var(--ink)}
+
+/* ---------- the @ list ----------
+   A mention is the mechanism: a staff member's workflow gates on their handle, so a misspelled
+   one is a message nobody is woken by. The roster is small and already on the page, so typing
+   `@` offers it — only the entries a mention actually reaches, and each says what it does.
+
+   The height is capped well under a dialog's, because it is placed inside one and a dialog
+   scrolls its own box: anything taller is not long, it is cut off. */
+.mentions{position:absolute;z-index:30;min-width:280px;max-width:min(420px,90%);max-height:196px;
+      overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:8px;
+      padding:4px;box-shadow:0 14px 34px rgba(0,0,0,.28)}
+.mrow{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;width:100%;text-align:left;
+      background:none;border:0;border-radius:6px;padding:6px 8px;cursor:pointer;font:inherit}
+.mrow:hover{background:var(--panel-2)}
+.mrow[aria-selected="true"]{background:var(--panel-2);box-shadow:inset 2px 0 0 var(--accent)}
+.mrow .mat{font:12px var(--mono);color:var(--accent)}
+.mrow .mname{font:12.5px var(--sans);color:var(--ink);overflow:hidden;text-overflow:ellipsis;
+      white-space:nowrap}
+.mrow .mnote{grid-column:1/-1;font:10.5px var(--sans);color:var(--ink-faint)}
+.mrow.human .mat{color:var(--ruled)}
+/* The measuring copy of a textarea, for finding the caret. Never seen. */
+.mmirror{position:absolute;visibility:hidden;white-space:pre-wrap;word-wrap:break-word;
+      pointer-events:none;top:0;left:0}
+
+.attach{display:flex;align-items:center;gap:10px;margin-top:9px;flex-wrap:wrap}
+.attach .ghbtn{display:inline-flex;align-items:center;gap:6px;--ic:13px}
+/* The whole textarea is the drop target, because that is where a person aims. */
+textarea.dropping{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
 
 /* ---------- timeline events ----------
    Not comments, so not comment-shaped: a marker, a line of prose, and whatever it points at.
@@ -51,7 +139,7 @@
 .tev .twhen{color:var(--ink-faint);font-size:11px;white-space:nowrap}
 .tev.closed .tico{color:var(--err)}
 .tev.reopened .tico,.tev.merged .tico{color:var(--accent)}
-.tev.cross-referenced .tico{color:var(--will)}
+.tev.cross-referenced .tico{color:var(--ruled)}
 
 /* An item this thread points at, as a row you can open here rather than a link that throws
    you out to GitHub. Open and closed read at a glance, which is the whole reason to show it. */

package/templates/portal/css/layout.css

@@ -5,8 +5,12 @@
 .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}
+/* 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 small{display:block;color:var(--ink-faint);font-weight:400;font-size:11.5px;
-             letter-spacing:.02em;margin-top:2px}
+             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}
@@ -67,20 +71,38 @@ main{padding:28px 34px 80px;max-width:1180px;overflow-x:hidden}
 .tfile:focus{outline:none}
 .tfile:focus-visible{outline:2px solid var(--accent-dim);outline-offset:-2px}
 
+/* 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. */
+.tfile.thit{align-items:flex-start;padding:8px}
+.tfile.thit .t{white-space:normal;overflow:visible}
+.thit .hitname{display:block;font:13px var(--sans);color:var(--ink)}
+.thit[aria-current="true"] .hitname{color:var(--accent)}
+.thit .hitline{display:block;font:11.5px/1.5 var(--sans);color:var(--ink-faint);margin-top:3px;
+      overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
+.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 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}
 .viewer img{max-width:100%;border-radius:6px;background:#fff}
+/* A recording in a brain gets the same room a screenshot does. Black rather than white
+   behind it: letterboxing should read as the video's own edges, not as a broken image. */
+.viewer video.player,.viewer audio.player{max-width:100%;width:100%;border-radius:6px;background:#000}
+.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)}
 
 .gallery{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
-.gallery figure{margin:0}
-.gallery img{width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--panel-2);border-radius:6px;
-             border:1px solid var(--line);cursor:pointer}
+.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}
+/* 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}
 .gallery figcaption{font:10.5px var(--mono);color:var(--ink-faint);margin-top:4px;
                     overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 

package/templates/portal/css/markdown.css

@@ -21,7 +21,7 @@
       padding:11px 13px;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(--will)}
+.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 hr{border:0;border-top:1px solid var(--line);margin:16px 0}
 .md img{max-width:100%;border-radius:6px;background:var(--panel-2)}
@@ -35,12 +35,25 @@
 .cbody h1{font-size:17px} .cbody h2{font-size:15.5px} .cbody h3{font-size:14px}
 .doc{font-size:14px;max-width:80ch}
 
+/* ---------- YAML ----------
+   org.yaml and staff.yaml are the two files here anybody reads closely, and flat grey made
+   finding a key in one a matter of reading every line. Structure is what YAML has that prose
+   does not; these five colours are it, and nothing else is coloured. Tokens from the theme,
+   so light and dark both work without a second palette. */
+.yk{color:var(--ruled)}          /* keys */
+.ys{color:var(--accent)}        /* quoted strings */
+.yn{color:var(--derived)}       /* numbers */
+.yb{color:var(--derived)}       /* true, false, null */
+.yc{color:var(--ink-faint);font-style:italic}  /* comments */
+.yp,.yd{color:var(--ink-faint)} /* colons, brackets, list dashes */
+pre.yaml{color:var(--ink)}
+
 /* A reference to another issue or PR, as a chip rather than a raw link: half of a status
    issue is #113, and a wall of blue URLs is the thing that makes them unreadable. */
-.ref{display:inline-block;font:11.5px var(--mono);color:var(--will);background:var(--panel-2);
+.ref{display:inline-block;font:11.5px var(--mono);color:var(--ruled);background:var(--panel-2);
      border:1px solid var(--line);border-radius:20px;padding:0 7px;text-decoration:none;
      white-space:nowrap;line-height:1.65}
-.ref:hover{border-color:var(--will);background:color-mix(in srgb,var(--will) 14%,transparent)}
+.ref:hover{border-color:var(--ruled);background:color-mix(in srgb,var(--ruled) 14%,transparent)}
 .ref.pr{color:var(--measured)}
 .ref.pr:hover{border-color:var(--measured);background:color-mix(in srgb,var(--measured) 14%,transparent)}
 
@@ -52,3 +65,10 @@
 .at:hover{color:var(--ink);border-color:var(--ink-faint)}
 .at.you{color:var(--derived);border-color:color-mix(in srgb,var(--derived) 40%,transparent)}
 .at.you:hover{background:color-mix(in srgb,var(--derived) 14%,transparent);border-color:var(--derived)}
+
+/* A screenshot on a doc page.
+   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}
+.md img+em,.md p>img+em{display:block}

package/templates/portal/css/setup.css

@@ -34,7 +34,10 @@
 .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.primary{background:var(--accent-dim);border-color:var(--accent-dim);color:var(--bg);font-weight:600}
+/* 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}
 
 .cmd{background:var(--panel-2);border:1px solid var(--line);border-radius:7px;padding:10px 12px;
@@ -93,12 +96,14 @@
 
 .repolist{display:grid;gap:1px;max-height:280px;overflow-y:auto;
       border:1px solid var(--line);border-radius:7px;background:var(--line)}
-.repo{display:flex;align-items:center;justify-content:space-between;gap:12px;
+/* 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;
       background:var(--panel);padding:9px 12px}
-.repo.added{background:var(--panel-2)}
-.repo b{font:600 12.5px var(--mono)}
-.repo .meta{margin-left:8px}
-.repo .sub{margin:2px 0 0;font-size:11.5px}
+.repolist .repo.added{background:var(--panel-2)}
+.repolist .repo b{font:600 12.5px var(--mono)}
+.repolist .repo .meta{margin-left:8px}
+.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;

package/templates/portal/index.html

@@ -21,7 +21,7 @@
 <body>
 <div class="app">
   <aside class="side">
-    <div class="brand">roster<small id="orgname">loading…</small></div>
+    <div class="brand"><span class="mark"></span>roster<small id="orgname">loading…</small></div>
     <button class="refreshall" id="refreshall" title="Reload everything from disk (r)">
       <span class="sync" data-icon="refresh"></span><span id="loaded">data now</span>
     </button>
@@ -30,6 +30,12 @@
       <span class="ic" data-icon="inbox"></span> Inbox
       <span class="n" id="inboxcount"></span>
     </button>
+    <!-- "Pending work", not "Pull requests": what is behind it is finished work waiting on you,
+         and the word for how it is delivered is not the word for what it is. -->
+    <button class="nav" id="prsnav" data-view="prs" title="Finished work waiting on you to merge">
+      <span class="ic" data-icon="merged"></span> Pending work
+      <span class="n" id="prcount"></span>
+    </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,18 @@ export const getDocs = () => json("/api/docs");
 export const getInbox = (force) => json("/api/inbox" + (force ? "?refresh=1" : ""));
 export const getSync = () => json("/api/sync").catch(() => null);
 
+/** The repos org.yaml lists. Off disk, so the new-issue form does not wait on the inbox. */
+export const getRepos = () => json("/api/repos");
+
+/** What one repo's labels actually are, so they can be offered rather than typed. */
+export const getLabels = (repo) => json("/api/labels?repo=" + encodeURIComponent(repo));
+
+/** Full-text across the docs. Titles are not enough: what you want is usually a paragraph. */
+export const searchDocs = (q) => json("/api/docsearch?q=" + encodeURIComponent(q));
+
+/** Every file in the org layer that the portal may write, off disk rather than hardcoded. */
+export const getOrgLayer = () => json("/api/orglayer");
+
 export const getDoc = (page) =>
   fetch("/api/doc?page=" + encodeURIComponent(page), { cache: "no-store" }).then((r) => r.text());
 
@@ -18,6 +30,10 @@ export const getThread = (repo, number, kind) =>
     "/api/thread?repo=" + encodeURIComponent(repo) + "&number=" + number + "&kind=" + kind,
   );
 
+/** A pull request's commits and its diff. Asked for on the Files or Commits tab, not before. */
+export const getPr = (repo, number) =>
+  json("/api/pr?repo=" + encodeURIComponent(repo) + "&number=" + number);
+
 export const diffUrl = (dir, sha, path) =>
   "/api/diff?dir=" + encodeURIComponent(dir) + "&sha=" + encodeURIComponent(sha) +
   (path ? "&path=" + encodeURIComponent(path) : "");
@@ -35,6 +51,23 @@ export async function post(payload, url = "/api/act") {
   return data;
 }
 
+/**
+ * Put a file in the repo an issue lives in, and get back the path and the link.
+ *
+ * Read here rather than posted as a form because everything else on this server speaks JSON,
+ * and a file small enough to belong in a repo is small enough to base64.
+ */
+export async function upload(repo, file) {
+  const data = await new Promise((ok, no) => {
+    const r = new FileReader();
+    r.onerror = () => no(new Error("could not read " + file.name));
+    // A data URL is "data:<type>;base64,<payload>"; only the payload travels.
+    r.onload = () => ok(String(r.result).split(",")[1] ?? "");
+    r.readAsDataURL(file);
+  });
+  return post({ repo, name: file.name, data }, "/api/upload");
+}
+
 /* ------------------------------- setup and authoring ------------------------------- */
 
 export const getSetup = () => json("/api/setup/status");