fix(ui): compact embedded chat URLs (#2431)

* fix(ui): keep embedded session chat URLs compact

* test(ui): guard embedded session chat URL length

* fix(ui): sync embedded custom themes

Bootstrap custom themes from parent window so iframe URLs stay compact.

Refs #2423

* docs(ui): clarify theme sync precedence

packages/ui/src/contexts/ThemeSystemContext.test.ts

@@ -1,9 +1,15 @@
 import { afterAll, beforeEach, describe, expect, test } from 'bun:test';
-import { getInitialSystemPreference } from './theme-embedded-bootstrap';
+import { getDefaultTheme } from '@/lib/theme/themes';
+import { resetEmbeddedSessionChatCache } from '@/components/layout/contextPanelEmbeddedChat';
+import {
+  getInitialSystemPreference,
+  publishEmbeddedThemeBootstrap,
+  readEmbeddedThemeBootstrap,
+} from './theme-embedded-bootstrap';
 
 const originalWindow = globalThis.window;
 
-const installWindow = (search: string, matchMediaDark: boolean) => {
+const installWindow = (search: string, matchMediaDark: boolean, parentTheme?: unknown) => {
   Object.defineProperty(globalThis, 'window', {
     configurable: true,
     value: {
@@ -11,12 +17,14 @@ const installWindow = (search: string, matchMediaDark: boolean) => {
         search,
       },
       matchMedia: () => ({ matches: matchMediaDark }),
+      parent: parentTheme === undefined ? null : { __openchamberEmbeddedThemeBootstrap: parentTheme },
     },
   });
 };
 
 beforeEach(() => {
   installWindow('', false);
+  resetEmbeddedSessionChatCache();
 });
 
 afterAll(() => {
@@ -29,7 +37,40 @@ afterAll(() => {
 describe('ThemeSystemProvider embedded bootstrap', () => {
   test('uses parent effective variant for embedded system theme before iframe matchMedia', () => {
     installWindow('?ocPanel=session-chat&themeMode=system&themeVariant=dark', false);
+    resetEmbeddedSessionChatCache();
 
     expect(getInitialSystemPreference()).toBe(true);
   });
+
+  test('uses a validated parent custom theme before first render', () => {
+    const customTheme = {
+      ...getDefaultTheme(true),
+      metadata: {
+        ...getDefaultTheme(true).metadata,
+        id: 'custom-dark',
+        name: 'Custom dark',
+        variant: 'dark' as const,
+      },
+    };
+    installWindow('?ocPanel=session-chat', false, customTheme);
+    resetEmbeddedSessionChatCache();
+
+    expect(readEmbeddedThemeBootstrap()).toBe(customTheme);
+  });
+
+  test('rejects an invalid parent theme bootstrap', () => {
+    installWindow('?ocPanel=session-chat', false, { metadata: { id: 'invalid' } });
+    resetEmbeddedSessionChatCache();
+
+    expect(readEmbeddedThemeBootstrap()).toBeNull();
+  });
+
+  test('publishes the current parent theme without using the URL', () => {
+    const currentTheme = getDefaultTheme(true);
+
+    publishEmbeddedThemeBootstrap(currentTheme);
+
+    expect((globalThis.window as unknown as { __openchamberEmbeddedThemeBootstrap?: unknown })
+      .__openchamberEmbeddedThemeBootstrap).toBe(currentTheme);
+  });
 });

packages/ui/src/contexts/ThemeSystemContext.tsx

@@ -22,7 +22,12 @@ import {
 import { ThemeSystemContext, type ThemeContextValue } from './theme-system-context';
 import type { VSCodeThemePayload } from '@/lib/theme/vscode/adapter';
 import { runtimeFetch } from '@/lib/runtime-fetch';
-import { getInitialSystemPreference, readEmbeddedThemeSearchParams } from './theme-embedded-bootstrap';
+import {
+  getInitialSystemPreference,
+  publishEmbeddedThemeBootstrap,
+  readEmbeddedThemeBootstrap,
+  readEmbeddedThemeSearchParams,
+} from './theme-embedded-bootstrap';
 import { isValidTheme } from './theme-validation';
 import { getSyncedThemeFromPayload, getSyncedThemeVariant } from './theme-sync-payload';
 import { getRuntimeKey, subscribeRuntimeEndpointChanged } from '@/lib/runtime-switch';
@@ -44,17 +49,7 @@ const DEFAULT_LIGHT_ID = DEFAULT_LIGHT_THEME_ID;
 const DEFAULT_DARK_ID = DEFAULT_DARK_THEME_ID;
 
 const readEmbeddedCurrentTheme = (): Theme | null => {
-  const raw = readEmbeddedThemeSearchParams()?.get('currentTheme');
-  if (!raw) {
-    return null;
-  }
-
-  try {
-    const parsed = JSON.parse(raw);
-    return isValidTheme(parsed) ? parsed : null;
-  } catch {
-    return null;
-  }
+  return readEmbeddedThemeBootstrap();
 };
 
 const fallbackThemeForVariant = (variant: 'light' | 'dark'): Theme =>
@@ -198,6 +193,7 @@ export function ThemeSystemProvider({ children, defaultThemeId }: ThemeSystemPro
       add(vscodeTheme);
     }
 
+    // Live-synced theme wins over bootstrap theme when IDs match (add is first-wins).
     if (embeddedSyncedTheme) {
       add(embeddedSyncedTheme);
     }
@@ -370,6 +366,9 @@ export function ThemeSystemProvider({ children, defaultThemeId }: ThemeSystemPro
     }
     const restoreTransitions = suppressTransitionsForThemeSwitch();
     cssGenerator.apply(currentTheme);
+    if (!receivesParentThemeSync) {
+      publishEmbeddedThemeBootstrap(currentTheme);
+    }
     applyVSCodeRuntimeClass(isVSCode);
     updateBrowserChrome(currentTheme);
 
@@ -528,12 +527,16 @@ export function ThemeSystemProvider({ children, defaultThemeId }: ThemeSystemPro
 
     scopedWindow.__openchamberApplyThemeSync = applyIncomingThemeSync;
 
+    if (receivesParentThemeSync && window.parent !== window) {
+      window.parent.postMessage({ type: 'openchamber:theme-sync-request' }, window.location.origin);
+    }
+
     return () => {
       if (scopedWindow.__openchamberApplyThemeSync === applyIncomingThemeSync) {
         delete scopedWindow.__openchamberApplyThemeSync;
       }
     };
-  }, [applyIncomingThemeSync]);
+  }, [applyIncomingThemeSync, receivesParentThemeSync]);
 
   useEffect(() => {
     if (typeof window === 'undefined') {
@@ -593,7 +596,7 @@ export function ThemeSystemProvider({ children, defaultThemeId }: ThemeSystemPro
   }, [currentTheme.metadata.variant, isDesktopShell, preferences.themeMode, receivesParentThemeSync]);
 
   useEffect(() => {
-    if (typeof window === 'undefined') {
+    if (typeof window === 'undefined' || receivesParentThemeSync) {
       return;
     }
     const handleSettingsSynced = (event: Event) => {
@@ -641,7 +644,7 @@ export function ThemeSystemProvider({ children, defaultThemeId }: ThemeSystemPro
 
     window.addEventListener('openchamber:settings-synced', handleSettingsSynced);
     return () => window.removeEventListener('openchamber:settings-synced', handleSettingsSynced);
-  }, []);
+  }, [receivesParentThemeSync]);
 
   const setTheme = useCallback(
     (themeId: string) => {

packages/ui/src/contexts/theme-embedded-bootstrap.ts

@@ -1,4 +1,10 @@
 import { isEmbeddedSessionChat } from '@/components/layout/contextPanelEmbeddedChat';
+import type { Theme } from '@/types/theme';
+import { isValidTheme } from './theme-validation';
+
+type ThemeBootstrapWindow = Window & {
+  __openchamberEmbeddedThemeBootstrap?: unknown;
+};
 
 export const readEmbeddedThemeSearchParams = (): URLSearchParams | null => {
   if (!isEmbeddedSessionChat()) {
@@ -7,6 +13,32 @@ export const readEmbeddedThemeSearchParams = (): URLSearchParams | null => {
   return new URLSearchParams(window.location.search);
 };
 
+export const publishEmbeddedThemeBootstrap = (theme: Theme): void => {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  (window as ThemeBootstrapWindow).__openchamberEmbeddedThemeBootstrap = theme;
+};
+
+export const readEmbeddedThemeBootstrap = (): Theme | null => {
+  if (!isEmbeddedSessionChat()) {
+    return null;
+  }
+
+  try {
+    const parent = window.parent as ThemeBootstrapWindow;
+    if (parent === window) {
+      return null;
+    }
+    return isValidTheme(parent.__openchamberEmbeddedThemeBootstrap)
+      ? parent.__openchamberEmbeddedThemeBootstrap
+      : null;
+  } catch {
+    return null;
+  }
+};
+
 const getSystemPreference = (): boolean => {
   if (typeof window === 'undefined') {
     return true;