@sybilion/uilib 1.3.57 → 1.3.59

package/dist/esm/components/ui/Chat/ChatSheet/useChatPanelChromeModel.js

@@ -5,6 +5,7 @@ import { isGraphIntakeAssistantStepComplete, matchUserTextToQuickReply, isPreset
 import { buildChatSendMessagePayload, displayTextFromSendPayload } from '../buildChatSendMessagePayload.js';
 import { usedPresetIdsFromMessages } from '../chat-preset-utils.js';
 import { useChatsForScopeId, useChat, useChatOutboundPending, useSyncChatPanelBusy, isChatEmpty } from '../../../../contexts/chat-context.js';
+import { shellFitsSidebarsLayout } from '../../../../hooks/panelWidth.js';
 import useEvent from '../../../../hooks/useEvent.js';
 import { useIsMobile } from '../../../../hooks/useIsMobile.js';
 import { useQueryParams } from '../../../../hooks/useQueryParams.js';
@@ -17,15 +18,13 @@ import { Chat } from '../Chat.js';
 const NO_SCOPE_FALLBACK = '__uilib_chat_scope_unset__';
 const SCRIPT_STEP_DELAY_MS = 1200;
 const CHAT_NEW_SHORTCUT_KEY = 'o';
-/** When chat panel is open, collapse left nav below this width so both don't crowd the viewport. */
-const CHAT_NAV_COLLAPSE_BREAKPOINT_PX = 1400;
 const CHAT_QUERY_PARAM = 'chat';
 const CHAT_OPEN_VALUE = 'open';
 const PROMPT_QUERY_PARAM = 'prompt';
 function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onScriptComplete, renderMessageChart, emptyState, allowedAttachments, allowPdfAttachments, onAttachmentsDropped, slashCommandItems, onSlashItemCommand, transformSendPayload, }) {
     const effectiveScopeId = scopeId ?? NO_SCOPE_FALLBACK;
     const isMobile = useIsMobile();
-    const { chatPanelContainer, isOpen: sidebarNavOpen, setOpen: setSidebarNavOpen, chatWidthPx, setChatWidthPx, getShellWidth, setChatPanelOpen, } = useSidebar();
+    const { chatPanelContainer, isOpen: sidebarNavOpen, setOpen: setSidebarNavOpen, sidebarWidthPx, chatWidthPx, setChatWidthPx, getShellWidth, chatPanelOpen: shellChatPanelOpen, setChatPanelOpen, } = useSidebar();
     const [localUiBusy, setLocalUiBusy] = useState(false);
     const { chats, currentChatId, setCurrentChatId, newChat, sendMessage, addMessage, removeMessageById, } = useChatsForScopeId(effectiveScopeId);
     const chat = useChat(effectiveScopeId, currentChatId);
@@ -634,6 +633,14 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
         setIsOpen(chatOpen);
         setChatPanelOpen(chatOpen);
     }, [embedAsPage, chatOpen, setChatPanelOpen]);
+    /** Shell closed chat for space (e.g. nav opened); keep UI and URL in sync. */
+    useEffect(() => {
+        if (embedAsPage || shellChatPanelOpen || !isOpen) {
+            return;
+        }
+        setIsOpen(false);
+        removeSearchParams(CHAT_QUERY_PARAM);
+    }, [embedAsPage, shellChatPanelOpen, isOpen, removeSearchParams]);
     /** When this instance unmounts (e.g. route hides ChatSheet), release shell layout — URL sync alone does not run. */
     useEffect(() => {
         return () => {
@@ -648,16 +655,30 @@ function useChatPanelChromeModel({ embedAsPage, presets, scopeId, onMessage, onS
         }
         if (!isOpen || !sidebarNavOpen)
             return;
-        const collapseNavIfNarrow = () => {
-            if (window.innerWidth < CHAT_NAV_COLLAPSE_BREAKPOINT_PX) {
+        const collapseNavIfNoSpace = () => {
+            const shellW = getShellWidth();
+            if (!shellFitsSidebarsLayout(shellW, {
+                mainSidebarOpen: true,
+                chatPanelOpen: true,
+                sidebarWidthPx,
+                chatWidthPx,
+            })) {
                 // Chat open uses `startViewTransition`; nested transition here aborts first → AbortError overlay.
                 setSidebarNavOpen(false, { viewTransition: false });
             }
         };
-        collapseNavIfNarrow();
-        window.addEventListener('resize', collapseNavIfNarrow);
-        return () => window.removeEventListener('resize', collapseNavIfNarrow);
-    }, [embedAsPage, isOpen, sidebarNavOpen, setSidebarNavOpen]);
+        collapseNavIfNoSpace();
+        window.addEventListener('resize', collapseNavIfNoSpace);
+        return () => window.removeEventListener('resize', collapseNavIfNoSpace);
+    }, [
+        embedAsPage,
+        isOpen,
+        sidebarNavOpen,
+        setSidebarNavOpen,
+        getShellWidth,
+        sidebarWidthPx,
+        chatWidthPx,
+    ]);
     const renderPresets = (layout = 'fixed') => {
         if (!presetsWithFreeform?.length)
             return null;

package/dist/esm/components/ui/Sidebar/Sidebar.js

@@ -5,7 +5,7 @@ import { Button } from '../Button/Button.js';
 import { Separator } from '../Separator/Separator.js';
 import { Sheet, SheetContent, SheetTitle } from '../Sheet/Sheet.js';
 import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '../Tooltip/Tooltip.js';
-import { clampSidebarWidthPx, CHAT_WIDTH_STORAGE_KEY, SIDEBAR_WIDTH_DEFAULT_PX, SIDEBAR_WIDTH_MIN_PX, SIDEBAR_WIDTH_STORAGE_KEY_PX, SIDEBAR_WIDTH_STORAGE_KEY_PCT, CHAT_WIDTH_DEFAULT_PX, CHAT_WIDTH_MIN_PX, defaultChatWidthPx, clampChatWidthPx } from '../../../hooks/panelWidth.js';
+import { clampSidebarWidthPx, CHAT_WIDTH_STORAGE_KEY, shellFitsSidebarsLayout, SIDEBAR_WIDTH_DEFAULT_PX, SIDEBAR_WIDTH_MIN_PX, SIDEBAR_WIDTH_STORAGE_KEY_PX, SIDEBAR_WIDTH_STORAGE_KEY_PCT, CHAT_WIDTH_DEFAULT_PX, CHAT_WIDTH_MIN_PX, defaultChatWidthPx, clampChatWidthPx } from '../../../hooks/panelWidth.js';
 import useElemDrag from '../../../hooks/useDragElem.js';
 import useEvent from '../../../hooks/useEvent.js';
 import { useIsSidebarSheetLayout } from '../../../hooks/useIsSidebarSheetLayout.js';
@@ -80,7 +80,7 @@ function SidebarProvider({ defaultOpen = getCookie('isSidebarOpen') ?? true, cla
     }, []);
     const [sidebarWidthPx, _setSidebarWidthPx] = useState(() => readInitialSidebarWidthPx(sidebarLsKey));
     const [chatWidthPx, _setChatWidthPx] = useState(readInitialChatWidthPx);
-    const [chatPanelOpen, setChatPanelOpen] = useState(false);
+    const [chatPanelOpen, _setChatPanelOpen] = useState(false);
     const sidebarWidthRef = useRef(sidebarWidthPx);
     const chatWidthRef = useRef(chatWidthPx);
     sidebarWidthRef.current = sidebarWidthPx;
@@ -205,7 +205,46 @@ function SidebarProvider({ defaultOpen = getCookie('isSidebarOpen') ?? true, cla
         fitPanelWidthsToShell,
     ]);
     useShellWidthObserver(shellEl, handleShellResize);
+    const closeOppositeSidebarIfNoSpace = useCallback((openingMain, openingChat) => {
+        if (isSidebarSheetLayout)
+            return;
+        const shellW = getShellWidth();
+        const layoutAfterOpen = {
+            mainSidebarOpen: openingMain || isOpen,
+            chatPanelOpen: openingChat || chatPanelOpen,
+            sidebarWidthPx,
+            chatWidthPx,
+        };
+        if (shellFitsSidebarsLayout(shellW, layoutAfterOpen))
+            return;
+        if (openingMain && chatPanelOpen) {
+            _setChatPanelOpen(false);
+        }
+        else if (openingChat && isOpen) {
+            setIsOpen(false);
+            if (getCookiePreferences(userId)?.functional) {
+                setCookie('isSidebarOpen', 'false', 60 * 60 * 24 * 7);
+            }
+        }
+    }, [
+        isSidebarSheetLayout,
+        getShellWidth,
+        isOpen,
+        chatPanelOpen,
+        sidebarWidthPx,
+        chatWidthPx,
+        userId,
+    ]);
+    const setChatPanelOpen = useCallback((open) => {
+        if (open) {
+            closeOppositeSidebarIfNoSpace(false, true);
+        }
+        _setChatPanelOpen(open);
+    }, [closeOppositeSidebarIfNoSpace]);
     const setOpen = useCallback((value, options) => {
+        if (value) {
+            closeOppositeSidebarIfNoSpace(true, false);
+        }
         const useViewTransition = options?.viewTransition !== false &&
             !isSidebarSheetLayout &&
             'startViewTransition' in document &&
@@ -221,7 +260,7 @@ function SidebarProvider({ defaultOpen = getCookie('isSidebarOpen') ?? true, cla
         if (getCookiePreferences(userId)?.functional) {
             setCookie('isSidebarOpen', value.toString(), 60 * 60 * 24 * 7);
         }
-    }, [isSidebarSheetLayout, userId]);
+    }, [isSidebarSheetLayout, userId, closeOppositeSidebarIfNoSpace]);
     const toggleSidebar = useCallback(() => setOpen(!isOpen), [isOpen, setOpen]);
     useEffect(() => {
         const shell = wrapperRef.current;

package/dist/esm/components/widgets/DriversComparisonChart/DriversComparisonChart.js

@@ -28,7 +28,7 @@ import { Table, TableHeader, TableRow, TableHead, TableCellValue, TableBody, Tab
 import { TextShimmer } from '../../ui/TextShimmer/TextShimmer.js';
 import { TIME_RANGES } from '../../ui/TimeRangeControls/TimeRangeControls.constants.js';
 import S from './DriversComparisonChart.styl.js';
-import { applyDriversComparisonViewToPayload, mergeBacktestsChartData, mergeDatasetHistoricalWithBacktestsChartData, DRIVER_FORECAST_ID_BASE, getLagDisplayForView, resolveDriverLagLabel, INITIAL_VISIBLE_SERIES_COUNT, buildDriversComparisonChartData, formatSeriesImportance } from './driversComparisonChart.helpers.js';
+import { applyDriversComparisonViewToPayload, mergeBacktestsChartData, mergeDatasetHistoricalWithBacktestsChartData, computeDriversComparisonHistoricalWindowFloor, DRIVER_FORECAST_ID_BASE, getLagDisplayForView, resolveDriverLagLabel, INITIAL_VISIBLE_SERIES_COUNT, buildDriversComparisonChartData, formatSeriesImportance } from './driversComparisonChart.helpers.js';
 
 const ALL_TIME_RANGE = TIME_RANGES[TIME_RANGES.length - 1];
 function toForecastDataKey(id) {
@@ -82,6 +82,16 @@ function DriversComparisonChart({ payload, datasetHistorical = [], loading = fal
     }, [payloadForView?.drivers]);
     const mergedChartData = useMemo(() => mergeBacktestsChartData(payloadForView), [payloadForView]);
     const mergedWithHistorical = useMemo(() => mergeDatasetHistoricalWithBacktestsChartData(datasetHistorical, mergedChartData), [datasetHistorical, mergedChartData]);
+    const historicalWindowFloor = useMemo(() => {
+        const overlappedMerged = mergeBacktestsChartData(payload);
+        const merged = mergeDatasetHistoricalWithBacktestsChartData(datasetHistorical, overlappedMerged);
+        const sortedDrivers = [...(payload?.drivers ?? [])]
+            .filter(d => d.normalized_series &&
+            Object.keys(d.normalized_series).some(key => d.normalized_series[key] != null))
+            .sort((a, b) => String(a.id).localeCompare(String(b.id)));
+        const forecastIds = sortedDrivers.map((_, idx) => DRIVER_FORECAST_ID_BASE + idx);
+        return computeDriversComparisonHistoricalWindowFloor(merged, forecastIds);
+    }, [payload, datasetHistorical]);
     const chartForecastData = useMemo(() => {
         if (!payloadForView?.target?.normalized_series)
             return [];
@@ -114,8 +124,7 @@ function DriversComparisonChart({ payload, datasetHistorical = [], loading = fal
             };
         });
     }, [originalDriversById, sortedDriversWithData, viewTab]);
-    const seriesInitKeyResolved = seriesInitKey ??
-        `${tableSeriesRows.map(r => r.id).join(',') || 'none'}`;
+    const seriesInitKeyResolved = seriesInitKey ?? `${tableSeriesRows.map(r => r.id).join(',') || 'none'}`;
     const backtestsSeriesInitKeyRef = useRef('');
     useEffect(() => {
         if (tableSeriesRows.length === 0)
@@ -135,7 +144,12 @@ function DriversComparisonChart({ payload, datasetHistorical = [], loading = fal
             return next;
         });
     }, [seriesInitKeyResolved, tableSeriesRows]);
-    const driversComparisonChartData = useMemo(() => buildDriversComparisonChartData(mergedWithHistorical, datasetHistorical, chartForecastData.map(f => f.id)), [chartForecastData, datasetHistorical, mergedWithHistorical]);
+    const driversComparisonChartData = useMemo(() => buildDriversComparisonChartData(mergedWithHistorical, datasetHistorical, chartForecastData.map(f => f.id), historicalWindowFloor), [
+        chartForecastData,
+        datasetHistorical,
+        historicalWindowFloor,
+        mergedWithHistorical,
+    ]);
     const showEmptyOverlay = (runAnalysisHint || Boolean(statusHint)) && !loading;
     return (jsxs("div", { className: cn(S.root, className), children: [jsxs("div", { className: cn(S.chartShell, loading && S.chartShellLoading), children: [jsx("div", { className: S.chartSlot, children: jsxs("div", { className: S.chartWithOverlay, children: [jsx("div", { className: cn(S.chartInteractiveLayer, showEmptyOverlay && S.chartInteractiveDimmed), children: jsx(ChartAreaInteractive, { chartRenderId: "drivers-comparison", disableLineDrawAnimation: true, disableHistoricalAnimation: true, disableTimeRangeSelector: true, enableTimeRangeBrush: true, chartContainerClassName: S.chartContainer, chartData: driversComparisonChartData, forecastData: chartForecastData, timeRange: timeRange, onTimeRangeChange: handleTimeRangeChange, pinMonth: undefined, onPinMonthChange: () => { }, isDarkTheme: isDarkTheme, loading: chartLoading, hasCombinedData: mergedWithHistorical.length > 0, forecastLineStyle: "solid", showLegend: false, hiddenSeries: hiddenSeries, toggleLegendSeries: toggleSeries, ensureAnalysisSeriesVisible: showSeries }) }), showEmptyOverlay && (jsx("div", { className: S.chartEmptyOverlay, role: "status", "aria-live": "polite", children: jsx("div", { className: S.chartEmptyBlurb, children: jsx(ChartEmptyState, { variant: "inline", hint: runAnalysisHint
                                                 ? 'Run a completed analysis to load the drivers comparison chart for an analysis.'

package/dist/esm/components/widgets/DriversComparisonChart/driversComparisonChart.helpers.js

@@ -231,17 +231,26 @@ function prependHistoricalLeadFromDataset(points, datasetHistorical, xMin) {
     }
     return [...lead, ...points];
 }
-function buildDriversComparisonChartData(mergedWithHistorical, datasetHistorical, forecastIds) {
+/** Overlapped (unshifted) anchor minus lead months — stable xMin across lagged/overlapped tabs. */
+function computeDriversComparisonHistoricalWindowFloor(mergedWithHistorical, forecastIds) {
+    if (mergedWithHistorical.length === 0 || forecastIds.length === 0)
+        return null;
+    const { anchor: anchorMonth } = getZoomAnchorMonthFromDriverMaterialStarts(mergedWithHistorical, forecastIds);
+    if (anchorMonth === null)
+        return null;
+    return subtractMonthsFromMonthStart(anchorMonth, DRIVER_COMPARISON_CHART_LEAD_MONTHS);
+}
+function buildDriversComparisonChartData(mergedWithHistorical, datasetHistorical, forecastIds, historicalWindowFloor) {
     if (mergedWithHistorical.length === 0)
         return mergedWithHistorical;
     if (forecastIds.length === 0)
         return mergedWithHistorical;
-    const { anchor: anchorMonth } = getZoomAnchorMonthFromDriverMaterialStarts(mergedWithHistorical, forecastIds);
-    if (anchorMonth === null)
+    const xMin = historicalWindowFloor ??
+        computeDriversComparisonHistoricalWindowFloor(mergedWithHistorical, forecastIds);
+    if (xMin === null)
         return mergedWithHistorical;
-    const xMin = subtractMonthsFromMonthStart(anchorMonth, DRIVER_COMPARISON_CHART_LEAD_MONTHS);
     const withLead = prependHistoricalLeadFromDataset(mergedWithHistorical, datasetHistorical, xMin);
     return withLead.filter(p => normalizeToMonthStart(p.date) >= xMin);
 }
 
-export { DRIVER_COMPARISON_CHART_LEAD_MONTHS, DRIVER_FORECAST_ID_BASE, INITIAL_VISIBLE_SERIES_COUNT, applyDriversComparisonViewToPayload, buildDriversComparisonChartData, formatLagMonthsLabel, formatSeriesImportance, getLagDisplayForView, getZoomAnchorMonthFromDriverMaterialStarts, mergeBacktestsChartData, mergeDatasetHistoricalWithBacktestsChartData, parseLagMonthsFromLabel, prependHistoricalLeadFromDataset, resolveDriverLagLabel, shiftNormalizedSeriesForward, subtractMonthsFromMonthStart };
+export { DRIVER_COMPARISON_CHART_LEAD_MONTHS, DRIVER_FORECAST_ID_BASE, INITIAL_VISIBLE_SERIES_COUNT, applyDriversComparisonViewToPayload, buildDriversComparisonChartData, computeDriversComparisonHistoricalWindowFloor, formatLagMonthsLabel, formatSeriesImportance, getLagDisplayForView, getZoomAnchorMonthFromDriverMaterialStarts, mergeBacktestsChartData, mergeDatasetHistoricalWithBacktestsChartData, parseLagMonthsFromLabel, prependHistoricalLeadFromDataset, resolveDriverLagLabel, shiftNormalizedSeriesForward, subtractMonthsFromMonthStart };

package/dist/esm/hooks/panelWidth.js

@@ -46,5 +46,20 @@ function clampChatWidthPx(px, shellWidth, effectiveSidebarWidthPx) {
 function defaultChatWidthPx(shellWidth) {
     return clampChatWidthPx(CHAT_WIDTH_DEFAULT_PX, shellWidth, SIDEBAR_WIDTH_DEFAULT_PX);
 }
+/** Minimum shell width when nav and/or chat panels are open (main column at least `CENTRAL_AREA_MIN_PX`). */
+function requiredShellWidthForSidebars(widths) {
+    const sidebarW = widths.mainSidebarOpen
+        ? widths.sidebarWidthPx || SIDEBAR_WIDTH_MIN_PX
+        : 0;
+    const chatW = widths.chatPanelOpen
+        ? widths.chatWidthPx || CHAT_WIDTH_MIN_PX
+        : 0;
+    return sidebarW + CENTRAL_AREA_MIN_PX + chatW;
+}
+function shellFitsSidebarsLayout(shellWidth, widths) {
+    if (shellWidth <= 0)
+        return true;
+    return shellWidth >= requiredShellWidthForSidebars(widths);
+}
 
-export { CENTRAL_AREA_MIN_PX, CHAT_WIDTH_ABS_MAX_PX, CHAT_WIDTH_DEFAULT_PX, CHAT_WIDTH_MIN_PX, CHAT_WIDTH_STORAGE_KEY, SHELL_MAX_FRACTION, SIDEBAR_SHEET_LAYOUT_MAX_WIDTH_PX, SIDEBAR_SHEET_SPLIT_MIN_VIEWPORT_PX, SIDEBAR_WIDTH_DEFAULT_PX, SIDEBAR_WIDTH_MIN_PX, SIDEBAR_WIDTH_STORAGE_KEY_PCT, SIDEBAR_WIDTH_STORAGE_KEY_PX, clampChatWidthPx, clampSidebarWidthPx, defaultChatWidthPx, maxChatWidthPx, maxSidebarWidthPx };
+export { CENTRAL_AREA_MIN_PX, CHAT_WIDTH_ABS_MAX_PX, CHAT_WIDTH_DEFAULT_PX, CHAT_WIDTH_MIN_PX, CHAT_WIDTH_STORAGE_KEY, SHELL_MAX_FRACTION, SIDEBAR_SHEET_LAYOUT_MAX_WIDTH_PX, SIDEBAR_SHEET_SPLIT_MIN_VIEWPORT_PX, SIDEBAR_WIDTH_DEFAULT_PX, SIDEBAR_WIDTH_MIN_PX, SIDEBAR_WIDTH_STORAGE_KEY_PCT, SIDEBAR_WIDTH_STORAGE_KEY_PX, clampChatWidthPx, clampSidebarWidthPx, defaultChatWidthPx, maxChatWidthPx, maxSidebarWidthPx, requiredShellWidthForSidebars, shellFitsSidebarsLayout };

package/dist/esm/types/src/components/widgets/DriversComparisonChart/driversComparisonChart.helpers.d.ts

@@ -35,4 +35,6 @@ export declare function subtractMonthsFromMonthStart(date: string, count: number
  * (scaled to the first normalized point) so the lead-in shows the target line alone.
  */
 export declare function prependHistoricalLeadFromDataset(points: ChartDataPoint[], datasetHistorical: ChartDataPoint[], xMin: string): ChartDataPoint[];
-export declare function buildDriversComparisonChartData(mergedWithHistorical: ChartDataPoint[], datasetHistorical: ChartDataPoint[], forecastIds: number[]): ChartDataPoint[];
+/** Overlapped (unshifted) anchor minus lead months — stable xMin across lagged/overlapped tabs. */
+export declare function computeDriversComparisonHistoricalWindowFloor(mergedWithHistorical: ChartDataPoint[], forecastIds: number[]): string | null;
+export declare function buildDriversComparisonChartData(mergedWithHistorical: ChartDataPoint[], datasetHistorical: ChartDataPoint[], forecastIds: number[], historicalWindowFloor?: string | null): ChartDataPoint[];

package/dist/esm/types/src/hooks/panelWidth.d.ts

@@ -22,3 +22,12 @@ export declare function clampSidebarWidthPx(px: number, shellWidth: number, opts
 /** Width that reduces the main column when the nav sidebar is expanded; use 0 when collapsed. */
 export declare function clampChatWidthPx(px: number, shellWidth: number, effectiveSidebarWidthPx: number): number;
 export declare function defaultChatWidthPx(shellWidth: number): number;
+export type SidebarsLayoutWidths = {
+    mainSidebarOpen: boolean;
+    chatPanelOpen: boolean;
+    sidebarWidthPx: number;
+    chatWidthPx: number;
+};
+/** Minimum shell width when nav and/or chat panels are open (main column at least `CENTRAL_AREA_MIN_PX`). */
+export declare function requiredShellWidthForSidebars(widths: SidebarsLayoutWidths): number;
+export declare function shellFitsSidebarsLayout(shellWidth: number, widths: SidebarsLayoutWidths): boolean;

package/dist/esm/types/src/hooks/panelWidth.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.3.57",
+  "version": "1.3.59",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",

package/src/components/ui/Chat/ChatSheet/useChatPanelChromeModel.tsx

@@ -31,6 +31,7 @@ import {
   useChatsForScopeId,
   useSyncChatPanelBusy,
 } from '#uilib/contexts/chat-context';
+import { shellFitsSidebarsLayout } from '#uilib/hooks/panelWidth';
 import useEvent from '#uilib/hooks/useEvent';
 import { useIsMobile } from '#uilib/hooks/useIsMobile';
 import { useQueryParams } from '#uilib/hooks/useQueryParams';
@@ -114,8 +115,6 @@ type PresetScriptState = {
 
 const SCRIPT_STEP_DELAY_MS = 1200;
 const CHAT_NEW_SHORTCUT_KEY = 'o';
-/** When chat panel is open, collapse left nav below this width so both don't crowd the viewport. */
-const CHAT_NAV_COLLAPSE_BREAKPOINT_PX = 1400;
 
 const CHAT_QUERY_PARAM = 'chat';
 const CHAT_OPEN_VALUE = 'open';
@@ -142,9 +141,11 @@ export function useChatPanelChromeModel({
     chatPanelContainer,
     isOpen: sidebarNavOpen,
     setOpen: setSidebarNavOpen,
+    sidebarWidthPx,
     chatWidthPx,
     setChatWidthPx,
     getShellWidth,
+    chatPanelOpen: shellChatPanelOpen,
     setChatPanelOpen,
   } = useSidebar();
   const [localUiBusy, setLocalUiBusy] = useState(false);
@@ -859,6 +860,15 @@ export function useChatPanelChromeModel({
     setChatPanelOpen(chatOpen);
   }, [embedAsPage, chatOpen, setChatPanelOpen]);
 
+  /** Shell closed chat for space (e.g. nav opened); keep UI and URL in sync. */
+  useEffect(() => {
+    if (embedAsPage || shellChatPanelOpen || !isOpen) {
+      return;
+    }
+    setIsOpen(false);
+    removeSearchParams(CHAT_QUERY_PARAM);
+  }, [embedAsPage, shellChatPanelOpen, isOpen, removeSearchParams]);
+
   /** When this instance unmounts (e.g. route hides ChatSheet), release shell layout — URL sync alone does not run. */
   useEffect(() => {
     return () => {
@@ -874,17 +884,33 @@ export function useChatPanelChromeModel({
     }
     if (!isOpen || !sidebarNavOpen) return;
 
-    const collapseNavIfNarrow = () => {
-      if (window.innerWidth < CHAT_NAV_COLLAPSE_BREAKPOINT_PX) {
+    const collapseNavIfNoSpace = () => {
+      const shellW = getShellWidth();
+      if (
+        !shellFitsSidebarsLayout(shellW, {
+          mainSidebarOpen: true,
+          chatPanelOpen: true,
+          sidebarWidthPx,
+          chatWidthPx,
+        })
+      ) {
         // Chat open uses `startViewTransition`; nested transition here aborts first → AbortError overlay.
         setSidebarNavOpen(false, { viewTransition: false });
       }
     };
 
-    collapseNavIfNarrow();
-    window.addEventListener('resize', collapseNavIfNarrow);
-    return () => window.removeEventListener('resize', collapseNavIfNarrow);
-  }, [embedAsPage, isOpen, sidebarNavOpen, setSidebarNavOpen]);
+    collapseNavIfNoSpace();
+    window.addEventListener('resize', collapseNavIfNoSpace);
+    return () => window.removeEventListener('resize', collapseNavIfNoSpace);
+  }, [
+    embedAsPage,
+    isOpen,
+    sidebarNavOpen,
+    setSidebarNavOpen,
+    getShellWidth,
+    sidebarWidthPx,
+    chatWidthPx,
+  ]);
 
   const renderPresets = (layout: ChatPresetsLayout = 'fixed') => {
     if (!presetsWithFreeform?.length) return null;

package/src/components/ui/Sidebar/Sidebar.tsx

@@ -34,6 +34,7 @@ import {
   clampChatWidthPx,
   clampSidebarWidthPx,
   defaultChatWidthPx,
+  shellFitsSidebarsLayout,
 } from '#uilib/hooks/panelWidth';
 import useElemDrag, { Delta } from '#uilib/hooks/useDragElem';
 import useEvent from '#uilib/hooks/useEvent';
@@ -171,7 +172,7 @@ function SidebarProvider({
     readInitialSidebarWidthPx(sidebarLsKey),
   );
   const [chatWidthPx, _setChatWidthPx] = useState(readInitialChatWidthPx);
-  const [chatPanelOpen, setChatPanelOpen] = useState(false);
+  const [chatPanelOpen, _setChatPanelOpen] = useState(false);
   const sidebarWidthRef = useRef(sidebarWidthPx);
   const chatWidthRef = useRef(chatWidthPx);
   sidebarWidthRef.current = sidebarWidthPx;
@@ -311,8 +312,53 @@ function SidebarProvider({
 
   useShellWidthObserver(shellEl, handleShellResize);
 
+  const closeOppositeSidebarIfNoSpace = useCallback(
+    (openingMain: boolean, openingChat: boolean) => {
+      if (isSidebarSheetLayout) return;
+      const shellW = getShellWidth();
+      const layoutAfterOpen = {
+        mainSidebarOpen: openingMain || isOpen,
+        chatPanelOpen: openingChat || chatPanelOpen,
+        sidebarWidthPx,
+        chatWidthPx,
+      };
+      if (shellFitsSidebarsLayout(shellW, layoutAfterOpen)) return;
+      if (openingMain && chatPanelOpen) {
+        _setChatPanelOpen(false);
+      } else if (openingChat && isOpen) {
+        setIsOpen(false);
+        if (getCookiePreferences(userId)?.functional) {
+          setCookie('isSidebarOpen', 'false', 60 * 60 * 24 * 7);
+        }
+      }
+    },
+    [
+      isSidebarSheetLayout,
+      getShellWidth,
+      isOpen,
+      chatPanelOpen,
+      sidebarWidthPx,
+      chatWidthPx,
+      userId,
+    ],
+  );
+
+  const setChatPanelOpen = useCallback(
+    (open: boolean) => {
+      if (open) {
+        closeOppositeSidebarIfNoSpace(false, true);
+      }
+      _setChatPanelOpen(open);
+    },
+    [closeOppositeSidebarIfNoSpace],
+  );
+
   const setOpen = useCallback(
     (value: boolean, options?: SetSidebarOpenOptions) => {
+      if (value) {
+        closeOppositeSidebarIfNoSpace(true, false);
+      }
+
       const useViewTransition =
         options?.viewTransition !== false &&
         !isSidebarSheetLayout &&
@@ -331,7 +377,7 @@ function SidebarProvider({
         setCookie('isSidebarOpen', value.toString(), 60 * 60 * 24 * 7);
       }
     },
-    [isSidebarSheetLayout, userId],
+    [isSidebarSheetLayout, userId, closeOppositeSidebarIfNoSpace],
   );
 
   const toggleSidebar = useCallback(() => setOpen(!isOpen), [isOpen, setOpen]);

package/src/components/widgets/DriversComparisonChart/AGENT.md

@@ -20,4 +20,6 @@ Requires: `payload` — target + driver normalized_series; `loading` / `chartLoa
 
 Lag column: **Overlapped** shows API `lag` string (may be a range). **Lagged** shows single `N month(s)` from `parseLagMonthsFromLabel` (range uses max month).
 
+Historical window: lead-in is anchored to the **overlapped** view (`computeDriversComparisonHistoricalWindowFloor`); lagged tab shifts driver lines only — switching tabs does not change historical extent.
+
 Empty/loading: loading props shimmer chart; null `payload` with `runAnalysisHint` prompts to run analysis.

package/src/components/widgets/DriversComparisonChart/DriversComparisonChart.tsx

@@ -35,6 +35,7 @@ import {
   INITIAL_VISIBLE_SERIES_COUNT,
   applyDriversComparisonViewToPayload,
   buildDriversComparisonChartData,
+  computeDriversComparisonHistoricalWindowFloor,
   formatSeriesImportance,
   getLagDisplayForView,
   mergeBacktestsChartData,
@@ -158,6 +159,27 @@ export function DriversComparisonChart({
     [datasetHistorical, mergedChartData],
   );
 
+  const historicalWindowFloor = useMemo(() => {
+    const overlappedMerged = mergeBacktestsChartData(payload);
+    const merged = mergeDatasetHistoricalWithBacktestsChartData(
+      datasetHistorical,
+      overlappedMerged,
+    );
+    const sortedDrivers = [...(payload?.drivers ?? [])]
+      .filter(
+        d =>
+          d.normalized_series &&
+          Object.keys(d.normalized_series).some(
+            key => d.normalized_series![key] != null,
+          ),
+      )
+      .sort((a, b) => String(a.id).localeCompare(String(b.id)));
+    const forecastIds = sortedDrivers.map(
+      (_, idx) => DRIVER_FORECAST_ID_BASE + idx,
+    );
+    return computeDriversComparisonHistoricalWindowFloor(merged, forecastIds);
+  }, [payload, datasetHistorical]);
+
   const chartForecastData = useMemo((): ForecastItemData[] => {
     if (!payloadForView?.target?.normalized_series) return [];
     return sortedDriversWithData.map((driver, idx) => ({
@@ -193,8 +215,7 @@ export function DriversComparisonChart({
   }, [originalDriversById, sortedDriversWithData, viewTab]);
 
   const seriesInitKeyResolved =
-    seriesInitKey ??
-    `${tableSeriesRows.map(r => r.id).join(',') || 'none'}`;
+    seriesInitKey ?? `${tableSeriesRows.map(r => r.id).join(',') || 'none'}`;
 
   const backtestsSeriesInitKeyRef = useRef<string>('');
 
@@ -222,8 +243,14 @@ export function DriversComparisonChart({
         mergedWithHistorical,
         datasetHistorical,
         chartForecastData.map(f => f.id),
+        historicalWindowFloor,
       ),
-    [chartForecastData, datasetHistorical, mergedWithHistorical],
+    [
+      chartForecastData,
+      datasetHistorical,
+      historicalWindowFloor,
+      mergedWithHistorical,
+    ],
   );
 
   const showEmptyOverlay = (runAnalysisHint || Boolean(statusHint)) && !loading;

package/src/components/widgets/DriversComparisonChart/driversComparisonChart.helpers.test.ts

@@ -1,10 +1,19 @@
+import type { ChartDataPoint } from '#uilib/components/ui/ChartAreaInteractive/ChartAreaInteractive.types';
+
 import {
+  DRIVER_COMPARISON_CHART_LEAD_MONTHS,
+  DRIVER_FORECAST_ID_BASE,
   applyDriversComparisonViewToPayload,
+  buildDriversComparisonChartData,
+  computeDriversComparisonHistoricalWindowFloor,
   formatLagMonthsLabel,
   getLagDisplayForView,
+  mergeBacktestsChartData,
+  mergeDatasetHistoricalWithBacktestsChartData,
   parseLagMonthsFromLabel,
   resolveDriverLagLabel,
   shiftNormalizedSeriesForward,
+  subtractMonthsFromMonthStart,
 } from './driversComparisonChart.helpers';
 
 describe('parseLagMonthsFromLabel', () => {
@@ -133,3 +142,173 @@ describe('applyDriversComparisonViewToPayload', () => {
     expect(lagged?.drivers[0].normalized_series['2015-07-01']).toBe(0.8);
   });
 });
+
+describe('computeDriversComparisonHistoricalWindowFloor', () => {
+  const laggedDriverPayload = {
+    target: {
+      id: 'target',
+      name: 'Target',
+      normalized_series: {
+        '2014-10-01': 1.0,
+        '2014-11-01': 1.01,
+        '2014-12-01': 1.02,
+        '2015-01-01': 1.03,
+        '2015-02-01': 1.04,
+        '2015-03-01': 1.05,
+        '2015-04-01': 1.06,
+        '2015-05-01': 1.07,
+      },
+    },
+    drivers: [
+      {
+        id: 'd1',
+        name: 'Driver',
+        lag: '3 month(s)',
+        normalized_series: {
+          '2015-04-01': 0.5,
+          '2015-05-01': 0.6,
+        },
+      },
+    ],
+  };
+
+  const datasetHistorical: ChartDataPoint[] = [
+    { date: '2014-10-01', historical: 100 },
+    { date: '2014-11-01', historical: 101 },
+    { date: '2014-12-01', historical: 102 },
+    { date: '2015-01-01', historical: 103 },
+    { date: '2015-02-01', historical: 104 },
+    { date: '2015-03-01', historical: 105 },
+    { date: '2015-04-01', historical: 106 },
+  ];
+
+  const forecastIds = [DRIVER_FORECAST_ID_BASE];
+
+  it('returns anchor minus lead months from overlapped merged data', () => {
+    const merged = mergeDatasetHistoricalWithBacktestsChartData(
+      datasetHistorical,
+      mergeBacktestsChartData(laggedDriverPayload),
+    );
+    const floor = computeDriversComparisonHistoricalWindowFloor(
+      merged,
+      forecastIds,
+    );
+    expect(floor).toBe(
+      subtractMonthsFromMonthStart(
+        '2015-04-01',
+        DRIVER_COMPARISON_CHART_LEAD_MONTHS,
+      ),
+    );
+    expect(floor).toBe('2014-10-01');
+  });
+});
+
+describe('buildDriversComparisonChartData historical window floor', () => {
+  const laggedDriverPayload = {
+    target: {
+      id: 'target',
+      name: 'Target',
+      normalized_series: {
+        '2014-10-01': 1.0,
+        '2014-11-01': 1.01,
+        '2014-12-01': 1.02,
+        '2015-01-01': 1.03,
+        '2015-02-01': 1.04,
+        '2015-03-01': 1.05,
+        '2015-04-01': 1.06,
+        '2015-05-01': 1.07,
+      },
+    },
+    drivers: [
+      {
+        id: 'd1',
+        name: 'Driver',
+        lag: '3 month(s)',
+        normalized_series: {
+          '2015-04-01': 0.5,
+          '2015-05-01': 0.6,
+        },
+      },
+    ],
+  };
+
+  const datasetHistorical: ChartDataPoint[] = [
+    { date: '2014-10-01', historical: 100 },
+    { date: '2014-11-01', historical: 101 },
+    { date: '2014-12-01', historical: 102 },
+    { date: '2015-01-01', historical: 103 },
+    { date: '2015-02-01', historical: 104 },
+    { date: '2015-03-01', historical: 105 },
+    { date: '2015-04-01', historical: 106 },
+  ];
+
+  const forecastIds = [DRIVER_FORECAST_ID_BASE];
+
+  it('keeps same xMin for lagged and overlapped when floor is pinned', () => {
+    const overlappedMerged = mergeDatasetHistoricalWithBacktestsChartData(
+      datasetHistorical,
+      mergeBacktestsChartData(laggedDriverPayload),
+    );
+    const laggedPayload = applyDriversComparisonViewToPayload(
+      laggedDriverPayload,
+      'lagged',
+    );
+    const laggedMerged = mergeDatasetHistoricalWithBacktestsChartData(
+      datasetHistorical,
+      mergeBacktestsChartData(laggedPayload),
+    );
+    const floor = computeDriversComparisonHistoricalWindowFloor(
+      overlappedMerged,
+      forecastIds,
+    )!;
+
+    const overlappedChart = buildDriversComparisonChartData(
+      overlappedMerged,
+      datasetHistorical,
+      forecastIds,
+      floor,
+    );
+    const laggedChart = buildDriversComparisonChartData(
+      laggedMerged,
+      datasetHistorical,
+      forecastIds,
+      floor,
+    );
+
+    expect(overlappedChart[0]?.date).toBe('2014-10-01');
+    expect(laggedChart[0]?.date).toBe('2014-10-01');
+    expect(laggedChart[0]?.date).toBe(overlappedChart[0]?.date);
+  });
+
+  it('without floor override lagged chart starts later than overlapped', () => {
+    const overlappedMerged = mergeDatasetHistoricalWithBacktestsChartData(
+      datasetHistorical,
+      mergeBacktestsChartData(laggedDriverPayload),
+    );
+    const laggedPayload = applyDriversComparisonViewToPayload(
+      laggedDriverPayload,
+      'lagged',
+    );
+    const laggedMerged = mergeDatasetHistoricalWithBacktestsChartData(
+      datasetHistorical,
+      mergeBacktestsChartData(laggedPayload),
+    );
+
+    const overlappedChart = buildDriversComparisonChartData(
+      overlappedMerged,
+      datasetHistorical,
+      forecastIds,
+    );
+    const laggedChart = buildDriversComparisonChartData(
+      laggedMerged,
+      datasetHistorical,
+      forecastIds,
+    );
+
+    expect(overlappedChart[0]?.date).toBe('2014-10-01');
+    expect(laggedChart[0]?.date).toBe('2015-01-01');
+    expect(laggedChart[0]?.date!.localeCompare(overlappedChart[0]?.date!)).toBe(
+      1,
+    );
+  });
+});

package/src/components/widgets/DriversComparisonChart/driversComparisonChart.helpers.ts

@@ -290,22 +290,41 @@ export function prependHistoricalLeadFromDataset(
   return [...lead, ...points];
 }
 
-export function buildDriversComparisonChartData(
+/** Overlapped (unshifted) anchor minus lead months — stable xMin across lagged/overlapped tabs. */
+export function computeDriversComparisonHistoricalWindowFloor(
   mergedWithHistorical: ChartDataPoint[],
-  datasetHistorical: ChartDataPoint[],
   forecastIds: number[],
-): ChartDataPoint[] {
-  if (mergedWithHistorical.length === 0) return mergedWithHistorical;
-  if (forecastIds.length === 0) return mergedWithHistorical;
+): string | null {
+  if (mergedWithHistorical.length === 0 || forecastIds.length === 0)
+    return null;
   const { anchor: anchorMonth } = getZoomAnchorMonthFromDriverMaterialStarts(
     mergedWithHistorical,
     forecastIds,
   );
-  if (anchorMonth === null) return mergedWithHistorical;
-  const xMin = subtractMonthsFromMonthStart(
+  if (anchorMonth === null) return null;
+  return subtractMonthsFromMonthStart(
     anchorMonth,
     DRIVER_COMPARISON_CHART_LEAD_MONTHS,
   );
+}
+
+export function buildDriversComparisonChartData(
+  mergedWithHistorical: ChartDataPoint[],
+  datasetHistorical: ChartDataPoint[],
+  forecastIds: number[],
+  historicalWindowFloor?: string | null,
+): ChartDataPoint[] {
+  if (mergedWithHistorical.length === 0) return mergedWithHistorical;
+  if (forecastIds.length === 0) return mergedWithHistorical;
+
+  const xMin =
+    historicalWindowFloor ??
+    computeDriversComparisonHistoricalWindowFloor(
+      mergedWithHistorical,
+      forecastIds,
+    );
+  if (xMin === null) return mergedWithHistorical;
+
   const withLead = prependHistoricalLeadFromDataset(
     mergedWithHistorical,
     datasetHistorical,

package/src/hooks/panelWidth.test.ts

@@ -0,0 +1,75 @@
+import {
+  CENTRAL_AREA_MIN_PX,
+  CHAT_WIDTH_MIN_PX,
+  SIDEBAR_WIDTH_MIN_PX,
+  requiredShellWidthForSidebars,
+  shellFitsSidebarsLayout,
+} from './panelWidth';
+
+describe('requiredShellWidthForSidebars', () => {
+  it('sums only open panels plus central min', () => {
+    expect(
+      requiredShellWidthForSidebars({
+        mainSidebarOpen: true,
+        chatPanelOpen: true,
+        sidebarWidthPx: 320,
+        chatWidthPx: 600,
+      }),
+    ).toBe(320 + CENTRAL_AREA_MIN_PX + 600);
+
+    expect(
+      requiredShellWidthForSidebars({
+        mainSidebarOpen: false,
+        chatPanelOpen: true,
+        sidebarWidthPx: 320,
+        chatWidthPx: 600,
+      }),
+    ).toBe(CENTRAL_AREA_MIN_PX + 600);
+  });
+
+  it('falls back to panel mins when width is zero', () => {
+    expect(
+      requiredShellWidthForSidebars({
+        mainSidebarOpen: true,
+        chatPanelOpen: true,
+        sidebarWidthPx: 0,
+        chatWidthPx: 0,
+      }),
+    ).toBe(SIDEBAR_WIDTH_MIN_PX + CENTRAL_AREA_MIN_PX + CHAT_WIDTH_MIN_PX);
+  });
+});
+
+describe('shellFitsSidebarsLayout', () => {
+  it('returns true when shell meets required width', () => {
+    expect(
+      shellFitsSidebarsLayout(1600, {
+        mainSidebarOpen: true,
+        chatPanelOpen: true,
+        sidebarWidthPx: 300,
+        chatWidthPx: 500,
+      }),
+    ).toBe(true);
+  });
+
+  it('returns false when shell is too narrow for both panels', () => {
+    expect(
+      shellFitsSidebarsLayout(1500, {
+        mainSidebarOpen: true,
+        chatPanelOpen: true,
+        sidebarWidthPx: 300,
+        chatWidthPx: 500,
+      }),
+    ).toBe(false);
+  });
+
+  it('returns true for unknown shell width', () => {
+    expect(
+      shellFitsSidebarsLayout(0, {
+        mainSidebarOpen: true,
+        chatPanelOpen: true,
+        sidebarWidthPx: 300,
+        chatWidthPx: 500,
+      }),
+    ).toBe(true);
+  });
+});

package/src/hooks/panelWidth.ts

@@ -78,3 +78,31 @@ export function defaultChatWidthPx(shellWidth: number): number {
     SIDEBAR_WIDTH_DEFAULT_PX,
   );
 }
+
+export type SidebarsLayoutWidths = {
+  mainSidebarOpen: boolean;
+  chatPanelOpen: boolean;
+  sidebarWidthPx: number;
+  chatWidthPx: number;
+};
+
+/** Minimum shell width when nav and/or chat panels are open (main column at least `CENTRAL_AREA_MIN_PX`). */
+export function requiredShellWidthForSidebars(
+  widths: SidebarsLayoutWidths,
+): number {
+  const sidebarW = widths.mainSidebarOpen
+    ? widths.sidebarWidthPx || SIDEBAR_WIDTH_MIN_PX
+    : 0;
+  const chatW = widths.chatPanelOpen
+    ? widths.chatWidthPx || CHAT_WIDTH_MIN_PX
+    : 0;
+  return sidebarW + CENTRAL_AREA_MIN_PX + chatW;
+}
+
+export function shellFitsSidebarsLayout(
+  shellWidth: number,
+  widths: SidebarsLayoutWidths,
+): boolean {
+  if (shellWidth <= 0) return true;
+  return shellWidth >= requiredShellWidthForSidebars(widths);
+}