feat: add Repos page with commit dialog, PR creation, and upstream badges

packages/frontend/src/layouts/IDELayout.tsx

@@ -1,14 +1,42 @@
-import { useState } from "react";
-import { Outlet } from "react-router-dom";
+import { useState, useEffect } from "react";
+import { Outlet, Link, useLocation } from "react-router-dom";
 import { Terminal } from "../components/terminal/Terminal";
+import { useWebSocket } from "../hooks/useWebSocket";
+
+const NAV_ITEMS = [
+  { path: "/", label: "Home" },
+  { path: "/editor", label: "Editor" },
+  { path: "/build", label: "Build" },
+  { path: "/server", label: "Server" },
+  { path: "/toolset", label: "Toolset" },
+  { path: "/repos", label: "Repos" },
+];
 
 export function IDELayout({ sidebar }: { sidebar?: React.ReactNode }) {
   const [terminalOpen, setTerminalOpen] = useState(false);
+  const [upstreamBehind, setUpstreamBehind] = useState(0);
+  const location = useLocation();
+  const { subscribe } = useWebSocket();
+
+  useEffect(() => {
+    return subscribe("git:upstream-update", (event) => {
+      const data = event.data as { behind: number };
+      if (data.behind > 0) {
+        setUpstreamBehind((prev) => prev + data.behind);
+      }
+    });
+  }, [subscribe]);
+
+  useEffect(() => {
+    if (location.pathname === "/repos") {
+      setUpstreamBehind(0);
+    }
+  }, [location.pathname]);
 
   return (
     <div className="flex h-screen flex-col overflow-hidden" style={{ backgroundColor: "var(--forge-bg)" }}>
       <header
-        className="flex shrink-0 items-center px-4 py-2"
+        className="flex shrink-0 items-center gap-6 px-4 py-2"
         style={{ borderBottom: "1px solid var(--forge-border)" }}
       >
         <h1
@@ -20,6 +48,30 @@ export function IDELayout({ sidebar }: { sidebar?: React.ReactNode }) {
         >
           Layonara Forge
         </h1>
+        <nav className="flex items-center gap-1">
+          {NAV_ITEMS.map((item) => {
+            const isActive =
+              item.path === "/" ? location.pathname === "/" : location.pathname.startsWith(item.path);
+            return (
+              <Link
+                key={item.path}
+                to={item.path}
+                className="relative rounded px-2.5 py-1 text-sm transition-colors hover:bg-white/5"
+                style={{
+                  color: isActive ? "var(--forge-accent)" : "var(--forge-text-secondary)",
+                  fontWeight: isActive ? 600 : 400,
+                }}
+              >
+                {item.label}
+                {item.path === "/repos" && upstreamBehind > 0 && (
+                  <span className="absolute -right-1 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-amber-500 px-1 text-[10px] font-bold text-black">
+                    {upstreamBehind}
+                  </span>
+                )}
+              </Link>
+            );
+          })}
+        </nav>
       </header>
 
       <div className="flex flex-1 flex-col overflow-hidden">