@withbuddi/buddi 0.1.0-pre.24 → 0.1.0-pre.26

package/README.md

@@ -1,24 +1,34 @@
-# buddi
+<p align="center"><img src="https://raw.githubusercontent.com/withbuddi/buddi/main/docs/images/header.png" alt="buddi, with the Buddi Blob" width="800"></p>
 
-<img src="https://raw.githubusercontent.com/withbuddi/buddi/main/packages/web/public/mascot/core.png" alt="The Buddi Blob, buddi's mascot" width="160" align="right">
+**A small AI team that lives on your computer.**
 
-[withbuddi.com](https://withbuddi.com) · [npm](https://www.npmjs.com/package/@withbuddi/buddi) · [docs](docs/README.md)
+AI teammates that use tools, work on schedules, remember what matters, and
+ask before doing anything consequential.
 
-buddi is a personal agent platform you run on your own machine. An agent is a
-markdown file: a front matter that names the tools it may call, and a body that
-is its persona. Agents get real access: your mail, your files, a browser of
-their own, commands on the machine. They reach you on a dashboard in your
-browser and on Telegram. They also work while you are away: scheduled
-missions, watchers that speak only when something is wrong, reminders they set
-themselves. Anything consequential waits for your approval, as a card you
-approve or reject.
+[withbuddi.com](https://withbuddi.com) · [npm](https://www.npmjs.com/package/@withbuddi/buddi) · [docs](docs/README.md) · [plugins](https://withbuddi.com/plugins)
 
-Everything stays on your machine, in a private Postgres. The one thing that
-leaves is each agent's prompt, sent to the AI provider that agent's file names.
-So one line in one file decides which company sees that agent's conversations.
-Secrets live in a vault the agents can use but never see.
+Give each teammate a job. Planner prepares your mornings. Mail Triage watches
+your inbox. Ledger keeps an eye on your money. Add your own for anything
+else.
 
-The first agent is called buddi. It wears the Buddi Blob.
+They use tools, work with your files, browse the web in a browser of their
+own, and keep working on schedules while you're away. **Anything
+consequential stops for your approval**, as a card on the dashboard or on
+your phone.
+
+**Everything stays home.** Conversations, files and memory live in a private
+database on your machine. When a teammate uses a remote AI, the context it
+needs for that request goes to the provider and model you chose for that
+teammate. The whole list of what leaves is short enough to print, and it is
+[printed below](#where-your-data-lives-and-what-leaves-the-machine). Your
+passwords live in a vault the team can use but never see.
+
+Your first teammate is Buddi, the front desk, and the Buddi Blob is its face.
+Rename it, rewrite its personality, or add others. Under the hood every
+teammate is a markdown file, which the docs and the dashboard call an agent
+where that is the accurate word.
+
+<img src="https://raw.githubusercontent.com/withbuddi/buddi/main/docs/images/home.png" alt="The buddi dashboard: a greeting by name, an approval card, the team, what is coming up." width="100%">
 
 ---
 
@@ -91,24 +101,27 @@ The full install story, including what is not built yet, is
 
 ## The first ten minutes
 
-**The wizard.** buddi asks four things, one at a time, in a chat thread:
-
-1. **Your name**, so the agents know what to call you.
-2. **Your clock**, taken from the browser; confirm it or pick another. This is
-   what every agent means by "today".
-3. **A brain**: the AI your assistant thinks with. An API key from Anthropic
-   or OpenAI; Ollama running on this computer; Ollama Cloud or another
-   OpenAI-compatible service, with an address and a key; or Claude, with your
-   Claude subscription, where this build enables it. buddi tests it with one
-   small call before moving on.
-4. **Your assistant**: a name (buddi by default), a face (the Buddi Blob, or
-   another mascot or an emoji), and a persona you can keep or rewrite.
-
-Between the brain and the assistant, buddi checks the browser and fetches one
-if it has to. Then the assistant speaks first, in the same thread, and offers
-to reach you on your phone. Every answer keeps a "change" link, and a reload
-resumes where you were. [docs/onboarding.md](docs/onboarding.md) is the full
-script.
+**The wizard.** Five short chapters, with a map on the left so you always
+know where you are and can go back:
+
+1. **Hello**: your name and your clock, taken from the browser.
+2. **A brain**: the AI your team thinks with. Free to start with Ollama Cloud
+   in one tap; or your Claude or ChatGPT account; or an API key from
+   Anthropic, OpenAI or Google; or Ollama on this computer. buddi tests it
+   with one small call before moving on.
+3. **What buddi takes on**: your days (weather and calendars, with Planner's
+   morning brief), your mail, your money, voice, your code, pictures. Each
+   tile installs its plugin in the background, from withbuddi.com, while you
+   answer the rest; nothing runs before you have seen its card.
+4. **Reach me**: your phone through Telegram, a mailbox for Mail Triage, buddi
+   as an app and a browser of its own. All optional.
+5. **Your assistant**: a name, a colour for the Blob, and a persona you can
+   keep or rewrite.
+
+Then your assistant speaks first, in the real chat, already knowing your
+clock, the weather at home and who is on the team, and one card lists what is
+still waiting. Every chapter keeps a "change" link, and a reload resumes where
+you were. [docs/onboarding.md](docs/onboarding.md) is the full script.
 
 **The first chat.** A few things to try:
 
@@ -122,23 +135,24 @@ script.
   about what it shows.
 - "Every Friday at 6, send me a recap of the week." A mission, on a schedule.
 
-**A mailbox.** In Settings → Email, add an account with its address and an app
-password. buddi then proposes a Mail agent (@mail) that triages new mail in
-the background. Accept it with **Create @mail**; until you do, mail is fetched
-and threaded but nobody reads it. Sending always stops at an approval card
+**A mailbox.** In Settings → Mail, or in chapter 4 of the wizard, add an
+account with its address and an app password. buddi then offers Mail Triage,
+the teammate who reads new mail in the background. Accept it with one click;
+until you do, mail is fetched and threaded but nobody reads it. Sending always stops at an approval card
 that shows the full message. [docs/email.md](docs/email.md) has the rest.
 
-**More agents.** Agent Father (@father) makes and changes agents. Say what you
-want one to do; it interviews you, proposes the file and the tools it should
-have, and writes it once you approve.
+**More teammates.** Home and the Agents page offer a starter team: Scout,
+Planner and Keeper, one tap each. For anything else, Agent Father (@father)
+interviews you, proposes the file and the tools it should have, and writes it
+once you approve.
 
 ---
 
 ## How it works
 
-**Agents are files.** One folder per agent, with an `agent.md` in it. The
-front matter says which tools the agent may call; nothing else is callable,
-and no conversation can grant more. The body is the persona, in plain
+**A teammate is a file.** One folder per agent, with an `agent.md` in it. The
+front matter says which tools it may call; nothing else is callable, and no
+conversation can grant more. The body is the persona, in plain
 markdown. The provider and model are a line in the same file, and the
 dashboard's Agents page edits them for you.
 
@@ -159,9 +173,10 @@ talking to. Today is {{today}}.
 
 **Tools and plugins.** The core has no tools; every capability is a plugin.
 Built in: `system`, `email`, `memory`, `artifacts`, `web`, `browser`, `host`,
-`reminder`, `schedule`, `goal`, `learning` and `canvas`. Installable from npm,
-on the Plugins page or with `buddi plugins install`: `finance`, `developer`
-and `image`. Installing a plugin shows everything it brings first: each tool
+`reminder`, `schedule`, `goal`, `learning` and `canvas`. Installable from
+[withbuddi.com/plugins](https://withbuddi.com/plugins), on the Plugins page's
+Browse tab or with `buddi plugins install`: `weather`, `calendar`, `finance`,
+`image`, `speech` and more. Installing a plugin shows everything it brings first: each tool
 and whether it runs without asking, the database schema it will own, what it
 runs on a timer, and the hosts it talks to. Nothing happens until you approve.
 [docs/plugins.md](docs/plugins.md) is the guide to writing one.

package/examples/agents/agent-father/agent.md

@@ -28,6 +28,7 @@ So your job is not to write files quickly. It is to work out what the owner actu
 ## The tool grant is the whole decision
 - Call platform.installed_tools before you propose a grant. Name only families and tools that are actually installed here; never invent one, and never guess a name that sounds right.
 - Propose the smallest grant that does the job, and say out loud why each family is there: "memory so it remembers what you tell it, reminders so it can put something on the clock — nothing else". If you cannot give a reason for a family, it does not belong in the grant.
+- owner.notify lets an agent message the owner on their phone now, within limits the owner controls; it reaches only the owner, so it is a sensible grant for any agent that may need to say "this just happened".
 - Never propose finance or mail access to an agent that does not need it. Money and inbox tools read the owner's most sensitive data, and an agent that has them because it might be useful later is a standing risk with no benefit today. If the owner asks for them, ask what specifically the agent has to do with them — then grant the narrowest thing that does it, a single tool rather than the family where a single tool is enough.
 - Before the approval arrives, say in one sentence what the grant reaches, in your own plain words: "this lets it read every account balance and transaction you have recorded". The owner should already know what the approval says before it appears.
 - Widening an existing agent's grant is the same decision made again, and a bigger one. Treat "can you give @scout the finance tools" as a fresh interview, not an edit.

package/extension/background.js

@@ -1266,6 +1266,7 @@ function handleExternal(message, context, respond) {
 var DEFAULT_GATEWAY = "http://127.0.0.1:4317";
 var GATEWAY_KEY = "gateway";
 var MAX_BACKOFF = 3e4;
+var KNOCK_MS = 3e3;
 var SILENCE = 7e4;
 function socketUrl(address) {
   const parsed = new URL(address);
@@ -1353,6 +1354,11 @@ async function connect() {
     protocol.closed(error instanceof Error ? error.message : String(error));
     return;
   }
+  if (attempt > 0 && !await answering(url)) {
+    protocol.closed("buddi did not answer at this address. Is it running?");
+    schedule();
+    return;
+  }
   const opening = new WebSocket(url);
   socket = opening;
   opening.addEventListener("open", () => {
@@ -1380,10 +1386,27 @@ async function connect() {
       clearTimeout(silence);
       silence = void 0;
     }
-    protocol.closed("Not connected to buddi.");
+    protocol.closed("buddi did not answer at this address. Is it running?");
     schedule();
   });
 }
+async function answering(socket2) {
+  let http;
+  try {
+    http = new URL(socket2);
+    http.protocol = http.protocol === "wss:" ? "https:" : "http:";
+    http.pathname = "/api/version";
+    http.search = "";
+  } catch {
+    return false;
+  }
+  try {
+    await fetch(http.toString(), { method: "GET", cache: "no-store", signal: AbortSignal.timeout(KNOCK_MS) });
+    return true;
+  } catch {
+    return false;
+  }
+}
 function schedule() {
   if (timer) return;
   const wait = Math.min(MAX_BACKOFF, 1e3 * 2 ** Math.min(attempt, 5));

package/extension/manifest.json

@@ -1,8 +1,8 @@
 {
   "manifest_version": 3,
   "name": "buddi",
-  "version": "0.1.0",
-  "description": "Lets your buddi work in this browser, in background tabs grouped under \"buddi\". It needs access to every site because the sites it opens are the ones you ask it for; it opens none on its own.",
+  "version": "0.1.0.26",
+  "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.",
   "minimum_chrome_version": "116",
   "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAwR4JT/OlKKPcZQ33euO9mSv7RrSIWNVanldhT2Uzc9YfzF/X0lg5NfXLc+G/UGFjB8v+uMCbpMhRBZ2SVwDHQH3buv3VEUzuOIDTPHgv99T5lq5imZrDxmIE+EL/fWrsjhcXaIB4e4fn0tJqw6ivJUGmYpG5XhWn65nlLniHfFBKMpZ/y7bVnvfzAgMQUa13qTAVxPTpMRtNl/flQq4Q/vWYm28H7W7OzygDV+/4X2azUrB8yPk67QsipbdDLxiX2GMxjXuKK6iD5CQiytoxTsAqUzB886HbOZsxJfQpRIjrUgBmGjLyaKuz617ZGJW9zS23LmnlL6mkX3+ggca1AQIDAQAB",
   "permissions": [
@@ -37,5 +37,6 @@
     "32": "icons/32.png",
     "48": "icons/48.png",
     "128": "icons/128.png"
-  }
+  },
+  "version_name": "0.1.0-pre.26"
 }

package/extension/popup.css

@@ -3,86 +3,137 @@
  *
  * It cannot import the web bundle: this is a separate origin with no build step
  * in common, so the tokens below are copied from `packages/web/src/tokens.css`
- * and only the ones this 320px panel uses. Same rule as there, though: nothing
- * in this file writes a colour that is not a token, and the dark variant is the
- * same three-state cascade.
+ * (only the ones this 340px panel uses) and the controls follow `ui.css`.
+ * Nothing in this file writes a colour that is not a token, and the dark
+ * variant is the same cascade as the dashboard's.
+ *
+ * The fonts are the dashboard's too, shipped inside the extension: an extension
+ * page may load nothing remote.
  */
 
+@font-face {
+  font-family: 'DM Sans Variable';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 1000;
+  src: url('fonts/dm-sans-latin-standard-normal.woff2') format('woff2-variations');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'DM Sans Variable';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 1000;
+  src: url('fonts/dm-sans-latin-ext-standard-normal.woff2') format('woff2-variations');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: 'DM Mono';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('fonts/dm-mono-latin-400-normal.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'DM Mono';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 500;
+  src: url('fonts/dm-mono-latin-500-normal.woff2') format('woff2');
+}
+
 :root {
-  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
-  --font-display: ui-rounded, 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Display', 'Segoe UI', Roboto, sans-serif;
-  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+  --font-sans: 'DM Sans Variable', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
 
-  --text-2xs: 10px;
   --text-xs: 11px;
   --text-sm: 12px;
   --text-md: 13px;
   --text-base: 14px;
-  --text-2xl: 22px;
+  --text-lg: 15px;
+  --text-xl: 18px;
+  --text-3xl: 30px;
 
+  --leading-tight: 1.3;
   --leading: 1.5;
   --weight-normal: 450;
   --weight-medium: 550;
   --weight-semibold: 650;
+  --weight-bold: 750;
+  --tracking-title: -0.01em;
 
+  --space-0: 2px;
   --space-1: 4px;
   --space-2: 8px;
   --space-3: 12px;
   --space-4: 16px;
+  --space-5: 20px;
 
   --control-h: 32px;
   --control-h-sm: 26px;
+  --popup-w: 340px;
+  --blob: 28px;
+  --pill-h: 20px;
+  --dot: 6px;
 
-  --radius-sm: 4px;
   --radius: 7px;
+  --radius-lg: 12px;
   --radius-pill: 999px;
 
-  --bg: #f7f6f4;
+  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
+  --dur-fast: 120ms;
+  --dur-view: 150ms;
+
   --surface: #ffffff;
-  --surface-sunken: #f1efec;
-  --line: #e3e1dd;
+  --surface-sunken: #e6eef9;
+  --line: #dbe4f1;
+  --line-strong: #c3d0e3;
 
-  --text: #1b1a18;
-  --text-muted: #6b6862;
+  --text: #152642;
+  --text-muted: #5a6477;
+  --text-faint: #8b92a0;
 
-  --accent: #3d5bd6;
-  --accent-soft: #e8ecfb;
+  --accent: #2b6fe6;
+  --accent-hover: #245fc7;
+  --accent-soft: #e7f0fe;
   --accent-contrast: #ffffff;
 
   --good: #1f7a46;
   --good-soft: #e3f3e9;
   --warning: #8a5a00;
   --warning-soft: #fbf0d9;
-  --critical: #a52a2a;
-  --critical-soft: #fae7e5;
+  --critical: #c0352a;
+  --critical-soft: #ffe9e6;
 
-  --focus-ring: #3d5bd6;
+  --focus-ring: #2b6fe6;
 
   color-scheme: light;
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme='light']) {
-    --bg: #131416;
-    --surface: #1b1d20;
-    --surface-sunken: #101113;
-    --line: #2f3238;
+    --surface: #131e31;
+    --surface-sunken: #0a1322;
+    --line: #22324c;
+    --line-strong: #37465f;
 
-    --text: #e8e6e3;
-    --text-muted: #9c988f;
+    --text: #ecf1f8;
+    --text-muted: #a3adbe;
+    --text-faint: #717c8f;
 
-    --accent: #93a8f5;
-    --accent-soft: #212a4a;
-    --accent-contrast: #0e1013;
+    --accent: #7db3ff;
+    --accent-hover: #9ac4ff;
+    --accent-soft: #16294a;
+    --accent-contrast: #0b1426;
 
     --good: #5fc98a;
-    --good-soft: #17301f;
-    --warning: #e0ad4b;
+    --good-soft: #13301f;
+    --warning: #e8b454;
     --warning-soft: #33280f;
-    --critical: #f0827c;
-    --critical-soft: #3a1c1b;
+    --critical: #ff8e82;
+    --critical-soft: #3a1d1c;
 
-    --focus-ring: #9cc0f4;
+    --focus-ring: #9ac4ff;
 
     color-scheme: dark;
   }
@@ -90,18 +141,25 @@
 
 * { box-sizing: border-box; }
 
+/* `hidden` means hidden, whatever display a rule below gives the element. */
+[hidden] { display: none !important; }
+
+html, body { margin: 0; padding: 0; }
+
 body {
-  width: 320px;
-  margin: 0;
+  width: var(--popup-w);
   background: var(--surface);
   color: var(--text);
   font-family: var(--font-sans);
   font-size: var(--text-base);
   font-weight: var(--weight-normal);
   line-height: var(--leading);
+  -webkit-font-smoothing: antialiased;
 }
 
-/* ---- the head: the mark, the name, the one word of state ---- */
+p { margin: 0; }
+
+/* ---- the head: the Blob, the name, the one word of state ---- */
 
 .head {
   display: flex;
@@ -111,50 +169,57 @@ body {
   border-bottom: 1px solid var(--line);
 }
 
-.mark {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  border-radius: var(--radius-sm);
-  background: var(--accent);
-  color: var(--accent-contrast);
-  font-family: var(--font-display);
-  font-size: var(--text-base);
-  font-weight: var(--weight-semibold);
+.blob { width: var(--blob); height: var(--blob); flex: none; user-select: none; }
+
+.wordmark {
+  font-size: var(--text-xl);
+  font-weight: var(--weight-bold);
+  letter-spacing: var(--tracking-title);
   line-height: 1;
-  user-select: none;
 }
 
-.head-name { font-family: var(--font-display); font-weight: var(--weight-semibold); }
-
-.state {
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  height: var(--pill-h);
   margin-left: auto;
-  padding: 2px var(--space-2);
+  padding: 0 var(--space-2);
+  border: 1px solid var(--line);
   border-radius: var(--radius-pill);
+  background: var(--surface);
+  color: var(--text-muted);
   font-size: var(--text-xs);
   font-weight: var(--weight-medium);
-  background: var(--surface-sunken);
-  color: var(--text-muted);
+  white-space: nowrap;
 }
-.state[data-tone='good'] { background: var(--good-soft); color: var(--good); }
-.state[data-tone='waiting'] { background: var(--warning-soft); color: var(--warning); }
-.state[data-tone='bad'] { background: var(--critical-soft); color: var(--critical); }
+.pill::before { content: ''; width: var(--dot); height: var(--dot); border-radius: 50%; background: currentColor; }
+.pill[data-tone='good'] { color: var(--good); background: var(--good-soft); border-color: transparent; }
+.pill[data-tone='waiting'] { color: var(--warning); background: var(--warning-soft); border-color: transparent; }
+.pill[data-tone='bad'] { color: var(--critical); background: var(--critical-soft); border-color: transparent; }
 
-/* ---- stacked sections, separated by a hairline and nothing else ---- */
+/* ---- one view at a time, faded in ---- */
 
-.section {
+.view {
   display: flex;
   flex-direction: column;
-  gap: var(--space-2);
-  padding: var(--space-3) var(--space-4);
-  border-bottom: 1px solid var(--line);
+  gap: var(--space-3);
+  padding: var(--space-4);
+  animation: view-in var(--dur-view) var(--ease);
 }
-.section:last-of-type { border-bottom: 0; }
+
+@keyframes view-in { from { opacity: 0; } to { opacity: 1; } }
+
+@media (prefers-reduced-motion: reduce) {
+  .view { animation: none; }
+  .btn { transition: none; }
+}
+
+.field-group { display: flex; flex-direction: column; gap: var(--space-1); }
 
 .label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-muted); }
-.hint { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
+.hint { font-size: var(--text-sm); color: var(--text-muted); }
+.quiet { font-size: var(--text-md); color: var(--text-muted); }
 
 .field {
   height: var(--control-h);
@@ -167,34 +232,87 @@ body {
   font-size: var(--text-md);
 }
 .field:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
+.field:disabled { color: var(--text-muted); }
+
+.notice {
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-lg);
+  font-size: var(--text-md);
+}
+.notice[data-tone='critical'] { background: var(--critical-soft); color: var(--critical); }
 
 /* The one that acts sits on the right. */
-.actions { display: flex; justify-content: flex-end; }
-.actions-left { justify-content: flex-start; }
+.actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }
+.actions-split { justify-content: space-between; }
 
-.button {
-  height: var(--control-h-sm);
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--control-h);
   padding: 0 var(--space-3);
-  border: 1px solid transparent;
+  border: 1px solid var(--line);
   border-radius: var(--radius);
-  background: var(--accent);
-  color: var(--accent-contrast);
+  background: var(--surface);
+  color: var(--text);
   font-family: inherit;
   font-size: var(--text-md);
   font-weight: var(--weight-medium);
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease);
+}
+.btn:hover:not(:disabled) { border-color: var(--line-strong); background: var(--surface-sunken); }
+.btn:active:not(:disabled) { transform: translateY(1px); }
+.btn:disabled { opacity: 0.45; cursor: default; }
+.btn:focus-visible, .link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
+.btn[data-size='sm'] { height: var(--control-h-sm); padding: 0 var(--space-2); font-size: var(--text-sm); }
+.btn[data-variant='accent'] { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
+.btn[data-variant='accent']:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
+
+.link {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--text-muted);
+  font-family: inherit;
+  font-size: var(--text-sm);
   cursor: pointer;
+  text-underline-offset: 2px;
 }
-.button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
-.button-quiet { background: transparent; border-color: var(--line); color: var(--text-muted); }
+.link:hover { color: var(--text); text-decoration: underline; }
+
+/* ---- the code: large, tabular, grouped in threes ---- */
 
-.code-row { display: flex; align-items: center; gap: var(--space-2); }
-.code-row .code { flex: 1; }
+.code-tile {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-lg);
+  background: var(--surface-sunken);
+}
 
 .code {
-  margin: 0;
+  flex: 1;
   font-family: var(--font-mono);
-  font-size: var(--text-2xl);
-  font-weight: var(--weight-semibold);
-  letter-spacing: 0.08em;
-  color: var(--accent);
+  font-size: var(--text-3xl);
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.02em;
+  line-height: var(--leading-tight);
+  color: var(--text);
+  white-space: pre;
+}
+
+/* ---- connected ---- */
+
+.facts { display: flex; flex-direction: column; gap: var(--space-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);
+  border-top: 1px solid var(--line);
 }