-
-
{content}
+
+
+
{content}
+ {overlay}
);
}
diff --git a/src/renderer/components/ChatPane.tsx b/src/renderer/components/ChatPane.tsx
index 61f5f1f..aa50211 100644
--- a/src/renderer/components/ChatPane.tsx
+++ b/src/renderer/components/ChatPane.tsx
@@ -1,4 +1,5 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { type KeyboardEvent, useEffect, useRef, useState } from 'react';
+import { AlertCircle, ArrowUp, Bot, Loader2, User } from 'lucide-react';
import type { PatternDefinition } from '@shared/domain/pattern';
import type { ProjectRecord } from '@shared/domain/project';
@@ -14,6 +15,7 @@ interface ChatPaneProps {
export function ChatPane({ project, pattern, session, onSend }: ChatPaneProps) {
const [input, setInput] = useState('');
const transcriptRef = useRef
(null);
+ const textareaRef = useRef(null);
useEffect(() => {
transcriptRef.current?.scrollTo({
@@ -23,117 +25,144 @@ export function ChatPane({ project, pattern, session, onSend }: ChatPaneProps) {
}, [session.messages.length]);
const isBusy = session.status === 'running';
- const sessionStats = useMemo(
- () => `${session.messages.length} messages • ${pattern.agents.length} agent${pattern.agents.length === 1 ? '' : 's'}`,
- [pattern.agents.length, session.messages.length],
- );
+
+ async function handleSubmit() {
+ const text = input.trim();
+ if (!text || isBusy) return;
+ setInput('');
+ await onSend(text);
+ }
+
+ function handleKeyDown(e: KeyboardEvent) {
+ if (e.key === 'Enter' && !e.shiftKey) {
+ e.preventDefault();
+ void handleSubmit();
+ }
+ }
return (
-
-
-
-
-
{project.name}
-
{session.title}
-
- Pattern: {pattern.name} • Mode:{' '}
- {pattern.mode}
-
-
{sessionStats}
-
-
- {session.status}
-
+
+ {/* Header */}
+
+
+
{session.title}
+
+ {project.name} · {pattern.name} · {pattern.mode}
+
+
+ {session.status === 'running' && (
+
+
+ Running
+
+ )}
+ {session.status === 'error' && (
+
+ )}
+ {session.status === 'idle' && session.messages.length > 0 && (
+
+ {session.messages.length} message{session.messages.length === 1 ? '' : 's'}
+
+ )}
-
+ {/* Messages */}
+
{session.messages.length === 0 ? (
-
- Start the conversation to launch this orchestration against
{project.path}.
+
+
+
+ Send a message to start the conversation
+
+
+ Using {pattern.name} in{' '}
+ {project.name}
+
) : (
-
- {session.messages.map((message) => {
- const isUser = message.role === 'user';
- return (
-
-
-
- {message.authorName}
+
+
+ {session.messages.map((message) => {
+ const isUser = message.role === 'user';
+ return (
+
+
+
+ {isUser ? : }
+
+
+
+ {message.authorName}
+
+
+ {message.content}
+
+ {message.pending && (
+
+
+ Generating...
+
+ )}
+
-
{message.content}
- {message.pending ? (
-
Streaming…
- ) : null}
-
- );
- })}
+ );
+ })}
+
)}
-
- {session.lastError ? (
-
- {session.lastError}
+ {/* Input area */}
+
+ {session.lastError && (
+
- ) : null}
+ )}
-