@chrysb/alphaclaw 0.9.15 → 0.9.17

package/lib/public/js/components/agents-tab/agent-overview/model-card.js

@@ -3,6 +3,7 @@ import htm from "htm";
 import { Badge } from "../../badge.js";
 import { LoadingSpinner } from "../../loading-spinner.js";
 import { OverflowMenu, OverflowMenuItem } from "../../overflow-menu.js";
+import { RowAccessorySelect } from "../../row-accessory-select.js";
 import {
   getModelDisplayLabel,
   SearchableModelPicker,
@@ -22,16 +23,25 @@ export const AgentModelCard = ({
     canEditModel,
     effectiveModel,
     effectiveModelEntry,
+    formatInheritedThinkingLabel,
     handleClearModelOverride,
     handleSelectModel,
+    handleSelectThinkingDefault,
     hasDistinctModelOverride,
+    hasDistinctThinkingOverride,
+    inheritedThinkingDefault,
     loading,
     menuOpen,
     modelEntries,
     popularModels,
     remainingModelOptions,
     setMenuOpen,
+    showThinkingSelect,
+    thinkingOptionsLoading,
+    thinkingSelectOptions,
+    thinkingSelectValue,
     updatingModel,
+    updatingThinking,
   } = useModelCard({
     agent,
     onUpdateAgent,
@@ -63,7 +73,19 @@ export const AgentModelCard = ({
                             handleClearModelOverride();
                           }}
                         >
-                          Inherit from defaults
+                          Inherit model from defaults
+                        </${OverflowMenuItem}>
+                      `
+                    : null}
+                  ${hasDistinctThinkingOverride
+                    ? html`
+                        <${OverflowMenuItem}
+                          onClick=${() => {
+                            setMenuOpen(false);
+                            handleSelectThinkingDefault("");
+                          }}
+                        >
+                          Inherit thinking from defaults
                         </${OverflowMenuItem}>
                       `
                     : null}
@@ -93,17 +115,20 @@ export const AgentModelCard = ({
             </p>`
           : html`
               <div class="space-y-1">
-                ${modelEntries.map(
-                  (entry) => html`
+                ${modelEntries.map((entry) => {
+                  const isPrimary = entry.key === effectiveModel;
+                  const showThinkingPicker =
+                    isPrimary && showThinkingSelect && !thinkingOptionsLoading;
+                  return html`
                     <div
                       key=${entry.key}
-                      class="flex items-center justify-between py-1"
+                      class="flex items-center justify-between gap-3 py-1"
                     >
                       <div class="flex items-center gap-2 min-w-0">
                         <span class="text-sm text-body truncate">
                           ${getModelDisplayLabel(entry)}
                         </span>
-                        ${entry.key === effectiveModel
+                        ${isPrimary
                           ? html`<${Badge} tone="cyan">Primary</${Badge}>`
                           : html`
                               <button
@@ -115,9 +140,36 @@ export const AgentModelCard = ({
                               </button>
                             `}
                       </div>
+                      ${showThinkingPicker
+                        ? html`
+                            <${RowAccessorySelect}
+                              ariaLabel="Agent thinking level"
+                              title="Agent thinking level"
+                              value=${thinkingSelectValue}
+                              disabled=${saving ||
+                              updatingModel ||
+                              updatingThinking ||
+                              !canEditModel}
+                              onChange=${handleSelectThinkingDefault}
+                            >
+                              <option value="">
+                                ${formatInheritedThinkingLabel(
+                                  inheritedThinkingDefault,
+                                )}
+                              </option>
+                              ${thinkingSelectOptions.map(
+                                (option) => html`
+                                  <option value=${option.value}>
+                                    ${option.label}
+                                  </option>
+                                `,
+                              )}
+                            </${RowAccessorySelect}>
+                          `
+                        : null}
                     </div>
-                  `,
-                )}
+                  `;
+                })}
               </div>
             `}
       ${loading

package/lib/public/js/components/agents-tab/agent-overview/use-model-card.js

@@ -1,4 +1,10 @@
 import { useEffect, useMemo, useState } from "preact/hooks";
+import { fetchThinkingOptions } from "../../../lib/api.js";
+import {
+  formatInheritedThinkingLabel,
+  formatThinkingLevelLabel,
+  shouldShowThinkingLevelSelect,
+} from "../../../lib/thinking-levels.js";
 import { useModels } from "../../models-tab/use-models.js";
 import {
   buildProviderHasAuth,
@@ -25,7 +31,14 @@ export const useModelCard = ({
   onUpdateAgent = async () => {},
 }) => {
   const [updatingModel, setUpdatingModel] = useState(false);
+  const [updatingThinking, setUpdatingThinking] = useState(false);
   const [menuOpen, setMenuOpen] = useState(false);
+  const [thinkingOptions, setThinkingOptions] = useState({
+    levels: [],
+    inheritedDefault: "off",
+    modelDefault: "off",
+  });
+  const [thinkingOptionsLoading, setThinkingOptionsLoading] = useState(false);
   const {
     catalog,
     primary: defaultPrimaryModel,
@@ -41,6 +54,45 @@ export const useModelCard = ({
   const hasDistinctModelOverride =
     !!explicitModel &&
     String(explicitModel).trim() !== String(defaultPrimaryModel || "").trim();
+  const explicitThinkingDefault = String(agent.thinkingDefault || "").trim();
+  const inheritedThinkingDefault = String(
+    thinkingOptions.inheritedDefault || thinkingOptions.modelDefault || "off",
+  ).trim();
+  const hasDistinctThinkingOverride =
+    !!explicitThinkingDefault &&
+    explicitThinkingDefault !== inheritedThinkingDefault;
+  const showThinkingSelect = shouldShowThinkingLevelSelect(
+    thinkingOptions.levels,
+  );
+
+  useEffect(() => {
+    const modelKey = String(effectiveModel || "").trim();
+    if (!modelKey.includes("/")) {
+      setThinkingOptions({
+        levels: [],
+        inheritedDefault: "off",
+        modelDefault: "off",
+      });
+      return undefined;
+    }
+    let cancelled = false;
+    setThinkingOptionsLoading(true);
+    fetchThinkingOptions(modelKey)
+      .then((payload) => {
+        if (cancelled || !payload?.ok) return;
+        setThinkingOptions({
+          levels: Array.isArray(payload.levels) ? payload.levels : [],
+          inheritedDefault: String(payload.inheritedDefault || "off").trim(),
+          modelDefault: String(payload.modelDefault || "off").trim(),
+        });
+      })
+      .finally(() => {
+        if (!cancelled) setThinkingOptionsLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [effectiveModel]);
 
   const providerHasAuth = useMemo(
     () => buildProviderHasAuth({ authProfiles, codexStatus }),
@@ -149,6 +201,69 @@ export const useModelCard = ({
     }
   };
 
+  const handleSelectThinkingDefault = async (nextValue) => {
+    const normalizedValue = String(nextValue || "").trim();
+    const isInherit = !normalizedValue;
+    if (isInherit) {
+      if (!hasDistinctThinkingOverride) return;
+      setUpdatingThinking(true);
+      try {
+        await onUpdateAgent(
+          String(agent.id || "").trim(),
+          { thinkingDefault: null },
+          "Agent thinking level reset to default",
+        );
+      } finally {
+        setUpdatingThinking(false);
+      }
+      return;
+    }
+    if (normalizedValue === explicitThinkingDefault) return;
+    setUpdatingThinking(true);
+    try {
+      await onUpdateAgent(
+        String(agent.id || "").trim(),
+        { thinkingDefault: normalizedValue },
+        "Agent thinking level updated",
+      );
+    } finally {
+      setUpdatingThinking(false);
+    }
+  };
+
+  const thinkingSelectValue = hasDistinctThinkingOverride
+    ? explicitThinkingDefault
+    : "";
+  const thinkingSelectOptions = useMemo(() => {
+    const seen = new Set();
+    const options = [];
+    const addOption = (value, label) => {
+      const normalizedValue = String(value || "").trim();
+      if (!normalizedValue || seen.has(normalizedValue)) return;
+      seen.add(normalizedValue);
+      options.push({
+        value: normalizedValue,
+        label: String(label || formatThinkingLevelLabel(normalizedValue)).trim(),
+      });
+    };
+    for (const entry of thinkingOptions.levels) {
+      addOption(
+        entry?.id,
+        formatThinkingLevelLabel(entry?.label || entry?.id),
+      );
+    }
+    if (
+      explicitThinkingDefault &&
+      !seen.has(explicitThinkingDefault)
+    ) {
+      addOption(
+        explicitThinkingDefault,
+        `${formatThinkingLevelLabel(explicitThinkingDefault)} (custom)`,
+      );
+    }
+    return options;
+  }, [explicitThinkingDefault, thinkingOptions.levels]);
+
   return {
     authorizedModelOptions,
     canEditModel: modelsReady && !loadingModels,
@@ -156,13 +271,22 @@ export const useModelCard = ({
     effectiveModelEntry,
     handleClearModelOverride,
     handleSelectModel,
+    handleSelectThinkingDefault,
     hasDistinctModelOverride,
+    hasDistinctThinkingOverride,
+    inheritedThinkingDefault,
     loading: !modelsReady || loadingModels,
     menuOpen,
     modelEntries,
     popularModels,
     remainingModelOptions,
     setMenuOpen,
+    showThinkingSelect,
+    thinkingOptionsLoading,
+    thinkingSelectOptions,
+    thinkingSelectValue,
+    formatInheritedThinkingLabel,
     updatingModel,
+    updatingThinking,
   };
 };

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

@@ -58,7 +58,7 @@ const normalizeEnvVarKey = (raw) =>
     .toUpperCase()
     .replace(/[^A-Z0-9_]/g, "_");
 const kManagedChannelTokenPattern =
-  /^(?:TELEGRAM_BOT_TOKEN|DISCORD_BOT_TOKEN|SLACK_BOT_TOKEN|SLACK_APP_TOKEN)(?:_[A-Z0-9_]+)?$/;
+  /^(?:TELEGRAM_BOT_TOKEN|DISCORD_BOT_TOKEN|SLACK_BOT_TOKEN|SLACK_APP_TOKEN|WHATSAPP_OWNER_NUMBER)(?:_[A-Z0-9_]+)?$/;
 const stripSurroundingQuotes = (raw) => {
   const value = String(raw || "").trim();
   if (value.length < 2) return value;

package/lib/public/js/components/file-tree.js

@@ -76,6 +76,16 @@ const collectFolderPaths = (node, folderPaths) => {
   );
 };
 
+const collectTruncatedExpandedFolderPaths = (node, expandedPaths, folderPaths) => {
+  if (!node || node.type !== "folder") return;
+  if (node.truncated && expandedPaths.has(node.path || "")) {
+    folderPaths.push(node.path || "");
+  }
+  (node.children || []).forEach((childNode) =>
+    collectTruncatedExpandedFolderPaths(childNode, expandedPaths, folderPaths),
+  );
+};
+
 const collectFilePaths = (node, filePaths) => {
   if (!node) return;
   if (node.type === "file") {
@@ -104,6 +114,19 @@ const removeTreePath = (node, targetPath) => {
   };
 };
 
+const replaceTreeNode = (node, nextNode) => {
+  if (!node || !nextNode) return node;
+  if (String(node.path || "") === String(nextNode.path || "")) return nextNode;
+  if (node.type !== "folder") return node;
+  const nextChildren = (node.children || []).map((childNode) =>
+    replaceTreeNode(childNode, nextNode),
+  );
+  return {
+    ...node,
+    children: nextChildren,
+  };
+};
+
 const filterTreeNode = (node, normalizedQuery) => {
   if (!node) return null;
   const query = String(normalizedQuery || "")
@@ -410,6 +433,7 @@ const TreeNode = ({
   onCreationConfirm,
   onCreationCancel,
   dragSourcePath = "",
+  loadingFolderPaths = new Set(),
 }) => {
   if (!node) return null;
   if (node.type === "file") {
@@ -471,6 +495,7 @@ const TreeNode = ({
 
   const folderPath = node.path || "";
   const isCollapsed = isSearchActive ? false : !expandedPaths.has(folderPath);
+  const isLoadingFolder = loadingFolderPaths.has(folderPath);
   const isFolderActive = selectedPath === folderPath;
   const isFolderLocked = folderPath && matchesBrowsePolicyPath(
     kLockedBrowsePaths,
@@ -484,7 +509,7 @@ const TreeNode = ({
         class=${`tree-folder ${isCollapsed ? "collapsed" : ""} ${isFolderActive ? "active" : ""} ${isDropTarget ? "is-drop-target" : ""}`.trim()}
         onclick=${() => {
           if (!folderPath) return;
-          onSetFolderExpanded(folderPath, isCollapsed);
+          onSetFolderExpanded(folderPath, isCollapsed, node);
           onSelectFolder(folderPath);
         }}
         oncontextmenu=${(e) => {
@@ -540,8 +565,9 @@ const TreeNode = ({
             event.preventDefault();
             event.stopPropagation();
             if (!folderPath) return;
-            onSetFolderExpanded(folderPath, isCollapsed);
+            onSetFolderExpanded(folderPath, isCollapsed, node);
           }}
+          disabled=${isLoadingFolder}
         >
           <span class="arrow">▼</span>
         </button>
@@ -587,6 +613,7 @@ const TreeNode = ({
               onCreationConfirm=${onCreationConfirm}
               onCreationCancel=${onCreationCancel}
               dragSourcePath=${dragSourcePath}
+              loadingFolderPaths=${loadingFolderPaths}
             />
           `,
         )}
@@ -623,6 +650,7 @@ const TreeNode = ({
               onCreationConfirm=${onCreationConfirm}
               onCreationCancel=${onCreationCancel}
               dragSourcePath=${dragSourcePath}
+              loadingFolderPaths=${loadingFolderPaths}
             />
           `,
         )}
@@ -650,6 +678,7 @@ export const FileTree = ({
   const [creatingType, setCreatingType] = useState("");
   const [contextMenu, setContextMenu] = useState(null);
   const [dragSourcePath, setDragSourcePath] = useState("");
+  const [loadingFolderPaths, setLoadingFolderPaths] = useState(new Set());
   const [selectedFolder, setSelectedFolder] = useState("");
   const effectiveSelectedPath = selectedFolder || selectedPath;
   const searchInputRef = useRef(null);
@@ -661,10 +690,31 @@ export const FileTree = ({
     try {
       const data = await fetchBrowseTree();
       const nextRoot = data.root || null;
-      const nextSignature = JSON.stringify(nextRoot || {});
+      const nextExpandedPaths =
+        expandedPaths instanceof Set ? expandedPaths : new Set();
+      let hydratedRoot = nextRoot;
+      const hydratedPaths = new Set();
+      while (true) {
+        const truncatedExpandedPaths = [];
+        collectTruncatedExpandedFolderPaths(
+          hydratedRoot,
+          nextExpandedPaths,
+          truncatedExpandedPaths,
+        );
+        const nextFolderPath = truncatedExpandedPaths.find(
+          (folderPath) => !hydratedPaths.has(folderPath),
+        );
+        if (!nextFolderPath) break;
+        hydratedPaths.add(nextFolderPath);
+        const subtreeData = await fetchBrowseTree({ path: nextFolderPath });
+        if (subtreeData.root) {
+          hydratedRoot = replaceTreeNode(hydratedRoot, subtreeData.root);
+        }
+      }
+      const nextSignature = JSON.stringify(hydratedRoot || {});
       if (treeSignatureRef.current !== nextSignature) {
         treeSignatureRef.current = nextSignature;
-        setTreeRoot(nextRoot);
+        setTreeRoot(hydratedRoot);
       }
       setExpandedPaths((previousPaths) =>
         previousPaths instanceof Set ? previousPaths : new Set(),
@@ -677,7 +727,7 @@ export const FileTree = ({
     } finally {
       if (showLoading) setLoading(false);
     }
-  }, []);
+  }, [expandedPaths]);
 
   useEffect(() => {
     loadTree({ showLoading: true });
@@ -834,7 +884,31 @@ export const FileTree = ({
     onPreviewFile("");
   }, [isSearchActive, filteredFilePaths, searchActivePath, onPreviewFile]);
 
-  const setFolderExpanded = (folderPath, nextExpanded) => {
+  const setFolderExpanded = async (folderPath, nextExpanded, node = null) => {
+    if (nextExpanded === true && node?.truncated) {
+      setLoadingFolderPaths((previousPaths) => {
+        const nextPaths =
+          previousPaths instanceof Set ? new Set(previousPaths) : new Set();
+        nextPaths.add(folderPath);
+        return nextPaths;
+      });
+      try {
+        const data = await fetchBrowseTree({ path: folderPath });
+        if (data.root) {
+          setTreeRoot((previousRoot) => replaceTreeNode(previousRoot, data.root));
+        }
+      } catch (loadError) {
+        showToast(loadError.message || "Could not load folder", "error");
+        return;
+      } finally {
+        setLoadingFolderPaths((previousPaths) => {
+          const nextPaths =
+            previousPaths instanceof Set ? new Set(previousPaths) : new Set();
+          nextPaths.delete(folderPath);
+          return nextPaths;
+        });
+      }
+    }
     setExpandedPaths((previousPaths) => {
       const nextPaths =
         previousPaths instanceof Set ? new Set(previousPaths) : new Set();
@@ -1210,6 +1284,7 @@ export const FileTree = ({
               onCreationConfirm=${confirmCreate}
               onCreationCancel=${cancelCreate}
               dragSourcePath=${dragSourcePath}
+              loadingFolderPaths=${loadingFolderPaths}
             />
           `,
         )}
@@ -1245,6 +1320,7 @@ export const FileTree = ({
               onCreationConfirm=${confirmCreate}
               onCreationCancel=${cancelCreate}
               dragSourcePath=${dragSourcePath}
+              loadingFolderPaths=${loadingFolderPaths}
             />
           `,
         )}

package/lib/public/js/components/row-accessory-select.js

@@ -0,0 +1,52 @@
+import { h } from "preact";
+import htm from "htm";
+
+const html = htm.bind(h);
+
+const RowAccessoryChevron = () => html`
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 16 16"
+    fill="none"
+    class="text-fg-dim"
+    aria-hidden="true"
+  >
+    <path
+      d="M3.5 6L8 10.5L12.5 6"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+`;
+
+export const RowAccessorySelect = ({
+  ariaLabel = "",
+  title = "",
+  value = "",
+  disabled = false,
+  onChange = () => {},
+  children = null,
+}) => html`
+  <label
+    class=${`relative inline-flex shrink-0 items-center justify-end max-w-[12rem] min-w-[5.5rem] ${disabled
+      ? "opacity-50 cursor-not-allowed"
+      : "cursor-pointer"}`}
+  >
+    <select
+      aria-label=${ariaLabel}
+      title=${title || ariaLabel}
+      value=${value}
+      disabled=${disabled}
+      onInput=${(event) => onChange(String(event.currentTarget?.value ?? ""))}
+      class="appearance-none bg-transparent border-0 py-0 pl-0 pr-5 w-full text-right text-xs text-fg-muted hover:text-body cursor-pointer focus:outline-none focus-visible:ring-1 focus-visible:ring-border rounded disabled:cursor-not-allowed truncate"
+    >
+      ${children}
+    </select>
+    <span class="pointer-events-none absolute right-0 top-1/2 -translate-y-1/2">
+      <${RowAccessoryChevron} />
+    </span>
+  </label>
+`;

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

@@ -857,6 +857,13 @@ export const fetchModelStatus = async () => {
   return res.json();
 };
 
+export const fetchThinkingOptions = async (modelKey) => {
+  const normalized = String(modelKey || "").trim();
+  const qs = new URLSearchParams({ modelKey: normalized });
+  const res = await authFetch(`/api/models/thinking-options?${qs.toString()}`);
+  return res.json();
+};
+
 export const setPrimaryModel = async (modelKey) => {
   const res = await authFetch("/api/models/set", {
     method: "POST",
@@ -1245,8 +1252,11 @@ export async function fetchWebhookRequest(name, id) {
   return parseJsonOrThrow(res, "Could not load webhook request");
 }
 
-export const fetchBrowseTree = async (depth = 10) => {
+export const fetchBrowseTree = async (options = {}) => {
+  const { depth = 3, path = "" } =
+    typeof options === "number" ? { depth: options, path: "" } : options;
   const params = new URLSearchParams({ depth: String(depth) });
+  if (path) params.set("path", String(path));
   const res = await authFetch(`/api/browse/tree?${params.toString()}`);
   return parseJsonOrThrow(res, "Could not load file tree");
 };

package/lib/public/js/lib/model-catalog.js

@@ -4,6 +4,7 @@ import { getFeaturedModels } from "./model-config.js";
 
 export const kModelCatalogCacheKey = "/api/models";
 export const kModelCatalogPollIntervalMs = 3000;
+export const kDefaultOnboardingModelKey = "anthropic/claude-opus-4-8";
 
 export const getModelCatalogModels = (payload) =>
   Array.isArray(payload?.models) ? payload.models : [];
@@ -26,6 +27,11 @@ export const getInitialOnboardingModelKey = ({
 } = {}) => {
   const normalizedCurrent = String(currentModelKey || "").trim();
   if (normalizedCurrent) return normalizedCurrent;
+  const catalogHasKey = (key) =>
+    catalog.some((model) => String(model?.key || "") === key);
+  if (catalogHasKey(kDefaultOnboardingModelKey)) {
+    return kDefaultOnboardingModelKey;
+  }
   const featuredModels = getFeaturedModels(catalog);
   return String(featuredModels[0]?.key || catalog[0]?.key || "");
 };

package/lib/public/js/lib/model-config.js

@@ -9,6 +9,10 @@ export const getAuthProviderFromModelProvider = (provider) => {
 };
 
 export const kFeaturedModelDefs = [
+  {
+    label: "Opus 4.8",
+    preferredKeys: ["anthropic/claude-opus-4-8"],
+  },
   {
     label: "Opus 4.7",
     preferredKeys: ["anthropic/claude-opus-4-7"],
@@ -58,13 +62,14 @@ export const kProviderAuthFields = {
       linkText: "Get key",
       placeholder: "sk-ant-...",
     },
-    {
-      key: "ANTHROPIC_TOKEN",
-      label: "Anthropic Setup Token",
-      hint: "From claude setup-token (uses your Claude subscription)",
-      linkText: "Get token",
-      placeholder: "Token...",
-    },
+    // Temporarily hidden — setup-token flow is not supported in onboarding yet.
+    // {
+    //   key: "ANTHROPIC_TOKEN",
+    //   label: "Anthropic Setup Token",
+    //   hint: "From claude setup-token (uses your Claude subscription)",
+    //   linkText: "Get token",
+    //   placeholder: "Token...",
+    // },
   ],
   openai: [
     {

package/lib/public/js/lib/thinking-levels.js

@@ -0,0 +1,37 @@
+const kThinkingLevelLabelOverrides = {
+  off: "Off",
+  on: "On",
+  minimal: "Minimal",
+  low: "Low",
+  medium: "Medium",
+  high: "High",
+  adaptive: "Adaptive",
+  xhigh: "Extra high",
+  max: "Maximum",
+};
+
+export const formatThinkingLevelLabel = (levelId = "") => {
+  const normalized = String(levelId || "").trim().toLowerCase();
+  if (!normalized) return "";
+  if (kThinkingLevelLabelOverrides[normalized]) {
+    return kThinkingLevelLabelOverrides[normalized];
+  }
+  return normalized
+    .split(/[-_]/g)
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(" ");
+};
+
+export const formatInheritedThinkingLabel = (levelId = "") => {
+  const label = formatThinkingLevelLabel(levelId);
+  return label ? `Inherited: ${label}` : "Inherited";
+};
+
+export const shouldShowThinkingLevelSelect = (levels = []) => {
+  const normalized = (Array.isArray(levels) ? levels : [])
+    .map((entry) => String(entry?.id || entry || "").trim().toLowerCase())
+    .filter(Boolean);
+  if (normalized.length === 0) return false;
+  return !(normalized.length === 1 && normalized[0] === "off");
+};