@chrysb/alphaclaw 0.3.2 → 0.3.3

package/lib/public/css/shell.css

@@ -2,7 +2,7 @@
 
 .app-shell {
   display: grid;
-  grid-template-columns: 220px 1fr;
+  grid-template-columns: 220px 0 minmax(0, 1fr);
   grid-template-rows: auto 1fr 24px;
   height: 100vh;
   position: relative;
@@ -42,6 +42,7 @@
 }
 
 .app-content {
+  grid-column: 3;
   grid-row: 2;
   overflow-y: auto;
   padding: 24px 32px;
@@ -52,16 +53,54 @@
 /* ── Sidebar ───────────────────────────────────── */
 
 .app-sidebar {
+  grid-column: 1;
   grid-row: 2;
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.012) 100%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.018) 0%, rgba(255, 255, 255, 0.006) 100%),
+    linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.16) 100%),
     var(--bg-sidebar);
-  border-right: 1px solid var(--border-strong);
+  border-right: 1px solid var(--border);
   overflow-y: auto;
   display: flex;
   flex-direction: column;
 }
 
+.sidebar-resizer {
+  grid-column: 2;
+  grid-row: 2;
+  cursor: col-resize;
+  position: relative;
+  width: 6px;
+  margin-left: -3px;
+  z-index: 4;
+}
+
+.sidebar-resizer::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 6px;
+  background: transparent;
+}
+
+.sidebar-resizer::after {
+  content: "";
+  position: absolute;
+  left: 2px;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: transparent;
+  transition: background 0.12s;
+}
+
+.sidebar-resizer:hover::after,
+.sidebar-resizer.is-resizing::after {
+  background: rgba(99, 235, 255, 0.55);
+}
+
 .sidebar-brand {
   padding: 16px;
   font-size: 14px;
@@ -122,7 +161,7 @@
 .sidebar-footer:empty { display: none; }
 
 .sidebar-footer:not(:empty) {
-  padding: 12px 16px;
+  padding: 0 16px 12px 16px;
   border-top: 1px solid var(--border);
 }
 
@@ -267,10 +306,15 @@
     transform: none;
   }
   .app-content {
+    grid-column: 1;
     grid-row: 2;
     padding: 0 14px 12px;
   }
 
+  .sidebar-resizer {
+    display: none;
+  }
+
   .mobile-topbar {
     display: flex;
     align-items: center;

package/lib/public/css/theme.css

@@ -1,6 +1,6 @@
 :root {
   --bg: #0d121b;
-  --bg-sidebar: #111826;
+  --bg-sidebar: #0f141f;
   --bg-content: #0f1521;
   --bg-hover: rgba(99, 235, 255, 0.05);
   --bg-active: rgba(99, 235, 255, 0.08);
@@ -12,6 +12,11 @@
   --accent: #63ebff;
   --accent-dim: rgba(99, 235, 255, 0.4);
   --accent-link: rgba(99, 235, 255, 0.6);
+  --orange: #d98a58;
+  --comment: #6a737d;
+  --keyword: #ff7b72;
+  --string: #a5d6ff;
+  --number: #79c0ff;
   --panel-bg-contrast: rgba(255, 255, 255, 0.028);
   --panel-border-contrast: rgba(255, 255, 255, 0.11);
   --field-bg-contrast: rgba(0, 0, 0, 0.3);

package/lib/public/icons/folder-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M4 5V19H20V7H11.5858L9.58579 5H4ZM12.4142 5H21C21.5523 5 22 5.44772 22 6V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H10.4142L12.4142 5Z"></path></svg>

package/lib/public/icons/hashtag.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+  <path d="M7.78428 14L8.2047 10H4V8H8.41491L8.94043 3H10.9514L10.4259 8H14.4149L14.9404 3H16.9514L16.4259 8H20V10H16.2157L15.7953 14H20V16H15.5851L15.0596 21H13.0486L13.5741 16H9.58509L9.05957 21H7.04855L7.57407 16H4V14H7.78428ZM9.7953 14H13.7843L14.2047 10H10.2157L9.7953 14Z"></path>
+</svg>

package/lib/public/icons/home-5-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13 19H19V9.97815L12 4.53371L5 9.97815V19H11V13H13V19ZM21 20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V9.48907C3 9.18048 3.14247 8.88917 3.38606 8.69972L11.3861 2.47749C11.7472 2.19663 12.2528 2.19663 12.6139 2.47749L20.6139 8.69972C20.8575 8.88917 21 9.18048 21 9.48907V20Z"></path></svg>

package/lib/public/icons/save-fill.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+  <path d="M18 21V13H6V21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3H17L21 7V20C21 20.5523 20.5523 21 20 21H18ZM16 21H8V15H16V21Z"></path>
+</svg>

package/lib/public/js/app.js

@@ -40,8 +40,32 @@ 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";
 const html = htm.bind(h);
 const kDefaultUiTab = "general";
+const kUiSettingsStorageKey = "alphaclaw.uiSettings";
+const kLegacyUiSettingsStorageKey = "alphaclawUiSettings";
+const kDefaultSidebarWidthPx = 220;
+const kSidebarMinWidthPx = 180;
+const kSidebarMaxWidthPx = 460;
+const kBrowseLastPathUiSettingKey = "browseLastPath";
+
+const clampSidebarWidth = (value) =>
+  Math.max(kSidebarMinWidthPx, Math.min(kSidebarMaxWidthPx, value));
+
+const readUiSettings = () => {
+  try {
+    const raw =
+      window.localStorage.getItem(kUiSettingsStorageKey) ||
+      window.localStorage.getItem(kLegacyUiSettingsStorageKey);
+    if (!raw) return {};
+    const parsed = JSON.parse(raw);
+    return parsed && typeof parsed === "object" ? parsed : {};
+  } catch {
+    return {};
+  }
+};
 
 const getHashPath = () => {
   const hash = window.location.hash.replace(/^#/, "");
@@ -158,16 +182,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 +380,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 +395,19 @@ 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 [isResizingSidebar, setIsResizingSidebar] = useState(false);
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
   const [mobileTopbarScrolled, setMobileTopbarScrolled] = useState(false);
   const [restartRequired, setRestartRequired] = useState(false);
@@ -568,10 +590,45 @@ 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) => {
+    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")) {
+      setLocation("/general");
+      return;
+    }
+    if (nextTab === "browse" && !location.startsWith("/browse")) {
+      setLocation(buildBrowseRoute(lastBrowsePath));
+    }
+  };
+  const handleSelectNavItem = (itemId) => {
+    setLocation(`/${itemId}`);
+    setMobileSidebarOpen(false);
+  };
   const exitSubScreen = () => {
     setLocation(`/${kDefaultUiTab}`);
     setMobileSidebarOpen(false);
@@ -601,18 +658,91 @@ 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("/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 (!isBrowseRoute) return;
+    if (!selectedBrowsePath) return;
+    setLastBrowsePath((currentPath) =>
+      currentPath === selectedBrowsePath ? currentPath : selectedBrowsePath,
+    );
+  }, [isBrowseRoute, selectedBrowsePath]);
+
+  useEffect(() => {
+    const settings = readUiSettings();
+    settings.sidebarWidthPx = sidebarWidthPx;
+    settings[kBrowseLastPathUiSettingKey] = lastBrowsePath;
+    try {
+      window.localStorage.setItem(kUiSettingsStorageKey, JSON.stringify(settings));
+    } catch {}
+  }, [sidebarWidthPx, lastBrowsePath]);
+
+  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 +756,53 @@ const App = () => {
   `;
 
   return html`
-    <div class="app-shell">
+    <div
+      class="app-shell"
+      ref=${appShellRef}
+      style=${{ gridTemplateColumns: `${sidebarWidthPx}px 0px minmax(0, 1fr)` }}
+    >
       <${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}
+        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 +820,70 @@ 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=${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="/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