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

package/lib/public/js/components/credentials-modal.js

@@ -1,5 +1,5 @@
 import { h } from "https://esm.sh/preact";
-import { useState, useRef } from "https://esm.sh/preact/hooks";
+import { useEffect, useRef, useState } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
 import { saveGoogleCredentials } from "../lib/api.js";
 import { SecretInput } from "./secret-input.js";
@@ -9,16 +9,37 @@ import { ActionButton } from "./action-button.js";
 import { CloseIcon } from "./icons.js";
 const html = htm.bind(h);
 
-export const CredentialsModal = ({ visible, onClose, onSaved }) => {
+export const CredentialsModal = ({
+  visible,
+  onClose,
+  onSaved,
+  title = "Connect Google Workspace",
+  submitLabel = "Connect Google",
+  defaultInstrType = "workspace",
+  client = "default",
+  personal = false,
+  accountId = "",
+  initialValues = {},
+}) => {
   const [clientId, setClientId] = useState("");
   const [clientSecret, setClientSecret] = useState("");
   const [email, setEmail] = useState("");
   const [error, setError] = useState("");
   const [saving, setSaving] = useState(false);
-  const [instrType, setInstrType] = useState("workspace");
+  const [instrType, setInstrType] = useState(defaultInstrType);
   const [redirectUriCopied, setRedirectUriCopied] = useState(false);
   const fileRef = useRef(null);
 
+  useEffect(() => {
+    if (!visible) return;
+    setClientId(String(initialValues.clientId || ""));
+    setClientSecret(String(initialValues.clientSecret || ""));
+    setEmail(String(initialValues.email || ""));
+    setInstrType(defaultInstrType);
+    setError("");
+    setRedirectUriCopied(false);
+  }, [visible, initialValues, defaultInstrType]);
+
   if (!visible) return null;
 
   const redirectUri = `${window.location.origin}/auth/google/callback`;
@@ -50,15 +71,22 @@ export const CredentialsModal = ({ visible, onClose, onSaved }) => {
   const submit = async () => {
     setError("");
     if (!clientId || !clientSecret || !email) {
-      setError("All fields required");
+      setError("Client ID, Client Secret, and Email are required");
       return;
     }
     setSaving(true);
     try {
-      const data = await saveGoogleCredentials(clientId, clientSecret, email);
+      const data = await saveGoogleCredentials({
+        clientId,
+        clientSecret,
+        email,
+        client,
+        personal,
+        accountId,
+      });
       if (data.ok) {
         onClose();
-        onSaved();
+        onSaved?.(data.account);
       } else setError(data.error || "Failed to save credentials");
     } catch {
       setError("Request failed");
@@ -104,7 +132,7 @@ export const CredentialsModal = ({ visible, onClose, onSaved }) => {
     panelClassName="bg-modal border border-border rounded-xl p-6 max-w-lg w-full space-y-4"
   >
       <${PageHeader}
-        title="Connect Google Workspace"
+        title=${title}
         actions=${html`
           <button
             type="button"
@@ -338,7 +366,7 @@ export const CredentialsModal = ({ visible, onClose, onSaved }) => {
           loading=${saving}
           tone="primary"
           size="lg"
-          idleLabel="Connect Google"
+          idleLabel=${submitLabel}
           loadingLabel="Saving..."
           className="w-full px-4 py-2 rounded-lg text-sm"
         />

package/lib/public/js/components/file-tree.js

@@ -8,12 +8,14 @@ import {
 } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
 import { fetchBrowseTree } from "../lib/api.js";
+import { deleteBrowseFile } from "../lib/api.js";
 import {
   kDraftIndexChangedEventName,
   readStoredDraftPaths,
 } from "../lib/browse-draft-state.js";
 import {
   kLockedBrowsePaths,
+  kProtectedBrowsePaths,
   matchesBrowsePolicyPath,
   normalizeBrowsePolicyPath,
 } from "../lib/browse-file-policies.js";
@@ -32,6 +34,8 @@ import {
   LockLineIcon,
 } from "./icons.js";
 import { LoadingSpinner } from "./loading-spinner.js";
+import { ConfirmDialog } from "./confirm-dialog.js";
+import { showToast } from "./toast.js";
 
 const html = htm.bind(h);
 const kTreeIndentPx = 9;
@@ -71,6 +75,23 @@ const collectFilePaths = (node, filePaths) => {
   );
 };
 
+const removeTreePath = (node, targetPath) => {
+  if (!node) return null;
+  const safeTargetPath = String(targetPath || "").trim();
+  if (!safeTargetPath) return node;
+  const nodePath = String(node.path || "").trim();
+  if (nodePath === safeTargetPath) return null;
+  if (node.type !== "folder") return node;
+  const nextChildren = (node.children || [])
+    .map((childNode) => removeTreePath(childNode, safeTargetPath))
+    .filter(Boolean);
+  if (nextChildren.length === (node.children || []).length) return node;
+  return {
+    ...node,
+    children: nextChildren,
+  };
+};
+
 const filterTreeNode = (node, normalizedQuery) => {
   if (!node) return null;
   const query = String(normalizedQuery || "")
@@ -95,50 +116,68 @@ const filterTreeNode = (node, normalizedQuery) => {
 
 const getFileIconMeta = (fileName) => {
   const normalizedName = String(fileName || "").toLowerCase();
-  if (normalizedName.endsWith(".md")) {
+  const normalizedNameWithoutBakSuffix = normalizedName.replace(/(\.bak)+$/i, "");
+  if (normalizedNameWithoutBakSuffix.endsWith(".md")) {
     return {
       icon: MarkdownFillIcon,
       className: "file-icon file-icon-md",
     };
   }
-  if (normalizedName.endsWith(".js") || normalizedName.endsWith(".mjs")) {
+  if (
+    normalizedNameWithoutBakSuffix.endsWith(".js") ||
+    normalizedNameWithoutBakSuffix.endsWith(".mjs")
+  ) {
     return {
       icon: JavascriptFillIcon,
       className: "file-icon file-icon-js",
     };
   }
-  if (normalizedName.endsWith(".json") || normalizedName.endsWith(".jsonl")) {
+  if (
+    normalizedNameWithoutBakSuffix.endsWith(".json") ||
+    normalizedNameWithoutBakSuffix.endsWith(".jsonl")
+  ) {
     return {
       icon: BracesLineIcon,
       className: "file-icon file-icon-json",
     };
   }
-  if (normalizedName.endsWith(".css") || normalizedName.endsWith(".scss")) {
+  if (
+    normalizedNameWithoutBakSuffix.endsWith(".css") ||
+    normalizedNameWithoutBakSuffix.endsWith(".scss")
+  ) {
     return {
       icon: HashtagIcon,
       className: "file-icon file-icon-css",
     };
   }
-  if (/\.(html?)$/i.test(normalizedName)) {
+  if (/\.(html?)$/i.test(normalizedNameWithoutBakSuffix)) {
     return {
       icon: FileCodeLineIcon,
       className: "file-icon file-icon-html",
     };
   }
-  if (/\.(png|jpe?g|gif|webp|svg|bmp|ico|avif)$/i.test(normalizedName)) {
+  if (
+    /\.(png|jpe?g|gif|webp|svg|bmp|ico|avif)$/i.test(
+      normalizedNameWithoutBakSuffix,
+    )
+  ) {
     return {
       icon: Image2FillIcon,
       className: "file-icon file-icon-image",
     };
   }
-  if (/\.(mp3|wav|ogg|oga|m4a|aac|flac|opus|weba)$/i.test(normalizedName)) {
+  if (
+    /\.(mp3|wav|ogg|oga|m4a|aac|flac|opus|weba)$/i.test(
+      normalizedNameWithoutBakSuffix,
+    )
+  ) {
     return {
       icon: FileMusicLineIcon,
       className: "file-icon file-icon-audio",
     };
   }
   if (
-    /\.(sh|bash|zsh|command)$/i.test(normalizedName) ||
+    /\.(sh|bash|zsh|command)$/i.test(normalizedNameWithoutBakSuffix) ||
     [
       ".bashrc",
       ".zshrc",
@@ -146,7 +185,7 @@ const getFileIconMeta = (fileName) => {
       ".bash_profile",
       ".zprofile",
       ".zshenv",
-    ].includes(normalizedName)
+    ].includes(normalizedNameWithoutBakSuffix)
   ) {
     return {
       icon: TerminalFillIcon,
@@ -155,7 +194,7 @@ const getFileIconMeta = (fileName) => {
   }
   if (
     /\.(db|sqlite|sqlite3|db3|sdb|sqlitedb|duckdb|mdb|accdb)$/i.test(
-      normalizedName,
+      normalizedNameWithoutBakSuffix,
     )
   ) {
     return {
@@ -173,7 +212,9 @@ const TreeNode = ({
   node,
   depth = 0,
   expandedPaths,
-  onToggleFolder,
+  onSetFolderExpanded,
+  onSelectFolder,
+  onRequestDelete,
   onSelectFile,
   selectedPath = "",
   draftPaths,
@@ -196,6 +237,15 @@ const TreeNode = ({
         <a
           class=${`${isActive ? "active" : ""} ${isSearchActiveNode && !isActive ? "soft-active" : ""}`.trim()}
           onclick=${() => onSelectFile(node.path)}
+          onKeyDown=${(event) => {
+            const isDeleteKey =
+              event.key === "Delete" || event.key === "Backspace";
+            if (!isDeleteKey || !isActive) return;
+            event.preventDefault();
+            onRequestDelete(node.path);
+          }}
+          tabindex="0"
+          role="button"
           style=${{
             paddingLeft: `${kFileBasePaddingPx + depth * kTreeIndentPx}px`,
           }}
@@ -218,17 +268,44 @@ const TreeNode = ({
 
   const folderPath = node.path || "";
   const isCollapsed = isSearchActive ? false : !expandedPaths.has(folderPath);
+  const isFolderActive = selectedPath === folderPath;
   return html`
     <li class="tree-item">
       <div
-        class=${`tree-folder ${isCollapsed ? "collapsed" : ""}`}
-        onclick=${() => onToggleFolder(folderPath)}
+        class=${`tree-folder ${isCollapsed ? "collapsed" : ""} ${isFolderActive ? "active" : ""}`.trim()}
+        onclick=${() => {
+          if (!folderPath) return;
+          if (isFolderActive) {
+            onSetFolderExpanded(folderPath, false);
+            onSelectFolder("");
+            return;
+          }
+          onSetFolderExpanded(folderPath, true);
+          onSelectFolder(folderPath);
+        }}
         style=${{
           paddingLeft: `${kFolderBasePaddingPx + depth * kTreeIndentPx}px`,
         }}
         title=${folderPath || node.name}
       >
-        <span class="arrow">▼</span>
+        <button
+          type="button"
+          class="tree-folder-toggle"
+          aria-label=${`${isCollapsed ? "Expand" : "Collapse"} ${node.name || "folder"}`}
+          aria-expanded=${isCollapsed ? "false" : "true"}
+          onclick=${(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if (!folderPath) return;
+            const shouldCollapse = !isCollapsed;
+            if (isFolderActive && shouldCollapse) {
+              onSelectFolder("");
+            }
+            onSetFolderExpanded(folderPath, isCollapsed);
+          }}
+        >
+          <span class="arrow">▼</span>
+        </button>
         <span class="tree-label">${node.name}</span>
       </div>
       <ul class=${`tree-children ${isCollapsed ? "hidden" : ""}`}>
@@ -239,7 +316,9 @@ const TreeNode = ({
               node=${childNode}
               depth=${depth + 1}
               expandedPaths=${expandedPaths}
-              onToggleFolder=${onToggleFolder}
+              onSetFolderExpanded=${onSetFolderExpanded}
+              onSelectFolder=${onSelectFolder}
+              onRequestDelete=${onRequestDelete}
               onSelectFile=${onSelectFile}
               selectedPath=${selectedPath}
               draftPaths=${draftPaths}
@@ -257,6 +336,7 @@ export const FileTree = ({
   onSelectFile = () => {},
   selectedPath = "",
   onPreviewFile = () => {},
+  isActive = true,
 }) => {
   const [treeRoot, setTreeRoot] = useState(null);
   const [loading, setLoading] = useState(true);
@@ -265,6 +345,8 @@ export const FileTree = ({
   const [draftPaths, setDraftPaths] = useState(readStoredDraftPaths);
   const [searchQuery, setSearchQuery] = useState("");
   const [searchActivePath, setSearchActivePath] = useState("");
+  const [deleteTargetPath, setDeleteTargetPath] = useState("");
+  const [deletingFile, setDeletingFile] = useState(false);
   const searchInputRef = useRef(null);
   const treeSignatureRef = useRef("");
 
@@ -297,21 +379,30 @@ export const FileTree = ({
   }, [loadTree]);
 
   useEffect(() => {
+    if (!isActive) return () => {};
     const refreshTree = () => {
       loadTree({ showLoading: false });
     };
+    const handleFileDeleted = (event) => {
+      const deletedPath = String(event?.detail?.path || "").trim();
+      if (!deletedPath) return;
+      setTreeRoot((previousRoot) => removeTreePath(previousRoot, deletedPath));
+    };
+    refreshTree();
     const refreshInterval = window.setInterval(
       refreshTree,
       kTreeRefreshIntervalMs,
     );
     window.addEventListener("alphaclaw:browse-file-saved", refreshTree);
     window.addEventListener("alphaclaw:browse-tree-refresh", refreshTree);
+    window.addEventListener("alphaclaw:browse-file-deleted", handleFileDeleted);
     return () => {
       window.clearInterval(refreshInterval);
       window.removeEventListener("alphaclaw:browse-file-saved", refreshTree);
       window.removeEventListener("alphaclaw:browse-tree-refresh", refreshTree);
+      window.removeEventListener("alphaclaw:browse-file-deleted", handleFileDeleted);
     };
-  }, [loadTree]);
+  }, [isActive, loadTree]);
 
   const normalizedSearchQuery = String(searchQuery || "")
     .trim()
@@ -331,6 +422,16 @@ export const FileTree = ({
     rootChildren.forEach((node) => collectFilePaths(node, filePaths));
     return filePaths;
   }, [rootChildren]);
+  const allTreeFilePaths = useMemo(() => {
+    const filePaths = [];
+    (treeRoot?.children || []).forEach((node) => collectFilePaths(node, filePaths));
+    return new Set(filePaths);
+  }, [treeRoot]);
+  const folderPaths = useMemo(() => {
+    const nextFolderPaths = new Set();
+    rootChildren.forEach((node) => collectFolderPaths(node, nextFolderPaths));
+    return nextFolderPaths;
+  }, [rootChildren]);
 
   useEffect(() => {
     if (!(expandedPaths instanceof Set)) return;
@@ -345,12 +446,16 @@ export const FileTree = ({
   useEffect(() => {
     if (!selectedPath) return;
     const ancestorFolderPaths = collectAncestorFolderPaths(selectedPath);
-    if (!ancestorFolderPaths.length) return;
+    const selectedIsFolder = folderPaths.has(selectedPath);
+    const pathsToExpand = selectedIsFolder
+      ? [...ancestorFolderPaths, selectedPath]
+      : ancestorFolderPaths;
+    if (!pathsToExpand.length) return;
     setExpandedPaths((previousPaths) => {
       if (!(previousPaths instanceof Set)) return previousPaths;
       let didChange = false;
       const nextPaths = new Set(previousPaths);
-      ancestorFolderPaths.forEach((ancestorPath) => {
+      pathsToExpand.forEach((ancestorPath) => {
         if (!nextPaths.has(ancestorPath)) {
           nextPaths.add(ancestorPath);
           didChange = true;
@@ -358,7 +463,7 @@ export const FileTree = ({
       });
       return didChange ? nextPaths : previousPaths;
     });
-  }, [selectedPath]);
+  }, [selectedPath, folderPaths]);
 
   useEffect(() => {
     const handleDraftIndexChanged = (event) => {
@@ -390,6 +495,7 @@ export const FileTree = ({
   }, []);
 
   useEffect(() => {
+    if (!isActive) return () => {};
     const handleGlobalSearchShortcut = (event) => {
       if (event.key !== "/") return;
       if (event.metaKey || event.ctrlKey || event.altKey) return;
@@ -409,7 +515,7 @@ export const FileTree = ({
     return () => {
       window.removeEventListener("keydown", handleGlobalSearchShortcut);
     };
-  }, []);
+  }, [isActive]);
 
   useEffect(() => {
     if (!isSearchActive) {
@@ -423,16 +529,82 @@ export const FileTree = ({
     onPreviewFile("");
   }, [isSearchActive, filteredFilePaths, searchActivePath, onPreviewFile]);
 
-  const toggleFolder = (folderPath) => {
+  const setFolderExpanded = (folderPath, nextExpanded) => {
     setExpandedPaths((previousPaths) => {
       const nextPaths =
         previousPaths instanceof Set ? new Set(previousPaths) : new Set();
+      if (nextExpanded === true) {
+        nextPaths.add(folderPath);
+        return nextPaths;
+      }
+      if (nextExpanded === false) {
+        nextPaths.delete(folderPath);
+        return nextPaths;
+      }
       if (nextPaths.has(folderPath)) nextPaths.delete(folderPath);
       else nextPaths.add(folderPath);
       return nextPaths;
     });
   };
 
+  const selectFolder = (folderPath) => {
+    onSelectFile(folderPath, {
+      directory: true,
+      preservePreview: true,
+    });
+  };
+
+  const requestDelete = (targetPath) => {
+    const normalizedTargetPath = normalizeBrowsePolicyPath(targetPath);
+    if (!normalizedTargetPath) return;
+    if (!allTreeFilePaths.has(targetPath)) {
+      showToast("Only files can be deleted", "warning");
+      return;
+    }
+    if (
+      matchesBrowsePolicyPath(kLockedBrowsePaths, normalizedTargetPath) ||
+      matchesBrowsePolicyPath(kProtectedBrowsePaths, normalizedTargetPath)
+    ) {
+      showToast("Protected or locked files cannot be deleted", "warning");
+      return;
+    }
+    setDeleteTargetPath(targetPath);
+  };
+
+  const confirmDelete = async () => {
+    if (!deleteTargetPath || deletingFile) return;
+    setDeletingFile(true);
+    try {
+      await deleteBrowseFile(deleteTargetPath);
+      window.dispatchEvent(
+        new CustomEvent("alphaclaw:browse-file-saved", {
+          detail: { path: deleteTargetPath },
+        }),
+      );
+      window.dispatchEvent(
+        new CustomEvent("alphaclaw:browse-file-deleted", {
+          detail: { path: deleteTargetPath },
+        }),
+      );
+      setTreeRoot((previousRoot) =>
+        removeTreePath(previousRoot, deleteTargetPath),
+      );
+      window.dispatchEvent(new CustomEvent("alphaclaw:browse-tree-refresh"));
+      onSelectFile("");
+      showToast("File deleted", "success");
+      setDeleteTargetPath("");
+    } catch (deleteError) {
+      const message = deleteError.message || "Could not delete file";
+      if (/path is not a file/i.test(message)) {
+        showToast("Only files can be deleted", "warning");
+      } else {
+        showToast(message, "error");
+      }
+    } finally {
+      setDeletingFile(false);
+    }
+  };
+
   const updateSearchQuery = (nextQuery) => {
     setSearchQuery(nextQuery);
   };
@@ -546,7 +718,9 @@ export const FileTree = ({
               key=${node.path || node.name}
               node=${node}
               expandedPaths=${safeExpandedPaths}
-              onToggleFolder=${toggleFolder}
+              onSetFolderExpanded=${setFolderExpanded}
+              onSelectFolder=${selectFolder}
+              onRequestDelete=${requestDelete}
               onSelectFile=${onSelectFile}
               selectedPath=${selectedPath}
               draftPaths=${draftPaths}
@@ -556,6 +730,22 @@ export const FileTree = ({
           `,
         )}
       </ul>
+      <${ConfirmDialog}
+        visible=${!!deleteTargetPath}
+        title="Delete file?"
+        message=${`Delete ${deleteTargetPath || "this file"}? This can be restored from diff view before sync.`}
+        confirmLabel="Delete"
+        confirmLoadingLabel="Deleting..."
+        cancelLabel="Cancel"
+        confirmTone="warning"
+        confirmLoading=${deletingFile}
+        confirmDisabled=${deletingFile}
+        onCancel=${() => {
+          if (deletingFile) return;
+          setDeleteTargetPath("");
+        }}
+        onConfirm=${confirmDelete}
+      />
     </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

@@ -1,6 +1,8 @@
 import { h } from "https://esm.sh/preact";
+import { useState } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
 import { LoadingSpinner } from "../loading-spinner.js";
+import { ConfirmDialog } from "../confirm-dialog.js";
 import { SqliteViewer } from "./sqlite-viewer.js";
 import { FileViewerToolbar } from "./toolbar.js";
 import { FileViewerStatusBanners } from "./status-banners.js";
@@ -19,11 +21,15 @@ export const FileViewer = ({
   isPreviewOnly = false,
   browseView = "edit",
   onRequestEdit = () => {},
+  onRequestClearSelection = () => {},
 }) => {
+  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
   const { state, derived, refs, actions, context } = useFileViewer({
     filePath,
     isPreviewOnly,
     browseView,
+    onRequestClearSelection,
+    onRequestEdit,
   });
 
   if (!state.hasSelectedPath) {
@@ -46,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}
@@ -53,22 +60,35 @@ export const FileViewer = ({
         isAudioFile=${state.isAudioFile}
         isSqliteFile=${state.isSqliteFile}
         saving=${state.saving}
+        deleting=${state.deleting}
+        restoring=${state.restoring}
+        canDeleteFile=${derived.canDeleteFile}
+        isDeleteBlocked=${derived.isDeleteBlocked}
+        isProtectedFile=${derived.isProtectedFile}
+        canRestoreDeletedDiff=${state.isDiffView && !!state.diffStatus?.isDeleted}
+        onRequestDelete=${() => setDeleteConfirmOpen(true)}
+        onRequestRestore=${actions.handleRestore}
       />
       <${FileViewerStatusBanners}
         isDiffView=${state.isDiffView}
         onRequestEdit=${onRequestEdit}
         normalizedPath=${context.normalizedPath}
+        isDeletedDiff=${!!state.diffStatus?.isDeleted}
         isLockedFile=${derived.isLockedFile}
         isProtectedFile=${derived.isProtectedFile}
         isProtectedLocked=${derived.isProtectedLocked}
         handleEditProtectedFile=${actions.handleEditProtectedFile}
       />
-      <${FrontmatterPanel}
-        isMarkdownFile=${state.isMarkdownFile}
-        parsedFrontmatter=${derived.parsedFrontmatter}
-        frontmatterCollapsed=${state.frontmatterCollapsed}
-        setFrontmatterCollapsed=${actions.setFrontmatterCollapsed}
-      />
+      ${!state.isDiffView
+        ? html`
+            <${FrontmatterPanel}
+              isMarkdownFile=${state.isMarkdownFile}
+              parsedFrontmatter=${derived.parsedFrontmatter}
+              frontmatterCollapsed=${state.frontmatterCollapsed}
+              setFrontmatterCollapsed=${actions.setFrontmatterCollapsed}
+            />
+          `
+        : null}
       ${state.loading
         ? html`
             <div class="file-viewer-loading-shell">
@@ -134,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}
@@ -152,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}
@@ -159,6 +181,25 @@ export const FileViewer = ({
                             />
                           `}
                     `}
+      <${ConfirmDialog}
+        visible=${deleteConfirmOpen}
+        title="Delete file?"
+        message=${`Delete ${context.normalizedPath || "this file"}? This can be restored from diff view before sync.`}
+        confirmLabel="Delete"
+        confirmLoadingLabel="Deleting..."
+        cancelLabel="Cancel"
+        confirmTone="warning"
+        confirmLoading=${state.deleting}
+        confirmDisabled=${!derived.canDeleteFile || state.deleting}
+        onCancel=${() => {
+          if (state.deleting) return;
+          setDeleteConfirmOpen(false);
+        }}
+        onConfirm=${async () => {
+          await actions.handleDelete();
+          setDeleteConfirmOpen(false);
+        }}
+      />
     </div>
   `;
 };