+ {sortedProjects.map((project) => {
+ const palette = getCardPalette(project.id);
+ const monogram = project.name.charAt(0).toUpperCase();
+ const isRenaming = renamingId === project.id;
+
+ return (
navigate(`/projects/${project.id}`)}
- className="group flex cursor-pointer items-center justify-between rounded-xl border border-[var(--color-border)]/50 bg-[var(--color-bg-secondary)] p-4 transition-all duration-200 hover:border-[var(--color-border)] hover:shadow-md"
+ onClick={() => !isRenaming && navigate(`/projects/${project.id}`)}
+ className="group relative flex flex-col rounded-2xl border border-[var(--color-border)]/60 bg-[var(--color-bg-secondary)] cursor-pointer transition-all duration-200 hover:border-[var(--color-border)] hover:shadow-xl hover:shadow-black/[0.04] hover:-translate-y-0.5 overflow-hidden"
>
-
-
-
+ {/* Gradient accent bar */}
+
+
+
+ {/* Top row: monogram + actions */}
+
+
+ {monogram}
+
+
+
startRename(e, project)}
+ className="p-1.5 rounded-lg text-[var(--color-text-muted)] hover:text-[var(--color-text-heading)] hover:bg-[var(--color-bg-tertiary)]"
+ title="Rename"
+ >
+
+
handleDeleteProject(e, project.id)}
+ className="p-1.5 rounded-lg text-[var(--color-text-muted)] hover:text-[var(--color-error)] hover:bg-[var(--color-error)]/10"
+ title="Delete"
+ >
+
+
-
-
+
+ {/* Project name — editable or static */}
+ {isRenaming ? (
+
+ ) : (
+
{project.name}
-
-
-
+
+ {/* Bottom stats */}
+
+
+
+ {project.conversation_count} conversation{project.conversation_count !== 1 ? 's' : ''}
- {formatRelativeTime(project.created_at)}
+
+
+
+ {project.created_at ? formatRelativeTime(project.created_at) : ''}
+
+
-
handleDeleteProject(e, project.id)}
- >
-
- ))}
-
+ );
+ })}
)}
-
+
);
diff --git a/databricks-builder-app/client/src/pages/ProjectPage.tsx b/databricks-builder-app/client/src/pages/ProjectPage.tsx
index 0131fdc7..7b7ea193 100644
--- a/databricks-builder-app/client/src/pages/ProjectPage.tsx
+++ b/databricks-builder-app/client/src/pages/ProjectPage.tsx
@@ -2,13 +2,17 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { useUser } from '@/contexts/UserContext';
import {
+ ArrowUp,
+ Check,
ChevronDown,
+ ClipboardCopy,
ExternalLink,
Loader2,
- MessageSquare,
- Send,
+ Settings2,
Square,
+ Sparkles,
Wrench,
+ X,
} from 'lucide-react';
import { toast } from 'sonner';
import ReactMarkdown from 'react-markdown';
@@ -17,7 +21,6 @@ import { MainLayout } from '@/components/layout/MainLayout';
import { Sidebar } from '@/components/layout/Sidebar';
import { SkillsExplorer } from '@/components/SkillsExplorer';
import { FunLoader } from '@/components/FunLoader';
-import { Button } from '@/components/ui/Button';
import {
createConversation,
deleteConversation,
@@ -45,7 +48,72 @@ interface ActivityItem {
timestamp: number;
}
-// Minimal activity indicator - shows only current tool being executed
+// Databricks logo mark SVG
+function DatabricksLogo({ className }: { className?: string }) {
+ return (
+
+
+ );
+}
+
+// Expandable tools list for a message
+function ToolsUsedBadge({ tools }: { tools: string[] }) {
+ const [expanded, setExpanded] = useState(false);
+
+ if (tools.length === 0) return null;
+
+ // Deduplicate and clean tool names
+ const uniqueTools = [...new Set(tools.map(t => t.replace('mcp__databricks__', '').replace(/_/g, ' ')))];
+
+ return (
+
+
setExpanded(!expanded)}
+ className="inline-flex items-center gap-1.5 text-[11px] text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors"
+ >
+ {uniqueTools.length} tool{uniqueTools.length !== 1 ? 's' : ''} used
+
+ {expanded && (
+
+ {uniqueTools.map((tool, i) => (
+
+
+ ))}
+
+ )}
+
+ );
+}
+
+// Copy button for code blocks
+function CopyButton({ text }: { text: string }) {
+ const [copied, setCopied] = useState(false);
+ return (
+
{
+ navigator.clipboard.writeText(text);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ }}
+ className="absolute top-2 right-2 p-1.5 rounded-md bg-[var(--color-bg-secondary)]/80 border border-[var(--color-border)]/50 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] opacity-0 group-hover/code:opacity-100 transition-all"
+ title={copied ? 'Copied!' : 'Copy code'}
+ >
+ {copied ?
+ );
+}
+
+// Activity indicator - shows current tool with animated dots
function ActivitySection({
items,
}: {
@@ -54,17 +122,244 @@ function ActivitySection({
}) {
if (items.length === 0) return null;
- // Get the most recent tool_use item (current activity)
const currentTool = [...items].reverse().find((item) => item.type === 'tool_use');
-
if (!currentTool) return null;
+ const toolName = currentTool.toolName?.replace('mcp__databricks__', '').replace(/_/g, ' ') || 'working';
+
+ return (
+
+
+
+
+
+ {toolName}
+
+
+
+
+
+ );
+}
+
+// Custom dropdown for cluster/warehouse selection with status indicators
+function ResourceDropdown
({
+ label,
+ items,
+ selectedId,
+ onSelect,
+ nameKey,
+ idKey,
+}: {
+ label: string;
+ items: T[];
+ selectedId?: string;
+ onSelect: (id: string | undefined) => void;
+ nameKey: keyof T;
+ idKey: keyof T;
+}) {
+ const [open, setOpen] = useState(false);
+ const ref = useRef(null);
+
+ useEffect(() => {
+ const handler = (e: MouseEvent) => {
+ if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+ };
+ if (open) { document.addEventListener('mousedown', handler); return () => document.removeEventListener('mousedown', handler); }
+ }, [open]);
+
+ const selected = items.find((i) => String(i[idKey]) === selectedId);
+ const selectedName = selected ? String(selected[nameKey] || '') : '';
+
return (
-
-
-
- Using {currentTool.toolName?.replace('mcp__databricks__', '')}...
-
+
+
{label}
+
setOpen(!open)}
+ className="mt-1.5 w-full flex items-center justify-between h-10 px-3 rounded-lg border border-[var(--color-border)] bg-[var(--color-background)] text-sm hover:border-[var(--color-accent-primary)]/40 focus:outline-none focus:ring-2 focus:ring-[var(--color-accent-primary)]/30 transition-colors"
+ >
+
+ {selected && (
+
+ {selectedName || `Select ${label.toLowerCase()}...`}
+
+
+
+ {open && (
+
+ {items.map((item) => {
+ const id = String(item[idKey]);
+ const name = String(item[nameKey] || '');
+ const isSelected = id === selectedId;
+ return (
+
{ onSelect(id); setOpen(false); }}
+ className={cn(
+ 'w-full flex items-center gap-2.5 px-3 py-2.5 text-sm text-left transition-colors',
+ isSelected ? 'bg-[var(--color-accent-primary)]/5 text-[var(--color-accent-primary)]' : 'text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)]'
+ )}
+ >
+
+ {name}
+
+ {item.state}
+
+
+ {isSelected &&
+ );
+ })}
+
+ )}
+
+ );
+}
+
+// Configuration panel component
+function ConfigPanel({
+ isOpen,
+ onClose,
+ defaultCatalog,
+ setDefaultCatalog,
+ defaultSchema,
+ setDefaultSchema,
+ clusters,
+ selectedClusterId,
+ setSelectedClusterId,
+ warehouses,
+ selectedWarehouseId,
+ setSelectedWarehouseId,
+ workspaceFolder,
+ setWorkspaceFolder,
+ mlflowExperimentName,
+ setMlflowExperimentName,
+ workspaceUrl,
+}: {
+ isOpen: boolean;
+ onClose: () => void;
+ defaultCatalog: string;
+ setDefaultCatalog: (v: string) => void;
+ defaultSchema: string;
+ setDefaultSchema: (v: string) => void;
+ clusters: Cluster[];
+ selectedClusterId?: string;
+ setSelectedClusterId: (v: string | undefined) => void;
+ warehouses: Warehouse[];
+ selectedWarehouseId?: string;
+ setSelectedWarehouseId: (v: string | undefined) => void;
+ workspaceFolder: string;
+ setWorkspaceFolder: (v: string) => void;
+ mlflowExperimentName: string;
+ setMlflowExperimentName: (v: string) => void;
+ workspaceUrl: string | null;
+}) {
+ if (!isOpen) return null;
+
+ return (
+
+
+
Configuration
+
+
+
+
+ {/* Catalog & Schema - stacked for more room */}
+
+
+ {/* Cluster - custom dropdown */}
+ {clusters.length > 0 && (
+
+ )}
+
+ {/* Warehouse - custom dropdown */}
+ {warehouses.length > 0 && (
+
+ )}
+
+ {/* Workspace Folder */}
+
+ Workspace Folder
+
+
+ {/* MLflow Experiment */}
+
+ MLflow Experiment
+
+
);
}
@@ -96,16 +391,14 @@ export default function ProjectPage() {
const [messages, setMessages] = useState
([]);
const [input, setInput] = useState('');
const [isLoading, setIsLoading] = useState(true);
- const [isStreaming, setIsStreaming] = useState(false);
+ const [streamingConvIds, setStreamingConvIds] = useState([]);
const [streamingText, setStreamingText] = useState('');
const [activityItems, setActivityItems] = useState([]);
const [todos, setTodos] = useState([]);
const [clusters, setClusters] = useState([]);
const [selectedClusterId, setSelectedClusterId] = useState();
- const [clusterDropdownOpen, setClusterDropdownOpen] = useState(false);
const [warehouses, setWarehouses] = useState([]);
const [selectedWarehouseId, setSelectedWarehouseId] = useState();
- const [warehouseDropdownOpen, setWarehouseDropdownOpen] = useState(false);
const [defaultCatalog, setDefaultCatalog] = useState('ai_dev_kit');
const [defaultSchema, setDefaultSchema] = useState('');
const [workspaceFolder, setWorkspaceFolder] = useState('');
@@ -113,6 +406,7 @@ export default function ProjectPage() {
const [skillsExplorerOpen, setSkillsExplorerOpen] = useState(false);
const [activeExecutionId, setActiveExecutionId] = useState(null);
const [isReconnecting, setIsReconnecting] = useState(false);
+ const [messageTools, setMessageTools] = useState>({});
// Calculate default schema from user email + project name once available
const userDefaultSchema = useMemo(() => toSchemaName(user, project?.name ?? null), [user, project?.name]);
@@ -120,10 +414,22 @@ export default function ProjectPage() {
// Refs
const messagesEndRef = useRef(null);
const inputRef = useRef(null);
- const abortControllerRef = useRef(null);
- const clusterDropdownRef = useRef(null);
- const warehouseDropdownRef = useRef(null);
- const reconnectAttemptedRef = useRef(null); // Track which conversation we've checked
+ const reconnectAttemptedRef = useRef(null);
+ const currentConvIdRef = useRef(undefined);
+ // Per-conversation streaming data (supports concurrent streams)
+ const allStreamsRef = useRef>({});
+
+ // Keep currentConvIdRef in sync with state
+ useEffect(() => { currentConvIdRef.current = currentConversation?.id; }, [currentConversation?.id]);
// Load project and conversations
useEffect(() => {
@@ -194,7 +500,7 @@ export default function ProjectPage() {
// Check for active execution when conversation loads and reconnect if needed
useEffect(() => {
- if (!projectId || !currentConversation?.id || isLoading || isStreaming) return;
+ if (!projectId || !currentConversation?.id || isLoading || allStreamsRef.current[currentConversation.id]) return;
// Skip if we've already checked this conversation
if (reconnectAttemptedRef.current === currentConversation.id) return;
@@ -206,26 +512,38 @@ export default function ProjectPage() {
if (active && active.status === 'running') {
console.log('[RECONNECT] Found active execution:', active.id);
+ const reconConvId = currentConversation.id;
+ const controller = new AbortController();
+ allStreamsRef.current[reconConvId] = {
+ fullText: '',
+ activityItems: [],
+ todos: [],
+ tools: [],
+ executionId: active.id,
+ abortController: controller,
+ isReconnecting: true,
+ pendingMessages: [],
+ };
+ setStreamingConvIds(prev => [...prev, reconConvId]);
setIsReconnecting(true);
- setIsStreaming(true);
setActiveExecutionId(active.id);
- // Create abort controller for reconnection
- abortControllerRef.current = new AbortController();
-
let fullText = '';
await reconnectToExecution({
executionId: active.id,
storedEvents: active.events,
- signal: abortControllerRef.current.signal,
+ signal: controller.signal,
onEvent: (event) => {
const type = event.type as string;
+ const stream = allStreamsRef.current[reconConvId];
+ const isForeground = currentConvIdRef.current === reconConvId;
if (type === 'text_delta') {
const text = event.text as string;
fullText += text;
- setStreamingText(fullText);
+ if (stream) stream.fullText = fullText;
+ if (isForeground) setStreamingText(fullText);
} else if (type === 'text') {
const text = event.text as string;
if (text) {
@@ -233,35 +551,38 @@ export default function ProjectPage() {
fullText += '\n\n';
}
fullText += text;
- setStreamingText(fullText);
+ if (stream) stream.fullText = fullText;
+ if (isForeground) setStreamingText(fullText);
}
} else if (type === 'tool_use') {
- setActivityItems((prev) => [
- ...prev,
- {
- id: event.tool_id as string,
- type: 'tool_use',
- content: '',
- toolName: event.tool_name as string,
- toolInput: event.tool_input as Record,
- timestamp: Date.now(),
- },
- ]);
+ const newItem: ActivityItem = {
+ id: event.tool_id as string,
+ type: 'tool_use',
+ content: '',
+ toolName: event.tool_name as string,
+ toolInput: event.tool_input as Record,
+ timestamp: Date.now(),
+ };
+ if (stream) {
+ stream.activityItems = [...stream.activityItems, newItem];
+ stream.tools = [...stream.tools, event.tool_name as string];
+ }
+ if (isForeground) setActivityItems(prev => [...prev, newItem]);
} else if (type === 'tool_result') {
- setActivityItems((prev) => [
- ...prev,
- {
- id: `result-${event.tool_use_id}`,
- type: 'tool_result',
- content: typeof event.content === 'string' ? event.content : JSON.stringify(event.content),
- isError: event.is_error as boolean,
- timestamp: Date.now(),
- },
- ]);
+ const newItem: ActivityItem = {
+ id: `result-${event.tool_use_id}`,
+ type: 'tool_result',
+ content: typeof event.content === 'string' ? event.content : JSON.stringify(event.content),
+ isError: event.is_error as boolean,
+ timestamp: Date.now(),
+ };
+ if (stream) stream.activityItems = [...stream.activityItems, newItem];
+ if (isForeground) setActivityItems(prev => [...prev, newItem]);
} else if (type === 'todos') {
const todoItems = event.todos as TodoItem[];
if (todoItems) {
- setTodos(todoItems);
+ if (stream) stream.todos = todoItems;
+ if (isForeground) setTodos(todoItems);
}
} else if (type === 'error') {
toast.error(event.error as string, { duration: 8000 });
@@ -272,16 +593,20 @@ export default function ProjectPage() {
toast.error('Failed to reconnect to execution');
},
onDone: async () => {
- // Reload conversation to get the final messages from DB
- const conv = await fetchConversation(projectId, currentConversation.id);
- setCurrentConversation(conv);
- setMessages(conv.messages || []);
- setStreamingText('');
- setIsStreaming(false);
- setIsReconnecting(false);
- setActiveExecutionId(null);
- setActivityItems([]);
- setTodos([]);
+ delete allStreamsRef.current[reconConvId];
+ setStreamingConvIds(prev => prev.filter(id => id !== reconConvId));
+
+ const conv = await fetchConversation(projectId, reconConvId);
+ if (currentConvIdRef.current === reconConvId) {
+ setCurrentConversation(conv);
+ setMessages(conv.messages || []);
+ setStreamingText('');
+ setIsReconnecting(false);
+ setActiveExecutionId(null);
+ setActivityItems([]);
+ setTodos([]);
+ }
+ fetchConversations(projectId).then(setConversations);
},
});
}
@@ -299,20 +624,6 @@ export default function ProjectPage() {
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
}, [messages, streamingText, activityItems]);
- // Close dropdowns on outside click
- useEffect(() => {
- const handleClickOutside = (event: MouseEvent) => {
- if (clusterDropdownRef.current && !clusterDropdownRef.current.contains(event.target as Node)) {
- setClusterDropdownOpen(false);
- }
- if (warehouseDropdownRef.current && !warehouseDropdownRef.current.contains(event.target as Node)) {
- setWarehouseDropdownOpen(false);
- }
- };
- document.addEventListener('mousedown', handleClickOutside);
- return () => document.removeEventListener('mousedown', handleClickOutside);
- }, []);
-
// Set default schema from user email once when first available
const schemaDefaultApplied = useRef(false);
useEffect(() => {
@@ -336,14 +647,37 @@ export default function ProjectPage() {
const handleSelectConversation = async (conversationId: string) => {
if (!projectId || currentConversation?.id === conversationId) return;
+ // Update ref immediately so stream callbacks target the right conversation
+ currentConvIdRef.current = conversationId;
// Reset reconnect tracking for the new conversation
reconnectAttemptedRef.current = null;
try {
const conv = await fetchConversation(projectId, conversationId);
setCurrentConversation(conv);
- setMessages(conv.messages || []);
- setActivityItems([]);
+
+ // Sync streaming UI state for the new conversation
+ const stream = allStreamsRef.current[conversationId];
+ if (stream) {
+ // Merge API messages with pending messages not yet saved to DB
+ const apiMessages = conv.messages || [];
+ const pending = stream.pendingMessages || [];
+ const apiIds = new Set(apiMessages.map(m => m.content + m.role));
+ const missingPending = pending.filter(m => !apiIds.has(m.content + m.role));
+ setMessages([...missingPending, ...apiMessages]);
+ setStreamingText(stream.fullText);
+ setActivityItems([...stream.activityItems]);
+ setTodos([...stream.todos]);
+ setActiveExecutionId(stream.executionId);
+ setIsReconnecting(stream.isReconnecting);
+ } else {
+ setMessages(conv.messages || []);
+ setStreamingText('');
+ setActivityItems([]);
+ setTodos([]);
+ setActiveExecutionId(null);
+ setIsReconnecting(false);
+ }
// Restore cluster selection from conversation, or default to first cluster
setSelectedClusterId(conv.cluster_id || (clusters.length > 0 ? clusters[0].cluster_id : undefined));
// Restore warehouse selection from conversation, or default to first warehouse
@@ -366,10 +700,16 @@ export default function ProjectPage() {
try {
const conv = await createConversation(projectId);
+ currentConvIdRef.current = conv.id; // Update ref immediately
setConversations((prev) => [conv, ...prev]);
setCurrentConversation(conv);
setMessages([]);
+ // Clear streaming UI (new conv isn't streaming yet)
+ setStreamingText('');
setActivityItems([]);
+ setTodos([]);
+ setActiveExecutionId(null);
+ setIsReconnecting(false);
inputRef.current?.focus();
} catch (error) {
console.error('Failed to create conversation:', error);
@@ -385,6 +725,14 @@ export default function ProjectPage() {
await deleteConversation(projectId, conversationId);
setConversations((prev) => prev.filter((c) => c.id !== conversationId));
+ // Clean up any active stream for this conversation
+ const stream = allStreamsRef.current[conversationId];
+ if (stream) {
+ stream.abortController?.abort();
+ delete allStreamsRef.current[conversationId];
+ setStreamingConvIds(prev => prev.filter(id => id !== conversationId));
+ }
+
if (currentConversation?.id === conversationId) {
const remaining = conversations.filter((c) => c.id !== conversationId);
if (remaining.length > 0) {
@@ -395,7 +743,10 @@ export default function ProjectPage() {
setCurrentConversation(null);
setMessages([]);
}
+ setStreamingText('');
setActivityItems([]);
+ setTodos([]);
+ setActiveExecutionId(null);
}
toast.success('Conversation deleted');
} catch (error) {
@@ -406,11 +757,13 @@ export default function ProjectPage() {
// Send message
const handleSendMessage = useCallback(async () => {
- if (!projectId || !input.trim() || isStreaming) return;
+ if (!projectId || !input.trim()) return;
+ const convId = currentConversation?.id;
+ // Block only if THIS conversation is already streaming
+ if (convId && allStreamsRef.current[convId]) return;
const userMessage = input.trim();
setInput('');
- setIsStreaming(true);
setStreamingText('');
setActivityItems([]);
setTodos([]);
@@ -418,7 +771,7 @@ export default function ProjectPage() {
// Add user message to UI immediately
const tempUserMessage: Message = {
id: `temp-${Date.now()}`,
- conversation_id: currentConversation?.id || '',
+ conversation_id: convId || '',
role: 'user',
content: userMessage,
timestamp: new Date().toISOString(),
@@ -426,11 +779,24 @@ export default function ProjectPage() {
};
setMessages((prev) => [...prev, tempUserMessage]);
- // Create abort controller
- abortControllerRef.current = new AbortController();
+ // Create abort controller and initialize stream tracking
+ const abortController = new AbortController();
+ const effectiveConvId = convId || '';
+ let streamKey = effectiveConvId;
+ allStreamsRef.current[streamKey] = {
+ fullText: '',
+ activityItems: [],
+ todos: [],
+ tools: [],
+ executionId: null,
+ abortController,
+ isReconnecting: false,
+ pendingMessages: [tempUserMessage],
+ };
+ setStreamingConvIds(prev => [...prev, effectiveConvId]);
try {
- let conversationId = currentConversation?.id;
+ let conversationId = convId;
let fullText = '';
await invokeAgent({
@@ -443,42 +809,61 @@ export default function ProjectPage() {
warehouseId: selectedWarehouseId,
workspaceFolder,
mlflowExperimentName: mlflowExperimentName || null,
- signal: abortControllerRef.current.signal,
- onExecutionId: (executionId) => setActiveExecutionId(executionId),
+ signal: abortController.signal,
+ onExecutionId: (executionId) => {
+ const stream = allStreamsRef.current[streamKey];
+ if (stream) stream.executionId = executionId;
+ if (currentConvIdRef.current === streamKey) setActiveExecutionId(executionId);
+ },
onEvent: (event) => {
const type = event.type as string;
+ const stream = allStreamsRef.current[streamKey];
+ const isForeground = currentConvIdRef.current === streamKey;
if (type === 'conversation.created') {
- conversationId = event.conversation_id as string;
+ const newConvId = event.conversation_id as string;
+ // Move stream entry from old key to new key
+ const oldStream = allStreamsRef.current[streamKey];
+ delete allStreamsRef.current[streamKey];
+ const oldKey = streamKey;
+ streamKey = newConvId;
+ allStreamsRef.current[newConvId] = oldStream || {
+ fullText: '', activityItems: [], todos: [], tools: [],
+ executionId: null, abortController, isReconnecting: false,
+ pendingMessages: [],
+ };
+ conversationId = newConvId;
+ // Update streamingConvIds from old key to new key
+ setStreamingConvIds(prev => prev.filter(id => id !== oldKey).concat(newConvId));
+ // Set currentConversation immediately so UI stays consistent
+ setCurrentConversation((prev) => prev ?? {
+ id: newConvId,
+ project_id: projectId,
+ title: 'New Chat',
+ created_at: new Date().toISOString(),
+ conversation_count: 0,
+ } as unknown as Conversation);
+ currentConvIdRef.current = newConvId;
fetchConversations(projectId).then(setConversations);
} else if (type === 'text_delta') {
- // Token-by-token streaming - accumulate and display for live updates
const text = event.text as string;
fullText += text;
- console.log('[STREAM] text_delta received, fullText length:', fullText.length);
- setStreamingText(fullText);
+ if (stream) stream.fullText = fullText;
+ if (isForeground) setStreamingText(fullText);
} else if (type === 'text') {
- // Complete text block from AssistantMessage - the authoritative final content
- // This event contains the COMPLETE text for this response segment
- // We always use it to ensure final responses after tool execution are captured
const text = event.text as string;
- console.log('[STREAM] text event received, text length:', text?.length, 'current fullText length:', fullText.length);
if (text) {
- // Append to fullText (there may be multiple text blocks in a conversation)
- // Add separator if needed
if (fullText && !fullText.endsWith('\n') && !text.startsWith('\n')) {
fullText += '\n\n';
}
fullText += text;
- console.log('[STREAM] fullText updated, new length:', fullText.length);
- setStreamingText(fullText);
+ if (stream) stream.fullText = fullText;
+ if (isForeground) setStreamingText(fullText);
}
} else if (type === 'thinking' || type === 'thinking_delta') {
- // Handle both complete thinking blocks and streaming thinking deltas
const thinking = (event.thinking as string) || '';
if (thinking) {
- setActivityItems((prev) => {
- // For deltas, append to the last thinking item if it exists
+ const updateThinking = (prev: ActivityItem[]) => {
if (type === 'thinking_delta' && prev.length > 0 && prev[prev.length - 1].type === 'thinking') {
const updated = [...prev];
updated[updated.length - 1] = {
@@ -487,159 +872,186 @@ export default function ProjectPage() {
};
return updated;
}
- // For complete blocks or first delta, add new item
return [
...prev,
{
id: `thinking-${Date.now()}`,
- type: 'thinking',
+ type: 'thinking' as const,
content: thinking,
timestamp: Date.now(),
},
];
- });
+ };
+ if (stream) stream.activityItems = updateThinking(stream.activityItems);
+ if (isForeground) setActivityItems(updateThinking);
}
} else if (type === 'tool_use') {
- setActivityItems((prev) => [
- ...prev,
- {
- id: event.tool_id as string,
- type: 'tool_use',
- content: '',
- toolName: event.tool_name as string,
- toolInput: event.tool_input as Record,
- timestamp: Date.now(),
- },
- ]);
+ const toolName = event.tool_name as string;
+ const newItem: ActivityItem = {
+ id: event.tool_id as string,
+ type: 'tool_use',
+ content: '',
+ toolName,
+ toolInput: event.tool_input as Record,
+ timestamp: Date.now(),
+ };
+ if (stream) {
+ stream.tools = [...stream.tools, toolName];
+ stream.activityItems = [...stream.activityItems, newItem];
+ }
+ if (isForeground) setActivityItems(prev => [...prev, newItem]);
} else if (type === 'tool_result') {
let content = event.content as string;
- // Parse and improve error messages
if (event.is_error && typeof content === 'string') {
- // Extract error from XML-style tags like ...
const errorMatch = content.match(/(.*?)<\/tool_use_error>/s);
if (errorMatch) {
content = errorMatch[1].trim();
}
-
- // Improve generic "Stream closed" errors
if (content === 'Stream closed' || content.includes('Stream closed')) {
content = 'Tool execution interrupted: The operation took too long or the connection was lost. This may happen when operations exceed the 50-second timeout window. Check backend logs for details.';
}
}
- setActivityItems((prev) => [
- ...prev,
- {
- id: `result-${event.tool_use_id}`,
- type: 'tool_result',
- content: typeof content === 'string' ? content : JSON.stringify(content),
- isError: event.is_error as boolean,
- timestamp: Date.now(),
- },
- ]);
+ const newItem: ActivityItem = {
+ id: `result-${event.tool_use_id}`,
+ type: 'tool_result',
+ content: typeof content === 'string' ? content : JSON.stringify(content),
+ isError: event.is_error as boolean,
+ timestamp: Date.now(),
+ };
+ if (stream) stream.activityItems = [...stream.activityItems, newItem];
+ if (isForeground) setActivityItems(prev => [...prev, newItem]);
} else if (type === 'error') {
let errorMsg = event.error as string;
-
- // Improve generic error messages
if (errorMsg === 'Stream closed' || errorMsg.includes('Stream closed')) {
errorMsg = 'Execution interrupted: The operation took too long or the connection was lost. Operations exceeding 50 seconds may be interrupted. Check backend logs for details.';
}
-
- toast.error(errorMsg, {
- duration: 8000,
- });
+ toast.error(errorMsg, { duration: 8000 });
} else if (type === 'cancelled') {
- // Agent was cancelled by user - show a toast notification
toast.info('Generation stopped');
} else if (type === 'todos') {
- // Update todo list from agent
const todoItems = event.todos as TodoItem[];
if (todoItems) {
- setTodos(todoItems);
+ if (stream) stream.todos = todoItems;
+ if (isForeground) setTodos(todoItems);
}
}
},
onError: (error) => {
console.error('Stream error:', error);
- // Show the actual error message instead of generic text
const errorMessage = error.message || 'Failed to get response';
- toast.error(errorMessage, {
- duration: 8000, // Show error for 8 seconds
- });
+ toast.error(errorMessage, { duration: 8000 });
},
onDone: async () => {
+ const finalStreamKey = streamKey;
+ const stream = allStreamsRef.current[finalStreamKey];
+ const tools = stream?.tools || [];
+
if (fullText) {
+ const msgId = `msg-${Date.now()}`;
const assistantMessage: Message = {
- id: `msg-${Date.now()}`,
+ id: msgId,
conversation_id: conversationId || '',
role: 'assistant',
content: fullText,
timestamp: new Date().toISOString(),
is_error: false,
};
- setMessages((prev) => [...prev, assistantMessage]);
+ // Only update messages if user is viewing this conversation
+ if (currentConvIdRef.current === finalStreamKey) {
+ setMessages((prev) => [...prev, assistantMessage]);
+ }
+ if (tools.length > 0) {
+ setMessageTools((prev) => ({ ...prev, [msgId]: tools }));
+ }
+ }
+
+ // Clean up stream
+ delete allStreamsRef.current[finalStreamKey];
+ setStreamingConvIds(prev => prev.filter(id => id !== finalStreamKey));
+
+ if (currentConvIdRef.current === finalStreamKey) {
+ setStreamingText('');
+ setActiveExecutionId(null);
+ setActivityItems([]);
+ setTodos([]);
}
- setStreamingText('');
- setIsStreaming(false);
- setActiveExecutionId(null);
- // Clear activity items after response is finalized - only show final answer
- setActivityItems([]);
- setTodos([]);
-
- if (conversationId && !currentConversation?.id) {
+
+ // Fetch full conversation to get updated title and messages
+ if (conversationId) {
const conv = await fetchConversation(projectId, conversationId);
- setCurrentConversation(conv);
+ if (currentConvIdRef.current === finalStreamKey) {
+ setCurrentConversation(conv);
+ }
+ fetchConversations(projectId).then(setConversations);
}
},
});
} catch (error) {
- // Ignore AbortError — handleStopGeneration handles cleanup for user-initiated stops
if (error instanceof Error && error.name === 'AbortError') return;
console.error('Failed to send message:', error);
const errorMessage = error instanceof Error ? error.message : 'Failed to send message';
- toast.error(errorMessage, {
- duration: 8000,
- });
- setIsStreaming(false);
+ toast.error(errorMessage, { duration: 8000 });
+ // Clean up stream on error
+ delete allStreamsRef.current[streamKey];
+ setStreamingConvIds(prev => prev.filter(id => id !== streamKey));
+ if (currentConvIdRef.current === streamKey) {
+ setStreamingText('');
+ setActiveExecutionId(null);
+ setActivityItems([]);
+ setTodos([]);
+ }
}
- }, [projectId, input, isStreaming, currentConversation?.id, selectedClusterId, defaultCatalog, defaultSchema, selectedWarehouseId, workspaceFolder, mlflowExperimentName]);
+ }, [projectId, input, currentConversation?.id, selectedClusterId, defaultCatalog, defaultSchema, selectedWarehouseId, workspaceFolder, mlflowExperimentName]);
// Stop generation - abort client stream AND tell backend to cancel
const handleStopGeneration = useCallback(async () => {
- abortControllerRef.current?.abort();
+ const targetId = currentConversation?.id;
+ if (!targetId) return;
+
+ const stream = allStreamsRef.current[targetId];
+ if (!stream) return;
+
+ // Abort the fetch
+ stream.abortController?.abort();
// Tell the backend to cancel the agent execution
- if (activeExecutionId) {
+ if (stream.executionId) {
try {
- await stopExecution(activeExecutionId);
+ await stopExecution(stream.executionId);
} catch (error) {
console.error('Failed to stop execution on backend:', error);
}
}
- // Finalize UI: keep user message and save whatever partial response we have
- setStreamingText((currentText) => {
- if (currentText) {
- setMessages((prev) => [
- ...prev,
- {
- id: `msg-stopped-${Date.now()}`,
- conversation_id: '',
- role: 'assistant' as const,
- content: currentText,
- timestamp: new Date().toISOString(),
- is_error: false,
- },
- ]);
+ // Save partial response
+ if (stream.fullText) {
+ const msgId = `msg-stopped-${Date.now()}`;
+ setMessages((prev) => [
+ ...prev,
+ {
+ id: msgId,
+ conversation_id: targetId,
+ role: 'assistant' as const,
+ content: stream.fullText,
+ timestamp: new Date().toISOString(),
+ is_error: false,
+ },
+ ]);
+ if (stream.tools.length > 0) {
+ setMessageTools((prev) => ({ ...prev, [msgId]: stream.tools }));
}
- return '';
- });
- setIsStreaming(false);
+ }
+
+ // Clean up stream
+ delete allStreamsRef.current[targetId];
+ setStreamingConvIds(prev => prev.filter(id => id !== targetId));
+ setStreamingText('');
setActiveExecutionId(null);
setActivityItems([]);
setTodos([]);
- }, [activeExecutionId]);
+ }, [currentConversation?.id]);
// Handle keyboard submit
const handleKeyDown = (e: React.KeyboardEvent) => {
@@ -654,6 +1066,113 @@ export default function ProjectPage() {
setSkillsExplorerOpen(true);
};
+ // Config panel state
+ const [configPanelOpen, setConfigPanelOpen] = useState(false);
+ const configPanelRef = useRef(null);
+
+ // Close config panel on outside click
+ useEffect(() => {
+ const handleClickOutside = (event: MouseEvent) => {
+ if (configPanelRef.current && !configPanelRef.current.contains(event.target as Node)) {
+ setConfigPanelOpen(false);
+ }
+ };
+ if (configPanelOpen) {
+ document.addEventListener('mousedown', handleClickOutside);
+ return () => document.removeEventListener('mousedown', handleClickOutside);
+ }
+ }, [configPanelOpen]);
+
+ // Auto-resize textarea
+ const handleInputChange = (e: React.ChangeEvent) => {
+ setInput(e.target.value);
+ const el = e.target;
+ el.style.height = 'auto';
+ el.style.height = Math.min(el.scrollHeight, 200) + 'px';
+ };
+
+ // Markdown components shared between messages and streaming
+ const markdownComponents = useMemo(() => ({
+ a: ({ href, children }: { href?: string; children?: React.ReactNode }) => (
+
+ {children}
+
+ ),
+ pre: ({ children }: { children?: React.ReactNode }) => {
+ // Extract text content from children for copy button
+ const getTextContent = (node: React.ReactNode): string => {
+ if (typeof node === 'string') return node;
+ if (!node) return '';
+ if (Array.isArray(node)) return node.map(getTextContent).join('');
+ if (typeof node === 'object' && 'props' in (node as React.ReactElement)) {
+ return getTextContent((node as React.ReactElement).props.children);
+ }
+ return '';
+ };
+ const text = getTextContent(children);
+ return (
+
+ );
+ },
+ code: ({ children, className }: { children?: React.ReactNode; className?: string }) => {
+ // Inline code (no language class)
+ if (!className) {
+ return (
+
+ {children}
+
+ );
+ }
+ // Block code inside pre
+ return {children};
+ },
+ table: ({ children }: { children?: React.ReactNode }) => (
+
+ ),
+ th: ({ children }: { children?: React.ReactNode }) => (
+
+ {children}
+
+ ),
+ td: ({ children }: { children?: React.ReactNode }) => (
+
+ {children}
+
+ ),
+ }), []);
+
+ // Config summary for header chips
+ const configChips = useMemo(() => {
+ const chips: { label: string; color: string }[] = [];
+ if (defaultCatalog && defaultSchema) {
+ chips.push({ label: `${defaultCatalog}.${defaultSchema}`, color: 'text-[var(--color-accent-primary)]' });
+ }
+ const cluster = clusters.find(c => c.cluster_id === selectedClusterId);
+ if (cluster) {
+ chips.push({ label: cluster.cluster_name || 'Cluster', color: cluster.state === 'RUNNING' ? 'text-[var(--color-success)]' : 'text-[var(--color-text-muted)]' });
+ }
+ const warehouse = warehouses.find(w => w.warehouse_id === selectedWarehouseId);
+ if (warehouse) {
+ chips.push({ label: warehouse.warehouse_name || 'Warehouse', color: warehouse.state === 'RUNNING' ? 'text-[var(--color-success)]' : 'text-[var(--color-text-muted)]' });
+ }
+ return chips;
+ }, [defaultCatalog, defaultSchema, clusters, selectedClusterId, warehouses, selectedWarehouseId]);
+
+ // Only show streaming UI if viewing a conversation that is actively streaming
+ const isStreamingHere = streamingConvIds.includes(currentConversation?.id || '');
+
if (isLoading) {
return (
@@ -679,312 +1198,167 @@ export default function ProjectPage() {
return (
- {/* Chat Header - always show configuration controls */}
-
-
- {currentConversation?.title || 'New Chat'}
-
-
- {/* Catalog.Schema Input */}
-
- {/* Open Catalog Button */}
- {workspaceUrl && defaultCatalog && defaultSchema && (
-
-
- )}
- {/* Cluster Dropdown */}
- {clusters.length > 0 && (
-
-
setClusterDropdownOpen(!clusterDropdownOpen)}
- className="flex items-center h-8 rounded-md border border-[var(--color-border)] bg-[var(--color-background)] text-xs text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)]/30 focus:outline-none focus:ring-2 focus:ring-[var(--color-accent-primary)]/50 transition-colors"
- title="Cluster for code execution"
- >
-
-
- {(() => {
- const selected = clusters.find(c => c.cluster_id === selectedClusterId);
- return selected ? (
- <>
- {selected.cluster_name}
-
- ) : (
- Cluster...
- );
- })()}
-
-
- {clusterDropdownOpen && (
-
- {clusters.map((cluster) => (
- {
- setSelectedClusterId(cluster.cluster_id);
- setClusterDropdownOpen(false);
- }}
- className={cn(
- 'w-full flex items-center gap-2 px-3 py-2 text-xs text-left hover:bg-[var(--color-bg-secondary)] transition-colors',
- selectedClusterId === cluster.cluster_id && 'bg-[var(--color-bg-secondary)]'
- )}
- >
- {cluster.cluster_name}
-
- ))}
-
- )}
-
- )}
- {/* Warehouse Dropdown */}
- {warehouses.length > 0 && (
-
-
setWarehouseDropdownOpen(!warehouseDropdownOpen)}
- className="flex items-center h-8 rounded-md border border-[var(--color-border)] bg-[var(--color-background)] text-xs text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)]/30 focus:outline-none focus:ring-2 focus:ring-[var(--color-accent-primary)]/50 transition-colors"
- title="SQL Warehouse for queries"
+ {/* Chat Header */}
+
+
+
+
+
+ {currentConversation?.title || 'New Chat'}
+
+
+
+ {/* Config summary chips */}
+
+ {configChips.map((chip, i) => (
+
-
-
- {(() => {
- const selected = warehouses.find(w => w.warehouse_id === selectedWarehouseId);
- return selected ? (
- <>
- {selected.warehouse_name}
-
- ) : (
- Warehouse...
- );
- })()}
-
-
- {warehouseDropdownOpen && (
-
- {warehouses.map((warehouse) => (
- {
- setSelectedWarehouseId(warehouse.warehouse_id);
- setWarehouseDropdownOpen(false);
- }}
- className={cn(
- 'w-full flex items-center gap-2 px-3 py-2 text-xs text-left hover:bg-[var(--color-bg-secondary)] transition-colors',
- selectedWarehouseId === warehouse.warehouse_id && 'bg-[var(--color-bg-secondary)]'
- )}
- >
- {warehouse.warehouse_name}
-
- ))}
-
+ {chip.label}
+
+ ))}
+
+ {/* Settings button */}
+
+ setConfigPanelOpen(!configPanelOpen)}
+ className={cn(
+ 'flex items-center justify-center h-9 w-9 rounded-lg transition-all',
+ configPanelOpen
+ ? 'bg-[var(--color-accent-primary)]/10 text-[var(--color-accent-primary)] ring-2 ring-[var(--color-accent-primary)]/20'
+ : 'text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)]'
)}
-
- )}
- {/* Workspace Folder Input */}
-
-
-
setWorkspaceFolder(e.target.value)}
- placeholder="/Workspace/Users/..."
- className="h-full w-[240px] flex-shrink-0 px-2 bg-transparent text-xs text-[var(--color-text-primary)] placeholder:text-[var(--color-text-muted)] focus:outline-none overflow-hidden text-ellipsis"
- title={workspaceFolder || 'Workspace working folder for uploading files and pipelines'}
- />
-
- {/* MLflow Experiment Input */}
-
-
-
setMlflowExperimentName(e.target.value)}
- placeholder="MLflow Experiment ID or Name"
- className="h-full w-[240px] flex-shrink-0 px-2 bg-transparent text-xs text-[var(--color-text-primary)] placeholder:text-[var(--color-text-muted)] focus:outline-none overflow-hidden text-ellipsis"
- title={mlflowExperimentName || 'MLflow experiment ID (e.g. 2452310130108632) or name (e.g. /Users/you@company.com/traces)'}
- />
-
+ title="Configuration"
+ >
+
+
+
setConfigPanelOpen(false)}
+ defaultCatalog={defaultCatalog}
+ setDefaultCatalog={setDefaultCatalog}
+ defaultSchema={defaultSchema}
+ setDefaultSchema={setDefaultSchema}
+ clusters={clusters}
+ selectedClusterId={selectedClusterId}
+ setSelectedClusterId={setSelectedClusterId}
+ warehouses={warehouses}
+ selectedWarehouseId={selectedWarehouseId}
+ setSelectedWarehouseId={setSelectedWarehouseId}
+ workspaceFolder={workspaceFolder}
+ setWorkspaceFolder={setWorkspaceFolder}
+ mlflowExperimentName={mlflowExperimentName}
+ setMlflowExperimentName={setMlflowExperimentName}
+ workspaceUrl={workspaceUrl}
+ />
+
{/* Messages */}
-
- {messages.length === 0 && !streamingText ? (
-
-
-
-
+
+ {messages.length === 0 && !isStreamingHere ? (
+ /* Empty State */
+
+
+ {/* Decorative gradient orb */}
+
+
What can I help you build?
-
- I can help you build data pipelines, generate synthetic data, create dashboards, and more on Databricks.
+
+ Build data pipelines, generate synthetic data, create dashboards, and more on Databricks.
- {/* Example prompts */}
-
-
setInput('Generate synthetic customer data with orders and support tickets')}
- className="p-3 rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-secondary)]/30 hover:bg-[var(--color-bg-secondary)] text-left transition-colors"
- >
- Generate synthetic data
- Create realistic test datasets with customers, orders, and tickets
-
-
setInput('Create a data pipeline to transform raw data into bronze, silver, and gold layers')}
- className="p-3 rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-secondary)]/30 hover:bg-[var(--color-bg-secondary)] text-left transition-colors"
- >
- Build a data pipeline
- Create ETL workflows with bronze/silver/gold medallion architecture
-
-
setInput('Create a dashboard to visualize customer metrics and trends')}
- className="p-3 rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-secondary)]/30 hover:bg-[var(--color-bg-secondary)] text-left transition-colors"
- >
- Create a dashboard
- Build interactive visualizations with AI/BI dashboards
-
-
setInput('What tables and data do I have in my project?')}
- className="p-3 rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-secondary)]/30 hover:bg-[var(--color-bg-secondary)] text-left transition-colors"
- >
- Explore my data
- See what tables, volumes, and resources exist in your project
-
+ {/* Example prompts - 2x2 grid */}
+
+ {[
+ { title: 'Generate synthetic data', desc: 'Realistic test datasets with customers, orders, and tickets', prompt: 'Generate synthetic customer data with orders and support tickets' },
+ { title: 'Build a data pipeline', desc: 'ETL workflows with medallion architecture', prompt: 'Create a data pipeline to transform raw data into bronze, silver, and gold layers' },
+ { title: 'Create a dashboard', desc: 'Interactive AI/BI visualizations', prompt: 'Create a dashboard to visualize customer metrics and trends' },
+ { title: 'Explore my data', desc: 'Tables, volumes, and resources in your project', prompt: 'What tables and data do I have in my project?' },
+ ].map((item) => (
+
setInput(item.prompt)}
+ className="group p-4 rounded-xl border border-[var(--color-border)]/50 bg-[var(--color-background)] hover:border-[var(--color-accent-primary)]/30 hover:shadow-lg hover:shadow-[var(--color-accent-primary)]/5 hover:-translate-y-0.5 text-left transition-all duration-200"
+ >
+ {item.title}
+ {item.desc}
+
+ ))}
) : (
-
+ /* Message Thread */
+
{messages.map((message) => (
-
-
- {message.role === 'assistant' ? (
-
-
(
-
- {children}
-
- ),
- }}
- >
- {message.content}
-
+
+ {message.role === 'assistant' ? (
+ /* Assistant message - left aligned with Databricks avatar */
+
+
+
- ) : (
-
{message.content}
- )}
-
+
+
+ Assistant
+ {message.timestamp && (
+
+ {new Date(message.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+
+ )}
+
+
+
+ {message.content}
+
+
+
+
+
+ ) : (
+ /* User message - right aligned like iMessage */
+
+
+
+ {message.timestamp && (
+
+ {new Date(message.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+
+ )}
+
+
+
+
+ )}
))}
- {/* Streaming response - show accumulated text as it arrives */}
- {isStreaming && streamingText && (
-
-
-
-
(
-
- {children}
-
- ),
- }}
- >
+ {/* Streaming response */}
+ {isStreamingHere && streamingText && (
+
+
+
+
+
+
+ Assistant
+
+
+
+
{streamingText}
@@ -992,22 +1366,32 @@ export default function ProjectPage() {
)}
- {/* Activity section (thinking, tools) - shown below streaming text */}
- {activityItems.length > 0 && (
-
+ {/* Activity section */}
+ {isStreamingHere && activityItems.length > 0 && (
+
)}
- {/* Fun loader with progress - shown while streaming before text arrives */}
- {isStreaming && !streamingText && (
-
- {isReconnecting ? (
-
-
-
Reconnecting to agent...
+ {/* Loader */}
+ {isStreamingHere && !streamingText && (
+
+
+
+
+
+
+ Assistant
+
- ) : (
-
- )}
+ {isReconnecting ? (
+
+ Reconnecting to agent...
+
+ ) : (
+
+ )}
+
)}
@@ -1017,40 +1401,49 @@ export default function ProjectPage() {
{/* Input Area */}
-