@chrysb/alphaclaw 0.4.0 → 0.4.1-beta.0

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

@@ -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,7 +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));
@@ -99,6 +124,7 @@ const GeneralTab = ({
   onRefreshStatuses = () => {},
   onSwitchTab,
   onNavigate,
+  onOpenGmailWebhook = () => {},
   isActive,
   restartingGateway,
   onRestartGateway,
@@ -106,6 +132,7 @@ const GeneralTab = ({
   openclawUpdateInProgress = false,
   onOpenclawVersionActionComplete = () => {},
   onOpenclawUpdate,
+  onRestartRequired = () => {},
 }) => {
   const [dashboardLoading, setDashboardLoading] = useState(false);
   const [repairingWatchdog, setRepairingWatchdog] = useState(false);
@@ -279,7 +306,11 @@ const GeneralTab = ({
         onReject=${handleReject}
       />
       <${Features} onSwitchTab=${onSwitchTab} />
-      <${Google} gatewayStatus=${gatewayStatus} />
+      <${Google}
+        gatewayStatus=${gatewayStatus}
+        onRestartRequired=${onRestartRequired}
+        onOpenGmailWebhook=${onOpenGmailWebhook}
+      />
 
       ${repo &&
       html`
@@ -420,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,
   });
@@ -433,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();
@@ -536,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);
@@ -543,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");
@@ -782,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;
@@ -865,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>
   `;
@@ -878,7 +951,7 @@ const App = () => {
       style=${{ "--sidebar-width": `${sidebarWidthPx}px` }}
     >
       <${GlobalRestartBanner}
-        visible=${restartRequired}
+        visible=${isAnyRestartRequired}
         restarting=${restartingGateway}
         onRestart=${handleGatewayRestart}
       />
@@ -969,6 +1042,7 @@ const App = () => {
                   onRefreshStatuses=${refreshSharedStatuses}
                   onSwitchTab=${(nextTab) => setLocation(`/${nextTab}`)}
                   onNavigate=${navigateToSubScreen}
+                  onOpenGmailWebhook=${() => setLocation("/webhooks/gmail")}
                   isActive=${location === "/general"}
                   restartingGateway=${restartingGateway}
                   onRestartGateway=${handleGatewayRestart}
@@ -976,6 +1050,7 @@ const App = () => {
                   openclawUpdateInProgress=${openclawUpdateInProgress}
                   onOpenclawVersionActionComplete=${handleOpenclawVersionActionComplete}
                   onOpenclawUpdate=${handleOpenclawUpdate}
+                  onRestartRequired=${setRestartRequired}
                 />
               </div>
             </div>
@@ -1050,7 +1125,7 @@ const App = () => {
           </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>
 

package/lib/public/js/components/file-viewer/editor-surface.js

@@ -8,6 +8,7 @@ const EditorTextarea = ({
   editorTextareaRef,
   renderContent,
   handleContentInput,
+  handleEditorKeyDown,
   handleEditorScroll,
   handleEditorSelectionChange,
   isEditBlocked,
@@ -18,6 +19,7 @@ const EditorTextarea = ({
     ref=${editorTextareaRef}
     value=${renderContent}
     onInput=${handleContentInput}
+    onKeyDown=${handleEditorKeyDown}
     onScroll=${handleEditorScroll}
     onSelect=${handleEditorSelectionChange}
     onKeyUp=${handleEditorSelectionChange}
@@ -48,6 +50,7 @@ export const EditorSurface = ({
   editorTextareaRef,
   renderContent,
   handleContentInput,
+  handleEditorKeyDown,
   handleEditorScroll,
   handleEditorSelectionChange,
   isEditBlocked,
@@ -97,6 +100,7 @@ export const EditorSurface = ({
               editorTextareaRef=${editorTextareaRef}
               renderContent=${renderContent}
               handleContentInput=${handleContentInput}
+              handleEditorKeyDown=${handleEditorKeyDown}
               handleEditorScroll=${handleEditorScroll}
               handleEditorSelectionChange=${handleEditorSelectionChange}
               isEditBlocked=${isEditBlocked}
@@ -110,6 +114,7 @@ export const EditorSurface = ({
             editorTextareaRef=${editorTextareaRef}
             renderContent=${renderContent}
             handleContentInput=${handleContentInput}
+            handleEditorKeyDown=${handleEditorKeyDown}
             handleEditorScroll=${handleEditorScroll}
             handleEditorSelectionChange=${handleEditorSelectionChange}
             isEditBlocked=${isEditBlocked}

package/lib/public/js/components/file-viewer/index.js

@@ -52,6 +52,7 @@ export const FileViewer = ({
         viewMode=${state.viewMode}
         handleChangeViewMode=${actions.handleChangeViewMode}
         handleSave=${actions.handleSave}
+        handleDiscard=${actions.handleDiscard}
         loading=${state.loading}
         canEditFile=${derived.canEditFile}
         isEditBlocked=${derived.isEditBlocked}
@@ -153,6 +154,7 @@ export const FileViewer = ({
                               editorTextareaRef=${refs.editorTextareaRef}
                               renderContent=${state.renderContent}
                               handleContentInput=${actions.handleContentInput}
+                              handleEditorKeyDown=${actions.handleEditorKeyDown}
                               handleEditorScroll=${actions.handleEditorScroll}
                               handleEditorSelectionChange=${actions.handleEditorSelectionChange}
                               isEditBlocked=${derived.isEditBlocked}
@@ -171,6 +173,7 @@ export const FileViewer = ({
                               editorTextareaRef=${refs.editorTextareaRef}
                               renderContent=${state.renderContent}
                               handleContentInput=${actions.handleContentInput}
+                              handleEditorKeyDown=${actions.handleEditorKeyDown}
                               handleEditorScroll=${actions.handleEditorScroll}
                               handleEditorSelectionChange=${actions.handleEditorSelectionChange}
                               isEditBlocked=${derived.isEditBlocked}

package/lib/public/js/components/file-viewer/markdown-split-view.js

@@ -18,6 +18,7 @@ export const MarkdownSplitView = ({
   editorTextareaRef,
   renderContent,
   handleContentInput,
+  handleEditorKeyDown,
   handleEditorScroll,
   handleEditorSelectionChange,
   isEditBlocked,
@@ -43,6 +44,7 @@ export const MarkdownSplitView = ({
     editorTextareaRef=${editorTextareaRef}
     renderContent=${renderContent}
     handleContentInput=${handleContentInput}
+    handleEditorKeyDown=${handleEditorKeyDown}
     handleEditorScroll=${handleEditorScroll}
     handleEditorSelectionChange=${handleEditorSelectionChange}
     isEditBlocked=${isEditBlocked}

package/lib/public/js/components/file-viewer/toolbar.js

@@ -15,6 +15,7 @@ export const FileViewerToolbar = ({
   viewMode,
   handleChangeViewMode,
   handleSave,
+  handleDiscard,
   loading,
   canEditFile,
   isEditBlocked,
@@ -84,6 +85,18 @@ export const FileViewerToolbar = ({
                   </button>
                 `
               : null}
+            ${isDirty
+              ? html`
+                  <${ActionButton}
+                    onClick=${handleDiscard}
+                    disabled=${loading || !canEditFile || isEditBlocked || deleting || saving}
+                    tone="secondary"
+                    size="sm"
+                    idleLabel="Discard changes"
+                    className="file-viewer-save-action"
+                  />
+                `
+              : null}
             <${ActionButton}
               onClick=${handleSave}
               disabled=${loading || !isDirty || !canEditFile || isEditBlocked}

package/lib/public/js/components/file-viewer/use-file-viewer.js

@@ -265,7 +265,6 @@ export const useFileViewer = ({
           detail: { path: normalizedPath },
         }),
       );
-      showToast("Saved", "success");
     } catch (saveError) {
       const message = saveError.message || "Could not save file";
       setError(message);
@@ -366,22 +365,56 @@ export const useFileViewer = ({
     });
   };
 
-  const handleContentInput = (event) => {
-    if (isEditBlocked || isPreviewOnly) return;
-    const nextContent = event.target.value;
-    setContent(nextContent);
-    if (hasSelectedPath && canEditFile) {
-      writeStoredEditorSelection(normalizedPath, {
-        start: event.target.selectionStart,
-        end: event.target.selectionEnd,
-      });
-    }
-    if (hasSelectedPath && canEditFile) {
+  const persistDraftForContent = useCallback(
+    (nextContent, selection = null) => {
+      if (!hasSelectedPath || !canEditFile) return;
+      if (selection) {
+        writeStoredEditorSelection(normalizedPath, selection);
+      }
       writeStoredFileDraft(normalizedPath, nextContent);
       updateDraftIndex(normalizedPath, nextContent !== initialContent, {
         dispatchEvent: (event) => window.dispatchEvent(event),
       });
-    }
+    },
+    [hasSelectedPath, canEditFile, normalizedPath, initialContent],
+  );
+
+  const handleContentInput = (event) => {
+    if (isEditBlocked || isPreviewOnly) return;
+    const nextContent = event.target.value;
+    setContent(nextContent);
+    persistDraftForContent(nextContent, {
+      start: event.target.selectionStart,
+      end: event.target.selectionEnd,
+    });
+  };
+
+  const handleEditorKeyDown = (event) => {
+    if (event.key !== "Tab") return;
+    if (event.shiftKey || event.metaKey || event.ctrlKey || event.altKey) return;
+    if (isEditBlocked || isPreviewOnly || !canEditFile) return;
+    const textareaElement = event.currentTarget;
+    if (!textareaElement) return;
+    event.preventDefault();
+    const start = Number(textareaElement.selectionStart || 0);
+    const end = Number(textareaElement.selectionEnd || 0);
+    textareaElement.setRangeText("  ", start, end, "end");
+    const nextContent = textareaElement.value;
+    setContent(nextContent);
+    persistDraftForContent(nextContent, {
+      start: textareaElement.selectionStart,
+      end: textareaElement.selectionEnd,
+    });
+  };
+
+  const handleDiscard = () => {
+    if (!canEditFile || !isDirty || saving || deleting) return;
+    setContent(initialContent);
+    clearStoredFileDraft(normalizedPath);
+    updateDraftIndex(normalizedPath, false, {
+      dispatchEvent: (event) => window.dispatchEvent(event),
+    });
+    showToast("Changes discarded", "info");
   };
 
   const handleEditorSelectionChange = () => {
@@ -456,10 +489,12 @@ export const useFileViewer = ({
       setSqliteTableOffset,
       handleChangeViewMode,
       handleSave,
+      handleDiscard,
       handleDelete,
       handleRestore,
       handleEditProtectedFile,
       handleContentInput,
+      handleEditorKeyDown,
       handleEditorScroll,
       handlePreviewScroll,
       handleEditorSelectionChange,

package/lib/public/js/components/google/account-row.js

@@ -2,6 +2,7 @@ import { h } from "https://esm.sh/preact";
 import htm from "https://esm.sh/htm";
 import { Badge } from "../badge.js";
 import { ScopePicker } from "../scope-picker.js";
+import { GmailWatchToggle } from "./gmail-watch-toggle.js";
 
 const html = htm.bind(h);
 
@@ -22,10 +23,16 @@ export const GoogleAccountRow = ({
   onUpdatePermissions,
   onEditCredentials,
   onDisconnect,
+  gmailWatchStatus = null,
+  gmailWatchBusy = false,
+  onEnableGmailWatch,
+  onDisableGmailWatch,
+  onOpenGmailSetup,
+  onOpenGmailWebhook,
 }) => {
   const scopesChanged = !scopeListsEqual(scopes, savedScopes);
   return html`
-    <div class="border border-border rounded-lg bg-black/20 overflow-hidden">
+    <div class="border border-border rounded-lg bg-black/20 overflow-visible">
       <button
         type="button"
         onclick=${() => onToggleExpanded?.(account.id)}
@@ -64,6 +71,32 @@ export const GoogleAccountRow = ({
                 apiStatus=${account.authenticated ? apiStatus : {}}
                 loading=${account.authenticated && checkingApis}
               />
+              ${account.authenticated
+                ? html`
+                    <div class="-mx-3 mt-4 mb-2 border-y border-border">
+                      <div class="px-3 py-3 space-y-2">
+                        <div class="flex justify-between items-center gap-2">
+                          <span class="text-sm text-gray-400">Incoming events</span>
+                          <button
+                            type="button"
+                            onclick=${() => onOpenGmailSetup?.(account.id)}
+                            class="text-xs px-2 py-1 rounded-lg ac-btn-ghost"
+                          >
+                            Configure
+                          </button>
+                        </div>
+                        <${GmailWatchToggle}
+                          account=${account}
+                          watchStatus=${gmailWatchStatus}
+                          busy=${gmailWatchBusy}
+                          onEnable=${() => onEnableGmailWatch?.(account.id)}
+                          onDisable=${() => onDisableGmailWatch?.(account.id)}
+                          onOpenWebhook=${() => onOpenGmailWebhook?.()}
+                        />
+                      </div>
+                    </div>
+                  `
+                : null}
               <div class="pt-1 space-y-2 sm:space-y-0 sm:flex sm:justify-between sm:items-center">
                 <div class="grid grid-cols-2 gap-2 w-full sm:w-auto sm:flex sm:items-center">
                   <button