@poncho-ai/cli 0.38.1 → 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; }
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>
@@ -233,6 +238,7 @@ ${WEB_UI_STYLES}
233
238
  </div>
234
239
  <div id="drag-overlay" class="drag-overlay"><div class="drag-overlay-inner">Drop files to attach</div></div>
235
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>
236
242
 
237
243
  <script>
238
244
  ${getWebUiClientScript(markedSource)}