@chrysb/alphaclaw 0.4.1-beta.1 → 0.4.1-beta.2

package/lib/public/js/components/file-viewer/index.js

@@ -32,7 +32,7 @@ export const FileViewer = ({
     onRequestEdit,
   });
 
-  if (!state.hasSelectedPath) {
+  if (!state.hasSelectedPath || state.isFolderPath) {
     return html`
       <div class="file-viewer-empty">
         <div class="file-viewer-empty-mark">[ ]</div>
@@ -99,13 +99,7 @@ export const FileViewer = ({
           `
         : state.error
           ? html`<div class="file-viewer-state file-viewer-state-error">${state.error}</div>`
-          : state.isFolderPath
-            ? html`
-                <div class="file-viewer-state">
-                  Folder selected. Choose a file from this folder in the tree.
-                </div>
-              `
-            : state.isImageFile || state.isAudioFile
+          : state.isImageFile || state.isAudioFile
               ? html`
                   <${MediaPreview}
                     isImageFile=${state.isImageFile}

package/lib/public/js/components/icons.js

@@ -262,6 +262,32 @@ export const DeleteBinLineIcon = ({ className = "" }) => html`
   </svg>
 `;
 
+export const FileAddLineIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      d="M15 4H5V20H19V8H15V4ZM3 2.9918C3 2.44405 3.44749 2 3.9985 2H16L20.9997 7L21 20.9925C21 21.5489 20.5551 22 20.0066 22H3.9934C3.44476 22 3 21.5447 3 21.0082V2.9918ZM11 11V8H13V11H16V13H13V16H11V13H8V11H11Z"
+    />
+  </svg>
+`;
+
+export const FolderAddLineIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      d="M12.4142 5H21C21.5523 5 22 5.44772 22 6V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H10.4142L12.4142 5ZM4 5V19H20V7H11.5858L9.58579 5H4ZM11 12V9H13V12H16V14H13V17H11V14H8V12H11Z"
+    />
+  </svg>
+`;
+
 export const RestartLineIcon = ({ className = "" }) => html`
   <svg
     class=${className}

package/lib/public/js/components/onboarding/use-welcome-codex.js

@@ -0,0 +1,129 @@
+import { useEffect, useRef, useState } from "https://esm.sh/preact/hooks";
+import {
+  disconnectCodex,
+  exchangeCodexOAuth,
+  fetchCodexStatus,
+} from "../../lib/api.js";
+
+export const useWelcomeCodex = ({ setFormError } = {}) => {
+  const [codexStatus, setCodexStatus] = useState({ connected: false });
+  const [codexLoading, setCodexLoading] = useState(true);
+  const [codexManualInput, setCodexManualInput] = useState("");
+  const [codexExchanging, setCodexExchanging] = useState(false);
+  const [codexAuthStarted, setCodexAuthStarted] = useState(false);
+  const [codexAuthWaiting, setCodexAuthWaiting] = useState(false);
+  const codexPopupPollRef = useRef(null);
+
+  const refreshCodexStatus = async () => {
+    try {
+      const status = await fetchCodexStatus();
+      setCodexStatus(status);
+      if (status?.connected) {
+        setCodexAuthStarted(false);
+        setCodexAuthWaiting(false);
+      }
+    } catch {
+      setCodexStatus({ connected: false });
+    } finally {
+      setCodexLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    refreshCodexStatus();
+  }, []);
+
+  useEffect(() => {
+    const onMessage = async (e) => {
+      if (e.data?.codex === "success") {
+        await refreshCodexStatus();
+      }
+      if (e.data?.codex === "error") {
+        setFormError(`Codex auth failed: ${e.data.message || "unknown error"}`);
+      }
+    };
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [setFormError]);
+
+  useEffect(
+    () => () => {
+      if (codexPopupPollRef.current) {
+        clearInterval(codexPopupPollRef.current);
+        codexPopupPollRef.current = null;
+      }
+    },
+    [],
+  );
+
+  const startCodexAuth = () => {
+    if (codexStatus.connected) return;
+    setCodexAuthStarted(true);
+    setCodexAuthWaiting(true);
+    const authUrl = "/auth/codex/start";
+    const popup = window.open(
+      authUrl,
+      "codex-auth",
+      "popup=yes,width=640,height=780",
+    );
+    if (!popup || popup.closed) {
+      setCodexAuthWaiting(false);
+      window.location.href = authUrl;
+      return;
+    }
+    if (codexPopupPollRef.current) {
+      clearInterval(codexPopupPollRef.current);
+    }
+    codexPopupPollRef.current = setInterval(() => {
+      if (popup.closed) {
+        clearInterval(codexPopupPollRef.current);
+        codexPopupPollRef.current = null;
+        setCodexAuthWaiting(false);
+      }
+    }, 500);
+  };
+
+  const completeCodexAuth = async () => {
+    if (!codexManualInput.trim() || codexExchanging) return;
+    setCodexExchanging(true);
+    setFormError(null);
+    try {
+      const result = await exchangeCodexOAuth(codexManualInput.trim());
+      if (!result.ok)
+        throw new Error(result.error || "Codex OAuth exchange failed");
+      setCodexManualInput("");
+      setCodexAuthStarted(false);
+      setCodexAuthWaiting(false);
+      await refreshCodexStatus();
+    } catch (err) {
+      setFormError(err.message || "Codex OAuth exchange failed");
+    } finally {
+      setCodexExchanging(false);
+    }
+  };
+
+  const handleCodexDisconnect = async () => {
+    const result = await disconnectCodex();
+    if (!result.ok) {
+      setFormError(result.error || "Failed to disconnect Codex");
+      return;
+    }
+    setCodexAuthStarted(false);
+    setCodexAuthWaiting(false);
+    setCodexManualInput("");
+    await refreshCodexStatus();
+  };
+
+  return {
+    codexStatus,
+    codexLoading,
+    codexManualInput,
+    setCodexManualInput,
+    codexExchanging,
+    codexAuthStarted,
+    codexAuthWaiting,
+    startCodexAuth,
+    completeCodexAuth,
+    handleCodexDisconnect,
+  };
+};

package/lib/public/js/components/onboarding/use-welcome-pairing.js

@@ -0,0 +1,74 @@
+import { useEffect, useState } from "https://esm.sh/preact/hooks";
+import { approvePairing, fetchPairings, fetchStatus, rejectPairing } from "../../lib/api.js";
+import { usePolling } from "../../hooks/usePolling.js";
+import { isChannelPaired } from "./pairing-utils.js";
+
+export const useWelcomePairing = ({
+  isPairingStep = false,
+  selectedPairingChannel = "",
+} = {}) => {
+  const [pairingError, setPairingError] = useState(null);
+  const [pairingComplete, setPairingComplete] = useState(false);
+
+  const pairingStatusPoll = usePolling(fetchStatus, 3000, {
+    enabled: isPairingStep,
+  });
+  const pairingRequestsPoll = usePolling(
+    async () => {
+      const payload = await fetchPairings();
+      const allPending = payload.pending || [];
+      return allPending.filter((p) => p.channel === selectedPairingChannel);
+    },
+    1000,
+    { enabled: isPairingStep && !!selectedPairingChannel },
+  );
+  const pairingChannels = pairingStatusPoll.data?.channels || {};
+  const canFinishPairing = isChannelPaired(pairingChannels, selectedPairingChannel);
+
+  useEffect(() => {
+    if (isPairingStep && canFinishPairing) {
+      setPairingComplete(true);
+    }
+  }, [isPairingStep, canFinishPairing]);
+
+  const handlePairingApprove = async (id, channel) => {
+    try {
+      setPairingError(null);
+      const result = await approvePairing(id, channel);
+      if (!result.ok) throw new Error(result.error || "Could not approve pairing");
+      setPairingComplete(true);
+      pairingRequestsPoll.refresh();
+      pairingStatusPoll.refresh();
+    } catch (err) {
+      setPairingError(err.message || "Could not approve pairing");
+    }
+  };
+
+  const handlePairingReject = async (id, channel) => {
+    try {
+      setPairingError(null);
+      const result = await rejectPairing(id, channel);
+      if (!result.ok) throw new Error(result.error || "Could not reject pairing");
+      pairingRequestsPoll.refresh();
+    } catch (err) {
+      setPairingError(err.message || "Could not reject pairing");
+    }
+  };
+
+  const resetPairingState = () => {
+    setPairingError(null);
+    setPairingComplete(false);
+  };
+
+  return {
+    pairingStatusPoll,
+    pairingRequestsPoll,
+    pairingChannels,
+    canFinishPairing,
+    pairingError,
+    pairingComplete,
+    handlePairingApprove,
+    handlePairingReject,
+    resetPairingState,
+  };
+};

package/lib/public/js/components/onboarding/use-welcome-storage.js

@@ -0,0 +1,60 @@
+import { useEffect, useState } from "https://esm.sh/preact/hooks";
+
+export const kOnboardingStorageKey = "openclaw_setup";
+export const kOnboardingStepKey = "_step";
+export const kPairingChannelKey = "_pairingChannel";
+export const kOnboardingSetupErrorKey = "_lastSetupError";
+
+const loadInitialSetupState = () => {
+  try {
+    return JSON.parse(localStorage.getItem(kOnboardingStorageKey) || "{}");
+  } catch {
+    return {};
+  }
+};
+
+export const useWelcomeStorage = ({
+  kSetupStepIndex,
+  kPairingStepIndex,
+} = {}) => {
+  const [initialSetupState] = useState(loadInitialSetupState);
+  const [vals, setVals] = useState(() => ({ ...initialSetupState }));
+  const [setupError, setSetupError] = useState(null);
+  const initialSetupError = String(
+    initialSetupState?.[kOnboardingSetupErrorKey] || "",
+  ).trim();
+  const shouldRecoverFromSetupState = !!initialSetupError;
+  const [step, setStep] = useState(() => {
+    const parsedStep = Number.parseInt(
+      String(initialSetupState?.[kOnboardingStepKey] || ""),
+      10,
+    );
+    if (!Number.isFinite(parsedStep)) return 0;
+    const clampedStep = Math.max(0, Math.min(kPairingStepIndex, parsedStep));
+    if (clampedStep === kSetupStepIndex && shouldRecoverFromSetupState) return 0;
+    return clampedStep;
+  });
+
+  useEffect(() => {
+    localStorage.setItem(
+      kOnboardingStorageKey,
+      JSON.stringify({
+        ...vals,
+        [kOnboardingStepKey]: step,
+        ...(setupError ? { [kOnboardingSetupErrorKey]: setupError } : {}),
+      }),
+    );
+  }, [vals, step, setupError]);
+
+  const setValue = (key, value) => setVals((prev) => ({ ...prev, [key]: value }));
+
+  return {
+    vals,
+    setVals,
+    setValue,
+    step,
+    setStep,
+    setupError,
+    setSetupError,
+  };
+};