-
- {truncatedOutput()}
+ {/* Expanded output */}
+
+
+
+ {displayOutput()}
-
+ 300}>
-
-
-
{props.tool.input}
-
Running
-
+
+ {/* Spinner */}
+
+
+ {/* Tool label */}
+
+ {toolLabel()}
+
+
+ {/* Command - truncated */}
+
+ {props.tool.input.length > 50 ? props.tool.input.substring(0, 50) + '...' : props.tool.input}
+
+
+ );
+};
+
+/**
+ * PendingToolsList - Groups multiple pending tools into a compact list
+ */
+interface PendingToolsListProps {
+ tools: PendingTool[];
+}
+
+export const PendingToolsList: Component
= (props) => {
+ const [expanded, setExpanded] = createSignal(false);
+
+ // If 3 or fewer, show all. Otherwise show collapsed.
+ const shouldCollapse = () => props.tools.length > 3;
+ const visibleTools = () => {
+ if (!shouldCollapse() || expanded()) return props.tools;
+ return props.tools.slice(0, 2);
+ };
+ const hiddenCount = () => props.tools.length - 2;
+
+ return (
+
+
+ {(tool) => }
+
+
+
+
+
+
+
+ {(tool) => }
+
+
+
+
+
);
};
diff --git a/frontend-modern/src/components/AI/Chat/hooks/useChat.ts b/frontend-modern/src/components/AI/Chat/hooks/useChat.ts
index 1339a9269..b8de41558 100644
--- a/frontend-modern/src/components/AI/Chat/hooks/useChat.ts
+++ b/frontend-modern/src/components/AI/Chat/hooks/useChat.ts
@@ -49,6 +49,7 @@ export function useChat(options: UseChatOptions = {}) {
// Helper to add stream event for chronological display
const addStreamEvent = (msg: ChatMessage, event: StreamDisplayEvent): ChatMessage => {
const events = msg.streamEvents || [];
+
// For content events, merge consecutive content into one
if (event.type === 'content' && events.length > 0) {
const last = events[events.length - 1];
@@ -62,6 +63,21 @@ export function useChat(options: UseChatOptions = {}) {
};
}
}
+
+ // For thinking events, merge consecutive thinking into one
+ if (event.type === 'thinking' && events.length > 0) {
+ const last = events[events.length - 1];
+ if (last.type === 'thinking') {
+ return {
+ ...msg,
+ streamEvents: [
+ ...events.slice(0, -1),
+ { ...last, thinking: (last.thinking || '') + (event.thinking || '') },
+ ],
+ };
+ }
+ }
+
return {
...msg,
streamEvents: [...events, event],
@@ -103,18 +119,31 @@ export function useChat(options: UseChatOptions = {}) {
case 'tool_start': {
const data = event.data as { name: string; input: string };
+ const toolId = generateId(); // Unique ID to track this tool
+ const pendingTool = { name: data.name, input: data.input };
+
+ // Add to streamEvents in chronological position
+ const updated = addStreamEvent(msg, {
+ type: 'pending_tool',
+ pendingTool,
+ toolId,
+ });
+
return {
- ...msg,
- pendingTools: [...(msg.pendingTools || []), { name: data.name, input: data.input }],
+ ...updated,
+ pendingTools: [...(msg.pendingTools || []), { ...pendingTool, id: toolId } as any],
};
}
case 'tool_end': {
const data = event.data as { name: string; input: string; output: string; success: boolean };
const pendingTools = msg.pendingTools || [];
- const matchingIndex = pendingTools.findIndex((t) => t.name === data.name);
- const updatedPending = matchingIndex >= 0
- ? [...pendingTools.slice(0, matchingIndex), ...pendingTools.slice(matchingIndex + 1)]
+ const events = msg.streamEvents || [];
+
+ // Find the matching pending tool (by name, since we may not have ID in the event)
+ const matchingPendingIndex = pendingTools.findIndex((t) => t.name === data.name);
+ const updatedPending = matchingPendingIndex >= 0
+ ? [...pendingTools.slice(0, matchingPendingIndex), ...pendingTools.slice(matchingPendingIndex + 1)]
: pendingTools;
const newToolCall: ToolExecution = {
@@ -124,10 +153,21 @@ export function useChat(options: UseChatOptions = {}) {
success: data.success,
};
- // Add tool to streamEvents for chronological display
- const updated = addStreamEvent(msg, { type: 'tool', tool: newToolCall });
+ // Find the pending_tool event in streamEvents and replace it with completed tool
+ // Search from the end to find the most recent matching pending tool
+ let updatedEvents = [...events];
+ for (let i = events.length - 1; i >= 0; i--) {
+ const evt = events[i];
+ if (evt.type === 'pending_tool' && evt.pendingTool?.name === data.name) {
+ // Replace pending with completed
+ updatedEvents[i] = { type: 'tool', tool: newToolCall };
+ break;
+ }
+ }
+
return {
- ...updated,
+ ...msg,
+ streamEvents: updatedEvents,
pendingTools: updatedPending,
toolCalls: [...(msg.toolCalls || []), newToolCall],
};
diff --git a/frontend-modern/src/components/AI/Chat/index.tsx b/frontend-modern/src/components/AI/Chat/index.tsx
index 34d68d0b6..a4adbcd3e 100644
--- a/frontend-modern/src/components/AI/Chat/index.tsx
+++ b/frontend-modern/src/components/AI/Chat/index.tsx
@@ -1,4 +1,4 @@
-import { Component, Show, createSignal, onMount, For } from 'solid-js';
+import { Component, Show, createSignal, onMount, For, createMemo } from 'solid-js';
import { OpenCodeAPI, type ChatSession } from '@/api/opencode';
import { notificationStore } from '@/stores/notifications';
import { logger } from '@/utils/logger';
@@ -10,6 +10,12 @@ interface AIChatProps {
onClose: () => void;
}
+/**
+ * AIChat - Main chat panel component.
+ *
+ * Provides a terminal-like chat experience with clear status indicators,
+ * session management, and streaming response display.
+ */
export const AIChat: Component = (props) => {
// UI state
const [isOpen] = createSignal(true);
@@ -20,6 +26,30 @@ export const AIChat: Component = (props) => {
// Chat hook
const chat = useChat();
+ // Compute current status for display
+ const currentStatus = createMemo(() => {
+ if (!chat.isLoading()) return null;
+
+ const messages = chat.messages();
+ const lastMessage = messages[messages.length - 1];
+
+ if (!lastMessage || lastMessage.role !== 'assistant') {
+ return { type: 'thinking', text: 'Thinking...' };
+ }
+
+ if (lastMessage.pendingTools && lastMessage.pendingTools.length > 0) {
+ const tool = lastMessage.pendingTools[0];
+ const toolName = tool.name.replace(/^pulse_/, '').replace(/_/g, ' ');
+ return { type: 'tool', text: `Running ${toolName}...` };
+ }
+
+ if (lastMessage.isStreaming) {
+ return { type: 'generating', text: 'Generating response...' };
+ }
+
+ return { type: 'thinking', text: 'Thinking...' };
+ });
+
// Load sessions on mount
onMount(async () => {
try {
@@ -79,38 +109,37 @@ export const AIChat: Component = (props) => {
};
// Empty state for approval (not used with OpenCode but keeping interface)
- const handleApprove = (_messageId: string, _approval: PendingApproval) => {};
- const handleSkip = (_messageId: string, _toolId: string) => {};
+ const handleApprove = (_messageId: string, _approval: PendingApproval) => { };
+ const handleSkip = (_messageId: string, _toolId: string) => { };
return (
{/* Header */}
-
+
-
+
-
AI Assistant
-
+
AI Assistant
+
Powered by OpenCode
-
+
{/* Session picker */}
-
+