@poncho-ai/cli 0.38.0 → 0.39.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -306,7 +306,7 @@ export const WEB_UI_STYLES = `
306
306
  .conversation-list {
307
307
  flex: 1;
308
308
  overflow-y: auto;
309
- margin-top: 12px;
309
+ margin-top: 8px;
310
310
  display: flex;
311
311
  flex-direction: column;
312
312
  gap: 2px;
@@ -436,6 +436,379 @@ export const WEB_UI_STYLES = `
436
436
  user-select: none;
437
437
  }
438
438
  .cron-view-more:hover { color: var(--fg-3); }
439
+ .sidebar-segmented {
440
+ display: inline-flex;
441
+ align-self: stretch;
442
+ margin: 12px 6px 0;
443
+ padding: 3px;
444
+ background: var(--surface-3);
445
+ border-radius: 999px;
446
+ gap: 2px;
447
+ }
448
+ .seg-btn {
449
+ flex: 1;
450
+ background: transparent;
451
+ border: 0;
452
+ color: var(--fg-5);
453
+ font-size: 12px;
454
+ font-weight: 500;
455
+ padding: 5px 10px;
456
+ border-radius: 999px;
457
+ cursor: pointer;
458
+ transition: background 0.15s, color 0.15s, box-shadow 0.15s;
459
+ }
460
+ .seg-btn:hover:not(.active) { color: var(--fg-2); }
461
+ .seg-btn.active {
462
+ background: #fff;
463
+ color: #000;
464
+ }
465
+ .file-explorer {
466
+ flex: 1;
467
+ overflow-y: auto;
468
+ margin-top: 8px;
469
+ display: flex;
470
+ flex-direction: column;
471
+ gap: 1px;
472
+ }
473
+ .file-children {
474
+ border-radius: 6px;
475
+ transition: background 0.1s, box-shadow 0.1s;
476
+ }
477
+ .file-children.drop-target {
478
+ background: var(--surface-3);
479
+ box-shadow: inset 0 0 0 1px var(--border-drag);
480
+ }
481
+ .file-row {
482
+ display: flex;
483
+ align-items: center;
484
+ height: 28px;
485
+ padding: 0 8px;
486
+ border-radius: 8px;
487
+ cursor: pointer;
488
+ font-size: 13px;
489
+ color: var(--fg-6);
490
+ user-select: none;
491
+ position: relative;
492
+ transition: color 0.15s, background 0.15s;
493
+ }
494
+ .file-row:hover { color: var(--fg-3); }
495
+ .file-row.active { color: var(--fg); }
496
+ .file-row.is-dir.drop-target { background: var(--surface-4); box-shadow: inset 0 0 0 1px var(--border-drag); }
497
+ .file-row .file-caret {
498
+ display: grid;
499
+ place-items: center;
500
+ width: 14px;
501
+ height: 14px;
502
+ flex-shrink: 0;
503
+ transition: transform 0.15s;
504
+ color: var(--fg-7);
505
+ }
506
+ .file-row .file-caret.open { transform: rotate(90deg); }
507
+ .file-row .file-caret.empty { visibility: hidden; }
508
+ .file-row .file-icon {
509
+ display: inline-flex;
510
+ width: 16px;
511
+ margin-right: 6px;
512
+ flex-shrink: 0;
513
+ color: var(--fg-7);
514
+ }
515
+ .file-row .file-name {
516
+ flex: 1;
517
+ min-width: 0;
518
+ overflow: hidden;
519
+ text-overflow: ellipsis;
520
+ white-space: nowrap;
521
+ }
522
+ .file-row.is-dir .file-name { color: var(--fg-3); }
523
+ .file-row-actions {
524
+ position: absolute;
525
+ right: 0;
526
+ top: 0;
527
+ bottom: 0;
528
+ display: flex;
529
+ align-items: center;
530
+ opacity: 0;
531
+ background: var(--bg);
532
+ border-radius: 0 4px 4px 0;
533
+ transition: opacity 0.15s;
534
+ }
535
+ .file-row:hover .file-row-actions,
536
+ .file-row-actions.confirming { opacity: 1; }
537
+ .file-row-actions::before {
538
+ content: "";
539
+ position: absolute;
540
+ right: 100%;
541
+ top: 0;
542
+ bottom: 0;
543
+ width: 24px;
544
+ background: linear-gradient(to right, transparent, var(--bg));
545
+ pointer-events: none;
546
+ }
547
+ .file-row-action {
548
+ background: transparent;
549
+ border: 0;
550
+ color: var(--fg-7);
551
+ padding: 0 8px;
552
+ cursor: pointer;
553
+ display: grid;
554
+ place-items: center;
555
+ text-decoration: none;
556
+ height: 100%;
557
+ transition: color 0.15s;
558
+ }
559
+ .file-row-action:hover { color: var(--fg-2); }
560
+ .file-row-action svg { width: 14px; height: 14px; }
561
+ .file-row .file-delete.confirming {
562
+ width: auto;
563
+ padding: 0 8px;
564
+ font-size: 11px;
565
+ color: var(--error);
566
+ }
567
+ .file-row .file-delete.confirming:hover { color: var(--error-alt); }
568
+ .file-explorer-empty,
569
+ .file-explorer-error {
570
+ padding: 12px 10px;
571
+ font-size: 12px;
572
+ color: var(--fg-7);
573
+ line-height: 1.5;
574
+ }
575
+ .file-explorer-error { color: var(--error-soft); }
576
+ .file-explorer-error button {
577
+ background: transparent;
578
+ border: 1px solid var(--border-3);
579
+ color: var(--fg-3);
580
+ border-radius: 6px;
581
+ font-size: 12px;
582
+ padding: 4px 10px;
583
+ cursor: pointer;
584
+ margin-top: 6px;
585
+ }
586
+ .file-upload-row {
587
+ display: flex;
588
+ align-items: center;
589
+ gap: 6px;
590
+ padding: 4px 10px;
591
+ font-size: 12px;
592
+ color: var(--fg-7);
593
+ }
594
+ .file-upload-spinner {
595
+ width: 12px;
596
+ height: 12px;
597
+ border-radius: 50%;
598
+ border: 1.5px solid var(--fg-7);
599
+ border-top-color: transparent;
600
+ animation: file-spin 0.8s linear infinite;
601
+ flex-shrink: 0;
602
+ }
603
+ @keyframes file-spin { to { transform: rotate(360deg); } }
604
+ .file-explorer-footer {
605
+ display: flex;
606
+ align-items: center;
607
+ gap: 8px;
608
+ padding: 8px 10px;
609
+ font-size: 11px;
610
+ color: var(--fg-7);
611
+ border-top: 1px solid var(--border-1);
612
+ margin-top: 8px;
613
+ }
614
+ .file-explorer-usage {
615
+ flex: 1;
616
+ min-width: 0;
617
+ display: flex;
618
+ flex-direction: column;
619
+ gap: 2px;
620
+ line-height: 1.3;
621
+ }
622
+ .file-explorer-usage span {
623
+ overflow: hidden;
624
+ text-overflow: ellipsis;
625
+ white-space: nowrap;
626
+ }
627
+ .file-explorer-upload {
628
+ display: inline-flex;
629
+ align-items: center;
630
+ gap: 6px;
631
+ background: transparent;
632
+ border: 1px solid var(--border-3);
633
+ color: var(--fg-3);
634
+ font-size: 12px;
635
+ border-radius: 999px;
636
+ padding: 4px 12px;
637
+ cursor: pointer;
638
+ transition: background 0.15s, color 0.15s, border-color 0.15s;
639
+ }
640
+ .file-explorer-upload:hover { color: var(--fg); border-color: var(--border-5); background: var(--surface-3); }
641
+ .file-explorer-upload svg { width: 14px; height: 14px; }
642
+ .file-explorer-icon-btn {
643
+ display: grid;
644
+ place-items: center;
645
+ width: 26px;
646
+ height: 26px;
647
+ background: transparent;
648
+ border: 1px solid var(--border-3);
649
+ border-radius: 999px;
650
+ color: var(--fg-3);
651
+ cursor: pointer;
652
+ transition: background 0.15s, color 0.15s, border-color 0.15s;
653
+ flex-shrink: 0;
654
+ }
655
+ .file-explorer-icon-btn:hover { color: var(--fg); border-color: var(--border-5); background: var(--surface-3); }
656
+ .file-explorer-icon-btn svg { width: 13px; height: 13px; }
657
+ .file-preview {
658
+ display: flex;
659
+ flex-direction: column;
660
+ min-height: 100%;
661
+ height: 100%;
662
+ }
663
+ .file-preview-text {
664
+ flex: 1;
665
+ overflow: auto;
666
+ padding: 16px 20px;
667
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
668
+ font-size: 12.5px;
669
+ line-height: 1.5;
670
+ color: var(--fg-2);
671
+ white-space: pre-wrap;
672
+ overflow-wrap: anywhere;
673
+ margin: 0;
674
+ }
675
+ .file-preview-markdown {
676
+ flex: 1;
677
+ overflow: auto;
678
+ padding: 16px 20px;
679
+ }
680
+ .file-preview-table-wrap {
681
+ flex: 1;
682
+ overflow: auto;
683
+ padding: 0 16px 16px;
684
+ }
685
+ .file-preview-table {
686
+ border-collapse: separate;
687
+ border-spacing: 0;
688
+ font-size: 12.5px;
689
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
690
+ color: var(--fg-2);
691
+ width: max-content;
692
+ min-width: 100%;
693
+ }
694
+ .file-preview-table th,
695
+ .file-preview-table td {
696
+ border-right: 1px solid var(--border-1);
697
+ border-bottom: 1px solid var(--border-1);
698
+ padding: 6px 10px;
699
+ text-align: left;
700
+ vertical-align: top;
701
+ white-space: pre-wrap;
702
+ max-width: 480px;
703
+ overflow-wrap: anywhere;
704
+ }
705
+ .file-preview-table tr th:first-child,
706
+ .file-preview-table tr td:first-child {
707
+ border-left: 1px solid var(--border-1);
708
+ }
709
+ .file-preview-table thead th {
710
+ position: sticky;
711
+ top: 0;
712
+ background: var(--bg);
713
+ color: var(--fg);
714
+ font-weight: 600;
715
+ z-index: 2;
716
+ border-top: 1px solid var(--border-1);
717
+ box-shadow: 0 1px 0 var(--border-1);
718
+ }
719
+ .file-preview-table tbody td { background: var(--bg); }
720
+ .file-preview-table tbody tr:hover td { background: var(--surface-2); }
721
+ .file-preview-table-truncated {
722
+ padding: 6px 4px 0;
723
+ font-size: 11px;
724
+ color: var(--fg-7);
725
+ }
726
+ .file-preview-actions {
727
+ display: flex;
728
+ justify-content: space-between;
729
+ gap: 6px;
730
+ padding: 8px 16px 12px;
731
+ }
732
+ .file-preview-actions-group {
733
+ display: flex;
734
+ gap: 6px;
735
+ }
736
+ .file-preview-action-btn {
737
+ background: transparent;
738
+ border: 1px solid var(--border-3);
739
+ color: var(--fg-3);
740
+ border-radius: 999px;
741
+ font-size: 12px;
742
+ padding: 4px 12px;
743
+ cursor: pointer;
744
+ transition: background 0.15s, color 0.15s, border-color 0.15s;
745
+ }
746
+ .file-preview-action-btn { text-decoration: none; }
747
+ .file-preview-action-btn:hover { color: var(--fg); border-color: var(--border-5); }
748
+ .file-preview-action-btn.primary {
749
+ background: var(--accent);
750
+ border-color: var(--accent);
751
+ color: var(--accent-fg);
752
+ }
753
+ .file-preview-action-btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-fg); }
754
+ .file-preview-action-btn:disabled { opacity: 0.5; cursor: default; }
755
+ .file-edit-textarea {
756
+ flex: 1;
757
+ width: 100%;
758
+ box-sizing: border-box;
759
+ background: transparent;
760
+ border: 0;
761
+ outline: none;
762
+ resize: none;
763
+ padding: 16px 20px;
764
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
765
+ font-size: 12.5px;
766
+ line-height: 1.5;
767
+ color: var(--fg);
768
+ white-space: pre-wrap;
769
+ overflow-wrap: anywhere;
770
+ }
771
+ .file-preview-image,
772
+ .file-preview-pdf,
773
+ .file-preview-media {
774
+ flex: 1;
775
+ display: grid;
776
+ place-items: center;
777
+ padding: 16px;
778
+ overflow: auto;
779
+ min-height: 0;
780
+ }
781
+ .file-preview-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
782
+ .file-preview-pdf iframe { width: 100%; height: 100%; border: 0; min-height: 600px; }
783
+ .file-preview-placeholder {
784
+ flex: 1;
785
+ display: grid;
786
+ place-items: center;
787
+ color: var(--fg-7);
788
+ text-align: center;
789
+ padding: 32px;
790
+ }
791
+ .file-preview-placeholder .file-preview-name {
792
+ font-size: 14px;
793
+ color: var(--fg-3);
794
+ margin-bottom: 8px;
795
+ word-break: break-all;
796
+ }
797
+ .file-preview-placeholder .file-preview-meta {
798
+ font-size: 12px;
799
+ margin-bottom: 16px;
800
+ }
801
+ .file-preview-download {
802
+ display: inline-block;
803
+ background: var(--surface-4);
804
+ color: var(--fg);
805
+ text-decoration: none;
806
+ padding: 8px 16px;
807
+ border-radius: 8px;
808
+ font-size: 13px;
809
+ transition: background 0.15s;
810
+ }
811
+ .file-preview-download:hover { background: var(--surface-6); }
439
812
  .sidebar-footer {
440
813
  margin-top: auto;
441
814
  padding-top: 8px;
@@ -627,6 +1000,40 @@ export const WEB_UI_STYLES = `
627
1000
  }
628
1001
  .topbar-new-chat:hover { color: var(--fg); }
629
1002
  .topbar-new-chat svg { width: 16px; height: 16px; }
1003
+ .dev-view-toggle {
1004
+ position: fixed;
1005
+ left: 12px;
1006
+ bottom: 12px;
1007
+ background: var(--chip-bg);
1008
+ border: 1px solid var(--border-4);
1009
+ color: var(--fg-4);
1010
+ font-size: 11px;
1011
+ letter-spacing: 0.04em;
1012
+ padding: 4px 10px;
1013
+ border-radius: 999px;
1014
+ cursor: pointer;
1015
+ z-index: 1000;
1016
+ backdrop-filter: blur(6px);
1017
+ -webkit-backdrop-filter: blur(6px);
1018
+ transition: color 0.15s, border-color 0.15s, background 0.15s;
1019
+ }
1020
+ .dev-view-toggle:hover { color: var(--fg); border-color: var(--border-hover); background: var(--chip-bg-hover); }
1021
+ .dev-view-toggle.is-harness { color: var(--fg); border-color: var(--fg); }
1022
+ .harness-debug-view {
1023
+ padding: 16px 20px;
1024
+ font-family: var(--mono, ui-monospace, SFMono-Regular, Consolas, monospace);
1025
+ font-size: 11px;
1026
+ color: var(--fg);
1027
+ white-space: pre-wrap;
1028
+ word-break: break-word;
1029
+ }
1030
+ .harness-debug-view .hd-msg { margin-bottom: 16px; padding: 8px 10px; border-left: 3px solid var(--fg-5); background: var(--bg-2, rgba(255,255,255,0.02)); }
1031
+ .harness-debug-view .hd-msg.role-user { border-left-color: #6ea8fe; }
1032
+ .harness-debug-view .hd-msg.role-assistant { border-left-color: #22c55e; }
1033
+ .harness-debug-view .hd-msg.role-tool { border-left-color: #f59e0b; }
1034
+ .harness-debug-view .hd-msg.role-system { border-left-color: #9ca3af; }
1035
+ .harness-debug-view .hd-role { font-weight: 600; opacity: 0.7; margin-bottom: 4px; text-transform: uppercase; font-size: 10px; letter-spacing: 0.06em; }
1036
+ .harness-debug-view .hd-meta { opacity: 0.5; font-size: 10px; margin-bottom: 6px; }
630
1037
 
631
1038
  /* Messages */
632
1039
  .messages { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 24px 24px; }
@@ -2227,21 +2634,12 @@ export const WEB_UI_STYLES = `
2227
2634
  border-radius: 4px;
2228
2635
  }
2229
2636
  .thread-panel-close:hover { color: var(--fg); }
2230
- .thread-panel-parent {
2231
- padding: 12px 16px;
2232
- border-bottom: 1px solid var(--border);
2233
- background: var(--bg-bubble-user, rgba(0,0,0,0.02));
2234
- font-size: 13px;
2235
- }
2236
- .thread-panel-parent .message-row {
2237
- margin: 0;
2238
- }
2239
- .thread-panel-parent-empty {
2240
- color: var(--fg-3);
2241
- font-style: italic;
2242
- }
2243
2637
  .thread-panel-messages {
2244
- flex: 1;
2638
+ flex: 1 1 0;
2639
+ /* min-height: 0 is required so this flex item can shrink below its
2640
+ content size — without it, overflow-y:auto never engages because
2641
+ the element grows to fit all messages instead of scrolling. */
2642
+ min-height: 0;
2245
2643
  overflow-y: auto;
2246
2644
  padding: 12px 16px;
2247
2645
  }
package/src/web-ui.ts CHANGED
@@ -137,7 +137,12 @@ ${WEB_UI_STYLES}
137
137
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
138
138
  </button>
139
139
  </div>
140
+ <div class="sidebar-segmented" role="tablist">
141
+ <button class="seg-btn active" data-mode="conversations" role="tab">Chats</button>
142
+ <button class="seg-btn" data-mode="files" role="tab">Files</button>
143
+ </div>
140
144
  <div id="conversation-list" class="conversation-list"></div>
145
+ <div id="file-explorer" class="file-explorer hidden"></div>
141
146
  <div class="sidebar-footer">
142
147
  <div class="sidebar-footer-row">
143
148
  <button id="logout" class="logout-btn">Log out</button>
@@ -211,7 +216,6 @@ ${WEB_UI_STYLES}
211
216
  <span class="thread-panel-title">Thread</span>
212
217
  <button id="thread-panel-close" class="thread-panel-close" title="Close thread">&times;</button>
213
218
  </div>
214
- <div id="thread-panel-parent" class="thread-panel-parent"></div>
215
219
  <div id="thread-panel-messages" class="thread-panel-messages messages"></div>
216
220
  <form id="thread-composer" class="composer thread-composer">
217
221
  <div class="composer-inner">
@@ -234,6 +238,7 @@ ${WEB_UI_STYLES}
234
238
  </div>
235
239
  <div id="drag-overlay" class="drag-overlay"><div class="drag-overlay-inner">Drop files to attach</div></div>
236
240
  <div id="lightbox" class="lightbox" style="display:none"><img /></div>
241
+ <button id="view-toggle" class="dev-view-toggle" hidden title="Toggle between user-facing messages and raw harness messages (dev -v only)">user view</button>
237
242
 
238
243
  <script>
239
244
  ${getWebUiClientScript(markedSource)}