neural-loom 0.2.59 → 0.2.61

package/src/app/components/IdeLayout.tsx

@@ -1,12 +1,25 @@
 "use client";
 
-import { useEffect, useState, useCallback } from "react";
+import { useEffect, useState, useCallback, useMemo } from "react";
 import dynamic from "next/dynamic";
 import TerminalConsole from "./TerminalConsole";
 import DirectoryBrowserModal from "./DirectoryBrowserModal";
 import MarkdownPreview from "./MarkdownPreview";
 import DbExplorer from "./DbExplorer";
 
+interface TokenTransaction {
+  timestamp: string;
+  sessionId: string;
+  sessionName: string;
+  type: string;
+  inputTokens: number;
+  outputTokens: number;
+  cost: number;
+  totalInput: number;
+  totalOutput: number;
+  totalCost: number;
+}
+
 const MonacoEditor = dynamic(() => import("@monaco-editor/react"), { ssr: false });
 
 const getEditorLanguage = (filePath: string): string => {
@@ -42,6 +55,35 @@ const getEditorLanguage = (filePath: string): string => {
   }
 };
 
+interface MergeConflictBlock {
+  index: number;
+  startIndex: number;
+  endIndex: number;
+  current: string;
+  incoming: string;
+  rawText: string;
+}
+
+const parseMergeConflicts = (text: string): MergeConflictBlock[] => {
+  if (!text) return [];
+  const regex = /<<<<<<<[^]*?\r?\n([^]*?)\r?\n=======\r?\n([^]*?)\r?\n>>>>>>>.*/g;
+  const conflicts: MergeConflictBlock[] = [];
+  let match;
+  let index = 0;
+  while ((match = regex.exec(text)) !== null) {
+    conflicts.push({
+      index: index++,
+      startIndex: match.index,
+      endIndex: match.index + match[0].length,
+      current: match[1],
+      incoming: match[2],
+      rawText: match[0]
+    });
+  }
+  return conflicts;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const handleEditorWillMount = (monaco: any) => {
   monaco.editor.defineTheme("neural-loom-dark", {
     base: "vs-dark",
@@ -152,7 +194,7 @@ interface FlatFile {
 interface RunnerStatus {
   id: string;
   name: string;
-  type: 'mock' | 'claude' | 'claude-docker' | 'claude-ssh' | 'aider' | 'aider-docker';
+  type: 'mock' | 'claude' | 'claude-docker' | 'claude-ssh' | 'aider' | 'aider-docker' | 'shell';
   status: 'idle' | 'running' | 'stopped';
   createdAt: string;
   logsCount: number;
@@ -250,15 +292,104 @@ export default function IdeLayout({ sessionId, workspaceRoot, scopedDirs, onClos
   const [editorMode, setEditorMode] = useState<'edit' | 'split' | 'preview'>('edit');
   const [explorerVisible, setExplorerVisible] = useState(true);
   const [activeTab, setActiveTab] = useState<"explorer" | "git" | "analytics" | "auditor" | "browser" | "database">("explorer");
-  const [browserUrlInput, setBrowserUrlInput] = useState("http://localhost:3000");
+  const [browserUrlInput, setBrowserUrlInput] = useState(typeof window !== "undefined" ? window.location.origin : "http://localhost:9600");
   const [isRefreshing, setIsRefreshing] = useState(false);
 
+  // Terminal tab states & handlers
+  const [consoleSessionId, setConsoleSessionId] = useState<string>(sessionId);
+
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setConsoleSessionId(sessionId);
+  }, [sessionId]);
+
+  const workspaceShells = sessions.filter(s => s.type === 'shell' && s.id.startsWith(`shell-${sessionId}-`));
+
+  const handleCreateShell = async () => {
+    try {
+      const res = await fetch("/api/sessions/launch", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          type: "shell",
+          name: `Shell ${workspaceShells.length + 1}`,
+          workspaceRoot: workspaceRoot,
+          parentSessionId: sessionId
+        })
+      });
+      if (res.ok) {
+        const data = await res.json();
+        if (data.success && data.session) {
+          if (onRefreshSessions) {
+            onRefreshSessions();
+          }
+          setConsoleSessionId(data.session.id);
+        }
+      }
+    } catch (err) {
+      console.error("Failed to launch shell terminal:", err);
+    }
+  };
+
+  const handleCloseShell = async (shellId: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (consoleSessionId === shellId) {
+      setConsoleSessionId(sessionId);
+    }
+    try {
+      await fetch("/api/sessions/stop", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ id: shellId, delete: true })
+      });
+      if (onRefreshSessions) {
+        onRefreshSessions();
+      }
+    } catch (err) {
+      console.error("Failed to delete shell:", err);
+    }
+  };
+
   // Layout sizing states
   const [sidebarWidth, setSidebarWidth] = useState(300);
   const [isResizingSidebar, setIsResizingSidebar] = useState(false);
   const [terminalHeight, setTerminalHeight] = useState(380);
   const [isResizingTerminal, setIsResizingTerminal] = useState(false);
 
+  // Load layout sizes from localStorage on mount
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const savedWidth = localStorage.getItem("neural-loom:sidebar-width");
+      if (savedWidth) {
+        const w = parseInt(savedWidth, 10);
+        if (!isNaN(w) && w > 150 && w < 600) {
+          // eslint-disable-next-line react-hooks/set-state-in-effect
+          setSidebarWidth(w);
+        }
+      }
+      const savedHeight = localStorage.getItem("neural-loom:terminal-height");
+      if (savedHeight) {
+        const h = parseInt(savedHeight, 10);
+        if (!isNaN(h) && h > 100 && h < window.innerHeight - 150) {
+          setTerminalHeight(h);
+        }
+      }
+    }
+  }, []);
+
+  // Save layout sizes when changed
+  useEffect(() => {
+    if (typeof window !== "undefined" && sidebarWidth !== 300) {
+      localStorage.setItem("neural-loom:sidebar-width", sidebarWidth.toString());
+    }
+  }, [sidebarWidth]);
+
+  useEffect(() => {
+    if (typeof window !== "undefined" && terminalHeight !== 380) {
+      localStorage.setItem("neural-loom:terminal-height", terminalHeight.toString());
+    }
+  }, [terminalHeight]);
+
   const startResizingSidebar = useCallback((e: React.MouseEvent) => {
     e.preventDefault();
     setIsResizingSidebar(true);
@@ -334,6 +465,30 @@ export default function IdeLayout({ sessionId, workspaceRoot, scopedDirs, onClos
   // Log Search & Auditor
   const [logSearchQuery, setLogSearchQuery] = useState("");
 
+  // Telemetry history
+  const [telemetryHistory, setTelemetryHistory] = useState<TokenTransaction[]>([]);
+
+  const fetchTelemetryHistory = async () => {
+    try {
+      const res = await fetch("/api/telemetry");
+      if (res.ok) {
+        const data = await res.json();
+        if (data.success && data.history) {
+          setTelemetryHistory(data.history);
+        }
+      }
+    } catch (err) {
+      console.error("Failed to fetch telemetry history:", err);
+    }
+  };
+
+  useEffect(() => {
+    if (activeTab === "analytics") {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      fetchTelemetryHistory();
+    }
+  }, [activeTab]);
+
   // Custom Commands
   const [customCommands, setCustomCommands] = useState<{ name: string; command: string }[]>([]);
   const [newCmdName, setNewCmdName] = useState("");
@@ -807,6 +962,7 @@ export default function IdeLayout({ sessionId, workspaceRoot, scopedDirs, onClos
   }, [workspaceRoot, scopedDirsStr]);
 
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     loadFiles();
     const interval = setInterval(() => {
       loadFiles();
@@ -1738,7 +1894,7 @@ export default function IdeLayout({ sessionId, workspaceRoot, scopedDirs, onClos
                       type="text"
                       value={browserUrlInput}
                       onChange={(e) => setBrowserUrlInput(e.target.value)}
-                      placeholder="http://localhost:3000"
+                      placeholder={typeof window !== "undefined" ? window.location.origin : "http://localhost:9600"}
                       style={{
                         flex: 1,
                         backgroundColor: "#05070a",
@@ -1779,8 +1935,8 @@ export default function IdeLayout({ sessionId, workspaceRoot, scopedDirs, onClos
                   </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: `Next.js App (${typeof window !== "undefined" ? window.location.port : "9600"})`, url: typeof window !== "undefined" ? window.location.origin : "http://localhost:9600" },
+                      { label: `WebSocket Gateway (${wsPort})`, url: `http://localhost:${wsPort}` },
                       { label: "Vite Server (5173)", url: "http://localhost:5173" }
                     ].map((item, idx) => (
                       <div
@@ -1827,10 +1983,11 @@ export default function IdeLayout({ sessionId, workspaceRoot, scopedDirs, onClos
             )}
 
             {activeTab === "analytics" && (
-              <div style={{ padding: "0.5rem 1rem", display: "flex", flexDirection: "column", gap: "1.25rem" }}>
+              <div style={{ padding: "0.5rem 1rem", display: "flex", flexDirection: "column", gap: "1.25rem", maxHeight: "100%", overflowY: "auto" }}>
+                {/* Session Token Usage */}
                 <div>
                   <div style={{ fontSize: "0.75rem", fontWeight: 700, textTransform: "uppercase", color: "var(--muted)", marginBottom: "0.5rem" }}>
-                    Token Usage
+                    Active Session Token Usage
                   </div>
                   <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.5rem" }}>
                     <div style={analyticsCardStyle}>
@@ -1850,6 +2007,137 @@ export default function IdeLayout({ sessionId, workspaceRoot, scopedDirs, onClos
                   </div>
                 </div>
 
+                {/* All-time Accumulations */}
+                <div>
+                  <div style={{ fontSize: "0.75rem", fontWeight: 700, textTransform: "uppercase", color: "var(--muted)", marginBottom: "0.5rem" }}>
+                    All-time Cumulative Totals
+                  </div>
+                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.5rem" }}>
+                    <div style={analyticsCardStyle}>
+                      <div style={analyticsCardLabelStyle}>Total Input</div>
+                      <div style={analyticsCardValueStyle}>
+                        {telemetryHistory.reduce((sum, item) => sum + (item.inputTokens || 0), 0).toLocaleString()}
+                      </div>
+                    </div>
+                    <div style={analyticsCardStyle}>
+                      <div style={analyticsCardLabelStyle}>Total Output</div>
+                      <div style={analyticsCardValueStyle}>
+                        {telemetryHistory.reduce((sum, item) => sum + (item.outputTokens || 0), 0).toLocaleString()}
+                      </div>
+                    </div>
+                    <div style={{ ...analyticsCardStyle, gridColumn: "span 2" }}>
+                      <div style={analyticsCardLabelStyle}>Total Cost</div>
+                      <div style={{ ...analyticsCardValueStyle, color: "#10b981", fontSize: "1.25rem" }}>
+                        ${telemetryHistory.reduce((sum, item) => sum + (item.cost || 0), 0).toFixed(4)}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Historical Token Analytics Chart */}
+                {telemetryHistory.length > 0 && (
+                  <div>
+                    <div style={{ fontSize: "0.75rem", fontWeight: 700, textTransform: "uppercase", color: "var(--muted)", marginBottom: "0.5rem" }}>
+                      Cost & Token History Trend (Last 10 Actions)
+                    </div>
+                    <div className="card" style={{ padding: "1rem", backgroundColor: "#05070a", border: "1px solid var(--border)", display: "flex", flexDirection: "column", alignItems: "center" }}>
+                      <svg width="240" height="110" style={{ overflow: "visible" }}>
+                        {(() => {
+                          const chartData = telemetryHistory.slice(-10);
+                          const maxVal = Math.max(...chartData.map(d => (d.inputTokens || 0) + (d.outputTokens || 0)), 100);
+                          const barWidth = 14;
+                          const gap = 7;
+                          const svgHeight = 90;
+                          
+                          return chartData.map((d, i) => {
+                            const inp = d.inputTokens || 0;
+                            const out = d.outputTokens || 0;
+                            
+                            const inpHeight = (inp / maxVal) * (svgHeight - 10);
+                            const outHeight = (out / maxVal) * (svgHeight - 10);
+                            
+                            const x = i * (barWidth + gap) + 15;
+                            const inpY = svgHeight - inpHeight;
+                            const outY = inpY - outHeight;
+                            
+                            return (
+                              <g key={i}>
+                                {/* Input portion (purple) */}
+                                <rect 
+                                  x={x} 
+                                  y={inpY} 
+                                  width={barWidth} 
+                                  height={inpHeight} 
+                                  fill="#a855f7" 
+                                  opacity="0.85"
+                                  rx="1.5"
+                                />
+                                {/* Output portion (yellow) */}
+                                <rect 
+                                  x={x} 
+                                  y={outY} 
+                                  width={barWidth} 
+                                  height={outHeight} 
+                                  fill="#eab308" 
+                                  opacity="0.9"
+                                  rx="1.5"
+                                />
+                                <title>{`${d.sessionName || d.type}\nCost: $${(d.cost || 0).toFixed(4)}\nInput: ${inp.toLocaleString()}\nOutput: ${out.toLocaleString()}`}</title>
+                              </g>
+                            );
+                          });
+                        })()}
+                        <line x1="10" y1="90" x2="230" y2="90" stroke="var(--border)" strokeWidth="1" />
+                      </svg>
+                      {/* Legend */}
+                      <div style={{ display: "flex", gap: "1rem", marginTop: "0.5rem", fontSize: "0.65rem" }}>
+                        <span style={{ display: "flex", alignItems: "center", gap: "0.25rem" }}>
+                          <span style={{ width: "8px", height: "8px", backgroundColor: "#a855f7", borderRadius: "2px" }}></span> Input
+                        </span>
+                        <span style={{ display: "flex", alignItems: "center", gap: "0.25rem" }}>
+                          <span style={{ width: "8px", height: "8px", backgroundColor: "#eab308", borderRadius: "2px" }}></span> Output
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                )}
+
+                {/* Tabular Invocations Log */}
+                {telemetryHistory.length > 0 && (
+                  <div>
+                    <div style={{ fontSize: "0.75rem", fontWeight: 700, textTransform: "uppercase", color: "var(--muted)", marginBottom: "0.5rem" }}>
+                      Cumulative Log
+                    </div>
+                    <div style={{ overflowX: "auto", border: "1px solid var(--border)", borderRadius: "6px", backgroundColor: "#05070a" }}>
+                      <table style={{ width: "100%", borderCollapse: "collapse", fontSize: "0.7rem", textAlign: "left" }}>
+                        <thead>
+                          <tr style={{ borderBottom: "1px solid var(--border)", backgroundColor: "rgba(255,255,255,0.02)" }}>
+                            <th style={{ padding: "0.4rem 0.5rem", color: "var(--muted)" }}>Agent</th>
+                            <th style={{ padding: "0.4rem 0.5rem", color: "var(--muted)" }}>Tokens</th>
+                            <th style={{ padding: "0.4rem 0.5rem", color: "var(--muted)" }}>Cost</th>
+                            <th style={{ padding: "0.4rem 0.5rem", color: "var(--muted)" }}>Time</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          {telemetryHistory.slice(-8).reverse().map((item, index) => (
+                            <tr key={index} style={{ borderBottom: "1px solid rgba(255,255,255,0.03)" }}>
+                              <td style={{ padding: "0.4rem 0.5rem", fontWeight: 600 }}>{item.sessionName?.substring(0, 12) || item.type}</td>
+                              <td style={{ padding: "0.4rem 0.5rem" }}>
+                                {((item.inputTokens || 0) + (item.outputTokens || 0)).toLocaleString()}
+                              </td>
+                              <td style={{ padding: "0.4rem 0.5rem", color: "#10b981" }}>${(item.cost || 0).toFixed(4)}</td>
+                              <td style={{ padding: "0.4rem 0.5rem", color: "var(--muted)" }}>
+                                {new Date(item.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+                              </td>
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                )}
+
+                {/* Resource Telemetry */}
                 <div>
                   <div style={{ fontSize: "0.75rem", fontWeight: 700, textTransform: "uppercase", color: "var(--muted)", marginBottom: "0.5rem" }}>
                     Resource Telemetry
@@ -2090,7 +2378,7 @@ export default function IdeLayout({ sessionId, workspaceRoot, scopedDirs, onClos
                   <span style={{ fontSize: "0.6rem", color: "var(--muted)", backgroundColor: "rgba(255,255,255,0.05)", padding: "1px 4px", borderRadius: "3px" }}>
                     {s.type.replace("claude-", "").replace("aider-", "")}
                   </span>
-                  {s.status === 'running' && s.agentState && (
+                  {s.status === 'running' && s.agentState && s.type !== 'shell' && (
                     <span 
                       style={{ 
                         fontSize: "0.6rem", 
@@ -2215,19 +2503,136 @@ export default function IdeLayout({ sessionId, workspaceRoot, scopedDirs, onClos
 
           {/* Editor contents */}
           <div style={editorWorkspaceStyle}>
-            {activeFile ? (
-              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 style={{ display: "flex", flexDirection: "column", height: "100%", width: "100%" }}>
+              {activeFile && parseMergeConflicts(activeFile.content).length > 0 && (
+                <div style={{
+                  padding: "0.5rem 1rem",
+                  backgroundColor: "rgba(220, 38, 38, 0.15)",
+                  borderBottom: "1px solid var(--danger)",
+                  color: "var(--foreground)",
+                  fontSize: "0.8rem",
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "0.5rem",
+                  flexShrink: 0,
+                  zIndex: 20
+                }}>
+                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+                    <span style={{ fontWeight: 600, color: "#f87171" }}>
+                      ⚠️ {parseMergeConflicts(activeFile.content).length} Git Merge Conflict(s) Detected in this file!
+                    </span>
+                  </div>
+                  <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
+                    {parseMergeConflicts(activeFile.content).slice(0, 3).map((conflict, idx) => (
+                      <div 
+                        key={idx} 
+                        style={{ 
+                          backgroundColor: "#05070a", 
+                          border: "1px solid var(--border)", 
+                          borderRadius: "4px", 
+                          padding: "0.4rem 0.6rem", 
+                          display: "flex", 
+                          flexDirection: "column", 
+                          gap: "0.35rem",
+                          flex: "1 1 200px",
+                          maxWidth: "350px"
+                        }}
+                      >
+                        <div style={{ fontSize: "0.7rem", color: "var(--muted)", fontWeight: 600 }}>Conflict Block #{idx + 1}</div>
+                        <div style={{ display: "flex", gap: "0.25rem" }}>
+                          <button
+                            onClick={() => {
+                              const newContent = activeFile.content.replace(conflict.rawText, conflict.current);
+                              handleContentChange(newContent);
+                            }}
+                            style={{
+                              padding: "0.2rem 0.4rem",
+                              borderRadius: "3px",
+                              backgroundColor: "var(--primary)",
+                              color: "#fff",
+                              border: "none",
+                              fontSize: "0.7rem",
+                              cursor: "pointer"
+                            }}
+                          >
+                            Accept Current
+                          </button>
+                          <button
+                            onClick={() => {
+                              const newContent = activeFile.content.replace(conflict.rawText, conflict.incoming);
+                              handleContentChange(newContent);
+                            }}
+                            style={{
+                              padding: "0.2rem 0.4rem",
+                              borderRadius: "3px",
+                              backgroundColor: "#10b981",
+                              color: "#fff",
+                              border: "none",
+                              fontSize: "0.7rem",
+                              cursor: "pointer"
+                            }}
+                          >
+                            Accept Incoming
+                          </button>
+                          <button
+                            onClick={() => {
+                              const newContent = activeFile.content.replace(conflict.rawText, conflict.current + "\n" + conflict.incoming);
+                              handleContentChange(newContent);
+                            }}
+                            style={{
+                              padding: "0.2rem 0.4rem",
+                              borderRadius: "3px",
+                              backgroundColor: "transparent",
+                              color: "var(--foreground)",
+                              border: "1px solid var(--border)",
+                              fontSize: "0.7rem",
+                              cursor: "pointer"
+                            }}
+                          >
+                            Accept Both
+                          </button>
+                        </div>
+                      </div>
+                    ))}
+                    {parseMergeConflicts(activeFile.content).length > 3 && (
+                      <div style={{ display: "flex", alignItems: "center", fontSize: "0.75rem", color: "var(--muted)" }}>
+                        + {parseMergeConflicts(activeFile.content).length - 3} more conflict blocks...
+                      </div>
+                    )}
                   </div>
-                ) : currentMode === 'split' ? (
-                  <div style={{ display: "flex", width: "100%", height: "100%", overflow: "hidden" }}>
-                    <div style={{ flex: 1, height: "100%" }}>
+                </div>
+              )}
+
+              <div style={{ flex: 1, minHeight: 0, position: "relative", width: "100%", height: "100%" }}>
+                {activeFile ? (
+                  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%" }}>
+                          <MonacoEditor
+                            height="100%"
+                            language="markdown"
+                            theme="neural-loom-dark"
+                            value={activeFile.content}
+                            onChange={(value) => handleContentChange(value || "")}
+                            beforeMount={handleEditorWillMount}
+                            options={editorOptions}
+                            loading={<div style={{ padding: "1rem", color: "var(--muted)" }}>Loading Editor...</div>}
+                          />
+                        </div>
+                        <div style={{ flex: 1, height: "100%", overflow: "hidden" }}>
+                          <MarkdownPreview content={activeFile.content} />
+                        </div>
+                      </div>
+                    ) : (
                       <MonacoEditor
                         height="100%"
                         language="markdown"
@@ -2238,47 +2643,33 @@ export default function IdeLayout({ sessionId, workspaceRoot, scopedDirs, onClos
                         options={editorOptions}
                         loading={<div style={{ padding: "1rem", color: "var(--muted)" }}>Loading Editor...</div>}
                       />
-                    </div>
-                    <div style={{ flex: 1, height: "100%", overflow: "hidden" }}>
-                      <MarkdownPreview content={activeFile.content} />
-                    </div>
-                  </div>
+                    )
+                  ) : (
+                    <MonacoEditor
+                      height="100%"
+                      language={getEditorLanguage(activeFile.path)}
+                      theme="neural-loom-dark"
+                      value={activeFile.content}
+                      onChange={(value) => handleContentChange(value || "")}
+                      beforeMount={handleEditorWillMount}
+                      options={editorOptions}
+                      loading={<div style={{ padding: "1rem", color: "var(--muted)" }}>Loading Editor...</div>}
+                    />
+                  )
                 ) : (
-                  <MonacoEditor
-                    height="100%"
-                    language="markdown"
-                    theme="neural-loom-dark"
-                    value={activeFile.content}
-                    onChange={(value) => handleContentChange(value || "")}
-                    beforeMount={handleEditorWillMount}
-                    options={editorOptions}
-                    loading={<div style={{ padding: "1rem", color: "var(--muted)" }}>Loading Editor...</div>}
-                  />
-                )
-              ) : (
-                <MonacoEditor
-                  height="100%"
-                  language={getEditorLanguage(activeFile.path)}
-                  theme="neural-loom-dark"
-                  value={activeFile.content}
-                  onChange={(value) => handleContentChange(value || "")}
-                  beforeMount={handleEditorWillMount}
-                  options={editorOptions}
-                  loading={<div style={{ padding: "1rem", color: "var(--muted)" }}>Loading Editor...</div>}
-                />
-              )
-            ) : (
-              <div style={emptyEditorStateStyle}>
-                <div style={{ fontSize: "2rem", marginBottom: "1rem" }}>💻</div>
-                <h4 style={{ margin: 0, fontWeight: 600 }}>NeuralLoom Workspace Editor</h4>
-                <p style={{ margin: "0.5rem 0 0 0", color: "var(--muted)", fontSize: "0.8rem" }}>
-                  Select files from the left explorer panel to view and edit. Use Ctrl+S to save changes.
-                </p>
-                <p style={{ margin: "0.5rem 0 0 0", color: "var(--muted)", fontSize: "0.75rem", fontStyle: "italic" }}>
-                  Press <kbd style={{ background: "rgba(255,255,255,0.1)", padding: "2px 4px", borderRadius: "3px" }}>Ctrl+P</kbd> to search files.
-                </p>
+                  <div style={emptyEditorStateStyle}>
+                    <div style={{ fontSize: "2rem", marginBottom: "1rem" }}>💻</div>
+                    <h4 style={{ margin: 0, fontWeight: 600 }}>NeuralLoom Workspace Editor</h4>
+                    <p style={{ margin: "0.5rem 0 0 0", color: "var(--muted)", fontSize: "0.8rem" }}>
+                      Select files from the left explorer panel to view and edit. Use Ctrl+S to save changes.
+                    </p>
+                    <p style={{ margin: "0.5rem 0 0 0", color: "var(--muted)", fontSize: "0.75rem", fontStyle: "italic" }}>
+                      Press <kbd style={{ background: "rgba(255,255,255,0.1)", padding: "2px 4px", borderRadius: "3px" }}>Ctrl+P</kbd> to search files.
+                    </p>
+                  </div>
+                )}
               </div>
-            )}
+            </div>
           </div>
         </div>
 
@@ -2306,9 +2697,94 @@ export default function IdeLayout({ sessionId, workspaceRoot, scopedDirs, onClos
         <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" }}>
-              🖥️ Session Console Bridge {splitSessionId && `(Split View Active)`}
-            </span>
+            <div style={{ display: "flex", alignItems: "flex-end", gap: "0.25rem", height: "100%", overflowX: "auto" }}>
+              <div 
+                style={{
+                  padding: "0.25rem 0.75rem",
+                  backgroundColor: consoleSessionId === sessionId ? "#0f131a" : "transparent",
+                  border: "1px solid " + (consoleSessionId === sessionId ? "var(--border-focus)" : "transparent"),
+                  borderBottom: consoleSessionId === sessionId ? "1px solid #0f131a" : "none",
+                  borderRadius: "4px 4px 0 0",
+                  color: consoleSessionId === sessionId ? "var(--foreground)" : "var(--muted)",
+                  fontSize: "0.75rem",
+                  fontWeight: consoleSessionId === sessionId ? 600 : 500,
+                  cursor: "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "0.5rem",
+                  height: "100%",
+                  position: "relative",
+                  top: "1px"
+                }}
+                onClick={() => setConsoleSessionId(sessionId)}
+              >
+                🤖 {activeSession?.name || "Agent PTY"}
+              </div>
+              {workspaceShells.map((shell) => (
+                <div 
+                  key={shell.id}
+                  style={{
+                    padding: "0.25rem 0.75rem",
+                    backgroundColor: consoleSessionId === shell.id ? "#0f131a" : "transparent",
+                    border: "1px solid " + (consoleSessionId === shell.id ? "var(--border-focus)" : "transparent"),
+                    borderBottom: consoleSessionId === shell.id ? "1px solid #0f131a" : "none",
+                    borderRadius: "4px 4px 0 0",
+                    color: consoleSessionId === shell.id ? "var(--foreground)" : "var(--muted)",
+                    fontSize: "0.75rem",
+                    fontWeight: consoleSessionId === shell.id ? 600 : 500,
+                    cursor: "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "0.5rem",
+                    height: "100%",
+                    position: "relative",
+                    top: "1px"
+                  }}
+                  onClick={() => setConsoleSessionId(shell.id)}
+                >
+                  🐚 {shell.name}
+                  <button 
+                    onClick={(e) => handleCloseShell(shell.id, e)}
+                    style={{
+                      background: "none",
+                      border: "none",
+                      color: "var(--danger)",
+                      fontSize: "0.7rem",
+                      cursor: "pointer",
+                      padding: "0 0.15rem",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      borderRadius: "3px"
+                    }}
+                    title="Close terminal tab"
+                  >
+                    ✖
+                  </button>
+                </div>
+              ))}
+              <button 
+                onClick={handleCreateShell}
+                style={{
+                  background: "rgba(255,255,255,0.03)",
+                  border: "1px solid var(--border)",
+                  borderRadius: "4px",
+                  color: "var(--muted)",
+                  fontSize: "0.8rem",
+                  padding: "0.1rem 0.4rem",
+                  cursor: "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  marginLeft: "0.5rem",
+                  height: "20px",
+                  alignSelf: "center"
+                }}
+                title="Open new terminal tab"
+              >
+                +
+              </button>
+            </div>
             
             <div style={{ display: "flex", gap: "0.5rem", alignItems: "center" }}>
               {activeSession?.status === "stopped" && (
@@ -2442,7 +2918,7 @@ export default function IdeLayout({ sessionId, workspaceRoot, scopedDirs, onClos
 
           <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} />
+              <TerminalConsole sessionId={consoleSessionId} height="100%" wsPort={wsPort} />
             </div>
             {splitSessionId && (
               <div style={{ flex: 1, height: "100%", overflow: "hidden", display: "flex", flexDirection: "column" }}>
@@ -3393,6 +3869,7 @@ function BrowserView({ url }: BrowserViewProps) {
   const [refreshKey, setRefreshKey] = useState(0);
 
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setCurrentUrl(url);
     setIframeUrl(url);
   }, [url]);
@@ -3527,17 +4004,21 @@ function BrowserView({ url }: BrowserViewProps) {
   );
 }
 
-interface DiffViewProps {
+interface ParsedDiffLine {
+  type: 'meta' | 'header' | 'hunk' | 'addition' | 'deletion' | 'normal';
   content: string;
-  filePath: string;
+  oldNum: number | null;
+  newNum: number | null;
+  raw: string;
 }
 
-function DiffView({ content, filePath }: DiffViewProps) {
-  const lines = content.split(/\r?\n/);
-  
+function parseDiffLines(lines: string[]): {
+  parsedLines: ParsedDiffLine[];
+  additions: number;
+  deletions: number;
+} {
   let oldLineNum = 0;
   let newLineNum = 0;
-  
   let additions = 0;
   let deletions = 0;
   
@@ -3587,6 +4068,21 @@ function DiffView({ content, filePath }: DiffViewProps) {
       raw: line
     };
   });
+  
+  return { parsedLines, additions, deletions };
+}
+
+interface DiffViewProps {
+  content: string;
+  filePath: string;
+}
+
+function DiffView({ content, filePath }: DiffViewProps) {
+  const lines = content.split(/\r?\n/);
+  
+  const { parsedLines, additions, deletions } = useMemo(() => {
+    return parseDiffLines(lines);
+  }, [lines]);
 
   return (
     <div style={{ display: "flex", flexDirection: "column", height: "100%", backgroundColor: "#0b101b" }}>