cognova 0.2.12 → 0.2.14

package/app/components/agents/AgentStatsCards.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { AgentGlobalStats, AgentDetailStats } from '~~/shared/types'
+import { formatCurrency, formatDuration, formatRelativeTime } from '~~/shared/utils/formatting'
 
 const props = defineProps<{
   stats: AgentGlobalStats | AgentDetailStats | null
@@ -7,32 +8,6 @@ const props = defineProps<{
   loading?: boolean
 }>()
 
-function formatCurrency(value: number): string {
-  if (value < 0.01) return '<$0.01'
-  return `$${value.toFixed(2)}`
-}
-
-function formatDuration(ms: number): string {
-  if (ms < 1000) return `${ms}ms`
-  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`
-  return `${(ms / 60000).toFixed(1)}m`
-}
-
-function formatRelativeTime(dateStr: string | null): string {
-  if (!dateStr) return 'Never'
-  const date = new Date(dateStr)
-  const now = new Date()
-  const diff = now.getTime() - date.getTime()
-  const minutes = Math.floor(diff / 60000)
-  const hours = Math.floor(diff / 3600000)
-  const days = Math.floor(diff / 86400000)
-
-  if (minutes < 1) return 'Just now'
-  if (minutes < 60) return `${minutes}m ago`
-  if (hours < 24) return `${hours}h ago`
-  return `${days}d ago`
-}
-
 const globalStats = computed(() => {
   if (props.variant !== 'global' || !props.stats) return []
   const s = props.stats as AgentGlobalStats

package/app/components/assistant/AssistantChat.vue

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+const props = defineProps<{
+  active: boolean
+}>()
+
+const {
+  assistantLastConversationId
+} = usePreferences()
+
+const {
+  connectionStatus,
+  sessionStatus,
+  activeConversationId,
+  messages,
+  conversations,
+  streamingText,
+  streamingToolCalls,
+  loading,
+  connect,
+  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))
+
+function setup() {
+  connect()
+  loadConversations()
+  if (assistantLastConversationId.value && !activeConversationId.value)
+    loadConversation(assistantLastConversationId.value)
+}
+
+watch(() => props.active, (active) => {
+  if (active) setup()
+}, { immediate: true })
+
+defineExpose({ connectionStatus })
+</script>
+
+<template>
+  <div 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="loading"
+        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' && !loading"
+        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="connectionStatus"
+      @send="handleSend"
+      @interrupt="interrupt"
+    />
+  </div>
+</template>

package/app/components/assistant/AssistantTerminal.client.vue

@@ -0,0 +1,178 @@
+<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'
+
+const props = defineProps<{
+  active: boolean
+}>()
+
+const terminalRef = ref<HTMLDivElement | null>(null)
+const terminal = ref<Terminal | null>(null)
+const fitAddon = ref<FitAddon | null>(null)
+const terminalInitialized = ref(false)
+
+const {
+  status,
+  connect,
+  disconnect,
+  sendInput,
+  sendResize,
+  startPingInterval,
+  stopPingInterval
+} = useTerminal()
+
+const statusIcon = computed(() => {
+  switch (status.value) {
+    case 'connected': return 'i-lucide-wifi'
+    case 'connecting': return 'i-lucide-loader-2'
+    default: return 'i-lucide-wifi-off'
+  }
+})
+
+function statusClasses(s: string) {
+  return [
+    s === 'connecting' && 'animate-spin',
+    s === 'connected' && 'text-success',
+    (s === 'error' || s === '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)
+  })
+
+  connect(term)
+  startPingInterval()
+}
+
+function handleResize() {
+  if (fitAddon.value && terminal.value)
+    fitAddon.value.fit()
+}
+
+function handleReconnect() {
+  if (status.value === 'connecting') return
+  if (!terminalInitialized.value) {
+    nextTick(initTerminal)
+    return
+  }
+  if (terminal.value)
+    connect(terminal.value)
+}
+
+let resizeObserver: ResizeObserver | null = null
+
+function setup() {
+  if (!terminalInitialized.value) {
+    initTerminal()
+    if (terminalRef.value) {
+      resizeObserver = new ResizeObserver(() => handleResize())
+      resizeObserver.observe(terminalRef.value)
+    }
+  } else {
+    handleResize()
+    terminal.value?.focus()
+  }
+}
+
+watch(() => props.active, (active) => {
+  if (active) nextTick(setup)
+}, { immediate: true })
+
+onUnmounted(() => {
+  stopPingInterval()
+  disconnect()
+  if (resizeObserver) resizeObserver.disconnect()
+  if (terminal.value) terminal.value.dispose()
+})
+
+defineExpose({ status })
+</script>
+
+<template>
+  <div 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="statusIcon"
+          :class="['size-3.5', ...statusClasses(status)]"
+        />
+        <span>{{ status === 'connected' ? 'Connected' : status === 'connecting' ? 'Connecting...' : status === 'error' ? 'Connection error' : 'Disconnected' }}</span>
+      </div>
+      <UButton
+        v-if="status === 'disconnected' || status === 'error'"
+        size="xs"
+        color="neutral"
+        variant="ghost"
+        icon="i-lucide-refresh-cw"
+        @click="handleReconnect"
+      >
+        Reconnect
+      </UButton>
+    </div>
+
+    <div
+      ref="terminalRef"
+      class="flex-1 p-1 bg-[#1a1a1a]"
+    />
+  </div>
+</template>
+
+<style>
+.xterm {
+  height: 100%;
+}
+
+.xterm-viewport {
+  overflow-y: auto !important;
+}
+</style>

package/app/components/chat/ChatInput.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ChatSessionStatus, ChatConnectionStatus } from '~~/shared/types'
+import type { ChatSessionStatus, ChatConnectionStatus, ChatImageBlock, ChatDocumentBlock } from '~~/shared/types'
 
 const props = defineProps<{
   sessionStatus: ChatSessionStatus
@@ -7,16 +7,24 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{
-  send: [message: string]
+  send: [message: string, attachments?: ChatImageBlock[], documents?: ChatDocumentBlock[]]
   interrupt: []
 }>()
 
+const { attachments, addFiles, removeAttachment, clearAttachments, toImageBlocks, toDocumentBlocks } = useAttachments()
+
 const inputText = ref('')
 const textareaRef = ref<HTMLTextAreaElement | null>(null)
+const fileInputRef = ref<HTMLInputElement | null>(null)
+const isDragging = ref(false)
 
 const isStreaming = computed(() => props.sessionStatus === 'streaming')
 const isConnected = computed(() => props.connectionStatus === 'connected')
-const canSend = computed(() => isConnected.value && !isStreaming.value && inputText.value.trim().length > 0)
+const canSend = computed(() =>
+  isConnected.value
+  && !isStreaming.value
+  && (inputText.value.trim().length > 0 || attachments.value.length > 0)
+)
 
 function handleKeydown(e: KeyboardEvent) {
   if (e.key === 'Enter' && !e.shiftKey) {
@@ -27,8 +35,16 @@ function handleKeydown(e: KeyboardEvent) {
 
 function handleSend() {
   if (!canSend.value) return
-  emit('send', inputText.value.trim())
+  const images = toImageBlocks()
+  const docs = toDocumentBlocks()
+  emit(
+    'send',
+    inputText.value.trim(),
+    images.length > 0 ? images : undefined,
+    docs.length > 0 ? docs : undefined
+  )
   inputText.value = ''
+  clearAttachments()
   nextTick(() => {
     if (textareaRef.value) textareaRef.value.style.height = 'auto'
   })
@@ -39,10 +55,64 @@ function autoResize(e: Event) {
   target.style.height = 'auto'
   target.style.height = Math.min(target.scrollHeight, 200) + 'px'
 }
+
+function handlePaste(e: ClipboardEvent) {
+  const files = Array.from(e.clipboardData?.files || [])
+  if (files.length > 0) {
+    e.preventDefault()
+    addFiles(files)
+  }
+}
+
+function handleDragOver(e: DragEvent) {
+  e.preventDefault()
+  isDragging.value = true
+}
+
+function handleDragLeave() {
+  isDragging.value = false
+}
+
+function handleDrop(e: DragEvent) {
+  e.preventDefault()
+  isDragging.value = false
+  const files = Array.from(e.dataTransfer?.files || [])
+  if (files.length > 0) addFiles(files)
+}
+
+function handleFileSelect(e: Event) {
+  const input = e.target as HTMLInputElement
+  if (input.files?.length) addFiles(input.files)
+  input.value = ''
+}
+
+const FILE_ACCEPT = [
+  'image/jpeg', 'image/png', 'image/gif', 'image/webp',
+  'application/pdf',
+  '.txt', '.md', '.js', '.ts', '.jsx', '.tsx', '.py', '.rb', '.rs', '.go',
+  '.java', '.c', '.cpp', '.h', '.cs', '.swift', '.kt',
+  '.json', '.yaml', '.yml', '.toml', '.ini',
+  '.xml', '.html', '.css', '.scss',
+  '.sh', '.sql', '.graphql', '.csv', '.log',
+  '.vue', '.svelte', '.prisma', '.lua', '.dart'
+].join(',')
 </script>
 
 <template>
-  <div class="border-t border-default p-4">
+  <div
+    class="border-t border-default p-4 relative"
+    @dragover="handleDragOver"
+    @dragleave="handleDragLeave"
+    @drop="handleDrop"
+  >
+    <!-- Drag overlay -->
+    <div
+      v-if="isDragging"
+      class="absolute inset-0 bg-primary/10 border-2 border-dashed border-primary rounded-lg flex items-center justify-center z-10"
+    >
+      <span class="text-sm text-primary font-medium">Drop files here</span>
+    </div>
+
     <!-- Connection status -->
     <div
       v-if="!isConnected"
@@ -52,6 +122,45 @@ function autoResize(e: Event) {
       <span>{{ connectionStatus === 'connecting' ? 'Connecting...' : 'Disconnected' }}</span>
     </div>
 
+    <!-- Attachment preview strip -->
+    <div
+      v-if="attachments.length"
+      class="flex gap-2 mb-2 flex-wrap"
+    >
+      <div
+        v-for="att in attachments"
+        :key="att.id"
+        class="relative group rounded-lg overflow-hidden border border-default"
+        :class="att.kind === 'image' ? 'size-16' : 'h-10 px-3 flex items-center gap-1.5 bg-elevated/50'"
+      >
+        <!-- Image thumbnail -->
+        <img
+          v-if="att.kind === 'image'"
+          :src="att.previewUrl"
+          :alt="att.name"
+          class="size-full object-cover"
+        >
+        <!-- Document chip -->
+        <template v-else>
+          <UIcon
+            :name="att.name.endsWith('.pdf') ? 'i-lucide-file-text' : 'i-lucide-file-code'"
+            class="size-4 text-dimmed shrink-0"
+          />
+          <span class="text-xs truncate max-w-24">{{ att.name }}</span>
+        </template>
+
+        <button
+          class="absolute top-0 right-0 p-0.5 bg-error/80 rounded-bl-lg opacity-0 group-hover:opacity-100 transition-opacity"
+          @click="removeAttachment(att.id)"
+        >
+          <UIcon
+            name="i-lucide-x"
+            class="size-3 text-white"
+          />
+        </button>
+      </div>
+    </div>
+
     <div class="flex items-start gap-2">
       <textarea
         ref="textareaRef"
@@ -62,6 +171,25 @@ function autoResize(e: Event) {
         class="flex-1 resize-none bg-elevated/50 border border-default rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 disabled:opacity-50"
         @keydown="handleKeydown"
         @input="autoResize"
+        @paste="handlePaste"
+      />
+
+      <input
+        ref="fileInputRef"
+        type="file"
+        :accept="FILE_ACCEPT"
+        multiple
+        class="hidden"
+        @change="handleFileSelect"
+      >
+
+      <UButton
+        icon="i-lucide-paperclip"
+        variant="ghost"
+        color="neutral"
+        size="md"
+        :disabled="!isConnected || isStreaming"
+        @click="fileInputRef?.click()"
       />
 
       <UButton

package/app/components/chat/ConversationList.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ChatConversation } from '~~/shared/types'
+import { formatRelativeTime } from '~~/shared/utils/formatting'
 
 defineProps<{
   conversations: ChatConversation[]
@@ -11,17 +12,6 @@ const emit = defineEmits<{
   delete: [id: string]
   new: []
 }>()
-
-function formatDate(date: Date | string) {
-  const d = new Date(date)
-  const now = new Date()
-  const diff = now.getTime() - d.getTime()
-
-  if (diff < 60000) return 'just now'
-  if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`
-  if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`
-  return d.toLocaleDateString()
-}
 </script>
 
 <template>
@@ -74,7 +64,7 @@ function formatDate(date: Date | string) {
           />
         </div>
         <div class="flex items-center gap-2 mt-1 text-xs text-dimmed">
-          <span>{{ formatDate(conv.startedAt) }}</span>
+          <span>{{ formatRelativeTime(conv.startedAt) }}</span>
           <span v-if="conv.messageCount">{{ conv.messageCount }} msgs</span>
           <span v-if="conv.totalCostUsd > 0">${{ conv.totalCostUsd.toFixed(4) }}</span>
         </div>