npm - @burdenoff/microfe-vibecontrols - Versions diffs - 2026.511.1 → 2026.513.1 - Mend

@burdenoff/microfe-vibecontrols 2026.511.1 → 2026.513.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1025) hide show

package/dist/pages/ai/AISessionDetailPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AISessionDetailPage.js","names":[],"sources":["../../../src/pages/ai/AISessionDetailPage.tsx"],"sourcesContent":["import { useState, useEffect, useCallback, useMemo } from 'react';\nimport { useParams } from 'react-router-dom';\nimport {\n MessageSquare,\n ScrollText,\n BarChart3,\n Settings,\n Send,\n ArrowLeft,\n XCircle,\n RefreshCw,\n} from 'lucide-react';\nimport { MotionPage } from '@burdenoff/fe-libs/shared/motion';\nimport {\n PageHeader,\n Card,\n LoadingState,\n ErrorState,\n EmptyState,\n StatCard,\n RequireAgentReachable,\n} from '@/components/shared';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport { useQueryBackedTab } from '@/hooks/useQueryBackedTab';\nimport { useCachedInitialData } from '@/hooks/useCachedInitialData';\nimport type { AISessionLog, AISessionStats } from '@/services/aiApi';\nimport { useTr } from '../../shared/hooks/useTr';\nimport {\n sendPromptToSession,\n fetchSessionLogs,\n fetchSessionStats,\n updateSessionConfig,\n terminateSession,\n} from '@/services/aiApi';\nimport { isSessionNotFoundError } from '@/utils/aiSessionNotFound';\n\ntype SessionTab = 'chat' \| 'logs' \| 'stats' \| 'config';\nconst SESSION_TABS: readonly SessionTab[] = ['chat', 'logs', 'stats', 'config'];\n\nconst sessionTabs: { id: SessionTab; label: string; icon: typeof MessageSquare }[] = [\n { id: 'chat', label: 'Chat', icon: MessageSquare },\n { id: 'logs', label: 'Logs', icon: ScrollText },\n { id: 'stats', label: 'Stats', icon: BarChart3 },\n { id: 'config', label: 'Config', icon: Settings },\n];\n\nconst logTypeColors: Record<string, string> = {\n info: 'bg-action-primary-bg/10 text-action-primary-bg',\n warn: 'bg-status-warning-bg text-status-warning-text',\n error: 'bg-status-error-bg text-status-error-text',\n debug: 'bg-bg-sunken text-text-secondary',\n prompt: 'bg-status-success-bg text-status-success-text',\n response: 'bg-action-primary-bg/20 text-action-primary-bg',\n};\n\ninterface ChatMessage {\n role: 'user' \| 'assistant';\n content: string;\n tokens?: { input: number; output: number };\n timestamp: string;\n}\n\n/*\n AI session detail page with Chat, Logs, Stats, and Config tabs.\n /\nexport function AISessionDetailPage() {\n const tr = useTr();\n const { sessionId } = useParams<{ sessionId: string }>();\n const handleNavigate = useVibeNavigate();\n\n const { agents, loading: agentsLoading } = useCachedInitialData();\n const activeAgent = useMemo(\n () => agents.find((agent) => agent.isActive && agent.tunnelUrl && agent.agentApiKey) ?? null,\n [agents]\n );\n const agentId = activeAgent?.id ?? '';\n const hasAgent = !!agentId;\n\n const [activeTab, setActiveTab] = useQueryBackedTab<SessionTab>(SESSION_TABS, 'chat');\n\n // ── Chat state ──────────────────────────────────────────────────────\n const [messages, setMessages] = useState<ChatMessage[]>([]);\n const [promptInput, setPromptInput] = useState('');\n const [sending, setSending] = useState(false);\n\n const handleSendPrompt = async () => {\n if (!promptInput.trim() \|\| !sessionId \|\| !hasAgent) return;\n const userMessage: ChatMessage = {\n role: 'user',\n content: promptInput,\n timestamp: new Date().toISOString(),\n };\n setMessages((prev) => [...prev, userMessage]);\n setPromptInput('');\n setSending(true);\n try {\n const result = await sendPromptToSession(agentId, sessionId, userMessage.content);\n const content =\n ((result as Record<string, unknown>).content as string) \|\|\n ((result as Record<string, unknown>).response as string) \|\|\n JSON.stringify(result);\n const inputTokens = (result as Record<string, unknown>).inputTokens as number \| undefined;\n const outputTokens = (result as Record<string, unknown>).outputTokens as number \| undefined;\n const assistantMessage: ChatMessage = {\n role: 'assistant',\n content,\n tokens:\n inputTokens !== undefined ? { input: inputTokens, output: outputTokens ?? 0 } : undefined,\n timestamp: new Date().toISOString(),\n };\n setMessages((prev) => [...prev, assistantMessage]);\n } catch (err) {\n const errorMessage: ChatMessage = {\n role: 'assistant',\n content: `Error: ${err instanceof Error ? err.message : 'Failed to get response'}`,\n timestamp: new Date().toISOString(),\n };\n setMessages((prev) => [...prev, errorMessage]);\n } finally {\n setSending(false);\n }\n };\n\n // ── Logs state ──────────────────────────────────────────────────────\n const [logs, setLogs] = useState<AISessionLog[]>([]);\n const [logsLoading, setLogsLoading] = useState(false);\n const [logsError, setLogsError] = useState<string \| null>(null);\n const [logTypeFilter, setLogTypeFilter] = useState('all');\n\n const loadLogs = useCallback(async () => {\n if (!sessionId \|\| !hasAgent) return;\n setLogsLoading(true);\n setLogsError(null);\n try {\n const params: Record<string, unknown> = {};\n if (logTypeFilter !== 'all') params.type = logTypeFilter;\n const result = await fetchSessionLogs(agentId, sessionId, params);\n setLogs(result);\n } catch (err) {\n // Pre-first-message: agent has no record of this session yet —\n // render an empty list, not an error.\n if (isSessionNotFoundError(err)) {\n setLogs([]);\n } else {\n setLogsError(err instanceof Error ? err.message : 'Failed to load logs');\n }\n } finally {\n setLogsLoading(false);\n }\n }, [agentId, sessionId, logTypeFilter, hasAgent]);\n\n useEffect(() => {\n if (activeTab === 'logs') loadLogs();\n }, [activeTab, loadLogs]);\n\n // ── Stats state ─────────────────────────────────────────────────────\n const [stats, setStats] = useState<AISessionStats \| null>(null);\n const [statsLoading, setStatsLoading] = useState(false);\n const [statsError, setStatsError] = useState<string \| null>(null);\n\n const loadStats = useCallback(async () => {\n if (!sessionId \|\| !hasAgent) return;\n setStatsLoading(true);\n setStatsError(null);\n try {\n const result = await fetchSessionStats(agentId, sessionId);\n setStats(result);\n } catch (err) {\n if (isSessionNotFoundError(err)) {\n setStats(null);\n } else {\n setStatsError(err instanceof Error ? err.message : 'Failed to load stats');\n }\n } finally {\n setStatsLoading(false);\n }\n }, [agentId, sessionId, hasAgent]);\n\n useEffect(() => {\n if (activeTab === 'stats') loadStats();\n }, [activeTab, loadStats]);\n\n // ── Config state ────────────────────────────────────────────────────\n const [configJson, setConfigJson] = useState('{}');\n const [savingConfig, setSavingConfig] = useState(false);\n const [configSaved, setConfigSaved] = useState(false);\n const [terminating, setTerminating] = useState(false);\n\n const handleSaveConfig = async () => {\n if (!sessionId \|\| !hasAgent) return;\n setSavingConfig(true);\n try {\n const config = JSON.parse(configJson);\n await updateSessionConfig(agentId, sessionId, config);\n setConfigSaved(true);\n setTimeout(() => setConfigSaved(false), 3000);\n } catch (err) {\n console.error('Failed to save config:', err);\n } finally {\n setSavingConfig(false);\n }\n };\n\n const handleTerminate = async () => {\n if (!sessionId \|\| !hasAgent) return;\n if (!window.confirm('Are you sure you want to terminate this session? This cannot be undone.'))\n return;\n setTerminating(true);\n try {\n await terminateSession(agentId, sessionId);\n handleNavigate('/ai/sessions');\n } catch (err) {\n console.error('Failed to terminate session:', err);\n } finally {\n setTerminating(false);\n }\n };\n\n if (agentsLoading) {\n return (\n <MotionPage className=\"space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen\">\n <LoadingState message=\"Loading...\" />\n </MotionPage>\n );\n }\n\n if (!hasAgent) {\n return (\n <MotionPage className=\"space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen\">\n <EmptyState\n icon={<MessageSquare className=\"w-8 h-8 text-text-secondary\" />}\n title={tr('vibecontrols.pages.ai.noActiveAgent', 'No active agent')}\n description={tr(\n 'vibecontrols.pages.ai.noActiveAgentDescription',\n 'An active agent with a tunnel is required to view session details.'\n )}\n action={\n <button\n onClick={() => handleNavigate('/agents')}\n className=\"px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors text-sm\"\n >\n {tr('vibecontrols.pages.ai.goToAgents', 'Go to Agents')}\n </button>\n }\n />\n </MotionPage>\n );\n }\n\n return (\n <MotionPage className=\"space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen\">\n <PageHeader\n title={`Session ${sessionId?.substring(0, 8) ?? ''}...`}\n description={tr(\n 'vibecontrols.pages.ai.sessionDescription',\n 'AI session details and interaction'\n )}\n breadcrumb={[\n { label: 'AI', path: '#' },\n { label: 'Sessions', path: '#' },\n { label: sessionId?.substring(0, 8) ?? '' },\n ]}\n actions={\n <button\n onClick={() => handleNavigate('/ai/sessions')}\n className=\"flex items-center gap-2 px-3 py-2 text-text-secondary hover:bg-bg-sunken rounded-md transition-colors text-sm\"\n >\n <ArrowLeft className=\"w-4 h-4\" />\n {tr('vibecontrols.pages.ai.back', 'Back')}\n </button>\n }\n />\n\n {/ Tab Navigation /}\n <div className=\"-mx-4 border-b border-border-default px-4 sm:-mx-6 sm:px-6\">\n <nav className=\"flex gap-1 overflow-x-auto pb-1\" role=\"tablist\">\n {sessionTabs.map((tab) => {\n const Icon = tab.icon;\n const isActive = activeTab === tab.id;\n return (\n <button\n key={tab.id}\n role=\"tab\"\n aria-selected={isActive}\n onClick={() => setActiveTab(tab.id)}\n className={`flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-t-md border-b-2 px-2.5 py-2 text-xs font-medium transition-colors sm:px-3 sm:py-2.5 sm:text-sm ${\n isActive\n ? 'border-action-primary-bg text-action-primary-bg'\n : 'border-transparent text-text-secondary hover:text-text-primary hover:border-border-default'\n }`}\n >\n <Icon className=\"h-3.5 w-3.5 sm:h-4 sm:w-4\" />\n {tab.label}\n </button>\n );\n })}\n </nav>\n </div>\n\n {/ Tab Content /}\n <RequireAgentReachable agentId={agentId \|\| null}>\n {activeTab === 'chat' && (\n <div className=\"space-y-4\">\n {/ Messages /}\n <Card className=\"p-0\">\n <div className=\"divide-y divide-border-default min-h-[200px] max-h-[50vh] overflow-y-auto\">\n {messages.length === 0 ? (\n <div className=\"flex items-center justify-center h-48 text-sm text-text-secondary\">\n {tr(\n 'vibecontrols.pages.ai.sendPromptToStart',\n 'Send a prompt to start the conversation'\n )}\n </div>\n ) : (\n messages.map((msg, idx) => (\n <div\n key={idx}\n className={`px-4 py-3 ${msg.role === 'assistant' ? 'bg-bg-sunken/50' : ''}`}\n >\n <div className=\"mb-1 flex flex-wrap items-center gap-2\">\n <span className=\"text-xs font-semibold text-text-primary uppercase\">\n {msg.role}\n </span>\n <span className=\"text-xs text-text-muted\">\n {new Date(msg.timestamp).toLocaleTimeString()}\n </span>\n {msg.tokens && (\n <span className=\"text-xs text-text-muted sm:ml-auto\">\n {msg.tokens.input + msg.tokens.output} tokens\n </span>\n )}\n </div>\n <div className=\"text-sm text-text-primary whitespace-pre-wrap\">\n {msg.content}\n </div>\n </div>\n ))\n )}\n {sending && (\n <div className=\"px-4 py-3 bg-bg-sunken/50\">\n <div className=\"flex items-center gap-2\">\n <RefreshCw className=\"w-3.5 h-3.5 text-text-secondary animate-spin\" />\n <span className=\"text-sm text-text-secondary\">\n {tr('vibecontrols.pages.ai.thinking', 'Thinking...')}\n </span>\n </div>\n </div>\n )}\n </div>\n </Card>\n\n {/ Prompt Input */}\n <div className=\"flex flex-col gap-2 sm:flex-row\">\n <textarea\n value={promptInput}\n onChange={(e) => setPromptInput(e.target.value)}\n rows={3}\n className=\"min-h-[7rem] flex-1 rounded-md border border-border-default bg-bg-sunken px-3 py-2 text-sm font-mono text-text-primary resize-none focus:outline-none focus:border-border-strong\"\n placeholder=\"Type your prompt...\"\n onKeyDown={(e) => {\n if (e.key === 'Enter' && (e.metaKey \|\| e.ctrlKey)) {\n e.preventDefault();\n handleSendPrompt();\n }\n }}\n />\n <button\n onClick={handleSendPrompt}\n disabled={sending \|\| !promptInput.trim()}\n className=\"flex items-center justify-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm text-action-primary-text transition-colors hover:bg-action-primary-bg-hover disabled:opacity-50 sm:self-end\"\n >\n <Send className=\"w-4 h-4\" />\n {tr('vibecontrols.pages.ai.send', 'Send')}\n </button>\n </div>\n </div>\n )}\n\n {activeTab === 'logs' && (\n <div className=\"space-y-4\">\n <div className=\"flex flex-wrap items-center gap-2\">\n <select\n value={logTypeFilter}\n onChange={(e) => setLogTypeFilter(e.target.value)}\n className=\"px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary text-sm\"\n >\n <option value=\"all\">All Types</option>\n <option value=\"info\">Info</option>\n <option value=\"warn\">Warning</option>\n <option value=\"error\">Error</option>\n <option value=\"debug\">Debug</option>\n <option value=\"prompt\">Prompt</option>\n <option value=\"response\">Response</option>\n </select>\n <button\n onClick={loadLogs}\n disabled={logsLoading}\n className=\"p-2 hover:bg-bg-sunken rounded-md transition-colors\"\n >\n <RefreshCw\n className={`w-4 h-4 text-text-secondary ${logsLoading ? 'animate-spin' : ''}`}\n />\n </button>\n </div>\n\n {logsLoading ? (\n <LoadingState message=\"Loading logs...\" />\n ) : logsError ? (\n <ErrorState title=\"Failed to load logs\" message={logsError} onRetry={loadLogs} />\n ) : logs.length === 0 ? (\n <EmptyState\n icon={<ScrollText className=\"w-6 h-6 text-text-secondary\" />}\n title=\"No logs\"\n description=\"Session logs will appear here\"\n />\n ) : (\n <Card className=\"p-0\">\n <div className=\"divide-y divide-border-default max-h-[60vh] overflow-y-auto\">\n {logs.map((log) => (\n <div key={log.id} className=\"px-4 py-2 flex items-start gap-3 text-sm\">\n <span\n className={`px-1.5 py-0.5 text-xs rounded font-medium flex-shrink-0 mt-0.5 ${logTypeColors[log.type] ?? 'bg-bg-sunken text-text-secondary'}`}\n >\n {log.type}\n </span>\n <div className=\"flex-1 min-w-0\">\n <span className=\"text-text-primary\">{log.message}</span>\n </div>\n <span className=\"text-xs text-text-muted flex-shrink-0\">\n {new Date(log.timestamp).toLocaleTimeString()}\n </span>\n </div>\n ))}\n </div>\n </Card>\n )}\n </div>\n )}\n\n {activeTab === 'stats' && (\n <div className=\"space-y-4\">\n {statsLoading ? (\n <LoadingState message=\"Loading stats...\" />\n ) : statsError ? (\n <ErrorState title=\"Failed to load stats\" message={statsError} onRetry={loadStats} />\n ) : stats ? (\n <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4\">\n <StatCard title=\"Total Tokens\" value={stats.totalTokens.toLocaleString()} />\n <StatCard\n title=\"Input Tokens\"\n value={stats.inputTokens.toLocaleString()}\n variant=\"success\"\n />\n <StatCard\n title=\"Output Tokens\"\n value={stats.outputTokens.toLocaleString()}\n variant=\"warning\"\n />\n <StatCard title=\"Prompts\" value={stats.promptCount} />\n {stats.averageLatency !== undefined && (\n <StatCard title=\"Avg Latency\" value={`${stats.averageLatency.toFixed(0)}ms`} />\n )}\n </div>\n ) : (\n <EmptyState\n icon={<BarChart3 className=\"w-6 h-6 text-text-secondary\" />}\n title=\"No stats\"\n description=\"Stats will appear after the session processes prompts\"\n />\n )}\n </div>\n )}\n\n {activeTab === 'config' && (\n <div className=\"space-y-4\">\n <Card className=\"p-4\">\n <h3 className=\"font-semibold text-text-primary mb-3\">\n {tr('vibecontrols.pages.ai.sessionConfig', 'Session Configuration')}\n </h3>\n <textarea\n value={configJson}\n onChange={(e) => setConfigJson(e.target.value)}\n rows={10}\n className=\"w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary text-sm font-mono focus:outline-none focus:border-border-strong\"\n placeholder='{\"model\": \"claude-3\", \"temperature\": 0.7, ...}'\n />\n <div className=\"mt-4 flex flex-col gap-3 sm:flex-row sm:items-center\">\n <button\n onClick={handleSaveConfig}\n disabled={savingConfig}\n 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 text-sm\"\n >\n <Settings className=\"w-4 h-4\" />\n {savingConfig\n ? tr('vibecontrols.pages.ai.saving', 'Saving...')\n : tr('vibecontrols.pages.ai.saveConfig', 'Save Config')}\n </button>\n {configSaved && (\n <span className=\"text-sm text-status-success-text\">\n {tr('vibecontrols.pages.ai.savedSuccessfully', 'Saved successfully')}\n </span>\n )}\n </div>\n </Card>\n\n <Card className=\"p-4 border-status-error-text/20\">\n <h3 className=\"font-semibold text-status-error-text mb-2\">\n {tr('vibecontrols.pages.ai.dangerZone', 'Danger Zone')}\n </h3>\n <p className=\"text-sm text-text-secondary mb-3\">\n {tr(\n 'vibecontrols.pages.ai.terminateWarning',\n 'Terminating a session is permanent. All state will be lost.'\n )}\n </p>\n <button\n onClick={handleTerminate}\n disabled={terminating}\n className=\"flex items-center gap-2 px-4 py-2 bg-status-error-bg text-status-error-text border border-status-error-text/20 rounded-md hover:bg-status-error-bg/80 transition-colors disabled:opacity-50 text-sm\"\n >\n <XCircle className=\"w-4 h-4\" />\n {terminating\n ? tr('vibecontrols.pages.ai.terminating', 'Terminating...')\n : tr('vibecontrols.pages.ai.terminateSession', 'Terminate Session')}\n </button>\n </Card>\n </div>\n )}\n </RequireAgentReachable>\n </MotionPage>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"AISessionDetailPage.js","names":[],"sources":["../../../src/pages/ai/AISessionDetailPage.tsx"],"sourcesContent":["import { useState, useEffect, useCallback, useMemo } from 'react';\nimport { useParams } from 'react-router-dom';\nimport {\n MessageSquare,\n ScrollText,\n BarChart3,\n Settings,\n Send,\n ArrowLeft,\n XCircle,\n RefreshCw,\n} from 'lucide-react';\nimport { MotionPage } from '@burdenoff/fe-libs/shared/motion';\nimport {\n PageHeader,\n Card,\n LoadingState,\n ErrorState,\n EmptyState,\n StatCard,\n RequireAgentReachable,\n} from '@/components/shared';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport { useQueryBackedTab } from '@/hooks/useQueryBackedTab';\nimport { useCachedInitialData } from '@/hooks/useCachedInitialData';\nimport { useActiveAgentProfile } from '@/hooks/useActiveAgentProfile';\nimport type { AISessionLog, AISessionStats } from '@/services/aiApi';\nimport { useTr } from '../../shared/hooks/useTr';\nimport {\n sendPromptToSession,\n fetchSessionLogs,\n fetchSessionStats,\n updateSessionConfig,\n terminateSession,\n} from '@/services/aiApi';\nimport { isSessionNotFoundError } from '@/utils/aiSessionNotFound';\n\ntype SessionTab = 'chat' \| 'logs' \| 'stats' \| 'config';\nconst SESSION_TABS: readonly SessionTab[] = ['chat', 'logs', 'stats', 'config'];\n\nconst sessionTabs: { id: SessionTab; label: string; icon: typeof MessageSquare }[] = [\n { id: 'chat', label: 'Chat', icon: MessageSquare },\n { id: 'logs', label: 'Logs', icon: ScrollText },\n { id: 'stats', label: 'Stats', icon: BarChart3 },\n { id: 'config', label: 'Config', icon: Settings },\n];\n\nconst logTypeColors: Record<string, string> = {\n info: 'bg-action-primary-bg/10 text-action-primary-bg',\n warn: 'bg-status-warning-bg text-status-warning-text',\n error: 'bg-status-error-bg text-status-error-text',\n debug: 'bg-bg-sunken text-text-secondary',\n prompt: 'bg-status-success-bg text-status-success-text',\n response: 'bg-action-primary-bg/20 text-action-primary-bg',\n};\n\ninterface ChatMessage {\n role: 'user' \| 'assistant';\n content: string;\n tokens?: { input: number; output: number };\n timestamp: string;\n}\n\n/*\n AI session detail page with Chat, Logs, Stats, and Config tabs.\n /\nexport function AISessionDetailPage() {\n const tr = useTr();\n const { sessionId } = useParams<{ sessionId: string }>();\n const handleNavigate = useVibeNavigate();\n\n const { agents, loading: agentsLoading } = useCachedInitialData();\n const activeAgent = useMemo(\n () => agents.find((agent) => agent.isActive && agent.tunnelUrl && agent.agentApiKey) ?? null,\n [agents]\n );\n const agentId = activeAgent?.id ?? '';\n const hasAgent = !!agentId;\n // Canonical agent → profile → plugins/data hierarchy. Every aiApi call\n // takes an AgentRef = { id, profile } so the path can be constructed\n // explicitly at the callsite.\n const { active: activeProfile } = useActiveAgentProfile(activeAgent?.id ?? null);\n const agentRef = useMemo(\n () => ({ id: agentId, profile: activeProfile }),\n [agentId, activeProfile]\n );\n\n const [activeTab, setActiveTab] = useQueryBackedTab<SessionTab>(SESSION_TABS, 'chat');\n\n // ── Chat state ──────────────────────────────────────────────────────\n const [messages, setMessages] = useState<ChatMessage[]>([]);\n const [promptInput, setPromptInput] = useState('');\n const [sending, setSending] = useState(false);\n\n const handleSendPrompt = async () => {\n if (!promptInput.trim() \|\| !sessionId \|\| !hasAgent) return;\n const userMessage: ChatMessage = {\n role: 'user',\n content: promptInput,\n timestamp: new Date().toISOString(),\n };\n setMessages((prev) => [...prev, userMessage]);\n setPromptInput('');\n setSending(true);\n try {\n const result = await sendPromptToSession(agentRef, sessionId, userMessage.content);\n const content =\n ((result as Record<string, unknown>).content as string) \|\|\n ((result as Record<string, unknown>).response as string) \|\|\n JSON.stringify(result);\n const inputTokens = (result as Record<string, unknown>).inputTokens as number \| undefined;\n const outputTokens = (result as Record<string, unknown>).outputTokens as number \| undefined;\n const assistantMessage: ChatMessage = {\n role: 'assistant',\n content,\n tokens:\n inputTokens !== undefined ? { input: inputTokens, output: outputTokens ?? 0 } : undefined,\n timestamp: new Date().toISOString(),\n };\n setMessages((prev) => [...prev, assistantMessage]);\n } catch (err) {\n const errorMessage: ChatMessage = {\n role: 'assistant',\n content: `Error: ${err instanceof Error ? err.message : 'Failed to get response'}`,\n timestamp: new Date().toISOString(),\n };\n setMessages((prev) => [...prev, errorMessage]);\n } finally {\n setSending(false);\n }\n };\n\n // ── Logs state ──────────────────────────────────────────────────────\n const [logs, setLogs] = useState<AISessionLog[]>([]);\n const [logsLoading, setLogsLoading] = useState(false);\n const [logsError, setLogsError] = useState<string \| null>(null);\n const [logTypeFilter, setLogTypeFilter] = useState('all');\n\n const loadLogs = useCallback(async () => {\n if (!sessionId \|\| !hasAgent) return;\n setLogsLoading(true);\n setLogsError(null);\n try {\n const params: Record<string, unknown> = {};\n if (logTypeFilter !== 'all') params.type = logTypeFilter;\n const result = await fetchSessionLogs(agentRef, sessionId, params);\n setLogs(result);\n } catch (err) {\n // Pre-first-message: agent has no record of this session yet —\n // render an empty list, not an error.\n if (isSessionNotFoundError(err)) {\n setLogs([]);\n } else {\n setLogsError(err instanceof Error ? err.message : 'Failed to load logs');\n }\n } finally {\n setLogsLoading(false);\n }\n }, [agentRef, sessionId, logTypeFilter, hasAgent]);\n\n useEffect(() => {\n if (activeTab === 'logs') loadLogs();\n }, [activeTab, loadLogs]);\n\n // ── Stats state ─────────────────────────────────────────────────────\n const [stats, setStats] = useState<AISessionStats \| null>(null);\n const [statsLoading, setStatsLoading] = useState(false);\n const [statsError, setStatsError] = useState<string \| null>(null);\n\n const loadStats = useCallback(async () => {\n if (!sessionId \|\| !hasAgent) return;\n setStatsLoading(true);\n setStatsError(null);\n try {\n const result = await fetchSessionStats(agentRef, sessionId);\n setStats(result);\n } catch (err) {\n if (isSessionNotFoundError(err)) {\n setStats(null);\n } else {\n setStatsError(err instanceof Error ? err.message : 'Failed to load stats');\n }\n } finally {\n setStatsLoading(false);\n }\n }, [agentRef, sessionId, hasAgent]);\n\n useEffect(() => {\n if (activeTab === 'stats') loadStats();\n }, [activeTab, loadStats]);\n\n // ── Config state ────────────────────────────────────────────────────\n const [configJson, setConfigJson] = useState('{}');\n const [savingConfig, setSavingConfig] = useState(false);\n const [configSaved, setConfigSaved] = useState(false);\n const [terminating, setTerminating] = useState(false);\n\n const handleSaveConfig = async () => {\n if (!sessionId \|\| !hasAgent) return;\n setSavingConfig(true);\n try {\n const config = JSON.parse(configJson);\n await updateSessionConfig(agentRef, sessionId, config);\n setConfigSaved(true);\n setTimeout(() => setConfigSaved(false), 3000);\n } catch (err) {\n console.error('Failed to save config:', err);\n } finally {\n setSavingConfig(false);\n }\n };\n\n const handleTerminate = async () => {\n if (!sessionId \|\| !hasAgent) return;\n if (!window.confirm('Are you sure you want to terminate this session? This cannot be undone.'))\n return;\n setTerminating(true);\n try {\n await terminateSession(agentRef, sessionId);\n handleNavigate('/ai/sessions');\n } catch (err) {\n console.error('Failed to terminate session:', err);\n } finally {\n setTerminating(false);\n }\n };\n\n if (agentsLoading) {\n return (\n <MotionPage className=\"space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen\">\n <LoadingState message=\"Loading...\" />\n </MotionPage>\n );\n }\n\n if (!hasAgent) {\n return (\n <MotionPage className=\"space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen\">\n <EmptyState\n icon={<MessageSquare className=\"w-8 h-8 text-text-secondary\" />}\n title={tr('vibecontrols.pages.ai.noActiveAgent', 'No active agent')}\n description={tr(\n 'vibecontrols.pages.ai.noActiveAgentDescription',\n 'An active agent with a tunnel is required to view session details.'\n )}\n action={\n <button\n onClick={() => handleNavigate('/agents')}\n className=\"px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors text-sm\"\n >\n {tr('vibecontrols.pages.ai.goToAgents', 'Go to Agents')}\n </button>\n }\n />\n </MotionPage>\n );\n }\n\n return (\n <MotionPage className=\"space-y-6 p-4 sm:p-6 bg-bg-surface min-h-screen\">\n <PageHeader\n title={`Session ${sessionId?.substring(0, 8) ?? ''}...`}\n description={tr(\n 'vibecontrols.pages.ai.sessionDescription',\n 'AI session details and interaction'\n )}\n breadcrumb={[\n { label: 'AI', path: '#' },\n { label: 'Sessions', path: '#' },\n { label: sessionId?.substring(0, 8) ?? '' },\n ]}\n actions={\n <button\n onClick={() => handleNavigate('/ai/sessions')}\n className=\"flex items-center gap-2 px-3 py-2 text-text-secondary hover:bg-bg-sunken rounded-md transition-colors text-sm\"\n >\n <ArrowLeft className=\"w-4 h-4\" />\n {tr('vibecontrols.pages.ai.back', 'Back')}\n </button>\n }\n />\n\n {/ Tab Navigation /}\n <div className=\"-mx-4 border-b border-border-default px-4 sm:-mx-6 sm:px-6\">\n <nav className=\"flex gap-1 overflow-x-auto pb-1\" role=\"tablist\">\n {sessionTabs.map((tab) => {\n const Icon = tab.icon;\n const isActive = activeTab === tab.id;\n return (\n <button\n key={tab.id}\n role=\"tab\"\n aria-selected={isActive}\n onClick={() => setActiveTab(tab.id)}\n className={`flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-t-md border-b-2 px-2.5 py-2 text-xs font-medium transition-colors sm:px-3 sm:py-2.5 sm:text-sm ${\n isActive\n ? 'border-action-primary-bg text-action-primary-bg'\n : 'border-transparent text-text-secondary hover:text-text-primary hover:border-border-default'\n }`}\n >\n <Icon className=\"h-3.5 w-3.5 sm:h-4 sm:w-4\" />\n {tab.label}\n </button>\n );\n })}\n </nav>\n </div>\n\n {/ Tab Content /}\n <RequireAgentReachable agentId={agentId \|\| null}>\n {activeTab === 'chat' && (\n <div className=\"space-y-4\">\n {/ Messages /}\n <Card className=\"p-0\">\n <div className=\"divide-y divide-border-default min-h-[200px] max-h-[50vh] overflow-y-auto\">\n {messages.length === 0 ? (\n <div className=\"flex items-center justify-center h-48 text-sm text-text-secondary\">\n {tr(\n 'vibecontrols.pages.ai.sendPromptToStart',\n 'Send a prompt to start the conversation'\n )}\n </div>\n ) : (\n messages.map((msg, idx) => (\n <div\n key={idx}\n className={`px-4 py-3 ${msg.role === 'assistant' ? 'bg-bg-sunken/50' : ''}`}\n >\n <div className=\"mb-1 flex flex-wrap items-center gap-2\">\n <span className=\"text-xs font-semibold text-text-primary uppercase\">\n {msg.role}\n </span>\n <span className=\"text-xs text-text-muted\">\n {new Date(msg.timestamp).toLocaleTimeString()}\n </span>\n {msg.tokens && (\n <span className=\"text-xs text-text-muted sm:ml-auto\">\n {msg.tokens.input + msg.tokens.output} tokens\n </span>\n )}\n </div>\n <div className=\"text-sm text-text-primary whitespace-pre-wrap\">\n {msg.content}\n </div>\n </div>\n ))\n )}\n {sending && (\n <div className=\"px-4 py-3 bg-bg-sunken/50\">\n <div className=\"flex items-center gap-2\">\n <RefreshCw className=\"w-3.5 h-3.5 text-text-secondary animate-spin\" />\n <span className=\"text-sm text-text-secondary\">\n {tr('vibecontrols.pages.ai.thinking', 'Thinking...')}\n </span>\n </div>\n </div>\n )}\n </div>\n </Card>\n\n {/ Prompt Input */}\n <div className=\"flex flex-col gap-2 sm:flex-row\">\n <textarea\n value={promptInput}\n onChange={(e) => setPromptInput(e.target.value)}\n rows={3}\n className=\"min-h-[7rem] flex-1 rounded-md border border-border-default bg-bg-sunken px-3 py-2 text-sm font-mono text-text-primary resize-none focus:outline-none focus:border-border-strong\"\n placeholder=\"Type your prompt...\"\n onKeyDown={(e) => {\n if (e.key === 'Enter' && (e.metaKey \|\| e.ctrlKey)) {\n e.preventDefault();\n handleSendPrompt();\n }\n }}\n />\n <button\n onClick={handleSendPrompt}\n disabled={sending \|\| !promptInput.trim()}\n className=\"flex items-center justify-center gap-2 rounded-md bg-action-primary-bg px-4 py-2 text-sm text-action-primary-text transition-colors hover:bg-action-primary-bg-hover disabled:opacity-50 sm:self-end\"\n >\n <Send className=\"w-4 h-4\" />\n {tr('vibecontrols.pages.ai.send', 'Send')}\n </button>\n </div>\n </div>\n )}\n\n {activeTab === 'logs' && (\n <div className=\"space-y-4\">\n <div className=\"flex flex-wrap items-center gap-2\">\n <select\n value={logTypeFilter}\n onChange={(e) => setLogTypeFilter(e.target.value)}\n className=\"px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary text-sm\"\n >\n <option value=\"all\">All Types</option>\n <option value=\"info\">Info</option>\n <option value=\"warn\">Warning</option>\n <option value=\"error\">Error</option>\n <option value=\"debug\">Debug</option>\n <option value=\"prompt\">Prompt</option>\n <option value=\"response\">Response</option>\n </select>\n <button\n onClick={loadLogs}\n disabled={logsLoading}\n className=\"p-2 hover:bg-bg-sunken rounded-md transition-colors\"\n >\n <RefreshCw\n className={`w-4 h-4 text-text-secondary ${logsLoading ? 'animate-spin' : ''}`}\n />\n </button>\n </div>\n\n {logsLoading ? (\n <LoadingState message=\"Loading logs...\" />\n ) : logsError ? (\n <ErrorState title=\"Failed to load logs\" message={logsError} onRetry={loadLogs} />\n ) : logs.length === 0 ? (\n <EmptyState\n icon={<ScrollText className=\"w-6 h-6 text-text-secondary\" />}\n title=\"No logs\"\n description=\"Session logs will appear here\"\n />\n ) : (\n <Card className=\"p-0\">\n <div className=\"divide-y divide-border-default max-h-[60vh] overflow-y-auto\">\n {logs.map((log) => (\n <div key={log.id} className=\"px-4 py-2 flex items-start gap-3 text-sm\">\n <span\n className={`px-1.5 py-0.5 text-xs rounded font-medium flex-shrink-0 mt-0.5 ${logTypeColors[log.type] ?? 'bg-bg-sunken text-text-secondary'}`}\n >\n {log.type}\n </span>\n <div className=\"flex-1 min-w-0\">\n <span className=\"text-text-primary\">{log.message}</span>\n </div>\n <span className=\"text-xs text-text-muted flex-shrink-0\">\n {new Date(log.timestamp).toLocaleTimeString()}\n </span>\n </div>\n ))}\n </div>\n </Card>\n )}\n </div>\n )}\n\n {activeTab === 'stats' && (\n <div className=\"space-y-4\">\n {statsLoading ? (\n <LoadingState message=\"Loading stats...\" />\n ) : statsError ? (\n <ErrorState title=\"Failed to load stats\" message={statsError} onRetry={loadStats} />\n ) : stats ? (\n <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4\">\n <StatCard title=\"Total Tokens\" value={stats.totalTokens.toLocaleString()} />\n <StatCard\n title=\"Input Tokens\"\n value={stats.inputTokens.toLocaleString()}\n variant=\"success\"\n />\n <StatCard\n title=\"Output Tokens\"\n value={stats.outputTokens.toLocaleString()}\n variant=\"warning\"\n />\n <StatCard title=\"Prompts\" value={stats.promptCount} />\n {stats.averageLatency !== undefined && (\n <StatCard title=\"Avg Latency\" value={`${stats.averageLatency.toFixed(0)}ms`} />\n )}\n </div>\n ) : (\n <EmptyState\n icon={<BarChart3 className=\"w-6 h-6 text-text-secondary\" />}\n title=\"No stats\"\n description=\"Stats will appear after the session processes prompts\"\n />\n )}\n </div>\n )}\n\n {activeTab === 'config' && (\n <div className=\"space-y-4\">\n <Card className=\"p-4\">\n <h3 className=\"font-semibold text-text-primary mb-3\">\n {tr('vibecontrols.pages.ai.sessionConfig', 'Session Configuration')}\n </h3>\n <textarea\n value={configJson}\n onChange={(e) => setConfigJson(e.target.value)}\n rows={10}\n className=\"w-full px-3 py-2 bg-bg-sunken border border-border-default rounded-md text-text-primary text-sm font-mono focus:outline-none focus:border-border-strong\"\n placeholder='{\"model\": \"claude-3\", \"temperature\": 0.7, ...}'\n />\n <div className=\"mt-4 flex flex-col gap-3 sm:flex-row sm:items-center\">\n <button\n onClick={handleSaveConfig}\n disabled={savingConfig}\n 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 text-sm\"\n >\n <Settings className=\"w-4 h-4\" />\n {savingConfig\n ? tr('vibecontrols.pages.ai.saving', 'Saving...')\n : tr('vibecontrols.pages.ai.saveConfig', 'Save Config')}\n </button>\n {configSaved && (\n <span className=\"text-sm text-status-success-text\">\n {tr('vibecontrols.pages.ai.savedSuccessfully', 'Saved successfully')}\n </span>\n )}\n </div>\n </Card>\n\n <Card className=\"p-4 border-status-error-text/20\">\n <h3 className=\"font-semibold text-status-error-text mb-2\">\n {tr('vibecontrols.pages.ai.dangerZone', 'Danger Zone')}\n </h3>\n <p className=\"text-sm text-text-secondary mb-3\">\n {tr(\n 'vibecontrols.pages.ai.terminateWarning',\n 'Terminating a session is permanent. All state will be lost.'\n )}\n </p>\n <button\n onClick={handleTerminate}\n disabled={terminating}\n className=\"flex items-center gap-2 px-4 py-2 bg-status-error-bg text-status-error-text border border-status-error-text/20 rounded-md hover:bg-status-error-bg/80 transition-colors disabled:opacity-50 text-sm\"\n >\n <XCircle className=\"w-4 h-4\" />\n {terminating\n ? tr('vibecontrols.pages.ai.terminating', 'Terminating...')\n : tr('vibecontrols.pages.ai.terminateSession', 'Terminate Session')}\n </button>\n </Card>\n </div>\n )}\n </RequireAgentReachable>\n </MotionPage>\n );\n}\n"],"mappings":"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"}

package/dist/pages/ai/AgentManagerPage.js CHANGED Viewed

@@ -10,142 +10,146 @@ import { usePluginAvailability as l } from "../../hooks/usePluginAvailability.js
 import { AI_CORE_PACKAGE as u, AI_PROVIDER_PACKAGES as d } from "../../constants/pluginCatalog.js";
 import { PluginGate as f } from "../../components/shared/PluginGate.js";
 import { RequireAgentReachable as p } from "../../components/shared/RequireAgentReachable.js";
-import { AgentSelector as m } from "../../components/shared/AgentSelector.js";
+import { useActiveAgentProfile as m } from "../../hooks/useActiveAgentProfile.js";
+import { AgentSelector as h } from "../../components/shared/AgentSelector.js";
 import "../../components/shared/index.js";
-import { bulkDeleteSessions as h, terminateSession as g } from "../../services/aiApi.js";
-import { ClaudeCredentialsCard as _ } from "../../components/ai/ClaudeCredentialsCard.js";
-import { BridleConfigPanel as v } from "../../components/agent-manager/BridleConfigPanel.js";
-import { useAgentManagerStore as y } from "../../store/agentManagerStore.js";
-import { useAgentManagerKeyboard as b } from "../../hooks/useAgentManagerKeyboard.js";
-import { AgentManagerLayout as x } from "../../components/agent-manager/AgentManagerLayout.js";
-import { AgentManagerSidebar as S } from "../../components/agent-manager/AgentManagerSidebar.js";
-import { AgentManagerCenter as C } from "../../components/agent-manager/AgentManagerCenter.js";
-import { AgentManagerDetailPanel as w } from "../../components/agent-manager/AgentManagerDetailPanel.js";
-import { Suspense as T, useCallback as E, useEffect as D, useMemo as O } from "react";
-import { MessagesSquare as k } from "lucide-react";
-import { useParams as A } from "react-router-dom";
-import { jsx as j, jsxs as M } from "react/jsx-runtime";
-import { MotionPage as N } from "@burdenoff/fe-libs/shared/motion";
+import { bulkDeleteSessions as g, terminateSession as _ } from "../../services/aiApi.js";
+import { useAgentManagerStore as v } from "../../store/agentManagerStore.js";
+import { AgentManagerLayout as y } from "../../components/agent-manager/AgentManagerLayout.js";
+import { AgentManagerSidebar as b } from "../../components/agent-manager/AgentManagerSidebar.js";
+import { BridleConfigPanel as x } from "../../components/agent-manager/BridleConfigPanel.js";
+import { AgentManagerCenter as S } from "../../components/agent-manager/AgentManagerCenter.js";
+import { AgentManagerDetailPanel as C } from "../../components/agent-manager/AgentManagerDetailPanel.js";
+import { ClaudeCredentialsCard as w } from "../../components/ai/ClaudeCredentialsCard.js";
+import { useAgentManagerKeyboard as T } from "../../hooks/useAgentManagerKeyboard.js";
+import { Suspense as E, useCallback as D, useEffect as O, useMemo as k } from "react";
+import { MessagesSquare as A } from "lucide-react";
+import { useParams as j } from "react-router-dom";
+import { jsx as M, jsxs as N } from "react/jsx-runtime";
+import { MotionPage as P } from "@burdenoff/fe-libs/shared/motion";
 //#region src/pages/ai/AgentManagerPage.tsx
-function P() {
-	let { tab: P, sessionId: F } = A(), I = e(), L = t(), { agents: R, loading: z, error: B } = r(), V = n((e) => e.activeAgentId), H = O(() => {
-		if (V) {
-			let e = R.find((e) => e.id === V);
+function F() {
+	let { tab: F, sessionId: I } = j(), L = e(), R = t(), { agents: z, loading: B, error: V } = r(), H = n((e) => e.activeAgentId), U = k(() => {
+		if (H) {
+			let e = z.find((e) => e.id === H);
 			if (e) return e;
 		}
-		return R.find((e) => e.isActive && e.tunnelUrl && e.agentApiKey) ?? null;
-	}, [R, V])?.id ?? "", U = y((e) => e.openSession), W = y((e) => e.activeTabSessionId), { initialLoading: G } = l(O(() => [u, ...d], []), H || null);
-	D(() => {
-		F && H && U(F, `Session ${F.slice(0, 8)}`);
+		return z.find((e) => e.isActive && e.tunnelUrl && e.agentApiKey) ?? null;
+	}, [z, H]), W = U?.id ?? "", { active: G } = m(U?.id ?? null), K = k(() => ({
+		id: W,
+		profile: G
+	}), [W, G]), q = v((e) => e.openSession), J = v((e) => e.activeTabSessionId), { initialLoading: Y } = l(k(() => [u, ...d], []), W || null);
+	O(() => {
+		I && W && q(I, `Session ${I.slice(0, 8)}`);
 	}, [
-		F,
-		H,
-		U
+		I,
+		W,
+		q
 	]);
-	let K = E(async (e) => {
-		if (H) try {
-			await g(H, e), o() && s("success");
+	let X = D(async (e) => {
+		if (W) try {
+			await _(K, e), o() && s("success");
 		} catch {
 			o() && s("error");
 		}
-	}, [H]), q = E(async (e) => {
-		if (H) try {
-			await h(H, e), o() && s("success");
+	}, [K]), Z = D(async (e) => {
+		if (W) try {
+			await g(K, e), o() && s("success");
 		} catch {
 			o() && s("error");
 		}
-	}, [H]);
-	return b(), z || H && G ? /* @__PURE__ */ j(N, {
+	}, [K]);
+	return T(), B || W && Y ? /* @__PURE__ */ M(P, {
 		className: "flex items-center justify-center h-full bg-bg-surface",
-		children: /* @__PURE__ */ j(i, { message: I("vibecontrols.pages.ai.detectingAgent", "Detecting agent and plugin availability…") })
-	}) : B ? /* @__PURE__ */ j(N, {
+		children: /* @__PURE__ */ M(i, { message: L("vibecontrols.pages.ai.detectingAgent", "Detecting agent and plugin availability…") })
+	}) : V ? /* @__PURE__ */ M(P, {
 		className: "flex items-center justify-center h-full bg-bg-surface",
-		children: /* @__PURE__ */ j(a, {
+		children: /* @__PURE__ */ M(a, {
 			title: "Failed to load agents",
-			message: B.message
+			message: V.message
 		})
-	}) : R.length === 0 ? /* @__PURE__ */ j(N, {
+	}) : z.length === 0 ? /* @__PURE__ */ M(P, {
 		className: "flex items-center justify-center h-full bg-bg-surface p-8",
-		children: /* @__PURE__ */ j(c, {
-			icon: /* @__PURE__ */ j(k, { className: "w-8 h-8 text-text-secondary" }),
-			title: I("vibecontrols.pages.ai.noActiveAgentAvailable", "No agents available"),
-			description: I("vibecontrols.pages.ai.agentManagerRequiresAgent", "The Agent Manager needs at least one vibecontrols agent. Add one or start an existing one."),
-			action: /* @__PURE__ */ j("button", {
-				onClick: () => L("/agents"),
+		children: /* @__PURE__ */ M(c, {
+			icon: /* @__PURE__ */ M(A, { className: "w-8 h-8 text-text-secondary" }),
+			title: L("vibecontrols.pages.ai.noActiveAgentAvailable", "No agents available"),
+			description: L("vibecontrols.pages.ai.agentManagerRequiresAgent", "The Agent Manager needs at least one vibecontrols agent. Add one or start an existing one."),
+			action: /* @__PURE__ */ M("button", {
+				onClick: () => R("/agents"),
 				className: "px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors text-sm",
-				children: I("vibecontrols.pages.ai.goToAgents", "Go to Agents")
+				children: L("vibecontrols.pages.ai.goToAgents", "Go to Agents")
 			})
 		})
-	}) : P === "config" ? /* @__PURE__ */ M(N, {
+	}) : F === "config" ? /* @__PURE__ */ N(P, {
 		className: "flex flex-col h-[calc(100vh-6.5rem)] bg-bg-surface overflow-hidden",
-		children: [/* @__PURE__ */ M("div", {
+		children: [/* @__PURE__ */ N("div", {
 			className: "flex items-center justify-between gap-3 border-b border-border-default px-4 sm:px-6 py-3",
-			children: [/* @__PURE__ */ M("div", { children: [/* @__PURE__ */ j("p", {
+			children: [/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
 				className: "text-xs uppercase tracking-wide text-text-secondary",
-				children: I("vibecontrols.pages.ai.contextLabel", "Active context")
-			}), /* @__PURE__ */ j("h2", {
+				children: L("vibecontrols.pages.ai.contextLabel", "Active context")
+			}), /* @__PURE__ */ M("h2", {
 				className: "text-sm font-semibold text-text-primary mt-0.5",
-				children: I("vibecontrols.pages.ai.configHeading", "AI configuration")
-			})] }), /* @__PURE__ */ j(m, {
-				label: I("vibecontrols.pages.ai.agentSelectorLabel", "Agent"),
+				children: L("vibecontrols.pages.ai.configHeading", "AI configuration")
+			})] }), /* @__PURE__ */ M(h, {
+				label: L("vibecontrols.pages.ai.agentSelectorLabel", "Agent"),
 				compact: !0
 			})]
-		}), /* @__PURE__ */ j("div", {
+		}), /* @__PURE__ */ M("div", {
 			className: "flex-1 overflow-auto p-4 sm:p-6 space-y-6",
-			children: /* @__PURE__ */ M(p, {
-				agentId: H || null,
-				children: [/* @__PURE__ */ j(_, { agentId: H }), /* @__PURE__ */ j(v, { agentId: H })]
+			children: /* @__PURE__ */ N(p, {
+				agentId: W || null,
+				children: [/* @__PURE__ */ M(w, { agent: K }), /* @__PURE__ */ M(x, { agent: K })]
 			})
 		})]
-	}) : /* @__PURE__ */ M(N, {
+	}) : /* @__PURE__ */ N(P, {
 		className: "flex flex-col h-[calc(100vh-6.5rem)] bg-bg-surface overflow-hidden",
-		children: [/* @__PURE__ */ M("div", {
+		children: [/* @__PURE__ */ N("div", {
 			className: "flex items-center justify-between gap-3 border-b border-border-default px-4 sm:px-6 py-3",
-			children: [/* @__PURE__ */ M("div", { children: [/* @__PURE__ */ j("p", {
+			children: [/* @__PURE__ */ N("div", { children: [/* @__PURE__ */ M("p", {
 				className: "text-xs uppercase tracking-wide text-text-secondary",
-				children: I("vibecontrols.pages.ai.contextLabel", "Active context")
-			}), /* @__PURE__ */ j("h2", {
+				children: L("vibecontrols.pages.ai.contextLabel", "Active context")
+			}), /* @__PURE__ */ M("h2", {
 				className: "text-sm font-semibold text-text-primary mt-0.5",
-				children: I("vibecontrols.pages.ai.contextHeading", "AI workbench")
-			})] }), /* @__PURE__ */ j(m, {
-				label: I("vibecontrols.pages.ai.agentSelectorLabel", "Agent"),
+				children: L("vibecontrols.pages.ai.contextHeading", "AI workbench")
+			})] }), /* @__PURE__ */ M(h, {
+				label: L("vibecontrols.pages.ai.agentSelectorLabel", "Agent"),
 				compact: !0
 			})]
-		}), /* @__PURE__ */ j("div", {
+		}), /* @__PURE__ */ M("div", {
 			className: "flex-1 min-h-0 overflow-auto p-4 sm:p-6 lg:p-0",
-			children: /* @__PURE__ */ j(p, {
-				agentId: H || null,
-				children: /* @__PURE__ */ j(f, {
-					agentId: H || null,
+			children: /* @__PURE__ */ M(p, {
+				agentId: W || null,
+				children: /* @__PURE__ */ M(f, {
+					agentId: W || null,
 					requirements: [{
 						packages: [u],
 						mode: "all",
-						eyebrow: I("vibecontrols.pages.ai.pluginRequiredEyebrow", "AI plugin required"),
-						title: I("vibecontrols.pages.ai.coreTitle", "Install the AI orchestrator"),
-						description: I("vibecontrols.pages.ai.coreDescription", "The AI page routes prompts and sessions through the AI orchestrator plugin on your agent. Install it to continue.")
+						eyebrow: L("vibecontrols.pages.ai.pluginRequiredEyebrow", "AI plugin required"),
+						title: L("vibecontrols.pages.ai.coreTitle", "Install the AI orchestrator"),
+						description: L("vibecontrols.pages.ai.coreDescription", "The AI page routes prompts and sessions through the AI orchestrator plugin on your agent. Install it to continue.")
 					}, {
 						packages: d,
 						mode: "any",
-						eyebrow: I("vibecontrols.pages.ai.providerEyebrow", "AI provider required"),
-						title: I("vibecontrols.pages.ai.providerTitle", "Install at least one AI provider"),
-						description: I("vibecontrols.pages.ai.providerDescription", "Pick the AI harness you want to use. You can install more providers later from the Plugins tab on your agent.")
+						eyebrow: L("vibecontrols.pages.ai.providerEyebrow", "AI provider required"),
+						title: L("vibecontrols.pages.ai.providerTitle", "Install at least one AI provider"),
+						description: L("vibecontrols.pages.ai.providerDescription", "Pick the AI harness you want to use. You can install more providers later from the Plugins tab on your agent.")
 					}],
-					children: /* @__PURE__ */ j(T, {
-						fallback: /* @__PURE__ */ j("div", {
+					children: /* @__PURE__ */ M(E, {
+						fallback: /* @__PURE__ */ M("div", {
 							className: "flex items-center justify-center h-full",
-							children: /* @__PURE__ */ j(i, { message: "Loading..." })
+							children: /* @__PURE__ */ M(i, { message: "Loading..." })
 						}),
-						children: /* @__PURE__ */ j(x, {
-							sidebar: /* @__PURE__ */ j(S, {
-								agentId: H,
-								onDeleteSession: K,
-								onDeleteSelected: q
+						children: /* @__PURE__ */ M(y, {
+							sidebar: /* @__PURE__ */ M(b, {
+								agent: K,
+								onDeleteSession: X,
+								onDeleteSelected: Z
 							}),
-							detailPanel: W ? /* @__PURE__ */ j(w, {
-								sessionId: W,
-								agentId: H
+							detailPanel: J ? /* @__PURE__ */ M(C, {
+								sessionId: J,
+								agent: K
 							}) : void 0,
-							children: /* @__PURE__ */ j(C, { agentId: H })
+							children: /* @__PURE__ */ M(S, { agent: K })
 						})
 					})
 				})
@@ -154,6 +158,6 @@ function P() {
 	});
 }
 //#endregion
-export { P as AgentManagerPage };
+export { F as AgentManagerPage };
 //# sourceMappingURL=AgentManagerPage.js.map

package/dist/pages/ai/AgentManagerPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AgentManagerPage.js","names":[],"sources":["../../../src/pages/ai/AgentManagerPage.tsx"],"sourcesContent":["/*\n AgentManagerPage — top-level page for the multi-session Agent Manager.\n \n Reads URL params (:tab, :sessionId), resolves the active agent via\n * useCachedInitialData(), auto-opens a session tab if the URL has a\n * sessionId, and renders the three-pane layout.\n */\n\nimport { Suspense, useCallback, useEffect, useMemo } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { MessagesSquare } from 'lucide-react';\nimport { isNative, nativeNotify } from '../../utils/nativeBridge';\nimport { MotionPage } from '@burdenoff/fe-libs/shared/motion';\nimport {\n LoadingState,\n EmptyState,\n ErrorState,\n PluginGate,\n AgentSelector,\n RequireAgentReachable,\n} from '@/components/shared';\nimport { useTr } from '../../shared/hooks/useTr';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport { useCachedInitialData } from '@/hooks/useCachedInitialData';\nimport { usePluginAvailability } from '@/hooks/usePluginAvailability';\nimport { useVibeControlsStore } from '@/store/vibeControlsStore';\nimport { useAgentManagerStore } from '@/store/agentManagerStore';\nimport { useAgentManagerKeyboard } from '@/hooks/useAgentManagerKeyboard';\nimport { terminateSession, bulkDeleteSessions } from '@/services/aiApi';\nimport { AgentManagerLayout } from '@/components/agent-manager/AgentManagerLayout';\nimport { AgentManagerSidebar } from '@/components/agent-manager/AgentManagerSidebar';\nimport { AgentManagerCenter } from '@/components/agent-manager/AgentManagerCenter';\nimport { AgentManagerDetailPanel } from '@/components/agent-manager/AgentManagerDetailPanel';\nimport { BridleConfigPanel } from '@/components/agent-manager/BridleConfigPanel';\nimport { ClaudeCredentialsCard } from '@/components/ai/ClaudeCredentialsCard';\nimport { AI_CORE_PACKAGE, AI_PROVIDER_PACKAGES } from '@/constants/pluginCatalog';\n\ninterface AgentManagerParams {\n tab?: string;\n sessionId?: string;\n}\n\nexport function AgentManagerPage() {\n const { tab: tabParam, sessionId: sessionIdParam } = useParams<\n AgentManagerParams & Record<string, string \| undefined>\n >();\n const tr = useTr();\n const handleNavigate = useVibeNavigate();\n\n const { agents, loading: agentsLoading, error: agentsError } = useCachedInitialData();\n const selectedAgentId = useVibeControlsStore((s) => s.activeAgentId);\n\n // Prefer the user-selected agent from the store; fall back to the first\n // healthy one so the page works on first visit before the selector commits.\n const activeAgent = useMemo(() => {\n if (selectedAgentId) {\n const match = agents.find((a) => a.id === selectedAgentId);\n if (match) return match;\n }\n return agents.find((a) => a.isActive && a.tunnelUrl && a.agentApiKey) ?? null;\n }, [agents, selectedAgentId]);\n\n const agentId = activeAgent?.id ?? '';\n const openSession = useAgentManagerStore((s) => s.openSession);\n const activeTabSessionId = useAgentManagerStore((s) => s.activeTabSessionId);\n\n // Pre-fetch plugin availability at the page level so the detection phase\n // overlaps with the agents query's resolution. This collapses the two\n // sequential loading states (\"Loading agents...\" → \"Checking plugin\n // availability...\") into one unified wait, eliminating the flicker the\n // user saw between them.\n const detectionPackages = useMemo(() => [AI_CORE_PACKAGE, ...AI_PROVIDER_PACKAGES], []);\n const { initialLoading: pluginsInitialLoading } = usePluginAvailability(\n detectionPackages,\n agentId \|\| null\n );\n\n // Auto-open session from URL param\n useEffect(() => {\n if (sessionIdParam && agentId) {\n openSession(sessionIdParam, `Session ${sessionIdParam.slice(0, 8)}`);\n }\n }, [sessionIdParam, agentId, openSession]);\n\n const handleDeleteSession = useCallback(\n async (sessionId: string) => {\n if (!agentId) return;\n try {\n await terminateSession(agentId, sessionId);\n if (isNative()) void nativeNotify('success');\n } catch {\n if (isNative()) void nativeNotify('error');\n }\n },\n [agentId]\n );\n\n const handleDeleteSelected = useCallback(\n async (sessionIds: string[]) => {\n if (!agentId) return;\n try {\n await bulkDeleteSessions(agentId, sessionIds);\n if (isNative()) void nativeNotify('success');\n } catch {\n if (isNative()) void nativeNotify('error');\n }\n },\n [agentId]\n );\n\n // Activate keyboard shortcuts (Ctrl+Shift+N, Ctrl+K, Ctrl+F, Escape)\n useAgentManagerKeyboard();\n\n // Single unified wait: show one LoadingState while either the agents\n // query or the plugin-availability probe is still in flight. Prevents\n // the two-step \"Loading agents...\" → \"Checking plugin availability...\"\n // cascade. `agentId && pluginsInitialLoading` also catches the case\n // where agents resolved but the plugin probe hasn't fired/settled yet.\n if (agentsLoading \|\| (agentId && pluginsInitialLoading)) {\n return (\n <MotionPage className=\"flex items-center justify-center h-full bg-bg-surface\">\n <LoadingState\n message={tr(\n 'vibecontrols.pages.ai.detectingAgent',\n 'Detecting agent and plugin availability…'\n )}\n />\n </MotionPage>\n );\n }\n\n if (agentsError) {\n return (\n <MotionPage className=\"flex items-center justify-center h-full bg-bg-surface\">\n <ErrorState title=\"Failed to load agents\" message={agentsError.message} />\n </MotionPage>\n );\n }\n\n if (agents.length === 0) {\n return (\n <MotionPage className=\"flex items-center justify-center h-full bg-bg-surface p-8\">\n <EmptyState\n icon={<MessagesSquare className=\"w-8 h-8 text-text-secondary\" />}\n title={tr('vibecontrols.pages.ai.noActiveAgentAvailable', 'No agents available')}\n description={tr(\n 'vibecontrols.pages.ai.agentManagerRequiresAgent',\n 'The Agent Manager needs at least one vibecontrols agent. Add one or start an existing one.'\n )}\n action={\n <button\n onClick={() => handleNavigate('/agents')}\n className=\"px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors text-sm\"\n >\n {tr('vibecontrols.pages.ai.goToAgents', 'Go to Agents')}\n </button>\n }\n />\n </MotionPage>\n );\n }\n\n if (tabParam === 'config') {\n return (\n <MotionPage className=\"flex flex-col h-[calc(100vh-6.5rem)] bg-bg-surface overflow-hidden\">\n <div className=\"flex items-center justify-between gap-3 border-b border-border-default px-4 sm:px-6 py-3\">\n <div>\n <p className=\"text-xs uppercase tracking-wide text-text-secondary\">\n {tr('vibecontrols.pages.ai.contextLabel', 'Active context')}\n </p>\n <h2 className=\"text-sm font-semibold text-text-primary mt-0.5\">\n {tr('vibecontrols.pages.ai.configHeading', 'AI configuration')}\n </h2>\n </div>\n <AgentSelector label={tr('vibecontrols.pages.ai.agentSelectorLabel', 'Agent')} compact />\n </div>\n\n <div className=\"flex-1 overflow-auto p-4 sm:p-6 space-y-6\">\n <RequireAgentReachable agentId={agentId \|\| null}>\n <ClaudeCredentialsCard agentId={agentId} />\n <BridleConfigPanel agentId={agentId} />\n </RequireAgentReachable>\n </div>\n </MotionPage>\n );\n }\n\n return (\n <MotionPage className=\"flex flex-col h-[calc(100vh-6.5rem)] bg-bg-surface overflow-hidden\">\n <div className=\"flex items-center justify-between gap-3 border-b border-border-default px-4 sm:px-6 py-3\">\n <div>\n <p className=\"text-xs uppercase tracking-wide text-text-secondary\">\n {tr('vibecontrols.pages.ai.contextLabel', 'Active context')}\n </p>\n <h2 className=\"text-sm font-semibold text-text-primary mt-0.5\">\n {tr('vibecontrols.pages.ai.contextHeading', 'AI workbench')}\n </h2>\n </div>\n <AgentSelector label={tr('vibecontrols.pages.ai.agentSelectorLabel', 'Agent')} compact />\n </div>\n\n <div className=\"flex-1 min-h-0 overflow-auto p-4 sm:p-6 lg:p-0\">\n <RequireAgentReachable agentId={agentId \|\| null}>\n <PluginGate\n agentId={agentId \|\| null}\n requirements={[\n {\n packages: [AI_CORE_PACKAGE],\n mode: 'all',\n eyebrow: tr('vibecontrols.pages.ai.pluginRequiredEyebrow', 'AI plugin required'),\n title: tr('vibecontrols.pages.ai.coreTitle', 'Install the AI orchestrator'),\n description: tr(\n 'vibecontrols.pages.ai.coreDescription',\n 'The AI page routes prompts and sessions through the AI orchestrator plugin on your agent. Install it to continue.'\n ),\n },\n {\n packages: AI_PROVIDER_PACKAGES,\n mode: 'any',\n eyebrow: tr('vibecontrols.pages.ai.providerEyebrow', 'AI provider required'),\n title: tr(\n 'vibecontrols.pages.ai.providerTitle',\n 'Install at least one AI provider'\n ),\n description: tr(\n 'vibecontrols.pages.ai.providerDescription',\n 'Pick the AI harness you want to use. You can install more providers later from the Plugins tab on your agent.'\n ),\n },\n ]}\n >\n <Suspense\n fallback={\n <div className=\"flex items-center justify-center h-full\">\n <LoadingState message=\"Loading...\" />\n </div>\n }\n >\n <AgentManagerLayout\n sidebar={\n <AgentManagerSidebar\n agentId={agentId}\n onDeleteSession={handleDeleteSession}\n onDeleteSelected={handleDeleteSelected}\n />\n }\n detailPanel={\n activeTabSessionId ? (\n <AgentManagerDetailPanel sessionId={activeTabSessionId} agentId={agentId} />\n ) : undefined\n }\n >\n <AgentManagerCenter agentId={agentId} />\n </AgentManagerLayout>\n </Suspense>\n </PluginGate>\n </RequireAgentReachable>\n </div>\n </MotionPage>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"AgentManagerPage.js","names":[],"sources":["../../../src/pages/ai/AgentManagerPage.tsx"],"sourcesContent":["/*\n AgentManagerPage — top-level page for the multi-session Agent Manager.\n \n Reads URL params (:tab, :sessionId), resolves the active agent via\n * useCachedInitialData(), auto-opens a session tab if the URL has a\n * sessionId, and renders the three-pane layout.\n */\n\nimport { Suspense, useCallback, useEffect, useMemo } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { MessagesSquare } from 'lucide-react';\nimport { isNative, nativeNotify } from '../../utils/nativeBridge';\nimport { MotionPage } from '@burdenoff/fe-libs/shared/motion';\nimport {\n LoadingState,\n EmptyState,\n ErrorState,\n PluginGate,\n AgentSelector,\n RequireAgentReachable,\n} from '@/components/shared';\nimport { useTr } from '../../shared/hooks/useTr';\nimport { useVibeNavigate } from '@/providers/VibeControlsProvider';\nimport { useCachedInitialData } from '@/hooks/useCachedInitialData';\nimport { useActiveAgentProfile } from '@/hooks/useActiveAgentProfile';\nimport { usePluginAvailability } from '@/hooks/usePluginAvailability';\nimport { useVibeControlsStore } from '@/store/vibeControlsStore';\nimport { useAgentManagerStore } from '@/store/agentManagerStore';\nimport { useAgentManagerKeyboard } from '@/hooks/useAgentManagerKeyboard';\nimport { terminateSession, bulkDeleteSessions } from '@/services/aiApi';\nimport { AgentManagerLayout } from '@/components/agent-manager/AgentManagerLayout';\nimport { AgentManagerSidebar } from '@/components/agent-manager/AgentManagerSidebar';\nimport { AgentManagerCenter } from '@/components/agent-manager/AgentManagerCenter';\nimport { AgentManagerDetailPanel } from '@/components/agent-manager/AgentManagerDetailPanel';\nimport { BridleConfigPanel } from '@/components/agent-manager/BridleConfigPanel';\nimport { ClaudeCredentialsCard } from '@/components/ai/ClaudeCredentialsCard';\nimport { AI_CORE_PACKAGE, AI_PROVIDER_PACKAGES } from '@/constants/pluginCatalog';\n\ninterface AgentManagerParams {\n tab?: string;\n sessionId?: string;\n}\n\nexport function AgentManagerPage() {\n const { tab: tabParam, sessionId: sessionIdParam } = useParams<\n AgentManagerParams & Record<string, string \| undefined>\n >();\n const tr = useTr();\n const handleNavigate = useVibeNavigate();\n\n const { agents, loading: agentsLoading, error: agentsError } = useCachedInitialData();\n const selectedAgentId = useVibeControlsStore((s) => s.activeAgentId);\n\n // Prefer the user-selected agent from the store; fall back to the first\n // healthy one so the page works on first visit before the selector commits.\n const activeAgent = useMemo(() => {\n if (selectedAgentId) {\n const match = agents.find((a) => a.id === selectedAgentId);\n if (match) return match;\n }\n return agents.find((a) => a.isActive && a.tunnelUrl && a.agentApiKey) ?? null;\n }, [agents, selectedAgentId]);\n\n const agentId = activeAgent?.id ?? '';\n // AgentRef for canonical aiApi calls — agent → profile → plugins/data.\n const { active: activeProfile } = useActiveAgentProfile(activeAgent?.id ?? null);\n const agentRef = useMemo(\n () => ({ id: agentId, profile: activeProfile }),\n [agentId, activeProfile]\n );\n const openSession = useAgentManagerStore((s) => s.openSession);\n const activeTabSessionId = useAgentManagerStore((s) => s.activeTabSessionId);\n\n // Pre-fetch plugin availability at the page level so the detection phase\n // overlaps with the agents query's resolution. This collapses the two\n // sequential loading states (\"Loading agents...\" → \"Checking plugin\n // availability...\") into one unified wait, eliminating the flicker the\n // user saw between them.\n const detectionPackages = useMemo(() => [AI_CORE_PACKAGE, ...AI_PROVIDER_PACKAGES], []);\n const { initialLoading: pluginsInitialLoading } = usePluginAvailability(\n detectionPackages,\n agentId \|\| null\n );\n\n // Auto-open session from URL param\n useEffect(() => {\n if (sessionIdParam && agentId) {\n openSession(sessionIdParam, `Session ${sessionIdParam.slice(0, 8)}`);\n }\n }, [sessionIdParam, agentId, openSession]);\n\n const handleDeleteSession = useCallback(\n async (sessionId: string) => {\n if (!agentId) return;\n try {\n await terminateSession(agentRef, sessionId);\n if (isNative()) void nativeNotify('success');\n } catch {\n if (isNative()) void nativeNotify('error');\n }\n },\n [agentRef]\n );\n\n const handleDeleteSelected = useCallback(\n async (sessionIds: string[]) => {\n if (!agentId) return;\n try {\n await bulkDeleteSessions(agentRef, sessionIds);\n if (isNative()) void nativeNotify('success');\n } catch {\n if (isNative()) void nativeNotify('error');\n }\n },\n [agentRef]\n );\n\n // Activate keyboard shortcuts (Ctrl+Shift+N, Ctrl+K, Ctrl+F, Escape)\n useAgentManagerKeyboard();\n\n // Single unified wait: show one LoadingState while either the agents\n // query or the plugin-availability probe is still in flight. Prevents\n // the two-step \"Loading agents...\" → \"Checking plugin availability...\"\n // cascade. `agentId && pluginsInitialLoading` also catches the case\n // where agents resolved but the plugin probe hasn't fired/settled yet.\n if (agentsLoading \|\| (agentId && pluginsInitialLoading)) {\n return (\n <MotionPage className=\"flex items-center justify-center h-full bg-bg-surface\">\n <LoadingState\n message={tr(\n 'vibecontrols.pages.ai.detectingAgent',\n 'Detecting agent and plugin availability…'\n )}\n />\n </MotionPage>\n );\n }\n\n if (agentsError) {\n return (\n <MotionPage className=\"flex items-center justify-center h-full bg-bg-surface\">\n <ErrorState title=\"Failed to load agents\" message={agentsError.message} />\n </MotionPage>\n );\n }\n\n if (agents.length === 0) {\n return (\n <MotionPage className=\"flex items-center justify-center h-full bg-bg-surface p-8\">\n <EmptyState\n icon={<MessagesSquare className=\"w-8 h-8 text-text-secondary\" />}\n title={tr('vibecontrols.pages.ai.noActiveAgentAvailable', 'No agents available')}\n description={tr(\n 'vibecontrols.pages.ai.agentManagerRequiresAgent',\n 'The Agent Manager needs at least one vibecontrols agent. Add one or start an existing one.'\n )}\n action={\n <button\n onClick={() => handleNavigate('/agents')}\n className=\"px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg-hover transition-colors text-sm\"\n >\n {tr('vibecontrols.pages.ai.goToAgents', 'Go to Agents')}\n </button>\n }\n />\n </MotionPage>\n );\n }\n\n if (tabParam === 'config') {\n return (\n <MotionPage className=\"flex flex-col h-[calc(100vh-6.5rem)] bg-bg-surface overflow-hidden\">\n <div className=\"flex items-center justify-between gap-3 border-b border-border-default px-4 sm:px-6 py-3\">\n <div>\n <p className=\"text-xs uppercase tracking-wide text-text-secondary\">\n {tr('vibecontrols.pages.ai.contextLabel', 'Active context')}\n </p>\n <h2 className=\"text-sm font-semibold text-text-primary mt-0.5\">\n {tr('vibecontrols.pages.ai.configHeading', 'AI configuration')}\n </h2>\n </div>\n <AgentSelector label={tr('vibecontrols.pages.ai.agentSelectorLabel', 'Agent')} compact />\n </div>\n\n <div className=\"flex-1 overflow-auto p-4 sm:p-6 space-y-6\">\n <RequireAgentReachable agentId={agentId \|\| null}>\n <ClaudeCredentialsCard agent={agentRef} />\n <BridleConfigPanel agent={agentRef} />\n </RequireAgentReachable>\n </div>\n </MotionPage>\n );\n }\n\n return (\n <MotionPage className=\"flex flex-col h-[calc(100vh-6.5rem)] bg-bg-surface overflow-hidden\">\n <div className=\"flex items-center justify-between gap-3 border-b border-border-default px-4 sm:px-6 py-3\">\n <div>\n <p className=\"text-xs uppercase tracking-wide text-text-secondary\">\n {tr('vibecontrols.pages.ai.contextLabel', 'Active context')}\n </p>\n <h2 className=\"text-sm font-semibold text-text-primary mt-0.5\">\n {tr('vibecontrols.pages.ai.contextHeading', 'AI workbench')}\n </h2>\n </div>\n <AgentSelector label={tr('vibecontrols.pages.ai.agentSelectorLabel', 'Agent')} compact />\n </div>\n\n <div className=\"flex-1 min-h-0 overflow-auto p-4 sm:p-6 lg:p-0\">\n <RequireAgentReachable agentId={agentId \|\| null}>\n <PluginGate\n agentId={agentId \|\| null}\n requirements={[\n {\n packages: [AI_CORE_PACKAGE],\n mode: 'all',\n eyebrow: tr('vibecontrols.pages.ai.pluginRequiredEyebrow', 'AI plugin required'),\n title: tr('vibecontrols.pages.ai.coreTitle', 'Install the AI orchestrator'),\n description: tr(\n 'vibecontrols.pages.ai.coreDescription',\n 'The AI page routes prompts and sessions through the AI orchestrator plugin on your agent. Install it to continue.'\n ),\n },\n {\n packages: AI_PROVIDER_PACKAGES,\n mode: 'any',\n eyebrow: tr('vibecontrols.pages.ai.providerEyebrow', 'AI provider required'),\n title: tr(\n 'vibecontrols.pages.ai.providerTitle',\n 'Install at least one AI provider'\n ),\n description: tr(\n 'vibecontrols.pages.ai.providerDescription',\n 'Pick the AI harness you want to use. You can install more providers later from the Plugins tab on your agent.'\n ),\n },\n ]}\n >\n <Suspense\n fallback={\n <div className=\"flex items-center justify-center h-full\">\n <LoadingState message=\"Loading...\" />\n </div>\n }\n >\n <AgentManagerLayout\n sidebar={\n <AgentManagerSidebar\n agent={agentRef}\n onDeleteSession={handleDeleteSession}\n onDeleteSelected={handleDeleteSelected}\n />\n }\n detailPanel={\n activeTabSessionId ? (\n <AgentManagerDetailPanel sessionId={activeTabSessionId} agent={agentRef} />\n ) : undefined\n }\n >\n <AgentManagerCenter agent={agentRef} />\n </AgentManagerLayout>\n </Suspense>\n </PluginGate>\n </RequireAgentReachable>\n </div>\n </MotionPage>\n );\n}\n"],"mappings":"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"}

package/dist/pages/tunnels/TunnelDetailsPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TunnelDetailsPage.js","names":[],"sources":["../../../src/pages/tunnels/TunnelDetailsPage.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { useParams, useNavigate, useSearchParams } from 'react-router-dom';\nimport { Tabs, type TabItem } from '@burdenoff/fe-libs/chrome';\n\nimport { PageHeader } from '@/components/shared/PageHeader';\nimport { LoadingState } from '@/components/shared/LoadingState';\nimport { ErrorState } from '@/components/shared/ErrorState';\nimport { TunnelStatusBadge } from '@/components/tunnels/TunnelStatusBadge';\nimport { ProviderBadge } from '@/components/tunnels/ProviderBadge';\nimport { useGetTunnelQuery } from '@/generated/wspace-operations';\nimport { useTr } from '../../shared/hooks/useTr';\n\nimport { TunnelOverviewTab } from './tabs/TunnelOverviewTab';\nimport { TunnelEndpointsTab } from './tabs/TunnelEndpointsTab';\nimport { TunnelSessionsTab } from './tabs/TunnelSessionsTab';\nimport { TunnelDomainsTab } from './tabs/TunnelDomainsTab';\nimport { TunnelUsageTab } from './tabs/TunnelUsageTab';\nimport { TunnelCliTab } from './tabs/TunnelCliTab';\nimport { TunnelAuditTab } from './tabs/TunnelAuditTab';\nimport { TunnelSettingsTab } from './tabs/TunnelSettingsTab';\n\nexport function TunnelDetailsPage() {\n const tr = useTr();\n const { tunnelId = '' } = useParams();\n const navigate = useNavigate();\n const [params, setParams] = useSearchParams();\n\n // 30s safety-net poll — primary signal will be a tunnel-status\n // subscription once ~~the~~ tunnel-svc exposes one (~~TODO~~). 5s is too~~\n //~~ aggressive for a detail page; 30s + manual refresh covers rare~~\n //~~ flips without burning gateway CPU. Keep cache-and-network so the~~\n //~~ first paint is instant from cache.\n const { data, loading, error, refetch } = useGetTunnelQuery({\n variables: { id: tunnelId },\n pollInterval: 30_000,\n fetchPolicy: 'cache-and-network',\n skip: !tunnelId,\n });\n\n const tabs: TabItem[] = useMemo(\n () => [\n { id: 'overview', label: tr('vibecontrols.tunnels.detail.overview', 'Overview') },\n { id: 'endpoints', label: tr('vibecontrols.tunnels.detail.endpoints', 'Endpoints') },\n { id: 'sessions', label: tr('vibecontrols.tunnels.detail.sessions', 'Sessions') },\n { id: 'domains', label: tr('vibecontrols.tunnels.detail.domains', 'Domains') },\n { id: 'usage', label: tr('vibecontrols.tunnels.detail.usage', 'Usage') },\n { id: 'cli', label: tr('vibecontrols.tunnels.detail.cli', 'CLI') },\n { id: 'audit', label: tr('vibecontrols.tunnels.detail.audit', 'Audit') },\n { id: 'settings', label: tr('vibecontrols.tunnels.detail.settings', 'Settings') },\n ],\n [tr]\n );\n\n const activeId = params.get('tab') ?? tabs[0].id;\n\n const handleTabChange = (id: string) => {\n const next = new URLSearchParams(params);\n if (id === tabs[0].id) next.delete('tab');\n else next.set('tab', id);\n setParams(next, { replace: true });\n };\n\n if (loading && !data) return <LoadingState message=\"Loading tunnel\" />;\n if (error) {\n return (\n <ErrorState title=\"Failed to load tunnel\" message={error.message} onRetry={() => refetch()} />\n );\n }\n if (!data?.tunnel) {\n return (\n <ErrorState\n title=\"Tunnel not found\"\n message=\"This tunnel may have been deleted.\"\n onRetry={() => navigate('/vibecontrols/tunnels')}\n />\n );\n }\n\n const tunnel = data.tunnel;\n\n return (\n <div className=\"flex flex-col h-full\">\n <div className=\"px-6 pt-6 pb-2 border-b border-border-subtle\">\n <PageHeader\n breadcrumb={[{ label: 'Tunnels', path: '/vibecontrols/tunnels' }, { label: tunnel.name }]}\n title={tunnel.name}\n description={\n tunnel.description ?? `${tunnel.protocol}:${tunnel.localPort} on ${tunnel.localHost}`\n }\n actions={\n <div className=\"flex items-center gap-2\">\n <TunnelStatusBadge status={tunnel.status} />\n <ProviderBadge providerKey={tunnel.providerKey} />\n </div>\n }\n />\n <div className=\"mt-2\">\n <Tabs\n items={tabs}\n activeTabId={activeId}\n onTabChange={handleTabChange}\n variant=\"underline\"\n />\n </div>\n </div>\n <div className=\"flex-1 min-h-0 overflow-auto p-6\">\n {activeId === 'overview' && <TunnelOverviewTab tunnel={tunnel} />}\n {activeId === 'endpoints' && <TunnelEndpointsTab tunnel={tunnel} />}\n {activeId === 'sessions' && <TunnelSessionsTab tunnelId={tunnel.id} />}\n {activeId === 'domains' && <TunnelDomainsTab tunnel={tunnel} />}\n {activeId === 'usage' && <TunnelUsageTab tunnelId={tunnel.id} />}\n {activeId === 'cli' && <TunnelCliTab tunnel={tunnel} />}\n {activeId === 'audit' && <TunnelAuditTab tunnelId={tunnel.id} />}\n {activeId === 'settings' && (\n <TunnelSettingsTab tunnel={tunnel} onDeleted={() => navigate('/vibecontrols/tunnels')} />\n )}\n </div>\n </div>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"TunnelDetailsPage.js","names":[],"sources":["../../../src/pages/tunnels/TunnelDetailsPage.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { useParams, useNavigate, useSearchParams } from 'react-router-dom';\nimport { Tabs, type TabItem } from '@burdenoff/fe-libs/chrome';\n\nimport { PageHeader } from '@/components/shared/PageHeader';\nimport { LoadingState } from '@/components/shared/LoadingState';\nimport { ErrorState } from '@/components/shared/ErrorState';\nimport { TunnelStatusBadge } from '@/components/tunnels/TunnelStatusBadge';\nimport { ProviderBadge } from '@/components/tunnels/ProviderBadge';\nimport { useGetTunnelQuery } from '@/generated/wspace-operations';\nimport { useTr } from '../../shared/hooks/useTr';\n\nimport { TunnelOverviewTab } from './tabs/TunnelOverviewTab';\nimport { TunnelEndpointsTab } from './tabs/TunnelEndpointsTab';\nimport { TunnelSessionsTab } from './tabs/TunnelSessionsTab';\nimport { TunnelDomainsTab } from './tabs/TunnelDomainsTab';\nimport { TunnelUsageTab } from './tabs/TunnelUsageTab';\nimport { TunnelCliTab } from './tabs/TunnelCliTab';\nimport { TunnelAuditTab } from './tabs/TunnelAuditTab';\nimport { TunnelSettingsTab } from './tabs/TunnelSettingsTab';\n\nexport function TunnelDetailsPage() {\n const tr = useTr();\n const { tunnelId = '' } = useParams();\n const navigate = useNavigate();\n const [params, setParams] = useSearchParams();\n\n // 30s safety-net poll — primary signal will be a tunnel-status\n // subscription once tunnel-svc exposes one (tracked in tunnel-svc\n // backlog). 5s is too aggressive for a detail page; 30s + manual\n // refresh covers rare flips without burning gateway CPU. Keep\n // cache-and-network so the first paint is instant from cache.\n const { data, loading, error, refetch } = useGetTunnelQuery({\n variables: { id: tunnelId },\n pollInterval: 30_000,\n fetchPolicy: 'cache-and-network',\n skip: !tunnelId,\n });\n\n const tabs: TabItem[] = useMemo(\n () => [\n { id: 'overview', label: tr('vibecontrols.tunnels.detail.overview', 'Overview') },\n { id: 'endpoints', label: tr('vibecontrols.tunnels.detail.endpoints', 'Endpoints') },\n { id: 'sessions', label: tr('vibecontrols.tunnels.detail.sessions', 'Sessions') },\n { id: 'domains', label: tr('vibecontrols.tunnels.detail.domains', 'Domains') },\n { id: 'usage', label: tr('vibecontrols.tunnels.detail.usage', 'Usage') },\n { id: 'cli', label: tr('vibecontrols.tunnels.detail.cli', 'CLI') },\n { id: 'audit', label: tr('vibecontrols.tunnels.detail.audit', 'Audit') },\n { id: 'settings', label: tr('vibecontrols.tunnels.detail.settings', 'Settings') },\n ],\n [tr]\n );\n\n const activeId = params.get('tab') ?? tabs[0].id;\n\n const handleTabChange = (id: string) => {\n const next = new URLSearchParams(params);\n if (id === tabs[0].id) next.delete('tab');\n else next.set('tab', id);\n setParams(next, { replace: true });\n };\n\n if (loading && !data) return <LoadingState message=\"Loading tunnel\" />;\n if (error) {\n return (\n <ErrorState title=\"Failed to load tunnel\" message={error.message} onRetry={() => refetch()} />\n );\n }\n if (!data?.tunnel) {\n return (\n <ErrorState\n title=\"Tunnel not found\"\n message=\"This tunnel may have been deleted.\"\n onRetry={() => navigate('/vibecontrols/tunnels')}\n />\n );\n }\n\n const tunnel = data.tunnel;\n\n return (\n <div className=\"flex flex-col h-full\">\n <div className=\"px-6 pt-6 pb-2 border-b border-border-subtle\">\n <PageHeader\n breadcrumb={[{ label: 'Tunnels', path: '/vibecontrols/tunnels' }, { label: tunnel.name }]}\n title={tunnel.name}\n description={\n tunnel.description ?? `${tunnel.protocol}:${tunnel.localPort} on ${tunnel.localHost}`\n }\n actions={\n <div className=\"flex items-center gap-2\">\n <TunnelStatusBadge status={tunnel.status} />\n <ProviderBadge providerKey={tunnel.providerKey} />\n </div>\n }\n />\n <div className=\"mt-2\">\n <Tabs\n items={tabs}\n activeTabId={activeId}\n onTabChange={handleTabChange}\n variant=\"underline\"\n />\n </div>\n </div>\n <div className=\"flex-1 min-h-0 overflow-auto p-6\">\n {activeId === 'overview' && <TunnelOverviewTab tunnel={tunnel} />}\n {activeId === 'endpoints' && <TunnelEndpointsTab tunnel={tunnel} />}\n {activeId === 'sessions' && <TunnelSessionsTab tunnelId={tunnel.id} />}\n {activeId === 'domains' && <TunnelDomainsTab tunnel={tunnel} />}\n {activeId === 'usage' && <TunnelUsageTab tunnelId={tunnel.id} />}\n {activeId === 'cli' && <TunnelCliTab tunnel={tunnel} />}\n {activeId === 'audit' && <TunnelAuditTab tunnelId={tunnel.id} />}\n {activeId === 'settings' && (\n <TunnelSettingsTab tunnel={tunnel} onDeleted={() => navigate('/vibecontrols/tunnels')} />\n )}\n </div>\n </div>\n );\n}\n"],"mappings":"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"}