@elizaos/app-core 2.0.0-alpha.37

package/src/components/onboarding/OnboardingPanel.tsx

@@ -0,0 +1,39 @@
+import type { OnboardingStep } from "@elizaos/app-core/state";
+import { type ReactNode, useEffect, useRef } from "react";
+
+interface OnboardingPanelProps {
+  step: OnboardingStep;
+  children: ReactNode;
+}
+
+export function OnboardingPanel({ step, children }: OnboardingPanelProps) {
+  const panelRef = useRef<HTMLDivElement>(null);
+  const prevStepRef = useRef(step);
+
+  // Re-trigger entry animation on step change
+  useEffect(() => {
+    if (prevStepRef.current !== step && panelRef.current) {
+      const panel = panelRef.current;
+      panel.style.animation = "none";
+      // Force reflow
+      void panel.offsetHeight;
+      panel.style.animation = "";
+
+      // Re-trigger children stagger
+      panel.querySelectorAll<HTMLElement>(":scope > *").forEach((child) => {
+        child.style.animation = "none";
+        void child.offsetHeight;
+        child.style.animation = "";
+      });
+    }
+    prevStepRef.current = step;
+  }, [step]);
+
+  return (
+    <div className="onboarding-right">
+      <div className="onboarding-panel" ref={panelRef}>
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/components/onboarding/OnboardingStepNav.tsx

@@ -0,0 +1,31 @@
+import { ONBOARDING_STEPS, useApp } from "@elizaos/app-core/state";
+
+export function OnboardingStepNav() {
+  const { onboardingStep, t } = useApp();
+
+  const currentIndex = ONBOARDING_STEPS.findIndex(
+    (s) => s.id === onboardingStep,
+  );
+
+  return (
+    <div className="onboarding-left">
+      <div className={`onboarding-step-list step-${currentIndex}`}>
+        {ONBOARDING_STEPS.map((step, i) => {
+          let state = "";
+          if (i < currentIndex) state = "onboarding-step-item--done";
+          else if (i === currentIndex) state = "onboarding-step-item--active";
+
+          return (
+            <div key={step.id} className={`onboarding-step-item ${state}`}>
+              <div className="onboarding-step-dot" />
+              <div className="onboarding-step-info">
+                <span className="onboarding-step-name">{t(step.name)}</span>
+                <span className="onboarding-step-sub">{t(step.subtitle)}</span>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/components/onboarding/PermissionsStep.tsx

@@ -0,0 +1,20 @@
+import { PermissionsOnboardingSection } from "@elizaos/app-core/components";
+import { useApp } from "@elizaos/app-core/state";
+
+export function PermissionsStep() {
+  const { handleOnboardingNext, t } = useApp();
+
+  return (
+    <>
+      <div className="onboarding-section-title">
+        {t("onboarding.systemAccessTitle")}
+      </div>
+      <div className="onboarding-divider">
+        <div className="onboarding-divider-diamond" />
+      </div>
+      <PermissionsOnboardingSection
+        onContinue={(options) => void handleOnboardingNext(options)}
+      />
+    </>
+  );
+}

package/src/components/onboarding/RpcStep.tsx

@@ -0,0 +1,402 @@
+import { useApp } from "@elizaos/app-core/state";
+import { useState } from "react";
+
+type RpcMode = "" | "cloud" | "byok";
+
+export function RpcStep() {
+  const {
+    elizaCloudConnected,
+    elizaCloudLoginBusy,
+    elizaCloudLoginError,
+    onboardingRunMode,
+    onboardingCloudProvider,
+    onboardingApiKey,
+    handleCloudLogin,
+    handleOnboardingNext,
+    handleOnboardingBack,
+    onboardingRpcKeys,
+    setState,
+    t,
+  } = useApp();
+
+  const elizaCloudReady =
+    elizaCloudConnected ||
+    (onboardingRunMode === "cloud" &&
+      onboardingCloudProvider === "elizacloud" &&
+      onboardingApiKey.trim().length > 0);
+  const [mode, setMode] = useState<RpcMode>(elizaCloudReady ? "cloud" : "");
+
+  const rpcKeys = onboardingRpcKeys as Record<string, string>;
+
+  const setRpcKey = (key: string, value: string) => {
+    setState("onboardingRpcKeys", { ...rpcKeys, [key]: value });
+  };
+
+  const handleSkip = () => {
+    // Clear any partial RPC config and advance
+    void handleOnboardingNext();
+  };
+
+  // ── No mode chosen yet — show two option cards ──────────────────────
+  if (!mode) {
+    return (
+      <>
+        <div className="onboarding-section-title">
+          {t("onboarding.rpcTitle")}
+        </div>
+        <div className="onboarding-divider">
+          <div className="onboarding-divider-diamond" />
+        </div>
+        <div className="onboarding-question">{t("onboarding.rpcQuestion")}</div>
+        <p className="onboarding-desc">{t("onboarding.rpcDesc")}</p>
+
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: "0.75rem",
+            width: "100%",
+            maxWidth: "22rem",
+            margin: "0 auto",
+          }}
+        >
+          {/* Eliza Cloud option */}
+          <button
+            type="button"
+            className="onboarding-provider-card onboarding-provider-card--recommended"
+            onClick={() => {
+              if (elizaCloudConnected) {
+                // Already connected — just mark cloud and advance
+                setState("onboardingRpcSelections", {
+                  evm: "eliza-cloud",
+                  bsc: "eliza-cloud",
+                  solana: "eliza-cloud",
+                });
+                setMode("cloud");
+              } else {
+                setMode("cloud");
+              }
+            }}
+            style={{ justifyContent: "center" }}
+          >
+            <div>
+              <div className="onboarding-provider-name">
+                {t("onboarding.rpcElizaCloud")}
+              </div>
+              <div className="onboarding-provider-desc">
+                {t("onboarding.rpcElizaCloudDesc")}
+              </div>
+            </div>
+          </button>
+
+          {/* BYOK option */}
+          <button
+            type="button"
+            className="onboarding-provider-card"
+            onClick={() => setMode("byok")}
+            style={{ justifyContent: "center" }}
+          >
+            <div>
+              <div className="onboarding-provider-name">
+                {t("onboarding.rpcBringKeys")}
+              </div>
+              <div className="onboarding-provider-desc">
+                Alchemy, QuickNode, Helius
+              </div>
+            </div>
+          </button>
+        </div>
+
+        <div className="onboarding-panel-footer">
+          <button
+            className="onboarding-back-link"
+            onClick={handleOnboardingBack}
+            type="button"
+          >
+            {t("onboarding.back")}
+          </button>
+          <button
+            className="onboarding-back-link"
+            onClick={handleSkip}
+            type="button"
+          >
+            {t("onboarding.rpcSkip")}
+          </button>
+        </div>
+      </>
+    );
+  }
+
+  // ── Eliza Cloud mode ───────────────────────────────────────────────
+  if (mode === "cloud") {
+    return (
+      <>
+        <div className="onboarding-section-title">
+          {t("onboarding.rpcTitle")}
+        </div>
+        <div className="onboarding-divider">
+          <div className="onboarding-divider-diamond" />
+        </div>
+
+        <div style={{ width: "100%", textAlign: "center" }}>
+          {elizaCloudConnected ? (
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: "0.5rem",
+                padding: "0.625rem 1rem",
+                border: "1px solid var(--ok-muted)",
+                background: "var(--ok-subtle)",
+                color: "var(--ok)",
+                fontSize: "0.875rem",
+                borderRadius: "0.5rem",
+                justifyContent: "center",
+              }}
+            >
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <title>{t("onboarding.connected")}</title>
+                <polyline points="20 6 9 17 4 12" />
+              </svg>
+              {t("onboarding.rpcConnectedCloud")}
+            </div>
+          ) : (
+            <>
+              <button
+                type="button"
+                className="onboarding-confirm-btn"
+                onClick={handleCloudLogin}
+                disabled={elizaCloudLoginBusy || elizaCloudReady}
+              >
+                {elizaCloudLoginBusy
+                  ? t("onboarding.connecting")
+                  : elizaCloudReady
+                    ? t("onboarding.connected")
+                    : t("onboarding.connectAccount")}
+              </button>
+              {elizaCloudLoginError &&
+                (() => {
+                  const urlMatch = elizaCloudLoginError.match(
+                    /^Open this link to log in: (.+)$/,
+                  );
+                  if (urlMatch) {
+                    return (
+                      <p
+                        style={{
+                          fontSize: "0.8125rem",
+                          marginTop: "0.5rem",
+                          color: "var(--text)",
+                        }}
+                      >
+                        Open this link to log in:{" "}
+                        <a
+                          href={urlMatch[1]}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          style={{
+                            color: "var(--text)",
+                            textDecoration: "underline",
+                          }}
+                        >
+                          Click here
+                        </a>
+                      </p>
+                    );
+                  }
+                  return (
+                    <p
+                      style={{
+                        color: "var(--danger)",
+                        fontSize: "0.8125rem",
+                        marginTop: "0.5rem",
+                      }}
+                    >
+                      {elizaCloudLoginError}
+                    </p>
+                  );
+                })()}
+              <p className="onboarding-desc">{t("onboarding.freeCredits")}</p>
+            </>
+          )}
+        </div>
+
+        <div className="onboarding-panel-footer">
+          <button
+            className="onboarding-back-link"
+            onClick={() => setMode("")}
+            type="button"
+          >
+            {t("onboarding.change")}
+          </button>
+          <button
+            className="onboarding-confirm-btn"
+            onClick={() => {
+              setState("onboardingRpcSelections", {
+                evm: "eliza-cloud",
+                bsc: "eliza-cloud",
+                solana: "eliza-cloud",
+              });
+              void handleOnboardingNext();
+            }}
+            disabled={!elizaCloudReady}
+            type="button"
+          >
+            {t("onboarding.next") ?? "Next"}
+          </button>
+        </div>
+      </>
+    );
+  }
+
+  // ── BYOK mode ───────────────────────────────────────────────────────
+  return (
+    <>
+      <div className="onboarding-section-title">
+        {t("onboarding.rpcTitle")}
+        <button
+          type="button"
+          className="onboarding-back-link"
+          style={{ marginLeft: "0.5rem", fontSize: "0.75rem" }}
+          onClick={() => setMode("")}
+        >
+          {t("onboarding.change")}
+        </button>
+      </div>
+      <div className="onboarding-divider">
+        <div className="onboarding-divider-diamond" />
+      </div>
+
+      <div
+        style={{
+          width: "100%",
+          textAlign: "left",
+          display: "flex",
+          flexDirection: "column",
+          gap: "1rem",
+        }}
+      >
+        {/* Alchemy — all EVM chains */}
+        <div>
+          <label
+            htmlFor="rpc-alchemy"
+            style={{
+              display: "block",
+              fontSize: "0.8125rem",
+              fontWeight: 600,
+              marginBottom: "0.375rem",
+              color: "var(--text)",
+            }}
+          >
+            {t("onboarding.rpcAlchemyKey")}
+          </label>
+          <p
+            className="onboarding-desc"
+            style={{ marginBottom: "0.375rem", textAlign: "left" }}
+          >
+            Covers Ethereum, Base, Arbitrum, Optimism, Polygon, BSC
+          </p>
+          <input
+            id="rpc-alchemy"
+            type="password"
+            className="onboarding-input"
+            placeholder="Enter Alchemy API key"
+            value={rpcKeys.ALCHEMY_API_KEY ?? ""}
+            onChange={(e) => setRpcKey("ALCHEMY_API_KEY", e.target.value)}
+          />
+        </div>
+
+        {/* Helius — Solana specific */}
+        <div>
+          <label
+            htmlFor="rpc-helius"
+            style={{
+              display: "block",
+              fontSize: "0.8125rem",
+              fontWeight: 600,
+              marginBottom: "0.375rem",
+              color: "var(--text)",
+            }}
+          >
+            {t("onboarding.rpcHeliusKey")}
+          </label>
+          <p
+            className="onboarding-desc"
+            style={{ marginBottom: "0.375rem", textAlign: "left" }}
+          >
+            Solana mainnet RPC &amp; token data
+          </p>
+          <input
+            id="rpc-helius"
+            type="password"
+            className="onboarding-input"
+            placeholder="Enter Helius API key"
+            value={rpcKeys.HELIUS_API_KEY ?? ""}
+            onChange={(e) => setRpcKey("HELIUS_API_KEY", e.target.value)}
+          />
+        </div>
+
+        {/* Birdeye — Solana token data (optional) */}
+        <div>
+          <label
+            htmlFor="rpc-birdeye"
+            style={{
+              display: "block",
+              fontSize: "0.8125rem",
+              fontWeight: 600,
+              marginBottom: "0.375rem",
+              color: "var(--text)",
+            }}
+          >
+            {t("onboarding.rpcBirdeyeKey")}
+          </label>
+          <input
+            id="rpc-birdeye"
+            type="password"
+            className="onboarding-input"
+            placeholder="Enter Birdeye API key (optional)"
+            value={rpcKeys.BIRDEYE_API_KEY ?? ""}
+            onChange={(e) => setRpcKey("BIRDEYE_API_KEY", e.target.value)}
+          />
+        </div>
+      </div>
+
+      <div className="onboarding-panel-footer">
+        <button
+          className="onboarding-back-link"
+          onClick={() => setMode("")}
+          type="button"
+        >
+          {t("onboarding.back")}
+        </button>
+        <button
+          className="onboarding-confirm-btn"
+          onClick={() => {
+            // Build RPC selections based on what keys were entered
+            const selections: Record<string, string> = {};
+            if (rpcKeys.ALCHEMY_API_KEY) {
+              selections.evm = "alchemy";
+              selections.bsc = "alchemy";
+            }
+            if (rpcKeys.HELIUS_API_KEY) {
+              selections.solana = "helius-birdeye";
+            }
+            setState("onboardingRpcSelections", selections);
+            void handleOnboardingNext();
+          }}
+          type="button"
+        >
+          {t("onboarding.next") ?? "Next"}
+        </button>
+      </div>
+    </>
+  );
+}

package/src/components/onboarding/WakeUpStep.tsx

@@ -0,0 +1,184 @@
+import { client } from "@elizaos/app-core/api";
+import { useApp } from "@elizaos/app-core/state";
+import { useCallback, useRef, useState } from "react";
+
+export function WakeUpStep() {
+  const { handleOnboardingNext, t } = useApp();
+
+  const [showImport, setShowImport] = useState(false);
+  const [importFile, setImportFile] = useState<File | null>(null);
+  const [importPassword, setImportPassword] = useState("");
+  const [importBusy, setImportBusy] = useState(false);
+  const [importError, setImportError] = useState<string | null>(null);
+  const [importSuccess, setImportSuccess] = useState<string | null>(null);
+
+  const importFileRef = useRef<HTMLInputElement>(null);
+  const importBusyRef = useRef(false);
+
+  const handleImportAgent = useCallback(async () => {
+    if (importBusyRef.current || importBusy) return;
+    if (!importFile) {
+      setImportError(t("onboarding.selectFileError"));
+      return;
+    }
+    if (!importPassword || importPassword.length < 4) {
+      setImportError(t("onboarding.passwordMinError"));
+      return;
+    }
+    try {
+      importBusyRef.current = true;
+      setImportBusy(true);
+      setImportError(null);
+      setImportSuccess(null);
+      const fileBuffer = await importFile.arrayBuffer();
+      const result = await client.importAgent(importPassword, fileBuffer);
+      const counts = result.counts;
+      const summary = [
+        counts.memories ? `${counts.memories} memories` : null,
+        counts.entities ? `${counts.entities} entities` : null,
+        counts.rooms ? `${counts.rooms} rooms` : null,
+      ]
+        .filter(Boolean)
+        .join(", ");
+      setImportSuccess(
+        `Imported "${result.agentName}" successfully${summary ? `: ${summary}` : ""}. Restarting...`,
+      );
+      setImportPassword("");
+      setImportFile(null);
+      setTimeout(() => {
+        window.location.reload();
+      }, 2000);
+    } catch (err) {
+      setImportError(err instanceof Error ? err.message : "Import failed");
+    } finally {
+      importBusyRef.current = false;
+      setImportBusy(false);
+    }
+  }, [importBusy, importFile, importPassword, t]);
+
+  if (showImport) {
+    return (
+      <>
+        <div className="onboarding-section-title">
+          {t("onboarding.importAgent")}
+        </div>
+        <div className="onboarding-divider">
+          <div className="onboarding-divider-diamond" />
+        </div>
+
+        <p className="onboarding-desc" style={{ marginBottom: "16px" }}>
+          {t("onboarding.importDesc")}
+        </p>
+
+        <input
+          ref={importFileRef}
+          type="file"
+          accept=".eliza-agent"
+          onChange={(e) => {
+            setImportFile(e.target.files?.[0] ?? null);
+            setImportError(null);
+          }}
+          className="onboarding-input"
+          style={{ fontSize: "13px", textAlign: "left", marginBottom: "12px" }}
+        />
+
+        <input
+          type="password"
+          placeholder={t("onboarding.decryptionPasswordPlaceholder")}
+          value={importPassword}
+          onChange={(e) => {
+            setImportPassword(e.target.value);
+            setImportError(null);
+          }}
+          className="onboarding-input"
+          style={{ marginBottom: "12px" }}
+        />
+
+        {importError && (
+          <p
+            className="onboarding-desc"
+            style={{ color: "var(--danger)", marginBottom: "8px" }}
+          >
+            {importError}
+          </p>
+        )}
+        {importSuccess && (
+          <p
+            className="onboarding-desc"
+            style={{ color: "var(--ok)", marginBottom: "8px" }}
+          >
+            {importSuccess}
+          </p>
+        )}
+
+        <div className="onboarding-panel-footer">
+          <button
+            className="onboarding-back-link"
+            onClick={() => {
+              setShowImport(false);
+              setImportError(null);
+              setImportSuccess(null);
+              setImportFile(null);
+              setImportPassword("");
+            }}
+            type="button"
+          >
+            {t("onboarding.cancel")}
+          </button>
+          <button
+            className="onboarding-confirm-btn"
+            disabled={importBusy || !importFile}
+            onClick={() => void handleImportAgent()}
+            type="button"
+          >
+            {importBusy ? t("onboarding.importing") : t("onboarding.restore")}
+          </button>
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <div className="onboarding-section-title">
+        {t("onboarding.welcomeTitle")}
+      </div>
+      <div className="onboarding-divider">
+        <div className="onboarding-divider-diamond" />
+      </div>
+
+      <p className="onboarding-desc">{t("onboarding.welcomeSubtitle")}</p>
+
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "12px",
+          width: "100%",
+          marginTop: "16px",
+        }}
+      >
+        <button
+          className="onboarding-confirm-btn"
+          onClick={() => handleOnboardingNext()}
+          type="button"
+          style={{ width: "100%" }}
+        >
+          {t("onboarding.createNewAgent")}
+        </button>
+        <button
+          className="onboarding-confirm-btn"
+          onClick={() => setShowImport(true)}
+          type="button"
+          style={{
+            width: "100%",
+            background: "transparent",
+            border: "1px solid var(--border)",
+          }}
+        >
+          {t("onboarding.restoreFromBackup")}
+        </button>
+      </div>
+    </>
+  );
+}