aimeat 2.6.1 → 3.0.0

package/dist/public/components/HomeUiSwitch.js

@@ -0,0 +1,78 @@
+/**
+ * @file HomeUiSwitch.js
+ * @description The switch between the new home and the old profile — ONE component, mounted on
+ *   both sides, because a person has to be able to get back from wherever they are.
+ *
+ *   It was in neither place for longer than it should have been. It started inside the new home's
+ *   settings, which you had to already be in; briefly on the landing page, where an internal
+ *   UI-version toggle has no business sitting above the sentence that says what this company is;
+ *   and then nowhere on the old profile at all, which left the only route a hand-typed URL.
+ *
+ *   It reads which side you are on rather than guessing, so the words are never wrong, and it says
+ *   where it goes rather than what it is called: "beta", "remake" and a version number mean
+ *   nothing to the person reading them.
+ *
+ *   Switching records the choice on the ACCOUNT (so it follows to another device) and increments
+ *   `switched`. It never rewrites `track` — that is which path the account was CREATED on, and a
+ *   cohort whose membership moves as people wander measures nothing.
+ * @structure HomeUiSwitch({ className })
+ * @usage
+ *   import { HomeUiSwitch } from '/components/HomeUiSwitch.js';
+ *   html`<${HomeUiSwitch} />`
+ * @version-history
+ *   v1.0.0 — 2026-08-08 — Extracted so the old profile and the new home mount the same control.
+ */
+import { h } from 'preact';
+import { useState, useEffect, useCallback } from 'preact/hooks';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+import { api, apiGet } from '/js/api.js';
+import { swallowed } from '/js/swallowed.js';
+
+const tr = (key, fallback) => { const v = t(key); return v && v !== key ? v : fallback; };
+
+export function HomeUiSwitch({ className = '' }) {
+  const [ui, setUi] = useState(null);      // 'home' | 'profile'
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    let alive = true;
+    apiGet('/v1/home/ui-track')
+      .then(r => { if (alive) setUi(r?.data?.ui ?? null); })
+      .catch(e => swallowed('HomeUiSwitch: ui-track', e));
+    return () => { alive = false; };
+  }, []);
+
+  const flip = useCallback(async () => {
+    const next = ui === 'home' ? 'profile' : 'home';
+    setBusy(true);
+    try {
+      const r = await api('/v1/home/ui-track', { method: 'PUT', body: JSON.stringify({ ui: next }) });
+      // A full load, not an in-app route change: the two sides are different shells, and the
+      // server decides where this account lands.
+      window.location.href = r?.data?.landing || (next === 'home' ? '/v1/home' : '/v1/profile');
+    } catch (e) {
+      swallowed('HomeUiSwitch: switch', e);
+      setBusy(false);
+    }
+  }, [ui]);
+
+  // Render nothing until the side is known — a control that flips its own label a moment after you
+  // read it is worse than one that arrives a moment late.
+  if (!ui) return null;
+
+  return html`
+    <div class="ui-switch ${className}">
+      <span class="ui-switch-state">
+        ${ui === 'home'
+          ? tr('home.switch.here', 'You are using the new home view.')
+          : tr('home.switch.hereProfile', 'You are using the old profile.')}
+      </span>
+      <button type="button" class="btn-outline ui-switch-btn" disabled=${busy} onClick=${flip}>
+        ${ui === 'home'
+          ? tr('home.switch.toProfile', 'Go back to the old profile')
+          : tr('home.switch.toHome', 'Try the new home')}
+      </button>
+    </div>`;
+}

package/dist/public/components/ImageDeliverable.js

@@ -32,6 +32,7 @@ import { h } from 'preact';
 import { useState, useEffect, useRef } from 'preact/hooks';
 import htm from 'htm';
 import { t } from '/js/i18n.js';
+import { authHeaders } from '/js/services/auth.js';
 import { Markdown } from '/components/Markdown.js';
 import { JsonNode } from '/components/JsonView.js';
 
@@ -150,9 +151,7 @@ export function ImageView({ desc }) {
     if (!authed) { setSrc(url); setFailed(false); return undefined; }
     let cancelled = false;
     setSrc(null); setFailed(false);
-    const headers = /** @type {Record<string,string>} */ ({});
-    const session = window.AIMEAT?.auth?.getSession?.();
-    if (session?.jwt) headers['Authorization'] = 'Bearer ' + session.jwt;
+    const headers = /** @type {Record<string,string>} */ ({ ...authHeaders() });
     fetch(url, { headers })
       .then(r => { if (!r.ok) throw new Error(String(r.status)); return r.blob(); })
       .then(blob => {

package/dist/public/components/LinkPreview.js

@@ -6,19 +6,39 @@
  *   URL so the SPA's remote-image CSP is satisfied. `MessageLinkPreviews` extracts the URLs from a
  *   message body and renders a card per link, each with a ✕ that hides it (persisted in localStorage,
  *   so a dismissed card stays hidden). `extractUrls` is exported for reuse/testing.
- * @structure extractUrls(text,max) · LinkPreview({url,onDismiss}) · MessageLinkPreviews({msg})
+ * @structure extractUrls(text,max) · useSeenInViewport(ref) · LinkPreview({url,onDismiss}) · MessageLinkPreviews({msg})
  * @usage html`<${MessageLinkPreviews} msg=${msg} />`
  * @version-history
+ *   v1.1.0 — 2026-08-03 — Lazy unfurl: a message's preview cards mount only once the message scrolls
+ *     near the viewport (IntersectionObserver, 200px margin) — opening a long thread no longer fires
+ *     an unfurl request for every link in the whole history.
  *   v1.0.0 — 2026-07-21 — Initial link-preview cards (inbox message threads).
  */
 import { h } from 'preact';
-import { useState, useEffect } from 'preact/hooks';
+import { useState, useEffect, useRef } from 'preact/hooks';
 import htm from 'htm';
 const html = htm.bind(h);
 import { t } from '/js/i18n.js';
 import { escHtml } from '/js/utils.js';
 import * as unfurl from '/js/services/unfurl.js';
 
+/** True once `ref`'s element has been near the viewport (within 200px) at least once, then stays true.
+ *  Drives lazy unfurling: a message deep in a long thread fetches its preview only when scrolled to,
+ *  not on thread load (a 400-message history used to fire ~80 unfurl requests on open). Falls back to
+ *  "immediately visible" where IntersectionObserver is unavailable. */
+function useSeenInViewport(ref) {
+  const [seen, setSeen] = useState(typeof IntersectionObserver === 'undefined');
+  useEffect(() => {
+    if (seen || !ref.current) return undefined;
+    const io = new IntersectionObserver((entries) => {
+      if (entries.some(e => e.isIntersecting)) { setSeen(true); io.disconnect(); }
+    }, { rootMargin: '200px 0px' });
+    io.observe(ref.current);
+    return () => io.disconnect();
+  }, [seen, ref]);
+  return seen;
+}
+
 /** Pull up to `max` distinct bare http(s) URLs out of a message body, trimming trailing sentence
  *  punctuation (mirrors the Markdown autolink trimming so the card links the same target the text does). */
 export function extractUrls(text, max = 3) {
@@ -82,10 +102,13 @@ export function LinkPreview({ url, onDismiss }) {
     </div>`;
 }
 
-/** All preview cards for one message: a card per non-dismissed URL in its body. */
+/** All preview cards for one message: a card per non-dismissed URL in its body. The cards mount (and
+ *  unfurl) only once this message has scrolled near the viewport — see useSeenInViewport. */
 export function MessageLinkPreviews({ msg }) {
   const urls = extractUrls(msg?.body || '');
   const [dismissed, setDismissed] = useState(loadDismissed);
+  const hostRef = useRef(null);
+  const seen = useSeenInViewport(hostRef);
   if (urls.length === 0) return null;
   const visible = urls.filter(u => !dismissed.has(`${msg.id}::${u}`));
   if (visible.length === 0) return null;
@@ -95,7 +118,7 @@ export function MessageLinkPreviews({ msg }) {
     setDismissed(next);
     saveDismissed(next);
   };
-  return html`<div class="inbox-linkcards">
-    ${visible.map(u => html`<${LinkPreview} key=${u} url=${u} onDismiss=${dismiss} />`)}
+  return html`<div class="inbox-linkcards" ref=${hostRef}>
+    ${seen ? visible.map(u => html`<${LinkPreview} key=${u} url=${u} onDismiss=${dismiss} />`) : null}
   </div>`;
 }

package/dist/public/components/NotificationBell.js

@@ -3,7 +3,7 @@
  * @description Header notification bell — shows the unread count and a dropdown of the user's
  *   in-app notifications (GET /v1/notifications). Opening the dropdown marks them read. Refreshes on
  *   the SSE `aimeat-live-update` event and a 45s poll, so a workspace-access approval (or request)
- *   surfaces without the user having to guess. Self-contained: reads the JWT from window.AIMEAT.auth.
+ *   surfaces without the user having to guess. Reads the JWT from the session service.
  *   Exports openNotificationLink() — the ONE translation from a notification link/URL into SPA
  *   navigation, shared by the bell dropdown and the service-worker push-click handler (spa.html).
  * @structure
@@ -19,17 +19,18 @@
  *     (approve/deny/accept/decline/reject) that call the action endpoint with the owner's session.
  *   v1.3.0 — 2026-07-19 — "Clear all" in the dropdown head (DELETE /v1/notifications) — deletes every
  *     notification for the owner (not just mark-read), optimistic empty + reconcile.
+ *   v1.3.1 — 2026-08-07 — Reads the JWT via /js/services/auth.js (single session source).
  */
 import { h } from 'preact';
 import { useState, useEffect, useRef, useCallback } from 'preact/hooks';
 import htm from 'htm';
 import { onLiveUpdate } from '/lib/live-updates.js';
 import { swallowed } from '/js/swallowed.js';
+import { getJwt } from '/js/services/auth.js';
 const html = htm.bind(h);
 
-const jwt = () => { try { return window.AIMEAT?.auth?.getSession?.()?.jwt || ''; } catch (err) { swallowed('NotificationBell', err); return ''; } };
 async function api(path, opts = {}) {
-  const token = jwt();
+  const token = getJwt();
   if (!token) return null;
   try {
     const res = await fetch(path, { ...opts, headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' + token, ...(opts.headers || {}) } });

package/dist/public/components/OpenItemsButton.js

@@ -0,0 +1,67 @@
+/**
+ * @file public/components/OpenItemsButton.js
+ * @description The header's open-items button: how many things you are going to do here, from
+ *   wherever you happen to be.
+ *
+ *   It is in the SPA header rather than on one page because the list is only useful if you can put
+ *   something on it anywhere and see the count anywhere. An earlier decision put this in the
+ *   notification bell and was reversed: the bell is what happened TO you, this is what YOU are
+ *   going to do, and mixing them makes both unreadable.
+ *
+ *   The count is one key read on the server (`/v1/open-items/count`), not the list, so the header
+ *   never pays for a payload it does not show. It refreshes on `aimeat-live-update`, which matters
+ *   here more than anywhere else: the person's own AI switches these on and off while they are
+ *   looking at the page.
+ *
+ *   Zero renders nothing. A badge reading 0 is a thing to explain, and an empty state reads as
+ *   broken.
+ * @structure OpenItemsButton({ t, onNavigate })
+ * @usage html`<${OpenItemsButton} t=${t} onNavigate=${(p) => navigate(p)} />`
+ * @version-history
+ *   v1.0.0 — 2026-08-09 — Initial (P14: the button is in the header, and P7's rejection of the
+ *     header is overruled — if it does not fit, the header gets fixed).
+ */
+import { h } from 'preact';
+import { useState, useEffect, useCallback } from 'preact/hooks';
+import htm from 'htm';
+import { openItemsCount } from '/js/services/open-items.js';
+import { swallowed } from '/js/swallowed.js';
+
+const html = htm.bind(h);
+
+/** Where the list itself renders. The button leads there; it does not duplicate the list. */
+const LIST_PATH = '/profile';
+
+export function OpenItemsButton({ t, onNavigate }) {
+  const [count, setCount] = useState(0);
+
+  const load = useCallback(async () => {
+    try { setCount(await openItemsCount()); }
+    catch (e) { swallowed('OpenItemsButton: count', e); }
+  }, []);
+
+  useEffect(() => { load(); }, [load]);
+
+  useEffect(() => {
+    const handler = () => load();
+    window.addEventListener('aimeat-live-update', handler);
+    return () => window.removeEventListener('aimeat-live-update', handler);
+  }, [load]);
+
+  if (count === 0) return null;
+
+  const label = (t?.('openItems.headerLabel') && t('openItems.headerLabel') !== 'openItems.headerLabel')
+    ? t('openItems.headerLabel') : 'Open items';
+
+  // The name is an aria-label, not a hidden span. A `.sr-only` span looked equivalent and was not:
+  // that class is not defined in this stylesheet, so the text rendered at full size and pushed the
+  // header 70px past a 390px screen — measured, and exactly the crowding P7 warned about.
+  return html`
+    <button type="button" class="open-items-btn" title=${label} aria-label=${`${label}: ${count}`}
+      onClick=${(e) => { e.preventDefault(); onNavigate?.(LIST_PATH); }}>
+      <span class="open-items-btn-mark" aria-hidden="true">○</span>
+      <span class="open-items-btn-count">${count}</span>
+    </button>`;
+}
+
+export default OpenItemsButton;

package/dist/public/components/OpenItemsList.js

@@ -0,0 +1,151 @@
+/**
+ * @file public/components/OpenItemsList.js
+ * @description The open items list: what you are going to do here, and the one prompt that takes the
+ *   whole thing into your AI chat.
+ *
+ *   ONE prompt, at the top, not one per row. An earlier version gave every row its own copy button
+ *   and that made a screen of six buttons with no obvious next move. The prompt does not contain the
+ *   items either: they go stale the moment they are copied. It tells the AI where to read them, so
+ *   what the chat sees is always what is on the list right now.
+ *
+ *   Rows carry the same three dots the cards do, in the same corner, and nothing else. There is no
+ *   Done and no Remove, because there is no done and no remove: an item is switched on or it is not.
+ *
+ *   NO AGENT PICKER. A row once carried a native select listing every reachable agent — seventy of
+ *   them on a real account, an unstyled dropdown taller than the page. Handing work to a named agent
+ *   does not belong in a list whose whole point is that you take it into your own chat, and P20 says
+ *   that chat IS the agent.
+ *
+ *   A row the AI switched on says so. That is the point where this stops being a to-do list: a
+ *   person opens their home and sees that their AI put something there while they were away.
+ *
+ *   EMPTY RENDERS NOTHING. Not a heading with an encouraging sentence under it: an empty state reads
+ *   as broken, and "you have no open items" is exactly that.
+ * @structure OpenItemsList({ compact })
+ * @usage html`<${OpenItemsList} />`
+ * @version-history
+ *   v1.0.0 — 2026-08-09 — Replaces components/IntentPool.js. One prompt at the top instead of one
+ *     per row, a state control instead of Done/Remove, and the AI's own rows are marked.
+ */
+import { h } from 'preact';
+import { useState, useEffect, useCallback } from 'preact/hooks';
+import htm from 'htm';
+import { t } from '/js/i18n.js';
+import { escHtml, timeAgo } from '/js/utils.js';
+import { apiGet } from '/js/api.js';
+import { CopyButton } from '/components/CopyButton.js';
+import { listOpenItems, switchOff } from '/js/services/open-items.js';
+import { CardMenu } from '/components/CardMenu.js';
+import { swallowed } from '/js/swallowed.js';
+
+const html = htm.bind(h);
+const tr = (key, fallback) => { const v = t(key); return v && v !== key ? v : fallback; };
+
+/** The managed prompt that teaches a chat how to work this list. Served, never inlined. */
+const LIST_PROMPT = 'open-items';
+
+
+/**
+ * Where an item came from, in words.
+ *
+ * `origin` is a machine key — "home.rooms.create", "app-catalog" — and it was being printed raw
+ * under every row. It is written for measurement, not for reading, and a person seeing it learns
+ * nothing except that something leaked.
+ */
+function originLabel(origin) {
+  if (!origin) return tr('openItems.yours', 'Yours');
+  const key = `openItems.origin.${origin}`;
+  const named = t(key);
+  if (named && named !== key) return named;
+  // An origin nobody has named yet says nothing rather than saying a key out loud.
+  return tr('openItems.yours', 'Yours');
+}
+
+export function OpenItemsList() {
+  const [items, setItems] = useState(null);
+  const [prompt, setPrompt] = useState('');
+
+  const load = useCallback(async () => {
+    try { setItems(await listOpenItems()); }
+    catch (e) { swallowed('OpenItemsList: load', e); setItems([]); }
+  }, []);
+
+  useEffect(() => { load(); }, [load]);
+
+  useEffect(() => {
+    apiGet(`/v1/prompts/${LIST_PROMPT}`)
+      .then(r => setPrompt(r?.data?.prompt || ''))
+      .catch(e => swallowed('OpenItemsList: prompt', e));
+  }, []);
+
+  // Every surface showing server data re-fetches on this. It matters more here than anywhere: the
+  // AI switches these on and off while the person is looking at the page.
+  useEffect(() => {
+    const handler = () => load();
+    window.addEventListener('aimeat-live-update', handler);
+    return () => window.removeEventListener('aimeat-live-update', handler);
+  }, [load]);
+
+  // The menu closes itself on the click, so there is no row-level busy state to show: the list
+  // simply reloads under it.
+  const act = useCallback(async (id, fn) => {
+    try { await fn(); await load(); }
+    catch (e) { swallowed('OpenItemsList: act', e); }
+  }, [load]);
+
+  // Nothing on the list → no block at all. See the file header.
+  if (!items || items.length === 0) return null;
+
+  return html`
+    <section class="open-items">
+      <div class="open-items-head">
+        <h3 class="open-items-title">
+          ${tr('openItems.title', 'Open items')} <span class="open-items-count">${items.length}</span>
+        </h3>
+        <${CopyButton}
+          text=${prompt}
+          className="btn-primary btn-sm"
+          label=${tr('openItems.copyPrompt', 'Take these into your AI chat')}
+          copiedLabel=${tr('openItems.copied', 'Copied — paste it in your chat')} />
+      </div>
+
+      <ul class="open-items-list">
+        ${items.map(i => html`
+          <li key=${i.id} class="open-items-row open-items-row--${i.status}">
+            ${/* No second state mark. There used to be a ring on the left AND the dots on the
+                 right, and on a working row they disagreed: coral circle, green dots, one item.
+                 One state, one place, and the place is the corner every card uses. */''}
+            <div class="open-items-main">
+              <div class="open-items-item">${escHtml(i.title)}</div>
+            ${/* WHO put this here is a separate fact from WHAT is happening to it, and it used to be
+                 the last arm of one ternary — so a row the AI switched on stopped saying so the
+                 moment an agent picked it up or it turned out to be a suggestion. Measured: one row
+                 in three said it. Two lines, two facts. */''}
+              <div class="open-items-meta">
+                ${i.closes_when
+                  ? tr('openItems.suggestion', 'Suggestion — it goes away once this is done')
+                  : i.agent
+                    ? `${escHtml(String(i.agent).split('#')[0])} ${tr('openItems.isDoing', 'is doing this')}`
+                    : `${originLabel(i.origin)} · ${timeAgo(i.createdAt)}`}
+                ${i.by === 'ai' && html`
+                  <span class="open-items-byai">${tr('openItems.byAi', 'your AI put this here')}</span>`}
+              </div>
+            </div>
+
+            ${/* A suggestion gets no control: it goes away by itself when its condition is true,
+                 so offering to switch it off invites a person to act on something the node is
+                 about to withdraw anyway. */''}
+            ${!i.closes_when && html`
+              <div class="open-items-control">
+                <${CardMenu} state=${i.status === 'working' ? 'working' : 'open'} label=${i.title}
+                  actions=${[{
+                    label: tr('openItems.off', 'Take it off'),
+                    run: () => act(i.id, () => switchOff(i.id)),
+                  }]} />
+              </div>`}
+          </li>`)}
+      </ul>
+    </section>`;
+}
+
+export default OpenItemsList;

package/dist/public/components/PromptCard.js

@@ -0,0 +1,128 @@
+/**
+ * @file public/components/PromptCard.js
+ * @description The prompt block: a label, a one-click copy, and — where it makes sense — a corner
+ *   menu with the two things a person actually wants next.
+ *
+ *   It was the same shape written four times in views/home (step-mat, step-agent, step-branch-b,
+ *   welcome-door). This is that shape, extracted verbatim: the markup and the classes are
+ *   unchanged, so the four places look exactly as they did.
+ *
+ *   The primary button stays ONE CLICK with no menu in front of it. That is the whole rule for this
+ *   component: copying is the thing people came to do, and putting a chooser in its way to make
+ *   room for two rarer options would be a worse product sold as a better one. Everything else lives
+ *   behind the chevron, and the chevron only appears when there is something behind it.
+ *
+ *   "Give it to an agent" appears only when an agent that actually drains a queue exists
+ *   (services/open-items.js reachableAgents). Offering a name that will sit there forever is a
+ *   graveyard, not a feature.
+ * @structure PromptCard({ label, prompt, className, copyLabel, copiedLabel, onCopied,
+ *   saveIntent, agents, onGiveToAgent, showPrompt })
+ * @usage
+ *   html`<${PromptCard} label=${t('...')} prompt=${text} copyLabel=${t('...')} />`
+ * @version-history
+ *   v1.0.0 — 2026-08-09 — Extracted from four call sites in views/home (intent pool, phase 2).
+ */
+import { h } from 'preact';
+import { useState } from 'preact/hooks';
+import htm from 'htm';
+import { t } from '/js/i18n.js';
+import { CopyButton } from '/components/CopyButton.js';
+
+const html = htm.bind(h);
+
+const tr = (key, fallback) => { const v = t(key); return v && v !== key ? v : fallback; };
+
+export function PromptCard({
+  label,
+  prompt,
+  className = 'btn-primary',
+  copyLabel,
+  copiedLabel,
+  onCopied,
+  loadingLabel,
+  /** () => Promise — called when the person picks "save for later". Omit to hide the row. */
+  saveIntent = null,
+  /** Agents that take queued work. Empty or absent hides "give it to an agent". */
+  agents = [],
+  /** (agentEntry) => Promise */
+  onGiveToAgent = null,
+  /**
+   * Extra menu rows, appended after the built-in ones: [{ label, run, disabled }].
+   *
+   * The pool's rows need "Done" and "Remove" in the same place a prompt surface offers "leave it
+   * waiting" — one chevron per row, not a chevron next to two loose buttons. Kept as data rather
+   * than baked in, because this component must not learn what an intent is.
+   */
+  extraActions = [],
+  /** Start with the prompt body visible. The four original call sites all did. */
+  showPrompt = true,
+}) {
+  const [open, setOpen] = useState(false);
+  const [bodyShown, setBodyShown] = useState(showPrompt);
+  const [saved, setSaved] = useState(false);
+  const [busy, setBusy] = useState(false);
+
+  const canGive = !!onGiveToAgent && agents.length > 0;
+  const hasMenu = !!saveIntent || canGive || !showPrompt || extraActions.length > 0;
+
+  // The card can sit inside a room card, which is an <a> under the SPA's delegated link handler.
+  // Without this, copying also navigates away and marks the room entered — already learned once in
+  // views/home/feed.js, and not worth learning twice.
+  const stop = (e) => { e.preventDefault(); e.stopPropagation(); };
+
+  async function run(fn, after) {
+    if (busy) return;
+    setBusy(true);
+    try { await fn(); after?.(); } finally { setBusy(false); setOpen(false); }
+  }
+
+  return html`
+    <div class="koti-prompt" onClick=${hasMenu ? stop : undefined}>
+      <div class="koti-prompt-head">
+        <span class="koti-prompt-label">${label}</span>
+        <div class="koti-prompt-actions">
+          <${CopyButton}
+            text=${prompt}
+            className=${className}
+            label=${copyLabel}
+            copiedLabel=${copiedLabel}
+            onCopied=${onCopied} />
+          ${hasMenu && html`
+            <button type="button" class="btn-ghost koti-prompt-more"
+              aria-expanded=${open}
+              aria-label=${tr('prompt.more', 'More')}
+              onClick=${(e) => { stop(e); setOpen(v => !v); }}>▾</button>`}
+        </div>
+      </div>
+
+      ${open && html`
+        <div class="koti-prompt-menu">
+          <button type="button" class="btn-ghost koti-prompt-menu-item"
+            onClick=${(e) => { stop(e); setBodyShown(v => !v); setOpen(false); }}>
+            ${bodyShown ? tr('prompt.hideText', 'Hide the prompt') : tr('prompt.showText', 'Show the prompt')}
+          </button>
+          ${saveIntent && html`
+            <button type="button" class="btn-ghost koti-prompt-menu-item" disabled=${busy || saved}
+              onClick=${(e) => { stop(e); run(saveIntent, () => setSaved(true)); }}>
+              ${saved ? tr('prompt.saved', 'Waiting on your list') : tr('prompt.save', 'Leave it waiting')}
+            </button>`}
+          ${canGive && agents.map(a => html`
+            <button type="button" key=${a.gaii || a.name} class="btn-ghost koti-prompt-menu-item"
+              disabled=${busy}
+              onClick=${(e) => { stop(e); run(() => onGiveToAgent(a)); }}>
+              ${tr('prompt.giveTo', 'Give it to')} ${a.display_name || a.name}
+            </button>`)}
+          ${extraActions.map((a, idx) => html`
+            <button type="button" key=${'x' + idx} class="btn-ghost koti-prompt-menu-item"
+              disabled=${busy || a.disabled}
+              onClick=${(e) => { stop(e); run(a.run); }}>
+              ${a.label}
+            </button>`)}
+        </div>`}
+
+      ${bodyShown && html`
+        <pre class="koti-prompt-body">${prompt || loadingLabel || tr('home.mat.loading', 'Loading…')}</pre>`}
+    </div>`;
+}
+
+export default PromptCard;

package/dist/public/css/components/card-menu.css

@@ -0,0 +1,64 @@
+/**
+ * @file public/css/components/card-menu.css
+ * @description The dots in the top right corner of a card, and the menu they open.
+ *
+ *   Its own file under css/components/ because that is the directory spa.html actually loads.
+ *   The first attempt appended these rules to css/components.css, which nothing links: the dots
+ *   rendered black and unpositioned, 140px down the card instead of in its corner. A stylesheet
+ *   nobody loads is not a stylesheet.
+ * @version-history
+ *   v1.0.0 — 2026-08-09 — Initial.
+ */
+
+/* ── Card menu: the dots in the top right corner of anything you can act on ────────────────────
+   Always the same corner, on every card, so a person learns it once. The dots ARE the state
+   light: grey is not on your open items, amber is waiting, green and pulsing is somebody working
+   on it right now. Three dots rather than a hamburger because the hamburger already means site
+   navigation in this product's own top bar. */
+.card-menu { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2; }
+.card-menu-dots {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 30px; height: 30px; padding: 0; line-height: 1;
+  background: var(--bg); border: 1px solid var(--border);
+  border-radius: var(--radius-xs);
+  font-size: 1.15rem; cursor: pointer; color: var(--text);
+  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
+}
+/* A resting chip, not a bare glyph. Without the fill and the border this read as the ellipsis a
+   truncated string leaves behind, and nobody could tell it was a button until the pointer arrived. */
+.card-menu-dots:hover { border-color: var(--muted); }
+
+/* State is a FILLED SHAPE, not the hue of a glyph. Measured on the first version: amber glyph on
+   card 2.1:1, green 2.5:1, grey 4.8:1 — so a card that WAS on your list read fainter than one that
+   was not, which is the light inverted. A filled chip carries the state at the contrast of the fill
+   and stays legible for anyone who does not separate those hues at all. */
+/* A light tint, a strong border and dark ink — not a saturated fill.
+   The first attempt used --warning and --success straight and measured 2.1:1 and 2.43:1 as a 30px
+   chip, under the 3:1 a non-text component needs. The second darkened them to #B45309 and #047857,
+   which cleared 4.8 and 5.25 and stopped looking like amber and green: it read as brown, and brown
+   reads as a warning rather than as "waiting". Contrast comes from the border and the ink here, so
+   the hue survives being legible. */
+.card-menu-dots--open {
+  background: #FEF3C7; border-color: #B45309; color: #78350F;
+}
+.card-menu-dots--working {
+  background: #D1FAE5; border-color: #047857; color: #065F46;
+  animation: card-menu-pulse 1.8s ease-in-out infinite;
+}
+/* Working is the one state about this moment rather than a standing fact, so it is the one that moves. */
+@keyframes card-menu-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
+@media (prefers-reduced-motion: reduce) { .card-menu-dots--working { animation: none; } }
+
+.card-menu-list {
+  position: absolute; top: calc(100% + 0.25rem); right: 0; min-width: 14rem;
+  display: flex; flex-direction: column;
+  background: var(--bg-card); border: 1px solid var(--border);
+  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,.18));
+  overflow: hidden;
+}
+.card-menu-item {
+  background: none; border: 0; text-align: left; cursor: pointer;
+  padding: 0.6rem 0.8rem; font-size: 0.88rem; color: var(--text);
+}
+.card-menu-item:hover { background: var(--bg); }
+.card-menu-item + .card-menu-item { border-top: 1px solid var(--border); }

package/dist/public/css/components/hello-mcp.css

@@ -264,6 +264,14 @@
   cursor: pointer;
 }
 .ast-tool--active { border-color: var(--accent); color: var(--accent); }
+/* K2: the tool we point a first-timer at carries a small text badge, never an icon. */
+.ast-tool-reco {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--accent);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
 
 .ast-plans, .ast-warn, .ast-note {
   margin: 0 0 0.6rem;

package/dist/public/css/style-testbed.css

@@ -9,6 +9,8 @@
  *   clone overrides without imposing their page-container geometry.
  * @version-history
  *   v1.0.0 — 2026-06-02 — Initial testbed layout
+ *   v1.1.0 — 2026-08-08 — .stb-copy-btn / .stb-copied deleted — the output bar's copy button is .btn-primary and
+ *       confirms with the shared .copied state.
  */
 
 .stb {
@@ -122,11 +124,6 @@
 .stb-output-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
 .stb-output-title { font-size: 0.85rem; font-weight: 700; }
 .stb-output-count { color: var(--text-dim); font-weight: 500; font-size: 0.78rem; }
-.stb-copy-btn {
-  padding: 6px 14px; border: none; border-radius: var(--radius-sm);
-  background: var(--accent); color: var(--on-inverted, #fff); cursor: pointer; font-size: 0.8rem; font-weight: 600;
-}
-.stb-copy-btn.stb-copied { background: var(--success-fg, #16a34a); }
 .stb-output {
   width: 100%; box-sizing: border-box; resize: vertical;
   font-family: var(--font-mono, monospace); font-size: 0.78rem; line-height: 1.4;