botschat 0.1.6 → 0.1.7

package/packages/web/src/components/LoginPage.tsx

@@ -49,6 +49,8 @@ export function LoginPage() {
   }, [firebaseEnabled]);
 
   const emailEnabled = authConfig?.emailEnabled ?? true;
+  const configLoaded = authConfig !== null;
+  const hasAnyLoginMethod = configLoaded && (firebaseEnabled || emailEnabled);
 
   const handleAuthSuccess = (res: { id: string; email: string; displayName?: string; token: string; refreshToken?: string }) => {
     setToken(res.token);
@@ -148,8 +150,22 @@ export function LoginPage() {
               : "Sign in"}
           </h2>
 
+          {/* Loading: avoid showing empty card on first paint before config is loaded */}
+          {!configLoaded && (
+            <div className="py-8 text-center" style={{ color: "var(--text-muted)" }}>
+              <span className="text-body">Loading sign-in options…</span>
+            </div>
+          )}
+
+          {/* No methods available (e.g. misconfiguration) */}
+          {configLoaded && !hasAnyLoginMethod && (
+            <div className="py-4 text-caption" style={{ color: "var(--text-secondary)" }}>
+              Sign-in is not configured. Please contact support.
+            </div>
+          )}
+
           {/* OAuth buttons */}
-          {firebaseEnabled && (
+          {configLoaded && firebaseEnabled && (
             <>
               <div className="space-y-3">
                 {/* Google */}
@@ -198,7 +214,7 @@ export function LoginPage() {
               </div>
 
               {/* Divider — only show if email login is also available */}
-              {emailEnabled && (
+              {configLoaded && emailEnabled && (
                 <div className="flex items-center gap-3 my-5">
                   <div className="flex-1 h-px" style={{ background: "var(--border)" }} />
                   <span className="text-caption" style={{ color: "var(--text-muted)" }}>
@@ -221,7 +237,7 @@ export function LoginPage() {
           )}
 
           {/* Email/password form — only in local/dev mode */}
-          {emailEnabled && (
+          {configLoaded && emailEnabled && (
             <>
               <form onSubmit={handleSubmit} className="space-y-4">
                 {isRegister && (

package/packages/web/src/components/OnboardingPage.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState, useCallback } from "react";
 import { pairingApi, setupApi, type PairingToken } from "../api";
 import { useAppState } from "../store";
 import { dlog } from "../debug-log";
+import { E2eService } from "../e2e";
 
 /** Clipboard copy button with feedback */
 function CopyButton({ text }: { text: string }) {
@@ -78,6 +79,14 @@ export function OnboardingPage({ onSkip }: { onSkip: () => void }) {
   const [pairingToken, setPairingToken] = useState<string | null>(null);
   const [loadingToken, setLoadingToken] = useState(true);
 
+  // E2E password step
+  const [e2ePassword, setE2ePassword] = useState("");
+  const [e2eConfirm, setE2eConfirm] = useState("");
+  const [e2eRemember, setE2eRemember] = useState(true);
+  const [e2eReady, setE2eReady] = useState(false); // true after password is set
+  const [e2eError, setE2eError] = useState("");
+  const [e2eLoading, setE2eLoading] = useState(false);
+
   // Cloud URL — resolved by backend (smart priority), editable by user
   const [cloudUrl, setCloudUrl] = useState<string>(
     typeof window !== "undefined" ? window.location.origin : "https://console.botschat.app",
@@ -138,10 +147,32 @@ export function OnboardingPage({ onSkip }: { onSkip: () => void }) {
     return () => { cancelled = true; };
   }, []);
 
+  // E2E password validation
+  const e2ePasswordValid = e2ePassword.length >= 6 && e2ePassword === e2eConfirm;
+
+  const handleE2eSubmit = async () => {
+    if (!e2ePasswordValid) return;
+    if (!state.user?.id) {
+      setE2eError("User not loaded yet. Please wait.");
+      return;
+    }
+    setE2eLoading(true);
+    setE2eError("");
+    try {
+      await E2eService.setPassword(e2ePassword, state.user.id, e2eRemember);
+      setE2eReady(true);
+    } catch (err) {
+      setE2eError("Failed to derive encryption key. Please try again.");
+    } finally {
+      setE2eLoading(false);
+    }
+  };
+
   const setupCommand = pairingToken
     ? `openclaw plugins install @botschat/botschat && \\
 openclaw config set channels.botschat.cloudUrl ${cloudUrl} && \\
 openclaw config set channels.botschat.pairingToken ${pairingToken} && \\
+openclaw config set channels.botschat.e2ePassword "${e2ePassword}" && \\
 openclaw config set channels.botschat.enabled true && \\
 openclaw gateway restart`
     : "Loading...";
@@ -220,14 +251,130 @@ openclaw gateway restart`
                 </span>
               </div>
 
-              {/* Step 1 */}
+              {/* Step 1: E2E Password (mandatory) */}
               <div className="mb-6">
+                <div className="flex items-center gap-2 mb-2">
+                  <span
+                    className="inline-flex items-center justify-center w-6 h-6 rounded-full text-tiny font-bold text-white"
+                    style={{ background: e2eReady ? "var(--accent-green)" : "var(--bg-active)" }}
+                  >
+                    {e2eReady ? (
+                      <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
+                        <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+                      </svg>
+                    ) : "1"}
+                  </span>
+                  <h3 className="text-body font-bold" style={{ color: "var(--text-primary)" }}>
+                    Set your E2E encryption password
+                  </h3>
+                </div>
+
+                {!e2eReady ? (
+                  <div className="ml-8">
+                    <p className="text-caption mb-3" style={{ color: "var(--text-secondary)" }}>
+                      Your messages, prompts, and task results will be <strong>encrypted on this device</strong> before
+                      they leave — the server only stores ciphertext it cannot read.
+                    </p>
+
+                    {/* Architecture diagram */}
+                    <div className="mb-3 rounded-md overflow-hidden" style={{ border: "1px solid var(--border)" }}>
+                      <img
+                        src="/architecture.png"
+                        alt="BotsChat E2E Encryption Architecture"
+                        className="w-full"
+                        style={{ display: "block" }}
+                      />
+                    </div>
+                    <p className="text-caption mb-4" style={{ color: "var(--text-muted)" }}>
+                      Encryption keys are derived locally and never sent to the server.{" "}
+                      <a
+                        href="https://botschat.app/#features"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="underline"
+                        style={{ color: "var(--text-link)" }}
+                      >
+                        Learn more
+                      </a>
+                    </p>
+
+                    {/* Password inputs */}
+                    <div className="space-y-2.5">
+                      <input
+                        type="password"
+                        value={e2ePassword}
+                        onChange={(e) => setE2ePassword(e.target.value)}
+                        placeholder="E2E encryption password (min 6 chars)"
+                        className="w-full px-3 py-2 rounded-sm text-caption"
+                        style={{
+                          background: "var(--code-bg)",
+                          border: "1px solid var(--border)",
+                          color: "var(--text-primary)",
+                          outline: "none",
+                        }}
+                      />
+                      <input
+                        type="password"
+                        value={e2eConfirm}
+                        onChange={(e) => setE2eConfirm(e.target.value)}
+                        placeholder="Confirm password"
+                        className="w-full px-3 py-2 rounded-sm text-caption"
+                        style={{
+                          background: "var(--code-bg)",
+                          border: `1px solid ${e2eConfirm && e2ePassword !== e2eConfirm ? "var(--accent-red, #e53e3e)" : "var(--border)"}`,
+                          color: "var(--text-primary)",
+                          outline: "none",
+                        }}
+                      />
+                      {e2eConfirm && e2ePassword !== e2eConfirm && (
+                        <p className="text-caption" style={{ color: "var(--accent-red, #e53e3e)" }}>
+                          Passwords do not match.
+                        </p>
+                      )}
+
+                      {/* Remember checkbox */}
+                      <label className="flex items-center gap-2 text-caption" style={{ color: "var(--text-secondary)" }}>
+                        <input
+                          type="checkbox"
+                          checked={e2eRemember}
+                          onChange={(e) => setE2eRemember(e.target.checked)}
+                        />
+                        Remember on this device
+                      </label>
+
+                      {e2eError && (
+                        <p className="text-caption" style={{ color: "var(--accent-red, #e53e3e)" }}>{e2eError}</p>
+                      )}
+
+                      <button
+                        onClick={handleE2eSubmit}
+                        disabled={!e2ePasswordValid || e2eLoading}
+                        className="w-full py-2 font-bold text-caption text-white rounded-sm transition-colors"
+                        style={{
+                          background: e2ePasswordValid && !e2eLoading ? "var(--bg-active)" : "var(--bg-hover)",
+                          cursor: e2ePasswordValid && !e2eLoading ? "pointer" : "not-allowed",
+                          opacity: e2ePasswordValid && !e2eLoading ? 1 : 0.5,
+                        }}
+                      >
+                        {e2eLoading ? "Deriving key..." : "Set E2E Password & Continue"}
+                      </button>
+                    </div>
+                  </div>
+                ) : (
+                  <p className="text-caption ml-8" style={{ color: "var(--accent-green)" }}>
+                    E2E encryption is active. Your encryption key has been derived.
+                  </p>
+                )}
+              </div>
+
+              {/* Step 2: Install command (only shown after E2E password set) */}
+              <div className="mb-6" style={{ opacity: e2eReady ? 1 : 0.4, pointerEvents: e2eReady ? "auto" : "none" }}>
                 <div className="flex items-center gap-2 mb-2">
                   <span
                     className="inline-flex items-center justify-center w-6 h-6 rounded-full text-tiny font-bold text-white"
                     style={{ background: "var(--bg-active)" }}
                   >
-                    1
+                    2
                   </span>
                   <h3 className="text-body font-bold" style={{ color: "var(--text-primary)" }}>
                     Run this command on your OpenClaw machine
@@ -306,14 +453,14 @@ openclaw gateway restart`
                 </div>
               </div>
 
-              {/* Step 2 */}
-              <div className="mb-6">
+              {/* Step 3: Verify */}
+              <div className="mb-6" style={{ opacity: e2eReady ? 1 : 0.4, pointerEvents: e2eReady ? "auto" : "none" }}>
                 <div className="flex items-center gap-2 mb-2">
                   <span
                     className="inline-flex items-center justify-center w-6 h-6 rounded-full text-tiny font-bold text-white"
                     style={{ background: "var(--bg-active)" }}
                   >
-                    2
+                    3
                   </span>
                   <h3 className="text-body font-bold" style={{ color: "var(--text-primary)" }}>
                     Verify connection

package/packages/web/src/e2e.ts

@@ -0,0 +1,133 @@
+import { deriveKey, encryptText, decryptText, toBase64, fromBase64 } from "e2e-crypto";
+
+const STORAGE_KEY = "botschat_e2e_pwd_cache"; // Stores encrypted password? Or password itself?
+// For MVP, plan says: "Remember on this device" -> store password in localStorage (implicit risk acceptable for user convenience).
+// Actually, storing password in localStorage is common for "Remember Me" if we don't have better key storage.
+// We can store a hash? No, we need the password to derive the key.
+// So we store the password.
+
+let currentKey: Uint8Array | null = null;
+let currentPassword: string | null = null;
+const listeners: Set<() => void> = new Set();
+
+export const E2eService = {
+  /**
+   * Subscribe to key state changes. Returns unsubscribe function.
+   */
+  subscribe(cb: () => void): () => void {
+    listeners.add(cb);
+    return () => listeners.delete(cb);
+  },
+
+  /**
+   * Notify all listeners.
+   */
+  notify() {
+    listeners.forEach((cb) => cb());
+  },
+
+  /**
+   * Set the E2E password and derive the key.
+   * Optionally persist the password to localStorage.
+   */
+  async setPassword(password: string, userId: string, remember: boolean): Promise<void> {
+    if (!password) {
+      currentKey = null;
+      currentPassword = null;
+      localStorage.removeItem(STORAGE_KEY);
+      this.notify();
+      return;
+    }
+
+    try {
+      currentKey = await deriveKey(password, userId);
+      currentPassword = password;
+      if (remember) {
+        localStorage.setItem(STORAGE_KEY, password);
+      } else {
+        localStorage.removeItem(STORAGE_KEY);
+      }
+      this.notify();
+    } catch (err) {
+      console.error("Failed to derive E2E key:", err);
+      throw err;
+    }
+  },
+
+  /**
+   * Clear the key and password from memory and storage.
+   */
+  clear(): void {
+    currentKey = null;
+    currentPassword = null;
+    localStorage.removeItem(STORAGE_KEY);
+    this.notify();
+  },
+
+  /**
+   * Check if we have a key loaded.
+   */
+  hasKey(): boolean {
+    return !!currentKey;
+  },
+
+  /**
+   * Check if we have a saved password in storage.
+   */
+  hasSavedPassword(): boolean {
+    return !!localStorage.getItem(STORAGE_KEY);
+  },
+
+  /**
+   * Try to load the password from storage and derive key.
+   */
+  async loadSavedPassword(userId: string): Promise<boolean> {
+    const pwd = localStorage.getItem(STORAGE_KEY);
+    if (!pwd) return false;
+    try {
+      await this.setPassword(pwd, userId, true);
+      return true;
+    } catch {
+      return false;
+    }
+  },
+
+  /**
+   * Encrypt text using the current key.
+   * Generates a random messageId (UUID) as contextId/nonce source.
+   * Returns { ciphertext: base64, messageId: string }
+   */
+  async encrypt(text: string): Promise<{ ciphertext: string; messageId: string }> {
+    if (!currentKey) throw new Error("E2E key not set");
+    const messageId = crypto.randomUUID();
+    const encrypted = await encryptText(currentKey, text, messageId);
+    return { ciphertext: toBase64(encrypted), messageId };
+  },
+
+  /**
+   * Decrypt text (base64) using the current key and messageId (contextId).
+   */
+  async decrypt(ciphertextBase64: string, messageId: string): Promise<string> {
+    if (!currentKey) throw new Error("E2E key not set");
+    const ciphertext = fromBase64(ciphertextBase64);
+    return decryptText(currentKey, ciphertext, messageId);
+  },
+  
+  /**
+   * Get the current E2E password (in memory). Returns null if not set.
+   */
+  getPassword(): string | null {
+    return currentPassword;
+  },
+
+  /**
+   * Decrypt bytes (base64) -> Uint8Array.
+   */
+  async decryptBytes(ciphertextBase64: string, messageId: string): Promise<Uint8Array> {
+    if (!currentKey) throw new Error("E2E key not set");
+    const ciphertext = fromBase64(ciphertextBase64);
+    // decryptText returns string; re-encode to bytes
+    const plainStr = await decryptText(currentKey, ciphertext, messageId);
+    return new TextEncoder().encode(plainStr);
+  }
+};

package/packages/web/src/main.tsx

@@ -2,6 +2,9 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
 import "./index.css";
+import { initAnalytics } from "./analytics";
+
+initAnalytics();
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>

package/packages/web/src/store.ts

@@ -14,6 +14,7 @@ export type ChatMessage = {
   isStreaming?: boolean; // true while streaming is in progress
   /** Tracks which action blocks have been resolved, keyed by prompt hash */
   resolvedActions?: Record<string, { value: string; label: string }>;
+  isEncryptedLocked?: boolean;
 };
 
 export type ActiveView = "messages" | "automations";
@@ -302,12 +303,12 @@ export function appReducer(state: AppState, action: AppAction): AppState {
       };
     }
     case "SET_OPENCLAW_CONNECTED":
-      // connection.status carries the global defaultModel from OpenClaw config.
-      // It never touches sessionModel — that's per-session and managed separately.
+      // connection.status carries the gateway defaultModel (OpenClaw primary).
+      // Prefer user's saved default (from API/settings); only use gateway default when user has not set one.
       return {
         ...state,
         openclawConnected: action.connected,
-        defaultModel: action.defaultModel ?? state.defaultModel,
+        defaultModel: state.defaultModel ?? action.defaultModel ?? null,
       };
     case "SET_SESSION_MODEL":
       return { ...state, sessionModel: action.model };

package/packages/web/src/ws.ts

@@ -1,6 +1,7 @@
 /** WebSocket client for connecting to the BotsChat ConnectionDO. */
 
 import { dlog } from "./debug-log";
+import { E2eService } from "./e2e";
 
 export type WSMessage = {
   type: string;
@@ -44,19 +45,75 @@ export class BotsChatWSClient {
       this.ws!.send(JSON.stringify({ type: "auth", token: this.opts.token }));
     };
 
-    this.ws.onmessage = (evt) => {
+    this.ws.onmessage = async (evt) => {
       try {
         const msg = JSON.parse(evt.data) as WSMessage;
+        
+        // Handle E2E Decryption
+        if (msg.encrypted && E2eService.hasKey()) {
+           try {
+             if (msg.type === "agent.text" || msg.type === "agent.media") {
+                // Decrypt text/caption
+                const text = msg.text as string | undefined;
+                const caption = msg.caption as string | undefined;
+                const messageId = msg.messageId as string;
+                
+                if (text && messageId) {
+                    msg.text = await E2eService.decrypt(text, messageId);
+                    msg.encrypted = false;
+                }
+                if (caption && messageId) {
+                    msg.caption = await E2eService.decrypt(caption, messageId);
+                     msg.encrypted = false;
+                }
+             } else if (msg.type === "job.update") {
+                const summary = msg.summary as string;
+                 // Job ID is contextId
+                const jobId = msg.jobId as string;
+                if (summary && jobId) {
+                    msg.summary = await E2eService.decrypt(summary, jobId);
+                    msg.encrypted = false;
+                }
+             }
+           } catch (err) {
+               dlog.warn("E2E", "Decryption failed", err);
+               msg.decryptionError = true;
+           }
+        }
+        
+        // Handle Task Scan Results (array items)
+        if (msg.type === "task.scan.result" && Array.isArray(msg.tasks) && E2eService.hasKey()) {
+            for (const t of msg.tasks) {
+                if (t.encrypted && t.iv) {
+                    try {
+                        if (t.schedule) t.schedule = await E2eService.decrypt(t.schedule, t.iv);
+                        if (t.instructions) t.instructions = await E2eService.decrypt(t.instructions, t.iv);
+                        t.encrypted = false;
+                    } catch (err) {
+                         dlog.warn("E2E", `Task decryption failed for ${t.cronJobId}`, err);
+                         t.decryptionError = true;
+                    }
+                }
+            }
+        }
+
         if (msg.type === "auth.ok") {
           dlog.info("WS", "Auth OK — connected");
+          
+          // Try to load E2E password
+          const userId = msg.userId as string;
+          if (userId) {
+              await E2eService.loadSavedPassword(userId);
+          }
+          
           this.backoffMs = 1000;
           this._connected = true;
           this.opts.onStatusChange(true);
         } else {
           this.opts.onMessage(msg);
         }
-      } catch {
-        dlog.warn("WS", "Failed to parse incoming message", evt.data);
+      } catch (err) {
+        dlog.warn("WS", "Failed to process incoming message", err);
       }
     };
 
@@ -79,8 +136,23 @@ export class BotsChatWSClient {
     };
   }
 
-  send(msg: WSMessage): void {
+  async send(msg: WSMessage): Promise<void> {
     if (this.ws?.readyState === WebSocket.OPEN) {
+      // E2E Encryption for user messages
+      if (msg.type === "user.message" && E2eService.hasKey() && typeof msg.text === "string") {
+          try {
+              const { ciphertext, messageId } = await E2eService.encrypt(msg.text);
+              msg.text = ciphertext;
+              msg.messageId = messageId;
+              msg.encrypted = true;
+          } catch (err) {
+              dlog.error("E2E", "Encryption failed", err);
+              // Fail? or send as plaintext?
+              // Security first: if key exists but encrypt fails, abort.
+              return; 
+          }
+      }
+      
       this.ws.send(JSON.stringify(msg));
     } else {
       dlog.warn("WS", `Cannot send — socket not open (readyState=${this.ws?.readyState})`, msg);

package/scripts/dev.sh

@@ -58,16 +58,16 @@ do_start() {
 }
 
 do_sync_plugin() {
-  local REMOTE="mini.local"
+  local REMOTE_USER="mini.local"
   local REMOTE_DIR="~/Projects/botsChat/packages/plugin"
 
-  info "Syncing plugin to $REMOTE…"
+  info "Syncing plugin to mini.local…"
   rsync -avz --exclude node_modules --exclude .git --exclude dist --exclude .wrangler \
-    packages/plugin/ "$REMOTE:$REMOTE_DIR/"
+    packages/plugin/ "$REMOTE_USER:$REMOTE_DIR/"
   ok "Plugin files synced"
 
   info "Building plugin, deploying to extensions, restarting gateway on mini.local…"
-  ssh "$REMOTE" 'export PATH="/opt/homebrew/bin:$PATH"
+  ssh "$REMOTE_USER" 'export PATH="/opt/homebrew/bin:$PATH"
 cd ~/Projects/botsChat/packages/plugin
 npm run build
 EXT_DIR=~/.openclaw/extensions/botschat
@@ -83,7 +83,7 @@ echo "Gateway restarted (PID=$!)"'
 
   sleep 4
   info "Checking connection…"
-  ssh "$REMOTE" 'tail -5 /tmp/openclaw-gateway.log | grep -i "authenticated\|error\|Task scan"'
+  ssh "$REMOTE_USER" 'tail -5 /tmp/openclaw-gateway.log | grep -i "authenticated\|error\|Task scan"'
 }
 
 do_logs() {