@chrysb/alphaclaw 0.4.0 → 0.4.1-beta.1

package/lib/public/js/components/google/index.js

@@ -1,9 +1,15 @@
 import { h } from "https://esm.sh/preact";
-import { useCallback, useEffect, useMemo, useState } from "https://esm.sh/preact/hooks";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
 import {
   checkGoogleApis,
   disconnectGoogle,
+  fetchGoogleCredentials,
   saveGoogleAccount,
 } from "../../lib/api.js";
 import { getDefaultScopes, toggleScopeLogic } from "../scope-picker.js";
@@ -15,6 +21,8 @@ import { ActionButton } from "../action-button.js";
 import { GoogleAccountRow } from "./account-row.js";
 import { AddGoogleAccountModal } from "./add-account-modal.js";
 import { useGoogleAccounts } from "./use-google-accounts.js";
+import { useGmailWatch } from "./use-gmail-watch.js";
+import { GmailSetupWizard } from "./gmail-setup-wizard.js";
 
 const html = htm.bind(h);
 
@@ -26,13 +34,13 @@ const isPersonalAccount = (account = {}) => Boolean(account.personal);
 
 const kGoogleIconPath = "/assets/icons/google_icon.svg";
 
-export const Google = ({ gatewayStatus }) => {
-  const {
-    accounts,
-    loading,
-    hasCompanyCredentials,
-    refreshAccounts,
-  } = useGoogleAccounts({ gatewayStatus });
+export const Google = ({
+  gatewayStatus,
+  onRestartRequired = () => {},
+  onOpenGmailWebhook = () => {},
+}) => {
+  const { accounts, loading, hasCompanyCredentials, refreshAccounts } =
+    useGoogleAccounts({ gatewayStatus });
   const [expandedAccountId, setExpandedAccountId] = useState("");
   const [scopesByAccountId, setScopesByAccountId] = useState({});
   const [savedScopesByAccountId, setSavedScopesByAccountId] = useState({});
@@ -52,6 +60,21 @@ export const Google = ({ gatewayStatus }) => {
   const [addCompanyModalOpen, setAddCompanyModalOpen] = useState(false);
   const [savingAddCompany, setSavingAddCompany] = useState(false);
   const [disconnectAccountId, setDisconnectAccountId] = useState("");
+  const [gmailWizardState, setGmailWizardState] = useState({
+    visible: false,
+    accountId: "",
+  });
+  const {
+    loading: gmailLoading,
+    watchByAccountId,
+    clientConfigByClient,
+    busyByAccountId,
+    savingClient,
+    refresh: refreshGmailWatch,
+    saveClientSetup,
+    startWatchForAccount,
+    stopWatchForAccount,
+  } = useGmailWatch({ gatewayStatus, accounts });
 
   const hasPersonalAccount = useMemo(
     () => accounts.some((account) => isPersonalAccount(account)),
@@ -68,12 +91,16 @@ export const Google = ({ gatewayStatus }) => {
   );
 
   const ensureScopesForAccount = useCallback((account) => {
-    const nextScopes = Array.isArray(account.activeScopes) && account.activeScopes.length
-      ? account.activeScopes
-      : Array.isArray(account.services) && account.services.length
-        ? account.services
-        : getDefaultScopes();
-    setSavedScopesByAccountId((prev) => ({ ...prev, [account.id]: [...nextScopes] }));
+    const nextScopes =
+      Array.isArray(account.activeScopes) && account.activeScopes.length
+        ? account.activeScopes
+        : Array.isArray(account.services) && account.services.length
+          ? account.services
+          : getDefaultScopes();
+    setSavedScopesByAccountId((prev) => ({
+      ...prev,
+      [account.id]: [...nextScopes],
+    }));
     setScopesByAccountId((prev) => {
       const current = prev[account.id];
       if (!current || !hasScopesChanged(current, nextScopes)) {
@@ -103,7 +130,10 @@ export const Google = ({ gatewayStatus }) => {
     (accountId) => {
       const account = getAccountById(accountId);
       if (!account) return;
-      const scopes = scopesByAccountId[accountId] || account.activeScopes || getDefaultScopes();
+      const scopes =
+        scopesByAccountId[accountId] ||
+        account.activeScopes ||
+        getDefaultScopes();
       if (!scopes.length) {
         window.alert("Select at least one service");
         return;
@@ -138,7 +168,10 @@ export const Google = ({ gatewayStatus }) => {
     try {
       const data = await checkGoogleApis(accountId);
       if (data.results) {
-        setApiStatusByAccountId((prev) => ({ ...prev, [accountId]: data.results }));
+        setApiStatusByAccountId((prev) => ({
+          ...prev,
+          [accountId]: data.results,
+        }));
       }
     } finally {
       setCheckingByAccountId((prev) => {
@@ -157,16 +190,20 @@ export const Google = ({ gatewayStatus }) => {
         const accountId = String(event.data?.accountId || "").trim();
         setApiStatusByAccountId({});
         await refreshAccounts();
+        await refreshGmailWatch();
         if (accountId) {
           await handleCheckApis(accountId);
         }
       } else if (event.data?.google === "error") {
-        showToast(`✗ Google auth failed: ${event.data.message || "unknown"}`, "error");
+        showToast(
+          `✗ Google auth failed: ${event.data.message || "unknown"}`,
+          "error",
+        );
       }
     };
     window.addEventListener("message", handler);
     return () => window.removeEventListener("message", handler);
-  }, [handleCheckApis, refreshAccounts]);
+  }, [handleCheckApis, refreshAccounts, refreshGmailWatch]);
 
   useEffect(() => {
     if (!expandedAccountId) return;
@@ -197,6 +234,7 @@ export const Google = ({ gatewayStatus }) => {
       return next;
     });
     await refreshAccounts();
+    await refreshGmailWatch();
   };
 
   const openCredentialsModal = ({
@@ -225,6 +263,9 @@ export const Google = ({ gatewayStatus }) => {
   };
 
   const handleCredentialsSaved = async (account) => {
+    if (account?.id) {
+      setExpandedAccountId(account.id);
+    }
     await refreshAccounts();
     if (account?.id) startAuth(account.id);
   };
@@ -243,6 +284,9 @@ export const Google = ({ gatewayStatus }) => {
         return;
       }
       setAddCompanyModalOpen(false);
+      if (data.accountId) {
+        setExpandedAccountId(data.accountId);
+      }
       await refreshAccounts();
       if (data.accountId) startAuth(data.accountId);
     } finally {
@@ -276,40 +320,113 @@ export const Google = ({ gatewayStatus }) => {
     });
   };
 
-  const handleEditCredentials = (accountId) => {
+  const handleEditCredentials = async (accountId) => {
     const account = getAccountById(accountId);
     if (!account) return;
     const personal = isPersonalAccount(account);
+    const client = personal ? "personal" : account.client || "default";
+    let credentialValues = {};
+    try {
+      const credentialResponse = await fetchGoogleCredentials({
+        accountId: account.id,
+        client,
+      });
+      if (credentialResponse?.ok) {
+        credentialValues = {
+          clientId: String(credentialResponse.clientId || ""),
+          clientSecret: String(credentialResponse.clientSecret || ""),
+        };
+      }
+    } catch {
+      showToast("Could not load saved client credentials", "warning");
+    }
     openCredentialsModal({
       accountId: account.id,
-      client: personal ? "personal" : (account.client || "default"),
+      client,
       personal,
       title: `Edit Credentials (${account.email})`,
       submitLabel: "Save Credentials",
       defaultInstrType: personal ? "personal" : "workspace",
       initialValues: {
         email: account.email,
+        ...credentialValues,
       },
     });
   };
 
+  const openGmailSetupWizard = (accountId) => {
+    setGmailWizardState({
+      visible: true,
+      accountId: String(accountId || ""),
+    });
+  };
+
+  const closeGmailSetupWizard = () => {
+    setGmailWizardState({
+      visible: false,
+      accountId: "",
+    });
+  };
+
+  const handleEnableGmailWatch = async (accountId) => {
+    const account = getAccountById(accountId);
+    if (!account) return;
+    const client = String(account.client || "default").trim() || "default";
+    const clientConfig = clientConfigByClient.get(client);
+    if (!clientConfig?.configured) {
+      openGmailSetupWizard(accountId);
+      return;
+    }
+    try {
+      const result = await startWatchForAccount(accountId);
+      if (result?.restartRequired) {
+        onRestartRequired(true);
+      }
+      showToast("Gmail watch enabled", "success");
+    } catch (err) {
+      showToast(err.message || "Could not enable Gmail watch", "error");
+    }
+  };
+
+  const handleDisableGmailWatch = async (accountId) => {
+    try {
+      await stopWatchForAccount(accountId);
+      showToast("Gmail watch disabled", "info");
+    } catch (err) {
+      showToast(err.message || "Could not disable Gmail watch", "error");
+    }
+  };
+
+  const handleFinishGmailSetupWizard = async ({ client, projectId }) => {
+    const accountId = String(gmailWizardState.accountId || "").trim();
+    if (!accountId) return;
+    await saveClientSetup({
+      client,
+      projectId,
+      regeneratePushToken: false,
+    });
+    await startWatchForAccount(accountId);
+    showToast("Gmail setup complete and watch enabled", "success");
+  };
+
   const renderEmptyState = () => html`
-    <div class="text-center space-y-2 py-1">
+    <div class="text-center space-y-2 pt-3">
       <div class="rounded-lg border border-border bg-black/20 px-3 py-5">
-        <div class="flex flex-col items-center justify-center gap-1.5">
+        <div class="flex flex-col items-center justify-center gap-3">
           <img
             src=${kGoogleIconPath}
             alt="Google logo"
-            class="h-4 w-4 shrink-0"
+            class="h-5 w-5 shrink-0"
             loading="lazy"
             decoding="async"
           />
           <p class="text-xs text-gray-500">
-            Connect Gmail, Calendar, Contacts, Drive, Sheets, Tasks, Docs, and Meet.
+            Connect Gmail, Calendar, Contacts, Drive, Sheets, Tasks, Docs, and
+            Meet.
           </p>
         </div>
       </div>
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 pt-2">
         <${ActionButton}
           onClick=${handleAddCompanyClick}
           tone="primary"
@@ -373,28 +490,46 @@ export const Google = ({ gatewayStatus }) => {
         `}
       />
       ${loading
-        ? html`<div class="text-gray-500 text-sm text-center py-2">Loading...</div>`
+        ? html`<div class="text-gray-500 text-sm text-center py-2">
+            Loading...
+          </div>`
         : accounts.length
           ? html`
               <div class="space-y-2 mt-3">
-                ${accounts.map((account) =>
-                  html`<${GoogleAccountRow}
-                    key=${account.id}
-                    account=${account}
-                    personal=${isPersonalAccount(account)}
-                    expanded=${expandedAccountId === account.id}
-                    onToggleExpanded=${(accountId) =>
-                      setExpandedAccountId((prev) => (prev === accountId ? "" : accountId))}
-                    scopes=${scopesByAccountId[account.id] || account.activeScopes || getDefaultScopes()}
-                    savedScopes=${savedScopesByAccountId[account.id] || account.activeScopes || getDefaultScopes()}
-                    apiStatus=${apiStatusByAccountId[account.id] || {}}
-                    checkingApis=${expandedAccountId === account.id && Boolean(checkingByAccountId[account.id])}
-                    onToggleScope=${handleToggleScope}
-                    onCheckApis=${handleCheckApis}
-                    onUpdatePermissions=${(accountId) => startAuth(accountId)}
-                    onEditCredentials=${handleEditCredentials}
-                    onDisconnect=${(accountId) => setDisconnectAccountId(accountId)}
-                  />`,
+                ${accounts.map(
+                  (account) =>
+                    html`<${GoogleAccountRow}
+                      key=${account.id}
+                      account=${account}
+                      personal=${isPersonalAccount(account)}
+                      expanded=${expandedAccountId === account.id}
+                      onToggleExpanded=${(accountId) =>
+                        setExpandedAccountId((prev) =>
+                          prev === accountId ? "" : accountId,
+                        )}
+                      scopes=${scopesByAccountId[account.id] ||
+                      account.activeScopes ||
+                      getDefaultScopes()}
+                      savedScopes=${savedScopesByAccountId[account.id] ||
+                      account.activeScopes ||
+                      getDefaultScopes()}
+                      apiStatus=${apiStatusByAccountId[account.id] || {}}
+                      checkingApis=${expandedAccountId === account.id &&
+                      Boolean(checkingByAccountId[account.id])}
+                      onToggleScope=${handleToggleScope}
+                      onCheckApis=${handleCheckApis}
+                      onUpdatePermissions=${(accountId) => startAuth(accountId)}
+                      onEditCredentials=${handleEditCredentials}
+                      onDisconnect=${(accountId) =>
+                        setDisconnectAccountId(accountId)}
+                      gmailWatchStatus=${watchByAccountId.get(account.id) ||
+                      null}
+                      gmailWatchBusy=${Boolean(busyByAccountId[account.id])}
+                      onEnableGmailWatch=${handleEnableGmailWatch}
+                      onDisableGmailWatch=${handleDisableGmailWatch}
+                      onOpenGmailSetup=${openGmailSetupWizard}
+                      onOpenGmailWebhook=${onOpenGmailWebhook}
+                    />`,
                 )}
               </div>
             `
@@ -422,6 +557,20 @@ export const Google = ({ gatewayStatus }) => {
       title="Add Company Account"
     />
 
+    <${GmailSetupWizard}
+      visible=${gmailWizardState.visible}
+      account=${getAccountById(gmailWizardState.accountId)}
+      clientConfig=${clientConfigByClient.get(
+        String(
+          getAccountById(gmailWizardState.accountId)?.client || "default",
+        ).trim() || "default",
+      ) || null}
+      saving=${savingClient || gmailLoading}
+      onClose=${closeGmailSetupWizard}
+      onSaveSetup=${saveClientSetup}
+      onFinish=${handleFinishGmailSetupWizard}
+    />
+
     <${ConfirmDialog}
       visible=${Boolean(disconnectAccountId)}
       title="Disconnect Google account?"

package/lib/public/js/components/google/use-gmail-watch.js

@@ -0,0 +1,140 @@
+import { useCallback, useEffect, useMemo, useState } from "https://esm.sh/preact/hooks";
+import {
+  fetchGmailConfig,
+  renewGmailWatch,
+  saveGmailConfig,
+  startGmailWatch,
+  stopGmailWatch,
+} from "../../lib/api.js";
+
+export const useGmailWatch = ({ gatewayStatus, accounts = [] }) => {
+  const [loading, setLoading] = useState(true);
+  const [config, setConfig] = useState(null);
+  const [busyByAccountId, setBusyByAccountId] = useState({});
+  const [savingClient, setSavingClient] = useState(false);
+
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    try {
+      const nextConfig = await fetchGmailConfig();
+      setConfig(nextConfig);
+      return nextConfig;
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (gatewayStatus !== "running") return;
+    refresh();
+  }, [gatewayStatus, refresh]);
+
+  useEffect(() => {
+    if (gatewayStatus !== "running") return;
+    if (!accounts.length) return;
+    refresh();
+  }, [accounts, gatewayStatus, refresh]);
+
+  const watchByAccountId = useMemo(() => {
+    const map = new Map();
+    for (const entry of config?.accounts || []) {
+      map.set(String(entry.accountId || ""), entry);
+    }
+    return map;
+  }, [config]);
+
+  const clientConfigByClient = useMemo(() => {
+    const map = new Map();
+    for (const clientConfig of config?.clients || []) {
+      map.set(String(clientConfig.client || "default"), clientConfig);
+    }
+    return map;
+  }, [config]);
+
+  const setBusy = (accountId, busy) => {
+    setBusyByAccountId((prev) => {
+      const key = String(accountId || "");
+      if (!key) return prev;
+      if (busy) return { ...prev, [key]: true };
+      if (!prev[key]) return prev;
+      const next = { ...prev };
+      delete next[key];
+      return next;
+    });
+  };
+
+  const startWatchForAccount = useCallback(async (accountId) => {
+    const key = String(accountId || "");
+    setBusy(key, true);
+    try {
+      const data = await startGmailWatch(key);
+      await refresh();
+      return data;
+    } finally {
+      setBusy(key, false);
+    }
+  }, [refresh]);
+
+  const stopWatchForAccount = useCallback(async (accountId) => {
+    const key = String(accountId || "");
+    setBusy(key, true);
+    try {
+      await stopGmailWatch(key);
+      await refresh();
+    } finally {
+      setBusy(key, false);
+    }
+  }, [refresh]);
+
+  const renewForAccount = useCallback(async (accountId = "") => {
+    const key = String(accountId || "");
+    if (key) setBusy(key, true);
+    try {
+      await renewGmailWatch({ accountId: key, force: true });
+      await refresh();
+    } finally {
+      if (key) setBusy(key, false);
+    }
+  }, [refresh]);
+
+  const saveClientSetup = useCallback(async ({
+    client = "default",
+    projectId = "",
+    regeneratePushToken = false,
+  } = {}) => {
+    setSavingClient(true);
+    try {
+      const data = await saveGmailConfig({
+        client,
+        projectId,
+        regeneratePushToken,
+      });
+      await refresh();
+      return data;
+    } catch (err) {
+      const message = String(err?.message || "");
+      if (message.toLowerCase().includes("not found")) {
+        throw new Error(
+          "Gmail watch API route not found. Restart AlphaClaw so /api/gmail routes are loaded.",
+        );
+      }
+      throw err;
+    } finally {
+      setSavingClient(false);
+    }
+  }, [refresh]);
+
+  return {
+    loading,
+    config,
+    watchByAccountId,
+    clientConfigByClient,
+    busyByAccountId,
+    savingClient,
+    refresh,
+    saveClientSetup,
+    startWatchForAccount,
+    stopWatchForAccount,
+    renewForAccount,
+  };
+};

package/lib/public/js/components/scope-picker.js

@@ -68,7 +68,7 @@ export function ScopePicker({ scopes, onToggle, apiStatus, loading }) {
       <button
         type="button"
         onclick=${() => setShowAll((prev) => !prev)}
-        class="text-xs text-gray-500 hover:text-gray-300"
+        class="ml-3 text-xs text-gray-500 hover:text-gray-300"
       >
         ${showAll ? 'Show fewer services' : `Show more services (${SERVICES.length - kVisibleCount})`}
       </button>

package/lib/public/js/components/sidebar-git-panel.js

@@ -2,6 +2,7 @@ import { h } from "https://esm.sh/preact";
 import { useEffect, useState } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
 import { fetchBrowseGitSummary, syncBrowseChanges } from "../lib/api.js";
+import { formatLocaleDateTime } from "../lib/format.js";
 import { ActionButton } from "./action-button.js";
 import { GitBranchLineIcon, GithubFillIcon } from "./icons.js";
 import { LoadingSpinner } from "./loading-spinner.js";
@@ -13,12 +14,10 @@ const kSyncCommitFileNameLimit = 4;
 const kCommitHistoryLimit = 12;
 
 const formatCommitTime = (unixSeconds) => {
-  if (!unixSeconds) return "";
-  try {
-    return new Date(unixSeconds * 1000).toLocaleString();
-  } catch {
-    return "";
-  }
+  return formatLocaleDateTime(unixSeconds, {
+    fallback: "",
+    valueIsUnixSeconds: true,
+  });
 };
 
 const getRepoName = (summary) => {

package/lib/public/js/components/sidebar.js

@@ -12,7 +12,7 @@ const kBrowseBottomPanelUiSettingKey = "browseBottomPanelHeightPx";
 const kBrowsePanelMinHeightPx = 120;
 const kBrowseBottomMinHeightPx = 120;
 const kBrowseResizerHeightPx = 6;
-const kDefaultBrowseBottomPanelHeightPx = 160;
+const kDefaultBrowseBottomPanelHeightPx = 260;
 
 const readStoredBrowseBottomPanelHeight = () => {
   try {
@@ -89,6 +89,8 @@ export const AppSidebar = ({
     const layoutElement = browseLayoutRef.current;
     if (!layoutElement || typeof ResizeObserver === "undefined") return () => {};
     const observer = new ResizeObserver(() => {
+      const layoutRect = layoutElement.getBoundingClientRect();
+      if (layoutRect.height <= 0) return;
       setBrowseBottomPanelHeightPx((currentHeight) =>
         getClampedBrowseBottomPanelHeight(currentHeight),
       );

package/lib/public/js/components/telegram-workspace/onboarding.js

@@ -116,7 +116,7 @@ export const CreateGroupStep = ({ onNext, onBack }) => html`
       <p class="text-xs font-medium text-gray-300">Create the group</p>
       <ol class="text-xs text-gray-400 space-y-2 list-decimal list-inside">
         <li>
-          Open Telegram and create a
+          Open Telegram and create a${" "}
           <span class="text-gray-300">new group</span>
         </li>
         <li>

package/lib/public/js/components/toast.js

@@ -1,5 +1,6 @@
 import { h } from 'https://esm.sh/preact';
 import { useState, useEffect } from 'https://esm.sh/preact/hooks';
+import { createPortal } from 'https://esm.sh/preact/compat';
 import htm from 'https://esm.sh/htm';
 const html = htm.bind(h);
 
@@ -50,11 +51,14 @@ export function ToastContainer({
 
   if (toasts.length === 0) return null;
 
-  return html`<div class=${className}>
-    ${toasts.map(t => html`
-      <div key=${t.id} class="${kToastClassByType[normalizeToastType(t.type)]} px-4 py-2 rounded-lg text-sm">
-        ${t.text}
-      </div>
-    `)}
-  </div>`;
+  return createPortal(
+    html`<div class=${className} style=${{ zIndex: 70 }}>
+      ${toasts.map(t => html`
+        <div key=${t.id} class="${kToastClassByType[normalizeToastType(t.type)]} px-4 py-2 rounded-lg text-sm">
+          ${t.text}
+        </div>
+      `)}
+    </div>`,
+    document.body,
+  );
 }

package/lib/public/js/components/usage-tab/constants.js

@@ -0,0 +1,31 @@
+export const kColorPalette = [
+  "#7dd3fc",
+  "#22d3ee",
+  "#34d399",
+  "#fbbf24",
+  "#fb7185",
+  "#a78bfa",
+  "#f472b6",
+  "#60a5fa",
+  "#4ade80",
+  "#f97316",
+];
+
+export const kBadgeToneClass = {
+  cyan: "border-cyan-400/30 text-cyan-300 bg-cyan-400/10",
+  blue: "border-blue-400/30 text-blue-300 bg-blue-400/10",
+  purple: "border-purple-400/30 text-purple-300 bg-purple-400/10",
+  gray: "border-gray-400/30 text-gray-400 bg-gray-400/10",
+};
+
+export const kRangeOptions = [
+  { label: "7d", value: 7 },
+  { label: "30d", value: 30 },
+  { label: "90d", value: 90 },
+];
+
+export const kDefaultUsageDays = 30;
+export const kDefaultUsageMetric = "tokens";
+export const kUsageDaysUiSettingKey = "usageDays";
+export const kUsageMetricUiSettingKey = "usageMetric";
+export const kUsageSourceOrder = ["chat", "hooks", "cron"];

package/lib/public/js/components/usage-tab/formatters.js

@@ -0,0 +1,24 @@
+import { kColorPalette } from "./constants.js";
+
+export const toLocalDayKey = (value) => {
+  const d = value instanceof Date ? value : new Date(value ?? Date.now());
+  const year = d.getFullYear();
+  const month = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+};
+
+export const toChartColor = (key) => {
+  const raw = String(key || "");
+  let hash = 0;
+  for (let index = 0; index < raw.length; index += 1) {
+    hash = ((hash << 5) - hash + raw.charCodeAt(index)) | 0;
+  }
+  return kColorPalette[Math.abs(hash) % kColorPalette.length];
+};
+
+export const renderSourceLabel = (source) => {
+  if (source === "hooks") return "Hooks";
+  if (source === "cron") return "Cron";
+  return "Chat";
+};