@parhelia/core 0.1.12902 → 0.1.12904

package/dist/agents-view/AgentsView.js

@@ -1,25 +1,39 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useMemo, useCallback } from "react";
-import { getAgentsGrouped, getClosedAgentsByProfile, deleteAgent, renameAgent, } from "../editor/services/agentService";
-import { parseAgentRunStatusData, shouldIgnoreReplayRunStart, } from "../editor/services/agentStatus";
+import { sanitizeSvg } from "../lib/sanitize";
+import { getAgentsGrouped, getClosedAgentsByProfile, cancelAgent, closeAgent, deleteAgent, } from "../editor/services/agentService";
+import { isRunningAgentStatus, parseAgentRunStatusData, shouldIgnoreReplayRunStart, } from "../editor/services/agentStatus";
 import { cn } from "../lib/utils";
-import { RefreshCw, List, Layers, Plus, ArrowLeft } from "lucide-react";
-import { SearchInput } from "../components/SearchInput";
+import { RefreshCw, List, Layers, Square } from "lucide-react";
+import { SimpleIconButton } from "../editor/ui/SimpleIconButton";
+import { FilterInput } from "../components/FilterInput";
 import { PageHeader } from "../components/PageHeader";
 import { useEditContext } from "../editor/client/editContext";
 import { AgentCard } from "./AgentCard";
 import { ProfileAgentsGroup } from "./ProfileAgentsGroup";
-import { DateAgentsGroup } from "./DateAgentsGroup";
-import { Switch } from "../components/ui/switch";
-import { Button } from "../components/ui/button";
-import { AgentGalleryView } from "./AgentGalleryView";
-import { RenameAgentDialog } from "./RenameAgentDialog";
+import { Checkbox } from "../components/ui/checkbox";
+import { SimpleTabs } from "../editor/ui/SimpleTabs";
+import { AgentsInbox, agentNeedsAttention } from "./AgentsInbox";
+import { CreateAgentView } from "./CreateAgentView";
+import { SecretAgentIcon } from "../editor/ui/Icons";
 import { Spinner } from "../editor/ui/Spinner";
 /**
- * Unified agents overview: search/filter, active agents and closed history.
- * Creating a new agent happens in a modal accessed from the toolbar.
+ * Agents overview view with tab-based navigation:
+ * - Inbox: Agents requiring user attention
+ * - All Agents: Active and closed agents with search/filter
+ * - Create New: Profile selection to start a new agent
  */
-export function AgentsView({ onSelectAgent, selectedAgentId, compact = false, onRequestCreateAgent, hideNewAgentButton = false, showCompactHeader = false, toolbarActions, } = {}) {
+const SECTION_TO_INDEX = {
+    inbox: 0,
+    all: 1,
+    create: 2,
+};
+const SECTION_LABELS = {
+    inbox: "Inbox",
+    all: "All Agents",
+    create: "Create New",
+};
+export function AgentsView({ onSelectAgent, selectedAgentId, compact = false, activeSection: controlledSection, onInboxCountChange, } = {}) {
     const getAgentSortDate = useCallback((agent) => agent.lastMessageDate || agent.updatedDate, []);
     const sortAgentsByRecentActivity = useCallback((agents) => [...agents].sort((a, b) => new Date(getAgentSortDate(b)).getTime() -
         new Date(getAgentSortDate(a)).getTime()), [getAgentSortDate]);
@@ -28,29 +42,29 @@ export function AgentsView({ onSelectAgent, selectedAgentId, compact = false, on
         agents: sortAgentsByRecentActivity(group.agents),
     })), [sortAgentsByRecentActivity]);
     const editContext = useEditContext();
+    const [internalTabIndex, setInternalTabIndex] = useState(1);
+    const activeTabIndex = controlledSection !== undefined
+        ? SECTION_TO_INDEX[controlledSection]
+        : internalTabIndex;
+    const setActiveTabIndex = (index) => {
+        if (controlledSection === undefined)
+            setInternalTabIndex(index);
+    };
     const [activeAgents, setActiveAgents] = useState([]);
     const [profileGroups, setProfileGroups] = useState([]);
     const [expandedProfiles, setExpandedProfiles] = useState(new Set());
-    const [collapsedDateBuckets, setCollapsedDateBuckets] = useState(new Set());
     const [loadingMoreForProfile, setLoadingMoreForProfile] = useState(null);
     const [loading, setLoading] = useState(true);
     const [initialLoad, setInitialLoad] = useState(true);
     const [error, setError] = useState(null);
-    const [, setRefreshing] = useState(false);
+    const [refreshing, setRefreshing] = useState(false);
+    const [stoppingAgentIds, setStoppingAgentIds] = useState(new Set());
     const [searchTerm, setSearchTerm] = useState("");
     const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
+    // Single shared toggle for both the Inbox and All Agents tabs.
+    // Defaults to true so the inbox's "Close All" can't sweep up agents shared with you.
     const [showOnlyMyAgents, setShowOnlyMyAgents] = useState(true);
-    const [historyViewMode, setHistoryViewMode] = useState("flat");
-    const [viewMode, setViewMode] = useState("list");
-    const [renameTarget, setRenameTarget] = useState(null);
-    const handleNewAgentClick = () => {
-        if (onRequestCreateAgent) {
-            onRequestCreateAgent();
-        }
-        else {
-            setViewMode("create");
-        }
-    };
+    const [historyViewMode, setHistoryViewMode] = useState("grouped");
     // Debounce search term
     useEffect(() => {
         const timer = setTimeout(() => {
@@ -97,9 +111,11 @@ export function AgentsView({ onSelectAgent, selectedAgentId, compact = false, on
                     console.warn("Invalid agent:run:start message payload:", message.payload);
                     return;
                 }
+                // Update or add agent in active agents list
                 setActiveAgents((prevAgents) => {
                     const existingAgentIndex = prevAgents.findIndex((agent) => agent.id === agentId);
                     if (existingAgentIndex !== -1) {
+                        // Update existing agent
                         const updatedAgents = [...prevAgents];
                         const existingAgent = updatedAgents[existingAgentIndex];
                         if (shouldIgnoreReplayRunStart(existingAgent.status, existingAgent.updatedDate, typeof timestamp === "string" ? timestamp : undefined)) {
@@ -114,6 +130,7 @@ export function AgentsView({ onSelectAgent, selectedAgentId, compact = false, on
                         return updatedAgents;
                     }
                     else {
+                        // Agent not found - reload to get full details
                         loadAgents();
                         return prevAgents;
                     }
@@ -123,6 +140,7 @@ export function AgentsView({ onSelectAgent, selectedAgentId, compact = false, on
                 const { agentId, agentName, agentDescription } = message.payload || {};
                 if (!agentId)
                     return;
+                // Update agent in active agents list
                 setActiveAgents((prevAgents) => {
                     const existingIndex = prevAgents.findIndex((a) => a.id === agentId);
                     if (existingIndex === -1)
@@ -141,6 +159,7 @@ export function AgentsView({ onSelectAgent, selectedAgentId, compact = false, on
                 });
             }
             else if (message.type === "agent:run:closed") {
+                // Reload agents when one is closed - it should move to closed section
                 loadAgents();
             }
             else if (message.type === "agent:run:status") {
@@ -167,18 +186,112 @@ export function AgentsView({ onSelectAgent, selectedAgentId, compact = false, on
             }
             else if (message.type === "agent:run:complete" ||
                 message.type === "agent:run:error") {
+                // Reload to update status when agent completes or errors
                 loadAgents();
             }
         });
         return unsubscribe;
     }, [editContext?.addSocketMessageListener, loadAgents]);
+    // Inbox shows agents that need attention. Defaults to "My agents only" so
+    // destructive actions like "Close All" can't sweep up other people's work.
+    const inboxAgents = useMemo(() => {
+        return activeAgents
+            .filter(agentNeedsAttention)
+            .filter((agent) => !showOnlyMyAgents || !agent.isShared);
+    }, [activeAgents, showOnlyMyAgents]);
+    const inboxCount = inboxAgents.length;
+    // Report inbox count to parent for sidebar badge
+    useEffect(() => {
+        onInboxCountChange?.(inboxCount);
+    }, [inboxCount, onInboxCountChange]);
+    // Sort active agents by most recent activity (newest first)
     const sortedActiveAgents = useMemo(() => {
         return sortAgentsByRecentActivity(activeAgents);
     }, [activeAgents, sortAgentsByRecentActivity]);
+    // Calculate running agents (agents that are currently executing)
+    // Excludes agents waiting for tool call approval - they're shown in inbox
+    const runningAgents = useMemo(() => {
+        return sortedActiveAgents.filter((agent) => isRunningAgentStatus(agent.status));
+    }, [sortedActiveAgents]);
     const handleRefresh = async () => {
         setRefreshing(true);
         await loadAgents();
     };
+    const handleStopAgent = useCallback(async (agentId, agentName) => {
+        setStoppingAgentIds((prev) => {
+            const next = new Set(prev);
+            next.add(agentId);
+            return next;
+        });
+        try {
+            await cancelAgent(agentId);
+            setActiveAgents((prevAgents) => prevAgents.map((agent) => agent.id === agentId
+                ? {
+                    ...agent,
+                    status: "idle",
+                    updatedDate: new Date().toISOString(),
+                }
+                : agent));
+            await loadAgents();
+        }
+        catch (err) {
+            console.error("Failed to stop agent:", err);
+            editContext?.showToast(`Failed to stop ${agentName}: ${err?.message || "Unknown error"}`);
+        }
+        finally {
+            setStoppingAgentIds((prev) => {
+                const next = new Set(prev);
+                next.delete(agentId);
+                return next;
+            });
+        }
+    }, [activeAgents, editContext, loadAgents, runningAgents]);
+    const handleStopAllRunning = useCallback(async () => {
+        if (runningAgents.length === 0)
+            return;
+        const runningIds = runningAgents.map((agent) => agent.id);
+        const runningNames = new Map(runningAgents.map((agent) => [agent.id, agent.name]));
+        setStoppingAgentIds((prev) => {
+            const next = new Set(prev);
+            runningIds.forEach((id) => next.add(id));
+            return next;
+        });
+        try {
+            const results = await Promise.allSettled(runningIds.map((agentId) => cancelAgent(agentId)));
+            const failedIds = results
+                .map((result, index) => ({ result, agentId: runningIds[index] }))
+                .filter((entry) => entry.result.status === "rejected")
+                .map((entry) => entry.agentId);
+            if (failedIds.length < runningIds.length) {
+                const stoppedIds = new Set(runningIds.filter((id) => !failedIds.includes(id)));
+                setActiveAgents((prevAgents) => prevAgents.map((agent) => stoppedIds.has(agent.id)
+                    ? {
+                        ...agent,
+                        status: "idle",
+                        updatedDate: new Date().toISOString(),
+                    }
+                    : agent));
+            }
+            if (failedIds.length > 0) {
+                const failedNames = failedIds
+                    .map((id) => runningNames.get(id) || id)
+                    .join(", ");
+                editContext?.showToast(`Failed to stop: ${failedNames}`);
+            }
+            await loadAgents();
+        }
+        catch (err) {
+            console.error("Failed to stop running agents:", err);
+            editContext?.showToast(`Failed to stop running agents: ${err?.message || "Unknown error"}`);
+        }
+        finally {
+            setStoppingAgentIds((prev) => {
+                const next = new Set(prev);
+                runningIds.forEach((id) => next.delete(id));
+                return next;
+            });
+        }
+    }, [editContext, loadAgents, runningAgents]);
     const handleToggleProfile = (profileId) => {
         const key = profileId || "null";
         setExpandedProfiles((prev) => {
@@ -192,28 +305,19 @@ export function AgentsView({ onSelectAgent, selectedAgentId, compact = false, on
             return newSet;
         });
     };
-    const handleToggleDateBucket = (key) => {
-        setCollapsedDateBuckets((prev) => {
-            const newSet = new Set(prev);
-            if (newSet.has(key)) {
-                newSet.delete(key);
-            }
-            else {
-                newSet.add(key);
-            }
-            return newSet;
-        });
-    };
     const handleLoadMoreForProfile = async (profileId) => {
         if (!profileId || loadingMoreForProfile)
             return;
         try {
             setLoadingMoreForProfile(profileId);
+            // Find the current profile group
             const profileGroup = profileGroups.find((g) => g.profileId === profileId);
             if (!profileGroup)
                 return;
             const currentCount = profileGroup.agents.length;
+            // Load more agents for this profile
             const response = await getClosedAgentsByProfile(profileId, currentCount, 10, debouncedSearchTerm || undefined);
+            // Update the profile group with new agents
             setProfileGroups((prevGroups) => prevGroups.map((group) => {
                 if (group.profileId === profileId) {
                     return {
@@ -235,18 +339,90 @@ export function AgentsView({ onSelectAgent, selectedAgentId, compact = false, on
             setLoadingMoreForProfile(null);
         }
     };
-    const handleOpenAgent = (agent, event) => {
+    const handleOpenAgent = (agent) => {
+        // If onSelectAgent callback is provided, use it directly
         if (onSelectAgent) {
-            onSelectAgent(agent, { split: !!event?.altKey });
+            onSelectAgent(agent);
             return;
         }
+        // Ensure agents panel is visible, but don't switch views
         editContext?.setShowAgentsPanel?.(true);
+        // Delay briefly for any UI updates, then dispatch event to open existing agent
         setTimeout(() => {
             window.dispatchEvent(new CustomEvent("editor:openAgent", {
                 detail: { agentId: agent.id },
             }));
         }, 100);
     };
+    const handleCloseAgent = async (agentId, agentName) => {
+        // Find the agent to check its status
+        const agent = activeAgents.find((a) => a.id === agentId);
+        const isRunning = isRunningAgentStatus(agent?.status);
+        const doClose = async () => {
+            try {
+                await closeAgent(agentId);
+                // Reload to move agent from active to closed section
+                loadAgents();
+            }
+            catch (err) {
+                console.error("Failed to close agent:", err);
+                editContext?.showToast(`Failed to close agent: ${err?.message || "Unknown error"}`);
+            }
+        };
+        // Only confirm if agent is running
+        if (isRunning) {
+            editContext?.confirm({
+                header: "Close Agent",
+                message: `Are you sure you want to close "${agentName}"? This will stop its execution.`,
+                acceptLabel: "Close Agent",
+                accept: doClose,
+                showCancel: true,
+            });
+        }
+        else {
+            // Close immediately without confirmation
+            await doClose();
+        }
+    };
+    const handleCloseAllInbox = () => {
+        // Only close agents currently visible in the inbox — respects the
+        // "Show shared agents" toggle so we never close someone else's agent
+        // unless the user has explicitly opted in.
+        const agentsToClose = inboxAgents;
+        if (agentsToClose.length === 0)
+            return;
+        const runningAgents = agentsToClose.filter((a) => isRunningAgentStatus(a.status));
+        const doCloseAll = async () => {
+            try {
+                await Promise.all(agentsToClose.map((agent) => closeAgent(agent.id)));
+                loadAgents();
+            }
+            catch (err) {
+                console.error("Failed to close all agents:", err);
+                editContext?.showToast(`Failed to close some agents: ${err?.message || "Unknown error"}`);
+            }
+        };
+        const sharedCount = agentsToClose.filter((a) => a.isShared).length;
+        const sharedWarning = sharedCount > 0
+            ? ` This includes ${sharedCount} shared agent${sharedCount !== 1 ? "s" : ""} that other users may be working with.`
+            : "";
+        // Confirm if any agents are running, or whenever shared agents are about to be closed.
+        if (runningAgents.length > 0 || sharedCount > 0) {
+            const runningPart = runningAgents.length > 0
+                ? ` ${runningAgents.length} running agent${runningAgents.length !== 1 ? "s" : ""} will be stopped.`
+                : "";
+            editContext?.confirm({
+                header: "Close All Agents",
+                message: `Are you sure you want to close all ${agentsToClose.length} agents in your inbox?${runningPart}${sharedWarning}`,
+                acceptLabel: "Close All",
+                accept: doCloseAll,
+                showCancel: true,
+            });
+        }
+        else {
+            doCloseAll();
+        }
+    };
     const handleDeleteAgent = async (agentId, agentName, event) => {
         event.stopPropagation();
         editContext?.confirm({
@@ -256,6 +432,7 @@ export function AgentsView({ onSelectAgent, selectedAgentId, compact = false, on
             accept: async () => {
                 try {
                     await deleteAgent(agentId);
+                    // Remove from both active and closed lists
                     setActiveAgents((prev) => prev.filter((a) => a.id !== agentId));
                     setProfileGroups((prevGroups) => prevGroups.map((group) => ({
                         ...group,
@@ -271,39 +448,18 @@ export function AgentsView({ onSelectAgent, selectedAgentId, compact = false, on
             showCancel: true,
         });
     };
-    const handleRenameAgent = (agentId, agentName) => {
-        setRenameTarget({ id: agentId, name: agentName });
-    };
-    const performRename = async (newName) => {
-        if (!renameTarget)
-            return;
-        const agentId = renameTarget.id;
-        try {
-            await renameAgent(agentId, newName);
-            // Optimistic local update; the agent:info:updated WS message reconciles
-            // other views.
-            setActiveAgents((prev) => prev.map((a) => (a.id === agentId ? { ...a, name: newName } : a)));
-            setProfileGroups((prevGroups) => prevGroups.map((group) => ({
-                ...group,
-                agents: group.agents.map((a) => a.id === agentId ? { ...a, name: newName } : a),
-            })));
-        }
-        catch (err) {
-            console.error("Failed to rename agent:", err);
-            editContext?.showToast(`Failed to rename chat: ${err?.message || "Unknown error"}`);
-        }
-    };
-    const handleAgentClick = (agent, event) => {
+    const handleAgentClick = (agent) => {
+        // If onSelectAgent callback is provided, use it directly
         if (onSelectAgent) {
-            onSelectAgent(agent, { split: !!event?.altKey });
+            onSelectAgent(agent);
             return;
         }
+        // Otherwise, dispatch event for the agents panel
         window.dispatchEvent(new CustomEvent("editor:selectAgent", {
             detail: { agentId: agent.id },
         }));
     };
     const handleCreateAgent = (profile) => {
-        setViewMode("list");
         const agentDisplayName = profile.agentName || profile.displayTitle || profile.name;
         const agentId = crypto.randomUUID();
         const newAgent = {
@@ -316,10 +472,12 @@ export function AgentsView({ onSelectAgent, selectedAgentId, compact = false, on
             profileName: profile.name,
             profileSvgIcon: profile.svgIcon,
         };
+        // If onSelectAgent callback is provided (workspace mode), use it directly
         if (onSelectAgent) {
             onSelectAgent(newAgent);
             return;
         }
+        // Otherwise, open the agents panel with the new agent via event
         editContext?.setShowAgentsPanel?.(true);
         setTimeout(() => {
             window.dispatchEvent(new CustomEvent("editor:createAgentWithProfile", {
@@ -330,14 +488,7 @@ export function AgentsView({ onSelectAgent, selectedAgentId, compact = false, on
     const formatDateTime = (dateString) => {
         try {
             const date = new Date(dateString);
-            return date.toLocaleString(undefined, {
-                year: "numeric",
-                month: "numeric",
-                day: "numeric",
-                hour: "numeric",
-                minute: "numeric",
-                hour12: false,
-            });
+            return date.toLocaleString();
         }
         catch {
             return dateString;
@@ -345,69 +496,86 @@ export function AgentsView({ onSelectAgent, selectedAgentId, compact = false, on
     };
     const totalActiveCount = activeAgents.length;
     const totalClosedCount = profileGroups.reduce((sum, group) => sum + group.totalClosedCount, 0);
+    const isStoppingAllRunning = runningAgents.length > 0 &&
+        runningAgents.every((agent) => stoppingAgentIds.has(agent.id));
     // Flatten all closed agents from all profile groups and sort by date (newest first)
     const flatClosedAgents = useMemo(() => {
         const allAgents = [];
         profileGroups.forEach((group) => {
             allAgents.push(...group.agents);
         });
+        // Sort by lastMessageDate if available, otherwise by updatedDate (newest first)
         return allAgents.sort((a, b) => new Date(getAgentSortDate(b)).getTime() -
             new Date(getAgentSortDate(a)).getTime());
     }, [profileGroups, getAgentSortDate]);
-    // Bucket flat closed agents by recency. Empty buckets are omitted.
-    const dateBuckets = useMemo(() => {
-        const startOfToday = new Date();
-        startOfToday.setHours(0, 0, 0, 0);
-        const startOfYesterday = new Date(startOfToday);
-        startOfYesterday.setDate(startOfYesterday.getDate() - 1);
-        const sevenDaysAgo = new Date(startOfToday);
-        sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
-        const thirtyDaysAgo = new Date(startOfToday);
-        thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
-        const buckets = [
-            { key: "today", label: "Today", agents: [] },
-            { key: "yesterday", label: "Yesterday", agents: [] },
-            { key: "last7", label: "Last 7 Days", agents: [] },
-            { key: "last30", label: "Last 30 Days", agents: [] },
-            { key: "older", label: "Older", agents: [] },
-        ];
-        for (const agent of flatClosedAgents) {
-            const d = new Date(getAgentSortDate(agent));
-            if (d >= startOfToday)
-                buckets[0].agents.push(agent);
-            else if (d >= startOfYesterday)
-                buckets[1].agents.push(agent);
-            else if (d >= sevenDaysAgo)
-                buckets[2].agents.push(agent);
-            else if (d >= thirtyDaysAgo)
-                buckets[3].agents.push(agent);
-            else
-                buckets[4].agents.push(agent);
+    const currentSection = controlledSection ??
+        (activeTabIndex === 0 ? "inbox" : activeTabIndex === 1 ? "all" : "create");
+    const pageHeaderDescription = useMemo(() => {
+        if (selectedAgentId) {
+            const fromActive = activeAgents.find((agent) => agent.id === selectedAgentId);
+            if (fromActive?.name)
+                return fromActive.name;
+            for (const group of profileGroups) {
+                const agent = group.agents.find((agent) => agent.id === selectedAgentId);
+                if (agent?.name)
+                    return agent.name;
+            }
         }
-        return buckets.filter((b) => b.agents.length > 0);
-    }, [flatClosedAgents, getAgentSortDate]);
-    if (initialLoad && loading) {
-        return (_jsxs("div", { className: "flex h-full items-center justify-center gap-2", children: [_jsx(Spinner, { size: "sm" }), _jsx("div", { className: "text-neutral-grey-50 text-[12px]", children: "Loading agents..." })] }));
+        return SECTION_LABELS[currentSection];
+    }, [selectedAgentId, activeAgents, profileGroups, currentSection]);
+    // Show full-screen loading only on initial load (skip for "create" – that view loads its own data)
+    if (initialLoad && loading && currentSection !== "create") {
+        return (_jsxs("div", { className: "flex h-full items-center justify-center gap-2", children: [_jsx(Spinner, { size: "sm" }), _jsx("div", { className: "text-sm text-gray-500", children: "Loading agents..." })] }));
     }
-    const newAgentButton = viewMode === "list" && !hideNewAgentButton && (_jsxs(Button, { type: "button", variant: "outline", size: "lg", onClick: handleNewAgentClick, className: cn("border-border-default hover:border-neutral-grey-100 hover:bg-neutral-grey-5 h-[38px] justify-center gap-3 rounded bg-white text-[14px] font-medium shadow-none", toolbarActions ? "min-w-0 flex-1" : "w-full"), "data-testid": "add-agent-button", children: [_jsx("span", { children: "Start new chat" }), _jsx(Plus, { className: "size-5", strokeWidth: 1 })] }));
-    return (_jsxs("div", { className: "absolute inset-0 flex flex-col bg-white", children: [(!compact || showCompactHeader) && (_jsx(PageHeader, { title: "AI Agents", description: "Build, run and orchestrate your AI workforce", variant: "compact", className: "border-border-default border-b", titleClassName: "text-[14px] leading-5 font-medium", descriptionClassName: "text-[12px] leading-5" })), _jsx("div", { className: "relative flex flex-1 flex-col overflow-hidden", children: viewMode === "create" ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "border-border-default shrink-0 border-b bg-white px-6 py-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("button", { type: "button", onClick: () => setViewMode("list"), className: "text-neutral-grey-50 hover:bg-neutral-grey-5 hover:text-neutral-grey-100 inline-flex items-center gap-1.5 rounded-md px-2 py-1.5 text-[13px] font-medium transition-colors", "data-testid": "agents-create-back-button", children: [_jsx(ArrowLeft, { className: "size-4", strokeWidth: 1 }), "Back"] }), _jsx("span", { className: "text-neutral-grey-50", children: "/" }), _jsx("h2", { className: "text-neutral-grey-100 text-[12px] font-medium tracking-tight", children: "New Agent" }), _jsx("p", { className: "text-neutral-grey-50 ml-1 hidden text-[12px] sm:inline", children: "Pick a profile to start with" })] }) }), _jsx("div", { className: "relative flex-1 overflow-y-auto bg-white", children: _jsx(AgentGalleryView, { variant: "pane", onSelectProfile: handleCreateAgent }) })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "border-border-default shrink-0 border-b bg-white px-4 py-4", children: _jsxs("div", { className: "space-y-3", children: [(newAgentButton || toolbarActions) && (_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [newAgentButton, toolbarActions && (_jsx("div", { className: "flex shrink-0 items-center gap-1", children: toolbarActions }))] })), _jsx("div", { className: "min-w-0", children: _jsx(SearchInput, { value: searchTerm, onChange: setSearchTerm, placeholder: "Search...", loading: loading && !initialLoad, size: "sm", inputClassName: "text-[12px] placeholder:text-neutral-grey-50" }) }), _jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [profileGroups.length > 0 && (_jsxs("div", { className: "border-border-default bg-neutral-grey-5 flex h-8 shrink-0 items-center overflow-hidden rounded border p-0.5", children: [_jsx("button", { type: "button", onClick: () => setHistoryViewMode("grouped"), className: cn("flex size-7 items-center justify-center rounded transition-colors", historyViewMode === "grouped"
-                                                            ? "text-neutral-grey-100 bg-white shadow-sm"
-                                                            : "text-neutral-grey-50 hover:text-neutral-grey-100"), title: "Grouped by profile", "aria-label": "Grouped by profile", children: _jsx(Layers, { className: "size-4", strokeWidth: 1 }) }), _jsx("button", { type: "button", onClick: () => setHistoryViewMode("flat"), className: cn("flex size-7 items-center justify-center rounded transition-colors", historyViewMode === "flat"
-                                                            ? "text-neutral-grey-100 bg-white shadow-sm"
-                                                            : "text-neutral-grey-50 hover:text-neutral-grey-100"), title: "Grouped by date", "aria-label": "Grouped by date", children: _jsx(List, { className: "size-4", strokeWidth: 1 }) })] })), _jsxs("label", { className: "text-neutral-grey-50 hover:text-neutral-grey-100 ml-auto flex min-h-10 shrink-0 cursor-pointer items-center justify-end gap-2 rounded text-right text-[12px] font-medium transition-colors", children: [_jsx("span", { className: "truncate select-none", children: "Show just my agents" }), _jsx(Switch, { checked: showOnlyMyAgents, onCheckedChange: (checked) => setShowOnlyMyAgents(checked === true), className: "data-[state=checked]:bg-neutral-grey-100 data-[state=unchecked]:bg-neutral-grey-15 h-[20px] w-[38px] p-[2px] shadow-none [&_[data-slot=switch-thumb]]:size-[16px] [&_[data-slot=switch-thumb]]:data-[state=checked]:translate-x-[18px]" })] })] })] }) }), _jsxs("div", { className: "relative flex-1 overflow-y-auto bg-white", children: [loading && !initialLoad && (_jsx("div", { className: "absolute top-2 left-1/2 z-10 -translate-x-1/2 rounded-md bg-white px-3 py-1.5 shadow-md", children: _jsxs("div", { className: "text-neutral-grey-50 flex items-center gap-2 text-[12px]", children: [_jsx(RefreshCw, { className: "size-3 animate-spin", strokeWidth: 1 }), _jsx("span", { children: "Loading..." })] }) })), error ? (_jsx("div", { className: "flex h-full items-center justify-center", children: _jsxs("div", { className: "max-w-md text-center", children: [_jsx("div", { className: "text-feedback-red mb-4 text-[12px]", children: error }), _jsx("button", { onClick: handleRefresh, className: "bg-feedback-blue hover:bg-feedback-blue rounded px-4 py-2 text-xs text-white", children: "Retry" })] }) })) : totalActiveCount === 0 &&
-                                    totalClosedCount === 0 &&
-                                    !loading ? (_jsx("div", { className: "text-neutral-grey-50 flex h-full items-center justify-center text-[12px]", children: searchTerm.trim()
-                                        ? "No agents match your search"
-                                        : "No agents found" })) : (_jsxs("div", { className: cn("space-y-5 px-4 py-4", loading && "opacity-60"), children: [activeAgents.length > 0 && (_jsxs("div", { className: "space-y-1.5", children: [_jsx("div", { className: "text-neutral-grey-50 py-1.5 text-[12px] leading-5 font-medium", children: "Active" }), _jsx("div", { className: "space-y-1", children: sortedActiveAgents.map((agent) => (_jsx(AgentCard, { agent: agent, onClick: handleAgentClick, onResume: handleOpenAgent, onDelete: handleDeleteAgent, onRename: handleRenameAgent, formatDateTime: formatDateTime, selected: selectedAgentId === agent.id }, agent.id))) })] })), profileGroups.length > 0 && (_jsx("div", { className: "space-y-2", children: historyViewMode === "grouped" ? (_jsx("div", { className: "space-y-2 bg-white", children: profileGroups.map((profileGroup) => {
-                                                    const profileKey = profileGroup.profileId || "null";
-                                                    const isExpanded = expandedProfiles.has(profileKey);
-                                                    const isLoadingMore = loadingMoreForProfile === profileGroup.profileId;
-                                                    const hasMore = profileGroup.agents.length <
-                                                        profileGroup.totalClosedCount;
-                                                    return (_jsx(ProfileAgentsGroup, { profileGroup: profileGroup, isExpanded: isExpanded, isLoadingMore: isLoadingMore, hasMore: hasMore, onToggle: () => handleToggleProfile(profileGroup.profileId), onLoadMore: () => handleLoadMoreForProfile(profileGroup.profileId), onAgentClick: handleAgentClick, onResumeAgent: handleOpenAgent, onDeleteAgent: handleDeleteAgent, onRenameAgent: handleRenameAgent, formatDateTime: formatDateTime, selectedAgentId: selectedAgentId }, profileKey));
-                                                }) })) : (_jsx("div", { className: "space-y-5", children: dateBuckets.map((bucket) => (_jsx(DateAgentsGroup, { bucketKey: bucket.key, label: bucket.label, agents: bucket.agents, isExpanded: !collapsedDateBuckets.has(bucket.key), onToggle: () => handleToggleDateBucket(bucket.key), onAgentClick: handleAgentClick, onResumeAgent: handleOpenAgent, onDeleteAgent: handleDeleteAgent, onRenameAgent: handleRenameAgent, formatDateTime: formatDateTime, selectedAgentId: selectedAgentId }, bucket.key))) })) }))] }))] })] })) }), _jsx(RenameAgentDialog, { open: renameTarget !== null, initialName: renameTarget?.name ?? "", onOpenChange: (open) => {
-                    if (!open)
-                        setRenameTarget(null);
-                }, onRename: performRename })] }));
+    return (_jsxs("div", { className: "absolute inset-0 flex flex-col bg-[#fcfcfc]", children: [!compact && (_jsx(PageHeader, { icon: _jsx(SecretAgentIcon, { size: 28, strokeWidth: 1.5 }), title: "AI Agents", description: pageHeaderDescription, variant: "compact" })), runningAgents.length > 0 && currentSection !== "create" && (_jsxs("div", { className: "shrink-0 border-b border-gray-100 bg-white px-4 pt-3 pb-2", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2 text-emerald-600", children: [_jsx(Spinner, { size: "xs" }), _jsxs("span", { className: "text-xs font-semibold tracking-wide text-emerald-700", children: [runningAgents.length, " running"] })] }), _jsxs("button", { onClick: () => void handleStopAllRunning(), disabled: isStoppingAllRunning, className: "flex shrink-0 items-center gap-1.5 rounded-md px-2 py-1 text-[11px] font-medium text-gray-500 transition-colors hover:bg-red-50 hover:text-red-600 disabled:cursor-not-allowed disabled:opacity-60", children: [isStoppingAllRunning ? (_jsx(Spinner, { size: "sm" })) : (_jsx(Square, { className: "size-3 fill-current", strokeWidth: 2 })), _jsx("span", { children: "Stop All" })] })] }), _jsx("div", { className: "max-h-[200px] overflow-y-auto", children: _jsx("div", { className: "flex flex-col gap-px", children: runningAgents.map((agent) => {
+                                const isSelected = selectedAgentId === agent.id;
+                                const isStopping = stoppingAgentIds.has(agent.id);
+                                return (_jsxs("div", { className: cn("group flex items-center gap-2 rounded-md px-2 py-1.5 transition-colors", isSelected
+                                        ? "bg-emerald-100/80 text-emerald-800"
+                                        : "text-gray-700 hover:bg-gray-50"), children: [_jsxs("button", { onClick: () => handleAgentClick(agent), className: "flex min-w-0 flex-1 items-center gap-2 text-xs", children: [agent.profileSvgIcon ? (_jsx("div", { className: "h-4 w-4 shrink-0 opacity-60 [&>svg]:h-full [&>svg]:w-full", dangerouslySetInnerHTML: {
+                                                        __html: sanitizeSvg(agent.profileSvgIcon),
+                                                    } })) : (_jsx(SecretAgentIcon, { size: 14, strokeWidth: 1.5, className: "shrink-0 opacity-60" })), _jsx("span", { className: "flex-1 truncate text-left font-medium", children: agent.name })] }), _jsx("button", { onClick: (event) => {
+                                                event.stopPropagation();
+                                                void handleStopAgent(agent.id, agent.name);
+                                            }, disabled: isStopping, title: "Stop agent", className: "flex shrink-0 items-center justify-center rounded p-1 text-gray-400 opacity-0 transition-all group-hover:opacity-100 hover:bg-red-50 hover:text-red-500 disabled:cursor-not-allowed disabled:opacity-60", children: isStopping ? (_jsx(Spinner, { size: "sm" })) : (_jsx(Square, { className: "size-3 fill-current", strokeWidth: 2 })) })] }, agent.id));
+                            }) }) })] })), controlledSection === undefined && (_jsx("div", { className: "shrink-0 border-b border-gray-100 bg-white px-6 shadow-[0_1px_2px_rgba(0,0,0,0.03)]", children: _jsx(SimpleTabs, { tabs: [
+                        {
+                            id: "inbox",
+                            label: inboxCount > 0 ? `Inbox (${inboxCount})` : "Inbox",
+                            content: null,
+                            testId: "agents-tab-inbox",
+                        },
+                        {
+                            id: "all",
+                            label: "All Agents",
+                            content: null,
+                            testId: "agents-tab-all",
+                        },
+                        {
+                            id: "create",
+                            label: "Create New",
+                            content: null,
+                            testId: "agents-tab-create",
+                        },
+                    ], activeTab: activeTabIndex, setActiveTab: setActiveTabIndex, hideContent: true, variant: "elegant", className: "gap-6" }) })), _jsxs("div", { className: "relative flex-1 overflow-hidden", children: [activeTabIndex === 0 && (_jsx("div", { className: "absolute inset-0 overflow-y-auto", children: _jsx(AgentsInbox, { agents: activeAgents, onOpenAgent: handleOpenAgent, onDismissAgent: handleCloseAgent, onCloseAll: handleCloseAllInbox, formatDateTime: formatDateTime, loading: loading && initialLoad, selectedAgentId: selectedAgentId, showOnlyMyAgents: showOnlyMyAgents, onShowOnlyMyAgentsChange: setShowOnlyMyAgents }) })), activeTabIndex === 1 && (_jsxs("div", { className: "absolute inset-0 flex flex-col", children: [_jsxs("div", { className: "shrink-0 border-b border-gray-100 bg-white p-6", children: [_jsxs("div", { className: "mb-4 flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-lg font-semibold tracking-tight text-gray-900", children: "Agent History" }), _jsxs("p", { className: "text-[13px] text-gray-500", children: [totalActiveCount, " active, ", totalClosedCount, " closed agents"] })] }), _jsx(SimpleIconButton, { onClick: handleRefresh, icon: _jsx(RefreshCw, { className: cn("size-4 text-gray-400", refreshing && "animate-spin"), strokeWidth: 2 }), label: "Refresh list", disabled: refreshing, className: "h-9 w-9 rounded-full bg-gray-50 shadow-sm transition-colors hover:bg-gray-100" })] }), _jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-center", children: [_jsx("div", { className: "flex-1", children: _jsx(FilterInput, { value: searchTerm, onChange: setSearchTerm, placeholder: "Search by name, description, or agent ID (GUID)...", loading: loading && !initialLoad, size: "md", className: "border-gray-100 shadow-sm focus-within:border-gray-300" }) }), _jsxs("div", { className: "flex items-center gap-2", children: [profileGroups.length > 0 && (_jsxs("div", { className: "flex items-center gap-1 rounded-lg border border-gray-100 bg-gray-50/50 p-1", children: [_jsxs("button", { onClick: () => setHistoryViewMode("grouped"), className: cn("flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-[12px] font-medium transition-colors", historyViewMode === "grouped"
+                                                                    ? "bg-white text-gray-900 shadow-sm"
+                                                                    : "text-gray-600 hover:text-gray-900"), title: "Grouped by profile", children: [_jsx(Layers, { className: "size-3.5", strokeWidth: 2 }), _jsx("span", { children: "Grouped" })] }), _jsxs("button", { onClick: () => setHistoryViewMode("flat"), className: cn("flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-[12px] font-medium transition-colors", historyViewMode === "flat"
+                                                                    ? "bg-white text-gray-900 shadow-sm"
+                                                                    : "text-gray-600 hover:text-gray-900"), title: "Flat list (newest first)", children: [_jsx(List, { className: "size-3.5", strokeWidth: 2 }), _jsx("span", { children: "Flat" })] })] })), _jsxs("label", { className: "flex cursor-pointer items-center gap-2.5 rounded-lg border border-gray-100 bg-gray-50/50 px-3 py-2 text-sm transition-colors hover:bg-gray-100", children: [_jsx(Checkbox, { checked: showOnlyMyAgents, onCheckedChange: (checked) => setShowOnlyMyAgents(checked === true), className: "border-gray-300 data-[state=checked]:border-black data-[state=checked]:bg-black" }), _jsx("span", { className: "text-[13px] font-medium text-gray-700 select-none", children: "My agents only" })] })] })] })] }), _jsxs("div", { className: "relative flex-1 overflow-y-auto", children: [loading && !initialLoad && (_jsx("div", { className: "absolute top-2 left-1/2 z-10 -translate-x-1/2 rounded-md bg-white px-3 py-1.5 shadow-md", children: _jsxs("div", { className: "flex items-center gap-2 text-sm text-gray-600", children: [_jsx(RefreshCw, { className: "size-3 animate-spin", strokeWidth: 1 }), _jsx("span", { children: "Loading..." })] }) })), error ? (_jsx("div", { className: "flex h-full items-center justify-center", children: _jsxs("div", { className: "max-w-md text-center", children: [_jsx("div", { className: "mb-4 text-sm text-red-600", children: error }), _jsx("button", { onClick: handleRefresh, className: "rounded bg-blue-500 px-4 py-2 text-xs text-white hover:bg-blue-600", children: "Retry" })] }) })) : totalActiveCount === 0 &&
+                                        totalClosedCount === 0 &&
+                                        !loading ? (_jsx("div", { className: "flex h-full items-center justify-center text-sm text-gray-500", children: searchTerm.trim()
+                                            ? "No agents match your search"
+                                            : "No agents found" })) : (_jsxs("div", { className: cn("space-y-4 p-4", loading && "opacity-60"), children: [activeAgents.length > 0 && (_jsxs("div", { className: "space-y-2", children: [_jsx("h3", { className: "text-sm font-semibold text-gray-700", children: "Active Agents" }), sortedActiveAgents.map((agent) => (_jsx(AgentCard, { agent: agent, onClick: handleAgentClick, onResume: handleOpenAgent, onClose: handleCloseAgent, onDelete: handleDeleteAgent, formatDateTime: formatDateTime, selected: selectedAgentId === agent.id }, agent.id)))] })), profileGroups.length > 0 && (_jsxs("div", { className: "space-y-2", children: [_jsx("h3", { className: "text-sm font-semibold text-gray-700", children: "History" }), historyViewMode === "grouped" ? (
+                                                    // Grouped by profile view
+                                                    profileGroups.map((profileGroup) => {
+                                                        const profileKey = profileGroup.profileId || "null";
+                                                        const isExpanded = expandedProfiles.has(profileKey);
+                                                        const isLoadingMore = loadingMoreForProfile === profileGroup.profileId;
+                                                        const hasMore = profileGroup.agents.length <
+                                                            profileGroup.totalClosedCount;
+                                                        return (_jsx(ProfileAgentsGroup, { profileGroup: profileGroup, isExpanded: isExpanded, isLoadingMore: isLoadingMore, hasMore: hasMore, onToggle: () => handleToggleProfile(profileGroup.profileId), onLoadMore: () => handleLoadMoreForProfile(profileGroup.profileId), onAgentClick: handleAgentClick, onResumeAgent: handleOpenAgent, onCloseAgent: handleCloseAgent, onDeleteAgent: handleDeleteAgent, formatDateTime: formatDateTime, selectedAgentId: selectedAgentId }, profileKey));
+                                                    })) : (
+                                                    // Flat list view (newest first)
+                                                    _jsx("div", { className: "space-y-3", children: flatClosedAgents.map((agent) => (_jsx(AgentCard, { agent: agent, onClick: handleAgentClick, onResume: handleOpenAgent, onClose: handleCloseAgent, onDelete: handleDeleteAgent, formatDateTime: formatDateTime, selected: selectedAgentId === agent.id }, agent.id))) }))] }))] }))] })] })), activeTabIndex === 2 && (_jsx("div", { className: "absolute inset-0 overflow-y-auto bg-white p-2", children: _jsx(CreateAgentView, { onCreateAgent: handleCreateAgent }) }))] })] }));
 }
 //# sourceMappingURL=AgentsView.js.map