@chrysb/alphaclaw 0.3.2 → 0.3.3

package/lib/public/js/components/icons.js

@@ -40,3 +40,185 @@ export const CloseIcon = ({ className = "" }) => html`
     />
   </svg>
 `;
+
+export const HomeLineIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      d="M13 19H19V9.97815L12 4.53371L5 9.97815V19H11V13H13V19ZM21 20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V9.48907C3 9.18048 3.14247 8.88917 3.38606 8.69972L11.3861 2.47749C11.7472 2.19663 12.2528 2.19663 12.6139 2.47749L20.6139 8.69972C20.8575 8.88917 21 9.18048 21 9.48907V20Z"
+    />
+  </svg>
+`;
+
+export const FolderLineIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      d="M4 5V19H20V7H11.5858L9.58579 5H4ZM12.4142 5H21C21.5523 5 22 5.44772 22 6V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H10.4142L12.4142 5Z"
+    />
+  </svg>
+`;
+
+export const MarkdownFillIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      d="M3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3ZM7 15.5V11.5L9 13.5L11 11.5V15.5H13V8.5H11L9 10.5L7 8.5H5V15.5H7ZM18 12.5V8.5H16V12.5H14L17 15.5L20 12.5H18Z"
+    />
+  </svg>
+`;
+
+export const File3LineIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      d="M21 8V20.9932C21 21.5501 20.5552 22 20.0066 22H3.9934C3.44495 22 3 21.556 3 21.0082V2.9918C3 2.45531 3.4487 2 4.00221 2H14.9968L21 8ZM19 9H14V4H5V20H19V9Z"
+    />
+  </svg>
+`;
+
+export const JavascriptFillIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      d="M6 3C4.34315 3 3 4.34315 3 6V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V6C21 4.34315 19.6569 3 18 3H6ZM13.3344 16.055C14.0531 16.6343 14.7717 16.9203 15.4904 16.913C15.9304 16.913 16.2677 16.8323 16.5024 16.671C16.7297 16.517 16.8434 16.297 16.8434 16.011C16.8434 15.7177 16.7297 15.4683 16.5024 15.263C16.2677 15.0577 15.8241 14.8523 15.1714 14.647C14.3867 14.4197 13.7817 14.1263 13.3564 13.767C12.9384 13.4077 12.7257 12.9053 12.7184 12.26C12.7184 11.6513 12.9824 11.1417 13.5104 10.731C14.0237 10.3203 14.6801 10.115 15.4794 10.115C16.5941 10.115 17.4887 10.3863 18.1634 10.929L17.3934 12.128C17.1221 11.9153 16.8104 11.7613 16.4584 11.666C16.1064 11.556 15.7911 11.501 15.5124 11.501C15.1311 11.501 14.8267 11.5707 14.5994 11.71C14.3721 11.8493 14.2584 12.0327 14.2584 12.26C14.2584 12.5093 14.3977 12.722 14.6764 12.898C14.9551 13.0667 15.4317 13.2537 16.1064 13.459C16.9204 13.701 17.4997 14.0237 17.8444 14.427C18.1891 14.8303 18.3614 15.3437 18.3614 15.967C18.3614 16.605 18.1157 17.155 17.6244 17.617C17.1404 18.0717 16.4364 18.31 15.5124 18.332C14.3024 18.332 13.2904 17.969 12.4764 17.243L13.3344 16.055ZM7.80405 16.693C8.03872 16.8397 8.32105 16.913 8.65105 16.913C8.99572 16.913 9.28172 16.814 9.50905 16.616C9.73639 16.4107 9.85005 16.055 9.85005 15.549V10.247H11.3351V15.835C11.3131 16.7003 11.0637 17.3237 10.5871 17.705C10.3157 17.9323 10.0187 18.0937 9.69605 18.189C9.37339 18.2843 9.06172 18.332 8.76105 18.332C8.21105 18.332 7.72339 18.2367 7.29805 18.046C6.84339 17.8407 6.46205 17.4777 6.15405 16.957L7.18805 16.11C7.37872 16.3667 7.58405 16.561 7.80405 16.693Z"
+    />
+  </svg>
+`;
+
+export const Image2FillIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      d="M5 11.1005L7 9.1005L12.5 14.6005L16 11.1005L19 14.1005V5H5V11.1005ZM4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM15.5 10C14.6716 10 14 9.32843 14 8.5C14 7.67157 14.6716 7 15.5 7C16.3284 7 17 7.67157 17 8.5C17 9.32843 16.3284 10 15.5 10Z"
+    />
+  </svg>
+`;
+
+export const TerminalFillIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      d="M10.9999 12L3.92886 19.0711L2.51465 17.6569L8.1715 12L2.51465 6.34317L3.92886 4.92896L10.9999 12ZM10.9999 19H20.9999V21H10.9999V19Z"
+    />
+  </svg>
+`;
+
+export const BracesLineIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      d="M4 18V14.3C4 13.4716 3.32843 12.8 2.5 12.8H2V11.2H2.5C3.32843 11.2 4 10.5284 4 9.7V6C4 4.34315 5.34315 3 7 3H8V5H7C6.44772 5 6 5.44772 6 6V10.1C6 10.9858 5.42408 11.7372 4.62623 12C5.42408 12.2628 6 13.0142 6 13.9V18C6 18.5523 6.44772 19 7 19H8V21H7C5.34315 21 4 19.6569 4 18ZM20 14.3V18C20 19.6569 18.6569 21 17 21H16V19H17C17.5523 19 18 18.5523 18 18V13.9C18 13.0142 18.5759 12.2628 19.3738 12C18.5759 11.7372 18 10.9858 18 10.1V6C18 5.44772 17.5523 5 17 5H16V3H17C18.6569 3 20 4.34315 20 6V9.7C20 10.5284 20.6716 11.2 21.5 11.2H22V12.8H21.5C20.6716 12.8 20 13.4716 20 14.3Z"
+    />
+  </svg>
+`;
+
+export const FileCodeLineIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      d="M15 4H5V20H19V8H15V4ZM3 2.9918C3 2.44405 3.44749 2 3.9985 2H16L20.9997 7L21 20.9925C21 21.5489 20.5551 22 20.0066 22H3.9934C3.44476 22 3 21.5447 3 21.0082V2.9918ZM17.6569 12L14.1213 15.5355L12.7071 14.1213L14.8284 12L12.7071 9.87868L14.1213 8.46447L17.6569 12ZM6.34315 12L9.87868 8.46447L11.2929 9.87868L9.17157 12L11.2929 14.1213L9.87868 15.5355L6.34315 12Z"
+    />
+  </svg>
+`;
+
+export const Database2LineIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      d="M5 12.5C5 12.8134 5.46101 13.3584 6.53047 13.8931C7.91405 14.5849 9.87677 15 12 15C14.1232 15 16.0859 14.5849 17.4695 13.8931C18.539 13.3584 19 12.8134 19 12.5V10.3287C17.35 11.3482 14.8273 12 12 12C9.17273 12 6.64996 11.3482 5 10.3287V12.5ZM19 15.3287C17.35 16.3482 14.8273 17 12 17C9.17273 17 6.64996 16.3482 5 15.3287V17.5C5 17.8134 5.46101 18.3584 6.53047 18.8931C7.91405 19.5849 9.87677 20 12 20C14.1232 20 16.0859 19.5849 17.4695 18.8931C18.539 18.3584 19 17.8134 19 17.5V15.3287ZM3 17.5V7.5C3 5.01472 7.02944 3 12 3C16.9706 3 21 5.01472 21 7.5V17.5C21 19.9853 16.9706 22 12 22C7.02944 22 3 19.9853 3 17.5ZM12 10C14.1232 10 16.0859 9.58492 17.4695 8.89313C18.539 8.3584 19 7.81342 19 7.5C19 7.18658 18.539 6.6416 17.4695 6.10687C16.0859 5.41508 14.1232 5 12 5C9.87677 5 7.91405 5.41508 6.53047 6.10687C5.46101 6.6416 5 7.18658 5 7.5C5 7.81342 5.46101 8.3584 6.53047 8.89313C7.91405 9.58492 9.87677 10 12 10Z"
+    />
+  </svg>
+`;
+
+export const HashtagIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      d="M7.78428 14L8.2047 10H4V8H8.41491L8.94043 3H10.9514L10.4259 8H14.4149L14.9404 3H16.9514L16.4259 8H20V10H16.2157L15.7953 14H20V16H15.5851L15.0596 21H13.0486L13.5741 16H9.58509L9.05957 21H7.04855L7.57407 16H4V14H7.78428ZM9.7953 14H13.7843L14.2047 10H10.2157L9.7953 14Z"
+    />
+  </svg>
+`;
+
+export const GitBranchLineIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      d="M7.10508 15.2101C8.21506 15.6501 9 16.7334 9 18C9 19.6569 7.65685 21 6 21C4.34315 21 3 19.6569 3 18C3 16.6938 3.83481 15.5825 5 15.1707V8.82929C3.83481 8.41746 3 7.30622 3 6C3 4.34315 4.34315 3 6 3C7.65685 3 9 4.34315 9 6C9 7.30622 8.16519 8.41746 7 8.82929V11.9996C7.83566 11.3719 8.87439 11 10 11H14C15.3835 11 16.5482 10.0635 16.8949 8.78991C15.7849 8.34988 15 7.26661 15 6C15 4.34315 16.3431 3 18 3C19.6569 3 21 4.34315 21 6C21 7.3332 20.1303 8.46329 18.9274 8.85392C18.5222 11.2085 16.4703 13 14 13H10C8.61653 13 7.45179 13.9365 7.10508 15.2101ZM6 17C5.44772 17 5 17.4477 5 18C5 18.5523 5.44772 19 6 19C6.55228 19 7 18.5523 7 18C7 17.4477 6.55228 17 6 17ZM6 5C5.44772 5 5 5.44772 5 6C5 6.55228 5.44772 7 6 7C6.55228 7 7 6.55228 7 6C7 5.44772 6.55228 5 6 5ZM18 5C17.4477 5 17 5.44772 17 6C17 6.55228 17.4477 7 18 7C18.5523 7 19 6.55228 19 6C19 5.44772 18.5523 5 18 5Z"
+    />
+  </svg>
+`;
+
+export const GithubFillIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      d="M12.001 2C6.47598 2 2.00098 6.475 2.00098 12C2.00098 16.425 4.86348 20.1625 8.83848 21.4875C9.33848 21.575 9.52598 21.275 9.52598 21.0125C9.52598 20.775 9.51348 19.9875 9.51348 19.15C7.00098 19.6125 6.35098 18.5375 6.15098 17.975C6.03848 17.6875 5.55098 16.8 5.12598 16.5625C4.77598 16.375 4.27598 15.9125 5.11348 15.9C5.90098 15.8875 6.46348 16.625 6.65098 16.925C7.55098 18.4375 8.98848 18.0125 9.56348 17.75C9.65098 17.1 9.91348 16.6625 10.201 16.4125C7.97598 16.1625 5.65098 15.3 5.65098 11.475C5.65098 10.3875 6.03848 9.4875 6.67598 8.7875C6.57598 8.5375 6.22598 7.5125 6.77598 6.1375C6.77598 6.1375 7.61348 5.875 9.52598 7.1625C10.326 6.9375 11.176 6.825 12.026 6.825C12.876 6.825 13.726 6.9375 14.526 7.1625C16.4385 5.8625 17.276 6.1375 17.276 6.1375C17.826 7.5125 17.476 8.5375 17.376 8.7875C18.0135 9.4875 18.401 10.375 18.401 11.475C18.401 15.3125 16.0635 16.1625 13.8385 16.4125C14.201 16.725 14.5135 17.325 14.5135 18.2625C14.5135 19.6 14.501 20.675 14.501 21.0125C14.501 21.275 14.6885 21.5875 15.1885 21.4875C19.259 20.1133 21.9999 16.2963 22.001 12C22.001 6.475 17.526 2 12.001 2Z"
+    />
+  </svg>
+`;
+
+export const SaveFillIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      d="M18 21V13H6V21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3H17L21 7V20C21 20.5523 20.5523 21 20 21H18ZM16 21H8V15H16V21Z"
+    />
+  </svg>
+`;

package/lib/public/js/components/sidebar-git-panel.js

@@ -0,0 +1,149 @@
+import { h } from "https://esm.sh/preact";
+import { useEffect, useState } from "https://esm.sh/preact/hooks";
+import htm from "https://esm.sh/htm";
+import { fetchBrowseGitSummary } from "../lib/api.js";
+import { GitBranchLineIcon, GithubFillIcon } from "./icons.js";
+import { LoadingSpinner } from "./loading-spinner.js";
+
+const html = htm.bind(h);
+const kRefreshMs = 10000;
+
+const formatCommitTime = (unixSeconds) => {
+  if (!unixSeconds) return "";
+  try {
+    return new Date(unixSeconds * 1000).toLocaleString();
+  } catch {
+    return "";
+  }
+};
+
+const getRepoName = (summary) => {
+  const slug = String(summary?.repoSlug || "").trim();
+  if (slug) return slug;
+  const pathValue = String(summary?.repoPath || "");
+  const segment = pathValue.split("/").filter(Boolean).pop();
+  return segment || "repo";
+};
+
+export const SidebarGitPanel = () => {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+  const [summary, setSummary] = useState(null);
+
+  useEffect(() => {
+    let active = true;
+    let intervalId = null;
+
+    const loadSummary = async () => {
+      if (!active) return;
+      try {
+        const data = await fetchBrowseGitSummary();
+        if (!active) return;
+        setSummary(data);
+        setError("");
+      } catch (nextError) {
+        if (!active) return;
+        setError(nextError.message || "Could not load git summary");
+      } finally {
+        if (active) setLoading(false);
+      }
+    };
+
+    const handleFileSaved = () => {
+      loadSummary();
+    };
+
+    loadSummary();
+    intervalId = window.setInterval(loadSummary, kRefreshMs);
+    window.addEventListener("alphaclaw:browse-file-saved", handleFileSaved);
+
+    return () => {
+      active = false;
+      if (intervalId) window.clearInterval(intervalId);
+      window.removeEventListener("alphaclaw:browse-file-saved", handleFileSaved);
+    };
+  }, []);
+
+  if (loading) {
+    return html`
+      <div class="sidebar-git-panel sidebar-git-loading" aria-label="Loading git summary">
+        <${LoadingSpinner} className="h-4 w-4" />
+      </div>
+    `;
+  }
+
+  if (error) {
+    return html`<div class="sidebar-git-panel sidebar-git-panel-error">${error}</div>`;
+  }
+
+  if (!summary?.isRepo) {
+    return html`
+      <div class="sidebar-git-panel">
+        <div class="sidebar-git-meta">No git repo at this root</div>
+      </div>
+    `;
+  }
+
+  return html`
+    <div class="sidebar-git-panel">
+      <div class="sidebar-git-bar">
+        ${summary.repoUrl
+          ? html`
+              <a
+                class="sidebar-git-bar-main sidebar-git-link"
+                href=${summary.repoUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                title=${summary.repoUrl}
+              >
+                <${GithubFillIcon} className="sidebar-git-bar-icon" />
+                <span class="sidebar-git-repo-name">${getRepoName(summary)}</span>
+              </a>
+            `
+          : html`
+              <span class="sidebar-git-bar-main">
+                <${GithubFillIcon} className="sidebar-git-bar-icon" />
+                <span class="sidebar-git-repo-name">${getRepoName(summary)}</span>
+              </span>
+            `}
+      </div>
+      <div class="sidebar-git-bar sidebar-git-bar-secondary">
+        <span class="sidebar-git-bar-main">
+          <${GitBranchLineIcon} className="sidebar-git-bar-icon" />
+          <span class="sidebar-git-branch">${summary.branch || "unknown"}</span>
+        </span>
+        <span class=${`sidebar-git-dirty ${summary.isDirty ? "is-dirty" : "is-clean"}`}>
+          ${summary.isDirty ? "dirty" : "clean"}
+        </span>
+      </div>
+      ${(summary.commits || []).length > 0
+        ? html`
+            <ul class="sidebar-git-list">
+              ${(summary.commits || []).slice(0, 4).map(
+                (commit) => html`
+                  <li title=${formatCommitTime(commit.timestamp)}>
+                    ${commit.url
+                      ? html`
+                          <a
+                            class="sidebar-git-commit-link"
+                            href=${commit.url}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                          >
+                            <span class="sidebar-git-hash">${commit.shortHash}</span>
+                            <span>${commit.message}</span>
+                          </a>
+                        `
+                      : html`
+                          <span class="sidebar-git-hash">${commit.shortHash}</span>
+                          <span>${commit.message}</span>
+                        `}
+                  </li>
+                `,
+              )}
+            </ul>
+          `
+        : null}
+    </div>
+  `;
+};

package/lib/public/js/components/sidebar.js

@@ -0,0 +1,272 @@
+import { h } from "https://esm.sh/preact";
+import { useEffect, useRef, useState } from "https://esm.sh/preact/hooks";
+import htm from "https://esm.sh/htm";
+import { HomeLineIcon, FolderLineIcon } from "./icons.js";
+import { FileTree } from "./file-tree.js";
+import { UpdateActionButton } from "./update-action-button.js";
+import { SidebarGitPanel } from "./sidebar-git-panel.js";
+
+const html = htm.bind(h);
+const kUiSettingsStorageKey = "alphaclaw.uiSettings";
+const kLegacyUiSettingsStorageKey = "alphaclawUiSettings";
+const kBrowseBottomPanelUiSettingKey = "browseBottomPanelHeightPx";
+const kBrowsePanelMinHeightPx = 120;
+const kBrowseBottomMinHeightPx = 120;
+const kBrowseResizerHeightPx = 6;
+const kDefaultBrowseBottomPanelHeightPx = 160;
+const kLegacyBrowsePanelUiStorageKey = "alphaclawBrowsePanelHeightPx";
+
+const readStoredBrowseBottomPanelHeight = () => {
+  try {
+    const rawSettings =
+      window.localStorage.getItem(kUiSettingsStorageKey) ||
+      window.localStorage.getItem(kLegacyUiSettingsStorageKey);
+    if (rawSettings) {
+      const parsedSettings = JSON.parse(rawSettings);
+      const fromSharedSettings = Number.parseInt(
+        String(parsedSettings?.[kBrowseBottomPanelUiSettingKey] || ""),
+        10,
+      );
+      if (Number.isFinite(fromSharedSettings) && fromSharedSettings > 0) {
+        return fromSharedSettings;
+      }
+    }
+    const legacyRawValue = window.localStorage.getItem(kLegacyBrowsePanelUiStorageKey);
+    const parsedValue = Number.parseInt(String(legacyRawValue || ""), 10);
+    return Number.isFinite(parsedValue) && parsedValue > 0
+      ? parsedValue
+      : kDefaultBrowseBottomPanelHeightPx;
+  } catch {
+    return kDefaultBrowseBottomPanelHeightPx;
+  }
+};
+
+export const AppSidebar = ({
+  mobileSidebarOpen = false,
+  authEnabled = false,
+  menuRef = null,
+  menuOpen = false,
+  onToggleMenu = () => {},
+  onLogout = () => {},
+  sidebarTab = "menu",
+  onSelectSidebarTab = () => {},
+  navSections = [],
+  selectedNavId = "",
+  onSelectNavItem = () => {},
+  selectedBrowsePath = "",
+  onSelectBrowseFile = () => {},
+  acHasUpdate = false,
+  acLatest = "",
+  acDismissed = false,
+  acUpdating = false,
+  onAcUpdate = () => {},
+}) => {
+  const browseLayoutRef = useRef(null);
+  const browseBottomPanelRef = useRef(null);
+  const browseResizeStartRef = useRef({ startY: 0, startHeight: 0 });
+  const [browseBottomPanelHeightPx, setBrowseBottomPanelHeightPx] = useState(
+    readStoredBrowseBottomPanelHeight,
+  );
+  const [isResizingBrowsePanels, setIsResizingBrowsePanels] = useState(false);
+
+  useEffect(() => {
+    try {
+      const rawSettings =
+        window.localStorage.getItem(kUiSettingsStorageKey) ||
+        window.localStorage.getItem(kLegacyUiSettingsStorageKey);
+      const parsedSettings = rawSettings ? JSON.parse(rawSettings) : {};
+      const nextSettings =
+        parsedSettings && typeof parsedSettings === "object"
+          ? { ...parsedSettings }
+          : {};
+      nextSettings[kBrowseBottomPanelUiSettingKey] = browseBottomPanelHeightPx;
+      window.localStorage.setItem(kUiSettingsStorageKey, JSON.stringify(nextSettings));
+    } catch {}
+  }, [browseBottomPanelHeightPx]);
+
+  const getClampedBrowseBottomPanelHeight = (value) => {
+    const layoutElement = browseLayoutRef.current;
+    if (!layoutElement) return value;
+    const layoutRect = layoutElement.getBoundingClientRect();
+    const maxHeight = Math.max(
+      kBrowseBottomMinHeightPx,
+      layoutRect.height - kBrowsePanelMinHeightPx - kBrowseResizerHeightPx,
+    );
+    return Math.max(
+      kBrowseBottomMinHeightPx,
+      Math.min(maxHeight, value),
+    );
+  };
+
+  const resizeBrowsePanelWithClientY = (clientY) => {
+    const { startY, startHeight } = browseResizeStartRef.current;
+    const proposedHeight = startHeight + (startY - clientY);
+    setBrowseBottomPanelHeightPx(getClampedBrowseBottomPanelHeight(proposedHeight));
+  };
+
+  useEffect(() => {
+    const layoutElement = browseLayoutRef.current;
+    if (!layoutElement || typeof ResizeObserver === "undefined") return () => {};
+    const observer = new ResizeObserver(() => {
+      setBrowseBottomPanelHeightPx((currentHeight) =>
+        getClampedBrowseBottomPanelHeight(currentHeight),
+      );
+    });
+    observer.observe(layoutElement);
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    if (!isResizingBrowsePanels) return () => {};
+    const handlePointerMove = (event) => resizeBrowsePanelWithClientY(event.clientY);
+    const handlePointerUp = () => setIsResizingBrowsePanels(false);
+    window.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("pointerup", handlePointerUp);
+    return () => {
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("pointerup", handlePointerUp);
+    };
+  }, [isResizingBrowsePanels]);
+
+  const onBrowsePanelResizerPointerDown = (event) => {
+    event.preventDefault();
+    const measuredHeight =
+      browseBottomPanelRef.current?.getBoundingClientRect().height ||
+      browseBottomPanelHeightPx;
+    browseResizeStartRef.current = {
+      startY: event.clientY,
+      startHeight: measuredHeight,
+    };
+    setBrowseBottomPanelHeightPx(getClampedBrowseBottomPanelHeight(measuredHeight));
+    setIsResizingBrowsePanels(true);
+  };
+
+  return html`
+    <div class=${`app-sidebar ${mobileSidebarOpen ? "mobile-open" : ""}`}>
+    <div class="sidebar-brand">
+      <img src="./img/logo.svg" alt="" width="20" height="20" />
+      <span><span style="color: var(--accent)">alpha</span>claw</span>
+      ${authEnabled && html`
+        <div class="brand-menu" ref=${menuRef}>
+          <button
+            class="brand-menu-trigger"
+            onclick=${onToggleMenu}
+            aria-label="Menu"
+          >
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+              <circle cx="8" cy="3" r="1.5" />
+              <circle cx="8" cy="8" r="1.5" />
+              <circle cx="8" cy="13" r="1.5" />
+            </svg>
+          </button>
+          ${menuOpen && html`
+            <div class="brand-dropdown">
+              <a
+                href="#"
+                onclick=${(event) => {
+                  event.preventDefault();
+                  onLogout();
+                }}
+              >Log out</a>
+            </div>
+          `}
+        </div>
+      `}
+    </div>
+    <div class="sidebar-tabs">
+      <button
+        class=${`sidebar-tab ${sidebarTab === "menu" ? "active" : ""}`}
+        aria-label="Menu tab"
+        title="Menu"
+        onclick=${() => onSelectSidebarTab("menu")}
+      >
+        <${HomeLineIcon} className="sidebar-tab-icon" />
+      </button>
+      <button
+        class=${`sidebar-tab ${sidebarTab === "browse" ? "active" : ""}`}
+        aria-label="Browse tab"
+        title="Browse"
+        onclick=${() => onSelectSidebarTab("browse")}
+      >
+        <${FolderLineIcon} className="sidebar-tab-icon" />
+      </button>
+    </div>
+    ${sidebarTab === "menu"
+      ? navSections.map(
+          (section) => html`
+            <div class="sidebar-label">${section.label}</div>
+            <nav class="sidebar-nav">
+              ${section.items.map(
+                (item) => html`
+                  <a
+                    class=${selectedNavId === item.id ? "active" : ""}
+                    onclick=${() => onSelectNavItem(item.id)}
+                  >
+                    ${item.label}
+                  </a>
+                `,
+              )}
+            </nav>
+          `,
+        )
+      : html`
+          <div class="sidebar-browse-layout" ref=${browseLayoutRef}>
+            <div
+              class="sidebar-browse-panel"
+            >
+              <${FileTree}
+                onSelectFile=${onSelectBrowseFile}
+                selectedPath=${selectedBrowsePath}
+              />
+            </div>
+            <div
+              class=${`sidebar-browse-resizer ${isResizingBrowsePanels ? "is-resizing" : ""}`}
+              onpointerdown=${onBrowsePanelResizerPointerDown}
+              role="separator"
+              aria-orientation="horizontal"
+              aria-label="Resize browse and git panels"
+            ></div>
+            <div class="sidebar-browse-bottom">
+              <div
+                class="sidebar-browse-bottom-inner"
+                ref=${browseBottomPanelRef}
+                style=${{ height: `${browseBottomPanelHeightPx}px` }}
+              >
+              <${SidebarGitPanel} />
+              ${acHasUpdate && acLatest && !acDismissed
+                ? html`
+                    <${UpdateActionButton}
+                      onClick=${onAcUpdate}
+                      loading=${acUpdating}
+                      warning=${true}
+                      idleLabel=${`Update to v${acLatest}`}
+                      loadingLabel="Updating..."
+                      className="w-full justify-center"
+                    />
+                  `
+                : null}
+              </div>
+            </div>
+          </div>
+        `}
+    ${sidebarTab === "menu"
+      ? html`
+          <div class="sidebar-footer">
+            ${acHasUpdate && acLatest && !acDismissed
+              ? html`
+                  <${UpdateActionButton}
+                    onClick=${onAcUpdate}
+                    loading=${acUpdating}
+                    warning=${true}
+                    idleLabel=${`Update to v${acLatest}`}
+                    loadingLabel="Updating..."
+                    className="w-full justify-center"
+                  />
+                `
+              : null}
+          </div>
+        `
+      : null}
+  </div>
+`;
+};

package/lib/public/js/lib/api.js

@@ -343,3 +343,29 @@ export async function fetchWebhookRequest(name, id) {
   );
   return parseJsonOrThrow(res, 'Could not load webhook request');
 }
+
+export const fetchBrowseTree = async (depth = 10) => {
+  const params = new URLSearchParams({ depth: String(depth) });
+  const res = await authFetch(`/api/browse/tree?${params.toString()}`);
+  return parseJsonOrThrow(res, 'Could not load file tree');
+};
+
+export const fetchFileContent = async (filePath) => {
+  const params = new URLSearchParams({ path: String(filePath || '') });
+  const res = await authFetch(`/api/browse/read?${params.toString()}`);
+  return parseJsonOrThrow(res, 'Could not load file content');
+};
+
+export const saveFileContent = async (filePath, content) => {
+  const res = await authFetch('/api/browse/write', {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ path: filePath, content }),
+  });
+  return parseJsonOrThrow(res, 'Could not save file');
+};
+
+export const fetchBrowseGitSummary = async () => {
+  const res = await authFetch('/api/browse/git-summary');
+  return parseJsonOrThrow(res, 'Could not load git summary');
+};