diff --git a/app/web/src/hooks/useHubCustomAgents.ts b/app/web/src/hooks/useHubCustomAgents.ts
new file mode 100644
index 00000000..1660eaac
--- /dev/null
+++ b/app/web/src/hooks/useHubCustomAgents.ts
@@ -0,0 +1,86 @@
+import { useEffect, useState } from 'react';
+import {
+  createHubClient,
+  type HubCustomAgent,
+} from '@shared/index';
+import { getHubBaseUrl } from './useHubSession';
+
+export type { HubCustomAgent };
+
+type CustomAgentsState = {
+  agents: HubCustomAgent[];
+  error?: string;
+  isLoading: boolean;
+  source: 'hub' | 'catalog';
+};
+
+function formatHubError(error: unknown): string {
+  if (error instanceof Error) return error.message;
+  return String(error || 'Hub custom agent catalog unavailable');
+}
+
+export function useHubCustomAgents(token: string | null) {
+  const [state, setState] = useState<CustomAgentsState>({
+    agents: [],
+    isLoading: false,
+    source: 'catalog',
+  });
+
+  useEffect(() => {
+    if (!token) {
+      setState({ agents: [], isLoading: false, source: 'catalog' });
+      return undefined;
+    }
+
+    const controller = new AbortController();
+    let cancelled = false;
+    const timeoutId = window.setTimeout(() => controller.abort(), 2500);
+
+    setState((current) => ({ ...current, isLoading: true, error: undefined }));
+
+    const client = createHubClient({
+      baseUrl: getHubBaseUrl(),
+      fetch: (input, init) => fetch(input, { ...init, signal: controller.signal }),
+      getToken: () => token,
+    });
+
+    client
+      .listCustomAgents()
+      .then((agents) => {
+        if (cancelled) return;
+        setState({
+          agents,
+          isLoading: false,
+          source: 'hub',
+        });
+      })
+      .catch((error) => {
+        if (cancelled) return;
+        if (controller.signal.aborted) {
+          setState({
+            agents: [],
+            error: 'Hub custom agent catalog timed out',
+            isLoading: false,
+            source: 'catalog',
+          });
+          return;
+        }
+
+        setState({
+          agents: [],
+          error: formatHubError(error),
+          isLoading: false,
+          source: 'catalog',
+        });
+      })
+      .finally(() => window.clearTimeout(timeoutId));
+
+    return () => {
+      cancelled = true;
+      window.clearTimeout(timeoutId);
+      controller.abort();
+    };
+  }, [token]);
+
+  return state;
+}
diff --git a/app/web/src/hooks/useHubIMSnapshot.ts b/app/web/src/hooks/useHubIMSnapshot.ts
new file mode 100644
index 00000000..5217eedb
--- /dev/null
+++ b/app/web/src/hooks/useHubIMSnapshot.ts
@@ -0,0 +1,113 @@
+import { useEffect, useState } from 'react';
+import {
+  createHubClient,
+  type HubMessage,
+  type HubSession,
+} from '@shared/index';
+import { getHubBaseUrl } from './useHubSession';
+
+type HubIMSnapshotStatus = 'locked' | 'loading' | 'ready' | 'error';
+
+export type HubIMSnapshot = {
+  error?: string;
+  messagesBySessionId: Record<string, HubMessage[]>;
+  sessions: HubSession[];
+  status: HubIMSnapshotStatus;
+};
+
+const emptyMessagesBySessionId: Record<string, HubMessage[]> = {};
+
+function formatHubError(error: unknown): string {
+  if (error instanceof Error) return error.message;
+  return String(error || 'Hub IM snapshot unavailable');
+}
+
+function getSessionId(session: HubSession): string {
+  return session.session_id || session.id || '';
+}
+
+export function useHubIMSnapshot(token: string | null): HubIMSnapshot {
+  const [snapshot, setSnapshot] = useState<HubIMSnapshot>({
+    messagesBySessionId: emptyMessagesBySessionId,
+    sessions: [],
+    status: token ? 'loading' : 'locked',
+  });
+
+  useEffect(() => {
+    if (!token) {
+      setSnapshot({
+        messagesBySessionId: emptyMessagesBySessionId,
+        sessions: [],
+        status: 'locked',
+      });
+      return undefined;
+    }
+
+    const controller = new AbortController();
+    const timeoutId = window.setTimeout(() => controller.abort(), 3500);
+    let cancelled = false;
+
+    const client = createHubClient({
+      baseUrl: getHubBaseUrl(),
+      fetch: (input, init) => fetch(input, { ...init, signal: controller.signal }),
+      getToken: () => token,
+    });
+
+    setSnapshot((current) => ({
+      ...current,
+      error: undefined,
+      messagesBySessionId: emptyMessagesBySessionId,
+      sessions: [],
+      status: 'loading',
+    }));
+
+    async function loadSnapshot() {
+      try {
+        const sessions = (await client.listSessions()).filter(
+          (session) => session.type === 'private',
+        );
+        const messageEntries = await Promise.all(
+          sessions.map(async (session) => {
+            const sessionId = getSessionId(session);
+            if (!sessionId) return ['', []] as const;
+            const messages = await client.getMessages(sessionId, { limit: 20 });
+            return [sessionId, messages] as const;
+          }),
+        );
+
+        if (cancelled) return;
+
+        setSnapshot({
+          messagesBySessionId: Object.fromEntries(
+            messageEntries.filter(([sessionId]) => Boolean(sessionId)),
+          ),
+          sessions,
+          status: 'ready',
+        });
+      } catch (error) {
+        if (cancelled) return;
+
+        setSnapshot({
+          error: controller.signal.aborted
+            ? 'Hub IM snapshot timed out'
+            : formatHubError(error),
+          messagesBySessionId: emptyMessagesBySessionId,
+          sessions: [],
+          status: 'error',
+        });
+      } finally {
+        window.clearTimeout(timeoutId);
+      }
+    }
+
+    void loadSnapshot();
+
+    return () => {
+      cancelled = true;
+      window.clearTimeout(timeoutId);
+      controller.abort();
+    };
+  }, [token]);
+
+  return snapshot;
+}
diff --git a/app/web/src/hooks/useHubSession.ts b/app/web/src/hooks/useHubSession.ts
new file mode 100644
index 00000000..15e71bcc
--- /dev/null
+++ b/app/web/src/hooks/useHubSession.ts
@@ -0,0 +1,56 @@
+import { useEffect, useMemo, useState } from 'react';
+
+const HUB_TOKEN_KEYS = [
+  'agenthub_hub_token',
+  'agenthub:web_hub_token',
+  'agenthub_web_hub_token',
+  'agenthub:hub_token',
+];
+
+function readStorageToken(storage: Storage | undefined, key: string): string | null {
+  try {
+    return storage?.getItem(key)?.trim() || null;
+  } catch {
+    return null;
+  }
+}
+
+export function getWebHubToken(): string | null {
+  if (typeof window === 'undefined') return null;
+
+  for (const key of HUB_TOKEN_KEYS) {
+    const token = readStorageToken(window.sessionStorage, key) ?? readStorageToken(window.localStorage, key);
+    if (token) return token;
+  }
+
+  return null;
+}
+
+export function getHubBaseUrl(): string {
+  const configured = (import.meta as ImportMeta & { env?: Record<string, string | undefined> }).env?.VITE_HUB_URL;
+  return (configured || 'http://localhost:8080').replace(/\/+$/, '');
+}
+
+export function useHubSession() {
+  const [token, setToken] = useState<string | null>(() => getWebHubToken());
+
+  useEffect(() => {
+    const refresh = () => setToken(getWebHubToken());
+    window.addEventListener('storage', refresh);
+    window.addEventListener('focus', refresh);
+
+    return () => {
+      window.removeEventListener('storage', refresh);
+      window.removeEventListener('focus', refresh);
+    };
+  }, []);
+
+  return useMemo(
+    () => ({
+      hasSession: Boolean(token),
+      token,
+      hubBaseUrl: getHubBaseUrl(),
+    }),
+    [token],
+  );
+}
diff --git a/app/web/src/hooks/useWorkbenchProjection.ts b/app/web/src/hooks/useWorkbenchProjection.ts
new file mode 100644
index 00000000..aaf59b98
--- /dev/null
+++ b/app/web/src/hooks/useWorkbenchProjection.ts
@@ -0,0 +1,102 @@
+import { useEffect, useReducer } from 'react';
+import {
+  listApprovals,
+  listArtifacts,
+  listPreviews,
+  listProjects,
+  listRunners,
+  listRuns,
+  listThreads,
+  workbenchReducer,
+  type WorkbenchState,
+} from '@shared/index';
+
+const initialWorkbenchProjectionState: WorkbenchState = {
+  projects: [],
+  threads: [],
+  runners: [],
+  runs: [],
+  threadItems: [],
+  approvals: [],
+  artifacts: [],
+  previews: [],
+  runLogs: {},
+  connection: { status: 'idle' },
+  lastSeq: 0,
+};
+
+function formatError(error: unknown) {
+  if (error instanceof Error) return error.message;
+  return String(error || 'Edge catalog unavailable');
+}
+
+function withTimeout<T>(promise: Promise<T>, timeoutMs = 2500): Promise<T> {
+  return new Promise((resolve, reject) => {
+    const timer = window.setTimeout(() => reject(new Error('Edge catalog did not respond.')), timeoutMs);
+    promise.then(
+      (value) => {
+        window.clearTimeout(timer);
+        resolve(value);
+      },
+      (error) => {
+        window.clearTimeout(timer);
+        reject(error);
+      },
+    );
+  });
+}
+
+export function useWorkbenchProjection() {
+  const [state, dispatch] = useReducer(
+    workbenchReducer,
+    initialWorkbenchProjectionState,
+    (initialState) => workbenchReducer(initialState, { type: 'connection.loading' }),
+  );
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function loadSnapshot() {
+      dispatch({ type: 'connection.loading' });
+      try {
+        const [projects, threads, runners, runs, approvals, artifacts, previews] =
+          await withTimeout(Promise.all([
+            listProjects({ pageSize: 50 }),
+            listThreads({ pageSize: 50 }),
+            listRunners(),
+            listRuns({ pageSize: 50 }),
+            listApprovals(),
+            listArtifacts(),
+            listPreviews(),
+          ]));
+
+        if (cancelled) return;
+
+        dispatch({
+          type: 'snapshot.loaded',
+          snapshot: {
+            projects,
+            threads,
+            runners,
+            runs,
+            approvals,
+            artifacts,
+            previews,
+          },
+        });
+      } catch (error) {
+        if (!cancelled) {
+          dispatch({ type: 'connection.error', error: formatError(error) });
+        }
+      }
+    }
+
+    loadSnapshot();
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return state;
+}
diff --git a/app/web/src/i18n/index.ts b/app/web/src/i18n/index.ts
index 5b6e722a..8fa7cdee 100644
--- a/app/web/src/i18n/index.ts
+++ b/app/web/src/i18n/index.ts
@@ -1,20 +1,98 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
-import zh from './locales/zh.json';
-import en from './locales/en.json';
 
-function detectLanguage(): string {
+import zhCommon from './locales/zh/common.json';
+import zhStatus from './locales/zh/status.json';
+import zhWorkbench from './locales/zh/workbench.json';
+import zhAgentSquare from './locales/zh/agentSquare.json';
+import zhPrivateChats from './locales/zh/privateChats.json';
+import zhGroupWorkspace from './locales/zh/groupWorkspace.json';
+import zhProject from './locales/zh/project.json';
+
+import enCommon from './locales/en/common.json';
+import enStatus from './locales/en/status.json';
+import enWorkbench from './locales/en/workbench.json';
+import enAgentSquare from './locales/en/agentSquare.json';
+import enPrivateChats from './locales/en/privateChats.json';
+import enGroupWorkspace from './locales/en/groupWorkspace.json';
+import enProject from './locales/en/project.json';
+
+export type AppLanguage = 'en' | 'zh';
+
+const LANGUAGE_STORAGE_KEY = 'agenthub-language';
+
+export function normalizeLanguage(value: string | null | undefined): AppLanguage {
+  return value?.toLowerCase().startsWith('zh') ? 'zh' : 'en';
+}
+
+function isAppLanguage(value: string | null | undefined): value is AppLanguage {
+  return value === 'en' || value === 'zh';
+}
+
+function readStoredLanguage(): AppLanguage | null {
+  try {
+    const stored = localStorage.getItem(LANGUAGE_STORAGE_KEY);
+    return isAppLanguage(stored) ? stored : null;
+  } catch {
+    return null;
+  }
+}
+
+function detectBrowserLanguage(): AppLanguage {
   if (typeof navigator === 'undefined') return 'en';
-  const lang = navigator.language || '';
-  if (lang.startsWith('zh')) return 'zh';
-  return 'en';
+  const language = navigator.language || navigator.languages?.[0] || '';
+  return normalizeLanguage(language);
+}
+
+export function getInitialLanguage(): AppLanguage {
+  return readStoredLanguage() ?? detectBrowserLanguage() ?? 'en';
+}
+
+export function setLanguagePreference(language: AppLanguage): void {
+  try {
+    localStorage.setItem(LANGUAGE_STORAGE_KEY, language);
+  } catch {
+    // localStorage may be unavailable in private mode or embedded contexts.
+  }
+
+  void i18n.changeLanguage(language);
 }
 
 i18n.use(initReactI18next).init({
-  resources: { zh: { translation: zh }, en: { translation: en } },
-  lng: detectLanguage(),
+  resources: {
+    zh: {
+      common: zhCommon,
+      status: zhStatus,
+      workbench: zhWorkbench,
+      agentSquare: zhAgentSquare,
+      privateChats: zhPrivateChats,
+      groupWorkspace: zhGroupWorkspace,
+      project: zhProject,
+    },
+    en: {
+      common: enCommon,
+      status: enStatus,
+      workbench: enWorkbench,
+      agentSquare: enAgentSquare,
+      privateChats: enPrivateChats,
+      groupWorkspace: enGroupWorkspace,
+      project: enProject,
+    },
+  },
+  ns: ['common', 'status', 'workbench', 'agentSquare', 'privateChats', 'groupWorkspace', 'project'],
+  defaultNS: 'common',
+  lng: getInitialLanguage(),
   fallbackLng: 'en',
   interpolation: { escapeValue: false },
 });
 
+if (typeof document !== 'undefined') {
+  const syncDocumentLanguage = (language: string) => {
+    document.documentElement.lang = normalizeLanguage(language);
+  };
+
+  syncDocumentLanguage(i18n.resolvedLanguage || i18n.language || getInitialLanguage());
+  i18n.on('languageChanged', syncDocumentLanguage);
+}
+
 export default i18n;
diff --git a/app/web/src/i18n/locales/en/agentSquare.json b/app/web/src/i18n/locales/en/agentSquare.json
new file mode 100644
index 00000000..1ffbe10b
--- /dev/null
+++ b/app/web/src/i18n/locales/en/agentSquare.json
@@ -0,0 +1,100 @@
+{
+  "brand.title": "AGENTHUB",
+  "brand.subtitle": "Agent Square",
+
+  "sidebar.nav": "Navigation",
+  "sidebar.local": "Local",
+  "sidebar.catalog": "Catalog",
+  "sidebar.catalogDesc": "Browse Hub custom agents or the labeled catalog fallback",
+  "sidebar.workspace": "Workspace",
+  "sidebar.workspaceDesc": "{{count}} locally staged",
+  "sidebar.favorites": "Favorites",
+  "sidebar.favoritesDesc": "{{count}} saved agents",
+  "sidebar.categories": "Categories",
+  "sidebar.categoriesDesc": "Preview filters",
+  "sidebar.slots": "Workspace slots",
+  "sidebar.slotsDesc": "Locally staged agents stay in this preview; Hub sync is not connected.",
+
+  "categories.all": "All agents",
+
+  "header.title": "Catalog",
+  "header.subtitle": "Find the right specialist before a run starts",
+  "header.description": "Local catalog preview only. Hub /web/custom-agents is not connected yet.",
+
+  "search.placeholder": "Search agents or skills",
+  "search.ariaLabel": "Search agents",
+  "search.sortLabel": "Sort agents",
+
+  "sort.popular": "Most staged",
+  "sort.rating": "Highest rated",
+  "sort.recent": "Recently updated",
+
+  "viewMode.all": "All agents",
+  "viewMode.favorites": "Only favorites",
+  "viewMode.installed": "Only locally staged",
+
+  "stats.curated": "Catalog fallback agents",
+  "stats.hub": "Hub custom agents",
+  "stats.ready": "Local workspace ready",
+  "stats.favorites": "Favorites",
+  "stats.policy": "Preview checks",
+
+  "catalog.title": "Catalog",
+  "catalog.subtitle": "Staged specialists",
+  "catalog.hubSubtitle": "Hub custom agents",
+  "catalog.showing": "Showing {{count}} agents",
+
+  "filters.clear": "Clear",
+  "filters.clearFilters": "Clear filters",
+  "filters.clearedTitle": "Filters cleared",
+  "filters.cleared": "The catalog is back to the full local preview set.",
+  "source.hub": "Hub /web/custom-agents",
+  "source.hubDetail": "Loaded from the Hub custom-agent contract for the current Web session.",
+  "source.loading": "Loading Hub catalog",
+  "source.catalogMock": "Catalog fallback",
+  "source.catalogFallbackDetail": "Hub did not return custom agents, so this page is showing the labeled catalog fallback.",
+  "source.loginRequiredDetail": "No Web Hub session is available. Showing the labeled catalog fallback.",
+  "source.errorDetail": "Hub custom agents are unavailable: {{error}}. Showing the labeled catalog fallback.",
+
+  "card.details": "Details",
+  "card.add": "Stage locally",
+  "card.added": "Locally staged",
+  "card.available": "Available",
+  "card.rating": "{{rating}} rating",
+  "card.installs": "{{count}} staged",
+  "card.saves": "{{count}} saves",
+  "card.favorite": "Favorite {{name}}",
+  "card.unfavorite": "Unfavorite {{name}}",
+
+  "empty.noResults": "No agents match this view",
+  "empty.description": "Try another category, remove the search text, or clear the local filters.",
+
+  "detail.title": "Agent detail",
+  "detail.close": "Close detail drawer",
+  "detail.rating": "Rating",
+  "detail.installs": "Staged count",
+  "detail.favorites": "Favorites",
+  "detail.outputs": "Expected output",
+  "detail.outputsPreview": "Preview",
+  "detail.outputsDesc": "Visible in the workspace handoff after staging.",
+  "detail.workspaceState": "Workspace state",
+  "detail.favorited": "Saved to favorites",
+  "detail.favoritedDesc": "Favorite state updates immediately on the card.",
+  "detail.notFavorited": "Not favorited",
+  "detail.ready": "Local workspace ready",
+  "detail.readyToAdd": "Ready to stage locally",
+  "detail.readyDesc": "Local stage state changes the card action and summary count.",
+  "detail.select": "Select an agent",
+  "detail.selectDesc": "Open details from any visible card to compare output, rating, staged count, and workspace state.",
+
+  "confirm.added": "{{name}} saved",
+  "confirm.removed": "{{name}} removed from favorites",
+  "confirm.savesUpdated": "{{count}} local saves are now shown on the card.",
+  "confirm.alreadyStaged": "This agent is already staged in the current workspace.",
+  "confirm.alreadyStagedTitle": "{{name}} already locally staged",
+  "confirm.staged": "{{count}} of {{limit}} workspace slots are now staged.",
+  "confirm.stagedTitle": "{{name}} locally staged",
+
+  "workspace.fullTitle": "Workspace is full",
+  "workspace.full": "The workspace limit is {{limit}} local agents. Remove one before adding another."
+}
diff --git a/app/web/src/i18n/locales/en/common.json b/app/web/src/i18n/locales/en/common.json
new file mode 100644
index 00000000..69690fbf
--- /dev/null
+++ b/app/web/src/i18n/locales/en/common.json
@@ -0,0 +1,77 @@
+{
+  "brand.webPreview": "AgentHub Web Preview",
+  "nav.previewPages": "Preview pages",
+  "nav.workbench": "Workbench",
+  "nav.agentSquare": "Agent Square",
+  "nav.privateChats": "Private Chats",
+  "nav.groupWorkspace": "Group Workspace",
+  "nav.projectPreview": "Project Preview",
+  "shell.brand.surface": "Web shell",
+  "shell.toolbar.status": "Shell status",
+  "shell.status.edgeUnavailable": "Workbench Edge unavailable",
+  "shell.sidebar.label": "Workspace navigation",
+  "shell.sidebar.pages": "Pages",
+  "shell.sidebar.boundary": "Source boundary",
+  "shell.sidebar.boundary.detail": "This Web shell labels unavailable, locked, catalog fallback, and demo states without implying remote data is connected.",
+  "shell.statusPanel.label": "Status and source panel",
+  "shell.statusPanel.current": "Current page",
+  "shell.statusPanel.source": "Source state",
+  "shell.statusPanel.routes": "Routes",
+  "shell.workspace.localEdge": "Local Edge workspace",
+  "shell.workspace.catalog": "Agent catalog",
+  "shell.workspace.hubSession": "Hub session",
+  "shell.workspace.group": "Group workspace",
+  "shell.workspace.project": "Project workspace",
+  "shell.page.workbench.description": "Workbench Edge unavailable/error: the Web shell cannot confirm a Local Edge workbench snapshot for this session.",
+  "shell.page.agentSquare.description": "Agent Square catalog fallback: the page may show labeled catalog fallback content when Hub custom agents are unavailable.",
+  "shell.page.privateChats.description": "Private Chats Hub session required: private conversations stay locked until the Web client receives a Hub session.",
+  "shell.page.groupWorkspace.description": "Group demo fallback: group workspace content is clearly labeled demo data when Hub collaboration data is unavailable.",
+  "shell.page.projectPreview.description": "Project demo fallback: project workspace content is clearly labeled demo data when Edge or Hub project data is unavailable.",
+  "surface.status.realSnapshot.label": "Real snapshot",
+  "surface.status.realSnapshot.description": "Rendered from a verified live response or preserved service snapshot.",
+  "surface.status.localSource.label": "Local source",
+  "surface.status.localSource.description": "Backed by browser, workspace, or local configuration state.",
+  "surface.status.loginLocked.label": "Hub session required",
+  "surface.status.loginLocked.description": "Hub session required: the shell does not claim an active session or show fake private chat data.",
+  "surface.status.interfaceGap.label": "Interface gap",
+  "surface.status.interfaceGap.description": "The entry is visible, but the client/API wiring is not complete.",
+  "surface.status.error.label": "Edge unavailable/error",
+  "surface.status.error.description": "Workbench Edge unavailable/error: no verified Local Edge workbench source is connected in this Web shell.",
+  "surface.status.demoFallback.label": "Demo fallback",
+  "surface.status.demoFallback.description": "Group/Project demo fallback: the shell labels collaboration and project preview data as demo content when real sources are unavailable.",
+  "surface.status.catalogFallback.label": "Catalog fallback",
+  "surface.status.catalogFallback.description": "Agent Square catalog fallback: Hub custom-agent data is unavailable, so the catalog state is explicitly labeled as fallback.",
+  "surface.web.workbench.description": "Workbench Edge unavailable/error: the Web shell cannot confirm a Local Edge workbench snapshot for this session.",
+  "surface.web.agentSquare.description": "Agent Square catalog fallback: the page may show labeled catalog fallback content when Hub custom agents are unavailable.",
+  "surface.web.privateChats.description": "Private Chats Hub session required: private conversations stay locked until the Web client receives a Hub session.",
+  "surface.web.groupWorkspace.description": "Group demo fallback: group workspace content is clearly labeled demo data when Hub collaboration data is unavailable.",
+  "surface.web.projectPreview.description": "Project demo fallback: project workspace content is clearly labeled demo data when Edge or Hub project data is unavailable.",
+  "shell.source.error": "Edge unavailable/error",
+  "shell.source.error.detail": "Workbench Edge unavailable/error: no verified Local Edge workbench source is connected in this Web shell.",
+  "shell.source.catalog": "Catalog fallback",
+  "shell.source.catalog.detail": "Agent Square catalog fallback: Hub custom-agent data is unavailable, so the catalog state is explicitly labeled as fallback.",
+  "shell.source.locked": "Hub session required",
+  "shell.source.locked.detail": "Private Chats Hub session required: the shell does not claim an active session or show fake private chat data.",
+  "shell.source.demo": "Demo fallback",
+  "shell.source.demo.detail": "Group/Project demo fallback: the shell labels collaboration and project preview data as demo content when real sources are unavailable.",
+  "settings.open": "Settings",
+  "settings.title": "Settings",
+  "settings.language": "Language",
+  "settings.theme": "Theme",
+  "theme.light": "Light mode",
+  "theme.dark": "Dark mode",
+  "theme.switchToLight": "Switch to light theme",
+  "theme.switchToDark": "Switch to dark theme",
+  "loading": "Loading...",
+  "action.startRun": "Send",
+  "action.clearEvents": "Clear Events",
+  "action.cancelRun": "Cancel",
+  "action.create": "Create",
+  "action.save": "Save",
+  "action.close": "Close",
+  "action.dismiss": "Dismiss",
+  "action.apply": "Apply",
+  "action.discard": "Discard",
+  "action.approve": "Approve",
+  "action.reject": "Reject"
+}
diff --git a/app/web/src/i18n/locales/en/groupWorkspace.json b/app/web/src/i18n/locales/en/groupWorkspace.json
new file mode 100644
index 00000000..0b744ea6
--- /dev/null
+++ b/app/web/src/i18n/locales/en/groupWorkspace.json
@@ -0,0 +1,136 @@
+{
+  "sidebar.brandSubtitle": "Group Workspace",
+  "sidebar.spaces": "Spaces",
+  "sidebar.space.localDryRunSync": "Local dry-run sync",
+  "sidebar.space.sharedFiles": "Shared Files",
+  "sidebar.space.documents": "{{count}} documents",
+  "sidebar.space.demoApprovals": "Demo fallback approvals",
+  "sidebar.members": "Members",
+  "sidebar.members.onlineBusy": "{{online}} online / {{busy}} busy",
+  "sidebar.workspaceHealth": "Workspace Health",
+  "sidebar.lastLocalSync": "Last local sync: {{time}}.",
+  "member.filter.all": "All",
+  "member.filter.online": "Online",
+  "member.filter.busy": "Busy",
+  "member.filter.offline": "Offline",
+  "member.filter.aria": "Filter members by status",
+  "member.status.online": "Online",
+  "member.status.busy": "Busy",
+  "member.status.offline": "Offline",
+  "member.empty": "No members match this status filter. Pick another filter or cycle a member status.",
+  "header.title": "Shared operations cockpit",
+  "header.subtitle": "Members, tasks, files, approvals, and local dry-run status stay visible in one working surface.",
+  "header.search": "Search",
+  "header.searchPlaceholder": "tasks, files, members",
+  "header.searchAria": "Search workspace",
+  "header.export": "Export",
+  "header.assignReview": "Assign review",
+  "stat.membersOnline": "Online members",
+  "stat.demoMembersOnline": "Demo online members",
+  "stat.sharedTasks": "Shared tasks",
+  "stat.demoSharedTasks": "Demo shared tasks",
+  "stat.workspaceFiles": "Workspace files",
+  "stat.demoWorkspaceFiles": "Demo workspace files",
+  "stat.dryRunReadiness": "Dry-run readiness",
+  "stat.demoDryRunReadiness": "Demo dry-run readiness",
+  "task.board": "Shared Task Board",
+  "task.coordinationPlan": "Current coordination plan",
+  "task.board.backlog": "Backlog",
+  "task.board.inProgress": "In progress",
+  "task.board.review": "Review",
+  "task.summary.approved": "Approved for dry-run sync. Snapshot action is unlocked.",
+  "task.summary.changesRequested": "Reviewer requested one visible edit before approval.",
+  "task.summary.synced": "Dry-run snapshot synced at {{time}}.",
+  "task.tag.active": "Active",
+  "task.tag.done": "Done",
+  "task.tag.queue": "Queue",
+  "task.tag.demoActive": "Demo active",
+  "task.tag.demoDone": "Demo done",
+  "task.tag.demoQueue": "Demo queue",
+  "task.owner": "Owner: {{name}}",
+  "task.reassign": "Reassign",
+  "task.progressAria": "{{title}} progress",
+  "activity.title": "Activity Flow",
+  "activity.subtitle": "Workspace pulse",
+  "composer.mentionAria": "Mention member",
+  "composer.attachAria": "Attach file",
+  "composer.taskAria": "Create task",
+  "composer.messageAria": "Workspace message",
+  "composer.placeholder": "Send a coordination note to this workspace...",
+  "composer.charactersReady": "{{count}} characters ready",
+  "composer.draftEmpty": "Draft is empty.",
+  "composer.send": "Send note",
+  "approval.title": "Approval",
+  "approval.parserReady": "Parser v2 ready",
+  "approval.owner": "Owner: {{name}}",
+  "approval.detail.approved": "Parser diff is approved. Local dry-run controls are now visible and enabled.",
+  "approval.detail.changesRequested": "A requested-edit state is visible on the review card and board.",
+  "approval.detail.awaitingApproval": "Parser diff is staged, security checks passed, and local dry-run sync remains locked until approval.",
+  "approval.requestEdits": "Request edits",
+  "approval.approve": "Approve",
+  "approval.status.approved": "Approved",
+  "approval.status.changesRequested": "Changes requested",
+  "approval.status.awaitingApproval": "Awaiting approval",
+  "sync.title": "Local Sync Status",
+  "sync.subtitle": "Dry-run snapshot",
+  "sync.readiness": "Dry-run readiness",
+  "sync.status.synced": "Local synced",
+  "sync.status.unlocked": "Unlocked",
+  "sync.status.locked": "Locked",
+  "sync.readinessAria": "Dry-run readiness",
+  "sync.runAgain": "Run local sync again",
+  "sync.run": "Run local sync",
+  "sync.approveToRun": "Approve to run",
+  "sync.checklist.filesIndexed": "Files indexed",
+  "sync.checklist.filesDetail": "{{count}} workspace files available.",
+  "sync.checklist.assignments": "Assignments visible",
+  "sync.checklist.assignmentsDetail": "Review owner is {{owner}}.",
+  "sync.checklist.lastSync": "Last local sync",
+  "sync.checklist.lastSyncDetail": "{{time}}.",
+  "sync.checklist.notSynced": "Not synced",
+  "files.title": "Shared Files",
+  "files.subtitle": "Workspace documents",
+  "files.addAria": "Add file",
+  "files.empty": "No files are visible in this workspace.",
+  "source.edgeSnapshot": "Edge snapshot",
+  "source.offlineSnapshot": "Offline snapshot",
+  "source.loadingSnapshot": "Loading snapshot",
+  "source.mockFallback": "Demo / mock fallback",
+  "source.snapshotUnavailable": "Snapshot unavailable",
+  "source.localDryRun": "Local dry-run / {{source}}",
+  "demo.detail": "Demo/mock fallback data: {{detail}}",
+  "demo.summary": "Demo/mock fallback task: {{summary}}",
+  "demo.role": "Demo/mock fallback member: {{role}}",
+  "confirm.dismiss": "Dismiss confirmation",
+  "confirm.ready": "Local workspace ready",
+  "confirm.readyDetail": "Local controls are wired for review, dry-run sync, assignment, member presence, and notes.",
+  "confirm.statusBarCleared": "Status bar cleared",
+  "confirm.statusBarClearedDetail": "The next local action will appear here.",
+  "confirm.approvalSaved": "Approval saved",
+  "confirm.approvalSavedDetail": "Parser v2 is approved. The local dry-run snapshot button is now enabled.",
+  "confirm.changesRequested": "Changes requested",
+  "confirm.changesRequestedDetail": "Approval state changed and local dry-run sync is locked while the review is open.",
+  "confirm.reviewReassigned": "Review reassigned",
+  "confirm.reviewReassignedDetail": "Parser v2 is now assigned to {{owner}}.",
+  "confirm.syncLocked": "Local sync is locked",
+  "confirm.syncLockedDetail": "Approve parser v2 before running the local dry-run snapshot.",
+  "confirm.snapshotSynced": "Dry-run snapshot synced",
+  "confirm.snapshotSyncedDetail": "Local files, progress, and last dry-run time now reflect revision {{revision}}.",
+  "confirm.memberStatusUpdated": "Member status updated",
+  "confirm.memberStatusUpdatedDetail": "{{name}} switched to {{status}}.",
+  "confirm.memberFilterChanged": "Member filter changed",
+  "confirm.memberFilterAll": "Showing every workspace member.",
+  "confirm.memberFilterSpecific": "Showing only members marked {{filter}}.",
+  "confirm.noteEmpty": "Note is empty",
+  "confirm.noteEmptyDetail": "Write a collaboration note before sending it to the activity flow.",
+  "confirm.notePosted": "Note posted",
+  "confirm.notePostedDetail": "The note was added to the activity flow and the composer was cleared.",
+  "confirm.composerUpdated": "Composer content was updated locally.",
+  "confirm.mentionInserted": "Mention inserted",
+  "confirm.attachmentInserted": "Attachment marker inserted",
+  "confirm.taskMarkerInserted": "Task marker inserted",
+  "confirm.filePlaceholderAdded": "File placeholder added",
+  "confirm.filePlaceholderDetail": "The file counter changed locally for this interactive preview.",
+  "confirm.exportPrepared": "Export prepared",
+  "confirm.exportPreparedDetail": "No file was downloaded. The action is captured in the activity flow."
+}
diff --git a/app/web/src/i18n/locales/en/privateChats.json b/app/web/src/i18n/locales/en/privateChats.json
new file mode 100644
index 00000000..aed35467
--- /dev/null
+++ b/app/web/src/i18n/locales/en/privateChats.json
@@ -0,0 +1,118 @@
+{
+  "brand": {
+    "subtitle": "Private Chats"
+  },
+  "search": {
+    "ariaLabel": "Search private chats",
+    "placeholder": "Search people, handoffs, snippets...",
+    "filtering": "{{chatCount}} chats and {{messageCount}} messages match \"{{query}}\"",
+    "clear": "Clear search"
+  },
+  "sidebar": {
+    "title": "Private Chats",
+    "empty": "No Hub private chats are available.",
+    "emptyTitle": "No private chats"
+  },
+  "chat": {
+    "localPreview": "local preview thread",
+    "readOnly": "Hub private sessions loaded read-only from Hub",
+    "error": "Hub private sessions unavailable",
+    "loginRequired": "Hub session required",
+    "messagesArea": "Message thread"
+  },
+  "hub": {
+    "agent": "Agent",
+    "user": "User",
+    "recalled": "[recalled]",
+    "privateSession": "Hub private session",
+    "privateSessionFallback": "Private session",
+    "noRecentMessages": "No recent messages.",
+    "noConversationsSummary": "No conversations are available."
+  },
+  "status": {
+    "localMock": "Local mock",
+    "readOnly": "Read-only",
+    "loading": "Loading",
+    "error": "Hub error",
+    "locked": "Login required"
+  },
+  "locked": {
+    "title": "Hub session required",
+    "description": "Private Chats will not show mock conversations, play mock streams, or report a fake send success until Web has a Hub session and message contracts are wired."
+  },
+  "loading": {
+    "title": "Loading Hub private chats",
+    "description": "Reading private sessions and recent messages from Hub."
+  },
+  "error": {
+    "title": "Hub unavailable",
+    "description": "Private Chats could not load Hub sessions: {{error}}. Mock conversations remain hidden."
+  },
+  "header": {
+    "star": "Show key messages only",
+    "attachments": "Open attachments",
+    "more": "More actions"
+  },
+  "messages": {
+    "empty": {
+      "keyMessages": "No key messages match the current view.",
+      "noResults": "No messages match this search in the selected conversation.",
+      "threadEmpty": "This Hub private chat has no recent messages."
+    }
+  },
+  "key": {
+    "markKey": "Mark key",
+    "keyed": "Keyed"
+  },
+  "code": {
+    "snippet": "snippet",
+    "local": "local"
+  },
+  "composer": {
+    "placeholder": "Write a local preview note, paste a code fragment, or attach handoff context...",
+    "lockedPlaceholder": "Sign in to Hub before using Private Chats",
+    "readOnlyPlaceholder": "Private Chats are read-only in this Web pass",
+    "attach": "Toggle attachment panel",
+    "insertCode": "Insert code",
+    "quote": "Quote selected message",
+    "messageLabel": "Message {{name}}",
+    "voice": "Voice note unavailable in local preview",
+    "send": "Append",
+    "lockedSend": "Locked",
+    "readOnlySend": "Read-only",
+    "attachmentPanel": "Attachment panel"
+  },
+  "context": {
+    "title": "Preview Context",
+    "review": "{{count}} Hub messages - {{progress}}% reviewed",
+    "open": "Open context",
+    "reviewTitle": "Review Progress",
+    "reviewDetail": "{{keyCount}} key messages and {{unread}} unread messages from the Hub private session snapshot.",
+    "attachments": "Attachments",
+    "noAttachments": "No linked attachments for this conversation yet.",
+    "codeSnippets": "Code Snippets",
+    "noSnippets": "No code snippets are linked to this private chat.",
+    "tags": "Visible State",
+    "selectedAttachments": "Selected attachments"
+  },
+  "attachment": {
+    "remove": "Remove {{name}}"
+  },
+  "notice": {
+    "markedRead": "{{name}} marked as read",
+    "selected": "Selected {{name}}",
+    "removed": "Removed {{name}}",
+    "attachmentRemoved": "{{name}} removed",
+    "markKey": "Marked as key: {{author}}",
+    "removeKey": "Removed from key: {{author}}",
+    "codeInserted": "Code block inserted into the local draft",
+    "quoted": "Quoted {{author}}'s latest context",
+    "draftAdded": "Local draft appended to this preview thread",
+    "emptyMessage": "Write a message or select an attachment before sending",
+    "moreActions": "More actions are local-preview only",
+    "contextDetails": "Context details stay in this local preview",
+    "loginRequired": "Sign in to Hub before using Private Chats.",
+    "readOnly": "Private Chats are read-only in this Web pass.",
+    "dismiss": "Dismiss"
+  }
+}
diff --git a/app/web/src/i18n/locales/en/project.json b/app/web/src/i18n/locales/en/project.json
new file mode 100644
index 00000000..5b3e17d4
--- /dev/null
+++ b/app/web/src/i18n/locales/en/project.json
@@ -0,0 +1,149 @@
+{
+  "sidebar": {
+    "navigationAria": "Project navigation",
+    "brandName": "AGENTHUB",
+    "workspaceLabel": "Project workspace",
+    "navOverview": "Overview",
+    "navTasks": "Tasks",
+    "navFiles": "Files",
+    "navNewTask": "New task"
+  },
+  "header": {
+    "searchLabel": "Search",
+    "searchAria": "Search projects",
+    "searchPlaceholder": "Projects, tasks, files...",
+    "clearSearch": "Clear search",
+    "notifications": "Notifications",
+    "settings": "Settings",
+    "currentUser": "Current user"
+  },
+  "hero": {
+    "eyebrow": "Project detail",
+    "description": "Coordinate frontend preview pages, milestones, task readiness, design files, and dry-run records with clear live, offline snapshot, and mock fallback status.",
+    "simulateSync": "Simulate sync",
+    "syncAgain": "Sync again",
+    "markRisksReviewed": "Mark risks reviewed",
+    "reopenRisks": "Reopen risks",
+    "newTask": "New task",
+    "deliveryProgress": "Delivery progress",
+    "deliveryProgressAria": "Delivery progress {{percent}} percent",
+    "openRisks": "Open risks",
+    "riskReviewAria": "Risk review progress",
+    "catalogStatus": "Catalog status"
+  },
+  "metrics": {
+    "aria": "Project metrics",
+    "activeTasks": "Active tasks",
+    "demoActiveTasks": "Demo active tasks",
+    "milestones": "Milestones",
+    "demoMilestones": "Demo milestones",
+    "sharedFiles": "Shared files",
+    "demoSharedFiles": "Demo shared files",
+    "dryRuns": "Dry runs",
+    "demoDryRuns": "Demo dry runs"
+  },
+  "board": {
+    "tabsAria": "Project board sections",
+    "overviewTitle": "Project overview ({{count}})",
+    "tasksTitle": "Task status ({{count}})",
+    "filesTitle": "Files and run records ({{files}}/{{runs}})",
+    "doneTotal": "{{done}} done / {{total}} total"
+  },
+  "overview": {
+    "emptyTitle": "No projects match this search.",
+    "emptyHint": "Clear the search box to restore the overview list."
+  },
+  "tasks": {
+    "newTask": "New task",
+    "emptyTitle": "No tasks are visible.",
+    "emptyHint": "Clear search or add a local task to repopulate the board."
+  },
+  "files": {
+    "label": "Files",
+    "filterAria": "File type filters",
+    "emptyTitle": "No files match this filter.",
+    "emptyHint": "Use All or clear search to show project files."
+  },
+  "runs": {
+    "label": "Runs",
+    "filterAria": "Run status filters",
+    "recordsAria": "Run records",
+    "emptyTitle": "No run records match this filter.",
+    "emptyHint": "Run a local sync or switch the run status filter."
+  },
+  "milestones": {
+    "title": "Milestones"
+  },
+  "risks": {
+    "title": "Risks",
+    "reviewed": "Reviewed",
+    "needsReview": "Needs review",
+    "review": "Review",
+    "reopen": "Reopen"
+  },
+  "taskForm": {
+    "drawerAria": "New task panel",
+    "title": "New task draft",
+    "description": "This panel is local UI only. It demonstrates how the project page will expose task creation without connecting a backend.",
+    "fieldTitle": "Title",
+    "fieldOwner": "Owner",
+    "fieldNote": "Note",
+    "saveLocal": "Save draft locally",
+    "close": "Close",
+    "closeAria": "Close",
+    "validationRequired": "Title and owner are required."
+  },
+  "status": {
+    "done": "Done",
+    "active": "Active",
+    "next": "Next",
+    "inProgress": "In progress",
+    "pass": "Pass",
+    "ready": "Ready",
+    "deferred": "Deferred",
+    "local": "Local",
+    "reviewed": "Reviewed",
+    "open": "Open",
+    "tracked": "Tracked",
+    "edited": "Edited",
+    "later": "Later",
+    "idle": "Idle",
+    "localSyncComplete": "Local sync complete",
+    "notSyncedYet": "Not synced yet"
+  },
+  "actions": {
+    "start": "Start",
+    "markDone": "Mark done",
+    "reopen": "Reopen"
+  },
+  "filter": {
+    "all": "All"
+  },
+  "source": {
+    "edgeSnapshot": "Edge snapshot",
+    "offlineSnapshot": "Offline snapshot",
+    "loadingSnapshot": "Loading snapshot",
+    "mockFallback": "Demo / mock fallback",
+    "snapshotUnavailable": "Snapshot unavailable",
+    "localDryRun": "Local dry-run / {{source}}"
+  },
+  "demo": {
+    "cardDetail": "Demo/mock fallback data: {{detail}}"
+  },
+  "confirm": {
+    "saveValidation": "Add a task title and owner before saving.",
+    "taskSaved": "Saved \"{{title}}\" as a local task.",
+    "taskMoved": "\"{{title}}\" moved to {{status}}.",
+    "riskReviewed": "\"{{title}}\" marked reviewed.",
+    "riskReopened": "\"{{title}}\" reopened for review.",
+    "allRisksReviewed": "All reviewable risks are marked reviewed.",
+    "allRisksReopened": "Reviewable risks were reopened.",
+    "syncComplete": "Sync updated local run records at {{time}}.",
+    "fallbackNote": "No additional note was added.",
+    "openRisksRemaining_one": "{{count}} open risk still needs review.",
+    "openRisksRemaining_other": "{{count}} open risks still need review.",
+    "activeTasksRemaining_one": "{{count}} active task remains after local review.",
+    "activeTasksRemaining_other": "{{count}} active tasks remain after local review.",
+    "localSyncDetail": "Local sync captured {{tasks}} active tasks and {{risks}} open risks."
+  }
+}
diff --git a/app/web/src/i18n/locales/en/status.json b/app/web/src/i18n/locales/en/status.json
new file mode 100644
index 00000000..05d02a19
--- /dev/null
+++ b/app/web/src/i18n/locales/en/status.json
@@ -0,0 +1,40 @@
+{
+  "status.online": "Local Edge: Online - {{version}} ({{edgeId}})",
+  "status.offline": "Local Edge: Offline",
+  "status.wsConnected": "WS: Connected",
+  "status.wsDisconnected": "WS: Disconnected",
+  "agent.title": "Agents",
+  "agent.emptyOnline": "No agents available",
+  "agent.emptyOffline": "Waiting for Edge...",
+  "agent.capability.streaming": "Streaming",
+  "agent.capability.toolCalls": "Tool Calls",
+  "agent.capability.fileChanges": "File Changes",
+  "agent.capability.thinking": "Thinking",
+  "agent.capability.multiTurn": "Multi-Turn",
+  "thread.title": "Threads",
+  "thread.empty": "No threads yet",
+  "thread.create": "New Thread",
+  "thread.search": "Search threads...",
+  "chat.empty": "Select a thread and send a message to start",
+  "chat.thinking": "Thinking...",
+  "chat.toolCall": "Tool: {{name}}",
+  "chat.fileChange": "Changed: {{path}}",
+  "chat.sessionInit": "Session initialized - {{model}}",
+  "chat.result.success": "Completed - {{input}} in / {{output}} out tokens",
+  "chat.result.failed": "Failed: {{error}}",
+  "event.title": "Events",
+  "event.emptyOnline": "Waiting for events...",
+  "event.emptyOffline": "Start Edge Server to receive events",
+  "prompt.placeholder": "Type a message, @Agent to mention...",
+  "prompt.agentSelector": "Select Agent",
+  "run.status.queued": "Queued",
+  "run.status.running": "Running",
+  "run.status.finished": "Finished",
+  "run.status.failed": "Failed",
+  "run.status.idle": "Idle",
+  "run.title": "Run Detail",
+  "run.output": "Output",
+  "run.toolCalls": "Tool Calls",
+  "run.fileChanges": "Changed Files",
+  "error.streamError": "Event stream error: {{message}}"
+}
diff --git a/app/web/src/i18n/locales/en/workbench.json b/app/web/src/i18n/locales/en/workbench.json
new file mode 100644
index 00000000..ebb7ab0c
--- /dev/null
+++ b/app/web/src/i18n/locales/en/workbench.json
@@ -0,0 +1,162 @@
+{
+  "status": {
+    "connected": "Connected",
+    "disconnected": "Disconnected",
+    "idle": "Idle",
+    "error": "Error",
+    "online": "Online",
+    "offline": "Offline",
+    "active": "Active",
+    "queued": "Queued",
+    "running": "Running",
+    "finished": "Finished",
+    "failed": "Failed",
+    "pending": "Pending",
+    "approved": "Approved",
+    "rejected": "Rejected",
+    "loading": "Loading",
+    "ready": "Ready",
+    "waiting_approval": "Waiting Approval"
+  },
+  "leftRail": {
+    "ariaLabel": "Project and thread navigation",
+    "workbench": "Workbench",
+    "project": "Project",
+    "noProject": "No project loaded",
+    "connectEdge": "Connect Edge to load projects",
+    "threads": "Threads",
+    "noThreads": "No threads returned by Edge.",
+    "runners": "Runner Status",
+    "noRunners": "No runners are registered."
+  },
+  "runner": {
+    "adapterReady": "adapter ready"
+  },
+  "header": {
+    "thread": "Thread",
+    "noThread": "No thread selected",
+    "edgeUnavailable": "Edge is unavailable. Snapshot data is preserved if it was loaded.",
+    "subtitle": "Project, messages, run progress, approval, and artifacts stay in one review path.",
+    "runStatus": "Run {{status}}",
+    "startRun": "Start Run",
+    "starting": "Starting"
+  },
+  "state": {
+    "loading": "Loading the Edge snapshot. Actions stay locked until the reducer has real data.",
+    "offlineSnapshot": "Edge is offline. Showing the last reducer snapshot; write actions are locked.",
+    "offlineEmpty": "Edge is unavailable and no snapshot has been loaded. No mock success state is shown.",
+    "empty": "No Edge snapshot data is available yet. Start Edge to load projects, threads, runners, and runs."
+  },
+  "runSummary": {
+    "ariaLabel": "Run summary",
+    "noRun": "No run",
+    "artifacts": "Artifacts",
+    "approvalGate": "Approval gate",
+    "noApproval": "No approval",
+    "previewTarget": "Preview target",
+    "noPreview": "No preview"
+  },
+  "messages": {
+    "ariaLabel": "Thread messages and run timeline",
+    "title": "IM Message Flow",
+    "subtitle": "@Agent collaboration",
+    "empty": "No messages loaded for this thread."
+  },
+  "message": {
+    "author": {
+      "owner": "Owner",
+      "agent": "Agent"
+    },
+    "empty": "(empty message)"
+  },
+  "timeline": {
+    "ariaLabel": "AgentRun timeline",
+    "title": "AgentRun Timeline",
+    "queuedDone": "Thread accepted the owner request.",
+    "queuedWaiting": "Waiting for a run.",
+    "startedWaiting": "Runner has not started yet.",
+    "logsAvailable": "Logs are available in the workspace panel.",
+    "noLogs": "No logs yet.",
+    "artifactsAvailable": "Artifacts are reviewable.",
+    "noArtifacts": "No artifacts yet."
+  },
+  "approval": {
+    "ariaLabel": "Approval request",
+    "title": "Approval request",
+    "empty": "No approval request",
+    "description": "Approval decisions are sent to Edge. The UI updates only after the API call succeeds.",
+    "noPending": "Edge has not returned a pending approval for this run.",
+    "reject": "Reject",
+    "approve": "Approve",
+    "status": {
+      "approved": "Approved",
+      "rejected": "Rejected",
+      "pending": "Pending approval"
+    }
+  },
+  "composer": {
+    "attach": "Attach context",
+    "threadAriaLabel": "Message thread",
+    "placeholder": "Message this Thread with @ClaudeCode / @Codex / @OpenCode...",
+    "lockedPlaceholder": "Connect Edge and load a snapshot before sending",
+    "sending": "Sending",
+    "send": "Send"
+  },
+  "workspace": {
+    "ariaLabel": "Workbench workspace",
+    "title": "Workspace",
+    "subtitle": "Files, Diff, Preview, Logs, Approval",
+    "tabs": {
+      "ariaLabel": "Workspace panels",
+      "files": "Changed Files",
+      "diff": "Diff",
+      "preview": "Preview",
+      "logs": "Logs",
+      "approval": "Approval"
+    },
+    "summary": {
+      "ariaLabel": "Workspace summary",
+      "artifacts": "Artifacts",
+      "artifactCount": "{{count}} files",
+      "risk": "Risk",
+      "approvalNeeded": "Approval needed",
+      "noPendingGate": "No pending gate"
+    },
+    "files": {
+      "fileInfo": "{{size}} KB - created {{date}}"
+    },
+    "diff": {
+      "ariaLabel": "Artifact diff summary"
+    },
+    "preview": {
+      "unavailable": "preview unavailable",
+      "ready": "Preview ready",
+      "notReady": "No preview ready",
+      "hint": "Create a preview after a run produces reviewable output.",
+      "request": "Request Preview",
+      "open": "Open Preview"
+    },
+    "logs": {
+      "ariaLabel": "Run logs"
+    },
+    "approval": {
+      "artifacts": "Artifacts",
+      "artifactsAvailable": "Artifacts are available for review.",
+      "noArtifacts": "No artifacts are loaded.",
+      "applyGate": "Apply gate",
+      "ownerApprovalRequired": "Owner approval is required before apply/discard.",
+      "noPendingRequest": "There is no pending approval request.",
+      "decisionSource": "Decision state comes from Edge API or WebSocket events."
+    },
+    "empty": {
+      "artifacts": "No artifacts returned for this run.",
+      "diffArtifacts": "No artifacts have been created for this run yet.",
+      "logs": "No run logs returned by Edge."
+    }
+  },
+  "error": {
+    "edgeUnavailable": "Edge is unavailable",
+    "edgeApiTimeout": "Edge API did not respond. Check that Edge is running on 127.0.0.1:3210.",
+    "edgeEventStream": "Edge event stream error"
+  }
+}
diff --git a/app/web/src/i18n/locales/zh/agentSquare.json b/app/web/src/i18n/locales/zh/agentSquare.json
new file mode 100644
index 00000000..4afbeff1
--- /dev/null
+++ b/app/web/src/i18n/locales/zh/agentSquare.json
@@ -0,0 +1,86 @@
+{
+  "brand.title": "AGENTHUB",
+  "brand.subtitle": "智能体广场",
+  "sidebar.nav": "导航",
+  "sidebar.local": "本地",
+  "sidebar.catalog": "目录",
+  "sidebar.catalogDesc": "浏览 Hub CustomAgent，或带明确标签的 catalog fallback",
+  "sidebar.workspace": "工作区",
+  "sidebar.workspaceDesc": "{{count}} 个已本地暂存",
+  "sidebar.favorites": "收藏",
+  "sidebar.favoritesDesc": "{{count}} 个已保存智能体",
+  "sidebar.categories": "分类",
+  "sidebar.categoriesDesc": "预览筛选器",
+  "sidebar.slots": "工作区槽位",
+  "sidebar.slotsDesc": "本地暂存的智能体保留在此预览中；Hub 同步尚未连接。",
+  "categories.all": "全部智能体",
+  "header.title": "目录",
+  "header.subtitle": "在运行开始前找到合适的专家",
+  "header.description": "仅限本地目录预览。Hub /web/custom-agents 尚未连接。",
+  "search.placeholder": "搜索智能体或技能",
+  "search.ariaLabel": "搜索智能体",
+  "search.sortLabel": "排序智能体",
+  "sort.popular": "最多暂存",
+  "sort.rating": "最高评分",
+  "sort.recent": "最近更新",
+  "viewMode.all": "全部智能体",
+  "viewMode.favorites": "仅收藏",
+  "viewMode.installed": "仅本地暂存",
+  "stats.curated": "Catalog fallback 智能体",
+  "stats.ready": "本地工作区就绪",
+  "stats.favorites": "收藏",
+  "stats.policy": "预览检查",
+  "catalog.title": "目录",
+  "catalog.subtitle": "已暂存的专家",
+  "catalog.showing": "显示 {{count}} 个智能体",
+  "filters.clear": "清除",
+  "filters.clearFilters": "清除筛选",
+  "filters.clearedTitle": "筛选已清除",
+  "filters.cleared": "目录已恢复为完整本地预览集。",
+  "card.details": "详情",
+  "card.add": "本地暂存",
+  "card.added": "已本地暂存",
+  "card.available": "可用",
+  "card.rating": "{{rating}} 评分",
+  "card.installs": "{{count}} 暂存",
+  "card.saves": "{{count}} 保存",
+  "card.favorite": "收藏 {{name}}",
+  "card.unfavorite": "取消收藏 {{name}}",
+  "empty.noResults": "没有匹配此视图的智能体",
+  "empty.description": "尝试其他分类，移除搜索文本，或清除本地筛选。",
+  "detail.title": "智能体详情",
+  "detail.close": "关闭详情面板",
+  "detail.rating": "评分",
+  "detail.installs": "暂存数",
+  "detail.favorites": "收藏",
+  "detail.outputs": "预期输出",
+  "detail.outputsPreview": "预览",
+  "detail.outputsDesc": "暂存后在工作区交接中可见。",
+  "detail.workspaceState": "工作区状态",
+  "detail.favorited": "已加入收藏",
+  "detail.favoritedDesc": "收藏状态会立即在卡片上更新。",
+  "detail.notFavorited": "未收藏",
+  "detail.ready": "本地工作区就绪",
+  "detail.readyToAdd": "可以本地暂存",
+  "detail.readyDesc": "本地暂存状态会更改卡片操作和摘要计数。",
+  "detail.select": "选择一个智能体",
+  "detail.selectDesc": "从任意可见卡片打开详情，以比较输出、评分、暂存数和工作区状态。",
+  "confirm.added": "{{name}} 已保存",
+  "confirm.removed": "{{name}} 已从收藏移除",
+  "confirm.savesUpdated": "卡片上现在显示 {{count}} 个本地保存。",
+  "confirm.alreadyStaged": "此智能体已在当前工作区中暂存。",
+  "confirm.alreadyStagedTitle": "{{name}} 已本地暂存",
+  "confirm.staged": "已暂存 {{count}}/{{limit}} 个工作区槽位。",
+  "confirm.stagedTitle": "{{name}} 已本地暂存",
+  "workspace.fullTitle": "工作区已满",
+  "workspace.full": "工作区限制为 {{limit}} 个本地智能体。请先移除一个再添加。",
+  "stats.hub": "Hub CustomAgent",
+  "catalog.hubSubtitle": "Hub CustomAgent",
+  "source.hub": "Hub /web/custom-agents",
+  "source.hubDetail": "已从当前 Web 会话的 Hub CustomAgent 契约加载。",
+  "source.loading": "正在加载 Hub 目录",
+  "source.catalogMock": "Catalog fallback",
+  "source.catalogFallbackDetail": "Hub 未返回 CustomAgent，因此显示带明确标签的 catalog fallback。",
+  "source.loginRequiredDetail": "当前没有 Web Hub 会话。显示带明确标签的 catalog fallback。",
+  "source.errorDetail": "Hub CustomAgent 不可用：{{error}}。显示带明确标签的 catalog fallback。"
+}
diff --git a/app/web/src/i18n/locales/zh/common.json b/app/web/src/i18n/locales/zh/common.json
new file mode 100644
index 00000000..a88dffee
--- /dev/null
+++ b/app/web/src/i18n/locales/zh/common.json
@@ -0,0 +1,77 @@
+{
+  "brand.webPreview": "AgentHub Web 预览",
+  "nav.previewPages": "预览页面",
+  "nav.workbench": "工作台",
+  "nav.agentSquare": "智能体广场",
+  "nav.privateChats": "私聊",
+  "nav.groupWorkspace": "群组工作区",
+  "nav.projectPreview": "项目预览",
+  "shell.brand.surface": "Web 外壳",
+  "shell.toolbar.status": "外壳状态",
+  "shell.status.edgeUnavailable": "工作台 Edge 不可用",
+  "shell.sidebar.label": "工作区导航",
+  "shell.sidebar.pages": "页面",
+  "shell.sidebar.boundary": "数据来源边界",
+  "shell.sidebar.boundary.detail": "这个 Web 外壳会明确标注不可用、锁定、目录兜底和演示状态，不假装数据已同步。",
+  "shell.statusPanel.label": "状态和来源面板",
+  "shell.statusPanel.current": "当前页面",
+  "shell.statusPanel.source": "来源状态",
+  "shell.statusPanel.routes": "路由",
+  "shell.workspace.localEdge": "本地 Edge 工作区",
+  "shell.workspace.catalog": "智能体目录",
+  "shell.workspace.hubSession": "Hub 会话",
+  "shell.workspace.group": "群组工作区",
+  "shell.workspace.project": "项目工作区",
+  "shell.page.workbench.description": "工作台 Edge 不可用/错误：当前 Web 外壳无法确认本地 Edge 工作台快照。",
+  "shell.page.agentSquare.description": "智能体广场目录兜底：当 Hub 自定义智能体不可用时，页面只展示带明确标注的目录兜底内容。",
+  "shell.page.privateChats.description": "私聊需要 Hub 会话：Web 客户端拿到 Hub 会话前，私聊保持锁定。",
+  "shell.page.groupWorkspace.description": "群组演示兜底：Hub 协作数据不可用时，群组工作区内容会明确标注为演示数据。",
+  "shell.page.projectPreview.description": "项目演示兜底：Edge 或 Hub 项目数据不可用时，项目工作区内容会明确标注为演示数据。",
+  "surface.status.realSnapshot.label": "真实快照",
+  "surface.status.realSnapshot.description": "来自已验证的实时响应或保留的服务快照。",
+  "surface.status.localSource.label": "本地来源",
+  "surface.status.localSource.description": "来自浏览器、工作区或本地配置状态。",
+  "surface.status.loginLocked.label": "需要 Hub 会话",
+  "surface.status.loginLocked.description": "私聊需要 Hub 会话：外壳不会声称会话已激活，也不会显示假的私聊数据。",
+  "surface.status.interfaceGap.label": "接口缺口",
+  "surface.status.interfaceGap.description": "入口可见，但客户端或接口接线尚未完成。",
+  "surface.status.error.label": "Edge 不可用/错误",
+  "surface.status.error.description": "工作台 Edge 不可用/错误：这个 Web 外壳没有连接到已验证的本地 Edge 工作台来源。",
+  "surface.status.demoFallback.label": "演示兜底",
+  "surface.status.demoFallback.description": "群组/项目演示兜底：真实来源不可用时，协作和项目预览数据会标注为演示内容。",
+  "surface.status.catalogFallback.label": "目录兜底",
+  "surface.status.catalogFallback.description": "智能体广场目录兜底：Hub 自定义智能体数据不可用，因此目录状态会明确标注为兜底。",
+  "surface.web.workbench.description": "工作台 Edge 不可用/错误：当前 Web 外壳无法确认本地 Edge 工作台快照。",
+  "surface.web.agentSquare.description": "智能体广场目录兜底：当 Hub 自定义智能体不可用时，页面只展示带明确标注的目录兜底内容。",
+  "surface.web.privateChats.description": "私聊需要 Hub 会话：Web 客户端拿到 Hub 会话前，私聊保持锁定。",
+  "surface.web.groupWorkspace.description": "群组演示兜底：Hub 协作数据不可用时，群组工作区内容会明确标注为演示数据。",
+  "surface.web.projectPreview.description": "项目演示兜底：Edge 或 Hub 项目数据不可用时，项目工作区内容会明确标注为演示数据。",
+  "shell.source.error": "Edge 不可用/错误",
+  "shell.source.error.detail": "工作台 Edge 不可用/错误：这个 Web 外壳没有连接到已验证的本地 Edge 工作台来源。",
+  "shell.source.catalog": "目录兜底",
+  "shell.source.catalog.detail": "智能体广场目录兜底：Hub 自定义智能体数据不可用，因此目录状态会明确标注为兜底。",
+  "shell.source.locked": "需要 Hub 会话",
+  "shell.source.locked.detail": "私聊需要 Hub 会话：外壳不会声称会话已激活，也不会显示假的私聊数据。",
+  "shell.source.demo": "演示兜底",
+  "shell.source.demo.detail": "群组/项目演示兜底：真实来源不可用时，协作和项目预览数据会标注为演示内容。",
+  "settings.open": "设置",
+  "settings.title": "设置",
+  "settings.language": "语言",
+  "settings.theme": "主题",
+  "theme.light": "浅色模式",
+  "theme.dark": "深色模式",
+  "theme.switchToLight": "切换到浅色主题",
+  "theme.switchToDark": "切换到深色主题",
+  "loading": "加载中...",
+  "action.startRun": "发送",
+  "action.clearEvents": "清空事件",
+  "action.cancelRun": "取消",
+  "action.create": "新建",
+  "action.save": "保存",
+  "action.close": "关闭",
+  "action.dismiss": "忽略",
+  "action.apply": "应用",
+  "action.discard": "丢弃",
+  "action.approve": "批准",
+  "action.reject": "拒绝"
+}
diff --git a/app/web/src/i18n/locales/zh/groupWorkspace.json b/app/web/src/i18n/locales/zh/groupWorkspace.json
new file mode 100644
index 00000000..75818645
--- /dev/null
+++ b/app/web/src/i18n/locales/zh/groupWorkspace.json
@@ -0,0 +1,138 @@
+{
+  "sidebar.brandSubtitle": "群组工作区",
+  "sidebar.spaces": "空间",
+  "sidebar.space.localDryRunSync": "本地试运行同步",
+  "sidebar.space.sharedFiles": "共享文件",
+  "sidebar.space.documents": "{{count}} 份文档",
+  "sidebar.space.demoApprovals": "演示 fallback 审批",
+  "sidebar.members": "成员",
+  "sidebar.members.onlineBusy": "{{online}} 在线 / {{busy}} 忙碌",
+  "sidebar.workspaceHealth": "工作区健康度",
+  "sidebar.lastLocalSync": "上次本地同步：{{time}}。",
+  "member.filter.all": "全部",
+  "member.filter.online": "在线",
+  "member.filter.busy": "忙碌",
+  "member.filter.offline": "离线",
+  "member.filter.aria": "按状态筛选成员",
+  "member.status.online": "在线",
+  "member.status.busy": "忙碌",
+  "member.status.offline": "离线",
+  "member.empty": "没有成员匹配此状态筛选。请选择其他筛选条件或切换成员状态。",
+  "header.title": "共享操作驾驶舱",
+  "header.subtitle": "成员、任务、文件、审批和本地试运行状态在同一工作界面中一览无余。",
+  "header.search": "搜索",
+  "header.searchPlaceholder": "任务、文件、成员",
+  "header.searchAria": "搜索工作区",
+  "header.export": "导出",
+  "header.assignReview": "分配审查",
+  "stat.membersOnline": "在线成员",
+  "stat.demoMembersOnline": "演示在线成员",
+  "stat.sharedTasks": "共享任务",
+  "stat.demoSharedTasks": "演示共享任务",
+  "stat.workspaceFiles": "工作区文件",
+  "stat.demoWorkspaceFiles": "演示工作区文件",
+  "stat.dryRunReadiness": "试运行就绪度",
+  "stat.demoDryRunReadiness": "演示试运行就绪度",
+  "task.board": "共享任务看板",
+  "task.coordinationPlan": "当前协调计划",
+  "task.board.backlog": "待办",
+  "task.board.inProgress": "进行中",
+  "task.board.review": "审查",
+  "task.summary.approved": "已批准试运行同步。快照操作已解锁。",
+  "task.summary.changesRequested": "审查者请求在批准前修改一处。",
+  "task.summary.synced": "试运行快照已于 {{time}} 同步。",
+  "task.tag.active": "进行中",
+  "task.tag.done": "已完成",
+  "task.tag.queue": "排队中",
+  "task.tag.demoActive": "演示进行中",
+  "task.tag.demoDone": "演示已完成",
+  "task.tag.demoQueue": "演示排队中",
+  "task.owner": "负责人：{{name}}",
+  "task.reassign": "重新分配",
+  "task.progressAria": "{{title}} 进度",
+  "activity.title": "活动流",
+  "activity.subtitle": "工作区动态",
+  "composer.mentionAria": "提及成员",
+  "composer.attachAria": "附加文件",
+  "composer.taskAria": "创建任务",
+  "composer.messageAria": "工作区消息",
+  "composer.placeholder": "向此工作区发送协作消息...",
+  "composer.charactersReady": "{{count}} 个字符已就绪",
+  "composer.draftEmpty": "草稿为空。",
+  "composer.send": "发送消息",
+  "approval.title": "审批",
+  "approval.parserReady": "Parser v2 就绪",
+  "approval.owner": "负责人：{{name}}",
+  "approval.detail.approved": "Parser diff 已批准。本地试运行控制现已可见并启用。",
+  "approval.detail.changesRequested": "审查卡片和看板上显示请求修改状态。",
+  "approval.detail.awaitingApproval": "Parser diff 已暂存，安全检查已通过，本地试运行同步在批准前保持锁定。",
+  "approval.requestEdits": "请求修改",
+  "approval.approve": "批准",
+  "approval.status.approved": "已批准",
+  "approval.status.changesRequested": "请求修改",
+  "approval.status.awaitingApproval": "等待批准",
+  "sync.title": "本地同步状态",
+  "sync.subtitle": "试运行快照",
+  "sync.readiness": "试运行就绪度",
+  "sync.status.synced": "本地已同步",
+  "sync.status.unlocked": "已解锁",
+  "sync.status.locked": "已锁定",
+  "sync.readinessAria": "试运行就绪度",
+  "sync.runAgain": "再次运行本地同步",
+  "sync.run": "运行本地同步",
+  "sync.approveToRun": "批准后运行",
+  "sync.checklist.filesIndexed": "文件已索引",
+  "sync.checklist.filesDetail": "{{count}} 个工作区文件可用。",
+  "sync.checklist.assignments": "分配可见",
+  "sync.checklist.assignmentsDetail": "审查负责人为 {{owner}}。",
+  "sync.checklist.lastSync": "上次本地同步",
+  "sync.checklist.lastSyncDetail": "{{time}}。",
+  "sync.checklist.notSynced": "未同步",
+  "files.title": "共享文件",
+  "files.subtitle": "工作区文档",
+  "files.addAria": "添加文件",
+  "files.empty": "此工作区中没有可见文件。",
+  "confirm.dismiss": "关闭确认",
+  "confirm.ready": "本地工作区就绪",
+  "confirm.readyDetail": "本地控件已连接，可进行审查、试运行同步、分配、成员状态和协作消息。",
+  "confirm.statusBarCleared": "状态栏已清除",
+  "confirm.statusBarClearedDetail": "下一个本地操作将显示在此处。",
+  "confirm.approvalSaved": "审批已保存",
+  "confirm.approvalSavedDetail": "Parser v2 已批准。本地试运行快照按钮现已启用。",
+  "confirm.changesRequested": "已请求修改",
+  "confirm.changesRequestedDetail": "审批状态已更改，审查期间本地试运行同步已锁定。",
+  "confirm.reviewReassigned": "审查已重新分配",
+  "confirm.reviewReassignedDetail": "Parser v2 现已分配给 {{owner}}。",
+  "confirm.syncLocked": "本地同步已锁定",
+  "confirm.syncLockedDetail": "运行本地试运行快照前请先批准 Parser v2。",
+  "confirm.snapshotSynced": "试运行快照已同步",
+  "confirm.snapshotSyncedDetail": "本地文件、进度和上次试运行时间现已反映版本 {{revision}}。",
+  "confirm.memberStatusUpdated": "成员状态已更新",
+  "confirm.memberStatusUpdatedDetail": "{{name}} 已切换为 {{status}}。",
+  "confirm.memberFilterChanged": "成员筛选已更改",
+  "confirm.memberFilterAll": "显示所有工作区成员。",
+  "confirm.memberFilterSpecific": "仅显示标记为 {{filter}} 的成员。",
+  "confirm.noteEmpty": "消息为空",
+  "confirm.noteEmptyDetail": "先写一条协作消息再发送到活动流。",
+  "confirm.notePosted": "消息已发送",
+  "confirm.notePostedDetail": "消息已添加到活动流，编辑器已清空。",
+  "confirm.composerUpdated": "编辑器内容已本地更新。",
+  "confirm.mentionInserted": "提及已插入",
+  "confirm.attachmentInserted": "附件标记已插入",
+  "confirm.taskMarkerInserted": "任务标记已插入",
+  "confirm.filePlaceholderAdded": "文件占位符已添加",
+  "confirm.filePlaceholderDetail": "文件计数器已针对此交互式预览进行本地更改。",
+  "confirm.exportPrepared": "导出已准备",
+  "confirm.exportPreparedDetail": "未下载任何文件。该操作已记录在活动流中。",
+  "source": {
+    "edgeSnapshot": "Edge 快照",
+    "offlineSnapshot": "离线快照",
+    "loadingSnapshot": "正在加载快照",
+    "mockFallback": "演示 / mock fallback",
+    "snapshotUnavailable": "快照不可用",
+    "localDryRun": "本地 dry-run / {{source}}"
+  },
+  "demo.detail": "演示/mock fallback 数据：{{detail}}",
+  "demo.summary": "演示/mock fallback 任务：{{summary}}",
+  "demo.role": "演示/mock fallback 成员：{{role}}"
+}
diff --git a/app/web/src/i18n/locales/zh/privateChats.json b/app/web/src/i18n/locales/zh/privateChats.json
new file mode 100644
index 00000000..094b7a67
--- /dev/null
+++ b/app/web/src/i18n/locales/zh/privateChats.json
@@ -0,0 +1,118 @@
+{
+  "brand": {
+    "subtitle": "私聊"
+  },
+  "search": {
+    "ariaLabel": "搜索私聊",
+    "placeholder": "搜索人员、交接、代码片段...",
+    "filtering": "{{chatCount}} 个聊天和 {{messageCount}} 条消息匹配 \"{{query}}\"",
+    "clear": "清除搜索"
+  },
+  "sidebar": {
+    "title": "私聊",
+    "empty": "没有可用的 Hub 私聊。",
+    "emptyTitle": "暂无私聊"
+  },
+  "chat": {
+    "localPreview": "本地预览线程",
+    "messagesArea": "消息线程",
+    "readOnly": "已从 Hub 只读加载私聊会话",
+    "error": "Hub 私聊会话不可用",
+    "loginRequired": "需要 Hub 会话"
+  },
+  "hub": {
+    "agent": "智能体",
+    "user": "用户",
+    "recalled": "[已撤回]",
+    "privateSession": "Hub 私聊会话",
+    "privateSessionFallback": "私聊会话",
+    "noRecentMessages": "暂无最近消息。",
+    "noConversationsSummary": "暂无可用会话。"
+  },
+  "status": {
+    "localMock": "本地模拟",
+    "readOnly": "只读",
+    "loading": "加载中",
+    "error": "Hub 错误",
+    "locked": "需要登录"
+  },
+  "locked": {
+    "title": "需要 Hub 会话",
+    "description": "在 Web 接入 Hub 会话和消息契约前，私聊不会显示 mock 会话、播放 mock 流或伪造发送成功。"
+  },
+  "loading": {
+    "title": "正在加载 Hub 私聊",
+    "description": "正在从 Hub 读取私聊会话和最近消息。"
+  },
+  "error": {
+    "title": "Hub 不可用",
+    "description": "Private Chats 无法加载 Hub 会话：{{error}}。mock 会话会继续隐藏。"
+  },
+  "header": {
+    "star": "仅显示关键消息",
+    "attachments": "打开附件",
+    "more": "更多操作"
+  },
+  "messages": {
+    "empty": {
+      "keyMessages": "当前视图没有匹配的关键消息。",
+      "noResults": "所选会话中没有匹配此搜索的消息。",
+      "threadEmpty": "此 Hub 私聊暂无最近消息。"
+    }
+  },
+  "key": {
+    "markKey": "标记为关键",
+    "keyed": "已标记"
+  },
+  "code": {
+    "snippet": "代码片段",
+    "local": "本地"
+  },
+  "composer": {
+    "placeholder": "编写本地预览笔记、粘贴代码片段或附加交接上下文...",
+    "attach": "切换附件面板",
+    "insertCode": "插入代码",
+    "quote": "引用所选消息",
+    "messageLabel": "发送消息给 {{name}}",
+    "voice": "本地预览中语音备注不可用",
+    "send": "追加",
+    "attachmentPanel": "附件面板",
+    "lockedPlaceholder": "登录 Hub 后才能使用私聊",
+    "readOnlyPlaceholder": "本轮 Web 私聊保持只读",
+    "lockedSend": "已锁定",
+    "readOnlySend": "只读"
+  },
+  "context": {
+    "title": "预览上下文",
+    "review": "{{count}} 条 Hub 消息 - 已检查 {{progress}}%",
+    "open": "打开上下文",
+    "reviewTitle": "检查进度",
+    "reviewDetail": "当前 Hub 私聊快照中有 {{keyCount}} 条关键消息和 {{unread}} 条未读消息。",
+    "attachments": "附件",
+    "noAttachments": "此会话暂无关联附件。",
+    "codeSnippets": "代码片段",
+    "noSnippets": "此私聊没有关联的代码片段。",
+    "tags": "可见状态",
+    "selectedAttachments": "已选附件"
+  },
+  "attachment": {
+    "remove": "移除 {{name}}"
+  },
+  "notice": {
+    "markedRead": "{{name}} 已标记为已读",
+    "selected": "已选择 {{name}}",
+    "removed": "已移除 {{name}}",
+    "attachmentRemoved": "{{name}} 已移除",
+    "markKey": "已标记为关键：{{author}}",
+    "removeKey": "已取消关键标记：{{author}}",
+    "codeInserted": "代码块已插入到本地草稿",
+    "quoted": "已引用 {{author}} 的最新上下文",
+    "draftAdded": "本地草稿已追加到此预览线程",
+    "emptyMessage": "请先编写消息或选择附件再发送",
+    "moreActions": "更多操作仅限本地预览",
+    "contextDetails": "上下文详情仅保留在本地预览中",
+    "dismiss": "忽略",
+    "loginRequired": "请先登录 Hub 再使用私聊。",
+    "readOnly": "本轮 Web 私聊保持只读。"
+  }
+}
diff --git a/app/web/src/i18n/locales/zh/project.json b/app/web/src/i18n/locales/zh/project.json
new file mode 100644
index 00000000..7cfb8552
--- /dev/null
+++ b/app/web/src/i18n/locales/zh/project.json
@@ -0,0 +1,147 @@
+{
+  "sidebar": {
+    "navigationAria": "项目导航",
+    "brandName": "AGENTHUB",
+    "workspaceLabel": "项目工作区",
+    "navOverview": "概览",
+    "navTasks": "任务",
+    "navFiles": "文件",
+    "navNewTask": "新建任务"
+  },
+  "header": {
+    "searchLabel": "搜索",
+    "searchAria": "搜索项目",
+    "searchPlaceholder": "项目、任务、文件...",
+    "clearSearch": "清除搜索",
+    "notifications": "通知",
+    "settings": "设置",
+    "currentUser": "当前用户"
+  },
+  "hero": {
+    "eyebrow": "项目详情",
+    "description": "协调前端预览页面、里程碑、任务就绪状态、设计文件和试运行记录，并清晰展示在线、离线快照和模拟回退状态。",
+    "simulateSync": "模拟同步",
+    "syncAgain": "再次同步",
+    "markRisksReviewed": "标记风险已审查",
+    "reopenRisks": "重新打开风险",
+    "newTask": "新建任务",
+    "deliveryProgress": "交付进度",
+    "deliveryProgressAria": "交付进度 {{percent}}%",
+    "openRisks": "未解决风险",
+    "riskReviewAria": "风险审查进度",
+    "catalogStatus": "目录状态"
+  },
+  "metrics": {
+    "aria": "项目指标",
+    "activeTasks": "进行中任务",
+    "demoActiveTasks": "演示进行中任务",
+    "milestones": "里程碑",
+    "demoMilestones": "演示里程碑",
+    "sharedFiles": "共享文件",
+    "demoSharedFiles": "演示共享文件",
+    "dryRuns": "试运行",
+    "demoDryRuns": "演示试运行"
+  },
+  "board": {
+    "tabsAria": "项目看板分区",
+    "overviewTitle": "项目概览 ({{count}})",
+    "tasksTitle": "任务状态 ({{count}})",
+    "filesTitle": "文件与运行记录 ({{files}}/{{runs}})",
+    "doneTotal": "已完成 {{done}} / 共 {{total}}"
+  },
+  "overview": {
+    "emptyTitle": "没有匹配的项目。",
+    "emptyHint": "清除搜索框以恢复概览列表。"
+  },
+  "tasks": {
+    "newTask": "新建任务",
+    "emptyTitle": "没有可见的任务。",
+    "emptyHint": "清除搜索或添加本地任务以重新填充看板。"
+  },
+  "files": {
+    "label": "文件",
+    "filterAria": "文件类型筛选",
+    "emptyTitle": "没有匹配此筛选的文件。",
+    "emptyHint": "选择\"全部\"或清除搜索以显示项目文件。"
+  },
+  "runs": {
+    "label": "运行",
+    "filterAria": "运行状态筛选",
+    "recordsAria": "运行记录",
+    "emptyTitle": "没有匹配此筛选的运行记录。",
+    "emptyHint": "执行本地同步或切换运行状态筛选。"
+  },
+  "milestones": {
+    "title": "里程碑"
+  },
+  "risks": {
+    "title": "风险",
+    "reviewed": "已审查",
+    "needsReview": "需要审查",
+    "review": "审查",
+    "reopen": "重新打开"
+  },
+  "taskForm": {
+    "drawerAria": "新建任务面板",
+    "title": "新建任务草稿",
+    "description": "此面板仅为本地 UI 演示。它展示了项目页面如何在无需连接后端的情况下提供任务创建功能。",
+    "fieldTitle": "标题",
+    "fieldOwner": "负责人",
+    "fieldNote": "备注",
+    "saveLocal": "本地保存草稿",
+    "close": "关闭",
+    "closeAria": "关闭",
+    "validationRequired": "标题和负责人为必填项。"
+  },
+  "status": {
+    "done": "已完成",
+    "active": "进行中",
+    "next": "待处理",
+    "inProgress": "进行中",
+    "pass": "通过",
+    "ready": "就绪",
+    "deferred": "已延期",
+    "local": "本地",
+    "reviewed": "已审查",
+    "open": "未解决",
+    "tracked": "跟踪中",
+    "edited": "已编辑",
+    "later": "待定",
+    "idle": "空闲",
+    "localSyncComplete": "本地同步完成",
+    "notSyncedYet": "尚未同步"
+  },
+  "actions": {
+    "start": "开始",
+    "markDone": "标记完成",
+    "reopen": "重新打开"
+  },
+  "filter": {
+    "all": "全部"
+  },
+  "confirm": {
+    "saveValidation": "保存前请填写任务标题和负责人。",
+    "taskSaved": "已将\"{{title}}\"保存为本地任务。",
+    "taskMoved": "\"{{title}}\" 已移至 {{status}}。",
+    "riskReviewed": "\"{{title}}\" 已标记为已审查。",
+    "riskReopened": "\"{{title}}\" 已重新打开以供审查。",
+    "allRisksReviewed": "所有可审查的风险均已标记为已审查。",
+    "allRisksReopened": "可审查的风险已重新打开。",
+    "syncComplete": "同步已于 {{time}} 更新本地运行记录。",
+    "fallbackNote": "未添加附加备注。",
+    "openRisksRemaining": "{{count}} 项未解决风险仍需审查。",
+    "activeTasksRemaining": "{{count}} 项进行中任务经本地审查后仍保留。",
+    "localSyncDetail": "本地同步捕获了 {{tasks}} 项进行中任务和 {{risks}} 项未解决风险。"
+  },
+  "source": {
+    "edgeSnapshot": "Edge 快照",
+    "offlineSnapshot": "离线快照",
+    "loadingSnapshot": "正在加载快照",
+    "mockFallback": "演示 / mock fallback",
+    "snapshotUnavailable": "快照不可用",
+    "localDryRun": "本地 dry-run / {{source}}"
+  },
+  "demo": {
+    "cardDetail": "演示/mock fallback 数据：{{detail}}"
+  }
+}
diff --git a/app/web/src/i18n/locales/zh/status.json b/app/web/src/i18n/locales/zh/status.json
new file mode 100644
index 00000000..19524056
--- /dev/null
+++ b/app/web/src/i18n/locales/zh/status.json
@@ -0,0 +1,40 @@
+{
+  "status.online": "本地 Edge：在线 - {{version}}（{{edgeId}}）",
+  "status.offline": "本地 Edge：离线",
+  "status.wsConnected": "WS：已连接",
+  "status.wsDisconnected": "WS：已断开",
+  "agent.title": "智能体",
+  "agent.emptyOnline": "当前没有可用的智能体",
+  "agent.emptyOffline": "正在等待 Edge...",
+  "agent.capability.streaming": "流式输出",
+  "agent.capability.toolCalls": "工具调用",
+  "agent.capability.fileChanges": "文件变更",
+  "agent.capability.thinking": "思考中",
+  "agent.capability.multiTurn": "多轮对话",
+  "thread.title": "线程",
+  "thread.empty": "还没有线程",
+  "thread.create": "新建线程",
+  "thread.search": "搜索线程...",
+  "chat.empty": "选择一个线程并发送消息开始",
+  "chat.thinking": "思考中...",
+  "chat.toolCall": "工具：{{name}}",
+  "chat.fileChange": "已变更：{{path}}",
+  "chat.sessionInit": "会话已初始化 - {{model}}",
+  "chat.result.success": "已完成 - 输入 {{input}} / 输出 {{output}} Tokens",
+  "chat.result.failed": "失败：{{error}}",
+  "event.title": "事件",
+  "event.emptyOnline": "正在等待事件...",
+  "event.emptyOffline": "启动 Edge Server 后接收事件",
+  "prompt.placeholder": "输入消息，@Agent 可提及智能体...",
+  "prompt.agentSelector": "选择智能体",
+  "run.status.queued": "已排队",
+  "run.status.running": "运行中",
+  "run.status.finished": "已完成",
+  "run.status.failed": "失败",
+  "run.status.idle": "空闲",
+  "run.title": "运行详情",
+  "run.output": "输出",
+  "run.toolCalls": "工具调用",
+  "run.fileChanges": "变更文件",
+  "error.streamError": "事件流错误：{{message}}"
+}
diff --git a/app/web/src/i18n/locales/zh/workbench.json b/app/web/src/i18n/locales/zh/workbench.json
new file mode 100644
index 00000000..f660da8e
--- /dev/null
+++ b/app/web/src/i18n/locales/zh/workbench.json
@@ -0,0 +1,162 @@
+{
+  "status": {
+    "connected": "已连接",
+    "disconnected": "已断开",
+    "idle": "空闲",
+    "error": "错误",
+    "online": "在线",
+    "offline": "离线",
+    "active": "活跃",
+    "queued": "已排队",
+    "running": "运行中",
+    "finished": "已完成",
+    "failed": "失败",
+    "pending": "待定",
+    "approved": "已批准",
+    "rejected": "已拒绝",
+    "loading": "加载中",
+    "ready": "就绪",
+    "waiting_approval": "等待审批"
+  },
+  "leftRail": {
+    "ariaLabel": "项目与线程导航",
+    "workbench": "工作台",
+    "project": "项目",
+    "noProject": "未加载项目",
+    "connectEdge": "连接 Edge 以加载项目",
+    "threads": "线程",
+    "noThreads": "Edge 未返回任何线程。",
+    "runners": "Runner 状态",
+    "noRunners": "没有已注册的 Runner。"
+  },
+  "runner": {
+    "adapterReady": "适配器就绪"
+  },
+  "header": {
+    "thread": "线程",
+    "noThread": "未选择线程",
+    "edgeUnavailable": "Edge 不可用。快照数据（如已加载）已保留。",
+    "subtitle": "项目、消息、运行进度、审批和产物在此统一审查路径中。",
+    "runStatus": "Run {{status}}",
+    "startRun": "启动 Run",
+    "starting": "启动中"
+  },
+  "runSummary": {
+    "ariaLabel": "Run 摘要",
+    "noRun": "无 Run",
+    "artifacts": "产物",
+    "approvalGate": "审批关",
+    "noApproval": "无审批",
+    "previewTarget": "预览目标",
+    "noPreview": "无预览"
+  },
+  "messages": {
+    "ariaLabel": "线程消息与 Run 时间线",
+    "title": "IM 消息流",
+    "subtitle": "@Agent 协作",
+    "empty": "此线程未加载消息。"
+  },
+  "message": {
+    "author": {
+      "owner": "Owner",
+      "agent": "Agent"
+    },
+    "empty": "（空消息）"
+  },
+  "timeline": {
+    "ariaLabel": "AgentRun 时间线",
+    "title": "AgentRun 时间线",
+    "queuedDone": "线程已接受 Owner 请求。",
+    "queuedWaiting": "等待 Run。",
+    "startedWaiting": "Runner 尚未启动。",
+    "logsAvailable": "日志可在工作区面板中查看。",
+    "noLogs": "暂无日志。",
+    "artifactsAvailable": "产物可供审查。",
+    "noArtifacts": "暂无产物。"
+  },
+  "approval": {
+    "ariaLabel": "审批请求",
+    "title": "审批请求",
+    "empty": "无审批请求",
+    "description": "审批决定将发送至 Edge。界面仅在 API 调用成功后更新。",
+    "noPending": "Edge 尚未返回此 Run 的待定审批。",
+    "reject": "拒绝",
+    "approve": "批准",
+    "status": {
+      "approved": "已批准",
+      "rejected": "已拒绝",
+      "pending": "待审批"
+    }
+  },
+  "composer": {
+    "attach": "附加上下文",
+    "threadAriaLabel": "消息线程",
+    "placeholder": "向此线程发送消息 @ClaudeCode / @Codex / @OpenCode...",
+    "sending": "发送中",
+    "send": "发送",
+    "lockedPlaceholder": "连接 Edge 并加载快照后才能发送"
+  },
+  "workspace": {
+    "ariaLabel": "工作台工作区",
+    "title": "工作区",
+    "subtitle": "文件、Diff、预览、日志、审批",
+    "tabs": {
+      "ariaLabel": "工作区面板",
+      "files": "已更改文件",
+      "diff": "Diff",
+      "preview": "预览",
+      "logs": "日志",
+      "approval": "审批"
+    },
+    "summary": {
+      "ariaLabel": "工作区摘要",
+      "artifacts": "产物",
+      "artifactCount": "{{count}} 个文件",
+      "risk": "风险",
+      "approvalNeeded": "需要审批",
+      "noPendingGate": "无待定关卡"
+    },
+    "files": {
+      "fileInfo": "{{size}} KB - 创建于 {{date}}"
+    },
+    "diff": {
+      "ariaLabel": "产物 Diff 摘要"
+    },
+    "preview": {
+      "unavailable": "预览不可用",
+      "ready": "预览就绪",
+      "notReady": "无可用预览",
+      "hint": "在 Run 产生可审查输出后创建预览。",
+      "request": "请求预览",
+      "open": "打开预览"
+    },
+    "logs": {
+      "ariaLabel": "Run 日志"
+    },
+    "approval": {
+      "artifacts": "产物",
+      "artifactsAvailable": "产物可供审查。",
+      "noArtifacts": "未加载产物。",
+      "applyGate": "应用关卡",
+      "ownerApprovalRequired": "需要 Owner 审批才能应用/丢弃。",
+      "noPendingRequest": "没有待处理的审批请求。",
+      "decisionSource": "决策状态来自 Edge API 或 WebSocket 事件。"
+    },
+    "empty": {
+      "artifacts": "此 Run 未返回产物。",
+      "diffArtifacts": "此 Run 尚未创建产物。",
+      "logs": "Edge 未返回 Run 日志。"
+    }
+  },
+  "error": {
+    "edgeUnavailable": "Edge 不可用",
+    "edgeApiTimeout": "Edge API 无响应，请检查 Edge 是否运行在 127.0.0.1:3210。",
+    "edgeEventStream": "Edge 事件流错误"
+  },
+  "state": {
+    "loading": "正在加载 Edge 快照。Reducer 拿到真实数据前，写入操作会保持锁定。",
+    "offlineSnapshot": "Edge 已离线。当前显示最后一次 reducer 快照，写入操作已锁定。",
+    "offlineEmpty": "Edge 不可用，且尚未加载任何快照。页面不会展示伪造的成功状态。",
+    "empty": "尚无 Edge 快照数据。请启动 Edge 以加载项目、线程、Runner 和 Run。"
+  }
+}
diff --git a/app/web/src/pages/AgentSquare.tsx b/app/web/src/pages/AgentSquare.tsx
index 0a4c09bf..32758350 100644
--- a/app/web/src/pages/AgentSquare.tsx
+++ b/app/web/src/pages/AgentSquare.tsx
@@ -1 +1 @@
-export { default } from './agent-square/AgentSquarePage';
+export { default } from '@/pages/agent-square/AgentSquarePage';
diff --git a/app/web/src/pages/GroupWorkspace.tsx b/app/web/src/pages/GroupWorkspace.tsx
index 9a2e46d8..e5512aed 100644
--- a/app/web/src/pages/GroupWorkspace.tsx
+++ b/app/web/src/pages/GroupWorkspace.tsx
@@ -1 +1 @@
-export { default } from './group-workspace/GroupWorkspacePage';
+export { default } from '@/pages/group-workspace/GroupWorkspacePage';
diff --git a/app/web/src/pages/PrivateChats.tsx b/app/web/src/pages/PrivateChats.tsx
index a0eb6319..2a6d9582 100644
--- a/app/web/src/pages/PrivateChats.tsx
+++ b/app/web/src/pages/PrivateChats.tsx
@@ -1 +1 @@
-export { default } from './private-chats/PrivateChatsPage';
+export { default } from '@/pages/private-chats/PrivateChatsPage';
diff --git a/app/web/src/pages/Project.tsx b/app/web/src/pages/Project.tsx
index 121afa45..e61a7322 100644
--- a/app/web/src/pages/Project.tsx
+++ b/app/web/src/pages/Project.tsx
@@ -1 +1 @@
-export { default } from './projects/ProjectPage';
+export { default } from '@/pages/projects/ProjectPage';
diff --git a/app/web/src/pages/Workbench.tsx b/app/web/src/pages/Workbench.tsx
index 8d4eac60..f1c5768c 100644
--- a/app/web/src/pages/Workbench.tsx
+++ b/app/web/src/pages/Workbench.tsx
@@ -1 +1 @@
-export { default } from './workbench/WorkbenchPage';
+export { default } from '@/pages/workbench/WorkbenchPage';
diff --git a/app/web/src/pages/agent-square/AgentSquarePage.module.css b/app/web/src/pages/agent-square/AgentSquarePage.module.css
index adc40832..210e46c6 100644
--- a/app/web/src/pages/agent-square/AgentSquarePage.module.css
+++ b/app/web/src/pages/agent-square/AgentSquarePage.module.css
@@ -1,225 +1,361 @@
-/* AgentSquarePage — Agent marketplace styles */
-.pageRoot { position: relative; min-height: 100vh; }
+/* ═════════════════════════════════════════════════════════════════════
+   AgentSquarePage — Agent marketplace with search, filters, card grid
+   Uses CSS tokens exclusively: no hardcoded hex / px font sizes
+   ═════════════════════════════════════════════════════════════════════ */
 
-/* Stats row */
-.stats {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(120px, 1fr));
-  gap: 10px;
-  margin-bottom: 16px;
-}
-
-.statCard {
+/* ── Root ───────────────────────────────────────────────────────────── */
+.root {
   display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 14px;
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  background: rgba(255, 255, 255, 0.52);
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
 }
 
-.statIcon {
-  width: 36px;
-  height: 36px;
+/* ── Top Bar ────────────────────────────────────────────────────────── */
+.topBar {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 10px;
-  background: rgba(23, 105, 232, 0.1);
-  color: var(--primary);
+  flex-direction: column;
+  gap: var(--space-lg);
+  padding: var(--space-xl);
+  background: var(--card);
+  border-bottom: 1px solid var(--border);
   flex-shrink: 0;
 }
 
-.statIconCyan { color: #087f9e; background: rgba(8, 167, 207, 0.11); }
-.statIconPurple { color: #6044d7; background: rgba(116, 87, 232, 0.11); }
-.statIconGreen { color: #15744b; background: rgba(29, 155, 103, 0.11); }
+.pageTitle {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  color: var(--foreground);
+  margin: 0;
+}
 
-.statValue { display: block; font-size: 20px; font-weight: 700; line-height: 1; color: var(--foreground); }
-.statLabel { font-size: 12px; color: var(--muted-foreground); margin-top: 2px; }
+.pageSubtitle {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-normal);
+  color: var(--muted-foreground);
+  margin: var(--space-xs) 0 0;
+}
 
-/* Market section */
-.market {
+/* ── Search ─────────────────────────────────────────────────────────── */
+.searchBar {
   display: flex;
-  flex-direction: column;
-  gap: 12px;
-  flex: 1;
-  min-height: 0;
-  padding: 16px;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-sm) var(--space-md);
   border: 1px solid var(--border);
-  border-radius: 12px;
-  background: rgba(255, 255, 255, 0.72);
-  backdrop-filter: blur(28px);
-  overflow: hidden;
+  border-radius: var(--radius-lg);
+  background: var(--background);
+  max-width: 480px;
 }
 
-.marketHead {
+.searchInput {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--foreground);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-normal);
+}
+
+.searchInput::placeholder {
+  color: var(--muted-foreground);
+}
+
+.searchIcon {
+  color: var(--muted-foreground);
+  flex-shrink: 0;
+}
+
+/* ── Filter Tabs ────────────────────────────────────────────────────── */
+.filterBar {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
+  gap: var(--space-sm);
   flex-wrap: wrap;
 }
 
-.marketTitle { font-size: 16px; font-weight: 700; color: var(--foreground); }
-.marketSubtitle { font-size: 11px; color: var(--muted-foreground); font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; }
-
-.filterSummary {
+.filterTab {
   display: flex;
   align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
+  gap: var(--space-xs);
+  padding: var(--space-xs) var(--space-md);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-full);
+  background: transparent;
+  color: var(--muted-foreground);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-normal);
+  cursor: pointer;
+  transition:
+    background var(--duration-fast) var(--ease-standard),
+    color var(--duration-fast) var(--ease-standard),
+    border-color var(--duration-fast) var(--ease-standard);
+}
+
+.filterTab:hover {
+  background: var(--secondary);
+  color: var(--foreground);
+}
+
+.filterTabActive {
+  background: var(--primary);
+  color: var(--primary-foreground);
+  border-color: var(--primary);
+  font-weight: var(--font-weight-medium);
 }
 
-/* Agent grid */
-.agentGrid {
+.filterCount {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-normal);
+  opacity: 0.7;
+}
+
+/* ── Agent Grid ─────────────────────────────────────────────────────── */
+.grid {
   display: grid;
-  grid-template-columns: repeat(3, minmax(230px, 1fr));
-  gap: 14px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--space-lg);
+  padding: var(--space-xl);
   overflow-y: auto;
   flex: 1;
-  padding: 2px 4px 6px 2px;
+  align-content: start;
 }
 
-/* Agent card */
-.agentCard {
+/* ── Agent Card ─────────────────────────────────────────────────────── */
+.card {
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  padding: 15px;
-  border: 1px solid rgba(255, 255, 255, 0.7);
-  border-radius: 12px;
-  background: rgba(255, 255, 255, 0.72);
-  box-shadow: 0 18px 48px rgba(26, 40, 80, 0.14);
-  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
+  gap: var(--space-md);
+  padding: var(--space-lg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xl);
+  background: var(--card);
+  box-shadow: var(--shadow-sm);
+  transition:
+    border-color var(--duration-fast) var(--ease-standard),
+    box-shadow var(--duration-fast) var(--ease-standard),
+    transform var(--duration-fast) var(--ease-standard);
 }
 
-.agentCard:hover {
-  transform: translateY(-2px);
-  border-color: color-mix(in oklch, var(--primary) 24%, transparent);
-  box-shadow: 0 22px 54px rgba(26, 40, 80, 0.16);
+.card:hover {
+  border-color: var(--ring);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-1px);
 }
 
-.agentCardInstalled { border-color: rgba(29, 155, 103, 0.28); }
+/* ── Card Header (avatar + name + status) ───────────────────────────── */
+.cardHeader {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-sm);
+}
 
-.cardHead { display: flex; align-items: flex-start; justify-content: space-between; }
-.cardTitle { display: flex; align-items: center; gap: 10px; min-width: 0; }
+.cardAvatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  border-radius: var(--radius-lg);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--primary-foreground);
+}
 
-.agentLogo {
-  width: 40px; height: 40px;
-  display: flex; align-items: center; justify-content: center;
-  border-radius: 10px; flex-shrink: 0;
-  color: var(--primary);
-  background: rgba(23, 105, 232, 0.1);
+.avatarBlue {
+  background: var(--info);
 }
 
-.logoBlue { color: var(--primary); background: rgba(23, 105, 232, 0.1); }
-.logoCyan { color: #087f9e; background: rgba(8, 167, 207, 0.11); }
-.logoPurple { color: #6044d7; background: rgba(116, 87, 232, 0.11); }
-.logoGreen { color: #15744b; background: rgba(29, 155, 103, 0.11); }
+.avatarGreen {
+  background: var(--success);
+}
+
+.avatarPurple {
+  background: var(--brand);
+}
+
+.avatarOrange {
+  background: var(--warning);
+}
+
+.cardTitle {
+  flex: 1;
+  min-width: 0;
+}
 
 .cardName {
-  font-size: 13px; font-weight: 700; color: var(--foreground);
-  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--foreground);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.cardCategory { font-size: 11px; color: var(--muted-foreground); }
+.cardCategory {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-normal);
+  color: var(--muted-foreground);
+  margin-top: var(--space-xs);
+}
 
-.favBtn {
-  width: 34px; height: 34px;
-  display: flex; align-items: center; justify-content: center;
-  border: 1px solid rgba(23, 105, 232, 0.14); border-radius: 8px;
-  background: rgba(255, 255, 255, 0.62); color: var(--foreground);
-  cursor: pointer; flex-shrink: 0; padding: 0;
+/* ── Status Dot ─────────────────────────────────────────────────────── */
+.statusDot {
+  width: 10px;
+  height: 10px;
+  border-radius: var(--radius-full);
+  flex-shrink: 0;
 }
 
-.favBtnActive {
-  color: #fff; border-color: transparent;
-  background: var(--primary);
+.dotOnline {
+  background: var(--success);
+  box-shadow: 0 0 0 4px color-mix(in oklch, var(--success) 12%, transparent);
 }
 
-.cardCopy { font-size: 13px; line-height: 1.45; color: var(--muted-foreground); min-height: 58px; }
+.dotBusy {
+  background: var(--warning);
+  box-shadow: 0 0 0 4px color-mix(in oklch, var(--warning) 12%, transparent);
+}
+
+.dotOffline {
+  background: var(--muted-foreground);
+  box-shadow: 0 0 0 4px color-mix(in oklch, var(--muted-foreground) 12%, transparent);
+}
+
+/* ── Description ────────────────────────────────────────────────────── */
+.cardDesc {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-normal);
+  color: var(--muted-foreground);
+  line-height: var(--line-height-normal);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
 
-.tagRow { display: flex; flex-wrap: wrap; gap: 6px; }
+/* ── Tags ───────────────────────────────────────────────────────────── */
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-xs);
+}
 
 .tag {
-  font-size: 11px; font-weight: 800; padding: 5px 9px;
-  border: 1px solid rgba(23, 105, 232, 0.13); border-radius: 999px;
-  background: rgba(23, 105, 232, 0.08); color: #1459c7;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-normal);
+  padding: var(--space-xs) var(--space-sm);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-full);
+  background: var(--secondary);
+  color: var(--secondary-foreground);
   white-space: nowrap;
 }
 
-.tagCyan { border-color: rgba(8, 167, 207, 0.18); background: rgba(8, 167, 207, 0.1); color: #087f9e; }
-.tagPurple { border-color: rgba(116, 87, 232, 0.18); background: rgba(116, 87, 232, 0.1); color: #6044d7; }
-.tagGreen { border-color: rgba(29, 155, 103, 0.2); background: rgba(29, 155, 103, 0.11); color: #15744b; }
+/* ── Card Actions ───────────────────────────────────────────────────── */
+.cardActions {
+  display: flex;
+  gap: var(--space-sm);
+  margin-top: auto;
+}
 
-.cardMeta { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted-foreground); }
+.cardBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-xs);
+  padding: var(--space-sm) var(--space-md);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-normal);
+  cursor: pointer;
+  transition:
+    background var(--duration-fast) var(--ease-standard),
+    color var(--duration-fast) var(--ease-standard),
+    border-color var(--duration-fast) var(--ease-standard);
+  flex: 1;
+}
 
-.cardActions { display: flex; justify-content: space-between; gap: 8px; margin-top: auto; }
-.cardActions > * { flex: 1; }
+.btnView {
+  background: transparent;
+  color: var(--foreground);
+}
 
-/* Empty state */
-.emptyState {
-  display: flex; flex-direction: column; align-items: center; justify-content: center;
-  grid-column: 1 / -1; gap: 12px; padding: 28px;
-  border: 1px dashed rgba(23, 105, 232, 0.22); border-radius: 12px;
-  background: rgba(255, 255, 255, 0.42); text-align: center;
+.btnView:hover {
+  background: var(--secondary);
 }
 
-.emptyTitle { font-size: 15px; font-weight: 700; color: var(--foreground); }
-.emptyHint { font-size: 12px; color: var(--muted-foreground); }
+.btnDeploy {
+  background: var(--primary);
+  color: var(--primary-foreground);
+  border-color: var(--primary);
+}
 
-/* Drawer styles */
-.drawerHead { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
-.drawerTitle { font-size: 16px; font-weight: 700; color: var(--foreground); }
-.drawerSubtitle { font-size: 11px; color: var(--muted-foreground); font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; }
+.btnDeploy:hover {
+  opacity: 0.9;
+}
 
-.drawerSection { display: flex; flex-direction: column; gap: 10px; }
-.drawerSectionTitle { font-size: 13px; font-weight: 700; color: var(--foreground); }
+/* ── Stats ──────────────────────────────────────────────────────────── */
+.cardStats {
+  display: flex;
+  justify-content: space-between;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-normal);
+  color: var(--muted-foreground);
+}
 
-.drawerHero { display: flex; align-items: center; gap: 12px; }
-.drawerHeroLogo { width: 44px; height: 44px; }
+/* ── Empty State ────────────────────────────────────────────────────── */
+.emptyState {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  grid-column: 1 / -1;
+  padding: var(--space-3xl);
+  text-align: center;
+  gap: var(--space-md);
+}
 
-.drawerDesc { font-size: 12px; line-height: 1.45; color: var(--muted-foreground); }
+.emptyIcon {
+  color: var(--muted-foreground);
+  opacity: 0.4;
+}
 
-.drawerRow { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid rgba(255, 255, 255, 0.62); border-radius: 12px; background: rgba(255, 255, 255, 0.46); }
-.drawerRowIcon { width: 34px; height: 34px; }
+.emptyTitle {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  color: var(--foreground);
+}
 
-.drawerEmpty {
-  display: flex; flex-direction: column; align-items: center; justify-content: center;
-  flex: 1; gap: 12px; text-align: center;
-  border: 1px dashed rgba(23, 105, 232, 0.22); border-radius: 12px;
-  background: rgba(255, 255, 255, 0.42); padding: 28px;
+.emptyText {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-normal);
+  color: var(--muted-foreground);
 }
 
-/* Confirmation bar */
-.confirmBar {
-  position: fixed; left: 50%; bottom: 22px; z-index: 10;
-  display: flex; align-items: center; gap: 12px;
-  width: min(560px, calc(100vw - 44px));
-  padding: 12px 14px; transform: translateX(-50%);
-  border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 12px;
-  background: rgba(255, 255, 255, 0.72);
-  box-shadow: 0 18px 48px rgba(26, 40, 80, 0.14);
-  backdrop-filter: blur(28px);
+/* ── Responsive ─────────────────────────────────────────────────────── */
+@media (max-width: 1100px) {
+  .grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }
 
-.confirmText { flex: 1; min-width: 0; overflow: hidden; }
-.confirmTitle { font-size: 12px; font-weight: 700; display: block; }
-.confirmDetail { font-size: 11px; color: var(--muted-foreground); }
+@media (max-width: 700px) {
+  .topBar {
+    padding: var(--space-lg);
+  }
 
-/* Sort select */
-.sortSelect {
-  min-height: 38px; padding: 8px 34px 8px 11px;
-  border: 1px solid rgba(255, 255, 255, 0.68); border-radius: 8px;
-  background: rgba(255, 255, 255, 0.62); color: var(--foreground);
-  font-size: 12px; font-weight: 800; cursor: pointer; outline: none;
-}
+  .grid {
+    grid-template-columns: 1fr;
+    padding: var(--space-lg);
+  }
 
-/* Responsive */
-@media (max-width: 1180px) {
-  .agentGrid { grid-template-columns: repeat(2, minmax(230px, 1fr)); }
-}
-@media (max-width: 820px) {
-  .stats, .agentGrid { grid-template-columns: 1fr; }
+  .searchBar {
+    max-width: 100%;
+  }
 }
diff --git a/app/web/src/pages/agent-square/AgentSquarePage.tsx b/app/web/src/pages/agent-square/AgentSquarePage.tsx
index 2ba47ab7..90793108 100644
--- a/app/web/src/pages/agent-square/AgentSquarePage.tsx
+++ b/app/web/src/pages/agent-square/AgentSquarePage.tsx
@@ -1,19 +1,13 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Icon, Button, Pill, SearchInput, ProgressBar } from '@shared/ui';
-import { ParticleCanvas } from '@/components/ParticleCanvas';
-import { WebLayout } from '@/components/WebLayout';
-import styles from './AgentSquarePage.module.css';
-
-/* ---- inline mock data (static prototype) ---- */
-const mockRunners: Array<{ id: string; name: string; status: string; capabilities?: string }> = [
-  { id: 'runner-001', name: 'TS Builder', status: 'online', capabilities: 'TypeScript,React,Frontend' },
-  { id: 'runner-002', name: 'Go Ops Agent', status: 'offline', capabilities: 'Go,Infrastructure,Deploy' },
-  { id: 'runner-003', name: 'Python ML Runner', status: 'online', capabilities: 'Python,ML,Data' },
-];
+import { mockRunners } from '@shared/index';
+import { useHubCustomAgents, type HubCustomAgent } from '../../hooks/useHubCustomAgents';
+import { useHubSession } from '../../hooks/useHubSession';
 
 type AgentCategory = 'Engineering' | 'Design' | 'Operations' | 'Research';
+
 type SortMode = 'popular' | 'rating' | 'recent';
+
 type ViewMode = 'all' | 'favorites' | 'installed';
 
 type Agent = {
@@ -39,19 +33,111 @@ type Confirmation = {
   title: string;
 };
 
-const agents: Agent[] = [
-  { id: 'refactor', name: 'Code Refactor Pro', category: 'Engineering', icon: 'code_blocks', tone: 'blue', summary: 'Modernizes front-end and Go service modules while keeping reviewable diffs visible.', description: 'Best for code cleanup passes where the workspace needs scoped patches, local conventions, and clear validation notes before review.', tags: ['TypeScript', 'Go', 'Review'], installs: 14820, favoriteCount: 1824, rating: 4.9, updatedDaysAgo: 6, outputs: ['Scoped patch plan', 'Validation checklist', 'Risk notes'] },
-  { id: 'designer', name: 'Interface Critic', category: 'Design', icon: 'palette', tone: 'purple', summary: 'Audits tool surfaces for hierarchy, responsive density, and component states.', description: 'Reviews a workbench page like a product surface: layout rhythm, accessible labels, empty states, and responsive clipping.', tags: ['UI audit', 'A11y', 'Layout'], installs: 9360, favoriteCount: 1211, rating: 4.8, updatedDaysAgo: 3, outputs: ['Visual hierarchy pass', 'A11y notes', 'Responsive risks'] },
-  { id: 'qa', name: 'QA Flow Builder', category: 'Engineering', icon: 'fact_check', tone: 'cyan', summary: 'Creates focused checks for UI flows, command output, and API contract edges.', description: 'Useful when a page or workflow needs a compact smoke plan with the right assertions and a clean handoff for testers.', tags: ['Playwright', 'Unit tests', 'Smoke'], installs: 12840, favoriteCount: 1506, rating: 4.7, updatedDaysAgo: 9, outputs: ['Smoke scenarios', 'State matrix', 'Manual QA steps'] },
-  { id: 'ops', name: 'Runbook Operator', category: 'Operations', icon: 'terminal', tone: 'green', summary: 'Turns incidents and release notes into commands, checkpoints, and rollback prompts.', description: 'Pairs well with deployment work because it keeps routine operations, checks, and escalation notes in one readable sequence.', tags: ['Runbook', 'Deploy', 'Monitor'], installs: 8700, favoriteCount: 984, rating: 4.6, updatedDaysAgo: 2, outputs: ['Command sequence', 'Rollback prompts', 'Operator handoff'] },
-  { id: 'research', name: 'Evidence Synthesizer', category: 'Research', icon: 'travel_explore', tone: 'purple', summary: 'Groups sources into claims, caveats, contradictions, and decision notes.', description: 'Helps teams move from raw references to compact conclusions while preserving the difference between evidence and inference.', tags: ['Sources', 'Citations', 'Summary'], installs: 10320, favoriteCount: 1398, rating: 4.9, updatedDaysAgo: 5, outputs: ['Claim map', 'Source trail', 'Decision summary'] },
-  { id: 'release', name: 'Release Steward', category: 'Operations', icon: 'rocket_launch', tone: 'blue', summary: 'Collects branch status, validation commands, changelog points, and merge readiness.', description: 'Keeps release coordination visible across branch status, test evidence, review notes, and handoff copy.', tags: ['PR', 'Validation', 'Changelog'], installs: 7600, favoriteCount: 862, rating: 4.5, updatedDaysAgo: 8, outputs: ['Release checklist', 'Changelog draft', 'Merge summary'] },
+const catalogAgents: Agent[] = [
+  {
+    id: 'refactor',
+    name: 'Code Refactor Pro',
+    category: 'Engineering',
+    icon: 'code_blocks',
+    tone: 'blue',
+    summary: 'Modernizes front-end and Go service modules while keeping reviewable diffs visible.',
+    description:
+      'Best for code cleanup passes where the workspace needs scoped patches, local conventions, and clear validation notes before review.',
+    tags: ['TypeScript', 'Go', 'Review'],
+    installs: 14820,
+    favoriteCount: 1824,
+    rating: 4.9,
+    updatedDaysAgo: 6,
+    outputs: ['Scoped patch plan', 'Validation checklist', 'Risk notes'],
+  },
+  {
+    id: 'designer',
+    name: 'Interface Critic',
+    category: 'Design',
+    icon: 'palette',
+    tone: 'purple',
+    summary: 'Audits tool surfaces for hierarchy, responsive density, and component states.',
+    description:
+      'Reviews a workbench page like a product surface: layout rhythm, accessible labels, empty states, and responsive clipping.',
+    tags: ['UI audit', 'A11y', 'Layout'],
+    installs: 9360,
+    favoriteCount: 1211,
+    rating: 4.8,
+    updatedDaysAgo: 3,
+    outputs: ['Visual hierarchy pass', 'A11y notes', 'Responsive risks'],
+  },
+  {
+    id: 'qa',
+    name: 'QA Flow Builder',
+    category: 'Engineering',
+    icon: 'fact_check',
+    tone: 'cyan',
+    summary: 'Creates focused checks for UI flows, command output, and API contract edges.',
+    description:
+      'Useful when a page or workflow needs a compact smoke plan with the right assertions and a clean handoff for testers.',
+    tags: ['Playwright', 'Unit tests', 'Smoke'],
+    installs: 12840,
+    favoriteCount: 1506,
+    rating: 4.7,
+    updatedDaysAgo: 9,
+    outputs: ['Smoke scenarios', 'State matrix', 'Manual QA steps'],
+  },
+  {
+    id: 'ops',
+    name: 'Runbook Operator',
+    category: 'Operations',
+    icon: 'terminal',
+    tone: 'green',
+    summary: 'Turns incidents and release notes into commands, checkpoints, and rollback prompts.',
+    description:
+      'Pairs well with deployment work because it keeps routine operations, checks, and escalation notes in one readable sequence.',
+    tags: ['Runbook', 'Deploy', 'Monitor'],
+    installs: 8700,
+    favoriteCount: 984,
+    rating: 4.6,
+    updatedDaysAgo: 2,
+    outputs: ['Command sequence', 'Rollback prompts', 'Operator handoff'],
+  },
+  {
+    id: 'research',
+    name: 'Evidence Synthesizer',
+    category: 'Research',
+    icon: 'travel_explore',
+    tone: 'purple',
+    summary: 'Groups sources into claims, caveats, contradictions, and decision notes.',
+    description:
+      'Helps teams move from raw references to compact conclusions while preserving the difference between evidence and inference.',
+    tags: ['Sources', 'Citations', 'Summary'],
+    installs: 10320,
+    favoriteCount: 1398,
+    rating: 4.9,
+    updatedDaysAgo: 5,
+    outputs: ['Claim map', 'Source trail', 'Decision summary'],
+  },
+  {
+    id: 'release',
+    name: 'Release Steward',
+    category: 'Operations',
+    icon: 'rocket_launch',
+    tone: 'blue',
+    summary: 'Collects branch status, validation commands, changelog points, and merge readiness.',
+    description:
+      'Keeps release coordination visible across branch status, test evidence, review notes, and handoff copy.',
+    tags: ['PR', 'Validation', 'Changelog'],
+    installs: 7600,
+    favoriteCount: 862,
+    rating: 4.5,
+    updatedDaysAgo: 8,
+    outputs: ['Release checklist', 'Changelog draft', 'Merge summary'],
+  },
   ...mockRunners.map((runner) => ({
-    id: runner.id, name: runner.name, category: 'Engineering' as AgentCategory,
+    id: runner.id,
+    name: runner.name,
+    category: 'Engineering' as AgentCategory,
     icon: runner.status === 'online' ? 'memory' : 'cloud_off',
     tone: (runner.status === 'online' ? 'cyan' : 'purple') as Agent['tone'],
     summary: runner.capabilities ?? 'Local runner agent',
-    description: `Runner ${runner.name} — status: ${runner.status}. Capabilities: ${runner.capabilities ?? 'unknown'}.`,
+    description: `Runner ${runner.name} - status: ${runner.status}. Capabilities: ${runner.capabilities ?? 'unknown'}.`,
     tags: [runner.status, ...(runner.capabilities?.split(',') ?? [])],
     installs: runner.status === 'online' ? 5200 : 800,
     favoriteCount: runner.status === 'online' ? 340 : 45,
@@ -62,16 +148,163 @@ const agents: Agent[] = [
 ];
 
 const categories: Array<AgentCategory | 'All'> = ['All', 'Engineering', 'Design', 'Operations', 'Research'];
+
 const initialFavoriteIds = new Set<string>(['refactor', mockRunners[0]?.id].filter(Boolean) as string[]);
 const initialInstalledIds = new Set<string>(['refactor', mockRunners[0]?.id, mockRunners[1]?.id].filter(Boolean) as string[]);
 const workspaceLimit = 8;
 
-function formatInstalls(installs: number): string { return `${(installs / 1000).toFixed(1)}k`; }
+function parseJsonStringArray(value: string | undefined): string[] {
+  if (!value) return [];
+
+  try {
+    const parsed = JSON.parse(value);
+    return Array.isArray(parsed) ? parsed.filter((item): item is string => typeof item === 'string') : [];
+  } catch {
+    return [];
+  }
+}
+
+function agentFromHub(agent: HubCustomAgent, index: number): Agent {
+  const tags = parseJsonStringArray(agent.capability_tags);
+  const tone = (['blue', 'cyan', 'purple', 'green'] as const)[index % 4] ?? 'blue';
+
+  return {
+    id: agent.id,
+    name: agent.name,
+    category: 'Engineering',
+    icon: agent.avatar_url ? 'account_circle' : 'smart_toy',
+    tone,
+    summary: agent.system_prompt || `${agent.agent_type} custom agent`,
+    description: agent.system_prompt || `${agent.name} is loaded from Hub /web/custom-agents.`,
+    tags: tags.length ? tags : [agent.agent_type],
+    installs: 0,
+    favoriteCount: 0,
+    rating: 0,
+    updatedDaysAgo: 0,
+    outputs: ['Hub custom agent', 'Session mention target', 'Shared profile contract'],
+  };
+}
+
+function formatInstalls(installs: number): string {
+  return `${(installs / 1000).toFixed(1)}k`;
+}
+
+function cx(...classes: Array<string | false | null | undefined>): string {
+  return classes.filter(Boolean).join(' ');
+}
+
+function ParticleCanvas() {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const context = canvas?.getContext('2d');
+
+    if (!canvas || !context) {
+      return;
+    }
+
+    type Particle = {
+      alpha: number;
+      hue: number;
+      radius: number;
+      velocityX: number;
+      velocityY: number;
+      x: number;
+      y: number;
+    };
+
+    let animationFrame = 0;
+    let height = 0;
+    let width = 0;
+    let particles: Particle[] = [];
+
+    const createParticle = (index: number): Particle => ({
+      alpha: 0.18 + Math.random() * 0.2,
+      hue: index % 3 === 0 ? 196 : 210,
+      radius: 1.6 + Math.random() * 2.6,
+      velocityX: -0.18 + Math.random() * 0.36,
+      velocityY: -0.18 - Math.random() * 0.48,
+      x: Math.random() * width,
+      y: Math.random() * height,
+    });
+
+    const resize = () => {
+      const ratio = window.devicePixelRatio || 1;
+      width = window.innerWidth;
+      height = window.innerHeight;
+      canvas.width = Math.floor(width * ratio);
+      canvas.height = Math.floor(height * ratio);
+      canvas.style.width = `${width}px`;
+      canvas.style.height = `${height}px`;
+      context.setTransform(ratio, 0, 0, ratio, 0, 0);
+      particles = Array.from({ length: 56 }, (_, index) => createParticle(index));
+    };
+
+    const draw = () => {
+      animationFrame = window.requestAnimationFrame(draw);
+      context.clearRect(0, 0, width, height);
+
+      particles.forEach((particle, index) => {
+        particle.x += particle.velocityX;
+        particle.y += particle.velocityY;
 
-export function AgentSquarePage() {
-  const { t } = useTranslation();
+        if (particle.y < -16) {
+          particle.y = height + 16;
+          particle.x = Math.random() * width;
+        }
+
+        if (particle.x < -16) {
+          particle.x = width + 16;
+        }
+
+        if (particle.x > width + 16) {
+          particle.x = -16;
+        }
+
+        context.beginPath();
+        context.fillStyle = `hsla(${particle.hue}, 84%, 48%, ${particle.alpha})`;
+        context.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
+        context.fill();
+
+        for (let nextIndex = index + 1; nextIndex < particles.length; nextIndex += 1) {
+          const nextParticle = particles[nextIndex];
+          if (!nextParticle) {
+            continue;
+          }
+
+          const dx = particle.x - nextParticle.x;
+          const dy = particle.y - nextParticle.y;
+          const distance = Math.sqrt(dx * dx + dy * dy);
+
+          if (distance < 126) {
+            context.beginPath();
+            context.strokeStyle = `rgba(23, 105, 232, ${(1 - distance / 126) * 0.07})`;
+            context.lineWidth = 1;
+            context.moveTo(particle.x, particle.y);
+            context.lineTo(nextParticle.x, nextParticle.y);
+            context.stroke();
+          }
+        }
+      });
+    };
+
+    resize();
+    draw();
+    window.addEventListener('resize', resize);
+
+    return () => {
+      window.cancelAnimationFrame(animationFrame);
+      window.removeEventListener('resize', resize);
+    };
+  }, []);
+
+  return <canvas aria-hidden="true" className="asr-particle-canvas" ref={canvasRef} />;
+}
+
+export function AgentSquarePageInteractive() {
   const [activeCategory, setActiveCategory] = useState<AgentCategory | 'All'>('All');
-  const [detailAgentId, setDetailAgentId] = useState<string | null>(agents[0]!.id);
+  const [detailAgentId, setDetailAgentId] = useState<string | null>(catalogAgents[0]?.id ?? null);
   const [isDetailOpen, setIsDetailOpen] = useState(true);
   const [favoriteIds, setFavoriteIds] = useState(initialFavoriteIds);
   const [installedIds, setInstalledIds] = useState(initialInstalledIds);
@@ -80,313 +313,1331 @@ export function AgentSquarePage() {
   const [sortMode, setSortMode] = useState<SortMode>('popular');
   const [viewMode, setViewMode] = useState<ViewMode>('all');
 
-  const detailAgent = isDetailOpen ? agents.find((a) => a.id === detailAgentId) ?? null : null;
+  const { t } = useTranslation('agentSquare');
+  const { hasSession: hasHubSession, token } = useHubSession();
+  const customAgents = useHubCustomAgents(token);
+  const agents = useMemo(
+    () => customAgents.source === 'hub'
+      ? customAgents.agents.map(agentFromHub)
+      : catalogAgents,
+    [customAgents.agents, customAgents.source],
+  );
+  const catalogSourceLabel = customAgents.source === 'hub'
+    ? t('source.hub')
+    : hasHubSession && customAgents.isLoading
+      ? t('source.loading')
+      : t('source.catalogMock');
+  const catalogSourceDetail = customAgents.source === 'hub'
+    ? t('source.hubDetail')
+    : customAgents.error
+      ? t('source.errorDetail', { error: customAgents.error })
+      : hasHubSession
+        ? t('source.catalogFallbackDetail')
+        : t('source.loginRequiredDetail');
+
+  const sortLabels = useMemo<Record<SortMode, string>>(() => ({
+    popular: t('sort.popular'),
+    rating: t('sort.rating'),
+    recent: t('sort.recent'),
+  }), [t]);
+
+  const viewModeLabels = useMemo<Record<ViewMode, string>>(() => ({
+    all: t('viewMode.all'),
+    favorites: t('viewMode.favorites'),
+    installed: t('viewMode.installed'),
+  }), [t]);
+
+  const detailAgent = isDetailOpen ? agents.find((agent) => agent.id === detailAgentId) ?? null : null;
   const hasActiveFilters = activeCategory !== 'All' || query.trim().length > 0 || viewMode !== 'all';
   const workspaceIsFull = installedIds.size >= workspaceLimit;
 
+  useEffect(() => {
+    if (agents.length === 0) {
+      setDetailAgentId(null);
+      return;
+    }
+
+    if (!detailAgentId || !agents.some((agent) => agent.id === detailAgentId)) {
+      setDetailAgentId(agents[0]?.id ?? null);
+    }
+  }, [agents, detailAgentId]);
+
+  const filteredAgents = useMemo(() => {
+    const normalizedQuery = query.trim().toLowerCase();
+
+    return agents
+      .filter((agent) => activeCategory === 'All' || agent.category === activeCategory)
+      .filter((agent) => {
+        if (viewMode === 'favorites') {
+          return favoriteIds.has(agent.id);
+        }
+
+        if (viewMode === 'installed') {
+          return installedIds.has(agent.id);
+        }
+
+        return true;
+      })
+      .filter((agent) => {
+        if (!normalizedQuery) {
+          return true;
+        }
+
+        const haystack = [agent.name, agent.category, agent.summary, ...agent.tags].join(' ').toLowerCase();
+        return haystack.includes(normalizedQuery);
+      })
+      .sort((firstAgent, secondAgent) => {
+        if (sortMode === 'rating') {
+          return secondAgent.rating - firstAgent.rating || secondAgent.installs - firstAgent.installs;
+        }
+
+        if (sortMode === 'recent') {
+          return firstAgent.updatedDaysAgo - secondAgent.updatedDaysAgo || secondAgent.rating - firstAgent.rating;
+        }
+
+        const firstInstalls = getDisplayInstalls(firstAgent.id);
+        const secondInstalls = getDisplayInstalls(secondAgent.id);
+        return secondInstalls - firstInstalls || secondAgent.rating - firstAgent.rating;
+      });
+  }, [activeCategory, favoriteIds, installedIds, query, sortMode, viewMode]);
+
   const categoryCounts = useMemo(() => {
     const counts = new Map<AgentCategory | 'All', number>([['All', agents.length]]);
-    categories.forEach((c) => { if (c !== 'All') counts.set(c, agents.filter((a) => a.category === c).length); });
+
+    categories.forEach((category) => {
+      if (category !== 'All') {
+        counts.set(
+          category,
+          agents.filter((agent) => agent.category === category).length,
+        );
+      }
+    });
+
     return counts;
-  }, []);
+  }, [agents]);
 
   function getDisplayInstalls(agentId: string): number {
-    const agent = agents.find((a) => a.id === agentId);
-    return agent ? agent.installs + (installedIds.has(agentId) && !initialInstalledIds.has(agentId) ? 1 : 0) : 0;
+    const agent = agents.find((currentAgent) => currentAgent.id === agentId);
+
+    if (!agent) {
+      return 0;
+    }
+
+    return agent.installs + (installedIds.has(agentId) && !initialInstalledIds.has(agentId) ? 1 : 0);
   }
 
   function getDisplayFavoriteCount(agentId: string): number {
-    const agent = agents.find((a) => a.id === agentId);
-    if (!agent) return 0;
-    if (favoriteIds.has(agentId) && !initialFavoriteIds.has(agentId)) return agent.favoriteCount + 1;
-    if (!favoriteIds.has(agentId) && initialFavoriteIds.has(agentId)) return Math.max(agent.favoriteCount - 1, 0);
+    const agent = agents.find((currentAgent) => currentAgent.id === agentId);
+
+    if (!agent) {
+      return 0;
+    }
+
+    if (favoriteIds.has(agentId) && !initialFavoriteIds.has(agentId)) {
+      return agent.favoriteCount + 1;
+    }
+
+    if (!favoriteIds.has(agentId) && initialFavoriteIds.has(agentId)) {
+      return Math.max(agent.favoriteCount - 1, 0);
+    }
+
     return agent.favoriteCount;
   }
 
-  const filteredAgents = useMemo(() => {
-    const q = query.trim().toLowerCase();
-    return agents
-      .filter((a) => activeCategory === 'All' || a.category === activeCategory)
-      .filter((a) => { if (viewMode === 'favorites') return favoriteIds.has(a.id); if (viewMode === 'installed') return installedIds.has(a.id); return true; })
-      .filter((a) => { if (!q) return true; return [a.name, a.category, a.summary, ...a.tags].join(' ').toLowerCase().includes(q); })
-      .sort((a, b) => {
-        if (sortMode === 'rating') return b.rating - a.rating || b.installs - a.installs;
-        if (sortMode === 'recent') return a.updatedDaysAgo - b.updatedDaysAgo || b.rating - a.rating;
-        return getDisplayInstalls(b.id) - getDisplayInstalls(a.id) || b.rating - a.rating;
-      });
-  }, [activeCategory, favoriteIds, installedIds, query, sortMode, viewMode]);
-
   function clearFilters() {
-    setActiveCategory('All'); setQuery(''); setViewMode('all');
-    setConfirmation({ id: `clear-${Date.now()}`, message: t('as.confirm.filtersClearedMsg'), title: t('as.confirm.filtersCleared') });
+    setActiveCategory('All');
+    setQuery('');
+    setViewMode('all');
+    setConfirmation({
+      id: `clear-${Date.now()}`,
+      message: t('filters.cleared'),
+      title: t('filters.clearedTitle'),
+    });
   }
 
-  function openAgentDetails(agentId: string) { setDetailAgentId(agentId); setIsDetailOpen(true); }
+  function openAgentDetails(agentId: string) {
+    setDetailAgentId(agentId);
+    setIsDetailOpen(true);
+  }
 
   function toggleFavorite(agentId: string) {
-    const agent = agents.find((a) => a.id === agentId);
+    const agent = agents.find((currentAgent) => currentAgent.id === agentId);
     const wasFavorite = favoriteIds.has(agentId);
-    setFavoriteIds((prev) => { const n = new Set(prev); n.has(agentId) ? n.delete(agentId) : n.add(agentId); return n; });
+
+    setFavoriteIds((currentFavoriteIds) => {
+      const nextFavoriteIds = new Set(currentFavoriteIds);
+
+      if (nextFavoriteIds.has(agentId)) {
+        nextFavoriteIds.delete(agentId);
+      } else {
+        nextFavoriteIds.add(agentId);
+      }
+
+      return nextFavoriteIds;
+    });
+
     if (agent) {
       setConfirmation({
-        actionAgentId: agent.id, id: `fav-${agent.id}-${Date.now()}`,
-        message: `${formatInstalls(getDisplayFavoriteCount(agent.id) + (wasFavorite ? -1 : 1))} local saves are now shown on the card.`,
-        title: wasFavorite ? t('as.confirm.removedFavorite', { name: agent.name }) : t('as.confirm.saved', { name: agent.name }),
+        actionAgentId: agent.id,
+        id: `favorite-${agent.id}-${Date.now()}`,
+        message: t('confirm.savesUpdated', { count: formatInstalls(getDisplayFavoriteCount(agent.id) + (wasFavorite ? -1 : 1)) }),
+        title: wasFavorite ? t('confirm.removed', { name: agent.name }) : t('confirm.added', { name: agent.name }),
       });
     }
   }
 
   function installAgent(agentId: string) {
-    const agent = agents.find((a) => a.id === agentId);
-    if (!agent) return;
+    const agent = agents.find((currentAgent) => currentAgent.id === agentId);
+
+    if (!agent) {
+      return;
+    }
+
     if (installedIds.has(agentId)) {
       openAgentDetails(agentId);
-      setConfirmation({ actionAgentId: agentId, id: `inst-${agentId}-${Date.now()}`, message: t('as.confirm.alreadyAddedMsg'), title: t('as.confirm.alreadyAdded', { name: agent.name }) });
+      setConfirmation({
+        actionAgentId: agentId,
+        id: `installed-${agentId}-${Date.now()}`,
+        message: t('confirm.alreadyStaged'),
+        title: t('confirm.alreadyStagedTitle', { name: agent.name }),
+      });
       return;
     }
+
     if (workspaceIsFull) {
-      setConfirmation({ actionAgentId: agentId, id: `full-${agentId}-${Date.now()}`, message: t('as.confirm.workspaceFullMsg', { limit: workspaceLimit }), title: t('as.confirm.workspaceFull') });
+      setConfirmation({
+        actionAgentId: agentId,
+        id: `full-${agentId}-${Date.now()}`,
+        message: t('workspace.full', { limit: workspaceLimit }),
+        title: t('workspace.fullTitle'),
+      });
       return;
     }
-    setInstalledIds((prev) => { const n = new Set(prev); n.add(agentId); return n; });
+
+    setInstalledIds((currentInstalledIds) => {
+      const nextInstalledIds = new Set(currentInstalledIds);
+      nextInstalledIds.add(agentId);
+      return nextInstalledIds;
+    });
     openAgentDetails(agentId);
-    setConfirmation({ actionAgentId: agentId, id: `add-${agentId}-${Date.now()}`, message: t('as.confirm.addedMsg', { current: installedIds.size + 1, limit: workspaceLimit }), title: t('as.confirm.added', { name: agent.name }) });
+    setConfirmation({
+      actionAgentId: agentId,
+      id: `add-${agentId}-${Date.now()}`,
+      message: t('confirm.staged', { count: installedIds.size + 1, limit: workspaceLimit }),
+      title: t('confirm.stagedTitle', { name: agent.name }),
+    });
   }
 
-  const navItems = [
-    { icon: 'storefront', label: t('as.nav.marketplace'), active: viewMode === 'all', onClick: () => setViewMode('all') },
-    { icon: 'dashboard', label: t('as.nav.workspace'), active: viewMode === 'installed', onClick: () => setViewMode('installed') },
-    { icon: 'bookmark', label: t('as.nav.favorites'), active: viewMode === 'favorites', onClick: () => setViewMode('favorites') },
-  ];
-
-  const sidebarBottom = (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 10, padding: '12px', border: '1px solid rgba(255,255,255,0.62)', borderRadius: 12, background: 'rgba(255,255,255,0.46)' }}>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-        <span style={{ fontSize: 11, fontWeight: 800, textTransform: 'uppercase', color: 'var(--muted-foreground)', letterSpacing: '0.09em' }}>{t('as.slots.label')}</span>
-        <strong style={{ fontSize: 12 }}>{installedIds.size} / {workspaceLimit}</strong>
-      </div>
-      <ProgressBar value={Math.min((installedIds.size / workspaceLimit) * 100, 100)} />
-      <p style={{ fontSize: 12, color: 'var(--muted-foreground)', margin: 0 }}>{t('as.slots.hint')}</p>
-    </div>
-  );
-
   return (
-    <div className={styles.pageRoot}>
+    <div className="asr-root">
+      <style>{styles}</style>
       <ParticleCanvas />
-      <WebLayout
-        brandName={t('as.brand')}
-        brandSubtitle={t('as.subtitle')}
-        navItems={navItems}
-        sectionLabels={[
-          { text: t('as.nav.label') },
-          { text: t('as.categories.label') },
-        ]}
-        sidebarBottom={sidebarBottom}
-        topbarLeft={
-          <div>
-            <div style={{ fontSize: 11, fontWeight: 800, textTransform: 'uppercase', letterSpacing: '0.09em', color: 'var(--muted-foreground)', marginBottom: 4 }}>{t('as.topbar.eyebrow')}</div>
-            <h1 style={{ fontSize: 27, lineHeight: 1.1, margin: 0, color: 'var(--foreground)' }}>{t('as.topbar.title')}</h1>
-            <p style={{ fontSize: 12, color: 'var(--muted-foreground)', margin: '4px 0 0' }}>{t('as.topbar.subtitle')}</p>
-          </div>
-        }
-        topbarRight={
-          <>
-            <SearchInput placeholder={t('as.topbar.search')} value={query} onChange={(e) => setQuery(e.target.value)} />
-            <select className={styles.sortSelect} aria-label="Sort agents" value={sortMode} onChange={(e) => setSortMode(e.target.value as SortMode)}>
-              <option value="popular">{t('as.topbar.sort.popular')}</option>
-              <option value="rating">{t('as.topbar.sort.rating')}</option>
-              <option value="recent">{t('as.topbar.sort.recent')}</option>
-            </select>
-          </>
-        }
-        drawer={detailAgent ? (
-          <>
-            <div className={styles.drawerHead}>
-              <div>
-                <div className={styles.drawerSubtitle}>{t('as.drawer.title')}</div>
-                <div className={styles.drawerTitle}>{detailAgent.name}</div>
+
+      <div className="asr-page">
+        <div className="asr-workspace">
+          <aside className="asr-sidebar asr-glass">
+            <div className="asr-brand">
+              <span className="asr-brand-mark">AH</span>
+              <div className="asr-truncate asr-title">
+                <h2>{t('brand.title')}</h2>
+                <p className="asr-brand-sub">{t('brand.subtitle')}</p>
               </div>
-              <Button variant="icon" onClick={() => setIsDetailOpen(false)} aria-label="Close detail"><Icon name="close" /></Button>
             </div>
-            <div className={styles.drawerSection} style={{ marginTop: 16 }}>
-              <div className={styles.drawerHero}>
-                <div className={`${styles.agentLogo} ${styles.drawerHeroLogo} ${detailAgent.tone === 'blue' ? styles.logoBlue : detailAgent.tone === 'cyan' ? styles.logoCyan : detailAgent.tone === 'purple' ? styles.logoPurple : styles.logoGreen}`}>
-                  <Icon name={detailAgent.icon} />
-                </div>
-                <div>
-                  <Pill variant="cyan">{detailAgent.category}</Pill>
-                  <p className={styles.drawerDesc}>{detailAgent.summary}</p>
-                </div>
+
+            <section className="asr-stack">
+              <div className="asr-section-head">
+                <h3>{t('sidebar.nav')}</h3>
+                <span className={cx('asr-pill', customAgents.source === 'hub' ? 'asr-pill-green' : 'asr-pill-cyan')}>
+                  <span className="asr-status-dot" />
+                  {catalogSourceLabel}
+                </span>
               </div>
-              <p className={styles.drawerDesc}>{detailAgent.description}</p>
-              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'var(--muted-foreground)' }}>
-                <span>{t('as.drawer.rating')}</span><strong style={{ fontSize: 12, color: 'var(--foreground)' }}>{t('as.drawer.ratingValue', { rating: detailAgent.rating.toFixed(1) })}</strong>
+
+              <div className="asr-nav-list">
+                <button
+                  className={cx('asr-nav-item', viewMode === 'all' && 'asr-active')}
+                  onClick={() => setViewMode('all')}
+                  type="button"
+                >
+                  <div className="asr-icon-tile">
+                    <span className="material-symbols-outlined">storefront</span>
+                  </div>
+                  <div className="asr-truncate">
+                    <strong className="asr-small">{t('sidebar.catalog')}</strong>
+                    <p className="asr-tiny asr-muted asr-truncate">{catalogSourceDetail}</p>
+                  </div>
+                </button>
+
+                <button
+                  className={cx('asr-nav-item', viewMode === 'installed' && 'asr-active')}
+                  onClick={() => setViewMode('installed')}
+                  type="button"
+                >
+                  <div className="asr-icon-tile asr-cyan">
+                    <span className="material-symbols-outlined">dashboard</span>
+                  </div>
+                  <div className="asr-truncate">
+                    <strong className="asr-small">{t('sidebar.workspace')}</strong>
+                    <p className="asr-tiny asr-muted asr-truncate">{t('sidebar.workspaceDesc', { count: installedIds.size })}</p>
+                  </div>
+                </button>
+
+                <button
+                  className={cx('asr-nav-item', viewMode === 'favorites' && 'asr-active')}
+                  onClick={() => setViewMode('favorites')}
+                  type="button"
+                >
+                  <div className="asr-icon-tile asr-purple">
+                    <span className="material-symbols-outlined">bookmark</span>
+                  </div>
+                  <div className="asr-truncate">
+                    <strong className="asr-small">{t('sidebar.favorites')}</strong>
+                    <p className="asr-tiny asr-muted asr-truncate">{t('sidebar.favoritesDesc', { count: favoriteIds.size })}</p>
+                  </div>
+                </button>
               </div>
-              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'var(--muted-foreground)' }}>
-                <span>{t('as.drawer.installsLabel')}</span><strong style={{ fontSize: 12, color: 'var(--foreground)' }}>{formatInstalls(getDisplayInstalls(detailAgent.id))}</strong>
+            </section>
+
+            <section className="asr-stack">
+              <div className="asr-section-head">
+                <h3>{t('sidebar.categories')}</h3>
+                <span className="asr-tiny asr-muted">{t('sidebar.categoriesDesc')}</span>
               </div>
-              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'var(--muted-foreground)' }}>
-                <span>{t('as.drawer.favoritesLabel')}</span><strong style={{ fontSize: 12, color: 'var(--foreground)' }}>{formatInstalls(getDisplayFavoriteCount(detailAgent.id))}</strong>
+              <div className="asr-category-list">
+                {categories.map((category) => (
+                  <button
+                    className={cx('asr-category-button', activeCategory === category && 'asr-active')}
+                    key={category}
+                    onClick={() => setActiveCategory(category)}
+                    type="button"
+                  >
+                    <span>{category === 'All' ? t('categories.all') : category}</span>
+                    <span className={cx('asr-pill', category === 'Engineering' && 'asr-pill-cyan', category === 'Design' && 'asr-pill-purple', category === 'Operations' && 'asr-pill-green')}>
+                      {categoryCounts.get(category)}
+                    </span>
+                  </button>
+                ))}
               </div>
-            </div>
-            <div className={styles.drawerSection} style={{ marginTop: 16 }}>
-              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                <h3 className={styles.drawerSectionTitle}>{t('as.drawer.output')}</h3>
-                <Pill variant="purple">{t('as.drawer.preview')}</Pill>
+            </section>
+
+            <section className="asr-sidebar-card asr-glass">
+              <div className="asr-mini-row">
+                <span className="asr-label asr-muted">{t('sidebar.slots')}</span>
+                <strong className="asr-small">{installedIds.size} / {workspaceLimit}</strong>
               </div>
-              {detailAgent.outputs.map((output, i) => (
-                <div className={styles.drawerRow} key={output}>
-                  <div className={`${styles.drawerRowIcon} ${styles.statIcon} ${i === 1 ? styles.statIconCyan : i === 2 ? styles.statIconPurple : ''}`}>
-                    <Icon name={i === 0 ? 'difference' : i === 1 ? 'checklist' : 'notes'} size={18} />
-                  </div>
-                  <div>
-                    <strong style={{ fontSize: 12 }}>{output}</strong>
-                    <p style={{ fontSize: 11, color: 'var(--muted-foreground)', margin: '2px 0 0' }}>{t('as.drawer.outputHint')}</p>
-                  </div>
+              <div className="asr-progress">
+                <span style={{ width: `${Math.min((installedIds.size / workspaceLimit) * 100, 100)}%` }} />
+              </div>
+              <p className="asr-small asr-muted">{catalogSourceDetail}</p>
+            </section>
+          </aside>
+
+          <main className="asr-main">
+            <header className="asr-topbar asr-glass">
+              <div>
+                <p className="asr-label asr-muted">{catalogSourceLabel}</p>
+                <h1>{t('header.subtitle')}</h1>
+                <p className="asr-small asr-muted">{catalogSourceDetail}</p>
+              </div>
+
+              <div className="asr-toolbar">
+                <label className="asr-search">
+                  <span className="material-symbols-outlined">search</span>
+                  <input
+                    aria-label={t('search.ariaLabel')}
+                    onChange={(event) => setQuery(event.target.value)}
+                    placeholder={t('search.placeholder')}
+                    value={query}
+                  />
+                </label>
+
+                <select
+                  aria-label={t('search.sortLabel')}
+                  className="asr-select"
+                  onChange={(event) => setSortMode(event.target.value as SortMode)}
+                  value={sortMode}
+                >
+                  {(Object.keys(sortLabels) as SortMode[]).map((mode) => (
+                    <option key={mode} value={mode}>
+                      {sortLabels[mode]}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            </header>
+
+            <section className="asr-stats">
+              <div className="asr-metric-card asr-glass">
+                <div className="asr-icon-tile">
+                  <span className="material-symbols-outlined">smart_toy</span>
+                </div>
+                <div>
+                  <strong>{agents.length}</strong>
+                  <span className="asr-small asr-muted">{customAgents.source === 'hub' ? t('stats.hub') : t('stats.curated')}</span>
                 </div>
-              ))}
-            </div>
-            <div className={styles.drawerSection} style={{ marginTop: 16 }}>
-              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                <h3 className={styles.drawerSectionTitle}>{t('as.drawer.workspaceState')}</h3>
-                <Pill variant={installedIds.has(detailAgent.id) ? 'green' : 'cyan'}>{installedIds.has(detailAgent.id) ? t('as.agent.added') : t('as.agent.available')}</Pill>
               </div>
-              <div className={styles.drawerRow}>
-                <div className={`${styles.drawerRowIcon} ${styles.statIcon} ${styles.statIconPurple}`}>
-                  <Icon name="favorite" size={18} />
+              <div className="asr-metric-card asr-glass">
+                <div className="asr-icon-tile asr-cyan">
+                  <span className="material-symbols-outlined">download_done</span>
                 </div>
                 <div>
-                  <strong style={{ fontSize: 12 }}>{favoriteIds.has(detailAgent.id) ? t('as.drawer.favorited') : t('as.drawer.notFavorited')}</strong>
-                  <p style={{ fontSize: 11, color: 'var(--muted-foreground)', margin: '2px 0 0' }}>{t('as.drawer.favStateHint')}</p>
+                  <strong>{installedIds.size}</strong>
+                  <span className="asr-small asr-muted">{t('stats.ready')}</span>
                 </div>
               </div>
-              <div className={styles.drawerRow}>
-                <div className={`${styles.drawerRowIcon} ${styles.statIcon} ${styles.statIconGreen}`}>
-                  <Icon name="download_done" size={18} />
+              <div className="asr-metric-card asr-glass">
+                <div className="asr-icon-tile asr-purple">
+                  <span className="material-symbols-outlined">favorite</span>
                 </div>
                 <div>
-                  <strong style={{ fontSize: 12 }}>{installedIds.has(detailAgent.id) ? t('as.drawer.ready') : t('as.drawer.readyAdd')}</strong>
-                  <p style={{ fontSize: 11, color: 'var(--muted-foreground)', margin: '2px 0 0' }}>{t('as.drawer.installStateHint')}</p>
+                  <strong>{favoriteIds.size}</strong>
+                  <span className="asr-small asr-muted">{t('stats.favorites')}</span>
                 </div>
               </div>
-            </div>
-          </>
-        ) : (
-          <div className={styles.drawerEmpty}>
-            <Icon name="ads_click" size={40} />
-            <h2 className={styles.drawerTitle}>{t('as.drawer.selectPrompt')}</h2>
-            <p className={styles.emptyHint}>{t('as.drawer.selectHint')}</p>
-          </div>
-        )}
-      >
-        {/* Stats row */}
-        <div className={styles.stats}>
-          <div className={styles.statCard}>
-            <div className={styles.statIcon}><Icon name="smart_toy" /></div>
-            <div><span className={styles.statValue}>{agents.length}</span><span className={styles.statLabel}>{t('as.stats.curated')}</span></div>
-          </div>
-          <div className={styles.statCard}>
-            <div className={`${styles.statIcon} ${styles.statIconCyan}`}><Icon name="download_done" /></div>
-            <div><span className={styles.statValue}>{installedIds.size}</span><span className={styles.statLabel}>{t('as.stats.ready')}</span></div>
-          </div>
-          <div className={styles.statCard}>
-            <div className={`${styles.statIcon} ${styles.statIconPurple}`}><Icon name="favorite" /></div>
-            <div><span className={styles.statValue}>{favoriteIds.size}</span><span className={styles.statLabel}>{t('as.stats.favorites')}</span></div>
-          </div>
-          <div className={styles.statCard}>
-            <div className={`${styles.statIcon} ${styles.statIconGreen}`}><Icon name="verified" /></div>
-            <div><span className={styles.statValue}>98%</span><span className={styles.statLabel}>{t('as.stats.policy')}</span></div>
-          </div>
-        </div>
+              <div className="asr-metric-card asr-glass">
+                <div className="asr-icon-tile asr-green">
+                  <span className="material-symbols-outlined">verified</span>
+                </div>
+                <div>
+                  <strong>98%</strong>
+                  <span className="asr-small asr-muted">{t('stats.policy')}</span>
+                </div>
+              </div>
+            </section>
 
-        {/* Agent market */}
-        <div className={styles.market}>
-          <div className={styles.marketHead}>
-            <div>
-              <div className={styles.marketSubtitle}>{t('as.catalog.title')}</div>
-              <div className={styles.marketTitle}>{t('as.catalog.subtitle')}</div>
-            </div>
-            <div className={styles.filterSummary}>
-              <Pill variant="cyan">{t('as.catalog.showing', { count: filteredAgents.length })}</Pill>
-              <Button variant="ghost" size="sm" disabled={!hasActiveFilters} onClick={clearFilters}>
-                <Icon name="filter_alt_off" size={16} />{t('as.catalog.clear')}
-              </Button>
-            </div>
-          </div>
+            <section className="asr-market asr-glass">
+              <div className="asr-market-head">
+                <div>
+                  <p className="asr-label asr-muted">{catalogSourceLabel}</p>
+                  <h2>{customAgents.source === 'hub' ? t('catalog.hubSubtitle') : t('catalog.subtitle')}</h2>
+                </div>
+                <div className="asr-filter-summary">
+                  <span className="asr-pill asr-pill-cyan">{t('catalog.showing', { count: filteredAgents.length })}</span>
+                  <span className="asr-pill">{viewModeLabels[viewMode]}</span>
+                  <button className="asr-button asr-ghost" disabled={!hasActiveFilters} onClick={clearFilters} type="button">
+                    <span className="material-symbols-outlined">filter_alt_off</span>
+                    {t('filters.clear')}
+                  </button>
+                </div>
+              </div>
 
-          {filteredAgents.length > 0 ? (
-            <div className={styles.agentGrid}>
-              {filteredAgents.map((agent) => {
-                const isFav = favoriteIds.has(agent.id);
-                const isInst = installedIds.has(agent.id);
-                const isAddDisabled = isInst || (workspaceIsFull && !isInst);
-                return (
-                  <article className={`${styles.agentCard} ${isInst ? styles.agentCardInstalled : ''}`} key={agent.id}>
-                    <div className={styles.cardHead}>
-                      <div className={styles.cardTitle}>
-                        <div className={`${styles.agentLogo} ${agent.tone === 'blue' ? styles.logoBlue : agent.tone === 'cyan' ? styles.logoCyan : agent.tone === 'purple' ? styles.logoPurple : styles.logoGreen}`}>
-                          <Icon name={agent.icon} />
-                        </div>
-                        <div style={{ minWidth: 0 }}>
-                          <div className={styles.cardName}>{agent.name}</div>
-                          <div className={styles.cardCategory}>{agent.category}</div>
+              {filteredAgents.length > 0 ? (
+                <div className="asr-agent-grid">
+                  {filteredAgents.map((agent) => {
+                  const isFavorite = favoriteIds.has(agent.id);
+                  const isInstalled = installedIds.has(agent.id);
+                  const isAddDisabled = isInstalled || (workspaceIsFull && !isInstalled);
+
+                  return (
+                    <article className={cx('asr-agent-card asr-glass', isInstalled && 'asr-installed')} key={agent.id}>
+                      <div className="asr-card-head">
+                        <div className="asr-card-title">
+                          <div className={cx('asr-agent-logo', `asr-${agent.tone}`)}>
+                            <span className="material-symbols-outlined">{agent.icon}</span>
+                          </div>
+                          <div className="asr-truncate">
+                            <h3 className="asr-truncate">{agent.name}</h3>
+                            <p className="asr-tiny asr-muted asr-truncate">{agent.category}</p>
+                          </div>
                         </div>
+                        <button
+                          aria-label={isFavorite ? t('card.unfavorite', { name: agent.name }) : t('card.favorite', { name: agent.name })}
+                          className={cx('asr-icon-button', isFavorite && 'asr-is-favorite')}
+                          onClick={() => toggleFavorite(agent.id)}
+                          type="button"
+                        >
+                          <span className="material-symbols-outlined">favorite</span>
+                        </button>
                       </div>
-                      <button className={`${styles.favBtn} ${isFav ? styles.favBtnActive : ''}`} onClick={() => toggleFavorite(agent.id)} type="button" aria-label={isFav ? `Unfavorite ${agent.name}` : `Favorite ${agent.name}`}>
-                        <Icon name="favorite" filled={isFav} />
-                      </button>
-                    </div>
-                    <p className={styles.cardCopy}>{agent.summary}</p>
-                    <div className={styles.tagRow}>
-                      {agent.tags.map((tag, ti) => (
-                        <span className={`${styles.tag} ${ti === 1 ? styles.tagCyan : ti === 2 ? styles.tagPurple : ''}`} key={tag}>{tag}</span>
-                      ))}
+
+                      <p className="asr-card-copy">{agent.summary}</p>
+
+                      <div className="asr-tag-row">
+                        {agent.tags.map((tag, tagIndex) => (
+                          <span className={cx('asr-tag', tagIndex === 1 && 'asr-tag-cyan', tagIndex === 2 && 'asr-tag-purple')} key={tag}>
+                            {tag}
+                          </span>
+                        ))}
+                      </div>
+
+                      <div className="asr-mini-row">
+                        <span className="asr-small asr-muted">{t('card.rating', { rating: agent.rating.toFixed(1) })}</span>
+                        <span className="asr-small asr-muted">{t('card.installs', { count: formatInstalls(getDisplayInstalls(agent.id)) })}</span>
+                      </div>
+
+                      <div className="asr-mini-row">
+                        <span className="asr-small asr-muted">{t('card.saves', { count: formatInstalls(getDisplayFavoriteCount(agent.id)) })}</span>
+                        <span className={cx('asr-pill', isInstalled ? 'asr-pill-green' : 'asr-pill-cyan')}>
+                          {isInstalled ? t('card.added') : t('card.available')}
+                        </span>
+                      </div>
+
+                      <div className="asr-card-actions">
+                        <button
+                          className={cx('asr-button asr-primary', isInstalled && 'asr-button-success')}
+                          disabled={isAddDisabled}
+                          onClick={() => installAgent(agent.id)}
+                          type="button"
+                        >
+                          <span className="material-symbols-outlined">{isInstalled ? 'check_circle' : 'add'}</span>
+                          {isInstalled ? t('card.added') : t('card.add')}
+                        </button>
+                        <button className="asr-button asr-ghost" onClick={() => openAgentDetails(agent.id)} type="button">
+                          <span className="material-symbols-outlined">open_in_new</span>
+                          {t('card.details')}
+                        </button>
+                      </div>
+                    </article>
+                  );
+                  })}
+                </div>
+              ) : (
+                <div className="asr-empty-state">
+                  <div className="asr-icon-tile asr-purple">
+                    <span className="material-symbols-outlined">search_off</span>
+                  </div>
+                  <div>
+                    <h3>{t('empty.noResults')}</h3>
+                    <p className="asr-small asr-muted">{t('empty.description')}</p>
+                  </div>
+                  <button className="asr-button asr-primary" disabled={!hasActiveFilters} onClick={clearFilters} type="button">
+                    <span className="material-symbols-outlined">filter_alt_off</span>
+                    {t('filters.clearFilters')}
+                  </button>
+                </div>
+              )}
+            </section>
+          </main>
+
+          <aside className="asr-drawer asr-glass">
+            {detailAgent ? (
+              <>
+                <div className="asr-drawer-header">
+                  <div>
+                    <p className="asr-label asr-muted">{t('detail.title')}</p>
+                    <h2>{detailAgent.name}</h2>
+                  </div>
+                  <button className="asr-icon-button" onClick={() => setIsDetailOpen(false)} type="button" aria-label={t('detail.close')}>
+                    <span className="material-symbols-outlined">close</span>
+                  </button>
+                </div>
+
+                <section className="asr-stack">
+                  <div className="asr-drawer-hero">
+                    <div className={cx('asr-agent-logo', `asr-${detailAgent.tone}`)}>
+                      <span className="material-symbols-outlined">{detailAgent.icon}</span>
                     </div>
-                    <div className={styles.cardMeta}>
-                      <span>{t('as.agent.rating', { rating: agent.rating.toFixed(1) })}</span>
-                      <span>{t('as.agent.installs', { count: formatInstalls(getDisplayInstalls(agent.id)) })}</span>
+                    <div>
+                      <span className="asr-pill asr-pill-cyan">{detailAgent.category}</span>
+                      <p className="asr-small asr-muted">{detailAgent.summary}</p>
                     </div>
-                    <div className={styles.cardMeta}>
-                      <span>{t('as.agent.saves', { count: formatInstalls(getDisplayFavoriteCount(agent.id)) })}</span>
-                      <Pill variant={isInst ? 'green' : 'cyan'}>{isInst ? t('as.agent.added') : t('as.agent.available')}</Pill>
+                  </div>
+                  <p className="asr-small asr-muted">{detailAgent.description}</p>
+                  <div className="asr-mini-row">
+                    <span className="asr-small asr-muted">{t('detail.rating')}</span>
+                    <strong className="asr-small">{detailAgent.rating.toFixed(1)} / 5</strong>
+                  </div>
+                  <div className="asr-mini-row">
+                    <span className="asr-small asr-muted">{t('detail.installs')}</span>
+                    <strong className="asr-small">{formatInstalls(getDisplayInstalls(detailAgent.id))}</strong>
+                  </div>
+                  <div className="asr-mini-row">
+                    <span className="asr-small asr-muted">{t('detail.favorites')}</span>
+                    <strong className="asr-small">{formatInstalls(getDisplayFavoriteCount(detailAgent.id))}</strong>
+                  </div>
+                </section>
+
+                <section className="asr-stack">
+                  <div className="asr-section-head">
+                    <h3>{t('detail.outputs')}</h3>
+                    <span className="asr-pill asr-pill-purple">{t('detail.outputsPreview')}</span>
+                  </div>
+                  <div className="asr-tool-list">
+                    {detailAgent.outputs.map((output, outputIndex) => (
+                      <div className="asr-tool-row" key={output}>
+                        <div className={cx('asr-icon-tile', outputIndex === 1 && 'asr-cyan', outputIndex === 2 && 'asr-purple')}>
+                          <span className="material-symbols-outlined">{outputIndex === 0 ? 'difference' : outputIndex === 1 ? 'checklist' : 'notes'}</span>
+                        </div>
+                        <div>
+                          <strong className="asr-small">{output}</strong>
+                          <p className="asr-tiny asr-muted">{t('detail.outputsDesc')}</p>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </section>
+
+                <section className="asr-stack">
+                  <div className="asr-section-head">
+                    <h3>{t('detail.workspaceState')}</h3>
+                    <span className={cx('asr-pill', installedIds.has(detailAgent.id) ? 'asr-pill-green' : 'asr-pill-cyan')}>
+                      {installedIds.has(detailAgent.id) ? t('card.added') : t('card.available')}
+                    </span>
+                  </div>
+                  <div className="asr-activity-list">
+                    <div className="asr-activity-row">
+                      <div className="asr-icon-tile asr-purple">
+                        <span className="material-symbols-outlined">favorite</span>
+                      </div>
+                      <div>
+                        <strong className="asr-small">{favoriteIds.has(detailAgent.id) ? t('detail.favorited') : t('detail.notFavorited')}</strong>
+                        <p className="asr-tiny asr-muted">{t('detail.favoritedDesc')}</p>
+                      </div>
                     </div>
-                    <div className={styles.cardActions}>
-                      <Button variant={isInst ? 'secondary' : 'primary'} size="sm" disabled={isAddDisabled} onClick={() => installAgent(agent.id)} style={{ flex: 1 }}>
-                        <Icon name={isInst ? 'check_circle' : 'add'} size={16} />{isInst ? t('as.agent.added') : t('as.agent.add')}
-                      </Button>
-                      <Button variant="ghost" size="sm" onClick={() => openAgentDetails(agent.id)} style={{ flex: 1 }}>
-                        <Icon name="open_in_new" size={16} />{t('as.agent.details')}
-                      </Button>
+                    <div className="asr-activity-row">
+                      <div className="asr-icon-tile asr-green">
+                        <span className="material-symbols-outlined">download_done</span>
+                      </div>
+                      <div>
+                        <strong className="asr-small">{installedIds.has(detailAgent.id) ? t('detail.ready') : t('detail.readyToAdd')}</strong>
+                        <p className="asr-tiny asr-muted">{t('detail.readyDesc')}</p>
+                      </div>
                     </div>
-                  </article>
-                );
-              })}
-            </div>
-          ) : (
-            <div className={styles.emptyState}>
-              <Icon name="search_off" size={32} />
-              <div className={styles.emptyTitle}>{t('as.catalog.emptyTitle')}</div>
-              <div className={styles.emptyHint}>{t('as.catalog.emptyHint')}</div>
-              <Button variant="primary" disabled={!hasActiveFilters} onClick={clearFilters}>{t('as.catalog.clearFilters')}</Button>
-            </div>
-          )}
+                  </div>
+                </section>
+              </>
+            ) : (
+              <div className="asr-drawer-empty">
+                <div className="asr-icon-tile asr-cyan">
+                  <span className="material-symbols-outlined">ads_click</span>
+                </div>
+                <h2>{t('detail.select')}</h2>
+                <p className="asr-small asr-muted">{t('detail.selectDesc')}</p>
+              </div>
+            )}
+          </aside>
         </div>
-      </WebLayout>
+      </div>
 
       {confirmation ? (
-        <div className={styles.confirmBar} role="status">
-          <div className={`${styles.statIcon} ${confirmation.actionAgentId ? styles.statIconGreen : styles.statIconCyan}`}>
-            <Icon name={confirmation.actionAgentId ? 'download_done' : 'tune'} />
+        <div className="asr-confirm-bar asr-glass" role="status">
+          <div className={cx('asr-icon-tile', confirmation.actionAgentId ? 'asr-green' : 'asr-cyan')}>
+            <span className="material-symbols-outlined">{confirmation.actionAgentId ? 'download_done' : 'tune'}</span>
           </div>
-          <div className={styles.confirmText}>
-            <span className={styles.confirmTitle}>{confirmation.title}</span>
-            <span className={styles.confirmDetail}>{confirmation.message}</span>
+          <div className="asr-truncate">
+            <strong className="asr-small">{confirmation.title}</strong>
+            <p className="asr-tiny asr-muted asr-truncate">{confirmation.message}</p>
           </div>
-          <Button variant="ghost" size="sm" onClick={() => setConfirmation(null)}>{t('as.confirm.dismiss')}</Button>
+          <button className="asr-button asr-ghost" onClick={() => setConfirmation(null)} type="button">
+            {t('common:action.dismiss')}
+          </button>
         </div>
       ) : null}
     </div>
   );
 }
 
-export default AgentSquarePage;
+const styles = `
+  @import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap");
+  @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap");
+
+  .asr-root {
+    --asr-bg: #edf6ff;
+    --asr-bg-soft: #f7fbff;
+    --asr-ink: #172033;
+    --asr-muted: #667085;
+    --asr-line: rgba(133, 153, 184, 0.22);
+    --asr-blue: #1769e8;
+    --asr-cyan: #08a7cf;
+    --asr-purple: #7457e8;
+    --asr-green: #1d9b67;
+    --asr-glass: rgba(255, 255, 255, 0.72);
+    --asr-glass-border: rgba(255, 255, 255, 0.7);
+    --asr-shadow: 0 18px 48px rgba(26, 40, 80, 0.14);
+    height: 100%;
+    color: var(--asr-ink);
+    background:
+      radial-gradient(circle at 18% 12%, rgba(8, 167, 207, 0.16), transparent 28%),
+      radial-gradient(circle at 82% 8%, rgba(116, 87, 232, 0.14), transparent 30%),
+      linear-gradient(135deg, var(--asr-bg-soft), var(--asr-bg));
+    font-family: "Hanken Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    overflow: hidden;
+  }
+
+  .asr-root *,
+  .asr-root *::before,
+  .asr-root *::after {
+    box-sizing: border-box;
+  }
+
+  .asr-root button,
+  .asr-root input,
+  .asr-root select {
+    font: inherit;
+  }
+
+  .asr-root button {
+    cursor: pointer;
+  }
+
+  .asr-root button:disabled {
+    cursor: not-allowed;
+  }
+
+  .asr-root h1,
+  .asr-root h2,
+  .asr-root h3,
+  .asr-root p {
+    margin: 0;
+  }
+
+  .asr-root h1 {
+    font-size: 27px;
+    line-height: 1.1;
+    letter-spacing: 0;
+  }
+
+  .asr-title h2 {
+    margin: 0;
+    font-size: 15px;
+    line-height: 1.25;
+    color: var(--asr-ink);
+  }
+
+  .asr-root h3 {
+    font-size: 15px;
+    line-height: 1.25;
+    letter-spacing: 0;
+  }
+
+  .asr-particle-canvas {
+    position: fixed;
+    inset: 0;
+    z-index: 0;
+    width: 100vw;
+    height: 100vh;
+    pointer-events: none;
+  }
+
+  .asr-page {
+    position: relative;
+    z-index: 1;
+    height: 100%;
+    padding: 18px;
+  }
+
+  .asr-workspace {
+    display: grid;
+    grid-template-columns: 280px minmax(0, 1fr) 316px;
+    gap: 18px;
+    height: 100%;
+    width: 100%;
+  }
+
+  .asr-glass {
+    background: var(--asr-glass);
+    border: 1px solid var(--asr-glass-border);
+    border-radius: 12px;
+    box-shadow: var(--asr-shadow);
+    backdrop-filter: blur(28px) saturate(160%);
+    -webkit-backdrop-filter: blur(28px) saturate(160%);
+  }
+
+  .asr-sidebar,
+  .asr-main,
+  .asr-drawer {
+    display: flex;
+    min-height: 0;
+    flex-direction: column;
+  }
+
+  .asr-sidebar,
+  .asr-drawer {
+    gap: 16px;
+    overflow: auto;
+    padding: 18px;
+  }
+
+  .asr-main {
+    gap: 16px;
+    overflow: hidden;
+  }
+
+  .asr-muted {
+    color: var(--asr-muted);
+  }
+
+  .asr-tiny {
+    font-size: 11px;
+    line-height: 1.35;
+    letter-spacing: 0;
+  }
+
+  .asr-small {
+    font-size: 12px;
+    line-height: 1.45;
+    letter-spacing: 0;
+  }
+
+  .asr-label {
+    font-size: 11px;
+    font-weight: 800;
+    line-height: 1.2;
+    letter-spacing: 0.09em;
+    text-transform: uppercase;
+    margin: 0 0 4px;
+  }
+
+  .asr-title .asr-brand-sub {
+    margin: 4px 0 0;
+    color: var(--asr-muted);
+    font-size: 11px;
+    font-weight: 800;
+    letter-spacing: 0.09em;
+    line-height: 1.236;
+  }
+
+  .asr-root .material-symbols-outlined {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    overflow: hidden;
+    font-size: 18px;
+    line-height: 1;
+    vertical-align: middle;
+    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
+  }
+
+  .asr-brand,
+  .asr-section-head,
+  .asr-mini-row,
+  .asr-card-head,
+  .asr-card-actions,
+  .asr-topbar,
+  .asr-toolbar,
+  .asr-market-head {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 0;
+  }
+
+  .asr-brand {
+    padding-bottom: 14px;
+    border-bottom: 1px solid var(--asr-line);
+    gap: 10px;
+  }
+
+  .asr-section-head,
+  .asr-mini-row,
+  .asr-topbar,
+  .asr-market-head {
+    justify-content: space-between;
+  }
+
+  .asr-brand-mark,
+  .asr-icon-tile,
+  .asr-agent-logo,
+  .asr-icon-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+  }
+
+  .asr-brand-mark {
+    width: 38px;
+    height: 38px;
+    display: grid;
+    place-items: center;
+    flex: 0 0 auto;
+    color: var(--white);
+    font-size: 16px;
+    font-weight: 900;
+    line-height: 1;
+    border-radius: 10px;
+    background: linear-gradient(135deg, var(--asr-blue), var(--asr-cyan));
+    box-shadow: 0 10px 22px var(--brand-glow);
+  }
+
+  .asr-truncate {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .asr-stack,
+  .asr-nav-list,
+  .asr-category-list,
+  .asr-tool-list,
+  .asr-activity-list {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .asr-nav-item,
+  .asr-category-button,
+  .asr-tool-row,
+  .asr-activity-row,
+  .asr-metric-card {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-width: 0;
+    padding: 10px;
+    border: 1px solid var(--asr-glass-border);
+    border-radius: 12px;
+    background: var(--asr-glass);
+    color: var(--asr-ink);
+  }
+
+  .asr-active {
+    border-color: rgba(23, 105, 232, 0.25);
+    background: rgba(23, 105, 232, 0.12);
+    color: var(--asr-blue);
+  }
+
+  .asr-nav-item {
+    width: 100%;
+    text-align: left;
+  }
+
+  .asr-category-button {
+    width: 100%;
+    justify-content: space-between;
+    text-align: left;
+  }
+
+  .asr-icon-tile,
+  .asr-agent-logo {
+    width: 34px;
+    height: 34px;
+    color: var(--asr-blue);
+    border-radius: 10px;
+    background: rgba(23, 105, 232, 0.12);
+  }
+
+  .asr-agent-logo {
+    width: 40px;
+    height: 40px;
+  }
+
+  .asr-cyan {
+    color: var(--asr-cyan);
+    background: rgba(8, 167, 207, 0.15);
+  }
+
+  .asr-purple {
+    color: var(--asr-purple);
+    background: rgba(116, 87, 232, 0.15);
+  }
+
+  .asr-green {
+    color: var(--asr-green);
+    background: rgba(29, 155, 103, 0.15);
+  }
+
+  .asr-blue {
+    color: var(--asr-blue);
+    background: rgba(23, 105, 232, 0.12);
+  }
+
+  .asr-pill,
+  .asr-tag {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    min-height: 24px;
+    padding: 4px 9px;
+    border: 1px solid rgba(23, 105, 232, 0.2);
+    border-radius: 999px;
+    background: rgba(23, 105, 232, 0.1);
+    color: var(--asr-blue);
+    font-size: 11px;
+    font-weight: 800;
+    line-height: 1;
+    white-space: nowrap;
+  }
+
+  .asr-pill-cyan,
+  .asr-tag-cyan {
+    border-color: rgba(8, 167, 207, 0.25);
+    background: rgba(8, 167, 207, 0.15);
+    color: var(--asr-cyan);
+  }
+
+  .asr-pill-purple,
+  .asr-tag-purple {
+    border-color: rgba(116, 87, 232, 0.25);
+    background: rgba(116, 87, 232, 0.15);
+    color: var(--asr-purple);
+  }
+
+  .asr-pill-green {
+    border-color: rgba(29, 155, 103, 0.25);
+    background: rgba(29, 155, 103, 0.15);
+    color: var(--asr-green);
+  }
+
+  .asr-status-dot {
+    display: inline-flex;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--asr-green);
+    box-shadow: 0 0 0 4px rgba(29, 155, 103, 0.2);
+  }
+
+  .asr-sidebar-card {
+    margin-top: auto;
+    padding: 12px;
+  }
+
+  .asr-progress {
+    width: 100%;
+    height: 7px;
+    overflow: hidden;
+    border-radius: 999px;
+    background: rgba(23, 105, 232, 0.12);
+  }
+
+  .asr-progress span {
+    display: block;
+    height: 100%;
+    border-radius: inherit;
+    background: linear-gradient(90deg, var(--asr-blue), var(--asr-cyan), var(--asr-purple));
+  }
+
+  .asr-topbar {
+    min-height: 104px;
+    padding: 18px 20px;
+  }
+
+  .asr-toolbar {
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    margin-left: auto;
+  }
+
+  .asr-search {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: min(340px, 100%);
+    min-height: 38px;
+    padding: 8px 11px;
+    border: 1px solid var(--asr-glass-border);
+    border-radius: 10px;
+    background: rgba(255,255,255,0.08);
+    color: var(--asr-muted);
+  }
+
+  .asr-search input {
+    width: 100%;
+    min-width: 0;
+    padding: 0;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    color: var(--asr-ink);
+  }
+
+  .asr-select {
+    min-height: 38px;
+    padding: 8px 34px 8px 11px;
+    border: 1px solid var(--asr-glass-border);
+    border-radius: 8px;
+    outline: 0;
+    background: rgba(255,255,255,0.08);
+    color: var(--asr-ink);
+    font-size: 12px;
+    font-weight: 800;
+  }
+
+  .asr-button,
+  .asr-icon-button {
+    border: 1px solid rgba(23, 105, 232, 0.2);
+    border-radius: 8px;
+    background: rgba(255,255,255,0.08);
+    color: var(--asr-ink);
+    box-shadow: none;
+  }
+
+  .asr-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    min-height: 38px;
+    padding: 9px 12px;
+    font-size: 12px;
+    font-weight: 800;
+    line-height: 1;
+    white-space: nowrap;
+  }
+
+  .asr-primary {
+    border-color: transparent;
+    color: var(--white);
+    background: linear-gradient(135deg, var(--asr-blue), var(--asr-cyan));
+    box-shadow: var(--asr-shadow);
+  }
+
+  .asr-button-success {
+    background: linear-gradient(135deg, var(--asr-green), var(--asr-cyan));
+  }
+
+  .asr-ghost,
+  .asr-icon-button {
+    box-shadow: none;
+  }
+
+  .asr-button:disabled,
+  .asr-icon-button:disabled {
+    opacity: 0.62;
+  }
+
+  .asr-icon-button {
+    width: 34px;
+    height: 34px;
+    padding: 0;
+  }
+
+  .asr-is-favorite,
+  .asr-is-favorite .material-symbols-outlined {
+    color: var(--white);
+    border-color: transparent;
+    background: linear-gradient(135deg, var(--asr-purple), var(--asr-blue));
+    font-variation-settings: "FILL" 1, "wght" 600, "GRAD" 0, "opsz" 24;
+  }
+
+  .asr-stats {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(120px, 1fr));
+    gap: 10px;
+  }
+
+  .asr-metric-card {
+    align-items: flex-start;
+    padding: 12px;
+  }
+
+  .asr-metric-card strong {
+    display: block;
+    margin-bottom: 4px;
+    font-size: 20px;
+    line-height: 1;
+  }
+
+  .asr-market {
+    display: flex;
+    min-height: 0;
+    flex-direction: column;
+    gap: 12px;
+    overflow: hidden;
+    padding: 16px;
+  }
+
+  .asr-filter-summary {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    gap: 8px;
+    min-width: 0;
+  }
+
+  .asr-agent-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(230px, 1fr));
+    grid-auto-rows: auto;
+    gap: 20px;
+    overflow: auto;
+    padding: 2px 4px 10px 2px;
+  }
+
+  .asr-agent-card {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 15px;
+    border-radius: 12px;
+    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
+  }
+
+  .asr-agent-card:hover {
+    transform: translateY(-2px);
+    border-color: rgba(23, 105, 232, 0.35);
+    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.2);
+  }
+
+  .asr-card-head {
+    align-items: flex-start;
+    justify-content: space-between;
+  }
+
+  .asr-card-title {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .asr-card-copy {
+    min-height: 58px;
+    color: var(--asr-muted);
+    font-size: 13px;
+    line-height: 1.45;
+  }
+
+  .asr-tag-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  .asr-card-actions {
+    justify-content: space-between;
+    margin-top: auto;
+  }
+
+  .asr-card-actions .asr-button {
+    flex: 1;
+  }
+
+  .asr-installed {
+    border-color: rgba(29, 155, 103, 0.28);
+  }
+
+  .asr-empty-state,
+  .asr-drawer-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 240px;
+    flex-direction: column;
+    gap: 12px;
+    padding: 28px;
+    border: 1px dashed rgba(23, 105, 232, 0.3);
+    border-radius: 12px;
+    background: var(--asr-glass);
+    text-align: center;
+  }
+
+  .asr-drawer-empty {
+    flex: 1;
+    min-height: 0;
+  }
+
+  .asr-drawer-header {
+    display: flex;
+    justify-content: space-between;
+    gap: 12px;
+    padding-bottom: 14px;
+    border-bottom: 1px solid var(--asr-line);
+  }
+
+  .asr-drawer-hero {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .asr-drawer-hero .asr-agent-logo {
+    width: 44px;
+    height: 44px;
+  }
+
+  .asr-tool-row,
+  .asr-activity-row {
+    align-items: flex-start;
+    background: var(--asr-glass);
+  }
+
+  .asr-confirm-bar {
+    position: fixed;
+    left: 50%;
+    bottom: 22px;
+    z-index: 5;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    width: min(560px, calc(100vw - 44px));
+    padding: 12px 14px;
+    transform: translateX(-50%);
+  }
+
+  @media (max-width: 1180px) {
+    .asr-workspace {
+      grid-template-columns: 220px minmax(0, 1fr);
+    }
+
+    .asr-drawer {
+      display: none;
+    }
+
+    .asr-agent-grid {
+      grid-template-columns: repeat(2, minmax(230px, 1fr));
+    }
+  }
+
+  @media (max-width: 820px) {
+    .asr-root {
+      overflow: auto;
+    }
+
+    .asr-page {
+      height: auto;
+      min-height: 100vh;
+      padding: 14px;
+    }
+
+    .asr-workspace {
+      display: flex;
+      height: auto;
+      flex-direction: column;
+    }
+
+    .asr-topbar,
+    .asr-market-head {
+      align-items: flex-start;
+      flex-direction: column;
+    }
+
+    .asr-filter-summary {
+      justify-content: flex-start;
+    }
+
+    .asr-toolbar,
+    .asr-search {
+      width: 100%;
+    }
+
+    .asr-stats,
+    .asr-agent-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .asr-market,
+    .asr-agent-grid {
+      overflow: visible;
+    }
+  }
+
+  [data-theme="dark"] .asr-root {
+    --asr-bg: #0f1117;
+    --asr-bg-soft: #0d1117;
+    --asr-ink: #e1e4e8;
+    --asr-muted: #8b949e;
+    --asr-line: rgba(48, 54, 61, 0.4);
+    --asr-blue: #1769e8;
+    --asr-cyan: #08a7cf;
+    --asr-purple: #a78bfa;
+    --asr-green: #3fb950;
+    --asr-glass: rgba(22, 27, 34, 0.8);
+    --asr-glass-border: rgba(48, 54, 61, 0.6);
+    --asr-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
+    background:
+      radial-gradient(circle at 18% 12%, rgba(8, 167, 207, 0.1), transparent 28%),
+      radial-gradient(circle at 82% 8%, rgba(116, 87, 232, 0.1), transparent 30%),
+      linear-gradient(135deg, var(--asr-bg-soft), var(--asr-bg));
+  }
+`;
+
+export default AgentSquarePageInteractive;
diff --git a/app/web/src/pages/group-workspace/GroupWorkspacePage.module.css b/app/web/src/pages/group-workspace/GroupWorkspacePage.module.css
index 11a06d9e..fd9e6357 100644
--- a/app/web/src/pages/group-workspace/GroupWorkspacePage.module.css
+++ b/app/web/src/pages/group-workspace/GroupWorkspacePage.module.css
@@ -1,230 +1,788 @@
-/* GroupWorkspacePage styles */
-.pageRoot { position: relative; min-height: 100vh; }
+/* ═══════════════════════════════════════════════════════════════
+   GroupWorkspacePage — CSS Module
+   3-column: nav (248px) | main (1fr) | right (340px)
+   Tokens only: no hardcoded hex/px font-sizes/weights.
+   ═══════════════════════════════════════════════════════════════ */
+
+/* ── Page ──────────────────────────────────────────────── */
+.page {
+  position: relative;
+  min-height: 100vh;
+  padding: 22px;
+  overflow: hidden;
+  color: var(--foreground);
+  background:
+    radial-gradient(circle at 18% 12%, oklch(0.60 0.12 230 / 0.12), transparent 28%),
+    radial-gradient(circle at 82% 8%, oklch(0.21 0.006 286 / 0.10), transparent 30%),
+    linear-gradient(135deg, var(--background), var(--secondary));
+}
 
-/* Internal content layout */
-.mainContent {
+/* ── Shell ─────────────────────────────────────────────── */
+.shell {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: 248px minmax(0, 1fr) 340px;
+  gap: 18px;
+  max-width: 1440px;
+  height: calc(100vh - 44px);
+  margin: 0 auto;
+}
+
+/* ── Glass Panel ──────────────────────────────────────── */
+.glass {
+  background: oklch(1 0 0 / 0.72);
+  border: 1px solid oklch(1 0 0 / 0.70);
+  border-radius: var(--radius-xl);
+  box-shadow: 0 18px 48px oklch(0.14 0.005 260 / 0.14);
+  backdrop-filter: blur(28px) saturate(160%);
+}
+
+/* ── Side / Right panels ──────────────────────────────── */
+.side,
+.right {
   display: flex;
   flex-direction: column;
-  gap: 16px;
-  flex: 1;
+  gap: var(--space-lg);
+  padding: 18px;
+  overflow: auto;
   min-height: 0;
+}
+
+/* ── Main area ─────────────────────────────────────────── */
+.main {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
   overflow: hidden;
+  min-height: 0;
 }
 
-/* Header row */
-.topHeader {
+/* ── Top Header ────────────────────────────────────────── */
+.top {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 18px;
   min-height: 96px;
   padding: 18px 20px;
-  border: 1px solid rgba(255,255,255,0.7);
-  border-radius: 12px;
-  background: rgba(255,255,255,0.72);
-  backdrop-filter: blur(28px);
   flex-shrink: 0;
 }
 
-.topTitle { min-width: 0; }
-.topEyebrow { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted-foreground); margin: 0 0 4px; }
-.topHeading { font-size: 24px; font-weight: 700; line-height: 1.15; margin: 0; color: var(--foreground); }
-.topDesc { font-size: 12px; color: var(--muted-foreground); margin: 4px 0 0; }
+/* ── Title ─────────────────────────────────────────────── */
+.eyebrow {
+  margin: 0 0 4px;
+  color: var(--muted-foreground);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+}
 
-.topActions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.title h1 {
+  margin: 0;
+  font-size: var(--font-size-base);
+  line-height: 1.15;
+}
 
-/* Search mock */
-.searchMock {
-  display: flex; align-items: center; gap: 8px;
-  width: min(320px, 100%); min-height: 38px;
-  padding: 9px 11px; border: 1px solid rgba(255,255,255,0.68);
-  border-radius: 10px; background: rgba(255,255,255,0.58);
-  color: var(--muted-foreground); font-size: 12px;
+.title h2 {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-tight);
 }
 
-/* Stats */
-.stats { display: grid; grid-template-columns: repeat(4, minmax(92px, 1fr)); gap: 10px; flex-shrink: 0; }
-.statCard {
-  padding: 14px; border: 1px solid rgba(255,255,255,0.7); border-radius: 12px;
-  background: rgba(255,255,255,0.72); backdrop-filter: blur(28px);
+.title h3 {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-tight);
 }
-.statValue { display: block; font-size: 20px; font-weight: 700; color: var(--foreground); line-height: 1; margin-bottom: 4px; }
-.statLabel { font-size: 12px; color: var(--muted-foreground); }
 
-/* Confirmation bar */
-.confirmBar {
-  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
-  padding: 12px 14px; border: 1px solid rgba(23,105,232,0.16); border-radius: 12px;
-  background: rgba(255,255,255,0.64); flex-shrink: 0;
+.title p {
+  margin: 0;
 }
-.confirmSuccess { border-color: rgba(31,155,100,0.2); background: rgba(31,155,100,0.1); }
-.confirmWarning { border-color: rgba(217,122,23,0.22); background: rgba(217,122,23,0.1); }
-.confirmTitle { font-weight: 700; font-size: 13px; color: var(--foreground); }
-.confirmDetail { font-size: 12px; color: var(--muted-foreground); margin: 2px 0 0; }
 
-/* Internal 2-column */
-.contentGrid {
-  display: grid;
-  grid-template-columns: minmax(0, 1.25fr) minmax(290px, 0.75fr);
-  gap: 16px; flex: 1; min-height: 0; overflow: hidden;
+/* ── Text helpers ──────────────────────────────────────── */
+.textSmall {
+  color: var(--muted-foreground);
+  font-size: var(--font-size-xs);
+  line-height: var(--line-height-normal);
 }
 
-.glassPanel {
-  border: 1px solid rgba(255,255,255,0.7); border-radius: 12px;
-  background: rgba(255,255,255,0.72); backdrop-filter: blur(28px);
-  padding: 16px; overflow: hidden; display: flex; flex-direction: column;
+.textTiny {
+  color: var(--muted-foreground);
+  font-size: var(--font-size-xs);
+  line-height: var(--line-height-tight);
 }
 
-/* Board */
-.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; height: calc(100% - 36px); min-height: 0; }
+.truncate {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
-.lane {
-  display: flex; flex-direction: column; gap: 10px; padding: 12px; overflow: auto;
-  border: 1px solid rgba(143,160,190,0.14); border-radius: 12px; background: rgba(255,255,255,0.4);
+.spacer {
+  flex: 1 1 auto;
+}
+
+/* ── Brand ─────────────────────────────────────────────── */
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding-bottom: 14px;
+  border-bottom: 1px solid var(--border);
+}
+
+.mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  flex: 0 0 auto;
+  border-radius: 10px;
+  background: linear-gradient(135deg, var(--brand), var(--info));
+  color: var(--primary-foreground);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  box-shadow: 0 10px 22px oklch(0.55 0.16 255 / 0.24);
 }
 
-.laneTitle { font-size: 13px; font-weight: 700; margin: 0; }
+/* ── Section ───────────────────────────────────────────── */
+.section {
+  display: flex;
+  flex-direction: column;
+}
 
-.taskCard {
-  display: flex; flex-direction: column; gap: 10px; padding: 12px;
-  border: 1px solid rgba(255,255,255,0.62); border-radius: 12px;
-  background: rgba(255,255,255,0.68); box-shadow: 0 10px 26px rgba(26,40,80,0.08);
+.sectionHead {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: var(--space-md);
 }
-.taskCard h3 { margin: 0; font-size: 13px; }
-.taskCard p { margin: 0; font-size: 12px; color: var(--muted-foreground); }
 
-.progress { width: 100%; height: 7px; overflow: hidden; border-radius: 999px; background: rgba(23,105,232,0.11); }
-.progressFill { display: block; height: 100%; border-radius: inherit; background: var(--primary); transition: width 220ms ease; }
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
 
-/* Feed */
-.feed { display: flex; flex-direction: column; gap: 14px; }
-.feedTitle { margin: 0; font-size: 15px; font-weight: 700; }
-.feedEyebrow { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted-foreground); margin: 0 0 4px; }
+/* ── Nav Item ──────────────────────────────────────────── */
+.nav {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  padding: 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xl);
+  background: var(--card);
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
 
-.activityList { display: flex; flex-direction: column; gap: 10px; overflow: auto; padding-right: 4px; flex: 1; }
+.navActive {
+  border-color: oklch(0.55 0.16 255 / 0.20);
+  background: oklch(0.55 0.16 255 / 0.10);
+}
 
-.activityRow {
-  display: flex; align-items: flex-start; gap: 10px; padding: 10px;
-  border: 1px solid rgba(255,255,255,0.62); border-radius: 12px; background: rgba(255,255,255,0.46);
+.nav strong {
+  font-weight: var(--font-weight-medium);
 }
-.activityRow strong { font-size: 13px; font-weight: 700; }
-.activityRowDesc { font-size: 12px; color: var(--muted-foreground); margin: 2px 0 0; }
-.activityTime { font-size: 11px; color: var(--muted-foreground); }
 
+/* ── Accent Icon ───────────────────────────────────────── */
 .accentIcon {
-  width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
-  border-radius: 9px; color: var(--primary); background: rgba(23,105,232,0.1); font-size: 14px; font-weight: 900;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  flex: 0 0 auto;
+  border-radius: 9px;
+  background: oklch(0.55 0.16 255 / 0.10);
+  color: var(--brand);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
 }
-.accentCyan { color: #087f9e; background: rgba(8,167,207,0.11); }
-.accentPurple { color: #6044d7; background: rgba(116,87,232,0.11); }
-.accentTeal { color: #15746f; background: rgba(15,159,154,0.11); }
 
-/* Composer */
-.composer {
-  display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding: 12px;
-  border: 1px solid rgba(255,255,255,0.68); border-radius: 12px; background: rgba(255,255,255,0.56);
+.accentIconCyan {
+  background: oklch(0.60 0.12 230 / 0.11);
+  color: var(--info);
 }
-.composer textarea {
-  width: 100%; min-height: 54px; resize: none; padding: 10px;
-  border: 1px solid rgba(143,160,190,0.18); border-radius: 10px; outline: 0;
-  background: rgba(255,255,255,0.48); color: var(--foreground); font: inherit;
+
+.accentIconPurple {
+  background: oklch(0.21 0.006 286 / 0.11);
+  color: var(--primary);
 }
-.composerHint { font-size: 11px; color: var(--muted-foreground); }
 
-/* Sidebar: custom */
-.sidebarSection { margin-bottom: 16px; }
-.sidebarSectionTitle { font-size: 13px; font-weight: 700; margin: 0 0 10px; }
+.accentIconTeal {
+  background: oklch(0.58 0.18 150 / 0.11);
+  color: var(--success);
+}
 
-.sidebarNav {
-  display: flex; align-items: center; gap: 10px; padding: 10px;
-  border: 1px solid rgba(255,255,255,0.68); border-radius: 12px;
-  background: rgba(255,255,255,0.46); color: inherit;
-  font: inherit; text-align: left; width: 100%; cursor: pointer;
+/* ── Member ────────────────────────────────────────────── */
+.member {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  padding: 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xl);
+  background: var(--card);
+  cursor: pointer;
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+  text-align: left;
+  width: 100%;
 }
-.sidebarNavActive { border-color: rgba(23,105,232,0.2); background: rgba(23,105,232,0.1); }
 
-.memberItem {
-  display: flex; align-items: center; gap: 10px; padding: 10px;
-  border: 1px solid rgba(255,255,255,0.68); border-radius: 12px;
-  background: rgba(255,255,255,0.46); color: inherit;
-  font: inherit; text-align: left; width: 100%; cursor: pointer;
+.member strong {
+  font-weight: var(--font-weight-medium);
 }
 
-/* Member avatar */
-.memberAvatar {
-  position: relative; width: 34px; height: 34px; flex-shrink: 0;
-  display: flex; align-items: center; justify-content: center;
-  border: 2px solid rgba(255,255,255,0.82); border-radius: 50%;
+/* ── Avatar ────────────────────────────────────────────── */
+.avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  flex: 0 0 auto;
+  border: 2px solid oklch(1 0 0 / 0.82);
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--brand), var(--info));
+  color: var(--primary-foreground);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  box-shadow: 0 8px 20px oklch(0.55 0.16 255 / 0.16);
+}
+
+.avatar::after {
+  content: "";
+  position: absolute;
+  right: -1px;
+  bottom: 0;
+  width: 9px;
+  height: 9px;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  background: var(--success);
+}
+
+.avatarBusy::after {
+  background: var(--warning);
+}
+
+.avatarOffline::after {
+  background: var(--muted-foreground);
+}
+
+.avatarPurple {
+  background: linear-gradient(135deg, var(--primary), oklch(0.60 0.12 230));
+}
+
+.avatarTeal {
+  background: linear-gradient(135deg, var(--success), var(--info));
+}
+
+.avatarCyan {
+  background: linear-gradient(135deg, var(--info), oklch(0.70 0.15 230));
+}
+
+/* ── Filters ───────────────────────────────────────────── */
+.filters {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 6px;
+}
+
+.filter {
+  min-height: 30px;
+  padding: 7px 8px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  background: var(--card);
+  color: var(--muted-foreground);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.filterActive {
+  border-color: oklch(0.55 0.16 255 / 0.22);
+  background: oklch(0.55 0.16 255 / 0.10);
+  color: var(--brand);
+}
+
+/* ── Pill ──────────────────────────────────────────────── */
+.pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 24px;
+  padding: 5px 9px;
+  border: 1px solid oklch(0.55 0.16 255 / 0.13);
+  border-radius: var(--radius-full);
+  background: oklch(0.55 0.16 255 / 0.08);
+  color: var(--brand);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  white-space: nowrap;
+}
+
+.pillCyan {
+  border-color: oklch(0.60 0.12 230 / 0.18);
+  background: oklch(0.60 0.12 230 / 0.10);
+  color: var(--info);
+}
+
+.pillPurple {
+  border-color: oklch(0.21 0.006 286 / 0.18);
+  background: oklch(0.21 0.006 286 / 0.10);
+  color: var(--primary);
+}
+
+.pillGreen {
+  border-color: oklch(0.58 0.18 150 / 0.20);
+  background: oklch(0.58 0.18 150 / 0.11);
+  color: var(--success);
+}
+
+/* ── Dot ───────────────────────────────────────────────── */
+.dot {
+  display: inline-flex;
+  width: 8px;
+  height: 8px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  background: var(--success);
+  box-shadow: 0 0 0 4px oklch(0.58 0.18 150 / 0.12);
+}
+
+.dotCyan {
+  background: var(--info);
+  box-shadow: 0 0 0 4px oklch(0.60 0.12 230 / 0.13);
+}
+
+.dotPurple {
   background: var(--primary);
-  color: #fff; font-size: 12px; font-weight: 800;
-  box-shadow: 0 8px 20px rgba(23,105,232,0.16);
+  box-shadow: 0 0 0 4px oklch(0.21 0.006 286 / 0.13);
 }
-.memberAvatar::after {
-  content: ''; position: absolute; right: -1px; bottom: 0;
-  width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%;
-  background: #25c06d;
+
+/* ── Search ────────────────────────────────────────────── */
+.searchBox {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  width: min(320px, 100%);
+  min-height: 38px;
+  padding: 9px 11px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--card);
+  color: var(--muted-foreground);
+  font-size: var(--font-size-xs);
 }
-.avatarBusy::after { background: #d97817; }
-.avatarOffline::after { background: #95a2b8; }
-.avatarPurple { background: #7457e8; }
-.avatarTeal { background: #0f9f9a; }
-.avatarCyan { background: #08a7cf; }
 
-/* Member filters */
-.filterRow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
-.filterBtn {
-  min-height: 30px; padding: 7px 8px; border: 1px solid rgba(23,105,232,0.12); border-radius: 8px;
-  background: rgba(255,255,255,0.48); color: var(--muted-foreground);
-  font-size: 11px; font-weight: 800; cursor: pointer; font: inherit;
+/* ── Buttons ───────────────────────────────────────────── */
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-sm);
+  min-height: 36px;
+  padding: 9px var(--space-md);
+  border: 1px solid oklch(0.55 0.16 255 / 0.14);
+  border-radius: var(--radius-lg);
+  background: var(--card);
+  color: var(--foreground);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  box-shadow: 0 8px 18px oklch(0.14 0.005 260 / 0.08);
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.buttonPrimary {
+  border-color: transparent;
+  background: linear-gradient(135deg, var(--brand), var(--info));
+  color: var(--primary-foreground);
+  box-shadow: 0 10px 22px oklch(0.55 0.16 255 / 0.23);
 }
-.filterBtnActive { border-color: rgba(23,105,232,0.22); background: rgba(23,105,232,0.1); color: #1459c7; }
 
-/* Stack layout */
-.stack { display: flex; flex-direction: column; gap: 10px; }
-.sectionHead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
-.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
+.buttonWarning {
+  border-color: oklch(0.70 0.18 85 / 0.20);
+  background: oklch(0.70 0.18 85 / 0.10);
+  color: var(--warning-foreground);
+}
 
-/* Workspace health */
-.healthCard {
-  margin-top: auto; padding: 14px; border: 1px solid rgba(255,255,255,0.68);
-  border-radius: 12px; background: rgba(255,255,255,0.52);
+.button:disabled {
+  cursor: not-allowed;
+  opacity: 0.54;
+  box-shadow: none;
 }
-.healthText { font-size: 12px; color: var(--muted-foreground); margin: 4px 0 0; }
 
-/* Drawer sections */
-.drawerSection { display: flex; flex-direction: column; gap: 10px; }
-.approvalCard {
-  display: flex; flex-direction: column; gap: 12px; padding: 14px;
-  border: 1px solid rgba(23,105,232,0.16); border-radius: 12px;
-  background: rgba(37, 37, 45, 0.72);
+.iconBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 1px solid oklch(0.55 0.16 255 / 0.14);
+  border-radius: var(--radius-lg);
+  background: var(--card);
+  color: var(--foreground);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  box-shadow: 0 8px 18px oklch(0.14 0.005 260 / 0.08);
+  cursor: pointer;
 }
-.syncCard {
-  display: flex; flex-direction: column; gap: 12px; padding: 14px;
-  border: 1px solid rgba(255,255,255,0.68); border-radius: 12px;
-  background: rgba(255,255,255,0.52);
+
+.iconBtn:disabled {
+  cursor: not-allowed;
+  opacity: 0.54;
+  box-shadow: none;
 }
 
-.checkRow { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; }
-.checkRow + .checkRow { border-top: 1px solid rgba(143,160,190,0.22); }
+.iconBtn svg {
+  width: 14px;
+  height: 14px;
+}
 
-.dot { display: inline-flex; width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: #1f9b64; box-shadow: 0 0 0 4px rgba(31,155,100,0.12); margin-top: 5px; }
-.dotCyan { background: #08a7cf; box-shadow: 0 0 0 4px rgba(8,167,207,0.13); }
-.dotPurple { background: #7457e8; box-shadow: 0 0 0 4px rgba(116,87,232,0.13); }
+/* ── Actions ───────────────────────────────────────────── */
+.actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+  flex-wrap: wrap;
+}
 
-.fileRow {
-  display: flex; align-items: flex-start; gap: 10px; padding: 10px;
-  border: 1px solid rgba(255,255,255,0.68); border-radius: 12px; background: rgba(255,255,255,0.46);
+/* ── Stats ─────────────────────────────────────────────── */
+.stats {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(92px, 1fr));
+  gap: 10px;
 }
-.fileRow strong { font-size: 13px; font-weight: 700; }
-.fileRowDesc { font-size: 11px; color: var(--muted-foreground); margin: 2px 0 0; }
-.fileSize { font-size: 11px; color: var(--muted-foreground); white-space: nowrap; }
 
-.emptyHint { padding: 12px; border: 1px dashed rgba(143,160,190,0.32); border-radius: 10px; background: rgba(255,255,255,0.34); color: var(--muted-foreground); font-size: 12px; }
+.stat {
+  padding: var(--space-md);
+}
 
+.stat strong {
+  display: block;
+  margin-bottom: 4px;
+  font-size: var(--font-size-base);
+  line-height: 1;
+}
+
+/* ── Confirmation ──────────────────────────────────────── */
+.confirmation {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-md);
+  padding: var(--space-md) 14px;
+  border: 1px solid oklch(0.55 0.16 255 / 0.16);
+  border-radius: var(--radius-xl);
+  background: var(--card);
+  box-shadow: 0 12px 28px oklch(0.14 0.005 260 / 0.10);
+}
+
+.confirmation strong {
+  font-weight: var(--font-weight-medium);
+}
+
+.confirmationSuccess {
+  border-color: oklch(0.58 0.18 150 / 0.20);
+  background: oklch(0.58 0.18 150 / 0.10);
+}
+
+.confirmationWarning {
+  border-color: oklch(0.70 0.18 85 / 0.22);
+  background: oklch(0.70 0.18 85 / 0.10);
+}
+
+/* ── Content Area ──────────────────────────────────────── */
+.content {
+  display: grid;
+  grid-template-columns: minmax(0, 1.25fr) minmax(290px, 0.75fr);
+  gap: var(--space-lg);
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* ── Column / Feed ─────────────────────────────────────── */
+.column,
+.feed {
+  padding: var(--space-lg);
+  overflow: hidden;
+  min-height: 0;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+}
+
+.feed {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+/* ── Board ─────────────────────────────────────────────── */
+.board {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--space-md);
+  height: calc(100% - 36px);
+  min-height: 0;
+}
+
+.lane {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: var(--space-md);
+  overflow: auto;
+  border: 1px solid oklch(0.55 0.012 260 / 0.14);
+  border-radius: var(--radius-xl);
+  background: oklch(1 0 0 / 0.40);
+}
+
+.laneTitle {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-tight);
+}
+
+/* ── Card ──────────────────────────────────────────────── */
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: var(--space-md);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xl);
+  background: var(--card);
+  box-shadow: 0 10px 26px oklch(0.14 0.005 260 / 0.08);
+}
+
+.card h3 {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-tight);
+}
+
+.card p {
+  margin: 0;
+}
+
+/* ── Progress Bar ──────────────────────────────────────── */
+.progress {
+  width: 100%;
+  height: 7px;
+  overflow: hidden;
+  border-radius: var(--radius-full);
+  background: oklch(0.55 0.16 255 / 0.11);
+}
+
+.progressFill {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, var(--brand), var(--info), var(--primary));
+  transition: width 220ms var(--ease-standard);
+}
+
+/* ── Activity List ─────────────────────────────────────── */
+.activityList {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  overflow: auto;
+  padding-right: 4px;
+}
+
+.activity {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  min-width: 0;
+  padding: 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xl);
+  background: var(--card);
+}
+
+.activity strong {
+  font-weight: var(--font-weight-medium);
+}
+
+/* ── Composer ──────────────────────────────────────────── */
+.composer {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: auto;
+  padding: var(--space-md);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xl);
+  background: var(--card);
+}
+
+.composer textarea {
+  width: 100%;
+  min-height: 54px;
+  resize: none;
+  padding: 10px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  outline: 0;
+  background: var(--background);
+  color: var(--foreground);
+  font-family: inherit;
+  font-size: var(--font-size-sm);
+}
+
+.composer textarea::placeholder {
+  color: var(--muted-foreground);
+}
+
+/* ── Empty ─────────────────────────────────────────────── */
+.empty {
+  padding: var(--space-md);
+  border: 1px dashed var(--border);
+  border-radius: 10px;
+  background: oklch(1 0 0 / 0.34);
+  color: var(--muted-foreground);
+  font-size: var(--font-size-xs);
+  line-height: var(--line-height-normal);
+}
+
+/* ── Approval ──────────────────────────────────────────── */
+.approval {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+  padding: 14px;
+  border: 1px solid oklch(0.55 0.16 255 / 0.16);
+  border-radius: var(--radius-xl);
+  background: linear-gradient(135deg, oklch(0.55 0.16 255 / 0.10), oklch(0.60 0.12 230 / 0.08));
+}
+
+/* ── Sync ──────────────────────────────────────────────── */
+.sync {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+  padding: 14px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xl);
+  background: var(--card);
+}
+
+/* ── Checks ────────────────────────────────────────────── */
+.checks {
+  display: flex;
+  flex-direction: column;
+}
+
+.check {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 9px 0;
+}
+
+.check + .check {
+  border-top: 1px solid var(--border);
+}
+
+.check strong {
+  font-weight: var(--font-weight-medium);
+}
+
+/* ── File Item ─────────────────────────────────────────── */
+.fileItem {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  min-width: 0;
+  padding: 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xl);
+  background: var(--card);
+}
+
+.fileItem strong {
+  font-weight: var(--font-weight-medium);
+}
+
+/* ── Responsive ────────────────────────────────────────── */
 @media (max-width: 1160px) {
-  .contentGrid { grid-template-columns: minmax(0, 1fr); }
+  .shell {
+    grid-template-columns: 220px minmax(0, 1fr);
+  }
+
+  .right {
+    display: none;
+  }
+
+  .content {
+    grid-template-columns: minmax(0, 1fr);
+  }
 }
+
 @media (max-width: 840px) {
-  .stats, .board { grid-template-columns: 1fr; }
-  .topHeader { flex-direction: column; align-items: flex-start; }
+  .page {
+    min-height: 100vh;
+    overflow: auto;
+    padding: 14px;
+  }
+
+  .shell {
+    display: flex;
+    flex-direction: column;
+    height: auto;
+  }
+
+  .top {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .stats,
+  .board {
+    grid-template-columns: 1fr;
+  }
+
+  .column,
+  .feed,
+  .right {
+    overflow: visible;
+  }
+
+  .right {
+    display: flex;
+  }
 }
diff --git a/app/web/src/pages/group-workspace/GroupWorkspacePage.tsx b/app/web/src/pages/group-workspace/GroupWorkspacePage.tsx
index 17432ed9..4ae69e61 100644
--- a/app/web/src/pages/group-workspace/GroupWorkspacePage.tsx
+++ b/app/web/src/pages/group-workspace/GroupWorkspacePage.tsx
@@ -1,82 +1,28 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState, type KeyboardEvent, type RefObject } from "react";
 import { useTranslation } from 'react-i18next';
-import { Icon, Button, Pill, ProgressBar } from '@shared/ui';
-import { ParticleCanvas } from '@/components/ParticleCanvas';
-import { WebLayout } from '@/components/WebLayout';
-import styles from './GroupWorkspacePage.module.css';
-
-/* ---- inline mock data (static prototype) ---- */
-
-type MockRunner = { id: string; name: string; status: string; capabilities?: string };
-type MockRun = { runId: string; threadId: string; projectId: string; status: string; createdAt: string };
-type MockFile = { path: string; sizeBytes: number; modifiedAt: string };
-
-const mockRunners: MockRunner[] = [
-  { id: 'runner-001', name: 'Xavier Chen', status: 'online', capabilities: 'Code review, Frontend, TypeScript' },
-  { id: 'runner-002', name: 'Security-Core', status: 'online', capabilities: 'Security audit, Vulnerability scan' },
-  { id: 'runner-003', name: 'DB Migrator', status: 'offline', capabilities: 'Database migration, Schema design' },
-  { id: 'runner-004', name: 'Kubernetes Ops', status: 'busy', capabilities: 'K8s, Helm, Docker' },
-];
-
-const mockRuns: MockRun[] = [
-  { runId: 'run_parser_v2', threadId: 'thread-01', projectId: 'proj-legacy', status: 'running', createdAt: '2026-05-24T08:00:00Z' },
-  { runId: 'run_snapshot_sync', threadId: 'thread-02', projectId: 'proj-legacy', status: 'queued', createdAt: '2026-05-24T08:30:00Z' },
-  { runId: 'run_security_audit', threadId: 'thread-03', projectId: 'proj-legacy', status: 'finished', createdAt: '2026-05-24T07:00:00Z' },
-];
-
-const mockWorkspaceFiles: MockFile[] = [
-  { path: 'src/pages/AgentSquare.tsx', sizeBytes: 14 * 1024, modifiedAt: '2026-05-23' },
-  { path: 'src/pages/PrivateChats.tsx', sizeBytes: 18 * 1024, modifiedAt: '2026-05-24' },
-  { path: 'docs/api-spec.md', sizeBytes: 3 * 1024, modifiedAt: '2026-05-22' },
-  { path: 'deploy/helm-values.yaml', sizeBytes: 2 * 1024 * 1024, modifiedAt: '2026-05-20' },
-];
-
-/* ---- Mock Event Stream (static prototype) ---- */
-type StreamEvent = { type: string; payload: Record<string, unknown> };
-
-class MockEventStream {
-  private listeners: Array<(event: StreamEvent) => void> = [];
-  private destroyed = false;
-  on(listener: (event: StreamEvent) => void) {
-    this.listeners.push(listener);
-    return () => { this.listeners = this.listeners.filter((l) => l !== listener); };
-  }
-  emit(event: StreamEvent) {
-    if (this.destroyed) return;
-    this.listeners.forEach((l) => l(event));
-  }
-  destroy() { this.destroyed = true; this.listeners = []; }
-}
-
-function playRunLifecycle(stream: MockEventStream, _opts?: { stepDelayMs?: number }) {
-  const events: StreamEvent[] = [
-    { type: 'run.queued', payload: { runId: 'run_parser_v2', status: 'queued' } },
-    { type: 'run.started', payload: { runId: 'run_parser_v2', status: 'running' } },
-    { type: 'run.output', payload: { runId: 'run_parser_v2', stream: 'stdout', offset: 0, text: 'Analyzing parser logic...' } },
-    { type: 'run.output', payload: { runId: 'run_parser_v2', stream: 'stdout', offset: 1, text: 'Dependencies resolved.' } },
-    { type: 'run.agent.tool_call', payload: { runId: 'run_parser_v2', tool: 'read_file', status: 'completed' } },
-    { type: 'run.finished', payload: { runId: 'run_parser_v2', status: 'finished' } },
-  ];
-  let i = 0;
-  const interval = setInterval(() => {
-    if (i < events.length) { stream.emit(events[i]!); i++; } else { clearInterval(interval); }
-  }, 1200);
-  return () => clearInterval(interval);
-}
-
-/* ---- Types ---- */
+import {
+  mockRunners,
+  mockRuns,
+  mockWorkspaceFiles,
+  getWorkbenchCatalogState,
+  getWorkbenchSectionSource,
+  type Run,
+  type Runner,
+  type WorkbenchSectionSource,
+} from '@shared/index';
+import { useWorkbenchProjection } from '../../hooks/useWorkbenchProjection';
 
-type TaskStatus = 'backlog' | 'active' | 'review';
-type ApprovalState = 'pending' | 'approved' | 'changes';
-type MemberPresence = 'online' | 'busy' | 'offline';
-type MemberFilter = 'all' | MemberPresence;
-type ConfirmationTone = 'info' | 'success' | 'warning';
+type TaskStatus = "backlog" | "active" | "review";
+type ApprovalState = "pending" | "approved" | "changes";
+type MemberPresence = "online" | "busy" | "offline";
+type MemberFilter = "all" | MemberPresence;
+type ConfirmationTone = "info" | "success" | "warning";
 
 type Member = {
   initials: string;
   name: string;
   role: string;
-  accent: 'blue' | 'cyan' | 'purple' | 'teal';
+  accent: "blue" | "cyan" | "purple" | "teal";
   presence: MemberPresence;
 };
 
@@ -94,14 +40,14 @@ type FileItem = {
   name: string;
   detail: string;
   size: string;
-  accent: 'blue' | 'cyan' | 'purple' | 'teal';
+  accent: "blue" | "cyan" | "purple" | "teal";
 };
 
 type ActivityItem = {
   title: string;
   detail: string;
   time: string;
-  accent: 'blue' | 'cyan' | 'purple' | 'teal';
+  accent: "blue" | "cyan" | "purple" | "teal";
 };
 
 type SyncState = {
@@ -118,11 +64,15 @@ type Confirmation = {
   tone: ConfirmationTone;
 };
 
+const accentPalette = ["blue", "purple", "teal", "cyan"] as const;
+const fileAccentPalette = ["cyan", "purple", "teal", "blue"] as const;
+const activityAccentPalette = ["cyan", "purple", "teal"] as const;
+
 const members: Member[] = mockRunners.map((runner, i) => ({
-  initials: runner.name.split(' ').map((w) => w[0]!).join('').toUpperCase().slice(0, 2),
+  initials: runner.name.split(' ').map((w) => w[0]).join('').toUpperCase().slice(0, 2),
   name: runner.name,
   role: runner.capabilities ?? 'No capability info',
-  accent: (['blue', 'purple', 'teal', 'cyan'] as const)[i % 4]!,
+  accent: accentPalette[i % accentPalette.length] ?? "blue",
   presence: (runner.status === 'online' ? 'online' : 'offline') as MemberPresence,
 }));
 
@@ -136,90 +86,919 @@ const baseTasks: WorkspaceTask[] = mockRuns.map((run, i) => ({
   progress: run.status === 'finished' ? 100 : run.status === 'running' ? 65 : 15,
 }));
 
-const initialFiles: FileItem[] = mockWorkspaceFiles.map((f, i) => ({
+const files: FileItem[] = mockWorkspaceFiles.map((f, i) => ({
   name: f.path,
   detail: `${(f.sizeBytes / 1024).toFixed(1)} KB, modified ${f.modifiedAt.slice(0, 10)}`,
   size: f.sizeBytes > 1024 * 1024 ? `${(f.sizeBytes / (1024 * 1024)).toFixed(1)} MB` : `${(f.sizeBytes / 1024).toFixed(1)} KB`,
-  accent: (['cyan', 'purple', 'teal', 'blue'] as const)[i % 4]!,
+  accent: fileAccentPalette[i % fileAccentPalette.length] ?? "cyan",
 }));
 
 const initialActivities: ActivityItem[] = mockRuns.map((run, i) => ({
   title: `${mockRunners[i % mockRunners.length]?.name ?? 'Agent'} — run.${run.status}`,
   detail: `Run on thread ${run.threadId}: ${run.status === 'finished' ? 'Completed successfully' : run.status === 'running' ? 'Executing...' : 'Waiting in queue'}`,
   time: run.createdAt.slice(11, 16),
-  accent: (['cyan', 'purple', 'teal'] as const)[i % 3]!,
+  accent: activityAccentPalette[i % activityAccentPalette.length] ?? "cyan",
 }));
 
-const laneLabels: Record<TaskStatus, string> = {
-  backlog: 'Backlog',
-  active: 'In progress',
-  review: 'Review',
-};
+function withDemoDetail<T extends { detail: string }>(item: T, label: (detail: string) => string): T {
+  return {
+    ...item,
+    detail: label(item.detail),
+  };
+}
 
-const memberFilterOptions: Array<{ id: MemberFilter; label: string }> = [
-  { id: 'all', label: 'All' },
-  { id: 'online', label: 'Online' },
-  { id: 'busy', label: 'Busy' },
-  { id: 'offline', label: 'Offline' },
-];
-
-const presenceLabels: Record<MemberPresence, string> = {
-  online: 'Online',
-  busy: 'Busy',
-  offline: 'Offline',
-};
+function demoMember(member: Member, label: (role: string) => string): Member {
+  return {
+    ...member,
+    role: label(member.role),
+  };
+}
 
-const accentIconMap: Record<string, string> = {
-  blue: '',
-  cyan: styles.accentCyan as string,
-  purple: styles.accentPurple as string,
-  teal: styles.accentTeal as string,
-};
+function demoTask(task: WorkspaceTask, label: (summary: string) => string): WorkspaceTask {
+  return {
+    ...task,
+    summary: label(task.summary),
+    tag: task.tag === 'Active' ? 'Demo active' : task.tag === 'Done' ? 'Demo done' : 'Demo queue',
+  };
+}
 
-const avatarClassMap: Record<string, string> = {
-  purple: styles.avatarPurple as string,
-  teal: styles.avatarTeal as string,
-  cyan: styles.avatarCyan as string,
-};
+function memberFromRunner(runner: Runner, index: number): Member {
+  return {
+    initials: runner.name.split(' ').map((word) => word[0]).join('').toUpperCase().slice(0, 2) || 'AG',
+    name: runner.name,
+    role: runner.capabilities ?? 'Runner registered',
+    accent: accentPalette[index % accentPalette.length] ?? 'blue',
+    presence: runner.status === 'online' ? 'online' : 'offline',
+  };
+}
 
-function nowLabel() {
-  return new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+function taskFromRun(run: Run, index: number, runners: Runner[]): WorkspaceTask {
+  return {
+    id: run.runId,
+    title: `Run ${run.runId.split('_').pop()} - ${run.status}`,
+    summary: `Thread: ${run.threadId}, Project: ${run.projectId}`,
+    owner: runners[index % Math.max(runners.length, 1)]?.name ?? 'Unassigned',
+    status: run.status === 'finished' ? 'review' : run.status === 'running' || run.status === 'starting' ? 'active' : 'backlog',
+    tag: run.status === 'running' || run.status === 'starting' ? 'Active' : run.status === 'finished' ? 'Done' : 'Queue',
+    progress: run.status === 'finished' ? 100 : run.status === 'running' || run.status === 'starting' ? 65 : 15,
+  };
 }
 
-export function GroupWorkspacePage() {
-  const { t } = useTranslation();
-  const canvasRef = useRef<HTMLCanvasElement | null>(null);
-  const [approval, setApproval] = useState<ApprovalState>('pending');
-  const [taskOwner, setTaskOwner] = useState('Xavier');
-  const [syncState, setSyncState] = useState<SyncState>({
-    complete: false,
-    fileCount: 12,
-    lastSyncedAt: 'Not synced',
-    progress: 82,
-    revision: 0,
-  });
-  const [activityLog, setActivityLog] = useState<ActivityItem[]>(initialActivities);
-  const [workspaceMembers, setWorkspaceMembers] = useState<Member[]>(members);
-  const [memberFilter, setMemberFilter] = useState<MemberFilter>('all');
-  const [noteDraft, setNoteDraft] = useState('');
-  const [confirmation, setConfirmation] = useState<Confirmation>({
-    detail: 'Local controls are wired for review, sync, assignment, member presence, and notes.',
-    title: 'Interactive workspace ready',
-    tone: 'info',
-  });
+function activityFromRun(run: Run, index: number, runners: Runner[]): ActivityItem {
+  return {
+    title: `${runners[index % Math.max(runners.length, 1)]?.name ?? 'Agent'} - run.${run.status}`,
+    detail: `Run on thread ${run.threadId}: ${run.status === 'finished' ? 'Completed successfully' : run.status === 'running' ? 'Executing...' : 'Waiting in queue'}`,
+    time: run.createdAt.slice(11, 16),
+    accent: activityAccentPalette[index % activityAccentPalette.length] ?? 'cyan',
+  };
+}
+
+function sourceLabelKey(label: string) {
+  if (label === 'Edge snapshot') return 'source.edgeSnapshot';
+  if (label === 'Offline snapshot') return 'source.offlineSnapshot';
+  if (label === 'Loading snapshot') return 'source.loadingSnapshot';
+  if (label === 'Mock fallback') return 'source.mockFallback';
+  if (label === 'Snapshot unavailable') return 'source.snapshotUnavailable';
+  if (label.startsWith('Local dry-run / ')) return 'source.localDryRun';
+  return 'source.snapshotUnavailable';
+}
+
+function SourceLabel({ source }: { source: WorkbenchSectionSource }) {
+  const { t } = useTranslation('groupWorkspace');
+  const baseLabel = source.label.startsWith('Local dry-run / ')
+    ? source.label.replace('Local dry-run / ', '')
+    : source.label;
+
+  return (
+    <span className={`gwr-source ${source.tone}`}>
+      {source.label.startsWith('Local dry-run / ')
+        ? t('source.localDryRun', { source: t(sourceLabelKey(baseLabel)) })
+        : t(sourceLabelKey(source.label))}
+    </span>
+  );
+}
+
+const styles = `
+  @import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap");
+  @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap");
+
+.group-workspace-react {
+  --gwr-bg: #edf6ff;
+  --gwr-bg-2: #f7fbff;
+  --gwr-ink: #172033;
+  --gwr-muted: #667085;
+  --gwr-line: rgba(143, 160, 190, 0.22);
+  --gwr-blue: #1769e8;
+  --gwr-cyan: #08a7cf;
+  --gwr-purple: #7457e8;
+  --gwr-teal: #0f9f9a;
+  --gwr-green: #1f9b64;
+  --gwr-orange: #d97817;
+  --gwr-glass: rgba(255,255,255,0.72);
+  --gwr-glass-border: rgba(255,255,255,0.7);
+  --gwr-shadow: 0 18px 48px rgba(26,40,80,0.14);
+  position: relative;
+  height: 100%;
+  padding: 18px;
+  overflow: hidden;
+  color: var(--gwr-ink);
+  background:
+    radial-gradient(circle at 18% 12%, rgba(8, 167, 207, 0.16), transparent 28%),
+    radial-gradient(circle at 82% 8%, rgba(116, 87, 232, 0.14), transparent 30%),
+    linear-gradient(135deg, var(--gwr-bg-2), var(--gwr-bg));
+  font-family: "Hanken Grotesk", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+.group-workspace-react,
+.group-workspace-react * {
+  box-sizing: border-box;
+}
+
+.gwr-particles {
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none;
+}
+
+.gwr-shell {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: 280px minmax(0, 1fr) 340px;
+  gap: 18px;
+  height: 100%;
+  width: 100%;
+}
+
+.gwr-glass {
+  background: var(--gwr-glass);
+  border: 1px solid var(--gwr-glass-border);
+  border-radius: 12px;
+  box-shadow: var(--gwr-shadow);
+  backdrop-filter: blur(28px) saturate(160%);
+  -webkit-backdrop-filter: blur(28px) saturate(160%);
+}
+
+.gwr-side,
+.gwr-right,
+.gwr-main,
+.gwr-feed,
+.gwr-column,
+.gwr-lane,
+.gwr-composer {
+  min-height: 0;
+}
+
+.gwr-side,
+.gwr-right,
+.gwr-main {
+  display: flex;
+  flex-direction: column;
+}
+
+.gwr-side,
+.gwr-right {
+  gap: 16px;
+  padding: 18px;
+  overflow: auto;
+}
+
+.gwr-main {
+  gap: 16px;
+  overflow: hidden;
+}
+
+.gwr-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 18px;
+  min-height: 96px;
+  padding: 18px 20px;
+}
+
+.gwr-title h1,
+.gwr-title h2,
+.gwr-title h3,
+.gwr-title p,
+.gwr-stat p,
+.gwr-card p,
+.gwr-file p,
+.gwr-activity p,
+.gwr-member p,
+.gwr-approval p {
+  margin: 0;
+}
+
+.gwr-eyebrow {
+  margin: 0 0 4px;
+  color: var(--gwr-muted);
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+}
+
+.gwr-brand-sub {
+  margin: 4px 0 0;
+  color: var(--gwr-muted);
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.09em;
+  line-height: 1.236;
+}
+
+.gwr-title h1 {
+  margin: 0;
+  font-size: 24px;
+  line-height: 1.15;
+  letter-spacing: 0;
+}
+
+.gwr-title h2,
+.gwr-section h2 {
+  margin: 0;
+  font-size: 15px;
+  line-height: 1.25;
+}
+
+.gwr-title h3,
+.gwr-card h3,
+.gwr-lane-title {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.25;
+}
+
+.gwr-small {
+  color: var(--gwr-muted);
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.gwr-tiny {
+  color: var(--gwr-muted);
+  font-size: 11px;
+  line-height: 1.35;
+}
+
+.gwr-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding-bottom: 14px;
+  border-bottom: 1px solid var(--gwr-line);
+}
+
+.gwr-brand .gwr-title h2 {
+  margin: 0;
+  color: var(--gwr-ink);
+  font-size: 15px;
+  line-height: 1.25;
+}
+
+.gwr-brand .gwr-title .gwr-brand-sub {
+  margin: 4px 0 0;
+}
+
+.gwr-mark,
+.gwr-icon,
+.gwr-avatar {
+  display: grid;
+  place-items: center;
+  flex: 0 0 auto;
+}
+
+.gwr-mark {
+  width: 38px;
+  height: 38px;
+  color: var(--white);
+  border-radius: 10px;
+  background: linear-gradient(135deg, var(--gwr-blue), var(--gwr-cyan));
+  box-shadow: 0 10px 22px var(--brand-glow);
+  font-size: 16px;
+  font-weight: 900;
+  line-height: 1;
+}
+
+.gwr-section-head,
+.gwr-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.gwr-section-head {
+  margin-bottom: 12px;
+}
+
+.gwr-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.gwr-nav,
+.gwr-member,
+.gwr-file,
+.gwr-activity,
+.gwr-card,
+.gwr-sync,
+.gwr-approval {
+  border: 1px solid var(--gwr-glass-border);
+  border-radius: 12px;
+  background: var(--gwr-glass);
+}
+
+.gwr-nav,
+.gwr-member,
+.gwr-file,
+.gwr-activity {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  padding: 10px;
+}
+
+.gwr-nav.is-active {
+  border-color: rgba(23,105,232,0.25);
+  background: rgba(23,105,232,0.12);
+}
+
+.gwr-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 9px;
+  color: var(--gwr-blue);
+  background: rgba(23,105,232,0.12);
+  font-size: 14px;
+  font-weight: 900;
+}
+
+.gwr-accent-cyan {
+  color: var(--gwr-cyan);
+  background: rgba(8,167,207,0.15);
+}
+
+.gwr-accent-purple {
+  color: var(--gwr-purple);
+  background: rgba(116,87,232,0.15);
+}
+
+.gwr-accent-teal {
+  color: var(--gwr-teal);
+  background: rgba(15,159,154,0.15);
+}
+
+.gwr-avatar {
+  position: relative;
+  width: 34px;
+  height: 34px;
+  color: var(--white);
+  border: 2px solid var(--gwr-glass-border);
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--gwr-blue), var(--gwr-cyan));
+  box-shadow: var(--gwr-shadow);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.gwr-avatar.purple {
+  background: linear-gradient(135deg, var(--gwr-purple), #a06bff);
+}
+
+.gwr-avatar.teal {
+  background: linear-gradient(135deg, var(--gwr-teal), var(--gwr-cyan));
+}
+
+.gwr-avatar.cyan {
+  background: linear-gradient(135deg, var(--gwr-cyan), #39c7e9);
+}
+
+.gwr-avatar::after {
+  content: "";
+  position: absolute;
+  right: -1px;
+  bottom: 0;
+  width: 9px;
+  height: 9px;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  background: var(--gwr-green);
+}
+
+.gwr-avatar.is-busy::after {
+  background: var(--gwr-orange);
+}
+
+.gwr-avatar.is-offline::after {
+  background: var(--gwr-muted);
+}
+
+.gwr-truncate {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.gwr-spacer {
+  flex: 1 1 auto;
+}
+
+.gwr-pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 24px;
+  padding: 4px 9px;
+  border: 1px solid rgba(23,105,232,0.2);
+  border-radius: 999px;
+  background: rgba(23,105,232,0.1);
+  color: var(--gwr-blue);
+  font-size: 11px;
+  font-weight: 800;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.gwr-pill.cyan {
+  border-color: rgba(8,167,207,0.25);
+  background: rgba(8,167,207,0.15);
+  color: var(--gwr-cyan);
+}
+
+.gwr-pill.purple {
+  border-color: rgba(116,87,232,0.25);
+  background: rgba(116,87,232,0.15);
+  color: var(--gwr-purple);
+}
+
+.gwr-pill.green {
+  border-color: rgba(31,155,100,0.25);
+  background: rgba(31,155,100,0.15);
+  color: var(--gwr-green);
+}
+
+.gwr-pill.amber {
+  border-color: rgba(217,122,23,0.3);
+  background: rgba(217,122,23,0.15);
+  color: var(--gwr-orange);
+}
+
+.gwr-pill.neutral {
+  border-color: rgba(102,112,133,0.25);
+  background: rgba(102,112,133,0.12);
+  color: var(--gwr-muted);
+}
+
+.gwr-source {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 22px;
+  padding: 4px 8px;
+  border: 1px solid rgba(102,112,133,0.25);
+  border-radius: 999px;
+  background: rgba(102,112,133,0.12);
+  color: var(--gwr-muted);
+  font-size: 10px;
+  font-weight: 900;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.gwr-source.green {
+  border-color: rgba(31,155,100,0.25);
+  background: rgba(31,155,100,0.15);
+  color: var(--gwr-green);
+}
+
+.gwr-source.purple {
+  border-color: rgba(116,87,232,0.25);
+  background: rgba(116,87,232,0.15);
+  color: var(--gwr-purple);
+}
+
+.gwr-source.amber {
+  border-color: rgba(217,122,23,0.3);
+  background: rgba(217,122,23,0.15);
+  color: var(--gwr-orange);
+}
+
+.gwr-source.cyan {
+  border-color: rgba(8,167,207,0.25);
+  background: rgba(8,167,207,0.15);
+  color: var(--gwr-cyan);
+}
+
+.gwr-dot {
+  display: inline-flex;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--gwr-green);
+  box-shadow: 0 0 0 4px rgba(31,155,100,0.2);
+}
+
+.gwr-dot.cyan {
+  background: var(--gwr-cyan);
+  box-shadow: 0 0 0 4px rgba(8,167,207,0.2);
+}
+
+.gwr-dot.purple {
+  background: var(--gwr-purple);
+  box-shadow: 0 0 0 4px rgba(116,87,232,0.2);
+}
+
+.gwr-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.gwr-button,
+.gwr-icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(23,105,232,0.2);
+  border-radius: 8px;
+  background: rgba(255,255,255,0.08);
+  color: var(--gwr-ink);
+  font-weight: 800;
+  box-shadow: none;
+  cursor: pointer;
+}
+
+.gwr-button {
+  gap: 8px;
+  min-height: 36px;
+  padding: 9px 12px;
+  font-size: 12px;
+}
+
+.gwr-icon-button {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  font-size: 13px;
+}
+
+.gwr-button.primary {
+  border-color: transparent;
+  color: var(--white);
+  background: linear-gradient(135deg, var(--gwr-blue), var(--gwr-cyan));
+  box-shadow: var(--gwr-shadow);
+}
+
+.gwr-button.warning {
+  color: var(--gwr-orange);
+  border-color: rgba(217,122,23,0.25);
+  background: rgba(217,122,23,0.15);
+}
+
+.gwr-button:disabled,
+.gwr-icon-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.54;
+  box-shadow: none;
+}
+
+.gwr-member-action {
+  width: 100%;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.gwr-filters {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 6px;
+}
+
+.gwr-filter {
+  min-height: 28px;
+  padding: 6px 8px;
+  border: 1px solid rgba(23,105,232,0.2);
+  border-radius: 8px;
+  background: var(--gwr-glass);
+  color: var(--gwr-muted);
+  font-size: 11px;
+  font-weight: 800;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.gwr-filter.is-active {
+  border-color: rgba(23,105,232,0.3);
+  background: rgba(23,105,232,0.12);
+  color: var(--gwr-blue);
+}
+
+.gwr-search {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: min(320px, 100%);
+  min-height: 38px;
+  padding: 9px 11px;
+  border: 1px solid var(--gwr-glass-border);
+  border-radius: 10px;
+  background: rgba(255,255,255,0.08);
+  color: var(--gwr-muted);
+  font-size: 12px;
+}
+
+.gwr-stats {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(92px, 1fr));
+  gap: 10px;
+}
+
+.gwr-stat {
+  padding: 12px;
+}
+
+.gwr-stat strong {
+  display: block;
+  margin-bottom: 4px;
+  font-size: 20px;
+  line-height: 1;
+}
+
+.gwr-confirmation {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 14px;
+  border: 1px solid rgba(23,105,232,0.16);
+  border-radius: 12px;
+  background: rgba(255,255,255,0.08);
+  box-shadow: none;
+}
+
+.gwr-confirmation.success {
+  border-color: rgba(31,155,100,0.25);
+  background: rgba(31,155,100,0.15);
+}
+
+.gwr-confirmation.warning {
+  border-color: rgba(217,122,23,0.3);
+  background: rgba(217,122,23,0.15);
+}
+
+.gwr-content {
+  display: grid;
+  grid-template-columns: minmax(0, 1.25fr) minmax(290px, 0.75fr);
+  gap: 16px;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.gwr-column,
+.gwr-feed {
+  padding: 16px;
+  overflow: hidden;
+}
+
+.gwr-board {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+  height: calc(100% - 36px);
+  min-height: 0;
+}
+
+.gwr-lane {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px;
+  overflow: auto;
+  border: 1px solid var(--gwr-line);
+  border-radius: 12px;
+  background: var(--gwr-glass);
+}
+
+.gwr-card {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px;
+  background: rgba(255,255,255,0.08);
+  box-shadow: none;
+}
+
+.gwr-progress {
+  width: 100%;
+  height: 7px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: rgba(23,105,232,0.12);
+}
+
+.gwr-progress span {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, var(--gwr-blue), var(--gwr-cyan), var(--gwr-purple));
+  transition: width 220ms ease;
+}
+
+.gwr-feed {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.gwr-activity-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  overflow: auto;
+  padding-right: 4px;
+}
+
+.gwr-activity {
+  align-items: flex-start;
+}
+
+.gwr-composer {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: auto;
+  padding: 12px;
+  border: 1px solid var(--gwr-glass-border);
+  border-radius: 12px;
+  background: var(--gwr-glass);
+}
+
+.gwr-composer textarea {
+  width: 100%;
+  min-height: 54px;
+  resize: none;
+  padding: 10px;
+  border: 1px solid var(--gwr-line);
+  border-radius: 10px;
+  outline: 0;
+  background: var(--gwr-glass);
+  color: var(--gwr-ink);
+  font: inherit;
+}
+
+.gwr-empty {
+  padding: 12px;
+  border: 1px dashed var(--gwr-line);
+  border-radius: 10px;
+  background: var(--gwr-glass);
+  color: var(--gwr-muted);
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.gwr-approval,
+.gwr-sync {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 14px;
+}
+
+.gwr-approval {
+  border-color: rgba(23,105,232,0.25);
+  background: linear-gradient(135deg, rgba(23,105,232,0.1), rgba(8,167,207,0.08));
+}
+
+.gwr-checks {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.gwr-check {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 9px 0;
+}
 
-  /* ---- Particle canvas (inline because WebLayout needs it as sibling) ---- */
+.gwr-check + .gwr-check {
+  border-top: 1px solid var(--gwr-line);
+}
+
+.gwr-file {
+  align-items: flex-start;
+}
+
+@media (max-width: 1180px) {
+  .gwr-shell {
+    grid-template-columns: 220px minmax(0, 1fr);
+  }
+
+  .gwr-right {
+    display: none;
+  }
+
+  .gwr-content {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+@media (max-width: 820px) {
+  .group-workspace-react {
+    height: auto;
+    overflow: auto;
+    padding: 14px;
+  }
+
+  .gwr-shell {
+    display: flex;
+    flex-direction: column;
+    height: auto;
+  }
+
+  .gwr-top {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .gwr-stats,
+  .gwr-board {
+    grid-template-columns: 1fr;
+  }
+
+  .gwr-column,
+  .gwr-feed,
+  .gwr-right {
+    overflow: visible;
+  }
+
+  .gwr-right {
+    display: flex;
+  }
+}
+
+[data-theme="dark"] .group-workspace-react {
+  --gwr-bg: #0f1117;
+  --gwr-bg-2: #0d1117;
+  --gwr-ink: #e1e4e8;
+  --gwr-muted: #8b949e;
+  --gwr-line: rgba(48, 54, 61, 0.4);
+  --gwr-blue: #1769e8;
+  --gwr-cyan: #08a7cf;
+  --gwr-purple: #a78bfa;
+  --gwr-teal: #4dd4c8;
+  --gwr-green: #3fb950;
+  --gwr-orange: #d2991d;
+  --gwr-glass: rgba(22, 27, 34, 0.8);
+  --gwr-glass-border: rgba(48, 54, 61, 0.6);
+  --gwr-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
+  background:
+    radial-gradient(circle at 18% 12%, rgba(8,167,207,0.1), transparent 28%),
+    radial-gradient(circle at 82% 8%, rgba(116,87,232,0.1), transparent 30%),
+    linear-gradient(135deg, var(--gwr-bg-2), var(--gwr-bg));
+}
+`;
+
+function useParticleCanvas(canvasRef: RefObject<HTMLCanvasElement | null>) {
   useEffect(() => {
     const canvas = canvasRef.current;
-    if (!canvas) return;
-    const ctx = canvas.getContext('2d');
-    if (!ctx) return;
+    if (!canvas) {
+      return undefined;
+    }
+
+    const context = canvas.getContext("2d");
+    if (!context) {
+      return undefined;
+    }
+
+    type Particle = {
+      x: number;
+      y: number;
+      r: number;
+      vx: number;
+      vy: number;
+      hue: number;
+      alpha: number;
+    };
 
-    const particleCount = 56;
-    let particles: Array<{ x: number; y: number; r: number; vx: number; vy: number; hue: number; alpha: number }> = [];
     let width = 0;
     let height = 0;
     let frame = 0;
+    let particles: Particle[] = [];
+    const particleCount = 56;
 
     const resize = () => {
       const ratio = window.devicePixelRatio || 1;
@@ -229,467 +1008,721 @@ export function GroupWorkspacePage() {
       canvas.height = Math.floor(height * ratio);
       canvas.style.width = `${width}px`;
       canvas.style.height = `${height}px`;
-      ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
+      context.setTransform(ratio, 0, 0, ratio, 0, 0);
     };
 
+    const createParticle = (index: number): Particle => ({
+      x: Math.random() * width,
+      y: Math.random() * height,
+      r: 1.6 + Math.random() * 2.6,
+      vx: -0.18 + Math.random() * 0.36,
+      vy: -0.18 - Math.random() * 0.48,
+      hue: index % 3 === 0 ? 196 : 210,
+      alpha: 0.18 + Math.random() * 0.2,
+    });
+
     const seed = () => {
-      particles = Array.from({ length: particleCount }, (_, i) => ({
-        x: Math.random() * width,
-        y: Math.random() * height,
-        r: 1.6 + Math.random() * 2.6,
-        vx: -0.18 + Math.random() * 0.36,
-        vy: -0.18 - Math.random() * 0.48,
-        hue: i % 3 === 0 ? 196 : 210,
-        alpha: 0.18 + Math.random() * 0.2,
-      }));
+      particles = Array.from({ length: particleCount }, (_, index) => createParticle(index));
     };
 
     const draw = () => {
-      ctx.clearRect(0, 0, width, height);
-      particles.forEach((p, i) => {
-        p.x += p.vx;
-        p.y += p.vy;
-        if (p.y < -16) { p.y = height + 16; p.x = Math.random() * width; }
-        if (p.x < -16) p.x = width + 16;
-        if (p.x > width + 16) p.x = -16;
-        ctx.beginPath();
-        ctx.fillStyle = `hsla(${p.hue}, 84%, 48%, ${p.alpha})`;
-        ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
-        ctx.fill();
-        particles.slice(i + 1).forEach((n) => {
-          const dx = p.x - n.x;
-          const dy = p.y - n.y;
-          const d = Math.sqrt(dx * dx + dy * dy);
-          if (d < 126) {
-            ctx.beginPath();
-            ctx.strokeStyle = `rgba(23, 105, 232, ${(1 - d / 126) * 0.07})`;
-            ctx.lineWidth = 1;
-            ctx.moveTo(p.x, p.y);
-            ctx.lineTo(n.x, n.y);
-            ctx.stroke();
+      context.clearRect(0, 0, width, height);
+
+      particles.forEach((particle, index) => {
+        particle.x += particle.vx;
+        particle.y += particle.vy;
+
+        if (particle.y < -16) {
+          particle.y = height + 16;
+          particle.x = Math.random() * width;
+        }
+        if (particle.x < -16) {
+          particle.x = width + 16;
+        }
+        if (particle.x > width + 16) {
+          particle.x = -16;
+        }
+
+        context.beginPath();
+        context.fillStyle = `hsla(${particle.hue}, 84%, 48%, ${particle.alpha})`;
+        context.arc(particle.x, particle.y, particle.r, 0, Math.PI * 2);
+        context.fill();
+
+        particles.slice(index + 1).forEach((neighbor) => {
+          const dx = particle.x - neighbor.x;
+          const dy = particle.y - neighbor.y;
+          const distance = Math.sqrt(dx * dx + dy * dy);
+
+          if (distance < 126) {
+            context.beginPath();
+            context.strokeStyle = `rgba(23, 105, 232, ${(1 - distance / 126) * 0.07})`;
+            context.lineWidth = 1;
+            context.moveTo(particle.x, particle.y);
+            context.lineTo(neighbor.x, neighbor.y);
+            context.stroke();
           }
         });
       });
+
       frame = window.requestAnimationFrame(draw);
     };
 
-    const handleResize = () => { resize(); seed(); };
+    const handleResize = () => {
+      resize();
+      seed();
+    };
+
     resize();
     seed();
     frame = window.requestAnimationFrame(draw);
-    window.addEventListener('resize', handleResize);
+    window.addEventListener("resize", handleResize);
+
     return () => {
       window.cancelAnimationFrame(frame);
-      window.removeEventListener('resize', handleResize);
+      window.removeEventListener("resize", handleResize);
     };
-  }, []);
+  }, [canvasRef]);
+}
+
+function AccentIcon({ accent, label }: { accent: FileItem["accent"]; label: string }) {
+  const className = accent === "blue" ? "gwr-icon" : `gwr-icon gwr-accent-${accent}`;
+
+  return <span className={className}>{label}</span>;
+}
+
+function MemberAvatar({ member }: { member: Member }) {
+  const className = [
+    "gwr-avatar",
+    member.accent === "blue" ? "" : member.accent,
+    member.presence === "busy" ? "is-busy" : "",
+    member.presence === "offline" ? "is-offline" : "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return <span className={className}>{member.initials}</span>;
+}
+
+export function GroupWorkspacePageInteractive() {
+  const { t } = useTranslation('groupWorkspace');
+
+  const laneLabels: Record<TaskStatus, string> = {
+    backlog: t('task.board.backlog'),
+    active: t('task.board.inProgress'),
+    review: t('task.board.review'),
+  };
+
+  const memberFilterOptions: Array<{ id: MemberFilter; label: string }> = [
+    { id: "all", label: t('member.filter.all') },
+    { id: "online", label: t('member.filter.online') },
+    { id: "busy", label: t('member.filter.busy') },
+    { id: "offline", label: t('member.filter.offline') },
+  ];
 
-  /* ---- Mock event stream ---- */
-  const pushActivity = (a: Omit<ActivityItem, 'time'>) => {
-    setActivityLog((cur) => [{ ...a, time: nowLabel() }, ...cur].slice(0, 8));
+  const presenceLabels: Record<MemberPresence, string> = {
+    online: t('member.status.online'),
+    busy: t('member.status.busy'),
+    offline: t('member.status.offline'),
   };
 
+  const tagLabels: Record<string, string> = {
+    Active: t('task.tag.active'),
+    Done: t('task.tag.done'),
+    Queue: t('task.tag.queue'),
+    'Demo active': t('task.tag.demoActive'),
+    'Demo done': t('task.tag.demoDone'),
+    'Demo queue': t('task.tag.demoQueue'),
+  };
+
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const workbenchState = useWorkbenchProjection();
+  const {
+    hasLiveCatalog,
+    label: catalogLabel,
+    message: catalogDetail,
+    mode: catalogMode,
+    tone: catalogTone,
+  } = getWorkbenchCatalogState(workbenchState);
+  const shouldUseDemoFallback = catalogMode === 'mock';
+  const demoDetailLabel = (detail: string) => t('demo.detail', { detail });
+  const demoSummaryLabel = (summary: string) => t('demo.summary', { summary });
+  const demoRoleLabel = (role: string) => t('demo.role', { role });
+  const taskSource = getWorkbenchSectionSource({
+    mode: catalogMode,
+    hasSectionSnapshot: hasLiveCatalog && workbenchState.runs.length > 0,
+  });
+  const [approval, setApproval] = useState<ApprovalState>("pending");
+  const [taskOwner, setTaskOwner] = useState("Xavier");
+  const [syncState, setSyncState] = useState<SyncState>({
+    complete: false,
+    fileCount: 12,
+    lastSyncedAt: t('sync.checklist.notSynced'),
+    progress: 82,
+    revision: 0,
+  });
+  const [activityLog, setActivityLog] = useState<ActivityItem[]>(initialActivities);
+  const [workspaceMembers, setWorkspaceMembers] = useState<Member[]>(members);
+  const [hasLocalMemberChanges, setHasLocalMemberChanges] = useState(false);
+  const [memberFilter, setMemberFilter] = useState<MemberFilter>("all");
+  const [noteDraft, setNoteDraft] = useState("");
+  const [confirmation, setConfirmation] = useState<Confirmation>({
+    detail: t('confirm.readyDetail'),
+    title: t('confirm.ready'),
+    tone: "info",
+  });
+  const demoMembers = useMemo(
+    () => workspaceMembers.map((member) => demoMember(member, demoRoleLabel)),
+    [t, workspaceMembers],
+  );
+  const demoFiles = useMemo(
+    () => files.map((file) => withDemoDetail(file, demoDetailLabel)),
+    [t],
+  );
+  const demoActivities = useMemo(
+    () => activityLog.map((activity) => withDemoDetail(activity, demoDetailLabel)),
+    [activityLog, t],
+  );
+  const demoBaseTasks = useMemo(
+    () => baseTasks.map((task) => demoTask(task, demoSummaryLabel)),
+    [t],
+  );
+
+  useParticleCanvas(canvasRef);
+
   useEffect(() => {
-    const stream = new MockEventStream();
-    const unsub = stream.on((event) => {
-      pushActivity({
-        title: event.type,
-        detail: typeof event.payload === 'object' && event.payload && 'text' in event.payload
-          ? String((event.payload as Record<string, unknown>).text).trim().slice(0, 100) || '(output)'
-          : JSON.stringify(event.payload).slice(0, 100),
-        accent: (['cyan', 'purple', 'teal', 'blue'] as const)[Math.floor(Math.random() * 4)]!,
-      });
+    if (!hasLiveCatalog || workbenchState.runners.length === 0) {
+      return;
+    }
+
+    setWorkspaceMembers(workbenchState.runners.map(memberFromRunner));
+  }, [hasLiveCatalog, workbenchState.runners]);
+
+  const nowLabel = () =>
+    new Date().toLocaleTimeString([], {
+      hour: "2-digit",
+      minute: "2-digit",
     });
-    playRunLifecycle(stream, { stepDelayMs: 1000 });
-    return () => { stream.destroy(); unsub(); };
-  }, []);
-
-  /* ---- Derived state ---- */
-  const approved = approval === 'approved';
-  const needsEdits = approval === 'changes';
-  const visibleMembers = workspaceMembers.filter((m) => memberFilter === 'all' || m.presence === memberFilter);
-  const onlineCount = workspaceMembers.filter((m) => m.presence === 'online').length;
-  const busyCount = workspaceMembers.filter((m) => m.presence === 'busy').length;
-  const approvalLabel = approved ? t('gw.approval.approved') : needsEdits ? t('gw.approval.changes') : t('gw.approval.pending');
-  const approvalLocked = !approved;
 
+  const showConfirmation = (nextConfirmation: Confirmation) => {
+    setConfirmation(nextConfirmation);
+  };
+
+  const pushActivity = (activity: Omit<ActivityItem, "time">) => {
+    setActivityLog((current) => [{ ...activity, time: nowLabel() }, ...current].slice(0, 8));
+  };
+
+  const approved = approval === "approved";
+  const needsEdits = approval === "changes";
+  const displayedMembers = hasLiveCatalog && workbenchState.runners.length > 0
+    ? workspaceMembers
+    : shouldUseDemoFallback
+      ? demoMembers
+      : [];
+  const visibleMembers = displayedMembers.filter((member) => memberFilter === "all" || member.presence === memberFilter);
+  const onlineCount = displayedMembers.filter((member) => member.presence === "online").length;
+  const busyCount = displayedMembers.filter((member) => member.presence === "busy").length;
+  const memberSource = getWorkbenchSectionSource({
+    mode: catalogMode,
+    hasSectionSnapshot: hasLiveCatalog && workbenchState.runners.length > 0,
+    hasLocalDryRun: hasLocalMemberChanges,
+  });
+  const approvalLabel = approved ? t('approval.status.approved') : needsEdits ? t('approval.status.changesRequested') : t('approval.status.awaitingApproval');
+  const approvalLocked = !approved;
   const syncedFiles: FileItem[] = syncState.revision
-    ? [{ name: `sync_receipt_r${syncState.revision}.txt`, detail: `Created by dry-run sync at ${syncState.lastSyncedAt}`, size: '2 KB', accent: 'blue' as const }]
+    ? [
+        {
+          name: `sync_receipt_r${syncState.revision}.txt`,
+          detail: `Created by dry-run sync at ${syncState.lastSyncedAt}`,
+          size: "2 KB",
+          accent: "blue",
+        },
+      ]
     : [];
-  const workspaceFiles = [...initialFiles, ...syncedFiles];
+  const liveFiles: FileItem[] = workbenchState.artifacts.map((artifact, index) => ({
+    name: artifact.path,
+    detail: `${artifact.kind} artifact, ${(artifact.sizeBytes / 1024).toFixed(1)} KB, created ${artifact.createdAt.slice(0, 10)}`,
+    size: artifact.sizeBytes > 1024 * 1024 ? `${(artifact.sizeBytes / (1024 * 1024)).toFixed(1)} MB` : `${(artifact.sizeBytes / 1024).toFixed(1)} KB`,
+    accent: fileAccentPalette[index % fileAccentPalette.length] ?? 'cyan',
+  }));
+  const workspaceFiles = [
+    ...(hasLiveCatalog && liveFiles.length ? liveFiles : shouldUseDemoFallback ? demoFiles : []),
+    ...syncedFiles,
+  ];
+  const fileSource = getWorkbenchSectionSource({
+    mode: catalogMode,
+    hasSectionSnapshot: hasLiveCatalog && workbenchState.artifacts.length > 0,
+    hasLocalDryRun: syncedFiles.length > 0,
+  });
+  const displayedBaseTasks = hasLiveCatalog && workbenchState.runs.length
+    ? workbenchState.runs.map((run, index) => taskFromRun(run, index, workbenchState.runners))
+    : shouldUseDemoFallback
+      ? demoBaseTasks
+      : [];
+  const displayedActivities = hasLiveCatalog && workbenchState.runs.length
+    ? workbenchState.runs.map((run, index) => activityFromRun(run, index, workbenchState.runners))
+    : shouldUseDemoFallback || activityLog.length > initialActivities.length
+      ? shouldUseDemoFallback
+        ? demoActivities
+        : activityLog
+      : [];
+  const activitySource = getWorkbenchSectionSource({
+    mode: catalogMode,
+    hasSectionSnapshot: hasLiveCatalog && workbenchState.runs.length > 0,
+    hasLocalDryRun: !(hasLiveCatalog && workbenchState.runs.length) && activityLog.length > initialActivities.length,
+  });
 
   const tasks = useMemo<WorkspaceTask[]>(() => {
-    return baseTasks.map((task) => {
-      if (task.id === 'approve') {
+    return displayedBaseTasks.map((task) => {
+      if (task.id === "approve") {
         return {
           ...task,
           owner: taskOwner,
-          progress: approval === 'approved' ? 100 : approval === 'changes' ? 60 : 82,
-          summary: approval === 'approved' ? 'Approved for dry-run sync. Snapshot action is unlocked.' : approval === 'changes' ? 'Reviewer requested one visible edit before approval.' : task.summary,
+          progress: approval === "approved" ? 100 : approval === "changes" ? 60 : 82,
+          summary:
+            approval === "approved"
+              ? t('task.summary.approved')
+              : approval === "changes"
+                ? t('task.summary.changesRequested')
+                : task.summary,
         };
       }
-      if (task.id === 'snapshot' && syncState.complete) {
-        return { ...task, progress: syncState.progress, summary: `Dry-run snapshot synced at ${syncState.lastSyncedAt}.` };
+
+      if (task.id === "snapshot" && syncState.complete) {
+        return {
+          ...task,
+          progress: syncState.progress,
+          summary: t('task.summary.synced', { time: syncState.lastSyncedAt }),
+        };
       }
+
       return task;
     });
-  }, [approval, syncState.complete, syncState.lastSyncedAt, syncState.progress, taskOwner]);
-
-  const laneTasks = (status: TaskStatus) => tasks.filter((t) => t.status === status);
+  }, [approval, displayedBaseTasks, syncState.complete, syncState.lastSyncedAt, syncState.progress, taskOwner]);
 
-  /* ---- Actions ---- */
-  const showConfirmation = (c: Confirmation) => setConfirmation(c);
+  const laneTasks = (status: TaskStatus) => tasks.filter((task) => task.status === status);
 
   const approveParser = () => {
-    setApproval('approved');
-    setSyncState((cur) => ({ ...cur, complete: false, progress: Math.max(cur.progress, 91) }));
-    pushActivity({ title: 'Xavier approved parser v2', detail: 'Sync controls are unlocked and the review task is marked complete.', accent: 'blue' });
-    showConfirmation({ title: 'Approval saved', detail: 'Parser v2 is approved. The snapshot sync button is now enabled.', tone: 'success' });
+    setApproval("approved");
+    setSyncState((current) => ({
+      ...current,
+      complete: false,
+      progress: Math.max(current.progress, 91),
+    }));
+    pushActivity({
+      title: "Xavier approved parser v2",
+      detail: "Local dry-run sync controls are unlocked and the review task is marked complete.",
+      accent: "blue",
+    });
+    showConfirmation({
+      title: t('confirm.approvalSaved'),
+      detail: t('confirm.approvalSavedDetail'),
+      tone: "success",
+    });
   };
 
   const requestEdits = () => {
-    setApproval('changes');
-    setSyncState((cur) => ({ ...cur, complete: false, progress: 74 }));
-    pushActivity({ title: 'Xavier requested parser edits', detail: 'Sync was locked again until the requested changes are resolved.', accent: 'purple' });
-    showConfirmation({ title: 'Changes requested', detail: 'Approval state changed and sync is locked while the review is open.', tone: 'warning' });
+    setApproval("changes");
+    setSyncState((current) => ({
+      ...current,
+      complete: false,
+      progress: 74,
+    }));
+    pushActivity({
+      title: "Xavier requested parser edits",
+      detail: "Local dry-run sync was locked again until the requested changes are resolved.",
+      accent: "purple",
+    });
+    showConfirmation({
+      title: t('confirm.changesRequested'),
+      detail: t('confirm.changesRequestedDetail'),
+      tone: "warning",
+    });
   };
 
   const assignSecurity = () => {
-    const nextOwner = taskOwner === 'Security-Core' ? 'Xavier' : 'Security-Core';
+    const nextOwner = taskOwner === "Security-Core" ? "Xavier" : "Security-Core";
     setTaskOwner(nextOwner);
-    pushActivity({ title: `Approval assigned to ${nextOwner}`, detail: 'Task owner changed on the review card, board, and sync checklist.', accent: 'teal' });
-    showConfirmation({ title: 'Review reassigned', detail: `Parser v2 is now assigned to ${nextOwner}.`, tone: 'info' });
+    pushActivity({
+      title: `Approval assigned to ${nextOwner}`,
+      detail: "Task owner changed on the review card, board, and sync checklist.",
+      accent: "teal",
+    });
+    showConfirmation({
+      title: t('confirm.reviewReassigned'),
+      detail: t('confirm.reviewReassignedDetail', { owner: nextOwner }),
+      tone: "info",
+    });
   };
 
   const syncSnapshot = () => {
     if (!approved) {
-      showConfirmation({ title: 'Sync is locked', detail: 'Approve parser v2 before syncing the shared snapshot.', tone: 'warning' });
+      showConfirmation({
+        title: t('confirm.syncLocked'),
+        detail: t('confirm.syncLockedDetail'),
+        tone: "warning",
+      });
       return;
     }
+
     const syncedAt = nowLabel();
-    const nextRev = syncState.revision + 1;
-    setSyncState((cur) => ({ complete: true, fileCount: cur.fileCount + 1, lastSyncedAt: syncedAt, progress: 100, revision: nextRev }));
-    pushActivity({ title: 'Dry-run snapshot synced', detail: `Workspace files updated and sync receipt generated at ${syncedAt}.`, accent: 'cyan' });
-    showConfirmation({ title: 'Snapshot synced', detail: `Files, progress, and last sync time now reflect revision ${nextRev}.`, tone: 'success' });
+    const nextRevision = syncState.revision + 1;
+    setSyncState((current) => ({
+      complete: true,
+      fileCount: current.fileCount + 1,
+      lastSyncedAt: syncedAt,
+      progress: 100,
+      revision: nextRevision,
+    }));
+    pushActivity({
+      title: "Dry-run snapshot synced",
+      detail: `Local workspace files updated and dry-run receipt generated at ${syncedAt}.`,
+      accent: "cyan",
+    });
+    showConfirmation({
+      title: t('confirm.snapshotSynced'),
+      detail: t('confirm.snapshotSyncedDetail', { revision: nextRevision }),
+      tone: "success",
+    });
   };
 
   const cycleMemberPresence = (memberName: string) => {
-    const m = workspaceMembers.find((m2) => m2.name === memberName);
-    if (!m) return;
-    const next: MemberPresence = m.presence === 'online' ? 'busy' : m.presence === 'busy' ? 'offline' : 'online';
-    setWorkspaceMembers((cur) => cur.map((m2) => m2.name === memberName ? { ...m2, presence: next } : m2));
-    pushActivity({ title: `${m.name} is now ${presenceLabels[next].toLowerCase()}`, detail: 'Member presence changed locally and the member filter counters updated.', accent: m.accent });
-    showConfirmation({ title: 'Member status updated', detail: `${m.name} switched to ${presenceLabels[next]}.`, tone: next === 'offline' ? 'warning' : 'info' });
+    const selectedMember = workspaceMembers.find((member) => member.name === memberName);
+    if (!selectedMember) {
+      return;
+    }
+
+    const nextPresence: MemberPresence =
+      selectedMember.presence === "online" ? "busy" : selectedMember.presence === "busy" ? "offline" : "online";
+
+    setWorkspaceMembers((current) =>
+      current.map((member) =>
+        member.name === memberName
+          ? {
+              ...member,
+              presence: nextPresence,
+            }
+          : member,
+      ),
+    );
+    setHasLocalMemberChanges(true);
+    pushActivity({
+      title: `${selectedMember.name} is now ${presenceLabels[nextPresence].toLowerCase()}`,
+      detail: "Member presence changed locally and the member filter counters updated.",
+      accent: selectedMember.accent,
+    });
+    showConfirmation({
+      title: t('confirm.memberStatusUpdated'),
+      detail: t('confirm.memberStatusUpdatedDetail', { name: selectedMember.name, status: presenceLabels[nextPresence] }),
+      tone: nextPresence === "offline" ? "warning" : "info",
+    });
   };
 
   const selectMemberFilter = (filter: MemberFilter) => {
     setMemberFilter(filter);
-    showConfirmation({ title: 'Member filter changed', detail: filter === 'all' ? 'Showing every workspace member.' : `Showing only members marked ${presenceLabels[filter].toLowerCase()}.`, tone: 'info' });
+    showConfirmation({
+      title: t('confirm.memberFilterChanged'),
+      detail:
+        filter === "all"
+          ? t('confirm.memberFilterAll')
+          : t('confirm.memberFilterSpecific', { filter: presenceLabels[filter] }),
+      tone: "info",
+    });
   };
 
   const sendNote = () => {
-    const trimmed = noteDraft.trim();
-    if (!trimmed) { showConfirmation({ title: 'Note is empty', detail: 'Write a collaboration note before sending it to the activity flow.', tone: 'warning' }); return; }
-    pushActivity({ title: 'Collaboration note sent', detail: trimmed, accent: 'blue' });
-    setNoteDraft('');
-    showConfirmation({ title: 'Note posted', detail: 'The note was added to the activity flow and the composer was cleared.', tone: 'success' });
+    const trimmedNote = noteDraft.trim();
+    if (!trimmedNote) {
+      showConfirmation({
+        title: t('confirm.noteEmpty'),
+        detail: t('confirm.noteEmptyDetail'),
+        tone: "warning",
+      });
+      return;
+    }
+
+    pushActivity({
+      title: "Collaboration note sent",
+      detail: trimmedNote,
+      accent: "blue",
+    });
+    setNoteDraft("");
+    showConfirmation({
+      title: t('confirm.notePosted'),
+      detail: t('confirm.notePostedDetail'),
+      tone: "success",
+    });
+  };
+
+  const handleComposerKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key !== "Enter" || event.shiftKey || event.nativeEvent.isComposing) {
+      return;
+    }
+
+    event.preventDefault();
+    sendNote();
   };
 
   const fillComposer = (token: string, confirmationTitle: string) => {
-    setNoteDraft((cur) => `${cur}${cur ? ' ' : ''}${token}`);
-    showConfirmation({ title: confirmationTitle, detail: 'Composer content was updated locally.', tone: 'info' });
+    setNoteDraft((current) => `${current}${current ? " " : ""}${token}`);
+    showConfirmation({
+      title: confirmationTitle,
+      detail: t('confirm.composerUpdated'),
+      tone: "info",
+    });
   };
 
   const createLocalFile = () => {
-    setSyncState((cur) => ({ ...cur, fileCount: cur.fileCount + 1 }));
-    pushActivity({ title: 'Local file placeholder added', detail: 'Shared file count increased without contacting a backend.', accent: 'cyan' });
-    showConfirmation({ title: 'File placeholder added', detail: 'The file counter changed locally for this interactive preview.', tone: 'info' });
+    setSyncState((current) => ({
+      ...current,
+      fileCount: current.fileCount + 1,
+    }));
+    pushActivity({
+      title: "Local file placeholder added",
+      detail: "Shared file count increased without contacting a backend.",
+      accent: "cyan",
+    });
+    showConfirmation({
+      title: t('confirm.filePlaceholderAdded'),
+      detail: t('confirm.filePlaceholderDetail'),
+      tone: "info",
+    });
   };
 
   const exportSummary = () => {
-    pushActivity({ title: 'Workspace summary prepared', detail: 'Export is represented as a local confirmation for this preview.', accent: 'teal' });
-    showConfirmation({ title: 'Export prepared', detail: 'No file was downloaded. The action is captured in the activity flow.', tone: 'success' });
+    pushActivity({
+      title: "Workspace summary prepared",
+      detail: "Export is represented as a local confirmation for this preview.",
+      accent: "teal",
+    });
+    showConfirmation({
+      title: t('confirm.exportPrepared'),
+      detail: t('confirm.exportPreparedDetail'),
+      tone: "success",
+    });
   };
 
-  /* ---- Build member filter labels (use translation keys, fallback to hardcoded) ---- */
-  const filterLabels: Record<MemberFilter, string> = {
-    all: t('gw.members.filter.all'),
-    online: t('gw.members.filter.online'),
-    busy: t('gw.members.filter.busy'),
-    offline: t('gw.members.filter.offline'),
-  };
+  return (
+    <div className="group-workspace-react">
+      <style>{styles}</style>
+      <canvas ref={canvasRef} className="gwr-particles" aria-hidden="true" />
 
-  /* ---- Sidebar bottom: spaces + members + health ---- */
-  const sidebarBottom = (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 16, paddingTop: 8 }}>
-      {/* Spaces nav */}
-      <div>
-        <div className={styles.sectionHead}>
-          <h3 className={styles.sidebarSectionTitle}>{t('gw.spaces')}</h3>
-          <Pill variant="cyan">{t('gw.spaces.live')}</Pill>
-        </div>
-        <div className={styles.stack}>
-          <div className={`${styles.sidebarNav} ${styles.sidebarNavActive}`}>
-            <div className={styles.accentIcon}>S</div>
-            <div style={{ minWidth: 0 }}>
-              <strong style={{ fontSize: 13 }}>{t('gw.spaces.legacy')}</strong>
-              <p style={{ fontSize: 12, color: 'var(--muted-foreground)', margin: '2px 0 0', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t('gw.spaces.legacyDesc')}</p>
-            </div>
-          </div>
-          <div className={styles.sidebarNav}>
-            <div className={`${styles.accentIcon} ${styles.accentPurple}`}>R</div>
-            <div style={{ minWidth: 0 }}>
-              <strong style={{ fontSize: 13 }}>{t('gw.spaces.mapping')}</strong>
-              <p style={{ fontSize: 12, color: 'var(--muted-foreground)', margin: '2px 0 0', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t('gw.spaces.mappingDesc')}</p>
+      <div className="gwr-shell">
+        <aside className="gwr-side gwr-glass">
+          <div className="gwr-brand">
+            <span className="gwr-mark">AH</span>
+            <div className="gwr-truncate gwr-title">
+              <h2>AGENTHUB</h2>
+              <p className="gwr-brand-sub">{t('sidebar.brandSubtitle')}</p>
             </div>
           </div>
-          <div className={styles.sidebarNav}>
-            <div className={`${styles.accentIcon} ${styles.accentCyan}`}>F</div>
-            <div style={{ minWidth: 0 }}>
-              <strong style={{ fontSize: 13 }}>{t('gw.spaces.files')}</strong>
-              <p style={{ fontSize: 12, color: 'var(--muted-foreground)', margin: '2px 0 0', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t('gw.spaces.filesDesc', { count: syncState.fileCount })}</p>
-            </div>
-          </div>
-        </div>
-      </div>
 
-      {/* Members */}
-      <div>
-        <div className={styles.sectionHead}>
-          <h3 className={styles.sidebarSectionTitle}>{t('gw.members')}</h3>
-          <span style={{ fontSize: 12, color: 'var(--muted-foreground)' }}>{t('gw.members.onlineCount', { online: onlineCount, busy: busyCount })}</span>
-        </div>
-        <div className={styles.filterRow} role="group" aria-label="Filter members by status">
-          {memberFilterOptions.map((opt) => (
-            <button
-              className={`${styles.filterBtn} ${opt.id === memberFilter ? styles.filterBtnActive : ''}`}
-              key={opt.id}
-              type="button"
-              onClick={() => selectMemberFilter(opt.id)}
-            >
-              {filterLabels[opt.id]}
-            </button>
-          ))}
-        </div>
-        <div className={styles.stack}>
-          {visibleMembers.map((m) => (
-            <button
-              className={styles.memberItem}
-              key={m.name}
-              type="button"
-              onClick={() => cycleMemberPresence(m.name)}
-            >
-              <span className={`${styles.memberAvatar} ${avatarClassMap[m.accent] ?? ''} ${m.presence === 'busy' ? styles.avatarBusy : m.presence === 'offline' ? styles.avatarOffline : ''}`}>
-                {m.initials}
+          <section className="gwr-section">
+            <div className="gwr-section-head">
+              <h2>{t('sidebar.spaces')}</h2>
+              <span className="gwr-pill cyan">
+                <span className="gwr-dot cyan" />
+                {catalogLabel}
               </span>
-              <div style={{ minWidth: 0 }}>
-                <strong style={{ fontSize: 13 }}>{m.name}</strong>
-                <p style={{ fontSize: 12, color: 'var(--muted-foreground)', margin: '2px 0 0', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                  {m.role} - {t(`gw.presence.${m.presence}`)}
-                </p>
+            </div>
+            <div className="gwr-stack">
+              <div className="gwr-nav is-active">
+                <AccentIcon accent="blue" label="S" />
+                <div className="gwr-truncate">
+                  <strong>Legacy Migration</strong>
+                  <p className="gwr-tiny gwr-truncate">{t('sidebar.space.localDryRunSync')}</p>
+                </div>
               </div>
-            </button>
-          ))}
-          {visibleMembers.length === 0 ? (
-            <div className={styles.emptyHint}>{t('gw.members.noMatch')}</div>
-          ) : null}
-        </div>
-      </div>
-
-      {/* Workspace Health */}
-      <div className={styles.healthCard}>
-        <div className={styles.sectionHead}>
-          <span className={`${styles.topEyebrow}`}>{t('gw.health.label')}</span>
-          <Pill variant={syncState.complete ? 'green' : 'cyan'}>{syncState.complete ? t('gw.health.synced') : t('gw.health.stable')}</Pill>
-        </div>
-        <p className={styles.healthText}>{t('gw.health.localOnly', { time: syncState.lastSyncedAt })}</p>
-      </div>
-    </div>
-  );
-
-  /* ---- Drawer: approval + sync + files ---- */
-  const drawer = (
-    <>
-      {/* Approval */}
-      <div className={styles.sidebarSection}>
-        <div className={styles.sectionHead}>
-          <div>
-            <p className={styles.topEyebrow}>{t('gw.approval.eyebrow')}</p>
-            <h3 className={styles.sidebarSectionTitle}>{t('gw.approval.title')}</h3>
-          </div>
-          <Pill variant={approved ? 'green' : needsEdits ? 'purple' : 'default'}>{approvalLabel}</Pill>
-        </div>
-        <div className={styles.approvalCard}>
-          <div className={styles.row}>
-            <strong style={{ fontSize: 13 }}>{approvalLabel}</strong>
-            <span style={{ fontSize: 12, color: 'var(--muted-foreground)' }}>Owner: {taskOwner}</span>
-          </div>
-          <p style={{ fontSize: 12, color: 'var(--muted-foreground)', margin: 0 }}>
-            {approved ? t('gw.approval.approvedDesc') : needsEdits ? t('gw.approval.changesDesc') : t('gw.approval.pendingDesc')}
-          </p>
-          <div style={{ display: 'flex', gap: 10 }}>
-            <Button variant="secondary" size="sm" onClick={requestEdits}>{t('gw.approval.requestEdits')}</Button>
-            <Button variant="primary" size="sm" onClick={approveParser}>{t('gw.approval.approve')}</Button>
-          </div>
-        </div>
-      </div>
-
-      {/* Sync */}
-      <div className={styles.sidebarSection}>
-        <div className={styles.sectionHead}>
-          <div>
-            <p className={styles.topEyebrow}>{t('gw.sync.eyebrow')}</p>
-            <h3 className={styles.sidebarSectionTitle}>{t('gw.sync.title')}</h3>
-          </div>
-          <Pill variant={syncState.complete ? 'green' : 'cyan'}>{syncState.progress}%</Pill>
-        </div>
-        <div className={styles.syncCard}>
-          <div className={styles.row}>
-            <span style={{ fontSize: 12, color: 'var(--muted-foreground)' }}>{t('gw.sync.readiness')}</span>
-            <strong style={{ fontSize: 12 }}>{syncState.complete ? t('gw.sync.complete') : approved ? t('gw.sync.unlocked') : t('gw.sync.locked')}</strong>
-          </div>
-          <ProgressBar value={syncState.progress} />
-          <Button variant="primary" size="md" disabled={approvalLocked} onClick={syncSnapshot}>
-            {syncState.complete ? t('gw.sync.again') : approved ? t('gw.sync.action') : t('gw.sync.approveFirst')}
-          </Button>
-          <div>
-            <div className={styles.checkRow}>
-              <span className={`${styles.dot} ${styles.dotCyan}`} />
-              <div>
-                <strong style={{ fontSize: 13 }}>{t('gw.sync.filesIndexed')}</strong>
-                <p style={{ fontSize: 11, color: 'var(--muted-foreground)', margin: '2px 0 0' }}>{t('gw.sync.filesAvailable', { count: syncState.fileCount })}</p>
+              <div className="gwr-nav">
+                <AccentIcon accent="purple" label="R" />
+                <div className="gwr-truncate">
+                  <strong>Mapping Review</strong>
+                  <p className="gwr-tiny gwr-truncate">
+                    {t('sidebar.space.demoApprovals')}
+                  </p>
+                </div>
               </div>
-            </div>
-            <div className={styles.checkRow}>
-              <span className={`${styles.dot} ${styles.dotPurple}`} />
-              <div>
-                <strong style={{ fontSize: 13 }}>{t('gw.sync.assignments')}</strong>
-                <p style={{ fontSize: 11, color: 'var(--muted-foreground)', margin: '2px 0 0' }}>{t('gw.sync.assignmentsDetail', { owner: taskOwner })}</p>
+              <div className="gwr-nav">
+                <AccentIcon accent="cyan" label="F" />
+                <div className="gwr-truncate">
+                  <strong>Shared Files</strong>
+                  <p className="gwr-tiny gwr-truncate">{t('sidebar.space.documents', { count: workspaceFiles.length })}</p>
+                </div>
               </div>
             </div>
-            <div className={styles.checkRow}>
-              <span className={styles.dot} />
-              <div>
-                <strong style={{ fontSize: 13 }}>{t('gw.sync.lastSync')}</strong>
-                <p style={{ fontSize: 11, color: 'var(--muted-foreground)', margin: '2px 0 0' }}>{t('gw.sync.lastSyncValue', { time: syncState.lastSyncedAt })}</p>
+          </section>
+
+          <section className="gwr-section">
+            <div className="gwr-section-head">
+              <h2>{t('sidebar.members')}</h2>
+              <div className="gwr-actions">
+                <SourceLabel source={memberSource} />
+                <span className="gwr-tiny">
+                  {t('sidebar.members.onlineBusy', { online: onlineCount, busy: busyCount })}
+                </span>
               </div>
             </div>
-          </div>
-        </div>
-      </div>
+            <div className="gwr-filters" role="group" aria-label={t('member.filter.aria')}>
+              {memberFilterOptions.map((option) => (
+                <button
+                  className={option.id === memberFilter ? "gwr-filter is-active" : "gwr-filter"}
+                  key={option.id}
+                  type="button"
+                  onClick={() => selectMemberFilter(option.id)}
+                >
+                  {option.label}
+                </button>
+              ))}
+            </div>
+            <div className="gwr-stack">
+              {visibleMembers.map((member) => (
+                <button
+                  className="gwr-member gwr-member-action"
+                  key={member.name}
+                  type="button"
+                  onClick={() => cycleMemberPresence(member.name)}
+                >
+                  <MemberAvatar member={member} />
+                  <div className="gwr-truncate">
+                    <strong>{member.name}</strong>
+                    <p className="gwr-tiny gwr-truncate">
+                      {member.role} - {presenceLabels[member.presence]}
+                    </p>
+                  </div>
+                </button>
+              ))}
+              {visibleMembers.length === 0 ? (
+                <div className="gwr-empty">{t('member.empty')}</div>
+              ) : null}
+            </div>
+          </section>
 
-      {/* Files */}
-      <div className={styles.sidebarSection}>
-        <div className={styles.sectionHead}>
-          <div>
-            <p className={styles.topEyebrow}>{t('gw.files.eyebrow')}</p>
-            <h3 className={styles.sidebarSectionTitle}>{t('gw.files.title')}</h3>
-          </div>
-          <Button variant="icon" onClick={createLocalFile} aria-label="Add file">
-            <Icon name="add" />
-          </Button>
-        </div>
-        <div className={styles.stack}>
-          {workspaceFiles.map((file) => (
-            <div className={styles.fileRow} key={file.name}>
-              <div className={`${styles.accentIcon} ${accentIconMap[file.accent] ?? ''}`}>{file.name.slice(0, 1).toUpperCase()}</div>
-              <div style={{ minWidth: 0, flex: 1 }}>
-                <strong style={{ fontSize: 13 }}>{file.name}</strong>
-                <p className={styles.fileRowDesc}>{file.detail}</p>
+          <div className="gwr-spacer" />
+          <section className="gwr-sync">
+            <div className="gwr-row">
+              <span className="gwr-eyebrow">{t('sidebar.workspaceHealth')}</span>
+              <span className={`gwr-pill ${catalogTone}`}>
+                {catalogLabel}
+              </span>
+            </div>
+            <p className="gwr-small">{catalogDetail} {t('sidebar.lastLocalSync', { time: syncState.lastSyncedAt })}</p>
+          </section>
+        </aside>
+
+        <main className="gwr-main">
+          <header className="gwr-top gwr-glass">
+            <div className="gwr-title">
+              <p className="gwr-eyebrow">Legacy Migration Room</p>
+              <h1>{t('header.title')}</h1>
+              <p className="gwr-small">
+                {t('header.subtitle')}
+              </p>
+            </div>
+            <div className="gwr-actions">
+              <div className="gwr-search" aria-label={t('header.searchAria')}>
+                <span>{t('header.search')}</span>
+                <span className="gwr-truncate">{t('header.searchPlaceholder')}</span>
               </div>
-              <span className={styles.fileSize}>{file.size}</span>
+              <button className="gwr-button" type="button" onClick={exportSummary}>
+                {t('header.export')}
+              </button>
+              <button className="gwr-button primary" type="button" onClick={assignSecurity}>
+                {t('header.assignReview')}
+              </button>
             </div>
-          ))}
-          {workspaceFiles.length === 0 ? <div className={styles.emptyHint}>{t('gw.files.empty')}</div> : null}
-        </div>
-      </div>
-    </>
-  );
+          </header>
 
-  return (
-    <div className={styles.pageRoot}>
-      <ParticleCanvas />
-      <WebLayout
-        brandName={t('gw.brand')}
-        brandSubtitle={t('gw.subtitle')}
-        sectionLabels={[
-          { text: t('gw.spaces') },
-          { text: t('gw.members') },
-        ]}
-        sidebarBottom={sidebarBottom}
-        topbarLeft={
-          <div className={styles.topTitle}>
-            <p className={styles.topEyebrow}>{t('gw.topbar.eyebrow')}</p>
-            <h1 className={styles.topHeading}>{t('gw.topbar.title')}</h1>
-            <p className={styles.topDesc}>{t('gw.topbar.subtitle')}</p>
-          </div>
-        }
-        topbarRight={
-          <div className={styles.topActions}>
-            <div className={styles.searchMock}>
-              <Icon name="search" size={16} />
-              <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t('gw.topbar.searchHint')}</span>
+          <section className="gwr-stats">
+            <div className="gwr-stat gwr-glass">
+              <strong>{onlineCount}</strong>
+              <p className="gwr-small">
+                {shouldUseDemoFallback
+                  ? t('stat.demoMembersOnline', { defaultValue: t('stat.membersOnline') })
+                  : t('stat.membersOnline')}
+              </p>
             </div>
-            <Button variant="secondary" size="sm" onClick={exportSummary}>{t('gw.topbar.export')}</Button>
-            <Button variant="primary" size="sm" onClick={assignSecurity}>{t('gw.topbar.assignReview')}</Button>
-          </div>
-        }
-        drawer={drawer}
-      >
-        {/* Main content */}
-        <div className={styles.mainContent}>
-          {/* Stats */}
-          <div className={styles.stats}>
-            <div className={styles.statCard}><span className={styles.statValue}>{onlineCount}</span><span className={styles.statLabel}>{t('gw.stats.online')}</span></div>
-            <div className={styles.statCard}><span className={styles.statValue}>{tasks.length}</span><span className={styles.statLabel}>{t('gw.stats.tasks')}</span></div>
-            <div className={styles.statCard}><span className={styles.statValue}>{syncState.fileCount}</span><span className={styles.statLabel}>{t('gw.stats.files')}</span></div>
-            <div className={styles.statCard}><span className={styles.statValue}>{syncState.progress}%</span><span className={styles.statLabel}>{t('gw.stats.sync')}</span></div>
-          </div>
+            <div className="gwr-stat gwr-glass">
+              <strong>{tasks.length}</strong>
+              <p className="gwr-small">
+                {shouldUseDemoFallback
+                  ? t('stat.demoSharedTasks', { defaultValue: t('stat.sharedTasks') })
+                  : t('stat.sharedTasks')}
+              </p>
+            </div>
+            <div className="gwr-stat gwr-glass">
+              <strong>{workspaceFiles.length}</strong>
+              <p className="gwr-small">
+                {shouldUseDemoFallback
+                  ? t('stat.demoWorkspaceFiles', { defaultValue: t('stat.workspaceFiles') })
+                  : t('stat.workspaceFiles')}
+              </p>
+            </div>
+            <div className="gwr-stat gwr-glass">
+              <strong>{syncState.progress}%</strong>
+              <p className="gwr-small">
+                {shouldUseDemoFallback
+                  ? t('stat.demoDryRunReadiness')
+                  : t('stat.dryRunReadiness')}
+              </p>
+            </div>
+          </section>
 
-          {/* Confirmation bar */}
-          <div className={`${styles.confirmBar} ${confirmation.tone === 'success' ? styles.confirmSuccess : confirmation.tone === 'warning' ? styles.confirmWarning : ''}`} aria-live="polite">
+          <section className={`gwr-confirmation gwr-glass ${confirmation.tone}`} aria-live="polite">
             <div>
-              <div className={styles.confirmTitle}>{confirmation.title}</div>
-              <div className={styles.confirmDetail}>{confirmation.detail}</div>
+              <strong>{confirmation.title}</strong>
+              <p className="gwr-small">{confirmation.detail}</p>
             </div>
-            <Button variant="icon" onClick={() => showConfirmation({ title: 'Status bar cleared', detail: 'The next local action will appear here.', tone: 'info' })} aria-label="Dismiss confirmation">
-              <Icon name="close" />
-            </Button>
-          </div>
+            <button
+              className="gwr-icon-button"
+              type="button"
+              aria-label={t('confirm.dismiss')}
+              onClick={() =>
+                showConfirmation({
+                  title: t('confirm.statusBarCleared'),
+                  detail: t('confirm.statusBarClearedDetail'),
+                  tone: "info",
+                })
+              }
+            >
+              x
+            </button>
+          </section>
 
-          {/* Content grid: board + feed */}
-          <div className={styles.contentGrid}>
-            {/* Board column */}
-            <div className={styles.glassPanel}>
-              <div className={styles.sectionHead}>
-                <div>
-                  <p className={styles.topEyebrow}>{t('gw.board.eyebrow')}</p>
-                  <h2 className={styles.sidebarSectionTitle} style={{ fontSize: 15, fontWeight: 700, margin: 0 }}>{t('gw.board.title')}</h2>
+          <section className="gwr-content">
+            <div className="gwr-column gwr-glass">
+              <div className="gwr-section-head">
+                <div className="gwr-title">
+                  <p className="gwr-eyebrow">{t('task.board')}</p>
+                  <h2>{t('task.coordinationPlan')}</h2>
                 </div>
-                <Pill variant="purple">{t('gw.board.autoAssigned')}</Pill>
+                <SourceLabel source={taskSource} />
               </div>
-              <div className={styles.board}>
+
+              <div className="gwr-board">
                 {(Object.keys(laneLabels) as TaskStatus[]).map((status) => (
-                  <section className={styles.lane} key={status}>
-                    <div className={styles.row}>
-                      <h3 className={styles.laneTitle}>{t(`gw.board.${status === 'backlog' ? 'backlog' : status === 'active' ? 'inProgress' : 'review'}`)}</h3>
-                      <Pill variant="default">{laneTasks(status).length}</Pill>
+                  <section className="gwr-lane" key={status}>
+                    <div className="gwr-row">
+                      <h3 className="gwr-lane-title">{laneLabels[status]}</h3>
+                      <span className="gwr-pill">{laneTasks(status).length}</span>
                     </div>
                     {laneTasks(status).map((task) => (
-                      <article className={styles.taskCard} key={task.id}>
-                        <div className={styles.row}>
-                          <Pill variant={task.status === 'review' ? 'purple' : 'cyan'}>{task.tag}</Pill>
-                          <span style={{ fontSize: 12, color: 'var(--muted-foreground)' }}>{task.progress}%</span>
+                      <article className="gwr-card" key={task.id}>
+                        <div className="gwr-row">
+                          <span className={task.status === "review" ? "gwr-pill purple" : "gwr-pill cyan"}>
+                            {tagLabels[task.tag] || task.tag}
+                          </span>
+                          <span className="gwr-tiny">{task.progress}%</span>
                         </div>
                         <h3>{task.title}</h3>
-                        <p style={{ margin: 0, fontSize: 12, color: 'var(--muted-foreground)' }}>{task.summary}</p>
-                        <div className={styles.progress} aria-label={`${task.title} progress`}>
-                          <span className={styles.progressFill} style={{ width: `${task.progress}%` }} />
+                        <p className="gwr-small">{task.summary}</p>
+                        <div className="gwr-progress" aria-label={t('task.progressAria', { title: task.title })}>
+                          <span style={{ width: `${task.progress}%` }} />
                         </div>
-                        <div className={styles.row}>
-                          <span style={{ fontSize: 12, color: 'var(--muted-foreground)' }}>{t('gw.board.owner')}: {task.owner}</span>
-                          {task.id === 'approve' ? (
-                            <Button variant="secondary" size="sm" onClick={assignSecurity}>{t('gw.board.reassign')}</Button>
+                        <div className="gwr-row">
+                          <span className="gwr-tiny">{t('task.owner', { name: task.owner })}</span>
+                          {task.id === "approve" ? (
+                            <button className="gwr-button" type="button" onClick={assignSecurity}>
+                              {t('task.reassign')}
+                            </button>
                           ) : null}
                         </div>
                       </article>
@@ -699,62 +1732,191 @@ export function GroupWorkspacePage() {
               </div>
             </div>
 
-            {/* Feed column */}
-            <div className={`${styles.glassPanel}`}>
-              <div className={styles.sectionHead}>
-                <div>
-                  <p className={styles.feedEyebrow}>{t('gw.feed.eyebrow')}</p>
-                  <h2 className={styles.feedTitle}>{t('gw.feed.title')}</h2>
+            <aside className="gwr-feed gwr-glass">
+              <div className="gwr-section-head">
+                <div className="gwr-title">
+                  <p className="gwr-eyebrow">{t('activity.title')}</p>
+                  <h2>{t('activity.subtitle')}</h2>
                 </div>
-                <Pill variant={syncState.complete ? 'green' : 'cyan'}>
-                  <span className={styles.dot} style={{ marginTop: 0 }} />
-                  {' '}{syncState.complete ? t('gw.feed.synced') : t('gw.feed.live')}
-                </Pill>
+                <SourceLabel source={activitySource} />
               </div>
-              <div className={styles.activityList}>
-                {activityLog.map((activity, index) => (
-                  <div className={styles.activityRow} key={`${activity.title}-${index}`}>
-                    <div className={`${styles.accentIcon} ${accentIconMap[activity.accent] ?? ''}`}>{activity.accent.slice(0, 1).toUpperCase()}</div>
-                    <div style={{ minWidth: 0 }}>
-                      <strong style={{ fontSize: 13 }}>{activity.title}</strong>
-                      <p className={styles.activityRowDesc}>{activity.detail}</p>
-                      <span className={styles.activityTime}>{activity.time}</span>
+
+              <div className="gwr-activity-list">
+                {displayedActivities.map((activity, index) => (
+                  <div className="gwr-activity" key={`${activity.title}-${index}`}>
+                    <AccentIcon accent={activity.accent} label={activity.accent.slice(0, 1).toUpperCase()} />
+                    <div className="gwr-truncate">
+                      <strong>{activity.title}</strong>
+                      <p className="gwr-small gwr-truncate">{activity.detail}</p>
+                      <span className="gwr-tiny">{activity.time}</span>
                     </div>
                   </div>
                 ))}
               </div>
-              <div className={styles.composer}>
-                <div className={styles.row}>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                    <Button variant="icon" onClick={() => fillComposer('@group', 'Mention inserted')} aria-label="Mention member">
-                      <Icon name="alternate_email" />
-                    </Button>
-                    <Button variant="icon" onClick={() => fillComposer('[attachment]', 'Attachment marker inserted')} aria-label="Attach file">
-                      <Icon name="attach_file" />
-                    </Button>
-                    <Button variant="icon" onClick={() => fillComposer('#task', 'Task marker inserted')} aria-label="Create task">
-                      <Icon name="checklist" />
-                    </Button>
+
+              <div className="gwr-composer">
+                <div className="gwr-row">
+                  <div className="gwr-actions">
+                    <button
+                      className="gwr-icon-button"
+                      type="button"
+                      aria-label={t('composer.mentionAria')}
+                      onClick={() => fillComposer("@group", t('confirm.mentionInserted'))}
+                    >
+                      @
+                    </button>
+                    <button
+                      className="gwr-icon-button"
+                      type="button"
+                      aria-label={t('composer.attachAria')}
+                      onClick={() => fillComposer("[attachment]", t('confirm.attachmentInserted'))}
+                    >
+                      +
+                    </button>
+                    <button
+                      className="gwr-icon-button"
+                      type="button"
+                      aria-label={t('composer.taskAria')}
+                      onClick={() => fillComposer("#task", t('confirm.taskMarkerInserted'))}
+                    >
+                      T
+                    </button>
                   </div>
-                  <Pill variant="cyan">@group</Pill>
+                  <span className="gwr-pill cyan">@group</span>
                 </div>
                 <textarea
-                  aria-label="Workspace message"
-                  placeholder={t('gw.composer.placeholder')}
+                  aria-label={t('composer.messageAria')}
+                  placeholder={t('composer.placeholder')}
                   value={noteDraft}
-                  onChange={(e) => setNoteDraft(e.target.value)}
+                  onChange={(event) => setNoteDraft(event.target.value)}
+                  onKeyDown={handleComposerKeyDown}
                 />
-                <div className={styles.row}>
-                  <span className={styles.composerHint}>{noteDraft.trim() ? t('gw.composer.ready', { count: noteDraft.trim().length }) : t('gw.composer.empty')}</span>
-                  <Button variant="primary" size="sm" disabled={!noteDraft.trim()} onClick={sendNote}>{t('gw.composer.send')}</Button>
+                <div className="gwr-row">
+                  <span className="gwr-tiny">{noteDraft.trim() ? t('composer.charactersReady', { count: noteDraft.trim().length }) : t('composer.draftEmpty')}</span>
+                  <button className="gwr-button primary" type="button" disabled={!noteDraft.trim()} onClick={sendNote}>
+                    {t('composer.send')}
+                  </button>
                 </div>
               </div>
+            </aside>
+          </section>
+        </main>
+
+        <aside className="gwr-right gwr-glass">
+          <section className="gwr-section">
+            <div className="gwr-section-head">
+              <div className="gwr-title">
+                <p className="gwr-eyebrow">{t('approval.title')}</p>
+                <h2>{t('approval.parserReady')}</h2>
+              </div>
+              <span className={approved ? "gwr-pill green" : needsEdits ? "gwr-pill purple" : "gwr-pill"}>
+                {approvalLabel}
+              </span>
             </div>
-          </div>
-        </div>
-      </WebLayout>
+            <div className="gwr-approval">
+              <div className="gwr-row">
+                <strong>{approvalLabel}</strong>
+                <span className="gwr-tiny">{t('approval.owner', { name: taskOwner })}</span>
+              </div>
+              <p className="gwr-small">
+                {approved
+                  ? t('approval.detail.approved')
+                  : needsEdits
+                    ? t('approval.detail.changesRequested')
+                    : t('approval.detail.awaitingApproval')}
+              </p>
+              <div className="gwr-actions">
+                <button className="gwr-button warning" type="button" onClick={requestEdits}>
+                  {t('approval.requestEdits')}
+                </button>
+                <button className="gwr-button primary" type="button" onClick={approveParser}>
+                  {t('approval.approve')}
+                </button>
+              </div>
+            </div>
+          </section>
+
+          <section className="gwr-section">
+            <div className="gwr-section-head">
+              <div className="gwr-title">
+                <p className="gwr-eyebrow">{t('sync.title')}</p>
+                <h2>{t('sync.subtitle')}</h2>
+              </div>
+              <span className={`gwr-pill ${syncState.complete ? "green" : "cyan"}`}>{syncState.progress}%</span>
+            </div>
+            <div className="gwr-sync">
+              <div className="gwr-row">
+                <span className="gwr-small">{t('sync.readiness')}</span>
+                <strong>{syncState.complete ? t('sync.status.synced') : approved ? t('sync.status.unlocked') : t('sync.status.locked')}</strong>
+              </div>
+              <div className="gwr-progress" aria-label={t('sync.readinessAria')}>
+                <span style={{ width: `${syncState.progress}%` }} />
+              </div>
+              <button
+                className="gwr-button primary"
+                type="button"
+                disabled={approvalLocked}
+                onClick={syncSnapshot}
+              >
+                {syncState.complete ? t('sync.runAgain') : approved ? t('sync.run') : t('sync.approveToRun')}
+              </button>
+              <div className="gwr-checks">
+                <div className="gwr-check">
+                  <span className="gwr-dot cyan" />
+                  <div>
+                    <strong>{t('sync.checklist.filesIndexed')}</strong>
+                    <p className="gwr-tiny">{t('sync.checklist.filesDetail', { count: workspaceFiles.length })}</p>
+                  </div>
+                </div>
+                <div className="gwr-check">
+                  <span className="gwr-dot purple" />
+                  <div>
+                    <strong>{t('sync.checklist.assignments')}</strong>
+                    <p className="gwr-tiny">{t('sync.checklist.assignmentsDetail', { owner: taskOwner })}</p>
+                  </div>
+                </div>
+                <div className="gwr-check">
+                  <span className="gwr-dot" />
+                  <div>
+                    <strong>{t('sync.checklist.lastSync')}</strong>
+                    <p className="gwr-tiny">{t('sync.checklist.lastSyncDetail', { time: syncState.lastSyncedAt })}</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <section className="gwr-section">
+            <div className="gwr-section-head">
+              <div className="gwr-title">
+                <p className="gwr-eyebrow">{t('files.title')}</p>
+                <h2>{t('files.subtitle')}</h2>
+              </div>
+              <div className="gwr-actions">
+                <SourceLabel source={fileSource} />
+                <button className="gwr-icon-button" type="button" aria-label={t('files.addAria')} onClick={createLocalFile}>
+                  +
+                </button>
+              </div>
+            </div>
+            <div className="gwr-stack">
+              {workspaceFiles.map((file) => (
+                <div className="gwr-file" key={file.name}>
+                  <AccentIcon accent={file.accent} label={file.name.slice(0, 1).toUpperCase()} />
+                  <div className="gwr-truncate">
+                    <strong>{file.name}</strong>
+                    <p className="gwr-tiny gwr-truncate">{file.detail}</p>
+                  </div>
+                  <span className="gwr-tiny">{file.size}</span>
+                </div>
+              ))}
+              {workspaceFiles.length === 0 ? <div className="gwr-empty">{t('files.empty')}</div> : null}
+            </div>
+          </section>
+        </aside>
+      </div>
     </div>
   );
 }
 
-export default GroupWorkspacePage;
+export default GroupWorkspacePageInteractive;
diff --git a/app/web/src/pages/private-chats/PrivateChatsPage.module.css b/app/web/src/pages/private-chats/PrivateChatsPage.module.css
index 5d92c6d7..7929467a 100644
--- a/app/web/src/pages/private-chats/PrivateChatsPage.module.css
+++ b/app/web/src/pages/private-chats/PrivateChatsPage.module.css
@@ -1,113 +1,746 @@
-/* PrivateChatsPage — sidebar + chat + context panel */
-.pageRoot { position: relative; min-height: 100vh; }
-
-/* Search */
-.searchWrap { padding: 6px 14px 8px; }
-.filterNote { padding: 0 16px 8px; color: var(--muted-foreground); font-size: 11px; }
-
-/* Conversation list */
-.convList { display: flex; flex-direction: column; gap: 8px; padding: 0 10px 16px; overflow-y: auto; }
-
-.convCard {
-  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center;
-  min-height: 64px; border: 1px solid transparent; border-radius: 12px; padding: 10px;
-  background: rgba(255,255,255,0.45); color: inherit; cursor: pointer; text-align: left;
-  width: 100%; font: inherit;
-}
-.convCardActive { border-color: rgba(37,99,235,0.28); background: rgba(37,99,235,0.12); }
-.convCardName { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--foreground); }
-.convCardSummary { margin: 4px 0 0; overflow: hidden; color: var(--muted-foreground); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
-.convTime { color: #7f8aa3; font-size: 11px; white-space: nowrap; display: block; }
-.convUnread { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; margin-top: 6px; border-radius: 999px; background: var(--primary); color: var(--primary-foreground); font-size: 11px; font-weight: 800; }
-
-/* Chat header */
-.chatHeader { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 14px 16px; border-bottom: 1px solid rgba(134,157,190,0.24); }
-.chatHeaderMain { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
-.headerName { font-size: 15px; font-weight: 700; margin: 0; color: var(--foreground); }
-.headerRole { font-size: 12px; color: var(--muted-foreground); margin: 2px 0 0; }
-.headerActions { display: flex; align-items: center; gap: 8px; }
-
-.onlineBadge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; background: rgba(5,150,105,0.1); color: #059669; font-size: 11px; font-weight: 800; white-space: nowrap; }
-.onlineDot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; flex-shrink: 0; }
-
-/* Messages */
-.messages { display: flex; flex: 1; flex-direction: column; gap: 14px; min-height: 0; overflow-y: auto; padding: 18px; }
-
-.msgRow { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: start; max-width: 78%; }
-.msgRowMine { align-self: flex-end; grid-template-columns: minmax(0, 1fr) 36px; }
-.msgRowMine .msgAvatar { grid-column: 2; grid-row: 1; }
-.msgRowMine .msgStack { grid-column: 1; grid-row: 1; }
-
-.msgAvatar {
-  width: 36px; height: 36px; border-radius: 50%;
-  display: flex; align-items: center; justify-content: center;
+/* ═══════════════════════════════════════════════════════════════
+   PrivateChatsPage — CSS Module
+   3-column: sidebar (280px) | chat (1fr) | detail (300px)
+   Tokens only: no hardcoded hex/px font-sizes/weights.
+   ═══════════════════════════════════════════════════════════════ */
+
+/* ── Page ──────────────────────────────────────────────── */
+.page {
+  position: relative;
+  min-height: 100vh;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at 14% 8%, oklch(0.55 0.16 255 / 0.12), transparent 34%),
+    radial-gradient(circle at 82% 16%, oklch(0.60 0.12 230 / 0.10), transparent 32%),
+    linear-gradient(135deg, var(--background), var(--secondary), var(--accent));
+  color: var(--foreground);
+}
+
+/* ── Shell (3-col grid) ───────────────────────────────── */
+.shell {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: var(--sidebar-width) minmax(480px, 1fr) var(--detail-width);
+  gap: var(--space-lg);
+  min-height: 100vh;
+  padding: 18px;
+}
+
+/* ── Glass Panel ──────────────────────────────────────── */
+.panel {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  background: oklch(1 0 0 / 0.72);
+  border: 1px solid oklch(1 0 0 / 0.70);
+  border-radius: var(--radius-xl);
+  box-shadow: 0 18px 48px oklch(0.14 0.005 260 / 0.14);
+  backdrop-filter: blur(28px) saturate(160%);
+}
+
+/* ── Header ────────────────────────────────────────────── */
+.header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  min-height: 64px;
+  padding: 14px var(--space-lg);
+  border-bottom: 1px solid oklch(0.55 0.012 260 / 0.22);
+  flex-shrink: 0;
+}
+
+.headerBetween {
+  justify-content: space-between;
+}
+
+.headerStart {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  min-width: 0;
+}
+
+/* ── Title ─────────────────────────────────────────────── */
+.eyebrow {
+  margin: 0 0 2px;
+  color: var(--muted-foreground);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.title h2 {
+  margin: 0;
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-tight);
+}
+
+.title p {
+  margin: 2px 0 0;
+  color: var(--muted-foreground);
+  font-size: var(--font-size-xs);
+}
+
+/* ── Icon Button ───────────────────────────────────────── */
+.iconBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  flex: 0 0 auto;
+  padding: 0;
+  border: 1px solid oklch(0.55 0.012 260 / 0.22);
+  border-radius: var(--radius-lg);
+  background: oklch(1 0 0 / 0.62);
+  color: var(--foreground);
+  box-shadow: 0 8px 20px oklch(0.14 0.005 260 / 0.08);
+  cursor: pointer;
+  transition: background var(--duration-fast) var(--ease-out);
+}
+
+.iconBtn:hover {
+  background: var(--accent);
+}
+
+.iconBtn:active,
+.iconBtnActive {
+  border-color: oklch(0.55 0.16 255 / 0.30);
+  background: oklch(0.55 0.16 255 / 0.10);
+  color: var(--brand);
+}
+
+.iconBtn:disabled {
+  opacity: 0.46;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.iconBtn svg {
+  width: 18px;
+  height: 18px;
+}
+
+/* ── Actions Row ───────────────────────────────────────── */
+.actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+/* ── Search ────────────────────────────────────────────── */
+.searchWrap {
+  position: relative;
+  padding: var(--space-md) 14px var(--space-sm);
+}
+
+.searchIcon {
+  position: absolute;
+  top: 19px;
+  left: 24px;
+  width: 16px;
+  height: 16px;
+  color: var(--muted-foreground);
+  pointer-events: none;
+}
+
+.searchInput {
+  width: 100%;
+  height: 36px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  outline: 0;
+  padding: 0 var(--space-md) 0 32px;
+  background: oklch(1 0 0 / 0.68);
+  color: var(--foreground);
+  font-size: var(--font-size-sm);
+}
+
+.searchInput::placeholder {
+  color: var(--muted-foreground);
+}
+
+/* ── Section Title ─────────────────────────────────────── */
+.sectionTitle {
+  padding: 10px var(--space-lg) var(--space-sm);
+  color: var(--muted-foreground);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.filterNote {
+  padding: 0 var(--space-lg) var(--space-sm);
+  color: var(--muted-foreground);
+  font-size: var(--font-size-xs);
+}
+
+/* ── Conversation List ─────────────────────────────────── */
+.chatList {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0 10px var(--space-lg);
+}
+
+/* ── Chat Card ─────────────────────────────────────────── */
+.chatCard {
+  display: grid;
+  grid-template-columns: 36px minmax(0, 1fr) auto;
+  gap: 10px;
+  align-items: center;
+  min-height: 64px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-xl);
+  padding: 10px;
+  background: oklch(1 0 0 / 0.45);
+  color: inherit;
+  cursor: pointer;
+  text-align: left;
+  font-family: inherit;
+  font-size: inherit;
+  transition: border-color var(--duration-fast), background var(--duration-fast);
+}
+
+.chatCard:hover {
+  background: oklch(1 0 0 / 0.62);
+}
+
+.chatCardActive {
+  border-color: oklch(0.55 0.16 255 / 0.28);
+  background: linear-gradient(135deg, oklch(0.55 0.16 255 / 0.12), oklch(0.60 0.12 230 / 0.08));
+}
+
+.chatCardBody {
+  min-width: 0;
+}
+
+.chatCardBody h3 {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-tight);
+}
+
+.chatCardBody p {
+  margin: 4px 0 0;
+  overflow: hidden;
+  color: var(--muted-foreground);
+  font-size: var(--font-size-xs);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chatCardMeta {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+}
+
+/* ── Time ──────────────────────────────────────────────── */
+.time {
+  color: var(--muted-foreground);
+  font-size: var(--font-size-xs);
+  white-space: nowrap;
+}
+
+/* ── Unread Badge ──────────────────────────────────────── */
+.unread {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  border-radius: var(--radius-full);
+  background: var(--brand);
+  color: var(--primary-foreground);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+}
+
+/* ── Avatar ────────────────────────────────────────────── */
+.avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  flex: 0 0 36px;
+  border-radius: 10px;
+  background: var(--brand);
+  color: var(--primary-foreground);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  box-shadow: 0 10px 22px oklch(0.55 0.16 255 / 0.24);
+}
+
+.avatarSm {
+  width: 32px;
+  height: 32px;
+  flex: 0 0 32px;
+}
+
+.avatarCyan {
+  background: var(--info);
+  box-shadow: 0 10px 22px oklch(0.60 0.12 230 / 0.24);
+}
+
+.avatarPurple {
   background: var(--primary);
-  color: #fff; font-size: 12px; font-weight: 800; flex-shrink: 0;
-}
-.msgAvatarCyan { background: #08a7cf; }
-.msgAvatarPurple { background: #7457e8; }
-.msgAvatarMine { background: var(--primary); }
-
-.msgMeta { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; color: var(--muted-foreground); font-size: 11px; }
-.msgRowMine .msgMeta { justify-content: flex-end; }
-.msgMetaAuthor { font-size: 13px; font-weight: 700; color: var(--foreground); }
-
-/* Message bubble */
-.msgBubble { border: 1px solid rgba(255,255,255,0.7); border-radius: 12px; padding: 12px 14px; background: rgba(255,255,255,0.74); box-shadow: 0 10px 26px rgba(31,57,102,0.09); color: #22304a; font-size: 14px; line-height: 1.5; }
-.msgBubbleMine { border-color: rgba(37,99,235,0.36); background: var(--primary); color: #fff; }
-.msgBubbleDraft { border-style: dashed; }
-
-/* Key button */
-.keyBtn { border: 0; border-radius: 7px; padding: 3px 7px; background: rgba(124,58,237,0.1); color: #6d28d9; font-size: 11px; font-weight: 800; cursor: pointer; }
-.keyBtnActive { background: rgba(124,58,237,0.18); color: #4c1d95; }
-
-/* Code / Quote */
-.codeCard { margin-top: 10px; overflow: hidden; border: 1px solid rgba(23,32,51,0.1); border-radius: 10px; background: #111827; color: #d7e5ff; }
-.codeCardHeader { display: flex; align-items: center; justify-content: space-between; min-height: 34px; padding: 0 10px; border-bottom: 1px solid rgba(255,255,255,0.08); color: #9fb4d8; font-family: monospace; font-size: 12px; }
-.codeCardPre { margin: 0; overflow-x: auto; padding: 10px; font-family: monospace; font-size: 12px; line-height: 1.55; }
-.quote { margin-bottom: 10px; border-left: 3px solid #0891b2; padding: 8px 10px; border-radius: 8px; background: rgba(8,145,178,0.08); color: #345064; }
-
-/* Attachments */
-.attachmentList { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
-.attachment { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; border: 1px solid rgba(132,155,190,0.24); border-radius: 8px; padding: 6px 10px; background: rgba(255,255,255,0.68); color: #344055; font-size: 12px; }
-.attachmentBtn { cursor: pointer; font: inherit; }
-.attachmentActive { border-color: rgba(37,99,235,0.34); background: rgba(37,99,235,0.1); color: #1d4ed8; font-weight: 800; }
-
-/* Composer */
-.composerWrap { flex-shrink: 0; padding: 0 18px 18px; }
-.attachmentTray { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; padding: 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.62); background: rgba(255,255,255,0.46); }
-.selectedAttachments { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
-
-.composer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: end; min-height: 88px; padding: 12px; border: 1px solid rgba(255,255,255,0.7); border-radius: 12px; background: rgba(255,255,255,0.72); }
-.composerTools { display: flex; align-items: center; gap: 8px; }
-.composerTextarea { min-height: 58px; max-height: 130px; resize: none; border: 1px solid rgba(132,155,190,0.2); border-radius: 10px; outline: 0; padding: 12px 14px; background: rgba(255,255,255,0.64); color: var(--foreground); line-height: 1.45; font: inherit; }
-.composerActions { display: flex; align-items: center; gap: 8px; }
-
-.sendBtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border: 0; border-radius: 8px; background: var(--primary); color: #fff; font-weight: 800; cursor: pointer; }
-.sendBtn:disabled { opacity: 0.46; cursor: not-allowed; }
-
-/* Notice */
-.noticeBar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; padding: 9px 10px; border: 1px solid rgba(37,99,235,0.22); border-radius: 10px; background: rgba(255,255,255,0.66); font-size: 12px; color: var(--foreground); }
-.noticeSuccess { border-color: rgba(5,150,105,0.24); background: rgba(5,150,105,0.08); color: #047857; }
-.noticeActions { display: flex; align-items: center; gap: 8px; }
-
-/* Context panel */
-.contextBody { display: flex; flex-direction: column; gap: 12px; flex: 1; overflow-y: auto; padding: 14px; }
-.miniCard { border: 1px solid rgba(132,155,190,0.22); border-radius: 12px; padding: 12px; background: rgba(255,255,255,0.55); }
-.miniCard h3 { margin: 0 0 8px; font-size: 13px; color: var(--foreground); }
-.miniCard p { margin: 0; color: var(--muted-foreground); font-size: 12px; line-height: 1.45; }
-.miniCard ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
-.miniCard li { color: var(--muted-foreground); font-size: 12px; line-height: 1.45; }
-
-.progress { height: 8px; overflow: hidden; border-radius: 999px; background: rgba(37,99,235,0.1); margin-top: 10px; }
-.progressFill { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
-
-.chipRow { display: flex; flex-wrap: wrap; gap: 8px; }
-.chip { min-height: 28px; padding: 0 9px; border: 1px solid rgba(132,155,190,0.24); border-radius: 8px; background: rgba(255,255,255,0.62); color: #40516f; font-size: 12px; display: inline-flex; align-items: center; }
-
-.emptyState { align-self: center; padding: 14px 16px; border-radius: 12px; background: rgba(255,255,255,0.55); color: var(--muted-foreground); font-size: 13px; }
+  box-shadow: 0 10px 22px oklch(0.21 0.006 286 / 0.24);
+}
+
+/* ── Status Dot ────────────────────────────────────────── */
+.status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 24px;
+  padding: 0 9px;
+  border-radius: var(--radius-full);
+  background: oklch(0.58 0.18 150 / 0.12);
+  color: var(--success);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  white-space: nowrap;
+}
+
+.statusDot {
+  width: 7px;
+  height: 7px;
+  border-radius: var(--radius-full);
+  background: currentColor;
+  flex-shrink: 0;
+}
+
+/* ── Messages Area ─────────────────────────────────────── */
+.messages {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 14px;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 18px;
+}
+
+/* ── Message Row ───────────────────────────────────────── */
+.messageRow {
+  display: grid;
+  grid-template-columns: 36px minmax(0, 1fr);
+  gap: 10px;
+  align-items: start;
+  max-width: 78%;
+}
+
+.messageRowMine {
+  align-self: flex-end;
+  grid-template-columns: minmax(0, 1fr) 36px;
+}
+
+.messageRowMine .avatarCell {
+  grid-column: 2;
+  grid-row: 1;
+}
+
+.messageRowMine .messageStack {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+/* ── Message Meta ──────────────────────────────────────── */
+.messageMeta {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  margin: 0 0 6px;
+  color: var(--muted-foreground);
+  font-size: var(--font-size-xs);
+}
+
+.messageRowMine .messageMeta {
+  justify-content: flex-end;
+}
+
+.messageMeta strong {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+}
+
+/* ── Key Button ────────────────────────────────────────── */
+.keyBtn {
+  border: 0;
+  border-radius: 7px;
+  padding: 3px 7px;
+  background: oklch(0.21 0.006 286 / 0.10);
+  color: var(--primary);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  font-family: inherit;
+  white-space: nowrap;
+}
+
+.keyBtnActive {
+  background: oklch(0.21 0.006 286 / 0.18);
+  color: var(--primary);
+}
+
+/* ── Message Bubble ────────────────────────────────────── */
+.bubble {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xl);
+  padding: var(--space-md) 14px;
+  background: var(--card);
+  box-shadow: 0 10px 26px oklch(0.14 0.005 260 / 0.09);
+  color: var(--foreground);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
+}
+
+.bubbleMine {
+  border-color: oklch(0.55 0.16 255 / 0.36);
+  background: var(--brand);
+  color: var(--primary-foreground);
+}
+
+.bubbleDraft {
+  border-style: dashed;
+}
+
+/* ── Quote Block ───────────────────────────────────────── */
+.quote {
+  margin-bottom: 10px;
+  border-left: 3px solid var(--info);
+  padding: var(--space-sm) 10px;
+  border-radius: var(--radius-lg);
+  background: oklch(0.60 0.12 230 / 0.08);
+  color: var(--foreground);
+  font-size: var(--font-size-xs);
+}
+
+.quote strong {
+  font-weight: var(--font-weight-medium);
+}
+
+/* ── Code Block ────────────────────────────────────────── */
+.codeBlock {
+  margin-top: 10px;
+  overflow: hidden;
+  border: 1px solid oklch(0.14 0.005 260 / 0.12);
+  border-radius: 10px;
+  background: oklch(0.14 0.005 260);
+  color: oklch(0.80 0.04 260);
+}
+
+.codeHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 34px;
+  padding: 0 10px;
+  border-bottom: 1px solid oklch(1 0 0 / 0.08);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-xs);
+}
+
+.codeBody {
+  margin: 0;
+  overflow-x: auto;
+  padding: 10px;
+  font-family: var(--font-mono);
+  font-size: var(--font-size-xs);
+  line-height: 1.55;
+}
+
+.codeLine {
+  display: block;
+  white-space: pre;
+}
+
+/* ── Attachments ───────────────────────────────────────── */
+.attachmentList {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-sm);
+  margin-top: 10px;
+}
+
+.attachment {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-sm);
+  min-height: 34px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 6px 10px;
+  background: var(--card);
+  color: var(--foreground);
+  font-size: var(--font-size-xs);
+}
+
+button.attachment {
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.attachmentActive {
+  border-color: oklch(0.55 0.16 255 / 0.34);
+  background: oklch(0.55 0.16 255 / 0.10);
+  color: var(--brand);
+  font-weight: var(--font-weight-medium);
+}
+
+.attachment svg {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+/* ── Composer ──────────────────────────────────────────── */
+.composerWrap {
+  flex: 0 0 auto;
+  padding: 0 18px 18px;
+}
+
+.attachmentTray {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-sm);
+  margin-bottom: 10px;
+  padding: 10px;
+}
+
+.selectedAttachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-sm);
+  margin-bottom: 10px;
+}
+
+.composer {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: 10px;
+  align-items: end;
+  min-height: 88px;
+  padding: var(--space-md);
+}
+
+.composerTools,
+.composerActions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.composerTextarea {
+  min-height: 58px;
+  max-height: 130px;
+  resize: none;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  outline: 0;
+  padding: var(--space-md) 14px;
+  background: var(--card);
+  color: var(--foreground);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
+  font-family: inherit;
+}
+
+.composerTextarea::placeholder {
+  color: var(--muted-foreground);
+}
+
+/* ── Send Button ───────────────────────────────────────── */
+.sendBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-sm);
+  height: 36px;
+  padding: 0 14px;
+  border: 1px solid oklch(0.55 0.16 255 / 0.34);
+  border-radius: var(--radius-lg);
+  background: var(--brand);
+  color: var(--primary-foreground);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  box-shadow: 0 8px 20px oklch(0.14 0.005 260 / 0.08);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.sendBtn:disabled {
+  opacity: 0.46;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+.sendBtn svg {
+  width: 18px;
+  height: 18px;
+}
+
+/* ── Notice Bar ────────────────────────────────────────── */
+.notice {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-md);
+  margin-bottom: 10px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 9px 10px;
+  background: var(--card);
+  color: var(--foreground);
+  font-size: var(--font-size-xs);
+}
+
+.noticeSuccess {
+  border-color: oklch(0.58 0.18 150 / 0.24);
+  background: oklch(0.58 0.18 150 / 0.08);
+  color: var(--success);
+}
+
+.noticeActions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+/* ── Chip ──────────────────────────────────────────────── */
+.chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 28px;
+  padding: 0 9px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  background: var(--card);
+  color: var(--foreground);
+  font-size: var(--font-size-xs);
+  box-shadow: none;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.chipRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-sm);
+}
+
+/* ── Detail / Context Panel ────────────────────────────── */
+.contextBody {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: var(--space-md);
+  min-height: 0;
+  overflow-y: auto;
+  padding: 14px;
+}
+
+.miniCard {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xl);
+  padding: var(--space-md);
+  background: var(--card);
+}
+
+.miniCard h3 {
+  margin: 0 0 var(--space-sm);
+  font-size: var(--font-size-sm);
+}
+
+.miniCard p,
+.miniCard li {
+  color: var(--muted-foreground);
+  font-size: var(--font-size-xs);
+  line-height: var(--line-height-normal);
+}
+
+.miniCard p {
+  margin: 0;
+}
+
+.miniCard ul {
+  display: grid;
+  gap: var(--space-sm);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* ── Progress Bar ──────────────────────────────────────── */
+.progress {
+  height: 8px;
+  overflow: hidden;
+  border-radius: var(--radius-full);
+  background: oklch(0.55 0.16 255 / 0.10);
+}
+
+.progressFill {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, var(--brand), var(--info), var(--primary));
+}
+
+/* ── Empty State ───────────────────────────────────────── */
+.empty {
+  align-self: center;
+  border-radius: var(--radius-xl);
+  padding: 14px var(--space-lg);
+  background: oklch(1 0 0 / 0.55);
+  color: var(--muted-foreground);
+  font-size: var(--font-size-sm);
+}
+
+/* ── Responsive ────────────────────────────────────────── */
+@media (max-width: 1120px) {
+  .shell {
+    grid-template-columns: 260px minmax(0, 1fr);
+  }
+
+  .contextPanel {
+    display: none;
+  }
+
+  .messageRow {
+    max-width: 88%;
+  }
+}
 
 @media (max-width: 760px) {
-  .composer { grid-template-columns: 1fr; }
-  .msgRow { max-width: 88%; }
+  .page {
+    overflow: auto;
+  }
+
+  .shell {
+    grid-template-columns: 1fr;
+    min-height: auto;
+    padding: var(--space-md);
+  }
+
+  .sidebar {
+    max-height: 260px;
+  }
+
+  .chatPanel {
+    min-height: 680px;
+  }
+
+  .composer {
+    grid-template-columns: 1fr;
+  }
 }
diff --git a/app/web/src/pages/private-chats/PrivateChatsPage.tsx b/app/web/src/pages/private-chats/PrivateChatsPage.tsx
index 1dddb267..a231aec6 100644
--- a/app/web/src/pages/private-chats/PrivateChatsPage.tsx
+++ b/app/web/src/pages/private-chats/PrivateChatsPage.tsx
@@ -1,437 +1,1714 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState, type KeyboardEvent } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Icon, Button, SearchInput } from '@shared/ui';
-import { ParticleCanvas } from '@/components/ParticleCanvas';
-import { WebLayout } from '@/components/WebLayout';
-import styles from './PrivateChatsPage.module.css';
+import type { HubMessage, HubSession } from '@shared/index';
+import { useHubIMSnapshot } from '../../hooks/useHubIMSnapshot';
+import { useHubSession } from '../../hooks/useHubSession';
 
-/* ---- inline mock data (static prototype) ---- */
+type Accent = 'blue' | 'cyan' | 'purple';
 
-type MockThread = { id: string; title: string; projectId: string; status: string };
-type MockMessage = { id: string; role: string; content: string; threadId: string };
+type Attachment = {
+  name: string;
+  detail: string;
+};
 
-const mockThreads: MockThread[] = [
-  { id: 'thread-01', title: 'Frontend page review', projectId: 'ui-coordination', status: 'active' },
-  { id: 'thread-02', title: 'CSS module migration', projectId: 'ui-coordination', status: 'archived' },
-  { id: 'thread-03', title: 'TypeScript migration', projectId: 'infra', status: 'active' },
-];
+type CodeBlock = {
+  file: string;
+  lines: string[];
+};
 
-const mockMessages: MockMessage[] = [
-  { id: 'msg-001', role: 'user', content: 'Can we review the AgentSquare page layout? I think the stats row needs to be 4 columns instead of 3.', threadId: 'thread-01' },
-  { id: 'msg-002', role: 'agent', content: 'Looking at AgentSquare. The stats row currently uses grid-template-columns: repeat(3, minmax(0, 1fr)). I would recommend moving to repeat(4, minmax(0, 1fr)) to match the convention we are using in Workbench and Projects.', threadId: 'thread-01' },
-  { id: 'msg-003', role: 'user', content: 'Good catch. Also, do we need a confirmation bar like the other pages?', threadId: 'thread-01' },
-  { id: 'msg-004', role: 'agent', content: 'Yes — AgentSquare already has a confirmation bar via a fixed-position element at the root level. It shows feedback when users add/remove agents or toggle favorites. It follows the same pattern as GroupWorkspace.', threadId: 'thread-01' },
-  { id: 'msg-005', role: 'user', content: 'CSS modules migration plan for PrivateChats', threadId: 'thread-02' },
-  { id: 'msg-006', role: 'agent', content: 'PrivateChats currently uses inline styles. I will migrate to PrivateChatsPage.module.css with design tokens (var(--primary), var(--border), etc.) and the import styles pattern.', threadId: 'thread-02' },
-];
+type QuoteBlock = {
+  title: string;
+  body: string;
+};
 
-/* ---- Mock Event Stream (static prototype) ---- */
+type Message = {
+  id: string;
+  author: string;
+  role: string;
+  time: string;
+  side: 'left' | 'right';
+  body: string;
+  accent?: Accent;
+  attachments?: Attachment[];
+  code?: CodeBlock;
+  quote?: QuoteBlock;
+  isDraft?: boolean;
+};
 
-type StreamEvent = { type: string; payload: Record<string, unknown> };
+type Conversation = {
+  id: string;
+  name: string;
+  initials: string;
+  role: string;
+  time: string;
+  summary: string;
+  unread: number;
+  accent: Accent;
+  messages: Message[];
+};
 
-class MockEventStream {
-  private listeners: Map<string, Array<(event: StreamEvent) => void>> = new Map();
-  private destroyed = false;
+type Particle = {
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+  radius: number;
+  hue: number;
+  alpha: number;
+};
 
-  onType(type: string, listener: (event: StreamEvent) => void) {
-    const existing = this.listeners.get(type) ?? [];
-    existing.push(listener);
-    this.listeners.set(type, existing);
-    return () => {
-      if (this.destroyed) return;
-      const arr = this.listeners.get(type);
-      if (arr) this.listeners.set(type, arr.filter((l) => l !== listener));
-    };
+type AttachmentOption = Attachment & {
+  id: string;
+  icon: string;
+};
+
+type ConversationSnapshot = Conversation & {
+  allMessages: Message[];
+  currentSummary: string;
+  currentTime: string;
+  currentUnread: number;
+};
+
+type Notice = {
+  id: number;
+  text: string;
+  tone: 'info' | 'success';
+};
+
+type HubConversationLabels = {
+  agent: string;
+  user: string;
+  recalled: string;
+  privateSession: string;
+  privateSessionFallback: string;
+  noRecentMessages: string;
+};
+
+const accentOptions: Accent[] = ['blue', 'cyan', 'purple'];
+
+const attachmentOptions: AttachmentOption[] = [
+  { id: 'local-context', name: 'local-context.md', detail: 'queued', icon: 'description' },
+  { id: 'selection-snippet', name: 'selection.tsx', detail: 'snippet', icon: 'code' },
+  { id: 'handoff-checklist', name: 'handoff checklist', detail: 'note', icon: 'tag' },
+];
+
+function getLastMessageSummary(message: Message) {
+  const prefix = message.attachments?.length ? `[${message.attachments.length} attachments] ` : '';
+  return `${prefix}${message.body}`;
+}
+
+function messageMatchesQuery(message: Message, query: string) {
+  if (!query) {
+    return true;
   }
 
-  emit(event: StreamEvent) {
-    if (this.destroyed) return;
-    const handlers = this.listeners.get(event.type);
-    if (handlers) handlers.forEach((h) => h(event));
+  const searchableText = [
+    message.author,
+    message.role,
+    message.body,
+    message.quote?.title,
+    message.quote?.body,
+    message.code?.file,
+    ...(message.code?.lines ?? []),
+    ...(message.attachments?.flatMap((attachment) => [attachment.name, attachment.detail]) ?? []),
+  ]
+    .filter(Boolean)
+    .join(' ')
+    .toLowerCase();
+
+  return searchableText.includes(query);
+}
+
+function conversationMatchesQuery(conversation: ConversationSnapshot, query: string) {
+  if (!query) {
+    return true;
   }
 
-  destroy() { this.destroyed = true; this.listeners.clear(); }
+  const searchableText = [
+    conversation.name,
+    conversation.initials,
+    conversation.role,
+    conversation.currentSummary,
+    conversation.currentTime,
+  ]
+    .join(' ')
+    .toLowerCase();
+
+  return searchableText.includes(query) || conversation.allMessages.some((message) => messageMatchesQuery(message, query));
 }
 
-function playMessageStream(stream: MockEventStream, opts?: { messageId?: string; threadId?: string; chunkDelayMs?: number }) {
-  const msgId = opts?.messageId ?? 'stream-msg';
-  const chunks = ['Starting', ' the review ', 'of the current ', 'codebase changes.', '\n\nKey findings:', '\n- No type errors', '\n- All pages use CSS Modules', '\n- i18n keys are complete'];
-  let i = 0;
-  const interval = setInterval(() => {
-    if (i < chunks.length) {
-      stream.emit({ type: 'message.delta', payload: { messageId: msgId, delta: chunks[i] } });
-      i++;
-    } else {
-      clearInterval(interval);
+function parseMessageContent(content: string): string {
+  try {
+    const parsed = JSON.parse(content) as unknown;
+    if (typeof parsed === 'string') return parsed;
+    if (typeof parsed === 'object' && parsed !== null) {
+      const record = parsed as Record<string, unknown>;
+      if (typeof record.text === 'string') return record.text;
     }
-  }, opts?.chunkDelayMs ?? 80);
-  return () => clearInterval(interval);
-}
+  } catch {
+    // Hub text messages can be plain strings or JSON envelopes.
+  }
 
-type Accent = 'blue' | 'cyan' | 'purple';
-type Attachment = { name: string; detail: string };
-type CodeBlock = { file: string; lines: string[] };
-type QuoteBlock = { title: string; body: string };
+  return content;
+}
 
-type Message = {
-  id: string; author: string; role: string; time: string; side: 'left' | 'right';
-  body: string; accent?: Accent; attachments?: Attachment[]; code?: CodeBlock;
-  quote?: QuoteBlock; isDraft?: boolean;
-};
+function formatHubTime(value?: string): string {
+  if (!value) return '--:--';
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value.slice(11, 16) || '--:--';
+  return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+}
 
-type Conversation = {
-  id: string; name: string; initials: string; role: string; time: string;
-  summary: string; unread: number; accent: Accent; messages: Message[];
-};
+function initialsFromName(name: string): string {
+  const initials = name
+    .split(/\s+/)
+    .filter(Boolean)
+    .map((word) => word[0])
+    .join('')
+    .slice(0, 2)
+    .toUpperCase();
 
-type AttachmentOption = Attachment & { id: string; icon: string };
+  return initials || 'PC';
+}
 
-type ConversationSnapshot = Conversation & {
-  allMessages: Message[]; currentSummary: string; currentTime: string; currentUnread: number;
-};
+function sessionName(session: HubSession, labels: HubConversationLabels): string {
+  return session.name || `${labels.privateSessionFallback} ${session.session_id || session.id || ''}`.trim();
+}
 
-type Notice = { id: number; text: string; tone: 'info' | 'success' };
+function messageFromHub(message: HubMessage, accent: Accent, labels: HubConversationLabels): Message {
+  const isAgent = message.sender_type === 'agent';
+  const isUser = message.sender_type === 'user';
 
-function formatClock(date = new Date()) {
-  return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
+  return {
+    id: message.id,
+    author: isAgent ? labels.agent : isUser ? labels.user : message.sender_type,
+    body: message.recalled ? labels.recalled : parseMessageContent(message.content),
+    role: `${message.content_type} / ${message.sender_type}`,
+    side: isAgent ? 'left' : 'right',
+    time: formatHubTime(message.created_at),
+    ...(isAgent ? { accent } : {}),
+  };
 }
 
-function getLastMessageSummary(message: Message) {
-  const prefix = message.attachments?.length ? `[${message.attachments.length} attachments] ` : '';
-  return `${prefix}${message.body}`;
-}
+function conversationFromHubSession(
+  session: HubSession,
+  messages: HubMessage[],
+  index: number,
+  labels: HubConversationLabels,
+): Conversation {
+  const accent = accentOptions[index % accentOptions.length] ?? 'blue';
+  const name = sessionName(session, labels);
+  const sessionMessages = messages.map((message) => messageFromHub(message, accent, labels));
+  const lastMessage = sessionMessages[sessionMessages.length - 1];
 
-const conversations: Conversation[] = mockThreads.map((thread, ti) => {
-  const threadMessages = mockMessages.filter((m) => m.threadId === thread.id);
-  const accentOptions: Accent[] = ['blue', 'cyan', 'purple'];
   return {
-    id: thread.id, name: thread.title ?? `Thread ${thread.id}`,
-    initials: (thread.title ?? 'T').slice(0, 2).toUpperCase(),
-    role: thread.projectId, time: '10:42',
-    summary: thread.status === 'active' ? 'Active conversation' : 'Archived',
-    unread: ti === 0 ? 2 : ti === 1 ? 0 : 1,
-    accent: accentOptions[ti % accentOptions.length]!,
-    messages: threadMessages.map((msg) => ({
-      id: msg.id, author: msg.role === 'user' ? 'You' : 'Agent',
-      role: msg.role === 'user' ? 'Owner' : 'Agent',
-      time: '10:30',
-      side: (msg.role === 'user' ? 'right' : 'left') as 'left' | 'right',
-      body: msg.content,
-      ...(msg.role === 'agent' ? { accent: accentOptions[ti % accentOptions.length] } : {}),
-    })),
+    accent,
+    id: session.session_id || session.id || `hub-session-${index}`,
+    initials: initialsFromName(name),
+    messages: sessionMessages,
+    name,
+    role: labels.privateSession,
+    summary: lastMessage?.body || session.announcement || labels.noRecentMessages,
+    time: lastMessage?.time || formatHubTime(session.last_message_at ?? session.updated_at ?? session.created_at),
+    unread: session.unread_count ?? 0,
   };
-});
+}
 
-const attachmentOptions: AttachmentOption[] = [
-  { id: 'local-context', name: 'local-context.md', detail: 'queued', icon: 'description' },
-  { id: 'selection-snippet', name: 'selection.tsx', detail: 'snippet', icon: 'code' },
-  { id: 'handoff-checklist', name: 'handoff checklist', detail: 'note', icon: 'tag' },
-];
+const pageStyles = `
+  @import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap");
+  @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..24,400,0,0");
 
-const initialUnreadByChat = conversations.reduce<Record<string, number>>((m, c) => { m[c.id] = c.unread; return m; }, {});
+  .pc-page {
+    position: relative;
+    height: 100%;
+    overflow: hidden;
+    background:
+      radial-gradient(circle at 18% 12%, rgba(8, 167, 207, 0.16), transparent 28%),
+      radial-gradient(circle at 82% 8%, rgba(116, 87, 232, 0.14), transparent 30%),
+      linear-gradient(135deg, var(--bg), var(--surface-alt));
+    color: var(--text);
+    font-family: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
 
-function messageMatchesQuery(msg: Message, q: string) {
-  if (!q) return true;
-  const txt = [msg.author, msg.role, msg.body, msg.quote?.title, msg.quote?.body, msg.code?.file, ...(msg.code?.lines ?? []), ...(msg.attachments?.flatMap((a) => [a.name, a.detail]) ?? [])].filter(Boolean).join(' ').toLowerCase();
-  return txt.includes(q);
-}
+  .pc-particles {
+    position: fixed;
+    inset: 0;
+    z-index: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    opacity: 0.72;
+  }
+
+  [data-theme="dark"] .pc-page {
+    background:
+      radial-gradient(circle at 18% 12%, rgba(8, 167, 207, 0.1), transparent 28%),
+      radial-gradient(circle at 82% 8%, rgba(116, 87, 232, 0.1), transparent 30%),
+      linear-gradient(135deg, var(--bg), var(--surface-alt));
+  }
+
+  .pc-symbol {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-family: "Material Symbols Rounded";
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1;
+    font-variation-settings: "FILL" 0, "wght" 450, "GRAD" 0, "opsz" 24;
+  }
+
+  .pc-shell {
+    position: relative;
+    z-index: 1;
+    display: grid;
+    grid-template-columns: 280px minmax(480px, 1fr) 336px;
+    gap: 18px;
+    height: 100%;
+    padding: 18px;
+  }
+
+  .pc-glass {
+    background: var(--glass-bg);
+    border: 1px solid var(--glass-border);
+    border-radius: 12px;
+    box-shadow: 0 18px 48px var(--glass-shadow);
+    backdrop-filter: blur(28px) saturate(160%);
+    -webkit-backdrop-filter: blur(28px) saturate(160%);
+  }
+
+  .pc-panel {
+    display: flex;
+    min-height: 0;
+    overflow: hidden;
+    flex-direction: column;
+  }
+
+  .pc-sidebar {
+    padding: 18px;
+  }
+
+  .pc-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-height: 68px;
+    padding: 14px 16px;
+    border-bottom: 1px solid var(--border);
+  }
+
+  .pc-brand {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding-bottom: 14px;
+    border-bottom: 1px solid var(--border-subtle);
+  }
+
+  .pc-brand-mark {
+    width: 38px;
+    height: 38px;
+    display: grid;
+    place-items: center;
+    flex: 0 0 auto;
+    color: var(--white);
+    font-size: 16px;
+    font-weight: 900;
+    line-height: 1;
+    border-radius: 10px;
+    background: var(--accent-gradient);
+    box-shadow: 0 10px 22px var(--brand-glow);
+  }
+  .pc-chat-header,
+  .pc-context-header {
+    justify-content: space-between;
+  }
+
+  .pc-title h1,
+  .pc-title h2 {
+    margin: 0;
+    color: var(--text);
+    font-size: 15px;
+    line-height: 1.25;
+  }
+
+  .pc-brand h2 {
+    margin: 0;
+    color: var(--text);
+    font-size: 15px;
+    line-height: 1.25;
+  }
+
+  .pc-title .pc-brand-sub {
+    margin: 4px 0 0;
+    color: var(--text-muted);
+    font-size: 11px;
+    font-weight: 800;
+    letter-spacing: 0.09em;
+  }
+
+  .pc-eyebrow,
+  .pc-section-title,
+  .pc-meta {
+    margin: 0 0 4px;
+    color: var(--text-muted);
+    font-size: 11px;
+    font-weight: 800;
+    letter-spacing: 0.09em;
+    text-transform: uppercase;
+  }
+
+  .pc-title .pc-brand-sub {
+    margin: 4px 0 0;
+    color: var(--text-muted);
+    font-size: 11px;
+    font-weight: 800;
+    letter-spacing: 0.09em;
+    line-height: 1.236;
+  }
+
+  .pc-icon-button,
+  .pc-tool-button,
+  .pc-send-button,
+  .pc-chip {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: var(--surface);
+    color: var(--text);
+    box-shadow: none;
+    cursor: pointer;
+  }
+
+  .pc-icon-button,
+  .pc-tool-button {
+    width: 34px;
+    height: 34px;
+    flex: 0 0 auto;
+    padding: 0;
+  }
+
+  .pc-icon-button.is-active,
+  .pc-tool-button.is-active {
+    border-color: var(--accent-border);
+    background: var(--accent-light);
+    color: var(--accent);
+  }
+
+  .pc-icon-button:disabled,
+  .pc-tool-button:disabled,
+  .pc-send-button:disabled,
+  .pc-key-button:disabled {
+    opacity: 0.46;
+    cursor: not-allowed;
+    box-shadow: none;
+  }
+
+  .pc-search {
+    position: relative;
+    padding: 12px 14px 8px;
+  }
+
+  .pc-search span {
+    position: absolute;
+    top: 21px;
+    left: 25px;
+    color: var(--text-muted);
+    font-size: 18px;
+  }
+
+  .pc-search input {
+    width: 100%;
+    height: 36px;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    outline: 0;
+    padding: 0 12px 0 34px;
+    background: var(--surface);
+    color: var(--text);
+  }
+
+  .pc-filter-note {
+    padding: 0 16px 8px;
+    color: var(--text-muted);
+    font-size: 11px;
+  }
+
+  .pc-section-title {
+    padding: 10px 16px 8px;
+  }
+
+  .pc-chat-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    min-height: 0;
+    overflow-y: auto;
+    padding: 0 10px 16px;
+  }
+
+  .pc-chat-card {
+    display: grid;
+    grid-template-columns: 36px minmax(0, 1fr) auto;
+    gap: 10px;
+    align-items: center;
+    min-height: 64px;
+    border: 1px solid var(--glass-border);
+    border-radius: 12px;
+    padding: 10px;
+    background: var(--surface);
+    color: inherit;
+    cursor: pointer;
+    text-align: left;
+  }
+
+  .pc-chat-card.is-active {
+    border-color: var(--accent-border);
+    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(8, 145, 178, 0.08));
+  }
+
+  .pc-avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    flex: 0 0 36px;
+    border-radius: 10px;
+    background: var(--brand-gradient);
+    color: var(--white);
+    font-size: 12px;
+    font-weight: 800;
+    box-shadow: 0 10px 22px var(--shadow);
+  }
+
+  .pc-avatar.cyan {
+    background: linear-gradient(135deg, var(--accent), var(--success-dot));
+  }
+
+  .pc-avatar.purple {
+    background: var(--accent-gradient);
+  }
+
+  .pc-chat-card h3,
+  .pc-message-meta strong {
+    margin: 0;
+    font-size: 13px;
+    line-height: 1.2;
+  }
+
+  .pc-chat-card p {
+    margin: 4px 0 0;
+    overflow: hidden;
+    color: var(--text-muted);
+    font-size: 12px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .pc-time {
+    color: var(--text-muted);
+    font-size: 11px;
+    white-space: nowrap;
+  }
+
+  .pc-unread {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 20px;
+    height: 20px;
+    margin-top: 6px;
+    border-radius: 999px;
+    background: var(--accent);
+    color: var(--white);
+    font-size: 11px;
+    font-weight: 800;
+  }
+
+  .pc-chat-heading {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 0;
+  }
+
+  .pc-status {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    height: 24px;
+    padding: 0 9px;
+    border-radius: 999px;
+    background: var(--success-bg);
+    color: var(--success);
+    font-size: 11px;
+    font-weight: 800;
+  }
+
+  .pc-status::before {
+    width: 7px;
+    height: 7px;
+    border-radius: 999px;
+    background: currentColor;
+    content: "";
+  }
+
+  .pc-actions,
+  .pc-composer-tools,
+  .pc-composer-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .pc-messages {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: 14px;
+    min-height: 0;
+    overflow-y: auto;
+    padding: 18px 18px 12px;
+  }
+
+  .pc-message-row {
+    display: grid;
+    grid-template-columns: 36px minmax(0, 1fr);
+    gap: 10px;
+    align-items: start;
+    max-width: 78%;
+  }
+
+  .pc-message-row.is-mine {
+    align-self: flex-end;
+    grid-template-columns: minmax(0, 1fr) 36px;
+  }
+
+  .pc-message-row.is-mine .pc-avatar {
+    grid-column: 2;
+    grid-row: 1;
+    background: var(--brand-gradient);
+  }
+
+  .pc-message-row.is-mine .pc-message-stack {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  .pc-message-meta {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 0 0 6px;
+    color: var(--text-muted);
+    font-size: 11px;
+  }
+
+  .pc-message-row.is-mine .pc-message-meta {
+    justify-content: flex-end;
+  }
+
+  .pc-key-button {
+    border: 0;
+    border-radius: 7px;
+    padding: 3px 7px;
+    background: var(--accent-lighter);
+    color: var(--accent);
+    font-size: 11px;
+    font-weight: 800;
+    cursor: pointer;
+  }
+
+  .pc-key-button.is-active {
+    background: var(--accent-light);
+    color: var(--accent);
+  }
+
+  .pc-confirm-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 10px;
+    border: 1px solid var(--accent-border);
+    border-radius: 10px;
+    padding: 9px 10px;
+    background: var(--surface);
+    color: var(--text-secondary);
+    font-size: 12px;
+  }
+
+  .pc-confirm-bar.is-success {
+    border-color: var(--success-border);
+    background: var(--success-bg);
+    color: var(--success);
+  }
+
+  .pc-confirm-actions {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .pc-bubble {
+    border: 1px solid var(--glass-border);
+    border-radius: 12px;
+    padding: 12px 14px;
+    background: var(--surface);
+    box-shadow: none;
+    color: var(--text-secondary);
+    font-size: 14px;
+    line-height: 1.5;
+  }
+
+  .pc-message-row.is-mine .pc-bubble {
+    border-color: var(--accent-border);
+    background: linear-gradient(135deg, rgba(37, 99, 235, 0.92), rgba(8, 145, 178, 0.9));
+    color: var(--white);
+  }
+
+  .pc-bubble.is-draft {
+    border-style: dashed;
+  }
+
+  .pc-quote {
+    margin-bottom: 10px;
+    border-left: 3px solid var(--accent);
+    padding: 8px 10px;
+    border-radius: 8px;
+    background: var(--accent-lighter);
+    color: var(--text-secondary);
+  }
+
+  .pc-code-card {
+    margin-top: 10px;
+    overflow: hidden;
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    background: var(--code-bg);
+    color: var(--code-text);
+  }
+
+  .pc-code-card header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 34px;
+    padding: 0 10px;
+    border-bottom: 1px solid var(--border);
+    color: var(--code-text);
+    font-family: "SFMono-Regular", Consolas, monospace;
+    font-size: 12px;
+  }
+
+  .pc-code-card pre {
+    margin: 0;
+    overflow-x: auto;
+    padding: 10px;
+    font-family: "SFMono-Regular", Consolas, monospace;
+    font-size: 12px;
+    line-height: 1.55;
+  }
+
+  .pc-code-card code {
+    display: block;
+    white-space: pre;
+  }
+
+  .pc-attachments {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 10px;
+  }
+
+  .pc-attachment {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    min-height: 34px;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 6px 10px;
+    background: var(--surface);
+    color: var(--text-secondary);
+    font: inherit;
+    font-size: 12px;
+  }
+
+  button.pc-attachment {
+    cursor: pointer;
+  }
+
+  .pc-attachment.is-active {
+    border-color: var(--accent-border);
+    background: var(--accent-light);
+    color: var(--accent);
+    font-weight: 800;
+  }
 
-function conversationMatchesQuery(conv: ConversationSnapshot, q: string) {
-  if (!q) return true;
-  const txt = [conv.name, conv.initials, conv.role, conv.currentSummary, conv.currentTime].join(' ').toLowerCase();
-  return txt.includes(q) || conv.allMessages.some((m) => messageMatchesQuery(m, q));
+  .pc-composer-wrap {
+    flex: 0 0 auto;
+    padding: 0 18px 18px;
+  }
+
+  .pc-attachment-tray {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 10px;
+    padding: 10px;
+  }
+
+  .pc-selected-attachments {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 10px;
+  }
+
+  .pc-composer {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    gap: 10px;
+    align-items: end;
+    min-height: 88px;
+    padding: 12px;
+  }
+
+  .pc-composer textarea {
+    min-height: 58px;
+    max-height: 130px;
+    resize: none;
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    outline: 0;
+    padding: 12px 14px;
+    background: var(--surface);
+    color: var(--text);
+    line-height: 1.45;
+  }
+
+  .pc-send-button {
+    height: 36px;
+    gap: 8px;
+    padding: 0 14px;
+    border-color: var(--accent-border);
+    background: var(--brand-gradient);
+    color: var(--white);
+    font-weight: 800;
+  }
+
+  .pc-context-body {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: 12px;
+    min-height: 0;
+    overflow-y: auto;
+    padding: 14px;
+  }
+
+  .pc-mini-card {
+    border: 1px solid var(--glass-border);
+    border-radius: 12px;
+    padding: 12px;
+    background: var(--surface);
+  }
+
+  .pc-mini-card h3 {
+    margin: 0 0 8px;
+    font-size: 13px;
+  }
+
+  .pc-mini-card p,
+  .pc-mini-card li {
+    color: var(--text-muted);
+    font-size: 12px;
+    line-height: 1.45;
+  }
+
+  .pc-mini-card p {
+    margin: 0;
+  }
+
+  .pc-mini-card ul {
+    display: grid;
+    gap: 8px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .pc-chip-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .pc-chip {
+    min-height: 24px;
+    padding: 4px 9px;
+    color: var(--text-muted);
+    font-size: 11px;
+    line-height: 1;
+    box-shadow: none;
+  }
+
+  .pc-progress {
+    height: 8px;
+    overflow: hidden;
+    border-radius: 999px;
+    background: var(--accent-light);
+  }
+
+  .pc-progress span {
+    display: block;
+    width: 68%;
+    height: 100%;
+    border-radius: inherit;
+    background: linear-gradient(90deg, var(--accent), var(--accent), var(--accent));
+  }
+
+  .pc-empty {
+    align-self: center;
+    border-radius: 12px;
+    padding: 14px 16px;
+    background: var(--surface);
+    color: var(--text-muted);
+    font-size: 13px;
+  }
+
+  @media (max-width: 1180px) {
+    .pc-shell {
+      grid-template-columns: 260px minmax(0, 1fr);
+    }
+
+    .pc-context-panel {
+      display: none;
+    }
+
+    .pc-message-row {
+      max-width: 88%;
+    }
+  }
+
+  @media (max-width: 820px) {
+    .pc-page {
+      overflow: auto;
+    }
+
+    .pc-shell {
+      grid-template-columns: 1fr;
+      min-height: auto;
+      padding: 12px;
+    }
+
+    .pc-sidebar {
+      max-height: 260px;
+    }
+
+    .pc-chat-panel {
+      min-height: 680px;
+    }
+
+    .pc-composer {
+      grid-template-columns: 1fr;
+    }
+  }
+`;
+
+function Avatar({ initials, accent = 'blue' }: { initials: string; accent?: Accent }) {
+  return <span className={`pc-avatar ${accent}`}>{initials}</span>;
 }
 
-function accentClass(accent: Accent): string {
-  return accent === 'cyan' ? String(styles.msgAvatarCyan ?? '') : accent === 'purple' ? String(styles.msgAvatarPurple ?? '') : '';
+function Icon({ name }: { name: string }) {
+  return (
+    <span className="pc-symbol" aria-hidden="true">
+      {name}
+    </span>
+  );
 }
 
-export function PrivateChatsPage() {
-  const { t } = useTranslation();
-  const [activeChatId, setActiveChatId] = useState(conversations[0]!.id);
+export function PrivateChatsPageInteractive() {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const { hasSession: hasHubSession, token } = useHubSession();
+  const hubSnapshot = useHubIMSnapshot(token);
+  const [activeChatId, setActiveChatId] = useState('');
   const [attachmentsOpen, setAttachmentsOpen] = useState(false);
   const [keyOnly, setKeyOnly] = useState(false);
-  const [keyedMessages, setKeyedMessages] = useState<string[]>(mockMessages.slice(0, 1).map((m) => m.id));
+  const [keyedMessages, setKeyedMessages] = useState<string[]>([]);
   const [draft, setDraft] = useState('');
-  const [localMessages, setLocalMessages] = useState<Record<string, Message[]>>({});
-  const [unreadByChat, setUnreadByChat] = useState<Record<string, number>>(initialUnreadByChat);
+  const [readSessionIds, setReadSessionIds] = useState<Set<string>>(() => new Set());
   const [searchQuery, setSearchQuery] = useState('');
   const [selectedAttachmentIds, setSelectedAttachmentIds] = useState<string[]>([]);
   const [notice, setNotice] = useState<Notice | null>(null);
 
+  const { t } = useTranslation('privateChats');
+  const hubConversationLabels = useMemo<HubConversationLabels>(
+    () => ({
+      agent: t('hub.agent'),
+      user: t('hub.user'),
+      recalled: t('hub.recalled'),
+      privateSession: t('hub.privateSession'),
+      privateSessionFallback: t('hub.privateSessionFallback'),
+      noRecentMessages: t('hub.noRecentMessages'),
+    }),
+    [t],
+  );
+  const emptyConversationSnapshot = useMemo<ConversationSnapshot>(
+    () => ({
+      id: 'empty',
+      name: t('sidebar.emptyTitle'),
+      initials: 'NA',
+      role: t('hub.privateSession'),
+      time: '--:--',
+      summary: t('hub.noConversationsSummary'),
+      unread: 0,
+      accent: 'blue',
+      messages: [],
+      allMessages: [],
+      currentSummary: t('hub.noConversationsSummary'),
+      currentTime: '--:--',
+      currentUnread: 0,
+    }),
+    [t],
+  );
+
   const normalizedSearch = searchQuery.trim().toLowerCase();
+  const conversations = useMemo<Conversation[]>(
+    () =>
+      hubSnapshot.status === 'ready'
+        ? hubSnapshot.sessions.map((session, index) =>
+            conversationFromHubSession(
+              session,
+              hubSnapshot.messagesBySessionId[session.session_id || session.id || ''] ?? [],
+              index,
+              hubConversationLabels,
+            ),
+          )
+        : [],
+    [hubConversationLabels, hubSnapshot.messagesBySessionId, hubSnapshot.sessions, hubSnapshot.status],
+  );
+  const availableConversations = hasHubSession && hubSnapshot.status === 'ready' ? conversations : [];
+  const isChatLocked = true;
+  const chatStatusKey = !hasHubSession
+    ? 'locked'
+    : hubSnapshot.status === 'error'
+      ? 'error'
+      : hubSnapshot.status === 'loading'
+        ? 'loading'
+        : 'ready';
+
+  const conversationSnapshots = useMemo<ConversationSnapshot[]>(
+    () =>
+      availableConversations.map((conversation) => {
+        const allMessages = conversation.messages;
+        const lastMessage = allMessages[allMessages.length - 1];
 
-  const conversationSnapshots = useMemo<ConversationSnapshot[]>(() => conversations.map((c) => {
-    const all = [...c.messages, ...(localMessages[c.id] ?? [])];
-    const last = all[all.length - 1];
-    return { ...c, allMessages: all, currentSummary: last ? getLastMessageSummary(last) : c.summary, currentTime: last?.time ?? c.time, currentUnread: unreadByChat[c.id] ?? 0 };
-  }), [localMessages, unreadByChat]);
+        return {
+          ...conversation,
+          allMessages,
+          currentSummary: lastMessage ? getLastMessageSummary(lastMessage) : conversation.summary,
+          currentTime: lastMessage?.time ?? conversation.time,
+          currentUnread: readSessionIds.has(conversation.id) ? 0 : conversation.unread,
+        };
+      }),
+    [availableConversations, readSessionIds],
+  );
+
+  const activeConversation = useMemo(
+    () =>
+      conversationSnapshots.find((conversation) => conversation.id === activeChatId) ??
+      conversationSnapshots[0] ??
+      emptyConversationSnapshot,
+    [activeChatId, conversationSnapshots, emptyConversationSnapshot],
+  );
 
-  const activeConv = useMemo(() => conversationSnapshots.find((c) => c.id === activeChatId) ?? conversationSnapshots[0]!, [activeChatId, conversationSnapshots]);
-  const filteredConversations = useMemo(() => conversationSnapshots.filter((c) => conversationMatchesQuery(c, normalizedSearch)), [conversationSnapshots, normalizedSearch]);
-  const selectedAttachments = useMemo(() => attachmentOptions.filter((a) => selectedAttachmentIds.includes(a.id)), [selectedAttachmentIds]);
+  const filteredConversations = useMemo(
+    () => conversationSnapshots.filter((conversation) => conversationMatchesQuery(conversation, normalizedSearch)),
+    [conversationSnapshots, normalizedSearch],
+  );
+
+  const selectedAttachments = useMemo(
+    () => attachmentOptions.filter((attachment) => selectedAttachmentIds.includes(attachment.id)),
+    [selectedAttachmentIds],
+  );
 
   const messages = useMemo(() => {
-    const filtered = keyOnly ? activeConv.allMessages.filter((m) => keyedMessages.includes(m.id)) : activeConv.allMessages;
-    return filtered.filter((m) => messageMatchesQuery(m, normalizedSearch));
-  }, [activeConv, keyOnly, keyedMessages, normalizedSearch]);
-
-  const activeKeyCount = useMemo(() => activeConv.allMessages.filter((m) => keyedMessages.includes(m.id)).length, [activeConv, keyedMessages]);
-  const activeAttachments = useMemo(() => activeConv.allMessages.flatMap((m) => m.attachments ?? []).concat(selectedAttachments.map(({ name, detail }) => ({ name, detail }))), [activeConv, selectedAttachments]);
-  const activeCodeBlock = useMemo(() => activeConv.allMessages.find((m) => m.code)?.code, [activeConv]);
-  const reviewProgress = Math.min(100, Math.round(((activeKeyCount + selectedAttachments.length + (localMessages[activeConv.id]?.length ?? 0)) / Math.max(activeConv.allMessages.length + 2, 1)) * 100));
+    const keyedFiltered = keyOnly
+      ? activeConversation.allMessages.filter((message) => keyedMessages.includes(message.id))
+      : activeConversation.allMessages;
+
+    return keyedFiltered.filter((message) => messageMatchesQuery(message, normalizedSearch));
+  }, [activeConversation, keyOnly, keyedMessages, normalizedSearch]);
+
+  const activeKeyCount = useMemo(
+    () => activeConversation.allMessages.filter((message) => keyedMessages.includes(message.id)).length,
+    [activeConversation, keyedMessages],
+  );
+
+  const activeAttachments = useMemo(
+    () =>
+      activeConversation.allMessages
+        .flatMap((message) => message.attachments ?? [])
+        .concat(selectedAttachments.map(({ name, detail }) => ({ name, detail }))),
+    [activeConversation, selectedAttachments],
+  );
+
+  const activeCodeBlock = useMemo(
+    () => activeConversation.allMessages.find((message) => message.code)?.code,
+    [activeConversation],
+  );
+
+  const reviewProgress = Math.min(
+    100,
+    Math.round(((activeKeyCount + selectedAttachments.length) /
+      Math.max(activeConversation.allMessages.length + 2, 1)) * 100),
+  );
+
   const hasComposerContent = draft.trim().length > 0 || selectedAttachments.length > 0;
 
   useEffect(() => {
-    const stream = new MockEventStream();
-    const conv = conversations.find((c) => c.id === activeChatId);
-    if (!conv) return;
-    const unsub = stream.onType('message.delta', (event) => {
-      if (event.type === 'message.delta') {
-        const delta = String(event.payload.delta ?? '');
-        const msgId = String(event.payload.messageId ?? '');
-        setLocalMessages((prev) => {
-          const existing = prev[msgId] ?? [];
-          const last = existing[existing.length - 1];
-          if (last && last.isDraft) return { ...prev, [msgId]: [...existing.slice(0, -1), { ...last, body: last.body + delta }] };
-          const draftMsg: Message = { id: msgId, author: 'Agent', role: 'Agent', time: formatClock(), side: 'left', accent: conv.accent, body: delta, isDraft: true };
-          return { ...prev, [msgId]: [...existing, draftMsg] };
-        });
+    if (conversationSnapshots.length === 0) {
+      if (activeChatId) setActiveChatId('');
+      return;
+    }
+
+    if (!conversationSnapshots.some((conversation) => conversation.id === activeChatId)) {
+      setActiveChatId(conversationSnapshots[0]?.id ?? '');
+    }
+  }, [activeChatId, conversationSnapshots]);
+
+  useEffect(() => {
+    setKeyedMessages((current) => {
+      const next = current.filter((messageId) =>
+        conversationSnapshots.some((conversation) =>
+          conversation.allMessages.some((message) => message.id === messageId),
+        ),
+      );
+      if (next.length === current.length && next.every((messageId, index) => messageId === current[index])) {
+        return current;
       }
+      return next;
+    });
+  }, [conversationSnapshots]);
+
+  useEffect(() => {
+    if (!notice) {
+      return;
+    }
+
+    const timeoutId = window.setTimeout(() => setNotice(null), 3200);
+
+    return () => window.clearTimeout(timeoutId);
+  }, [notice]);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+
+    if (!canvas) {
+      return;
+    }
+
+    const context = canvas.getContext('2d');
+
+    if (!context) {
+      return;
+    }
+
+    const particleCount = 56;
+    const particles: Particle[] = [];
+    let width = 0;
+    let height = 0;
+    let frameId = 0;
+
+    const makeParticle = (index: number): Particle => ({
+      x: Math.random() * width,
+      y: Math.random() * height,
+      vx: -0.18 + Math.random() * 0.36,
+      vy: -0.18 - Math.random() * 0.48,
+      radius: 1.6 + Math.random() * 2.6,
+      hue: index % 3 === 0 ? 196 : 210,
+      alpha: 0.18 + Math.random() * 0.2,
     });
-    playMessageStream(stream, { messageId: `stream-${activeChatId}`, threadId: activeChatId, chunkDelayMs: 80 });
-    return () => { stream.destroy(); unsub(); };
-  }, [activeChatId]);
 
-  useEffect(() => { if (!notice) return; const t = window.setTimeout(() => setNotice(null), 3200); return () => window.clearTimeout(t); }, [notice]);
+    const resize = () => {
+      const ratio = window.devicePixelRatio || 1;
+      width = window.innerWidth;
+      height = window.innerHeight;
+      canvas.width = Math.floor(width * ratio);
+      canvas.height = Math.floor(height * ratio);
+      canvas.style.width = `${width}px`;
+      canvas.style.height = `${height}px`;
+      context.setTransform(ratio, 0, 0, ratio, 0, 0);
+
+      if (particles.length === 0) {
+        for (let index = 0; index < particleCount; index += 1) {
+          particles.push(makeParticle(index));
+        }
+      }
+    };
+
+    const tick = () => {
+      context.clearRect(0, 0, width, height);
+
+      particles.forEach((particle, index) => {
+        particle.x += particle.vx;
+        particle.y += particle.vy;
+
+        if (particle.x < -16) {
+          particle.x = width + 16;
+        }
+
+        if (particle.x > width + 16) {
+          particle.x = -16;
+        }
+
+        if (particle.y < -16) {
+          particle.y = height + 16;
+        }
+
+        if (particle.y > height + 16) {
+          particle.y = -16;
+        }
+
+        context.beginPath();
+        context.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
+        context.fillStyle = `hsla(${particle.hue}, 84%, 48%, ${particle.alpha})`;
+        context.fill();
+
+        for (let nextIndex = index + 1; nextIndex < particles.length; nextIndex += 1) {
+          const next = particles[nextIndex];
+          if (!next) {
+            continue;
+          }
 
-  const showNotice = (text: string, tone: Notice['tone'] = 'info') => { setNotice({ id: Date.now(), text, tone }); };
+          const dx = particle.x - next.x;
+          const dy = particle.y - next.y;
+          const distance = Math.sqrt(dx * dx + dy * dy);
+
+          if (distance < 126) {
+            context.beginPath();
+            context.moveTo(particle.x, particle.y);
+            context.lineTo(next.x, next.y);
+            context.strokeStyle = `rgba(23, 105, 232, ${(1 - distance / 126) * 0.07})`;
+            context.lineWidth = 1;
+            context.stroke();
+          }
+        }
+      });
+
+      frameId = window.requestAnimationFrame(tick);
+    };
+
+    resize();
+    tick();
+    window.addEventListener('resize', resize);
+
+    return () => {
+      window.cancelAnimationFrame(frameId);
+      window.removeEventListener('resize', resize);
+    };
+  }, []);
+
+  const showNotice = (text: string, tone: Notice['tone'] = 'info') => {
+    setNotice({ id: Date.now(), text, tone });
+  };
 
   const selectConversation = (chatId: string) => {
-    const next = conversationSnapshots.find((c) => c.id === chatId);
+    const nextConversation = conversationSnapshots.find((conversation) => conversation.id === chatId);
+
     setActiveChatId(chatId);
-    setUnreadByChat((prev) => ({ ...prev, [chatId]: 0 }));
-    if (next?.currentUnread) showNotice(`${next.name} marked as read`, 'success');
+    setReadSessionIds((current) => new Set(current).add(chatId));
+
+    if (nextConversation?.currentUnread) {
+      showNotice(t('notice.markedRead', { name: nextConversation.name }), 'success');
+    }
   };
 
-  const toggleAttachment = (id: string) => {
-    const att = attachmentOptions.find((a) => a.id === id);
-    const isSel = selectedAttachmentIds.includes(id);
-    setSelectedAttachmentIds((prev) => prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]);
-    if (att) showNotice(`${isSel ? 'Removed' : 'Selected'} ${att.name}`);
+  const toggleAttachmentPanel = () => {
+    setAttachmentsOpen((current) => !current);
   };
 
-  const removeAttachment = (id: string) => {
-    const att = attachmentOptions.find((a) => a.id === id);
-    setSelectedAttachmentIds((prev) => prev.filter((x) => x !== id));
-    showNotice(`${att?.name ?? 'Attachment'} removed`);
+  const toggleAttachment = (attachmentId: string) => {
+    const attachment = attachmentOptions.find((option) => option.id === attachmentId);
+    const isSelected = selectedAttachmentIds.includes(attachmentId);
+
+    setSelectedAttachmentIds((current) =>
+      current.includes(attachmentId)
+        ? current.filter((currentAttachmentId) => currentAttachmentId !== attachmentId)
+        : [...current, attachmentId],
+    );
+
+    if (attachment) {
+      showNotice(isSelected ? t('notice.removed', { name: attachment.name }) : t('notice.selected', { name: attachment.name }));
+    }
+  };
+
+  const removeAttachment = (attachmentId: string) => {
+    const attachment = attachmentOptions.find((option) => option.id === attachmentId);
+
+    setSelectedAttachmentIds((current) =>
+      current.filter((currentAttachmentId) => currentAttachmentId !== attachmentId),
+    );
+    showNotice(t('notice.attachmentRemoved', { name: attachment?.name ?? 'Attachment' }));
   };
 
-  const toggleKeyedMessage = (msgId: string) => {
-    const msg = activeConv.allMessages.find((m) => m.id === msgId);
-    const isKeyed = keyedMessages.includes(msgId);
-    setKeyedMessages((prev) => prev.includes(msgId) ? prev.filter((x) => x !== msgId) : [...prev, msgId]);
-    showNotice(`${isKeyed ? 'Removed from' : 'Marked as'} key: ${msg?.author ?? 'message'}`, isKeyed ? 'info' : 'success');
+  const toggleKeyedMessage = (messageId: string) => {
+    const message = activeConversation.allMessages.find((currentMessage) => currentMessage.id === messageId);
+    const isKeyed = keyedMessages.includes(messageId);
+
+    setKeyedMessages((current) =>
+      current.includes(messageId)
+        ? current.filter((currentMessageId) => currentMessageId !== messageId)
+        : [...current, messageId],
+    );
+
+    showNotice(
+      isKeyed
+        ? t('notice.removeKey', { author: message?.author ?? 'message' })
+        : t('notice.markKey', { author: message?.author ?? 'message' }),
+      isKeyed ? 'info' : 'success',
+    );
   };
 
   const insertCodeSnippet = () => {
-    setDraft((prev) => `${prev}${prev ? '\n\n' : ''}\`\`\`tsx\n// paste selected snippet here\n\`\`\``);
-    showNotice('Code block inserted into the local draft');
+    setDraft((current) => `${current}${current ? '\n\n' : ''}\`\`\`tsx\n// paste selected snippet here\n\`\`\``);
+    showNotice(t('notice.codeInserted'));
   };
 
   const quoteLatestMessage = () => {
-    const src = [...activeConv.allMessages].reverse().find((m) => keyedMessages.includes(m.id)) ?? activeConv.allMessages[activeConv.allMessages.length - 1];
-    if (!src) return;
-    setDraft((prev) => `${prev}${prev ? '\n\n' : ''}> ${src.body.slice(0, 120)}`);
-    showNotice(`Quoted ${src.author}'s latest context`);
+    const source =
+      [...activeConversation.allMessages].reverse().find((message) => keyedMessages.includes(message.id)) ??
+      activeConversation.allMessages[activeConversation.allMessages.length - 1];
+
+    if (!source) {
+      return;
+    }
+
+    setDraft((current) => `${current}${current ? '\n\n' : ''}> ${source.body.slice(0, 120)}`);
+    showNotice(t('notice.quoted', { author: source.author }));
   };
 
   const sendDraft = () => {
-    if (!hasComposerContent) { showNotice(t('pc.notice.sendEmpty')); return; }
-    const msgAtts = selectedAttachments.map(({ name, detail }) => ({ name, detail }));
-    const msg: Message = {
-      id: `local-${activeConv.id}-${Date.now()}`, author: 'You', role: 'Local draft',
-      time: formatClock(), side: 'right', body: draft.trim() || 'Attached selected context for review.',
-      isDraft: true,
-      ...(msgAtts.length > 0 ? { attachments: msgAtts } : {}),
-    };
-    setLocalMessages((prev) => ({ ...prev, [activeConv.id]: [...(prev[activeConv.id] ?? []), msg] }));
-    setUnreadByChat((prev) => ({ ...prev, [activeConv.id]: 0 }));
-    setSelectedAttachmentIds([]); setAttachmentsOpen(false); setDraft('');
-    showNotice(t('pc.notice.sent'), 'success');
+    if (isChatLocked) {
+      showNotice(hasHubSession ? t('notice.readOnly') : t('notice.loginRequired'));
+      return;
+    }
+  };
+
+  const handleComposerKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key !== 'Enter' || event.shiftKey || event.nativeEvent.isComposing) {
+      return;
+    }
+
+    event.preventDefault();
+    sendDraft();
   };
 
-  const sidebarBottom = (
-    <div className={styles.convList}>
-      {filteredConversations.length > 0 ? filteredConversations.map((c) => (
-        <button className={`${styles.convCard} ${c.id === activeConv.id ? styles.convCardActive : ''}`} key={c.id} onClick={() => selectConversation(c.id)} type="button">
-          <div className={`${styles.msgAvatar} ${accentClass(c.accent)}`}>{c.initials}</div>
-          <div style={{ minWidth: 0 }}>
-            <div className={styles.convCardName}>{c.name}</div>
-            <div className={styles.convCardSummary}>{c.currentSummary}</div>
+  return (
+    <div className="pc-page">
+      <style>{pageStyles}</style>
+      <canvas ref={canvasRef} className="pc-particles" aria-hidden="true" />
+
+      <div className="pc-shell">
+        <aside className="pc-sidebar pc-panel pc-glass">
+          <div className="pc-brand">
+            <span className="pc-brand-mark">AH</span>
+            <div className="pc-title">
+              <h2>AGENTHUB</h2>
+              <p className="pc-brand-sub">{t('brand.subtitle')}</p>
+            </div>
           </div>
-          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end' }}>
-            <span className={styles.convTime}>{c.currentTime}</span>
-            {c.currentUnread > 0 ? <span className={styles.convUnread}>{c.currentUnread}</span> : null}
+
+          <div className="pc-search">
+            <Icon name="search" />
+            <input
+              aria-label={t('search.ariaLabel')}
+              onChange={(event) => setSearchQuery(event.target.value)}
+              placeholder={t('search.placeholder')}
+              type="search"
+              value={searchQuery}
+            />
           </div>
-        </button>
-      )) : <div className={styles.emptyState}>{t('pc.noChats')}</div>}
-    </div>
-  );
 
-  return (
-    <div className={styles.pageRoot}>
-      <ParticleCanvas />
-      <WebLayout
-        brandName={t('pc.brand')}
-        brandSubtitle={t('pc.subtitle')}
-        sidebarBottom={(
-          <>
-            <div className={styles.searchWrap}>
-              <SearchInput placeholder={t('pc.search')} value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} />
+          <div className="pc-section-title">{t('sidebar.title')}</div>
+          {normalizedSearch ? (
+            <div className="pc-filter-note">
+              {t('search.filtering', { chatCount: filteredConversations.length, messageCount: messages.length, query: searchQuery.trim() })}
             </div>
-            {normalizedSearch ? <div className={styles.filterNote}>{t('pc.filterNote', { chatCount: filteredConversations.length, msgCount: messages.length, query: searchQuery.trim() })}</div> : null}
-            <div style={{ padding: '10px 16px 8px', color: 'var(--muted-foreground)', fontSize: 11, fontWeight: 800, textTransform: 'uppercase', letterSpacing: '0.08em' }}>{t('pc.pinned')}</div>
-            {sidebarBottom}
-          </>
-        )}
-        topbarLeft={null}
-        topbarRight={null}
-        drawer={(
-          <>
-            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingBottom: 14, borderBottom: '1px solid var(--border)' }}>
-              <div>
-                <div style={{ fontSize: 11, fontWeight: 800, textTransform: 'uppercase', letterSpacing: '0.09em', color: 'var(--muted-foreground)', marginBottom: 4 }}>{t('pc.context.title')}</div>
-                <h2 style={{ margin: 0, fontSize: 15, color: 'var(--foreground)' }}>{activeConv.name}</h2>
-                <p style={{ fontSize: 12, color: 'var(--muted-foreground)', margin: '2px 0 0' }}>{t('pc.context.messages', { count: activeConv.allMessages.length })} - {t('pc.context.reviewed', { percent: reviewProgress })}</p>
+          ) : null}
+          <div className="pc-chat-list">
+            {filteredConversations.length > 0 ? (
+              filteredConversations.map((conversation) => (
+                <button
+                  className={`pc-chat-card ${conversation.id === activeConversation.id ? 'is-active' : ''}`}
+                  key={conversation.id}
+                  onClick={() => selectConversation(conversation.id)}
+                  type="button"
+                >
+                  <Avatar initials={conversation.initials} accent={conversation.accent} />
+                  <span>
+                    <h3>{conversation.name}</h3>
+                    <p>{conversation.currentSummary}</p>
+                  </span>
+                  <span>
+                    <span className="pc-time">{conversation.currentTime}</span>
+                    {conversation.currentUnread > 0 ? (
+                      <span className="pc-unread">{conversation.currentUnread}</span>
+                    ) : null}
+                  </span>
+                </button>
+              ))
+            ) : (
+              <div className="pc-empty">{t('sidebar.empty')}</div>
+            )}
+          </div>
+        </aside>
+
+        <main className="pc-chat-panel pc-panel pc-glass">
+          <header className="pc-header pc-chat-header">
+            <div className="pc-chat-heading">
+              <Avatar initials={activeConversation.initials} accent={activeConversation.accent} />
+              <div className="pc-title">
+                <h2>{activeConversation.name}</h2>
+                <p>
+                  {activeConversation.role} -{' '}
+                  {chatStatusKey === 'error'
+                    ? t('chat.error')
+                    : hasHubSession
+                      ? t('chat.readOnly')
+                      : t('chat.loginRequired')}
+                </p>
               </div>
-              <Button variant="icon" onClick={() => showNotice('Context details stay in this local preview')} aria-label="Open context"><Icon name="open_in_new" /></Button>
+              <span className="pc-status">
+                {chatStatusKey === 'error'
+                  ? t('status.error')
+                  : chatStatusKey === 'loading'
+                    ? t('status.loading')
+                    : hasHubSession
+                      ? t('status.readOnly')
+                      : t('status.locked')}
+              </span>
+            </div>
+
+            <div className="pc-actions">
+              <button
+                className={`pc-icon-button ${keyOnly ? 'is-active' : ''}`}
+                disabled={activeConversation.allMessages.length === 0}
+                onClick={() => setKeyOnly((current) => !current)}
+                type="button"
+                aria-pressed={keyOnly}
+                aria-label={t('header.star')}
+              >
+                <Icon name="star" />
+              </button>
+              <button
+                className={`pc-icon-button ${attachmentsOpen ? 'is-active' : ''}`}
+                disabled={isChatLocked}
+                onClick={toggleAttachmentPanel}
+                type="button"
+                aria-expanded={attachmentsOpen}
+                aria-label={t('header.attachments')}
+              >
+                <Icon name="attach_file" />
+              </button>
+              <button
+                className="pc-icon-button"
+                onClick={() => showNotice(t('notice.moreActions'))}
+                type="button"
+                aria-label={t('header.more')}
+              >
+                <Icon name="more_horiz" />
+              </button>
             </div>
-            <div className={styles.contextBody}>
-              <div className={styles.miniCard}>
-                <h3>{t('pc.context.reviewProgress')}</h3>
-                <div className={styles.progress}><span className={styles.progressFill} style={{ width: `${reviewProgress}%` }} /></div>
-                <p style={{ marginTop: 10 }}>{t('pc.context.progressDetail', { keyed: activeKeyCount, unread: activeConv.currentUnread, drafts: localMessages[activeConv.id]?.length ?? 0 })}</p>
+          </header>
+
+          <section className="pc-messages" aria-label={t('chat.messagesArea')}>
+            {!hasHubSession ? (
+              <div className="pc-empty">
+                <strong>{t('locked.title')}</strong>
+                <p>{t('locked.description')}</p>
               </div>
-              <div className={styles.miniCard}>
-                <h3>{t('pc.attachments')}</h3>
-                {activeAttachments.length > 0 ? (
-                  <ul>{activeAttachments.map((a, i) => <li key={`${a.name}-${i}`}>{a.name} - {a.detail}</li>)}</ul>
-                ) : <p>{t('pc.context.noAttachments')}</p>}
+            ) : hubSnapshot.status === 'loading' ? (
+              <div className="pc-empty">
+                <strong>{t('loading.title')}</strong>
+                <p>{t('loading.description')}</p>
               </div>
-              <div className={styles.miniCard}>
-                <h3>{t('pc.context.codeSnippets')}</h3>
-                {activeCodeBlock ? (
-                  <div className={styles.codeCard}>
-                    <div className={styles.codeCardHeader}><span>{activeCodeBlock.file}</span><span>{t('pc.context.snippet')}</span></div>
-                    <pre className={styles.codeCardPre}>{activeCodeBlock.lines.map((line, i) => <code key={`ctx-${i}`} style={{ display: 'block', whiteSpace: 'pre' }}>{line}</code>)}</pre>
-                  </div>
-                ) : <p>{t('pc.context.noCode')}</p>}
+            ) : hubSnapshot.status === 'error' ? (
+              <div className="pc-empty">
+                <strong>{t('error.title')}</strong>
+                <p>{t('error.description', { error: hubSnapshot.error })}</p>
               </div>
-              <div className={styles.miniCard}>
-                <h3>{t('pc.context.visibleState')}</h3>
-                <div className={styles.chipRow}>
-                  <span className={styles.chip}>{t('pc.context.chat')}: {activeConv.name}</span>
-                  <span className={styles.chip}>{t('pc.context.attachmentsState')}: {attachmentsOpen ? 'open' : 'closed'}</span>
-                  <span className={styles.chip}>{t('pc.context.filter')}: {keyOnly ? 'keyed' : 'all'}</span>
-                  <span className={styles.chip}>{t('pc.context.search')}: {normalizedSearch || 'none'}</span>
-                  <span className={styles.chip}>{t('pc.context.selected')}: {selectedAttachments.length}</span>
-                </div>
+            ) : messages.length > 0 ? (
+              messages.map((message) => {
+                const isKeyed = keyedMessages.includes(message.id);
+
+                return (
+                  <article
+                    className={`pc-message-row ${message.side === 'right' ? 'is-mine' : ''}`}
+                    key={message.id}
+                  >
+                    <Avatar
+                      initials={message.side === 'right' ? 'ME' : activeConversation.initials}
+                      accent={message.side === 'right' ? 'purple' : message.accent ?? activeConversation.accent}
+                    />
+                    <div className="pc-message-stack">
+                      <div className="pc-message-meta">
+                        <strong>{message.author}</strong>
+                        <span>{message.time}</span>
+                        <span>{message.role}</span>
+                        <button
+                          className={`pc-key-button ${isKeyed ? 'is-active' : ''}`}
+                          onClick={() => toggleKeyedMessage(message.id)}
+                          type="button"
+                          aria-pressed={isKeyed}
+                        >
+                          {isKeyed ? t('key.keyed') : t('key.markKey')}
+                        </button>
+                      </div>
+
+                      <div className={`pc-bubble ${message.isDraft ? 'is-draft' : ''}`}>
+                        {message.quote ? (
+                          <div className="pc-quote">
+                            <strong>{message.quote.title}</strong>
+                            <br />
+                            {message.quote.body}
+                          </div>
+                        ) : null}
+                        {message.body}
+
+                        {message.attachments ? (
+                          <div className="pc-attachments">
+                            {message.attachments.map((attachment) => (
+                              <span className="pc-attachment" key={`${message.id}-${attachment.name}`}>
+                                <Icon name="description" />
+                                <span>
+                                  {attachment.name} - {attachment.detail}
+                                </span>
+                              </span>
+                            ))}
+                          </div>
+                        ) : null}
+
+                        {message.code ? (
+                          <div className="pc-code-card">
+                            <header>
+                              <span>{message.code.file}</span>
+                              <span>{t('code.snippet')}</span>
+                            </header>
+                            <pre>
+                              {message.code.lines.map((line, index) => (
+                                <code key={`${message.id}-line-${index}`}>{line}</code>
+                              ))}
+                            </pre>
+                          </div>
+                        ) : null}
+                      </div>
+                    </div>
+                  </article>
+                );
+              })
+            ) : (
+              <div className="pc-empty">
+                {keyOnly
+                  ? t('messages.empty.keyMessages')
+                  : normalizedSearch
+                    ? t('messages.empty.noResults')
+                    : t('messages.empty.threadEmpty')}
               </div>
-            </div>
-          </>
-        )}
-      >
-        {/* Chat header */}
-        <div className={styles.chatHeader}>
-          <div className={styles.chatHeaderMain}>
-            <div className={`${styles.msgAvatar} ${accentClass(activeConv.accent)}`}>{activeConv.initials}</div>
-            <div style={{ minWidth: 0 }}>
-              <div className={styles.headerName}>{activeConv.name}</div>
-              <div className={styles.headerRole}>{activeConv.role} - private thread</div>
-            </div>
-            <span className={styles.onlineBadge}><span className={styles.onlineDot} />{t('pc.status.online')}</span>
-          </div>
-          <div className={styles.headerActions}>
-            <Button variant={keyOnly ? 'primary' : 'icon'} size="sm" disabled={activeConv.allMessages.length === 0} onClick={() => setKeyOnly((v) => !v)} aria-pressed={keyOnly} aria-label="Show key messages only"><Icon name="star" /></Button>
-            <Button variant={attachmentsOpen ? 'primary' : 'icon'} size="sm" onClick={() => setAttachmentsOpen((v) => !v)} aria-expanded={attachmentsOpen} aria-label="Open attachments"><Icon name="attach_file" /></Button>
-            <Button variant="icon" size="sm" onClick={() => showNotice('More actions are local-preview only')} aria-label="More actions"><Icon name="more_horiz" /></Button>
-          </div>
-        </div>
-
-        {/* Messages */}
-        <div className={styles.messages} aria-label="Message thread">
-          {messages.length > 0 ? messages.map((msg) => {
-            const isKeyed = keyedMessages.includes(msg.id);
-            return (
-              <article className={`${styles.msgRow} ${msg.side === 'right' ? styles.msgRowMine : ''}`} key={msg.id}>
-                <div className={`${styles.msgAvatar} ${msg.side === 'right' ? styles.msgAvatarMine : accentClass(msg.accent ?? activeConv.accent)}`}>
-                  {msg.side === 'right' ? 'ME' : activeConv.initials}
-                </div>
-                <div className={styles.msgStack}>
-                  <div className={styles.msgMeta}>
-                    <strong className={styles.msgMetaAuthor}>{msg.author}</strong>
-                    <span>{msg.time}</span>
-                    <span>{msg.role}</span>
-                    <button className={`${styles.keyBtn} ${isKeyed ? styles.keyBtnActive : ''}`} onClick={() => toggleKeyedMessage(msg.id)} type="button" aria-pressed={isKeyed}>
-                      {isKeyed ? t('pc.key.keyed') : t('pc.key.mark')}
+            )}
+          </section>
+
+          <div className="pc-composer-wrap">
+            {notice ? (
+              <div className={`pc-confirm-bar ${notice.tone === 'success' ? 'is-success' : ''}`} role="status">
+                <span>{notice.text}</span>
+                <span className="pc-confirm-actions">
+                  {normalizedSearch ? (
+                    <button className="pc-chip" onClick={() => setSearchQuery('')} type="button">
+                      {t('search.clear')}
                     </button>
-                  </div>
-                  <div className={`${styles.msgBubble} ${msg.side === 'right' ? styles.msgBubbleMine : ''} ${msg.isDraft ? styles.msgBubbleDraft : ''}`}>
-                    {msg.quote ? <div className={styles.quote}><strong>{msg.quote.title}</strong><br />{msg.quote.body}</div> : null}
-                    {msg.body}
-                    {msg.attachments ? <div className={styles.attachmentList}>{msg.attachments.map((a) => <span className={styles.attachment} key={`${msg.id}-${a.name}`}><Icon name="description" size={16} />{a.name} - {a.detail}</span>)}</div> : null}
-                    {msg.code ? (
-                      <div className={styles.codeCard}>
-                        <div className={styles.codeCardHeader}><span>{msg.code.file}</span><span>{t('pc.context.snippet')}</span></div>
-                        <pre className={styles.codeCardPre}>{msg.code.lines.map((line, i) => <code key={`${msg.id}-ln-${i}`} style={{ display: 'block', whiteSpace: 'pre' }}>{line}</code>)}</pre>
-                      </div>
-                    ) : null}
-                  </div>
-                </div>
-              </article>
-            );
-          }) : (
-            <div className={styles.emptyState}>
-              {keyOnly ? t('pc.noKeyMessages') : normalizedSearch ? t('pc.noSearchMessages') : t('pc.emptyThread')}
-            </div>
-          )}
-        </div>
-
-        {/* Composer */}
-        <div className={styles.composerWrap}>
-          {notice ? <div className={`${styles.noticeBar} ${notice.tone === 'success' ? styles.noticeSuccess : ''}`} role="status"><span>{notice.text}</span><span className={styles.noticeActions}>{normalizedSearch ? <button className={styles.chip} onClick={() => setSearchQuery('')}>{t('pc.notice.clearSearch')}</button> : null}<button className={styles.chip} onClick={() => setNotice(null)}>{t('pc.notice.dismiss')}</button></span></div> : null}
-
-          {attachmentsOpen ? (
-            <div className={styles.attachmentTray} aria-label="Attachment panel">
-              {attachmentOptions.map((a) => { const isSel = selectedAttachmentIds.includes(a.id);
-                return <button className={`${styles.attachment} ${styles.attachmentBtn} ${isSel ? styles.attachmentActive : ''}`} key={a.id} onClick={() => toggleAttachment(a.id)} type="button" aria-pressed={isSel}><Icon name={a.icon} size={16} />{a.name} - {a.detail}</button>;
-              })}
-            </div>
-          ) : null}
+                  ) : null}
+                  <button className="pc-chip" onClick={() => setNotice(null)} type="button">
+                    {t('notice.dismiss')}
+                  </button>
+                </span>
+              </div>
+            ) : null}
 
-          {selectedAttachments.length > 0 ? (
-            <div className={styles.selectedAttachments} aria-label="Selected attachments">
-              {selectedAttachments.map((a) => <button className={`${styles.attachment} ${styles.attachmentBtn} ${styles.attachmentActive}`} key={a.id} onClick={() => removeAttachment(a.id)} type="button" aria-label={`Remove ${a.name}`}><Icon name={a.icon} size={16} />{a.name} - {a.detail}</button>)}
-            </div>
-          ) : null}
+            {attachmentsOpen ? (
+              <div className="pc-attachment-tray pc-glass" aria-label={t('composer.attachmentPanel')}>
+                {attachmentOptions.map((attachment) => {
+                  const isSelected = selectedAttachmentIds.includes(attachment.id);
 
-          <div className={styles.composer}>
-            <div className={styles.composerTools}>
-              <Button variant={attachmentsOpen ? 'primary' : 'icon'} size="sm" onClick={() => setAttachmentsOpen((v) => !v)} aria-label="Toggle attachment panel"><Icon name="add" /></Button>
-              <Button variant="icon" size="sm" onClick={insertCodeSnippet} aria-label="Insert code"><Icon name="code" /></Button>
-              <Button variant="icon" size="sm" disabled={activeConv.allMessages.length === 0} onClick={quoteLatestMessage} aria-label="Quote selected message"><Icon name="format_quote" /></Button>
+                  return (
+                    <button
+                      className={`pc-attachment ${isSelected ? 'is-active' : ''}`}
+                      key={attachment.id}
+                      onClick={() => toggleAttachment(attachment.id)}
+                      type="button"
+                      aria-pressed={isSelected}
+                    >
+                      <Icon name={attachment.icon} />
+                      {attachment.name} - {attachment.detail}
+                    </button>
+                  );
+                })}
+              </div>
+            ) : null}
+
+            {selectedAttachments.length > 0 ? (
+              <div className="pc-selected-attachments" aria-label={t('context.selectedAttachments')}>
+                {selectedAttachments.map((attachment) => (
+                  <button
+                    className="pc-attachment is-active"
+                    key={attachment.id}
+                    onClick={() => removeAttachment(attachment.id)}
+                    type="button"
+                    aria-label={t('attachment.remove', { name: attachment.name })}
+                  >
+                    <Icon name={attachment.icon} />
+                    {attachment.name} - {attachment.detail}
+                  </button>
+                ))}
+              </div>
+            ) : null}
+
+            <div className="pc-composer pc-glass">
+              <div className="pc-composer-tools">
+                <button
+                  className={`pc-tool-button ${attachmentsOpen ? 'is-active' : ''}`}
+                  onClick={toggleAttachmentPanel}
+                  disabled={isChatLocked}
+                  type="button"
+                  aria-label={t('composer.attach')}
+                >
+                  <Icon name="add" />
+                </button>
+                <button className="pc-tool-button" disabled={isChatLocked} onClick={insertCodeSnippet} type="button" aria-label={t('composer.insertCode')}>
+                  <Icon name="code" />
+                </button>
+                <button
+                  className="pc-tool-button"
+                  disabled={isChatLocked || activeConversation.allMessages.length === 0}
+                  onClick={quoteLatestMessage}
+                  type="button"
+                  aria-label={t('composer.quote')}
+                >
+                  <Icon name="format_quote" />
+                </button>
+              </div>
+
+              <textarea
+                aria-label={t('composer.messageLabel', { name: activeConversation.name })}
+                disabled={isChatLocked}
+                onChange={(event) => setDraft(event.target.value)}
+                onKeyDown={handleComposerKeyDown}
+                placeholder={hasHubSession ? t('composer.readOnlyPlaceholder') : t('composer.lockedPlaceholder')}
+                value={draft}
+              />
+
+              <div className="pc-composer-actions">
+                <button
+                  className="pc-tool-button"
+                  disabled
+                  type="button"
+                  aria-label={t('composer.voice')}
+                >
+                  <Icon name="mic" />
+                </button>
+                <button className="pc-send-button" disabled={isChatLocked || !hasComposerContent} onClick={sendDraft} type="button">
+                  <Icon name="send" />
+                  {hasHubSession ? t('composer.readOnlySend') : t('composer.lockedSend')}
+                </button>
+              </div>
             </div>
-            <textarea className={styles.composerTextarea} aria-label={`Message ${activeConv.name}`} onChange={(e) => setDraft(e.target.value)} placeholder={t('pc.composer.placeholder')} value={draft} />
-            <div className={styles.composerActions}>
-              <Button variant="icon" size="sm" disabled aria-label="Voice note unavailable"><Icon name="mic" /></Button>
-              <button className={styles.sendBtn} disabled={!hasComposerContent} onClick={sendDraft} type="button"><Icon name="send" />{t('pc.send')}</button>
+          </div>
+        </main>
+
+        <aside className="pc-context-panel pc-panel pc-glass">
+          <header className="pc-header pc-context-header">
+            <div className="pc-title">
+              <div className="pc-eyebrow">{t('context.title')}</div>
+              <h2>{activeConversation.name}</h2>
+              <p>
+                {t('context.review', { count: activeConversation.allMessages.length, progress: reviewProgress })}
+              </p>
             </div>
+            <button
+              className="pc-icon-button"
+              onClick={() => showNotice(t('notice.contextDetails'))}
+              type="button"
+              aria-label={t('context.open')}
+            >
+              <Icon name="open_in_new" />
+            </button>
+          </header>
+
+          <div className="pc-context-body">
+            <section className="pc-mini-card">
+              <h3>{t('context.reviewTitle')}</h3>
+              <div className="pc-progress"><span style={{ width: `${reviewProgress}%` }} /></div>
+              <p style={{ marginTop: 10 }}>
+                {t('context.reviewDetail', { keyCount: activeKeyCount, unread: activeConversation.currentUnread })}
+              </p>
+            </section>
+
+            <section className="pc-mini-card">
+              <h3>{t('context.attachments')}</h3>
+              {activeAttachments.length > 0 ? (
+                <ul>
+                  {activeAttachments.map((attachment, index) => (
+                    <li key={`${attachment.name}-${index}`}>
+                      {attachment.name} - {attachment.detail}
+                    </li>
+                  ))}
+                </ul>
+              ) : (
+                <p>{t('context.noAttachments')}</p>
+              )}
+            </section>
+
+            <section className="pc-mini-card">
+              <h3>{t('context.codeSnippets')}</h3>
+              {activeCodeBlock ? (
+                <div className="pc-code-card">
+                  <header>
+                    <span>{activeCodeBlock.file}</span>
+                    <span>{t('code.local')}</span>
+                  </header>
+                  <pre>
+                    {activeCodeBlock.lines.map((line, index) => (
+                      <code key={`${activeCodeBlock.file}-${index}`}>{line}</code>
+                    ))}
+                  </pre>
+                </div>
+              ) : (
+                <p>{t('context.noSnippets')}</p>
+              )}
+            </section>
+
+            <section className="pc-mini-card">
+              <h3>{t('context.tags')}</h3>
+              <div className="pc-chip-row">
+                <span className="pc-chip">chat: {activeConversation.name}</span>
+                <span className="pc-chip">attachments: {attachmentsOpen ? 'open' : 'closed'}</span>
+                <span className="pc-chip">filter: {keyOnly ? 'keyed' : 'all'}</span>
+                <span className="pc-chip">search: {normalizedSearch || 'none'}</span>
+                <span className="pc-chip">selected: {selectedAttachments.length}</span>
+              </div>
+            </section>
           </div>
-        </div>
-      </WebLayout>
+        </aside>
+      </div>
     </div>
   );
 }
 
-export default PrivateChatsPage;
+export default PrivateChatsPageInteractive;
diff --git a/app/web/src/pages/projects/ProjectPage.module.css b/app/web/src/pages/projects/ProjectPage.module.css
index f476ac14..4f1811f9 100644
--- a/app/web/src/pages/projects/ProjectPage.module.css
+++ b/app/web/src/pages/projects/ProjectPage.module.css
@@ -1,625 +1,390 @@
-/* ProjectPage styles */
-.pageRoot { position: relative; min-height: 100vh; }
+/* ═════════════════════════════════════════════════════════════════════
+   ProjectPage — Project dashboard with tabs, stats, files, activity
+   Uses CSS tokens exclusively: no hardcoded hex / px font sizes
+   ═════════════════════════════════════════════════════════════════════ */
 
-/* Main content (scrollable) */
-.scrollArea {
+/* ── Root ───────────────────────────────────────────────────────────── */
+.root {
+  display: flex;
+  flex-direction: column;
   flex: 1;
   min-height: 0;
-  overflow-y: auto;
-  padding-right: 2px;
+  overflow: hidden;
 }
 
-/* Hero section */
-.hero {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 300px;
-  gap: 18px;
-  padding: 22px;
-  border: 1px solid rgba(255,255,255,0.7);
-  border-radius: 12px;
-  background: rgba(255,255,255,0.72);
-  backdrop-filter: blur(28px);
-  margin-bottom: 18px;
+/* ── Project Header ─────────────────────────────────────────────────── */
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-xl);
+  padding: var(--space-xl);
+  background: var(--card);
+  border-bottom: 1px solid var(--border);
   flex-shrink: 0;
+  flex-wrap: wrap;
 }
 
-.heroEyebrow {
-  margin: 0 0 8px;
-  color: #0891b2;
-  font-size: 12px;
-  font-weight: 800;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+.headerInfo {
+  min-width: 0;
 }
 
-.heroTitle {
-  max-width: 720px;
-  margin: 0 0 8px;
-  font-size: 34px;
-  line-height: 1.12;
+.projectName {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
   color: var(--foreground);
+  margin: 0;
 }
 
-.heroDesc {
-  max-width: 700px;
-  margin: 0 0 18px;
+.projectDesc {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-normal);
   color: var(--muted-foreground);
-  line-height: 1.55;
-  font-size: 14px;
+  margin: var(--space-xs) 0 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.heroActions {
+.headerMeta {
   display: flex;
   align-items: center;
-  gap: 10px;
-  flex-wrap: wrap;
+  gap: var(--space-lg);
+  flex-shrink: 0;
 }
 
-.syncMessage {
-  display: inline-flex;
-  align-items: center;
-  min-height: 38px;
-  padding: 9px 12px;
-  border: 1px solid rgba(37,99,235,0.16);
-  border-radius: 8px;
-  background: rgba(37,99,235,0.08);
-  color: #2563eb;
-  font-size: 13px;
-  font-weight: 700;
+.projectStatus {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-normal);
+  padding: var(--space-xs) var(--space-md);
+  border-radius: var(--radius-full);
+  white-space: nowrap;
 }
 
-.syncSuccess {
-  border-color: rgba(5,150,105,0.18);
-  background: rgba(5,150,105,0.1);
-  color: #059669;
+.statusProgress {
+  color: var(--info);
+  background: color-mix(in oklch, var(--info) 12%, transparent);
+  border: 1px solid color-mix(in oklch, var(--info) 20%, transparent);
 }
 
-.syncWarning {
-  border-color: rgba(217,119,6,0.2);
-  background: rgba(217,119,6,0.12);
-  color: #d97706;
+.statusDone {
+  color: var(--success);
+  background: color-mix(in oklch, var(--success) 12%, transparent);
+  border: 1px solid color-mix(in oklch, var(--success) 20%, transparent);
 }
 
-/* Hero side (progress cards) */
-.heroSide {
-  display: grid;
-  gap: 12px;
+.statusReview {
+  color: var(--warning);
+  background: color-mix(in oklch, var(--warning) 12%, transparent);
+  border: 1px solid color-mix(in oklch, var(--warning) 20%, transparent);
 }
 
-.progressCard {
-  padding: 14px;
-  border: 1px solid rgba(255,255,255,0.62);
-  border-radius: 12px;
-  background: rgba(255,255,255,0.52);
+/* ── Team Avatars ───────────────────────────────────────────────────── */
+.teamAvatars {
+  display: flex;
+  align-items: center;
+  gap: calc(-1 * var(--space-xs));
 }
 
-.progressRow {
+.teamAvatar {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 8px;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-full);
+  border: 2px solid var(--card);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  color: var(--primary-foreground);
+  background: var(--primary);
 }
 
-.progressValue {
-  font-size: 20px;
-  font-weight: 700;
-  color: var(--foreground);
+/* ── Tab Bar ────────────────────────────────────────────────────────── */
+.tabBar {
+  display: flex;
+  gap: var(--space-0);
+  padding: 0 var(--space-xl);
+  background: var(--card);
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
 }
 
-.progressLabel {
-  font-size: 12px;
+.tab {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  padding: var(--space-md) var(--space-lg);
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: transparent;
   color: var(--muted-foreground);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-normal);
+  cursor: pointer;
+  transition:
+    color var(--duration-fast) var(--ease-standard),
+    border-color var(--duration-fast) var(--ease-standard);
+  white-space: nowrap;
 }
 
-.progressMuted {
-  color: var(--muted-foreground);
-  font-size: 11px;
-  font-weight: 800;
-  letter-spacing: 0.09em;
-  text-transform: uppercase;
-  margin: 4px 0 0;
+.tab:hover {
+  color: var(--foreground);
 }
 
-/* Progress bar */
-.meter {
-  height: 8px;
-  overflow: hidden;
-  border-radius: 999px;
-  background: rgba(15,23,42,0.08);
+.tabActive {
+  color: var(--primary);
+  font-weight: var(--font-weight-medium);
+  border-bottom-color: var(--primary);
 }
 
-.meterFill {
-  display: block;
-  height: 100%;
-  border-radius: inherit;
-  background: var(--primary);
+/* ── Tab Content ────────────────────────────────────────────────────── */
+.content {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: var(--space-xl);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xl);
 }
 
-.meterFillPurple {
-  background: var(--skill);
+/* ── Description Block ──────────────────────────────────────────────── */
+.description {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-normal);
+  color: var(--foreground);
+  line-height: var(--line-height-relaxed);
+  max-width: 720px;
 }
 
-/* Metrics grid */
-.metricsGrid {
+/* ── Stats Cards ────────────────────────────────────────────────────── */
+.statsGrid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 18px;
-  margin-bottom: 18px;
-  flex-shrink: 0;
+  gap: var(--space-lg);
 }
 
-.metricCard {
-  display: grid;
-  grid-template-columns: 42px minmax(0, 1fr);
-  gap: 12px;
+.statCard {
+  display: flex;
   align-items: center;
-  padding: 16px;
-  border: 1px solid rgba(255,255,255,0.7);
-  border-radius: 12px;
-  background: rgba(255,255,255,0.72);
-  backdrop-filter: blur(28px);
+  gap: var(--space-md);
+  padding: var(--space-lg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xl);
+  background: var(--card);
+  box-shadow: var(--shadow-sm);
 }
 
-.metricIcon {
-  width: 42px;
-  height: 42px;
+.statIcon {
   display: flex;
   align-items: center;
   justify-content: center;
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  border-radius: var(--radius-lg);
+  background: var(--secondary);
   color: var(--primary);
-  border-radius: 12px;
-  background: rgba(37,99,235,0.1);
-  font-weight: 800;
-  font-size: 12px;
 }
 
-.metricValue {
-  display: block;
-  font-size: 22px;
-  font-weight: 700;
+.statValue {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
   color: var(--foreground);
-  line-height: 1.1;
 }
 
-.metricLabel {
+.statLabel {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-normal);
   color: var(--muted-foreground);
-  font-size: 12px;
-}
-
-/* Board grid (main panel + milestones/risks) */
-.boardGrid {
-  display: grid;
-  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.85fr);
-  gap: 18px;
-  flex-shrink: 0;
+  margin-top: var(--space-xs);
 }
 
-.panel {
-  padding: 18px;
-  border: 1px solid rgba(255,255,255,0.7);
-  border-radius: 12px;
-  background: rgba(255,255,255,0.72);
-  backdrop-filter: blur(28px);
+/* ── Section Cards ──────────────────────────────────────────────────── */
+.sectionCard {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xl);
+  background: var(--card);
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
 }
 
-.panelHeader {
+.sectionCardHeader {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 14px;
+  padding: var(--space-lg);
+  border-bottom: 1px solid var(--border);
 }
 
-.panelTitle {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 700;
+.sectionCardTitle {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
   color: var(--foreground);
 }
 
-/* Tabs */
-.tabBar {
-  display: flex;
-  gap: 6px;
-  padding: 4px;
-  border-radius: 10px;
-  background: rgba(15,23,42,0.06);
-}
-
-.tab {
-  border: 0;
-  border-radius: 8px;
-  padding: 8px 10px;
-  color: var(--muted-foreground);
-  background: transparent;
-  font-family: inherit;
-  font-size: 13px;
-  font-weight: 700;
-  cursor: pointer;
-}
-
-.tabActive {
-  color: var(--primary);
-  background: rgba(255,255,255,0.72);
-  box-shadow: 0 8px 20px rgba(15,23,42,0.08);
+/* ── File Tree ──────────────────────────────────────────────────────── */
+.fileTree {
+  padding: var(--space-sm);
 }
 
-/* Filter bar */
-.filterBar {
+.fileNode {
   display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
   align-items: center;
-  justify-content: space-between;
-  margin-bottom: 12px;
+  gap: var(--space-sm);
+  padding: var(--space-sm) var(--space-md);
+  border-radius: var(--radius-md);
+  color: var(--foreground);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-normal);
+  cursor: default;
+  transition: background var(--duration-fast) var(--ease-standard);
 }
 
-.filterGroup {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  align-items: center;
+.fileNode:hover {
+  background: var(--secondary);
 }
 
-.filterLabel {
+.fileIcon {
   color: var(--muted-foreground);
-  font-size: 12px;
-  font-weight: 800;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-}
-
-.filterBtn {
-  min-height: 30px;
-  border: 1px solid rgba(148,163,184,0.25);
-  border-radius: 8px;
-  padding: 6px 9px;
-  color: #334155;
-  background: rgba(255,255,255,0.58);
-  font-family: inherit;
-  font-size: 12px;
-  font-weight: 800;
-  cursor: pointer;
-}
-
-.filterBtnActive {
-  color: var(--primary);
-  border-color: rgba(37,99,235,0.2);
-  background: rgba(37,99,235,0.1);
-}
-
-/* List */
-.list { display: grid; gap: 10px; }
-
-/* Project row (overview) */
-.projectRow {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 14px;
-  padding: 14px;
-  border: 1px solid rgba(255,255,255,0.62);
-  border-radius: 12px;
-  background: rgba(255,255,255,0.5);
-}
-
-.rowTitle {
-  display: flex;
-  align-items: center;
-  min-width: 0;
-  gap: 12px;
-}
-
-.iconTile {
-  width: 38px;
-  height: 38px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   flex-shrink: 0;
-  color: #fff;
-  font-weight: 900;
-  font-size: 12px;
-  border-radius: 12px;
-  background: var(--primary);
-}
-
-.rowName {
-  font-size: 13px;
-  font-weight: 700;
-  color: var(--foreground);
-  display: block;
-  margin-bottom: 4px;
-}
-
-.rowDetail {
-  color: var(--muted-foreground);
-  font-size: 11px;
-  font-weight: 800;
-  letter-spacing: 0.09em;
-  text-transform: uppercase;
-  margin: 0;
 }
 
-/* Task row */
-.taskRow {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto auto;
-  gap: 12px;
-  align-items: center;
-  padding: 12px;
-  border: 1px solid rgba(255,255,255,0.62);
-  border-radius: 12px;
-  background: rgba(255,255,255,0.5);
+.fileNodeFolder {
+  color: var(--info);
 }
 
-.checkIcon {
-  width: 34px;
-  height: 34px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--primary);
-  font-weight: 800;
-  font-size: 12px;
-  border-radius: 10px;
-  background: rgba(37,99,235,0.1);
+.fileNodeRoot {
+  font-weight: var(--font-weight-medium);
 }
 
-.taskRef {
-  font-size: 13px;
-  font-weight: 700;
-  color: var(--foreground);
-  display: block;
-  margin-bottom: 4px;
+.fileChildren {
+  margin-left: var(--space-xl);
 }
 
-.taskDetail {
-  color: var(--muted-foreground);
-  font-size: 11px;
-  font-weight: 800;
-  letter-spacing: 0.09em;
-  text-transform: uppercase;
-  margin: 0;
+/* ── Activity Timeline ──────────────────────────────────────────────── */
+.activityList {
+  padding: var(--space-sm);
 }
 
-/* File & Run rows */
-.fileRow,
-.runRow {
+.activityItem {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr) auto;
-  gap: 12px;
   align-items: center;
-  padding: 12px;
-  border: 1px solid rgba(255,255,255,0.62);
-  border-radius: 12px;
-  background: rgba(255,255,255,0.5);
+  gap: var(--space-md);
+  padding: var(--space-md);
+  border-radius: var(--radius-md);
+  transition: background var(--duration-fast) var(--ease-standard);
 }
 
-.fileType {
-  width: 34px;
-  height: 34px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
-  font-weight: 900;
-  font-size: 12px;
-  border-radius: 10px;
-  background: var(--primary);
+.activityItem:hover {
+  background: var(--secondary);
 }
 
-.runIcon {
-  width: 34px;
-  height: 34px;
+.activityIcon {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--primary);
-  font-weight: 800;
-  font-size: 12px;
-  border-radius: 10px;
-  background: rgba(37,99,235,0.1);
-}
-
-.metaLine {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-  margin-top: 4px;
-}
-
-/* Side stack (milestones/risks) */
-.sideStack { display: grid; gap: 18px; }
-
-/* Milestone */
-.milestoneRow {
-  display: grid;
-  grid-template-columns: 14px minmax(0, 1fr) auto;
-  gap: 12px;
-  align-items: start;
-  padding: 12px;
-  border: 1px solid rgba(255,255,255,0.62);
-  border-radius: 12px;
-  background: rgba(255,255,255,0.5);
-}
-
-.milestoneDot {
-  width: 10px;
-  height: 10px;
-  margin-top: 5px;
-  border-radius: 50%;
-  background: var(--primary);
-  box-shadow: 0 0 0 5px rgba(37,99,235,0.1);
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  border-radius: var(--radius-md);
 }
 
-.dotCyan {
-  background: #0891b2;
-  box-shadow: 0 0 0 5px rgba(8,145,178,0.1);
+.iconDeploy {
+  color: var(--success);
+  background: color-mix(in oklch, var(--success) 12%, transparent);
 }
 
-.dotPurple {
-  background: #7c3aed;
-  box-shadow: 0 0 0 5px rgba(124,58,237,0.1);
+.iconReview {
+  color: var(--info);
+  background: color-mix(in oklch, var(--info) 12%, transparent);
 }
 
-.milestoneName {
-  font-size: 13px;
-  font-weight: 700;
-  color: var(--foreground);
-  display: block;
-  margin-bottom: 4px;
+.iconAgent {
+  color: var(--brand);
+  background: color-mix(in oklch, var(--brand) 12%, transparent);
 }
 
-.milestoneMeta {
+.iconFile {
   color: var(--muted-foreground);
-  font-size: 11px;
-  font-weight: 800;
-  letter-spacing: 0.09em;
-  text-transform: uppercase;
-  margin: 0;
+  background: var(--secondary);
 }
 
-/* Risk */
-.riskRow {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto auto;
-  gap: 12px;
-  align-items: center;
-  padding: 12px;
-  border: 1px solid rgba(217,119,6,0.18);
-  border-radius: 12px;
-  background: rgba(255,255,255,0.5);
+.iconRun {
+  color: var(--warning);
+  background: color-mix(in oklch, var(--warning) 12%, transparent);
 }
 
-/* Sidebar signal */
-.sidebarSignal {
-  padding: 14px;
-  border: 1px solid rgba(37,99,235,0.12);
-  border-radius: 12px;
-  background: rgba(37,99,235,0.08);
-}
-
-.sidebarSignalTitle {
-  display: block;
-  margin-bottom: 6px;
-  font-size: 13px;
-  font-weight: 700;
+.activityTitle {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-normal);
   color: var(--foreground);
 }
 
-.sidebarSignalText {
+.activityDetail {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-normal);
   color: var(--muted-foreground);
-  font-size: 12px;
-  line-height: 1.45;
+  margin-top: var(--space-xs);
 }
 
-/* Empty state */
-.emptyState {
-  display: grid;
-  gap: 8px;
-  place-items: center;
-  min-height: 150px;
-  padding: 24px;
+.activityTime {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-normal);
   color: var(--muted-foreground);
-  text-align: center;
-  border: 1px dashed rgba(148,163,184,0.34);
-  border-radius: 12px;
-  background: rgba(255,255,255,0.38);
-}
-
-.emptyTitle {
-  color: #334155;
-  font-size: 13px;
-  font-weight: 700;
+  white-space: nowrap;
 }
 
-.emptyText {
-  font-size: 12px;
+/* ── Empty State ────────────────────────────────────────────────────── */
+.emptyState {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-3xl);
+  text-align: center;
+  gap: var(--space-sm);
   color: var(--muted-foreground);
 }
 
-/* Drawer (task creation) */
-.drawerTitle {
-  margin: 0;
-  font-size: 20px;
-  font-weight: 700;
+.emptyTitle {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
   color: var(--foreground);
 }
 
-.drawerHint {
+.emptyText {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-normal);
   color: var(--muted-foreground);
-  font-size: 12px;
-  line-height: 1.45;
-}
-
-.field {
-  display: grid;
-  gap: 7px;
-}
-
-.fieldLabel {
-  color: #334155;
-  font-size: 12px;
-  font-weight: 800;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-}
-
-.fieldInput,
-.fieldTextarea {
-  width: 100%;
-  border: 1px solid rgba(148,163,184,0.28);
-  border-radius: 8px;
-  padding: 10px 12px;
-  color: var(--foreground);
-  background: rgba(255,255,255,0.62);
-  font: inherit;
 }
 
-.fieldTextarea {
-  min-height: 92px;
-  resize: vertical;
+/* ── Responsive ─────────────────────────────────────────────────────── */
+@media (max-width: 1000px) {
+  .statsGrid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }
 
-.drawerActions { display: flex; gap: 10px; }
-.drawerWarning {
-  border: 1px solid rgba(217,119,6,0.2);
-  border-radius: 8px;
-  background: rgba(217,119,6,0.12);
-  color: #d97706;
-  font-size: 13px;
-  font-weight: 700;
-  padding: 9px 12px;
-}
+@media (max-width: 700px) {
+  .header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-md);
+  }
 
-/* Topbar actions */
-.topbarActions { display: flex; align-items: center; gap: 10px; }
-.avatarBtn {
-  width: 38px;
-  height: 38px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
-  font-size: 13px;
-  font-weight: 800;
-  border-radius: 50%;
-  border: 0;
-  cursor: pointer;
-  background: var(--primary);
-}
+  .statsGrid {
+    grid-template-columns: 1fr;
+  }
 
-/* Responsive */
-@media (max-width: 1080px) {
-  .hero,
-  .boardGrid { grid-template-columns: 1fr; }
-  .metricsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-}
+  .tabBar {
+    overflow-x: auto;
+    padding: 0 var(--space-md);
+  }
 
-@media (max-width: 720px) {
-  .metricsGrid { grid-template-columns: 1fr; }
-  .taskRow, .fileRow, .runRow, .riskRow { grid-template-columns: 1fr; }
+  .content {
+    padding: var(--space-md);
+  }
 }
diff --git a/app/web/src/pages/projects/ProjectPage.tsx b/app/web/src/pages/projects/ProjectPage.tsx
index 143678dd..b034ffbe 100644
--- a/app/web/src/pages/projects/ProjectPage.tsx
+++ b/app/web/src/pages/projects/ProjectPage.tsx
@@ -1,41 +1,19 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Icon, Button, Pill, SearchInput, ProgressBar } from '@shared/ui';
-import { ParticleCanvas } from '@/components/ParticleCanvas';
-import { WebLayout } from '@/components/WebLayout';
-import styles from './ProjectPage.module.css';
-
-/* ---- inline mock data (static prototype) ---- */
-
-type MockProject = { id: string; name: string; description: string };
-type MockRun = { runId: string; threadId: string; projectId: string; status: string; createdAt: string };
-type MockFile = { path: string; sizeBytes: number; modifiedAt: string };
-type MockRunner = { id: string; name: string };
-
-const mockProjects: MockProject[] = [
-  { id: 'proj_ui_coord', name: 'UI Coordination', description: 'Frontend page preview, CSS modules migration, and reactive coordination across workbench and agent pages.' },
-  { id: 'proj_api_contract', name: 'API Contract Review', description: 'Review endpoint contracts, event streams, and type safety for the agent hub unified API surface.' },
-  { id: 'proj_infra', name: 'Infrastructure Migration', description: 'Deploy preview pipeline and edge server configuration for the next reactive page milestone.' },
-];
-
-const mockRuns: MockRun[] = [
-  { runId: 'run_ui_pass', threadId: 'thread-01', projectId: 'proj_ui_coord', status: 'running', createdAt: '2026-05-24T08:00:00Z' },
-  { runId: 'run_api_smoke', threadId: 'thread-02', projectId: 'proj_api_contract', status: 'finished', createdAt: '2026-05-24T07:30:00Z' },
-  { runId: 'run_infra_test', threadId: 'thread-03', projectId: 'proj_infra', status: 'queued', createdAt: '2026-05-24T08:15:00Z' },
-];
-
-const mockWorkspaceFiles: MockFile[] = [
-  { path: 'src/pages/AgentSquarePage.tsx', sizeBytes: 14 * 1024, modifiedAt: '2026-05-23' },
-  { path: 'src/pages/PrivateChatsPage.tsx', sizeBytes: 18 * 1024, modifiedAt: '2026-05-24' },
-  { path: 'docs/api-spec.md', sizeBytes: 3 * 1024, modifiedAt: '2026-05-22' },
-  { path: 'deploy/helm-values.yaml', sizeBytes: 2 * 1024, modifiedAt: '2026-05-20' },
-];
-
-const mockRunners: MockRunner[] = [
-  { id: 'runner-001', name: 'Frontend page coordinator' },
-  { id: 'runner-002', name: 'API review agent' },
-  { id: 'runner-003', name: 'Infra specialist' },
-];
+import {
+  mockProjects,
+  mockRuns,
+  mockWorkspaceFiles,
+  mockRunners,
+  getWorkbenchCatalogState,
+  getWorkbenchSectionSource,
+  type Artifact,
+  type Project,
+  type Run,
+  type Runner,
+  type WorkbenchSectionSource,
+} from '@shared/index';
+import { useWorkbenchProjection } from '../../hooks/useWorkbenchProjection';
 
 type BoardView = 'overview' | 'tasks' | 'files';
 type TaskStatus = 'Done' | 'Active' | 'Next';
@@ -45,12 +23,46 @@ type RunStatus = 'Pass' | 'Ready' | 'Deferred' | 'Local';
 type RunFilter = 'All' | RunStatus;
 type NoticeTone = 'success' | 'info' | 'warning';
 
-type Task = { id: string; title: string; owner: string; status: TaskStatus; detail: string };
-type FileItem = { name: string; type: FileType; status: string; detail: string };
-type RunRecord = { id: string; status: RunStatus; detail: string; time: string };
-type RiskItem = { id: string; title: string; detail: string; status: 'Open' | 'Reviewed' | 'Tracked'; reviewable: boolean };
-type TaskForm = { title: string; owner: string; detail: string };
-type Notice = { tone: NoticeTone; message: string };
+type Task = {
+  id: string;
+  title: string;
+  owner: string;
+  status: TaskStatus;
+  detail: string;
+};
+
+type FileItem = {
+  name: string;
+  type: FileType;
+  status: string;
+  detail: string;
+};
+
+type RunRecord = {
+  id: string;
+  status: RunStatus;
+  detail: string;
+  time: string;
+};
+
+type RiskItem = {
+  id: string;
+  title: string;
+  detail: string;
+  status: 'Open' | 'Reviewed' | 'Tracked';
+  reviewable: boolean;
+};
+
+type TaskForm = {
+  title: string;
+  owner: string;
+  detail: string;
+};
+
+type Notice = {
+  tone: NoticeTone;
+  message: string;
+};
 
 const emptyTaskForm: TaskForm = {
   title: 'Review project page responsive states',
@@ -80,7 +92,7 @@ const initialFiles: FileItem[] = mockWorkspaceFiles.map((f) => ({
   name: f.path.split('/').pop() ?? f.path,
   type: (f.path.endsWith('.tsx') || f.path.endsWith('.ts') ? 'TSX' : 'DOC') as FileType,
   status: 'Edited',
-  detail: `${f.path} — ${(f.sizeBytes / 1024).toFixed(1)} KB, modified ${f.modifiedAt.slice(0, 10)}`,
+  detail: `${f.path} - ${(f.sizeBytes / 1024).toFixed(1)} KB, modified ${f.modifiedAt.slice(0, 10)}`,
 }));
 
 const initialRuns: RunRecord[] = mockRuns.map((run) => ({
@@ -91,411 +103,1834 @@ const initialRuns: RunRecord[] = mockRuns.map((run) => ({
 }));
 
 const initialRisks: RiskItem[] = [
-  { id: 'risk-no-api', title: 'No live API yet', detail: 'All data is static and safe for page coordination.', status: 'Open', reviewable: true },
-  { id: 'risk-parallel-edits', title: 'Parallel page edits', detail: 'This worker only changes ProjectPageInteractive.tsx.', status: 'Tracked', reviewable: false },
-  { id: 'risk-local-only', title: 'Local-only state', detail: 'New tasks, risk review, filters, and sync runs reset after refresh.', status: 'Open', reviewable: true },
+  {
+    id: 'risk-no-api',
+    title: 'Edge snapshot fallback',
+    detail: 'Live Edge data is preferred; demo fallback data is labeled when that section has no snapshot data.',
+    status: 'Open',
+    reviewable: true,
+  },
+  {
+    id: 'risk-parallel-edits',
+    title: 'Parallel page edits',
+    detail: 'This worker only changes ProjectPageInteractive.tsx.',
+    status: 'Tracked',
+    reviewable: false,
+  },
+  {
+    id: 'risk-local-only',
+    title: 'Local overlay state',
+    detail: 'New tasks, risk review, filters, and simulated sync runs stay local and reset after refresh.',
+    status: 'Open',
+    reviewable: true,
+  },
 ];
 
 const milestones = [
-  { title: 'Preview shell locked', detail: 'Route preview and project page layout are stable enough for review.', status: 'Done' },
-  { title: 'Stateful React copy', detail: 'Tabs, task panel, risk review, and sync feedback are visible.', status: 'Active' },
-  { title: 'Real API pass', detail: 'Deferred until contracts and backend mocks settle.', status: 'Later' },
+  {
+    title: 'Preview shell locked',
+    detail: 'Route preview and project page layout are stable enough for review.',
+    status: 'Done',
+  },
+  {
+    title: 'Stateful React copy',
+    detail: 'Tabs, task panel, risk review, and sync feedback are visible.',
+    status: 'Active',
+  },
+  {
+    title: 'Real API pass',
+    detail: 'Deferred until contracts and backend mocks settle.',
+    status: 'Later',
+  },
 ];
 
+function demoProjectCard(project: ReturnType<typeof projectFromApi>, label: (detail: string) => string) {
+  return {
+    ...project,
+    detail: label(project.detail),
+  };
+}
+
+function demoTaskCard(task: Task, label: (detail: string) => string) {
+  return {
+    ...task,
+    detail: label(task.detail),
+  };
+}
+
+function demoFileCard(file: FileItem, label: (detail: string) => string) {
+  return {
+    ...file,
+    detail: label(file.detail),
+  };
+}
+
+function demoRunCard(run: RunRecord, label: (detail: string) => string) {
+  return {
+    ...run,
+    detail: label(run.detail),
+  };
+}
+
+function projectFromApi(project: Project) {
+  return {
+    code: project.id.split('_').pop()?.toUpperCase().slice(0, 2) ?? project.id.slice(0, 2).toUpperCase(),
+    name: project.name,
+    detail: project.description ?? `Created ${project.createdAt.slice(0, 10)}`,
+    status: 'In progress' as const,
+  };
+}
+
+function taskFromRun(run: Run, index: number, runners: Runner[]): Task {
+  return {
+    id: `task-${run.runId}`,
+    title: `Run ${run.runId.split('_').pop()} on ${run.threadId}`,
+    owner: runners[index % Math.max(runners.length, 1)]?.name ?? 'Agent',
+    status: run.status === 'finished' ? 'Done' : run.status === 'running' || run.status === 'starting' ? 'Active' : 'Next',
+    detail: `Status: ${run.status}. Project: ${run.projectId}, Thread: ${run.threadId}`,
+  };
+}
+
+function fileFromArtifact(artifact: Artifact): FileItem {
+  const name = artifact.path.split('/').pop() ?? artifact.path;
+  return {
+    name,
+    type: artifact.path.endsWith('.tsx') || artifact.path.endsWith('.ts') ? 'TSX' : 'DOC',
+    status: artifact.kind,
+    detail: `${artifact.path} - ${(artifact.sizeBytes / 1024).toFixed(1)} KB, created ${artifact.createdAt.slice(0, 10)}`,
+  };
+}
+
+function runRecordFromApi(run: Run): RunRecord {
+  return {
+    id: run.runId,
+    status: run.status === 'finished' ? 'Pass' : run.status === 'running' || run.status === 'starting' ? 'Ready' : run.status === 'queued' ? 'Deferred' : 'Local',
+    detail: `Run on thread ${run.threadId}, project ${run.projectId}. Status: ${run.status}.`,
+    time: run.createdAt.slice(11, 16),
+  };
+}
+
+function sourceLabelKey(label: string) {
+  if (label === 'Edge snapshot') return 'source.edgeSnapshot';
+  if (label === 'Offline snapshot') return 'source.offlineSnapshot';
+  if (label === 'Loading snapshot') return 'source.loadingSnapshot';
+  if (label === 'Mock fallback') return 'source.mockFallback';
+  if (label === 'Snapshot unavailable') return 'source.snapshotUnavailable';
+  if (label.startsWith('Local dry-run / ')) return 'source.localDryRun';
+  return 'source.snapshotUnavailable';
+}
+
+function SourceLabel({ source }: { source: WorkbenchSectionSource }) {
+  const { t } = useTranslation('project');
+  const baseLabel = source.label.startsWith('Local dry-run / ')
+    ? source.label.replace('Local dry-run / ', '')
+    : source.label;
+
+  return (
+    <span className={`projectSourceLabel ${source.tone}`}>
+      {source.label.startsWith('Local dry-run / ')
+        ? t('source.localDryRun', { source: t(sourceLabelKey(baseLabel)) })
+        : t(sourceLabelKey(source.label))}
+    </span>
+  );
+}
+
+const pageStyles = `
+  @import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap");
+
+  .projectReactRoot {
+    position: relative;
+    height: 100%;
+    overflow: hidden;
+    color: var(--text);
+    background:
+      radial-gradient(circle at 18% 12%, rgba(8, 167, 207, 0.16), transparent 28%),
+      radial-gradient(circle at 82% 8%, rgba(116, 87, 232, 0.14), transparent 30%),
+      linear-gradient(135deg, var(--surface-alt), var(--bg));
+    font-family: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  .projectReactRoot * {
+    box-sizing: border-box;
+  }
+
+  .projectParticles {
+    position: fixed;
+    inset: 0;
+    z-index: 0;
+    pointer-events: none;
+  }
+
+  [data-theme="dark"] .projectReactRoot {
+    background:
+      radial-gradient(circle at 18% 12%, rgba(8, 167, 207, 0.1), transparent 28%),
+      radial-gradient(circle at 82% 8%, rgba(116, 87, 232, 0.1), transparent 30%),
+      linear-gradient(135deg, var(--surface-alt), var(--bg));
+  }
+
+  .projectReactShell {
+    position: relative;
+    z-index: 1;
+    display: grid;
+    grid-template-columns: 280px minmax(0, 1fr);
+    gap: 18px;
+    height: 100%;
+    padding: 18px;
+  }
+
+  .projectGlass {
+    background: var(--glass-bg);
+    border: 1px solid var(--glass-border);
+    border-radius: 12px;
+    box-shadow: 0 18px 48px var(--glass-shadow);
+    backdrop-filter: blur(28px) saturate(160%);
+    -webkit-backdrop-filter: blur(28px) saturate(160%);
+  }
+
+  .projectSidebar {
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+    height: 100%;
+    padding: 18px;
+  }
+
+  .projectBrand {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding-bottom: 14px;
+    border-bottom: 1px solid var(--border-subtle);
+  }
+
+  .projectBrandMark,
+  .projectIconTile,
+  .projectFileType {
+    display: grid;
+    place-items: center;
+    color: var(--white);
+    font-weight: 900;
+    background: var(--accent-gradient);
+  }
+
+  .projectBrandMark {
+    width: 38px;
+    height: 38px;
+    flex: 0 0 auto;
+    border-radius: 10px;
+    font-size: 16px;
+    line-height: 1;
+    box-shadow: 0 10px 22px var(--brand-glow);
+  }
+
+  .projectTitle h2 {
+    margin: 0;
+    font-size: 15px;
+    line-height: 1.25;
+    color: var(--text);
+  }
+
+  .projectTitle p {
+    margin: 4px 0 0;
+    color: var(--text-muted);
+    font-size: 11px;
+    font-weight: 800;
+    letter-spacing: 0.09em;
+    line-height: 1.236;
+  }
+
+  .projectMuted {
+    margin: 4px 0 0;
+    color: var(--text-muted);
+    font-size: 11px;
+    font-weight: 800;
+    letter-spacing: 0.09em;
+    text-transform: uppercase;
+    line-height: 1.2;
+  }
+
+  .projectNav {
+    display: grid;
+    gap: 8px;
+  }
+
+  .projectNav button,
+  .projectTab,
+  .projectPrimaryButton,
+  .projectSecondaryButton,
+  .projectGhostButton,
+  .projectIconButton {
+    border: 0;
+    border-radius: 8px;
+    font: inherit;
+    cursor: pointer;
+  }
+
+  .projectNav button {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 11px 12px;
+    color: var(--text-secondary);
+    text-align: left;
+    background: transparent;
+  }
+
+  .projectNav button.isActive {
+    color: var(--accent);
+    background: var(--accent-light);
+    box-shadow: inset 3px 0 0 var(--accent);
+  }
+
+  .projectSidebarNote {
+    margin-top: auto;
+    padding: 14px;
+    border: 1px solid rgba(37, 99, 235, 0.12);
+    border-radius: 12px;
+    background: var(--accent-lighter);
+  }
+
+  .projectSidebarNote strong {
+    display: block;
+    margin-bottom: 6px;
+    font-size: 13px;
+  }
+
+  .projectMain {
+    min-width: 0;
+    max-height: 100%;
+    overflow: auto;
+    padding-right: 2px;
+  }
+
+  .projectTopbar,
+  .projectHero,
+  .projectMetricGrid,
+  .projectBoardGrid {
+    margin-bottom: 18px;
+  }
+
+  .projectTopbar {
+    position: sticky;
+    top: 0;
+    z-index: 4;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    padding: 14px 18px;
+  }
+
+  .projectSearch {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-width: min(430px, 100%);
+    padding: 10px 12px;
+    border: 1px solid rgba(148, 163, 184, 0.22);
+    border-radius: 8px;
+    background: var(--surface);
+  }
+
+  .projectSearch input {
+    width: 100%;
+    min-width: 0;
+    border: 0;
+    outline: 0;
+    color: var(--text);
+    background: transparent;
+  }
+
+  .projectTopActions,
+  .projectButtonRow,
+  .projectCardHeader,
+  .projectStatusRow,
+  .projectRowTitle {
+    display: flex;
+    align-items: center;
+  }
+
+  .projectTopActions,
+  .projectButtonRow {
+    gap: 10px;
+  }
+
+  .projectIconButton {
+    display: grid;
+    width: 38px;
+    height: 38px;
+    place-items: center;
+    color: var(--text-secondary);
+    background: var(--surface);
+    border: 1px solid rgba(148, 163, 184, 0.22);
+  }
+
+  .projectAvatar {
+    display: grid;
+    width: 38px;
+    height: 38px;
+    place-items: center;
+    color: var(--white);
+    border-radius: 50%;
+    font-size: 13px;
+    font-weight: 800;
+    background: linear-gradient(135deg, var(--accent), var(--accent));
+  }
+
+  .projectHero {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 300px;
+    gap: 18px;
+    padding: 22px;
+  }
+
+  .projectEyebrow {
+    margin: 0 0 8px;
+    color: var(--accent);
+    font-size: 12px;
+    font-weight: 800;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .projectHero h2 {
+    max-width: 720px;
+    margin: 0 0 8px;
+    font-size: 34px;
+    line-height: 1.12;
+    letter-spacing: 0;
+  }
+
+  .projectHero p {
+    max-width: 700px;
+    margin: 0 0 18px;
+    color: var(--text-muted);
+    line-height: 1.55;
+  }
+
+  .projectPrimaryButton,
+  .projectSecondaryButton,
+  .projectGhostButton {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    min-height: 38px;
+    padding: 9px 14px;
+    font-weight: 700;
+    line-height: 1;
+  }
+
+  .projectPrimaryButton:disabled,
+  .projectSecondaryButton:disabled,
+  .projectGhostButton:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  .projectPrimaryButton {
+    color: var(--white);
+    background: var(--brand-gradient);
+    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.24);
+  }
+
+  .projectSecondaryButton,
+  .projectGhostButton {
+    color: var(--text);
+    background: var(--surface);
+    border: 1px solid rgba(148, 163, 184, 0.25);
+  }
+
+  .projectSyncMessage {
+    display: inline-flex;
+    align-items: center;
+    min-height: 38px;
+    padding: 9px 12px;
+    color: var(--accent);
+    border: 1px solid rgba(37, 99, 235, 0.16);
+    border-radius: 8px;
+    background: var(--accent-lighter);
+    font-size: 13px;
+    font-weight: 700;
+  }
+
+  .projectSyncMessage.success {
+    color: var(--success);
+    border-color: rgba(5, 150, 105, 0.18);
+    background: var(--success-bg);
+  }
+
+  .projectSyncMessage.warning {
+    color: var(--warning-dot);
+    border-color: rgba(217, 119, 6, 0.2);
+    background: rgba(217, 119, 6, 0.12);
+  }
+
+  .projectHeroSide {
+    display: grid;
+    gap: 12px;
+  }
+
+  .projectProgressCard {
+    padding: 14px;
+    border: 1px solid var(--glass-border);
+    border-radius: 12px;
+    background: var(--surface);
+  }
+
+  .projectStatusRow {
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 8px;
+  }
+
+  .projectStatusRow strong {
+    font-size: 20px;
+  }
+
+  .projectMeter {
+    height: 8px;
+    overflow: hidden;
+    border-radius: 999px;
+    background: rgba(15, 23, 42, 0.08);
+  }
+
+  .projectMeter span {
+    display: block;
+    height: 100%;
+    border-radius: inherit;
+    background: linear-gradient(90deg, var(--accent), var(--accent));
+  }
+
+  .projectMetricGrid {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 18px;
+  }
+
+  .projectMetric {
+    display: grid;
+    grid-template-columns: 42px minmax(0, 1fr);
+    gap: 12px;
+    align-items: center;
+    padding: 16px;
+  }
+
+  .projectMetricIcon {
+    display: grid;
+    width: 42px;
+    height: 42px;
+    place-items: center;
+    color: var(--accent);
+    border-radius: 12px;
+    background: var(--accent-light);
+    font-weight: 800;
+  }
+
+  .projectMetric strong {
+    display: block;
+    font-size: 22px;
+    line-height: 1.1;
+  }
+
+  .projectMetric span {
+    color: var(--text-muted);
+    font-size: 12px;
+  }
+
+  .projectBoardGrid {
+    display: grid;
+    grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.85fr);
+    gap: 18px;
+  }
+
+  .projectPanel {
+    padding: 18px;
+  }
+
+  .projectCardHeader {
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 14px;
+  }
+
+  .projectHeaderActions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 10px;
+    flex-wrap: wrap;
+  }
+
+  .projectCardHeader h3 {
+    margin: 0;
+    font-size: 18px;
+  }
+
+  .projectTabs {
+    display: flex;
+    gap: 6px;
+    padding: 4px;
+    border-radius: 10px;
+    background: rgba(15, 23, 42, 0.06);
+  }
+
+  .projectTab {
+    padding: 8px 10px;
+    color: var(--text-muted);
+    background: transparent;
+    font-weight: 700;
+  }
+
+  .projectTab.isActive {
+    color: var(--accent);
+    background: var(--glass-bg);
+    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
+  }
+
+  .projectFilterBar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12px;
+  }
+
+  .projectFilterGroup {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    align-items: center;
+  }
+
+  .projectFilterLabel {
+    color: var(--text-muted);
+    font-size: 12px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+  }
+
+  .projectMiniButton {
+    min-height: 28px;
+    border: 1px solid rgba(148, 163, 184, 0.25);
+    border-radius: 8px;
+    padding: 6px 9px;
+    color: var(--text-secondary);
+    background: var(--surface);
+    font: inherit;
+    font-size: 11px;
+    font-weight: 800;
+    line-height: 1;
+    cursor: pointer;
+  }
+
+  .projectMiniButton.isActive {
+    color: var(--accent);
+    border-color: rgba(37, 99, 235, 0.2);
+    background: var(--accent-light);
+  }
+
+  .projectMiniButton:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  .projectList,
+  .projectStack {
+    display: grid;
+    gap: 10px;
+  }
+
+  .projectRow,
+  .projectTaskRow,
+  .projectFileRow,
+  .projectRunRow,
+  .projectMilestoneRow,
+  .projectRiskRow {
+    border: 1px solid var(--glass-border);
+    border-radius: 12px;
+    background: var(--surface);
+  }
+
+  .projectRow {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 14px;
+    padding: 14px;
+  }
+
+  .projectRowTitle {
+    min-width: 0;
+    gap: 12px;
+  }
+
+  .projectIconTile {
+    width: 38px;
+    height: 38px;
+    flex: 0 0 auto;
+    border-radius: 12px;
+  }
+
+  .projectRowTitle strong,
+  .projectTaskRow strong,
+  .projectFileRow strong,
+  .projectRunRow strong,
+  .projectMilestoneRow strong,
+  .projectRiskRow strong {
+    display: block;
+    margin-bottom: 4px;
+  }
+
+  .projectPill {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    min-height: 24px;
+    padding: 4px 9px;
+    border: 1px solid rgba(37, 99, 235, 0.13);
+    border-radius: 999px;
+    font-size: 11px;
+    font-weight: 800;
+    line-height: 1;
+    white-space: nowrap;
+  }
+
+  .projectPill.blue {
+    color: var(--accent);
+    border-color: rgba(37, 99, 235, 0.18);
+    background: var(--accent-light);
+  }
+
+  .projectPill.cyan {
+    color: var(--accent);
+    border-color: rgba(8, 145, 178, 0.18);
+    background: rgba(8, 145, 178, 0.1);
+  }
+
+  .projectPill.purple {
+    color: var(--accent);
+    border-color: rgba(124, 58, 237, 0.18);
+    background: rgba(124, 58, 237, 0.1);
+  }
+
+  .projectPill.green {
+    color: var(--success);
+    border-color: rgba(5, 150, 105, 0.18);
+    background: var(--success-bg);
+  }
+
+  .projectPill.amber {
+    color: var(--warning-dot);
+    border-color: rgba(217, 119, 6, 0.2);
+    background: rgba(217, 119, 6, 0.12);
+  }
+
+  .projectPill.neutral {
+    color: var(--text-muted);
+    border-color: rgba(148, 163, 184, 0.25);
+    background: rgba(148, 163, 184, 0.12);
+  }
+
+  .projectSourceLabel {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 22px;
+    padding: 4px 8px;
+    border: 1px solid rgba(148, 163, 184, 0.24);
+    border-radius: 999px;
+    color: var(--text-muted);
+    background: rgba(148, 163, 184, 0.1);
+    font-size: 10px;
+    font-weight: 900;
+    line-height: 1;
+    white-space: nowrap;
+  }
+
+  .projectSourceLabel.green {
+    color: var(--success);
+    border-color: rgba(5, 150, 105, 0.18);
+    background: var(--success-bg);
+  }
+
+  .projectSourceLabel.purple {
+    color: var(--accent);
+    border-color: rgba(124, 58, 237, 0.18);
+    background: rgba(124, 58, 237, 0.1);
+  }
+
+  .projectSourceLabel.amber {
+    color: var(--warning-dot);
+    border-color: rgba(217, 119, 6, 0.2);
+    background: rgba(217, 119, 6, 0.12);
+  }
+
+  .projectSourceLabel.cyan {
+    color: var(--accent);
+    border-color: rgba(8, 145, 178, 0.18);
+    background: rgba(8, 145, 178, 0.1);
+  }
+
+  .projectTaskRow,
+  .projectFileRow,
+  .projectRunRow {
+    display: grid;
+    gap: 12px;
+    align-items: center;
+    padding: 12px;
+  }
+
+  .projectTaskRow {
+    grid-template-columns: auto minmax(0, 1fr) auto auto;
+  }
+
+  .projectFileRow,
+  .projectRunRow {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+  }
+
+  .projectCheck,
+  .projectRunIcon,
+  .projectFileType {
+    width: 34px;
+    height: 34px;
+    border-radius: 10px;
+    font-size: 12px;
+  }
+
+  .projectCheck,
+  .projectRunIcon {
+    display: grid;
+    place-items: center;
+    color: var(--accent);
+    background: var(--accent-light);
+    font-weight: 800;
+  }
+
+  .projectTaskRow.done .projectCheck {
+    color: var(--success);
+    background: var(--success-bg);
+  }
+
+  .projectInlineActions {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .projectEmptyState {
+    display: grid;
+    gap: 8px;
+    place-items: center;
+    min-height: 150px;
+    padding: 24px;
+    color: var(--text-muted);
+    text-align: center;
+    border: 1px dashed rgba(148, 163, 184, 0.34);
+    border-radius: 12px;
+    background: rgba(255, 255, 255, 0.38);
+  }
+
+  .projectEmptyState strong {
+    color: var(--text-secondary);
+  }
+
+  .projectMetaLine {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-items: center;
+    margin-top: 4px;
+  }
+
+  .projectSideStack {
+    display: grid;
+    gap: 18px;
+  }
+
+  .projectMilestoneRow {
+    display: grid;
+    grid-template-columns: 14px minmax(0, 1fr) auto;
+    gap: 12px;
+    align-items: start;
+    padding: 12px;
+  }
+
+  .projectDot {
+    width: 10px;
+    height: 10px;
+    margin-top: 5px;
+    border-radius: 50%;
+    background: var(--accent);
+    box-shadow: 0 0 0 5px rgba(37, 99, 235, 0.1);
+  }
+
+  .projectDot.cyan {
+    background: var(--accent);
+    box-shadow: 0 0 0 5px rgba(8, 145, 178, 0.1);
+  }
+
+  .projectDot.purple {
+    background: var(--accent);
+    box-shadow: 0 0 0 5px rgba(124, 58, 237, 0.1);
+  }
+
+  .projectRiskRow {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto auto;
+    gap: 12px;
+    align-items: center;
+    padding: 12px;
+    border-color: rgba(217, 119, 6, 0.18);
+  }
+
+  .projectDrawer {
+    position: fixed;
+    inset: 18px 18px 18px auto;
+    z-index: 10;
+    display: grid;
+    width: min(420px, calc(100vw - 36px));
+    align-content: start;
+    gap: 14px;
+    padding: 18px;
+  }
+
+  .projectDrawer h3 {
+    margin: 0;
+    font-size: 20px;
+  }
+
+  .projectField {
+    display: grid;
+    gap: 7px;
+  }
+
+  .projectField label {
+    color: var(--text-secondary);
+    font-size: 12px;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+  }
+
+  .projectField input,
+  .projectField textarea {
+    width: 100%;
+    border: 1px solid rgba(148, 163, 184, 0.28);
+    border-radius: 8px;
+    padding: 10px 12px;
+    color: var(--text);
+    background: var(--surface);
+    font: inherit;
+  }
+
+  .projectField textarea {
+    min-height: 92px;
+    resize: vertical;
+  }
+
+  @media (max-width: 1180px) {
+    .projectReactShell {
+      grid-template-columns: 1fr;
+    }
+
+    .projectSidebar {
+      min-height: auto;
+    }
+
+    .projectNav {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .projectHero,
+    .projectBoardGrid {
+      grid-template-columns: 1fr;
+    }
+
+    .projectMetricGrid {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @media (max-width: 820px) {
+    .projectReactRoot {
+      overflow: auto;
+    }
+
+    .projectReactShell {
+      padding: 12px;
+    }
+
+    .projectMain {
+      max-height: none;
+      overflow: visible;
+    }
+
+    .projectTopbar,
+    .projectRow,
+    .projectCardHeader,
+    .projectFilterBar {
+      align-items: stretch;
+      flex-direction: column;
+    }
+
+    .projectTaskRow,
+    .projectFileRow,
+    .projectRunRow,
+    .projectRiskRow {
+      grid-template-columns: 1fr;
+    }
+
+    .projectMetricGrid {
+      grid-template-columns: 1fr;
+    }
+  }
+`;
+
 function statusTone(status: string): 'blue' | 'cyan' | 'purple' | 'green' | 'amber' {
-  if (status === 'Done' || status === 'Pass' || status === 'Reviewed') return 'green';
-  if (status === 'Review' || status === 'Ready' || status === 'Local') return 'cyan';
-  if (status === 'Queued' || status === 'Later' || status === 'Deferred') return 'purple';
-  if (status === 'Next' || status === 'Open') return 'amber';
+  if (status === 'Done' || status === 'Pass' || status === 'Reviewed') {
+    return 'green';
+  }
+
+  if (status === 'Review' || status === 'Ready' || status === 'Local') {
+    return 'cyan';
+  }
+
+  if (status === 'Queued' || status === 'Later' || status === 'Deferred') {
+    return 'purple';
+  }
+
+  if (status === 'Next' || status === 'Open') {
+    return 'amber';
+  }
+
   return 'blue';
 }
 
 function matchesQuery(fields: string[], query: string) {
-  const q = query.trim().toLowerCase();
-  if (!q) return true;
-  return fields.some((f) => f.toLowerCase().includes(q));
+  const normalizedQuery = query.trim().toLowerCase();
+
+  if (!normalizedQuery) {
+    return true;
+  }
+
+  return fields.some((field) => field.toLowerCase().includes(normalizedQuery));
 }
 
-function nextTaskStatus(s: TaskStatus): TaskStatus {
-  if (s === 'Next') return 'Active';
-  if (s === 'Active') return 'Done';
+function nextTaskStatus(status: TaskStatus): TaskStatus {
+  if (status === 'Next') {
+    return 'Active';
+  }
+
+  if (status === 'Active') {
+    return 'Done';
+  }
+
   return 'Active';
 }
 
-function formatLocalTime(d = new Date()) {
-  return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+function formatLocalTime(date = new Date()) {
+  return date.toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
 }
 
-export function ProjectPage() {
-  const { t } = useTranslation();
+function ProjectParticles() {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return undefined;
+    }
+
+    const context = canvas.getContext('2d');
+    if (!context) {
+      return undefined;
+    }
+
+    type Particle = {
+      x: number;
+      y: number;
+      vx: number;
+      vy: number;
+      radius: number;
+      alpha: number;
+      hue: number;
+    };
+
+    const particles: Particle[] = [];
+    let frameId = 0;
+
+    const createParticle = (index: number): Particle => ({
+      x: Math.random() * window.innerWidth,
+      y: Math.random() * window.innerHeight,
+      vx: -0.18 + Math.random() * 0.36,
+      vy: -0.18 - Math.random() * 0.48,
+      radius: 1.6 + Math.random() * 2.6,
+      alpha: 0.18 + Math.random() * 0.2,
+      hue: index % 3 === 0 ? 196 : 210,
+    });
+
+    const resetParticles = () => {
+      particles.length = 0;
+      for (let index = 0; index < 56; index += 1) {
+        particles.push(createParticle(index));
+      }
+    };
+
+    const resize = () => {
+      const ratio = window.devicePixelRatio || 1;
+      canvas.width = Math.floor(window.innerWidth * ratio);
+      canvas.height = Math.floor(window.innerHeight * ratio);
+      canvas.style.width = `${window.innerWidth}px`;
+      canvas.style.height = `${window.innerHeight}px`;
+      context.setTransform(ratio, 0, 0, ratio, 0, 0);
+      resetParticles();
+    };
+
+    const draw = () => {
+      context.clearRect(0, 0, window.innerWidth, window.innerHeight);
+
+      for (let index = 0; index < particles.length; index += 1) {
+        const particle = particles[index];
+        if (!particle) {
+          continue;
+        }
+
+        particle.x += particle.vx;
+        particle.y += particle.vy;
+
+        if (particle.y < -16) {
+          particle.y = window.innerHeight + 16;
+          particle.x = Math.random() * window.innerWidth;
+        }
+
+        if (particle.x < -16) {
+          particle.x = window.innerWidth + 16;
+        }
+
+        if (particle.x > window.innerWidth + 16) {
+          particle.x = -16;
+        }
+
+        context.beginPath();
+        context.fillStyle = `hsla(${particle.hue}, 84%, 48%, ${particle.alpha})`;
+        context.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
+        context.fill();
+
+        for (let inner = index + 1; inner < particles.length; inner += 1) {
+          const other = particles[inner];
+          if (!other) {
+            continue;
+          }
+
+          const distance = Math.hypot(particle.x - other.x, particle.y - other.y);
+          if (distance < 126) {
+            context.beginPath();
+            context.strokeStyle = `rgba(23, 105, 232, ${(1 - distance / 126) * 0.07})`;
+            context.lineWidth = 1;
+            context.moveTo(particle.x, particle.y);
+            context.lineTo(other.x, other.y);
+            context.stroke();
+          }
+        }
+      }
+
+      frameId = window.requestAnimationFrame(draw);
+    };
+
+    resize();
+    draw();
+    window.addEventListener('resize', resize);
+
+    return () => {
+      window.cancelAnimationFrame(frameId);
+      window.removeEventListener('resize', resize);
+    };
+  }, []);
+
+  return <canvas aria-hidden="true" className="projectParticles" ref={canvasRef} />;
+}
+
+export function ProjectPageInteractive() {
+  const { t } = useTranslation('project');
+  const workbenchState = useWorkbenchProjection();
+  const {
+    hasLiveCatalog,
+    label: catalogLabel,
+    message: catalogDetail,
+    mode: catalogMode,
+    tone: catalogTone,
+  } = getWorkbenchCatalogState(workbenchState);
+  const projectSource = getWorkbenchSectionSource({
+    mode: catalogMode,
+    hasSectionSnapshot: hasLiveCatalog && workbenchState.projects.length > 0,
+  });
+  const fileSource = getWorkbenchSectionSource({
+    mode: catalogMode,
+    hasSectionSnapshot: hasLiveCatalog && workbenchState.artifacts.length > 0,
+  });
+  const shouldUseDemoFallback = catalogMode === 'mock';
+  const demoDetailLabel = (detail: string) => t('demo.cardDetail', { detail });
+  const demoProjects = useMemo(
+    () => projects.map((project) => demoProjectCard(project, demoDetailLabel)),
+    [t],
+  );
+  const demoTasks = useMemo(
+    () => initialTasks.map((task) => demoTaskCard(task, demoDetailLabel)),
+    [t],
+  );
+  const demoFiles = useMemo(
+    () => initialFiles.map((file) => demoFileCard(file, demoDetailLabel)),
+    [t],
+  );
+  const demoRuns = useMemo(
+    () => initialRuns.map((run) => demoRunCard(run, demoDetailLabel)),
+    [t],
+  );
+  const projectedProjects = hasLiveCatalog && workbenchState.projects.length
+    ? workbenchState.projects.map(projectFromApi)
+    : shouldUseDemoFallback
+      ? demoProjects
+      : [];
+  const projectedTasks = hasLiveCatalog && workbenchState.runs.length
+    ? workbenchState.runs.map((run, index) => taskFromRun(run, index, workbenchState.runners))
+    : shouldUseDemoFallback
+      ? demoTasks
+      : [];
+  const projectedFiles = hasLiveCatalog && workbenchState.artifacts.length
+    ? workbenchState.artifacts.map(fileFromArtifact)
+    : shouldUseDemoFallback
+      ? demoFiles
+      : [];
+  const projectedRuns = hasLiveCatalog && workbenchState.runs.length
+    ? workbenchState.runs.map(runRecordFromApi)
+    : shouldUseDemoFallback
+      ? demoRuns
+      : [];
+
+  const viewLabels: Record<BoardView, string> = {
+    overview: t('sidebar.navOverview'),
+    tasks: t('sidebar.navTasks'),
+    files: t('sidebar.navFiles'),
+  };
+
+  const statusLabels: Record<string, string> = {
+    Done: t('status.done'),
+    Active: t('status.active'),
+    Next: t('status.next'),
+    'In progress': t('status.inProgress'),
+    Pass: t('status.pass'),
+    Ready: t('status.ready'),
+    Deferred: t('status.deferred'),
+    Local: t('status.local'),
+    Reviewed: t('status.reviewed'),
+    Open: t('status.open'),
+    Tracked: t('status.tracked'),
+    Edited: t('status.edited'),
+    Later: t('status.later'),
+  };
+
+  const statusLabel = (status: string) => statusLabels[status] || status;
+
+  const taskActionLabel = (status: TaskStatus) => {
+    if (status === 'Next') return t('actions.start');
+    if (status === 'Active') return t('actions.markDone');
+    return t('actions.reopen');
+  };
+
   const [activeView, setActiveView] = useState<BoardView>('overview');
   const [searchTerm, setSearchTerm] = useState('');
   const [isTaskPanelOpen, setIsTaskPanelOpen] = useState(false);
   const [taskForm, setTaskForm] = useState<TaskForm>(emptyTaskForm);
-  const [projectTasks, setProjectTasks] = useState<Task[]>(initialTasks);
-  const [projectRuns, setProjectRuns] = useState<RunRecord[]>(initialRuns);
+  const [localTasks, setLocalTasks] = useState<Task[]>([]);
+  const [localRuns, setLocalRuns] = useState<RunRecord[]>([]);
   const [projectRisks, setProjectRisks] = useState<RiskItem[]>(initialRisks);
   const [fileFilter, setFileFilter] = useState<FileFilter>('All');
   const [runFilter, setRunFilter] = useState<RunFilter>('All');
   const [lastSyncAt, setLastSyncAt] = useState('Not synced yet');
   const [syncStatus, setSyncStatus] = useState('Idle');
   const [notice, setNotice] = useState<Notice | null>(null);
+  const taskOverrides = useMemo(
+    () => new Map(localTasks.filter((task) => !task.id.startsWith('local-task-')).map((task) => [task.id, task])),
+    [localTasks],
+  );
+  const projectTasks = useMemo(
+    () => [
+      ...localTasks.filter((task) => task.id.startsWith('local-task-')),
+      ...projectedTasks.map((task) => taskOverrides.get(task.id) ?? task),
+    ],
+    [localTasks, projectedTasks, taskOverrides],
+  );
+  const projectRuns = useMemo(() => [...localRuns, ...projectedRuns], [localRuns, projectedRuns]);
+  const taskSource = getWorkbenchSectionSource({
+    mode: catalogMode,
+    hasSectionSnapshot: hasLiveCatalog && workbenchState.runs.length > 0,
+    hasLocalDryRun: localTasks.length > 0,
+  });
+  const runSource = getWorkbenchSectionSource({
+    mode: catalogMode,
+    hasSectionSnapshot: hasLiveCatalog && workbenchState.runs.length > 0,
+    hasLocalDryRun: localRuns.length > 0,
+  });
 
   const canSaveTask = taskForm.title.trim().length > 0 && taskForm.owner.trim().length > 0;
-  const completedTaskCount = projectTasks.filter((t) => t.status === 'Done').length;
-  const activeTaskCount = projectTasks.filter((t) => t.status !== 'Done').length;
+  const completedTaskCount = projectTasks.filter((task) => task.status === 'Done').length;
+  const activeTaskCount = projectTasks.filter((task) => task.status !== 'Done').length;
   const deliveryProgress = Math.round((completedTaskCount / Math.max(projectTasks.length, 1)) * 100);
-  const reviewableRisks = projectRisks.filter((r) => r.reviewable);
-  const openRiskCount = projectRisks.filter((r) => r.status === 'Open').length;
-  const reviewedRiskCount = projectRisks.filter((r) => r.status === 'Reviewed').length;
+  const reviewableRisks = projectRisks.filter((risk) => risk.reviewable);
+  const openRiskCount = projectRisks.filter((risk) => risk.status === 'Open').length;
+  const reviewedRiskCount = projectRisks.filter((risk) => risk.status === 'Reviewed').length;
   const riskProgress = Math.round((reviewedRiskCount / Math.max(reviewableRisks.length, 1)) * 100);
-  const allReviewableRisksClosed = reviewableRisks.every((r) => r.status === 'Reviewed');
+  const allReviewableRisksClosed = reviewableRisks.every((risk) => risk.status === 'Reviewed');
 
-  const filteredProjects = useMemo(() => projects.filter((p) => matchesQuery([p.name, p.detail, p.status], searchTerm)), [searchTerm]);
-  const filteredTasks = useMemo(() => projectTasks.filter((t) => matchesQuery([t.title, t.owner, t.detail, t.status], searchTerm)), [projectTasks, searchTerm]);
-  const filteredFiles = useMemo(() => initialFiles.filter((f) => (fileFilter === 'All' || f.type === fileFilter) && matchesQuery([f.name, f.type, f.status, f.detail], searchTerm)), [fileFilter, searchTerm]);
-  const filteredRuns = useMemo(() => projectRuns.filter((r) => (runFilter === 'All' || r.status === runFilter) && matchesQuery([r.id, r.status, r.detail, r.time], searchTerm)), [projectRuns, runFilter, searchTerm]);
+  const filteredProjects = useMemo(
+    () => projectedProjects.filter((project) => matchesQuery([project.name, project.detail, project.status], searchTerm)),
+    [projectedProjects, searchTerm],
+  );
+
+  const filteredTasks = useMemo(
+    () =>
+      projectTasks.filter((task) =>
+        matchesQuery([task.title, task.owner, task.detail, task.status], searchTerm),
+      ),
+    [projectTasks, searchTerm],
+  );
+
+  const filteredFiles = useMemo(
+    () =>
+      projectedFiles.filter(
+        (file) =>
+          (fileFilter === 'All' || file.type === fileFilter) &&
+          matchesQuery([file.name, file.type, file.status, file.detail], searchTerm),
+      ),
+    [fileFilter, projectedFiles, searchTerm],
+  );
+
+  const filteredRuns = useMemo(
+    () =>
+      projectRuns.filter(
+        (run) =>
+          (runFilter === 'All' || run.status === runFilter) &&
+          matchesQuery([run.id, run.status, run.detail, run.time], searchTerm),
+      ),
+    [projectRuns, runFilter, searchTerm],
+  );
 
   const activityPrompt = useMemo(() => {
-    if (notice) return notice.message;
-    if (openRiskCount > 0) return `${openRiskCount} open risk${openRiskCount === 1 ? '' : 's'} still need review.`;
-    return `${activeTaskCount} active task${activeTaskCount === 1 ? '' : 's'} remain after local review.`;
-  }, [activeTaskCount, notice, openRiskCount]);
+    if (notice) {
+      return notice.message;
+    }
+
+    if (openRiskCount > 0) {
+      return t('confirm.openRisksRemaining', { count: openRiskCount });
+    }
+
+    return t('confirm.activeTasksRemaining', { count: activeTaskCount });
+  }, [activeTaskCount, notice, openRiskCount, t]);
 
   const boardTitle = useMemo(() => {
-    if (activeView === 'tasks') return t('pj.board.tasks', { count: filteredTasks.length });
-    if (activeView === 'files') return t('pj.board.files', { count: filteredFiles.length });
-    return t('pj.board.overview', { count: filteredProjects.length });
-  }, [activeView, filteredFiles.length, filteredProjects.length, filteredTasks.length, t]);
+    if (activeView === 'tasks') {
+      return t('board.tasksTitle', { count: filteredTasks.length });
+    }
+
+    if (activeView === 'files') {
+      return t('board.filesTitle', { files: filteredFiles.length, runs: filteredRuns.length });
+    }
+
+    return t('board.overviewTitle', { count: filteredProjects.length });
+  }, [activeView, filteredFiles.length, filteredProjects.length, filteredRuns.length, filteredTasks.length, t]);
+
+  const openTaskPanel = () => {
+    setIsTaskPanelOpen(true);
+    setNotice(null);
+  };
+
+  const closeTaskPanel = () => {
+    setIsTaskPanelOpen(false);
+  };
 
-  /* ---- Actions ---- */
-  const openTaskPanel = () => { setIsTaskPanelOpen(true); setNotice(null); };
-  const closeTaskPanel = () => setIsTaskPanelOpen(false);
-  const updateTaskForm = (field: keyof TaskForm, value: string) => setTaskForm((cur) => ({ ...cur, [field]: value }));
+  const updateTaskForm = (field: keyof TaskForm, value: string) => {
+    setTaskForm((current) => ({
+      ...current,
+      [field]: value,
+    }));
+  };
 
   const saveTask = () => {
-    if (!canSaveTask) { setNotice({ tone: 'warning', message: 'Add a task title and owner before saving.' }); return; }
-    const newTask: Task = { id: `local-task-${Date.now().toString(36)}`, title: taskForm.title.trim(), owner: taskForm.owner.trim(), status: 'Next', detail: taskForm.detail.trim() || 'No additional note was added.' };
-    setProjectTasks((cur) => [...cur, newTask]);
+    if (!canSaveTask) {
+      setNotice({
+        tone: 'warning',
+        message: t('confirm.saveValidation'),
+      });
+      return;
+    }
+
+    const newTask: Task = {
+      id: `local-task-${Date.now().toString(36)}`,
+      title: taskForm.title.trim(),
+      owner: taskForm.owner.trim(),
+      status: 'Next',
+      detail: taskForm.detail.trim() || t('confirm.fallbackNote'),
+    };
+
+    setLocalTasks((current) => [newTask, ...current]);
     setTaskForm(emptyTaskForm);
     setIsTaskPanelOpen(false);
     setActiveView('tasks');
-    setNotice({ tone: 'success', message: `Saved "${newTask.title}" as a local task.` });
+    setNotice({
+      tone: 'success',
+      message: t('confirm.taskSaved', { title: newTask.title }),
+    });
   };
 
   const toggleTaskStatus = (taskId: string) => {
-    const ct = projectTasks.find((t) => t.id === taskId);
-    if (!ct) return;
-    const ns = nextTaskStatus(ct.status);
-    setProjectTasks((cur) => cur.map((t) => t.id === taskId ? { ...t, status: ns } : t));
-    setNotice({ tone: ns === 'Done' ? 'success' : 'info', message: `"${ct.title}" moved to ${ns}.` });
+    const currentTask = projectTasks.find((task) => task.id === taskId);
+
+    if (!currentTask) {
+      return;
+    }
+
+    const nextStatus = nextTaskStatus(currentTask.status);
+
+    setLocalTasks((current) => {
+      const hasLocalTask = current.some((task) => task.id === taskId);
+      if (!hasLocalTask) {
+        return [...current, { ...currentTask, status: nextStatus }];
+      }
+
+      return current.map((task) =>
+        task.id === taskId
+          ? {
+              ...task,
+              status: nextStatus,
+            }
+          : task,
+      );
+    });
+
+    setNotice({
+      tone: nextStatus === 'Done' ? 'success' : 'info',
+      message: t('confirm.taskMoved', { title: currentTask.title, status: statusLabel(nextStatus) }),
+    });
   };
 
   const toggleRisk = (riskId: string) => {
-    const cr = projectRisks.find((r) => r.id === riskId);
-    if (!cr || !cr.reviewable) return;
-    const ns = cr.status === 'Reviewed' ? 'Open' : 'Reviewed' as const;
-    setProjectRisks((cur) => cur.map((r) => r.id === riskId ? { ...r, status: ns } : r));
-    setNotice({ tone: ns === 'Reviewed' ? 'success' : 'warning', message: ns === 'Reviewed' ? `"${cr.title}" marked reviewed.` : `"${cr.title}" reopened for review.` });
+    const currentRisk = projectRisks.find((risk) => risk.id === riskId);
+
+    if (!currentRisk || !currentRisk.reviewable) {
+      return;
+    }
+
+    const nextStatus = currentRisk.status === 'Reviewed' ? 'Open' : 'Reviewed';
+
+    setProjectRisks((current) =>
+      current.map((risk) =>
+        risk.id === riskId
+          ? {
+              ...risk,
+              status: nextStatus,
+            }
+          : risk,
+      ),
+    );
+
+    setNotice({
+      tone: nextStatus === 'Reviewed' ? 'success' : 'warning',
+      message:
+        nextStatus === 'Reviewed'
+          ? t('confirm.riskReviewed', { title: currentRisk.title })
+          : t('confirm.riskReopened', { title: currentRisk.title }),
+    });
   };
 
   const toggleAllReviewableRisks = () => {
-    const ns = allReviewableRisksClosed ? 'Open' : 'Reviewed' as const;
-    setProjectRisks((cur) => cur.map((r) => r.reviewable ? { ...r, status: ns } : r));
-    setNotice({ tone: ns === 'Reviewed' ? 'success' : 'warning', message: ns === 'Reviewed' ? 'All reviewable risks are marked reviewed.' : 'Reviewable risks were reopened.' });
+    const nextStatus = allReviewableRisksClosed ? 'Open' : 'Reviewed';
+
+    setProjectRisks((current) =>
+      current.map((risk) =>
+        risk.reviewable
+          ? {
+              ...risk,
+              status: nextStatus,
+            }
+          : risk,
+      ),
+    );
+
+    setNotice({
+      tone: nextStatus === 'Reviewed' ? 'success' : 'warning',
+      message:
+        nextStatus === 'Reviewed'
+          ? t('confirm.allRisksReviewed')
+          : t('confirm.allRisksReopened'),
+    });
   };
 
   const simulateSync = () => {
     const syncTime = formatLocalTime();
-    const syncRun: RunRecord = { id: `local-sync-${String(projectRuns.length + 1).padStart(3, '0')}`, status: 'Local', detail: `Local sync captured ${activeTaskCount} active tasks and ${openRiskCount} open risks.`, time: syncTime };
+    const syncRun: RunRecord = {
+      id: `local-sync-${String(projectRuns.length + 1).padStart(3, '0')}`,
+      status: 'Local',
+      detail: t('confirm.localSyncDetail', { tasks: activeTaskCount, risks: openRiskCount }),
+      time: syncTime,
+    };
+
     setLastSyncAt(syncTime);
     setSyncStatus('Local sync complete');
-    setProjectRuns((cur) => [syncRun, ...cur]);
+    setLocalRuns((current) => [syncRun, ...current]);
     setRunFilter('All');
-    setNotice({ tone: 'info', message: `Sync updated local run records at ${syncTime}.` });
+    setNotice({
+      tone: 'info',
+      message: t('confirm.syncComplete', { time: syncTime }),
+    });
   };
 
-  const taskActionLabel = (s: TaskStatus) => s === 'Next' ? t('pj.tasks.start') : s === 'Active' ? t('pj.tasks.markDone') : t('pj.tasks.reopen');
+  return (
+    <div className="projectReactRoot">
+      <style>{pageStyles}</style>
+      <ProjectParticles />
 
-  /* ---- Nav items ---- */
-  const navItems = [
-    { icon: 'overview', label: t('pj.nav.overview'), active: activeView === 'overview', onClick: () => setActiveView('overview') },
-    { icon: 'checklist', label: t('pj.nav.tasks'), active: activeView === 'tasks', onClick: () => setActiveView('tasks') },
-    { icon: 'folder', label: t('pj.nav.files'), active: activeView === 'files', onClick: () => setActiveView('files') },
-  ];
+      <div className="projectReactShell">
+        <aside className="projectSidebar projectGlass" aria-label={t('sidebar.navigationAria')}>
+          <div className="projectBrand">
+            <span className="projectBrandMark">AH</span>
+            <div className="projectTitle">
+              <h2>{t('sidebar.brandName')}</h2>
+              <p>{t('sidebar.workspaceLabel')}</p>
+            </div>
+          </div>
 
-  const sidebarAction = (
-    <Button variant="primary" size="md" onClick={openTaskPanel} style={{ width: '100%' }}>
-      <Icon name="add" size={16} />{t('pj.nav.newTask')}
-    </Button>
-  );
+          <nav className="projectNav">
+            {(['overview', 'tasks', 'files'] as BoardView[]).map((view) => (
+              <button
+                className={activeView === view ? 'isActive' : undefined}
+                key={view}
+                onClick={() => setActiveView(view)}
+                type="button"
+              >
+                <span>{view === 'overview' ? 'OV' : view === 'tasks' ? 'TK' : 'FL'}</span>
+                <span>{viewLabels[view]}</span>
+              </button>
+            ))}
+            <button onClick={openTaskPanel} type="button">
+              <span>NT</span>
+              <span>{t('sidebar.navNewTask')}</span>
+            </button>
+          </nav>
 
-  const sidebarBottom = (
-    <div className={styles.sidebarSignal}>
-      <strong className={styles.sidebarSignalTitle}>{t('pj.sidebar.signal')}</strong>
-      <span className={styles.sidebarSignalText}>{activityPrompt}</span>
-    </div>
-  );
+          <div className="projectSidebarNote">
+            <strong>{catalogLabel}</strong>
+            <span>{catalogDetail} {activityPrompt}</span>
+          </div>
+        </aside>
 
-  /* ---- Drawer: task creation ---- */
-  const drawer = isTaskPanelOpen ? (
-    <>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingBottom: 14, borderBottom: '1px solid var(--border)' }}>
-        <h3 className={styles.drawerTitle}>{t('pj.drawer.title')}</h3>
-        <Button variant="icon" onClick={closeTaskPanel} aria-label="Close"><Icon name="close" /></Button>
-      </div>
-      <p className={styles.drawerHint}>{t('pj.drawer.description')}</p>
-      <div className={styles.field}>
-        <label className={styles.fieldLabel} htmlFor="task-title">{t('pj.drawer.fieldTitle')}</label>
-        <input id="task-title" className={styles.fieldInput} value={taskForm.title} onChange={(e) => updateTaskForm('title', e.target.value)} />
-      </div>
-      <div className={styles.field}>
-        <label className={styles.fieldLabel} htmlFor="task-owner">{t('pj.drawer.fieldOwner')}</label>
-        <input id="task-owner" className={styles.fieldInput} value={taskForm.owner} onChange={(e) => updateTaskForm('owner', e.target.value)} />
-      </div>
-      <div className={styles.field}>
-        <label className={styles.fieldLabel} htmlFor="task-note">{t('pj.drawer.fieldNote')}</label>
-        <textarea id="task-note" className={styles.fieldTextarea} value={taskForm.detail} onChange={(e) => updateTaskForm('detail', e.target.value)} />
-      </div>
-      <div className={styles.drawerActions}>
-        <Button variant="primary" disabled={!canSaveTask} onClick={saveTask}>{t('pj.drawer.save')}</Button>
-        <Button variant="secondary" onClick={closeTaskPanel}>{t('pj.drawer.close')}</Button>
-      </div>
-      {!canSaveTask ? <span className={styles.drawerWarning}>{t('pj.drawer.required')}</span> : null}
-    </>
-  ) : undefined;
+        <main className="projectMain">
+          <header className="projectTopbar projectGlass">
+            <label className="projectSearch">
+              <span>{t('header.searchLabel')}</span>
+              <input
+                aria-label={t('header.searchAria')}
+                onChange={(event) => setSearchTerm(event.target.value)}
+                placeholder={t('header.searchPlaceholder')}
+                value={searchTerm}
+              />
+            </label>
+            <div className="projectTopActions">
+              <button
+                className="projectIconButton"
+                disabled={!searchTerm}
+                onClick={() => setSearchTerm('')}
+                type="button"
+                aria-label={t('header.clearSearch')}
+              >
+                C
+              </button>
+              <button className="projectIconButton" type="button" aria-label={t('header.notifications')}>
+                N
+              </button>
+              <button className="projectIconButton" type="button" aria-label={t('header.settings')}>
+                S
+              </button>
+              <div className="projectAvatar" aria-label={t('header.currentUser')}>
+                PM
+              </div>
+            </div>
+          </header>
 
-  return (
-    <div className={styles.pageRoot}>
-      <ParticleCanvas />
-      <WebLayout
-        brandName={t('pj.brand')}
-        brandSubtitle={t('pj.subtitle')}
-        navItems={navItems}
-        sidebarAction={sidebarAction}
-        sidebarBottom={sidebarBottom}
-        topbarLeft={<SearchInput placeholder={t('pj.topbar.search')} value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} />}
-        topbarRight={
-          <div className={styles.topbarActions}>
-            <Button variant="icon" disabled={!searchTerm} onClick={() => setSearchTerm('')} aria-label="Clear search"><Icon name="close" /></Button>
-            <Button variant="icon" aria-label="Notifications"><Icon name="notifications" /></Button>
-            <Button variant="icon" aria-label="Settings"><Icon name="settings" /></Button>
-            <div className={styles.avatarBtn} aria-label="Current user">PM</div>
-          </div>
-        }
-        drawer={drawer}
-      >
-        <div className={styles.scrollArea}>
-          {/* Hero */}
-          <section className={styles.hero}>
+          <section className="projectHero projectGlass">
             <div>
-              <p className={styles.heroEyebrow}>{t('pj.hero.eyebrow')}</p>
-              <h2 className={styles.heroTitle}>{t('pj.hero.title')}</h2>
-              <p className={styles.heroDesc}>{t('pj.hero.description')}</p>
-              <div className={styles.heroActions}>
-                <Button variant="primary" onClick={simulateSync}>{syncStatus === 'Idle' ? t('pj.hero.sync') : t('pj.hero.syncAgain')}</Button>
-                <Button variant="secondary" disabled={reviewableRisks.length === 0} onClick={toggleAllReviewableRisks}>
-                  {allReviewableRisksClosed ? t('pj.hero.risksReopen') : t('pj.hero.risksReviewed')}
-                </Button>
-                <Button variant="ghost" onClick={openTaskPanel}>{t('pj.hero.newTask')}</Button>
-                {notice ? <span className={`${styles.syncMessage} ${notice.tone === 'success' ? styles.syncSuccess : notice.tone === 'warning' ? styles.syncWarning : ''}`}>{notice.message}</span> : null}
+              <p className="projectEyebrow">{t('hero.eyebrow')}</p>
+              <h2>Workspace Preview Foundation</h2>
+              <p>{t('hero.description')}</p>
+              <div className="projectButtonRow">
+                <button
+                  className="projectPrimaryButton"
+                  onClick={simulateSync}
+                  type="button"
+                >
+                  {syncStatus === 'Idle' ? t('hero.simulateSync') : t('hero.syncAgain')}
+                </button>
+                <button
+                  className="projectSecondaryButton"
+                  disabled={reviewableRisks.length === 0}
+                  onClick={toggleAllReviewableRisks}
+                  type="button"
+                >
+                  {allReviewableRisksClosed ? t('hero.reopenRisks') : t('hero.markRisksReviewed')}
+                </button>
+                <button className="projectGhostButton" onClick={openTaskPanel} type="button">
+                  {t('hero.newTask')}
+                </button>
+                {notice ? <span className={`projectSyncMessage ${notice.tone}`}>{notice.message}</span> : null}
               </div>
             </div>
-            <div className={styles.heroSide}>
-              <div className={styles.progressCard}>
-                <div className={styles.progressRow}>
-                  <span className={styles.progressLabel}>{t('pj.progress.delivery')}</span>
-                  <strong className={styles.progressValue}>{deliveryProgress}%</strong>
+
+            <div className="projectHeroSide">
+              <div className="projectProgressCard">
+                <div className="projectStatusRow">
+                  <span>{t('hero.deliveryProgress')}</span>
+                  <strong>{deliveryProgress}%</strong>
+                </div>
+                <div className="projectMeter" aria-label={t('hero.deliveryProgressAria', { percent: deliveryProgress })}>
+                  <span style={{ width: `${deliveryProgress}%` }} />
                 </div>
-                <ProgressBar value={deliveryProgress} label={`${deliveryProgress}%`} />
               </div>
-              <div className={styles.progressCard}>
-                <div className={styles.progressRow}>
-                  <span className={styles.progressLabel}>{t('pj.progress.openRisks')}</span>
-                  <strong className={styles.progressValue}>{openRiskCount}</strong>
+              <div className="projectProgressCard">
+                <div className="projectStatusRow">
+                  <span>{t('hero.openRisks')}</span>
+                  <strong>{openRiskCount}</strong>
+                </div>
+                <div className="projectMeter" aria-label={t('hero.riskReviewAria')}>
+                  <span
+                    style={{
+                      width: `${riskProgress}%`,
+                      background: 'linear-gradient(90deg, var(--accent), var(--accent))',
+                    }}
+                  />
                 </div>
-                <ProgressBar value={riskProgress} />
               </div>
-              <div className={styles.progressCard}>
-                <div className={styles.progressRow}>
-                  <span className={styles.progressLabel}>{t('pj.progress.syncStatus')}</span>
-                  <strong className={styles.progressValue}>{syncStatus === 'Idle' ? t('pj.progress.idle') : t('pj.progress.complete')}</strong>
+              <div className="projectProgressCard">
+                <div className="projectStatusRow">
+                  <span>{t('hero.catalogStatus')}</span>
+                  <strong>{catalogLabel}</strong>
                 </div>
-                <p className={styles.progressMuted}>{lastSyncAt === 'Not synced yet' ? t('pj.progress.notSynced') : lastSyncAt}</p>
+                <p className="projectMuted">{syncStatus === 'Idle' ? t('status.idle') : syncStatus === 'Local sync complete' ? t('status.localSyncComplete') : syncStatus} - {lastSyncAt === 'Not synced yet' ? t('status.notSyncedYet') : lastSyncAt}</p>
               </div>
             </div>
           </section>
 
-          {/* Metrics */}
-          <section className={styles.metricsGrid} aria-label="Project metrics">
-            <article className={styles.metricCard}>
-              <span className={styles.metricIcon}>TK</span>
+          <section className="projectMetricGrid" aria-label={t('metrics.aria')}>
+            <article className="projectMetric projectGlass">
+              <span className="projectMetricIcon">TK</span>
               <div>
-                <span className={styles.metricValue}>{activeTaskCount}</span>
-                <span className={styles.metricLabel}>{t('pj.metrics.activeTasks')}</span>
+                <strong>{activeTaskCount}</strong>
+                <span>
+                  {shouldUseDemoFallback
+                    ? t('metrics.demoActiveTasks', { defaultValue: t('metrics.activeTasks') })
+                    : t('metrics.activeTasks')}
+                </span>
               </div>
             </article>
-            <article className={styles.metricCard}>
-              <span className={styles.metricIcon}>M1</span>
+            <article className="projectMetric projectGlass">
+              <span className="projectMetricIcon">M1</span>
               <div>
-                <span className={styles.metricValue}>{milestones.length}</span>
-                <span className={styles.metricLabel}>{t('pj.metrics.milestones')}</span>
+                <strong>{milestones.length}</strong>
+                <span>
+                  {shouldUseDemoFallback
+                    ? t('metrics.demoMilestones')
+                    : t('metrics.milestones')}
+                </span>
               </div>
             </article>
-            <article className={styles.metricCard}>
-              <span className={styles.metricIcon}>FL</span>
+            <article className="projectMetric projectGlass">
+              <span className="projectMetricIcon">FL</span>
               <div>
-                <span className={styles.metricValue}>{initialFiles.length}</span>
-                <span className={styles.metricLabel}>{t('pj.metrics.sharedFiles')}</span>
+                <strong>{projectedFiles.length}</strong>
+                <span>
+                  {shouldUseDemoFallback
+                    ? t('metrics.demoSharedFiles', { defaultValue: t('metrics.sharedFiles') })
+                    : t('metrics.sharedFiles')}
+                </span>
               </div>
             </article>
-            <article className={styles.metricCard}>
-              <span className={styles.metricIcon}>RN</span>
+            <article className="projectMetric projectGlass">
+              <span className={`projectPill ${catalogTone}`}>{catalogLabel}</span>
               <div>
-                <span className={styles.metricValue}>{projectRuns.length}</span>
-                <span className={styles.metricLabel}>{t('pj.metrics.dryRuns')}</span>
+                <strong>{projectRuns.length}</strong>
+                <span>
+                  {shouldUseDemoFallback
+                    ? t('metrics.demoDryRuns', { defaultValue: t('metrics.dryRuns') })
+                    : t('metrics.dryRuns')}
+                </span>
               </div>
             </article>
           </section>
 
-          {/* Board grid */}
-          <div className={styles.boardGrid}>
-            {/* Main panel */}
-            <section className={styles.panel}>
-              <div className={styles.panelHeader}>
-                <h3 className={styles.panelTitle}>{boardTitle}</h3>
-                <div className={styles.tabBar} role="tablist" aria-label="Project board sections">
-                  {(['overview', 'tasks', 'files'] as BoardView[]).map((view) => (
-                    <button
-                      key={view}
-                      role="tab"
-                      type="button"
-                      aria-selected={activeView === view}
-                      className={activeView === view ? `${styles.tab} ${styles.tabActive}` : styles.tab}
-                      onClick={() => setActiveView(view)}
-                    >
-                      {view === 'overview' ? t('pj.nav.overview') : view === 'tasks' ? t('pj.nav.tasks') : t('pj.nav.files')}
-                    </button>
-                  ))}
+          <div className="projectBoardGrid">
+            <section className="projectPanel projectGlass">
+              <div className="projectCardHeader">
+                <h3>{boardTitle}</h3>
+                <div className="projectHeaderActions">
+                  <SourceLabel source={activeView === 'tasks' ? taskSource : activeView === 'files' ? fileSource : projectSource} />
+                  <div className="projectTabs" role="tablist" aria-label={t('board.tabsAria')}>
+                    {(['overview', 'tasks', 'files'] as BoardView[]).map((view) => (
+                      <button
+                        aria-selected={activeView === view}
+                        className={activeView === view ? 'projectTab isActive' : 'projectTab'}
+                        key={view}
+                        onClick={() => setActiveView(view)}
+                        role="tab"
+                        type="button"
+                      >
+                        {viewLabels[view]}
+                      </button>
+                    ))}
+                  </div>
                 </div>
               </div>
 
-              {/* Overview */}
               {activeView === 'overview' ? (
-                <div className={styles.list}>
+                <div className="projectList">
                   {filteredProjects.length > 0 ? (
                     filteredProjects.map((project) => (
-                      <article className={styles.projectRow} key={project.name}>
-                        <div className={styles.rowTitle}>
-                          <span className={styles.iconTile}>{project.code}</span>
-                          <div>
-                            <span className={styles.rowName}>{project.name}</span>
-                            <p className={styles.rowDetail}>{project.detail}</p>
-                          </div>
+                    <article className="projectRow" key={project.name}>
+                      <div className="projectRowTitle">
+                        <span className="projectIconTile">{project.code}</span>
+                        <div>
+                          <strong>{project.name}</strong>
+                          <p className="projectMuted">{project.detail}</p>
                         </div>
-                        <Pill variant={statusTone(project.status) === 'green' ? 'green' : statusTone(project.status) === 'cyan' ? 'cyan' : statusTone(project.status) === 'purple' ? 'purple' : statusTone(project.status) === 'amber' ? 'amber' : 'default'}>
-                          {project.status}
-                        </Pill>
-                      </article>
+                      </div>
+                      <span className={`projectPill ${statusTone(project.status)}`}>{statusLabel(project.status)}</span>
+                    </article>
                     ))
                   ) : (
-                    <div className={styles.emptyState}>
-                      <strong className={styles.emptyTitle}>{t('pj.empty.noProjects')}</strong>
-                      <span className={styles.emptyText}>{t('pj.empty.clearSearch')}</span>
+                    <div className="projectEmptyState">
+                      <strong>{t('overview.emptyTitle')}</strong>
+                      <span>{t('overview.emptyHint')}</span>
                     </div>
                   )}
                 </div>
               ) : null}
 
-              {/* Tasks */}
               {activeView === 'tasks' ? (
-                <div className={styles.list}>
-                  <div className={styles.filterBar}>
-                    <span className={styles.progressMuted}>{t('pj.tasks.doneCount', { done: completedTaskCount, total: projectTasks.length })}</span>
-                    <Button variant="secondary" size="sm" onClick={openTaskPanel}>{t('pj.tasks.new')}</Button>
+                <div className="projectList">
+                  <div className="projectFilterBar">
+                    <span className="projectMuted">
+                      {t('board.doneTotal', { done: completedTaskCount, total: projectTasks.length })}
+                    </span>
+                    <SourceLabel source={taskSource} />
+                    <button className="projectSecondaryButton" onClick={openTaskPanel} type="button">
+                      {t('tasks.newTask')}
+                    </button>
                   </div>
                   {filteredTasks.length > 0 ? (
                     filteredTasks.map((task) => (
-                      <article className={styles.taskRow} key={task.id}>
-                        <span className={styles.checkIcon}>{task.status === 'Done' ? (
-                          <Icon name="check_circle" filled size={18} />
-                        ) : (
-                          <Icon name="circle" size={18} />
-                        )}</span>
-                        <div>
-                          <span className={styles.taskRef}>{task.title}</span>
-                          <p className={styles.taskDetail}>{task.owner}: {task.detail}</p>
-                        </div>
-                        <Pill variant={statusTone(task.status) === 'green' ? 'green' : 'amber'}>{task.status}</Pill>
-                        <div>
-                          <Button variant="secondary" size="sm" onClick={() => toggleTaskStatus(task.id)}>{taskActionLabel(task.status)}</Button>
-                        </div>
-                      </article>
+                    <article className={task.status === 'Done' ? 'projectTaskRow done' : 'projectTaskRow'} key={task.id}>
+                      <span className="projectCheck">{task.status === 'Done' ? 'OK' : 'IN'}</span>
+                      <div>
+                        <strong>{task.title}</strong>
+                        <p className="projectMuted">
+                          {task.owner}: {task.detail}
+                        </p>
+                      </div>
+                      <span className={`projectPill ${statusTone(task.status)}`}>{statusLabel(task.status)}</span>
+                      <div className="projectInlineActions">
+                        <button className="projectMiniButton" onClick={() => toggleTaskStatus(task.id)} type="button">
+                          {taskActionLabel(task.status)}
+                        </button>
+                      </div>
+                    </article>
                     ))
                   ) : (
-                    <div className={styles.emptyState}>
-                      <strong className={styles.emptyTitle}>{t('pj.empty.noTasks')}</strong>
-                      <span className={styles.emptyText}>{t('pj.empty.noTasksHint')}</span>
+                    <div className="projectEmptyState">
+                      <strong>{t('tasks.emptyTitle')}</strong>
+                      <span>{t('tasks.emptyHint')}</span>
                     </div>
                   )}
                 </div>
               ) : null}
 
-              {/* Files */}
               {activeView === 'files' ? (
-                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
-                  <div className={styles.filterBar}>
-                    <div className={styles.filterGroup} aria-label="File type filters">
-                      <span className={styles.filterLabel}>{t('pj.files.filter.label')}</span>
-                      {fileFilters.map((f) => (
-                        <button key={f} type="button" className={fileFilter === f ? `${styles.filterBtn} ${styles.filterBtnActive}` : styles.filterBtn} onClick={() => setFileFilter(f)}>{f}</button>
+                <div className="projectStack">
+                  <div className="projectFilterBar">
+                    <div className="projectFilterGroup" aria-label={t('files.filterAria')}>
+                      <span className="projectFilterLabel">{t('files.label')}</span>
+                      <SourceLabel source={fileSource} />
+                      {fileFilters.map((filter) => (
+                        <button
+                          className={fileFilter === filter ? 'projectMiniButton isActive' : 'projectMiniButton'}
+                          key={filter}
+                          onClick={() => setFileFilter(filter)}
+                          type="button"
+                        >
+                          {filter === 'All' ? t('filter.all') : filter}
+                        </button>
                       ))}
                     </div>
-                    <div className={styles.filterGroup} aria-label="Run status filters">
-                      <span className={styles.filterLabel}>{t('pj.runs.filter.label')}</span>
-                      {runFilters.map((f) => (
-                        <button key={f} type="button" className={runFilter === f ? `${styles.filterBtn} ${styles.filterBtnActive}` : styles.filterBtn} onClick={() => setRunFilter(f)}>{f}</button>
+                    <div className="projectFilterGroup" aria-label={t('runs.filterAria')}>
+                      <span className="projectFilterLabel">{t('runs.label')}</span>
+                      <SourceLabel source={runSource} />
+                      {runFilters.map((filter) => (
+                        <button
+                          className={runFilter === filter ? 'projectMiniButton isActive' : 'projectMiniButton'}
+                          key={filter}
+                          onClick={() => setRunFilter(filter)}
+                          type="button"
+                        >
+                          {filter === 'All' ? t('filter.all') : statusLabel(filter)}
+                        </button>
                       ))}
                     </div>
                   </div>
-                  <div className={styles.list}>
+
+                  <div className="projectList">
                     {filteredFiles.length > 0 ? (
                       filteredFiles.map((file) => (
-                        <article className={styles.fileRow} key={file.name}>
-                          <span className={styles.fileType}>{file.type}</span>
+                        <article className="projectFileRow" key={file.name}>
+                          <span className="projectFileType">{file.type}</span>
                           <div>
-                            <span className={styles.rowName}>{file.name}</span>
-                            <p className={styles.rowDetail}>{file.detail}</p>
+                            <strong>{file.name}</strong>
+                            <p className="projectMuted">{file.detail}</p>
                           </div>
-                          <Pill variant={statusTone(file.status) === 'green' ? 'green' : 'default'}>{file.status}</Pill>
+                          <span className={`projectPill ${statusTone(file.status)}`}>{statusLabel(file.status)}</span>
                         </article>
                       ))
                     ) : (
-                      <div className={styles.emptyState}>
-                        <strong className={styles.emptyTitle}>{t('pj.empty.noFiles')}</strong>
-                        <span className={styles.emptyText}>{t('pj.empty.noFilesHint')}</span>
+                      <div className="projectEmptyState">
+                        <strong>{t('files.emptyTitle')}</strong>
+                        <span>{t('files.emptyHint')}</span>
                       </div>
                     )}
                   </div>
-                  <div className={styles.list} aria-label="Run records">
+
+                  <div className="projectList" aria-label={t('runs.recordsAria')}>
                     {filteredRuns.length > 0 ? (
                       filteredRuns.map((run) => (
-                        <article className={styles.runRow} key={run.id}>
-                          <span className={styles.runIcon}>RN</span>
+                        <article className="projectRunRow" key={run.id}>
+                          <span className="projectRunIcon">RN</span>
                           <div>
-                            <span className={styles.rowName}>{run.id}</span>
-                            <p className={styles.rowDetail}>{run.detail}</p>
-                            <div className={styles.metaLine}>
-                              <Pill variant="default">{run.time}</Pill>
+                            <strong>{run.id}</strong>
+                            <p className="projectMuted">{run.detail}</p>
+                            <div className="projectMetaLine">
+                              <span className="projectPill blue">{run.time}</span>
                             </div>
                           </div>
-                          <Pill variant={statusTone(run.status) === 'green' ? 'green' : statusTone(run.status) === 'cyan' ? 'cyan' : statusTone(run.status) === 'purple' ? 'purple' : 'default'}>{run.status}</Pill>
+                          <span className={`projectPill ${statusTone(run.status)}`}>{statusLabel(run.status)}</span>
                         </article>
                       ))
                     ) : (
-                      <div className={styles.emptyState}>
-                        <strong className={styles.emptyTitle}>{t('pj.empty.noRuns')}</strong>
-                        <span className={styles.emptyText}>{t('pj.empty.noRunsHint')}</span>
+                      <div className="projectEmptyState">
+                        <strong>{t('runs.emptyTitle')}</strong>
+                        <span>{t('runs.emptyHint')}</span>
                       </div>
                     )}
                   </div>
@@ -503,55 +1938,104 @@ export function ProjectPage() {
               ) : null}
             </section>
 
-            {/* Side stack: milestones + risks */}
-            <aside className={styles.sideStack}>
-              <section className={styles.panel}>
-                <div className={styles.panelHeader}>
-                  <h3 className={styles.panelTitle}>{t('pj.milestones.title')}</h3>
-                  <Pill variant="default">M1</Pill>
+            <aside className="projectSideStack">
+              <section className="projectPanel projectGlass">
+                <div className="projectCardHeader">
+                  <h3>{t('milestones.title')}</h3>
+                  <span className="projectPill blue">M1</span>
                 </div>
-                <div className={styles.list}>
-                  {milestones.map((ml, i) => (
-                    <article className={styles.milestoneRow} key={ml.title}>
-                      <span className={`${styles.milestoneDot} ${i === 1 ? styles.dotCyan : i === 2 ? styles.dotPurple : ''}`} />
+                <div className="projectList">
+                  {milestones.map((milestone, index) => (
+                    <article className="projectMilestoneRow" key={milestone.title}>
+                      <span className={index === 1 ? 'projectDot cyan' : index === 2 ? 'projectDot purple' : 'projectDot'} />
                       <div>
-                        <span className={styles.milestoneName}>{ml.title}</span>
-                        <p className={styles.milestoneMeta}>{ml.detail}</p>
+                        <strong>{milestone.title}</strong>
+                        <p className="projectMuted">{milestone.detail}</p>
                       </div>
-                      <Pill variant={statusTone(ml.status) === 'green' ? 'green' : statusTone(ml.status) === 'cyan' ? 'cyan' : 'purple'}>{ml.status}</Pill>
+                      <span className={`projectPill ${statusTone(milestone.status)}`}>{statusLabel(milestone.status)}</span>
                     </article>
                   ))}
                 </div>
               </section>
 
-              <section className={styles.panel}>
-                <div className={styles.panelHeader}>
-                  <h3 className={styles.panelTitle}>{t('pj.risks.title')}</h3>
-                  <Pill variant={openRiskCount === 0 ? 'green' : 'amber'}>
-                    {openRiskCount === 0 ? t('pj.risks.reviewed') : t('pj.risks.needsReview')}
-                  </Pill>
+              <section className="projectPanel projectGlass">
+                <div className="projectCardHeader">
+                  <h3>{t('risks.title')}</h3>
+                  <span className={`projectPill ${openRiskCount === 0 ? 'green' : 'amber'}`}>
+                    {openRiskCount === 0 ? t('risks.reviewed') : t('risks.needsReview')}
+                  </span>
                 </div>
-                <div className={styles.list}>
+                <div className="projectList">
                   {projectRisks.map((risk) => (
-                    <article className={styles.riskRow} key={risk.id}>
+                    <article className="projectRiskRow" key={risk.id}>
                       <div>
-                        <span className={styles.rowName}>{risk.title}</span>
-                        <p className={styles.rowDetail}>{risk.detail}</p>
+                        <strong>{risk.title}</strong>
+                        <p className="projectMuted">{risk.detail}</p>
                       </div>
-                      <Pill variant={risk.status === 'Reviewed' ? 'green' : risk.status === 'Tracked' ? 'cyan' : 'amber'}>{risk.status}</Pill>
-                      <Button variant="secondary" size="sm" disabled={!risk.reviewable} onClick={() => toggleRisk(risk.id)}>
-                        {risk.reviewable && risk.status === 'Reviewed' ? t('pj.risks.reopen') : t('pj.risks.review')}
-                      </Button>
+                      <span className={`projectPill ${statusTone(risk.status)}`}>{statusLabel(risk.status)}</span>
+                      <button
+                        className="projectMiniButton"
+                        disabled={!risk.reviewable}
+                        onClick={() => toggleRisk(risk.id)}
+                        type="button"
+                      >
+                        {risk.reviewable && risk.status === 'Reviewed' ? t('risks.reopen') : t('risks.review')}
+                      </button>
                     </article>
                   ))}
                 </div>
               </section>
             </aside>
           </div>
-        </div>
-      </WebLayout>
+        </main>
+      </div>
+
+      {isTaskPanelOpen ? (
+        <aside className="projectDrawer projectGlass" aria-label={t('taskForm.drawerAria')}>
+          <div className="projectCardHeader">
+            <h3>{t('taskForm.title')}</h3>
+            <button className="projectIconButton" onClick={closeTaskPanel} type="button" aria-label={t('taskForm.closeAria')}>
+              X
+            </button>
+          </div>
+          <p className="projectMuted">{t('taskForm.description')}</p>
+          <div className="projectField">
+            <label htmlFor="task-title">{t('taskForm.fieldTitle')}</label>
+            <input
+              id="task-title"
+              onChange={(event) => updateTaskForm('title', event.target.value)}
+              value={taskForm.title}
+            />
+          </div>
+          <div className="projectField">
+            <label htmlFor="task-owner">{t('taskForm.fieldOwner')}</label>
+            <input
+              id="task-owner"
+              onChange={(event) => updateTaskForm('owner', event.target.value)}
+              value={taskForm.owner}
+            />
+          </div>
+          <div className="projectField">
+            <label htmlFor="task-note">{t('taskForm.fieldNote')}</label>
+            <textarea
+              id="task-note"
+              onChange={(event) => updateTaskForm('detail', event.target.value)}
+              value={taskForm.detail}
+            />
+          </div>
+          <div className="projectButtonRow">
+            <button className="projectPrimaryButton" disabled={!canSaveTask} onClick={saveTask} type="button">
+              {t('taskForm.saveLocal')}
+            </button>
+            <button className="projectSecondaryButton" onClick={closeTaskPanel} type="button">
+              {t('taskForm.close')}
+            </button>
+          </div>
+          {!canSaveTask ? <span className="projectSyncMessage warning">{t('taskForm.validationRequired')}</span> : null}
+        </aside>
+      ) : null}
     </div>
   );
 }
 
-export default ProjectPage;
+export default ProjectPageInteractive;
diff --git a/app/web/src/pages/workbench/WorkbenchPage.module.css b/app/web/src/pages/workbench/WorkbenchPage.module.css
index 7879ac65..68155a40 100644
--- a/app/web/src/pages/workbench/WorkbenchPage.module.css
+++ b/app/web/src/pages/workbench/WorkbenchPage.module.css
@@ -1,678 +1,890 @@
-/* ═══════════════════════════════════════════════════════════
-   WorkbenchPage — dashboard with sidebar, conversation area,
-   agent cards, metrics, activity feed, and inspector panel.
-   ═══════════════════════════════════════════════════════════ */
+@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap");
 
-/* ── Root ────────────────────────────────────────────────── */
-.pageRoot {
+.workbench {
   position: relative;
-  min-height: 100vh;
+  display: grid;
+  grid-template-columns: 280px minmax(520px, 1fr) 420px;
+  gap: 18px;
+  height: 100%;
+  min-height: 0;
   overflow: hidden;
-  color: #142033;
-  font-family: "Hanken Grotesk", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  background: #f7fbff;
+  padding: 18px;
+  background:
+    radial-gradient(circle at 18% 12%, rgba(8, 167, 207, 0.16), transparent 28%),
+    radial-gradient(circle at 82% 8%, rgba(116, 87, 232, 0.14), transparent 30%),
+    linear-gradient(135deg, var(--surface-alt), var(--bg));
+  color: var(--text);
+  font-family:
+    "Hanken Grotesk",
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Arial,
+    sans-serif;
+}
+
+.particles {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none;
 }
 
-/* ── Conversation Panel ───────────────────────────────────── */
-.conversation {
-  display: grid;
-  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
-  gap: 14px;
-  padding: 18px;
+.workbench *,
+.workbench *::before,
+.workbench *::after {
+  box-sizing: border-box;
+}
+
+.workbench button,
+.workbench input,
+.workbench textarea {
+  font: inherit;
+}
+
+.leftRail,
+.threadSurface,
+.workspacePanel {
+  position: relative;
+  z-index: 1;
+  min-width: 0;
+  max-width: 100%;
   min-height: 0;
-  overflow: hidden;
+  border: 1px solid var(--glass-border);
+  border-radius: 12px;
+  background: var(--glass-bg);
+  box-shadow: 0 18px 48px var(--glass-shadow);
+  backdrop-filter: blur(28px) saturate(160%);
+  -webkit-backdrop-filter: blur(28px) saturate(160%);
 }
 
-/* ── Task Header ──────────────────────────────────────────── */
-.taskHead {
+.leftRail,
+.workspacePanel {
   display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
+  flex-direction: column;
+  overflow: hidden;
 }
 
-.taskTitle {
-  margin: 0;
-  font-size: 28px;
-  font-weight: 800;
-  line-height: 1.14;
-  letter-spacing: 0;
+.leftRail {
+  padding: 18px;
 }
 
-.taskCopy {
-  max-width: 680px;
-  margin: 8px 0 0;
-  color: #61708c;
-  font-size: 15px;
-  line-height: 1.55;
+.brandBlock {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding-bottom: 14px;
+  border-bottom: 1px solid var(--border-subtle);
 }
 
-.taskBody {
-  flex: 1;
+.brandTitle {
+  min-width: 0;
+  overflow: hidden;
 }
 
-/* ── Metrics ──────────────────────────────────────────────── */
-.metrics {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 10px;
+.brandBlock h1,
+.brandBlock p,
+.threadHeader h2,
+.threadHeader p,
+.workspaceHeader h2,
+.approvalCard h3,
+.approvalCard p,
+.message p {
+  margin: 0;
 }
 
-.metric {
-  padding: 12px;
-  border-radius: var(--radius-xl);
-  background: rgba(255, 255, 255, 0.46);
-  border: 1px solid rgba(255, 255, 255, 0.62);
+.brandBlock h1 {
+  color: var(--text);
+  font-size: 15px;
+  line-height: 1.25;
 }
 
-.metricValue {
-  display: block;
-  color: #102449;
-  font-size: 22px;
+.brandBlock p {
+  margin: 4px 0 0;
+  color: var(--text-muted);
+  font-size: 11px;
   font-weight: 800;
+  letter-spacing: 0.09em;
+  line-height: 1.236;
 }
 
-.metricLabel {
-  display: block;
-  margin-top: 3px;
-  color: #61708c;
-  font-size: 12px;
-  font-weight: 700;
+.brandMark,
+.projectIcon,
+.avatar,
+.fileType,
+.iconButton {
+  display: inline-grid;
+  place-items: center;
+  flex: 0 0 auto;
 }
 
-/* ── Agent Cards ──────────────────────────────────────────── */
-.agentList {
+.brandMark {
+  width: 38px;
+  height: 38px;
+  display: grid;
+  place-items: center;
+  flex: 0 0 auto;
+  border-radius: 10px;
+  background: linear-gradient(135deg, #1769e8, #08a7cf);
+  color: var(--white);
+  font-family:
+    "Hanken Grotesk",
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Arial,
+    sans-serif;
+  font-size: 16px;
+  font-weight: 900;
+  line-height: 1;
+  box-shadow: 0 10px 22px var(--brand-glow);
+}
+
+.railSection {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 8px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.agentCard {
-  display: flex;
-  flex-direction: column;
   gap: 8px;
-  padding: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.7);
-  border-radius: var(--radius-xl);
-  background: rgba(255, 255, 255, 0.48);
+  padding-top: 14px;
 }
 
-.agentCardPaused {
-  opacity: 0.78;
+.railSection + .railSection {
+  margin-top: 4px;
 }
 
-.agentTop {
+.sectionHead,
+.cardTitle,
+.messageMeta,
+.approvalActions,
+.headerActions,
+.workspaceHeader,
+.workspaceSummary,
+.previewTopbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 8px;
+  gap: 10px;
 }
 
-.agentName {
-  margin-top: 4px;
+.sectionHead {
+  color: var(--neutral);
+  font-size: 11px;
   font-weight: 800;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
 }
 
-.agentRole {
-  color: #61708c;
-  font-size: 13px;
-  line-height: 1.45;
+.projectCard,
+.threadButton,
+.runnerRow,
+.fileRow {
+  display: grid;
+  min-width: 0;
+  border: 1px solid var(--border-light);
+  border-radius: 10px;
+  background: var(--surface);
+  color: var(--text);
 }
 
-.agentRoute {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-top: 8px;
-  color: #425574;
+.projectCard {
+  grid-template-columns: 38px minmax(0, 1fr);
+  gap: 10px;
+  padding: 10px;
+  text-align: left;
+}
+
+.selectedCard,
+.activeThread {
+  border-color: var(--accent-border);
+  background: var(--accent-light);
+}
+
+.projectIcon {
+  width: 38px;
+  height: 38px;
+  border-radius: 7px;
+  background: var(--accent-lighter);
+  color: var(--accent);
   font-size: 12px;
   font-weight: 800;
 }
 
-.agentActions {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 6px;
-  margin-top: 4px;
+.projectCard strong,
+.threadButton strong,
+.runnerRow strong,
+.fileRow strong {
+  display: block;
+  overflow: hidden;
+  font-size: 13px;
+  line-height: 1.25;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-/* ── Activity Feed ────────────────────────────────────────── */
-.feed {
+.projectCard small,
+.threadButton small,
+.runnerRow small,
+.fileRow small {
+  display: block;
+  overflow: hidden;
+  margin-top: 3px;
+  color: var(--text-muted);
+  font-size: 11px;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.threadList,
+.runnerList,
+.messageList,
+.changedFiles,
+.approvalPanel {
   display: grid;
   gap: 8px;
-  margin: 0;
-  padding: 0 2px 0 0;
-  list-style: none;
   min-height: 0;
+}
+
+.threadList,
+.runnerList {
   overflow: auto;
 }
 
-.message {
-  display: grid;
-  grid-template-columns: 38px minmax(0, 1fr);
-  gap: 12px;
-  padding: 13px;
-  border: 1px solid rgba(255, 255, 255, 0.7);
-  border-radius: var(--radius-xl);
-  background: rgba(255, 255, 255, 0.48);
+.threadButton {
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 10px;
+  cursor: pointer;
+  text-align: left;
 }
 
-.messageIcon {
-  display: grid;
-  width: 38px;
-  height: 38px;
-  place-items: center;
-  border-radius: var(--radius-xl);
-  color: #1967ff;
-  background: rgba(25, 103, 255, 0.09);
+.runnerRow {
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 8px;
+  padding: 9px;
 }
 
-.messageTitle {
+.badge,
+.statusPill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 22px;
+  border-radius: 999px;
+  padding: 3px 8px;
+  font-size: 11px;
   font-weight: 800;
+  white-space: nowrap;
 }
 
-.messageDetail {
-  color: #61708c;
-  font-size: 13px;
-  line-height: 1.45;
+.good {
+  color: var(--success);
+  background: var(--success-bg);
+  border: 1px solid var(--success-border);
 }
 
-/* ── Composer ─────────────────────────────────────────────── */
-.composer {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px;
-  border-radius: var(--radius-xl);
-  background: rgba(255, 255, 255, 0.5);
-  border: 1px solid rgba(255, 255, 255, 0.72);
+.warn {
+  color: var(--warning);
+  background: var(--warning-bg);
+  border: 1px solid var(--warning-border);
 }
 
-.composerInput {
-  flex: 1;
-  min-width: 0;
-  height: 38px;
-  border: 0;
-  outline: 0;
-  color: #142033;
-  background: transparent;
-  font-family: inherit;
-  font-size: var(--font-size-sm);
+.bad {
+  color: var(--danger);
+  background: var(--danger-bg);
+  border: 1px solid var(--danger-border);
 }
 
-.composerInput::placeholder {
-  color: #61708c;
+.neutral {
+  color: var(--neutral);
+  background: var(--neutral-bg);
+  border: 1px solid var(--neutral-border);
 }
 
-/* ── Empty State ──────────────────────────────────────────── */
-.emptyState {
-  display: grid;
-  gap: 4px;
-  padding: 14px;
-  color: #61708c;
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+}
+
+.goodDot {
+  background: var(--success-dot);
 }
 
-.emptyTitle {
+.warnDot {
+  background: var(--warning-dot);
+}
+
+.neutralDot {
+  background: var(--neutral-dot);
+}
+
+.textButton {
+  border: 0;
+  background: transparent;
+  color: var(--accent);
+  cursor: pointer;
+  font-size: 11px;
   font-weight: 800;
-  color: #142033;
 }
 
-/* ── Confirmation Bar ─────────────────────────────────────── */
-.confirmBar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+.threadSurface {
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
   gap: 12px;
-  padding: 12px;
-  border-radius: var(--radius-xl);
-  color: #143251;
+  overflow: hidden;
+  padding: 16px;
 }
 
-.confirmInfo {
-  background: rgba(0, 173, 199, 0.12);
-  border: 1px solid rgba(0, 173, 199, 0.2);
+.threadHeader {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 14px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--border-subtle);
 }
 
-.confirmSuccess {
-  background: rgba(18, 166, 122, 0.12);
-  border: 1px solid rgba(18, 166, 122, 0.22);
+.eyebrow {
+  margin: 0 0 4px;
+  color: var(--text-muted);
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
 }
 
-.confirmWarning {
-  background: rgba(255, 183, 77, 0.14);
-  border: 1px solid rgba(255, 183, 77, 0.28);
+.threadHeader h2,
+.workspaceHeader h2 {
+  font-size: 17px;
+  line-height: 1.25;
 }
 
-.confirmText {
-  display: grid;
-  gap: 3px;
+.threadHeader p {
+  margin-top: 4px;
+  color: var(--text-muted);
+  font-size: 13px;
 }
 
-.confirmStrong {
+.primaryButton,
+.secondaryButton,
+.iconButton,
+.panelTab,
+.activePanelTab {
+  border-radius: 8px;
+  cursor: pointer;
   font-weight: 800;
 }
 
-.confirmDetail {
-  font-size: var(--font-size-xs);
-  color: #61708c;
+.primaryButton {
+  min-height: 34px;
+  border: 1px solid var(--accent);
+  padding: 0 12px;
+  background: linear-gradient(135deg, #1769e8, #08a7cf);
+  color: var(--white);
 }
 
-/* ── Inspector ────────────────────────────────────────────── */
-.inspectorHead {
-  display: grid;
-  gap: 12px;
-  padding: 16px 16px 12px;
-  border-bottom: 1px solid rgba(139, 156, 188, 0.24);
+.primaryButton:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
-.panelHeading {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
+.secondaryButton {
+  min-height: 34px;
+  border: 1px solid var(--border);
+  padding: 0 12px;
+  background: var(--surface);
+  color: var(--text);
 }
 
-.panelTitle {
-  font-weight: 800;
+.iconButton {
+  width: 34px;
+  height: 34px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--accent);
 }
 
-.panelSubtitle {
-  color: #61708c;
-  font-size: 13px;
-  line-height: 1.45;
+.runSummary {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 8px;
 }
 
-.tabBar {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 6px;
-  padding: 4px;
-  border-radius: var(--radius-xl);
-  background: rgba(91, 111, 148, 0.1);
+.runSummary article,
+.workspaceSummary article {
+  min-width: 0;
+  border: 1px solid var(--border-light);
+  border-radius: 7px;
+  padding: 9px 10px;
+  background: var(--surface-alt);
 }
 
-.tab {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 34px;
-  border: 0;
-  border-radius: var(--radius-lg);
-  color: #50617e;
-  font-size: 13px;
-  font-weight: 800;
-  font-family: inherit;
-  background: transparent;
-  cursor: pointer;
-  text-transform: capitalize;
-  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
+.runSummary strong,
+.workspaceSummary strong {
+  display: block;
+  overflow: hidden;
+  color: var(--text);
+  font-size: 14px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.tab:hover {
-  color: var(--foreground);
+.runSummary span,
+.workspaceSummary span {
+  display: block;
+  margin-top: 3px;
+  color: var(--text-muted);
+  font-size: 11px;
 }
 
-.tabActive {
-  color: #1967ff;
-  background: rgba(255, 255, 255, 0.78);
-  box-shadow: 0 8px 20px rgba(26, 40, 80, 0.08);
+.messageArea {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 260px;
+  gap: 10px;
+  min-height: 0;
 }
 
-.panelBody {
+.messages,
+.runTimeline {
   min-height: 0;
-  overflow: auto;
-  padding: 16px;
+  overflow: hidden;
+  border: 1px solid var(--glass-border);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.08);
 }
 
-/* ── Preview Panel ────────────────────────────────────────── */
-.panelStack {
+.messages {
   display: grid;
-  gap: 12px;
+  grid-template-rows: auto minmax(0, 1fr);
 }
 
-.previewCard {
-  overflow: hidden;
-  border-radius: var(--radius-xl);
-  border: 1px solid rgba(255, 255, 255, 0.72);
-  background: rgba(255, 255, 255, 0.55);
+.cardTitle {
+  min-height: 42px;
+  border-bottom: 1px solid var(--border-subtle);
+  padding: 0 12px;
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 800;
 }
 
-.previewToolbar {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  height: 34px;
-  padding: 0 10px;
-  border-bottom: 1px solid rgba(139, 156, 188, 0.24);
+.muted {
+  color: var(--text-muted);
+  font-size: 12px;
+  font-weight: 600;
 }
 
-.windowDot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: #1967ff;
-  opacity: 0.55;
+.emptyNotice,
+.errorText,
+.errorBanner,
+.stateBanner {
+  margin: 0;
+  color: var(--text-muted);
+  font-size: 12px;
+  line-height: 1.45;
 }
 
-.windowDot:nth-child(2) {
-  background: #00adc7;
+.errorText,
+.errorBanner {
+  color: var(--danger);
 }
 
-.windowDot:nth-child(3) {
-  background: #7a4dff;
+.errorBanner {
+  border: 1px solid var(--danger-border);
+  border-radius: 8px;
+  padding: 8px 10px;
+  background: var(--danger-bg);
 }
 
-.previewToolbarText {
-  color: #61708c;
-  font-size: 13px;
+.stateBanner {
+  border: 1px solid var(--warning-border);
+  border-radius: 8px;
+  padding: 8px 10px;
+  background: var(--warning-bg);
+  color: var(--warning);
 }
 
-.previewStage {
-  display: grid;
-  gap: 10px;
-  padding: 14px;
+.messageList {
+  overflow: auto;
+  padding: 10px;
 }
 
-.previewRow {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  padding: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.7);
-  border-radius: var(--radius-xl);
-  background: rgba(255, 255, 255, 0.48);
+.message {
+  display: grid;
+  grid-template-columns: 34px minmax(0, 1fr);
+  gap: 9px;
+  border: 1px solid var(--glass-border);
+  border-radius: 12px;
+  padding: 10px;
+  background: var(--surface);
 }
 
-.previewRowTitle {
-  font-weight: 800;
+.owner {
+  background: var(--owner-bg);
 }
 
-.previewRowDesc {
-  color: #61708c;
-  font-size: 13px;
-  line-height: 1.45;
+.agent {
+  background: var(--agent-bg);
 }
 
-/* ── Diff Panel ───────────────────────────────────────────── */
-.fileRow {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  padding: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.7);
-  border-radius: var(--radius-xl);
-  background: rgba(255, 255, 255, 0.48);
+.system {
+  border-color: var(--warning-border);
+  background: var(--system-bg);
 }
 
-.fileRowTitle {
+.avatar {
+  width: 34px;
+  height: 34px;
+  border-radius: 7px;
+  background: var(--accent-lighter);
+  color: var(--accent);
+  font-size: 11px;
   font-weight: 800;
 }
 
-.fileRowDesc {
-  color: #61708c;
+.messageMeta {
+  justify-content: flex-start;
+  margin-bottom: 4px;
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+.message p,
+.approvalCard p,
+.previewCanvas p,
+.approvalPanel p {
+  color: var(--text-secondary);
   font-size: 13px;
   line-height: 1.45;
 }
 
-.codeDiff {
-  overflow: hidden;
-  border-radius: var(--radius-xl);
-  border: 1px solid rgba(255, 255, 255, 0.72);
-  background: rgba(22, 33, 56, 0.9);
-  color: #e9f0ff;
-  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
-  font-size: 12px;
-  line-height: 1.65;
+.runTimeline {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
 }
 
-.diffLine {
+.runTimeline ol {
   display: grid;
-  grid-template-columns: 28px minmax(0, 1fr);
-  gap: 10px;
-  padding: 0 12px;
+  gap: 8px;
+  margin: 0;
+  overflow: auto;
+  padding: 10px 10px 10px 30px;
 }
 
-.diffAdd {
-  background: rgba(0, 173, 199, 0.13);
+.runTimeline li {
+  color: var(--text-muted);
+  font-size: 12px;
 }
 
-.diffRemove {
-  background: rgba(122, 77, 255, 0.13);
+.runTimeline strong {
+  display: block;
+  color: var(--text);
+  font-size: 12px;
 }
 
-.diffSign {
-  font-family: monospace;
-  font-weight: 800;
+.doneStep::marker {
+  color: var(--success-dot);
 }
 
-.diffText {
-  font-family: inherit;
+.activeStep::marker {
+  color: var(--warning-dot);
 }
 
-/* ── Approval Panel ───────────────────────────────────────── */
-.statusStrip {
+.approvalCard {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  border: 1px solid var(--warning-border);
+  border-radius: 12px;
+  padding: 12px;
+  background: var(--system-bg);
+}
+
+.approvalCard h3 {
+  font-size: 15px;
+}
+
+.composer {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: auto minmax(0, 1fr) auto;
   gap: 8px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 8px;
+  background: var(--surface);
 }
 
-.statusItem {
-  display: grid;
-  gap: 3px;
+.composer textarea {
+  height: 34px;
   min-width: 0;
-  padding: 10px;
-  border-radius: var(--radius-xl);
-  background: rgba(255, 255, 255, 0.44);
-  border: 1px solid rgba(255, 255, 255, 0.62);
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  outline: 0;
+  padding: 6px 12px;
+  resize: none;
+  background: transparent;
+  color: var(--text);
+  line-height: 1.35;
+  overflow-y: auto;
 }
 
-.statusLabel {
-  font-size: 13px;
-  color: #61708c;
+.workspacePanel {
+  padding: 14px;
 }
 
-.statusValue {
-  color: #102449;
-  font-size: 14px;
-  font-weight: 800;
+.workspaceHeader {
+  align-items: flex-start;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--border-subtle);
 }
 
-.approvalRow {
+.workspaceSummary {
   display: grid;
-  grid-template-columns: 22px minmax(0, 1fr);
-  gap: 10px;
-  padding: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.7);
-  border-radius: var(--radius-xl);
-  background: rgba(255, 255, 255, 0.48);
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  margin: 12px 0;
+}
+
+.warnText {
+  color: var(--warning) !important;
 }
 
-.approvalRowTitle {
+.workspaceTabs {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 4px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 4px;
+  background: var(--neutral-bg);
+}
+
+.panelTab,
+.activePanelTab {
+  min-height: 32px;
+  border: 0;
+  padding: 0 8px;
+  overflow: hidden;
+  background: transparent;
+  color: var(--neutral);
+  font-size: 11px;
   font-weight: 800;
+  line-height: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.approvalRowDesc {
-  color: #61708c;
-  font-size: 13px;
-  line-height: 1.45;
+.activePanelTab {
+  background: var(--surface);
+  color: var(--accent);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
 }
 
-.approvalActions {
-  display: grid;
-  gap: 8px;
+.panelBody {
+  min-height: 0;
+  flex: 1;
+  overflow: auto;
+  padding-top: 12px;
 }
 
-/* ── Check Icon ───────────────────────────────────────────── */
-.checkPassed {
-  display: grid;
-  width: 22px;
-  height: 22px;
-  place-items: center;
-  border-radius: 8px;
-  color: #fff;
-  background: #12a67a;
+.fileRow {
+  grid-template-columns: 36px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 9px;
+  padding: 9px;
 }
 
-.checkPending {
-  display: grid;
-  width: 22px;
-  height: 22px;
-  place-items: center;
-  border-radius: 8px;
-  color: #61708c;
-  background: rgba(91, 111, 148, 0.12);
-  border: 1px solid rgba(91, 111, 148, 0.16);
+.fileType {
+  width: 34px;
+  height: 34px;
+  border-radius: 7px;
+  background: var(--accent-lighter);
+  color: var(--accent);
+  font-size: 11px;
+  font-weight: 800;
 }
 
-/* ── Session List (sidebar bottom) ────────────────────────── */
-.sessionList {
-  display: grid;
-  gap: 8px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
+.diffBlock,
+.logBlock {
+  overflow: hidden;
+  border-radius: 8px;
+  background: var(--code-bg);
+  color: var(--code-text);
+  font-family: Consolas, "SFMono-Regular", monospace;
+  font-size: 12px;
+  line-height: 1.6;
 }
 
-.sessionItem {
+.addLine,
+.removeLine,
+.neutralLine {
   display: grid;
+  grid-template-columns: 24px minmax(0, 1fr);
   gap: 8px;
-  padding: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.7);
-  border-radius: var(--radius-xl);
-  background: rgba(255, 255, 255, 0.48);
+  padding: 2px 10px;
 }
 
-.sessionTop {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
+.addLine {
+  background: var(--success-bg);
 }
 
-.sessionTitle {
-  font-weight: 800;
+.removeLine {
+  background: var(--danger-bg);
 }
 
-.sessionMeta {
-  color: #61708c;
-  font-size: 13px;
-  line-height: 1.45;
+.neutralLine {
+  background: transparent;
 }
 
-.liveDot {
-  width: 8px;
-  height: 8px;
-  border-radius: var(--radius-full);
-  background: #12a67a;
-  box-shadow: 0 0 0 5px rgba(18, 166, 122, 0.11);
+.logBlock {
+  display: grid;
+  gap: 0;
+  padding: 10px;
 }
 
-/* ── Command Palette ──────────────────────────────────────── */
-.commandOverlay {
-  position: fixed;
-  inset: 0;
-  z-index: 20;
-  display: grid;
-  place-items: start center;
-  padding-top: 92px;
-  background: rgba(24, 38, 64, 0.18);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
+.previewBox {
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--surface);
 }
 
-.commandPanel {
-  width: min(620px, calc(100vw - 32px));
-  padding: 14px;
+.previewTopbar {
+  justify-content: flex-start;
+  min-height: 34px;
+  border-bottom: 1px solid var(--border-subtle);
+  padding: 0 10px;
 }
 
-.commandInput {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  height: 46px;
-  padding: 0 12px;
-  border-radius: 8px;
-  background: rgba(255, 255, 255, 0.64);
-  border: 1px solid rgba(255, 255, 255, 0.76);
+.previewTopbar span {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--preview-dot);
 }
 
-.commandInputField {
-  flex: 1;
-  border: 0;
-  outline: 0;
-  background: transparent;
-  color: #142033;
-  font-family: inherit;
-  font-size: var(--font-size-sm);
+.previewTopbar strong {
+  margin-left: 6px;
+  color: var(--text-muted);
+  font-size: 12px;
 }
 
-.commandActions {
+.previewCanvas {
   display: grid;
   gap: 8px;
-  margin-top: 12px;
+  min-height: 190px;
+  place-content: center;
+  padding: 22px;
+  background:
+    linear-gradient(90deg, rgba(128, 128, 128, 0.2) 1px, transparent 1px),
+    linear-gradient(0deg, rgba(128, 128, 128, 0.2) 1px, transparent 1px),
+    var(--surface-alt);
+  background-size: 24px 24px;
+  text-align: center;
+}
+
+.previewLink {
+  color: var(--accent);
+  font-size: 13px;
+  font-weight: 800;
+  text-decoration: none;
 }
 
-.commandOption {
+.approvalPanel article {
   display: grid;
-  grid-template-columns: 30px minmax(0, 1fr) auto;
-  align-items: center;
-  min-height: 48px;
-  padding: 8px 12px;
-  border: 1px solid rgba(255, 255, 255, 0.7);
+  grid-template-columns: 10px minmax(0, 1fr);
+  gap: 10px;
+  border: 1px solid var(--border-light);
   border-radius: 8px;
-  color: #253552;
-  text-align: left;
-  background: rgba(255, 255, 255, 0.5);
-  cursor: pointer;
-  font-family: inherit;
-  font-size: var(--font-size-sm);
-  transition: background 160ms ease;
+  padding: 10px;
 }
 
-.commandOption:hover {
-  background: rgba(255, 255, 255, 0.75);
+.approvalPanel strong {
+  display: block;
+  font-size: 13px;
 }
 
-.commandOption:disabled {
-  cursor: not-allowed;
-  opacity: 0.52;
-}
+@media (max-width: 1180px) {
+  .workbench {
+    grid-template-columns: 240px minmax(420px, 1fr) 340px;
+    gap: 12px;
+    padding: 14px;
+  }
 
-.commandCopy {
-  display: grid;
-  gap: 2px;
-  min-width: 0;
-}
+  .workspacePanel {
+    display: flex;
+    padding: 12px;
+  }
 
-.commandTitle {
-  font-weight: 800;
-}
+  .workspaceTabs {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
 
-.commandDesc {
-  font-size: var(--font-size-xs);
-  color: #61708c;
-  line-height: 1.35;
+  .messageArea {
+    grid-template-columns: 1fr;
+  }
+
+  .runTimeline {
+    min-height: 170px;
+  }
 }
 
-/* ── Responsive ───────────────────────────────────────────── */
-@media (max-width: 760px) {
-  .taskHead {
+@media (max-width: 820px) {
+  .workbench {
+    height: auto;
+    min-height: 100%;
+    grid-template-columns: 1fr;
+    width: 100%;
+    max-width: 100%;
+    overflow: auto;
+    padding: 12px;
+  }
+
+  .leftRail,
+  .threadSurface {
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    overflow: visible;
+  }
+
+  .workspacePanel {
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .threadHeader,
+  .approvalCard,
+  .workspaceHeader {
     flex-wrap: wrap;
   }
 
-  .metrics,
-  .agentList,
-  .statusStrip {
+  .messageArea,
+  .runSummary {
     grid-template-columns: 1fr;
   }
 
-  .confirmBar {
-    align-items: stretch;
-    flex-direction: column;
+  .workspaceTabs {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .fileRow,
+  .runnerRow {
+    grid-template-columns: 36px minmax(0, 1fr);
+  }
+
+  .fileRow .badge,
+  .runnerRow .badge {
+    justify-self: start;
   }
 }
diff --git a/app/web/src/pages/workbench/WorkbenchPage.tsx b/app/web/src/pages/workbench/WorkbenchPage.tsx
index bc47c009..07cc3875 100644
--- a/app/web/src/pages/workbench/WorkbenchPage.tsx
+++ b/app/web/src/pages/workbench/WorkbenchPage.tsx
@@ -1,766 +1,1015 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+  type KeyboardEvent,
+  type RefObject,
+} from 'react';
 import { useTranslation } from 'react-i18next';
-import { Icon, Button, Pill, Avatar, SearchInput, ProgressBar, Card } from '@shared/ui';
-import { ParticleCanvas } from '@/components/ParticleCanvas';
-import { WebLayout } from '@/components/WebLayout';
+import {
+  EventClient,
+  createPreview,
+  createThreadMessage,
+  decideApproval,
+  getBaseUrl,
+  getRunLogs,
+  listApprovals,
+  listArtifacts,
+  listPreviews,
+  listProjects,
+  listRunners,
+  listRuns,
+  listThreadItems,
+  listThreads,
+  startRun,
+  workbenchReducer,
+  type Approval,
+  type Artifact,
+  type Message,
+  type Preview,
+  type Run,
+  type ThreadItem,
+} from '@shared/index';
 import styles from './WorkbenchPage.module.css';
 
-/* ── Types ────────────────────────────────────────────────── */
+type WorkspacePanel = 'files' | 'diff' | 'preview' | 'logs' | 'approval';
 
-type PanelMode = 'preview' | 'diff' | 'approval';
-type ApprovalStatus = 'idle' | 'review-requested' | 'handoff-staged' | 'approved';
-type PreviewStatus = 'pending' | 'passed';
-type ConfirmationTone = 'info' | 'success' | 'warning';
-
-interface AgentCard {
+type ThreadMessage = {
   id: string;
-  initials: string;
-  name: string;
-  paused: boolean;
-  progress: number;
-  role: string;
-  route: string;
-  status: string;
+  author: string;
+  body: string;
+  meta: string;
+  tone: 'agent' | 'owner' | 'system';
+};
+
+type Particle = {
+  alpha: number;
+  hue: number;
+  radius: number;
+  vx: number;
+  vy: number;
+  x: number;
+  y: number;
+};
+
+const workspacePanels: WorkspacePanel[] = ['files', 'diff', 'preview', 'logs', 'approval'];
+
+function statusClass(status: string) {
+  if (
+    status === 'online' ||
+    status === 'finished' ||
+    status === 'approved' ||
+    status === 'connected' ||
+    status === 'ready'
+  ) {
+    return styles.good;
+  }
+
+  if (
+    status === 'failed' ||
+    status === 'rejected' ||
+    status === 'error' ||
+    status === 'disconnected'
+  ) {
+    return styles.bad;
+  }
+
+  if (
+    status === 'queued' ||
+    status === 'pending' ||
+    status === 'running' ||
+    status === 'loading' ||
+    status === 'waiting_approval'
+  ) {
+    return styles.warn;
+  }
+
+  return styles.neutral;
 }
 
-interface ActivityItem {
-  detail: string;
-  icon: string;
-  id: string;
-  title: string;
+function useParticleCanvas(canvasRef: RefObject<HTMLCanvasElement | null>) {
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const context = canvas?.getContext('2d');
+
+    if (!canvas || !context) {
+      return undefined;
+    }
+
+    let width = 0;
+    let height = 0;
+    let frameId = 0;
+    let particles: Particle[] = [];
+    const particleCount = 56;
+
+    const resize = () => {
+      const ratio = window.devicePixelRatio || 1;
+      width = window.innerWidth;
+      height = window.innerHeight;
+      canvas.width = Math.floor(width * ratio);
+      canvas.height = Math.floor(height * ratio);
+      canvas.style.width = `${width}px`;
+      canvas.style.height = `${height}px`;
+      context.setTransform(ratio, 0, 0, ratio, 0, 0);
+      particles = Array.from({ length: particleCount }, (_, index) => ({
+        x: Math.random() * width,
+        y: Math.random() * height,
+        radius: 1.6 + Math.random() * 2.6,
+        vx: -0.18 + Math.random() * 0.36,
+        vy: -0.18 - Math.random() * 0.48,
+        hue: index % 3 === 0 ? 196 : 210,
+        alpha: 0.18 + Math.random() * 0.2,
+      }));
+    };
+
+    const draw = () => {
+      context.clearRect(0, 0, width, height);
+
+      particles.forEach((particle, index) => {
+        particle.x += particle.vx;
+        particle.y += particle.vy;
+
+        if (particle.y < -16) {
+          particle.y = height + 16;
+          particle.x = Math.random() * width;
+        }
+
+        if (particle.x < -16) {
+          particle.x = width + 16;
+        }
+
+        if (particle.x > width + 16) {
+          particle.x = -16;
+        }
+
+        context.beginPath();
+        context.fillStyle = `hsla(${particle.hue}, 84%, 48%, ${particle.alpha})`;
+        context.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
+        context.fill();
+
+        for (let nextIndex = index + 1; nextIndex < particles.length; nextIndex += 1) {
+          const neighbor = particles[nextIndex];
+          if (!neighbor) continue;
+          const dx = particle.x - neighbor.x;
+          const dy = particle.y - neighbor.y;
+          const distance = Math.sqrt(dx * dx + dy * dy);
+
+          if (distance < 126) {
+            context.beginPath();
+            context.strokeStyle = `rgba(23, 105, 232, ${(1 - distance / 126) * 0.07})`;
+            context.lineWidth = 1;
+            context.moveTo(particle.x, particle.y);
+            context.lineTo(neighbor.x, neighbor.y);
+            context.stroke();
+          }
+        }
+      });
+
+      frameId = window.requestAnimationFrame(draw);
+    };
+
+    resize();
+    frameId = window.requestAnimationFrame(draw);
+    window.addEventListener('resize', resize);
+
+    return () => {
+      window.cancelAnimationFrame(frameId);
+      window.removeEventListener('resize', resize);
+    };
+  }, [canvasRef]);
 }
 
-interface ConfirmationBar {
-  detail: string;
-  id: string;
-  message: string;
-  tone: ConfirmationTone;
+function formatError(error: unknown) {
+  if (error instanceof Error) return error.message;
+  return String(error || 'Edge is unavailable');
 }
 
-interface CommandOption {
-  description: string;
-  disabled?: boolean;
-  icon: string;
-  id: string;
-  run: () => void;
-  shortcut: string;
-  title: string;
+function withTimeout<T>(
+  promise: Promise<T>,
+  message = 'Edge API did not respond. Check that Edge is running on 127.0.0.1:3210.',
+  timeoutMs = 2500,
+): Promise<T> {
+  return new Promise((resolve, reject) => {
+    const timer = window.setTimeout(() => reject(new Error(message)), timeoutMs);
+    promise.then(
+      (value) => {
+        window.clearTimeout(timer);
+        resolve(value);
+      },
+      (error) => {
+        window.clearTimeout(timer);
+        reject(error);
+      },
+    );
+  });
 }
 
-interface WorkbenchSession {
-  title: string;
-  meta: string;
-  status: 'Live' | 'Archived';
+function messageFromApi(message: Message, seq: number) {
+  return {
+    version: 'v1',
+    id: `local-message-${message.id}-${seq}`,
+    seq,
+    type: 'message.created',
+    scope: { threadId: message.threadId },
+    sentAt: message.createdAt,
+    payload: {
+      messageId: message.id,
+      threadId: message.threadId,
+      role: message.role,
+      content: message.content,
+      createdAt: message.createdAt,
+    },
+  } as const;
 }
 
-/* ── Constants ────────────────────────────────────────────── */
-
-const panelLabels: PanelMode[] = ['preview', 'diff', 'approval'];
-
-const routeOptions = [
-  'Preview verification',
-  'Diff validation',
-  'Approval handoff',
-  'Responsive sweep',
-];
-
-const mockRunnerNames = [
-  { id: 'worker-01', name: 'Workbench worker', capabilities: 'Refining layout and state affordances' },
-  { id: 'worker-02', name: 'Preview tester', capabilities: 'Checking responsive surfaces' },
-  { id: 'worker-03', name: 'Coordinator', capabilities: 'Watching write boundaries' },
-];
-
-const initialAgents: AgentCard[] = mockRunnerNames.map((runner, i) => ({
-  id: runner.id,
-  initials: runner.name.split(' ').map((w) => w[0]!).join('').toUpperCase().slice(0, 2),
-  name: runner.name,
-  role: runner.capabilities ?? 'No capability info',
-  status: 'Coding',
-  route: routeOptions[i % routeOptions.length]!,
-  paused: false,
-  progress: 50 + Math.floor(Math.random() * 45),
-}));
-
-const sessions: WorkbenchSession[] = [
-  { title: 'Workbench polish', meta: 'UI worker and tester active', status: 'Live' },
-  { title: 'Preview bridge', meta: 'Waiting on interface notes', status: 'Archived' },
-  { title: 'Approval queue', meta: 'Ready for owner review', status: 'Archived' },
-  { title: 'Responsive sweep', meta: 'All breakpoints checked', status: 'Live' },
-];
-
-const initialActivity: ActivityItem[] = [
-  { id: 'ui-1', icon: 'design_services', title: 'UI worker tightened the page hierarchy', detail: 'Cards now separate navigation, conversation, and review work without stacking decorative containers inside each other.' },
-  { id: 'ui-2', icon: 'hub', title: 'Coordinator pinned the page contract', detail: 'No real API calls, no new package dependency, and all changes stay under the workbench page directory.' },
-  { id: 'ui-3', icon: 'rule', title: 'Tester prepared review checks', detail: 'Diff, preview, and approval affordances are visible at the same time as session progress.' },
-];
-
-const navItems = [
-  { icon: 'view_quilt', label: 'Workbench', active: true },
-  { icon: 'forum', label: 'Sessions' },
-  { icon: 'account_tree', label: 'Agent graph' },
-  { icon: 'folder_open', label: 'Projects' },
-];
-
-/* ── Component ────────────────────────────────────────────── */
-
-export function WorkbenchPage() {
-  const { t } = useTranslation();
-
-  const activityIdRef = useRef(initialActivity.length);
-  const confirmationIdRef = useRef(0);
-  const [activePanel, setActivePanel] = useState<PanelMode>('preview');
-  const [activityFeed, setActivityFeed] = useState<ActivityItem[]>(initialActivity);
-  const [agents, setAgents] = useState<AgentCard[]>(initialAgents);
-  const [approvalStatus, setApprovalStatus] = useState<ApprovalStatus>('idle');
-  const [commandQuery, setCommandQuery] = useState('');
-  const [confirmation, setConfirmation] = useState<ConfirmationBar | null>(null);
-  const [draftInstruction, setDraftInstruction] = useState('');
-  const [isCommandOpen, setIsCommandOpen] = useState(false);
-  const [previewStatus, setPreviewStatus] = useState<PreviewStatus>('pending');
-
-  /* ── Activity helpers ─────────────────────────────────── */
-
-  const pushActivity = useCallback((icon: string, title: string, detail: string) => {
-    activityIdRef.current += 1;
-    setActivityFeed((current) => [
-      { id: `local-${activityIdRef.current}`, icon, title, detail },
-      ...current,
-    ].slice(0, 8));
-  }, []);
+function pickActiveRun(runs: Run[], activeThreadId?: string) {
+  return runs.find((item) => item.threadId === activeThreadId) ?? runs[0];
+}
 
-  const showConfirmation = useCallback((tone: ConfirmationTone, message: string, detail: string) => {
-    confirmationIdRef.current += 1;
-    setConfirmation({ id: `confirm-${confirmationIdRef.current}`, tone, message, detail });
-  }, []);
+function pickActiveApproval(approvals: Approval[], runId?: string) {
+  return (
+    approvals.find((item) => item.runId === runId && item.status === 'pending') ??
+    approvals.find((item) => item.runId === runId) ??
+    approvals[0]
+  );
+}
 
-  /* ── Command palette ──────────────────────────────────── */
+function pickPreview(previews: Preview[], runId?: string) {
+  return previews.find((item) => item.runId === runId) ?? previews[0];
+}
 
-  const openCommandPanel = useCallback(() => {
-    setCommandQuery('');
-    setIsCommandOpen(true);
-  }, []);
+function itemToMessage(item: ThreadItem): ThreadMessage {
+  const isOwner = item.role === 'user';
+  return {
+    id: item.id,
+    author: isOwner ? 'Owner' : 'Agent',
+    body: item.content || '(empty message)',
+    meta: `${item.role} - ${item.createdAt.slice(0, 16).replace('T', ' ')}`,
+    tone: isOwner ? 'owner' : 'agent',
+  };
+}
+
+function artifactDiffLines(artifacts: Artifact[]) {
+  if (!artifacts.length) return [];
+
+  return artifacts.slice(0, 8).flatMap((artifact) => [
+    ['+', `${artifact.kind}: ${artifact.path}`],
+    [' ', `${(artifact.sizeBytes / 1024).toFixed(1)} KB created ${artifact.createdAt.slice(0, 10)}`],
+  ]);
+}
+
+export default function WorkbenchPage() {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const localSeqRef = useRef(1_000_000);
+  const { t } = useTranslation('workbench');
+  const [state, dispatch] = useReducer(workbenchReducer, undefined, () =>
+    workbenchReducer(
+      {
+        projects: [],
+        threads: [],
+        runners: [],
+        runs: [],
+        threadItems: [],
+        approvals: [],
+        artifacts: [],
+        previews: [],
+        runLogs: {},
+        connection: { status: 'idle' },
+        lastSeq: 0,
+      },
+      { type: 'connection.loading' },
+    ),
+  );
+  const [activeThreadId, setActiveThreadId] = useState<string | undefined>();
+  const [activePanel, setActivePanel] = useState<WorkspacePanel>('files');
+  const [draft, setDraft] = useState('');
+  const [actionError, setActionError] = useState<string | undefined>();
+  const [isSending, setIsSending] = useState(false);
+  const [isStartingRun, setIsStartingRun] = useState(false);
+  const [decidingApprovalId, setDecidingApprovalId] = useState<string | undefined>();
+
+  const workspacePanelLabels: Record<WorkspacePanel, string> = {
+    files: t('workspace.tabs.files'),
+    diff: t('workspace.tabs.diff'),
+    preview: t('workspace.tabs.preview'),
+    logs: t('workspace.tabs.logs'),
+    approval: t('workspace.tabs.approval'),
+  };
+
+  const statusLabel = (status: string | undefined) =>
+    t(`status.${status ?? 'idle'}`, { defaultValue: status ?? 'idle' });
+
+  const errorMessage = (msg: string) => {
+    if (msg === 'Edge is unavailable') return t('error.edgeUnavailable');
+    if (msg === 'Edge event stream error') return t('error.edgeEventStream');
+    if (msg.startsWith('Edge API did not respond')) return t('error.edgeApiTimeout');
+    return msg;
+  };
+
+  useParticleCanvas(canvasRef);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function loadSnapshot() {
+      dispatch({ type: 'connection.loading' });
+      try {
+        const [projects, threads, runners, runs, approvals, artifacts, previews] =
+          await withTimeout(Promise.all([
+            listProjects({ pageSize: 50 }),
+            listThreads({ pageSize: 50 }),
+            listRunners(),
+            listRuns({ pageSize: 50 }),
+            listApprovals(),
+            listArtifacts(),
+            listPreviews(),
+          ]));
+
+        const firstThreadId = threads.items[0]?.id;
+        const [threadItems, runLogs] = await Promise.all([
+          firstThreadId
+            ? listThreadItems(firstThreadId, { pageSize: 100 })
+            : Promise.resolve(undefined),
+          Promise.all(
+            runs.items.slice(0, 10).map(async (run) => {
+              try {
+                return await getRunLogs(run.runId);
+              } catch {
+                return undefined;
+              }
+            }),
+          ),
+        ]);
+
+        if (cancelled) return;
+
+        dispatch({
+          type: 'snapshot.loaded',
+          snapshot: {
+            projects,
+            threads,
+            runners,
+            runs,
+            threadItems,
+            approvals,
+            artifacts,
+            previews,
+            runLogs: runLogs.filter((log): log is NonNullable<typeof log> => log !== undefined),
+          },
+        });
+        setActiveThreadId((current) => current ?? firstThreadId);
+      } catch (error) {
+        if (!cancelled) {
+          dispatch({ type: 'connection.error', error: formatError(error) });
+        }
+      }
+    }
+
+    loadSnapshot();
+
+    const client = new EventClient({ baseUrl: getBaseUrl() });
+    const offEvent = client.on((event) => {
+      dispatch({ type: 'event.received', event });
+    });
+    const offConnection = client.onConnection((status, error) => {
+      if (status === 'connected') {
+        dispatch({ type: 'connection.connected' });
+      } else if (status === 'disconnected') {
+        dispatch({ type: 'connection.disconnected', error });
+      } else {
+        dispatch({ type: 'connection.error', error: error ?? 'Edge event stream error' });
+      }
+    });
+
+    client.connect();
 
-  const closeCommandPanel = useCallback(() => {
-    setIsCommandOpen(false);
-    setCommandQuery('');
+    return () => {
+      cancelled = true;
+      offEvent();
+      offConnection();
+      client.disconnect();
+    };
   }, []);
 
-  /* ── Actions ──────────────────────────────────────────── */
-
-  const requestReview = useCallback((source = 'Toolbar') => {
-    setApprovalStatus((current) => (current === 'approved' ? current : 'review-requested'));
-    setActivePanel('approval');
-    pushActivity('rate_review', 'Review requested', `${source} opened a local approval checkpoint for this workbench state.`);
-    showConfirmation('info', 'Review checkpoint created', 'The approval panel is active and ready for local QA notes.');
-  }, [pushActivity, showConfirmation]);
-
-  const stageHandoff = useCallback((source = 'Task header') => {
-    setApprovalStatus((current) => (current === 'approved' ? current : 'handoff-staged'));
-    setActivePanel('approval');
-    pushActivity('outbox', 'Handoff staged', `${source} staged the visible preview, diff, and approval notes for owner review.`);
-    showConfirmation('info', 'Handoff staged locally', 'The handoff is visible in the activity stream; no external service was called.');
-  }, [pushActivity, showConfirmation]);
-
-  const approveWork = useCallback(() => {
-    if (previewStatus !== 'passed') {
-      setActivePanel('preview');
-      pushActivity('block', 'Approval blocked', 'Preview must be checked before the local approval state can complete.');
-      showConfirmation('warning', 'Preview check required', 'Mark the preview checked first, then return to approval.');
-      return;
+  useEffect(() => {
+    if (activeThreadId || !state.threads[0]?.id) return;
+    setActiveThreadId(state.threads[0].id);
+  }, [activeThreadId, state.threads]);
+
+  useEffect(() => {
+    if (!activeThreadId || state.connection.status === 'idle') return;
+
+    let cancelled = false;
+    listThreadItems(activeThreadId, { pageSize: 100 })
+      .then((threadItems) => {
+        if (!cancelled) {
+          dispatch({ type: 'threadItems.loaded', threadItems });
+        }
+      })
+      .catch((error) => {
+        if (!cancelled) {
+          dispatch({ type: 'connection.error', error: formatError(error) });
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [activeThreadId]);
+
+  const activeProject = state.projects[0];
+  const activeThread =
+    state.threads.find((thread) => thread.id === activeThreadId) ?? state.threads[0];
+  const run = pickActiveRun(state.runs, activeThread?.id);
+  const approval = pickActiveApproval(state.approvals, run?.runId);
+  const approvalState = approval?.status ?? 'pending';
+  const approvalLabel =
+    approvalState === 'approved'
+      ? t('approval.status.approved')
+      : approvalState === 'rejected'
+        ? t('approval.status.rejected')
+        : t('approval.status.pending');
+  const runArtifacts = state.artifacts.filter((artifact) => !run || artifact.runId === run.runId);
+  const preview = pickPreview(state.previews, run?.runId);
+  const runLog = run ? state.runLogs[run.runId] : undefined;
+  const activeRunnerCount = state.runners.filter((runner) => runner.status === 'online').length;
+  const messages = useMemo<ThreadMessage[]>(() => {
+    return state.threadItems
+      .filter((item) => item.threadId === activeThread?.id && item.kind === 'message')
+      .slice(0, 8)
+      .map(itemToMessage);
+  }, [activeThread?.id, state.threadItems]);
+  const diffLines = useMemo(() => artifactDiffLines(runArtifacts), [runArtifacts]);
+  const isOffline = state.connection.status === 'disconnected' || state.connection.status === 'error';
+  const isLoading = state.connection.status === 'loading';
+  const hasSnapshotData =
+    state.projects.length > 0 ||
+    state.threads.length > 0 ||
+    state.runners.length > 0 ||
+    state.runs.length > 0 ||
+    state.artifacts.length > 0 ||
+    state.approvals.length > 0 ||
+    state.previews.length > 0;
+  const isActionLocked = isOffline || isLoading || !hasSnapshotData;
+  const stateNotice = isLoading
+    ? t('state.loading')
+    : isOffline && hasSnapshotData
+      ? t('state.offlineSnapshot')
+      : isOffline
+        ? t('state.offlineEmpty')
+        : !hasSnapshotData
+          ? t('state.empty')
+          : undefined;
+
+  const queueDraft = async () => {
+    const content = draft.trim();
+    if (!content || !activeThread || isActionLocked) return;
+
+    setIsSending(true);
+    setActionError(undefined);
+    try {
+      const message = await createThreadMessage(activeThread.id, {
+        role: 'user',
+        content,
+      });
+      localSeqRef.current += 1;
+      dispatch({
+        type: 'event.received',
+        event: messageFromApi(message, localSeqRef.current),
+      });
+      setDraft('');
+    } catch (error) {
+      setActionError(formatError(error));
+    } finally {
+      setIsSending(false);
     }
-    setApprovalStatus('approved');
-    setActivePanel('approval');
-    pushActivity('verified', 'Approval completed', 'The local approval state is now complete and action buttons reflect the final state.');
-    showConfirmation('success', 'Approved locally', 'This is a visible local state only; no handoff was sent to a real API.');
-  }, [previewStatus, pushActivity, showConfirmation]);
-
-  const markPreviewChecked = useCallback(() => {
-    if (previewStatus === 'passed') {
-      setActivePanel('approval');
+  };
+
+  const handleComposerKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key !== 'Enter' || event.shiftKey || event.nativeEvent.isComposing) {
       return;
     }
-    setPreviewStatus('passed');
-    setApprovalStatus((current) => (current === 'idle' ? 'review-requested' : current));
-    setActivePanel('approval');
-    pushActivity('task_alt', 'Preview checked', 'Preview checks passed locally, so the review panel switched to approval.');
-    showConfirmation('success', 'Preview checked', 'The preview status is complete and approval actions are now available.');
-  }, [previewStatus, pushActivity, showConfirmation]);
-
-  const rerouteAgent = useCallback((agentId: string, source = 'Agent controls') => {
-    const targetAgent = agents.find((a) => a.id === agentId);
-    if (!targetAgent) return;
-
-    const currentRouteIndex = routeOptions.indexOf(targetAgent.route);
-    const nextRoute = routeOptions[(currentRouteIndex + 1 + routeOptions.length) % routeOptions.length]!;
-
-    setAgents((current) => current.map((agent) =>
-      agent.id === agentId
-        ? { ...agent, paused: false, route: nextRoute, status: 'Rerouted', progress: Math.min(agent.progress + 4, 96) }
-        : agent,
-    ));
-
-    pushActivity('alt_route', `${targetAgent.name} rerouted`, `${source} moved this agent to ${nextRoute}.`);
-    showConfirmation('info', 'Agent route updated', `${targetAgent.name} is now assigned to ${nextRoute}.`);
-  }, [agents, pushActivity, showConfirmation]);
-
-  const toggleAgentPause = useCallback((agentId: string) => {
-    const targetAgent = agents.find((a) => a.id === agentId);
-    if (!targetAgent) return;
-
-    const nextPaused = !targetAgent.paused;
-    setAgents((current) => current.map((agent) =>
-      agent.id === agentId
-        ? { ...agent, paused: nextPaused, status: nextPaused ? agent.status : agent.status === 'Paused' ? 'Coding' : agent.status }
-        : agent,
-    ));
-
-    pushActivity(
-      nextPaused ? 'pause_circle' : 'play_circle',
-      nextPaused ? `${targetAgent.name} paused` : `${targetAgent.name} resumed`,
-      nextPaused
-        ? 'The local agent card now shows a paused state and keeps its current route visible.'
-        : 'The local agent card returned to active work without calling a scheduler.',
-    );
-    showConfirmation(
-      nextPaused ? 'warning' : 'success',
-      nextPaused ? 'Agent paused' : 'Agent resumed',
-      `${targetAgent.name} is ${nextPaused ? 'paused' : 'active'} in this local workbench state.`,
-    );
-  }, [agents, pushActivity, showConfirmation]);
-
-  const openDiffPanel = useCallback(() => {
-    setActivePanel('diff');
-    pushActivity('difference', 'Diff panel opened', 'The inspector is showing the local illustrative diff view.');
-    showConfirmation('info', 'Diff panel active', 'Review the local file summary before staging a handoff.');
-  }, [pushActivity, showConfirmation]);
 
-  const noteLocalNotifications = useCallback(() => {
-    pushActivity('notifications', 'Notification drawer checked', 'There are no remote notifications in this local preview.');
-    showConfirmation('info', 'No remote notifications', 'This button only updates local visible state in the activity stream.');
-  }, [pushActivity, showConfirmation]);
-
-  const queueInstruction = useCallback((event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    const trimmed = draftInstruction.trim();
-    if (!trimmed) {
-      showConfirmation('warning', 'Instruction is empty', 'Add a short local instruction before queueing it.');
-      return;
+    queueDraft();
+  };
+
+  const startActiveRun = async () => {
+    if (!activeThread || isActionLocked) return;
+
+    setIsStartingRun(true);
+    setActionError(undefined);
+    try {
+      const nextRun = await startRun({
+        projectId: activeThread.projectId,
+        threadId: activeThread.id,
+      });
+      localSeqRef.current += 1;
+      dispatch({
+        type: 'event.received',
+        event: {
+          version: 'v1',
+          id: `local-run-${nextRun.runId}-${localSeqRef.current}`,
+          seq: localSeqRef.current,
+          type: 'run.queued',
+          scope: {
+            projectId: nextRun.projectId,
+            threadId: nextRun.threadId,
+            runId: nextRun.runId,
+          },
+          sentAt: nextRun.createdAt,
+          payload: {
+            runId: nextRun.runId,
+            projectId: nextRun.projectId,
+            threadId: nextRun.threadId,
+            createdAt: nextRun.createdAt,
+          },
+        },
+      });
+    } catch (error) {
+      setActionError(formatError(error));
+    } finally {
+      setIsStartingRun(false);
     }
-    setDraftInstruction('');
-    pushActivity('bolt', 'Instruction queued', trimmed);
-    showConfirmation('success', 'Instruction queued locally', 'The activity stream has the new note; nothing was sent to a server.');
-  }, [draftInstruction, pushActivity, showConfirmation]);
-
-  /* ── Derived ──────────────────────────────────────────── */
-
-  const activeAgentCount = agents.filter((a) => !a.paused).length;
-  const hasApproved = approvalStatus === 'approved';
-  const canApprove = previewStatus === 'passed' && !hasApproved;
-  const stagedCount = approvalStatus === 'handoff-staged' || approvalStatus === 'approved' ? 1 : 0;
-
-  const approvalLabel = useMemo<Record<ApprovalStatus, { label: string; detail: string }>>(() => ({
-    idle: { label: t('wb.approval.notRequested'), detail: t('wb.approval.notRequestedDetail') },
-    'review-requested': { label: t('wb.approval.reviewRequested'), detail: t('wb.approval.reviewRequestedDetail') },
-    'handoff-staged': { label: t('wb.approval.handoffStaged'), detail: t('wb.approval.handoffStagedDetail') },
-    approved: { label: t('wb.approval.approvedStatus'), detail: t('wb.approval.approvedDetail') },
-  }), [t]);
-
-  /* ── Command options ──────────────────────────────────── */
-
-  const commandOptions = useMemo<CommandOption[]>(() => [
-    {
-      id: 'route-qa', icon: 'alt_route', title: 'Route visual QA to tester',
-      description: 'Moves the preview tester to the next local route and records activity.',
-      shortcut: 'V', run: () => rerouteAgent('preview-tester', 'Command palette'),
-    },
-    {
-      id: 'review-checkpoint', icon: 'rate_review', title: 'Create approval checkpoint',
-      description: 'Switches to approval and appends a review request.',
-      shortcut: 'A', disabled: hasApproved, run: () => requestReview('Command palette'),
-    },
-    {
-      id: 'open-diff', icon: 'difference', title: 'Open diff panel',
-      description: 'Shows the local diff panel and writes a visible trace.',
-      shortcut: 'D', run: openDiffPanel,
-    },
-    {
-      id: 'stage-handoff', icon: 'outbox', title: 'Stage handoff',
-      description: 'Marks the local handoff as staged for owner review.',
-      shortcut: 'H', disabled: hasApproved, run: () => stageHandoff('Command palette'),
-    },
-    {
-      id: 'pause-primary', icon: agents[0]?.paused ? 'play_circle' : 'pause_circle',
-      title: agents[0]?.paused ? 'Resume workbench worker' : 'Pause workbench worker',
-      description: 'Toggles the primary agent card between active and paused.',
-      shortcut: 'P', run: () => toggleAgentPause(agents[0]?.id ?? ''),
-    },
-  ], [agents, hasApproved, openDiffPanel, rerouteAgent, requestReview, stageHandoff, toggleAgentPause]);
+  };
+
+  const decide = async (decision: 'approved' | 'rejected') => {
+    if (!approval) return;
+
+    setDecidingApprovalId(approval.id);
+    setActionError(undefined);
+    try {
+      const updated = await decideApproval(approval.id, { decision });
+      localSeqRef.current += 1;
+      dispatch({
+        type: 'event.received',
+        event: {
+          version: 'v1',
+          id: `local-approval-${updated.id}-${localSeqRef.current}`,
+          seq: localSeqRef.current,
+          type: 'approval.decided',
+          scope: {
+            threadId: updated.threadId,
+            runId: updated.runId,
+          },
+          sentAt: updated.decidedAt ?? new Date().toISOString(),
+          payload: {
+            approvalId: updated.id,
+            runId: updated.runId,
+            decision: updated.status,
+            decidedAt: updated.decidedAt,
+          },
+        },
+      });
+    } catch (error) {
+      setActionError(formatError(error));
+    } finally {
+      setDecidingApprovalId(undefined);
+    }
+  };
 
-  const filteredCommands = useMemo(() => {
-    const q = commandQuery.trim().toLowerCase();
-    if (!q) return commandOptions;
-    return commandOptions.filter((o) =>
-      `${o.title} ${o.description} ${o.shortcut}`.toLowerCase().includes(q),
-    );
-  }, [commandOptions, commandQuery]);
+  const requestPreview = async () => {
+    if (!run || isActionLocked) return;
 
-  /* ── Keyboard ─────────────────────────────────────────── */
+    setActionError(undefined);
+    try {
+      await createPreview({ runId: run.runId });
+    } catch (error) {
+      setActionError(formatError(error));
+    }
+  };
 
-  useEffect(() => {
-    if (!isCommandOpen) return;
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') closeCommandPanel();
-    };
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [closeCommandPanel, isCommandOpen]);
+  return (
+    <div className={styles.workbench}>
+      <canvas ref={canvasRef} className={styles.particles} aria-hidden="true" />
+      <aside className={styles.leftRail} aria-label={t('leftRail.ariaLabel')}>
+        <div className={styles.brandBlock}>
+          <span className={styles.brandMark}>AH</span>
+          <div className={styles.brandTitle}>
+            <h1>AGENTHUB</h1>
+            <p>{t('leftRail.workbench')}</p>
+          </div>
+        </div>
 
-  useEffect(() => {
-    const handleGlobal = (e: KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
-        e.preventDefault();
-        openCommandPanel();
-      }
-    };
-    window.addEventListener('keydown', handleGlobal);
-    return () => window.removeEventListener('keydown', handleGlobal);
-  }, [openCommandPanel]);
-
-  /* ── Panel Content ────────────────────────────────────── */
-
-  const panelContent = useMemo(() => {
-    if (activePanel === 'preview') {
-      return (
-        <section className={styles.panelStack} aria-label="Preview panel">
-          <div className={styles.previewCard}>
-            <div className={styles.previewToolbar}>
-              <span className={styles.windowDot} />
-              <span className={styles.windowDot} />
-              <span className={styles.windowDot} />
-              <span className={styles.previewToolbarText}>localhost preview</span>
-            </div>
-            <div className={styles.previewStage}>
-              <div className={styles.previewRow}>
-                <div>
-                  <div className={styles.previewRowTitle}>{t('wb.preview.title1')}</div>
-                  <div className={styles.previewRowDesc}>{t('wb.preview.desc1')}</div>
-                </div>
-                <Icon name="web_asset" />
-              </div>
-              <div className={styles.previewRow}>
-                <div>
-                  <div className={styles.previewRowTitle}>{t('wb.preview.title2')}</div>
-                  <div className={styles.previewRowDesc}>{t('wb.preview.desc2')}</div>
-                </div>
-                <Icon name="auto_awesome" />
-              </div>
-              <div className={styles.previewRow}>
-                <div>
-                  <div className={styles.previewRowTitle}>{t('wb.preview.title3')}</div>
-                  <div className={styles.previewRowDesc}>
-                    {previewStatus === 'passed' ? t('wb.preview.checkedDesc') : t('wb.preview.pendingDesc')}
-                  </div>
-                </div>
-                <Pill variant={previewStatus === 'passed' ? 'green' : 'amber'}>
-                  {previewStatus === 'passed' ? t('wb.preview.checked') : t('wb.preview.pending')}
-                </Pill>
-              </div>
-            </div>
+        <section className={styles.railSection}>
+          <div className={styles.sectionHead}>
+            <span>{t('leftRail.project')}</span>
+            <span className={`${styles.badge} ${statusClass(state.connection.status)}`}>
+              {statusLabel(state.connection.status)}
+            </span>
           </div>
-          <Button
-            variant="secondary"
-            disabled={previewStatus === 'passed'}
-            onClick={markPreviewChecked}
-          >
-            <Icon name={previewStatus === 'passed' ? 'check_circle' : 'task_alt'} />
-            {previewStatus === 'passed' ? t('wb.preview.checkedLabel') : t('wb.preview.markChecked')}
-          </Button>
+          <button className={`${styles.projectCard} ${styles.selectedCard}`} type="button">
+            <span className={styles.projectIcon}>AH</span>
+            <span>
+              <strong>{activeProject?.name ?? t('leftRail.noProject')}</strong>
+              <small>{activeProject?.description ?? t('leftRail.connectEdge')}</small>
+            </span>
+          </button>
+          {state.connection.error ? (
+            <p className={styles.errorText}>{errorMessage(state.connection.error)}</p>
+          ) : null}
         </section>
-      );
-    }
 
-    if (activePanel === 'diff') {
-      return (
-        <section className={styles.panelStack} aria-label="Diff panel">
-          <div className={styles.fileRow}>
-            <div>
-              <div className={styles.fileRowTitle}>{t('wb.diff.file1')}</div>
-              <div className={styles.fileRowDesc}>{t('wb.diff.desc1')}</div>
-            </div>
-            <Pill>new</Pill>
-          </div>
-          <div className={styles.fileRow}>
-            <div>
-              <div className={styles.fileRowTitle}>{t('wb.diff.file2')}</div>
-              <div className={styles.fileRowDesc}>{t('wb.diff.desc2')}</div>
-            </div>
-            <Pill>source</Pill>
+        <section className={styles.railSection}>
+          <div className={styles.sectionHead}>
+            <span>{t('leftRail.threads')}</span>
+            <span>{state.threads.length}</span>
           </div>
-          <div className={styles.codeDiff} aria-label="Illustrative diff">
-            <div className={`${styles.diffLine} ${styles.diffRemove}`}>
-              <span className={styles.diffSign}>-</span>
-              <span className={styles.diffText}>buttons only flipped a couple of local booleans</span>
-            </div>
-            <div className={`${styles.diffLine} ${styles.diffAdd}`}>
-              <span className={styles.diffSign}>+</span>
-              <span className={styles.diffText}>active preview, diff, and approval panel state</span>
-            </div>
-            <div className={`${styles.diffLine} ${styles.diffAdd}`}>
-              <span className={styles.diffSign}>+</span>
-              <span className={styles.diffText}>command palette writes activity and confirmation state</span>
-            </div>
-            <div className={`${styles.diffLine} ${styles.diffAdd}`}>
-              <span className={styles.diffSign}>+</span>
-              <span className={styles.diffText}>agent pause, resume, and reroute controls are visible</span>
-            </div>
-            <div className={`${styles.diffLine} ${styles.diffAdd}`}>
-              <span className={styles.diffSign}>+</span>
-              <span className={styles.diffText}>preview checks unlock the approval action path</span>
-            </div>
+          <div className={styles.threadList}>
+            {state.threads.length ? (
+              state.threads.slice(0, 5).map((thread) => (
+                <button
+                  className={
+                    thread.id === activeThread?.id
+                      ? `${styles.threadButton} ${styles.activeThread}`
+                      : styles.threadButton
+                  }
+                  key={thread.id}
+                  onClick={() => setActiveThreadId(thread.id)}
+                  type="button"
+                >
+                  <span>
+                    <strong>{thread.title ?? thread.id}</strong>
+                    <small>
+                      {statusLabel(thread.status)} - {thread.projectId}
+                    </small>
+                  </span>
+                  <span
+                    className={`${styles.dot} ${
+                      thread.status === 'active' ? styles.goodDot : styles.neutralDot
+                    }`}
+                  />
+                </button>
+              ))
+            ) : (
+              <p className={styles.emptyNotice}>{t('leftRail.noThreads')}</p>
+            )}
           </div>
-          <Button
-            variant="secondary"
-            disabled={hasApproved}
-            onClick={() => stageHandoff('Diff panel')}
-          >
-            <Icon name="outbox" />
-            {approvalStatus === 'handoff-staged' ? t('wb.diff.alreadyStaged') : t('wb.diff.stageHandoff')}
-          </Button>
         </section>
-      );
-    }
 
-    return (
-      <section className={styles.panelStack} aria-label="Approval panel">
-        <div className={styles.statusStrip} aria-label="Approval summary">
-          <div className={styles.statusItem}>
-            <span className={styles.statusLabel}>{t('wb.approval.preview')}</span>
-            <span className={styles.statusValue}>{previewStatus === 'passed' ? t('wb.preview.checked') : t('wb.preview.pending')}</span>
+        <section className={styles.railSection}>
+          <div className={styles.sectionHead}>
+            <span>{t('leftRail.runners')}</span>
+            <span>
+              {activeRunnerCount}/{state.runners.length}
+            </span>
           </div>
-          <div className={styles.statusItem}>
-            <span className={styles.statusLabel}>{t('wb.approval.approval')}</span>
-            <span className={styles.statusValue}>{approvalLabel[approvalStatus].label}</span>
+          <div className={styles.runnerList}>
+            {state.runners.length ? (
+              state.runners.map((runner) => (
+                <div className={styles.runnerRow} key={runner.id}>
+                  <span
+                    className={`${styles.dot} ${
+                      runner.status === 'online' ? styles.goodDot : styles.neutralDot
+                    }`}
+                  />
+                  <span>
+                    <strong>{runner.name}</strong>
+                    <small>{runner.capabilities ?? t('runner.adapterReady')}</small>
+                  </span>
+                  <span className={`${styles.badge} ${statusClass(runner.status)}`}>
+                    {statusLabel(runner.status)}
+                  </span>
+                </div>
+              ))
+            ) : (
+              <p className={styles.emptyNotice}>{t('leftRail.noRunners')}</p>
+            )}
           </div>
-          <div className={styles.statusItem}>
-            <span className={styles.statusLabel}>{t('wb.approval.handoff')}</span>
-            <span className={styles.statusValue}>{stagedCount ? t('wb.approval.staged') : t('wb.approval.open')}</span>
+        </section>
+      </aside>
+
+      <main className={styles.threadSurface}>
+        <header className={styles.threadHeader}>
+          <div>
+            <p className={styles.eyebrow}>{t('header.thread')}</p>
+            <h2>{activeThread?.title ?? t('header.noThread')}</h2>
+            <p>
+              {isOffline
+                ? t('header.edgeUnavailable')
+                : t('header.subtitle')}
+            </p>
           </div>
-        </div>
-
-        {approvalStatus === 'idle' && previewStatus === 'pending' ? (
-          <div className={styles.emptyState} role="status">
-            <span className={styles.emptyTitle}>{t('wb.approval.noCheckpoint')}</span>
-            <span>{t('wb.approval.noCheckpointHint')}</span>
+          <div className={styles.headerActions}>
+            <span className={`${styles.statusPill} ${statusClass(run?.status ?? 'idle')}`}>
+              {t('header.runStatus', { status: statusLabel(run?.status) })}
+            </span>
+            <button
+              className={styles.primaryButton}
+            disabled={!activeThread || isStartingRun || isActionLocked}
+              onClick={startActiveRun}
+              type="button"
+            >
+              {isStartingRun ? t('header.starting') : t('header.startRun')}
+            </button>
           </div>
-        ) : null}
+        </header>
+
+        {stateNotice ? <p className={styles.stateBanner}>{stateNotice}</p> : null}
+        {actionError ? <p className={styles.errorBanner}>{errorMessage(actionError)}</p> : null}
+
+        <section className={styles.runSummary} aria-label={t('runSummary.ariaLabel')}>
+          <article>
+            <strong>{run?.runId ?? t('runSummary.noRun')}</strong>
+            <span>AgentRun</span>
+          </article>
+          <article>
+            <strong>{runArtifacts.length}</strong>
+            <span>{t('runSummary.artifacts')}</span>
+          </article>
+          <article>
+            <strong>{approval ? approvalLabel : t('runSummary.noApproval')}</strong>
+            <span>{t('runSummary.approvalGate')}</span>
+          </article>
+          <article>
+            <strong>{preview?.url ?? t('runSummary.noPreview')}</strong>
+            <span>{t('runSummary.previewTarget')}</span>
+          </article>
+        </section>
 
-        <div className={styles.panelStack}>
-          <div className={styles.approvalRow}>
-            <span className={previewStatus === 'passed' ? styles.checkPassed : styles.checkPending}>
-              <Icon name={previewStatus === 'passed' ? 'check' : 'pending'} size={16} />
-            </span>
-            <div>
-              <div className={styles.approvalRowTitle}>{t('wb.approval.check1')}</div>
-              <div className={styles.approvalRowDesc}>
-                {previewStatus === 'passed' ? t('wb.approval.check1Passed') : t('wb.approval.check1Pending')}
-              </div>
+        <section className={styles.messageArea} aria-label={t('messages.ariaLabel')}>
+          <div className={styles.messages}>
+            <div className={styles.cardTitle}>
+              <span>{t('messages.title')}</span>
+              <span className={styles.muted}>{t('messages.subtitle')}</span>
+            </div>
+            <div className={styles.messageList}>
+              {messages.length ? (
+                messages.map((message) => (
+                  <article className={`${styles.message} ${styles[message.tone]}`} key={message.id}>
+                    <div className={styles.avatar}>{message.author.slice(0, 2).toUpperCase()}</div>
+                    <div>
+                      <div className={styles.messageMeta}>
+                        <strong>{t('message.author.' + message.tone)}</strong>
+                        <span>{message.meta}</span>
+                      </div>
+                      <p>{message.body === '(empty message)' ? t('message.empty') : message.body}</p>
+                    </div>
+                  </article>
+                ))
+              ) : (
+                <p className={styles.emptyNotice}>{t('messages.empty')}</p>
+              )}
             </div>
           </div>
-          <div className={styles.approvalRow}>
-            <span className={approvalStatus !== 'idle' ? styles.checkPassed : styles.checkPending}>
-              <Icon name={approvalStatus !== 'idle' ? 'check' : 'pending'} size={16} />
-            </span>
-            <div>
-              <div className={styles.approvalRowTitle}>{t('wb.approval.check2')}</div>
-              <div className={styles.approvalRowDesc}>{approvalLabel[approvalStatus].detail}</div>
+
+          <aside className={styles.runTimeline} aria-label={t('timeline.ariaLabel')}>
+            <div className={styles.cardTitle}>
+              <span>{t('timeline.title')}</span>
+              <span className={`${styles.badge} ${statusClass(run?.status ?? 'idle')}`}>
+                {statusLabel(run?.status)}
+              </span>
             </div>
+            <ol>
+              <li className={run ? styles.doneStep : undefined}>
+                <strong>run.queued</strong>
+                <span>{run ? t('timeline.queuedDone') : t('timeline.queuedWaiting')}</span>
+              </li>
+              <li className={run?.startedAt ? styles.doneStep : undefined}>
+                <strong>run.started</strong>
+                <span>{run?.startedAt ?? t('timeline.startedWaiting')}</span>
+              </li>
+              <li className={runLog ? styles.activeStep : undefined}>
+                <strong>run.output.batch</strong>
+                <span>{runLog ? t('timeline.logsAvailable') : t('timeline.noLogs')}</span>
+              </li>
+              <li className={runArtifacts.length ? styles.doneStep : undefined}>
+                <strong>artifact.created</strong>
+                <span>
+                  {runArtifacts.length ? t('timeline.artifactsAvailable') : t('timeline.noArtifacts')}
+                </span>
+              </li>
+            </ol>
+          </aside>
+        </section>
+
+        <section className={styles.approvalCard} aria-label={t('approval.ariaLabel')}>
+          <div>
+            <p className={styles.eyebrow}>{t('approval.title')}</p>
+            <h3>{approval?.summary ?? t('approval.empty')}</h3>
+            <p>
+              {approval
+                ? t('approval.description')
+                : t('approval.noPending')}
+            </p>
           </div>
-          <div className={styles.approvalRow}>
-            <span className={approvalStatus === 'handoff-staged' || approvalStatus === 'approved' ? styles.checkPassed : styles.checkPending}>
-              <Icon name={approvalStatus === 'handoff-staged' || approvalStatus === 'approved' ? 'check' : 'pending'} size={16} />
+          <div className={styles.approvalActions}>
+            <span className={`${styles.statusPill} ${statusClass(approvalState)}`}>
+              {approval ? approvalLabel : t('status.idle')}
             </span>
-            <div>
-              <div className={styles.approvalRowTitle}>{t('wb.approval.check3')}</div>
-              <div className={styles.approvalRowDesc}>
-                {approvalStatus === 'handoff-staged' || approvalStatus === 'approved'
-                  ? t('wb.approval.check3Staged')
-                  : t('wb.approval.check3Open')}
-              </div>
-            </div>
+            <button
+              className={styles.secondaryButton}
+            disabled={!approval || approval.status !== 'pending' || decidingApprovalId === approval.id || isActionLocked}
+              onClick={() => decide('rejected')}
+              type="button"
+            >
+              {t('approval.reject')}
+            </button>
+            <button
+              className={styles.primaryButton}
+            disabled={!approval || approval.status !== 'pending' || decidingApprovalId === approval.id || isActionLocked}
+              onClick={() => decide('approved')}
+              type="button"
+            >
+              {t('approval.approve')}
+            </button>
           </div>
-        </div>
-
-        <div className={styles.approvalActions}>
-          <Button variant="secondary" disabled={hasApproved} onClick={() => requestReview('Approval panel')}>
-            <Icon name="rate_review" />
-            {t('wb.requestReview')}
-          </Button>
-          <Button variant="secondary" disabled={hasApproved} onClick={() => stageHandoff('Approval panel')}>
-            <Icon name="outbox" />
-            {t('wb.stageHandoff')}
-          </Button>
-          <Button variant="primary" disabled={!canApprove} onClick={approveWork}>
-            <Icon name={hasApproved ? 'verified' : 'check_circle'} />
-            {hasApproved ? t('wb.approval.approved') : t('wb.approval.approve')}
-          </Button>
-        </div>
-      </section>
-    );
-  }, [
-    activePanel, approvalLabel, approvalStatus, approveWork, canApprove, hasApproved,
-    markPreviewChecked, previewStatus, requestReview, stageHandoff, stagedCount, t,
-  ]);
-
-  /* ── Sidebar bottom: sessions ──────────────────────────── */
+        </section>
 
-  const sidebarBottom = (
-    <ul className={styles.sessionList}>
-      {sessions.map((session) => (
-        <li className={styles.sessionItem} key={session.title}>
-          <div className={styles.sessionTop}>
-            <span className={styles.sessionTitle}>{session.title}</span>
-            {session.status === 'Live' ? (
-              <span className={styles.liveDot} />
-            ) : (
-              <Pill>{session.status}</Pill>
-            )}
+        <form
+          className={styles.composer}
+          onSubmit={(event) => {
+            event.preventDefault();
+            queueDraft();
+          }}
+        >
+          <button className={styles.iconButton} type="button" aria-label={t('composer.attach')}>
+            +
+          </button>
+          <textarea
+            aria-label={t('composer.threadAriaLabel')}
+            disabled={!activeThread || isSending || isActionLocked}
+            placeholder={isActionLocked ? t('composer.lockedPlaceholder') : t('composer.placeholder')}
+            value={draft}
+            onChange={(event) => setDraft(event.target.value)}
+            onKeyDown={handleComposerKeyDown}
+            rows={1}
+          />
+          <button className={styles.primaryButton} disabled={!draft.trim() || isSending || isActionLocked} type="submit">
+            {isSending ? t('composer.sending') : t('composer.send')}
+          </button>
+        </form>
+      </main>
+
+      <aside className={styles.workspacePanel} aria-label={t('workspace.ariaLabel')}>
+        <header className={styles.workspaceHeader}>
+          <div>
+            <p className={styles.eyebrow}>{t('workspace.title')}</p>
+            <h2>{t('workspace.subtitle')}</h2>
           </div>
-          <span className={styles.sessionMeta}>{session.meta}</span>
-        </li>
-      ))}
-    </ul>
-  );
+          <span className={`${styles.statusPill} ${statusClass(approvalState)}`}>
+            {approval ? approvalLabel : t('status.idle')}
+          </span>
+        </header>
+
+        <section className={styles.workspaceSummary} aria-label={t('workspace.summary.ariaLabel')}>
+          <article>
+            <span>{t('workspace.summary.artifacts')}</span>
+            <strong>{t('workspace.summary.artifactCount', { count: runArtifacts.length })}</strong>
+          </article>
+          <article>
+            <span>{t('workspace.summary.risk')}</span>
+            <strong className={approval?.status === 'pending' ? styles.warnText : undefined}>
+              {approval?.status === 'pending' ? t('workspace.summary.approvalNeeded') : t('workspace.summary.noPendingGate')}
+            </strong>
+          </article>
+        </section>
 
-  /* ── Render ────────────────────────────────────────────── */
+        <nav className={styles.workspaceTabs} aria-label={t('workspace.tabs.ariaLabel')}>
+          {workspacePanels.map((panel) => (
+            <button
+              className={panel === activePanel ? styles.activePanelTab : styles.panelTab}
+              key={panel}
+              onClick={() => setActivePanel(panel)}
+              type="button"
+            >
+              {workspacePanelLabels[panel]}
+            </button>
+          ))}
+        </nav>
+
+        <div className={styles.panelBody}>
+          {activePanel === 'files' ? (
+            <section className={styles.changedFiles}>
+              {runArtifacts.length ? (
+                runArtifacts.map((artifact) => (
+                  <article className={styles.fileRow} key={artifact.id}>
+                    <span className={styles.fileType}>
+                      {artifact.path.split('.').pop()?.slice(0, 2).toUpperCase() ?? 'FI'}
+                    </span>
+                    <span>
+                      <strong>{artifact.path}</strong>
+                      <small>
+                        {t('workspace.files.fileInfo', {
+                          size: (artifact.sizeBytes / 1024).toFixed(1),
+                          date: artifact.createdAt.slice(0, 10),
+                        })}
+                      </small>
+                    </span>
+                    <span className={`${styles.badge} ${styles.warn}`}>{artifact.kind}</span>
+                  </article>
+                ))
+              ) : (
+                <p className={styles.emptyNotice}>{t('workspace.empty.artifacts')}</p>
+              )}
+            </section>
+          ) : null}
 
-  return (
-    <div className={styles.pageRoot}>
-      <ParticleCanvas />
-
-      <WebLayout
-        brandName={t('wb.brand')}
-        brandSubtitle={t('wb.subtitle')}
-        navItems={navItems.map((item) => ({
-          ...item,
-          label: item.label === 'Workbench' ? t('wb.nav.workbench')
-            : item.label === 'Sessions' ? t('wb.nav.sessions')
-            : item.label === 'Agent graph' ? t('wb.nav.agents')
-            : t('wb.nav.projects'),
-        }))}
-        sectionLabels={[{ text: t('wb.sessions.label'), count: sessions.length }]}
-        sidebarBottom={sidebarBottom}
-        sidebarAction={
-          <Button variant="primary" size="md" onClick={openCommandPanel}>
-            <Icon name="add_task" />
-            {t('wb.newItem')}
-          </Button>
-        }
-        topbarLeft={
-          <SearchInput placeholder={t('wb.search')} />
-        }
-        topbarRight={
-          <>
-            <Pill>
-              <span className={styles.liveDot} />
-              {t('wb.previewOnly')}
-            </Pill>
-            <Button variant="icon" aria-label="Open command palette" onClick={openCommandPanel}>
-              <Icon name="keyboard_command_key" />
-            </Button>
-            <Button variant="icon" aria-label="Notifications" onClick={noteLocalNotifications}>
-              <Icon name="notifications" />
-            </Button>
-            <Button variant="secondary" disabled={hasApproved} onClick={() => requestReview('Top bar')}>
-              <Icon name="verified" />
-              {t('wb.requestReview')}
-            </Button>
-          </>
-        }
-        drawer={
-          <>
-            <div className={styles.inspectorHead}>
-              <div className={styles.panelHeading}>
-                <div>
-                  <div className={styles.panelTitle}>{t('wb.inspector.title')}</div>
-                  <div className={styles.panelSubtitle}>{t('wb.inspector.subtitle')}</div>
-                </div>
-                <Pill>{approvalLabel[approvalStatus].label}</Pill>
-              </div>
-              <div className={styles.tabBar} role="tablist" aria-label="Review views">
-                {panelLabels.map((panel) => (
-                  <button
-                    key={panel}
-                    type="button"
-                    role="tab"
-                    aria-selected={activePanel === panel}
-                    className={activePanel === panel ? `${styles.tab} ${styles.tabActive}` : styles.tab}
-                    onClick={() => setActivePanel(panel)}
+          {activePanel === 'diff' ? (
+            <section className={styles.diffBlock} aria-label={t('workspace.diff.ariaLabel')}>
+              {diffLines.length ? (
+                diffLines.map(([prefix, line], index) => (
+                  <div
+                    className={prefix === '+' ? styles.addLine : prefix === '-' ? styles.removeLine : styles.neutralLine}
+                    key={`${prefix}-${line}-${index}`}
                   >
-                    {t(`wb.panel.${panel}`)}
-                  </button>
-                ))}
-              </div>
-            </div>
-            <div className={styles.panelBody}>{panelContent}</div>
-          </>
-        }
-      >
-        <main className={styles.conversation}>
-          <div className={styles.taskHead}>
-            <div className={styles.taskBody}>
-              <Pill>{t('wb.taskPill')}</Pill>
-              <h2 className={styles.taskTitle}>{t('wb.taskTitle')}</h2>
-              <p className={styles.taskCopy}>{t('wb.taskDescription')}</p>
-            </div>
-            <Button variant="secondary" disabled={hasApproved} onClick={() => stageHandoff('Task header')}>
-              <Icon name="play_arrow" />
-              {approvalStatus === 'handoff-staged' ? t('wb.handoffStaged') : t('wb.stageHandoff')}
-            </Button>
-          </div>
+                    <span>{prefix}</span>
+                    <code>{line}</code>
+                  </div>
+                ))
+              ) : (
+                <p className={styles.emptyNotice}>{t('workspace.empty.diffArtifacts')}</p>
+              )}
+            </section>
+          ) : null}
 
-          {confirmation ? (
-            <div
-              className={`${styles.confirmBar} ${confirmation.tone === 'success' ? styles.confirmSuccess : confirmation.tone === 'warning' ? styles.confirmWarning : styles.confirmInfo}`}
-              role="status"
-            >
-              <div className={styles.confirmText}>
-                <span className={styles.confirmStrong}>{confirmation.message}</span>
-                <span className={styles.confirmDetail}>{confirmation.detail}</span>
+          {activePanel === 'preview' ? (
+            <section className={styles.previewBox}>
+              <div className={styles.previewTopbar}>
+                <span />
+                <span />
+                <span />
+                <strong>{preview?.url ?? t('workspace.preview.unavailable')}</strong>
               </div>
-              <Button variant="secondary" size="sm" onClick={() => setConfirmation(null)}>
-                {t('wb.confirm.dismiss')}
-              </Button>
-            </div>
+              <div className={styles.previewCanvas}>
+                <strong>{preview?.status === 'ready' ? t('workspace.preview.ready') : t('workspace.preview.notReady')}</strong>
+                <p>{preview?.url ?? t('workspace.preview.hint')}</p>
+                {run && !preview ? (
+                  <button className={styles.secondaryButton} disabled={isActionLocked} onClick={requestPreview} type="button">
+                    {t('workspace.preview.request')}
+                  </button>
+                ) : null}
+                {preview?.url ? (
+                  <a className={styles.previewLink} href={preview.url} target="_blank" rel="noreferrer">
+                    {t('workspace.preview.open')}
+                  </a>
+                ) : null}
+              </div>
+            </section>
           ) : null}
 
-          <div className={styles.metrics} aria-label="Task metrics">
-            <div className={styles.metric}>
-              <span className={styles.metricValue}>{6 - stagedCount}</span>
-              <span className={styles.metricLabel}>{t('wb.metrics.openTasks')}</span>
-            </div>
-            <div className={styles.metric}>
-              <span className={styles.metricValue}>{activeAgentCount}</span>
-              <span className={styles.metricLabel}>{t('wb.metrics.agentsActive')}</span>
-            </div>
-            <div className={styles.metric}>
-              <span className={styles.metricValue}>{previewStatus === 'passed' ? '0m' : '12m'}</span>
-              <span className={styles.metricLabel}>{t('wb.metrics.lastUpdate')}</span>
-            </div>
-          </div>
+          {activePanel === 'logs' ? (
+            <section className={styles.logBlock} aria-label={t('workspace.logs.ariaLabel')}>
+              {runLog?.stdout || runLog?.stderr ? (
+                <>
+                  {runLog.stdout ? <code>{runLog.stdout}</code> : null}
+                  {runLog.stderr ? <code>{runLog.stderr}</code> : null}
+                </>
+              ) : (
+                <code>{t('workspace.empty.logs')}</code>
+              )}
+            </section>
+          ) : null}
 
-          <ul className={styles.agentList} aria-label="Agent collaboration status">
-            {agents.map((agent) => (
-              <li
-                key={agent.id}
-                className={agent.paused ? `${styles.agentCard} ${styles.agentCardPaused}` : styles.agentCard}
-              >
-                <div className={styles.agentTop}>
-                  <Avatar initials={agent.initials} />
-                  <Pill>{agent.paused ? t('wb.status.paused') : agent.status}</Pill>
-                </div>
-                <div className={styles.agentName}>{agent.name}</div>
-                <div className={styles.agentRole}>{agent.role}</div>
-                <div className={styles.agentRoute}>
-                  <Icon name="alt_route" size={17} />
-                  <span>{agent.route}</span>
-                </div>
-                <ProgressBar value={agent.progress} paused={agent.paused} />
-                <div className={styles.agentActions}>
-                  <Button variant="secondary" size="sm" onClick={() => toggleAgentPause(agent.id)}>
-                    <Icon name={agent.paused ? 'play_circle' : 'pause_circle'} size={16} />
-                    {agent.paused ? t('wb.agent.resume') : t('wb.agent.pause')}
-                  </Button>
-                  <Button variant="secondary" size="sm" onClick={() => rerouteAgent(agent.id)}>
-                    <Icon name="swap_calls" size={16} />
-                    {t('wb.agent.reroute')}
-                  </Button>
-                </div>
-              </li>
-            ))}
-          </ul>
-
-          <ol className={styles.feed} aria-label="Session activity">
-            {activityFeed.length ? activityFeed.map((activity) => (
-              <li className={styles.message} key={activity.id}>
-                <div className={styles.messageIcon}>
-                  <Icon name={activity.icon} />
+          {activePanel === 'approval' ? (
+            <section className={styles.approvalPanel}>
+              <article>
+                <span
+                  className={`${styles.dot} ${
+                    runArtifacts.length ? styles.goodDot : styles.neutralDot
+                  }`}
+                />
+                <div>
+                  <strong>{t('workspace.approval.artifacts')}</strong>
+                  <p>
+                    {runArtifacts.length
+                      ? t('workspace.approval.artifactsAvailable')
+                      : t('workspace.approval.noArtifacts')}
+                  </p>
                 </div>
+              </article>
+              <article>
+                <span
+                  className={`${styles.dot} ${
+                    approval?.status === 'pending' ? styles.warnDot : styles.neutralDot
+                  }`}
+                />
                 <div>
-                  <div className={styles.messageTitle}>{activity.title}</div>
-                  <div className={styles.messageDetail}>{activity.detail}</div>
+                  <strong>{t('workspace.approval.applyGate')}</strong>
+                  <p>
+                    {approval?.status === 'pending'
+                      ? t('workspace.approval.ownerApprovalRequired')
+                      : t('workspace.approval.noPendingRequest')}
+                  </p>
                 </div>
-              </li>
-            )) : (
-              <li className={styles.emptyState}>
-                <span className={styles.emptyTitle}>No local activity yet</span>
-                <span>Use a command, agent control, or approval action to add entries.</span>
-              </li>
-            )}
-          </ol>
-
-          <form className={styles.composer} onSubmit={queueInstruction}>
-            <Icon name="bolt" />
-            <input
-              className={styles.composerInput}
-              aria-label={t('wb.composer.placeholder')}
-              placeholder={t('wb.composer.placeholder')}
-              value={draftInstruction}
-              onChange={(e) => setDraftInstruction(e.target.value)}
-            />
-            <Button variant="secondary" size="sm" disabled={!draftInstruction.trim()} type="submit">
-              {t('wb.composer.queue')}
-            </Button>
-          </form>
-        </main>
-      </WebLayout>
-
-      {isCommandOpen ? (
-        <div
-          className={styles.commandOverlay}
-          role="presentation"
-          onClick={(e) => { if (e.currentTarget === e.target) closeCommandPanel(); }}
-        >
-          <section className={styles.commandPanel} role="dialog" aria-label="Command palette">
-            <Card variant="glass" padding="normal">
-              <label className={styles.commandInput}>
-                <Icon name="terminal" />
-                <input
-                  className={styles.commandInputField}
-                  placeholder={t('wb.command.placeholder')}
-                  autoFocus
-                  value={commandQuery}
-                  onChange={(e) => setCommandQuery(e.target.value)}
+              </article>
+              <article>
+                <span
+                  className={`${styles.dot} ${
+                    approvalState === 'approved' ? styles.goodDot : styles.neutralDot
+                  }`}
                 />
-              </label>
-              <div className={styles.commandActions}>
-                {filteredCommands.length ? filteredCommands.map((option) => (
-                  <button
-                    key={option.id}
-                    className={styles.commandOption}
-                    type="button"
-                    disabled={option.disabled}
-                    onClick={() => { option.run(); closeCommandPanel(); }}
-                  >
-                    <Icon name={option.icon} size={18} />
-                    <span className={styles.commandCopy}>
-                      <span className={styles.commandTitle}>{option.title}</span>
-                      <span className={styles.commandDesc}>{option.description}</span>
-                    </span>
-                    <Pill>{option.shortcut}</Pill>
-                  </button>
-                )) : (
-                  <div className={styles.emptyState} role="status">
-                    <span className={styles.emptyTitle}>{t('wb.command.noResults')}</span>
-                    <span>{t('wb.command.noResultsHint')}</span>
-                  </div>
-                )}
-              </div>
-            </Card>
-          </section>
+                <div>
+                  <strong>{approval ? approvalLabel : t('status.idle')}</strong>
+                  <p>{t('workspace.approval.decisionSource')}</p>
+                </div>
+              </article>
+            </section>
+          ) : null}
         </div>
-      ) : null}
+      </aside>
     </div>
   );
 }
-
-export default WorkbenchPage;