@chrysb/alphaclaw 0.6.2-beta.4 → 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/envars.js

@@ -45,7 +45,8 @@ const kFeatureIconByName = {
   },
 };
 const normalizeEnvVarKey = (raw) => raw.trim().toUpperCase().replace(/[^A-Z0-9_]/g, "_");
-const kManagedChannelTokenPattern = /^(TELEGRAM|DISCORD)_BOT_TOKEN(?:_[A-Z0-9_]+)?$/;
+const kManagedChannelTokenPattern =
+  /^(?:TELEGRAM_BOT_TOKEN|DISCORD_BOT_TOKEN|SLACK_BOT_TOKEN|SLACK_APP_TOKEN)(?:_[A-Z0-9_]+)?$/;
 const stripSurroundingQuotes = (raw) => {
   const value = String(raw || "").trim();
   if (value.length < 2) return value;
@@ -342,7 +343,7 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
       if (managedChannelKeys.length) {
         const uniqueManagedKeys = Array.from(new Set(managedChannelKeys));
         showToast(
-          `Channel bot tokens are managed from Channels: ${uniqueManagedKeys.join(", ")}`,
+          `Channel tokens are managed from Channels: ${uniqueManagedKeys.join(", ")}`,
           "error",
         );
       }
@@ -383,7 +384,7 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
     const key = normalizeEnvVarKey(newKey);
     if (!key) return;
     if (isManagedChannelTokenKey(key)) {
-      showToast(`Channel bot tokens are managed from Channels: ${key}`, "error");
+      showToast(`Channel tokens are managed from Channels: ${key}`, "error");
       return;
     }
     if (reservedKeys.has(key)) {

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/pairing-utils.js

@@ -1,6 +1,7 @@
 export const getPreferredPairingChannel = (vals = {}) => {
   if (vals.TELEGRAM_BOT_TOKEN) return "telegram";
   if (vals.DISCORD_BOT_TOKEN) return "discord";
+  if (vals.SLACK_BOT_TOKEN && vals.SLACK_APP_TOKEN) return "slack";
   return "";
 };
 

package/lib/public/js/components/onboarding/welcome-config.js

@@ -121,8 +121,38 @@ export const kWelcomeGroups = [
           >`,
         placeholder: "MTQ3...",
       },
+      {
+        key: "SLACK_BOT_TOKEN",
+        label: "Slack Bot Token",
+        hint: html`From your Slack app's${" "}<a
+            href="https://api.slack.com/apps"
+            target="_blank"
+            class="hover:underline"
+            style="color: var(--accent-link)"
+            >OAuth & Permissions</a
+          >${" "}page${" "}·${" "}<a
+            href="https://docs.openclaw.ai/channels/slack"
+            target="_blank"
+            class="hover:underline"
+            style="color: var(--accent-link)"
+            >full guide</a
+          >`,
+        placeholder: "xoxb-...",
+      },
+      {
+        key: "SLACK_APP_TOKEN",
+        label: "Slack App Token (Socket Mode)",
+        hint: html`From${" "}<a
+            href="https://api.slack.com/apps"
+            target="_blank"
+            class="hover:underline"
+            style="color: var(--accent-link)"
+            >Basic Information</a
+          >${" "}→ App-Level Tokens (needs${" "}<code>connections:write</code>${" "}scope)`,
+        placeholder: "xapp-...",
+      },
     ],
-    validate: (vals) => !!(vals.TELEGRAM_BOT_TOKEN || vals.DISCORD_BOT_TOKEN),
+    validate: (vals) => !!(vals.TELEGRAM_BOT_TOKEN || vals.DISCORD_BOT_TOKEN || (vals.SLACK_BOT_TOKEN && vals.SLACK_APP_TOKEN)),
   },
   {
     id: "tools",