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

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

@@ -5,6 +5,7 @@ import { SecretInput } from "../secret-input.js";
 import { ActionButton } from "../action-button.js";
 import { Badge } from "../badge.js";
 import { SegmentedControl } from "../segmented-control.js";
+import { getChannelMeta } from "../channels.js";
 import {
   kGithubFlowFresh,
   kGithubFlowImport,
@@ -13,6 +14,15 @@ import {
 } from "./welcome-config.js";
 
 const html = htm.bind(h);
+const kChannelAccordionDefs = [
+  { id: "telegram", title: "Telegram", fieldKeys: ["TELEGRAM_BOT_TOKEN"] },
+  { id: "discord", title: "Discord", fieldKeys: ["DISCORD_BOT_TOKEN"] },
+  {
+    id: "slack",
+    title: "Slack",
+    fieldKeys: ["SLACK_BOT_TOKEN", "SLACK_APP_TOKEN"],
+  },
+];
 
 export const WelcomeFormStep = ({
   activeGroup,
@@ -50,6 +60,7 @@ export const WelcomeFormStep = ({
 }) => {
   const [showOptionalOpenai, setShowOptionalOpenai] = useState(false);
   const [showOptionalGemini, setShowOptionalGemini] = useState(false);
+  const [expandedChannels, setExpandedChannels] = useState(() => new Set(["telegram"]));
   const githubFlow = vals._GITHUB_FLOW || kGithubFlowFresh;
   const freshRepoMode =
     githubFlow === kGithubFlowImport
@@ -71,6 +82,126 @@ export const WelcomeFormStep = ({
       setShowOptionalGemini(!vals.GEMINI_API_KEY);
     }
   }, [step === totalGroups - 1]);
+  useEffect(() => {
+    if (activeGroup.id !== "channels") return;
+    setExpandedChannels((current) => {
+      if (current.size > 0) return current;
+      return new Set(["telegram"]);
+    });
+  }, [activeGroup.id]);
+
+  const renderStandardField = (field) => html`
+    <div class="space-y-1" key=${field.key}>
+      <label class="text-xs font-medium text-gray-400">${field.label}</label>
+      <${SecretInput}
+        key=${field.key}
+        value=${vals[field.key] || ""}
+        onInput=${(e) => setValue(field.key, e.target.value)}
+        placeholder=${activeGroup.id === "github" && field.key === "GITHUB_TOKEN"
+          ? githubTokenPlaceholder
+          : field.placeholder || ""}
+        isSecret=${!field.isText}
+        inputClass="flex-1 bg-black/30 border border-border rounded-lg px-3 py-2 text-sm text-gray-200 outline-none focus:border-gray-500 font-mono"
+      />
+      <p class="text-xs text-gray-600">
+        ${activeGroup.id === "github" &&
+        field.key === "GITHUB_WORKSPACE_REPO"
+          ? githubFlow === kGithubFlowImport
+            ? "Your new project will live here"
+            : freshRepoMode === kGithubTargetRepoModeExistingEmpty
+              ? "Enter the owner/repo of an existing empty repository"
+              : "A new private repo will be created for you"
+          : activeGroup.id === "github" && field.key === "_GITHUB_SOURCE_REPO"
+            ? "The repo to import from"
+            : activeGroup.id === "github" && field.key === "GITHUB_TOKEN"
+              ? githubFlow === kGithubFlowImport
+                ? freshRepoMode === kGithubTargetRepoModeCreate
+                  ? html`Use a classic PAT with${" "}<code
+                        class="text-xs bg-black/30 px-1 rounded"
+                        >repo</code
+                      >${" "}scope to create the target repo. Fine-grained
+                      works if the target already exists and can access both
+                      repos.`
+                  : html`Use a classic PAT with${" "}<code
+                        class="text-xs bg-black/30 px-1 rounded"
+                        >repo</code
+                      >${" "}scope, or a fine-grained token with Contents +
+                      Metadata access to both the source repo and target
+                      repo`
+                : freshRepoMode === kGithubTargetRepoModeExistingEmpty
+                  ? html`Use a classic PAT with${" "}<code
+                        class="text-xs bg-black/30 px-1 rounded"
+                        >repo</code
+                      >${" "}scope, or a fine-grained token with Contents +
+                      Metadata access to this repo`
+                  : html`Use a classic PAT with${" "}<code
+                        class="text-xs bg-black/30 px-1 rounded"
+                        >repo</code
+                      >${" "}scope to create a new private repository`
+              : field.hint}
+      </p>
+    </div>
+  `;
+  const fieldLookup = new Map((activeGroup.fields || []).map((field) => [field.key, field]));
+  const toggleChannelSection = (channelId) =>
+    setExpandedChannels((current) => {
+      const next = new Set(current);
+      if (next.has(channelId)) {
+        next.delete(channelId);
+      } else {
+        next.add(channelId);
+      }
+      return next;
+    });
+  const renderChannelAccordion = () =>
+    html`<div class="space-y-2">
+      ${kChannelAccordionDefs.map((section) => {
+        const isExpanded = expandedChannels.has(section.id);
+        const sectionFields = section.fieldKeys
+          .map((fieldKey) => fieldLookup.get(fieldKey))
+          .filter(Boolean);
+        const channelMeta = getChannelMeta(section.id);
+        const hasValue = section.fieldKeys.some((fieldKey) =>
+          String(vals[fieldKey] || "").trim(),
+        );
+        return html`
+          <div class="bg-black/20 border border-border rounded-lg overflow-hidden">
+            <button
+              type="button"
+              onclick=${() => toggleChannelSection(section.id)}
+              class="w-full flex items-center justify-between gap-2 px-3 py-2 text-left hover:bg-white/5"
+            >
+              <span class="inline-flex items-center gap-2 min-w-0">
+                ${channelMeta.iconSrc
+                  ? html`<img
+                      src=${channelMeta.iconSrc}
+                      alt=""
+                      class="w-4 h-4 rounded-sm"
+                      aria-hidden="true"
+                    />`
+                  : null}
+                <span class="text-sm text-gray-200">${section.title}</span>
+                ${hasValue
+                  ? html`<${Badge} tone="success">Configured</${Badge}>`
+                  : null}
+              </span>
+              <span
+                class=${`ac-history-toggle shrink-0 transition-transform ${isExpanded ? "rotate-90" : ""}`}
+                aria-hidden="true"
+                >▸</span
+              >
+            </button>
+            ${isExpanded
+              ? html`
+                  <div class="px-3 pb-3 pt-2 space-y-2 border-t border-border">
+                    ${sectionFields.map((field) => renderStandardField(field))}
+                  </div>
+                `
+              : null}
+          </div>
+        `;
+      })}
+    </div>`;
 
   return html`
     <div class="flex items-center justify-between">
@@ -223,73 +354,20 @@ export const WelcomeFormStep = ({
           : null}
       </div>
     `}
-    ${(activeGroup.id === "ai"
-      ? activeGroup.fields.filter((field) => visibleAiFieldKeys.has(field.key))
-      : activeGroup.id === "github"
-        ? activeGroup.fields.filter((field) =>
-            githubFlow === kGithubFlowImport
-              ? true
-              : field.key !== "_GITHUB_SOURCE_REPO",
-          )
-        : activeGroup.fields
-    ).map(
-      (field) => html`
-        <div class="space-y-1" key=${field.key}>
-          <label class="text-xs font-medium text-gray-400"
-            >${field.label}</label
-          >
-          <${SecretInput}
-            key=${field.key}
-            value=${vals[field.key] || ""}
-            onInput=${(e) => setValue(field.key, e.target.value)}
-            placeholder=${activeGroup.id === "github" &&
-            field.key === "GITHUB_TOKEN"
-              ? githubTokenPlaceholder
-              : field.placeholder || ""}
-            isSecret=${!field.isText}
-            inputClass="flex-1 bg-black/30 border border-border rounded-lg px-3 py-2 text-sm text-gray-200 outline-none focus:border-gray-500 font-mono"
-          />
-          <p class="text-xs text-gray-600">
-            ${activeGroup.id === "github" &&
-            field.key === "GITHUB_WORKSPACE_REPO"
-              ? githubFlow === kGithubFlowImport
-                ? "Your new project will live here"
-                : freshRepoMode === kGithubTargetRepoModeExistingEmpty
-                  ? "Enter the owner/repo of an existing empty repository"
-                  : "A new private repo will be created for you"
-              : activeGroup.id === "github" &&
-                  field.key === "_GITHUB_SOURCE_REPO"
-                ? "The repo to import from"
-                : activeGroup.id === "github" && field.key === "GITHUB_TOKEN"
-                  ? githubFlow === kGithubFlowImport
-                    ? freshRepoMode === kGithubTargetRepoModeCreate
-                      ? html`Use a classic PAT with${" "}<code
-                            class="text-xs bg-black/30 px-1 rounded"
-                            >repo</code
-                          >${" "}scope to create the target repo. Fine-grained
-                          works if the target already exists and can access both
-                          repos.`
-                      : html`Use a classic PAT with${" "}<code
-                            class="text-xs bg-black/30 px-1 rounded"
-                            >repo</code
-                          >${" "}scope, or a fine-grained token with Contents +
-                          Metadata access to both the source repo and target
-                          repo`
-                    : freshRepoMode === kGithubTargetRepoModeExistingEmpty
-                      ? html`Use a classic PAT with${" "}<code
-                            class="text-xs bg-black/30 px-1 rounded"
-                            >repo</code
-                          >${" "}scope, or a fine-grained token with Contents +
-                          Metadata access to this repo`
-                      : html`Use a classic PAT with${" "}<code
-                            class="text-xs bg-black/30 px-1 rounded"
-                            >repo</code
-                          >${" "}scope to create a new private repository`
-                  : field.hint}
-          </p>
-        </div>
-      `,
-    )}
+    ${activeGroup.id === "channels"
+      ? renderChannelAccordion()
+      : (activeGroup.id === "ai"
+          ? activeGroup.fields.filter((field) =>
+              visibleAiFieldKeys.has(field.key),
+            )
+          : activeGroup.id === "github"
+            ? activeGroup.fields.filter((field) =>
+                githubFlow === kGithubFlowImport
+                  ? true
+                  : field.key !== "_GITHUB_SOURCE_REPO",
+              )
+            : activeGroup.fields
+        ).map((field) => renderStandardField(field))}
     ${error
       ? html`<div
           class="bg-red-900/30 border border-red-800 rounded-xl p-3 text-red-300 text-sm"

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>
@@ -80,17 +86,23 @@ export const WelcomePairingStep = ({
   onReject,
   canFinish,
   onContinue,
+  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>
     `;
   }
@@ -100,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>
@@ -123,51 +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}
+      ${
+        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/lib/public/js/components/pairings.js

@@ -62,7 +62,7 @@ export const PairingRow = ({ p, onApprove, onReject }) => {
     </div>`;
 };
 
-const ALL_CHANNELS = ['telegram', 'discord'];
+const ALL_CHANNELS = ['telegram', 'discord', 'slack'];
 
 const capitalize = (s) => s.charAt(0).toUpperCase() + s.slice(1);
 

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

@@ -73,6 +73,7 @@ export const Welcome = ({ onComplete, acVersion }) => {
                       onReject=${actions.handlePairingReject}
                       canFinish=${state.pairingComplete || state.canFinishPairing}
                       onContinue=${actions.finishOnboarding}
+                      onSkip=${actions.finishOnboarding}
                     />`
                   : html`
                       <${WelcomeFormStep}

package/lib/public/js/lib/channel-provider-availability.js

@@ -0,0 +1,23 @@
+const kSingleAccountChannelProviders = new Set(["discord", "slack"]);
+
+const hasConfiguredAccounts = ({ configuredChannelMap, provider }) => {
+  const channelEntry = configuredChannelMap instanceof Map
+    ? configuredChannelMap.get(String(provider || "").trim())
+    : null;
+  return (
+    Array.isArray(channelEntry?.accounts) &&
+    channelEntry.accounts.length > 0
+  );
+};
+
+export const isSingleAccountChannelProvider = (provider = "") =>
+  kSingleAccountChannelProviders.has(String(provider || "").trim());
+
+export const isChannelProviderDisabledForAdd = ({
+  configuredChannelMap = new Map(),
+  provider = "",
+} = {}) => {
+  if (!isSingleAccountChannelProvider(provider)) return false;
+  return hasConfiguredAccounts({ configuredChannelMap, provider });
+};
+