feat(web,mobile): Continue on… a linked environment#16758

@@ -392,6 +394,17 @@ function useThreadGitHeaderActionItems(props: ThreadGitControlsProps): ThreadGit
                   },
                 ]
               : []),
+            ...(props.onContinueOn

@@ -0,0 +1,100 @@
+import type { EnvironmentThreadShell } from "@t3tools/client-runtime/state/shell";
+import { threadHandoffNotice } from "@t3tools/client-runtime/state/peerLinks";
+import {
+  isAtomCommandInterrupted,
+  squashAtomCommandFailure,
+} from "@t3tools/client-runtime/state/runtime";
+import { scopeThreadRef } from "@t3tools/client-runtime/environment";
+import { useNavigate } from "@tanstack/react-router";
+import { ArrowUpRightIcon, MonitorUpIcon, TriangleAlertIcon } from "lucide-react";
+import { useMemo, useState } from "react";
+
+import { useEnvironmentIds } from "~/state/environments";
+import { threadHandoffEnvironment } from "~/state/threadHandoff";
+import { useAtomCommand } from "~/state/use-atom-command";
+import { buildThreadRouteParams } from "../../threadRoutes";
+import { Button } from "../ui/button";
+import { stackedThreadToast, toastManager } from "../ui/toast";
+import type { ComposerBannerStackItem } from "./ComposerBannerStack";
+
+/** Why the composer is closed while a thread moves away, or null when it is open. */
+export function threadHandoffSendBlockReason(
+  shell: Pick<EnvironmentThreadShell, "handoff"> | null | undefined,
+): string | null {
+  const handoff = shell?.handoff;
+  if (handoff?.state === "departing") return `Moving to ${handoff.label}`;
+  if (handoff?.state === "departed") return `Continues on ${handoff.label}`;
+  return null;
+}
+
+/**
+ * The banner for a thread's move to a linked environment: waiting (with
+ * Cancel), under way, moved (with a link to it there when this client is
+ * connected to that environment), or failed.
+ */
+export function useThreadHandoffBannerItem(
+  shell: Pick<EnvironmentThreadShell, "environmentId" | "id" | "handoff"> | null | undefined,
+): ComposerBannerStackItem | null {
+  const navigate = useNavigate();
+  const cancel = useAtomCommand(threadHandoffEnvironment.cancel, { label: "cancel thread move" });
+  const [cancelling, setCancelling] = useState(false);
+  const handoff = shell?.handoff ?? null;
+  const environmentIds = useEnvironmentIds();
+  const canOpenThere =
+    handoff?.state === "departed" && environmentIds.includes(handoff.environmentId);

@@ -0,0 +1,145 @@
+import { squashAtomCommandFailure } from "@t3tools/client-runtime/state/runtime";
+import type { EnvironmentId, ThreadId } from "@t3tools/contracts";
+import { useNavigation, type StaticScreenProps } from "@react-navigation/native";
+import * as Haptics from "expo-haptics";
+import { useState } from "react";
+import { Platform, Pressable, ScrollView, View } from "react-native";
+import { Screen, ScreenStack, ScreenStackHeaderConfig } from "react-native-screens";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+import { AndroidSheetHeader } from "../../components/AndroidScreenHeader";
+import { AppText as Text } from "../../components/AppText";
+import { useUniwindTheme } from "../../lib/useUniwindTheme";
+import { nativeHeaderScrollEdgeEffects } from "../../native/StackHeader";
+import { useEnvironmentQuery } from "../../state/query";
+import { threadHandoffEnvironment } from "../../state/threadHandoff";
+import { useAtomCommand } from "../../state/use-atom-command";
+
+const HEADER_SCROLL_EDGE_EFFECTS = nativeHeaderScrollEdgeEffects(Platform.OS, Platform.Version);
+
+type HandoffTarget = { readonly environmentId: EnvironmentId; readonly threadId: ThreadId };
+
+/**
+ * "Continue on…": the linked environments this thread can move to. Picking
+ * one starts the move and closes the sheet; the thread's card shows how it goes.
+ */
+export function ThreadHandoffSheet({ route }: StaticScreenProps<HandoffTarget>) {
+  const target = route.params;
+  const navigation = useNavigation();
+  const insets = useSafeAreaInsets();
+  const theme = useUniwindTheme();
+  const options = useEnvironmentQuery(
+    threadHandoffEnvironment.options({
+      environmentId: target.environmentId,
+      input: { threadId: target.threadId },
+    }),
+  );
+  const start = useAtomCommand(threadHandoffEnvironment.start, {
+    label: "move thread",
+    reportFailure: false,
+  });
+  const [starting, setStarting] = useState<EnvironmentId | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const choose = async (environmentId: EnvironmentId) => {
+    void Haptics.selectionAsync();
+    setStarting(environmentId);
+    setError(null);
+    const result = await start({
+      environmentId: target.environmentId,
+      input: { threadId: target.threadId, environmentId },
+    });

@@ -7757,11 +7762,13 @@ export default function ChatView(props: ChatViewProps) {
     const backgroundWorkItems = [goalBannerItem, backgroundWorkBannerItem].filter(
       (item) => item !== null,
     );
+    const handoffItems = threadHandoffBannerItem === null ? [] : [threadHandoffBannerItem];
     // The user asked for this one, so it leads the notice tier instead of trailing it.
     const usageLimitsItems = usageLimitsBanner === null ? [] : [usageLimitsBanner];
     const projectCloneItems = projectCloneBannerItem === null ? [] : [projectCloneBannerItem];
     if (!localCheckoutBranchMismatch || !showBranchMismatchBanner || !activeBranchMismatchKey) {
       return [
+        ...handoffItems,

@@ -0,0 +1,94 @@
+import { threadHandoffNotice } from "@t3tools/client-runtime/state/peerLinks";
+import { squashAtomCommandFailure } from "@t3tools/client-runtime/state/runtime";
+import type { EnvironmentThreadShell } from "@t3tools/client-runtime/state/shell";
+import { useNavigation } from "@react-navigation/native";
+import { useState } from "react";
+import { View } from "react-native";
+
+import { AppText as Text } from "../../components/AppText";
+import { cn } from "../../lib/cn";
+import { useEnvironments } from "../../state/environments";
+import { threadHandoffEnvironment } from "../../state/threadHandoff";
+import { useAtomCommand } from "../../state/use-atom-command";
+import { RequestActionButton } from "./RequestActionButton";
+
+/** Whether the composer is closed because the thread is moving or has moved away. */
+export function threadHandoffClosesComposer(
+  thread: Pick<EnvironmentThreadShell, "handoff">,
+): boolean {
+  return thread.handoff?.state === "departing" || thread.handoff?.state === "departed";
+}
+
+/**
+ * A thread's move to a linked environment: waiting for its turn to end (with
+ * Keep it here), under way, moved (with a link there when this app is
+ * connected to it), or failed.
+ */
+export function ThreadHandoffCard({ thread }: { thread: EnvironmentThreadShell }) {
+  const navigation = useNavigation();
+  const cancel = useAtomCommand(threadHandoffEnvironment.cancel, {
+    label: "cancel thread move",
+    reportFailure: false,
+  });
+  const [cancelling, setCancelling] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const { presentationById } = useEnvironments();
+  const handoff = thread.handoff;
+  const notice = threadHandoffNotice(handoff);
+  if (handoff === null || notice === null) return null;
+
+  const keepHere = async () => {
+    setCancelling(true);
+    setError(null);
+    const result = await cancel({
+      environmentId: thread.environmentId,
+      input: { threadId: thread.id },
+    });
+    setCancelling(false);
+    if (result._tag === "Failure") setError(String(squashAtomCommandFailure(result)));
+  };
+
+  return (
+    <View className="mx-3 mb-2 gap-2 rounded-xl border border-border-subtle bg-screen p-3">
+      <Text
+        className={cn(
+          "text-sm font-t3-bold",
+          notice.tone === "error" ? "text-danger-foreground" : "text-foreground",
+        )}
+      >
+        {notice.title}
+      </Text>
+      {notice.detail !== null ? (
+        <Text className="text-sm text-foreground-secondary">{notice.detail}</Text>
+      ) : null}
+      {handoff.state === "pending" ? (
+        <View className="flex-row">
+          <RequestActionButton
+            label={cancelling ? "Cancelling…" : "Keep it here"}
+            tone="secondary"
+            disabled={cancelling}
+            onPress={() => void keepHere()}
+          />
+        </View>
+      ) : handoff.state === "departed" && presentationById.has(handoff.environmentId) ? (

@@ -869,6 +877,17 @@ function ThreadRouteContent(
       mergeBackTargetThreadId !== null && mergeBackRun !== null
         ? () => void handleMergeBack()
         : undefined,
+    onContinueOn:
+      selectedThread !== null &&
+      selectedThread !== undefined &&
+      routeEnvironmentRuntime?.serverConfig?.environment.capabilities.peerLinks === true &&
+      (selectedThread.handoff === null || selectedThread.handoff.state === "failed")

@@ -147,6 +148,10 @@ export function useThreadActionMenu(input: {
         };
         const isRegeneratingTitle = thread.titleRegeneration != null;
         const snoozePresets = resolveSnoozePresets(now, timestampFormat);
+        const handoffTargets =
+          thread.handoff == null || thread.handoff.state === "failed"
+            ? await readThreadHandoffTargets(threadRef.environmentId, threadRef.threadId)

@@ -11538,7 +11547,8 @@ export default function ChatView(props: ChatViewProps) {
                               sendDisabledReason={
                                 !canOperateThread
                                   ? "This connection cannot change threads."
-                                  : isEnvironmentChanging
+                                  : (threadHandoffSendBlockReason(activeThreadShell) ??
+                                    (isEnvironmentChanging

@@ -0,0 +1,100 @@
+import type { EnvironmentThreadShell } from "@t3tools/client-runtime/state/shell";
+import { threadHandoffNotice } from "@t3tools/client-runtime/state/peerLinks";
+import {
+  isAtomCommandInterrupted,
+  squashAtomCommandFailure,
+} from "@t3tools/client-runtime/state/runtime";
+import { scopeThreadRef } from "@t3tools/client-runtime/environment";
+import { useNavigate } from "@tanstack/react-router";
+import { ArrowUpRightIcon, MonitorUpIcon, TriangleAlertIcon } from "lucide-react";
+import { useMemo, useState } from "react";
+
+import { useEnvironmentIds } from "~/state/environments";
+import { threadHandoffEnvironment } from "~/state/threadHandoff";
+import { useAtomCommand } from "~/state/use-atom-command";
+import { buildThreadRouteParams } from "../../threadRoutes";
+import { Button } from "../ui/button";
+import { stackedThreadToast, toastManager } from "../ui/toast";
+import type { ComposerBannerStackItem } from "./ComposerBannerStack";
+
+/** Why the composer is closed while a thread moves away, or null when it is open. */
+export function threadHandoffSendBlockReason(
+  shell: Pick<EnvironmentThreadShell, "handoff"> | null | undefined,
+): string | null {
+  const handoff = shell?.handoff;
+  if (handoff?.state === "departing") return `Moving to ${handoff.label}`;
+  if (handoff?.state === "departed") return `Continues on ${handoff.label}`;
+  return null;
+}
+
+/**
+ * The banner for a thread's move to a linked environment: waiting (with
+ * Cancel), under way, moved (with a link to it there when this client is
+ * connected to that environment), or failed.
+ */
+export function useThreadHandoffBannerItem(
+  shell: Pick<EnvironmentThreadShell, "environmentId" | "id" | "handoff"> | null | undefined,
+): ComposerBannerStackItem | null {
+  const navigate = useNavigate();
+  const cancel = useAtomCommand(threadHandoffEnvironment.cancel, { label: "cancel thread move" });
+  const [cancelling, setCancelling] = useState(false);
+  const handoff = shell?.handoff ?? null;
+  const environmentIds = useEnvironmentIds();
+  const canOpenThere =
+    handoff?.state === "departed" && environmentIds.includes(handoff.environmentId);
+  return useMemo(() => {
+    const notice = threadHandoffNotice(handoff);
+    if (shell == null || handoff === null || notice === null) return null;
+    const actions =
+      handoff.state === "pending" ? (
+        <Button
+          size="xs"
+          variant="ghost"
+          disabled={cancelling}
+          onClick={() => {
+            setCancelling(true);
+            void cancel({ environmentId: shell.environmentId, input: { threadId: shell.id } }).then(
+              (result) => {
+                setCancelling(false);
+                if (result._tag === "Failure" && !isAtomCommandInterrupted(result)) {
+                  toastManager.add(
+                    stackedThreadToast({
+                      type: "error",
+                      title: "Could not cancel the move",
+                      description: String(squashAtomCommandFailure(result)),
+                    }),
+                  );
+                }
+              },
+            );
+          }}
+        >
+          {cancelling ? "Cancelling…" : "Keep it here"}
+        </Button>
+      ) : handoff.state === "departed" && canOpenThere ? (
+        <Button
+          size="xs"
+          variant="ghost"
+          onClick={() =>
+            void navigate({
+              to: "/$environmentId/$threadId",
+              params: buildThreadRouteParams(
+                scopeThreadRef(handoff.environmentId, handoff.threadId),
+              ),
+            })
+          }
+        >
+          Open on {handoff.label}
+          <ArrowUpRightIcon />
+        </Button>
+      ) : undefined;
+    return {
+      id: `thread-handoff:${shell.id}:${handoff.handoffId}:${handoff.state}`,
+      variant: notice.tone,
+      icon: notice.tone === "error" ? <TriangleAlertIcon /> : <MonitorUpIcon />,
+      title: notice.title,
+      ...(notice.detail === null ? {} : { description: notice.detail }),
+      ...(actions === undefined ? {} : { actions }),
+    };
+  }, [canOpenThere, cancel, cancelling, handoff, navigate, shell]);
+}

@@ -0,0 +1,96 @@
+import type { EnvironmentThreadShell } from "@t3tools/client-runtime/state/shell";
+import { threadHandoffNotice } from "@t3tools/client-runtime/state/peerLinks";
+import {
+  isAtomCommandInterrupted,
+  squashAtomCommandFailure,
+} from "@t3tools/client-runtime/state/runtime";
+import { scopeThreadRef } from "@t3tools/client-runtime/environment";
+import { useNavigate } from "@tanstack/react-router";
+import { ArrowUpRightIcon, MonitorUpIcon, TriangleAlertIcon } from "lucide-react";
+import { useState } from "react";
+
+import { useConnectedEnvironmentIds } from "~/state/environments";
+import { threadHandoffEnvironment } from "~/state/threadHandoff";
+import { useAtomCommand } from "~/state/use-atom-command";
+import { buildThreadRouteParams } from "../../threadRoutes";
+import { Button } from "../ui/button";
+import { stackedThreadToast, toastManager } from "../ui/toast";
+import type { ComposerBannerStackItem } from "./ComposerBannerStack";
+
+/** Why the composer is closed while a thread moves away, or null when it is open. */
+export function threadHandoffSendBlockReason(
+  shell: Pick<EnvironmentThreadShell, "handoff"> | null | undefined,
+): string | null {
+  const handoff = shell?.handoff;
+  if (handoff?.state === "departing") return `Moving to ${handoff.label}`;
+  if (handoff?.state === "departed") return `Continues on ${handoff.label}`;
+  return null;
+}
+
+/**
+ * The banner for a thread's move to a linked environment: waiting (with
+ * Cancel), under way, moved (with a link to it there when this client is
+ * connected to that environment), or failed.
+ */
+export function useThreadHandoffBannerItem(
+  shell: Pick<EnvironmentThreadShell, "environmentId" | "id" | "handoff"> | null | undefined,
+): ComposerBannerStackItem | null {
+  const navigate = useNavigate();
+  const cancel = useAtomCommand(threadHandoffEnvironment.cancel, { label: "cancel thread move" });
+  const [cancelling, setCancelling] = useState(false);
+  const handoff = shell?.handoff ?? null;
+  const connectedEnvironmentIds = useConnectedEnvironmentIds();
+  const canOpenThere =
+    handoff?.state === "departed" && connectedEnvironmentIds.includes(handoff.environmentId);
+  const notice = threadHandoffNotice(handoff);
+  if (shell == null || handoff === null || notice === null) return null;
+  const actions =
+    handoff.state === "pending" ? (
+      <Button
+        size="xs"
+        variant="ghost"
+        disabled={cancelling}
+        onClick={() => {
+          setCancelling(true);
+          void cancel({ environmentId: shell.environmentId, input: { threadId: shell.id } }).then(
+            (result) => {
+              setCancelling(false);

@@ -771,6 +771,17 @@ function ThreadRouteContent(
       mergeBackTargetThreadId !== null && mergeBackRun !== null
         ? () => void handleMergeBack()
         : undefined,
+    onContinueOn:
+      selectedThread !== null &&
+      selectedThread !== undefined &&
+      routeEnvironmentRuntime?.serverConfig?.environment.capabilities.peerLinks === true &&
+      (selectedThread.handoff === null || selectedThread.handoff.state === "failed")

@@ -1926,6 +1929,47 @@ function OpenCommandPaletteDialog(props: {
     }
   }
 
+  if (
+    activeThread !== null &&
+    activeThreadServerConfig?.environment.capabilities.peerLinks === true &&
+    (activeThread.handoff == null || activeThread.handoff.state === "failed")
+  ) {
+    const thread = activeThread;
+    actionItems.push({
+      kind: "action",
+      value: "action:continue-on",
+      searchTerms: ["continue on", "move", "hand off", "handoff", "environment", "machine"],
+      title: "Continue on…",
+      description: "Move this thread and its work to a linked environment",
+      disabled: !threadRuntimeCanArchive(thread.runtime),