+
+
- )
+ );
}
diff --git a/src/components/UI.jsx b/src/components/UI.jsx
index f53b292..a23fcd3 100644
--- a/src/components/UI.jsx
+++ b/src/components/UI.jsx
@@ -1,178 +1,247 @@
-import React from 'react'
-import {
- FiChevronUp, FiChevronDown
-} from 'react-icons/fi'
-import { LuChevronsUpDown as FiChevronsUpDown } from 'react-icons/lu'
+import React from "react";
+import { FiChevronUp, FiChevronDown } from "react-icons/fi";
+import { LuChevronsUpDown as FiChevronsUpDown } from "react-icons/lu";
// Design tokens
export const C = {
card: {
- background: 'var(--surface)',
- border: '1px solid var(--border)',
- borderRadius: 'var(--radius)',
- padding: '20px',
+ background: "var(--surface)",
+ border: "1px solid var(--border)",
+ borderRadius: "var(--radius)",
+ padding: "20px",
},
label: {
fontSize: 11,
- letterSpacing: '.08em',
- color: 'var(--text2)',
- textTransform: 'uppercase',
+ letterSpacing: ".08em",
+ color: "var(--text2)",
+ textTransform: "uppercase",
fontWeight: 500,
},
- pill: (color = 'var(--accent)', bg = 'rgba(245,197,24,.12)') => ({
- display: 'inline-flex',
- alignItems: 'center',
- padding: '2px 8px',
+ pill: (color = "var(--accent)", bg = "rgba(245,197,24,.12)") => ({
+ display: "inline-flex",
+ alignItems: "center",
+ padding: "2px 8px",
borderRadius: 4,
fontSize: 11,
fontWeight: 600,
- letterSpacing: '.04em',
+ letterSpacing: ".04em",
color,
background: bg,
}),
- btn: (v = 'primary') => ({
- padding: '8px 18px',
- borderRadius: 'var(--radius)',
+ btn: (v = "primary") => ({
+ padding: "8px 18px",
+ borderRadius: "var(--radius)",
fontWeight: 600,
fontSize: 13,
- cursor: 'pointer',
- border: 'none',
- transition: 'opacity .15s',
- ...(v === 'primary' ? { background: 'var(--accent)', color: '#000' }
- : v === 'ghost' ? { background: 'transparent', color: 'var(--text)', border: '1px solid var(--border)' }
- : { background: 'var(--surface2)', color: 'var(--text)', border: '1px solid var(--border)' }),
+ cursor: "pointer",
+ border: "none",
+ transition: "opacity .15s",
+ ...(v === "primary"
+ ? { background: "var(--accent)", color: "#000" }
+ : v === "ghost"
+ ? {
+ background: "transparent",
+ color: "var(--text)",
+ border: "1px solid var(--border)",
+ }
+ : {
+ background: "var(--surface2)",
+ color: "var(--text)",
+ border: "1px solid var(--border)",
+ }),
}),
input: {
- background: 'var(--surface2)',
- border: '1px solid var(--border)',
+ background: "var(--surface2)",
+ border: "1px solid var(--border)",
borderRadius: 6,
- padding: '8px 12px',
- color: 'var(--text)',
+ padding: "8px 12px",
+ color: "var(--text)",
fontSize: 13,
- outline: 'none',
+ outline: "none",
},
select: {
- background: 'var(--surface2)',
- border: '1px solid var(--border)',
+ background: "var(--surface2)",
+ border: "1px solid var(--border)",
borderRadius: 6,
- padding: '8px 12px',
- color: 'var(--text)',
+ padding: "8px 12px",
+ color: "var(--text)",
fontSize: 13,
- outline: 'none',
- cursor: 'pointer',
+ outline: "none",
+ cursor: "pointer",
},
-}
+};
// Lifecycle badge color map
const LC = {
- Thriving: ['#22c55e', 'rgba(34,197,94,.15)'],
- Stable: ['#3b82f6', 'rgba(59,130,246,.15)'],
- Dormant: ['#f59e0b', 'rgba(245,158,11,.15)'],
- Abandoned: ['#ef4444', 'rgba(239,68,68,.15)'],
- critical: ['#ef4444', 'rgba(239,68,68,.15)'],
- high: ['#f59e0b', 'rgba(245,158,11,.15)'],
- healthy: ['#22c55e', 'rgba(34,197,94,.15)'],
- unknown: ['#666', 'rgba(102,102,102,.15)'],
-}
+ Thriving: ["#22c55e", "rgba(34,197,94,.15)"],
+ Stable: ["#3b82f6", "rgba(59,130,246,.15)"],
+ Dormant: ["#f59e0b", "rgba(245,158,11,.15)"],
+ Abandoned: ["#ef4444", "rgba(239,68,68,.15)"],
+ critical: ["#ef4444", "rgba(239,68,68,.15)"],
+ high: ["#f59e0b", "rgba(245,158,11,.15)"],
+ healthy: ["#22c55e", "rgba(34,197,94,.15)"],
+ unknown: ["#666", "rgba(102,102,102,.15)"],
+};
export function Badge({ text, variant }) {
- const key = variant || text
- const [color, bg] = LC[key] || LC.unknown
- return {String(text).toUpperCase()}
+ const key = variant || text;
+ const [color, bg] = LC[key] || LC.unknown;
+ return {String(text).toUpperCase()};
}
export function HealthBar({ score }) {
- const color = score >= 70 ? 'var(--green)' : score >= 40 ? 'var(--amber)' : 'var(--red)'
+ const color =
+ score >= 70 ? "var(--green)" : score >= 40 ? "var(--amber)" : "var(--red)";
return (
-
-
-
+
+
- )
+ );
}
export function StatCard({ label, value, sub, accent }) {
return (
-
+
- {score}
+
+ {score}
+
+
- )
+ );
}
export function Spinner({ size = 28 }) {
return (
-
- )
+
+ );
}
export function SortTh({ label, sortKey, sortConfig, onSort }) {
- const active = sortConfig.key === sortKey
- const Icon = !active ? FiChevronsUpDown : sortConfig.dir === 'desc' ? FiChevronDown : FiChevronUp
+ const active = sortConfig.key === sortKey;
+ const Icon = !active
+ ? FiChevronsUpDown
+ : sortConfig.dir === "desc"
+ ? FiChevronDown
+ : FiChevronUp;
return (
onSort(sortKey)}
style={{
- padding: '10px 14px', textAlign: 'left', cursor: 'pointer',
- userSelect: 'none', whiteSpace: 'nowrap', fontSize: 11,
- fontWeight: 600, letterSpacing: '.06em',
- background: 'var(--surface2)', borderBottom: '1px solid var(--border)',
- color: active ? 'var(--accent)' : 'var(--text2)',
+ padding: "10px 14px",
+ textAlign: "left",
+ cursor: "pointer",
+ userSelect: "none",
+ whiteSpace: "nowrap",
+ fontSize: 11,
+ fontWeight: 600,
+ letterSpacing: ".06em",
+ background: "var(--surface2)",
+ borderBottom: "1px solid var(--border)",
+ color: active ? "var(--accent)" : "var(--text2)",
}}
>
-
+
{label}
- )
+ );
}
export function PageTitle({ title, subtitle, right }) {
return (
-
{label}
- {value}
- {sub && {sub}
}
+
+ {value}
+
+ {sub && {sub}
}
+
{right}
- )
+ );
}
export function LoadMore({ shown, total, onLoad }) {
- if (shown >= total) return null
+ if (shown >= total) return null;
return (
-
{title}
- {subtitle &&{subtitle}
} + {subtitle && ( ++ {subtitle} +
+ )}
-
-
+
+
+
- )
+ );
}
export function EmptyOk({ msg, sub }) {
return (
- Showing {shown} of {total}
-
{msg}
- {sub && {sub}
}
+
+
- )
+ );
}
export function InfoBox({ children }) {
return (
-
+ {msg}
+
+ {sub && {sub}
}
+
+
+ );
+}
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
new file mode 100644
index 0000000..5a8d8f7
--- /dev/null
+++ b/src/components/ui/Button.tsx
@@ -0,0 +1,110 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import { FiLoader } from "react-icons/fi";
+
+const buttonVariants = cva(
+ [
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium",
+ "transition-all duration-200",
+ "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+ "disabled:pointer-events-none disabled:opacity-50",
+ "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+ ],
+ {
+ variants: {
+ variant: {
+ default:
+ "bg-[#FCD34D] text-black border-2 border-black shadow-[4px_4px_0px_0px_#FCD34D] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0px_0px_#FCD34D] active:translate-x-[4px] active:translate-y-[4px] active:shadow-none transition-all duration-150",
+
+ destructive:
+ "bg-red-500 text-white border-2 border-black shadow-[4px_4px_0px_0px_#ef4444] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0px_0px_#ef4444] active:translate-x-[4px] active:translate-y-[4px] active:shadow-none transition-all duration-150",
+
+ outline:
+ "bg-white text-black border-2 border-black shadow-[4px_4px_0px_0px_#ffffff] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0px_0px_#ffffff] active:translate-x-[4px] active:translate-y-[4px] active:shadow-none transition-all duration-150",
+
+ secondary:
+ "bg-gray-300 text-black border-2 border-black shadow-[4px_4px_0px_0px_#d1d5db] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0px_0px_#d1d5db] active:translate-x-[4px] active:translate-y-[4px] active:shadow-none transition-all duration-150",
+
+ ghost:
+ "bg-transparent text-white border-2 border-white shadow-[4px_4px_0px_0px_#ffffff] hover:bg-white hover:text-black hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0px_0px_#ffffff] active:translate-x-[4px] active:translate-y-[4px] active:shadow-none transition-all duration-150",
+
+ link: "text-blue-500 underline underline-offset-4 font-bold hover:text-blue-400 transition-colors duration-150",
+ },
+
+ size: {
+ default: "h-10 px-4 py-2",
+ sm: "h-9 rounded-md px-3",
+ lg: "h-11 rounded-md px-8",
+ icon: "h-10 w-10",
+ },
+
+ fullWidth: {
+ true: "w-full",
+ },
+
+ loading: {
+ true: "cursor-not-allowed",
+ },
+ },
+
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ }
+);
+
+export interface ButtonProps
+ extends
+ React.ButtonHTMLAttributes,
+ VariantProps {
+ asChild?: boolean;
+ loading?: boolean;
+}
+
+const Button = React.forwardRef(
+ (
+ {
+ className,
+ variant,
+ size,
+ fullWidth,
+ loading,
+ asChild = false,
+ disabled,
+ children,
+ ...props
+ },
+ ref
+ ) => {
+ const Comp = asChild ? Slot : "button";
+
+ return (
+
+ {loading &&
+ );
+ }
+);
+
+Button.displayName = "Button";
+
+export { Button };
diff --git a/src/context/AppContext.jsx b/src/context/AppContext.jsx
index cef8a89..4865981 100644
--- a/src/context/AppContext.jsx
+++ b/src/context/AppContext.jsx
@@ -1,99 +1,149 @@
-import { createContext, useContext, useState, useCallback } from 'react'
-import { fetchOrg, fetchRepos, fetchContributors, fetchIssues, fetchRateLimit } from '../services/github'
-import { buildAnalyticalModel } from '../services/analytics'
+import { createContext, useContext, useState, useCallback } from "react";
+import {
+ fetchOrg,
+ fetchRepos,
+ fetchContributors,
+ fetchIssues,
+ fetchRateLimit,
+} from "../services/github";
+import { buildAnalyticalModel } from "../services/analytics";
-const Ctx = createContext(null)
+const Ctx = createContext(null);
export function AppProvider({ children }) {
- const [pat, setPat] = useState(() => localStorage.getItem('oe_pat') || '')
- const [orgs, setOrgs] = useState([])
- const [model, setModel] = useState(null)
- const [issuesData, setIssuesData] = useState({})
- const [rateLimit, setRateLimit] = useState(null)
- const [loading, setLoading] = useState(false)
- const [loadMsg, setLoadMsg] = useState('')
- const [govLoading, setGovLoading] = useState(false)
- const [error, setError] = useState('')
+ const [pat, setPat] = useState(() => localStorage.getItem("oe_pat") || "");
+ const [orgs, setOrgs] = useState([]);
+ const [model, setModel] = useState(null);
+ const [issuesData, setIssuesData] = useState({});
+ const [rateLimit, setRateLimit] = useState(null);
+ const [loading, setLoading] = useState(false);
+ const [loadMsg, setLoadMsg] = useState("");
+ const [govLoading, setGovLoading] = useState(false);
+ const [error, setError] = useState("");
- const savePat = useCallback(token => {
- setPat(token)
- token ? localStorage.setItem('oe_pat', token) : localStorage.removeItem('oe_pat')
- }, [])
+ const savePat = useCallback((token) => {
+ setPat(token);
+ token
+ ? localStorage.setItem("oe_pat", token)
+ : localStorage.removeItem("oe_pat");
+ }, []);
// Multi-org explore โ core of Section 3.2.0
- const explore = useCallback(async orgNames => {
- setLoading(true); setError(''); setModel(null); setOrgs([]); setIssuesData({})
- try {
- setLoadMsg('Fetching organization metadata...')
- const orgRes = await Promise.allSettled(orgNames.map(n => fetchOrg(n, pat)))
- const validOrgs = orgRes.filter(r => r.status === 'fulfilled').map(r => r.value)
- if (!validOrgs.length) throw new Error('No valid organizations found. Check the names and try again.')
- setOrgs(validOrgs)
+ const explore = useCallback(
+ async (orgNames) => {
+ setLoading(true);
+ setError("");
+ setModel(null);
+ setOrgs([]);
+ setIssuesData({});
+ try {
+ setLoadMsg("Fetching organization metadata...");
+ const orgRes = await Promise.allSettled(
+ orgNames.map((n) => fetchOrg(n, pat))
+ );
+ const validOrgs = orgRes
+ .filter((r) => r.status === "fulfilled")
+ .map((r) => r.value);
+ if (!validOrgs.length)
+ throw new Error(
+ "No valid organizations found. Check the names and try again."
+ );
+ setOrgs(validOrgs);
- setLoadMsg('Fetching repositories...')
- const reposPerOrg = {}
- await Promise.allSettled(validOrgs.map(async org => {
- reposPerOrg[org.login] = await fetchRepos(org.login, pat)
- }))
+ setLoadMsg("Fetching repositories...");
+ const reposPerOrg = {};
+ await Promise.allSettled(
+ validOrgs.map(async (org) => {
+ reposPerOrg[org.login] = await fetchRepos(org.login, pat);
+ })
+ );
- setLoadMsg('Fetching contributor data for top repositories...')
- const contribsPerRepo = {}
- for (const org of validOrgs) {
- const top = (reposPerOrg[org.login] || [])
- .sort((a, b) => b.stargazers_count - a.stargazers_count)
- .slice(0, 10)
- await Promise.allSettled(top.map(async repo => {
- contribsPerRepo[`${org.login}/${repo.name}`] = await fetchContributors(org.login, repo.name, pat)
- }))
- }
-
- setLoadMsg('Building analytical data model...')
- setModel(buildAnalyticalModel(validOrgs, reposPerOrg, contribsPerRepo))
+ setLoadMsg("Fetching contributor data for top repositories...");
+ const contribsPerRepo = {};
+ for (const org of validOrgs) {
+ const top = (reposPerOrg[org.login] || [])
+ .sort((a, b) => b.stargazers_count - a.stargazers_count)
+ .slice(0, 10);
+ await Promise.allSettled(
+ top.map(async (repo) => {
+ contribsPerRepo[`${org.login}/${repo.name}`] =
+ await fetchContributors(org.login, repo.name, pat);
+ })
+ );
+ }
- const rl = await fetchRateLimit(pat)
- if (rl) setRateLimit(rl)
+ setLoadMsg("Building analytical data model...");
+ setModel(buildAnalyticalModel(validOrgs, reposPerOrg, contribsPerRepo));
- // Save to recent searches
- const prev = JSON.parse(localStorage.getItem('oe_recent') || '[]')
- const entry = orgNames.join(', ')
- localStorage.setItem('oe_recent', JSON.stringify([...new Set([entry, ...prev])].slice(0, 6)))
+ const rl = await fetchRateLimit(pat);
+ if (rl) setRateLimit(rl);
- } catch (err) {
- setError(err.message === 'RATE_LIMIT'
- ? 'GitHub API rate limit reached. Add a PAT in Settings for 5,000 req/hr.'
- : err.message)
- } finally {
- setLoading(false); setLoadMsg('')
- }
- }, [pat])
+ // Save to recent searches
+ const prev = JSON.parse(localStorage.getItem("oe_recent") || "[]");
+ const entry = orgNames.join(", ");
+ localStorage.setItem(
+ "oe_recent",
+ JSON.stringify([...new Set([entry, ...prev])].slice(0, 6))
+ );
+ } catch (err) {
+ setError(
+ err.message === "RATE_LIMIT"
+ ? "GitHub API rate limit reached. Add a PAT in Settings for 5,000 req/hr."
+ : err.message
+ );
+ } finally {
+ setLoading(false);
+ setLoadMsg("");
+ }
+ },
+ [pat]
+ );
// Governance audit โ parallel batches of 5 (Section 3.2.5)
const runAudit = useCallback(async () => {
- if (!model || govLoading) return
- setGovLoading(true)
- const map = {}
- const repos = model.allRepos.slice(0, 15)
+ if (!model || govLoading) return;
+ setGovLoading(true);
+ const map = {};
+ const repos = model.allRepos.slice(0, 15);
// Batches of 5 using Promise.allSettled
for (let i = 0; i < repos.length; i += 5) {
- const batch = repos.slice(i, i + 5)
- await Promise.allSettled(batch.map(async repo => {
- map[`${repo.orgLogin}/${repo.name}`] = await fetchIssues(repo.orgLogin, repo.name, pat)
- }))
+ const batch = repos.slice(i, i + 5);
+ await Promise.allSettled(
+ batch.map(async (repo) => {
+ map[`${repo.orgLogin}/${repo.name}`] = await fetchIssues(
+ repo.orgLogin,
+ repo.name,
+ pat
+ );
+ })
+ );
}
- setIssuesData(map)
- setGovLoading(false)
- }, [model, pat, govLoading])
+ setIssuesData(map);
+ setGovLoading(false);
+ }, [model, pat, govLoading]);
return (
-
+
{children}
- )
+ );
}
-export const useApp = () => useContext(Ctx)
+export const useApp = () => useContext(Ctx);
diff --git a/src/hooks/useDebounce.ts b/src/hooks/useDebounce.ts
new file mode 100644
index 0000000..5b05594
--- /dev/null
+++ b/src/hooks/useDebounce.ts
@@ -0,0 +1,17 @@
+import { useEffect, useState } from "react";
+
+export function useDebounce(value: T, delay = 1000) {
+ const [debouncedValue, setDebouncedValue] = useState(value);
+
+ useEffect(() => {
+ const timer = setTimeout(() => {
+ setDebouncedValue(value);
+ }, delay);
+
+ return () => {
+ clearTimeout(timer);
+ };
+ }, [value, delay]);
+
+ return debouncedValue;
+}
diff --git a/src/hooks/useSortedData.js b/src/hooks/useSortedData.js
index 4819f3e..bb2bf78 100644
--- a/src/hooks/useSortedData.js
+++ b/src/hooks/useSortedData.js
@@ -1,22 +1,31 @@
-import { useState, useMemo } from 'react'
+import { useState, useMemo } from "react";
-export function useSortedData(data = [], defaultKey = 'healthScore', defaultDir = 'desc') {
- const [cfg, setCfg] = useState({ key: defaultKey, dir: defaultDir })
+export function useSortedData(
+ data = [],
+ defaultKey = "healthScore",
+ defaultDir = "desc"
+) {
+ const [cfg, setCfg] = useState({ key: defaultKey, dir: defaultDir });
- const onSort = key =>
- setCfg(prev => ({ key, dir: prev.key === key && prev.dir === 'desc' ? 'asc' : 'desc' }))
+ const onSort = (key) =>
+ setCfg((prev) => ({
+ key,
+ dir: prev.key === key && prev.dir === "desc" ? "asc" : "desc",
+ }));
const sorted = useMemo(() => {
- if (!data.length) return []
+ if (!data.length) return [];
return [...data].sort((a, b) => {
- let va = a[cfg.key] ?? '', vb = b[cfg.key] ?? ''
+ let va = a[cfg.key] ?? "",
+ vb = b[cfg.key] ?? "";
// Handle arrays (e.g. repos, orgs)
- if (Array.isArray(va)) va = va.length
- if (Array.isArray(vb)) vb = vb.length
- const cmp = typeof va === 'string' ? va.localeCompare(vb) : Number(va) - Number(vb)
- return cfg.dir === 'asc' ? cmp : -cmp
- })
- }, [data, cfg.key, cfg.dir])
+ if (Array.isArray(va)) va = va.length;
+ if (Array.isArray(vb)) vb = vb.length;
+ const cmp =
+ typeof va === "string" ? va.localeCompare(vb) : Number(va) - Number(vb);
+ return cfg.dir === "asc" ? cmp : -cmp;
+ });
+ }, [data, cfg.key, cfg.dir]);
- return { sorted, sortConfig: cfg, onSort }
+ return { sorted, sortConfig: cfg, onSort };
}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 0000000..a5ef193
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs));
+}
diff --git a/src/main.jsx b/src/main.jsx
index 76aca09..a36e5f1 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -1,13 +1,17 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import { BrowserRouter } from 'react-router-dom'
-import App from './App'
-import './styles/global.css'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import App from "./App";
+import "./styles/global.css";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-ReactDOM.createRoot(document.getElementById('root')).render(
+const queryClient = new QueryClient();
+ReactDOM.createRoot(document.getElementById("root")).render(
-
+
-)
+);
diff --git a/src/pages/AnalyticsPage.jsx b/src/pages/AnalyticsPage.jsx
index 981a260..8dd37ec 100644
--- a/src/pages/AnalyticsPage.jsx
+++ b/src/pages/AnalyticsPage.jsx
@@ -1,55 +1,66 @@
-import React, { useState, useMemo } from 'react'
+import React, { useState, useMemo } from "react";
import {
- AreaChart, Area, XAxis, YAxis, CartesianGrid,
- Tooltip, Legend, ResponsiveContainer,
-} from 'recharts'
-import { FiDownload, FiRefreshCw } from 'react-icons/fi'
-import { useApp } from '../context/AppContext'
-import { C, PageTitle, InfoBox } from '../components/UI'
-import { buildTimeSeries, exportTrendsCSV } from '../services/analytics'
+ AreaChart,
+ Area,
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+ Legend,
+ ResponsiveContainer,
+} from "recharts";
+import { FiDownload, FiRefreshCw } from "react-icons/fi";
+import { useApp } from "../context/AppContext";
+import { C, PageTitle, InfoBox } from "../components/UI";
+import { buildTimeSeries, exportTrendsCSV } from "../services/analytics";
const TOOLTIP_STYLE = {
contentStyle: {
- background: 'var(--surface)',
- border: '1px solid var(--border)',
+ background: "var(--surface)",
+ border: "1px solid var(--border)",
borderRadius: 6,
fontSize: 12,
},
- labelStyle: { color: 'var(--text)' },
- itemStyle: { color: 'var(--text2)' },
-}
+ labelStyle: { color: "var(--text)" },
+ itemStyle: { color: "var(--text2)" },
+};
export default function AnalyticsPage() {
- const { model, issuesData, runAudit, govLoading } = useApp()
- const [granularity, setGranularity] = useState('monthly')
- const [selectedRepo, setSelectedRepo] = useState('All')
+ const { model, issuesData, runAudit, govLoading } = useApp();
+ const [granularity, setGranularity] = useState("monthly");
+ const [selectedRepo, setSelectedRepo] = useState("All");
- if (!model) return null
+ if (!model) return null;
- const repoNames = ['All', ...model.allRepos.slice(0, 12).map(r => r.name)]
- const hasData = Object.keys(issuesData || {}).length > 0
+ const repoNames = ["All", ...model.allRepos.slice(0, 12).map((r) => r.name)];
+ const hasData = Object.keys(issuesData || {}).length > 0;
const allIssues = useMemo(() => {
- const arr = []
- Object.values(issuesData || {}).forEach(issues => arr.push(...issues))
- return arr
- }, [issuesData])
+ const arr = [];
+ Object.values(issuesData || {}).forEach((issues) => arr.push(...issues));
+ return arr;
+ }, [issuesData]);
const filteredIssues = useMemo(() => {
- if (selectedRepo === 'All') return allIssues
- const key = Object.keys(issuesData || {}).find(k => k.split('/')[1] === selectedRepo)
- return key ? (issuesData[key] || []) : []
- }, [allIssues, selectedRepo, issuesData])
+ if (selectedRepo === "All") return allIssues;
+ const key = Object.keys(issuesData || {}).find(
+ (k) => k.split("/")[1] === selectedRepo
+ );
+ return key ? issuesData[key] || [] : [];
+ }, [allIssues, selectedRepo, issuesData]);
- const series = useMemo(() =>
- buildTimeSeries(filteredIssues, granularity),
+ const series = useMemo(
+ () => buildTimeSeries(filteredIssues, granularity),
[filteredIssues, granularity]
- )
+ );
- const hasSeries = series.length > 0
+ const hasSeries = series.length > 0;
return (
-
{children}
- )
+ );
}
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
new file mode 100644
index 0000000..95e120b
--- /dev/null
+++ b/src/components/layout/Footer.tsx
@@ -0,0 +1,160 @@
+import { Link } from "react-router-dom";
+import {
+ FaGithub,
+ FaLinkedin,
+ FaDiscord,
+ FaYoutube,
+ FaXTwitter,
+} from "react-icons/fa6";
+import { HiOutlineMail } from "react-icons/hi";
+
+const footerLinks = [
+ {
+ label: "Documentation",
+ href: "/docs",
+ },
+ {
+ label: "Terms of Service",
+ href: "/terms",
+ },
+ {
+ label: "Privacy Policy",
+ href: "/privacy",
+ },
+ {
+ label: "API Status",
+ href: "/status",
+ },
+];
+
+const socialLinks = [
+ {
+ label: "Email",
+ href: "mailto:aossie.oss@gmail.com",
+ icon: HiOutlineMail,
+ },
+ {
+ label: "GitHub",
+ href: "https://github.com/AOSSIE-Org",
+ icon: FaGithub,
+ },
+ {
+ label: "Discord",
+ href: "https://discord.com/invite/hjUhu33uAn",
+ icon: FaDiscord,
+ },
+ {
+ label: "LinkedIn",
+ href: "https://www.linkedin.com/company/aossie/",
+ icon: FaLinkedin,
+ },
+ {
+ label: "X",
+ href: "https://x.com/aossie_org",
+ icon: FaXTwitter,
+ },
+ {
+ label: "YouTube",
+ href: "https://www.youtube.com/@AOSSIE-Org",
+ icon: FaYoutube,
+ },
+];
+
+export default function Footer() {
+ return (
+
+ );
+}
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
new file mode 100644
index 0000000..fc2e87a
--- /dev/null
+++ b/src/components/layout/Layout.tsx
@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+import Navbar from "./Navbar";
+import RateLimitBanner from "../RateLimitBanner";
+import Footer from "./Footer";
+
+interface LayoutProps {
+ children: ReactNode;
+}
+
+export default function Layout({ children }: LayoutProps) {
+ return (
+
+ {children}
+
+
+
+ );
+}
diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
new file mode 100644
index 0000000..b82a0cb
--- /dev/null
+++ b/src/components/layout/Navbar.tsx
@@ -0,0 +1,138 @@
+import { FiMenu, FiSettings } from "react-icons/fi";
+import { Button } from "@/components/ui/Button";
+import { cn } from "@/lib/utils";
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import OrgExplorerLogo from "@/assets/logos/org-explorer-logo.svg";
+
+const navItems = [
+ { label: "Overview", href: "/overview" },
+ { label: "Repositories", href: "/repositories" },
+ { label: "Contributors", href: "/contributors" },
+ { label: "Network", href: "/network" },
+ { label: "Analytics", href: "/analytics" },
+ { label: "Governance", href: "/governance" },
+];
+
+export default function Navbar() {
+ const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+ return (
+
+ {/* LEFT */}
+
+
+ {/* MOBILE NAVIGATION */}
+ {mobileMenuOpen && (
+
+ )}
+
+ {/* LOGO */}
+
+ 
+
+
+
+ {/* MIDDLE */}
+
+ {/* DESKTOP NAV */}
+
+
+
+ {/* RIGHT */}
+
+ {/* SETTINGS */}
+
+
+ {/* MOBILE MENU */}
+
+
+
+
exportTrendsCSV(series)}
- style={{ ...C.btn('ghost'), fontSize: 12, display: 'flex', alignItems: 'center', gap: 6 }}
+ style={{
+ ...C.btn("ghost"),
+ fontSize: 12,
+ display: "flex",
+ alignItems: "center",
+ gap: 6,
+ }}
>
+
-
- {['monthly', 'weekly'].map(g => (
+
-
+ {["monthly", "weekly"].map((g) => (
@@ -91,10 +122,19 @@ export default function AnalyticsPage() {
)}
@@ -102,23 +142,33 @@ export default function AnalyticsPage() {
{/* Empty state before audit runs */}
{!hasData && !govLoading && (
+
-
No trend data loaded yet
- Click "Load Issue and PR History" above to fetch issue and PR timestamps for the top repositories. + Click "Load Issue and PR History" above to fetch issue and PR + timestamps for the top repositories.
- This reuses the governance audit fetch โ issues are bucketed by created, closed, and merged timestamps - into weekly or monthly bins with no additional API calls beyond the audit itself. + This reuses the governance audit fetch โ issues are bucketed by + created, closed, and merged timestamps into weekly or monthly bins + with no additional API calls beyond the audit itself.
)} {govLoading && (
- Fetching issue and PR history for top 15 repositories in batches of 5...
+
-
+ Fetching issue and PR history for top 15 repositories in batches of
+ 5...
)}
@@ -127,35 +177,90 @@ export default function AnalyticsPage() {
{hasSeries && (
<>
-
-
+
{/* Issue chart */}
Pull Request Activity
- Created vs Merged vs Closed
+
+ Pull Request Activity
+
+
+ Created vs Merged vs Closed
+
-
-
+
@@ -164,12 +269,14 @@ export default function AnalyticsPage() {
{hasData && !hasSeries && (
Issue Activity
- Created vs Closed
+
+ Issue Activity
+
+
+ Created vs Closed
+
+
- )
+ );
}
diff --git a/src/pages/ContributorsPage.jsx b/src/pages/ContributorsPage.jsx
index 82c347a..adb08c3 100644
--- a/src/pages/ContributorsPage.jsx
+++ b/src/pages/ContributorsPage.jsx
@@ -1,109 +1,245 @@
-import React, { useState, useMemo } from 'react'
-import { FiDownload } from 'react-icons/fi'
-import { useApp } from '../context/AppContext'
-import { C, SortTh, PageTitle, LoadMore } from '../components/UI'
-import { useSortedData } from '../hooks/useSortedData'
-import { computeBusFactor, exportContributorsCSV } from '../services/analytics'
+import React, { useState, useMemo } from "react";
+import { FiDownload } from "react-icons/fi";
+import { useApp } from "../context/AppContext";
+import { C, SortTh, PageTitle, LoadMore } from "../components/UI";
+import { useSortedData } from "../hooks/useSortedData";
+import { computeBusFactor, exportContributorsCSV } from "../services/analytics";
export default function ContributorsPage() {
- const { model } = useApp()
- const [search, setSearch] = useState('')
- const [shown, setShown] = useState(20)
+ const { model } = useApp();
+ const [search, setSearch] = useState("");
+ const [shown, setShown] = useState(20);
- if (!model) return null
- const { contributors } = model
+ if (!model) return null;
+ const { contributors } = model;
- const busFactor = useMemo(() => computeBusFactor(contributors), [contributors])
- const topActive = contributors.slice(0, 10).filter(c => c.freshness > 50).length
- const freshPct = contributors.length ? Math.round(topActive / Math.min(10, contributors.length) * 100) : 0
- const connectors = contributors.filter(c => c.isConnector)
- const crossOrg = contributors.filter(c => c.isCrossOrg)
+ const busFactor = useMemo(
+ () => computeBusFactor(contributors),
+ [contributors]
+ );
+ const topActive = contributors
+ .slice(0, 10)
+ .filter((c) => c.freshness > 50).length;
+ const freshPct = contributors.length
+ ? Math.round((topActive / Math.min(10, contributors.length)) * 100)
+ : 0;
+ const connectors = contributors.filter((c) => c.isConnector);
+ const crossOrg = contributors.filter((c) => c.isCrossOrg);
- const filtered = useMemo(() =>
- contributors.filter(c => !search || c.login.toLowerCase().includes(search.toLowerCase())),
- [contributors, search])
+ const filtered = useMemo(
+ () =>
+ contributors.filter(
+ (c) => !search || c.login.toLowerCase().includes(search.toLowerCase())
+ ),
+ [contributors, search]
+ );
- const { sorted, sortConfig, onSort } = useSortedData(filtered, 'totalContribs', 'desc')
- const visible = sorted.slice(0, shown)
+ const { sorted, sortConfig, onSort } = useSortedData(
+ filtered,
+ "totalContribs",
+ "desc"
+ );
+ const visible = sorted.slice(0, shown);
- const riskColor = r => r === 'critical' ? 'var(--red)' : r === 'high' ? 'var(--amber)' : 'var(--green)'
- const riskBar = r => r === 'critical' ? '90%' : r === 'high' ? '60%' : '25%'
+ const riskColor = (r) =>
+ r === "critical"
+ ? "var(--red)"
+ : r === "high"
+ ? "var(--amber)"
+ : "var(--green)";
+ const riskBar = (r) =>
+ r === "critical" ? "90%" : r === "high" ? "60%" : "25%";
return (
-
No time-series data found for this selection.
- Try selecting "All" repositories.
+
+ Try selecting "All" repositories.
+
)}
+
exportContributorsCSV(contributors)} style={{ ...C.btn('ghost'), fontSize: 12, display: 'flex', alignItems: 'center', gap: 5 }}>
+
}
/>
{/* Signal panels */}
-
-
+
{/* Bus Factor */}
-
+
Bus Factor Risk
-
-
Bus Factor: {busFactor.factor}
-
+
+
-
+ Bus Factor: {busFactor.factor}
+
+
{busFactor.risk.toUpperCase()}
+
{busFactor.factor <= 2 - ? `${busFactor.factor} contributor${busFactor.factor === 1 ? '' : 's'} own${busFactor.factor === 1 ? 's' : ''} over 50% of total commits. Knowledge distribution is heavily skewed.` - : 'Healthy contributor distribution across the organization.'} + ? `${busFactor.factor} contributor${busFactor.factor === 1 ? "" : "s"} own${busFactor.factor === 1 ? "s" : ""} over 50% of total commits. Knowledge distribution is heavily skewed.` + : "Healthy contributor distribution across the organization."}
-
+
RISK LEVEL
- {busFactor.risk.toUpperCase()}
+
+ {busFactor.risk.toUpperCase()}
+
-
-
+
{/* Freshness Index */}
+
Freshness Index
-
-
-
+
+
+
{Math.round(freshPct / 10)}/10
-
- Core Momentum
- {topActive} of top 10 contributors active in last 90 days
-
- ACTIVE RECENTLY: {freshPct}%
+
+ Core Momentum
+
+
+ {topActive} of top 10 contributors active in last 90 days
+
+
+ ACTIVE RECENTLY:{" "}
+ {freshPct}%
+
{connectors.length > 0 && (
-
- {connectors.length} cross-repo connectors (3+ repos)
+
{/* Analytical table */}
-
+
+ {connectors.length}
+ {" "}
+ cross-repo connectors (3+ repos)
)}
{crossOrg.length > 0 && (
-
- {crossOrg.length} cross-org contributors
+
@@ -111,63 +247,186 @@ export default function ContributorsPage() {
+
+ {crossOrg.length}
+ {" "}
+ cross-org contributors
)}
-
+
+
+
- setShown(s => s + 20)} />
+ setShown((s) => s + 20)}
+ />
- )
+ );
}
diff --git a/src/pages/GovernancePage.jsx b/src/pages/GovernancePage.jsx
index 5494ec4..6fc37c1 100644
--- a/src/pages/GovernancePage.jsx
+++ b/src/pages/GovernancePage.jsx
@@ -1,166 +1,296 @@
-import React, { useState, useMemo } from 'react'
-import { FiRefreshCw, FiExternalLink } from 'react-icons/fi'
-import { useApp } from '../context/AppContext'
-import { C, PageTitle, EmptyOk } from '../components/UI'
+import React, { useState, useMemo } from "react";
+import { FiRefreshCw, FiExternalLink } from "react-icons/fi";
+import { useApp } from "../context/AppContext";
+import { C, PageTitle, EmptyOk } from "../components/UI";
const TABS = [
- { key: 'dead', label: 'Dead Issues' },
- { key: 'zombie', label: 'Zombie PRs' },
- { key: 'risky', label: 'Risky Repos' },
- { key: 'license', label: 'No License' },
-]
+ { key: "dead", label: "Dead Issues" },
+ { key: "zombie", label: "Zombie PRs" },
+ { key: "risky", label: "Risky Repos" },
+ { key: "license", label: "No License" },
+];
export default function GovernancePage() {
- const { model, issuesData, runAudit, govLoading } = useApp()
- const [tab, setTab] = useState('dead')
+ const { model, issuesData, runAudit, govLoading } = useApp();
+ const [tab, setTab] = useState("dead");
- if (!model) return null
+ if (!model) return null;
- const hasAudit = Object.keys(issuesData || {}).length > 0
- const daysSince = d => Math.floor((Date.now() - new Date(d)) / 86_400_000)
+ const hasAudit = Object.keys(issuesData || {}).length > 0;
+ const daysSince = (d) => Math.floor((Date.now() - new Date(d)) / 86_400_000);
// Flatten all issues and tag with repo/org
const allIssues = useMemo(() => {
- const arr = []
+ const arr = [];
Object.entries(issuesData || {}).forEach(([key, issues]) => {
- const [org, repo] = key.split('/')
- issues.forEach(i => arr.push({ ...i, repoName: repo, orgName: org }))
- })
- return arr
- }, [issuesData])
+ const [org, repo] = key.split("/");
+ issues.forEach((i) => arr.push({ ...i, repoName: repo, orgName: org }));
+ });
+ return arr;
+ }, [issuesData]);
// Health check 1 โ Dead Issues (>90 days open, not a PR)
const deadIssues = allIssues
- .filter(i => !i.pull_request && daysSince(i.created_at) >= 90)
- .sort((a, b) => daysSince(b.created_at) - daysSince(a.created_at))
+ .filter((i) => !i.pull_request && daysSince(i.created_at) >= 90)
+ .sort((a, b) => daysSince(b.created_at) - daysSince(a.created_at));
// Health check 2 โ Zombie PRs (>90 days open)
const zombiePRs = allIssues
- .filter(i => i.pull_request && daysSince(i.created_at) >= 90)
- .sort((a, b) => daysSince(b.created_at) - daysSince(a.created_at))
+ .filter((i) => i.pull_request && daysSince(i.created_at) >= 90)
+ .sort((a, b) => daysSince(b.created_at) - daysSince(a.created_at));
// Health check 3 โ Risky repos (top-2 contributor concentration >80%)
- const riskyRepos = model.allRepos.filter(r => {
- const c = r.contributors || []
- if (!c.length) return false
- const total = c.reduce((s, x) => s + x.contributions, 0)
- if (!total) return false
- const topTwo = (c[0]?.contributions || 0) + (c[1]?.contributions || 0)
- return topTwo / total > 0.8
- })
+ const riskyRepos = model.allRepos.filter((r) => {
+ const c = r.contributors || [];
+ if (!c.length) return false;
+ const total = c.reduce((s, x) => s + x.contributions, 0);
+ if (!total) return false;
+ const topTwo = (c[0]?.contributions || 0) + (c[1]?.contributions || 0);
+ return topTwo / total > 0.8;
+ });
// Health check 4 โ No license
- const noLicense = model.allRepos.filter(r => !r.license && !r.archived && !r.fork)
+ const noLicense = model.allRepos.filter(
+ (r) => !r.license && !r.archived && !r.fork
+ );
// Issue resolution rate per repo
- const topRepos = model.allRepos.slice(0, 8)
+ const topRepos = model.allRepos.slice(0, 8);
- const counts = { dead: deadIssues.length, zombie: zombiePRs.length, risky: riskyRepos.length, license: noLicense.length }
+ const counts = {
+ dead: deadIssues.length,
+ zombie: zombiePRs.length,
+ risky: riskyRepos.length,
+ license: noLicense.length,
+ };
// Stat card
const StatBox = ({ label, value, sub, color }) => (
- )
+ );
// Issue / PR row
const IssueRow = ({ item, i }) => (
-
-
+
+
-
- {item.repoName}
+
+
+ {item.repoName}
+
-
- {daysSince(item.created_at)} DAYS
+
+
+ {daysSince(item.created_at)} DAYS
+
-
+
{item.html_url && (
-
+
- )
+ );
const TableHead = () => (
- {['TITLE / ID', 'REPOSITORY', 'AGE', 'ACTION'].map(h => (
-
+ {["TITLE / ID", "REPOSITORY", "AGE", "ACTION"].map((h) => (
+
{h}
))}
- )
+ );
return (
-
setSearch(e.target.value)}
+ value={search}
+ onChange={(e) => setSearch(e.target.value)}
placeholder="Search by username..."
style={{ ...C.input, width: 220 }}
/>
-
+
{filtered.length} contributors โ no rank column by design
- |
+ | SIGNALS | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
|
-
-
+ |
-
+
- |
-
-
+
+ |
-
+
+
- {c.totalContribs.toLocaleString()}
+
+ {c.totalContribs.toLocaleString()}
+
{c.repos.length} |
- {c.orgs.length} |
- {c.lastActive?.slice(0, 10) || 'โ'} |
-
- |
- {c.isConnector && CONNECTOR}
- {c.isCrossOrg && CROSS-ORG}
- {c.freshness > 70 && ACTIVE}
+
+ {c.repos.length}
+ |
+
+ {c.orgs.length}
+ |
+
+ {c.lastActive?.slice(0, 10) || "โ"}
+ |
+
+ |
+ {c.isConnector && (
+
+ CONNECTOR
+
+ )}
+ {c.isCrossOrg && (
+
+ CROSS-ORG
+
+ )}
+ {c.freshness > 70 && (
+
+ ACTIVE
+
+ )}
|
{label}
- {value}
- {sub}
+
+ {value}
+
+
+ {sub}
+
{item.title}
- #{item.number} ยท @{item.user?.login}
+
+ #{item.number} ยท @{item.user?.login}
+
+
- {govLoading && Running audit...}
+
+ {govLoading && (
+
+ Running audit...
+
+ )}
}
/>
{/* Summary stat cards */}
-
-
+
{/* Issue Resolution Rate */}
-
Issue Resolution Rate
- Resolution velocity across key repositories
- {topRepos.map(r => {
- const repoIssues = allIssues.filter(i => i.repoName === r.name)
- const closed = repoIssues.filter(i => i.state === 'closed').length
- const total = repoIssues.length
- const rate = total ? Math.round(closed / total * 100) : null
- const color = rate === null ? 'var(--text3)' : rate >= 70 ? 'var(--green)' : rate >= 30 ? 'var(--amber)' : 'var(--red)'
+
+ Issue Resolution Rate
+
+
+ Resolution velocity across key repositories
+
+ {topRepos.map((r) => {
+ const repoIssues = allIssues.filter((i) => i.repoName === r.name);
+ const closed = repoIssues.filter((i) => i.state === "closed").length;
+ const total = repoIssues.length;
+ const rate = total ? Math.round((closed / total) * 100) : null;
+ const color =
+ rate === null
+ ? "var(--text3)"
+ : rate >= 70
+ ? "var(--green)"
+ : rate >= 30
+ ? "var(--amber)"
+ : "var(--red)";
return (
-
+
-
- {r.name}
- {r.orgLogin}
+
+ {r.name}
+
+
+ {r.orgLogin}
+
- {rate === null ? 'No data' : `${rate}%`}
+ {rate === null ? "No data" : `${rate}%`}
+
- )
+ );
})}
{!hasAudit && (
-
{rate !== null && (
-
+
)}
+
Run the audit to populate resolution rates with live issue data.
)}
@@ -168,21 +298,42 @@ export default function GovernancePage() {
{/* Tabbed detail view */}
-
- {TABS.map(t => (
+
+ {TABS.map((t) => (
@@ -190,70 +341,135 @@ export default function GovernancePage() {
{/* Dead Issues */}
- {tab === 'dead' && (
- deadIssues.length ? (
-
-
+ {tab === "dead" &&
+ (deadIssues.length ? (
+
-
+ {tab === "zombie" &&
+ (zombiePRs.length ? (
+
- {riskyRepos.map(r => {
- const c = r.contributors || []
- const total = c.reduce((s, x) => s + x.contributions, 0) || 1
- const pct = Math.round(((c[0]?.contributions || 0) + (c[1]?.contributions || 0)) / total * 100)
+ {tab === "risky" &&
+ (riskyRepos.length ? (
+
+ {riskyRepos.map((r) => {
+ const c = r.contributors || [];
+ const total = c.reduce((s, x) => s + x.contributions, 0) || 1;
+ const pct = Math.round(
+ (((c[0]?.contributions || 0) + (c[1]?.contributions || 0)) /
+ total) *
+ 100
+ );
return (
-
+
- ) :
-
- )
+ );
})}
{r.name}
-
- Top 2 contributors own {pct}% of all commits โ concentration risk
+
- HIGH RISK
+
+ HIGH RISK
+
+ {r.name}
+
+
+ Top 2 contributors own {pct}% of all commits โ
+ concentration risk
- {noLicense.map(r => (
-
- )
+ );
}
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index 2d3c6bc..5a8a517 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -1,142 +1,167 @@
-import React, { useState } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { FiSearch, FiX } from 'react-icons/fi'
-import { useApp } from '../context/AppContext'
-import { C, Spinner } from '../components/UI'
+import React, { useMemo, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
-const QUICK = ['AOSSIE-Org', 'vercel', 'facebook', 'microsoft']
+import { useApp } from "../context/AppContext";
+import { useDebounce } from "@/hooks/useDebounce";
+
+import HeroSection from "@/components/home/HeroSection";
+import StatsSection from "@/components/home/StatsSection";
+import OrgExplorerFeatures from "@/components/home/OrgExplorerFeatures";
+
+const quickExploreItems = ["AOSSIE-Org", "vercel", "facebook", "microsoft"];
export default function HomePage() {
- const { explore, loading, loadMsg, error } = useApp()
- const navigate = useNavigate()
- const [input, setInput] = useState('')
- const [chips, setChips] = useState([])
+ const { explore, loading, loadMsg, error } = useApp();
+
+ const navigate = useNavigate();
+
+ const [input, setInput] = useState("");
+ const [chips, setChips] = useState([]);
+ const [showSuggestions, setShowSuggestions] = useState(false);
+ const [selectedIndex, setSelectedIndex] = useState(-1);
+
+ const debouncedQuery = useDebounce(input, 1000);
+
+ const recent = JSON.parse(localStorage.getItem("oe_recent") || "[]");
+
+ const { data: suggestions = [], isLoading } = useQuery({
+ queryKey: ["github-orgs", debouncedQuery],
+
+ queryFn: async () => {
+ if (!debouncedQuery.trim()) return [];
+
+ const response = await fetch(
+ `https://api.github.com/search/users?q=${debouncedQuery}+type:org`
+ );
+
+ if (!response.ok) {
+ throw new Error("Failed to fetch organizations");
+ }
+
+ const data = await response.json();
+
+ return data.items;
+ },
+
+ enabled: !!debouncedQuery.trim(),
+ staleTime: 1000 * 60 * 5,
+ });
+
+ const filteredSuggestions = useMemo(() => {
+ return suggestions.filter(
+ (item) => item.login.toLowerCase() !== input.toLowerCase()
+ );
+ }, [suggestions, input]);
+
+ const addChip = (raw) => {
+ const parts = raw
+ .split(/[,+\s]+/)
+ .map((s) => s.trim())
+ .filter(Boolean);
+
+ setChips((prev) => [...new Set([...prev, ...parts])]);
+
+ setInput("");
+ };
+
+ const removeChip = (c) => {
+ setChips((prev) => prev.filter((x) => x !== c));
+ };
+
+ const go = async (targets) => {
+ const orgs =
+ targets || (chips.length ? chips : input.trim() ? [input.trim()] : []);
- const recent = JSON.parse(localStorage.getItem('oe_recent') || '[]')
+ if (!orgs.length) return;
- const addChip = raw => {
- const parts = raw.split(/[,+\s]+/).map(s => s.trim()).filter(Boolean)
- setChips(prev => [...new Set([...prev, ...parts])])
- setInput('')
- }
+ await explore(orgs);
- const removeChip = c => setChips(prev => prev.filter(x => x !== c))
+ navigate("/overview");
+ };
- const handleKey = e => {
- if ((e.key === 'Enter' || e.key === ',') && input.trim()) {
- e.preventDefault()
- addChip(input)
+ const handleSelectOrg = async (org) => {
+ const finalValue = Array.isArray(org) ? org : org != null ? [org] : [];
+
+ await go(finalValue);
+ };
+
+ const handleKey = (e) => {
+ if (e.key === "Backspace" && !input && chips.length) {
+ setChips((prev) => prev.slice(0, -1));
+ }
+
+ if (filteredSuggestions.length) {
+ if (e.key === "ArrowDown") {
+ e.preventDefault();
+
+ setSelectedIndex((prev) =>
+ prev < filteredSuggestions.length - 1 ? prev + 1 : prev
+ );
+ }
+
+ if (e.key === "ArrowUp") {
+ e.preventDefault();
+
+ setSelectedIndex((prev) => (prev > 0 ? prev - 1 : 0));
+ }
+
+ if (e.key === "Enter" && selectedIndex >= 0) {
+ e.preventDefault();
+
+ addChip(filteredSuggestions[selectedIndex].login);
+
+ handleSelectOrg(filteredSuggestions[selectedIndex].login);
+
+ return;
+ }
}
- if (e.key === 'Backspace' && !input && chips.length) {
- setChips(prev => prev.slice(0, -1))
+
+ if ((e.key === "Enter" || e.key === ",") && input.trim()) {
+ e.preventDefault();
+
+ addChip(input);
}
- }
+ };
- const go = async (targets) => {
- const orgs = targets || (chips.length ? chips : input.trim() ? [input.trim()] : [])
- if (!orgs.length) return
- await explore(orgs)
- navigate('/overview')
- }
+ const handleSubmit = (e) => {
+ e.preventDefault();
+
+ go();
+ };
return (
-
+ {tab === "license" &&
+ (noLicense.length ? (
+
+ {noLicense.map((r) => (
+
))}
- ) :
-
- NO LICENSE
+
+ NO LICENSE
+
{r.name}
- {r.orgLogin}
+
+ {r.name}
+
+
+ {r.orgLogin}
+
- {/* Hero */}
-
-
-
- {/* Search */}
- - Architect Your{' '} - Insights -
-- Unified analytics across one or many GitHub organizations. Multi-org portfolio analysis, contributor network graphs, time-series trends, and governance audits โ entirely in the browser. -
-
-
-
- {/* Loading */}
- {loading && (
-
- removeChip(c)} />
-
- ))}
- setInput(e.target.value)}
- onKeyDown={handleKey}
- onBlur={() => input.trim() && addChip(input)}
- placeholder={chips.length ? 'Add another org...' : 'AOSSIE-Org, StabilityNexus, DjedAlliance...'}
- style={{ flex: 1, minWidth: 160, background: 'none', color: 'var(--text)', fontSize: 14, padding: '4px 8px', border: 'none', outline: 'none' }}
- />
-
-
- - Type an org name and press Enter or comma to add. Add multiple orgs to analyze as a unified portfolio. -
- {error &&{error}
} -
-
- )}
-
- {/* Recent */}
- {recent.length > 0 && !loading && (
- {loadMsg}
-
- Recent searches
-
- )}
-
- {/* Quick explore */}
- {!loading && (
-
- {recent.map(r => (
-
- ))}
-
-
- Quick explore
-
+
+
- )
+
+
+ );
}
diff --git a/src/pages/NetworkPage.jsx b/src/pages/NetworkPage.jsx
index 14549eb..634c98f 100644
--- a/src/pages/NetworkPage.jsx
+++ b/src/pages/NetworkPage.jsx
@@ -1,200 +1,381 @@
-import React, { useEffect, useRef, useState } from 'react'
-import * as d3 from 'd3'
-import { useApp } from '../context/AppContext'
-import { C, PageTitle } from '../components/UI'
+import React, { useEffect, useRef, useState } from "react";
+import * as d3 from "d3";
+import { useApp } from "../context/AppContext";
+import { C, PageTitle } from "../components/UI";
export default function NetworkPage() {
- const { model } = useApp()
- const svgRef = useRef(null)
- const simRef = useRef(null)
- const [tooltip, setTooltip] = useState(null)
- const [showRepos, setShowRepos] = useState(true)
- const [showContribs, setShowContribs] = useState(true)
+ const { model } = useApp();
+ const svgRef = useRef(null);
+ const simRef = useRef(null);
+ const [tooltip, setTooltip] = useState(null);
+ const [showRepos, setShowRepos] = useState(true);
+ const [showContribs, setShowContribs] = useState(true);
useEffect(() => {
- if (!svgRef.current || !model?.allRepos.length) return
+ if (!svgRef.current || !model?.allRepos.length) return;
- const el = svgRef.current
- const W = el.clientWidth || 860
- const H = 580
- const now = Date.now()
+ const el = svgRef.current;
+ const W = el.clientWidth || 860;
+ const H = 580;
+ const now = Date.now();
- const svg = d3.select(el)
- svg.selectAll('*').remove()
- svg.attr('viewBox', `0 0 ${W} ${H}`)
+ const svg = d3.select(el);
+ svg.selectAll("*").remove();
+ svg.attr("viewBox", `0 0 ${W} ${H}`);
// Top repos and contributors for performance
- const topRepos = model.allRepos.slice(0, 30)
- const topContribs = model.contributors.slice(0, 40)
-
- const nodes = []
- if (showRepos) topRepos.forEach(r => nodes.push({ id: `repo:${r.name}`, type: 'repo', data: r, ts: new Date(r.pushed_at).getTime() }))
- if (showContribs) topContribs.forEach(c => nodes.push({ id: `user:${c.login}`, type: 'contributor', data: c, ts: c.lastActive ? new Date(c.lastActive).getTime() : 0 }))
-
- const nodeSet = new Set(nodes.map(n => n.id))
- const links = []
- topContribs.forEach(c => {
- c.repos.slice(0, 5).forEach(repo => {
- const s = `user:${c.login}`, t = `repo:${repo.name}`
- if (nodeSet.has(s) && nodeSet.has(t)) links.push({ source: s, target: t, weight: repo.count })
- })
- })
+ const topRepos = model.allRepos.slice(0, 30);
+ const topContribs = model.contributors.slice(0, 40);
+
+ const nodes = [];
+ if (showRepos)
+ topRepos.forEach((r) =>
+ nodes.push({
+ id: `repo:${r.name}`,
+ type: "repo",
+ data: r,
+ ts: new Date(r.pushed_at).getTime(),
+ })
+ );
+ if (showContribs)
+ topContribs.forEach((c) =>
+ nodes.push({
+ id: `user:${c.login}`,
+ type: "contributor",
+ data: c,
+ ts: c.lastActive ? new Date(c.lastActive).getTime() : 0,
+ })
+ );
+
+ const nodeSet = new Set(nodes.map((n) => n.id));
+ const links = [];
+ topContribs.forEach((c) => {
+ c.repos.slice(0, 5).forEach((repo) => {
+ const s = `user:${c.login}`,
+ t = `repo:${repo.name}`;
+ if (nodeSet.has(s) && nodeSet.has(t))
+ links.push({ source: s, target: t, weight: repo.count });
+ });
+ });
// Scales
- const recencyY = d3.scaleLinear().domain([now - 365 * 86_400_000, now]).range([H * 0.83, H * 0.14]).clamp(true)
- const repoRadius = d3.scaleSqrt().domain([0, d3.max(topRepos, r => r.stargazers_count) || 1]).range([5, 22])
- const contribR = d3.scaleSqrt().domain([0, d3.max(topContribs, c => c.totalContribs) || 1]).range([4, 14])
- const edgeW = d3.scaleLinear().domain([1, d3.max(links, l => l.weight) || 1]).range([1, 6])
- const healthColor = h => h >= 70 ? '#22c55e' : h >= 40 ? '#f59e0b' : '#ef4444'
+ const recencyY = d3
+ .scaleLinear()
+ .domain([now - 365 * 86_400_000, now])
+ .range([H * 0.83, H * 0.14])
+ .clamp(true);
+ const repoRadius = d3
+ .scaleSqrt()
+ .domain([0, d3.max(topRepos, (r) => r.stargazers_count) || 1])
+ .range([5, 22]);
+ const contribR = d3
+ .scaleSqrt()
+ .domain([0, d3.max(topContribs, (c) => c.totalContribs) || 1])
+ .range([4, 14]);
+ const edgeW = d3
+ .scaleLinear()
+ .domain([1, d3.max(links, (l) => l.weight) || 1])
+ .range([1, 6]);
+ const healthColor = (h) =>
+ h >= 70 ? "#22c55e" : h >= 40 ? "#f59e0b" : "#ef4444";
- const g = svg.append('g')
- const zoom = d3.zoom().scaleExtent([0.2, 4]).on('zoom', e => g.attr('transform', e.transform))
- svg.call(zoom)
+ const g = svg.append("g");
+ const zoom = d3
+ .zoom()
+ .scaleExtent([0.2, 4])
+ .on("zoom", (e) => g.attr("transform", e.transform));
+ svg.call(zoom);
// Draw edges
- const link = g.append('g')
- .selectAll('line').data(links).join('line')
- .attr('stroke', '#2a2a2a')
- .attr('stroke-opacity', 0.8)
- .attr('stroke-width', d => edgeW(d.weight))
+ const link = g
+ .append("g")
+ .selectAll("line")
+ .data(links)
+ .join("line")
+ .attr("stroke", "#2a2a2a")
+ .attr("stroke-opacity", 0.8)
+ .attr("stroke-width", (d) => edgeW(d.weight));
// Draw nodes
- const node = g.append('g')
- .selectAll('g').data(nodes).join('g')
- .attr('cursor', 'pointer')
+ const node = g
+ .append("g")
+ .selectAll("g")
+ .data(nodes)
+ .join("g")
+ .attr("cursor", "pointer")
.call(
- d3.drag()
- .on('start', (e, d) => { if (!e.active) sim.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y })
- .on('drag', (e, d) => { d.fx = e.x; d.fy = e.y })
- .on('end', (e, d) => { if (!e.active) sim.alphaTarget(0); d.fx = null; d.fy = null })
+ d3
+ .drag()
+ .on("start", (e, d) => {
+ if (!e.active) sim.alphaTarget(0.3).restart();
+ d.fx = d.x;
+ d.fy = d.y;
+ })
+ .on("drag", (e, d) => {
+ d.fx = e.x;
+ d.fy = e.y;
+ })
+ .on("end", (e, d) => {
+ if (!e.active) sim.alphaTarget(0);
+ d.fx = null;
+ d.fy = null;
+ })
)
- .on('mouseover', (event, d) => {
+ .on("mouseover", (event, d) => {
link
- .attr('stroke', l => (l.source.id === d.id || l.target.id === d.id) ? '#f5c518' : '#2a2a2a')
- .attr('stroke-opacity', l => (l.source.id === d.id || l.target.id === d.id) ? 1 : 0.08)
- const rect = el.getBoundingClientRect()
- setTooltip({ x: event.clientX - rect.left + 14, y: event.clientY - rect.top - 14, node: d })
- })
- .on('mouseout', () => {
- link.attr('stroke', '#2a2a2a').attr('stroke-opacity', 0.8)
- setTooltip(null)
+ .attr("stroke", (l) =>
+ l.source.id === d.id || l.target.id === d.id ? "#f5c518" : "#2a2a2a"
+ )
+ .attr("stroke-opacity", (l) =>
+ l.source.id === d.id || l.target.id === d.id ? 1 : 0.08
+ );
+ const rect = el.getBoundingClientRect();
+ setTooltip({
+ x: event.clientX - rect.left + 14,
+ y: event.clientY - rect.top - 14,
+ node: d,
+ });
})
+ .on("mouseout", () => {
+ link.attr("stroke", "#2a2a2a").attr("stroke-opacity", 0.8);
+ setTooltip(null);
+ });
- node.each(function(d) {
- const el = d3.select(this)
- if (d.type === 'repo') {
- const r = repoRadius(d.data.stargazers_count || 0)
- el.append('rect')
- .attr('width', r * 2).attr('height', r * 2)
- .attr('x', -r).attr('y', -r).attr('rx', 3)
- .attr('fill', healthColor(d.data.healthScore || 0))
- .attr('stroke', '#0d0d0d').attr('stroke-width', 1.5)
+ node.each(function (d) {
+ const el = d3.select(this);
+ if (d.type === "repo") {
+ const r = repoRadius(d.data.stargazers_count || 0);
+ el.append("rect")
+ .attr("width", r * 2)
+ .attr("height", r * 2)
+ .attr("x", -r)
+ .attr("y", -r)
+ .attr("rx", 3)
+ .attr("fill", healthColor(d.data.healthScore || 0))
+ .attr("stroke", "#0d0d0d")
+ .attr("stroke-width", 1.5);
} else {
- el.append('circle')
- .attr('r', contribR(d.data.totalContribs || 1))
- .attr('fill', d.data.isConnector ? '#f5c518' : '#555')
- .attr('stroke', '#0d0d0d').attr('stroke-width', 1.5)
+ el.append("circle")
+ .attr("r", contribR(d.data.totalContribs || 1))
+ .attr("fill", d.data.isConnector ? "#f5c518" : "#555")
+ .attr("stroke", "#0d0d0d")
+ .attr("stroke-width", 1.5);
}
- const labelY = d.type === 'repo'
- ? repoRadius(d.data.stargazers_count || 0) + 11
- : contribR(d.data.totalContribs || 1) + 11
- const raw = d.type === 'repo' ? d.data.name : d.data.login
- el.append('text')
- .text(raw.length > 14 ? raw.slice(0, 12) + '..' : raw)
- .attr('text-anchor', 'middle').attr('dy', labelY)
- .attr('font-size', 9).attr('fill', '#666')
- .attr('pointer-events', 'none')
- })
+ const labelY =
+ d.type === "repo"
+ ? repoRadius(d.data.stargazers_count || 0) + 11
+ : contribR(d.data.totalContribs || 1) + 11;
+ const raw = d.type === "repo" ? d.data.name : d.data.login;
+ el.append("text")
+ .text(raw.length > 14 ? raw.slice(0, 12) + ".." : raw)
+ .attr("text-anchor", "middle")
+ .attr("dy", labelY)
+ .attr("font-size", 9)
+ .attr("fill", "#666")
+ .attr("pointer-events", "none");
+ });
// Force simulation with y-force for recency (Section 3.2.7)
- const sim = d3.forceSimulation(nodes)
- .force('link', d3.forceLink(links).id(d => d.id).distance(75).strength(0.4))
- .force('charge', d3.forceManyBody().strength(-170))
- .force('center', d3.forceCenter(W / 2, H / 2))
- .force('collide', d3.forceCollide(d => d.type === 'repo' ? repoRadius(d.data.stargazers_count || 0) + 8 : 16))
- .force('y', d3.forceY(d => recencyY(d.ts || 0)).strength(0.05))
+ const sim = d3
+ .forceSimulation(nodes)
+ .force(
+ "link",
+ d3
+ .forceLink(links)
+ .id((d) => d.id)
+ .distance(75)
+ .strength(0.4)
+ )
+ .force("charge", d3.forceManyBody().strength(-170))
+ .force("center", d3.forceCenter(W / 2, H / 2))
+ .force(
+ "collide",
+ d3.forceCollide((d) =>
+ d.type === "repo" ? repoRadius(d.data.stargazers_count || 0) + 8 : 16
+ )
+ )
+ .force("y", d3.forceY((d) => recencyY(d.ts || 0)).strength(0.05));
- simRef.current = sim
+ simRef.current = sim;
- sim.on('tick', () => {
+ sim.on("tick", () => {
link
- .attr('x1', d => d.source.x).attr('y1', d => d.source.y)
- .attr('x2', d => d.target.x).attr('y2', d => d.target.y)
- node.attr('transform', d => `translate(${d.x},${d.y})`)
- })
+ .attr("x1", (d) => d.source.x)
+ .attr("y1", (d) => d.source.y)
+ .attr("x2", (d) => d.target.x)
+ .attr("y2", (d) => d.target.y);
+ node.attr("transform", (d) => `translate(${d.x},${d.y})`);
+ });
- return () => sim.stop()
- }, [model, showRepos, showContribs])
+ return () => sim.stop();
+ }, [model, showRepos, showContribs]);
- if (!model) return null
+ if (!model) return null;
return (
-
- {QUICK.map(q => (
-
- ))}
-
+
+
- )}
-
- {/* Stats bar */}
-
- {[['5,000', 'req/hr with PAT', 'var(--green)'], ['1HR', 'intelligent cache', 'var(--green)'], ['ZERO', 'backend latency', 'var(--accent)']].map(([v, l, color]) => (
-
-
-
- ))}
- {v}
- {l}
-
+
-
- {[['Repositories', showRepos, setShowRepos], ['Contributors', showContribs, setShowContribs]].map(([label, val, set]) => (
-