Display canvas link in transcript

webapp/components/enhanced-transcript.tsx

@@ -74,6 +74,27 @@ export function EnhancedTranscript({
     }
   };
 
+  function renderContentWithLinks(text: string) {
+    const urlRegex = /(https?:\/\/[^\s]+)/g;
+    const parts = text.split(urlRegex);
+    return parts.map((part, index) => {
+      if (/^https?:\/\/[^\s]+$/.test(part)) {
+        return (
+          <a
+            key={index}
+            href={part}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-blue-600 underline"
+          >
+            {part}
+          </a>
+        );
+      }
+      return part;
+    });
+  }
+
   return (
     <div className="flex flex-col h-full bg-white rounded-xl border">
       {/* Header */}
@@ -156,12 +177,29 @@ export function EnhancedTranscript({
                         {!isUser && (channelBadge || supervisorBadge)}
                       </div>
                       <div className="whitespace-pre-wrap">
-                        {title}
+                        {renderContentWithLinks(title)}
                       </div>
                     </div>
                   </div>
                 </div>
               );
+            } else if (type === "CANVAS") {
+              const url = data?.url;
+              return (
+                <div key={itemId} className="flex justify-center">
+                  <div className="bg-blue-50 text-blue-800 border border-blue-200 px-3 py-2 rounded-md text-sm">
+                    <a
+                      href={url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="underline flex items-center gap-1"
+                    >
+                      <span>🖼️</span>
+                      <span>{title || "Open canvas"}</span>
+                    </a>
+                  </div>
+                </div>
+              );
             } else if (type === "BREADCRUMB") {
               return (
                 <div

webapp/contexts/TranscriptContext.tsx

@@ -92,6 +92,26 @@ export const TranscriptProvider: FC<PropsWithChildren> = ({ children }) => {
     ]);
   };
 
+  const addTranscriptCanvas: TranscriptContextValue["addTranscriptCanvas"] = (
+    title,
+    url
+  ) => {
+    setTranscriptItems((prev) => [
+      ...prev,
+      {
+        itemId: `canvas-${uuidv4()}`,
+        type: "CANVAS",
+        title,
+        data: { url },
+        expanded: false,
+        timestamp: newTimestampPretty(),
+        createdAtMs: Date.now(),
+        status: "DONE",
+        isHidden: false,
+      },
+    ]);
+  };
+
   const toggleTranscriptItemExpand: TranscriptContextValue["toggleTranscriptItemExpand"] = (itemId) => {
     setTranscriptItems((prev) =>
       prev.map((log) =>
@@ -119,6 +139,7 @@ export const TranscriptProvider: FC<PropsWithChildren> = ({ children }) => {
         addTranscriptMessage,
         updateTranscriptMessage,
         addTranscriptBreadcrumb,
+        addTranscriptCanvas,
         toggleTranscriptItemExpand,
         updateTranscriptItem,
         clearTranscript,

webapp/lib/handle-enhanced-realtime-event.ts

@@ -27,10 +27,11 @@ export default function handleEnhancedRealtimeEvent(
   event: any,
   transcript: TranscriptContextValue
 ) {
-  const { 
-    addTranscriptMessage, 
-    updateTranscriptMessage, 
-    addTranscriptBreadcrumb 
+  const {
+    addTranscriptMessage,
+    updateTranscriptMessage,
+    addTranscriptBreadcrumb,
+    addTranscriptCanvas
   } = transcript;
 
   console.log("Enhanced event handler:", event.type, event);
@@ -408,13 +409,9 @@ export default function handleEnhancedRealtimeEvent(
       break;
 
     case "chat.canvas":
-      addTranscriptBreadcrumb(
-        "📝 Canvas response",
-        {
-          content: event.content,
-          timestamp: event.timestamp,
-          supervisor: event.supervisor || false
-        }
+      addTranscriptCanvas(
+        event.title || "Canvas",
+        event.content
       );
       break;
 

webapp/types/transcript.ts

@@ -2,7 +2,7 @@
 
 export interface TranscriptItem {
   itemId: string;
-  type: "MESSAGE" | "BREADCRUMB";
+  type: "MESSAGE" | "BREADCRUMB" | "CANVAS";
   role?: "user" | "assistant";
   title?: string;
   data?: Record<string, any>;
@@ -27,6 +27,7 @@ export interface TranscriptContextValue {
   ) => void;
   updateTranscriptMessage: (itemId: string, text: string, isDelta: boolean) => void;
   addTranscriptBreadcrumb: (title: string, data?: Record<string, any>) => void;
+  addTranscriptCanvas: (title: string, url: string) => void;
   toggleTranscriptItemExpand: (itemId: string) => void;
   updateTranscriptItem: (itemId: string, updatedProperties: Partial<TranscriptItem>) => void;
   clearTranscript: () => void;