@burdenoff/microfe-vibecontrols 2026.522.1 → 2026.522.3

package/dist/components/agent-manager/AgentManagerChatPane.js.map

@@ -1 +1 @@
-{"version":3,"file":"AgentManagerChatPane.js","names":[],"sources":["../../../src/components/agent-manager/AgentManagerChatPane.tsx"],"sourcesContent":["/**\n * Main chat interface for a single Agent Manager session.\n *\n * Renders message list + input area, manages the send/receive flow,\n * fetches existing conversation logs on mount, and provides\n * auto-scroll, cancel, and in-session search support.\n */\n\nimport { useEffect, useRef, useState, useCallback, useMemo, type FC } from 'react';\nimport { useSearchParams } from 'react-router-dom';\nimport { Bookmark, PackagePlus, Search, X } from 'lucide-react';\nimport { useAgentManagerStore } from '@/store/agentManagerStore';\nimport { useAgentManagerStreaming } from '@/hooks/useAgentManagerStreaming';\nimport { useCachedInitialData } from '@/hooks/useCachedInitialData';\nimport { fetchSessionLogs } from '@/services/aiApi';\nimport { useActiveAgentProfile } from '@/hooks/useActiveAgentProfile';\nimport { useToggleAgentBookmark } from '@/hooks/useToggleAgentBookmark';\nimport { AgentManagerMessageList } from './AgentManagerMessageList';\nimport { AgentManagerInputArea } from './AgentManagerInputArea';\nimport { AgentManagerBookmarksDrawer } from './AgentManagerBookmarksDrawer';\nimport { PluginInstallModal } from './PluginInstallModal';\nimport { AIProviderCredentialsCard } from '@/components/ai/AIProviderCredentialsCard';\nimport type { AgentManagerMessage } from '@/types/agentManager';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface AgentManagerChatPaneProps {\n  sessionId: string;\n  agentId: string;\n}\n\nexport const AgentManagerChatPane: FC<AgentManagerChatPaneProps> = ({ sessionId, agentId }) => {\n  const [loadingLogs, setLoadingLogs] = useState(false);\n  const [searchOpen, setSearchOpen] = useState(false);\n  const [searchQuery, setSearchQuery] = useState('');\n  // Provider-install modal triggered from the header. Lets users add a\n  // claude/codex/gemini/opencode plugin without leaving the conversation.\n  const [installModalOpen, setInstallModalOpen] = useState(false);\n  const [bookmarksDrawerOpen, setBookmarksDrawerOpen] = useState(false);\n  const [flashMessageId, setFlashMessageId] = useState<string | null>(null);\n  const [searchParams, setSearchParams] = useSearchParams();\n  const pendingScrollMessageId = searchParams.get('messageId');\n  const consumedScrollTargetRef = useRef<string | null>(null);\n  const tr = useTr();\n\n  const { agents } = useCachedInitialData();\n  const activeAgent = useMemo(\n    () => agents.find((a) => a.id === agentId) ?? null,\n    [agents, agentId]\n  );\n\n  const sessionState = useAgentManagerStore((s) => s.sessionStates[sessionId]);\n  const addMessage = useAgentManagerStore((s) => s.addMessage);\n\n  const messages = useMemo(\n    () => sessionState?.messages ?? [],\n    [sessionState?.messages]\n  );\n\n  const { active: activeProfile } = useActiveAgentProfile(activeAgent?.id ?? null);\n  const agentRef = useMemo(\n    () => ({ id: agentId, profile: activeProfile }),\n    [agentId, activeProfile]\n  );\n\n  const { sendMessage, cancelStream, isStreaming } = useAgentManagerStreaming({\n    agent: agentRef,\n    sessionId,\n  });\n\n  const { bookmarkedIds, toggle: toggleBookmark } = useToggleAgentBookmark(sessionId);\n\n  const jumpToMessage = useCallback((messageId: string) => {\n    const el = document.querySelector(`[data-message-id=\"${messageId}\"]`);\n    if (!el) return;\n    el.scrollIntoView({ behavior: 'smooth', block: 'center' });\n    setFlashMessageId(messageId);\n    window.setTimeout(() => {\n      setFlashMessageId((current) => (current === messageId ? null : current));\n    }, 1500);\n  }, []);\n\n  const handleToggleBookmark = useCallback(\n    (messageId: string) => {\n      void toggleBookmark({ agentId, sessionId, messageId });\n    },\n    [toggleBookmark, agentId, sessionId]\n  );\n\n  const toggleSearch = useCallback(() => {\n    setSearchOpen((prev) => {\n      if (prev) setSearchQuery('');\n      return !prev;\n    });\n  }, []);\n\n  // Fetch existing conversation logs on mount\n  useEffect(() => {\n    let cancelled = false;\n\n    const loadExistingLogs = async () => {\n      // Only load if session has no messages yet\n      if (messages.length > 0) return;\n\n      setLoadingLogs(true);\n      try {\n        const logs = await fetchSessionLogs(agentRef, sessionId, {\n          types: ['input', 'output'],\n        });\n\n        if (cancelled || logs.length === 0) return;\n\n        const seenLogKeys = new Set<string>();\n\n        // Convert session logs to AgentManagerMessage format. The core AI\n        // route owns logging, but older provider builds also wrote the same\n        // input/output records; collapse same-second duplicates on restore.\n        for (const log of logs) {\n          const content = log.message || log.content || '';\n          const timestamp = log.timestamp || log.createdAt;\n          const timestampSecond = timestamp ? Math.floor(new Date(timestamp).getTime() / 1000) : 0;\n          const logKey = [log.type, content, log.model ?? '', timestampSecond].join('\\u0000');\n          if (seenLogKeys.has(logKey)) continue;\n          seenLogKeys.add(logKey);\n\n          const msg: AgentManagerMessage = {\n            id: log.id,\n            role: log.type === 'input' ? 'user' : 'assistant',\n            content,\n            timestamp,\n            tokens: log.tokenCount ? { input: 0, output: log.tokenCount } : undefined,\n            model: log.model,\n          };\n          addMessage(sessionId, msg);\n        }\n      } catch {\n        // Silent fail -- session may not have logs yet\n      } finally {\n        if (!cancelled) setLoadingLogs(false);\n      }\n    };\n\n    void loadExistingLogs();\n\n    return () => {\n      cancelled = true;\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- only run on mount\n  }, [agentId, sessionId]);\n\n  // Auto-scroll to a message linked via ?messageId=... (from drawer / cross-session page).\n  // Waits for logs to finish loading and the target to be in the DOM before scrolling.\n  useEffect(() => {\n    if (!pendingScrollMessageId || loadingLogs) return;\n    if (consumedScrollTargetRef.current === pendingScrollMessageId) return;\n\n    const exists = messages.some((m) => m.id === pendingScrollMessageId);\n    if (!exists) return;\n\n    consumedScrollTargetRef.current = pendingScrollMessageId;\n    jumpToMessage(pendingScrollMessageId);\n\n    // Strip the query param so a manual refresh doesn't re-trigger the flash.\n    const next = new URLSearchParams(searchParams);\n    next.delete('messageId');\n    setSearchParams(next, { replace: true });\n  }, [pendingScrollMessageId, loadingLogs, messages, jumpToMessage, searchParams, setSearchParams]);\n\n  return (\n    <div className=\"flex flex-col h-full min-h-0\" data-testid=\"agent-manager-chat-pane\">\n      {/* In-session search bar.\n          Layout: [search controls (flex-1)] ... [Manage AI providers].\n          The search input expands inside the LEFT cluster only, so the\n          Manage button stays anchored on the right and never shifts. */}\n      <div className=\"flex items-center gap-1 px-3 py-1 border-b border-border-default bg-bg-surface flex-shrink-0\">\n        <div className=\"flex items-center gap-1.5 min-w-0 flex-1\">\n          <button\n            type=\"button\"\n            onClick={toggleSearch}\n            className={`p-1 rounded transition-colors shrink-0 ${\n              searchOpen\n                ? 'bg-action-primary-bg/10 text-action-primary-text'\n                : 'text-text-tertiary hover:text-text-secondary hover:bg-bg-elevated'\n            }`}\n            title={tr(\n              'vibecontrols.agentManager.chatPane.searchInSession',\n              'Search in session (Ctrl+F)'\n            )}\n            aria-label={tr(\n              'vibecontrols.agentManager.chatPane.searchInSession',\n              'Search in session'\n            )}\n          >\n            <Search className=\"w-3.5 h-3.5\" />\n          </button>\n          {searchOpen && (\n            <div className=\"flex items-center gap-1.5 flex-1 min-w-0\">\n              <input\n                type=\"text\"\n                value={searchQuery}\n                onChange={(e) => setSearchQuery(e.target.value)}\n                placeholder={tr(\n                  'vibecontrols.agentManager.chatPane.searchPlaceholder',\n                  'Search in conversation...'\n                )}\n                autoFocus\n                className=\"flex-1 min-w-0 bg-transparent text-xs text-text-primary placeholder:text-text-tertiary focus:outline-none\"\n              />\n              {searchQuery && (\n                <button\n                  type=\"button\"\n                  onClick={() => setSearchQuery('')}\n                  className=\"p-0.5 rounded hover:bg-bg-elevated transition-colors\"\n                >\n                  <X className=\"w-3 h-3 text-text-tertiary\" />\n                </button>\n              )}\n            </div>\n          )}\n        </div>\n        <button\n          type=\"button\"\n          onClick={() => setBookmarksDrawerOpen(true)}\n          className=\"shrink-0 p-1 rounded transition-colors text-text-tertiary hover:text-text-secondary hover:bg-bg-elevated\"\n          title={tr(\n            'vibecontrols.agentManager.chatPane.bookmarksTooltip',\n            'View bookmarked messages'\n          )}\n          aria-label={tr('vibecontrols.agentManager.chatPane.bookmarksLabel', 'Bookmarks')}\n          data-testid=\"agent-manager-bookmarks-trigger\"\n        >\n          <Bookmark className=\"w-3.5 h-3.5\" />\n        </button>\n        <button\n          type=\"button\"\n          onClick={() => setInstallModalOpen(true)}\n          className=\"shrink-0 inline-flex items-center gap-1.5 rounded-md border border-border-default bg-bg-elevated px-2 py-1 text-xs font-medium text-text-primary transition-colors hover:bg-bg-sunken hover:border-action-primary-bg/40\"\n          title={tr(\n            'vibecontrols.agentManager.chatPane.manageProvidersTooltip',\n            'Install or remove AI providers (Claude, Codex, Gemini, OpenCode)'\n          )}\n          aria-label={tr(\n            'vibecontrols.agentManager.chatPane.manageProviders',\n            'Manage AI providers'\n          )}\n          data-testid=\"agent-manager-manage-providers\"\n        >\n          <PackagePlus className=\"w-3.5 h-3.5\" />\n          <span className=\"hidden sm:inline\">\n            {tr('vibecontrols.agentManager.chatPane.manageProviders', 'Manage AI providers')}\n          </span>\n        </button>\n      </div>\n\n      {/* Message list */}\n      {loadingLogs ? (\n        <div className=\"flex-1 flex items-center justify-center\">\n          <p className=\"text-sm text-text-secondary\">\n            {tr(\n              'vibecontrols.agentManager.chatPane.loadingConversation',\n              'Loading conversation...'\n            )}\n          </p>\n        </div>\n      ) : (\n        <AgentManagerMessageList\n          messages={messages}\n          isStreaming={isStreaming}\n          onCancelStream={cancelStream}\n          searchQuery={searchQuery}\n          bookmarkedIds={bookmarkedIds}\n          onToggleBookmark={handleToggleBookmark}\n          flashMessageId={flashMessageId}\n        />\n      )}\n\n      {/* Rich input area with controls */}\n      <AgentManagerInputArea\n        agentId={agentId}\n        sessionId={sessionId}\n        onSend={(text) => void sendMessage(text)}\n        onCancel={cancelStream}\n        agentTunnelUrl={activeAgent?.tunnelUrl ?? undefined}\n        agentApiKey={activeAgent?.agentApiKey ?? undefined}\n      />\n\n      {/* Per-session bookmarks drawer */}\n      <AgentManagerBookmarksDrawer\n        open={bookmarksDrawerOpen}\n        onClose={() => setBookmarksDrawerOpen(false)}\n        sessionId={sessionId}\n        messages={messages}\n        onJump={jumpToMessage}\n      />\n\n      {/* Header-triggered provider install/remove. Sits below the chat\n          tree so it can render full-screen without disturbing layout. */}\n      <PluginInstallModal\n        open={installModalOpen}\n        agentId={agentId}\n        onClose={() => setInstallModalOpen(false)}\n      />\n\n      {/* SDK auth prompt: opens when the streaming hook detects a missing\n          ANTHROPIC_API_KEY / ANTHROPIC_AUTH_TOKEN, so the user can save the\n          credential inline instead of being told to go look elsewhere.\n          The session's currently-selected SDK is forwarded so the picker\n          can preselect the right provider. */}\n      <SdkAuthPromptModal\n        agentId={agentId}\n        agentRef={agentRef}\n        initialProviderId={sessionState?.sdk ?? undefined}\n      />\n    </div>\n  );\n};\n\ninterface SdkAuthPromptModalProps {\n  agentId: string;\n  agentRef: { id: string; profile: string };\n  initialProviderId?: string;\n}\n\nconst SdkAuthPromptModal: FC<SdkAuthPromptModalProps> = ({\n  agentId,\n  agentRef,\n  initialProviderId,\n}) => {\n  const sdkAuthPrompt = useAgentManagerStore((s) => s.sdkAuthPrompt);\n  const setSdkAuthPrompt = useAgentManagerStore((s) => s.setSdkAuthPrompt);\n  const tr = useTr();\n\n  if (!sdkAuthPrompt || sdkAuthPrompt.agentId !== agentId) return null;\n\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4\">\n      <div\n        className=\"absolute inset-0 bg-bg-overlay\"\n        onClick={() => setSdkAuthPrompt(null)}\n        aria-hidden\n      />\n      {/* Constrain height to the viewport and let the inner body scroll so the\n          modal never escapes the screen no matter how many providers/fields\n          render inside AIProviderCredentialsCard. The header stays sticky so\n          the close button is always reachable. */}\n      <div className=\"relative w-full max-w-xl max-h-[85vh] flex flex-col rounded-lg border border-border-default bg-bg-surface shadow-xl overflow-hidden\">\n        <div className=\"flex items-center justify-between px-4 py-3 border-b border-border-default bg-bg-surface flex-shrink-0\">\n          <h3 className=\"text-base font-semibold text-text-primary truncate pr-2\">\n            {tr('vibecontrols.ai.sdkAuth.title', 'Configure AI provider credentials')}\n          </h3>\n          <button\n            type=\"button\"\n            onClick={() => setSdkAuthPrompt(null)}\n            className=\"p-1 rounded hover:bg-bg-sunken transition-colors flex-shrink-0\"\n            aria-label={tr('vibecontrols.common.close', 'Close')}\n          >\n            <X className=\"w-5 h-5 text-text-secondary\" />\n          </button>\n        </div>\n        <div className=\"flex-1 min-h-0 overflow-y-auto px-4 py-3 space-y-3\">\n          <p className=\"text-sm text-text-secondary\">\n            {tr(\n              'vibecontrols.ai.sdkAuth.body',\n              'The agent does not have a credential configured for this provider. Pick a provider and save one to continue the conversation.'\n            )}\n          </p>\n          <AIProviderCredentialsCard agent={agentRef} initialProviderId={initialProviderId} />\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"AgentManagerChatPane.js","names":[],"sources":["../../../src/components/agent-manager/AgentManagerChatPane.tsx"],"sourcesContent":["/**\n * Main chat interface for a single Agent Manager session.\n *\n * Renders message list + input area, manages the send/receive flow,\n * fetches existing conversation logs on mount, and provides\n * auto-scroll, cancel, and in-session search support.\n */\n\nimport { useEffect, useRef, useState, useCallback, useMemo, type FC } from 'react';\nimport { useSearchParams } from 'react-router-dom';\nimport { Bookmark, PackagePlus, Search, X } from 'lucide-react';\nimport { useAgentManagerStore } from '@/store/agentManagerStore';\nimport { useAgentManagerStreaming } from '@/hooks/useAgentManagerStreaming';\nimport { useCachedInitialData } from '@/hooks/useCachedInitialData';\nimport { fetchSessionLogs } from '@/services/aiApi';\nimport { useActiveAgentProfile } from '@/hooks/useActiveAgentProfile';\nimport { useToggleAgentBookmark } from '@/hooks/useToggleAgentBookmark';\nimport { AgentManagerMessageList } from './AgentManagerMessageList';\nimport { AgentManagerInputArea } from './AgentManagerInputArea';\nimport { AgentManagerBookmarksDrawer } from './AgentManagerBookmarksDrawer';\nimport { PluginInstallModal } from './PluginInstallModal';\nimport { AIProviderCredentialsCard } from '@/components/ai/AIProviderCredentialsCard';\nimport type { AgentManagerMessage } from '@/types/agentManager';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface AgentManagerChatPaneProps {\n  sessionId: string;\n  agentId: string;\n}\n\nexport const AgentManagerChatPane: FC<AgentManagerChatPaneProps> = ({ sessionId, agentId }) => {\n  const [loadingLogs, setLoadingLogs] = useState(false);\n  const [searchOpen, setSearchOpen] = useState(false);\n  const [searchQuery, setSearchQuery] = useState('');\n  // Provider-install modal triggered from the header. Lets users add a\n  // claude/codex/gemini/opencode plugin without leaving the conversation.\n  const [installModalOpen, setInstallModalOpen] = useState(false);\n  const [bookmarksDrawerOpen, setBookmarksDrawerOpen] = useState(false);\n  const [flashMessageId, setFlashMessageId] = useState<string | null>(null);\n  const [searchParams, setSearchParams] = useSearchParams();\n  const pendingScrollMessageId = searchParams.get('messageId');\n  const consumedScrollTargetRef = useRef<string | null>(null);\n  const tr = useTr();\n\n  const { agents } = useCachedInitialData();\n  const activeAgent = useMemo(\n    () => agents.find((a) => a.id === agentId) ?? null,\n    [agents, agentId]\n  );\n\n  const sessionState = useAgentManagerStore((s) => s.sessionStates[sessionId]);\n  const addMessage = useAgentManagerStore((s) => s.addMessage);\n\n  const messages = useMemo(() => sessionState?.messages ?? [], [sessionState?.messages]);\n\n  const { active: activeProfile } = useActiveAgentProfile(activeAgent?.id ?? null);\n  const agentRef = useMemo(\n    () => ({ id: agentId, profile: activeProfile }),\n    [agentId, activeProfile]\n  );\n\n  const { sendMessage, cancelStream, isStreaming } = useAgentManagerStreaming({\n    agent: agentRef,\n    sessionId,\n  });\n\n  const { bookmarkedIds, toggle: toggleBookmark } = useToggleAgentBookmark(sessionId);\n\n  const jumpToMessage = useCallback((messageId: string) => {\n    const el = document.querySelector(`[data-message-id=\"${messageId}\"]`);\n    if (!el) return;\n    el.scrollIntoView({ behavior: 'smooth', block: 'center' });\n    setFlashMessageId(messageId);\n    window.setTimeout(() => {\n      setFlashMessageId((current) => (current === messageId ? null : current));\n    }, 1500);\n  }, []);\n\n  const handleToggleBookmark = useCallback(\n    (messageId: string) => {\n      void toggleBookmark({ agentId, sessionId, messageId });\n    },\n    [toggleBookmark, agentId, sessionId]\n  );\n\n  const toggleSearch = useCallback(() => {\n    setSearchOpen((prev) => {\n      if (prev) setSearchQuery('');\n      return !prev;\n    });\n  }, []);\n\n  // Fetch existing conversation logs on mount\n  useEffect(() => {\n    let cancelled = false;\n\n    const loadExistingLogs = async () => {\n      // Only load if session has no messages yet\n      if (messages.length > 0) return;\n\n      setLoadingLogs(true);\n      try {\n        const logs = await fetchSessionLogs(agentRef, sessionId, {\n          types: ['input', 'output'],\n        });\n\n        if (cancelled || logs.length === 0) return;\n\n        const seenLogKeys = new Set<string>();\n\n        // Convert session logs to AgentManagerMessage format. The core AI\n        // route owns logging, but older provider builds also wrote the same\n        // input/output records; collapse same-second duplicates on restore.\n        for (const log of logs) {\n          const content = log.message || log.content || '';\n          const timestamp = log.timestamp || log.createdAt;\n          const timestampSecond = timestamp ? Math.floor(new Date(timestamp).getTime() / 1000) : 0;\n          const logKey = [log.type, content, log.model ?? '', timestampSecond].join('\\u0000');\n          if (seenLogKeys.has(logKey)) continue;\n          seenLogKeys.add(logKey);\n\n          const msg: AgentManagerMessage = {\n            id: log.id,\n            role: log.type === 'input' ? 'user' : 'assistant',\n            content,\n            timestamp,\n            tokens: log.tokenCount ? { input: 0, output: log.tokenCount } : undefined,\n            model: log.model,\n          };\n          addMessage(sessionId, msg);\n        }\n      } catch {\n        // Silent fail -- session may not have logs yet\n      } finally {\n        if (!cancelled) setLoadingLogs(false);\n      }\n    };\n\n    void loadExistingLogs();\n\n    return () => {\n      cancelled = true;\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- only run on mount\n  }, [agentId, sessionId]);\n\n  // Auto-scroll to a message linked via ?messageId=... (from drawer / cross-session page).\n  // Waits for logs to finish loading and the target to be in the DOM before scrolling.\n  useEffect(() => {\n    if (!pendingScrollMessageId || loadingLogs) return;\n    if (consumedScrollTargetRef.current === pendingScrollMessageId) return;\n\n    const exists = messages.some((m) => m.id === pendingScrollMessageId);\n    if (!exists) return;\n\n    consumedScrollTargetRef.current = pendingScrollMessageId;\n    jumpToMessage(pendingScrollMessageId);\n\n    // Strip the query param so a manual refresh doesn't re-trigger the flash.\n    const next = new URLSearchParams(searchParams);\n    next.delete('messageId');\n    setSearchParams(next, { replace: true });\n  }, [pendingScrollMessageId, loadingLogs, messages, jumpToMessage, searchParams, setSearchParams]);\n\n  return (\n    <div className=\"flex flex-col h-full min-h-0\" data-testid=\"agent-manager-chat-pane\">\n      {/* In-session search bar.\n          Layout: [search controls (flex-1)] ... [Manage AI providers].\n          The search input expands inside the LEFT cluster only, so the\n          Manage button stays anchored on the right and never shifts. */}\n      <div className=\"flex items-center gap-1 px-3 py-1 border-b border-border-default bg-bg-surface flex-shrink-0\">\n        <div className=\"flex items-center gap-1.5 min-w-0 flex-1\">\n          <button\n            type=\"button\"\n            onClick={toggleSearch}\n            className={`p-1 rounded transition-colors shrink-0 ${\n              searchOpen\n                ? 'bg-action-primary-bg/10 text-action-primary-text'\n                : 'text-text-tertiary hover:text-text-secondary hover:bg-bg-elevated'\n            }`}\n            title={tr(\n              'vibecontrols.agentManager.chatPane.searchInSession',\n              'Search in session (Ctrl+F)'\n            )}\n            aria-label={tr(\n              'vibecontrols.agentManager.chatPane.searchInSession',\n              'Search in session'\n            )}\n          >\n            <Search className=\"w-3.5 h-3.5\" />\n          </button>\n          {searchOpen && (\n            <div className=\"flex items-center gap-1.5 flex-1 min-w-0\">\n              <input\n                type=\"text\"\n                value={searchQuery}\n                onChange={(e) => setSearchQuery(e.target.value)}\n                placeholder={tr(\n                  'vibecontrols.agentManager.chatPane.searchPlaceholder',\n                  'Search in conversation...'\n                )}\n                autoFocus\n                className=\"flex-1 min-w-0 bg-transparent text-xs text-text-primary placeholder:text-text-tertiary focus:outline-none\"\n              />\n              {searchQuery && (\n                <button\n                  type=\"button\"\n                  onClick={() => setSearchQuery('')}\n                  className=\"p-0.5 rounded hover:bg-bg-elevated transition-colors\"\n                >\n                  <X className=\"w-3 h-3 text-text-tertiary\" />\n                </button>\n              )}\n            </div>\n          )}\n        </div>\n        <button\n          type=\"button\"\n          onClick={() => setBookmarksDrawerOpen(true)}\n          className=\"shrink-0 p-1 rounded transition-colors text-text-tertiary hover:text-text-secondary hover:bg-bg-elevated\"\n          title={tr(\n            'vibecontrols.agentManager.chatPane.bookmarksTooltip',\n            'View bookmarked messages'\n          )}\n          aria-label={tr('vibecontrols.agentManager.chatPane.bookmarksLabel', 'Bookmarks')}\n          data-testid=\"agent-manager-bookmarks-trigger\"\n        >\n          <Bookmark className=\"w-3.5 h-3.5\" />\n        </button>\n        <button\n          type=\"button\"\n          onClick={() => setInstallModalOpen(true)}\n          className=\"shrink-0 inline-flex items-center gap-1.5 rounded-md border border-border-default bg-bg-elevated px-2 py-1 text-xs font-medium text-text-primary transition-colors hover:bg-bg-sunken hover:border-action-primary-bg/40\"\n          title={tr(\n            'vibecontrols.agentManager.chatPane.manageProvidersTooltip',\n            'Install or remove AI providers (Claude, Codex, Gemini, OpenCode)'\n          )}\n          aria-label={tr(\n            'vibecontrols.agentManager.chatPane.manageProviders',\n            'Manage AI providers'\n          )}\n          data-testid=\"agent-manager-manage-providers\"\n        >\n          <PackagePlus className=\"w-3.5 h-3.5\" />\n          <span className=\"hidden sm:inline\">\n            {tr('vibecontrols.agentManager.chatPane.manageProviders', 'Manage AI providers')}\n          </span>\n        </button>\n      </div>\n\n      {/* Message list */}\n      {loadingLogs ? (\n        <div className=\"flex-1 flex items-center justify-center\">\n          <p className=\"text-sm text-text-secondary\">\n            {tr(\n              'vibecontrols.agentManager.chatPane.loadingConversation',\n              'Loading conversation...'\n            )}\n          </p>\n        </div>\n      ) : (\n        <AgentManagerMessageList\n          messages={messages}\n          isStreaming={isStreaming}\n          onCancelStream={cancelStream}\n          searchQuery={searchQuery}\n          bookmarkedIds={bookmarkedIds}\n          onToggleBookmark={handleToggleBookmark}\n          flashMessageId={flashMessageId}\n        />\n      )}\n\n      {/* Rich input area with controls */}\n      <AgentManagerInputArea\n        agentId={agentId}\n        sessionId={sessionId}\n        onSend={(text) => void sendMessage(text)}\n        onCancel={cancelStream}\n        agentTunnelUrl={activeAgent?.tunnelUrl ?? undefined}\n        agentApiKey={activeAgent?.agentApiKey ?? undefined}\n      />\n\n      {/* Per-session bookmarks drawer */}\n      <AgentManagerBookmarksDrawer\n        open={bookmarksDrawerOpen}\n        onClose={() => setBookmarksDrawerOpen(false)}\n        sessionId={sessionId}\n        messages={messages}\n        onJump={jumpToMessage}\n      />\n\n      {/* Header-triggered provider install/remove. Sits below the chat\n          tree so it can render full-screen without disturbing layout. */}\n      <PluginInstallModal\n        open={installModalOpen}\n        agentId={agentId}\n        onClose={() => setInstallModalOpen(false)}\n      />\n\n      {/* SDK auth prompt: opens when the streaming hook detects a missing\n          ANTHROPIC_API_KEY / ANTHROPIC_AUTH_TOKEN, so the user can save the\n          credential inline instead of being told to go look elsewhere.\n          The session's currently-selected SDK is forwarded so the picker\n          can preselect the right provider. */}\n      <SdkAuthPromptModal\n        agentId={agentId}\n        agentRef={agentRef}\n        initialProviderId={sessionState?.sdk ?? undefined}\n      />\n    </div>\n  );\n};\n\ninterface SdkAuthPromptModalProps {\n  agentId: string;\n  agentRef: { id: string; profile: string };\n  initialProviderId?: string;\n}\n\nconst SdkAuthPromptModal: FC<SdkAuthPromptModalProps> = ({\n  agentId,\n  agentRef,\n  initialProviderId,\n}) => {\n  const sdkAuthPrompt = useAgentManagerStore((s) => s.sdkAuthPrompt);\n  const setSdkAuthPrompt = useAgentManagerStore((s) => s.setSdkAuthPrompt);\n  const tr = useTr();\n\n  if (!sdkAuthPrompt || sdkAuthPrompt.agentId !== agentId) return null;\n\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4\">\n      <div\n        className=\"absolute inset-0 bg-bg-overlay\"\n        onClick={() => setSdkAuthPrompt(null)}\n        aria-hidden\n      />\n      {/* Constrain height to the viewport and let the inner body scroll so the\n          modal never escapes the screen no matter how many providers/fields\n          render inside AIProviderCredentialsCard. The header stays sticky so\n          the close button is always reachable. */}\n      <div className=\"relative w-full max-w-xl max-h-[85vh] flex flex-col rounded-lg border border-border-default bg-bg-surface shadow-xl overflow-hidden\">\n        <div className=\"flex items-center justify-between px-4 py-3 border-b border-border-default bg-bg-surface flex-shrink-0\">\n          <h3 className=\"text-base font-semibold text-text-primary truncate pr-2\">\n            {tr('vibecontrols.ai.sdkAuth.title', 'Configure AI provider credentials')}\n          </h3>\n          <button\n            type=\"button\"\n            onClick={() => setSdkAuthPrompt(null)}\n            className=\"p-1 rounded hover:bg-bg-sunken transition-colors flex-shrink-0\"\n            aria-label={tr('vibecontrols.common.close', 'Close')}\n          >\n            <X className=\"w-5 h-5 text-text-secondary\" />\n          </button>\n        </div>\n        <div className=\"flex-1 min-h-0 overflow-y-auto px-4 py-3 space-y-3\">\n          <p className=\"text-sm text-text-secondary\">\n            {tr(\n              'vibecontrols.ai.sdkAuth.body',\n              'The agent does not have a credential configured for this provider. Pick a provider and save one to continue the conversation.'\n            )}\n          </p>\n          <AIProviderCredentialsCard agent={agentRef} initialProviderId={initialProviderId} />\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/analytics/index.js

@@ -1,8 +1,8 @@
+import "./AnalyticsBreakdownChart.js";
+import "./AnalyticsTimeSeriesChart.js";
 import "./types.js";
 import "./AnalyticsFilterBar.js";
 import "./AnalyticsKpiGrid.js";
-import "./AnalyticsTimeSeriesChart.js";
-import "./AnalyticsBreakdownChart.js";
 import "./AnalyticsBreakdownTable.js";
 import "./AnalyticsEntityTabs.js";
 import "./SandboxAnalyticsSection.js";

package/dist/components/gitops/CIDurationChart.js

@@ -1,9 +1,9 @@
 import { useTr as e } from "../../shared/hooks/useTr.js";
-import { formatDuration as t } from "../../utils/relativeTime.js";
-import { Tooltip as n } from "../../node_modules/recharts/es6/component/Tooltip.js";
-import { ResponsiveContainer as r } from "../../node_modules/recharts/es6/component/ResponsiveContainer.js";
-import { Area as i } from "../../node_modules/recharts/es6/cartesian/Area.js";
-import { AreaChart as a } from "../../node_modules/recharts/es6/chart/AreaChart.js";
+import { Tooltip as t } from "../../node_modules/recharts/es6/component/Tooltip.js";
+import { ResponsiveContainer as n } from "../../node_modules/recharts/es6/component/ResponsiveContainer.js";
+import { Area as r } from "../../node_modules/recharts/es6/cartesian/Area.js";
+import { AreaChart as i } from "../../node_modules/recharts/es6/chart/AreaChart.js";
+import { formatDuration as a } from "../../utils/relativeTime.js";
 import { useMemo as o } from "react";
 import { Timer as s } from "lucide-react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
@@ -35,7 +35,7 @@ var u = "var(--color-text-link)", d = ({ averageDuration: d }) => {
 				className: "mb-3",
 				children: [/* @__PURE__ */ c("p", {
 					className: "text-3xl font-bold text-text-primary",
-					children: t(d)
+					children: a(d)
 				}), /* @__PURE__ */ c("p", {
 					className: "text-xs text-text-secondary mt-0.5",
 					children: f("vibecontrols.gitops.ciTab.perPipelineRun", "per pipeline run")
@@ -43,10 +43,10 @@ var u = "var(--color-text-link)", d = ({ averageDuration: d }) => {
 			}),
 			/* @__PURE__ */ c("div", {
 				className: "h-16",
-				children: /* @__PURE__ */ c(r, {
+				children: /* @__PURE__ */ c(n, {
 					width: "100%",
 					height: "100%",
-					children: /* @__PURE__ */ l(a, {
+					children: /* @__PURE__ */ l(i, {
 						data: p,
 						margin: {
 							top: 0,
@@ -71,17 +71,17 @@ var u = "var(--color-text-link)", d = ({ averageDuration: d }) => {
 									stopOpacity: 0
 								})]
 							}) }),
-							/* @__PURE__ */ c(n, {
+							/* @__PURE__ */ c(t, {
 								contentStyle: {
 									background: "var(--color-bg-surface)",
 									border: "1px solid var(--color-border-default)",
 									borderRadius: "6px",
 									fontSize: "11px"
 								},
-								formatter: (e) => [t(Math.round(e)), "Duration"],
+								formatter: (e) => [a(Math.round(e)), "Duration"],
 								labelFormatter: () => ""
 							}),
-							/* @__PURE__ */ c(i, {
+							/* @__PURE__ */ c(r, {
 								type: "monotone",
 								dataKey: "v",
 								stroke: u,

package/dist/components/shared/PageSkeleton.js

@@ -83,6 +83,6 @@ function a({ header: a, variant: o = "rows", count: s = 6 }) {
 	});
 }
 //#endregion
-export { a as PageSkeleton };
+export { a as PageSkeleton, n as SkeletonLine };
 
 //# sourceMappingURL=PageSkeleton.js.map

package/dist/pages/AgentsPage.js

@@ -1,4 +1,4 @@
-import { useAddAgentFromTunnelMutation as e, useAgentHeartbeatMutation as t, useCreateAgentMutation as n, useCreateTargetMutation as r, useDeactivateAgentMutation as i, useDeleteAgentMutation as ee, useListAgentsQuery as te, useStartVibecontrolsAgentMutation as ne, useStopVibecontrolsAgentMutation as re, useUpdateAgentMutation as ie, useVibecontrolsAgentHealthProbeStreamSubscription as ae, useVibecontrolsAgentHealthProbesQuery as oe } from "../generated/wspace-operations.js";
+import { useAddAgentFromTunnelMutation as e, useAgentHeartbeatMutation as t, useCreateAgentMutation as n, useCreateTargetMutation as r, useDeactivateAgentMutation as i, useDeleteAgentMutation as ee, useListAgentsQuery as te, useStartVibecontrolsAgentMutation as ne, useStopVibecontrolsAgentMutation as re, useUpdateAgentMutation as ie, useVibecontrolsAgentHealthProbeStreamSubscription as ae, useVibecontrolsAgentHealthProbesLazyQuery as oe } from "../generated/wspace-operations.js";
 import { useVibeControls as se, useVibeNavigate as ce } from "../providers/VibeControlsProvider.js";
 import { useVibeControlsStore as a } from "../store/vibeControlsStore.js";
 import le from "../hooks/useCachedInitialData.js";
@@ -122,7 +122,7 @@ function y() {
 		At,
 		wt,
 		b
-	]), { data: Mt, loading: G, error: K, refetch: q } = te({
+	]), { data: Mt, loading: G, error: Nt, refetch: K } = te({
 		variables: {
 			filter: {
 				isActive: w === "ACTIVE" ? !0 : w === "OFFLINE" ? !1 : void 0,
@@ -132,20 +132,18 @@ function y() {
 		},
 		fetchPolicy: "cache-first",
 		skip: !b
-	}), J = oe({
-		fetchPolicy: "cache-and-network",
-		nextFetchPolicy: "cache-first",
-		notifyOnNetworkStatusChange: !0,
-		skip: !b
-	}), { data: Y } = ae({ skip: !b }), Nt = J.data === void 0 && Y === void 0, X = c(() => {
-		let e = /* @__PURE__ */ new Map(), t = Y?.vibecontrolsAgentHealthProbeStream ?? J.data?.vibecontrolsAgentHealthProbes ?? [];
+	}), [Pt, q] = oe({
+		fetchPolicy: "network-only",
+		notifyOnNetworkStatusChange: !0
+	}), { data: J } = ae({ skip: !b }), Ft = q.data === void 0 && J === void 0, Y = c(() => {
+		let e = /* @__PURE__ */ new Map(), t = J?.vibecontrolsAgentHealthProbeStream ?? q.data?.vibecontrolsAgentHealthProbes ?? [];
 		for (let n of t) e.set(n.agentId, {
 			agentId: n.agentId,
 			healthy: n.healthy,
 			errorMessage: n.errorMessage
 		});
 		return e;
-	}, [J.data, Y]), Z = c(() => (Mt?.vibecontrolsAgents ?? []).map((e) => ({
+	}, [q.data, J]), X = c(() => (Mt?.vibecontrolsAgents ?? []).map((e) => ({
 		id: e.id,
 		workspaceId: e.workspaceId,
 		name: e.name,
@@ -158,8 +156,8 @@ function y() {
 			id: e.id,
 			isActive: e.isActive,
 			metadata: e.metadata
-		}, X, { probesLoading: Nt }),
-		healthError: X.get(e.id)?.errorMessage ?? (e.lastGatewayAuthPushStatus === "failed" ? e.lastGatewayAuthPushError ?? "Gateway-auth push failed" : null),
+		}, Y, { probesLoading: Ft }),
+		healthError: Y.get(e.id)?.errorMessage ?? (e.lastGatewayAuthPushStatus === "failed" ? e.lastGatewayAuthPushError ?? "Gateway-auth push failed" : null),
 		lastHeartbeat: e.lastHeartbeat || null,
 		tunnelUrl: e.tunnelUrl ?? null,
 		tunnelStatus: e.tunnelStatus ?? null,
@@ -184,8 +182,8 @@ function y() {
 		}))
 	})), [
 		Mt?.vibecontrolsAgents,
-		X,
-		Nt,
+		Y,
+		Ft,
 		at
 	]);
 	s(() => {
@@ -194,46 +192,46 @@ function y() {
 		let t = Date.now(), n = Infinity;
 		for (let r of e) {
 			let e = j[r];
-			e !== void 0 && (X.get(r)?.healthy === !0 && t >= e ? M(r) : e < n && (n = e));
+			e !== void 0 && (Y.get(r)?.healthy === !0 && t >= e ? M(r) : e < n && (n = e));
 		}
 		if (n === Infinity) return;
 		let r = Math.max(0, n - t) + 50, i = setTimeout(() => {
 			let e = a.getState().connectingAgents;
 			for (let t of Object.keys(e)) {
 				let n = e[t];
-				n !== void 0 && X.get(t)?.healthy === !0 && Date.now() >= n && M(t);
+				n !== void 0 && Y.get(t)?.healthy === !0 && Date.now() >= n && M(t);
 			}
 		}, r);
 		return () => clearTimeout(i);
 	}, [
-		X,
+		Y,
 		j,
 		M
 	]);
-	let Q = c(() => Z.filter((e) => {
+	let Z = c(() => X.filter((e) => {
 		if (C) {
 			let t = C.toLowerCase();
 			if (!(e.name.toLowerCase().includes(t) || e.hostname?.toLowerCase().includes(t) || e.id.toLowerCase().includes(t))) return !1;
 		}
 		return !(E !== "all" && !(e.tagAssignments ?? []).some((e) => e.tagId === E));
 	}), [
-		Z,
+		X,
 		C,
 		E
 	]);
 	s(() => () => {
 		H.current && clearTimeout(H.current);
 	}, []);
-	let Pt = (e) => {
+	let It = (e) => {
 		x(`/agents/${e.id}`), y?.({
 			id: e.id,
 			name: e.name,
 			type: e.platform || "unknown",
 			status: e.status || (e.isActive ? "ACTIVE" : "OFFLINE")
 		});
-	}, $ = () => {
+	}, Q = () => {
 		O(!0);
-	}, Ft = async (e) => {
+	}, Lt = async (e) => {
 		try {
 			tt(!0);
 			let t = e.tunnelUrl?.trim(), n = e.agentApiKey?.trim();
@@ -271,7 +269,7 @@ function y() {
 		} finally {
 			tt(!1);
 		}
-	}, It = async (e) => {
+	}, Rt = async (e) => {
 		try {
 			let t = (await bt({ variables: { agentId: e.id } })).data?.startVibecontrolsAgent;
 			if (!t?.success) throw Error(t?.error || "Failed to start agent");
@@ -279,7 +277,7 @@ function y() {
 		} catch (e) {
 			console.error("Failed to start agent:", e), W(e instanceof Error ? e.message : "Failed to start agent");
 		}
-	}, Lt = async (e) => {
+	}, zt = async (e) => {
 		try {
 			let t = (await xt({ variables: { agentId: e.id } })).data?.stopVibecontrolsAgent;
 			if (!t?.success) throw Error(t?.error || "Failed to stop agent");
@@ -287,9 +285,9 @@ function y() {
 		} catch (e) {
 			console.error("Failed to stop agent:", e), W(e instanceof Error ? e.message : "Failed to stop agent");
 		}
-	}, Rt = (e) => {
+	}, $ = (e) => {
 		P(e);
-	}, zt = async () => {
+	}, Bt = async () => {
 		if (!N) return;
 		let e = N;
 		I(!0);
@@ -299,7 +297,7 @@ function y() {
 				refetchQueries: []
 			});
 		} catch (e) {
-			console.error("Failed to deactivate agent:", e), W(e instanceof Error ? e.message : "Failed to disconnect agent"), I(!1), P(null), await q();
+			console.error("Failed to deactivate agent:", e), W(e instanceof Error ? e.message : "Failed to disconnect agent"), I(!1), P(null), await K();
 			return;
 		}
 		try {
@@ -317,12 +315,12 @@ function y() {
 		} catch (e) {
 			console.error("Failed to clear tunnel fields:", e), W("Agent marked offline, but failed to clear connection fields — clear them manually in Settings.");
 		}
-		I(!1), P(null), await q();
-	}, Bt = (e) => {
-		x(`/agents/${e.id}`);
+		I(!1), P(null), await K();
 	}, Vt = (e) => {
+		x(`/agents/${e.id}`);
+	}, Ht = (e) => {
 		A(e);
-	}, Ht = async () => {
+	}, Ut = async () => {
 		if (!k) return;
 		let e = k.id, t = st.current?.value?.trim() || "", n = ct.current?.value?.trim() || "";
 		try {
@@ -342,16 +340,16 @@ function y() {
 		} finally {
 			rt(!1);
 		}
-	}, Ut = o((e) => {
+	}, Wt = o((e) => {
 		R((t) => {
 			let n = new Set(t);
 			return n.has(e) ? n.delete(e) : n.add(e), n;
 		});
-	}, []), Wt = o(() => {
-		R(new Set(Q.map((e) => e.id)));
-	}, [Q]), Gt = o(() => {
+	}, []), Gt = o(() => {
+		R(new Set(Z.map((e) => e.id)));
+	}, [Z]), Kt = o(() => {
 		R(/* @__PURE__ */ new Set());
-	}, []), Kt = Q.length > 0 && L.size === Q.length, qt = L.size > 0, Jt = o(async () => {
+	}, []), qt = Z.length > 0 && L.size === Z.length, Jt = L.size > 0, Yt = o(async () => {
 		if (L.size !== 0 && window.confirm(S("agentsPage.bulkDeleteConfirm", "Are you sure you want to remove {{count}} agent(s)? This cannot be undone.", { count: L.size }))) {
 			ut(!0);
 			try {
@@ -368,10 +366,10 @@ function y() {
 		kt,
 		W,
 		U
-	]), Yt = {
-		total: Z.length,
-		active: Z.filter((e) => e.isActive).length,
-		offline: Z.filter((e) => !e.isActive).length
+	]), Xt = {
+		total: X.length,
+		active: X.filter((e) => e.isActive).length,
+		offline: X.filter((e) => !e.isActive).length
 	};
 	return He ? /* @__PURE__ */ m(v, {
 		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
@@ -382,12 +380,12 @@ function y() {
 			title: S("agentsPage.accessDeniedTitle", "Access Denied"),
 			description: S("agentsPage.accessDeniedDescription", "You don't have permission to view agents. Contact your workspace administrator for access.")
 		})
-	}) : K && Z.length === 0 ? /* @__PURE__ */ m(v, {
+	}) : Nt && X.length === 0 ? /* @__PURE__ */ m(v, {
 		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
 		children: /* @__PURE__ */ m(fe, {
 			title: S("agentsPage.failedLoad", "Failed to load agents"),
-			message: K.message,
-			onRetry: () => q()
+			message: Nt.message,
+			onRetry: () => K()
 		})
 	}) : /* @__PURE__ */ h(v, {
 		className: "space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen",
@@ -403,40 +401,40 @@ function y() {
 			/* @__PURE__ */ m(ue, {
 				title: S("agentsPage.title", "Agents"),
 				description: S("agentsPage.descriptionOnline", "{{active}} of {{total}} agents online", {
-					active: Yt.active,
-					total: Yt.total
+					active: Xt.active,
+					total: Xt.total
 				}),
 				actions: /* @__PURE__ */ h("div", {
 					className: "flex w-full flex-col items-end gap-2 sm:w-auto sm:flex-row sm:items-center",
 					children: [/* @__PURE__ */ m("button", {
 						onClick: () => {
-							q(), J.refetch();
+							K(), Pt();
 						},
-						disabled: G || J.loading,
+						disabled: G || q.loading,
 						className: "flex items-center justify-center gap-2 px-3 py-2 text-text-secondary hover:bg-bg-sunken rounded-md transition-colors disabled:opacity-50",
 						title: S("agentsPage.refreshTitle", "Refresh agents"),
-						children: /* @__PURE__ */ m(Pe, { className: `w-4 h-4 ${G || J.loading ? "animate-spin" : ""}` })
+						children: /* @__PURE__ */ m(Pe, { className: `w-4 h-4 ${G || q.loading ? "animate-spin" : ""}` })
 					}), Dt ? /* @__PURE__ */ m(Be, {
 						permission: Ce.AGENT_CREATE,
 						deniedBehavior: "disable",
 						deniedTooltip: S("agentsPage.deniedCreateTooltip", "You don't have permission to create agents"),
 						children: /* @__PURE__ */ h("button", {
-							onClick: $,
+							onClick: Q,
 							className: "flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
 							children: [/* @__PURE__ */ m(d, { className: "w-4 h-4" }), S("agentsPage.addAgent", "Add Agent")]
 						})
 					}) : /* @__PURE__ */ h("button", {
-						onClick: $,
+						onClick: Q,
 						className: "flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors",
 						children: [/* @__PURE__ */ m(d, { className: "w-4 h-4" }), S("agentsPage.addAgent", "Add Agent")]
 					})]
 				})
 			}),
-			Z.length === 0 && !G && /* @__PURE__ */ m(be, {
+			X.length === 0 && !G && /* @__PURE__ */ m(be, {
 				variant: "full",
 				dismissKey: "vibecontrols-agents-setup-banner"
 			}),
-			Z.length > 0 && /* @__PURE__ */ m(be, {
+			X.length > 0 && /* @__PURE__ */ m(be, {
 				variant: "compact",
 				dismissKey: "vibecontrols-agents-compact-banner"
 			}),
@@ -490,18 +488,18 @@ function y() {
 					]
 				})]
 			}),
-			Q.length > 0 && /* @__PURE__ */ m("div", {
+			Z.length > 0 && /* @__PURE__ */ m("div", {
 				className: "flex items-center gap-2 flex-wrap",
 				children: /* @__PURE__ */ m("div", {
 					className: "ml-auto flex items-center gap-2",
 					children: /* @__PURE__ */ h("button", {
-						onClick: Kt ? Gt : Wt,
+						onClick: qt ? Kt : Gt,
 						className: "flex items-center gap-1.5 px-3 py-1.5 text-xs text-text-secondary hover:text-text-primary transition-colors",
-						children: [/* @__PURE__ */ m(je, { className: "w-3.5 h-3.5" }), Kt ? S("agentsPage.deselectAll", "Deselect All") : S("agentsPage.selectAll", "Select All")]
+						children: [/* @__PURE__ */ m(je, { className: "w-3.5 h-3.5" }), qt ? S("agentsPage.deselectAll", "Deselect All") : S("agentsPage.selectAll", "Select All")]
 					})
 				})
 			}),
-			qt && /* @__PURE__ */ h("div", {
+			Jt && /* @__PURE__ */ h("div", {
 				className: "flex flex-col sm:flex-row items-start sm:items-center gap-3 px-4 py-2 bg-action-primary-bg/10 border border-action-primary-bg/20 rounded-lg",
 				children: [/* @__PURE__ */ m("span", {
 					className: "text-sm font-medium text-text-primary",
@@ -509,7 +507,7 @@ function y() {
 				}), /* @__PURE__ */ h("div", {
 					className: "flex items-center gap-1.5 sm:ml-auto",
 					children: [/* @__PURE__ */ h("button", {
-						onClick: Jt,
+						onClick: Yt,
 						disabled: lt,
 						className: "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-status-error-text bg-status-error-bg border border-status-error-text/20 rounded-md hover:bg-status-error-bg/80 transition-colors disabled:opacity-50",
 						children: [
@@ -518,7 +516,7 @@ function y() {
 							S("agentsPage.remove", "Remove")
 						]
 					}), /* @__PURE__ */ h("button", {
-						onClick: Gt,
+						onClick: Kt,
 						className: "flex items-center gap-1.5 px-3 py-1.5 text-xs text-text-secondary hover:text-text-primary transition-colors",
 						children: [
 							/* @__PURE__ */ m(Ie, { className: "w-3 h-3" }),
@@ -531,31 +529,31 @@ function y() {
 			C || w !== "all" || T !== "all" ? /* @__PURE__ */ h("p", {
 				className: "text-sm text-text-secondary",
 				children: [S("agentsPage.showingResults", "Showing {{filtered}} of {{total}} agents", {
-					filtered: Q.length,
-					total: Z.length
+					filtered: Z.length,
+					total: X.length
 				}), G && /* @__PURE__ */ m("span", {
 					className: "ml-2 text-text-muted",
 					children: S("agentsPage.refreshing", "(refreshing...)")
 				})]
 			}) : null,
-			G && Z.length === 0 ? /* @__PURE__ */ m(we, {
+			G && X.length === 0 ? /* @__PURE__ */ m(we, {
 				variant: "rows",
 				count: 6
-			}) : Q.length > 0 ? /* @__PURE__ */ m(f, {
+			}) : Z.length > 0 ? /* @__PURE__ */ m(f, {
 				mode: "wait",
 				children: D === "grid" ? /* @__PURE__ */ m(_, {
 					stagger: .04,
 					className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4",
-					children: Q.map((e) => /* @__PURE__ */ m(g, { children: /* @__PURE__ */ m(Te, {
+					children: Z.map((e) => /* @__PURE__ */ m(g, { children: /* @__PURE__ */ m(Te, {
 						agent: e,
-						onSelect: Pt,
-						onStart: It,
-						onStop: Lt,
-						onDisconnect: Rt,
-						onConfigure: Bt,
-						onEditTunnelUrl: Vt,
+						onSelect: It,
+						onStart: Rt,
+						onStop: zt,
+						onDisconnect: $,
+						onConfigure: Vt,
+						onEditTunnelUrl: Ht,
 						selected: L.has(e.id),
-						onToggleSelect: () => Ut(e.id),
+						onToggleSelect: () => Wt(e.id),
 						healthErrorMessage: e.healthError ?? null
 					}) }, e.id))
 				}, "grid-view") : /* @__PURE__ */ m(_, {
@@ -563,12 +561,12 @@ function y() {
 					children: /* @__PURE__ */ m(g, {
 						variant: "fadeRight",
 						children: /* @__PURE__ */ m(Ee, {
-							agents: Q,
-							onSelect: Pt,
-							onStart: It,
-							onStop: Lt,
-							onDisconnect: Rt,
-							onSettings: Bt
+							agents: Z,
+							onSelect: It,
+							onStart: Rt,
+							onStop: zt,
+							onDisconnect: $,
+							onSettings: Vt
 						})
 					})
 				}, "list-view")
@@ -580,7 +578,7 @@ function y() {
 					className: "flex flex-wrap items-center gap-3",
 					children: [
 						/* @__PURE__ */ h("button", {
-							onClick: $,
+							onClick: Q,
 							className: "flex items-center gap-2 px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors",
 							children: [/* @__PURE__ */ m(d, { className: "w-4 h-4" }), S("agentsPage.addAgent", "Add Agent")]
 						}),
@@ -594,7 +592,7 @@ function y() {
 				}) : void 0
 			}),
 			$e && /* @__PURE__ */ m(De, {
-				onSubmit: Ft,
+				onSubmit: Lt,
 				onCancel: () => O(!1),
 				isLoading: et,
 				onNavigate: (e) => {
@@ -661,7 +659,7 @@ function y() {
 								className: "px-4 py-2 text-sm text-text-secondary hover:bg-bg-sunken rounded-md transition-colors disabled:opacity-50",
 								children: "Cancel"
 							}), /* @__PURE__ */ m("button", {
-								onClick: zt,
+								onClick: Bt,
 								disabled: F,
 								className: "px-4 py-2 text-sm bg-action-danger-bg text-action-danger-text rounded-md hover:bg-action-danger-bg-hover transition-colors disabled:opacity-50",
 								children: F ? "Disconnecting..." : "Disconnect"
@@ -742,7 +740,7 @@ function y() {
 								className: "px-4 py-2 text-sm text-text-secondary hover:bg-bg-sunken rounded-md transition-colors",
 								children: S("agentsPage.cancel", "Cancel")
 							}), /* @__PURE__ */ m("button", {
-								onClick: Ht,
+								onClick: Ut,
 								disabled: nt,
 								className: "px-4 py-2 text-sm bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors disabled:opacity-50",
 								children: nt ? S("agentsPage.saving", "Saving...") : S("agentsPage.save", "Save")