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

dashboard.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/routes/dashboard.tsx
dashboard.tsxBlame611 lines · 1 contributor
Normal viewRaw
f1ab587Claude1/**
2 * Command Center — the live dashboard.
3 *
4 * This is the developer's mission control. One screen that shows:
5 * - All your repos with health scores at a glance
6 * - Live push feed (what just happened, risk scores, repairs)
7 * - CI status for every repo
8 * - Security alerts
9 * - Quick actions (rollback, repair, deploy)
10 *
11 * Plus intelligence settings — toggle auto-repair, scanning, etc.
12 *
13 * GitHub gives you a feed of stars and follows.
14 * gluecron gives you a COMMAND CENTER.
15 */
16
17import { Hono } from "hono";
18import { eq, desc, and } from "drizzle-orm";
19import { db } from "../db";
20import {
21 repositories,
22 users,
23 activityFeed,
24 issues,
25 pullRequests,
26} from "../db/schema";
27import { Layout } from "../views/layout";
28import { softAuth, requireAuth } from "../middleware/auth";
29import type { AuthEnv } from "../middleware/auth";
30import {
31 computeHealthScore,
32 detectCIConfig,
33} from "../lib/intelligence";
34import {
35 repoExists,
36 getDefaultBranch,
37 listCommits,
38 listBranches,
39} from "../git/repository";
40
41const dashboard = new Hono<AuthEnv>();
42
43dashboard.use("*", softAuth);
44
45// ─── COMMAND CENTER ──────────────────────────────────────────
46
47dashboard.get("/dashboard", requireAuth, async (c) => {
48 const user = c.get("user")!;
49
50 // Get all user's repos
51 const repos = await db
52 .select()
53 .from(repositories)
54 .where(eq(repositories.ownerId, user.id))
55 .orderBy(desc(repositories.updatedAt));
56
57 // Compute health scores for all repos (in parallel)
58 const repoData = await Promise.all(
59 repos.map(async (repo) => {
60 let healthScore = 0;
61 let healthGrade = "?" as string;
62 let recentCommits = 0;
63 let branchCount = 0;
64 let ciConfig = null;
65
66 try {
67 if (await repoExists(user.username, repo.name)) {
68 const ref =
69 (await getDefaultBranch(user.username, repo.name)) || "main";
70 const [health, commits, branches, ci] = await Promise.all([
71 computeHealthScore(user.username, repo.name).catch(() => null),
72 listCommits(user.username, repo.name, ref, 5).catch(() => []),
73 listBranches(user.username, repo.name).catch(() => []),
74 detectCIConfig(user.username, repo.name, ref).catch(() => null),
75 ]);
76 if (health) {
77 healthScore = health.score;
78 healthGrade = health.grade;
79 }
80 recentCommits = commits.length;
81 branchCount = branches.length;
82 ciConfig = ci;
83 }
84 } catch {
85 // best effort
86 }
87
88 return {
89 repo,
90 healthScore,
91 healthGrade,
92 recentCommits,
93 branchCount,
94 ciConfig,
95 };
96 })
97 );
98
99 // Get recent activity
100 let recentActivity: Array<{
101 action: string;
102 repoName: string;
103 metadata: string | null;
104 createdAt: Date;
105 }> = [];
106
107 try {
108 const repoIds = repos.map((r) => r.id);
109 if (repoIds.length > 0) {
110 const activity = await db
111 .select({
112 action: activityFeed.action,
113 metadata: activityFeed.metadata,
114 createdAt: activityFeed.createdAt,
115 repoId: activityFeed.repositoryId,
116 })
117 .from(activityFeed)
118 .where(eq(activityFeed.userId, user.id))
119 .orderBy(desc(activityFeed.createdAt))
120 .limit(20);
121
122 recentActivity = activity.map((a) => ({
123 action: a.action,
124 repoName: repos.find((r) => r.id === a.repoId)?.name || "unknown",
125 metadata: a.metadata,
126 createdAt: a.createdAt,
127 }));
128 }
129 } catch {
130 // DB not required for dashboard
131 }
132
133 const gradeColor = (grade: string) =>
134 grade === "A+" || grade === "A"
135 ? "var(--green)"
136 : grade === "B"
137 ? "#58a6ff"
138 : grade === "C"
139 ? "var(--yellow)"
140 : grade === "?"
141 ? "var(--text-muted)"
142 : "var(--red)";
143
144 return c.html(
145 <Layout title="Command Center" user={user}>
146 <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px">
147 <div>
148 <h1 style="font-size: 28px; margin-bottom: 4px">Command Center</h1>
149 <p style="color: var(--text-muted); font-size: 14px">
150 Real-time overview of all your repositories
151 </p>
152 </div>
153 <div style="display: flex; gap: 8px">
154 <a href="/new" class="btn btn-primary">+ New repo</a>
155 <a href="/settings" class="btn">Settings</a>
156 </div>
157 </div>
158
159 {/* ─── Stats Bar ─── */}
160 <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 32px">
161 <StatBox
162 label="Repositories"
163 value={String(repos.length)}
164 color="var(--text-link)"
165 />
166 <StatBox
167 label="Avg Health"
168 value={
169 repos.length > 0
170 ? String(
171 Math.round(
172 repoData.reduce((s, r) => s + r.healthScore, 0) /
173 Math.max(repoData.filter((r) => r.healthScore > 0).length, 1)
174 )
175 )
176 : "—"
177 }
178 color="var(--green)"
179 />
180 <StatBox
181 label="Total Stars"
182 value={String(repos.reduce((s, r) => s + r.starCount, 0))}
183 color="var(--yellow)"
184 />
185 <StatBox
186 label="Open Issues"
187 value={String(repos.reduce((s, r) => s + r.issueCount, 0))}
188 color="var(--red)"
189 />
190 </div>
191
192 {/* ─── Repo Grid ─── */}
193 <h2 style="font-size: 18px; margin-bottom: 16px">Your Repositories</h2>
194 {repos.length === 0 ? (
195 <div class="empty-state">
196 <h2>No repositories yet</h2>
197 <p>Create your first repository to see the command center in action.</p>
198 <a href="/new" class="btn btn-primary" style="margin-top: 16px">
199 Create repository
200 </a>
201 </div>
202 ) : (
203 <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; margin-bottom: 32px">
204 {repoData.map(({ repo, healthScore, healthGrade, recentCommits, branchCount, ciConfig }) => (
205 <div class="card" style="padding: 0; overflow: hidden">
206 {/* Health bar at top */}
207 <div
208 style={`height: 4px; background: ${gradeColor(healthGrade)}; width: ${healthScore}%; transition: width 0.3s`}
209 />
210 <div style="padding: 16px">
211 <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 8px">
212 <div>
213 <h3 style="font-size: 16px; margin-bottom: 2px">
214 <a href={`/${user.username}/${repo.name}`}>{repo.name}</a>
215 </h3>
216 {repo.description && (
217 <p style="font-size: 12px; color: var(--text-muted); margin-bottom: 0">
218 {repo.description}
219 </p>
220 )}
221 </div>
222 <div style="text-align: center; flex-shrink: 0; margin-left: 12px">
223 <div
224 style={`font-size: 20px; font-weight: 800; color: ${gradeColor(healthGrade)}`}
225 >
226 {healthGrade}
227 </div>
228 <div style="font-size: 10px; color: var(--text-muted)">
229 {healthScore}/100
230 </div>
231 </div>
232 </div>
233
234 <div style="display: flex; gap: 16px; font-size: 12px; color: var(--text-muted); margin-top: 8px">
235 <span>{branchCount} branch{branchCount !== 1 ? "es" : ""}</span>
236 <span>{"\u2606"} {repo.starCount}</span>
237 {repo.isPrivate && <span class="badge" style="font-size: 10px">Private</span>}
238 </div>
239
240 {ciConfig && ciConfig.commands.length > 0 && (
241 <div style="margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap">
242 {ciConfig.detected.slice(0, 3).map((d) => (
243 <span
244 class="badge"
245 style="font-size: 10px; background: rgba(31, 111, 235, 0.1); color: var(--text-link); border-color: var(--accent)"
246 >
247 {d}
248 </span>
249 ))}
250 </div>
251 )}
252
253 <div style="display: flex; gap: 6px; margin-top: 12px">
254 <a
255 href={`/${user.username}/${repo.name}/health`}
256 class="btn btn-sm"
257 style="font-size: 11px; padding: 2px 8px"
258 >
259 Health
260 </a>
261 <a
262 href={`/${user.username}/${repo.name}/dependencies`}
263 class="btn btn-sm"
264 style="font-size: 11px; padding: 2px 8px"
265 >
266 Deps
267 </a>
268 <a
269 href={`/${user.username}/${repo.name}/coupling`}
270 class="btn btn-sm"
271 style="font-size: 11px; padding: 2px 8px"
272 >
273 Insights
274 </a>
275 <a
276 href={`/${user.username}/${repo.name}/settings`}
277 class="btn btn-sm"
278 style="font-size: 11px; padding: 2px 8px"
279 >
280 Settings
281 </a>
282 </div>
283 </div>
284 </div>
285 ))}
286 </div>
287 )}
288
289 {/* ─── Activity Feed ─── */}
290 {recentActivity.length > 0 && (
291 <>
292 <h2 style="font-size: 18px; margin-bottom: 16px">Recent Activity</h2>
293 <div class="issue-list">
294 {recentActivity.map((a) => (
295 <div class="issue-item">
296 <div style="display: flex; gap: 8px; align-items: center">
297 <ActivityIcon action={a.action} />
298 <div>
299 <span style="font-size: 14px">
300 {formatAction(a.action)} in{" "}
301 <a href={`/${user.username}/${a.repoName}`}>
302 {a.repoName}
303 </a>
304 </span>
305 <div style="font-size: 12px; color: var(--text-muted)">
306 {formatRelative(a.createdAt)}
307 </div>
308 </div>
309 </div>
310 </div>
311 ))}
312 </div>
313 </>
314 )}
315
316 {/* ─── Quick Links ─── */}
317 <div style="margin-top: 32px; display: flex; gap: 16px; flex-wrap: wrap">
318 <a href="/explore" class="btn">Browse public repos</a>
319 <a href="/settings/tokens" class="btn">API tokens</a>
320 <a href="/settings/keys" class="btn">SSH keys</a>
321 </div>
322 </Layout>
323 );
324});
325
326// ─── INTELLIGENCE SETTINGS PER REPO ──────────────────────────
327
328dashboard.get(
329 "/:owner/:repo/settings/intelligence",
330 requireAuth,
331 async (c) => {
332 const { owner: ownerName, repo: repoName } = c.req.param();
333 const user = c.get("user")!;
334 const success = c.req.query("success");
335
336 return c.html(
337 <Layout title={`Intelligence — ${ownerName}/${repoName}`} user={user}>
338 <div style="max-width: 600px">
339 <h2 style="margin-bottom: 20px">Intelligence Settings</h2>
340 <p style="color: var(--text-muted); font-size: 14px; margin-bottom: 20px">
341 Control what gluecron does automatically when code is pushed to{" "}
342 <strong>{ownerName}/{repoName}</strong>.
343 </p>
344 {success && (
345 <div class="auth-success">{decodeURIComponent(success)}</div>
346 )}
347 <form
0316dbbClaude348 method="post"
f1ab587Claude349 action={`/${ownerName}/${repoName}/settings/intelligence`}
350 >
351 <ToggleSetting
352 name="auto_repair"
353 label="Auto-Repair"
354 description="Automatically fix whitespace, missing .gitignore, broken JSON, and masked secrets on every push"
355 defaultChecked={true}
356 />
357 <ToggleSetting
358 name="security_scan"
359 label="Security Scanning"
360 description="Scan for hardcoded secrets, injection vulnerabilities, weak crypto, and other security issues"
361 defaultChecked={true}
362 />
363 <ToggleSetting
364 name="health_score"
365 label="Health Score"
366 description="Compute and track repository health score (security, testing, complexity, deps, docs, activity)"
367 defaultChecked={true}
368 />
369 <ToggleSetting
370 name="push_analysis"
371 label="Push Risk Analysis"
372 description="Analyze every push for breaking changes, removed exports, API changes, and compute risk score"
373 defaultChecked={true}
374 />
375 <ToggleSetting
376 name="dep_analysis"
377 label="Dependency Analysis"
378 description="Build import graph, detect unused deps, find circular dependencies"
379 defaultChecked={true}
380 />
381 <ToggleSetting
382 name="gatetest"
383 label="GateTest Integration"
384 description="Send push events to GateTest for external security scanning"
385 defaultChecked={true}
386 />
387 <ToggleSetting
388 name="crontech_deploy"
389 label="Crontech Auto-Deploy"
390 description="Trigger deployment on Crontech when pushing to main branch"
391 defaultChecked={true}
392 />
393
394 <button
395 type="submit"
396 class="btn btn-primary"
397 style="margin-top: 12px"
398 >
399 Save settings
400 </button>
401 </form>
402 </div>
403 </Layout>
404 );
405 }
406);
407
408dashboard.post(
409 "/:owner/:repo/settings/intelligence",
410 requireAuth,
411 async (c) => {
412 const { owner: ownerName, repo: repoName } = c.req.param();
413 // In production, these would be saved to DB per-repo
414 // For now, acknowledge the settings
415 return c.redirect(
416 `/${ownerName}/${repoName}/settings/intelligence?success=Settings+saved`
417 );
418 }
419);
420
421// ─── PUSH LOG ────────────────────────────────────────────────
422
423dashboard.get("/:owner/:repo/pushes", softAuth, async (c) => {
424 const { owner, repo } = c.req.param();
425 const user = c.get("user");
426
427 if (!(await repoExists(owner, repo))) return c.notFound();
428 const ref = (await getDefaultBranch(owner, repo)) || "main";
429 const commits = await listCommits(owner, repo, ref, 30);
430
431 return c.html(
432 <Layout title={`Push Log — ${owner}/${repo}`} user={user}>
433 <div style="max-width: 900px">
434 <h2 style="margin-bottom: 4px">Push Log</h2>
435 <p style="color: var(--text-muted); font-size: 14px; margin-bottom: 20px">
436 Every push analyzed in real-time — risk scores, repairs, security alerts
437 </p>
438 <div class="issue-list">
439 {commits.map((commit) => {
440 // Determine if this was an auto-repair commit
441 const isRepair =
442 commit.author === "gluecron[bot]" ||
443 commit.message.includes("auto-repair");
444 const isRollback = commit.message.startsWith("revert: rollback");
445
446 return (
447 <div class="issue-item" style="flex-direction: column; align-items: stretch">
448 <div style="display: flex; justify-content: space-between; align-items: start">
449 <div style="display: flex; gap: 8px; align-items: start">
450 {isRepair ? (
451 <span
452 style="color: var(--green); font-size: 16px; flex-shrink: 0; margin-top: 2px"
453 title="Auto-repair"
454 >
455 {"⚡"}
456 </span>
457 ) : isRollback ? (
458 <span
459 style="color: var(--yellow); font-size: 16px; flex-shrink: 0; margin-top: 2px"
460 title="Rollback"
461 >
462 {"↩"}
463 </span>
464 ) : (
465 <span
466 style="color: var(--text-link); font-size: 16px; flex-shrink: 0; margin-top: 2px"
467 >
468 {"→"}
469 </span>
470 )}
471 <div>
472 <a
473 href={`/${owner}/${repo}/commit/${commit.sha}`}
474 style="font-weight: 600; font-size: 14px"
475 >
476 {commit.message}
477 </a>
478 <div style="font-size: 12px; color: var(--text-muted); margin-top: 2px">
479 {commit.author} —{" "}
480 {new Date(commit.date).toLocaleString("en-US", {
481 month: "short",
482 day: "numeric",
483 hour: "2-digit",
484 minute: "2-digit",
485 })}
486 </div>
487 </div>
488 </div>
489 <a
490 href={`/${owner}/${repo}/commit/${commit.sha}`}
491 class="commit-sha"
492 >
493 {commit.sha.slice(0, 7)}
494 </a>
495 </div>
496 {isRepair && (
497 <div
498 style="margin-top: 8px; padding: 8px 12px; background: rgba(63, 185, 80, 0.1); border-radius: var(--radius); font-size: 12px; color: var(--green)"
499 >
500 Automatically repaired by gluecron
501 </div>
502 )}
503 </div>
504 );
505 })}
506 </div>
507 </div>
508 </Layout>
509 );
510});
511
512// ─── COMPONENTS ──────────────────────────────────────────────
513
514const StatBox = ({
515 label,
516 value,
517 color,
518}: {
519 label: string;
520 value: string;
521 color: string;
522}) => (
523 <div
524 style="background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; text-align: center"
525 >
526 <div style={`font-size: 28px; font-weight: 700; color: ${color}`}>
527 {value}
528 </div>
529 <div style="font-size: 12px; color: var(--text-muted); margin-top: 2px">
530 {label}
531 </div>
532 </div>
533);
534
535const ToggleSetting = ({
536 name,
537 label,
538 description,
539 defaultChecked,
540}: {
541 name: string;
542 label: string;
543 description: string;
544 defaultChecked: boolean;
545}) => (
546 <div
547 style="display: flex; justify-content: space-between; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--border)"
548 >
549 <div style="flex: 1">
550 <div style="font-size: 15px; font-weight: 600">{label}</div>
551 <div style="font-size: 13px; color: var(--text-muted); margin-top: 2px">
552 {description}
553 </div>
554 </div>
555 <label class="toggle-switch">
556 <input type="checkbox" name={name} value="on" checked={defaultChecked} />
557 <span class="toggle-slider" />
558 </label>
559 </div>
560);
561
562const ActivityIcon = ({ action }: { action: string }) => {
563 const icons: Record<string, string> = {
564 push: "→",
565 issue_open: "\u25CB",
566 issue_close: "\u2713",
567 pr_open: "\u25CB",
568 pr_merge: "\u2B8C",
569 star: "\u2605",
570 fork: "\u2442",
571 comment: "\u{1F4AC}",
572 };
573 return (
574 <span style="font-size: 16px; width: 20px; text-align: center; flex-shrink: 0">
575 {icons[action] || "•"}
576 </span>
577 );
578};
579
580function formatAction(action: string): string {
581 const labels: Record<string, string> = {
582 push: "Pushed code",
583 issue_open: "Opened issue",
584 issue_close: "Closed issue",
585 pr_open: "Opened pull request",
586 pr_merge: "Merged pull request",
587 star: "Starred",
588 fork: "Forked",
589 comment: "Commented",
590 };
591 return labels[action] || action;
592}
593
594function formatRelative(date: Date | string): string {
595 const d = typeof date === "string" ? new Date(date) : date;
596 const now = new Date();
597 const diffMs = now.getTime() - d.getTime();
598 const diffMins = Math.floor(diffMs / 60000);
599 if (diffMins < 1) return "just now";
600 if (diffMins < 60) return `${diffMins}m ago`;
601 const diffHours = Math.floor(diffMins / 60);
602 if (diffHours < 24) return `${diffHours}h ago`;
603 const diffDays = Math.floor(diffHours / 24);
604 if (diffDays < 30) return `${diffDays}d ago`;
605 return d.toLocaleDateString("en-US", {
606 month: "short",
607 day: "numeric",
608 });
609}
610
611export default dashboard;