feat(web): chat UI with conversations and WebSocket streaming (#84)

Co-authored-by: Jason Woltje <jason@diversecanvas.com>
Co-committed-by: Jason Woltje <jason@diversecanvas.com>

apps/web/src/components/chat/chat-input.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { useRef, useState } from 'react';
+
+interface ChatInputProps {
+  onSend: (content: string) => void;
+  disabled?: boolean;
+}
+
+export function ChatInput({ onSend, disabled }: ChatInputProps): React.ReactElement {
+  const [value, setValue] = useState('');
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  function handleSubmit(e: React.FormEvent): void {
+    e.preventDefault();
+    const trimmed = value.trim();
+    if (!trimmed || disabled) return;
+    onSend(trimmed);
+    setValue('');
+    textareaRef.current?.focus();
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>): void {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit(e);
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="border-t border-surface-border bg-surface-card p-4">
+      <div className="flex items-end gap-3">
+        <textarea
+          ref={textareaRef}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          disabled={disabled}
+          rows={1}
+          placeholder="Type a message... (Enter to send, Shift+Enter for newline)"
+          className="max-h-32 min-h-[2.5rem] flex-1 resize-none rounded-lg border border-surface-border bg-surface-elevated px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 disabled:opacity-50"
+        />
+        <button
+          type="submit"
+          disabled={disabled || !value.trim()}
+          className="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
+        >
+          Send
+        </button>
+      </div>
+    </form>
+  );
+}

apps/web/src/components/chat/conversation-list.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { cn } from '@/lib/cn';
+import type { Conversation } from '@/lib/types';
+
+interface ConversationListProps {
+  conversations: Conversation[];
+  activeId: string | null;
+  onSelect: (id: string) => void;
+  onNew: () => void;
+}
+
+export function ConversationList({
+  conversations,
+  activeId,
+  onSelect,
+  onNew,
+}: ConversationListProps): React.ReactElement {
+  return (
+    <div className="flex h-full w-64 flex-col border-r border-surface-border bg-surface-card">
+      <div className="flex items-center justify-between p-3">
+        <h2 className="text-sm font-medium text-text-secondary">Conversations</h2>
+        <button
+          type="button"
+          onClick={onNew}
+          className="rounded-md px-2 py-1 text-xs text-blue-400 transition-colors hover:bg-surface-elevated"
+        >
+          + New
+        </button>
+      </div>
+
+      <div className="flex-1 overflow-y-auto">
+        {conversations.length === 0 && (
+          <p className="px-3 py-2 text-xs text-text-muted">No conversations yet</p>
+        )}
+        {conversations.map((conv) => (
+          <button
+            key={conv.id}
+            type="button"
+            onClick={() => onSelect(conv.id)}
+            className={cn(
+              'w-full px-3 py-2 text-left text-sm transition-colors',
+              activeId === conv.id
+                ? 'bg-blue-600/20 text-blue-400'
+                : 'text-text-secondary hover:bg-surface-elevated',
+            )}
+          >
+            <span className="block truncate">{conv.title ?? 'Untitled'}</span>
+            <span className="block text-xs text-text-muted">
+              {new Date(conv.updatedAt).toLocaleDateString()}
+            </span>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

apps/web/src/components/chat/message-bubble.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { cn } from '@/lib/cn';
+import type { Message } from '@/lib/types';
+
+interface MessageBubbleProps {
+  message: Message;
+}
+
+export function MessageBubble({ message }: MessageBubbleProps): React.ReactElement {
+  const isUser = message.role === 'user';
+
+  return (
+    <div className={cn('flex', isUser ? 'justify-end' : 'justify-start')}>
+      <div
+        className={cn(
+          'max-w-[75%] rounded-xl px-4 py-3 text-sm',
+          isUser
+            ? 'bg-blue-600 text-white'
+            : 'border border-surface-border bg-surface-elevated text-text-primary',
+        )}
+      >
+        <div className="whitespace-pre-wrap break-words">{message.content}</div>
+        <div
+          className={cn('mt-1 text-right text-xs', isUser ? 'text-blue-200' : 'text-text-muted')}
+        >
+          {new Date(message.createdAt).toLocaleTimeString([], {
+            hour: '2-digit',
+            minute: '2-digit',
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/src/components/chat/streaming-message.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+/** Renders an in-progress assistant message from streaming text. */
+interface StreamingMessageProps {
+  text: string;
+}
+
+export function StreamingMessage({ text }: StreamingMessageProps): React.ReactElement | null {
+  if (!text) return null;
+
+  return (
+    <div className="flex justify-start">
+      <div className="max-w-[75%] rounded-xl border border-surface-border bg-surface-elevated px-4 py-3 text-sm text-text-primary">
+        <div className="whitespace-pre-wrap break-words">{text}</div>
+        <div className="mt-1 flex items-center gap-1 text-xs text-text-muted">
+          <span className="inline-block h-2 w-2 animate-pulse rounded-full bg-blue-500" />
+          Thinking...
+        </div>
+      </div>
+    </div>
+  );
+}