@withbuddi/buddi 0.1.0-pre.51 → 0.1.0-pre.53

package/extension/manifest.json

@@ -1,8 +1,8 @@
 {
   "manifest_version": 3,
   "name": "buddi",
-  "version": "0.1.0.51",
-  "description": "Lets your buddi work in background tabs of this browser. The sites it opens are the ones you ask it for; it opens none on its own.",
+  "version": "0.1.0.53",
+  "description": "Lets the buddis on this computer work in background tabs of this browser, opening only the sites you ask them for.",
   "minimum_chrome_version": "116",
   "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAwR4JT/OlKKPcZQ33euO9mSv7RrSIWNVanldhT2Uzc9YfzF/X0lg5NfXLc+G/UGFjB8v+uMCbpMhRBZ2SVwDHQH3buv3VEUzuOIDTPHgv99T5lq5imZrDxmIE+EL/fWrsjhcXaIB4e4fn0tJqw6ivJUGmYpG5XhWn65nlLniHfFBKMpZ/y7bVnvfzAgMQUa13qTAVxPTpMRtNl/flQq4Q/vWYm28H7W7OzygDV+/4X2azUrB8yPk67QsipbdDLxiX2GMxjXuKK6iD5CQiytoxTsAqUzB886HbOZsxJfQpRIjrUgBmGjLyaKuz617ZGJW9zS23LmnlL6mkX3+ggca1AQIDAQAB",
   "permissions": [
@@ -45,5 +45,5 @@
     "48": "icons/48.png",
     "128": "icons/128.png"
   },
-  "version_name": "0.1.0-pre.51"
+  "version_name": "0.1.0-pre.53"
 }

package/extension/popup.css

@@ -107,6 +107,22 @@
 
   --focus-ring: #2b6fe6;
 
+  /* Chrome's own tab-group colours, so a buddi's swatch matches its group. */
+  --group-grey: #5f6368;
+  --group-blue: #1a73e8;
+  --group-red: #d93025;
+  --group-yellow: #f9ab00;
+  --group-green: #188038;
+  --group-pink: #d01884;
+  --group-purple: #a142f4;
+  --group-cyan: #007b83;
+  --group-orange: #fa903e;
+
+  --swatch: 10px;
+  --switch-w: 30px;
+  --switch-h: 18px;
+  --switch-knob: 14px;
+
   color-scheme: light;
 }
 
@@ -211,7 +227,8 @@ p { margin: 0; }
 @keyframes view-in { from { opacity: 0; } to { opacity: 1; } }
 
 @media (prefers-reduced-motion: reduce) {
-  .view { animation: none; }
+  .view, .buddi, .add { animation: none; }
+  .switch-track, .switch-track::after { transition: none; }
   .btn { transition: none; }
 }
 
@@ -312,7 +329,78 @@ p { margin: 0; }
 .fact { font-size: var(--text-base); font-weight: var(--weight-medium); overflow-wrap: anywhere; }
 
 .foot {
-  margin: 0 calc(var(--space-4) * -1) calc(var(--space-4) * -1);
-  padding: var(--space-2) var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-4);
+  border-top: 1px solid var(--line);
+}
+
+.btn[data-variant='ghost'] { border-color: transparent; background: none; }
+
+/* ---- the buddis: one row each, a hairline between them ---- */
+
+.buddis { margin: 0; padding: 0; list-style: none; }
+.buddi {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-4);
+  animation: view-in var(--dur-view) var(--ease);
+}
+.buddi + .buddi { border-top: 1px solid var(--line); }
+.buddi[data-enabled='false'] .buddi-who { opacity: 0.55; }
+
+.buddi-head { display: flex; align-items: center; gap: var(--space-2); }
+.buddi-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
+.buddi-name { font-size: var(--text-base); font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.buddi-address { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.buddi-pill { margin-left: 0; }
+.buddi-body { display: flex; flex-direction: column; gap: var(--space-2); }
+.buddi-body:empty { display: none; }
+.actions-gap { flex: 1; }
+
+.swatch { width: var(--swatch); height: var(--swatch); flex: none; border-radius: 50%; background: var(--group-grey); }
+.buddi[data-colour='blue'] .swatch { background: var(--group-blue); }
+.buddi[data-colour='red'] .swatch { background: var(--group-red); }
+.buddi[data-colour='yellow'] .swatch { background: var(--group-yellow); }
+.buddi[data-colour='green'] .swatch { background: var(--group-green); }
+.buddi[data-colour='pink'] .swatch { background: var(--group-pink); }
+.buddi[data-colour='purple'] .swatch { background: var(--group-purple); }
+.buddi[data-colour='cyan'] .swatch { background: var(--group-cyan); }
+.buddi[data-colour='orange'] .swatch { background: var(--group-orange); }
+
+/* The switch: a checkbox underneath, so the keyboard and a screen reader get one for free. */
+.switch { position: relative; display: inline-flex; flex: none; cursor: pointer; }
+.switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
+.switch-track {
+  position: relative;
+  width: var(--switch-w);
+  height: var(--switch-h);
+  border-radius: var(--radius-pill);
+  background: var(--line-strong);
+  transition: background-color var(--dur-fast) ease;
+}
+.switch-track::after {
+  content: '';
+  position: absolute;
+  top: calc((var(--switch-h) - var(--switch-knob)) / 2);
+  left: calc((var(--switch-h) - var(--switch-knob)) / 2);
+  width: var(--switch-knob);
+  height: var(--switch-knob);
+  border-radius: 50%;
+  background: var(--surface);
+  transition: transform var(--dur-fast) var(--ease);
+}
+.switch input:checked + .switch-track { background: var(--accent); }
+.switch input:checked + .switch-track::after { transform: translateX(calc(var(--switch-w) - var(--switch-h))); }
+.switch input:focus-visible + .switch-track { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
+
+.add {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
   border-top: 1px solid var(--line);
+  animation: view-in var(--dur-view) var(--ease);
 }

package/extension/popup.html

@@ -6,57 +6,74 @@
     <title>buddi</title>
     <link rel="stylesheet" href="popup.css" />
   </head>
-  <body data-view="address">
+  <body>
     <header class="head">
       <img class="blob" src="blob.png" alt="" width="28" height="28" />
       <span class="wordmark">buddi</span>
       <span class="pill" id="pill" data-tone="idle" role="status">Not connected</span>
     </header>
 
-    <!-- Not connected, and Connecting: the address of the buddi to pair with. -->
-    <section class="view" id="view-address" data-view="address">
+    <!-- Every buddi this browser knows, one row each: its name, its address, how it stands, and its switch. -->
+    <ul class="buddis" id="buddis" aria-label="Your buddis"></ul>
+
+    <!-- Add a buddi: the address of another buddi on this machine. -->
+    <section class="add" id="add" hidden>
       <div class="field-group">
-        <label class="label" for="gateway">Your buddi</label>
+        <label class="label" for="gateway">Address of the buddi to add</label>
         <input class="field" id="gateway" type="url" value="http://127.0.0.1:4317" placeholder="http://127.0.0.1:4317" spellcheck="false" autocomplete="off" />
-        <p class="hint" id="hint">The address of the buddi running on this machine.</p>
+        <p class="hint" id="hint">A buddi running on this machine. Each buddi you add gets its own tab group.</p>
       </div>
       <p class="notice" id="notice" data-tone="critical" role="alert" hidden></p>
-      <p class="quiet" id="asking" hidden>Asking your buddi for a code…</p>
-      <div class="actions" id="address-actions">
+      <div class="actions">
+        <button class="btn" data-variant="ghost" id="add-cancel" type="button">Cancel</button>
         <button class="btn" data-variant="accent" id="connect" type="button">Connect</button>
       </div>
     </section>
 
-    <!-- Pairing: the six digits to type into buddi. -->
-    <section class="view" id="view-pairing" data-view="pairing" hidden>
-      <div class="code-tile">
-        <p class="code" id="code" aria-label="Pairing code"></p>
-        <button class="btn" data-size="sm" id="copy" type="button">Copy</button>
-      </div>
-      <p class="hint">Type it into buddi under Settings → Browser&nbsp;&amp;&nbsp;apps, within five minutes. Open buddi settings may open buddi.app: if Chrome asks, allow it.</p>
-      <div class="actions actions-split">
-        <button class="link" id="not-this" type="button">Not this buddi</button>
-        <button class="btn" id="open-settings" type="button">Open buddi settings</button>
-      </div>
-    </section>
-
-    <!-- Connected: which buddi, and what it is doing here. -->
-    <section class="view" id="view-paired" data-view="paired" hidden>
-      <div class="facts">
-        <p class="fact" id="paired-to"></p>
-        <p class="quiet" id="working">Nothing open right now.</p>
-      </div>
+    <footer class="foot">
       <div class="facts" id="downloads-box" hidden>
         <p class="quiet" id="downloads-note">Let agents hand buddi the files they download in your Chrome, like a bank statement. Only downloads an agent's click starts are read; yours are never touched.</p>
       </div>
       <div class="actions">
-        <button class="btn" id="allow-downloads" type="button" hidden>Allow downloads</button>
-        <button class="btn" id="open-buddi" type="button">Open buddi</button>
+        <button class="btn" data-size="sm" id="allow-downloads" type="button" hidden>Allow downloads</button>
+        <button class="btn" data-size="sm" id="add-open" type="button">Add a buddi</button>
       </div>
-      <footer class="foot">
-        <button class="link" id="forget" type="button">Forget this buddi</button>
-      </footer>
-    </section>
+    </footer>
+
+    <!-- One buddi. Filled with textContent only: names and codes come from a socket. -->
+    <template id="buddi-row">
+      <li class="buddi" data-state="offline">
+        <div class="buddi-head">
+          <span class="swatch" aria-hidden="true"></span>
+          <span class="buddi-who">
+            <span class="buddi-name"></span>
+            <span class="buddi-address"></span>
+          </span>
+          <span class="pill buddi-pill" data-tone="idle"></span>
+          <label class="switch">
+            <input class="buddi-switch" type="checkbox" role="switch" />
+            <span class="switch-track" aria-hidden="true"></span>
+          </label>
+        </div>
+        <div class="buddi-body">
+          <div class="code-tile buddi-pairing" hidden>
+            <p class="code" aria-label="Pairing code"></p>
+            <button class="btn buddi-copy" data-size="sm" type="button">Copy</button>
+          </div>
+          <p class="hint buddi-pairing-hint" hidden>Type it into this buddi under Settings → Browser&nbsp;&amp;&nbsp;apps, within five minutes. Open buddi settings may open buddi.app: if Chrome asks, allow it.</p>
+          <p class="quiet buddi-asking" hidden>Asking this buddi for a code…</p>
+          <p class="quiet buddi-working" hidden></p>
+          <p class="notice buddi-error" data-tone="critical" role="alert" hidden></p>
+          <div class="actions">
+            <button class="link buddi-remove" type="button">Remove</button>
+            <span class="actions-gap"></span>
+            <button class="btn buddi-retry" data-size="sm" type="button" hidden>Try again</button>
+            <button class="btn buddi-settings" data-size="sm" type="button" hidden>Open buddi settings</button>
+            <button class="btn buddi-open" data-size="sm" type="button" hidden>Open buddi</button>
+          </div>
+        </div>
+      </li>
+    </template>
 
     <script src="popup.js" type="module"></script>
   </body>

package/extension/popup.js

@@ -4,17 +4,30 @@ var DOWNLOADS_PERMISSION = "downloads";
 // src/popup.ts
 var SETTINGS_HASH = "#/settings/computer";
 var PILL = {
-  offline: { word: "Not connected", tone: "idle" },
+  off: { word: "Off", tone: "idle" },
+  address: { word: "Not connected", tone: "idle" },
   connecting: { word: "Connecting\u2026", tone: "waiting" },
-  pairing: { word: "Pairing", tone: "waiting" },
+  pairing: { word: "Needs pairing", tone: "waiting" },
   paired: { word: "Connected", tone: "good" }
 };
-function viewOf(model) {
-  const { connection, code } = model.state;
+function rowView(entry) {
+  if (!entry.enabled) return "off";
+  const { connection, code } = entry.state;
   if (connection === "paired") return "paired";
-  if (connection === "pairing" && code && !model.editing) return "pairing";
+  if (connection === "pairing" && code) return "pairing";
+  if (connection === "connecting" || connection === "pairing") return "connecting";
   return "address";
 }
+function summary(pairings) {
+  const views = pairings.map(rowView);
+  const connected = views.filter((view) => view === "paired").length;
+  if (connected > 1) return { word: `${connected} connected`, tone: "good" };
+  if (connected === 1) return PILL.paired;
+  if (views.includes("pairing")) return PILL.pairing;
+  if (views.includes("connecting")) return PILL.connecting;
+  const failed = pairings.some((entry) => entry.enabled && entry.state.connection === "offline" && entry.state.error);
+  return { word: "Not connected", tone: failed ? "bad" : "idle" };
+}
 function dashboardUrl(gateway, hash = "") {
   try {
     const url = new URL(gateway);
@@ -40,28 +53,65 @@ function workingLine(tabs) {
   return tabs === 1 ? "Working in 1 tab" : `Working in ${tabs} tabs`;
 }
 var byId = (doc, id) => doc.getElementById(id);
+var part = (row, name) => row.querySelector(`.${name}`);
 function render(model, doc = document) {
-  const { state } = model;
-  const view = viewOf(model);
   const pill = byId(doc, "pill");
-  const { word, tone } = PILL[state.connection] ?? PILL.offline;
-  const failure = model.refused ?? (state.connection === "offline" ? state.error : null);
+  const { word, tone } = summary(model.pairings);
   pill.textContent = word;
-  pill.dataset["tone"] = failure ? "bad" : tone;
-  for (const section of doc.querySelectorAll(".view")) section.hidden = section.dataset["view"] !== view;
-  doc.body.dataset["view"] = view;
-  const connecting = view === "address" && state.connection === "connecting" && !model.editing;
-  const field = byId(doc, "gateway");
-  field.disabled = connecting;
+  pill.dataset["tone"] = tone;
+  const list = byId(doc, "buddis");
+  const template = byId(doc, "buddi-row");
+  const existing = new Map([...list.querySelectorAll(".buddi")].map((row) => [row.dataset["id"] ?? "", row]));
+  const wanted = new Set(model.pairings.map((entry) => entry.id));
+  for (const [id, row] of existing) if (!wanted.has(id)) row.remove();
+  for (const entry of model.pairings) {
+    let row = existing.get(entry.id);
+    if (!row) {
+      row = template.content.firstElementChild.cloneNode(true);
+      row.dataset["id"] = entry.id;
+    }
+    list.appendChild(row);
+    drawRow(row, entry);
+  }
+  list.hidden = model.pairings.length === 0;
+  const adding = model.adding || model.pairings.length === 0;
+  byId(doc, "add").hidden = !adding;
+  byId(doc, "add-open").hidden = adding;
+  byId(doc, "add-cancel").hidden = model.pairings.length === 0;
   const notice = byId(doc, "notice");
-  notice.hidden = !failure || connecting;
-  notice.textContent = failure ?? "";
-  byId(doc, "asking").hidden = !connecting;
-  byId(doc, "address-actions").hidden = connecting;
-  byId(doc, "connect").textContent = failure ? "Try again" : "Connect";
-  byId(doc, "code").textContent = view === "pairing" ? groupCode(state.code ?? "") : "";
-  byId(doc, "paired-to").textContent = view === "paired" ? `Your buddi at ${state.installation ?? hostOf(model.gateway)}` : "";
-  byId(doc, "working").textContent = workingLine(model.tabs);
+  notice.hidden = !model.refused;
+  notice.textContent = model.refused ?? "";
+  byId(doc, "hint").textContent = model.asked ? `The buddi at ${hostOf(model.asked)} asked to be added. Each buddi you add gets its own tab group.` : "A buddi running on this machine. Each buddi you add gets its own tab group.";
+}
+function drawRow(row, entry) {
+  const view = rowView(entry);
+  row.dataset["state"] = view;
+  row.dataset["enabled"] = entry.enabled ? "true" : "false";
+  row.dataset["colour"] = entry.colour;
+  part(row, "buddi-name").textContent = entry.name;
+  const address = part(row, "buddi-address");
+  address.textContent = hostOf(entry.origin);
+  address.hidden = entry.name === hostOf(entry.origin);
+  const failure = view === "address" ? entry.state.error : null;
+  const pill = part(row, "buddi-pill");
+  pill.textContent = PILL[view].word;
+  pill.dataset["tone"] = failure ? "bad" : PILL[view].tone;
+  const toggle = part(row, "buddi-switch");
+  toggle.checked = entry.enabled;
+  toggle.setAttribute("aria-label", `Work for ${entry.name}`);
+  part(row, "buddi-pairing").hidden = view !== "pairing";
+  part(row, "code").textContent = view === "pairing" ? groupCode(entry.state.code ?? "") : "";
+  part(row, "buddi-pairing-hint").hidden = view !== "pairing";
+  part(row, "buddi-asking").hidden = view !== "connecting";
+  const working = part(row, "buddi-working");
+  working.hidden = view !== "paired";
+  working.textContent = view === "paired" ? entry.state.older ? `${workingLine(entry.tabs).replace(/\.$/, "")} \xB7 older buddi: live view off` : workingLine(entry.tabs) : "";
+  const error = part(row, "buddi-error");
+  error.hidden = !failure;
+  error.textContent = failure ?? "";
+  part(row, "buddi-retry").hidden = view !== "address";
+  part(row, "buddi-settings").hidden = view !== "pairing";
+  part(row, "buddi-open").hidden = view !== "paired";
 }
 var APP_WAIT_MS = 1500;
 function digitsOf(code) {
@@ -110,23 +160,25 @@ function openSettings(options) {
   });
 }
 var COPIED_FOR = 2e3;
+var restores = /* @__PURE__ */ new WeakMap();
+function copyInto(button, read) {
+  void (async () => {
+    try {
+      await navigator.clipboard.writeText(read());
+    } catch {
+      return;
+    }
+    button.textContent = "Copied";
+    const pending = restores.get(button);
+    if (pending) clearTimeout(pending);
+    restores.set(button, setTimeout(() => {
+      button.textContent = "Copy";
+      restores.delete(button);
+    }, COPIED_FOR));
+  })();
+}
 function wireCopy(button, read) {
-  let restore;
-  button.addEventListener("click", () => {
-    void (async () => {
-      try {
-        await navigator.clipboard.writeText(read());
-      } catch {
-        return;
-      }
-      button.textContent = "Copied";
-      if (restore) clearTimeout(restore);
-      restore = setTimeout(() => {
-        button.textContent = "Copy";
-        restore = void 0;
-      }, COPIED_FOR);
-    })();
-  });
+  button.addEventListener("click", () => copyInto(button, read));
 }
 async function wireDownloads(doc, permissions) {
   const box = byId(doc, "downloads-box");
@@ -141,14 +193,25 @@ async function wireDownloads(doc, permissions) {
     void permissions.request({ permissions: [DOWNLOADS_PERMISSION] }).then(show, () => void 0);
   });
 }
-async function countBuddiTabs(api) {
-  try {
-    const groups = new Set((await api.tabGroups.query({ title: "buddi" })).map((group) => group.id));
-    if (groups.size === 0) return 0;
-    return (await api.tabs.query({})).filter((tab) => tab.groupId !== void 0 && groups.has(tab.groupId)).length;
-  } catch {
-    return null;
-  }
+var REDRAW_MS = 1e3;
+function throttle(run, ms, clock = { now: () => Date.now(), later: (fn, wait) => setTimeout(fn, wait) }) {
+  let last = -Infinity;
+  let waiting = false;
+  return () => {
+    const now = clock.now();
+    if (now - last >= ms && !waiting) {
+      last = now;
+      run();
+      return;
+    }
+    if (waiting) return;
+    waiting = true;
+    clock.later(() => {
+      waiting = false;
+      last = clock.now();
+      run();
+    }, Math.max(0, ms - (now - last)));
+  };
 }
 async function ask(message) {
   try {
@@ -157,118 +220,147 @@ async function ask(message) {
     return void 0;
   }
 }
+function rowOf(target, model) {
+  const row = target?.closest?.(".buddi");
+  const entry = row ? model.pairings.find((candidate) => candidate.id === row.dataset["id"]) : void 0;
+  return row && entry ? { row, entry } : null;
+}
 async function main() {
   const field = byId(document, "gateway");
-  const model = {
-    state: { connection: "offline", code: null, installation: null, error: null },
-    gateway: field.value,
-    editing: false,
-    tabs: null,
-    refused: null
-  };
+  const model = { pairings: [], adding: false, asked: null, refused: null };
   const draw = () => render(model, document);
-  const recount = async () => {
-    if (model.state.connection !== "paired") return;
-    model.tabs = await countBuddiTabs(chrome);
+  const take = (answer) => {
+    if (!answer) return;
+    if (answer.pairings) model.pairings = answer.pairings;
+    if (answer.asked !== void 0) model.asked = answer.asked;
+    if (model.asked && !model.adding && document.activeElement !== field) field.value = model.asked;
+  };
+  const refresh = async () => {
+    take(await ask({ type: "buddi-get-state" }));
     draw();
   };
-  const address = await ask({ type: "buddi-gateway" });
-  if (address?.gateway) {
-    model.gateway = address.gateway;
-    field.value = address.gateway;
-  }
-  const current = await ask({ type: "buddi-get-state" });
-  if (current?.state) model.state = current.state;
+  const pushed = throttle(() => {
+    void refresh();
+  }, REDRAW_MS);
+  await refresh();
+  if (model.asked) model.adding = true;
   draw();
-  void recount();
   chrome.runtime.onMessage.addListener((message) => {
-    const frame = message;
-    if (frame?.type !== "buddi-state" || !frame.state) return;
-    model.state = frame.state;
-    draw();
-    void recount();
+    if (message?.type === "buddi-state") pushed();
   });
   setInterval(() => {
-    void ask({ type: "buddi-get-state" }).then((answer) => {
-      if (!answer?.state || JSON.stringify(answer.state) === JSON.stringify(model.state)) return;
-      model.state = answer.state;
+    pushed();
+  }, 3e3);
+  const list = byId(document, "buddis");
+  list.addEventListener("change", (event) => {
+    const hit = rowOf(event.target, model);
+    if (!hit || !event.target.classList.contains("buddi-switch")) return;
+    void ask({ type: "buddi-enable", id: hit.entry.id, enabled: event.target.checked }).then((answer) => {
+      take(answer);
       draw();
-      void recount();
     });
-  }, 3e3);
-  wireCopy(byId(document, "copy"), () => byId(document, "code").textContent ?? "");
-  byId(document, "connect").addEventListener("click", async () => {
-    const gateway = field.value.trim();
+  });
+  list.addEventListener("click", (event) => {
+    const hit = rowOf(event.target, model);
+    const button = event.target?.closest?.("button");
+    if (!hit || !button) return;
+    const { entry, row } = hit;
+    if (button.classList.contains("buddi-copy")) {
+      copyInto(button, () => part(row, "code").textContent ?? "");
+      return;
+    }
+    if (button.classList.contains("buddi-retry")) {
+      void ask({ type: "buddi-retry", id: entry.id }).then((answer) => {
+        take(answer);
+        draw();
+      });
+      return;
+    }
+    if (button.classList.contains("buddi-remove")) {
+      void ask({ type: "buddi-remove", id: entry.id }).then((answer) => {
+        take(answer);
+        draw();
+      });
+      return;
+    }
+    if (button.classList.contains("buddi-open")) {
+      const url = dashboardUrl(entry.origin);
+      if (url) void chrome.tabs.create({ url });
+      return;
+    }
+    if (button.classList.contains("buddi-settings")) {
+      let lost = false;
+      const away = () => {
+        lost = true;
+      };
+      window.addEventListener("blur", away, { once: true });
+      document.addEventListener("visibilitychange", away, { once: true });
+      openSettings({
+        gateway: entry.origin,
+        code: entry.state.connection === "pairing" ? entry.state.code : null,
+        userAgent: navigator.userAgent,
+        // A link clicked in this page: Chrome hands buddi:// to the app registered for it, or does nothing.
+        launch: (url) => {
+          const link = document.createElement("a");
+          link.href = url;
+          link.rel = "noopener";
+          link.click();
+        },
+        openTab: (url) => {
+          void chrome.tabs.create({ url });
+        },
+        focusLost: () => lost || !document.hasFocus()
+      });
+    }
+  });
+  const connect = async () => {
     model.refused = null;
-    model.editing = false;
-    const answer = await ask({ type: "buddi-connect", gateway });
+    const answer = await ask({ type: "buddi-add", gateway: field.value.trim() });
     if (answer?.error) model.refused = answer.error;
-    else model.gateway = gateway || model.gateway;
-    if (answer?.state) model.state = answer.state;
+    else {
+      model.adding = false;
+      model.asked = null;
+    }
+    take(answer);
     draw();
+  };
+  byId(document, "connect").addEventListener("click", () => {
+    void connect();
   });
   field.addEventListener("keydown", (event) => {
-    if (event.key === "Enter") byId(document, "connect").click();
+    if (event.key === "Enter") void connect();
   });
-  byId(document, "not-this").addEventListener("click", () => {
-    model.editing = true;
+  byId(document, "add-open").addEventListener("click", () => {
+    model.adding = true;
+    model.refused = null;
     draw();
     field.focus();
     field.select();
   });
-  const open = (hash) => {
-    const url = dashboardUrl(model.gateway, hash);
-    if (url) void chrome.tabs.create({ url });
-  };
-  byId(document, "open-settings").addEventListener("click", () => {
-    let lost = false;
-    const away = () => {
-      lost = true;
-    };
-    window.addEventListener("blur", away, { once: true });
-    document.addEventListener("visibilitychange", away, { once: true });
-    openSettings({
-      gateway: model.gateway,
-      code: model.state.connection === "pairing" ? model.state.code : null,
-      userAgent: navigator.userAgent,
-      // A link clicked in this page: Chrome hands buddi:// to the app registered for it, or does nothing.
-      launch: (url) => {
-        const link = document.createElement("a");
-        link.href = url;
-        link.rel = "noopener";
-        link.click();
-      },
-      openTab: (url) => {
-        void chrome.tabs.create({ url });
-      },
-      focusLost: () => lost || !document.hasFocus()
-    });
+  byId(document, "add-cancel").addEventListener("click", () => {
+    model.adding = false;
+    model.refused = null;
+    draw();
   });
-  byId(document, "open-buddi").addEventListener("click", () => open(""));
   void wireDownloads(document, chrome.permissions);
-  byId(document, "forget").addEventListener("click", async () => {
-    const answer = await ask({ type: "buddi-forget" });
-    if (answer?.state) {
-      model.state = answer.state;
-      model.tabs = null;
-      draw();
-    }
-  });
 }
 if (typeof chrome !== "undefined" && chrome?.runtime?.onMessage) void main();
 export {
   APP_WAIT_MS,
   COPIED_FOR,
+  REDRAW_MS,
   SETTINGS_HASH,
   appSettingsLink,
-  countBuddiTabs,
+  copyInto,
   dashboardUrl,
   groupCode,
   openSettings,
   render,
+  rowView,
   settingsWebUrl,
+  summary,
+  throttle,
   triesApp,
-  viewOf,
   wireCopy,
   wireDownloads,
   workingLine