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

package/templates/portal/css/setup.css

@@ -1,56 +1,63 @@
 /* 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}
+.filelist{display:grid;gap:2px;margin:9px 0;
+      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}
+/* A file step that is written says so in the border too, the way a finished step does. */
+.manual.done{border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
 .manual b{display:block;font:600 13px var(--sans);margin-bottom:4px}
 .manual p{margin:0 0 6px;font-size:13px}
 .manual small{display:block;color:var(--ink-faint);font-size:11.5px;line-height:1.5;margin-bottom:9px}
@@ -59,32 +66,33 @@
 
 .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)}
 .pastefile .meta{margin-left:9px}
-.pastefile .diff{max-height:300px;overflow:auto;margin:9px 0}
+.pastefile .diff{margin:9px 0}
 
 /* ---------- 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 +103,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 +114,80 @@
 .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}
+
+.plansteps{margin:6px 0 12px;padding-left:20px;font-size:13.5px;line-height:1.7}
+.planfiles{margin:0 0 12px}
+.planfiles summary{cursor:pointer;color:var(--ink-dim);font-size:12.5px}
+
+/* ---------- the numbered to-do list ---------- */
+
+.todos{display:grid;gap:10px;margin-bottom:14px}
+.todo{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px}
+.todo.done{padding:11px 18px;border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
+.todohead{display:flex;align-items:center;gap:11px}
+.todohead h3{margin:0;font:600 14.5px var(--sans);flex:1}
+.todon{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
+      background:var(--surface-2);color:var(--ink-dim);font:600 11px var(--mono)}
+.todo.done .todon{background:var(--accent-fill);color:var(--accent-ink)}
+.todopill{font:600 11px var(--sans);padding:2px 8px;border-radius:99px;background:var(--surface-2);color:var(--ink-dim)}
+.todo.done .todopill{background:var(--accent-soft);color:var(--accent)}
+.todohint{margin:8px 0 0 35px}
+.todobody{margin:12px 0 0 35px}
+.todobody .row{margin-top:10px}
+.todo.locked{background:transparent;border-style:dashed}
+.todo.locked h3{color:var(--ink-dim)}
+.todo.locked .todopill{background:none;border:1px solid var(--line);color:var(--ink-faint)}
+
+/* ---------- hiring on the Staff screen ---------- */
+
+.hirepane > h3{margin:0 0 10px;font:600 14.5px var(--sans)}
+.roles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;max-width:920px}
+.role{display:grid;gap:5px;align-content:start;text-align:left;cursor:pointer;
+      background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;
+      color:var(--ink);font:inherit;
+      transition:border-color .15s var(--ease),box-shadow .15s var(--ease),transform .15s var(--ease)}
+.role:hover{border-color:var(--accent-dim);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
+.role:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
+.role b{font:600 14px var(--sans);letter-spacing:-.01em}
+.role span{color:var(--ink-dim);font:12.5px/1.5 var(--sans)}
+.roleform{max-width:560px;margin:14px 0 0}
+.roleform textarea{width:100%}
+.hireflow{max-width:920px}
+.hireflowhead{justify-content:space-between;margin:0 0 12px}
+.hireflowhead h2{margin:0;font:600 17px var(--sans);letter-spacing:-.015em}
+.hiresummary{margin:0;font:13.5px/1.55 var(--sans);color:var(--ink)}
+.hiresummary.err{color:var(--err)}
+.hireadvanced{margin-top:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);max-width:560px}
+.qfield{display:grid;gap:5px;margin:0 0 12px}
+.qfield span{font:600 12.5px var(--sans)}
+.qfield input{background:var(--bg-elev);border:1px solid var(--border-strong);color:var(--ink);
+      border-radius:var(--r);padding:8px 10px;font:13px var(--sans)}
+.modes{display:inline-flex;gap:2px;padding:3px;margin:0 0 14px;background:var(--surface-2);
+      border-radius:var(--r);flex-wrap:wrap}
+.mode{border:0;background:none;color:var(--ink-dim);font:600 12.5px var(--sans);padding:6px 12px;
+      border-radius:calc(var(--r) - 2px);cursor:pointer}
+.mode:hover{color:var(--ink)}
+.mode.on{background:var(--bg-elev);color:var(--ink);box-shadow:var(--shadow-sm)}
+.modes + div > .paste{border-top:0;margin-top:0;padding-top:0}
+
+/* ---------- a checked paste ---------- */
+.verdict{margin:0 0 10px;font:600 13.5px var(--sans)}
+.verdict.ok{color:var(--accent)}
+.verdict.bad{color:var(--err)}
+.pastepreview{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:12px;background:var(--bg)}
+.pastenotes{margin:0 0 12px}
+.pastenotes summary{cursor:pointer;font:600 12.5px var(--sans);color:var(--ink-dim);margin-bottom:6px}
+.pastenotes .md{border-left:3px solid var(--line);padding-left:12px}
+.pastefile .diff{white-space:pre-wrap;overflow-wrap:anywhere}
+.warnline{margin:10px 0 0;padding:8px 11px;border-radius:var(--r);background:color-mix(in srgb,var(--warn) 12%,transparent);color:var(--ink);font-size:13px}
+
+/* A single-line text box, matching the question fields. */
+.textfield{width:100%;background:var(--bg-elev);border:1px solid var(--border-strong);color:var(--ink);
+      border-radius:var(--r);padding:8px 10px;font:13px var(--sans);outline:none}
+.textfield:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
+.credform{display:grid;gap:10px}
+.credform .row{margin:0}
+.okline{margin:0 0 8px;color:var(--accent);font:600 13px var(--sans)}

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">
@@ -13,9 +13,11 @@
 <link rel="stylesheet" href="/assets/css/markdown.css">
 <link rel="stylesheet" href="/assets/css/brain.css">
 <link rel="stylesheet" href="/assets/css/inbox.css">
+<link rel="stylesheet" href="/assets/css/home.css">
 <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>
@@ -26,15 +28,22 @@
       <span class="sync" data-icon="refresh"></span><span id="loaded">data now</span>
     </button>
 
-    <button class="nav top" id="inboxnav" data-view="inbox">
-      <span class="ic" data-icon="inbox"></span> Inbox
+    <!-- Only while something is left to set up; app.js decides. -->
+    <button class="nav top" id="setupnav" data-view="setup" hidden>
+      <span class="ic" data-icon="task-done"></span> Getting started
+      <span class="n" id="setupcount"></span>
+    </button>
+    <button class="nav top" id="homenav" data-view="home" title="What needs you, and who is working">
+      <span class="ic" data-icon="inbox"></span> Home
+      <span class="n" id="homecount"></span>
+    </button>
+    <button class="nav" id="inboxnav" data-view="inbox" title="Every open issue on each staff member's tracker">
+      <span class="ic" data-icon="issue-open"></span> Trackers
       <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>
+    <div class="staffviews" id="inboxsub" hidden></div>
+    <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
@@ -48,7 +57,10 @@
 
     <!-- The heading is the fold. Collapsed, it carries the count, because a hidden list still
          has to say how much it is hiding. -->
-    <button class="sect sectfold" id="stafffold" aria-expanded="false" aria-controls="stafflist">
+    <!-- Named apart from the Staff screen above it: two controls both called "Staff" is how a
+         click meant for the screen landed on the fold, for people and for automation alike. -->
+    <button class="sect sectfold" id="stafffold" aria-expanded="false" aria-controls="stafflist"
+            aria-label="Staff list" title="Show or hide each staff member's own screens">
       <span class="caret" data-icon="chevron"></span>Staff<span class="n" id="staffcount" hidden></span>
     </button>
     <div id="stafflist"></div>

package/templates/portal/js/api.js

@@ -7,6 +7,12 @@ 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" : ""));
+
+/** Who is running now, what started it, and what finished in the last few hours. Never cached. */
+export const getLive = () => json("/api/live");
+
 /** 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 +53,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 +89,21 @@ 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, about) =>
+  json(
+    "/api/brief?kind=" + encodeURIComponent(kind) +
+      (staff ? "&staff=" + encodeURIComponent(staff) : "") +
+      (example ? "&example=" + encodeURIComponent(example) : "") +
+      (about ? "&about=" + encodeURIComponent(about) : ""),
+  );
+
+/** The worked charter that matches a staff member, with the business's name in it. */
+export const getCharterExample = (staff) =>
+  json("/api/charter-example?staff=" + encodeURIComponent(staff));
+
+/** Whether a staff member's App secrets are set and a daily run has succeeded. Online only. */
+export const getStaffProgress = (staff, fresh) =>
+  json("/api/staff/progress?staff=" + encodeURIComponent(staff) + (fresh ? "&fresh=1" : ""));
 
 /** Parse what came back from the model. Reads only: saving is a second, deliberate step. */
 export const parsePaste = (kind, staff, answer) =>
@@ -98,10 +122,26 @@ export const getDoctor = (offline) => json("/api/doctor" + (offline ? "?offline=
 export const getFix = (offline) => json("/api/fix" + (offline ? "?offline=1" : ""));
 
 export const listRepos = (org) => json("/api/setup/repos?org=" + encodeURIComponent(org));
-export const addRepo = (name, role) => post({ name, role }, "/api/setup/add-repo");
+/** Commits org.yaml and pushes, as every other write here does. */
+export const addRepo = (name, role, visibility) =>
+  post({ name, role, visibility }, "/api/setup/add-repo");
 export const startApp = (staff, scope) => post({ staff, scope }, "/api/setup/app");
 export const appResult = (state) => json("/api/setup/app-result?state=" + encodeURIComponent(state));
 
 /** 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

@@ -2,7 +2,7 @@
 
 import { getOrg } from "./api.js";
 import { $, el, store } from "./dom.js";
-import { icon, iconHTML } from "./icons.js";
+import { icon, iconHTML, staffIcon } from "./icons.js";
 import { installLightbox } from "./lightbox.js";
 import { setPeople } from "./md.js";
 import {
@@ -14,21 +14,27 @@ import {
   syncNotice,
 } from "./refresh.js";
 import { onRender } from "./router.js";
-import { ORG_WIDE, S, VIEWS, applyHash, writeHash } from "./state.js";
+import { ORG_WIDE, S, VIEWS, applyHash, humanLabel, readHash, writeHash } from "./state.js";
 import { viewBrain } from "./views/brain.js";
 import { viewChanged } from "./views/changed.js";
 import { viewDocs } from "./views/docs.js";
 import { viewGraph } from "./views/graph.js";
 import { viewHealth } from "./views/health.js";
+import { viewHome } from "./views/home.js";
 import { viewInbox, viewPrs } from "./views/inbox.js";
 import { viewOrg } from "./views/org.js";
 import { viewPrompt } from "./views/prompt.js";
-import { viewSetup } from "./views/setup.js";
+import { viewRuns } from "./views/runs.js";
+import { sentence, whatsLeft } from "./readiness.js";
+import { paintSetupNav, viewGettingStarted, viewSetup } from "./views/setup.js";
 import { viewStaff } from "./views/staff.js";
 
 const SCREEN = {
+  setup: viewGettingStarted,
+  home: viewHome,
   inbox: viewInbox,
   prs: viewPrs,
+  runs: viewRuns,
   org: viewOrg,
   staff: viewStaff,
   docs: viewDocs,
@@ -50,8 +56,38 @@ const SCREEN = {
  */
 const NEEDS = ["org", "name", "opsName", "staff"];
 
+/** The org-wide screens in the sidebar, by button. */
+const NAV = [
+  ["#setupnav", "setup"],
+  ["#homenav", "home"],
+  ["#inboxnav", "inbox"],
+  ["#runsnav", "runs"],
+  ["#staffnav", "staff"],
+  ["#orgnav", "org"],
+  ["#docsnav", "docs"],
+];
+
 export async function boot() {
   initTheme();
+
+  /* Bound before the first request rather than after it. The sidebar is markup, so it is on
+     screen and clickable while /api/org is still building the export, and a click in that
+     window used to do nothing at all: the first click on Staff after a load was simply lost.
+     Now it is remembered and honoured once there is something to render. */
+  let early = null;
+  for (const [id, view] of NAV) {
+    const b = $(id);
+    if (!b) continue;
+    b.onclick = () => {
+      if (!S.data) {
+        early = view;
+        return;
+      }
+      S.view = view;
+      render();
+    };
+  }
+
   /* Before the first render, and once: it is delegated, so it covers every image any screen
      draws from here on, including the setup screen. */
   installLightbox();
@@ -66,7 +102,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("#homenav, #inboxnav, #runsnav, #orgnav, #staffnav, #docsnav, #refreshall, .sect, #stafflist")) {
       el.hidden = true;
     }
     for (const slot of document.querySelectorAll("[data-icon]")) {
@@ -78,6 +114,8 @@ export async function boot() {
 
   S.data = first;
   S.loadedAt = new Date();
+  S.staffOpen = null; // an open hire list survives a refresh, not a page load
+  S.readiness = null;
   S.staffHandle = S.data.staff[0]?.handle ?? null;
   $("#orgname").textContent = S.data.name + " · " + S.data.staff.length + " staff";
 
@@ -88,15 +126,15 @@ export async function boot() {
     slot.innerHTML = iconHTML(slot.dataset.icon);
   }
   onRender(render);
+  const linked = readHash() !== null;
   applyHash();
+  /* An org nobody has been hired into has an empty Inbox, which says nothing about what to do
+     next. It opens on what is left instead, unless a link or a click asked for somewhere else. */
+  if (early) S.view = early;
+  else if (!linked && (S.data.unfinished ?? []).includes("hire")) S.view = "setup";
   initStaffFold();
   paintSidebar();
 
-  $("#inboxnav").onclick = () => { S.view = "inbox"; render(); };
-  $("#prsnav").onclick = () => { S.view = "prs"; render(); };
-  $("#staffnav").onclick = () => { S.view = "staff"; render(); };
-  $("#orgnav").onclick = () => { S.view = "org"; render(); };
-  $("#docsnav").onclick = () => { S.view = "docs"; render(); };
   $("#refreshall").onclick = () => refreshAll(false);
 
   /* Coming back to the tab after a run should show the run — and coming back to it thirty
@@ -218,6 +256,7 @@ function initStaffFold() {
 }
 
 function paintSidebar() {
+  paintInboxLinks();
   const host = $("#stafflist");
   host.replaceChildren();
   paintedRoster = S.data.staff.map((s) => s.handle).join(" ");
@@ -228,11 +267,20 @@ function paintSidebar() {
     const head = el("button", { className: "nav staffrow" });
     head.dataset.staff = s.handle;
     head.setAttribute("aria-expanded", String(open));
+    const dot = el("span", { className: "readydot", hidden: true });
     head.append(
       icon("chevron", "caret"),
+      icon(staffIcon(s), "ic"),
       el("span", { className: "t", textContent: s.name }),
+      dot,
       el("span", { className: "hh", textContent: s.handle }),
     );
+    whatsLeft(s).then((left) => {
+      paintSetupNav();
+      if (!left.length) return;
+      dot.hidden = false;
+      head.title = "Not ready to run: " + sentence(left);
+    });
 
     const views = el("div", { className: "staffviews" });
     views.hidden = !open;
@@ -271,7 +319,43 @@ function paintSidebar() {
 }
 
 /** Which rows are lit, and which staff member is unfolded. */
+/* The inbox's filters, as links under Inbox: everything, what is on you, decisions, then one
+   per staff member. They replaced two dropdowns on the Inbox screen itself. */
+function paintInboxLinks() {
+  const sub = $("#inboxsub");
+  if (!sub) return;
+  sub.replaceChildren();
+  // Inbox itself is everything. Under it: each staff member, then the product repos' issues.
+  const links = [
+    ["", "All", "inbox"],
+    ...S.data.staff.map((s) => [s.handle, s.name, staffIcon(s)]),
+    ["@issues", "Issues", "issue-open"],
+  ];
+  for (const [who, label, glyph] of links) {
+    const b = el("button", { className: "nav subnav inboxlink" }, [
+      icon(glyph, "ic"),
+      el("span", { className: "t", textContent: label }),
+      ...(who === "@unread" ? [el("span", { className: "n", id: "unreadcount" })] : []),
+    ]);
+    b.dataset.who = who;
+    b.onclick = () => {
+      S.view = "inbox";
+      S.inboxStaff = who;
+      S.inboxFilter = "";
+      S.inboxOpen = null;
+      render();
+    };
+    sub.append(b);
+  }
+}
+
 function markSidebar() {
+  const sub = $("#inboxsub");
+  if (sub) sub.hidden = S.view !== "inbox";
+  for (const b of document.querySelectorAll(".inboxlink")) {
+    const on = S.view === "inbox" && b.dataset.who === (S.inboxStaff || "");
+    b.setAttribute("aria-current", String(on));
+  }
   for (const b of document.querySelectorAll(".nav")) {
     if (!b.dataset.view) continue;
     const mine = !b.dataset.staff || b.dataset.staff === S.staffHandle;
@@ -296,6 +380,7 @@ function render() {
   // A refresh can add or remove a staff member, and the sidebar is built once.
   const roster = S.data.staff.map((s) => s.handle).join(" ");
   if (roster !== paintedRoster) paintSidebar();
+  paintSetupNav();
   markSidebar();
   stampCounts();
   writeHash(true);

package/templates/portal/js/dialog.js

@@ -111,3 +111,86 @@ export function askText({
     ta.setSelectionRange?.(ta.value.length, ta.value.length);
   });
 }
+
+/**
+ * Asking before something that cannot be taken back: a merge, a push, a new repo, a paid run.
+ *
+ * Native `confirm()` looked like the browser rather than this page, and it blocks the whole
+ * tab, which froze browser automation mid-run. This is the same `<dialog>` as askText, so the
+ * backdrop, Escape and the focus trap come free. The wording is the caller's: `title` is the
+ * question, `hint` says what will happen.
+ *
+ * @returns true only for the confirm button. Escape, Cancel and the backdrop are all no.
+ */
+export function askYes({ title, hint, confirm = "Continue" }) {
+  const box = document.createElement("dialog");
+  // The test shim has no dialog element; see askText.
+  if (typeof box.showModal !== "function") {
+    return Promise.resolve(Boolean(globalThis.confirm?.(hint ? title + "\n\n" + hint : title)));
+  }
+
+  box.className = "ask";
+  box.append(el("h3", { textContent: title }));
+  if (hint) box.append(el("p", { className: "askhint", textContent: hint }));
+
+  const cancel = el("button", { className: "ghbtn", textContent: "Cancel" });
+  const go = el("button", { className: "ghbtn primary", textContent: confirm });
+  box.append(el("div", { className: "row askrow" }, [cancel, go]));
+
+  return new Promise((resolve) => {
+    let answer = false;
+    const done = (yes) => {
+      answer = yes;
+      box.close();
+    };
+    cancel.onclick = () => done(false);
+    go.onclick = () => done(true);
+    box.addEventListener("close", () => {
+      box.remove();
+      resolve(answer);
+    });
+    box.addEventListener("click", (e) => {
+      if (onBackdrop(e, box.getBoundingClientRect?.())) done(false);
+    });
+    document.body.append(box);
+    box.showModal();
+    // Cancel has the focus, so an Enter pressed out of habit does not merge anything.
+    cancel.focus();
+  });
+}
+
+/**
+ * A larger dialog for a whole task: hiring someone, or finishing their setup. Native <dialog>
+ * again, appended to <body> rather than to the screen, so a background refresh repainting the
+ * screen leaves it open with whatever was typed into it.
+ *
+ * @returns {{set: (node: Node) => void, close: () => void, isOpen: () => boolean} | null}
+ *   null where there is no dialog element (the test shim), and the caller draws inline instead.
+ */
+export function sheet({ node, onClose, side = false }) {
+  const box = document.createElement("dialog");
+  if (typeof box.showModal !== "function") return null;
+  // `side` slides in from the right at full height, for reading a thread beside the page.
+  box.className = side ? "sheet side" : "sheet";
+  const body = el("div", { className: "sheetbody" });
+  body.append(node);
+  box.append(body);
+  let open = true;
+  const close = () => {
+    if (!open) return;
+    open = false;
+    box.close();
+    box.remove();
+    onClose?.();
+  };
+  box.addEventListener("cancel", (e) => {
+    e.preventDefault();
+    close();
+  });
+  box.addEventListener("click", (e) => {
+    if (onBackdrop(e, box.getBoundingClientRect())) close();
+  });
+  document.body.append(box);
+  box.showModal();
+  return { set: (n) => body.replaceChildren(n), close, isOpen: () => open };
+}