feat(app): tabs, reload and a typed address in the browser panel

The panel shows a tab for each page the bot has open, with its title and
site, in place of the count. They only show while the browser is the
bot's; with it in the owner's hands a click switches tabs and + opens a
new one, with the cursor in the address row, where Enter takes the tab to
what the owner typed. The bar that says the owner is in control tells
that the bot goes on in the tab left open.

The address row has a reload button, which works at any time.

FakeBotloft has the tabs and the four new methods, and the preview's
Scout has three tabs and waits while the owner has its browser.

Author: httpsphl

app/src/dev/seedBrowser.ts

@@ -1,11 +1,14 @@
 // 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, the size the panel asks for, 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/fakeBrowser";
+import type { PageSize } from "../lib/fakePages";
 import type { BotId } from "../lib/protocol.gen";
+import { activeTab, drawPage } from "./seedPage";
+
+const SITE = "https://recipes.example/";
 
 const RECIPES = ["Classic sourdough loaf", "Starter in 5 days", "No-knead rye", "Focaccia"];
 
@@ -58,10 +61,10 @@ function draw(scene: Scene, size: PageSize): 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,
@@ -114,9 +117,19 @@ export function seedBrowser(fake: FakeBotloft, scout: BotId): void {
   );
   let scene = home;
   let step = 0;
-  fake.browser.open(scout, home.url, home.title);
-  fake.browser.paint(scout, (size) => draw(scene, size));
+  // 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) {

app/src/dev/seedHands.ts

@@ -3,8 +3,11 @@
 // 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/fakeBrowser";
+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 FIELDS = { user: 300, password: 390 } as const;
 type Field = keyof typeof FIELDS;
@@ -89,20 +92,23 @@ 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.paint(clerk.id, (size) => draw(form, size));
+  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.repaint(clerk.id);
   });

app/src/dev/seedPage.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/features/browser/AddressBar.tsx

@@ -0,0 +1,107 @@
+// The address row of a bot's browser (spec 21.8): reloading the page, where
+// it is, and opening it in the owner's own browser. With the browser in
+// the owner's hands the address is theirs to type (spec 21.10).
+
+import { ExternalLink, Globe, LoaderCircle, Lock, RotateCw } from "lucide-react";
+import { type RefObject, useEffect, useState } from "react";
+import { useT } from "../../i18n";
+import type { Bot, BrowserState } from "../../lib/protocol.gen";
+import { useApi, useHost } from "../../store/context";
+import { Button } from "../../ui/Button";
+import { attempt } from "../../ui/toast";
+import type { Hands } from "./useHands";
+
+export function AddressBar({
+  bot,
+  state,
+  hands,
+  field,
+}: {
+  bot: Pick<Bot, "id">;
+  state: BrowserState;
+  hands: Hands;
+  /** The address field, for whoever sends the owner to it. */
+  field: RefObject<HTMLInputElement | null>;
+}) {
+  const t = useT().browser;
+  const api = useApi();
+  const host = useHost();
+  const url = state.url && state.url !== "about:blank" ? state.url : null;
+  const web = url !== null && /^https?:\/\//i.test(url);
+  const Icon = state.loading ? LoaderCircle : url?.startsWith("https://") ? Lock : Globe;
+  const held = hands.held;
+  const tab = state.tabs.find((tab) => tab.active)?.id;
+  // What the owner is typing; `null` shows where the page is.
+  const [draft, setDraft] = useState<string | null>(null);
+  // biome-ignore lint/correctness/useExhaustiveDependencies: another tab, or the bot's turn again, drops what was typed
+  useEffect(() => setDraft(null), [tab, held]);
+
+  const go = () => {
+    const typed = draft?.trim();
+    setDraft(null);
+    field.current?.blur();
+    if (typed) {
+      void hands.open(typed);
+    }
+  };
+
+  return (
+    <div className="flex h-11 shrink-0 items-center gap-1 border-line border-b px-1.5">
+      <Button
+        variant="ghost"
+        size="sm"
+        icon={RotateCw}
+        label={t.reload}
+        disabled={state.status !== "open"}
+        onClick={() => attempt(t.reloadFailed, () => api.call("browser.reload", { botId: bot.id }))}
+      />
+      <div
+        className={`flex min-w-0 flex-1 items-center gap-2 rounded-full bg-sunken px-3 py-1.5 ${
+          held ? "focus-within:ring-2 focus-within:ring-accent/35" : ""
+        }`}
+      >
+        <Icon
+          aria-label={state.loading ? t.loading : undefined}
+          aria-hidden={!state.loading}
+          size={13}
+          className={`shrink-0 ${state.loading ? "animate-spin text-work" : "text-muted"}`}
+        />
+        <input
+          ref={field}
+          type="text"
+          readOnly={!held}
+          aria-label={t.address}
+          title={url ?? undefined}
+          placeholder={held ? t.addressHint : undefined}
+          autoComplete="off"
+          spellCheck={false}
+          value={draft ?? url ?? (held ? "" : (state.title ?? ""))}
+          onChange={(event) => setDraft(event.target.value)}
+          onFocus={(event) => held && event.currentTarget.select()}
+          onKeyDown={(event) => {
+            if (!held) {
+              return;
+            }
+            if (event.key === "Enter") {
+              event.preventDefault();
+              go();
+            } else if (event.key === "Escape") {
+              setDraft(null);
+              event.currentTarget.blur();
+            }
+          }}
+          className="min-w-0 flex-1 truncate bg-transparent font-mono text-ink-soft text-xs outline-none"
+        />
+      </div>
+      {web && url && (
+        <Button
+          variant="ghost"
+          size="sm"
+          icon={ExternalLink}
+          label={t.openOutside}
+          onClick={() => attempt(t.openFailed, () => host.openUrl(url))}
+        />
+      )}
+    </div>
+  );
+}

app/src/features/browser/BrowserPanel.tsx

@@ -1,21 +1,22 @@
-// The bot's own browser beside its chat (spec 21.8): the page it is on,
-// live, with its cursor and a line about what it just did. Watching starts
-// when the panel opens and stops when it closes. The owner can take it into
-// their own hands and give it back (spec 21.10).
+// The bot's own browser beside its chat (spec 21.8): its tabs, the address
+// and the page it is on, live, with its cursor and a line about what it
+// just did. Watching starts when the panel opens and stops when it closes.
+// The owner can take it into their own hands and give it back (spec 21.10).
 
-import { ExternalLink, Globe, LoaderCircle, Lock, Maximize2, Minimize2, X } from "lucide-react";
+import { Globe, LoaderCircle, Maximize2, Minimize2, X } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { useT } from "../../i18n";
-import type { Bot, BrowserState } from "../../lib/protocol.gen";
-import { useApp, useHost } from "../../store/context";
+import type { Bot } from "../../lib/protocol.gen";
+import { useApp } from "../../store/context";
 import { Button } from "../../ui/Button";
 import { Callout } from "../../ui/Callout";
 import { SidePanel } from "../../ui/SidePanel";
-import { attempt } from "../../ui/toast";
 import { BotAvatar } from "../bots/BotAvatar";
+import { AddressBar } from "./AddressBar";
 import { AskCallout, HeldBar, TakeBar } from "./HandsBars";
 import { HandsLayer } from "./HandsLayer";
 import { LiveView, useCaption } from "./LiveView";
+import { TabStrip } from "./TabStrip";
 import { useBrowserView } from "./useBrowserView";
 import { useHands } from "./useHands";
 import { useFitPage, useRoom } from "./useRoom";
@@ -53,6 +54,13 @@ export function BrowserPanel({
     height: inside.height - 2 * PAD - UNDER,
   };
   useFitPage(bot, room, watched);
+  // A new tab is blank: the owner says where it goes.
+  const address = useRef<HTMLInputElement>(null);
+  const addTab = async () => {
+    if (await hands.newTab()) {
+      address.current?.focus();
+    }
+  };
   // Taking needs the watch first: the daemon ties the hands to it.
   const taken = useRef(0);
   useEffect(() => {
@@ -88,7 +96,12 @@ export function BrowserPanel({
           <Button variant="ghost" size="sm" icon={X} label={t.close} onClick={onClose} />
         </div>
       </header>
-      {state && (status === "open" || status === "starting") && <AddressBar state={state} />}
+      {state && (status === "open" || status === "starting") && (
+        <>
+          {state.tabs.length > 0 && <TabStrip state={state} hands={hands} onAdd={addTab} />}
+          <AddressBar bot={bot} state={state} hands={hands} field={address} />
+        </>
+      )}
       <div
         ref={body}
         className="flex min-h-0 flex-1 flex-col overflow-y-auto"
@@ -111,7 +124,15 @@ export function BrowserPanel({
         ) : (
           <>
             {live && ask && !hands.held && <AskCallout bot={bot} task={ask} hands={hands} />}
-            {hands.held && <HeldBar bot={bot} task={ask} focused={focused} hands={hands} />}
+            {hands.held && (
+              <HeldBar
+                bot={bot}
+                task={ask}
+                tabs={state?.tabs.length ?? 0}
+                focused={focused}
+                hands={hands}
+              />
+            )}
             <div className="min-h-40 flex-1" style={{ containerType: "size" }}>
               <div className="relative">
                 <LiveView
@@ -160,44 +181,6 @@ export function BrowserPanel({
   );
 }
 
-function AddressBar({ state }: { state: BrowserState }) {
-  const t = useT().browser;
-  const host = useHost();
-  const url = state.url && state.url !== "about:blank" ? state.url : null;
-  const web = url !== null && /^https?:\/\//i.test(url);
-  const Icon = state.loading ? LoaderCircle : url?.startsWith("https://") ? Lock : Globe;
-  return (
-    <div className="flex h-11 shrink-0 items-center gap-2 border-line border-b px-3">
-      <div className="flex min-w-0 flex-1 items-center gap-2 rounded-full bg-sunken px-3 py-1.5">
-        <Icon
-          aria-label={state.loading ? t.loading : undefined}
-          aria-hidden={!state.loading}
-          size={13}
-          className={`shrink-0 ${state.loading ? "animate-spin text-work" : "text-muted"}`}
-        />
-        <input
-          readOnly
-          type="text"
-          aria-label={t.address}
-          title={url ?? undefined}
-          value={url ?? state.title ?? ""}
-          className="min-w-0 flex-1 truncate bg-transparent font-mono text-ink-soft text-xs outline-none"
-        />
-      </div>
-      {state.tabs > 1 && <span className="shrink-0 text-muted text-xs">{t.tabs(state.tabs)}</span>}
-      {web && url && (
-        <Button
-          variant="ghost"
-          size="sm"
-          icon={ExternalLink}
-          label={t.openOutside}
-          onClick={() => attempt(t.openFailed, () => host.openUrl(url))}
-        />
-      )}
-    </div>
-  );
-}
-
 function Overlay({ busy, title, body }: { busy: boolean; title: string; body: string | null }) {
   return (
     <div className="absolute inset-0 grid place-items-center rounded-xl">

app/src/features/browser/HandsBars.tsx

@@ -35,11 +35,14 @@ export function AskCallout({ bot, task, hands }: { bot: Bot; task: string; hands
 export function HeldBar({
   bot,
   task,
+  tabs,
   focused,
   hands,
 }: {
   bot: Bot;
   task: string | null;
+  /** How many tabs are open: with more than one, where the bot goes on. */
+  tabs: number;
   focused: boolean;
   hands: Hands;
 }) {
@@ -57,6 +60,7 @@ export function HeldBar({
           <p className="line-clamp-2 text-ink-soft text-xs" data-selectable>
             {task ? t.help.asks(bot.name, task) : t.hands.waits(bot.name)}
           </p>
+          {tabs > 1 && <p className="text-muted text-xs">{t.hands.leaves(bot.name)}</p>}
         </div>
       </div>
       <div className="mt-2.5 flex flex-wrap items-center gap-x-3 gap-y-2 pl-6.5">