Pre-launch — Gluecron is in final validation. Public signups and git hosting for non-owner users open after launch review.
ccantynz/Gluecron.com
Commitbdb51e4unknown_key

polish(help): 2026 hero + section cards (parallel session)

Claude committed on May 20, 2026Parent: c5ab657
1 file changed+491−262bdb51e47aad4723ec453bc03ed512da8b185d0fb
1 changed file+491−262
Modifiedsrc/routes/help.tsx+491−262View fileUnifiedSplit
1616const help = new Hono<AuthEnv>();
1717help.use("*", softAuth);
1818
19// ─── PAGE-SCOPED CSS ─────────────────────────────────────────
20// All classes prefixed with `.help-` so styles cannot bleed into other
21// surfaces. Mirrors the 2026 hero polish in admin, dashboard, import,
22// settings, and repo-settings.
23const helpStyles = `
24 .help-wrap { max-width: 920px; margin: 0 auto; padding: var(--space-6) var(--space-4); }
25
26 /* ─── Hero ─── */
27 .help-hero {
28 position: relative;
29 margin-bottom: var(--space-5);
30 padding: var(--space-5) var(--space-6);
31 background: var(--bg-elevated);
32 border: 1px solid var(--border);
33 border-radius: 16px;
34 overflow: hidden;
35 }
36 .help-hero::before {
37 content: '';
38 position: absolute;
39 top: 0; left: 0; right: 0;
40 height: 2px;
41 background: linear-gradient(90deg, transparent 0%, #8c6dff 30%, #36c5d6 70%, transparent 100%);
42 opacity: 0.75;
43 pointer-events: none;
44 }
45 .help-hero-bg {
46 position: absolute;
47 inset: -20% -10% auto auto;
48 width: 360px; height: 360px;
49 pointer-events: none;
50 z-index: 0;
51 }
52 .help-hero-orb {
53 position: absolute;
54 inset: 0;
55 background: radial-gradient(circle, rgba(140,109,255,0.20), rgba(54,197,214,0.10) 45%, transparent 70%);
56 filter: blur(80px);
57 opacity: 0.7;
58 animation: helpHeroOrb 14s ease-in-out infinite;
59 }
60 @keyframes helpHeroOrb {
61 0%, 100% { transform: scale(1) translate(0, 0); opacity: 0.6; }
62 50% { transform: scale(1.1) translate(-10px, 8px); opacity: 0.85; }
63 }
64 @media (prefers-reduced-motion: reduce) {
65 .help-hero-orb { animation: none; }
66 }
67 .help-hero-inner {
68 position: relative;
69 z-index: 1;
70 max-width: 680px;
71 }
72 .help-hero-eyebrow {
73 display: inline-flex;
74 align-items: center;
75 gap: 8px;
76 font-size: 12px;
77 font-weight: 600;
78 letter-spacing: 0.06em;
79 text-transform: uppercase;
80 color: var(--text-muted);
81 margin-bottom: var(--space-3);
82 }
83 .help-hero-eyebrow-pill {
84 display: inline-flex;
85 align-items: center;
86 justify-content: center;
87 width: 22px; height: 22px;
88 border-radius: 7px;
89 background: linear-gradient(135deg, rgba(140,109,255,0.20), rgba(54,197,214,0.18));
90 box-shadow: inset 0 0 0 1px rgba(140,109,255,0.35);
91 color: #c4b6ff;
92 font-size: 13px;
93 line-height: 1;
94 }
95 .help-hero-title {
96 font-size: clamp(28px, 4vw, 40px);
97 font-family: var(--font-display);
98 font-weight: 800;
99 letter-spacing: -0.028em;
100 line-height: 1.05;
101 margin: 0 0 var(--space-3);
102 color: var(--text-strong);
103 }
104 .help-hero-title .help-gradient-text {
105 background-image: linear-gradient(135deg, #a48bff 0%, #8c6dff 50%, #36c5d6 100%);
106 -webkit-background-clip: text;
107 background-clip: text;
108 -webkit-text-fill-color: transparent;
109 color: transparent;
110 }
111 .help-hero-sub {
112 font-size: 15px;
113 color: var(--text-muted);
114 margin: 0;
115 line-height: 1.55;
116 max-width: 600px;
117 }
118
119 /* ─── On-this-page nav ─── */
120 .help-toc {
121 position: relative;
122 padding: var(--space-4) var(--space-5);
123 background: var(--bg-elevated);
124 border: 1px solid var(--border);
125 border-radius: 14px;
126 margin-bottom: var(--space-5);
127 }
128 .help-toc-label {
129 font-size: 11px;
130 font-weight: 600;
131 letter-spacing: 0.08em;
132 text-transform: uppercase;
133 color: var(--accent);
134 margin-bottom: 10px;
135 }
136 .help-toc-list {
137 display: flex;
138 flex-wrap: wrap;
139 gap: 8px;
140 }
141 .help-toc-list a {
142 display: inline-flex;
143 align-items: center;
144 padding: 5px 10px;
145 font-size: 12.5px;
146 color: var(--text);
147 background: var(--bg);
148 border: 1px solid var(--border);
149 border-radius: 8px;
150 text-decoration: none;
151 transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
152 }
153 .help-toc-list a:hover {
154 border-color: rgba(140,109,255,0.45);
155 background: rgba(140,109,255,0.06);
156 color: var(--text-strong);
157 }
158
159 /* ─── Section cards ─── */
160 .help-section {
161 background: var(--bg-elevated);
162 border: 1px solid var(--border);
163 border-radius: 14px;
164 margin-bottom: var(--space-5);
165 overflow: hidden;
166 scroll-margin-top: var(--space-6);
167 }
168 .help-section-head {
169 padding: var(--space-4) var(--space-5) var(--space-3);
170 border-bottom: 1px solid var(--border);
171 }
172 .help-section-eyebrow {
173 font-size: 11px;
174 font-weight: 600;
175 letter-spacing: 0.08em;
176 text-transform: uppercase;
177 color: var(--accent);
178 margin-bottom: 6px;
179 }
180 .help-section-title {
181 font-family: var(--font-display);
182 font-size: 19px;
183 font-weight: 700;
184 letter-spacing: -0.02em;
185 margin: 0 0 4px;
186 color: var(--text-strong);
187 }
188 .help-section-desc {
189 font-size: 13.5px;
190 color: var(--text-muted);
191 margin: 0;
192 line-height: 1.5;
193 }
194 .help-section-body {
195 padding: var(--space-4) var(--space-5);
196 display: flex;
197 flex-direction: column;
198 gap: var(--space-3);
199 }
200
201 /* ─── Item rows inside a section card ─── */
202 .help-item {
203 padding: 12px 14px;
204 background: var(--bg);
205 border: 1px solid var(--border-subtle, var(--border));
206 border-radius: 10px;
207 font-size: 14px;
208 line-height: 1.55;
209 color: var(--text);
210 }
211 .help-item strong { color: var(--text-strong); font-weight: 600; }
212 .help-item code {
213 font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
214 font-size: 12.5px;
215 padding: 1px 5px;
216 border-radius: 4px;
217 background: rgba(140,109,255,0.10);
218 color: #c4b6ff;
219 }
220 .help-item a { color: var(--text-link, var(--accent)); }
221
222 /* ─── Code blocks inside items ─── */
223 .help-code {
224 margin: 8px 0 0;
225 padding: 12px 14px;
226 background: #0a0c14;
227 border: 1px solid var(--border-subtle, var(--border));
228 border-radius: 8px;
229 font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
230 font-size: 12.5px;
231 line-height: 1.55;
232 color: #d6d8e3;
233 overflow-x: auto;
234 }
235
236 /* ─── Footer hint ─── */
237 .help-footnote {
238 margin-top: var(--space-6);
239 padding-top: var(--space-4);
240 border-top: 1px solid var(--border);
241 color: var(--text-muted);
242 font-size: 13px;
243 line-height: 1.55;
244 }
245`;
246
19247help.get("/help", (c) => {
20248 const user = c.get("user");
21249
22250 return c.html(
23251 <Layout title="Help — gluecron" user={user}>
24 <div style="max-width: 860px; margin: 0 auto; padding: 24px 16px">
25 <h1 style="margin: 0 0 8px; font-size: 28px">Help & quickstart</h1>
26 <p style="color: var(--text-muted); margin-bottom: 24px">
27 Everything an owner migrating a product onto gluecron needs in one
28 page. If something's unclear, open an issue — link at the bottom.
29 </p>
252 <style dangerouslySetInnerHTML={{ __html: helpStyles }} />
253 <div class="help-wrap">
254 {/* ─── Hero ─── */}
255 <header class="help-hero">
256 <div class="help-hero-bg" aria-hidden="true">
257 <div class="help-hero-orb" />
258 </div>
259 <div class="help-hero-inner">
260 <div class="help-hero-eyebrow">
261 <span class="help-hero-eyebrow-pill" aria-hidden="true">?</span>
262 <span>Help & quickstart</span>
263 </div>
264 <h1 class="help-hero-title">
265 Ship onto{" "}
266 <span class="help-gradient-text">gluecron</span> in five minutes.
267 </h1>
268 <p class="help-hero-sub">
269 Everything an owner migrating a product onto gluecron needs in one
270 page. If something's unclear, open an issue — link at the bottom.
271 </p>
272 </div>
273 </header>
30274
31 <nav
32 class="panel"
33 style="margin-bottom: 32px; padding: 12px 16px; font-size: 13px"
34 >
35 <strong
36 style="display: block; margin-bottom: 6px; font-size: 12px; text-transform: uppercase; color: var(--text-muted)"
37 >
38 On this page
39 </strong>
40 <a href="#getting-started">Getting started</a> &middot;{" "}
41 <a href="#git-https">Git over HTTPS</a> &middot;{" "}
42 <a href="#git-ssh">Git over SSH</a> &middot;{" "}
43 <a href="#import">Importing from GitHub</a> &middot;{" "}
44 <a href="#webhooks">Webhooks</a> &middot;{" "}
45 <a href="#tokens">Personal access tokens</a> &middot;{" "}
46 <a href="#gates">Gates & AI review</a> &middot;{" "}
47 <a href="#ai-native">AI-native flow</a> &middot;{" "}
48 <a href="#shortcuts">Keyboard shortcuts</a> &middot;{" "}
49 <a href="#api">API</a>
275 {/* ─── On this page ─── */}
276 <nav class="help-toc" aria-label="On this page">
277 <div class="help-toc-label">On this page</div>
278 <div class="help-toc-list">
279 <a href="#getting-started">Getting started</a>
280 <a href="#git-https">Git over HTTPS</a>
281 <a href="#git-ssh">Git over SSH</a>
282 <a href="#import">Importing from GitHub</a>
283 <a href="#webhooks">Webhooks</a>
284 <a href="#tokens">Personal access tokens</a>
285 <a href="#gates">Gates & AI review</a>
286 <a href="#ai-native">AI-native flow</a>
287 <a href="#shortcuts">Keyboard shortcuts</a>
288 <a href="#api">API</a>
289 </div>
50290 </nav>
51291
52 <section id="getting-started" style="margin-bottom: 32px">
53 <h2 style="margin-bottom: 12px; font-size: 20px">Getting started</h2>
54 <div class="panel">
55 <div class="panel-item">
56 <div>
57 <strong>1. Register an account.</strong>{" "}
58 Head to <a href="/register">/register</a>, pick a username, and
59 set a password. Usernames are your public handle and appear in
60 every repo URL.
61 </div>
292 {/* ─── Getting started ─── */}
293 <section id="getting-started" class="help-section">
294 <div class="help-section-head">
295 <div class="help-section-eyebrow">Step 01</div>
296 <h2 class="help-section-title">Getting started</h2>
297 <p class="help-section-desc">
298 Register, verify, and create your first repo.
299 </p>
300 </div>
301 <div class="help-section-body">
302 <div class="help-item">
303 <strong>1. Register an account.</strong>{" "}
304 Head to <a href="/register">/register</a>, pick a username, and
305 set a password. Usernames are your public handle and appear in
306 every repo URL.
62307 </div>
63 <div class="panel-item">
64 <div>
65 <strong>2. Verify your email.</strong>{" "}
66 We send a one-time link the first time you sign in. Verified
67 addresses can receive issue, PR, and gate-run notifications.
68 </div>
308 <div class="help-item">
309 <strong>2. Verify your email.</strong>{" "}
310 We send a one-time link the first time you sign in. Verified
311 addresses can receive issue, PR, and gate-run notifications.
69312 </div>
70 <div class="panel-item">
71 <div>
72 <strong>3. Create your first repo.</strong>{" "}
73 From the dashboard hit <strong>New repository</strong>, or
74 visit <a href="/new">/new</a>. Pick public or private, add a
75 README, and you're ready to clone.
76 </div>
313 <div class="help-item">
314 <strong>3. Create your first repo.</strong>{" "}
315 From the dashboard hit <strong>New repository</strong>, or
316 visit <a href="/new">/new</a>. Pick public or private, add a
317 README, and you're ready to clone.
77318 </div>
78319 </div>
79320 </section>
80321
81 <section id="git-https" style="margin-bottom: 32px">
82 <h2 style="margin-bottom: 12px; font-size: 20px">Git over HTTPS</h2>
83 <p style="color: var(--text-muted); margin-bottom: 12px">
84 HTTPS works out of the box. Authenticate with your account
85 password or, better, a personal access token.
86 </p>
87 <div class="panel">
88 <div class="panel-item">
89 <div style="width: 100%">
90 <strong>Clone</strong>
91 <pre
92 style="margin: 6px 0 0; padding: 10px; background: var(--bg-muted, #0d1117); border-radius: 4px; font-size: 12px; overflow-x: auto"
93 >
322 {/* ─── Git over HTTPS ─── */}
323 <section id="git-https" class="help-section">
324 <div class="help-section-head">
325 <div class="help-section-eyebrow">Protocol</div>
326 <h2 class="help-section-title">Git over HTTPS</h2>
327 <p class="help-section-desc">
328 HTTPS works out of the box. Authenticate with your account
329 password or, better, a personal access token.
330 </p>
331 </div>
332 <div class="help-section-body">
333 <div class="help-item">
334 <strong>Clone</strong>
335 <pre class="help-code">
94336{`git clone https://<your-host>/<owner>/<repo>.git`}
95 </pre>
96 </div>
337 </pre>
97338 </div>
98 <div class="panel-item">
99 <div style="width: 100%">
100 <strong>Push</strong>
101 <pre
102 style="margin: 6px 0 0; padding: 10px; background: var(--bg-muted, #0d1117); border-radius: 4px; font-size: 12px; overflow-x: auto"
103 >
339 <div class="help-item">
340 <strong>Push</strong>
341 <pre class="help-code">
104342{`git push origin main`}
105 </pre>
106 </div>
343 </pre>
107344 </div>
108 <div class="panel-item">
109 <div style="width: 100%">
110 <strong>Pull</strong>
111 <pre
112 style="margin: 6px 0 0; padding: 10px; background: var(--bg-muted, #0d1117); border-radius: 4px; font-size: 12px; overflow-x: auto"
113 >
345 <div class="help-item">
346 <strong>Pull</strong>
347 <pre class="help-code">
114348{`git pull origin main`}
115 </pre>
116 </div>
349 </pre>
117350 </div>
118351 </div>
119352 </section>
120353
121 <section id="git-ssh" style="margin-bottom: 32px">
122 <h2 style="margin-bottom: 12px; font-size: 20px">Git over SSH</h2>
123 <p style="color: var(--text-muted); margin-bottom: 12px">
124 SSH avoids typing credentials and is recommended for day-to-day
125 work.
126 </p>
127 <div class="panel">
128 <div class="panel-item">
129 <div>
130 <strong>1. Add your key.</strong>{" "}
131 Copy your public key (usually{" "}
132 <code>~/.ssh/id_ed25519.pub</code>) and paste it into{" "}
133 <a href="/settings/keys">/settings/keys</a>. Keys take effect
134 immediately.
135 </div>
354 {/* ─── Git over SSH ─── */}
355 <section id="git-ssh" class="help-section">
356 <div class="help-section-head">
357 <div class="help-section-eyebrow">Protocol</div>
358 <h2 class="help-section-title">Git over SSH</h2>
359 <p class="help-section-desc">
360 SSH avoids typing credentials and is recommended for day-to-day
361 work.
362 </p>
363 </div>
364 <div class="help-section-body">
365 <div class="help-item">
366 <strong>1. Add your key.</strong>{" "}
367 Copy your public key (usually{" "}
368 <code>~/.ssh/id_ed25519.pub</code>) and paste it into{" "}
369 <a href="/settings/keys">/settings/keys</a>. Keys take effect
370 immediately.
136371 </div>
137 <div class="panel-item">
138 <div style="width: 100%">
139 <strong>2. Clone using the SSH URL.</strong>
140 <pre
141 style="margin: 6px 0 0; padding: 10px; background: var(--bg-muted, #0d1117); border-radius: 4px; font-size: 12px; overflow-x: auto"
142 >
372 <div class="help-item">
373 <strong>2. Clone using the SSH URL.</strong>
374 <pre class="help-code">
143375{`git clone git@<your-host>:<owner>/<repo>.git`}
144 </pre>
145 </div>
376 </pre>
146377 </div>
147 <div class="panel-item">
148 <div>
149 <strong>3. Rotate or revoke</strong> any key from the same
150 settings page — useful when a laptop walks off.
151 </div>
378 <div class="help-item">
379 <strong>3. Rotate or revoke</strong> any key from the same
380 settings page — useful when a laptop walks off.
152381 </div>
153382 </div>
154383 </section>
155384
156 <section id="import" style="margin-bottom: 32px">
157 <h2 style="margin-bottom: 12px; font-size: 20px">
158 Importing from GitHub
159 </h2>
160 <div class="panel">
161 <div class="panel-item">
162 <div>
163 Visit <a href="/import">/import</a>, paste the source URL, and
164 gluecron will mirror the repository — full history, branches,
165 and tags. The mirror is a one-time copy; subsequent pushes
166 land on gluecron, not the source. Private sources need a PAT
167 on the source side.
168 </div>
385 {/* ─── Import ─── */}
386 <section id="import" class="help-section">
387 <div class="help-section-head">
388 <div class="help-section-eyebrow">Migration</div>
389 <h2 class="help-section-title">Importing from GitHub</h2>
390 <p class="help-section-desc">
391 One-time mirror with full history, branches, and tags.
392 </p>
393 </div>
394 <div class="help-section-body">
395 <div class="help-item">
396 Visit <a href="/import">/import</a>, paste the source URL, and
397 gluecron will mirror the repository — full history, branches,
398 and tags. The mirror is a one-time copy; subsequent pushes
399 land on gluecron, not the source. Private sources need a PAT
400 on the source side.
169401 </div>
170402 </div>
171403 </section>
172404
173 <section id="webhooks" style="margin-bottom: 32px">
174 <h2 style="margin-bottom: 12px; font-size: 20px">Webhooks</h2>
175 <p style="color: var(--text-muted); margin-bottom: 12px">
176 Per-repo webhooks live at{" "}
177 <code>/:owner/:repo/settings/webhooks</code>. Register a URL, pick
178 events (push, issue, pr, star), and set a secret.
179 </p>
180 <div class="panel">
181 <div class="panel-item">
182 <div>
183 <strong>HMAC signature.</strong>{" "}
184 Every delivery includes{" "}
185 <code>X-Gluecron-Signature: sha256=&lt;hex&gt;</code>.{" "}
186 Compute HMAC-SHA256 over the raw request body using your
187 secret and compare in constant time.
188 </div>
405 {/* ─── Webhooks ─── */}
406 <section id="webhooks" class="help-section">
407 <div class="help-section-head">
408 <div class="help-section-eyebrow">Integrations</div>
409 <h2 class="help-section-title">Webhooks</h2>
410 <p class="help-section-desc">
411 Per-repo webhooks live at{" "}
412 <code>/:owner/:repo/settings/webhooks</code>. Register a URL, pick
413 events (push, issue, pr, star), and set a secret.
414 </p>
415 </div>
416 <div class="help-section-body">
417 <div class="help-item">
418 <strong>HMAC signature.</strong>{" "}
419 Every delivery includes{" "}
420 <code>X-Gluecron-Signature: sha256=&lt;hex&gt;</code>.{" "}
421 Compute HMAC-SHA256 over the raw request body using your
422 secret and compare in constant time.
189423 </div>
190 <div class="panel-item">
191 <div style="width: 100%">
192 <strong>Payload shape.</strong>
193 <pre
194 style="margin: 6px 0 0; padding: 10px; background: var(--bg-muted, #0d1117); border-radius: 4px; font-size: 12px; overflow-x: auto"
195 >
424 <div class="help-item">
425 <strong>Payload shape.</strong>
426 <pre class="help-code">
196427{`{
197428 "event": "push",
198429 "repo": { "owner": "acme", "name": "api" },
202433 "commits": [ /* ... */ ],
203434 "sender": { "username": "kit" }
204435}`}
205 </pre>
206 </div>
436 </pre>
207437 </div>
208 <div class="panel-item">
209 <div>
210 Deliveries are retried with exponential backoff; inspect the
211 last N attempts from the webhook's settings page.
212 </div>
438 <div class="help-item">
439 Deliveries are retried with exponential backoff; inspect the
440 last N attempts from the webhook's settings page.
213441 </div>
214442 </div>
215443 </section>
216444
217 <section id="tokens" style="margin-bottom: 32px">
218 <h2 style="margin-bottom: 12px; font-size: 20px">
219 Personal access tokens
220 </h2>
221 <p style="color: var(--text-muted); margin-bottom: 12px">
222 Tokens authenticate CLI clients, CI jobs, and scripts. Create
223 them at <a href="/settings/tokens">/settings/tokens</a>; the value
224 is shown once, so copy it immediately. Tokens start with{" "}
225 <code>glc_</code>.
226 </p>
227 <div class="panel">
228 <div class="panel-item">
229 <div style="width: 100%">
230 <strong>Example: list your repos via the API.</strong>
231 <pre
232 style="margin: 6px 0 0; padding: 10px; background: var(--bg-muted, #0d1117); border-radius: 4px; font-size: 12px; overflow-x: auto"
233 >
445 {/* ─── Tokens ─── */}
446 <section id="tokens" class="help-section">
447 <div class="help-section-head">
448 <div class="help-section-eyebrow">Auth</div>
449 <h2 class="help-section-title">Personal access tokens</h2>
450 <p class="help-section-desc">
451 Tokens authenticate CLI clients, CI jobs, and scripts. Create
452 them at <a href="/settings/tokens">/settings/tokens</a>; the value
453 is shown once, so copy it immediately. Tokens start with{" "}
454 <code>glc_</code>.
455 </p>
456 </div>
457 <div class="help-section-body">
458 <div class="help-item">
459 <strong>Example: list your repos via the API.</strong>
460 <pre class="help-code">
234461{`curl -H "Authorization: Bearer glc_your_token_here" \\
235462 https://<your-host>/api/v2/repos`}
236 </pre>
237 </div>
463 </pre>
238464 </div>
239 <div class="panel-item">
240 <div>
241 Tokens can also authenticate <code>git</code> over HTTPS — use
242 the token as the password in place of your account password.
243 </div>
465 <div class="help-item">
466 Tokens can also authenticate <code>git</code> over HTTPS — use
467 the token as the password in place of your account password.
244468 </div>
245469 </div>
246470 </section>
247471
248 <section id="gates" style="margin-bottom: 32px">
249 <h2 style="margin-bottom: 12px; font-size: 20px">
250 Gates & AI review
251 </h2>
252 <div class="panel">
253 <div class="panel-item">
254 <div>
255 Every push to the default branch (usually <code>main</code>)
256 triggers a gate run: GateTest scans the diff for secrets,
257 dependency advisories, and policy violations, while the AI
258 reviewer reads the patch and comments on any PRs that touch
259 the same files. Failing gates block the push by default;
260 results appear on the commit page and in the repo's{" "}
261 <em>Gate runs</em> tab. Configure gate policy per-repo in
262 <strong> Settings → Gates</strong>.
263 </div>
472 {/* ─── Gates & AI review ─── */}
473 <section id="gates" class="help-section">
474 <div class="help-section-head">
475 <div class="help-section-eyebrow">Quality</div>
476 <h2 class="help-section-title">Gates & AI review</h2>
477 <p class="help-section-desc">
478 Push-time scanning + an AI pair reviewer on every PR.
479 </p>
480 </div>
481 <div class="help-section-body">
482 <div class="help-item">
483 Every push to the default branch (usually <code>main</code>)
484 triggers a gate run: GateTest scans the diff for secrets,
485 dependency advisories, and policy violations, while the AI
486 reviewer reads the patch and comments on any PRs that touch
487 the same files. Failing gates block the push by default;
488 results appear on the commit page and in the repo's{" "}
489 <em>Gate runs</em> tab. Configure gate policy per-repo in
490 <strong> Settings → Gates</strong>.
264491 </div>
265492 </div>
266493 </section>
267494
268 <section id="ai-native" style="margin-bottom: 32px">
269 <h2 style="margin-bottom: 12px; font-size: 20px">
270 AI-native flow
271 </h2>
272 <div class="panel">
273 <div class="panel-item">
274 <div>
275 <strong>Issue → PR in one click.</strong> Open any issue you
276 own and hit <em>Build with AI</em> in the header. The spec
277 form pre-fills with the issue title + body and a{" "}
278 <code>Closes #N</code> footer; Claude drafts the diff, opens
279 a draft PR, and the merge auto-closes the originating issue.
280 </div>
495 {/* ─── AI-native flow ─── */}
496 <section id="ai-native" class="help-section">
497 <div class="help-section-head">
498 <div class="help-section-eyebrow">AI-native</div>
499 <h2 class="help-section-title">AI-native flow</h2>
500 <p class="help-section-desc">
501 Surfaces that ride on <code>ANTHROPIC_API_KEY</code>, with
502 deterministic fallbacks when it's missing.
503 </p>
504 </div>
505 <div class="help-section-body">
506 <div class="help-item">
507 <strong>Issue → PR in one click.</strong> Open any issue you
508 own and hit <em>Build with AI</em> in the header. The spec
509 form pre-fills with the issue title + body and a{" "}
510 <code>Closes #N</code> footer; Claude drafts the diff, opens
511 a draft PR, and the merge auto-closes the originating issue.
281512 </div>
282 <div class="panel-item">
283 <div>
284 <strong>AI-drafted PR descriptions.</strong> The new-PR form
285 has a <em>Suggest description with AI</em> button that runs
286 <code> generatePrSummary</code> against{" "}
287 <code>git diff base...head</code> and fills the description
288 with a structured summary (Why · Key changes · Test plan ·
289 Risks).
290 </div>
513 <div class="help-item">
514 <strong>AI-drafted PR descriptions.</strong> The new-PR form
515 has a <em>Suggest description with AI</em> button that runs
516 <code> generatePrSummary</code> against{" "}
517 <code>git diff base...head</code> and fills the description
518 with a structured summary (Why · Key changes · Test plan ·
519 Risks).
291520 </div>
292 <div class="panel-item">
293 <div>
294 <strong>Auto-review on PR open.</strong> Non-draft PRs get a
295 summary comment plus inline file/line annotations from the
296 AI reviewer. A second comment posts label + reviewer +
297 priority suggestions (the <em>AI Triage</em> block). All
298 suggestions; nothing applied automatically.
299 </div>
521 <div class="help-item">
522 <strong>Auto-review on PR open.</strong> Non-draft PRs get a
523 summary comment plus inline file/line annotations from the
524 AI reviewer. A second comment posts label + reviewer +
525 priority suggestions (the <em>AI Triage</em> block). All
526 suggestions; nothing applied automatically.
300527 </div>
301 <div class="panel-item">
302 <div>
303 <strong>Repo-wide AI surfaces.</strong>{" "}
304 <a href="/help#explore">Explain</a> a codebase, run{" "}
305 <a href="/help#explore">semantic search</a>, ask the chat
306 anything about the repo, generate failing test stubs from a
307 source file (the <em>Tests</em> link in the repo nav), and
308 draft full PRs from a plain-English spec via{" "}
309 <em>Spec to PR</em>. All require{" "}
310 <code>ANTHROPIC_API_KEY</code>; without it the surfaces
311 degrade gracefully to deterministic fallbacks.
312 </div>
528 <div class="help-item">
529 <strong>Repo-wide AI surfaces.</strong>{" "}
530 <a href="/help#explore">Explain</a> a codebase, run{" "}
531 <a href="/help#explore">semantic search</a>, ask the chat
532 anything about the repo, generate failing test stubs from a
533 source file (the <em>Tests</em> link in the repo nav), and
534 draft full PRs from a plain-English spec via{" "}
535 <em>Spec to PR</em>. All require{" "}
536 <code>ANTHROPIC_API_KEY</code>; without it the surfaces
537 degrade gracefully to deterministic fallbacks.
313538 </div>
314 <div class="panel-item">
315 <div>
316 <strong>Scheduled workflows.</strong> Drop{" "}
317 <code>on: schedule: [{`{cron: "0 * * * *"}`}]</code> into any
318 <code> .gluecron/workflows/*.yml</code>. The autopilot
319 ticker fires the cron from the same node that handles your
320 pushes — no external scheduler needed.
321 </div>
539 <div class="help-item">
540 <strong>Scheduled workflows.</strong> Drop{" "}
541 <code>on: schedule: [{`{cron: "0 * * * *"}`}]</code> into any
542 <code> .gluecron/workflows/*.yml</code>. The autopilot
543 ticker fires the cron from the same node that handles your
544 pushes — no external scheduler needed.
322545 </div>
323546 </div>
324547 </section>
325548
326 <section id="shortcuts" style="margin-bottom: 32px">
327 <h2 style="margin-bottom: 12px; font-size: 20px">
328 Keyboard shortcuts
329 </h2>
330 <div class="panel">
331 <div class="panel-item">
332 <div>
333 gluecron ships a full keyboard-first mode — see{" "}
334 <a href="/shortcuts">/shortcuts</a> for the complete cheat
335 sheet. Press <code>?</code> on any page to pop the overlay.
336 </div>
549 {/* ─── Shortcuts ─── */}
550 <section id="shortcuts" class="help-section">
551 <div class="help-section-head">
552 <div class="help-section-eyebrow">Power user</div>
553 <h2 class="help-section-title">Keyboard shortcuts</h2>
554 <p class="help-section-desc">
555 Press <code>?</code> on any page to pop the overlay.
556 </p>
557 </div>
558 <div class="help-section-body">
559 <div class="help-item">
560 gluecron ships a full keyboard-first mode — see{" "}
561 <a href="/shortcuts">/shortcuts</a> for the complete cheat
562 sheet. Press <code>?</code> on any page to pop the overlay.
337563 </div>
338564 </div>
339565 </section>
340566
341 <section id="api" style="margin-bottom: 32px">
342 <h2 style="margin-bottom: 12px; font-size: 20px">API</h2>
343 <div class="panel">
344 <div class="panel-item">
345 <div>
346 Full REST + GraphQL reference lives at{" "}
347 <a href="/api/docs">/api/docs</a>. The GraphQL explorer is at{" "}
348 <a href="/api/graphql">/api/graphql</a>.
349 </div>
567 {/* ─── API ─── */}
568 <section id="api" class="help-section">
569 <div class="help-section-head">
570 <div class="help-section-eyebrow">Reference</div>
571 <h2 class="help-section-title">API</h2>
572 <p class="help-section-desc">
573 REST + GraphQL surfaces, both documented inline.
574 </p>
575 </div>
576 <div class="help-section-body">
577 <div class="help-item">
578 Full REST + GraphQL reference lives at{" "}
579 <a href="/api/docs">/api/docs</a>. The GraphQL explorer is at{" "}
580 <a href="/api/graphql">/api/graphql</a>.
350581 </div>
351582 </div>
352583 </section>
353584
354 <p
355 style="color: var(--text-muted); font-size: 13px; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--border)"
356 >
585 <p class="help-footnote">
357586 Something missing? Open an issue on gluecron's source repo.
358587 </p>
359588 </div>
360589