refactor: migrate WorkspaceView chat to use ChatPanel component

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

frontend/src/views/WorkspaceView.vue

@@ -3,28 +3,14 @@ import { ref, computed, onMounted, onUnmounted, watch, nextTick } from "vue";
 import { useRoute } from "vue-router";
 import { apiGet } from "@/api/client";
 import { useChatStore } from "@/stores/chat";
-import { useSettingsStore } from "@/stores/settings";
 import { useToastStore } from "@/stores/toast";
-import { useListenMode } from "@/composables/useListenMode";
+import ChatPanel from "@/components/ChatPanel.vue";
-import { useStreamingTts } from "@/composables/useStreamingTts";
-import { renderMarkdown } from "@/utils/markdown";
-import ChatMessage from "@/components/ChatMessage.vue";
-import ToolCallCard from "@/components/ToolCallCard.vue";
-import ToolConfirmCard from "@/components/ToolConfirmCard.vue";
 import WorkspaceTaskPanel from "@/components/WorkspaceTaskPanel.vue";
 import WorkspaceNoteEditor from "@/components/WorkspaceNoteEditor.vue";
 
 const route = useRoute();
 const chatStore = useChatStore();
-const settingsStore = useSettingsStore();
 const toast = useToastStore();
-const listenMode = useListenMode();
-const voiceTtsEnabled = computed(() => settingsStore.voiceTtsReady);
-const tts = useStreamingTts({
-  streamingContent: computed(() => chatStore.streamingContent),
-  streaming: computed(() => chatStore.streaming),
-  enabled: computed(() => listenMode.value && voiceTtsEnabled.value),
-});
 
 const projectId = computed(() => Number(route.params.projectId));
 
@@ -35,9 +21,7 @@ interface Project {
 }
 
 const project = ref<Project | null>(null);
-const messageInput = ref("");
+const chatPanelRef = ref<InstanceType<typeof ChatPanel> | null>(null);
-const messagesEl = ref<HTMLElement | null>(null);
-const inputEl = ref<HTMLTextAreaElement | null>(null);
 const taskPanelRef = ref<InstanceType<typeof WorkspaceTaskPanel> | null>(null);
 const noteEditorRef = ref<InstanceType<typeof WorkspaceNoteEditor> | null>(null);
 const activeNoteId = ref<number | null>(null);
@@ -74,7 +58,7 @@ const gridColumns = computed(() => {
   ].join(" ");
 });
 
-// SSE watcher
+// SSE watcher — auto-load notes/tasks when tool calls succeed
 const processedCount = ref(0);
 
 watch(
@@ -105,29 +89,10 @@ watch(
 watch(
   () => chatStore.streaming,
   (s) => {
-    if (!s) {
+    if (!s) processedCount.value = 0;
-      processedCount.value = 0;
-      scrollToBottom();
-    }
   }
 );
 
-const streamingRendered = computed(() => {
-  if (!chatStore.streamingContent) return "";
-  return renderMarkdown(chatStore.streamingContent);
-});
-
-function scrollToBottom() {
-  nextTick(() => {
-    if (messagesEl.value) {
-      messagesEl.value.scrollTop = messagesEl.value.scrollHeight;
-    }
-  });
-}
-
-watch(() => chatStore.streamingContent, scrollToBottom);
-watch(() => chatStore.currentConversation?.messages.length, scrollToBottom);
-
 function togglePanel(panel: keyof typeof panelOpen.value) {
   const open = panelOpen.value;
   const openCount = [open.tasks, open.chat, open.notes].filter(Boolean).length;
@@ -137,54 +102,7 @@ function togglePanel(panel: keyof typeof panelOpen.value) {
 }
 
 function prefill(text: string) {
-  messageInput.value = text;
+  chatPanelRef.value?.prefill(text);
-  nextTick(() => inputEl.value?.focus());
-}
-
-async function sendMessage() {
-  const content = messageInput.value.trim();
-  if (!content) return;
-
-  messageInput.value = "";
-  resetTextareaHeight();
-
-  await chatStore.sendMessage(
-    content,
-    undefined,
-    undefined,
-    true,
-    undefined,
-    undefined,
-    projectId.value,
-    projectId.value,
-  );
-  scrollToBottom();
-  nextTick(() => inputEl.value?.focus());
-}
-
-function onInputKeydown(e: KeyboardEvent) {
-  if (e.key === "Enter" && !e.shiftKey) {
-    e.preventDefault();
-    sendMessage();
-  }
-  if (e.key === "Escape") {
-    // Prevent App.vue from navigating home when textarea is focused
-    e.stopPropagation();
-    inputEl.value?.blur();
-  }
-}
-
-function autoResize() {
-  const el = inputEl.value;
-  if (!el) return;
-  el.style.height = "auto";
-  el.style.height = Math.min(el.scrollHeight, 150) + "px";
-}
-
-function resetTextareaHeight() {
-  const el = inputEl.value;
-  if (!el) return;
-  el.style.height = "auto";
 }
 
 onMounted(async () => {
@@ -225,7 +143,7 @@ onMounted(async () => {
     localStorage.setItem(key, String(conv.id));
   }
 
-  nextTick(() => inputEl.value?.focus());
+  nextTick(() => chatPanelRef.value?.focus());
 });
 
 onUnmounted(async () => {
@@ -290,130 +208,30 @@ onUnmounted(async () => {
       </div>
 
       <!-- Center: Chat -->
-      <div v-show="panelOpen.chat" class="ws-panel ws-chat-panel">
+      <div v-show="panelOpen.chat" class="ws-panel ws-panel-chat">
-        <div class="chat-messages" ref="messagesEl">
+        <Transition name="panel-fade">
-          <template v-if="chatStore.currentConversation">
+          <div v-if="panelOpen.chat" class="panel-inner panel-inner-chat">
-            <ChatMessage
+            <!-- Quick chips (shown when conversation is empty) -->
-              v-for="msg in chatStore.currentConversation.messages"
-              :key="msg.id"
-              :message="msg"
-            />
-          </template>
-
-          <!-- Streaming bubble -->
-          <div v-if="chatStore.streaming" class="chat-message role-assistant">
-            <div class="message-bubble streaming-bubble">
-              <div class="message-header">
-                <span class="role-label">{{ settingsStore.assistantName }}</span>
-              </div>
-              <div v-if="chatStore.streamingToolCalls.length" class="streaming-tool-calls">
-                <ToolCallCard
-                  v-for="(tc, i) in chatStore.streamingToolCalls"
-                  :key="i"
-                  :tool-call="tc"
-                />
-              </div>
-              <ToolConfirmCard
-                v-if="chatStore.streamingPendingTool"
-                :pending-tool="chatStore.streamingPendingTool"
-                @accept="chatStore.confirmTool(true)"
-                @decline="chatStore.confirmTool(false)"
-              />
-              <div v-if="chatStore.streamingStatus" class="streaming-status-line">
-                <span class="streaming-status-dot"></span>
-                {{ chatStore.streamingStatus }}
-              </div>
-              <details
-                v-if="chatStore.streamingThinking"
-                class="thinking-block"
-                :open="!chatStore.streamingContent"
-              >
-                <summary class="thinking-summary">Reasoning</summary>
-                <pre class="thinking-text">{{ chatStore.streamingThinking }}</pre>
-              </details>
-              <div class="message-content prose" v-html="streamingRendered"></div>
-              <span
-                v-if="!chatStore.streamingStatus && !chatStore.streamingThinking"
-                class="typing-indicator"
-              ></span>
-            </div>
-          </div>
-
-          <!-- Queued messages — shown as pending bubbles -->
-          <template v-if="chatStore.queuedMessages.length">
             <div
-              v-for="(q, i) in chatStore.queuedMessages"
+              v-if="chatStore.currentConversation && !chatStore.currentConversation.messages.length && !chatStore.streaming"
-              :key="`queued-${i}`"
+              class="empty-chat-prompt"
-              class="ws-message role-user queued-message"
             >
-              <div class="message-bubble queued-bubble">
+              <p class="empty-hint">What would you like to work on?</p>
-                <div class="queued-badge">Queued</div>
+              <div class="quick-chips">
-                <div class="message-content">{{ q.content }}</div>
+                <button class="quick-chip" @click="prefill('Summarize the current status of this project')">📊 Project status</button>
+                <button class="quick-chip" @click="prefill('Create a note about ')">📝 New note</button>
+                <button class="quick-chip" @click="prefill('Add tasks for ')">✓ Add tasks</button>
               </div>
             </div>
-            <div class="queued-clear-row">
+            <ChatPanel
-              <button class="queued-clear-btn" @click="chatStore.clearQueue()" aria-label="Cancel queued messages">
+              ref="chatPanelRef"
-                Cancel {{ chatStore.queuedMessages.length }} queued
+              variant="full"
-              </button>
+              :projectId="projectId"
-            </div>
+              placeholder="Message the agent… (Enter to send)"
-          </template>
+              class="ws-chat-panel"
-
+            />
-          <div
-            v-if="chatStore.currentConversation && !chatStore.currentConversation.messages.length && !chatStore.streaming"
-            class="empty-chat-prompt"
-          >
-            <p class="empty-hint">What would you like to work on?</p>
-            <div class="quick-chips">
-              <button class="quick-chip" @click="prefill('Summarize the current status of this project')">📊 Project status</button>
-              <button class="quick-chip" @click="prefill('Create a note about ')">📝 New note</button>
-              <button class="quick-chip" @click="prefill('Add tasks for ')">✓ Add tasks</button>
-            </div>
           </div>
-        </div>
+        </Transition>
-
-        <div class="chat-input-area">
-          <textarea
-            ref="inputEl"
-            v-model="messageInput"
-            class="chat-input"
-            :placeholder="chatStore.streaming ? 'Type to queue next message… (Enter to queue)' : 'Message the agent… (Enter to send)'"
-            rows="1"
-            @keydown="onInputKeydown"
-            @input="autoResize"
-          ></textarea>
-          <!-- Listen mode toggle (TTS) -->
-          <button
-            v-if="voiceTtsEnabled"
-            class="btn-listen-ws"
-            :class="{ 'btn-listen-ws--active': listenMode, 'btn-listen-ws--busy': tts.speaking.value }"
-            :title="listenMode ? 'Stop auto-read' : 'Read responses aloud'"
-            aria-label="Toggle listen mode"
-            @click="listenMode = !listenMode; if (listenMode) tts.speak([...chatStore.currentConversation?.messages ?? []].reverse().find(m => m.role === 'assistant')?.content ?? ''); else tts.stop()"
-          >
-            <svg v-if="!tts.speaking.value" width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-              <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
-            </svg>
-            <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-              <path d="M18 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C21.8 14.82 22 13.43 22 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>
-            </svg>
-          </button>
-          <button
-            v-if="chatStore.streaming"
-            class="btn-abort"
-            title="Stop generation"
-            @click="chatStore.cancelGeneration()"
-          >
-            ■ Stop
-          </button>
-          <button
-            v-else
-            class="btn-send"
-            :disabled="!messageInput.trim()"
-            @click="sendMessage"
-          >
-            Send
-          </button>
-        </div>
       </div>
 
       <!-- Right: Note Editor -->
@@ -527,25 +345,31 @@ onUnmounted(async () => {
 }
 
 /* Chat panel */
-.ws-chat-panel {
+.ws-panel-chat {
-  display: flex;
-  flex-direction: column;
   border-left: 1px solid var(--color-border);
   border-right: 1px solid var(--color-border);
-}
-
-.chat-messages {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1rem;
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+}
+
+.panel-inner-chat {
+  position: relative;
+}
+
+.ws-chat-panel {
+  flex: 1;
+  min-height: 0;
 }
 
 .empty-chat-prompt {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   text-align: center;
   padding: 2rem 1rem;
+  pointer-events: none;
+  z-index: 1;
 }
 .empty-hint {
   margin: 0 0 1rem;
@@ -557,6 +381,7 @@ onUnmounted(async () => {
   flex-wrap: wrap;
   gap: 0.5rem;
   justify-content: center;
+  pointer-events: auto;
 }
 .quick-chip {
   background: var(--color-surface);
@@ -574,234 +399,4 @@ onUnmounted(async () => {
   color: var(--color-primary);
   background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
 }
-
-.chat-input-area {
-  display: flex;
-  gap: 0.5rem;
-  padding: 0.6rem;
-  border-top: 1px solid var(--color-border);
-  flex-shrink: 0;
-}
-
-.chat-input {
-  flex: 1;
-  resize: none;
-  background: var(--color-input-bg, var(--color-bg));
-  border: 1px solid var(--color-border);
-  border-radius: 6px;
-  padding: 0.4rem 0.6rem;
-  font-size: 0.875rem;
-  font-family: inherit;
-  color: var(--color-text);
-  line-height: 1.5;
-  overflow-y: hidden;
-}
-.chat-input:focus {
-  outline: none;
-  border-color: var(--color-primary);
-}
-
-.btn-send {
-  background: var(--color-primary);
-  color: #fff;
-  border: none;
-  border-radius: 6px;
-  padding: 0.4rem 0.9rem;
-  font-size: 0.875rem;
-  cursor: pointer;
-  align-self: flex-end;
-}
-.btn-send:disabled {
-  opacity: 0.4;
-  cursor: default;
-}
-
-.btn-abort {
-  background: none;
-  color: var(--color-danger, #e74c3c);
-  border: 1px solid var(--color-danger, #e74c3c);
-  border-radius: 6px;
-  padding: 0.4rem 0.9rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  cursor: pointer;
-  align-self: flex-end;
-  white-space: nowrap;
-}
-.btn-abort:hover {
-  background: var(--color-danger, #e74c3c);
-  color: #fff;
-}
-
-.btn-listen-ws {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: transparent;
-  color: var(--color-text-muted);
-  cursor: pointer;
-  transition: color 0.15s, background 0.15s, border-color 0.15s;
-}
-.btn-listen-ws:hover {
-  color: var(--color-text);
-  border-color: var(--color-primary);
-}
-.btn-listen-ws--active {
-  color: var(--color-primary);
-  border-color: var(--color-primary);
-  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
-}
-.btn-listen-ws--busy {
-  color: var(--color-primary);
-  animation: pulse 1.2s ease-in-out infinite;
-}
-
-/* Streaming indicators (mirror ChatView) */
-.chat-message {
-  display: flex;
-}
-.role-assistant {
-  justify-content: flex-start;
-}
-.message-bubble {
-  max-width: 85%;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: 10px;
-  padding: 0.65rem 0.85rem;
-}
-.message-header {
-  margin-bottom: 0.3rem;
-}
-.role-label {
-  font-size: 0.72rem;
-  font-weight: 600;
-  color: var(--color-primary);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-.streaming-tool-calls {
-  margin-bottom: 0.4rem;
-}
-.streaming-status-line {
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-  font-size: 0.8rem;
-  color: var(--color-text-muted);
-  margin-bottom: 0.3rem;
-}
-.streaming-status-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--color-primary);
-  animation: pulse 1s infinite;
-}
-.typing-indicator {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--color-primary);
-  animation: pulse 1s infinite;
-}
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.3; }
-}
-
-.message-content :deep(p) { margin: 0 0 0.5em; }
-.message-content :deep(p:last-child) { margin-bottom: 0; }
-
-.thinking-block {
-  margin-bottom: 0.5rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  overflow: hidden;
-}
-.thinking-summary {
-  padding: 0.25rem 0.5rem;
-  font-size: 0.72rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--color-text-muted);
-  cursor: pointer;
-  user-select: none;
-  list-style: none;
-  display: flex;
-  align-items: center;
-  gap: 0.3rem;
-  background: var(--color-bg-secondary);
-}
-.thinking-summary::-webkit-details-marker { display: none; }
-.thinking-summary::before {
-  content: "▶";
-  font-size: 0.6rem;
-  transition: transform 0.15s;
-}
-details[open] .thinking-summary::before {
-  transform: rotate(90deg);
-}
-.thinking-text {
-  margin: 0;
-  padding: 0.5rem;
-  font-size: 0.8rem;
-  line-height: 1.5;
-  color: var(--color-text-secondary);
-  white-space: pre-wrap;
-  word-break: break-word;
-  max-height: 300px;
-  overflow-y: auto;
-}
-.ws-message.role-user {
-  display: flex;
-  justify-content: flex-end;
-}
-.queued-bubble {
-  max-width: 80%;
-  padding: 0.75rem 1rem;
-  border-radius: 18px;
-  border-bottom-right-radius: 4px;
-  background: linear-gradient(135deg, #6366f1, #4f46e5);
-  color: #fff;
-  opacity: 0.45;
-  font-size: 0.95rem;
-  line-height: 1.55;
-  word-break: break-word;
-}
-.queued-badge {
-  font-size: 0.65rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: rgba(255, 255, 255, 0.75);
-  margin-bottom: 0.2rem;
-}
-.queued-clear-row {
-  display: flex;
-  justify-content: flex-end;
-  padding-right: 0.5rem;
-}
-.queued-clear-btn {
-  background: none;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm, 6px);
-  cursor: pointer;
-  color: var(--color-text-muted);
-  font-size: 0.78rem;
-  padding: 0.2rem 0.6rem;
-  font-family: inherit;
-}
-.queued-clear-btn:hover {
-  color: var(--color-danger, #e74c3c);
-  border-color: var(--color-danger, #e74c3c);
-}
 </style>