feat(canvas): Agent + Hubs + view-as personas (#1)

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) {