feat: add integrated terminal with xterm.js and shell sessions

packages/frontend/src/layouts/IDELayout.tsx

@@ -1,6 +1,10 @@
+import { useState } from "react";
 import { Outlet } from "react-router-dom";
+import { Terminal } from "../components/terminal/Terminal";
 
 export function IDELayout({ sidebar }: { sidebar?: React.ReactNode }) {
+  const [terminalOpen, setTerminalOpen] = useState(false);
+
   return (
     <div className="flex h-screen flex-col overflow-hidden" style={{ backgroundColor: "var(--forge-bg)" }}>
       <header
@@ -18,21 +22,48 @@ export function IDELayout({ sidebar }: { sidebar?: React.ReactNode }) {
         </h1>
       </header>
 
-      <div className="flex flex-1 overflow-hidden">
-        {sidebar && (
-          <aside
+      <div className="flex flex-1 flex-col overflow-hidden">
+        <div className="flex flex-1 overflow-hidden">
+          {sidebar && (
+            <aside
+              className="shrink-0 overflow-hidden"
+              style={{
+                width: "250px",
+                borderRight: "1px solid var(--forge-border)",
+              }}
+            >
+              {sidebar}
+            </aside>
+          )}
+          <main className="flex-1 overflow-hidden">
+            <Outlet />
+          </main>
+        </div>
+
+        <button
+          onClick={() => setTerminalOpen((v) => !v)}
+          className="flex shrink-0 items-center gap-1 px-3 py-0.5 text-xs transition-colors hover:bg-white/5"
+          style={{
+            borderTop: "1px solid var(--forge-border)",
+            color: "var(--forge-text-secondary)",
+            fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
+          }}
+        >
+          <span>{terminalOpen ? "\u25BC" : "\u25B2"}</span>
+          <span>Terminal</span>
+        </button>
+
+        {terminalOpen && (
+          <div
             className="shrink-0 overflow-hidden"
             style={{
-              width: "250px",
-              borderRight: "1px solid var(--forge-border)",
+              height: "300px",
+              borderTop: "1px solid var(--forge-border)",
             }}
           >
-            {sidebar}
-          </aside>
+            <Terminal sessionId="main" />
+          </div>
         )}
-        <main className="flex-1 overflow-hidden">
-          <Outlet />
-        </main>
       </div>
     </div>
   );