@chrysb/alphaclaw 0.3.2 → 0.3.4-beta.0

package/lib/public/js/app.js

@@ -34,14 +34,26 @@ import { Welcome } from "./components/welcome.js";
 import { Envars } from "./components/envars.js";
 import { Webhooks } from "./components/webhooks.js";
 import { ToastContainer, showToast } from "./components/toast.js";
-import { TelegramWorkspace } from "./components/telegram-workspace.js";
+import { TelegramWorkspace } from "./components/telegram-workspace/index.js";
 import { ChevronDownIcon } from "./components/icons.js";
 import { UpdateActionButton } from "./components/update-action-button.js";
 import { GlobalRestartBanner } from "./components/global-restart-banner.js";
 import { LoadingSpinner } from "./components/loading-spinner.js";
 import { WatchdogTab } from "./components/watchdog-tab.js";
+import { FileViewer } from "./components/file-viewer.js";
+import { AppSidebar } from "./components/sidebar.js";
+import { UsageTab } from "./components/usage-tab.js";
+import { readUiSettings, writeUiSettings } from "./lib/ui-settings.js";
 const html = htm.bind(h);
 const kDefaultUiTab = "general";
+const kDefaultSidebarWidthPx = 220;
+const kSidebarMinWidthPx = 180;
+const kSidebarMaxWidthPx = 460;
+const kBrowseLastPathUiSettingKey = "browseLastPath";
+const kLastMenuRouteUiSettingKey = "lastMenuRoute";
+
+const clampSidebarWidth = (value) =>
+  Math.max(kSidebarMinWidthPx, Math.min(kSidebarMaxWidthPx, value));
 
 const getHashPath = () => {
   const hash = window.location.hash.replace(/^#/, "");
@@ -158,16 +170,12 @@ const GeneralTab = ({
     setTimeout(devicePoll.refresh, 2000);
   };
 
-  const fullRefresh = () => {
+  useEffect(() => {
+    if (!isActive) return;
     onRefreshStatuses();
     pairingsPoll.refresh();
     devicePoll.refresh();
     setGoogleKey((k) => k + 1);
-  };
-
-  useEffect(() => {
-    if (!isActive) return;
-    fullRefresh();
   }, [isActive]);
 
   useEffect(() => {
@@ -360,23 +368,12 @@ const GeneralTab = ({
           onReject=${handleDeviceReject}
         />
       </div>
-
-      <p class="text-center text-gray-600 text-xs">
-        <a
-          href="#"
-          onclick=${(e) => {
-            e.preventDefault();
-            fullRefresh();
-          }}
-          class="text-gray-500 hover:text-gray-300"
-          >Refresh all</a
-        >
-      </p>
     </div>
   `;
 };
 
 const App = () => {
+  const appShellRef = useRef(null);
   const [onboarded, setOnboarded] = useState(null);
   const [location, setLocation] = useLocation();
   const [acVersion, setAcVersion] = useState(null);
@@ -386,6 +383,32 @@ const App = () => {
   const [acDismissed, setAcDismissed] = useState(false);
   const [authEnabled, setAuthEnabled] = useState(false);
   const [menuOpen, setMenuOpen] = useState(false);
+  const [sidebarTab, setSidebarTab] = useState("menu");
+  const [sidebarWidthPx, setSidebarWidthPx] = useState(() => {
+    const settings = readUiSettings();
+    if (!Number.isFinite(settings.sidebarWidthPx)) return kDefaultSidebarWidthPx;
+    return clampSidebarWidth(settings.sidebarWidthPx);
+  });
+  const [lastBrowsePath, setLastBrowsePath] = useState(() => {
+    const settings = readUiSettings();
+    return typeof settings[kBrowseLastPathUiSettingKey] === "string"
+      ? settings[kBrowseLastPathUiSettingKey]
+      : "";
+  });
+  const [lastMenuRoute, setLastMenuRoute] = useState(() => {
+    const settings = readUiSettings();
+    const storedRoute = settings[kLastMenuRouteUiSettingKey];
+    if (
+      typeof storedRoute === "string" &&
+      storedRoute.startsWith("/") &&
+      !storedRoute.startsWith("/browse")
+    ) {
+      return storedRoute;
+    }
+    return `/${kDefaultUiTab}`;
+  });
+  const [isResizingSidebar, setIsResizingSidebar] = useState(false);
+  const [browsePreviewPath, setBrowsePreviewPath] = useState("");
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
   const [mobileTopbarScrolled, setMobileTopbarScrolled] = useState(false);
   const [restartRequired, setRestartRequired] = useState(false);
@@ -568,10 +591,47 @@ const App = () => {
     `;
   }
 
+  const buildBrowseRoute = (relativePath) => {
+    const encodedPath = String(relativePath || "")
+      .split("/")
+      .filter(Boolean)
+      .map((segment) => encodeURIComponent(segment))
+      .join("/");
+    return encodedPath ? `/browse/${encodedPath}` : "/browse";
+  };
   const navigateToSubScreen = (screen) => {
     setLocation(`/${screen}`);
     setMobileSidebarOpen(false);
   };
+  const navigateToBrowseFile = (relativePath) => {
+    setBrowsePreviewPath("");
+    setLocation(buildBrowseRoute(relativePath));
+    setMobileSidebarOpen(false);
+  };
+  const handleSidebarLogout = async () => {
+    setMenuOpen(false);
+    await logout();
+    try {
+      window.localStorage.clear();
+      window.sessionStorage.clear();
+    } catch {}
+    window.location.href = "/login.html";
+  };
+  const handleSelectSidebarTab = (nextTab) => {
+    setSidebarTab(nextTab);
+    if (nextTab === "menu" && location.startsWith("/browse")) {
+      setBrowsePreviewPath("");
+      setLocation(lastMenuRoute || `/${kDefaultUiTab}`);
+      return;
+    }
+    if (nextTab === "browse" && !location.startsWith("/browse")) {
+      setLocation(buildBrowseRoute(lastBrowsePath));
+    }
+  };
+  const handleSelectNavItem = (itemId) => {
+    setLocation(`/${itemId}`);
+    setMobileSidebarOpen(false);
+  };
   const exitSubScreen = () => {
     setLocation(`/${kDefaultUiTab}`);
     setMobileSidebarOpen(false);
@@ -585,10 +645,16 @@ const App = () => {
 
   const kNavSections = [
     {
-      label: "Status",
+      label: "Setup",
       items: [
         { id: "general", label: "General" },
+      ],
+    },
+    {
+      label: "Monitoring",
+      items: [
         { id: "watchdog", label: "Watchdog" },
+        { id: "usage", label: "Usage" },
       ],
     },
     {
@@ -601,18 +667,105 @@ const App = () => {
     },
   ];
 
-  const selectedNavId =
-    location === "/telegram"
-      ? ""
-      : location.startsWith("/providers")
-      ? "providers"
-      : location.startsWith("/watchdog")
-      ? "watchdog"
-      : location.startsWith("/envars")
-      ? "envars"
-      : location.startsWith("/webhooks")
-      ? "webhooks"
-      : "general";
+  const isBrowseRoute = location.startsWith("/browse");
+  const selectedBrowsePath = isBrowseRoute
+    ? location
+        .replace(/^\/browse\/?/, "")
+        .split("/")
+        .filter(Boolean)
+        .map((segment) => {
+          try {
+            return decodeURIComponent(segment);
+          } catch {
+            return segment;
+          }
+        })
+        .join("/")
+    : "";
+  const selectedNavId = isBrowseRoute
+    ? "browse"
+    : location === "/telegram"
+    ? ""
+    : location.startsWith("/providers")
+    ? "providers"
+    : location.startsWith("/watchdog")
+    ? "watchdog"
+    : location.startsWith("/usage")
+    ? "usage"
+    : location.startsWith("/envars")
+    ? "envars"
+    : location.startsWith("/webhooks")
+    ? "webhooks"
+    : "general";
+
+  useEffect(() => {
+    setSidebarTab((currentTab) => {
+      if (location.startsWith("/browse")) return "browse";
+      if (currentTab === "browse") return "menu";
+      return currentTab;
+    });
+  }, [location]);
+
+  useEffect(() => {
+    if (location.startsWith("/browse")) return;
+    setBrowsePreviewPath("");
+  }, [location]);
+
+  useEffect(() => {
+    if (location.startsWith("/browse")) return;
+    if (location === "/telegram") return;
+    setLastMenuRoute((currentRoute) =>
+      currentRoute === location ? currentRoute : location,
+    );
+  }, [location]);
+
+  useEffect(() => {
+    if (!isBrowseRoute) return;
+    if (!selectedBrowsePath) return;
+    setLastBrowsePath((currentPath) =>
+      currentPath === selectedBrowsePath ? currentPath : selectedBrowsePath,
+    );
+  }, [isBrowseRoute, selectedBrowsePath]);
+
+  useEffect(() => {
+    const settings = readUiSettings();
+    settings.sidebarWidthPx = sidebarWidthPx;
+    settings[kBrowseLastPathUiSettingKey] = lastBrowsePath;
+    settings[kLastMenuRouteUiSettingKey] = lastMenuRoute;
+    writeUiSettings(settings);
+  }, [sidebarWidthPx, lastBrowsePath, lastMenuRoute]);
+
+  const resizeSidebarWithClientX = useCallback((clientX) => {
+    const shellElement = appShellRef.current;
+    if (!shellElement) return;
+    const shellBounds = shellElement.getBoundingClientRect();
+    const nextWidth = clampSidebarWidth(Math.round(clientX - shellBounds.left));
+    setSidebarWidthPx(nextWidth);
+  }, []);
+
+  const onSidebarResizerPointerDown = (event) => {
+    event.preventDefault();
+    setIsResizingSidebar(true);
+    resizeSidebarWithClientX(event.clientX);
+  };
+
+  useEffect(() => {
+    if (!isResizingSidebar) return () => {};
+    const onPointerMove = (event) => resizeSidebarWithClientX(event.clientX);
+    const onPointerUp = () => setIsResizingSidebar(false);
+    window.addEventListener("pointermove", onPointerMove);
+    window.addEventListener("pointerup", onPointerUp);
+    const previousUserSelect = document.body.style.userSelect;
+    const previousCursor = document.body.style.cursor;
+    document.body.style.userSelect = "none";
+    document.body.style.cursor = "col-resize";
+    return () => {
+      window.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("pointerup", onPointerUp);
+      document.body.style.userSelect = previousUserSelect;
+      document.body.style.cursor = previousCursor;
+    };
+  }, [isResizingSidebar, resizeSidebarWithClientX]);
 
   const renderWebhooks = (hookName = "") => html`
     <div class="pt-4">
@@ -626,91 +779,54 @@ const App = () => {
   `;
 
   return html`
-    <div class="app-shell">
+    <div
+      class="app-shell"
+      ref=${appShellRef}
+      style=${{ "--sidebar-width": `${sidebarWidthPx}px` }}
+    >
       <${GlobalRestartBanner}
         visible=${restartRequired}
         restarting=${restartingGateway}
         onRestart=${handleGatewayRestart}
       />
-      <div class=${`app-sidebar ${mobileSidebarOpen ? "mobile-open" : ""}`}>
-        <div class="sidebar-brand">
-          <img src="./img/logo.svg" alt="" width="20" height="20" />
-          <span><span style="color: var(--accent)">alpha</span>claw</span>
-          ${authEnabled && html`
-            <div class="brand-menu" ref=${menuRef}>
-              <button
-                class="brand-menu-trigger"
-                onclick=${() => setMenuOpen((o) => !o)}
-                aria-label="Menu"
-              >
-                <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
-                  <circle cx="8" cy="3" r="1.5" />
-                  <circle cx="8" cy="8" r="1.5" />
-                  <circle cx="8" cy="13" r="1.5" />
-                </svg>
-              </button>
-              ${menuOpen && html`
-                <div class="brand-dropdown">
-                  <a
-                    href="#"
-                    onclick=${async (e) => {
-                      e.preventDefault();
-                      setMenuOpen(false);
-                      await logout();
-                      try {
-                        window.localStorage.clear();
-                        window.sessionStorage.clear();
-                      } catch {}
-                      window.location.href = "/login.html";
-                    }}
-                  >Log out</a>
-                </div>
-              `}
-            </div>
-          `}
-        </div>
-        ${kNavSections.map(
-          (section) => html`
-            <div class="sidebar-label">${section.label}</div>
-            <nav class="sidebar-nav">
-              ${section.items.map(
-                (item) => html`
-                  <a
-                    class=${selectedNavId === item.id ? "active" : ""}
-                    onclick=${() => {
-                      setLocation(`/${item.id}`);
-                      setMobileSidebarOpen(false);
-                    }}
-                  >
-                    ${item.label}
-                  </a>
-                `,
-              )}
-            </nav>
-          `,
-        )}
-        <div class="sidebar-footer">
-          ${acHasUpdate && acLatest && !acDismissed
-            ? html`
-                <${UpdateActionButton}
-                  onClick=${handleAcUpdate}
-                  loading=${acUpdating}
-                  warning=${true}
-                  idleLabel=${`Update to v${acLatest}`}
-                  loadingLabel="Updating..."
-                  className="w-full justify-center"
-                />
-              `
-            : null}
-        </div>
-      </div>
+      <${AppSidebar}
+        mobileSidebarOpen=${mobileSidebarOpen}
+        authEnabled=${authEnabled}
+        menuRef=${menuRef}
+        menuOpen=${menuOpen}
+        onToggleMenu=${() => setMenuOpen((open) => !open)}
+        onLogout=${handleSidebarLogout}
+        sidebarTab=${sidebarTab}
+        onSelectSidebarTab=${handleSelectSidebarTab}
+        navSections=${kNavSections}
+        selectedNavId=${selectedNavId}
+        onSelectNavItem=${handleSelectNavItem}
+        selectedBrowsePath=${selectedBrowsePath}
+        onSelectBrowseFile=${navigateToBrowseFile}
+        onPreviewBrowseFile=${setBrowsePreviewPath}
+        acHasUpdate=${acHasUpdate}
+        acLatest=${acLatest}
+        acDismissed=${acDismissed}
+        acUpdating=${acUpdating}
+        onAcUpdate=${handleAcUpdate}
+      />
+      <div
+        class=${`sidebar-resizer ${isResizingSidebar ? "is-resizing" : ""}`}
+        onpointerdown=${onSidebarResizerPointerDown}
+        role="separator"
+        aria-orientation="vertical"
+        aria-label="Resize sidebar"
+      ></div>
 
       <div
         class=${`mobile-sidebar-overlay ${mobileSidebarOpen ? "active" : ""}`}
         onclick=${() => setMobileSidebarOpen(false)}
       />
 
-      <div class="app-content" onscroll=${handleAppContentScroll}>
+      <div
+        class=${`app-content ${isBrowseRoute ? "browse-mode" : ""}`}
+        onscroll=${handleAppContentScroll}
+      >
         <div class=${`mobile-topbar ${mobileTopbarScrolled ? "is-scrolled" : ""}`}>
           <button
             class="mobile-topbar-menu"
@@ -728,61 +844,95 @@ const App = () => {
             <span style="color: var(--accent)">alpha</span>claw
           </span>
         </div>
-        <div class="max-w-2xl w-full mx-auto">
-          <${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}
-                />
-              </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}
+        <div class=${isBrowseRoute ? "w-full" : "max-w-2xl w-full mx-auto"}>
+          ${isBrowseRoute
+            ? html`
+                <${FileViewer}
+                  filePath=${browsePreviewPath || selectedBrowsePath}
+                  isPreviewOnly=${Boolean(
+                    browsePreviewPath &&
+                      browsePreviewPath !== selectedBrowsePath,
+                  )}
                 />
-              </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}>
+              `
+            : 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}
+                      />
+                    </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}
+                      />
+                    </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}
+                        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}>
+              `}
         </div>
         <${ToastContainer}
           className="fixed bottom-10 right-4 z-50 space-y-2 pointer-events-none"

package/lib/public/js/components/action-button.js

@@ -43,6 +43,8 @@ export const ActionButton = ({
   loadingLabel = "Working...",
   loadingMode = "replace",
   className = "",
+  idleIcon = null,
+  idleIconClassName = "h-3 w-3",
 }) => {
   const isDisabled = disabled || loading;
   const isInteractive = !isDisabled;
@@ -57,7 +59,16 @@ export const ActionButton = ({
     : "";
   const spinnerSizeClass = size === "md" || size === "lg" ? "h-4 w-4" : "h-3 w-3";
   const isInlineLoading = loadingMode === "inline";
-  const currentLabel = loading && !isInlineLoading ? loadingLabel : idleLabel;
+  const IdleIcon = idleIcon;
+  const idleContent = IdleIcon
+    ? html`
+        <span class="inline-flex items-center gap-1.5 leading-none">
+          <${IdleIcon} className=${idleIconClassName} />
+          ${idleLabel}
+        </span>
+      `
+    : idleLabel;
+  const currentLabel = loading && !isInlineLoading ? loadingLabel : idleContent;
 
   return html`
     <button