neural-loom 0.2.56 → 0.2.58

package/src/app/api/git/route.ts

@@ -96,6 +96,57 @@ export async function GET(request: Request) {
       }
     }
 
+    if (action === "branches") {
+      const { stdout } = await execPromise("git branch --format=\"%(refname:short)|%(HEAD)\"", { cwd: targetRoot });
+      const branches = stdout.split(/\r?\n/).filter(Boolean).map(line => {
+        const [name, active] = line.split("|");
+        return {
+          name: name.trim(),
+          isActive: active === "*"
+        };
+      });
+      return NextResponse.json({ success: true, branches });
+    }
+
+    if (action === "log") {
+      try {
+        const { stdout } = await execPromise("git log --graph --abbrev-commit --decorate --format=format:\"%h||%p||%s||%an||%ar\" --all -n 100", { cwd: targetRoot });
+        const lines = stdout.split(/\r?\n/);
+        const logItems = lines.map(line => {
+          const parts = line.split("||");
+          if (parts.length >= 5) {
+            const firstPart = parts[0];
+            const hashMatch = firstPart.match(/([0-9a-f]{7,40})$/);
+            const hash = hashMatch ? hashMatch[1] : "";
+            const graph = firstPart.substring(0, firstPart.length - hash.length);
+            
+            return {
+              isCommit: true,
+              graph,
+              hash,
+              parents: parts[1].trim().split(/\s+/).filter(Boolean),
+              subject: parts[2],
+              author: parts[3],
+              date: parts[4]
+            };
+          } else {
+            return {
+              isCommit: false,
+              graph: line,
+              hash: "",
+              parents: [],
+              subject: "",
+              author: "",
+              date: ""
+            };
+          }
+        });
+        return NextResponse.json({ success: true, log: logItems });
+      } catch (err) {
+        return NextResponse.json({ success: true, log: [] });
+      }
+    }
+
     return NextResponse.json({ error: "Invalid action" }, { status: 400 });
   } catch (error) {
     const errorMessage = error instanceof Error ? error.message : "Unknown error";
@@ -189,6 +240,34 @@ export async function POST(request: Request) {
       return NextResponse.json({ success: true, output: stdout + stderr });
     }
 
+    if (action === "checkout") {
+      const { branchName } = body;
+      if (!branchName) {
+        return NextResponse.json({ error: "Missing branchName parameter" }, { status: 400 });
+      }
+      const { stdout, stderr } = await execPromise(`git checkout ${JSON.stringify(branchName)}`, { cwd: targetRoot });
+      return NextResponse.json({ success: true, output: stdout + stderr });
+    }
+
+    if (action === "create_branch") {
+      const { branchName } = body;
+      if (!branchName) {
+        return NextResponse.json({ error: "Missing branchName parameter" }, { status: 400 });
+      }
+      const { stdout, stderr } = await execPromise(`git checkout -b ${JSON.stringify(branchName)}`, { cwd: targetRoot });
+      return NextResponse.json({ success: true, output: stdout + stderr });
+    }
+
+    if (action === "delete_branch") {
+      const { branchName, force } = body;
+      if (!branchName) {
+        return NextResponse.json({ error: "Missing branchName parameter" }, { status: 400 });
+      }
+      const flag = force ? "-D" : "-d";
+      const { stdout, stderr } = await execPromise(`git branch ${flag} ${JSON.stringify(branchName)}`, { cwd: targetRoot });
+      return NextResponse.json({ success: true, output: stdout + stderr });
+    }
+
     return NextResponse.json({ error: "Invalid action" }, { status: 400 });
   } catch (error) {
     const errorMessage = error instanceof Error ? error.message : "Unknown error";

package/src/app/components/IdeLayout.tsx

@@ -1,11 +1,85 @@
 "use client";
 
 import { useEffect, useState, useCallback } from "react";
+import dynamic from "next/dynamic";
 import TerminalConsole from "./TerminalConsole";
 import DirectoryBrowserModal from "./DirectoryBrowserModal";
 import MarkdownPreview from "./MarkdownPreview";
 import DbExplorer from "./DbExplorer";
 
+const MonacoEditor = dynamic(() => import("@monaco-editor/react"), { ssr: false });
+
+const getEditorLanguage = (filePath: string): string => {
+  if (!filePath) return "plaintext";
+  const ext = filePath.split(".").pop()?.toLowerCase();
+  switch (ext) {
+    case "ts":
+    case "tsx":
+      return "typescript";
+    case "js":
+    case "jsx":
+      return "javascript";
+    case "json":
+      return "json";
+    case "css":
+      return "css";
+    case "md":
+      return "markdown";
+    case "html":
+      return "html";
+    case "sql":
+      return "sql";
+    case "py":
+      return "python";
+    case "sh":
+    case "bash":
+      return "shell";
+    case "yaml":
+    case "yml":
+      return "yaml";
+    default:
+      return "plaintext";
+  }
+};
+
+const handleEditorWillMount = (monaco: any) => {
+  monaco.editor.defineTheme("neural-loom-dark", {
+    base: "vs-dark",
+    inherit: true,
+    rules: [
+      { token: "", foreground: "d4d4d4" },
+      { token: "comment", foreground: "6a9955" },
+      { token: "keyword", foreground: "c586c0" },
+      { token: "string", foreground: "ce9178" },
+      { token: "number", foreground: "b5cea8" },
+      { token: "regexp", foreground: "d16969" },
+      { token: "type", foreground: "4ec9b0" },
+      { token: "class", foreground: "4ec9b0" },
+      { token: "function", foreground: "dcdcaa" },
+    ],
+    colors: {
+      "editor.background": "#05070a",
+      "editor.foreground": "#d4d4d4",
+      "editorLineNumber.foreground": "#5a5a5a",
+      "editorLineNumber.activeForeground": "#c084fc",
+      "editor.lineHighlightBackground": "#0f131a",
+      "editor.selectionBackground": "#264f78",
+      "editorCursor.foreground": "#c084fc",
+    },
+  });
+};
+
+const editorOptions = {
+  minimap: { enabled: true },
+  fontSize: 13,
+  lineNumbers: "on" as const,
+  wordWrap: "on" as const,
+  automaticLayout: true,
+  scrollBeyondLastLine: false,
+  tabSize: 2,
+};
+
+
 const getModeIcon = (type: string) => {
   if (type === 'mock') return '🧪';
   if (type.includes('-docker')) return '🐳';
@@ -41,6 +115,16 @@ interface GitFile {
   worktreeStatus?: string;
 }
 
+interface GitLogItem {
+  isCommit: boolean;
+  graph: string;
+  hash: string;
+  parents: string[];
+  subject: string;
+  author: string;
+  date: string;
+}
+
 interface SessionStatus {
   type?: string;
   status?: string;
@@ -236,6 +320,12 @@ export default function IdeLayout({ sessionId, workspaceRoot, scopedDirs, onClos
   const [gitBranch, setGitBranch] = useState("");
   const [gitSync, setGitSync] = useState({ ahead: 0, behind: 0 });
   const [commitMessage, setCommitMessage] = useState("");
+  const [gitBranches, setGitBranches] = useState<{ name: string; isActive: boolean }[]>([]);
+  const [gitLog, setGitLog] = useState<GitLogItem[]>([]);
+  const [isBranchesExpanded, setIsBranchesExpanded] = useState(false);
+  const [isHistoryExpanded, setIsHistoryExpanded] = useState(false);
+  const [newBranchName, setNewBranchName] = useState("");
+  const [branchActionLoading, setBranchActionLoading] = useState(false);
 
   // Status & Telemetry
   const [sessionStatus, setSessionStatus] = useState<SessionStatus | null>(null);
@@ -266,6 +356,34 @@ export default function IdeLayout({ sessionId, workspaceRoot, scopedDirs, onClos
           setGitFiles(data.files || []);
           setGitBranch(data.branch || "");
           setGitSync({ ahead: data.ahead || 0, behind: data.behind || 0 });
+
+          if (data.isGit) {
+            // Fetch branches
+            try {
+              const branchesRes = await fetch(`/api/git?action=branches&root=${encodeURIComponent(workspaceRoot)}`);
+              if (branchesRes.ok) {
+                const branchesData = await branchesRes.json();
+                if (branchesData.success) {
+                  setGitBranches(branchesData.branches || []);
+                }
+              }
+            } catch (err) {
+              console.error("Failed to load git branches:", err);
+            }
+
+            // Fetch log
+            try {
+              const logRes = await fetch(`/api/git?action=log&root=${encodeURIComponent(workspaceRoot)}`);
+              if (logRes.ok) {
+                const logData = await logRes.json();
+                if (logData.success) {
+                  setGitLog(logData.log || []);
+                }
+              }
+            } catch (err) {
+              console.error("Failed to load git log:", err);
+            }
+          }
         }
       }
     } catch (e) {
@@ -436,6 +554,102 @@ export default function IdeLayout({ sessionId, workspaceRoot, scopedDirs, onClos
     }
   };
 
+  const handleGitCheckout = async (branchName: string) => {
+    setBranchActionLoading(true);
+    try {
+      const res = await fetch("/api/git", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          action: "checkout",
+          branchName,
+          rootPath: workspaceRoot,
+        }),
+      });
+      const data = await res.json();
+      if (res.ok && data.success) {
+        await loadGitStatus();
+      } else {
+        alert(data.error || `Failed to checkout branch ${branchName}`);
+      }
+    } catch (e) {
+      console.error(e);
+      alert("Failed to checkout branch due to a network error.");
+    } finally {
+      setBranchActionLoading(false);
+    }
+  };
+
+  const handleGitCreateBranch = async (e?: React.FormEvent) => {
+    if (e) e.preventDefault();
+    if (!newBranchName.trim()) return;
+    setBranchActionLoading(true);
+    try {
+      const res = await fetch("/api/git", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          action: "create_branch",
+          branchName: newBranchName.trim(),
+          rootPath: workspaceRoot,
+        }),
+      });
+      const data = await res.json();
+      if (res.ok && data.success) {
+        setNewBranchName("");
+        await loadGitStatus();
+      } else {
+        alert(data.error || `Failed to create branch ${newBranchName}`);
+      }
+    } catch (e) {
+      console.error(e);
+      alert("Failed to create branch due to a network error.");
+    } finally {
+      setBranchActionLoading(false);
+    }
+  };
+
+  const handleGitDeleteBranch = async (branchName: string, force = false) => {
+    if (branchName === gitBranch) {
+      alert("Cannot delete the currently active branch.");
+      return;
+    }
+    const message = force 
+      ? `Are you sure you want to FORCE delete the branch "${branchName}"? All unmerged changes will be lost.`
+      : `Are you sure you want to delete the branch "${branchName}"?`;
+    if (!confirm(message)) return;
+
+    setBranchActionLoading(true);
+    try {
+      const res = await fetch("/api/git", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          action: "delete_branch",
+          branchName,
+          force,
+          rootPath: workspaceRoot,
+        }),
+      });
+      const data = await res.json();
+      if (res.ok && data.success) {
+        await loadGitStatus();
+      } else {
+        // If it failed because it's not merged, offer force delete
+        if (!force && data.error && (data.error.includes("not fully merged") || data.error.includes("not merged"))) {
+          handleGitDeleteBranch(branchName, true);
+        } else {
+          alert(data.error || `Failed to delete branch ${branchName}`);
+        }
+      }
+    } catch (e) {
+      console.error(e);
+      alert("Failed to delete branch due to a network error.");
+    } finally {
+      setBranchActionLoading(false);
+    }
+  };
+
   const handleSelectGitFile = async (file: GitFile) => {
     try {
       const res = await fetch(`/api/git?action=diff&file=${encodeURIComponent(file.relativePath)}&root=${encodeURIComponent(workspaceRoot)}`);
@@ -1316,6 +1530,194 @@ export default function IdeLayout({ sessionId, workspaceRoot, scopedDirs, onClos
                         </div>
                       )}
                     </div>
+
+                    {/* Branches Section */}
+                    <div style={{ borderTop: "1px solid var(--border)", paddingTop: "0.75rem" }}>
+                      <div
+                        onClick={() => setIsBranchesExpanded(!isBranchesExpanded)}
+                        style={{
+                          display: "flex",
+                          justifyContent: "space-between",
+                          alignItems: "center",
+                          cursor: "pointer",
+                          marginBottom: "0.5rem",
+                          userSelect: "none"
+                        }}
+                      >
+                        <span style={{ fontSize: "0.7rem", fontWeight: 700, textTransform: "uppercase", color: "var(--muted)", display: "flex", alignItems: "center", gap: "0.25rem" }}>
+                          {isBranchesExpanded ? "▼" : "▶"} Branches ({gitBranches.length})
+                        </span>
+                      </div>
+                      
+                      {isBranchesExpanded && (
+                        <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+                          {/* Create Branch Input */}
+                          <form onSubmit={handleGitCreateBranch} style={{ display: "flex", gap: "0.25rem" }}>
+                            <input
+                              type="text"
+                              placeholder="New branch name..."
+                              value={newBranchName}
+                              onChange={(e) => setNewBranchName(e.target.value)}
+                              disabled={branchActionLoading}
+                              style={{
+                                flex: 1,
+                                backgroundColor: "#05070a",
+                                border: "1px solid var(--border)",
+                                borderRadius: "4px",
+                                padding: "0.25rem 0.5rem",
+                                color: "#ffffff",
+                                fontSize: "0.7rem",
+                                outline: "none"
+                              }}
+                            />
+                            <button
+                              type="submit"
+                              disabled={branchActionLoading || !newBranchName.trim()}
+                              style={{
+                                backgroundColor: "rgba(59, 130, 246, 0.15)",
+                                border: "1px solid #3b82f6",
+                                color: "#3b82f6",
+                                padding: "0.25rem 0.5rem",
+                                borderRadius: "4px",
+                                fontSize: "0.7rem",
+                                fontWeight: 600,
+                                cursor: "pointer",
+                                opacity: (!newBranchName.trim() || branchActionLoading) ? 0.5 : 1
+                              }}
+                            >
+                              + Create
+                            </button>
+                          </form>
+
+                          {/* Branch List */}
+                          <div style={{ display: "flex", flexDirection: "column", gap: "0.25rem", maxHeight: "150px", overflowY: "auto" }}>
+                            {gitBranches.map((br) => (
+                              <div
+                                key={br.name}
+                                style={{
+                                  display: "flex",
+                                  alignItems: "center",
+                                  justifyContent: "space-between",
+                                  padding: "0.35rem 0.5rem",
+                                  borderRadius: "4px",
+                                  backgroundColor: br.isActive ? "rgba(59, 130, 246, 0.08)" : "transparent",
+                                  border: br.isActive ? "1px solid rgba(59, 130, 246, 0.2)" : "1px solid transparent",
+                                  fontSize: "0.75rem",
+                                  transition: "all 0.15s ease",
+                                }}
+                              >
+                                <div style={{ display: "flex", alignItems: "center", gap: "0.35rem", fontWeight: br.isActive ? 700 : 500, color: br.isActive ? "var(--primary)" : "#cbd5e1", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: 1 }}>
+                                  <span style={{ fontSize: "0.7rem" }}>{br.isActive ? "●" : "○"}</span>
+                                  <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }} title={br.name}>{br.name}</span>
+                                </div>
+                                <div style={{ display: "flex", gap: "0.25rem" }}>
+                                  {!br.isActive && (
+                                    <>
+                                      <button
+                                        type="button"
+                                        onClick={() => handleGitCheckout(br.name)}
+                                        disabled={branchActionLoading}
+                                        title={`Switch to ${br.name}`}
+                                        style={{
+                                          background: "none",
+                                          border: "none",
+                                          cursor: "pointer",
+                                          fontSize: "0.7rem",
+                                          padding: "2px 4px",
+                                          color: "var(--muted)"
+                                        }}
+                                      >
+                                        ➔
+                                      </button>
+                                      <button
+                                        type="button"
+                                        onClick={() => handleGitDeleteBranch(br.name)}
+                                        disabled={branchActionLoading}
+                                        title={`Delete ${br.name}`}
+                                        style={{
+                                          background: "none",
+                                          border: "none",
+                                          cursor: "pointer",
+                                          fontSize: "0.7rem",
+                                          padding: "2px 4px",
+                                          color: "var(--muted)"
+                                        }}
+                                      >
+                                        ✖
+                                      </button>
+                                    </>
+                                  )}
+                                </div>
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+
+                    {/* Commit History Section */}
+                    <div style={{ borderTop: "1px solid var(--border)", paddingTop: "0.75rem" }}>
+                      <div
+                        onClick={() => setIsHistoryExpanded(!isHistoryExpanded)}
+                        style={{
+                          display: "flex",
+                          justifyContent: "space-between",
+                          alignItems: "center",
+                          cursor: "pointer",
+                          marginBottom: "0.5rem",
+                          userSelect: "none"
+                        }}
+                      >
+                        <span style={{ fontSize: "0.7rem", fontWeight: 700, textTransform: "uppercase", color: "var(--muted)", display: "flex", alignItems: "center", gap: "0.25rem" }}>
+                          {isHistoryExpanded ? "▼" : "▶"} Commit History
+                        </span>
+                      </div>
+                      
+                      {isHistoryExpanded && (
+                        <div style={{
+                          backgroundColor: "#05070a",
+                          border: "1px solid var(--border)",
+                          borderRadius: "6px",
+                          padding: "0.5rem",
+                          maxHeight: "220px",
+                          overflowY: "auto",
+                          overflowX: "auto"
+                        }}>
+                          {gitLog.length === 0 ? (
+                            <div style={{ color: "var(--muted)", fontStyle: "italic", fontSize: "0.7rem", textAlign: "center", padding: "0.5rem" }}>
+                              No commit history found.
+                            </div>
+                          ) : (
+                            <div style={{ fontFamily: "var(--font-mono)", fontSize: "0.65rem", lineHeight: "1.4", whiteSpace: "pre" }}>
+                              {gitLog.map((item, idx) => (
+                                <div
+                                  key={idx}
+                                  style={{
+                                    display: "flex",
+                                    padding: "2px 0",
+                                    borderBottom: "1px solid rgba(255,255,255,0.01)",
+                                    alignItems: "center"
+                                  }}
+                                >
+                                  <span style={{ color: "#3b82f6", flexShrink: 0, fontWeight: 700 }}>{item.graph}</span>
+                                  {item.isCommit && (
+                                    <>
+                                      <span style={{ color: "#eab308", marginRight: "6px", flexShrink: 0 }} title="Commit Hash">{item.hash}</span>
+                                      <span style={{ flex: 1, textOverflow: "ellipsis", overflow: "hidden", whiteSpace: "nowrap", color: "#cbd5e1" }} title={item.subject}>
+                                        {item.subject}
+                                      </span>
+                                      <span style={{ color: "var(--muted)", fontSize: "0.55rem", marginLeft: "6px", flexShrink: 0 }} title={`${item.author} (${item.date})`}>
+                                        {item.date}
+                                      </span>
+                                    </>
+                                  )}
+                                </div>
+                              ))}
+                            </div>
+                          )}
+                        </div>
+                      )}
+                    </div>
                   </div>
                 ) : (
                   <div style={{ padding: "1rem", color: "var(--muted)", fontSize: "0.75rem", fontStyle: "italic" }}>
@@ -1826,11 +2228,15 @@ export default function IdeLayout({ sessionId, workspaceRoot, scopedDirs, onClos
                 ) : currentMode === 'split' ? (
                   <div style={{ display: "flex", width: "100%", height: "100%", overflow: "hidden" }}>
                     <div style={{ flex: 1, height: "100%" }}>
-                      <textarea
+                      <MonacoEditor
+                        height="100%"
+                        language="markdown"
+                        theme="neural-loom-dark"
                         value={activeFile.content}
-                        onChange={(e) => handleContentChange(e.target.value)}
-                        style={textareaStyle}
-                        spellCheck={false}
+                        onChange={(value) => handleContentChange(value || "")}
+                        beforeMount={handleEditorWillMount}
+                        options={editorOptions}
+                        loading={<div style={{ padding: "1rem", color: "var(--muted)" }}>Loading Editor...</div>}
                       />
                     </div>
                     <div style={{ flex: 1, height: "100%", overflow: "hidden" }}>
@@ -1838,19 +2244,27 @@ export default function IdeLayout({ sessionId, workspaceRoot, scopedDirs, onClos
                     </div>
                   </div>
                 ) : (
-                  <textarea
+                  <MonacoEditor
+                    height="100%"
+                    language="markdown"
+                    theme="neural-loom-dark"
                     value={activeFile.content}
-                    onChange={(e) => handleContentChange(e.target.value)}
-                    style={textareaStyle}
-                    spellCheck={false}
+                    onChange={(value) => handleContentChange(value || "")}
+                    beforeMount={handleEditorWillMount}
+                    options={editorOptions}
+                    loading={<div style={{ padding: "1rem", color: "var(--muted)" }}>Loading Editor...</div>}
                   />
                 )
               ) : (
-                <textarea
+                <MonacoEditor
+                  height="100%"
+                  language={getEditorLanguage(activeFile.path)}
+                  theme="neural-loom-dark"
                   value={activeFile.content}
-                  onChange={(e) => handleContentChange(e.target.value)}
-                  style={textareaStyle}
-                  spellCheck={false}
+                  onChange={(value) => handleContentChange(value || "")}
+                  beforeMount={handleEditorWillMount}
+                  options={editorOptions}
+                  loading={<div style={{ padding: "1rem", color: "var(--muted)" }}>Loading Editor...</div>}
                 />
               )
             ) : (