neural-loom 0.2.60 → 0.2.62

package/src/app/page.tsx

@@ -8,7 +8,7 @@ import DbExplorer from "./components/DbExplorer";
 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;
@@ -87,6 +87,16 @@ const IdeLayout = dynamic(() => import("./components/IdeLayout"), {
   ssr: false,
 });
 
+interface SavedConfig {
+  id: string;
+  name: string;
+  type: 'mock' | 'claude' | 'claude-docker' | 'claude-ssh' | 'aider' | 'aider-docker' | 'shell';
+  workspaceRoot?: string;
+  scopedDirs?: string[];
+  extraFlags?: string;
+  createdAt: string;
+}
+
 export default function Home() {
   const [sessions, setSessions] = useState<RunnerStatus[]>([]);
   const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
@@ -97,7 +107,7 @@ export default function Home() {
   const [isClaudeWizardOpen, setIsClaudeWizardOpen] = useState<boolean>(false);
   const [isClaudeDockerLaunch, setIsClaudeDockerLaunch] = useState<boolean>(false);
   const [serverCwd, setServerCwd] = useState<string>("");
-  const [wsPort, setWsPort] = useState<number>(3001);
+  const [wsPort, setWsPort] = useState<number>(9601);
   const [appVersion, setAppVersion] = useState<string>("0.2.19");
   const [lastSessionConfig, setLastSessionConfig] = useState<{
     type: 'mock' | 'claude' | 'claude-docker' | 'claude-ssh' | 'aider' | 'aider-docker';
@@ -105,6 +115,7 @@ export default function Home() {
     workspaceRoot?: string;
     scopedDirs?: string[];
   } | null>(null);
+  const [configs, setConfigs] = useState<SavedConfig[]>([]);
 
   const activeAgents = sessions.filter(s => s.id !== "workspace-terminal");
   const activeSession = sessions.find(s => s.id === activeSessionId);
@@ -147,10 +158,25 @@ export default function Home() {
     }
   };
 
+  const fetchConfigs = async () => {
+    try {
+      const res = await fetch("/api/configs");
+      if (res.ok) {
+        const data = await res.json();
+        if (data.configs) {
+          setConfigs(data.configs);
+        }
+      }
+    } catch (err) {
+      console.error("Failed to fetch configs:", err);
+    }
+  };
+
   useEffect(() => {
     const initFetch = async () => {
       await fetchSessions();
       await fetchRecents();
+      await fetchConfigs();
     };
     initFetch();
     
@@ -219,6 +245,7 @@ export default function Home() {
       const data = await res.json();
       if (data.success) {
         await fetchSessions();
+        await fetchConfigs(); // Refresh configs list in case a template was saved
         setActiveSessionId(data.session.id);
         setLastSessionConfig({ type, name: sessionName, workspaceRoot: customWorkspaceRoot, scopedDirs: customScopedDirs });
       }
@@ -229,6 +256,55 @@ export default function Home() {
     }
   };
 
+  const handleLaunchFromConfig = async (config: SavedConfig) => {
+    setIsLoading(true);
+    try {
+      const res = await fetch("/api/sessions/launch", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          type: config.type,
+          name: config.name,
+          workspaceRoot: config.workspaceRoot,
+          scopedDirs: config.scopedDirs
+        })
+      });
+      const data = await res.json();
+      if (data.success) {
+        await fetchSessions();
+        setActiveSessionId(data.session.id);
+      } else {
+        alert(data.error || "Failed to launch configuration.");
+      }
+    } catch (err) {
+      console.error(err);
+      alert("Network error: failed to launch configuration.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleDeleteConfig = async (id: string) => {
+    if (!window.confirm("Are you sure you want to delete this configuration template?")) {
+      return;
+    }
+    try {
+      const res = await fetch("/api/configs", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "delete", id })
+      });
+      if (res.ok) {
+        await fetchConfigs();
+      } else {
+        alert("Failed to delete configuration template.");
+      }
+    } catch (err) {
+      console.error(err);
+      alert("Network error: failed to delete configuration template.");
+    }
+  };
+
   // Stop/Disconnect Session
   const handleStopSession = async (id: string, deletePermanently = false) => {
     try {
@@ -283,447 +359,504 @@ export default function Home() {
       ) : (
         <div className={styles.dashboardGrid}>
         
-        {/* Left Panel: Active Agents & Interactive Terminal */}
-        <main className={styles.mainPanel}>
-          <section>
-            <h2 className={styles.sectionTitle}>Active AI Agents</h2>
-            
-            {activeAgents.length === 0 ? (
-              <div className="card" style={{ padding: "3rem 1.5rem", textAlign: "center" }}>
-                <p style={{ color: "var(--muted)", marginBottom: "1.5rem" }}>
-                  No active agent sessions in this workspace. Launch a Claude or Aider agent session to begin.
-                </p>
-                <div style={{ display: "flex", gap: "1rem", justifyContent: "center", flexWrap: "wrap" }}>
-                  {lastSessionConfig && (
-                    <button 
-                      className={styles.quickLaunchBtn} 
-                      onClick={() => {
-                        handleLaunchSession(
-                          lastSessionConfig.type,
-                          lastSessionConfig.name,
-                          lastSessionConfig.workspaceRoot,
-                          lastSessionConfig.scopedDirs
-                        );
-                      }}
-                      disabled={isLoading}
-                      style={{
-                        background: "linear-gradient(135deg, hsl(38, 92%, 50%) 0%, hsl(0, 84%, 60%) 100%)",
-                        border: "none",
-                        maxWidth: "200px"
-                      }}
-                      title={`Re-launch: ${lastSessionConfig.name || lastSessionConfig.type}`}
-                    >
-                      ⚡ Re-launch Last Session
-                    </button>
-                  )}
-                  <button 
-                    className={styles.quickLaunchBtn} 
-                    onClick={() => {
-                      setIsClaudeDockerLaunch(false);
-                      setIsClaudeWizardOpen(true);
+          {/* Column 1: Built-in Database Explorer & Shared Context Hub */}
+          <div className={styles.mainPanel}>
+            {/* Database Explorer Section */}
+            <section>
+              <h2 className={styles.sectionTitle}>Built-in Database Explorer & SQL Client</h2>
+              <div className="card" style={{ padding: 0, overflow: "hidden", height: "450px", border: "1px solid var(--border)" }}>
+                <DbExplorer workspaceRoot={serverCwd || ""} />
+              </div>
+            </section>
+
+            {/* Context Hub Staging section */}
+            <section style={{ marginTop: "1.5rem" }}>
+              <h2 className={styles.sectionTitle}>Shared Context Hub & Slash Commands</h2>
+              <div className={styles.contextList}>
+                <div className={`${styles.contextItem} card`}>
+                  <div className={styles.contextMeta}>
+                    <span className={styles.contextTitle}>Staged Context & System Rules (/ccc)</span>
+                    <span className={styles.contextDetails}>Compiles AGENTS.md guidelines and files map.</span>
+                  </div>
+                  <button
+                    onClick={async () => {
+                      if (!activeSessionId) return;
+                      await fetch("/api/sessions/inject", {
+                        method: "POST",
+                        headers: { "Content-Type": "application/json" },
+                        body: JSON.stringify({ id: activeSessionId, command: "/ccc" })
+                      });
                     }}
-                    disabled={isLoading}
+                    disabled={!activeSessionId}
                     style={{
-                      background: "linear-gradient(135deg, hsl(262, 83%, 60%) 0%, hsl(195, 100%, 45%) 100%)",
-                      border: "none",
-                      maxWidth: "200px"
+                      padding: "0.4rem 0.8rem",
+                      borderRadius: "6px",
+                      border: "1px solid var(--primary)",
+                      backgroundColor: "transparent",
+                      color: "var(--primary)",
+                      fontSize: "0.75rem",
+                      fontWeight: 600,
+                      opacity: activeSessionId ? 1 : 0.5,
+                      cursor: activeSessionId ? "pointer" : "not-allowed"
                     }}
                   >
-                    Launch Claude PTY
+                    🚀 Mount (/ccc)
                   </button>
-                  <button 
-                    className={styles.quickLaunchBtn} 
-                    onClick={() => {
-                      setIsAiderDockerLaunch(false);
-                      setIsAiderWizardOpen(true);
+                </div>
+                
+                <div className={`${styles.contextItem} card`}>
+                  <div className={styles.contextMeta}>
+                    <span className={styles.contextTitle}>Staged Developer Prompt (/ccp)</span>
+                    <span className={styles.contextDetails}>Executes prompt in .ai/neural-loom/cprompt.md.</span>
+                  </div>
+                  <button
+                    onClick={async () => {
+                      if (!activeSessionId) return;
+                      await fetch("/api/sessions/inject", {
+                        method: "POST",
+                        headers: { "Content-Type": "application/json" },
+                        body: JSON.stringify({ id: activeSessionId, command: "/ccp" })
+                      });
                     }}
-                    disabled={isLoading}
+                    disabled={!activeSessionId}
                     style={{
-                      background: "linear-gradient(135deg, hsl(210, 80%, 45%) 0%, hsl(262, 80%, 55%) 100%)",
-                      border: "none",
-                      maxWidth: "200px"
+                      padding: "0.4rem 0.8rem",
+                      borderRadius: "6px",
+                      border: "1px solid var(--success)",
+                      backgroundColor: "transparent",
+                      color: "var(--success)",
+                      fontSize: "0.75rem",
+                      fontWeight: 600,
+                      opacity: activeSessionId ? 1 : 0.5,
+                      cursor: activeSessionId ? "pointer" : "not-allowed"
                     }}
                   >
-                    Launch Aider PTY
+                    ⚡ Run (/ccp)
                   </button>
                 </div>
-                <div style={{ marginTop: "1.5rem", fontSize: "0.75rem", color: "var(--muted)" }}>
-                  Want to verify layout features first?{" "}
-                  <span 
-                    onClick={() => handleLaunchSession('mock')} 
-                    style={{ color: "var(--primary)", cursor: "pointer", textDecoration: "underline" }}
-                  >
-                    Start simulated sandbox session
-                  </span>
-                </div>
               </div>
-            ) : (
-              <div className={styles.agentGrid}>
-                {activeAgents.map(session => (
-                  <div key={session.id} className={`${styles.agentCard} card ${activeSessionId === session.id ? styles.activeBorder : ""}`}>
-                    <div className={styles.agentHeader}>
-                      <span className={styles.agentName}>{session.name}</span>
-                      <div style={{ display: "flex", gap: "0.35rem", alignItems: "center" }}>
-                        {session.status === 'running' && session.agentState && (
-                          <span className={`${styles.agentStateBadge} ${styles['state-' + session.agentState]}`}>
-                            {session.agentState === 'thinking' && `${getModeIcon(session.type)} 💭 thinking`}
-                            {session.agentState === 'needs-input' && `${getModeIcon(session.type)} ⚠️ needs input`}
-                            {session.agentState === 'complete' && `${getModeIcon(session.type)} ✅ complete`}
-                            {session.agentState === 'idle' && `${getModeIcon(session.type)} 💤 idle`}
+              <ContextEditor />
+            </section>
+          </div>
+
+          {/* Column 2: Active Agents & Console Panel */}
+          <div className={styles.mainPanel}>
+            <section>
+              <h2 className={styles.sectionTitle}>Active AI Agents</h2>
+              
+              {activeAgents.length === 0 ? (
+                <div className="card" style={{ padding: "3rem 1.5rem", textAlign: "center" }}>
+                  <p style={{ color: "var(--muted)", marginBottom: "1.5rem" }}>
+                    No active agent sessions. Launch a Claude or Aider agent session to begin.
+                  </p>
+                  <div style={{ display: "flex", gap: "0.75rem", flexDirection: "column" }}>
+                    {lastSessionConfig && (
+                      <button 
+                        className={styles.quickLaunchBtn} 
+                        onClick={() => {
+                          handleLaunchSession(
+                            lastSessionConfig.type,
+                            lastSessionConfig.name,
+                            lastSessionConfig.workspaceRoot,
+                            lastSessionConfig.scopedDirs
+                          );
+                        }}
+                        disabled={isLoading}
+                        style={{
+                          background: "linear-gradient(135deg, hsl(38, 92%, 50%) 0%, hsl(0, 84%, 60%) 100%)",
+                          border: "none"
+                        }}
+                        title={`Re-launch: ${lastSessionConfig.name || lastSessionConfig.type}`}
+                      >
+                        ⚡ Re-launch Last Session
+                      </button>
+                    )}
+                    <div style={{ display: "flex", gap: "0.5rem" }}>
+                      <button 
+                        className={styles.quickLaunchBtn} 
+                        onClick={() => {
+                          setIsClaudeDockerLaunch(false);
+                          setIsClaudeWizardOpen(true);
+                        }}
+                        disabled={isLoading}
+                        style={{
+                          background: "linear-gradient(135deg, hsl(262, 83%, 60%) 0%, hsl(195, 100%, 45%) 100%)",
+                          border: "none",
+                          flex: 1
+                        }}
+                      >
+                        Launch Claude
+                      </button>
+                      <button 
+                        className={styles.quickLaunchBtn} 
+                        onClick={() => {
+                          setIsAiderDockerLaunch(false);
+                          setIsAiderWizardOpen(true);
+                        }}
+                        disabled={isLoading}
+                        style={{
+                          background: "linear-gradient(135deg, hsl(210, 80%, 45%) 0%, hsl(262, 80%, 55%) 100%)",
+                          border: "none",
+                          flex: 1
+                        }}
+                      >
+                        Launch Aider
+                      </button>
+                    </div>
+                  </div>
+                  <div style={{ marginTop: "1.5rem", fontSize: "0.75rem", color: "var(--muted)" }}>
+                    Need a simulator?{" "}
+                    <span 
+                      onClick={() => handleLaunchSession('mock')} 
+                      style={{ color: "var(--primary)", cursor: "pointer", textDecoration: "underline" }}
+                    >
+                      Start mock playground
+                    </span>
+                  </div>
+                </div>
+              ) : (
+                <div className={styles.agentGrid}>
+                  {activeAgents.map(session => (
+                    <div key={session.id} className={`${styles.agentCard} card ${activeSessionId === session.id ? styles.activeBorder : ""}`}>
+                      <div className={styles.agentHeader}>
+                        <span className={styles.agentName}>{session.name}</span>
+                        <div style={{ display: "flex", gap: "0.35rem", alignItems: "center" }}>
+                          {session.status === 'running' && session.agentState && (
+                            <span className={`${styles.agentStateBadge} ${styles['state-' + session.agentState]}`}>
+                              {session.agentState === 'thinking' && `${getModeIcon(session.type)} 💭`}
+                              {session.agentState === 'needs-input' && `${getModeIcon(session.type)} ⚠️`}
+                              {session.agentState === 'complete' && `${getModeIcon(session.type)} ✅`}
+                              {session.agentState === 'idle' && `${getModeIcon(session.type)} 💤`}
+                            </span>
+                          )}
+                          <span className={`${styles.agentBadge} ${session.status === 'stopped' ? styles.stoppedBadge : ""}`}>
+                            {session.status}
                           </span>
-                        )}
-                        <span className={`${styles.agentBadge} ${session.status === 'stopped' ? styles.stoppedBadge : ""}`}>
-                          {session.status}
-                        </span>
+                        </div>
                       </div>
-                    </div>
-                    <div className={styles.cardBody}>
-                      <p style={{ fontSize: "0.825rem", color: "var(--muted)" }}>
-                        ID: <code style={{ fontSize: "0.75rem" }}>{session.id.substring(0, 8)}</code><br />
-                        Type: {
-                          session.type === 'claude' ? "Claude Local PTY" :
-                          session.type === 'claude-docker' ? "Claude Docker PTY" :
-                          session.type === 'claude-ssh' ? "Claude SSH PTY" :
-                          session.type === 'aider' ? "Aider Local PTY" :
-                          session.type === 'aider-docker' ? "Aider Docker PTY" :
-                          session.type === 'mock' ? "Simulated Mock PTY" : "Unknown PTY"
-                        }<br />
-                        Logs: {session.logsCount} captured lines
-                      </p>
-                      
-                      <div style={{ display: "flex", gap: "0.5rem", marginTop: "1rem" }}>
-                        {session.status === 'running' ? (
+                      <div className={styles.cardBody} style={{ padding: "1rem" }}>
+                        <p style={{ fontSize: "0.8rem", color: "var(--muted)", margin: 0 }}>
+                          ID: <code style={{ fontSize: "0.72rem" }}>{session.id.substring(0, 8)}</code> | Type: {session.type}<br />
+                          Logs: {session.logsCount} lines
+                        </p>
+                        
+                        <div style={{ display: "flex", gap: "0.5rem", marginTop: "0.75rem" }}>
+                          {session.status === 'running' ? (
+                            <button 
+                              onClick={() => handleStopSession(session.id, false)}
+                              style={{
+                                flex: 1,
+                                padding: "0.35rem",
+                                borderRadius: "6px",
+                                border: "1px solid var(--danger)",
+                                backgroundColor: "transparent",
+                                fontSize: "0.75rem",
+                                color: "var(--danger)",
+                                cursor: "pointer"
+                              }}
+                            >Stop</button>
+                          ) : (
+                            <button 
+                              onClick={() => handleStopSession(session.id, true)}
+                              style={{
+                                flex: 1,
+                                padding: "0.35rem",
+                                borderRadius: "6px",
+                                border: "1px solid var(--border)",
+                                backgroundColor: "transparent",
+                                fontSize: "0.75rem",
+                                color: "var(--muted)",
+                                cursor: "pointer"
+                              }}
+                            >Delete</button>
+                          )}
                           <button 
-                            onClick={() => handleStopSession(session.id, false)}
+                            onClick={() => setActiveSessionId(session.id)}
                             style={{
-                              flex: 1,
-                              padding: "0.4rem 0.6rem",
+                              flex: 2,
+                              padding: "0.35rem",
                               borderRadius: "6px",
-                              border: "1px solid var(--danger)",
-                              backgroundColor: "transparent",
-                              fontSize: "0.75rem",
-                              fontWeight: 600,
-                              color: "var(--danger)"
-                            }}
-                          >Stop</button>
-                        ) : (
-                          <button 
-                            onClick={() => handleStopSession(session.id, true)}
-                            style={{
-                              flex: 1,
-                              padding: "0.4rem 0.6rem",
-                              borderRadius: "6px",
-                              border: "1px solid var(--border)",
-                              backgroundColor: "transparent",
+                              border: "none",
+                              backgroundColor: activeSessionId === session.id ? "var(--border-focus)" : "var(--primary)",
                               fontSize: "0.75rem",
                               fontWeight: 600,
-                              color: "var(--muted)"
+                              color: "#fff",
+                              cursor: "pointer"
                             }}
-                          >Delete</button>
-                        )}
-                        <button 
-                          onClick={() => setActiveSessionId(session.id)}
-                          style={{
-                            flex: 2,
-                            padding: "0.4rem 0.6rem",
-                            borderRadius: "6px",
-                            border: "none",
-                            backgroundColor: activeSessionId === session.id ? "var(--border-focus)" : "var(--primary)",
-                            fontSize: "0.75rem",
-                            fontWeight: 600,
-                            color: "#fff"
-                          }}
-                        >
-                          {activeSessionId === session.id ? "Connected" : "Open Session"}
-                        </button>
+                          >
+                            {activeSessionId === session.id ? "Connected" : "Open Console"}
+                          </button>
+                        </div>
                       </div>
                     </div>
-                  </div>
-                ))}
-              </div>
-            )}
-          </section>
-
-          {/* Interactive Session Terminal Display */}
-          {activeSessionId && activeSessionId !== "workspace-terminal" && (
-            <section className="card" style={{ display: "flex", flexDirection: "column", border: "1px solid var(--border-focus)" }}>
-              <div className={styles.agentHeader} style={{ justifyContent: "space-between", background: "rgba(109, 40, 217, 0.08)" }}>
-                <span style={{ fontWeight: 600, display: "flex", alignItems: "center", gap: "0.5rem" }}>
-                  🖥️ Console Bridge — {sessions.find(s => s.id === activeSessionId)?.name}
-                </span>
-                <div style={{ display: "flex", gap: "0.5rem", alignItems: "center" }}>
-                  {sessions.find(s => s.id === activeSessionId)?.status === "stopped" && (
-                    <button
-                      onClick={async () => {
-                        try {
-                          const res = await fetch("/api/sessions/start", {
-                            method: "POST",
-                            headers: { "Content-Type": "application/json" },
-                            body: JSON.stringify({ id: activeSessionId }),
-                          });
-                          if (res.ok) {
-                            await fetchSessions();
-                          } else {
-                            const data = await res.json();
-                            alert(data.error || "Failed to restart session.");
+                  ))}
+                </div>
+              )}
+            </section>
+
+            {/* Interactive Session Terminal Display */}
+            {activeSessionId && activeSessionId !== "workspace-terminal" && (
+              <section className="card" style={{ display: "flex", flexDirection: "column", border: "1px solid var(--border-focus)", marginTop: "1rem" }}>
+                <div className={styles.agentHeader} style={{ justifyContent: "space-between", background: "rgba(109, 40, 217, 0.08)", padding: "0.5rem 1rem" }}>
+                  <span style={{ fontWeight: 600, fontSize: "0.85rem", display: "flex", alignItems: "center", gap: "0.5rem" }}>
+                    🖥️ Console — {sessions.find(s => s.id === activeSessionId)?.name}
+                  </span>
+                  <div style={{ display: "flex", gap: "0.5rem", alignItems: "center" }}>
+                    {sessions.find(s => s.id === activeSessionId)?.status === "stopped" && (
+                      <button
+                        onClick={async () => {
+                          try {
+                            const activeSess = sessions.find(s => s.id === activeSessionId);
+                            const isClaude = activeSess && (activeSess.type === 'claude' || activeSess.type === 'claude-docker' || activeSess.type === 'claude-ssh');
+                            let resume = false;
+                            if (isClaude) {
+                              resume = window.confirm("Would you like to resume your previous Claude session?");
+                            }
+
+                            const res = await fetch("/api/sessions/start", {
+                              method: "POST",
+                              headers: { "Content-Type": "application/json" },
+                              body: JSON.stringify({ id: activeSessionId, resume }),
+                            });
+                            if (res.ok) {
+                              await fetchSessions();
+                            } else {
+                              const data = await res.json();
+                              alert(data.error || "Failed to restart session.");
+                            }
+                          } catch (err) {
+                            console.error("Failed to restart session:", err);
                           }
-                        } catch (err) {
-                          console.error("Failed to restart session:", err);
-                          alert("Network error: failed to restart session.");
-                        }
-                      }}
+                        }}
+                        style={{
+                          padding: "0.15rem 0.4rem",
+                          borderRadius: "4px",
+                          border: "1px solid #eab308",
+                          backgroundColor: "rgba(234, 179, 8, 0.15)",
+                          color: "#eab308",
+                          fontSize: "0.65rem",
+                          fontWeight: 600,
+                          cursor: "pointer",
+                        }}
+                      >
+                        ⚡ Restart
+                      </button>
+                    )}
+                    <button 
+                      onClick={() => setActiveSessionId(null)}
                       style={{
-                        padding: "0.2rem 0.5rem",
-                        borderRadius: "4px",
-                        border: "1px solid #eab308",
-                        backgroundColor: "rgba(234, 179, 8, 0.15)",
-                        color: "#eab308",
-                        fontSize: "0.7rem",
-                        fontWeight: 600,
+                        border: "none",
+                        background: "none",
+                        color: "var(--muted)",
                         cursor: "pointer",
-                        boxShadow: "0 0 8px rgba(234, 179, 8, 0.2)",
+                        fontSize: "0.75rem"
                       }}
-                      title="Restart the stopped session process runner"
-                    >
-                      ⚡ Restart Session
-                    </button>
-                  )}
-                  <button 
-                    onClick={() => setActiveSessionId(null)}
-                    style={{
-                      border: "none",
-                      background: "none",
-                      color: "var(--muted)",
-                      cursor: "pointer",
-                      fontSize: "0.75rem"
-                    }}
-                  >Close Panel ✖</button>
+                    >✖</button>
+                  </div>
+                </div>
+                <TerminalConsole sessionId={activeSessionId} wsPort={wsPort} />
+              </section>
+            )}
+          </div>
+
+          {/* Column 3: Environments, Saved Templates, Workspace Terminal, Quick Actions */}
+          <div className={styles.sidePanel}>
+            {/* Execution Environments */}
+            <section>
+              <h2 className={styles.sectionTitle}>Execution Environments</h2>
+              <div className={styles.envGrid}>
+                <div className={styles.envRow} style={{ padding: "0.5rem 0.75rem" }}>
+                  <span className={styles.envName}>💻 Local Host</span>
+                  <span className={styles.envStatus} style={{ color: "var(--success)" }}>Active</span>
+                </div>
+                <div className={styles.envRow} style={{ opacity: isDockerActive ? 1 : 0.6, padding: "0.5rem 0.75rem" }}>
+                  <span className={styles.envName}>🐳 Docker Sandbox</span>
+                  <span className={styles.envStatus} style={{ color: isDockerActive ? "var(--success)" : "var(--muted)" }}>
+                    {isDockerActive ? "Active" : "Not Mounted"}
+                  </span>
+                </div>
+                <div className={styles.envRow} style={{ opacity: isSshActive ? 1 : 0.6, padding: "0.5rem 0.75rem" }}>
+                  <span className={styles.envName}>🌐 Remote VM (SSH)</span>
+                  <span className={styles.envStatus} style={{ color: isSshActive ? "var(--success)" : "var(--muted)" }}>
+                    {isSshActive ? "Active" : "Offline"}
+                  </span>
                 </div>
               </div>
-              <TerminalConsole sessionId={activeSessionId} wsPort={wsPort} />
             </section>
-          )}
-
-          {/* Workspace Shell Terminal */}
-          <section>
-            <h2 className={styles.sectionTitle}>Workspace Shell Terminal</h2>
-            <div className="card" style={{ display: "flex", flexDirection: "column", border: "1px solid var(--border)", padding: 0 }}>
-              <div className={styles.agentHeader} style={{ justifyContent: "space-between", background: "rgba(255, 255, 255, 0.02)" }}>
-                <span style={{ fontWeight: 600, display: "flex", alignItems: "center", gap: "0.5rem", fontSize: "0.85rem" }}>
-                  💻 Local Workspace Shell (CWD: {serverCwd || "root"})
-                </span>
-                <span style={{ fontSize: "0.7rem", color: "var(--muted)" }}>Pre-configured environment</span>
+
+            {/* Saved Configurations Templates */}
+            <section>
+              <h2 className={styles.sectionTitle}>Saved Configurations</h2>
+              <div className="card" style={{ padding: "1rem", display: "flex", flexDirection: "column", gap: "0.75rem" }}>
+                {configs.length === 0 ? (
+                  <p style={{ color: "var(--muted)", fontSize: "0.8rem", textAlign: "center", margin: "1rem 0" }}>
+                    No configuration templates saved yet. Save a template from the Claude/Aider launch wizards.
+                  </p>
+                ) : (
+                  <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem", maxHeight: "200px", overflowY: "auto" }}>
+                    {configs.map((config) => (
+                      <div key={config.id} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", background: "rgba(255, 255, 255, 0.02)", padding: "0.5rem", borderRadius: "6px", border: "1px solid var(--border)" }}>
+                        <div style={{ display: "flex", flexDirection: "column", gap: "0.15rem", minWidth: 0 }}>
+                          <span style={{ fontSize: "0.8rem", fontWeight: 600, color: "var(--foreground)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{config.name}</span>
+                          <span style={{ fontSize: "0.65rem", color: "var(--muted)", textTransform: "uppercase" }}>{config.type}</span>
+                        </div>
+                        <div style={{ display: "flex", gap: "0.25rem" }}>
+                          <button
+                            onClick={() => handleLaunchFromConfig(config)}
+                            disabled={isLoading}
+                            style={{
+                              padding: "0.2rem 0.4rem",
+                              borderRadius: "4px",
+                              backgroundColor: "var(--primary)",
+                              color: "#fff",
+                              border: "none",
+                              fontSize: "0.7rem",
+                              cursor: "pointer"
+                            }}
+                          >Launch</button>
+                          <button
+                            onClick={() => handleDeleteConfig(config.id)}
+                            style={{
+                              padding: "0.2rem 0.4rem",
+                              borderRadius: "4px",
+                              backgroundColor: "transparent",
+                              color: "var(--danger)",
+                              border: "1px solid var(--danger)",
+                              fontSize: "0.7rem",
+                              cursor: "pointer"
+                            }}
+                          >Delete</button>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
               </div>
-              <TerminalConsole sessionId="workspace-terminal" height="300px" wsPort={wsPort} />
-            </div>
-          </section>
-
-          {/* Context Hub Staging section */}
-          <section style={{ marginTop: "2rem" }}>
-            <h2 className={styles.sectionTitle}>Shared Context Hub & Slash Commands</h2>
-            <div className={styles.contextList}>
-              <div className={`${styles.contextItem} card`}>
-                <div className={styles.contextMeta}>
-                  <span className={styles.contextTitle}>Staged Context & System Rules (/ccc)</span>
-                  <span className={styles.contextDetails}>Compiles AGENTS.md guidelines and project files folder hierarchy map.</span>
-                </div>
-                <button
-                  onClick={async () => {
-                    if (!activeSessionId) return;
-                    await fetch("/api/sessions/inject", {
-                      method: "POST",
-                      headers: { "Content-Type": "application/json" },
-                      body: JSON.stringify({ id: activeSessionId, command: "/ccc" })
-                    });
+            </section>
+
+            {/* Launch wizards buttons */}
+            <section style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+              <div style={{ display: "flex", gap: "0.5rem" }}>
+                <button 
+                  className={styles.quickLaunchBtn} 
+                  onClick={() => {
+                    setIsClaudeDockerLaunch(false);
+                    setIsClaudeWizardOpen(true);
+                  }} 
+                  disabled={isLoading}
+                  style={{
+                    background: "linear-gradient(135deg, hsl(262, 83%, 60%) 0%, hsl(195, 100%, 45%) 100%)",
+                    border: "none",
+                    padding: "0.6rem",
+                    fontSize: "0.8rem",
+                    flex: 1
                   }}
-                  disabled={!activeSessionId}
+                >
+                  🤖 Claude Local
+                </button>
+                <button 
+                  className={styles.quickLaunchBtn} 
+                  onClick={() => {
+                    setIsClaudeDockerLaunch(true);
+                    setIsClaudeWizardOpen(true);
+                  }} 
+                  disabled={isLoading}
                   style={{
-                    padding: "0.4rem 0.8rem",
-                    borderRadius: "6px",
-                    border: "1px solid var(--primary)",
-                    backgroundColor: "transparent",
-                    color: "var(--primary)",
-                    fontSize: "0.75rem",
-                    fontWeight: 600,
-                    opacity: activeSessionId ? 1 : 0.5,
-                    cursor: activeSessionId ? "pointer" : "not-allowed"
+                    background: "linear-gradient(135deg, hsl(170, 72%, 40%) 0%, hsl(195, 100%, 40%) 100%)",
+                    border: "none",
+                    padding: "0.6rem",
+                    fontSize: "0.8rem",
+                    flex: 1
                   }}
                 >
-                  🚀 Mount Context (/ccc)
+                  🐳 Claude Docker
                 </button>
               </div>
-              
-              <div className={`${styles.contextItem} card`}>
-                <div className={styles.contextMeta}>
-                  <span className={styles.contextTitle}>Staged Developer Prompt (/ccp)</span>
-                  <span className={styles.contextDetails}>Executes instructions written in .ai/neural-loom/cprompt.md.</span>
-                </div>
-                <button
-                  onClick={async () => {
-                    if (!activeSessionId) return;
-                    await fetch("/api/sessions/inject", {
-                      method: "POST",
-                      headers: { "Content-Type": "application/json" },
-                      body: JSON.stringify({ id: activeSessionId, command: "/ccp" })
-                    });
+              <div style={{ display: "flex", gap: "0.5rem" }}>
+                <button 
+                  className={styles.quickLaunchBtn} 
+                  onClick={() => {
+                    setIsAiderDockerLaunch(false);
+                    setIsAiderWizardOpen(true);
+                  }} 
+                  disabled={isLoading}
+                  style={{
+                    background: "linear-gradient(135deg, hsl(210, 80%, 45%) 0%, hsl(262, 80%, 55%) 100%)",
+                    border: "none",
+                    padding: "0.6rem",
+                    fontSize: "0.8rem",
+                    flex: 1
                   }}
-                  disabled={!activeSessionId}
+                >
+                  🐍 Aider Local
+                </button>
+                <button 
+                  className={styles.quickLaunchBtn} 
+                  onClick={() => {
+                    setIsAiderDockerLaunch(true);
+                    setIsAiderWizardOpen(true);
+                  }} 
+                  disabled={isLoading}
                   style={{
-                    padding: "0.4rem 0.8rem",
-                    borderRadius: "6px",
-                    border: "1px solid var(--success)",
-                    backgroundColor: "transparent",
-                    color: "var(--success)",
-                    fontSize: "0.75rem",
-                    fontWeight: 600,
-                    opacity: activeSessionId ? 1 : 0.5,
-                    cursor: activeSessionId ? "pointer" : "not-allowed"
+                    background: "linear-gradient(135deg, hsl(195, 100%, 40%) 0%, hsl(262, 80%, 55%) 100%)",
+                    border: "none",
+                    padding: "0.6rem",
+                    fontSize: "0.8rem",
+                    flex: 1
                   }}
                 >
-                  ⚡ Trigger Prompt (/ccp)
+                  🐳 Aider Docker
                 </button>
               </div>
-            </div>
-            <ContextEditor />
-          </section>
-
-          {/* Database Explorer Section */}
-          <section style={{ marginTop: "2rem" }}>
-            <h2 className={styles.sectionTitle}>Built-in Database Explorer & SQL Client</h2>
-            <div className="card" style={{ padding: 0, overflow: "hidden", height: "480px", border: "1px solid var(--border)" }}>
-              <DbExplorer workspaceRoot={serverCwd || ""} />
-            </div>
-          </section>
-        </main>
-
-        {/* Right Panel: Environments & Actions */}
-        <aside className={styles.sidePanel}>
-          <section>
-            <h2 className={styles.sectionTitle}>Execution Environments</h2>
-            <div className={styles.envGrid}>
-              <div className={styles.envRow}>
-                <span className={styles.envName}>💻 Local host OS</span>
-                <span className={styles.envStatus} style={{ color: "var(--success)" }}>Active</span>
-              </div>
-              <div className={styles.envRow} style={{ opacity: isDockerActive ? 1 : 0.6 }}>
-                <span className={styles.envName}>🐳 Docker Sandbox</span>
-                <span className={styles.envStatus} style={{ color: isDockerActive ? "var(--success)" : "var(--muted)" }}>
-                  {isDockerActive ? "Active" : "Not Mounted"}
-                </span>
-              </div>
-              <div className={styles.envRow} style={{ opacity: isSshActive ? 1 : 0.6 }}>
-                <span className={styles.envName}>🌐 Remote VM (SSH)</span>
-                <span className={styles.envStatus} style={{ color: isSshActive ? "var(--success)" : "var(--muted)" }}>
-                  {isSshActive ? "Active" : "Disconnected"}
-                </span>
-              </div>
-            </div>
-          </section>
-
-          <section style={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}>
-            <button 
-              className={styles.quickLaunchBtn} 
-              onClick={() => {
-                setIsClaudeDockerLaunch(false);
-                setIsClaudeWizardOpen(true);
-              }} 
-              disabled={isLoading}
-              style={{
-                background: "linear-gradient(135deg, hsl(262, 83%, 60%) 0%, hsl(195, 100%, 45%) 100%)",
-                border: "none"
-              }}
-            >
-              <span>🤖</span>
-              <span>Launch Claude PTY</span>
-            </button>
-            <button 
-              className={styles.quickLaunchBtn} 
-              onClick={() => {
-                setIsClaudeDockerLaunch(true);
-                setIsClaudeWizardOpen(true);
-              }} 
-              disabled={isLoading}
-              style={{
-                background: "linear-gradient(135deg, hsl(170, 72%, 40%) 0%, hsl(195, 100%, 40%) 100%)",
-                border: "none"
-              }}
-            >
-              <span>🐳</span>
-              <span>Launch Docker PTY</span>
-            </button>
-            <button 
-              className={styles.quickLaunchBtn} 
-              onClick={() => setIsSshWizardOpen(true)} 
-              disabled={isLoading}
-              style={{
-                background: "linear-gradient(135deg, hsl(38, 92%, 50%) 0%, hsl(0, 84%, 60%) 100%)",
-                border: "none"
-              }}
-            >
-              <span>🌐</span>
-              <span>Launch SSH PTY</span>
-            </button>
-            <button 
-              className={styles.quickLaunchBtn} 
-              onClick={() => {
-                setIsAiderDockerLaunch(false);
-                setIsAiderWizardOpen(true);
-              }} 
-              disabled={isLoading}
-              style={{
-                background: "linear-gradient(135deg, hsl(210, 80%, 45%) 0%, hsl(262, 80%, 55%) 100%)",
-                border: "none"
-              }}
-            >
-              <span>🐍</span>
-              <span>Launch Aider PTY</span>
-            </button>
-            <button 
-              className={styles.quickLaunchBtn} 
-              onClick={() => {
-                setIsAiderDockerLaunch(true);
-                setIsAiderWizardOpen(true);
-              }} 
-              disabled={isLoading}
-              style={{
-                background: "linear-gradient(135deg, hsl(195, 100%, 40%) 0%, hsl(262, 80%, 55%) 100%)",
-                border: "none"
-              }}
-            >
-              <span>🐳</span>
-              <span>Launch Aider Docker</span>
-            </button>
-          </section>
-
-          <section className="card" style={{ padding: "1.5rem", display: "flex", flexDirection: "column", gap: "0.75rem" }}>
-            <h3 style={{ fontSize: "1rem", fontWeight: 700 }}>Quick Actions</h3>
-            <ul style={{ listStyle: "none", fontSize: "0.875rem", display: "flex", flexDirection: "column", gap: "0.5rem", color: "var(--muted)" }}>
-              <li style={{ display: "flex", justifyContent: "space-between" }}>
-                <span>Configure global API Keys</span>
-                <span style={{ color: "var(--primary)", cursor: "pointer" }}>→</span>
-              </li>
-              <li style={{ display: "flex", justifyContent: "space-between" }}>
-                <span>Edit rules templates</span>
-                <span style={{ color: "var(--primary)", cursor: "pointer" }}>→</span>
-              </li>
-              <li style={{ display: "flex", justifyContent: "space-between" }}>
-                <span>Inspect process locks</span>
-                <span style={{ color: "var(--primary)", cursor: "pointer" }}>→</span>
-              </li>
-            </ul>
-            <div style={{ marginTop: "1.2rem", textAlign: "center", fontSize: "0.72rem", color: "var(--muted)" }}>
-              Need to troubleshoot?{" "}
-              <span 
-                onClick={() => handleLaunchSession('mock')} 
-                style={{ color: "var(--primary)", cursor: "pointer", textDecoration: "underline" }}
+              <button 
+                className={styles.quickLaunchBtn} 
+                onClick={() => setIsSshWizardOpen(true)} 
+                disabled={isLoading}
+                style={{
+                  background: "linear-gradient(135deg, hsl(38, 92%, 50%) 0%, hsl(0, 84%, 60%) 100%)",
+                  border: "none",
+                  padding: "0.6rem",
+                  fontSize: "0.8rem"
+                }}
               >
-                Launch simulated playground sandbox
-              </span>
-            </div>
-          </section>
-        </aside>
+                🌐 Connect Remote SSH
+              </button>
+            </section>
 
-      </div>
+            {/* Workspace Shell */}
+            <section>
+              <h2 className={styles.sectionTitle}>Workspace Terminal</h2>
+              <div className="card" style={{ display: "flex", flexDirection: "column", border: "1px solid var(--border)", padding: 0 }}>
+                <div className={styles.agentHeader} style={{ justifyContent: "space-between", background: "rgba(255, 255, 255, 0.02)", padding: "0.4rem 0.75rem" }}>
+                  <span style={{ fontWeight: 600, fontSize: "0.75rem" }}>
+                    💻 Local Shell (CWD: {serverCwd.split(/[/\\]/).pop() || "root"})
+                  </span>
+                </div>
+                <TerminalConsole sessionId="workspace-terminal" height="180px" wsPort={wsPort} />
+              </div>
+            </section>
+
+            {/* Quick Actions */}
+            <section className="card" style={{ padding: "1rem", display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+              <h3 style={{ fontSize: "0.9rem", fontWeight: 700, margin: 0 }}>Quick Actions</h3>
+              <ul style={{ listStyle: "none", fontSize: "0.75rem", display: "flex", flexDirection: "column", gap: "0.35rem", color: "var(--muted)", padding: 0, margin: 0 }}>
+                <li style={{ display: "flex", justifyContent: "space-between" }}>
+                  <span>Configure API Keys</span>
+                  <span style={{ color: "var(--primary)", cursor: "pointer" }}>→</span>
+                </li>
+                <li style={{ display: "flex", justifyContent: "space-between" }}>
+                  <span>Edit rules templates</span>
+                  <span style={{ color: "var(--primary)", cursor: "pointer" }}>→</span>
+                </li>
+                <li style={{ display: "flex", justifyContent: "space-between" }}>
+                  <span>Inspect process locks</span>
+                  <span style={{ color: "var(--primary)", cursor: "pointer" }}>→</span>
+                </li>
+              </ul>
+            </section>
+          </div>
+
+        </div>
       )}
 
       {/* Footer */}
@@ -746,9 +879,9 @@ export default function Home() {
         <AiderWizard
           onClose={() => setIsAiderWizardOpen(false)}
           isDocker={isAiderDockerLaunch}
-          onConfirmLaunch={() => {
+          onConfirmLaunch={(name, workspaceRoot, scopedDirs) => {
             setIsAiderWizardOpen(false);
-            handleLaunchSession(isAiderDockerLaunch ? 'aider-docker' : 'aider');
+            handleLaunchSession(isAiderDockerLaunch ? 'aider-docker' : 'aider', name, workspaceRoot, scopedDirs);
           }}
         />
       )}