Pre-launch — Gluecron is in final validation. Public signups and git hosting for non-owner users open after launch review.
ccantynz/Gluecron.com
CodeIssuesPull RequestsActionsSecurityInsightsSettings
✨ AI
ExplainAsk AIWorkspaceSpec to PRTestsNL SearchDebt MapArchaeology
More
CommitsDiscussionsWikiProjectsReleasesContributorsPulseGatesDeploymentsPipelineAgents
Blame · Line-by-line history

components.tsx

Each line is annotated with the commit that last touched it. Click any SHA to jump to that commit and see the surrounding change.

Gluecron.com/src/views/components.tsx
components.tsxBlame613 lines · 1 contributor
Normal viewRaw
fc1817aClaude1import type { FC } from "hono/jsx";
06d5ffeClaude2import { html } from "hono/html";
fc1817aClaude3import type { GitCommit, GitTreeEntry, GitDiffFile } from "../git/repository";
06d5ffeClaude4import type { Repository } from "../db/schema";
fc1817aClaude5
8c790e0Claude6/**
7 * Describes the most recent push to a repo, used by RepoHeader to render
8 * the Push Watch discoverability indicator.
9 *
10 * - ageMs < 5 min \u2192 pulsing red "\u25cf Live" badge
11 * - ageMs < 24 hr \u2192 dimmer "\u25cb Watch" link
12 * - otherwise \u2192 nothing shown
13 */
14export interface RecentPush {
15 sha: string;
16 ageMs: number;
17}
18
06d5ffeClaude19export const RepoHeader: FC<{
20 owner: string;
21 repo: string;
22 starCount?: number;
23 starred?: boolean;
c81ab7aClaude24 forkCount?: number;
06d5ffeClaude25 currentUser?: string | null;
c81ab7aClaude26 forkedFrom?: string | null;
71cd5ecClaude27 archived?: boolean;
28 isTemplate?: boolean;
8c790e0Claude29 /** Most recent push info for Push Watch discoverability indicator. */
30 recentPush?: RecentPush | null;
77cf834Claude31 /** 0-100 health score badge rendered after the repo name. Optional — omit to hide. */
32 healthScore?: number;
71cd5ecClaude33}> = ({
34 owner,
35 repo,
36 starCount,
37 starred,
38 forkCount,
39 currentUser,
40 forkedFrom,
41 archived,
42 isTemplate,
8c790e0Claude43 recentPush,
77cf834Claude44 healthScore,
8c790e0Claude45}) => {
46 const FIVE_MIN = 5 * 60 * 1000;
47 const TWENTY_FOUR_HR = 24 * 60 * 60 * 1000;
48 const isLive = recentPush != null && recentPush.ageMs < FIVE_MIN;
49 const isRecent = recentPush != null && recentPush.ageMs < TWENTY_FOUR_HR;
50
77cf834Claude51 const healthColor =
52 healthScore === undefined ? null :
53 healthScore >= 80 ? "#34d399" :
54 healthScore >= 50 ? "#facc15" :
55 "#f87171";
56
8c790e0Claude57 return (
58 <div class="repo-header">
59 <div>
60 <div class="repo-header-title">
61 <a href={`/${owner}`} class="owner">
62 {owner}
63 </a>
64 <span class="separator">/</span>
65 <a href={`/${owner}/${repo}`} class="name">
66 {repo}
67 </a>
68 {archived && (
69 <span
70 class="repo-header-pill repo-header-pill-archived"
71 title="Read-only: pushes and new issues/PRs disabled"
72 >
73 Archived
74 </span>
75 )}
76 {isTemplate && (
77 <span
78 class="repo-header-pill repo-header-pill-template"
79 title="This repository can be used as a template"
80 >
81 Template
82 </span>
83 )}
77cf834Claude84 {healthScore !== undefined && healthColor && (
85 <a
86 href={`/${owner}/${repo}/health`}
87 title={`Repository health score: ${healthScore}/100 — click for breakdown`}
88 style={`display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:9999px;font-size:11px;font-weight:700;text-decoration:none;color:${healthColor};background:${healthColor}22;border:1px solid ${healthColor}44;`}
89 >
90 &#x2665; Health {healthScore}
91 </a>
92 )}
8c790e0Claude93 {isLive && recentPush && (
94 <a
95 href={`/${owner}/${repo}/push/${recentPush.sha}`}
96 class="repo-header-live-badge repo-header-live-badge--live"
97 title="Push in progress \u2014 watch live gate + deploy status"
98 aria-label="Live push \u2014 click to watch status"
99 >
100 <span class="repo-header-live-dot" aria-hidden="true">{"\u25cf"}</span>
101 Live
102 </a>
103 )}
104 {!isLive && isRecent && recentPush && (
105 <a
106 href={`/${owner}/${repo}/push/${recentPush.sha}`}
107 class="repo-header-live-badge repo-header-live-badge--recent"
108 title="Watch the most recent push's gate + deploy results"
109 aria-label="Watch most recent push"
110 >
111 <span aria-hidden="true">{"\u25cb"}</span>
112 Watch
113 </a>
114 )}
115 </div>
116 {forkedFrom && (
117 <div class="repo-header-fork">
118 forked from <a href={`/${forkedFrom}`}>{forkedFrom}</a>
119 </div>
71cd5ecClaude120 )}
c81ab7aClaude121 </div>
8c790e0Claude122 <div class="repo-header-actions">
123 {currentUser && currentUser !== owner && (
124 <form method="post" action={`/${owner}/${repo}/fork`} style="display:inline">
125 <button type="submit" class="star-btn">
126 {"\u2442"} Fork {forkCount !== undefined && forkCount > 0 ? forkCount : ""}
06d5ffeClaude127 </button>
128 </form>
8c790e0Claude129 )}
130 {starCount !== undefined && (
131 currentUser ? (
132 <form method="post" action={`/${owner}/${repo}/star`} style="display:inline">
133 <button
134 type="submit"
135 class={`star-btn${starred ? " starred" : ""}`}
136 >
137 {starred ? "\u2605" : "\u2606"} {starCount}
138 </button>
139 </form>
140 ) : (
141 <span class="star-btn">
142 {"\u2606"} {starCount}
143 </span>
144 )
145 )}
146 </div>
06d5ffeClaude147 </div>
8c790e0Claude148 );
149};
fc1817aClaude150
151export const RepoNav: FC<{
152 owner: string;
153 repo: string;
3ef4c9dClaude154 active:
155 | "code"
156 | "commits"
157 | "issues"
158 | "pulls"
159 | "releases"
eafe8c6Claude160 | "actions"
3ef4c9dClaude161 | "gates"
3cbe3d6Claude162 | "insights"
163 | "explain"
164 | "changelog"
1e162a8Claude165 | "semantic"
166 | "wiki"
0316dbbClaude167 | "projects"
ef3fd93Claude168 | "agents"
c645a86Claude169 | "discussions"
da3fc18Claude170 | "security"
bcc4020Claude171 | "settings"
7f992cdClaude172 | "debt-map"
173 | "migrate"
77cf834Claude174 | "deployments"
b1070a5Claude175 | "nl-search"
176 | "archaeology";
fc1817aClaude177}> = ({ owner, repo, active }) => (
178 <div class="repo-nav">
06d5ffeClaude179 <a href={`/${owner}/${repo}`} class={active === "code" ? "active" : ""}>
fc1817aClaude180 Code
181 </a>
79136bbClaude182 <a
183 href={`/${owner}/${repo}/issues`}
184 class={active === "issues" ? "active" : ""}
185 >
186 Issues
187 </a>
c645a86Claude188 <a
189 href={`/${owner}/${repo}/discussions`}
190 class={active === "discussions" ? "active" : ""}
191 >
192 Discussions
193 </a>
1e162a8Claude194 <a
195 href={`/${owner}/${repo}/wiki`}
196 class={active === "wiki" ? "active" : ""}
197 >
198 Wiki
199 </a>
0074234Claude200 <a
201 href={`/${owner}/${repo}/pulls`}
202 class={active === "pulls" ? "active" : ""}
203 >
204 Pull Requests
205 </a>
1e162a8Claude206 <a
207 href={`/${owner}/${repo}/projects`}
208 class={active === "projects" ? "active" : ""}
209 >
210 Projects
211 </a>
fc1817aClaude212 <a
213 href={`/${owner}/${repo}/commits`}
214 class={active === "commits" ? "active" : ""}
215 >
216 Commits
217 </a>
eafe8c6Claude218 <a
219 href={`/${owner}/${repo}/actions`}
220 class={active === "actions" ? "active" : ""}
221 >
222 Actions
223 </a>
3ef4c9dClaude224 <a
225 href={`/${owner}/${repo}/releases`}
226 class={active === "releases" ? "active" : ""}
227 >
228 Releases
229 </a>
230 <a
231 href={`/${owner}/${repo}/gates`}
232 class={active === "gates" ? "active" : ""}
233 >
234 {"\u25CF"} Gates
235 </a>
da3fc18Claude236 <a
237 href={`/${owner}/${repo}/security/vulnerabilities`}
238 class={active === "security" ? "active" : ""}
239 >
240 Security
241 </a>
c9ed210Claude242 <a
243 href={`/${owner}/${repo}/cloud-deployments`}
244 class={active === "deployments" ? "active" : ""}
245 >
246 Deployments
247 </a>
3ef4c9dClaude248 <a
249 href={`/${owner}/${repo}/insights`}
250 class={active === "insights" ? "active" : ""}
251 >
252 Insights
253 </a>
ef3fd93Claude254 <a
255 href={`/${owner}/${repo}/agents`}
256 class={active === "agents" ? "active" : ""}
257 >
258 Agents
259 </a>
3cbe3d6Claude260 <a
261 href={`/${owner}/${repo}/explain`}
debcf27Claude262 class={`repo-nav-ai${active === "explain" ? " active" : ""}`}
263 style="margin-left: auto"
3cbe3d6Claude264 >
265 {"\u2728"} Explain
266 </a>
debcf27Claude267 <a href={`/${owner}/${repo}/ask`} class="repo-nav-ai">
3ef4c9dClaude268 {"\u2728"} Ask AI
269 </a>
14c3cc8Claude270 <a
271 href={`/${owner}/${repo}/spec`}
debcf27Claude272 class="repo-nav-ai"
14c3cc8Claude273 title="Spec to PR — paste a feature spec, AI opens a draft PR"
274 >
275 {"\u2728"} Spec
276 </a>
d8ef5efClaude277 <a
278 href={`/${owner}/${repo}/ai/tests`}
debcf27Claude279 class="repo-nav-ai"
d8ef5efClaude280 title="AI Tests \u2014 generate failing test stubs from a source file"
281 >
282 {"\u2728"} Tests
283 </a>
bcc4020Claude284 <a
285 href={`/${owner}/${repo}/debt-map`}
286 class={`repo-nav-ai${active === "debt-map" ? " active" : ""}`}
287 title="AI Debt Map \u2014 visual technical debt graph with Claude analysis"
288 >
289 {"\u2593"} Debt Map
290 </a>
77cf834Claude291 <a
292 href={`/${owner}/${repo}/search/nl`}
293 class={`repo-nav-ai${active === "nl-search" ? " active" : ""}`}
294 title="Natural Language Search \u2014 search by intent, not keywords"
295 >
296 {"\u2728"} NL Search
297 </a>
b1070a5Claude298 <a
299 href={`/${owner}/${repo}/archaeology`}
300 class={`repo-nav-ai${active === "archaeology" ? " active" : ""}`}
301 title="AI Archaeology \u2014 excavate why any file exists using git history, PRs, and issues"
302 >
303 {"\ud83c\udfdb"} Archaeology
304 </a>
fc1817aClaude305 </div>
306);
307
06d5ffeClaude308export const BranchSwitcher: FC<{
309 owner: string;
310 repo: string;
311 currentRef: string;
312 branches: string[];
313 pathType: "tree" | "blob" | "commits";
314 subPath?: string;
315}> = ({ owner, repo, currentRef, branches, pathType, subPath }) => {
316 if (branches.length <= 1) {
317 return <div class="branch-selector">{currentRef}</div>;
318 }
319
320 return (
321 <div class="branch-dropdown">
322 <button class="branch-selector" type="button">
323 {currentRef} &#9662;
324 </button>
325 <div class="branch-dropdown-content">
326 {branches.map((branch) => {
327 let href: string;
328 if (pathType === "commits") {
329 href = `/${owner}/${repo}/commits/${branch}`;
330 } else if (subPath) {
331 href = `/${owner}/${repo}/${pathType}/${branch}/${subPath}`;
332 } else {
333 href = `/${owner}/${repo}/tree/${branch}`;
334 }
335 return (
336 <a
337 href={href}
338 class={branch === currentRef ? "active-branch" : ""}
339 >
340 {branch}
341 </a>
342 );
343 })}
344 </div>
345 </div>
346 );
347};
348
fc1817aClaude349export const Breadcrumb: FC<{
350 owner: string;
351 repo: string;
352 ref: string;
353 path: string;
354}> = ({ owner, repo, ref, path }) => {
355 const parts = path.split("/").filter(Boolean);
356 const crumbs: { name: string; href: string }[] = [
357 { name: repo, href: `/${owner}/${repo}/tree/${ref}` },
358 ];
359 let accumulated = "";
360 for (const part of parts) {
361 accumulated += (accumulated ? "/" : "") + part;
362 crumbs.push({
363 name: part,
364 href: `/${owner}/${repo}/tree/${ref}/${accumulated}`,
365 });
366 }
367 return (
368 <div class="breadcrumb">
369 {crumbs.map((crumb, i) => (
370 <>
371 {i > 0 && <span>/</span>}
372 {i === crumbs.length - 1 ? (
373 <strong>{crumb.name}</strong>
374 ) : (
375 <a href={crumb.href}>{crumb.name}</a>
376 )}
377 </>
378 ))}
379 </div>
380 );
381};
382
383export const FileTable: FC<{
384 entries: GitTreeEntry[];
385 owner: string;
386 repo: string;
387 ref: string;
388 path: string;
389}> = ({ entries, owner, repo, ref, path }) => (
390 <table class="file-table">
391 <tbody>
392 {entries.map((entry) => {
393 const fullPath = path ? `${path}/${entry.name}` : entry.name;
394 const href =
395 entry.type === "tree"
396 ? `/${owner}/${repo}/tree/${ref}/${fullPath}`
397 : `/${owner}/${repo}/blob/${ref}/${fullPath}`;
398 return (
399 <tr>
400 <td class="file-icon">
401 {entry.type === "tree" ? "\u{1F4C1}" : "\u{1F4C4}"}
402 </td>
403 <td class="file-name">
404 <a href={href}>{entry.name}</a>
405 </td>
406 <td style="text-align: right; color: var(--text-muted); font-size: 13px;">
407 {entry.size !== undefined ? formatSize(entry.size) : ""}
408 </td>
409 </tr>
410 );
411 })}
412 </tbody>
413 </table>
414);
415
06d5ffeClaude416export const HighlightedCode: FC<{
417 highlightedHtml: string;
418 lineCount: number;
419}> = ({ highlightedHtml, lineCount }) => {
420 const lineNums = Array.from({ length: lineCount }, (_, i) => i + 1);
421 return (
422 <div class="blob-code">
423 <table>
424 <tbody>
425 <tr>
426 <td class="line-num" style="vertical-align: top; padding-top: 0; padding-bottom: 0">
427 <pre style="margin: 0; line-height: 1.6; font-size: 13px">
428 {lineNums.map((n) => (
429 <>
430 <span>{n}</span>
431 {"\n"}
432 </>
433 ))}
434 </pre>
435 </td>
436 <td class="line-content" style="vertical-align: top; padding-top: 0; padding-bottom: 0">
437 <pre style="margin: 0; line-height: 1.6; font-size: 13px">{html([highlightedHtml] as unknown as TemplateStringsArray)}</pre>
438 </td>
439 </tr>
440 </tbody>
441 </table>
442 </div>
443 );
444};
445
446export const PlainCode: FC<{ lines: string[] }> = ({ lines }) => (
447 <div class="blob-code">
448 <table>
449 <tbody>
450 {lines.map((line, i) => (
451 <tr>
452 <td class="line-num">{i + 1}</td>
453 <td class="line-content">{line}</td>
454 </tr>
455 ))}
456 </tbody>
457 </table>
458 </div>
459);
460
fc1817aClaude461export const CommitList: FC<{
462 commits: GitCommit[];
463 owner: string;
464 repo: string;
3951454Claude465 verifications?: Record<string, { verified: boolean; reason: string }>;
466}> = ({ commits, owner, repo, verifications }) => (
fc1817aClaude467 <div class="commit-list">
3951454Claude468 {commits.map((commit) => {
469 const v = verifications?.[commit.sha];
470 return (
471 <div class="commit-item">
472 <div>
473 <div class="commit-message">
474 <a href={`/${owner}/${repo}/commit/${commit.sha}`}>
475 {commit.message}
476 </a>
477 {v?.verified && (
478 <span
479 title="Signed with a registered key"
480 style="margin-left:8px;font-size:10px;padding:1px 6px;border-radius:3px;background:var(--green,#2ea043);color:#fff;text-transform:uppercase;letter-spacing:.4px"
481 >
482 Verified
483 </span>
484 )}
485 </div>
486 <div class="commit-meta">
487 {commit.author} committed {formatRelativeDate(commit.date)}
488 </div>
fc1817aClaude489 </div>
3951454Claude490 <a
491 href={`/${owner}/${repo}/commit/${commit.sha}`}
492 class="commit-sha"
493 >
494 {commit.sha.slice(0, 7)}
495 </a>
fc1817aClaude496 </div>
3951454Claude497 );
498 })}
fc1817aClaude499 </div>
500);
501
502export const DiffView: FC<{ raw: string; files: GitDiffFile[] }> = ({
503 raw,
504 files,
505}) => {
506 const sections = parseDiff(raw);
507
508 return (
509 <div class="diff-view">
510 <div style="margin-bottom: 16px; font-size: 14px; color: var(--text-muted);">
511 Showing{" "}
512 <strong style="color: var(--text)">{files.length}</strong> changed
513 file{files.length !== 1 ? "s" : ""} with{" "}
514 <span class="stat-add">
515 +{files.reduce((s, f) => s + f.additions, 0)}
516 </span>{" "}
517 and{" "}
518 <span class="stat-del">
519 -{files.reduce((s, f) => s + f.deletions, 0)}
520 </span>
521 </div>
522 {sections.map((section) => (
523 <div class="diff-file">
524 <div class="diff-file-header">{section.path}</div>
525 <div class="diff-content">
526 {section.lines.map((line) => {
527 let cls = "line";
528 if (line.startsWith("+")) cls += " line-add";
529 else if (line.startsWith("-")) cls += " line-del";
530 else if (line.startsWith("@@")) cls += " line-hunk";
531 return <span class={cls}>{line + "\n"}</span>;
532 })}
533 </div>
534 </div>
535 ))}
536 </div>
537 );
538};
539
06d5ffeClaude540export const RepoCard: FC<{ repo: Repository; ownerName: string }> = ({
541 repo,
542 ownerName,
543}) => (
544 <div class="card">
545 <h3>
546 <a href={`/${ownerName}/${repo.name}`}>{repo.name}</a>
547 </h3>
548 {repo.description && <p>{repo.description}</p>}
549 <div class="card-meta">
550 {repo.isPrivate && <span class="badge">Private</span>}
551 <span>{"\u2606"} {repo.starCount}</span>
552 {repo.pushedAt && (
553 <span>Updated {formatRelativeDate(repo.pushedAt.toString())}</span>
554 )}
555 </div>
556 </div>
557);
558
fc1817aClaude559function parseDiff(raw: string): Array<{ path: string; lines: string[] }> {
560 const sections: Array<{ path: string; lines: string[] }> = [];
561 const diffRegex = /^diff --git a\/(.+?) b\/.+$/;
562 let current: { path: string; lines: string[] } | null = null;
563
564 for (const line of raw.split("\n")) {
565 const match = line.match(diffRegex);
566 if (match) {
567 if (current) sections.push(current);
568 current = { path: match[1], lines: [] };
569 continue;
570 }
571 if (current && !line.startsWith("diff --git")) {
572 if (
573 line.startsWith("index ") ||
574 line.startsWith("--- ") ||
575 line.startsWith("+++ ") ||
576 line.startsWith("new file") ||
577 line.startsWith("deleted file") ||
578 line.startsWith("old mode") ||
579 line.startsWith("new mode")
580 ) {
581 continue;
582 }
583 current.lines.push(line);
584 }
585 }
586 if (current) sections.push(current);
587 return sections;
588}
589
590function formatSize(bytes: number): string {
591 if (bytes < 1024) return `${bytes} B`;
592 if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
593 return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
594}
595
596function formatRelativeDate(dateStr: string): string {
597 const date = new Date(dateStr);
598 const now = new Date();
599 const diffMs = now.getTime() - date.getTime();
600 const diffMins = Math.floor(diffMs / 60000);
601 if (diffMins < 1) return "just now";
602 if (diffMins < 60) return `${diffMins} minute${diffMins > 1 ? "s" : ""} ago`;
603 const diffHours = Math.floor(diffMins / 60);
604 if (diffHours < 24)
605 return `${diffHours} hour${diffHours > 1 ? "s" : ""} ago`;
606 const diffDays = Math.floor(diffHours / 24);
607 if (diffDays < 30) return `${diffDays} day${diffDays > 1 ? "s" : ""} ago`;
608 return date.toLocaleDateString("en-US", {
609 month: "short",
610 day: "numeric",
611 year: "numeric",
612 });
613}