// frontend/components/AboutModal.jsx import React, { useEffect, useCallback, useState } from "react"; import { apiUrl, safeFetchJSON } from "../utils/api.js"; /** * AboutModal — "About GitPilot" dialog shown from the user menu. * * Enterprise design goals: * - Prominent brand mark matching docs/logo.svg (orange ring + GP monogram) * - Clear identity: name, tagline, version (frontend + backend) * - Credits the creator (Ruslan Magana Vsevolodovna) as a link to GitHub * - Open-source positioning: Apache 2.0 license + GitHub repo link * - Action row: View on GitHub, Report Issue, Documentation * - Accessible: role="dialog", aria-modal, aria-labelledby, Escape to close, * focus trap via initial focus on close button * - Brand palette: #D95C3D accent, #1C1C1F card, #27272A border, #EDEDED text */ const FRONTEND_VERSION = typeof __APP_VERSION__ !== "undefined" ? __APP_VERSION__ : "0.1.5"; export default function AboutModal({ isOpen, onClose }) { const [backendVersion, setBackendVersion] = useState(null); // Fetch backend version when opened useEffect(() => { if (!isOpen) return; let cancelled = false; (async () => { try { const data = await safeFetchJSON(apiUrl("/api/ping"), { timeout: 4000 }); if (!cancelled) { setBackendVersion(data?.version || null); } } catch { if (!cancelled) setBackendVersion(null); } })(); return () => { cancelled = true; }; }, [isOpen]); // Escape to close useEffect(() => { if (!isOpen) return; const handleKey = (e) => { if (e.key === "Escape") onClose?.(); }; document.addEventListener("keydown", handleKey); return () => document.removeEventListener("keydown", handleKey); }, [isOpen, onClose]); // Lock body scroll while open useEffect(() => { if (!isOpen) return; const prev = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { document.body.style.overflow = prev; }; }, [isOpen]); const handleBackdropClick = useCallback( (e) => { if (e.target === e.currentTarget) onClose?.(); }, [onClose] ); if (!isOpen) return null; return (
{/* Close button */} {/* Hero: brand mark + name */}

GitPilot

Enterprise Workspace Copilot
{/* Body */}

An agentic AI coding companion for your repositories. Ask, plan, code, and ship — with multi-LLM support, security scanning, and VS Code integration.

{/* Meta table */}
(e.currentTarget.style.textDecoration = "underline") } onMouseLeave={(e) => (e.currentTarget.style.textDecoration = "none") } > Ruslan Magana Vsevolodovna } isLast />
{/* Action row */}
} label="GitHub" /> } label="Docs" /> } label="Report" />
{/* Footer */}
© {new Date().getFullYear()} GitPilot · Made with care for developers everywhere
); } // ── Brand mark (mirrors docs/logo.svg) ────────────────────────────── function BrandMark() { return (