agentgui 1.0.92 → 1.0.94
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.
- package/.prd +1 -0
- package/database.js +7 -5
- package/package.json +5 -3
- package/server.js +82 -4
- package/static/index.html +527 -75
- package/static/js/client.js +17 -10
- package/static/js/conversations.js +165 -9
- package/static/js/features.js +243 -0
- package/static/styles.css +46 -4
package/static/index.html
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<html lang="en" class="light">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
|
6
6
|
<meta name="description" content="AgentGUI - Real-time Claude Code Execution Visualization">
|
|
7
7
|
<title>AgentGUI - Agent Execution Visualizer</title>
|
|
8
8
|
|
|
@@ -460,96 +460,180 @@
|
|
|
460
460
|
color: var(--color-text-secondary);
|
|
461
461
|
}
|
|
462
462
|
|
|
463
|
-
/*
|
|
464
|
-
@media (max-width: 768px) {
|
|
465
|
-
.layout-with-sidebar {
|
|
466
|
-
grid-template-columns: 1fr;
|
|
467
|
-
}
|
|
463
|
+
/* Old responsive rules removed - see bottom of style block for consolidated responsive CSS */
|
|
468
464
|
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
465
|
+
/* Folder Browser Modal */
|
|
466
|
+
.folder-modal-overlay {
|
|
467
|
+
display: none;
|
|
468
|
+
position: fixed;
|
|
469
|
+
top: 0;
|
|
470
|
+
left: 0;
|
|
471
|
+
width: 100%;
|
|
472
|
+
height: 100%;
|
|
473
|
+
background: rgba(0, 0, 0, 0.5);
|
|
474
|
+
z-index: 2000;
|
|
475
|
+
align-items: center;
|
|
476
|
+
justify-content: center;
|
|
477
|
+
}
|
|
479
478
|
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
479
|
+
.folder-modal-overlay.visible {
|
|
480
|
+
display: flex;
|
|
481
|
+
}
|
|
483
482
|
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
483
|
+
.folder-modal {
|
|
484
|
+
background: var(--color-bg-primary);
|
|
485
|
+
border: 1px solid var(--color-border);
|
|
486
|
+
border-radius: 0.5rem;
|
|
487
|
+
width: 500px;
|
|
488
|
+
max-width: 90vw;
|
|
489
|
+
max-height: 80vh;
|
|
490
|
+
display: flex;
|
|
491
|
+
flex-direction: column;
|
|
492
|
+
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
493
|
+
}
|
|
488
494
|
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
495
|
+
.folder-modal-header {
|
|
496
|
+
padding: 1rem;
|
|
497
|
+
border-bottom: 1px solid var(--color-border);
|
|
498
|
+
display: flex;
|
|
499
|
+
justify-content: space-between;
|
|
500
|
+
align-items: center;
|
|
501
|
+
flex-shrink: 0;
|
|
502
|
+
}
|
|
493
503
|
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
504
|
+
.folder-modal-header h3 {
|
|
505
|
+
margin: 0;
|
|
506
|
+
font-size: 1rem;
|
|
507
|
+
font-weight: 600;
|
|
508
|
+
}
|
|
498
509
|
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
510
|
+
.folder-modal-close {
|
|
511
|
+
background: none;
|
|
512
|
+
border: none;
|
|
513
|
+
font-size: 1.25rem;
|
|
514
|
+
cursor: pointer;
|
|
515
|
+
color: var(--color-text-secondary);
|
|
516
|
+
padding: 0.25rem;
|
|
517
|
+
line-height: 1;
|
|
518
|
+
}
|
|
502
519
|
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
}
|
|
520
|
+
.folder-modal-close:hover {
|
|
521
|
+
color: var(--color-text-primary);
|
|
522
|
+
}
|
|
507
523
|
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
524
|
+
.folder-breadcrumb {
|
|
525
|
+
padding: 0.75rem 1rem;
|
|
526
|
+
border-bottom: 1px solid var(--color-border);
|
|
527
|
+
font-size: 0.8rem;
|
|
528
|
+
font-family: 'Monaco', 'Menlo', monospace;
|
|
529
|
+
color: var(--color-text-secondary);
|
|
530
|
+
background: var(--color-bg-secondary);
|
|
531
|
+
display: flex;
|
|
532
|
+
align-items: center;
|
|
533
|
+
gap: 0.25rem;
|
|
534
|
+
flex-shrink: 0;
|
|
535
|
+
overflow-x: auto;
|
|
536
|
+
white-space: nowrap;
|
|
511
537
|
}
|
|
512
538
|
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
539
|
+
.folder-breadcrumb-segment {
|
|
540
|
+
cursor: pointer;
|
|
541
|
+
color: var(--color-primary);
|
|
542
|
+
padding: 0.125rem 0.25rem;
|
|
543
|
+
border-radius: 0.25rem;
|
|
544
|
+
}
|
|
517
545
|
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
546
|
+
.folder-breadcrumb-segment:hover {
|
|
547
|
+
background: var(--color-bg-primary);
|
|
548
|
+
text-decoration: underline;
|
|
549
|
+
}
|
|
521
550
|
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
551
|
+
.folder-breadcrumb-separator {
|
|
552
|
+
color: var(--color-text-secondary);
|
|
553
|
+
}
|
|
525
554
|
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
555
|
+
.folder-list {
|
|
556
|
+
flex: 1;
|
|
557
|
+
overflow-y: auto;
|
|
558
|
+
min-height: 200px;
|
|
559
|
+
max-height: 400px;
|
|
560
|
+
list-style: none;
|
|
561
|
+
margin: 0;
|
|
562
|
+
padding: 0;
|
|
563
|
+
}
|
|
530
564
|
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
565
|
+
.folder-list-item {
|
|
566
|
+
padding: 0.5rem 1rem;
|
|
567
|
+
cursor: pointer;
|
|
568
|
+
display: flex;
|
|
569
|
+
align-items: center;
|
|
570
|
+
gap: 0.5rem;
|
|
571
|
+
font-size: 0.875rem;
|
|
572
|
+
border-bottom: 1px solid var(--color-border);
|
|
573
|
+
transition: background-color 0.15s;
|
|
574
|
+
}
|
|
535
575
|
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
576
|
+
.folder-list-item:hover {
|
|
577
|
+
background: var(--color-bg-secondary);
|
|
578
|
+
}
|
|
539
579
|
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
580
|
+
.folder-list-item-icon {
|
|
581
|
+
font-size: 1rem;
|
|
582
|
+
flex-shrink: 0;
|
|
583
|
+
width: 1.25rem;
|
|
584
|
+
text-align: center;
|
|
585
|
+
}
|
|
544
586
|
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
587
|
+
.folder-list-item-name {
|
|
588
|
+
flex: 1;
|
|
589
|
+
overflow: hidden;
|
|
590
|
+
text-overflow: ellipsis;
|
|
591
|
+
white-space: nowrap;
|
|
592
|
+
}
|
|
548
593
|
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
594
|
+
.folder-list-empty {
|
|
595
|
+
padding: 2rem 1rem;
|
|
596
|
+
text-align: center;
|
|
597
|
+
color: var(--color-text-secondary);
|
|
598
|
+
font-size: 0.875rem;
|
|
599
|
+
}
|
|
600
|
+
|
|
601
|
+
.folder-list-loading {
|
|
602
|
+
padding: 2rem 1rem;
|
|
603
|
+
text-align: center;
|
|
604
|
+
color: var(--color-text-secondary);
|
|
605
|
+
font-size: 0.875rem;
|
|
606
|
+
}
|
|
607
|
+
|
|
608
|
+
.folder-list-error {
|
|
609
|
+
padding: 1rem;
|
|
610
|
+
text-align: center;
|
|
611
|
+
color: var(--color-error);
|
|
612
|
+
font-size: 0.875rem;
|
|
613
|
+
}
|
|
614
|
+
|
|
615
|
+
.folder-modal-footer {
|
|
616
|
+
padding: 0.75rem 1rem;
|
|
617
|
+
border-top: 1px solid var(--color-border);
|
|
618
|
+
display: flex;
|
|
619
|
+
justify-content: flex-end;
|
|
620
|
+
gap: 0.5rem;
|
|
621
|
+
flex-shrink: 0;
|
|
622
|
+
}
|
|
623
|
+
|
|
624
|
+
.folder-modal-footer .btn {
|
|
625
|
+
padding: 0.5rem 1rem;
|
|
626
|
+
font-size: 0.8rem;
|
|
627
|
+
}
|
|
628
|
+
|
|
629
|
+
.btn-secondary {
|
|
630
|
+
background: var(--color-bg-secondary);
|
|
631
|
+
color: var(--color-text-primary);
|
|
632
|
+
border: 1px solid var(--color-border);
|
|
633
|
+
}
|
|
634
|
+
|
|
635
|
+
.btn-secondary:hover {
|
|
636
|
+
background: var(--color-border);
|
|
553
637
|
}
|
|
554
638
|
|
|
555
639
|
/* Utilities */
|
|
@@ -785,12 +869,338 @@
|
|
|
785
869
|
.flex-shrink-0 {
|
|
786
870
|
flex-shrink: 0;
|
|
787
871
|
}
|
|
872
|
+
|
|
873
|
+
/* Hamburger menu button */
|
|
874
|
+
.hamburger-btn {
|
|
875
|
+
display: none;
|
|
876
|
+
flex-direction: column;
|
|
877
|
+
justify-content: center;
|
|
878
|
+
align-items: center;
|
|
879
|
+
gap: 4px;
|
|
880
|
+
width: 44px;
|
|
881
|
+
height: 44px;
|
|
882
|
+
background: none;
|
|
883
|
+
border: none;
|
|
884
|
+
cursor: pointer;
|
|
885
|
+
padding: 8px;
|
|
886
|
+
border-radius: 0.375rem;
|
|
887
|
+
flex-shrink: 0;
|
|
888
|
+
-webkit-tap-highlight-color: transparent;
|
|
889
|
+
}
|
|
890
|
+
|
|
891
|
+
.hamburger-btn:hover {
|
|
892
|
+
background-color: var(--color-border);
|
|
893
|
+
}
|
|
894
|
+
|
|
895
|
+
.hamburger-btn span {
|
|
896
|
+
display: block;
|
|
897
|
+
width: 20px;
|
|
898
|
+
height: 2px;
|
|
899
|
+
background-color: var(--color-text-primary);
|
|
900
|
+
border-radius: 1px;
|
|
901
|
+
transition: transform 0.2s, opacity 0.2s;
|
|
902
|
+
}
|
|
903
|
+
|
|
904
|
+
/* Sidebar overlay for mobile */
|
|
905
|
+
.sidebar-overlay {
|
|
906
|
+
display: none;
|
|
907
|
+
position: fixed;
|
|
908
|
+
top: 0;
|
|
909
|
+
left: 0;
|
|
910
|
+
width: 100%;
|
|
911
|
+
height: 100%;
|
|
912
|
+
background: rgba(0, 0, 0, 0.5);
|
|
913
|
+
z-index: 999;
|
|
914
|
+
-webkit-tap-highlight-color: transparent;
|
|
915
|
+
}
|
|
916
|
+
|
|
917
|
+
.sidebar-overlay.visible {
|
|
918
|
+
display: block;
|
|
919
|
+
}
|
|
920
|
+
|
|
921
|
+
/* View toggle bar */
|
|
922
|
+
.view-toggle-bar {
|
|
923
|
+
display: flex;
|
|
924
|
+
gap: 0;
|
|
925
|
+
border-bottom: 1px solid var(--color-border);
|
|
926
|
+
background: var(--color-bg-secondary);
|
|
927
|
+
flex-shrink: 0;
|
|
928
|
+
padding: 0 1rem;
|
|
929
|
+
}
|
|
930
|
+
|
|
931
|
+
.view-toggle-btn {
|
|
932
|
+
padding: 0.625rem 1rem;
|
|
933
|
+
border: none;
|
|
934
|
+
background: none;
|
|
935
|
+
cursor: pointer;
|
|
936
|
+
font-size: 0.875rem;
|
|
937
|
+
font-weight: 500;
|
|
938
|
+
color: var(--color-text-secondary);
|
|
939
|
+
border-bottom: 2px solid transparent;
|
|
940
|
+
transition: all 0.2s;
|
|
941
|
+
min-height: 44px;
|
|
942
|
+
-webkit-tap-highlight-color: transparent;
|
|
943
|
+
}
|
|
944
|
+
|
|
945
|
+
.view-toggle-btn:hover {
|
|
946
|
+
color: var(--color-text-primary);
|
|
947
|
+
}
|
|
948
|
+
|
|
949
|
+
.view-toggle-btn.active {
|
|
950
|
+
color: var(--color-primary);
|
|
951
|
+
border-bottom-color: var(--color-primary);
|
|
952
|
+
}
|
|
953
|
+
|
|
954
|
+
/* Drop zone overlay */
|
|
955
|
+
.drop-zone-overlay {
|
|
956
|
+
display: none;
|
|
957
|
+
position: absolute;
|
|
958
|
+
top: 0;
|
|
959
|
+
left: 0;
|
|
960
|
+
right: 0;
|
|
961
|
+
bottom: 0;
|
|
962
|
+
background: rgba(59, 130, 246, 0.1);
|
|
963
|
+
border: 3px dashed var(--color-primary);
|
|
964
|
+
border-radius: 0.5rem;
|
|
965
|
+
z-index: 100;
|
|
966
|
+
align-items: center;
|
|
967
|
+
justify-content: center;
|
|
968
|
+
}
|
|
969
|
+
|
|
970
|
+
.drop-zone-overlay.visible {
|
|
971
|
+
display: flex;
|
|
972
|
+
}
|
|
973
|
+
|
|
974
|
+
#output-scroll {
|
|
975
|
+
position: relative;
|
|
976
|
+
}
|
|
977
|
+
|
|
978
|
+
.drop-zone-content {
|
|
979
|
+
text-align: center;
|
|
980
|
+
color: var(--color-primary);
|
|
981
|
+
pointer-events: none;
|
|
982
|
+
}
|
|
983
|
+
|
|
984
|
+
.drop-zone-icon {
|
|
985
|
+
font-size: 3rem;
|
|
986
|
+
font-weight: 300;
|
|
987
|
+
line-height: 1;
|
|
988
|
+
margin-bottom: 0.5rem;
|
|
989
|
+
}
|
|
990
|
+
|
|
991
|
+
.drop-zone-text {
|
|
992
|
+
font-size: 1rem;
|
|
993
|
+
font-weight: 500;
|
|
994
|
+
}
|
|
995
|
+
|
|
996
|
+
/* Upload toast notification */
|
|
997
|
+
.upload-toast {
|
|
998
|
+
position: fixed;
|
|
999
|
+
bottom: 100px;
|
|
1000
|
+
left: 50%;
|
|
1001
|
+
transform: translateX(-50%);
|
|
1002
|
+
padding: 0.75rem 1.5rem;
|
|
1003
|
+
border-radius: 0.5rem;
|
|
1004
|
+
font-size: 0.875rem;
|
|
1005
|
+
font-weight: 500;
|
|
1006
|
+
z-index: 2000;
|
|
1007
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
1008
|
+
transition: opacity 0.3s;
|
|
1009
|
+
}
|
|
1010
|
+
|
|
1011
|
+
.upload-toast.success {
|
|
1012
|
+
background: var(--color-success);
|
|
1013
|
+
color: white;
|
|
1014
|
+
}
|
|
1015
|
+
|
|
1016
|
+
.upload-toast.error {
|
|
1017
|
+
background: var(--color-error);
|
|
1018
|
+
color: white;
|
|
1019
|
+
}
|
|
1020
|
+
|
|
1021
|
+
.upload-toast.info {
|
|
1022
|
+
background: var(--color-primary);
|
|
1023
|
+
color: white;
|
|
1024
|
+
}
|
|
1025
|
+
|
|
1026
|
+
/* File browser container */
|
|
1027
|
+
.file-browser-container {
|
|
1028
|
+
flex: 1;
|
|
1029
|
+
min-height: 0;
|
|
1030
|
+
overflow: hidden;
|
|
1031
|
+
}
|
|
1032
|
+
|
|
1033
|
+
.file-browser-iframe {
|
|
1034
|
+
width: 100%;
|
|
1035
|
+
height: 100%;
|
|
1036
|
+
border: none;
|
|
1037
|
+
}
|
|
1038
|
+
|
|
1039
|
+
/* Safe area insets for notched phones */
|
|
1040
|
+
.app-container {
|
|
1041
|
+
padding-top: env(safe-area-inset-top);
|
|
1042
|
+
padding-bottom: env(safe-area-inset-bottom);
|
|
1043
|
+
padding-left: env(safe-area-inset-left);
|
|
1044
|
+
padding-right: env(safe-area-inset-right);
|
|
1045
|
+
}
|
|
1046
|
+
|
|
1047
|
+
/* Responsive improvements */
|
|
1048
|
+
@media (max-width: 768px) {
|
|
1049
|
+
.hamburger-btn {
|
|
1050
|
+
display: flex;
|
|
1051
|
+
}
|
|
1052
|
+
|
|
1053
|
+
.layout-with-sidebar {
|
|
1054
|
+
grid-template-columns: 1fr;
|
|
1055
|
+
}
|
|
1056
|
+
|
|
1057
|
+
.sidebar {
|
|
1058
|
+
position: fixed;
|
|
1059
|
+
top: 0;
|
|
1060
|
+
left: 0;
|
|
1061
|
+
width: 280px;
|
|
1062
|
+
height: 100%;
|
|
1063
|
+
z-index: 1000;
|
|
1064
|
+
transform: translateX(-100%);
|
|
1065
|
+
transition: transform 0.3s ease;
|
|
1066
|
+
box-shadow: none;
|
|
1067
|
+
}
|
|
1068
|
+
|
|
1069
|
+
.sidebar.mobile-visible {
|
|
1070
|
+
transform: translateX(0);
|
|
1071
|
+
box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2);
|
|
1072
|
+
}
|
|
1073
|
+
|
|
1074
|
+
.execution-panel {
|
|
1075
|
+
grid-template-columns: 1fr;
|
|
1076
|
+
padding: 0.75rem;
|
|
1077
|
+
padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
|
|
1078
|
+
}
|
|
1079
|
+
|
|
1080
|
+
.execution-input-group {
|
|
1081
|
+
grid-template-columns: 1fr;
|
|
1082
|
+
gap: 0.5rem;
|
|
1083
|
+
}
|
|
1084
|
+
|
|
1085
|
+
.btn {
|
|
1086
|
+
min-height: 44px;
|
|
1087
|
+
min-width: 44px;
|
|
1088
|
+
}
|
|
1089
|
+
|
|
1090
|
+
.conversation-item {
|
|
1091
|
+
padding: 0.875rem 0.5rem;
|
|
1092
|
+
min-height: 44px;
|
|
1093
|
+
}
|
|
1094
|
+
|
|
1095
|
+
.sidebar-new-btn {
|
|
1096
|
+
min-height: 44px;
|
|
1097
|
+
min-width: 44px;
|
|
1098
|
+
padding: 0.5rem 0.75rem;
|
|
1099
|
+
}
|
|
1100
|
+
|
|
1101
|
+
header {
|
|
1102
|
+
padding: 0.5rem 0.75rem;
|
|
1103
|
+
height: auto;
|
|
1104
|
+
min-height: 50px;
|
|
1105
|
+
padding-top: calc(0.5rem + env(safe-area-inset-top));
|
|
1106
|
+
}
|
|
1107
|
+
|
|
1108
|
+
.header-title {
|
|
1109
|
+
font-size: 1.125rem;
|
|
1110
|
+
}
|
|
1111
|
+
|
|
1112
|
+
.status-badge {
|
|
1113
|
+
padding: 0.375rem 0.625rem;
|
|
1114
|
+
font-size: 0.75rem;
|
|
1115
|
+
}
|
|
1116
|
+
|
|
1117
|
+
#output-scroll {
|
|
1118
|
+
padding: 0.75rem;
|
|
1119
|
+
-webkit-overflow-scrolling: touch;
|
|
1120
|
+
}
|
|
1121
|
+
|
|
1122
|
+
.execution-textarea {
|
|
1123
|
+
min-height: 44px;
|
|
1124
|
+
font-size: 16px;
|
|
1125
|
+
}
|
|
1126
|
+
|
|
1127
|
+
.view-toggle-btn {
|
|
1128
|
+
flex: 1;
|
|
1129
|
+
text-align: center;
|
|
1130
|
+
}
|
|
1131
|
+
}
|
|
1132
|
+
|
|
1133
|
+
@media (max-width: 480px) {
|
|
1134
|
+
.sidebar {
|
|
1135
|
+
width: calc(100% - 3rem);
|
|
1136
|
+
max-width: 320px;
|
|
1137
|
+
}
|
|
1138
|
+
|
|
1139
|
+
header {
|
|
1140
|
+
padding: 0.5rem;
|
|
1141
|
+
}
|
|
1142
|
+
|
|
1143
|
+
.header-title {
|
|
1144
|
+
font-size: 1rem;
|
|
1145
|
+
}
|
|
1146
|
+
|
|
1147
|
+
.header-controls {
|
|
1148
|
+
gap: 0.375rem;
|
|
1149
|
+
}
|
|
1150
|
+
|
|
1151
|
+
.execution-panel {
|
|
1152
|
+
padding: 0.5rem;
|
|
1153
|
+
padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
|
|
1154
|
+
}
|
|
1155
|
+
|
|
1156
|
+
.execution-textarea {
|
|
1157
|
+
min-height: 44px;
|
|
1158
|
+
max-height: 6rem;
|
|
1159
|
+
font-size: 16px;
|
|
1160
|
+
}
|
|
1161
|
+
|
|
1162
|
+
.btn {
|
|
1163
|
+
padding: 0.625rem 1rem;
|
|
1164
|
+
font-size: 0.8rem;
|
|
1165
|
+
}
|
|
1166
|
+
|
|
1167
|
+
#output-scroll {
|
|
1168
|
+
padding: 0.5rem;
|
|
1169
|
+
}
|
|
1170
|
+
|
|
1171
|
+
.status-badge {
|
|
1172
|
+
padding: 0.25rem 0.5rem;
|
|
1173
|
+
font-size: 0.7rem;
|
|
1174
|
+
}
|
|
1175
|
+
|
|
1176
|
+
.drop-zone-icon {
|
|
1177
|
+
font-size: 2rem;
|
|
1178
|
+
}
|
|
1179
|
+
|
|
1180
|
+
.drop-zone-text {
|
|
1181
|
+
font-size: 0.875rem;
|
|
1182
|
+
}
|
|
1183
|
+
}
|
|
1184
|
+
|
|
1185
|
+
/* Tablet landscape */
|
|
1186
|
+
@media (min-width: 769px) and (max-width: 1024px) {
|
|
1187
|
+
.layout-with-sidebar {
|
|
1188
|
+
grid-template-columns: 250px 1fr;
|
|
1189
|
+
}
|
|
1190
|
+
|
|
1191
|
+
.sidebar {
|
|
1192
|
+
width: auto;
|
|
1193
|
+
}
|
|
1194
|
+
}
|
|
788
1195
|
</style>
|
|
789
1196
|
</head>
|
|
790
1197
|
<body>
|
|
791
1198
|
<div class="app-container">
|
|
792
1199
|
<!-- Header -->
|
|
793
1200
|
<header>
|
|
1201
|
+
<button class="hamburger-btn" data-hamburger title="Toggle sidebar" aria-label="Toggle sidebar">
|
|
1202
|
+
<span></span><span></span><span></span>
|
|
1203
|
+
</button>
|
|
794
1204
|
<h1 class="header-title">AgentGUI</h1>
|
|
795
1205
|
|
|
796
1206
|
<div class="header-controls">
|
|
@@ -800,11 +1210,14 @@
|
|
|
800
1210
|
</div>
|
|
801
1211
|
|
|
802
1212
|
<button class="btn btn-primary" data-theme-toggle title="Toggle dark mode">
|
|
803
|
-
|
|
1213
|
+
Theme
|
|
804
1214
|
</button>
|
|
805
1215
|
</div>
|
|
806
1216
|
</header>
|
|
807
1217
|
|
|
1218
|
+
<!-- Sidebar Overlay (mobile) -->
|
|
1219
|
+
<div class="sidebar-overlay" data-sidebar-overlay></div>
|
|
1220
|
+
|
|
808
1221
|
<!-- Main Content with Sidebar -->
|
|
809
1222
|
<div class="layout-with-sidebar">
|
|
810
1223
|
<!-- Sidebar -->
|
|
@@ -820,9 +1233,27 @@
|
|
|
820
1233
|
|
|
821
1234
|
<!-- Main Content Area -->
|
|
822
1235
|
<main id="app" class="main-content">
|
|
1236
|
+
<!-- View Toggle Bar -->
|
|
1237
|
+
<div class="view-toggle-bar" id="viewToggleBar" style="display:none;">
|
|
1238
|
+
<button class="view-toggle-btn active" data-view="chat">Chat</button>
|
|
1239
|
+
<button class="view-toggle-btn" data-view="files">Files</button>
|
|
1240
|
+
</div>
|
|
1241
|
+
|
|
823
1242
|
<!-- Output Container - Scrollable -->
|
|
824
|
-
<div id="output-scroll" role="region" aria-label="Execution output" aria-live="polite" aria-atomic="false">
|
|
1243
|
+
<div id="output-scroll" role="region" aria-label="Execution output" aria-live="polite" aria-atomic="false" data-drop-zone>
|
|
825
1244
|
<div id="output" class="output"></div>
|
|
1245
|
+
<!-- Drop zone overlay -->
|
|
1246
|
+
<div class="drop-zone-overlay" id="dropZoneOverlay">
|
|
1247
|
+
<div class="drop-zone-content">
|
|
1248
|
+
<div class="drop-zone-icon">+</div>
|
|
1249
|
+
<div class="drop-zone-text">Drop files here to copy to working directory</div>
|
|
1250
|
+
</div>
|
|
1251
|
+
</div>
|
|
1252
|
+
</div>
|
|
1253
|
+
|
|
1254
|
+
<!-- File Browser iframe (hidden by default) -->
|
|
1255
|
+
<div id="fileBrowserContainer" class="file-browser-container" style="display:none;">
|
|
1256
|
+
<iframe id="fileBrowserIframe" class="file-browser-iframe" sandbox="allow-same-origin allow-scripts allow-forms allow-popups"></iframe>
|
|
826
1257
|
</div>
|
|
827
1258
|
|
|
828
1259
|
<!-- Execution Panel - Fixed at bottom -->
|
|
@@ -849,6 +1280,24 @@
|
|
|
849
1280
|
</div>
|
|
850
1281
|
</div>
|
|
851
1282
|
|
|
1283
|
+
<!-- Folder Browser Modal -->
|
|
1284
|
+
<div id="folderBrowserModal" class="folder-modal-overlay">
|
|
1285
|
+
<div class="folder-modal">
|
|
1286
|
+
<div class="folder-modal-header">
|
|
1287
|
+
<h3>Select Working Directory</h3>
|
|
1288
|
+
<button class="folder-modal-close" data-folder-close>×</button>
|
|
1289
|
+
</div>
|
|
1290
|
+
<div id="folderBreadcrumb" class="folder-breadcrumb"></div>
|
|
1291
|
+
<ul id="folderList" class="folder-list">
|
|
1292
|
+
<li class="folder-list-loading">Loading...</li>
|
|
1293
|
+
</ul>
|
|
1294
|
+
<div class="folder-modal-footer">
|
|
1295
|
+
<button class="btn btn-secondary" data-folder-cancel>Cancel</button>
|
|
1296
|
+
<button class="btn btn-primary" data-folder-select>Select This Folder</button>
|
|
1297
|
+
</div>
|
|
1298
|
+
</div>
|
|
1299
|
+
</div>
|
|
1300
|
+
|
|
852
1301
|
<!-- Scripts - Order matters! -->
|
|
853
1302
|
<!-- 1. Event Processor (no dependencies) -->
|
|
854
1303
|
<script src="/gm/js/event-processor.js"></script>
|
|
@@ -874,6 +1323,9 @@
|
|
|
874
1323
|
<!-- 8. Main Client (depends on all above) -->
|
|
875
1324
|
<script src="/gm/js/client.js"></script>
|
|
876
1325
|
|
|
1326
|
+
<!-- 9. Features: drag-drop, file browser, mobile sidebar -->
|
|
1327
|
+
<script src="/gm/js/features.js"></script>
|
|
1328
|
+
|
|
877
1329
|
<!-- Inline initialization -->
|
|
878
1330
|
<script>
|
|
879
1331
|
// Set initial theme based on preference
|