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

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

@@ -4,7 +4,14 @@ import htm from "https://esm.sh/htm";
 import { SecretInput } from "../secret-input.js";
 import { ActionButton } from "../action-button.js";
 import { Badge } from "../badge.js";
-import { isValidGithubRepoInput } from "./welcome-config.js";
+import { SegmentedControl } from "../segmented-control.js";
+import {
+  isValidGithubRepoInput,
+  kGithubFlowFresh,
+  kGithubFlowImport,
+  kGithubTargetRepoModeCreate,
+  kGithubTargetRepoModeExistingEmpty,
+} from "./welcome-config.js";
 
 const html = htm.bind(h);
 
@@ -42,14 +49,16 @@ export const WelcomeFormStep = ({
   allValid,
   handleSubmit,
 }) => {
-  const [repoTouched, setRepoTouched] = useState(false);
   const [showOptionalOpenai, setShowOptionalOpenai] = useState(false);
   const [showOptionalGemini, setShowOptionalGemini] = useState(false);
+  const githubFlow = vals._GITHUB_FLOW || kGithubFlowFresh;
+  const freshRepoMode =
+    githubFlow === kGithubFlowImport
+      ? kGithubTargetRepoModeCreate
+      : vals._GITHUB_TARGET_REPO_MODE || kGithubTargetRepoModeCreate;
 
   useEffect(() => {
-    if (activeGroup.id !== "github") {
-      setRepoTouched(false);
-    }
+    if (activeGroup.id !== "github") return;
   }, [activeGroup.id]);
 
   useEffect(() => {
@@ -183,9 +192,62 @@ export const WelcomeFormStep = ({
         `}
       </div>
     `}
+    ${activeGroup.id === "github" &&
+    html`
+      <div class="space-y-3">
+        <div class="space-y-1 pt-1">
+          <div>
+            <label class="text-xs font-medium text-gray-400">Setup mode</label>
+          </div>
+          <${SegmentedControl}
+            options=${[
+              { label: "Start fresh", value: kGithubFlowFresh },
+              { label: "Import existing setup", value: kGithubFlowImport },
+            ]}
+            value=${githubFlow}
+            onChange=${(value) => setValue("_GITHUB_FLOW", value)}
+            size="md"
+            fullWidth=${true}
+          />
+        </div>
+        ${githubFlow === kGithubFlowFresh
+          ? html`
+              <div class="space-y-1">
+                <div>
+                  <label class="text-xs font-medium text-gray-400"
+                    >Repository setup</label
+                  >
+                </div>
+                <${SegmentedControl}
+                  options=${[
+                    {
+                      label: "Create new repo",
+                      value: kGithubTargetRepoModeCreate,
+                    },
+                    {
+                      label: "Use existing empty repo",
+                      value: kGithubTargetRepoModeExistingEmpty,
+                    },
+                  ]}
+                  value=${freshRepoMode}
+                  onChange=${(value) =>
+                    setValue("_GITHUB_TARGET_REPO_MODE", value)}
+                  fullWidth=${true}
+                />
+              </div>
+            `
+          : null}
+      </div>
+    `}
     ${(activeGroup.id === "ai"
       ? activeGroup.fields.filter((field) => visibleAiFieldKeys.has(field.key))
-      : activeGroup.fields
+      : 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}>
@@ -196,27 +258,51 @@ export const WelcomeFormStep = ({
             key=${field.key}
             value=${vals[field.key] || ""}
             onInput=${(e) => setValue(field.key, e.target.value)}
-            onBlur=${field.key === "GITHUB_WORKSPACE_REPO"
-              ? () => setRepoTouched(true)
-              : undefined}
             placeholder=${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">${field.hint}</p>
+          <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 === "github" &&
-    repoTouched &&
-    vals.GITHUB_WORKSPACE_REPO &&
-    !isValidGithubRepoInput(vals.GITHUB_WORKSPACE_REPO)
-      ? html`<div class="text-xs text-red-300">
-          Workspace Repo must be in
-          <code class="text-xs bg-black/30 px-1 rounded">owner/repo</code>
-          format.
-        </div>`
-      : null}
     ${error
       ? html`<div
           class="bg-red-900/30 border border-red-800 rounded-xl p-3 text-red-300 text-sm"
@@ -281,39 +367,48 @@ export const WelcomeFormStep = ({
       ${step < totalGroups - 1
         ? html`
             ${step > 0
-              ? html`<button
-                  onclick=${goBack}
-                  class="w-full text-sm font-medium px-4 py-2 rounded-xl transition-all ac-btn-secondary"
-                >
-                  Back
-                </button>`
+              ? html`<${ActionButton}
+                  onClick=${goBack}
+                  tone="secondary"
+                  size="md"
+                  idleLabel="Back"
+                  className="w-full"
+                />`
               : html`<div class="w-full"></div>`}
-            <button
-              onclick=${goNext}
-              disabled=${!currentGroupValid || githubStepLoading}
-              class="w-full text-sm font-medium px-4 py-2 rounded-xl transition-all ac-btn-cyan"
-            >
-              ${activeGroup.id === "github" && githubStepLoading
-                ? "Checking..."
+            <${ActionButton}
+              onClick=${goNext}
+              disabled=${!currentGroupValid}
+              loading=${activeGroup.id === "github" && githubStepLoading}
+              tone="primary"
+              size="md"
+              idleLabel=${activeGroup.id === "github" &&
+              githubFlow === kGithubFlowImport
+                ? "Check compatibility"
                 : "Next"}
-            </button>
+              loadingLabel="Checking..."
+              className="w-full"
+            />
           `
         : html`
             ${step > 0
-              ? html`<button
-                  onclick=${goBack}
-                  class="w-full text-sm font-medium px-4 py-2 rounded-xl transition-all ac-btn-secondary"
-                >
-                  Back
-                </button>`
+              ? html`<${ActionButton}
+                  onClick=${goBack}
+                  tone="secondary"
+                  size="md"
+                  idleLabel="Back"
+                  className="w-full"
+                />`
               : html`<div class="w-full"></div>`}
-            <button
-              onclick=${handleSubmit}
-              disabled=${!allValid || loading}
-              class="w-full text-sm font-medium px-4 py-2 rounded-xl transition-all ac-btn-cyan"
-            >
-              ${loading ? "Starting..." : "Next"}
-            </button>
+            <${ActionButton}
+              onClick=${handleSubmit}
+              disabled=${!allValid}
+              loading=${loading}
+              tone="primary"
+              size="md"
+              idleLabel="Next"
+              loadingLabel="Starting..."
+              className="w-full"
+            />
           `}
     </div>
   `;

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>
+  `;
+};