@parhelia/core 0.1.12221 → 0.1.12241

package/dist/editor/ai/AgentTerminal.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useEffect, useState, useRef, useCallback, useLayoutEffect, useMemo, } from "react";
 import { Send, AlertCircle, Loader2, User, Wand2, Square, Mic, MicOff, ChevronDown, ChevronUp, ListTodo, ArrowLeft, DollarSign, ExternalLink, Settings2, Target, Plus, X, } from "lucide-react";
-import { getAgent, startAgent, updateAgentSettings, updateAgentCostLimit, updateAgentContext, getAgentSkills, cancelAgent, canonicalizeAgentMetadata, getPendingPrompts, } from "../services/agentService";
+import { getAgent, startAgent, updateAgentSettings, updateAgentCostLimit, updateAgentContext, getAgentSkills, getAgentTriggerSubscriptions, cancelAgent, canonicalizeAgentMetadata, getPendingPrompts, } from "../services/agentService";
 import { useEditContext, useFieldsEditContext } from "../client/editContext";
 import { localStorageService } from "../services/localStorageService";
 import { Textarea } from "../../components/ui/textarea";
@@ -51,9 +51,19 @@ function buildPlaceholderAgentDetails(agentStub) {
 }
 // Simple user message component
 const UserMessage = ({ message }) => {
+    const content = message.content || "";
+    const [isTriggerExpanded, setIsTriggerExpanded] = useState(false);
+    // Trigger-sourced prompts are prefixed by backend as "[Trigger: {name}]: {content}"
+    const triggerPattern = /^\[Trigger: ([^\]]+)\]:\s*(.*)$/s;
+    const triggerMatch = content.match(triggerPattern);
+    const triggerName = triggerMatch?.[1]?.trim() || "";
+    const triggerContent = triggerMatch?.[2] || "";
+    const isTriggerMessage = triggerName.length > 0;
+    if (isTriggerMessage) {
+        return (_jsx("div", { className: "px-4 py-2", children: _jsxs("div", { className: "text-[11px]", children: [_jsxs("button", { type: "button", onClick: () => setIsTriggerExpanded((expanded) => !expanded), className: "text-theme-secondary hover:bg-theme-hover flex w-full items-center gap-2 rounded-md border-l-2 border-cyan-200 px-2 py-1 text-left transition-colors", "data-testid": "trigger-message-toggle", "data-expanded": isTriggerExpanded ? "true" : "false", children: [_jsx(Target, { className: "h-3.5 w-3.5 shrink-0", strokeWidth: 1.5 }), _jsxs("span", { className: "truncate font-medium", children: ["Trigger: ", triggerName] }), message.createdDate && (_jsx("span", { className: "ml-1 shrink-0 text-[10px] text-gray-400", children: formatTime(new Date(message.createdDate)) })), _jsx("span", { className: "ml-auto shrink-0", children: isTriggerExpanded ? (_jsx(ChevronUp, { className: "h-3.5 w-3.5" })) : (_jsx(ChevronDown, { className: "h-3.5 w-3.5" })) })] }), isTriggerExpanded && (_jsx("div", { className: "mt-1 border-l-2 border-cyan-100 pl-[1.35rem] text-[11px] text-gray-600", children: triggerContent }))] }) }));
+    }
     // Parse source agent name from content if it starts with "[From ...]:"
     // Backend formats messages from other agents as "[From {sourceAgentName}]: {content}"
-    const content = message.content || "";
     const fromPattern = /^\[From ([^\]]+)\]:\s*(.*)$/s;
     const match = content.match(fromPattern);
     let sourceAgentName;
@@ -766,6 +776,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
     const [selectedModelId, setSelectedModelId] = useState(undefined);
     const [mode, setMode] = useState("supervised");
     const [queuedPrompts, setQueuedPrompts] = useState([]);
+    const [expandedQueuedTriggerIds, setExpandedQueuedTriggerIds] = useState({});
     const isMobile = useMediaQuery("(max-width: 768px)");
     const [contextPanelsActiveTab, setContextPanelsActiveTab] = useState(0);
     const [hiddenContextPanelTabIds, setHiddenContextPanelTabIds] = useState(new Set());
@@ -775,6 +786,9 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
     const [availableSkills, setAvailableSkills] = useState([]);
     const [skillsLoading, setSkillsLoading] = useState(false);
     const [skillsError, setSkillsError] = useState(null);
+    const [triggerSubscriptions, setTriggerSubscriptions] = useState([]);
+    const [triggerSubscriptionsLoading, setTriggerSubscriptionsLoading] = useState(false);
+    const [triggerSubscriptionsError, setTriggerSubscriptionsError] = useState(null);
     const hasSpawnedAgents = useMemo(() => {
         if (!agentMetadata)
             return false;
@@ -896,6 +910,45 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
             active = false;
         };
     }, []);
+    useEffect(() => {
+        let active = true;
+        if (!showAgentSettings) {
+            return () => {
+                active = false;
+            };
+        }
+        if (!agent?.id || agent.status === "new") {
+            setTriggerSubscriptions([]);
+            setTriggerSubscriptionsError(null);
+            return () => {
+                active = false;
+            };
+        }
+        const loadTriggerSubscriptions = async () => {
+            try {
+                setTriggerSubscriptionsLoading(true);
+                setTriggerSubscriptionsError(null);
+                const subscriptions = await getAgentTriggerSubscriptions(agent.id);
+                if (active) {
+                    setTriggerSubscriptions(subscriptions);
+                }
+            }
+            catch (e) {
+                if (active) {
+                    setTriggerSubscriptionsError(e?.message || "Failed to load trigger subscriptions");
+                }
+            }
+            finally {
+                if (active) {
+                    setTriggerSubscriptionsLoading(false);
+                }
+            }
+        };
+        void loadTriggerSubscriptions();
+        return () => {
+            active = false;
+        };
+    }, [showAgentSettings, agent?.id, agent?.status]);
     const modeOptions = useMemo(() => [
         {
             value: "supervised",
@@ -965,6 +1018,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         }
         return unique;
     }, [backendAssignedSkillIds, metadataSelectedSkillIds]);
+    const activeTriggerSubscriptions = useMemo(() => triggerSubscriptions.filter((sub) => sub.isActive), [triggerSubscriptions]);
     const allowedProfileSkillIdSet = useMemo(() => {
         const ids = activeProfile?.allowedSkills
             ?.map((skill) => String(skill?.id || "").toLowerCase())
@@ -1077,6 +1131,17 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         });
         editContext.switchWorkspace("editor");
     }, [editContext, activeProfile?.id]);
+    const handleOpenSkillItem = useCallback(async (skillId) => {
+        if (!editContext || !skillId)
+            return;
+        const lang = editContext.currentItemDescriptor?.language || "en";
+        await editContext.loadItem({
+            id: skillId,
+            language: lang,
+            version: 0,
+        });
+        editContext.switchWorkspace("editor");
+    }, [editContext]);
     // Read deterministic flags from query string once
     let deterministicFlags;
     try {
@@ -2064,46 +2129,7 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                 })();
                 // Create context with top-level properties (what ContextInfoBar expects)
                 const localCtx = item && shouldSeedContext
-                    ? {
-                        items: [
-                            {
-                                id: item.id,
-                                language: item.language,
-                                version: item.version,
-                                name: editContext?.item?.name,
-                                path: editContext?.item?.path,
-                            },
-                        ],
-                        components: editContext?.selection?.length && item
-                            ? editContext.selection.map((componentId) => ({
-                                componentId,
-                                pageItem: {
-                                    id: item.id,
-                                    language: item.language,
-                                    version: item.version,
-                                    name: editContext?.item?.name,
-                                },
-                            }))
-                            : undefined,
-                        field: fieldsContext?.focusedField?.fieldId &&
-                            fieldsContext.focusedField?.item?.id
-                            ? {
-                                fieldId: fieldsContext.focusedField.fieldId,
-                                fieldName: fieldsContext.focusedField
-                                    .fieldName,
-                                item: {
-                                    id: fieldsContext.focusedField.item.id,
-                                    language: fieldsContext.focusedField.item.language ||
-                                        editContext?.currentItemDescriptor?.language ||
-                                        "en",
-                                    version: fieldsContext.focusedField.item.version ??
-                                        editContext?.currentItemDescriptor?.version ??
-                                        0,
-                                    name: editContext?.item?.name,
-                                },
-                            }
-                            : undefined,
-                    }
+                    ? buildEditorContextPayload(item)
                     : null;
                 let nextMetadata = null;
                 if (initialMetadata) {
@@ -3957,66 +3983,93 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
         }
         return context;
     }, [collectVisibleTestIds]);
-    // Helper function to build current context from editor state
-    const buildCurrentContext = useCallback(() => {
-        // Return context even without item - we want view info regardless
-        const item = editContext?.currentItemDescriptor;
-        return {
-            items: item
-                ? [
-                    {
-                        id: item.id,
-                        language: item.language,
-                        version: item.version,
-                        name: editContext?.item?.name,
-                        path: editContext?.item?.path,
-                    },
-                ]
-                : undefined,
-            currentItemId: item?.id, // ID of the currently loaded item user is viewing
-            components: editContext?.selection?.length && item
-                ? editContext.selection.map((componentId) => ({
-                    componentId,
-                    pageItem: {
-                        id: item.id,
-                        language: item.language,
-                        version: item.version,
-                        name: editContext?.item?.name,
-                    },
-                }))
-                : undefined,
-            field: fieldsContext?.focusedField?.fieldId &&
-                fieldsContext.focusedField?.item?.id
-                ? {
-                    fieldId: fieldsContext.focusedField.fieldId,
-                    fieldName: fieldsContext.focusedField.fieldName,
-                    item: {
-                        id: fieldsContext.focusedField.item.id,
-                        language: fieldsContext.focusedField.item.language ||
-                            editContext?.currentItemDescriptor?.language ||
-                            "en",
-                        version: fieldsContext.focusedField.item.version ??
-                            editContext?.currentItemDescriptor?.version ??
-                            0,
-                        name: editContext?.item?.name,
-                    },
+    const buildPageContextItem = useCallback((item) => ({
+        id: item.id,
+        language: item.language,
+        version: item.version,
+        name: editContext?.item?.name,
+        path: editContext?.item?.path,
+    }), [editContext?.item?.name, editContext?.item?.path]);
+    const buildComponentContext = useCallback((item) => {
+        if (!editContext?.selection?.length)
+            return undefined;
+        return editContext.selection.map((componentId) => {
+            let componentName;
+            let componentType;
+            let renderingItemId;
+            if (editContext.page) {
+                try {
+                    const component = getComponentById(componentId, editContext.page);
+                    componentName =
+                        component?.datasourceItem?.name || component?.name || undefined;
+                    componentType = component?.type || undefined;
+                    renderingItemId = component?.rendering?.id || undefined;
                 }
-                : undefined,
-            // View context - always include so agent knows editor state
-            activeWorkspace: editContext?.workspaceId,
-            hasPageLoaded: !!editContext?.getActiveSlotContext()?.primaryPageViewContext?.page,
-            // Open sidebars - helps agent understand what panels are currently visible
-            openSidebars: editContext?.openSidebars,
+                catch { }
+            }
+            return {
+                componentId,
+                componentName,
+                componentType,
+                renderingItemId,
+                pageItem: buildPageContextItem(item),
+            };
+        });
+    }, [buildPageContextItem, editContext?.page, editContext?.selection]);
+    const buildFieldContext = useCallback(() => {
+        const focusedField = fieldsContext?.focusedField;
+        if (!focusedField?.fieldId || !focusedField?.item?.id)
+            return undefined;
+        const fieldItem = focusedField.item;
+        const currentItem = editContext?.currentItemDescriptor;
+        let fieldItemName = fieldItem.id === currentItem?.id ? editContext?.item?.name : undefined;
+        if (!fieldItemName && editContext?.page) {
+            try {
+                const component = getComponentById(fieldItem.id, editContext.page);
+                fieldItemName =
+                    component?.datasourceItem?.name || component?.name || undefined;
+            }
+            catch { }
+        }
+        return {
+            fieldId: focusedField.fieldId,
+            fieldName: focusedField.fieldName,
+            item: {
+                id: fieldItem.id,
+                language: fieldItem.language || currentItem?.language || "en",
+                version: fieldItem.version ?? currentItem?.version ?? 0,
+                name: fieldItem.name || fieldItemName,
+            },
         };
     }, [
         editContext?.currentItemDescriptor,
-        editContext?.selection,
-        editContext?.workspaceId,
         editContext?.item?.name,
-        editContext?.activeSlotId,
-        editContext?.openSidebars,
+        editContext?.page,
         fieldsContext?.focusedField,
     ]);
+    const buildEditorContextPayload = useCallback((item) => ({
+        items: item ? [buildPageContextItem(item)] : undefined,
+        currentItemId: item?.id,
+        components: item ? buildComponentContext(item) : undefined,
+        field: buildFieldContext(),
+        activeWorkspace: editContext?.workspaceId,
+        hasPageLoaded: !!editContext?.getActiveSlotContext()?.primaryPageViewContext?.page,
+        openSidebars: editContext?.openSidebars,
+    }), [
+        buildComponentContext,
+        buildFieldContext,
+        buildPageContextItem,
+        editContext,
+    ]);
+    // Helper function to build current context from editor state
+    const buildCurrentContext = useCallback(() => {
+        // Return context even without item - we want view info regardless
+        const item = editContext?.currentItemDescriptor;
+        return buildEditorContextPayload(item);
+    }, [
+        buildEditorContextPayload,
+        editContext?.currentItemDescriptor,
+    ]);
     // Live context updates: watch for changes and update agent context when in "live" mode
     const previousContextRef = useRef("");
     useEffect(() => {
@@ -4474,12 +4527,36 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                             hasTodoContent,
                             hasSpawnedAgents,
                             agent?.id && hasHistoryContent,
-                        ].filter(Boolean).length - 1)), setActiveTab: setContextPanelsActiveTab, className: "justify-start px-4" }) })) : (_jsxs(_Fragment, { children: [renderContextInfoBar(), agent?.id && activeProfile && (_jsx(AgentDocumentList, { ref: documentListRef, agentId: agent.id, maxFileSizeMB: activeProfile.maxDocumentSizeMB ?? 10, enabled: activeProfile.enableDocumentUpload ?? false, profileId: activeProfile.id }, `${agent.id}-${agent.updatedDate || ""}-${activeProfile.id}`)), _jsx(TodoListPanel, { messages: messages, agentMetadata: agentMetadata }), _jsx(SpawnedAgentsPanel, { agentMetadata: agentMetadata }), agent?.id && _jsx(AgentEditOperationsPanel, { agentId: agent.id })] }))), queuedPrompts.length > 0 && !simpleMode && (_jsx("div", { className: "border-t border-gray-200 bg-amber-50/50", "data-testid": "queued-prompts-section", children: _jsxs("div", { className: "px-4 pt-3 pb-2", children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx("div", { className: "h-2 w-2 animate-pulse rounded-full bg-amber-500" }), _jsxs("span", { className: "text-[11px] font-semibold text-amber-900", "data-testid": "queued-prompts-count", children: ["Queued Messages (", queuedPrompts.length, ")"] })] }), _jsx("div", { className: "max-h-64 space-y-2 overflow-y-auto", children: queuedPrompts.map((qp) => (_jsx("div", { className: "rounded-md border border-amber-200 bg-white p-2.5 text-[11px]", "data-testid": "queued-prompt-item", children: _jsx("div", { className: "flex items-start justify-between gap-2", children: _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "mb-1 flex items-center gap-1.5", children: qp.sourceAgentName ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "font-medium text-gray-700", children: ["From ", qp.sourceAgentName] }), qp.priority > 5 && (_jsx("span", { className: "rounded bg-red-100 px-1.5 py-0.5 text-[11px] font-medium text-red-700", children: "High Priority" }))] })) : (_jsx("span", { className: "font-medium text-gray-700", children: "From User" })) }), _jsx("div", { className: "wrap-break-word whitespace-pre-wrap text-gray-600", "data-testid": "queued-prompt-text", children: qp.prompt }), _jsxs("div", { className: "mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[11px] text-gray-400", children: [qp.createdDate && (_jsxs("span", { children: ["Queued ", formatTime(new Date(qp.createdDate))] })), qp.scheduledFor &&
-                                                        new Date(qp.scheduledFor).getTime() >
-                                                            new Date(qp.createdDate || 0).getTime() + 1000 && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-gray-300", children: "\u2022" }), _jsxs("span", { className: "font-medium text-amber-600", children: ["Scheduled for", " ", new Date(qp.scheduledFor).toDateString() ===
-                                                                        new Date().toDateString()
-                                                                        ? formatTime(new Date(qp.scheduledFor))
-                                                                        : formatDateTime(new Date(qp.scheduledFor))] })] }))] })] }) }) }, qp.id))) })] }) })), activeInlineDialog &&
+                        ].filter(Boolean).length - 1)), setActiveTab: setContextPanelsActiveTab, className: "justify-start px-4" }) })) : (_jsxs(_Fragment, { children: [renderContextInfoBar(), agent?.id && activeProfile && (_jsx(AgentDocumentList, { ref: documentListRef, agentId: agent.id, maxFileSizeMB: activeProfile.maxDocumentSizeMB ?? 10, enabled: activeProfile.enableDocumentUpload ?? false, profileId: activeProfile.id }, `${agent.id}-${agent.updatedDate || ""}-${activeProfile.id}`)), _jsx(TodoListPanel, { messages: messages, agentMetadata: agentMetadata }), _jsx(SpawnedAgentsPanel, { agentMetadata: agentMetadata }), agent?.id && _jsx(AgentEditOperationsPanel, { agentId: agent.id })] }))), queuedPrompts.length > 0 && !simpleMode && (_jsx("div", { className: "border-t border-gray-200 bg-amber-50/50", "data-testid": "queued-prompts-section", children: _jsxs("div", { className: "px-4 pt-2.5 pb-2", children: [_jsxs("div", { className: "mb-1.5 flex items-center gap-1.5", children: [_jsx("div", { className: "h-1.5 w-1.5 animate-pulse rounded-full bg-amber-400" }), _jsxs("span", { className: "text-[10px] font-medium tracking-wide text-amber-600 uppercase", "data-testid": "queued-prompts-count", children: ["Queued (", queuedPrompts.length, ")"] })] }), _jsx("div", { className: "max-h-64 space-y-0.5 overflow-y-auto", children: queuedPrompts.map((qp) => {
+                                let triggerName = "";
+                                if (qp.data) {
+                                    try {
+                                        const parsed = JSON.parse(qp.data);
+                                        triggerName =
+                                            parsed?.TriggerName?.trim() ||
+                                                parsed?.triggerName?.trim() ||
+                                                "";
+                                    }
+                                    catch {
+                                        // Ignore invalid JSON metadata and render as regular queued prompt.
+                                    }
+                                }
+                                const isTriggerQueuedPrompt = !qp.sourceAgentName && triggerName.length > 0;
+                                const isTriggerExpanded = !!expandedQueuedTriggerIds[qp.id];
+                                if (isTriggerQueuedPrompt) {
+                                    return (_jsxs("div", { className: "text-[11px]", "data-testid": "queued-prompt-item", children: [_jsxs("button", { type: "button", onClick: () => setExpandedQueuedTriggerIds((prev) => ({
+                                                    ...prev,
+                                                    [qp.id]: !prev[qp.id],
+                                                })), className: "flex w-full items-center gap-1.5 rounded px-1 py-0.5 text-left text-amber-800 transition-colors hover:bg-amber-100/60", "data-testid": "queued-trigger-toggle", "data-expanded": isTriggerExpanded ? "true" : "false", children: [_jsx(Target, { className: "h-3 w-3 shrink-0 text-amber-500", strokeWidth: 2 }), _jsx("span", { className: "truncate font-medium", children: triggerName }), qp.createdDate && (_jsx("span", { className: "ml-1 shrink-0 text-[10px] text-amber-500", children: formatTime(new Date(qp.createdDate)) })), _jsx("span", { className: "ml-auto shrink-0 text-amber-400", children: isTriggerExpanded ? (_jsx(ChevronUp, { className: "h-3 w-3" })) : (_jsx(ChevronDown, { className: "h-3 w-3" })) })] }), isTriggerExpanded && (_jsx("div", { className: "mt-0.5 border-l-2 border-amber-200 pl-5 text-[11px] text-amber-700/80", children: qp.prompt }))] }, qp.id));
+                                }
+                                return (_jsx("div", { className: "rounded-md border border-amber-200 bg-white p-2.5 text-[11px]", "data-testid": "queued-prompt-item", children: _jsx("div", { className: "flex items-start justify-between gap-2", children: _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "mb-1 flex items-center gap-1.5", children: qp.sourceAgentName ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "font-medium text-gray-700", children: ["From ", qp.sourceAgentName] }), qp.priority > 5 && (_jsx("span", { className: "rounded bg-red-100 px-1.5 py-0.5 text-[11px] font-medium text-red-700", children: "High Priority" }))] })) : (_jsx("span", { className: "font-medium text-gray-700", children: "From User" })) }), _jsx("div", { className: "wrap-break-word whitespace-pre-wrap text-gray-600", "data-testid": "queued-prompt-text", children: qp.prompt }), _jsxs("div", { className: "mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[11px] text-gray-400", children: [qp.createdDate && (_jsxs("span", { children: ["Queued ", formatTime(new Date(qp.createdDate))] })), qp.scheduledFor &&
+                                                            new Date(qp.scheduledFor).getTime() >
+                                                                new Date(qp.createdDate || 0).getTime() +
+                                                                    1000 && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-gray-300", children: "\u2022" }), _jsxs("span", { className: "font-medium text-amber-600", children: ["Scheduled for", " ", new Date(qp.scheduledFor).toDateString() ===
+                                                                            new Date().toDateString()
+                                                                            ? formatTime(new Date(qp.scheduledFor))
+                                                                            : formatDateTime(new Date(qp.scheduledFor))] })] }))] })] }) }) }, qp.id));
+                            }) })] }) })), activeInlineDialog &&
                 (() => {
                     // Look up dialog component from config
                     const dialogRegistration = editContext?.configuration?.editor?.agentDialogs?.find((d) => d.dialogType === activeInlineDialog.request.dialogType);
@@ -4684,13 +4761,11 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                                                                             }
                                                                         } })] })) : null, _jsxs("div", { children: [_jsxs("div", { className: "mb-1 flex items-center gap-1 text-[11px] font-medium text-gray-700", children: [_jsx(Target, { className: "h-3 w-3", strokeWidth: 1 }), "Skills"] }), _jsx(Input, { value: skillSearchTerm, onChange: (e) => setSkillSearchTerm(e.target.value), placeholder: "Search skills...", className: "mb-2 h-6 px-2 text-[10px]" }), selectedSkillIds.length > 0 && (_jsx("div", { className: "mb-2 flex flex-wrap gap-1", children: selectedSkillIds.map((skillId) => {
                                                                             const skill = selectedSkills.find((s) => s.id === skillId);
-                                                                            return (_jsxs("button", { type: "button", className: "inline-flex items-center gap-1 rounded-full border border-gray-200 bg-gray-100 px-1.5 py-0.5 text-[10px] text-gray-700 hover:bg-gray-200", onClick: () => {
-                                                                                    if (backendAssignedSkillSet.has(skillId.toLowerCase()))
-                                                                                        return;
-                                                                                    void handleRemoveSkill(skillId);
-                                                                                }, disabled: backendAssignedSkillSet.has(skillId.toLowerCase()), title: backendAssignedSkillSet.has(skillId.toLowerCase())
-                                                                                    ? "Assigned by backend profile"
-                                                                                    : "Remove skill", children: [_jsx("span", { children: skill?.name || skillId }), backendAssignedSkillSet.has(skillId.toLowerCase()) ? (_jsx("span", { className: "text-[9px] text-gray-500", children: "auto" })) : (_jsx(X, { className: "h-2.5 w-2.5", strokeWidth: 1 }))] }, skillId));
+                                                                            return (_jsxs("div", { className: "inline-flex items-center gap-1 rounded-full border border-gray-200 bg-gray-100 px-1.5 py-0.5 text-[10px] text-gray-700", children: [_jsx("span", { children: skill?.name || skillId }), _jsx("button", { type: "button", className: "rounded p-0.5 text-gray-500 hover:bg-gray-200 hover:text-gray-700", title: "Open skill item", "aria-label": `Open ${skill?.name || skillId}`, onClick: () => {
+                                                                                            void handleOpenSkillItem(skillId);
+                                                                                        }, children: _jsx(ExternalLink, { className: "h-2.5 w-2.5", strokeWidth: 1.5 }) }), backendAssignedSkillSet.has(skillId.toLowerCase()) ? (_jsx("span", { className: "text-[9px] text-gray-500", children: "auto" })) : (_jsx("button", { type: "button", className: "rounded p-0.5 text-gray-500 hover:bg-gray-200 hover:text-gray-700", onClick: () => {
+                                                                                            void handleRemoveSkill(skillId);
+                                                                                        }, title: "Remove skill", "aria-label": `Remove ${skill?.name || skillId}`, children: _jsx(X, { className: "h-2.5 w-2.5", strokeWidth: 1 }) }))] }, skillId));
                                                                         }) })), _jsx("div", { className: "max-h-40 space-y-1 overflow-y-auto rounded border border-gray-200 bg-gray-50 p-1.5", children: skillsLoading ? (_jsx("div", { className: "px-1 text-[10px] text-gray-500", children: "Loading skills..." })) : filteredSelectableSkills.length > 0 ? (filteredSelectableSkills.map((skill) => (_jsxs("button", { type: "button", className: "flex w-full items-start gap-1 rounded px-1.5 py-1 text-left text-[10px] text-gray-700 hover:bg-gray-100", onClick: () => {
                                                                                 void handleAddSkill(skill.id);
                                                                                 setSkillSearchTerm("");
@@ -4698,7 +4773,10 @@ export function AgentTerminal({ agentStub, initialMetadata, profiles, isActive =
                                                                                 ? selectedSkillIds.length > 0
                                                                                     ? "All allowed skills are selected"
                                                                                     : "No skills available for this profile"
-                                                                                : "No skills match your search" })) }), !skillsLoading && selectableSkills.length > 0 && (_jsxs("div", { className: "mt-1 text-[10px] text-gray-500", children: ["Showing ", filteredSelectableSkills.length, " of ", selectableSkills.length] })), skillsError && (_jsx("div", { className: "mt-1 text-[10px] text-red-600", children: skillsError }))] })] }) })] }), activeProfile?.prompts?.length ? (_jsxs(Popover, { open: showPredefined, onOpenChange: setShowPredefined, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { className: "rounded p-1 hover:bg-gray-100", onClick: () => { }, title: "Predefined prompts", "aria-label": "Predefined prompts", type: "button", children: _jsx(Wand2, { className: "h-3 w-3", strokeWidth: 1 }) }) }), _jsx(PopoverContent, { className: "w-64 p-0", align: "start", children: _jsx("div", { className: "max-h-56 overflow-y-auto p-2", children: activeProfile.prompts.map((p, index) => (_jsx("div", { className: "cursor-pointer rounded p-1.5 text-[10px] text-gray-700 hover:bg-gray-100", onClick: () => {
+                                                                                : "No skills match your search" })) }), !skillsLoading && selectableSkills.length > 0 && (_jsxs("div", { className: "mt-1 text-[10px] text-gray-500", children: ["Showing ", filteredSelectableSkills.length, " of ", selectableSkills.length] })), skillsError && (_jsx("div", { className: "mt-1 text-[10px] text-red-600", children: skillsError }))] }), _jsxs("div", { children: [_jsx("div", { className: "mb-1 text-[11px] font-medium text-gray-700", children: "Subscribed triggers" }), _jsx("div", { className: "max-h-28 space-y-1 overflow-y-auto rounded border border-gray-200 bg-gray-50 p-1.5", children: triggerSubscriptionsLoading ? (_jsx("div", { className: "px-1 text-[10px] text-gray-500", children: "Loading subscribed triggers..." })) : activeTriggerSubscriptions.length > 0 ? (activeTriggerSubscriptions.map((sub) => {
+                                                                            const filterText = (sub.filter || "").trim();
+                                                                            return (_jsxs("div", { className: "rounded border border-gray-200 bg-white px-1.5 py-1", children: [_jsx("div", { className: "truncate text-[10px] font-medium text-gray-800", children: sub.triggerName }), filterText.length > 0 && (_jsxs("div", { className: "mt-0.5 line-clamp-2 break-all text-[9px] text-gray-500", children: ["filter: ", filterText] }))] }, sub.id));
+                                                                        })) : (_jsx("div", { className: "px-1 text-[10px] text-gray-500", children: "No active trigger subscriptions" })) }), triggerSubscriptionsError && (_jsx("div", { className: "mt-1 text-[10px] text-red-600", children: triggerSubscriptionsError }))] })] }) })] }), activeProfile?.prompts?.length ? (_jsxs(Popover, { open: showPredefined, onOpenChange: setShowPredefined, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { className: "rounded p-1 hover:bg-gray-100", onClick: () => { }, title: "Predefined prompts", "aria-label": "Predefined prompts", type: "button", children: _jsx(Wand2, { className: "h-3 w-3", strokeWidth: 1 }) }) }), _jsx(PopoverContent, { className: "w-64 p-0", align: "start", children: _jsx("div", { className: "max-h-56 overflow-y-auto p-2", children: activeProfile.prompts.map((p, index) => (_jsx("div", { className: "cursor-pointer rounded p-1.5 text-[10px] text-gray-700 hover:bg-gray-100", onClick: () => {
                                                                 setPrompt(p.prompt);
                                                                 setShowPredefined(false);
                                                                 if (textareaRef.current)