hotsocket.fyi
This repository has no description
1:root {
2 color-scheme: dark;
3 font-family:
4 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
5 background: #000;
6 color: #ededed;
7 --bg: #000;
8 --panel: #050505;
9 --panel-soft: #0b0b0b;
10 --line: #262626;
11 --line-soft: #171717;
12 --ink: #ededed;
13 --muted: #8a8a8a;
14 --quiet: #5f5f5f;
15 --agent: #d787ff;
16 --you: #6bd7cf;
17 --tool: #e5c07b;
18 --context: #777;
19 --green: #7ee787;
20 --cyan: #79c0ff;
21 --pink: #ff7eb6;
22 --violet: #b18cff;
23 --amber: #e5c07b;
24 --danger-bg: #160609;
25 --danger-ink: #ff8f9a;
26}
27
28* {
29 box-sizing: border-box;
30}
31
32html,
33body,
34#root {
35 min-height: 100vh;
36 background: #000;
37}
38
39body {
40 margin: 0;
41 overflow: hidden;
42}
43
44button,
45input,
46textarea {
47 font: inherit;
48}
49
50button {
51 cursor: pointer;
52 border: 1px solid #303030;
53 border-radius: 6px;
54 background: #0c0c0c;
55 color: var(--ink);
56 padding: 7px 10px;
57}
58
59button:hover:not(:disabled) {
60 border-color: #555;
61 background: #151515;
62}
63
64button:disabled {
65 cursor: default;
66 opacity: 0.46;
67}
68
69h1,
70h2,
71p {
72 margin: 0;
73}
74
75h1 {
76 font-size: 18px;
77 font-weight: 700;
78 letter-spacing: 0;
79}
80
81h2 {
82 font-size: 15px;
83 font-weight: 700;
84 letter-spacing: 0;
85}
86
87.place {
88 height: 100vh;
89 display: grid;
90 grid-template-columns: 260px minmax(0, 1fr) 286px;
91 background: #000;
92 color: var(--ink);
93}
94
95.connections,
96.notes,
97.thread {
98 min-width: 0;
99 background: #000;
100}
101
102.connections {
103 border-right: 1px solid var(--line);
104}
105
106.notes {
107 border-left: 1px solid var(--line);
108}
109
110.connections header,
111.thread-head {
112 min-height: 58px;
113 display: flex;
114 align-items: center;
115 justify-content: space-between;
116 gap: 14px;
117 border-bottom: 1px solid var(--line);
118}
119
120.connections header {
121 padding: 0 16px;
122}
123
124.connect-form {
125 display: grid;
126 gap: 8px;
127 padding: 14px 16px;
128 border-bottom: 1px solid var(--line);
129}
130
131input,
132textarea {
133 width: 100%;
134 border: 1px solid #303030;
135 border-radius: 6px;
136 background: #020202;
137 color: var(--ink);
138 padding: 9px 10px;
139 outline: none;
140}
141
142input::placeholder,
143textarea::placeholder {
144 color: #666;
145}
146
147input:focus,
148textarea:focus {
149 border-color: #6f6f6f;
150 box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
151}
152
153textarea {
154 line-height: 1.55;
155}
156
157.agent-list {
158 padding: 12px 0;
159}
160
161.agent-list section + section {
162 margin-top: 16px;
163}
164
165.panel-line {
166 display: flex;
167 align-items: center;
168 justify-content: space-between;
169 gap: 8px;
170 padding: 0 16px 7px;
171 color: var(--quiet);
172 font-size: 12px;
173}
174
175.panel-line button {
176 border: 0;
177 background: transparent;
178 color: #b36f6f;
179 padding: 0;
180}
181
182.agent-button {
183 width: 100%;
184 display: grid;
185 grid-template-columns: minmax(0, 1fr) auto;
186 align-items: baseline;
187 gap: 10px;
188 border: 0;
189 border-radius: 0;
190 border-left: 2px solid transparent;
191 background: transparent;
192 color: var(--ink);
193 padding: 10px 16px 10px 14px;
194 text-align: left;
195}
196
197.agent-button.is-current {
198 border-left-color: var(--agent);
199 background: #090909;
200}
201
202.agent-button span {
203 min-width: 0;
204 overflow: hidden;
205 text-overflow: ellipsis;
206 white-space: nowrap;
207}
208
209.agent-button small,
210.quiet,
211.thread-head p,
212dt,
213.compactions small {
214 color: var(--muted);
215}
216
217.quiet {
218 padding: 8px 16px;
219 font-size: 12px;
220 line-height: 1.45;
221}
222
223.thread {
224 height: 100vh;
225 display: grid;
226 grid-template-rows: auto auto minmax(0, 1fr) auto;
227}
228
229.thread-head {
230 padding: 0 28px;
231}
232
233.thread-head > div:first-child {
234 min-width: 0;
235}
236
237.thread-head p {
238 margin-top: 4px;
239 font-size: 12px;
240}
241
242.readout {
243 display: flex;
244 gap: 16px;
245 color: var(--quiet);
246 font-size: 12px;
247 white-space: nowrap;
248}
249
250.error-line {
251 padding: 10px 28px;
252 border-bottom: 1px solid #351014;
253 background: var(--danger-bg);
254 color: var(--danger-ink);
255 font-size: 13px;
256}
257
258.messages {
259 min-height: 0;
260 overflow: auto;
261 padding: 18px 28px 34px;
262 scroll-padding-bottom: 26px;
263}
264
265.empty {
266 max-width: 780px;
267 color: var(--muted);
268 font-size: 14px;
269 line-height: 1.65;
270}
271
272.terminal-message {
273 width: 100%;
274 margin: 0 0 15px;
275}
276
277.terminal-message + .terminal-message-note,
278.terminal-message + .terminal-message-context {
279 margin-top: 20px;
280}
281
282.terminal-row {
283 display: grid;
284 grid-template-columns: max-content minmax(0, 1fr) auto;
285 align-items: start;
286 gap: 0 0.75ch;
287}
288
289.terminal-prefix {
290 line-height: 1.58;
291 font-weight: 700;
292 white-space: nowrap;
293}
294
295.terminal-prefix-agent {
296 color: var(--agent);
297}
298
299.terminal-prefix-user {
300 color: var(--you);
301}
302
303.terminal-prefix-tool {
304 color: var(--tool);
305}
306
307.terminal-prefix-context,
308.terminal-prefix-note {
309 color: var(--context);
310 font-weight: 600;
311}
312
313.terminal-prefix-error {
314 color: var(--danger-ink);
315}
316
317.terminal-body {
318 min-width: 0;
319 color: #ececec;
320}
321
322.terminal-message-user .terminal-body {
323 color: #e9fff9;
324}
325
326.terminal-message-context .terminal-body,
327.terminal-message-note .terminal-body {
328 color: #8b8b8b;
329}
330
331.terminal-time {
332 padding-top: 3px;
333 margin-left: 18px;
334 color: #484848;
335 font-size: 11px;
336 line-height: 1.4;
337 white-space: nowrap;
338}
339
340.terminal-summary-text {
341 display: inline;
342 color: inherit;
343 line-height: 1.58;
344}
345
346.terminal-command {
347 display: inline-flex;
348 max-width: 100%;
349 align-items: baseline;
350 gap: 12px;
351 border: 0;
352 border-radius: 0;
353 background: transparent;
354 color: var(--tool);
355 padding: 0;
356 text-align: left;
357 line-height: 1.58;
358}
359
360.terminal-command:hover:not(:disabled) {
361 background: transparent;
362 color: #f0d28f;
363}
364
365.terminal-command span {
366 min-width: 0;
367 overflow: hidden;
368 text-overflow: ellipsis;
369 white-space: nowrap;
370}
371
372.terminal-command small {
373 flex: 0 0 auto;
374 color: #777;
375 font-size: 12px;
376 font-weight: 400;
377}
378
379.terminal-inline-action {
380 margin-left: 10px;
381 border: 0;
382 border-radius: 0;
383 background: transparent;
384 color: #7eb6d9;
385 padding: 0;
386 line-height: 1.58;
387 text-decoration: underline;
388 text-decoration-color: #335266;
389 text-underline-offset: 3px;
390}
391
392.terminal-inline-action:hover:not(:disabled) {
393 background: transparent;
394 color: #a7d8f2;
395}
396
397.terminal-block {
398 margin: 8px 0 0;
399 border-left: 1px solid #526a6a;
400 padding-left: 12px;
401}
402
403.terminal-block-tool {
404 border-left-color: #655b36;
405}
406
407.markdown-body {
408 max-width: none;
409 color: inherit;
410 font-size: 14px;
411 line-height: 1.58;
412}
413
414.terminal-message-agent .markdown-body {
415 color: #ededed;
416}
417
418.terminal-message-user .markdown-body {
419 color: #e9fff9;
420}
421
422.markdown-body > :first-child {
423 margin-top: 0;
424}
425
426.markdown-body > :last-child {
427 margin-bottom: 0;
428}
429
430.markdown-body p,
431.markdown-body ul,
432.markdown-body ol,
433.markdown-body blockquote,
434.markdown-body pre,
435.markdown-body table {
436 margin: 0 0 12px;
437}
438
439.markdown-body ul,
440.markdown-body ol {
441 padding-left: 22px;
442}
443
444.markdown-body li + li {
445 margin-top: 4px;
446}
447
448.markdown-body a {
449 color: #d7d7d7;
450 text-decoration-color: #777;
451 text-underline-offset: 3px;
452}
453
454.markdown-body code:not(pre code) {
455 border: 1px solid #2b2b2b;
456 border-radius: 4px;
457 background: #111;
458 color: #f0f0f0;
459 padding: 1px 5px;
460 font: inherit;
461 font-size: 0.94em;
462}
463
464.markdown-body pre,
465.code-block {
466 width: 100%;
467 max-height: 520px;
468 overflow: auto;
469 border: 0;
470 border-left: 1px solid #526a6a;
471 border-radius: 0;
472 background: #111;
473 padding: 10px 12px;
474 color: #ededed;
475 font: inherit;
476 font-size: 13px;
477 line-height: 1.58;
478}
479
480.code-block {
481 margin: 0;
482 white-space: pre;
483}
484
485.markdown-body pre {
486 margin-top: 6px;
487}
488
489.terminal-block .code-block {
490 border-left: 0;
491 background: #0d0d0d;
492}
493
494.markdown-body pre code,
495.code-block code {
496 background: transparent;
497 border: 0;
498 padding: 0;
499 color: inherit;
500 font: inherit;
501}
502
503.markdown-body blockquote {
504 border-left: 1px solid #454545;
505 color: #aaa;
506 padding-left: 12px;
507}
508
509.markdown-body table {
510 width: 100%;
511 border-collapse: collapse;
512 font-size: 13px;
513}
514
515.markdown-body th,
516.markdown-body td {
517 border: 1px solid #252525;
518 padding: 7px 9px;
519}
520
521.markdown-body th {
522 background: #0d0d0d;
523}
524
525.hljs-keyword,
526.hljs-selector-tag,
527.hljs-subst {
528 color: var(--pink);
529}
530
531.hljs-string,
532.hljs-title,
533.hljs-section,
534.hljs-name,
535.hljs-attribute {
536 color: var(--green);
537}
538
539.hljs-number,
540.hljs-literal,
541.hljs-symbol,
542.hljs-bullet {
543 color: var(--violet);
544}
545
546.hljs-built_in,
547.hljs-type,
548.hljs-class .hljs-title,
549.hljs-variable,
550.hljs-template-variable {
551 color: var(--cyan);
552}
553
554.hljs-comment,
555.hljs-quote,
556.hljs-deletion,
557.hljs-meta {
558 color: #777;
559}
560
561.hljs-addition {
562 color: var(--green);
563}
564
565.hljs-params,
566.hljs-attr {
567 color: var(--amber);
568}
569
570.composer {
571 display: grid;
572 grid-template-columns: minmax(0, 1fr) auto;
573 gap: 12px;
574 padding: 14px 28px 18px;
575 border-top: 1px solid var(--line);
576 background: #000;
577}
578
579.composer textarea {
580 min-height: 76px;
581 max-height: 190px;
582 resize: vertical;
583 background: #020202;
584}
585
586.composer button {
587 align-self: end;
588 min-width: 88px;
589 height: 40px;
590 background: #ededed;
591 border-color: #ededed;
592 color: #000;
593 font-weight: 700;
594}
595
596.notes {
597 padding: 0 16px 22px;
598 overflow: auto;
599}
600
601.notes section {
602 padding: 20px 0;
603 border-bottom: 1px solid var(--line);
604}
605
606.notes h2 {
607 margin-bottom: 13px;
608 color: #dcdcdc;
609}
610
611dl {
612 margin: 0;
613}
614
615dl div {
616 display: grid;
617 grid-template-columns: 72px minmax(0, 1fr);
618 gap: 10px;
619 padding: 6px 0;
620}
621
622dt {
623 font-size: 12px;
624}
625
626dd {
627 margin: 0;
628 color: #dedede;
629}
630
631.compactions {
632 display: grid;
633 gap: 10px;
634}
635
636.compactions article {
637 border-top: 1px solid var(--line-soft);
638 padding-top: 10px;
639}
640
641.compactions button {
642 width: 100%;
643 display: grid;
644 grid-template-columns: 48px minmax(0, 1fr);
645 gap: 3px 10px;
646 border: 0;
647 border-radius: 0;
648 background: transparent;
649 color: var(--ink);
650 padding: 0;
651 text-align: left;
652}
653
654.compactions button:hover:not(:disabled) {
655 background: transparent;
656}
657
658.compactions strong,
659.compactions small {
660 min-width: 0;
661 overflow: hidden;
662 text-overflow: ellipsis;
663 white-space: nowrap;
664}
665
666.compactions small {
667 grid-column: 2;
668}
669
670@media (max-width: 1120px) {
671 .place {
672 grid-template-columns: 230px minmax(0, 1fr);
673 }
674
675 .notes {
676 display: none;
677 }
678}
679
680@media (max-width: 760px) {
681 body {
682 overflow: auto;
683 }
684
685 .place {
686 min-height: 100vh;
687 height: auto;
688 grid-template-columns: 1fr;
689 }
690
691 .connections {
692 border-right: 0;
693 border-bottom: 1px solid var(--line);
694 }
695
696 .agent-list {
697 max-height: 220px;
698 overflow: auto;
699 }
700
701 .thread {
702 min-height: 72vh;
703 height: auto;
704 }
705
706 .thread-head,
707 .composer {
708 padding-left: 16px;
709 padding-right: 16px;
710 }
711
712 .messages {
713 padding: 16px 16px 24px;
714 }
715
716 .readout,
717 .terminal-time {
718 display: none;
719 }
720
721 .terminal-row {
722 grid-template-columns: max-content minmax(0, 1fr);
723 }
724
725 .composer {
726 grid-template-columns: 1fr;
727 }
728}