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

ide-multiplayer.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/ide-multiplayer.tsx
ide-multiplayer.tsxBlame773 lines · 1 contributor
Normal viewRaw
11c3ab6ccanty labs1import type { FC } from "hono/jsx";
2
3export interface IdeMultiplayerProps {
4 user?: any;
5 sessionId?: string;
6}
7
8const baseLines = [
9 { n: 148, text: " const session = await sandbox.attach(pr.id);", color: "#16181d", bg: "transparent", agentCursor: false },
10 { n: 149, text: "", color: "#16181d", bg: "transparent", agentCursor: false },
11 { n: 150, text: " // Bounded repair: never hold a sandbox forever.", color: "#8a8d99", bg: "transparent", agentCursor: false },
12 { n: 151, text: " for (let i = 0; i < MAX_REPAIR_ATTEMPTS; i++) {", color: "#2fbf83", bg: "rgba(30,127,92,0.05)", agentCursor: false },
13 { n: 152, text: " const patch = await attemptPatch(gate, session);", color: "#2fbf83", bg: "rgba(30,127,92,0.05)", agentCursor: false },
14 { n: 153, text: " if (await gates.rerun(session, patch)) break;", color: "#2fbf83", bg: "rgba(30,127,92,0.05)", agentCursor: false },
15 { n: 154, text: " }", color: "#2fbf83", bg: "rgba(30,127,92,0.05)", agentCursor: true },
16 { n: 155, text: "", color: "#16181d", bg: "transparent", agentCursor: false },
17 { n: 156, text: ' telemetry.record("repair.attempt", {', color: "#16181d", bg: "transparent", agentCursor: false },
18 { n: 157, text: " gate: gate.name,", color: "#16181d", bg: "transparent", agentCursor: false },
19 { n: 158, text: " attempts: i,", color: "#16181d", bg: "transparent", agentCursor: false },
20 { n: 159, text: " outcome: session.lastRun,", color: "#16181d", bg: "transparent", agentCursor: false },
21 { n: 160, text: " });", color: "#16181d", bg: "transparent", agentCursor: false },
22];
23
24const chatMessages = [
25 { who: "CC", avatarBg: "#4353c9", text: "The loop needs an upper bound — a red gate could hold the sandbox forever." },
26 { who: "CL", avatarBg: "#1e7f5c", text: "Agreed. Capping at MAX_REPAIR_ATTEMPTS and threading the session through each attempt — typing it now, lines 151–154." },
27 { who: "CL", avatarBg: "#1e7f5c", text: "Done. Accept the suggestion and I'll re-run gate: tests in the sandbox." },
28];
29
30export const IdeMultiplayer: FC<IdeMultiplayerProps> = (props) => {
31 const { user, sessionId = "pr-218" } = props;
32 const initials = user?.username
33 ? user.username.slice(0, 2).toUpperCase()
34 : "CC";
35
36 return (
37 <>
38 <style dangerouslySetInnerHTML={{ __html: css }} />
39 <div class="im-root">
40 {/* Top nav */}
41 <header class="im-header">
42 <a href="/" class="im-logo">
43 <span class="im-logo-mark" />
44 gluecron
45 </a>
46 <span class="im-header-sep">/</span>
47 <span class="im-header-sub">IDE extension · VS Code</span>
48 <div class="im-header-right">
49 <span class="im-header-note">Side-by-side, in your editor — the browser is optional</span>
50 </div>
51 </header>
52
53 <main class="im-main">
54 {/* Page heading */}
55 <div class="im-intro">
56 <div class="im-eyebrow">Multiplayer session · {sessionId} sandbox</div>
57 <h1 class="im-h1">You and the agent, in the same file.</h1>
58 <p class="im-lead">The extension joins the PR sandbox as a live session. You see the agent's cursor, it sees your edits, and either of you can take the keyboard — no context switch, no browser.</p>
59 </div>
60
61 {/* Editor mock */}
62 <div class="im-window" id="im-window">
63 {/* Title bar */}
64 <div class="im-titlebar">
65 <span class="im-dot im-dot-r" />
66 <span class="im-dot im-dot-y" />
67 <span class="im-dot im-dot-g" />
68 <span class="im-titlebar-filename">auto-repair.ts — gluecron · sandbox {sessionId}</span>
69 <span class="im-titlebar-chips">
70 <span class="im-chip im-chip-you">
71 <span class="im-chip-avatar im-chip-avatar-you">{initials}</span>
72 you
73 </span>
74 <span class="im-chip im-chip-claude">
75 <span class="im-chip-avatar im-chip-avatar-claude">CL</span>
76 claude
77 </span>
78 </span>
79 </div>
80
81 {/* Body: code pane + session rail */}
82 <div class="im-body">
83 {/* Code pane */}
84 <div class="im-code-pane" id="im-code-pane">
85 {baseLines.map((line) => (
86 <div
87 class="im-code-line"
88 style={`background:${line.bg}`}
89 data-agent-line={line.agentCursor ? "true" : "false"}
90 >
91 <span class="im-line-num">{line.n}</span>
92 <span
93 class="im-line-text"
94 style={`color:${line.color}`}
95 data-is-green={line.color === "#2fbf83" ? "true" : "false"}
96 >
97 {line.text}
98 {line.agentCursor && (
99 <>
100 <span class="im-caret" />
101 <span class="im-caret-label">← claude</span>
102 </>
103 )}
104 </span>
105 </div>
106 ))}
107 </div>
108
109 {/* Session rail */}
110 <div class="im-rail">
111 {/* Status section */}
112 <div class="im-rail-status">
113 <div class="im-rail-label">Session</div>
114 <div class="im-status-rows">
115 <div class="im-status-row">
116 <span class="im-dot-status im-dot-green im-dot-pulse" />
117 <span class="im-status-text" id="im-agent-status">claude finished — 4 lines suggested</span>
118 </div>
119 <div class="im-status-row">
120 <span class="im-dot-status im-dot-green" />
121 <span class="im-status-secondary">sandbox {sessionId} · terminal shared</span>
122 </div>
123 <div class="im-status-row">
124 <span class="im-dot-status im-gate-dot" id="im-gate-dot" />
125 <span class="im-status-secondary" id="im-gate-status">gates ready to re-run on accept</span>
126 </div>
127 </div>
128 </div>
129
130 {/* Chat feed */}
131 <div class="im-chat-feed" id="im-chat-feed">
132 <div class="im-rail-label">Chat</div>
133 {chatMessages.map((msg) => (
134 <div class="im-chat-msg">
135 <span
136 class="im-chat-avatar"
137 style={`background:${msg.avatarBg}`}
138 >
139 {msg.who}
140 </span>
141 <p class="im-chat-text">{msg.text}</p>
142 </div>
143 ))}
144 </div>
145
146 {/* Message input */}
147 <div class="im-chat-input-row">
148 <input
149 class="im-chat-input"
150 placeholder="Message claude…"
151 id="im-msg-input"
152 type="text"
153 />
154 <button class="im-chat-send" type="button" id="im-msg-send">Send</button>
155 </div>
156 </div>
157 </div>
158
159 {/* Status bar */}
160 <div class="im-statusbar">
161 <span>⎇ feat/repair-sandbox-loop</span>
162 <span>gluecron: connected</span>
163 <span class="im-statusbar-right">
164 agent edits: suggested → you accept ·{" "}
165 <button
166 class="im-mode-toggle"
167 type="button"
168 id="im-mode-toggle"
169 >
170 switch to observe-only
171 </button>
172 </span>
173 </div>
174 </div>
175
176 {/* Manual note row */}
177 <div class="im-footer-note">
178 <p class="im-footer-text">
179 Don't want the agent typing? Set it to{" "}
180 <strong class="im-footer-strong">observe-only</strong> and it becomes a reviewer in your gutter — you keep the keyboard, it keeps the receipts. Works identically in JetBrains.
181 </p>
182 <a href="#" class="im-footer-link">Open this session on the web →</a>
183 </div>
184 </main>
185 </div>
186
187 <script dangerouslySetInnerHTML={{ __html: js }} />
188 </>
189 );
190};
191
192export default IdeMultiplayer;
193
194const js = `
195(function() {
196 var step = 3;
197 var agentMode = "suggest";
198
199 var agentStatusEl = document.getElementById("im-agent-status");
200 var gateDotEl = document.getElementById("im-gate-dot");
201 var gateStatusEl = document.getElementById("im-gate-status");
202 var modeToggleEl = document.getElementById("im-mode-toggle");
203 var msgInput = document.getElementById("im-msg-input");
204 var msgSend = document.getElementById("im-msg-send");
205 var chatFeed = document.getElementById("im-chat-feed");
206
207 function applyStep(s) {
208 if (!agentStatusEl) return;
209 if (s < 3) {
210 agentStatusEl.textContent = "claude is typing in auto-repair.ts";
211 } else {
212 agentStatusEl.textContent = "claude finished — 4 lines suggested";
213 }
214 if (gateDotEl) {
215 if (s >= 3) {
216 gateDotEl.style.background = "#b45309";
217 gateDotEl.classList.add("im-dot-pulse");
218 } else {
219 gateDotEl.style.background = "#c4c6cf";
220 gateDotEl.classList.remove("im-dot-pulse");
221 }
222 }
223 if (gateStatusEl) {
224 gateStatusEl.textContent = s >= 3 ? "gates ready to re-run on accept" : "gates idle";
225 }
226
227 // show/hide green lines based on step
228 var codePane = document.getElementById("im-code-pane");
229 if (codePane) {
230 var greenLines = codePane.querySelectorAll("[data-is-green='true']");
231 greenLines.forEach(function(el, i) {
232 var lineDiv = el.parentElement;
233 var shown = s === 0 ? 1 : s === 1 ? 3 : 4;
234 if (i < shown) {
235 lineDiv.style.display = "";
236 } else {
237 lineDiv.style.display = "none";
238 }
239 // update cursor visibility
240 var agentLine = lineDiv.getAttribute("data-agent-line");
241 if (agentLine === "true") {
242 var caret = lineDiv.querySelector(".im-caret");
243 var caretLabel = lineDiv.querySelector(".im-caret-label");
244 if (s < 3) {
245 if (i === shown - 1) {
246 if (caret) caret.style.display = "inline-block";
247 if (caretLabel) caretLabel.style.display = "inline-block";
248 } else {
249 if (caret) caret.style.display = "none";
250 if (caretLabel) caretLabel.style.display = "none";
251 }
252 } else {
253 if (caret) caret.style.display = "none";
254 if (caretLabel) caretLabel.style.display = "none";
255 }
256 }
257 });
258 }
259 }
260
261 applyStep(step);
262
263 if (modeToggleEl) {
264 modeToggleEl.addEventListener("click", function() {
265 agentMode = agentMode === "suggest" ? "observe" : "suggest";
266 modeToggleEl.textContent = agentMode === "suggest" ? "switch to observe-only" : "switch to suggest";
267 });
268 }
269
270 if (msgSend && msgInput && chatFeed) {
271 function sendMsg() {
272 var val = msgInput.value.trim();
273 if (!val) return;
274 var msg = document.createElement("div");
275 msg.className = "im-chat-msg";
276 msg.innerHTML = '<span class="im-chat-avatar" style="background:#4353c9">CC</span><p class="im-chat-text">' + val.replace(/</g,"&lt;").replace(/>/g,"&gt;") + '</p>';
277 chatFeed.appendChild(msg);
278 chatFeed.scrollTop = chatFeed.scrollHeight;
279 msgInput.value = "";
280 }
281 msgSend.addEventListener("click", sendMsg);
282 msgInput.addEventListener("keydown", function(e) {
283 if (e.key === "Enter") sendMsg();
284 });
285 }
286})();
287`;
288
289const css = `
290@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700&family=Inter+Tight:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
291
292@keyframes imPulse {
293 0%, 100% { opacity: 1; }
294 50% { opacity: 0.35; }
295}
296@keyframes imCaret {
297 0%, 49% { opacity: 1; }
298 50%, 100% { opacity: 0; }
299}
300
301*, *::before, *::after { box-sizing: border-box; }
302
303.im-root {
304 font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
305 font-size: 14px;
306 line-height: 1.55;
307 letter-spacing: -0.008em;
308 color: #16181d;
309 background: #fcfcfd;
310 min-height: 100vh;
311 display: flex;
312 flex-direction: column;
313 -webkit-font-smoothing: antialiased;
314 text-rendering: optimizeLegibility;
315}
316
317/* Header */
318.im-header {
319 height: 56px;
320 border-bottom: 1px solid rgba(22,24,29,0.07);
321 background: #fcfcfd;
322 display: flex;
323 align-items: center;
324 padding: 0 28px;
325 gap: 20px;
326}
327
328.im-logo {
329 display: inline-flex;
330 align-items: center;
331 gap: 9px;
332 font-family: 'Inter Tight', sans-serif;
333 font-weight: 600;
334 font-size: 15px;
335 letter-spacing: -0.02em;
336 color: #16181d;
337 text-decoration: none;
338}
339
340.im-logo-mark {
341 width: 16px;
342 height: 16px;
343 border-radius: 5px;
344 background: #4353c9;
345 display: inline-block;
346 flex-shrink: 0;
347}
348
349.im-header-sep {
350 color: #c4c6cf;
351}
352
353.im-header-sub {
354 font-size: 13px;
355 color: #16181d;
356 font-weight: 500;
357}
358
359.im-header-right {
360 margin-left: auto;
361 display: flex;
362 align-items: center;
363 gap: 14px;
364}
365
366.im-header-note {
367 font-size: 12.5px;
368 color: #6b7080;
369}
370
371/* Main */
372.im-main {
373 flex: 1;
374 max-width: 1240px;
375 width: 100%;
376 margin: 0 auto;
377 padding: 44px 32px 80px;
378 box-sizing: border-box;
379}
380
381/* Intro */
382.im-intro {
383 max-width: 680px;
384 margin-bottom: 32px;
385}
386
387.im-eyebrow {
388 font-family: 'JetBrains Mono', monospace;
389 font-size: 11px;
390 letter-spacing: 0.12em;
391 text-transform: uppercase;
392 color: #8a8d99;
393 margin-bottom: 10px;
394}
395
396.im-h1 {
397 font-family: 'Inter Tight', sans-serif;
398 font-size: 28px;
399 font-weight: 600;
400 letter-spacing: -0.025em;
401 line-height: 1.15;
402 margin: 0 0 8px;
403 color: #111318;
404}
405
406.im-lead {
407 font-size: 14px;
408 color: #6b7080;
409 margin: 0;
410 line-height: 1.6;
411}
412
413/* Editor window */
414.im-window {
415 border: 1px solid rgba(22,24,29,0.10);
416 border-radius: 14px;
417 background: #ffffff;
418 overflow: hidden;
419 box-shadow: 0 1px 2px rgba(22,24,29,0.03), 0 16px 44px -24px rgba(22,24,29,0.16);
420}
421
422/* Title bar */
423.im-titlebar {
424 display: flex;
425 align-items: center;
426 gap: 8px;
427 padding: 10px 16px;
428 border-bottom: 1px solid rgba(22,24,29,0.07);
429 background: #fcfcfd;
430}
431
432.im-dot {
433 width: 10px;
434 height: 10px;
435 border-radius: 50%;
436 flex-shrink: 0;
437}
438.im-dot-r { background: #ff5f57; }
439.im-dot-y { background: #febc2e; }
440.im-dot-g { background: #28c840; }
441
442.im-titlebar-filename {
443 margin-left: 10px;
444 font-family: 'JetBrains Mono', monospace;
445 font-size: 12px;
446 color: #6b7080;
447}
448
449.im-titlebar-chips {
450 margin-left: auto;
451 display: inline-flex;
452 gap: 6px;
453}
454
455.im-chip {
456 display: inline-flex;
457 align-items: center;
458 gap: 5px;
459 padding: 2px 10px 2px 4px;
460 border-radius: 9999px;
461 font-size: 11px;
462 font-weight: 600;
463}
464
465.im-chip-you {
466 background: rgba(67,83,201,0.07);
467 border: 1px solid rgba(67,83,201,0.20);
468 color: #4353c9;
469}
470
471.im-chip-claude {
472 background: rgba(30,127,92,0.07);
473 border: 1px solid rgba(30,127,92,0.22);
474 color: #1e7f5c;
475}
476
477.im-chip-avatar {
478 width: 16px;
479 height: 16px;
480 border-radius: 50%;
481 display: inline-flex;
482 align-items: center;
483 justify-content: center;
484 font-size: 8px;
485 font-weight: 700;
486 color: #fff;
487 flex-shrink: 0;
488}
489
490.im-chip-avatar-you { background: #4353c9; }
491.im-chip-avatar-claude { background: #1e7f5c; }
492
493/* Body grid */
494.im-body {
495 display: grid;
496 grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
497}
498
499/* Code pane */
500.im-code-pane {
501 border-right: 1px solid rgba(22,24,29,0.07);
502 background: #0f1116;
503 font-family: 'JetBrains Mono', monospace;
504 font-size: 12.5px;
505 line-height: 1.85;
506 padding: 14px 0;
507 overflow-x: auto;
508}
509
510.im-code-line {
511 display: grid;
512 grid-template-columns: 44px minmax(0, 1fr);
513}
514
515.im-line-num {
516 text-align: right;
517 padding-right: 14px;
518 color: #c4c6cf;
519 user-select: none;
520 opacity: 0.4;
521}
522
523.im-line-text {
524 white-space: pre;
525 position: relative;
526 padding-right: 16px;
527}
528
529.im-caret {
530 display: inline-block;
531 width: 2px;
532 height: 15px;
533 background: #1e7f5c;
534 vertical-align: text-bottom;
535 animation: imCaret 1s step-end infinite;
536}
537
538.im-caret-label {
539 display: inline-block;
540 font-family: 'Inter', sans-serif;
541 font-size: 9px;
542 font-weight: 600;
543 color: #fff;
544 background: #1e7f5c;
545 border-radius: 3px;
546 padding: 0 5px;
547 position: relative;
548 top: -9px;
549 left: 4px;
550}
551
552/* Session rail */
553.im-rail {
554 display: flex;
555 flex-direction: column;
556 background: #fcfcfd;
557 min-height: 340px;
558}
559
560.im-rail-status {
561 padding: 14px 18px;
562 border-bottom: 1px solid rgba(22,24,29,0.06);
563}
564
565.im-rail-label {
566 font-family: 'JetBrains Mono', monospace;
567 font-size: 10.5px;
568 letter-spacing: 0.1em;
569 text-transform: uppercase;
570 color: #8a8d99;
571 font-weight: 500;
572 margin-bottom: 10px;
573}
574
575.im-status-rows {
576 display: flex;
577 flex-direction: column;
578 gap: 8px;
579 font-size: 12.5px;
580}
581
582.im-status-row {
583 display: flex;
584 align-items: center;
585 gap: 8px;
586}
587
588.im-dot-status {
589 width: 7px;
590 height: 7px;
591 border-radius: 50%;
592 flex-shrink: 0;
593}
594
595.im-dot-green { background: #1e7f5c; }
596.im-gate-dot { background: #b45309; }
597
598.im-dot-pulse {
599 animation: imPulse 1.4s ease-in-out infinite;
600}
601
602.im-status-text {
603 color: #16181d;
604}
605
606.im-status-secondary {
607 color: #6b7080;
608}
609
610/* Chat feed */
611.im-chat-feed {
612 flex: 1;
613 padding: 14px 18px;
614 display: flex;
615 flex-direction: column;
616 gap: 12px;
617 overflow-y: auto;
618 max-height: 260px;
619}
620
621.im-chat-msg {
622 display: flex;
623 gap: 9px;
624 align-items: flex-start;
625}
626
627.im-chat-avatar {
628 width: 20px;
629 height: 20px;
630 border-radius: 50%;
631 color: #fff;
632 display: inline-flex;
633 align-items: center;
634 justify-content: center;
635 font-size: 8px;
636 font-weight: 700;
637 flex-shrink: 0;
638 margin-top: 1px;
639}
640
641.im-chat-text {
642 font-size: 12.5px;
643 color: #16181d;
644 margin: 0;
645 line-height: 1.55;
646}
647
648/* Chat input */
649.im-chat-input-row {
650 padding: 12px 14px;
651 border-top: 1px solid rgba(22,24,29,0.06);
652 display: flex;
653 gap: 8px;
654}
655
656.im-chat-input {
657 flex: 1;
658 border: 1px solid rgba(22,24,29,0.10);
659 border-radius: 8px;
660 padding: 7px 12px;
661 outline: none;
662 font-family: inherit;
663 font-size: 12.5px;
664 color: #16181d;
665 background: #ffffff;
666 box-sizing: border-box;
667 min-width: 0;
668}
669
670.im-chat-input:focus {
671 border-color: rgba(67,83,201,0.35);
672 box-shadow: 0 0 0 2px rgba(67,83,201,0.08);
673}
674
675.im-chat-send {
676 padding: 7px 13px;
677 border-radius: 8px;
678 font-size: 12px;
679 font-weight: 500;
680 border: 0;
681 background: #16181d;
682 color: #fff;
683 cursor: pointer;
684 font-family: inherit;
685 white-space: nowrap;
686 transition: opacity 0.15s;
687}
688
689.im-chat-send:hover {
690 opacity: 0.85;
691}
692
693/* Status bar */
694.im-statusbar {
695 display: flex;
696 align-items: center;
697 gap: 16px;
698 padding: 7px 16px;
699 border-top: 1px solid rgba(22,24,29,0.07);
700 background: #fcfcfd;
701 font-family: 'JetBrains Mono', monospace;
702 font-size: 11px;
703 color: #8a8d99;
704}
705
706.im-statusbar-right {
707 margin-left: auto;
708}
709
710.im-mode-toggle {
711 border: 0;
712 background: none;
713 color: #4353c9;
714 cursor: pointer;
715 font-family: 'JetBrains Mono', monospace;
716 font-size: 11px;
717 padding: 0;
718 text-decoration: underline;
719 text-decoration-color: transparent;
720 transition: text-decoration-color 0.15s;
721}
722
723.im-mode-toggle:hover {
724 text-decoration-color: #4353c9;
725}
726
727/* Footer note */
728.im-footer-note {
729 display: flex;
730 justify-content: space-between;
731 gap: 24px;
732 flex-wrap: wrap;
733 margin-top: 24px;
734 align-items: flex-start;
735}
736
737.im-footer-text {
738 font-size: 12.5px;
739 color: #8a8d99;
740 margin: 0;
741 max-width: 60ch;
742 line-height: 1.6;
743}
744
745.im-footer-strong {
746 color: #16181d;
747 font-weight: 500;
748}
749
750.im-footer-link {
751 font-size: 13px;
752 color: #4353c9;
753 text-decoration: none;
754 white-space: nowrap;
755}
756
757.im-footer-link:hover {
758 text-decoration: underline;
759}
760
761@media (max-width: 768px) {
762 .im-main {
763 padding: 28px 18px 60px;
764 }
765 .im-body {
766 grid-template-columns: 1fr;
767 }
768 .im-rail {
769 border-top: 1px solid rgba(22,24,29,0.07);
770 border-right: none;
771 }
772}
773`;