feat: Implement chat-based confirmation flow and enhance canvas element handling

Author: SahanUday

agent/orchestrator.jac

@@ -61,6 +61,7 @@ glob _lock = threading.Lock();
 glob _ws: Any = None;
 glob _connected: bool = False;
 glob _pending: dict[str, Any] = {};
+glob _pending_confirms: dict[str, Any] = {};
 glob _relay_loop: Any = None;
 glob _relay_ready: Any = threading.Event();
 
@@ -196,21 +197,38 @@ def _send_command(action: str, data: dict | None = None, session_id: str = "", t
     }
     return res.get("data");
 }
+"""Resolve a pending confirmation via chat WebSocket (called from server.jac)."""
+def _resolve_confirm(confirm_id: str, result: str) -> None {
+    entry: Any = None;
+    with _lock {
+        entry = _pending_confirms.pop(confirm_id, None);
+    }
+    if entry is not None {
+        (evt, res) = entry;
+        res["result"] = result;
+        evt.set();
+    }
+}
 
-
-# ── Confirmation flow ─────────────────────────────────────────────────────────
-"""Show confirm dialog and poll for result (max 30s)."""
-def _request_confirm(provider: CanvasToolProvider, message: str) -> bool {
+"""Send confirmation request via chat WebSocket and wait for response (max 60s)."""
+def _chat_confirm(ws: Any, event_loop: Any, session_id: str, message: str) -> str {
     confirm_id: str = str(uuid.uuid4());
-    provider.call_tool("show_confirm", {"confirmId": confirm_id, "message": message});
-    deadline: float = time.time() + 30.0;
-    while time.time() < deadline {
-        result: dict[str, Any] = json.loads(provider.call_tool("get_confirm_result", {"confirmId": confirm_id}));
-        if result.get("result") == "ok" { return True; }
-        if result.get("result") == "cancel" { return False; }
-        time.sleep(0.5);
+    evt: Any = threading.Event();
+    res: dict = {};
+    with _lock {
+        _pending_confirms[confirm_id] = (evt, res);
+    }
+    _send_ws(ws, {"type": "confirm", "sessionId": session_id, "confirmId": confirm_id, "message": message}, event_loop);
+    if not evt.wait(timeout=60.0) {
+        with _lock {
+            _pending_confirms.pop(confirm_id, None);
+        }
+        return "cancel";
+    }
+    with _lock {
+        _pending_confirms.pop(confirm_id, None);
     }
-    return False;
+    return res.get("result", "cancel");
 }
 
 
@@ -390,28 +408,50 @@ walker AgentOrchestrator {
 
         canvas_mode: str = "replace";
         existing_elements_json: str = "[]";
+        existing_bounding_box: str = "{}";
 
         if not canvas_empty {
-            # Canvas non-empty: request confirmation
-            confirmed: bool = _request_confirm(
-                self._provider,
-                "Replace canvas content with new diagram?"
+            # Canvas non-empty: request confirmation via chat
+            confirm_result: str = _chat_confirm(
+                self.ws,
+                self.event_loop,
+                self.session_id,
+                "Canvas is not empty. **Approve** to clear it and render the new diagram, or **Deny** to place it beside the existing content."
             );
-            if not confirmed {
-                log("compose_diagram: user declined to replace canvas");
-                self._session_context.canvas_summary = "non-empty, user kept";
-                _send_ws(self.ws, {"type": "message", "sessionId": self.session_id, "content": "Diagram creation cancelled. Canvas kept as-is."}, self.event_loop);
-                _send_ws(self.ws, {"type": "done", "sessionId": self.session_id}, self.event_loop);
-                return;
+            if confirm_result == "ok" {
+                log("compose_diagram: user approved replace");
+                # canvas_mode stays "replace"
+            } else {
+                log("compose_diagram: user denied replace, switching to additive mode");
+                canvas_mode = "additive";
             }
-            log("compose_diagram: user confirmed replacement");
         }
 
         if canvas_mode == "additive" {
             try {
-                existing_elements_json = self._provider.call_tool("get_canvas_elements", {});
+                elements_result: str = self._provider.call_tool("get_canvas_elements", {});
+                # call_tool returns JSON string; parse and re-serialize to ensure proper format
+                parsed_els: dict = json.loads(elements_result);
+                # Extract just the elements array if it's wrapped in a dict
+                if isinstance(parsed_els, dict) and "elements" in parsed_els {
+                    existing_elements_json = json.dumps(parsed_els["elements"]);
+                } else {
+                    existing_elements_json = elements_result;
+                }
+                log(f"compose_diagram: fetched {len(parsed_els) if isinstance(parsed_els, list) else len(parsed_els.get('elements', []))} existing elements");
             } except Exception as e {
                 log(f"compose_diagram: error fetching elements: {e}");
+                existing_elements_json = "[]";
+            }
+            try {
+                bb_result: str = self._provider.call_tool("get_bounding_box", {});
+                # call_tool returns JSON string; verify it's valid JSON
+                parsed_bb: dict = json.loads(bb_result);
+                existing_bounding_box = json.dumps(parsed_bb);
+                log(f"compose_diagram: bounding box = {existing_bounding_box}");
+            } except Exception as e {
+                log(f"compose_diagram: error fetching bounding box: {e}");
+                existing_bounding_box = "{}";
             }
         }
 
@@ -426,7 +466,8 @@ walker AgentOrchestrator {
             self._session_context.conversation_log,
             self._session_context.diagram_blueprint,
             canvas_mode,
-            existing_elements_json
+            existing_elements_json,
+            existing_bounding_box
         );
         log(f"compose_diagram: response = {response[:80]}");
 

agent/server.jac

@@ -11,7 +11,7 @@ import threading;
 
 import websockets;
 import from typing { Any }
-import from .orchestrator { _boot as _orchestrator_boot, _run_conversation }
+import from .orchestrator { _boot as _orchestrator_boot, _run_conversation, _resolve_confirm }
 
 glob CHAT_PORT: int = int(os.environ.get("JASKETCH_CHAT_PORT", "9602"));
 
@@ -33,6 +33,10 @@ async def _handler(ws: Any) -> None {
         async for raw in ws {
             try {
                 m: dict[str, Any] = json.loads(raw);
+                if m.get("type") == "confirm_response" {
+                    _resolve_confirm(m.get("confirmId", ""), m.get("result", "cancel"));
+                    continue;
+                }
                 if m.get("type") != "chat" { continue; }
                 ak: str = m.get("apiKey", "");
                 md: str = m.get("model", "gpt-4o-mini");

agent/subagents/synthesizer.jac

@@ -15,7 +15,7 @@ node DiagramComposer {
     has llm: Any = None;
 
     def compose(message: str, conversation_log: str, diagram_blueprint: str,
-                canvas_mode: str, existing_elements_json: str) -> str
+                canvas_mode: str, existing_elements_json: str, existing_bounding_box: str) -> str
         by self.llm(
             tools=[use_canvas_tool],
             max_react_iterations=8,
@@ -24,7 +24,8 @@ node DiagramComposer {
                 "conversation": conversation_log,
                 "diagram_blueprint": diagram_blueprint,
                 "canvas_mode": canvas_mode,
-                "existing_elements_json": existing_elements_json
+                "existing_elements_json": existing_elements_json,
+                "existing_bounding_box": existing_bounding_box
             }
         );
 }
@@ -38,22 +39,51 @@ Inputs (from incl_info):
   - diagram_blueprint: JSON-serialized BlueprintSpec from DiagramPlanner (may be empty string)
   - conversation: rolling transcript of recent turns
 
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+⚠️  CRITICAL: canvas_mode DETERMINES YOUR TOOL CHOICE ⚠️
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+IF canvas_mode == "replace":
+  → MUST use render_elements (this clears and replaces)
+  → DO NOT use create_elements
+
+IF canvas_mode == "additive":
+  → MUST use create_elements (this adds without clearing)
+  → DO NOT use render_elements
+  → Place new diagram beside existing using existing_bounding_box
+
+If you use the wrong tool, the diagram will not be placed correctly.
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 Workflow for replace mode:
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
   1. Call use_canvas_tool("get_drawing_guide", "{}") to load element schemas and styling palette
   2. Call use_canvas_tool("get_viewport", "{}") to get canvas dimensions
   3. Follow diagram_blueprint if provided; otherwise infer structure from message
   4. Design the COMPLETE elements[] array (all shapes, arrows, text labels) using the styling guide
   5. Run the PRE-RENDER CHECKLIST below — fix any issues before rendering
-  6. Call use_canvas_tool("render_elements", "{\"elements\": [...]}") with ALL elements
+  6. Call use_canvas_tool("render_elements", "{\"elements\": [...]}")
+     MUST include ALL elements (clears canvas first, then renders)
   7. Describe what was created
 
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 Workflow for additive mode:
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
   1. Call use_canvas_tool("get_drawing_guide", "{}") to load element schemas and styling palette
-  2. Call use_canvas_tool("get_viewport", "{}") to get canvas dimensions and existing bounding box
-  3. Parse existing_elements_json to understand current layout
-  4. Position new elements beside/below existing ones (no overlap)
-  5. Run the PRE-RENDER CHECKLIST below
-  6. Call use_canvas_tool("create_elements", "{\"elements\": [...]}") to add without clearing
+  2. Call use_canvas_tool("get_viewport", "{}") to get canvas dimensions
+  3. Parse existing_elements_json to understand what's already on the canvas
+  4. Read existing_bounding_box from incl_info — format: {x, y, width, height}
+     - If bounding_box has x, y, width, height:
+       Place new diagram starting at: x + width + 120 (120px gap to the right)
+     - If bounding_box is empty/null, start at x=100, y=100
+  5. Design NEW elements only (DON'T include existing elements)
+  6. Run the PRE-RENDER CHECKLIST below
+  7. Call use_canvas_tool("create_elements", "{\"elements\": [...]}")
+     MUST use create_elements, NOT render_elements
+     Only pass your NEW elements
+  8. Describe what was added
 
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 ELEMENT SCHEMAS
@@ -195,9 +225,9 @@ def use_canvas_tool(name: str, arguments: str) -> str {
     } except Exception { args = {}; }
     return _composer_provider.call_tool(name, args);
 }
-sem use_canvas_tool = "Call a canvas tool by name. Only use tools listed in available_canvas_tools from context.";
-sem use_canvas_tool.name = "Tool name — must exactly match one of the names in available_canvas_tools.";
-sem use_canvas_tool.arguments = "JSON object string matching the inputSchema of the named tool. Build from the schema in available_canvas_tools.";
+sem use_canvas_tool = "Call a canvas tool by name with JSON arguments. Always pass both 'name' and 'arguments' parameters.";
+sem use_canvas_tool.name = "(required) Tool name — must exactly match one of: get_drawing_guide, get_viewport, render_elements, create_elements";
+sem use_canvas_tool.arguments = "(required) JSON object string (not Python dict) matching the inputSchema of the named tool. Example: '{\"elements\": [...]}'  or '{}'  for tools with no inputs.";
 
 # ── Provider injection (called by orchestrator) ────────────────────────────────
 

components/layout/ChatPanel.cl.jac

@@ -170,6 +170,33 @@ def ChatMessage(props: dict) -> JsxElement {
     return None;
 }
 
+def CanvasConfirmModal(props: dict) -> JsxElement {
+    pending = props.pending;
+    onApprove = props.onApprove;
+    onDeny = props.onDeny;
+    if not pending or not pending.confirmId {
+        return <></>;
+    }
+    return <div className="flex-shrink-0 border-t border-amber-200/40 bg-amber-50 px-4 py-3">
+        <div className="flex items-start gap-3">
+            <div className="flex-1 min-w-0">
+                <p className="text-xs font-semibold text-amber-600 mb-1">Canvas Confirmation</p>
+                <p className="text-xs text-gray-700 mb-3">{pending.message}</p>
+                <div className="flex gap-2">
+                    <button onClick={onApprove}
+                        className="bg-green-100/60 hover:bg-green-100 text-green-700 border border-green-200 text-xs font-medium px-3 py-1.5 rounded-lg transition-colors cursor-pointer">
+                        Approve
+                    </button>
+                    <button onClick={onDeny}
+                        className="bg-red-100/60 hover:bg-red-100 text-red-700 border border-red-200 text-xs font-medium px-3 py-1.5 rounded-lg transition-colors cursor-pointer">
+                        Deny
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>;
+}
+
 def ChatInput(props: dict) -> JsxElement {
     canSend = props.apiKey and props.inputText.trim() and not props.isLoading;
     isDisabled = not props.apiKey or props.isLoading;
@@ -333,6 +360,12 @@ def:pub ChatPanel(props: dict) -> JsxElement {
             <div ref={messagesEndRef}></div>
         </div>
 
+        <CanvasConfirmModal
+            pending={chat.pendingConfirm}
+            onApprove={lambda -> None { chat.respondConfirm("ok"); }}
+            onDeny={lambda -> None { chat.respondConfirm("deny"); }}
+        />
+
         <ChatInput
             apiKey={apiKey}
             inputText={inputText}

hooks/useChatSocket.cl.jac

@@ -4,6 +4,7 @@ def:pub useChatSocket() -> dict {
     has messages: list = [];
     has isLoading: bool = False;
     has isConnected: bool = False;
+    has pendingConfirm: dict = {};
 
     wsRef = useRef(None);
     connectedRef = useRef(False);
@@ -12,9 +13,11 @@ def:pub useChatSocket() -> dict {
     messagesRef = useRef([]);
     loadingRef = useRef(False);
     currentAssistantRef = useRef("");
+    pendingConfirmRef = useRef({});
 
     messagesRef.current = messages;
     loadingRef.current = isLoading;
+    pendingConfirmRef.current = pendingConfirm;
 
     def nextId() -> int {
         messageIdRef.current = messageIdRef.current + 1;
@@ -37,7 +40,10 @@ def:pub useChatSocket() -> dict {
     def handleWsMessage(event: any) -> None {
         data = JSON.parse(event.data);
 
-        if data.type == "message" {
+        if data.type == "confirm" {
+            pendingConfirm = {"confirmId": data.confirmId or "", "message": data.message or ""};
+            pendingConfirmRef.current = pendingConfirm;
+        } elif data.type == "message" {
             msgContent = data["content"] or "";
             messagesRef.current = messagesRef.current.concat([{"id": nextId(), "role": "assistant", "content": msgContent}]);
             messages = messagesRef.current;
@@ -154,6 +160,19 @@ def:pub useChatSocket() -> dict {
         messageIdRef.current = 0;
     }
 
+    def respondConfirm(result: str) -> None {
+        cid = pendingConfirmRef.current.confirmId or "";
+        if wsRef.current and connectedRef.current and cid {
+            wsRef.current.send(JSON.stringify({
+                "type": "confirm_response",
+                "confirmId": cid,
+                "result": result
+            }));
+        }
+        pendingConfirm = {};
+        pendingConfirmRef.current = {};
+    }
+
     can with entry {
         connect();
 
@@ -172,6 +191,8 @@ def:pub useChatSocket() -> dict {
         "isLoading": isLoading,
         "isConnected": isConnected,
         "sendMessage": sendMessage,
-        "clearMessages": clearMessages
+        "clearMessages": clearMessages,
+        "pendingConfirm": pendingConfirm,
+        "respondConfirm": respondConfirm
     };
 }

hooks/useElements.cl.jac

@@ -175,6 +175,19 @@ def:pub useElements() -> dict {
         setElementsWithHistory([]);
     }
 
+    def setElementsReplaceAll(newElements: list) -> None {
+        # Add IDs to any elements missing them
+        i = 0;
+        while i < newElements.length {
+            if not newElements[i].id {
+                newElements[i].id = crypto.randomUUID();
+            }
+            i = i + 1;
+        }
+        # Replace all elements and push to history
+        setElementsWithHistory(newElements);
+    }
+
     def undo() -> None {
         idx = historyIndexRef.current;
         if idx > 0 {
@@ -209,6 +222,7 @@ def:pub useElements() -> dict {
         "removeElement": removeElement,
         "removeMultipleElements": removeMultipleElements,
         "clearElements": clearElements,
+        "setElementsReplaceAll": setElementsReplaceAll,
         "undo": undo,
         "redo": redo
     };