@chrysb/alphaclaw 0.3.5-beta.1 → 0.4.1-beta.0

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/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) => {
@@ -43,8 +42,8 @@ const getChangedFilePresentation = (changedFile) => {
     return {
       statusLabel: "D",
       statusClass: "is-deleted",
-      rowClass: "",
-      canOpen: false,
+      rowClass: "is-clickable",
+      canOpen: true,
     };
   }
   return {
@@ -62,6 +61,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 +115,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 +181,7 @@ export const SidebarGitPanel = ({ onSelectFile = () => {} }) => {
       if (intervalId) window.clearInterval(intervalId);
       window.removeEventListener("alphaclaw:browse-file-saved", handleFileSaved);
     };
-  }, []);
+  }, [isActive]);
 
   if (loading) {
     return html`
@@ -194,7 +211,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 +287,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" });
                       }}
                     >

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

@@ -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),
       );
@@ -172,83 +174,99 @@ export const AppSidebar = ({
         <${FolderLineIcon} className="sidebar-tab-icon" />
       </button>
     </div>
-    ${sidebarTab === "menu"
-      ? navSections.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=${() => onSelectNavItem(item.id)}
-                  >
-                    ${item.label}
-                  </a>
-                `,
-              )}
-            </nav>
-          `,
-        )
-      : html`
-          <div class="sidebar-browse-layout" ref=${browseLayoutRef}>
-            <div
-              class="sidebar-browse-panel"
-            >
-              <${FileTree}
-                onSelectFile=${onSelectBrowseFile}
-                selectedPath=${selectedBrowsePath}
-                onPreviewFile=${onPreviewBrowseFile}
+    <div
+      style=${{
+        display: sidebarTab === "menu" ? "flex" : "none",
+        flexDirection: "column",
+        flex: "1 1 auto",
+        minHeight: 0,
+      }}
+    >
+      ${navSections.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=${() => onSelectNavItem(item.id)}
+                >
+                  ${item.label}
+                </a>
+              `,
+            )}
+          </nav>
+        `,
+      )}
+      <div class="sidebar-footer">
+        ${acHasUpdate && acLatest && !acDismissed
+          ? html`
+              <${UpdateActionButton}
+                onClick=${onAcUpdate}
+                loading=${acUpdating}
+                warning=${true}
+                idleLabel=${`Update to v${acLatest}`}
+                loadingLabel="Updating..."
+                className="w-full justify-center"
               />
-            </div>
-            <div
-              class=${`sidebar-browse-resizer ${isResizingBrowsePanels ? "is-resizing" : ""}`}
-              onpointerdown=${onBrowsePanelResizerPointerDown}
-              role="separator"
-              aria-orientation="horizontal"
-              aria-label="Resize browse and git panels"
-            ></div>
-            <div class="sidebar-browse-bottom">
-              <div
-                class="sidebar-browse-bottom-inner"
-                ref=${browseBottomPanelRef}
-                style=${{ height: `${browseBottomPanelHeightPx}px` }}
-              >
-              <${SidebarGitPanel} onSelectFile=${onSelectBrowseFile} />
-              ${acHasUpdate && acLatest && !acDismissed
-                ? html`
-                    <${UpdateActionButton}
-                      onClick=${onAcUpdate}
-                      loading=${acUpdating}
-                      warning=${true}
-                      idleLabel=${`Update to v${acLatest}`}
-                      loadingLabel="Updating..."
-                      className="w-full justify-center"
-                    />
-                  `
-                : null}
-              </div>
-            </div>
-          </div>
-        `}
-    ${sidebarTab === "menu"
-      ? html`
-          <div class="sidebar-footer">
-            ${acHasUpdate && acLatest && !acDismissed
-              ? html`
-                  <${UpdateActionButton}
-                    onClick=${onAcUpdate}
-                    loading=${acUpdating}
-                    warning=${true}
-                    idleLabel=${`Update to v${acLatest}`}
-                    loadingLabel="Updating..."
-                    className="w-full justify-center"
-                  />
-                `
-              : null}
+            `
+          : null}
+      </div>
+    </div>
+    <div
+      style=${{
+        display: sidebarTab === "browse" ? "flex" : "none",
+        flexDirection: "column",
+        flex: "1 1 auto",
+        minHeight: 0,
+        overflow: "hidden",
+      }}
+    >
+      <div class="sidebar-browse-layout" ref=${browseLayoutRef}>
+        <div
+          class="sidebar-browse-panel"
+        >
+          <${FileTree}
+            onSelectFile=${onSelectBrowseFile}
+            selectedPath=${selectedBrowsePath}
+            onPreviewFile=${onPreviewBrowseFile}
+            isActive=${sidebarTab === "browse"}
+          />
+        </div>
+        <div
+          class=${`sidebar-browse-resizer ${isResizingBrowsePanels ? "is-resizing" : ""}`}
+          onpointerdown=${onBrowsePanelResizerPointerDown}
+          role="separator"
+          aria-orientation="horizontal"
+          aria-label="Resize browse and git panels"
+        ></div>
+        <div class="sidebar-browse-bottom">
+          <div
+            class="sidebar-browse-bottom-inner"
+            ref=${browseBottomPanelRef}
+            style=${{ height: `${browseBottomPanelHeightPx}px` }}
+          >
+          <${SidebarGitPanel}
+            onSelectFile=${onSelectBrowseFile}
+            isActive=${sidebarTab === "browse"}
+          />
+          ${acHasUpdate && acLatest && !acDismissed
+            ? html`
+                <${UpdateActionButton}
+                  onClick=${onAcUpdate}
+                  loading=${acUpdating}
+                  warning=${true}
+                  idleLabel=${`Update to v${acLatest}`}
+                  loadingLabel="Updating..."
+                  className="w-full justify-center"
+                />
+              `
+            : null}
           </div>
-        `
-      : null}
+        </div>
+      </div>
+    </div>
   </div>
 `;
 };

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";
+};

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

@@ -0,0 +1,72 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { ActionButton } from "../action-button.js";
+import { PageHeader } from "../page-header.js";
+import { OverviewSection } from "./overview-section.js";
+import { SessionsSection } from "./sessions-section.js";
+import { useUsageTab } from "./use-usage-tab.js";
+
+const html = htm.bind(h);
+
+export const UsageTab = ({ sessionId = "" }) => {
+  const { state, actions } = useUsageTab({ sessionId });
+
+  const handleToggleSession = (itemSessionId, isOpen) => {
+    if (isOpen) {
+      actions.setExpandedSessionIds((currentValue) =>
+        currentValue.includes(itemSessionId) ? currentValue : [...currentValue, itemSessionId],
+      );
+      if (!state.sessionDetailById[itemSessionId] && !state.loadingDetailById[itemSessionId]) {
+        actions.loadSessionDetail(itemSessionId);
+      }
+      return;
+    }
+    actions.setExpandedSessionIds((currentValue) =>
+      currentValue.filter((value) => value !== itemSessionId),
+    );
+  };
+
+  return html`
+    <div class="space-y-4">
+      <${PageHeader}
+        title="Usage"
+        actions=${html`
+          <${ActionButton}
+            onClick=${actions.loadSummary}
+            loading=${state.loadingSummary}
+            tone="secondary"
+            size="sm"
+            idleLabel="Refresh"
+            loadingMode="inline"
+          />
+        `}
+      />
+      ${state.error
+        ? html`<div class="text-xs text-red-300 bg-red-950/30 border border-red-900 rounded px-3 py-2">
+            ${state.error}
+          </div>`
+        : null}
+      ${state.loadingSummary && !state.summary
+        ? html`<div class="text-sm text-[var(--text-muted)]">Loading usage summary...</div>`
+        : html`
+            <${OverviewSection}
+              summary=${state.summary}
+              periodSummary=${state.periodSummary}
+              metric=${state.metric}
+              days=${state.days}
+              overviewCanvasRef=${state.overviewCanvasRef}
+              onDaysChange=${actions.setDays}
+              onMetricChange=${actions.setMetric}
+            />
+          `}
+      <${SessionsSection}
+        sessions=${state.sessions}
+        loadingSessions=${state.loadingSessions}
+        expandedSessionIds=${state.expandedSessionIds}
+        loadingDetailById=${state.loadingDetailById}
+        sessionDetailById=${state.sessionDetailById}
+        onToggleSession=${handleToggleSession}
+      />
+    </div>
+  `;
+};