Merge main, the delete stack, #63 and #61 into feat/effort-context-app

Brings in feat/command-explanation (#61), which carries feat/bot-effort-context (#63), main and the delete stack with their conflicts resolved, so this PR merges in any order with them. No conflict of its own.

Author: httpsphl

Cargo.lock

@@ -1,12 +1,16 @@
 // Dev only: Scout searching in its browser in the fake preview, so the
-// browser panel has something live to show. The "page" is drawn on a
-// canvas and sent as JPEG frames, like the daemon's screencast.
+// browser panel has something live to show: three tabs, the search in the
+// active one. The "page" is drawn on a canvas, the size the panel asks for,
+// and sent as JPEG frames, like the daemon's screencast.
 
 import type { FakeBotloft } from "../lib/fake";
+import type { PageSize } from "../lib/fakePages";
 import type { BotId } from "../lib/protocol.gen";
+import { activeTab, drawPage } from "./seedPage";
 
-const W = 1280;
-const H = 800;
+const SITE = "https://recipes.example/";
+
+const RECIPES = ["Classic sourdough loaf", "Starter in 5 days", "No-knead rye", "Focaccia"];
 
 interface Scene {
   url: string;
@@ -15,16 +19,16 @@ interface Scene {
   results: boolean;
 }
 
-function draw(scene: Scene): string {
+function draw(scene: Scene, size: PageSize): string {
   const canvas = document.createElement("canvas");
-  canvas.width = W;
-  canvas.height = H;
+  canvas.width = size.width;
+  canvas.height = size.height;
   const g = canvas.getContext("2d");
   if (!g) {
     return "";
   }
   g.fillStyle = "#ffffff";
-  g.fillRect(0, 0, W, H);
+  g.fillRect(0, 0, size.width, size.height);
   g.fillStyle = "#1f2937";
   g.font = "600 34px system-ui, sans-serif";
   g.fillText(scene.results ? "Results" : "Find a recipe", 120, 150);
@@ -43,15 +47,12 @@ function draw(scene: Scene): string {
   g.fillStyle = "#ffffff";
   g.fillText("Search", 938, 226);
   if (scene.results) {
-    for (let row = 0; row < 4; row++) {
+    // A taller page shows more of the list.
+    for (let row = 0; 300 + row * 110 < size.height - 60; row++) {
       const y = 300 + row * 110;
       g.fillStyle = "#1d4ed8";
       g.font = "600 24px system-ui, sans-serif";
-      g.fillText(
-        ["Classic sourdough loaf", "Starter in 5 days", "No-knead rye", "Focaccia"][row] ?? "",
-        120,
-        y,
-      );
+      g.fillText(RECIPES[row % RECIPES.length] ?? "", 120, y);
       g.fillStyle = "#e5e7eb";
       g.fillRect(120, y + 18, 820, 14);
       g.fillRect(120, y + 42, 560, 14);
@@ -60,10 +61,10 @@ function draw(scene: Scene): string {
   return canvas.toDataURL("image/jpeg", 0.7).split(",")[1] ?? "";
 }
 
-/** Scout searches for a recipe, over and over. */
+/** Scout searches for a recipe, over and over, while the browser is its. */
 export function seedBrowser(fake: FakeBotloft, scout: BotId): void {
   const home: Scene = {
-    url: "https://recipes.example/",
+    url: SITE,
     title: "Recipes",
     query: "",
     results: false,
@@ -116,15 +117,25 @@ export function seedBrowser(fake: FakeBotloft, scout: BotId): void {
   );
   let scene = home;
   let step = 0;
-  fake.browser.open(scout, home.url, home.title);
-  fake.browser.frame(scout, draw(scene));
+  // Two pages it opened on the way, then the one it works in.
+  fake.browser.open(scout, "https://bakers.example/forum/hydration", "Hydration tips · Bakers");
+  fake.browser.openTab(scout, "https://mill.example/flour/rye", "Rye flour · The Mill");
+  fake.browser.openTab(scout, home.url, home.title);
+  fake.browser.paint(scout, (size) => {
+    const tab = activeTab(fake, scout);
+    return tab?.url.startsWith(SITE) ? draw(scene, size) : drawPage(tab, size);
+  });
   setInterval(() => {
+    // In the owner's hands, the bot waits.
+    if (fake.browser.state(scout).control === "owner") {
+      return;
+    }
     const next = steps[step % steps.length];
     step += 1;
     if (next) {
       scene = next(scene);
       fake.browser.open(scout, scene.url, scene.title);
-      fake.browser.frame(scout, draw(scene));
+      fake.browser.repaint(scout);
     }
   }, 2200);
 }

app/src/dev/seedBrowser.ts

@@ -33,6 +33,18 @@ The report is rebuilt on every visit, and Monday is when everyone opens it.
 
 **Not changing:** the report's layout or its sources.`;
 
+/** The kind of command an owner cannot read at a glance. */
+const CHECK_LINKS = `cd "C:/Work/Research" && python - <<'EOF'
+import re, urllib.request
+
+text = open("week-39-report.md", encoding="utf-8").read()
+for url in sorted(set(re.findall(r"https?://[^\\s)]+", text))):
+    try:
+        urllib.request.urlopen(url, timeout=10)
+    except Exception as error:
+        print("broken:", url, error)
+EOF`;
+
 interface Crew {
   scout: BotId;
   writer: BotId;
@@ -126,12 +138,18 @@ export function seedChats(fake: FakeBotloft, crew: Crew): void {
   talk.read(check.delivery.id);
   at(39);
   chat.reply(crew.reviewer, "I'll run the link checker first, then compare each figure.");
-  const command = JSON.stringify({
-    command: "npm run check-links",
-    description: "Check the links",
+  // A command with what the bot says it is for, and one without (spec 10.1).
+  const why = "Opens every link in the report draft and lists the ones that no longer work";
+  const links = JSON.stringify({ command: CHECK_LINKS, description: why });
+  const flat = CHECK_LINKS.split(/\s+/).join(" ").slice(0, 160);
+  chat.tool(crew.reviewer, "Bash", { summary: flat, explanation: why, input: links });
+  chat.ask(crew.reviewer, "Bash", flat, links, why);
+  const figures = JSON.stringify({ command: "npm run compare-figures -- --section 2" });
+  chat.tool(crew.reviewer, "Bash", {
+    summary: "npm run compare-figures -- --section 2",
+    input: figures,
   });
-  chat.tool(crew.reviewer, "Bash", { summary: "Check the links", input: command });
-  chat.ask(crew.reviewer, "Bash", "npm run check-links", command);
+  chat.ask(crew.reviewer, "Bash", "npm run compare-figures -- --section 2", figures);
   at(12);
   const late = talk.say({
     from: crew.scout,

app/src/dev/seedChats.ts

@@ -3,10 +3,12 @@
 // the owner's clicks and keys, so taking the browser can be tried end to end.
 
 import type { FakeBotloft } from "../lib/fake";
+import type { PageSize } from "../lib/fakePages";
 import type { BrowserInput, CrewId } from "../lib/protocol.gen";
+import { activeTab, drawPage } from "./seedPage";
+
+const SITE = "https://flour.example/";
 
-const W = 1280;
-const H = 800;
 const FIELDS = { user: 300, password: 390 } as const;
 type Field = keyof typeof FIELDS;
 
@@ -17,16 +19,16 @@ interface Form {
   signedIn: boolean;
 }
 
-function draw(form: Form): string {
+function draw(form: Form, size: PageSize): string {
   const canvas = document.createElement("canvas");
-  canvas.width = W;
-  canvas.height = H;
+  canvas.width = size.width;
+  canvas.height = size.height;
   const g = canvas.getContext("2d");
   if (!g) {
     return "";
   }
   g.fillStyle = "#f7f4ee";
-  g.fillRect(0, 0, W, H);
+  g.fillRect(0, 0, size.width, size.height);
   g.fillStyle = "#3b2a1a";
   g.font = "600 36px Georgia, serif";
   if (form.signedIn) {
@@ -90,21 +92,24 @@ export function seedHands(fake: FakeBotloft, crewId: CrewId): void {
   const clerk = fake.addBot(crewId, "Clerk", "Places the bakery's orders");
   fake.setBotState(clerk.id, "needs_approval", 2);
   const form: Form = { user: "", password: "", field: null, signedIn: false };
-  const login = "https://flour.example/login";
+  const login = `${SITE}login`;
+  const onSite = () => activeTab(fake, clerk.id)?.url.startsWith(SITE) ?? false;
   fake.browser.open(clerk.id, login, "Sign in · Flour Co.");
-  fake.browser.frame(clerk.id, draw(form));
+  fake.browser.paint(clerk.id, (size) =>
+    onSite() ? draw(form, size) : drawPage(activeTab(fake, clerk.id), size),
+  );
   fake.chat.tool(clerk.id, "mcp__botloft__browser_open", { summary: login, status: "done" });
   const task = "Sign in to Flour Co. with the bakery's account";
   fake.chat.tool(clerk.id, "mcp__botloft__browser_ask_owner", { summary: task, status: "running" });
   fake.browser.ask(clerk.id, task);
   fake.browser.onInput(clerk.id, (input) => {
-    if (form.signedIn) {
+    if (form.signedIn || !onSite()) {
       return;
     }
     if (handle(form, input)) {
       form.signedIn = true;
-      fake.browser.open(clerk.id, "https://flour.example/orders", "Orders · Flour Co.");
+      fake.browser.open(clerk.id, `${SITE}orders`, "Orders · Flour Co.");
     }
-    fake.browser.frame(clerk.id, draw(form));
+    fake.browser.repaint(clerk.id);
   });
 }

app/src/dev/seedHands.ts

@@ -0,0 +1,37 @@
+// Dev only: any page of the fake preview's browsers that no seed draws
+// itself, such as a tab in the background or an address the owner typed.
+// A heading with the tab's title, its site, and lines of grey "text".
+
+import type { FakeBotloft } from "../lib/fake";
+import type { PageSize } from "../lib/fakePages";
+import type { BotId, BrowserTab } from "../lib/protocol.gen";
+
+/** The bot's active tab, if its browser has any. */
+export function activeTab(fake: FakeBotloft, botId: BotId): BrowserTab | null {
+  return fake.browser.state(botId).tabs.find((tab) => tab.active) ?? null;
+}
+
+export function drawPage(tab: BrowserTab | null, size: PageSize): string {
+  const canvas = document.createElement("canvas");
+  canvas.width = size.width;
+  canvas.height = size.height;
+  const g = canvas.getContext("2d");
+  if (!g) {
+    return "";
+  }
+  g.fillStyle = "#ffffff";
+  g.fillRect(0, 0, size.width, size.height);
+  if (tab && tab.url !== "about:blank") {
+    g.fillStyle = "#111827";
+    g.font = "600 40px Georgia, serif";
+    g.fillText(tab.title || tab.url, 120, 160);
+    g.fillStyle = "#6b7280";
+    g.font = "20px system-ui, sans-serif";
+    g.fillText(tab.url, 120, 204);
+    g.fillStyle = "#e5e7eb";
+    for (let y = 270; y < size.height - 80; y += 34) {
+      g.fillRect(120, y, y % 5 === 0 ? 640 : 960, 14);
+    }
+  }
+  return canvas.toDataURL("image/jpeg", 0.7).split(",")[1] ?? "";
+}

app/src/dev/seedPage.ts

@@ -0,0 +1,140 @@
+// Settings, "Archived": the bots and crews the owner archived, which the
+// rest of the app does not show, with a way to delete each for good
+// (spec 7.6).
+
+import { Users } from "lucide-react";
+import { type ReactNode, useEffect, useState } from "react";
+import { useT } from "../../i18n";
+import { errorText } from "../../lib/api";
+import { fromNow } from "../../lib/format";
+import type { Archive, Bot, Crew } from "../../lib/protocol.gen";
+import { useApi, useApp } from "../../store/context";
+import { Button } from "../../ui/Button";
+import { Callout } from "../../ui/Callout";
+import { BotAvatar } from "../bots/BotAvatar";
+import { DeleteBot } from "../bots/DeleteBot";
+import { DeleteCrew } from "../crews/DeleteCrew";
+import { Section } from "./settingsParts";
+
+type Asking = { bot: Bot } | { crew: Crew } | null;
+
+export function ArchivedSettings() {
+  const s = useT().account.settings;
+  const api = useApi();
+  const active = useApp((state) => state.crews);
+  const [archive, setArchive] = useState<Archive | null>(null);
+  const [failed, setFailed] = useState<string | null>(null);
+  const [asking, setAsking] = useState<Asking>(null);
+
+  useEffect(() => {
+    let alive = true;
+    api.call("archive.list").then(
+      (list) => alive && setArchive(list),
+      (error) => alive && setFailed(errorText(error)),
+    );
+    return () => {
+      alive = false;
+    };
+  }, [api]);
+
+  if (failed) {
+    return (
+      <Section title={s.archived}>
+        <Callout tone="danger" title={s.archivedLoadFailed}>
+          {failed}
+        </Callout>
+      </Section>
+    );
+  }
+  if (!archive) {
+    return <Section title={s.archived}>{null}</Section>;
+  }
+
+  // A bot of an archived crew goes with its crew; the others are listed.
+  const botsOf = (crew: Crew) => archive.bots.filter((bot) => bot.crewId === crew.id);
+  const bots = archive.bots.filter((bot) => !archive.crews.some((crew) => crew.id === bot.crewId));
+  const forget = (gone: Asking) =>
+    setArchive({
+      crews: archive.crews.filter((crew) => !(gone && "crew" in gone && gone.crew.id === crew.id)),
+      bots: archive.bots.filter(
+        (bot) =>
+          !(gone && "bot" in gone && gone.bot.id === bot.id) &&
+          !(gone && "crew" in gone && gone.crew.id === bot.crewId),
+      ),
+    });
+
+  return (
+    <Section title={s.archived}>
+      <p className="text-ink-soft text-sm leading-relaxed">{s.archivedIntro}</p>
+      {archive.crews.length + bots.length === 0 ? (
+        <p className="text-muted text-sm">{s.archivedEmpty}</p>
+      ) : (
+        <ul aria-label={s.archived} className="flex flex-col divide-y divide-line">
+          {archive.crews.map((crew) => (
+            <Row
+              key={crew.id}
+              icon={
+                <span className="grid size-7 place-items-center rounded-full bg-sunken text-muted">
+                  <Users aria-hidden size={14} />
+                </span>
+              }
+              name={crew.name}
+              line={s.archivedCrew(botsOf(crew).length, fromNow(crew.archivedAt ?? 0))}
+              onDelete={() => setAsking({ crew })}
+            />
+          ))}
+          {bots.map((bot) => (
+            <Row
+              key={bot.id}
+              icon={<BotAvatar color={bot.color} size={28} />}
+              name={bot.name}
+              line={s.archivedBot(active[bot.crewId]?.name ?? "", fromNow(bot.archivedAt ?? 0))}
+              onDelete={() => setAsking({ bot })}
+            />
+          ))}
+        </ul>
+      )}
+      {asking && "bot" in asking && (
+        <DeleteBot
+          bot={asking.bot}
+          onClose={() => setAsking(null)}
+          onDeleted={() => forget(asking)}
+        />
+      )}
+      {asking && "crew" in asking && (
+        <DeleteCrew
+          crew={asking.crew}
+          bots={botsOf(asking.crew).length}
+          onClose={() => setAsking(null)}
+          onDeleted={() => forget(asking)}
+        />
+      )}
+    </Section>
+  );
+}
+
+function Row({
+  icon,
+  name,
+  line,
+  onDelete,
+}: {
+  icon: ReactNode;
+  name: string;
+  line: string;
+  onDelete(): void;
+}) {
+  const s = useT().account.settings;
+  return (
+    <li className="flex items-center gap-3 py-2">
+      {icon}
+      <div className="min-w-0 flex-1">
+        <p className="truncate font-medium text-sm">{name}</p>
+        <p className="truncate text-muted text-xs">{line}</p>
+      </div>
+      <Button variant="danger" size="sm" label={s.deleteArchivedOne(name)} onClick={onDelete}>
+        {s.deleteArchived}
+      </Button>
+    </li>
+  );
+}