feat(chat): add multi-model comparison mode (M9.1)

Split-screen comparison of two AI models streaming simultaneously.
Toggle via header button. Desktop shows side-by-side panes, mobile
shows swipeable tabs. Uses streamWithModel() for provider-agnostic
parallel streaming.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

packages/app/src/components/chat/ChatHeader.vue

@@ -45,6 +45,20 @@
         </svg>
       </button>
 
+      <button
+        class="w-9 h-9 rounded-xl path-glass-icon flex items-center justify-center transition-colors"
+        :class="comparison.isComparing.value
+          ? 'text-accent'
+          : 'text-white/70 hover:text-white'"
+        :title="comparison.isComparing.value ? 'Comparison mode on' : 'Compare models'"
+        aria-label="Toggle model comparison"
+        @click="comparison.toggleComparison()"
+      >
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7" />
+        </svg>
+      </button>
+
       <button
         ref="menuTriggerRef"
         class="w-9 h-9 rounded-xl path-glass-icon flex items-center justify-center transition-colors text-white/70 hover:text-white"
@@ -234,6 +248,7 @@ import { useAI } from '@/composables/useAI'
 import { useContentPanel } from '@/composables/useContentPanel'
 import { downloadConversation, type ExportFormat } from '@/utils/conversation-export'
 import { parseImportFile } from '@/utils/conversation-import'
+import { useComparisonMode } from '@/composables/useComparisonMode'
 
 defineProps<{
   title: string
@@ -249,6 +264,7 @@ defineEmits<{
 }>()
 
 const { activeProvider, activeModel, availableProviders, setProvider, setModel } = useAI()
+const comparison = useComparisonMode()
 const chatStore = useChatStore()
 const webSearchEnabled = computed(() => chatStore.webSearchEnabled)
 const showModelPicker = ref(false)

packages/app/src/components/chat/ChatWindow.vue

@@ -81,9 +81,15 @@
       </div>
     </div>
 
+    <!-- Comparison mode split view -->
+    <ComparisonView
+      v-if="comparison.isComparing.value && (comparison.response1.value || comparison.response2.value)"
+      class="flex-1 min-h-0"
+    />
+
     <ChatInput
-      :disabled="isStreaming"
-      :streaming="isStreaming"
+      :disabled="isStreaming || comparison.isAnyStreaming.value"
+      :streaming="isStreaming || comparison.isAnyStreaming.value"
       :placeholder="isStreaming ? 'Waiting for response...' : 'Message AIUI...'"
       :reply-to="replyTo"
       @send="handleSend"
@@ -98,8 +104,9 @@
 import { computed, ref, watch, nextTick } from 'vue'
 import { useVirtualizer } from '@tanstack/vue-virtual'
 import { useChatStore } from '@/stores/chat'
-import { useAI } from '@/composables/useAI'
+import { useAI, streamWithModel } from '@/composables/useAI'
 import { useContentPanel } from '@/composables/useContentPanel'
+import { useComparisonMode } from '@/composables/useComparisonMode'
 import ChatHeader from './ChatHeader.vue'
 import ChatMessage from './ChatMessage.vue'
 import ChatInput from './ChatInput.vue'
@@ -108,6 +115,7 @@ import PromptIndex from './PromptIndex.vue'
 import BranchSwitcher from './BranchSwitcher.vue'
 import ChatSearch from './ChatSearch.vue'
 import ContextBar from './ContextBar.vue'
+import ComparisonView from './ComparisonView.vue'
 import ErrorBoundary from '@/components/ui/ErrorBoundary.vue'
 import type { Message } from '@aiui/core/types/message'
 
@@ -134,6 +142,7 @@ const { sendMessage, stopGeneration, editAndResend, regenerateLastResponse } = u
 const { updatePanelFromText, panelOpen, activeTab, availableTabs, setActiveTab } = useContentPanel()
 import { useCodeContext } from '@/composables/useCodeContext'
 const codeContext = useCodeContext()
+const comparison = useComparisonMode()
 const messageListRef = ref<HTMLElement | null>(null)
 const chatSearchRef = ref<InstanceType<typeof ChatSearch> | null>(null)
 
@@ -216,6 +225,7 @@ function handleNewChat() {
 
 function handleStop() {
   stopGeneration()
+  comparison.stopComparison()
 }
 
 async function handleEdit(messageId: string, newContent: string) {
@@ -302,6 +312,16 @@ async function handleSend(text: string) {
     finalText = `${quoteLine}\n\n${text}`
     clearReply()
   }
+
+  // Comparison mode: stream to both models simultaneously
+  if (comparison.isComparing.value) {
+    const convId = chatStore.activeConversationId ?? chatStore.createConversation()
+    chatStore.addMessage(convId, { role: 'user', content: finalText })
+    const history = chatStore.messages.map(m => ({ role: m.role, content: m.content }))
+    await comparison.streamBothModels(streamWithModel, history)
+    return
+  }
+
   await sendMessage(finalText)
 }
 

packages/app/src/components/chat/ComparisonView.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="flex flex-col h-full">
+    <!-- Mobile tabs -->
+    <div class="flex md:hidden gap-1 px-3 pt-2">
+      <button
+        v-for="(tab, i) in tabs"
+        :key="i"
+        class="flex-1 text-xs py-1.5 rounded-lg transition-all"
+        :class="activeTab === i
+          ? 'bg-accent/20 text-accent'
+          : 'text-white/50 hover:text-white/70'"
+        @click="activeTab = i"
+      >
+        {{ tab }}
+      </button>
+    </div>
+
+    <!-- Split panes -->
+    <div class="flex-1 min-h-0 flex gap-0.5 p-2">
+      <!-- Model 1 -->
+      <div
+        class="flex-1 min-w-0 flex flex-col glass rounded-xl overflow-hidden"
+        :class="{ 'hidden md:flex': activeTab !== 0 }"
+      >
+        <div class="px-3 py-2 flex items-center justify-between border-b border-white/5">
+          <span class="text-[10px] text-accent font-medium truncate">{{ model1Label }}</span>
+          <span v-if="isStreaming1" class="text-[10px] text-white/30 animate-pulse">streaming...</span>
+        </div>
+        <div class="flex-1 overflow-y-auto p-3">
+          <div
+            v-if="response1"
+            class="chat-markdown text-sm leading-relaxed break-words text-white/90"
+            v-html="rendered1"
+          />
+          <div v-else-if="error1" class="text-sm text-red-400/80">{{ error1 }}</div>
+          <div v-else class="text-sm text-white/25 italic">Waiting for response...</div>
+        </div>
+      </div>
+
+      <!-- Model 2 -->
+      <div
+        class="flex-1 min-w-0 flex flex-col glass rounded-xl overflow-hidden"
+        :class="{ 'hidden md:flex': activeTab !== 1 }"
+      >
+        <div class="px-3 py-2 flex items-center justify-between border-b border-white/5">
+          <span class="text-[10px] text-accent font-medium truncate">{{ model2Label }}</span>
+          <span v-if="isStreaming2" class="text-[10px] text-white/30 animate-pulse">streaming...</span>
+        </div>
+        <div class="flex-1 overflow-y-auto p-3">
+          <div
+            v-if="response2"
+            class="chat-markdown text-sm leading-relaxed break-words text-white/90"
+            v-html="rendered2"
+          />
+          <div v-else-if="error2" class="text-sm text-red-400/80">{{ error2 }}</div>
+          <div v-else class="text-sm text-white/25 italic">Waiting for response...</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import MarkdownIt from 'markdown-it'
+import { useComparisonMode } from '@/composables/useComparisonMode'
+
+const { model1, model2, response1, response2, isStreaming1, isStreaming2, error1, error2 } = useComparisonMode()
+
+const activeTab = ref(0)
+const tabs = computed(() => [model1Label.value, model2Label.value])
+
+const model1Label = computed(() => `${model1.value.provider}/${model1.value.model}`.split('/').pop() ?? 'Model 1')
+const model2Label = computed(() => `${model2.value.provider}/${model2.value.model}`.split('/').pop() ?? 'Model 2')
+
+const md = new MarkdownIt({ html: false, linkify: true, breaks: true })
+const rendered1 = computed(() => md.render(response1.value))
+const rendered2 = computed(() => md.render(response2.value))
+</script>