aimeat 2.7.0 → 3.1.0

package/dist/public/views/admin/portal-tab.js

@@ -33,15 +33,17 @@ import { swallowed } from '/js/swallowed.js';
 
 // Public header link ids → their nav i18n label key (mirror of PUBLIC_NAV_LINKS in spa.html
 // and PUBLIC_NAV_LINK_IDS in src/services/site.ts). Gated links are not configurable.
+// These are the LOGGED-OUT bar (plus Help, which shows in both states). A signed-in person's
+// links — Apps, Profile, Admin — are forced by the session and role, and the pages that left
+// the header on 2026-08-09 (For Developers, Members) are site-footer links now, so neither set
+// appears here.
 const HEADER_LINK_LABELS = {
-  try: 'nav.try',
   howItWorks: 'nav.howItWorks',
   // learn/exchange render only when this node configured AIMEAT_SITE_LEARN_URL /
   // AIMEAT_SITE_EXCHANGE_URL; hiding them here is a second, independent switch.
   learn: 'nav.learn',
   exchange: 'nav.exchange',
   business: 'nav.business',
-  devView: 'nav.devView',
   help: 'nav.help',
 };
 

package/dist/public/views/admin/prompts-tab.js

@@ -174,6 +174,22 @@ export default function PromptsTab({ data }) {
           />
         </div>
 
+        ${/* Finnish override. The store has carried a per-language field all along and the PATCH
+              route already validates it — there was simply no box to type in, so an operator could
+              not write the Finnish half of anything user-facing. Empty means "no override": the
+              English content above is served to everyone. */''}
+        <div class="adm-prompt-editor">
+          <label style="font-weight:600;font-size:.9rem">${t('dashboard.promptsLocaleFi')}</label>
+          <p class="adm-text-dim adm-text-base" style="margin:2px 0 4px">${t('dashboard.promptsLocaleFiHint')}</p>
+          <textarea class="adm-prompt-textarea"
+            value=${(editData.locales && editData.locales.fi) || ''}
+            onInput=${e => setEditData({
+              ...editData,
+              locales: { ...(editData.locales || {}), fi: e.target.value },
+            })}
+          />
+        </div>
+
         <!-- Variables reference -->
         ${editData.variables && editData.variables.length > 0 && html`
           <div class="adm-prompt-vars">

package/dist/public/views/admin/security-tab.js

@@ -14,6 +14,7 @@ import { escHtml } from '/js/utils.js';
 import { dt, useToast, Toast } from './shared.js';
 import { useConfirm } from '/components/Modal.js';
 import { getSecurityIncidents, resolveSecurityIncident, deleteSecurityIncident } from '/js/services/admin.js';
+import { authHeaders } from '/js/services/auth.js';
 
 const html = htm.bind(h);
 
@@ -42,8 +43,7 @@ export default function SecurityTab() {
   );
   const downloadQuarantine = async (id) => {
     try {
-      const jwt = window.AIMEAT?.auth?.getSession?.()?.jwt || '';
-      const res = await fetch(`/v1/admin/security/incidents/${encodeURIComponent(id)}/quarantine`, { headers: { Authorization: 'Bearer ' + jwt } });
+      const res = await fetch(`/v1/admin/security/incidents/${encodeURIComponent(id)}/quarantine`, { headers: authHeaders() });
       if (!res.ok) throw new Error('No quarantined payload');
       const blob = await res.blob();
       const url = URL.createObjectURL(blob);

package/dist/public/views/admin.js

@@ -45,7 +45,6 @@ import ChatInstancesTab from './admin/chat-instances-tab.js';
 import RealtimeTab     from './admin/realtime-tab.js';
 import WorkTab         from './admin/work-tab.js';
 import MessagesAdminTab from './admin/messages-tab.js';
-import FeedbackAdminTab from './admin/feedback-tab.js';
 import EmailTab        from './admin/email-tab.js';
 import PushTab         from './admin/push-tab.js';
 import DirectoryTab    from './admin/directory-tab.js';
@@ -101,7 +100,6 @@ const NAV_GROUPS = [
     { id: 'realtime',      key: 'dashboard.realtime',      component: RealtimeTab,       count: 'rooms' },
     { id: 'work',          key: 'dashboard.work',          component: WorkTab,           count: 'work' },
     { id: 'messages',      key: 'admin.messages.title',    component: MessagesAdminTab },
-    { id: 'feedback',      key: 'admin.feedback.title',    component: FeedbackAdminTab },
     { id: 'memory-admin',  key: 'dashboard.memoryAdmin',   component: MemoryAdminTab },
     { id: 'agent-tasks',  key: 'dashboard.agentTasksTab', component: AgentTasksAdminTab },
     { id: 'sharing-groups', key: 'dashboard.sharingGroupsTab', component: SharingGroupsAdminTab },
@@ -198,8 +196,7 @@ export default function Admin({ navigate, locale }) {
         const code = dash.error?.code || '';
         if (code === 'FORBIDDEN' || code === 'AUTH_REQUIRED' || code === 'OPERATOR_REQUIRED' || code === 'ACCESS_DENIED') {
           // Try token refresh once — the stored JWT may be stale (missing operator role)
-          const auth = window.AIMEAT?.auth;
-          const s = auth?.getSession();
+          const s = getSession();
           if (s?.refresh && !retriedRef.current) {
             retriedRef.current = true;
             try {

package/dist/public/views/app-grant.js

@@ -42,6 +42,8 @@ import { t } from '/js/i18n.js';
 import { api } from '/js/api.js';
 import { escHtml } from '/js/utils.js';
 import { swallowed } from '/js/swallowed.js';
+import { showLoginModal, getStoredGhii } from '/js/services/auth.js';
+import { useSession } from '/js/use-session.js';
 
 const html = htm.bind(h);
 /** t() with a literal fallback; {vars} are interpolated into the fallback too (missing-key safety). */
@@ -81,19 +83,12 @@ export default function AppGrant() {
   const [ownApp, setOwnApp] = useState(false); // server-verified: origin-bound request for the signed-in owner's own app
 
   const requestId = new URLSearchParams(window.location.search).get('req') || '';
-  const [authed, setAuthed] = useState(() => !!window.AIMEAT?.auth?.hasSession);
-
-  // Become reactive to login: the consent popup may open with no one logged in (login_required), and
-  // the user signs in right here (auth.showLoginModal) — flip to the consent view on success.
-  useEffect(() => {
-    const onLogin = () => setAuthed(true);
-    window.AIMEAT?.auth?.on?.('login', onLogin);
-    return () => window.AIMEAT?.auth?.off?.('login', onLogin);
-  }, []);
+  // Reactive to login: the consent popup may open with no one logged in (login_required) and the
+  // user signs in right here — the session hook flips this to the consent view on success.
+  const authed = !!useSession();
 
   function doLogin() {
-    if (window.AIMEAT?.auth?.showLoginModal) window.AIMEAT.auth.showLoginModal({ onLogin: () => setAuthed(true) });
-    else window.location.href = '/v1/profile';
+    if (!showLoginModal({})) window.location.href = '/v1/profile';
   }
 
   useEffect(() => {
@@ -115,7 +110,7 @@ export default function AppGrant() {
         // The owner's OWN app (server-verified: the redirect origin is bound to exactly this app):
         // same auto-approve policy as the silent bridge — their own app never needs the trust prompt.
         // The server computes `own` independently at consent time, so this is UX, not the gate.
-        const myOwner = (window.AIMEAT?.auth?.storedGhii || '').split('@')[0];
+        const myOwner = (getStoredGhii() || '').split('@')[0];
         const own = !!(res.data.origin_bound && res.data.app_owner && myOwner && myOwner === res.data.app_owner);
         // Pre-check the UNION of already-granted and now-requested scopes: an app update that added
         // a scope must surface it CHECKED — presenting it unchecked made users keep the old grant

package/dist/public/views/help.js

@@ -16,6 +16,8 @@
  *   v2.0.0 — 2026-07-28 — Split into "For me" / "For my AI". Human tab is new; the prompt is
  *     rendered through <Markdown> instead of shown as source. Learn/feedback links come from
  *     siteLinks so they only appear on nodes that have them.
+ *   v2.1.0 — 2026-08-08 — The copy button is the shared .btn-primary with the shared common.copyPrompt label; the
+ *       bespoke .hlp-copy-btn and the help.copyBtn/help.copied keys are gone.
  */
 import { h } from 'preact';
 import { useState, useEffect } from 'preact/hooks';
@@ -80,7 +82,7 @@ function AgentHelp({ prompt, loading, error }) {
       ${loading && html`<div class="hlp-loading"><${Spinner} /></div>`}
       ${error && html`<p class="hlp-error">${t('help.loadError')}</p>`}
       ${!loading && !error && html`
-        <${CopyButton} text=${prompt} label=${t('help.copyBtn')} copiedLabel=${t('help.copied')} className="hlp-copy-btn" />
+        <${CopyButton} text=${prompt} label=${t('common.copyPrompt')} className="btn-primary" />
         <div class="hlp-prompt-rendered"><${Markdown} text=${prompt} /></div>
       `}
 

package/dist/public/views/home/feed.js

@@ -0,0 +1,209 @@
+/**
+ * @file public/views/home/feed.js
+ * @description What has happened on this home (aimeat_remake/06-koti-feed-suostumus.md), and the
+ *   four rooms (07-nelja-huonetta.md).
+ *
+ *   The feed reads the same markers the operator funnel reads, so the screen and the numbers cannot
+ *   tell two different stories about the same account. Its FIRST row exists before the person has
+ *   done anything — the account being created is a real event, and an empty feed on a brand-new
+ *   account reads as broken.
+ *
+ *   The rooms are ROOMS, never "paths". Each card carries a third line saying what happens FIRST if
+ *   you go in, because without it they are four abstract words and a person picks by guessing. A
+ *   card appears only for a room the node actually has (E11) — the server decides that and sends
+ *   the list; this file renders what it is given.
+ * @structure HomeFeed({ items }) · Rooms({ rooms, onEnter })
+ * @usage import { HomeFeed, Rooms } from './feed.js';
+ * @version-history
+ *   v1.0.0 — 2026-08-07 — Initial (remake phases 6–7).
+ */
+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 { CardMenu } from '/components/CardMenu.js';
+import { listOpenItems, addOpenItem, switchOff } from '/js/services/open-items.js';
+import { 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; };
+
+/** A short, human "when". Exact timestamps are for logs; a feed answers "recently or not". */
+function when(iso) {
+  const ms = Date.now() - Date.parse(iso);
+  if (!Number.isFinite(ms)) return '';
+  const min = Math.floor(ms / 60000);
+  if (min < 1) return tr('home.feed.justNow', 'just now');
+  if (min < 60) return tr('home.feed.minutesAgo', '{n} min ago').replace('{n}', String(min));
+  const hrs = Math.floor(min / 60);
+  if (hrs < 24) return tr('home.feed.hoursAgo', '{n} h ago').replace('{n}', String(hrs));
+  const days = Math.floor(hrs / 24);
+  return tr('home.feed.daysAgo', '{n} d ago').replace('{n}', String(days));
+}
+
+/** The sentence for one row. Built from a key so the node never decides which language to speak. */
+function line(item) {
+  const d = item.data || {};
+  switch (item.kind) {
+    case 'account_created':
+      return tr('home.feed.accountCreated', 'Your home exists.');
+    case 'welcome_mat':
+      return tr('home.feed.welcomeMat', 'You made your welcome mat. Look at it.');
+    case 'agent_knocking':
+      return tr('home.feed.agentKnocking', 'Your agent is knocking at the door.');
+    case 'agent_connected':
+      return d.name
+        ? tr('home.feed.agentConnectedNamed', '{name} is home.').replace('{name}', d.name)
+        : tr('home.feed.agentConnected', 'Your agent is home.');
+    case 'home_initialized':
+      return tr('home.feed.homeReady', 'Your home is up and running.');
+    case 'room_entered':
+      return tr(`home.rooms.${d.room}.entered`, 'You started something new.');
+    default:
+      return '';
+  }
+}
+
+export function HomeFeed({ items }) {
+  if (!items || !items.length) return null;
+  return html`
+    <section class="koti-feed">
+      <h2 class="koti-feed-title">${tr('home.feed.title', 'What has happened')}</h2>
+      <ul class="koti-feed-list">
+        ${items.map((item, i) => html`
+          <li class="koti-feed-item ${item.kind === 'agent_knocking' ? 'koti-feed-item-live' : ''}" key=${i}>
+            <span class="koti-feed-dot" aria-hidden="true"></span>
+            <div class="koti-feed-body">
+              ${item.link
+                ? html`<a class="koti-feed-line" href=${item.link}>${line(item)}</a>`
+                : html`<span class="koti-feed-line">${line(item)}</span>`}
+              <span class="koti-feed-when">${when(item.at)}</span>
+            </div>
+          </li>`)}
+      </ul>
+    </section>`;
+}
+
+/**
+ * The rooms where "later" is a real answer, and the node-served prompt that belongs to each.
+ *
+ * A closed list on purpose. Adding one means claiming that putting that room off produces
+ * something an AI can hand back — which is true here and is not true of reading your own post.
+ */
+/**
+ * The rooms whose work is a real thing you can put off, and what an item made from one IS.
+ *
+ * `kind` is not decoration. An item born here used to arrive with kind null and the card's own
+ * words as its title, and the skill that works these lists is forbidden to guess a kind from a
+ * title — so every such item cost the person an interrogation before anything could happen. The
+ * card knows what it makes. It says so.
+ */
+const SAVEABLE_ROOMS = {
+  create: { promptRef: 'build-app', titleKey: 'home.rooms.create.title', kind: 'app' },
+  organise: { promptRef: 'organism-setup', titleKey: 'home.rooms.organise.title', kind: 'organism' },
+};
+
+/**
+ * The prompt block inside a room card: copy it now, look at it first, put it off, or hand it over.
+ *
+ * ONE primary control — "Copy the prompt" — with the state control beside it. That order is the
+ * whole point: copying is what people came to do.
+ *
+ * The dots in the top right corner are the SAME control every other card uses (CardMenu), in the
+ * same corner, and their colour is this room's state. One corner learned once, and then every card
+ * in the product answers to it. What used to be here was a grey box repeating the card's own
+ * heading with a "Copy the prompt" button under it, and a naked 10px dot floating in the whitespace
+ * below that.
+ *
+ * The prompt is one of the menu's rows rather than a button of its own.
+ */
+function RoomMenu({ room }) {
+  const cfg = SAVEABLE_ROOMS[room.id] ?? { promptRef: null, kind: null };
+  const title = tr(`home.rooms.${room.id}.title`, room.id);
+  const origin = `home.rooms.${room.id}`;
+  const [prompt, setPrompt] = useState('');
+  const [item, setItem] = useState(null);
+
+  useEffect(() => {
+    if (!cfg.promptRef) return undefined;
+    let alive = true;
+    apiGet(`/v1/prompts/${cfg.promptRef}`)
+      .then(r => { if (alive) setPrompt(r?.data?.prompt || ''); })
+      .catch(e => swallowed('home/rooms: prompt fetch', e));
+    return () => { alive = false; };
+  }, [cfg.promptRef]);
+
+  const find = useCallback(async () => {
+    try {
+      const list = await listOpenItems();
+      setItem(list.find(i => i.origin === origin) ?? null);
+    } catch (e) { swallowed('home/rooms: open items', e); }
+  }, [origin]);
+
+  useEffect(() => { find(); }, [find]);
+  useEffect(() => {
+    const handler = () => find();
+    window.addEventListener('aimeat-live-update', handler);
+    return () => window.removeEventListener('aimeat-live-update', handler);
+  }, [find]);
+
+  const state = item?.status === 'working' ? 'working' : item ? 'open' : 'off';
+  const actions = [
+    // The copy row only exists for a room the node serves a prompt for. The dots themselves exist
+    // on every card: the mat card tells a person "every card has them, always in that same corner",
+    // and three of five rooms having none made that sentence false on its own screen.
+    ...(prompt ? [{
+      label: tr('home.rooms.copyPrompt', 'Copy this into your AI chat'),
+      doneLabel: tr('home.rooms.copied', 'Copied — paste it in your AI chat'),
+      done: true,
+      run: async () => { try { await navigator.clipboard.writeText(prompt); } catch (e) { swallowed('home/rooms: copy', e); } },
+    }] : []),
+    {
+      label: item
+        ? tr('openItems.toggleOff', 'Take it off your open items')
+        : tr('openItems.toggleOn', 'Put it on your open items'),
+      run: async () => {
+        if (item) { await switchOff(item.id); setItem(null); }
+        else { setItem(await addOpenItem({ title, prompt_ref: cfg.promptRef, origin })); }
+      },
+    },
+  ];
+
+  return html`<${CardMenu} state=${state} actions=${actions} label=${title} />`;
+}
+
+export function Rooms({ rooms, onEnter }) {
+  // No agent list here. A room card once offered "Give it to <name>" as one menu row per agent,
+  // and on an account with seventy of them that is a wall of rows in a card about making an app.
+  // Handing work to an agent belongs where the agents are, not inside a prompt.
+
+  if (!rooms || !rooms.length) return null;
+  return html`
+    <section class="koti-rooms">
+      <h2 class="koti-feed-title">${tr('home.rooms.title', 'What would you like to do?')}</h2>
+      <div class="koti-rooms-grid">
+        ${rooms.map(room => html`
+          <a class="koti-room" key=${room.id} href=${room.url}
+             onClick=${(e) => {
+               // stopPropagation as well as preventDefault: the SPA has a delegated handler that
+               // client-side-navigates any /v1/ link, and it would race this one — the card ended
+               // up on the portal instead of its own destination.
+               e.preventDefault();
+               e.stopPropagation();
+               onEnter(room);
+             }}>
+            <span class="koti-room-title">${tr(`home.rooms.${room.id}.title`, room.id)}</span>
+            <span class="koti-room-what">${tr(`home.rooms.${room.id}.what`, '')}</span>
+            ${/* The third line. Without it these are four abstract words and people pick at random. */''}
+            <span class="koti-room-next">${tr(`home.rooms.${room.id}.next`, '')}</span>
+            ${/* Two rooms only, on purpose: these are the ones where putting it off is a real
+                 answer and the node already serves the prompt. `monetise` promises a UI journey
+                 that produces no object, and `messages` is your own post — neither is something
+                 an AI hands back later. */''}
+            <${RoomMenu} room=${room} />
+          </a>`)}
+      </div>
+    </section>`;
+}

package/dist/public/views/home/header.js

@@ -0,0 +1,44 @@
+/**
+ * @file public/views/home/header.js
+ * @description The topmost part of the home: the person's name on the left, one settings button on
+ *   the right.
+ *
+ *   It reads as a nameplate on the wall of a house rather than a page title, which is why the name
+ *   lives HERE and the heading below it states what is going on instead of greeting by name again.
+ *   Before this, the greeting carried the name; keeping both would have printed it twice inside
+ *   sixty pixels.
+ *
+ *   The button is deliberately not in `.koti-actions`: that row goes full-width below 560px, and a
+ *   settings control that fills a phone screen reads as the page's main action, which it is not.
+ * @structure HomeHeader({ name, onOpenSettings })
+ * @usage
+ *   import { HomeHeader } from '/views/home/header.js';
+ *   html`<${HomeHeader} name=${name} onOpenSettings=${() => setOpen(true)} />`
+ * @version-history
+ *   v1.0.0 — 2026-08-07 — Initial.
+ */
+import { h } from 'preact';
+import htm from 'htm';
+const html = htm.bind(h);
+import { t } from '/js/i18n.js';
+
+const tr = (key, fallback) => { const v = t(key); return v && v !== key ? v : fallback; };
+
+/** A cog, drawn rather than an icon font, so it needs nothing to load and scales cleanly. */
+const Cog = html`
+  <svg class="koti-cog" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"
+       fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="12" cy="12" r="3" />
+    <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1.08-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
+  </svg>`;
+
+export function HomeHeader({ name, onOpenSettings }) {
+  return html`
+    <div class="koti-header">
+      <span class="koti-name">${name}</span>
+      <button type="button" class="btn-ghost koti-settings-btn" onClick=${onOpenSettings}>
+        ${Cog}
+        <span>${tr('home.settings.open', 'Settings')}</span>
+      </button>
+    </div>`;
+}

package/dist/public/views/home/index.js

@@ -0,0 +1,227 @@
+/**
+ * @file public/views/home/index.js
+ * @description KOTI — the home (aimeat_remake/06-koti-feed-suostumus.md). The new onboarding path,
+ *   living beside the old profile rather than replacing it: nothing under public/views/profile/ is
+ *   touched, and a person moves between the two with a switch.
+ *
+ *   The word "profile" does not appear on this path, and neither does "path": the four
+ *   destinations that open once the home exists are ROOMS.
+ *
+ *   An uninitialised home shows a welcome, step 1 open, and steps 2 and 3 NAMED BUT DIMMED — the
+ *   person can see how many are left without being able to jump. No quotas, no shop row, no empty
+ *   inventory cards: one task at a time, and the empty state is filled by doing the task rather
+ *   than by decoration.
+ * @structure default HomeView; internal: Welcome, StepList, DimmedStep
+ * @usage routed at /v1/home by spa.html (and portal.ts spaRoutes, or F5 is a 404)
+ * @version-history
+ *   v1.0.0 — 2026-08-07 — Initial (remake phase 3).
+ */
+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 { useSession } from '/js/use-session.js';
+import { Spinner } from '/components/Spinner.js';
+import { swallowed } from '/js/swallowed.js';
+import { StepMat, StepMatDone } from '/views/home/step-mat.js';
+import { StepAgent, AgentCard } from '/views/home/step-agent.js';
+import { OpenItemsList } from '/components/OpenItemsList.js';
+import { StepBranchB } from '/views/home/step-branch-b.js';
+import { HomeFeed, Rooms } from '/views/home/feed.js';
+import { HomeHeader } from '/views/home/header.js';
+import { HomeSettingsDialog } from '/views/home/settings-dialog.js';
+
+const tr = (key, fallback) => { const v = t(key); return v && v !== key ? v : fallback; };
+
+/** The steps, named. `better-app` exists only on branch B; on A there are two, not three. */
+const STEP_TITLES = {
+  'welcome-mat': ['home.step1', 'Your welcome mat'],
+  'better-app': ['home.step2b', 'Get an app that can connect'],
+  'first-agent': ['home.step2', 'Connect your first agent'],
+};
+
+/** A step that is named so the person knows it is coming, and dimmed so they cannot start it. */
+function DimmedStep({ n, titleKey, fallback, note }) {
+  return html`
+    <div class="koti-step koti-step-dim" aria-disabled="true">
+      <div class="koti-step-head">
+        <span class="koti-step-num">${n}</span>
+        <h2 class="koti-step-title">${tr(titleKey, fallback)}</h2>
+      </div>
+      ${note && html`<p class="koti-step-lede">${note}</p>`}
+    </div>`;
+}
+
+/**
+ * The greeting. It no longer carries the name: the name is on the nameplate in the header a line
+ * above (views/home/header.js), and printing it twice inside sixty pixels reads as a bug.
+ */
+function Welcome() {
+  return html`
+    <header class="koti-welcome">
+      <h1 class="koti-h1">${tr('home.welcome', 'Welcome to your new home.')}</h1>
+      <p class="koti-welcome-sub">
+        ${tr('home.welcomeSub', 'Before the place can do anything for you, there are a couple of things to do.')}
+      </p>
+    </header>`;
+}
+
+export default function HomeView({ navigate }) {
+  const session = useSession();
+  const [state, setState] = useState(null);
+  const [rooms, setRooms] = useState([]);
+  const [feed, setFeed] = useState([]);
+  const [loadError, setLoadError] = useState('');
+  const [toast, setToast] = useState('');
+  const [settingsOpen, setSettingsOpen] = useState(false);
+
+
+  // One line of feedback, and only for things that went wrong: the steps themselves report by
+  // changing, which is louder than a message that fades.
+  const showToast = useCallback((msg) => {
+    setToast(msg);
+    setTimeout(() => setToast(''), 6000);
+  }, []);
+
+  const load = useCallback(async () => {
+    try {
+      const r = await apiGet('/v1/home/state');
+      setState(r.data.state);
+      // Only the rooms the node actually has — the server decides, this view renders (E11).
+      setRooms(r.data.rooms ?? []);
+      setLoadError('');
+      // The feed is secondary to the steps: if it fails the page still works, but the failure is
+      // recorded rather than swallowed, because a feed that silently never loads looks identical
+      // to an account where nothing has happened.
+      try {
+        const f = await apiGet('/v1/home/feed');
+        if (f?.data?.items) setFeed(f.data.items);
+      } catch (e) {
+        swallowed('home: feed', e);
+      }
+    } catch (e) {
+      setLoadError(e.message || String(e));
+    }
+  }, []);
+
+  // Going into a room records WHICH one was first, then follows the door.
+  const enterRoom = useCallback(async (room) => {
+    // The door opens either way: a funnel marker must never stand between a person and the thing
+    // they just chose. The failure is still recorded, so a room that stops being counted is
+    // visible rather than mysterious.
+    await api('/v1/home/room', { method: 'POST', body: JSON.stringify({ room: room.id }) })
+      .catch(e => swallowed('home: room marker', e));
+    window.location.href = room.url;
+  }, []);
+
+  useEffect(() => { if (session) load(); }, [session, load]);
+
+  // Every surface showing server data re-fetches on the live-update event, so an agent connecting
+  // in another tab (or the agent itself writing the proof key) moves this screen without a reload.
+  useEffect(() => {
+    const handler = () => { if (session) load(); };
+    window.addEventListener('aimeat-live-update', handler);
+    return () => window.removeEventListener('aimeat-live-update', handler);
+  }, [session, load]);
+
+  const onMatDone = useCallback((data) => {
+    if (data?.state) setState(data.state);
+    else load();
+  }, [load]);
+
+  if (!session) {
+    return html`
+      <div class="koti">
+        <header class="koti-welcome">
+          <h1 class="koti-h1">${tr('home.signInTitle', 'Step into your home')}</h1>
+          <p class="koti-welcome-sub">${tr('home.signInDesc', 'Sign in to see where you left off.')}</p>
+        </header>
+        <div class="koti-actions">
+          <button type="button" class="btn-primary" onClick=${() => navigate('/v1/portal')}>
+            ${tr('home.signIn', 'Sign in')}
+          </button>
+        </div>
+      </div>`;
+  }
+
+  if (loadError) {
+    return html`
+      <div class="koti">
+        <div class="koti-error" role="alert"><p class="koti-error-text">${loadError}</p></div>
+      </div>`;
+  }
+
+  if (!state) {
+    return html`<div class="koti koti-loading"><${Spinner} /></div>`;
+  }
+
+  const name = state.displayName || state.owner;
+
+  // ── The home, once it exists: the first agent as a card, its details below it. ──
+  if (state.initialized) {
+    return html`
+      <div class="koti">
+        <${HomeHeader} name=${name} onOpenSettings=${() => setSettingsOpen(true)} />
+        <header class="koti-welcome">
+          <h1 class="koti-h1">${tr('home.readyTitle', 'Your home is up and running.')}</h1>
+          <p class="koti-welcome-sub">
+            ${tr('home.readySub', 'Your welcome mat is out and your first agent is home.')}
+          </p>
+        </header>
+        <${AgentCard} agent=${state.agent} />
+        <${Rooms} rooms=${rooms} onEnter=${enterRoom} />
+        <${OpenItemsList} />
+        <${StepMatDone} state=${state} />
+        <${HomeFeed} items=${feed} />
+        <${HomeSettingsDialog} open=${settingsOpen} onClose=${() => setSettingsOpen(false)}
+          session=${session} showToast=${showToast} />
+      </div>`;
+  }
+
+  const step = state.step;
+  // Branch B inserts a step: get an app that can connect, which pushes the agent to number 3.
+  // It is driven by needsBetterApp (live) rather than by branch (write-once, historical), so
+  // re-pasting a mat from a capable app collapses this step by itself.
+  const onBranchB = state.needsBetterApp || (state.branch === 'B' && !state.mat.done);
+
+  return html`
+    <div class="koti">
+      <${HomeHeader} name=${name} onOpenSettings=${() => setSettingsOpen(true)} />
+      <${Welcome} />
+
+      <ol class="koti-steps">
+        <li>
+          ${step === 'welcome-mat'
+            ? html`<${StepMat} onDone=${onMatDone} />`
+            : html`<${StepMatDone} state=${state} />`}
+        </li>
+        <li>
+          ${step === 'better-app'
+            ? html`<${StepBranchB} state=${state} onChanged=${onMatDone} />`
+            : step === 'first-agent' && !onBranchB
+              ? html`<${StepAgent} onChanged=${load} showToast=${showToast} />`
+              : html`<${DimmedStep}
+                  n="2"
+                  titleKey=${onBranchB ? 'home.step2b' : (STEP_TITLES[step]?.[0] ?? 'home.step2')}
+                  fallback=${onBranchB ? 'Get an app that can connect' : (STEP_TITLES[step]?.[1] ?? 'Connect your first agent')}
+                  note=${tr('home.step2Dim', 'Opens once your welcome mat is up.')} />`}
+        </li>
+        ${onBranchB && html`
+          <li>
+            ${step === 'first-agent'
+              ? html`<${StepAgent} onChanged=${load} showToast=${showToast} />`
+              : html`<${DimmedStep}
+                  n="3"
+                  titleKey="home.step3"
+                  fallback="Connect your first agent"
+                  note=${tr('home.step3Dim', 'Opens once you have an app that can connect.')} />`}
+          </li>`}
+      </ol>
+      <${HomeFeed} items=${feed} />
+        <${HomeSettingsDialog} open=${settingsOpen} onClose=${() => setSettingsOpen(false)}
+          session=${session} showToast=${showToast} />
+      ${toast && html`<div class="koti-toast" role="status">${toast}</div>`}
+    </div>`;
+}