feat: add GitAgent and OpenGAP pages with full docs

package.json

@@ -80,6 +80,7 @@
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^15.15.0",
     "jsdom": "^20.0.3",
+    "playwright": "^1.60.0",
     "postcss": "^8.5.6",
     "tailwindcss": "^3.4.17",
     "typescript": "^5.8.3",

src/App.tsx

@@ -2,8 +2,10 @@ import { Toaster } from "@/components/ui/toaster";
 import { Toaster as Sonner } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
-import Index from "./pages/Index";
+import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
+import GitAgentPage from "./pages/GitAgentPage";
+import GitAgentDocsPage from "./pages/GitAgentDocsPage";
+import OpenGAPDocsPage from "./pages/OpenGAPDocsPage";
 import NotFound from "./pages/NotFound";
 
 const queryClient = new QueryClient();
@@ -15,7 +17,11 @@ const App = () => (
       <Sonner />
       <BrowserRouter>
         <Routes>
-          <Route path="/" element={<Index />} />
+          <Route path="/" element={<GitAgentPage />} />
+          <Route path="/opengap" element={<Navigate to="/opengap/overview" replace />} />
+          <Route path="/opengap/:section" element={<OpenGAPDocsPage />} />
+          <Route path="/docs" element={<Navigate to="/docs/overview" replace />} />
+          <Route path="/docs/:section" element={<GitAgentDocsPage />} />
           {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
           <Route path="*" element={<NotFound />} />
         </Routes>

src/components/AdaptersSection.tsx

@@ -9,6 +9,10 @@ const adapters = [
   { name: "Lyzr Studio", adapter: "lyzr", mode: "One-shot", requires: "LYZR_API_KEY", features: ["REST API deployment", "Agent ID persistence", "Provider auto-mapping"] },
   { name: "GitHub Models", adapter: "github", mode: "One-shot (streaming)", requires: "GITHUB_TOKEN (models:read)", features: ["Model namespace mapping", "Streaming responses", "Multi-provider support"] },
   { name: "Git (Auto-Detect)", adapter: "git", mode: "Auto", requires: "Depends on detected adapter", features: [".gitagent_adapter hint", "Model-based detection", "File-based fallback"] },
+  { name: "OpenCode", adapter: "opencode", mode: "Interactive / one-shot", requires: "OpenCode CLI", features: ["System prompt injection", "Tool mapping", "Config export"] },
+  { name: "Gemini", adapter: "gemini", mode: "Interactive / one-shot", requires: "GEMINI_API_KEY", features: ["Gemini model mapping", "Streaming responses", "Multi-provider support"] },
+  { name: "GitClaw", adapter: "gitclaw", mode: "Interactive / one-shot", requires: "ANTHROPIC_API_KEY, GitClaw CLI", features: ["Workspace generation", "Tool stubs", "Skill mapping"] },
+  { name: "Prompt", adapter: "prompt", mode: "Output only", requires: "None", features: ["Raw system prompt output", "No runtime required", "Universal fallback"] },
 ];
 
 export function AdaptersSection() {
@@ -23,7 +27,7 @@ export function AdaptersSection() {
         >
           <h2 className="text-2xl font-bold text-foreground mb-2">Framework Adapters: One Standard, Every Runtime</h2>
           <p className="text-sm text-muted-foreground font-body">
-            One agent definition. Eight runtime targets.
+            One agent definition. Twelve runtime targets.
           </p>
         </motion.div>
 

src/components/CLISection.tsx

@@ -1,20 +1,29 @@
+import { useState } from "react";
 import { motion } from "framer-motion";
-import { Terminal, Play, FileCheck, Info, Download, Upload, Package, ShieldCheck, Zap, Rocket } from "lucide-react";
+import { Terminal, Play, FileCheck, Info, Download, Upload, Package, ShieldCheck, Zap, Rocket, Copy, Check } from "lucide-react";
 
 const commands = [
-  { name: "init", icon: Rocket, desc: "Scaffold a new agent repo", usage: "gitagent init --template <minimal|standard|full>", detail: "Templates: minimal (2 files), standard (skills + tools), full (compliance + hooks + memory)" },
-  { name: "validate", icon: FileCheck, desc: "Validate agent against spec", usage: "gitagent validate --compliance", detail: "JSON schema validation, skill checks, and optional regulatory compliance audit" },
-  { name: "run", icon: Play, desc: "Run agent with any adapter", usage: "gitagent run -a <adapter> -p \"prompt\"", detail: "Adapters: claude, openai, crewai, openclaw, nanobot, lyzr, github, git (auto-detect)" },
-  { name: "export", icon: Download, desc: "Export to another framework", usage: "gitagent export --format <format> -o output", detail: "Formats: system-prompt, claude-code, openai, crewai, openclaw, nanobot, lyzr, github" },
-  { name: "import", icon: Upload, desc: "Import from Claude, Cursor, CrewAI", usage: "gitagent import --from <format> <path>", detail: "Convert existing agent configs into gitagent format" },
-  { name: "install", icon: Package, desc: "Resolve git-based dependencies", usage: "gitagent install", detail: "Shallow-clones dependencies at specified versions into mount paths" },
-  { name: "skills", icon: Zap, desc: "Search, install, list, inspect skills", usage: "gitagent skills search \"code review\"", detail: "Registries: SkillsMP marketplace, GitHub repos, local filesystem" },
-  { name: "audit", icon: ShieldCheck, desc: "Generate compliance audit report", usage: "gitagent audit", detail: "FINRA 3110, SEC 17a-4, SR 11-7, CFPB checks with pass/fail/warn indicators" },
-  { name: "info", icon: Info, desc: "Display agent summary", usage: "gitagent info", detail: "Shows config, model, skills, tools, compliance, and SOUL.md preview" },
-  { name: "lyzr", icon: Terminal, desc: "Create, update, and run on Lyzr Studio", usage: "gitagent lyzr run -r <repo> -p \"Hello\"", detail: "One command: clone → create agent on Lyzr → chat. Saves agent ID for reuse" },
+  { name: "init", icon: Rocket, desc: "Scaffold a new agent repo", usage: "opengap init --template <minimal|standard|full|llm-wiki>", detail: "Templates: minimal (2 files), standard (skills + tools), full (compliance + hooks + memory), llm-wiki (knowledge base)" },
+  { name: "validate", icon: FileCheck, desc: "Validate agent against spec", usage: "opengap validate --compliance", detail: "JSON schema validation, skill checks, and optional regulatory compliance audit" },
+  { name: "run", icon: Play, desc: "Run agent with any adapter", usage: "opengap run -a <adapter> -p \"prompt\"", detail: "Adapters: claude, openai, crewai, openclaw, nanobot, lyzr, github, opencode, gemini, gitclaw, git, prompt" },
+  { name: "export", icon: Download, desc: "Export to another framework", usage: "opengap export --format <format> -o output", detail: "Formats: system-prompt, claude-code, openai, crewai, openclaw, nanobot, lyzr, github, copilot, opencode, cursor, gemini, codex, kiro, gitclaw" },
+  { name: "import", icon: Upload, desc: "Import from Claude, Cursor, CrewAI, OpenCode, Gemini, Codex", usage: "opengap import --from <format> <path>", detail: "Formats: claude, cursor, crewai, opencode, gemini, codex" },
+  { name: "install", icon: Package, desc: "Resolve git-based dependencies", usage: "opengap install", detail: "Shallow-clones dependencies at specified versions into mount paths" },
+  { name: "skills", icon: Zap, desc: "Search, install, list, info", usage: "opengap skills search \"code review\"", detail: "Registries: SkillsMP marketplace, GitHub repos, local filesystem" },
+  { name: "audit", icon: ShieldCheck, desc: "Generate compliance audit report", usage: "opengap audit", detail: "FINRA 3110, SEC 17a-4, SR 11-7, CFPB checks with pass/fail/warn indicators" },
+  { name: "info", icon: Info, desc: "Display agent summary", usage: "opengap info", detail: "Shows config, model, skills, tools, compliance, and SOUL.md preview" },
+  { name: "lyzr", icon: Terminal, desc: "Create, update, and run on Lyzr Studio", usage: "opengap lyzr run -r <repo> -p \"Hello\"", detail: "Subcommands: run (clone → create → chat), create (register agent), update (push changes), list (show all agents). Saves agent ID for reuse" },
 ];
 
 export function CLISection() {
+  const [copiedCmd, setCopiedCmd] = useState<string | null>(null);
+
+  const handleCopy = (usage: string, name: string) => {
+    navigator.clipboard.writeText(usage);
+    setCopiedCmd(name);
+    setTimeout(() => setCopiedCmd(null), 2000);
+  };
+
   return (
     <section id="cli" className="py-20 px-6 border-t border-border">
       <div className="mx-auto max-w-6xl">
@@ -24,7 +33,7 @@ export function CLISection() {
           viewport={{ once: true }}
           className="mb-12"
         >
-          <h2 className="text-2xl font-bold text-foreground mb-2">Git Agent Protocol: Build & Run AI Agents</h2>
+          <h2 className="text-2xl font-bold text-foreground mb-2">OpenGAP: Build & Run AI Agents</h2>
           <p className="text-sm text-muted-foreground font-body">
             Everything you need to build, validate, run, and ship agents.
           </p>
@@ -43,7 +52,14 @@ export function CLISection() {
               <div className="flex items-center gap-2 mb-2 relative z-10">
                 <cmd.icon className="w-3.5 h-3.5 text-primary shrink-0" />
                 <code className="text-xs font-semibold text-foreground font-body">{cmd.name}</code>
-                <span className="text-[10px] text-muted-foreground ml-auto font-body hidden sm:inline">{cmd.desc}</span>
+                <span className="text-[10px] text-muted-foreground font-body hidden sm:inline">{cmd.desc}</span>
+                <button
+                  onClick={() => handleCopy(cmd.usage, cmd.name)}
+                  className="ml-auto text-muted-foreground/30 hover:text-foreground transition-colors shrink-0"
+                  aria-label="Copy command"
+                >
+                  {copiedCmd === cmd.name ? <Check className="w-3 h-3 text-primary" /> : <Copy className="w-3 h-3" />}
+                </button>
               </div>
               <code className="block text-[10px] sm:text-[11px] text-primary/80 mb-1.5 font-body relative z-10 break-all sm:break-normal">$ {cmd.usage}</code>
               <p className="text-[11px] text-muted-foreground/70 leading-relaxed font-body relative z-10">{cmd.detail}</p>

src/components/ComplianceSection.tsx

@@ -1,5 +1,6 @@
+import { useState } from "react";
 import { motion } from "framer-motion";
-import { ShieldCheck, AlertTriangle, Lock, Scale } from "lucide-react";
+import { ShieldCheck, AlertTriangle, Lock, Scale, Copy, Check } from "lucide-react";
 
 const riskTiers = [
   { tier: "low", label: "Low", desc: "Minimal — standard logging", color: "text-primary", bg: "bg-primary/10" },
@@ -15,7 +16,20 @@ const frameworks = [
   { icon: AlertTriangle, name: "CFPB", rules: "Circular 2022-03", checks: "Bias testing, fair lending analysis" },
 ];
 
+const artifactsContent = `compliance/
+├── risk-assessment.md
+├── regulatory-map.yaml
+└── validation-schedule.yaml`;
+
 export function ComplianceSection() {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(artifactsContent);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
   return (
     <section id="compliance" className="py-20 px-6 border-t border-border">
       <div className="mx-auto max-w-6xl">
@@ -28,7 +42,7 @@ export function ComplianceSection() {
           <h2 className="text-2xl font-bold text-foreground mb-2">AI Agent Compliance & Governance</h2>
           <p className="text-sm text-muted-foreground font-body">
             First-class regulatory support baked into the manifest. Run{" "}
-            <code className="text-primary text-xs">gitagent audit</code> for a full report.
+            <code className="text-primary text-xs">opengap audit</code> for a full report.
           </p>
         </motion.div>
 
@@ -58,11 +72,21 @@ export function ComplianceSection() {
             </div>
 
             <h3 className="text-xs uppercase tracking-widest text-muted-foreground/60 mt-6 mb-4 font-body">Compliance Artifacts</h3>
-            <div className="code-block text-xs text-muted-foreground leading-5 font-body">
-              <pre><code>{`compliance/
-├── risk-assessment.md
-├── regulatory-map.yaml
-└── validation-schedule.yaml`}</code></pre>
+            <div className="code-block sketch-border overflow-hidden">
+              <div className="terminal-header">
+                <span className="terminal-dot bg-red-400/60" />
+                <span className="terminal-dot bg-yellow-400/60" />
+                <span className="terminal-dot bg-green-400/60" />
+                <span className="ml-2 text-[10px] text-muted-foreground/50 font-body">compliance/</span>
+                <button
+                  onClick={handleCopy}
+                  className="ml-auto text-muted-foreground/50 hover:text-foreground transition-colors"
+                  aria-label="Copy structure"
+                >
+                  {copied ? <Check className="w-3.5 h-3.5 text-primary" /> : <Copy className="w-3.5 h-3.5" />}
+                </button>
+              </div>
+              <pre className="text-xs text-muted-foreground leading-5 font-body"><code>{artifactsContent}</code></pre>
             </div>
           </motion.div>