create-stylus-ide 1.0.0

package/frontend/hooks/useCompilation.ts

@@ -0,0 +1,173 @@
+"use client";
+
+import { useState, useCallback, useEffect } from "react";
+import { CompilationOutput } from "@/lib/compilation";
+
+interface ParsedError {
+  line: number;
+  column: number;
+  message: string;
+}
+
+// NEW: Project file interface
+interface ProjectFile {
+  path: string;
+  content: string;
+}
+
+interface UseCompilationReturn {
+  isCompiling: boolean;
+  output: CompilationOutput[];
+  errors: ParsedError[];
+  compilationTime: number | null;
+  sessionId: string | null;
+  compile: (
+    code: string,
+    streaming?: boolean,
+    projectFiles?: ProjectFile[] // NEW: Add projectFiles parameter
+  ) => Promise<void>;
+  clearOutput: () => void;
+}
+
+export function useCompilation(): UseCompilationReturn {
+  const [isCompiling, setIsCompiling] = useState(false);
+  const [output, setOutput] = useState<CompilationOutput[]>([]);
+  const [errors, setErrors] = useState<ParsedError[]>([]);
+  const [compilationTime, setCompilationTime] = useState<number | null>(null);
+  const [sessionId, setSessionId] = useState<string | null>(null);
+
+  // Cleanup old projects periodically
+  useEffect(() => {
+    const cleanupInterval = setInterval(() => {
+      fetch("/api/cleanup", { method: "POST" }).catch(() => {
+        // Ignore cleanup errors
+      });
+    }, 5 * 60 * 1000); // Every 5 minutes
+
+    return () => clearInterval(cleanupInterval);
+  }, []);
+
+  const compile = useCallback(
+    async (
+      code: string,
+      streaming = false,
+      projectFiles?: ProjectFile[] // NEW: Accept project files
+    ) => {
+      setIsCompiling(true);
+      setOutput([]);
+      setErrors([]);
+      setCompilationTime(null);
+      setSessionId(null);
+      const startTime = Date.now();
+
+      try {
+        if (streaming) {
+          // NEW: Updated streaming endpoint with projectFiles
+          const response = await fetch("/api/compile-stream", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              code,
+              projectFiles, // NEW: Send all files
+            }),
+          });
+
+          if (!response.ok) {
+            throw new Error("Compilation request failed");
+          }
+
+          const reader = response.body?.getReader();
+          const decoder = new TextDecoder();
+
+          if (!reader) {
+            throw new Error("No response body");
+          }
+
+          let buffer = "";
+          while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+
+            buffer += decoder.decode(value, { stream: true });
+            const lines = buffer.split("\n\n");
+            buffer = lines.pop() || "";
+
+            for (const line of lines) {
+              if (line.startsWith("data: ")) {
+                const data = JSON.parse(line.slice(6));
+                setOutput((prev) => [...prev, data]);
+
+                if (data.type === "start" && data.sessionId) {
+                  setSessionId(data.sessionId);
+                }
+
+                if (data.type === "result" && data.errors) {
+                  setErrors(data.errors);
+                }
+              }
+            }
+          }
+
+          setCompilationTime(Date.now() - startTime);
+        } else {
+          // NEW: Updated non-streaming endpoint with projectFiles
+          const response = await fetch("/api/compile", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              code,
+              projectFiles, // NEW: Send all files
+            }),
+          });
+
+          const result = await response.json();
+
+          if (result.sessionId) {
+            setSessionId(result.sessionId);
+          }
+
+          if (result.output) {
+            setOutput(result.output);
+          }
+
+          if (result.errors) {
+            setErrors(result.errors);
+          }
+
+          if (result.error) {
+            setOutput([{ type: "error", data: result.error }]);
+          }
+
+          setCompilationTime(Date.now() - startTime);
+        }
+      } catch (error) {
+        setOutput([
+          {
+            type: "error",
+            data: error instanceof Error ? error.message : "Compilation failed",
+          },
+        ]);
+        setCompilationTime(Date.now() - startTime);
+      } finally {
+        setIsCompiling(false);
+      }
+    },
+    []
+  );
+
+  const clearOutput = useCallback(() => {
+    setOutput([]);
+    setErrors([]);
+    setCompilationTime(null);
+  }, []);
+
+  return {
+    isCompiling,
+    output,
+    errors,
+    compilationTime,
+    sessionId,
+    compile,
+    clearOutput,
+  };
+}

package/frontend/hooks/useFileTabs.ts

@@ -0,0 +1,178 @@
+"use client";
+
+import { useState, useCallback } from "react";
+
+export interface FileTab {
+  id: string;
+  name: string;
+  content: string;
+  language: "rust" | "toml" | "markdown" | "text" | "gitignore";
+  path: string; // NEW - Full path for multi-file support
+  modified: boolean; // NEW - Track if file has unsaved changes
+}
+
+interface UseFileTabsReturn {
+  tabs: FileTab[];
+  activeTabId: string | null;
+  activeTab: FileTab | undefined;
+  addTab: (
+    name: string,
+    content: string,
+    language: FileTab["language"],
+    path?: string
+  ) => string;
+  removeTab: (id: string) => void;
+  updateTabContent: (id: string, content: string) => void;
+  setActiveTab: (id: string) => void;
+  renameTab: (id: string, newName: string) => void;
+  getTabByPath: (path: string) => FileTab | undefined;
+  openOrActivateTab: (
+    path: string,
+    name: string,
+    content: string,
+    language: FileTab["language"]
+  ) => void;
+  markTabSaved: (id: string) => void;
+  closeTabByPath: (path: string) => void;
+}
+
+export function useFileTabs(defaultContent: string = ""): UseFileTabsReturn {
+  const [tabs, setTabs] = useState<FileTab[]>([
+    {
+      id: "default",
+      name: "lib.rs",
+      content: defaultContent,
+      language: "rust",
+      path: "src/lib.rs",
+      modified: false,
+    },
+  ]);
+  const [activeTabId, setActiveTabId] = useState<string | null>("default");
+
+  const activeTab = tabs.find((tab) => tab.id === activeTabId);
+
+  // Add a new tab
+  const addTab = useCallback(
+    (
+      name: string,
+      content: string,
+      language: FileTab["language"],
+      path?: string
+    ): string => {
+      const newTab: FileTab = {
+        id: `tab-${Date.now()}-${Math.random()}`,
+        name,
+        content,
+        language,
+        path: path || name,
+        modified: false,
+      };
+
+      setTabs((prev) => [...prev, newTab]);
+      setActiveTabId(newTab.id);
+      return newTab.id;
+    },
+    []
+  );
+
+  // Remove a tab
+  const removeTab = useCallback((id: string) => {
+    setTabs((prev) => {
+      const filtered = prev.filter((tab) => tab.id !== id);
+
+      // If we removed the active tab, activate another one
+      setActiveTabId((currentActive) => {
+        if (currentActive === id) {
+          return filtered.length > 0 ? filtered[filtered.length - 1].id : null;
+        }
+        return currentActive;
+      });
+
+      return filtered;
+    });
+  }, []);
+
+  // Update tab content
+  const updateTabContent = useCallback((id: string, content: string) => {
+    setTabs((prev) =>
+      prev.map((tab) =>
+        tab.id === id ? { ...tab, content, modified: true } : tab
+      )
+    );
+  }, []);
+
+  // Set active tab
+  const setActiveTab = useCallback((id: string) => {
+    setActiveTabId(id);
+  }, []);
+
+  // Rename a tab
+  const renameTab = useCallback((id: string, newName: string) => {
+    setTabs((prev) =>
+      prev.map((tab) => (tab.id === id ? { ...tab, name: newName } : tab))
+    );
+  }, []);
+
+  // Get tab by path (for file tree integration)
+  const getTabByPath = useCallback(
+    (path: string): FileTab | undefined => {
+      return tabs.find((tab) => tab.path === path);
+    },
+    [tabs]
+  );
+
+  // Open or activate existing tab (key function for file tree)
+  const openOrActivateTab = useCallback(
+    (
+      path: string,
+      name: string,
+      content: string,
+      language: FileTab["language"]
+    ) => {
+      const existingTab = tabs.find((tab) => tab.path === path);
+
+      if (existingTab) {
+        // Tab already open, just activate it
+        setActiveTabId(existingTab.id);
+      } else {
+        // Open new tab
+        const newTabId = addTab(name, content, language, path);
+        setActiveTabId(newTabId);
+      }
+    },
+    [tabs, addTab]
+  );
+
+  // Mark tab as saved (remove modified flag)
+  const markTabSaved = useCallback((id: string) => {
+    setTabs((prev) =>
+      prev.map((tab) => (tab.id === id ? { ...tab, modified: false } : tab))
+    );
+  }, []);
+
+  // Close tab by path (for file tree integration)
+  const closeTabByPath = useCallback(
+    (path: string) => {
+      const tab = tabs.find((t) => t.path === path);
+      if (tab) {
+        removeTab(tab.id);
+      }
+    },
+    [tabs, removeTab]
+  );
+
+  return {
+    tabs,
+    activeTabId,
+    activeTab,
+    addTab,
+    removeTab,
+    updateTabContent,
+    setActiveTab,
+    renameTab,
+    getTabByPath,
+    openOrActivateTab,
+    markTabSaved,
+    closeTabByPath,
+  };
+}

package/frontend/hooks/useGitHubLoader.ts

@@ -0,0 +1,50 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { ProjectState } from "@/types/project";
+import { GitHubURLInfo } from "@/lib/url-parser";
+import { loadGitHubRepo, GitHubLoadProgress } from "@/lib/github-loader";
+
+export function useGitHubLoader() {
+  const [isLoading, setIsLoading] = useState(false);
+  const [progress, setProgress] = useState<GitHubLoadProgress | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadFromGitHub = useCallback(
+    async (urlInfo: GitHubURLInfo): Promise<ProjectState | null> => {
+      setIsLoading(true);
+      setError(null);
+      setProgress(null);
+
+      try {
+        const project = await loadGitHubRepo(urlInfo, (progressUpdate) => {
+          setProgress(progressUpdate);
+        });
+
+        setIsLoading(false);
+        return project;
+      } catch (err) {
+        const errorMessage =
+          err instanceof Error ? err.message : "Unknown error";
+        setError(errorMessage);
+        setIsLoading(false);
+        return null;
+      }
+    },
+    []
+  );
+
+  const reset = useCallback(() => {
+    setIsLoading(false);
+    setProgress(null);
+    setError(null);
+  }, []);
+
+  return {
+    isLoading,
+    progress,
+    error,
+    loadFromGitHub,
+    reset,
+  };
+}

package/frontend/hooks/useKeyboardShortcuts.ts

@@ -0,0 +1,47 @@
+'use client';
+
+import { useEffect } from 'react';
+
+interface KeyboardShortcutsProps {
+  onToggleAI: () => void;
+  onToggleOutput: () => void;
+  onCompile: () => void;
+}
+
+export function useKeyboardShortcuts({ onToggleAI, onToggleOutput, onCompile }: KeyboardShortcutsProps) {
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      // Check if user is typing in an input/textarea
+      const target = event.target as HTMLElement;
+      const isInputElement = target.tagName === 'INPUT' || 
+                            target.tagName === 'TEXTAREA' || 
+                            target.contentEditable === 'true';
+
+      // Cmd/Ctrl + K: Toggle AI panel
+      if ((event.metaKey || event.ctrlKey) && event.key === 'k' && !isInputElement) {
+        event.preventDefault();
+        onToggleAI();
+      }
+
+      // Cmd/Ctrl + `: Toggle output panel
+      if ((event.metaKey || event.ctrlKey) && event.key === '`' && !isInputElement) {
+        event.preventDefault();
+        onToggleOutput();
+      }
+
+      // Cmd/Ctrl + Enter: Compile
+      if ((event.metaKey || event.ctrlKey) && event.key === 'Enter' && !isInputElement) {
+        event.preventDefault();
+        onCompile();
+      }
+
+      // Escape: Close panels on mobile
+      if (event.key === 'Escape' && window.innerWidth < 1024) {
+        onToggleAI(); // This will close if open
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [onToggleAI, onToggleOutput, onCompile]);
+}

package/frontend/hooks/usePanelState.ts

@@ -0,0 +1,115 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+interface PanelState {
+  showAIPanel: boolean;
+  showContractPanel: boolean;
+  showOutput: boolean;
+  isAIPanelCollapsed: boolean;
+  isContractPanelCollapsed: boolean;
+  setShowAIPanel: (show: boolean) => void;
+  setShowContractPanel: (show: boolean) => void;
+  setShowOutput: (show: boolean) => void;
+  setIsAIPanelCollapsed: (collapsed: boolean) => void;
+  setIsContractPanelCollapsed: (collapsed: boolean) => void;
+  toggleAIPanel: () => void;
+  toggleContractPanel: () => void;
+  toggleOutput: () => void;
+  toggleAIPanelCollapse: () => void;
+  toggleContractPanelCollapse: () => void;
+}
+
+export function usePanelState(): PanelState {
+  const [showAIPanel, setShowAIPanel] = useState(false);
+  const [showContractPanel, setShowContractPanel] = useState(false);
+  const [showOutput, setShowOutput] = useState(true);
+  const [isAIPanelCollapsed, setIsAIPanelCollapsed] = useState(false);
+  const [isContractPanelCollapsed, setIsContractPanelCollapsed] = useState(false);
+
+  // Handle responsive behavior
+  useEffect(() => {
+    const handleResize = () => {
+      const isDesktop = window.innerWidth >= 1024;
+      
+      if (!isDesktop) {
+        // On smaller screens, ensure panels don't conflict
+        const activePanels = [showAIPanel, showContractPanel, showOutput].filter(Boolean).length;
+        if (activePanels > 1) {
+          // Close output panel if multiple panels are open on mobile
+          setShowOutput(false);
+        }
+        // Reset collapse state on mobile
+        setIsAIPanelCollapsed(false);
+        setIsContractPanelCollapsed(false);
+      }
+    };
+
+    window.addEventListener('resize', handleResize);
+    handleResize(); // Initial check
+
+    return () => window.removeEventListener('resize', handleResize);
+  }, [showAIPanel, showContractPanel, showOutput]);
+
+  const toggleAIPanel = () => {
+    setShowAIPanel(prev => {
+      const newValue = !prev;
+      // On mobile, close other panels when opening AI panel
+      if (newValue && window.innerWidth < 1024) {
+        setShowContractPanel(false);
+        setShowOutput(false);
+      }
+      return newValue;
+    });
+  };
+
+  const toggleContractPanel = () => {
+    setShowContractPanel(prev => {
+      const newValue = !prev;
+      // On mobile, close other panels when opening contract panel
+      if (newValue && window.innerWidth < 1024) {
+        setShowAIPanel(false);
+        setShowOutput(false);
+      }
+      return newValue;
+    });
+  };
+
+  const toggleOutput = () => {
+    setShowOutput(prev => {
+      const newValue = !prev;
+      // On mobile, close side panels when opening output
+      if (newValue && window.innerWidth < 1024) {
+        setShowAIPanel(false);
+        setShowContractPanel(false);
+      }
+      return newValue;
+    });
+  };
+
+  const toggleAIPanelCollapse = () => {
+    setIsAIPanelCollapsed(prev => !prev);
+  };
+
+  const toggleContractPanelCollapse = () => {
+    setIsContractPanelCollapsed(prev => !prev);
+  };
+
+  return {
+    showAIPanel,
+    showContractPanel,
+    showOutput,
+    isAIPanelCollapsed,
+    isContractPanelCollapsed,
+    setShowAIPanel,
+    setShowContractPanel,
+    setShowOutput,
+    setIsAIPanelCollapsed,
+    setIsContractPanelCollapsed,
+    toggleAIPanel,
+    toggleContractPanel,
+    toggleOutput,
+    toggleAIPanelCollapse,
+    toggleContractPanelCollapse,
+  };
+}