diff --git a/mcp-server/src/state.js b/mcp-server/src/state.js
index 9bba339..3461d7c 100644
--- a/mcp-server/src/state.js
+++ b/mcp-server/src/state.js
@@ -294,8 +294,18 @@ export class FlowState {
     // Auto-create connections for conditional branches
     if (hs.action === "conditional" && Array.isArray(hs.conditions)) {
       hs.conditions.forEach((cond, i) => {
-        if (cond.targetScreenId) {
-          this._addHotspotConnection(screenId, cond.targetScreenId, hs.id, "navigate", `condition-${i}`);
+        const branchAction = cond.action || "navigate";
+        if ((branchAction === "navigate" || branchAction === "modal") && cond.targetScreenId) {
+          this._addHotspotConnection(screenId, cond.targetScreenId, hs.id, branchAction, `condition-${i}`);
+        }
+        // API success/error follow-up connections
+        if (branchAction === "api") {
+          if (cond.onSuccessTargetId && (cond.onSuccessAction === "navigate" || cond.onSuccessAction === "modal")) {
+            this._addHotspotConnection(screenId, cond.onSuccessTargetId, hs.id, cond.onSuccessAction, `condition-${i}-api-success`);
+          }
+          if (cond.onErrorTargetId && (cond.onErrorAction === "navigate" || cond.onErrorAction === "modal")) {
+            this._addHotspotConnection(screenId, cond.onErrorTargetId, hs.id, cond.onErrorAction, `condition-${i}-api-error`);
+          }
         }
       });
     }
diff --git a/mcp-server/src/tools/hotspot-tools.js b/mcp-server/src/tools/hotspot-tools.js
index d5dfa29..4269be1 100644
--- a/mcp-server/src/tools/hotspot-tools.js
+++ b/mcp-server/src/tools/hotspot-tools.js
@@ -53,11 +53,23 @@ export const hotspotTools = [
           items: {
             type: "object",
             properties: {
-              label: { type: "string" },
-              targetScreenId: { type: "string" },
+              label: { type: "string", description: "Condition description" },
+              action: {
+                type: "string",
+                enum: ["navigate", "back", "modal", "api", "custom"],
+                description: "Action for this branch (default: navigate)",
+              },
+              targetScreenId: { type: "string", description: "Target screen for navigate/modal" },
+              customDescription: { type: "string", description: "Description for custom action" },
+              apiEndpoint: { type: "string", description: "API endpoint for api action" },
+              apiMethod: { type: "string", enum: ["GET", "POST", "PUT", "DELETE", "PATCH"] },
+              onSuccessAction: { type: "string", enum: ["navigate", "back", "modal", "custom", ""] },
+              onSuccessTargetId: { type: "string" },
+              onErrorAction: { type: "string", enum: ["navigate", "back", "modal", "custom", ""] },
+              onErrorTargetId: { type: "string" },
             },
           },
-          description: "Condition branches for 'conditional' action",
+          description: "Condition branches for 'conditional' action. Each branch can have its own action type.",
         },
         onSuccessAction: { type: "string", enum: ["navigate", "back", "modal", "custom", ""] },
         onSuccessTargetId: { type: "string" },
diff --git a/src/Drawd.jsx b/src/Drawd.jsx
index c0d27bb..821d244 100644
--- a/src/Drawd.jsx
+++ b/src/Drawd.jsx
@@ -275,7 +275,7 @@ export default function Drawd({ initialRoomCode }) {
     setConditionalPrompt, setEditingConditionGroup,
     setConnectionTypePrompt,
     setHotspotModal, setConnectionEditModal,
-    quickConnectHotspot, addConnection, addToConditionalGroup,
+    quickConnectHotspot, addConnection, addToConditionalGroup, convertToConditionalGroup,
     onStartConnect,
     activeTool, captureDragSnapshot,
     handleDragStart, handleMultiDragStart,
diff --git a/src/components/HotspotModal.jsx b/src/components/HotspotModal.jsx
index 7760e52..9d18578 100644
--- a/src/components/HotspotModal.jsx
+++ b/src/components/HotspotModal.jsx
@@ -123,9 +123,15 @@ export function HotspotModal({ screen, hotspot, connection, screens, documents =
   const [conditions, setConditions] = useState(
     hotspot?.conditions?.length > 0
       ? hotspot.conditions
-      : [{ id: generateId(), label: "", targetScreenId: "" }]
+      : [{ id: generateId(), label: "", targetScreenId: "", action: "navigate", dataFlow: [] }]
   );
 
+  const updateCondition = (index, patch) => {
+    const updated = [...conditions];
+    updated[index] = { ...updated[index], ...patch };
+    setConditions(updated);
+  };
+
   // Transition (read from associated connection when opened via double-click)
   const [transitionType, setTransitionType] = useState(connection?.transitionType || "");
   const [transitionLabel, setTransitionLabel] = useState(connection?.transitionLabel || "");
@@ -308,7 +314,15 @@ export function HotspotModal({ screen, hotspot, connection, screens, documents =
             dataFlow: (action === "navigate" || action === "modal") ? dataFlow : [],
             onSuccessDataFlow: action === "api" ? onSuccessDataFlow : [],
             onErrorDataFlow: action === "api" ? onErrorDataFlow : [],
-            conditions: action === "conditional" ? conditions : [],
+            conditions: action === "conditional" ? conditions.map((cond) => ({
+              ...cond,
+              action: cond.action || "navigate",
+              targetScreenId: (cond.action === "navigate" || cond.action === "modal" || !cond.action)
+                ? (cond.targetScreenId || "") : "",
+              customDescription: cond.action === "custom" ? (cond.customDescription || "") : "",
+              dataFlow: (cond.action === "navigate" || cond.action === "modal" || !cond.action)
+                ? (cond.dataFlow || []) : [],
+            })) : [],
             x, y, w, h,
             transitionType,
             transitionLabel: transitionType === "custom" ? transitionLabel : "",
@@ -403,76 +417,171 @@ export function HotspotModal({ screen, hotspot, connection, screens, documents =
                 </div>
 
                 {conditions.map((cond, i) => (
-                  <div key={cond.id} style={{ marginBottom: 8 }}>
-                    <div style={{
-                      display: "flex",
-                      gap: 8,
-                      alignItems: "flex-end",
-                    }}>
+                  <div key={cond.id} style={{ marginBottom: 12, paddingBottom: 12, borderBottom: `1px solid ${COLORS.border}` }}>
+                    <div style={{ display: "flex", gap: 8, alignItems: "flex-end" }}>
                       <label style={{ ...styles.monoLabel, flex: 1 }}>
                         {i === 0 ? "CONDITION" : ""}
                         <input
                           value={cond.label}
-                          onChange={(e) => {
-                            const updated = [...conditions];
-                            updated[i] = { ...updated[i], label: e.target.value };
-                            setConditions(updated);
-                          }}
+                          onChange={(e) => updateCondition(i, { label: e.target.value })}
                           placeholder={i === conditions.length - 1 ? "e.g. otherwise" : "e.g. user is subscriber"}
                           style={styles.input}
                         />
                       </label>
-                      <label style={{ ...styles.monoLabel, flex: 1 }}>
-                        {i === 0 ? "TARGET SCREEN" : ""}
-                        <select
-                          value={cond.targetScreenId || ""}
-                          onChange={(e) => {
-                            const updated = [...conditions];
-                            updated[i] = { ...updated[i], targetScreenId: e.target.value || "" };
-                            setConditions(updated);
-                          }}
-                          style={styles.select}
-                        >
-                          <option value="">-- Select --</option>
-                          {otherScreens.map((s) => (
-                            <option key={s.id} value={s.id}>{s.name}</option>
-                          ))}
-                        </select>
-                      </label>
                       {conditions.length > 1 && (
-                        <button
-                          type="button"
+                        <button type="button"
                           onClick={() => setConditions(conditions.filter((_, j) => j !== i))}
-                          style={{
-                            background: "none",
-                            border: "none",
-                            color: COLORS.danger,
-                            cursor: "pointer",
-                            fontSize: 16,
-                            padding: "6px",
-                            marginBottom: 6,
-                          }}
-                        >
-                          &#10005;
-                        </button>
+                          style={{ background: "none", border: "none", color: COLORS.danger, cursor: "pointer", fontSize: 16, padding: "6px", marginBottom: 6 }}
+                        >&#10005;</button>
                       )}
                     </div>
-                    <div style={{ marginTop: 6, marginLeft: 8 }}>
-                      <DataFlowEditor
-                        items={cond.dataFlow || []}
-                        onChange={(newDataFlow) => {
-                          const updated = [...conditions];
-                          updated[i] = { ...updated[i], dataFlow: newDataFlow };
-                          setConditions(updated);
-                        }}
-                      />
-                    </div>
+
+                    <label style={{ ...styles.monoLabel, marginTop: 8 }}>
+                      ACTION
+                      <select
+                        value={cond.action || "navigate"}
+                        onChange={(e) => updateCondition(i, { action: e.target.value })}
+                        style={styles.select}
+                      >
+                        <option value="navigate">Navigate to screen</option>
+                        <option value="back">Go back</option>
+                        <option value="modal">Open modal/overlay</option>
+                        <option value="api">API call</option>
+                        <option value="custom">Custom action</option>
+                      </select>
+                    </label>
+
+                    {(cond.action === "navigate" || cond.action === "modal" || !cond.action) && (
+                      <>
+                        <label style={{ ...styles.monoLabel, marginTop: 8 }}>
+                          TARGET SCREEN
+                          <select
+                            value={cond.targetScreenId || ""}
+                            onChange={(e) => updateCondition(i, { targetScreenId: e.target.value })}
+                            style={styles.select}
+                          >
+                            <option value="">-- Select --</option>
+                            {otherScreens.map((s) => (
+                              <option key={s.id} value={s.id}>{s.name}</option>
+                            ))}
+                          </select>
+                        </label>
+                        <div style={{ marginTop: 6 }}>
+                          <DataFlowEditor
+                            items={cond.dataFlow || []}
+                            onChange={(val) => updateCondition(i, { dataFlow: val })}
+                          />
+                        </div>
+                      </>
+                    )}
+
+                    {cond.action === "custom" && (
+                      <label style={{ ...styles.monoLabel, marginTop: 8 }}>
+                        DESCRIPTION
+                        <textarea
+                          value={cond.customDescription || ""}
+                          onChange={(e) => updateCondition(i, { customDescription: e.target.value })}
+                          placeholder="Describe what happens..."
+                          rows={2}
+                          style={{ ...styles.input, resize: "vertical", fontFamily: "inherit" }}
+                        />
+                      </label>
+                    )}
+
+                    {(cond.action === "api") && (
+                      <div style={{ marginTop: 8, display: "flex", flexDirection: "column", gap: 8 }}>
+                        <div style={{ display: "flex", gap: 8 }}>
+                          <label style={{ ...styles.monoLabel, flex: 1 }}>
+                            API ENDPOINT
+                            <input
+                              value={cond.apiEndpoint || ""}
+                              onChange={(e) => updateCondition(i, { apiEndpoint: e.target.value })}
+                              placeholder="/api/endpoint"
+                              style={styles.input}
+                            />
+                          </label>
+                          <label style={styles.monoLabel}>
+                            METHOD
+                            <select
+                              value={cond.apiMethod || "GET"}
+                              onChange={(e) => updateCondition(i, { apiMethod: e.target.value })}
+                              style={{ ...styles.select, width: 90 }}
+                            >
+                              {["GET", "POST", "PUT", "DELETE", "PATCH"].map((m) => (
+                                <option key={m} value={m}>{m}</option>
+                              ))}
+                            </select>
+                          </label>
+                        </div>
+                        <label style={styles.monoLabel}>
+                          REQUEST SCHEMA
+                          <textarea
+                            value={cond.requestSchema || ""}
+                            onChange={(e) => updateCondition(i, { requestSchema: e.target.value })}
+                            placeholder='{ "field": "type" }'
+                            rows={2}
+                            style={{ ...styles.input, resize: "vertical", fontFamily: "inherit" }}
+                          />
+                        </label>
+                        <label style={styles.monoLabel}>
+                          RESPONSE SCHEMA
+                          <textarea
+                            value={cond.responseSchema || ""}
+                            onChange={(e) => updateCondition(i, { responseSchema: e.target.value })}
+                            placeholder='{ "field": "type" }'
+                            rows={2}
+                            style={{ ...styles.input, resize: "vertical", fontFamily: "inherit" }}
+                          />
+                        </label>
+                        {documents.length > 0 && (
+                          <label style={styles.monoLabel}>
+                            API DOCUMENT
+                            <select
+                              value={cond.documentId || ""}
+                              onChange={(e) => updateCondition(i, { documentId: e.target.value || null })}
+                              style={styles.select}
+                            >
+                              <option value="">-- None --</option>
+                              {documents.map((d) => (
+                                <option key={d.id} value={d.id}>{d.name}</option>
+                              ))}
+                            </select>
+                          </label>
+                        )}
+                        <FollowUpSection
+                          title="On Success"
+                          titleColor="#27ae60"
+                          action={cond.onSuccessAction || ""}
+                          setAction={(val) => updateCondition(i, { onSuccessAction: val })}
+                          targetId={cond.onSuccessTargetId || ""}
+                          setTargetId={(val) => updateCondition(i, { onSuccessTargetId: val })}
+                          customDesc={cond.onSuccessCustomDesc || ""}
+                          setCustomDesc={(val) => updateCondition(i, { onSuccessCustomDesc: val })}
+                          otherScreens={otherScreens}
+                          dataFlow={cond.onSuccessDataFlow || []}
+                          onDataFlowChange={(val) => updateCondition(i, { onSuccessDataFlow: val })}
+                        />
+                        <FollowUpSection
+                          title="On Error"
+                          titleColor="#e74c3c"
+                          action={cond.onErrorAction || ""}
+                          setAction={(val) => updateCondition(i, { onErrorAction: val })}
+                          targetId={cond.onErrorTargetId || ""}
+                          setTargetId={(val) => updateCondition(i, { onErrorTargetId: val })}
+                          customDesc={cond.onErrorCustomDesc || ""}
+                          setCustomDesc={(val) => updateCondition(i, { onErrorCustomDesc: val })}
+                          otherScreens={otherScreens}
+                          dataFlow={cond.onErrorDataFlow || []}
+                          onDataFlowChange={(val) => updateCondition(i, { onErrorDataFlow: val })}
+                        />
+                      </div>
+                    )}
                   </div>
                 ))}
 
                 <button
                   type="button"
-                  onClick={() => setConditions([...conditions, { id: generateId(), label: "", targetScreenId: "", dataFlow: [] }])}
+                  onClick={() => setConditions([...conditions, { id: generateId(), label: "", targetScreenId: "", action: "navigate", dataFlow: [] }])}
                   style={{
                     width: "100%",
                     padding: "6px 0",
diff --git a/src/hooks/useInteractionCallbacks.js b/src/hooks/useInteractionCallbacks.js
index 4bcd01a..95fcca3 100644
--- a/src/hooks/useInteractionCallbacks.js
+++ b/src/hooks/useInteractionCallbacks.js
@@ -9,7 +9,7 @@ export function useInteractionCallbacks({
   setConditionalPrompt, setEditingConditionGroup,
   setConnectionTypePrompt,
   setHotspotModal, setConnectionEditModal,
-  quickConnectHotspot, addConnection: _addConnection, addToConditionalGroup,
+  quickConnectHotspot, addConnection: _addConnection, addToConditionalGroup, convertToConditionalGroup,
   onStartConnect,
   activeTool, captureDragSnapshot,
   handleDragStart, handleMultiDragStart,
@@ -39,10 +39,40 @@ export function useInteractionCallbacks({
 
   const onConnectComplete = useCallback((targetScreenId) => {
     if (hotspotInteraction?.mode === "hotspot-drag") {
-      if (targetScreenId !== hotspotInteraction.screenId) {
-        quickConnectHotspot(hotspotInteraction.screenId, hotspotInteraction.hotspotId, targetScreenId);
+      const srcScreenId = hotspotInteraction.screenId;
+      const srcHotspotId = hotspotInteraction.hotspotId;
+
+      if (targetScreenId !== srcScreenId) {
+        const existingHotspotConns = connections.filter(
+          (c) => c.fromScreenId === srcScreenId && c.hotspotId === srcHotspotId
+        );
+
+        // Case 1: Already a conditional group — add a new branch
+        const existingGroup = existingHotspotConns.find((c) => c.conditionGroupId);
+        if (existingGroup) {
+          const isDuplicate = existingHotspotConns.some((c) => c.toScreenId === targetScreenId);
+          if (!isDuplicate) {
+            addToConditionalGroup(srcScreenId, targetScreenId, existingGroup.conditionGroupId, srcHotspotId);
+            setEditingConditionGroup(existingGroup.conditionGroupId);
+          }
+        }
+        // Case 2: One existing plain connection — convert to conditional
+        else if (existingHotspotConns.length > 0) {
+          const isDuplicate = existingHotspotConns.some((c) => c.toScreenId === targetScreenId);
+          if (!isDuplicate) {
+            const groupId = convertToConditionalGroup(
+              existingHotspotConns[0].id, srcScreenId, targetScreenId, srcHotspotId
+            );
+            setEditingConditionGroup(groupId);
+          }
+        }
+        // Case 3: No existing connections — normal quick connect
+        else {
+          quickConnectHotspot(srcScreenId, srcHotspotId, targetScreenId);
+        }
       }
-      setHotspotInteraction({ mode: "selected", screenId: hotspotInteraction.screenId, hotspotId: hotspotInteraction.hotspotId });
+
+      setHotspotInteraction({ mode: "selected", screenId: srcScreenId, hotspotId: srcHotspotId });
       setHoverTarget(null);
       return;
     }
@@ -77,7 +107,7 @@ export function useInteractionCallbacks({
     const promptY = fromScreen ? fromScreen.y : 0;
     setConnectionTypePrompt({ fromId, targetScreenId, x: promptX, y: promptY });
     cancelConnecting();
-  }, [connecting, cancelConnecting, hotspotInteraction, setHotspotInteraction, quickConnectHotspot, connections, screens, addToConditionalGroup, setEditingConditionGroup, setHoverTarget, setConditionalPrompt, setConnectionTypePrompt]);
+  }, [connecting, cancelConnecting, hotspotInteraction, setHotspotInteraction, quickConnectHotspot, connections, screens, addToConditionalGroup, convertToConditionalGroup, setEditingConditionGroup, setHoverTarget, setConditionalPrompt, setConnectionTypePrompt]);
 
   // Open hotspot modal when a draw gesture completes
   useEffect(() => {
diff --git a/src/hooks/useScreenManager.js b/src/hooks/useScreenManager.js
index ddcc8a1..7d50bcb 100644
--- a/src/hooks/useScreenManager.js
+++ b/src/hooks/useScreenManager.js
@@ -499,18 +499,21 @@ export function useScreenManager(pan, zoom, canvasRef, commentCallbacks = {}) {
 
     if (hotspot.action === "conditional") {
       setConnections((prev) => {
-        // Remove all existing connections for this hotspot
         let updated = prev.filter((c) => c.hotspotId !== hotspot.id);
-        // Create one connection per condition branch with a target
         (hotspot.conditions || []).forEach((cond, i) => {
-          if (cond.targetScreenId) {
+          const branchAction = cond.action || "navigate";
+
+          // Main branch connection (for navigate/modal with target)
+          if ((branchAction === "navigate" || branchAction === "modal") && cond.targetScreenId) {
             updated.push({
               id: generateId(),
               fromScreenId: screenId,
               toScreenId: cond.targetScreenId,
               hotspotId: hotspot.id,
-              label: hotspot.label ? `${hotspot.label} (${cond.label || `branch ${i + 1}`})` : (cond.label || `branch ${i + 1}`),
-              action: "navigate",
+              label: hotspot.label
+                ? `${hotspot.label} (${cond.label || `branch ${i + 1}`})`
+                : (cond.label || `branch ${i + 1}`),
+              action: branchAction,
               connectionPath: `condition-${i}`,
               condition: cond.label || "",
               transitionType: null,
@@ -518,6 +521,42 @@ export function useScreenManager(pan, zoom, canvasRef, commentCallbacks = {}) {
               dataFlow: cond.dataFlow || [],
             });
           }
+
+          // API follow-up connections
+          if (branchAction === "api") {
+            const successAction = cond.onSuccessAction || "";
+            if ((successAction === "navigate" || successAction === "modal") && cond.onSuccessTargetId) {
+              updated.push({
+                id: generateId(),
+                fromScreenId: screenId,
+                toScreenId: cond.onSuccessTargetId,
+                hotspotId: hotspot.id,
+                label: `${cond.label || `branch ${i + 1}`} (success)`,
+                action: successAction,
+                connectionPath: `condition-${i}-api-success`,
+                condition: cond.label || "",
+                transitionType: null,
+                transitionLabel: "",
+                dataFlow: cond.onSuccessDataFlow || [],
+              });
+            }
+            const errorAction = cond.onErrorAction || "";
+            if ((errorAction === "navigate" || errorAction === "modal") && cond.onErrorTargetId) {
+              updated.push({
+                id: generateId(),
+                fromScreenId: screenId,
+                toScreenId: cond.onErrorTargetId,
+                hotspotId: hotspot.id,
+                label: `${cond.label || `branch ${i + 1}`} (error)`,
+                action: errorAction,
+                connectionPath: `condition-${i}-api-error`,
+                condition: cond.label || "",
+                transitionType: null,
+                transitionLabel: "",
+                dataFlow: cond.onErrorDataFlow || [],
+              });
+            }
+          }
         });
         return updated;
       });
@@ -745,7 +784,7 @@ export function useScreenManager(pan, zoom, canvasRef, commentCallbacks = {}) {
     setConnections((prev) => prev.filter((c) => c.conditionGroupId !== conditionGroupId));
   }, [screens, connections, documents, pushHistory]);
 
-  const convertToConditionalGroup = useCallback((existingConnId, fromScreenId, toScreenId) => {
+  const convertToConditionalGroup = useCallback((existingConnId, fromScreenId, toScreenId, hotspotId = null) => {
     pushHistory(screens, connections, documents);
     const groupId = generateId();
     setConnections((prev) => {
@@ -758,7 +797,7 @@ export function useScreenManager(pan, zoom, canvasRef, commentCallbacks = {}) {
         id: generateId(),
         fromScreenId,
         toScreenId,
-        hotspotId: null,
+        hotspotId,
         label: "",
         action: "navigate",
         connectionPath: "condition-1",
@@ -772,7 +811,7 @@ export function useScreenManager(pan, zoom, canvasRef, commentCallbacks = {}) {
     return groupId;
   }, [screens, connections, documents, pushHistory]);
 
-  const addToConditionalGroup = useCallback((fromScreenId, toScreenId, conditionGroupId) => {
+  const addToConditionalGroup = useCallback((fromScreenId, toScreenId, conditionGroupId, hotspotId = null) => {
     pushHistory(screens, connections, documents);
     setConnections((prev) => {
       const groupConns = prev.filter((c) => c.conditionGroupId === conditionGroupId);
@@ -784,7 +823,7 @@ export function useScreenManager(pan, zoom, canvasRef, commentCallbacks = {}) {
         id: generateId(),
         fromScreenId,
         toScreenId,
-        hotspotId: null,
+        hotspotId,
         label: "",
         action: "navigate",
         connectionPath: `condition-${maxIndex + 1}`,
diff --git a/src/pages/docs/userGuide.md b/src/pages/docs/userGuide.md
index fa8a4bb..8cf8e8d 100644
--- a/src/pages/docs/userGuide.md
+++ b/src/pages/docs/userGuide.md
@@ -237,14 +237,22 @@ Annotate what data passes between screens along a connection. For example, "prod
 
 Conditional branching lets you model flows where a single action leads to different screens depending on a condition — for example, different outcomes based on whether a user is authenticated.
 
-### From a hotspot
+### From a hotspot (modal)
 
-In the Hotspot modal, set the Action to "Conditional". Add branch conditions using the "Add Branch" button. Each branch has a label (the condition text) and a target screen. The generated instructions include all branches with their labels.
+In the Hotspot modal, set the Action to "Conditional". Add branch conditions using the "Add Branch" button. Each branch has a label (the condition text) and its own action type — Navigate, Back, Modal, API Call, or Custom. For API branches, you can define the endpoint, method, request/response schemas, and success/error follow-up actions. The generated instructions include all branches with their labels and action details.
+
+### From a hotspot (drag-to-connect)
+
+Drag from a hotspot's green handle to a target screen to create a connection. Drag from the same hotspot to a second screen and the connection automatically converts into a conditional group with amber-colored lines and inline label inputs. Continue dragging to additional screens to add more branches. Duplicate targets are ignored.
 
 ### From a plain connection (drag-to-create)
 
 When you drag a second connection from the same screen (without a hotspot), Drawd prompts "Create conditional branches?" — click Yes to convert both connections into an amber conditional group. Drag additional connections from the same screen to add more branches automatically.
 
+### Per-branch actions
+
+Each condition branch can have a different action type. For example, one branch might navigate to a success screen while another calls an API. When a branch uses the API action, you can configure success and error follow-up actions — each with their own target screen or custom description.
+
 ### Editing condition labels
 
 After creating a conditional group, inline label inputs appear along each connection line. Type the condition text (e.g., "user is subscriber") and press `Enter` to advance to the next input.
diff --git a/src/utils/importFlow.js b/src/utils/importFlow.js
index 1751e05..ea1fb97 100644
--- a/src/utils/importFlow.js
+++ b/src/utils/importFlow.js
@@ -60,6 +60,23 @@ export function importFlow(fileText) {
         if (!hs.responseSchema) hs.responseSchema = "";
         if (!hs.customDescription) hs.customDescription = "";
         if (!hs.conditions) hs.conditions = [];
+        hs.conditions.forEach((cond) => {
+          if (!cond.action) cond.action = "navigate";
+          if (!cond.customDescription) cond.customDescription = "";
+          if (!cond.apiEndpoint) cond.apiEndpoint = "";
+          if (!cond.apiMethod) cond.apiMethod = "GET";
+          if (!cond.documentId) cond.documentId = null;
+          if (!cond.requestSchema) cond.requestSchema = "";
+          if (!cond.responseSchema) cond.responseSchema = "";
+          if (!cond.onSuccessAction) cond.onSuccessAction = "";
+          if (!cond.onSuccessTargetId) cond.onSuccessTargetId = "";
+          if (!cond.onSuccessCustomDesc) cond.onSuccessCustomDesc = "";
+          if (!cond.onSuccessDataFlow) cond.onSuccessDataFlow = [];
+          if (!cond.onErrorAction) cond.onErrorAction = "";
+          if (!cond.onErrorTargetId) cond.onErrorTargetId = "";
+          if (!cond.onErrorCustomDesc) cond.onErrorCustomDesc = "";
+          if (!cond.onErrorDataFlow) cond.onErrorDataFlow = [];
+        });
         if (!hs.onSuccessAction) hs.onSuccessAction = "";
         if (!hs.onSuccessTargetId) hs.onSuccessTargetId = "";
         if (!hs.onSuccessCustomDesc) hs.onSuccessCustomDesc = "";
diff --git a/src/utils/instructionRenderers.js b/src/utils/instructionRenderers.js
index 84bbe86..d884c37 100644
--- a/src/utils/instructionRenderers.js
+++ b/src/utils/instructionRenderers.js
@@ -295,8 +295,29 @@ const HOTSPOT_ACTION_RENDERERS = {
       if (!h.conditions?.length) return null;
       let md = `**${h.label || "Unnamed"}** \u2014 Conditional branches:\n\n`;
       h.conditions.forEach((cond, ci) => {
-        const t = cond.targetScreenId ? screens.find((ts) => ts.id === cond.targetScreenId) : null;
-        md += `- ${cond.label || `branch ${ci + 1}`} \u2192 ${t?.name || "none"}\n`;
+        const branchAction = cond.action || "navigate";
+        const branchLabel = cond.label || `branch ${ci + 1}`;
+
+        if (branchAction === "navigate" || branchAction === "modal") {
+          const t = cond.targetScreenId ? screens.find((ts) => ts.id === cond.targetScreenId) : null;
+          md += `- **${branchLabel}** \u2192 ${branchAction} to ${t?.name || "none"}\n`;
+        } else if (branchAction === "back") {
+          md += `- **${branchLabel}** \u2192 go back\n`;
+        } else if (branchAction === "api") {
+          const method = cond.apiMethod || "GET";
+          const endpoint = cond.apiEndpoint || "/api/...";
+          md += `- **${branchLabel}** \u2192 API ${method} \`${endpoint}\`\n`;
+          if (cond.onSuccessAction) {
+            const st = cond.onSuccessTargetId ? screens.find((s) => s.id === cond.onSuccessTargetId) : null;
+            md += `  - on success: ${cond.onSuccessAction}${st ? ` to ${st.name}` : ""}\n`;
+          }
+          if (cond.onErrorAction) {
+            const et = cond.onErrorTargetId ? screens.find((s) => s.id === cond.onErrorTargetId) : null;
+            md += `  - on error: ${cond.onErrorAction}${et ? ` to ${et.name}` : ""}\n`;
+          }
+        } else if (branchAction === "custom") {
+          md += `- **${branchLabel}** \u2192 ${cond.customDescription || "custom action"}\n`;
+        }
       });
       md += `\n`;
       return md;