my harness for niri
1:root {
2 color-scheme: dark;
3 font-family: "JetBrains Mono", "Iosevka", "SFMono-Regular", ui-monospace, monospace;
4 background: #151412;
5 color: #efeee8;
6}
7
8* {
9 box-sizing: border-box;
10}
11
12body {
13 margin: 0;
14 min-height: 100vh;
15 background:
16 linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0) 220px),
17 #151412;
18}
19
20button,
21input {
22 font: inherit;
23}
24
25button {
26 cursor: pointer;
27}
28
29.shell {
30 min-height: 100vh;
31}
32
33.top-nav {
34 position: sticky;
35 top: 0;
36 z-index: 5;
37 height: 44px;
38 display: flex;
39 align-items: center;
40 gap: 0.35rem;
41 padding: 0 1rem;
42 border-bottom: 1px solid #34302a;
43 background: rgba(21, 20, 18, 0.92);
44 backdrop-filter: blur(12px);
45}
46
47.top-nav button {
48 min-width: 5.5rem;
49 height: 30px;
50 border: 1px solid transparent;
51 border-radius: 6px;
52 background: transparent;
53 color: #aaa39a;
54}
55
56.top-nav button:hover,
57.top-nav button.is-active {
58 border-color: #645d50;
59 background: #24211d;
60 color: #f5f1e8;
61}
62
63.app {
64 max-width: 920px;
65 margin: 0 auto;
66 min-height: calc(100vh - 44px);
67 padding: 1.25rem;
68 display: grid;
69 grid-template-rows: auto 1fr auto;
70 gap: 1rem;
71}
72
73.header h1,
74.metrics-header h1 {
75 margin: 0;
76 font-size: 1.1rem;
77 letter-spacing: 0;
78}
79
80.status,
81.metrics-header p,
82.panel-head p,
83.detail-pane p {
84 margin: 0.25rem 0 0;
85 color: #aaa39a;
86}
87
88.toggles {
89 margin-top: 0.75rem;
90 display: flex;
91 gap: 0.75rem;
92 flex-wrap: wrap;
93 align-items: center;
94 color: #aaa39a;
95 font-size: 0.88rem;
96}
97
98.toggles button,
99.composer button,
100.metrics-search button {
101 border-radius: 6px;
102 border: 1px solid #484237;
103 background: #25211c;
104 color: #efeee8;
105 padding: 0.38rem 0.65rem;
106}
107
108.toggles button:hover,
109.composer button:hover,
110.metrics-search button:hover {
111 border-color: #8d7b55;
112}
113
114.feed,
115.metric-panel,
116.detail-pane,
117.bucket-rail {
118 border: 1px solid #34302a;
119 border-radius: 8px;
120 background: #1c1a17;
121}
122
123.feed {
124 padding: 0.9rem;
125 overflow: auto;
126}
127
128.entry {
129 padding: 0.7rem;
130 border-radius: 7px;
131 margin-bottom: 0.7rem;
132 border: 1px solid transparent;
133}
134
135.entry strong {
136 display: block;
137 margin-bottom: 0.35rem;
138}
139
140.entry pre,
141.detail-pane pre {
142 margin: 0;
143 white-space: pre-wrap;
144 word-break: break-word;
145 font: inherit;
146}
147
148.entry-header {
149 display: flex;
150 justify-content: space-between;
151 align-items: center;
152 gap: 0.6rem;
153 margin-bottom: 0.4rem;
154}
155
156.entry-header button {
157 border-radius: 6px;
158 border: 1px solid #6b5a2d;
159 background: #2c2619;
160 color: #f0d98d;
161 padding: 0.25rem 0.5rem;
162}
163
164.markdown {
165 line-height: 1.45;
166}
167
168.markdown > :first-child {
169 margin-top: 0;
170}
171
172.markdown > :last-child {
173 margin-bottom: 0;
174}
175
176.markdown p,
177.markdown ul,
178.markdown ol,
179.markdown blockquote {
180 margin: 0.45rem 0;
181}
182
183.markdown a {
184 color: #7fc6a4;
185}
186
187.markdown :not(pre) > code {
188 background: #24211d;
189 border: 1px solid #3a342c;
190 border-radius: 5px;
191 padding: 0.1rem 0.3rem;
192}
193
194.markdown pre {
195 padding: 0.65rem;
196 border-radius: 7px;
197 border: 1px solid #34302a;
198 background: #12110f;
199 overflow: auto;
200}
201
202.entry-user {
203 background: #1c2925;
204 border-color: #2c5146;
205}
206
207.entry-incoming {
208 background: #202722;
209 border-color: #3b5947;
210}
211
212.entry-niri {
213 background: #241f28;
214 border-color: #514761;
215}
216
217.entry-tool {
218 background: #272313;
219 border-color: #5c501f;
220}
221
222.entry-thinking,
223.entry-info {
224 background: #20201e;
225 border-color: #383833;
226 color: #c6c0b6;
227}
228
229.entry-error,
230.metrics-error,
231.detail-error {
232 background: #331d1c;
233 border-color: #73332f;
234 color: #ffd8d2;
235}
236
237.composer {
238 display: grid;
239 grid-template-columns: 1fr auto;
240 gap: 0.6rem;
241}
242
243.composer input,
244.metrics-search input {
245 border-radius: 6px;
246 border: 1px solid #484237;
247 background: #201d19;
248 color: inherit;
249 padding: 0.65rem 0.8rem;
250}
251
252.composer button {
253 background: #314c3f;
254 border-color: #507966;
255}
256
257.composer button:disabled {
258 opacity: 0.62;
259 cursor: default;
260}
261
262.markdown pre code.hljs {
263 background: transparent;
264 padding: 0;
265}
266
267.metrics-app {
268 width: min(1680px, 100%);
269 margin: 0 auto;
270 min-height: calc(100vh - 44px);
271 padding: 1rem;
272}
273
274.metrics-header {
275 display: grid;
276 grid-template-columns: minmax(0, 1fr) auto auto;
277 align-items: end;
278 gap: 1rem;
279 padding: 0.75rem 0 1rem;
280}
281
282.metrics-search {
283 display: grid;
284 grid-template-columns: minmax(16rem, 24rem) auto auto auto;
285 gap: 0.5rem;
286}
287
288.live-controls {
289 display: flex;
290 align-items: center;
291 justify-content: flex-end;
292 gap: 0.6rem;
293 min-height: 2.35rem;
294 color: #aaa39a;
295}
296
297.live-controls button {
298 min-width: 4.8rem;
299 border: 1px solid #484237;
300 border-radius: 999px;
301 background: #25211c;
302 color: #efeee8;
303 padding: 0.34rem 0.65rem;
304}
305
306.live-controls button.is-live {
307 border-color: #5da37e;
308 background: #1d3028;
309 color: #b9f0d3;
310}
311
312.live-controls span {
313 white-space: nowrap;
314 font-size: 0.82rem;
315}
316
317.metrics-loading,
318.metrics-error {
319 border: 1px solid #34302a;
320 border-radius: 8px;
321 padding: 0.75rem;
322}
323
324.metrics-grid {
325 display: grid;
326 grid-template-columns: minmax(0, 1fr) minmax(380px, 0.42fr);
327 gap: 1rem;
328 align-items: start;
329}
330
331.metrics-main,
332.metrics-side {
333 display: grid;
334 gap: 1rem;
335 min-width: 0;
336}
337
338.metric-panel,
339.detail-pane,
340.bucket-rail {
341 min-width: 0;
342 overflow: hidden;
343}
344
345.panel-head {
346 min-height: 66px;
347 display: flex;
348 justify-content: space-between;
349 gap: 1rem;
350 align-items: center;
351 padding: 0.85rem 0.9rem;
352 border-bottom: 1px solid #34302a;
353}
354
355.panel-head h2,
356.detail-pane h2,
357.bucket-rail h3,
358.detail-section h3 {
359 margin: 0;
360 font-size: 0.92rem;
361 letter-spacing: 0;
362}
363
364.token-readout {
365 text-align: right;
366}
367
368.token-readout span,
369.token-ledger span {
370 display: block;
371 font-size: 1.35rem;
372 color: #f2e1a3;
373}
374
375.token-readout small,
376.token-ledger small,
377.memory-row small,
378.memory-hit span {
379 color: #aaa39a;
380}
381
382.token-strip {
383 height: 190px;
384 display: flex;
385 align-items: end;
386 gap: 2px;
387 padding: 1rem 0.9rem 0.7rem;
388 border-bottom: 1px solid #34302a;
389}
390
391.token-bar {
392 flex: 1 1 4px;
393 min-width: 3px;
394 max-width: 18px;
395 display: flex;
396 flex-direction: column-reverse;
397 padding: 0;
398 border: 0;
399 border-radius: 3px 3px 0 0;
400 background: #353028;
401 overflow: hidden;
402}
403
404.token-bar:hover {
405 outline: 1px solid #f2e1a3;
406}
407
408.token-bar-prompt {
409 display: block;
410 background: #5da37e;
411}
412
413.token-bar-completion {
414 display: block;
415 background: #c7a84d;
416}
417
418.token-ledger {
419 display: grid;
420 grid-template-columns: repeat(3, 1fr);
421 gap: 1px;
422 background: #34302a;
423}
424
425.token-ledger div {
426 padding: 0.75rem 0.9rem;
427 background: #1c1a17;
428}
429
430.latest-prompt {
431 padding: 0.75rem 0.9rem;
432 border-top: 1px solid #34302a;
433}
434
435.latest-prompt small {
436 color: #aaa39a;
437 font-size: 0.76rem;
438 text-transform: uppercase;
439}
440
441.latest-prompt p {
442 margin: 0.35rem 0 0;
443 color: #d8d3ca;
444 white-space: nowrap;
445 overflow: hidden;
446 text-overflow: ellipsis;
447}
448
449.switch-row {
450 display: flex;
451 align-items: center;
452 gap: 0.45rem;
453 color: #c6c0b6;
454 white-space: nowrap;
455}
456
457.memory-table {
458 max-height: 560px;
459 overflow: auto;
460}
461
462.memory-row {
463 width: 100%;
464 display: grid;
465 grid-template-columns: 5.5rem 5rem minmax(0, 1fr) minmax(0, 1fr);
466 gap: 0.75rem;
467 align-items: start;
468 padding: 0.6rem 0.9rem;
469 border: 0;
470 border-bottom: 1px solid #2d2924;
471 background: transparent;
472 color: inherit;
473 text-align: left;
474}
475
476.memory-row:not(.memory-row-head):hover,
477.memory-row.is-selected {
478 background: #24211d;
479}
480
481.memory-row-head {
482 position: sticky;
483 top: 0;
484 z-index: 1;
485 color: #aaa39a;
486 background: #1c1a17;
487 font-size: 0.78rem;
488 text-transform: uppercase;
489}
490
491.memory-row span {
492 min-width: 0;
493 overflow: hidden;
494 text-overflow: ellipsis;
495}
496
497.memory-row span:nth-child(3),
498.memory-row span:nth-child(4) {
499 white-space: nowrap;
500}
501
502.memory-row span:nth-child(2) {
503 color: #7fc6a4;
504}
505
506.memory-row.issue-loose span:nth-child(2) {
507 color: #f2c66d;
508}
509
510.memory-row.issue-missing span:nth-child(2) {
511 color: #ff9f91;
512}
513
514.memory-row small {
515 display: block;
516 margin-top: 0.15rem;
517}
518
519.detail-pane {
520 max-height: 680px;
521 overflow: auto;
522 padding: 0.9rem;
523}
524
525.detail-meta {
526 display: grid;
527 grid-template-columns: 1fr 1fr;
528 gap: 1px;
529 margin: 0.8rem 0;
530 background: #34302a;
531}
532
533.detail-meta div {
534 padding: 0.6rem;
535 background: #1c1a17;
536}
537
538.detail-meta dt {
539 color: #aaa39a;
540 font-size: 0.76rem;
541 text-transform: uppercase;
542}
543
544.detail-meta dd {
545 margin: 0.15rem 0 0;
546}
547
548.detail-section {
549 padding-top: 0.9rem;
550 margin-top: 0.9rem;
551 border-top: 1px solid #34302a;
552}
553
554.memory-hit {
555 padding: 0.65rem 0;
556 border-bottom: 1px solid #2d2924;
557}
558
559.memory-hit strong {
560 display: block;
561 margin-bottom: 0.15rem;
562}
563
564.memory-hit p {
565 margin: 0.4rem 0 0;
566 color: #d8d3ca;
567 line-height: 1.45;
568}
569
570.empty-note {
571 margin: 0.45rem 0 0;
572 color: #aaa39a;
573}
574
575.tool-trace-list {
576 display: grid;
577 gap: 0.45rem;
578 margin-top: 0.55rem;
579}
580
581.tool-panel-body {
582 max-height: 430px;
583 overflow: auto;
584 padding: 0.75rem 0.9rem;
585}
586
587.tool-panel .tool-trace-list {
588 margin-top: 0;
589}
590
591.tool-trace {
592 border: 1px solid #34302a;
593 border-radius: 7px;
594 background: #171512;
595 overflow: hidden;
596}
597
598.tool-trace summary {
599 display: flex;
600 justify-content: space-between;
601 align-items: center;
602 gap: 0.75rem;
603 padding: 0.55rem 0.65rem;
604 cursor: pointer;
605}
606
607.tool-trace summary span,
608.tool-trace summary small {
609 min-width: 0;
610 overflow: hidden;
611 text-overflow: ellipsis;
612 white-space: nowrap;
613}
614
615.tool-trace summary small {
616 color: #aaa39a;
617}
618
619.tool-args {
620 margin: 0;
621 padding: 0.6rem 0.65rem;
622 border-top: 1px solid #2d2924;
623 color: #d9cfb7;
624 background: #201d19;
625 white-space: pre-wrap;
626 word-break: break-word;
627}
628
629.tool-result {
630 border-top: 1px solid #2d2924;
631 padding: 0.65rem;
632}
633
634.bucket-rail {
635 padding: 0.75rem 0.9rem;
636}
637
638.bucket-rail > section + section {
639 margin-top: 0.9rem;
640 padding-top: 0.9rem;
641 border-top: 1px solid #34302a;
642}
643
644.bucket-rail header {
645 display: flex;
646 justify-content: space-between;
647 align-items: center;
648 gap: 1rem;
649 margin-bottom: 0.45rem;
650}
651
652.bucket-rail header span {
653 color: #aaa39a;
654}
655
656.bucket-list {
657 display: grid;
658 gap: 0.25rem;
659}
660
661.bucket-list button {
662 display: grid;
663 grid-template-columns: 4.5rem minmax(0, 1fr);
664 gap: 0.55rem;
665 align-items: start;
666 border: 0;
667 border-radius: 5px;
668 background: transparent;
669 color: inherit;
670 padding: 0.35rem 0.25rem;
671 text-align: left;
672}
673
674.bucket-list button:hover {
675 background: #24211d;
676}
677
678.bucket-list span {
679 color: #aaa39a;
680}
681
682.bucket-list strong {
683 min-width: 0;
684 overflow: hidden;
685 text-overflow: ellipsis;
686 white-space: nowrap;
687 font-weight: 500;
688}
689
690@media (max-width: 1120px) {
691 .metrics-grid {
692 grid-template-columns: 1fr;
693 }
694
695 .metrics-side {
696 grid-template-columns: 1fr;
697 }
698}
699
700@media (max-width: 760px) {
701 .metrics-app,
702 .app {
703 padding: 0.75rem;
704 }
705
706 .metrics-header {
707 grid-template-columns: 1fr;
708 }
709
710 .metrics-search {
711 grid-template-columns: 1fr;
712 }
713
714 .memory-row {
715 grid-template-columns: 4.5rem 4rem minmax(0, 1fr);
716 }
717
718 .memory-row span:nth-child(4) {
719 display: none;
720 }
721
722 .composer {
723 grid-template-columns: 1fr;
724 }
725}