dashboard.html
105 lines1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
{{template "main.html" .}}
{{define "title"}}Dashboard — Congo Dev{{end}}
{{define "content"}}
<div class="fade-up">
<!-- System Stats -->
<section id="system-bar" hx-get="/stats" hx-trigger="load, every 10s" hx-swap="innerHTML" class="mb-4">
<div class="panel-card flex items-center gap-6 px-5 py-3">
<div class="flex items-center gap-3 min-w-[120px]">
<div class="w-9 h-9 rounded-full shimmer"></div>
<div><div class="h-2 w-8 shimmer rounded mb-1.5"></div><div class="h-2 w-16 shimmer rounded"></div></div>
</div>
<div class="flex items-center gap-3 min-w-[120px]">
<div class="w-9 h-9 rounded-full shimmer"></div>
<div><div class="h-2 w-10 shimmer rounded mb-1.5"></div><div class="h-2 w-16 shimmer rounded"></div></div>
</div>
<div class="flex items-center gap-3 min-w-[120px]">
<div class="w-9 h-9 rounded-full shimmer"></div>
<div><div class="h-2 w-8 shimmer rounded mb-1.5"></div><div class="h-2 w-16 shimmer rounded"></div></div>
</div>
<div class="flex-1"></div>
<div class="flex items-center gap-2.5">
<div class="w-2 h-2 rounded-full shimmer"></div>
<div><div class="h-2.5 w-20 shimmer rounded mb-1"></div><div class="h-2 w-12 shimmer rounded"></div></div>
</div>
</div>
</section>
<!-- Getting Started (shown when no projects) -->
{{if not dashboard.Repositories}}
<div class="panel-card p-6 mb-4">
<div class="flex items-start gap-4">
<div class="w-10 h-10 rounded-xl bg-indigo-50 flex items-center justify-center shrink-0 mt-0.5">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
</div>
<div class="flex-1">
<h2 class="text-sm font-bold text-slate-800 mb-1">Welcome to Congo Dev</h2>
<p class="text-xs text-slate-500 mb-4">Build your first app in three steps:</p>
<div class="space-y-3">
<div class="flex items-start gap-3">
<span class="w-5 h-5 rounded-full bg-indigo-500 text-white text-[10px] font-bold flex items-center justify-center shrink-0 mt-0.5">1</span>
<div>
<p class="text-xs font-medium text-slate-700">Create a project</p>
<p class="text-[11px] text-slate-400">Click <button class="text-indigo-500 font-medium hover:underline" onclick="document.getElementById('new-project-modal').showModal()">+ New Congo Project</button> above to scaffold a full-stack Go app with database, auth, and HTMX.</p>
</div>
</div>
<div class="flex items-start gap-3">
<span class="w-5 h-5 rounded-full bg-indigo-500 text-white text-[10px] font-bold flex items-center justify-center shrink-0 mt-0.5">2</span>
<div>
<p class="text-xs font-medium text-slate-700">Open in the editor</p>
<p class="text-[11px] text-slate-400">Click the <span class="font-mono text-indigo-500">Code</span> button in the nav bar to open VS Code. Your project files are in <code class="text-[10px] bg-slate-100 px-1 rounded">~/repos/</code>.</p>
</div>
</div>
<div class="flex items-start gap-3">
<span class="w-5 h-5 rounded-full bg-indigo-500 text-white text-[10px] font-bold flex items-center justify-center shrink-0 mt-0.5">3</span>
<div>
<p class="text-xs font-medium text-slate-700">Deploy as a service</p>
<p class="text-[11px] text-slate-400">From the Services panel below, deploy your project with one click. Congo handles Docker, networking, and TLS.</p>
</div>
</div>
</div>
<div class="mt-4 pt-3" style="border-top: 1px solid rgba(100,130,180,0.08);">
<a href="/getting-started" class="inline-flex items-center gap-1.5 text-[11px] font-semibold text-indigo-500 hover:text-indigo-600 transition-colors" hx-boost="true">
<svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" /></svg>
Full Getting Started Guide
</a>
</div>
</div>
</div>
</div>
{{end}}
<!-- Two-Column Layout -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
<!-- Left Column -->
<div class="lg:col-span-2 space-y-4">
{{template "projects-panel.html" .}}
{{template "services-panel.html" .}}
</div>
<!-- Right Column -->
<div class="space-y-4">
<!-- Twin Status -->
{{if dashboard.ClaudeProcesses}}
<div class="panel-card p-4">
<div class="flex items-center justify-between mb-3">
<h2 class="text-xs font-semibold text-slate-500 uppercase tracking-wider">Twin Processes</h2>
<a href="https://ping.congo.gg" target="_blank" class="text-[10px] text-indigo-500 hover:text-indigo-700">Chat →</a>
</div>
{{range $proc := dashboard.ClaudeProcesses}}
<div class="flex items-center gap-2 py-1.5 text-xs">
<span class="w-2 h-2 rounded-full bg-emerald-400 shrink-0"></span>
<span class="text-slate-600 font-mono truncate">PID {{$proc.PID}}</span>
</div>
{{end}}
</div>
{{end}}
{{template "tasks-panel.html" .}}
{{template "cron-panel.html" .}}
{{template "routes-panel.html" .}}
</div>
</div>
</div>
{{end}}