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

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

@@ -0,0 +1,167 @@
+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);
+
+export const SqliteViewer = ({
+  sqliteSummary,
+  sqliteSelectedTable,
+  setSqliteSelectedTable,
+  sqliteTableOffset,
+  setSqliteTableOffset,
+  sqliteTableLoading,
+  sqliteTableError,
+  sqliteTableData,
+  kSqlitePageSize,
+}) => {
+  const sqliteRows = Array.isArray(sqliteTableData?.rows) ? sqliteTableData.rows : [];
+  const sqliteColumns =
+    Array.isArray(sqliteTableData?.columns) && sqliteTableData.columns.length
+      ? sqliteTableData.columns
+      : (sqliteSummary?.objects || []).find(
+          (entry) => entry?.name === sqliteSelectedTable,
+        )?.columns || [];
+  const sqliteTotalRows = Number(sqliteTableData?.totalRows || 0);
+  const sqliteCanGoPrev = sqliteTableOffset > 0;
+  const sqliteCanGoNext = sqliteTableOffset + kSqlitePageSize < sqliteTotalRows;
+
+  return html`
+    <div class="file-viewer-sqlite-shell">
+      ${sqliteSummary?.objects?.length
+        ? html`
+            <div class="file-viewer-sqlite-layout">
+              <div class="file-viewer-sqlite-list">
+                ${sqliteSummary.objects.map(
+                  (entry) => html`
+                    <button
+                      type="button"
+                      class=${`file-viewer-sqlite-card ${sqliteSelectedTable === entry.name ? "is-active" : ""}`}
+                      onclick=${() => {
+                        if (!entry?.name || sqliteSelectedTable === entry.name) return;
+                        setSqliteSelectedTable(entry.name);
+                        setSqliteTableOffset(0);
+                      }}
+                    >
+                      <div class="file-viewer-sqlite-title">
+                        <span>${entry.name}</span>
+                        <span class="file-viewer-sqlite-type">${entry.type}</span>
+                      </div>
+                    </button>
+                  `,
+                )}
+              </div>
+              <div class="file-viewer-sqlite-table-shell">
+                ${sqliteSelectedTable
+                  ? html`
+                      <div class="file-viewer-sqlite-table-header">
+                        <span class="file-viewer-sqlite-table-name">
+                          ${sqliteSelectedTable}
+                        </span>
+                        <div class="file-viewer-sqlite-table-nav">
+                          <button
+                            type="button"
+                            class="ac-btn-secondary text-xs px-2 py-1 rounded-md"
+                            disabled=${!sqliteCanGoPrev}
+                            onclick=${() =>
+                              setSqliteTableOffset((previousOffset) =>
+                                Math.max(0, previousOffset - kSqlitePageSize),
+                              )}
+                          >
+                            Prev
+                          </button>
+                          <button
+                            type="button"
+                            class="ac-btn-secondary text-xs px-2 py-1 rounded-md"
+                            disabled=${!sqliteCanGoNext}
+                            onclick=${() =>
+                              setSqliteTableOffset(
+                                (previousOffset) => previousOffset + kSqlitePageSize,
+                              )}
+                          >
+                            Next
+                          </button>
+                        </div>
+                      </div>
+                      <div class="file-viewer-sqlite-table-meta">
+                        ${sqliteTotalRows
+                          ? `${Math.min(sqliteTableOffset + 1, sqliteTotalRows)}-${Math.min(sqliteTableOffset + kSqlitePageSize, sqliteTotalRows)} of ${sqliteTotalRows} rows`
+                          : "No rows"}
+                      </div>
+                      ${sqliteTableLoading
+                        ? html`
+                            <div class="file-viewer-loading-shell">
+                              <${LoadingSpinner} className="h-4 w-4" />
+                            </div>
+                          `
+                        : sqliteTableError
+                          ? html`
+                              <div class="file-viewer-state file-viewer-state-error">
+                                ${sqliteTableError}
+                              </div>
+                            `
+                          : html`
+                              <div class="file-viewer-sqlite-table-wrap">
+                                <table class="file-viewer-sqlite-table">
+                                  <thead>
+                                    <tr>
+                                      ${sqliteColumns.map(
+                                        (column) => html`<th>${column.name}</th>`,
+                                      )}
+                                    </tr>
+                                  </thead>
+                                  <tbody>
+                                    ${sqliteRows.length
+                                      ? sqliteRows.map(
+                                          (row, rowIndex) => html`
+                                            <tr key=${rowIndex}>
+                                              ${sqliteColumns.map((column) => {
+                                                const cellValue = row?.[column.name];
+                                                const displayValue =
+                                                  cellValue === null
+                                                    ? "NULL"
+                                                    : typeof cellValue === "object"
+                                                      ? JSON.stringify(cellValue)
+                                                      : String(cellValue ?? "");
+                                                return html`
+                                                  <td title=${displayValue}>
+                                                    ${displayValue}
+                                                  </td>
+                                                `;
+                                              })}
+                                            </tr>
+                                          `,
+                                        )
+                                      : html`
+                                          <tr>
+                                            <td colspan=${Math.max(1, sqliteColumns.length)}>
+                                              <span class="file-viewer-sqlite-table-empty">
+                                                No rows
+                                              </span>
+                                            </td>
+                                          </tr>
+                                        `}
+                                  </tbody>
+                                </table>
+                              </div>
+                            `}
+                    `
+                  : html`
+                      <div class="file-viewer-state">Select a table to view rows.</div>
+                    `}
+              </div>
+            </div>
+            <div class="file-viewer-sqlite-footer">
+              ${sqliteSummary.truncated
+                ? `Showing ${sqliteSummary.objects.length} of ${sqliteSummary.totalObjects} tables/views`
+                : `${sqliteSummary.totalObjects} tables/views`}
+            </div>
+          `
+        : html`
+            <div class="file-viewer-state">
+              SQLite database loaded, but no tables/views were found.
+            </div>
+          `}
+    </div>
+  `;
+};

package/lib/public/js/components/file-viewer/status-banners.js

@@ -0,0 +1,59 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { ActionButton } from "../action-button.js";
+import { LockLineIcon } from "../icons.js";
+
+const html = htm.bind(h);
+
+export const FileViewerStatusBanners = ({
+  isDiffView,
+  onRequestEdit,
+  normalizedPath,
+  isLockedFile,
+  isProtectedFile,
+  isProtectedLocked,
+  handleEditProtectedFile,
+}) => html`
+  ${isDiffView
+    ? 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"
+          />
+        </div>
+      `
+    : null}
+  ${!isDiffView && isLockedFile
+    ? html`
+        <div class="file-viewer-protected-banner is-locked">
+          <${LockLineIcon} className="file-viewer-protected-banner-icon" />
+          <div class="file-viewer-protected-banner-text">
+            This file is managed by AlphaClaw and cannot be edited.
+          </div>
+        </div>
+      `
+    : null}
+  ${!isDiffView && isProtectedFile
+    ? html`
+        <div class="file-viewer-protected-banner">
+          <div class="file-viewer-protected-banner-text">
+            Protected file. Changes may break workspace behavior.
+          </div>
+          ${isProtectedLocked
+            ? html`
+                <${ActionButton}
+                  onClick=${handleEditProtectedFile}
+                  tone="warning"
+                  size="sm"
+                  idleLabel="Edit anyway"
+                />
+              `
+            : null}
+        </div>
+      `
+    : null}
+`;

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