feat: Phase 2 - LLM Integration for Canvas
- Add canvas.ts MCP tool with validate_canvas_intent, execute_canvas_intent, interpret_canvas_intent - Add useCanvasChat.ts bridge hook connecting canvas to chat system - Update context_builder.py with canvas tool instructions - Add ExecuteDialog for study name input - Add ChatPanel for canvas-integrated Claude responses - Connect AtomizerCanvas to Claude via useCanvasChat Canvas workflow now: 1. Build graph visually 2. Click Validate/Analyze/Execute 3. Claude processes intent via MCP tools 4. Response shown in integrated chat panel Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -235,4 +235,12 @@ Available tools:
|
||||
- `get_trial_data`, `analyze_convergence`, `compare_trials`, `get_best_design`
|
||||
- `generate_report`, `export_data`
|
||||
- `explain_physics`, `recommend_method`, `query_extractors`
|
||||
|
||||
**Canvas Tools (for visual workflow builder):**
|
||||
- `validate_canvas_intent` - Validate a canvas-generated optimization intent
|
||||
- `execute_canvas_intent` - Create a study from a canvas intent
|
||||
- `interpret_canvas_intent` - Analyze intent and provide recommendations
|
||||
|
||||
When you receive a message containing "INTENT:" followed by JSON, this is from the Canvas UI.
|
||||
Parse the intent and use the appropriate canvas tool to process it.
|
||||
"""
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useCallback, useRef, DragEvent } from 'react';
|
||||
import { useCallback, useRef, useState, DragEvent } from 'react';
|
||||
import ReactFlow, {
|
||||
Background,
|
||||
Controls,
|
||||
@@ -12,12 +12,17 @@ import { nodeTypes } from './nodes';
|
||||
import { NodePalette } from './palette/NodePalette';
|
||||
import { NodeConfigPanel } from './panels/NodeConfigPanel';
|
||||
import { ValidationPanel } from './panels/ValidationPanel';
|
||||
import { ExecuteDialog } from './panels/ExecuteDialog';
|
||||
import { useCanvasStore } from '../../hooks/useCanvasStore';
|
||||
import { useCanvasChat } from '../../hooks/useCanvasChat';
|
||||
import { NodeType } from '../../lib/canvas/schema';
|
||||
import { ChatPanel } from './panels/ChatPanel';
|
||||
|
||||
function CanvasFlow() {
|
||||
const reactFlowWrapper = useRef<HTMLDivElement>(null);
|
||||
const reactFlowInstance = useRef<ReactFlowInstance | null>(null);
|
||||
const [showExecuteDialog, setShowExecuteDialog] = useState(false);
|
||||
const [showChat, setShowChat] = useState(false);
|
||||
|
||||
const {
|
||||
nodes,
|
||||
@@ -33,6 +38,18 @@ function CanvasFlow() {
|
||||
toIntent,
|
||||
} = useCanvasStore();
|
||||
|
||||
const {
|
||||
messages,
|
||||
isThinking,
|
||||
isExecuting,
|
||||
isConnected,
|
||||
executeIntent,
|
||||
validateIntent,
|
||||
analyzeIntent,
|
||||
} = useCanvasChat({
|
||||
onError: (error) => console.error('Canvas chat error:', error),
|
||||
});
|
||||
|
||||
const onDragOver = useCallback((event: DragEvent) => {
|
||||
event.preventDefault();
|
||||
event.dataTransfer.dropEffect = 'move';
|
||||
@@ -67,17 +84,39 @@ function CanvasFlow() {
|
||||
selectNode(null);
|
||||
}, [selectNode]);
|
||||
|
||||
const handleExecute = () => {
|
||||
const handleValidate = () => {
|
||||
const result = validate();
|
||||
if (result.valid) {
|
||||
// Also send to Claude for intelligent feedback
|
||||
const intent = toIntent();
|
||||
validateIntent(intent);
|
||||
setShowChat(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAnalyze = () => {
|
||||
const result = validate();
|
||||
if (result.valid) {
|
||||
const intent = toIntent();
|
||||
// Send to chat
|
||||
console.log('Executing intent:', JSON.stringify(intent, null, 2));
|
||||
// TODO: Connect to useChat hook
|
||||
alert('Intent generated! Check console for JSON output.\n\nIn Phase 2, this will be sent to Claude.');
|
||||
analyzeIntent(intent);
|
||||
setShowChat(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleExecuteClick = () => {
|
||||
const result = validate();
|
||||
if (result.valid) {
|
||||
setShowExecuteDialog(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleExecute = async (studyName: string, autoRun: boolean) => {
|
||||
const intent = toIntent();
|
||||
await executeIntent(intent, studyName, autoRun);
|
||||
setShowExecuteDialog(false);
|
||||
setShowChat(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-full">
|
||||
{/* Left: Node Palette */}
|
||||
@@ -104,16 +143,38 @@ function CanvasFlow() {
|
||||
<MiniMap />
|
||||
</ReactFlow>
|
||||
|
||||
{/* Execute Button */}
|
||||
{/* Action Buttons */}
|
||||
<div className="absolute bottom-4 right-4 flex gap-2 z-10">
|
||||
<button
|
||||
onClick={validate}
|
||||
onClick={() => setShowChat(!showChat)}
|
||||
className={`px-3 py-2 rounded-lg transition-colors ${
|
||||
showChat
|
||||
? 'bg-blue-100 text-blue-700'
|
||||
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
||||
}`}
|
||||
title="Toggle Chat"
|
||||
>
|
||||
{isConnected ? '💬' : '🔌'}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleValidate}
|
||||
className="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors"
|
||||
>
|
||||
Validate
|
||||
</button>
|
||||
<button
|
||||
onClick={handleExecute}
|
||||
onClick={handleAnalyze}
|
||||
disabled={!validation.valid}
|
||||
className={`px-4 py-2 rounded-lg transition-colors ${
|
||||
validation.valid
|
||||
? 'bg-purple-600 text-white hover:bg-purple-700'
|
||||
: 'bg-gray-300 text-gray-500 cursor-not-allowed'
|
||||
}`}
|
||||
>
|
||||
Analyze
|
||||
</button>
|
||||
<button
|
||||
onClick={handleExecuteClick}
|
||||
disabled={!validation.valid}
|
||||
className={`px-4 py-2 rounded-lg transition-colors ${
|
||||
validation.valid
|
||||
@@ -131,8 +192,34 @@ function CanvasFlow() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right: Config Panel */}
|
||||
{selectedNode && <NodeConfigPanel nodeId={selectedNode} />}
|
||||
{/* Right: Config Panel or Chat */}
|
||||
{showChat ? (
|
||||
<div className="w-96 border-l border-gray-200 flex flex-col bg-white">
|
||||
<div className="p-3 border-b border-gray-200 flex justify-between items-center">
|
||||
<h3 className="font-semibold text-gray-800">Claude Assistant</h3>
|
||||
<button
|
||||
onClick={() => setShowChat(false)}
|
||||
className="text-gray-500 hover:text-gray-700"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
<ChatPanel
|
||||
messages={messages}
|
||||
isThinking={isThinking || isExecuting}
|
||||
/>
|
||||
</div>
|
||||
) : selectedNode ? (
|
||||
<NodeConfigPanel nodeId={selectedNode} />
|
||||
) : null}
|
||||
|
||||
{/* Execute Dialog */}
|
||||
<ExecuteDialog
|
||||
isOpen={showExecuteDialog}
|
||||
onClose={() => setShowExecuteDialog(false)}
|
||||
onExecute={handleExecute}
|
||||
isExecuting={isExecuting}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,4 +2,6 @@ export { AtomizerCanvas } from './AtomizerCanvas';
|
||||
export { NodePalette } from './palette/NodePalette';
|
||||
export { NodeConfigPanel } from './panels/NodeConfigPanel';
|
||||
export { ValidationPanel } from './panels/ValidationPanel';
|
||||
export { ExecuteDialog } from './panels/ExecuteDialog';
|
||||
export { ChatPanel } from './panels/ChatPanel';
|
||||
export * from './nodes';
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
/**
|
||||
* Chat Panel for Canvas - Displays messages from Claude
|
||||
*/
|
||||
|
||||
import { useRef, useEffect } from 'react';
|
||||
import { Message, ChatMessage } from '../../chat/ChatMessage';
|
||||
import { ThinkingIndicator } from '../../chat/ThinkingIndicator';
|
||||
|
||||
interface ChatPanelProps {
|
||||
messages: Message[];
|
||||
isThinking: boolean;
|
||||
}
|
||||
|
||||
export function ChatPanel({ messages, isThinking }: ChatPanelProps) {
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Auto-scroll to bottom when new messages arrive
|
||||
useEffect(() => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||
}, [messages, isThinking]);
|
||||
|
||||
return (
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-4 bg-gray-50">
|
||||
{/* Welcome message if no messages */}
|
||||
{messages.length === 0 && !isThinking && (
|
||||
<div className="text-center py-8">
|
||||
<div className="w-12 h-12 rounded-xl bg-blue-100 flex items-center justify-center mx-auto mb-4">
|
||||
<span className="text-2xl">🧠</span>
|
||||
</div>
|
||||
<p className="text-gray-500 text-sm max-w-xs mx-auto">
|
||||
Use <strong>Validate</strong>, <strong>Analyze</strong>, or <strong>Execute</strong> to interact with Claude about your optimization workflow.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Messages */}
|
||||
{messages.map((message) => (
|
||||
<ChatMessage key={message.id} message={message} />
|
||||
))}
|
||||
|
||||
{/* Thinking indicator */}
|
||||
{isThinking && <ThinkingIndicator />}
|
||||
|
||||
{/* Scroll anchor */}
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,131 @@
|
||||
/**
|
||||
* Execute Dialog - Prompts for study name before executing canvas intent
|
||||
*/
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
interface ExecuteDialogProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onExecute: (studyName: string, autoRun: boolean) => void;
|
||||
isExecuting: boolean;
|
||||
}
|
||||
|
||||
export function ExecuteDialog({
|
||||
isOpen,
|
||||
onClose,
|
||||
onExecute,
|
||||
isExecuting,
|
||||
}: ExecuteDialogProps) {
|
||||
const [studyName, setStudyName] = useState('');
|
||||
const [autoRun, setAutoRun] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Validate study name
|
||||
const trimmed = studyName.trim();
|
||||
if (!trimmed) {
|
||||
setError('Study name is required');
|
||||
return;
|
||||
}
|
||||
|
||||
// Check for valid snake_case
|
||||
if (!/^[a-z][a-z0-9_]*$/.test(trimmed)) {
|
||||
setError('Study name must be snake_case (lowercase letters, numbers, underscores)');
|
||||
return;
|
||||
}
|
||||
|
||||
setError(null);
|
||||
onExecute(trimmed, autoRun);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setStudyName('');
|
||||
setAutoRun(false);
|
||||
setError(null);
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div className="bg-white rounded-lg shadow-xl w-full max-w-md p-6">
|
||||
<h2 className="text-xl font-semibold text-gray-800 mb-4">
|
||||
Execute with Claude
|
||||
</h2>
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="mb-4">
|
||||
<label
|
||||
htmlFor="study-name"
|
||||
className="block text-sm font-medium text-gray-600 mb-1"
|
||||
>
|
||||
Study Name
|
||||
</label>
|
||||
<input
|
||||
id="study-name"
|
||||
type="text"
|
||||
value={studyName}
|
||||
onChange={(e) => setStudyName(e.target.value.toLowerCase().replace(/\s+/g, '_'))}
|
||||
placeholder="my_optimization_study"
|
||||
className="w-full px-3 py-2 border rounded-lg font-mono focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||
disabled={isExecuting}
|
||||
autoFocus
|
||||
/>
|
||||
{error && (
|
||||
<p className="mt-1 text-sm text-red-600">{error}</p>
|
||||
)}
|
||||
<p className="mt-1 text-xs text-gray-500">
|
||||
Use snake_case (e.g., bracket_mass_v1, mirror_wfe_optimization)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<label className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={autoRun}
|
||||
onChange={(e) => setAutoRun(e.target.checked)}
|
||||
disabled={isExecuting}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
<span className="text-sm text-gray-700">
|
||||
Start optimization immediately after creation
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 justify-end">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleClose}
|
||||
disabled={isExecuting}
|
||||
className="px-4 py-2 text-gray-600 hover:text-gray-800 disabled:opacity-50"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isExecuting}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
|
||||
>
|
||||
{isExecuting ? (
|
||||
<>
|
||||
<span className="animate-spin">⏳</span>
|
||||
Executing...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Send to Claude
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
184
atomizer-dashboard/frontend/src/hooks/useCanvasChat.ts
Normal file
184
atomizer-dashboard/frontend/src/hooks/useCanvasChat.ts
Normal file
@@ -0,0 +1,184 @@
|
||||
/**
|
||||
* Canvas-Chat Bridge Hook
|
||||
*
|
||||
* Bridges the Canvas UI with the Chat system, allowing canvas intents
|
||||
* to be sent to Claude for intelligent execution.
|
||||
*/
|
||||
|
||||
import { useCallback, useState } from 'react';
|
||||
import { useChat, ChatMode } from './useChat';
|
||||
import { OptimizationIntent, formatIntentForChat } from '../lib/canvas/intent';
|
||||
|
||||
interface UseCanvasChatOptions {
|
||||
mode?: ChatMode;
|
||||
onError?: (error: string) => void;
|
||||
}
|
||||
|
||||
interface CanvasChatState {
|
||||
isExecuting: boolean;
|
||||
lastIntent: OptimizationIntent | null;
|
||||
executionResult: ExecutionResult | null;
|
||||
}
|
||||
|
||||
interface ExecutionResult {
|
||||
success: boolean;
|
||||
action: string;
|
||||
studyName?: string;
|
||||
path?: string;
|
||||
error?: string;
|
||||
message?: string;
|
||||
}
|
||||
|
||||
export function useCanvasChat({
|
||||
mode = 'user',
|
||||
onError,
|
||||
}: UseCanvasChatOptions = {}) {
|
||||
const chat = useChat({ mode, onError });
|
||||
|
||||
const [state, setState] = useState<CanvasChatState>({
|
||||
isExecuting: false,
|
||||
lastIntent: null,
|
||||
executionResult: null,
|
||||
});
|
||||
|
||||
/**
|
||||
* Submit an intent for validation only (no execution)
|
||||
*/
|
||||
const validateIntent = useCallback(
|
||||
async (intent: OptimizationIntent): Promise<void> => {
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
isExecuting: true,
|
||||
lastIntent: intent,
|
||||
executionResult: null,
|
||||
}));
|
||||
|
||||
// Format intent for chat and ask Claude to validate
|
||||
const message = `Please validate this canvas optimization intent:
|
||||
|
||||
${formatIntentForChat(intent)}
|
||||
|
||||
Use the validate_canvas_intent tool to check for errors and provide feedback.`;
|
||||
|
||||
await chat.sendMessage(message);
|
||||
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
isExecuting: false,
|
||||
}));
|
||||
},
|
||||
[chat]
|
||||
);
|
||||
|
||||
/**
|
||||
* Execute an intent (create study and optionally run)
|
||||
*/
|
||||
const executeIntent = useCallback(
|
||||
async (
|
||||
intent: OptimizationIntent,
|
||||
studyName: string,
|
||||
autoRun: boolean = false
|
||||
): Promise<void> => {
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
isExecuting: true,
|
||||
lastIntent: intent,
|
||||
executionResult: null,
|
||||
}));
|
||||
|
||||
// Format intent for chat and ask Claude to execute
|
||||
const message = `Please execute this canvas optimization intent to create study "${studyName}"${autoRun ? ' and start the optimization' : ''}:
|
||||
|
||||
${formatIntentForChat(intent)}
|
||||
|
||||
Use the execute_canvas_intent tool with:
|
||||
- study_name: "${studyName}"
|
||||
- auto_run: ${autoRun}
|
||||
|
||||
After execution, provide a summary of what was created.`;
|
||||
|
||||
await chat.sendMessage(message);
|
||||
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
isExecuting: false,
|
||||
}));
|
||||
},
|
||||
[chat]
|
||||
);
|
||||
|
||||
/**
|
||||
* Get recommendations for an intent without executing
|
||||
*/
|
||||
const analyzeIntent = useCallback(
|
||||
async (intent: OptimizationIntent): Promise<void> => {
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
isExecuting: true,
|
||||
lastIntent: intent,
|
||||
}));
|
||||
|
||||
const message = `Please analyze this canvas optimization intent and provide recommendations:
|
||||
|
||||
${formatIntentForChat(intent)}
|
||||
|
||||
Use the interpret_canvas_intent tool to:
|
||||
1. Analyze the problem characteristics
|
||||
2. Suggest the best optimization method
|
||||
3. Recommend trial budget
|
||||
4. Identify any potential issues
|
||||
|
||||
Provide your recommendations in a clear, actionable format.`;
|
||||
|
||||
await chat.sendMessage(message);
|
||||
|
||||
setState((prev) => ({
|
||||
...prev,
|
||||
isExecuting: false,
|
||||
}));
|
||||
},
|
||||
[chat]
|
||||
);
|
||||
|
||||
/**
|
||||
* Send a free-form message about the current canvas state
|
||||
*/
|
||||
const askAboutCanvas = useCallback(
|
||||
async (intent: OptimizationIntent, question: string): Promise<void> => {
|
||||
const message = `Given this canvas optimization intent:
|
||||
|
||||
${formatIntentForChat(intent)}
|
||||
|
||||
${question}`;
|
||||
|
||||
await chat.sendMessage(message);
|
||||
},
|
||||
[chat]
|
||||
);
|
||||
|
||||
return {
|
||||
// Chat state
|
||||
messages: chat.messages,
|
||||
isThinking: chat.isThinking || state.isExecuting,
|
||||
isConnected: chat.isConnected,
|
||||
error: chat.error,
|
||||
sessionId: chat.sessionId,
|
||||
mode: chat.mode,
|
||||
|
||||
// Canvas-specific state
|
||||
isExecuting: state.isExecuting,
|
||||
lastIntent: state.lastIntent,
|
||||
executionResult: state.executionResult,
|
||||
|
||||
// Actions
|
||||
validateIntent,
|
||||
executeIntent,
|
||||
analyzeIntent,
|
||||
askAboutCanvas,
|
||||
|
||||
// Base chat actions
|
||||
sendMessage: chat.sendMessage,
|
||||
clearMessages: chat.clearMessages,
|
||||
switchMode: chat.switchMode,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user