import type { FC } from "hono/jsx"; import { html } from "hono/html"; import type { GitCommit, GitTreeEntry, GitDiffFile } from "../git/repository"; import type { Repository } from "../db/schema"; import { parseDiff, pairLines } from "../lib/diff"; import type { DiffLine, ParsedFile, SplitRow } from "../lib/diff"; /** * Describes the most recent push to a repo, used by RepoHeader to render * the Push Watch discoverability indicator. * * - ageMs < 5 min \u2192 pulsing red "\u25cf Live" badge * - ageMs < 24 hr \u2192 dimmer "\u25cb Watch" link * - otherwise \u2192 nothing shown */ export interface RecentPush { sha: string; ageMs: number; } export const RepoHeader: FC<{ owner: string; repo: string; starCount?: number; starred?: boolean; forkCount?: number; currentUser?: string | null; forkedFrom?: string | null; archived?: boolean; isTemplate?: boolean; /** Most recent push info for Push Watch discoverability indicator. */ recentPush?: RecentPush | null; /** 0-100 health score badge rendered after the repo name. Optional — omit to hide. */ healthScore?: number; }> = ({ owner, repo, starCount, starred, forkCount, currentUser, forkedFrom, archived, isTemplate, recentPush, healthScore, }) => { const FIVE_MIN = 5 * 60 * 1000; const TWENTY_FOUR_HR = 24 * 60 * 60 * 1000; const isLive = recentPush != null && recentPush.ageMs < FIVE_MIN; const isRecent = recentPush != null && recentPush.ageMs < TWENTY_FOUR_HR; const healthColor = healthScore === undefined ? null : healthScore >= 80 ? "#34d399" : healthScore >= 50 ? "#facc15" : "#f87171"; return (
{owner} / {repo} {archived && ( Archived )} {isTemplate && ( Template )} {healthScore !== undefined && healthColor && ( ♥ Health {healthScore} )} {isLive && recentPush && ( Live )} {!isLive && isRecent && recentPush && ( Watch )}
{forkedFrom && (
forked from {forkedFrom}
)}
{currentUser && currentUser !== owner && (
)} {starCount !== undefined && ( currentUser ? (
) : ( {"\u2606"} {starCount} ) )}
); }; export const RepoNav: FC<{ owner: string; repo: string; active: | "code" | "commits" | "issues" | "pulls" | "releases" | "actions" | "gates" | "insights" | "explain" | "changelog" | "semantic" | "wiki" | "projects" | "agents" | "discussions" | "security" | "settings" | "debt-map" | "migrate" | "deployments" | "nl-search" | "contributors" | "pulse" | "traffic" | "pipeline" | "workspace" | "archaeology"; /** Current authenticated user — used for owner-only tab gating. */ currentUser?: string | null; /** Repo owner username — used for owner-only tab gating. */ repoOwner?: string; }> = ({ owner, repo, active, currentUser, repoOwner }) => (
Code Issues Discussions Wiki Pull Requests Projects Commits Actions Releases Contributors Pulse {currentUser && repoOwner && currentUser === repoOwner && ( Traffic )} {"\u25CF"} Gates Security Settings Deployments Pipeline Insights Agents {"\u2728"} Explain {"\u2728"} Ask AI {"✨"} Workspace {"\u2728"} Spec {"\u2728"} Tests {"\u2593"} Debt Map {"\u2728"} NL Search {"\ud83c\udfdb"} Archaeology
); export const BranchSwitcher: FC<{ owner: string; repo: string; currentRef: string; branches: string[]; pathType: "tree" | "blob" | "commits"; subPath?: string; }> = ({ owner, repo, currentRef, branches, pathType, subPath }) => { if (branches.length <= 1) { return
{currentRef}
; } return (
{branches.map((branch) => { let href: string; if (pathType === "commits") { href = `/${owner}/${repo}/commits/${branch}`; } else if (subPath) { href = `/${owner}/${repo}/${pathType}/${branch}/${subPath}`; } else { href = `/${owner}/${repo}/tree/${branch}`; } return ( {branch} ); })}
); }; export const Breadcrumb: FC<{ owner: string; repo: string; ref: string; path: string; }> = ({ owner, repo, ref, path }) => { const parts = path.split("/").filter(Boolean); const crumbs: { name: string; href: string }[] = [ { name: repo, href: `/${owner}/${repo}/tree/${ref}` }, ]; let accumulated = ""; for (const part of parts) { accumulated += (accumulated ? "/" : "") + part; crumbs.push({ name: part, href: `/${owner}/${repo}/tree/${ref}/${accumulated}`, }); } return (
{crumbs.map((crumb, i) => ( <> {i > 0 && /} {i === crumbs.length - 1 ? ( {crumb.name} ) : ( {crumb.name} )} ))}
); }; export const FileTable: FC<{ entries: GitTreeEntry[]; owner: string; repo: string; ref: string; path: string; }> = ({ entries, owner, repo, ref, path }) => ( {entries.map((entry) => { const fullPath = path ? `${path}/${entry.name}` : entry.name; const href = entry.type === "tree" ? `/${owner}/${repo}/tree/${ref}/${fullPath}` : `/${owner}/${repo}/blob/${ref}/${fullPath}`; return ( ); })}
{entry.type === "tree" ? "\u{1F4C1}" : "\u{1F4C4}"} {entry.name} {entry.size !== undefined ? formatSize(entry.size) : ""}
); export const HighlightedCode: FC<{ highlightedHtml: string; lineCount: number; }> = ({ highlightedHtml, lineCount }) => { const lineNums = Array.from({ length: lineCount }, (_, i) => i + 1); return ( 
                {lineNums.map((n) => (
                  <>
                    {n}
                    {"\n"}
                  
                ))}
              
{html([highlightedHtml] as unknown as TemplateStringsArray)}
); }; export const PlainCode: FC<{ lines: string[] }> = ({ lines }) => (
{lines.map((line, i) => ( ))}
{i + 1} {line}
); export const CommitList: FC<{ commits: GitCommit[]; owner: string; repo: string; verifications?: Record; }> = ({ commits, owner, repo, verifications }) => (
{commits.map((commit) => { const v = verifications?.[commit.sha]; return (
{commit.message} {v?.verified && ( Verified )}
{commit.author} committed {formatRelativeDate(commit.date)}
{commit.sha.slice(0, 7)}
); })}
); // ---- Diff viewer ---------------------------------------------------------- const _diffScript = ` function diffToggleView(id,mode){ var v=document.getElementById(id);if(!v)return; v.querySelectorAll('.diff-table-inline').forEach(function(t){t.hidden=(mode==='split');}); v.querySelectorAll('.diff-table-split').forEach(function(t){t.hidden=(mode!=='split');}); v.querySelectorAll('.diff-view-btn').forEach(function(b){b.classList.remove('active');}); var btn=v.querySelector('.diff-view-btn-'+mode);if(btn)btn.classList.add('active'); } function diffToggleFile(id){ var body=document.getElementById(id);if(!body)return; body.hidden=!body.hidden; var hdr=body.previousElementSibling;if(hdr)hdr.classList.toggle('collapsed',body.hidden); } `; export const DiffView: FC<{ raw: string; files: GitDiffFile[] }> = ({ raw, files, }) => { const parsed = parseDiff(raw); const totalAdd = files.reduce((s, f) => s + f.additions, 0); const totalDel = files.reduce((s, f) => s + f.deletions, 0); if (parsed.length === 0 && files.length === 0) { return (

No changes.

); } return (