daily-focus 1.2.0-dev.9 → 2.0.0-dev.15

package/public/app.js

@@ -1110,6 +1110,24 @@ function postObjective(objective, blocker) {
 function postListCalendars() {
   return postJson("/api/calendars/list", {});
 }
+function postSetupAnswer(step, answer) {
+  return post("/api/onboarding/answer", { step, answer });
+}
+function postSetupRevise(step, text, draft) {
+  return post("/api/onboarding/revise", { step, text, draft });
+}
+function postSetupDetect() {
+  return post("/api/onboarding/detect");
+}
+function postSetupRetry(step) {
+  return post("/api/onboarding/retry", { step });
+}
+function postSetupFinish() {
+  return post("/api/onboarding/finish");
+}
+async function fetchSetupSources() {
+  return jsonFrom(await fetch("/api/onboarding/sources"), "GET /api/onboarding/sources");
+}
 
 // client/state.ts
 var VIEWS = ["today", "board", "tickets", "settings"];
@@ -1144,7 +1162,14 @@ function createUi(initial = {}) {
     settingsError: y3(initial.settingsError ?? null),
     settingsSaving: y3(initial.settingsSaving ?? false),
     texts: y3(initial.texts ?? {}),
-    calendars: y3(initial.calendars ?? null)
+    calendars: y3(initial.calendars ?? null),
+    setupDrafts: y3(initial.setupDrafts ?? /* @__PURE__ */ new Map()),
+    setupEditing: y3(initial.setupEditing ?? null),
+    setupConfirm: y3(initial.setupConfirm ?? null),
+    setupBusy: y3(initial.setupBusy ?? null),
+    setupError: y3(initial.setupError ?? null),
+    setupTell: y3(initial.setupTell ?? /* @__PURE__ */ new Map()),
+    setupSources: y3(initial.setupSources ?? null)
   };
 }
 function isView(value) {
@@ -1666,7 +1691,7 @@ async function loadSettings() {
     showToast(`Could not load the settings: ${err.message}`);
   }
 }
-async function sendSettings(values, fromDraft) {
+async function sendSettings(values) {
   if (ui.settingsSaving.value) return;
   n2(() => {
     ui.settingsSaving.value = true;
@@ -1676,17 +1701,14 @@ async function sendSettings(values, fromDraft) {
     const page = await postSettings(values);
     n2(() => {
       ui.settings.value = page;
-      if (fromDraft) {
-        const draft = new Map(ui.settingsDraft.value);
-        for (const [key, value] of Object.entries(values)) if (draft.get(key) === value) draft.delete(key);
-        ui.settingsDraft.value = draft;
-      }
+      const draft = new Map(ui.settingsDraft.value);
+      for (const [key, value] of Object.entries(values)) if (draft.get(key) === value) draft.delete(key);
+      ui.settingsDraft.value = draft;
     });
     restartToast(page);
     if (page.restart === "waiting") void followRestart();
   } catch (err) {
-    if (fromDraft) ui.settingsError.value = err.message;
-    else showToast(`Could not save: ${err.message}`);
+    ui.settingsError.value = err.message;
   } finally {
     ui.settingsSaving.value = false;
   }
@@ -1764,6 +1786,60 @@ async function listCalendars() {
     ui.calendars.value = err.message;
   }
 }
+async function setupRequest(step, send) {
+  if (ui.setupBusy.value) return false;
+  n2(() => {
+    ui.setupBusy.value = step;
+    ui.setupError.value = null;
+  });
+  try {
+    adoptState(await send());
+    return true;
+  } catch (err) {
+    ui.setupError.value = { step, message: err.message };
+    return false;
+  } finally {
+    ui.setupBusy.value = null;
+  }
+}
+function forgetDraft(step) {
+  if (!ui.setupDrafts.value.has(step)) return;
+  const next = new Map(ui.setupDrafts.value);
+  next.delete(step);
+  ui.setupDrafts.value = next;
+}
+async function answerSetup(step, answer) {
+  if (!await setupRequest(step, () => postSetupAnswer(step, answer))) return;
+  n2(() => {
+    forgetDraft(step);
+    if (ui.setupEditing.value === step) ui.setupEditing.value = null;
+    if (ui.setupConfirm.value === step) ui.setupConfirm.value = null;
+    ui.setupSources.value = null;
+  });
+  afterRender(() => {
+    const heading = document.querySelector('.onboarding__card[data-current="true"] h2');
+    heading?.focus({ preventScroll: true });
+    heading?.closest(".onboarding__card")?.scrollIntoView({ block: "center", behavior: "smooth" });
+  });
+}
+async function reviseSetup(step, text, draft) {
+  if (!await setupRequest(step, () => postSetupRevise(step, text, draft))) return;
+  n2(() => {
+    forgetDraft(step);
+    if (ui.setupConfirm.value === step) ui.setupConfirm.value = null;
+    const tell = new Map(ui.setupTell.value);
+    tell.delete(step);
+    ui.setupTell.value = tell;
+  });
+}
+async function loadSetupSources() {
+  ui.setupSources.value = "loading";
+  try {
+    ui.setupSources.value = await fetchSetupSources();
+  } catch (err) {
+    ui.setupSources.value = { error: err.message };
+  }
+}
 function openSettings(section2 = null) {
   if (ui.view.value !== "settings") {
     try {
@@ -1897,14 +1973,39 @@ var handlers = {
     ui.settingsDraft.value = /* @__PURE__ */ new Map();
     ui.settingsError.value = null;
   }),
-  saveSettings: (keys) => void sendSettings(Object.fromEntries([...ui.settingsDraft.value].filter(([key]) => !keys || keys.includes(key))), true),
-  chooseSettings: (values) => void sendSettings(values, false),
+  saveSettings: () => void sendSettings(Object.fromEntries(ui.settingsDraft.value)),
   loadText: (name) => void loadText(name),
   editText: (name, text) => patchText(name, { draft: text }),
   saveText: (name, overwrite) => void saveText(name, overwrite),
   reloadText: (name) => void loadText(name),
   saveObjective: (objective, blocker) => void saveObjective(objective, blocker),
-  listCalendars: () => void listCalendars()
+  listCalendars: () => void listCalendars(),
+  answerSetup: (step, answer) => void answerSetup(step, answer),
+  editSetupDraft: (step, answer, version) => {
+    if (answer === null) return forgetDraft(step);
+    const next = new Map(ui.setupDrafts.value);
+    next.set(step, { version, answer });
+    ui.setupDrafts.value = next;
+  },
+  editSetupStep: (step) => n2(() => {
+    ui.setupEditing.value = step;
+    ui.setupError.value = null;
+  }),
+  confirmSetup: (step) => {
+    ui.setupConfirm.value = step;
+  },
+  editSetupTell: (step, text) => {
+    const next = new Map(ui.setupTell.value);
+    next.set(step, text);
+    ui.setupTell.value = next;
+  },
+  reviseSetup: (step, text, draft) => void reviseSetup(step, text, draft),
+  retrySetup: (step) => void setupRequest(step, () => postSetupRetry(step)),
+  detectSetup: () => void setupRequest("detect", () => postSetupDetect()),
+  finishSetup: () => void setupRequest("finish", () => postSetupFinish()).then((finished) => {
+    if (finished && state.value?.restart === "waiting") void followRestart();
+  }),
+  loadSetupSources: () => void loadSetupSources()
 };
 
 // client/format.ts
@@ -2378,10 +2479,11 @@ function agentRunBanner(run, state2, handlers2) {
     }
   };
   if (run.status === "running") {
+    const helping = (run.steps ?? []).filter((step) => step.subagent && step.state === "running").length;
     return bannerNode(
       "info",
       "i",
-      `The morning agent is writing a new brief, started ${relativeTime(run.startedAt, now)}.`,
+      `The morning agent is writing a new brief, started ${relativeTime(run.startedAt, now)}` + (helping ? `, with ${helping} ${helping === 1 ? "subagent" : "subagents"} at work.` : "."),
       [el("button", { type: "button", class: "button banner__action", onClick: () => handlers2.stopAgent() }, "Stop")],
       strip
     );
@@ -2538,7 +2640,11 @@ function ItemRow({ item, state: state2, ui: ui2, handlers: handlers2 }) {
     },
     el(
       "span",
-      { class: "item__mark" },
+      // A ranked row's number stands in the margin where the source dot would be:
+      // the stylesheet draws it off `data-rank` and hides the dot, since the
+      // source is named in the meta line anyway and the rank is what this row
+      // is for.
+      { class: "item__mark", "data-rank": item.priority !== void 0 && item.status === "open" ? String(item.priority) : void 0 },
       el("span", {
         class: "item__dot",
         style: `background:${sourceColor(item.source)}`,
@@ -2550,7 +2656,8 @@ function ItemRow({ item, state: state2, ui: ui2, handlers: handlers2 }) {
       { class: "item__body" },
       el("p", { class: "item__title" }, title),
       renderMeta(item, state2, now),
-      item.detail ? el("p", { class: "item__detail" }, renderMarkdown(item.detail)) : null
+      item.detail ? el("p", { class: "item__detail" }, renderMarkdown(item.detail)) : null,
+      renderAhead(item.id, state2)
     ),
     renderActions(item, ui2, handlers2),
     ui2.menuFor.value === item.id ? renderSnoozeMenu(item, now, handlers2) : null
@@ -2563,9 +2670,6 @@ function renderMeta(item, state2, now) {
     pills.push(el("span", { class: cls }, text));
     said.add(text.trim().toLowerCase());
   };
-  if (item.priority !== void 0 && item.status === "open") {
-    pill("pill pill--priority", `#${item.priority}`);
-  }
   for (const [cls, text] of rowPillTexts(item, state2)) pill(cls, text);
   if (item.advancesObjective) {
     pill("pill pill--objective", "objective");
@@ -2614,6 +2718,38 @@ function rowPillTexts(row, state2) {
 function rowPills(row, state2) {
   return rowPillTexts(row, state2).map(([cls, text]) => el("span", { class: cls }, text));
 }
+var READING = {
+  "assess-review": "Reading the review\u2026",
+  "explain-ci": "Reading the failing checks\u2026"
+};
+function renderAhead(id, state2) {
+  const auto = state2.assistant?.auto;
+  const keys = auto?.rows?.[id];
+  if (!auto || !keys?.length) return null;
+  const turn = (state2.assistant.items?.[id]?.turns ?? []).findLast((candidate) => candidate.auto !== null && keys.includes(candidate.auto));
+  const mark = el("span", { class: "item__ahead-mark", "aria-hidden": "true" }, "\u2726");
+  if (!turn) {
+    return auto.enabled && auto.usedToday >= auto.limit ? el("p", { class: "item__ahead item__ahead--quiet" }, mark, `Not answered ahead: today's ${auto.limit} are used.`) : null;
+  }
+  if (turn.status === "running") {
+    return el("p", { class: "item__ahead item__ahead--quiet", "data-status": "running" }, mark, READING[turn.action ?? ""] ?? "Reading\u2026");
+  }
+  if (turn.status === "failed") {
+    return el("p", { class: "item__ahead item__ahead--quiet" }, mark, "Could not answer ahead; the panel says why.");
+  }
+  const verdict = turn.status === "done" ? verdictLine(turn.reply) : "";
+  if (!verdict) return null;
+  return el(
+    "p",
+    { class: "item__ahead", title: `Answered ahead ${relativeTime(turn.endedAt ?? turn.startedAt, new Date(state2.now))}. Open the panel for the whole answer.` },
+    mark,
+    renderMarkdown(verdict)
+  );
+}
+function verdictLine(reply) {
+  const line = reply.split("\n").find((candidate) => candidate.trim() !== "") ?? "";
+  return line.replace(/^\s*(?:#{1,6}\s+|>\s*|[-*•]\s+|\d+[.)]\s+)/, "").trim();
+}
 function renderActions(item, ui2, handlers2) {
   const buttons = [];
   const act = (id, action) => () => handlers2.onAction(id, action);
@@ -2907,7 +3043,8 @@ function PullRow({ item: row, state: state2, ui: ui2, handlers: handlers2 }) {
       ),
       renderPullMeta(row, state2, now),
       renderPullReasons(row, now),
-      renderCancelledChecks(row)
+      renderCancelledChecks(row),
+      renderAhead(row.id, state2)
     ),
     renderPullActions(row, ui2, handlers2),
     ui2.menuFor.value === row.id ? renderSnoozeMenu(row, now, handlers2, { indefinite: false }) : null
@@ -3800,6 +3937,7 @@ function describeWhen(value, now) {
   return `${named ? day : date && date.getFullYear() === now.getFullYear() ? formatShortDay(value) : formatDay(value)} at ${formatTime(value)}`;
 }
 function runReport(run, ui2, handlers2) {
+  if (run.steps?.length) return runWork(run, ui2, handlers2);
   const messages = run.messages ?? (run.report ? [run.report] : []);
   const running = run.status === "running";
   const earlier = !running && messages.length && messages.at(-1) === run.report ? messages.slice(0, -1) : messages;
@@ -3858,6 +3996,92 @@ function runReport(run, ui2, handlers2) {
     ) : null
   );
 }
+function runWork(run, ui2, handlers2) {
+  const running = run.status === "running";
+  if (running) {
+    return el(
+      "section",
+      { class: "flyout__section" },
+      el("h3", { class: "flyout__label" }, "What it is doing"),
+      runSteps(run, run.steps, null, ui2, handlers2)
+    );
+  }
+  const last = run.steps.findLast((step) => step.by === null && step.kind === "message");
+  const steps2 = last && sameWords(last.text, run.report) ? run.steps.filter((step) => step !== last) : run.steps;
+  const handoffs = steps2.filter((step) => step.subagent).length;
+  return el(
+    "section",
+    { class: "flyout__section" },
+    el("h3", { class: "flyout__label" }, run.status === "done" ? "Its report" : "What it said last"),
+    run.report ? el("div", { class: "assistant__reply" }, renderMarkdownBlocks(run.report)) : el("p", { class: "flyout__empty" }, "It said nothing."),
+    steps2.length ? el(
+      "details",
+      { class: "agent-run__list" },
+      el(
+        "summary",
+        null,
+        `How it got there, in ${steps2.length} ${steps2.length === 1 ? "step" : "steps"}` + (handoffs ? `, with ${handoffs} ${handoffs === 1 ? "subagent" : "subagents"}` : "")
+      ),
+      runSteps(run, steps2, null, ui2, handlers2)
+    ) : null
+  );
+}
+var NESTING = 4;
+function runSteps(run, steps2, by, ui2, handlers2, depth = 0) {
+  const own = steps2.filter((step) => step.by === by);
+  return el(
+    "ol",
+    { class: "assistant__steps agent-run__steps" },
+    own.length ? null : el("li", { class: "assistant__step assistant__step--message" }, "Nothing yet."),
+    own.map((step, index) => {
+      if (step.kind === "message") {
+        return el("li", { key: index, class: "agent-run__said" }, renderMarkdownBlocks(step.text));
+      }
+      if (step.subagent && depth < NESTING) return runHandoff(run, steps2, step, ui2, handlers2, depth, index);
+      return el(
+        "li",
+        { key: index, class: "assistant__step", "data-state": step.state },
+        el("span", { class: "assistant__step-text" }, step.text),
+        step.detail ? el("code", { class: "assistant__step-detail", title: step.detail }, step.detail) : null
+      );
+    })
+  );
+}
+function runHandoff(run, steps2, step, ui2, handlers2, depth, index) {
+  const id = step.subagent;
+  const own = steps2.filter((candidate) => candidate.by === id);
+  const latest = own.at(-1);
+  const calls = own.filter((candidate) => candidate.kind === "tool").length;
+  const doing = step.state === "running" ? latest ? latest.kind === "message" ? firstLine(latest.text) : latest.text : "starting" : `${calls} ${calls === 1 ? "step" : "steps"}`;
+  const key = `${run.id}:${id}`;
+  const fallback = step.state === "running";
+  const open = ui2.messageOpen.value.has(key) ? ui2.messageOpen.value.get(key) : fallback;
+  return el(
+    "li",
+    { key: index, class: "assistant__step agent-run__handoff", "data-state": step.state },
+    el(
+      "details",
+      {
+        open,
+        // As the message folds do: a toggle back to the default is forgotten.
+        onToggle: (event) => {
+          const isOpen = event.currentTarget.open;
+          handlers2.toggleMessage(key, isOpen === fallback ? null : isOpen);
+        }
+      },
+      el(
+        "summary",
+        null,
+        el("span", { class: "assistant__step-text" }, `Subagent: ${step.detail ?? "unnamed"}`),
+        el("span", { class: "assistant__step-detail" }, doing)
+      ),
+      runSteps(run, steps2, id, ui2, handlers2, depth + 1)
+    )
+  );
+}
+function sameWords(a4, b4) {
+  return a4.replace(/\s+/g, " ").trim() === b4.replace(/\s+/g, " ").trim();
+}
 function runStatus(run, now, handlers2) {
   if (run.status === "running") {
     return el(
@@ -4225,6 +4449,7 @@ function renderAssistantTurn(turn, label, handlers2) {
   const action = turn.action ? label.get(turn.action) : null;
   const extra = action && turn.request.startsWith(action.request) ? turn.request.slice(action.request.length).trim() : null;
   const asked = action ? [el("strong", null, action.label), extra ? ` \u2014 ${extra}` : ""] : [turn.request];
+  if (turn.auto) asked.push(el("span", { class: "assistant__auto", title: "The dashboard asked this on its own, when the pull request started waiting on you." }, " \xB7 asked ahead"));
   const { body, created } = turn.status === "done" ? splitCreated(turn.reply) : { body: turn.reply, created: [] };
   const status = turn.status === "failed" ? el("p", { class: "assistant__status assistant__status--bad" }, `Failed: ${turn.error}`) : turn.status === "aborted" ? el("p", { class: "assistant__status" }, `Stopped: ${turn.error}`) : null;
   return el(
@@ -4245,35 +4470,35 @@ function renderAssistantTurn(turn, label, handlers2) {
   );
 }
 function renderWork(turn) {
-  const steps = turn.steps ?? [];
+  const steps2 = turn.steps ?? [];
   if (turn.status === "running") {
     return el(
       "div",
       { class: "assistant__work" },
       el("p", { class: "assistant__status assistant__status--working" }, "Working \xB7 ", k(Elapsed, { since: turn.startedAt })),
-      steps.length ? renderSteps(steps) : null
+      steps2.length ? renderSteps(steps2) : null
     );
   }
   const took = durationBetween(turn.startedAt, turn.endedAt);
-  if (!steps.length) return took ? el("p", { class: "assistant__took" }, `Answered in ${took}`) : null;
-  const failed = steps.filter((step2) => step2.state === "failed").length;
+  if (!steps2.length) return took ? el("p", { class: "assistant__took" }, `Answered in ${took}`) : null;
+  const failed = steps2.filter((step) => step.state === "failed").length;
   const summary = [
     took ? `${turn.status === "done" ? "Worked" : "Ran"} for ${took}` : null,
-    `${steps.length} ${steps.length === 1 ? "step" : "steps"}`,
+    `${steps2.length} ${steps2.length === 1 ? "step" : "steps"}`,
     failed ? `${failed} failed` : null
   ].filter(Boolean).join(" \xB7 ");
-  return el("details", { class: "assistant__work", open: turn.status === "failed" }, el("summary", null, summary), renderSteps(steps));
+  return el("details", { class: "assistant__work", open: turn.status === "failed" }, el("summary", null, summary), renderSteps(steps2));
 }
-function renderSteps(steps) {
+function renderSteps(steps2) {
   return el(
     "ol",
     { class: "assistant__steps" },
-    steps.map(
-      (step2, index) => step2.kind === "message" ? el("li", { key: index, class: "assistant__step assistant__step--message" }, renderMarkdown(step2.text.trim())) : el(
+    steps2.map(
+      (step, index) => step.kind === "message" ? el("li", { key: index, class: "assistant__step assistant__step--message" }, renderMarkdown(step.text.trim())) : el(
         "li",
-        { key: index, class: "assistant__step", "data-state": step2.state },
-        el("span", { class: "assistant__step-text" }, step2.text),
-        step2.detail ? el("code", { class: "assistant__step-detail", title: step2.detail }, step2.detail) : null
+        { key: index, class: "assistant__step", "data-state": step.state },
+        el("span", { class: "assistant__step-text" }, step.text),
+        step.detail ? el("code", { class: "assistant__step-detail", title: step.detail }, step.detail) : null
       )
     )
   );
@@ -4299,6 +4524,430 @@ function splitCreated(reply) {
   return { body: created.length ? kept.join("\n").trim() : reply, created };
 }
 
+// client/onboarding.ts
+var SECONDS_PER_STEP = 20;
+function OnboardingView({ state: state2, ui: ui2, handlers: handlers2 }) {
+  const flow = state2.onboarding;
+  const open = flow.steps.filter((step) => step.status === "open");
+  const editing = ui2.setupEditing.value;
+  h2(() => {
+    if (!flow.detected) handlers2.detectSetup();
+  }, [flow.detected]);
+  return el(
+    "div",
+    { class: "onboarding" },
+    el(
+      "header",
+      { class: "onboarding__bar" },
+      el("span", { class: "onboarding__name" }, "Daily Focus"),
+      progress(flow)
+    ),
+    el(
+      "main",
+      { class: "onboarding__column", id: "main" },
+      flow.steps.length > 0 && flow.steps.every((step) => step.status === "open") && flow.steps[0].id === flow.current ? el(
+        "p",
+        { class: "onboarding__lede" },
+        "Each morning an agent reads your mail, calendar, pull requests and the rest, and writes a short brief of what needs doing today. A few questions get it ready; most are answered already, so confirm or change them."
+      ) : null,
+      el(
+        "ol",
+        { class: "onboarding__thread" },
+        flow.steps.map((step) => {
+          if (step.id === flow.current || step.id === editing) {
+            return el("li", { key: step.id }, k(StepCard, { step, ui: ui2, handlers: handlers2, current: step.id === flow.current }));
+          }
+          if (step.status === "open") return null;
+          return el("li", { key: step.id }, doneRow(step, handlers2, ui2.setupBusy.value !== null));
+        }),
+        flow.current === null ? el("li", { key: "finish" }, k(FinishCard, { flow, ui: ui2, handlers: handlers2 })) : ahead(flow, open)
+      )
+    )
+  );
+}
+function progress(flow) {
+  const total = flow.steps.length + 1;
+  const left = flow.steps.filter((step) => step.status === "open").length;
+  const seconds = left * SECONDS_PER_STEP;
+  const text = flow.current === null ? "Ready when you are" : seconds < 60 ? "Under a minute left" : seconds < 120 ? "About a minute left" : `About ${Math.round(seconds / 60)} minutes left`;
+  const done = total - left - (flow.current === null ? 0 : 1);
+  return el(
+    "div",
+    { class: "onboarding__progress" },
+    el(
+      "div",
+      { class: "onboarding__track", role: "progressbar", "aria-valuemin": 0, "aria-valuemax": total, "aria-valuenow": done, "aria-label": "Setup" },
+      el("i", { style: { width: `${Math.round(done / total * 100)}%` } })
+    ),
+    el("span", null, text)
+  );
+}
+function doneRow(step, handlers2, busy) {
+  return el(
+    "div",
+    { class: "onboarding__done", "data-status": step.status, "data-step": step.id },
+    el("span", { class: "onboarding__dot", "aria-hidden": "true" }),
+    el("span", { class: "onboarding__summary" }, step.summary ?? `${step.topic[0].toUpperCase()}${step.topic.slice(1)}: decide later.`),
+    el("button", { type: "button", class: "onboarding__change", disabled: busy, onClick: () => handlers2.editSetupStep(step.id) }, "Change")
+  );
+}
+function ahead(flow, open) {
+  const rest = open.filter((step) => step.id !== flow.current);
+  const looking = rest.find((step) => step.proposal?.status === "working");
+  const topics = rest.filter((step) => step !== looking).map((step) => step.topic);
+  const later = topics.length > 4 ? [...topics.slice(0, 3), `${topics.length - 3} more`] : topics;
+  return el(
+    "li",
+    { key: "ahead", class: "onboarding__ahead" },
+    looking ? el(
+      "div",
+      { class: "onboarding__next" },
+      el("span", { class: "onboarding__dot onboarding__dot--looking", "aria-hidden": "true" }),
+      el("p", null, `Next, ${looking.topic}. It's already looking:`),
+      steps(looking)
+    ) : null,
+    el(
+      "p",
+      { class: "onboarding__then" },
+      el("span", { class: "onboarding__dot onboarding__dot--later", "aria-hidden": "true" }),
+      later.length ? `Then ${listed([...later, "your first brief"])}.` : "Then your first brief."
+    )
+  );
+}
+function steps(step, count = 3) {
+  const shown = (step.proposal?.steps ?? []).filter((s4) => s4.kind === "tool").slice(-count);
+  const waiting = step.proposal?.status === "working" && !shown.some((s4) => s4.state === "running");
+  return el(
+    "ul",
+    { class: "onboarding__steps" },
+    shown.map((s4, index) => el("li", { key: index, "data-state": s4.state, title: s4.detail ?? void 0 }, s4.text)),
+    waiting ? el("li", { key: "waiting", "data-state": "running" }, shown.length ? "Writing its answer\u2026" : "Starting\u2026") : null
+  );
+}
+function listed(names) {
+  if (names.length <= 1) return names.join("");
+  return `${names.slice(0, -1).join(", ")} and ${names.at(-1)}`;
+}
+function baseAnswer(step) {
+  if (step.answer && step.answer.later !== true) return step.answer;
+  return {
+    choices: Object.fromEntries(step.card.choices.map((choice) => [choice.id, choice.selected])),
+    fields: Object.fromEntries(step.card.fields.map((field) => [field.id, field.value]))
+  };
+}
+function StepCard({ step, ui: ui2, handlers: handlers2, current }) {
+  const saved = ui2.setupDrafts.value.get(step.id);
+  const draft = saved?.answer ?? baseAnswer(step);
+  const stale = saved !== void 0 && saved.version !== step.card.version;
+  const busy = ui2.setupBusy.value !== null;
+  const error = ui2.setupError.value?.step === step.id ? ui2.setupError.value.message : null;
+  const editing = ui2.setupEditing.value === step.id;
+  const proposal = step.proposal;
+  const looking = proposal?.status === "working";
+  const edit = (next) => handlers2.editSetupDraft(step.id, next, saved?.version ?? step.card.version);
+  const tell = ui2.setupTell.value.get(step.id) ?? "";
+  const empty = step.card.choices.every((choice) => choice.options.length === 0) && step.card.fields.length === 0;
+  const conversation = proposal?.conversation ?? [];
+  const revising = conversation.at(-1)?.from === "you";
+  const confirming = looking && ui2.setupConfirm.value === step.id;
+  const held = busy ? "Saving your last answer\u2026" : empty && looking ? "Still looking; this fills in when it is done" : empty && step.card.problem?.blocking ? "Fix what it says above, or decide later" : null;
+  return el(
+    "section",
+    { class: "onboarding__card", "data-current": String(current), "data-step": step.id, "aria-labelledby": `setup-${step.id}` },
+    el("span", { class: "onboarding__dot onboarding__dot--open", "aria-hidden": "true" }),
+    el("h2", { id: `setup-${step.id}`, tabIndex: -1 }, step.title),
+    conversation.length ? el(
+      "ol",
+      { class: "onboarding__talk" },
+      conversation.map(
+        (line, index) => line.from === "it" ? el("li", { key: index, class: "onboarding__why" }, sparkle(), el("span", null, line.text)) : el("li", { key: index, class: "onboarding__said" }, line.text)
+      )
+    ) : step.card.why && !(looking && empty) ? el("p", { class: "onboarding__why" }, sparkle(), el("span", null, step.card.why)) : null,
+    looking ? el(
+      "div",
+      { class: "onboarding__looking", role: "status" },
+      revising ? null : el("p", null, empty ? `Looking into ${step.topic}\u2026` : "Still looking. You can answer now, or wait for its pick."),
+      steps(step)
+    ) : null,
+    // Under what it said, so a reply reads as one, and what comes back lands here too.
+    step.card.revisable && !looking ? el(
+      "form",
+      {
+        class: "onboarding__tell",
+        onSubmit: (event) => {
+          event.preventDefault();
+          if (tell.trim() && !busy) handlers2.reviseSetup(step.id, tell, draft);
+        }
+      },
+      el("input", {
+        type: "text",
+        value: tell,
+        "aria-label": step.card.reply ?? "Tell it what to change",
+        placeholder: step.card.reply ?? "Tell it what to change",
+        onInput: (event) => handlers2.editSetupTell(step.id, event.currentTarget.value)
+      }),
+      el("button", { type: "submit", class: "button", disabled: busy || tell.trim() === "" }, "Send")
+    ) : null,
+    proposal?.status === "failed" ? el(
+      "p",
+      { class: "onboarding__note" },
+      `It couldn't look into this: ${proposal.error}. `,
+      el("button", { type: "button", class: "link-button", disabled: busy, onClick: () => handlers2.retrySetup(step.id) }, "Try again")
+    ) : null,
+    stale ? el(
+      "p",
+      { class: "onboarding__note" },
+      "It has a new suggestion since you started changing this. ",
+      el("button", { type: "button", class: "link-button", onClick: () => handlers2.editSetupDraft(step.id, null, 0) }, "Use it")
+    ) : null,
+    step.card.problem?.blocking ? problem(step, busy, handlers2) : null,
+    el(
+      "form",
+      {
+        class: "onboarding__form",
+        onSubmit: (event) => {
+          event.preventDefault();
+          if (busy) return;
+          if (looking && !confirming) return handlers2.confirmSetup(step.id);
+          handlers2.answerSetup(step.id, draft);
+        }
+      },
+      // Fields first: a card with both asks for the few words before the list.
+      step.card.fields.length ? el(
+        "div",
+        { class: "onboarding__fields" },
+        step.card.fields.map(
+          (field) => fieldView(field, draft.fields[field.id] ?? "", (value) => edit({ ...draft, fields: { ...draft.fields, [field.id]: value } }))
+        )
+      ) : null,
+      step.card.choices.map(
+        (choice) => k(ChoiceView, {
+          choice,
+          picked: draft.choices[choice.id] ?? [],
+          onPick: (values) => edit({ ...draft, choices: { ...draft.choices, [choice.id]: values } })
+        })
+      ),
+      step.card.problem && !step.card.problem.blocking ? problem(step, busy, handlers2) : null,
+      error ? el("p", { class: "onboarding__error", role: "alert" }, error) : null,
+      confirming ? el(
+        "div",
+        { class: "onboarding__actions onboarding__confirm", role: "alert" },
+        el("p", null, revising ? "It\u2019s still working on your change." : "It\u2019s still filling this in.", " Continue with what\u2019s here, and stop it?"),
+        el("button", { type: "submit", class: "button button--primary", disabled: busy }, "Continue without it"),
+        el("button", { type: "button", class: "button onboarding__quiet", onClick: () => handlers2.confirmSetup(null) }, "Wait for it")
+      ) : el(
+        "div",
+        { class: "onboarding__actions" },
+        el(
+          "button",
+          { type: "submit", class: "button button--primary", disabled: held !== null, title: held ?? void 0 },
+          ui2.setupBusy.value === step.id ? "Saving\u2026" : step.card.empty && step.card.fields.every((field) => !(draft.fields[field.id] ?? "").trim()) ? step.card.empty : "Continue"
+        ),
+        step.card.later ? el(
+          "button",
+          { type: "button", class: "button onboarding__quiet", disabled: busy, onClick: () => handlers2.answerSetup(step.id, { later: true }) },
+          step.card.later
+        ) : null,
+        editing ? el("button", { type: "button", class: "button onboarding__quiet", onClick: () => handlers2.editSetupStep(null) }, "Cancel") : null
+      )
+    )
+  );
+}
+function problem(step, busy, handlers2) {
+  const found = step.card.problem;
+  return el(
+    "div",
+    { class: "onboarding__problem", "data-blocking": String(found.blocking) },
+    el("p", null, found.message),
+    found.links?.length ? el(
+      "p",
+      { class: "onboarding__links" },
+      found.links.map((link) => el("a", { key: link.url, href: link.url, target: "_blank", rel: "noopener" }, link.label))
+    ) : null,
+    found.command ? el("pre", null, el("code", null, found.command)) : null,
+    el("button", { type: "button", class: "button", disabled: busy, onClick: () => handlers2.retrySetup(step.id) }, "Check again")
+  );
+}
+function sparkle() {
+  return el(
+    "svg",
+    { class: "onboarding__sparkle", width: 14, height: 14, viewBox: "0 0 14 14", "aria-hidden": "true" },
+    el("path", { d: "M7 0l1.6 5.4L14 7l-5.4 1.6L7 14l-1.6-5.4L0 7l5.4-1.6z", fill: "currentColor" })
+  );
+}
+function ChoiceView({ choice, picked, onPick }) {
+  const [adding, setAdding] = d2(false);
+  const [typed, setTyped] = d2("");
+  const known = new Set(choice.options.map((option) => option.value));
+  const own = picked.filter((value) => !known.has(value));
+  const toggle = (value) => {
+    if (!choice.multiple) return onPick([value]);
+    onPick(picked.includes(value) ? picked.filter((v4) => v4 !== value) : [...picked, value]);
+  };
+  const add = () => {
+    const value = typed.trim();
+    if (value) onPick(choice.multiple ? [...picked.filter((v4) => v4 !== value), value] : [value]);
+    setTyped("");
+    setAdding(false);
+  };
+  const adder = choice.custom ? adding ? el(
+    "div",
+    { class: "onboarding__add" },
+    el("input", {
+      type: "text",
+      value: typed,
+      placeholder: choice.custom,
+      "aria-label": choice.custom,
+      ref: (input) => input?.focus(),
+      onInput: (event) => setTyped(event.currentTarget.value),
+      onKeyDown: (event) => {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          add();
+        }
+        if (event.key === "Escape") setAdding(false);
+      }
+    }),
+    el("button", { type: "button", class: "button", onClick: add }, "Add")
+  ) : el("button", { type: "button", class: "onboarding__add-button", onClick: () => setAdding(true) }, choice.multiple ? choice.custom : "Other\u2026") : null;
+  const label = choice.label ? el("legend", { class: "onboarding__legend" }, choice.label) : null;
+  const rows = choice.multiple || choice.options.some((option) => option.detail);
+  if (!rows) {
+    return el(
+      "fieldset",
+      { class: "onboarding__choice" },
+      label,
+      el(
+        "div",
+        { class: "onboarding__pills", role: "radiogroup" },
+        [...choice.options, ...own.map((value) => ({ value, label: value, detail: null, group: null }))].map(
+          (option) => el(
+            "button",
+            {
+              type: "button",
+              key: option.value,
+              role: "radio",
+              class: "onboarding__pill",
+              "aria-checked": String(picked.includes(option.value)),
+              onClick: () => toggle(option.value)
+            },
+            option.label
+          )
+        ),
+        adder
+      )
+    );
+  }
+  const groups = /* @__PURE__ */ new Map();
+  for (const option of choice.options) groups.set(option.group, [...groups.get(option.group) ?? [], option]);
+  if (own.length) groups.set("Added by you", own.map((value) => ({ value, label: value, detail: null, group: "Added by you" })));
+  return el(
+    "fieldset",
+    { class: "onboarding__choice" },
+    label,
+    el(
+      "div",
+      { class: "onboarding__list" },
+      [...groups].map(
+        ([group, options]) => el(
+          "div",
+          { class: "onboarding__group", key: group ?? "" },
+          group ? el("p", { class: "onboarding__group-name" }, group) : null,
+          options.map(
+            (option) => el(
+              "label",
+              { class: "onboarding__option", key: option.value },
+              el("input", {
+                type: choice.multiple ? "checkbox" : "radio",
+                name: choice.id,
+                checked: picked.includes(option.value),
+                onChange: () => toggle(option.value)
+              }),
+              el("span", { class: "onboarding__box", "data-kind": choice.multiple ? "check" : "radio", "aria-hidden": "true" }),
+              el("span", { class: "onboarding__option-text" }, option.label, option.detail ? el("small", null, option.detail) : null)
+            )
+          )
+        )
+      ),
+      choice.options.length === 0 && own.length === 0 && !choice.custom ? el("p", { class: "onboarding__none" }, "Nothing to choose from.") : null,
+      adder ? el("div", { class: "onboarding__adder" }, adder) : null
+    )
+  );
+}
+function fieldView(field, value, onInput) {
+  return el(
+    "div",
+    { class: "onboarding__field", key: field.id },
+    el(
+      "label",
+      null,
+      el("span", { class: "onboarding__field-label" }, field.label),
+      el("input", {
+        type: "text",
+        value,
+        placeholder: field.placeholder ?? void 0,
+        onInput: (event) => onInput(event.currentTarget.value)
+      })
+    ),
+    field.help ? el("small", null, field.help) : null,
+    // Offered, never filled in: a click puts one in the field, to edit or keep.
+    field.suggestions?.length ? el(
+      "ul",
+      { class: "onboarding__suggestions" },
+      field.suggestions.map(
+        (suggestion) => el(
+          "li",
+          { key: suggestion.text },
+          el(
+            "button",
+            { type: "button", "aria-pressed": String(value === suggestion.text), onClick: () => onInput(suggestion.text) },
+            el("span", null, suggestion.text),
+            suggestion.detail ? el("small", null, suggestion.detail) : null
+          )
+        )
+      )
+    ) : null
+  );
+}
+function FinishCard({ flow, ui: ui2, handlers: handlers2 }) {
+  const writes = flow.steps.find((step) => step.id === "cli")?.status === "answered";
+  const busy = ui2.setupBusy.value !== null;
+  const error = (ui2.setupError.value?.step === "finish" ? ui2.setupError.value.message : null) ?? flow.error;
+  const sources = ui2.setupSources.value;
+  return el(
+    "section",
+    { class: "onboarding__card onboarding__finish", "data-current": "true", "aria-labelledby": "setup-finish" },
+    el("span", { class: "onboarding__dot onboarding__dot--open", "aria-hidden": "true" }),
+    el("h2", { id: "setup-finish", tabIndex: -1 }, writes ? "Ready for your first brief" : "Ready to finish"),
+    el(
+      "p",
+      { class: "onboarding__why" },
+      writes ? "It takes a few minutes, and you can watch it work. After that it runs by itself, and everything here can be changed in Settings." : "Without an agent there is no brief to write yet. Choose one in Settings when you are ready; the boards work meanwhile."
+    ),
+    el(
+      "details",
+      {
+        class: "onboarding__preview",
+        onToggle: (event) => {
+          if (event.currentTarget.open && sources === null) handlers2.loadSetupSources();
+        }
+      },
+      el("summary", null, "What the morning agent reads each morning"),
+      sources === null || sources === "loading" ? el("p", null, "Loading\u2026") : "error" in sources ? el("p", null, `Could not show it: ${sources.error}`) : sources.kept ? el("p", null, "Your source list is already written, and setup leaves it as it is.") : sources.text ? el("pre", null, sources.text) : el("p", null, "Nothing yet: the agent briefs from what it can reach, and says what it missed.")
+    ),
+    error ? el("p", { class: "onboarding__error", role: "alert" }, error) : null,
+    el(
+      "div",
+      { class: "onboarding__actions" },
+      el(
+        "button",
+        { type: "button", class: "button button--primary", disabled: busy, onClick: () => handlers2.finishSetup() },
+        ui2.setupBusy.value === "finish" ? "Saving\u2026" : writes ? "Write my first brief" : "Finish setup"
+      )
+    )
+  );
+}
+
 // client/settings.ts
 var VIEW_NAME = {
   today: "Today",
@@ -4313,6 +4962,11 @@ function SettingsView({ state: state2, ui: ui2, handlers: handlers2 }) {
   }, []);
   const page = ui2.settings.value;
   const draft = ui2.settingsDraft.value;
+  const sections = [
+    { id: "objective", title: "Your objective" },
+    { id: "sources", title: "Where the agent looks" },
+    ...page?.groups ?? []
+  ];
   return el(
     "div",
     { class: "settings" },
@@ -4322,6 +4976,7 @@ function SettingsView({ state: state2, ui: ui2, handlers: handlers2 }) {
       el("h2", { class: "settings__title" }, "Settings"),
       el("button", { type: "button", class: "button", onClick: () => handlers2.closeSettings() }, `Back to ${VIEW_NAME[ui2.settingsReturn.value]}`)
     ),
+    k(SectionIndex, { sections }),
     page?.error ? el("p", { class: "settings__problem", role: "alert" }, page.error) : null,
     objectiveCard(state2, ui2, handlers2),
     sourcesCard(state2, ui2, handlers2),
@@ -4346,6 +5001,29 @@ function SettingsView({ state: state2, ui: ui2, handlers: handlers2 }) {
     saveBar(ui2, handlers2)
   );
 }
+function SectionIndex({ sections }) {
+  const [current, setCurrent] = d2(sections[0]?.id ?? null);
+  h2(() => {
+    const look = () => {
+      let seen = sections[0]?.id ?? null;
+      for (const section2 of sections) {
+        const card = document.getElementById(`settings-${section2.id}`);
+        if (card && card.getBoundingClientRect().top <= 120) seen = section2.id;
+      }
+      setCurrent(seen);
+    };
+    look();
+    window.addEventListener("scroll", look, { passive: true });
+    return () => window.removeEventListener("scroll", look);
+  }, [sections.map((section2) => section2.id).join(" ")]);
+  return el(
+    "nav",
+    { class: "settings__nav", "aria-label": "Settings sections" },
+    sections.map(
+      (section2) => el("a", { key: section2.id, href: `#settings-${section2.id}`, "aria-current": section2.id === current ? "true" : void 0 }, section2.title)
+    )
+  );
+}
 function objectiveCard(state2, ui2, handlers2) {
   const focus = state2.focus;
   return el(
@@ -4373,7 +5051,7 @@ function objectiveCard(state2, ui2, handlers2) {
     )
   );
 }
-function objectiveForm(objective, blocker, handlers2, label = "Save objective") {
+function objectiveForm(objective, blocker, handlers2) {
   return el(
     "form",
     {
@@ -4404,7 +5082,7 @@ ${blocker}`,
       el("span", { class: "field__label" }, "Blocked on (optional)"),
       el("input", { class: "field__input", name: "blocker", defaultValue: blocker, placeholder: "What is in the way today, if anything", autocomplete: "off" })
     ),
-    el("div", { class: "objective-form__actions" }, el("button", { type: "submit", class: "button button--primary" }, label))
+    el("div", { class: "objective-form__actions" }, el("button", { type: "submit", class: "button button--primary" }, "Save objective"))
   );
 }
 function sourcesCard(state2, ui2, handlers2) {
@@ -4474,13 +5152,14 @@ function shownValue(setting, draft) {
   if (draft.has(setting.key)) return draft.get(setting.key) ?? "";
   return setting.source === "default" ? "" : setting.value ?? "";
 }
+var SEGMENTS = 4;
 function flagValue(raw) {
   if (raw === "") return "";
   return ["off", "false", "0", "no"].includes(raw.trim().toLowerCase()) ? "off" : "on";
 }
 function settingField(setting, draft, handlers2) {
   const id = `setting-${setting.key}`;
-  const locked = setting.source === "environment";
+  const locked = setting.source === "fixed";
   const value = shownValue(setting, draft);
   const onChange = (event) => {
     const next = event.currentTarget.value;
@@ -4488,13 +5167,36 @@ function settingField(setting, draft, handlers2) {
   };
   let input;
   if (setting.kind === "choice" || setting.kind === "flag") {
-    const choices2 = setting.kind === "flag" ? [{ value: "on", label: "On" }, { value: "off", label: "Off" }] : setting.choices ?? [];
+    const choices = setting.kind === "flag" ? [{ value: "on", label: "On" }, { value: "off", label: "Off" }] : setting.choices ?? [];
     const current = setting.kind === "flag" ? flagValue(value) : value;
-    input = el(
+    const fallback = choices.find((choice) => choice.label.toLowerCase() === setting.fallback.toLowerCase());
+    input = choices.length <= SEGMENTS && fallback ? el(
+      "div",
+      { class: "segmented", id, role: "radiogroup", "aria-label": setting.label, "aria-disabled": String(locked) },
+      choices.map((choice) => {
+        const isDefault = choice.value === fallback.value;
+        const checked = current === "" ? isDefault : current === choice.value;
+        return el(
+          "button",
+          {
+            type: "button",
+            key: choice.value,
+            role: "radio",
+            class: "segmented__option",
+            "aria-checked": String(checked),
+            disabled: locked,
+            title: isDefault ? "The default" : void 0,
+            onClick: () => handlers2.editSetting(setting.key, isDefault ? null : choice.value)
+          },
+          choice.label,
+          checked && current === "" ? el("small", null, "default") : null
+        );
+      })
+    ) : el(
       "select",
       { class: "field__input", id, disabled: locked, value: current, onChange },
       el("option", { value: "" }, `Default: ${setting.fallback}`),
-      choices2.map((choice) => el("option", { value: choice.value, key: choice.value }, choice.label))
+      choices.map((choice) => el("option", { value: choice.value, key: choice.value }, choice.label))
     );
   } else {
     input = el("input", {
@@ -4510,7 +5212,7 @@ function settingField(setting, draft, handlers2) {
       onInput: onChange
     });
   }
-  const note = setting.source === "environment" ? "Set in the environment this dashboard was started with, which wins over this page." : setting.source === "dotenv" && !draft.has(setting.key) ? "From the .env file. Saving a value here takes its place." : null;
+  const note = locked ? "Fixed in the demo, so that nothing in it runs." : null;
   return el(
     "div",
     { class: "field", key: setting.key, "data-changed": String(draft.has(setting.key)) },
@@ -4533,9 +5235,9 @@ function calendarPicker(state2, ui2, handlers2, settings) {
     );
   }
   const setting = settings.find((entry) => entry.key === "DAILY_FOCUS_CALENDARS");
-  if (!setting || setting.source === "environment") return null;
+  if (!setting || setting.source === "fixed") return null;
   const chosen = shownValue(setting, ui2.settingsDraft.value).split(",").map((name) => name.trim()).filter(Boolean);
-  const listed = ui2.calendars.value;
+  const listed2 = ui2.calendars.value;
   const toggle = (title, on) => {
     const others = chosen.filter((name) => name.toLowerCase() !== title.toLowerCase());
     const next = on ? [...others, title] : others;
@@ -4545,11 +5247,11 @@ function calendarPicker(state2, ui2, handlers2, settings) {
     "div",
     { class: "calendar-picker" },
     el("button", { type: "button", class: "button", onClick: () => handlers2.listCalendars() }, "List the calendars on this Mac"),
-    typeof listed === "string" ? el("p", { class: "settings-card__warning" }, listed) : null,
-    Array.isArray(listed) ? el(
+    typeof listed2 === "string" ? el("p", { class: "settings-card__warning" }, listed2) : null,
+    Array.isArray(listed2) ? el(
       "ul",
       { class: "calendar-picker__list" },
-      listed.map(
+      listed2.map(
         (entry) => el(
           "li",
           { key: `${entry.title}
@@ -4592,249 +5294,61 @@ function saveBar(ui2, handlers2) {
 }
 
 // client/setup.ts
-var CLI_LABEL = { claude: "Claude Code", codex: "Codex" };
-function SetupCard({ state: state2, ui: ui2, handlers: handlers2 }) {
-  const setup = state2.setup;
+function FirstBriefCard({ state: state2, handlers: handlers2 }) {
   const agent = state2.agentRun;
-  const running = agent.last?.status === "running";
-  const placeholders = setup.sources.exists && setup.sources.placeholders > 0;
-  return el(
-    "section",
-    { class: "setup", id: "setup", "aria-labelledby": "setup-title" },
-    el("h2", { class: "setup__title", id: "setup-title" }, "Set up your morning brief"),
-    el(
-      "p",
-      { class: "setup__lede" },
-      "Each morning an agent reads your mail, calendar, pull requests and the rest, and writes a short brief of what needs to get done today. The steps below get it ready for its first run. Everything here can be changed later in ",
-      el("button", { type: "button", class: "link-button", onClick: () => handlers2.openSettings() }, "Settings"),
-      "."
-    ),
-    el(
-      "ol",
-      { class: "setup__steps" },
-      step(
-        setup.profileChosen,
-        "What should it brief?",
-        setup.profileChosen ? el("p", null, setup.profile === "personal" ? "Your personal life." : "Your work.") : [
-          el(
-            "p",
-            null,
-            "Work, or home: mail, family calendars, reminders and messages. Run a second dashboard for the other one."
-          ),
-          // A choice, so neither answer is drawn as the one to pick.
-          choices([
-            ["Work", () => handlers2.chooseSettings({ DAILY_FOCUS_PROFILE: "work" })],
-            ["Personal life", () => handlers2.chooseSettings({ DAILY_FOCUS_PROFILE: "personal" })]
-          ])
-        ]
-      ),
-      step(
-        Boolean(state2.focus?.objective),
-        "What are you trying to achieve?",
-        state2.focus?.objective ? el("p", null, state2.focus.objective) : [
-          el("p", null, "The agent ranks the day against it. Leave it for now if nothing stands out."),
-          objectiveForm("", "", handlers2, "Set objective")
-        ]
-      ),
-      step(
-        agent.cli !== null,
-        "Which agent writes the brief?",
-        agent.cli ? [
-          el(
-            "p",
-            null,
-            `${CLI_LABEL[agent.cli]}. ` + (agent.schedule ? `After the first brief, it runs by itself each scheduled morning at ${agent.schedule.at}. ` : "It runs when you press refresh. ") + "It has to be logged in; the first run says if it is not."
-          ),
-          agentAdvanced(agent.cli, ui2, handlers2)
-        ] : agentChoice(state2, handlers2)
-      ),
-      step(setup.sources.exists && setup.sources.placeholders === 0, "Who are you, and where should it look?", sourcesStep(state2, ui2, handlers2)),
-      step(null, "What else should the dashboard show?", boards(state2, handlers2)),
-      step(
-        null,
-        "Your first brief",
-        [
-          el(
-            "p",
-            null,
-            running ? "The morning agent is writing it now. Click the banner above to watch." : 'The morning agent writes it now, which takes a few minutes, and from then on by itself every scheduled morning. When it is done, click "updated \u2026 ago" at the top to read its report: what it found, and anything it could not reach.' + (setup.sources.exists ? "" : " Without a source list it briefs from what it can reach on its own, and says what it missed.")
-          ),
-          placeholders ? el("p", { class: "setup__note setup__note--todo" }, "Replace the source list's placeholders first, or the agent goes looking for them.") : null,
-          el(
-            "button",
-            {
-              type: "button",
-              class: "button button--primary",
-              disabled: !agent.enabled || running || state2.restart === "waiting" || placeholders,
-              title: !agent.enabled ? "Choose the agent first" : placeholders ? "Replace the source list's placeholders first" : void 0,
-              onClick: () => handlers2.runAgent()
-            },
-            running ? "Running\u2026" : "Run the morning agent now"
-          )
-        ]
-      )
-    )
-  );
-}
-function step(done, title, body) {
-  return el(
-    "li",
-    { class: "setup__step", "data-done": done === null ? void 0 : String(done) },
-    el(
-      "span",
-      { class: "setup__mark", "aria-label": done === null ? void 0 : done ? "Done" : "To do" },
-      done === null ? "\xB7" : done ? "\u2713" : "\u25CB"
-    ),
-    el("div", { class: "setup__body" }, el("h3", { class: "setup__step-title" }, title), body)
-  );
-}
-function choices(options) {
-  return el(
-    "div",
-    { class: "setup__choices" },
-    options.map(([label, onClick, title]) => el("button", { type: "button", class: "button", key: label, title, onClick }, label))
-  );
-}
-function agentChoice(state2, handlers2) {
-  const found = ["claude", "codex"].filter((cli) => state2.setup.clis[cli]);
-  if (found.length === 0) {
-    return [
-      el(
-        "p",
-        null,
-        "The brief is written by a coding-agent CLI you already use. Install ",
-        el("a", { href: "https://code.claude.com/docs", target: "_blank", rel: "noopener" }, "Claude Code"),
-        " or the ",
-        el("a", { href: "https://developers.openai.com/codex/cli", target: "_blank", rel: "noopener" }, "Codex CLI"),
-        ", log in, and restart the dashboard; it looks for both each time it starts."
-      )
+  const last = agent.last;
+  const running = last?.status === "running";
+  const restarting = state2.restart === "waiting";
+  let title;
+  let text;
+  let actions;
+  if (restarting) {
+    title = "Saving your settings";
+    text = "The dashboard restarts to apply them, then starts on your first brief.";
+    actions = [];
+  } else if (!agent.enabled) {
+    title = "Choose who writes your brief";
+    text = "Each morning a coding-agent CLI you already use writes it: Claude Code or Codex. The boards work meanwhile.";
+    actions = [el("button", { type: "button", class: "button button--primary", onClick: () => handlers2.openSettings("agent") }, "Choose in Settings")];
+  } else if (running) {
+    title = "Writing your first brief";
+    text = "The morning agent is reading your mail, calendar and the rest. It takes a few minutes; the brief appears here when it is done.";
+    actions = [el("button", { type: "button", class: "button", onClick: () => handlers2.openRun(last.id) }, "Watch it work")];
+  } else if (last && last.status !== "done") {
+    title = "Your first brief didn\u2019t finish";
+    text = last.status === "aborted" ? "It was stopped before it wrote a brief." : last.error ? `The run failed: ${last.error}.` : "The run stopped before it wrote a brief.";
+    actions = [
+      el("button", { type: "button", class: "button button--primary", onClick: () => handlers2.runAgent() }, "Try again"),
+      el("button", { type: "button", class: "button", onClick: () => handlers2.openRun(last.id) }, "Read its report")
     ];
+  } else if (last) {
+    title = "Your first brief didn\u2019t arrive";
+    text = "The run finished without a brief this dashboard could read. Its report says why.";
+    actions = [
+      el("button", { type: "button", class: "button button--primary", onClick: () => handlers2.runAgent() }, "Run it again"),
+      el("button", { type: "button", class: "button", onClick: () => handlers2.openRun(last.id) }, "Read its report")
+    ];
+  } else {
+    title = "Write your first brief";
+    text = "It takes a few minutes. After that it runs by itself each scheduled morning.";
+    actions = [el("button", { type: "button", class: "button button--primary", onClick: () => handlers2.runAgent() }, "Write it now")];
   }
-  return [
-    el("p", null, "The dashboard runs a coding-agent CLI you already use, headless, each morning. Found on this machine:"),
-    choices(
-      found.map(
-        (cli) => [`Use ${CLI_LABEL[cli]}`, () => handlers2.chooseSettings({ DAILY_FOCUS_AGENT: cli }), state2.setup.clis[cli] ?? void 0]
-      )
-    )
-  ];
-}
-var AGENT_ADVANCED = "setup:agent-advanced";
-function agentAdvanced(cli, ui2, handlers2) {
-  const keys = ["DAILY_FOCUS_AGENT_MODEL", "DAILY_FOCUS_AGENT_EFFORT", ...cli === "claude" ? ["DAILY_FOCUS_AGENT_TOOLS"] : []];
-  const page = ui2.settings.value;
-  const draft = ui2.settingsDraft.value;
-  const changed = keys.some((key) => draft.has(key));
-  const error = changed ? ui2.settingsError.value : null;
-  return el(
-    "details",
-    {
-      class: "setup__advanced",
-      open: ui2.openDrawers.value.has(AGENT_ADVANCED),
-      onToggle: (event) => {
-        const open = event.currentTarget.open;
-        if (open && !ui2.settings.peek()) handlers2.loadSettings();
-        handlers2.toggleDrawer(AGENT_ADVANCED, open);
-      }
-    },
-    el("summary", null, cli === "claude" ? "Advanced: model, effort and tools" : "Advanced: model and effort"),
-    page ? [
-      ...keys.flatMap((key) => {
-        const setting = page.settings.find((entry) => entry.key === key);
-        return setting ? [settingField(setting, draft, handlers2)] : [];
-      }),
-      error ? el("p", { class: "setup__note setup__note--todo", role: "alert" }, error) : null,
-      el(
-        "div",
-        { class: "setup__advanced-actions" },
-        el(
-          "button",
-          { type: "button", class: "button", disabled: !changed || ui2.settingsSaving.value, onClick: () => handlers2.saveSettings(keys) },
-          ui2.settingsSaving.value ? "Saving\u2026" : "Save"
-        )
-      )
-    ] : el("p", null, "Loading the settings\u2026")
-  );
-}
-var SOURCES_EDITOR = "setup:sources";
-function sourcesStep(state2, ui2, handlers2) {
-  const sources = state2.setup.sources;
-  const open = ui2.openDrawers.value.has(SOURCES_EDITOR);
-  const toggle = () => {
-    if (!open && !ui2.texts.value.sources) handlers2.loadText("sources");
-    handlers2.toggleDrawer(SOURCES_EDITOR, !open);
-  };
-  return [
-    el(
-      "p",
-      null,
-      "A short list the agent reads every morning. First who you are: your name as meeting notes write it, your email and your GitHub login, so it can tell your to-dos from everyone else's. Then where to look: which calendars, mailboxes and documents are yours."
-    ),
-    sources.exists ? el(
-      "p",
-      { class: sources.placeholders > 0 ? "setup__note setup__note--todo" : "setup__note" },
-      sources.placeholders > 0 ? `It still has ${sources.placeholders} of the template's placeholders. Replace them, or delete what doesn't apply.` : "Written."
-    ) : el("p", { class: "setup__note" }, "It starts from a template, with what gh and git know about you already filled in."),
-    el(
-      "button",
-      { type: "button", class: "button", "aria-expanded": String(open), onClick: toggle },
-      open ? "Close" : sources.exists ? "Edit it" : "Write it"
-    ),
-    open ? el("div", { class: "setup__editor" }, textEditor("sources", ui2.texts.value.sources, handlers2, "sources.md")) : null
-  ];
-}
-var HEALTH_MARK = { ok: "\u2713", checking: "\u2026", problem: "!", todo: "\u25CB" };
-var HEALTH_LABEL = {
-  ok: "Connected",
-  checking: "Checking",
-  problem: "Not working",
-  todo: "To do"
-};
-function boardHealth(board, via, service) {
-  if (board.reason) return ["problem", board.reason.message];
-  if (board.fetchedAt) return ["ok", `Connected, through ${via}.`];
-  return ["checking", `Checking ${service} through ${via}\u2026`];
-}
-function boards(state2, handlers2) {
-  const rows = [];
-  const off = (key, label) => el("button", { type: "button", class: "button", onClick: () => handlers2.chooseSettings({ [key]: "off" }) }, `Turn off ${label}`);
-  if (state2.board.enabled) {
-    rows.push(boardRow("Pull requests", ...boardHealth(state2.board, "gh", "GitHub"), off("DAILY_FOCUS_GITHUB", "the pull request board")));
-  }
-  if (state2.tickets.enabled) {
-    rows.push(boardRow("Jira tickets", ...boardHealth(state2.tickets, "acli", "Jira"), off("DAILY_FOCUS_JIRA", "the Jira board")));
-  }
-  const calendar = state2.setup.calendar;
-  if (calendar.supported && state2.agendaSource) {
-    const live = state2.agendaSource.live;
-    const [health, text] = !calendar.built ? ["todo", `Needs the calendar helper: run ${calendar.buildCommand} once. Until then the agenda uses the brief.`] : calendar.chosen === 0 ? ["todo", "No calendars chosen yet. Choose them, and the agenda follows them live."] : live ? ["ok", `Connected, reading ${calendar.chosen} ${calendar.chosen === 1 ? "calendar" : "calendars"} from Calendar.app.`] : state2.agendaSource.problem ? ["problem", state2.agendaSource.problem] : ["checking", "Checking Calendar.app\u2026"];
-    rows.push(
-      boardRow(
-        "Calendar",
-        health,
-        text,
-        calendar.built && calendar.chosen === 0 ? el("button", { type: "button", class: "button", onClick: () => handlers2.openSettings("calendar") }, "Choose calendars") : off("DAILY_FOCUS_CALENDAR", "the live agenda")
-      )
-    );
-  }
-  if (rows.length === 0) return el("p", null, "Nothing else is switched on. The boards can be turned on in Settings.");
-  return el("ul", { class: "setup__boards" }, rows);
-}
-function boardRow(name, health, text, action) {
   return el(
-    "li",
-    { class: "setup__board", "data-health": health, key: name },
-    el("span", { class: "setup__board-mark", "aria-label": HEALTH_LABEL[health], title: HEALTH_LABEL[health] }, HEALTH_MARK[health]),
-    el("span", { class: "setup__board-name" }, name),
-    el("span", { class: "setup__board-text" }, text),
-    action
+    "section",
+    { class: "first-brief", id: "first-brief", "aria-labelledby": "first-brief-title", "data-state": running ? "running" : "idle" },
+    el("h2", { class: "first-brief__title", id: "first-brief-title" }, title),
+    el("p", { class: "first-brief__text" }, text),
+    actions.length ? el("div", { class: "first-brief__actions" }, actions) : null
   );
 }
 
 // client/today.ts
 function TodayView({ state: state2, ui: ui2, handlers: handlers2 }) {
-  if (state2.setup?.needed) return [k(SetupCard, { state: state2, ui: ui2, handlers: handlers2 })];
-  return [renderObjective(state2, handlers2), renderStats(state2), renderHeadline(state2), renderSections(state2, ui2, handlers2)];
+  if (state2.setup?.needed) return [k(FirstBriefCard, { state: state2, handlers: handlers2 })];
+  return [
+    el("div", { class: "today__masthead" }, renderObjective(state2, handlers2), renderStats(state2), renderHeadline(state2)),
+    renderSections(state2, ui2, handlers2)
+  ];
 }
 function renderObjective(state2, handlers2 = null) {
   const focus = state2.focus;
@@ -4890,15 +5404,15 @@ function focusTimeStat(agenda, now) {
   const tone = minutes === 0 ? "critical" : minutes < 60 ? "critical" : null;
   return stat("Focus time left", minutes === 0 ? "None" : formatDuration(minutes), tone, `Day ends ${agenda.dayEnd}`);
 }
-function objectiveStat(progress) {
-  if (!progress) return null;
-  if (progress.workingDaysSince === null) {
+function objectiveStat(progress2) {
+  if (!progress2) return null;
+  if (progress2.workingDaysSince === null) {
     return stat("Since objective progress", "\u2014", null, "Nothing recorded yet");
   }
-  const days = progress.workingDaysSince;
+  const days = progress2.workingDaysSince;
   const tone = days === 0 ? "good" : days >= 3 ? "critical" : null;
   const value = days === 0 ? "Today" : days === 1 ? "1 day" : `${days} days`;
-  return stat("Since objective progress", value, tone, progress.lastTitle);
+  return stat("Since objective progress", value, tone, progress2.lastTitle);
 }
 function renderHeadline(state2) {
   const headline = state2.brief.headline;
@@ -4953,10 +5467,12 @@ function App({ ui: ui2, handlers: handlers2 }) {
   const view = ui2.view.value;
   const run = current ? detailRun(current, ui2) : null;
   const row = current && !run ? detailRow(current, ui2) : null;
+  if (current?.onboarding) return [k(OnboardingView, { state: current, ui: ui2, handlers: handlers2 }), k(Toast, { ui: ui2, handlers: handlers2 })];
   return [
     el("a", { class: "skip-link", href: "#main" }, "Skip to content"),
-    k(Header, { state: current, ui: ui2, handlers: handlers2 }),
-    k(Tabs, { state: current, ui: ui2, handlers: handlers2 }),
+    // The band: the masthead's navy runs behind both, and on Today on behind
+    // the objective below (see `.band` in the stylesheet).
+    el("div", { class: "band" }, k(Header, { state: current, ui: ui2, handlers: handlers2 }), k(Tabs, { state: current, ui: ui2, handlers: handlers2 })),
     el("div", { id: "banners", class: "banners" }, current ? renderBanners(current, ui2, handlers2) : null),
     el(
       "main",
@@ -5116,12 +5632,12 @@ function installKeyboard(handlers2) {
     }
     const item = selectedItem();
     if (!item) return;
-    const boardRow2 = ui.view.value !== "today";
+    const boardRow = ui.view.value !== "today";
     const status = "status" in item ? item.status : null;
     switch (event.key) {
       case "e":
         event.preventDefault();
-        if (!boardRow2 && status === "open") handlers2.onAction(item.id, "done");
+        if (!boardRow && status === "open") handlers2.onAction(item.id, "done");
         break;
       case "s":
         event.preventDefault();
@@ -5129,7 +5645,7 @@ function installKeyboard(handlers2) {
         break;
       case "x":
         event.preventDefault();
-        if (!boardRow2 && status === "open") handlers2.onAction(item.id, "dismiss");
+        if (!boardRow && status === "open") handlers2.onAction(item.id, "dismiss");
         break;
       case "n":
         event.preventDefault();
@@ -5159,6 +5675,9 @@ R(k(App, { ui, handlers }), root);
 j3(() => {
   document.body.dataset.view = ui.view.value;
 });
+j3(() => {
+  document.body.dataset.onboarding = String(Boolean(state.value?.onboarding));
+});
 j3(() => {
   document.body.dataset.offline = String(ui.connectionError.value !== null);
 });