@chrysb/alphaclaw 0.3.5-beta.1 → 0.4.0

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

@@ -0,0 +1,439 @@
+import { h } from "https://esm.sh/preact";
+import { useCallback, useEffect, useMemo, useState } from "https://esm.sh/preact/hooks";
+import htm from "https://esm.sh/htm";
+import {
+  checkGoogleApis,
+  disconnectGoogle,
+  saveGoogleAccount,
+} from "../../lib/api.js";
+import { getDefaultScopes, toggleScopeLogic } from "../scope-picker.js";
+import { CredentialsModal } from "../credentials-modal.js";
+import { ConfirmDialog } from "../confirm-dialog.js";
+import { showToast } from "../toast.js";
+import { PageHeader } from "../page-header.js";
+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";
+
+const html = htm.bind(h);
+
+const hasScopesChanged = (nextScopes = [], savedScopes = []) =>
+  nextScopes.length !== savedScopes.length ||
+  nextScopes.some((scope) => !savedScopes.includes(scope));
+
+const isPersonalAccount = (account = {}) => Boolean(account.personal);
+
+const kGoogleIconPath = "/assets/icons/google_icon.svg";
+
+export const Google = ({ gatewayStatus }) => {
+  const {
+    accounts,
+    loading,
+    hasCompanyCredentials,
+    refreshAccounts,
+  } = useGoogleAccounts({ gatewayStatus });
+  const [expandedAccountId, setExpandedAccountId] = useState("");
+  const [scopesByAccountId, setScopesByAccountId] = useState({});
+  const [savedScopesByAccountId, setSavedScopesByAccountId] = useState({});
+  const [apiStatusByAccountId, setApiStatusByAccountId] = useState({});
+  const [checkingByAccountId, setCheckingByAccountId] = useState({});
+  const [addMenuOpen, setAddMenuOpen] = useState(false);
+  const [credentialsModalState, setCredentialsModalState] = useState({
+    visible: false,
+    accountId: "",
+    client: "default",
+    personal: false,
+    title: "Connect Google Workspace",
+    submitLabel: "Connect Google",
+    defaultInstrType: "workspace",
+    initialValues: {},
+  });
+  const [addCompanyModalOpen, setAddCompanyModalOpen] = useState(false);
+  const [savingAddCompany, setSavingAddCompany] = useState(false);
+  const [disconnectAccountId, setDisconnectAccountId] = useState("");
+
+  const hasPersonalAccount = useMemo(
+    () => accounts.some((account) => isPersonalAccount(account)),
+    [accounts],
+  );
+  const hasCompanyAccount = useMemo(
+    () => accounts.some((account) => !isPersonalAccount(account)),
+    [accounts],
+  );
+
+  const getAccountById = useCallback(
+    (accountId) => accounts.find((account) => account.id === accountId) || null,
+    [accounts],
+  );
+
+  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] }));
+    setScopesByAccountId((prev) => {
+      const current = prev[account.id];
+      if (!current || !hasScopesChanged(current, nextScopes)) {
+        return { ...prev, [account.id]: [...nextScopes] };
+      }
+      return prev;
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!accounts.length) {
+      setExpandedAccountId("");
+      return;
+    }
+    const firstAwaitingSignInId =
+      accounts.find((account) => !account.authenticated)?.id || "";
+    setExpandedAccountId((previousId) => {
+      if (previousId && accounts.some((account) => account.id === previousId)) {
+        return previousId;
+      }
+      return firstAwaitingSignInId;
+    });
+    accounts.forEach((account) => ensureScopesForAccount(account));
+  }, [accounts, ensureScopesForAccount]);
+
+  const startAuth = useCallback(
+    (accountId) => {
+      const account = getAccountById(accountId);
+      if (!account) return;
+      const scopes = scopesByAccountId[accountId] || account.activeScopes || getDefaultScopes();
+      if (!scopes.length) {
+        window.alert("Select at least one service");
+        return;
+      }
+      const authUrl =
+        `/auth/google/start?accountId=${encodeURIComponent(accountId)}` +
+        `&services=${encodeURIComponent(scopes.join(","))}&_ts=${Date.now()}`;
+      const popup = window.open(
+        authUrl,
+        `google-auth-${accountId}`,
+        "popup=yes,width=500,height=700",
+      );
+      if (!popup || popup.closed) window.location.href = authUrl;
+    },
+    [getAccountById, scopesByAccountId],
+  );
+
+  const handleToggleScope = (accountId, scope) => {
+    setScopesByAccountId((prev) => ({
+      ...prev,
+      [accountId]: toggleScopeLogic(prev[accountId] || [], scope),
+    }));
+  };
+
+  const handleCheckApis = useCallback(async (accountId) => {
+    setApiStatusByAccountId((prev) => {
+      const next = { ...prev };
+      delete next[accountId];
+      return next;
+    });
+    setCheckingByAccountId({ [accountId]: true });
+    try {
+      const data = await checkGoogleApis(accountId);
+      if (data.results) {
+        setApiStatusByAccountId((prev) => ({ ...prev, [accountId]: data.results }));
+      }
+    } finally {
+      setCheckingByAccountId((prev) => {
+        if (!prev[accountId]) return prev;
+        const next = { ...prev };
+        delete next[accountId];
+        return next;
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    const handler = async (event) => {
+      if (event.data?.google === "success") {
+        showToast("✓ Google account connected", "success");
+        const accountId = String(event.data?.accountId || "").trim();
+        setApiStatusByAccountId({});
+        await refreshAccounts();
+        if (accountId) {
+          await handleCheckApis(accountId);
+        }
+      } else if (event.data?.google === "error") {
+        showToast(`✗ Google auth failed: ${event.data.message || "unknown"}`, "error");
+      }
+    };
+    window.addEventListener("message", handler);
+    return () => window.removeEventListener("message", handler);
+  }, [handleCheckApis, refreshAccounts]);
+
+  useEffect(() => {
+    if (!expandedAccountId) return;
+    const account = getAccountById(expandedAccountId);
+    if (!account?.authenticated) return;
+    if (checkingByAccountId[expandedAccountId]) return;
+    if (apiStatusByAccountId[expandedAccountId]) return;
+    handleCheckApis(expandedAccountId);
+  }, [
+    accounts,
+    apiStatusByAccountId,
+    checkingByAccountId,
+    expandedAccountId,
+    getAccountById,
+    handleCheckApis,
+  ]);
+
+  const handleDisconnect = async (accountId) => {
+    const data = await disconnectGoogle(accountId);
+    if (!data.ok) {
+      showToast(`Failed to disconnect: ${data.error || "unknown"}`, "error");
+      return;
+    }
+    showToast("Google account disconnected", "success");
+    setApiStatusByAccountId((prev) => {
+      const next = { ...prev };
+      delete next[accountId];
+      return next;
+    });
+    await refreshAccounts();
+  };
+
+  const openCredentialsModal = ({
+    accountId = "",
+    client = "default",
+    personal = false,
+    title = "Connect Google Workspace",
+    submitLabel = "Connect Google",
+    defaultInstrType = personal ? "personal" : "workspace",
+    initialValues = {},
+  }) => {
+    setCredentialsModalState({
+      visible: true,
+      accountId,
+      client,
+      personal,
+      title,
+      submitLabel,
+      defaultInstrType,
+      initialValues,
+    });
+  };
+
+  const closeCredentialsModal = () => {
+    setCredentialsModalState((prev) => ({ ...prev, visible: false }));
+  };
+
+  const handleCredentialsSaved = async (account) => {
+    await refreshAccounts();
+    if (account?.id) startAuth(account.id);
+  };
+
+  const handleAddCompanyAccount = async ({ email, setError }) => {
+    setSavingAddCompany(true);
+    try {
+      const data = await saveGoogleAccount({
+        email,
+        client: "default",
+        personal: false,
+        services: getDefaultScopes(),
+      });
+      if (!data.ok) {
+        setError?.(data.error || "Could not add account");
+        return;
+      }
+      setAddCompanyModalOpen(false);
+      await refreshAccounts();
+      if (data.accountId) startAuth(data.accountId);
+    } finally {
+      setSavingAddCompany(false);
+    }
+  };
+
+  const handleAddCompanyClick = () => {
+    setAddMenuOpen(false);
+    if (hasCompanyAccount && hasCompanyCredentials) {
+      setAddCompanyModalOpen(true);
+      return;
+    }
+    openCredentialsModal({
+      client: "default",
+      personal: false,
+      title: "Add Company Account",
+      submitLabel: "Save Credentials",
+      defaultInstrType: "workspace",
+    });
+  };
+
+  const handleAddPersonalClick = () => {
+    setAddMenuOpen(false);
+    openCredentialsModal({
+      client: "personal",
+      personal: true,
+      title: "Add Personal Account",
+      submitLabel: "Save Credentials",
+      defaultInstrType: "personal",
+    });
+  };
+
+  const handleEditCredentials = (accountId) => {
+    const account = getAccountById(accountId);
+    if (!account) return;
+    const personal = isPersonalAccount(account);
+    openCredentialsModal({
+      accountId: account.id,
+      client: personal ? "personal" : (account.client || "default"),
+      personal,
+      title: `Edit Credentials (${account.email})`,
+      submitLabel: "Save Credentials",
+      defaultInstrType: personal ? "personal" : "workspace",
+      initialValues: {
+        email: account.email,
+      },
+    });
+  };
+
+  const renderEmptyState = () => html`
+    <div class="text-center space-y-2 py-1">
+      <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">
+          <img
+            src=${kGoogleIconPath}
+            alt="Google logo"
+            class="h-4 w-4 shrink-0"
+            loading="lazy"
+            decoding="async"
+          />
+          <p class="text-xs text-gray-500">
+            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">
+        <${ActionButton}
+          onClick=${handleAddCompanyClick}
+          tone="primary"
+          size="sm"
+          idleLabel="Add Company Account"
+          className="w-full font-medium"
+        />
+        <${ActionButton}
+          onClick=${handleAddPersonalClick}
+          tone="secondary"
+          size="sm"
+          idleLabel="Add Personal Account"
+          className="w-full font-medium"
+        />
+      </div>
+    </div>
+  `;
+
+  return html`
+    <div class="bg-surface border border-border rounded-xl p-4">
+      <${PageHeader}
+        title="Google Accounts"
+        actions=${html`
+          ${accounts.length
+            ? html`
+                <div class="relative">
+                  <button
+                    type="button"
+                    onclick=${() => setAddMenuOpen((prev) => !prev)}
+                    class="text-xs font-medium px-3 py-1.5 rounded-lg ac-btn-secondary"
+                  >
+                    + Add Account
+                  </button>
+                  ${addMenuOpen
+                    ? html`
+                        <div
+                          class="absolute right-0 top-full mt-2 min-w-[210px] rounded-lg border border-border bg-modal p-1 z-20"
+                        >
+                          <button
+                            type="button"
+                            onclick=${handleAddCompanyClick}
+                            class="w-full text-left px-2.5 py-1.5 text-xs rounded-md hover:bg-black/30"
+                          >
+                            Company account
+                          </button>
+                          ${!hasPersonalAccount
+                            ? html`<button
+                                type="button"
+                                onclick=${handleAddPersonalClick}
+                                class="w-full text-left px-2.5 py-1.5 text-xs rounded-md hover:bg-black/30"
+                              >
+                                Personal account
+                              </button>`
+                            : null}
+                        </div>
+                      `
+                    : null}
+                </div>
+              `
+            : null}
+        `}
+      />
+      ${loading
+        ? 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)}
+                  />`,
+                )}
+              </div>
+            `
+          : renderEmptyState()}
+    </div>
+
+    <${CredentialsModal}
+      visible=${credentialsModalState.visible}
+      onClose=${closeCredentialsModal}
+      onSaved=${handleCredentialsSaved}
+      title=${credentialsModalState.title}
+      submitLabel=${credentialsModalState.submitLabel}
+      defaultInstrType=${credentialsModalState.defaultInstrType}
+      client=${credentialsModalState.client}
+      personal=${credentialsModalState.personal}
+      accountId=${credentialsModalState.accountId}
+      initialValues=${credentialsModalState.initialValues}
+    />
+
+    <${AddGoogleAccountModal}
+      visible=${addCompanyModalOpen}
+      onClose=${() => setAddCompanyModalOpen(false)}
+      onSubmit=${handleAddCompanyAccount}
+      loading=${savingAddCompany}
+      title="Add Company Account"
+    />
+
+    <${ConfirmDialog}
+      visible=${Boolean(disconnectAccountId)}
+      title="Disconnect Google account?"
+      message="Your agent will lose access to Gmail, Calendar, and other Google Workspace services until you reconnect."
+      confirmLabel="Disconnect"
+      cancelLabel="Cancel"
+      onCancel=${() => setDisconnectAccountId("")}
+      onConfirm=${async () => {
+        const accountId = disconnectAccountId;
+        setDisconnectAccountId("");
+        await handleDisconnect(accountId);
+      }}
+    />
+  `;
+};

package/lib/public/js/components/google/use-google-accounts.js

@@ -0,0 +1,41 @@
+import { useCallback, useEffect, useState } from "https://esm.sh/preact/hooks";
+import { fetchGoogleAccounts } from "../../lib/api.js";
+
+export const useGoogleAccounts = ({ gatewayStatus }) => {
+  const [accounts, setAccounts] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [hasCompanyCredentials, setHasCompanyCredentials] = useState(false);
+  const [hasPersonalCredentials, setHasPersonalCredentials] = useState(false);
+
+  const refreshAccounts = useCallback(async () => {
+    setLoading(true);
+    try {
+      const data = await fetchGoogleAccounts();
+      if (data.ok) {
+        setAccounts(Array.isArray(data.accounts) ? data.accounts : []);
+        setHasCompanyCredentials(Boolean(data.hasCompanyCredentials));
+        setHasPersonalCredentials(Boolean(data.hasPersonalCredentials));
+      }
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    refreshAccounts();
+  }, [refreshAccounts]);
+
+  useEffect(() => {
+    if (gatewayStatus === "running") {
+      refreshAccounts();
+    }
+  }, [gatewayStatus, refreshAccounts]);
+
+  return {
+    accounts,
+    loading,
+    hasCompanyCredentials,
+    hasPersonalCredentials,
+    refreshAccounts,
+  };
+};

package/lib/public/js/components/icons.js

@@ -248,3 +248,29 @@ export const LockLineIcon = ({ className = "" }) => html`
     />
   </svg>
 `;
+
+export const DeleteBinLineIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      d="M17 6H22V8H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V8H2V6H7V3C7 2.44772 7.44772 2 8 2H16C16.5523 2 17 2.44772 17 3V6ZM18 8H6V20H18V8ZM9 11H11V17H9V11ZM13 11H15V17H13V11ZM9 4V6H15V4H9Z"
+    />
+  </svg>
+`;
+
+export const RestartLineIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      d="M18.5374 19.5674C16.7844 21.0831 14.4993 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 14.1361 21.3302 16.1158 20.1892 17.7406L17 12H20C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C14.1502 20 16.1022 19.1517 17.5398 17.7716L18.5374 19.5674Z"
+    />
+  </svg>
+`;

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

@@ -43,8 +43,8 @@ const getChangedFilePresentation = (changedFile) => {
     return {
       statusLabel: "D",
       statusClass: "is-deleted",
-      rowClass: "",
-      canOpen: false,
+      rowClass: "is-clickable",
+      canOpen: true,
     };
   }
   return {
@@ -62,6 +62,14 @@ const formatDelta = (value, prefix) => {
   return `${prefix}${numericValue}`;
 };
 
+const isDirectoryChangePath = (changedPath, statusKind) => {
+  const safePath = String(changedPath || "").trim();
+  const safeStatusKind = String(statusKind || "").toUpperCase();
+  if (!safePath) return false;
+  if (safePath.endsWith("/")) return true;
+  return safeStatusKind === "U" && safePath.endsWith("\\");
+};
+
 const getRemoteSyncPresentation = (summary) => {
   const safeState = String(summary?.syncState || "").trim();
   const aheadCount = Number(summary?.aheadCount) || 0;
@@ -108,31 +116,41 @@ const getRemoteSyncPresentation = (summary) => {
   };
 };
 
-const buildSyncCommitMessage = (changedFiles) => {
-  const filePaths = Array.isArray(changedFiles)
-    ? changedFiles
-        .map((file) => String(file?.path || "").trim())
-        .filter(Boolean)
-    : [];
-  const totalCount = filePaths.length;
+const buildSyncCommitMessage = (summary) => {
+  const changedFiles = Array.isArray(summary?.changedFiles) ? summary.changedFiles : [];
+  const changedFilesCount = Number(summary?.changedFilesCount) || 0;
+  const filePaths = changedFiles
+    .map((file) => String(file?.path || "").trim())
+    .filter(Boolean);
+  const totalCount = changedFilesCount || filePaths.length;
   if (totalCount <= 0) return "sync changes";
 
-  const fileNames = filePaths.map((filePath) => filePath.split("/").filter(Boolean).pop() || filePath);
+  const fileNames = filePaths
+    .map((filePath) => filePath.split("/").filter(Boolean).pop() || filePath);
   const uniqueFileNames = Array.from(new Set(fileNames));
+  if (uniqueFileNames.length <= 0) {
+    const noun = totalCount === 1 ? "file" : "files";
+    return `Edited ${totalCount} ${noun}`;
+  }
+
   const shownFileNames = uniqueFileNames.slice(0, kSyncCommitFileNameLimit);
-  const remainingCount = Math.max(0, uniqueFileNames.length - shownFileNames.length);
+  const remainingCount = Math.max(0, totalCount - shownFileNames.length);
   const noun = totalCount === 1 ? "file" : "files";
   const suffix = remainingCount > 0 ? ` +${remainingCount} more` : "";
   return `Edited ${totalCount} ${noun} - ${shownFileNames.join(", ")}${suffix}`;
 };
 
-export const SidebarGitPanel = ({ onSelectFile = () => {} }) => {
+export const SidebarGitPanel = ({
+  onSelectFile = () => {},
+  isActive = true,
+}) => {
   const [loading, setLoading] = useState(true);
   const [syncing, setSyncing] = useState(false);
   const [error, setError] = useState("");
   const [summary, setSummary] = useState(null);
 
   useEffect(() => {
+    if (!isActive) return () => {};
     let active = true;
     let intervalId = null;
 
@@ -164,7 +182,7 @@ export const SidebarGitPanel = ({ onSelectFile = () => {} }) => {
       if (intervalId) window.clearInterval(intervalId);
       window.removeEventListener("alphaclaw:browse-file-saved", handleFileSaved);
     };
-  }, []);
+  }, [isActive]);
 
   if (loading) {
     return html`
@@ -194,7 +212,7 @@ export const SidebarGitPanel = ({ onSelectFile = () => {} }) => {
     if (!canSyncChanges || syncing) return;
     try {
       setSyncing(true);
-      const commitMessage = buildSyncCommitMessage(summary?.changedFiles || []);
+      const commitMessage = buildSyncCommitMessage(summary);
       const syncResult = await syncBrowseChanges(commitMessage);
       if (syncResult?.committed || syncResult?.pushed) {
         window.dispatchEvent(new CustomEvent("alphaclaw:browse-git-synced"));
@@ -270,6 +288,17 @@ export const SidebarGitPanel = ({ onSelectFile = () => {} }) => {
                       title=${changedPath}
                       onclick=${() => {
                         if (!presentation.canOpen || !changedPath) return;
+                        const directorySelection = isDirectoryChangePath(
+                          changedPath,
+                          changedFile?.statusKind,
+                        );
+                        if (directorySelection) {
+                          onSelectFile(changedPath, {
+                            directory: true,
+                            preservePreview: true,
+                          });
+                          return;
+                        }
                         onSelectFile(changedPath, { view: "diff" });
                       }}
                     >