openCanvas

frontend-web/src/open-canvas/api/models.ts

@@ -12,6 +12,8 @@ interface BackendModel {
   supports_thinking?: boolean;
   supports_reasoning_effort?: boolean;
   supports_tool_calling?: boolean;
+  // Canvas-phase-9 fields (now returned by backend)
+  description?: string;
 }
 
 export async function loadCanvasModels(): Promise<CanvasModel[]> {

frontend-web/src/open-canvas/api/runs.ts

@@ -12,38 +12,168 @@ export type CanvasRunInput = {
   quick_action_id?: string;
 };
 
+/** Partial artifact data extracted from streaming tool_call_chunks */
+export type StreamingArtifactPartial = {
+  type?: "text" | "code";
+  title?: string;
+  content?: string;
+  language?: string;
+};
+
 export type CanvasStreamCallbacks = {
   onMessage?: (msg: CanvasMessage) => void;
   onArtifact?: (artifact: CanvasArtifact) => void;
+  /** Called repeatedly during streaming as update_artifact args accumulate */
+  onStreamingArtifact?: (partial: StreamingArtifactPartial) => void;
   onDone?: () => void;
   onError?: (err: unknown) => void;
 };
 
+// ---------------------------------------------------------------------------
+// Streaming JSON arg extraction helpers
+// ---------------------------------------------------------------------------
+
+function unescapeJsonFragment(raw: string): string {
+  // Remove trailing incomplete escape sequence
+  const safe = raw.replace(/\\[^"nrts\\bfu]?$/, "");
+  let out = "";
+  let i = 0;
+  while (i < safe.length) {
+    if (safe[i] === "\\" && i + 1 < safe.length) {
+      const next = safe[i + 1]!;
+      if (next === "n") { out += "\n"; i += 2; }
+      else if (next === "r") { out += "\r"; i += 2; }
+      else if (next === "t") { out += "\t"; i += 2; }
+      else if (next === '"') { out += '"'; i += 2; }
+      else if (next === "\\") { out += "\\"; i += 2; }
+      else if (next === "b") { out += "\b"; i += 2; }
+      else if (next === "f") { out += "\f"; i += 2; }
+      else { out += safe[i]!; i++; }
+    } else if (safe[i] === '"') {
+      // Unescaped closing quote — content value ends here
+      break;
+    } else {
+      out += safe[i]!;
+      i++;
+    }
+  }
+  return out;
+}
+
+/** Extract a fully-quoted string field, e.g. "type": "text" */
+function extractStringField(args: string, field: string): string | undefined {
+  const re = new RegExp(`"${field}"\\s*:\\s*"((?:[^"\\\\]|\\\\.)*)"`, "");
+  const m = re.exec(args);
+  if (!m) return undefined;
+  return unescapeJsonFragment(m[1]!);
+}
+
+/** Extract the content field even from incomplete JSON (no closing quote yet) */
+function extractContentField(args: string): string | undefined {
+  const keyIdx = args.indexOf('"content"');
+  if (keyIdx === -1) return undefined;
+  const afterKey = args.slice(keyIdx + '"content"'.length);
+  const colonQuote = /^\s*:\s*"/.exec(afterKey);
+  if (!colonQuote) return undefined;
+  const valueStart = colonQuote[0].length;
+  const raw = afterKey.slice(valueStart);
+  return unescapeJsonFragment(raw);
+}
+
+function extractPartialArtifactArgs(args: string): StreamingArtifactPartial {
+  return {
+    type: extractStringField(args, "type") as "text" | "code" | undefined,
+    title: extractStringField(args, "title"),
+    language: extractStringField(args, "language"),
+    content: extractContentField(args),
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Main stream function
+// ---------------------------------------------------------------------------
+
 export async function streamCanvasRun(
   threadId: string,
   input: CanvasRunInput,
   callbacks: CanvasStreamCallbacks,
+  modelName?: string | null,
 ): Promise<void> {
   const client = getAPIClient();
   try {
     const stream = client.runs.stream(threadId, CANVAS_AGENT_ID, {
       input,
       streamMode: ["values", "messages-tuple"],
+      ...(modelName ? { config: { configurable: { model_name: modelName } } } : {}),
     });
 
+    // Accumulate tool call args by index position
+    const toolCallAccumulator: Record<number, { name: string; args: string }> = {};
+
     for await (const chunk of stream) {
-      // Cast to string: SDK typings only list a subset of event names
       const event = chunk.event as string;
       const data = (chunk as { event: string; data: unknown }).data;
+
       if (event === "values") {
         const state = data as Record<string, unknown>;
         if (state.artifact) {
           callbacks.onArtifact?.(state.artifact as CanvasArtifact);
         }
-      } else if (event === "messages/tuple") {
-        const [msg] = data as [CanvasMessage];
-        if (msg) {
-          callbacks.onMessage?.(msg);
+      } else if (event === "messages") {
+        const tuple = data as [unknown, unknown] | unknown;
+        const rawMsg = Array.isArray(tuple) ? tuple[0] : tuple;
+        if (!rawMsg || typeof rawMsg !== "object") continue;
+
+        const msg = rawMsg as Record<string, unknown>;
+
+        // Emit text content to chat panel
+        callbacks.onMessage?.(msg as unknown as CanvasMessage);
+
+        // ---- Streaming tool call args (tool_call_chunks) ----
+        const toolCallChunks = msg.tool_call_chunks;
+        if (Array.isArray(toolCallChunks) && toolCallChunks.length > 0) {
+          for (const tcChunk of toolCallChunks as Array<Record<string, unknown>>) {
+            const idx = (tcChunk.index as number | undefined) ?? 0;
+            if (!toolCallAccumulator[idx]) {
+              toolCallAccumulator[idx] = {
+                name: (tcChunk.name as string | undefined) ?? "",
+                args: "",
+              };
+            } else if (tcChunk.name) {
+              toolCallAccumulator[idx]!.name = tcChunk.name as string;
+            }
+            toolCallAccumulator[idx]!.args += (tcChunk.args as string | undefined) ?? "";
+
+            if (toolCallAccumulator[idx]!.name === "update_artifact") {
+              const partial = extractPartialArtifactArgs(toolCallAccumulator[idx]!.args);
+              if (partial.content !== undefined || partial.title !== undefined) {
+                callbacks.onStreamingArtifact?.(partial);
+              }
+            }
+          }
+        }
+
+        // ---- Complete tool_calls (non-streaming or final snapshot) ----
+        const toolCalls = msg.tool_calls;
+        if (Array.isArray(toolCalls)) {
+          for (const tc of toolCalls as Array<Record<string, unknown>>) {
+            if (tc.name === "update_artifact" && tc.args) {
+              try {
+                const args =
+                  typeof tc.args === "string"
+                    ? (JSON.parse(tc.args) as Record<string, unknown>)
+                    : (tc.args as Record<string, unknown>);
+                callbacks.onStreamingArtifact?.({
+                  type: args.type as "text" | "code" | undefined,
+                  title: args.title as string | undefined,
+                  content: args.content as string | undefined,
+                  language: args.language as string | undefined,
+                });
+              } catch {
+                // ignore
+              }
+            }
+          }
         }
       }
     }