Function WorkspaceShell

src/browser/components/WorkspaceShell/WorkspaceShell.tsx:106–272

(props)

);

export const WorkspaceShell: React.FC<WorkspaceShellProps> = (props) => {
  const shellRef = useRef<HTMLDivElement>(null);
  const shellSize = useResizeObserver(shellRef);

  // WorkspaceShell switches to flex-col at this breakpoint, so in that stacked mode the
  // right sidebar doesn't need to "leave room" for ChatPane beside it.
  const isStacked =
    typeof window !== "undefined" && window.matchMedia("(max-width: 768px)").matches;

  const [persistedLeftSidebarWidthPx] = usePersistedState<unknown>(
    LEFT_SIDEBAR_WIDTH_KEY,
    LEFT_SIDEBAR_DEFAULT_WIDTH_PX,
    { listener: true }
  );
  const containerWidthPx = shellSize?.width ?? 0;
  // Before ResizeObserver reports the real shell width, estimate it from the persisted left
  // sidebar width so a wide right sidebar doesn't first paint at a viewport-wide clamp and
  // then visibly snap narrower once the shell is measured.
  const usableWidthPx =
    containerWidthPx > 0
      ? containerWidthPx
      : estimateWorkspaceShellFallbackWidthPx({
          viewportWidthPx: typeof window !== "undefined" ? window.innerWidth : 1200,
          isStacked,
          leftSidebarCollapsed: props.leftSidebarCollapsed,
          persistedLeftSidebarWidthPx,
        });

  // Prevent ChatPane + RightSidebar from overflowing the workspace shell (which would show a
  // horizontal scrollbar due to WorkspaceShell's `overflow-x-auto`).
  const effectiveMaxWidthPx = isStacked
    ? RIGHT_SIDEBAR_ABS_MAX_WIDTH_PX
    : Math.min(
        RIGHT_SIDEBAR_ABS_MAX_WIDTH_PX,
        Math.max(
          RIGHT_SIDEBAR_MIN_WIDTH_PX,
          usableWidthPx - CHAT_PANE_MIN_WIDTH_PX - RIGHT_SIDEBAR_OVERFLOW_GUARD_PX
        )
      );

  const sidebar = useResizableSidebar({
    enabled: true,
    defaultWidth: RIGHT_SIDEBAR_DEFAULT_WIDTH_PX,
    minWidth: RIGHT_SIDEBAR_MIN_WIDTH_PX,
    maxWidth: effectiveMaxWidthPx,
    storageKey: RIGHT_SIDEBAR_WIDTH_KEY,
  });

  const { width: sidebarWidth, isResizing, startResize } = sidebar;
  const addTerminalRef = useRef<((options?: TerminalSessionCreateOptions) => void) | null>(null);
  const openTerminalPopout = useOpenTerminal();
  const handleOpenTerminal = useCallback(
    (options?: TerminalSessionCreateOptions) => {
      // On mobile touch devices, always use popout since the right sidebar is hidden
      const isMobileTouch = window.matchMedia("(max-width: 768px) and (pointer: coarse)").matches;
      if (isMobileTouch) {
        void openTerminalPopout(props.workspaceId, props.runtimeConfig, options);
      } else {