rickub
Sign in Get started
nandi/oripublic⑂ Fork 0
⑂ 55d4c9e2f7a9027b52846558166f42e50851523a
Branches
main View all branches → View all tags →
Commits
⬇ Clone ▾
git clone https://git.rickub.com/nandi/ori.git
git clone ssh://git@rickub.com/nandi/ori.git

Host key fingerprint (ed25519): SHA256:iycHnxEyq0Q7uyVpB7JlznP0G7JrTPXLYRcAU5CSLhc — verify it before your first connect.

forked from bots-garden/ori

app.css · 1027 lines · 16.1 KBCSS Blame HistoryRaw
✨ Introduce new feature(s): ACP web client — Go backend (agent, bridge, httpserver, mockagent) + React SPA (Zed-like agent panel), tests, quality gate PASS 2434cc7 k33g yesterday1/* Ori — agent panel styling, in the spirit of Zed's agent panel:
2 a quiet column of conversation, tool activity and a composer pinned at
✨ Workspace panel, selectors, previews, desktop app, sandbox template, resizable file tree, light/dark theme 76d62ac k33g yesterday3 the bottom. Light is the default palette; the dark one applies when the
4 theme store stamps data-theme="dark" on <html> (see ui/src/theme.ts). */
✨ Introduce new feature(s): ACP web client — Go backend (agent, bridge, httpserver, mockagent) + React SPA (Zed-like agent panel), tests, quality gate PASS 2434cc7 k33g yesterday5
6:root {
✨ Workspace panel, selectors, previews, desktop app, sandbox template, resizable file tree, light/dark theme 76d62ac k33g yesterday7 color-scheme: light;
✨ Introduce new feature(s): ACP web client — Go backend (agent, bridge, httpserver, mockagent) + React SPA (Zed-like agent panel), tests, quality gate PASS 2434cc7 k33g yesterday8 font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
9
10 --bg: #fafafa;
11 --panel: #ffffff;
12 --text: #1c1c1c;
13 --muted: #6b6b6b;
14 --border: #e2e2e2;
15 --accent: #3b82f6;
16 --user-bubble: #e8f0fe;
17 --error: #b91c1c;
18 --error-bg: #fee2e2;
19 --code-bg: #f2f2f2;
20}
21
✨ Workspace panel, selectors, previews, desktop app, sandbox template, resizable file tree, light/dark theme 76d62ac k33g yesterday22:root[data-theme="dark"] {
23 color-scheme: dark;
24 --bg: #1e2025;
25 --panel: #26282e;
26 --text: #e6e6e6;
27 --muted: #9a9a9a;
28 --border: #3a3d45;
29 --accent: #60a5fa;
30 --user-bubble: #2f3a4f;
31 --error: #fca5a5;
32 --error-bg: #3f2222;
33 --code-bg: #1a1c20;
✨ Introduce new feature(s): ACP web client — Go backend (agent, bridge, httpserver, mockagent) + React SPA (Zed-like agent panel), tests, quality gate PASS 2434cc7 k33g yesterday34}
35
36body {
37 margin: 0;
38 background: var(--bg);
39 color: var(--text);
40}
41
42.app {
43 display: flex;
44 flex-direction: column;
45 height: 100vh;
✨ Workspace panel, selectors, previews, desktop app, sandbox template, resizable file tree, light/dark theme 76d62ac k33g yesterday46}
47
48.app-body {
49 flex: 1;
50 display: flex;
51 min-height: 0;
52 justify-content: center;
53}
54
55.chat-column {
56 display: flex;
57 flex-direction: column;
58 flex: 1;
✨ Introduce new feature(s): ACP web client — Go backend (agent, bridge, httpserver, mockagent) + React SPA (Zed-like agent panel), tests, quality gate PASS 2434cc7 k33g yesterday59 max-width: 52rem;
✨ Workspace panel, selectors, previews, desktop app, sandbox template, resizable file tree, light/dark theme 76d62ac k33g yesterday60 min-width: 0;
61}
62
63.app-body.with-workspace .chat-column {
64 max-width: none;
65 flex: 0 0 42%;
66 border-right: 1px solid var(--border);
✨ Introduce new feature(s): ACP web client — Go backend (agent, bridge, httpserver, mockagent) + React SPA (Zed-like agent panel), tests, quality gate PASS 2434cc7 k33g yesterday67}
68
69/* ---- header ---- */
70
71.topbar {
72 display: flex;
73 align-items: baseline;
74 gap: 0.75rem;
75 padding: 0.6rem 1rem;
76 border-bottom: 1px solid var(--border);
77}
78
79.topbar-title {
80 font-size: 1.05rem;
81 margin: 0;
82}
83
84.status {
85 font-size: 0.75rem;
86 color: var(--muted);
87}
88
89.status-online::before,
90.status-offline::before,
91.status-connecting::before {
92 content: "●";
93 margin-right: 0.3rem;
94}
95
96.status-online::before {
97 color: #22c55e;
98}
99
100.status-offline::before {
101 color: #ef4444;
102}
103
104.status-connecting::before {
105 color: #eab308;
106}
107
✨ Workspace panel, selectors, previews, desktop app, sandbox template, resizable file tree, light/dark theme 76d62ac k33g yesterday108.topbar-theme,
109.topbar-workspace {
110 border: 1px solid var(--border);
111 border-radius: 6px;
112 background: var(--panel);
113 color: var(--text);
114 font: inherit;
115 font-size: 0.8rem;
116 padding: 0.25rem 0.7rem;
117 cursor: pointer;
118}
119
120.topbar-workspace-active {
121 border-color: var(--accent);
122 color: var(--accent);
123}
124
125.topbar-theme {
126 margin-left: auto;
127 padding: 0.25rem 0.5rem;
128}
129
130/* ---- workspace panel ---- */
131
132.workspace {
133 flex: 1;
134 display: flex;
135 min-width: 0;
136 background: var(--bg);
137}
138
139.workspace-hidden {
140 display: none;
141}
142
143.workspace-pane {
144 height: 100%;
145}
146
147.workspace-pane-hidden {
148 display: none;
149}
150
151/* ---- terminal pane ---- */
152
153/* The terminal keeps a dark background whatever the app theme, like an IDE. */
154.terminal {
155 height: 100%;
156 padding: 0.4rem;
157 background: #1e1e1e;
158}
159
160.terminal .xterm {
161 height: 100%;
162}
163
164.filetree {
165 /* Width driven by the workspace store (see Workspace.tsx); 14rem default. */
166 flex: 0 0 var(--filetree-width, 14rem);
167 overflow-y: auto;
168 padding: 0.5rem;
169 font-size: 0.85rem;
170}
171
172/* ---- resize handle between the file tree and the tabs ---- */
173
174.resize-handle {
175 /* The visible line is the 1px border; the padding widens the grab area. */
176 flex: 0 0 1px;
177 box-sizing: content-box;
178 padding: 0 3px;
179 margin: 0 -3px;
180 background: var(--border);
181 background-clip: content-box;
182 cursor: col-resize;
183 touch-action: none;
184 z-index: 1;
185}
186
187.resize-handle:hover,
188.resize-handle-active {
189 background-color: var(--accent);
190}
191
192.resize-handle:focus-visible {
193 outline: 2px solid var(--accent);
194 outline-offset: -1px;
195}
196
197.filetree-header {
198 display: flex;
199 align-items: center;
200 justify-content: space-between;
201 color: var(--muted);
202 font-size: 0.75rem;
203 text-transform: uppercase;
204 letter-spacing: 0.05em;
205 margin-bottom: 0.4rem;
206}
207
208.filetree-refresh {
209 border: none;
210 background: none;
211 color: var(--muted);
212 cursor: pointer;
213 font-size: 0.9rem;
214}
215
216.filetree-error {
217 color: var(--error);
218 font-size: 0.8rem;
219}
220
221.filetree-loading {
222 color: var(--muted);
223 font-style: italic;
224}
225
226.filetree-list {
227 list-style: none;
228 margin: 0;
229 padding: 0;
230}
231
232.filetree-list-nested {
233 /* VS Code-style indent guide */
234 margin-left: 0.55rem;
235 border-left: 1px solid var(--border);
236}
237
238.filetree-entry {
239 display: flex;
240 align-items: center;
241 gap: 0.3rem;
242 width: 100%;
243 text-align: left;
244 border: none;
245 background: none;
246 color: var(--text);
247 font: inherit;
248 font-size: 0.82rem;
249 padding: 0.14rem 0.3rem;
250 border-radius: 4px;
251 cursor: pointer;
252 white-space: nowrap;
253}
254
255.filetree-entry:hover {
256 background: var(--panel);
257}
258
259.filetree-active {
260 background: var(--user-bubble);
261}
262
263.filetree-chevron {
264 flex: 0 0 0.7rem;
265 color: var(--muted);
266 font-size: 0.8rem;
267 line-height: 1;
268 text-align: center;
269}
270
271.filetree-icon {
272 flex: 0 0 1rem;
273 width: 1rem;
274 height: 1rem;
275}
276
277.filetree-name {
278 overflow: hidden;
279 text-overflow: ellipsis;
280}
281
282.workspace-main {
283 flex: 1;
284 display: flex;
285 flex-direction: column;
286 min-width: 0;
287}
288
289.workspace-tabs {
290 display: flex;
291 gap: 0.25rem;
292 border-bottom: 1px solid var(--border);
293 padding: 0.3rem 0.5rem 0;
294}
295
296.workspace-tab {
297 border: 1px solid transparent;
298 border-bottom: none;
299 border-radius: 6px 6px 0 0;
300 background: none;
301 color: var(--muted);
302 font: inherit;
303 font-size: 0.85rem;
304 padding: 0.3rem 0.9rem;
305 cursor: pointer;
306}
307
308.workspace-tab-active {
309 border-color: var(--border);
310 background: var(--panel);
311 color: var(--text);
312}
313
314.workspace-content {
315 flex: 1;
316 min-height: 0;
317 overflow: auto;
318 position: relative;
319}
320
321.pane-empty {
322 color: var(--muted);
323 font-style: italic;
324 padding: 1rem;
325}
326
327.pane-error {
328 color: var(--error);
329 padding: 1rem;
330}
331
332/* ---- preview pane ---- */
333
334.preview {
335 display: flex;
336 flex-direction: column;
337 height: 100%;
338}
339
340.pane-header {
341 display: flex;
342 align-items: center;
343 gap: 0.6rem;
344 padding: 0.35rem 0.8rem;
345 border-bottom: 1px solid var(--border);
346 font-size: 0.85rem;
347}
348
349.pane-path {
350 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
351 overflow: hidden;
352 text-overflow: ellipsis;
353 white-space: nowrap;
354}
355
356.pane-modes {
357 display: flex;
358 gap: 0.25rem;
359 margin-left: auto;
360}
361
362.pane-mode {
363 border: 1px solid var(--border);
364 border-radius: 6px;
365 background: none;
366 color: var(--muted);
367 font: inherit;
368 font-size: 0.75rem;
369 padding: 0.15rem 0.6rem;
370 cursor: pointer;
371}
372
373.pane-mode-active {
374 background: var(--panel);
375 color: var(--text);
376 border-color: var(--accent);
377}
378
379.pane-action {
380 border: 1px solid var(--border);
381 border-radius: 6px;
382 background: none;
383 color: var(--text);
384 font: inherit;
385 font-size: 0.75rem;
386 padding: 0.15rem 0.6rem;
387 cursor: pointer;
388}
389
390.pane-modes + .pane-action {
391 margin-left: 0;
392}
393
394.pane-header .pane-action:last-child {
395 margin-left: auto;
396}
397
398.pane-modes + .pane-action:last-child {
399 margin-left: 0;
400}
401
402.preview-body {
403 flex: 1;
404 min-height: 0;
405 overflow: auto;
406}
407
408.preview-rendered {
409 padding: 1rem;
410 max-width: 48rem;
411}
412
413/* ---- image preview ---- */
414
415.image-view {
416 margin: 0;
417 padding: 1rem;
418 display: flex;
419 flex-direction: column;
420 gap: 0.5rem;
421 align-items: flex-start;
422}
423
424.image-view-canvas {
425 max-width: 100%;
426 border: 1px solid var(--border);
427 border-radius: 6px;
428 --check: rgba(127, 127, 127, 0.18);
429 background-color: var(--panel);
430 background-image: linear-gradient(45deg, var(--check) 25%, transparent 25%),
431 linear-gradient(-45deg, var(--check) 25%, transparent 25%),
432 linear-gradient(45deg, transparent 75%, var(--check) 75%),
433 linear-gradient(-45deg, transparent 75%, var(--check) 75%);
434 background-size: 16px 16px;
435 background-position: 0 0, 0 8px, 8px -8px, -8px 0;
436}
437
438.image-view-canvas img {
439 display: block;
440 max-width: 100%;
441 height: auto;
442}
443
444.image-view-meta {
445 color: var(--muted);
446 font-size: 0.8rem;
447 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
448}
449
450/* ---- draw.io preview ---- */
451
452.drawio-view {
453 display: flex;
454 flex-direction: column;
455 height: 100%;
456}
457
458.drawio-frame {
459 flex: 1;
460 width: 100%;
461 min-height: 20rem;
462 border: none;
463 background: var(--panel);
464}
465
466.drawio-view-loading .drawio-frame {
467 visibility: hidden;
468 flex: 0;
469 min-height: 0;
470}
471
472.drawio-notice {
473 margin: 1rem;
474 padding: 0.6rem 0.8rem;
475 border: 1px solid var(--border);
476 border-radius: 6px;
477 color: var(--muted);
478 font-size: 0.85rem;
479}
480
481/* ---- editor pane ---- */
482
483.editor {
484 display: flex;
485 flex-direction: column;
486 height: 100%;
487}
488
489.editor-body {
490 flex: 1;
491 min-height: 0;
492}
493
494.pane-saved {
495 color: #22c55e;
496 font-size: 0.75rem;
497}
498
499.pane-error-inline {
500 color: var(--error);
501 font-size: 0.75rem;
502 overflow: hidden;
503 text-overflow: ellipsis;
504 white-space: nowrap;
505}
506
507.editor .pane-action {
508 margin-left: auto;
509}
510
511.editor .pane-saved,
512.editor .pane-error-inline {
513 margin-left: auto;
514}
515
516.editor .pane-saved + .pane-action,
517.editor .pane-error-inline + .pane-action {
518 margin-left: 0.5rem;
519}
520
✨ Introduce new feature(s): ACP web client — Go backend (agent, bridge, httpserver, mockagent) + React SPA (Zed-like agent panel), tests, quality gate PASS 2434cc7 k33g yesterday521/* ---- thread ---- */
522
523.thread {
524 flex: 1;
525 overflow-y: auto;
526 padding: 1rem;
527 display: flex;
528 flex-direction: column;
529 gap: 0.75rem;
530}
531
✨ Workspace panel, selectors, previews, desktop app, sandbox template, resizable file tree, light/dark theme 76d62ac k33g yesterday532.thread-empty {
✨ Introduce new feature(s): ACP web client — Go backend (agent, bridge, httpserver, mockagent) + React SPA (Zed-like agent panel), tests, quality gate PASS 2434cc7 k33g yesterday533 color: var(--muted);
534 font-size: 0.85rem;
535 font-style: italic;
536}
537
✨ Workspace panel, selectors, previews, desktop app, sandbox template, resizable file tree, light/dark theme 76d62ac k33g yesterday538/* ---- working indicator ---- */
539
540.working {
541 display: flex;
542 align-items: center;
543 gap: 0.5rem;
544 color: var(--muted);
545 font-size: 0.85rem;
546 font-style: italic;
547}
548
549.spinner {
550 width: 0.85rem;
551 height: 0.85rem;
552 border: 2px solid var(--border);
553 border-top-color: var(--accent);
554 border-radius: 50%;
555 animation: spinner-turn 0.8s linear infinite;
556}
557
558@keyframes spinner-turn {
559 to {
560 transform: rotate(360deg);
561 }
562}
563
✨ Introduce new feature(s): ACP web client — Go backend (agent, bridge, httpserver, mockagent) + React SPA (Zed-like agent panel), tests, quality gate PASS 2434cc7 k33g yesterday564.message {
565 border-radius: 8px;
566 padding: 0.55rem 0.8rem;
567 line-height: 1.5;
568 overflow-wrap: anywhere;
569}
570
571.message-user {
572 align-self: flex-end;
573 background: var(--user-bubble);
574 white-space: pre-wrap;
575 max-width: 85%;
576}
577
578.message-agent {
579 background: var(--panel);
580 border: 1px solid var(--border);
581}
582
583.message-error {
584 background: var(--error-bg);
585 color: var(--error);
586 font-size: 0.85rem;
587}
588
589/* ---- markdown ---- */
590
591.markdown > :first-child {
592 margin-top: 0;
593}
594
595.markdown > :last-child {
596 margin-bottom: 0;
597}
598
599.markdown pre {
600 background: var(--code-bg);
601 border: 1px solid var(--border);
602 border-radius: 6px;
603 padding: 0.6rem;
604 overflow-x: auto;
605}
606
607.markdown code {
608 background: var(--code-bg);
609 border-radius: 4px;
610 padding: 0.1rem 0.3rem;
611 font-size: 0.85em;
612}
613
614.markdown pre code {
615 background: none;
616 padding: 0;
617}
618
619.markdown table {
620 border-collapse: collapse;
621}
622
623.markdown th,
624.markdown td {
625 border: 1px solid var(--border);
626 padding: 0.3rem 0.6rem;
627}
628
629/* ---- thoughts ---- */
630
631.thought {
632 border: 1px dashed var(--border);
633 border-radius: 8px;
634 padding: 0.35rem 0.8rem;
635 color: var(--muted);
636 font-size: 0.9rem;
637}
638
639.thought-summary {
640 cursor: pointer;
641 user-select: none;
642}
643
✨ Workspace panel, selectors, previews, desktop app, sandbox template, resizable file tree, light/dark theme 76d62ac k33g yesterday644.thought-live .thought-summary {
645 cursor: default;
646 margin: 0;
647}
648
✨ Introduce new feature(s): ACP web client — Go backend (agent, bridge, httpserver, mockagent) + React SPA (Zed-like agent panel), tests, quality gate PASS 2434cc7 k33g yesterday649.thought-body {
650 padding-top: 0.4rem;
651}
652
653/* ---- tool calls ---- */
654
655.tool {
656 border: 1px solid var(--border);
657 border-left: 3px solid var(--muted);
658 border-radius: 8px;
659 padding: 0.35rem 0.8rem;
660 background: var(--panel);
661 font-size: 0.9rem;
662}
663
664.tool-in_progress {
665 border-left-color: var(--accent);
666}
667
668.tool-completed {
669 border-left-color: #22c55e;
670}
671
672.tool-failed {
673 border-left-color: #ef4444;
674}
675
676.tool-summary {
677 display: flex;
678 align-items: center;
679 gap: 0.5rem;
680 cursor: pointer;
681 user-select: none;
682}
683
684.tool-title {
685 flex: 1;
686 overflow: hidden;
687 text-overflow: ellipsis;
688 white-space: nowrap;
689}
690
691.tool-status {
692 font-size: 0.72rem;
693 color: var(--muted);
694 border: 1px solid var(--border);
695 border-radius: 999px;
696 padding: 0.05rem 0.5rem;
697}
698
699.tool-status-failed {
700 color: var(--error);
701}
702
703.tool-body {
704 padding: 0.4rem 0 0.2rem;
705}
706
707.tool-locations {
708 margin: 0 0 0.4rem;
709 padding-left: 1.1rem;
710 color: var(--muted);
711}
712
713.tool-diff {
714 background: var(--code-bg);
715 border: 1px solid var(--border);
716 border-radius: 6px;
717 padding: 0.5rem;
718 overflow-x: auto;
719}
720
721.tool-diff-path {
722 display: block;
723 margin-bottom: 0.3rem;
724 color: var(--muted);
725}
726
727.tool-diff pre {
728 margin: 0;
729 font-size: 0.8rem;
730}
731
732.tool-diff-old {
733 color: #dc2626;
734}
735
736.tool-diff-new {
737 color: #16a34a;
738}
739
740.tool-terminal {
741 color: var(--muted);
742 font-style: italic;
743}
744
✨ Workspace panel, selectors, previews, desktop app, sandbox template, resizable file tree, light/dark theme 76d62ac k33g yesterday745.inline-code {
746 background: var(--code-bg);
747 border: 1px solid var(--border);
748 border-radius: 4px;
749 padding: 0 0.3rem;
750 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono",
751 monospace;
752 font-size: 0.85em;
753}
754
755.tool-output {
756 background: var(--code-bg);
757 border: 1px solid var(--border);
758 border-radius: 6px;
759 padding: 0.5rem;
760 overflow-x: auto;
761 margin: 0.3rem 0;
762 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono",
763 monospace;
764 font-size: 0.8rem;
765 line-height: 1.4;
766}
767
✨ Introduce new feature(s): ACP web client — Go backend (agent, bridge, httpserver, mockagent) + React SPA (Zed-like agent panel), tests, quality gate PASS 2434cc7 k33g yesterday768/* ---- plan ---- */
769
770.plan {
771 margin: 0 1rem;
772 border: 1px solid var(--border);
773 border-radius: 8px;
774 padding: 0.4rem 0.8rem;
775 background: var(--panel);
776 font-size: 0.85rem;
777}
778
779.plan-summary {
780 cursor: pointer;
781 user-select: none;
782 color: var(--muted);
783}
784
785.plan-entries {
786 list-style: none;
787 margin: 0.4rem 0 0.2rem;
788 padding: 0;
789}
790
791.plan-entry {
792 padding: 0.1rem 0;
793}
794
795.plan-entry-completed {
796 color: var(--muted);
797 text-decoration: line-through;
798}
799
800.plan-entry-in_progress {
801 color: var(--accent);
802}
803
804/* ---- permissions ---- */
805
806.permission {
807 margin: 0.5rem 1rem 0;
808 border: 1px solid var(--accent);
809 border-radius: 8px;
810 padding: 0.6rem 0.8rem;
811 background: var(--panel);
812}
813
814.permission-title {
815 margin: 0 0 0.5rem;
816 font-size: 0.9rem;
817}
818
819.permission-options {
820 display: flex;
821 gap: 0.5rem;
822 flex-wrap: wrap;
823}
824
825.permission-option {
826 border: 1px solid var(--border);
827 border-radius: 6px;
828 padding: 0.35rem 0.8rem;
829 font: inherit;
830 font-size: 0.85rem;
831 cursor: pointer;
832 background: var(--panel);
833 color: var(--text);
834}
835
836.permission-allow_once,
837.permission-allow_always {
838 background: var(--accent);
839 border-color: var(--accent);
840 color: #ffffff;
841}
842
843.permission-reject_once,
844.permission-reject_always {
845 border-color: #dc2626;
846 color: #dc2626;
847}
848
849/* ---- composer ---- */
850
851.composer {
852 display: flex;
853 gap: 0.5rem;
854 padding: 0.75rem 1rem 1rem;
855 border-top: 1px solid var(--border);
856}
857
✨ Workspace panel, selectors, previews, desktop app, sandbox template, resizable file tree, light/dark theme 76d62ac k33g yesterday858.composer-field {
859 flex: 1;
860 position: relative;
861 display: flex;
862}
863
✨ Introduce new feature(s): ACP web client — Go backend (agent, bridge, httpserver, mockagent) + React SPA (Zed-like agent panel), tests, quality gate PASS 2434cc7 k33g yesterday864.composer-input {
865 flex: 1;
866 resize: none;
867 background: var(--panel);
868 color: var(--text);
869 border: 1px solid var(--border);
870 border-radius: 8px;
871 padding: 0.55rem 0.7rem;
872 font: inherit;
873}
874
875.composer-input:focus {
876 outline: 2px solid var(--accent);
877 outline-offset: -1px;
878}
879
880.composer-send,
881.composer-stop {
882 align-self: flex-end;
883 border: none;
884 border-radius: 8px;
885 padding: 0.55rem 1rem;
886 font: inherit;
887 cursor: pointer;
888 color: #ffffff;
889}
890
891.composer-send {
892 background: var(--accent);
893}
894
895.composer-send:disabled {
896 opacity: 0.5;
897 cursor: default;
898}
899
900.composer-stop {
901 background: #dc2626;
902}
✨ Workspace panel, selectors, previews, desktop app, sandbox template, resizable file tree, light/dark theme 76d62ac k33g yesterday903
904/* ---- completion popup (@ files, / skills) ---- */
905
906.completion {
907 position: absolute;
908 left: 0;
909 right: 0;
910 bottom: calc(100% + 0.35rem);
911 max-height: 16rem;
912 overflow-y: auto;
913 margin: 0;
914 padding: 0.25rem;
915 list-style: none;
916 background: var(--panel);
917 border: 1px solid var(--border);
918 border-radius: 8px;
919 box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
920 font-size: 0.85rem;
921 z-index: 5;
922}
923
924.completion-item {
925 display: flex;
926 align-items: baseline;
927 gap: 0.5rem;
928 padding: 0.35rem 0.6rem;
929 border-radius: 6px;
930 cursor: pointer;
931}
932
933.completion-item-active {
934 background: var(--user-bubble);
935}
936
937.completion-label {
938 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
939 white-space: nowrap;
940}
941
942.completion-description {
943 flex: 1;
944 min-width: 0;
945 color: var(--muted);
946 overflow: hidden;
947 text-overflow: ellipsis;
948 white-space: nowrap;
949}
950
951.completion-source {
952 margin-left: auto;
953 font-size: 0.7rem;
954 text-transform: uppercase;
955 letter-spacing: 0.04em;
956 color: var(--muted);
957 border: 1px solid var(--border);
958 border-radius: 999px;
959 padding: 0 0.45rem;
960}
961
962.completion-source-skill {
963 color: var(--accent);
964 border-color: var(--accent);
965}
Add copy-paste functionality for code blocks and completion widgets 7895c1d k33g 22h ago966
967/* ---- copy button ---- */
968
969.copy-btn {
970 display: inline-flex;
971 align-items: center;
972 justify-content: center;
973 padding: 0.35rem;
974 background: var(--panel);
975 border: 1px solid var(--border);
976 border-radius: 4px;
977 color: var(--muted);
978 cursor: pointer;
979 transition: all 0.15s ease;
980 font-size: 0;
981}
982
983.copy-btn:hover {
984 background: var(--bg);
985 color: var(--text);
986 border-color: var(--accent);
987}
988
989.copy-btn:active {
990 transform: scale(0.95);
991}
992
993.copy-btn-copied {
994 color: #22c55e;
995 border-color: #22c55e;
996}
997
998.copy-btn svg {
999 display: block;
1000}
1001
1002/* Copy button positioning in various contexts */
1003
1004.code-block-wrapper {
1005 position: relative;
1006}
1007
1008.code-block-wrapper .copy-btn {
1009 position: absolute;
1010 top: 0.5rem;
1011 right: 0.5rem;
1012 z-index: 1;
1013}
1014
1015.thought-summary .copy-btn {
1016 float: right;
1017 margin-left: 0.5rem;
1018}
1019
1020.tool-summary .copy-btn {
1021 margin-left: auto;
1022}
1023
1024.message-agent .copy-btn {
1025 float: right;
1026 margin: 0 0 0.5rem 0.5rem;
1027}