chore: initial project commit

2026-03-12 16:33:33 +08:00
commit 88c9474a27
19 changed files with 4670 additions and 0 deletions
--- a/src/Layout.tsx
+++ b/src/Layout.tsx
@@ -0,0 +1,161 @@
+import { useEffect, useMemo, useState } from "react";
+import { NavLink, Outlet, useLocation } from "react-router-dom";
+
+const QUALITY_SUB_ITEMS = [
+  { to: "/quality/dashboard", title: "Overview" },
+  { to: "/quality/pr-list", title: "PR List" },
+  { to: "/quality/settings", title: "Settings" },
+] as const;
+
+const PAGE_TITLES: Record<string, string> = {
+  "/planning": "Strategic Planning Workspace",
+  "/devops": "Delivery Execution Workspace",
+  "/quality/dashboard": "Quality Gate Overview",
+  "/quality/pr-list": "Quality Gate · PR List",
+  "/quality/settings": "Quality Gate · Settings",
+};
+
+export default function Layout() {
+  const { pathname } = useLocation();
+  const inQuality = pathname.startsWith("/quality");
+  const [qualityExpanded, setQualityExpanded] = useState<boolean>(inQuality);
+
+  useEffect(() => {
+    if (inQuality) {
+      setQualityExpanded(true);
+    }
+  }, [inQuality]);
+
+  const pageTitle = useMemo(() => {
+    if (PAGE_TITLES[pathname]) {
+      return PAGE_TITLES[pathname];
+    }
+    if (inQuality) {
+      return "Quality Gate";
+    }
+    return "SAFe OS";
+  }, [pathname, inQuality]);
+
+  return (
+    <div className="flex h-screen w-screen bg-[#fafafa]">
+      {/* ─── Sidebar ─── */}
+      <nav className="w-[280px] shrink-0 bg-surface-dark text-txt-inverse flex flex-col py-8 border-r border-white/10">
+        <div className="px-8 mb-9 text-2xl font-extrabold tracking-tight select-none">
+          SAFe <span className="text-magenta">OS</span>
+        </div>
+
+        <div className="px-8 text-[11px] text-gray-500 uppercase font-bold tracking-widest mb-4">
+          Agent Pipeline
+        </div>
+
+        <NavLink
+          to="/planning"
+          className={({ isActive }) =>
+            `mx-4 rounded-xl flex items-center gap-3 px-4 py-3 border border-transparent transition-all cursor-pointer ${
+              isActive
+                ? "border-magenta/40 bg-white/10"
+                : "hover:bg-white/5"
+            }`
+          }
+        >
+          {({ isActive }) => (
+            <>
+              <span
+                className={`w-2 h-2 rounded-full shrink-0 ${
+                  isActive ? "bg-magenta" : "bg-gray-600"
+                }`}
+              />
+              <div>
+                <div className="font-bold text-[0.95rem]">1. Planning Council Agent</div>
+                <div className="text-xs text-gray-400">Business and architecture planning</div>
+              </div>
+            </>
+          )}
+        </NavLink>
+
+        <NavLink
+          to="/devops"
+          className={({ isActive }) =>
+            `mx-4 rounded-xl flex items-center gap-3 px-4 py-3 border border-transparent transition-all cursor-pointer ${
+              isActive
+                ? "border-magenta/40 bg-white/10"
+                : "hover:bg-white/5"
+            }`
+          }
+        >
+          {({ isActive }) => (
+            <>
+              <span
+                className={`w-2 h-2 rounded-full shrink-0 ${
+                  isActive ? "bg-magenta" : "bg-gray-600"
+                }`}
+              />
+              <div>
+                <div className="font-bold text-[0.95rem]">2. DevOps Agent</div>
+                <div className="text-xs text-gray-400">Story breakdown and implementation</div>
+              </div>
+            </>
+          )}
+        </NavLink>
+
+        <div className="mx-4 rounded-xl border border-transparent">
+          <button
+            type="button"
+            onClick={() => setQualityExpanded((v) => !v)}
+            className={`w-full rounded-xl flex items-center gap-3 px-4 py-3 transition-all text-left ${
+              inQuality ? "bg-white/10 border border-magenta/40" : "hover:bg-white/5"
+            }`}
+          >
+            <span
+              className={`w-2 h-2 rounded-full shrink-0 ${
+                inQuality ? "bg-magenta" : "bg-gray-600"
+              }`}
+            />
+            <div className="min-w-0 flex-1">
+              <div className="font-bold text-[0.95rem]">3. Quality Gate Agent</div>
+              <div className="text-xs text-gray-400">Automated validation and review</div>
+            </div>
+            <span className={`text-xs text-gray-400 transition-transform ${qualityExpanded ? "rotate-90" : ""}`}>
+              ▶
+            </span>
+          </button>
+
+          {qualityExpanded && (
+            <div className="pl-10 pr-3 pb-3 pt-1 flex flex-col gap-1">
+              {QUALITY_SUB_ITEMS.map((sub) => (
+                <NavLink
+                  key={sub.to}
+                  to={sub.to}
+                  className={({ isActive }) =>
+                    `text-xs font-bold px-3 py-2 rounded-lg transition-colors ${
+                      isActive
+                        ? "text-magenta bg-white/10"
+                        : "text-gray-400 hover:text-white hover:bg-white/5"
+                    }`
+                  }
+                >
+                  {sub.title}
+                </NavLink>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <div className="mt-auto px-8 text-[0.7rem] text-gray-600">
+          T-Systems · SAFe Multi-Agent Demo UI
+        </div>
+      </nav>
+
+      {/* ─── Main workspace ─── */}
+      <main className="flex-1 flex flex-col bg-white min-w-0">
+        <header className="h-20 px-10 flex items-center justify-between border-b border-border/80 bg-white/90 backdrop-blur shrink-0">
+          <h1 className="text-2xl font-extrabold tracking-tight">{pageTitle}</h1>
+        </header>
+
+        <div className="flex-1 overflow-hidden">
+          <Outlet />
+        </div>
+      </main>
+    </div>
+  );
+}