fix(web): prevent message sync pill layout flicker

apps/web/src/components/ChatView.tsx

@@ -6703,7 +6703,11 @@ function ChatViewContent(props: ChatViewProps) {
                     <ComposerBannerStack className="relative z-0" items={composerBannerItems} />
                   )}
                   {threadSyncPhase && !activeEnvironmentUnavailable ? (
-                    <ThreadSyncStatusPill phase={threadSyncPhase} />
+                    <ThreadSyncStatusPill
+                      key={activeThread.id}
+                      phase={threadSyncPhase}
+                      raised={showScrollToBottom}
+                    />
                   ) : null}
                   <div
                     className="relative"

apps/web/src/components/chat/ThreadSyncStatusPill.test.tsx

@@ -4,14 +4,25 @@ import { describe, expect, it } from "vite-plus/test";
 import { ThreadSyncStatusPill } from "./ThreadSyncStatusPill";
 
 describe("ThreadSyncStatusPill", () => {
-  it.each([
-    ["loading", "Loading messages..."],
-    ["syncing", "Syncing messages..."],
-  ] as const)("renders the %s message sync phase", (phase, label) => {
-    const markup = renderToStaticMarkup(<ThreadSyncStatusPill phase={phase} />);
+  it("renders loading immediately without participating in composer layout", () => {
+    const markup = renderToStaticMarkup(<ThreadSyncStatusPill phase="loading" raised={false} />);
 
     expect(markup).toContain('role="status"');
-    expect(markup).toContain(label);
+    expect(markup).toContain("Loading messages...");
+    expect(markup).toContain("absolute");
+    expect(markup).toContain("calc(100% + 0.5rem)");
     expect(markup).not.toContain("animate-");
   });
+
+  it("withholds the cached-thread syncing phase initially", () => {
+    const markup = renderToStaticMarkup(<ThreadSyncStatusPill phase="syncing" raised={false} />);
+
+    expect(markup).toBe("");
+  });
+
+  it("moves above the scroll-to-end control when it is visible", () => {
+    const markup = renderToStaticMarkup(<ThreadSyncStatusPill phase="loading" raised />);
+
+    expect(markup).toContain("calc(100% + 2.75rem)");
+  });
 });

apps/web/src/components/chat/ThreadSyncStatusPill.tsx

@@ -1,15 +1,33 @@
 import { LoaderCircleIcon } from "lucide-react";
+import { useEffect, useState } from "react";
 
 import { threadSyncLabel, type ThreadSyncPhase } from "../../threadSync";
 
-export function ThreadSyncStatusPill({ phase }: { readonly phase: ThreadSyncPhase }) {
+export function ThreadSyncStatusPill({
+  phase,
+  raised,
+}: {
+  readonly phase: ThreadSyncPhase;
+  readonly raised: boolean;
+}) {
+  const [syncingVisible, setSyncingVisible] = useState(phase === "loading");
+
+  useEffect(() => {
+    if (phase !== "syncing") return;
+    const timeoutId = globalThis.setTimeout(() => setSyncingVisible(true), 300);
+    return () => globalThis.clearTimeout(timeoutId);
+  }, [phase]);
+
+  if (phase === "syncing" && !syncingVisible) return null;
+
   const label = threadSyncLabel(phase);
 
   return (
     <div
       aria-label={label}
-      className="pointer-events-none mx-auto mb-2 flex w-fit max-w-full items-center gap-2 rounded-full border border-border/60 bg-card/95 px-3 py-1.5 text-foreground text-xs font-medium shadow-sm"
+      className="pointer-events-none absolute left-1/2 flex w-fit max-w-full -translate-x-1/2 items-center gap-2 rounded-full border border-border/60 bg-card/95 px-3 py-1.5 text-foreground text-xs font-medium shadow-sm"
       role="status"
+      style={{ bottom: raised ? "calc(100% + 2.75rem)" : "calc(100% + 0.5rem)" }}
     >
       <LoaderCircleIcon aria-hidden className="size-3.5 shrink-0 text-muted-foreground" />
       <span className="truncate">{label}</span>