@castlekit/castle 0.1.5 → 0.3.0

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/components/chat/agent-mention-popup.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { Bot } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useEffect, useRef } from "react";
+
+export interface AgentInfo {
+  id: string;
+  name: string;
+  avatar?: string | null;
+}
+
+interface AgentMentionPopupProps {
+  agents: AgentInfo[];
+  filter: string;
+  onSelect: (agentId: string) => void;
+  onClose: () => void;
+  highlightedIndex?: number;
+}
+
+export function AgentMentionPopup({ agents, filter, onSelect, onClose, highlightedIndex = 0 }: AgentMentionPopupProps) {
+  const listRef = useRef<HTMLDivElement>(null);
+
+  const filteredAgents = getFilteredAgents(agents, filter);
+
+  // Scroll highlighted item into view
+  useEffect(() => {
+    if (listRef.current && highlightedIndex >= 0) {
+      const items = listRef.current.querySelectorAll("button");
+      const item = items[highlightedIndex];
+      if (item) {
+        item.scrollIntoView({ block: "nearest" });
+      }
+    }
+  }, [highlightedIndex]);
+
+  if (filteredAgents.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="absolute bottom-full left-0 mb-2 w-64 bg-surface border border-border rounded-xl shadow-lg overflow-hidden z-50">
+      <div className="p-2" ref={listRef}>
+        <p className="text-xs text-foreground-secondary px-2 py-1 mb-1">
+          Mention an agent (Up/Down to navigate, Tab/Enter to select)
+        </p>
+        {filteredAgents.map((agent, index) => (
+          <button
+            key={agent.id}
+            type="button"
+            onClick={() => onSelect(agent.id)}
+            className={cn(
+              "w-full flex items-center gap-2 px-2 py-2 rounded-lg text-left text-sm",
+              "hover:bg-accent/80 hover:text-white focus:outline-none",
+              index === highlightedIndex
+                ? "bg-accent text-white"
+                : "text-foreground"
+            )}
+          >
+            {agent.avatar ? (
+              <img
+                src={agent.avatar}
+                alt={agent.name}
+                className="w-6 h-6 rounded-full object-cover"
+              />
+            ) : (
+              <div className={cn(
+                "flex items-center justify-center w-6 h-6 rounded-full",
+                index === highlightedIndex
+                  ? "bg-white/20 text-white"
+                  : "bg-accent/20 text-accent"
+              )}>
+                <Bot className="w-3 h-3" />
+              </div>
+            )}
+            <span className="font-medium">{agent.name}</span>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/** Filter agents by name match */
+export function getFilteredAgents(agents: AgentInfo[], filter: string): AgentInfo[] {
+  return agents.filter(agent =>
+    agent.name.toLowerCase().includes(filter.toLowerCase())
+  );
+}

package/src/components/chat/archived-channels.tsx

@@ -0,0 +1,190 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Loader2, RotateCcw, Trash2, Hash, MessageCircle } from "lucide-react";
+import { Dialog, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { formatDateTime, formatTimeAgo } from "@/lib/date-utils";
+import type { Channel } from "@/lib/types/chat";
+
+interface ArchivedChannelsProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onRestored?: (channel: Channel) => void;
+}
+
+export function ArchivedChannels({
+  open,
+  onOpenChange,
+  onRestored,
+}: ArchivedChannelsProps) {
+  const [channels, setChannels] = useState<Channel[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [actionLoading, setActionLoading] = useState<string | null>(null);
+  const [confirmDelete, setConfirmDelete] = useState<string | null>(null);
+
+  const fetchArchived = async () => {
+    setLoading(true);
+    try {
+      const res = await fetch("/api/openclaw/chat/channels?archived=1");
+      if (res.ok) {
+        const data = await res.json();
+        setChannels(data.channels || []);
+      }
+    } catch {
+      // silent
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (open) {
+      fetchArchived();
+      setConfirmDelete(null);
+    }
+  }, [open]);
+
+  const handleRestore = async (channel: Channel) => {
+    setActionLoading(channel.id);
+    try {
+      const res = await fetch("/api/openclaw/chat/channels", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "restore", id: channel.id }),
+      });
+      if (res.ok) {
+        setChannels((prev) => prev.filter((c) => c.id !== channel.id));
+        onRestored?.(channel);
+      }
+    } catch {
+      // silent
+    } finally {
+      setActionLoading(null);
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    setActionLoading(id);
+    try {
+      const res = await fetch("/api/openclaw/chat/channels", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "delete", id }),
+      });
+      if (res.ok) {
+        setChannels((prev) => prev.filter((c) => c.id !== id));
+        setConfirmDelete(null);
+      } else {
+        const data = await res.json().catch(() => ({}));
+        console.error("[Archive] Delete failed:", res.status, data);
+      }
+    } catch (err) {
+      console.error("[Archive] Delete error:", err);
+    } finally {
+      setActionLoading(null);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogHeader>
+        <DialogTitle>Archived Channels</DialogTitle>
+      </DialogHeader>
+
+      <div className="min-h-[200px]">
+        {loading ? (
+          <div className="flex items-center justify-center py-12">
+            <Loader2 className="h-6 w-6 animate-spin text-foreground-secondary" />
+          </div>
+        ) : channels.length === 0 ? (
+          <div className="text-center py-12 text-foreground-secondary">
+            <MessageCircle className="h-8 w-8 mx-auto mb-2 opacity-50" />
+            <p className="text-sm">No archived channels</p>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {channels.map((channel) => (
+              <div
+                key={channel.id}
+                className="flex items-center justify-between px-3 py-2.5 rounded-[var(--radius-sm)] bg-surface-hover/50 hover:bg-surface-hover group"
+              >
+                <div className="flex items-center gap-1.5 min-w-0">
+                  <Hash className="h-4 w-4 shrink-0 text-foreground-secondary" strokeWidth={2.5} />
+                  <div className="min-w-0">
+                    <span className="text-sm text-foreground truncate block">
+                      {channel.name}
+                    </span>
+                    <span className="text-xs text-foreground-secondary">
+                      Created {formatDateTime(new Date(channel.createdAt).getTime())}
+                      {channel.archivedAt && (
+                        <> · Archived {formatTimeAgo(new Date(channel.archivedAt).getTime())}</>
+                      )}
+                    </span>
+                  </div>
+                </div>
+
+                <div className="flex items-center gap-1 shrink-0">
+                  {confirmDelete === channel.id ? (
+                    <>
+                      <span className="text-xs text-red-400 mr-1">
+                        Delete forever?
+                      </span>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="text-red-400 hover:text-red-300 hover:bg-red-500/10 h-7 px-2 text-xs"
+                        onClick={() => handleDelete(channel.id)}
+                        disabled={actionLoading === channel.id}
+                      >
+                        {actionLoading === channel.id ? (
+                          <Loader2 className="h-3 w-3 animate-spin" />
+                        ) : (
+                          "Yes"
+                        )}
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="h-7 px-2 text-xs"
+                        onClick={() => setConfirmDelete(null)}
+                      >
+                        No
+                      </Button>
+                    </>
+                  ) : (
+                    <>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7 text-foreground-secondary hover:text-foreground"
+                        onClick={() => handleRestore(channel)}
+                        disabled={actionLoading === channel.id}
+                        title="Restore channel"
+                      >
+                        {actionLoading === channel.id ? (
+                          <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                        ) : (
+                          <RotateCcw className="h-3.5 w-3.5" />
+                        )}
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-7 w-7 text-foreground-secondary hover:text-red-400"
+                        onClick={() => setConfirmDelete(channel.id)}
+                        title="Delete permanently"
+                      >
+                        <Trash2 className="h-3.5 w-3.5" />
+                      </Button>
+                    </>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </Dialog>
+  );
+}