@oxy.so/bloom 3.2.1 → 3.3.0

package/docs/adoption-matrix.mdx

@@ -111,7 +111,7 @@ The classification is an EQUALITY in `src/__tests__/adoption-matrix.test.ts`, no
 | `agent-log` | `@oxy.so/bloom/agent-log` + barrel | universal | `agent-log.mdx` | yes | 1 |  |  |  |  |
 | `agent-progress` | `@oxy.so/bloom/agent-progress` + barrel | universal | `agent-progress.mdx` | yes | 1 |  |  |  | reads |
 | `agent-thinking` | `@oxy.so/bloom/agent-thinking` + barrel | universal | `agent-thinking.mdx` | yes | 1 |  |  |  |  |
-| `ai-chat` | `@oxy.so/bloom/ai-chat` + barrel | web fork | `ai-chat.mdx` | yes | 1 |  |  |  | reads |
+| `ai-chat` | `@oxy.so/bloom/ai-chat` + barrel | web fork | `ai-chat.mdx` | yes | 2 |  |  |  | reads |
 | `ai-profile-card` | `@oxy.so/bloom/ai-profile-card` + barrel | universal | `ai-profile-card.mdx` | yes | 1 |  |  |  | reads |
 | `alert-dialog` | `@oxy.so/bloom/alert-dialog` + barrel | web fork | `alert-dialog.mdx` | yes | 1 |  |  |  |  |
 | `animated-check` | `@oxy.so/bloom/animated-check` + barrel | universal | `animated-check.mdx` | yes | 2 |  |  |  |  |
@@ -254,7 +254,7 @@ The classification is an EQUALITY in `src/__tests__/adoption-matrix.test.ts`, no
 | `tenancy` | `@oxy.so/bloom/tenancy` + barrel | universal | `tenancy.mdx` | yes | 3 |  | n/a¹ |  |  |
 | `text-field` | `@oxy.so/bloom/text-field` + barrel | universal | `text-field.mdx` | yes | 10 | reads | reads |  |  |
 | `textarea` | `@oxy.so/bloom/textarea` + barrel | universal | `textarea.mdx` | yes | 4 | reads | reads |  | n/a¹ |
-| `theme` | `@oxy.so/bloom/theme` + barrel | web fork | `theme.mdx` | yes | 242 |  |  | n/a¹ | reads |
+| `theme` | `@oxy.so/bloom/theme` + barrel | web fork | `theme.mdx` | yes | 243 |  |  | n/a¹ | reads |
 | `theme-toggle` | `@oxy.so/bloom/theme-toggle` + barrel | universal | `theme-toggle.mdx` | yes | 1 | n/a¹ |  |  |  |
 | `toast` | `@oxy.so/bloom/toast` + barrel | universal | `toast.mdx` | yes | 17 |  |  |  |  |
 | `tooltip` | `@oxy.so/bloom/tooltip` + barrel | web fork | `tooltip.mdx` | yes | 1 |  |  |  |  |

package/docs/ai-chat.mdx

@@ -14,7 +14,7 @@ The pieces of the AI chat and AI image generation screens. Everything is data an
 | `AiChatMobileHeader` | The in-container header below `xl` (menu button, title, panel button), wired to the shell |
 | `AiChatResizeHandle` | The grip on the chat's right edge |
 | `AiChatContainer` | The chat card: breadcrumb header, thread, composer slot, `AgentThinking` while working |
-| `AiChatThread` | The bottom-anchored, self-following scroll of turns |
+| `AiChatThread` | The bottom-anchored, self-following scroll of turns — with the follow, upward pagination and `ref` a host with history needs |
 | `AiChatUserMessage` / `AiChatAssistantMessage` | The turns, with the staggered blur-in |
 | `AiChatMessageLine`, `AiChatBulletList`, `AiChatBullet`, `AiChatStrong`, `AiChatLinkChip` | A reply's blocks and inline runs |
 | `AiChatFeedbackRow` | Like / dislike / copy with tooltips |
@@ -29,6 +29,7 @@ import { AiChatShell, AiChatContainer, AiChatMobileHeader, AiChatThread, AiChatU
 
 <AiChatShell
   sidebar={<Sidebar {...rail} />}
+  sidebarCollapsed={railOnly}
   mobileSidebar={<Sidebar {...rail} mobile flat />}
   panelLabel="Code"
   panel={(width) => <AiChatCodePanel width={width} code={file} language="tsx" />}>
@@ -37,7 +38,12 @@ import { AiChatShell, AiChatContainer, AiChatMobileHeader, AiChatThread, AiChatU
     title="coding scenario"
     header={<AiChatMobileHeader title="Agentic chat" />}
     working={working}
-    composer={<ComposerLoader active={working}><ComposerPill surface={false} glass={working} /></ComposerLoader>}>
+    background={<YourOwnField />}
+    composer={
+      <ComposerLoader active={working}>
+        <ComposerPill surface={false} glass={working} busy={working} disabled={working} onStop={stop} />
+      </ComposerLoader>
+    }>
     <AiChatThread>
       <AiChatUserMessage>update our colour tokens for dark mode</AiChatUserMessage>
       <AiChatAssistantMessage>Done — the tokens are wired.</AiChatAssistantMessage>
@@ -55,12 +61,34 @@ Give the shell a sized parent — it fills it.
 - **below xl** the panel is a right drawer — min(410, 100% − 12) wide, background-full, p 12, shadow-sidebar, a 40-tall header with the panel name and a close button — over a 40% black backdrop, sliding 300ms. `panel` receives `'100%'` there.
 - **below lg** the `mobileSidebar` rests under the workspace (272 wide, py 12 / pl 6). Opening it slides the whole workspace 272 right and rounds it to 32 while the sidebar scales from 94% and fades in (325ms `cubic-bezier(0.42, 0, 0.58, 1)`); a 10% black / 5% white veil over the workspace closes it. Opening one drawer closes the other.
 - `navOpen` / `panelOpen` are controllable. Reduced motion snaps.
+- **A collapsible rail** — `sidebarWidth` fixes the in-flow column's width, `sidebarCollapsed` narrows it to `collapsedSidebarWidth` (56: one 36px control and its gutters). Without either, the sidebar sizes itself exactly as before. The column snaps between the two widths; whatever animates inside it is the sidebar's own business.
+- **`background` and `surface`** — `background` is any node, drawn above the shell's own background-full and below the sidebar, workspace and drawers; it is never interactive. The workspace paints background-full too, so pass `surface={false}` with it (that drops both) or the layer is covered exactly where the chat sits. When the layer belongs to the chat rather than the page, put it on `AiChatContainer` instead, which is the nearer slot and needs no opt-out.
+- **What the shell publishes** — `useAiChatShell()` returns the shell's state to any descendant: `compact`, `navCollapsed`, `sidebarCollapsed`, `hasNav` / `hasPanel`, `openNav` / `closeNav` / `openPanel`, and **`navPresented`**.
+
+  `navPresented` is the one to guard a nav's accessibility with. Below `lg` a closed drawer stays **mounted** — it is translated offscreen, not removed — so everything inside `mobileSidebar` is still focusable and still read aloud unless its own tree says otherwise. The shell marks its own wrapper `aria-hidden` and `pointerEvents="none"`, which handles the pointer but not the tab order of a host's controls; read `navPresented` and skip them while it is `false`.
 
 ## Container and thread
 
 Radius 24 on background-secondary: the breadcrumb header (px 16 / pt 16, share and more glyphs 8 apart, deepening to black / white on hover), the thread, then the footer (px 10 / pt 12 / pb 10, gap 10) with `AgentThinking` (infinity) while `working` and the `composer`.
 
-The thread scrolls with a thin scrollbar, px 16 / pt 16, turns 12 apart, and is **bottom-anchored**: a short exchange sits just above the composer. It follows the newest content with a smooth scroll whenever it grows.
+`project` is **optional**: a chat that belongs to nothing draws its own crumb alone, with no folder glyph and no empty crumb.
+
+`background` is a layer filling the container, drawn **above its own surface and below every turn, header and composer**, clipped to the radius and never interactive — a host's wallpaper, gradient or animated field goes here rather than behind the container, and nothing has to reach into it. An opaque node needs nothing else; add `surface={false}` when the node is translucent and should show what the container is sitting on instead of background-secondary.
+
+The thread scrolls with a thin scrollbar, px 16 / pt 16, turns 12 apart, and is **bottom-anchored**: a short exchange sits just above the composer. It follows the newest content with a smooth scroll whenever it grows — that is the default, and every prop below is off unless asked for.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `autoFollow` | `boolean` | `true` | Follow the newest turn as the content grows. |
+| `followAnimated` | `boolean` | `true` | `false` for a follow that must not be seen travelling. |
+| `followThreshold` | `number` | — | Follow only from within this many px of the bottom, measured **before** the growth. Omit and every growth follows. |
+| `onStartReached` | `() => void` | — | The reader came near the **top**. A chat pages upward, so this — not `onEndReached` — is its pagination signal. Once per approach; it re-arms when the reader leaves the zone. |
+| `onStartReachedThreshold` | `number` | `300` | How near the top, px. |
+| `maintainStartPosition` | `boolean` | `false` | The growth that answers an `onStartReached` is added to the offset, so a page landing **above** the reader does not move the turn they are on. Inert without `onStartReached` — the thread only anchors growth it asked for. |
+| `onScroll` / `scrollEventThrottle` | | `16` | The raw event. Nothing is attached at all unless something is listening. |
+| `ref` | `AiChatThreadHandle` | — | `scrollToEnd({ animated })`, `scrollToOffset({ offset, animated })`, `getScrollView()`. |
+
+**Not there:** virtualization and `scrollToIndex`. The thread is a `ScrollView`, so a long history is fully mounted, and a host jumping to a cursor measures that turn's row (`onLayout`) and calls `scrollToOffset`. `maintainStartPosition` is the web-safe half of React Native's `maintainVisibleContentPosition`, which react-native-web ignores.
 
 **Hazard (web):** react-native-web gives every view `min-height: 0`, so the usual `flexGrow: 1` + `justifyContent: 'flex-end'` content container stays the viewport's height and its children overflow it instead of scrolling — and `onContentSizeChange` never sees the growth. The thread floors its container at `minHeight: '100%'` on web instead.
 

package/docs/composer-panel.mdx

@@ -34,6 +34,16 @@ import {
 
 The panel is UI and interaction state only. Sending, streaming, uploading and model routing belong to the consumer: `onSubmit` hands you the draft, `disabled` greys send while a turn is in flight, and each attachment's `progress` is yours to drive.
 
+## A turn in flight
+
+`busy` puts the **stop** control where send was; `onStop` is what it calls. It is the one control `disabled` does not reach — `disabled` locks the composer for the whole turn, and cancelling that turn has to stay possible for the whole of it. Enter stops submitting while `busy` too.
+
+```tsx
+<ComposerPill busy={streaming} disabled={streaming} onStop={abort} onSubmit={send} />
+```
+
+Both composers take the pair. `busy` **without** `onStop` draws no stop at all: a labelled control wired to nothing is worse than no control. It is the same shape `AgentChatComposer` already uses.
+
 ## Exports
 
 | Export | What it is |
@@ -42,7 +52,7 @@ The panel is UI and interaction state only. Sending, streaming, uploading and mo
 | `ComposerAttachments` | `ComposerPanel` with a **simulated** sequential upload queue: files arriving with `progress: 0` land one after another. For demos and prototypes — real uploads pass their own `progress` to `ComposerPanel`. |
 | `ModelPicker` | The model picker on its own (provider rail, Quick Search, effort). |
 | `ComposerPanelStatusTab` | The status tab — branch, project folder, context meter. Pass it as `status`. |
-| `ComposerPill` | The AI chat's one-row pill composer: add menu, field, a simple Models + Effort menu, mic and send. |
+| `ComposerPill` | The AI chat's one-row pill composer: add menu, field, a simple Models + Effort menu, mic and send / stop. |
 | `ComposerStatusBar` | The line under the pill: branch, a Local Folders menu, agent mode and the context meter. |
 | `COMPOSER_PANEL_PERMISSIONS`, `COMPOSER_PANEL_ADD_MENU`, `MODEL_PICKER_EFFORT_LEVELS` | The default modes, add-menu rows and effort stops, for extending rather than retyping. |
 
@@ -60,6 +70,8 @@ import { ComposerPill, ComposerStatusBar } from '@oxy.so/bloom/composer-panel';
 
 - **Pill** — 52 tall, full radius, p 8, gap 10, background-primary + shadow-xs. The add disc is a step lighter than the panel's (neutral-100 / dark 700, hovered 200 / 600) and reuses the panel's `AddMenu`. The field is body-regular with an accent-500 caret; its placeholder shortens to `compactPlaceholder` ("Ask me") under 640 wide, and unfocused on web its last 32px fade into the pill.
 - **Model menu** — a 32-tall trigger (radius 12, py 6 / pr 4 / pl 8) with a turning 18px chevron, opening a 266px panel upward: "Models" radio rows (p 8, radius 10, 14px radio, primary-hover while selected), a full-bleed divider (7 above, 12 below), "Effort *value*" (the value blurs in on change), Faster / Smarter and the six-stop slider. Choosing a model closes it; the slider leaves it open. Omit `models` to hide the button.
+- **Model identity** — `models` takes `{ id, name }` entries, the same contract as `ModelPicker`: the menu keys, matches and reports the **id** and only ever draws the `name`. A bare string is shorthand for `{ id: name, name }`, which is why the old `models={['Fable 5']}` form still behaves exactly as it did — but a routing identifier that is matched by display name is a bug waiting for two models to share a label, so pass ids where you have them.
+- **No effort axis** — `effortLevels={[]}` drops the divider and the whole effort half of the panel. A model with no stops gets the model rows alone, not an empty chip over a slider that cannot commit.
 - **Mic and send** — the panel's own controls, 8 apart after a 6px lead.
 - **`surface={false}`** inside a `ComposerLoader`, which paints the pill surface behind its light.
 - **`glass`** — the add, model and mic controls drop their fill, border and shadow over 480ms onto frosted chips (web: 6px saturated backdrop blur, a 12% / dark 6% white tint, a 155° sheen, a 0.3px conic rim; native: the tint). Pair it with an active loader.
@@ -90,6 +102,7 @@ Every text run uses the type ramp (`body-medium`, `body-2-medium`, `body-regular
 - **Add** — the plus turns 45° while open. Groups of rows (`addMenu`), each with a 20px icon or 24px artwork and an inline muted description. `onAddMenuSelect(rowId)` fires and the menu closes. `addMenu={[]}` hides the button.
 - **Permissions** — a pill that paints only on hover, press or while open; the panel lists `permissions` as radios (`aria-checked`). `onLearnMore` shows "Learn more" in the header.
 - **Model picker** — the rail browses providers (tabs, `aria-selected`) and always reopens on the chosen model's provider, keeping its mark in view. "Quick Search" (or `/` and ⌘K on web) filters every lineup; Escape clears the query, then leaves search. The selected row carries the effort chip, which opens the effort panel. Pass `providers` to `ComposerPanel` to show it.
+- **Effort is a separate axis, and an optional one.** `effortLevels={[]}` drops the chip entirely — models whose deployments cannot agree on a level have no effort to offer, and a chip over an uncommittable slider is a control wired to nothing. `effort={null}` is the other half: **no stop chosen**, the parameter left out, the model deciding. The chip then reads `labels.effortAuto` ("Auto"), the fill is empty, every tick is faded and the thumb is drawn hollow and dashed, so an absent choice never looks like the first stop. The picker reports only stops a reader actually chose — it has no way back to `null`, which stays the caller's to hold.
 
 All three panels open upward and hang from the trigger's left edge. On **web** they are `floating/FloatingPanel` on its menu surface — a 150ms fade + scale + blur, non-modal (except the model picker, which catches the outside press so a press inside its separately-portaled effort panel is not read as "outside"). On **native** each is a transparent `Modal` placed against the trigger's `measureInWindow` box (flipped when it does not fit, clamped 8px inside the window), not a bottom sheet: the effort panel opens from inside the picker, and nested `Modal`s stack where sheets do not.
 
@@ -126,7 +139,7 @@ interface ModelPickerProvider {
 
 ## State
 
-Everything is controllable and works uncontrolled: `value`/`defaultValue`, `permission`/`defaultPermission`, `model`/`defaultModel`, `effort`/`defaultEffort`, `listening`/`defaultListening`. Enter submits on web (Shift+Enter breaks the line; IME composition is respected); on native the send button submits. An uncontrolled draft clears after submit.
+Everything is controllable and works uncontrolled: `value`/`defaultValue`, `permission`/`defaultPermission`, `model`/`defaultModel`, `effort`/`defaultEffort`, `listening`/`defaultListening`. Enter submits on web (Shift+Enter breaks the line; IME composition is respected) unless `busy`; on native the send button submits. An uncontrolled draft clears after submit.
 
 ## Colours
 
@@ -155,7 +168,7 @@ State colours 150ms; chevrons and the plus 200ms; mic ↔ equalizer crossfade 28
 
 ## Accessibility
 
-Every control is named: the triggers announce their current value ("Permission: Auto", "Models: GPT-5.6 Mini", "Effort: Medium") with `aria-expanded`; permission modes and model rows are radios (`aria-checked` + `accessibilityState`); rail marks are tabs; the mic is a toggle (`aria-pressed`); send carries `aria-disabled`; the effort slider is `adjustable` with flat `aria-value*`, `aria-valuetext` (the level name), increment/decrement actions, and arrow/Home/End keys on web.
+Every control is named: the triggers announce their current value ("Permission: Auto", "Models: GPT-5.6 Mini", "Effort: Medium", "Effort: Auto" with no stop chosen) with `aria-expanded`; stop is named "Stop generating" and carries no `aria-disabled`; permission modes and model rows are radios (`aria-checked` + `accessibilityState`); rail marks are tabs; the mic is a toggle (`aria-pressed`); send carries `aria-disabled`; the effort slider is `adjustable` with flat `aria-value*`, `aria-valuetext` (the level name, or the "Auto" label with no stop chosen — where `aria-valuenow` is omitted rather than guessed), increment/decrement actions, and arrow/Home/End keys on web.
 
 ## Props
 
@@ -163,7 +176,8 @@ Every control is named: the triggers announce their current value ("Permission:
 |------|------|---------|-------------|
 | `value` / `defaultValue` / `onValueChange` | `string` | `''` | The draft. |
 | `onSubmit` | `(value) => void` | — | Send button and Enter (web). |
-| `disabled` | `boolean` | `false` | Greys send. |
+| `onStop` / `busy` | `() => void` / `boolean` | — / `false` | Send becomes stop, outside `disabled`'s reach. No handler, no stop. |
+| `disabled` | `boolean` | `false` | Greys send. Never the stop control. |
 | `placeholder` | `string` | `'Hi, what do you need today?'` | |
 | `permissions` | `ComposerPanelPermissionOption[]` | the default four | `[]` hides the picker. |
 | `permission` / `defaultPermission` / `onPermissionChange` | `string` | first mode | |
@@ -171,8 +185,9 @@ Every control is named: the triggers announce their current value ("Permission:
 | `addMenu` / `onAddMenuSelect` | `ComposerPanelAddMenuGroup[]` / `(id) => void` | Add + Plugins | `[]` hides the button. |
 | `providers` | `ModelPickerProvider[]` | — | Shows the model picker. |
 | `model` / `defaultModel` / `onModelChange` | `string` | first model | |
-| `effort` / `defaultEffort` / `onEffortChange` | `number` | `1` | Index into `effortLevels`. |
-| `effortLevels` | `string[]` | the default six | |
+| `effort` / `defaultEffort` | `number \| null` | `1` | Index into `effortLevels`; `null` is "no stop chosen". |
+| `onEffortChange` | `(effort: number) => void` | — | Only ever a stop a reader chose. |
+| `effortLevels` | `string[]` | the default six | `[]` drops the effort axis. |
 | `listening` / `defaultListening` / `onListeningChange` | `boolean` | `false` | Voice input toggle. |
 | `attachments` / `onRemoveAttachment` | `ComposerPanelAttachment[]` / `(id) => void` | — | |
 | `status` | `ReactNode` | — | Usually `<ComposerPanelStatusTab />`. |
@@ -180,4 +195,6 @@ Every control is named: the triggers announce their current value ("Permission:
 | `labels`, `modelPickerLabels` | objects | English | Localisation. |
 | `style`, `testID` | | | |
 
+`ComposerPill` takes the same draft, add-menu, voice and `onStop` / `busy` props, plus `models` (`string | { id, name }` entries), `model` / `defaultModel` / `onModelChange` (by **id**), the effort trio, `effortLevels`, `compactPlaceholder`, `surface` and `glass`.
+
 `ComposerAttachments` takes the same props plus `attachments` (required), `uploadDuration` (1100), `uploadGap` (240), `onAttachmentsChange`, `onUploadComplete`, `onAllUploaded`. `ModelPicker` takes `providers`, `value`/`defaultValue`/`onValueChange`, the effort trio, `effortLevels`, `labels`, `style`, `testID`.

package/lib/commonjs/ai-chat/AiChatContainer.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AiChatContainer = AiChatContainer;
-exports.AiChatThread = AiChatThread;
+exports.AiChatThread = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _index = require("../agent-thinking/index.js");
@@ -26,6 +26,9 @@ const DEFAULT_LABELS = {
  * The AI chat's centre column: the centre column of the AI chat template.
  *
  *   section   fills its parent, radius 24, background-secondary, clipped
+ *   layer     the `background` slot, filling the section above its own paint
+ *             and below everything else, clipped to the same radius;
+ *             `surface={false}` drops that paint
  *   header    px 16 / pt 16, gap 8: the project › chat breadcrumb (flex 1) and
  *             the 16px share / more glyphs, 8 apart
  *   thread    the `children` — usually an `AiChatThread`
@@ -33,6 +36,9 @@ const DEFAULT_LABELS = {
  *             while `working`, then the `composer`
  *
  * `header` renders above all of it: the shell's `AiChatMobileHeader`.
+ *
+ * `project` is optional: without one the breadcrumb is the chat's own crumb
+ * alone, since a chat that belongs to nothing must not have to invent a folder.
  */
 function AiChatContainer({
   project,
@@ -46,6 +52,8 @@ function AiChatContainer({
   composer,
   working = false,
   workingLabel,
+  background,
+  surface = true,
   labels,
   style,
   testID
@@ -65,9 +73,19 @@ function AiChatContainer({
       flexDirection: 'column',
       overflow: 'hidden',
       borderRadius: _shared.CONTAINER_RADIUS,
-      backgroundColor: palette.secondary
+      backgroundColor: surface ? palette.secondary : 'transparent'
     }, style],
-    children: [header, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    children: [background ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      pointerEvents: "none",
+      style: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0
+      },
+      children: background
+    }) : null, header, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: {
         width: '100%',
         flexDirection: 'row',
@@ -85,7 +103,7 @@ function AiChatContainer({
         },
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index2.Breadcrumb, {
           accessibilityLabel: l.breadcrumb,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.BreadcrumbItem, {
+          children: [project === undefined ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.BreadcrumbItem, {
             icon: projectIcon,
             onPress: onProjectPress,
             children: project
@@ -138,29 +156,119 @@ function AiChatContainer({
 /**
  * The thread: the scrolling conversation, anchored to the bottom
  * so a short exchange sits just above the composer and grows upward — px 16 /
- * pt 16, turns 12 apart, a thin scrollbar. It follows the newest turn with a
- * smooth scroll whenever the content grows.
+ * pt 16, turns 12 apart, a thin scrollbar.
+ *
+ * It follows the newest turn with a smooth scroll whenever the content grows.
+ * That is the default and nothing else changes it; the timeline props are the
+ * ones a host with history needs and are each off unless asked for:
+ *
+ *   autoFollow / followAnimated / followThreshold   whether, how, and from how
+ *     close to the bottom the follow happens
+ *   onStartReached                                  a chat pages UPWARD; this
+ *     fires near the TOP, once per approach, re-arming when the reader leaves
+ *   maintainStartPosition                           the growth that answers an
+ *     `onStartReached` is added to the offset, so a page landing above the
+ *     reader does not move the turn they are reading
+ *   ref (`AiChatThreadHandle`)                      scrollToEnd /
+ *     scrollToOffset / the ScrollView, for a cursor jump or a restore
+ *
+ * There is no virtualization and no `scrollToIndex`: a host jumping to a turn
+ * measures its row (`onLayout`) and calls `scrollToOffset`.
  */
-function AiChatThread({
+const AiChatThread = exports.AiChatThread = /*#__PURE__*/(0, _react.forwardRef)(function AiChatThread({
   children,
+  autoFollow = true,
+  followAnimated = true,
+  followThreshold,
+  onStartReached,
+  onStartReachedThreshold = 300,
+  maintainStartPosition = false,
+  onScroll,
+  scrollEventThrottle = 16,
   style,
   testID
-}) {
+}, ref) {
   const scrollRef = (0, _react.useRef)(null);
   const lastHeight = (0, _react.useRef)(0);
+  const offset = (0, _react.useRef)(0);
+  const viewport = (0, _react.useRef)(0);
+  /** An `onStartReached` is out and its page has not landed yet. */
+  const pageOut = (0, _react.useRef)(false);
+  /** The reader has left the top zone, so the next approach may fire again. */
+  const startArmed = (0, _react.useRef)(true);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    scrollToEnd: options => scrollRef.current?.scrollToEnd({
+      animated: options?.animated ?? true
+    }),
+    scrollToOffset: ({
+      offset: y,
+      animated = false
+    }) => scrollRef.current?.scrollTo({
+      y,
+      animated
+    }),
+    getScrollView: () => scrollRef.current
+  }), []);
+  const listening = !!onScroll || !!onStartReached || followThreshold !== undefined || maintainStartPosition;
+  const handleScroll = (0, _react.useCallback)(event => {
+    const {
+      contentOffset,
+      layoutMeasurement
+    } = event.nativeEvent;
+    offset.current = contentOffset.y;
+    viewport.current = layoutMeasurement.height;
+    if (onStartReached) {
+      if (contentOffset.y <= onStartReachedThreshold) {
+        if (startArmed.current) {
+          startArmed.current = false;
+          pageOut.current = true;
+          onStartReached();
+        }
+      } else {
+        startArmed.current = true;
+      }
+    }
+    onScroll?.(event);
+  }, [onScroll, onStartReached, onStartReachedThreshold]);
+  const onLayout = (0, _react.useCallback)(event => {
+    viewport.current = event.nativeEvent.layout.height;
+  }, []);
   const onContentSizeChange = (0, _react.useCallback)((_width, height) => {
-    const grew = height > lastHeight.current + 0.5;
-    const first = lastHeight.current === 0;
+    const previous = lastHeight.current;
+    const grew = height > previous + 0.5;
+    const first = previous === 0;
     lastHeight.current = height;
-    if (grew && !first) scrollRef.current?.scrollToEnd({
-      animated: true
+    if (!grew || first) return;
+
+    // A page landing above the reader: keep the turn they are on where it is.
+    if (maintainStartPosition && pageOut.current) {
+      pageOut.current = false;
+      scrollRef.current?.scrollTo({
+        y: offset.current + (height - previous),
+        animated: false
+      });
+      return;
+    }
+    pageOut.current = false;
+    if (!autoFollow) return;
+    if (followThreshold !== undefined) {
+      // Measured against the height BEFORE the growth: was the reader near
+      // the bottom when this arrived?
+      const fromBottom = previous - offset.current - viewport.current;
+      if (fromBottom > followThreshold) return;
+    }
+    scrollRef.current?.scrollToEnd({
+      animated: followAnimated
     });
-  }, []);
+  }, [autoFollow, followAnimated, followThreshold, maintainStartPosition]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
     ref: scrollRef,
     testID: testID,
     ...(0, _shared.dataHook)('bloomAiChatScroll', 'thin'),
     onContentSizeChange: onContentSizeChange,
+    onLayout: onLayout,
+    onScroll: listening ? handleScroll : undefined,
+    scrollEventThrottle: listening ? scrollEventThrottle : undefined,
     style: [{
       minHeight: 0,
       width: '100%',
@@ -185,5 +293,5 @@ function AiChatThread({
     },
     children: children
   });
-}
+});
 //# sourceMappingURL=AiChatContainer.js.map

package/lib/commonjs/ai-chat/AiChatContainer.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_index","_index2","_RiFolderLine","_RiMoreFill","_RiShare2Line","_AiChatControls","_shared","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DEFAULT_LABELS","breadcrumb","share","more","AiChatContainer","project","title","projectIcon","RiFolderLine","onProjectPress","onShare","onMore","header","children","composer","working","workingLabel","labels","style","testID","useAiChatWebCss","palette","useAiChatPalette","l","useMemo","jsxs","View","height","minWidth","flex","flexDirection","overflow","borderRadius","CONTAINER_RADIUS","backgroundColor","secondary","width","alignItems","justifyContent","gap","paddingLeft","paddingRight","paddingTop","jsx","Breadcrumb","accessibilityLabel","BreadcrumbItem","icon","onPress","current","flexShrink","GlyphAction","RiShare2Line","label","RiMoreFill","paddingBottom","AgentThinking","variant","AiChatThread","scrollRef","useRef","lastHeight","onContentSizeChange","useCallback","_width","grew","first","scrollToEnd","animated","ScrollView","ref","dataHook","minHeight","contentContainerStyle","IS_WEB","flexGrow"],"sourceRoot":"../../../src","sources":["ai-chat/AiChatContainer.tsx"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAEA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AACA,IAAAK,WAAA,GAAAL,OAAA;AACA,IAAAM,aAAA,GAAAN,OAAA;AACA,IAAAO,eAAA,GAAAP,OAAA;AACA,IAAAQ,OAAA,GAAAR,OAAA;AAAiG,IAAAS,WAAA,GAAAT,OAAA;AAAA,SAAAD,wBAAAW,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAb,uBAAA,YAAAA,CAAAW,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAGjG,MAAMkB,cAAc,GAAG;EACrBC,UAAU,EAAE,eAAe;EAC3BC,KAAK,EAAE,YAAY;EACnBC,IAAI,EAAE;AACR,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,eAAeA,CAAC;EAC9BC,OAAO;EACPC,KAAK;EACLC,WAAW,GAAGC,0BAAY;EAC1BC,cAAc;EACdC,OAAO;EACPC,MAAM;EACNC,MAAM;EACNC,QAAQ;EACRC,QAAQ;EACRC,OAAO,GAAG,KAAK;EACfC,YAAY;EACZC,MAAM;EACNC,KAAK;EACLC;AACoB,CAAC,EAAE;EACvB,IAAAC,uBAAe,EAAC,CAAC;EACjB,MAAMC,OAAO,GAAG,IAAAC,wBAAgB,EAAC,CAAC;EAClC,MAAMC,CAAC,GAAG,IAAAC,cAAO,EAAC,OAAO;IAAE,GAAGxB,cAAc;IAAE,GAAGiB;EAAO,CAAC,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC;EACrE,oBACE,IAAArC,WAAA,CAAA6C,IAAA,EAACrD,YAAA,CAAAsD,IAAI;IACHP,MAAM,EAAEA,MAAO;IACfD,KAAK,EAAE,CACL;MACES,MAAM,EAAE,MAAM;MACdC,QAAQ,EAAE,CAAC;MACXC,IAAI,EAAE,CAAC;MACPC,aAAa,EAAE,QAAQ;MACvBC,QAAQ,EAAE,QAAQ;MAClBC,YAAY,EAAEC,wBAAgB;MAC9BC,eAAe,EAAEb,OAAO,CAACc;IAC3B,CAAC,EACDjB,KAAK,CACL;IAAAL,QAAA,GACDD,MAAM,eACP,IAAAhC,WAAA,CAAA6C,IAAA,EAACrD,YAAA,CAAAsD,IAAI;MACHR,KAAK,EAAE;QACLkB,KAAK,EAAE,MAAM;QACbN,aAAa,EAAE,KAAK;QACpBO,UAAU,EAAE,QAAQ;QACpBC,cAAc,EAAE,eAAe;QAC/BC,GAAG,EAAE,CAAC;QACNC,WAAW,EAAE,EAAE;QACfC,YAAY,EAAE,EAAE;QAChBC,UAAU,EAAE;MACd,CAAE;MAAA7B,QAAA,gBACF,IAAAjC,WAAA,CAAA+D,GAAA,EAACvE,YAAA,CAAAsD,IAAI;QAACR,KAAK,EAAE;UAAEU,QAAQ,EAAE,CAAC;UAAEC,IAAI,EAAE;QAAE,CAAE;QAAAhB,QAAA,eACpC,IAAAjC,WAAA,CAAA6C,IAAA,EAACnD,OAAA,CAAAsE,UAAU;UAACC,kBAAkB,EAAEtB,CAAC,CAACtB,UAAW;UAAAY,QAAA,gBAC3C,IAAAjC,WAAA,CAAA+D,GAAA,EAACrE,OAAA,CAAAwE,cAAc;YAACC,IAAI,EAAExC,WAAY;YAACyC,OAAO,EAAEvC,cAAe;YAAAI,QAAA,EACxDR;UAAO,CACM,CAAC,eACjB,IAAAzB,WAAA,CAAA+D,GAAA,EAACrE,OAAA,CAAAwE,cAAc;YAACG,OAAO;YAAApC,QAAA,EAAEP;UAAK,CAAiB,CAAC;QAAA,CACtC;MAAC,CACT,CAAC,eACP,IAAA1B,WAAA,CAAA6C,IAAA,EAACrD,YAAA,CAAAsD,IAAI;QAACR,KAAK,EAAE;UAAEgC,UAAU,EAAE,CAAC;UAAEpB,aAAa,EAAE,KAAK;UAAEO,UAAU,EAAE,QAAQ;UAAEE,GAAG,EAAE;QAAE,CAAE;QAAA1B,QAAA,gBACjF,IAAAjC,WAAA,CAAA+D,GAAA,EAACjE,eAAA,CAAAyE,WAAW;UAACJ,IAAI,EAAEK,0BAAa;UAACC,KAAK,EAAE9B,CAAC,CAACrB,KAAM;UAAC8C,OAAO,EAAEtC,OAAQ;UAACW,OAAO,EAAEA;QAAQ,CAAE,CAAC,eACvF,IAAAzC,WAAA,CAAA+D,GAAA,EAACjE,eAAA,CAAAyE,WAAW;UAACJ,IAAI,EAAEO,sBAAW;UAACD,KAAK,EAAE9B,CAAC,CAACpB,IAAK;UAAC6C,OAAO,EAAErC,MAAO;UAACU,OAAO,EAAEA;QAAQ,CAAE,CAAC;MAAA,CAC/E,CAAC;IAAA,CACH,CAAC,EAENR,QAAQ,eAET,IAAAjC,WAAA,CAAA6C,IAAA,EAACrD,YAAA,CAAAsD,IAAI;MAACR,KAAK,EAAE;QAAEkB,KAAK,EAAE,MAAM;QAAEN,aAAa,EAAE,QAAQ;QAAES,GAAG,EAAE,EAAE;QAAEC,WAAW,EAAE,EAAE;QAAEC,YAAY,EAAE,EAAE;QAAEC,UAAU,EAAE,EAAE;QAAEa,aAAa,EAAE;MAAG,CAAE;MAAA1C,QAAA,GACpIE,OAAO,gBAAG,IAAAnC,WAAA,CAAA+D,GAAA,EAACtE,MAAA,CAAAmF,aAAa;QAACC,OAAO,EAAC,UAAU;QAACJ,KAAK,EAAErC,YAAa;QAACE,KAAK,EAAE;UAAEsB,WAAW,EAAE,CAAC;UAAEC,YAAY,EAAE;QAAE;MAAE,CAAE,CAAC,GAAG,IAAI,EACtH3B,QAAQ;IAAA,CACL,CAAC;EAAA,CACH,CAAC;AAEX;;AAEA;AACA;AACA;AACA;AACA;AACA;AACO,SAAS4C,YAAYA,CAAC;EAAE7C,QAAQ;EAAEK,KAAK;EAAEC;AAA0B,CAAC,EAAE;EAC3E,MAAMwC,SAAS,GAAG,IAAAC,aAAM,EAAa,IAAI,CAAC;EAC1C,MAAMC,UAAU,GAAG,IAAAD,aAAM,EAAC,CAAC,CAAC;EAC5B,MAAME,mBAAmB,GAAG,IAAAC,kBAAW,EAAC,CAACC,MAAc,EAAErC,MAAc,KAAK;IAC1E,MAAMsC,IAAI,GAAGtC,MAAM,GAAGkC,UAAU,CAACZ,OAAO,GAAG,GAAG;IAC9C,MAAMiB,KAAK,GAAGL,UAAU,CAACZ,OAAO,KAAK,CAAC;IACtCY,UAAU,CAACZ,OAAO,GAAGtB,MAAM;IAC3B,IAAIsC,IAAI,IAAI,CAACC,KAAK,EAAEP,SAAS,CAACV,OAAO,EAAEkB,WAAW,CAAC;MAAEC,QAAQ,EAAE;IAAK,CAAC,CAAC;EACxE,CAAC,EAAE,EAAE,CAAC;EACN,oBACE,IAAAxF,WAAA,CAAA+D,GAAA,EAACvE,YAAA,CAAAiG,UAAU;IACTC,GAAG,EAAEX,SAAU;IACfxC,MAAM,EAAEA,MAAO;IAAA,GACX,IAAAoD,gBAAQ,EAAC,mBAAmB,EAAE,MAAM,CAAC;IACzCT,mBAAmB,EAAEA,mBAAoB;IACzC5C,KAAK,EAAE,CAAC;MAAEsD,SAAS,EAAE,CAAC;MAAEpC,KAAK,EAAE,MAAM;MAAEP,IAAI,EAAE;IAAE,CAAC,EAAEX,KAAK,CAAE;IACzDuD,qBAAqB,EAAE;MACrB;MACA;MACA;MACA,IAAIC,cAAM,GAAG;QAAEF,SAAS,EAAE,MAAM;QAAEtB,UAAU,EAAE;MAAE,CAAC,GAAG;QAAEyB,QAAQ,EAAE;MAAE,CAAC,CAAC;MACpE7C,aAAa,EAAE,QAAQ;MACvBQ,cAAc,EAAE,UAAU;MAC1BC,GAAG,EAAE,EAAE;MACPC,WAAW,EAAE,EAAE;MACfC,YAAY,EAAE,EAAE;MAChBC,UAAU,EAAE;IACd,CAAE;IAAA7B,QAAA,EACDA;EAAQ,CACC,CAAC;AAEjB","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_index","_index2","_RiFolderLine","_RiMoreFill","_RiShare2Line","_AiChatControls","_shared","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DEFAULT_LABELS","breadcrumb","share","more","AiChatContainer","project","title","projectIcon","RiFolderLine","onProjectPress","onShare","onMore","header","children","composer","working","workingLabel","background","surface","labels","style","testID","useAiChatWebCss","palette","useAiChatPalette","l","useMemo","jsxs","View","height","minWidth","flex","flexDirection","overflow","borderRadius","CONTAINER_RADIUS","backgroundColor","secondary","jsx","pointerEvents","position","top","left","right","bottom","width","alignItems","justifyContent","gap","paddingLeft","paddingRight","paddingTop","Breadcrumb","accessibilityLabel","undefined","BreadcrumbItem","icon","onPress","current","flexShrink","GlyphAction","RiShare2Line","label","RiMoreFill","paddingBottom","AgentThinking","variant","AiChatThread","exports","forwardRef","autoFollow","followAnimated","followThreshold","onStartReached","onStartReachedThreshold","maintainStartPosition","onScroll","scrollEventThrottle","ref","scrollRef","useRef","lastHeight","offset","viewport","pageOut","startArmed","useImperativeHandle","scrollToEnd","options","animated","scrollToOffset","y","scrollTo","getScrollView","listening","handleScroll","useCallback","event","contentOffset","layoutMeasurement","nativeEvent","onLayout","layout","onContentSizeChange","_width","previous","grew","first","fromBottom","ScrollView","dataHook","minHeight","contentContainerStyle","IS_WEB","flexGrow"],"sourceRoot":"../../../src","sources":["ai-chat/AiChatContainer.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/ai-chat/AiChatShell.js

@@ -24,6 +24,8 @@ const REVEAL_MS = 325;
 const REVEAL_OFFSET = 272;
 const DRAWER_EASE = _reactNativeReanimated.Easing.bezier(0.4, 0, 0.2, 1);
 const DRAWER_MS = 300;
+/** An icon-only rail: one 36px control plus its 10px gutters. */
+const COLLAPSED_SIDEBAR_WIDTH = 56;
 const DEFAULT_LABELS = {
   openNavigation: 'Open navigation',
   closeNavigation: 'Close navigation',
@@ -255,7 +257,9 @@ function AiChatMobileHeader({
  * The AI chat shell: the full AI chat
  * screen on background-full with a 12px frame.
  *
- *   lg and up   the floating `sidebar` in flow, 16 from the workspace
+ *   lg and up   the floating `sidebar` in flow, 16 from the workspace, at
+ *               `sidebarWidth` (or its own width) — `sidebarCollapsed` narrows
+ *               the column to `collapsedSidebarWidth` (56) for an icon rail
  *   workspace   the chat container flexing, then (xl and up) the `panel` 12 to
  *               its right at `panelWidth`; the resize grip on the chat's right
  *               edge trades width between them, clamped 320–560
@@ -270,9 +274,19 @@ function AiChatMobileHeader({
  *               over the workspace closes it
  *
  * The chat container reads the drawer controls through `AiChatMobileHeader`.
+ * Everything the shell knows — including `navPresented`, which says whether the
+ * nav is on screen at all — is published to any descendant through
+ * `useAiChatShell()`.
+ *
+ * `background` is a layer drawn above the shell's own paint and below all of
+ * it; with `surface={false}` neither the root nor the workspace paints, so the
+ * layer reaches the chat.
  */
 function AiChatShell({
   sidebar,
+  sidebarWidth,
+  sidebarCollapsed = false,
+  collapsedSidebarWidth = COLLAPSED_SIDEBAR_WIDTH,
   mobileSidebar,
   children,
   panel,
@@ -285,6 +299,8 @@ function AiChatShell({
   onNavOpenChange,
   panelOpen: panelOpenProp,
   onPanelOpenChange,
+  background,
+  surface = true,
   labels,
   style,
   testID
@@ -375,10 +391,14 @@ function AiChatShell({
     navCollapsed: !navInFlow,
     hasNav: !!mobileSidebar,
     hasPanel: !!panel,
+    // In flow it is always on screen; as a drawer, only while it is open.
+    navPresented: navInFlow ? !!sidebar : navOpen,
+    sidebarCollapsed,
     openNav: () => {
       setPanelOpen(false);
       setNavOpen(true);
     },
+    closeNav: () => setNavOpen(false),
     openPanel: () => {
       setNavOpen(false);
       setPanelOpen(true);
@@ -389,7 +409,7 @@ function AiChatShell({
       openNavigation: l.openNavigation,
       openPanel: l.openPanel
     }
-  }), [wide, navInFlow, mobileSidebar, panel, setPanelOpen, setNavOpen, panelLabel, panelIcon, l]);
+  }), [wide, navInFlow, navOpen, sidebar, sidebarCollapsed, mobileSidebar, panel, setPanelOpen, setNavOpen, panelLabel, panelIcon, l]);
   const rootStyle = {
     position: 'relative',
     width: '100%',
@@ -398,7 +418,7 @@ function AiChatShell({
     gap: 16,
     overflow: 'hidden',
     padding: 12,
-    backgroundColor: palette.full
+    backgroundColor: surface ? palette.full : 'transparent'
   };
   const veil = palette.isDark ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.1)';
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.AiChatShellContext.Provider, {
@@ -408,7 +428,17 @@ function AiChatShell({
       testID: testID,
       onLayout: event => setShellWidth(event.nativeEvent.layout.width),
       style: [rootStyle, style],
-      children: [!navInFlow && mobileSidebar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      children: [background ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        pointerEvents: "none",
+        style: {
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0
+        },
+        children: background
+      }) : null, !navInFlow && mobileSidebar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         "aria-hidden": !navOpen,
         pointerEvents: navOpen ? 'box-none' : 'none',
         style: {
@@ -435,7 +465,17 @@ function AiChatShell({
         style: {
           position: 'relative',
           zIndex: 10,
-          height: '100%'
+          height: '100%',
+          // Untouched unless the host asked for a width: the sidebar has
+          // always sized itself.
+          ...(sidebarCollapsed ? {
+            width: collapsedSidebarWidth,
+            flexShrink: 0,
+            overflow: 'hidden'
+          } : sidebarWidth !== undefined ? {
+            width: sidebarWidth,
+            flexShrink: 0
+          } : null)
         },
         children: sidebar
       }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
@@ -447,7 +487,7 @@ function AiChatShell({
           flexDirection: 'column',
           gap: 8,
           overflow: 'hidden',
-          backgroundColor: palette.full
+          backgroundColor: surface ? palette.full : 'transparent'
         }, navInFlow ? null : workspaceStyle],
         children: [!navInFlow ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
           pointerEvents: navOpen ? 'auto' : 'none',