From 7a90f3aec052558328eb2bb8c342d3591425e6e9 Mon Sep 17 00:00:00 2001
From: Omri Katz <9701896+omridevk@users.noreply.github.com>
Date: Mon, 10 Aug 2026 03:58:20 +0300
Subject: [PATCH 1/3] fix(app): isolate pane query reads behind suspense
 islands so the route boundary never detaches the composer (#346)

solid-router wraps every route Match in a Suspense with an undefined
fallback. Solid registers a suspension when a solid-query `.data` read
runs inside a non-user computation (a memo or a JSX render effect) while
the query is pending with no cached data, and the nearest enclosing
Suspense catches it. With no inner boundary that was the route Match, so
the whole subtree detached: blank shell, composer unmounted, focus lost.

Per the user's direction this uses the platform rather than guarding the
reads: every query-reading island now sits in its own Suspense with a
real loading state (session pill, context usage, view tabs, composer
actions, thread) and the reads stay plain. The root FAB's working state
became a real ring element inside its own boundary, so the button, its
ref and the mascot rig never suspend. The composer input shares a
boundary with no query read at all.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 apps/conciv/src/pane/chat-pane.tsx          |  5 +-
 apps/conciv/src/routes/panel.$sessionId.tsx | 63 ++++++++++++---------
 apps/conciv/src/routes/quick.tsx            | 21 ++++---
 apps/conciv/src/shell/fab-robot.tsx         |  2 +-
 apps/conciv/src/shell/fab.tsx               | 17 ++++--
 apps/conciv/src/shell/pending.tsx           | 45 +++++++++++++++
 apps/conciv/src/styles.css                  |  2 +-
 7 files changed, 111 insertions(+), 44 deletions(-)
 create mode 100644 apps/conciv/src/shell/pending.tsx

diff --git a/apps/conciv/src/pane/chat-pane.tsx b/apps/conciv/src/pane/chat-pane.tsx
index 167a41f52..23c48eb66 100644
--- a/apps/conciv/src/pane/chat-pane.tsx
+++ b/apps/conciv/src/pane/chat-pane.tsx
@@ -42,6 +42,7 @@ import {ToolFallbackCard} from './tool-fallback-card.js'
 import {useComposerTriggerSources} from './trigger-sources.js'
 import {GrabReference} from './grab-reference.js'
 import {CompactSpinner, ConversationSkeleton, Divider, ThinkingBubble} from './indicators.js'
+import {ComposerActionsPending} from '../shell/pending.js'
 import {EmptyStateSlot} from '../shell/empty-state.js'
 import {ExtensionSurface} from '../extension/extension-slots.js'
 import {makePaneGrabApi} from '../extension/pane-grab.js'
@@ -313,7 +314,7 @@ export function ChatPane(props: {sessionId: string}): JSX.Element {
               >
                 <Thread>
                   <Thread.Viewport>
-                    <Suspense>
+                    <Suspense fallback={<ConversationSkeleton />}>
                       <Thread.Welcome>
                         <Show when={!disconnected()} fallback={<ConversationSkeleton />}>
                           <EmptyStateSlot
@@ -383,7 +384,7 @@ export function ChatPane(props: {sessionId: string}): JSX.Element {
                             busy={compacting() ? <CompactSpinner /> : undefined}
                             triggers={triggerSources}
                           >
-                            <Suspense>
+                            <Suspense fallback={<ComposerActionsPending />}>
                               <ComposerActions
                                 sessionId={sessionId}
                                 compacting={compacting()}
diff --git a/apps/conciv/src/routes/panel.$sessionId.tsx b/apps/conciv/src/routes/panel.$sessionId.tsx
index 883413fbf..279231b10 100644
--- a/apps/conciv/src/routes/panel.$sessionId.tsx
+++ b/apps/conciv/src/routes/panel.$sessionId.tsx
@@ -2,7 +2,7 @@ import {Outlet, createFileRoute, redirect, useBlocker, useMatchRoute, useRouter}
 import {useQuery} from '@tanstack/solid-query'
 import {Tabs, TooltipIconButton} from '@conciv/ui-kit-system'
 import {ChevronDown, PictureInPicture2, Unplug} from 'lucide-solid'
-import {For, Show, createMemo, createSignal, type JSX} from 'solid-js'
+import {For, Show, Suspense, createMemo, createSignal, type JSX} from 'solid-js'
 import {Dynamic} from 'solid-js/web'
 import {isSessionId} from '@conciv/protocol/chat-types'
 import {useAnnounce, useAppData, useDisconnect, useGrabProvider, useInstances, useRpc} from '../app/context.js'
@@ -10,6 +10,7 @@ import {PaneContext, makeGrabStore, makePendingAttachmentQueue, type PaneContext
 import {SessionSelector} from '../composer/session-selector.js'
 import {usePanelChrome} from '../app/panel-chrome.js'
 import {ContextTracker} from '../pane/context-tracker.js'
+import {SessionPillPending, UsagePending, ViewTabsPending} from '../shell/pending.js'
 import {collectViews} from '../extension/extension-views.js'
 
 const HEAD = 'flex items-center gap-2.5 py-3 px-3.5 border-b border-b-pw-line-soft'
@@ -111,13 +112,17 @@ function PanelSession(): JSX.Element {
           <PictureInPicture2 class="size-5 block" aria-hidden="true" />
         </TooltipIconButton>
         <span class="tracking-[-0.01em] font-semibold">conciv</span>
-        <SessionSelector
-          variant="pill"
-          activeId={() => params().sessionId}
-          onActivate={activate}
-          onNewSession={() => void newSession()}
-        />
-        <ContextTracker usage={usage()} />
+        <Suspense fallback={<SessionPillPending variant="pill" />}>
+          <SessionSelector
+            variant="pill"
+            activeId={() => params().sessionId}
+            onActivate={activate}
+            onNewSession={() => void newSession()}
+          />
+        </Suspense>
+        <Suspense fallback={<UsagePending />}>
+          <ContextTracker usage={usage()} />
+        </Suspense>
         <Show when={connectMode && disconnect}>
           <TooltipIconButton
             tooltip="Disconnect this machine"
@@ -136,24 +141,30 @@ function PanelSession(): JSX.Element {
         </TooltipIconButton>
       </header>
       <Show when={views().length > 0}>
-        <div class="px-2.5 flex gap-2 items-center">
-          <Tabs.Root value={activeView()} onValueChange={(details) => switchView(details.value)} class="flex-1 min-w-0">
-            <Tabs.List>
-              <Tabs.Trigger value="chat" disabled={leaveGuard()}>
-                Chat
-              </Tabs.Trigger>
-              <For each={views()}>
-                {(view) => (
-                  <Tabs.Trigger value={view.id} disabled={leaveGuard()}>
-                    <Show when={view.icon}>{(icon) => <Dynamic component={icon()} class="size-3.5" />}</Show>
-                    {view.label}
-                  </Tabs.Trigger>
-                )}
-              </For>
-              <Tabs.Indicator />
-            </Tabs.List>
-          </Tabs.Root>
-        </div>
+        <Suspense fallback={<ViewTabsPending />}>
+          <div class="px-2.5 flex gap-2 items-center">
+            <Tabs.Root
+              value={activeView()}
+              onValueChange={(details) => switchView(details.value)}
+              class="flex-1 min-w-0"
+            >
+              <Tabs.List>
+                <Tabs.Trigger value="chat" disabled={leaveGuard()}>
+                  Chat
+                </Tabs.Trigger>
+                <For each={views()}>
+                  {(view) => (
+                    <Tabs.Trigger value={view.id} disabled={leaveGuard()}>
+                      <Show when={view.icon}>{(icon) => <Dynamic component={icon()} class="size-3.5" />}</Show>
+                      {view.label}
+                    </Tabs.Trigger>
+                  )}
+                </For>
+                <Tabs.Indicator />
+              </Tabs.List>
+            </Tabs.Root>
+          </div>
+        </Suspense>
       </Show>
       <Outlet />
     </PaneContext.Provider>
diff --git a/apps/conciv/src/routes/quick.tsx b/apps/conciv/src/routes/quick.tsx
index b0f5fec7c..df8edb1c0 100644
--- a/apps/conciv/src/routes/quick.tsx
+++ b/apps/conciv/src/routes/quick.tsx
@@ -1,7 +1,7 @@
 import {createFileRoute, redirect, useRouter} from '@tanstack/solid-router'
 import {useQuery} from '@tanstack/solid-query'
 import {createHotkey} from '@tanstack/solid-hotkeys'
-import {For, Show, onCleanup, onMount, type JSX} from 'solid-js'
+import {For, Show, Suspense, onCleanup, onMount, type JSX} from 'solid-js'
 import {TooltipIconButton, createResizable} from '@conciv/ui-kit-system'
 import {ChevronUp, Columns2, PictureInPicture2, X} from 'lucide-solid'
 import {useAppData, useRpc, useSuppressed} from '../app/context.js'
@@ -9,6 +9,7 @@ import {PaneProvider} from '../app/pane-provider.js'
 import {ChatPane} from '../pane/chat-pane.js'
 import {ContextTracker} from '../pane/context-tracker.js'
 import {SessionSelector} from '../composer/session-selector.js'
+import {SessionPillPending, UsagePending} from '../shell/pending.js'
 import {QuickSearchSchema, quickPaneIds, quickSearchFor} from '../lib/quick-search.js'
 
 const CLOSE =
@@ -191,13 +192,17 @@ function QuickLayer(): JSX.Element {
                 }}
               >
                 <div class="text-xs text-pw-text-3 leading-none font-pw-mono px-3 py-2 border-b border-b-pw-line-soft flex shrink-0 gap-2 items-center">
-                  <SessionSelector
-                    variant="bar"
-                    activeId={() => id}
-                    onActivate={(next) => activatePane(index(), next)}
-                    onNewSession={() => void addPane()}
-                  />
-                  <ContextTracker usage={usageOf(id)} />
+                  <Suspense fallback={<SessionPillPending variant="bar" />}>
+                    <SessionSelector
+                      variant="bar"
+                      activeId={() => id}
+                      onActivate={(next) => activatePane(index(), next)}
+                      onNewSession={() => void addPane()}
+                    />
+                  </Suspense>
+                  <Suspense fallback={<UsagePending />}>
+                    <ContextTracker usage={usageOf(id)} />
+                  </Suspense>
                   <TooltipIconButton
                     tooltip="Close pane"
                     class={CLOSE_PANE}
diff --git a/apps/conciv/src/shell/fab-robot.tsx b/apps/conciv/src/shell/fab-robot.tsx
index bbf12ed53..129d01800 100644
--- a/apps/conciv/src/shell/fab-robot.tsx
+++ b/apps/conciv/src/shell/fab-robot.tsx
@@ -17,7 +17,7 @@ export function FabRobot(props: {open: () => boolean; working: () => boolean}) {
   onCleanup(() => rig?.destroy())
 
   return (
-    <span class="pw-fab-rig" data-working={props.working()} aria-hidden="true">
+    <span class="pw-fab-rig" aria-hidden="true">
       <span class="pw-rig-layer pw-rig-head" ref={(el) => (headEl = el)} />
       <span class="pw-rig-layer pw-rig-antenna" ref={(el) => (antEl = el)} />
       <span class="pw-rig-layer pw-rig-eyes" ref={(el) => (eyesEl = el)} />
diff --git a/apps/conciv/src/shell/fab.tsx b/apps/conciv/src/shell/fab.tsx
index b0b7d7a90..8404aed49 100644
--- a/apps/conciv/src/shell/fab.tsx
+++ b/apps/conciv/src/shell/fab.tsx
@@ -1,4 +1,4 @@
-import type {JSX} from 'solid-js'
+import {Show, Suspense, type JSX} from 'solid-js'
 import type {TriggerPosition} from '@conciv/protocol/config-types'
 import type {DraggablePosition} from '../lib/draggable-position.js'
 import {FabRobot} from './fab-robot.js'
@@ -14,12 +14,12 @@ const FAB_POS: Record<TriggerPosition, string> = {
 
 const FAB_BASE =
   'fixed size-13 rounded-pw-pill border border-pw-line bg-pw-panel text-pw-accent text-[1.375rem] cursor-pointer pointer-events-auto shadow-pw-lg inline-flex items-center justify-center trans-lift anim-fab focus-ring [@media(hover:hover)_and_(pointer:fine)]:hover:[transform:translateY(-0.125rem)] [@media(hover:hover)_and_(pointer:fine)]:hover:shadow-pw-hover active:[transform:translateY(0)_scale(0.94)]'
-const FAB_ATTN =
-  "after:content-[''] after:absolute after:-inset-[0.1875rem] after:rounded-pw-pill after:border-2 after:border-pw-accent after:anim-fab-ring"
+const FAB_BUSY = 'pw-fab-busy absolute -inset-[0.1875rem] rounded-pw-pill pointer-events-none'
+const FAB_ATTN = 'border-2 border-pw-accent anim-fab-ring'
 const FAB_DRAGGING = 'transition-none z-[2147483647] cursor-grabbing'
 
-function fabClass(pulsing: boolean, position: TriggerPosition, dragging: boolean): string {
-  return `${FAB_BASE} ${FAB_POS[position]}${pulsing ? ` ${FAB_ATTN}` : ''}${dragging ? ` ${FAB_DRAGGING}` : ''}`
+function fabClass(position: TriggerPosition, dragging: boolean): string {
+  return `${FAB_BASE} ${FAB_POS[position]}${dragging ? ` ${FAB_DRAGGING}` : ''}`
 }
 
 function fabLabel(open: boolean): string {
@@ -38,7 +38,7 @@ export function ShellFab(props: {
     <button
       type="button"
       ref={props.ref}
-      class={fabClass(!props.open() && props.working(), props.fab.position(), props.fab.dragging())}
+      class={fabClass(props.fab.position(), props.fab.dragging())}
       data-pw-fab
       data-pw-suppressed={props.suppressed()}
       style={props.fab.dragStyle()}
@@ -50,6 +50,11 @@ export function ShellFab(props: {
         if (!props.fab.consumeClick()) props.onToggle()
       }}
     >
+      <Suspense>
+        <Show when={props.working()}>
+          <span class={props.open() ? FAB_BUSY : `${FAB_BUSY} ${FAB_ATTN}`} aria-hidden="true" />
+        </Show>
+      </Suspense>
       <FabRobot open={props.open} working={props.working} />
     </button>
   )
diff --git a/apps/conciv/src/shell/pending.tsx b/apps/conciv/src/shell/pending.tsx
new file mode 100644
index 000000000..18645fa99
--- /dev/null
+++ b/apps/conciv/src/shell/pending.tsx
@@ -0,0 +1,45 @@
+import {type JSX} from 'solid-js'
+
+const SKEL = 'skel-bg [background-size:200%_100%] anim-skel'
+
+export function SessionPillPending(props: {variant: 'pill' | 'bar'}): JSX.Element {
+  return (
+    <div class="inline-flex min-w-0 items-center" role="status">
+      <div
+        class={`${SKEL} h-7 ${props.variant === 'pill' ? 'w-32 rounded-pw-pill' : 'w-24 rounded-pw-sm'}`}
+        aria-hidden="true"
+      />
+      <span class="sr-only">Loading sessions…</span>
+    </div>
+  )
+}
+
+export function UsagePending(): JSX.Element {
+  return (
+    <div class="inline-flex items-center px-1.5 py-0.5" role="status">
+      <div class={`${SKEL} h-4 w-10 rounded-pw-sm`} aria-hidden="true" />
+      <span class="sr-only">Loading context usage…</span>
+    </div>
+  )
+}
+
+export function ViewTabsPending(): JSX.Element {
+  return (
+    <div class="px-2.5 flex gap-2 items-center" role="status">
+      <div class={`${SKEL} h-8 w-16 rounded-pw-sm`} aria-hidden="true" />
+      <div class={`${SKEL} h-8 w-20 rounded-pw-sm`} aria-hidden="true" />
+      <span class="sr-only">Loading views…</span>
+    </div>
+  )
+}
+
+export function ComposerActionsPending(): JSX.Element {
+  return (
+    <div class="flex gap-1 items-center" role="status">
+      <div class={`${SKEL} size-8.5 rounded-pw-pill`} aria-hidden="true" />
+      <div class={`${SKEL} size-8.5 rounded-pw-pill`} aria-hidden="true" />
+      <div class={`${SKEL} size-8.5 rounded-pw-pill`} aria-hidden="true" />
+      <span class="sr-only">Loading composer actions…</span>
+    </div>
+  )
+}
diff --git a/apps/conciv/src/styles.css b/apps/conciv/src/styles.css
index 739553311..78b0c0918 100644
--- a/apps/conciv/src/styles.css
+++ b/apps/conciv/src/styles.css
@@ -88,7 +88,7 @@
   transform-origin: 50% 32.8%; /* antenna base -> sway rotates about where it meets the head */
 }
 /* Working: a magenta glow pulse on the eyes. filter only; GSAP owns the transforms, so no clash. */
-.pw-fab-rig[data-working='true'] .pw-rig-eyes {
+.pw-fab-busy ~ .pw-fab-rig .pw-rig-eyes {
   animation: pw-rig-glow 1.3s ease-in-out infinite;
 }
 @keyframes pw-rig-glow {

From 21e85a0dee709888c65f5e31bbbf225c9ba4aea2 Mon Sep 17 00:00:00 2001
From: Omri Katz <9701896+omridevk@users.noreply.github.com>
Date: Mon, 10 Aug 2026 10:02:40 +0300
Subject: [PATCH 2/3] fix(test): wait for the live page plane, not the FAB,
 before tanstack page tools (#346)

waitForWidget treated "the FAB is visible" as "the widget is connected". That
held only by accident: the FAB's class read sessions.data, so the whole button
suspended until that query round trip finished, which was always after the page
plane's page.queries subscription reached the server. #346 moved the working()
read into its own Suspense island, so the FAB now paints immediately and the
accidental synchronisation is gone. The first adapter.client.detect() then hit
an empty page bus, got NO_PAGE_CLIENT, and the adapter's catch turned it into
null.

Gate the helper on the real readiness signal instead: the rpc observer's
completed() for the page.queries subscription.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 packages/extensions/tanstack/test/helpers/tanstack-test-api.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/extensions/tanstack/test/helpers/tanstack-test-api.ts b/packages/extensions/tanstack/test/helpers/tanstack-test-api.ts
index e8deff05c..57beb5ee0 100644
--- a/packages/extensions/tanstack/test/helpers/tanstack-test-api.ts
+++ b/packages/extensions/tanstack/test/helpers/tanstack-test-api.ts
@@ -3,6 +3,7 @@ import type {Page} from 'playwright'
 import {afterAll, beforeAll} from 'vitest'
 import {expect as expectLocator} from 'playwright/test'
 import {getExtensionTestApi, serveDir, type ExtensionTestApi} from '@conciv/extension-testkit'
+import {rpcObserverFor} from '@conciv/extension-testkit/rpc-observer'
 import type {FrameworkAdapter} from '@conciv/protocol/framework-types'
 import tanstackExtension from '../../src/server.js'
 
@@ -38,7 +39,9 @@ export function tanstackAdapter(api: ExtensionTestApi): FrameworkAdapter {
 }
 
 export async function waitForWidget(page: Page): Promise<void> {
+  const planeSubscribed = rpcObserverFor(page).completed({path: ['page', 'queries'], timeout: 30_000})
   await expectLocator(page.getByRole('button', {name: 'Open conciv chat'})).toBeVisible({timeout: 30_000})
+  await planeSubscribed
 }
 
 export async function gotoAbout(page: Page): Promise<void> {

From bde77b56a3ff8c4d76b04500b040f7b93ca1eb2f Mon Sep 17 00:00:00 2001
From: Omri Katz <9701896+omridevk@users.noreply.github.com>
Date: Tue, 11 Aug 2026 02:51:46 +0300
Subject: [PATCH 3/3] test(embed): port the session-list-loading focus
 regression onto Playwright Test

Main moved the embed integration suite off vitest onto @playwright/test under
tests/e2e (#415) since this branch opened. Port the pending test from the old
packages/embed/test/panel-focus.it.test.ts onto the new suite: native
expect()/test.describe idiom, hostPage/serveHost from tests/helpers, the
page.route hold of the first /rpc/sessions/list carried over unchanged.
---
 .../embed/tests/e2e/panel-focus.it.test.ts    | 42 +++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/packages/embed/tests/e2e/panel-focus.it.test.ts b/packages/embed/tests/e2e/panel-focus.it.test.ts
index d03fb5b73..7deeb2b4b 100644
--- a/packages/embed/tests/e2e/panel-focus.it.test.ts
+++ b/packages/embed/tests/e2e/panel-focus.it.test.ts
@@ -6,11 +6,16 @@ import {hostPage, serveHost} from '../helpers/host.js'
 const suite = setupWidgetSuite()
 
 const COMPOSER_NAME = 'Message the conciv agent'
+const SESSION_PILL_NAME = 'Session: New session'
 
 function composer(page: Page) {
   return page.getByRole('textbox', {name: COMPOSER_NAME})
 }
 
+function sessionPill(page: Page) {
+  return page.getByRole('button', {name: SESSION_PILL_NAME})
+}
+
 async function ensurePanelClosed(page: Page): Promise<void> {
   const minimize = page.getByRole('button', {name: 'Minimize conciv chat'})
   const opener = page.getByRole('button', {name: 'Open conciv chat'})
@@ -19,6 +24,23 @@ async function ensurePanelClosed(page: Page): Promise<void> {
   await expect(opener).toBeVisible({timeout: 30_000})
 }
 
+async function holdFirstSessionList(page: Page): Promise<() => void> {
+  let release = (): void => {}
+  const held = new Promise<void>((resolve) => {
+    release = () => resolve()
+  })
+  let seen = 0
+  await page.route(
+    (url) => url.pathname.endsWith('/rpc/sessions/list'),
+    async (route) => {
+      seen += 1
+      if (seen === 1) await held
+      await route.continue()
+    },
+  )
+  return release
+}
+
 type HostedPanel = {host: Awaited<ReturnType<typeof serveHost>>; page: Page; hostButton: Locator}
 
 const dedicatedHosts: Array<{close: () => Promise<void>}> = []
@@ -55,6 +77,26 @@ test.describe('panel open focuses the composer', () => {
     await page.keyboard.type('typed without clicking')
     await expect(composer(page)).toHaveText('typed without clicking')
   })
+
+  test('paints the shell while the session list is still loading, then focuses the composer', async ({page}) => {
+    test.setTimeout(90_000)
+    const host = await serveHost(() =>
+      hostPage({apiBase: suite.kit().base, widget: '{"quickTerminal":false,"transport":"fetch"}'}),
+    )
+    dedicatedHosts.push(host)
+    const releaseSessionList = await holdFirstSessionList(page)
+    await page.goto(host.base, {waitUntil: 'domcontentloaded'})
+    try {
+      await expect(page.getByRole('button', {name: 'Open conciv chat'})).toBeVisible({timeout: 15_000})
+    } finally {
+      releaseSessionList()
+    }
+    await openPanel(page)
+    await expect(sessionPill(page)).toBeVisible({timeout: 30_000})
+    await expect(composer(page)).toBeFocused({timeout: 10_000})
+    await page.keyboard.type('typed after the session list resolved')
+    await expect(composer(page)).toHaveText('typed after the session list resolved')
+  })
 })
 
 test.describe('panel close restores focus: host element captured at open wins, FAB is the fallback', () => {