diff --git a/src/components/workflow/NodeDetailPopup.tsx b/src/components/workflow/NodeDetailPopup.tsx
index 2853814..af1bed9 100644
--- a/src/components/workflow/NodeDetailPopup.tsx
+++ b/src/components/workflow/NodeDetailPopup.tsx
@@ -32,7 +32,7 @@ import {
 import type { Agent, Team, PipelineConfig, PipelineStep, TeamMessage } from '@/types'
 import type { AgentNodeData } from './nodes/AgentNode'
 import type { ConditionalNodeData, ConditionOperator } from './nodes/ConditionalNode'
-import type { HttpNodeData } from './nodes/HttpNode'
+import type { HttpNodeData, HttpMethod } from './nodes/HttpNode'
 import type { ExecutionNodeState } from './useExecutionState'
 
 interface NodeDetailPopupProps {
@@ -42,6 +42,7 @@ interface NodeDetailPopupProps {
     executionStates: Map<string, ExecutionNodeState> | null
     runMessages?: TeamMessage[]
     onDelete?: (nodeId: string) => void
+    onUpdateNodeData?: (nodeId: string, newData: Record<string, unknown>) => void
     onClose: () => void
 }
 
@@ -52,7 +53,7 @@ const EXEC_STATUS_CONFIG: Record<ExecutionNodeState, { label: string; className:
     failed: { label: 'Failed', className: 'text-red-400', Icon: X },
 }
 
-export function NodeDetailPopup({ node, team, agents, executionStates, runMessages, onDelete, onClose }: NodeDetailPopupProps) {
+export function NodeDetailPopup({ node, team, agents, executionStates, runMessages, onDelete, onUpdateNodeData, onClose }: NodeDetailPopupProps) {
     const popupRef = useRef<HTMLDivElement>(null)
     const { getNodesBounds, flowToScreenPosition } = useReactFlow()
     const [showInput, setShowInput] = useState(false)
@@ -301,91 +302,224 @@ export function NodeDetailPopup({ node, team, agents, executionStates, runMessag
                 </div>
             )}
 
-            {/* Conditional node config */}
-            {node.type === 'conditionalNode' && (
-                <>
-                    {/* Header override for conditional */}
-                    <hr className="border-white/5 mb-2" />
-                    <div className="space-y-1.5 mb-3">
-                        <p className="text-[10px] font-medium uppercase tracking-wider text-gray-600">Condition Config</p>
-                        {(node.data as unknown as ConditionalNodeData).conditions.map((c, i) => {
-                            const opLabel: Record<ConditionOperator, string> = {
-                                contains: 'contains', not_contains: 'not contains',
-                                equals: '==', not_equals: '!=',
-                                starts_with: 'starts with', ends_with: 'ends with',
-                                regex: 'regex', gt: '>', lt: '<',
-                                is_empty: 'is empty', is_not_empty: 'is not empty',
-                                llm_judge: 'LLM judge',
-                            }
-                            return (
-                                <div key={i} className="rounded-md bg-amber-500/5 border border-amber-500/10 px-2.5 py-2">
-                                    <div className="flex items-center gap-1 text-[10px]">
-                                        <span className="text-amber-400 font-mono">{c.field}</span>
-                                        <span className="text-gray-600">{opLabel[c.operator]}</span>
-                                        {c.value && <span className="text-gray-400 font-mono">"{c.value}"</span>}
-                                    </div>
+            {/* Conditional node config — editable form */}
+            {node.type === 'conditionalNode' && onUpdateNodeData && (() => {
+                const condData = node.data as unknown as ConditionalNodeData
+                const condition = condData.conditions[0] as ConditionalNodeData['conditions'][number] | undefined
+                const opOptions: { value: ConditionOperator; label: string }[] = [
+                    { value: 'contains', label: 'contains' },
+                    { value: 'not_contains', label: 'not contains' },
+                    { value: 'equals', label: '==' },
+                    { value: 'not_equals', label: '!=' },
+                    { value: 'starts_with', label: 'starts with' },
+                    { value: 'ends_with', label: 'ends with' },
+                    { value: 'regex', label: 'regex' },
+                    { value: 'gt', label: '>' },
+                    { value: 'lt', label: '<' },
+                    { value: 'is_empty', label: 'is empty' },
+                    { value: 'is_not_empty', label: 'is not empty' },
+                    { value: 'llm_judge', label: 'LLM judge' },
+                ]
+                const hideValue = condition?.operator === 'is_empty' || condition?.operator === 'is_not_empty'
+                const updateCondition = (patch: Partial<{ field: string; operator: ConditionOperator; value: string }>) => {
+                    const updated = { ...(condition ?? { field: 'output', operator: 'contains' as ConditionOperator, value: '' }), ...patch }
+                    onUpdateNodeData(node.id, { conditions: [updated] })
+                }
+                return (
+                    <>
+                        <hr className="border-white/5 mb-2" />
+                        <div className="space-y-2 mb-3">
+                            <p className="text-[10px] font-medium uppercase tracking-wider text-gray-600">Condition Config</p>
+                            {/* Label */}
+                            <div>
+                                <label className="text-[9px] text-gray-600 uppercase tracking-wider">Label</label>
+                                <input
+                                    type="text"
+                                    defaultValue={condData.label}
+                                    onBlur={(e) => onUpdateNodeData(node.id, { label: e.target.value })}
+                                    className="w-full mt-0.5 rounded-md bg-white/5 border border-white/10 px-2 py-1 text-[11px] text-gray-200 focus:border-amber-500/50 focus:outline-none transition-colors"
+                                    placeholder="Condition name"
+                                />
+                            </div>
+                            {/* Field */}
+                            <div>
+                                <label className="text-[9px] text-gray-600 uppercase tracking-wider">Field</label>
+                                <input
+                                    type="text"
+                                    defaultValue={condition?.field ?? 'output'}
+                                    onBlur={(e) => updateCondition({ field: e.target.value })}
+                                    className="w-full mt-0.5 rounded-md bg-white/5 border border-white/10 px-2 py-1 text-[11px] text-amber-400 font-mono focus:border-amber-500/50 focus:outline-none transition-colors"
+                                    placeholder="output"
+                                />
+                            </div>
+                            {/* Operator */}
+                            <div>
+                                <label className="text-[9px] text-gray-600 uppercase tracking-wider">Operator</label>
+                                <select
+                                    value={condition?.operator ?? 'contains'}
+                                    onChange={(e) => updateCondition({ operator: e.target.value as ConditionOperator })}
+                                    className="w-full mt-0.5 rounded-md bg-white/5 border border-white/10 px-2 py-1 text-[11px] text-gray-200 focus:border-amber-500/50 focus:outline-none transition-colors appearance-none cursor-pointer"
+                                >
+                                    {opOptions.map((op) => (
+                                        <option key={op.value} value={op.value} className="bg-gray-900">{op.label}</option>
+                                    ))}
+                                </select>
+                            </div>
+                            {/* Value (hidden for is_empty/is_not_empty) */}
+                            {!hideValue && (
+                                <div>
+                                    <label className="text-[9px] text-gray-600 uppercase tracking-wider">
+                                        {condition?.operator === 'llm_judge' ? 'Prompt' : 'Value'}
+                                    </label>
+                                    <input
+                                        type="text"
+                                        defaultValue={condition?.value ?? ''}
+                                        onBlur={(e) => updateCondition({ value: e.target.value })}
+                                        className="w-full mt-0.5 rounded-md bg-white/5 border border-white/10 px-2 py-1 text-[11px] text-gray-200 font-mono focus:border-amber-500/50 focus:outline-none transition-colors"
+                                        placeholder={condition?.operator === 'llm_judge' ? 'Is this response positive?' : 'comparison value'}
+                                    />
                                 </div>
-                            )
-                        })}
-                        <p className="text-[10px] text-gray-600 italic">
-                            Condition editing coming soon — configure via API.
-                        </p>
-                    </div>
-                </>
-            )}
+                            )}
+                            <p className="text-[9px] text-gray-600 leading-relaxed">
+                                Connect the <span className="text-green-400">True</span> and <span className="text-red-400">False</span> output handles to different agents to create branches.
+                            </p>
+                        </div>
+                    </>
+                )
+            })()}
 
-            {/* HTTP node config */}
-            {node.type === 'httpNode' && (
-                <>
-                    <hr className="border-white/5 mb-2" />
-                    <div className="space-y-1.5 mb-3">
-                        <p className="text-[10px] font-medium uppercase tracking-wider text-gray-600">HTTP Config</p>
-                        {(() => {
-                            const httpData = node.data as unknown as HttpNodeData
-                            const methodColors: Record<string, string> = {
-                                GET: 'text-green-400', POST: 'text-blue-400',
-                                PUT: 'text-amber-400', DELETE: 'text-red-400',
-                                PATCH: 'text-purple-400',
-                            }
-                            return (
-                                <>
-                                    <div className="rounded-md bg-cyan-500/5 border border-cyan-500/10 px-2.5 py-2">
-                                        <div className="flex items-center gap-1.5 text-[10px]">
-                                            <span className={`font-bold ${methodColors[httpData.method] ?? 'text-gray-400'}`}>
-                                                {httpData.method}
-                                            </span>
-                                            <span className="text-gray-400 font-mono truncate">
-                                                {httpData.url || 'No URL set'}
-                                            </span>
-                                        </div>
-                                    </div>
-                                    {httpData.headers.length > 0 && (
-                                        <div>
-                                            <p className="text-[10px] text-gray-600">Headers ({httpData.headers.length})</p>
-                                            {httpData.headers.slice(0, 3).map((h, i) => (
-                                                <p key={i} className="text-[10px] text-gray-500 font-mono">
-                                                    {h.key}: {h.value}
-                                                </p>
-                                            ))}
-                                            {httpData.headers.length > 3 && (
-                                                <p className="text-[10px] text-gray-600">+{httpData.headers.length - 3} more</p>
-                                            )}
-                                        </div>
-                                    )}
-                                    <div className="flex items-center gap-3">
-                                        <span className="text-[10px] text-gray-600">
-                                            Timeout: <span className="text-gray-400">{httpData.timeout || 30}s</span>
-                                        </span>
+            {/* HTTP node config — editable form */}
+            {node.type === 'httpNode' && onUpdateNodeData && (() => {
+                const httpData = node.data as unknown as HttpNodeData
+                const methods: HttpMethod[] = ['GET', 'POST', 'PUT', 'DELETE', 'PATCH']
+                const methodColors: Record<string, string> = {
+                    GET: 'text-green-400', POST: 'text-blue-400',
+                    PUT: 'text-amber-400', DELETE: 'text-red-400',
+                    PATCH: 'text-purple-400',
+                }
+                const showBody = httpData.method === 'POST' || httpData.method === 'PUT' || httpData.method === 'PATCH'
+                return (
+                    <>
+                        <hr className="border-white/5 mb-2" />
+                        <div className="space-y-2 mb-3">
+                            <p className="text-[10px] font-medium uppercase tracking-wider text-gray-600">HTTP Config</p>
+                            {/* Label */}
+                            <div>
+                                <label className="text-[9px] text-gray-600 uppercase tracking-wider">Label</label>
+                                <input
+                                    type="text"
+                                    defaultValue={httpData.label}
+                                    onBlur={(e) => onUpdateNodeData(node.id, { label: e.target.value })}
+                                    className="w-full mt-0.5 rounded-md bg-white/5 border border-white/10 px-2 py-1 text-[11px] text-gray-200 focus:border-cyan-500/50 focus:outline-none transition-colors"
+                                    placeholder="Request name"
+                                />
+                            </div>
+                            {/* Method + URL inline */}
+                            <div className="flex gap-1.5">
+                                <div className="w-20 shrink-0">
+                                    <label className="text-[9px] text-gray-600 uppercase tracking-wider">Method</label>
+                                    <select
+                                        value={httpData.method}
+                                        onChange={(e) => onUpdateNodeData(node.id, { method: e.target.value })}
+                                        className={`w-full mt-0.5 rounded-md bg-white/5 border border-white/10 px-1.5 py-1 text-[11px] font-bold focus:border-cyan-500/50 focus:outline-none transition-colors appearance-none cursor-pointer ${methodColors[httpData.method] ?? 'text-gray-400'}`}
+                                    >
+                                        {methods.map((m) => (
+                                            <option key={m} value={m} className="bg-gray-900">{m}</option>
+                                        ))}
+                                    </select>
+                                </div>
+                                <div className="flex-1 min-w-0">
+                                    <label className="text-[9px] text-gray-600 uppercase tracking-wider">URL</label>
+                                    <input
+                                        type="text"
+                                        defaultValue={httpData.url}
+                                        onBlur={(e) => onUpdateNodeData(node.id, { url: e.target.value })}
+                                        className="w-full mt-0.5 rounded-md bg-white/5 border border-white/10 px-2 py-1 text-[11px] text-gray-200 font-mono focus:border-cyan-500/50 focus:outline-none transition-colors"
+                                        placeholder="https://api.example.com/endpoint"
+                                    />
+                                </div>
+                            </div>
+                            {/* Headers */}
+                            <div>
+                                <div className="flex items-center justify-between">
+                                    <label className="text-[9px] text-gray-600 uppercase tracking-wider">Headers</label>
+                                    <button
+                                        type="button"
+                                        onClick={() => {
+                                            const updated = [...httpData.headers, { key: '', value: '' }]
+                                            onUpdateNodeData(node.id, { headers: updated })
+                                        }}
+                                        className="text-[9px] text-cyan-400 hover:text-cyan-300 transition-colors"
+                                    >
+                                        + Add
+                                    </button>
+                                </div>
+                                {httpData.headers.map((h, i) => (
+                                    <div key={i} className="flex gap-1 mt-1 items-center">
+                                        <input
+                                            type="text"
+                                            defaultValue={h.key}
+                                            onBlur={(e) => {
+                                                const updated = [...httpData.headers]
+                                                updated[i] = { ...updated[i], key: e.target.value }
+                                                onUpdateNodeData(node.id, { headers: updated })
+                                            }}
+                                            className="w-1/3 rounded-md bg-white/5 border border-white/10 px-1.5 py-0.5 text-[10px] text-gray-300 font-mono focus:border-cyan-500/50 focus:outline-none"
+                                            placeholder="Key"
+                                        />
+                                        <input
+                                            type="text"
+                                            defaultValue={h.value}
+                                            onBlur={(e) => {
+                                                const updated = [...httpData.headers]
+                                                updated[i] = { ...updated[i], value: e.target.value }
+                                                onUpdateNodeData(node.id, { headers: updated })
+                                            }}
+                                            className="flex-1 rounded-md bg-white/5 border border-white/10 px-1.5 py-0.5 text-[10px] text-gray-300 font-mono focus:border-cyan-500/50 focus:outline-none"
+                                            placeholder="Value"
+                                        />
+                                        <button
+                                            type="button"
+                                            onClick={() => {
+                                                const updated = httpData.headers.filter((_, idx) => idx !== i)
+                                                onUpdateNodeData(node.id, { headers: updated })
+                                            }}
+                                            className="text-red-400/60 hover:text-red-400 transition-colors shrink-0"
+                                        >
+                                            <X className="h-3 w-3" />
+                                        </button>
                                     </div>
-                                    <p className="text-[10px] text-gray-600 italic">
-                                        HTTP editing coming soon — configure via API.
-                                    </p>
-                                </>
-                            )
-                        })()}
-                    </div>
-                </>
-            )}
+                                ))}
+                            </div>
+                            {/* Body (POST/PUT/PATCH only) */}
+                            {showBody && (
+                                <div>
+                                    <label className="text-[9px] text-gray-600 uppercase tracking-wider">Body</label>
+                                    <textarea
+                                        defaultValue={httpData.body}
+                                        onBlur={(e) => onUpdateNodeData(node.id, { body: e.target.value })}
+                                        className="w-full mt-0.5 rounded-md bg-white/5 border border-white/10 px-2 py-1 text-[10px] text-gray-200 font-mono focus:border-cyan-500/50 focus:outline-none transition-colors resize-none"
+                                        rows={3}
+                                        placeholder='{"key": "value"}'
+                                    />
+                                </div>
+                            )}
+                            {/* Timeout */}
+                            <div>
+                                <label className="text-[9px] text-gray-600 uppercase tracking-wider">Timeout (seconds)</label>
+                                <input
+                                    type="number"
+                                    defaultValue={httpData.timeout || 30}
+                                    min={1}
+                                    max={300}
+                                    onBlur={(e) => onUpdateNodeData(node.id, { timeout: parseInt(e.target.value, 10) || 30 })}
+                                    className="w-20 mt-0.5 rounded-md bg-white/5 border border-white/10 px-2 py-1 text-[11px] text-gray-200 focus:border-cyan-500/50 focus:outline-none transition-colors"
+                                />
+                            </div>
+                        </div>
+                    </>
+                )
+            })()}
 
             {/* Actions */}
             <hr className="border-white/5 mb-2" />
diff --git a/src/components/workflow/WorkflowCanvas.tsx b/src/components/workflow/WorkflowCanvas.tsx
index 4c243bd..52b4ff2 100644
--- a/src/components/workflow/WorkflowCanvas.tsx
+++ b/src/components/workflow/WorkflowCanvas.tsx
@@ -65,6 +65,13 @@ const ARROW_MARKER_PURPLE = {
     color: '#a78bfa',
 }
 
+const ARROW_MARKER_RED = {
+    type: MarkerType.ArrowClosed,
+    width: 16,
+    height: 16,
+    color: '#f87171',
+}
+
 const NODE_TYPES: NodeTypes = {
     agentNode: AgentNode,
     startNode: StartNode,
@@ -285,13 +292,32 @@ function WorkflowCanvasInner({ team, agents, onSaveConfig, onCanvasError, active
         // but logic node connections are allowed in all modes
         if (team.mode !== 'pipeline' && !isLogicNodeConnection) return
 
+        // Determine edge style based on conditional handle
+        const isTrueBranch = connection.sourceHandle === 'true-source'
+        const isFalseBranch = connection.sourceHandle === 'false-source'
+        let edgeStroke = '#6bedb9'
+        let edgeMarker = ARROW_MARKER_GREEN
+        let edgeLabel: string | undefined
+        if (isTrueBranch) {
+            edgeStroke = '#6bedb9'
+            edgeMarker = ARROW_MARKER_GREEN
+            edgeLabel = 'True'
+        } else if (isFalseBranch) {
+            edgeStroke = '#f87171'
+            edgeMarker = ARROW_MARKER_RED
+            edgeLabel = 'False'
+        }
+
         setEdges((eds) => {
             const updated = addEdge(
                 {
                     ...connection,
                     animated: true,
-                    style: { stroke: '#6bedb9', strokeWidth: 2 },
-                    markerEnd: ARROW_MARKER_GREEN,
+                    style: { stroke: edgeStroke, strokeWidth: 2 },
+                    markerEnd: edgeMarker,
+                    label: edgeLabel,
+                    labelStyle: edgeLabel ? { fill: edgeStroke, fontWeight: 600, fontSize: 10 } : undefined,
+                    labelBgStyle: edgeLabel ? { fill: '#1a1a2e', fillOpacity: 0.9 } : undefined,
                     sourceHandle: connection.sourceHandle ?? getHandleIds(layoutDirection).sourceHandle,
                     targetHandle: connection.targetHandle ?? getHandleIds(layoutDirection).targetHandle,
                 },
@@ -608,6 +634,22 @@ function WorkflowCanvasInner({ team, agents, onSaveConfig, onCanvasError, active
 
     // ─── Add sticky note ─────────────────────────────────────────────────────
 
+    // ─── Update node data (for logic node forms) ─────────────────────────────
+
+    const handleUpdateNodeData = useCallback((nodeId: string, newData: Record<string, unknown>) => {
+        setNodes((currentNodes) => {
+            const updated = currentNodes.map((n) =>
+                n.id === nodeId ? { ...n, data: { ...n.data, ...newData } } : n
+            )
+            setEdges((currentEdges) => {
+                pushState(currentNodes, currentEdges)
+                void saveGraph(updated, currentEdges)
+                return currentEdges
+            })
+            return updated
+        })
+    }, [setNodes, setEdges, pushState, saveGraph])
+
     const handleAddNote = useCallback((screenX: number, screenY: number) => {
         const bounds = document.querySelector('.react-flow')?.getBoundingClientRect()
         if (!bounds) return
@@ -905,7 +947,7 @@ function WorkflowCanvasInner({ team, agents, onSaveConfig, onCanvasError, active
             )}
 
             {/* Detail Popup (portal-style, positioned via fixed) */}
-            {showPopup && selectedNode && selectedNode.type === 'agentNode' && (
+            {showPopup && selectedNode && (selectedNode.type === 'agentNode' || selectedNode.type === 'conditionalNode' || selectedNode.type === 'httpNode') && (
                 <NodeDetailPopup
                     node={selectedNode}
                     team={team}
@@ -913,6 +955,7 @@ function WorkflowCanvasInner({ team, agents, onSaveConfig, onCanvasError, active
                     executionStates={executionStates}
                     runMessages={runMessages}
                     onDelete={handleDeleteNode}
+                    onUpdateNodeData={handleUpdateNodeData}
                     onClose={() => { setShowPopup(false); setSelectedNodeId(null) }}
                 />
             )}
diff --git a/src/components/workflow/useWorkflowGraph.ts b/src/components/workflow/useWorkflowGraph.ts
index 8b224fd..70a491f 100644
--- a/src/components/workflow/useWorkflowGraph.ts
+++ b/src/components/workflow/useWorkflowGraph.ts
@@ -56,6 +56,13 @@ const ARROW_MARKER_AMBER_DASHED = {
     color: '#f59e0b',
 }
 
+const ARROW_MARKER_RED = {
+    type: MarkerType.ArrowClosed,
+    width: 16,
+    height: 16,
+    color: '#f87171',
+}
+
 /**
  * Returns the correct handle IDs for a given layout direction.
  * TB (top-to-bottom): source from bottom, target to top
@@ -614,16 +621,36 @@ function extractCanvasLogicEdges(edges: Edge[], nodes: Node[]): CanvasLogicEdge[
 
 function restoreLogicEdges(config: Record<string, unknown>): Edge[] {
     const logicEdges = (config._canvas_logic_edges ?? []) as CanvasLogicEdge[]
-    return logicEdges.map((le) => ({
-        id: le.id,
-        source: le.source,
-        target: le.target,
-        sourceHandle: le.sourceHandle,
-        targetHandle: le.targetHandle,
-        animated: true,
-        style: { stroke: '#6bedb9', strokeWidth: 2 },
-        markerEnd: ARROW_MARKER,
-    }))
+    return logicEdges.map((le) => {
+        // Determine edge style from conditional handle IDs
+        const isTrueBranch = le.sourceHandle === 'true-source'
+        const isFalseBranch = le.sourceHandle === 'false-source'
+        let stroke = '#6bedb9'
+        let marker = ARROW_MARKER
+        let label: string | undefined
+        if (isTrueBranch) {
+            stroke = '#6bedb9'
+            marker = ARROW_MARKER
+            label = 'True'
+        } else if (isFalseBranch) {
+            stroke = '#f87171'
+            marker = ARROW_MARKER_RED
+            label = 'False'
+        }
+        return {
+            id: le.id,
+            source: le.source,
+            target: le.target,
+            sourceHandle: le.sourceHandle,
+            targetHandle: le.targetHandle,
+            animated: true,
+            style: { stroke, strokeWidth: 2 },
+            markerEnd: marker,
+            label,
+            labelStyle: label ? { fill: stroke, fontWeight: 600, fontSize: 10 } : undefined,
+            labelBgStyle: label ? { fill: '#1a1a2e', fillOpacity: 0.9 } : undefined,
+        }
+    })
 }
 
 // ─── Graph → Config (reverse) ────────────────────────────────────────────────