@burdenoff/microfe-vibecontrols 2026.511.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"AgentManagerInputArea.js","names":[],"sources":["../../../src/components/agent-manager/AgentManagerInputArea.tsx"],"sourcesContent":["/**\n * Rich input area for the Agent Manager chat.\n *\n * Sits at the bottom of the chat pane. Contains a toolbar row with\n * control selectors and a resizable textarea with send/cancel buttons.\n * Supports file attachment preview, keyboard shortcuts, and slash\n * commands for quick actions.\n */\n\nimport { useState, useRef, useCallback, useEffect, useMemo, type KeyboardEvent } from 'react';\nimport { ArrowUp, Square, X, ChevronDown, Clock } from 'lucide-react';\nimport { useAgentManagerStore } from '@/store/agentManagerStore';\nimport { useVoiceMode } from '@/hooks/useVoiceMode';\nimport { useCachedInitialData } from '@/hooks/useCachedInitialData';\nimport { fetchProviders, type AIProvider } from '@/services/aiApi';\nimport { schedulePrompt } from '@/services/schedulerApi';\nimport { ModelSelector } from './controls/ModelSelector';\nimport { SdkSelector } from './controls/SdkSelector';\nimport { McpServerSelector } from './controls/McpServerSelector';\nimport { VoiceToggle } from './controls/VoiceToggle';\nimport { FileAttachButton, createDropHandlers } from './controls/FileAttachButton';\nimport { ContextLevelToggle } from './controls/ContextLevelToggle';\nimport type { AgentSdkType, McpServer, ProviderMode } from '@/types/agentManager';\nimport { useTr } from '../../shared/hooks/useTr';\n\n/* ────────────────────────────────────────────────────────────────────── */\n/*  Slash commands                                                      */\n/* ────────────────────────────────────────────────────────────────────── */\n\ninterface SlashCommand {\n  command: string;\n  description: string;\n  args?: string;\n}\n\nconst SLASH_COMMANDS: SlashCommand[] = [\n  { command: '/new', description: 'Create new session' },\n  { command: '/rename', description: 'Rename current session', args: '<name>' },\n  { command: '/model', description: 'Switch model', args: '<model-name>' },\n  {\n    command: '/sdk',\n    description: 'Switch SDK',\n    args: '<claude|codex|gemini|opencode|openai-compat>',\n  },\n  { command: '/mode', description: 'Switch mode', args: '<sdk|cli>' },\n  { command: '/export', description: 'Export conversation', args: '[json|md]' },\n  { command: '/clear', description: 'Clear conversation' },\n  { command: '/help', description: 'Show available commands' },\n];\n\nconst VALID_SDKS: AgentSdkType[] = [\n  'claude',\n  'codex',\n  'gemini',\n  'opencode',\n  'openai-compat',\n  'goose',\n  'amp',\n  'copilot',\n  'crush',\n  'pi',\n  'aider',\n  'plandex',\n];\nconst VALID_MODES: ProviderMode[] = ['sdk', 'cli'];\n\nconst MODEL_DEFAULTS: Record<AgentSdkType, string> = {\n  claude: 'claude-sonnet-4-20250514',\n  codex: 'gpt-4.1-mini',\n  gemini: 'gemini-2.5-flash',\n  opencode: 'claude-sonnet-4-20250514',\n  'openai-compat': 'gpt-3.5-turbo',\n  goose: 'default',\n  amp: 'default',\n  copilot: 'default',\n  crush: 'default',\n  pi: 'default',\n  aider: 'default',\n  plandex: 'default',\n};\n\n/* ────────────────────────────────────────────────────────────────────── */\n/*  Component                                                           */\n/* ────────────────────────────────────────────────────────────────────── */\n\ninterface AgentManagerInputAreaProps {\n  agentId: string;\n  sessionId: string;\n  onSend: (text: string, attachments?: File[]) => void;\n  onCancel?: () => void;\n  mcpServers?: McpServer[];\n  agentTunnelUrl?: string;\n  agentApiKey?: string;\n}\n\nexport function AgentManagerInputArea({\n  agentId,\n  sessionId,\n  onSend,\n  onCancel,\n  mcpServers = [],\n  agentTunnelUrl,\n  agentApiKey,\n}: AgentManagerInputAreaProps) {\n  const [text, setText] = useState('');\n  const [pendingFiles, setPendingFiles] = useState<File[]>([]);\n  const [showSlashMenu, setShowSlashMenu] = useState(false);\n  const [slashFilter, setSlashFilter] = useState('');\n  const [showScheduleMenu, setShowScheduleMenu] = useState(false);\n  const [showSchedulePopup, setShowSchedulePopup] = useState(false);\n  const [scheduleDateTime, setScheduleDateTime] = useState('');\n  const [providers, setProviders] = useState<AIProvider[]>([]);\n  const tr = useTr();\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const scheduleMenuRef = useRef<HTMLDivElement>(null);\n\n  // Auto-focus textarea when session is opened or switched\n  useEffect(() => {\n    textareaRef.current?.focus({ preventScroll: true });\n  }, []);\n\n  const sessionState = useAgentManagerStore((s) => s.sessionStates[sessionId]);\n  const setSessionModel = useAgentManagerStore((s) => s.setSessionModel);\n  const setSessionSdk = useAgentManagerStore((s) => s.setSessionSdk);\n  const setSessionMode = useAgentManagerStore((s) => s.setSessionMode);\n  const toggleVoice = useAgentManagerStore((s) => s.toggleVoice);\n  const toggleThinking = useAgentManagerStore((s) => s.toggleThinking);\n  const setSessionContextLevel = useAgentManagerStore((s) => s.setSessionContextLevel);\n  const setSessionVibe = useAgentManagerStore((s) => s.setSessionVibe);\n  const setSessionRootPath = useAgentManagerStore((s) => s.setSessionRootPath);\n  const openSession = useAgentManagerStore((s) => s.openSession);\n  const addMessage = useAgentManagerStore((s) => s.addMessage);\n\n  const { vibes } = useCachedInitialData();\n\n  const { isListening, transcript, startListening, stopListening } = useVoiceMode();\n\n  const isStreaming = sessionState?.status === 'streaming';\n  const canSend = text.trim().length > 0 && !isStreaming;\n\n  // Append voice transcript to textarea\n  useEffect(() => {\n    if (transcript && isListening) {\n      setText((prev) => prev + (prev ? ' ' : '') + transcript);\n    }\n  }, [transcript, isListening]);\n\n  useEffect(() => {\n    let cancelled = false;\n    void fetchProviders(agentId)\n      .then((items) => {\n        if (!cancelled) setProviders(items);\n      })\n      .catch(() => {\n        if (!cancelled) setProviders([]);\n      });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [agentId]);\n\n  // ── Slash command filtering ──\n  useEffect(() => {\n    if (text.startsWith('/') && !text.includes(' ')) {\n      setShowSlashMenu(true);\n      setSlashFilter(text.slice(1));\n    } else {\n      setShowSlashMenu(false);\n    }\n  }, [text]);\n\n  const filteredCommands = useMemo(\n    () =>\n      SLASH_COMMANDS.filter((cmd) =>\n        cmd.command.toLowerCase().includes(`/${slashFilter.toLowerCase()}`)\n      ),\n    [slashFilter]\n  );\n\n  // Auto-resize textarea\n  useEffect(() => {\n    const el = textareaRef.current;\n    if (!el) return;\n    el.style.height = 'auto';\n    const maxRows = 10;\n    const lineHeight = 20;\n    const maxHeight = maxRows * lineHeight;\n    el.style.height = `${Math.min(el.scrollHeight, maxHeight)}px`;\n  }, [text]);\n\n  // Close schedule menu on outside click\n  useEffect(() => {\n    if (!showScheduleMenu && !showSchedulePopup) return;\n    const handler = (e: MouseEvent) => {\n      if (scheduleMenuRef.current && !scheduleMenuRef.current.contains(e.target as Node)) {\n        setShowScheduleMenu(false);\n        setShowSchedulePopup(false);\n      }\n    };\n    document.addEventListener('mousedown', handler);\n    return () => document.removeEventListener('mousedown', handler);\n  }, [showScheduleMenu, showSchedulePopup]);\n\n  const addSystemMessage = useCallback(\n    (content: string) => {\n      addMessage(sessionId, {\n        id: `sys-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,\n        role: 'system',\n        content,\n        timestamp: new Date().toISOString(),\n      });\n    },\n    [addMessage, sessionId]\n  );\n\n  const handleScheduleSend = useCallback(async () => {\n    if (!text.trim() || !scheduleDateTime || !agentTunnelUrl || !agentApiKey) return;\n    try {\n      const result = await schedulePrompt({\n        sessionId,\n        agentTunnelUrl,\n        agentApiKey,\n        prompt: text.trim(),\n        scheduledAt: new Date(scheduleDateTime).toISOString(),\n      });\n      addSystemMessage(\n        `Prompt scheduled for ${new Date(result.scheduledAt).toLocaleString()} (Job: ${result.jobId.slice(0, 8)})`\n      );\n      setText('');\n      setScheduleDateTime('');\n      setShowSchedulePopup(false);\n      setShowScheduleMenu(false);\n    } catch (err) {\n      addSystemMessage(\n        `Failed to schedule: ${err instanceof Error ? err.message : 'Unknown error'}`\n      );\n    }\n  }, [text, scheduleDateTime, agentTunnelUrl, agentApiKey, sessionId, addSystemMessage]);\n\n  const executeSlashCommand = useCallback(\n    (input: string) => {\n      const parts = input.trim().split(/\\s+/);\n      const cmd = parts[0].toLowerCase();\n      const arg = parts.slice(1).join(' ');\n\n      switch (cmd) {\n        case '/new': {\n          const newId = `session-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;\n          openSession(newId);\n          break;\n        }\n        case '/rename':\n          if (arg) {\n            addSystemMessage(`Session renamed to \"${arg}\".`);\n          } else {\n            addSystemMessage('Usage: /rename <name>');\n          }\n          break;\n        case '/model':\n          if (arg) {\n            setSessionModel(sessionId, arg);\n            addSystemMessage(`Model switched to \"${arg}\".`);\n          } else {\n            addSystemMessage('Usage: /model <model-name>');\n          }\n          break;\n        case '/sdk':\n          if (arg && VALID_SDKS.includes(arg as AgentSdkType)) {\n            setSessionSdk(sessionId, arg as AgentSdkType);\n            addSystemMessage(`SDK switched to \"${arg}\".`);\n          } else {\n            addSystemMessage(`Usage: /sdk <${VALID_SDKS.join('|')}>`);\n          }\n          break;\n        case '/mode':\n          if (arg && VALID_MODES.includes(arg as ProviderMode)) {\n            setSessionMode(sessionId, arg as ProviderMode);\n            addSystemMessage(`Mode switched to \"${arg}\".`);\n          } else {\n            addSystemMessage(`Usage: /mode <${VALID_MODES.join('|')}>`);\n          }\n          break;\n        case '/export': {\n          const format = arg === 'md' ? 'md' : 'json';\n          const messages = sessionState?.messages ?? [];\n          const exported =\n            format === 'json'\n              ? JSON.stringify(messages, null, 2)\n              : messages\n                  .map((m) => `**${m.role}** (${m.timestamp ?? ''}):\\n${m.content ?? ''}`)\n                  .join('\\n\\n---\\n\\n');\n          const blob = new Blob([exported], {\n            type: format === 'json' ? 'application/json' : 'text/markdown',\n          });\n          const url = URL.createObjectURL(blob);\n          const a = document.createElement('a');\n          a.href = url;\n          a.download = `conversation-${sessionId}.${format}`;\n          a.click();\n          URL.revokeObjectURL(url);\n          addSystemMessage(`Conversation exported as ${format}.`);\n          break;\n        }\n        case '/clear':\n          addSystemMessage('Conversation cleared.');\n          break;\n        case '/help': {\n          const helpText = SLASH_COMMANDS.map(\n            (c) => `  ${c.command}${c.args ? ' ' + c.args : ''} - ${c.description}`\n          ).join('\\n');\n          addSystemMessage(`Available commands:\\n${helpText}`);\n          break;\n        }\n        default:\n          addSystemMessage(`Unknown command: ${cmd}. Type /help for available commands.`);\n      }\n    },\n    [\n      sessionId,\n      sessionState?.messages,\n      openSession,\n      setSessionModel,\n      setSessionSdk,\n      setSessionMode,\n      addSystemMessage,\n    ]\n  );\n\n  const handleSlashSelect = useCallback(\n    (cmd: SlashCommand) => {\n      // If command takes args, fill the text and let user type args\n      if (cmd.args) {\n        setText(`${cmd.command} `);\n      } else {\n        executeSlashCommand(cmd.command);\n        setText('');\n      }\n      setShowSlashMenu(false);\n      textareaRef.current?.focus();\n    },\n    [executeSlashCommand]\n  );\n\n  const handleSend = useCallback(() => {\n    if (!canSend) return;\n\n    const trimmed = text.trim();\n\n    // Handle slash commands locally\n    if (trimmed.startsWith('/')) {\n      executeSlashCommand(trimmed);\n      setText('');\n      setPendingFiles([]);\n      return;\n    }\n\n    onSend(trimmed, pendingFiles.length > 0 ? pendingFiles : undefined);\n    setText('');\n    setPendingFiles([]);\n  }, [canSend, text, pendingFiles, onSend, executeSlashCommand]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLTextAreaElement>) => {\n      // Enter sends, Shift+Enter inserts newline\n      if (e.key === 'Enter' && !e.shiftKey) {\n        e.preventDefault();\n        handleSend();\n      }\n    },\n    [handleSend]\n  );\n\n  const handleCancel = useCallback(() => {\n    onCancel?.();\n  }, [onCancel]);\n\n  const handleFileSelect = useCallback((files: File[]) => {\n    setPendingFiles((prev) => [...prev, ...files]);\n  }, []);\n\n  const removeFile = useCallback((index: number) => {\n    setPendingFiles((prev) => prev.filter((_, i) => i !== index));\n  }, []);\n\n  const dropHandlers = createDropHandlers(handleFileSelect);\n\n  if (!sessionState) return null;\n\n  return (\n    <div className=\"relative z-30 border-t border-border-default bg-bg-surface\" {...dropHandlers}>\n      {/* Slash command popup */}\n      {showSlashMenu && filteredCommands.length > 0 && (\n        <div className=\"absolute bottom-full left-0 right-0 mb-1 mx-3 bg-bg-elevated border border-border-default rounded-lg shadow-lg max-h-48 overflow-y-auto z-50\">\n          {filteredCommands.map((cmd) => (\n            <button\n              key={cmd.command}\n              type=\"button\"\n              onClick={() => handleSlashSelect(cmd)}\n              className=\"flex items-center gap-2 w-full px-3 py-2 text-left hover:bg-bg-sunken transition-colors\"\n            >\n              <span className=\"font-mono text-xs text-text-primary\">{cmd.command}</span>\n              {cmd.args && <span className=\"text-text-tertiary text-xs\">{cmd.args}</span>}\n              <span className=\"text-text-secondary text-xs ml-auto\">{cmd.description}</span>\n            </button>\n          ))}\n        </div>\n      )}\n\n      {/* File attachment preview row */}\n      {pendingFiles.length > 0 && (\n        <div className=\"flex items-center gap-2 px-3 pt-2 overflow-x-auto\">\n          {pendingFiles.map((file, index) => (\n            <div\n              key={`${file.name}-${index}`}\n              className=\"flex items-center gap-1.5 px-2 py-1 rounded-md bg-bg-elevated border border-border-default text-xs text-text-secondary\"\n            >\n              <span className=\"truncate max-w-[120px]\">{file.name}</span>\n              <button\n                type=\"button\"\n                onClick={() => removeFile(index)}\n                className=\"p-0.5 rounded hover:bg-bg-sunken transition-colors flex-shrink-0\"\n              >\n                <X className=\"w-3 h-3\" />\n              </button>\n            </div>\n          ))}\n        </div>\n      )}\n\n      {/* Toolbar row */}\n      <div className=\"flex flex-wrap items-center gap-1 px-3 pt-2 pb-1 overflow-x-auto\">\n        <SdkSelector\n          sdk={sessionState.sdk}\n          mode={sessionState.mode}\n          providers={providers}\n          onSdkChange={(sdk) => {\n            setSessionSdk(sessionId, sdk);\n            setSessionModel(sessionId, MODEL_DEFAULTS[sdk] || 'default');\n          }}\n          onModeChange={(mode) => setSessionMode(sessionId, mode)}\n        />\n        <ModelSelector\n          value={sessionState.model}\n          onChange={(model) => setSessionModel(sessionId, model)}\n          provider={sessionState.sdk}\n        />\n        <McpServerSelector\n          selected={sessionState.mcpServers}\n          available={mcpServers}\n          onChange={() => {\n            // Update via store -- MCP servers are part of session state\n            // For now we store them directly\n          }}\n        />\n        <ContextLevelToggle\n          agentId=\"\"\n          sessionId={sessionId}\n          contextLevel={sessionState.contextLevel}\n          rootPath={sessionState.rootPath}\n          onChange={(level, rootPath, vibeId) => {\n            setSessionContextLevel(sessionId, level);\n            setSessionRootPath(sessionId, rootPath ?? null);\n            setSessionVibe(sessionId, vibeId ?? null, rootPath ?? null);\n          }}\n          vibes={vibes.map((v) => ({ id: v.id, name: v.name, path: v.path }))}\n        />\n\n        <div className=\"flex-1\" />\n\n        {/* Show Thinking toggle */}\n        <button\n          type=\"button\"\n          onClick={() => toggleThinking(sessionId)}\n          className={`p-1.5 rounded text-xs font-medium transition-colors ${\n            sessionState.showThinking\n              ? 'bg-action-primary-bg/10 text-action-primary-text'\n              : 'text-text-tertiary hover:text-text-secondary'\n          }`}\n          title={\n            sessionState.showThinking\n              ? tr('vibecontrols.agentManager.inputArea.hideThinking', 'Hide thinking')\n              : tr('vibecontrols.agentManager.inputArea.showThinking', 'Show thinking')\n          }\n        >\n          Think\n        </button>\n        {/* Context history limit */}\n        <button\n          type=\"button\"\n          onClick={() => {\n            const val = window.prompt(\n              'Context history limit (messages sent with each prompt):',\n              String(sessionState.contextHistoryLimit)\n            );\n            if (val !== null) {\n              const num = parseInt(val, 10);\n              if (!isNaN(num) && num >= 0) {\n                const store = useAgentManagerStore.getState();\n                const s = store.sessionStates[sessionId];\n                if (s) {\n                  useAgentManagerStore.setState((prev) => ({\n                    sessionStates: {\n                      ...prev.sessionStates,\n                      [sessionId]: { ...s, contextHistoryLimit: num },\n                    },\n                  }));\n                }\n              }\n            }\n          }}\n          className=\"p-1.5 rounded text-[10px] font-mono text-text-tertiary hover:text-text-secondary transition-colors\"\n          title={`Context history: last ${sessionState.contextHistoryLimit} messages sent with each prompt`}\n        >\n          H:{sessionState.contextHistoryLimit}\n        </button>\n        <VoiceToggle\n          enabled={sessionState.voiceEnabled}\n          onToggle={() => {\n            toggleVoice(sessionId);\n            if (!sessionState.voiceEnabled) startListening();\n            else stopListening();\n          }}\n          isListening={isListening}\n        />\n        <FileAttachButton onFileSelect={handleFileSelect} />\n      </div>\n\n      {/* Textarea + send/cancel */}\n      <div className=\"flex items-end gap-2 px-3 pb-3 pt-1\">\n        <textarea\n          ref={textareaRef}\n          value={text}\n          onChange={(e) => setText(e.target.value)}\n          onKeyDown={handleKeyDown}\n          placeholder={tr(\n            'vibecontrols.agentManager.inputArea.placeholder',\n            'Type a message or / for commands... (Enter to send)'\n          )}\n          rows={1}\n          className=\"flex-1 resize-none rounded-lg border border-border-default bg-bg-primary px-3 py-2 text-sm text-text-primary placeholder:text-text-tertiary focus:outline-none focus:border-border-strong transition-colors\"\n          disabled={isStreaming}\n        />\n        {isStreaming ? (\n          <button\n            type=\"button\"\n            onClick={handleCancel}\n            className=\"flex-shrink-0 p-2 rounded-lg bg-status-error-bg text-status-error-text hover:opacity-90 transition-opacity\"\n            title={tr('vibecontrols.agentManager.inputArea.cancel', 'Cancel')}\n          >\n            <Square className=\"w-4 h-4\" />\n          </button>\n        ) : (\n          <div className=\"flex items-end flex-shrink-0 relative\" ref={scheduleMenuRef}>\n            <button\n              type=\"button\"\n              onClick={handleSend}\n              disabled={!canSend}\n              className=\"p-2 rounded-l-lg bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover disabled:opacity-40 disabled:cursor-not-allowed transition-colors\"\n              title={tr('vibecontrols.agentManager.inputArea.send', 'Send (Enter)')}\n            >\n              <ArrowUp className=\"w-4 h-4\" />\n            </button>\n            <button\n              type=\"button\"\n              onClick={() => setShowScheduleMenu(!showScheduleMenu)}\n              disabled={!canSend}\n              className=\"ml-1 p-2 rounded-r-lg border-l border-action-primary-text/20 bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover disabled:opacity-40 disabled:cursor-not-allowed transition-colors\"\n              title={tr('vibecontrols.agentManager.inputArea.scheduleSend', 'Schedule send')}\n            >\n              <ChevronDown className=\"w-3 h-3\" />\n            </button>\n\n            {/* Schedule dropdown */}\n            {showScheduleMenu && (\n              <div className=\"absolute bottom-full right-0 mb-1 w-56 bg-bg-surface border border-border-default rounded-md shadow-lg py-1 z-50\">\n                {!showSchedulePopup ? (\n                  <button\n                    type=\"button\"\n                    onClick={() => setShowSchedulePopup(true)}\n                    className=\"flex items-center gap-2 w-full px-3 py-2 text-left text-xs text-text-primary hover:bg-bg-sunken transition-colors\"\n                  >\n                    <Clock className=\"w-3.5 h-3.5 text-text-secondary\" />\n                    {tr(\n                      'vibecontrols.agentManager.inputArea.scheduleSendEllipsis',\n                      'Schedule Send...'\n                    )}\n                  </button>\n                ) : (\n                  <div className=\"px-3 py-2 space-y-2\">\n                    <label className=\"block text-[11px] font-medium text-text-secondary\">\n                      {tr('vibecontrols.agentManager.inputArea.sendAt', 'Send at:')}\n                    </label>\n                    <input\n                      type=\"datetime-local\"\n                      value={scheduleDateTime}\n                      onChange={(e) => setScheduleDateTime(e.target.value)}\n                      className=\"w-full px-2 py-1 text-xs rounded border border-border-default bg-bg-primary text-text-primary focus:outline-none focus:border-border-strong\"\n                    />\n                    <button\n                      type=\"button\"\n                      onClick={() => void handleScheduleSend()}\n                      disabled={!scheduleDateTime || !agentTunnelUrl || !agentApiKey}\n                      className=\"w-full px-2 py-1.5 text-xs font-medium rounded bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover disabled:opacity-40 disabled:cursor-not-allowed transition-colors\"\n                    >\n                      {tr('vibecontrols.agentManager.inputArea.schedule', 'Schedule')}\n                    </button>\n                  </div>\n                )}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/agent-manager/AgentManagerLayout.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+
+interface AgentManagerLayoutProps {
+    sidebar: ReactNode;
+    children: ReactNode;
+    detailPanel?: ReactNode;
+}
+export declare function AgentManagerLayout({ sidebar, children, detailPanel }: AgentManagerLayoutProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AgentManagerLayout.d.ts.map

package/dist/components/agent-manager/AgentManagerLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentManagerLayout.d.ts","sourceRoot":"","sources":["../../../src/components/agent-manager/AgentManagerLayout.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,UAAU,uBAAuB;IAC/B,OAAO,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,uBAAuB,2CAgH7F"}

package/dist/components/agent-manager/AgentManagerLayout.js

@@ -0,0 +1,137 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { useAgentManagerStore as t } from "../../store/agentManagerStore.js";
+import { PanelLeftClose as n, PanelLeftOpen as r, PanelRightClose as i, PanelRightOpen as a } from "lucide-react";
+import { AnimatePresence as o, motion as s } from "framer-motion";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/agent-manager/AgentManagerLayout.tsx
+function d({ sidebar: d, children: f, detailPanel: p }) {
+	let m = t((e) => e.sidebarOpen), h = t((e) => e.detailPanelOpen), g = t((e) => e.toggleSidebar), _ = t((e) => e.toggleDetailPanel), v = t((e) => e.isFullscreen), y = e();
+	return /* @__PURE__ */ u("div", {
+		className: "flex h-full min-h-0 overflow-hidden",
+		children: [
+			!m && !v && /* @__PURE__ */ l("div", {
+				className: "flex-shrink-0 border-r border-border-default bg-bg-surface",
+				children: /* @__PURE__ */ l("button", {
+					onClick: g,
+					className: "p-2 m-1 rounded hover:bg-bg-elevated transition-colors text-text-secondary hover:text-text-primary",
+					title: y("vibecontrols.agentManager.layout.openSidebar", "Open sidebar"),
+					children: /* @__PURE__ */ l(r, { className: "w-4 h-4" })
+				})
+			}),
+			/* @__PURE__ */ l(o, {
+				initial: !1,
+				children: m && !v && /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(s.div, {
+					initial: { opacity: 0 },
+					animate: { opacity: 1 },
+					exit: { opacity: 0 },
+					transition: { duration: .15 },
+					className: "fixed inset-0 bg-bg-overlay z-30 md:hidden",
+					onClick: g
+				}), /* @__PURE__ */ l(s.aside, {
+					initial: {
+						width: 0,
+						opacity: 0
+					},
+					animate: {
+						width: 280,
+						opacity: 1
+					},
+					exit: {
+						width: 0,
+						opacity: 0
+					},
+					transition: {
+						duration: .2,
+						ease: [
+							.4,
+							0,
+							.2,
+							1
+						]
+					},
+					className: "fixed md:relative z-40 md:z-auto inset-y-0 left-0 md:inset-auto flex-shrink-0 border-r border-border-default bg-bg-surface overflow-hidden w-full md:w-[280px]",
+					children: /* @__PURE__ */ u("div", {
+						className: "flex flex-col h-full w-[280px]",
+						children: [/* @__PURE__ */ u("div", {
+							className: "flex items-center justify-between px-3 py-2 border-b border-border-default",
+							children: [/* @__PURE__ */ l("span", {
+								className: "text-xs font-semibold uppercase tracking-wider text-text-secondary",
+								children: y("vibecontrols.agentManager.layout.sessions", "Sessions")
+							}), /* @__PURE__ */ l("button", {
+								onClick: g,
+								className: "p-1 rounded hover:bg-bg-elevated transition-colors text-text-secondary hover:text-text-primary",
+								title: y("vibecontrols.agentManager.layout.closeSidebar", "Close sidebar"),
+								children: /* @__PURE__ */ l(n, { className: "w-4 h-4" })
+							})]
+						}), /* @__PURE__ */ l("div", {
+							className: "flex-1 overflow-y-auto overflow-x-hidden",
+							children: d
+						})]
+					})
+				})] })
+			}),
+			/* @__PURE__ */ l("main", {
+				className: "flex flex-col flex-1 min-w-0 overflow-hidden bg-bg-primary",
+				children: f
+			}),
+			!h && p && !v && /* @__PURE__ */ l("div", {
+				className: "hidden md:block flex-shrink-0 border-l border-border-default bg-bg-surface",
+				children: /* @__PURE__ */ l("button", {
+					onClick: _,
+					className: "p-2 m-1 rounded hover:bg-bg-elevated transition-colors text-text-secondary hover:text-text-primary",
+					title: y("vibecontrols.agentManager.layout.openDetailPanel", "Open detail panel"),
+					children: /* @__PURE__ */ l(a, { className: "w-4 h-4" })
+				})
+			}),
+			/* @__PURE__ */ l(o, {
+				initial: !1,
+				children: h && p && !v && /* @__PURE__ */ l(s.aside, {
+					initial: {
+						width: 0,
+						opacity: 0
+					},
+					animate: {
+						width: 320,
+						opacity: 1
+					},
+					exit: {
+						width: 0,
+						opacity: 0
+					},
+					transition: {
+						duration: .2,
+						ease: [
+							.4,
+							0,
+							.2,
+							1
+						]
+					},
+					className: "hidden md:block flex-shrink-0 border-l border-border-default bg-bg-surface overflow-hidden",
+					children: /* @__PURE__ */ u("div", {
+						className: "flex flex-col h-full w-[320px]",
+						children: [/* @__PURE__ */ u("div", {
+							className: "flex items-center justify-between px-3 py-2 border-b border-border-default",
+							children: [/* @__PURE__ */ l("span", {
+								className: "text-xs font-semibold uppercase tracking-wider text-text-secondary",
+								children: y("vibecontrols.agentManager.layout.details", "Details")
+							}), /* @__PURE__ */ l("button", {
+								onClick: _,
+								className: "p-1 rounded hover:bg-bg-elevated transition-colors text-text-secondary hover:text-text-primary",
+								title: y("vibecontrols.agentManager.layout.closeDetailPanel", "Close detail panel"),
+								children: /* @__PURE__ */ l(i, { className: "w-4 h-4" })
+							})]
+						}), /* @__PURE__ */ l("div", {
+							className: "flex-1 overflow-y-auto overflow-x-hidden",
+							children: p
+						})]
+					})
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { d as AgentManagerLayout };
+
+//# sourceMappingURL=AgentManagerLayout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AgentManagerLayout.js","names":[],"sources":["../../../src/components/agent-manager/AgentManagerLayout.tsx"],"sourcesContent":["/**\n * Three-pane layout for the Agent Manager.\n *\n * Left: session sidebar (280px, collapsible)\n * Center: main content area (flex-1)\n * Right: detail panel (320px, collapsible)\n */\n\nimport type { ReactNode } from 'react';\nimport { PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen } from 'lucide-react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { useAgentManagerStore } from '@/store/agentManagerStore';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface AgentManagerLayoutProps {\n  sidebar: ReactNode;\n  children: ReactNode;\n  detailPanel?: ReactNode;\n}\n\nexport function AgentManagerLayout({ sidebar, children, detailPanel }: AgentManagerLayoutProps) {\n  const sidebarOpen = useAgentManagerStore((s) => s.sidebarOpen);\n  const detailPanelOpen = useAgentManagerStore((s) => s.detailPanelOpen);\n  const toggleSidebar = useAgentManagerStore((s) => s.toggleSidebar);\n  const toggleDetailPanel = useAgentManagerStore((s) => s.toggleDetailPanel);\n  const isFullscreen = useAgentManagerStore((s) => s.isFullscreen);\n  const tr = useTr();\n\n  return (\n    <div className=\"flex h-full min-h-0 overflow-hidden\">\n      {/* Sidebar toggle (visible when sidebar is closed, hidden in fullscreen) */}\n      {!sidebarOpen && !isFullscreen && (\n        <div className=\"flex-shrink-0 border-r border-border-default bg-bg-surface\">\n          <button\n            onClick={toggleSidebar}\n            className=\"p-2 m-1 rounded hover:bg-bg-elevated transition-colors text-text-secondary hover:text-text-primary\"\n            title={tr('vibecontrols.agentManager.layout.openSidebar', 'Open sidebar')}\n          >\n            <PanelLeftOpen className=\"w-4 h-4\" />\n          </button>\n        </div>\n      )}\n\n      {/* Left sidebar — hidden in fullscreen */}\n      <AnimatePresence initial={false}>\n        {sidebarOpen && !isFullscreen && (\n          <>\n            {/* Mobile overlay backdrop */}\n            <motion.div\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={{ duration: 0.15 }}\n              className=\"fixed inset-0 bg-bg-overlay z-30 md:hidden\"\n              onClick={toggleSidebar}\n            />\n            <motion.aside\n              initial={{ width: 0, opacity: 0 }}\n              animate={{ width: 280, opacity: 1 }}\n              exit={{ width: 0, opacity: 0 }}\n              transition={{ duration: 0.2, ease: [0.4, 0, 0.2, 1] }}\n              className=\"fixed md:relative z-40 md:z-auto inset-y-0 left-0 md:inset-auto flex-shrink-0 border-r border-border-default bg-bg-surface overflow-hidden w-full md:w-[280px]\"\n            >\n              <div className=\"flex flex-col h-full w-[280px]\">\n                <div className=\"flex items-center justify-between px-3 py-2 border-b border-border-default\">\n                  <span className=\"text-xs font-semibold uppercase tracking-wider text-text-secondary\">\n                    {tr('vibecontrols.agentManager.layout.sessions', 'Sessions')}\n                  </span>\n                  <button\n                    onClick={toggleSidebar}\n                    className=\"p-1 rounded hover:bg-bg-elevated transition-colors text-text-secondary hover:text-text-primary\"\n                    title={tr('vibecontrols.agentManager.layout.closeSidebar', 'Close sidebar')}\n                  >\n                    <PanelLeftClose className=\"w-4 h-4\" />\n                  </button>\n                </div>\n                <div className=\"flex-1 overflow-y-auto overflow-x-hidden\">{sidebar}</div>\n              </div>\n            </motion.aside>\n          </>\n        )}\n      </AnimatePresence>\n\n      {/* Center content */}\n      <main className=\"flex flex-col flex-1 min-w-0 overflow-hidden bg-bg-primary\">{children}</main>\n\n      {/* Detail panel toggle (visible when panel is closed, hidden on mobile, hidden in fullscreen) */}\n      {!detailPanelOpen && detailPanel && !isFullscreen && (\n        <div className=\"hidden md:block flex-shrink-0 border-l border-border-default bg-bg-surface\">\n          <button\n            onClick={toggleDetailPanel}\n            className=\"p-2 m-1 rounded hover:bg-bg-elevated transition-colors text-text-secondary hover:text-text-primary\"\n            title={tr('vibecontrols.agentManager.layout.openDetailPanel', 'Open detail panel')}\n          >\n            <PanelRightOpen className=\"w-4 h-4\" />\n          </button>\n        </div>\n      )}\n\n      {/* Right detail panel (hidden on mobile, hidden in fullscreen) */}\n      <AnimatePresence initial={false}>\n        {detailPanelOpen && detailPanel && !isFullscreen && (\n          <motion.aside\n            initial={{ width: 0, opacity: 0 }}\n            animate={{ width: 320, opacity: 1 }}\n            exit={{ width: 0, opacity: 0 }}\n            transition={{ duration: 0.2, ease: [0.4, 0, 0.2, 1] }}\n            className=\"hidden md:block flex-shrink-0 border-l border-border-default bg-bg-surface overflow-hidden\"\n          >\n            <div className=\"flex flex-col h-full w-[320px]\">\n              <div className=\"flex items-center justify-between px-3 py-2 border-b border-border-default\">\n                <span className=\"text-xs font-semibold uppercase tracking-wider text-text-secondary\">\n                  {tr('vibecontrols.agentManager.layout.details', 'Details')}\n                </span>\n                <button\n                  onClick={toggleDetailPanel}\n                  className=\"p-1 rounded hover:bg-bg-elevated transition-colors text-text-secondary hover:text-text-primary\"\n                  title={tr(\n                    'vibecontrols.agentManager.layout.closeDetailPanel',\n                    'Close detail panel'\n                  )}\n                >\n                  <PanelRightClose className=\"w-4 h-4\" />\n                </button>\n              </div>\n              <div className=\"flex-1 overflow-y-auto overflow-x-hidden\">{detailPanel}</div>\n            </div>\n          </motion.aside>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAoBA,SAAgB,EAAmB,EAAE,YAAS,aAAU,kBAAwC;CAC9F,IAAM,IAAc,GAAsB,MAAM,EAAE,YAAY,EACxD,IAAkB,GAAsB,MAAM,EAAE,gBAAgB,EAChE,IAAgB,GAAsB,MAAM,EAAE,cAAc,EAC5D,IAAoB,GAAsB,MAAM,EAAE,kBAAkB,EACpE,IAAe,GAAsB,MAAM,EAAE,aAAa,EAC1D,IAAK,GAAO;AAElB,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GAEG,CAAC,KAAe,CAAC,KAChB,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,UAAD;KACE,SAAS;KACT,WAAU;KACV,OAAO,EAAG,gDAAgD,eAAe;eAEzE,kBAAC,GAAD,EAAe,WAAU,WAAY,CAAA;KAC9B,CAAA;IACL,CAAA;GAIR,kBAAC,GAAD;IAAiB,SAAS;cACvB,KAAe,CAAC,KACf,kBAAA,GAAA,EAAA,UAAA,CAEE,kBAAC,EAAO,KAAR;KACE,SAAS,EAAE,SAAS,GAAG;KACvB,SAAS,EAAE,SAAS,GAAG;KACvB,MAAM,EAAE,SAAS,GAAG;KACpB,YAAY,EAAE,UAAU,KAAM;KAC9B,WAAU;KACV,SAAS;KACT,CAAA,EACF,kBAAC,EAAO,OAAR;KACE,SAAS;MAAE,OAAO;MAAG,SAAS;MAAG;KACjC,SAAS;MAAE,OAAO;MAAK,SAAS;MAAG;KACnC,MAAM;MAAE,OAAO;MAAG,SAAS;MAAG;KAC9B,YAAY;MAAE,UAAU;MAAK,MAAM;OAAC;OAAK;OAAG;OAAK;OAAE;MAAE;KACrD,WAAU;eAEV,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,QAAD;QAAM,WAAU;kBACb,EAAG,6CAA6C,WAAW;QACvD,CAAA,EACP,kBAAC,UAAD;QACE,SAAS;QACT,WAAU;QACV,OAAO,EAAG,iDAAiD,gBAAgB;kBAE3E,kBAAC,GAAD,EAAgB,WAAU,WAAY,CAAA;QAC/B,CAAA,CACL;UACN,kBAAC,OAAD;OAAK,WAAU;iBAA4C;OAAc,CAAA,CACrE;;KACO,CAAA,CACd,EAAA,CAAA;IAEW,CAAA;GAGlB,kBAAC,QAAD;IAAM,WAAU;IAA8D;IAAgB,CAAA;GAG7F,CAAC,KAAmB,KAAe,CAAC,KACnC,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,UAAD;KACE,SAAS;KACT,WAAU;KACV,OAAO,EAAG,oDAAoD,oBAAoB;eAElF,kBAAC,GAAD,EAAgB,WAAU,WAAY,CAAA;KAC/B,CAAA;IACL,CAAA;GAIR,kBAAC,GAAD;IAAiB,SAAS;cACvB,KAAmB,KAAe,CAAC,KAClC,kBAAC,EAAO,OAAR;KACE,SAAS;MAAE,OAAO;MAAG,SAAS;MAAG;KACjC,SAAS;MAAE,OAAO;MAAK,SAAS;MAAG;KACnC,MAAM;MAAE,OAAO;MAAG,SAAS;MAAG;KAC9B,YAAY;MAAE,UAAU;MAAK,MAAM;OAAC;OAAK;OAAG;OAAK;OAAE;MAAE;KACrD,WAAU;eAEV,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,QAAD;QAAM,WAAU;kBACb,EAAG,4CAA4C,UAAU;QACrD,CAAA,EACP,kBAAC,UAAD;QACE,SAAS;QACT,WAAU;QACV,OAAO,EACL,qDACA,qBACD;kBAED,kBAAC,GAAD,EAAiB,WAAU,WAAY,CAAA;QAChC,CAAA,CACL;UACN,kBAAC,OAAD;OAAK,WAAU;iBAA4C;OAAkB,CAAA,CACzE;;KACO,CAAA;IAED,CAAA;GACd"}

package/dist/components/agent-manager/AgentManagerMessageItem.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { AgentManagerMessage } from '../../types/agentManager';
+
+interface AgentManagerMessageItemProps {
+    message: AgentManagerMessage;
+    searchQuery?: string;
+}
+export declare const AgentManagerMessageItem: FC<AgentManagerMessageItemProps>;
+export {};
+//# sourceMappingURL=AgentManagerMessageItem.d.ts.map

package/dist/components/agent-manager/AgentManagerMessageItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentManagerMessageItem.d.ts","sourceRoot":"","sources":["../../../src/components/agent-manager/AgentManagerMessageItem.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAY,KAAK,EAAE,EAAkB,MAAM,OAAO,CAAC;AAI1D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAoChE,UAAU,4BAA4B;IACpC,OAAO,EAAE,mBAAmB,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CAoGpE,CAAC"}

package/dist/components/agent-manager/AgentManagerMessageItem.js

@@ -0,0 +1,65 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { AssistantMarkdownRenderer as t } from "../assistant/AssistantMarkdownRenderer.js";
+import { relativeTime as n } from "../../utils/relativeTime.js";
+import { useState as r } from "react";
+import { Bot as i, Check as a, Copy as o, User as s } from "lucide-react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/agent-manager/AgentManagerMessageItem.tsx
+function d(e, t) {
+	if (!t) return e;
+	let n = e.toLowerCase(), r = t.toLowerCase(), i = [], a = 0, o = n.indexOf(r, a);
+	for (; o !== -1;) o > a && i.push(e.slice(a, o)), i.push(/* @__PURE__ */ l("mark", {
+		className: "bg-status-warning-bg text-status-warning-text rounded-sm px-0.5",
+		children: e.slice(o, o + t.length)
+	}, o)), a = o + t.length, o = n.indexOf(r, a);
+	return a < e.length && i.push(e.slice(a)), i.length > 0 ? /* @__PURE__ */ l(c, { children: i }) : e;
+}
+var f = ({ message: c, searchQuery: f = "" }) => {
+	let [p, m] = r(!1), [h, g] = r(!1), _ = c.role === "user", v = e(), y = () => {
+		navigator.clipboard.writeText(c.content), m(!0), setTimeout(() => m(!1), 2e3);
+	}, b = c.tokens ? c.tokens.input + c.tokens.output : null;
+	return /* @__PURE__ */ u("div", {
+		className: `flex gap-2.5 ${_ ? "flex-row-reverse" : "flex-row"}`,
+		onMouseEnter: () => g(!0),
+		onMouseLeave: () => g(!1),
+		children: [/* @__PURE__ */ l("div", {
+			className: `flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center mt-0.5 ${_ ? "bg-action-primary-bg" : "bg-bg-elevated border border-border-default"}`,
+			children: _ ? /* @__PURE__ */ l(s, { className: "w-3.5 h-3.5 text-action-primary-text" }) : /* @__PURE__ */ l(i, { className: "w-3.5 h-3.5 text-text-secondary" })
+		}), /* @__PURE__ */ u("div", {
+			className: `relative max-w-[85%] rounded-lg px-3 py-2 ${_ ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-elevated border border-border-subtle"}`,
+			children: [_ ? /* @__PURE__ */ l("p", {
+				className: "text-xs whitespace-pre-wrap leading-relaxed break-words",
+				children: f ? d(c.content, f) : c.content
+			}) : f ? /* @__PURE__ */ l("p", {
+				className: "text-xs whitespace-pre-wrap leading-relaxed break-words text-text-primary",
+				children: d(c.content, f)
+			}) : /* @__PURE__ */ l(t, { content: c.content }), /* @__PURE__ */ u("div", {
+				className: `flex items-center gap-2 text-[10px] mt-1 ${_ ? "text-action-primary-text/60" : "text-text-muted"}`,
+				children: [
+					/* @__PURE__ */ l("span", { children: n(c.timestamp) }),
+					b !== null && !_ && /* @__PURE__ */ u("span", { children: [
+						b,
+						" ",
+						v("vibecontrols.agentManager.messageItem.tokens", "tokens")
+					] }),
+					c.sdk && /* @__PURE__ */ l("span", {
+						className: "px-1 py-0.5 rounded bg-bg-elevated text-text-muted uppercase font-mono text-[9px]",
+						children: c.sdk
+					}),
+					c.model && !_ && /* @__PURE__ */ l("span", { children: c.model }),
+					h && /* @__PURE__ */ l("button", {
+						onClick: y,
+						className: `ml-auto p-0.5 rounded transition-colors ${_ ? "hover:bg-action-primary-bg-hover" : "hover:bg-bg-sunken"}`,
+						"aria-label": v("vibecontrols.agentManager.messageItem.copyMessage", "Copy message"),
+						title: v("vibecontrols.agentManager.messageItem.copyMessage", "Copy message"),
+						children: p ? /* @__PURE__ */ l(a, { className: "w-3 h-3 text-status-success-text" }) : /* @__PURE__ */ l(o, { className: "w-3 h-3" })
+					})
+				]
+			})]
+		})]
+	});
+};
+//#endregion
+export { f as AgentManagerMessageItem };
+
+//# sourceMappingURL=AgentManagerMessageItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AgentManagerMessageItem.js","names":[],"sources":["../../../src/components/agent-manager/AgentManagerMessageItem.tsx"],"sourcesContent":["/**\n * Single message bubble for the Agent Manager chat.\n *\n * User messages are right-aligned; assistant messages are left-aligned.\n * Uses AssistantMarkdownRenderer for rich content in assistant messages.\n * Supports optional search query highlighting.\n */\n\nimport { useState, type FC, type ReactNode } from 'react';\nimport { Bot, Copy, Check, User } from 'lucide-react';\nimport { AssistantMarkdownRenderer } from '@/components/assistant/AssistantMarkdownRenderer';\nimport { relativeTime } from '@/utils/relativeTime';\nimport type { AgentManagerMessage } from '@/types/agentManager';\nimport { useTr } from '../../shared/hooks/useTr';\n\n/** Highlight occurrences of `query` within `text`. */\nfunction highlightText(text: string, query: string): ReactNode {\n  if (!query) return text;\n\n  const lowerText = text.toLowerCase();\n  const lowerQuery = query.toLowerCase();\n  const parts: ReactNode[] = [];\n  let lastIndex = 0;\n  let matchIndex = lowerText.indexOf(lowerQuery, lastIndex);\n\n  while (matchIndex !== -1) {\n    if (matchIndex > lastIndex) {\n      parts.push(text.slice(lastIndex, matchIndex));\n    }\n    parts.push(\n      <mark\n        key={matchIndex}\n        className=\"bg-status-warning-bg text-status-warning-text rounded-sm px-0.5\"\n      >\n        {text.slice(matchIndex, matchIndex + query.length)}\n      </mark>\n    );\n    lastIndex = matchIndex + query.length;\n    matchIndex = lowerText.indexOf(lowerQuery, lastIndex);\n  }\n\n  if (lastIndex < text.length) {\n    parts.push(text.slice(lastIndex));\n  }\n\n  return parts.length > 0 ? <>{parts}</> : text;\n}\n\ninterface AgentManagerMessageItemProps {\n  message: AgentManagerMessage;\n  searchQuery?: string;\n}\n\nexport const AgentManagerMessageItem: FC<AgentManagerMessageItemProps> = ({\n  message,\n  searchQuery = '',\n}) => {\n  const [copied, setCopied] = useState(false);\n  const [hovered, setHovered] = useState(false);\n  const isUser = message.role === 'user';\n  const tr = useTr();\n\n  const handleCopy = () => {\n    navigator.clipboard.writeText(message.content);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  };\n\n  const totalTokens = message.tokens ? message.tokens.input + message.tokens.output : null;\n\n  return (\n    <div\n      className={`flex gap-2.5 ${isUser ? 'flex-row-reverse' : 'flex-row'}`}\n      onMouseEnter={() => setHovered(true)}\n      onMouseLeave={() => setHovered(false)}\n    >\n      {/* Avatar */}\n      <div\n        className={`flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center mt-0.5 ${\n          isUser ? 'bg-action-primary-bg' : 'bg-bg-elevated border border-border-default'\n        }`}\n      >\n        {isUser ? (\n          <User className=\"w-3.5 h-3.5 text-action-primary-text\" />\n        ) : (\n          <Bot className=\"w-3.5 h-3.5 text-text-secondary\" />\n        )}\n      </div>\n\n      {/* Message bubble */}\n      <div\n        className={`relative max-w-[85%] rounded-lg px-3 py-2 ${\n          isUser\n            ? 'bg-action-primary-bg text-action-primary-text'\n            : 'bg-bg-elevated border border-border-subtle'\n        }`}\n      >\n        {/* Content */}\n        {isUser ? (\n          <p className=\"text-xs whitespace-pre-wrap leading-relaxed break-words\">\n            {searchQuery ? highlightText(message.content, searchQuery) : message.content}\n          </p>\n        ) : searchQuery ? (\n          <p className=\"text-xs whitespace-pre-wrap leading-relaxed break-words text-text-primary\">\n            {highlightText(message.content, searchQuery)}\n          </p>\n        ) : (\n          <AssistantMarkdownRenderer content={message.content} />\n        )}\n\n        {/* Footer: timestamp, tokens, copy */}\n        <div\n          className={`flex items-center gap-2 text-[10px] mt-1 ${\n            isUser ? 'text-action-primary-text/60' : 'text-text-muted'\n          }`}\n        >\n          <span>{relativeTime(message.timestamp)}</span>\n\n          {totalTokens !== null && !isUser && (\n            <span>\n              {totalTokens} {tr('vibecontrols.agentManager.messageItem.tokens', 'tokens')}\n            </span>\n          )}\n\n          {message.sdk && (\n            <span className=\"px-1 py-0.5 rounded bg-bg-elevated text-text-muted uppercase font-mono text-[9px]\">\n              {message.sdk}\n            </span>\n          )}\n\n          {message.model && !isUser && <span>{message.model}</span>}\n\n          {/* Copy button on hover */}\n          {hovered && (\n            <button\n              onClick={handleCopy}\n              className={`ml-auto p-0.5 rounded transition-colors ${\n                isUser ? 'hover:bg-action-primary-bg-hover' : 'hover:bg-bg-sunken'\n              }`}\n              aria-label={tr('vibecontrols.agentManager.messageItem.copyMessage', 'Copy message')}\n              title={tr('vibecontrols.agentManager.messageItem.copyMessage', 'Copy message')}\n            >\n              {copied ? (\n                <Check className=\"w-3 h-3 text-status-success-text\" />\n              ) : (\n                <Copy className=\"w-3 h-3\" />\n              )}\n            </button>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAgBA,SAAS,EAAc,GAAc,GAA0B;AAC7D,KAAI,CAAC,EAAO,QAAO;CAEnB,IAAM,IAAY,EAAK,aAAa,EAC9B,IAAa,EAAM,aAAa,EAChC,IAAqB,EAAE,EACzB,IAAY,GACZ,IAAa,EAAU,QAAQ,GAAY,EAAU;AAEzD,QAAO,MAAe,IAapB,CAZI,IAAa,KACf,EAAM,KAAK,EAAK,MAAM,GAAW,EAAW,CAAC,EAE/C,EAAM,KACJ,kBAAC,QAAD;EAEE,WAAU;YAET,EAAK,MAAM,GAAY,IAAa,EAAM,OAAO;EAC7C,EAJA,EAIA,CACR,EACD,IAAY,IAAa,EAAM,QAC/B,IAAa,EAAU,QAAQ,GAAY,EAAU;AAOvD,QAJI,IAAY,EAAK,UACnB,EAAM,KAAK,EAAK,MAAM,EAAU,CAAC,EAG5B,EAAM,SAAS,IAAI,kBAAA,GAAA,EAAA,UAAG,GAAS,CAAA,GAAG;;AAQ3C,IAAa,KAA6D,EACxE,YACA,iBAAc,SACV;CACJ,IAAM,CAAC,GAAQ,KAAa,EAAS,GAAM,EACrC,CAAC,GAAS,KAAc,EAAS,GAAM,EACvC,IAAS,EAAQ,SAAS,QAC1B,IAAK,GAAO,EAEZ,UAAmB;AAGvB,EAFA,UAAU,UAAU,UAAU,EAAQ,QAAQ,EAC9C,EAAU,GAAK,EACf,iBAAiB,EAAU,GAAM,EAAE,IAAK;IAGpC,IAAc,EAAQ,SAAS,EAAQ,OAAO,QAAQ,EAAQ,OAAO,SAAS;AAEpF,QACE,kBAAC,OAAD;EACE,WAAW,gBAAgB,IAAS,qBAAqB;EACzD,oBAAoB,EAAW,GAAK;EACpC,oBAAoB,EAAW,GAAM;YAHvC,CAME,kBAAC,OAAD;GACE,WAAW,8EACT,IAAS,yBAAyB;aAGnC,IACC,kBAAC,GAAD,EAAM,WAAU,wCAAyC,CAAA,GAEzD,kBAAC,GAAD,EAAK,WAAU,mCAAoC,CAAA;GAEjD,CAAA,EAGN,kBAAC,OAAD;GACE,WAAW,6CACT,IACI,kDACA;aAJR,CAQG,IACC,kBAAC,KAAD;IAAG,WAAU;cACV,IAAc,EAAc,EAAQ,SAAS,EAAY,GAAG,EAAQ;IACnE,CAAA,GACF,IACF,kBAAC,KAAD;IAAG,WAAU;cACV,EAAc,EAAQ,SAAS,EAAY;IAC1C,CAAA,GAEJ,kBAAC,GAAD,EAA2B,SAAS,EAAQ,SAAW,CAAA,EAIzD,kBAAC,OAAD;IACE,WAAW,4CACT,IAAS,gCAAgC;cAF7C;KAKE,kBAAC,QAAD,EAAA,UAAO,EAAa,EAAQ,UAAU,EAAQ,CAAA;KAE7C,MAAgB,QAAQ,CAAC,KACxB,kBAAC,QAAD,EAAA,UAAA;MACG;MAAY;MAAE,EAAG,gDAAgD,SAAS;MACtE,EAAA,CAAA;KAGR,EAAQ,OACP,kBAAC,QAAD;MAAM,WAAU;gBACb,EAAQ;MACJ,CAAA;KAGR,EAAQ,SAAS,CAAC,KAAU,kBAAC,QAAD,EAAA,UAAO,EAAQ,OAAa,CAAA;KAGxD,KACC,kBAAC,UAAD;MACE,SAAS;MACT,WAAW,2CACT,IAAS,qCAAqC;MAEhD,cAAY,EAAG,qDAAqD,eAAe;MACnF,OAAO,EAAG,qDAAqD,eAAe;gBAE7E,IACC,kBAAC,GAAD,EAAO,WAAU,oCAAqC,CAAA,GAEtD,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA;MAEvB,CAAA;KAEP;MACF;KACF"}

package/dist/components/agent-manager/AgentManagerMessageList.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { AgentManagerMessage } from '../../types/agentManager';
+
+interface AgentManagerMessageListProps {
+    messages: AgentManagerMessage[];
+    isStreaming: boolean;
+    onCancelStream?: () => void;
+    searchQuery?: string;
+}
+export declare const AgentManagerMessageList: FC<AgentManagerMessageListProps>;
+export {};
+//# sourceMappingURL=AgentManagerMessageList.d.ts.map

package/dist/components/agent-manager/AgentManagerMessageList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentManagerMessageList.d.ts","sourceRoot":"","sources":["../../../src/components/agent-manager/AgentManagerMessageList.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAA8B,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAI5D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAGhE,UAAU,4BAA4B;IACpC,QAAQ,EAAE,mBAAmB,EAAE,CAAC;IAChC,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CAwFpE,CAAC"}

package/dist/components/agent-manager/AgentManagerMessageList.js

@@ -0,0 +1,58 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { AgentManagerMessageItem as t } from "./AgentManagerMessageItem.js";
+import { AgentManagerStreamingIndicator as n } from "./AgentManagerStreamingIndicator.js";
+import { useEffect as r, useMemo as i, useRef as a } from "react";
+import { MessageSquare as o } from "lucide-react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/agent-manager/AgentManagerMessageList.tsx
+var l = ({ messages: l, isStreaming: u, onCancelStream: d, searchQuery: f }) => {
+	let p = a(null), m = a(null), h = e(), g = f?.trim().toLowerCase() ?? "", _ = i(() => g ? l.filter((e) => e.content.toLowerCase().includes(g)) : l, [l, g]);
+	return r(() => {
+		let e = m.current;
+		e && e.scrollHeight - e.scrollTop - e.clientHeight < 100 && (e.scrollTop = e.scrollHeight);
+	}, [l, u]), r(() => {
+		let e = m.current;
+		e && (e.scrollTop = e.scrollHeight);
+	}, []), l.length === 0 && !u ? /* @__PURE__ */ c("div", {
+		className: "flex-1 flex flex-col items-center justify-center px-4 text-center",
+		children: [
+			/* @__PURE__ */ s("div", {
+				className: "w-12 h-12 rounded-full bg-bg-sunken flex items-center justify-center mb-3",
+				children: /* @__PURE__ */ s(o, { className: "w-6 h-6 text-text-muted" })
+			}),
+			/* @__PURE__ */ s("p", {
+				className: "text-sm font-medium text-text-primary",
+				children: h("vibecontrols.agentManager.messageList.startConversation", "Start a conversation")
+			}),
+			/* @__PURE__ */ s("p", {
+				className: "text-xs text-text-secondary mt-1 max-w-xs",
+				children: h("vibecontrols.agentManager.messageList.typeMessage", "Type a message below to begin interacting with the AI agent.")
+			})
+		]
+	}) : /* @__PURE__ */ c("div", {
+		ref: m,
+		className: "flex-1 overflow-y-auto px-4 py-4 space-y-3 min-h-0",
+		role: "log",
+		"aria-live": "polite",
+		"aria-label": h("vibecontrols.agentManager.messageList.agentConversation", "Agent conversation"),
+		children: [
+			g && _.length === 0 && /* @__PURE__ */ s("div", {
+				className: "flex items-center justify-center py-8",
+				children: /* @__PURE__ */ s("p", {
+					className: "text-sm text-text-tertiary",
+					children: h("vibecontrols.agentManager.messageList.noResults", "No messages match your search")
+				})
+			}),
+			_.map((e) => /* @__PURE__ */ s(t, {
+				message: e,
+				searchQuery: g
+			}, e.id)),
+			u && d && /* @__PURE__ */ s(n, { onCancel: d }),
+			/* @__PURE__ */ s("div", { ref: p })
+		]
+	});
+};
+//#endregion
+export { l as AgentManagerMessageList };
+
+//# sourceMappingURL=AgentManagerMessageList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AgentManagerMessageList.js","names":[],"sources":["../../../src/components/agent-manager/AgentManagerMessageList.tsx"],"sourcesContent":["/**\n * Scrollable message list for the Agent Manager chat.\n *\n * Renders AgentManagerMessageItem for each message with auto-scroll\n * behavior, a streaming indicator, and optional search highlighting.\n */\n\nimport { useEffect, useRef, useMemo, type FC } from 'react';\nimport { MessageSquare } from 'lucide-react';\nimport { AgentManagerMessageItem } from './AgentManagerMessageItem';\nimport { AgentManagerStreamingIndicator } from './AgentManagerStreamingIndicator';\nimport type { AgentManagerMessage } from '@/types/agentManager';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface AgentManagerMessageListProps {\n  messages: AgentManagerMessage[];\n  isStreaming: boolean;\n  onCancelStream?: () => void;\n  searchQuery?: string;\n}\n\nexport const AgentManagerMessageList: FC<AgentManagerMessageListProps> = ({\n  messages,\n  isStreaming,\n  onCancelStream,\n  searchQuery,\n}) => {\n  const bottomRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const tr = useTr();\n\n  const normalizedQuery = searchQuery?.trim().toLowerCase() ?? '';\n\n  // Filter messages when a search query is active\n  const displayMessages = useMemo(() => {\n    if (!normalizedQuery) return messages;\n    return messages.filter((m) => m.content.toLowerCase().includes(normalizedQuery));\n  }, [messages, normalizedQuery]);\n\n  // Auto-scroll when new messages arrive or streaming updates\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    const isNearBottom =\n      container.scrollHeight - container.scrollTop - container.clientHeight < 100;\n\n    if (isNearBottom) {\n      container.scrollTop = container.scrollHeight;\n    }\n  }, [messages, isStreaming]);\n\n  // Scroll to bottom on initial render\n  useEffect(() => {\n    const container = containerRef.current;\n    if (container) {\n      container.scrollTop = container.scrollHeight;\n    }\n  }, []);\n\n  if (messages.length === 0 && !isStreaming) {\n    return (\n      <div className=\"flex-1 flex flex-col items-center justify-center px-4 text-center\">\n        <div className=\"w-12 h-12 rounded-full bg-bg-sunken flex items-center justify-center mb-3\">\n          <MessageSquare className=\"w-6 h-6 text-text-muted\" />\n        </div>\n        <p className=\"text-sm font-medium text-text-primary\">\n          {tr('vibecontrols.agentManager.messageList.startConversation', 'Start a conversation')}\n        </p>\n        <p className=\"text-xs text-text-secondary mt-1 max-w-xs\">\n          {tr(\n            'vibecontrols.agentManager.messageList.typeMessage',\n            'Type a message below to begin interacting with the AI agent.'\n          )}\n        </p>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      ref={containerRef}\n      className=\"flex-1 overflow-y-auto px-4 py-4 space-y-3 min-h-0\"\n      role=\"log\"\n      aria-live=\"polite\"\n      aria-label={tr(\n        'vibecontrols.agentManager.messageList.agentConversation',\n        'Agent conversation'\n      )}\n    >\n      {normalizedQuery && displayMessages.length === 0 && (\n        <div className=\"flex items-center justify-center py-8\">\n          <p className=\"text-sm text-text-tertiary\">\n            {tr('vibecontrols.agentManager.messageList.noResults', 'No messages match your search')}\n          </p>\n        </div>\n      )}\n\n      {displayMessages.map((message) => (\n        <AgentManagerMessageItem key={message.id} message={message} searchQuery={normalizedQuery} />\n      ))}\n\n      {isStreaming && onCancelStream && (\n        <AgentManagerStreamingIndicator onCancel={onCancelStream} />\n      )}\n\n      <div ref={bottomRef} />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAqBA,IAAa,KAA6D,EACxE,aACA,gBACA,mBACA,qBACI;CACJ,IAAM,IAAY,EAAuB,KAAK,EACxC,IAAe,EAAuB,KAAK,EAC3C,IAAK,GAAO,EAEZ,IAAkB,GAAa,MAAM,CAAC,aAAa,IAAI,IAGvD,IAAkB,QACjB,IACE,EAAS,QAAQ,MAAM,EAAE,QAAQ,aAAa,CAAC,SAAS,EAAgB,CAAC,GADnD,GAE5B,CAAC,GAAU,EAAgB,CAAC;AA0C/B,QAvCA,QAAgB;EACd,IAAM,IAAY,EAAa;AAC1B,OAGH,EAAU,eAAe,EAAU,YAAY,EAAU,eAAe,QAGxE,EAAU,YAAY,EAAU;IAEjC,CAAC,GAAU,EAAY,CAAC,EAG3B,QAAgB;EACd,IAAM,IAAY,EAAa;AAC/B,EAAI,MACF,EAAU,YAAY,EAAU;IAEjC,EAAE,CAAC,EAEF,EAAS,WAAW,KAAK,CAAC,IAE1B,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD,EAAe,WAAU,2BAA4B,CAAA;IACjD,CAAA;GACN,kBAAC,KAAD;IAAG,WAAU;cACV,EAAG,2DAA2D,uBAAuB;IACpF,CAAA;GACJ,kBAAC,KAAD;IAAG,WAAU;cACV,EACC,qDACA,+DACD;IACC,CAAA;GACA;MAKR,kBAAC,OAAD;EACE,KAAK;EACL,WAAU;EACV,MAAK;EACL,aAAU;EACV,cAAY,EACV,2DACA,qBACD;YARH;GAUG,KAAmB,EAAgB,WAAW,KAC7C,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,KAAD;KAAG,WAAU;eACV,EAAG,mDAAmD,gCAAgC;KACrF,CAAA;IACA,CAAA;GAGP,EAAgB,KAAK,MACpB,kBAAC,GAAD;IAAmD;IAAS,aAAa;IAAmB,EAA9D,EAAQ,GAAsD,CAC5F;GAED,KAAe,KACd,kBAAC,GAAD,EAAgC,UAAU,GAAkB,CAAA;GAG9D,kBAAC,OAAD,EAAK,KAAK,GAAa,CAAA;GACnB"}

package/dist/components/agent-manager/AgentManagerSessionItem.d.ts

@@ -0,0 +1,12 @@
+import { AISession } from '../../services/aiApi';
+
+interface AgentManagerSessionItemProps {
+    session: AISession;
+    agentId: string;
+    isActive: boolean;
+    isSelected: boolean;
+    onDelete: (sessionId: string) => void;
+}
+export declare function AgentManagerSessionItem({ session, agentId, isActive, isSelected, onDelete, }: AgentManagerSessionItemProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=AgentManagerSessionItem.d.ts.map

package/dist/components/agent-manager/AgentManagerSessionItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentManagerSessionItem.d.ts","sourceRoot":"","sources":["../../../src/components/agent-manager/AgentManagerSessionItem.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAOlD,UAAU,4BAA4B;IACpC,OAAO,EAAE,SAAS,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAUD,wBAAgB,uBAAuB,CAAC,EACtC,OAAO,EACP,OAAO,EACP,QAAQ,EACR,UAAU,EACV,QAAQ,GACT,EAAE,4BAA4B,2CA0J9B"}

package/dist/components/agent-manager/AgentManagerSessionItem.js

@@ -0,0 +1,141 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { SelectionCheckbox as t } from "../shared/SelectionCheckbox.js";
+import "../shared/index.js";
+import { relativeTime as n } from "../../utils/relativeTime.js";
+import { updateSessionConfig as r } from "../../services/aiApi.js";
+import { useAgentManagerStore as i } from "../../store/agentManagerStore.js";
+import { useState as a } from "react";
+import { Pin as o, Tag as s, Trash2 as c } from "lucide-react";
+import { motion as l } from "framer-motion";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/agent-manager/AgentManagerSessionItem.tsx
+var f = {
+	active: "bg-status-success-bg",
+	idle: "bg-status-warning-bg",
+	error: "bg-status-error-bg",
+	terminated: "bg-border-default",
+	processing: "bg-status-info-bg"
+};
+function p({ session: p, agentId: m, isActive: h, isSelected: g, onDelete: _ }) {
+	let [v, y] = a(!1), b = e(), x = i((e) => e.openSession), S = i((e) => e.pinTab), C = i((e) => e.toggleSessionSelection), w = i((e) => e.tabs).find((e) => e.sessionId === p.id)?.pinned ?? !1, T = f[p.status] ?? "bg-border-default", E = p.config?.tags || [], D = () => {
+		x(p.id, p.name);
+	};
+	return /* @__PURE__ */ d(l.div, {
+		layout: !0,
+		initial: {
+			opacity: 0,
+			y: 4
+		},
+		animate: {
+			opacity: 1,
+			y: 0
+		},
+		exit: {
+			opacity: 0,
+			y: -4
+		},
+		transition: { duration: .15 },
+		onMouseEnter: () => y(!0),
+		onMouseLeave: () => y(!1),
+		onClick: D,
+		className: `group flex items-center gap-2 px-3 py-2 cursor-pointer transition-colors ${h ? "bg-bg-elevated border-l-2 border-action-primary-bg" : "hover:bg-bg-sunken border-l-2 border-transparent"}`,
+		role: "button",
+		tabIndex: 0,
+		onKeyDown: (e) => {
+			(e.key === "Enter" || e.key === " ") && D();
+		},
+		children: [
+			/* @__PURE__ */ u("div", {
+				className: `flex-shrink-0 transition-opacity ${v || g ? "opacity-100" : "opacity-0"}`,
+				onClick: (e) => {
+					e.stopPropagation(), C(p.id);
+				},
+				children: /* @__PURE__ */ u(t, {
+					checked: g,
+					onChange: () => C(p.id),
+					ariaLabel: `Select session ${p.name}`
+				})
+			}),
+			/* @__PURE__ */ u("span", {
+				className: `flex-shrink-0 w-2 h-2 rounded-full ${T}`,
+				title: p.status
+			}),
+			/* @__PURE__ */ d("div", {
+				className: "flex-1 min-w-0",
+				children: [
+					/* @__PURE__ */ d("div", {
+						className: "flex items-center gap-1.5",
+						children: [/* @__PURE__ */ u("span", {
+							className: "text-sm text-text-primary truncate font-medium",
+							children: p.name
+						}), w && /* @__PURE__ */ u(o, { className: "w-3 h-3 text-text-secondary flex-shrink-0" })]
+					}),
+					/* @__PURE__ */ d("div", {
+						className: "flex items-center gap-1.5 mt-0.5",
+						children: [
+							/* @__PURE__ */ u("span", {
+								className: "text-xs px-1.5 py-0.5 rounded bg-bg-sunken text-text-secondary font-mono",
+								children: p.agentType
+							}),
+							typeof p.config?.mode == "string" && /* @__PURE__ */ u("span", {
+								className: "text-[10px] px-1 py-0.5 rounded bg-bg-elevated text-text-muted uppercase font-mono",
+								children: p.config.mode
+							}),
+							p.createdAt && /* @__PURE__ */ u("span", {
+								className: "text-xs text-text-tertiary truncate",
+								children: n(p.createdAt)
+							})
+						]
+					}),
+					E.length > 0 && /* @__PURE__ */ d("div", {
+						className: "flex gap-0.5 mt-0.5 flex-wrap",
+						children: [E.slice(0, 3).map((e) => /* @__PURE__ */ u("span", {
+							className: "px-1 py-0.5 text-[10px] bg-bg-elevated text-text-tertiary rounded",
+							children: e
+						}, e)), E.length > 3 && /* @__PURE__ */ d("span", {
+							className: "text-[10px] text-text-muted",
+							children: ["+", E.length - 3]
+						})]
+					})
+				]
+			}),
+			v && /* @__PURE__ */ d("div", {
+				className: "flex items-center gap-0.5 flex-shrink-0",
+				children: [
+					/* @__PURE__ */ u("button", {
+						onClick: (e) => {
+							e.stopPropagation(), x(p.id, p.name), S(p.id);
+						},
+						className: `p-1 rounded transition-colors ${w ? "text-action-primary-bg hover:bg-bg-elevated" : "text-text-secondary hover:text-text-primary hover:bg-bg-elevated"}`,
+						title: w ? b("vibecontrols.agentManager.sessionItem.unpin", "Unpin") : b("vibecontrols.agentManager.sessionItem.pin", "Pin"),
+						children: /* @__PURE__ */ u(o, { className: "w-3.5 h-3.5" })
+					}),
+					/* @__PURE__ */ u("button", {
+						onClick: (e) => {
+							e.stopPropagation();
+							let t = E.join(", "), n = window.prompt("Enter tags (comma-separated):", t);
+							if (n === null) return;
+							let i = n.split(",").map((e) => e.trim()).filter(Boolean);
+							r(m, p.id, { tags: i });
+						},
+						className: "p-1 rounded text-text-secondary hover:text-text-primary hover:bg-bg-elevated transition-colors",
+						title: b("vibecontrols.agentManager.sessionItem.editTags", "Edit tags"),
+						children: /* @__PURE__ */ u(s, { className: "w-3.5 h-3.5" })
+					}),
+					/* @__PURE__ */ u("button", {
+						onClick: (e) => {
+							e.stopPropagation(), _(p.id);
+						},
+						className: "p-1 rounded text-text-secondary hover:text-status-error-text hover:bg-bg-elevated transition-colors",
+						title: b("vibecontrols.agentManager.sessionItem.deleteSession", "Delete session"),
+						children: /* @__PURE__ */ u(c, { className: "w-3.5 h-3.5" })
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { p as AgentManagerSessionItem };
+
+//# sourceMappingURL=AgentManagerSessionItem.js.map