@chrysb/alphaclaw 0.4.6-beta.8 → 0.4.6-beta.9

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

@@ -0,0 +1,306 @@
+import { h } from "https://esm.sh/preact";
+import { useState } from "https://esm.sh/preact/hooks";
+import htm from "https://esm.sh/htm";
+import { ActionButton } from "../action-button.js";
+import { LoadingSpinner } from "../loading-spinner.js";
+
+const html = htm.bind(h);
+
+const kCategories = [
+  {
+    key: "gatewayConfig",
+    label: "Gateway Config",
+    icon: "⚙️",
+    description: "openclaw.json configuration",
+    showFiles: true,
+  },
+  {
+    key: "envFiles",
+    label: "Environment Files",
+    icon: "🔐",
+    description: ".env files with variables",
+    showFiles: true,
+  },
+  {
+    key: "workspaceFiles",
+    label: "Workspace Files",
+    icon: "📄",
+    description: "Prompt files (AGENTS.md, SOUL.md, etc.)",
+    showFiles: true,
+  },
+  {
+    key: "skills",
+    label: "Skills",
+    icon: "🛠",
+    description: "Custom skill definitions",
+    showFiles: true,
+  },
+  {
+    key: "cronJobs",
+    label: "Cron Jobs",
+    icon: "⏰",
+    description: "Scheduled tasks",
+    showFiles: true,
+  },
+  {
+    key: "webhooks",
+    label: "Hooks",
+    icon: "🔗",
+    description: "Webhook mappings and internal hooks",
+    showDirs: true,
+  },
+  {
+    key: "memory",
+    label: "Memory",
+    icon: "🧠",
+    description: "Agent memory and embeddings",
+    showDirs: true,
+  },
+];
+
+const CategoryCard = ({ category, data }) => {
+  const [expanded, setExpanded] = useState(false);
+  if (!data?.found) return null;
+  const isHooksCategory = category.key === "webhooks";
+  const warningItems = Array.isArray(data.transformWarnings)
+    ? data.transformWarnings
+    : [];
+  const warningPathPrefixes = new Set(
+    warningItems
+      .map((warning) => String(warning.actualPath || "").trim())
+      .filter(Boolean)
+      .map((pathValue) => pathValue.split("/").slice(0, -2).join("/")),
+  );
+
+  const items = [
+    ...(data.jobNames || []),
+    ...(data.hookNames || []),
+    ...(data.files || []),
+    ...(data.dirs || []).filter((dir) => !warningPathPrefixes.has(dir)),
+    ...(data.extraMarkdown || []),
+  ];
+  const count =
+    typeof data.jobCount === "number" && data.jobCount > 0
+      ? data.jobCount
+      : typeof data.hookCount === "number" && data.hookCount > 0
+        ? data.hookCount
+        : items.length;
+  const warningCount =
+    typeof data.warningCount === "number"
+      ? data.warningCount
+      : warningItems.length;
+
+  return html`
+    <div class="border border-border rounded-lg p-3">
+      <button
+        type="button"
+        onclick=${() => setExpanded((p) => !p)}
+        class="w-full flex items-center justify-between text-left"
+      >
+        <div class="flex items-center gap-2">
+          <span class="text-sm">${category.icon}</span>
+          <span class="text-xs font-medium text-gray-200"
+            >${category.label}</span
+          >
+          <span
+            class="text-xs px-1.5 py-0.5 rounded-full bg-cyan-900/40 text-cyan-300"
+            >${count}</span
+          >
+        </div>
+        <div class="flex items-center gap-2">
+          ${warningCount > 0
+            ? html`
+                <span
+                  class="text-xs px-1.5 py-0.5 rounded-full bg-yellow-900/30 text-yellow-300"
+                >
+                  ⚠ ${warningCount}
+                </span>
+              `
+            : null}
+          <span class="text-xs text-gray-500">${expanded ? "▲" : "▼"}</span>
+        </div>
+      </button>
+      ${expanded &&
+      items.length > 0 &&
+      html`
+        <div class="mt-2 space-y-1">
+          ${items.map(
+            (item) => html`
+              <div
+                class="text-xs font-mono bg-black/20 rounded px-2 py-1 text-gray-500"
+              >
+                ${item}
+              </div>
+            `,
+          )}
+          ${isHooksCategory
+            ? warningItems.map(
+                (warning) => html`
+                  <div
+                    class="text-xs font-mono bg-black/20 rounded px-2 py-1 text-yellow-300"
+                  >
+                    ${warning.actualPath}
+                  </div>
+                `,
+              )
+            : null}
+        </div>
+      `}
+    </div>
+  `;
+};
+
+export const WelcomeImportStep = ({
+  scanResult,
+  scanning,
+  error,
+  onApprove,
+  onShowSecretReview,
+  onBack,
+}) => {
+  if (scanning) {
+    return html`
+      <div class="flex flex-col items-center justify-center py-8 gap-3">
+        <${LoadingSpinner} />
+        <p class="text-sm text-gray-400">Scanning repository...</p>
+      </div>
+    `;
+  }
+
+  if (error) {
+    return html`
+      <div class="space-y-3">
+        <div
+          class="bg-red-900/30 border border-red-800 rounded-xl p-3 text-red-300 text-sm"
+        >
+          ${error}
+        </div>
+        <button
+          onclick=${onBack}
+          class="w-full text-sm font-medium px-4 py-2 rounded-xl transition-all ac-btn-secondary"
+        >
+          Back
+        </button>
+      </div>
+    `;
+  }
+
+  if (!scanResult) return null;
+
+  const secretCount = (scanResult.secrets || []).length;
+  const hasConflicts = scanResult.managedConflicts?.found;
+
+  return html`
+    <div class="space-y-3">
+      <div>
+        <h2 class="text-sm font-medium text-gray-200">Import Summary</h2>
+        <p class="text-xs text-gray-500">
+          ${scanResult.hasOpenclawSetup
+            ? "Found an existing OpenClaw setup"
+            : "No OpenClaw config detected — we'll set up fresh after import"}
+        </p>
+      </div>
+
+      <div class="space-y-2">
+        ${kCategories.map(
+          (cat) => html`
+            <${CategoryCard}
+              key=${cat.key}
+              category=${cat}
+              data=${scanResult[cat.key]}
+            />
+          `,
+        )}
+      </div>
+
+      ${scanResult.credentials?.found &&
+      html`
+        <div
+          class="bg-yellow-900/20 border border-yellow-800/50 rounded-lg p-3 text-xs text-yellow-300"
+        >
+          Deployment-specific files found (credentials, device identity) — these
+          will not be imported.
+        </div>
+      `}
+      ${hasConflicts &&
+      html`
+        <div
+          class="bg-yellow-900/20 border border-yellow-800/50 rounded-lg p-3 text-xs text-yellow-300"
+        >
+          AlphaClaw-managed files detected
+          (${(scanResult.managedConflicts.files || []).join(", ")}). These will
+          be overwritten with AlphaClaw defaults.
+        </div>
+      `}
+      ${scanResult.managedEnvConflicts?.found
+        ? html`
+            <div
+              class="bg-yellow-900/20 border border-yellow-800/50 rounded-lg p-3 text-xs text-yellow-300"
+            >
+              AlphaClaw controls deployment env vars
+              (${(scanResult.managedEnvConflicts.vars || []).join(", ")}).
+              Imported values for these will be normalized during import.
+            </div>
+          `
+        : null}
+      ${scanResult.webhooks?.warningCount > 0
+        ? html`
+            <div
+              class="bg-yellow-900/20 border border-yellow-800/50 rounded-lg p-3 text-xs text-yellow-300"
+            >
+              AlphaClaw expects hook transforms at
+              <code class="text-xs bg-black/30 px-1 rounded"
+                >hooks/transforms/name/name-transform.mjs</code
+              >. We found some that do not match and will try to patch them
+              during import. The originals will be backed up under
+              <code class="text-xs bg-black/30 px-1 rounded"
+                >hooks/transforms/_backup</code
+              >.
+            </div>
+          `
+        : null}
+      ${secretCount > 0 &&
+      html`
+        <div
+          class="bg-cyan-900/20 border border-cyan-800/50 rounded-lg p-3 flex items-center justify-between"
+        >
+          <div>
+            <span class="text-xs text-cyan-300 font-medium">
+              ${secretCount} possible secret${secretCount === 1 ? "" : "s"}
+              detected
+            </span>
+            <p class="text-xs text-gray-500 mt-0.5">
+              Review and extract to environment variables
+            </p>
+          </div>
+          <${ActionButton}
+            onClick=${onShowSecretReview}
+            tone="primary"
+            size="sm"
+            idleLabel="Review"
+            className="font-medium"
+          />
+        </div>
+      `}
+
+      <div class="grid grid-cols-2 gap-2 pt-1">
+        <${ActionButton}
+          onClick=${onBack}
+          tone="secondary"
+          size="md"
+          idleLabel="Back"
+          className="w-full"
+        />
+        <${ActionButton}
+          onClick=${() => onApprove([])}
+          loading=${scanning}
+          tone="primary"
+          size="md"
+          idleLabel="Import"
+          loadingLabel="Importing..."
+          className="w-full"
+        />
+      </div>
+    </div>
+  `;
+};

package/lib/public/js/components/onboarding/welcome-placeholder-review-step.js

@@ -0,0 +1,99 @@
+import { h } from "https://esm.sh/preact";
+import { useMemo } from "https://esm.sh/preact/hooks";
+import htm from "https://esm.sh/htm";
+import { ActionButton } from "../action-button.js";
+import { SecretInput } from "../secret-input.js";
+
+const html = htm.bind(h);
+
+const isResolvedValue = (value) => {
+  const normalized = String(value || "").trim();
+  return !!normalized && normalized !== "placeholder";
+};
+
+const PlaceholderRow = ({ item, value, onInput }) => {
+  return html`
+    <div class="border border-border rounded-lg p-3 space-y-2">
+      <div class="flex items-start justify-between gap-3">
+        <div class="min-w-0">
+          <div class="flex items-center gap-2 flex-wrap">
+            <code
+              class="text-xs text-gray-200 bg-black/30 px-1.5 py-0.5 rounded"
+              >${item.key}</code
+            >
+          </div>
+        </div>
+      </div>
+      <${SecretInput}
+        value=${value}
+        onInput=${(event) => onInput(event.target.value)}
+        placeholder="Enter value"
+        inputClass="w-full bg-black/30 border border-border rounded-lg px-3 py-2 text-xs text-gray-200 outline-none focus:border-gray-500 font-mono"
+      />
+    </div>
+  `;
+};
+
+export const WelcomePlaceholderReviewStep = ({
+  placeholderReview,
+  vals,
+  setValue,
+  onContinue,
+}) => {
+  const items = Array.isArray(placeholderReview?.vars)
+    ? placeholderReview.vars
+    : [];
+  const unresolvedItems = useMemo(
+    () =>
+      items
+        .filter((item) => !isResolvedValue(vals[item.key]))
+        .map((item) => item.key),
+    [items, vals],
+  );
+  const unresolvedCount = unresolvedItems.length;
+
+  if (items.length === 0) return null;
+
+  return html`
+    <div class="space-y-3">
+      <div>
+        <h2 class="text-sm font-medium text-gray-200">Add Missing Env Vars</h2>
+      </div>
+
+      <div class="space-y-2 max-h-80 overflow-y-auto">
+        ${items.map(
+          (item) => html`
+            <${PlaceholderRow}
+              key=${item.key}
+              item=${item}
+              value=${String(vals[item.key] || "") === "placeholder"
+                ? ""
+                : vals[item.key] || ""}
+              onInput=${(nextValue) => setValue(item.key, nextValue)}
+            />
+          `,
+        )}
+      </div>
+
+      <div
+        class="bg-yellow-900/20 border border-yellow-800/50 rounded-lg p-3 text-xs text-yellow-300"
+      >
+        ${unresolvedCount > 0
+          ? `${unresolvedCount} detected env var${unresolvedCount === 1 ? "" : "s"} need values. You can continue without them, but the gateway might fail to start.`
+          : "All imported placeholder env vars have values now."}
+      </div>
+
+      <div class="pt-1">
+        <${ActionButton}
+          onClick=${onContinue}
+          tone="primary"
+          size="md"
+          idleLabel=${unresolvedCount > 0
+            ? `Continue with ${unresolvedCount} Unresolved`
+            : "Continue"}
+          className="w-full"
+        />
+      </div>
+    </div>
+  `;
+};

package/lib/public/js/components/onboarding/welcome-secret-review-step.js

@@ -0,0 +1,191 @@
+import { h } from "https://esm.sh/preact";
+import { useState, useCallback } from "https://esm.sh/preact/hooks";
+import htm from "https://esm.sh/htm";
+import { ActionButton } from "../action-button.js";
+import { LoadingSpinner } from "../loading-spinner.js";
+
+const html = htm.bind(h);
+
+const SecretRow = ({ secret, selected, onToggle, envVarName, onEnvVarChange }) =>
+  html`
+    <div
+      class="border border-border rounded-lg p-3 space-y-2 ${selected
+        ? "bg-cyan-900/10 border-cyan-800/40"
+        : ""}"
+    >
+      <div class="flex items-start gap-2">
+        <input
+          type="checkbox"
+          checked=${selected}
+          onChange=${onToggle}
+          class="mt-0.5 rounded"
+        />
+        <div class="flex-1 min-w-0">
+          <div class="flex items-center gap-2 flex-wrap">
+            <span class="text-xs font-mono text-gray-300 truncate"
+              >${secret.maskedValue}</span
+            >
+            ${secret.confidence === "high"
+              ? html`<span
+                  class="text-xs px-1.5 py-0.5 rounded-full bg-red-900/40 text-red-300"
+                  >high confidence</span
+                >`
+              : html`<span
+                  class="text-xs px-1.5 py-0.5 rounded-full bg-yellow-900/40 text-yellow-300"
+                  >possible</span
+                >`}
+          </div>
+          <div class="text-xs text-gray-500 mt-1">
+            Found in${" "}
+            <span class="font-mono">${secret.file || "config"}</span>
+            ${secret.configPath
+              ? html` at <span class="font-mono">${secret.configPath}</span>`
+              : null}
+          </div>
+          ${secret.duplicateIn &&
+          html`
+            <div class="text-xs text-yellow-400 mt-1">
+              Also found in${" "}<span class="font-mono"
+                >${secret.duplicateIn}</span
+              >
+            </div>
+          `}
+        </div>
+      </div>
+      ${selected &&
+      html`
+        <div class="pl-6">
+          <label class="text-xs text-gray-500">Extract as env var:</label>
+          <input
+            type="text"
+            value=${envVarName}
+            onInput=${(e) => onEnvVarChange(e.target.value)}
+            class="w-full mt-1 bg-black/30 border border-border rounded-lg px-3 py-1.5 text-xs text-gray-200 outline-none focus:border-gray-500 font-mono"
+          />
+        </div>
+      `}
+    </div>
+  `;
+
+export const WelcomeSecretReviewStep = ({
+  secrets = [],
+  onApprove,
+  onBack,
+  loading,
+  error,
+}) => {
+  const [selections, setSelections] = useState(() => {
+    const initial = {};
+    for (const secret of secrets) {
+      initial[secret.configPath] = {
+        selected: secret.confidence === "high",
+        envVarName: secret.suggestedEnvVar || "",
+      };
+    }
+    return initial;
+  });
+
+  const toggleSecret = useCallback(
+    (configPath) => {
+      setSelections((prev) => ({
+        ...prev,
+        [configPath]: {
+          ...prev[configPath],
+          selected: !prev[configPath]?.selected,
+        },
+      }));
+    },
+    [],
+  );
+
+  const updateEnvVarName = useCallback(
+    (configPath, name) => {
+      setSelections((prev) => ({
+        ...prev,
+        [configPath]: {
+          ...prev[configPath],
+          envVarName: name,
+        },
+      }));
+    },
+    [],
+  );
+
+  const selectedCount = Object.values(selections).filter(
+    (s) => s.selected,
+  ).length;
+
+  const handleExtract = () => {
+    const approved = secrets
+      .filter((s) => selections[s.configPath]?.selected)
+      .map((s) => ({
+        ...s,
+        suggestedEnvVar:
+          selections[s.configPath]?.envVarName || s.suggestedEnvVar,
+      }));
+    onApprove(approved);
+  };
+
+  if (loading) {
+    return html`
+      <div class="flex flex-col items-center justify-center py-8 gap-3">
+        <${LoadingSpinner} />
+        <p class="text-sm text-gray-400">Applying import...</p>
+      </div>
+    `;
+  }
+
+  return html`
+    <div class="space-y-3">
+      <div>
+        <h2 class="text-sm font-medium text-gray-200">Review Secrets</h2>
+        <p class="text-xs text-gray-500">
+          Select secrets to extract into environment variables. Inline values in
+          config will be replaced with ${"`"}${"${"}ENV_VAR_NAME${"}"}${"`"} references.
+        </p>
+      </div>
+
+      ${error &&
+      html`
+        <div
+          class="bg-red-900/30 border border-red-800 rounded-xl p-3 text-red-300 text-sm"
+        >
+          ${error}
+        </div>
+      `}
+
+      <div class="space-y-2 max-h-80 overflow-y-auto">
+        ${secrets.map(
+          (secret) => html`
+            <${SecretRow}
+              key=${secret.configPath}
+              secret=${secret}
+              selected=${selections[secret.configPath]?.selected || false}
+              envVarName=${selections[secret.configPath]?.envVarName || ""}
+              onToggle=${() => toggleSecret(secret.configPath)}
+              onEnvVarChange=${(name) =>
+                updateEnvVarName(secret.configPath, name)}
+            />
+          `,
+        )}
+      </div>
+
+      <div class="grid grid-cols-2 gap-2 pt-1">
+        <${ActionButton}
+          onClick=${onBack}
+          tone="secondary"
+          idleLabel="Back"
+          className="w-full"
+        />
+        <${ActionButton}
+          onClick=${handleExtract}
+          tone="primary"
+          idleLabel=${selectedCount > 0
+            ? `Extract ${selectedCount} Secret${selectedCount === 1 ? "" : "s"}`
+            : "Skip All"}
+          className="w-full"
+        />
+      </div>
+    </div>
+  `;
+};

package/lib/public/js/components/segmented-control.js

@@ -11,14 +11,20 @@ const html = htm.bind(h);
  * @param {*}        props.value        Currently selected value.
  * @param {Function} props.onChange      Called with the new value on click.
  * @param {string}   [props.className]  Extra classes on the wrapper.
+ * @param {"sm"|"lg"} [props.size]      Visual size variant.
+ * @param {boolean}  [props.fullWidth]  Stretch wrapper and options to 100%.
  */
 export const SegmentedControl = ({
   options = [],
   value,
   onChange = () => {},
   className = "",
+  size = "sm",
+  fullWidth = false,
 }) => html`
-  <div class=${`ac-segmented-control ${className}`}>
+  <div
+    class=${`ac-segmented-control ${size === "lg" ? "ac-segmented-control-lg" : ""} ${fullWidth ? "ac-segmented-control-full" : ""} ${className}`.trim()}
+  >
     ${options.map(
       (option) => html`
         <button