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

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

@@ -1,6 +1,3 @@
 export function defineBlokkliAgentTool(options) {
-  if ("resolve" in options) {
-    return { ...options, __factory: true };
-  }
   return options;
 }

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

@@ -16,13 +16,13 @@ const props = defineProps({
 });
 const { state } = useBlokkli();
 const contentEl = ref();
-marked.setOptions({ gfm: true, breaks: true });
 function renderContent(content) {
   const container = contentEl.value;
   if (!container) return;
   const ownerName = state.owner.value?.name || "";
   container.innerHTML = marked.parse(
-    content.replaceAll(PLACEHOLDER_USER_NAME, ownerName)
+    content.replaceAll(PLACEHOLDER_USER_NAME, ownerName),
+    { gfm: true, breaks: true }
   );
 }
 watch(

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

@@ -22,8 +22,7 @@ const props = defineProps({
   content: { type: String, required: true },
   attachments: { type: Array, required: false }
 });
-marked.setOptions({ gfm: true, breaks: true });
 const html = computed(() => {
-  return props.content ? marked.parse(props.content) : "";
+  return props.content ? marked.parse(props.content, { gfm: true, breaks: true }) : "";
 });
 </script>

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

@@ -47,7 +47,6 @@ import { computed } from "#imports";
 import Conversation from "../Conversation/index.vue";
 import PendingMutation from "../PendingMutation/index.vue";
 import { mcpTools } from "#blokkli-build/agent-client";
-import { isToolDefinition } from "#blokkli/agent/app/helpers";
 const mockContext = {
   app: null,
   itemEntityType: "paragraph",
@@ -153,7 +152,7 @@ const mockMutations = [
   }
 ];
 const toolsWithMockParams = computed(
-  () => mcpTools.filter(isToolDefinition).filter(
+  () => mcpTools.filter(
     (tool) => !!tool.component && !!tool.mockParams
   )
 );

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

@@ -4,6 +4,7 @@ type __VLS_Props = {
     isConnected: boolean;
     canSubmit: boolean;
     hasText: boolean;
+    hasConversation: boolean;
     usageTurns: UsageTurn[];
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

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

@@ -1,83 +1,90 @@
 <template>
   <div class="bk-agent-input-actions">
-    <div class="bk-agent-input-actions-left">
-      <Dropdown ref="dropdown" :disabled="!isConnected">
-        <template #button>
-          <div
-            class="bk-button bk-is-white bk-is-small bk-is-icon-only"
-            :title="$t('aiAgentMoreOptions', 'More options')"
-          >
-            <Icon name="bk_mdi_more_horiz" />
-          </div>
-        </template>
+    <TransitionHeight opacity>
+      <div v-if="isExpanded" class="bk-agent-input-actions-expanded">
         <TokenUsage :usage-turns />
-        <hr />
         <DropdownItem
-          icon="bk_mdi_add"
-          :text="$t('aiAgentNewConversation', 'Start new conversation')"
-          @click="onNewConversation"
+          icon="bk_mdi_bug_report"
+          :text="$t('aiAgentShowTranscript', 'Show transcript...')"
+          @click="$emit('show-transcript')"
         />
         <DropdownItem
-          icon="bk_mdi_history"
+          icon="bk_mdi_forum"
           :text="$t('aiAgentPastConversations', 'Past conversations')"
-          @click="onShowConversations"
+          :disabled="!isConnected"
+          @click="$emit('show-conversations')"
         />
-        <hr />
-        <DropdownItem
-          icon="bk_mdi_bug_report"
-          :text="$t('aiAgentShowTranscript', 'Show transcript...')"
-          @click="onShowTranscript"
-        />
-      </Dropdown>
-    </div>
-    <div class="bk-agent-input-actions-right">
-      <div v-show="hasText" class="bk-agent-input-actions-keyboard">
-        {{ $t("aiAgentNewLineHint", "Shift + Enter for new line") }}
       </div>
-      <button
-        v-if="isProcessing"
-        class="bk-button bk-is-danger bk-is-small bk-is-icon-only"
-        :disabled="!isConnected"
-        @click="$emit('cancel')"
-      >
-        <Icon name="bk_mdi_stop" />
-      </button>
-      <button
-        v-else
-        class="bk-button bk-is-primary bk-is-small bk-is-icon-only"
-        :disabled="!canSubmit"
-        @click="$emit('submit')"
-      >
-        <Icon name="bk_mdi_arrow_upward" />
-      </button>
+    </TransitionHeight>
+    <div class="bk-agent-input-actions-bar">
+      <div class="bk-agent-input-actions-left">
+        <button
+          class="bk-agent-input-actions-button"
+          :class="{ 'bk-is-active': isExpanded }"
+          :disabled="!isConnected"
+          @click="isExpanded = !isExpanded"
+        >
+          <Icon
+            :name="isExpanded ? 'bk_mdi_collapse_all' : 'bk_mdi_expand_all'"
+          />
+          <div v-if="!isExpanded" class="bk-tooltip">
+            <span>{{ $t("aiAgentExpandButton", "Show more") }}</span>
+          </div>
+        </button>
+        <button
+          v-show="!hasText && hasConversation"
+          class="bk-agent-input-actions-button"
+          :disabled="!isConnected"
+          @click="$emit('new-conversation')"
+        >
+          <Icon name="bk_mdi_add" />
+          <span>{{
+            $t("aiAgentNewConversation", "Start new conversation")
+          }}</span>
+        </button>
+      </div>
+      <div class="bk-agent-input-actions-right">
+        <div v-show="hasText" class="bk-agent-input-actions-keyboard">
+          {{ $t("textareaNewLineHint", "Shift + Enter for new line") }}
+        </div>
+        <button
+          v-if="isProcessing"
+          class="bk-button bk-is-danger bk-is-small bk-is-icon-only"
+          :disabled="!isConnected"
+          @click="$emit('cancel')"
+        >
+          <Icon name="bk_mdi_stop" />
+        </button>
+        <button
+          v-else
+          class="bk-button bk-is-primary bk-is-small bk-is-icon-only"
+          :disabled="!canSubmit"
+          @click="$emit('submit')"
+        >
+          <Icon name="bk_mdi_arrow_upward" />
+        </button>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { useTemplateRef, useBlokkli } from "#imports";
-import { Icon, Dropdown, DropdownItem } from "#blokkli/editor/components";
+import { ref, useBlokkli } from "#imports";
+import {
+  Icon,
+  DropdownItem,
+  TransitionHeight
+} from "#blokkli/editor/components";
 import TokenUsage from "./TokenUsage/index.vue";
 defineProps({
   isProcessing: { type: Boolean, required: true },
   isConnected: { type: Boolean, required: true },
   canSubmit: { type: Boolean, required: true },
   hasText: { type: Boolean, required: true },
+  hasConversation: { type: Boolean, required: true },
   usageTurns: { type: Array, required: true }
 });
-const emit = defineEmits(["submit", "cancel", "new-conversation", "show-transcript", "show-conversations"]);
+defineEmits(["submit", "cancel", "new-conversation", "show-transcript", "show-conversations"]);
 const { $t } = useBlokkli();
-const dropdown = useTemplateRef("dropdown");
-function onNewConversation() {
-  dropdown.value?.close();
-  emit("new-conversation");
-}
-function onShowConversations() {
-  dropdown.value?.close();
-  emit("show-conversations");
-}
-function onShowTranscript() {
-  dropdown.value?.close();
-  emit("show-transcript");
-}
+const isExpanded = ref(false);
 </script>

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

@@ -4,6 +4,7 @@ type __VLS_Props = {
     isConnected: boolean;
     canSubmit: boolean;
     hasText: boolean;
+    hasConversation: boolean;
     usageTurns: UsageTurn[];
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

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

@@ -4,7 +4,6 @@
     :class="{
   'bk-is-active': hasActivePlan
 }"
-    @paste.capture="onPaste"
   >
     <TransitionHeight opacity :duration="600">
       <div v-if="attachments.length" class="bk-agent-input-attachments">
@@ -26,6 +25,7 @@
           :max-height="150"
           submit-on-enter
           paste-markdown
+          :on-before-paste="onPaste"
           rows="2"
           :placeholder="placeholder"
           @submit="onSubmit"
@@ -39,6 +39,7 @@
       :can-submit="canSubmit"
       :usage-turns="usageTurns"
       :has-text
+      :has-conversation
       @submit="onSubmit"
       @cancel="$emit('cancel')"
       @new-conversation="$emit('new-conversation')"
@@ -79,23 +80,20 @@ const placeholder = computed(() => {
 const emit = defineEmits(["submit", "cancel", "new-conversation", "show-transcript", "show-conversations"]);
 const model = defineModel({ type: String, ...{ required: true } });
 const attachments = ref([]);
-function onPaste(e) {
-  const text = e.clipboardData?.getData("text/plain");
-  if (!text || text.length < ATTACHMENT_THRESHOLD) {
-    return;
+function onPaste(data) {
+  const content = data.toMarkdown();
+  if (!content || content.length < ATTACHMENT_THRESHOLD) {
+    return false;
   }
-  if (attachments.value.some((a) => a.content === text)) {
-    e.preventDefault();
-    e.stopPropagation();
-    return;
+  if (attachments.value.some((a) => a.content === content)) {
+    return true;
   }
-  e.preventDefault();
-  e.stopPropagation();
   attachments.value.push({
     type: "text",
     id: generateUUID(),
-    content: text
+    content
   });
+  return true;
 }
 function removeAttachment(id) {
   attachments.value = attachments.value.filter((a) => a.id !== id);

package/dist/modules/agent/runtime/app/features/agent/Panel/Welcome/de.md

@@ -10,10 +10,10 @@ brauchst:
 - **Vorlagen einfügen** aus der Vorlagenbibliothek
 - **Inhalte übersetzen** in andere Sprachen
 
-Ein paar Dinge, die du beachten solltest:
+Ein paar Dinge, die ich nicht kann:
 
 - **Speichern oder veröffentlichen** — das musst du selbst machen
-- **Andere Seiten bearbeiten** — ich kann nur auf der aktuellen Seite arbeiten
+- **Andere Seiten bearbeiten** — ich kann nur auf der aktuellen arbeiten
 - **Globale Inhalte löschen** wie Bilder, Videos oder Seiten
 
 Probier eines davon aus, um loszulegen:

package/dist/modules/agent/runtime/app/features/agent/Panel/Welcome/en.md

@@ -9,10 +9,10 @@ I can help you shape this page — just tell me what you need:
 - **Insert templates** from the template library
 - **Translate** content to other languages
 
-A few things to keep in mind:
+A few things I can't do:
 
 - **Save or publish** changes — you need to do that yourself
-- **Edit other pages** — I can only work on the current page
+- **Edit other pages** — I can only work on the current one
 - **Delete global content** like images, videos or pages
 
 Try one of these to get started:

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

@@ -121,7 +121,6 @@ import AgentInput from "./Input/index.vue";
 import ConversationList from "./ConversationList/index.vue";
 import Plan from "./Plan/index.vue";
 import { mcpTools } from "#blokkli-build/agent-client";
-import { isToolDefinition } from "#blokkli/agent/app/helpers";
 import { itemEntityType } from "#blokkli-build/config";
 const props = defineProps({
   agentName: { type: String, required: true },
@@ -158,12 +157,9 @@ const toolContext = computed(() => ({
   itemEntityType,
   adapter: app.adapter
 }));
-const staticTools = mcpTools.filter(isToolDefinition);
 const pendingToolComponent = computed(() => {
   if (!props.pendingToolCall) return null;
-  const tool = staticTools.find(
-    (t) => t.name === props.pendingToolCall.toolName
-  );
+  const tool = mcpTools.find((t) => t.name === props.pendingToolCall.toolName);
   return tool?.component || null;
 });
 const inputValue = ref("");

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

@@ -1,8 +1,8 @@
 <template>
   <PluginSidebar
     id="agent"
-    v-slot="{ isShown }"
     :title="agentName"
+    :tooltip-title
     :tour-text="
   $t('aiAgentTourText', 'Chat with an AI assistant to edit page content.')
 "
@@ -10,41 +10,48 @@
     weight="-900"
     render-always
     beta
+    region="right-bottom"
+    @toggle="closeAgentPopup"
   >
-    <AgentPanel
-      :is-shown
-      :debug-styling="DEBUG_STYLING"
-      :agent-name
-      :conversation
-      :active-item
-      :is-thinking
-      :is-processing
-      :is-connected
-      :has-been-ready
-      :pending-tool-call
-      :pending-mutation
-      :auto-approve
-      :conversation-list
-      :show-conversation-list
-      :plan
-      :usage-turns="usageTurns"
-      @connect="connect"
-      @send-prompt="sendPrompt"
-      @retry="retry"
-      @cancel="cancel"
-      @approve="approve"
-      @reject="reject"
-      @set-auto-approve="setAutoApprove"
-      @new-conversation="newConversation"
-      @get-transcript="getTranscript"
-      @tool-component-done="onToolComponentDone"
-      @switch-conversation="switchConversation"
-      @delete-conversation="deleteConversation"
-      @show-conversations="onShowConversations"
-      @hide-conversations="onHideConversations"
-      @approve-plan="approvePlan"
-      @reject-plan="rejectPlan"
-    />
+    <template #icon>
+      <Icon name="stars" class="bk-is-animated" />
+    </template>
+    <template #default="{ isShown }">
+      <AgentPanel
+        :is-shown
+        :debug-styling="DEBUG_STYLING"
+        :agent-name
+        :conversation
+        :active-item
+        :is-thinking
+        :is-processing
+        :is-connected
+        :has-been-ready
+        :pending-tool-call
+        :pending-mutation
+        :auto-approve
+        :conversation-list
+        :show-conversation-list
+        :plan
+        :usage-turns="usageTurns"
+        @connect="connect"
+        @send-prompt="sendPrompt"
+        @retry="retry"
+        @cancel="cancel"
+        @approve="approve"
+        @reject="reject"
+        @set-auto-approve="setAutoApprove"
+        @new-conversation="newConversation"
+        @get-transcript="getTranscript"
+        @tool-component-done="onToolComponentDone"
+        @switch-conversation="switchConversation"
+        @delete-conversation="deleteConversation"
+        @show-conversations="onShowConversations"
+        @hide-conversations="onHideConversations"
+        @approve-plan="approvePlan"
+        @reject-plan="rejectPlan"
+      />
+    </template>
   </PluginSidebar>
 
   <Teleport :to="ui.mainLayoutElement.value">
@@ -64,13 +71,37 @@
         />
       </DialogModal>
     </BlokkliTransition>
+
+    <Popup
+      id="agent"
+      ref="popup"
+      :title="$t('aiAgentPopupTitle', 'AI-Assistant')"
+      :cta="$t('aiAgentIntroPopupCta', 'Get started')"
+      theme="primary"
+      position="bottom-right"
+      @submit="openAgent"
+    >
+      <Icon name="stars" class="bk-is-animated" />
+      <p v-html="popupText" />
+    </Popup>
   </Teleport>
 </template>
 
 <script setup>
-import { useBlokkli, defineBlokkliFeature, onBeforeUnmount } from "#imports";
+import {
+  useBlokkli,
+  defineBlokkliFeature,
+  onBeforeUnmount,
+  computed,
+  useTemplateRef
+} from "#imports";
 import { PluginSidebar } from "#blokkli/editor/plugins";
-import { DialogModal, BlokkliTransition } from "#blokkli/editor/components";
+import {
+  DialogModal,
+  BlokkliTransition,
+  Icon,
+  Popup
+} from "#blokkli/editor/components";
 import agentProvider from "#blokkli/agent/app/composables/agentProvider";
 import { agentPrompts, agentName } from "#blokkli-build/agent-client";
 import AgentPanel from "./Panel/index.vue";
@@ -92,6 +123,27 @@ const { adapter } = defineBlokkliFeature({
 });
 const app = useBlokkli();
 const { $t, ui } = app;
+const popup = useTemplateRef("popup");
+function closeAgentPopup() {
+  if (popup.value) {
+    popup.value.closePopup();
+  }
+}
+function openAgent() {
+  app.eventBus.emit("sidebar:open", "agent");
+}
+const popupText = computed(() => {
+  return $t(
+    "aiAgentIntroPopup",
+    "Need help editing? @name is your AI assistant \u2014 it can add, move, and update blocks and much more. Give it a try!"
+  ).replace("@name", `<em>${agentName}</em>`);
+});
+const tooltipTitle = computed(() => {
+  return $t("agentSidebarTooltipLabel", "@name (AI-Assistant)").replace(
+    "@name",
+    agentName
+  );
+});
 const {
   isConnected,
   hasBeenReady,

package/dist/modules/agent/runtime/app/helpers/index.d.ts

@@ -1,5 +1,4 @@
-import type { McpToolDefinition, McpToolFactory, McpToolItem, McpToolContext, McpToolCategory, MutationAction, QueryResult, ToolError } from '#blokkli/agent/app/types';
-import type { ClientToolDefinition } from '#blokkli/agent/shared/types';
+import type { McpToolDefinition, McpToolContext, McpToolCategory, MutationAction, QueryResult, ToolError } from '#blokkli/agent/app/types';
 import type { BlokkliAdapter } from '#blokkli/editor/adapter';
 import type { EditMode } from '#blokkli/editor/types/state';
 /**
@@ -7,10 +6,20 @@ import type { EditMode } from '#blokkli/editor/types/state';
  */
 export declare function createToolMap(tools: McpToolDefinition[]): Record<string, McpToolDefinition>;
 /**
- * Get tools formatted for the server with JSON schemas.
+ * Get tool names for the server.
  * Filters by edit mode and adapter methods if provided.
+ * All tools are static and resolved from bundled metadata on the server.
  */
-export declare function getToolsForServer(tools: McpToolDefinition[], editMode: EditMode, adapter?: BlokkliAdapter<unknown>): ClientToolDefinition[];
+export declare function getToolInfoForServer(tools: McpToolDefinition[], editMode: EditMode, adapter?: BlokkliAdapter<unknown>): string[];
+/**
+ * Coerce stringified JSON values back to their actual types.
+ *
+ * LLMs sometimes double-serialize array or object parameters, sending e.g.
+ * `"[\"readability\"]"` (a string) instead of `["readability"]` (an array).
+ * This walks the params and attempts JSON.parse on any string that looks like
+ * a JSON array or object.
+ */
+export declare function coerceStringifiedParams(params: Record<string, unknown>): Record<string, unknown>;
 /**
  * Execute a tool by name with the given context and parameters.
  * Validates parameters with Zod before executing.
@@ -37,19 +46,7 @@ export declare function isQueryResult(result: unknown): result is QueryResult;
  */
 export declare function isToolError(result: unknown): result is ToolError;
 /**
- * Check if a tool item is a factory (produces tools dynamically at runtime).
- */
-export declare function isToolFactory(item: McpToolItem): item is McpToolFactory;
-/**
- * Check if a tool item is a static tool definition (not a factory).
- */
-export declare function isToolDefinition(item: McpToolItem): item is McpToolDefinition;
-/**
- * Resolve an array of tool items (static definitions + factories) into
- * a flat array of McpToolDefinition objects.
- *
- * Each factory's resolve callback is called to produce tools. The individual
- * tools returned by factories have their own requiredAdapterMethods, which
- * are checked later by getToolsForServer.
+ * Resolve an array of tool definitions into a flat array.
+ * All tools are now static — no factory resolution needed.
  */
-export declare function resolveTools(tools: McpToolItem[], context: McpToolContext): Promise<McpToolDefinition[]>;
+export declare function resolveTools(tools: McpToolDefinition[], _context: McpToolContext): Promise<McpToolDefinition[]>;

package/dist/modules/agent/runtime/app/helpers/index.js

@@ -1,24 +1,7 @@
-import { z } from "zod";
 export function createToolMap(tools) {
   return Object.fromEntries(tools.map((t) => [t.name, t]));
 }
-function stripSchemaOverhead(obj) {
-  if (Array.isArray(obj)) {
-    return obj.map(stripSchemaOverhead);
-  }
-  if (typeof obj === "object" && obj !== null) {
-    const result = {};
-    for (const [key, value] of Object.entries(obj)) {
-      if (key === "$schema") continue;
-      if (key === "additionalProperties" && value === false) continue;
-      if (key === "propertyNames") continue;
-      result[key] = stripSchemaOverhead(value);
-    }
-    return result;
-  }
-  return obj;
-}
-export function getToolsForServer(tools, editMode, adapter) {
+export function getToolInfoForServer(tools, editMode, adapter) {
   return tools.filter((tool) => {
     if (!tool.modes.includes(editMode)) return false;
     if (!tool.requiredAdapterMethods) return true;
@@ -26,23 +9,31 @@ export function getToolsForServer(tools, editMode, adapter) {
     return tool.requiredAdapterMethods.every(
       (method) => typeof adapter[method] === "function"
     );
-  }).map((tool) => ({
-    name: tool.name,
-    description: tool.description,
-    input_schema: stripSchemaOverhead(
-      z.toJSONSchema(tool.paramsSchema)
-    ),
-    ...tool.lazy ? { lazy: true } : {},
-    category: tool.category,
-    ...tool.volatile ? { volatile: true } : {}
-  }));
+  }).map((t) => t.name);
+}
+export function coerceStringifiedParams(params) {
+  const result = {};
+  for (const key of Object.keys(params)) {
+    const value = params[key];
+    if (typeof value === "string" && (value[0] === "[" || value[0] === "{")) {
+      try {
+        result[key] = JSON.parse(value);
+      } catch {
+        result[key] = value;
+      }
+    } else {
+      result[key] = value;
+    }
+  }
+  return result;
 }
 export async function executeTool(toolMap, name, context, params) {
   const tool = toolMap[name];
   if (!tool) {
     throw new Error(`Unknown tool: ${name}`);
   }
-  const validatedParams = tool.paramsSchema.parse(params);
+  const coerced = coerceStringifiedParams(params);
+  const validatedParams = tool.paramsSchema.parse(coerced);
   return tool.execute(context, validatedParams);
 }
 export function getToolCategory(toolMap, name) {
@@ -68,21 +59,6 @@ export function isQueryResult(result) {
 export function isToolError(result) {
   return typeof result === "object" && result !== null && "error" in result && typeof result.error === "string";
 }
-export function isToolFactory(item) {
-  return "__factory" in item && item.__factory === true;
-}
-export function isToolDefinition(item) {
-  return !isToolFactory(item);
-}
-export async function resolveTools(tools, context) {
-  const resolved = [];
-  for (const tool of tools) {
-    if (isToolFactory(tool)) {
-      const factoryTools = await tool.resolve(context);
-      resolved.push(...factoryTools);
-    } else {
-      resolved.push(tool);
-    }
-  }
-  return resolved;
+export async function resolveTools(tools, _context) {
+  return tools;
 }

package/dist/modules/agent/runtime/app/helpers/pageStructure.js

@@ -2,7 +2,7 @@ import {
   getFieldType,
   getEditableValue,
   getParagraphChildren
-} from "#blokkli/agent/app/tools/schemas";
+} from "#blokkli/agent/app/tools/helpers";
 import { itemEntityType } from "#blokkli-build/config";
 const MAX_CONTENT_LENGTH = 150;
 function stripHtml(html) {