cognova 0.2.13 → 0.2.14

package/app/components/AssistantPanel.client.vue

@@ -1,9 +1,4 @@
 <script setup lang="ts">
-import { Terminal } from '@xterm/xterm'
-import { FitAddon } from '@xterm/addon-fit'
-import { WebLinksAddon } from '@xterm/addon-web-links'
-import '@xterm/xterm/css/xterm.css'
-
 // --- Route ---
 const route = useRoute()
 const isChatPage = computed(() => route.path === '/chat')
@@ -11,8 +6,7 @@ const isChatPage = computed(() => route.path === '/chat')
 // --- Preferences ---
 const {
   assistantPanelOpen,
-  assistantPanelTab,
-  assistantLastConversationId
+  assistantPanelTab
 } = usePreferences()
 
 const isOpen = ref(assistantPanelOpen.value)
@@ -31,100 +25,23 @@ const tabItems = [
   { label: 'Terminal', icon: 'i-lucide-terminal', value: 'terminal' }
 ]
 
-// --- Chat ---
-const {
-  connectionStatus: chatConnectionStatus,
-  sessionStatus,
-  activeConversationId,
-  messages,
-  conversations,
-  streamingText,
-  streamingToolCalls,
-  loading: chatLoading,
-  connect: connectChat,
-  sendMessage,
-  interrupt,
-  startNewConversation,
-  loadConversation,
-  loadConversations
-} = useChat()
-
-const messagesContainer = ref<HTMLElement | null>(null)
-
-const conversationItems = computed(() =>
-  conversations.value.map(c => ({
-    label: c.title || `Chat ${new Date(c.startedAt).toLocaleDateString()}`,
-    value: c.id
-  }))
-)
-
-const selectedConversationId = ref<string | undefined>(
-  assistantLastConversationId.value ?? undefined
-)
-
-// Sync selection to preference cookie, only load if user picked a different conversation
-watch(selectedConversationId, (id) => {
-  assistantLastConversationId.value = id ?? null
-  if (id && id !== activeConversationId.value)
-    loadConversation(id)
-})
-
-// Sync when a new conversation is created via chat:session_created
-watch(activeConversationId, (id) => {
-  if (id) selectedConversationId.value = id
-})
-
-function handleSend(message: string) {
-  sendMessage(message)
-  nextTick(scrollToBottom)
-}
-
-function handleNewChat() {
-  startNewConversation()
-  selectedConversationId.value = undefined
-}
-
-function scrollToBottom() {
-  if (messagesContainer.value)
-    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
-}
-
-watch(streamingText, () => nextTick(scrollToBottom))
-watch(() => messages.value.length, () => nextTick(scrollToBottom))
+// --- Status icons (from child refs) ---
+const terminalRef = ref<{ status: string } | null>(null)
 
-function setupChat() {
-  connectChat()
-  loadConversations()
-  if (assistantLastConversationId.value && !activeConversationId.value)
-    loadConversation(assistantLastConversationId.value)
-}
+const { connectionStatus: chatConnectionStatus } = useChat()
 
-// --- Terminal ---
-const terminalRef = ref<HTMLDivElement | null>(null)
-const terminal = ref<Terminal | null>(null)
-const fitAddon = ref<FitAddon | null>(null)
-const terminalInitialized = ref(false)
+const terminalStatus = computed(() => terminalRef.value?.status ?? 'disconnected')
 
-const {
-  status: terminalStatus,
-  connect: connectTerminal,
-  disconnect: disconnectTerminal,
-  sendInput,
-  sendResize,
-  startPingInterval,
-  stopPingInterval
-} = useTerminal()
-
-const terminalStatusIcon = computed(() => {
-  switch (terminalStatus.value) {
+const chatStatusIcon = computed(() => {
+  switch (chatConnectionStatus.value) {
     case 'connected': return 'i-lucide-wifi'
     case 'connecting': return 'i-lucide-loader-2'
     default: return 'i-lucide-wifi-off'
   }
 })
 
-const chatStatusIcon = computed(() => {
-  switch (chatConnectionStatus.value) {
+const terminalStatusIcon = computed(() => {
+  switch (terminalStatus.value) {
     case 'connected': return 'i-lucide-wifi'
     case 'connecting': return 'i-lucide-loader-2'
     default: return 'i-lucide-wifi-off'
@@ -138,119 +55,6 @@ function statusClasses(status: string) {
     (status === 'error' || status === 'disconnected') && 'text-muted'
   ]
 }
-
-function initTerminal() {
-  if (!terminalRef.value || terminalInitialized.value) return
-
-  const term = new Terminal({
-    cursorBlink: true,
-    fontSize: 14,
-    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
-    theme: {
-      background: '#1a1a1a',
-      foreground: '#e5e5e5',
-      cursor: '#e5e5e5',
-      cursorAccent: '#1a1a1a',
-      selectionBackground: '#3b3b3b',
-      black: '#1a1a1a',
-      red: '#ff5555',
-      green: '#50fa7b',
-      yellow: '#f1fa8c',
-      blue: '#6272a4',
-      magenta: '#ff79c6',
-      cyan: '#8be9fd',
-      white: '#e5e5e5',
-      brightBlack: '#4d4d4d',
-      brightRed: '#ff6e6e',
-      brightGreen: '#69ff94',
-      brightYellow: '#ffffa5',
-      brightBlue: '#d6acff',
-      brightMagenta: '#ff92df',
-      brightCyan: '#a4ffff',
-      brightWhite: '#ffffff'
-    }
-  })
-
-  const fit = new FitAddon()
-  fitAddon.value = fit
-
-  term.loadAddon(fit)
-  term.loadAddon(new WebLinksAddon())
-
-  term.open(terminalRef.value)
-  fit.fit()
-
-  terminal.value = term
-  terminalInitialized.value = true
-
-  term.onData((data) => {
-    sendInput(data)
-  })
-  term.onResize(({ cols, rows }) => {
-    sendResize(cols, rows)
-  })
-
-  connectTerminal(term)
-  startPingInterval()
-}
-
-function handleTerminalResize() {
-  if (fitAddon.value && terminal.value)
-    fitAddon.value.fit()
-}
-
-function handleTerminalReconnect() {
-  if (terminalStatus.value === 'connecting') return
-  if (!terminalInitialized.value) {
-    nextTick(initTerminal)
-    return
-  }
-  if (terminal.value)
-    connectTerminal(terminal.value)
-}
-
-let resizeObserver: ResizeObserver | null = null
-
-function setupTerminal() {
-  if (!terminalInitialized.value) {
-    initTerminal()
-    if (terminalRef.value) {
-      resizeObserver = new ResizeObserver(() => handleTerminalResize())
-      resizeObserver.observe(terminalRef.value)
-    }
-  } else {
-    handleTerminalResize()
-    terminal.value?.focus()
-  }
-}
-
-// --- Lifecycle ---
-watch(isOpen, (open) => {
-  if (open) {
-    if (activeTab.value === 'chat') setupChat()
-    else nextTick(setupTerminal)
-  }
-})
-
-watch(activeTab, (tab) => {
-  if (!isOpen.value) return
-  if (tab === 'chat') setupChat()
-  else nextTick(setupTerminal)
-})
-
-onMounted(() => {
-  if (isOpen.value) {
-    if (activeTab.value === 'chat') setupChat()
-    else nextTick(setupTerminal)
-  }
-})
-
-onUnmounted(() => {
-  stopPingInterval()
-  disconnectTerminal()
-  if (resizeObserver) resizeObserver.disconnect()
-  if (terminal.value) terminal.value.dispose()
-})
 </script>
 
 <template>
@@ -307,111 +111,17 @@ onUnmounted(() => {
         </div>
 
         <!-- Chat tab -->
-        <div
+        <AssistantAssistantChat
           v-show="activeTab === 'chat'"
-          class="flex flex-col flex-1 min-h-0"
-        >
-          <!-- Conversation selector -->
-          <div class="flex items-center gap-2 px-3 py-2 border-b border-default">
-            <USelectMenu
-              v-model="selectedConversationId"
-              :items="conversationItems"
-              value-key="value"
-              placeholder="New conversation"
-              size="xs"
-              class="flex-1"
-              icon="i-lucide-messages-square"
-            />
-            <UButton
-              icon="i-lucide-plus"
-              size="xs"
-              color="primary"
-              variant="soft"
-              @click="handleNewChat"
-            />
-          </div>
-
-          <!-- Messages -->
-          <div
-            ref="messagesContainer"
-            class="relative flex-1 overflow-y-auto p-3 space-y-3"
-          >
-            <!-- Loading overlay -->
-            <div
-              v-if="chatLoading"
-              class="absolute inset-0 flex items-center justify-center bg-elevated/80 z-10"
-            >
-              <UIcon
-                name="i-lucide-loader-2"
-                class="size-6 animate-spin text-primary"
-              />
-            </div>
-
-            <div
-              v-if="messages.length === 0 && sessionStatus !== 'streaming' && !chatLoading"
-              class="flex flex-col items-center justify-center h-full text-dimmed"
-            >
-              <UIcon
-                name="i-lucide-message-square"
-                class="size-8 mb-2"
-              />
-              <p class="text-sm">
-                Send a message to start chatting
-              </p>
-            </div>
-
-            <ChatMessageBubble
-              v-for="msg in messages"
-              :key="msg.id"
-              :message="msg"
-            />
-
-            <ChatStreamingMessage
-              v-if="sessionStatus === 'streaming'"
-              :text="streamingText"
-              :tool-calls="streamingToolCalls"
-            />
-          </div>
-
-          <!-- Input -->
-          <ChatInput
-            :session-status="sessionStatus"
-            :connection-status="chatConnectionStatus"
-            @send="handleSend"
-            @interrupt="interrupt"
-          />
-        </div>
+          :active="isOpen && activeTab === 'chat'"
+        />
 
         <!-- Terminal tab -->
-        <div
+        <AssistantAssistantTerminal
           v-show="activeTab === 'terminal'"
-          class="flex flex-col flex-1 min-h-0"
-        >
-          <div class="flex items-center justify-between px-3 py-1.5 border-b border-default text-sm bg-muted/50">
-            <div class="flex items-center gap-2 text-muted text-xs">
-              <UIcon
-                :name="terminalStatusIcon"
-                :class="['size-3.5', ...statusClasses(terminalStatus)]"
-              />
-              <span>{{ terminalStatus === 'connected' ? 'Connected' : terminalStatus === 'connecting' ? 'Connecting...' : terminalStatus === 'error' ? 'Connection error' : 'Disconnected' }}</span>
-            </div>
-            <UButton
-              v-if="terminalStatus === 'disconnected' || terminalStatus === 'error'"
-              size="xs"
-              color="neutral"
-              variant="ghost"
-              icon="i-lucide-refresh-cw"
-              @click="handleTerminalReconnect"
-            >
-              Reconnect
-            </UButton>
-          </div>
-
-          <div
-            ref="terminalRef"
-            class="flex-1 p-1 bg-[#1a1a1a]"
-          />
-        </div>
+          ref="terminalRef"
+          :active="isOpen && activeTab === 'terminal'"
+        />
       </div>
     </Transition>
   </div>
@@ -427,14 +137,6 @@ onUnmounted(() => {
   max-height: 80vh;
 }
 
-.xterm {
-  height: 100%;
-}
-
-.xterm-viewport {
-  overflow-y: auto !important;
-}
-
 /* Compact prose for chat bubbles */
 .chat-prose {
   font-size: 0.8125rem;

package/app/components/agents/AgentCard.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import type { CronAgent } from '~~/shared/types'
+import { formatSchedule, formatRelativeTime, getStatusColor } from '~~/shared/utils/formatting'
+
+defineProps<{
+  agent: CronAgent
+  running: boolean
+}>()
+
+const emit = defineEmits<{
+  toggle: [id: string]
+  run: [id: string, event: Event]
+  cancel: [id: string, event: Event]
+  edit: [agent: CronAgent, event: Event]
+  navigate: [agent: CronAgent]
+}>()
+</script>
+
+<template>
+  <UCard
+    class="cursor-pointer transition-all hover:ring-2 hover:ring-primary/50"
+    @click="emit('navigate', agent)"
+  >
+    <div class="flex items-start justify-between gap-4">
+      <div class="flex-1 min-w-0">
+        <div class="flex items-center gap-2">
+          <h3 class="font-medium truncate">
+            {{ agent.name }}
+          </h3>
+          <UBadge
+            v-if="running"
+            color="info"
+            variant="subtle"
+            size="sm"
+          >
+            <UIcon
+              name="i-lucide-loader-2"
+              class="w-3 h-3 animate-spin mr-1"
+            />
+            Running
+          </UBadge>
+          <UBadge
+            v-else-if="agent.lastStatus"
+            :color="getStatusColor(agent.lastStatus)"
+            size="sm"
+          >
+            {{ agent.lastStatus }}
+          </UBadge>
+        </div>
+
+        <p
+          v-if="agent.description"
+          class="text-sm text-muted truncate mt-1"
+        >
+          {{ agent.description }}
+        </p>
+
+        <div class="flex items-center gap-4 mt-2 text-sm text-muted">
+          <span class="flex items-center gap-1">
+            <UIcon name="i-lucide-clock" />
+            {{ formatSchedule(agent.schedule) }}
+          </span>
+          <span
+            v-if="agent.lastRunAt"
+            class="flex items-center gap-1"
+          >
+            <UIcon name="i-lucide-activity" />
+            {{ formatRelativeTime(agent.lastRunAt) }}
+          </span>
+          <span
+            v-if="agent.maxBudgetUsd"
+            class="flex items-center gap-1"
+          >
+            <UIcon name="i-lucide-dollar-sign" />
+            ${{ agent.maxBudgetUsd }} limit
+          </span>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-2">
+        <USwitch
+          :model-value="agent.enabled"
+          @click.stop
+          @update:model-value="emit('toggle', agent.id)"
+        />
+        <UButton
+          v-if="running"
+          icon="i-lucide-square"
+          variant="ghost"
+          size="sm"
+          color="error"
+          @click.stop="emit('cancel', agent.id, $event)"
+        />
+        <UButton
+          v-else
+          icon="i-lucide-play"
+          variant="ghost"
+          size="sm"
+          :disabled="!agent.enabled"
+          @click.stop="emit('run', agent.id, $event)"
+        />
+        <UButton
+          icon="i-lucide-pencil"
+          variant="ghost"
+          size="sm"
+          @click.stop="emit('edit', agent, $event)"
+        />
+      </div>
+    </div>
+  </UCard>
+</template>

package/app/components/agents/AgentInfoCard.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { CronAgent } from '~~/shared/types'
+import { formatSchedule, formatRelativeTime } from '~~/shared/utils/formatting'
+
+defineProps<{
+  agent: CronAgent
+}>()
+</script>
+
+<template>
+  <UCard>
+    <div class="space-y-3">
+      <div v-if="agent.description">
+        <p class="text-sm text-muted uppercase mb-1">
+          Description
+        </p>
+        <p>{{ agent.description }}</p>
+      </div>
+
+      <div class="flex flex-wrap gap-6">
+        <div>
+          <p class="text-sm text-muted uppercase mb-1">
+            Schedule
+          </p>
+          <p class="flex items-center gap-2">
+            <UIcon name="i-lucide-clock" />
+            {{ formatSchedule(agent.schedule) }}
+            <span class="text-sm text-muted">({{ agent.schedule }})</span>
+          </p>
+        </div>
+
+        <div v-if="agent.maxBudgetUsd">
+          <p class="text-sm text-muted uppercase mb-1">
+            Budget Limit
+          </p>
+          <p class="flex items-center gap-2">
+            <UIcon name="i-lucide-dollar-sign" />
+            ${{ agent.maxBudgetUsd }} per run
+          </p>
+        </div>
+
+        <div v-if="agent.lastRunAt">
+          <p class="text-sm text-muted uppercase mb-1">
+            Last Run
+          </p>
+          <p class="flex items-center gap-2">
+            <UIcon name="i-lucide-activity" />
+            {{ formatRelativeTime(agent.lastRunAt) }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </UCard>
+</template>

package/app/components/agents/AgentRunHistory.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import type { CronAgentRun } from '~~/shared/types'
+import { formatDuration, formatDateTime, getStatusColor } from '~~/shared/utils/formatting'
+
+defineProps<{
+  runs: CronAgentRun[]
+  loading: boolean
+}>()
+
+const emit = defineEmits<{
+  select: [run: CronAgentRun]
+}>()
+
+function truncateOutput(output?: string, maxLength = 100) {
+  if (!output) return '-'
+  if (output.length <= maxLength) return output
+  return output.substring(0, maxLength) + '...'
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <h2 class="text-lg font-semibold">
+      Run History
+    </h2>
+
+    <!-- Loading runs -->
+    <div
+      v-if="loading"
+      class="flex items-center justify-center h-32"
+    >
+      <UIcon
+        name="i-lucide-loader-2"
+        class="w-6 h-6 animate-spin text-neutral-400"
+      />
+    </div>
+
+    <!-- Empty state -->
+    <div
+      v-else-if="runs.length === 0"
+      class="flex flex-col items-center justify-center h-32 text-neutral-500"
+    >
+      <UIcon
+        name="i-lucide-history"
+        class="w-8 h-8 mb-2"
+      />
+      <p>No runs yet</p>
+    </div>
+
+    <!-- Run list -->
+    <div
+      v-else
+      class="space-y-2"
+    >
+      <UCard
+        v-for="run in runs"
+        :key="run.id"
+        class="cursor-pointer transition-all hover:ring-2 hover:ring-primary/50"
+        @click="emit('select', run)"
+      >
+        <div class="flex items-start justify-between gap-4">
+          <div class="flex-1 min-w-0">
+            <div class="flex items-center gap-2 mb-1">
+              <UBadge
+                v-if="run.status === 'running'"
+                color="info"
+                variant="subtle"
+                size="sm"
+              >
+                <UIcon
+                  name="i-lucide-loader-2"
+                  class="w-3 h-3 animate-spin mr-1"
+                />
+                Running
+              </UBadge>
+              <UBadge
+                v-else
+                :color="getStatusColor(run.status)"
+                size="sm"
+              >
+                {{ run.status }}
+              </UBadge>
+              <span class="text-sm text-muted">
+                {{ formatDateTime(run.startedAt) }}
+              </span>
+            </div>
+
+            <p class="text-sm text-muted truncate">
+              {{ run.error ? truncateOutput(run.error) : truncateOutput(run.output) }}
+            </p>
+          </div>
+
+          <div class="text-right text-sm text-muted shrink-0">
+            <p>{{ formatDuration(run.durationMs) }}</p>
+            <p v-if="run.costUsd">
+              ${{ run.costUsd.toFixed(4) }}
+            </p>
+          </div>
+        </div>
+      </UCard>
+    </div>
+  </div>
+</template>

package/app/components/agents/AgentRunModal.vue

@@ -1,35 +1,12 @@
 <script setup lang="ts">
 import type { CronAgentRun } from '~~/shared/types'
+import { formatDuration, formatDateTime, getStatusColor } from '~~/shared/utils/formatting'
 
 defineProps<{
   run: CronAgentRun | null
 }>()
 
 const open = defineModel<boolean>('open', { default: false })
-
-function formatDuration(ms?: number) {
-  if (!ms) return '-'
-  if (ms < 1000) return `${ms}ms`
-  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`
-  return `${(ms / 60000).toFixed(1)}m`
-}
-
-function formatDateTime(date?: Date | string) {
-  if (!date) return '-'
-  const d = new Date(date)
-  return d.toLocaleString()
-}
-
-function getStatusColor(status?: string) {
-  switch (status) {
-    case 'success': return 'success'
-    case 'error': return 'error'
-    case 'budget_exceeded': return 'warning'
-    case 'running': return 'info'
-    case 'cancelled': return 'neutral'
-    default: return 'neutral'
-  }
-}
 </script>
 
 <template>