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

When a user edits a selected task's component definition and clicks Save,
the editor now opens a small modal to choose what to do with the edit
(Update this task / Import to library), showing what inputs/outputs changed.
This replaces the silent in-place update with an explicit, informed choice
and makes "import to library instead" reachable from the same flow.

Shared groundwork (folded into this first branch, reused by later branches):
- `src/utils/componentSpecDiff.ts`: portable input/output diff
  (`computeEntityDiff`, `diffComponentIO`, `hasIODiff`) lifted out of v2's
  `task.utils.ts`. v2 re-exports `EntityDiff` and delegates
  `computeDiffComponentSpecs` to it, so v2 imports are unchanged — and this
  removes the `Set.prototype.difference` (Node 20) dependency from that path.
- `src/components/shared/ComponentDiff/DiffSection.tsx`: the lost/new/changed
  list lifted out of v2's `UpgradeCandidateDetail` so both editors share it
  (v1 must not import from v2). v2 call sites updated to the shared path.

Save contract:
- `ComponentEditorDialog` gains an optional `resolveSaveAction(hydrated) =>
  Promise<SaveAction>`; `onComponentSaved` now receives the chosen
  `SaveAction`. `"cancel"` keeps the editor open, `"import"` runs the existing
  library path, `"update"`/`"place"` are forwarded to the caller. When no
  resolver is supplied, behavior is unchanged (in-place update or library
  import) — so the v2 caller and the sidebar import flow are unaffected.

v1 wiring:
- `ChooseSaveActionDialog` (built on the `Dialog` primitive) + a promise-based
  `useChooseSaveAction` hook (modeled on `useConfirmationDialog`).
- `EditComponentButton` computes the diff via `diffComponentIO`, opens the
  modal, and applies `"update"` via the existing `replaceTaskComponentRef`.
  ("Place as a new task" is gated behind `allowPlace`, enabled in a later
  branch.)

Tests: `componentSpecDiff` (lost/new/changed, empty, order; IO diff; hasIODiff)
and `ComponentEditorDialog` (resolveSaveAction import/cancel paths; update
forwards the action).

Author: morgan-wowk

src/components/shared/ComponentDiff/DiffSection.tsx

@@ -0,0 +1,76 @@
+import { Icon } from "@/components/ui/icon";
+import { BlockStack, InlineStack } from "@/components/ui/layout";
+import { Text } from "@/components/ui/typography";
+import type { EntityDiff } from "@/utils/componentSpecDiff";
+
+/**
+ * Renders the lost / added / changed entities of an `EntityDiff` as a compact,
+ * color-coded list. Shared by the legacy and v2 editors (upgrade flow, replace
+ * confirmation, and the edit-component save modal). Only reads `name`, so it
+ * accepts a diff of any name-keyed entity.
+ */
+export function DiffSection({
+  label,
+  diff,
+}: {
+  label: string;
+  diff: EntityDiff<{ name: string }>;
+}) {
+  const hasChanges =
+    diff.lostEntities.length > 0 ||
+    diff.newEntities.length > 0 ||
+    diff.changedEntities.length > 0;
+
+  if (!hasChanges) return null;
+
+  return (
+    <BlockStack gap="1">
+      <Text size="xs" weight="semibold" tone="subdued">
+        {label} Changes
+      </Text>
+      <BlockStack className="gap-0.5">
+        {diff.lostEntities.map((e) => (
+          <DiffLine
+            key={`lost-${e.name}`}
+            icon="Minus"
+            color="text-red-500"
+            label={`Removed: ${e.name}`}
+          />
+        ))}
+        {diff.newEntities.map((e) => (
+          <DiffLine
+            key={`new-${e.name}`}
+            icon="Plus"
+            color="text-green-600"
+            label={`Added: ${e.name}`}
+          />
+        ))}
+        {diff.changedEntities.map((e) => (
+          <DiffLine
+            key={`changed-${e.name}`}
+            icon="RefreshCw"
+            color="text-amber-500"
+            label={`Changed: ${e.name}`}
+          />
+        ))}
+      </BlockStack>
+    </BlockStack>
+  );
+}
+
+function DiffLine({
+  icon,
+  color,
+  label,
+}: {
+  icon: "Minus" | "Plus" | "RefreshCw";
+  color: string;
+  label: string;
+}) {
+  return (
+    <InlineStack gap="1" blockAlign="start">
+      <Icon name={icon} size="xs" className={`${color} mt-0.5 shrink-0`} />
+      <Text size="xs">{label}</Text>
+    </InlineStack>
+  );
+}

src/components/shared/ComponentEditor/ChooseSaveActionDialog.tsx

@@ -0,0 +1,112 @@
+import { DiffSection } from "@/components/shared/ComponentDiff/DiffSection";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  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 { EntityDiff } from "@/utils/componentSpecDiff";
+import { hasIODiff } from "@/utils/componentSpecDiff";
+
+import type { SaveAction } from "./saveAction";
+
+export interface ChooseSaveActionDialogProps {
+  taskName: string;
+  inputDiff: EntityDiff<{ name: string }>;
+  outputDiff: EntityDiff<{ name: string }>;
+  /** Whether to offer "Place as a new task" (enabled once placement ships). */
+  allowPlace?: boolean;
+  onChoose: (action: SaveAction) => void;
+}
+
+export function ChooseSaveActionDialog({
+  taskName,
+  inputDiff,
+  outputDiff,
+  allowPlace = false,
+  onChoose,
+}: ChooseSaveActionDialogProps) {
+  const showDiff = hasIODiff(inputDiff, outputDiff);
+
+  return (
+    <Dialog open onOpenChange={(open) => !open && onChoose("cancel")}>
+      <DialogContent className="sm:max-w-md">
+        <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={() => onChoose("update")}
+            autoFocus
+          />
+          <ActionRow
+            icon="Download"
+            title="Import to library"
+            description="Save as a new reusable component"
+            onClick={() => onChoose("import")}
+          />
+          {allowPlace && (
+            <ActionRow
+              icon="Plus"
+              title="Place as a new task"
+              description="Keep this task; add a new one nearby"
+              onClick={() => onChoose("place")}
+            />
+          )}
+        </BlockStack>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function ActionRow({
+  icon,
+  title,
+  description,
+  onClick,
+  autoFocus,
+}: {
+  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}
+    >
+      <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/components/shared/ComponentEditor/ComponentEditorDialog.test.tsx

@@ -372,9 +372,10 @@ describe("<ComponentEditorDialog />", () => {
       fireEvent.click(screen.getByRole("button", { name: /Save/i }));
 
       await waitFor(() => {
-        // The edited component is handed to the caller to apply.
+        // The edited component is handed to the caller to apply in place.
         expect(onComponentSavedMock).toHaveBeenCalledWith(
           mockHydratedComponent,
+          "update",
         );
         expect(onCloseMock).toHaveBeenCalledTimes(1);
       });
@@ -386,5 +387,84 @@ describe("<ComponentEditorDialog />", () => {
         "success",
       );
     });
+
+    test("uses resolveSaveAction: 'import' runs the library path, not onComponentSaved", async () => {
+      const onCloseMock = vi.fn();
+      const onComponentSavedMock = vi.fn();
+      const resolveSaveAction = vi.fn().mockResolvedValue("import");
+      const mockHydratedComponent = {
+        spec: { implementation: { container: { image: "test" } } },
+        name: "test-component",
+        digest: "abc123",
+        text: "name: test-component",
+      };
+      vi.mocked(hydrateComponentReference).mockResolvedValue(
+        mockHydratedComponent,
+      );
+
+      renderWithProviders(
+        <ComponentEditorDialog
+          text="name: test-component"
+          onClose={onCloseMock}
+          onComponentSaved={onComponentSavedMock}
+          resolveSaveAction={resolveSaveAction}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(
+          screen.getByRole("button", { name: /Save/i }),
+        ).toBeInTheDocument();
+      });
+      fireEvent.click(screen.getByRole("button", { name: /Save/i }));
+
+      await waitFor(() => {
+        expect(resolveSaveAction).toHaveBeenCalledWith(mockHydratedComponent);
+        expect(mockAddToComponentLibrary).toHaveBeenCalledWith(
+          mockHydratedComponent,
+          "editor_save",
+        );
+        expect(onCloseMock).toHaveBeenCalledTimes(1);
+      });
+      expect(onComponentSavedMock).not.toHaveBeenCalled();
+    });
+
+    test("uses resolveSaveAction: 'cancel' keeps the editor open and applies nothing", async () => {
+      const onCloseMock = vi.fn();
+      const onComponentSavedMock = vi.fn();
+      const resolveSaveAction = vi.fn().mockResolvedValue("cancel");
+      const mockHydratedComponent = {
+        spec: { implementation: { container: { image: "test" } } },
+        name: "test-component",
+        digest: "abc123",
+        text: "name: test-component",
+      };
+      vi.mocked(hydrateComponentReference).mockResolvedValue(
+        mockHydratedComponent,
+      );
+
+      renderWithProviders(
+        <ComponentEditorDialog
+          text="name: test-component"
+          onClose={onCloseMock}
+          onComponentSaved={onComponentSavedMock}
+          resolveSaveAction={resolveSaveAction}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(
+          screen.getByRole("button", { name: /Save/i }),
+        ).toBeInTheDocument();
+      });
+      fireEvent.click(screen.getByRole("button", { name: /Save/i }));
+
+      await waitFor(() => {
+        expect(resolveSaveAction).toHaveBeenCalled();
+      });
+      expect(onCloseMock).not.toHaveBeenCalled();
+      expect(onComponentSavedMock).not.toHaveBeenCalled();
+      expect(mockAddToComponentLibrary).not.toHaveBeenCalled();
+    });
   });
 });

src/components/shared/ComponentEditor/ComponentEditorDialog.tsx

@@ -21,6 +21,7 @@ import { FullscreenElement } from "../FullscreenElement";
 import { withSuspenseWrapper } from "../SuspenseWrapper";
 import { PythonComponentEditor } from "./components/PythonComponentEditor";
 import { YamlComponentEditor } from "./components/YamlComponentEditor";
+import type { SaveAction } from "./saveAction";
 import type { SupportedTemplate, YamlGeneratorOptions } from "./types";
 import { useTemplateCodeByName } from "./useTemplateCodeByName";
 
@@ -76,6 +77,7 @@ export const ComponentEditorDialog = withSuspenseWrapper(
     templateName = "empty",
     onClose,
     onComponentSaved,
+    resolveSaveAction,
   }: {
     text?: string;
     templateName?: SupportedTemplate;
@@ -84,12 +86,23 @@ export const ComponentEditorDialog = withSuspenseWrapper(
      * When provided, the editor is being used to edit an existing target (e.g.
      * a selected task's component) rather than to import a brand new component
      * into the library. The callback receives the hydrated, edited component
-     * and is responsible for applying it (and any user feedback). When omitted,
-     * the editor falls back to importing the component into the library.
+     * and the chosen {@link SaveAction}, and is responsible for applying it
+     * (and any user feedback). When omitted, the editor falls back to importing
+     * the component into the library.
      */
     onComponentSaved?: (
       hydratedComponent: HydratedComponentReference,
+      action: SaveAction,
     ) => void | Promise<void>;
+    /**
+     * When provided, the editor asks the caller which {@link SaveAction} to
+     * take on Save (e.g. by opening a choose-action modal). `"cancel"` keeps
+     * the editor open; `"import"` runs the library-import path; `"update"` /
+     * `"place"` are forwarded to {@link onComponentSaved}.
+     */
+    resolveSaveAction?: (
+      hydratedComponent: HydratedComponentReference,
+    ) => Promise<SaveAction>;
   }) => {
     const notify = useToastNotification();
     const { track } = useAnalytics();
@@ -202,19 +215,52 @@ export const ComponentEditorDialog = withSuspenseWrapper(
         updatedAt: Date.now(),
       });
 
-      onClose();
-
-      if (onComponentSaved) {
-        // Editing an existing target (e.g. a selected task): apply the edit to
-        // that target instead of importing a new library component. The caller
-        // owns the success/feedback messaging.
-        await onComponentSaved(hydratedComponent);
-      } else {
+      const importToLibrary = async () => {
         await addToComponentLibrary(hydratedComponent, "editor_save");
         notify(
           `Component ${hydratedComponent.name} imported successfully`,
           "success",
         );
+      };
+
+      // When a caller wants to choose what to do with the edit (e.g. update the
+      // selected task vs. import to the library), it provides `resolveSaveAction`.
+      if (resolveSaveAction) {
+        const action = await resolveSaveAction(hydratedComponent);
+
+        if (action === "cancel") {
+          // Keep the editor open so the user can keep editing.
+          track("component_editor.save.cancelled", {
+            mode,
+            selected_template: templateName,
+          });
+          return;
+        }
+
+        onClose();
+
+        if (action === "import") {
+          await importToLibrary();
+        } else {
+          await onComponentSaved?.(hydratedComponent, action);
+        }
+
+        track("component_editor.save.completed", {
+          mode,
+          selected_template: templateName,
+          action,
+        });
+        return;
+      }
+
+      // No action resolver: editing an existing target updates it in place;
+      // otherwise (create/import flow) the component is imported to the library.
+      onClose();
+
+      if (onComponentSaved) {
+        await onComponentSaved(hydratedComponent, "update");
+      } else {
+        await importToLibrary();
       }
 
       track("component_editor.save.completed", {

src/components/shared/ComponentEditor/saveAction.ts

@@ -0,0 +1,9 @@
+/**
+ * What the user chose to do with an edited component definition on Save.
+ *
+ * - `update`  — apply the edit to the selected task in place
+ * - `import`  — import the edited component into the library as a new component
+ * - `place`   — create a new task from the edit, placed near the selected task
+ * - `cancel`  — dismiss; keep the editor open
+ */
+export type SaveAction = "update" | "import" | "place" | "cancel";