feat: choose-action modal on Save in the v2 component editor

Brings the v2 editor's "Edit Component" Save flow to parity with the legacy
editor: instead of silently updating the selected task in place, it opens a
small modal to choose what to do with the edit (Update this task / Import to
library), showing which inputs/outputs changed.

- `ChooseSaveActionDialog` (v2) is opened via the `DialogProvider`
  (`useDialog().open`), mirroring `ReplaceConfirmationDialog`, and resolves to
  a shared `SaveAction`. It reuses the shared `DiffSection`.
- `TaskDetails` builds `resolveSaveAction` (diffing via the shared
  `diffComponentIO`, mapping a cancelled dialog to `"cancel"` via
  `convertCancelErrorTo`) and gates `handleComponentSaved` on `"update"`,
  applying it through the existing `replaceTask` store action. `ComponentRefBar`
  forwards `resolveSaveAction` to the editor dialog.

The "Place as a new task" option is gated behind `allowPlace`, enabled in a
later branch. No behavior changes when no resolver is supplied.

Author: morgan-wowk

src/routes/v2/pages/Editor/nodes/TaskNode/context/TaskDetails/TaskDetails.tsx

@@ -1,6 +1,7 @@
 import { observer } from "mobx-react-lite";
 import { useEffect, useRef, useState } from "react";
 
+import type { SaveAction } from "@/components/shared/ComponentEditor/saveAction";
 import { StackingControls } from "@/components/shared/ReactFlow/FlowControls/StackingControls";
 import { Button } from "@/components/ui/button";
 import { Icon } from "@/components/ui/icon";
@@ -11,16 +12,20 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Heading, Text } from "@/components/ui/typography";
 import useToastNotification from "@/hooks/useToastNotification";
 import { useAnalytics } from "@/providers/AnalyticsProvider";
+import { useDialog } from "@/providers/DialogProvider/hooks/useDialog";
+import { convertCancelErrorTo } from "@/providers/DialogProvider/utils";
 import { AnnotationsBlock } from "@/routes/v2/pages/Editor/components/AnnotationsBlock/AnnotationsBlock";
 import { useTaskActions } from "@/routes/v2/pages/Editor/store/actions/useTaskActions";
 import { useEditorSession } from "@/routes/v2/pages/Editor/store/EditorSessionContext";
 import { useSpec } from "@/routes/v2/shared/providers/SpecContext";
 import { useSharedStores } from "@/routes/v2/shared/store/SharedStoreContext";
 import { SYSTEM_ANNOTATIONS, ZINDEX_ANNOTATION } from "@/utils/annotations";
 import type { HydratedComponentReference } from "@/utils/componentSpec";
+import { diffComponentIO } from "@/utils/componentSpecDiff";
 import { tracking } from "@/utils/tracking";
 
 import { getTaskYamlText } from "./components/actions/getTaskYamlText";
+import { ChooseSaveActionDialog } from "./components/ChooseSaveActionDialog";
 import { ComponentRefBar } from "./components/ComponentRefBar";
 import { ConfigurationSection } from "./components/ConfigurationSection";
 import { TaskActionsBar } from "./components/TaskActionsBar";
@@ -40,6 +45,7 @@ export const TaskDetails = observer(function TaskDetails({
   const { editor } = useSharedStores();
   const { undo } = useEditorSession();
   const { renameTask, replaceTask } = useTaskActions();
+  const { open: openDialog } = useDialog();
   const notify = useToastNotification();
   const spec = useSpec();
   const task = useTask(entityId);
@@ -75,9 +81,30 @@ export const TaskDetails = observer(function TaskDetails({
 
   const isSubgraphTask = task.subgraphSpec !== undefined;
 
+  const resolveSaveAction = (
+    hydratedComponent: HydratedComponentReference,
+  ): Promise<SaveAction> => {
+    const { inputDiff, outputDiff } = diffComponentIO<
+      { name: string; type?: unknown },
+      { name: string; type?: unknown }
+    >(task.resolvedComponentSpec, hydratedComponent.spec);
+
+    return openDialog({
+      component: ChooseSaveActionDialog,
+      props: { taskName: task.name, inputDiff, outputDiff },
+      size: "md",
+    }).catch(convertCancelErrorTo<SaveAction>("cancel"));
+  };
+
   const handleComponentSaved = (
     hydratedComponent: HydratedComponentReference,
+    action: SaveAction,
   ) => {
+    if (action !== "update") {
+      // "place" arrives once placement ships; nothing else applies in place.
+      return;
+    }
+
     const result = replaceTask(spec, task.$id, hydratedComponent);
     const lostInputs = result.inputDiff?.lostEntities ?? [];
 
@@ -182,6 +209,7 @@ export const TaskDetails = observer(function TaskDetails({
           taskName={task.name}
           pythonCode={pythonCode}
           onComponentSaved={handleComponentSaved}
+          resolveSaveAction={resolveSaveAction}
         />
       </BlockStack>
 

src/routes/v2/pages/Editor/nodes/TaskNode/context/TaskDetails/components/ChooseSaveActionDialog.tsx

@@ -0,0 +1,124 @@
+import { DiffSection } from "@/components/shared/ComponentDiff/DiffSection";
+import type { SaveAction } from "@/components/shared/ComponentEditor/saveAction";
+import { Button } from "@/components/ui/button";
+import {
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Icon, type IconName } from "@/components/ui/icon";
+import { BlockStack } from "@/components/ui/layout";
+import { Text } from "@/components/ui/typography";
+import type { DialogProps } from "@/providers/DialogProvider/types";
+import { type EntityDiff, hasIODiff } from "@/utils/componentSpecDiff";
+import { tracking } from "@/utils/tracking";
+
+interface ChooseSaveActionDialogExtraProps {
+  taskName: string;
+  inputDiff: EntityDiff<{ name: string }>;
+  outputDiff: EntityDiff<{ name: string }>;
+  /** Whether to offer "Place as a new task" (enabled once placement ships). */
+  allowPlace?: boolean;
+}
+
+export function ChooseSaveActionDialog({
+  close,
+  cancel,
+  taskName,
+  inputDiff,
+  outputDiff,
+  allowPlace = false,
+}: DialogProps<SaveAction> & ChooseSaveActionDialogExtraProps) {
+  const showDiff = hasIODiff(inputDiff, outputDiff);
+
+  return (
+    <>
+      <DialogHeader>
+        <DialogTitle>Apply your edit</DialogTitle>
+        <DialogDescription>
+          Choose what to do with your changes to “{taskName}”.
+        </DialogDescription>
+      </DialogHeader>
+
+      {showDiff && (
+        <BlockStack gap="2">
+          <DiffSection label="Input" diff={inputDiff} />
+          <DiffSection label="Output" diff={outputDiff} />
+        </BlockStack>
+      )}
+
+      <BlockStack gap="2">
+        <ActionRow
+          icon="RefreshCw"
+          title="Update this task"
+          description="Apply the edit to this task"
+          onClick={() => close("update")}
+          autoFocus
+          {...tracking("v2.pipeline_editor.task_details.save_action.update")}
+        />
+        <ActionRow
+          icon="Download"
+          title="Import to library"
+          description="Save as a new reusable component"
+          onClick={() => close("import")}
+          {...tracking("v2.pipeline_editor.task_details.save_action.import")}
+        />
+        {allowPlace && (
+          <ActionRow
+            icon="Plus"
+            title="Place as a new task"
+            description="Keep this task; add a new one nearby"
+            onClick={() => close("place")}
+            {...tracking("v2.pipeline_editor.task_details.save_action.place")}
+          />
+        )}
+      </BlockStack>
+
+      <DialogFooter>
+        <Button
+          variant="ghost"
+          onClick={cancel}
+          {...tracking("v2.pipeline_editor.task_details.save_action.cancel")}
+        >
+          Cancel
+        </Button>
+      </DialogFooter>
+    </>
+  );
+}
+
+function ActionRow({
+  icon,
+  title,
+  description,
+  onClick,
+  autoFocus,
+  ...rest
+}: {
+  icon: IconName;
+  title: string;
+  description: string;
+  onClick: () => void;
+  autoFocus?: boolean;
+}) {
+  return (
+    <Button
+      variant="outline"
+      className="h-auto w-full justify-start gap-3 p-3"
+      onClick={onClick}
+      autoFocus={autoFocus}
+      {...rest}
+    >
+      <Icon name={icon} size="sm" className="shrink-0 text-muted-foreground" />
+      <span className="flex flex-col items-start gap-0.5 text-left">
+        <Text size="sm" weight="semibold">
+          {title}
+        </Text>
+        <Text size="xs" tone="subdued">
+          {description}
+        </Text>
+      </span>
+    </Button>
+  );
+}

src/routes/v2/pages/Editor/nodes/TaskNode/context/TaskDetails/components/ComponentRefBar.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 
 import { CodeViewer } from "@/components/shared/CodeViewer";
 import { ComponentEditorDialog } from "@/components/shared/ComponentEditor/ComponentEditorDialog";
+import type { SaveAction } from "@/components/shared/ComponentEditor/saveAction";
 import ComponentDetailsDialog from "@/components/shared/Dialogs/ComponentDetailsDialog";
 import { TrimmedDigest } from "@/components/shared/ManageComponent/TrimmedDigest";
 import { Button } from "@/components/ui/button";
@@ -38,7 +39,11 @@ interface ComponentRefBarProps {
   pythonCode: string | undefined;
   onComponentSaved?: (
     hydratedComponent: HydratedComponentReference,
+    action: SaveAction,
   ) => void | Promise<void>;
+  resolveSaveAction?: (
+    hydratedComponent: HydratedComponentReference,
+  ) => Promise<SaveAction>;
 }
 
 export function ComponentRefBar({
@@ -47,6 +52,7 @@ export function ComponentRefBar({
   taskName,
   pythonCode,
   onComponentSaved,
+  resolveSaveAction,
 }: ComponentRefBarProps) {
   const { track } = useAnalytics();
   const notify = useToastNotification();
@@ -201,6 +207,7 @@ export function ComponentRefBar({
           text={yamlText}
           onClose={() => setIsEditDialogOpen(false)}
           onComponentSaved={onComponentSaved}
+          resolveSaveAction={resolveSaveAction}
         />
       )}