@blokkli/editor 2.0.0-alpha.38 → 2.0.0-alpha.39

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@blokkli/editor",
   "configKey": "blokkli",
-  "version": "2.0.0-alpha.38",
+  "version": "2.0.0-alpha.39",
   "compatibility": {
     "nuxt": ">=3.15.0"
   },

package/dist/module.mjs

@@ -18,7 +18,7 @@ import { d as defineCodeTemplate, a as defineFileTemplate, w as withHelper } fro
 import { defu, createDefu } from 'defu';
 
 const name = "@blokkli/editor";
-const version = "2.0.0-alpha.38";
+const version = "2.0.0-alpha.39";
 
 function sortObjectKeys(obj) {
   if (Array.isArray(obj)) {
@@ -1555,6 +1555,7 @@ const USED_MATERIAL_ICONS = [
   "bk_mdi_info-fill",
   "bk_mdi_ink_selection",
   "bk_mdi_inventory",
+  "bk_mdi_keyboard_arrow_down",
   "bk_mdi_keyboard_command_key",
   "bk_mdi_lists",
   "bk_mdi_logo_dev",

package/dist/modules/agent/runtime/app/composables/agentProvider.d.ts

@@ -43,6 +43,7 @@ export type AgentProvider = {
     newConversation: () => void;
     getTranscript: () => void;
     onToolComponentDone: (result: unknown) => void;
+    toolDetails: Map<string, unknown>;
     transcriptContent: Ref<Transcript | null>;
     showTranscript: Ref<boolean>;
     conversationList: Ref<AgentConversationSummary[]>;

package/dist/modules/agent/runtime/app/composables/agentProvider.js

@@ -1,4 +1,4 @@
-import { ref, readonly, watch } from "#imports";
+import { ref, readonly, reactive, watch } from "#imports";
 import {
   conversationItemSchema
 } from "#blokkli/agent/app/types";
@@ -21,7 +21,8 @@ export default function(app, adapter, agentName) {
   let ws = null;
   let reconnectTimeout = null;
   let pingInterval = null;
-  let hasEverConnected = false;
+  let reconnectAttempts = 0;
+  const MAX_RECONNECT_ATTEMPTS = 10;
   const isConnected = ref(false);
   const isReady = ref(false);
   const hasBeenReady = ref(false);
@@ -43,6 +44,7 @@ export default function(app, adapter, agentName) {
   const activeConversationId = ref(null);
   const conversationList = ref([]);
   const showConversationList = ref(false);
+  const toolDetails = reactive(/* @__PURE__ */ new Map());
   async function saveCurrentConversation(serverState) {
     if (!adapter.agentConversations) return;
     if (!conversation.value.length) return;
@@ -177,15 +179,30 @@ export default function(app, adapter, agentName) {
   }
   function onWebSocketOpen() {
     isConnected.value = true;
+    reconnectAttempts = 0;
     pingInterval = window.setInterval(() => {
       send({ type: "ping" });
     }, 3e4);
     onConnect();
   }
   function onWebSocketClose() {
+    if (pingInterval) {
+      window.clearInterval(pingInterval);
+      pingInterval = null;
+    }
     isConnected.value = false;
     isReady.value = false;
     isProcessing.value = false;
+    reconnectAttempts++;
+    if (reconnectAttempts > MAX_RECONNECT_ATTEMPTS) {
+      conversation.value.push({
+        type: "error",
+        id: generateId(),
+        errorType: "connection",
+        timestamp: Date.now()
+      });
+      return;
+    }
     reconnectTimeout = window.setTimeout(() => {
       if (!isConnected.value) {
         connect();
@@ -204,8 +221,16 @@ export default function(app, adapter, agentName) {
     }
   }
   function connect() {
-    if (hasEverConnected) return;
-    hasEverConnected = true;
+    if (ws && (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING)) {
+      return;
+    }
+    if (ws) {
+      ws.removeEventListener("open", onWebSocketOpen);
+      ws.removeEventListener("close", onWebSocketClose);
+      ws.removeEventListener("error", onWebSocketError);
+      ws.removeEventListener("message", onWebSocketMessage);
+      ws = null;
+    }
     const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
     const url = `${protocol}//${window.location.host}/api/blokkli/agent`;
     ws = new WebSocket(url);
@@ -584,13 +609,29 @@ export default function(app, adapter, agentName) {
           timestamp
         });
         activeItem.value = null;
+        if (toolDef.buildDetails) {
+          try {
+            const detailsSource = typeof result === "object" && result !== null && "_details" in result ? result._details : result;
+            const details = toolDef.buildDetails(detailsSource);
+            if (details != null) {
+              toolDetails.set(callId, details);
+            }
+          } catch {
+          }
+        }
         let resultForServer = result;
-        if (toolDef.prunedSummary && typeof result === "object" && result !== null) {
+        if (typeof result === "object" && result !== null) {
+          if ("_details" in result) {
+            const { _details: _, ...rest } = result;
+            resultForServer = rest;
+          }
+        }
+        if (toolDef.prunedSummary && typeof resultForServer === "object" && resultForServer !== null) {
           try {
-            const summary = toolDef.prunedSummary(result);
+            const summary = toolDef.prunedSummary(resultForServer);
             if (summary) {
               resultForServer = {
-                ...result,
+                ...resultForServer,
                 _summary: summary
               };
             }
@@ -834,6 +875,7 @@ export default function(app, adapter, agentName) {
     activeConversationId.value = null;
     plan.value = null;
     usageTurns.value = [];
+    toolDetails.clear();
     send({ type: "new_conversation" });
   }
   function getTranscript() {
@@ -878,6 +920,8 @@ export default function(app, adapter, agentName) {
     newConversation,
     getTranscript,
     onToolComponentDone,
+    // Tool details (ephemeral)
+    toolDetails,
     // Transcript dialog state
     transcriptContent,
     showTranscript,

package/dist/modules/agent/runtime/app/features/agent/Panel/Attachment/PreviewCode/index.d.vue.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    content: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/modules/agent/runtime/app/features/agent/Panel/Attachment/PreviewCode/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <pre class="bk-agent-attachment-code"><code>{{ content }}</code></pre>
+</template>
+
+<script setup>
+defineProps({
+  content: { type: String, required: true }
+});
+</script>

package/dist/modules/agent/runtime/app/features/agent/Panel/Attachment/PreviewCode/index.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    content: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/modules/agent/runtime/app/features/agent/Panel/Attachment/PreviewCsv/index.d.vue.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    content: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/modules/agent/runtime/app/features/agent/Panel/Attachment/PreviewCsv/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <table class="bk-agent-attachment-table">
+    <thead>
+      <tr>
+        <th v-for="(cell, j) in headerRow" :key="j">{{ cell }}</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(row, i) in bodyRows" :key="i">
+        <td v-for="(cell, j) in row" :key="j">{{ cell }}</td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script setup>
+import { computed } from "#imports";
+const props = defineProps({
+  content: { type: String, required: true }
+});
+function parseRow(line) {
+  return line.split(",").map((cell) => cell.trim());
+}
+const headerRow = computed(() => {
+  const firstLine = props.content.trim().split("\n")[0];
+  return firstLine ? parseRow(firstLine) : [];
+});
+const bodyRows = computed(() => {
+  return props.content.trim().split("\n").slice(1).map(parseRow);
+});
+</script>

package/dist/modules/agent/runtime/app/features/agent/Panel/Attachment/PreviewCsv/index.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    content: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/modules/agent/runtime/app/features/agent/Panel/Attachment/PreviewHtml/index.d.vue.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    content: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/modules/agent/runtime/app/features/agent/Panel/Attachment/PreviewHtml/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <div
+    class="bk-agent-attachment-rendered bk-agent-message-text"
+    v-html="content"
+  />
+</template>
+
+<script setup>
+defineProps({
+  content: { type: String, required: true }
+});
+</script>

package/dist/modules/agent/runtime/app/features/agent/Panel/Attachment/PreviewHtml/index.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    content: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/modules/agent/runtime/app/features/agent/Panel/Attachment/PreviewMarkdown/index.d.vue.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    content: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/modules/agent/runtime/app/features/agent/Panel/Attachment/PreviewMarkdown/index.vue

@@ -0,0 +1,17 @@
+<template>
+  <div
+    class="bk-agent-attachment-rendered bk-agent-message-text"
+    v-html="html"
+  />
+</template>
+
+<script setup>
+import { computed } from "#imports";
+import { marked } from "marked";
+const props = defineProps({
+  content: { type: String, required: true }
+});
+const html = computed(() => {
+  return marked.parse(props.content, { gfm: true, breaks: true });
+});
+</script>

package/dist/modules/agent/runtime/app/features/agent/Panel/Attachment/PreviewMarkdown/index.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    content: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/modules/agent/runtime/app/features/agent/Panel/Attachment/index.vue

@@ -30,7 +30,7 @@
         class="bk-agent-attachment-modal"
         @cancel="showAttachment = false"
       >
-        <div>{{ attachment.content }}</div>
+        <component :is="previewComponent" :content="bodyContent" />
       </DialogModal>
     </BlokkliTransition>
   </Teleport>
@@ -43,6 +43,17 @@ import {
   BlokkliTransition,
   DialogModal
 } from "#blokkli/editor/components";
+import PreviewMarkdown from "./PreviewMarkdown/index.vue";
+import PreviewHtml from "./PreviewHtml/index.vue";
+import PreviewCode from "./PreviewCode/index.vue";
+import PreviewCsv from "./PreviewCsv/index.vue";
+const PREVIEW_COMPONENTS = {
+  markdown: PreviewMarkdown,
+  html: PreviewHtml,
+  code: PreviewCode,
+  csv: PreviewCsv,
+  plaintext: PreviewCode
+};
 const props = defineProps({
   attachment: { type: Object, required: true },
   removable: { type: Boolean, required: false }
@@ -50,12 +61,31 @@ const props = defineProps({
 defineEmits(["remove"]);
 const { $t, ui } = useBlokkli();
 const showAttachment = ref(false);
+const FILE_PREFIX = "--- File: ";
 const title = computed(() => {
   if (props.attachment.type === "text") {
+    const content = props.attachment.content;
+    if (content.startsWith(FILE_PREFIX)) {
+      const endIndex = content.indexOf(" ---\n");
+      if (endIndex !== -1) {
+        return content.slice(FILE_PREFIX.length, endIndex);
+      }
+    }
     return $t("aiAgentPastedText", "Pasted text");
   }
   return "";
 });
+const bodyContent = computed(() => {
+  const content = props.attachment.content;
+  const headerEnd = content.indexOf(" ---\n");
+  if (content.startsWith(FILE_PREFIX) && headerEnd !== -1) {
+    return content.slice(headerEnd + 5);
+  }
+  return content;
+});
+const previewComponent = computed(() => {
+  return PREVIEW_COMPONENTS[props.attachment.format];
+});
 const preview = computed(() => {
   return props.attachment.content.replace(/\s+/g, " ").trim().slice(0, 200);
 });

package/dist/modules/agent/runtime/app/features/agent/Panel/Conversation/Item/ServerTool/index.d.vue.ts

@@ -2,7 +2,7 @@ type __VLS_Props = {
     id: string;
     timestamp: number;
     type: 'server_tool';
-    tool: 'load_skill' | 'load_tools' | 'create_plan' | 'complete_plan_step' | 'plan_completed';
+    tool: 'load_skills' | 'load_tools' | 'create_plan' | 'complete_plan_step' | 'plan_completed';
     label: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/modules/agent/runtime/app/features/agent/Panel/Conversation/Item/ServerTool/index.vue

@@ -1,11 +1,13 @@
 <template>
   <div class="bk-agent-assistant-bubble bk-is-tool bk-is-server-tool">
     <div class="bk-agent-tool-call bk-is-server-tool">
-      <Icon
-        :name="getServerSideToolIcon(tool)"
-        class="bk-agent-tool-call-status"
-      />
-      <span>{{ serverToolLabel }}</span>
+      <div class="bk-agent-tool-call-inner">
+        <Icon
+          :name="getServerSideToolIcon(tool)"
+          class="bk-agent-tool-call-status"
+        />
+        <span>{{ serverToolLabel }}</span>
+      </div>
     </div>
   </div>
 </template>
@@ -22,7 +24,7 @@ const props = defineProps({
 });
 const { $t } = useBlokkli();
 const serverToolLabel = computed(() => {
-  if (props.tool === "load_skill") {
+  if (props.tool === "load_skills") {
     return $t("aiAgentLoadSkill", 'Using skill "@label"').replace(
       "@label",
       props.label
@@ -55,7 +57,7 @@ const serverToolLabel = computed(() => {
   return props.label;
 });
 function getServerSideToolIcon(id) {
-  if (id === "load_skill") {
+  if (id === "load_skills") {
     return "bk_mdi_book_2";
   }
   if (id === "create_plan") {

package/dist/modules/agent/runtime/app/features/agent/Panel/Conversation/Item/ServerTool/index.vue.d.ts

@@ -2,7 +2,7 @@ type __VLS_Props = {
     id: string;
     timestamp: number;
     type: 'server_tool';
-    tool: 'load_skill' | 'load_tools' | 'create_plan' | 'complete_plan_step' | 'plan_completed';
+    tool: 'load_skills' | 'load_tools' | 'create_plan' | 'complete_plan_step' | 'plan_completed';
     label: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/modules/agent/runtime/app/features/agent/Panel/Conversation/Item/Tool/index.d.vue.ts

@@ -1,3 +1,4 @@
+import { type Component } from '#imports';
 type __VLS_Props = {
     id: string;
     timestamp: number;
@@ -7,6 +8,8 @@ type __VLS_Props = {
     label: string;
     status: 'active' | 'success' | 'error';
     isActive?: boolean;
+    details?: unknown;
+    detailsComponent?: Component;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/modules/agent/runtime/app/features/agent/Panel/Conversation/Item/Tool/index.vue

@@ -1,17 +1,38 @@
 <template>
   <div class="bk-agent-assistant-bubble bk-is-tool">
     <div class="bk-agent-tool-call" :class="toolStatusClass">
-      <StatusIcon :status="toolStatus" />
-      <span class="bk-agent-tool-call-name">{{
-        label || formatToolName(tool)
-      }}</span>
+      <div class="bk-agent-tool-call-inner">
+        <StatusIcon :status="toolStatus" />
+        <span class="bk-agent-tool-call-name">{{
+          label || formatToolName(tool)
+        }}</span>
+        <button
+          v-if="details != null && detailsComponent"
+          class="bk-agent-tool-details-toggle"
+          :class="{ 'bk-is-expanded': isExpanded }"
+          @click="isExpanded = !isExpanded"
+        >
+          <Icon name="bk_mdi_keyboard_arrow_down" />
+        </button>
+      </div>
+      <TransitionHeight
+        v-if="details != null && detailsComponent"
+        :duration="200"
+        opacity
+      >
+        <div v-if="isExpanded" class="bk-agent-tool-details">
+          <div class="bk-agent-tool-details-inner">
+            <component :is="detailsComponent" :details="details" />
+          </div>
+        </div>
+      </TransitionHeight>
     </div>
   </div>
 </template>
 
 <script setup>
-import { computed } from "#imports";
-import { StatusIcon } from "#blokkli/editor/components";
+import { computed, ref } from "#imports";
+import { StatusIcon, Icon, TransitionHeight } from "#blokkli/editor/components";
 const props = defineProps({
   id: { type: String, required: true },
   timestamp: { type: Number, required: true },
@@ -20,8 +41,11 @@ const props = defineProps({
   tool: { type: String, required: true },
   label: { type: String, required: true },
   status: { type: String, required: true },
-  isActive: { type: Boolean, required: false }
+  isActive: { type: Boolean, required: false },
+  details: { type: null, required: false },
+  detailsComponent: { type: null, required: false }
 });
+const isExpanded = ref(false);
 const toolStatus = computed(() => {
   if (props.isActive) return "active";
   return props.status;

package/dist/modules/agent/runtime/app/features/agent/Panel/Conversation/Item/Tool/index.vue.d.ts

@@ -1,3 +1,4 @@
+import { type Component } from '#imports';
 type __VLS_Props = {
     id: string;
     timestamp: number;
@@ -7,6 +8,8 @@ type __VLS_Props = {
     label: string;
     status: 'active' | 'success' | 'error';
     isActive?: boolean;
+    details?: unknown;
+    detailsComponent?: Component;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/modules/agent/runtime/app/features/agent/Panel/Conversation/Item/index.d.vue.ts

@@ -2,6 +2,7 @@ import type { ConversationItem } from '#blokkli/agent/app/types';
 type __VLS_Props = {
     item: ConversationItem;
     isActive?: boolean;
+    toolDetails: Map<string, unknown>;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     retry: () => any;

package/dist/modules/agent/runtime/app/features/agent/Panel/Conversation/Item/index.vue

@@ -5,6 +5,8 @@
     v-else-if="item.type === 'tool'"
     v-bind="item"
     :is-active="isActive"
+    :details="toolItemDetails"
+    :details-component="toolItemDetailsComponent"
   />
   <ItemServerTool v-else-if="item.type === 'server_tool'" v-bind="item" />
   <ItemError
@@ -16,15 +18,29 @@
 </template>
 
 <script setup>
+import { computed } from "#imports";
 import ItemUser from "./User/index.vue";
 import ItemAssistant from "./Assistant/index.vue";
 import ItemTool from "./Tool/index.vue";
 import ItemServerTool from "./ServerTool/index.vue";
 import ItemError from "./Error/index.vue";
 import ItemUnknown from "./Unknown/index.vue";
-defineProps({
+import { mcpTools } from "#blokkli-build/agent-client";
+const props = defineProps({
   item: { type: null, required: true },
-  isActive: { type: Boolean, required: false }
+  isActive: { type: Boolean, required: false },
+  toolDetails: { type: Map, required: true }
 });
 const emit = defineEmits(["retry"]);
+const toolItemDetails = computed(() => {
+  const item = props.item;
+  if (item.type !== "tool") return void 0;
+  return props.toolDetails.get(item.callId);
+});
+const toolItemDetailsComponent = computed(() => {
+  const item = props.item;
+  if (item.type !== "tool" || !toolItemDetails.value) return void 0;
+  const tool = mcpTools.find((t) => t.name === item.tool);
+  return tool?.detailsComponent;
+});
 </script>

package/dist/modules/agent/runtime/app/features/agent/Panel/Conversation/Item/index.vue.d.ts

@@ -2,6 +2,7 @@ import type { ConversationItem } from '#blokkli/agent/app/types';
 type __VLS_Props = {
     item: ConversationItem;
     isActive?: boolean;
+    toolDetails: Map<string, unknown>;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     retry: () => any;

package/dist/modules/agent/runtime/app/features/agent/Panel/Conversation/index.d.vue.ts

@@ -3,6 +3,7 @@ type __VLS_Props = {
     history: ConversationItem[];
     activeItem: ActiveItem | null;
     isThinking: boolean;
+    toolDetails: Map<string, unknown>;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     retry: () => any;

package/dist/modules/agent/runtime/app/features/agent/Panel/Conversation/index.vue

@@ -4,12 +4,14 @@
       v-for="item in history"
       :key="item.id"
       :item="item"
+      :tool-details
       @retry="emit('retry')"
     />
     <ConversationItemComponent
       v-if="activeItem"
       :key="activeItem.id"
       :item="activeItem"
+      :tool-details
       is-active
     />
     <Thinking v-if="isThinking" />
@@ -20,10 +22,11 @@
 import ConversationItemComponent from "./Item/index.vue";
 import Thinking from "./Thinking/index.vue";
 import { useBlokkli } from "#imports";
-defineProps({
+const _props = defineProps({
   history: { type: Array, required: true },
   activeItem: { type: null, required: true },
-  isThinking: { type: Boolean, required: true }
+  isThinking: { type: Boolean, required: true },
+  toolDetails: { type: Map, required: true }
 });
 const emit = defineEmits(["retry"]);
 const UUID_REGEX = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;

package/dist/modules/agent/runtime/app/features/agent/Panel/Conversation/index.vue.d.ts

@@ -3,6 +3,7 @@ type __VLS_Props = {
     history: ConversationItem[];
     activeItem: ActiveItem | null;
     isThinking: boolean;
+    toolDetails: Map<string, unknown>;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     retry: () => any;

package/dist/modules/agent/runtime/app/features/agent/Panel/DebugGallery/index.vue

@@ -5,6 +5,7 @@
       :history="mockHistory"
       :active-item="mockActiveItem"
       :is-thinking="false"
+      :tool-details="/* @__PURE__ */ new Map()"
     />
 
     <h3>Pending Mutations</h3>
@@ -114,7 +115,7 @@ const mockHistory = [
     type: "tool",
     id: "call-4",
     callId: "call-4",
-    tool: "batch_rewrite_text",
+    tool: "update_text_fields",
     label: "Rewrite text",
     status: "success",
     timestamp: Date.now() - 58e3

package/dist/modules/agent/runtime/app/features/agent/Panel/DropHandler/index.d.vue.ts

@@ -0,0 +1,17 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    drop: (attachments: Attachment[]) => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onDrop?: ((attachments: Attachment[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};