feat(orchestration): bound thread history and resume payloads

- Add paginated thread history with bounded snapshots and replay limits - Trim oversized wire payloads and support progressive mobile history loading

Julius Marminge committed 3 months ago

Commit 7d42d311 parent e3883a943 files · +4239 −211Browse files

Showing the changes to apps/mobile/src (5 of 43 files). Show all

Unified · Split

5 files

apps/mobile/src/connection/runtime.ts +9 −2
apps/mobile/src/features/threads/ThreadDetailScreen.tsx +4 −1
apps/mobile/src/features/threads/ThreadFeed.tsx +48 −59
apps/mobile/src/features/threads/ThreadRouteScreen.tsx +25 −0
apps/mobile/src/state/use-thread-outbox-drain.ts +1 −0

apps/mobile/src/connection/runtime.ts+9−2

 import { Connection } from "@t3tools/client-runtime/connection";
 import { shellSnapshotLoaderLayer } from "@t3tools/client-runtime/state/shell";
-import { threadSnapshotLoaderLayer } from "@t3tools/client-runtime/state/threads";
+import {
+  boundedThreadSnapshotLoaderLayer,
+  threadHistoryControllerLayer,
+} from "@t3tools/client-runtime/state/threads";
 import * as Layer from "effect/Layer";
 import { Atom } from "effect/unstable/reactivity";
   Layer.provide(runtimeContextLayer),
 );
-const snapshotLoaderLayer = Layer.merge(threadSnapshotLoaderLayer, shellSnapshotLoaderLayer);
+const snapshotLoaderLayer = Layer.mergeAll(
+  boundedThreadSnapshotLoaderLayer,
+  shellSnapshotLoaderLayer,
+  threadHistoryControllerLayer,
+);
 type ConnectionLayerSource =
   | typeof Connection.layer

apps/mobile/src/features/threads/ThreadDetailScreen.tsx+4−1

   COMPOSER_EXPANDED_CHROME,
   ThreadComposer,
 } from "./ThreadComposer";
-import { ThreadFeed } from "./ThreadFeed";
+import { ThreadFeed, type ThreadFeedHistoryControls } from "./ThreadFeed";
 import { ThreadRelationshipsBanner } from "./ThreadRelationshipsBanner";
 import { ThreadQueueControl } from "./ThreadQueueControl";
 import type { ThreadContentPresentation } from "./threadContentPresentation";
   readonly connectionStateLabel: EnvironmentConnectionPhase;
   /** Message sync status for the selected thread (drives the composer status pill). */
   readonly threadSyncStatus?: EnvironmentThreadStatus;
+  /** Progressive history controls for oversized mobile thread opens. */
+  readonly historyControls?: ThreadFeedHistoryControls;
   readonly activeThreadBusy: boolean;
   readonly canStopThread: boolean;
   readonly environmentId: EnvironmentId;
             contentTopInset={0}
             contentBottomInset={estimatedOverlayHeight}
             contentMaxWidth={contentMaxWidth}
+            historyControls={props.historyControls}
             topAccessory={
               <ThreadRelationshipsBanner
                 environmentId={props.environmentId}

apps/mobile/src/features/threads/ThreadFeed.tsx+48−59

 import { isPdfFile } from "../../lib/filePreview";
 import { PresentationSource } from "../../components/NativePresentation";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import Animated, {
+import Animated, { FadeIn, FadeInUp, type SharedValue } from "react-native-reanimated";
-  FadeIn,
-  FadeInUp,
-  useSharedValue,
-  withTiming,
-  type LayoutAnimationsValues,
-  type SharedValue,
-} from "react-native-reanimated";
 import { useThemeColor } from "../../lib/useThemeColor";
 import { IOS_NAV_BAR_HEIGHT } from "../../lib/layoutMetrics";
 import { useFontFamily } from "../../lib/useFontFamily";
   return MESSAGE_TIME_FORMATTER.format(timestamp);
 }
-// Rows shift when content above them grows (streaming text, work-log folds);
-// animating the container position turns those jumps into slides. Applied
-// conditionally — see the gated transition in ThreadFeed: while browsing
-// history the animation must NOT run, or every estimate→actual size
-// correction plays as a visible slide against the instant scroll-offset
-// compensation from maintainVisibleContentPosition.
-const FEED_ITEM_LAYOUT_DURATION_MS = 180;
 // Pre-measurement heights for getFixedItemSize, mirroring renderFeedEntry's
 // classNames. The fold row's min-h-11 (44px) stays taller than its single
 // text-sm line at every supported base font size (26px at the 22pt maximum),
   return Number.isFinite(timestamp) && Date.now() - timestamp < FRESH_ENTRY_WINDOW_MS;
 }
+export interface ThreadFeedHistoryControls {
+  readonly hasMoreHistory: boolean;
+  readonly loading: boolean;
+  readonly error: string | null;
+  readonly onLoadEarlier: () => void;
+}
 export interface ThreadFeedProps {
   readonly environmentId: EnvironmentId;
   readonly threadId: ThreadId;
   readonly contentInsetEndAdjustment: SharedValue<number>;
   readonly contentTopInset?: number;
   readonly contentBottomInset?: number;
+  readonly historyControls?: ThreadFeedHistoryControls;
   readonly topAccessory?: ReactNode;
   readonly contentMaxWidth?: number;
   readonly layoutVariant?: LayoutVariant;
   return lastSlashIndex >= 0 ? normalized.slice(lastSlashIndex + 1) : normalized;
 }
+function ThreadFeedLoadEarlierControl(props: ThreadFeedHistoryControls) {
+  const mutedColor = useThemeColor("--color-icon-subtle");
+  const accentColor = useThemeColor("--color-primary");
+  if (!props.hasMoreHistory && props.error === null) {
+    return null;
+  }
+  return (
+    <View className="mb-3 items-center gap-1.5 px-2">
+      {props.hasMoreHistory ? (
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel="Load earlier activity"
+          disabled={props.loading}
+          onPress={props.onLoadEarlier}
+          className="min-h-9 flex-row items-center justify-center gap-2 rounded-full border border-border/60 bg-surface/80 px-4 py-2 disabled:opacity-50"
+        >
+          {props.loading ? (
+            <ActivityIndicator size="small" color={accentColor} />
+          ) : (
+            <SymbolView name="chevron.up" size={12} tintColor={accentColor} type="monochrome" />
+          )}
+          <Text className="text-sm font-medium text-foreground">
+            {props.loading ? "Loading earlier activity…" : "Load earlier activity"}
+          </Text>
+        </Pressable>
+      ) : null}
+      {props.error !== null ? (
+        <Text className="text-center text-xs" style={{ color: mutedColor }}>
+          {props.error}
+        </Text>
+      ) : null}
+    </View>
+  );
+}
 function ThreadFeedPlaceholder(props: {
   readonly bottomInset: number;
   readonly detail: string;
     },
     [props.onHeaderMaterialVisibilityChange],
   );
-  // True while the viewport sits within ~one screen of the list end — the
-  // only region where layout shifts should animate. Starts true because the
-  // list opens pinned to the end.
-  const nearListEnd = useSharedValue(true);
   const handleScroll = useCallback(
     (event: NativeSyntheticEvent<NativeScrollEvent>) => {
       // anchorTopInset, not topContentInset: under automatic insets the list
       // UIKit's adjustedContentInset, so topContentInset is 0 here). Add the
       // header height back or the material toggles a full header too late.
       reportHeaderMaterialVisibility(event.nativeEvent.contentOffset.y + anchorTopInset > 6);
-      const { contentOffset, contentSize, layoutMeasurement } = event.nativeEvent;
-      nearListEnd.value =
-        contentSize.height - layoutMeasurement.height - contentOffset.y < layoutMeasurement.height;
       // LegendList recomputes its inset-aware end distance before invoking
       // this handler, so getState() is current. Only the actual end re-arms
       // follow: its broader maintain-scroll threshold is large enough for a
         });
       }
     },
-    [
+    [reportHeaderMaterialVisibility, anchorTopInset, props.listRef, transitionEndFollow],
-      reportHeaderMaterialVisibility,
-      anchorTopInset,
-      nearListEnd,
-      props.listRef,
-      transitionEndFollow,
-    ],
   );
   const clearUserScrollSettle = useCallback(() => {
     if (userScrollSettleTimerRef.current !== null) {
     }
   }, [clearUserScrollSettle, props.anchorMessageId, transitionEndFollow]);
-  // Gated variant of the 180ms feed layout slide. Instant while browsing
-  // history: maintainVisibleContentPosition compensates the scroll offset in
-  // the same frame a row's measured size lands, so an instant reposition is
-  // invisible — animating it is exactly what made cold upward scrolls slide
-  // and jump. Near the end the slide stays on: streaming growth and sends
-  // shift rows at rest, where the animation is the thing preventing a hard
-  // visual snap.
-  const feedItemLayoutTransition = useMemo(() => {
-    return (values: LayoutAnimationsValues) => {
-      "worklet";
-      const duration = nearListEnd.value ? FEED_ITEM_LAYOUT_DURATION_MS : 0;
-      return {
-        initialValues: {
-          originX: values.currentOriginX,
-          originY: values.currentOriginY,
-          width: values.currentWidth,
-          height: values.currentHeight,
-        },
-        animations: {
-          originX: withTiming(values.targetOriginX, { duration }),
-          originY: withTiming(values.targetOriginY, { duration }),
-          width: withTiming(values.targetWidth, { duration }),
-          height: withTiming(values.targetHeight, { duration }),
-        },
-      };
-    };
-  }, [nearListEnd]);
   const handleViewportLayout = useCallback((event: LayoutChangeEvent) => {
     const nextWidth = Math.round(event.nativeEvent.layout.width);
     const nextHeight = Math.round(event.nativeEvent.layout.height);
                 }
               : { scrollIndicatorInsets: { top: topContentInset, bottom: 0 } })}
             {...(anchoredEndSpace ? { anchoredEndSpace } : {})}
-            itemLayoutAnimation={feedItemLayoutTransition}
             // Patched LegendList prop (patches/@legendapp__list@3.2.0.patch):
             // lets its scroll math clamp programmatic scrolls to -headerInset
             // instead of 0, so initialScrollAtEnd/maintainScrollAtEnd on short
             ListHeaderComponent={
               <>
                 {usesNativeAutomaticInsets ? null : <View style={{ height: topContentInset }} />}
+                {props.historyControls ? (
+                  <ThreadFeedLoadEarlierControl {...props.historyControls} />
+                ) : null}
                 {props.topAccessory}
               </>
             }

apps/mobile/src/features/threads/ThreadRouteScreen.tsx+25−0

@@ -197,6 +197,30 @@ function ThreadRouteContent( · 196 unmodified lines
197	const gitActions = useSelectedThreadGitActions();	197	const gitActions = useSelectedThreadGitActions();
198	const requests = useSelectedThreadRequests();	198	const requests = useSelectedThreadRequests();
199	const interruptThreadTurn = useAtomCommand(threadEnvironment.interruptTurn, "thread interrupt");	199	const interruptThreadTurn = useAtomCommand(threadEnvironment.interruptTurn, "thread interrupt");
		200	const loadEarlierHistory = useAtomCommand(threadEnvironment.loadEarlierHistory, {
		201	label: "load earlier thread history",
		202	reportFailure: false,
		203	});
		204	const historyControls = useMemo(() => {
		205	const history = selectedThreadDetailState.history;
		206	if (!selectedThread) {
		207	return undefined;
		208	}
		209	if (!history.hasMoreHistory && history.error === null) {
		210	return undefined;
		211	}
		212	return {
		213	hasMoreHistory: history.hasMoreHistory,
		214	loading: history.loading,
		215	error: history.error,
		216	onLoadEarlier: () => {
		217	void loadEarlierHistory({
		218	environmentId: selectedThread.environmentId,
		219	input: { threadId: selectedThread.id },
		220	});
		221	},
		222	};
		223	}, [loadEarlierHistory, selectedThread, selectedThreadDetailState.history]);
200	const navigation = useNavigation();	224	const navigation = useNavigation();
201	const params = props.route.params;	225	const params = props.route.params;
202	const environmentIdRaw = firstRouteParam(params.environmentId);	226	const environmentIdRaw = firstRouteParam(params.environmentId);
@@ -763,6 +787,7 @@ function ThreadRouteContent( · 560 unmodified lines
763	draftAttachments={composer.draftAttachments}	787	draftAttachments={composer.draftAttachments}
764	connectionStateLabel={routeConnectionState}	788	connectionStateLabel={routeConnectionState}
765	threadSyncStatus={selectedThreadDetailState.status}	789	threadSyncStatus={selectedThreadDetailState.status}
		790	historyControls={historyControls}
766	activeThreadBusy={composer.activeThreadBusy}	791	activeThreadBusy={composer.activeThreadBusy}
767	canStopThread={composer.interruptibleRunId !== null}	792	canStopThread={composer.interruptibleRunId !== null}
768	environmentId={selectedThread.environmentId}	793	environmentId={selectedThread.environmentId}

apps/mobile/src/state/use-thread-outbox-drain.ts+1−0

@@ -750,6 +750,7 @@ export function useThreadOutboxDrain(): void { · 749 unmodified lines
750	runtimeMode: settings.runtimeMode,	750	runtimeMode: settings.runtimeMode,
751	interactionMode: settings.interactionMode,	751	interactionMode: settings.interactionMode,
752	createdAt: queuedMessage.createdAt,	752	createdAt: queuedMessage.createdAt,
		753	dispatchMode: "start",
753	},	754	},
754	});	755	});
755	const failure = reportFailure(deliveryResult, "start-turn");	756	const failure = reportFailure(deliveryResult, "start-turn");

feat(orchestration): bound thread history and resume payloads

Keyboard shortcuts

General

Issues and pull requests

Issues, pull requests and Inbox

Repository code