@data-club/ai-hub 0.0.12 → 0.0.14

package/src/components/DataClubAIHub/index.tsx

@@ -90,8 +90,12 @@ export interface DataClubAIHubProps {
   sessionsPanelWidthPercent?: number;
   /** Default for sessions_panel_collapsible. Default true. */
   sessionsPanelCollapsible?: boolean;
+  /** Default for sessions_panel_default_collapsed. Default **false** (extended). */
+  sessionsPanelDefaultCollapsed?: boolean;
   /** Default for create_session_button_enabled. Default true. */
   showCreateSessionButton?: boolean;
+  /** Default for load_last_session_enabled. Default **false**. */
+  loadLastSession?: boolean;
 
   /* ── Input controls (§8.4) ─────────────────────────────────────── */
   /** Default for user_input_enabled. Default true. */
@@ -265,6 +269,12 @@ function AuthedShell({ props }: { props: DataClubAIHubProps }): ReactNode {
       {...(props.sessionsPanelCollapsible !== undefined
         ? { sessionsPanelCollapsible: props.sessionsPanelCollapsible }
         : {})}
+      {...(props.sessionsPanelDefaultCollapsed !== undefined
+        ? { sessionsPanelDefaultCollapsed: props.sessionsPanelDefaultCollapsed }
+        : {})}
+      {...(props.loadLastSession !== undefined
+        ? { loadLastSession: props.loadLastSession }
+        : {})}
       {...(props.sessionsPanelResizable !== undefined
         ? { sessionsPanelResizable: props.sessionsPanelResizable }
         : {})}

package/src/components/DataClubAIHubAdmin/SettingsPage.tsx

@@ -43,7 +43,9 @@ const ALL_TOGGLE_KEYS: ReadonlyArray<keyof AIHubFeatureToggles> = [
   "sessions_panel_enabled",
   "sessions_panel_resizable",
   "sessions_panel_collapsible",
+  "sessions_panel_default_collapsed",
   "create_session_button_enabled",
+  "load_last_session_enabled",
   "user_input_enabled",
   "stop_button_enabled",
   "tool_calls_visible",
@@ -67,7 +69,9 @@ const TOGGLE_GROUPS: ReadonlyArray<{
       "sessions_panel_enabled",
       "sessions_panel_resizable",
       "sessions_panel_collapsible",
+      "sessions_panel_default_collapsed",
       "create_session_button_enabled",
+      "load_last_session_enabled",
     ],
   },
   {
@@ -89,9 +93,19 @@ const TOGGLE_GROUPS: ReadonlyArray<{
   },
 ];
 
-/** Toggle defaults — every toggle is on by default per §8.4. */
-function defaultToggleValue(): boolean {
-  return true;
+/**
+ * Built-in defaults per §8.4 — most toggles are on by default; the two
+ * opt-in behaviors below default to off. Must mirror
+ * `DEFAULT_AFFORDANCE_FLAGS` in `state/affordances.ts`.
+ */
+const OFF_BY_DEFAULT: ReadonlySet<keyof AIHubFeatureToggles> = new Set([
+  "sessions_panel_default_collapsed",
+  "load_last_session_enabled",
+] as const);
+
+/** Built-in default for one toggle key. */
+function defaultToggleValue(key: keyof AIHubFeatureToggles): boolean {
+  return !OFF_BY_DEFAULT.has(key);
 }
 
 /** Format ISO date as `<localized date> (<localized N days ago>)`. */
@@ -616,12 +630,12 @@ function FeatureTogglesSection(props: FeatureTogglesSectionProps): ReactNode {
   // The server's blob may omit keys (meaning "fall through to defaults"). The
   // UI shows the effective value for the user — fill in defaults for any
   // missing key. Save only sends the keys the user actually has toggled (in
-  // our case all of them, since the blob always carries all 14 once saved).
+  // our case all of them, since the blob always carries all 16 once saved).
   const [values, setValues] = useState<Record<string, boolean>>(() => {
     const initial: Record<string, boolean> = {};
     for (const key of ALL_TOGGLE_KEYS) {
       const fromServer = props.settings.feature_toggles[key];
-      initial[key] = typeof fromServer === "boolean" ? fromServer : defaultToggleValue();
+      initial[key] = typeof fromServer === "boolean" ? fromServer : defaultToggleValue(key);
     }
     return initial;
   });

package/src/components/MainColumn/index.tsx

@@ -37,6 +37,11 @@ export interface MainColumnClassNames {
   root: string;
   /** Chat header strip at the top. */
   header: string;
+  /**
+   * Hamburger button that opens the sessions drawer — rendered only in
+   * the narrow (mobile) layout.
+   */
+  menu: string;
   /** Back-to-agents-picker link. */
   back: string;
   /** Agent display-name text. */
@@ -52,6 +57,7 @@ export interface MainColumnClassNames {
 const DEFAULT_CLASS_NAMES: MainColumnClassNames = Object.freeze({
   root: "data-club-ai-hub__main-column",
   header: "data-club-ai-hub__chat-header",
+  menu: "data-club-ai-hub__chat-header__menu",
   back: "data-club-ai-hub__chat-header__back",
   title: "data-club-ai-hub__chat-header__title",
   export: "data-club-ai-hub__chat-header__export",
@@ -69,6 +75,14 @@ export interface MainColumnProps {
    * the link in single-agent embeds). Defaults to true.
    */
   showBackToAgents?: boolean;
+  /**
+   * Whether the narrow-layout hamburger button (opens the sessions
+   * drawer) may render. `<ChatShell />` passes the resolved
+   * `sessions_panel_enabled` flag so the button never appears for
+   * deployments without a sessions panel. The button only renders while
+   * the container is in the narrow layout regardless. Defaults to true.
+   */
+  showMenuButton?: boolean;
   /**
    * Whether to mount the turn-status indicator in the chat header.
    * Receives the resolved §8.4 flag stack (server toggle > prop >
@@ -107,10 +121,13 @@ export function MainColumn(props: MainColumnProps): ReactNode {
     sessions,
     activeSessionId,
     messages,
+    isNarrowLayout,
+    setSessionsDrawerOpen,
   } = useAIHub();
   const texts = useResolvedTexts(props.texts);
   const cls = { ...DEFAULT_CLASS_NAMES, ...(props.classNames ?? {}) };
   const showBack = props.showBackToAgents ?? true;
+  const showMenuButton = (props.showMenuButton ?? true) && isNarrowLayout;
   const showTurnStatus = props.showTurnStatus ?? true;
   const showExportButton = props.showExportButton ?? true;
 
@@ -176,6 +193,19 @@ export function MainColumn(props: MainColumnProps): ReactNode {
   return (
     <section className={rootClass} data-testid="main-column">
       <header className={cls.header} data-testid="chat-header">
+        {showMenuButton ? (
+          <button
+            type="button"
+            className={cls.menu}
+            onClick={() => setSessionsDrawerOpen(true)}
+            aria-label={texts.chat.expandSessionsPanel}
+            data-testid="chat-header-menu"
+          >
+            {/* Hamburger glyph — consistent with the text-glyph icons used
+                elsewhere (≪ / ≫ / ✎); themed via currentColor. */}
+            ☰
+          </button>
+        ) : null}
         {showBack ? (
           <button
             type="button"

package/src/components/SessionsPanel/index.tsx

@@ -48,6 +48,17 @@ export interface SessionsPanelClassNames {
   root: string;
   /** Modifier applied when the panel is collapsed. */
   rootCollapsed: string;
+  /**
+   * Modifier applied in the narrow (mobile) layout, where the panel
+   * renders as an overlay drawer instead of an inline column.
+   */
+  rootDrawer: string;
+  /** Modifier applied while the mobile drawer is open. */
+  rootDrawerOpen: string;
+  /** Backdrop scrim behind the open mobile drawer. */
+  drawerScrim: string;
+  /** Close (✕) button at the top of the mobile drawer. */
+  drawerClose: string;
   /** Optional custom-header slot wrapper at the top of the panel. */
   customHeader: string;
   /** "+ New chat" button. */
@@ -87,6 +98,10 @@ export interface SessionsPanelClassNames {
 const DEFAULT_CLASS_NAMES: SessionsPanelClassNames = Object.freeze({
   root: "data-club-ai-hub__sessions-panel",
   rootCollapsed: "data-club-ai-hub__sessions-panel--collapsed",
+  rootDrawer: "data-club-ai-hub__sessions-panel--drawer",
+  rootDrawerOpen: "data-club-ai-hub__sessions-panel--drawer-open",
+  drawerScrim: "data-club-ai-hub__sessions-panel__scrim",
+  drawerClose: "data-club-ai-hub__sessions-panel__drawer-close",
   customHeader: "data-club-ai-hub__sessions-panel__custom-header",
   newSessionButton: "data-club-ai-hub__sessions-panel__new-button",
   reveal: "data-club-ai-hub__sessions-panel__reveal",
@@ -114,6 +129,11 @@ export interface SessionsPanelProps {
   showCreateButton?: boolean;
   /** Whether the panel can be collapsed. Defaults to true. */
   collapsible?: boolean;
+  /**
+   * Whether the panel starts collapsed (until the user toggles it).
+   * Defaults to false — panel starts extended.
+   */
+  defaultCollapsed?: boolean;
   /** Top-of-panel slot. */
   customHeader?: ReactNode;
   /** Bottom-of-panel slot, rendered above the archived-filter toggle. */
@@ -143,16 +163,42 @@ export function SessionsPanel(props: SessionsPanelProps): ReactNode {
     includeArchivedSessions,
     setIncludeArchivedSessions,
     language,
+    isNarrowLayout,
+    sessionsDrawerOpen,
+    setSessionsDrawerOpen,
   } = useAIHub();
   const texts = useResolvedTexts(props.texts);
   const cls = { ...DEFAULT_CLASS_NAMES, ...(props.classNames ?? {}) };
   const showCreate = props.showCreateButton ?? true;
   const collapsible = props.collapsible ?? true;
 
-  const [collapsed, setCollapsed] = useState(false);
+  // `null` = the user hasn't toggled yet — follow `defaultCollapsed`. This
+  // matters because the server's feature-toggle blob resolves async: a
+  // late-arriving `sessions_panel_default_collapsed=true` still applies as
+  // long as the user hasn't made an explicit choice.
+  const [userCollapsed, setUserCollapsed] = useState<boolean | null>(null);
+  const collapsed = userCollapsed ?? props.defaultCollapsed ?? false;
   const [modalOpen, setModalOpen] = useState(false);
   const [editingSessionId, setEditingSessionId] = useState<string | null>(null);
 
+  // Narrow (mobile) layout: the panel becomes an overlay drawer driven by
+  // shared context state (the open button lives in `<MainColumn>`'s chat
+  // header). Desktop-only affordances — collapse toggle / reveal strip —
+  // are suppressed while in drawer mode.
+  const drawerMode = isNarrowLayout;
+  const drawerOpen = drawerMode && sessionsDrawerOpen;
+
+  // Escape closes the open drawer (matches the dropdown/modal conventions
+  // elsewhere in the library).
+  useEffect(() => {
+    if (!drawerOpen) return undefined;
+    const onKeyDown = (event: KeyboardEvent): void => {
+      if (event.key === "Escape") setSessionsDrawerOpen(false);
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [drawerOpen, setSessionsDrawerOpen]);
+
   const editingSession = useMemo<Session | null>(() => {
     if (!editingSessionId) return null;
     return sessions.find((s) => s.id === editingSessionId) ?? null;
@@ -166,7 +212,7 @@ export function SessionsPanel(props: SessionsPanelProps): ReactNode {
     }
   }, [editingSessionId, editingSession]);
 
-  if (collapsed) {
+  if (collapsed && !drawerMode) {
     return (
       <div
         className={`${cls.root} ${cls.rootCollapsed}`}
@@ -176,7 +222,7 @@ export function SessionsPanel(props: SessionsPanelProps): ReactNode {
         <button
           type="button"
           className={cls.reveal}
-          onClick={() => setCollapsed(false)}
+          onClick={() => setUserCollapsed(false)}
           aria-label={texts.chat.expandSessionsPanel}
           data-testid="sessions-panel-reveal"
         >
@@ -189,7 +235,14 @@ export function SessionsPanel(props: SessionsPanelProps): ReactNode {
     );
   }
 
-  const rootClass = [cls.root, props.className].filter(Boolean).join(" ");
+  const rootClass = [
+    cls.root,
+    drawerMode ? cls.rootDrawer : "",
+    drawerOpen ? cls.rootDrawerOpen : "",
+    props.className,
+  ]
+    .filter(Boolean)
+    .join(" ");
 
   async function handleArchive(session: Session): Promise<void> {
     const prompt = texts.chat.archiveConfirmPrompt.replace(
@@ -216,11 +269,35 @@ export function SessionsPanel(props: SessionsPanelProps): ReactNode {
   }
 
   return (
+    <>
+      {drawerMode ? (
+        <div
+          className={cls.drawerScrim}
+          data-open={drawerOpen ? "true" : "false"}
+          onClick={() => setSessionsDrawerOpen(false)}
+          aria-hidden="true"
+          data-testid="sessions-drawer-scrim"
+        />
+      ) : null}
     <aside
       className={rootClass}
       data-testid="sessions-panel"
       aria-label="Sessions"
+      data-drawer={drawerMode ? "true" : undefined}
+      data-open={drawerMode ? (drawerOpen ? "true" : "false") : undefined}
+      aria-hidden={drawerMode && !drawerOpen ? true : undefined}
     >
+      {drawerMode ? (
+        <button
+          type="button"
+          className={cls.drawerClose}
+          onClick={() => setSessionsDrawerOpen(false)}
+          aria-label={texts.chat.collapseSessionsPanel}
+          data-testid="sessions-drawer-close"
+        >
+          ✕
+        </button>
+      ) : null}
       {props.customHeader ? (
         <div className={cls.customHeader} data-testid="sessions-panel-custom-header">
           {props.customHeader}
@@ -239,11 +316,11 @@ export function SessionsPanel(props: SessionsPanelProps): ReactNode {
           {texts.chat.newSessionButton}
         </button>
       ) : null}
-      {collapsible ? (
+      {collapsible && !drawerMode ? (
         <button
           type="button"
           className={cls.collapseToggle}
-          onClick={() => setCollapsed(true)}
+          onClick={() => setUserCollapsed(true)}
           aria-label={texts.chat.collapseSessionsPanel}
           data-testid="sessions-panel-collapse"
         >
@@ -286,7 +363,12 @@ export function SessionsPanel(props: SessionsPanelProps): ReactNode {
               <button
                 type="button"
                 className={cls.itemTitle}
-                onClick={() => setActiveSession(session.id)}
+                onClick={() => {
+                  setActiveSession(session.id);
+                  // Re-selecting the already-active session doesn't change
+                  // provider state, so close the drawer explicitly too.
+                  if (drawerMode) setSessionsDrawerOpen(false);
+                }}
                 data-testid="session-item-open"
               >
                 <span>{displayTitle}</span>
@@ -380,5 +462,6 @@ export function SessionsPanel(props: SessionsPanelProps): ReactNode {
         texts={texts.chat}
       />
     </aside>
+    </>
   );
 }

package/src/context/AIHubContext.ts

@@ -263,6 +263,32 @@ export interface AIHubContextValue {
    * effect without a page reload.
    */
   refreshFeatureToggles: () => Promise<void>;
+
+  /* ── responsive layout ─────────────────────────────────────────── */
+  /**
+   * True when the component root is narrower than the narrow-layout
+   * breakpoint (default 720px). Driven by a `ResizeObserver` on the
+   * provider's root element — *container* width, not viewport width —
+   * so the library adapts identically in full-page mounts, iframes and
+   * partial-width embeds. The provider mirrors this value onto the
+   * root element as `data-layout="narrow" | "wide"`, which is what the
+   * stylesheet's responsive rules key off.
+   *
+   * In environments without `ResizeObserver` (jsdom, SSR) this stays
+   * `false` (wide).
+   */
+  isNarrowLayout: boolean;
+  /**
+   * Whether the sessions panel is currently open as a mobile overlay
+   * drawer. Only meaningful while `isNarrowLayout` is true — the wide
+   * layout renders the panel inline and ignores this flag. The provider
+   * force-closes the drawer when the layout flips back to wide and when
+   * the active agent or session changes (picking a chat should reveal
+   * the conversation, not leave the drawer covering it).
+   */
+  sessionsDrawerOpen: boolean;
+  /** Opens/closes the mobile sessions drawer. */
+  setSessionsDrawerOpen: (open: boolean) => void;
 }
 
 /**

package/src/context/AIHubProvider.tsx

@@ -26,6 +26,7 @@
 import {
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -172,10 +173,35 @@ export interface AIHubProviderProps {
    * the locale; omitted keys fall back to the locale, then English.
    */
   texts?: DeepPartial<AIHubTexts>;
+  /**
+   * Container width (px) below which the UI switches to the narrow
+   * (mobile) layout — sessions panel becomes an overlay drawer, chrome
+   * paddings tighten, touch targets grow. Measured against the
+   * component's own root element, not the viewport, so partial-width
+   * embeds adapt too. Defaults to `720`.
+   */
+  narrowLayoutBreakpoint?: number;
   /** The tree under the provider. */
   children: ReactNode;
 }
 
+/**
+ * Default `narrowLayoutBreakpoint` — below this container width the
+ * narrow layout kicks in. 720px keeps tablets-in-portrait and phones on
+ * the drawer layout while desktop half-screen windows stay on the
+ * two-column layout.
+ */
+const DEFAULT_NARROW_BREAKPOINT = 720;
+
+/**
+ * `useLayoutEffect` that degrades to `useEffect` on the server so SSR
+ * renders don't warn. The narrow-layout measurement wants layout timing
+ * (classify before first paint → no wide-layout flash on phones), but
+ * must not break Next.js-style server rendering of wrapper pages.
+ */
+const useIsomorphicLayoutEffect =
+  typeof window === "undefined" ? useEffect : useLayoutEffect;
+
 /**
  * The provider component. Single instance per ai-hub mount — multiple
  * mounts on the same page each manage their own auth state (this is the
@@ -194,6 +220,7 @@ export function AIHubProvider(props: AIHubProviderProps): ReactNode {
     fetch: fetchProp,
     onError,
     tokenStorage = "localStorage",
+    narrowLayoutBreakpoint = DEFAULT_NARROW_BREAKPOINT,
   } = props;
 
   // ── client ───────────────────────────────────────────────────────────
@@ -234,6 +261,41 @@ export function AIHubProvider(props: AIHubProviderProps): ReactNode {
     return readCachedLanguage() ?? defaultLanguage;
   });
 
+  // ── responsive layout ────────────────────────────────────────────────
+  // Container-width tier, observed on the provider's own root element so
+  // the narrow layout also kicks in for partial-width embeds (widget in a
+  // sidebar, iframe, …) where viewport media queries would lie. Defaults
+  // to wide when `ResizeObserver` is unavailable (SSR, jsdom).
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const [isNarrowLayout, setIsNarrowLayout] = useState(false);
+  const [sessionsDrawerOpen, setSessionsDrawerOpen] = useState(false);
+
+  useIsomorphicLayoutEffect(() => {
+    const el = rootRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return undefined;
+    const classify = (width: number): void => {
+      // Width 0 means "not laid out" (display:none host, detached
+      // measurement) — keep the previous tier rather than flapping.
+      if (width <= 0) return;
+      setIsNarrowLayout(width < narrowLayoutBreakpoint);
+    };
+    classify(el.getBoundingClientRect().width);
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        classify(entry.contentRect.width);
+      }
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [narrowLayoutBreakpoint]);
+
+  // The drawer only exists in the narrow layout — flip back to wide (e.g.
+  // phone rotation, window resize) and the inline panel returns, so the
+  // overlay state must reset or it would re-open stale on the next shrink.
+  useEffect(() => {
+    if (!isNarrowLayout) setSessionsDrawerOpen(false);
+  }, [isNarrowLayout]);
+
   // ── chat state (Step 9) ─────────────────────────────────────────────
   const [agents, setAgents] = useState<AgentSummary[]>([]);
   const [agentsLoading, setAgentsLoading] = useState(false);
@@ -244,6 +306,12 @@ export function AIHubProvider(props: AIHubProviderProps): ReactNode {
   const [activeSessionId, setActiveSessionIdState] = useState<string | null>(
     null,
   );
+
+  // Picking a chat (or switching agents) should reveal the conversation —
+  // close the mobile drawer instead of leaving it covering the messages.
+  useEffect(() => {
+    setSessionsDrawerOpen(false);
+  }, [activeAgentId, activeSessionId]);
   const [messages, setMessages] = useState<AIHubMessage[]>([]);
   const [messagesLoading, setMessagesLoading] = useState(false);
   const [streamState, setStreamState] = useState<AIHubState>(() =>
@@ -1106,11 +1174,20 @@ export function AIHubProvider(props: AIHubProviderProps): ReactNode {
     lastTurnError,
     featureToggles,
     refreshFeatureToggles,
+    isNarrowLayout,
+    sessionsDrawerOpen,
+    setSessionsDrawerOpen,
   };
 
   return (
     <aiHubContext.Provider value={value}>
-      <div className="data-club-ai-hub" data-theme={theme} lang={language}>
+      <div
+        ref={rootRef}
+        className="data-club-ai-hub"
+        data-theme={theme}
+        data-layout={isNarrowLayout ? "narrow" : "wide"}
+        lang={language}
+      >
         {children}
       </div>
     </aiHubContext.Provider>

package/src/context/useAIHub.ts

@@ -103,6 +103,12 @@ export interface UseAIHubResult {
   featureToggles: AIHubContextValue["featureToggles"];
   /** Re-fetches the toggles (used after a super-admin save). */
   refreshFeatureToggles: AIHubContextValue["refreshFeatureToggles"];
+  /** True while the component root is narrower than the breakpoint. */
+  isNarrowLayout: AIHubContextValue["isNarrowLayout"];
+  /** Whether the narrow-layout sessions drawer is open. */
+  sessionsDrawerOpen: AIHubContextValue["sessionsDrawerOpen"];
+  /** Opens/closes the narrow-layout sessions drawer. */
+  setSessionsDrawerOpen: AIHubContextValue["setSessionsDrawerOpen"];
 }
 
 /**
@@ -159,5 +165,8 @@ export function useAIHub(): UseAIHubResult {
     lastTurnError: ctx.lastTurnError,
     featureToggles: ctx.featureToggles,
     refreshFeatureToggles: ctx.refreshFeatureToggles,
+    isNarrowLayout: ctx.isNarrowLayout,
+    sessionsDrawerOpen: ctx.sessionsDrawerOpen,
+    setSessionsDrawerOpen: ctx.setSessionsDrawerOpen,
   };
 }

package/src/state/affordances.ts

@@ -47,8 +47,12 @@ export interface AIHubAffordanceFlags {
   sessionsPanelResizable: boolean;
   /** Whether the sessions panel can be collapsed. Default true. */
   sessionsPanelCollapsible: boolean;
+  /** Whether the sessions panel starts collapsed on load. Default **false**. */
+  sessionsPanelDefaultCollapsed: boolean;
   /** Whether the "+ New chat" button renders on the panel. Default true. */
   createSessionButtonEnabled: boolean;
+  /** Whether the last session auto-opens on load (created when none). Default **false**. */
+  loadLastSessionEnabled: boolean;
   /** Whether the input area renders (read-only when false). Default true. */
   userInputEnabled: boolean;
   /** Whether the stop button is exposed while a turn is running. Default true. */
@@ -76,7 +80,9 @@ export const DEFAULT_AFFORDANCE_FLAGS: AIHubAffordanceFlags = Object.freeze({
   sessionsPanelEnabled: true,
   sessionsPanelResizable: true,
   sessionsPanelCollapsible: true,
+  sessionsPanelDefaultCollapsed: false,
   createSessionButtonEnabled: true,
+  loadLastSessionEnabled: false,
   userInputEnabled: true,
   stopButtonEnabled: true,
   toolCallsVisible: true,
@@ -100,7 +106,9 @@ export const FEATURE_TOGGLE_KEY_MAP: ReadonlyArray<
   ["sessions_panel_enabled", "sessionsPanelEnabled"],
   ["sessions_panel_resizable", "sessionsPanelResizable"],
   ["sessions_panel_collapsible", "sessionsPanelCollapsible"],
+  ["sessions_panel_default_collapsed", "sessionsPanelDefaultCollapsed"],
   ["create_session_button_enabled", "createSessionButtonEnabled"],
+  ["load_last_session_enabled", "loadLastSessionEnabled"],
   ["user_input_enabled", "userInputEnabled"],
   ["stop_button_enabled", "stopButtonEnabled"],
   ["tool_calls_visible", "toolCallsVisible"],
@@ -138,7 +146,7 @@ function resolveOne(
 }
 
 /**
- * Composes the three layers into a flat resolved record of all 14
+ * Composes the three layers into a flat resolved record of all 16
  * affordance booleans.
  *
  * Per §8.4: server toggle wins; falling through, the React prop wins;

package/src/stories/_mockProvider.tsx

@@ -114,6 +114,9 @@ export function MockProvider(props: {
     lastTurnError: opts.lastTurnError ?? null,
     featureToggles: opts.featureToggles ?? null,
     refreshFeatureToggles: noopAsync,
+    isNarrowLayout: false,
+    sessionsDrawerOpen: false,
+    setSessionsDrawerOpen: () => undefined,
   };
   return (
     <aiHubContext.Provider value={value}>{props.children}</aiHubContext.Provider>

package/src/styles/CLASSES.md

@@ -26,6 +26,20 @@ properties only, never the attribute directly.
 .data-club-ai-hub[data-theme="dark"] { --dc-aih-bg: #0f1117; }
 ```
 
+### Layout attribute (responsive)
+
+The provider observes the component root's **own width** (ResizeObserver,
+not viewport media queries) and stamps `data-layout="narrow"` or
+`data-layout="wide"` on the same root `<div>`. The breakpoint defaults to
+720px and is overridable via the provider's `narrowLayoutBreakpoint` prop.
+In the narrow layout the sessions panel renders as an overlay drawer, the
+chat header gains a hamburger button, paddings tighten and touch targets
+grow. Wrappers can scope their own mobile brand tweaks the same way:
+
+```css
+.data-club-ai-hub[data-layout="narrow"] .my-brand-footer { flex-direction: column; }
+```
+
 ## CSS custom properties (theming tokens)
 
 Per-customer wrappers override these to brand the UI; they don't fork the
@@ -204,6 +218,10 @@ block and modifier.
 | `data-club-ai-hub__layout--panel-right` | Modifier when the panel is on the right. |
 | `data-club-ai-hub__sessions-panel` | The sessions sidebar. |
 | `data-club-ai-hub__sessions-panel--collapsed` | Collapsed state (thin reveal strip). |
+| `data-club-ai-hub__sessions-panel--drawer` | Narrow-layout overlay-drawer mode (replaces the inline column). |
+| `data-club-ai-hub__sessions-panel--drawer-open` | Drawer slid in / visible. |
+| `data-club-ai-hub__sessions-panel__scrim` | Backdrop scrim behind the open drawer (`data-open` attribute mirrors the state). |
+| `data-club-ai-hub__sessions-panel__drawer-close` | Close (✕) button at the top of the drawer. |
 | `data-club-ai-hub__sessions-panel__custom-header` | Slot wrapper at the top of the panel. |
 | `data-club-ai-hub__sessions-panel__new-button` | "+ New chat" button. |
 | `data-club-ai-hub__sessions-panel__reveal` | Reveal-strip button shown in collapsed state. |
@@ -229,6 +247,7 @@ block and modifier.
 | `data-club-ai-hub__main-column` | Right side of the layout (header + body). |
 | `data-club-ai-hub__main-column__body` | Body region under the chat header. |
 | `data-club-ai-hub__chat-header` | The strip above the messages with back-link + agent name. |
+| `data-club-ai-hub__chat-header__menu` | Hamburger button opening the sessions drawer (narrow layout only). |
 | `data-club-ai-hub__chat-header__back` | `[← Agents]` back-to-picker link. |
 | `data-club-ai-hub__chat-header__title` | Agent display-name text. |
 | `data-club-ai-hub__chat-header__extras` | Slot for `customHeaderContent`. |