aimeat 2.7.0 → 3.1.0

package/dist/public/views/home/settings-dialog.js

@@ -0,0 +1,96 @@
+/**
+ * @file public/views/home/settings-dialog.js
+ * @description The home's settings dialog: everything a person actually adjusts, in four tabs,
+ *   reached from one button in the home header.
+ *
+ *   **It imports the profile's sections; it does not copy them.** Every panel here is an existing
+ *   component mounted in a new place, so a fix lands in both surfaces at once — the same rule
+ *   AgentConsent was extracted under. Nothing in public/views/profile/ is modified.
+ *
+ *   Two things make that work and are easy to lose:
+ *
+ *   1. **The `pf` wrapper.** Most profile CSS is descendant-scoped under `.pf`. Without that class
+ *      on the dialog body, three of the four tabs render unstyled and the wrong conclusion is
+ *      "these need rewriting".
+ *   2. **Module-level component identity.** Defined here rather than inside HomeView, because
+ *      HomeView re-renders on every `aimeat-live-update` and a component whose identity is
+ *      recreated per render makes Preact unmount and remount the OPEN dialog — the documented
+ *      strobe in components/Modal.js.
+ * @structure HomeSettingsDialog({ open, onClose, session, showToast })
+ * @usage
+ *   import { HomeSettingsDialog } from '/views/home/settings-dialog.js';
+ *   html`<${HomeSettingsDialog} open=${open} onClose=${close} session=${session} ... />`
+ * @version-history
+ *   v1.0.0 — 2026-08-07 — Initial.
+ *   v1.1.0 — 2026-08-08 — The switch is the shared components/HomeUiSwitch.js, mounted here and on
+ *     the old profile's Home view, so the two sides cannot say different things.
+ */
+import { h } from 'preact';
+import { useState } from 'preact/hooks';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+import { Modal } from '/components/Modal.js';
+import { HomeUiSwitch } from '/components/HomeUiSwitch.js';
+import { OpenRouterSettings } from '/views/profile/openrouter-settings.js';
+import { ConnectedAppsSection } from '/views/profile/access-tab/connected-apps.js';
+import { ConnectionsSection } from '/views/profile/access-tab/connections.js';
+import { AccessTokensSection } from '/views/profile/access-tab/access-tokens.js';
+import { SharingGroupsSection } from '/views/profile/access-tab/sharing-groups.js';
+import { AgentDefaultsSection } from '/views/profile/access-tab/agent-defaults.js';
+import NotificationsTab from '/views/profile/notifications-tab.js';
+import WalletTab from '/views/profile/wallet-tab.js';
+
+const tr = (key, fallback) => { const v = t(key); return v && v !== key ? v : fallback; };
+
+/** The tabs, in the order they are worth opening. */
+const TABS = [
+  { id: 'general', key: 'home.settings.tabGeneral', fallback: 'General' },
+  { id: 'openrouter', key: 'home.settings.tabOpenRouter', fallback: 'OpenRouter' },
+  { id: 'access', key: 'home.settings.tabAccess', fallback: 'Access' },
+  { id: 'wallet', key: 'home.settings.tabWallet', fallback: 'Wallet' },
+];
+
+export function HomeSettingsDialog({ open, onClose, session, showToast }) {
+  const [tab, setTab] = useState('general');
+
+  return html`
+    <${Modal} open=${open} onClose=${onClose}
+      title=${tr('home.settings.title', 'Settings')}
+      className="koti-settings-modal">
+      ${/* .pf is what the imported profile sections are styled under. */''}
+      <div class="pf koti-settings">
+        <div class="seg koti-settings-tabs" role="tablist">
+          ${TABS.map(x => html`
+            <button type="button" key=${x.id} role="tab" aria-selected=${tab === x.id}
+              class="seg-btn ${tab === x.id ? 'active' : ''}"
+              onClick=${() => setTab(x.id)}>
+              ${tr(x.key, x.fallback)}
+            </button>`)}
+        </div>
+
+        <div class="koti-settings-panel">
+          ${tab === 'general' && html`
+            <${NotificationsTab} session=${session} showToast=${showToast} />
+            ${/* The SAME control the old profile mounts — one switch, two places, so the wording
+                  and the behaviour cannot drift apart. */''}
+            <${HomeUiSwitch} className="koti-settings-switch" />`}
+
+          ${/* startOpen: inside a tab there is nothing to collapse into. */''}
+          ${tab === 'openrouter' && html`
+            <${OpenRouterSettings} startOpen=${true} />`}
+
+          ${tab === 'access' && html`
+            <${ConnectedAppsSection} showToast=${showToast} />
+            <${ConnectionsSection} showToast=${showToast} />
+            <${AccessTokensSection} session=${session} showToast=${showToast} />
+            <${SharingGroupsSection} showToast=${showToast} />
+            <${AgentDefaultsSection} showToast=${showToast} />`}
+
+          ${/* onStats is the profile header's counter, which does not exist here. */''}
+          ${tab === 'wallet' && html`
+            <${WalletTab} session=${session} showToast=${showToast} onStats=${() => {}} />`}
+        </div>
+      </div>
+    <//>`;
+}

package/dist/public/views/home/step-agent.js

@@ -0,0 +1,277 @@
+/**
+ * @file public/views/home/step-agent.js
+ * @description Step 2 of the home path: connect your first agent (aimeat_remake/
+ *   02-kayttajapolut.md, branch A). This is where the person turns the AI they already talk to
+ *   into something that can reach their home directly, instead of copying text back and forth.
+ *
+ *   Three things the old path did not do, and this does:
+ *     - it says what an "agent" means HERE, in one sentence, before asking for anything;
+ *     - the approval is shown right here, using the SAME shared component the profile Agents tab
+ *       renders (components/AgentConsent.js) — the first agent arrives while the person is still
+ *       in onboarding, and sending them to a settings tab to finish is where the old path lost
+ *       them;
+ *     - there is a WAITING STATE. Between pasting the prompt and the agent knocking, the ball is
+ *       in the person's chat window, and a blank screen does not say so.
+ * @structure StepAgent({ state, onChanged }) — the open step 2; AgentCard({ agent }) — the
+ *   connected agent, shown on an initialised home with its details in a details/summary section.
+ * @usage import { StepAgent } from './step-agent.js';
+ * @version-history
+ *   v1.1.0 — 2026-08-09 — The card says what the agent is actually doing, and the dot takes its
+ *     colour from that. It printed "Connected and at home." unconditionally next to a dot that
+ *     was green in CSS — about an agent the Agents tab could be calling a problem. It also says
+ *     how many other agents there are, so one card cannot imply the fleet is one.
+ *   v1.0.0 — 2026-08-07 — Initial (remake phase 4).
+ */
+import { h } from 'preact';
+import { useState, useEffect, useCallback, useRef } from 'preact/hooks';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+import { api, apiGet, apiPost } from '/js/api.js';
+import { PromptCard } from '/components/PromptCard.js';
+import { AgentConsent } from '/components/AgentConsent.js';
+import { swallowed } from '/js/swallowed.js';
+import { useSession } from '/js/use-session.js';
+
+const tr = (key, fallback) => { const v = t(key); return v && v !== key ? v : fallback; };
+
+/** How often to look for a knock while the person is in their chat window. */
+const POLL_MS = 4000;
+
+/**
+ * The prompt the person pastes into their AI chat. Node-served (/v1/prompts/agent-connect) so it
+ * can be corrected without a browser release — same reason as the welcome-mat prompt.
+ */
+function useConnectPrompt(agentName) {
+  const [prompt, setPrompt] = useState('');
+  const [steps, setSteps] = useState([]);
+  useEffect(() => {
+    let alive = true;
+    const q = agentName ? `?agent_name=${encodeURIComponent(agentName)}` : '';
+    apiGet(`/v1/prompts/agent-connect${q}`)
+      .then((r) => { if (alive) { setPrompt(r?.data?.prompt || ''); setSteps(r?.data?.steps || []); } })
+      .catch((e) => swallowed('home/step-agent: prompt', e));
+    return () => { alive = false; };
+  }, [agentName]);
+  return { prompt, steps };
+}
+
+export function StepAgent({ onChanged, showToast }) {
+  const session = useSession();
+  const [agentName, setAgentName] = useState('');
+  const [named, setNamed] = useState(false);
+  const [mode, setMode] = useState('prompt');       // 'prompt' | 'steps'
+  const [pending, setPending] = useState([]);
+  const [busyCode, setBusyCode] = useState(null);
+  const [waiting, setWaiting] = useState(false);
+  const { prompt, steps } = useConnectPrompt(named ? agentName : '');
+  const timer = useRef(null);
+
+  const loadPending = useCallback(async () => {
+    try {
+      const r = await apiGet('/v1/agents/device-authorize/pending');
+      setPending(r?.data?.requests ?? []);
+    } catch (e) { swallowed('home/step-agent: pending', e); }
+  }, []);
+
+  // Poll only while the person is actually waiting for a knock — the request is short-lived and
+  // the alternative is a screen that never changes while they sit in another window.
+  useEffect(() => {
+    if (!waiting) return undefined;
+    loadPending();
+    timer.current = setInterval(loadPending, POLL_MS);
+    return () => clearInterval(timer.current);
+  }, [waiting, loadPending]);
+
+  useEffect(() => {
+    const handler = () => loadPending();
+    window.addEventListener('aimeat-live-update', handler);
+    return () => window.removeEventListener('aimeat-live-update', handler);
+  }, [loadPending]);
+
+  const approve = useCallback(async (userCode, scopes) => {
+    setBusyCode(userCode);
+    try {
+      // owner_token in the BODY, not just the Authorization header: /v1/agents/verify is reachable
+      // from the standalone consent page too, so it verifies the approver's JWT itself rather than
+      // trusting the session middleware.
+      const resp = await apiPost('/v1/agents/verify', {
+        user_code: userCode, action: 'approve', scopes, owner_token: session?.jwt,
+      });
+      if (resp?.ok === false) throw new Error(resp?.error?.message || 'approve failed');
+      setPending(prev => prev.filter(r => r.user_code !== userCode));
+      // Tell the node its owner just let their FIRST agent in — the funnel's first_agent_connected.
+      await api('/v1/home/first-agent', { method: 'POST', body: JSON.stringify({ user_code: userCode }) })
+        .catch(e => swallowed('home/step-agent: first-agent marker', e));
+      onChanged();
+    } catch (e) {
+      showToast?.(e.message || String(e), true);
+    } finally {
+      setBusyCode(null);
+    }
+  }, [onChanged, showToast, session]);
+
+  const deny = useCallback(async (userCode) => {
+    setBusyCode(userCode);
+    try {
+      await apiPost('/v1/agents/verify', { user_code: userCode, action: 'deny', owner_token: session?.jwt });
+      setPending(prev => prev.filter(r => r.user_code !== userCode));
+    } catch (e) {
+      showToast?.(e.message || String(e), true);
+    } finally { setBusyCode(null); }
+  }, [showToast, session]);
+
+  const cleanName = agentName.trim().toLowerCase().replace(/[^a-z0-9-]/g, '');
+
+  return html`
+    <div class="koti-step koti-step-open">
+      <div class="koti-step-head">
+        <span class="koti-step-num">2</span>
+        <h2 class="koti-step-title">${tr('home.agent.title', 'Connect your first agent')}</h2>
+      </div>
+
+      <p class="koti-step-lede">
+        ${tr('home.agent.lede', 'An agent here is simply the AI you already talk to, given a way into your home. Once it is connected it can read and write things for you directly, instead of you copying text back and forth. You decide what it may do, and you can take it back at any time.')}
+      </p>
+
+      ${!named ? html`
+        <div class="koti-name">
+          <label class="koti-paste-label" for="koti-agent-name">
+            ${tr('home.agent.nameLabel', 'Give your agent a name')}
+          </label>
+          <p class="koti-hint">${tr('home.agent.nameHint', 'Whatever you will recognise it by. Lower-case letters, numbers and dashes.')}</p>
+          <input
+            id="koti-agent-name"
+            class="koti-input"
+            type="text"
+            autocomplete="off"
+            maxlength="40"
+            placeholder=${tr('home.agent.namePlaceholder', 'claude')}
+            value=${agentName}
+            onInput=${(e) => setAgentName(e.target.value)} />
+          <div class="koti-actions">
+            <button type="button" class=${cleanName ? 'btn-primary' : 'btn-outline'}
+              disabled=${!cleanName}
+              onClick=${() => { setAgentName(cleanName); setNamed(true); }}>
+              ${tr('home.agent.nameSubmit', 'That is its name')}
+            </button>
+          </div>
+        </div>
+      ` : html`
+        <div class="koti-named">
+          <span class="koti-named-label">${tr('home.agent.named', 'Your agent is called')}</span>
+          <strong class="koti-named-value">${agentName}</strong>
+          <button type="button" class="btn-ghost koti-rename" onClick=${() => { setNamed(false); setWaiting(false); }}>
+            ${tr('home.agent.rename', 'Change it')}
+          </button>
+        </div>
+
+        <div class="koti-modes" role="tablist">
+          <button type="button" role="tab" aria-selected=${mode === 'prompt'}
+            class=${mode === 'prompt' ? 'btn-outline koti-mode-on' : 'btn-ghost'}
+            onClick=${() => setMode('prompt')}>
+            ${tr('home.agent.modePrompt', 'Give it a prompt')}
+          </button>
+          <button type="button" role="tab" aria-selected=${mode === 'steps'}
+            class=${mode === 'steps' ? 'btn-outline koti-mode-on' : 'btn-ghost'}
+            onClick=${() => setMode('steps')}>
+            ${tr('home.agent.modeSteps', 'Do it step by step')}
+          </button>
+        </div>
+
+        ${mode === 'prompt' ? html`
+          <${PromptCard}
+            label=${tr('home.agent.promptLabel', 'The prompt')}
+            prompt=${prompt}
+            className=${waiting ? 'btn-outline' : 'btn-primary'}
+            copyLabel=${tr('home.agent.copy', 'Copy the prompt')}
+            copiedLabel=${tr('home.agent.copied', 'Copied — paste it in your AI chat')}
+            onCopied=${() => setWaiting(true)} />
+        ` : html`
+          <ol class="koti-manual">
+            ${steps.map((s, i) => html`<li key=${i} class="koti-manual-step">${s}</li>`)}
+          </ol>
+          <div class="koti-actions">
+            <button type="button" class=${waiting ? 'btn-outline' : 'btn-primary'} onClick=${() => setWaiting(true)}>
+              ${tr('home.agent.doneManual', 'I have started it')}
+            </button>
+          </div>`}
+
+        ${waiting && pending.length === 0 && html`
+          <div class="koti-waiting" role="status">
+            <div class="koti-waiting-dot" aria-hidden="true"></div>
+            <div>
+              <p class="koti-waiting-title">${tr('home.agent.waitTitle', 'Waiting for your agent to knock.')}</p>
+              <p class="koti-waiting-body">
+                ${tr('home.agent.waitBody', 'The next move is in your AI chat: it has to run the prompt and show you a code. When it does, its request appears here and you approve it.')}
+              </p>
+            </div>
+          </div>`}
+
+        ${/* The SAME component the profile Agents tab renders — one source, two places. */''}
+        <${AgentConsent} requests=${pending} onApprove=${approve} onDeny=${deny}
+          busyCode=${busyCode} variant="step" />
+      `}
+    </div>`;
+}
+
+/**
+ * How the home describes an agent's state. The same six states the Agents tab uses, in words that
+ * fit a home rather than a dashboard.
+ *
+ * This card used to print "Connected and at home." unconditionally, next to a dot that was green in
+ * CSS — about an agent the Agents tab was calling a problem, one click away. It now renders the
+ * verdict the server computed (services/agent-health.ts), which is the same one that tab renders.
+ */
+const STATE_TEXT = {
+  production: ['home.agent.stateProduction', 'Connected and at home.'],
+  idle: ['home.agent.stateIdle', 'Here, but quiet just now.'],
+  onboarding: ['home.agent.stateOnboarding', 'Settling in.'],
+  new: ['home.agent.stateNew', 'Just arrived — it has not started yet.'],
+  problem: ['home.agent.stateProblem', 'Something is wrong with it.'],
+  system: ['home.agent.stateSystem', 'Part of the house.'],
+};
+
+/** The connected agent on an initialised home: a card, with its details below it. */
+export function AgentCard({ agent }) {
+  const [open, setOpen] = useState(false);
+  if (!agent) return null;
+  const state = agent.health?.state ?? 'production';
+  const [subKey, subFallback] = STATE_TEXT[state] ?? STATE_TEXT.production;
+  const others = (agent.total ?? 1) - 1;
+  return html`
+    <div class="koti-agent-card">
+      <div class="koti-agent-head">
+        <span class="koti-agent-dot koti-agent-dot--${state}" aria-hidden="true"></span>
+        <div>
+          <div class="koti-agent-name">${agent.name}</div>
+          <div class="koti-agent-sub">${tr(subKey, subFallback)}</div>
+          ${/* V2.3: this line named a fleet and led nowhere. "70 more, 17 needing attention" is
+                either something you can act on or something you should not have been told; it is a
+                link to the agents view now. Not a new page — the one that already lists them. */''}
+          ${others > 0 && html`
+            <a class="koti-agent-sub koti-agent-others" href="/v1/profile?tab=agents">
+              ${agent.problems > 0
+                ? tr('home.agent.othersProblem', `${others} more, ${agent.problems} needing attention.`)
+                    .replace('{count}', String(others)).replace('{problems}', String(agent.problems))
+                : tr('home.agent.othersOk', `${others} more, all fine.`).replace('{count}', String(others))}
+            </a>`}
+        </div>
+      </div>
+      <button type="button" class="btn-ghost koti-agent-toggle" aria-expanded=${open}
+        onClick=${() => setOpen(v => !v)}>
+        ${open ? tr('home.agent.hideDetails', 'Hide details') : tr('home.agent.showDetails', 'Details')}
+      </button>
+      ${open && html`
+        <dl class="koti-agent-details">
+          <dt>${tr('home.agent.dtId', 'Its identifier')}</dt>
+          <dd class="koti-agent-gaii">${agent.gaii}</dd>
+          ${agent.connectedAt && html`
+            <dt>${tr('home.agent.dtSince', 'Connected')}</dt>
+            <dd>${new Date(agent.connectedAt).toLocaleString()}</dd>`}
+        </dl>
+        <a class="btn-outline koti-agent-manage" href="/v1/profile?tab=agents">
+          ${tr('home.agent.manage', 'Manage what it may do')}
+        </a>`}
+    </div>`;
+}

package/dist/public/views/home/step-branch-b.js

@@ -0,0 +1,186 @@
+/**
+ * @file public/views/home/step-branch-b.js
+ * @description Branch B (aimeat_remake/09-haara-b-teksti.md): the person made a welcome mat, and
+ *   the app they made it in cannot open a connection. They need a different app before step 3.
+ *
+ *   This is the hardest screen in the product to write, because of where it falls. They just
+ *   succeeded at something. Now they are being told their tool is not enough, and that is one short
+ *   step from hearing that THEY are not enough. Three things keep it on the right side:
+ *
+ *     1. Praise what worked before naming the limit. The mat is made, it is theirs, and it is real.
+ *     2. State the limit as a property of the TOOL, not a lack of quality. "This app cannot open a
+ *        connection yet" is true. "This will not work well on a cheap free version" is the same
+ *        fact said so that the person hears they chose badly.
+ *     3. State the requirement AS a requirement. It is not a suggestion that can be skipped, and
+ *        writing round it would be dishonest and would leave them trying things that cannot work.
+ *
+ *   There is ONE way forward here, and no third option: take up an app that can. The old draft's
+ *   second route (a CLI, a local runner, an API key, choosing a model) belongs to a different track
+ *   and is not offered — bundling it here would answer a question nobody on this screen is asking.
+ * @structure StepBranchB({ state, onChanged }) — errors render beside the paste box rather than
+ *   in a toast, because the person needs them next to the thing they must change.
+ * @usage import { StepBranchB } from './step-branch-b.js';
+ * @version-history
+ *   v1.0.0 — 2026-08-07 — Initial (remake phase 5).
+ */
+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 { PromptCard } from '/components/PromptCard.js';
+import { swallowed } from '/js/swallowed.js';
+
+const tr = (key, fallback) => { const v = t(key); return v && v !== key ? v : fallback; };
+
+/** The apps that can, from the node's own table — never a list hardcoded here. */
+function useCapableApps() {
+  const [tools, setTools] = useState([]);
+  useEffect(() => {
+    let alive = true;
+    apiGet('/v1/ai-tools')
+      .then(r => { if (alive) setTools(r?.data?.tools ?? []); })
+      .catch(e => swallowed('home/step-branch-b: ai-tools', e));
+    return () => { alive = false; };
+  }, []);
+  return tools;
+}
+
+export function StepBranchB({ state, onChanged }) {
+  const tools = useCapableApps();
+  const [paste, setPaste] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [errText, setErrText] = useState('');
+  const [prompt, setPrompt] = useState('');
+
+  useEffect(() => {
+    let alive = true;
+    apiGet('/v1/prompts/welcome-mat')
+      .then(r => { if (alive) setPrompt(r?.data?.prompt || ''); })
+      .catch(e => swallowed('home/step-branch-b: prompt', e));
+    return () => { alive = false; };
+  }, []);
+
+  // Re-pasting the mat is the whole mechanism of this branch: the person redoes it in an app that
+  // can connect, and the same endpoint re-reads the metadata and re-decides. No separate
+  // "I upgraded" button to click, because a button would be a claim and the mat is evidence.
+  const submit = useCallback(async () => {
+    setBusy(true);
+    setErrText('');
+    try {
+      const r = await api('/v1/home/welcome-mat', { method: 'POST', body: JSON.stringify({ paste }) });
+      if (r.data?.branch === 'B') {
+        // Still an app that cannot. Say so without starting over, and keep their text.
+        setErrText(tr('home.branchB.stillB',
+          'That one cannot open a connection either. The list above is the checked one — the app has to be from it.'));
+      } else {
+        onChanged(r.data);
+      }
+    } catch (e) {
+      setErrText(e?.response?.error?.message || e.message || String(e));
+    } finally {
+      setBusy(false);
+    }
+  }, [paste, onChanged]);
+
+  // The app they used, by the name they gave it. Naming it matters: they know what they used, and
+  // a screen that talks around it reads as evasive.
+  const appName = state.ai?.client || tr('home.branchB.thatApp', 'the app you used');
+  const hasPaste = paste.trim().length > 0;
+
+  // Which entry in the list IS their app. Everyone who reaches this screen got here by saying they
+  // lack the tier their app requires — so their app CAN do this, on a plan they do not have. Saying
+  // "it cannot open a connection" and then listing it would be a contradiction the reader spots
+  // immediately, and would read as the screen not knowing what it is talking about.
+  const theirs = tools.find(x => x.id === state.ai?.resolvedClient)
+    || tools.find(x => (x.label || '').toLowerCase() === String(appName).toLowerCase());
+  // Their own app first: upgrading the thing they already use is the cheapest move available.
+  const ordered = theirs ? [theirs, ...tools.filter(x => x.id !== theirs.id)] : tools;
+
+  return html`
+    <div class="koti-step koti-step-open koti-b">
+      <div class="koti-step-head">
+        <span class="koti-step-num">2</span>
+        <h2 class="koti-step-title">${tr('home.branchB.title', 'Your welcome mat is done')}</h2>
+      </div>
+
+      <p class="koti-step-lede">
+        ${theirs
+          ? tr('home.branchB.ledePlan', '{app} made it, and {app} can open a connection to your home — but only on one of its paid plans, and you said you are not on one. So the next step needs either that plan or another app.')
+              .replace(/\{app\}/g, theirs.label)
+          : tr('home.branchB.lede', 'You made it with {app}. It can write, but it cannot open a connection to your home yet, so the next step needs a different app.')
+              .replace('{app}', appName)}
+      </p>
+      <p class="koti-step-lede">
+        ${tr('home.branchB.why', 'A connection means the AI can read and write things in your home itself, instead of you copying text back and forth. That is what this place is built on: everything here is done with an AI, so without a connection your home cannot be finished.')}
+      </p>
+
+      <div class="koti-b-way">
+        <h3 class="koti-b-way-title">
+          ${tr('home.branchB.wayTitle', 'Take up an AI app that can open a connection')}
+        </h3>
+        <p class="koti-b-way-body">
+          ${tr('home.branchB.wayBody', 'Some AI apps do this directly. They are paid, typically around 20 dollars a month. If you use an AI every day, this is the one you want.')}
+        </p>
+
+        <ul class="koti-b-apps">
+          ${ordered.map(tool => html`
+            <li class="koti-b-app" key=${tool.id}>
+              <div class="koti-b-app-head">
+                <span class="koti-b-app-name">${tool.label}</span>
+                ${theirs && tool.id === theirs.id && html`
+                  <span class="badge badge-info">${tr('home.branchB.yours', 'The one you already use')}</span>`}
+                ${tool.recommended && (!theirs || tool.id !== theirs.id) && html`
+                  <span class="badge badge-info">${tr('home.branchB.recommended', 'A good first one')}</span>`}
+              </div>
+              ${tool.mcp?.plans && html`<p class="koti-b-app-plans">${tool.mcp.plans}</p>`}
+              ${tool.mcp?.docs && html`
+                <a class="koti-b-app-docs" href=${tool.mcp.docs} target="_blank" rel="noopener">
+                  ${tr('home.branchB.theirDocs', 'Their own instructions')}
+                </a>`}
+            </li>`)}
+        </ul>
+      </div>
+
+      <div class="koti-b-again">
+        <h3 class="koti-b-way-title">${tr('home.branchB.againTitle', 'Then make the mat again with it')}</h3>
+        <p class="koti-b-way-body">
+          ${tr('home.branchB.againBody', 'Same prompt, new app. Paste what it gives you here and we carry on from there. Your first mat stays until this one replaces it.')}
+        </p>
+
+        <${PromptCard}
+          label=${tr('home.mat.promptLabel', 'The prompt')}
+          prompt=${prompt}
+          className=${hasPaste ? 'btn-outline' : 'btn-primary'}
+          copyLabel=${tr('home.mat.copy', 'Copy the prompt')}
+          copiedLabel=${tr('home.mat.copied', 'Copied — paste it in your AI chat')} />
+
+        <label class="koti-paste-label" for="koti-b-paste">
+          ${tr('home.mat.pasteLabel', 'Paste what your AI gave you here')}
+        </label>
+        <textarea
+          id="koti-b-paste"
+          class="koti-paste"
+          rows="7"
+          spellcheck="false"
+          placeholder=${tr('home.mat.pastePlaceholder', 'Everything it wrote is fine — explanation and all.')}
+          value=${paste}
+          onInput=${(e) => setPaste(e.target.value)}></textarea>
+
+        ${errText && html`
+          <div class="koti-error" role="alert">
+            <p class="koti-error-text">${errText}</p>
+          </div>`}
+
+        <div class="koti-actions">
+          <button type="button"
+            class=${hasPaste ? 'btn-primary' : 'btn-outline'}
+            disabled=${busy || !hasPaste}
+            onClick=${submit}>
+            ${busy ? tr('home.mat.sending', 'Reading it…') : tr('home.branchB.submit', 'Here is the new one')}
+          </button>
+        </div>
+      </div>
+    </div>`;
+}