Integrate tunnel UI in settings
linuztx committed
May 15, 2025 at 09:14 UTC
27564fea3c662ae7af113466995a3e901b10a903
1 file changed
+61
webui/index.html
+61
@@ -14,6 +14,10 @@
14
<link rel="stylesheet" href="css/speech.css">
15
<link rel="stylesheet" href="css/history.css">
16
<link rel="stylesheet" href="css/scheduler-datepicker.css">
17
+ <link rel="stylesheet" href="css/tunnel.css">
18
+
19
+ <!-- Font Awesome for icons -->
20
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
21
22
<!-- Flatpickr for datetime picker -->
23
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
@@ -116,6 +120,7 @@
120
<script type="text/javascript" src="js/settings.js"></script>
121
<script type="text/javascript" src="js/file_browser.js"></script>
122
<script type="text/javascript" src="js/modal.js"></script>
123
+ <script type="text/javascript" src="js/tunnel.js"></script>
124
</head>
125
126
<body>
@@ -602,6 +607,13 @@
607
</a>
608
</li>
609
</template>
610
+ <!-- Tunnel navigation entry - only visible in the External Services tab -->
611
+ <li x-show="activeTab === 'external'">
612
+ <a href="#section-tunnel">
613
+ <img src="/public/tunnel.svg" alt="Tunnel">
614
+ <span>Flare Tunnel</span>
615
+ </a>
616
+ </li>
617
</ul>
618
</nav>
619
@@ -692,6 +704,55 @@
704
</template>
705
</div>
706
</template>
707
+
708
+ <!-- Tunnel section content - only visible in External Services tab -->
709
+ <div id="section-tunnel" class="section" x-show="activeTab === 'external'">
710
+ <div class="section-title">Flare Tunnel</div>
711
+ <div class="section-description">Create a secure public URL to access your Agent Zero instance anytime, anywhere.</div>
712
+ <div class="tunnel-container" x-data="tunnelSettings">
713
+ <!-- Loading spinner for tunnel operations -->
714
+ <div class="loading-spinner" x-show="isLoading">
715
+ <i class="fas fa-spinner fa-spin"></i>
716
+ <span x-text="loadingText || 'Processing tunnel request...'"></span>
717
+ </div>
718
+
719
+ <!-- Tunnel content when not loading -->
720
+ <div x-show="!isLoading">
721
+ <!-- Tunnel link display when generated -->
722
+ <div class="tunnel-link-container" x-show="linkGenerated">
723
+ <div class="tunnel-link-field">
724
+ <input type="text" class="tunnel-link-input" :value="tunnelLink" readonly>
725
+ <div class="buttons-row">
726
+ <button class="copy-link-button" @click="copyToClipboard()" title="Copy to clipboard">
727
+ <i class="fas fa-copy"></i> Copy
728
+ </button>
729
+ <button class="refresh-link-button" @click="refreshLink()" title="Generate new URL">
730
+ <i class="fas fa-sync-alt"></i> Refresh
731
+ </button>
732
+ </div>
733
+ </div>
734
+ <div class="tunnel-link-info">
735
+ Share this URL to allow others to access your Agent Zero instance.
736
+ </div>
737
+ <div class="tunnel-link-persistence">
738
+ This URL will persist until you stop the tunnel or restart Agent Zero.
739
+ </div>
740
+ <div class="stop-tunnel-container">
741
+ <button class="btn btn-danger" @click="stopTunnel()">
742
+ <i class="fas fa-stop-circle"></i> Stop Tunnel
743
+ </button>
744
+ </div>
745
+ </div>
746
+
747
+ <!-- Generate tunnel button when no link exists -->
748
+ <div class="tunnel-actions" x-show="!linkGenerated">
749
+ <button class="btn btn-ok" @click="generateLink()">
750
+ <i class="fas fa-play-circle"></i> Create Tunnel
751
+ </button>
752
+ </div>
753
+ </div>
754
+ </div>
755
+ </div>
756
</div>
757
758
<!-- Task Scheduler Tab Content -->