Implement initial project structure and features for Automaker application, including environment setup, auto mode services, and session management. Update port configurations to 3007 and add new UI components for enhanced user interaction.

This commit is contained in:
Cody Seibert
2025-12-08 21:11:00 -05:00
parent 3c8e786f29
commit 9392422d35
67 changed files with 16275 additions and 696 deletions

View File

@@ -0,0 +1,179 @@
import { useEffect, useCallback } from "react";
import { useShallow } from "zustand/react/shallow";
import { useAppStore } from "@/store/app-store";
import { getElectronAPI } from "@/lib/electron";
import type { AutoModeEvent } from "@/types/electron";
/**
* Hook for managing auto mode
*/
export function useAutoMode() {
const {
isAutoModeRunning,
setAutoModeRunning,
currentAutoTask,
setCurrentAutoTask,
currentProject,
addAutoModeActivity,
} = useAppStore(
useShallow((state) => ({
isAutoModeRunning: state.isAutoModeRunning,
setAutoModeRunning: state.setAutoModeRunning,
currentAutoTask: state.currentAutoTask,
setCurrentAutoTask: state.setCurrentAutoTask,
currentProject: state.currentProject,
addAutoModeActivity: state.addAutoModeActivity,
}))
);
// Handle auto mode events
useEffect(() => {
const api = getElectronAPI();
if (!api?.autoMode) return;
const unsubscribe = api.autoMode.onEvent((event: AutoModeEvent) => {
console.log("[AutoMode Event]", event);
switch (event.type) {
case "auto_mode_feature_start":
setCurrentAutoTask(event.featureId);
addAutoModeActivity({
featureId: event.featureId,
type: "start",
message: `Started working on feature`,
});
break;
case "auto_mode_feature_complete":
// Feature completed - UI will reload features on its own
console.log(
"[AutoMode] Feature completed:",
event.featureId,
"passes:",
event.passes
);
addAutoModeActivity({
featureId: event.featureId,
type: "complete",
message: event.passes
? "Feature completed successfully"
: "Feature completed with failures",
passes: event.passes,
});
break;
case "auto_mode_complete":
// All features completed
setAutoModeRunning(false);
setCurrentAutoTask(null);
console.log("[AutoMode] All features completed!");
break;
case "auto_mode_error":
console.error("[AutoMode Error]", event.error);
if (event.featureId) {
addAutoModeActivity({
featureId: event.featureId,
type: "error",
message: event.error,
});
}
break;
case "auto_mode_progress":
// Log progress updates (throttle to avoid spam)
if (event.content && event.content.length > 10) {
addAutoModeActivity({
featureId: event.featureId,
type: "progress",
message: event.content.substring(0, 200), // Limit message length
});
}
break;
case "auto_mode_tool":
// Log tool usage
addAutoModeActivity({
featureId: event.featureId,
type: "tool",
message: `Using tool: ${event.tool}`,
tool: event.tool,
});
break;
case "auto_mode_phase":
// Log phase transitions (Planning, Action, Verification)
console.log(`[AutoMode] Phase: ${event.phase} for ${event.featureId}`);
addAutoModeActivity({
featureId: event.featureId,
type: event.phase,
message: event.message,
phase: event.phase,
});
break;
}
});
return unsubscribe;
}, [setCurrentAutoTask, setAutoModeRunning, addAutoModeActivity]);
// Start auto mode
const start = useCallback(async () => {
if (!currentProject) {
console.error("No project selected");
return;
}
try {
const api = getElectronAPI();
if (!api?.autoMode) {
throw new Error("Auto mode API not available");
}
const result = await api.autoMode.start(currentProject.path);
if (result.success) {
setAutoModeRunning(true);
console.log("[AutoMode] Started successfully");
} else {
console.error("[AutoMode] Failed to start:", result.error);
throw new Error(result.error || "Failed to start auto mode");
}
} catch (error) {
console.error("[AutoMode] Error starting:", error);
setAutoModeRunning(false);
throw error;
}
}, [currentProject, setAutoModeRunning]);
// Stop auto mode
const stop = useCallback(async () => {
try {
const api = getElectronAPI();
if (!api?.autoMode) {
throw new Error("Auto mode API not available");
}
const result = await api.autoMode.stop();
if (result.success) {
setAutoModeRunning(false);
setCurrentAutoTask(null);
console.log("[AutoMode] Stopped successfully");
} else {
console.error("[AutoMode] Failed to stop:", result.error);
throw new Error(result.error || "Failed to stop auto mode");
}
} catch (error) {
console.error("[AutoMode] Error stopping:", error);
throw error;
}
}, [setAutoModeRunning, setCurrentAutoTask]);
return {
isRunning: isAutoModeRunning,
currentTask: currentAutoTask,
start,
stop,
};
}

View File

@@ -0,0 +1,402 @@
import { useState, useEffect, useCallback, useRef } from "react";
import type { Message, StreamEvent } from "@/types/electron";
import { useMessageQueue } from "./use-message-queue";
import type { ImageAttachment } from "@/store/app-store";
interface UseElectronAgentOptions {
sessionId: string;
workingDirectory?: string;
onToolUse?: (toolName: string, toolInput: unknown) => void;
}
interface UseElectronAgentResult {
messages: Message[];
isProcessing: boolean;
isConnected: boolean;
sendMessage: (content: string, images?: ImageAttachment[]) => Promise<void>;
stopExecution: () => Promise<void>;
clearHistory: () => Promise<void>;
error: string | null;
// Queue-related state
queuedMessages: { id: string; content: string; images?: ImageAttachment[]; timestamp: Date }[];
isQueueProcessing: boolean;
clearMessageQueue: () => void;
}
/**
* React hook for interacting with the Electron-based Claude agent
*
* This hook provides a clean interface to the agent running in the Electron
* main process, which survives Next.js restarts.
*/
export function useElectronAgent({
sessionId,
workingDirectory,
onToolUse,
}: UseElectronAgentOptions): UseElectronAgentResult {
const [messages, setMessages] = useState<Message[]>([]);
const [isProcessing, setIsProcessing] = useState(false);
const [isConnected, setIsConnected] = useState(false);
const [error, setError] = useState<string | null>(null);
const unsubscribeRef = useRef<(() => void) | null>(null);
const currentMessageRef = useRef<Message | null>(null);
// Send message directly to the agent (bypassing queue)
const sendMessageDirectly = useCallback(
async (content: string, images?: ImageAttachment[]) => {
if (!window.electronAPI?.agent) {
setError("Electron API not available");
return;
}
if (isProcessing) {
throw new Error("Agent is already processing a message");
}
setIsProcessing(true);
setError(null);
try {
console.log("[useElectronAgent] Sending message directly", {
hasImages: images && images.length > 0,
imageCount: images?.length || 0
});
// Save images to temp files and get paths
let imagePaths: string[] | undefined;
if (images && images.length > 0) {
imagePaths = [];
for (const image of images) {
const result = await window.electronAPI.saveImageToTemp(
image.data,
image.filename,
image.mimeType
);
if (result.success && result.path) {
imagePaths.push(result.path);
console.log("[useElectronAgent] Saved image to temp:", result.path);
} else {
console.error("[useElectronAgent] Failed to save image:", result.error);
}
}
}
const result = await window.electronAPI.agent.send(
sessionId,
content,
workingDirectory,
imagePaths
);
if (!result.success) {
setError(result.error || "Failed to send message");
setIsProcessing(false);
}
// Note: We don't set isProcessing to false here because
// it will be set by the "complete" or "error" stream event
} catch (err) {
console.error("[useElectronAgent] Failed to send message:", err);
setError(err instanceof Error ? err.message : "Failed to send message");
setIsProcessing(false);
throw err;
}
},
[sessionId, workingDirectory, isProcessing]
);
// Message queue for queuing messages when agent is busy
const {
queuedMessages,
isProcessingQueue,
addToQueue,
clearQueue,
processNext,
} = useMessageQueue({
onProcessNext: async (queuedMessage) => {
await sendMessageDirectly(queuedMessage.content, queuedMessage.images);
},
});
// Initialize connection and load history
useEffect(() => {
if (!window.electronAPI?.agent) {
setError("Electron API not available. Please run in Electron.");
return;
}
if (!sessionId) {
// No session selected - reset state
setMessages([]);
setIsConnected(false);
setIsProcessing(false);
setError(null);
return;
}
let mounted = true;
const initialize = async () => {
// Reset state when switching sessions
setIsProcessing(false);
setError(null);
try {
console.log("[useElectronAgent] Starting session:", sessionId);
const result = await window.electronAPI.agent.start(
sessionId,
workingDirectory
);
if (!mounted) return;
if (result.success && result.messages) {
console.log("[useElectronAgent] Loaded", result.messages.length, "messages");
setMessages(result.messages);
setIsConnected(true);
} else {
setError(result.error || "Failed to start session");
}
} catch (err) {
if (!mounted) return;
console.error("[useElectronAgent] Failed to initialize:", err);
setError(err instanceof Error ? err.message : "Failed to initialize");
}
};
initialize();
return () => {
mounted = false;
};
}, [sessionId, workingDirectory]);
// Auto-process queue when agent finishes processing
useEffect(() => {
if (!isProcessing && !isProcessingQueue && queuedMessages.length > 0) {
console.log("[useElectronAgent] Auto-processing next queued message");
processNext();
}
}, [isProcessing, isProcessingQueue, queuedMessages.length, processNext]);
// Subscribe to streaming events
useEffect(() => {
if (!window.electronAPI?.agent) return;
if (!sessionId) return; // Don't subscribe if no session
console.log("[useElectronAgent] Subscribing to stream events for session:", sessionId);
const handleStream = (event: StreamEvent) => {
// CRITICAL: Only process events for our specific session
if (event.sessionId !== sessionId) {
console.log("[useElectronAgent] Ignoring event for different session:", event.sessionId);
return;
}
console.log("[useElectronAgent] Stream event for", sessionId, ":", event.type);
switch (event.type) {
case "message":
// User message added
setMessages((prev) => [...prev, event.message]);
break;
case "stream":
// Assistant message streaming
if (event.isComplete) {
// Final update
setMessages((prev) =>
prev.map((msg) =>
msg.id === event.messageId
? { ...msg, content: event.content }
: msg
)
);
currentMessageRef.current = null;
} else {
// Streaming update
setMessages((prev) => {
const existingIndex = prev.findIndex((m) => m.id === event.messageId);
if (existingIndex >= 0) {
// Update existing message
return prev.map((msg) =>
msg.id === event.messageId
? { ...msg, content: event.content }
: msg
);
} else {
// Create new message
const newMessage: Message = {
id: event.messageId,
role: "assistant",
content: event.content,
timestamp: new Date().toISOString(),
};
currentMessageRef.current = newMessage;
return [...prev, newMessage];
}
});
}
break;
case "tool_use":
// Tool being used
console.log("[useElectronAgent] Tool use:", event.tool.name);
onToolUse?.(event.tool.name, event.tool.input);
break;
case "complete":
// Agent finished processing for THIS session
console.log("[useElectronAgent] Processing complete for session:", sessionId);
setIsProcessing(false);
if (event.messageId) {
setMessages((prev) =>
prev.map((msg) =>
msg.id === event.messageId
? { ...msg, content: event.content }
: msg
)
);
}
break;
case "error":
// Error occurred for THIS session
console.error("[useElectronAgent] Agent error for session:", sessionId, event.error);
setIsProcessing(false);
setError(event.error);
if (event.message) {
setMessages((prev) => [...prev, event.message]);
}
break;
}
};
unsubscribeRef.current = window.electronAPI.agent.onStream(handleStream);
return () => {
if (unsubscribeRef.current) {
console.log("[useElectronAgent] Unsubscribing from stream events for session:", sessionId);
unsubscribeRef.current();
unsubscribeRef.current = null;
}
};
}, [sessionId, onToolUse]);
// Send a message to the agent
const sendMessage = useCallback(
async (content: string, images?: ImageAttachment[]) => {
if (!window.electronAPI?.agent) {
setError("Electron API not available");
return;
}
if (isProcessing) {
console.warn("[useElectronAgent] Already processing a message");
return;
}
setIsProcessing(true);
setError(null);
try {
console.log("[useElectronAgent] Sending message", {
hasImages: images && images.length > 0,
imageCount: images?.length || 0
});
// Save images to temp files and get paths
let imagePaths: string[] | undefined;
if (images && images.length > 0) {
imagePaths = [];
for (const image of images) {
const result = await window.electronAPI.saveImageToTemp(
image.data,
image.filename,
image.mimeType
);
if (result.success && result.path) {
imagePaths.push(result.path);
console.log("[useElectronAgent] Saved image to temp:", result.path);
} else {
console.error("[useElectronAgent] Failed to save image:", result.error);
}
}
}
const result = await window.electronAPI.agent.send(
sessionId,
content,
workingDirectory,
imagePaths
);
if (!result.success) {
setError(result.error || "Failed to send message");
setIsProcessing(false);
}
// Note: We don't set isProcessing to false here because
// it will be set by the "complete" or "error" stream event
} catch (err) {
console.error("[useElectronAgent] Failed to send message:", err);
setError(err instanceof Error ? err.message : "Failed to send message");
setIsProcessing(false);
}
},
[sessionId, workingDirectory, isProcessing]
);
// Stop current execution
const stopExecution = useCallback(async () => {
if (!window.electronAPI?.agent) {
setError("Electron API not available");
return;
}
try {
console.log("[useElectronAgent] Stopping execution");
const result = await window.electronAPI.agent.stop(sessionId);
if (!result.success) {
setError(result.error || "Failed to stop execution");
} else {
setIsProcessing(false);
}
} catch (err) {
console.error("[useElectronAgent] Failed to stop:", err);
setError(err instanceof Error ? err.message : "Failed to stop execution");
}
}, [sessionId]);
// Clear conversation history
const clearHistory = useCallback(async () => {
if (!window.electronAPI?.agent) {
setError("Electron API not available");
return;
}
try {
console.log("[useElectronAgent] Clearing history");
const result = await window.electronAPI.agent.clear(sessionId);
if (result.success) {
setMessages([]);
setError(null);
} else {
setError(result.error || "Failed to clear history");
}
} catch (err) {
console.error("[useElectronAgent] Failed to clear:", err);
setError(err instanceof Error ? err.message : "Failed to clear history");
}
}, [sessionId]);
return {
messages,
isProcessing,
isConnected,
sendMessage,
stopExecution,
clearHistory,
error,
};
}

View File

@@ -0,0 +1,81 @@
import { useState, useCallback } from 'react';
import type { ImageAttachment } from '@/store/app-store';
export interface QueuedMessage {
id: string;
content: string;
images?: ImageAttachment[];
timestamp: Date;
}
interface UseMessageQueueOptions {
onProcessNext: (message: QueuedMessage) => Promise<void>;
}
interface UseMessageQueueResult {
queuedMessages: QueuedMessage[];
isProcessingQueue: boolean;
addToQueue: (content: string, images?: ImageAttachment[]) => void;
clearQueue: () => void;
removeFromQueue: (messageId: string) => void;
processNext: () => Promise<void>;
}
/**
* React hook for managing a queue of messages to be sent to the agent
*
* This allows users to queue up multiple messages while one is being processed,
* improving the chat experience by removing blocking behavior.
*/
export function useMessageQueue({ onProcessNext }: UseMessageQueueOptions): UseMessageQueueResult {
const [queuedMessages, setQueuedMessages] = useState<QueuedMessage[]>([]);
const [isProcessingQueue, setIsProcessingQueue] = useState(false);
const addToQueue = useCallback((content: string, images?: ImageAttachment[]) => {
const queuedMessage: QueuedMessage = {
id: `queued-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
content: content.trim(),
images,
timestamp: new Date(),
};
setQueuedMessages(prev => [...prev, queuedMessage]);
}, []);
const removeFromQueue = useCallback((messageId: string) => {
setQueuedMessages(prev => prev.filter(msg => msg.id !== messageId));
}, []);
const clearQueue = useCallback(() => {
setQueuedMessages([]);
}, []);
const processNext = useCallback(async () => {
if (queuedMessages.length === 0 || isProcessingQueue) {
return;
}
const nextMessage = queuedMessages[0];
setIsProcessingQueue(true);
try {
await onProcessNext(nextMessage);
// Remove the processed message from queue
setQueuedMessages(prev => prev.slice(1));
} catch (error) {
console.error('Error processing queued message:', error);
// Keep the message in queue for retry or manual removal
} finally {
setIsProcessingQueue(false);
}
}, [queuedMessages, isProcessingQueue, onProcessNext]);
return {
queuedMessages,
isProcessingQueue,
addToQueue,
clearQueue,
removeFromQueue,
processNext,
};
}