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

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

@@ -0,0 +1,6 @@
+export const kFileViewerModeStorageKey = "alphaclaw.browse.fileViewerMode";
+export const kLegacyFileViewerModeStorageKey = "alphaclawBrowseFileViewerMode";
+export const kEditorSelectionStorageKey = "alphaclaw.browse.editorSelectionByPath";
+export const kLoadingIndicatorDelayMs = 1000;
+export const kFileRefreshIntervalMs = 5000;
+export const kSqlitePageSize = 50;

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

@@ -0,0 +1,46 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { LoadingSpinner } from "../loading-spinner.js";
+
+const html = htm.bind(h);
+
+const getDiffLineClass = (line) => {
+  if (line.startsWith("+") && !line.startsWith("+++")) return "is-added";
+  if (line.startsWith("-") && !line.startsWith("---")) return "is-removed";
+  if (line.startsWith("@@")) return "is-hunk";
+  if (
+    line.startsWith("diff ") ||
+    line.startsWith("index ") ||
+    line.startsWith("--- ") ||
+    line.startsWith("+++ ")
+  ) {
+    return "is-header";
+  }
+  return "";
+};
+
+export const DiffViewer = ({ diffLoading, diffError, diffContent }) => html`
+  <div class="file-viewer-diff-shell">
+    ${diffLoading
+      ? html`
+          <div class="file-viewer-loading-shell">
+            <${LoadingSpinner} className="h-4 w-4" />
+          </div>
+        `
+      : diffError
+        ? html`<div class="file-viewer-state file-viewer-state-error">${diffError}</div>`
+        : html`
+            <pre class="file-viewer-diff-pre">
+${(diffContent || "").split("\n").map((line, lineIndex) => html`
+                <div
+                  key=${`${lineIndex}:${line.slice(0, 20)}`}
+                  class=${`file-viewer-diff-line ${getDiffLineClass(line)}`.trim()}
+                >
+                  ${line || " "}
+                </div>
+              `)}
+          </pre
+            >
+          `}
+  </div>
+`;

package/lib/public/js/components/file-viewer/editor-surface.js

@@ -0,0 +1,120 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+
+const html = htm.bind(h);
+
+const EditorTextarea = ({
+  overlay = false,
+  editorTextareaRef,
+  renderContent,
+  handleContentInput,
+  handleEditorScroll,
+  handleEditorSelectionChange,
+  isEditBlocked,
+  isPreviewOnly,
+}) => html`
+  <textarea
+    class=${overlay ? "file-viewer-editor file-viewer-editor-overlay" : "file-viewer-editor"}
+    ref=${editorTextareaRef}
+    value=${renderContent}
+    onInput=${handleContentInput}
+    onScroll=${handleEditorScroll}
+    onSelect=${handleEditorSelectionChange}
+    onKeyUp=${handleEditorSelectionChange}
+    onClick=${handleEditorSelectionChange}
+    disabled=${isEditBlocked || isPreviewOnly}
+    readonly=${isEditBlocked || isPreviewOnly}
+    spellcheck=${false}
+    autocorrect="off"
+    autocapitalize="off"
+    autocomplete="off"
+    data-gramm="false"
+    data-gramm_editor="false"
+    data-enable-grammarly="false"
+    wrap="soft"
+  ></textarea>
+`;
+
+export const EditorSurface = ({
+  editorShellClassName = "file-viewer-editor-shell",
+  editorShellAriaHidden,
+  editorLineNumbers,
+  editorLineNumbersRef,
+  editorLineNumberRowRefs,
+  shouldUseHighlightedEditor,
+  highlightedEditorLines,
+  editorHighlightRef,
+  editorHighlightLineRefs,
+  editorTextareaRef,
+  renderContent,
+  handleContentInput,
+  handleEditorScroll,
+  handleEditorSelectionChange,
+  isEditBlocked,
+  isPreviewOnly,
+}) => html`
+  <div class=${editorShellClassName} aria-hidden=${editorShellAriaHidden}>
+    <div class="file-viewer-editor-line-num-col" ref=${editorLineNumbersRef}>
+      ${editorLineNumbers.map(
+        (lineNumber) => html`
+          <div
+            class="file-viewer-editor-line-num"
+            key=${lineNumber}
+            ref=${(element) => {
+              editorLineNumberRowRefs.current[lineNumber - 1] = element;
+            }}
+          >
+            ${lineNumber}
+          </div>
+        `,
+      )}
+    </div>
+    ${shouldUseHighlightedEditor
+      ? html`
+          <div class="file-viewer-editor-stack">
+            <div class="file-viewer-editor-highlight" ref=${editorHighlightRef}>
+              ${highlightedEditorLines.map(
+                (line) => html`
+                  <div
+                    class="file-viewer-editor-highlight-line"
+                    key=${line.lineNumber}
+                    ref=${(element) => {
+                      editorHighlightLineRefs.current[line.lineNumber - 1] = element;
+                    }}
+                  >
+                    <span
+                      class="file-viewer-editor-highlight-line-content"
+                      dangerouslySetInnerHTML=${{
+                        __html: line.html,
+                      }}
+                    ></span>
+                  </div>
+                `,
+              )}
+            </div>
+            <${EditorTextarea}
+              overlay=${true}
+              editorTextareaRef=${editorTextareaRef}
+              renderContent=${renderContent}
+              handleContentInput=${handleContentInput}
+              handleEditorScroll=${handleEditorScroll}
+              handleEditorSelectionChange=${handleEditorSelectionChange}
+              isEditBlocked=${isEditBlocked}
+              isPreviewOnly=${isPreviewOnly}
+            />
+          </div>
+        `
+      : html`
+          <${EditorTextarea}
+            overlay=${false}
+            editorTextareaRef=${editorTextareaRef}
+            renderContent=${renderContent}
+            handleContentInput=${handleContentInput}
+            handleEditorScroll=${handleEditorScroll}
+            handleEditorSelectionChange=${handleEditorSelectionChange}
+            isEditBlocked=${isEditBlocked}
+            isPreviewOnly=${isPreviewOnly}
+          />
+        `}
+  </div>
+`;

package/lib/public/js/components/file-viewer/frontmatter-panel.js

@@ -0,0 +1,56 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { formatFrontmatterValue } from "../../lib/syntax-highlighters/index.js";
+
+const html = htm.bind(h);
+
+export const FrontmatterPanel = ({
+  isMarkdownFile,
+  parsedFrontmatter,
+  frontmatterCollapsed,
+  setFrontmatterCollapsed,
+}) => {
+  if (!isMarkdownFile || parsedFrontmatter.entries.length <= 0) return null;
+
+  return html`
+    <div class="frontmatter-box">
+      <button
+        type="button"
+        class="frontmatter-title"
+        onclick=${() => setFrontmatterCollapsed((collapsed) => !collapsed)}
+      >
+        <span
+          class=${`frontmatter-chevron ${frontmatterCollapsed ? "" : "open"}`}
+          aria-hidden="true"
+        >
+          <svg viewBox="0 0 20 20" focusable="false">
+            <path d="M7 4l6 6-6 6" />
+          </svg>
+        </span>
+        <span>frontmatter</span>
+      </button>
+      ${!frontmatterCollapsed
+        ? html`
+            <div class="frontmatter-grid">
+              ${parsedFrontmatter.entries.map((entry) => {
+                const formattedValue = formatFrontmatterValue(entry.rawValue);
+                const isMultilineValue = formattedValue.includes("\n");
+                return html`
+                  <div class="frontmatter-row" key=${entry.key}>
+                    <div class="frontmatter-key">${entry.key}</div>
+                    ${isMultilineValue
+                      ? html`
+                          <pre class="frontmatter-value frontmatter-value-pre">
+${formattedValue}</pre
+                          >
+                        `
+                      : html`<div class="frontmatter-value">${formattedValue}</div>`}
+                  </div>
+                `;
+              })}
+            </div>
+          `
+        : null}
+    </div>
+  `;
+};

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

@@ -0,0 +1,164 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { LoadingSpinner } from "../loading-spinner.js";
+import { SqliteViewer } from "./sqlite-viewer.js";
+import { FileViewerToolbar } from "./toolbar.js";
+import { FileViewerStatusBanners } from "./status-banners.js";
+import { FrontmatterPanel } from "./frontmatter-panel.js";
+import { DiffViewer } from "./diff-viewer.js";
+import { MediaPreview } from "./media-preview.js";
+import { EditorSurface } from "./editor-surface.js";
+import { MarkdownSplitView } from "./markdown-split-view.js";
+import { kSqlitePageSize } from "./constants.js";
+import { useFileViewer } from "./use-file-viewer.js";
+
+const html = htm.bind(h);
+
+export const FileViewer = ({
+  filePath = "",
+  isPreviewOnly = false,
+  browseView = "edit",
+  onRequestEdit = () => {},
+}) => {
+  const { state, derived, refs, actions, context } = useFileViewer({
+    filePath,
+    isPreviewOnly,
+    browseView,
+  });
+
+  if (!state.hasSelectedPath) {
+    return html`
+      <div class="file-viewer-empty">
+        <div class="file-viewer-empty-mark">[ ]</div>
+        <div class="file-viewer-empty-title">Browse and edit files<br />Syncs to git</div>
+      </div>
+    `;
+  }
+
+  return html`
+    <div class="file-viewer">
+      <${FileViewerToolbar}
+        pathSegments=${derived.pathSegments}
+        isDirty=${derived.isDirty}
+        isPreviewOnly=${state.isPreviewOnly}
+        isDiffView=${state.isDiffView}
+        isMarkdownFile=${state.isMarkdownFile}
+        viewMode=${state.viewMode}
+        handleChangeViewMode=${actions.handleChangeViewMode}
+        handleSave=${actions.handleSave}
+        loading=${state.loading}
+        canEditFile=${derived.canEditFile}
+        isEditBlocked=${derived.isEditBlocked}
+        isImageFile=${state.isImageFile}
+        isAudioFile=${state.isAudioFile}
+        isSqliteFile=${state.isSqliteFile}
+        saving=${state.saving}
+      />
+      <${FileViewerStatusBanners}
+        isDiffView=${state.isDiffView}
+        onRequestEdit=${onRequestEdit}
+        normalizedPath=${context.normalizedPath}
+        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.loading
+        ? html`
+            <div class="file-viewer-loading-shell">
+              ${state.showDelayedLoadingSpinner
+                ? html`<${LoadingSpinner} className="h-4 w-4" />`
+                : null}
+            </div>
+          `
+        : state.error
+          ? html`<div class="file-viewer-state file-viewer-state-error">${state.error}</div>`
+          : state.isFolderPath
+            ? html`
+                <div class="file-viewer-state">
+                  Folder selected. Choose a file from this folder in the tree.
+                </div>
+              `
+            : state.isImageFile || state.isAudioFile
+              ? html`
+                  <${MediaPreview}
+                    isImageFile=${state.isImageFile}
+                    imageDataUrl=${state.imageDataUrl}
+                    pathSegments=${derived.pathSegments}
+                    isAudioFile=${state.isAudioFile}
+                    audioDataUrl=${state.audioDataUrl}
+                  />
+                `
+              : state.isSqliteFile
+                ? html`
+                    <${SqliteViewer}
+                      sqliteSummary=${state.sqliteSummary}
+                      sqliteSelectedTable=${state.sqliteSelectedTable}
+                      setSqliteSelectedTable=${actions.setSqliteSelectedTable}
+                      sqliteTableOffset=${state.sqliteTableOffset}
+                      setSqliteTableOffset=${actions.setSqliteTableOffset}
+                      sqliteTableLoading=${state.sqliteTableLoading}
+                      sqliteTableError=${state.sqliteTableError}
+                      sqliteTableData=${state.sqliteTableData}
+                      kSqlitePageSize=${kSqlitePageSize}
+                    />
+                  `
+                : state.isDiffView
+                  ? html`
+                      <${DiffViewer}
+                        diffLoading=${state.diffLoading}
+                        diffError=${state.diffError}
+                        diffContent=${state.diffContent}
+                      />
+                    `
+                  : html`
+                      ${state.isMarkdownFile
+                        ? html`
+                            <${MarkdownSplitView}
+                              viewMode=${state.viewMode}
+                              previewRef=${refs.previewRef}
+                              handlePreviewScroll=${actions.handlePreviewScroll}
+                              previewHtml=${state.previewHtml}
+                              editorLineNumbers=${derived.editorLineNumbers}
+                              editorLineNumbersRef=${refs.editorLineNumbersRef}
+                              editorLineNumberRowRefs=${refs.editorLineNumberRowRefs}
+                              highlightedEditorLines=${derived.highlightedEditorLines}
+                              editorHighlightRef=${refs.editorHighlightRef}
+                              editorHighlightLineRefs=${refs.editorHighlightLineRefs}
+                              editorTextareaRef=${refs.editorTextareaRef}
+                              renderContent=${state.renderContent}
+                              handleContentInput=${actions.handleContentInput}
+                              handleEditorScroll=${actions.handleEditorScroll}
+                              handleEditorSelectionChange=${actions.handleEditorSelectionChange}
+                              isEditBlocked=${derived.isEditBlocked}
+                              isPreviewOnly=${state.isPreviewOnly}
+                            />
+                          `
+                        : html`
+                            <${EditorSurface}
+                              editorLineNumbers=${derived.editorLineNumbers}
+                              editorLineNumbersRef=${refs.editorLineNumbersRef}
+                              editorLineNumberRowRefs=${refs.editorLineNumberRowRefs}
+                              shouldUseHighlightedEditor=${derived.shouldUseHighlightedEditor}
+                              highlightedEditorLines=${derived.highlightedEditorLines}
+                              editorHighlightRef=${refs.editorHighlightRef}
+                              editorHighlightLineRefs=${refs.editorHighlightLineRefs}
+                              editorTextareaRef=${refs.editorTextareaRef}
+                              renderContent=${state.renderContent}
+                              handleContentInput=${actions.handleContentInput}
+                              handleEditorScroll=${actions.handleEditorScroll}
+                              handleEditorSelectionChange=${actions.handleEditorSelectionChange}
+                              isEditBlocked=${derived.isEditBlocked}
+                              isPreviewOnly=${state.isPreviewOnly}
+                            />
+                          `}
+                    `}
+    </div>
+  `;
+};

package/lib/public/js/components/file-viewer/markdown-split-view.js

@@ -0,0 +1,51 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { EditorSurface } from "./editor-surface.js";
+
+const html = htm.bind(h);
+
+export const MarkdownSplitView = ({
+  viewMode,
+  previewRef,
+  handlePreviewScroll,
+  previewHtml,
+  editorLineNumbers,
+  editorLineNumbersRef,
+  editorLineNumberRowRefs,
+  highlightedEditorLines,
+  editorHighlightRef,
+  editorHighlightLineRefs,
+  editorTextareaRef,
+  renderContent,
+  handleContentInput,
+  handleEditorScroll,
+  handleEditorSelectionChange,
+  isEditBlocked,
+  isPreviewOnly,
+}) => html`
+  <div
+    class=${`file-viewer-preview ${viewMode === "preview" ? "" : "file-viewer-pane-hidden"}`}
+    ref=${previewRef}
+    onscroll=${handlePreviewScroll}
+    aria-hidden=${viewMode === "preview" ? "false" : "true"}
+    dangerouslySetInnerHTML=${{ __html: previewHtml }}
+  ></div>
+  <${EditorSurface}
+    editorShellClassName=${`file-viewer-editor-shell ${viewMode === "edit" ? "" : "file-viewer-pane-hidden"}`}
+    editorShellAriaHidden=${viewMode === "edit" ? "false" : "true"}
+    editorLineNumbers=${editorLineNumbers}
+    editorLineNumbersRef=${editorLineNumbersRef}
+    editorLineNumberRowRefs=${editorLineNumberRowRefs}
+    shouldUseHighlightedEditor=${true}
+    highlightedEditorLines=${highlightedEditorLines}
+    editorHighlightRef=${editorHighlightRef}
+    editorHighlightLineRefs=${editorHighlightLineRefs}
+    editorTextareaRef=${editorTextareaRef}
+    renderContent=${renderContent}
+    handleContentInput=${handleContentInput}
+    handleEditorScroll=${handleEditorScroll}
+    handleEditorSelectionChange=${handleEditorSelectionChange}
+    isEditBlocked=${isEditBlocked}
+    isPreviewOnly=${isPreviewOnly}
+  />
+`;

package/lib/public/js/components/file-viewer/media-preview.js

@@ -0,0 +1,44 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+
+const html = htm.bind(h);
+
+export const MediaPreview = ({
+  isImageFile,
+  imageDataUrl,
+  pathSegments,
+  isAudioFile,
+  audioDataUrl,
+}) => {
+  if (isImageFile) {
+    return html`
+      <div class="file-viewer-image-shell">
+        ${imageDataUrl
+          ? html`
+              <img
+                src=${imageDataUrl}
+                alt=${pathSegments[pathSegments.length - 1] || "Selected image"}
+                class="file-viewer-image"
+              />
+            `
+          : html`<div class="file-viewer-state">Could not render image preview.</div>`}
+      </div>
+    `;
+  }
+
+  if (isAudioFile) {
+    return html`
+      <div class="file-viewer-audio-shell">
+        ${audioDataUrl
+          ? html`
+              <audio class="file-viewer-audio-player" controls preload="metadata" src=${audioDataUrl}>
+                Your browser does not support audio playback.
+              </audio>
+            `
+          : html`<div class="file-viewer-state">Could not render audio preview.</div>`}
+      </div>
+    `;
+  }
+
+  return null;
+};

package/lib/public/js/components/file-viewer/scroll-sync.js

@@ -0,0 +1,95 @@
+import { useRef } from "https://esm.sh/preact/hooks";
+
+export const getScrollRatio = (element) => {
+  if (!element) return 0;
+  const maxScrollTop = element.scrollHeight - element.clientHeight;
+  if (maxScrollTop <= 0) return 0;
+  return element.scrollTop / maxScrollTop;
+};
+
+export const setScrollByRatio = (element, ratio) => {
+  if (!element) return;
+  const maxScrollTop = element.scrollHeight - element.clientHeight;
+  if (maxScrollTop <= 0) {
+    element.scrollTop = 0;
+    return;
+  }
+  const clampedRatio = Math.max(0, Math.min(1, ratio));
+  element.scrollTop = maxScrollTop * clampedRatio;
+};
+
+export const useScrollSync = ({
+  viewMode,
+  setViewMode,
+  previewRef,
+  editorTextareaRef,
+  editorLineNumbersRef,
+  editorHighlightRef,
+}) => {
+  const viewScrollRatioRef = useRef(0);
+  const isSyncingScrollRef = useRef(false);
+
+  const handleEditorScroll = (event) => {
+    if (isSyncingScrollRef.current) return;
+    const nextScrollTop = event.currentTarget.scrollTop;
+    const nextRatio = getScrollRatio(event.currentTarget);
+    viewScrollRatioRef.current = nextRatio;
+    if (!editorLineNumbersRef.current) return;
+    editorLineNumbersRef.current.scrollTop = nextScrollTop;
+    if (editorHighlightRef.current) {
+      editorHighlightRef.current.scrollTop = nextScrollTop;
+      editorHighlightRef.current.scrollLeft = event.currentTarget.scrollLeft;
+    }
+    if (previewRef.current) {
+      isSyncingScrollRef.current = true;
+      setScrollByRatio(previewRef.current, nextRatio);
+      window.requestAnimationFrame(() => {
+        isSyncingScrollRef.current = false;
+      });
+    }
+  };
+
+  const handlePreviewScroll = (event) => {
+    if (isSyncingScrollRef.current) return;
+    const nextRatio = getScrollRatio(event.currentTarget);
+    viewScrollRatioRef.current = nextRatio;
+    isSyncingScrollRef.current = true;
+    setScrollByRatio(editorTextareaRef.current, nextRatio);
+    setScrollByRatio(editorLineNumbersRef.current, nextRatio);
+    setScrollByRatio(editorHighlightRef.current, nextRatio);
+    window.requestAnimationFrame(() => {
+      isSyncingScrollRef.current = false;
+    });
+  };
+
+  const handleChangeViewMode = (nextMode) => {
+    if (nextMode === viewMode) return;
+    const nextRatio =
+      viewMode === "preview"
+        ? getScrollRatio(previewRef.current)
+        : getScrollRatio(editorTextareaRef.current);
+    viewScrollRatioRef.current = nextRatio;
+    setViewMode(nextMode);
+    window.requestAnimationFrame(() => {
+      isSyncingScrollRef.current = true;
+      if (nextMode === "preview") {
+        setScrollByRatio(previewRef.current, nextRatio);
+      } else {
+        setScrollByRatio(editorTextareaRef.current, nextRatio);
+        setScrollByRatio(editorLineNumbersRef.current, nextRatio);
+        setScrollByRatio(editorHighlightRef.current, nextRatio);
+      }
+      window.requestAnimationFrame(() => {
+        isSyncingScrollRef.current = false;
+      });
+    });
+  };
+
+  return {
+    viewScrollRatioRef,
+    isSyncingScrollRef,
+    handleEditorScroll,
+    handlePreviewScroll,
+    handleChangeViewMode,
+  };
+};