feat: update codex live chat workflow

src/app/main/layout/MainLayout.tsx

@@ -4,8 +4,7 @@ import { Outlet, useLocation, useNavigate, useSearchParams } from 'react-router-
 import { useGestureLayer, useGesturePageState, useSearchLayer } from '../../../layer';
 import { useAppStore } from '../../../store';
 import { useTokenAccess } from '../tokenAccess';
-import { useAppConfig } from '../appConfig';
-import { ChatNotificationBridgeV2 } from '../ChatNotificationBridgeV2';
+import { syncAppConfigFromServer, useAppConfig } from '../appConfig';
 import { ChatRuntimeBridgeV2 } from '../ChatRuntimeBridgeV2';
 import { useUnreadCounts } from '../chatV2/hooks/useUnreadCounts';
 import { matchesShortcut, isTypingTarget, scrollToElement } from '../mainView/utils';
@@ -32,7 +31,6 @@ import {
   PLAN_MENU_ANCHOR_IDS,
   renderSidebarIntro,
   resolveCurrentPageDescriptor,
-  resolvePlanOpenKeys,
   resolvePlanQuickFilterMenu,
   resolvePlayOpenKeys,
   resolveSavedLayoutIdFromMenuKey,
@@ -148,16 +146,37 @@ function isRestrictedTopMenu(topMenu: TopMenuKey, hasAccess: boolean) {
   return !hasAccess && topMenu !== 'docs';
 }
 
-function resolveSidebarOpenKeys(topMenu: TopMenuKey, hasAccess: boolean) {
+function resolveSidebarOpenKeys(
+  topMenu: TopMenuKey,
+  hasAccess: boolean,
+  planMenu: PlanSectionKey,
+  chatMenu: ChatSectionKey,
+) {
   if (!hasAccess) {
     return ['docs-group'];
   }
 
-  if (topMenu === 'docs' || topMenu === 'apis') {
-    return ['docs-group', 'api-group'];
+  if (topMenu === 'docs') {
+    return ['docs-group'];
   }
 
-  return topMenu === 'play' ? resolvePlayOpenKeys() : resolvePlanOpenKeys();
+  if (topMenu === 'apis') {
+    return ['api-group'];
+  }
+
+  if (topMenu === 'play') {
+    return resolvePlayOpenKeys();
+  }
+
+  if (topMenu === 'plans') {
+    return planMenu === 'server-command' ? ['server-group'] : ['plan-group'];
+  }
+
+  if (chatMenu === 'errors') {
+    return ['app-log-group'];
+  }
+
+  return chatMenu === 'manage' ? ['chat-manage-group'] : ['codex-live-group'];
 }
 
 export function MainLayout() {
@@ -173,7 +192,9 @@ export function MainLayout() {
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
   const [contentExpanded, setContentExpanded] = useState(false);
   const [isMobileViewport, setIsMobileViewport] = useState(false);
-  const [sidebarOpenKeys, setSidebarOpenKeys] = useState<string[]>(resolveSidebarOpenKeys(routeState.topMenu, hasAccess));
+  const [sidebarOpenKeys, setSidebarOpenKeys] = useState<string[]>(
+    resolveSidebarOpenKeys(routeState.topMenu, hasAccess, routeState.planMenu, routeState.chatMenu),
+  );
   const [activePlanQuickFilter, setActivePlanQuickFilter] = useState<
     'working' | 'release-pending-main' | 'automation-failed' | null
   >(routeState.planMenu === 'release' ? 'release-pending-main' : null);
@@ -181,6 +202,10 @@ export function MainLayout() {
   const { componentSampleEntries, widgetSampleEntries, componentSamples, widgetSamples, docsDocuments, savedLayouts, setSavedLayouts, docFolders } = layoutData;
   const { chatUnreadCount } = useUnreadCounts();
 
+  useEffect(() => {
+    void syncAppConfigFromServer();
+  }, []);
+
   useEffect(() => {
     const mediaQuery = window.matchMedia('(max-width: 768px)');
     const updateViewport = () => {
@@ -196,14 +221,17 @@ export function MainLayout() {
   }, []);
 
   useEffect(() => {
-    if (isMobileViewport) {
-      setSidebarCollapsed(true);
+    if (!isMobileViewport) {
+      setSidebarCollapsed(false);
+      return;
     }
-  }, [isMobileViewport]);
+
+    setSidebarCollapsed(routeState.topMenu !== 'docs');
+  }, [isMobileViewport, routeState.topMenu]);
 
   useEffect(() => {
-    setSidebarOpenKeys(resolveSidebarOpenKeys(routeState.topMenu, hasAccess));
-  }, [hasAccess, routeState.topMenu]);
+    setSidebarOpenKeys(resolveSidebarOpenKeys(routeState.topMenu, hasAccess, routeState.planMenu, routeState.chatMenu));
+  }, [hasAccess, routeState.chatMenu, routeState.planMenu, routeState.topMenu]);
 
   useEffect(() => {
     if (docFolders.length > 0 && routeState.topMenu === 'docs' && !docFolders.includes(routeState.docsMenu)) {
@@ -342,6 +370,7 @@ export function MainLayout() {
   const planMenuItems = useMemo(() => buildPlanMenuItems(hasAccess), [hasAccess]);
   const chatMenuItems = useMemo(() => buildChatMenuItems(hasAccess, chatUnreadCount), [chatUnreadCount, hasAccess]);
   const playMenuItems = useMemo(() => buildPlayMenuItems(savedLayouts), [savedLayouts]);
+  const showInlineMobileDocsSidebar = isMobileViewport && routeState.topMenu === 'docs';
   const initialSelectedPlanId = Number(searchParams.get('planId'));
   const initialSelectedWorkId = searchParams.get('workId');
 
@@ -371,7 +400,6 @@ export function MainLayout() {
     >
       <Layout className="app-shell app-shell--docs-api">
         <ChatRuntimeBridgeV2 />
-        <ChatNotificationBridgeV2 />
         {contentExpanded ? null : (
           <MainHeader
             activeTopMenu={routeState.topMenu}
@@ -400,12 +428,13 @@ export function MainLayout() {
         )}
 
         <Layout>
-          {contentExpanded || (isMobileViewport && sidebarCollapsed) ? null : (
+          {contentExpanded || (isMobileViewport && sidebarCollapsed && !showInlineMobileDocsSidebar) ? null : (
             <MainSidebar
               activeTopMenu={routeState.topMenu}
               hasAccess={hasAccess}
               sidebarCollapsed={sidebarCollapsed}
               isMobileViewport={isMobileViewport}
+              mobileInline={showInlineMobileDocsSidebar}
               openKeys={sidebarOpenKeys}
               apiMenuItems={apiMenuItems}
               docsMenuItems={docsMenuItems}
@@ -426,7 +455,7 @@ export function MainLayout() {
               }}
               onSelectDocsMenu={(key) => {
                 navigate(buildDocsPath(key));
-                if (isMobileViewport) {
+                if (isMobileViewport && !showInlineMobileDocsSidebar) {
                   setSidebarCollapsed(true);
                 }
               }}
@@ -457,7 +486,7 @@ export function MainLayout() {
             />
           )}
 
-          {isMobileViewport && !sidebarCollapsed ? null : (
+          {isMobileViewport && !sidebarCollapsed && !showInlineMobileDocsSidebar ? null : (
             <MainContent contentExpanded={contentExpanded} onToggleContentExpanded={() => setContentExpanded((previous) => !previous)}>
               <Outlet />
             </MainContent>