@chrysb/alphaclaw 0.4.6-beta.3 → 0.4.6-beta.5

package/lib/public/js/components/doctor/index.js

@@ -462,9 +462,8 @@ export const DoctorTab = ({ isActive = false, onOpenFile = () => {} }) => {
                 ? html`
                     <div class="ac-surface-inset rounded-xl p-4">
                       <div
-                        class="flex items-center gap-2 text-xs leading-5 text-gray-300"
+                        class="text-xs leading-5 text-gray-400"
                       >
-                        <${LoadingSpinner} className="h-3.5 w-3.5" />
                         <span
                           >Run in progress. Findings will appear when analysis
                           completes.</span

package/lib/public/js/components/general/index.js

@@ -0,0 +1,155 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { Gateway } from "../gateway.js";
+import { Channels } from "../channels.js";
+import { Pairings } from "../pairings.js";
+import { DevicePairings } from "../device-pairings.js";
+import { Google } from "../google/index.js";
+import { Features } from "../features.js";
+import { GeneralDoctorWarning } from "../doctor/general-warning.js";
+import { ChevronDownIcon } from "../icons.js";
+import { UpdateActionButton } from "../update-action-button.js";
+import { useGeneralTab } from "./use-general-tab.js";
+
+const html = htm.bind(h);
+
+export const GeneralTab = ({
+  statusData = null,
+  watchdogData = null,
+  doctorStatusData = null,
+  doctorWarningDismissedUntilMs = 0,
+  onRefreshStatuses = () => {},
+  onSwitchTab = () => {},
+  onNavigate = () => {},
+  onOpenGmailWebhook = () => {},
+  isActive = false,
+  restartingGateway = false,
+  onRestartGateway = () => {},
+  restartSignal = 0,
+  openclawUpdateInProgress = false,
+  onOpenclawVersionActionComplete = () => {},
+  onOpenclawUpdate = () => {},
+  onRestartRequired = () => {},
+  onDismissDoctorWarning = () => {},
+}) => {
+  const { state, actions } = useGeneralTab({
+    statusData,
+    watchdogData,
+    doctorStatusData,
+    onRefreshStatuses,
+    isActive,
+    restartSignal,
+  });
+
+  return html`
+    <div class="space-y-4">
+      <${Gateway}
+        status=${state.gatewayStatus}
+        openclawVersion=${state.openclawVersion}
+        restarting=${restartingGateway}
+        onRestart=${onRestartGateway}
+        watchdogStatus=${state.watchdogStatus}
+        onOpenWatchdog=${() => onSwitchTab("watchdog")}
+        onRepair=${actions.handleWatchdogRepair}
+        repairing=${state.repairingWatchdog}
+        openclawUpdateInProgress=${openclawUpdateInProgress}
+        onOpenclawVersionActionComplete=${onOpenclawVersionActionComplete}
+        onOpenclawUpdate=${onOpenclawUpdate}
+      />
+      <${GeneralDoctorWarning}
+        doctorStatus=${state.doctorStatus}
+        dismissedUntilMs=${doctorWarningDismissedUntilMs}
+        onOpenDoctor=${() => onSwitchTab("doctor")}
+        onDismiss=${onDismissDoctorWarning}
+      />
+      <${Channels}
+        channels=${state.channels}
+        onSwitchTab=${onSwitchTab}
+        onNavigate=${onNavigate}
+      />
+      <${Pairings}
+        pending=${state.pending}
+        channels=${state.channels}
+        visible=${state.hasUnpaired}
+        onApprove=${actions.handleApprove}
+        onReject=${actions.handleReject}
+      />
+      <${Features} onSwitchTab=${onSwitchTab} />
+      <${Google}
+        gatewayStatus=${state.gatewayStatus}
+        onRestartRequired=${onRestartRequired}
+        onOpenGmailWebhook=${onOpenGmailWebhook}
+      />
+
+      ${state.repo &&
+      html`
+        <div class="bg-surface border border-border rounded-xl p-4">
+          <div class="flex items-center justify-between gap-3">
+            <div class="flex items-center gap-2 min-w-0">
+              <svg
+                class="w-4 h-4 text-gray-400"
+                viewBox="0 0 16 16"
+                fill="currentColor"
+              >
+                <path
+                  d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
+                />
+              </svg>
+              <a
+                href="https://github.com/${state.repo}"
+                target="_blank"
+                class="text-sm text-gray-400 hover:text-gray-200 transition-colors truncate"
+                >${state.repo}</a
+              >
+            </div>
+            <div class="flex items-center gap-2 shrink-0">
+              <span class="text-xs text-gray-400">Auto-sync</span>
+              <div class="relative">
+                <select
+                  value=${state.syncCronChoice}
+                  onchange=${(event) =>
+                    actions.handleSyncCronChoiceChange(event.target.value)}
+                  disabled=${state.savingSyncCron}
+                  class="appearance-none bg-black/30 border border-border rounded-lg pl-2.5 pr-9 py-1.5 text-xs text-gray-300 ${state.savingSyncCron
+                    ? "opacity-50 cursor-not-allowed"
+                    : ""}"
+                  title=${state.syncCron?.installed === false
+                    ? "Not Installed Yet"
+                    : state.syncCronStatusText}
+                >
+                  <option value="disabled">Disabled</option>
+                  <option value="*/30 * * * *">Every 30 min</option>
+                  <option value="0 * * * *">Hourly</option>
+                  <option value="0 0 * * *">Daily</option>
+                </select>
+                <${ChevronDownIcon}
+                  className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-gray-500"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      `}
+
+      <div class="bg-surface border border-border rounded-xl p-4">
+        <div class="flex items-center justify-between">
+          <div>
+            <h2 class="font-semibold text-sm">OpenClaw Gateway Dashboard</h2>
+          </div>
+          <${UpdateActionButton}
+            onClick=${actions.handleOpenDashboard}
+            loading=${state.dashboardLoading}
+            warning=${false}
+            idleLabel="Open"
+            loadingLabel="Opening..."
+          />
+        </div>
+        <${DevicePairings}
+          pending=${state.devicePending}
+          onApprove=${actions.handleDeviceApprove}
+          onReject=${actions.handleDeviceReject}
+        />
+      </div>
+    </div>
+  `;
+};

package/lib/public/js/components/general/use-general-tab.js

@@ -0,0 +1,233 @@
+import { useEffect, useState } from "https://esm.sh/preact/hooks";
+import {
+  approveDevice,
+  approvePairing,
+  fetchDashboardUrl,
+  fetchDevicePairings,
+  fetchPairings,
+  rejectDevice,
+  rejectPairing,
+  triggerWatchdogRepair,
+  updateSyncCron,
+} from "../../lib/api.js";
+import { usePolling } from "../../hooks/usePolling.js";
+import { showToast } from "../toast.js";
+import { ALL_CHANNELS } from "../channels.js";
+
+const kDefaultSyncCronSchedule = "0 * * * *";
+
+export const useGeneralTab = ({
+  statusData = null,
+  watchdogData = null,
+  doctorStatusData = null,
+  onRefreshStatuses = () => {},
+  isActive = false,
+  restartSignal = 0,
+} = {}) => {
+  const [dashboardLoading, setDashboardLoading] = useState(false);
+  const [repairingWatchdog, setRepairingWatchdog] = useState(false);
+  const [syncCronEnabled, setSyncCronEnabled] = useState(true);
+  const [syncCronSchedule, setSyncCronSchedule] = useState(kDefaultSyncCronSchedule);
+  const [savingSyncCron, setSavingSyncCron] = useState(false);
+  const [syncCronChoice, setSyncCronChoice] = useState(kDefaultSyncCronSchedule);
+
+  const status = statusData;
+  const watchdogStatus = watchdogData;
+  const doctorStatus = doctorStatusData;
+  const gatewayStatus = status?.gateway ?? null;
+  const channels = status?.channels ?? null;
+  const repo = status?.repo || null;
+  const syncCron = status?.syncCron || null;
+  const openclawVersion = status?.openclawVersion || null;
+
+  const hasUnpaired = ALL_CHANNELS.some((channel) => {
+    const info = channels?.[channel];
+    return info && info.status !== "paired";
+  });
+
+  const pairingsPoll = usePolling(
+    async () => {
+      const data = await fetchPairings();
+      return data.pending || [];
+    },
+    1000,
+    { enabled: hasUnpaired && gatewayStatus === "running" },
+  );
+  const pending = pairingsPoll.data || [];
+
+  const devicePoll = usePolling(
+    async () => {
+      const data = await fetchDevicePairings();
+      return data.pending || [];
+    },
+    2000,
+    { enabled: gatewayStatus === "running" },
+  );
+  const devicePending = devicePoll.data || [];
+
+  useEffect(() => {
+    if (!isActive) return;
+    onRefreshStatuses();
+    pairingsPoll.refresh();
+    devicePoll.refresh();
+  }, [devicePoll.refresh, isActive, onRefreshStatuses, pairingsPoll.refresh]);
+
+  useEffect(() => {
+    if (!restartSignal || !isActive) return;
+    onRefreshStatuses();
+    pairingsPoll.refresh();
+    devicePoll.refresh();
+    const t1 = setTimeout(() => {
+      onRefreshStatuses();
+      pairingsPoll.refresh();
+      devicePoll.refresh();
+    }, 1200);
+    const t2 = setTimeout(() => {
+      onRefreshStatuses();
+      pairingsPoll.refresh();
+      devicePoll.refresh();
+    }, 3500);
+    return () => {
+      clearTimeout(t1);
+      clearTimeout(t2);
+    };
+  }, [
+    devicePoll.refresh,
+    isActive,
+    onRefreshStatuses,
+    pairingsPoll.refresh,
+    restartSignal,
+  ]);
+
+  useEffect(() => {
+    if (!syncCron) return;
+    setSyncCronEnabled(syncCron.enabled !== false);
+    setSyncCronSchedule(syncCron.schedule || kDefaultSyncCronSchedule);
+    setSyncCronChoice(
+      syncCron.enabled === false ? "disabled" : syncCron.schedule || kDefaultSyncCronSchedule,
+    );
+  }, [syncCron?.enabled, syncCron?.schedule]);
+
+  const refreshAfterPairingAction = () => {
+    setTimeout(pairingsPoll.refresh, 500);
+    setTimeout(pairingsPoll.refresh, 2000);
+    setTimeout(onRefreshStatuses, 3000);
+  };
+
+  const saveSyncCronSettings = async ({
+    enabled = syncCronEnabled,
+    schedule = syncCronSchedule,
+  } = {}) => {
+    if (savingSyncCron) return;
+    setSavingSyncCron(true);
+    try {
+      const data = await updateSyncCron({ enabled, schedule });
+      if (!data.ok) {
+        throw new Error(data.error || "Could not save sync settings");
+      }
+      showToast("Sync schedule updated", "success");
+      onRefreshStatuses();
+    } catch (err) {
+      showToast(err.message || "Could not save sync settings", "error");
+    } finally {
+      setSavingSyncCron(false);
+    }
+  };
+
+  const handleSyncCronChoiceChange = async (nextChoice) => {
+    setSyncCronChoice(nextChoice);
+    const nextEnabled = nextChoice !== "disabled";
+    const nextSchedule = nextEnabled ? nextChoice : syncCronSchedule;
+    setSyncCronEnabled(nextEnabled);
+    setSyncCronSchedule(nextSchedule);
+    await saveSyncCronSettings({
+      enabled: nextEnabled,
+      schedule: nextSchedule,
+    });
+  };
+
+  const handleApprove = async (id, channel) => {
+    await approvePairing(id, channel);
+    refreshAfterPairingAction();
+  };
+
+  const handleReject = async (id, channel) => {
+    await rejectPairing(id, channel);
+    refreshAfterPairingAction();
+  };
+
+  const handleDeviceApprove = async (id) => {
+    await approveDevice(id);
+    setTimeout(devicePoll.refresh, 500);
+    setTimeout(devicePoll.refresh, 2000);
+  };
+
+  const handleDeviceReject = async (id) => {
+    await rejectDevice(id);
+    setTimeout(devicePoll.refresh, 500);
+    setTimeout(devicePoll.refresh, 2000);
+  };
+
+  const handleWatchdogRepair = async () => {
+    if (repairingWatchdog) return;
+    setRepairingWatchdog(true);
+    try {
+      const data = await triggerWatchdogRepair();
+      if (!data.ok) throw new Error(data.error || "Repair failed");
+      showToast("Repair triggered", "success");
+      setTimeout(() => {
+        onRefreshStatuses();
+      }, 800);
+    } catch (err) {
+      showToast(err.message || "Could not run repair", "error");
+    } finally {
+      setRepairingWatchdog(false);
+    }
+  };
+
+  const handleOpenDashboard = async () => {
+    if (dashboardLoading) return;
+    setDashboardLoading(true);
+    try {
+      const data = await fetchDashboardUrl();
+      console.log("[dashboard] response:", JSON.stringify(data));
+      window.open(data.url || "/openclaw", "_blank");
+    } catch (err) {
+      console.error("[dashboard] error:", err);
+      window.open("/openclaw", "_blank");
+    } finally {
+      setDashboardLoading(false);
+    }
+  };
+
+  return {
+    state: {
+      channels,
+      dashboardLoading,
+      devicePending,
+      doctorStatus,
+      gatewayStatus,
+      hasUnpaired,
+      openclawVersion,
+      pending,
+      repairingWatchdog,
+      repo,
+      savingSyncCron,
+      syncCron,
+      syncCronChoice,
+      syncCronEnabled,
+      syncCronSchedule,
+      syncCronStatusText: syncCronEnabled ? "Enabled" : "Disabled",
+      watchdogStatus,
+    },
+    actions: {
+      handleApprove,
+      handleDeviceApprove,
+      handleDeviceReject,
+      handleOpenDashboard,
+      handleReject,
+      handleSyncCronChoiceChange,
+      handleWatchdogRepair,
+    },
+  };
+};

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

@@ -0,0 +1,286 @@
+import { h } from "https://esm.sh/preact";
+import { useState, useMemo } from "https://esm.sh/preact/hooks";
+import htm from "https://esm.sh/htm";
+import { PageHeader } from "../page-header.js";
+import { LoadingSpinner } from "../loading-spinner.js";
+import { ActionButton } from "../action-button.js";
+import { Badge } from "../badge.js";
+import { useModels } from "./use-models.js";
+import { ProviderAuthCard } from "./provider-auth-card.js";
+import { getModelProvider, getFeaturedModels } from "../../lib/model-config.js";
+
+const html = htm.bind(h);
+
+const deriveRequiredProviders = (configuredModels) => {
+  const providers = new Set();
+  for (const modelKey of Object.keys(configuredModels)) {
+    const provider = getModelProvider(modelKey);
+    if (provider) providers.add(provider);
+  }
+  return [...providers];
+};
+
+const kProviderDisplayOrder = [
+  "anthropic",
+  "openai",
+  "openai-codex",
+  "google",
+];
+
+export const Models = ({ onRestartRequired = () => {} }) => {
+  const {
+    catalog,
+    primary,
+    configuredModels,
+    authProfiles,
+    authOrder,
+    codexStatus,
+    loading,
+    saving,
+    ready,
+    error,
+    isDirty,
+    addModel,
+    removeModel,
+    setPrimaryModel,
+    editProfile,
+    editAuthOrder,
+    getProfileValue,
+    getEffectiveOrder,
+    cancelChanges,
+    saveAll,
+    refreshCodexStatus,
+  } = useModels();
+
+  const [showAllModels, setShowAllModels] = useState(false);
+
+  const configuredKeys = useMemo(
+    () => new Set(Object.keys(configuredModels)),
+    [configuredModels],
+  );
+
+  const featuredModels = useMemo(() => getFeaturedModels(catalog), [catalog]);
+
+  const pickerModels = useMemo(() => {
+    const base = showAllModels
+      ? catalog
+      : featuredModels.length > 0
+        ? featuredModels
+        : catalog;
+    return base.filter((m) => !configuredKeys.has(m.key));
+  }, [catalog, featuredModels, showAllModels, configuredKeys]);
+
+  const canToggleFullCatalog =
+    featuredModels.length > 0 && catalog.length > featuredModels.length;
+
+  const requiredProviders = useMemo(
+    () => deriveRequiredProviders(configuredModels),
+    [configuredModels],
+  );
+
+  const sortedProviders = useMemo(() => {
+    const ordered = [];
+    for (const p of kProviderDisplayOrder) {
+      if (requiredProviders.includes(p)) ordered.push(p);
+    }
+    for (const p of requiredProviders) {
+      if (!ordered.includes(p)) ordered.push(p);
+    }
+    return ordered;
+  }, [requiredProviders]);
+
+  const providerHasAuth = useMemo(() => {
+    const result = {};
+    for (const p of authProfiles) {
+      if (p.key || p.token || p.access) {
+        result[p.provider] = true;
+      }
+    }
+    if (codexStatus?.connected) {
+      result["openai-codex"] = true;
+    }
+    return result;
+  }, [authProfiles, codexStatus]);
+
+  const configuredModelEntries = useMemo(
+    () =>
+      Object.keys(configuredModels).map((key) => {
+        const catalogEntry = catalog.find((m) => m.key === key);
+        const provider = getModelProvider(key);
+        const hasAuth = !!providerHasAuth[provider];
+        return {
+          key,
+          label: catalogEntry?.label || key,
+          isPrimary: key === primary,
+          hasAuth,
+        };
+      }),
+    [configuredModels, catalog, primary, providerHasAuth],
+  );
+
+  if (!ready) {
+    return html`
+      <div class="space-y-4">
+        <${PageHeader}
+          title="Models"
+          actions=${html`
+            <${ActionButton}
+              disabled=${true}
+              tone="primary"
+              size="sm"
+              idleLabel="Save changes"
+              className="transition-all"
+            />
+          `}
+        />
+        <div class="bg-surface border border-border rounded-xl p-4">
+          <div class="flex items-center gap-2 text-sm text-gray-400">
+            <${LoadingSpinner} className="h-4 w-4" />
+            Loading model settings...
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  return html`
+    <div class="space-y-4">
+      <${PageHeader}
+        title="Models"
+        actions=${html`
+          <${ActionButton}
+            onClick=${cancelChanges}
+            disabled=${!isDirty || saving}
+            tone="secondary"
+            size="sm"
+            idleLabel="Cancel"
+            className="transition-all"
+          />
+          <${ActionButton}
+            onClick=${saveAll}
+            disabled=${!isDirty || saving}
+            loading=${saving}
+            tone="primary"
+            size="sm"
+            idleLabel="Save changes"
+            loadingLabel="Saving..."
+            className="transition-all"
+          />
+        `}
+      />
+
+      <!-- Configured Models -->
+      <div class="bg-surface border border-border rounded-xl p-4 space-y-3">
+        <h2 class="font-semibold text-sm">Available Models</h2>
+
+        ${configuredModelEntries.length === 0
+          ? html`<p class="text-xs text-gray-500">
+              No models configured. Add a model below.
+            </p>`
+          : html`
+              <div class="space-y-1">
+                ${configuredModelEntries.map(
+                  (entry) => html`
+                    <div
+                      class="flex items-center justify-between py-1.5 px-2 rounded-lg hover:bg-white/5"
+                    >
+                      <div class="flex items-center gap-2 min-w-0">
+                        <span class="text-sm text-gray-200 truncate"
+                          >${entry.label}</span
+                        >
+                        ${entry.isPrimary
+                          ? html`<${Badge} tone="cyan">Primary</${Badge}>`
+                          : entry.hasAuth
+                            ? html`
+                                <button
+                                  onclick=${() => setPrimaryModel(entry.key)}
+                                  class="text-xs px-2 py-0.5 rounded-full text-gray-500 hover:text-gray-300 hover:bg-white/5"
+                                >
+                                  Set primary
+                                </button>
+                              `
+                            : html`<${Badge} tone="warning">Needs auth</${Badge}>`}
+                      </div>
+                      <button
+                        onclick=${() => removeModel(entry.key)}
+                        class="text-xs text-gray-600 hover:text-red-400 shrink-0 px-1"
+                      >
+                        Remove
+                      </button>
+                    </div>
+                  `,
+                )}
+              </div>
+            `}
+
+        <div class="pt-2 border-t border-border space-y-2">
+          <label class="text-xs font-medium text-gray-400">Add model</label>
+          <select
+            onInput=${(e) => {
+              const val = e.target.value;
+              if (val) {
+                addModel(val);
+                if (!primary) setPrimaryModel(val);
+              }
+              e.target.value = "";
+            }}
+            class="w-full bg-black/30 border border-border rounded-lg pl-3 pr-8 py-2 text-sm text-gray-200 outline-none focus:border-gray-500"
+          >
+            <option value="">Select a model to add...</option>
+            ${pickerModels.map(
+              (m) =>
+                html`<option value=${m.key}>${m.label || m.key}</option>`,
+            )}
+          </select>
+          ${canToggleFullCatalog
+            ? html`
+                <button
+                  type="button"
+                  onclick=${() => setShowAllModels((prev) => !prev)}
+                  class="text-xs text-gray-500 hover:text-gray-300"
+                >
+                  ${showAllModels
+                    ? "Show recommended models"
+                    : "Show full model catalog"}
+                </button>
+              `
+            : null}
+        </div>
+
+        ${loading
+          ? html`<p class="text-xs text-gray-600">
+              Loading model catalog...
+            </p>`
+          : error
+            ? html`<p class="text-xs text-gray-600">${error}</p>`
+            : null}
+      </div>
+
+      <!-- Provider Auth -->
+      ${sortedProviders.length > 0
+        ? html`
+            <div class="space-y-3">
+              <h2 class="font-semibold text-sm text-gray-300">
+                Provider Authentication
+              </h2>
+              ${sortedProviders.map(
+                (provider) => html`
+                  <${ProviderAuthCard}
+                    provider=${provider}
+                    authProfiles=${authProfiles}
+                    authOrder=${authOrder}
+                    codexStatus=${codexStatus}
+                    onEditProfile=${editProfile}
+                    onEditAuthOrder=${editAuthOrder}
+                    getProfileValue=${getProfileValue}
+                    getEffectiveOrder=${getEffectiveOrder}
+                    onRefreshCodex=${refreshCodexStatus}
+                  />
+                `,
+              )}
+            </div>
+          `
+        : null}
+    </div>
+  `;
+};