Fork assistant turns into new drafts (#1788)

* feat(chat): fork assistant turns into new drafts

Builds chat-history attachments on the daemon and routes them into draft composers so users can continue an assistant turn in an existing workspace tab or New Workspace.

* fix(chat): clean up fork draft handling

* fix(chat): address fork draft review feedback

* fix(server): build fork context from bounded timeline

* fix(app): restore assistant turn footer in streams

* fix(app): preserve fork draft setup

* fix(app): tighten assistant fork footers

* fix(app): lock active fork draft handoff

* fix(app): preserve attachment-only draft retries

* fix(app): unify composer attachment scopes

* fix(app): align chat history attachment labels

* fix(app): centralize attachment pill content

* fix(app): trim fork context for workspace naming

packages/app/src/components/assistant-fork-menu.tsx

@@ -0,0 +1,148 @@
+import { memo, useCallback, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Text, View } from "react-native";
+import { FolderPlus, Split } from "lucide-react-native";
+import { StyleSheet, withUnistyles } from "react-native-unistyles";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import type { Theme } from "@/styles/theme";
+
+export type AssistantForkTarget = "tab" | "workspace";
+
+interface AssistantForkMenuProps {
+  onFork: (target: AssistantForkTarget) => Promise<void> | void;
+  testID?: string;
+}
+
+const ThemedFolderPlus = withUnistyles(FolderPlus);
+const ThemedSplit = withUnistyles(Split);
+
+const foregroundColorMapping = (theme: Theme) => ({ color: theme.colors.foreground });
+const foregroundMutedColorMapping = (theme: Theme) => ({ color: theme.colors.foregroundMuted });
+
+function getIcon(target: AssistantForkTarget) {
+  switch (target) {
+    case "tab":
+      return <ThemedSplit size={16} uniProps={foregroundColorMapping} />;
+    case "workspace":
+      return <ThemedFolderPlus size={16} uniProps={foregroundColorMapping} />;
+  }
+}
+
+export const AssistantForkMenu = memo(function AssistantForkMenu({
+  onFork,
+  testID = "assistant-fork-menu",
+}: AssistantForkMenuProps) {
+  const { t } = useTranslation();
+  const [isOpen, setIsOpen] = useState(false);
+  const [pendingTarget, setPendingTarget] = useState<AssistantForkTarget | null>(null);
+  const isLocked = pendingTarget !== null;
+
+  const handleOpenChange = useCallback(
+    (next: boolean) => {
+      if (!next && pendingTarget !== null) return;
+      setIsOpen(next);
+    },
+    [pendingTarget],
+  );
+
+  const handleSelect = useCallback(
+    (target: AssistantForkTarget) => async () => {
+      if (isLocked) return;
+      setPendingTarget(target);
+      try {
+        await onFork(target);
+      } finally {
+        setPendingTarget(null);
+        setIsOpen(false);
+      }
+    },
+    [isLocked, onFork],
+  );
+
+  const triggerStyle = useCallback(
+    () => [styles.trigger, isLocked ? styles.triggerDisabled : null],
+    [isLocked],
+  );
+
+  const tooltipContent = useMemo(
+    () => (
+      <TooltipContent side="top" align="center" offset={8}>
+        <Text style={styles.tooltipText}>{t("message.actions.forkMenu")}</Text>
+      </TooltipContent>
+    ),
+    [t],
+  );
+
+  return (
+    <DropdownMenu open={isOpen} onOpenChange={handleOpenChange}>
+      <Tooltip delayDuration={250} enabledOnDesktop enabledOnMobile={false}>
+        <TooltipTrigger asChild>
+          <View style={styles.triggerSlot} collapsable={false}>
+            <DropdownMenuTrigger
+              accessibilityLabel={t("message.actions.forkMenu")}
+              accessibilityRole="button"
+              disabled={isLocked}
+              style={triggerStyle}
+              testID={`${testID}-trigger`}
+            >
+              {({ hovered, open }) => (
+                <ThemedSplit
+                  size={16}
+                  uniProps={hovered || open ? foregroundColorMapping : foregroundMutedColorMapping}
+                />
+              )}
+            </DropdownMenuTrigger>
+          </View>
+        </TooltipTrigger>
+        {tooltipContent}
+      </Tooltip>
+      <DropdownMenuContent align="start" minWidth={220} side="bottom" testID={`${testID}-content`}>
+        <DropdownMenuItem
+          closeOnSelect={false}
+          disabled={isLocked && pendingTarget !== "tab"}
+          leading={getIcon("tab")}
+          onSelect={handleSelect("tab")}
+          status={pendingTarget === "tab" ? "pending" : undefined}
+          testID={`${testID}-new-tab`}
+        >
+          {t("message.actions.forkInNewTab")}
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          closeOnSelect={false}
+          disabled={isLocked && pendingTarget !== "workspace"}
+          leading={getIcon("workspace")}
+          onSelect={handleSelect("workspace")}
+          status={pendingTarget === "workspace" ? "pending" : undefined}
+          testID={`${testID}-new-workspace`}
+        >
+          {t("message.actions.forkInNewWorkspace")}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+});
+
+const styles = StyleSheet.create((theme) => ({
+  trigger: {
+    padding: theme.spacing[1],
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "transparent",
+  },
+  triggerDisabled: {
+    opacity: theme.opacity[50],
+  },
+  triggerSlot: {
+    alignSelf: "center",
+  },
+  tooltipText: {
+    color: theme.colors.foreground,
+    fontSize: theme.fontSize.xs,
+  },
+}));

packages/app/src/components/message.tsx

@@ -32,7 +32,6 @@ import { useQuery } from "@tanstack/react-query";
 import MaskedView from "@react-native-masked-view/masked-view";
 import {
   Circle,
-  CircleDot,
   Info,
   CheckCircle,
   XCircle,
@@ -42,15 +41,13 @@ import {
   Check,
   CheckSquare,
   Copy,
-  GitPullRequest,
-  MessageSquareCode,
   TriangleAlertIcon,
   Scissors,
   MicVocal,
   FileSymlink,
 } from "lucide-react-native";
 import { StyleSheet, withUnistyles } from "react-native-unistyles";
-import { ICON_SIZE, type Theme } from "@/styles/theme";
+import type { Theme } from "@/styles/theme";
 import { useIsCompactFormFactor } from "@/constants/layout";
 import Animated, {
   Easing,
@@ -89,6 +86,7 @@ import {
   getFileNameFromPath,
   parseImageDataUrl,
 } from "@/attachments/utils";
+import { getAgentAttachmentPillContent } from "@/attachments/attachment-pill-content";
 import { PlanCard } from "./plan-card";
 import { useToolCallSheet } from "./tool-call-sheet";
 import { ToolCallDetailsContent } from "./tool-call-details";
@@ -104,7 +102,6 @@ import {
 import { getCompactionMarkerLabel } from "./message-compaction-label";
 import { useAttachmentPreviewUrl } from "@/attachments/use-attachment-preview-url";
 import { persistAttachmentFromBytes, persistAttachmentFromDataUrl } from "@/attachments/service";
-import { getFileTypeLabel } from "@/attachments/file-types";
 import {
   AttachmentFrame,
   AttachmentLabel,
@@ -116,7 +113,9 @@ import { isWeb, isNative } from "@/constants/platform";
 import type { AgentCapabilityFlags } from "@getpaseo/protocol/agent-types";
 import { RewindMenu, type RewindMode } from "@/components/rewind/rewind-menu";
 import { useRewindAgentMutation } from "@/components/rewind/use-rewind-agent-mutation";
+import { AssistantForkMenu, type AssistantForkTarget } from "@/components/assistant-fork-menu";
 export type { InlinePathTarget } from "@/assistant-file-links";
+export type { AssistantForkTarget };
 
 interface UserMessageProps {
   serverId?: string;
@@ -170,10 +169,6 @@ const ThemedTodoCheckIcon = withUnistyles(Check);
 const ThemedFileSymlinkIcon = withUnistyles(FileSymlink);
 const ThemedTriangleAlertIcon = withUnistyles(TriangleAlertIcon);
 const ThemedChevronRightIcon = withUnistyles(ChevronRight);
-const ThemedAttachmentFileText = withUnistyles(FileText);
-const ThemedGitPullRequest = withUnistyles(GitPullRequest);
-const ThemedCircleDot = withUnistyles(CircleDot);
-const ThemedMessageSquareCode = withUnistyles(MessageSquareCode);
 
 const foregroundColorMapping = (theme: Theme) => ({ color: theme.colors.foreground });
 const foregroundMutedColorMapping = (theme: Theme) => ({
@@ -402,19 +397,6 @@ const userMessageStylesheet = StyleSheet.create((theme) => ({
   },
 }));
 
-const attachmentReviewIcon = (
-  <ThemedMessageSquareCode size={ICON_SIZE.sm} uniProps={foregroundMutedColorMapping} />
-);
-const attachmentGithubPrIcon = (
-  <ThemedGitPullRequest size={ICON_SIZE.sm} uniProps={foregroundMutedColorMapping} />
-);
-const attachmentGithubIssueIcon = (
-  <ThemedCircleDot size={ICON_SIZE.sm} uniProps={foregroundMutedColorMapping} />
-);
-const attachmentFileIcon = (
-  <ThemedAttachmentFileText size={ICON_SIZE.sm} uniProps={foregroundMutedColorMapping} />
-);
-
 interface UserMessageImagePillProps {
   image: UserMessageImageAttachment;
   onOpen: (image: UserMessageImageAttachment) => void;
@@ -432,55 +414,6 @@ function UserMessageImagePill({ image, onOpen, accessibilityLabel }: UserMessage
   );
 }
 
-interface UserMessageAttachmentContent {
-  icon: ReactNode;
-  title: string;
-  subtitle: string;
-}
-
-function getUserMessageAttachmentContent(
-  attachment: AgentAttachment,
-  t: ReturnType<typeof useTranslation>["t"],
-): UserMessageAttachmentContent {
-  switch (attachment.type) {
-    case "review": {
-      const count = attachment.comments.length;
-      return {
-        icon: attachmentReviewIcon,
-        title: t("message.attachments.review"),
-        subtitle:
-          count === 1
-            ? t("message.attachments.commentsOne")
-            : t("message.attachments.commentsMany", { count }),
-      };
-    }
-    case "github_pr":
-      return {
-        icon: attachmentGithubPrIcon,
-        title: attachment.title,
-        subtitle: `PR #${attachment.number}`,
-      };
-    case "github_issue":
-      return {
-        icon: attachmentGithubIssueIcon,
-        title: attachment.title,
-        subtitle: `Issue #${attachment.number}`,
-      };
-    case "text":
-      return {
-        icon: attachmentFileIcon,
-        title: attachment.title ?? t("message.attachments.textAttachment"),
-        subtitle: t("message.attachments.text"),
-      };
-    case "uploaded_file":
-      return {
-        icon: attachmentFileIcon,
-        title: attachment.fileName,
-        subtitle: getFileTypeLabel(attachment.fileName) ?? t("message.attachments.file"),
-      };
-  }
-}
-
 export const UserMessage = memo(function UserMessage({
   serverId,
   agentId,
@@ -579,7 +512,7 @@ export const UserMessage = memo(function UserMessage({
           {hasAttachments ? (
             <View style={attachmentPreviewContainerStyle}>
               {attachments.map((attachment, index) => {
-                const content = getUserMessageAttachmentContent(attachment, t);
+                const content = getAgentAttachmentPillContent(attachment, t);
                 return (
                   <AttachmentFrame
                     key={`${attachment.type}:${"number" in attachment ? attachment.number : index}`}
@@ -628,6 +561,11 @@ interface AssistantTurnFooterProps {
   getContent: () => string;
   completedAt?: Date;
   durationMs?: number;
+  forkBoundaryMessageId?: string;
+  onFork?: (input: {
+    target: AssistantForkTarget;
+    boundaryMessageId?: string;
+  }) => Promise<void> | void;
 }
 
 const assistantTurnFooterStylesheet = StyleSheet.create((theme) => ({
@@ -672,6 +610,8 @@ export const AssistantTurnFooter = memo(function AssistantTurnFooter({
   getContent,
   completedAt,
   durationMs,
+  forkBoundaryMessageId,
+  onFork,
 }: AssistantTurnFooterProps) {
   const [hovered, setHovered] = useState(false);
   const [pressedReveal, setPressedReveal] = useState(false);
@@ -711,6 +651,13 @@ export const AssistantTurnFooter = memo(function AssistantTurnFooter({
       revealTimerRef.current = null;
     }, TIMESTAMP_REVEAL_MS);
   }, [canSwap]);
+  const handleFork = useCallback(
+    (target: AssistantForkTarget) => {
+      return onFork?.({ target, boundaryMessageId: forkBoundaryMessageId });
+    },
+    [forkBoundaryMessageId, onFork],
+  );
+  const canFork = Boolean(onFork && forkBoundaryMessageId);
 
   return (
     <View style={assistantTurnFooterStylesheet.container}>
@@ -718,6 +665,7 @@ export const AssistantTurnFooter = memo(function AssistantTurnFooter({
         getContent={getContent}
         containerStyle={assistantTurnFooterStylesheet.copyButton}
       />
+      {canFork ? <AssistantForkMenu onFork={handleFork} /> : null}
       {durationLabel ? (
         <Pressable
           onPress={handlePress}