@oxy.so/bloom 5.1.1 → 5.3.0

package/src/agent-limits-card/messages.ts

@@ -1,4 +1,4 @@
-import type { MessageCatalog } from '../locale/messages';
+import { defineMessages, type MessageCatalog } from '../locale/messages';
 
 /**
  * Every fixed string `AgentLimitsCard` draws or announces, in each Bloom
@@ -11,20 +11,4 @@ export interface AgentLimitsCardMessages {
   managePlan: string;
 }
 
-export const AGENT_LIMITS_CARD_MESSAGES: MessageCatalog<AgentLimitsCardMessages> = {
-  en: { contextWindow: 'Context window', freeSpace: 'Free space', planUsageLimits: 'Plan usage limits', managePlan: 'Manage plan' },
-  es: { contextWindow: 'Ventana de contexto', freeSpace: 'Espacio libre', planUsageLimits: 'Límites de uso del plan', managePlan: 'Gestionar plan' },
-  ca: { contextWindow: 'Finestra de context', freeSpace: 'Espai lliure', planUsageLimits: 'Límits d’ús del pla', managePlan: 'Gestiona el pla' },
-  de: { contextWindow: 'Kontextfenster', freeSpace: 'Freier Platz', planUsageLimits: 'Nutzungslimits des Tarifs', managePlan: 'Tarif verwalten' },
-  fr: { contextWindow: 'Fenêtre de contexte', freeSpace: 'Espace libre', planUsageLimits: 'Limites d’utilisation de l’abonnement', managePlan: 'Gérer l’abonnement' },
-  it: { contextWindow: 'Finestra di contesto', freeSpace: 'Spazio libero', planUsageLimits: 'Limiti di utilizzo del piano', managePlan: 'Gestisci piano' },
-  pt: { contextWindow: 'Janela de contexto', freeSpace: 'Espaço livre', planUsageLimits: 'Limites de uso do plano', managePlan: 'Gerenciar plano' },
-  ru: { contextWindow: 'Контекстное окно', freeSpace: 'Свободно', planUsageLimits: 'Лимиты тарифа', managePlan: 'Управление тарифом' },
-  tr: { contextWindow: 'Bağlam penceresi', freeSpace: 'Boş alan', planUsageLimits: 'Plan kullanım sınırları', managePlan: 'Planı yönet' },
-  ja: { contextWindow: 'コンテキストウィンドウ', freeSpace: '空き容量', planUsageLimits: 'プランの利用上限', managePlan: 'プランを管理' },
-  zh: { contextWindow: '上下文窗口', freeSpace: '可用空间', planUsageLimits: '套餐用量限制', managePlan: '管理套餐' },
-  ar: { contextWindow: 'نافذة السياق', freeSpace: 'المساحة الفارغة', planUsageLimits: 'حدود استخدام الخطة', managePlan: 'إدارة الخطة' },
-  hi: { contextWindow: 'कॉन्टेक्स्ट विंडो', freeSpace: 'खाली जगह', planUsageLimits: 'प्लान की उपयोग सीमाएं', managePlan: 'प्लान प्रबंधित करें' },
-  bn: { contextWindow: 'কনটেক্সট উইন্ডো', freeSpace: 'খালি জায়গা', planUsageLimits: 'প্ল্যানের ব্যবহারের সীমা', managePlan: 'প্ল্যান পরিচালনা করুন' },
-  id: { contextWindow: 'Jendela konteks', freeSpace: 'Ruang kosong', planUsageLimits: 'Batas penggunaan paket', managePlan: 'Kelola paket' },
-};
+export const AGENT_LIMITS_CARD_MESSAGES: MessageCatalog<AgentLimitsCardMessages> = defineMessages<AgentLimitsCardMessages>('AGENT_LIMITS_CARD_MESSAGES', { contextWindow: 'Context window', freeSpace: 'Free space', planUsageLimits: 'Plan usage limits', managePlan: 'Manage plan' });

package/src/agent-progress/messages.ts

@@ -1,4 +1,4 @@
-import type { MessageCatalog } from '../locale/messages';
+import { defineMessages, type MessageCatalog } from '../locale/messages';
 import { plural } from '../locale/plural';
 
 /**
@@ -14,203 +14,16 @@ export interface AgentProgressMessages {
   defaultSteps: readonly string[];
 }
 
-export const AGENT_PROGRESS_MESSAGES: MessageCatalog<AgentProgressMessages> = {
-  en: {
-    stepsLeft: (n) => plural('en', n, { one: '{n} step left', other: '{n} steps left' }),
-    allCompleted: 'All steps completed',
-    minimize: 'Minimize steps',
-    expand: 'Expand steps',
-    defaultSteps: [
-      'Read project files',
-      'Update and install light mode tokens',
-      'Implement dark mode tokens',
-      'Add reusable registered theme toggle',
-      'Run registry, lint and production build',
-    ],
-  },
-  es: {
-    stepsLeft: (n) => plural('es', n, { one: 'Queda {n} paso', other: 'Quedan {n} pasos' }),
-    allCompleted: 'Todos los pasos completados',
-    minimize: 'Minimizar pasos',
-    expand: 'Expandir pasos',
-    defaultSteps: [
-      'Leer los archivos del proyecto',
-      'Actualizar e instalar los tokens del modo claro',
-      'Implementar los tokens del modo oscuro',
-      'Añadir un selector de tema reutilizable y registrado',
-      'Ejecutar el registro, el lint y la compilación de producción',
-    ],
-  },
-  ca: {
-    stepsLeft: (n) => plural('ca', n, { one: 'Queda {n} pas', other: 'Queden {n} passos' }),
-    allCompleted: 'Tots els passos completats',
-    minimize: 'Minimitza els passos',
-    expand: 'Desplega els passos',
-    defaultSteps: [
-      'Llegir els fitxers del projecte',
-      'Actualitzar i instal·lar els tokens del mode clar',
-      'Implementar els tokens del mode fosc',
-      'Afegir un selector de tema reutilitzable i registrat',
-      'Executar el registre, el lint i la compilació de producció',
-    ],
-  },
-  de: {
-    stepsLeft: (n) => plural('de', n, { one: 'Noch {n} Schritt', other: 'Noch {n} Schritte' }),
-    allCompleted: 'Alle Schritte abgeschlossen',
-    minimize: 'Schritte minimieren',
-    expand: 'Schritte einblenden',
-    defaultSteps: [
-      'Projektdateien lesen',
-      'Tokens für den hellen Modus aktualisieren und installieren',
-      'Tokens für den dunklen Modus implementieren',
-      'Wiederverwendbaren, registrierten Theme-Umschalter hinzufügen',
-      'Registry, Lint und Produktions-Build ausführen',
-    ],
-  },
-  fr: {
-    stepsLeft: (n) => plural('fr', n, { one: '{n} étape restante', other: '{n} étapes restantes' }),
-    allCompleted: 'Toutes les étapes sont terminées',
-    minimize: 'Réduire les étapes',
-    expand: 'Développer les étapes',
-    defaultSteps: [
-      'Lire les fichiers du projet',
-      'Mettre à jour et installer les tokens du mode clair',
-      'Implémenter les tokens du mode sombre',
-      'Ajouter un sélecteur de thème réutilisable et enregistré',
-      'Lancer le registre, le lint et le build de production',
-    ],
-  },
-  it: {
-    stepsLeft: (n) => plural('it', n, { one: 'Manca {n} passaggio', other: 'Mancano {n} passaggi' }),
-    allCompleted: 'Tutti i passaggi completati',
-    minimize: 'Riduci passaggi',
-    expand: 'Espandi passaggi',
-    defaultSteps: [
-      'Leggere i file del progetto',
-      'Aggiornare e installare i token della modalità chiara',
-      'Implementare i token della modalità scura',
-      'Aggiungere un selettore di tema riutilizzabile e registrato',
-      'Eseguire registry, lint e build di produzione',
-    ],
-  },
-  pt: {
-    stepsLeft: (n) => plural('pt', n, { one: '{n} etapa restante', other: '{n} etapas restantes' }),
-    allCompleted: 'Todas as etapas concluídas',
-    minimize: 'Minimizar etapas',
-    expand: 'Expandir etapas',
-    defaultSteps: [
-      'Ler os arquivos do projeto',
-      'Atualizar e instalar os tokens do modo claro',
-      'Implementar os tokens do modo escuro',
-      'Adicionar um seletor de tema reutilizável e registrado',
-      'Executar o registro, o lint e o build de produção',
-    ],
-  },
-  ru: {
-    stepsLeft: (n) =>
-      plural('ru', n, { one: 'Остался {n} шаг', few: 'Осталось {n} шага', many: 'Осталось {n} шагов', other: 'Осталось {n} шага' }),
-    allCompleted: 'Все шаги выполнены',
-    minimize: 'Свернуть шаги',
-    expand: 'Развернуть шаги',
-    defaultSteps: [
-      'Прочитать файлы проекта',
-      'Обновить и установить токены светлой темы',
-      'Реализовать токены тёмной темы',
-      'Добавить переиспользуемый зарегистрированный переключатель темы',
-      'Запустить реестр, линтер и продакшен-сборку',
-    ],
-  },
-  tr: {
-    stepsLeft: (n) => plural('tr', n, { other: '{n} adım kaldı' }),
-    allCompleted: 'Tüm adımlar tamamlandı',
-    minimize: 'Adımları küçült',
-    expand: 'Adımları genişlet',
-    defaultSteps: [
-      'Proje dosyalarını oku',
-      'Açık mod token’larını güncelle ve yükle',
-      'Koyu mod token’larını uygula',
-      'Yeniden kullanılabilir, kayıtlı bir tema düğmesi ekle',
-      'Kayıt, lint ve üretim derlemesini çalıştır',
-    ],
-  },
-  ja: {
-    stepsLeft: (n) => plural('ja', n, { other: '残り{n}ステップ' }),
-    allCompleted: 'すべてのステップが完了しました',
-    minimize: 'ステップを最小化',
-    expand: 'ステップを展開',
-    defaultSteps: [
-      'プロジェクトファイルを読み込む',
-      'ライトモードのトークンを更新してインストール',
-      'ダークモードのトークンを実装',
-      '再利用可能なテーマ切り替えを登録して追加',
-      'レジストリ、lint、本番ビルドを実行',
-    ],
-  },
-  zh: {
-    stepsLeft: (n) => plural('zh', n, { other: '还剩 {n} 个步骤' }),
-    allCompleted: '所有步骤已完成',
-    minimize: '收起步骤',
-    expand: '展开步骤',
-    defaultSteps: ['读取项目文件', '更新并安装浅色模式令牌', '实现深色模式令牌', '添加可复用的已注册主题切换', '运行注册表、lint 和生产构建'],
-  },
-  ar: {
-    stepsLeft: (n) =>
-      plural('ar', n, {
-        zero: 'لم تتبقَّ أي خطوات',
-        one: 'تبقّت خطوة واحدة',
-        two: 'تبقّت خطوتان',
-        few: 'تبقّت {n} خطوات',
-        many: 'تبقّت {n} خطوة',
-        other: 'تبقّت {n} خطوة',
-      }),
-    allCompleted: 'اكتملت كل الخطوات',
-    minimize: 'تصغير الخطوات',
-    expand: 'توسيع الخطوات',
-    defaultSteps: [
-      'قراءة ملفات المشروع',
-      'تحديث رموز الوضع الفاتح وتثبيتها',
-      'تنفيذ رموز الوضع الداكن',
-      'إضافة مبدّل سمة مسجَّل قابل لإعادة الاستخدام',
-      'تشغيل السجل والتدقيق وبناء الإنتاج',
-    ],
-  },
-  hi: {
-    stepsLeft: (n) => plural('hi', n, { other: '{n} चरण बाकी' }),
-    allCompleted: 'सभी चरण पूरे हो गए',
-    minimize: 'चरण छोटे करें',
-    expand: 'चरण दिखाएं',
-    defaultSteps: [
-      'प्रोजेक्ट फ़ाइलें पढ़ें',
-      'लाइट मोड टोकन अपडेट और इंस्टॉल करें',
-      'डार्क मोड टोकन लागू करें',
-      'दोबारा इस्तेमाल होने वाला रजिस्टर्ड थीम टॉगल जोड़ें',
-      'रजिस्ट्री, लिंट और प्रोडक्शन बिल्ड चलाएं',
-    ],
-  },
-  bn: {
-    stepsLeft: (n) => plural('bn', n, { other: '{n}টি ধাপ বাকি' }),
-    allCompleted: 'সব ধাপ সম্পন্ন হয়েছে',
-    minimize: 'ধাপগুলো ছোট করুন',
-    expand: 'ধাপগুলো দেখান',
-    defaultSteps: [
-      'প্রজেক্টের ফাইল পড়ুন',
-      'লাইট মোডের টোকেন আপডেট ও ইনস্টল করুন',
-      'ডার্ক মোডের টোকেন প্রয়োগ করুন',
-      'পুনরায় ব্যবহারযোগ্য নিবন্ধিত থিম টগল যোগ করুন',
-      'রেজিস্ট্রি, লিন্ট ও প্রোডাকশন বিল্ড চালান',
-    ],
-  },
-  id: {
-    stepsLeft: (n) => plural('id', n, { other: '{n} langkah lagi' }),
-    allCompleted: 'Semua langkah selesai',
-    minimize: 'Ciutkan langkah',
-    expand: 'Luaskan langkah',
-    defaultSteps: [
-      'Baca file proyek',
-      'Perbarui dan pasang token mode terang',
-      'Terapkan token mode gelap',
-      'Tambahkan pengalih tema terdaftar yang dapat dipakai ulang',
-      'Jalankan registry, lint, dan build produksi',
-    ],
-  },
-};
+export const AGENT_PROGRESS_MESSAGES: MessageCatalog<AgentProgressMessages> = defineMessages<AgentProgressMessages>('AGENT_PROGRESS_MESSAGES', {
+  stepsLeft: (n) => plural('en', n, { one: '{n} step left', other: '{n} steps left' }),
+  allCompleted: 'All steps completed',
+  minimize: 'Minimize steps',
+  expand: 'Expand steps',
+  defaultSteps: [
+    'Read project files',
+    'Update and install light mode tokens',
+    'Implement dark mode tokens',
+    'Add reusable registered theme toggle',
+    'Run registry, lint and production build',
+  ],
+});

package/src/agent-thinking/messages.ts

@@ -1,24 +1,8 @@
-import type { MessageCatalog } from '../locale/messages';
+import { defineMessages, type MessageCatalog } from '../locale/messages';
 
 /** `AgentThinking`'s default status label in each Bloom language; a `label` prop still wins. */
 export interface AgentThinkingMessages {
   thinking: string;
 }
 
-export const AGENT_THINKING_MESSAGES: MessageCatalog<AgentThinkingMessages> = {
-  en: { thinking: 'Thinking' },
-  es: { thinking: 'Pensando' },
-  ca: { thinking: 'Pensant' },
-  de: { thinking: 'Denkt nach' },
-  fr: { thinking: 'Réflexion en cours' },
-  it: { thinking: 'Sto pensando' },
-  pt: { thinking: 'Pensando' },
-  ru: { thinking: 'Думаю' },
-  tr: { thinking: 'Düşünüyor' },
-  ja: { thinking: '考え中' },
-  zh: { thinking: '思考中' },
-  ar: { thinking: 'جارٍ التفكير' },
-  hi: { thinking: 'सोच रहा है' },
-  bn: { thinking: 'ভাবছে' },
-  id: { thinking: 'Berpikir' },
-};
+export const AGENT_THINKING_MESSAGES: MessageCatalog<AgentThinkingMessages> = defineMessages<AgentThinkingMessages>('AGENT_THINKING_MESSAGES', { thinking: 'Thinking' });

package/src/ai-chat/AiChatResizeHandle.tsx

@@ -0,0 +1,151 @@
+/**
+ * The divider grip between two resizable panes. Its own module because three
+ * families draw it — `AiChatShell`, `AppShell`'s `split` variant and
+ * `ChatSplitLayout` — and the two that are not the AI chat must not link the
+ * chat shell (Metro does not tree-shake): importing it from `AiChatShell` put
+ * that module, its reanimated drawers and the whole ai-chat message catalog in
+ * every app that renders an `AppShell`.
+ */
+import React, { useMemo, useRef, useState } from 'react';
+import { PanResponder, View, type LayoutChangeEvent, type PointerEvent } from 'react-native';
+
+import { useCommonMessages } from '../locale/common-messages';
+import type { WebCssStyle } from '../styles/web-view-style';
+import { dataHook, IS_WEB, useAiChatPalette, useAiChatWebCss } from './shared';
+import type { AiChatResizeHandleProps } from './types';
+
+/**
+ * The resize grip (`DragHandle`): a 20px strip straddling the chat's right edge
+ * (10px past it). Hovering it reveals a 15×25 grip — radius 4, 1px
+ * border-button-default, background-primary, shadow-xs, three 1×13
+ * icon-quaternary lines 2 apart — that follows the pointer along the edge
+ * (kept 13px inside it) and stays up while dragging (150ms fade). Holding and
+ * dragging reports the horizontal distance from where the drag started.
+ */
+export function AiChatResizeHandle({
+  onResizeStart,
+  onResize,
+  onResizeEnd,
+  label: labelProp,
+  onNudge,
+  style,
+  testID,
+}: AiChatResizeHandleProps) {
+  useAiChatWebCss();
+  const palette = useAiChatPalette();
+  const common = useCommonMessages();
+  const label = labelProp ?? common.resizePanels;
+  const [gripY, setGripY] = useState<number | null>(null);
+  const [dragging, setDragging] = useState(false);
+  const height = useRef(0);
+  const startX = useRef(0);
+  const callbacks = useRef({ onResizeStart, onResize, onResizeEnd });
+  callbacks.current = { onResizeStart, onResize, onResizeEnd };
+
+  const track = (localY: number) => {
+    const h = height.current;
+    if (h > 0) setGripY(Math.min(h - 13, Math.max(13, localY)));
+  };
+
+  // Native: a pan responder (web uses pointer capture below).
+  const responder = useMemo(
+    () =>
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: () => true,
+        onPanResponderGrant: (event) => {
+          track(event.nativeEvent.locationY);
+          setDragging(true);
+          callbacks.current.onResizeStart?.();
+        },
+        onPanResponderMove: (_event, gesture) => callbacks.current.onResize(gesture.dx),
+        onPanResponderRelease: () => {
+          setDragging(false);
+          callbacks.current.onResizeEnd?.();
+        },
+        onPanResponderTerminate: () => {
+          setDragging(false);
+          callbacks.current.onResizeEnd?.();
+        },
+      }),
+    [],
+  );
+
+  type DomTarget = {
+    getBoundingClientRect: () => { top: number };
+    setPointerCapture: (id: number) => void;
+    hasPointerCapture: (id: number) => boolean;
+  };
+  const web = IS_WEB
+    ? {
+        onPointerDown: (event: PointerEvent) => {
+          event.preventDefault();
+          startX.current = event.nativeEvent.clientX;
+          setDragging(true);
+          callbacks.current.onResizeStart?.();
+          (event.currentTarget as unknown as DomTarget).setPointerCapture(event.nativeEvent.pointerId);
+        },
+        onPointerMove: (event: PointerEvent) => {
+          const target = event.currentTarget as unknown as DomTarget;
+          track(event.nativeEvent.clientY - target.getBoundingClientRect().top);
+          if (target.hasPointerCapture(event.nativeEvent.pointerId)) {
+            callbacks.current.onResize(event.nativeEvent.clientX - startX.current);
+          }
+        },
+        onPointerUp: () => {
+          setDragging(false);
+          callbacks.current.onResizeEnd?.();
+        },
+        onPointerCancel: () => {
+          setDragging(false);
+          callbacks.current.onResizeEnd?.();
+        },
+        onKeyDown: (event: { nativeEvent: { key: string } }) => {
+          if (event.nativeEvent.key === 'ArrowLeft') onNudge?.(-16);
+          if (event.nativeEvent.key === 'ArrowRight') onNudge?.(16);
+        },
+        tabIndex: onNudge ? (0 as const) : undefined,
+      }
+    : responder.panHandlers;
+
+  const grip: WebCssStyle = {
+    position: 'absolute',
+    ...(gripY === null ? { top: '50%' } : { top: gripY }),
+    width: 15,
+    height: 25,
+    marginTop: -12.5,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 2,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: palette.border,
+    backgroundColor: palette.primary,
+    boxShadow: palette.shadowXs,
+    ...(IS_WEB ? null : { opacity: dragging ? 1 : 0 }),
+  };
+
+  return (
+    <View
+      {...dataHook('bloomAiChatGrip')}
+      {...web}
+      role="separator"
+      aria-orientation="vertical"
+      accessibilityLabel={label}
+      testID={testID}
+      onLayout={(event: LayoutChangeEvent) => {
+        height.current = event.nativeEvent.layout.height;
+      }}
+      style={[
+        { position: 'absolute', top: 0, bottom: 0, right: -10, zIndex: 10, width: 20, alignItems: 'center' },
+        style,
+      ]}>
+      <View {...dataHook('bloomAiChatGripPill', dragging ? 'dragging' : '')} pointerEvents="none" style={grip}>
+        {[0, 1, 2].map((line) => (
+          <View key={line} style={{ width: 1, height: 13, backgroundColor: palette.iconQuaternary }} />
+        ))}
+      </View>
+    </View>
+  );
+}

package/src/ai-chat/AiChatShell.tsx

@@ -9,7 +9,6 @@ import {
   useWindowDimensions,
   type GestureResponderEvent,
   type LayoutChangeEvent,
-  type PointerEvent,
   type ViewProps,
 } from 'react-native';
 import Animated, {
@@ -39,9 +38,11 @@ import {
   useAiChatPalette,
   useAiChatWebCss,
 } from './shared';
+import { useCommonMessages } from '../locale/common-messages';
 import { useMessages } from '../locale/messages';
 import { AI_CHAT_MESSAGES } from './messages';
-import type { AiChatMobileHeaderProps, AiChatResizeHandleProps, AiChatShellProps } from './types';
+import type { AiChatMobileHeaderProps, AiChatShellProps } from './types';
+import { AiChatResizeHandle } from './AiChatResizeHandle';
 import { clamp01 } from '../styles/clamp';
 
 const REVEAL_EASE = Easing.bezier(0.42, 0, 0.58, 1);
@@ -90,146 +91,6 @@ const NAV_SETTLE_MIN_MS = 120;
 
 
 
-// ---------------------------------------------------------------------------
-//  Resize handle
-// ---------------------------------------------------------------------------
-
-/**
- * The resize grip (`DragHandle`): a 20px strip straddling the chat's right edge
- * (10px past it). Hovering it reveals a 15×25 grip — radius 4, 1px
- * border-button-default, background-primary, shadow-xs, three 1×13
- * icon-quaternary lines 2 apart — that follows the pointer along the edge
- * (kept 13px inside it) and stays up while dragging (150ms fade). Holding and
- * dragging reports the horizontal distance from where the drag started.
- */
-export function AiChatResizeHandle({
-  onResizeStart,
-  onResize,
-  onResizeEnd,
-  label: labelProp,
-  onNudge,
-  style,
-  testID,
-}: AiChatResizeHandleProps) {
-  useAiChatWebCss();
-  const palette = useAiChatPalette();
-  const { messages } = useMessages(AI_CHAT_MESSAGES);
-  const label = labelProp ?? messages.shell.resize;
-  const [gripY, setGripY] = useState<number | null>(null);
-  const [dragging, setDragging] = useState(false);
-  const height = useRef(0);
-  const startX = useRef(0);
-  const callbacks = useRef({ onResizeStart, onResize, onResizeEnd });
-  callbacks.current = { onResizeStart, onResize, onResizeEnd };
-
-  const track = (localY: number) => {
-    const h = height.current;
-    if (h > 0) setGripY(Math.min(h - 13, Math.max(13, localY)));
-  };
-
-  // Native: a pan responder (web uses pointer capture below).
-  const responder = useMemo(
-    () =>
-      PanResponder.create({
-        onStartShouldSetPanResponder: () => true,
-        onMoveShouldSetPanResponder: () => true,
-        onPanResponderGrant: (event) => {
-          track(event.nativeEvent.locationY);
-          setDragging(true);
-          callbacks.current.onResizeStart?.();
-        },
-        onPanResponderMove: (_event, gesture) => callbacks.current.onResize(gesture.dx),
-        onPanResponderRelease: () => {
-          setDragging(false);
-          callbacks.current.onResizeEnd?.();
-        },
-        onPanResponderTerminate: () => {
-          setDragging(false);
-          callbacks.current.onResizeEnd?.();
-        },
-      }),
-    [],
-  );
-
-  type DomTarget = {
-    getBoundingClientRect: () => { top: number };
-    setPointerCapture: (id: number) => void;
-    hasPointerCapture: (id: number) => boolean;
-  };
-  const web = IS_WEB
-    ? {
-        onPointerDown: (event: PointerEvent) => {
-          event.preventDefault();
-          startX.current = event.nativeEvent.clientX;
-          setDragging(true);
-          callbacks.current.onResizeStart?.();
-          (event.currentTarget as unknown as DomTarget).setPointerCapture(event.nativeEvent.pointerId);
-        },
-        onPointerMove: (event: PointerEvent) => {
-          const target = event.currentTarget as unknown as DomTarget;
-          track(event.nativeEvent.clientY - target.getBoundingClientRect().top);
-          if (target.hasPointerCapture(event.nativeEvent.pointerId)) {
-            callbacks.current.onResize(event.nativeEvent.clientX - startX.current);
-          }
-        },
-        onPointerUp: () => {
-          setDragging(false);
-          callbacks.current.onResizeEnd?.();
-        },
-        onPointerCancel: () => {
-          setDragging(false);
-          callbacks.current.onResizeEnd?.();
-        },
-        onKeyDown: (event: { nativeEvent: { key: string } }) => {
-          if (event.nativeEvent.key === 'ArrowLeft') onNudge?.(-16);
-          if (event.nativeEvent.key === 'ArrowRight') onNudge?.(16);
-        },
-        tabIndex: onNudge ? (0 as const) : undefined,
-      }
-    : responder.panHandlers;
-
-  const grip: WebCssStyle = {
-    position: 'absolute',
-    ...(gripY === null ? { top: '50%' } : { top: gripY }),
-    width: 15,
-    height: 25,
-    marginTop: -12.5,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: 2,
-    borderRadius: 4,
-    borderWidth: 1,
-    borderColor: palette.border,
-    backgroundColor: palette.primary,
-    boxShadow: palette.shadowXs,
-    ...(IS_WEB ? null : { opacity: dragging ? 1 : 0 }),
-  };
-
-  return (
-    <View
-      {...dataHook('bloomAiChatGrip')}
-      {...web}
-      role="separator"
-      aria-orientation="vertical"
-      accessibilityLabel={label}
-      testID={testID}
-      onLayout={(event: LayoutChangeEvent) => {
-        height.current = event.nativeEvent.layout.height;
-      }}
-      style={[
-        { position: 'absolute', top: 0, bottom: 0, right: -10, zIndex: 10, width: 20, alignItems: 'center' },
-        style,
-      ]}>
-      <View {...dataHook('bloomAiChatGripPill', dragging ? 'dragging' : '')} pointerEvents="none" style={grip}>
-        {[0, 1, 2].map((line) => (
-          <View key={line} style={{ width: 1, height: 13, backgroundColor: palette.iconQuaternary }} />
-        ))}
-      </View>
-    </View>
-  );
-}
-
 // ---------------------------------------------------------------------------
 //  Mobile header
 // ---------------------------------------------------------------------------
@@ -344,7 +205,11 @@ export function AiChatShell({
   const reducedMotion = useReducedMotion();
   const { messages } = useMessages(AI_CHAT_MESSAGES);
   const panelLabel = panelLabelProp ?? messages.code;
-  const l = useMemo(() => ({ ...messages.shell, ...labels }), [messages, labels]);
+  const common = useCommonMessages();
+  const l = useMemo(
+    () => ({ ...messages.shell, resize: common.resizePanels, ...labels }),
+    [messages, common, labels],
+  );
   const { width: windowWidth } = useWindowDimensions();
   // Native has no document: `document` is `container` there.
   const documentScroll = IS_WEB && scroll === 'document';

package/src/ai-chat/index.ts

@@ -15,7 +15,8 @@ export {
   AiChatMessageLine,
   AiChatStrong,
 } from './AiChatMessages';
-export { AiChatMobileHeader, AiChatResizeHandle, AiChatShell } from './AiChatShell';
+export { AiChatResizeHandle } from './AiChatResizeHandle';
+export { AiChatMobileHeader, AiChatShell } from './AiChatShell';
 export { useAiChatChromeInsets, useAiChatShell } from './context';
 export type { AiChatChromeInsets, AiChatShellState } from './context';
 export type {

package/src/ai-chat/index.web.ts

@@ -20,7 +20,8 @@ export {
   AiChatMessageLine,
   AiChatStrong,
 } from './AiChatMessages';
-export { AiChatMobileHeader, AiChatResizeHandle, AiChatShell } from './AiChatShell';
+export { AiChatResizeHandle } from './AiChatResizeHandle';
+export { AiChatMobileHeader, AiChatShell } from './AiChatShell';
 export { useAiChatChromeInsets, useAiChatShell } from './context';
 export type { AiChatChromeInsets, AiChatShellState } from './context';
 export type {