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"; export const RepoHeader: FC<{ owner: string; repo: string; starCount?: number; starred?: boolean; forkCount?: number; currentUser?: string | null; forkedFrom?: string | null; archived?: boolean; isTemplate?: boolean; }> = ({ owner, repo, starCount, starred, forkCount, currentUser, forkedFrom, archived, isTemplate, }) => (

{owner} / {repo} {archived && ( Archived )} {isTemplate && ( Template )}

{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" | "settings" | "ask" | "spec" | "health"; }> = ({ owner, repo, active }) => (

Code Issues Wiki Pull Requests Projects Commits Actions Releases {"\u25CF"} Gates Insights {"⬡"} Health {"\u2728"} Explain {"\u2728"} Ask AI {"\u2728"} Spec

); 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 ( ); }; 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 ( ); }; 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 (

      
              {html([highlightedHtml] as unknown as TemplateStringsArray)}

); }; export const PlainCode: FC<{ lines: string[] }> = ({ lines }) => (

    
        {lines.map((line, i) => (
          
        ))}
      
            {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)}

); })}

); export const DiffView: FC<{ raw: string; files: GitDiffFile[] }> = ({ raw, files, }) => { const sections = parseDiff(raw); return (

Showing{" "} {files.length} changed file{files.length !== 1 ? "s" : ""} with{" "} +{files.reduce((s, f) => s + f.additions, 0)} {" "} and{" "} -{files.reduce((s, f) => s + f.deletions, 0)}

{sections.map((section) => (

{section.path}

{section.lines.map((line) => { let cls = "line"; if (line.startsWith("+")) cls += " line-add"; else if (line.startsWith("-")) cls += " line-del"; else if (line.startsWith("@@")) cls += " line-hunk"; return {line + "\n"}; })}

))}

); }; export const RepoCard: FC<{ repo: Repository; ownerName: string }> = ({ repo, ownerName, }) => (

{repo.name}

{repo.description &&

{repo.description}

}

{repo.isPrivate && Private} {"\u2606"} {repo.starCount} {repo.pushedAt && ( Updated {formatRelativeDate(repo.pushedAt.toString())} )}

); function parseDiff(raw: string): Array<{ path: string; lines: string[] }> { const sections: Array<{ path: string; lines: string[] }> = []; const diffRegex = /^diff --git a\/(.+?) b\/.+$/; let current: { path: string; lines: string[] } | null = null; for (const line of raw.split("\n")) { const match = line.match(diffRegex); if (match) { if (current) sections.push(current); current = { path: match[1], lines: [] }; continue; } if (current && !line.startsWith("diff --git")) { if ( line.startsWith("index ") || line.startsWith("--- ") || line.startsWith("+++ ") || line.startsWith("new file") || line.startsWith("deleted file") || line.startsWith("old mode") || line.startsWith("new mode") ) { continue; } current.lines.push(line); } } if (current) sections.push(current); return sections; } function formatSize(bytes: number): string { if (bytes < 1024) return `${bytes} B`; if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`; return `${(bytes / (1024 * 1024)).toFixed(1)} MB`; } function formatRelativeDate(dateStr: string): string { const date = new Date(dateStr); const now = new Date(); const diffMs = now.getTime() - date.getTime(); const diffMins = Math.floor(diffMs / 60000); if (diffMins < 1) return "just now"; if (diffMins < 60) return `${diffMins} minute${diffMins > 1 ? "s" : ""} ago`; const diffHours = Math.floor(diffMins / 60); if (diffHours < 24) return `${diffHours} hour${diffHours > 1 ? "s" : ""} ago`; const diffDays = Math.floor(diffHours / 24); if (diffDays < 30) return `${diffDays} day${diffDays > 1 ? "s" : ""} ago`; return date.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric", }); }