diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputParameter/NodeOutputs.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputParameter/NodeOutputs.tsx
index dcc25943b05f..827a68e31c69 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputParameter/NodeOutputs.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputParameter/NodeOutputs.tsx
@@ -1,5 +1,10 @@
 import type { NodeDataType } from "@/types/flow";
 import { OutputParameter } from ".";
+import {
+  getDisplayOutput,
+  separateOutputsByGroup,
+  shouldShowAllOutputs,
+} from "./nodeOutputUtils";
 
 export default function NodeOutputs({
   outputs,
@@ -9,10 +14,8 @@ export default function NodeOutputs({
   selected,
   showNode,
   isToolMode,
-  showHiddenOutputs,
   selectedOutput,
   handleSelectOutput,
-  hasExistingHiddenOutputs = false,
 }: {
   outputs: any;
   keyPrefix: string;
@@ -21,28 +24,20 @@ export default function NodeOutputs({
   selected: boolean;
   showNode: boolean;
   isToolMode: boolean;
-  showHiddenOutputs: boolean;
   selectedOutput: any;
   handleSelectOutput: any;
-  hasExistingHiddenOutputs?: boolean;
 }) {
-  const hasLoopOutput = outputs.some((output) => output.allows_loop);
-  const hasGroupOutputs = outputs.some((output) => output.group_outputs);
-  const isConditionalRouter = data.type === "ConditionalRouter";
-  const hasHiddenOutputs = outputs.some((output) => output.hidden);
+  // Separate outputs based on group_outputs field
+  const { groupedOutputs, individualOutputs } = separateOutputsByGroup(
+    outputs,
+  ) as { groupedOutputs: any[]; individualOutputs: any[] };
 
-  const shouldShowAllOutputs =
-    hasLoopOutput || hasGroupOutputs || isConditionalRouter || hasHiddenOutputs;
-
-  if (shouldShowAllOutputs) {
-    const outputsToRender =
-      keyPrefix === "hidden"
-        ? outputs.filter((output) => output.hidden)
-        : outputs.filter((output) => !output.hidden);
+  const shouldShowAll = shouldShowAllOutputs(outputs, data);
 
+  if (shouldShowAll) {
     return (
       <>
-        {outputsToRender?.map((output, idx) => (
+        {outputs?.map((output: any, idx: number) => (
           <OutputParameter
             key={`${keyPrefix}-${output.name}-${idx}`}
             output={output}
@@ -52,69 +47,75 @@ export default function NodeOutputs({
                 (out) => out.name === output.name,
               ) ?? idx
             }
-            lastOutput={idx === outputsToRender.length - 1}
+            lastOutput={idx === outputs.length - 1}
             data={data}
             types={types}
             selected={selected}
             showNode={showNode}
             isToolMode={isToolMode}
-            showHiddenOutputs={showHiddenOutputs}
             handleSelectOutput={handleSelectOutput}
-            hidden={
-              keyPrefix === "hidden"
-                ? showHiddenOutputs
-                  ? output.hidden
-                  : true
-                : false
-            }
           />
         ))}
       </>
     );
   }
 
-  const getDisplayOutput = () => {
-    const filteredOutputs =
-      keyPrefix === "hidden"
-        ? outputs.filter((output) => output.hidden)
-        : outputs.filter((output) => !output.hidden);
-
-    const outputWithSelection = filteredOutputs.find(
-      (output) => output.name === selectedOutput?.name,
-    );
-
-    return outputWithSelection || filteredOutputs[0];
+  // Handle individual outputs (group_outputs: false)
+  const renderIndividualOutputs = () => {
+    return individualOutputs.map((output: any, idx: number) => (
+      <OutputParameter
+        key={`${keyPrefix}-individual-${output.name}-${idx}`}
+        output={output}
+        outputs={[output] as any} // Pass only this output to avoid dropdown behavior
+        idx={
+          data.node!.outputs?.findIndex(
+            (out: any) => out.name === output.name,
+          ) ?? idx
+        }
+        lastOutput={
+          groupedOutputs.length === 0 && idx === individualOutputs.length - 1
+        }
+        data={data}
+        types={types}
+        selected={selected}
+        showNode={showNode}
+        isToolMode={isToolMode}
+        handleSelectOutput={handleSelectOutput}
+      />
+    ));
   };
 
-  const displayOutput = getDisplayOutput();
+  // Handle grouped outputs (group_outputs: true) - show as dropdown
+  const renderGroupedOutputs = () => {
+    if (groupedOutputs.length === 0) return null;
 
-  if (!displayOutput) return null;
+    const displayOutput = getDisplayOutput(groupedOutputs, selectedOutput);
+
+    return (
+      <OutputParameter
+        key={`${keyPrefix}-grouped-${displayOutput.name}`}
+        output={displayOutput}
+        outputs={groupedOutputs as any}
+        idx={
+          data.node!.outputs?.findIndex(
+            (out) => out.name === displayOutput.name,
+          ) ?? 0
+        }
+        lastOutput={true}
+        data={data}
+        types={types}
+        selected={selected}
+        handleSelectOutput={handleSelectOutput}
+        showNode={showNode}
+        isToolMode={isToolMode}
+      />
+    );
+  };
 
   return (
-    <OutputParameter
-      key={`${keyPrefix}-${displayOutput.name}`}
-      output={displayOutput}
-      outputs={outputs}
-      idx={
-        data.node!.outputs?.findIndex(
-          (out) => out.name === displayOutput.name,
-        ) ?? 0
-      }
-      lastOutput={!hasExistingHiddenOutputs}
-      data={data}
-      types={types}
-      selected={selected}
-      handleSelectOutput={handleSelectOutput}
-      showNode={showNode}
-      isToolMode={isToolMode}
-      showHiddenOutputs={showHiddenOutputs}
-      hidden={
-        keyPrefix === "hidden"
-          ? showHiddenOutputs
-            ? displayOutput.hidden
-            : true
-          : false
-      }
-    />
+    <>
+      {renderIndividualOutputs()}
+      {renderGroupedOutputs()}
+    </>
   );
 }
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputParameter/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputParameter/index.tsx
index 98605f7b93e2..2ce06d8419a4 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputParameter/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputParameter/index.tsx
@@ -13,9 +13,7 @@ export const OutputParameter = ({
   types,
   selected,
   showNode,
-  showHiddenOutputs,
   isToolMode,
-  hidden,
   handleSelectOutput,
 }) => {
   const id = useMemo(
@@ -40,7 +38,6 @@ export const OutputParameter = ({
 
   return (
     <NodeOutputField
-      hidden={hidden}
       index={idx}
       lastOutput={lastOutput}
       selected={selected}
@@ -58,7 +55,6 @@ export const OutputParameter = ({
       handleSelectOutput={handleSelectOutput}
       colorName={colorNames}
       isToolMode={isToolMode}
-      showHiddenOutputs={showHiddenOutputs}
     />
   );
 };
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputParameter/nodeOutputUtils.ts b/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputParameter/nodeOutputUtils.ts
new file mode 100644
index 000000000000..e4e812a2243b
--- /dev/null
+++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputParameter/nodeOutputUtils.ts
@@ -0,0 +1,160 @@
+import type { NodeDataType } from "@/types/flow";
+import { scapeJSONParse } from "../../../../utils/reactflowUtils";
+import {
+  logFirstMessage,
+  logHasMessage,
+  logTypeIsError,
+  logTypeIsUnknown,
+} from "../../../../utils/utils";
+
+/**
+ * Determines if all outputs should be shown based on loop outputs and node type
+ */
+export const shouldShowAllOutputs = (
+  outputs: any[],
+  data: NodeDataType,
+): boolean => {
+  const hasLoopOutput = outputs.some((output) => output.allows_loop);
+  const isConditionalRouter = data.type === "ConditionalRouter";
+  return hasLoopOutput || isConditionalRouter;
+};
+
+/**
+ * Separates outputs into grouped and individual outputs
+ */
+export const separateOutputsByGroup = (
+  outputs: any[],
+): { groupedOutputs: any[]; individualOutputs: any[] } => {
+  const groupedOutputs = outputs.filter(
+    (output: any) => (output.group_outputs ?? false) === false,
+  );
+  const individualOutputs = outputs.filter(
+    (output: any) => (output.group_outputs ?? false) === true,
+  );
+  return { groupedOutputs, individualOutputs };
+};
+
+/**
+ * Gets the display output for grouped outputs
+ */
+export const getDisplayOutput = (
+  groupedOutputs: any[],
+  selectedOutput: any,
+) => {
+  if (groupedOutputs.length === 0) return undefined;
+
+  const outputWithSelection = groupedOutputs.find(
+    (output) => output.name === selectedOutput?.name,
+  );
+  return outputWithSelection || groupedOutputs[0];
+};
+
+/**
+ * Determines the output status (preview, unknown, error)
+ */
+export const determineOutputStatus = (
+  flowPool: any,
+  flowPoolId: string,
+  internalOutputName: string,
+) => {
+  const pool = flowPool[flowPoolId] ?? [];
+  const flowPoolNode = pool[pool.length - 1];
+
+  if (!flowPoolNode) {
+    return {
+      displayOutputPreview: false,
+      unknownOutput: false,
+      errorOutput: false,
+    };
+  }
+
+  const displayOutputPreview =
+    !!flowPool[flowPoolId] &&
+    logHasMessage(flowPoolNode?.data, internalOutputName);
+  const unknownOutput = logTypeIsUnknown(
+    flowPoolNode?.data,
+    internalOutputName,
+  );
+  const errorOutput = logTypeIsError(flowPoolNode?.data, internalOutputName);
+
+  return {
+    displayOutputPreview,
+    unknownOutput,
+    errorOutput,
+  };
+};
+
+/**
+ * Checks if all outputs are empty
+ */
+export const isOutputEmpty = (nodeData: any): boolean => {
+  if (!nodeData?.outputs) return true;
+
+  return Object.keys(nodeData.outputs).every(
+    (key) => nodeData.outputs[key]?.message?.length === 0,
+  );
+};
+
+/**
+ * Detects if there's a looping edge
+ */
+export const detectLooping = (edges: any[], sourceHandle: string): boolean => {
+  return edges.some((edge) => {
+    try {
+      const targetHandleObject = scapeJSONParse(edge.targetHandle || "{}");
+      return (
+        targetHandleObject.output_types && edge.sourceHandle === sourceHandle
+      );
+    } catch {
+      return false;
+    }
+  });
+};
+
+/**
+ * Determines if output shortcut is openable
+ */
+export const isOutputShortcutOpenable = ({
+  displayOutputPreview,
+  selected,
+  edges,
+  nodeData,
+  id,
+  flowPoolNode,
+  internalOutputName,
+}: {
+  displayOutputPreview: boolean;
+  selected: boolean;
+  edges: any[];
+  nodeData: any;
+  id: string;
+  flowPoolNode: any;
+  internalOutputName: string;
+}): boolean => {
+  if (!displayOutputPreview || !selected) return false;
+
+  const hasOutputs =
+    nodeData?.node?.outputs && nodeData.node.outputs.length > 0;
+  if (!hasOutputs) return false;
+
+  const sortedEdges = [...edges]
+    .filter((edge) => edge.source === nodeData.id)
+    .sort((a, b) => {
+      const indexA =
+        nodeData?.node?.outputs?.findIndex(
+          (output: any) => output.name === a.data?.sourceHandle?.name,
+        ) ?? 0;
+      const indexB =
+        nodeData?.node?.outputs?.findIndex(
+          (output: any) => output.name === b.data?.sourceHandle?.name,
+        ) ?? 0;
+      return indexA - indexB;
+    });
+
+  const isFirstOutput = sortedEdges[0]?.sourceHandle === id;
+  const hasNoEdges = !edges.some((edge) => edge.source === nodeData.id);
+  const isValidFirstMessage =
+    hasNoEdges && logFirstMessage(flowPoolNode?.data, internalOutputName);
+
+  return isFirstOutput || isValidFirstMessage;
+};
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx
index b6ac454531e4..7560fd23a3d2 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeOutputfield/index.tsx
@@ -217,7 +217,7 @@ function NodeOutputField({
 
   useEffect(() => {
     const outputHasGroupOutputsFalse =
-      data.node?.outputs?.[index]?.group_outputs === false;
+      (data.node?.outputs?.[index]?.group_outputs ?? false) === false;
 
     if (disabledOutput && hidden && !outputHasGroupOutputsFalse) {
       handleUpdateOutputHide(false);
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 7cbf65e85f7a..9460fca6de9f 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -339,15 +339,28 @@ function GenericNode({
   );
 
   useEffect(() => {
+    const outputs = data?.node?.outputs || [];
+    const nonGroupOutputs = outputs.filter((output) => !output.group_outputs);
+    const selectedNonGroupOutput = nonGroupOutputs.find(
+      (output) => output.selected,
+    );
+    const defaultOutput = selectedNonGroupOutput || nonGroupOutputs[0];
+
+    const hasManualSelection = !!data?.selected_output;
+    const hasOneOrFewerOutputs = nonGroupOutputs.length <= 1;
+    const hasSelectedOutput = !!selectedNonGroupOutput;
+    const hasNoValidOutput = defaultOutput === undefined;
+
+    // Skip auto-selection if output is manually selected, only one output exists with selection, or no valid output
     if (
-      data?.selected_output ||
-      (data?.node?.outputs?.filter((output) => !output.group_outputs)?.length ??
-        0) <= 1
-    )
+      hasManualSelection ||
+      (hasOneOrFewerOutputs && hasSelectedOutput) ||
+      hasNoValidOutput
+    ) {
       return;
-    handleSelectOutput(
-      data.node?.outputs?.find((output) => output.selected) || null,
-    );
+    }
+
+    handleSelectOutput(defaultOutput);
   }, [data.node?.outputs, data?.selected_output, handleSelectOutput]);
 
   const [hasChangedNodeDescription, setHasChangedNodeDescription] =
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 3a0d27931253..6c7d80ae1971 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -1,13 +1,13 @@
 import { useUpdateNodeInternals } from "@xyflow/react";
 import _, { cloneDeep } from "lodash";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { countHandlesFn } from "@/CustomNodes/helpers/count-handles";
 import { mutateTemplate } from "@/CustomNodes/helpers/mutate-template";
 import useHandleOnNewValue from "@/CustomNodes/hooks/use-handle-new-value";
 import useHandleNodeClass from "@/CustomNodes/hooks/use-handle-node-class";
 import ShadTooltip from "@/components/common/shadTooltipComponent";
 import ToggleShadComponent from "@/components/core/parameterRenderComponent/components/toggleShadComponent";
 import { Button } from "@/components/ui/button";
+import { LANGFLOW_SUPPORTED_TYPES } from "@/constants/constants";
 import { usePostTemplateValue } from "@/controllers/API/queries/nodes/use-post-template-value";
 import { usePostRetrieveVertexOrder } from "@/controllers/API/queries/vertex";
 import { customOpenNewTab } from "@/customization/utils/custom-open-new-tab";
@@ -119,16 +119,30 @@ const NodeToolbarComponent = memo(
     );
     const addFlow = useAddFlow();
 
-    const hasGroupOutputs = data.node?.outputs?.some?.(
-      (output) => output.group_outputs,
-    );
-    const hasOutputs =
-      data.node?.outputs?.length && data.node?.outputs?.length > 1;
+    const groupOutputs =
+      data.node?.outputs?.filter?.(
+        (output) => (output.group_outputs ?? false) === false,
+      ) ?? [];
+
+    const inputsWithHandle =
+      Object.values(data.node?.template ?? {}).filter((input) => {
+        return (
+          (!LANGFLOW_SUPPORTED_TYPES.has(input.type ?? "") ||
+            (input.input_types && input.input_types.length > 0)) &&
+          (!input.tool_mode || !data.node?.tool_mode) &&
+          !input.refresh_button &&
+          input.show &&
+          !input.advanced
+        );
+      }) ?? [];
 
-    const hasSelectOutput = hasOutputs && !hasGroupOutputs;
+    const hasSelectOutput =
+      groupOutputs.length > 0 &&
+      groupOutputs.length === data.node?.outputs?.length;
     const hasOnlyOneOutput = data.node?.outputs?.length === 1;
 
-    const isMinimal = hasSelectOutput || hasOnlyOneOutput;
+    const isMinimal =
+      (hasSelectOutput || hasOnlyOneOutput) && inputsWithHandle.length <= 1;
 
     const [toolMode, setToolMode] = useState(
       () =>
diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts
index 539db41973ba..9b7832b6b7fb 100644
--- a/src/frontend/src/utils/reactflowUtils.ts
+++ b/src/frontend/src/utils/reactflowUtils.ts
@@ -138,23 +138,19 @@ export function cleanEdges(nodes: AllNodeType[], edges: EdgeType[]) {
       const parsedSourceHandle = scapeJSONParse(sourceHandle);
       const name = parsedSourceHandle.name;
 
-      if (sourceNode.type == "genericNode") {
-        const output =
-          sourceNode.data.node!.outputs?.find(
-            (output) => output.name === sourceNode.data.selected_output,
-          ) ??
-          sourceNode.data.node!.outputs?.find(
-            (output) =>
-              (output.selected ||
-                (sourceNode.data.node!.outputs?.filter(
-                  (output) => !output.group_outputs,
-                )?.length ?? 0) <= 1) &&
-              output.name === name,
-          );
+      if (sourceNode.type === "genericNode") {
+        const output = sourceNode.data.node.outputs?.find(
+          (output) =>
+            output.name === name && // if output name is the same as the source handle name
+            (((output.group_outputs ?? false) === false && output.selected) || // if output is grouped and it's selected (visible)
+              (output.group_outputs ?? false) === true), // if output is not grouped (visible)
+        );
 
         if (output) {
           const outputTypes =
-            output!.types.length === 1 ? output!.types : [output!.selected!];
+            output.types.length === 1
+              ? output.types
+              : [output.selected ?? output.types[0]];
 
           const id: sourceHandleType = {
             id: sourceNode.data.id,
diff --git a/src/frontend/tests/core/integrations/Vector Store.spec.ts b/src/frontend/tests/core/integrations/Vector Store.spec.ts
index d2c2065a0195..424315c72a18 100644
--- a/src/frontend/tests/core/integrations/Vector Store.spec.ts	
+++ b/src/frontend/tests/core/integrations/Vector Store.spec.ts	
@@ -1,5 +1,6 @@
 import { expect, test } from "@playwright/test";
 import path from "path";
+import { adjustScreenView } from "../../utils/adjust-screen-view";
 import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
 import { initialGPTsetup } from "../../utils/initialGPTsetup";
 import { withEventDeliveryModes } from "../../utils/withEventDeliveryModes";
@@ -28,14 +29,8 @@ withEventDeliveryModes(
       .getByRole("heading", { name: "Vector Store RAG" })
       .first()
       .click();
-    await page.getByTestId("canvas_controls_dropdown").click();
 
-    await page.waitForSelector('[title="fit view"]', {
-      timeout: 20000,
-    });
-
-    await page.getByTestId("fit_view").click();
-    await page.getByTestId("canvas_controls_dropdown").click();
+    await adjustScreenView(page);
 
     await initialGPTsetup(page);
 
@@ -44,11 +39,8 @@ withEventDeliveryModes(
     });
 
     await page.waitForTimeout(500);
-    await page.getByTestId("canvas_controls_dropdown").click();
-
-    await page.getByTestId("fit_view").click();
 
-    await page.getByTestId("canvas_controls_dropdown").click();
+    await adjustScreenView(page);
     // Astra DB tokens
     await page
       .getByTestId("popover-anchor-input-token")
diff --git a/src/frontend/tests/extended/regression/general-bugs-clean-edges.spec.ts b/src/frontend/tests/extended/regression/general-bugs-clean-edges.spec.ts
new file mode 100644
index 000000000000..d18be3c0e68e
--- /dev/null
+++ b/src/frontend/tests/extended/regression/general-bugs-clean-edges.spec.ts
@@ -0,0 +1,216 @@
+import { expect, test } from "@playwright/test";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
+
+test(
+  "custom component outputs should persist connections after page refresh",
+  { tag: ["@release", "@components"] },
+
+  async ({ page }) => {
+    await awaitBootstrapTest(page);
+
+    await page.waitForSelector('[data-testid="blank-flow"]', {
+      timeout: 30000,
+    });
+
+    await page.getByTestId("blank-flow").click();
+
+    // Create custom component with 6 outputs
+    await page.getByTestId("sidebar-custom-component-button").click();
+
+    await expect(page.getByTestId("code-button-modal")).toBeVisible({
+      timeout: 3000,
+    });
+
+    await page.getByTestId("code-button-modal").last().click();
+
+    const customComponentCode = `
+from langflow.custom import Component
+from langflow.io import Output
+from langflow.schema.message import Message
+
+class CustomComponent(Component):
+    display_name = "Custom Component"
+    description = "Test component with multiple outputs"
+    icon = "custom_components"
+    name = "CustomComponent"
+
+    outputs = [
+        Output(display_name="Test 1", name="test_1", method="hello_world", group_outputs=True),
+        Output(display_name="Test 2", name="test_2", method="hello_world", group_outputs=True),
+        Output(display_name="Test 3", name="test_3", method="hello_world", group_outputs=False),
+        Output(display_name="Test 4", name="test_4", method="hello_world", group_outputs=False),
+        Output(display_name="Test 5", name="test_5", method="hello_world"),
+        Output(display_name="Test 6", name="test_6", method="hello_world"),
+    ]
+
+    def hello_world(self) -> Message:
+        return Message(text="Hello, World!")
+`;
+
+    await page.locator(".ace_content").click();
+    await page.keyboard.press(`ControlOrMeta+A`);
+    await page.locator("textarea").fill(customComponentCode);
+
+    await page.getByText("Check & Save").last().click();
+
+    await page.waitForTimeout(1000);
+
+    // Verify first two outputs appear separately
+    await expect(
+      page.getByTestId("handle-customcomponent-shownode-test 1-right"),
+    ).toBeVisible();
+    await expect(
+      page.getByTestId("handle-customcomponent-shownode-test 2-right"),
+    ).toBeVisible();
+
+    // Verify the rest appear as a dropdown
+    // Find the dropdown trigger by looking for "Test 3" with ChevronDown sibling
+    const test3Element = page.locator('text="Test 3"');
+    await expect(test3Element).toBeVisible();
+
+    const dropdownTrigger = test3Element
+      .locator("..", { has: page.locator('[data-testid="icon-ChevronDown"]') })
+      .locator('[data-testid="icon-ChevronDown"]');
+    await expect(dropdownTrigger).toBeVisible();
+
+    // Click the dropdown to expand it
+    await dropdownTrigger.click();
+
+    // Verify dropdown items appear
+    await expect(
+      page.getByTestId("dropdown-item-output-undefined-test 3"),
+    ).toBeVisible();
+    await expect(
+      page.getByTestId("dropdown-item-output-undefined-test 4"),
+    ).toBeVisible();
+    await expect(
+      page.getByTestId("dropdown-item-output-undefined-test 5"),
+    ).toBeVisible();
+    await expect(
+      page.getByTestId("dropdown-item-output-undefined-test 6"),
+    ).toBeVisible();
+
+    // Close the dropdown
+    await dropdownTrigger.click();
+
+    // Add 3 Chat Output components
+    for (let i = 0; i < 3; i++) {
+      await page.getByTestId("sidebar-search-input").click();
+      await page.getByTestId("sidebar-search-input").fill("chat output");
+      await page.waitForSelector('[data-testid="input_outputChat Output"]', {
+        timeout: 100000,
+      });
+
+      await page
+        .getByTestId("input_outputChat Output")
+        .dragTo(page.locator('//*[@id="react-flow-id"]'), {
+          targetPosition: { x: 800, y: 100 + i * 100 },
+        });
+
+      await page.getByTestId("sidebar-search-input").clear();
+    }
+
+    await page.waitForTimeout(1000);
+
+    // Connect Test 1 and Test 2 outputs (separate outputs)
+    await page
+      .getByTestId("handle-customcomponent-shownode-test 1-right")
+      .click();
+    await page
+      .locator('[data-testid="handle-chatoutput-noshownode-inputs-target"]')
+      .first()
+      .click();
+
+    await page
+      .getByTestId("handle-customcomponent-shownode-test 2-right")
+      .click();
+    await page
+      .locator('[data-testid="handle-chatoutput-noshownode-inputs-target"]')
+      .nth(1)
+      .click();
+
+    // Connect Test 3 from dropdown
+    await dropdownTrigger.click();
+    await page.getByTestId("dropdown-item-output-undefined-test 3").click();
+
+    await page.waitForTimeout(500);
+
+    // Now use the handle that appears for Test 3
+    await page
+      .getByTestId("handle-customcomponent-shownode-test 3-right")
+      .click();
+    await page
+      .locator('[data-testid="handle-chatoutput-noshownode-inputs-target"]')
+      .nth(2)
+      .click();
+
+    await page.waitForTimeout(500);
+
+    // Verify we have 3 edges connected
+    let edgeCount = await page.locator(".react-flow__edge").count();
+    expect(edgeCount).toBe(3);
+
+    // Change dropdown option to Test 4 and verify edge disappeared
+    await dropdownTrigger.click();
+    await page.getByTestId("dropdown-item-output-undefined-test 4").click();
+
+    await page.waitForTimeout(500);
+
+    edgeCount = await page.locator(".react-flow__edge").count();
+    expect(edgeCount).toBe(2);
+
+    // Change back to Test 3 and verify edge is still missing (doesn't come back)
+    // Now the dropdown is showing Test 4, so re-query for it
+    const test4Element = page.locator('text="Test 4"');
+    const dropdownTrigger4 = test4Element
+      .locator("..", { has: page.locator('[data-testid="icon-ChevronDown"]') })
+      .locator('[data-testid="icon-ChevronDown"]');
+
+    await dropdownTrigger4.click();
+    await page.getByTestId("dropdown-item-output-undefined-test 3").click();
+
+    await page.waitForTimeout(500);
+
+    edgeCount = await page.locator(".react-flow__edge").count();
+    expect(edgeCount).toBe(2);
+
+    // Change to Test 5 and connect it to the 3rd chat output
+    // Now the dropdown is showing Test 3 again, so re-query for it
+    const test3Element2 = page.locator('text="Test 3"');
+    const dropdownTrigger3 = test3Element2
+      .locator("..", { has: page.locator('[data-testid="icon-ChevronDown"]') })
+      .locator('[data-testid="icon-ChevronDown"]');
+
+    await dropdownTrigger3.click();
+    await page.getByTestId("dropdown-item-output-undefined-test 5").click();
+
+    await page.waitForTimeout(500);
+
+    await page
+      .getByTestId("handle-customcomponent-shownode-test 5-right")
+      .click();
+    await page
+      .locator('[data-testid="handle-chatoutput-noshownode-inputs-target"]')
+      .nth(2)
+      .click();
+
+    await page.waitForTimeout(2000);
+
+    // Count edges before refresh (should have 3 edges: Test 1, Test 2, Test 5)
+    const edgesBeforeRefresh = await page.locator(".react-flow__edge").count();
+    expect(edgesBeforeRefresh).toBe(3);
+
+    // Refresh the page
+    await page.reload();
+
+    await page.waitForSelector('[data-testid="div-generic-node"]', {
+      timeout: 30000,
+    });
+
+    // Count edges after refresh
+    const edgesAfterRefresh = await page.locator(".react-flow__edge").count();
+
+    // Verify all edges are still connected
+    expect(edgesAfterRefresh).toBe(edgesBeforeRefresh);
+  },
+);