cognova 0.2.13 → 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/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>

package/app/components/files/FileTree.vue

@@ -68,40 +68,29 @@ const showNewFileModal = ref(false)
 const showNewFolderModal = ref(false)
 const showRenameModal = ref(false)
 const showDeleteConfirm = ref(false)
-const newItemName = ref('')
 
 const contextMenuItems = computed(() => [
   [{
     label: 'New File',
     icon: 'i-lucide-file-plus',
-    onSelect: () => {
-      newItemName.value = ''
-      showNewFileModal.value = true
-    }
+    onSelect: () => { showNewFileModal.value = true }
   }, {
     label: 'New Folder',
     icon: 'i-lucide-folder-plus',
-    onSelect: () => {
-      newItemName.value = ''
-      showNewFolderModal.value = true
-    }
+    onSelect: () => { showNewFolderModal.value = true }
   }],
   [{
     label: 'Rename',
     icon: 'i-lucide-pencil',
     onSelect: () => {
-      if (contextMenuTarget.value) {
-        newItemName.value = contextMenuTarget.value.label
+      if (contextMenuTarget.value)
         showRenameModal.value = true
-      }
     }
   }, {
     label: 'Delete',
     icon: 'i-lucide-trash-2',
     color: 'error' as const,
-    onSelect: () => {
-      showDeleteConfirm.value = true
-    }
+    onSelect: () => { showDeleteConfirm.value = true }
   }]
 ])
 
@@ -112,18 +101,14 @@ function handleSelect(item: TreeItem) {
   }
 }
 
-async function handleCreateFile() {
-  if (!newItemName.value.trim()) return
-
+async function handleCreateFile(name: string) {
   const parentPath = contextMenuTarget.value?.type === 'directory'
     ? contextMenuTarget.value.path
     : '/'
 
-  // Add .md extension if not present
-  let filename = newItemName.value.trim()
-  if (!filename.includes('.')) {
+  let filename = name
+  if (!filename.includes('.'))
     filename += '.md'
-  }
 
   try {
     const path = await createFile(parentPath, filename)
@@ -132,39 +117,28 @@ async function handleCreateFile() {
   } catch {
     // Error handled in composable
   }
-
-  showNewFileModal.value = false
-  newItemName.value = ''
 }
 
-async function handleCreateFolder() {
-  if (!newItemName.value.trim()) return
-
+async function handleCreateFolder(name: string) {
   const parentPath = contextMenuTarget.value?.type === 'directory'
     ? contextMenuTarget.value.path
     : '/'
 
   try {
-    await createFolder(parentPath, newItemName.value.trim())
+    await createFolder(parentPath, name)
   } catch {
     // Error handled in composable
   }
-
-  showNewFolderModal.value = false
-  newItemName.value = ''
 }
 
-async function handleRename() {
-  if (!contextMenuTarget.value || !newItemName.value.trim()) return
+async function handleRename(name: string) {
+  if (!contextMenuTarget.value) return
 
   try {
-    await renameItem(contextMenuTarget.value.path, newItemName.value.trim())
+    await renameItem(contextMenuTarget.value.path, name)
   } catch {
     // Error handled in composable
   }
-
-  showRenameModal.value = false
-  newItemName.value = ''
 }
 
 async function handleDelete() {
@@ -175,8 +149,6 @@ async function handleDelete() {
   } catch {
     // Error handled in composable
   }
-
-  showDeleteConfirm.value = false
 }
 
 onMounted(() => {
@@ -270,167 +242,16 @@ onMounted(() => {
       </UTree>
     </UContextMenu>
 
-    <!-- New File Modal -->
-    <UModal v-model:open="showNewFileModal">
-      <template #content>
-        <UCard>
-          <template #header>
-            <div class="flex items-center gap-2">
-              <UIcon
-                name="i-lucide-file-plus"
-                class="size-5"
-              />
-              <span class="font-semibold">New File</span>
-            </div>
-          </template>
-
-          <UInput
-            v-model="newItemName"
-            placeholder="filename.md"
-            autofocus
-            @keyup.enter="handleCreateFile"
-          />
-
-          <template #footer>
-            <div class="flex justify-end gap-2">
-              <UButton
-                color="neutral"
-                variant="ghost"
-                @click="showNewFileModal = false"
-              >
-                Cancel
-              </UButton>
-              <UButton @click="handleCreateFile">
-                Create
-              </UButton>
-            </div>
-          </template>
-        </UCard>
-      </template>
-    </UModal>
-
-    <!-- New Folder Modal -->
-    <UModal v-model:open="showNewFolderModal">
-      <template #content>
-        <UCard>
-          <template #header>
-            <div class="flex items-center gap-2">
-              <UIcon
-                name="i-lucide-folder-plus"
-                class="size-5"
-              />
-              <span class="font-semibold">New Folder</span>
-            </div>
-          </template>
-
-          <UInput
-            v-model="newItemName"
-            placeholder="folder-name"
-            autofocus
-            @keyup.enter="handleCreateFolder"
-          />
-
-          <template #footer>
-            <div class="flex justify-end gap-2">
-              <UButton
-                color="neutral"
-                variant="ghost"
-                @click="showNewFolderModal = false"
-              >
-                Cancel
-              </UButton>
-              <UButton @click="handleCreateFolder">
-                Create
-              </UButton>
-            </div>
-          </template>
-        </UCard>
-      </template>
-    </UModal>
-
-    <!-- Rename Modal -->
-    <UModal v-model:open="showRenameModal">
-      <template #content>
-        <UCard>
-          <template #header>
-            <div class="flex items-center gap-2">
-              <UIcon
-                name="i-lucide-pencil"
-                class="size-5"
-              />
-              <span class="font-semibold">Rename</span>
-            </div>
-          </template>
-
-          <UInput
-            v-model="newItemName"
-            placeholder="new-name"
-            autofocus
-            @keyup.enter="handleRename"
-          />
-
-          <template #footer>
-            <div class="flex justify-end gap-2">
-              <UButton
-                color="neutral"
-                variant="ghost"
-                @click="showRenameModal = false"
-              >
-                Cancel
-              </UButton>
-              <UButton @click="handleRename">
-                Rename
-              </UButton>
-            </div>
-          </template>
-        </UCard>
-      </template>
-    </UModal>
-
-    <!-- Delete Confirmation -->
-    <UModal v-model:open="showDeleteConfirm">
-      <template #content>
-        <UCard>
-          <template #header>
-            <div class="flex items-center gap-2 text-error">
-              <UIcon
-                name="i-lucide-trash-2"
-                class="size-5"
-              />
-              <span class="font-semibold">Delete</span>
-            </div>
-          </template>
-
-          <p>
-            Are you sure you want to delete
-            <strong>{{ contextMenuTarget?.label }}</strong>?
-          </p>
-          <p
-            v-if="contextMenuTarget?.type === 'directory'"
-            class="text-sm text-dimmed mt-1"
-          >
-            This will delete all files and folders inside.
-          </p>
-
-          <template #footer>
-            <div class="flex justify-end gap-2">
-              <UButton
-                color="neutral"
-                variant="ghost"
-                @click="showDeleteConfirm = false"
-              >
-                Cancel
-              </UButton>
-              <UButton
-                color="error"
-                @click="handleDelete"
-              >
-                Delete
-              </UButton>
-            </div>
-          </template>
-        </UCard>
-      </template>
-    </UModal>
+    <FilesFileTreeModals
+      v-model:show-new-file="showNewFileModal"
+      v-model:show-new-folder="showNewFolderModal"
+      v-model:show-rename="showRenameModal"
+      v-model:show-delete="showDeleteConfirm"
+      :context-target="contextMenuTarget"
+      @create-file="handleCreateFile"
+      @create-folder="handleCreateFolder"
+      @rename="handleRename"
+      @delete="handleDelete"
+    />
   </div>
 </template>