From 8f4ff01f935557fb467c7d0eca25e8ea0bca2fb8 Mon Sep 17 00:00:00 2001
From: Benson Wong <mostlygeek@gmail.com>
Date: Sun, 26 Apr 2026 22:12:43 -0700
Subject: [PATCH] ui-svelte: make it easier to toggle panels in logs view

---
 ui-svelte/src/routes/LogViewer.svelte | 58 ++++++++++-----------------
 ui-svelte/vite.config.ts              |  4 ++
 2 files changed, 26 insertions(+), 36 deletions(-)

diff --git a/ui-svelte/src/routes/LogViewer.svelte b/ui-svelte/src/routes/LogViewer.svelte
index ff91ef42..2643c202 100644
--- a/ui-svelte/src/routes/LogViewer.svelte
+++ b/ui-svelte/src/routes/LogViewer.svelte
@@ -12,47 +12,33 @@
   let direction = $derived<"horizontal" | "vertical">(
     $screenWidth === "xs" || $screenWidth === "sm" ? "vertical" : "horizontal"
   );
-
-  function cycleViewMode(): void {
-    const modes: ViewMode[] = ["panels", "proxy", "upstream"];
-    const currentIndex = modes.indexOf($viewModeStore);
-    const nextIndex = (currentIndex + 1) % modes.length;
-    viewModeStore.set(modes[nextIndex]);
-  }
-
-  function getViewModeIcon(mode: ViewMode): string {
-    switch (mode) {
-      case "proxy":
-        return "P";
-      case "upstream":
-        return "U";
-      case "panels":
-        return "⊞";
-    }
-  }
-
-  function getViewModeLabel(mode: ViewMode): string {
-    switch (mode) {
-      case "proxy":
-        return "Proxy";
-      case "upstream":
-        return "Upstream";
-      case "panels":
-        return "Panels";
-    }
-  }
 </script>
 
 <div class="flex flex-col h-full w-full gap-2">
-  <div class="flex items-center gap-2">
+  <div class="flex items-center gap-1">
     <button
-      onclick={cycleViewMode}
-      class="btn flex items-center gap-2 text-sm"
-      title="Toggle view mode"
-      aria-label="Toggle view mode: {getViewModeLabel($viewModeStore)}"
+      onclick={() => viewModeStore.set("panels")}
+      class:btn={true}
+      class:bg-primary={$viewModeStore === "panels"}
+      class:text-btn-primary-text={$viewModeStore === "panels"}
     >
-      <span class="font-mono font-bold">{getViewModeIcon($viewModeStore)}</span>
-      <span>{getViewModeLabel($viewModeStore)}</span>
+      Both
+    </button>
+    <button
+      onclick={() => viewModeStore.set("proxy")}
+      class:btn={true}
+      class:bg-primary={$viewModeStore === "proxy"}
+      class:text-btn-primary-text={$viewModeStore === "proxy"}
+    >
+      Panel
+    </button>
+    <button
+      onclick={() => viewModeStore.set("upstream")}
+      class:btn={true}
+      class:bg-primary={$viewModeStore === "upstream"}
+      class:text-btn-primary-text={$viewModeStore === "upstream"}
+    >
+      Upstream
     </button>
   </div>
 
diff --git a/ui-svelte/vite.config.ts b/ui-svelte/vite.config.ts
index 5904451a..18dcc3ee 100644
--- a/ui-svelte/vite.config.ts
+++ b/ui-svelte/vite.config.ts
@@ -26,6 +26,10 @@ export default defineConfig({
     assetsDir: "assets",
   },
   server: {
+    // yes very insecure but who's running this thing
+    // on the public internet for dev?! haha.
+    host: "0.0.0.0",
+    allowedHosts: true,
     proxy: {
       "/api": "http://localhost:8080", // Proxy API calls to Go backend during development
       "/logs": "http://localhost:8080",