feat(canvas): add Agent + Hubs + personas

- New Agent scene (src/scenes/Agent.tsx): chat surface backed by per-tenant
  local memory (src/lib/agentMemory.ts). Recognises navigation intents
  ("take me to ..."), retain intents ("remember: ..."), and process-start
  intents ("start a ...") which pre-fill the Studio Intake step.
- New Hubs scene (src/scenes/Hubs.tsx): department lenses over the same
  EA2 catalog (People, Finance, Procurement, IT). Each hub funnels into
  Mission Control on its matching scenario.
- Three view-as personas in src/data/personas.ts (CEO, Head of People,
  Head of IT). Persona switcher lives in the Agent panel; flipping persona
  re-signs in via dev-login under that email.
- Store: SceneId extended with 'agent' + 'hubs'; persisted hub + personaId.
- App shell: two new top-bar tabs (Hubs, Agent) routed to the new scenes.
- CSS: Agent shell, persona cards, Hubs grid, hub mark variants.
- Type-check + production build both pass.

src/App.tsx

@@ -8,6 +8,8 @@ import Wizard from "./scenes/Wizard";
 import Settings from "./scenes/Settings";
 import Login from "./scenes/Login";
 import SsoCallback from "./scenes/SsoCallback";
+import Agent from "./scenes/Agent";
+import Hubs from "./scenes/Hubs";
 import CommandBar from "./components/CommandBar";
 import Toaster from "./components/Toaster";
 import Console from "./components/Console";
@@ -71,6 +73,12 @@ export default function App() {
             <button role="tab" aria-selected={scene === "studio"} className={`tab${scene === "studio" ? " tab-sel" : ""}`} onClick={() => setScene("studio")}>
               <Branch size={13} /> Studio
             </button>
+            <button role="tab" aria-selected={scene === "hubs"} className={`tab${scene === "hubs" ? " tab-sel" : ""}`} onClick={() => setScene("hubs")}>
+              <Layers size={13} /> Hubs
+            </button>
+            <button role="tab" aria-selected={scene === "agent"} className={`tab${scene === "agent" ? " tab-sel" : ""}`} onClick={() => setScene("agent")}>
+              <Cmd size={13} /> Agent
+            </button>
             <button role="tab" aria-selected={scene === "settings"} className={`tab${scene === "settings" ? " tab-sel" : ""}`} onClick={() => setScene("settings")}>
               <Cog size={13} /> Settings
             </button>
@@ -149,6 +157,8 @@ export default function App() {
         {scene === "mission" && <MissionControl />}
         {scene === "history" && <RunHistory />}
         {scene === "studio" && <Wizard />}
+        {scene === "hubs" && <Hubs />}
+        {scene === "agent" && <Agent />}
         {scene === "settings" && <Settings />}
       </div>
 

src/data/personas.ts

@@ -0,0 +1,50 @@
+// Three built-in persona profiles. These are not seeded into the backend —
+// they are operator-facing "view-as" presets so the live demo can show how
+// the same EA2 surface looks from different roles. Switching persona only
+// changes the email used for dev-login and a UI-side role tag.
+
+export type PersonaId = "hr-head" | "it-head" | "ceo";
+
+export interface Persona {
+  id: PersonaId;
+  name: string;
+  title: string;
+  email: string;
+  initials: string;
+  scope: string;
+  defaultHub: "hr" | "it" | "finance" | "procurement";
+}
+
+export const personas: Persona[] = [
+  {
+    id: "ceo",
+    name: "Sara Park",
+    title: "Chief Executive Officer",
+    email: "sara.park@flow-master.ai",
+    initials: "SP",
+    scope: "Org-wide. Sees every process, every hub, every escalation.",
+    defaultHub: "finance",
+  },
+  {
+    id: "hr-head",
+    name: "Maya Okafor",
+    title: "Head of People",
+    email: "maya.okafor@flow-master.ai",
+    initials: "MO",
+    scope: "HR hub. Hiring, onboarding, leave, performance, geo-attendance.",
+    defaultHub: "hr",
+  },
+  {
+    id: "it-head",
+    name: "Daniel Reyes",
+    title: "Head of IT",
+    email: "daniel.reyes@flow-master.ai",
+    initials: "DR",
+    scope: "IT hub. Procurement (laptops, software), access, incidents.",
+    defaultHub: "it",
+  },
+];
+
+export function personaById(id: PersonaId | string | null | undefined): Persona | undefined {
+  return personas.find((p) => p.id === id);
+}

src/index.css

@@ -1790,3 +1790,338 @@ select.studio-input { background: var(--bp-paper); }
 
 .theme-toggle { display: inline-flex; align-items: center; gap: 6px; }
 .theme-toggle-label { font-size: 10px; letter-spacing: 0.08em; font-weight: 600; text-transform: uppercase; }
+
+/* ===== Agent + Hubs + Personas ===== */
+
+.agent-shell {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  gap: var(--space-md);
+  height: calc(100vh - 64px);
+  padding: var(--space-md);
+}
+
+.agent-side {
+  border: 1px solid var(--bp-line);
+  background: var(--bg-1);
+  padding: var(--space-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+  overflow-y: auto;
+}
+
+.agent-side-h {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-2);
+  padding-bottom: var(--space-sm);
+  border-bottom: 1px solid var(--bp-line);
+}
+
+.agent-persona-label {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-3);
+  margin-bottom: 6px;
+}
+
+.agent-persona-card {
+  display: grid;
+  grid-template-columns: 36px 1fr;
+  gap: 10px;
+  align-items: start;
+  padding: 10px;
+  border: 1px solid var(--bp-line);
+  background: var(--bg-2);
+  margin-bottom: var(--space-sm);
+}
+
+.agent-persona-avatar {
+  width: 36px;
+  height: 36px;
+  display: grid;
+  place-items: center;
+  background: var(--bp-accent, #d97a00);
+  color: #fff;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+}
+
+.agent-persona-avatar.sm { width: 26px; height: 26px; font-size: 11px; }
+
+.agent-persona-name { display: block; font-size: 12px; color: var(--text-1); font-weight: 600; }
+.agent-persona-title { display: block; font-size: 11px; color: var(--text-2); }
+.agent-persona-scope { font-size: 10.5px; color: var(--text-3); margin-top: 4px; line-height: 1.35; }
+
+.agent-persona-empty { font-size: 11px; color: var(--text-3); padding: 8px; }
+
+.agent-persona-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-top: 6px;
+}
+
+.agent-persona-btn {
+  display: grid;
+  grid-template-columns: 26px 1fr;
+  gap: 8px;
+  align-items: center;
+  padding: 6px 8px;
+  border: 1px solid var(--bp-line);
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+  color: var(--text-1);
+}
+
+.agent-persona-btn:hover { background: var(--bg-2); }
+.agent-persona-btn.is-on { border-color: var(--bp-accent); background: var(--bg-2); }
+
+.agent-mem {
+  border-top: 1px solid var(--bp-line);
+  padding-top: var(--space-md);
+}
+
+.agent-mem-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: transparent;
+  border: none;
+  color: var(--text-1);
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  cursor: pointer;
+  padding: 0;
+}
+
+.agent-mem-body { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
+.agent-mem-empty { font-size: 11px; color: var(--text-3); }
+
+.agent-mem-row {
+  display: grid;
+  grid-template-columns: 60px 1fr;
+  gap: 6px;
+  font-size: 11px;
+  align-items: start;
+  padding: 4px 0;
+  border-bottom: 1px dashed var(--bp-line);
+}
+
+.agent-mem-kind {
+  font-size: 9.5px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-2);
+  background: var(--bg-2);
+  padding: 2px 6px;
+  text-align: center;
+}
+
+.agent-mem-world { color: #1a6b2e; }
+.agent-mem-experience { color: #1a3a6b; }
+.agent-mem-opinion { color: #6b2e1a; }
+
+.agent-mem-text { color: var(--text-1); line-height: 1.4; }
+
+.agent-main {
+  display: grid;
+  grid-template-rows: 1fr auto;
+  border: 1px solid var(--bp-line);
+  background: var(--bg-1);
+  overflow: hidden;
+}
+
+.agent-thread {
+  overflow-y: auto;
+  padding: var(--space-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+}
+
+.agent-msg {
+  display: grid;
+  grid-template-columns: 28px 1fr;
+  gap: 10px;
+  max-width: 720px;
+}
+
+.agent-msg-user { justify-self: end; }
+.agent-msg-user .agent-msg-body { background: var(--bg-2); }
+
+.agent-msg-avatar {
+  width: 28px;
+  height: 28px;
+  display: grid;
+  place-items: center;
+  background: var(--bg-2);
+  border: 1px solid var(--bp-line);
+}
+
+.agent-msg-body {
+  padding: 10px 12px;
+  border: 1px solid var(--bp-line);
+  background: var(--bg-1);
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--text-1);
+}
+
+.agent-msg-text { white-space: pre-wrap; }
+
+.agent-msg-facts {
+  margin: 8px 0 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.agent-msg-facts li {
+  display: grid;
+  grid-template-columns: 70px 1fr;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--text-2);
+}
+
+.agent-composer {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 6px;
+  padding: var(--space-sm);
+  border-top: 1px solid var(--bp-line);
+  background: var(--bg-2);
+}
+
+.agent-input {
+  border: 1px solid var(--bp-line);
+  background: var(--bg-1);
+  color: var(--text-1);
+  padding: 10px 12px;
+  font-size: 12px;
+  font-family: inherit;
+}
+
+.agent-input:focus { outline: 1px solid var(--bp-accent); }
+
+.btn-sm { padding: 4px 8px; font-size: 11px; }
+
+/* ===== Hubs ===== */
+
+.hubs-page {
+  padding: var(--space-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+  max-width: 1280px;
+  margin: 0 auto;
+}
+
+.hubs-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--space-md);
+}
+
+.hubs-sub { font-size: 12px; color: var(--text-2); max-width: 60ch; line-height: 1.55; margin-top: 6px; }
+
+.hubs-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: var(--space-md);
+}
+
+.hub-card {
+  border: 1px solid var(--bp-line);
+  background: var(--bg-1);
+  padding: var(--space-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
+.hub-card-h {
+  display: grid;
+  grid-template-columns: 28px 1fr;
+  gap: 10px;
+  align-items: start;
+}
+
+.hub-card-mark {
+  width: 24px;
+  height: 24px;
+  background: var(--bp-accent);
+}
+
+.hub-card-mark.hub-hr { background: #6b3aa0; }
+.hub-card-mark.hub-finance { background: #1a6b3a; }
+.hub-card-mark.hub-procurement { background: #b06a00; }
+.hub-card-mark.hub-it { background: #1a3a6b; }
+
+.hub-card-title { font-size: 14px; margin: 0; color: var(--text-1); font-weight: 600; }
+.hub-card-blurb { font-size: 11.5px; color: var(--text-2); margin: 4px 0 0; line-height: 1.45; }
+
+.hub-card-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.hub-card-list li {
+  font-size: 11.5px;
+  color: var(--text-2);
+  padding-left: 14px;
+  position: relative;
+}
+
+.hub-card-list li::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 7px;
+  width: 6px;
+  height: 1px;
+  background: var(--bp-accent);
+}
+
+.hub-card-foot {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-top: 1px solid var(--bp-line);
+  padding-top: var(--space-sm);
+  margin-top: auto;
+}
+
+.hub-card-meta {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 10.5px;
+  color: var(--text-3);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.hubs-pers {
+  border-top: 1px solid var(--bp-line);
+  padding-top: var(--space-md);
+}
+
+.warning-text { font-size: 11px; color: #b06a00; margin-top: 8px; }

src/lib/agentMemory.ts

@@ -0,0 +1,85 @@
+// Per-tenant agent memory (mini-hindsight). Stored in localStorage, keyed by
+// tenant + actor.user_id. Three fact kinds: world, experience, opinion.
+// Survives reloads; cleared on Settings → "Forget all".
+
+export type FactKind = "world" | "experience" | "opinion";
+
+export interface Fact {
+  id: string;
+  kind: FactKind;
+  content: string;
+  tags: string[];
+  createdAt: number;
+}
+
+const NS = "fm.mc.agent.mem.v1";
+
+function key(tenant: string, userId: string): string {
+  return `${NS}:${tenant}:${userId}`;
+}
+
+function load(tenant: string, userId: string): Fact[] {
+  if (typeof localStorage === "undefined") return [];
+  try {
+    const raw = localStorage.getItem(key(tenant, userId));
+    if (!raw) return [];
+    return JSON.parse(raw) as Fact[];
+  } catch {
+    return [];
+  }
+}
+
+function save(tenant: string, userId: string, facts: Fact[]): void {
+  if (typeof localStorage === "undefined") return;
+  try {
+    localStorage.setItem(key(tenant, userId), JSON.stringify(facts.slice(-500)));
+  } catch {
+    /* quota: drop silently */
+  }
+}
+
+export const agentMemory = {
+  list(tenant: string, userId: string): Fact[] {
+    return load(tenant, userId);
+  },
+  retain(tenant: string, userId: string, kind: FactKind, content: string, tags: string[] = []): Fact {
+    const facts = load(tenant, userId);
+    const fact: Fact = {
+      id: `f_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`,
+      kind,
+      content: content.trim(),
+      tags,
+      createdAt: Date.now(),
+    };
+    facts.push(fact);
+    save(tenant, userId, facts);
+    return fact;
+  },
+  recall(tenant: string, userId: string, query: string, limit = 8): Fact[] {
+    const facts = load(tenant, userId);
+    if (!query.trim()) return facts.slice(-limit).reverse();
+    const q = query.toLowerCase();
+    const tokens = q.split(/\s+/).filter(Boolean);
+    const scored = facts.map((f) => {
+      const hay = `${f.content} ${f.tags.join(" ")}`.toLowerCase();
+      let score = 0;
+      for (const t of tokens) {
+        if (hay.includes(t)) score += 1;
+      }
+      return { f, score };
+    });
+    return scored
+      .filter((s) => s.score > 0)
+      .sort((a, b) => b.score - a.score || b.f.createdAt - a.f.createdAt)
+      .slice(0, limit)
+      .map((s) => s.f);
+  },
+  forget(tenant: string, userId: string): void {
+    if (typeof localStorage === "undefined") return;
+    try {
+      localStorage.removeItem(key(tenant, userId));
+    } catch {
+      /* swallow */
+    }
+  },
+};

src/scenes/Agent.tsx

@@ -0,0 +1,285 @@
+// Agent scene — chat interface backed by per-tenant memory.
+// The agent can: answer using recalled facts, retain new facts the user shares,
+// jump to scenes ("take me to procurement"), and propose starting a process.
+// It is intentionally small (no LLM round-trip) so it works offline and stays
+// honest: every action it takes is visible and reversible.
+
+import { useEffect, useRef, useState } from "react";
+import { useApp } from "../state/store";
+import { agentMemory, type Fact } from "../lib/agentMemory";
+import { personas, personaById } from "../data/personas";
+import { Bot, User, Sparkles, Arrow, Close } from "../components/icons";
+
+interface Message {
+  id: number;
+  role: "user" | "agent";
+  text: string;
+  facts?: Fact[];
+  action?: { label: string; run: () => void };
+}
+
+const TENANT = "default";
+
+let msgSeq = 0;
+
+function detectIntent(
+  text: string,
+): { kind: "goto"; scene: "mission" | "history" | "studio" | "settings" | "hubs" } |
+   { kind: "remember"; content: string } |
+   { kind: "start"; topic: string } |
+   { kind: "ask" } {
+  const t = text.toLowerCase().trim();
+  if (/^(take me to|go to|open|show me) (mission|control)/.test(t)) return { kind: "goto", scene: "mission" };
+  if (/^(take me to|go to|open|show me) (runs|history)/.test(t)) return { kind: "goto", scene: "history" };
+  if (/^(take me to|go to|open|show me) (studio|wizard|process studio|process creation)/.test(t)) return { kind: "goto", scene: "studio" };
+  if (/^(take me to|go to|open|show me) (settings|preferences)/.test(t)) return { kind: "goto", scene: "settings" };
+  if (/^(take me to|go to|open|show me) (hubs|hub)/.test(t)) return { kind: "goto", scene: "hubs" };
+  if (/^(remember|note|save):? /.test(t)) {
+    return { kind: "remember", content: text.replace(/^(remember|note|save):? /i, "").trim() };
+  }
+  if (/^(start|kick off|launch|run) /.test(t)) {
+    return { kind: "start", topic: text.replace(/^(start|kick off|launch|run) /i, "").trim() };
+  }
+  return { kind: "ask" };
+}
+
+export default function Agent() {
+  const setScene = useApp((s) => s.setScene);
+  const actor = useApp((s) => s.actor);
+  const userEmail = useApp((s) => s.userEmail);
+  const personaId = useApp((s) => s.personaId);
+  const setPersonaId = useApp((s) => s.setPersonaId);
+  const loginAs = useApp((s) => s.loginAs);
+  const pushToast = useApp((s) => s.pushToast);
+
+  const userId = actor?.user_id ?? userEmail ?? "anon";
+
+  const [messages, setMessages] = useState<Message[]>(() => {
+    const persona = personaById(personaId);
+    return [{
+      id: ++msgSeq,
+      role: "agent",
+      text: persona
+        ? `Hi ${persona.name.split(" ")[0]}. I'm the FlowMaster agent. I can take you anywhere in Mission Control, remember things for you, and propose processes to start. Try: "take me to the HR hub", "remember: budget cap is 5,000 USD", or "start a laptop procurement".`
+        : `Hi. I'm the FlowMaster agent. I work alongside you in Mission Control. Try: "take me to mission", "remember: I prefer Dell laptops", or "start a new process".`,
+    }];
+  });
+  const [input, setInput] = useState("");
+  const [memOpen, setMemOpen] = useState(false);
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
+  }, [messages]);
+
+  const send = () => {
+    const text = input.trim();
+    if (!text) return;
+    const userMsg: Message = { id: ++msgSeq, role: "user", text };
+    const intent = detectIntent(text);
+    let reply: Message;
+
+    switch (intent.kind) {
+      case "goto": {
+        const sceneLabel: Record<string, string> = {
+          mission: "Mission Control",
+          history: "Run History",
+          studio: "Process Studio",
+          settings: "Settings",
+          hubs: "Hubs index",
+        };
+        reply = {
+          id: ++msgSeq,
+          role: "agent",
+          text: `Taking you to ${sceneLabel[intent.scene]}.`,
+          action: { label: `Open ${sceneLabel[intent.scene]}`, run: () => setScene(intent.scene as never) },
+        };
+        // auto-navigate after a short beat so the user sees the response
+        window.setTimeout(() => setScene(intent.scene as never), 350);
+        break;
+      }
+      case "remember": {
+        const fact = agentMemory.retain(TENANT, userId, "world", intent.content, []);
+        reply = {
+          id: ++msgSeq,
+          role: "agent",
+          text: `Got it. I'll remember: "${fact.content}".`,
+          facts: [fact],
+        };
+        break;
+      }
+      case "start": {
+        reply = {
+          id: ++msgSeq,
+          role: "agent",
+          text: `I can draft a "${intent.topic}" process. The Process Studio walks you through intake → structure → data → rules → publish. Want me to open it pre-filled?`,
+          action: {
+            label: "Open Process Studio",
+            run: () => {
+              try { localStorage.setItem("fm.mc.wizard.draft", JSON.stringify({ step: "Intake", name: intent.topic, description: `When someone needs ${intent.topic}, run the right approval and procurement steps.`, nodes: [], edges: [], fields: [], rules: [] })); } catch { /* ignore */ }
+              setScene("studio");
+            },
+          },
+        };
+        break;
+      }
+      case "ask":
+      default: {
+        const hits = agentMemory.recall(TENANT, userId, text, 5);
+        if (hits.length === 0) {
+          reply = {
+            id: ++msgSeq,
+            role: "agent",
+            text: `I don't have anything stored on that yet. If you want me to remember something, start your message with "remember:". I can also navigate ("take me to ...") or kick off a process ("start a ...").`,
+          };
+        } else {
+          reply = {
+            id: ++msgSeq,
+            role: "agent",
+            text: `Here's what I remember that matches:`,
+            facts: hits,
+          };
+        }
+        break;
+      }
+    }
+
+    setMessages((m) => [...m, userMsg, reply]);
+    setInput("");
+  };
+
+  const switchPersona = async (id: typeof personas[number]["id"]) => {
+    const p = personaById(id);
+    if (!p) return;
+    setPersonaId(id);
+    try {
+      await loginAs(p.email);
+      pushToast("ok", `Now viewing as ${p.name} · ${p.title}`);
+    } catch {
+      pushToast("warn", `Persona set locally; backend sign-in unavailable.`);
+    }
+  };
+
+  const persona = personaById(personaId);
+  const mem = agentMemory.list(TENANT, userId);
+
+  return (
+    <div className="agent-shell">
+      <aside className="agent-side">
+        <div className="agent-side-h">
+          <Bot size={14} /> <span>Agent</span>
+        </div>
+        <div className="agent-persona">
+          <div className="agent-persona-label">Acting as</div>
+          {persona ? (
+            <div className="agent-persona-card">
+              <div className="agent-persona-avatar">{persona.initials}</div>
+              <div>
+                <div className="agent-persona-name">{persona.name}</div>
+                <div className="agent-persona-title">{persona.title}</div>
+                <div className="agent-persona-scope">{persona.scope}</div>
+              </div>
+            </div>
+          ) : (
+            <div className="agent-persona-empty">No persona selected</div>
+          )}
+          <div className="agent-persona-list">
+            {personas.map((p) => (
+              <button
+                key={p.id}
+                className={`agent-persona-btn${personaId === p.id ? " is-on" : ""}`}
+                onClick={() => switchPersona(p.id)}
+                title={p.scope}
+              >
+                <span className="agent-persona-avatar sm">{p.initials}</span>
+                <span>
+                  <span className="agent-persona-name">{p.name}</span>
+                  <span className="agent-persona-title">{p.title}</span>
+                </span>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <div className="agent-mem">
+          <button className="agent-mem-toggle" onClick={() => setMemOpen((v) => !v)}>
+            <Sparkles size={12} /> Memory · {mem.length}
+          </button>
+          {memOpen && (
+            <div className="agent-mem-body">
+              {mem.length === 0 && <div className="agent-mem-empty">Nothing remembered yet.</div>}
+              {mem.slice(-12).reverse().map((f) => (
+                <div key={f.id} className="agent-mem-row">
+                  <span className={`agent-mem-kind agent-mem-${f.kind}`}>{f.kind}</span>
+                  <span className="agent-mem-text">{f.content}</span>
+                </div>
+              ))}
+              {mem.length > 0 && (
+                <button
+                  className="link-btn"
+                  onClick={() => {
+                    agentMemory.forget(TENANT, userId);
+                    pushToast("ok", "Agent memory cleared.");
+                    setMessages([{ id: ++msgSeq, role: "agent", text: "Memory cleared. Starting fresh." }]);
+                  }}
+                >
+                  <Close size={12} /> Forget all
+                </button>
+              )}
+            </div>
+          )}
+        </div>
+      </aside>
+
+      <section className="agent-main">
+        <div className="agent-thread" role="log" aria-live="polite">
+          {messages.map((m) => (
+            <div key={m.id} className={`agent-msg agent-msg-${m.role}`}>
+              <div className="agent-msg-avatar">
+                {m.role === "agent" ? <Bot size={14} /> : <User size={14} />}
+              </div>
+              <div className="agent-msg-body">
+                <div className="agent-msg-text">{m.text}</div>
+                {m.facts && m.facts.length > 0 && (
+                  <ul className="agent-msg-facts">
+                    {m.facts.map((f) => (
+                      <li key={f.id}>
+                        <span className={`agent-mem-kind agent-mem-${f.kind}`}>{f.kind}</span>
+                        <span>{f.content}</span>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+                {m.action && (
+                  <button className="btn btn-ghost btn-sm" onClick={m.action.run}>
+                    <Arrow size={12} /> {m.action.label}
+                  </button>
+                )}
+              </div>
+            </div>
+          ))}
+          <div ref={bottomRef} />
+        </div>
+
+        <form
+          className="agent-composer"
+          onSubmit={(e) => {
+            e.preventDefault();
+            send();
+          }}
+        >
+          <input
+            className="agent-input"
+            placeholder="Ask the agent. e.g. take me to the HR hub · remember: budget cap 5000 · start laptop procurement"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            autoFocus
+          />
+          <button className="btn btn-primary" type="submit" disabled={!input.trim()}>
+            Send
+          </button>
+        </form>
+      </section>
+    </div>
+  );
+}

src/scenes/Hubs.tsx

@@ -0,0 +1,111 @@
+// Hubs index — operational landing for each department.
+// Each hub is a curated lens onto the same EA2 scenarios with a chat shortcut.
+
+import { useApp } from "../state/store";
+import { Bot, Arrow, Layers, User, Cog, Inbox } from "../components/icons";
+
+interface Hub {
+  id: "hr" | "it" | "finance" | "procurement";
+  label: string;
+  blurb: string;
+  scenarioPrefixes: string[];
+  highlights: string[];
+}
+
+const HUBS: Hub[] = [
+  {
+    id: "hr",
+    label: "People (HR)",
+    blurb: "Hiring, onboarding, leave, performance, attendance.",
+    scenarioPrefixes: ["hcm"],
+    highlights: ["New-hire onboarding", "Leave request approval", "Geo-attendance check-in"],
+  },
+  {
+    id: "finance",
+    label: "Finance",
+    blurb: "AR, AP, period close, refunds, supplier queries.",
+    scenarioPrefixes: ["ar", "gl"],
+    highlights: ["Customer refund approval", "Period-end close", "AP invoice triage"],
+  },
+  {
+    id: "procurement",
+    label: "Procurement",
+    blurb: "Purchase requisitions, vendor approval, three-way match.",
+    scenarioPrefixes: ["procurement", "extra"],
+    highlights: ["PR → PO approval", "Vendor onboarding", "Match invoice to PO"],
+  },
+  {
+    id: "it",
+    label: "IT",
+    blurb: "Asset procurement, access requests, incidents, service ops.",
+    scenarioPrefixes: ["service", "procurement"],
+    highlights: ["Laptop procurement (employee → manager → IT)", "Access request", "Customer incident triage"],
+  },
+];
+
+export default function Hubs() {
+  const setScene = useApp((s) => s.setScene);
+  const setScenarioId = useApp((s) => s.setScenarioId);
+  const scenarios = useApp((s) => s.scenarios);
+  const setHub = useApp((s) => s.setHub);
+
+  return (
+    <div className="hubs-page">
+      <header className="hubs-head">
+        <div>
+          <div className="mc-hero-eyebrow"><Layers size={12} /> Hubs</div>
+          <h2 className="mc-hero-title">Pick your hub</h2>
+          <p className="hubs-sub">Hubs are department-shaped lenses on the same EA2 process catalog. Pick a hub to focus the queue, agents, and processes for that team.</p>
+        </div>
+        <button className="btn btn-ghost" onClick={() => setScene("agent")}>
+          <Bot size={13} /> Ask the agent
+        </button>
+      </header>
+
+      <div className="hubs-grid">
+        {HUBS.map((h) => {
+          const matches = scenarios.filter((s) => h.scenarioPrefixes.some((p) => s.id.startsWith(p)));
+          return (
+            <article key={h.id} className="hub-card">
+              <header className="hub-card-h">
+                <div className={`hub-card-mark hub-${h.id}`} />
+                <div>
+                  <h3 className="hub-card-title">{h.label}</h3>
+                  <p className="hub-card-blurb">{h.blurb}</p>
+                </div>
+              </header>
+              <ul className="hub-card-list">
+                {h.highlights.map((hi) => (
+                  <li key={hi}>{hi}</li>
+                ))}
+              </ul>
+              <footer className="hub-card-foot">
+                <span className="hub-card-meta">
+                  <Inbox size={11} /> {matches.length} process{matches.length === 1 ? "" : "es"}
+                </span>
+                <button
+                  className="btn btn-primary btn-sm"
+                  onClick={() => {
+                    setHub(h.id);
+                    if (matches[0]) setScenarioId(matches[0].id);
+                    setScene("mission");
+                  }}
+                >
+                  Enter <Arrow size={11} />
+                </button>
+              </footer>
+            </article>
+          );
+        })}
+      </div>
+
+      <section className="hubs-pers">
+        <h3 className="panel-h"><User size={12} /> View-as personas</h3>
+        <p className="hubs-sub">Switch persona from the Agent panel to see Mission Control from a department head's seat.</p>
+        <button className="btn btn-ghost" onClick={() => setScene("agent")}>
+          <Cog size={12} /> Open agent + persona switcher
+        </button>
+      </section>
+    </div>
+  );
+}

src/state/store.ts

@@ -6,9 +6,11 @@ import { buildLiveScenariosFromApi } from "../lib/buildScenarios";
 import { api, type ApiCall, type Actor } from "../lib/api";
 import type { ProcessScenario } from "../data/types";
 
-export type SceneId = "landing" | "mission" | "history" | "studio" | "settings" | "login" | "sso-callback";
+export type SceneId = "landing" | "mission" | "history" | "studio" | "settings" | "login" | "sso-callback" | "agent" | "hubs";
 export type DataMode = "snapshot" | "live";
 export type Theme = "dark" | "light";
+export type HubId = "hr" | "it" | "finance" | "procurement" | null;
+export type PersonaId = "hr-head" | "it-head" | "ceo" | null;
 
 export interface Toast {
   id: number;
@@ -26,6 +28,8 @@ interface Prefs {
   pollEverySec: number;
   consoleOpen: boolean;
   recents: string[];
+  hub: HubId;
+  personaId: PersonaId;
 }
 
 function loadPrefs(): Partial<Prefs> {
@@ -105,6 +109,12 @@ interface AppState {
   theme: Theme;
   setTheme: (t: Theme) => void;
 
+  /** Hub / persona view-as */
+  hub: HubId;
+  setHub: (h: HubId) => void;
+  personaId: PersonaId;
+  setPersonaId: (p: PersonaId) => void;
+
   /** Action handlers (real backend mutations). */
   executeAction: (txId: string, actionId: string, values?: Record<string, unknown>) => Promise<void>;
   startInstance: (defKey: string, businessSubject?: string) => Promise<string | null>;
@@ -172,6 +182,8 @@ export const useApp = create<AppState>((set, get) => {
       pollEverySec: s.pollEverySec,
       consoleOpen: s.consoleOpen,
       recents: s.recents,
+      hub: s.hub,
+      personaId: s.personaId,
     });
   };
 
@@ -336,6 +348,11 @@ export const useApp = create<AppState>((set, get) => {
       persist();
     },
 
+    hub: prefs.hub ?? null,
+    setHub: (hub) => { set({ hub }); persist(); },
+    personaId: prefs.personaId ?? null,
+    setPersonaId: (personaId) => { set({ personaId }); persist(); },
+
     executeAction: async (txId, actionId, values = {}) => {
       const a = get().actor;
       if (!a?.user_id) {