neural-loom 0.2.19 → 0.2.41

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,79 @@ 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 [activeTab, setActiveTab] = useState<"explorer" | "git" | "analytics" | "auditor" | "browser">("explorer");
+  const [browserUrlInput, setBrowserUrlInput] = useState("http://localhost:3000");
   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 +255,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 +274,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 +584,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
@@ -556,7 +807,31 @@ export default function IdeLayout({ sessionId, workspaceRoot, scopedDirs, onClos
     }
   };
 
+  const handleOpenBrowserTab = (url: string) => {
+    const formattedUrl = url.trim();
+    if (!formattedUrl) return;
+    const browserPath = `browser:${formattedUrl}`;
+    const alreadyOpen = openFiles.find(f => f.path === browserPath);
+    if (!alreadyOpen) {
+      setOpenFiles(prev => [
+        ...prev,
+        {
+          name: `Browser: ${formattedUrl.replace(/^https?:\/\//, "")}`,
+          path: browserPath,
+          content: formattedUrl,
+          isModified: false,
+        }
+      ]);
+    }
+    setActiveFilePath(browserPath);
+  };
+
   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;
@@ -566,7 +841,7 @@ export default function IdeLayout({ sessionId, workspaceRoot, scopedDirs, onClos
   };
 
   const handleSaveFile = useCallback(async () => {
-    if (!activeFile) return;
+    if (!activeFile || activeFile.path.startsWith("diff:") || activeFile.path.startsWith("browser:")) return;
     try {
       const res = await fetch("/api/files", {
         method: "POST",
@@ -630,7 +905,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}>
@@ -713,6 +988,26 @@ export default function IdeLayout({ sessionId, workspaceRoot, scopedDirs, onClos
           >
             🔍
           </div>
+
+          {/* Web Browser Tab */}
+          <div
+            onClick={() => {
+              if (activeTab === "browser") {
+                setExplorerVisible(!explorerVisible);
+              } else {
+                setActiveTab("browser");
+                setExplorerVisible(true);
+              }
+            }}
+            style={{
+              ...sidebarIconStyle,
+              backgroundColor: activeTab === "browser" && explorerVisible ? "rgba(255,255,255,0.08)" : "transparent",
+              borderLeft: activeTab === "browser" && explorerVisible ? "2px solid var(--primary)" : "2px solid transparent",
+            }}
+            title="Local Web Browser Test Preview"
+          >
+            🌐
+          </div>
         </div>
 
         <div
@@ -726,13 +1021,15 @@ 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"}
               {activeTab === "git" && "Source Control"}
               {activeTab === "analytics" && "Telemetry & Cost"}
               {activeTab === "auditor" && "Session Auditor"}
+              {activeTab === "browser" && "Browser Preview"}
             </span>
             {activeTab === "explorer" && (
               <div style={{ display: "flex", gap: "0.25rem" }}>
@@ -855,81 +1152,248 @@ 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>
             )}
 
+            {activeTab === "browser" && (
+              <div style={{ padding: "1rem", display: "flex", flexDirection: "column", gap: "1rem" }}>
+                <div>
+                  <label style={{ fontSize: "0.7rem", fontWeight: 700, textTransform: "uppercase", color: "var(--muted)", display: "block", marginBottom: "0.4rem" }}>
+                    Url Address
+                  </label>
+                  <div style={{ display: "flex", gap: "0.25rem" }}>
+                    <input
+                      type="text"
+                      value={browserUrlInput}
+                      onChange={(e) => setBrowserUrlInput(e.target.value)}
+                      placeholder="http://localhost:3000"
+                      style={{
+                        flex: 1,
+                        backgroundColor: "#05070a",
+                        border: "1px solid var(--border)",
+                        borderRadius: "4px",
+                        padding: "0.35rem 0.5rem",
+                        color: "#ffffff",
+                        fontSize: "0.75rem",
+                        outline: "none"
+                      }}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter") {
+                          handleOpenBrowserTab(browserUrlInput);
+                        }
+                      }}
+                    />
+                    <button
+                      onClick={() => handleOpenBrowserTab(browserUrlInput)}
+                      style={{
+                        backgroundColor: "var(--primary)",
+                        border: "none",
+                        color: "#ffffff",
+                        padding: "0.35rem 0.75rem",
+                        borderRadius: "4px",
+                        fontSize: "0.75rem",
+                        fontWeight: 600,
+                        cursor: "pointer"
+                      }}
+                    >
+                      Go
+                    </button>
+                  </div>
+                </div>
+
+                <div>
+                  <label style={{ fontSize: "0.7rem", fontWeight: 700, textTransform: "uppercase", color: "var(--muted)", display: "block", marginBottom: "0.5rem" }}>
+                    Quick Launch Ports
+                  </label>
+                  <div style={{ display: "flex", flexDirection: "column", gap: "0.35rem" }}>
+                    {[
+                      { label: "Next.js App (3000)", url: "http://localhost:3000" },
+                      { label: "WebSocket Gateway (3001)", url: "http://localhost:3001" },
+                      { label: "Vite Server (5173)", url: "http://localhost:5173" }
+                    ].map((item, idx) => (
+                      <div
+                        key={idx}
+                        onClick={() => {
+                          setBrowserUrlInput(item.url);
+                          handleOpenBrowserTab(item.url);
+                        }}
+                        style={{
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "space-between",
+                          padding: "0.5rem 0.75rem",
+                          borderRadius: "4px",
+                          backgroundColor: "rgba(255,255,255,0.02)",
+                          border: "1px solid var(--border)",
+                          cursor: "pointer",
+                          fontSize: "0.75rem",
+                          transition: "all 0.15s ease"
+                        }}
+                        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={{ color: "var(--foreground)" }}>{item.label}</span>
+                        <span style={{ color: "var(--primary)", fontSize: "0.8rem" }}>🌐➔</span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                <div style={{
+                  marginTop: "auto",
+                  padding: "0.5rem",
+                  borderRadius: "6px",
+                  backgroundColor: "rgba(234, 179, 8, 0.05)",
+                  border: "1px solid rgba(234, 179, 8, 0.15)",
+                  fontSize: "0.65rem",
+                  color: "var(--muted)",
+                  lineHeight: "1.4"
+                }}>
+                  <span style={{ color: "#eab308", fontWeight: 700 }}>⚠️ Iframe CSP Note</span>: Some public websites (e.g. Google, GitHub) block loading inside frames via security headers. Use this tab primarily to preview and debug local development webservers.
+                </div>
+              </div>
+            )}
+
             {activeTab === "analytics" && (
               <div style={{ padding: "0.5rem 1rem", display: "flex", flexDirection: "column", gap: "1.25rem" }}>
                 <div>
@@ -1129,7 +1593,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 +1661,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}>
@@ -1209,46 +1692,97 @@ 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>
+            {activeFile && !activeFile.path.startsWith("diff:") && !activeFile.path.startsWith("browser:") && (
+              <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>
 
           {/* Editor contents */}
           <div style={editorWorkspaceStyle}>
             {activeFile ? (
-              activeFile.path.startsWith("diff:") ? (
-                <div style={{ fontFamily: "var(--font-mono)", fontSize: "0.8rem", padding: "1rem", overflow: "auto", height: "100%", backgroundColor: "#0b101b", lineHeight: 1.5 }}>
-                  {activeFile.content.split("\n").map((line, i) => {
-                    let color = "#e2e8f0";
-                    let bg = "transparent";
-                    if (line.startsWith("+")) {
-                      color = "#4ade80";
-                      bg = "rgba(74, 222, 128, 0.08)";
-                    } else if (line.startsWith("-")) {
-                      color = "#f87171";
-                      bg = "rgba(248, 113, 113, 0.08)";
-                    } else if (line.startsWith("@@")) {
-                      color = "#60a5fa";
-                      bg = "rgba(96, 165, 250, 0.05)";
-                    }
-                    return (
-                      <div key={i} style={{ color, backgroundColor: bg, whiteSpace: "pre-wrap", padding: "0.1rem 0.5rem" }}>
-                        {line}
-                      </div>
-                    );
-                  })}
-                </div>
+              activeFile.path.startsWith("browser:") ? (
+                <BrowserView url={activeFile.content} />
+              ) : activeFile.path.startsWith("diff:") ? (
+                <DiffView content={activeFile.content} filePath={activeFile.path.substring(5)} />
+              ) : 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 +1806,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 +1964,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 +2171,7 @@ const sidebarIconStyle: React.CSSProperties = {
 };
 
 const sidebarPanelStyle: React.CSSProperties = {
-  width: "260px",
+  width: "300px",
   backgroundColor: "#080c14",
   borderRight: "1px solid var(--border)",
   display: "flex",
@@ -2209,3 +2763,552 @@ 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>
+  );
+}
+
+interface BrowserViewProps {
+  url: string;
+}
+
+function BrowserView({ url }: BrowserViewProps) {
+  const [currentUrl, setCurrentUrl] = useState(url);
+  const [iframeUrl, setIframeUrl] = useState(url);
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  useEffect(() => {
+    setCurrentUrl(url);
+    setIframeUrl(url);
+  }, [url]);
+
+  const handleGo = () => {
+    let targetUrl = currentUrl.trim();
+    if (targetUrl && !/^https?:\/\//i.test(targetUrl)) {
+      targetUrl = "http://" + targetUrl;
+    }
+    setCurrentUrl(targetUrl);
+    setIframeUrl(targetUrl);
+  };
+
+  const handleReload = () => {
+    setRefreshKey(prev => prev + 1);
+  };
+
+  const handleOpenExternal = () => {
+    window.open(iframeUrl, "_blank");
+  };
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", width: "100%", height: "100%", backgroundColor: "#0b101b" }}>
+      {/* Navigation Toolbar */}
+      <div style={{
+        display: "flex",
+        alignItems: "center",
+        gap: "0.5rem",
+        padding: "0.5rem",
+        backgroundColor: "#05070a",
+        borderBottom: "1px solid var(--border)",
+      }}>
+        <button
+          onClick={handleReload}
+          title="Hard Reload Frame"
+          style={{
+            background: "none",
+            border: "1px solid var(--border)",
+            borderRadius: "4px",
+            color: "var(--muted)",
+            cursor: "pointer",
+            fontSize: "0.85rem",
+            padding: "0.25rem 0.5rem",
+            display: "flex",
+            alignItems: "center",
+            backgroundColor: "rgba(255,255,255,0.02)"
+          }}
+          onMouseEnter={(e) => e.currentTarget.style.color = "var(--foreground)"}
+          onMouseLeave={(e) => e.currentTarget.style.color = "var(--muted)"}
+        >
+          🔄
+        </button>
+
+        <input
+          type="text"
+          value={currentUrl}
+          onChange={(e) => setCurrentUrl(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              handleGo();
+            }
+          }}
+          style={{
+            flex: 1,
+            backgroundColor: "#080c14",
+            border: "1px solid var(--border)",
+            borderRadius: "4px",
+            padding: "0.25rem 0.75rem",
+            color: "#ffffff",
+            fontSize: "0.8rem",
+            outline: "none",
+            fontFamily: "var(--font-mono), monospace"
+          }}
+        />
+
+        <button
+          onClick={handleGo}
+          title="Go to URL"
+          style={{
+            background: "none",
+            border: "1px solid var(--border)",
+            borderRadius: "4px",
+            color: "var(--primary)",
+            cursor: "pointer",
+            fontSize: "0.8rem",
+            padding: "0.25rem 0.5rem",
+            display: "flex",
+            alignItems: "center",
+            backgroundColor: "rgba(255,255,255,0.02)"
+          }}
+        >
+          ➔
+        </button>
+
+        <button
+          onClick={handleOpenExternal}
+          title="Open in External Browser"
+          style={{
+            background: "none",
+            border: "1px solid var(--border)",
+            borderRadius: "4px",
+            color: "var(--muted)",
+            cursor: "pointer",
+            fontSize: "0.85rem",
+            padding: "0.25rem 0.5rem",
+            display: "flex",
+            alignItems: "center",
+            backgroundColor: "rgba(255,255,255,0.02)"
+          }}
+          onMouseEnter={(e) => e.currentTarget.style.color = "var(--foreground)"}
+          onMouseLeave={(e) => e.currentTarget.style.color = "var(--muted)"}
+        >
+          🌐
+        </button>
+      </div>
+
+      {/* Frame Wrapper */}
+      <div style={{ flex: 1, position: "relative", width: "100%", height: "100%", backgroundColor: "#ffffff" }}>
+        <iframe
+          key={refreshKey}
+          src={iframeUrl}
+          style={{
+            width: "100%",
+            height: "100%",
+            border: "none",
+            backgroundColor: "#ffffff",
+          }}
+          sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
+        />
+      </div>
+    </div>
+  );
+}
+
+interface DiffViewProps {
+  content: string;
+  filePath: string;
+}
+
+function DiffView({ content, filePath }: DiffViewProps) {
+  const lines = content.split(/\r?\n/);
+  
+  let oldLineNum = 0;
+  let newLineNum = 0;
+  
+  let additions = 0;
+  let deletions = 0;
+  
+  const parsedLines = lines.map((line) => {
+    let type: 'meta' | 'header' | 'hunk' | 'addition' | 'deletion' | 'normal' = 'normal';
+    let lineContent = line;
+    let oldNum: number | null = null;
+    let newNum: number | null = null;
+    
+    if (line.startsWith("diff --git") || line.startsWith("index ") || line.startsWith("--- ") || line.startsWith("+++ ")) {
+      type = 'header';
+    } else if (line.startsWith("@@")) {
+      type = 'hunk';
+      const match = line.match(/^@@\s+-(\d+)(?:,\d+)?\s+\+(\d+)(?:,\d+)?\s+@@/);
+      if (match) {
+        oldLineNum = parseInt(match[1], 10);
+        newLineNum = parseInt(match[2], 10);
+      }
+    } else if (line.startsWith("+")) {
+      type = 'addition';
+      lineContent = line.substring(1);
+      newNum = newLineNum++;
+      additions++;
+    } else if (line.startsWith("-")) {
+      type = 'deletion';
+      lineContent = line.substring(1);
+      oldNum = oldLineNum++;
+      deletions++;
+    } else {
+      type = 'normal';
+      if (line.startsWith(" ")) {
+        lineContent = line.substring(1);
+      }
+      if (oldLineNum > 0) {
+        oldNum = oldLineNum++;
+      }
+      if (newLineNum > 0) {
+        newNum = newLineNum++;
+      }
+    }
+    
+    return {
+      type,
+      content: lineContent,
+      oldNum,
+      newNum,
+      raw: line
+    };
+  });
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", height: "100%", backgroundColor: "#0b101b" }}>
+      <div style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: "0.5rem 1rem",
+        backgroundColor: "#05070a",
+        borderBottom: "1px solid var(--border)",
+      }}>
+        <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
+          <span style={{ fontSize: "1rem" }}>📄</span>
+          <span style={{ fontWeight: 600, fontSize: "0.85rem", color: "var(--foreground)", fontFamily: "var(--font-mono)" }}>
+            {filePath}
+          </span>
+        </div>
+        <div style={{ display: "flex", alignItems: "center", gap: "0.75rem", fontSize: "0.75rem" }}>
+          {additions > 0 && (
+            <span style={{ color: "#4ade80", backgroundColor: "rgba(74, 222, 128, 0.1)", padding: "0.15rem 0.4rem", borderRadius: "4px", fontWeight: 600 }}>
+              +{additions} lines
+            </span>
+          )}
+          {deletions > 0 && (
+            <span style={{ color: "#f87171", backgroundColor: "rgba(248, 113, 113, 0.1)", padding: "0.15rem 0.4rem", borderRadius: "4px", fontWeight: 600 }}>
+              -{deletions} lines
+            </span>
+          )}
+          <span style={{ color: "var(--muted)" }}>
+            {parsedLines.length} lines in diff
+          </span>
+        </div>
+      </div>
+      
+      <div style={{ flex: 1, overflow: "auto", padding: "0.5rem 0" }}>
+        <table style={{ width: "100%", borderCollapse: "collapse", fontFamily: "var(--font-mono), monospace", fontSize: "0.8rem", lineHeight: 1.5 }}>
+          <tbody>
+            {parsedLines.map((lineObj, idx) => {
+              if (lineObj.type === 'header') {
+                return (
+                  <tr key={idx} style={{ backgroundColor: "rgba(255,255,255,0.02)" }}>
+                    <td colSpan={4} style={{ color: "var(--muted)", padding: "0.25rem 1rem", fontSize: "0.75rem", borderBottom: "1px solid rgba(255,255,255,0.03)" }}>
+                      {lineObj.raw}
+                    </td>
+                  </tr>
+                );
+              }
+              if (lineObj.type === 'hunk') {
+                return (
+                  <tr key={idx} style={{ backgroundColor: "rgba(96, 165, 250, 0.05)" }}>
+                    <td colSpan={2} style={{
+                      width: "80px",
+                      textAlign: "center",
+                      color: "rgba(96, 165, 250, 0.6)",
+                      borderRight: "1px solid rgba(96, 165, 250, 0.15)",
+                      userSelect: "none",
+                      padding: "0.25rem 0",
+                      fontSize: "0.7rem",
+                    }}>
+                      @@
+                    </td>
+                    <td style={{
+                      width: "25px",
+                      borderRight: "1px solid rgba(255, 255, 255, 0.05)",
+                    }}></td>
+                    <td style={{ color: "#60a5fa", padding: "0.25rem 1rem", fontStyle: "italic", fontSize: "0.75rem" }}>
+                      {lineObj.raw}
+                    </td>
+                  </tr>
+                );
+              }
+              
+              let rowBg = "transparent";
+              let codeColor = "var(--foreground)";
+              let sign = " ";
+              let signColor = "transparent";
+              
+              if (lineObj.type === 'addition') {
+                rowBg = "rgba(74, 222, 128, 0.08)";
+                codeColor = "#4ade80";
+                sign = "+";
+                signColor = "rgba(74, 222, 128, 0.4)";
+              } else if (lineObj.type === 'deletion') {
+                rowBg = "rgba(248, 113, 113, 0.08)";
+                codeColor = "#f87171";
+                sign = "-";
+                signColor = "rgba(248, 113, 113, 0.4)";
+              }
+              
+              return (
+                <tr key={idx} style={{ backgroundColor: rowBg }}>
+                  {/* Old line number */}
+                  <td style={{
+                    width: "40px",
+                    textAlign: "right",
+                    paddingRight: "0.75rem",
+                    color: "var(--muted)",
+                    opacity: lineObj.oldNum ? 0.6 : 0.2,
+                    userSelect: "none",
+                    borderRight: "1px solid rgba(255, 255, 255, 0.05)",
+                    fontSize: "0.75rem"
+                  }}>
+                    {lineObj.oldNum || ""}
+                  </td>
+                  {/* New line number */}
+                  <td style={{
+                    width: "40px",
+                    textAlign: "right",
+                    paddingRight: "0.75rem",
+                    color: "var(--muted)",
+                    opacity: lineObj.newNum ? 0.6 : 0.2,
+                    userSelect: "none",
+                    borderRight: "1px solid rgba(255, 255, 255, 0.05)",
+                    fontSize: "0.75rem"
+                  }}>
+                    {lineObj.newNum || ""}
+                  </td>
+                  {/* Sign (+ / -) */}
+                  <td style={{
+                    width: "25px",
+                    textAlign: "center",
+                    color: signColor,
+                    userSelect: "none",
+                    fontWeight: "bold",
+                    fontSize: "0.85rem",
+                    borderRight: "1px solid rgba(255, 255, 255, 0.05)",
+                  }}>
+                    {sign}
+                  </td>
+                  {/* Code line content */}
+                  <td style={{
+                    paddingLeft: "0.75rem",
+                    color: codeColor,
+                    whiteSpace: "pre-wrap",
+                    wordBreak: "break-all"
+                  }}>
+                    {lineObj.content}
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </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"
+};