Commit de025aa69ffb0ce1a45d30aed25c60454660b62d | the-knife

author	Julius Marminge <julius0216@outlook.com> 2026-09-03 12:52:50-07:00
committer	GitHub <noreply@github.com> 2026-09-03 12:52:50-07:00
log	de025aa69ffb0ce1a45d30aed25c60454660b62d
tree	4c55576d363111766c667e23a06d5eb160fa1558
parent	db8d60f486c5fc1a80d01b591a359f0c87f0868c
signature	Signed by PGP key B5690EEEBB952194

fix(mobile): show loading and syncing in the working pill (#9466)

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

4 files changed, 60 insertions(+), 44 deletions(-)

apps
- mobile
  - src
    features
    threads
    ThreadComposer.tsx
    ThreadDetailScreen.tsx
    ThreadRouteScreen.tsx
    floating-working-control.tsx

apps/mobile/src/features/threads/ThreadComposer.tsx+2-22

 @@ -110,12 +110,6 @@ export interface ThreadComposerProps {
   readonly connectionState: RemoteClientConnectionState;
   readonly connectionError: string | null;
   readonly environmentLabel: string | null;
-  /**
-   * Message sync phase for the selected thread (drives the status pill):
-   * "loading" = first fetch, nothing to show yet; "syncing" = cached messages
-   * are on screen while they reconcile with the server.
-   */
-  readonly threadSyncPhase?: "loading" | "syncing" | null;
   readonly selectedThread: OrchestrationThreadShell;
   readonly serverConfig: T3ServerConfig | null;
   readonly queueCount: number;
 @@ -225,7 +219,7 @@ export function ComposerSurface(props: {
 }
 type ComposerStatusPillState = {
-  readonly kind: "unavailable" | "reconnecting" | "syncing";
+  readonly kind: "unavailable" | "reconnecting";
   readonly label: string;
 };
 @@ -233,7 +227,6 @@ function composerConnectionStatus(input: {
   readonly connectionError: string | null;
   readonly connectionState: RemoteClientConnectionState;
   readonly environmentLabel: string | null;
-  readonly threadSyncPhase?: "loading" | "syncing" | null;
 }): ComposerStatusPillState | null {
   const environmentLabel = input.environmentLabel ?? "Environment";
 @@ -259,18 +252,6 @@ function composerConnectionStatus(input: {
     case "available":
       return { kind: "unavailable", label: `${environmentLabel} is not connected` };
     case "connected":
-      break;
-  }
-  // Connected: the pill is the single loading/sync indicator. One stable
-  // label per open — "Loading" when starting from scratch, "Syncing" when
-  // cached messages are already visible.
-  switch (input.threadSyncPhase) {
-    case "loading":
-      return { kind: "syncing", label: "Loading messages..." };
-    case "syncing":
-      return { kind: "syncing", label: "Syncing messages..." };
-    default:
       return null;
   }
 }
 @@ -279,7 +260,7 @@ const ComposerConnectionStatusPill = memo(function ComposerConnectionStatusPill(
   readonly onPress: () => void;
   readonly status: ComposerStatusPillState;
 }) {
-  const isReconnecting = props.status.kind !== "unavailable";
+  const isReconnecting = props.status.kind === "reconnecting";
   return (
     <Animated.View
       className="absolute inset-x-0 bottom-full items-center pb-2"
 @@ -344,7 +325,6 @@ export const ThreadComposer = memo(function ThreadComposer(props: ThreadComposer
     connectionError: props.connectionError,
     connectionState: props.connectionState,
     environmentLabel: props.environmentLabel,
-    threadSyncPhase: props.threadSyncPhase,
   });
   const selectedProviderStatus = useMemo(() => {
     if (!props.serverConfig) return null;

apps/mobile/src/features/threads/ThreadDetailScreen.tsx+24-13

 @@ -74,6 +74,7 @@ import { PendingUserInputCard } from "./PendingUserInputCard";
 import {
   FLOATING_WORKING_CONTROL_COVERAGE,
   FloatingWorkingControl,
+  type FloatingWorkingStatus,
 } from "./floating-working-control";
 import {
   derivePendingUserInputMaxHeight,
 @@ -301,27 +302,38 @@ export const ThreadDetailScreen = memo(function ThreadDetailScreen(props: Thread
   // The raw sync status enters "synchronizing" on every full fetch, cached or
   // not. Whether messages are already on screen decides the pill label: no
   // data yet → "Loading messages", cached data reconciling → "Syncing".
-  const threadSyncPhase = (() => {
+  const threadSyncLabel = (() => {
     switch (props.threadSyncStatus) {
       case "empty":
       case "cached":
       case "synchronizing":
         if (contentPresentationKind === "ready") {
-          return "syncing" as const;
+          return "Syncing messages...";
         }
-        return contentPresentationKind === "loading" ? ("loading" as const) : null;
+        return contentPresentationKind === "loading" ? "Loading messages..." : null;
       default:
         return null;
     }
   })();
-  const showWorkingControl =
+  // One floating pill above the composer: it reads the sync state while
-    props.activeWorkStartedAt !== null &&
+  // messages load, then the working timer once the feed is settled.
-    contentPresentationKind === "ready" &&
+  const floatingStatus = ((): FloatingWorkingStatus | null => {
-    threadSyncPhase === null &&
+    if (
-    props.connectionStateLabel === "connected" &&
+      props.connectionStateLabel !== "connected" ||
-    props.activePendingApproval === null &&
+      props.activePendingApproval !== null ||
-    props.activePendingUserInput === null;
+      props.activePendingUserInput !== null
-  const floatingWorkingStartedAt = showWorkingControl ? props.activeWorkStartedAt : null;
+    ) {
+      return null;
+    }
+    if (threadSyncLabel !== null) {
+      return { kind: "syncing", label: threadSyncLabel };
+    }
+    if (props.activeWorkStartedAt !== null && contentPresentationKind === "ready") {
+      return { kind: "working", startedAt: props.activeWorkStartedAt };
+    }
+    return null;
+  })();
+  const showWorkingControl = floatingStatus !== null;
   const selectedThreadFeed = props.selectedThreadFeed;
   const composerChrome = composerExpanded ? COMPOSER_EXPANDED_CHROME : COMPOSER_COLLAPSED_CHROME;
   const composerOverlapHeight = composerChrome + composerBottomInset;
 @@ -748,7 +760,7 @@ export const ThreadDetailScreen = memo(function ThreadDetailScreen(props: Thread
             <View ref={composerOverlayRef} onLayout={onComposerLayout} className="w-full">
               <FloatingWorkingControl
                 colorScheme={isDarkMode ? "dark" : "light"}
-                startedAt={floatingWorkingStartedAt}
+                status={floatingStatus}
                 showScrollToEnd={showScrollToEndButton}
                 onScrollToEnd={handleScrollToEnd}
               />
 @@ -807,7 +819,6 @@ export const ThreadDetailScreen = memo(function ThreadDetailScreen(props: Thread
                   connectionState={props.connectionStateLabel}
                   connectionError={props.connectionError}
                   environmentLabel={props.environmentLabel}
-                  threadSyncPhase={threadSyncPhase}
                   selectedThread={props.selectedThread}
                   serverConfig={props.serverConfig}
                   queueCount={props.selectedThreadQueueCount}

apps/mobile/src/features/threads/ThreadRouteScreen.tsx+3-2

 @@ -157,8 +157,9 @@ export function ThreadRouteScreen(props: ThreadRouteScreenProps) {
   // Render the full thread chrome (header, feed, composer) as soon as the
   // thread SHELL is known — no blocking on message detail. The feed shows a
-  // loading placeholder while messages fetch, and the composer's connection
+  // loading placeholder while messages fetch, the floating pill above the
-  // pill reports connecting/reconnecting/syncing status.
+  // composer reports loading/syncing, and the composer's connection pill
+  // reports connecting/reconnecting status.
   if (selectedThread !== null && selectedThreadKey === routeThreadKey) {
     return <ThreadRouteContent {...props} selectedThreadDetailState={selectedThreadDetailState} />;
   }

apps/mobile/src/features/threads/floating-working-control.tsx+31-7

 @@ -1,6 +1,6 @@
 import { GlassContainer, GlassView } from "expo-glass-effect";
 import { useEffect, useState } from "react";
-import { Text as SystemText, View } from "react-native";
+import { ActivityIndicator, Text as SystemText, View } from "react-native";
 import Animated, {
   Easing,
   FadeIn,
 @@ -40,9 +40,17 @@ const AnimatedGlassView = Animated.createAnimatedComponent(UniwindGlassView);
 export const FLOATING_WORKING_CONTROL_COVERAGE = CONTROL_HEIGHT + CONTROL_COMPOSER_GAP;
+/**
+ * What the floating pill says. Syncing and working share one element so the
+ * label swaps in place instead of one pill fading out for another.
+ */
+export type FloatingWorkingStatus =
+  | { readonly kind: "working"; readonly startedAt: string }
+  | { readonly kind: "syncing"; readonly label: string };
 export function FloatingWorkingControl(props: {
   readonly colorScheme: "light" | "dark";
-  readonly startedAt: string | null;
+  readonly status: FloatingWorkingStatus | null;
   readonly showScrollToEnd: boolean;
   readonly onScrollToEnd: () => void;
 }) {
 @@ -62,7 +70,7 @@ export function FloatingWorkingControl(props: {
     opacity: separationProgress.value,
   }));
-  if (props.startedAt === null && !props.showScrollToEnd) {
+  if (props.status === null && !props.showScrollToEnd) {
     return null;
   }
 @@ -74,7 +82,7 @@ export function FloatingWorkingControl(props: {
       entering={NATIVE_LIQUID_GLASS_SUPPORTED ? undefined : CONTROL_ENTERING}
       exiting={NATIVE_LIQUID_GLASS_SUPPORTED ? undefined : CONTROL_EXITING}
     >
-      {props.startedAt !== null && NATIVE_LIQUID_GLASS_SUPPORTED ? (
+      {props.status !== null && NATIVE_LIQUID_GLASS_SUPPORTED ? (
         <UniwindGlassContainer
           spacing={GLASS_MERGE_SPACING}
           pointerEvents="box-none"
 @@ -87,7 +95,7 @@ export function FloatingWorkingControl(props: {
             className="h-11 justify-center overflow-hidden rounded-full"
             style={timerStyle}
           >
-            <WorkingDuration startedAt={props.startedAt} />
+            <FloatingStatusLabel status={props.status} />
           </AnimatedGlassView>
           <AnimatedGlassView
 @@ -105,14 +113,14 @@ export function FloatingWorkingControl(props: {
             </Animated.View>
           </AnimatedGlassView>
         </UniwindGlassContainer>
-      ) : props.startedAt !== null ? (
+      ) : props.status !== null ? (
         <View pointerEvents="box-none" className="flex-row items-center gap-4">
           <Animated.View
             pointerEvents="none"
             className="h-11 justify-center rounded-full border border-border bg-card shadow-md shadow-black/10"
             style={timerStyle}
           >
-            <WorkingDuration startedAt={props.startedAt} />
+            <FloatingStatusLabel status={props.status} />
           </Animated.View>
           <Animated.View
 @@ -153,6 +161,22 @@ export function FloatingWorkingControl(props: {
   );
 }
+function FloatingStatusLabel(props: { readonly status: FloatingWorkingStatus }) {
+  if (props.status.kind === "syncing") {
+    return (
+      <View
+        accessible
+        accessibilityLabel={props.status.label}
+        className="h-11 flex-row items-center gap-2 px-4"
+      >
+        <ActivityIndicator size="small" colorClassName="accent-icon-muted" />
+        <Text className="font-t3-medium text-xs text-foreground">{props.status.label}</Text>
+      </View>
+    );
+  }
+  return <WorkingDuration startedAt={props.status.startedAt} />;
+}
 function WorkingDuration(props: { readonly startedAt: string }) {
   const [nowMs, setNowMs] = useState(() => Date.now());