cognova 0.1.0

package/app/components/chat/ChatInput.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import type { ChatSessionStatus, ChatConnectionStatus } from '~~/shared/types'
+
+const props = defineProps<{
+  sessionStatus: ChatSessionStatus
+  connectionStatus: ChatConnectionStatus
+}>()
+
+const emit = defineEmits<{
+  send: [message: string]
+  interrupt: []
+}>()
+
+const inputText = ref('')
+const textareaRef = ref<HTMLTextAreaElement | null>(null)
+
+const isStreaming = computed(() => props.sessionStatus === 'streaming')
+const isConnected = computed(() => props.connectionStatus === 'connected')
+const canSend = computed(() => isConnected.value && !isStreaming.value && inputText.value.trim().length > 0)
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === 'Enter' && !e.shiftKey) {
+    e.preventDefault()
+    handleSend()
+  }
+}
+
+function handleSend() {
+  if (!canSend.value) return
+  emit('send', inputText.value.trim())
+  inputText.value = ''
+  nextTick(() => {
+    if (textareaRef.value) textareaRef.value.style.height = 'auto'
+  })
+}
+
+function autoResize(e: Event) {
+  const target = e.target as HTMLTextAreaElement
+  target.style.height = 'auto'
+  target.style.height = Math.min(target.scrollHeight, 200) + 'px'
+}
+</script>
+
+<template>
+  <div class="border-t border-default p-4">
+    <!-- Connection status -->
+    <div
+      v-if="!isConnected"
+      class="flex items-center gap-2 mb-2 text-xs text-dimmed"
+    >
+      <span class="size-2 rounded-full bg-warning" />
+      <span>{{ connectionStatus === 'connecting' ? 'Connecting...' : 'Disconnected' }}</span>
+    </div>
+
+    <div class="flex items-start gap-2">
+      <textarea
+        ref="textareaRef"
+        v-model="inputText"
+        :disabled="!isConnected || isStreaming"
+        placeholder="Send a message..."
+        rows="1"
+        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"
+      />
+
+      <UButton
+        v-if="isStreaming"
+        icon="i-lucide-square"
+        color="error"
+        variant="soft"
+        size="md"
+        @click="emit('interrupt')"
+      />
+      <UButton
+        v-else
+        icon="i-lucide-send"
+        color="primary"
+        :disabled="!canSend"
+        size="md"
+        @click="handleSend"
+      />
+    </div>
+  </div>
+</template>

package/app/components/chat/ConversationList.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import type { ChatConversation } from '~~/shared/types'
+
+defineProps<{
+  conversations: ChatConversation[]
+  activeId: string | null
+}>()
+
+const emit = defineEmits<{
+  select: [id: string]
+  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>
+  <div class="flex flex-col h-full">
+    <!-- Header -->
+    <div class="p-3 border-b border-default">
+      <UButton
+        label="New Chat"
+        icon="i-lucide-plus"
+        color="primary"
+        variant="soft"
+        block
+        @click="emit('new')"
+      />
+    </div>
+
+    <!-- Conversation list -->
+    <div class="flex-1 overflow-y-auto">
+      <div
+        v-if="conversations.length === 0"
+        class="p-4 text-sm text-dimmed text-center"
+      >
+        No conversations yet
+      </div>
+
+      <button
+        v-for="conv in conversations"
+        :key="conv.id"
+        class="w-full p-3 text-left border-b border-default hover:bg-elevated/50 transition-colors group"
+        :class="{ 'bg-elevated/50': activeId === conv.id }"
+        @click="emit('select', conv.id)"
+      >
+        <div class="flex items-start justify-between gap-2">
+          <div class="truncate text-sm font-medium">
+            {{ conv.title || 'Untitled' }}
+          </div>
+          <UButton
+            icon="i-lucide-trash-2"
+            variant="ghost"
+            color="error"
+            size="xs"
+            class="opacity-0 group-hover:opacity-100 shrink-0"
+            @click.stop="emit('delete', conv.id)"
+          />
+        </div>
+        <div class="flex items-center gap-2 mt-1 text-xs text-dimmed">
+          <span>{{ formatDate(conv.startedAt) }}</span>
+          <span v-if="conv.messageCount">{{ conv.messageCount }} msgs</span>
+          <span v-if="conv.totalCostUsd > 0">${{ conv.totalCostUsd.toFixed(4) }}</span>
+        </div>
+      </button>
+    </div>
+  </div>
+</template>

package/app/components/chat/MessageBubble.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import type { ChatMessage, ChatContentBlock } from '~~/shared/types'
+
+defineProps<{
+  message: ChatMessage
+}>()
+
+function getTextContent(blocks: ChatContentBlock[]): string {
+  return blocks
+    .filter(b => b.type === 'text')
+    .map(b => b.text)
+    .join('\n')
+}
+
+function getToolPairs(blocks: ChatContentBlock[]) {
+  const tools: { name: string, id: string, result?: string, isError?: boolean }[] = []
+  for (const block of blocks) {
+    if (block.type === 'tool_use')
+      tools.push({ name: block.name, id: block.id })
+    else if (block.type === 'tool_result') {
+      const tool = tools.find(t => t.id === block.tool_use_id)
+      if (tool) {
+        tool.result = block.content
+        tool.isError = block.is_error
+      }
+    }
+  }
+  return tools
+}
+</script>
+
+<template>
+  <div
+    class="flex"
+    :class="message.role === 'user' ? 'justify-end' : 'justify-start'"
+  >
+    <div
+      class="max-w-[85%] rounded-xl px-4 py-3"
+      :class="message.role === 'user'
+        ? 'bg-primary/5 text-highlighted'
+        : 'bg-muted'"
+    >
+      <!-- User message -->
+      <div
+        v-if="message.role === 'user'"
+        class="text-sm whitespace-pre-wrap"
+      >
+        {{ getTextContent(message.content) }}
+      </div>
+
+      <!-- Assistant message -->
+      <template v-else>
+        <!-- Text content rendered as markdown -->
+        <div
+          v-if="getTextContent(message.content)"
+          class="chat-prose prose prose-sm dark:prose-invert max-w-none"
+        >
+          <MDC :value="getTextContent(message.content)" />
+        </div>
+
+        <!-- Tool calls -->
+        <ChatToolCallBlock
+          v-for="tool in getToolPairs(message.content)"
+          :key="tool.id"
+          :tool-name="tool.name"
+          :result="tool.result"
+          :is-error="tool.isError"
+        />
+
+        <!-- Cost/duration metadata -->
+        <div
+          v-if="message.costUsd || message.durationMs"
+          class="flex items-center gap-3 mt-2 text-xs text-dimmed"
+        >
+          <span v-if="message.costUsd">${{ message.costUsd.toFixed(4) }}</span>
+          <span v-if="message.durationMs">{{ (message.durationMs / 1000).toFixed(1) }}s</span>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>

package/app/components/chat/StreamingMessage.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+defineProps<{
+  text: string
+  toolCalls: Record<string, { name: string, result?: string, isError?: boolean }>
+}>()
+</script>
+
+<template>
+  <div class="flex justify-start">
+    <div class="max-w-[85%] rounded-xl px-4 py-3 bg-elevated/50">
+      <!-- Streaming text rendered as markdown -->
+      <div
+        v-if="text"
+        class="chat-prose prose prose-sm dark:prose-invert max-w-none"
+      >
+        <MDC :value="text" />
+      </div>
+
+      <!-- Active tool calls -->
+      <ChatToolCallBlock
+        v-for="(tool, id) in toolCalls"
+        :key="id"
+        :tool-name="tool.name"
+        :result="tool.result"
+        :is-error="tool.isError"
+        :pending="!tool.result"
+      />
+
+      <!-- Streaming indicator -->
+      <div class="flex items-center gap-1.5 mt-2">
+        <span class="size-2 rounded-full bg-primary animate-pulse" />
+        <span class="text-xs text-dimmed">Thinking...</span>
+      </div>
+    </div>
+  </div>
+</template>

package/app/components/chat/ToolCallBlock.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+const props = defineProps<{
+  toolName: string
+  result?: string
+  isError?: boolean
+  pending?: boolean
+}>()
+
+const open = ref(false)
+
+const iconMap: Record<string, string> = {
+  Read: 'i-lucide-file-text',
+  Edit: 'i-lucide-pencil',
+  Write: 'i-lucide-file-plus',
+  Bash: 'i-lucide-terminal',
+  Glob: 'i-lucide-search',
+  Grep: 'i-lucide-text-search',
+  Task: 'i-lucide-git-branch',
+  WebFetch: 'i-lucide-globe',
+  WebSearch: 'i-lucide-search'
+}
+
+const icon = computed(() => iconMap[props.toolName] || 'i-lucide-wrench')
+
+const truncatedResult = computed(() => {
+  if (!props.result) return ''
+  return props.result.length > 500 ? props.result.slice(0, 500) + '...' : props.result
+})
+</script>
+
+<template>
+  <div class="border border-default rounded-lg my-2 overflow-hidden">
+    <button
+      class="flex items-center gap-2 w-full px-3 py-2 text-sm text-muted hover:bg-elevated/50 transition-colors"
+      @click="open = !open"
+    >
+      <UIcon
+        v-if="pending"
+        name="i-lucide-loader-2"
+        class="size-4 animate-spin text-primary"
+      />
+      <UIcon
+        v-else
+        :name="icon"
+        class="size-4"
+      />
+      <span class="font-mono text-xs">{{ toolName }}</span>
+      <UBadge
+        v-if="isError"
+        color="error"
+        variant="subtle"
+        size="xs"
+      >
+        error
+      </UBadge>
+      <UBadge
+        v-else-if="pending"
+        color="warning"
+        variant="subtle"
+        size="xs"
+      >
+        running
+      </UBadge>
+      <UIcon
+        :name="open ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
+        class="size-4 ms-auto"
+      />
+    </button>
+    <div
+      v-if="open && result"
+      class="border-t border-default px-3 py-2 text-xs font-mono bg-elevated/25 max-h-64 overflow-auto whitespace-pre-wrap"
+      :class="{ 'text-error': isError }"
+    >
+      {{ truncatedResult }}
+    </div>
+  </div>
+</template>

package/app/components/editor/CodeEditor.client.vue

@@ -0,0 +1,212 @@
+<script setup lang="ts">
+import { EditorView, basicSetup } from 'codemirror'
+import { EditorState, Compartment } from '@codemirror/state'
+import { oneDark } from '@codemirror/theme-one-dark'
+import { markdown } from '@codemirror/lang-markdown'
+import { javascript } from '@codemirror/lang-javascript'
+import { json } from '@codemirror/lang-json'
+import { html } from '@codemirror/lang-html'
+import { css } from '@codemirror/lang-css'
+import { vue } from '@codemirror/lang-vue'
+import { python } from '@codemirror/lang-python'
+import { sql } from '@codemirror/lang-sql'
+import { yaml } from '@codemirror/lang-yaml'
+import { rust } from '@codemirror/lang-rust'
+import { java } from '@codemirror/lang-java'
+import { cpp } from '@codemirror/lang-cpp'
+import { xml } from '@codemirror/lang-xml'
+import { StreamLanguage } from '@codemirror/language'
+import { go } from '@codemirror/legacy-modes/mode/go'
+import { shell } from '@codemirror/legacy-modes/mode/shell'
+import { dockerFile } from '@codemirror/legacy-modes/mode/dockerfile'
+import type { Extension } from '@codemirror/state'
+import type { CodeLanguage } from '~~/shared/types'
+
+const props = withDefaults(defineProps<{
+  modelValue: string
+  language?: CodeLanguage
+  readOnly?: boolean
+  placeholder?: string
+}>(), {
+  language: 'plaintext',
+  readOnly: false,
+  placeholder: ''
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const editorRef = ref<HTMLDivElement>()
+let view: EditorView | null = null
+
+const languageCompartment = new Compartment()
+const readOnlyCompartment = new Compartment()
+const editableCompartment = new Compartment()
+const themeCompartment = new Compartment()
+
+const colorMode = useColorMode()
+
+function getLanguageExtension(lang: CodeLanguage): Extension {
+  switch (lang) {
+    case 'markdown':
+      return markdown()
+    case 'javascript':
+      return javascript()
+    case 'typescript':
+      return javascript({ typescript: true })
+    case 'json':
+      return json()
+    case 'html':
+      return html()
+    case 'css':
+      return css()
+    case 'vue':
+      return vue()
+    case 'python':
+      return python()
+    case 'sql':
+      return sql()
+    case 'yaml':
+      return yaml()
+    case 'bash':
+      return StreamLanguage.define(shell)
+    case 'go':
+      return StreamLanguage.define(go)
+    case 'rust':
+      return rust()
+    case 'dockerfile':
+      return StreamLanguage.define(dockerFile)
+    case 'java':
+      return java()
+    case 'cpp':
+      return cpp()
+    case 'xml':
+      return xml()
+    default:
+      return []
+  }
+}
+
+function getThemeExtension(): Extension[] {
+  const baseTheme = EditorView.theme({
+    '&': {
+      height: '100%',
+      fontSize: '14px'
+    },
+    '.cm-scroller': {
+      overflow: 'auto',
+      fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace'
+    },
+    '.cm-content': {
+      padding: '12px 0'
+    },
+    '.cm-line': {
+      padding: '0 16px'
+    },
+    '&.cm-focused': {
+      outline: 'none'
+    }
+  })
+
+  // Use One Dark theme for dark mode
+  if (colorMode.value === 'dark')
+    return [baseTheme, oneDark]
+
+  return [baseTheme]
+}
+
+onMounted(() => {
+  if (!editorRef.value) return
+
+  const extensions: Extension[] = [
+    basicSetup,
+    languageCompartment.of(getLanguageExtension(props.language)),
+    readOnlyCompartment.of(EditorState.readOnly.of(props.readOnly)),
+    editableCompartment.of(EditorView.editable.of(!props.readOnly)),
+    themeCompartment.of(getThemeExtension()),
+    EditorView.updateListener.of((update) => {
+      if (update.docChanged) {
+        emit('update:modelValue', update.state.doc.toString())
+      }
+    })
+  ]
+
+  view = new EditorView({
+    state: EditorState.create({
+      doc: props.modelValue,
+      extensions
+    }),
+    parent: editorRef.value
+  })
+})
+
+// Watch for external content changes
+watch(() => props.modelValue, (newVal) => {
+  if (view && newVal !== view.state.doc.toString()) {
+    view.dispatch({
+      changes: { from: 0, to: view.state.doc.length, insert: newVal }
+    })
+  }
+})
+
+// Watch for language changes
+watch(() => props.language, (newLang) => {
+  if (view) {
+    view.dispatch({
+      effects: languageCompartment.reconfigure(getLanguageExtension(newLang))
+    })
+  }
+})
+
+// Watch for readOnly changes
+watch(() => props.readOnly, (newReadOnly) => {
+  if (view) {
+    view.dispatch({
+      effects: [
+        readOnlyCompartment.reconfigure(EditorState.readOnly.of(newReadOnly)),
+        editableCompartment.reconfigure(EditorView.editable.of(!newReadOnly))
+      ]
+    })
+  }
+})
+
+// Watch for theme changes
+watch(() => colorMode.value, () => {
+  if (view) {
+    view.dispatch({
+      effects: themeCompartment.reconfigure(getThemeExtension())
+    })
+  }
+})
+
+onUnmounted(() => {
+  view?.destroy()
+  view = null
+})
+</script>
+
+<template>
+  <div
+    ref="editorRef"
+    class="code-editor h-full overflow-hidden"
+  />
+</template>
+
+<style>
+.code-editor .cm-editor {
+  height: 100%;
+}
+
+/* Light mode */
+.code-editor .cm-editor {
+  background-color: var(--ui-bg);
+}
+
+.code-editor .cm-gutters {
+  background-color: var(--ui-bg-muted);
+  border-right: 1px solid var(--ui-border);
+}
+
+/* Dark mode adjustments are handled by CodeMirror's dark option */
+</style>

package/app/components/editor/CodeEditorFallback.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+// Loading fallback shown during SSR hydration
+</script>
+
+<template>
+  <div class="h-full flex items-center justify-center bg-muted/50">
+    <UIcon
+      name="i-lucide-loader-2"
+      class="size-6 animate-spin text-dimmed"
+    />
+  </div>
+</template>