@devicai/ui 0.6.1 → 0.7.0

package/dist/esm/components/ThreadStateTag/ThreadStateTag.js

@@ -0,0 +1,406 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { useOptionalDevicContext } from '../../provider/DevicContext.js';
+import { DevicApiClient } from '../../api/client.js';
+import { AgentThreadState } from '../../api/types.js';
+
+/* ── State configuration map ── */
+function getStateConfig(state, subthreadCount) {
+    const configs = {
+        [AgentThreadState.QUEUED]: {
+            color: 'gold', bgColor: '#fffbe6', borderColor: '#ffe58f',
+            text: 'Queued', iconType: null,
+        },
+        [AgentThreadState.PROCESSING]: {
+            color: 'processing', bgColor: '#e6f4ff', borderColor: '#91caff',
+            text: 'Processing', iconType: 'spinner',
+        },
+        [AgentThreadState.COMPLETED]: {
+            color: 'success', bgColor: '#f6ffed', borderColor: '#b7eb8f',
+            text: 'Completed', iconType: null,
+        },
+        [AgentThreadState.FAILED]: {
+            color: 'error', bgColor: '#fff2f0', borderColor: '#ffa39e',
+            text: 'Failed', iconType: null,
+        },
+        [AgentThreadState.TERMINATED]: {
+            color: 'default', bgColor: '#fafafa', borderColor: '#d9d9d9',
+            text: 'Terminated', iconType: null,
+        },
+        [AgentThreadState.GUARDRAIL_TRIGGER]: {
+            color: 'error', bgColor: '#fff2f0', borderColor: '#ffa39e',
+            text: 'Guardrail Triggered', iconType: 'shield',
+        },
+        [AgentThreadState.PAUSED]: {
+            color: 'purple', bgColor: '#f9f0ff', borderColor: '#d3adf7',
+            text: 'Paused', iconType: 'pause',
+        },
+        [AgentThreadState.PAUSED_FOR_APPROVAL]: {
+            color: 'gold', bgColor: '#fffbe6', borderColor: '#ffe58f',
+            text: 'Waiting for approval', iconType: 'warning',
+        },
+        [AgentThreadState.APPROVAL_REJECTED]: {
+            color: 'error', bgColor: '#fff2f0', borderColor: '#ffa39e',
+            text: 'Approval rejected', iconType: null,
+        },
+        [AgentThreadState.WAITING_FOR_RESPONSE]: {
+            color: 'gold', bgColor: '#fffbe6', borderColor: '#ffe58f',
+            text: 'Waiting for response', iconType: 'envelope',
+        },
+        [AgentThreadState.PAUSED_FOR_RESUME]: {
+            color: 'blue', bgColor: '#e6f4ff', borderColor: '#91caff',
+            text: 'Resume scheduled', iconType: 'clock',
+        },
+        [AgentThreadState.HANDED_OFF]: {
+            color: 'blue', bgColor: '#e6f4ff', borderColor: '#91caff',
+            text: subthreadCount && subthreadCount > 1 ? `Handed off (${subthreadCount})` : 'Handed off',
+            iconType: 'handoff',
+        },
+    };
+    return configs[state] || { color: 'default', bgColor: '#fafafa', borderColor: '#d9d9d9', text: 'Unknown', iconType: null };
+}
+/* ── SVG Icons ── */
+function SpinnerIcon() {
+    return (jsx("svg", { className: "devic-state-spinner", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", children: jsx("path", { d: "M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" }) }));
+}
+function PauseIcon() {
+    return (jsxs("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "currentColor", children: [jsx("rect", { x: "6", y: "4", width: "4", height: "16", rx: "1" }), jsx("rect", { x: "14", y: "4", width: "4", height: "16", rx: "1" })] }));
+}
+function PlayIcon() {
+    return (jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { d: "M8 5v14l11-7z" }) }));
+}
+function WarningIcon() {
+    return (jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" }) }));
+}
+function EnvelopeIcon() {
+    return (jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("rect", { x: "2", y: "4", width: "20", height: "16", rx: "2" }), jsx("path", { d: "M22 7l-10 7L2 7" })] }));
+}
+function ClockIcon() {
+    return (jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("circle", { cx: "12", cy: "12", r: "10" }), jsx("polyline", { points: "12,6 12,12 16,14" })] }));
+}
+function ShieldIcon() {
+    return (jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }), jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }), jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })] }));
+}
+function HandoffIcon() {
+    return (jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: [jsx("path", { d: "M12 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm-1 6h2a3 3 0 0 1 3 3v3h-2v-3a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v3H8v-3a3 3 0 0 1 3-3z" }), jsx("path", { d: "M16 16l4-2-4-2v4z", opacity: "0.8" })] }));
+}
+function CaretDownIcon() {
+    return (jsx("svg", { width: "12", height: "12", viewBox: "5 8 14 9", fill: "currentColor", children: jsx("path", { d: "M7 10l5 5 5-5z" }) }));
+}
+function WrenchIcon() {
+    return (jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsx("path", { d: "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" }) }));
+}
+function EyeIcon() {
+    return (jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }), jsx("circle", { cx: "12", cy: "12", r: "3" })] }));
+}
+function LightbulbIcon() {
+    return (jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "#FFC000", stroke: "#FFC000", strokeWidth: "1", children: jsx("path", { d: "M9 21h6M12 3a6 6 0 0 0-4 10.5V17h8v-3.5A6 6 0 0 0 12 3z", fill: "#FFC000", stroke: "none" }) }));
+}
+function CloseIcon() {
+    return (jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }));
+}
+function InfoIcon() {
+    return (jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" }) }));
+}
+/* ── Helper: render icon by type ── */
+function StateIcon({ iconType }) {
+    switch (iconType) {
+        case 'spinner': return jsx(SpinnerIcon, {});
+        case 'pause': return jsx(PauseIcon, {});
+        case 'warning': return jsx(WarningIcon, {});
+        case 'envelope': return jsx(EnvelopeIcon, {});
+        case 'clock': return jsx(ClockIcon, {});
+        case 'shield': return jsx(ShieldIcon, {});
+        case 'handoff': return jsx(HandoffIcon, {});
+        default: return null;
+    }
+}
+/* ── Modal component ── */
+function Modal({ open, onClose, title, titleIcon, children, footer, }) {
+    if (!open)
+        return null;
+    return (jsx("div", { className: "devic-state-modal-overlay", onClick: onClose, children: jsxs("div", { className: "devic-state-modal", onClick: (e) => e.stopPropagation(), children: [jsxs("div", { className: "devic-state-modal-header", children: [jsxs("h3", { className: "devic-state-modal-title", children: [titleIcon, title] }), jsx("button", { className: "devic-state-modal-close", onClick: onClose, type: "button", children: jsx(CloseIcon, {}) })] }), jsx("div", { className: "devic-state-modal-body", children: children }), footer && (jsx("div", { className: "devic-state-modal-footer", children: footer }))] }) }));
+}
+/* ── Explain Modal with typing effect ── */
+function ExplainModal({ open, onClose, explanation, isLoading, agentName, }) {
+    const [displayedText, setDisplayedText] = useState('');
+    const [fullTextDisplayed, setFullTextDisplayed] = useState(false);
+    const charIndexRef = useRef(0);
+    useEffect(() => {
+        if (!explanation || isLoading) {
+            setDisplayedText('');
+            charIndexRef.current = 0;
+            setFullTextDisplayed(false);
+            return;
+        }
+        if (charIndexRef.current < explanation.length) {
+            const timer = setTimeout(() => {
+                charIndexRef.current++;
+                setDisplayedText(explanation.slice(0, charIndexRef.current));
+                if (charIndexRef.current >= explanation.length) {
+                    setFullTextDisplayed(true);
+                }
+            }, 20);
+            return () => clearTimeout(timer);
+        }
+    }, [explanation, isLoading, displayedText]);
+    const handleClose = () => {
+        setDisplayedText('');
+        charIndexRef.current = 0;
+        setFullTextDisplayed(false);
+        onClose();
+    };
+    return (jsx(Modal, { open: open, onClose: handleClose, title: `Thread execution description of "${agentName}"`, titleIcon: jsx(LightbulbIcon, {}), children: isLoading ? (jsx("div", { className: "devic-state-loading", children: jsx("div", { className: "devic-state-loading-spinner" }) })) : (jsxs("div", { className: "devic-explain-content", children: [displayedText, !fullTextDisplayed && jsx("span", { className: "devic-typing-cursor", children: "|" })] })) }));
+}
+/* ── Approval Modal ── */
+function ApprovalModal({ open, onClose, onApprove, isLoading, pausedReason, }) {
+    const [feedback, setFeedback] = useState('');
+    const handleClose = () => {
+        setFeedback('');
+        onClose();
+    };
+    return (jsx(Modal, { open: open, onClose: handleClose, title: "Review Agent Request", titleIcon: jsx(EyeIcon, {}), children: jsxs("div", { className: "devic-approval-layout", children: [jsxs("div", { className: "devic-approval-request", children: [jsx("div", { style: { fontWeight: 600, marginBottom: 8, fontSize: 13 }, children: "Agent's request:" }), jsx("div", { style: { whiteSpace: 'pre-wrap' }, children: pausedReason || 'Agent is waiting for approval to resume execution.' })] }), jsxs("div", { className: "devic-approval-actions", children: [jsx("div", { style: { fontWeight: 600, fontSize: 13 }, children: "Your feedback:" }), jsx("textarea", { className: "devic-approval-textarea", value: feedback, onChange: (e) => setFeedback(e.target.value), placeholder: "Optional feedback for the agent..." }), jsxs("div", { className: "devic-approval-buttons", children: [jsx("button", { className: "devic-state-btn devic-state-btn-danger", onClick: () => onApprove('rejected', false, feedback), disabled: isLoading, type: "button", children: "Reject and finish" }), jsx("button", { className: "devic-state-btn devic-state-btn-primary", onClick: () => onApprove('rejected', true, feedback), disabled: isLoading || !feedback.trim(), type: "button", children: "Continue with feedback" }), jsx("button", { className: "devic-state-btn devic-state-btn-success", onClick: () => onApprove('approved', false), disabled: isLoading, type: "button", children: "Approve" })] })] })] }) }));
+}
+/* ── Complete Thread Modal ── */
+function CompleteModal({ open, onClose, onComplete, }) {
+    const [completionState, setCompletionState] = useState('terminated');
+    return (jsx(Modal, { open: open, onClose: onClose, title: "Complete Execution Manually", titleIcon: jsx(WrenchIcon, {}), footer: jsxs(Fragment, { children: [jsx("button", { className: "devic-state-btn", onClick: onClose, type: "button", children: "Cancel" }), jsx("button", { className: "devic-state-btn devic-state-btn-danger", onClick: () => onComplete(completionState), type: "button", children: "Complete" })] }), children: jsxs("div", { style: { marginBottom: 12 }, children: [jsx("div", { style: { fontWeight: 600, marginBottom: 4 }, children: "Confirm Manual Completion" }), jsx("p", { style: { margin: '4px 0 12px', color: '#666', fontSize: 13 }, children: "You are about to manually complete this agent's execution." }), jsxs("div", { style: { marginBottom: 12 }, children: [jsx("div", { style: { fontWeight: 500, marginBottom: 6, fontSize: 13 }, children: "Complete as:" }), jsxs("select", { className: "devic-completion-select", value: completionState, onChange: (e) => setCompletionState(e.target.value), children: [jsx("option", { value: "terminated", children: "Terminated - Finish thread as manually terminated" }), jsx("option", { value: "completed", children: "Completed - Finish thread as successfully completed" }), jsx("option", { value: "failed", children: "Failed - Finish thread as failed or with errors" })] })] }), jsxs("div", { className: "devic-state-warning", children: [jsx(InfoIcon, {}), jsx("span", { children: "This action will immediately terminate all ongoing processes. The execution cannot be resumed after completion." })] })] }) }));
+}
+/* ── Confirm Modal (Pause/Resume) ── */
+function ConfirmModal({ open, onClose, onConfirm, title, icon, message, confirmText, }) {
+    return (jsx(Modal, { open: open, onClose: onClose, title: title, titleIcon: icon, footer: jsxs(Fragment, { children: [jsx("button", { className: "devic-state-btn", onClick: onClose, type: "button", children: "Cancel" }), jsx("button", { className: "devic-state-btn devic-state-btn-primary", onClick: onConfirm, type: "button", children: confirmText })] }), children: jsx("p", { style: { margin: 0, color: '#666', fontSize: 14 }, children: message }) }));
+}
+/* ── Main ThreadStateTag ── */
+function ThreadStateTag({ state, threadId, agentName, showIcon = true, customIcon, pausedReason, approvalRejectedMessage, finishReason, onActionComplete, pauseUntil, subthreadCount, showAdminActions = false, apiKey, baseUrl, interactive = true, }) {
+    const context = useOptionalDevicContext();
+    const resolvedApiKey = apiKey || context?.apiKey;
+    const resolvedBaseUrl = baseUrl || context?.baseUrl || 'https://api.devic.ai';
+    // State
+    const [dropdownOpen, setDropdownOpen] = useState(false);
+    const [showTooltip, setShowTooltip] = useState(false);
+    const [explainModalOpen, setExplainModalOpen] = useState(false);
+    const [threadExplanation, setThreadExplanation] = useState(null);
+    const [isLoadingExplanation, setIsLoadingExplanation] = useState(false);
+    const [pauseModalOpen, setPauseModalOpen] = useState(false);
+    const [resumeModalOpen, setResumeModalOpen] = useState(false);
+    const [reviewModalOpen, setReviewModalOpen] = useState(false);
+    const [isLoadingApproval, setIsLoadingApproval] = useState(false);
+    const [completeModalOpen, setCompleteModalOpen] = useState(false);
+    const tagRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const [tooltipStyle, setTooltipStyle] = useState({});
+    const [dropdownStyle, setDropdownStyle] = useState({});
+    // Close dropdown on click outside
+    useEffect(() => {
+        if (!dropdownOpen)
+            return;
+        const handleClick = (e) => {
+            const target = e.target;
+            if (tagRef.current && !tagRef.current.contains(target) &&
+                (!dropdownRef.current || !dropdownRef.current.contains(target))) {
+                setDropdownOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClick);
+        return () => document.removeEventListener('mousedown', handleClick);
+    }, [dropdownOpen]);
+    // API client
+    const getClient = useCallback(() => {
+        if (!resolvedApiKey)
+            return null;
+        return new DevicApiClient({ apiKey: resolvedApiKey, baseUrl: resolvedBaseUrl });
+    }, [resolvedApiKey, resolvedBaseUrl]);
+    // Config
+    const config = getStateConfig(state, subthreadCount);
+    if (!state) {
+        return jsx("span", { className: "devic-state-tag", "data-color": "default", children: "Unknown" });
+    }
+    // Icon
+    const renderIcon = () => {
+        if (!showIcon)
+            return null;
+        if (customIcon)
+            return jsx("span", { className: "devic-state-tag-icon", children: customIcon });
+        const icon = jsx(StateIcon, { iconType: config.iconType });
+        return icon ? jsx("span", { className: "devic-state-tag-icon", children: icon }) : null;
+    };
+    // Tooltip content
+    const getTooltipContent = () => {
+        switch (state) {
+            case AgentThreadState.PAUSED_FOR_APPROVAL:
+                return 'Agent is waiting for approval to resume execution';
+            case AgentThreadState.PAUSED_FOR_RESUME:
+                if (pauseUntil) {
+                    const timeDiff = new Date(pauseUntil).getTime() - Date.now();
+                    const hours = Math.floor(timeDiff / 3600000);
+                    const minutes = Math.floor(timeDiff / 60000);
+                    const timeStr = hours > 0 ? `${hours} hours` : `${minutes} minutes`;
+                    return `Agent paused, will resume at ${new Date(pauseUntil).toLocaleString()} (${timeStr})`;
+                }
+                return 'Agent paused, will resume at a scheduled time';
+            case AgentThreadState.WAITING_FOR_RESPONSE:
+                return pausedReason || 'Agent is waiting for response';
+            case AgentThreadState.COMPLETED:
+            case AgentThreadState.FAILED:
+            case AgentThreadState.TERMINATED:
+                return finishReason || 'Manually finished thread';
+            case AgentThreadState.APPROVAL_REJECTED:
+                return approvalRejectedMessage || 'Approval was rejected';
+            case AgentThreadState.GUARDRAIL_TRIGGER:
+                return 'Agent execution paused due to guardrail trigger';
+            default:
+                return null;
+        }
+    };
+    // Handlers
+    const handleExplain = async () => {
+        setDropdownOpen(false);
+        setExplainModalOpen(true);
+        setIsLoadingExplanation(true);
+        setThreadExplanation(null);
+        const client = getClient();
+        if (!client) {
+            setThreadExplanation('API key not configured.');
+            setIsLoadingExplanation(false);
+            return;
+        }
+        try {
+            const explanation = await client.explainAgentThread(threadId);
+            setThreadExplanation(explanation);
+        }
+        catch {
+            setThreadExplanation('Could not obtain the thread explanation.');
+        }
+        finally {
+            setIsLoadingExplanation(false);
+        }
+    };
+    const handlePause = async () => {
+        const client = getClient();
+        if (!client)
+            return;
+        try {
+            await client.pauseResumeThread(threadId, 'paused');
+            setPauseModalOpen(false);
+            onActionComplete?.();
+        }
+        catch (err) {
+            console.error('Error pausing thread:', err);
+        }
+    };
+    const handleResume = async () => {
+        const client = getClient();
+        if (!client)
+            return;
+        try {
+            await client.pauseResumeThread(threadId, 'queued');
+            setResumeModalOpen(false);
+            onActionComplete?.();
+        }
+        catch (err) {
+            console.error('Error resuming thread:', err);
+        }
+    };
+    const handleApproval = async (action, retry, message) => {
+        const client = getClient();
+        if (!client)
+            return;
+        setIsLoadingApproval(true);
+        try {
+            await client.handleThreadApproval(threadId, action === 'approved', retry, message || '');
+            setReviewModalOpen(false);
+            onActionComplete?.();
+        }
+        catch (err) {
+            console.error('Error handling thread approval:', err);
+        }
+        finally {
+            setIsLoadingApproval(false);
+        }
+    };
+    const handleComplete = async (completionState) => {
+        const client = getClient();
+        if (!client)
+            return;
+        try {
+            await client.completeThread(threadId, completionState);
+            setCompleteModalOpen(false);
+            onActionComplete?.();
+        }
+        catch (err) {
+            console.error('Error completing thread:', err);
+        }
+    };
+    // Build dropdown items
+    const dropdownItems = [];
+    if (showAdminActions && [AgentThreadState.PROCESSING, AgentThreadState.QUEUED, AgentThreadState.WAITING_FOR_RESPONSE].includes(state)) {
+        dropdownItems.push({
+            key: 'complete',
+            icon: jsx(WrenchIcon, {}),
+            label: 'Complete manually',
+            onClick: () => { setDropdownOpen(false); setCompleteModalOpen(true); },
+        });
+    }
+    if (state === AgentThreadState.QUEUED) {
+        dropdownItems.push({
+            key: 'pause',
+            icon: jsx(PauseIcon, {}),
+            label: 'Pause',
+            onClick: () => { setDropdownOpen(false); setPauseModalOpen(true); },
+        });
+    }
+    if (state === AgentThreadState.PAUSED || state === AgentThreadState.PAUSED_FOR_RESUME) {
+        dropdownItems.push({
+            key: 'resume',
+            icon: jsx(PlayIcon, {}),
+            label: 'Resume',
+            onClick: () => { setDropdownOpen(false); setResumeModalOpen(true); },
+        });
+    }
+    if (state === AgentThreadState.PAUSED_FOR_APPROVAL) {
+        dropdownItems.push({
+            key: 'review',
+            icon: jsx(EyeIcon, {}),
+            label: 'Review',
+            onClick: () => { setDropdownOpen(false); setReviewModalOpen(true); },
+        });
+    }
+    dropdownItems.push({
+        key: 'explain',
+        icon: jsx(LightbulbIcon, {}),
+        label: 'Explain thread...',
+        onClick: handleExplain,
+    });
+    const canInteract = interactive && threadId;
+    const tooltipContent = getTooltipContent();
+    return (jsxs(Fragment, { children: [jsxs("div", { ref: tagRef, className: "devic-state-tag", "data-color": config.color, "data-interactive": String(!!canInteract), "data-dropdown-open": String(dropdownOpen), onClick: canInteract ? () => {
+                    if (!dropdownOpen) {
+                        const rect = tagRef.current?.getBoundingClientRect();
+                        if (rect) {
+                            setDropdownStyle({
+                                position: 'fixed',
+                                top: rect.bottom + 4,
+                                right: window.innerWidth - rect.right,
+                            });
+                        }
+                    }
+                    setDropdownOpen(!dropdownOpen);
+                } : undefined, onMouseEnter: () => {
+                    if (!dropdownOpen && tooltipContent) {
+                        const rect = tagRef.current?.getBoundingClientRect();
+                        if (rect) {
+                            setTooltipStyle({
+                                position: 'fixed',
+                                top: rect.top - 8,
+                                left: rect.left + rect.width / 2,
+                                transform: 'translate(-50%, -100%)',
+                            });
+                        }
+                        setShowTooltip(true);
+                    }
+                }, onMouseLeave: () => setShowTooltip(false), children: [renderIcon(), config.text, canInteract && (jsx("span", { className: "devic-state-tag-caret", children: jsx(CaretDownIcon, {}) }))] }), showTooltip && tooltipContent && !dropdownOpen && createPortal(jsx("div", { className: "devic-state-tooltip-portal", style: tooltipStyle, children: tooltipContent }), document.body), dropdownOpen && canInteract && createPortal(jsx("div", { ref: dropdownRef, className: "devic-state-dropdown-portal", style: dropdownStyle, children: dropdownItems.map((item) => (jsxs("button", { className: "devic-state-dropdown-item", onClick: (e) => { e.stopPropagation(); item.onClick(); }, type: "button", children: [jsx("span", { className: "devic-state-dropdown-item-icon", children: item.icon }), item.label] }, item.key))) }), document.body), jsx(ExplainModal, { open: explainModalOpen, onClose: () => setExplainModalOpen(false), explanation: threadExplanation, isLoading: isLoadingExplanation, agentName: agentName }), jsx(CompleteModal, { open: completeModalOpen, onClose: () => setCompleteModalOpen(false), onComplete: handleComplete }), jsx(ConfirmModal, { open: pauseModalOpen, onClose: () => setPauseModalOpen(false), onConfirm: handlePause, title: "Pause Thread", icon: jsx(PauseIcon, {}), message: "You are about to pause this queued thread. It can be resumed later.", confirmText: "Pause" }), jsx(ConfirmModal, { open: resumeModalOpen, onClose: () => setResumeModalOpen(false), onConfirm: handleResume, title: "Resume Thread", icon: jsx(PlayIcon, {}), message: "You are about to resume this thread. It will go back to the queue and be processed when possible.", confirmText: "Resume" }), jsx(ApprovalModal, { open: reviewModalOpen, onClose: () => setReviewModalOpen(false), onApprove: handleApproval, isLoading: isLoadingApproval, pausedReason: pausedReason })] }));
+}
+
+export { ThreadStateTag };
+//# sourceMappingURL=ThreadStateTag.js.map

package/dist/esm/components/ThreadStateTag/ThreadStateTag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThreadStateTag.js","sources":["../../../../src/components/ThreadStateTag/ThreadStateTag.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useCallback } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useOptionalDevicContext } from '../../provider';\nimport { DevicApiClient } from '../../api/client';\nimport { AgentThreadState } from '../../api/types';\nimport type { ThreadStateTagProps, StateConfig } from './ThreadStateTag.types';\nimport './ThreadStateTag.css';\n\n/* ── State configuration map ── */\n\nfunction getStateConfig(state: string, subthreadCount?: number): StateConfig {\n  const configs: Record<string, StateConfig> = {\n    [AgentThreadState.QUEUED]: {\n      color: 'gold', bgColor: '#fffbe6', borderColor: '#ffe58f',\n      text: 'Queued', iconType: null,\n    },\n    [AgentThreadState.PROCESSING]: {\n      color: 'processing', bgColor: '#e6f4ff', borderColor: '#91caff',\n      text: 'Processing', iconType: 'spinner',\n    },\n    [AgentThreadState.COMPLETED]: {\n      color: 'success', bgColor: '#f6ffed', borderColor: '#b7eb8f',\n      text: 'Completed', iconType: null,\n    },\n    [AgentThreadState.FAILED]: {\n      color: 'error', bgColor: '#fff2f0', borderColor: '#ffa39e',\n      text: 'Failed', iconType: null,\n    },\n    [AgentThreadState.TERMINATED]: {\n      color: 'default', bgColor: '#fafafa', borderColor: '#d9d9d9',\n      text: 'Terminated', iconType: null,\n    },\n    [AgentThreadState.GUARDRAIL_TRIGGER]: {\n      color: 'error', bgColor: '#fff2f0', borderColor: '#ffa39e',\n      text: 'Guardrail Triggered', iconType: 'shield',\n    },\n    [AgentThreadState.PAUSED]: {\n      color: 'purple', bgColor: '#f9f0ff', borderColor: '#d3adf7',\n      text: 'Paused', iconType: 'pause',\n    },\n    [AgentThreadState.PAUSED_FOR_APPROVAL]: {\n      color: 'gold', bgColor: '#fffbe6', borderColor: '#ffe58f',\n      text: 'Waiting for approval', iconType: 'warning',\n    },\n    [AgentThreadState.APPROVAL_REJECTED]: {\n      color: 'error', bgColor: '#fff2f0', borderColor: '#ffa39e',\n      text: 'Approval rejected', iconType: null,\n    },\n    [AgentThreadState.WAITING_FOR_RESPONSE]: {\n      color: 'gold', bgColor: '#fffbe6', borderColor: '#ffe58f',\n      text: 'Waiting for response', iconType: 'envelope',\n    },\n    [AgentThreadState.PAUSED_FOR_RESUME]: {\n      color: 'blue', bgColor: '#e6f4ff', borderColor: '#91caff',\n      text: 'Resume scheduled', iconType: 'clock',\n    },\n    [AgentThreadState.HANDED_OFF]: {\n      color: 'blue', bgColor: '#e6f4ff', borderColor: '#91caff',\n      text: subthreadCount && subthreadCount > 1 ? `Handed off (${subthreadCount})` : 'Handed off',\n      iconType: 'handoff',\n    },\n  };\n\n  return configs[state] || { color: 'default', bgColor: '#fafafa', borderColor: '#d9d9d9', text: 'Unknown', iconType: null };\n}\n\n/* ── SVG Icons ── */\n\nfunction SpinnerIcon(): JSX.Element {\n  return (\n    <svg className=\"devic-state-spinner\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\">\n      <path d=\"M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83\" />\n    </svg>\n  );\n}\n\nfunction PauseIcon(): JSX.Element {\n  return (\n    <svg width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <rect x=\"6\" y=\"4\" width=\"4\" height=\"16\" rx=\"1\" />\n      <rect x=\"14\" y=\"4\" width=\"4\" height=\"16\" rx=\"1\" />\n    </svg>\n  );\n}\n\nfunction PlayIcon(): JSX.Element {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <path d=\"M8 5v14l11-7z\" />\n    </svg>\n  );\n}\n\nfunction WarningIcon(): JSX.Element {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\" />\n    </svg>\n  );\n}\n\nfunction EnvelopeIcon(): JSX.Element {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\" />\n      <path d=\"M22 7l-10 7L2 7\" />\n    </svg>\n  );\n}\n\nfunction ClockIcon(): JSX.Element {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <circle cx=\"12\" cy=\"12\" r=\"10\" />\n      <polyline points=\"12,6 12,12 16,14\" />\n    </svg>\n  );\n}\n\nfunction ShieldIcon(): JSX.Element {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\" />\n      <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\" />\n      <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\" />\n    </svg>\n  );\n}\n\nfunction HandoffIcon(): JSX.Element {\n  return (\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <path d=\"M12 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm-1 6h2a3 3 0 0 1 3 3v3h-2v-3a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v3H8v-3a3 3 0 0 1 3-3z\" />\n      <path d=\"M16 16l4-2-4-2v4z\" opacity=\"0.8\" />\n    </svg>\n  );\n}\n\nfunction CaretDownIcon(): JSX.Element {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"5 8 14 9\" fill=\"currentColor\">\n      <path d=\"M7 10l5 5 5-5z\" />\n    </svg>\n  );\n}\n\nfunction WrenchIcon(): JSX.Element {\n  return (\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <path d=\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\" />\n    </svg>\n  );\n}\n\nfunction EyeIcon(): JSX.Element {\n  return (\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\" />\n      <circle cx=\"12\" cy=\"12\" r=\"3\" />\n    </svg>\n  );\n}\n\nfunction LightbulbIcon(): JSX.Element {\n  return (\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"#FFC000\" stroke=\"#FFC000\" strokeWidth=\"1\">\n      <path d=\"M9 21h6M12 3a6 6 0 0 0-4 10.5V17h8v-3.5A6 6 0 0 0 12 3z\" fill=\"#FFC000\" stroke=\"none\" />\n    </svg>\n  );\n}\n\nfunction RobotIcon(): JSX.Element {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <rect x=\"4\" y=\"8\" width=\"16\" height=\"12\" rx=\"2\" />\n      <circle cx=\"9\" cy=\"14\" r=\"2\" fill=\"#fff\" />\n      <circle cx=\"15\" cy=\"14\" r=\"2\" fill=\"#fff\" />\n      <line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"8\" stroke=\"currentColor\" strokeWidth=\"2\" />\n      <circle cx=\"12\" cy=\"2\" r=\"1.5\" />\n    </svg>\n  );\n}\n\nfunction UserIcon(): JSX.Element {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\" />\n    </svg>\n  );\n}\n\nfunction CloseIcon(): JSX.Element {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n    </svg>\n  );\n}\n\nfunction InfoIcon(): JSX.Element {\n  return (\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\" />\n    </svg>\n  );\n}\n\n/* ── Helper: render icon by type ── */\n\nfunction StateIcon({ iconType }: { iconType: string | null }): JSX.Element | null {\n  switch (iconType) {\n    case 'spinner': return <SpinnerIcon />;\n    case 'pause': return <PauseIcon />;\n    case 'warning': return <WarningIcon />;\n    case 'envelope': return <EnvelopeIcon />;\n    case 'clock': return <ClockIcon />;\n    case 'shield': return <ShieldIcon />;\n    case 'handoff': return <HandoffIcon />;\n    default: return null;\n  }\n}\n\n/* ── Modal component ── */\n\nfunction Modal({\n  open,\n  onClose,\n  title,\n  titleIcon,\n  children,\n  footer,\n}: {\n  open: boolean;\n  onClose: () => void;\n  title: string;\n  titleIcon?: React.ReactNode;\n  children: React.ReactNode;\n  footer?: React.ReactNode;\n}): JSX.Element | null {\n  if (!open) return null;\n\n  return (\n    <div className=\"devic-state-modal-overlay\" onClick={onClose}>\n      <div className=\"devic-state-modal\" onClick={(e) => e.stopPropagation()}>\n        <div className=\"devic-state-modal-header\">\n          <h3 className=\"devic-state-modal-title\">\n            {titleIcon}\n            {title}\n          </h3>\n          <button className=\"devic-state-modal-close\" onClick={onClose} type=\"button\">\n            <CloseIcon />\n          </button>\n        </div>\n        <div className=\"devic-state-modal-body\">\n          {children}\n        </div>\n        {footer && (\n          <div className=\"devic-state-modal-footer\">\n            {footer}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\n/* ── Explain Modal with typing effect ── */\n\nfunction ExplainModal({\n  open,\n  onClose,\n  explanation,\n  isLoading,\n  agentName,\n}: {\n  open: boolean;\n  onClose: () => void;\n  explanation: string | null;\n  isLoading: boolean;\n  agentName: string;\n}): JSX.Element | null {\n  const [displayedText, setDisplayedText] = useState('');\n  const [fullTextDisplayed, setFullTextDisplayed] = useState(false);\n  const charIndexRef = useRef(0);\n\n  useEffect(() => {\n    if (!explanation || isLoading) {\n      setDisplayedText('');\n      charIndexRef.current = 0;\n      setFullTextDisplayed(false);\n      return;\n    }\n\n    if (charIndexRef.current < explanation.length) {\n      const timer = setTimeout(() => {\n        charIndexRef.current++;\n        setDisplayedText(explanation.slice(0, charIndexRef.current));\n        if (charIndexRef.current >= explanation.length) {\n          setFullTextDisplayed(true);\n        }\n      }, 20);\n      return () => clearTimeout(timer);\n    }\n  }, [explanation, isLoading, displayedText]);\n\n  const handleClose = () => {\n    setDisplayedText('');\n    charIndexRef.current = 0;\n    setFullTextDisplayed(false);\n    onClose();\n  };\n\n  return (\n    <Modal\n      open={open}\n      onClose={handleClose}\n      title={`Thread execution description of \"${agentName}\"`}\n      titleIcon={<LightbulbIcon />}\n    >\n      {isLoading ? (\n        <div className=\"devic-state-loading\">\n          <div className=\"devic-state-loading-spinner\" />\n        </div>\n      ) : (\n        <div className=\"devic-explain-content\">\n          {displayedText}\n          {!fullTextDisplayed && <span className=\"devic-typing-cursor\">|</span>}\n        </div>\n      )}\n    </Modal>\n  );\n}\n\n/* ── Approval Modal ── */\n\nfunction ApprovalModal({\n  open,\n  onClose,\n  onApprove,\n  isLoading,\n  pausedReason,\n}: {\n  open: boolean;\n  onClose: () => void;\n  onApprove: (action: 'approved' | 'rejected', retry: boolean, message?: string) => void;\n  isLoading: boolean;\n  pausedReason?: string;\n}): JSX.Element | null {\n  const [feedback, setFeedback] = useState('');\n\n  const handleClose = () => {\n    setFeedback('');\n    onClose();\n  };\n\n  return (\n    <Modal\n      open={open}\n      onClose={handleClose}\n      title=\"Review Agent Request\"\n      titleIcon={<EyeIcon />}\n    >\n      <div className=\"devic-approval-layout\">\n        <div className=\"devic-approval-request\">\n          <div style={{ fontWeight: 600, marginBottom: 8, fontSize: 13 }}>Agent's request:</div>\n          <div style={{ whiteSpace: 'pre-wrap' }}>{pausedReason || 'Agent is waiting for approval to resume execution.'}</div>\n        </div>\n        <div className=\"devic-approval-actions\">\n          <div style={{ fontWeight: 600, fontSize: 13 }}>Your feedback:</div>\n          <textarea\n            className=\"devic-approval-textarea\"\n            value={feedback}\n            onChange={(e) => setFeedback(e.target.value)}\n            placeholder=\"Optional feedback for the agent...\"\n          />\n          <div className=\"devic-approval-buttons\">\n            <button\n              className=\"devic-state-btn devic-state-btn-danger\"\n              onClick={() => onApprove('rejected', false, feedback)}\n              disabled={isLoading}\n              type=\"button\"\n            >\n              Reject and finish\n            </button>\n            <button\n              className=\"devic-state-btn devic-state-btn-primary\"\n              onClick={() => onApprove('rejected', true, feedback)}\n              disabled={isLoading || !feedback.trim()}\n              type=\"button\"\n            >\n              Continue with feedback\n            </button>\n            <button\n              className=\"devic-state-btn devic-state-btn-success\"\n              onClick={() => onApprove('approved', false)}\n              disabled={isLoading}\n              type=\"button\"\n            >\n              Approve\n            </button>\n          </div>\n        </div>\n      </div>\n    </Modal>\n  );\n}\n\n/* ── Complete Thread Modal ── */\n\nfunction CompleteModal({\n  open,\n  onClose,\n  onComplete,\n}: {\n  open: boolean;\n  onClose: () => void;\n  onComplete: (state: string) => void;\n}): JSX.Element | null {\n  const [completionState, setCompletionState] = useState('terminated');\n\n  return (\n    <Modal\n      open={open}\n      onClose={onClose}\n      title=\"Complete Execution Manually\"\n      titleIcon={<WrenchIcon />}\n      footer={\n        <>\n          <button className=\"devic-state-btn\" onClick={onClose} type=\"button\">Cancel</button>\n          <button className=\"devic-state-btn devic-state-btn-danger\" onClick={() => onComplete(completionState)} type=\"button\">\n            Complete\n          </button>\n        </>\n      }\n    >\n      <div style={{ marginBottom: 12 }}>\n        <div style={{ fontWeight: 600, marginBottom: 4 }}>Confirm Manual Completion</div>\n        <p style={{ margin: '4px 0 12px', color: '#666', fontSize: 13 }}>\n          You are about to manually complete this agent's execution.\n        </p>\n        <div style={{ marginBottom: 12 }}>\n          <div style={{ fontWeight: 500, marginBottom: 6, fontSize: 13 }}>Complete as:</div>\n          <select\n            className=\"devic-completion-select\"\n            value={completionState}\n            onChange={(e) => setCompletionState(e.target.value)}\n          >\n            <option value=\"terminated\">Terminated - Finish thread as manually terminated</option>\n            <option value=\"completed\">Completed - Finish thread as successfully completed</option>\n            <option value=\"failed\">Failed - Finish thread as failed or with errors</option>\n          </select>\n        </div>\n        <div className=\"devic-state-warning\">\n          <InfoIcon />\n          <span>This action will immediately terminate all ongoing processes. The execution cannot be resumed after completion.</span>\n        </div>\n      </div>\n    </Modal>\n  );\n}\n\n/* ── Confirm Modal (Pause/Resume) ── */\n\nfunction ConfirmModal({\n  open,\n  onClose,\n  onConfirm,\n  title,\n  icon,\n  message,\n  confirmText,\n}: {\n  open: boolean;\n  onClose: () => void;\n  onConfirm: () => void;\n  title: string;\n  icon: React.ReactNode;\n  message: string;\n  confirmText: string;\n}): JSX.Element | null {\n  return (\n    <Modal\n      open={open}\n      onClose={onClose}\n      title={title}\n      titleIcon={icon}\n      footer={\n        <>\n          <button className=\"devic-state-btn\" onClick={onClose} type=\"button\">Cancel</button>\n          <button className=\"devic-state-btn devic-state-btn-primary\" onClick={onConfirm} type=\"button\">\n            {confirmText}\n          </button>\n        </>\n      }\n    >\n      <p style={{ margin: 0, color: '#666', fontSize: 14 }}>{message}</p>\n    </Modal>\n  );\n}\n\n/* ── Main ThreadStateTag ── */\n\nexport function ThreadStateTag({\n  state,\n  threadId,\n  agentName,\n  showIcon = true,\n  customIcon,\n  pausedReason,\n  approvalRejectedMessage,\n  finishReason,\n  onActionComplete,\n  pauseUntil,\n  subthreadCount,\n  showAdminActions = false,\n  apiKey,\n  baseUrl,\n  interactive = true,\n}: ThreadStateTagProps): JSX.Element {\n  const context = useOptionalDevicContext();\n  const resolvedApiKey = apiKey || context?.apiKey;\n  const resolvedBaseUrl = baseUrl || context?.baseUrl || 'https://api.devic.ai';\n\n  // State\n  const [dropdownOpen, setDropdownOpen] = useState(false);\n  const [showTooltip, setShowTooltip] = useState(false);\n  const [explainModalOpen, setExplainModalOpen] = useState(false);\n  const [threadExplanation, setThreadExplanation] = useState<string | null>(null);\n  const [isLoadingExplanation, setIsLoadingExplanation] = useState(false);\n  const [pauseModalOpen, setPauseModalOpen] = useState(false);\n  const [resumeModalOpen, setResumeModalOpen] = useState(false);\n  const [reviewModalOpen, setReviewModalOpen] = useState(false);\n  const [isLoadingApproval, setIsLoadingApproval] = useState(false);\n  const [completeModalOpen, setCompleteModalOpen] = useState(false);\n\n  const tagRef = useRef<HTMLDivElement>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const [tooltipStyle, setTooltipStyle] = useState<React.CSSProperties>({});\n  const [dropdownStyle, setDropdownStyle] = useState<React.CSSProperties>({});\n\n  // Close dropdown on click outside\n  useEffect(() => {\n    if (!dropdownOpen) return;\n    const handleClick = (e: MouseEvent) => {\n      const target = e.target as Node;\n      if (\n        tagRef.current && !tagRef.current.contains(target) &&\n        (!dropdownRef.current || !dropdownRef.current.contains(target))\n      ) {\n        setDropdownOpen(false);\n      }\n    };\n    document.addEventListener('mousedown', handleClick);\n    return () => document.removeEventListener('mousedown', handleClick);\n  }, [dropdownOpen]);\n\n  // API client\n  const getClient = useCallback((): DevicApiClient | null => {\n    if (!resolvedApiKey) return null;\n    return new DevicApiClient({ apiKey: resolvedApiKey, baseUrl: resolvedBaseUrl });\n  }, [resolvedApiKey, resolvedBaseUrl]);\n\n  // Config\n  const config = getStateConfig(state, subthreadCount);\n\n  if (!state) {\n    return <span className=\"devic-state-tag\" data-color=\"default\">Unknown</span>;\n  }\n\n  // Icon\n  const renderIcon = () => {\n    if (!showIcon) return null;\n    if (customIcon) return <span className=\"devic-state-tag-icon\">{customIcon}</span>;\n    const icon = <StateIcon iconType={config.iconType} />;\n    return icon ? <span className=\"devic-state-tag-icon\">{icon}</span> : null;\n  };\n\n  // Tooltip content\n  const getTooltipContent = (): string | null => {\n    switch (state) {\n      case AgentThreadState.PAUSED_FOR_APPROVAL:\n        return 'Agent is waiting for approval to resume execution';\n      case AgentThreadState.PAUSED_FOR_RESUME:\n        if (pauseUntil) {\n          const timeDiff = new Date(pauseUntil).getTime() - Date.now();\n          const hours = Math.floor(timeDiff / 3600000);\n          const minutes = Math.floor(timeDiff / 60000);\n          const timeStr = hours > 0 ? `${hours} hours` : `${minutes} minutes`;\n          return `Agent paused, will resume at ${new Date(pauseUntil).toLocaleString()} (${timeStr})`;\n        }\n        return 'Agent paused, will resume at a scheduled time';\n      case AgentThreadState.WAITING_FOR_RESPONSE:\n        return pausedReason || 'Agent is waiting for response';\n      case AgentThreadState.COMPLETED:\n      case AgentThreadState.FAILED:\n      case AgentThreadState.TERMINATED:\n        return finishReason || 'Manually finished thread';\n      case AgentThreadState.APPROVAL_REJECTED:\n        return approvalRejectedMessage || 'Approval was rejected';\n      case AgentThreadState.GUARDRAIL_TRIGGER:\n        return 'Agent execution paused due to guardrail trigger';\n      default:\n        return null;\n    }\n  };\n\n  // Handlers\n  const handleExplain = async () => {\n    setDropdownOpen(false);\n    setExplainModalOpen(true);\n    setIsLoadingExplanation(true);\n    setThreadExplanation(null);\n\n    const client = getClient();\n    if (!client) {\n      setThreadExplanation('API key not configured.');\n      setIsLoadingExplanation(false);\n      return;\n    }\n\n    try {\n      const explanation = await client.explainAgentThread(threadId);\n      setThreadExplanation(explanation);\n    } catch {\n      setThreadExplanation('Could not obtain the thread explanation.');\n    } finally {\n      setIsLoadingExplanation(false);\n    }\n  };\n\n  const handlePause = async () => {\n    const client = getClient();\n    if (!client) return;\n    try {\n      await client.pauseResumeThread(threadId, 'paused');\n      setPauseModalOpen(false);\n      onActionComplete?.();\n    } catch (err) {\n      console.error('Error pausing thread:', err);\n    }\n  };\n\n  const handleResume = async () => {\n    const client = getClient();\n    if (!client) return;\n    try {\n      await client.pauseResumeThread(threadId, 'queued');\n      setResumeModalOpen(false);\n      onActionComplete?.();\n    } catch (err) {\n      console.error('Error resuming thread:', err);\n    }\n  };\n\n  const handleApproval = async (action: 'approved' | 'rejected', retry: boolean, message?: string) => {\n    const client = getClient();\n    if (!client) return;\n    setIsLoadingApproval(true);\n    try {\n      await client.handleThreadApproval(threadId, action === 'approved', retry, message || '');\n      setReviewModalOpen(false);\n      onActionComplete?.();\n    } catch (err) {\n      console.error('Error handling thread approval:', err);\n    } finally {\n      setIsLoadingApproval(false);\n    }\n  };\n\n  const handleComplete = async (completionState: string) => {\n    const client = getClient();\n    if (!client) return;\n    try {\n      await client.completeThread(threadId, completionState);\n      setCompleteModalOpen(false);\n      onActionComplete?.();\n    } catch (err) {\n      console.error('Error completing thread:', err);\n    }\n  };\n\n  // Build dropdown items\n  const dropdownItems: Array<{ key: string; icon: React.ReactNode; label: string; onClick: () => void }> = [];\n\n  if (showAdminActions && [AgentThreadState.PROCESSING, AgentThreadState.QUEUED, AgentThreadState.WAITING_FOR_RESPONSE].includes(state as AgentThreadState)) {\n    dropdownItems.push({\n      key: 'complete',\n      icon: <WrenchIcon />,\n      label: 'Complete manually',\n      onClick: () => { setDropdownOpen(false); setCompleteModalOpen(true); },\n    });\n  }\n\n  if (state === AgentThreadState.QUEUED) {\n    dropdownItems.push({\n      key: 'pause',\n      icon: <PauseIcon />,\n      label: 'Pause',\n      onClick: () => { setDropdownOpen(false); setPauseModalOpen(true); },\n    });\n  }\n\n  if (state === AgentThreadState.PAUSED || state === AgentThreadState.PAUSED_FOR_RESUME) {\n    dropdownItems.push({\n      key: 'resume',\n      icon: <PlayIcon />,\n      label: 'Resume',\n      onClick: () => { setDropdownOpen(false); setResumeModalOpen(true); },\n    });\n  }\n\n  if (state === AgentThreadState.PAUSED_FOR_APPROVAL) {\n    dropdownItems.push({\n      key: 'review',\n      icon: <EyeIcon />,\n      label: 'Review',\n      onClick: () => { setDropdownOpen(false); setReviewModalOpen(true); },\n    });\n  }\n\n  dropdownItems.push({\n    key: 'explain',\n    icon: <LightbulbIcon />,\n    label: 'Explain thread...',\n    onClick: handleExplain,\n  });\n\n  const canInteract = interactive && threadId;\n  const tooltipContent = getTooltipContent();\n\n  return (\n    <>\n      <div\n        ref={tagRef}\n        className=\"devic-state-tag\"\n        data-color={config.color}\n        data-interactive={String(!!canInteract)}\n        data-dropdown-open={String(dropdownOpen)}\n        onClick={canInteract ? () => {\n          if (!dropdownOpen) {\n            const rect = tagRef.current?.getBoundingClientRect();\n            if (rect) {\n              setDropdownStyle({\n                position: 'fixed',\n                top: rect.bottom + 4,\n                right: window.innerWidth - rect.right,\n              });\n            }\n          }\n          setDropdownOpen(!dropdownOpen);\n        } : undefined}\n        onMouseEnter={() => {\n          if (!dropdownOpen && tooltipContent) {\n            const rect = tagRef.current?.getBoundingClientRect();\n            if (rect) {\n              setTooltipStyle({\n                position: 'fixed',\n                top: rect.top - 8,\n                left: rect.left + rect.width / 2,\n                transform: 'translate(-50%, -100%)',\n              });\n            }\n            setShowTooltip(true);\n          }\n        }}\n        onMouseLeave={() => setShowTooltip(false)}\n      >\n        {renderIcon()}\n        {config.text}\n        {canInteract && (\n          <span className=\"devic-state-tag-caret\">\n            <CaretDownIcon />\n          </span>\n        )}\n\n      </div>\n\n      {/* Tooltip - portal to escape overflow/transform containers */}\n      {showTooltip && tooltipContent && !dropdownOpen && createPortal(\n        <div className=\"devic-state-tooltip-portal\" style={tooltipStyle}>{tooltipContent}</div>,\n        document.body\n      )}\n\n      {/* Dropdown - portal to escape overflow/transform containers */}\n      {dropdownOpen && canInteract && createPortal(\n        <div ref={dropdownRef} className=\"devic-state-dropdown-portal\" style={dropdownStyle}>\n          {dropdownItems.map((item) => (\n            <button\n              key={item.key}\n              className=\"devic-state-dropdown-item\"\n              onClick={(e) => { e.stopPropagation(); item.onClick(); }}\n              type=\"button\"\n            >\n              <span className=\"devic-state-dropdown-item-icon\">{item.icon}</span>\n              {item.label}\n            </button>\n          ))}\n        </div>,\n        document.body\n      )}\n\n      {/* Modals */}\n      <ExplainModal\n        open={explainModalOpen}\n        onClose={() => setExplainModalOpen(false)}\n        explanation={threadExplanation}\n        isLoading={isLoadingExplanation}\n        agentName={agentName}\n      />\n\n      <CompleteModal\n        open={completeModalOpen}\n        onClose={() => setCompleteModalOpen(false)}\n        onComplete={handleComplete}\n      />\n\n      <ConfirmModal\n        open={pauseModalOpen}\n        onClose={() => setPauseModalOpen(false)}\n        onConfirm={handlePause}\n        title=\"Pause Thread\"\n        icon={<PauseIcon />}\n        message=\"You are about to pause this queued thread. It can be resumed later.\"\n        confirmText=\"Pause\"\n      />\n\n      <ConfirmModal\n        open={resumeModalOpen}\n        onClose={() => setResumeModalOpen(false)}\n        onConfirm={handleResume}\n        title=\"Resume Thread\"\n        icon={<PlayIcon />}\n        message=\"You are about to resume this thread. It will go back to the queue and be processed when possible.\"\n        confirmText=\"Resume\"\n      />\n\n      <ApprovalModal\n        open={reviewModalOpen}\n        onClose={() => setReviewModalOpen(false)}\n        onApprove={handleApproval}\n        isLoading={isLoadingApproval}\n        pausedReason={pausedReason}\n      />\n    </>\n  );\n}\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/dist/esm/components/ThreadStateTag/ThreadStateTag.types.d.ts

@@ -0,0 +1,76 @@
+import type { AgentThreadState } from '../../api/types';
+export interface ThreadStateTagProps {
+    /**
+     * Current thread state
+     */
+    state: AgentThreadState | string;
+    /**
+     * Thread ID
+     */
+    threadId: string;
+    /**
+     * Agent name for display in modals
+     */
+    agentName: string;
+    /**
+     * Show icon next to the state text
+     * @default true
+     */
+    showIcon?: boolean;
+    /**
+     * Custom icon to replace the default state icon
+     */
+    customIcon?: React.ReactNode;
+    /**
+     * Reason for pause (used in tooltip)
+     */
+    pausedReason?: string;
+    /**
+     * Message shown when approval was rejected
+     */
+    approvalRejectedMessage?: string;
+    /**
+     * Reason the thread finished
+     */
+    finishReason?: string;
+    /**
+     * Callback after an action is completed (pause, resume, approve, etc.)
+     */
+    onActionComplete?: (info?: 'WAITING_FOR_RESPONSE_EXPIRED') => void;
+    /**
+     * Timestamp until which thread is paused
+     */
+    pauseUntil?: number;
+    /**
+     * Number of parallel subthreads (displayed in handed_off state)
+     */
+    subthreadCount?: number;
+    /**
+     * Whether to show admin-only actions (complete manually)
+     * @default false
+     */
+    showAdminActions?: boolean;
+    /**
+     * API key for thread actions (explain, pause/resume, approve)
+     * Falls back to DevicProvider context
+     */
+    apiKey?: string;
+    /**
+     * Base URL for API calls
+     * Falls back to DevicProvider context
+     */
+    baseUrl?: string;
+    /**
+     * Whether the dropdown is interactive (clickable).
+     * When false, the tag is display-only.
+     * @default true
+     */
+    interactive?: boolean;
+}
+export interface StateConfig {
+    color: string;
+    bgColor: string;
+    borderColor: string;
+    text: string;
+    iconType: string | null;
+}

package/dist/esm/components/ThreadStateTag/index.d.ts

@@ -0,0 +1,2 @@
+export { ThreadStateTag } from './ThreadStateTag';
+export type { ThreadStateTagProps, StateConfig } from './ThreadStateTag.types';