@chrysb/alphaclaw 0.9.0-beta.6 → 0.9.0

package/lib/public/js/app.js

@@ -9,6 +9,7 @@ import {
 } from "wouter-preact";
 import { logout } from "./lib/api.js";
 import { Welcome } from "./components/welcome/index.js";
+import { ThemeToggle } from "./components/theme-toggle.js";
 import { ToastContainer } from "./components/toast.js";
 import { GlobalRestartBanner } from "./components/global-restart-banner.js";
 import { LoadingSpinner } from "./components/loading-spinner.js";
@@ -21,7 +22,6 @@ import {
   DoctorRoute,
   EnvarsRoute,
   GeneralRoute,
-  McpRoute,
   ModelsRoute,
   NodesRoute,
   RouteRedirect,
@@ -105,6 +105,22 @@ const App = () => {
   } = useAgentSessions({
     enabled: controllerState.onboarded === true,
   });
+  const footerVersion = (() => {
+    const openclawVersion = String(
+      controllerState.acCurrentOpenclawVersion || "",
+    ).trim();
+    const alphaclawVersion = String(controllerState.acVersion || "").trim();
+    if (openclawVersion && alphaclawVersion) {
+      return `OpenClaw ${openclawVersion} / AlphaClaw ${alphaclawVersion}`;
+    }
+    if (openclawVersion) {
+      return `OpenClaw ${openclawVersion}`;
+    }
+    if (alphaclawVersion) {
+      return `AlphaClaw ${alphaclawVersion}`;
+    }
+    return null;
+  })();
 
   useEffect(() => {
     if (!isAgentsRoute) return;
@@ -161,6 +177,9 @@ const App = () => {
         class="min-h-screen flex flex-col items-center pt-12 pb-8 px-4"
         style="position: relative; z-index: 1"
       >
+        <div style="position: fixed; top: 16px; right: 16px; z-index: 50;">
+          <${ThemeToggle} />
+        </div>
         <${Welcome}
           onComplete=${controllerActions.handleOnboardingComplete}
           acVersion=${controllerState.acVersion}
@@ -198,7 +217,11 @@ const App = () => {
         onSelectBrowseFile=${browseActions.navigateToBrowseFile}
         onPreviewBrowseFile=${browseActions.handleBrowsePreviewFile}
         acHasUpdate=${controllerState.acHasUpdate}
+        acVersion=${controllerState.acVersion}
+        acCurrentOpenclawVersion=${controllerState.acCurrentOpenclawVersion}
         acLatest=${controllerState.acLatest}
+        acLatestOpenclawVersion=${controllerState.acLatestOpenclawVersion}
+        acUpdateStrategy=${controllerState.acUpdateStrategy}
         acUpdating=${controllerState.acUpdating}
         onAcUpdate=${controllerActions.handleAcUpdate}
         agents=${agentsState.agents}
@@ -381,9 +404,6 @@ const App = () => {
                         restartingGateway=${controllerState.restartingGateway}
                         onRestartGateway=${controllerActions.handleGatewayRestart}
                         restartSignal=${controllerState.gatewayRestartSignal}
-                        openclawUpdateInProgress=${controllerState.openclawUpdateInProgress}
-                        onOpenclawVersionActionComplete=${controllerActions.handleOpenclawVersionActionComplete}
-                        onOpenclawUpdate=${controllerActions.handleOpenclawUpdate}
                         onRestartRequired=${controllerActions.setRestartRequired}
                         onDismissDoctorWarning=${() =>
                           setDoctorWarningDismissedUntilMs(
@@ -416,9 +436,6 @@ const App = () => {
                         restartingGateway=${controllerState.restartingGateway}
                         onRestartGateway=${controllerActions.handleGatewayRestart}
                         restartSignal=${controllerState.gatewayRestartSignal}
-                        openclawUpdateInProgress=${controllerState.openclawUpdateInProgress}
-                        onOpenclawVersionActionComplete=${controllerActions.handleOpenclawVersionActionComplete}
-                        onOpenclawUpdate=${controllerActions.handleOpenclawUpdate}
                       />
                     </${Route}>
                     <${Route} path="/usage/:sessionId">
@@ -455,9 +472,6 @@ const App = () => {
                         onNavigateToBrowseFile=${browseActions.navigateToBrowseFile}
                       />
                     </${Route}>
-                    <${Route} path="/mcp">
-                      <${McpRoute} />
-                    </${Route}>
                     <${Route}>
                       <${RouteRedirect} to="/general" />
                     </${Route}>
@@ -472,10 +486,8 @@ const App = () => {
 
       <div class="app-statusbar">
         <div class="statusbar-left">
-          ${controllerState.acVersion
-            ? html`<span style="color: var(--text-muted)"
-                >v${controllerState.acVersion}</span
-              >`
+          ${footerVersion
+            ? html`<span style="color: var(--text-muted)">${footerVersion}</span>`
             : null}
         </div>
         <div class="statusbar-right">

package/lib/public/js/components/agents-tab/create-channel-modal.js

@@ -2,12 +2,15 @@ import { h } from "preact";
 import { useEffect, useMemo, useState } from "preact/hooks";
 import htm from "htm";
 import { ActionButton } from "../action-button.js";
-import { CloseIcon } from "../icons.js";
+import { CloseIcon, FileCopyLineIcon } from "../icons.js";
 import { ModalShell } from "../modal-shell.js";
 import { PageHeader } from "../page-header.js";
 import { SecretInput } from "../secret-input.js";
 import { fetchChannelAccountToken } from "../../lib/api.js";
+import { copyTextToClipboard } from "../../lib/clipboard.js";
+import { isSingleAccountChannelProvider } from "../../lib/channel-provider-availability.js";
 import { ALL_CHANNELS, getChannelMeta } from "../channels.js";
+import { showToast } from "../toast.js";
 
 const html = htm.bind(h);
 
@@ -25,15 +28,33 @@ const kSlackBotScopes = [
   "channels:history",
   "channels:read",
   "chat:write",
+  "commands",
+  "emoji:read",
+  "files:read",
+  "files:write",
+  "groups:read",
   "groups:history",
   "im:history",
   "im:read",
   "im:write",
   "mpim:history",
+  "mpim:read",
+  "mpim:write",
+  "pins:read",
+  "pins:write",
   "reactions:read",
   "reactions:write",
   "users:read",
 ];
+const kSlackBotEvents = [
+  "app_mention",
+  "message.channels",
+  "message.groups",
+  "message.im",
+  "message.mpim",
+  "reaction_added",
+  "reaction_removed",
+];
 const kSlackInstructionsLink = "https://docs.openclaw.ai/channels/slack";
 
 const slugifyChannelAccountId = (value) =>
@@ -50,7 +71,63 @@ const deriveChannelEnvKey = ({ provider, accountId }) => {
   if (!normalizedAccountId || normalizedAccountId === "default") return baseKey;
   return `${baseKey}_${normalizedAccountId.replace(/-/g, "_").toUpperCase()}`;
 };
+const deriveChannelExtraEnvKey = ({ provider, accountId, index = 0 }) => {
+  const baseKeys = [kChannelExtraEnvKeys[String(provider || "").trim()]].filter(
+    Boolean,
+  );
+  const baseKey = String(baseKeys[index] || "").trim();
+  const normalizedAccountId = String(accountId || "").trim();
+  if (!baseKey) return "";
+  if (!normalizedAccountId || normalizedAccountId === "default") return baseKey;
+  return `${baseKey}_${normalizedAccountId.replace(/-/g, "_").toUpperCase()}`;
+};
 const isMaskedTokenValue = (value) => /^\*+$/.test(String(value || "").trim());
+const buildSlackManifest = (appName = "AlphaClaw") =>
+  JSON.stringify(
+    {
+      _metadata: {
+        major_version: 1,
+      },
+      display_information: {
+        name: String(appName || "").trim() || "AlphaClaw",
+        description: "Slack connector for AlphaClaw",
+      },
+      features: {
+        bot_user: {
+          display_name: String(appName || "").trim() || "AlphaClaw",
+          always_online: false,
+        },
+        app_home: {
+          messages_tab_enabled: true,
+          messages_tab_read_only_enabled: false,
+        },
+      },
+      oauth_config: {
+        scopes: {
+          bot: kSlackBotScopes,
+        },
+      },
+      settings: {
+        event_subscriptions: {
+          bot_events: kSlackBotEvents,
+        },
+        org_deploy_enabled: false,
+        socket_mode_enabled: true,
+        is_hosted: false,
+        token_rotation_enabled: false,
+      },
+    },
+    null,
+    2,
+  );
+const copyAndToast = async (value, label = "text") => {
+  const copied = await copyTextToClipboard(value);
+  if (copied) {
+    showToast("Copied to clipboard", "success");
+    return;
+  }
+  showToast(`Could not copy ${label}`, "error");
+};
 
 export const CreateChannelModal = ({
   visible = false,
@@ -152,9 +229,7 @@ export const CreateChannelModal = ({
     }
     setName(providerLabel);
   }, [provider, providerHasAccounts, nameEditedManually, isEditMode]);
-  const isSingleAccountProvider =
-    String(provider || "").trim() === "discord" ||
-    String(provider || "").trim() === "slack";
+  const isSingleAccountProvider = isSingleAccountChannelProvider(provider);
   const needsAppToken = String(provider || "").trim() === "slack";
 
   const accountId = useMemo(() => {
@@ -170,6 +245,24 @@ export const CreateChannelModal = ({
     () => deriveChannelEnvKey({ provider, accountId }),
     [provider, accountId],
   );
+  const extraEnvKey = useMemo(
+    () =>
+      deriveChannelExtraEnvKey({
+        provider,
+        accountId,
+      }),
+    [provider, accountId],
+  );
+  const slackManifestName = useMemo(() => {
+    const normalizedName = String(name || "").trim();
+    if (!normalizedName) return "AlphaClaw";
+    if (normalizedName.toLowerCase() === "slack") return "AlphaClaw";
+    return normalizedName;
+  }, [name]);
+  const slackManifest = useMemo(
+    () => buildSlackManifest(slackManifestName),
+    [slackManifestName],
+  );
 
   const accountExists = useMemo(
     () =>
@@ -269,7 +362,7 @@ export const CreateChannelModal = ({
     <${ModalShell}
       visible=${visible}
       onClose=${onClose}
-      panelClassName="bg-modal border border-border rounded-xl p-6 max-w-lg w-full space-y-4"
+      panelClassName="bg-modal border border-border rounded-xl p-6 max-w-lg w-full max-h-[calc(100vh-2rem)] overflow-y-auto space-y-4"
     >
       <${PageHeader}
         title=${
@@ -360,7 +453,7 @@ export const CreateChannelModal = ({
                   <p class="text-xs text-fg-muted">
                     Saved behind the scenes as
                     <code class="font-mono text-fg-muted ml-1">
-                      ${kChannelExtraEnvKeys.slack}
+                      ${extraEnvKey || kChannelExtraEnvKeys.slack}
                     </code>
                     .
                   </p>
@@ -371,60 +464,167 @@ export const CreateChannelModal = ({
         ${
           needsAppToken
             ? html`
-                <details class="rounded-lg border border-border bg-field px-3 py-2.5">
-                  <summary class="cursor-pointer text-xs text-body hover:text-body">
-                    Slack-specific instructions (step-by-step)
-                  </summary>
-                  <div class="mt-2 space-y-2 text-xs text-fg-muted">
-                    <ol class="list-decimal list-inside space-y-1.5">
-                      <li>
-                        In Slack app settings, turn on
-                        ${" "}
-                        <span class="text-body">Socket Mode</span>.
-                      </li>
-                      <li>
-                        In
-                        ${" "}
-                        <span class="text-body">App Home</span>, enable
-                        <code class="font-mono text-fg-muted ml-1">
-                          Allow users to send Slash commands and messages from the messages tab
-                        </code>.
-                      </li>
-                      <li>
-                        In
-                        ${" "}
-                        <span class="text-body">Event Subscriptions</span>, toggle on
-                        <code class="font-mono text-fg-muted ml-1">Subscribe to bot events</code>
-                        ${" "}
-                        and add
-                        <code class="font-mono text-fg-muted ml-1">message.im</code>.
-                      </li>
-                      <li>
-                        Create a Bot Token (<code class="font-mono text-fg-muted">xoxb-...</code>)
-                        with scopes:
-                        <code class="font-mono text-fg-muted ml-1">
-                          ${kSlackBotScopes.join(", ")}
-                        </code>
-                      </li>
-                      <li>
-                        Create an App Token (<code class="font-mono text-fg-muted">xapp-...</code>)
-                        with
-                        <code class="font-mono text-fg-muted ml-1">connections:write</code>.
-                      </li>
-                      <li>
-                        Reinstall the app after changing scopes.
-                      </li>
-                    </ol>
-                    <a
-                      href=${kSlackInstructionsLink}
-                      target="_blank"
-                      class="hover:underline"
-                      style="color: var(--accent-link)"
+                <div class="space-y-2">
+                  <details
+                    class="rounded-lg border border-border bg-field px-3 py-2.5"
+                  >
+                    <summary
+                      class="cursor-pointer text-xs text-body hover:text-body"
+                    >
+                      <span class="inline-block ml-1">
+                        Create app from manifest (recommended)
+                      </span>
+                    </summary>
+                    <div class="mt-2 space-y-2 text-xs text-fg-muted">
+                      <div class="flex items-center justify-between gap-3 pt-1">
+                        <div class="space-y-0.5">
+                          <p class="text-[12px] text-fg-muted">
+                            ${slackManifestName} App Manifest
+                          </p>
+                        </div>
+                        <button
+                          type="button"
+                          onclick=${() =>
+                            copyAndToast(slackManifest, "Slack manifest")}
+                          class="text-xs px-2 py-1 rounded-lg ac-btn-cyan inline-flex items-center gap-1.5 shrink-0"
+                        >
+                          <${FileCopyLineIcon} className="w-3.5 h-3.5" />
+                          Copy
+                        </button>
+                      </div>
+                      <pre
+                        class="max-h-72 overflow-auto rounded-lg border border-border bg-field p-3 text-[11px] leading-5 whitespace-pre-wrap break-all font-mono text-body"
+                      >
+${slackManifest}</pre
+                      >
+                      <ol
+                        class="list-decimal list-inside space-y-1.5 text-[11px] text-fg-muted"
+                      >
+                        <li>
+                          In Slack, click ${" "}
+                          <span class="text-body"
+                            >Create app from manifest</span
+                          >
+                          ${" "} and paste this manifest.
+                        </li>
+                        <li>
+                          Open ${" "}
+                          <span class="text-body">Basic Information</span>
+                          ${" "} and create an ${" "}
+                          <span class="text-body">App-Level Token</span>
+                          ${" "} with
+                          <code class="font-mono text-fg-muted ml-1"
+                            >connections:write</code
+                          >.
+                        </li>
+                        <li>
+                          Open ${" "}
+                          <span class="text-body">OAuth & Permissions</span>
+                          ${" "} and use ${" "}
+                          <span class="text-body">Install to Workspace</span>
+                          ${" "} or ${" "}
+                          <span class="text-body">Reinstall to Workspace</span>
+                          ${" "} so Slack issues a bot token.
+                        </li>
+                        <li>
+                          In ${" "}
+                          <span class="text-body">OAuth & Permissions</span>
+                          ${" "} copy the ${" "}
+                          <span class="text-body">Bot User OAuth Token</span>
+                          ${" "} (
+                          <code class="font-mono text-fg-muted">xoxb-...</code>
+                          ).
+                        </li>
+                        <li>
+                          Paste the generated ${" "}
+                          <code class="font-mono text-fg-muted">xoxb-...</code>
+                          ${" "} and ${" "}
+                          <code class="font-mono text-fg-muted">xapp-...</code>
+                          ${" "} tokens here.
+                        </li>
+                      </ol>
+                    </div>
+                  </details>
+                  <details
+                    class="rounded-lg border border-border bg-field px-3 py-2.5"
+                  >
+                    <summary
+                      class="cursor-pointer text-xs text-body hover:text-body"
                     >
-                      Open full Slack setup guide
-                    </a>
-                  </div>
-                </details>
+                      <span class="inline-block ml-1">
+                        Manual setup instructions
+                      </span>
+                    </summary>
+                    <div class="mt-2 space-y-2 text-xs text-fg-muted">
+                      <p>
+                        Use this if you want to configure the Slack app by hand
+                        instead of importing a manifest.
+                      </p>
+                      <ol class="list-decimal list-inside space-y-1.5">
+                        <li>
+                          In Slack app settings, turn on ${" "}
+                          <span class="text-body">Socket Mode</span>.
+                        </li>
+                        <li>
+                          In ${" "}
+                          <span class="text-body">App Home</span>, enable
+                          <code class="font-mono text-fg-muted ml-1">
+                            Allow users to send Slash commands and messages from
+                            the messages tab </code
+                          >.
+                        </li>
+                        <li>
+                          In ${" "}
+                          <span class="text-body">Event Subscriptions</span>,
+                          toggle on
+                          <code class="font-mono text-fg-muted ml-1"
+                            >Subscribe to bot events</code
+                          >
+                          ${" "} and add
+                          <code class="font-mono text-fg-muted ml-1"
+                            >message.im</code
+                          >.
+                        </li>
+                        <li>
+                          In ${" "}
+                          <span class="text-body">OAuth & Permissions</span>,
+                          add the bot scopes:
+                          <code class="font-mono text-fg-muted ml-1">
+                            ${kSlackBotScopes.join(", ")}
+                          </code>
+                        </li>
+                        <li>
+                          In ${" "}
+                          <span class="text-body">Basic Information</span>,
+                          create an App Token (<code
+                            class="font-mono text-fg-muted"
+                            >xapp-...</code
+                          >) with
+                          <code class="font-mono text-fg-muted ml-1"
+                            >connections:write</code
+                          >.
+                        </li>
+                        <li>
+                          Back in ${" "}
+                          <span class="text-body">OAuth & Permissions</span>,
+                          install or reinstall the app, then copy the ${" "}
+                          <span class="text-body">Bot User OAuth Token</span>
+                          ${" "} (
+                          <code class="font-mono text-fg-muted">xoxb-...</code>
+                          ).
+                        </li>
+                      </ol>
+                      <a
+                        href=${kSlackInstructionsLink}
+                        target="_blank"
+                        class="hover:underline"
+                        style="color: var(--accent-link)"
+                      >
+                        Open full Slack setup guide
+                      </a>
+                    </div>
+                  </details>
+                </div>
               `
             : null
         }