From 035456a0ece3ecffccd5b04dbfe207f53eab6cad Mon Sep 17 00:00:00 2001
From: Nich <nich@nixnet.com>
Date: Mon, 1 Jun 2026 14:34:27 +0100
Subject: [PATCH 1/9] Add generic message embeds and actions

---
 .../mods/workspace/messaging/mod.py           |   8 +-
 .../src/pages/messaging/MessagingView.tsx     |  54 +++++++++
 .../messaging/components/MessageRenderer.tsx  | 108 +++++++++++++++++-
 sdk/studio/src/stores/chatStore.ts            |  40 +++++++
 sdk/studio/src/types/events.ts                |   5 +-
 sdk/studio/src/types/message.ts               |  51 ++++++++-
 tests/mods/test_messaging_content_embeds.py   |  42 +++++++
 7 files changed, 299 insertions(+), 9 deletions(-)
 create mode 100644 tests/mods/test_messaging_content_embeds.py

diff --git a/sdk/src/openagents/mods/workspace/messaging/mod.py b/sdk/src/openagents/mods/workspace/messaging/mod.py
index b086cff82..e40789ef5 100644
--- a/sdk/src/openagents/mods/workspace/messaging/mod.py
+++ b/sdk/src/openagents/mods/workspace/messaging/mod.py
@@ -2274,12 +2274,8 @@ def _extract_content_from_event(self, event: Event) -> Dict[str, Any]:
         # Handle nested content structure (payload.content)
         if "content" in event.payload and isinstance(event.payload["content"], dict):
             content = event.payload["content"]
-            result = {"text": content.get("text", "")}
-
-            # Include files if present
-            if "files" in content and content["files"]:
-                result["files"] = content["files"]
-
+            result = dict(content)
+            result["text"] = result.get("text", "")
             return result
         else:
             return {"text": ""}
diff --git a/sdk/studio/src/pages/messaging/MessagingView.tsx b/sdk/studio/src/pages/messaging/MessagingView.tsx
index 3a8245a77..982aa19d2 100644
--- a/sdk/studio/src/pages/messaging/MessagingView.tsx
+++ b/sdk/studio/src/pages/messaging/MessagingView.tsx
@@ -22,6 +22,8 @@ import {
   extractProjectIdFromChannel,
 } from "@/utils/projectUtils"
 import ProjectChatRoom from "./components/ProjectChatRoom"
+import { EventNames } from "@/types/events"
+import { MessageAction, UnifiedMessage } from "@/types/message"
 
 const ThreadMessagingViewEventBased: React.FC = () => {
   const { t } = useTranslation("messaging")
@@ -544,6 +546,57 @@ const ThreadMessagingViewEventBased: React.FC = () => {
     ]
   )
 
+  const handleMessageAction = useCallback(
+    async (
+      message: UnifiedMessage,
+      action: MessageAction,
+      values: Record<string, any>
+    ) => {
+      if (!currentChannel || !connector) {
+        toast.error("Action responses are only available in channels.")
+        return
+      }
+
+      const actionResponse = {
+        source_message_id: message.id,
+        source_message_sender: message.senderId,
+        action_id: action.id,
+        action_label: action.label,
+        value: action.value || {},
+        inputs: values,
+      }
+      const detailLines = Object.entries({
+        ...(action.value || {}),
+        ...values,
+      }).map(([key, value]) => `${key}: ${String(value)}`)
+
+      const response = await connector.sendEvent({
+        event_name: EventNames.THREAD_CHANNEL_MESSAGE_POST,
+        source_id: connectionStatus.agentId || agentName,
+        destination_id: `channel:${currentChannel}`,
+        payload: {
+          channel: currentChannel,
+          content: {
+            text: [
+              `Action response: ${action.label}`,
+              `source_message_id: ${message.id}`,
+              `action_id: ${action.id}`,
+              ...detailLines,
+            ].join("\n"),
+            schema: "openagents.message.v1",
+            action_response: actionResponse,
+          },
+          message_type: "channel_message",
+        },
+      })
+
+      if (!response?.success) {
+        toast.error(response?.message || "Failed to submit action response.")
+      }
+    },
+    [agentName, connectionStatus.agentId, connector, currentChannel]
+  )
+
   // Handle reply and quote actions
   const startReply = useCallback(
     (messageId: string, text: string, author: string) => {
@@ -894,6 +947,7 @@ const ThreadMessagingViewEventBased: React.FC = () => {
                   isDMChat={!!currentDirectMessage}
                   disableReactions={isProjectChannelActive}
                   disableQuotes={isProjectChannelActive}
+                  onMessageAction={handleMessageAction}
                   networkHost={connector?.getHost()}
                   networkPort={connector?.getPort()}
                   agentSecret={connector?.getSecret()}
diff --git a/sdk/studio/src/pages/messaging/components/MessageRenderer.tsx b/sdk/studio/src/pages/messaging/components/MessageRenderer.tsx
index 2e41ebc67..3021a7a81 100644
--- a/sdk/studio/src/pages/messaging/components/MessageRenderer.tsx
+++ b/sdk/studio/src/pages/messaging/components/MessageRenderer.tsx
@@ -10,7 +10,7 @@
  */
 
 import React, { useState, useRef } from "react"
-import { UnifiedMessage } from "@/types/message"
+import { MessageAction, MessageEmbed, UnifiedMessage } from "@/types/message"
 import { ThreadMessage } from "@/types/events"
 import {
   formatRelativeTimestamp,
@@ -55,6 +55,11 @@ interface MessageRendererProps {
   disableReactions?: boolean
   // Whether to disable quote features (for project channel)
   disableQuotes?: boolean
+  onMessageAction?: (
+    message: UnifiedMessage,
+    action: MessageAction,
+    values: Record<string, any>
+  ) => void
   // Network connection details for attachment downloads
   networkHost?: string
   networkPort?: number
@@ -72,6 +77,7 @@ const MessageRenderer: React.FC<MessageRendererProps> = ({
   isDMChat = false,
   disableReactions = false,
   disableQuotes = false,
+  onMessageAction,
   networkHost,
   networkPort,
   agentSecret,
@@ -106,6 +112,8 @@ const MessageRenderer: React.FC<MessageRendererProps> = ({
         senderId: threadMsg.sender_id,
         timestamp: threadMsg.timestamp,
         content: threadMsg.content?.text || "",
+        embeds: threadMsg.content?.embeds || [],
+        actions: threadMsg.content?.actions || [],
         replyToId: threadMsg.reply_to_id,
         reactions: threadMsg.reactions,
         attachments,
@@ -118,6 +126,8 @@ const MessageRenderer: React.FC<MessageRendererProps> = ({
         senderId: unifiedMsg.senderId,
         timestamp: unifiedMsg.timestamp,
         content: unifiedMsg.content,
+        embeds: unifiedMsg.embeds || [],
+        actions: unifiedMsg.actions || [],
         replyToId: unifiedMsg.replyToId,
         reactions: unifiedMsg.reactions,
         attachments: unifiedMsg.attachments,
@@ -203,6 +213,99 @@ const MessageRenderer: React.FC<MessageRendererProps> = ({
     setCollapsedThreads(newCollapsed)
   }
 
+  const collectActionValues = (action: MessageAction): Record<string, any> | null => {
+    const values: Record<string, any> = {}
+    for (const requirement of action.requires || []) {
+      if (requirement.type === "boolean") {
+        values[requirement.name] = true
+        continue
+      }
+      const label = requirement.label || requirement.name
+      const value = window.prompt(label)
+      if (requirement.required && (!value || !value.trim())) {
+        return null
+      }
+      values[requirement.name] = value || ""
+    }
+    return values
+  }
+
+  const handleMessageAction = (message: UnifiedMessage, action: MessageAction) => {
+    if (action.type === "link" && action.href) {
+      window.open(action.href, "_blank", "noopener,noreferrer")
+      return
+    }
+    const values = collectActionValues(action)
+    if (values === null) {
+      return
+    }
+    onMessageAction?.(message, action, values)
+  }
+
+  const renderMessageEmbeds = (embeds?: MessageEmbed[]) => {
+    if (!embeds || embeds.length === 0) return null
+    return (
+      <div className="mt-3 space-y-2">
+        {embeds.map((embed, index) => (
+          <div
+            key={embed.id || `${embed.type}-${index}`}
+            className="rounded-lg border border-slate-200 bg-white/70 p-3 text-sm dark:border-slate-700 dark:bg-slate-900/50"
+          >
+            <div className="flex items-center justify-between gap-2">
+              <div className="font-medium text-slate-900 dark:text-slate-100">
+                {embed.title || embed.type}
+              </div>
+              <div className="rounded bg-slate-100 px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-slate-500 dark:bg-slate-800 dark:text-slate-400">
+                {embed.type}
+              </div>
+            </div>
+            {embed.body && (
+              <div className="mt-2 text-slate-700 dark:text-slate-300">
+                <MarkdownContent content={embed.body} />
+              </div>
+            )}
+            {embed.fields && embed.fields.length > 0 && (
+              <dl className="mt-2 grid gap-2 sm:grid-cols-2">
+                {embed.fields.map((field, fieldIndex) => (
+                  <div key={`${field.label}-${fieldIndex}`}>
+                    <dt className="text-xs font-medium text-slate-500 dark:text-slate-400">
+                      {field.label}
+                    </dt>
+                    <dd className="text-sm text-slate-800 dark:text-slate-200">
+                      {field.value}
+                    </dd>
+                  </div>
+                ))}
+              </dl>
+            )}
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  const renderMessageActions = (message: UnifiedMessage, actions?: MessageAction[]) => {
+    if (!actions || actions.length === 0 || !onMessageAction) return null
+    return (
+      <div className="mt-3 flex flex-wrap gap-2">
+        {actions.map((action) => {
+          const isDanger = action.style === "danger"
+          const isPrimary = action.style === "primary"
+          return (
+            <Button
+              key={action.id}
+              variant={isDanger ? "destructive" : isPrimary ? "primary" : "outline"}
+              size="sm"
+              onClick={() => handleMessageAction(message, action)}
+            >
+              {action.label}
+            </Button>
+          )
+        })}
+      </div>
+    )
+  }
+
   // For compatibility with old ThreadMessage format, need to build thread structure
   const buildThreadStructureForThreadMessages = (
     threadMessages: ThreadMessage[]
@@ -312,6 +415,7 @@ const MessageRenderer: React.FC<MessageRendererProps> = ({
                   agentSecret={agentSecret}
                 />
               )}
+            {renderMessageEmbeds(messageProps.embeds)}
           </div>
 
           {/* Reaction display */}
@@ -510,6 +614,8 @@ const MessageRenderer: React.FC<MessageRendererProps> = ({
                 agentSecret={agentSecret}
               />
             )}
+            {renderMessageEmbeds(message.embeds)}
+            {renderMessageActions(message, message.actions)}
           </div>
 
           {/* Reaction display */}
diff --git a/sdk/studio/src/stores/chatStore.ts b/sdk/studio/src/stores/chatStore.ts
index c8891ce1d..2e5b81b88 100644
--- a/sdk/studio/src/stores/chatStore.ts
+++ b/sdk/studio/src/stores/chatStore.ts
@@ -2264,6 +2264,8 @@ export const useChatStore = create<ChatState>((set, get) => ({
         }
 
         if (messageData.channel && messageData.content) {
+          const contentObject =
+            typeof messageData.content === "object" ? messageData.content : undefined;
           // Construct unified message format
           const unifiedMessage: UnifiedMessage = {
             id:
@@ -2277,6 +2279,14 @@ export const useChatStore = create<ChatState>((set, get) => ({
                 : messageData.content.text || "",
             type: messageData.message_type,
             channel: messageData.channel,
+            schema: contentObject?.schema,
+            embeds: Array.isArray(contentObject?.embeds)
+              ? contentObject.embeds
+              : undefined,
+            actions: Array.isArray(contentObject?.actions)
+              ? contentObject.actions
+              : undefined,
+            rawContent: contentObject,
             replyToId: messageData.reply_to_id || event.reply_to_id,
             threadLevel: messageData.thread_level || 1,
             reactions: messageData.reactions,
@@ -2367,6 +2377,8 @@ export const useChatStore = create<ChatState>((set, get) => ({
         const projectId = messageData.project_id;
         const senderId = messageData.sender_id;
         const content = messageData.content;
+        const contentObject =
+          typeof content === "object" ? content : undefined;
         
         if (projectId && content) {
           // Find the project channel
@@ -2392,6 +2404,14 @@ export const useChatStore = create<ChatState>((set, get) => ({
               content: messageText,
               type: "channel_message",
               channel: projectChannel,
+              schema: contentObject?.schema,
+              embeds: Array.isArray(contentObject?.embeds)
+                ? contentObject.embeds
+                : undefined,
+              actions: Array.isArray(contentObject?.actions)
+                ? contentObject.actions
+                : undefined,
+              rawContent: contentObject,
               replyToId: messageData.reply_to_id,
             };
             
@@ -2425,6 +2445,8 @@ export const useChatStore = create<ChatState>((set, get) => ({
         });
 
         if (messageData.channel && messageData.content) {
+          const contentObject =
+            typeof messageData.content === "object" ? messageData.content : undefined;
           // Construct unified message format
           // Fix: use correct sender ID - event.source_id or event.sender_id is the actual reply author
           // messageData.original_sender refers to the original author of the replied message, not the reply sender
@@ -2440,6 +2462,14 @@ export const useChatStore = create<ChatState>((set, get) => ({
                 : messageData.content.text || "",
             type: messageData.message_type,
             channel: messageData.channel,
+            schema: contentObject?.schema,
+            embeds: Array.isArray(contentObject?.embeds)
+              ? contentObject.embeds
+              : undefined,
+            actions: Array.isArray(contentObject?.actions)
+              ? contentObject.actions
+              : undefined,
+            rawContent: contentObject,
             replyToId: messageData.reply_to_id,
             threadLevel: messageData.thread_level || 1,
             reactions: messageData.reactions,
@@ -2581,6 +2611,8 @@ export const useChatStore = create<ChatState>((set, get) => ({
 
         // Construct unified message format if content exists
         if (content || messageData.content) {
+          const contentObject =
+            typeof messageData.content === "object" ? messageData.content : undefined;
           // Format timestamp: convert Unix timestamp to ISO string if needed
           let timestampStr = "";
           if (event.timestamp) {
@@ -2605,6 +2637,14 @@ export const useChatStore = create<ChatState>((set, get) => ({
             timestamp: timestampStr,
             content: content,
             type: messageData.message_type || "direct_message",
+            schema: contentObject?.schema,
+            embeds: Array.isArray(contentObject?.embeds)
+              ? contentObject.embeds
+              : undefined,
+            actions: Array.isArray(contentObject?.actions)
+              ? contentObject.actions
+              : undefined,
+            rawContent: contentObject,
             targetUserId: messageData.target_agent_id,
             reactions: messageData.reactions,
           };
diff --git a/sdk/studio/src/types/events.ts b/sdk/studio/src/types/events.ts
index c34864a7b..c486da11c 100644
--- a/sdk/studio/src/types/events.ts
+++ b/sdk/studio/src/types/events.ts
@@ -76,6 +76,9 @@ export interface ThreadMessage {
   timestamp: string;
   content: {
     text: string;
+    schema?: string;
+    embeds?: Array<Record<string, any>>;
+    actions?: Array<Record<string, any>>;
     files?: Array<{
       file_id: string;
       filename: string;
@@ -128,4 +131,4 @@ export interface NetworkInfo {
   mode: 'centralized' | 'decentralized';
   mods: string[];
   agent_count: number;
-}
\ No newline at end of file
+}
diff --git a/sdk/studio/src/types/message.ts b/sdk/studio/src/types/message.ts
index 20fc7843c..22692ee18 100644
--- a/sdk/studio/src/types/message.ts
+++ b/sdk/studio/src/types/message.ts
@@ -4,12 +4,51 @@
  */
 
 // Unified message type - for internal frontend use
+export interface MessageEmbed {
+  id?: string;
+  type: string;
+  title?: string;
+  body?: string;
+  fields?: Array<{
+    label: string;
+    value: string;
+  }>;
+  data?: Record<string, any>;
+  [key: string]: any;
+}
+
+export interface MessageActionInput {
+  name: string;
+  type: 'text' | 'textarea' | 'number' | 'boolean' | 'select' | string;
+  label?: string;
+  required?: boolean;
+  options?: Array<{
+    label: string;
+    value: string;
+  }>;
+}
+
+export interface MessageAction {
+  id: string;
+  type: 'submit' | 'link' | string;
+  label: string;
+  style?: 'primary' | 'secondary' | 'danger' | string;
+  href?: string;
+  value?: Record<string, any>;
+  requires?: MessageActionInput[];
+  [key: string]: any;
+}
+
 export interface UnifiedMessage {
   // Basic information
   id: string;
   senderId: string;
   timestamp: string;
   content: string;
+  schema?: string;
+  embeds?: MessageEmbed[];
+  actions?: MessageAction[];
+  rawContent?: Record<string, any>;
 
   // Message type
   type: 'direct_message' | 'channel_message' | 'reply_message';
@@ -59,6 +98,9 @@ export interface RawThreadMessage {
   timestamp: string;
   content: {
     text: string;
+    schema?: string;
+    embeds?: MessageEmbed[];
+    actions?: MessageAction[];
     files?: Array<{
       file_id: string;
       filename: string;
@@ -127,11 +169,18 @@ export class MessageAdapter {
       }
     }
 
+    const contentObject =
+      raw.content && typeof raw.content === 'object' ? raw.content as Record<string, any> : undefined;
+
     return {
       id: (isDirectMessage ? raw.event_id : raw.message_id) || '',
       senderId: (isDirectMessage ? raw.source_id : raw.sender_id) || '',
       timestamp: raw.timestamp, // 10 digits vs 13 digits,
       content: isDirectMessage ? raw.payload.content.text : content,
+      schema: contentObject?.schema,
+      embeds: Array.isArray(contentObject?.embeds) ? contentObject.embeds : undefined,
+      actions: Array.isArray(contentObject?.actions) ? contentObject.actions : undefined,
+      rawContent: contentObject,
       type: isDirectMessage ? raw.payload.message_type : raw.message_type,
       channel: isDirectMessage ? '' : raw.channel,
       targetUserId: isDirectMessage ? raw.payload.target_agent_id : raw.target_agent_id,
@@ -347,4 +396,4 @@ export class MessageUtils {
 
     return { structure, rootMessageIds: rootMessages };
   }
-}
\ No newline at end of file
+}
diff --git a/tests/mods/test_messaging_content_embeds.py b/tests/mods/test_messaging_content_embeds.py
new file mode 100644
index 000000000..0b8568c4a
--- /dev/null
+++ b/tests/mods/test_messaging_content_embeds.py
@@ -0,0 +1,42 @@
+from openagents.models.event import Event
+from openagents.mods.workspace.messaging.mod import ThreadMessagingNetworkMod
+
+
+def test_extract_content_preserves_arbitrary_message_embeds_and_actions():
+    mod = ThreadMessagingNetworkMod()
+    event = Event(
+        event_name="thread.channel_message.post",
+        source_id="agent-a",
+        destination_id="channel:approvals",
+        payload={
+            "channel": "approvals",
+            "message_type": "channel_message",
+            "content": {
+                "text": "Approval requested",
+                "schema": "openagents.message.v1",
+                "embeds": [
+                    {
+                        "id": "approval-1",
+                        "type": "approval_request",
+                        "title": "Human approval requested",
+                    }
+                ],
+                "actions": [
+                    {
+                        "id": "approve",
+                        "type": "submit",
+                        "label": "Yes, approved",
+                    }
+                ],
+                "custom": {"vendor": "example"},
+            },
+        },
+    )
+
+    content = mod._extract_content_from_event(event)
+
+    assert content["text"] == "Approval requested"
+    assert content["schema"] == "openagents.message.v1"
+    assert content["embeds"][0]["type"] == "approval_request"
+    assert content["actions"][0]["id"] == "approve"
+    assert content["custom"] == {"vendor": "example"}

From ac8f4b6909d35a6471d4a737218a4f05ef42cabd Mon Sep 17 00:00:00 2001
From: Nich <nich@nixnet.com>
Date: Mon, 1 Jun 2026 15:20:50 +0100
Subject: [PATCH 2/9] Address structured message review feedback

---
 .../mods/workspace/messaging/mod.py           |  8 ++-
 .../src/pages/messaging/MessagingView.tsx     | 46 ++++++++------
 .../messaging/components/MessageRenderer.tsx  | 13 ++--
 sdk/studio/src/stores/chatStore.ts            | 63 +++++++------------
 sdk/studio/src/types/events.ts                |  6 +-
 sdk/studio/src/types/message.ts               | 44 ++++++-------
 6 files changed, 90 insertions(+), 90 deletions(-)

diff --git a/sdk/src/openagents/mods/workspace/messaging/mod.py b/sdk/src/openagents/mods/workspace/messaging/mod.py
index e40789ef5..147d5fbe5 100644
--- a/sdk/src/openagents/mods/workspace/messaging/mod.py
+++ b/sdk/src/openagents/mods/workspace/messaging/mod.py
@@ -2258,15 +2258,17 @@ def _extract_text_from_event(self, event: Event) -> str:
             return ""
 
     def _extract_content_from_event(self, event: Event) -> Dict[str, Any]:
-        """Extract full content (text and files) from an Event object's payload.
+        """Extract message content from an Event object's payload.
 
-        This handles the nested content structure: payload.content
+        This preserves all fields in the nested payload.content mapping, such
+        as text, files, schema, embeds, actions, and custom extension fields,
+        while ensuring the returned dict always has a text key.
 
         Args:
             event: The Event object to extract content from
 
         Returns:
-            Dict with text and optionally files
+            Dict containing all payload.content fields plus a guaranteed text field
         """
         if not event or not event.payload:
             return {"text": ""}
diff --git a/sdk/studio/src/pages/messaging/MessagingView.tsx b/sdk/studio/src/pages/messaging/MessagingView.tsx
index 982aa19d2..aeb3fa1d6 100644
--- a/sdk/studio/src/pages/messaging/MessagingView.tsx
+++ b/sdk/studio/src/pages/messaging/MessagingView.tsx
@@ -570,28 +570,34 @@ const ThreadMessagingViewEventBased: React.FC = () => {
         ...values,
       }).map(([key, value]) => `${key}: ${String(value)}`)
 
-      const response = await connector.sendEvent({
-        event_name: EventNames.THREAD_CHANNEL_MESSAGE_POST,
-        source_id: connectionStatus.agentId || agentName,
-        destination_id: `channel:${currentChannel}`,
-        payload: {
-          channel: currentChannel,
-          content: {
-            text: [
-              `Action response: ${action.label}`,
-              `source_message_id: ${message.id}`,
-              `action_id: ${action.id}`,
-              ...detailLines,
-            ].join("\n"),
-            schema: "openagents.message.v1",
-            action_response: actionResponse,
+      try {
+        const response = await connector.sendEvent({
+          event_name: EventNames.THREAD_CHANNEL_MESSAGE_POST,
+          source_id: connectionStatus.agentId || agentName,
+          destination_id: `channel:${currentChannel}`,
+          payload: {
+            channel: currentChannel,
+            content: {
+              text: [
+                `Action response: ${action.label}`,
+                `source_message_id: ${message.id}`,
+                `action_id: ${action.id}`,
+                ...detailLines,
+              ].join("\n"),
+              schema: "openagents.message.v1",
+              action_response: actionResponse,
+            },
+            message_type: "channel_message",
           },
-          message_type: "channel_message",
-        },
-      })
+        })
 
-      if (!response?.success) {
-        toast.error(response?.message || "Failed to submit action response.")
+        if (!response?.success) {
+          toast.error(response?.message || "Failed to submit action response.")
+        }
+      } catch (error) {
+        const message =
+          error instanceof Error ? error.message : "Failed to submit action response."
+        toast.error(message)
       }
     },
     [agentName, connectionStatus.agentId, connector, currentChannel]
diff --git a/sdk/studio/src/pages/messaging/components/MessageRenderer.tsx b/sdk/studio/src/pages/messaging/components/MessageRenderer.tsx
index 3021a7a81..c90529065 100644
--- a/sdk/studio/src/pages/messaging/components/MessageRenderer.tsx
+++ b/sdk/studio/src/pages/messaging/components/MessageRenderer.tsx
@@ -217,7 +217,7 @@ const MessageRenderer: React.FC<MessageRendererProps> = ({
     const values: Record<string, any> = {}
     for (const requirement of action.requires || []) {
       if (requirement.type === "boolean") {
-        values[requirement.name] = true
+        values[requirement.name] = window.confirm(requirement.label || requirement.name)
         continue
       }
       const label = requirement.label || requirement.name
@@ -239,7 +239,9 @@ const MessageRenderer: React.FC<MessageRendererProps> = ({
     if (values === null) {
       return
     }
-    onMessageAction?.(message, action, values)
+    if (onMessageAction) {
+      onMessageAction(message, action, values)
+    }
   }
 
   const renderMessageEmbeds = (embeds?: MessageEmbed[]) => {
@@ -285,10 +287,13 @@ const MessageRenderer: React.FC<MessageRendererProps> = ({
   }
 
   const renderMessageActions = (message: UnifiedMessage, actions?: MessageAction[]) => {
-    if (!actions || actions.length === 0 || !onMessageAction) return null
+    const renderableActions = actions?.filter(
+      (action) => (action.type === "link" && action.href) || onMessageAction
+    )
+    if (!renderableActions || renderableActions.length === 0) return null
     return (
       <div className="mt-3 flex flex-wrap gap-2">
-        {actions.map((action) => {
+        {renderableActions.map((action) => {
           const isDanger = action.style === "danger"
           const isPrimary = action.style === "primary"
           return (
diff --git a/sdk/studio/src/stores/chatStore.ts b/sdk/studio/src/stores/chatStore.ts
index 2e5b81b88..d9634f036 100644
--- a/sdk/studio/src/stores/chatStore.ts
+++ b/sdk/studio/src/stores/chatStore.ts
@@ -8,6 +8,25 @@ import {
 import { eventRouter } from "@/services/eventRouter";
 import { notificationService } from "@/services/notificationService";
 
+const asContentObject = (value: any): Record<string, any> | undefined =>
+  value && typeof value === "object" && !Array.isArray(value)
+    ? value
+    : undefined;
+
+const structuredMessageFields = (content: any) => {
+  const contentObject = asContentObject(content);
+  return {
+    schema: contentObject?.schema,
+    embeds: Array.isArray(contentObject?.embeds)
+      ? contentObject.embeds
+      : undefined,
+    actions: Array.isArray(contentObject?.actions)
+      ? contentObject.actions
+      : undefined,
+    rawContent: contentObject,
+  };
+};
+
 // Message sending status
 export type MessageStatus = "sending" | "sent" | "failed";
 
@@ -2264,8 +2283,6 @@ export const useChatStore = create<ChatState>((set, get) => ({
         }
 
         if (messageData.channel && messageData.content) {
-          const contentObject =
-            typeof messageData.content === "object" ? messageData.content : undefined;
           // Construct unified message format
           const unifiedMessage: UnifiedMessage = {
             id:
@@ -2279,14 +2296,7 @@ export const useChatStore = create<ChatState>((set, get) => ({
                 : messageData.content.text || "",
             type: messageData.message_type,
             channel: messageData.channel,
-            schema: contentObject?.schema,
-            embeds: Array.isArray(contentObject?.embeds)
-              ? contentObject.embeds
-              : undefined,
-            actions: Array.isArray(contentObject?.actions)
-              ? contentObject.actions
-              : undefined,
-            rawContent: contentObject,
+            ...structuredMessageFields(messageData.content),
             replyToId: messageData.reply_to_id || event.reply_to_id,
             threadLevel: messageData.thread_level || 1,
             reactions: messageData.reactions,
@@ -2377,8 +2387,6 @@ export const useChatStore = create<ChatState>((set, get) => ({
         const projectId = messageData.project_id;
         const senderId = messageData.sender_id;
         const content = messageData.content;
-        const contentObject =
-          typeof content === "object" ? content : undefined;
         
         if (projectId && content) {
           // Find the project channel
@@ -2404,14 +2412,7 @@ export const useChatStore = create<ChatState>((set, get) => ({
               content: messageText,
               type: "channel_message",
               channel: projectChannel,
-              schema: contentObject?.schema,
-              embeds: Array.isArray(contentObject?.embeds)
-                ? contentObject.embeds
-                : undefined,
-              actions: Array.isArray(contentObject?.actions)
-                ? contentObject.actions
-                : undefined,
-              rawContent: contentObject,
+              ...structuredMessageFields(content),
               replyToId: messageData.reply_to_id,
             };
             
@@ -2445,8 +2446,6 @@ export const useChatStore = create<ChatState>((set, get) => ({
         });
 
         if (messageData.channel && messageData.content) {
-          const contentObject =
-            typeof messageData.content === "object" ? messageData.content : undefined;
           // Construct unified message format
           // Fix: use correct sender ID - event.source_id or event.sender_id is the actual reply author
           // messageData.original_sender refers to the original author of the replied message, not the reply sender
@@ -2462,14 +2461,7 @@ export const useChatStore = create<ChatState>((set, get) => ({
                 : messageData.content.text || "",
             type: messageData.message_type,
             channel: messageData.channel,
-            schema: contentObject?.schema,
-            embeds: Array.isArray(contentObject?.embeds)
-              ? contentObject.embeds
-              : undefined,
-            actions: Array.isArray(contentObject?.actions)
-              ? contentObject.actions
-              : undefined,
-            rawContent: contentObject,
+            ...structuredMessageFields(messageData.content),
             replyToId: messageData.reply_to_id,
             threadLevel: messageData.thread_level || 1,
             reactions: messageData.reactions,
@@ -2611,8 +2603,6 @@ export const useChatStore = create<ChatState>((set, get) => ({
 
         // Construct unified message format if content exists
         if (content || messageData.content) {
-          const contentObject =
-            typeof messageData.content === "object" ? messageData.content : undefined;
           // Format timestamp: convert Unix timestamp to ISO string if needed
           let timestampStr = "";
           if (event.timestamp) {
@@ -2637,14 +2627,7 @@ export const useChatStore = create<ChatState>((set, get) => ({
             timestamp: timestampStr,
             content: content,
             type: messageData.message_type || "direct_message",
-            schema: contentObject?.schema,
-            embeds: Array.isArray(contentObject?.embeds)
-              ? contentObject.embeds
-              : undefined,
-            actions: Array.isArray(contentObject?.actions)
-              ? contentObject.actions
-              : undefined,
-            rawContent: contentObject,
+            ...structuredMessageFields(messageData.content),
             targetUserId: messageData.target_agent_id,
             reactions: messageData.reactions,
           };
diff --git a/sdk/studio/src/types/events.ts b/sdk/studio/src/types/events.ts
index c486da11c..1dd04a8f7 100644
--- a/sdk/studio/src/types/events.ts
+++ b/sdk/studio/src/types/events.ts
@@ -2,6 +2,8 @@
  * TypeScript type definitions for the new OpenAgents event system
  */
 
+import type { MessageAction, MessageEmbed } from './message';
+
 export interface EventResponse {
   success: boolean;
   message?: string;
@@ -77,8 +79,8 @@ export interface ThreadMessage {
   content: {
     text: string;
     schema?: string;
-    embeds?: Array<Record<string, any>>;
-    actions?: Array<Record<string, any>>;
+    embeds?: MessageEmbed[];
+    actions?: MessageAction[];
     files?: Array<{
       file_id: string;
       filename: string;
diff --git a/sdk/studio/src/types/message.ts b/sdk/studio/src/types/message.ts
index 22692ee18..a499eae6c 100644
--- a/sdk/studio/src/types/message.ts
+++ b/sdk/studio/src/types/message.ts
@@ -4,6 +4,8 @@
  */
 
 // Unified message type - for internal frontend use
+type ExtensibleString<T extends string> = T | (string & {});
+
 export interface MessageEmbed {
   id?: string;
   type: string;
@@ -19,7 +21,7 @@ export interface MessageEmbed {
 
 export interface MessageActionInput {
   name: string;
-  type: 'text' | 'textarea' | 'number' | 'boolean' | 'select' | string;
+  type: ExtensibleString<'text' | 'textarea' | 'number' | 'boolean' | 'select'>;
   label?: string;
   required?: boolean;
   options?: Array<{
@@ -30,9 +32,9 @@ export interface MessageActionInput {
 
 export interface MessageAction {
   id: string;
-  type: 'submit' | 'link' | string;
+  type: ExtensibleString<'submit' | 'link'>;
   label: string;
-  style?: 'primary' | 'secondary' | 'danger' | string;
+  style?: ExtensibleString<'primary' | 'secondary' | 'danger'>;
   href?: string;
   value?: Record<string, any>;
   requires?: MessageActionInput[];
@@ -135,10 +137,15 @@ export class MessageAdapter {
    * Convert RawThreadMessage to UnifiedMessage
    */
   static fromRawThreadMessage(raw: RawThreadMessage): UnifiedMessage {
+    const isDirectMessage = raw?.payload?.message_type === 'direct_message';
+    const rawContent = isDirectMessage ? raw.payload?.content : raw.content;
+    const contentObject =
+      rawContent && typeof rawContent === 'object' ? rawContent as Record<string, any> : undefined;
+
     // Extract files from content.files
     const attachments: UnifiedMessage['attachments'] =
-      raw.content && typeof raw.content === 'object' && raw.content.files
-        ? raw.content.files.map((f: any) => ({
+      contentObject?.files
+        ? contentObject.files.map((f: any) => ({
             fileId: f.file_id,
             filename: f.filename,
             size: f.size,
@@ -147,36 +154,31 @@ export class MessageAdapter {
           }))
         : undefined;
 
-    const isDirectMessage = raw?.payload?.message_type === 'direct_message';
-
     // Handle different content formats
     let content = '';
-    if (raw.content) {
-      if (typeof raw.content === 'string') {
+    if (rawContent) {
+      if (typeof rawContent === 'string') {
         // content is a string
-        content = raw.content;
-      } else if (typeof raw.content === 'object' && raw.content.text !== undefined) {
+        content = rawContent;
+      } else if (typeof rawContent === 'object' && rawContent.text !== undefined) {
         // content is an object with text field (even if text is empty string it's valid)
-        content = raw.content.text;
-      } else if (typeof raw.content === 'object') {
+        content = rawContent.text;
+      } else if (typeof rawContent === 'object') {
         // content is an object but without text field, try other fields or convert
-        console.warn('MessageAdapter: Content object missing text field:', raw.content);
-        content = raw.content.message || raw.content.value || String(raw.content);
+        console.warn('MessageAdapter: Content object missing text field:', rawContent);
+        content = rawContent.message || rawContent.value || String(rawContent);
       } else {
         // Other cases, try to convert to string
-        console.warn('MessageAdapter: Unexpected content format:', raw.content);
-        content = String(raw.content);
+        console.warn('MessageAdapter: Unexpected content format:', rawContent);
+        content = String(rawContent);
       }
     }
 
-    const contentObject =
-      raw.content && typeof raw.content === 'object' ? raw.content as Record<string, any> : undefined;
-
     return {
       id: (isDirectMessage ? raw.event_id : raw.message_id) || '',
       senderId: (isDirectMessage ? raw.source_id : raw.sender_id) || '',
       timestamp: raw.timestamp, // 10 digits vs 13 digits,
-      content: isDirectMessage ? raw.payload.content.text : content,
+      content,
       schema: contentObject?.schema,
       embeds: Array.isArray(contentObject?.embeds) ? contentObject.embeds : undefined,
       actions: Array.isArray(contentObject?.actions) ? contentObject.actions : undefined,

From 10effb3588b132965ab10f8bfe3b1b2e151da4ef Mon Sep 17 00:00:00 2001
From: Nich <nich@nixnet.com>
Date: Mon, 1 Jun 2026 15:46:12 +0100
Subject: [PATCH 3/9] Replace action prompts with input dialog

---
 .../messaging/components/MessageRenderer.tsx  | 204 ++++++++++++++++--
 1 file changed, 184 insertions(+), 20 deletions(-)

diff --git a/sdk/studio/src/pages/messaging/components/MessageRenderer.tsx b/sdk/studio/src/pages/messaging/components/MessageRenderer.tsx
index c90529065..dc2e6d72c 100644
--- a/sdk/studio/src/pages/messaging/components/MessageRenderer.tsx
+++ b/sdk/studio/src/pages/messaging/components/MessageRenderer.tsx
@@ -89,6 +89,14 @@ const MessageRenderer: React.FC<MessageRendererProps> = ({
   const [collapsedThreads, setCollapsedThreads] = useState<Set<string>>(
     new Set()
   )
+  const [pendingAction, setPendingAction] = useState<{
+    message: UnifiedMessage
+    action: MessageAction
+  } | null>(null)
+  const [actionInputValues, setActionInputValues] = useState<Record<string, any>>(
+    {}
+  )
+  const [actionInputError, setActionInputError] = useState<string | null>(null)
   const messagesEndRef = useRef<HTMLDivElement>(null)
 
   // Remove auto-scroll logic from MessageRenderer - MessagingView handles this
@@ -213,37 +221,189 @@ const MessageRenderer: React.FC<MessageRendererProps> = ({
     setCollapsedThreads(newCollapsed)
   }
 
-  const collectActionValues = (action: MessageAction): Record<string, any> | null => {
-    const values: Record<string, any> = {}
-    for (const requirement of action.requires || []) {
-      if (requirement.type === "boolean") {
-        values[requirement.name] = window.confirm(requirement.label || requirement.name)
-        continue
-      }
-      const label = requirement.label || requirement.name
-      const value = window.prompt(label)
-      if (requirement.required && (!value || !value.trim())) {
-        return null
-      }
-      values[requirement.name] = value || ""
-    }
-    return values
-  }
-
   const handleMessageAction = (message: UnifiedMessage, action: MessageAction) => {
     if (action.type === "link" && action.href) {
       window.open(action.href, "_blank", "noopener,noreferrer")
       return
     }
-    const values = collectActionValues(action)
-    if (values === null) {
+    if (action.requires && action.requires.length > 0) {
+      const initialValues = action.requires.reduce<Record<string, any>>(
+        (values, requirement) => {
+          values[requirement.name] = requirement.type === "boolean" ? false : ""
+          return values
+        },
+        {}
+      )
+      setActionInputValues(initialValues)
+      setActionInputError(null)
+      setPendingAction({ message, action })
       return
     }
     if (onMessageAction) {
-      onMessageAction(message, action, values)
+      onMessageAction(message, action, {})
     }
   }
 
+  const updateActionInputValue = (name: string, value: any) => {
+    setActionInputValues((current) => ({
+      ...current,
+      [name]: value,
+    }))
+    setActionInputError(null)
+  }
+
+  const submitPendingAction = () => {
+    if (!pendingAction || !onMessageAction) return
+
+    for (const requirement of pendingAction.action.requires || []) {
+      const value = actionInputValues[requirement.name]
+      const isEmpty =
+        value === undefined ||
+        value === null ||
+        (typeof value === "string" && value.trim() === "")
+      if (requirement.required && isEmpty) {
+        setActionInputError(`${requirement.label || requirement.name} is required.`)
+        return
+      }
+    }
+
+    onMessageAction(
+      pendingAction.message,
+      pendingAction.action,
+      actionInputValues
+    )
+    setPendingAction(null)
+    setActionInputValues({})
+    setActionInputError(null)
+  }
+
+  const renderActionRequirementInput = (
+    requirement: NonNullable<MessageAction["requires"]>[number]
+  ) => {
+    const value = actionInputValues[requirement.name]
+    const label = requirement.label || requirement.name
+    const id = `message-action-${pendingAction?.action.id}-${requirement.name}`
+
+    if (requirement.type === "textarea") {
+      return (
+        <textarea
+          id={id}
+          value={value || ""}
+          onChange={(event) =>
+            updateActionInputValue(requirement.name, event.target.value)
+          }
+          className="min-h-24 w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/30 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100"
+        />
+      )
+    }
+
+    if (requirement.type === "boolean") {
+      return (
+        <input
+          id={id}
+          type="checkbox"
+          checked={Boolean(value)}
+          onChange={(event) =>
+            updateActionInputValue(requirement.name, event.target.checked)
+          }
+          className="h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500"
+        />
+      )
+    }
+
+    if (requirement.type === "select") {
+      return (
+        <select
+          id={id}
+          value={value || ""}
+          onChange={(event) =>
+            updateActionInputValue(requirement.name, event.target.value)
+          }
+          className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/30 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100"
+        >
+          <option value="">Select {label}</option>
+          {(requirement.options || []).map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+      )
+    }
+
+    return (
+      <input
+        id={id}
+        type={requirement.type === "number" ? "number" : "text"}
+        value={value || ""}
+        onChange={(event) =>
+          updateActionInputValue(
+            requirement.name,
+            requirement.type === "number"
+              ? event.target.valueAsNumber
+              : event.target.value
+          )
+        }
+        className="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/30 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100"
+      />
+    )
+  }
+
+  const renderActionInputDialog = () => {
+    if (!pendingAction) return null
+
+    return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
+        <div className="w-full max-w-md rounded-lg border border-slate-200 bg-white p-4 shadow-xl dark:border-slate-700 dark:bg-slate-900">
+          <div className="text-base font-semibold text-slate-900 dark:text-slate-100">
+            {pendingAction.action.label}
+          </div>
+          <div className="mt-1 text-sm text-slate-600 dark:text-slate-400">
+            Provide the required details before submitting this action.
+          </div>
+          <div className="mt-4 space-y-3">
+            {(pendingAction.action.requires || []).map((requirement) => (
+              <div key={requirement.name} className="space-y-1.5">
+                <label
+                  htmlFor={`message-action-${pendingAction.action.id}-${requirement.name}`}
+                  className="block text-sm font-medium text-slate-700 dark:text-slate-300"
+                >
+                  {requirement.label || requirement.name}
+                  {requirement.required && (
+                    <span className="ml-1 text-red-500">*</span>
+                  )}
+                </label>
+                {renderActionRequirementInput(requirement)}
+              </div>
+            ))}
+          </div>
+          {actionInputError && (
+            <div className="mt-3 text-sm text-red-600 dark:text-red-400">
+              {actionInputError}
+            </div>
+          )}
+          <div className="mt-5 flex justify-end gap-2">
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => {
+                setPendingAction(null)
+                setActionInputValues({})
+                setActionInputError(null)
+              }}
+            >
+              Cancel
+            </Button>
+            <Button type="button" size="sm" onClick={submitPendingAction}>
+              Submit
+            </Button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
   const renderMessageEmbeds = (embeds?: MessageEmbed[]) => {
     if (!embeds || embeds.length === 0) return null
     return (
@@ -299,6 +459,7 @@ const MessageRenderer: React.FC<MessageRendererProps> = ({
           return (
             <Button
               key={action.id}
+              type="button"
               variant={isDanger ? "destructive" : isPrimary ? "primary" : "outline"}
               size="sm"
               onClick={() => handleMessageAction(message, action)}
@@ -810,6 +971,7 @@ const MessageRenderer: React.FC<MessageRendererProps> = ({
         {rootMessageIds.map((messageId, index) =>
           renderThreadMessage(messageId, structure, 0, index)
         )}
+        {renderActionInputDialog()}
         <div ref={messagesEndRef} />
       </div>
     )
@@ -825,6 +987,7 @@ const MessageRenderer: React.FC<MessageRendererProps> = ({
           {unifiedMessages.map((message, index) =>
             renderUnifiedMessage(message, 0, undefined, index)
           )}
+          {renderActionInputDialog()}
           <div ref={messagesEndRef} />
         </div>
       )
@@ -838,6 +1001,7 @@ const MessageRenderer: React.FC<MessageRendererProps> = ({
           {messageTree.map((node, index) =>
             renderUnifiedMessage(node.message, 0, node.children, index)
           )}
+          {renderActionInputDialog()}
           <div ref={messagesEndRef} />
         </div>
       )

From 61ec8c1fe20868bbb222c8d80320d08ebd3ad892 Mon Sep 17 00:00:00 2001
From: Nich <nich@nixnet.com>
Date: Mon, 1 Jun 2026 16:39:23 +0100
Subject: [PATCH 4/9] Refresh messages after action responses

---
 .../src/pages/messaging/MessagingView.tsx     | 12 +++-
 .../messaging/components/MessageRenderer.tsx  | 66 +++++++++++++++----
 2 files changed, 63 insertions(+), 15 deletions(-)

diff --git a/sdk/studio/src/pages/messaging/MessagingView.tsx b/sdk/studio/src/pages/messaging/MessagingView.tsx
index aeb3fa1d6..64307c1ab 100644
--- a/sdk/studio/src/pages/messaging/MessagingView.tsx
+++ b/sdk/studio/src/pages/messaging/MessagingView.tsx
@@ -593,14 +593,24 @@ const ThreadMessagingViewEventBased: React.FC = () => {
 
         if (!response?.success) {
           toast.error(response?.message || "Failed to submit action response.")
+          throw new Error(response?.message || "Failed to submit action response.")
         }
+        toast.success(`Submitted: ${action.label}`)
+        await loadChannelMessages(currentChannel)
       } catch (error) {
         const message =
           error instanceof Error ? error.message : "Failed to submit action response."
         toast.error(message)
+        throw error
       }
     },
-    [agentName, connectionStatus.agentId, connector, currentChannel]
+    [
+      agentName,
+      connectionStatus.agentId,
+      connector,
+      currentChannel,
+      loadChannelMessages,
+    ]
   )
 
   // Handle reply and quote actions
diff --git a/sdk/studio/src/pages/messaging/components/MessageRenderer.tsx b/sdk/studio/src/pages/messaging/components/MessageRenderer.tsx
index dc2e6d72c..79d93f18a 100644
--- a/sdk/studio/src/pages/messaging/components/MessageRenderer.tsx
+++ b/sdk/studio/src/pages/messaging/components/MessageRenderer.tsx
@@ -59,7 +59,7 @@ interface MessageRendererProps {
     message: UnifiedMessage,
     action: MessageAction,
     values: Record<string, any>
-  ) => void
+  ) => void | Promise<void>
   // Network connection details for attachment downloads
   networkHost?: string
   networkPort?: number
@@ -97,6 +97,9 @@ const MessageRenderer: React.FC<MessageRendererProps> = ({
     {}
   )
   const [actionInputError, setActionInputError] = useState<string | null>(null)
+  const [submittingActionKey, setSubmittingActionKey] = useState<string | null>(
+    null
+  )
   const messagesEndRef = useRef<HTMLDivElement>(null)
 
   // Remove auto-scroll logic from MessageRenderer - MessagingView handles this
@@ -221,7 +224,10 @@ const MessageRenderer: React.FC<MessageRendererProps> = ({
     setCollapsedThreads(newCollapsed)
   }
 
-  const handleMessageAction = (message: UnifiedMessage, action: MessageAction) => {
+  const handleMessageAction = async (
+    message: UnifiedMessage,
+    action: MessageAction
+  ) => {
     if (action.type === "link" && action.href) {
       window.open(action.href, "_blank", "noopener,noreferrer")
       return
@@ -240,7 +246,13 @@ const MessageRenderer: React.FC<MessageRendererProps> = ({
       return
     }
     if (onMessageAction) {
-      onMessageAction(message, action, {})
+      const actionKey = `${message.id}:${action.id}`
+      setSubmittingActionKey(actionKey)
+      try {
+        await onMessageAction(message, action, {})
+      } finally {
+        setSubmittingActionKey(null)
+      }
     }
   }
 
@@ -252,7 +264,7 @@ const MessageRenderer: React.FC<MessageRendererProps> = ({
     setActionInputError(null)
   }
 
-  const submitPendingAction = () => {
+  const submitPendingAction = async () => {
     if (!pendingAction || !onMessageAction) return
 
     for (const requirement of pendingAction.action.requires || []) {
@@ -267,14 +279,20 @@ const MessageRenderer: React.FC<MessageRendererProps> = ({
       }
     }
 
-    onMessageAction(
-      pendingAction.message,
-      pendingAction.action,
-      actionInputValues
-    )
-    setPendingAction(null)
-    setActionInputValues({})
-    setActionInputError(null)
+    const actionKey = `${pendingAction.message.id}:${pendingAction.action.id}`
+    setSubmittingActionKey(actionKey)
+    try {
+      await onMessageAction(
+        pendingAction.message,
+        pendingAction.action,
+        actionInputValues
+      )
+      setPendingAction(null)
+      setActionInputValues({})
+      setActionInputError(null)
+    } finally {
+      setSubmittingActionKey(null)
+    }
   }
 
   const renderActionRequirementInput = (
@@ -396,7 +414,10 @@ const MessageRenderer: React.FC<MessageRendererProps> = ({
               Cancel
             </Button>
             <Button type="button" size="sm" onClick={submitPendingAction}>
-              Submit
+              {submittingActionKey ===
+              `${pendingAction.message.id}:${pendingAction.action.id}`
+                ? "Submitting..."
+                : "Submit"}
             </Button>
           </div>
         </div>
@@ -456,15 +477,18 @@ const MessageRenderer: React.FC<MessageRendererProps> = ({
         {renderableActions.map((action) => {
           const isDanger = action.style === "danger"
           const isPrimary = action.style === "primary"
+          const actionKey = `${message.id}:${action.id}`
+          const isSubmitting = submittingActionKey === actionKey
           return (
             <Button
               key={action.id}
               type="button"
               variant={isDanger ? "destructive" : isPrimary ? "primary" : "outline"}
               size="sm"
+              disabled={Boolean(submittingActionKey)}
               onClick={() => handleMessageAction(message, action)}
             >
-              {action.label}
+              {isSubmitting ? "Submitting..." : action.label}
             </Button>
           )
         })}
@@ -582,6 +606,20 @@ const MessageRenderer: React.FC<MessageRendererProps> = ({
                 />
               )}
             {renderMessageEmbeds(messageProps.embeds)}
+            {renderMessageActions(
+              {
+                id: messageProps.id,
+                senderId: messageProps.senderId,
+                timestamp: messageProps.timestamp,
+                content: messageProps.content,
+                embeds: messageProps.embeds,
+                actions: messageProps.actions,
+                replyToId: messageProps.replyToId,
+                reactions: messageProps.reactions,
+                attachments: messageProps.attachments,
+              } as UnifiedMessage,
+              messageProps.actions
+            )}
           </div>
 
           {/* Reaction display */}

From e736becfa40804e3cbb195a9f0afb61454804c26 Mon Sep 17 00:00:00 2001
From: Nich <nich@nixnet.com>
Date: Mon, 1 Jun 2026 16:55:25 +0100
Subject: [PATCH 5/9] Persist submitted message action state

---
 .../messaging/components/MessageRenderer.tsx  | 43 ++++++++++++++++---
 1 file changed, 37 insertions(+), 6 deletions(-)

diff --git a/sdk/studio/src/pages/messaging/components/MessageRenderer.tsx b/sdk/studio/src/pages/messaging/components/MessageRenderer.tsx
index 79d93f18a..10512da62 100644
--- a/sdk/studio/src/pages/messaging/components/MessageRenderer.tsx
+++ b/sdk/studio/src/pages/messaging/components/MessageRenderer.tsx
@@ -100,6 +100,9 @@ const MessageRenderer: React.FC<MessageRendererProps> = ({
   const [submittingActionKey, setSubmittingActionKey] = useState<string | null>(
     null
   )
+  const [completedActionsByMessageId, setCompletedActionsByMessageId] = useState<
+    Record<string, string>
+  >({})
   const messagesEndRef = useRef<HTMLDivElement>(null)
 
   // Remove auto-scroll logic from MessageRenderer - MessagingView handles this
@@ -250,6 +253,10 @@ const MessageRenderer: React.FC<MessageRendererProps> = ({
       setSubmittingActionKey(actionKey)
       try {
         await onMessageAction(message, action, {})
+        setCompletedActionsByMessageId((current) => ({
+          ...current,
+          [message.id]: action.id,
+        }))
       } finally {
         setSubmittingActionKey(null)
       }
@@ -287,6 +294,10 @@ const MessageRenderer: React.FC<MessageRendererProps> = ({
         pendingAction.action,
         actionInputValues
       )
+      setCompletedActionsByMessageId((current) => ({
+        ...current,
+        [pendingAction.message.id]: pendingAction.action.id,
+      }))
       setPendingAction(null)
       setActionInputValues({})
       setActionInputError(null)
@@ -405,6 +416,7 @@ const MessageRenderer: React.FC<MessageRendererProps> = ({
               type="button"
               variant="outline"
               size="sm"
+              disabled={Boolean(submittingActionKey)}
               onClick={() => {
                 setPendingAction(null)
                 setActionInputValues({})
@@ -413,7 +425,12 @@ const MessageRenderer: React.FC<MessageRendererProps> = ({
             >
               Cancel
             </Button>
-            <Button type="button" size="sm" onClick={submitPendingAction}>
+            <Button
+              type="button"
+              size="sm"
+              disabled={Boolean(submittingActionKey)}
+              onClick={submitPendingAction}
+            >
               {submittingActionKey ===
               `${pendingAction.message.id}:${pendingAction.action.id}`
                 ? "Submitting..."
@@ -468,9 +485,14 @@ const MessageRenderer: React.FC<MessageRendererProps> = ({
   }
 
   const renderMessageActions = (message: UnifiedMessage, actions?: MessageAction[]) => {
-    const renderableActions = actions?.filter(
-      (action) => (action.type === "link" && action.href) || onMessageAction
-    )
+    const completedActionId = completedActionsByMessageId[message.id]
+    const renderableActions = actions
+      ?.filter(
+        (action) => (action.type === "link" && action.href) || onMessageAction
+      )
+      .filter(
+        (action) => !completedActionId || action.id === completedActionId
+      )
     if (!renderableActions || renderableActions.length === 0) return null
     return (
       <div className="mt-3 flex flex-wrap gap-2">
@@ -479,13 +501,22 @@ const MessageRenderer: React.FC<MessageRendererProps> = ({
           const isPrimary = action.style === "primary"
           const actionKey = `${message.id}:${action.id}`
           const isSubmitting = submittingActionKey === actionKey
+          const isCompleted = completedActionId === action.id
           return (
             <Button
               key={action.id}
               type="button"
-              variant={isDanger ? "destructive" : isPrimary ? "primary" : "outline"}
+              variant={
+                isCompleted
+                  ? "outline"
+                  : isDanger
+                    ? "destructive"
+                    : isPrimary
+                      ? "primary"
+                      : "outline"
+              }
               size="sm"
-              disabled={Boolean(submittingActionKey)}
+              disabled={Boolean(submittingActionKey) || isCompleted}
               onClick={() => handleMessageAction(message, action)}
             >
               {isSubmitting ? "Submitting..." : action.label}

From 52ec98cac1a707241732ef1df525abbac6b1526c Mon Sep 17 00:00:00 2001
From: Nich <nich@nixnet.com>
Date: Mon, 1 Jun 2026 17:01:35 +0100
Subject: [PATCH 6/9] Add Studio browser testing tools

---
 sdk/studio/package-lock.json    | 315 ++++++++++++++++++++++++++++++--
 sdk/studio/package.json         |   9 +-
 sdk/studio/playwright.config.ts |  22 +++
 sdk/studio/yarn.lock            | 214 +++++++++++++++++-----
 4 files changed, 502 insertions(+), 58 deletions(-)
 create mode 100644 sdk/studio/playwright.config.ts

diff --git a/sdk/studio/package-lock.json b/sdk/studio/package-lock.json
index 34ab6fbdb..416217e68 100644
--- a/sdk/studio/package-lock.json
+++ b/sdk/studio/package-lock.json
@@ -110,6 +110,7 @@
         "openagents-studio": "bin/cli.js"
       },
       "devDependencies": {
+        "@playwright/test": "^1.60.0",
         "@testing-library/dom": "^10",
         "@testing-library/jest-dom": "^6",
         "@testing-library/react": "^16",
@@ -121,7 +122,10 @@
         "@types/node": "^20.17.50",
         "@types/three": "^0.182.0",
         "@types/uuid": "^11.0.0",
-        "cross-env": "^10.1.0"
+        "cross-env": "^10.1.0",
+        "prettier": "^3.8.3",
+        "source-map-explorer": "^2.5.3",
+        "wait-on": "^9.0.10"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -3249,6 +3253,60 @@
         "node": ">=12"
       }
     },
+    "node_modules/@hapi/address": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/@hapi/address/-/address-5.1.1.tgz",
+      "integrity": "sha512-A+po2d/dVoY7cYajycYI43ZbYMXukuopIsqCjh5QzsBCipDtdofHntljDlpccMjIfTy6UOkg+5KPriwYch2bXA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@hapi/hoek": "^11.0.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@hapi/formula": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@hapi/formula/-/formula-3.0.2.tgz",
+      "integrity": "sha512-hY5YPNXzw1He7s0iqkRQi+uMGh383CGdyyIGYtB+W5N3KHPXoqychklvHhKCC9M3Xtv0OCs/IHw+r4dcHtBYWw==",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@hapi/hoek": {
+      "version": "11.0.7",
+      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-11.0.7.tgz",
+      "integrity": "sha512-HV5undWkKzcB4RZUusqOpcgxOaq6VOAH7zhhIr2g3G8NF/MlFO75SjOr2NfuSx0Mh40+1FqCkagKLJRykUWoFQ==",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@hapi/pinpoint": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@hapi/pinpoint/-/pinpoint-2.0.1.tgz",
+      "integrity": "sha512-EKQmr16tM8s16vTT3cA5L0kZZcTMU5DUOZTuvpnY738m+jyP3JIUj+Mm1xc1rsLkGBQ/gVnfKYPwOmPg1tUR4Q==",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@hapi/tlds": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@hapi/tlds/-/tlds-1.1.6.tgz",
+      "integrity": "sha512-xdi7A/4NZokvV0ewovme3aUO5kQhW9pQ2YD1hRqZGhhSi5rBv4usHYidVocXSi9eihYsznZxLtAiEYYUL6VBGw==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@hapi/topo": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@hapi/topo/-/topo-6.0.2.tgz",
+      "integrity": "sha512-KR3rD5inZbGMrHmgPxsJ9dbi6zEK+C3ZwUwTa+eMwWLz7oijWUTWD2pMSNNYJAU6Qq+65NkxXjqHr/7LM2Xkqg==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@hapi/hoek": "^11.0.2"
+      }
+    },
     "node_modules/@headless-tree/core": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/@headless-tree/core/-/core-1.6.1.tgz",
@@ -4236,6 +4294,22 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.60.0.tgz",
+      "integrity": "sha512-O71yZIbAh/PxDMNGns37GHBIfrVkEVyn+AXyIa5dOTfb4/xNvRWV+Vv/NMbNCtODB/pO7vLlF2OTmMVLhmr7Ag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.60.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@pmmmwh/react-refresh-webpack-plugin": {
       "version": "0.5.16",
       "license": "MIT",
@@ -10257,14 +10331,15 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.13.2.tgz",
-      "integrity": "sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==",
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.16.1.tgz",
+      "integrity": "sha512-caYkukvroVPO8KrzuJEb50Hm07KwfBZPEC3VeFHTsqWHvKTsy54hjJz9BS/cdaypROE2rH6xvm9mHX4fgWkr3A==",
       "license": "MIT",
       "dependencies": {
-        "follow-redirects": "^1.15.6",
-        "form-data": "^4.0.4",
-        "proxy-from-env": "^1.1.0"
+        "follow-redirects": "^1.16.0",
+        "form-data": "^4.0.5",
+        "https-proxy-agent": "^5.0.1",
+        "proxy-from-env": "^2.1.0"
       }
     },
     "node_modules/axobject-query": {
@@ -10761,6 +10836,19 @@
         "node-int64": "^0.4.0"
       }
     },
+    "node_modules/btoa": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
+      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==",
+      "dev": true,
+      "license": "(MIT OR Apache-2.0)",
+      "bin": {
+        "btoa": "bin/btoa.js"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
     "node_modules/buffer-from": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
@@ -14109,7 +14197,9 @@
       "license": "ISC"
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.9",
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz",
+      "integrity": "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==",
       "funding": [
         {
           "type": "individual",
@@ -18268,6 +18358,25 @@
         "jiti": "lib/jiti-cli.mjs"
       }
     },
+    "node_modules/joi": {
+      "version": "18.2.1",
+      "resolved": "https://registry.npmjs.org/joi/-/joi-18.2.1.tgz",
+      "integrity": "sha512-2/OKlogiESf2Nh3TFCrRjrr9z1DRHeW0I+KReF67+4J0Ns+8hBtHRmoWAZ2OFU6I5+TWLEe6sVlSdXPjHm5UbQ==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@hapi/address": "^5.1.1",
+        "@hapi/formula": "^3.0.2",
+        "@hapi/hoek": "^11.0.7",
+        "@hapi/pinpoint": "^2.0.1",
+        "@hapi/tlds": "^1.1.1",
+        "@hapi/topo": "^6.0.2",
+        "@standard-schema/spec": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 20"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -18879,9 +18988,9 @@
       }
     },
     "node_modules/lodash": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
+      "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
       "license": "MIT"
     },
     "node_modules/lodash.camelcase": {
@@ -20946,6 +21055,53 @@
         "node": ">=4"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.60.0.tgz",
+      "integrity": "sha512-hheHdokM8cdqCb0lcE3s+zT4t4W+vvjpGxsZlDnikarzx8tSzMebh3UiFtgqwFwnTnjYQcsyMF8ei2mCO/tpeA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.60.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.60.0.tgz",
+      "integrity": "sha512-9bW6zvX/m0lEbgTKJ6YppOKx8H3VOPBMOCFh2irXFOT4BbHgrx5hPjwJYLT40Lu+4qtD36qKc/Hn56StUW57IA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
@@ -22283,6 +22439,22 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.8.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.3.tgz",
+      "integrity": "sha512-7igPTM53cGHMW8xWuVTydi2KO233VFiTNyF5hLJqpilHfmn8C8gPf+PS7dUT64YcXFbiMGZxS9pCSxL/Dxm/Jw==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
@@ -22448,10 +22620,13 @@
       }
     },
     "node_modules/proxy-from-env": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
-      "license": "MIT"
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
+      "integrity": "sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
     },
     "node_modules/psl": {
       "version": "1.15.0",
@@ -24256,6 +24431,16 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rxjs": {
+      "version": "7.8.2",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
+      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/safe-array-concat": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
@@ -24876,6 +25061,58 @@
         "node": ">= 8"
       }
     },
+    "node_modules/source-map-explorer": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/source-map-explorer/-/source-map-explorer-2.5.3.tgz",
+      "integrity": "sha512-qfUGs7UHsOBE5p/lGfQdaAj/5U/GWYBw2imEpD6UQNkqElYonkow8t+HBL1qqIl3CuGZx7n8/CQo4x1HwSHhsg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "btoa": "^1.2.1",
+        "chalk": "^4.1.0",
+        "convert-source-map": "^1.7.0",
+        "ejs": "^3.1.5",
+        "escape-html": "^1.0.3",
+        "glob": "^7.1.6",
+        "gzip-size": "^6.0.0",
+        "lodash": "^4.17.20",
+        "open": "^7.3.1",
+        "source-map": "^0.7.4",
+        "temp": "^0.9.4",
+        "yargs": "^16.2.0"
+      },
+      "bin": {
+        "sme": "bin/cli.js",
+        "source-map-explorer": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/source-map-explorer/node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/source-map-explorer/node_modules/open": {
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz",
+      "integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-docker": "^2.0.0",
+        "is-wsl": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -25674,6 +25911,20 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/temp": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/temp/-/temp-0.9.4.tgz",
+      "integrity": "sha512-yYrrsWnrXMcdsnu/7YMYAofM1ktpL5By7vZhf15CrXijWWrEYZks5AXBudalfSWJLlnen/QUJUB5aoB0kqZUGA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mkdirp": "^0.5.1",
+        "rimraf": "~2.6.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/temp-dir": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz",
@@ -25683,6 +25934,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/temp/node_modules/rimraf": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
+      "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
+      "deprecated": "Rimraf versions prior to v4 are no longer supported",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      }
+    },
     "node_modules/tempy": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/tempy/-/tempy-0.6.0.tgz",
@@ -26822,6 +27087,26 @@
         "node": ">=10"
       }
     },
+    "node_modules/wait-on": {
+      "version": "9.0.10",
+      "resolved": "https://registry.npmjs.org/wait-on/-/wait-on-9.0.10.tgz",
+      "integrity": "sha512-rCoJEhvMr0X6alHmwc9abbrA5ZrLZFKpFQVKPNFwl2h7DapXOGdmimIHDtLOWhT4PjhZhxFEtZoQgEXbkDWdZw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "axios": "^1.16.0",
+        "joi": "^18.2.1",
+        "lodash": "^4.18.1",
+        "minimist": "^1.2.8",
+        "rxjs": "^7.8.2"
+      },
+      "bin": {
+        "wait-on": "bin/wait-on"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
     "node_modules/walker": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",
diff --git a/sdk/studio/package.json b/sdk/studio/package.json
index 94df60959..13f6b9aca 100644
--- a/sdk/studio/package.json
+++ b/sdk/studio/package.json
@@ -111,6 +111,7 @@
     "zustand": "^5.0.9"
   },
   "devDependencies": {
+    "@playwright/test": "^1.60.0",
     "@testing-library/dom": "^10",
     "@testing-library/jest-dom": "^6",
     "@testing-library/react": "^16",
@@ -122,7 +123,10 @@
     "@types/node": "^20.17.50",
     "@types/three": "^0.182.0",
     "@types/uuid": "^11.0.0",
-    "cross-env": "^10.1.0"
+    "cross-env": "^10.1.0",
+    "prettier": "^3.8.3",
+    "source-map-explorer": "^2.5.3",
+    "wait-on": "^9.0.10"
   },
   "scripts": {
     "start": "HOST=0.0.0.0 PORT=8050 DANGEROUSLY_DISABLE_HOST_CHECK=true craco start",
@@ -131,6 +135,9 @@
     "build:analyze": "cross-env GENERATE_SOURCEMAP=false craco build && npx source-map-explorer 'build/static/js/*.js'",
     "test": "craco test",
     "test:coverage": "craco test --coverage --watchAll=false",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "playwright:install": "playwright install chromium",
     "eject": "react-scripts eject",
     "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
     "lint:fix": "eslint 'src/**/*.{js,jsx,ts,tsx}' --fix",
diff --git a/sdk/studio/playwright.config.ts b/sdk/studio/playwright.config.ts
new file mode 100644
index 000000000..79f14ee1b
--- /dev/null
+++ b/sdk/studio/playwright.config.ts
@@ -0,0 +1,22 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./e2e",
+  timeout: 30_000,
+  expect: {
+    timeout: 5_000,
+  },
+  fullyParallel: true,
+  reporter: [["list"], ["html", { open: "never" }]],
+  use: {
+    baseURL: process.env.PLAYWRIGHT_BASE_URL || "http://localhost:8050",
+    trace: "on-first-retry",
+    screenshot: "only-on-failure",
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+});
diff --git a/sdk/studio/yarn.lock b/sdk/studio/yarn.lock
index 107b86b76..ddb56163e 100644
--- a/sdk/studio/yarn.lock
+++ b/sdk/studio/yarn.lock
@@ -1580,6 +1580,40 @@
     protobufjs "^7.2.5"
     yargs "^17.7.2"
 
+"@hapi/address@^5.1.1":
+  version "5.1.1"
+  resolved "https://registry.npmjs.org/@hapi/address/-/address-5.1.1.tgz"
+  integrity sha512-A+po2d/dVoY7cYajycYI43ZbYMXukuopIsqCjh5QzsBCipDtdofHntljDlpccMjIfTy6UOkg+5KPriwYch2bXA==
+  dependencies:
+    "@hapi/hoek" "^11.0.2"
+
+"@hapi/formula@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.npmjs.org/@hapi/formula/-/formula-3.0.2.tgz"
+  integrity sha512-hY5YPNXzw1He7s0iqkRQi+uMGh383CGdyyIGYtB+W5N3KHPXoqychklvHhKCC9M3Xtv0OCs/IHw+r4dcHtBYWw==
+
+"@hapi/hoek@^11.0.2", "@hapi/hoek@^11.0.7":
+  version "11.0.7"
+  resolved "https://registry.npmjs.org/@hapi/hoek/-/hoek-11.0.7.tgz"
+  integrity sha512-HV5undWkKzcB4RZUusqOpcgxOaq6VOAH7zhhIr2g3G8NF/MlFO75SjOr2NfuSx0Mh40+1FqCkagKLJRykUWoFQ==
+
+"@hapi/pinpoint@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/@hapi/pinpoint/-/pinpoint-2.0.1.tgz"
+  integrity sha512-EKQmr16tM8s16vTT3cA5L0kZZcTMU5DUOZTuvpnY738m+jyP3JIUj+Mm1xc1rsLkGBQ/gVnfKYPwOmPg1tUR4Q==
+
+"@hapi/tlds@^1.1.1":
+  version "1.1.6"
+  resolved "https://registry.npmjs.org/@hapi/tlds/-/tlds-1.1.6.tgz"
+  integrity sha512-xdi7A/4NZokvV0ewovme3aUO5kQhW9pQ2YD1hRqZGhhSi5rBv4usHYidVocXSi9eihYsznZxLtAiEYYUL6VBGw==
+
+"@hapi/topo@^6.0.2":
+  version "6.0.2"
+  resolved "https://registry.npmjs.org/@hapi/topo/-/topo-6.0.2.tgz"
+  integrity sha512-KR3rD5inZbGMrHmgPxsJ9dbi6zEK+C3ZwUwTa+eMwWLz7oijWUTWD2pMSNNYJAU6Qq+65NkxXjqHr/7LM2Xkqg==
+  dependencies:
+    "@hapi/hoek" "^11.0.2"
+
 "@headless-tree/core@^1.6.0":
   version "1.6.1"
   resolved "https://registry.npmjs.org/@headless-tree/core/-/core-1.6.1.tgz"
@@ -1952,6 +1986,13 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@playwright/test@^1.60.0":
+  version "1.60.0"
+  resolved "https://registry.npmjs.org/@playwright/test/-/test-1.60.0.tgz"
+  integrity sha512-O71yZIbAh/PxDMNGns37GHBIfrVkEVyn+AXyIa5dOTfb4/xNvRWV+Vv/NMbNCtODB/pO7vLlF2OTmMVLhmr7Ag==
+  dependencies:
+    playwright "1.60.0"
+
 "@pmmmwh/react-refresh-webpack-plugin@^0.5.3":
   version "0.5.16"
   dependencies:
@@ -3903,7 +3944,7 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
-"@standard-schema/spec@^1.0.0":
+"@standard-schema/spec@^1.0.0", "@standard-schema/spec@^1.1.0":
   version "1.1.0"
   resolved "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz"
   integrity sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==
@@ -4046,15 +4087,10 @@
     source-map-js "^1.2.1"
     tailwindcss "4.2.1"
 
-"@tailwindcss/oxide-linux-x64-gnu@4.2.1":
-  version "4.2.1"
-  resolved "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.2.1.tgz"
-  integrity sha512-qMFzxI2YlBOLW5PhblzuSWlWfwLHaneBE0xHzLrBgNtqN6mWfs+qYbhryGSXQjFYB1Dzf5w+LN5qbUTPhW7Y5g==
-
-"@tailwindcss/oxide-linux-x64-musl@4.2.1":
+"@tailwindcss/oxide-win32-x64-msvc@4.2.1":
   version "4.2.1"
-  resolved "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.2.1.tgz"
-  integrity sha512-5r1X2FKnCMUPlXTWRYpHdPYUY6a1Ar/t7P24OuiEdEOmms5lyqjDRvVY1yy9Rmioh+AunQ0rWiOTPE8F9A3v5g==
+  resolved "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.2.1.tgz"
+  integrity sha512-rbO34G5sMWWyrN/idLeVxAZgAKWrn5LiR3/I90Q9MkA67s6T1oB0xtTe+0heoBvHSpbU9Mk7i6uwJnpo4u21XQ==
 
 "@tailwindcss/oxide@4.2.1":
   version "4.2.1"
@@ -5306,14 +5342,15 @@ available-typed-arrays@^1.0.7:
 axe-core@^4.10.0:
   version "4.10.3"
 
-axios@^1.13.2:
-  version "1.13.2"
-  resolved "https://registry.npmmirror.com/axios/-/axios-1.13.2.tgz"
-  integrity sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==
+axios@^1.13.2, axios@^1.16.0:
+  version "1.16.1"
+  resolved "https://registry.npmjs.org/axios/-/axios-1.16.1.tgz"
+  integrity sha512-caYkukvroVPO8KrzuJEb50Hm07KwfBZPEC3VeFHTsqWHvKTsy54hjJz9BS/cdaypROE2rH6xvm9mHX4fgWkr3A==
   dependencies:
-    follow-redirects "^1.15.6"
-    form-data "^4.0.4"
-    proxy-from-env "^1.1.0"
+    follow-redirects "^1.16.0"
+    form-data "^4.0.5"
+    https-proxy-agent "^5.0.1"
+    proxy-from-env "^2.1.0"
 
 axobject-query@^4.1.0:
   version "4.1.0"
@@ -5573,6 +5610,11 @@ bser@2.1.1:
   dependencies:
     node-int64 "^0.4.0"
 
+btoa@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz"
+  integrity sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==
+
 buffer-from@^1.0.0:
   version "1.1.2"
   resolved "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz"
@@ -6712,7 +6754,7 @@ ee-first@1.1.1:
   resolved "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz"
   integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==
 
-ejs@^3.1.6:
+ejs@^3.1.5, ejs@^3.1.6:
   version "3.1.10"
   resolved "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz"
   integrity sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==
@@ -6945,7 +6987,7 @@ escalade@^3.1.1, escalade@^3.2.0:
   resolved "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz"
   integrity sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==
 
-escape-html@~1.0.3:
+escape-html@^1.0.3, escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz"
   integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==
@@ -7561,8 +7603,10 @@ flatted@^3.2.9:
   resolved "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz"
   integrity sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==
 
-follow-redirects@^1.0.0, follow-redirects@^1.15.6:
-  version "1.15.9"
+follow-redirects@^1.0.0, follow-redirects@^1.16.0:
+  version "1.16.0"
+  resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz"
+  integrity sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==
 
 for-each@^0.3.3, for-each@^0.3.5:
   version "0.3.5"
@@ -7598,7 +7642,7 @@ form-data@^3.0.0:
     es-set-tostringtag "^2.1.0"
     mime-types "^2.1.35"
 
-form-data@^4.0.4:
+form-data@^4.0.5:
   version "4.0.5"
   resolved "https://registry.npmmirror.com/form-data/-/form-data-4.0.5.tgz"
   integrity sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==
@@ -8296,7 +8340,7 @@ http-proxy@^1.18.1:
     follow-redirects "^1.0.0"
     requires-port "^1.0.0"
 
-https-proxy-agent@^5.0.0:
+https-proxy-agent@^5.0.0, https-proxy-agent@^5.0.1:
   version "5.0.1"
   resolved "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz"
   integrity sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==
@@ -8745,7 +8789,7 @@ is-weakset@^2.0.3:
     call-bound "^1.0.3"
     get-intrinsic "^1.2.6"
 
-is-wsl@^2.2.0:
+is-wsl@^2.1.1, is-wsl@^2.2.0:
   version "2.2.0"
   resolved "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz"
   integrity sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==
@@ -9327,6 +9371,19 @@ jiti@^2.6.1:
   resolved "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz"
   integrity sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==
 
+joi@^18.2.1:
+  version "18.2.1"
+  resolved "https://registry.npmjs.org/joi/-/joi-18.2.1.tgz"
+  integrity sha512-2/OKlogiESf2Nh3TFCrRjrr9z1DRHeW0I+KReF67+4J0Ns+8hBtHRmoWAZ2OFU6I5+TWLEe6sVlSdXPjHm5UbQ==
+  dependencies:
+    "@hapi/address" "^5.1.1"
+    "@hapi/formula" "^3.0.2"
+    "@hapi/hoek" "^11.0.7"
+    "@hapi/pinpoint" "^2.0.1"
+    "@hapi/tlds" "^1.1.1"
+    "@hapi/topo" "^6.0.2"
+    "@standard-schema/spec" "^1.1.0"
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"
@@ -9525,15 +9582,10 @@ lib0@^0.2.102, lib0@^0.2.114, lib0@^0.2.43, lib0@^0.2.85, lib0@^0.2.99:
   dependencies:
     isomorphic.js "^0.2.4"
 
-lightningcss-linux-x64-gnu@1.31.1:
-  version "1.31.1"
-  resolved "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.31.1.tgz"
-  integrity sha512-xGlFWRMl+0KvUhgySdIaReQdB4FNudfUTARn7q0hh/V67PVGCs3ADFjw+6++kG1RNd0zdGRlEKa+T13/tQjPMA==
-
-lightningcss-linux-x64-musl@1.31.1:
+lightningcss-win32-x64-msvc@1.31.1:
   version "1.31.1"
-  resolved "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.31.1.tgz"
-  integrity sha512-eowF8PrKHw9LpoZii5tdZwnBcYDxRw2rRCyvAXLi34iyeYfqCQNA9rmUM0ce62NlPhCvof1+9ivRaTY6pSKDaA==
+  resolved "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.31.1.tgz"
+  integrity sha512-I9aiFrbd7oYHwlnQDqr1Roz+fTz61oDDJX7n9tYF9FJymH1cIN1DtKw3iYt6b8WZgEjoNwVSncwF4wx/ZedMhw==
 
 lightningcss@1.31.1:
   version "1.31.1"
@@ -9643,10 +9695,10 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz"
   integrity sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==
 
-lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
-  version "4.17.21"
-  resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
-  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+lodash@^4.17.20, lodash@^4.17.21, lodash@^4.18.1, lodash@^4.7.0:
+  version "4.18.1"
+  resolved "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz"
+  integrity sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==
 
 long@^5.0.0:
   version "5.3.2"
@@ -10322,12 +10374,12 @@ minimatch@^5.0.1:
   dependencies:
     brace-expansion "^2.0.1"
 
-minimist@^1.2.0, minimist@^1.2.6:
+minimist@^1.2.0, minimist@^1.2.6, minimist@^1.2.8:
   version "1.2.8"
   resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz"
   integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
 
-mkdirp@~0.5.1:
+mkdirp@^0.5.1, mkdirp@~0.5.1:
   version "0.5.6"
   resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz"
   integrity sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==
@@ -10590,6 +10642,14 @@ onetime@^5.1.2:
   dependencies:
     mimic-fn "^2.1.0"
 
+open@^7.3.1:
+  version "7.4.2"
+  resolved "https://registry.npmjs.org/open/-/open-7.4.2.tgz"
+  integrity sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==
+  dependencies:
+    is-docker "^2.0.0"
+    is-wsl "^2.1.1"
+
 open@^8.0.9, open@^8.4.0:
   version "8.4.2"
   resolved "https://registry.npmjs.org/open/-/open-8.4.2.tgz"
@@ -10830,6 +10890,20 @@ pkg-up@^3.1.0:
   dependencies:
     find-up "^3.0.0"
 
+playwright-core@1.60.0:
+  version "1.60.0"
+  resolved "https://registry.npmjs.org/playwright-core/-/playwright-core-1.60.0.tgz"
+  integrity sha512-9bW6zvX/m0lEbgTKJ6YppOKx8H3VOPBMOCFh2irXFOT4BbHgrx5hPjwJYLT40Lu+4qtD36qKc/Hn56StUW57IA==
+
+playwright@1.60.0:
+  version "1.60.0"
+  resolved "https://registry.npmjs.org/playwright/-/playwright-1.60.0.tgz"
+  integrity sha512-hheHdokM8cdqCb0lcE3s+zT4t4W+vvjpGxsZlDnikarzx8tSzMebh3UiFtgqwFwnTnjYQcsyMF8ei2mCO/tpeA==
+  dependencies:
+    playwright-core "1.60.0"
+  optionalDependencies:
+    fsevents "2.3.2"
+
 possible-typed-array-names@^1.0.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz"
@@ -11418,6 +11492,11 @@ prelude-ls@~1.1.2:
   resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz"
   integrity sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==
 
+prettier@^3.8.3:
+  version "3.8.3"
+  resolved "https://registry.npmjs.org/prettier/-/prettier-3.8.3.tgz"
+  integrity sha512-7igPTM53cGHMW8xWuVTydi2KO233VFiTNyF5hLJqpilHfmn8C8gPf+PS7dUT64YcXFbiMGZxS9pCSxL/Dxm/Jw==
+
 pretty-bytes@^5.3.0, pretty-bytes@^5.4.1:
   version "5.6.0"
   resolved "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz"
@@ -11525,10 +11604,10 @@ proxy-addr@~2.0.7:
     forwarded "0.2.0"
     ipaddr.js "1.9.1"
 
-proxy-from-env@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz"
-  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+proxy-from-env@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz"
+  integrity sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==
 
 psl@^1.1.33:
   version "1.15.0"
@@ -12401,6 +12480,13 @@ rimraf@^3.0.0, rimraf@^3.0.2:
   dependencies:
     glob "^7.1.3"
 
+rimraf@~2.6.2:
+  version "2.6.3"
+  resolved "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz"
+  integrity sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==
+  dependencies:
+    glob "^7.1.3"
+
 rollup-plugin-terser@^7.0.0:
   version "7.0.2"
   resolved "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz"
@@ -12425,6 +12511,13 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
+rxjs@^7.8.2:
+  version "7.8.2"
+  resolved "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz"
+  integrity sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==
+  dependencies:
+    tslib "^2.1.0"
+
 safe-array-concat@^1.1.2, safe-array-concat@^1.1.3:
   version "1.1.3"
   resolved "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz"
@@ -12772,6 +12865,24 @@ source-list-map@^2.0.0, source-list-map@^2.0.1:
   resolved "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz"
   integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
 
+source-map-explorer@^2.5.3:
+  version "2.5.3"
+  resolved "https://registry.npmjs.org/source-map-explorer/-/source-map-explorer-2.5.3.tgz"
+  integrity sha512-qfUGs7UHsOBE5p/lGfQdaAj/5U/GWYBw2imEpD6UQNkqElYonkow8t+HBL1qqIl3CuGZx7n8/CQo4x1HwSHhsg==
+  dependencies:
+    btoa "^1.2.1"
+    chalk "^4.1.0"
+    convert-source-map "^1.7.0"
+    ejs "^3.1.5"
+    escape-html "^1.0.3"
+    glob "^7.1.6"
+    gzip-size "^6.0.0"
+    lodash "^4.17.20"
+    open "^7.3.1"
+    source-map "^0.7.4"
+    temp "^0.9.4"
+    yargs "^16.2.0"
+
 source-map-js@^1.0.1, source-map-js@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz"
@@ -12804,7 +12915,7 @@ source-map@^0.6.1, source-map@0.6.1:
   resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
-source-map@^0.7.3:
+source-map@^0.7.3, source-map@^0.7.4:
   version "0.7.4"
 
 source-map@^0.8.0-beta.0:
@@ -13234,6 +13345,14 @@ temp-dir@^2.0.0:
   resolved "https://registry.npmjs.org/temp-dir/-/temp-dir-2.0.0.tgz"
   integrity sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==
 
+temp@^0.9.4:
+  version "0.9.4"
+  resolved "https://registry.npmjs.org/temp/-/temp-0.9.4.tgz"
+  integrity sha512-yYrrsWnrXMcdsnu/7YMYAofM1ktpL5By7vZhf15CrXijWWrEYZks5AXBudalfSWJLlnen/QUJUB5aoB0kqZUGA==
+  dependencies:
+    mkdirp "^0.5.1"
+    rimraf "~2.6.2"
+
 tempy@^0.6.0:
   version "0.6.0"
   resolved "https://registry.npmjs.org/tempy/-/tempy-0.6.0.tgz"
@@ -13831,6 +13950,17 @@ w3c-xmlserializer@^2.0.0:
   dependencies:
     xml-name-validator "^3.0.0"
 
+wait-on@^9.0.10:
+  version "9.0.10"
+  resolved "https://registry.npmjs.org/wait-on/-/wait-on-9.0.10.tgz"
+  integrity sha512-rCoJEhvMr0X6alHmwc9abbrA5ZrLZFKpFQVKPNFwl2h7DapXOGdmimIHDtLOWhT4PjhZhxFEtZoQgEXbkDWdZw==
+  dependencies:
+    axios "^1.16.0"
+    joi "^18.2.1"
+    lodash "^4.18.1"
+    minimist "^1.2.8"
+    rxjs "^7.8.2"
+
 walker@^1.0.7:
   version "1.0.8"
   resolved "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz"

From ac2efb5642e4031fd526beffc33f6df665471610 Mon Sep 17 00:00:00 2001
From: Nich <nich@nixnet.com>
Date: Tue, 2 Jun 2026 08:51:03 +0100
Subject: [PATCH 7/9] Fix Studio agent DM conversation loading

---
 .../src/pages/messaging/MessagingView.tsx     |  4 +-
 sdk/studio/src/stores/chatStore.ts            | 56 ++++++++++++++++---
 2 files changed, 51 insertions(+), 9 deletions(-)

diff --git a/sdk/studio/src/pages/messaging/MessagingView.tsx b/sdk/studio/src/pages/messaging/MessagingView.tsx
index 64307c1ab..9d6db63e7 100644
--- a/sdk/studio/src/pages/messaging/MessagingView.tsx
+++ b/sdk/studio/src/pages/messaging/MessagingView.tsx
@@ -891,7 +891,9 @@ const ThreadMessagingViewEventBased: React.FC = () => {
               if (filteredMessages.length === 0) {
                 return (
                   <div className="text-center text-gray-500 dark:text-gray-400 py-8">
-                    {currentChannel
+                    {currentAgentConversation
+                      ? `No messages in ${currentAgentConversation.replace(",", " ↔ ")} yet.`
+                      : currentChannel
                       ? t("empty.noMessagesChannel", {
                           channel: currentChannel,
                         })
diff --git a/sdk/studio/src/stores/chatStore.ts b/sdk/studio/src/stores/chatStore.ts
index d9634f036..9a58fbe47 100644
--- a/sdk/studio/src/stores/chatStore.ts
+++ b/sdk/studio/src/stores/chatStore.ts
@@ -347,17 +347,33 @@ export const useChatStore = create<ChatState>((set, get) => ({
       currentDirectMessage: null,
     });
     // Load the conversation messages using existing DM retrieval
-    // We set source_id to agentA and target to agentB — the handler matches bidirectionally
+    // The retrieval source must be the authenticated Studio identity when
+    // it is one of the conversation participants.
     const connection = get().getConnection();
     if (connection && agentA && agentB) {
+      const currentAgentId = connection.getAgentId?.();
+      let sourceAgentId = agentA;
+      let targetAgentId = agentB;
+
+      if (currentAgentId === agentB) {
+        sourceAgentId = agentB;
+        targetAgentId = agentA;
+      } else if (currentAgentId && currentAgentId !== agentA) {
+        set({
+          messagesLoading: false,
+          messagesError: `Cannot read this agent conversation unless connected as ${agentA} or ${agentB}`,
+        });
+        return;
+      }
+
       set({ messagesLoading: true, messagesError: null });
       connection
         .sendEvent({
           event_name: EventNames.THREAD_DIRECT_MESSAGES_RETRIEVE,
-          source_id: agentA,
+          source_id: sourceAgentId,
           destination_id: "mod:openagents.mods.workspace.messaging",
           payload: {
-            target_agent_id: agentB,
+            target_agent_id: targetAgentId,
             limit: 200,
             offset: 0,
             include_threads: true,
@@ -366,19 +382,43 @@ export const useChatStore = create<ChatState>((set, get) => ({
         })
         .then((response: any) => {
           if (response.success && response.data?.messages) {
-            const messages = response.data.messages.map((msg: any) =>
-              MessageAdapter.fromRaw(msg)
-            );
+            const rawMessages: RawThreadMessage[] = response.data.messages;
+            const unifiedMessages =
+              MessageAdapter.fromRawThreadMessages(rawMessages);
+
+            const validMessages = unifiedMessages.filter((msg) => {
+              if (!msg.content || msg.content.trim() === "") {
+                console.warn(
+                  `ChatStore: Filtering out empty agent DM ${msg.id} from ${msg.senderId}`
+                );
+                return false;
+              }
+              return true;
+            });
+
+            const messages: OptimisticMessage[] = validMessages.map((msg) => ({
+              ...msg,
+              isOptimistic: false,
+              status: "sent" as MessageStatus,
+            }));
+
             // Store in directMessages under the conversation key
             const currentMessages = new Map(get().directMessages);
             currentMessages.set(conversationKey, messages);
             set({ directMessages: currentMessages, messagesLoading: false });
           } else {
-            set({ messagesLoading: false });
+            set({
+              messagesLoading: false,
+              messagesError:
+                response.message || "Failed to load agent conversation",
+            });
           }
         })
         .catch(() => {
-          set({ messagesLoading: false });
+          set({
+            messagesLoading: false,
+            messagesError: "Failed to load agent conversation",
+          });
         });
     }
   },

From 1327efa5e5a44eb60e3db3778456870952d5ccc5 Mon Sep 17 00:00:00 2001
From: Nich <nich@nixnet.com>
Date: Tue, 2 Jun 2026 09:03:25 +0100
Subject: [PATCH 8/9] Allow participants to reply in Studio agent DMs

---
 .../src/pages/messaging/MessagingView.tsx     | 56 +++++++++++++++----
 sdk/studio/src/stores/chatStore.ts            |  6 +-
 2 files changed, 50 insertions(+), 12 deletions(-)

diff --git a/sdk/studio/src/pages/messaging/MessagingView.tsx b/sdk/studio/src/pages/messaging/MessagingView.tsx
index 9d6db63e7..11c4f2724 100644
--- a/sdk/studio/src/pages/messaging/MessagingView.tsx
+++ b/sdk/studio/src/pages/messaging/MessagingView.tsx
@@ -60,6 +60,18 @@ const ThreadMessagingViewEventBased: React.FC = () => {
   // Use new OpenAgents context
   const { connector, connectionStatus, isConnected } = useOpenAgents()
 
+  const currentAgentId =
+    connectionStatus.agentId || connector?.getAgentId?.() || agentName || ""
+
+  const agentConversationTarget = useMemo(() => {
+    if (!currentAgentConversation || !currentAgentId) return null
+
+    const [agentA, agentB] = currentAgentConversation.split(",", 2)
+    if (currentAgentId === agentA) return agentB
+    if (currentAgentId === agentB) return agentA
+    return null
+  }, [currentAgentConversation, currentAgentId])
+
   // Set chatStore context reference
   useEffect(() => {
     setChatStoreContext({ connector, connectionStatus, isConnected })
@@ -267,15 +279,24 @@ const ThreadMessagingViewEventBased: React.FC = () => {
         console.log(`🔍 Channel selection logic:`, {
           currentChannel,
           currentDirectMessage,
+          currentAgentConversation,
           availableChannels: channels.map((c) => c.name),
           availableAgents: filteredAgents.map((a) => a.agent_id),
-          selectionStateFromChatStore: { currentChannel, currentDirectMessage },
+          selectionStateFromChatStore: {
+            currentChannel,
+            currentDirectMessage,
+            currentAgentConversation,
+          },
         })
 
         let selectedChannel = null
         let selectionReason = ""
 
-        if (currentChannel) {
+        if (currentAgentConversation) {
+          console.log(
+            `✅ Keep current agent conversation selection: ${currentAgentConversation}`
+          )
+        } else if (currentChannel) {
           // Check if currently selected regular channel still exists
           const channelExists = channels.some(
             (channel) => channel.name === currentChannel
@@ -353,6 +374,7 @@ const ThreadMessagingViewEventBased: React.FC = () => {
     filteredAgents,
     currentChannel,
     currentDirectMessage,
+    currentAgentConversation,
     selectChannel,
   ])
 
@@ -456,13 +478,21 @@ const ThreadMessagingViewEventBased: React.FC = () => {
         replyToId,
         currentChannel,
         currentDirectMessage,
+        currentAgentConversation,
+        agentConversationTarget,
         isProjectChannel: isProjectChannelActive,
       })
       setSendingMessage(true)
 
       try {
         let success = false
-        if (currentChannel) {
+        if (agentConversationTarget) {
+          success = await sendDirectMessage(agentConversationTarget, content)
+          // TODO: Add attachment support for direct messages
+        } else if (currentAgentConversation) {
+          toast.error("This agent conversation is read-only.")
+          return
+        } else if (currentChannel) {
           // Check if this is a project channel
           const projectId = extractProjectIdFromChannel(currentChannel)
 
@@ -536,6 +566,8 @@ const ThreadMessagingViewEventBased: React.FC = () => {
     [
       currentChannel,
       currentDirectMessage,
+      currentAgentConversation,
+      agentConversationTarget,
       sendingMessage,
       sendChannelMessage,
       sendDirectMessage,
@@ -962,7 +994,7 @@ const ThreadMessagingViewEventBased: React.FC = () => {
                   }}
                   onReply={startReply}
                   onQuote={startQuote}
-                  isDMChat={!!currentDirectMessage}
+                  isDMChat={!!(currentDirectMessage || agentConversationTarget)}
                   disableReactions={isProjectChannelActive}
                   disableQuotes={isProjectChannelActive}
                   onMessageAction={handleMessageAction}
@@ -976,16 +1008,16 @@ const ThreadMessagingViewEventBased: React.FC = () => {
           </div>
 
           {/* Read-only banner for agent conversations */}
-          {currentAgentConversation && (
+          {currentAgentConversation && !agentConversationTarget && (
             <div className="px-4 py-2 text-xs text-center text-gray-400 bg-gray-50 dark:bg-zinc-900 border-t border-gray-200 dark:border-zinc-700">
               Read-only — agent-to-agent conversation ({currentAgentConversation.replace(",", " ↔ ")})
             </div>
           )}
 
-          {/* Message Input — hidden for agent conversation (read-only) */}
-          {(currentChannel || currentDirectMessage) && !currentAgentConversation && (
+          {/* Message Input */}
+          {(currentChannel || currentDirectMessage || agentConversationTarget) && (
             <MessageInput
-              agents={currentDirectMessage ? [] : filteredAgents}
+              agents={currentDirectMessage || agentConversationTarget ? [] : filteredAgents}
               onSendMessage={(
                 text: string,
                 replyTo?: string,
@@ -1041,6 +1073,8 @@ const ThreadMessagingViewEventBased: React.FC = () => {
               placeholder={
                 sendingMessage
                   ? "Sending..."
+                  : agentConversationTarget
+                  ? `Message ${agentConversationTarget}`
                   : currentChannel
                   ? `Message #${currentChannel}`
                   : currentDirectMessage
@@ -1048,9 +1082,9 @@ const ThreadMessagingViewEventBased: React.FC = () => {
                   : "Select a channel to start typing..."
               }
               currentTheme={currentTheme}
-              currentChannel={currentChannel || undefined}
-              currentDirectMessage={currentDirectMessage || undefined}
-              currentAgentId={connectionStatus.agentId || agentName || ""}
+              currentChannel={agentConversationTarget ? undefined : currentChannel || undefined}
+              currentDirectMessage={currentDirectMessage || agentConversationTarget || undefined}
+              currentAgentId={currentAgentId}
               currentAgentSecret={connector?.getSecret() || null}
               networkBaseUrl={connector?.getBaseUrl()}
               replyingTo={replyingTo}
diff --git a/sdk/studio/src/stores/chatStore.ts b/sdk/studio/src/stores/chatStore.ts
index 9a58fbe47..dd9112aa8 100644
--- a/sdk/studio/src/stores/chatStore.ts
+++ b/sdk/studio/src/stores/chatStore.ts
@@ -3139,7 +3139,11 @@ export const useChatStore = create<ChatState>((set, get) => ({
     }
 
     // If already has selection, skip default selection
-    if (state.currentChannel || state.currentDirectMessage) {
+    if (
+      state.currentChannel ||
+      state.currentDirectMessage ||
+      state.currentAgentConversation
+    ) {
       console.log(
         "ChatStore: Already has selection, skipping default initialization"
       );

From 40d84d27177cb2caef3f76968ed546f44d33591c Mon Sep 17 00:00:00 2001
From: Nich <nich@nixnet.com>
Date: Tue, 2 Jun 2026 09:29:37 +0100
Subject: [PATCH 9/9] Render active Studio agent DMs live

---
 sdk/studio/src/stores/chatStore.ts | 53 +++++++++++++++++++++++++-----
 1 file changed, 45 insertions(+), 8 deletions(-)

diff --git a/sdk/studio/src/stores/chatStore.ts b/sdk/studio/src/stores/chatStore.ts
index dd9112aa8..355c18cf1 100644
--- a/sdk/studio/src/stores/chatStore.ts
+++ b/sdk/studio/src/stores/chatStore.ts
@@ -27,6 +27,21 @@ const structuredMessageFields = (content: any) => {
   };
 };
 
+const activeAgentConversationKeyForTarget = (
+  currentAgentConversation: string | null,
+  currentAgentId: string | undefined,
+  targetAgentId: string | undefined
+): string | null => {
+  if (!currentAgentConversation || !currentAgentId || !targetAgentId) {
+    return null;
+  }
+  const [agentA, agentB] = currentAgentConversation.split(",", 2);
+  const matchesCurrentConversation =
+    (agentA === currentAgentId && agentB === targetAgentId) ||
+    (agentA === targetAgentId && agentB === currentAgentId);
+  return matchesCurrentConversation ? currentAgentConversation : null;
+};
+
 // Message sending status
 export type MessageStatus = "sending" | "sent" | "failed";
 
@@ -166,7 +181,8 @@ interface ChatState {
   ) => string;
   addOptimisticDirectMessage: (
     targetAgentId: string,
-    content: string
+    content: string,
+    storeKey?: string
   ) => string;
   replaceOptimisticMessage: (
     tempId: string,
@@ -906,10 +922,19 @@ export const useChatStore = create<ChatState>((set, get) => ({
       `ChatStore: Sending direct message to ${targetAgentId}: "${content}"`
     );
 
+    const currentAgentId = connection.getAgentId?.();
+    const storeKey =
+      activeAgentConversationKeyForTarget(
+        get().currentAgentConversation,
+        currentAgentId,
+        targetAgentId
+      ) || targetAgentId;
+
     // 1. Immediately add optimistic update message
     const tempId = get().addOptimisticDirectMessage(
       targetAgentId,
-      content.trim()
+      content.trim(),
+      storeKey
     );
 
     try {
@@ -1810,7 +1835,11 @@ export const useChatStore = create<ChatState>((set, get) => ({
   },
 
   // Optimistic update - add direct message
-  addOptimisticDirectMessage: (targetAgentId: string, content: string) => {
+  addOptimisticDirectMessage: (
+    targetAgentId: string,
+    content: string,
+    storeKey?: string
+  ) => {
     const connection = get().getConnection();
     const tempId = get().generateTempMessageId();
 
@@ -1826,7 +1855,7 @@ export const useChatStore = create<ChatState>((set, get) => ({
       tempId: tempId,
     };
 
-    get().addMessageToDirect(targetAgentId, optimisticMessage);
+    get().addMessageToDirect(storeKey || targetAgentId, optimisticMessage);
     return tempId;
   },
 
@@ -2674,11 +2703,12 @@ export const useChatStore = create<ChatState>((set, get) => ({
 
           // Determine the target agent for the conversation
           const connection = get().getConnection();
-          const currentAgentId = connection.getAgentId();
+          const currentAgentId = connection.getAgentId?.();
+          const senderId = event.source_id || messageData.sender_id;
           const targetAgentId =
-            messageData.sender_id === currentAgentId
+            senderId === currentAgentId
               ? messageData.target_agent_id
-              : messageData.sender_id;
+              : senderId;
 
           if (targetAgentId) {
             // // Check if it's own direct message
@@ -2715,7 +2745,14 @@ export const useChatStore = create<ChatState>((set, get) => ({
             //   }
             // }
 
-            get().addMessageToDirect(targetAgentId, unifiedMessage);
+            const storeKey =
+              activeAgentConversationKeyForTarget(
+                get().currentAgentConversation,
+                currentAgentId,
+                targetAgentId
+              ) || targetAgentId;
+
+            get().addMessageToDirect(storeKey, unifiedMessage);
           }
         }
       }