From c42b02751fe2aa97a06ca249ce2723a4dd699680 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Sat, 10 Oct 2026 07:20:52 -0700
Subject: [PATCH 1/3] fix(chat): keep composer drafts across hydration

- Adopt text typed into the server-rendered composer before hydration; the dropped input event left state empty and the next render wiped the text
- Restore a saved draft after hydration instead of in the initial render, which mismatched the server HTML and regenerated the composer on every reload with a draft
- Share one useHydrated hook across the composer, organization home, and theme toggle
- Mobile E2E: wait for the draft to overflow its editor instead of measuring once, and check a saved draft returns after a reload without a hydration error
---
 .../components/theme-toggle/theme-toggle.tsx  | 18 +--------
 .../home/organization-home.tsx                |  9 ++---
 .../prompt-editor/use-prompt-editor.test.tsx  | 38 ++++++++++++++++++-
 .../prompt-editor/use-prompt-editor.ts        |  9 +++++
 .../home/components/user-input/user-input.tsx |  6 ++-
 apps/sim/hooks/use-hydrated.ts                | 13 +++++++
 apps/sim/scripts/test-mobile-e2e.ts           | 27 ++++++++++++-
 7 files changed, 95 insertions(+), 25 deletions(-)
 create mode 100644 apps/sim/hooks/use-hydrated.ts

diff --git a/apps/sim/app/(landing)/components/footer/components/theme-toggle/theme-toggle.tsx b/apps/sim/app/(landing)/components/footer/components/theme-toggle/theme-toggle.tsx
index ed9551b44d1..cbdadecb657 100644
--- a/apps/sim/app/(landing)/components/footer/components/theme-toggle/theme-toggle.tsx
+++ b/apps/sim/app/(landing)/components/footer/components/theme-toggle/theme-toggle.tsx
@@ -1,9 +1,10 @@
 'use client'
 
-import { useId, useSyncExternalStore } from 'react'
+import { useId } from 'react'
 import { cn } from '@sim/emcn'
 import { Moon, Sun } from '@sim/emcn/icons'
 import { useTheme } from 'next-themes'
+import { useHydrated } from '@/hooks/use-hydrated'
 
 /**
  * The two themes on offer, in reading order. `system` is deliberately absent:
@@ -33,21 +34,6 @@ const SEGMENT_TONE: Record<ThemeOption, string> = {
   dark: 'text-[var(--text-muted)] hover-hover:text-[var(--text-primary)] dark:bg-[var(--surface-active)] dark:text-[var(--text-primary)]',
 }
 
-const subscribeToNothing = () => () => {}
-
-/**
- * `true` once hydrated, `false` in server HTML and during hydration - the
- * store-backed form React reconciles without a mismatch, unlike an effect that
- * flips state after mount.
- */
-function useHydrated(): boolean {
-  return useSyncExternalStore(
-    subscribeToNothing,
-    () => true,
-    () => false
-  )
-}
-
 /**
  * Footer light/dark switch: a hairline pill holding a sun and a moon, with the
  * current theme's segment filled. Picking a segment writes the visitor's
diff --git a/apps/sim/app/o/[organizationId]/home/organization-home.tsx b/apps/sim/app/o/[organizationId]/home/organization-home.tsx
index b2739f6e80b..8c56ffe4d43 100644
--- a/apps/sim/app/o/[organizationId]/home/organization-home.tsx
+++ b/apps/sim/app/o/[organizationId]/home/organization-home.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useState, useSyncExternalStore } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { toast } from '@sim/emcn'
 import { useQueryClient } from '@tanstack/react-query'
 import Link from 'next/link'
@@ -48,6 +48,7 @@ import { useFileAttachments } from '@/app/workspace/[workspaceId]/w/[workflowId]
 import { mentionifyIntegrations } from '@/blocks/integration-matcher'
 import { useMarkMothershipChatRead } from '@/hooks/queries/mothership-chats'
 import { getWorkspaceFilesQueryOptions } from '@/hooks/queries/workspace-files'
+import { useHydrated } from '@/hooks/use-hydrated'
 import { useMothershipDraftsStore } from '@/stores/mothership-drafts/store'
 import { useOrganizationChatModeStore } from '@/stores/organization-chat-mode/store'
 import type { ChatContext } from '@/stores/panel'
@@ -58,15 +59,11 @@ interface OrganizationHomeProps {
   requestMode?: ChatRequestMode
 }
 
-const subscribeToClient = () => () => {}
-const clientSnapshot = () => true
-const serverSnapshot = () => false
-
 /** Home chooses the conversation mode before its first message. */
 export function OrganizationHome(props: OrganizationHomeProps) {
   const { organization, searchAccess, canBuild, mothershipAvailable } = useOrganizationContext()
   const { data: session } = useSession()
-  const isClient = useSyncExternalStore(subscribeToClient, clientSnapshot, serverSnapshot)
+  const isClient = useHydrated()
   const isRestoredChatEntry = useRestoredChatEntry({ chatId: props.chatId })
   if (!mothershipAvailable || (!canBuild && !searchAccess.memberScoped)) return null
   /** Preferences are browser-persisted and keyed by user; never paint a guessed mode first. */
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/prompt-editor/use-prompt-editor.test.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/prompt-editor/use-prompt-editor.test.tsx
index 97b5d72f905..1a71d1f650a 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/prompt-editor/use-prompt-editor.test.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/prompt-editor/use-prompt-editor.test.tsx
@@ -3,7 +3,8 @@
  */
 import { act, type ReactNode } from 'react'
 import { integrationMatcherMock } from '@sim/testing/mocks/integration-matcher.mock'
-import { createRoot, type Root } from 'react-dom/client'
+import { createRoot, hydrateRoot, type Root } from 'react-dom/client'
+import { renderToString } from 'react-dom/server'
 import { describe, expect, it, vi } from 'vitest'
 
 vi.mock('@/hooks/queries/skills', () => ({ useSkills: () => ({ data: [] }) }))
@@ -458,3 +459,38 @@ it('inserts a canonical built-in skill globally without inheriting a workspace',
     unmount()
   }
 })
+
+it('keeps text typed into the server-rendered textarea before hydration', () => {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  let latest: ReturnType<typeof usePromptEditor> | undefined
+  function Editor({ revision }: { revision: number }) {
+    const editor = usePromptEditor({ workspaceId: 'ws-1' })
+    latest = editor
+    return (
+      <textarea
+        ref={editor.textareaRef}
+        value={editor.value}
+        onChange={editor.handleInputChange}
+        data-revision={revision}
+      />
+    )
+  }
+  const container = document.createElement('div')
+  container.innerHTML = renderToString(<Editor revision={0} />)
+  document.body.appendChild(container)
+  const textarea = container.querySelector('textarea')
+  if (!textarea) throw new Error('The server must render the textarea')
+  textarea.value = 'Typed while the page loaded'
+  let root: Root | undefined
+  try {
+    act(() => {
+      root = hydrateRoot(container, <Editor revision={0} />)
+    })
+    act(() => root?.render(<Editor revision={1} />))
+    expect(latest?.getValue()).toBe('Typed while the page loaded')
+    expect(textarea.value).toBe('Typed while the page loaded')
+  } finally {
+    act(() => root?.unmount())
+    container.remove()
+  }
+})
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/prompt-editor/use-prompt-editor.ts b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/prompt-editor/use-prompt-editor.ts
index fa3f3b46f85..ae34c976fb7 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/prompt-editor/use-prompt-editor.ts
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/prompt-editor/use-prompt-editor.ts
@@ -1056,6 +1056,15 @@ export function usePromptEditor({
     setValueState(textarea.value)
   }, [])
 
+  // Keystrokes typed into the server-rendered textarea before hydration never
+  // reach React. Compared with the mounted value: `valueRef` leads the DOM
+  // while an edit made during mount is still uncommitted.
+  const mountedValueRef = useRef(initialValue)
+  useLayoutEffect(() => {
+    const textarea = textareaRef.current
+    if (textarea && textarea.value !== mountedValueRef.current) adoptDomValue(textarea)
+  }, [textareaRef, adoptDomValue])
+
   // Selection one change ago, used to infer which edge of a range moved. Kept
   // current by the `selectionchange` listener below — which fires on EVERY
   // caret/selection change (typing, arrows, clicks, programmatic), unlike
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
index 26ee174eade..55ff95caad7 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
@@ -44,6 +44,7 @@ import { useFileAttachments } from '@/app/workspace/[workspaceId]/w/[workflowId]
 import type { AttachedFile } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-file-attachments'
 import { mentionifyIntegrations } from '@/blocks/integration-matcher'
 import { useChatInputFocus } from '@/hooks/use-chat-input-focus'
+import { useHydrated } from '@/hooks/use-hydrated'
 import { isMobileViewport } from '@/hooks/use-is-mobile'
 import { useSettingsNavigation } from '@/hooks/use-settings-navigation'
 import { useVoiceInput } from '@/hooks/use-voice-input'
@@ -104,9 +105,11 @@ const UserInputImpl = forwardRef<UserInputHandle, UserInputProps>(function UserI
   const { workspaceId } = useParams<{ workspaceId: string }>()
   const { navigateToSettings } = useSettingsNavigation()
   const { userId, onContextAdd, onContextRemove } = useChatSurface()
+  // Server HTML cannot see the stored draft; hydration renders without it and the mount restore applies it.
+  const canReadStoredDraft = useHydrated()
   const [initialValue] = useState(() => {
     if (defaultValue) return defaultValue
-    if (!draftScopeKey) return ''
+    if (!canReadStoredDraft || !draftScopeKey) return ''
     const text = useMothershipDraftsStore.getState().drafts[draftScopeKey]?.text
     return typeof text === 'string' ? text : ''
   })
@@ -201,6 +204,7 @@ const UserInputImpl = forwardRef<UserInputHandle, UserInputProps>(function UserI
     if (restoredContexts) editor.setContexts(restoredContexts)
     if (restoredFiles) files.restoreAttachedFiles(restoredFiles)
     if (caretText !== null) {
+      if (editor.getValue() === '') editor.setValue(caretText)
       const textarea = textareaRef.current
       if (textarea) {
         if (!isMobileViewport()) textarea.focus()
diff --git a/apps/sim/hooks/use-hydrated.ts b/apps/sim/hooks/use-hydrated.ts
new file mode 100644
index 00000000000..3b6f56dfac3
--- /dev/null
+++ b/apps/sim/hooks/use-hydrated.ts
@@ -0,0 +1,13 @@
+import { useSyncExternalStore } from 'react'
+
+const subscribeToNothing = () => () => {}
+const onClient = () => true
+const onServer = () => false
+
+/**
+ * `true` once hydrated, `false` in server HTML and during hydration: the store-backed form React
+ * reconciles without a mismatch, unlike an effect that flips state after mount.
+ */
+export function useHydrated(): boolean {
+  return useSyncExternalStore(subscribeToNothing, onClient, onServer)
+}
diff --git a/apps/sim/scripts/test-mobile-e2e.ts b/apps/sim/scripts/test-mobile-e2e.ts
index ea983ccb545..73e54fc9733 100644
--- a/apps/sim/scripts/test-mobile-e2e.ts
+++ b/apps/sim/scripts/test-mobile-e2e.ts
@@ -553,6 +553,27 @@ async function exerciseViewport(
     }
 
     if (viewport.name === 'desktop') {
+      await check(`${prefix}/a saved draft returns after a reload`, page, async () => {
+        const draft = 'A draft saved before reloading'
+        const storedDrafts = () =>
+          page.evaluate(() => localStorage.getItem('mothership-drafts:v1') ?? '')
+        await visit(page, 'home')
+        const composer = page.getByRole('textbox', { name: 'Message', exact: true })
+        await composer.fill(draft)
+        await expect.poll(storedDrafts).toContain(draft)
+        const pageErrorCount = pageErrors.length
+        const nativeErrorCount = nativeErrors.length
+        await visit(page, 'home')
+        await expect(composer).toHaveValue(draft)
+        assert.deepEqual(
+          [...pageErrors.slice(pageErrorCount), ...nativeErrors.slice(nativeErrorCount)],
+          [],
+          'Restoring a saved draft must hydrate cleanly'
+        )
+        await composer.fill('')
+        await expect.poll(storedDrafts).not.toContain(draft)
+      })
+
       for (const width of [390, viewport.width]) {
         await check(
           `${prefix}/${width}px draft scroll boundaries preserve the surrounding page`,
@@ -591,8 +612,12 @@ async function exerciseViewport(
             try {
               await page.setViewportSize({ width, height: 520 })
               await composer.fill('A draft line\n'.repeat(30))
+              await expect
+                .poll(async () => (await readScroll().catch(() => null))?.max ?? 0, {
+                  message: 'The draft must overflow its editor',
+                })
+                .toBeGreaterThan(100)
               const editor = await readScroll()
-              assert(editor.max > 100, 'The draft must overflow its editor')
               await page.mouse.move(editor.x, editor.y)
               await page.mouse.wheel(0, 10_000)
               await expect

From 2e86d2da9f676ba1511a7dd43527926d0a38feb3 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Sat, 10 Oct 2026 07:34:22 -0700
Subject: [PATCH 2/3] fix(chat): re-chipify a restored draft once skills load

---
 .../prompt-editor/use-prompt-editor.test.tsx  | 32 +++++++++++++++++++
 .../prompt-editor/use-prompt-editor.ts        |  5 ++-
 .../home/components/user-input/user-input.tsx |  2 +-
 3 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/prompt-editor/use-prompt-editor.test.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/prompt-editor/use-prompt-editor.test.tsx
index 1a71d1f650a..b7ae3876f54 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/prompt-editor/use-prompt-editor.test.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/prompt-editor/use-prompt-editor.test.tsx
@@ -494,3 +494,35 @@ it('keeps text typed into the server-rendered textarea before hydration', () =>
     container.remove()
   }
 })
+
+it('re-chipifies a seeded draft once skills load', () => {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  const skill = {
+    id: 'review',
+    workspaceId: 'ws-1',
+    userId: null,
+    name: 'Review',
+    description: '',
+    content: '',
+    canEdit: false,
+    createdAt: '',
+    updatedAt: '',
+  }
+  let latest: ReturnType<typeof usePromptEditor> | undefined
+  function Editor({ skills }: { skills: (typeof skill)[] }) {
+    latest = usePromptEditor({ workspaceId: 'ws-1', availableSkills: skills })
+    return null
+  }
+  const container = document.createElement('div')
+  const root = createRoot(container)
+  try {
+    act(() => root.render(<Editor skills={[]} />))
+    act(() => latest?.setValue('/Review the draft', { seed: true }))
+    act(() => root.render(<Editor skills={[skill]} />))
+    expect(latest?.getActiveContexts()).toEqual([
+      { kind: 'skill', skillId: 'review', label: 'Review' },
+    ])
+  } finally {
+    act(() => root.unmount())
+  }
+})
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/prompt-editor/use-prompt-editor.ts b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/prompt-editor/use-prompt-editor.ts
index ae34c976fb7..89bded552a6 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/prompt-editor/use-prompt-editor.ts
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/prompt-editor/use-prompt-editor.ts
@@ -335,9 +335,12 @@ export function usePromptEditor({
    * Programmatically replaces the editor text. Chipifies by default so any
    * seeded prose (template, transcript, queued message) registers its
    * integration / skill chips; pass `{ chipify: false }` for verbatim text.
+   * `{ seed: true }` treats the text like `initialValue`, re-chipified once
+   * the skill list loads while it stays untouched.
    */
-  const setValue = useCallback((text: string, options?: { chipify?: boolean }) => {
+  const setValue = useCallback((text: string, options?: { chipify?: boolean; seed?: boolean }) => {
     const next = options?.chipify === false ? text : applyAutoMentionsRef.current(text)
+    if (options?.seed) seedRef.current = next
     atInsertPosRef.current = null
     pendingCursorRef.current = null
     mentionRangeRef.current = null
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
index 55ff95caad7..eb9a7933217 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
@@ -204,7 +204,7 @@ const UserInputImpl = forwardRef<UserInputHandle, UserInputProps>(function UserI
     if (restoredContexts) editor.setContexts(restoredContexts)
     if (restoredFiles) files.restoreAttachedFiles(restoredFiles)
     if (caretText !== null) {
-      if (editor.getValue() === '') editor.setValue(caretText)
+      if (editor.getValue() === '') editor.setValue(caretText, { seed: true })
       const textarea = textareaRef.current
       if (textarea) {
         if (!isMobileViewport()) textarea.focus()

From b21949260a3fb40759ccf460b845866bcb547f00 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Sat, 10 Oct 2026 07:55:58 -0700
Subject: [PATCH 3/3] fix(chat): keep the caret where the user typed before
 hydration

---
 .../[workspaceId]/home/components/user-input/user-input.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
index eb9a7933217..c6c2f6a79e0 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
@@ -203,8 +203,10 @@ const UserInputImpl = forwardRef<UserInputHandle, UserInputProps>(function UserI
     }
     if (restoredContexts) editor.setContexts(restoredContexts)
     if (restoredFiles) files.restoreAttachedFiles(restoredFiles)
-    if (caretText !== null) {
-      if (editor.getValue() === '') editor.setValue(caretText, { seed: true })
+    // Text typed before hydration wins over the saved draft, caret included.
+    const typedBeforeHydration = initialValue === '' && editor.getValue() !== ''
+    if (caretText !== null && !typedBeforeHydration) {
+      if (initialValue === '') editor.setValue(caretText, { seed: true })
       const textarea = textareaRef.current
       if (textarea) {
         if (!isMobileViewport()) textarea.focus()