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

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/status-banners.js

@@ -9,6 +9,7 @@ export const FileViewerStatusBanners = ({
   isDiffView,
   onRequestEdit,
   normalizedPath,
+  isDeletedDiff = false,
   isLockedFile,
   isProtectedFile,
   isProtectedLocked,
@@ -18,12 +19,16 @@ export const FileViewerStatusBanners = ({
     ? html`
         <div class="file-viewer-protected-banner file-viewer-diff-banner">
           <div class="file-viewer-protected-banner-text">Viewing unsynced changes</div>
-          <${ActionButton}
-            onClick=${() => onRequestEdit(normalizedPath)}
-            tone="secondary"
-            size="sm"
-            idleLabel="View file"
-          />
+          ${!isDeletedDiff
+            ? html`
+                <${ActionButton}
+                  onClick=${() => onRequestEdit(normalizedPath)}
+                  tone="secondary"
+                  size="sm"
+                  idleLabel="View file"
+                />
+              `
+            : null}
         </div>
       `
     : null}

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

@@ -2,7 +2,7 @@ import { h } from "https://esm.sh/preact";
 import htm from "https://esm.sh/htm";
 import { ActionButton } from "../action-button.js";
 import { SegmentedControl } from "../segmented-control.js";
-import { SaveFillIcon } from "../icons.js";
+import { DeleteBinLineIcon, RestartLineIcon, SaveFillIcon } from "../icons.js";
 
 const html = htm.bind(h);
 
@@ -15,6 +15,7 @@ export const FileViewerToolbar = ({
   viewMode,
   handleChangeViewMode,
   handleSave,
+  handleDiscard,
   loading,
   canEditFile,
   isEditBlocked,
@@ -22,6 +23,14 @@ export const FileViewerToolbar = ({
   isAudioFile,
   isSqliteFile,
   saving,
+  deleting,
+  restoring,
+  canDeleteFile,
+  isDeleteBlocked,
+  isProtectedFile,
+  canRestoreDeletedDiff,
+  onRequestDelete,
+  onRequestRestore,
 }) => html`
   <div class="file-viewer-tabbar">
     <div class="file-viewer-tab active">
@@ -58,6 +67,36 @@ export const FileViewerToolbar = ({
     ${!isDiffView
       ? !isImageFile && !isAudioFile && !isSqliteFile
         ? html`
+            ${!isProtectedFile
+              ? html`
+                  <button
+                    type="button"
+                    onclick=${onRequestDelete}
+                    disabled=${!canDeleteFile || deleting}
+                    class=${`file-viewer-icon-action file-viewer-delete-action ${
+                      !canDeleteFile || deleting ? "is-disabled" : ""
+                    }`.trim()}
+                    title=${isDeleteBlocked
+                      ? "Locked files cannot be deleted"
+                      : "Delete file"}
+                    aria-label="Delete file"
+                  >
+                    <${DeleteBinLineIcon} className="file-viewer-icon-action-icon" />
+                  </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}
@@ -73,5 +112,21 @@ export const FileViewerToolbar = ({
           `
         : null
       : null}
+    ${isDiffView && canRestoreDeletedDiff
+      ? html`
+          <${ActionButton}
+            onClick=${onRequestRestore}
+            disabled=${restoring}
+            loading=${restoring}
+            tone="secondary"
+            size="sm"
+            idleLabel="Restore"
+            loadingLabel="Restoring..."
+            idleIcon=${RestartLineIcon}
+            idleIconClassName="file-viewer-save-icon"
+            className="file-viewer-save-action"
+          />
+        `
+      : null}
   </div>
 `;

package/lib/public/js/components/file-viewer/use-editor-selection-restore.js

@@ -5,6 +5,7 @@ import { getScrollRatio } from "./scroll-sync.js";
 
 export const useEditorSelectionRestore = ({
   canEditFile,
+  isEditBlocked,
   loading,
   hasSelectedPath,
   normalizedPath,
@@ -18,6 +19,10 @@ export const useEditorSelectionRestore = ({
   viewScrollRatioRef,
 }) => {
   useEffect(() => {
+    if (isEditBlocked) {
+      restoredSelectionPathRef.current = "";
+      return () => {};
+    }
     if (!canEditFile || loading || !hasSelectedPath) return () => {};
     if (loadedFilePathRef.current !== normalizedPath) return () => {};
     if (restoredSelectionPathRef.current === normalizedPath) return () => {};
@@ -72,6 +77,7 @@ export const useEditorSelectionRestore = ({
     };
   }, [
     canEditFile,
+    isEditBlocked,
     loading,
     hasSelectedPath,
     normalizedPath,

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

@@ -10,6 +10,10 @@ export const useFileDiff = ({
   const [diffLoading, setDiffLoading] = useState(false);
   const [diffError, setDiffError] = useState("");
   const [diffContent, setDiffContent] = useState("");
+  const [diffStatus, setDiffStatus] = useState({
+    statusKind: "",
+    isDeleted: false,
+  });
 
   useEffect(() => {
     let active = true;
@@ -17,6 +21,7 @@ export const useFileDiff = ({
       setDiffLoading(false);
       setDiffError("");
       setDiffContent("");
+      setDiffStatus({ statusKind: "", isDeleted: false });
       return () => {
         active = false;
       };
@@ -28,9 +33,14 @@ export const useFileDiff = ({
         const data = await fetchBrowseFileDiff(normalizedPath);
         if (!active) return;
         setDiffContent(String(data?.content || ""));
+        setDiffStatus({
+          statusKind: String(data?.statusKind || ""),
+          isDeleted: !!data?.isDeleted,
+        });
       } catch (nextError) {
         if (!active) return;
         setDiffError(nextError.message || "Could not load diff");
+        setDiffStatus({ statusKind: "", isDeleted: false });
       } finally {
         if (active) setDiffLoading(false);
       }
@@ -45,5 +55,6 @@ export const useFileDiff = ({
     diffLoading,
     diffError,
     diffContent,
+    diffStatus,
   };
 };

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

@@ -11,6 +11,7 @@ import { kFileRefreshIntervalMs, kSqlitePageSize } from "./constants.js";
 export const useFileLoader = ({
   hasSelectedPath,
   normalizedPath,
+  isDiffView,
   isSqliteFile,
   sqliteSelectedTable,
   sqliteTableOffset,
@@ -83,6 +84,14 @@ export const useFileLoader = ({
     setIsFolderPath(false);
     setExternalChangeNoticeShown(false);
     viewScrollRatioRef.current = 0;
+    if (isDiffView) {
+      setLoading(false);
+      loadedFilePathRef.current = normalizedPath;
+      restoredSelectionPathRef.current = "";
+      return () => {
+        active = false;
+      };
+    }
 
     const loadFile = async () => {
       setLoading(true);
@@ -206,7 +215,7 @@ export const useFileLoader = ({
     return () => {
       active = false;
     };
-  }, [hasSelectedPath, normalizedPath]);
+  }, [hasSelectedPath, normalizedPath, isDiffView]);
 
   useEffect(() => {
     if (!isSqliteFile || !normalizedPath || !sqliteSelectedTable) {
@@ -242,7 +251,7 @@ export const useFileLoader = ({
   }, [isSqliteFile, normalizedPath, sqliteSelectedTable, sqliteTableOffset]);
 
   useEffect(() => {
-    if (!hasSelectedPath || isFolderPath || !canEditFile) return () => {};
+    if (!hasSelectedPath || isFolderPath || !canEditFile || isDiffView) return () => {};
     const refreshFromDisk = async () => {
       if (loading || saving) return;
       if (fileRefreshInFlightRef.current) return;
@@ -287,6 +296,7 @@ export const useFileLoader = ({
     hasSelectedPath,
     isFolderPath,
     canEditFile,
+    isDiffView,
     loading,
     saving,
     normalizedPath,

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

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "https://esm.sh/preact/hooks";
 import { marked } from "https://esm.sh/marked";
-import { saveFileContent } from "../../lib/api.js";
+import { deleteBrowseFile, restoreBrowseFile, saveFileContent } from "../../lib/api.js";
 import {
   getFileSyntaxKind,
   highlightEditorLines,
@@ -32,6 +32,8 @@ export const useFileViewer = ({
   filePath = "",
   isPreviewOnly = false,
   browseView = "edit",
+  onRequestClearSelection = () => {},
+  onRequestEdit = () => {},
 }) => {
   const normalizedPath = String(filePath || "").trim();
   const normalizedPolicyPath = normalizeBrowsePolicyPath(normalizedPath);
@@ -50,6 +52,8 @@ export const useFileViewer = ({
   const [loading, setLoading] = useState(false);
   const [showDelayedLoadingSpinner, setShowDelayedLoadingSpinner] = useState(false);
   const [saving, setSaving] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [restoring, setRestoring] = useState(false);
   const [error, setError] = useState("");
   const [isFolderPath, setIsFolderPath] = useState(false);
   const [frontmatterCollapsed, setFrontmatterCollapsed] = useState(false);
@@ -83,6 +87,7 @@ export const useFileViewer = ({
   const { loadedFilePathRef, restoredSelectionPathRef } = useFileLoader({
     hasSelectedPath,
     normalizedPath,
+    isDiffView,
     isSqliteFile,
     sqliteSelectedTable,
     sqliteTableOffset,
@@ -111,7 +116,7 @@ export const useFileViewer = ({
     viewScrollRatioRef,
   });
 
-  const { diffLoading, diffError, diffContent } = useFileDiff({
+  const { diffLoading, diffError, diffContent, diffStatus } = useFileDiff({
     hasSelectedPath,
     isDiffView,
     isPreviewOnly,
@@ -131,6 +136,15 @@ export const useFileViewer = ({
     matchesBrowsePolicyPath(kProtectedBrowsePaths, normalizedPolicyPath);
   const isProtectedLocked = isProtectedFile && !protectedEditBypassPaths.has(normalizedPolicyPath);
   const isEditBlocked = isLockedFile || isProtectedLocked;
+  const isDeleteBlocked = isLockedFile || isProtectedFile;
+  const canDeleteFile =
+    hasSelectedPath &&
+    !isFolderPath &&
+    !isPreviewOnly &&
+    !isDiffView &&
+    !deleting &&
+    !saving &&
+    !isDeleteBlocked;
   const syntaxKind = useMemo(() => getFileSyntaxKind(normalizedPath), [normalizedPath]);
   const isMarkdownFile = syntaxKind === "markdown";
   const shouldUseHighlightedEditor = syntaxKind !== "plain";
@@ -187,6 +201,10 @@ export const useFileViewer = ({
     }
   }, [isMarkdownFile, viewMode]);
 
+  useEffect(() => {
+    setProtectedEditBypassPaths(new Set());
+  }, [normalizedPath]);
+
   useEffect(() => {
     try {
       window.localStorage.setItem(kFileViewerModeStorageKey, viewMode);
@@ -216,6 +234,7 @@ export const useFileViewer = ({
 
   useEditorSelectionRestore({
     canEditFile,
+    isEditBlocked,
     loading,
     hasSelectedPath,
     normalizedPath,
@@ -246,7 +265,6 @@ export const useFileViewer = ({
           detail: { path: normalizedPath },
         }),
       );
-      showToast("Saved", "success");
     } catch (saveError) {
       const message = saveError.message || "Could not save file";
       setError(message);
@@ -256,6 +274,72 @@ export const useFileViewer = ({
     }
   }, [canEditFile, saving, isDirty, isEditBlocked, normalizedPath, content]);
 
+  const handleDelete = useCallback(async () => {
+    if (!canDeleteFile) return;
+    setDeleting(true);
+    setError("");
+    try {
+      const data = await deleteBrowseFile(normalizedPath);
+      const deletedPath = String(data?.path || normalizedPath);
+      setExternalChangeNoticeShown(false);
+      clearStoredFileDraft(normalizedPath);
+      updateDraftIndex(normalizedPath, false, {
+        dispatchEvent: (event) => window.dispatchEvent(event),
+      });
+      window.dispatchEvent(
+        new CustomEvent("alphaclaw:browse-file-saved", {
+          detail: { path: deletedPath },
+        }),
+      );
+      window.dispatchEvent(
+        new CustomEvent("alphaclaw:browse-file-deleted", {
+          detail: { path: deletedPath },
+        }),
+      );
+      window.dispatchEvent(new CustomEvent("alphaclaw:browse-tree-refresh"));
+      showToast("File deleted", "success");
+      onRequestClearSelection();
+    } catch (deleteError) {
+      const message = deleteError.message || "Could not delete file";
+      setError(message);
+      if (/path is not a file/i.test(message)) {
+        showToast("Only files can be deleted", "warning");
+        onRequestClearSelection();
+      } else {
+        showToast(message, "error");
+      }
+    } finally {
+      setDeleting(false);
+    }
+  }, [canDeleteFile, normalizedPath, onRequestClearSelection]);
+
+  const handleRestore = useCallback(async () => {
+    if (!isDiffView || !diffStatus?.isDeleted || restoring) return;
+    setRestoring(true);
+    try {
+      const data = await restoreBrowseFile(normalizedPath);
+      const restoredPath = String(data?.path || normalizedPath);
+      window.dispatchEvent(
+        new CustomEvent("alphaclaw:browse-file-saved", {
+          detail: { path: restoredPath },
+        }),
+      );
+      window.dispatchEvent(new CustomEvent("alphaclaw:browse-tree-refresh"));
+      showToast("File restored", "success");
+      onRequestEdit(restoredPath);
+    } catch (restoreError) {
+      showToast(restoreError.message || "Could not restore file", "error");
+    } finally {
+      setRestoring(false);
+    }
+  }, [
+    diffStatus?.isDeleted,
+    isDiffView,
+    normalizedPath,
+    onRequestEdit,
+    restoring,
+  ]);
+
   useFileViewerHotkeys({
     canEditFile,
     isPreviewOnly,
@@ -281,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 = () => {
@@ -315,6 +433,8 @@ export const useFileViewer = ({
       isPreviewOnly,
       loading,
       saving,
+      deleting,
+      restoring,
       showDelayedLoadingSpinner,
       error,
       isFolderPath,
@@ -333,6 +453,7 @@ export const useFileViewer = ({
       diffLoading,
       diffError,
       diffContent,
+      diffStatus,
       isMarkdownFile,
       frontmatterCollapsed,
       previewHtml,
@@ -343,6 +464,8 @@ export const useFileViewer = ({
       pathSegments,
       isDirty,
       canEditFile,
+      canDeleteFile,
+      isDeleteBlocked,
       isEditBlocked,
       isLockedFile,
       isProtectedFile,
@@ -366,8 +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

@@ -0,0 +1,131 @@
+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);
+
+const scopeListsEqual = (a = [], b = []) =>
+  a.length === b.length && a.every((scope) => b.includes(scope));
+
+export const GoogleAccountRow = ({
+  account,
+  personal = false,
+  expanded,
+  onToggleExpanded,
+  scopes = [],
+  savedScopes = [],
+  apiStatus = {},
+  checkingApis = false,
+  onToggleScope,
+  onCheckApis,
+  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-visible">
+      <button
+        type="button"
+        onclick=${() => onToggleExpanded?.(account.id)}
+        class="w-full text-left px-3 py-2.5 flex items-center justify-between hover:bg-black/20"
+      >
+        <div class="min-w-0">
+          <div class="text-sm font-medium truncate">${account.email}</div>
+        </div>
+        <div class="flex items-center gap-2">
+          ${personal ? html`<${Badge} tone="neutral">Personal</${Badge}>` : null}
+          <${Badge} tone=${account.authenticated ? "success" : "warning"}>
+            ${account.authenticated ? "Connected" : "Awaiting sign-in"}
+          </${Badge}>
+          <span class="text-xs text-gray-500">${expanded ? "▾" : "▸"}</span>
+        </div>
+      </button>
+      ${expanded
+        ? html`
+            <div class="px-3 pb-3 space-y-3 border-t border-border">
+              <div class="flex justify-between items-center pt-3">
+                <span class="text-sm text-gray-400">Select permissions</span>
+                ${account.authenticated
+                  ? html`<button
+                      type="button"
+                      onclick=${() => onCheckApis?.(account.id)}
+                      disabled=${checkingApis}
+                      class="text-xs px-2 py-1 rounded-lg ac-btn-ghost disabled:opacity-50 disabled:cursor-not-allowed"
+                    >
+                      ${checkingApis ? "Checking APIs..." : "↻ Check APIs"}
+                    </button>`
+                  : null}
+              </div>
+              <${ScopePicker}
+                scopes=${scopes}
+                onToggle=${(scope) => onToggleScope?.(account.id, scope)}
+                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
+                    type="button"
+                    onclick=${() => onUpdatePermissions?.(account.id)}
+                    disabled=${account.authenticated && !scopesChanged}
+                    class="w-full sm:w-auto text-xs font-medium px-3 py-1.5 rounded-lg ac-btn-cyan disabled:opacity-50 disabled:cursor-not-allowed"
+                  >
+                    ${account.authenticated ? "Update Permissions" : "Sign in with Google"}
+                  </button>
+                  <button
+                    type="button"
+                    onclick=${() => onEditCredentials?.(account.id)}
+                    class="w-full sm:w-auto text-xs font-medium px-3 py-1.5 rounded-lg ac-btn-secondary"
+                  >
+                    Edit Credentials
+                  </button>
+                </div>
+                <button
+                  type="button"
+                  onclick=${() => onDisconnect?.(account.id)}
+                  class="text-xs px-2 py-1 rounded-lg ac-btn-ghost w-full sm:w-auto"
+                >
+                  Disconnect
+                </button>
+              </div>
+            </div>
+          `
+        : null}
+    </div>
+  `;
+};