@chrysb/alphaclaw 0.3.4 → 0.3.5-beta.1

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

@@ -0,0 +1,58 @@
+import {
+  kEditorSelectionStorageKey,
+  kFileViewerModeStorageKey,
+  kLegacyFileViewerModeStorageKey,
+} from "./constants.js";
+
+export const readStoredFileViewerMode = () => {
+  try {
+    const storedMode = String(
+      window.localStorage.getItem(kFileViewerModeStorageKey) ||
+        window.localStorage.getItem(kLegacyFileViewerModeStorageKey) ||
+        "",
+    ).trim();
+    return storedMode === "preview" ? "preview" : "edit";
+  } catch {
+    return "edit";
+  }
+};
+
+export const readEditorSelectionStorageMap = () => {
+  try {
+    const rawStorageValue = window.localStorage.getItem(kEditorSelectionStorageKey);
+    if (!rawStorageValue) return {};
+    const parsedStorageValue = JSON.parse(rawStorageValue);
+    if (!parsedStorageValue || typeof parsedStorageValue !== "object") return {};
+    return parsedStorageValue;
+  } catch {
+    return {};
+  }
+};
+
+export const readStoredEditorSelection = (filePath) => {
+  const safePath = String(filePath || "").trim();
+  if (!safePath) return null;
+  const storageMap = readEditorSelectionStorageMap();
+  const selection = storageMap[safePath];
+  if (!selection || typeof selection !== "object") return null;
+  return {
+    start: selection.start,
+    end: selection.end,
+  };
+};
+
+export const writeStoredEditorSelection = (filePath, selection) => {
+  const safePath = String(filePath || "").trim();
+  if (!safePath || !selection || typeof selection !== "object") return;
+  try {
+    const nextStorageValue = readEditorSelectionStorageMap();
+    nextStorageValue[safePath] = {
+      start: selection.start,
+      end: selection.end,
+    };
+    window.localStorage.setItem(
+      kEditorSelectionStorageKey,
+      JSON.stringify(nextStorageValue),
+    );
+  } catch {}
+};

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

@@ -0,0 +1,77 @@
+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";
+
+const html = htm.bind(h);
+
+export const FileViewerToolbar = ({
+  pathSegments,
+  isDirty,
+  isPreviewOnly,
+  isDiffView,
+  isMarkdownFile,
+  viewMode,
+  handleChangeViewMode,
+  handleSave,
+  loading,
+  canEditFile,
+  isEditBlocked,
+  isImageFile,
+  isAudioFile,
+  isSqliteFile,
+  saving,
+}) => html`
+  <div class="file-viewer-tabbar">
+    <div class="file-viewer-tab active">
+      <span class="file-icon">f</span>
+      <span class="file-viewer-breadcrumb">
+        ${pathSegments.map(
+          (segment, index) => html`
+            <span class="file-viewer-breadcrumb-item">
+              <span class=${index === pathSegments.length - 1 ? "is-current" : ""}>
+                ${segment}
+              </span>
+              ${index < pathSegments.length - 1 && html`<span class="file-viewer-sep">></span>`}
+            </span>
+          `,
+        )}
+      </span>
+      ${isDirty ? html`<span class="file-viewer-dirty-dot" aria-hidden="true"></span>` : null}
+    </div>
+    <div class="file-viewer-tabbar-spacer"></div>
+    ${isPreviewOnly ? html`<div class="file-viewer-preview-pill">Preview</div>` : null}
+    ${!isDiffView &&
+    isMarkdownFile &&
+    html`
+      <${SegmentedControl}
+        className="mr-2.5"
+        options=${[
+          { label: "edit", value: "edit" },
+          { label: "preview", value: "preview" },
+        ]}
+        value=${viewMode}
+        onChange=${handleChangeViewMode}
+      />
+    `}
+    ${!isDiffView
+      ? !isImageFile && !isAudioFile && !isSqliteFile
+        ? html`
+            <${ActionButton}
+              onClick=${handleSave}
+              disabled=${loading || !isDirty || !canEditFile || isEditBlocked}
+              loading=${saving}
+              tone=${isDirty ? "primary" : "secondary"}
+              size="sm"
+              idleLabel="Save"
+              loadingLabel="Saving..."
+              idleIcon=${SaveFillIcon}
+              idleIconClassName="file-viewer-save-icon"
+              className="file-viewer-save-action"
+            />
+          `
+        : null
+      : null}
+  </div>
+`;

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

@@ -0,0 +1,87 @@
+import { useEffect } from "https://esm.sh/preact/hooks";
+import { readStoredEditorSelection } from "./storage.js";
+import { clampSelectionIndex } from "./utils.js";
+import { getScrollRatio } from "./scroll-sync.js";
+
+export const useEditorSelectionRestore = ({
+  canEditFile,
+  loading,
+  hasSelectedPath,
+  normalizedPath,
+  loadedFilePathRef,
+  restoredSelectionPathRef,
+  viewMode,
+  content,
+  editorTextareaRef,
+  editorLineNumbersRef,
+  editorHighlightRef,
+  viewScrollRatioRef,
+}) => {
+  useEffect(() => {
+    if (!canEditFile || loading || !hasSelectedPath) return () => {};
+    if (loadedFilePathRef.current !== normalizedPath) return () => {};
+    if (restoredSelectionPathRef.current === normalizedPath) return () => {};
+    if (viewMode !== "edit") return () => {};
+    const storedSelection = readStoredEditorSelection(normalizedPath);
+    if (!storedSelection) {
+      restoredSelectionPathRef.current = normalizedPath;
+      return () => {};
+    }
+    let frameId = 0;
+    let attempts = 0;
+    const restoreSelection = () => {
+      const textareaElement = editorTextareaRef.current;
+      if (!textareaElement) {
+        attempts += 1;
+        if (attempts < 6) frameId = window.requestAnimationFrame(restoreSelection);
+        return;
+      }
+      const maxIndex = String(content || "").length;
+      const start = clampSelectionIndex(storedSelection.start, maxIndex);
+      const end = clampSelectionIndex(storedSelection.end, maxIndex);
+      textareaElement.focus();
+      textareaElement.setSelectionRange(start, Math.max(start, end));
+      window.requestAnimationFrame(() => {
+        const nextTextareaElement = editorTextareaRef.current;
+        if (!nextTextareaElement) return;
+        const safeContent = String(content || "");
+        const safeStart = clampSelectionIndex(start, safeContent.length);
+        const lineIndex = safeContent.slice(0, safeStart).split("\n").length - 1;
+        const computedStyle = window.getComputedStyle(nextTextareaElement);
+        const parsedLineHeight = Number.parseFloat(computedStyle.lineHeight || "");
+        const lineHeight =
+          Number.isFinite(parsedLineHeight) && parsedLineHeight > 0 ? parsedLineHeight : 20;
+        const nextScrollTop = Math.max(
+          0,
+          lineIndex * lineHeight - nextTextareaElement.clientHeight * 0.4,
+        );
+        nextTextareaElement.scrollTop = nextScrollTop;
+        if (editorLineNumbersRef.current) {
+          editorLineNumbersRef.current.scrollTop = nextScrollTop;
+        }
+        if (editorHighlightRef.current) {
+          editorHighlightRef.current.scrollTop = nextScrollTop;
+        }
+        viewScrollRatioRef.current = getScrollRatio(nextTextareaElement);
+      });
+      restoredSelectionPathRef.current = normalizedPath;
+    };
+    frameId = window.requestAnimationFrame(restoreSelection);
+    return () => {
+      if (frameId) window.cancelAnimationFrame(frameId);
+    };
+  }, [
+    canEditFile,
+    loading,
+    hasSelectedPath,
+    normalizedPath,
+    content,
+    viewMode,
+    loadedFilePathRef,
+    restoredSelectionPathRef,
+    editorTextareaRef,
+    editorLineNumbersRef,
+    editorHighlightRef,
+    viewScrollRatioRef,
+  ]);
+};

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

@@ -0,0 +1,49 @@
+import { useEffect, useState } from "https://esm.sh/preact/hooks";
+import { fetchBrowseFileDiff } from "../../lib/api.js";
+
+export const useFileDiff = ({
+  hasSelectedPath,
+  isDiffView,
+  isPreviewOnly,
+  normalizedPath,
+}) => {
+  const [diffLoading, setDiffLoading] = useState(false);
+  const [diffError, setDiffError] = useState("");
+  const [diffContent, setDiffContent] = useState("");
+
+  useEffect(() => {
+    let active = true;
+    if (!hasSelectedPath || !isDiffView || isPreviewOnly) {
+      setDiffLoading(false);
+      setDiffError("");
+      setDiffContent("");
+      return () => {
+        active = false;
+      };
+    }
+    const loadDiff = async () => {
+      setDiffLoading(true);
+      setDiffError("");
+      try {
+        const data = await fetchBrowseFileDiff(normalizedPath);
+        if (!active) return;
+        setDiffContent(String(data?.content || ""));
+      } catch (nextError) {
+        if (!active) return;
+        setDiffError(nextError.message || "Could not load diff");
+      } finally {
+        if (active) setDiffLoading(false);
+      }
+    };
+    loadDiff();
+    return () => {
+      active = false;
+    };
+  }, [hasSelectedPath, isDiffView, isPreviewOnly, normalizedPath]);
+
+  return {
+    diffLoading,
+    diffError,
+    diffContent,
+  };
+};

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

@@ -0,0 +1,302 @@
+import { useEffect, useRef } from "https://esm.sh/preact/hooks";
+import { fetchBrowseSqliteTable, fetchFileContent } from "../../lib/api.js";
+import {
+  clearStoredFileDraft,
+  readStoredFileDraft,
+  updateDraftIndex,
+} from "../../lib/browse-draft-state.js";
+import { showToast } from "../toast.js";
+import { kFileRefreshIntervalMs, kSqlitePageSize } from "./constants.js";
+
+export const useFileLoader = ({
+  hasSelectedPath,
+  normalizedPath,
+  isSqliteFile,
+  sqliteSelectedTable,
+  sqliteTableOffset,
+  canEditFile,
+  isFolderPath,
+  loading,
+  saving,
+  initialContent,
+  isDirty,
+  setContent,
+  setInitialContent,
+  setFileKind,
+  setImageDataUrl,
+  setAudioDataUrl,
+  setSqliteSummary,
+  setSqliteSelectedTable,
+  setSqliteTableOffset,
+  setSqliteTableLoading,
+  setSqliteTableError,
+  setSqliteTableData,
+  setError,
+  setIsFolderPath,
+  setExternalChangeNoticeShown,
+  externalChangeNoticeShown,
+  viewScrollRatioRef,
+  setLoading,
+}) => {
+  const loadedFilePathRef = useRef("");
+  const restoredSelectionPathRef = useRef("");
+  const fileRefreshInFlightRef = useRef(false);
+
+  useEffect(() => {
+    let active = true;
+    loadedFilePathRef.current = "";
+    restoredSelectionPathRef.current = "";
+    if (!hasSelectedPath) {
+      setContent("");
+      setInitialContent("");
+      setFileKind("text");
+      setImageDataUrl("");
+      setAudioDataUrl("");
+      setSqliteSummary(null);
+      setSqliteSelectedTable("");
+      setSqliteTableOffset(0);
+      setSqliteTableLoading(false);
+      setSqliteTableError("");
+      setSqliteTableData(null);
+      setError("");
+      setIsFolderPath(false);
+      viewScrollRatioRef.current = 0;
+      loadedFilePathRef.current = "";
+      return () => {
+        active = false;
+      };
+    }
+    // Clear previous file state immediately so large content from the last
+    // file is never rendered/parses under the next file's syntax mode.
+    setContent("");
+    setInitialContent("");
+    setImageDataUrl("");
+    setAudioDataUrl("");
+    setSqliteSummary(null);
+    setSqliteSelectedTable("");
+    setSqliteTableOffset(0);
+    setSqliteTableLoading(false);
+    setSqliteTableError("");
+    setSqliteTableData(null);
+    setFileKind("text");
+    setError("");
+    setIsFolderPath(false);
+    setExternalChangeNoticeShown(false);
+    viewScrollRatioRef.current = 0;
+
+    const loadFile = async () => {
+      setLoading(true);
+      setError("");
+      setIsFolderPath(false);
+      try {
+        const data = await fetchFileContent(normalizedPath);
+        if (!active) return;
+        const nextFileKind =
+          data?.kind === "image"
+            ? "image"
+            : data?.kind === "audio"
+              ? "audio"
+              : data?.kind === "sqlite"
+                ? "sqlite"
+                : "text";
+        setFileKind(nextFileKind);
+        if (nextFileKind === "image") {
+          setImageDataUrl(String(data?.imageDataUrl || ""));
+          setAudioDataUrl("");
+          setSqliteSummary(null);
+          setSqliteSelectedTable("");
+          setSqliteTableOffset(0);
+          setSqliteTableLoading(false);
+          setSqliteTableError("");
+          setSqliteTableData(null);
+          setContent("");
+          setInitialContent("");
+          setExternalChangeNoticeShown(false);
+          viewScrollRatioRef.current = 0;
+          loadedFilePathRef.current = normalizedPath;
+          restoredSelectionPathRef.current = "";
+          return;
+        }
+        if (nextFileKind === "audio") {
+          setAudioDataUrl(String(data?.audioDataUrl || ""));
+          setImageDataUrl("");
+          setSqliteSummary(null);
+          setSqliteSelectedTable("");
+          setSqliteTableOffset(0);
+          setSqliteTableLoading(false);
+          setSqliteTableError("");
+          setSqliteTableData(null);
+          setContent("");
+          setInitialContent("");
+          setExternalChangeNoticeShown(false);
+          viewScrollRatioRef.current = 0;
+          loadedFilePathRef.current = normalizedPath;
+          restoredSelectionPathRef.current = "";
+          return;
+        }
+        if (nextFileKind === "sqlite") {
+          const nextSqliteSummary = data?.sqliteSummary || null;
+          const nextObjects = nextSqliteSummary?.objects || [];
+          const defaultTable =
+            nextObjects.find((entry) => entry?.type === "table")?.name ||
+            nextObjects[0]?.name ||
+            "";
+          setSqliteSummary(nextSqliteSummary);
+          setSqliteSelectedTable(defaultTable);
+          setSqliteTableOffset(0);
+          setSqliteTableLoading(false);
+          setSqliteTableError("");
+          setSqliteTableData(null);
+          setImageDataUrl("");
+          setAudioDataUrl("");
+          setContent("");
+          setInitialContent("");
+          setExternalChangeNoticeShown(false);
+          viewScrollRatioRef.current = 0;
+          loadedFilePathRef.current = normalizedPath;
+          restoredSelectionPathRef.current = "";
+          return;
+        }
+        setImageDataUrl("");
+        setAudioDataUrl("");
+        setSqliteSummary(null);
+        setSqliteSelectedTable("");
+        setSqliteTableOffset(0);
+        setSqliteTableLoading(false);
+        setSqliteTableError("");
+        setSqliteTableData(null);
+        const nextContent = data.content || "";
+        const draftContent = readStoredFileDraft(normalizedPath);
+        setContent(draftContent || nextContent);
+        updateDraftIndex(normalizedPath, Boolean(draftContent && draftContent !== nextContent), {
+          dispatchEvent: (event) => window.dispatchEvent(event),
+        });
+        setInitialContent(nextContent);
+        setExternalChangeNoticeShown(false);
+        viewScrollRatioRef.current = 0;
+        loadedFilePathRef.current = normalizedPath;
+        restoredSelectionPathRef.current = "";
+      } catch (loadError) {
+        if (!active) return;
+        setFileKind("text");
+        setImageDataUrl("");
+        setAudioDataUrl("");
+        setSqliteSummary(null);
+        setSqliteSelectedTable("");
+        setSqliteTableOffset(0);
+        setSqliteTableLoading(false);
+        setSqliteTableError("");
+        setSqliteTableData(null);
+        const message = loadError.message || "Could not load file";
+        if (/path is not a file/i.test(message)) {
+          setContent("");
+          setInitialContent("");
+          setIsFolderPath(true);
+          setError("");
+          loadedFilePathRef.current = normalizedPath;
+          restoredSelectionPathRef.current = "";
+          return;
+        }
+        setError(message);
+      } finally {
+        if (active) setLoading(false);
+      }
+    };
+    loadFile();
+    return () => {
+      active = false;
+    };
+  }, [hasSelectedPath, normalizedPath]);
+
+  useEffect(() => {
+    if (!isSqliteFile || !normalizedPath || !sqliteSelectedTable) {
+      setSqliteTableData(null);
+      setSqliteTableError("");
+      setSqliteTableLoading(false);
+      return () => {};
+    }
+    let active = true;
+    const loadSqliteTable = async () => {
+      setSqliteTableLoading(true);
+      setSqliteTableError("");
+      try {
+        const tableData = await fetchBrowseSqliteTable({
+          filePath: normalizedPath,
+          table: sqliteSelectedTable,
+          limit: kSqlitePageSize,
+          offset: sqliteTableOffset,
+        });
+        if (!active) return;
+        setSqliteTableData(tableData);
+      } catch (nextError) {
+        if (!active) return;
+        setSqliteTableError(nextError.message || "Could not load sqlite table");
+      } finally {
+        if (active) setSqliteTableLoading(false);
+      }
+    };
+    loadSqliteTable();
+    return () => {
+      active = false;
+    };
+  }, [isSqliteFile, normalizedPath, sqliteSelectedTable, sqliteTableOffset]);
+
+  useEffect(() => {
+    if (!hasSelectedPath || isFolderPath || !canEditFile) return () => {};
+    const refreshFromDisk = async () => {
+      if (loading || saving) return;
+      if (fileRefreshInFlightRef.current) return;
+      fileRefreshInFlightRef.current = true;
+      try {
+        const data = await fetchFileContent(normalizedPath);
+        const diskContent = data.content || "";
+        if (diskContent === initialContent) {
+          setExternalChangeNoticeShown(false);
+          return;
+        }
+        // Auto-refresh only when editor has no unsaved work.
+        if (!isDirty) {
+          setContent(diskContent);
+          setInitialContent(diskContent);
+          clearStoredFileDraft(normalizedPath);
+          updateDraftIndex(normalizedPath, false, {
+            dispatchEvent: (event) => window.dispatchEvent(event),
+          });
+          setExternalChangeNoticeShown(false);
+          window.dispatchEvent(new CustomEvent("alphaclaw:browse-tree-refresh"));
+          return;
+        }
+        if (!externalChangeNoticeShown) {
+          showToast(
+            "This file changed on disk. Save to overwrite or reload by re-opening.",
+            "error",
+          );
+          setExternalChangeNoticeShown(true);
+        }
+      } catch {
+        // Ignore transient refresh errors to avoid interrupting editing.
+      } finally {
+        fileRefreshInFlightRef.current = false;
+      }
+    };
+    const intervalId = window.setInterval(refreshFromDisk, kFileRefreshIntervalMs);
+    return () => {
+      window.clearInterval(intervalId);
+    };
+  }, [
+    hasSelectedPath,
+    isFolderPath,
+    canEditFile,
+    loading,
+    saving,
+    normalizedPath,
+    initialContent,
+    isDirty,
+    externalChangeNoticeShown,
+  ]);
+
+  return {
+    loadedFilePathRef,
+    restoredSelectionPathRef,
+  };
+};

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

@@ -0,0 +1,32 @@
+import { useEffect } from "https://esm.sh/preact/hooks";
+import {
+  clearStoredFileDraft,
+  updateDraftIndex,
+  writeStoredFileDraft,
+} from "../../lib/browse-draft-state.js";
+
+export const useFileViewerDraftSync = ({
+  loadedFilePathRef,
+  normalizedPath,
+  canEditFile,
+  hasSelectedPath,
+  loading,
+  content,
+  initialContent,
+}) => {
+  useEffect(() => {
+    if (loadedFilePathRef.current !== normalizedPath) return;
+    if (!canEditFile || !hasSelectedPath || loading) return;
+    if (content === initialContent) {
+      clearStoredFileDraft(normalizedPath);
+      updateDraftIndex(normalizedPath, false, {
+        dispatchEvent: (event) => window.dispatchEvent(event),
+      });
+      return;
+    }
+    writeStoredFileDraft(normalizedPath, content);
+    updateDraftIndex(normalizedPath, true, {
+      dispatchEvent: (event) => window.dispatchEvent(event),
+    });
+  }, [canEditFile, hasSelectedPath, loading, content, initialContent, normalizedPath]);
+};

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

@@ -0,0 +1,25 @@
+import { useEffect } from "https://esm.sh/preact/hooks";
+
+export const useFileViewerHotkeys = ({
+  canEditFile,
+  isPreviewOnly,
+  isDiffView,
+  viewMode,
+  handleSave,
+}) => {
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      const isSaveShortcut =
+        (event.metaKey || event.ctrlKey) &&
+        !event.shiftKey &&
+        !event.altKey &&
+        String(event.key || "").toLowerCase() === "s";
+      if (!isSaveShortcut) return;
+      if (!canEditFile || isPreviewOnly || isDiffView || viewMode !== "edit") return;
+      event.preventDefault();
+      void handleSave();
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [canEditFile, isPreviewOnly, isDiffView, viewMode, handleSave]);
+};