@chrysb/alphaclaw 0.3.5-beta.1 → 0.4.1-beta.0

package/bin/alphaclaw.js

@@ -626,37 +626,7 @@ try {
 } catch {}
 
 // ---------------------------------------------------------------------------
-// 10. Configure gog credentials (if env vars present)
-// ---------------------------------------------------------------------------
-
-if (process.env.GOG_CLIENT_CREDENTIALS_JSON && process.env.GOG_REFRESH_TOKEN) {
-  try {
-    const tmpCreds = `/tmp/gog-creds-${process.pid}.json`;
-    const tmpToken = `/tmp/gog-token-${process.pid}.json`;
-    fs.writeFileSync(tmpCreds, process.env.GOG_CLIENT_CREDENTIALS_JSON);
-    execSync(`gog auth credentials set "${tmpCreds}"`, { stdio: "ignore" });
-    fs.unlinkSync(tmpCreds);
-    fs.writeFileSync(
-      tmpToken,
-      JSON.stringify({
-        email: process.env.GOG_ACCOUNT || "",
-        refresh_token: process.env.GOG_REFRESH_TOKEN,
-      }),
-    );
-    execSync(`gog auth tokens import "${tmpToken}"`, { stdio: "ignore" });
-    fs.unlinkSync(tmpToken);
-    console.log(
-      `[alphaclaw] gog CLI configured for ${process.env.GOG_ACCOUNT || "account"}`,
-    );
-  } catch (e) {
-    console.log(`[alphaclaw] gog credentials setup skipped: ${e.message}`);
-  }
-} else {
-  console.log("[alphaclaw] Google credentials not set -- skipping gog setup");
-}
-
-// ---------------------------------------------------------------------------
-// 11. Reconcile channels if already onboarded
+// 10. Reconcile channels if already onboarded
 // ---------------------------------------------------------------------------
 
 const configPath = path.join(openclawDir, "openclaw.json");

package/lib/public/assets/icons/google_icon.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-labelledby="title">
+  <title>Google</title>
+  <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
+  <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
+  <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
+  <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
+  <path d="M1 1h22v22H1z" fill="none"/>
+</svg>

package/lib/public/css/explorer.css

@@ -216,6 +216,28 @@
   background: var(--bg-hover);
 }
 
+.tree-folder.active {
+  background: var(--bg-active);
+  color: var(--accent);
+}
+
+.tree-folder.active .arrow {
+  color: var(--accent);
+}
+
+.tree-folder-toggle {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  color: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  flex: 0 0 auto;
+}
+
 .arrow {
   font-size: 10px;
   transition: transform 0.15s;
@@ -565,6 +587,37 @@
   flex-shrink: 0;
 }
 
+.file-viewer-icon-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  margin-right: 10px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.02);
+  color: var(--text-muted);
+  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
+}
+
+.file-viewer-icon-action:hover {
+  border-color: rgba(148, 163, 184, 0.45);
+  color: var(--text);
+  background: rgba(148, 163, 184, 0.08);
+}
+
+.file-viewer-icon-action.is-disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.file-viewer-icon-action-icon {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+
 .file-viewer-view-toggle {
   display: flex;
   align-items: center;

package/lib/public/css/shell.css

@@ -11,35 +11,37 @@
 }
 
 .global-restart-banner {
-  grid-column: 1 / -1;
-  grid-row: 1;
-  background: rgba(234, 179, 8, 0.08);
-  border-bottom: 1px solid rgba(234, 179, 8, 0.32);
-  padding: 10px 32px;
+  position: fixed;
+  left: 50%;
+  bottom: 52px;
+  transform: translateX(-50%);
+  width: auto;
+  max-width: calc(100vw - 32px);
+  z-index: 40;
+  pointer-events: none;
 }
 
 .global-restart-banner__content {
-  margin: 0 auto;
-  max-width: 900px;
-  position: relative;
+  border: 1px solid rgba(234, 179, 8, 0.35);
+  background: rgba(43, 32, 6, 0.95);
+  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.42);
+  border-radius: 14px;
+  padding: 10px 14px;
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
   gap: 12px;
-  min-height: 28px;
+  pointer-events: auto;
 }
 
 .global-restart-banner__text {
   font-size: 12px;
   color: #fde68a;
-  text-align: center;
+  line-height: 1.4;
 }
 
 .global-restart-banner__button {
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
+  flex-shrink: 0;
 }
 
 .app-content {
@@ -292,13 +294,13 @@
     grid-template-rows: auto 1fr 24px;
   }
   .global-restart-banner {
-    padding: 10px 14px;
+    max-width: calc(100vw - 20px);
+    bottom: 44px;
   }
   .global-restart-banner__content {
-    max-width: none;
-    align-items: flex-start;
+    align-items: stretch;
     flex-direction: column;
-    min-height: 0;
+    gap: 8px;
   }
   .global-restart-banner__text {
     text-align: left;

package/lib/public/css/theme.css

@@ -66,6 +66,13 @@ body::before {
   background: rgba(0, 0, 0, 0.12);
 }
 
+/* Shared inset panel for "surface on surface" layouts. */
+.ac-surface-inset {
+  border: 1px solid var(--panel-border-contrast);
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.12);
+}
+
 .ac-history-summary {
   cursor: pointer;
   list-style: none;
@@ -116,6 +123,16 @@ body::before {
   border-color: var(--panel-border-contrast) !important;
 }
 
+.ac-tip-link {
+  color: var(--accent-link);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.ac-tip-link:hover {
+  color: var(--accent);
+}
+
 /* Universal field contrast treatment (all tabs/pages). */
 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
 select,

package/lib/public/js/app.js

@@ -28,7 +28,7 @@ import { Gateway } from "./components/gateway.js";
 import { Channels, ALL_CHANNELS } from "./components/channels.js";
 import { Pairings } from "./components/pairings.js";
 import { DevicePairings } from "./components/device-pairings.js";
-import { Google } from "./components/google.js";
+import { Google } from "./components/google/index.js";
 import { Features } from "./components/features.js";
 import { Providers } from "./components/providers.js";
 import { Welcome } from "./components/welcome.js";
@@ -43,7 +43,7 @@ import { LoadingSpinner } from "./components/loading-spinner.js";
 import { WatchdogTab } from "./components/watchdog-tab.js";
 import { FileViewer } from "./components/file-viewer/index.js";
 import { AppSidebar } from "./components/sidebar.js";
-import { UsageTab } from "./components/usage-tab.js";
+import { UsageTab } from "./components/usage-tab/index.js";
 import { readUiSettings, writeUiSettings } from "./lib/ui-settings.js";
 const html = htm.bind(h);
 const kDefaultUiTab = "general";
@@ -52,6 +52,32 @@ const kSidebarMinWidthPx = 180;
 const kSidebarMaxWidthPx = 460;
 const kBrowseLastPathUiSettingKey = "browseLastPath";
 const kLastMenuRouteUiSettingKey = "lastMenuRoute";
+const kBrowseRestartRequiredRules = [
+  { type: "file", path: "openclaw.json" },
+  { type: "directory", path: "hooks/transforms" },
+];
+const normalizeBrowsePath = (value) => String(value || "").replace(/^\/+|\/+$/g, "");
+const normalizeRestartRulePath = (value) =>
+  String(value || "")
+    .trim()
+    .replace(/^\/+|\/+$/g, "");
+const matchesBrowseRestartRequiredRule = (path, rule) => {
+  const normalizedPath = normalizeRestartRulePath(path);
+  if (!normalizedPath) return false;
+  if (!rule || typeof rule !== "object") return false;
+  const type = String(rule.type || "").toLowerCase();
+  const targetPath = normalizeRestartRulePath(rule.path);
+  if (!targetPath) return false;
+  if (type === "directory") {
+    return normalizedPath === targetPath || normalizedPath.startsWith(`${targetPath}/`);
+  }
+  if (type === "file") {
+    return normalizedPath === targetPath;
+  }
+  return false;
+};
+const shouldRequireRestartForBrowsePath = (path) =>
+  kBrowseRestartRequiredRules.some((rule) => matchesBrowseRestartRequiredRule(path, rule));
 
 const clampSidebarWidth = (value) =>
   Math.max(kSidebarMinWidthPx, Math.min(kSidebarMaxWidthPx, value));
@@ -98,6 +124,7 @@ const GeneralTab = ({
   onRefreshStatuses = () => {},
   onSwitchTab,
   onNavigate,
+  onOpenGmailWebhook = () => {},
   isActive,
   restartingGateway,
   onRestartGateway,
@@ -105,8 +132,8 @@ const GeneralTab = ({
   openclawUpdateInProgress = false,
   onOpenclawVersionActionComplete = () => {},
   onOpenclawUpdate,
+  onRestartRequired = () => {},
 }) => {
-  const [googleKey, setGoogleKey] = useState(0);
   const [dashboardLoading, setDashboardLoading] = useState(false);
   const [repairingWatchdog, setRepairingWatchdog] = useState(false);
   const status = statusData;
@@ -179,7 +206,6 @@ const GeneralTab = ({
     onRefreshStatuses();
     pairingsPoll.refresh();
     devicePoll.refresh();
-    setGoogleKey((k) => k + 1);
   }, [isActive]);
 
   useEffect(() => {
@@ -280,7 +306,11 @@ const GeneralTab = ({
         onReject=${handleReject}
       />
       <${Features} onSwitchTab=${onSwitchTab} />
-      <${Google} key=${googleKey} gatewayStatus=${gatewayStatus} />
+      <${Google}
+        gatewayStatus=${gatewayStatus}
+        onRestartRequired=${onRestartRequired}
+        onOpenGmailWebhook=${onOpenGmailWebhook}
+      />
 
       ${repo &&
       html`
@@ -421,11 +451,13 @@ const App = () => {
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
   const [mobileTopbarScrolled, setMobileTopbarScrolled] = useState(false);
   const [restartRequired, setRestartRequired] = useState(false);
+  const [browseRestartRequired, setBrowseRestartRequired] = useState(false);
   const [restartingGateway, setRestartingGateway] = useState(false);
   const [gatewayRestartSignal, setGatewayRestartSignal] = useState(0);
   const [statusPollCadenceMs, setStatusPollCadenceMs] = useState(15000);
   const [openclawUpdateInProgress, setOpenclawUpdateInProgress] = useState(false);
   const menuRef = useRef(null);
+  const routeHistoryRef = useRef([]);
   const sharedStatusPoll = usePolling(fetchStatus, statusPollCadenceMs, {
     enabled: onboarded === true,
   });
@@ -434,6 +466,7 @@ const App = () => {
   });
   const sharedStatus = sharedStatusPoll.data || null;
   const sharedWatchdogStatus = sharedWatchdogPoll.data?.status || null;
+  const isAnyRestartRequired = restartRequired || browseRestartRequired;
   const refreshSharedStatuses = useCallback(() => {
     sharedStatusPoll.refresh();
     sharedWatchdogPoll.refresh();
@@ -537,6 +570,18 @@ const App = () => {
     return () => clearInterval(id);
   }, [onboarded, restartRequired, restartingGateway, refreshRestartStatus]);
 
+  useEffect(() => {
+    const handleBrowseFileSaved = (event) => {
+      const savedPath = String(event?.detail?.path || "");
+      if (!shouldRequireRestartForBrowsePath(savedPath)) return;
+      setBrowseRestartRequired(true);
+    };
+    window.addEventListener("alphaclaw:browse-file-saved", handleBrowseFileSaved);
+    return () => {
+      window.removeEventListener("alphaclaw:browse-file-saved", handleBrowseFileSaved);
+    };
+  }, []);
+
   const handleGatewayRestart = useCallback(async () => {
     if (restartingGateway) return;
     setRestartingGateway(true);
@@ -544,6 +589,7 @@ const App = () => {
       const data = await restartGateway();
       if (!data?.ok) throw new Error(data?.error || "Gateway restart failed");
       setRestartRequired(!!data.restartRequired);
+      setBrowseRestartRequired(false);
       setGatewayRestartSignal(Date.now());
       refreshSharedStatuses();
       showToast("Gateway restarted", "success");
@@ -646,9 +692,27 @@ const App = () => {
     setLocation(`/${screen}`);
     setMobileSidebarOpen(false);
   };
+  const handleBrowsePreviewFile = useCallback((nextPreviewPath) => {
+    const normalizedPreviewPath = normalizeBrowsePath(nextPreviewPath);
+    setBrowsePreviewPath(normalizedPreviewPath);
+  }, []);
   const navigateToBrowseFile = (relativePath, options = {}) => {
-    setBrowsePreviewPath("");
-    setLocation(buildBrowseRoute(relativePath, options));
+    const normalizedTargetPath = normalizeBrowsePath(relativePath);
+    const selectingDirectory =
+      !!options.directory || String(relativePath || "").trim().endsWith("/");
+    const shouldPreservePreview = selectingDirectory && !!options.preservePreview;
+    const activePath = normalizeBrowsePath(
+      browsePreviewPath || selectedBrowsePath || "",
+    );
+    const nextPreviewPath =
+      shouldPreservePreview && activePath && activePath !== normalizedTargetPath
+        ? activePath
+        : "";
+    setBrowsePreviewPath(nextPreviewPath);
+    const routeOptions = selectingDirectory
+      ? { ...options, view: "edit" }
+      : options;
+    setLocation(buildBrowseRoute(normalizedTargetPath, routeOptions));
     setMobileSidebarOpen(false);
   };
   const handleSidebarLogout = async () => {
@@ -765,6 +829,16 @@ const App = () => {
     setBrowsePreviewPath("");
   }, [location]);
 
+  useEffect(() => {
+    const historyStack = routeHistoryRef.current;
+    const lastEntry = historyStack[historyStack.length - 1];
+    if (lastEntry === location) return;
+    historyStack.push(location);
+    if (historyStack.length > 100) {
+      historyStack.shift();
+    }
+  }, [location]);
+
   useEffect(() => {
     if (location.startsWith("/browse")) return;
     if (location === "/telegram") return;
@@ -848,8 +922,24 @@ const App = () => {
       <${Webhooks}
         selectedHookName=${hookName}
         onSelectHook=${(name) => setLocation(`/webhooks/${encodeURIComponent(name)}`)}
-        onBackToList=${() => setLocation("/webhooks")}
+        onBackToList=${() => {
+          const historyStack = routeHistoryRef.current;
+          const hasPreviousRoute = historyStack.length > 1;
+          if (!hasPreviousRoute) {
+            setLocation("/webhooks");
+            return;
+          }
+          const currentPath = getHashPath();
+          window.history.back();
+          window.setTimeout(() => {
+            if (getHashPath() === currentPath) {
+              setLocation("/webhooks");
+            }
+          }, 180);
+        }}
         onRestartRequired=${setRestartRequired}
+        onOpenFile=${(relativePath) =>
+          navigateToBrowseFile(String(relativePath || "").trim(), { view: "edit" })}
       />
     </div>
   `;
@@ -861,7 +951,7 @@ const App = () => {
       style=${{ "--sidebar-width": `${sidebarWidthPx}px` }}
     >
       <${GlobalRestartBanner}
-        visible=${restartRequired}
+        visible=${isAnyRestartRequired}
         restarting=${restartingGateway}
         onRestart=${handleGatewayRestart}
       />
@@ -879,7 +969,7 @@ const App = () => {
         onSelectNavItem=${handleSelectNavItem}
         selectedBrowsePath=${selectedBrowsePath}
         onSelectBrowseFile=${navigateToBrowseFile}
-        onPreviewBrowseFile=${setBrowsePreviewPath}
+        onPreviewBrowseFile=${handleBrowsePreviewFile}
         acHasUpdate=${acHasUpdate}
         acLatest=${acLatest}
         acDismissed=${acDismissed}
@@ -921,115 +1011,121 @@ const App = () => {
           </span>
         </div>
         <div class=${isBrowseRoute ? "w-full" : "max-w-2xl w-full mx-auto"}>
-          ${isBrowseRoute
-            ? html`
-                <${FileViewer}
-                  filePath=${activeBrowsePath}
-                  isPreviewOnly=${Boolean(
-                    browsePreviewPath &&
-                      browsePreviewPath !== selectedBrowsePath,
-                  )}
-                  browseView=${browseViewerMode}
-                  onRequestEdit=${(targetPath) => {
-                    const normalizedTargetPath = String(targetPath || "");
-                    if (
-                      normalizedTargetPath &&
-                      normalizedTargetPath !== selectedBrowsePath
-                    ) {
-                      navigateToBrowseFile(normalizedTargetPath, { view: "edit" });
-                      return;
-                    }
-                    setLocation(buildBrowseRoute(selectedBrowsePath, { view: "edit" }));
-                  }}
+          <div style=${{ display: isBrowseRoute ? "block" : "none" }}>
+            <${FileViewer}
+              filePath=${activeBrowsePath}
+              isPreviewOnly=${false}
+              browseView=${browseViewerMode}
+              onRequestEdit=${(targetPath) => {
+                const normalizedTargetPath = String(targetPath || "");
+                if (
+                  normalizedTargetPath &&
+                  normalizedTargetPath !== selectedBrowsePath
+                ) {
+                  navigateToBrowseFile(normalizedTargetPath, { view: "edit" });
+                  return;
+                }
+                setLocation(buildBrowseRoute(selectedBrowsePath, { view: "edit" }));
+              }}
+              onRequestClearSelection=${() => {
+                setBrowsePreviewPath("");
+                setLocation("/browse");
+              }}
+            />
+          </div>
+          <div style=${{ display: isBrowseRoute ? "none" : "block" }}>
+            <div style=${{ display: location === "/general" ? "block" : "none" }}>
+              <div class="pt-4">
+                <${GeneralTab}
+                  statusData=${sharedStatus}
+                  watchdogData=${sharedWatchdogStatus}
+                  onRefreshStatuses=${refreshSharedStatuses}
+                  onSwitchTab=${(nextTab) => setLocation(`/${nextTab}`)}
+                  onNavigate=${navigateToSubScreen}
+                  onOpenGmailWebhook=${() => setLocation("/webhooks/gmail")}
+                  isActive=${location === "/general"}
+                  restartingGateway=${restartingGateway}
+                  onRestartGateway=${handleGatewayRestart}
+                  restartSignal=${gatewayRestartSignal}
+                  openclawUpdateInProgress=${openclawUpdateInProgress}
+                  onOpenclawVersionActionComplete=${handleOpenclawVersionActionComplete}
+                  onOpenclawUpdate=${handleOpenclawUpdate}
+                  onRestartRequired=${setRestartRequired}
                 />
-              `
-            : html`
-                <${Switch}>
-                  <${Route} path="/telegram">
-                    <div class="pt-4">
-                      <${TelegramWorkspace} onBack=${exitSubScreen} />
-                    </div>
-                  </${Route}>
-                  <${Route} path="/general">
-                    <div class="pt-4">
-                      <${GeneralTab}
-                        statusData=${sharedStatus}
-                        watchdogData=${sharedWatchdogStatus}
-                        onRefreshStatuses=${refreshSharedStatuses}
-                        onSwitchTab=${(nextTab) => setLocation(`/${nextTab}`)}
-                        onNavigate=${navigateToSubScreen}
-                        isActive=${location === "/general"}
-                        restartingGateway=${restartingGateway}
-                        onRestartGateway=${handleGatewayRestart}
-                        restartSignal=${gatewayRestartSignal}
-                        openclawUpdateInProgress=${openclawUpdateInProgress}
-                        onOpenclawVersionActionComplete=${handleOpenclawVersionActionComplete}
-                        onOpenclawUpdate=${handleOpenclawUpdate}
-                      />
-                    </div>
-                  </${Route}>
-                  <${Route} path="/providers">
-                    <div class="pt-4">
-                      <${Providers} onRestartRequired=${setRestartRequired} />
-                    </div>
-                  </${Route}>
-                  <${Route} path="/watchdog">
-                    <div class="pt-4">
-                      <${WatchdogTab}
-                        gatewayStatus=${sharedStatus?.gateway || null}
-                        openclawVersion=${sharedStatus?.openclawVersion || null}
-                        watchdogStatus=${sharedWatchdogStatus}
-                        onRefreshStatuses=${refreshSharedStatuses}
-                        restartingGateway=${restartingGateway}
-                        onRestartGateway=${handleGatewayRestart}
-                        restartSignal=${gatewayRestartSignal}
-                        openclawUpdateInProgress=${openclawUpdateInProgress}
-                        onOpenclawVersionActionComplete=${handleOpenclawVersionActionComplete}
-                        onOpenclawUpdate=${handleOpenclawUpdate}
-                      />
-                    </div>
-                  </${Route}>
-                  <${Route} path="/usage/:sessionId">
-                    ${(params) => html`
+              </div>
+            </div>
+            ${!isBrowseRoute && location !== "/general"
+              ? html`
+                  <${Switch}>
+                    <${Route} path="/telegram">
+                      <div class="pt-4">
+                        <${TelegramWorkspace} onBack=${exitSubScreen} />
+                      </div>
+                    </${Route}>
+                    <${Route} path="/providers">
+                      <div class="pt-4">
+                        <${Providers} onRestartRequired=${setRestartRequired} />
+                      </div>
+                    </${Route}>
+                    <${Route} path="/watchdog">
+                      <div class="pt-4">
+                        <${WatchdogTab}
+                          gatewayStatus=${sharedStatus?.gateway || null}
+                          openclawVersion=${sharedStatus?.openclawVersion || null}
+                          watchdogStatus=${sharedWatchdogStatus}
+                          onRefreshStatuses=${refreshSharedStatuses}
+                          restartingGateway=${restartingGateway}
+                          onRestartGateway=${handleGatewayRestart}
+                          restartSignal=${gatewayRestartSignal}
+                          openclawUpdateInProgress=${openclawUpdateInProgress}
+                          onOpenclawVersionActionComplete=${handleOpenclawVersionActionComplete}
+                          onOpenclawUpdate=${handleOpenclawUpdate}
+                        />
+                      </div>
+                    </${Route}>
+                    <${Route} path="/usage/:sessionId">
+                      ${(params) => html`
+                        <div class="pt-4">
+                          <${UsageTab}
+                            sessionId=${decodeURIComponent(params.sessionId || "")}
+                            onSelectSession=${(id) =>
+                              setLocation(`/usage/${encodeURIComponent(String(id || ""))}`)}
+                            onBackToSessions=${() => setLocation("/usage")}
+                          />
+                        </div>
+                      `}
+                    </${Route}>
+                    <${Route} path="/usage">
                       <div class="pt-4">
                         <${UsageTab}
-                          sessionId=${decodeURIComponent(params.sessionId || "")}
                           onSelectSession=${(id) =>
                             setLocation(`/usage/${encodeURIComponent(String(id || ""))}`)}
                           onBackToSessions=${() => setLocation("/usage")}
                         />
                       </div>
-                    `}
-                  </${Route}>
-                  <${Route} path="/usage">
-                    <div class="pt-4">
-                      <${UsageTab}
-                        onSelectSession=${(id) =>
-                          setLocation(`/usage/${encodeURIComponent(String(id || ""))}`)}
-                        onBackToSessions=${() => setLocation("/usage")}
-                      />
-                    </div>
-                  </${Route}>
-                  <${Route} path="/envars">
-                    <div class="pt-4">
-                      <${Envars} onRestartRequired=${setRestartRequired} />
-                    </div>
-                  </${Route}>
-                  <${Route} path="/webhooks/:hookName">
-                    ${(params) =>
-                      renderWebhooks(decodeURIComponent(params.hookName || ""))}
-                  </${Route}>
-                  <${Route} path="/webhooks">
-                    ${() => renderWebhooks("")}
-                  </${Route}>
-                  <${Route}>
-                    <${RouteRedirect} to="/general" />
-                  </${Route}>
-                </${Switch}>
-              `}
+                    </${Route}>
+                    <${Route} path="/envars">
+                      <div class="pt-4">
+                        <${Envars} onRestartRequired=${setRestartRequired} />
+                      </div>
+                    </${Route}>
+                    <${Route} path="/webhooks/:hookName">
+                      ${(params) =>
+                        renderWebhooks(decodeURIComponent(params.hookName || ""))}
+                    </${Route}>
+                    <${Route} path="/webhooks">
+                      ${() => renderWebhooks("")}
+                    </${Route}>
+                    <${Route}>
+                      <${RouteRedirect} to="/general" />
+                    </${Route}>
+                  </${Switch}>
+                `
+              : null}
+          </div>
         </div>
         <${ToastContainer}
-          className="fixed bottom-10 right-4 z-50 space-y-2 pointer-events-none"
+          className="fixed top-4 right-4 z-50 space-y-2 pointer-events-none"
         />
       </div>