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

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

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

@@ -0,0 +1,112 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { kWelcomeGroups } from "../onboarding/welcome-config.js";
+import { WelcomeImportStep } from "../onboarding/welcome-import-step.js";
+import { WelcomePlaceholderReviewStep } from "../onboarding/welcome-placeholder-review-step.js";
+import { WelcomeSecretReviewStep } from "../onboarding/welcome-secret-review-step.js";
+import { WelcomeHeader } from "../onboarding/welcome-header.js";
+import { WelcomeSetupStep } from "../onboarding/welcome-setup-step.js";
+import { WelcomeFormStep } from "../onboarding/welcome-form-step.js";
+import { WelcomePairingStep } from "../onboarding/welcome-pairing-step.js";
+import { useWelcome } from "./use-welcome.js";
+
+const html = htm.bind(h);
+
+export const Welcome = ({ onComplete }) => {
+  const { state, actions } = useWelcome({ onComplete });
+
+  return html`
+    <div class="max-w-lg w-full space-y-5">
+      <${WelcomeHeader}
+        groups=${kWelcomeGroups}
+        step=${state.step}
+        isSetupStep=${state.isSetupStep}
+        isPairingStep=${state.isPairingStep}
+        stepNumber=${state.stepNumber}
+        activeStepLabel=${state.activeStepLabel}
+      />
+
+      <div class="bg-surface border border-border rounded-xl p-4 space-y-3">
+        ${state.isImportStep
+          ? html`<${WelcomeImportStep}
+              scanResult=${state.importScanResult}
+              scanning=${state.importScanning}
+              error=${state.importError}
+              onApprove=${actions.handleImportApprove}
+              onShowSecretReview=${actions.handleShowSecretReview}
+              onBack=${actions.handleImportBack}
+            />`
+          : state.isSecretReviewStep
+            ? html`<${WelcomeSecretReviewStep}
+                secrets=${state.importScanResult?.secrets || []}
+                onApprove=${actions.handleImportApprove}
+                onBack=${actions.handleSecretReviewBack}
+                loading=${state.importScanning}
+                error=${state.importError}
+              />`
+            : state.isPlaceholderReviewStep
+              ? html`<${WelcomePlaceholderReviewStep}
+                  placeholderReview=${state.placeholderReview}
+                  vals=${state.vals}
+                  setValue=${actions.setValue}
+                  onContinue=${actions.handlePlaceholderReviewContinue}
+                />`
+              : state.isSetupStep
+                ? html`<${WelcomeSetupStep}
+                    error=${state.setupError}
+                    loading=${state.loading}
+                    onRetry=${actions.handleSubmit}
+                    onBack=${actions.goBackFromSetupError}
+                  />`
+                : state.isPairingStep
+                  ? html`<${WelcomePairingStep}
+                      channel=${state.selectedPairingChannel}
+                      pairings=${state.pairingRequestsPoll.data || []}
+                      channels=${state.pairingChannels}
+                      loading=${!state.pairingStatusPoll.data}
+                      error=${state.pairingError}
+                      onApprove=${actions.handlePairingApprove}
+                      onReject=${actions.handlePairingReject}
+                      canFinish=${state.pairingComplete || state.canFinishPairing}
+                      onContinue=${actions.finishOnboarding}
+                    />`
+                  : html`
+                      <${WelcomeFormStep}
+                        activeGroup=${state.activeGroup}
+                        vals=${state.vals}
+                        hasAi=${state.hasAi}
+                        setValue=${actions.setValue}
+                        modelOptions=${state.modelOptions}
+                        modelsLoading=${state.modelsLoading}
+                        modelsError=${state.modelsError}
+                        canToggleFullCatalog=${state.canToggleFullCatalog}
+                        showAllModels=${state.showAllModels}
+                        setShowAllModels=${actions.setShowAllModels}
+                        selectedProvider=${state.selectedProvider}
+                        codexLoading=${state.codexLoading}
+                        codexStatus=${state.codexStatus}
+                        startCodexAuth=${actions.startCodexAuth}
+                        handleCodexDisconnect=${actions.handleCodexDisconnect}
+                        codexAuthStarted=${state.codexAuthStarted}
+                        codexAuthWaiting=${state.codexAuthWaiting}
+                        codexManualInput=${state.codexManualInput}
+                        setCodexManualInput=${actions.setCodexManualInput}
+                        completeCodexAuth=${actions.completeCodexAuth}
+                        codexExchanging=${state.codexExchanging}
+                        visibleAiFieldKeys=${state.visibleAiFieldKeys}
+                        error=${state.formError}
+                        step=${state.step}
+                        totalGroups=${kWelcomeGroups.length}
+                        currentGroupValid=${state.currentGroupValid}
+                        goBack=${actions.goBack}
+                        goNext=${actions.goNext}
+                        loading=${state.loading}
+                        githubStepLoading=${state.githubStepLoading}
+                        allValid=${state.allValid}
+                        handleSubmit=${actions.handleSubmit}
+                      />
+                    `}
+      </div>
+    </div>
+  `;
+};