@castlekit/castle 0.1.4 → 0.1.6

package/src/app/api/openclaw/events/route.ts

@@ -3,6 +3,34 @@ import { ensureGateway, type GatewayEvent } from "@/lib/gateway-connection";
 export const dynamic = "force-dynamic";
 export const runtime = "nodejs";
 
+/**
+ * Strip sensitive fields (tokens, keys) from event payloads
+ * before forwarding to the browser.
+ */
+function redactEventPayload(evt: GatewayEvent): GatewayEvent {
+  if (!evt.payload || typeof evt.payload !== "object") return evt;
+
+  const payload = { ...(evt.payload as Record<string, unknown>) };
+
+  // Redact deviceToken from pairing events
+  if (typeof payload.deviceToken === "string") {
+    payload.deviceToken = "[REDACTED]";
+  }
+  // Redact nested auth.deviceToken
+  if (payload.auth && typeof payload.auth === "object") {
+    const auth = { ...(payload.auth as Record<string, unknown>) };
+    if (typeof auth.deviceToken === "string") auth.deviceToken = "[REDACTED]";
+    if (typeof auth.token === "string") auth.token = "[REDACTED]";
+    payload.auth = auth;
+  }
+  // Redact any top-level token field
+  if (typeof payload.token === "string") {
+    payload.token = "[REDACTED]";
+  }
+
+  return { ...evt, payload };
+}
+
 /**
  * GET /api/openclaw/events
  * SSE endpoint -- streams OpenClaw Gateway events to the browser in real-time.
@@ -27,11 +55,12 @@ export async function GET() {
       };
       controller.enqueue(encoder.encode(`data: ${JSON.stringify(initial)}\n\n`));
 
-      // Forward gateway events
+      // Forward gateway events (with sensitive fields redacted)
       const onGatewayEvent = (evt: GatewayEvent) => {
         if (closed) return;
         try {
-          controller.enqueue(encoder.encode(`data: ${JSON.stringify(evt)}\n\n`));
+          const safe = redactEventPayload(evt);
+          controller.enqueue(encoder.encode(`data: ${JSON.stringify(safe)}\n\n`));
         } catch {
           // Stream may have closed
         }

package/src/app/api/openclaw/logs/route.ts

@@ -2,6 +2,7 @@ import { NextRequest, NextResponse } from "next/server";
 import { readFileSync, existsSync, readdirSync } from "fs";
 import { join } from "path";
 import { getOpenClawDir } from "@/lib/config";
+import { sanitizeForApi } from "@/lib/api-security";
 
 export const dynamic = "force-dynamic";
 
@@ -41,8 +42,8 @@ export async function GET(request: NextRequest) {
     const content = readFileSync(logPath, "utf-8");
     const allLines = content.split("\n").filter(Boolean);
 
-    // Return last N lines
-    const tailLines = allLines.slice(-lines);
+    // Return last N lines, sanitized to strip tokens/keys
+    const tailLines = allLines.slice(-lines).map(sanitizeForApi);
 
     return NextResponse.json({
       logs: tailLines,

package/src/app/api/openclaw/restart/route.ts

@@ -1,14 +1,17 @@
-import { NextResponse } from "next/server";
+import { NextRequest, NextResponse } from "next/server";
 import { execSync } from "child_process";
+import { checkCsrf } from "@/lib/api-security";
 
 export const dynamic = "force-dynamic";
 
 /**
  * POST /api/openclaw/restart
- * God mode: restart the OpenClaw Gateway process.
- * Tries common methods to restart the gateway.
+ * Restart the OpenClaw Gateway process.
+ * Protected against CSRF — only requests from the Castle UI are allowed.
  */
-export async function POST() {
+export async function POST(request: NextRequest) {
+  const csrf = checkCsrf(request);
+  if (csrf) return csrf;
   try {
     // Try openclaw CLI restart first
     try {

package/src/app/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { Bot, Wifi, WifiOff, Crown, RefreshCw, Loader2, AlertCircle } from "lucide-react";
+import { useRef, useState, useCallback } from "react";
+import { Bot, Wifi, WifiOff, Crown, RefreshCw, Loader2, AlertCircle, Camera } from "lucide-react";
 import { Sidebar } from "@/components/layout/sidebar";
 import { UserMenu } from "@/components/layout/user-menu";
 import { PageHeader } from "@/components/layout/page-header";
@@ -14,7 +15,66 @@ function getInitials(name: string) {
   return name.slice(0, 2).toUpperCase();
 }
 
-function AgentCard({ agent, isPrimary, isConnected }: { agent: OpenClawAgent; isPrimary: boolean; isConnected: boolean }) {
+function AgentCard({
+  agent,
+  isPrimary,
+  isConnected,
+  onAvatarUpdated,
+}: {
+  agent: OpenClawAgent;
+  isPrimary: boolean;
+  isConnected: boolean;
+  onAvatarUpdated: () => void;
+}) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [uploading, setUploading] = useState(false);
+
+  const handleAvatarClick = useCallback(() => {
+    if (!isConnected) return;
+    fileInputRef.current?.click();
+  }, [isConnected]);
+
+  const handleFileChange = useCallback(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      if (!file) return;
+
+      // Reset input so the same file can be selected again
+      e.target.value = "";
+
+      // Client-side validation
+      if (file.size > 5 * 1024 * 1024) {
+        alert("Image too large (max 5MB)");
+        return;
+      }
+
+      setUploading(true);
+      try {
+        const formData = new FormData();
+        formData.append("avatar", file);
+
+        const resp = await fetch(`/api/openclaw/agents/${agent.id}/avatar`, {
+          method: "POST",
+          body: formData,
+        });
+
+        const result = await resp.json();
+        if (!resp.ok) {
+          alert(result.error || "Failed to update avatar");
+          return;
+        }
+
+        // Gateway hot-reloads — just refresh agents to pick up new avatar
+        onAvatarUpdated();
+      } catch {
+        alert("Failed to upload avatar");
+      } finally {
+        setUploading(false);
+      }
+    },
+    [agent.id, onAvatarUpdated]
+  );
+
   return (
     <Card
       variant="bordered"
@@ -27,19 +87,45 @@ function AgentCard({ agent, isPrimary, isConnected }: { agent: OpenClawAgent; is
     >
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-3">
-          <Avatar size="md" status={isConnected ? "online" : "offline"}>
-            {agent.avatar ? (
-              <AvatarImage
-                src={agent.avatar}
-                alt={agent.name}
-                className={cn(!isConnected && "grayscale")}
-              />
-            ) : (
-              <AvatarFallback>
-                {agent.emoji || getInitials(agent.name)}
-              </AvatarFallback>
+          {/* Clickable avatar with upload overlay */}
+          <button
+            type="button"
+            onClick={handleAvatarClick}
+            disabled={!isConnected || uploading}
+            className="relative group rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+            title={isConnected ? "Click to change avatar" : undefined}
+          >
+            <Avatar size="md" status={isConnected ? "online" : "offline"}>
+              {agent.avatar ? (
+                <AvatarImage
+                  src={agent.avatar}
+                  alt={agent.name}
+                  className={cn(!isConnected && "grayscale")}
+                />
+              ) : (
+                <AvatarFallback>
+                  {agent.emoji || getInitials(agent.name)}
+                </AvatarFallback>
+              )}
+            </Avatar>
+            {isConnected && !uploading && (
+              <div className="absolute inset-0 rounded-full bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+                <Camera className="h-4 w-4 text-white" />
+              </div>
+            )}
+            {uploading && (
+              <div className="absolute inset-0 rounded-full bg-black/50 flex items-center justify-center">
+                <Loader2 className="h-4 w-4 text-white animate-spin" />
+              </div>
             )}
-          </Avatar>
+          </button>
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept="image/png,image/jpeg,image/webp,image/gif"
+            className="hidden"
+            onChange={handleFileChange}
+          />
           <div>
             <div className="flex items-center gap-2">
               <p className="text-sm font-medium text-foreground">
@@ -92,7 +178,7 @@ function ConnectionCard({
     if (!isConfigured) return "Run 'castle setup' to configure";
     if (isConnected) {
       const parts = ["Connected"];
-      if (serverVersion) parts[0] = `Connected to OpenClaw v${serverVersion}`;
+      if (serverVersion) parts[0] = `Connected to OpenClaw ${serverVersion}`;
       if (latency) parts.push(`${latency}ms`);
       return parts.join(" · ");
     }
@@ -255,6 +341,7 @@ export default function HomePage() {
                     agent={agent}
                     isPrimary={idx === 0}
                     isConnected={isConnected}
+                    onAvatarUpdated={refresh}
                   />
                 ))}
               </div>

package/src/cli/onboarding.ts

@@ -14,6 +14,8 @@ import {
   writeConfig,
   type CastleConfig,
 } from "../lib/config.js";
+// Device identity is handled by gateway-connection.ts for the persistent connection.
+// The onboarding wizard uses simple token-only auth for agent discovery.
 
 // Read version from package.json at the project root
 const __dirname = dirname(fileURLToPath(import.meta.url));
@@ -56,9 +58,15 @@ interface DiscoveredAgent {
 
 /**
  * Connect to Gateway and discover agents via agents.list.
+ * Supports both port-based (local) and full URL (remote) connections.
  * Returns the list of agents or an empty array on failure.
  */
-async function discoverAgents(port: number, token: string | null): Promise<DiscoveredAgent[]> {
+async function discoverAgents(
+  portOrUrl: number | string,
+  token: string | null
+): Promise<DiscoveredAgent[]> {
+  const wsUrl = typeof portOrUrl === "string" ? portOrUrl : `ws://127.0.0.1:${portOrUrl}`;
+
   return new Promise((resolve) => {
     const timeout = setTimeout(() => {
       try { ws.close(); } catch { /* ignore */ }
@@ -67,7 +75,7 @@ async function discoverAgents(port: number, token: string | null): Promise<Disco
 
     let ws: WebSocket;
     try {
-      ws = new WebSocket(`ws://127.0.0.1:${port}`);
+      ws = new WebSocket(wsUrl);
     } catch {
       clearTimeout(timeout);
       resolve([]);
@@ -81,6 +89,8 @@ async function discoverAgents(port: number, token: string | null): Promise<Disco
 
     ws.on("open", () => {
       // Send connect handshake
+      // NOTE: No device identity here — discoverAgents is just for listing agents
+      // during setup. Device auth happens in gateway-connection.ts for the real connection.
       const connectId = randomUUID();
       const connectFrame = {
         type: "req",
@@ -149,6 +159,137 @@ async function discoverAgents(port: number, token: string | null): Promise<Disco
   });
 }
 
+/**
+ * Test a Gateway connection. Returns true if connection succeeds.
+ */
+async function testConnection(
+  portOrUrl: number | string,
+  token: string | null
+): Promise<boolean> {
+  const wsUrl = typeof portOrUrl === "string" ? portOrUrl : `ws://127.0.0.1:${portOrUrl}`;
+
+  return new Promise((resolve) => {
+    const timeout = setTimeout(() => {
+      try { ws.close(); } catch { /* ignore */ }
+      resolve(false);
+    }, 5000);
+
+    let ws: WebSocket;
+    try {
+      ws = new WebSocket(wsUrl);
+    } catch {
+      clearTimeout(timeout);
+      resolve(false);
+      return;
+    }
+
+    ws.on("error", () => {
+      clearTimeout(timeout);
+      resolve(false);
+    });
+
+    ws.on("open", () => {
+      clearTimeout(timeout);
+      ws.close();
+      resolve(true);
+    });
+  });
+}
+
+/**
+ * Prompt for manual Gateway configuration (remote or local).
+ * Returns connection details or null if cancelled.
+ */
+async function promptManualGateway(): Promise<{
+  port: number;
+  token: string | null;
+  gatewayUrl?: string;
+  isRemote: boolean;
+} | null> {
+  const locationType = await p.select({
+    message: "Where is your OpenClaw Gateway?",
+    options: [
+      {
+        value: "local",
+        label: "Local machine",
+        hint: "Running on this device (127.0.0.1)",
+      },
+      {
+        value: "remote",
+        label: "Remote / Tailscale",
+        hint: "Running on another machine",
+      },
+    ],
+  });
+
+  if (p.isCancel(locationType)) return null;
+
+  let port = 18789;
+  let gatewayUrl: string | undefined;
+  const isRemote = locationType === "remote";
+
+  if (isRemote) {
+    const urlInput = await p.text({
+      message: "Gateway WebSocket URL",
+      placeholder: "ws://192.168.1.50:18789",
+      validate(value: string | undefined) {
+        if (!value?.trim()) return "URL is required";
+        if (!value.startsWith("ws://") && !value.startsWith("wss://")) {
+          return "URL must start with ws:// or wss://";
+        }
+      },
+    });
+
+    if (p.isCancel(urlInput)) return null;
+    gatewayUrl = urlInput as string;
+
+    // Extract port from URL for config compatibility
+    try {
+      const parsed = new URL(gatewayUrl);
+      port = parseInt(parsed.port, 10) || 18789;
+    } catch {
+      port = 18789;
+    }
+
+    // Test the connection
+    const testSpinner = p.spinner();
+    testSpinner.start("Testing connection...");
+    const ok = await testConnection(gatewayUrl, null);
+    if (ok) {
+      testSpinner.stop(`\x1b[92m✔\x1b[0m Gateway reachable`);
+    } else {
+      testSpinner.stop(pc.dim("Could not reach Gateway — it may not be running yet"));
+    }
+  } else {
+    const gatewayPort = await p.text({
+      message: "OpenClaw Gateway port",
+      initialValue: "18789",
+      validate(value: string | undefined) {
+        const num = parseInt(value || "0", 10);
+        if (isNaN(num) || num < 1 || num > 65535) {
+          return "Please enter a valid port number (1-65535)";
+        }
+      },
+    });
+
+    if (p.isCancel(gatewayPort)) return null;
+    port = parseInt(gatewayPort as string, 10);
+  }
+
+  // Token entry
+  const tokenInput = await p.text({
+    message: "Gateway auth token",
+    placeholder: "Paste your token (or press Enter to skip)",
+    defaultValue: "",
+  });
+
+  if (p.isCancel(tokenInput)) return null;
+
+  const token = (tokenInput as string) || null;
+
+  return { port, token, gatewayUrl, isRemote };
+}
+
 export async function runOnboarding(): Promise<void> {
 
   p.intro(BLUE_BOLD("Castle Setup"));
@@ -253,47 +394,65 @@ export async function runOnboarding(): Promise<void> {
     }
   }
 
-  // Step 2: Auto-detect port and token, only ask if not found
+  // Step 2: Connection mode — auto-detect or manual entry
   let port = readOpenClawPort() || 18789;
   let token = readOpenClawToken();
-
-  if (!readOpenClawPort()) {
-    const gatewayPort = await p.text({
-      message: "OpenClaw Gateway port",
-      initialValue: "18789",
-      validate(value: string | undefined) {
-        const num = parseInt(value || "0", 10);
-        if (isNaN(num) || num < 1 || num > 65535) {
-          return "Please enter a valid port number (1-65535)";
-        }
-      },
+  let gatewayUrl: string | undefined;
+  let isRemote = false;
+
+  // If we have auto-detected config, offer a choice
+  const hasLocalConfig = !!readOpenClawPort() || isOpenClawInstalled();
+
+  if (hasLocalConfig && token) {
+    // Both auto-detect and manual are available
+    const connectionMode = await p.select({
+      message: "How would you like to connect?",
+      options: [
+        {
+          value: "auto",
+          label: `Auto-detected local Gateway ${pc.dim(`(port ${port})`)}`,
+          hint: "Recommended for local setups",
+        },
+        {
+          value: "manual",
+          label: "Enter Gateway details manually",
+          hint: "For remote, Tailscale, or custom setups",
+        },
+      ],
     });
 
-    if (p.isCancel(gatewayPort)) {
+    if (p.isCancel(connectionMode)) {
       p.cancel("Setup cancelled.");
       process.exit(0);
     }
 
-    port = parseInt(gatewayPort as string, 10);
-  }
-
-  if (!token) {
-    const tokenInput = await p.text({
-      message: "Enter your OpenClaw Gateway token (or press Enter to skip)",
-      placeholder: "Leave empty if no auth is configured",
-      defaultValue: "",
-    });
-
-    if (p.isCancel(tokenInput)) {
+    if (connectionMode === "manual") {
+      const manualResult = await promptManualGateway();
+      if (!manualResult) {
+        p.cancel("Setup cancelled.");
+        process.exit(0);
+      }
+      port = manualResult.port;
+      token = manualResult.token;
+      gatewayUrl = manualResult.gatewayUrl;
+      isRemote = manualResult.isRemote;
+    }
+  } else if (!token) {
+    // No auto-detected token — fall through to manual entry
+    const manualResult = await promptManualGateway();
+    if (!manualResult) {
       p.cancel("Setup cancelled.");
       process.exit(0);
     }
-
-    token = (tokenInput as string) || null;
+    port = manualResult.port;
+    token = manualResult.token;
+    gatewayUrl = manualResult.gatewayUrl;
+    isRemote = manualResult.isRemote;
   }
 
-  // Step 4: Agent Discovery
-  const agents = await discoverAgents(port, token);
+  // Step 3: Agent Discovery (use URL if remote, port if local)
+  const agentTarget = gatewayUrl || port;
+  const agents = await discoverAgents(agentTarget, token);
 
   let primaryAgent: string;
 
@@ -341,6 +500,8 @@ export async function runOnboarding(): Promise<void> {
     openclaw: {
       gateway_port: port,
       gateway_token: token || undefined,
+      gateway_url: gatewayUrl,
+      is_remote: isRemote || undefined,
       primary_agent: primaryAgent,
     },
     server: {
@@ -417,6 +578,10 @@ export async function runOnboarding(): Promise<void> {
     // Nothing on port or lsof not available
   }
 
+  // Escape XML special characters for plist values
+  const xmlEscape = (s: string) =>
+    s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+
   // Install as a persistent service (auto-start on login)
   if (process.platform === "darwin") {
     const plistDir = join(home(), "Library", "LaunchAgents");
@@ -430,14 +595,14 @@ export async function runOnboarding(): Promise<void> {
     <string>com.castlekit.castle</string>
     <key>ProgramArguments</key>
     <array>
-        <string>${nodePath}</string>
-        <string>${nextBin}</string>
+        <string>${xmlEscape(nodePath)}</string>
+        <string>${xmlEscape(nextBin)}</string>
         <string>start</string>
         <string>-p</string>
-        <string>${castlePort}</string>
+        <string>${xmlEscape(castlePort)}</string>
     </array>
     <key>WorkingDirectory</key>
-    <string>${PROJECT_ROOT}</string>
+    <string>${xmlEscape(PROJECT_ROOT)}</string>
     <key>RunAtLoad</key>
     <true/>
     <key>KeepAlive</key>
@@ -446,15 +611,15 @@ export async function runOnboarding(): Promise<void> {
         <false/>
     </dict>
     <key>StandardOutPath</key>
-    <string>${logsDir}/server.log</string>
+    <string>${xmlEscape(logsDir)}/server.log</string>
     <key>StandardErrorPath</key>
-    <string>${logsDir}/server.err</string>
+    <string>${xmlEscape(logsDir)}/server.err</string>
     <key>EnvironmentVariables</key>
     <dict>
         <key>NODE_ENV</key>
         <string>production</string>
         <key>PATH</key>
-        <string>${process.env.PATH}</string>
+        <string>${xmlEscape(process.env.PATH || "")}</string>
     </dict>
 </dict>
 </plist>`;

package/src/lib/api-security.ts

@@ -0,0 +1,63 @@
+import { NextRequest, NextResponse } from "next/server";
+
+/**
+ * Verify that a mutating API request originated from the Castle UI itself,
+ * not from a cross-origin attacker (CSRF protection).
+ *
+ * Checks the Origin or Referer header against allowed localhost origins.
+ * Returns a 403 response if the request fails the check, or null if it passes.
+ */
+export function checkCsrf(request: NextRequest): NextResponse | null {
+  const origin = request.headers.get("origin");
+  const referer = request.headers.get("referer");
+
+  // Build allowed origins from the request's own host
+  const host = request.headers.get("host") || "localhost:3333";
+  const allowed = new Set([
+    `http://${host}`,
+    `https://${host}`,
+    // Common localhost variants
+    "http://localhost:3333",
+    "http://127.0.0.1:3333",
+    "http://[::1]:3333",
+  ]);
+
+  // If Origin header is present, it must match
+  if (origin) {
+    if (allowed.has(origin)) return null;
+    return NextResponse.json(
+      { error: "Forbidden — cross-origin request rejected" },
+      { status: 403 }
+    );
+  }
+
+  // Fall back to Referer (browsers always send at least one for form submissions)
+  if (referer) {
+    try {
+      const refOrigin = new URL(referer).origin;
+      if (allowed.has(refOrigin)) return null;
+    } catch {
+      // Malformed referer
+    }
+    return NextResponse.json(
+      { error: "Forbidden — cross-origin request rejected" },
+      { status: 403 }
+    );
+  }
+
+  // No Origin or Referer — likely a direct curl/CLI call, allow it.
+  // Browsers ALWAYS send Origin on cross-origin requests,
+  // so a missing Origin means it's not a browser-based CSRF attack.
+  return null;
+}
+
+/**
+ * Sanitize a string by redacting token patterns and key material.
+ * Use this before returning any text content (logs, errors) via API.
+ */
+export function sanitizeForApi(str: string): string {
+  return str
+    .replace(/rew_[a-f0-9]+/gi, "rew_***")
+    .replace(/-----BEGIN [A-Z ]+-----[\s\S]*?-----END [A-Z ]+-----/g, "[REDACTED KEY]")
+    .replace(/\b[a-f0-9]{32,}\b/gi, (m) => m.slice(0, 8) + "***");
+}