electric-sql
diff --git a/‎.changeset/mobile-chat-timeline-flash-fix.md‎
Lines changed: 6 additions & 0 deletions b/‎.changeset/mobile-chat-timeline-flash-fix.md‎
Lines changed: 6 additions & 0 deletions
diff --git a/‎packages/agents-mobile/app/session.tsx‎
Lines changed: 95 additions & 28 deletions b/‎packages/agents-mobile/app/session.tsx‎
Lines changed: 95 additions & 28 deletions
diff --git a/‎packages/agents-mobile/src/screens/SessionScreen.tsx‎
Lines changed: 14 additions & 4 deletions b/‎packages/agents-mobile/src/screens/SessionScreen.tsx‎
Lines changed: 14 additions & 4 deletions
diff --git a/‎packages/agents-server-ui/src/components/EntityTimeline.tsx‎
Lines changed: 7 additions & 1 deletion b/‎packages/agents-server-ui/src/components/EntityTimeline.tsx‎
Lines changed: 7 additions & 1 deletion
diff --git a/‎packages/agents-server-ui/src/components/views/ChatView.tsx‎
Lines changed: 13 additions & 8 deletions b/‎packages/agents-server-ui/src/components/views/ChatView.tsx‎
Lines changed: 13 additions & 8 deletions
@@ -0,0 +1,6 @@
+---
+'@electric-ax/agents-mobile': patch
+'@electric-ax/agents-server-ui': patch
+---
+
+Fix mobile chat timeline flashing when sending messages, resizing the composer (multiline/attachments) and queuing messages, and fix inconsistent auto-scroll as the composer grows. The timeline WebView embed now receives dynamic updates (bottom inset, inline queued messages, scroll) imperatively instead of via props that re-render and flash it. Also fix the composer occasionally not clearing after send when typing quickly.
@@ -1,4 +1,13 @@
-import { useEffect, useMemo, useState, type ComponentType } from 'react'
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentType,
+  type Ref,
+} from 'react'
 import {
   Keyboard,
   Platform,
@@ -23,6 +32,7 @@ import {
 } from '../src/screens/SessionScreen'
 import type { EmbedViewId } from '../src/lib/embedView'
 import SessionChatLogDomEmbedModule from '@electric-ax/agents-server-ui/src/embed/SessionChatLogDomEmbed'
+import type { SessionChatLogDomRef } from '@electric-ax/agents-server-ui/src/embed/sessionChatLogDomRef'
 import SessionStateInspectorDomEmbedModule from '@electric-ax/agents-server-ui/src/embed/SessionStateInspectorDomEmbed'
 import { getActiveServerHeadersSnapshot } from '@electric-ax/agents-server-ui/src/lib/auth-fetch'
 import type { OptimisticInboxMessage } from '@electric-ax/agents-server-ui/src/lib/sendMessage'
@@ -33,8 +43,6 @@ type SessionDomEmbedProps = {
   serverUrl: string
   entityUrl: string
   theme: `light` | `dark`
-  scrollToBottomSignal?: number
-  inlineQueuedMessages?: Array<OptimisticInboxMessage>
   bottomInset?: number
   onRequestOpenEntity: (entityUrl: string) => Promise<void>
   // Marshalled so the per-message fork runs over native networking.
@@ -45,13 +53,20 @@ type SessionDomEmbedProps = {
   style?: StyleProp<ViewStyle>
   matchContents?: boolean
   serverHeaders?: { url: string; headers: Record<string, string> } | null
+  ref?: Ref<SessionChatLogDomRef>
   dom?: unknown
 }
 
-const SessionChatLogDomEmbed =
+// The timeline is an Expo DOM (WebView) embed that re-posts — and visibly
+// flickers — on any prop change or re-render. So we memo it, keep every prop
+// below reference-stable, and push the values that actually change (bottom
+// inset, queued messages, scroll) imperatively via the ref, not as props.
+const SessionChatLogDomEmbed = memo(
   SessionChatLogDomEmbedModule as ComponentType<SessionDomEmbedProps>
-const SessionStateInspectorDomEmbed =
+)
+const SessionStateInspectorDomEmbed = memo(
   SessionStateInspectorDomEmbedModule as ComponentType<SessionDomEmbedProps>
+)
 
 export default function SessionRoute(): React.ReactElement | null {
   const params = useLocalSearchParams<{
@@ -83,7 +98,6 @@ function SessionRouteInner({
   const [chatComposerHeight, setChatComposerHeight] = useState(
     CHAT_COMPOSER_BASE_HEIGHT + insets.bottom
   )
-  const [chatLogScrollSignal, setChatLogScrollSignal] = useState(0)
   const [inlineQueuedMessages, setInlineQueuedMessages] = useState<
     Array<OptimisticInboxMessage>
   >([])
@@ -93,9 +107,13 @@ function SessionRouteInner({
     : (params.entityUrl ?? ``)
   const view = params.view === `state-explorer` ? `state-explorer` : `chat`
 
-  // Read once per render — the DOM embed receives this as a prop and
-  // re-registers it on its side of the JS-context boundary.
-  const serverHeaders = getActiveServerHeadersSnapshot()
+  // A fresh object each call, so memo on its serialized value: stable identity
+  // across renders, but still updates if the auth headers actually change.
+  const serverHeadersSnapshot = getActiveServerHeadersSnapshot()
+  const serverHeadersKey = serverHeadersSnapshot
+    ? JSON.stringify(serverHeadersSnapshot)
+    : ``
+  const serverHeaders = useMemo(() => serverHeadersSnapshot, [serverHeadersKey])
 
   const embedTop = insets.top + HEADER_HEIGHT
   const composerInset =
@@ -117,17 +135,42 @@ function SessionRouteInner({
     }),
     [embedFrame.height, embedFrame.width]
   )
+  const embedStyle = useMemo(() => [styles.domEmbedWeb, embedSize], [embedSize])
+  const embedDom = useMemo(
+    () => domOptions(styles, embedSize, tokens.bg),
+    [embedSize, tokens.bg]
+  )
+  // The inset is also seeded once as a prop so the first paint is correct before
+  // the imperative handle (which registers after boot) takes over.
+  const chatLogRef = useRef<SessionChatLogDomRef>(null)
+  const initialComposerInsetRef = useRef(composerInset)
+  usePushToEmbed(chatLogRef, `setBottomInset`, composerInset)
+  usePushToEmbed(chatLogRef, `setInlineQueuedMessages`, inlineQueuedMessages)
+  const handleSend = useCallback((): void => {
+    // `?.()` guards the method too: the handle may not be registered yet.
+    chatLogRef.current?.scrollToBottom?.()
+  }, [])
+  // Reference-stable so it doesn't break the embed's memo (forkEntity itself is
+  // stable from the provider); marshals the fork over native networking.
+  const handleForkEntity = useCallback(
+    (targetUrl: string, opts?: { pointer?: ForkPointer }) =>
+      forkEntity({ entityUrl: targetUrl, pointer: opts?.pointer }),
+    [forkEntity]
+  )
 
   const goBack = (): void => {
     if (router.canGoBack()) router.back()
     else router.replace(`/`)
   }
-  const openSession = (target: string): void => {
-    router.push({
-      pathname: `/session`,
-      params: { entityUrl: target, view: `chat` },
-    })
-  }
+  const openSession = useCallback(
+    async (target: string): Promise<void> => {
+      router.push({
+        pathname: `/session`,
+        params: { entityUrl: target, view: `chat` },
+      })
+    },
+    [router]
+  )
   const openShare = (): void => {
     router.push({ pathname: `/session-share`, params: { entityUrl } })
   }
@@ -149,31 +192,28 @@ function SessionRouteInner({
       >
         {view === `chat` ? (
           <SessionChatLogDomEmbed
-            style={[styles.domEmbedWeb, embedSize]}
+            ref={chatLogRef}
+            style={embedStyle}
             matchContents={false}
             serverUrl={serverUrl}
             entityUrl={entityUrl}
             theme={scheme}
-            scrollToBottomSignal={chatLogScrollSignal}
-            inlineQueuedMessages={inlineQueuedMessages}
-            bottomInset={composerInset}
+            bottomInset={initialComposerInsetRef.current}
             serverHeaders={serverHeaders}
-            onRequestOpenEntity={async (target) => openSession(target)}
-            onRequestForkEntity={(targetUrl, opts) =>
-              forkEntity({ entityUrl: targetUrl, pointer: opts?.pointer })
-            }
-            dom={domOptions(styles, embedSize, tokens.bg)}
+            onRequestOpenEntity={openSession}
+            onRequestForkEntity={handleForkEntity}
+            dom={embedDom}
           />
         ) : (
           <SessionStateInspectorDomEmbed
-            style={[styles.domEmbedWeb, embedSize]}
+            style={embedStyle}
             matchContents={false}
             serverUrl={serverUrl}
             entityUrl={entityUrl}
             theme={scheme}
             serverHeaders={serverHeaders}
-            onRequestOpenEntity={async (target) => openSession(target)}
-            dom={domOptions(styles, embedSize, tokens.bg)}
+            onRequestOpenEntity={openSession}
+            dom={embedDom}
           />
         )}
       </View>
@@ -186,7 +226,7 @@ function SessionRouteInner({
           onOpenEntity={openSession}
           onOpenStateSource={openStateSource}
           onComposerHeightChange={setChatComposerHeight}
-          onSendMessage={() => setChatLogScrollSignal(Date.now())}
+          onSendMessage={handleSend}
           onInlineQueuedMessagesChange={setInlineQueuedMessages}
           onShare={openShare}
         />
@@ -228,6 +268,33 @@ function domOptions(
   }
 }
 
+// Push a value into the chat-log embed's imperative handle, retrying on
+// animation frames until the method exists. `ref.current` becomes a truthy
+// proxy a beat BEFORE `useDOMImperativeHandle` marshals its methods in, so we
+// must check the method itself — a truthy `ref.current` is not enough.
+function usePushToEmbed(
+  ref: { current: SessionChatLogDomRef | null },
+  method: `setBottomInset` | `setInlineQueuedMessages`,
+  value: unknown
+): void {
+  useEffect(() => {
+    let frame = 0
+    let attempts = 0
+    const apply = (): void => {
+      const fn = ref.current?.[method]
+      if (typeof fn === `function`) {
+        fn(value)
+        return
+      }
+      if (attempts++ < 120) frame = requestAnimationFrame(apply)
+    }
+    apply()
+    return () => {
+      if (frame) cancelAnimationFrame(frame)
+    }
+  }, [ref, method, value])
+}
+
 function useKeyboardBottomInset(windowHeight: number): number {
   const [keyboardInset, setKeyboardInset] = useState(0)
 
 
@@ -241,14 +241,14 @@ export function SessionScreen({
     [pendingInbox]
   )
   const projectedPendingMessage = useMemo(() => {
-    if (entity?.status === `running`) return null
+    if (generationActive) return null
     for (const [key, message] of inlineQueuedMessages) {
       if (processedInboxKeys.has(key)) continue
       return pendingInboxByKey.get(key) ?? message
     }
     return null
   }, [
-    entity?.status,
+    generationActive,
     inlineQueuedMessages,
     pendingInboxByKey,
     processedInboxKeys,
@@ -262,7 +262,7 @@ export function SessionScreen({
     [pendingInbox, projectedPendingMessage]
   )
   const inlineQueuedSubmits =
-    entity?.status !== `running` &&
+    !generationActive &&
     pendingInbox.length === 0 &&
     inlineQueuedMessages.size === 0
 
@@ -297,6 +297,9 @@ export function SessionScreen({
       let next: Map<string, OptimisticInboxMessage> | null = null
       for (const key of current.keys()) {
         if (!processedInboxKeys.has(key)) continue
+        // Still pending though in the timeline — keep tracking inline until it
+        // leaves the pending inbox, else it flashes back into the queue drawer.
+        if (pendingInboxByKey.has(key)) continue
         next ??= new Map(current)
         next.delete(key)
         inlineQueuedKeysRef.current.delete(key)
@@ -306,7 +309,7 @@ export function SessionScreen({
       }
       return next ?? current
     })
-  }, [inlineQueuedMessages.size, processedInboxKeys])
+  }, [inlineQueuedMessages.size, processedInboxKeys, pendingInboxByKey])
 
   useEffect(
     () => () => {
@@ -534,6 +537,10 @@ function NativeMessageComposer({
   const styles = useMemo(() => createComposerStyles(tokens), [tokens])
   const { keyboardVisible, keyboardTranslateY } = useKeyboardAttachment()
   const [value, setValue] = useState(``)
+  // Cleared imperatively on send: the input is controlled via children (for
+  // highlighting), not `value`, so a `setValue('')` while typing fast can be
+  // rejected by RN as stale (older event count) and leave the sent text behind.
+  const inputRef = useRef<TextInput>(null)
   const [sending, setSending] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [editingMessage, setEditingMessage] = useState<{
@@ -673,6 +680,7 @@ function NativeMessageComposer({
       }
 
       setValue(``)
+      inputRef.current?.clear()
       setPendingSelection(null)
       slash.reset()
       setEditingMessage(null)
@@ -692,6 +700,7 @@ function NativeMessageComposer({
     }
 
     setValue(``)
+    inputRef.current?.clear()
     setPendingSelection(null)
     slash.reset()
     setEditingMessage(null)
@@ -853,6 +862,7 @@ function NativeMessageComposer({
           />
         )}
         <TextInput
+          ref={inputRef}
           onChangeText={setValue}
           onSelectionChange={(event) => {
             slash.onSelectionChange(event)
 
@@ -1956,6 +1956,10 @@ export function EntityTimeline({
     let frame: ReturnType<typeof requestAnimationFrame> | null = null
     const pinToBottom = () => {
       if (!isNearBottom.current) return
+      // Scroll synchronously (ResizeObserver fires before paint) so a growing
+      // inset doesn't paint one misaligned frame; the rAF re-pin then settles
+      // the virtualizer for new rows.
+      viewport.scrollTop = viewport.scrollHeight
       if (frame !== null) cancelAnimationFrame(frame)
       frame = requestAnimationFrame(() => {
         frame = null
@@ -1964,7 +1968,9 @@ export function EntityTimeline({
     }
 
     const observer = new ResizeObserver(pinToBottom)
-    observer.observe(contentElement)
+    // border-box, not content-box: the inset is bottom padding, which a
+    // content-box observation can't see — so composer-only growth would be missed.
+    observer.observe(contentElement, { box: `border-box` })
     return () => {
       observer.disconnect()
       if (frame !== null) cancelAnimationFrame(frame)
 
@@ -74,15 +74,20 @@ export function ChatLogView({
   entityStopped,
   isSpawning,
   tileId,
-  scrollToBottomSignal,
   inlineQueuedMessages = [],
 }: ViewProps & {
-  scrollToBottomSignal?: number
   inlineQueuedMessages?: Array<OptimisticInboxMessage>
 }): React.ReactElement {
   const connectUrl = isSpawning ? null : entityUrl
-  const { timelineRows, pendingInbox, entities, db, loading, error } =
-    useEntityTimeline(baseUrl || null, connectUrl)
+  const {
+    timelineRows,
+    pendingInbox,
+    entities,
+    generationActive,
+    db,
+    loading,
+    error,
+  } = useEntityTimeline(baseUrl || null, connectUrl)
   const canFork = useEntityPermission(entity, `fork`)
   const navigate = useNavigate()
   const processedInboxKeys = useMemo(
@@ -97,14 +102,15 @@ export function ChatLogView({
     [pendingInbox]
   )
   const projectedPendingMessage = useMemo(() => {
-    if (entity.status === `running`) return null
+    if (entityStopped || generationActive) return null
     for (const message of inlineQueuedMessages) {
       if (processedInboxKeys.has(message.key)) continue
       return pendingInboxByKey.get(message.key) ?? message
     }
     return null
   }, [
-    entity.status,
+    entityStopped,
+    generationActive,
     inlineQueuedMessages,
     pendingInboxByKey,
     processedInboxKeys,
@@ -140,11 +146,10 @@ export function ChatLogView({
       error={error}
       entityStopped={entityStopped}
       baseUrl={baseUrl}
-      cacheKey={`${baseUrl}${connectUrl ?? ``}:${scrollToBottomSignal ?? 0}`}
+      cacheKey={`${baseUrl}${connectUrl ?? ``}`}
       tileId={tileId}
       entityUrl={connectUrl}
       entities={entities}
-      scrollToBottomSignal={scrollToBottomSignal}
       forkFromHereByRunKey={forkFromHereByRunKey}
     />
   )