Pre-launch — Gluecron is in final validation. Public signups and git hosting for non-owner users open after launch review.
ccantynz/Gluecron.com
CodeIssuesDiscussionsWikiPull RequestsProjectsCommitsActionsReleasesContributorsPulse● GatesSecuritySettingsDeploymentsPipelineInsightsAgents✨ Explain✨ Ask AI✨ Workspace✨ Spec✨ Tests▓ Debt Map✨ NL Search🏛 Archaeology
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.tsxBlame542 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;
71cd5ecClaude31}> = ({
32 owner,
33 repo,
34 starCount,
35 starred,
36 forkCount,
37 currentUser,
38 forkedFrom,
39 archived,
40 isTemplate,
8c790e0Claude41 recentPush,
42}) => {
43 const FIVE_MIN = 5 * 60 * 1000;
44 const TWENTY_FOUR_HR = 24 * 60 * 60 * 1000;
45 const isLive = recentPush != null && recentPush.ageMs < FIVE_MIN;
46 const isRecent = recentPush != null && recentPush.ageMs < TWENTY_FOUR_HR;
47
48 return (
49 <div class="repo-header">
50 <div>
51 <div class="repo-header-title">
52 <a href={`/${owner}`} class="owner">
53 {owner}
54 </a>
55 <span class="separator">/</span>
56 <a href={`/${owner}/${repo}`} class="name">
57 {repo}
58 </a>
59 {archived && (
60 <span
61 class="repo-header-pill repo-header-pill-archived"
62 title="Read-only: pushes and new issues/PRs disabled"
63 >
64 Archived
65 </span>
66 )}
67 {isTemplate && (
68 <span
69 class="repo-header-pill repo-header-pill-template"
70 title="This repository can be used as a template"
71 >
72 Template
73 </span>
74 )}
75 {isLive && recentPush && (
76 <a
77 href={`/${owner}/${repo}/push/${recentPush.sha}`}
78 class="repo-header-live-badge repo-header-live-badge--live"
79 title="Push in progress \u2014 watch live gate + deploy status"
80 aria-label="Live push \u2014 click to watch status"
81 >
82 <span class="repo-header-live-dot" aria-hidden="true">{"\u25cf"}</span>
83 Live
84 </a>
85 )}
86 {!isLive && isRecent && recentPush && (
87 <a
88 href={`/${owner}/${repo}/push/${recentPush.sha}`}
89 class="repo-header-live-badge repo-header-live-badge--recent"
90 title="Watch the most recent push's gate + deploy results"
91 aria-label="Watch most recent push"
92 >
93 <span aria-hidden="true">{"\u25cb"}</span>
94 Watch
95 </a>
96 )}
97 </div>
98 {forkedFrom && (
99 <div class="repo-header-fork">
100 forked from <a href={`/${forkedFrom}`}>{forkedFrom}</a>
101 </div>
71cd5ecClaude102 )}
c81ab7aClaude103 </div>
8c790e0Claude104 <div class="repo-header-actions">
105 {currentUser && currentUser !== owner && (
106 <form method="post" action={`/${owner}/${repo}/fork`} style="display:inline">
107 <button type="submit" class="star-btn">
108 {"\u2442"} Fork {forkCount !== undefined && forkCount > 0 ? forkCount : ""}
06d5ffeClaude109 </button>
110 </form>
8c790e0Claude111 )}
112 {starCount !== undefined && (
113 currentUser ? (
114 <form method="post" action={`/${owner}/${repo}/star`} style="display:inline">
115 <button
116 type="submit"
117 class={`star-btn${starred ? " starred" : ""}`}
118 >
119 {starred ? "\u2605" : "\u2606"} {starCount}
120 </button>
121 </form>
122 ) : (
123 <span class="star-btn">
124 {"\u2606"} {starCount}
125 </span>
126 )
127 )}
128 </div>
06d5ffeClaude129 </div>
8c790e0Claude130 );
131};
fc1817aClaude132
133export const RepoNav: FC<{
134 owner: string;
135 repo: string;
3ef4c9dClaude136 active:
137 | "code"
138 | "commits"
139 | "issues"
140 | "pulls"
141 | "releases"
eafe8c6Claude142 | "actions"
3ef4c9dClaude143 | "gates"
3cbe3d6Claude144 | "insights"
145 | "explain"
146 | "changelog"
1e162a8Claude147 | "semantic"
148 | "wiki"
0316dbbClaude149 | "projects"
150 | "settings";
fc1817aClaude151}> = ({ owner, repo, active }) => (
152 <div class="repo-nav">
06d5ffeClaude153 <a href={`/${owner}/${repo}`} class={active === "code" ? "active" : ""}>
fc1817aClaude154 Code
155 </a>
79136bbClaude156 <a
157 href={`/${owner}/${repo}/issues`}
158 class={active === "issues" ? "active" : ""}
159 >
160 Issues
161 </a>
1e162a8Claude162 <a
163 href={`/${owner}/${repo}/wiki`}
164 class={active === "wiki" ? "active" : ""}
165 >
166 Wiki
167 </a>
0074234Claude168 <a
169 href={`/${owner}/${repo}/pulls`}
170 class={active === "pulls" ? "active" : ""}
171 >
172 Pull Requests
173 </a>
1e162a8Claude174 <a
175 href={`/${owner}/${repo}/projects`}
176 class={active === "projects" ? "active" : ""}
177 >
178 Projects
179 </a>
fc1817aClaude180 <a
181 href={`/${owner}/${repo}/commits`}
182 class={active === "commits" ? "active" : ""}
183 >
184 Commits
185 </a>
eafe8c6Claude186 <a
187 href={`/${owner}/${repo}/actions`}
188 class={active === "actions" ? "active" : ""}
189 >
190 Actions
191 </a>
3ef4c9dClaude192 <a
193 href={`/${owner}/${repo}/releases`}
194 class={active === "releases" ? "active" : ""}
195 >
196 Releases
197 </a>
198 <a
199 href={`/${owner}/${repo}/gates`}
200 class={active === "gates" ? "active" : ""}
201 >
202 {"\u25CF"} Gates
203 </a>
204 <a
205 href={`/${owner}/${repo}/insights`}
206 class={active === "insights" ? "active" : ""}
207 >
208 Insights
209 </a>
3cbe3d6Claude210 <a
211 href={`/${owner}/${repo}/explain`}
debcf27Claude212 class={`repo-nav-ai${active === "explain" ? " active" : ""}`}
213 style="margin-left: auto"
3cbe3d6Claude214 >
215 {"\u2728"} Explain
216 </a>
debcf27Claude217 <a href={`/${owner}/${repo}/ask`} class="repo-nav-ai">
3ef4c9dClaude218 {"\u2728"} Ask AI
219 </a>
14c3cc8Claude220 <a
221 href={`/${owner}/${repo}/spec`}
debcf27Claude222 class="repo-nav-ai"
14c3cc8Claude223 title="Spec to PR — paste a feature spec, AI opens a draft PR"
224 >
225 {"\u2728"} Spec
226 </a>
d8ef5efClaude227 <a
228 href={`/${owner}/${repo}/ai/tests`}
debcf27Claude229 class="repo-nav-ai"
d8ef5efClaude230 title="AI Tests \u2014 generate failing test stubs from a source file"
231 >
232 {"\u2728"} Tests
233 </a>
fc1817aClaude234 </div>
235);
236
06d5ffeClaude237export const BranchSwitcher: FC<{
238 owner: string;
239 repo: string;
240 currentRef: string;
241 branches: string[];
242 pathType: "tree" | "blob" | "commits";
243 subPath?: string;
244}> = ({ owner, repo, currentRef, branches, pathType, subPath }) => {
245 if (branches.length <= 1) {
246 return <div class="branch-selector">{currentRef}</div>;
247 }
248
249 return (
250 <div class="branch-dropdown">
251 <button class="branch-selector" type="button">
252 {currentRef} &#9662;
253 </button>
254 <div class="branch-dropdown-content">
255 {branches.map((branch) => {
256 let href: string;
257 if (pathType === "commits") {
258 href = `/${owner}/${repo}/commits/${branch}`;
259 } else if (subPath) {
260 href = `/${owner}/${repo}/${pathType}/${branch}/${subPath}`;
261 } else {
262 href = `/${owner}/${repo}/tree/${branch}`;
263 }
264 return (
265 <a
266 href={href}
267 class={branch === currentRef ? "active-branch" : ""}
268 >
269 {branch}
270 </a>
271 );
272 })}
273 </div>
274 </div>
275 );
276};
277
fc1817aClaude278export const Breadcrumb: FC<{
279 owner: string;
280 repo: string;
281 ref: string;
282 path: string;
283}> = ({ owner, repo, ref, path }) => {
284 const parts = path.split("/").filter(Boolean);
285 const crumbs: { name: string; href: string }[] = [
286 { name: repo, href: `/${owner}/${repo}/tree/${ref}` },
287 ];
288 let accumulated = "";
289 for (const part of parts) {
290 accumulated += (accumulated ? "/" : "") + part;
291 crumbs.push({
292 name: part,
293 href: `/${owner}/${repo}/tree/${ref}/${accumulated}`,
294 });
295 }
296 return (
297 <div class="breadcrumb">
298 {crumbs.map((crumb, i) => (
299 <>
300 {i > 0 && <span>/</span>}
301 {i === crumbs.length - 1 ? (
302 <strong>{crumb.name}</strong>
303 ) : (
304 <a href={crumb.href}>{crumb.name}</a>
305 )}
306 </>
307 ))}
308 </div>
309 );
310};
311
312export const FileTable: FC<{
313 entries: GitTreeEntry[];
314 owner: string;
315 repo: string;
316 ref: string;
317 path: string;
318}> = ({ entries, owner, repo, ref, path }) => (
319 <table class="file-table">
320 <tbody>
321 {entries.map((entry) => {
322 const fullPath = path ? `${path}/${entry.name}` : entry.name;
323 const href =
324 entry.type === "tree"
325 ? `/${owner}/${repo}/tree/${ref}/${fullPath}`
326 : `/${owner}/${repo}/blob/${ref}/${fullPath}`;
327 return (
328 <tr>
329 <td class="file-icon">
330 {entry.type === "tree" ? "\u{1F4C1}" : "\u{1F4C4}"}
331 </td>
332 <td class="file-name">
333 <a href={href}>{entry.name}</a>
334 </td>
335 <td style="text-align: right; color: var(--text-muted); font-size: 13px;">
336 {entry.size !== undefined ? formatSize(entry.size) : ""}
337 </td>
338 </tr>
339 );
340 })}
341 </tbody>
342 </table>
343);
344
06d5ffeClaude345export const HighlightedCode: FC<{
346 highlightedHtml: string;
347 lineCount: number;
348}> = ({ highlightedHtml, lineCount }) => {
349 const lineNums = Array.from({ length: lineCount }, (_, i) => i + 1);
350 return (
351 <div class="blob-code">
352 <table>
353 <tbody>
354 <tr>
355 <td class="line-num" style="vertical-align: top; padding-top: 0; padding-bottom: 0">
356 <pre style="margin: 0; line-height: 1.6; font-size: 13px">
357 {lineNums.map((n) => (
358 <>
359 <span>{n}</span>
360 {"\n"}
361 </>
362 ))}
363 </pre>
364 </td>
365 <td class="line-content" style="vertical-align: top; padding-top: 0; padding-bottom: 0">
366 <pre style="margin: 0; line-height: 1.6; font-size: 13px">{html([highlightedHtml] as unknown as TemplateStringsArray)}</pre>
367 </td>
368 </tr>
369 </tbody>
370 </table>
371 </div>
372 );
373};
374
375export const PlainCode: FC<{ lines: string[] }> = ({ lines }) => (
376 <div class="blob-code">
377 <table>
378 <tbody>
379 {lines.map((line, i) => (
380 <tr>
381 <td class="line-num">{i + 1}</td>
382 <td class="line-content">{line}</td>
383 </tr>
384 ))}
385 </tbody>
386 </table>
387 </div>
388);
389
fc1817aClaude390export const CommitList: FC<{
391 commits: GitCommit[];
392 owner: string;
393 repo: string;
3951454Claude394 verifications?: Record<string, { verified: boolean; reason: string }>;
395}> = ({ commits, owner, repo, verifications }) => (
fc1817aClaude396 <div class="commit-list">
3951454Claude397 {commits.map((commit) => {
398 const v = verifications?.[commit.sha];
399 return (
400 <div class="commit-item">
401 <div>
402 <div class="commit-message">
403 <a href={`/${owner}/${repo}/commit/${commit.sha}`}>
404 {commit.message}
405 </a>
406 {v?.verified && (
407 <span
408 title="Signed with a registered key"
409 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"
410 >
411 Verified
412 </span>
413 )}
414 </div>
415 <div class="commit-meta">
416 {commit.author} committed {formatRelativeDate(commit.date)}
417 </div>
fc1817aClaude418 </div>
3951454Claude419 <a
420 href={`/${owner}/${repo}/commit/${commit.sha}`}
421 class="commit-sha"
422 >
423 {commit.sha.slice(0, 7)}
424 </a>
fc1817aClaude425 </div>
3951454Claude426 );
427 })}
fc1817aClaude428 </div>
429);
430
431export const DiffView: FC<{ raw: string; files: GitDiffFile[] }> = ({
432 raw,
433 files,
434}) => {
435 const sections = parseDiff(raw);
436
437 return (
438 <div class="diff-view">
439 <div style="margin-bottom: 16px; font-size: 14px; color: var(--text-muted);">
440 Showing{" "}
441 <strong style="color: var(--text)">{files.length}</strong> changed
442 file{files.length !== 1 ? "s" : ""} with{" "}
443 <span class="stat-add">
444 +{files.reduce((s, f) => s + f.additions, 0)}
445 </span>{" "}
446 and{" "}
447 <span class="stat-del">
448 -{files.reduce((s, f) => s + f.deletions, 0)}
449 </span>
450 </div>
451 {sections.map((section) => (
452 <div class="diff-file">
453 <div class="diff-file-header">{section.path}</div>
454 <div class="diff-content">
455 {section.lines.map((line) => {
456 let cls = "line";
457 if (line.startsWith("+")) cls += " line-add";
458 else if (line.startsWith("-")) cls += " line-del";
459 else if (line.startsWith("@@")) cls += " line-hunk";
460 return <span class={cls}>{line + "\n"}</span>;
461 })}
462 </div>
463 </div>
464 ))}
465 </div>
466 );
467};
468
06d5ffeClaude469export const RepoCard: FC<{ repo: Repository; ownerName: string }> = ({
470 repo,
471 ownerName,
472}) => (
473 <div class="card">
474 <h3>
475 <a href={`/${ownerName}/${repo.name}`}>{repo.name}</a>
476 </h3>
477 {repo.description && <p>{repo.description}</p>}
478 <div class="card-meta">
479 {repo.isPrivate && <span class="badge">Private</span>}
480 <span>{"\u2606"} {repo.starCount}</span>
481 {repo.pushedAt && (
482 <span>Updated {formatRelativeDate(repo.pushedAt.toString())}</span>
483 )}
484 </div>
485 </div>
486);
487
fc1817aClaude488function parseDiff(raw: string): Array<{ path: string; lines: string[] }> {
489 const sections: Array<{ path: string; lines: string[] }> = [];
490 const diffRegex = /^diff --git a\/(.+?) b\/.+$/;
491 let current: { path: string; lines: string[] } | null = null;
492
493 for (const line of raw.split("\n")) {
494 const match = line.match(diffRegex);
495 if (match) {
496 if (current) sections.push(current);
497 current = { path: match[1], lines: [] };
498 continue;
499 }
500 if (current && !line.startsWith("diff --git")) {
501 if (
502 line.startsWith("index ") ||
503 line.startsWith("--- ") ||
504 line.startsWith("+++ ") ||
505 line.startsWith("new file") ||
506 line.startsWith("deleted file") ||
507 line.startsWith("old mode") ||
508 line.startsWith("new mode")
509 ) {
510 continue;
511 }
512 current.lines.push(line);
513 }
514 }
515 if (current) sections.push(current);
516 return sections;
517}
518
519function formatSize(bytes: number): string {
520 if (bytes < 1024) return `${bytes} B`;
521 if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
522 return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
523}
524
525function formatRelativeDate(dateStr: string): string {
526 const date = new Date(dateStr);
527 const now = new Date();
528 const diffMs = now.getTime() - date.getTime();
529 const diffMins = Math.floor(diffMs / 60000);
530 if (diffMins < 1) return "just now";
531 if (diffMins < 60) return `${diffMins} minute${diffMins > 1 ? "s" : ""} ago`;
532 const diffHours = Math.floor(diffMins / 60);
533 if (diffHours < 24)
534 return `${diffHours} hour${diffHours > 1 ? "s" : ""} ago`;
535 const diffDays = Math.floor(diffHours / 24);
536 if (diffDays < 30) return `${diffDays} day${diffDays > 1 ? "s" : ""} ago`;
537 return date.toLocaleDateString("en-US", {
538 month: "short",
539 day: "numeric",
540 year: "numeric",
541 });
542}