@chrysb/alphaclaw 0.6.2-beta.5 → 0.7.0-beta.0

package/lib/public/js/components/cron-tab/index.js

@@ -1,4 +1,5 @@
 import { h } from "https://esm.sh/preact";
+import { useEffect, useMemo, useRef, useState } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
 import { ActionButton } from "../action-button.js";
 import { PageHeader } from "../page-header.js";
@@ -11,94 +12,185 @@ import { useCronTab } from "./use-cron-tab.js";
 const html = htm.bind(h);
 
 export const CronTab = ({ jobId = "", onSetLocation = () => {} }) => {
-  const { refs, state, actions } = useCronTab({ jobId, onSetLocation });
+  const { state, actions } = useCronTab({ jobId, onSetLocation });
+  const [showJobSelector, setShowJobSelector] = useState(false);
+  const selectorShellRef = useRef(null);
   const isAllJobsSelected = state.selectedRouteKey === kAllCronJobsRouteKey;
   const noJobs = state.jobs.length === 0;
+  const selectedJob = state.selectedJob;
+  const selectedJobLabel = useMemo(() => {
+    if (isAllJobsSelected) return "All jobs";
+    const selectedJob = state.jobs.find(
+      (job) => String(job?.id || "") === String(state.selectedRouteKey || ""),
+    );
+    return String(selectedJob?.name || selectedJob?.id || "All jobs");
+  }, [isAllJobsSelected, state.jobs, state.selectedRouteKey]);
+  const hasUnsavedDetailChanges = useMemo(() => {
+    if (isAllJobsSelected || !selectedJob) return false;
+    const sessionTarget = String(
+      state.routingDraft?.sessionTarget || selectedJob?.sessionTarget || "main",
+    );
+    const wakeMode = String(
+      state.routingDraft?.wakeMode || selectedJob?.wakeMode || "now",
+    );
+    const deliveryMode = String(
+      state.routingDraft?.deliveryMode || selectedJob?.delivery?.mode || "none",
+    );
+    const currentSessionTarget = String(selectedJob?.sessionTarget || "main");
+    const currentWakeMode = String(selectedJob?.wakeMode || "now");
+    const currentDeliveryMode = String(selectedJob?.delivery?.mode || "none");
+    const isRoutingDirty =
+      sessionTarget !== currentSessionTarget ||
+      wakeMode !== currentWakeMode ||
+      deliveryMode !== currentDeliveryMode;
+    const isPromptDirty = state.promptValue !== state.savedPromptValue;
+    return isRoutingDirty || isPromptDirty;
+  }, [
+    isAllJobsSelected,
+    selectedJob,
+    state.promptValue,
+    state.routingDraft?.deliveryMode,
+    state.routingDraft?.sessionTarget,
+    state.routingDraft?.wakeMode,
+    state.savedPromptValue,
+  ]);
+
+  useEffect(() => {
+    if (!showJobSelector) return () => {};
+    const handlePointerDown = (event) => {
+      if (selectorShellRef.current?.contains(event.target)) return;
+      setShowJobSelector(false);
+    };
+    const handleKeyDown = (event) => {
+      if (event.key !== "Escape") return;
+      setShowJobSelector(false);
+    };
+    window.addEventListener("pointerdown", handlePointerDown);
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("pointerdown", handlePointerDown);
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [showJobSelector]);
+
+  const handleSelectAllJobs = () => {
+    actions.selectAllJobs();
+    setShowJobSelector(false);
+  };
+
+  const handleSelectJob = (nextJobId) => {
+    actions.selectJob(nextJobId);
+    setShowJobSelector(false);
+  };
 
   return html`
     <div class="cron-tab-shell">
       <div class="cron-tab-header">
-        <${PageHeader}
-          title="Cron Jobs"
-          actions=${html`
-            <${ActionButton}
-              onClick=${actions.refreshAll}
-              tone="secondary"
-              size="sm"
-              idleLabel="Refresh"
-            />
-          `}
-        />
+        <div class="cron-tab-header-content">
+          <${PageHeader}
+            leading=${html`
+              <div class="cron-tab-selector-shell" ref=${selectorShellRef}>
+                <button
+                  type="button"
+                  class=${`cron-tab-selector-toggle ${showJobSelector ? "is-open" : ""}`}
+                  onClick=${() => setShowJobSelector((value) => !value)}
+                  aria-expanded=${showJobSelector}
+                  aria-haspopup="listbox"
+                >
+                  <span class="cron-tab-selector-title">${selectedJobLabel}</span>
+                  <span class="cron-tab-selector-caret">▾</span>
+                </button>
+                ${showJobSelector
+                  ? html`
+                      <div class="cron-tab-selector-dropdown">
+                        <${CronJobList}
+                          jobs=${state.jobs}
+                          selectedRouteKey=${state.selectedRouteKey}
+                          onSelectAllJobs=${handleSelectAllJobs}
+                          onSelectJob=${handleSelectJob}
+                        />
+                      </div>
+                    `
+                  : null}
+              </div>
+            `}
+            actions=${html`
+              ${isAllJobsSelected || noJobs
+                ? html`
+                    <${ActionButton}
+                      onClick=${actions.refreshAll}
+                      tone="secondary"
+                      size="sm"
+                      idleLabel="Refresh"
+                    />
+                  `
+                : html`
+                    <${ActionButton}
+                      onClick=${actions.saveChanges}
+                      loading=${state.savingChanges}
+                      disabled=${!hasUnsavedDetailChanges}
+                      tone="primary"
+                      size="sm"
+                      idleLabel="Save changes"
+                      loadingLabel="Saving..."
+                    />
+                  `}
+            `}
+          />
+        </div>
       </div>
       <div class="cron-tab-main">
-        <aside
-          ref=${refs.listPanelRef}
-          class="cron-list-panel"
-          style=${{ width: `${state.listPanelWidthPx}px` }}
-        >
-          <${CronJobList}
-            jobs=${state.jobs}
-            selectedRouteKey=${state.selectedRouteKey}
-            onSelectAllJobs=${actions.selectAllJobs}
-            onSelectJob=${actions.selectJob}
-          />
-        </aside>
-        <div
-          class=${`cron-list-resizer ${state.isResizingListPanel ? "is-resizing" : ""}`}
-          onpointerdown=${actions.onListResizerPointerDown}
-          role="separator"
-          aria-orientation="vertical"
-          aria-label="Resize cron jobs list"
-        ></div>
-        <main class="cron-detail-panel">
-          ${noJobs
-            ? html`
-                <div class="h-full flex items-center justify-center text-sm text-gray-500">
-                  No cron jobs configured. Cron jobs are managed via the OpenClaw CLI.
-                </div>
-              `
-            : isAllJobsSelected
+        <div class="cron-tab-main-content">
+          <main class="cron-detail-panel">
+            ${noJobs
               ? html`
-                  <${CronOverview}
-                    jobs=${state.jobs}
-                    status=${state.status}
-                    bulkUsageByJobId=${state.bulkUsageByJobId}
-                    bulkRunsByJobId=${state.bulkRunsByJobId}
-                    onSelectJob=${actions.selectJob}
-                  />
+                  <div class="h-full flex items-center justify-center text-sm text-gray-500">
+                    No cron jobs configured. Cron jobs are managed via the OpenClaw CLI.
+                  </div>
                 `
-              : html`
-                  <${CronJobDetail}
-                    job=${state.selectedJob}
-                    runEntries=${state.runEntries}
-                    runTotal=${state.runTotal}
-                    runHasMore=${state.runHasMore}
-                    loadingMoreRuns=${state.loadingMoreRuns}
-                    runStatusFilter=${state.runStatusFilter}
-                    onSetRunStatusFilter=${actions.setRunStatusFilter}
-                    onLoadMoreRuns=${actions.loadMoreRuns}
-                    onRunNow=${actions.runSelectedJobNow}
-                    runningJob=${state.runningJob}
-                    onToggleEnabled=${actions.setSelectedJobEnabled}
-                    togglingJobEnabled=${state.togglingJobEnabled}
-                    usage=${state.usage}
-                    usageDays=${state.usageDays}
-                    onSetUsageDays=${actions.setUsageDays}
-                    promptValue=${state.promptValue}
-                    savedPromptValue=${state.savedPromptValue}
-                    onChangePrompt=${actions.setPromptValue}
-                    onSaveChanges=${actions.saveChanges}
-                    savingChanges=${state.savingChanges}
-                    routingDraft=${state.routingDraft}
-                    onChangeRoutingDraft=${actions.setRoutingDraft}
-                    deliverySessions=${state.deliverySessions}
-                    loadingDeliverySessions=${state.loadingDeliverySessions}
-                    deliverySessionsError=${state.deliverySessionsError}
-                    destinationSessionKey=${state.destinationSessionKey}
-                    onChangeDestinationSessionKey=${actions.setDestinationSessionKey}
-                  />
-                `}
-        </main>
+              : isAllJobsSelected
+                ? html`
+                    <${CronOverview}
+                      jobs=${state.jobs}
+                      status=${state.status}
+                      bulkUsageByJobId=${state.bulkUsageByJobId}
+                      bulkRunsByJobId=${state.bulkRunsByJobId}
+                      onSelectJob=${handleSelectJob}
+                    />
+                  `
+                : html`
+                    <${CronJobDetail}
+                      job=${state.selectedJob}
+                      runEntries=${state.runEntries}
+                      runTotal=${state.runTotal}
+                      runHasMore=${state.runHasMore}
+                      loadingMoreRuns=${state.loadingMoreRuns}
+                      runStatusFilter=${state.runStatusFilter}
+                      onSetRunStatusFilter=${actions.setRunStatusFilter}
+                      onLoadMoreRuns=${actions.loadMoreRuns}
+                      onRunNow=${actions.runSelectedJobNow}
+                      runningJob=${state.runningJob}
+                      onToggleEnabled=${actions.setSelectedJobEnabled}
+                      togglingJobEnabled=${state.togglingJobEnabled}
+                      usage=${state.usage}
+                      usageDays=${state.usageDays}
+                      onSetUsageDays=${actions.setUsageDays}
+                      promptValue=${state.promptValue}
+                      savedPromptValue=${state.savedPromptValue}
+                      onChangePrompt=${actions.setPromptValue}
+                      onSaveChanges=${actions.saveChanges}
+                      savingChanges=${state.savingChanges}
+                      routingDraft=${state.routingDraft}
+                      onChangeRoutingDraft=${actions.setRoutingDraft}
+                      deliverySessions=${state.deliverySessions}
+                      loadingDeliverySessions=${state.loadingDeliverySessions}
+                      deliverySessionsError=${state.deliverySessionsError}
+                      destinationSessionKey=${state.destinationSessionKey}
+                      onChangeDestinationSessionKey=${actions.setDestinationSessionKey}
+                    />
+                  `}
+          </main>
+        </div>
       </div>
     </div>
   `;

package/lib/public/js/components/envars.js

@@ -1,11 +1,18 @@
 import { h } from "https://esm.sh/preact";
-import { useState, useEffect, useCallback, useRef } from "https://esm.sh/preact/hooks";
+import {
+  useState,
+  useEffect,
+  useCallback,
+  useRef,
+} from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
 import { fetchEnvVars, saveEnvVars } from "../lib/api.js";
 import { showToast } from "./toast.js";
 import { SecretInput } from "./secret-input.js";
 import { PageHeader } from "./page-header.js";
 import { ActionButton } from "./action-button.js";
+import { PopActions } from "./pop-actions.js";
+import { PaneShell } from "./pane-shell.js";
 import {
   Brain2LineIcon,
   ChatVoiceLineIcon,
@@ -44,7 +51,11 @@ const kFeatureIconByName = {
     label: "Speech to text",
   },
 };
-const normalizeEnvVarKey = (raw) => raw.trim().toUpperCase().replace(/[^A-Z0-9_]/g, "_");
+const normalizeEnvVarKey = (raw) =>
+  raw
+    .trim()
+    .toUpperCase()
+    .replace(/[^A-Z0-9_]/g, "_");
 const kManagedChannelTokenPattern =
   /^(?:TELEGRAM_BOT_TOKEN|DISCORD_BOT_TOKEN|SLACK_BOT_TOKEN|SLACK_APP_TOKEN)(?:_[A-Z0-9_]+)?$/;
 const stripSurroundingQuotes = (raw) => {
@@ -59,7 +70,11 @@ const stripSurroundingQuotes = (raw) => {
   return value;
 };
 const isManagedChannelTokenKey = (key = "") =>
-  kManagedChannelTokenPattern.test(String(key || "").trim().toUpperCase());
+  kManagedChannelTokenPattern.test(
+    String(key || "")
+      .trim()
+      .toUpperCase(),
+  );
 const getVarsSignature = (items) =>
   JSON.stringify(
     (items || [])
@@ -85,19 +100,119 @@ const sortCustomVarsAlphabetically = (items) => {
 };
 
 const kHintByKey = {
-  ANTHROPIC_API_KEY: html`from <a href="https://console.anthropic.com" target="_blank" class="hover:underline" style="color: var(--accent-link)">console.anthropic.com</a>`,
-  ANTHROPIC_TOKEN: html`from <code class="text-xs bg-black/30 px-1 rounded">claude setup-token</code>`,
-  OPENAI_API_KEY: html`from <a href="https://platform.openai.com" target="_blank" class="hover:underline" style="color: var(--accent-link)">platform.openai.com</a>`,
-  GEMINI_API_KEY: html`from <a href="https://aistudio.google.com" target="_blank" class="hover:underline" style="color: var(--accent-link)">aistudio.google.com</a>`,
-  ELEVENLABS_API_KEY: html`from <a href="https://elevenlabs.io" target="_blank" class="hover:underline" style="color: var(--accent-link)">elevenlabs.io</a> · <code class="text-xs bg-black/30 px-1 rounded">XI_API_KEY</code> also supported`,
-  GITHUB_WORKSPACE_REPO: html`use <code class="text-xs bg-black/30 px-1 rounded">owner/repo</code> or <code class="text-xs bg-black/30 px-1 rounded">https://github.com/owner/repo</code>`,
-  TELEGRAM_BOT_TOKEN: html`from <a href="https://t.me/BotFather" target="_blank" class="hover:underline" style="color: var(--accent-link)">@BotFather</a> · <a href="https://docs.openclaw.ai/channels/telegram" target="_blank" class="hover:underline" style="color: var(--accent-link)">full guide</a>`,
-  DISCORD_BOT_TOKEN: html`from <a href="https://discord.com/developers/applications" target="_blank" class="hover:underline" style="color: var(--accent-link)">developer portal</a> · <a href="https://docs.openclaw.ai/channels/discord" target="_blank" class="hover:underline" style="color: var(--accent-link)">full guide</a>`,
-  MISTRAL_API_KEY: html`from <a href="https://console.mistral.ai" target="_blank" class="hover:underline" style="color: var(--accent-link)">console.mistral.ai</a>`,
-  VOYAGE_API_KEY: html`from <a href="https://dash.voyageai.com" target="_blank" class="hover:underline" style="color: var(--accent-link)">dash.voyageai.com</a>`,
-  GROQ_API_KEY: html`from <a href="https://console.groq.com" target="_blank" class="hover:underline" style="color: var(--accent-link)">console.groq.com</a>`,
-  DEEPGRAM_API_KEY: html`from <a href="https://console.deepgram.com" target="_blank" class="hover:underline" style="color: var(--accent-link)">console.deepgram.com</a>`,
-  BRAVE_API_KEY: html`from <a href="https://brave.com/search/api/" target="_blank" class="hover:underline" style="color: var(--accent-link)">brave.com/search/api</a> — free tier available`,
+  ANTHROPIC_API_KEY: html`from${" "}
+    <a
+      href="https://console.anthropic.com"
+      target="_blank"
+      class="hover:underline"
+      style="color: var(--accent-link)"
+      >console.anthropic.com</a
+    >`,
+  ANTHROPIC_TOKEN: html`from
+    <code class="text-xs bg-black/30 px-1 rounded">claude setup-token</code>`,
+  OPENAI_API_KEY: html`from${" "}
+    <a
+      href="https://platform.openai.com"
+      target="_blank"
+      class="hover:underline"
+      style="color: var(--accent-link)"
+      >platform.openai.com</a
+    >`,
+  GEMINI_API_KEY: html`from${" "}
+    <a
+      href="https://aistudio.google.com"
+      target="_blank"
+      class="hover:underline"
+      style="color: var(--accent-link)"
+      >aistudio.google.com</a
+    >`,
+  ELEVENLABS_API_KEY: html`from${" "}
+    <a
+      href="https://elevenlabs.io"
+      target="_blank"
+      class="hover:underline"
+      style="color: var(--accent-link)"
+      >elevenlabs.io</a
+    >${" "} · ${" "}
+    <code class="text-xs bg-black/30 px-1 rounded">XI_API_KEY</code> also
+    supported`,
+  GITHUB_WORKSPACE_REPO: html`use
+    <code class="text-xs bg-black/30 px-1 rounded">owner/repo</code> or
+    <code class="text-xs bg-black/30 px-1 rounded"
+      >https://github.com/owner/repo</code
+    >`,
+  TELEGRAM_BOT_TOKEN: html`from${" "}
+    <a
+      href="https://t.me/BotFather"
+      target="_blank"
+      class="hover:underline"
+      style="color: var(--accent-link)"
+      >@BotFather</a
+    >
+    ·
+    <a
+      href="https://docs.openclaw.ai/channels/telegram"
+      target="_blank"
+      class="hover:underline"
+      style="color: var(--accent-link)"
+      >full guide</a
+    >`,
+  DISCORD_BOT_TOKEN: html`from${" "}
+    <a
+      href="https://discord.com/developers/applications"
+      target="_blank"
+      class="hover:underline"
+      style="color: var(--accent-link)"
+      >developer portal</a
+    >
+    ·
+    <a
+      href="https://docs.openclaw.ai/channels/discord"
+      target="_blank"
+      class="hover:underline"
+      style="color: var(--accent-link)"
+      >full guide</a
+    >`,
+  MISTRAL_API_KEY: html`from${" "}
+    <a
+      href="https://console.mistral.ai"
+      target="_blank"
+      class="hover:underline"
+      style="color: var(--accent-link)"
+      >console.mistral.ai</a
+    >`,
+  VOYAGE_API_KEY: html`from${" "}
+    <a
+      href="https://dash.voyageai.com"
+      target="_blank"
+      class="hover:underline"
+      style="color: var(--accent-link)"
+      >dash.voyageai.com</a
+    >`,
+  GROQ_API_KEY: html`from${" "}
+    <a
+      href="https://console.groq.com"
+      target="_blank"
+      class="hover:underline"
+      style="color: var(--accent-link)"
+      >console.groq.com</a
+    >`,
+  DEEPGRAM_API_KEY: html`from${" "}
+    <a
+      href="https://console.deepgram.com"
+      target="_blank"
+      class="hover:underline"
+      style="color: var(--accent-link)"
+      >console.deepgram.com</a
+    >`,
+  BRAVE_API_KEY: html`from${" "}
+    <a
+      href="https://brave.com/search/api/"
+      target="_blank"
+      class="hover:underline"
+      style="color: var(--accent-link)"
+      >brave.com/search/api</a
+    >${" "} — free tier available`,
 };
 
 const getHintContent = (envVar) => kHintByKey[envVar.key] || envVar.hint || "";
@@ -157,7 +272,8 @@ const EnvRow = ({ envVar, onChange, onDelete, disabled }) => {
           ? html`
               <div class="flex items-center gap-2 mt-1 pl-3.5">
                 ${featureIcons.map(
-                  (feature) => html`<${FeatureIcon} key=${feature} feature=${feature} />`,
+                  (feature) =>
+                    html`<${FeatureIcon} key=${feature} feature=${feature} />`,
                 )}
               </div>
             `
@@ -183,9 +299,7 @@ const EnvRow = ({ envVar, onChange, onDelete, disabled }) => {
               </button>`
             : null}
         </div>
-        ${hint
-          ? html`<p class="text-xs text-gray-600 mt-1">${hint}</p>`
-          : null}
+        ${hint ? html`<p class="text-xs text-gray-600 mt-1">${hint}</p>` : null}
       </div>
     </div>
   `;
@@ -230,7 +344,9 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
 
   const handleDelete = (key) => {
     setVars((prev) => prev.filter((v) => v.key !== key));
-    setPendingCustomKeys((prev) => prev.filter((pendingKey) => pendingKey !== key));
+    setPendingCustomKeys((prev) =>
+      prev.filter((pendingKey) => pendingKey !== key),
+    );
   };
 
   const handleSave = async () => {
@@ -348,7 +464,10 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
         );
       }
       if (added) {
-        showToast(`Added ${added} variable${added !== 1 ? "s" : ""}`, "success");
+        showToast(
+          `Added ${added} variable${added !== 1 ? "s" : ""}`,
+          "success",
+        );
       }
       return;
     }
@@ -410,7 +529,9 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
     const nonPending = grouped.custom
       .filter((item) => !pending.has(item.key))
       .sort((a, b) => String(a?.key || "").localeCompare(String(b?.key || "")));
-    const pendingAtBottom = grouped.custom.filter((item) => pending.has(item.key));
+    const pendingAtBottom = grouped.custom.filter((item) =>
+      pending.has(item.key),
+    );
     grouped.custom = [...nonPending, ...pendingAtBottom];
   }
   const aiSplit = splitAiVars(grouped.ai || []);
@@ -454,7 +575,9 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
               `
             : null}
           ${expanded
-            ? html`<div class="divide-y divide-border border-t border-border">${renderEnvRows(hidden)}</div>`
+            ? html`<div class="divide-y divide-border border-t border-border">
+                ${renderEnvRows(hidden)}
+              </div>`
             : null}
         </div>
       `;
@@ -470,33 +593,52 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
   };
 
   return html`
-    <div class="space-y-4">
-      <${PageHeader}
-        title="Envars"
-        actions=${html`
-          <${ActionButton}
-            onClick=${handleSave}
-            disabled=${!dirty || saving}
-            loading=${saving}
-            tone="primary"
-            size="sm"
-            idleLabel="Save changes"
-            loadingLabel="Saving..."
-            className="transition-all"
-          />
-        `}
-      />
-
+    <${PaneShell}
+      header=${html`
+        <${PageHeader}
+          title="Envars"
+          actions=${html`
+            <${PopActions} visible=${dirty}>
+              <${ActionButton}
+                onClick=${load}
+                disabled=${saving}
+                tone="secondary"
+                size="sm"
+                idleLabel="Cancel"
+                className="text-xs"
+              />
+              <${ActionButton}
+                onClick=${handleSave}
+                disabled=${saving}
+                loading=${saving}
+                loadingMode="inline"
+                tone="primary"
+                size="sm"
+                idleLabel="Save changes"
+                loadingLabel="Saving…"
+                className="text-xs"
+              />
+            </${PopActions}>
+          `}
+        />
+      `}
+    >
       ${kGroupOrder
         .filter((g) => grouped[g]?.length)
         .map((g) => renderGroupCard(g))}
 
-      <div class="bg-surface border border-border rounded-xl overflow-hidden">
+      <div
+        class="bg-surface border border-border rounded-xl overflow-hidden"
+      >
         <div class="flex items-center justify-between px-4 pt-3 pb-2">
           <h3 class="card-label text-xs">Add Variable</h3>
-          <span class="text-xs" style="color: var(--text-dim)">Paste KEY=VALUE or multiple lines</span>
+          <span class="text-xs" style="color: var(--text-dim)"
+            >Paste KEY=VALUE or multiple lines</span
+          >
         </div>
-        <div class="flex items-start gap-4 px-4 py-3 border-t border-border">
+        <div
+          class="flex items-start gap-4 px-4 py-3 border-t border-border"
+        >
           <div class="shrink-0" style="width: 200px">
             <input
               type="text"
@@ -527,7 +669,6 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
           </div>
         </div>
       </div>
-
-    </div>
+    </${PaneShell}>
   `;
 };

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

@@ -13,6 +13,7 @@ const EditorTextarea = ({
   handleEditorSelectionChange,
   isEditBlocked,
   isPreviewOnly,
+  textareaWrap = "soft",
 }) => html`
   <textarea
     class=${overlay ? "file-viewer-editor file-viewer-editor-overlay" : "file-viewer-editor"}
@@ -33,7 +34,7 @@ const EditorTextarea = ({
     data-gramm="false"
     data-gramm_editor="false"
     data-enable-grammarly="false"
-    wrap="soft"
+    wrap=${textareaWrap}
   ></textarea>
 `;
 
@@ -55,6 +56,7 @@ export const EditorSurface = ({
   handleEditorSelectionChange,
   isEditBlocked,
   isPreviewOnly,
+  textareaWrap = "soft",
 }) => html`
   <div class=${editorShellClassName} aria-hidden=${editorShellAriaHidden}>
     <div class="file-viewer-editor-line-num-col" ref=${editorLineNumbersRef}>
@@ -106,6 +108,7 @@ export const EditorSurface = ({
               handleEditorSelectionChange=${handleEditorSelectionChange}
               isEditBlocked=${isEditBlocked}
               isPreviewOnly=${isPreviewOnly}
+              textareaWrap=${textareaWrap}
             />
           </div>
         `
@@ -120,6 +123,7 @@ export const EditorSurface = ({
             handleEditorSelectionChange=${handleEditorSelectionChange}
             isEditBlocked=${isEditBlocked}
             isPreviewOnly=${isPreviewOnly}
+            textareaWrap=${textareaWrap}
           />
         `}
   </div>

package/lib/public/js/components/file-viewer/use-editor-line-number-sync.js

@@ -0,0 +1,36 @@
+import { useCallback, useEffect } from "https://esm.sh/preact/hooks";
+
+export const useEditorLineNumberSync = ({
+  enabled = false,
+  syncKey = "",
+  editorLineNumberRowRefs,
+  editorHighlightLineRefs,
+}) => {
+  const syncEditorLineNumberHeights = useCallback(() => {
+    if (!enabled) return;
+    const numberRows = editorLineNumberRowRefs?.current || [];
+    const highlightRows = editorHighlightLineRefs?.current || [];
+    const rowCount = Math.min(numberRows.length, highlightRows.length);
+    for (let index = 0; index < rowCount; index += 1) {
+      const numberRow = numberRows[index];
+      const highlightRow = highlightRows[index];
+      if (!numberRow || !highlightRow) continue;
+      numberRow.style.height = `${highlightRow.offsetHeight}px`;
+    }
+  }, [editorHighlightLineRefs, editorLineNumberRowRefs, enabled]);
+
+  useEffect(() => {
+    syncEditorLineNumberHeights();
+  }, [syncEditorLineNumberHeights, syncKey]);
+
+  useEffect(() => {
+    if (!enabled) return () => {};
+    const onResize = () => syncEditorLineNumberHeights();
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [enabled, syncEditorLineNumberHeights]);
+
+  return {
+    syncEditorLineNumberHeights,
+  };
+};