@chrysb/alphaclaw 0.6.2-beta.5 → 0.6.2-beta.6

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

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

@@ -32,6 +32,7 @@ import { useFileDiff } from "./use-file-diff.js";
 import { useFileViewerDraftSync } from "./use-file-viewer-draft-sync.js";
 import { useFileViewerHotkeys } from "./use-file-viewer-hotkeys.js";
 import { useEditorSelectionRestore } from "./use-editor-selection-restore.js";
+import { useEditorLineNumberSync } from "./use-editor-line-number-sync.js";
 
 export const useFileViewer = ({
   filePath = "",
@@ -190,29 +191,12 @@ export const useFileViewer = ({
     [parsedFrontmatter.body, isMarkdownFile],
   );
 
-  const syncEditorLineNumberHeights = useCallback(() => {
-    if (!shouldUseHighlightedEditor || viewMode !== "edit") 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`;
-    }
-  }, [shouldUseHighlightedEditor, viewMode]);
-
-  useEffect(() => {
-    syncEditorLineNumberHeights();
-  }, [content, syncEditorLineNumberHeights]);
-
-  useEffect(() => {
-    if (!shouldUseHighlightedEditor || viewMode !== "edit") return () => {};
-    const onResize = () => syncEditorLineNumberHeights();
-    window.addEventListener("resize", onResize);
-    return () => window.removeEventListener("resize", onResize);
-  }, [shouldUseHighlightedEditor, viewMode, syncEditorLineNumberHeights]);
+  useEditorLineNumberSync({
+    enabled: shouldUseHighlightedEditor && viewMode === "edit",
+    syncKey: `${normalizedPath}:${renderContent.length}:${highlightedEditorLines.length}`,
+    editorLineNumberRowRefs,
+    editorHighlightLineRefs,
+  });
 
   useEffect(() => {
     if (!isMarkdownFile && viewMode !== "edit") {

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

@@ -13,11 +13,7 @@ export const clampSelectionIndex = (value, maxValue) => {
 export const countTextLines = (content) => {
   const text = String(content || "");
   if (!text) return 1;
-  let lineCount = 1;
-  for (let index = 0; index < text.length; index += 1) {
-    if (text.charCodeAt(index) === 10) lineCount += 1;
-  }
-  return lineCount;
+  return text.split(/\r\n|\r|\n/).length;
 };
 
 export const shouldUseSimpleEditorMode = ({

package/lib/public/js/components/onboarding/welcome-pairing-step.js

@@ -43,7 +43,9 @@ const PairingRow = ({ pairing, onApprove, onReject }) => {
         <div class="font-medium text-sm">
           ${pairing.code || pairing.id || "Pending request"}
         </div>
-        <span class="text-[11px] px-2 py-0.5 rounded-full border border-border text-gray-400">
+        <span
+          class="text-[11px] px-2 py-0.5 rounded-full border border-border text-gray-400"
+        >
           Request
         </span>
       </div>
@@ -54,14 +56,18 @@ const PairingRow = ({ pairing, onApprove, onReject }) => {
         <button
           onclick=${handleApprove}
           disabled=${!!busyAction}
-          class="ac-btn-green text-xs font-medium px-3 py-1.5 rounded-lg ${busyAction ? "opacity-50 cursor-not-allowed" : ""}"
+          class="ac-btn-green text-xs font-medium px-3 py-1.5 rounded-lg ${busyAction
+            ? "opacity-50 cursor-not-allowed"
+            : ""}"
         >
           ${busyAction === "approve" ? "Approving..." : "Approve"}
         </button>
         <button
           onclick=${handleReject}
           disabled=${!!busyAction}
-          class="ac-btn-secondary text-xs font-medium px-3 py-1.5 rounded-lg ${busyAction ? "opacity-50 cursor-not-allowed" : ""}"
+          class="ac-btn-secondary text-xs font-medium px-3 py-1.5 rounded-lg ${busyAction
+            ? "opacity-50 cursor-not-allowed"
+            : ""}"
         >
           ${busyAction === "reject" ? "Rejecting..." : "Reject"}
         </button>
@@ -83,15 +89,20 @@ export const WelcomePairingStep = ({
   onSkip,
 }) => {
   const channelMeta = kChannelMeta[channel] || {
-    label: channel ? channel.charAt(0).toUpperCase() + channel.slice(1) : "Channel",
+    label: channel
+      ? channel.charAt(0).toUpperCase() + channel.slice(1)
+      : "Channel",
     iconSrc: "",
   };
   const channelInfo = channels?.[channel];
 
   if (!channel) {
     return html`
-      <div class="bg-red-900/30 border border-red-800 rounded-xl p-3 text-red-300 text-sm">
-        Missing channel configuration. Go back and add a Telegram or Discord bot token.
+      <div
+        class="bg-red-900/30 border border-red-800 rounded-xl p-3 text-red-300 text-sm"
+      >
+        Missing channel configuration. Go back and add a Telegram or Discord bot
+        token.
       </div>
     `;
   }
@@ -101,12 +112,16 @@ export const WelcomePairingStep = ({
       <div class="min-h-[300px] pb-6 px-6 flex flex-col">
         <div class="flex-1 flex items-center justify-center text-center">
           <div class="space-y-3 max-w-xl mx-auto">
-            <p class="text-sm font-medium text-green-300 mb-12">🎉 Setup complete</p>
+            <p class="text-sm font-medium text-green-300 mb-12">
+              🎉 Setup complete
+            </p>
             <p class="text-xs text-gray-300">
-              Your ${channelMeta.label} channel is connected. You can switch to ${channelMeta.label} and start using your agent now.
+              Your ${channelMeta.label} channel is connected. You can switch to
+              ${channelMeta.label} and start using your agent now.
             </p>
             <p class="text-xs text-gray-500 font-normal opacity-85">
-              Continue to the dashboard to explore extras like Google Workspace and additional integrations.
+              Continue to the dashboard to explore extras like Google Workspace
+              and additional integrations.
             </p>
           </div>
         </div>
@@ -124,60 +139,74 @@ export const WelcomePairingStep = ({
     <div class="min-h-[300px] pb-6 flex flex-col gap-3">
       <div class="flex items-center justify-end gap-2">
         <${Badge} tone="warning"
-          >${loading
-            ? "Checking..."
-            : pairings.length > 0
-              ? "Pairing request detected"
-              : "Awaiting pairing"}</${Badge}
+          >${
+            loading
+              ? "Checking..."
+              : pairings.length > 0
+                ? "Pairing request detected"
+                : "Awaiting pairing"
+          }</${Badge}
         >
       </div>
 
-      ${pairings.length > 0
-        ? html`<div class="flex-1 flex items-center">
-            <div class="w-full">
-              ${pairings.map(
-                (pairing) =>
-                  html`<${PairingRow}
-                    key=${pairing.id}
-                    pairing=${pairing}
-                    onApprove=${onApprove}
-                    onReject=${onReject}
-                  />`,
-              )}
-            </div>
-          </div>`
-        : html`<div class="flex-1 flex items-center justify-center text-center py-4">
-            <div class="space-y-4">
-            ${channelMeta.iconSrc
-              ? html`<img
-                  src=${channelMeta.iconSrc}
-                  alt=${channelMeta.label}
-                  class="w-8 h-8 mx-auto rounded-md"
-                />`
-              : null}
-            <p class="text-gray-300 text-sm">
-              Send a message to your ${channelMeta.label} bot
-            </p>
-            <p class="text-gray-600 text-xs">
-              The pairing request will appear here in 5-10 seconds
-            </p>
-            </div>
-          </div>`}
+      ${
+        pairings.length > 0
+          ? html`<div class="flex-1 flex items-center">
+              <div class="w-full">
+                ${pairings.map(
+                  (pairing) =>
+                    html`<${PairingRow}
+                      key=${pairing.id}
+                      pairing=${pairing}
+                      onApprove=${onApprove}
+                      onReject=${onReject}
+                    />`,
+                )}
+              </div>
+            </div>`
+          : html`<div
+              class="flex-1 flex items-center justify-center text-center py-4"
+            >
+              <div class="space-y-4">
+                ${channelMeta.iconSrc
+                  ? html`<img
+                      src=${channelMeta.iconSrc}
+                      alt=${channelMeta.label}
+                      class="w-8 h-8 mx-auto rounded-md"
+                    />`
+                  : null}
+                <p class="text-gray-300 text-sm">
+                  Send a message to your ${channelMeta.label} bot
+                </p>
+                <p class="text-gray-600 text-xs">
+                  The pairing request will appear here in 5-10 seconds
+                </p>
+              </div>
+            </div>`
+      }
 
-      ${error
-        ? html`<div class="bg-red-900/30 border border-red-800 rounded-xl p-3 text-red-300 text-sm">
-            ${error}
-          </div>`
-        : null}
-      <div class="pt-3 border-t border-border text-center">
-        <button
-          type="button"
-          onclick=${onSkip}
-          class="ac-tip-link text-xs font-medium"
-        >
-          Skip pairing for now
-        </button>
-      </div>
+      ${
+        error
+          ? html`<div
+              class="bg-red-900/30 border border-red-800 rounded-xl p-3 text-red-300 text-sm"
+            >
+              ${error}
+            </div>`
+          : null
+      }
+      ${
+        pairings.length === 0
+          ? html`<div class="pt-3 text-center">
+              <button
+                type="button"
+                onclick=${onSkip}
+                class="ac-tip-link text-xs font-medium"
+              >
+                Skip pairing for now
+              </button>
+            </div>`
+          : null
+      }
     </div>
   `;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chrysb/alphaclaw",
-  "version": "0.6.2-beta.5",
+  "version": "0.6.2-beta.6",
   "publishConfig": {
     "access": "public"
   },