diff --git a/chainforge/react-server/src/DraggablePopover.tsx b/chainforge/react-server/src/DraggablePopover.tsx
new file mode 100644
index 000000000..3f60f1d87
--- /dev/null
+++ b/chainforge/react-server/src/DraggablePopover.tsx
@@ -0,0 +1,152 @@
+import {
+  Popover,
+  Badge,
+  Text,
+  Textarea,
+  NumberInput,
+  Button,
+  Stack,
+} from "@mantine/core";
+import { IconBulb } from "@tabler/icons-react";
+import { useState, CSSProperties } from "react";
+
+interface MarkerPopoverProps {
+  anchor: { x: number; y: number };
+  preview: string;
+  context: string;
+  setContext: (s: string) => void;
+  variants: string;
+  setVariants: (v: string) => void;
+  onGenerate: () => void;
+  loading?: boolean;
+  nodeType?: "textfields" | "prompt" | "chat";
+}
+
+export default function MarkerPopover({
+  anchor,
+  preview,
+  context,
+  setContext,
+  variants,
+  setVariants,
+  onGenerate,
+  loading = false,
+  nodeType = "textfields",
+}: MarkerPopoverProps) {
+  const [open, setOpen] = useState(false);
+
+  const bulbStyle: CSSProperties = {
+    position: "fixed",
+    top: anchor.y,
+    left: anchor.x,
+    zIndex: 10_000,
+  };
+
+  const getLabels = () => {
+    switch (nodeType) {
+      case "prompt":
+        return {
+          title: "PROMPT CONFIGURATION",
+          contextLabel: "Prompt context",
+          variantsLabel: "Prompt variants to generate",
+        };
+      case "chat":
+        return {
+          title: "CHAT CONFIGURATION",
+          contextLabel: "Chat context",
+          variantsLabel: "Response variants to generate",
+        };
+      default:
+        return {
+          title: "FIELD CONFIGURATION",
+          contextLabel: "Extra configuration",
+          variantsLabel: "Variants to generate",
+        };
+    }
+  };
+
+  const labels = getLabels();
+
+  return (
+    <Popover
+      opened={open}
+      onChange={setOpen}
+      position="right-start"
+      withArrow
+      shadow="rgb(38,57,77) 0 10px 30px -14px"
+      withinPortal
+      keepMounted
+    >
+      <Popover.Target>
+        <button
+          className="ai-button nodrag"
+          style={bulbStyle}
+          onClick={(e) => {
+            e.stopPropagation();
+            setOpen((v) => !v);
+          }}
+        >
+          <IconBulb size={10} fill="violet" />
+        </button>
+      </Popover.Target>
+
+      <Popover.Dropdown className="nodrag nowheel" style={{ width: "100%" }}>
+        <Badge
+          color="grape"
+          variant="light"
+          radius="sm"
+          style={{ width: "100%" }}
+          leftSection={<IconBulb size={10} stroke={2} />}
+        >
+          {labels.title}
+        </Badge>
+
+        {preview && (
+          <Text size="xs" fs="italic" c="dimmed" mt="sm" mb="sm" lh={1.3}>
+            "{preview}"
+          </Text>
+        )}
+
+        <Stack spacing="md">
+          <div>
+            <Text size="sm" fw={600} mb={4}>
+              {labels.contextLabel}
+            </Text>
+            <Textarea
+              value={context}
+              onChange={(e) => setContext(e.currentTarget.value)}
+              autosize
+              minRows={2}
+              disabled={loading}
+            />
+          </div>
+
+          <div>
+            <Text size="sm" fw={600} mb={4}>
+              {labels.variantsLabel}
+            </Text>
+            <NumberInput
+              min={1}
+              value={Number(variants)}
+              onChange={(n) => setVariants(String(n))}
+              disabled={loading}
+            />
+          </div>
+
+          <Button
+            variant="light"
+            color="grape"
+            fullWidth
+            loading={loading}
+            onClick={() => {
+              onGenerate();
+              setOpen(false);
+            }}
+          >
+            Generate
+          </Button>
+        </Stack>
+      </Popover.Dropdown>
+    </Popover>
+  );
+}
diff --git a/chainforge/react-server/src/PromptNode.tsx b/chainforge/react-server/src/PromptNode.tsx
index c5781c4bf..7c97519f5 100644
--- a/chainforge/react-server/src/PromptNode.tsx
+++ b/chainforge/react-server/src/PromptNode.tsx
@@ -5,6 +5,7 @@ import React, {
   useCallback,
   useMemo,
   useContext,
+  useLayoutEffect,
 } from "react";
 import { Handle, Position } from "reactflow";
 import { v4 as uuid } from "uuid";
@@ -85,6 +86,8 @@ import {
 import { StringLookup } from "./backend/cache";
 import { union } from "./backend/setUtils";
 import AreYouSureModal, { AreYouSureModalRef } from "./AreYouSureModal";
+import { useMarkerLogic } from "./backend/useSelectionText";
+import MarkerPopover from "./DraggablePopover";
 
 const getUniqueLLMMetavarKey = (responses: LLMResponse[]) => {
   const metakeys = new Set(
@@ -94,6 +97,7 @@ const getUniqueLLMMetavarKey = (responses: LLMResponse[]) => {
   while (metakeys.has(`LLM_${i}`)) i += 1;
   return `LLM_${i}`;
 };
+
 const bucketChatHistoryInfosByLLM = (chat_hist_infos: ChatHistoryInfo[]) => {
   const chats_by_llm: Dict<ChatHistoryInfo[]> = {};
   chat_hist_infos.forEach((chat_hist_info) => {
@@ -103,6 +107,7 @@ const bucketChatHistoryInfosByLLM = (chat_hist_infos: ChatHistoryInfo[]) => {
   });
   return chats_by_llm;
 };
+
 const getRootPromptFor = (
   promptTexts: string | string[],
   varNameForRootTemplate: string,
@@ -352,6 +357,7 @@ const PromptNode: React.FC<PromptNodeProps> = ({
       else return <IconMessageCircle size={16} />;
     } else return node_type === "chat" ? "🗣" : "💬";
   }, [node_type, colorScheme]);
+
   const node_default_title = useMemo(
     () => (node_type === "chat" ? "Chat Turn" : "Prompt Node"),
     [node_type],
@@ -392,6 +398,34 @@ const PromptNode: React.FC<PromptNodeProps> = ({
     data.n ?? 1,
   );
 
+  useLayoutEffect(() => {
+
+    // Grab the exact string we’re showing:
+    const text =
+      typeof promptText === "string"
+        ? promptText
+        : promptText[idxPromptVariantShown] || "";
+
+    // Extract all of the {…} pieces and trim them
+    const rawVars = extractBracketedSubstrings(text);
+    const newVars = rawVars.map((v) => v.trim()).filter((v) => v !== "");
+
+    // Only fire if the set really changed
+    if (!setsAreEqual(new Set(newVars), new Set(templateVars))) {
+      setTemplateVars(newVars);
+      setDataPropsForNode(id, { vars: newVars, prompt: text });
+      pingOutputNodes(id);
+    }
+  }, [
+    promptText,
+    idxPromptVariantShown,
+    edges,
+    templateVars,
+    id,
+    setDataPropsForNode,
+    pingOutputNodes,
+  ]);
+
   // The LLM items container
   const llmListContainer = useRef<LLMListContainerRef>(null);
   const [llmItemsCurrState, setLLMItemsCurrState] = useState<LLMSpec[]>([]);
@@ -435,6 +469,9 @@ const PromptNode: React.FC<PromptNodeProps> = ({
   const debounceTimeoutRef = useRef(null);
   const debounce = genDebounceFunc(debounceTimeoutRef);
 
+  // Node reference for positioning the marker popover
+  const nodeRef = useRef<HTMLDivElement>(null);
+
   const triggerAlert = useCallback(
     (msg: string) => {
       setProgress(undefined);
@@ -515,8 +552,18 @@ const PromptNode: React.FC<PromptNodeProps> = ({
     }
   }, [templateVars, id, pullInputData, updateShowContToggle]);
 
+  // this state to track when marker operations are in progress
+  const [markerOperationInProgress, setMarkerOperationInProgress] =
+    useState(false);
+
   const refreshTemplateHooks = useCallback(
     (text: string | string[]) => {
+      //  template refresh if marker operation is in progress
+      if (markerOperationInProgress) {
+        console.log("Skipping template refresh - marker operation in progress");
+        return;
+      }
+
       const texts = typeof text === "string" ? [text] : text;
 
       // Get all template vars in the prompt(s)
@@ -540,39 +587,168 @@ const PromptNode: React.FC<PromptNodeProps> = ({
         setTemplateVars(Array.from(found_template_vars));
       }
     },
-    [setTemplateVars, templateVars, pullInputData, id],
+    [
+      setTemplateVars,
+      templateVars,
+      pullInputData,
+      id,
+      updateShowContToggle,
+      markerOperationInProgress,
+    ],
   );
 
-  const handleInputChange = useCallback(
-    (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-      const value = event.target.value as string;
-      const updateStatus =
-        promptTextOnLastRun !== null &&
-        status !== Status.WARNING &&
-        value !== promptTextOnLastRun;
-
-      // Debounce the global state change to happen only after 500ms, as it forces a costly rerender:
-      debounce((_value: string, _updateStatus, _idxPromptVariantShown) => {
-        setPromptText((prompts) => {
-          if (typeof prompts === "string") prompts = _value;
-          else prompts[_idxPromptVariantShown] = _value;
-          setDataPropsForNode(id, { prompt: prompts });
-          refreshTemplateHooks(prompts);
-          return prompts;
-        });
-        if (_updateStatus) setStatus(Status.WARNING);
-      }, 300)(value, updateStatus, idxPromptVariantShown);
+  const [internalPromptText, setInternalPromptText] = useState<
+    string | string[]
+  >(data.prompt ?? "");
+
+  const markerLogic = useMarkerLogic({
+    nodeId: id,
+    isPromptNode: true,
+    fieldValues: useMemo(() => {
+      const currentText =
+        typeof promptText === "string"
+          ? promptText
+          : promptText[idxPromptVariantShown] || "";
+
+      return { prompt: currentText };
+    }, [promptText, idxPromptVariantShown]),
+    templateVars,
+    onFieldChange: useCallback(
+      (fieldId: string, value: string) => {
+        if (fieldId === "prompt") {
+          // Set marker operation flag
+          setMarkerOperationInProgress(true);
+
+          // Update state immediately
+          if (typeof promptText === "string") {
+            setPromptText(value);
+            setInternalPromptText(value);
+          } else {
+            const newPrompts = [...promptText];
+            newPrompts[idxPromptVariantShown] = value;
+            setPromptText(newPrompts);
+            setInternalPromptText(newPrompts);
+          }
+
+          // Debounce the persistence but clear the marker flag after a longer delay
+          debounce((finalValue: string) => {
+            const finalPrompts =
+              typeof promptText === "string"
+                ? finalValue
+                : (() => {
+                    const prompts = Array.isArray(promptText)
+                      ? [...promptText]
+                      : [promptText as string];
+                    prompts[idxPromptVariantShown] = finalValue;
+                    return prompts;
+                  })();
+
+            setDataPropsForNode(id, { prompt: finalPrompts });
+
+            // Clear marker operation flag after a delay to allow operations to complete
+            setTimeout(() => {
+              setMarkerOperationInProgress(false);
+              // Now safe to refresh template hooks
+              refreshTemplateHooks(finalPrompts);
+            }, 1000);
+            if (promptTextOnLastRun !== null && status !== Status.WARNING) {
+              setStatus(Status.WARNING);
+            }
+          }, 300)(value);
+        }
+      },
+      [
+        promptText,
+        idxPromptVariantShown,
+        promptTextOnLastRun,
+        status,
+        debounce,
+        id,
+        refreshTemplateHooks,
+        setDataPropsForNode,
+        setMarkerOperationInProgress,
+      ],
+    ),
+
+    onTemplateVarsChange: useCallback(
+      (vars: string[]) => {
+        setTemplateVars(vars);
+        setDataPropsForNode(id, { vars });
+      },
+      [id, setDataPropsForNode],
+    ),
+
+    onDataUpdate: useCallback(
+      (data: any) => {
+        setDataPropsForNode(id, data);
+      },
+      [id, setDataPropsForNode],
+    ),
+
+    findNodeByParam: useCallback(
+      (nodeId: string, param: string) => {
+        const connectedEdges = edges.filter(
+          (e) => e.target === nodeId && e.targetHandle === param,
+        );
+        if (connectedEdges.length === 0) return undefined;
+
+        const sourceNodeId = connectedEdges[0].source;
+        const nodes = useStore.getState().nodes;
+        return nodes.find((n) => n.id === sourceNodeId);
+      },
+      [edges],
+    ),
+  });
 
-      // Debounce refreshing the template hooks so we don't annoy the user
-      // debounce((_value) => refreshTemplateHooks(_value), 500)(value);
+  const contextPopover = useMemo(() => {
+    if (!markerLogic.textSelection) return null;
+
+    return (
+      <MarkerPopover
+        anchor={{
+          x: markerLogic.textSelection.anchorX,
+          y: markerLogic.textSelection.anchorY,
+        }}
+        preview={markerLogic.selectionPreview}
+        context={markerLogic.contextDraft}
+        setContext={markerLogic.setContextDraft}
+        variants={markerLogic.numVariants}
+        setVariants={markerLogic.setNumVariants}
+        onGenerate={() => {
+          console.log("Generate button clicked in PromptNode");
+          markerLogic.handleGenerate();
+        }}
+        loading={markerLogic.suggestionsLoading}
+      />
+    );
+  }, [
+    markerLogic.textSelection,
+    markerLogic.selectionPreview,
+    markerLogic.contextDraft,
+    markerLogic.setContextDraft,
+    markerLogic.numVariants,
+    markerLogic.setNumVariants,
+    markerLogic.handleGenerate,
+    markerLogic.suggestionsLoading,
+  ]);
+
+  const handleInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      const val = e.currentTarget.value;
+      setPromptText(val);
+      if (!markerOperationInProgress) {
+        debounce((final) => {
+          setDataPropsForNode(id, { prompt: final });
+          refreshTemplateHooks(final);
+        }, 300)(val);
+      }
     },
     [
-      idxPromptVariantShown,
-      promptTextOnLastRun,
-      status,
-      refreshTemplateHooks,
+      markerOperationInProgress,
+      debounce,
+      id,
       setDataPropsForNode,
-      debounceTimeoutRef,
+      refreshTemplateHooks,
     ],
   );
 
@@ -600,6 +776,7 @@ const PromptNode: React.FC<PromptNodeProps> = ({
     () => data.refreshLLMList,
     [data.refreshLLMList],
   );
+
   useEffect(() => {
     if (refresh === true) {
       setDataPropsForNode(id, { refresh: false });
@@ -1348,6 +1525,7 @@ Soft failing by replacing undefined with empty strings.`,
   };
 
   const [hooksY, setHooksY] = useState(138);
+
   const setRef = useCallback(
     (elem: HTMLDivElement | HTMLTextAreaElement | null) => {
       if (!elem) return;
@@ -1374,6 +1552,7 @@ Soft failing by replacing undefined with empty strings.`,
   );
 
   const deleteVariantConfirmModal = useRef<AreYouSureModalRef>(null);
+
   const handleAddPromptVariant = useCallback(() => {
     // Pushes a new prompt variant, updating the prompts list and duplicating the current shown prompt
     const prompts = typeof promptText === "string" ? [promptText] : promptText;
@@ -1429,6 +1608,7 @@ Soft failing by replacing undefined with empty strings.`,
       });
       return [...prompts];
     });
+
     setPromptVariantLabel((prev) => {
       if (prev.length <= 1) return prev; // cannot remove the last one
       prev.splice(idxPromptVariantShown, 1); // remove the indexed variant
@@ -1568,6 +1748,8 @@ Soft failing by replacing undefined with empty strings.`,
       </Flex>
     );
   }, [
+    node_type,
+    promptText,
     idxPromptVariantShown,
     promptVariantLabel,
     promptText,
@@ -1595,218 +1777,235 @@ Soft failing by replacing undefined with empty strings.`,
     [id],
   );
 
+  const currentTextareaValue = useMemo(() => {
+    if (typeof promptText === "string") {
+      return promptText;
+    } else {
+      return promptText[idxPromptVariantShown] || "";
+    }
+  }, [promptText, idxPromptVariantShown]);
   return (
-    <BaseNode
-      classNames="prompt-node"
-      nodeId={id}
-      contextMenuExts={customContextMenuItems}
-    >
-      <NodeLabel
-        title={data.title || node_default_title}
+    <div ref={nodeRef} className="prompt-node-wrapper">
+      <BaseNode
+        classNames="prompt-node"
         nodeId={id}
-        onEdit={hideStatusIndicator}
-        icon={node_icon}
-        status={status}
-        isRunning={status === "loading"}
-        handleRunClick={handleRunClick}
-        handleStopClick={handleStopClick}
-        handleRunHover={handleRunHover}
-        runButtonTooltip={runTooltip}
-        customButtons={[
-          <PromptListPopover
-            key="prompt-previews"
-            promptInfos={promptPreviews}
-            promptTemplates={promptText}
-            onHover={handlePreviewHover}
-            onClick={openInfoModal}
-            theme={colorScheme}
-          />,
-        ]}
-      />
-      <LLMResponseInspectorModal
-        ref={inspectModal}
-        jsonResponses={jsonResponses ?? []}
-      />
-      <PromptListModal
-        promptPreviews={promptPreviews}
-        promptTemplates={promptText}
-        infoModalOpened={infoModalOpened}
-        closeInfoModal={closeInfoModal}
-        theme={colorScheme}
-      />
-      <AreYouSureModal
-        ref={deleteVariantConfirmModal}
-        title="Delete prompt variant"
-        message="Are you sure you want to delete this prompt variant? This action is irreversible."
-        color="red"
-        onConfirm={handleRemovePromptVariant}
-      />
-
-      {node_type === "chat" ? (
-        <div ref={setRef}>
-          <ChatHistoryView
-            bgColors={["#ccc", "#ceeaf5b1"]}
-            messages={[
-              "(Past conversation)",
-              <Textarea
-                key={0}
-                className="prompt-field-fixed nodrag nowheel"
-                minRows={4}
-                defaultValue={
-                  typeof data.prompt === "string"
-                    ? data.prompt
-                    : data.prompt[data.idxPromptVariantShown ?? 0]
-                }
-                onChange={handleInputChange}
-                miw={230}
-                styles={{
-                  input: { background: "transparent", borderWidth: "0px" },
-                }}
-              />,
-            ]}
-          />
-          <Handle
-            type="target"
-            position={Position.Left}
-            id="__past_chats"
-            style={{ top: "82px", background: "#555" }}
-          />
-        </div>
-      ) : (
-        <Textarea
-          ref={setRef}
-          // autosize
-          className="prompt-field-fixed nodrag nowheel"
-          minRows={5}
-          maxRows={12}
-          defaultValue={
-            typeof data.prompt === "string"
-              ? data.prompt
-              : data.prompt && data.prompt[data.idxPromptVariantShown ?? 0]
-          }
-          onChange={handleInputChange}
-          // value={typeof promptText === "string" ? promptText : promptText[idxPromptVariantShown]}
+        contextMenuExts={customContextMenuItems}
+      >
+        {contextPopover}
+        <NodeLabel
+          title={data.title || node_default_title}
+          nodeId={id}
+          onEdit={hideStatusIndicator}
+          icon={node_icon}
+          status={status}
+          isRunning={status === "loading"}
+          handleRunClick={handleRunClick}
+          handleStopClick={handleStopClick}
+          handleRunHover={handleRunHover}
+          runButtonTooltip={runTooltip}
+          customButtons={[
+            <PromptListPopover
+              key="prompt-previews"
+              promptInfos={promptPreviews}
+              promptTemplates={promptText}
+              onHover={handlePreviewHover}
+              onClick={openInfoModal}
+              theme={colorScheme}
+            />,
+          ]}
         />
-      )}
 
-      {promptVariantControls}
+        <LLMResponseInspectorModal
+          ref={inspectModal}
+          jsonResponses={jsonResponses ?? []}
+        />
 
-      <Handle
-        type="source"
-        position={Position.Right}
-        id="prompt"
-        className="grouped-handle"
-        style={{ top: "50%" }}
-      />
+        <PromptListModal
+          promptPreviews={promptPreviews}
+          promptTemplates={promptText}
+          infoModalOpened={infoModalOpened}
+          closeInfoModal={closeInfoModal}
+          theme={colorScheme}
+        />
 
-      <Box mih={14}>
-        <TemplateHooks
-          vars={templateVars}
-          nodeId={id}
-          startY={hooksY}
-          position={Position.Left}
-          ignoreHandles={["__past_chats"]}
+        <AreYouSureModal
+          ref={deleteVariantConfirmModal}
+          title="Delete prompt variant"
+          message="Are you sure you want to delete this prompt variant? This action is irreversible."
+          color="red"
+          onConfirm={handleRemovePromptVariant}
         />
-      </Box>
 
-      <hr />
-      <div>
-        <div style={{ marginBottom: "10px", padding: "4px" }}>
-          <Flex align="center">
-            <label htmlFor="num-generations" style={{ fontSize: "10pt" }}>
-              Num responses per prompt:&nbsp;
-            </label>
-            <NumberInput
-              min={1}
-              max={999}
-              defaultValue={data.n || 1}
-              onChange={handleNumGenChange}
-              classNames={{ input: "nodrag" }}
-              size="xs"
-              ml="4px"
-              w="25%"
+        {node_type === "chat" ? (
+          <div ref={setRef}>
+            <ChatHistoryView
+              bgColors={["#ccc", "#ceeaf5b1"]}
+              messages={[
+                "(Past conversation)",
+                <Textarea
+                  id="prompt"
+                  name="prompt"
+                  value={currentTextareaValue}
+                  key={0}
+                  className="prompt-field-fixed nodrag nowheel"
+                  minRows={4}
+                  defaultValue={
+                    typeof data.prompt === "string"
+                      ? data.prompt
+                      : data.prompt[data.idxPromptVariantShown ?? 0]
+                  }
+                  onChange={handleInputChange}
+                  onMouseUp={(e) => {
+                    markerLogic.handleMouseUp(e, nodeRef);
+                  }}
+                  miw={230}
+                  styles={{
+                    input: { background: "transparent", borderWidth: "0px" },
+                  }}
+                />,
+              ]}
             />
-          </Flex>
-        </div>
-
-        {showContToggle ? (
-          <div>
-            <Switch
-              label={
-                contWithPriorLLMs
-                  ? "Continue with prior LLM(s)"
-                  : "Continue with new LLMs:"
-              }
-              defaultChecked={true}
-              checked={contWithPriorLLMs}
-              disabled={contToggleDisabled}
-              onChange={(event) => {
-                setStatus(Status.WARNING);
-                setContWithPriorLLMs(event.currentTarget.checked);
-                setDataPropsForNode(id, {
-                  contChat: event.currentTarget.checked,
-                });
-              }}
-              color="cyan"
-              size="xs"
-              mb={contWithPriorLLMs ? "4px" : "10px"}
+            <Handle
+              type="target"
+              position={Position.Left}
+              id="__past_chats"
+              style={{ top: "82px", background: "#555" }}
             />
           </div>
         ) : (
-          <></>
-        )}
-
-        {!contWithPriorLLMs || !showContToggle ? (
-          <LLMListContainer
-            ref={llmListContainer}
-            initLLMItems={data.llms}
-            onItemsChange={onLLMListItemsChange}
+          <Textarea
+            id="prompt"
+            name="prompt"
+            ref={setRef}
+            className="prompt-field-fixed nodrag nowheel"
+            minRows={5}
+            maxRows={12}
+            value={currentTextareaValue}
+            defaultValue={
+              typeof data.prompt === "string"
+                ? data.prompt
+                : data.prompt && data.prompt[data.idxPromptVariantShown ?? 0]
+            }
+            onChange={handleInputChange}
+            onMouseUp={(e) => {
+              markerLogic.handleMouseUp(e, nodeRef);
+            }}
           />
-        ) : (
-          <></>
         )}
 
-        {progress !== undefined ? (
-          <Progress
-            animate={progressAnimated}
-            sections={[
-              {
-                value: progress.success,
-                color: "blue",
-                tooltip: "API call succeeded",
-              },
-              {
-                value: progress.error,
-                color: "red",
-                tooltip: "Error collecting response",
-              },
-            ]}
-          />
-        ) : (
-          <></>
-        )}
+        {promptVariantControls}
 
-        {jsonResponses && jsonResponses.length > 0 && status !== "loading" ? (
-          <InspectFooter
-            onClick={showResponseInspector}
-            isDrawerOpen={showDrawer}
-            showDrawerButton={true}
-            onDrawerClick={() => {
-              setShowDrawer(!showDrawer);
-              setUninspectedResponses(false);
-              bringNodeToFront(id);
-            }}
+        <Handle
+          type="source"
+          position={Position.Right}
+          id="prompt"
+          className="grouped-handle"
+          style={{ top: "50%" }}
+        />
+
+        <Box mih={14}>
+          <TemplateHooks
+            vars={templateVars}
+            nodeId={id}
+            startY={hooksY}
+            position={Position.Left}
+            ignoreHandles={["__past_chats"]}
           />
-        ) : (
-          <></>
-        )}
-      </div>
+        </Box>
+
+        <hr />
+        <div>
+          <div style={{ marginBottom: "10px", padding: "4px" }}>
+            <Flex align="center">
+              <label htmlFor="num-generations" style={{ fontSize: "10pt" }}>
+                Num responses per prompt:&nbsp;
+              </label>
+              <NumberInput
+                min={1}
+                max={999}
+                defaultValue={data.n || 1}
+                onChange={handleNumGenChange}
+                classNames={{ input: "nodrag" }}
+                size="xs"
+                ml="4px"
+                w="25%"
+              />
+            </Flex>
+          </div>
 
-      <LLMResponseInspectorDrawer
-        jsonResponses={jsonResponses ?? []}
-        showDrawer={showDrawer}
-      />
-    </BaseNode>
+          {showContToggle && (
+            <div>
+              <Switch
+                label={
+                  contWithPriorLLMs
+                    ? "Continue with prior LLM(s)"
+                    : "Continue with new LLMs:"
+                }
+                defaultChecked={true}
+                checked={contWithPriorLLMs}
+                disabled={contToggleDisabled}
+                onChange={(event) => {
+                  setStatus(Status.WARNING);
+                  setContWithPriorLLMs(event.currentTarget.checked);
+                  setDataPropsForNode(id, {
+                    contChat: event.currentTarget.checked,
+                  });
+                }}
+                color="cyan"
+                size="xs"
+                mb={contWithPriorLLMs ? "4px" : "10px"}
+              />
+            </div>
+          )}
+
+          {(!contWithPriorLLMs || !showContToggle) && (
+            <LLMListContainer
+              ref={llmListContainer}
+              initLLMItems={data.llms}
+              onItemsChange={onLLMListItemsChange}
+            />
+          )}
+
+          {progress !== undefined && (
+            <Progress
+              animate={progressAnimated}
+              sections={[
+                {
+                  value: progress.success,
+                  color: "blue",
+                  tooltip: "API call succeeded",
+                },
+                {
+                  value: progress.error,
+                  color: "red",
+                  tooltip: "Error collecting response",
+                },
+              ]}
+            />
+          )}
+
+          {jsonResponses &&
+            jsonResponses.length > 0 &&
+            status !== "loading" && (
+              <InspectFooter
+                onClick={showResponseInspector}
+                isDrawerOpen={showDrawer}
+                showDrawerButton={true}
+                onDrawerClick={() => {
+                  setShowDrawer(!showDrawer);
+                  setUninspectedResponses(false);
+                  bringNodeToFront(id);
+                }}
+              />
+            )}
+        </div>
+
+        <LLMResponseInspectorDrawer
+          jsonResponses={jsonResponses ?? []}
+          showDrawer={showDrawer}
+        />
+      </BaseNode>
+    </div>
   );
 };
 
diff --git a/chainforge/react-server/src/TextFieldsNode.tsx b/chainforge/react-server/src/TextFieldsNode.tsx
index 627ae2a93..2d7c20095 100644
--- a/chainforge/react-server/src/TextFieldsNode.tsx
+++ b/chainforge/react-server/src/TextFieldsNode.tsx
@@ -7,7 +7,7 @@ import React, {
   MouseEventHandler,
 } from "react";
 import { Handle, Node, Position } from "reactflow";
-import { Textarea, Tooltip, Skeleton, ScrollArea } from "@mantine/core";
+import { Textarea, Tooltip, Skeleton, ScrollArea, Loader } from "@mantine/core";
 import {
   IconTextPlus,
   IconEye,
@@ -29,6 +29,8 @@ import {
   makeSafeForCSLFormat,
   prepareItemsNodeData,
 } from "./ItemsNode";
+import { useMarkerLogic } from "./backend/useSelectionText";
+import MarkerPopover from "./DraggablePopover";
 
 // Helper funcs
 const union = (setA: Set<any>, setB: Set<any>) => {
@@ -57,7 +59,9 @@ export interface TextFieldsNodeProps {
 }
 
 const TextFieldsNode: React.FC<TextFieldsNodeProps> = ({ data, id }) => {
-  const [templateVars, setTemplateVars] = useState(data.vars || []);
+  const [templateVars, setTemplateVars] = useState(
+    Array.isArray(data.vars) ? data.vars : [],
+  );
   const duplicateNode = useStore((state) => state.duplicateNode);
   const addNode = useStore((state) => state.addNode);
   const removeNode = useStore((state) => state.removeNode);
@@ -73,6 +77,39 @@ const TextFieldsNode: React.FC<TextFieldsNodeProps> = ({ data, id }) => {
   const [fieldVisibility, setFieldVisibility] = useState<Dict<boolean>>(
     data.fields_visibility || {},
   );
+  useEffect(() => {
+    if (data.fields) {
+      setTextfieldsValues(data.fields);
+    }
+    if (data.fields_visibility) {
+      setFieldVisibility(data.fields_visibility);
+    }
+  }, [data.fields, data.fields_visibility]);
+
+  const nodeRef = useRef<HTMLDivElement>(null);
+
+  const markerLogic = useMarkerLogic({
+    nodeId: id,
+    isPromptNode: false,
+    fieldValues: textfieldsValues,
+    templateVars,
+    onFieldChange: (fieldId: string, value: string) => {
+      handleTextFieldChange(fieldId, value, true);
+    },
+    onTemplateVarsChange: setTemplateVars,
+    onDataUpdate: (data: any) => {
+      setDataPropsForNode(id, data);
+      pingOutputNodes(id);
+    },
+    findNodeByParam: (tfNodeId: string, param: string) => {
+      const rf = useStore.getState();
+      const edge = rf.edges.find(
+        (e: any) => e.target === tfNodeId && e.targetHandle === param,
+      );
+      if (!edge) return undefined;
+      return (rf.nodes as Node[]).find((n) => n.id === edge.source);
+    },
+  });
 
   // For when textfields exceed the TextFields Node max height,
   // when we add a new field, this gives us a way to scroll to the bottom. Better UX.
@@ -85,7 +122,12 @@ const TextFieldsNode: React.FC<TextFieldsNodeProps> = ({ data, id }) => {
 
   // Whether the text fields should be in a loading state
   const [isLoading, setIsLoading] = useState(false);
+  // Whether we are waiting for LLM to generate the prompts
+  const [suggestionsLoading, setSuggestionsLoading] = useState(false);
 
+  useEffect(() => {
+    setSuggestionsLoading(aiSuggestionsManager.areSuggestionsLoading());
+  });
   const [aiSuggestionsManager] = useState(
     new AISuggestionsManager(
       () => aiFeaturesProvider,
@@ -222,39 +264,6 @@ const TextFieldsNode: React.FC<TextFieldsNodeProps> = ({ data, id }) => {
     [templateVars],
   );
 
-  // Save the state of a textfield when it changes and update hooks
-  const handleTextFieldChange = useCallback(
-    (field_id: string, val: string, shouldDebounce: boolean) => {
-      // Update the value of the controlled Textarea component
-      const new_fields = { ...textfieldsValues };
-      new_fields[field_id] = val;
-      setTextfieldsValues(new_fields);
-
-      // Update the data for the ReactFlow node
-      const new_data = updateTemplateVars({ fields: new_fields });
-      if (new_data.vars) setTemplateVars(new_data.vars);
-
-      // Debounce the global state change to happen only after 300ms, as it forces a costly rerender:
-      debounce(
-        (_id: string, _new_data: TextFieldsNodeData) => {
-          setDataPropsForNode(_id, _new_data as Dict);
-          pingOutputNodes(_id);
-        },
-        shouldDebounce ? 300 : 1,
-      )(id, new_data);
-    },
-    [
-      textfieldsValues,
-      setTextfieldsValues,
-      templateVars,
-      updateTemplateVars,
-      setTemplateVars,
-      pingOutputNodes,
-      setDataPropsForNode,
-      id,
-    ],
-  );
-
   // Dynamically update the textareas and position of the template hooks
   const ref = useRef<HTMLDivElement | null>(null);
   const [hooksY, setHooksY] = useState(120);
@@ -367,6 +376,258 @@ const TextFieldsNode: React.FC<TextFieldsNodeProps> = ({ data, id }) => {
     }
   }
 
+  const [textSelection, setTextSelection] = useState<{
+    start: number;
+    end: number;
+    id: string;
+    anchorX: number;
+    anchorY: number;
+  } | null>(null);
+
+  const [contextDraft, setContextDraft] = useState("");
+
+  const [markerSet, setMarkerSet] = useState<Set<string>>(
+    new Set(Array.isArray(data.vars) ? data.vars : []),
+  );
+
+  const clean = (s: string) =>
+    s.replace(/[{}]/g, "").replace(/\s+/g, " ").trim();
+
+  const [markerList, setMarkerList] = useState<string[]>(
+    (Array.isArray(data.vars) ? data.vars : []).map(clean),
+  );
+
+  const stripLooseBraces = (txt: string) => txt.replace(/[{}]/g, "").trim();
+
+  const [paramContexts, setParamContexts] = useState<Record<string, string>>(
+    {},
+  );
+
+  const detectParameter = useCallback(
+    (textSelection: any, textfieldsValues: any, markerSet: Set<string>) => {
+      if (!textSelection) return null;
+
+      const { start, end, id: fieldId } = textSelection;
+      const full = textfieldsValues[fieldId] ?? "";
+      const slice = full.slice(start, end);
+      const raw = stripLooseBraces(slice).trim();
+
+      let param: string | null = null;
+
+      // Case 1: Exact match with a bracketed parameter like "{ice}"
+      const inside = extractBracketedSubstrings(slice);
+      if (inside.length === 1 && `{${inside[0]}}` === slice) {
+        param = inside[0];
+      }
+      // Case 2: Raw text matches a known marker like "ice"
+      else if (markerSet.has(raw)) {
+        param = raw;
+      }
+      // Case 3: Selection is inside a larger bracketed parameter
+      else {
+        const allBracketedParams = extractBracketedSubstrings(full) || [];
+
+        for (const bracketedParam of allBracketedParams) {
+          const bracketedSpan = `{${bracketedParam}}`;
+          let searchStart = 0;
+          let bracketedIndex = full.indexOf(bracketedSpan, searchStart);
+
+          while (bracketedIndex !== -1) {
+            const bracketedStart = bracketedIndex;
+            const bracketedEnd = bracketedIndex + bracketedSpan.length;
+
+            if (start >= bracketedStart && end <= bracketedEnd) {
+              if (slice !== bracketedSpan) {
+                param = bracketedParam;
+                break;
+              }
+            }
+
+            searchStart = bracketedIndex + 1;
+            bracketedIndex = full.indexOf(bracketedSpan, searchStart);
+          }
+
+          if (param) break;
+        }
+      }
+
+      return param;
+    },
+    [],
+  );
+
+  const [currentLoadedParam, setCurrentLoadedParam] = useState<string | null>(
+    null,
+  );
+
+  useEffect(() => {
+    if (!textSelection) {
+      // Only reset when selection is completely cleared
+      setCurrentLoadedParam(null);
+      setContextDraft("");
+      return;
+    }
+
+    const detectedParam = detectParameter(
+      textSelection,
+      textfieldsValues,
+      markerSet,
+    );
+
+    const selectedText = textfieldsValues[textSelection.id]
+      ?.slice(textSelection.start, textSelection.end)
+      ?.trim();
+    const potentialParam = selectedText?.replace(/[{}]/g, "").trim();
+
+    const workingParam = detectedParam || potentialParam;
+
+    // Only update context when we're working with a different parameter
+    if (workingParam !== currentLoadedParam) {
+      setCurrentLoadedParam(workingParam);
+
+      if (workingParam) {
+        // Load saved context for this parameter
+        const savedContext = paramContexts[workingParam] || "";
+        setContextDraft(savedContext);
+       } else {
+        setContextDraft("");
+      }
+    }
+    // IMPORTANT: If workingParam === currentLoadedParam, don't touch contextDraft at all
+    // This prevents clearing the context while the user is typing
+  }, [
+    textSelection,
+    textfieldsValues,
+    markerSet,
+    currentLoadedParam,
+    paramContexts,
+    detectParameter,
+  ]);
+
+  const contextPopover = markerLogic.textSelection && (
+    <MarkerPopover
+      anchor={{
+        x: markerLogic.textSelection.anchorX,
+        y: markerLogic.textSelection.anchorY,
+      }}
+      preview={markerLogic.selectionPreview}
+      context={markerLogic.contextDraft}
+      setContext={markerLogic.setContextDraft}
+      variants={markerLogic.numVariants}
+      setVariants={markerLogic.setNumVariants}
+      onGenerate={markerLogic.handleGenerate}
+      loading={markerLogic.suggestionsLoading}
+      nodeType="textfields"
+    />
+  );
+
+  useEffect(() => {
+    const unsub = useStore.subscribe((state: any, prevState: any) => {
+      // Only run cleanup if nodes were actually removed (not added)
+      const prevNodeIds = new Set(prevState.nodes?.map((n: any) => n.id) || []);
+      const currentNodeIds = new Set(state.nodes?.map((n: any) => n.id) || []);
+
+      const me = state.nodes.find((n: any) => n.id === id);
+      if (!me || me.type !== "textfields") {
+        return;
+      }
+
+      const removedNodeIds = Array.from(prevNodeIds).filter(
+        (nodeId) => !currentNodeIds.has(nodeId),
+      );
+
+      // Skip cleanup if nodes are being added (which happens during splits)
+      const addedNodeIds = Array.from(currentNodeIds).filter(
+        (nodeId) => !prevNodeIds.has(nodeId),
+      );
+
+      if (removedNodeIds.length > 0 && addedNodeIds.length === 0) {
+        // Use a longer delay and re-extract markers from current text
+        setTimeout(() => {
+          const currentState = useStore.getState();
+          const currentNode = currentState.nodes.find((n: any) => n.id === id);
+          if (!currentNode) return;
+
+          const currentTextFields = currentNode.data?.fields || {};
+
+          // Re-extract markers using the same logic as updateTemplateVars
+          let all_found_vars = new Set<string>();
+          Object.values(currentTextFields).forEach((fieldText) => {
+            const found_vars = extractBracketedSubstrings(fieldText as string);
+            if (found_vars && found_vars.length > 0) {
+              found_vars.forEach((v) => all_found_vars.add(v));
+            }
+          });
+
+          const actualMarkers = Array.from(all_found_vars);
+          const actualMarkerSet = new Set(actualMarkers);
+
+          // Only update if our local state is out of sync with actual markers
+          if (!setsAreEqual(actualMarkerSet, markerSet)) {
+            setMarkerSet(actualMarkerSet);
+            setMarkerList(actualMarkers);
+            setTemplateVars(actualMarkers);
+            setDataPropsForNode(id, {
+              vars: actualMarkers,
+              fields: currentTextFields,
+            });
+            pingOutputNodes(id);
+
+            const removedMarkers = Array.from(markerSet).filter(
+              (marker) => !actualMarkerSet.has(marker),
+            );
+
+            if (removedMarkers.length > 0) {
+              setParamContexts((prevContexts) => {
+                const newContexts = { ...prevContexts };
+                removedMarkers.forEach((marker) => {
+                  delete newContexts[marker];
+                });
+                return newContexts;
+              });
+            }
+          }
+        }, 800);
+      }
+    });
+
+    return () => unsub();
+  }, [markerSet, id, setDataPropsForNode, pingOutputNodes]);
+
+  const handleTextFieldChange = useCallback(
+    (field_id: string, val: string, shouldDebounce: boolean) => {
+      const new_fields = { ...textfieldsValues };
+      new_fields[field_id] = val;
+      setTextfieldsValues(new_fields);
+
+      const new_data = updateTemplateVars({ fields: new_fields });
+
+      if (
+        new_data.vars &&
+        !setsAreEqual(new Set(new_data.vars), new Set(templateVars))
+      ) {
+        setTemplateVars(new_data.vars);
+      }
+
+      debounce(
+        (_id: string, _new_data: any) => {
+          setDataPropsForNode(_id, _new_data);
+          pingOutputNodes(_id);
+        },
+        shouldDebounce ? 300 : 1,
+      )(id, new_data);
+    },
+    [
+      textfieldsValues,
+      templateVars,
+      updateTemplateVars,
+      setDataPropsForNode,
+      pingOutputNodes,
+      debounce,
+      id,
+    ],
+  );
+
   // Cache the rendering of the text fields.
   const textFields = useMemo(
     () =>
@@ -391,6 +652,7 @@ const TextFieldsNode: React.FC<TextFieldsNodeProps> = ({ data, id }) => {
               onKeyDown={(event) =>
                 handleTextAreaKeyDown(event, placeholder, i)
               }
+              onMouseUp={(e) => markerLogic.handleMouseUp(e, nodeRef)}
             />
             {Object.keys(textfieldsValues).length > 1 ? (
               <div style={{ display: "flex", flexDirection: "column" }}>
@@ -481,54 +743,71 @@ const TextFieldsNode: React.FC<TextFieldsNodeProps> = ({ data, id }) => {
   );
 
   return (
-    <BaseNode
-      classNames="text-fields-node"
-      nodeId={id}
-      contextMenuExts={customContextMenuItems}
-    >
-      <NodeLabel
-        title={data.title ?? "TextFields Node"}
-        nodeId={id}
-        icon={<IconTextPlus size="16px" />}
-        customButtons={
-          flags.aiSupport
-            ? [
-                <AIGenReplaceItemsPopover
-                  key="ai-popover"
-                  values={textfieldsValues}
-                  onAddValues={addMultipleFields}
-                  onReplaceValues={replaceFields}
-                  areValuesLoading={isLoading}
-                  setValuesLoading={setIsLoading}
-                />,
-              ]
-            : []
-        }
-      />
-      <Skeleton visible={isLoading}>
-        <div ref={setRef} className="nodrag nowheel">
-          <ScrollArea.Autosize mah={580} type="hover" viewportRef={viewport}>
-            {textFields}
-          </ScrollArea.Autosize>
-        </div>
-      </Skeleton>
-      <Handle
-        type="source"
-        position={Position.Right}
-        id="output"
-        className="grouped-handle"
-        style={{ top: "50%" }}
-      />
-      <TemplateHooks
-        vars={templateVars}
-        nodeId={id}
-        startY={hooksY}
-        position={Position.Left}
-      />
-      <div className="add-text-field-btn">
-        <button onClick={handleAddField}>+</button>
+    <>
+      <div ref={nodeRef}>
+        <BaseNode
+          classNames="text-fields-node"
+          nodeId={id}
+          contextMenuExts={customContextMenuItems}
+        >
+          {contextPopover}
+          <NodeLabel
+            title={data.title ?? "TextFields Node"}
+            nodeId={id}
+            icon={<IconTextPlus size="16px" />}
+            customButtons={[
+              ...(flags.aiSupport
+                ? [
+                    <AIGenReplaceItemsPopover
+                      key="ai-popover"
+                      values={textfieldsValues}
+                      onAddValues={addMultipleFields}
+                      onReplaceValues={replaceFields}
+                      areValuesLoading={isLoading}
+                      setValuesLoading={setIsLoading}
+                    />,
+                  ]
+                : []),
+              suggestionsLoading && (
+                <Loader
+                  key="suggestions-loader"
+                  size="xs"
+                  variant="dots"
+                  style={{ marginLeft: 6, marginRight: 6 }}
+                />
+              ),
+            ]}
+          />
+          <Skeleton visible={isLoading}>
+            <div ref={setRef} className="nodrag nowheel">
+              <ScrollArea.Autosize
+                mah={580}
+                type="hover"
+                viewportRef={viewport}
+              >
+                {textFields}
+              </ScrollArea.Autosize>
+            </div>
+          </Skeleton>
+          <Handle
+            type="source"
+            position={Position.Right}
+            id="output"
+            className="grouped-handle"
+            style={{ top: "50%" }}
+          />
+          <TemplateHooks
+            vars={templateVars}
+            nodeId={id}
+            startY={hooksY}
+            position={Position.Left}
+          />
+          <div className="add-text-field-btn">
+            <button onClick={handleAddField}>+</button>
+          </div>
+        </BaseNode>
       </div>
-    </BaseNode>
+    </>
   );
 };
 
diff --git a/chainforge/react-server/src/backend/markerUtils.ts b/chainforge/react-server/src/backend/markerUtils.ts
new file mode 100644
index 000000000..b3b6c82e8
--- /dev/null
+++ b/chainforge/react-server/src/backend/markerUtils.ts
@@ -0,0 +1,65 @@
+import { extractBracketedSubstrings } from "../TemplateHooksComponent";
+
+export class markerUtils {
+  static detectParameter(
+    textSelection: any,
+    fieldValues: Record<string, string>,
+    markerSet: Set<string>,
+  ): string | null {
+    if (!textSelection) return null;
+
+    const { start, end, id: fieldId } = textSelection;
+    const full = fieldValues[fieldId] ?? "";
+    const slice = full.slice(start, end);
+    const raw = slice.replace(/[{}]/g, "").trim();
+
+    let param: string | null = null;
+
+    // Exact match with a bracketed parameter
+    const inside = extractBracketedSubstrings(slice);
+    if (inside.length === 1 && `{${inside[0]}}` === slice) {
+      param = inside[0];
+    }
+    // Raw text matches a known marker
+    else if (markerSet.has(raw)) {
+      param = raw;
+    }
+    // Selection is inside a larger bracketed parameter
+    else {
+      const allBracketedParams = extractBracketedSubstrings(full) || [];
+
+      for (const bracketedParam of allBracketedParams) {
+        const bracketedSpan = `{${bracketedParam}}`;
+        let searchStart = 0;
+        let bracketedIndex = full.indexOf(bracketedSpan, searchStart);
+
+        while (bracketedIndex !== -1) {
+          const bracketedStart = bracketedIndex;
+          const bracketedEnd = bracketedIndex + bracketedSpan.length;
+
+          if (start >= bracketedStart && end <= bracketedEnd) {
+            if (slice !== bracketedSpan) {
+              param = bracketedParam;
+              break;
+            }
+          }
+
+          searchStart = bracketedIndex + 1;
+          bracketedIndex = full.indexOf(bracketedSpan, searchStart);
+        }
+
+        if (param) break;
+      }
+    }
+
+    return param;
+  }
+
+  static setsAreEqual(setA: Set<any>, setB: Set<any>): boolean {
+    if (setA.size !== setB.size) return false;
+    for (const item of setA) {
+      if (!setB.has(item)) return false;
+    }
+    return true;
+  }
+}
diff --git a/chainforge/react-server/src/backend/suggestUniqueName.ts b/chainforge/react-server/src/backend/suggestUniqueName.ts
new file mode 100644
index 000000000..341fd355c
--- /dev/null
+++ b/chainforge/react-server/src/backend/suggestUniqueName.ts
@@ -0,0 +1,38 @@
+import useStore from "../store";
+import { generateAndReplace } from "./ai";
+
+export async function suggestUniqueName(
+  seed: string,
+  provider: string,
+  apiKeys: any,
+): Promise<string> {
+  const { aiFeaturesProvider, nodes } = useStore.getState();
+  // Ask the model for 3 short suggestions (bullet list)
+  const prompt = `Suggest 1 short, unique, Camel-Case names for a node that groups variations of “${seed}”. Return them as a plain list.`;
+  let response = "";
+  try {
+    const res = await generateAndReplace(
+      prompt,
+      1,
+      false,
+      aiFeaturesProvider,
+      apiKeys,
+    );
+    response = res[0] || "";
+  } catch {
+    return seed + "Var";
+  }
+
+  const existing = new Set(Object.values(nodes).map((n: any) => n.data?.title));
+  const candidates = response
+    .split(/\n|,|;/)
+    .map((s) => s.replace(/^[\-\d\.\s]*/, "").trim())
+    .filter(Boolean);
+  for (const c of candidates) if (!existing.has(c)) return c;
+
+  // Fallback: append counter
+  let i = 2;
+  let name = seed + i;
+  while (existing.has(name)) name = seed + ++i;
+  return name;
+}
diff --git a/chainforge/react-server/src/backend/useSelectionText.ts b/chainforge/react-server/src/backend/useSelectionText.ts
new file mode 100644
index 000000000..b106e5c30
--- /dev/null
+++ b/chainforge/react-server/src/backend/useSelectionText.ts
@@ -0,0 +1,739 @@
+import { useState, useCallback, useMemo, useEffect, useContext } from "react";
+import { uuid } from "uuidv4";
+import { AlertModalContext } from "../AlertModal";
+import { extractBracketedSubstrings } from "../TemplateHooksComponent";
+import { generateAndReplace } from "./ai";
+import { suggestUniqueName } from "./suggestUniqueName";
+import useStore from "../store";
+import { markerUtils } from "./markerUtils";
+
+export interface TextSelection {
+  start: number;
+  end: number;
+  id: string;
+  anchorX: number;
+  anchorY: number;
+}
+
+interface MarkerLogicOptions {
+  nodeId: string;
+  isPromptNode?: boolean;
+  fieldValues: Record<string, string>;
+  templateVars: string[];
+  onFieldChange: (fieldId: string, value: string) => void;
+  onTemplateVarsChange: (vars: string[]) => void;
+  onDataUpdate: (data: any) => void;
+  findNodeByParam?: (nodeId: string, param: string) => any;
+}
+
+export const useMarkerLogic = (options: MarkerLogicOptions) => {
+  const {
+    nodeId,
+    fieldValues,
+    isPromptNode,
+    templateVars,
+    onFieldChange,
+    onTemplateVarsChange,
+    onDataUpdate,
+    findNodeByParam,
+  } = options;
+
+  // Store hooks
+  const addNode = useStore((state) => state.addNode);
+  const addEdge = useStore((state) => state.addEdge);
+  const getNode = useStore((state) => state.getNode);
+  const removeNode = useStore((state) => state.removeNode);
+  const setDataPropsForNode = useStore((state) => state.setDataPropsForNode);
+  const pingOutputNodes = useStore((state) => state.pingOutputNodes);
+  const apiKeys = useStore((state) => state.apiKeys);
+  const aiFeaturesProvider = useStore((state) => state.aiFeaturesProvider);
+  const { nodeContexts, setNodeContext } = useStore() as any;
+
+  const showAlert = useContext(AlertModalContext);
+
+  const [markerSet, setMarkerSet] = useState<Set<string>>(
+    new Set(templateVars),
+  );
+  const [markerList, setMarkerList] = useState<string[]>(templateVars);
+  const [textSelection, setTextSelection] = useState<TextSelection | null>(
+    null,
+  );
+  const [contextDraft, setContextDraft] = useState("");
+  const [numVariants, setNumVariants] = useState("3");
+
+  // Store contexts per parameter, not globally
+  const [paramContexts, setParamContexts] = useState<Record<string, string>>(
+    {},
+  );
+  const [currentLoadedParam, setCurrentLoadedParam] = useState<string | null>(
+    null,
+  );
+  const [suggestionsLoading, setSuggestionsLoading] = useState(false);
+
+  // Sync templateVars with local state
+  useEffect(() => {
+    if (!markerUtils.setsAreEqual(new Set(templateVars), markerSet)) {
+      setMarkerSet(new Set(templateVars));
+      setMarkerList(templateVars);
+    }
+  }, [templateVars, markerSet]);
+
+  //  Load context when parameter changes
+  useEffect(() => {
+    if (textSelection) {
+      const detectedParam = markerUtils.detectParameter(
+        textSelection,
+        fieldValues,
+        markerSet,
+      );
+      const selectedText = fieldValues[textSelection.id]
+        ?.slice(textSelection.start, textSelection.end)
+        ?.trim();
+      const potentialParam = selectedText?.replace(/[{}]/g, "").trim();
+      const param = detectedParam || potentialParam;
+
+      if (param && param !== currentLoadedParam) {
+        setCurrentLoadedParam(param);
+
+        // Load context for this parameter
+        let contextToLoad = "";
+        if (paramContexts[param]) {
+          contextToLoad = paramContexts[param];
+        } else {
+          // Check existing node context
+          const existingNode = findNodeByParam?.(nodeId, param);
+          if (existingNode && nodeContexts[existingNode.id]) {
+            contextToLoad = nodeContexts[existingNode.id];
+          }
+        }
+
+        setContextDraft(contextToLoad);
+      }
+    }
+  }, [
+    textSelection,
+    fieldValues,
+    markerSet,
+    currentLoadedParam,
+    paramContexts,
+    nodeContexts,
+    findNodeByParam,
+    nodeId,
+  ]);
+
+  const spawnVariationsNode = useCallback(
+    async (
+      param: string,
+      selectedStr: string,
+      n: number,
+      forcedContext?: string,
+    ) => {
+      // ⃣ assemble context
+      let ctx = forcedContext ?? "";
+      const existingNode = findNodeByParam?.(nodeId, param) ?? null;
+      if (!forcedContext) {
+        if (paramContexts[param]) {
+          ctx = paramContexts[param];
+        } else if (existingNode && nodeContexts[existingNode.id]) {
+          ctx = nodeContexts[existingNode.id];
+        }
+      }
+
+      const fullPrompt = ctx
+        ? `${ctx}\n\nRephrase or vary this text: ${selectedStr}`
+        : `Rephrase or vary this text: ${selectedStr}`;
+
+      setSuggestionsLoading(true);
+      let variants: string[];
+      try {
+        variants = await generateAndReplace(
+          fullPrompt,
+          n,
+          false,
+          aiFeaturesProvider,
+          apiKeys,
+        );
+      } catch (err) {
+        console.error("LLM variation failed:", err);
+        return;
+      } finally {
+        setSuggestionsLoading(false);
+      }
+
+      const cleaned = variants.map((v) => {
+        let s = v
+          .trim()
+          .replace(/^Rephrase or vary this text:\s*/i, "")
+          .replace(/^[-\d.]+\s*/, "");
+        if (s.startsWith("{") && s.endsWith("}")) {
+          s = s.slice(1, -1).trim();
+        }
+        return s;
+      });
+
+      // Handle based on node type
+      const node = getNode(nodeId);
+      if (!node) return;
+
+      const newFields: Record<string, string> = {};
+      cleaned.forEach((s, i) => (newFields[`f${i}`] = s));
+
+      if (existingNode) {
+        setDataPropsForNode(existingNode.id, { fields: newFields });
+        pingOutputNodes(existingNode.id);
+        return;
+      }
+
+      const { x, y } = node.position;
+      let title: string;
+      try {
+        title =
+          (await suggestUniqueName(param, aiFeaturesProvider, apiKeys)) ||
+          param;
+      } catch {
+        title = param;
+      }
+
+      const newID = `textfields-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+
+      addNode({
+        id: newID,
+        type: "textfields",
+        position: { x: x + 150, y: y + Math.random() * 100 },
+        data: { title, fields: newFields },
+      });
+
+      addEdge({
+        id: uuid(),
+        source: newID,
+        target: nodeId,
+        sourceHandle: "output",
+        targetHandle: param,
+      });
+
+      if (ctx.trim()) setNodeContext?.(newID, ctx);
+    },
+    [
+      nodeId,
+      isPromptNode,
+      paramContexts,
+      nodeContexts,
+      aiFeaturesProvider,
+      apiKeys,
+      getNode,
+      findNodeByParam,
+      setDataPropsForNode,
+      pingOutputNodes,
+      addNode,
+      addEdge,
+      setNodeContext,
+    ],
+  );
+
+  const createParam = useCallback(
+    (nVariants: string) => {
+      if (!textSelection) {
+        return;
+      }
+
+      const { start, end, id: fieldId } = textSelection;
+
+      const actualFieldId = isPromptNode ? "prompt" : fieldId;
+      const text = isPromptNode
+        ? fieldValues.prompt || ""
+        : fieldValues[fieldId] || "";
+
+      const selectedText = text.slice(start, end);
+      const cleanSelected = selectedText.replace(/[{}]/g, "").trim();
+
+      // BLOCK ANY HALF‐BRACE SELECTIONS OR STRAY BRACES INSIDE
+      if (/[{}]/.test(selectedText) && !/^{[^{}]+}$/.test(selectedText)) {
+        showAlert?.("Cannot select partial or stray braces.");
+        setTextSelection(null);
+        return;
+      }
+
+      // EMPTY selection check
+      if (!cleanSelected) {
+        setTextSelection(null);
+        return;
+      }
+
+      const tokensInSelection = extractBracketedSubstrings(selectedText) || [];
+      const allTokensInText = extractBracketedSubstrings(text) || [];
+
+      // EXACT REFRESH:  user selected entire braced token
+      if (
+        tokensInSelection.length === 1 &&
+        selectedText === `{${tokensInSelection[0]}}`
+      ) {
+        spawnVariationsNode(
+          tokensInSelection[0],
+          tokensInSelection[0],
+          Number(nVariants),
+          contextDraft,
+        );
+        setTextSelection(null);
+        return;
+      }
+
+      // PLAIN REFRESH - user selected existing marker text without braces
+      if (!tokensInSelection.length && markerSet.has(cleanSelected)) {
+        spawnVariationsNode(
+          cleanSelected,
+          cleanSelected,
+          Number(nVariants),
+          contextDraft,
+        );
+        setTextSelection(null);
+        return;
+      }
+
+      // SPLIT OPERATION - user selected part of existing marker content
+      let splitMarker: string | null = null;
+      let markerStartPos = -1;
+      let markerEndPos = -1;
+
+      // Find if selection is inside an existing marker
+      for (const token of allTokensInText) {
+        const markerText = `{${token}}`;
+        let searchPos = 0;
+        let markerPos;
+
+        while ((markerPos = text.indexOf(markerText, searchPos)) !== -1) {
+          const markerStart = markerPos;
+          const markerEnd = markerPos + markerText.length;
+          const contentStart = markerStart + 1; // After opening brace
+          const contentEnd = markerEnd - 1; // Before closing brace
+
+          // Check if our selection is ENTIRELY within the marker content (not including braces)
+          if (start >= contentStart && end <= contentEnd) {
+            // Additional check: make sure the selected text is actually part of the token content
+            const tokenContent = token;
+            if (tokenContent.includes(cleanSelected)) {
+              splitMarker = token;
+              markerStartPos = markerStart;
+              markerEndPos = markerEnd;
+              break;
+            }
+          }
+          searchPos = markerPos + 1;
+        }
+        if (splitMarker) break;
+      }
+
+      if (splitMarker && markerStartPos >= 0) {
+        // Find where the selected text appears in the marker content
+        const splitIndex = splitMarker.indexOf(cleanSelected);
+        if (splitIndex === -1) {
+          console.error("Selected text not found in marker content");
+          setTextSelection(null);
+          return;
+        }
+
+        const leftPart = splitMarker.slice(0, splitIndex);
+        const rightPart = splitMarker.slice(splitIndex + cleanSelected.length);
+
+        let leftMarker = leftPart || "left";
+        let rightMarker = cleanSelected;
+
+        // Ensure uniqueness
+        let counter = 2;
+        while (markerSet.has(leftMarker) && leftMarker !== splitMarker) {
+          leftMarker = `${leftPart || "left"}_${counter++}`;
+        }
+        counter = 2;
+        while (markerSet.has(rightMarker) && rightMarker !== splitMarker) {
+          rightMarker = `${cleanSelected}_${counter++}`;
+        }
+
+        // Store context for the split markers
+        const contextToPreserve =
+          contextDraft.trim() || paramContexts[splitMarker] || "";
+
+        // Build replacement - preserve original order
+        const replacement = leftPart
+          ? `{${leftMarker}}{${rightMarker}}`
+          : `{${rightMarker}}`;
+
+        const updatedText =
+          text.slice(0, markerStartPos) +
+          replacement +
+          text.slice(markerEndPos);
+
+        onFieldChange(actualFieldId, updatedText);
+
+        // Recalculate markers
+        const newMarkers = Array.from(
+          new Set(extractBracketedSubstrings(updatedText) || []),
+        );
+        setMarkerSet(new Set(newMarkers));
+        setMarkerList(newMarkers);
+        onTemplateVarsChange(newMarkers);
+
+        // Update data based on node type
+        if (isPromptNode) {
+          onDataUpdate({ vars: newMarkers, prompt: updatedText });
+        } else {
+          const updatedFields = {
+            ...fieldValues,
+            [actualFieldId]: updatedText,
+          };
+          onDataUpdate({ vars: newMarkers, fields: updatedFields });
+        }
+
+        const store = useStore.getState();
+        const oldNode = store.nodes.find((n) => n.data?.title === splitMarker);
+        if (oldNode) {
+          removeNode(oldNode.id);
+        }
+
+        const markersToCreate = leftPart
+          ? [leftMarker, rightMarker]
+          : [rightMarker];
+
+        // Store contexts for the new markers
+        markersToCreate.forEach((markerName) => {
+          if (contextToPreserve) {
+            setParamContexts((prev) => ({
+              ...prev,
+              [markerName]: contextToPreserve,
+            }));
+          }
+        });
+
+        // Remove old marker context
+        setParamContexts((prev) => {
+          const newContexts = { ...prev };
+          if (splitMarker !== null) {
+            delete newContexts[splitMarker];
+          }
+          return newContexts;
+        });
+
+        // Wait for React to process updates, then create nodes
+        setTimeout(() => {
+          const parent = getNode(nodeId);
+          if (!parent) return;
+
+          const { x, y } = parent.position;
+
+          markersToCreate.forEach((markerName, index) => {
+            // Generate variations to create the node with proper content
+            spawnVariationsNode(
+              markerName,
+              markerName,
+              Number(nVariants),
+              contextToPreserve,
+            );
+          });
+        }, 100);
+
+        setTextSelection(null);
+        return;
+      }
+
+      // NEW PARAMETER - create new marker from selection
+      let uniqueName = cleanSelected;
+      let counter = 2;
+      while (markerSet.has(uniqueName)) {
+        uniqueName = `${cleanSelected}_${counter++}`;
+      }
+
+      if (contextDraft.trim()) {
+        setParamContexts((prev) => ({
+          ...prev,
+          [uniqueName]: contextDraft.trim(),
+        }));
+      }
+
+      const updatedText =
+        text.slice(0, start) + `{${uniqueName}}` + text.slice(end);
+
+      onFieldChange(actualFieldId, updatedText);
+
+      const newMarkerSet = new Set([...markerSet, uniqueName]);
+      const newMarkerList = [...markerList, uniqueName];
+
+      setMarkerSet(newMarkerSet);
+      setMarkerList(newMarkerList);
+      onTemplateVarsChange(newMarkerList);
+
+      if (isPromptNode) {
+        onDataUpdate({ vars: newMarkerList, prompt: updatedText });
+      } else {
+        const updatedFields = { ...fieldValues, [actualFieldId]: updatedText };
+        onDataUpdate({ vars: newMarkerList, fields: updatedFields });
+      }
+
+      // Wait for marker updates to be processed, then generate variations
+      setTimeout(() => {
+        spawnVariationsNode(
+          uniqueName,
+          uniqueName,
+          Number(nVariants),
+          contextDraft,
+        );
+      }, 100);
+
+      setTextSelection(null);
+    },
+    [
+      textSelection,
+      fieldValues,
+      markerSet,
+      markerList,
+      spawnVariationsNode,
+      showAlert,
+      onFieldChange,
+      onTemplateVarsChange,
+      onDataUpdate,
+      nodeId,
+      removeNode,
+      contextDraft,
+      paramContexts,
+      setParamContexts,
+      getNode,
+      isPromptNode,
+    ],
+  );
+
+  // Rest of the code remains the same...
+  const selectionPreview = useMemo(() => {
+    if (!textSelection) return "";
+    const fv = fieldValues[textSelection.id] ?? "";
+    return fv
+      .slice(textSelection.start, textSelection.end)
+      .trim()
+      .slice(0, 120);
+  }, [textSelection, fieldValues]);
+
+  const getCaretCoords = useCallback(
+    (textarea: HTMLTextAreaElement, pos: number) => {
+      const div = document.createElement("div");
+      const style = window.getComputedStyle(textarea);
+
+      [
+        "fontFamily",
+        "fontSize",
+        "fontWeight",
+        "fontStyle",
+        "letterSpacing",
+        "textTransform",
+        "wordSpacing",
+        "whiteSpace",
+        "lineHeight",
+        "padding",
+        "border",
+        "boxSizing",
+      ].forEach((p) => (div.style[p as any] = style[p as any]));
+
+      div.style.position = "absolute";
+      div.style.visibility = "hidden";
+      div.style.whiteSpace = "pre-wrap";
+      div.style.width = `${textarea.clientWidth}px`;
+      document.body.appendChild(div);
+
+      const text = textarea.value;
+      const before = text.slice(0, pos);
+      const after = text.slice(pos);
+      div.textContent = before;
+
+      const span = document.createElement("span");
+      span.textContent = "\u200b";
+      div.appendChild(span);
+      div.appendChild(document.createTextNode(after || "\u200b"));
+
+      const { offsetLeft: left, offsetTop: top, offsetHeight: height } = span;
+      document.body.removeChild(div);
+      return { top, left, height };
+    },
+    [],
+  );
+
+  const handleMouseUp = useCallback(
+    (
+      e: React.MouseEvent<HTMLTextAreaElement>,
+      nodeRef: React.RefObject<HTMLDivElement>,
+    ) => {
+      const textarea = e.currentTarget;
+      const { selectionStart, selectionEnd, id } = textarea;
+
+      if (selectionStart === selectionEnd) {
+        setTextSelection(null);
+        return;
+      }
+
+      const calculateToolbarPosition = () => {
+        const midPos = Math.floor((selectionStart + selectionEnd) / 2);
+        const caret = getCaretCoords(textarea, midPos);
+
+        const textareaRect = textarea.getBoundingClientRect();
+        const nodeRect = nodeRef.current?.getBoundingClientRect() || {
+          left: 0,
+          top: 0,
+        };
+
+        const absoluteX = textareaRect.left + caret.left;
+        const TOOLBAR_OFFSET = 10;
+        const absoluteY =
+          textareaRect.top + caret.top - caret.height - TOOLBAR_OFFSET;
+
+        return {
+          x: absoluteX - nodeRect.left,
+          y: absoluteY - nodeRect.top,
+        };
+      };
+
+      const { x, y } = calculateToolbarPosition();
+
+      setTextSelection({
+        start: selectionStart,
+        end: selectionEnd,
+        id,
+        anchorX: x,
+        anchorY: y,
+      });
+    },
+    [getCaretCoords],
+  );
+
+  useEffect(() => {
+    const unsub = useStore.subscribe((state, prev) => {
+      const prevIds = new Set(prev.nodes.map((n) => n.id));
+      const currIds = new Set(state.nodes.map((n) => n.id));
+
+      const removed = [...prevIds].filter((id) => !currIds.has(id));
+      const added = [...currIds].filter((id) => !prevIds.has(id));
+
+      if (removed.length > 0 && added.length === 0) {
+        const removedMarkers = removed.flatMap((removedId) => {
+          const edge = prev.edges.find(
+            (e) => e.source === removedId && e.target === nodeId,
+          );
+          if (edge?.targetHandle) return edge.targetHandle;
+          const title = prev.nodes.find((n) => n.id === removedId)?.data?.title;
+          return title ? title : [];
+        });
+
+        const unique = Array.from(new Set(removedMarkers));
+        if (!unique.length) return;
+
+        const updated: Record<string, string> = { ...fieldValues };
+        unique.forEach((marker) => {
+          const re = new RegExp(`\\{${marker}\\}`, "g");
+          Object.keys(updated).forEach((key) => {
+            updated[key] = updated[key].replace(re, marker);
+          });
+        });
+
+        const newSet = new Set<string>();
+        Object.values(updated).forEach((txt) =>
+          extractBracketedSubstrings(txt)?.forEach((v) => newSet.add(v)),
+        );
+        const newList = Array.from(newSet);
+
+        if (!markerUtils.setsAreEqual(markerSet, newSet)) {
+          setMarkerSet(newSet);
+          setMarkerList(newList);
+          onTemplateVarsChange(newList);
+
+          if (isPromptNode) {
+            onFieldChange("prompt", updated["prompt"]);
+            onDataUpdate({
+              vars: newList,
+              prompt: updated["prompt"],
+            });
+          } else {
+            onDataUpdate({
+              vars: newList,
+              fields: updated,
+            });
+          }
+
+          setParamContexts((ctx) => {
+            const newCtx = { ...ctx };
+            unique.forEach((m) => delete newCtx[m]);
+            return newCtx;
+          });
+        }
+      }
+    });
+    return () => unsub();
+  }, [
+    fieldValues,
+    markerSet,
+    isPromptNode,
+    onTemplateVarsChange,
+    onDataUpdate,
+    setParamContexts,
+    nodeId,
+    onFieldChange,
+  ]);
+
+  const handleGenerate = useCallback(() => {
+    if (!textSelection) {
+      return;
+    }
+
+    const detectedParam = markerUtils.detectParameter(
+      textSelection,
+      fieldValues,
+      markerSet,
+    );
+    const selectedText = fieldValues[textSelection.id]
+      ?.slice(textSelection.start, textSelection.end)
+      ?.trim();
+    const potentialParam = selectedText?.replace(/[{}]/g, "").trim();
+
+    const param = detectedParam || potentialParam;
+
+    if (param && contextDraft.trim()) {
+      setParamContexts((prev) => ({
+        ...prev,
+        [param]: contextDraft.trim(),
+      }));
+
+      if (findNodeByParam) {
+        const bundleNode = findNodeByParam(nodeId, param);
+        if (bundleNode && setNodeContext) {
+          setNodeContext(bundleNode.id, contextDraft.trim());
+        }
+      }
+    }
+
+    createParam(numVariants);
+  }, [
+    textSelection,
+    fieldValues,
+    markerSet,
+    contextDraft,
+    numVariants,
+    createParam,
+    findNodeByParam,
+    nodeId,
+    setNodeContext,
+    currentLoadedParam,
+    setParamContexts,
+  ]);
+
+  return {
+    textSelection,
+    contextDraft,
+    setContextDraft,
+    numVariants,
+    setNumVariants,
+    markerSet,
+    markerList,
+    suggestionsLoading,
+    selectionPreview,
+    handleMouseUp,
+    handleGenerate,
+    setTextSelection,
+    getCaretCoords,
+    spawnVariationsNode,
+    createParam,
+    paramContexts,
+    currentLoadedParam,
+  };
+};
diff --git a/chainforge/react-server/src/store.tsx b/chainforge/react-server/src/store.tsx
index bb381416e..acec11de5 100644
--- a/chainforge/react-server/src/store.tsx
+++ b/chainforge/react-server/src/store.tsx
@@ -36,6 +36,19 @@ import { StringLookup } from "./backend/cache";
 import { saveGlobalConfig } from "./backend/backend";
 const IS_RUNNING_LOCALLY = APP_IS_RUNNING_LOCALLY();
 
+export interface SelectionContext {
+  fieldId: string;
+  start: number;
+  end: number;
+  anchorX: number;
+  anchorY: number;
+}
+
+interface SelectionSlice {
+  textSelection: SelectionContext | null;
+  setTextSelection(sel: SelectionContext | null): void;
+}
+
 // Initial project settings
 const initialAPIKeys = {};
 const initialFlags = { aiSupport: true };
@@ -411,6 +424,7 @@ export interface StoreHandles {
   // Helper functions for nodes and edges
   getNode: (id: string) => Node | undefined;
   addNode: (newnode: Node) => void;
+  addEdge: (edge: Edge | Connection) => void;
   removeNode: (id: string) => void;
   deselectAllNodes: () => void;
   bringNodeToFront: (id: string) => void;
@@ -422,6 +436,10 @@ export interface StoreHandles {
   onEdgesChange: (changes: EdgeChange[]) => void;
   onConnect: (connection: Connection | Edge) => void;
 
+  nodeContexts: Record<string, string>;
+  setNodeContext: (nodeId: string, context: string) => void;
+  setNodeTitle: (nodeId: string, newTitle: string) => void;
+  deleteNodeByTitle: (title: string) => void;
   // The LLM providers available in the drop-down list
   AvailableLLMs: LLMSpec[];
   setAvailableLLMs: (specs: LLMSpec[]) => void;
@@ -504,13 +522,14 @@ export interface StoreHandles {
     node_id: string,
   ) => Dict<string[] | TemplateVarInfo[]>;
 }
-
+type FullStore = StoreHandles & SelectionSlice;
 // A global store of variables, used for maintaining state
 // across ChainForge and ReactFlow components.
-const useStore = create<StoreHandles>((set, get) => ({
+const useStore = create<FullStore>((set, get) => ({
   nodes: [],
   edges: [],
-
+  textSelection: null,
+  setTextSelection: (sel) => set({ textSelection: sel }),
   // Available LLMs in ChainForge, in the format expected by LLMListItems.
   AvailableLLMs: [...initLLMProviders],
   setAvailableLLMs: (llmProviderList) => {
@@ -521,6 +540,24 @@ const useStore = create<StoreHandles>((set, get) => ({
   setAIFeaturesProvider: (llmProvider) => {
     set({ aiFeaturesProvider: llmProvider });
   },
+  nodeContexts: {} as Record<string, string>,
+  setNodeContext: (nodeId: string, context: string) => {
+    set((state) => ({
+      nodeContexts: { ...state.nodeContexts, [nodeId]: context },
+    }));
+  },
+  setNodeTitle: (nodeId: string, newTitle: string) =>
+    set((state) => {
+      const node = state.nodes.find((n) => n.id === nodeId);
+      if (node) node.data = { ...node.data, title: newTitle };
+      return { nodes: state.nodes.map((n) => (n.id === nodeId ? node! : n)) };
+    }),
+  deleteNodeByTitle: (title: string) => {
+    const st = useStore.getState();
+    Object.values(st.nodes).forEach((n: any) => {
+      if (n.data?.title === title) st.removeNode?.(n.id);
+    });
+  },
 
   // Keeping track of LLM API keys
   apiKeys: initialAPIKeys,
@@ -1008,11 +1045,25 @@ const useStore = create<StoreHandles>((set, get) => ({
       nodes: get().nodes.concat(newnode),
     });
   },
-  removeNode: (id) => {
-    set({
-      nodes: get().nodes.filter((n) => n.id !== id),
+  removeNode: (nodeId: string) => {
+    const node = get().nodes.find((n) => n.id === nodeId);
+    set((state) => {
+      // remove from nodes
+      return { nodes: state.nodes.filter((n) => n.id !== nodeId) };
     });
+    if (node?.type === "textfields") {
+    } else {
+      const param = node?.data?.title || node?.id;
+      const listeners = (get() as any)._listeners;
+      if (listeners && Array.isArray(listeners)) {
+        listeners.forEach(
+          (l: (event: string, nodeId: string, param: string) => void) =>
+            l("nodeRemoved", nodeId, param),
+        );
+      }
+    }
   },
+
   deselectAllNodes: () => {
     // Deselect all nodes
     set({
@@ -1052,6 +1103,10 @@ const useStore = create<StoreHandles>((set, get) => ({
       nodes: newnodes,
     });
   },
+  addEdge: (edge) =>
+    set((state) => ({
+      edges: addEdge(edge, state.edges),
+    })),
   setEdges: (newedges) => {
     set({
       edges: newedges,