neural-loom 0.2.18 → 0.2.40

package/src/app/components/IdeLayout.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useState, useCallback } from "react";
 import TerminalConsole from "./TerminalConsole";
 import DirectoryBrowserModal from "./DirectoryBrowserModal";
+import MarkdownPreview from "./MarkdownPreview";
 
 interface FileNode {
   name: string;
@@ -28,6 +29,8 @@ interface GitFile {
   relativePath: string;
   absolutePath: string;
   name: string;
+  indexStatus?: string;
+  worktreeStatus?: string;
 }
 
 interface SessionStatus {
@@ -151,14 +154,78 @@ export default function IdeLayout({ sessionId, workspaceRoot, scopedDirs, onClos
     setSessionActiveFiles(prev => ({ ...prev, [sessionId]: path }));
   }, [sessionId]);
 
+  const [editorMode, setEditorMode] = useState<'edit' | 'split' | 'preview'>('edit');
   const [explorerVisible, setExplorerVisible] = useState(true);
   const [activeTab, setActiveTab] = useState<"explorer" | "git" | "analytics" | "auditor">("explorer");
   const [isRefreshing, setIsRefreshing] = useState(false);
 
+  // Layout sizing states
+  const [sidebarWidth, setSidebarWidth] = useState(300);
+  const [isResizingSidebar, setIsResizingSidebar] = useState(false);
+  const [terminalHeight, setTerminalHeight] = useState(380);
+  const [isResizingTerminal, setIsResizingTerminal] = useState(false);
+
+  const startResizingSidebar = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    setIsResizingSidebar(true);
+  }, []);
+
+  const startResizingTerminal = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    setIsResizingTerminal(true);
+  }, []);
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (isResizingSidebar) {
+        const container = document.getElementById("loom-ide-container");
+        if (container) {
+          const rect = container.getBoundingClientRect();
+          const newWidth = e.clientX - rect.left - 50; // 50px is the activity bar width
+          if (newWidth > 150 && newWidth < 600) {
+            setSidebarWidth(newWidth);
+          }
+        }
+      }
+      if (isResizingTerminal) {
+        const container = document.getElementById("loom-ide-container");
+        if (container) {
+          const rect = container.getBoundingClientRect();
+          const newHeight = rect.bottom - e.clientY;
+          if (newHeight > 100 && newHeight < rect.height - 150) {
+            setTerminalHeight(newHeight);
+          }
+        }
+      }
+    };
+
+    const handleMouseUp = () => {
+      setIsResizingSidebar(false);
+      setIsResizingTerminal(false);
+    };
+
+    if (isResizingSidebar || isResizingTerminal) {
+      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = isResizingSidebar ? "col-resize" : "row-resize";
+      document.body.style.userSelect = "none";
+    }
+
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+  }, [isResizingSidebar, isResizingTerminal]);
+
   // Git Diff Panel state
   const [gitFiles, setGitFiles] = useState<GitFile[]>([]);
   const [isGitRepo, setIsGitRepo] = useState(false);
   const [gitLoading, setGitLoading] = useState(false);
+  const [gitBranch, setGitBranch] = useState("");
+  const [gitSync, setGitSync] = useState({ ahead: 0, behind: 0 });
+  const [commitMessage, setCommitMessage] = useState("");
 
   // Status & Telemetry
   const [sessionStatus, setSessionStatus] = useState<SessionStatus | null>(null);
@@ -187,6 +254,8 @@ export default function IdeLayout({ sessionId, workspaceRoot, scopedDirs, onClos
         if (data.success) {
           setIsGitRepo(data.isGit);
           setGitFiles(data.files || []);
+          setGitBranch(data.branch || "");
+          setGitSync({ ahead: data.ahead || 0, behind: data.behind || 0 });
         }
       }
     } catch (e) {
@@ -204,6 +273,185 @@ export default function IdeLayout({ sessionId, workspaceRoot, scopedDirs, onClos
     return () => clearInterval(id);
   }, [loadGitStatus]);
 
+  const handleGitStage = async (file: string) => {
+    try {
+      const res = await fetch("/api/git", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "stage", file, rootPath: workspaceRoot })
+      });
+      if (res.ok) {
+        await loadGitStatus();
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const handleGitIgnore = async (file: string) => {
+    try {
+      const res = await fetch("/api/git", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "ignore", file, rootPath: workspaceRoot })
+      });
+      if (res.ok) {
+        await loadGitStatus();
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const handleGitDiscard = async (file: string) => {
+    if (!confirm(`Are you sure you want to discard changes in "${file}"? This action cannot be undone.`)) {
+      return;
+    }
+    try {
+      const res = await fetch("/api/git", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "discard", file, rootPath: workspaceRoot })
+      });
+      if (res.ok) {
+        await loadGitStatus();
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const handleGitStageAll = async () => {
+    try {
+      const res = await fetch("/api/git", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "stage", rootPath: workspaceRoot })
+      });
+      if (res.ok) {
+        await loadGitStatus();
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const handleGitUnstage = async (file: string) => {
+    try {
+      const res = await fetch("/api/git", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "unstage", file, rootPath: workspaceRoot })
+      });
+      if (res.ok) {
+        await loadGitStatus();
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const handleGitUnstageAll = async () => {
+    try {
+      const res = await fetch("/api/git", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "unstage", rootPath: workspaceRoot })
+      });
+      if (res.ok) {
+        await loadGitStatus();
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const handleGitCommit = async () => {
+    if (!commitMessage.trim()) return;
+    try {
+      const res = await fetch("/api/git", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "commit", message: commitMessage, rootPath: workspaceRoot })
+      });
+      if (res.ok) {
+        setCommitMessage("");
+        await loadGitStatus();
+      } else {
+        const data = await res.json();
+        alert(data.error || "Git commit failed");
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const handleGitPull = async () => {
+    try {
+      const res = await fetch("/api/git", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "pull", rootPath: workspaceRoot })
+      });
+      if (res.ok) {
+        const data = await res.json();
+        alert(data.output || "Git pull completed successfully.");
+        await loadGitStatus();
+      } else {
+        const data = await res.json();
+        alert(data.error || "Git pull failed");
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const handleGitPush = async () => {
+    try {
+      const res = await fetch("/api/git", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "push", rootPath: workspaceRoot })
+      });
+      if (res.ok) {
+        const data = await res.json();
+        alert(data.output || "Git push completed successfully.");
+        await loadGitStatus();
+      } else {
+        const data = await res.json();
+        alert(data.error || "Git push failed");
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const handleSelectGitFile = async (file: GitFile) => {
+    try {
+      const res = await fetch(`/api/git?action=diff&file=${encodeURIComponent(file.relativePath)}&root=${encodeURIComponent(workspaceRoot)}`);
+      if (res.ok) {
+        const data = await res.json();
+        if (data.success) {
+          const diffPath = `diff:${file.relativePath}`;
+          if (!openFiles.some(f => f.path === diffPath)) {
+            setOpenFiles(prev => [
+              ...prev,
+              {
+                name: `Diff: ${file.name}`,
+                path: diffPath,
+                content: data.diff,
+                isModified: false
+              }
+            ]);
+          }
+          setActiveFilePath(diffPath);
+        }
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
   // Poll Session Status (logs, tokens, type)
   useEffect(() => {
     const fetchStatus = async () => {
@@ -335,9 +583,11 @@ export default function IdeLayout({ sessionId, workspaceRoot, scopedDirs, onClos
   }, [workspaceRoot, scopedDirsStr]);
 
   useEffect(() => {
-    setTimeout(() => {
+    loadFiles();
+    const interval = setInterval(() => {
       loadFiles();
-    }, 0);
+    }, 3000);
+    return () => clearInterval(interval);
   }, [loadFiles]);
 
   // Trigger creation dialog
@@ -557,6 +807,11 @@ export default function IdeLayout({ sessionId, workspaceRoot, scopedDirs, onClos
   };
 
   const activeFile = openFiles.find((f) => f.path === activeFilePath);
+  const isMarkdown = activeFile ? activeFile.path.toLowerCase().endsWith(".md") : false;
+  const currentMode = isMarkdown ? editorMode : "edit";
+
+  const stagedFiles = gitFiles.filter(f => f.indexStatus && f.indexStatus !== " " && f.indexStatus !== "?");
+  const unstagedFiles = gitFiles.filter(f => (f.worktreeStatus && f.worktreeStatus !== " ") || f.status === "??");
 
   const handleContentChange = (newVal: string) => {
     if (!activeFilePath) return;
@@ -630,7 +885,7 @@ export default function IdeLayout({ sessionId, workspaceRoot, scopedDirs, onClos
   };
 
   return (
-    <div style={ideContainerStyle}>
+    <div id="loom-ide-container" style={ideContainerStyle}>
       {/* Activity Bar (Sidebar leftmost panel icons) */}
       <div style={activityBarStyle}>
         <div style={topIconsStyle}>
@@ -726,7 +981,8 @@ export default function IdeLayout({ sessionId, workspaceRoot, scopedDirs, onClos
 
       {/* Primary Sidebar (File Tree Panel) */}
       {explorerVisible && (
-        <div style={sidebarPanelStyle}>
+        <>
+          <div style={{ ...sidebarPanelStyle, width: `${sidebarWidth}px`, borderRight: "none" }}>
           <div style={sidebarHeaderStyle}>
             <span style={{ fontWeight: 700, fontSize: "0.75rem", textTransform: "uppercase", letterSpacing: "0.05em" }}>
               {activeTab === "explorer" && "Workspace Explorer"}
@@ -855,76 +1111,144 @@ export default function IdeLayout({ sessionId, workspaceRoot, scopedDirs, onClos
             )}
 
             {activeTab === "git" && (
-              <div style={{ padding: "0.5rem 1rem" }}>
-                <div style={{ fontSize: "0.75rem", fontWeight: 700, textTransform: "uppercase", color: "var(--muted)", marginBottom: "0.5rem" }}>
-                  Changes
-                </div>
-                {!isGitRepo ? (
-                  <div style={{ color: "var(--muted)", fontSize: "0.75rem", fontStyle: "italic" }}>
-                    Not a git repository.
-                  </div>
-                ) : gitFiles.length === 0 ? (
-                  <div style={{ color: "var(--success)", fontSize: "0.75rem", padding: "0.5rem 0" }}>
-                    ✔ Workspace clean.
+              <div style={{ display: "flex", flexDirection: "column", height: "100%", overflow: "hidden" }}>
+                {/* Branch and Sync header */}
+                <div style={{ padding: "0.5rem 1rem", borderBottom: "1px solid var(--border)", display: "flex", alignItems: "center", justifyContent: "space-between", backgroundColor: "rgba(255,255,255,0.01)", flexShrink: 0 }}>
+                  <div style={{ display: "flex", alignItems: "center", gap: "0.4rem", fontSize: "0.75rem", fontWeight: 600, overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis", flex: 1 }}>
+                    <span style={{ color: "var(--primary)", flexShrink: 0 }}>🌿</span>
+                    <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }} title={gitBranch}>
+                      {isGitRepo ? (gitBranch || "HEAD detached") : "No Repository"}
+                    </span>
                   </div>
-                ) : (
-                  <div style={{ display: "flex", flexDirection: "column", gap: "0.25rem" }}>
-                    {gitFiles.map((file) => {
-                      let badgeColor = "#eab308";
-                      if (file.status === "??") badgeColor = "#10b981";
-                      if (file.status === "A") badgeColor = "#10b981";
-                      if (file.status === "D") badgeColor = "#ef4444";
-                      return (
-                        <div
-                          key={file.relativePath}
-                          onClick={async () => {
-                            try {
-                              const res = await fetch(`/api/git?action=diff&file=${encodeURIComponent(file.relativePath)}&root=${encodeURIComponent(workspaceRoot)}`);
-                              if (res.ok) {
-                                const data = await res.json();
-                                if (data.success) {
-                                  const diffPath = `diff:${file.relativePath}`;
-                                  if (!openFiles.some(f => f.path === diffPath)) {
-                                    setOpenFiles(prev => [
-                                      ...prev,
-                                      {
-                                        name: `Diff: ${file.name}`,
-                                        path: diffPath,
-                                        content: data.diff,
-                                        isModified: false
-                                      }
-                                    ]);
-                                  }
-                                  setActiveFilePath(diffPath);
-                                }
-                              }
-                            } catch (e) {
-                              console.error(e);
-                            }
-                          }}
-                          style={{
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "space-between",
-                            padding: "0.35rem 0.5rem",
-                            borderRadius: "4px",
-                            backgroundColor: "rgba(255,255,255,0.02)",
-                            cursor: "pointer",
-                            fontSize: "0.75rem",
-                            fontFamily: "var(--font-mono)",
-                          }}
-                          onMouseEnter={(e) => e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.06)"}
-                          onMouseLeave={(e) => e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.02)"}
-                        >
-                          <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: 1 }} title={file.relativePath}>
-                            {file.name}
-                          </span>
-                          <span style={{ fontSize: "0.6rem", padding: "0.1rem 0.3rem", borderRadius: "3px", backgroundColor: badgeColor + "22", color: badgeColor, fontWeight: 700 }}>
-                            {file.status}
+                  {isGitRepo && (
+                    <div style={{ display: "flex", alignItems: "center", gap: "0.35rem", flexShrink: 0 }}>
+                      {gitSync.ahead > 0 && <span style={{ fontSize: "0.65rem", color: "#10b981", fontWeight: 700 }} title="Commits ahead of remote">↑{gitSync.ahead}</span>}
+                      {gitSync.behind > 0 && <span style={{ fontSize: "0.65rem", color: "#ef4444", fontWeight: 700 }} title="Commits behind remote">↓{gitSync.behind}</span>}
+                      <button
+                        onClick={handleGitPull}
+                        title="Pull changes"
+                        style={gitIconButtonStyle}
+                        onMouseEnter={(e) => e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.08)"}
+                        onMouseLeave={(e) => e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.02)"}
+                      >
+                        📥
+                      </button>
+                      <button
+                        onClick={handleGitPush}
+                        title="Push commits"
+                        style={gitIconButtonStyle}
+                        onMouseEnter={(e) => e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.08)"}
+                        onMouseLeave={(e) => e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.02)"}
+                      >
+                        📤
+                      </button>
+                    </div>
+                  )}
+                </div>
+
+                {isGitRepo ? (
+                  <div style={{ flex: 1, overflowY: "auto", padding: "0.5rem 1rem", display: "flex", flexDirection: "column", gap: "1rem" }}>
+                    
+                    {/* Commit Box */}
+                    <div style={{ display: "flex", flexDirection: "column", gap: "0.4rem" }}>
+                      <textarea
+                        value={commitMessage}
+                        onChange={(e) => setCommitMessage(e.target.value)}
+                        placeholder="Commit message (Ctrl+Enter to commit)..."
+                        style={commitTextareaStyle}
+                        onKeyDown={(e) => {
+                          if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+                            e.preventDefault();
+                            handleGitCommit();
+                          }
+                        }}
+                      />
+                      <button
+                        onClick={handleGitCommit}
+                        disabled={gitFiles.length === 0}
+                        style={{
+                          ...commitButtonStyle,
+                          opacity: gitFiles.length > 0 ? 1 : 0.5,
+                          cursor: gitFiles.length > 0 ? "pointer" : "not-allowed"
+                        }}
+                      >
+                        ✓ Commit
+                      </button>
+                    </div>
+
+                    {/* Staged Changes Section */}
+                    {stagedFiles.length > 0 && (
+                      <div>
+                        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "0.35rem" }}>
+                          <span style={{ fontSize: "0.7rem", fontWeight: 700, textTransform: "uppercase", color: "var(--muted)" }}>
+                            Staged Changes ({stagedFiles.length})
                           </span>
+                          <button
+                            onClick={() => handleGitUnstageAll()}
+                            title="Unstage All"
+                            style={actionHeaderBtnStyle}
+                          >
+                            ➖
+                          </button>
                         </div>
-                      );
-                    })}
+                        <div style={{ display: "flex", flexDirection: "column", gap: "0.25rem" }}>
+                          {stagedFiles.map((file) => (
+                            <GitFileRow
+                              key={file.relativePath}
+                              file={file}
+                              isStaged={true}
+                              onAction={handleGitUnstage}
+                              onSelect={handleSelectGitFile}
+                            />
+                          ))}
+                        </div>
+                      </div>
+                    )}
+
+                    {/* Changes (Unstaged) Section */}
+                    <div>
+                      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "0.35rem" }}>
+                        <span style={{ fontSize: "0.7rem", fontWeight: 700, textTransform: "uppercase", color: "var(--muted)" }}>
+                          Changes ({unstagedFiles.length})
+                        </span>
+                        {unstagedFiles.length > 0 && (
+                          <button
+                            onClick={() => handleGitStageAll()}
+                            title="Stage All"
+                            style={actionHeaderBtnStyle}
+                          >
+                            ➕
+                          </button>
+                        )}
+                      </div>
+                      {unstagedFiles.length === 0 && stagedFiles.length === 0 ? (
+                        <div style={{ color: "var(--success)", fontSize: "0.75rem", padding: "0.5rem 0" }}>
+                          ✔ Workspace clean.
+                        </div>
+                      ) : unstagedFiles.length === 0 ? (
+                        <div style={{ color: "var(--muted)", fontSize: "0.7rem", fontStyle: "italic", padding: "0.25rem 0" }}>
+                          No unstaged changes.
+                        </div>
+                      ) : (
+                        <div style={{ display: "flex", flexDirection: "column", gap: "0.25rem" }}>
+                          {unstagedFiles.map((file) => (
+                            <GitFileRow
+                              key={file.relativePath}
+                              file={file}
+                              isStaged={false}
+                              onAction={handleGitStage}
+                              onSelect={handleSelectGitFile}
+                              onIgnore={handleGitIgnore}
+                              onDiscard={handleGitDiscard}
+                            />
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                ) : (
+                  <div style={{ padding: "1rem", color: "var(--muted)", fontSize: "0.75rem", fontStyle: "italic" }}>
+                    Not a git repository.
                   </div>
                 )}
               </div>
@@ -1129,7 +1453,26 @@ export default function IdeLayout({ sessionId, workspaceRoot, scopedDirs, onClos
             )}
           </div>
         </div>
-      )}
+        <div
+          onMouseDown={startResizingSidebar}
+          style={{
+            width: "4px",
+            cursor: "col-resize",
+            backgroundColor: isResizingSidebar ? "var(--primary)" : "var(--border)",
+            transition: "background-color 0.15s ease",
+            zIndex: 10,
+            alignSelf: "stretch",
+          }}
+          onMouseEnter={(e) => {
+            if (!isResizingSidebar) e.currentTarget.style.backgroundColor = "var(--border-focus)";
+          }}
+          onMouseLeave={(e) => {
+            if (!isResizingSidebar) e.currentTarget.style.backgroundColor = "var(--border)";
+          }}
+          title="Drag to resize sidebar"
+        />
+      </>
+    )}
 
       {/* Editor & Console Split View */}
       <div style={mainContentAreaStyle}>
@@ -1178,7 +1521,7 @@ export default function IdeLayout({ sessionId, workspaceRoot, scopedDirs, onClos
         </div>
 
         {/* Editor Panel (top half) */}
-        <div style={editorPanelStyle}>
+        <div style={{ ...editorPanelStyle, borderBottom: "none" }}>
           {/* Tabs header */}
           <div style={tabHeaderStyle}>
             <div style={tabsWrapperStyle}>
@@ -1210,17 +1553,59 @@ export default function IdeLayout({ sessionId, workspaceRoot, scopedDirs, onClos
             </div>
 
             {activeFile && !activeFile.path.startsWith("diff:") && (
-              <button
-                onClick={handleSaveFile}
-                disabled={!activeFile.isModified}
-                style={{
-                  ...saveButtonStyle,
-                  opacity: activeFile.isModified ? 1 : 0.5,
-                  cursor: activeFile.isModified ? "pointer" : "not-allowed",
-                }}
-              >
-                💾 Save (Ctrl+S)
-              </button>
+              <div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
+                {isMarkdown && (
+                  <div style={modeToggleContainerStyle}>
+                    <button
+                      onClick={() => setEditorMode('edit')}
+                      style={{
+                        ...modeToggleItemStyle,
+                        backgroundColor: currentMode === 'edit' ? 'rgba(255,255,255,0.08)' : 'transparent',
+                        color: currentMode === 'edit' ? 'var(--foreground)' : 'var(--muted)',
+                        borderColor: currentMode === 'edit' ? 'var(--border-focus)' : 'transparent',
+                      }}
+                      title="Edit file"
+                    >
+                      ✏️ Edit
+                    </button>
+                    <button
+                      onClick={() => setEditorMode('split')}
+                      style={{
+                        ...modeToggleItemStyle,
+                        backgroundColor: currentMode === 'split' ? 'rgba(255,255,255,0.08)' : 'transparent',
+                        color: currentMode === 'split' ? 'var(--foreground)' : 'var(--muted)',
+                        borderColor: currentMode === 'split' ? 'var(--border-focus)' : 'transparent',
+                      }}
+                      title="Split editor & preview"
+                    >
+                      🥞 Split
+                    </button>
+                    <button
+                      onClick={() => setEditorMode('preview')}
+                      style={{
+                        ...modeToggleItemStyle,
+                        backgroundColor: currentMode === 'preview' ? 'rgba(255,255,255,0.08)' : 'transparent',
+                        color: currentMode === 'preview' ? 'var(--foreground)' : 'var(--muted)',
+                        borderColor: currentMode === 'preview' ? 'var(--border-focus)' : 'transparent',
+                      }}
+                      title="Preview rendered document"
+                    >
+                      👁️ Preview
+                    </button>
+                  </div>
+                )}
+                <button
+                  onClick={handleSaveFile}
+                  disabled={!activeFile.isModified}
+                  style={{
+                    ...saveButtonStyle,
+                    opacity: activeFile.isModified ? 1 : 0.5,
+                    cursor: activeFile.isModified ? "pointer" : "not-allowed",
+                  }}
+                >
+                  💾 Save (Ctrl+S)
+                </button>
+              </div>
             )}
           </div>
 
@@ -1249,6 +1634,33 @@ export default function IdeLayout({ sessionId, workspaceRoot, scopedDirs, onClos
                     );
                   })}
                 </div>
+              ) : isMarkdown ? (
+                currentMode === 'preview' ? (
+                  <div style={{ height: "100%", overflow: "hidden" }}>
+                    <MarkdownPreview content={activeFile.content} />
+                  </div>
+                ) : currentMode === 'split' ? (
+                  <div style={{ display: "flex", width: "100%", height: "100%", overflow: "hidden" }}>
+                    <div style={{ flex: 1, height: "100%" }}>
+                      <textarea
+                        value={activeFile.content}
+                        onChange={(e) => handleContentChange(e.target.value)}
+                        style={textareaStyle}
+                        spellCheck={false}
+                      />
+                    </div>
+                    <div style={{ flex: 1, height: "100%", overflow: "hidden" }}>
+                      <MarkdownPreview content={activeFile.content} />
+                    </div>
+                  </div>
+                ) : (
+                  <textarea
+                    value={activeFile.content}
+                    onChange={(e) => handleContentChange(e.target.value)}
+                    style={textareaStyle}
+                    spellCheck={false}
+                  />
+                )
               ) : (
                 <textarea
                   value={activeFile.content}
@@ -1272,8 +1684,28 @@ export default function IdeLayout({ sessionId, workspaceRoot, scopedDirs, onClos
           </div>
         </div>
 
+        {/* Vertical divider */}
+        <div
+          onMouseDown={startResizingTerminal}
+          style={{
+            height: "4px",
+            cursor: "row-resize",
+            backgroundColor: isResizingTerminal ? "var(--primary)" : "var(--border)",
+            transition: "background-color 0.15s ease",
+            zIndex: 10,
+            width: "100%",
+          }}
+          onMouseEnter={(e) => {
+            if (!isResizingTerminal) e.currentTarget.style.backgroundColor = "var(--border-focus)";
+          }}
+          onMouseLeave={(e) => {
+            if (!isResizingTerminal) e.currentTarget.style.backgroundColor = "var(--border)";
+          }}
+          title="Drag to resize console"
+        />
+
         {/* Console / PTY Bridge Panel (bottom half) */}
-        <div style={terminalPanelStyle}>
+        <div style={{ ...terminalPanelStyle, flex: "none", height: `${terminalHeight}px` }}>
           {/* Dashboard control headers injected above xterm */}
           <div style={terminalHeaderStyle}>
             <span style={{ display: "flex", alignItems: "center", gap: "0.5rem", fontWeight: 600, fontSize: "0.8rem" }}>
@@ -1410,7 +1842,7 @@ export default function IdeLayout({ sessionId, workspaceRoot, scopedDirs, onClos
             </div>
           </div>
 
-          <div style={{ ...terminalConsoleWrapperStyle, display: "flex", width: "100%", height: "100%" }}>
+          <div style={{ ...terminalConsoleWrapperStyle, display: "flex", width: "100%" }}>
             <div style={{ flex: 1, height: "100%", borderRight: splitSessionId ? "1px solid var(--border)" : "none", overflow: "hidden" }}>
               <TerminalConsole sessionId={sessionId} height="100%" wsPort={wsPort} />
             </div>
@@ -1617,7 +2049,7 @@ const sidebarIconStyle: React.CSSProperties = {
 };
 
 const sidebarPanelStyle: React.CSSProperties = {
-  width: "260px",
+  width: "300px",
   backgroundColor: "#080c14",
   borderRight: "1px solid var(--border)",
   display: "flex",
@@ -2209,3 +2641,199 @@ const sessionTabItemStyle: React.CSSProperties = {
   cursor: "pointer",
   transition: "all 0.15s ease",
 };
+
+const modeToggleContainerStyle: React.CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  backgroundColor: "rgba(0, 0, 0, 0.3)",
+  border: "1px solid var(--border)",
+  borderRadius: "6px",
+  padding: "2px",
+  marginRight: "0.5rem",
+};
+
+const modeToggleItemStyle: React.CSSProperties = {
+  padding: "0.2rem 0.5rem",
+  borderRadius: "4px",
+  border: "1px solid transparent",
+  fontSize: "0.65rem",
+  fontWeight: 600,
+  cursor: "pointer",
+  transition: "all 0.15s ease",
+  display: "flex",
+  alignItems: "center",
+  gap: "3px",
+};
+
+interface GitFileRowProps {
+  file: GitFile;
+  isStaged: boolean;
+  onAction: (file: string) => void;
+  onSelect: (file: GitFile) => void;
+  onIgnore?: (file: string) => void;
+  onDiscard?: (file: string) => void;
+}
+
+function GitFileRow({ file, isStaged, onAction, onSelect, onIgnore, onDiscard }: GitFileRowProps) {
+  const [hovered, setHovered] = useState(false);
+  let badgeColor = "#eab308";
+  const displayStatus = isStaged ? (file.indexStatus || "M") : (file.worktreeStatus || "M");
+  
+  if (displayStatus === "??" || displayStatus === "?") badgeColor = "#10b981";
+  if (displayStatus === "A") badgeColor = "#10b981";
+  if (displayStatus === "D") badgeColor = "#ef4444";
+
+  return (
+    <div
+      onClick={() => onSelect(file)}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: "0.35rem 0.5rem",
+        borderRadius: "4px",
+        backgroundColor: "rgba(255,255,255,0.02)",
+        cursor: "pointer",
+        fontSize: "0.75rem",
+        fontFamily: "var(--font-mono)",
+        position: "relative"
+      }}
+    >
+      <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: 1, marginRight: "0.5rem" }} title={file.relativePath}>
+        {file.name}
+      </span>
+      
+      <div style={{ display: "flex", alignItems: "center", gap: "0.35rem" }}>
+        {hovered && (
+          <div style={{ display: "flex", gap: "0.25rem" }}>
+            {!isStaged && onIgnore && (
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onIgnore(file.relativePath);
+                }}
+                title="Add to .gitignore"
+                style={{
+                  background: "none",
+                  border: "none",
+                  cursor: "pointer",
+                  fontSize: "0.65rem",
+                  color: "var(--muted)",
+                  padding: "1px 4px",
+                  borderRadius: "3px",
+                  backgroundColor: "rgba(255,255,255,0.05)"
+                }}
+                onMouseEnter={(e) => e.currentTarget.style.color = "var(--danger)"}
+                onMouseLeave={(e) => e.currentTarget.style.color = "var(--muted)"}
+              >
+                🚫
+              </button>
+            )}
+            {!isStaged && onDiscard && (
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onDiscard(file.relativePath);
+                }}
+                title="Discard changes"
+                style={{
+                  background: "none",
+                  border: "none",
+                  cursor: "pointer",
+                  fontSize: "0.65rem",
+                  color: "var(--muted)",
+                  padding: "1px 4px",
+                  borderRadius: "3px",
+                  backgroundColor: "rgba(255,255,255,0.05)"
+                }}
+                onMouseEnter={(e) => e.currentTarget.style.color = "var(--danger)"}
+                onMouseLeave={(e) => e.currentTarget.style.color = "var(--muted)"}
+              >
+                🗑️
+              </button>
+            )}
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                onAction(file.relativePath);
+              }}
+              title={isStaged ? "Unstage Change" : "Stage Change"}
+              style={{
+                background: "none",
+                border: "none",
+                cursor: "pointer",
+                fontSize: "0.65rem",
+                color: "var(--muted)",
+                padding: "1px 4px",
+                borderRadius: "3px",
+                backgroundColor: "rgba(255,255,255,0.05)"
+              }}
+              onMouseEnter={(e) => e.currentTarget.style.color = "var(--foreground)"}
+              onMouseLeave={(e) => e.currentTarget.style.color = "var(--muted)"}
+            >
+              {isStaged ? "➖" : "➕"}
+            </button>
+          </div>
+        )}
+        <span style={{ fontSize: "0.6rem", padding: "0.1rem 0.3rem", borderRadius: "3px", backgroundColor: badgeColor + "22", color: badgeColor, fontWeight: 700, width: "1.2rem", display: "inline-block", textAlign: "center" }}>
+          {displayStatus.substring(0, 1)}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+const commitTextareaStyle: React.CSSProperties = {
+  width: "100%",
+  minHeight: "60px",
+  backgroundColor: "#05070a",
+  border: "1px solid var(--border)",
+  borderRadius: "6px",
+  padding: "0.5rem",
+  color: "#e2e8f0",
+  fontSize: "0.75rem",
+  resize: "vertical",
+  outline: "none",
+  fontFamily: "var(--font-sans), sans-serif",
+};
+
+const commitButtonStyle: React.CSSProperties = {
+  width: "100%",
+  padding: "0.35rem",
+  backgroundColor: "var(--primary)",
+  border: "none",
+  color: "#ffffff",
+  borderRadius: "6px",
+  fontSize: "0.75rem",
+  fontWeight: 600,
+  cursor: "pointer",
+  transition: "opacity 0.1s ease",
+};
+
+const gitIconButtonStyle: React.CSSProperties = {
+  background: "none",
+  border: "1px solid var(--border)",
+  borderRadius: "4px",
+  padding: "2px 5px",
+  cursor: "pointer",
+  fontSize: "0.7rem",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: "rgba(255,255,255,0.02)",
+};
+
+const actionHeaderBtnStyle: React.CSSProperties = {
+  background: "none",
+  border: "none",
+  cursor: "pointer",
+  fontSize: "0.65rem",
+  color: "var(--muted)",
+  padding: "2px 4px",
+  borderRadius: "3px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+};