@castlekit/castle 0.3.2 → 0.4.0

package/.next/standalone/src/app/page.tsx

@@ -0,0 +1,390 @@
+"use client";
+
+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 { PageHeader } from "@/components/layout/page-header";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
+import { cn } from "@/lib/utils";
+import { useOpenClaw, type OpenClawAgent } from "@/lib/hooks/use-openclaw";
+import { useAgentStatus, type AgentStatus } from "@/lib/hooks/use-agent-status";
+import { SearchTrigger } from "@/components/providers/search-provider";
+
+function getInitials(name: string) {
+  return name.slice(0, 2).toUpperCase();
+}
+
+function getStatusLabel(status: AgentStatus, isConnected: boolean): string {
+  if (!isConnected) return "Offline";
+  switch (status) {
+    case "thinking": return "Thinking";
+    case "active": return "Active";
+    default: return "Idle";
+  }
+}
+
+function getStatusBadgeVariant(status: AgentStatus, isConnected: boolean): "success" | "warning" | "outline" {
+  if (!isConnected) return "outline";
+  switch (status) {
+    case "thinking": return "warning";
+    case "active": return "success";
+    default: return "outline";
+  }
+}
+
+function getAvatarStatus(status: AgentStatus, isConnected: boolean): "online" | "offline" | "busy" | "away" {
+  if (!isConnected) return "offline";
+  switch (status) {
+    case "thinking": return "away";
+    case "active": return "online";
+    default: return "offline";
+  }
+}
+
+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 { getStatus } = useAgentStatus();
+  const agentStatus = getStatus(agent.id);
+
+  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"
+      className={cn(
+        "py-4 pl-5 pr-4 transition-colors min-h-[80px] flex items-center",
+        isConnected
+          ? "hover:border-border-hover"
+          : "opacity-60"
+      )}
+    >
+      <div className="flex items-center justify-between flex-1">
+        <div className="flex items-center gap-3">
+          {/* Clickable avatar with upload overlay */}
+          <button
+            type="button"
+            onClick={handleAvatarClick}
+            disabled={!isConnected || uploading}
+            className="relative group rounded-[4px] focus:outline-none focus-visible:ring-2 focus-visible:ring-accent leading-[0]"
+            title={isConnected ? "Click to change avatar" : undefined}
+          >
+            <Avatar size="md" status={getAvatarStatus(agentStatus, isConnected)} statusPulse={agentStatus === "thinking"}>
+              {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-[4px] 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-[4px] bg-black/50 flex items-center justify-center">
+                <Loader2 className="h-4 w-4 text-white animate-spin" />
+              </div>
+            )}
+          </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">
+                {agent.name}
+              </p>
+              {isPrimary && (
+                <span className="flex items-center gap-1 text-xs text-accent">
+                  <Crown className="h-3 w-3" />
+                  Primary
+                </span>
+              )}
+            </div>
+            <p className="text-xs text-foreground-muted">
+              {isConnected
+                ? (agent.description || "OpenClaw Agent")
+                : "Unreachable"}
+            </p>
+          </div>
+        </div>
+        <Badge
+          variant={getStatusBadgeVariant(agentStatus, isConnected)}
+          size="sm"
+        >
+          {getStatusLabel(agentStatus, isConnected)}
+        </Badge>
+      </div>
+    </Card>
+  );
+}
+
+function ConnectionCard({
+  isConnected,
+  isLoading,
+  isConfigured,
+  serverVersion,
+  latency,
+  error,
+  onRefresh,
+}: {
+  isConnected: boolean;
+  isLoading: boolean;
+  isConfigured: boolean;
+  serverVersion?: string;
+  latency?: number;
+  error?: string;
+  onRefresh: () => void;
+}) {
+  const getSubtitle = () => {
+    if (isLoading) return "Connecting to Gateway...";
+    if (!isConfigured) return "Run 'castle setup' to configure";
+    if (isConnected) {
+      const parts = ["Connected"];
+      if (serverVersion) parts[0] = `Connected to OpenClaw ${serverVersion}`;
+      if (latency) parts.push(`${latency}ms`);
+      return parts.join(" · ");
+    }
+    return error || "Not connected";
+  };
+
+  return (
+    <Card variant="bordered" className="mb-8">
+      <CardContent className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          {isLoading ? (
+            <Loader2 className="h-5 w-5 text-foreground-muted animate-spin" />
+          ) : isConnected ? (
+            <Wifi className="h-5 w-5 text-success" />
+          ) : (
+            <WifiOff className="h-5 w-5 text-error" />
+          )}
+          <div>
+            <p className="text-sm font-medium text-foreground">
+              OpenClaw Gateway
+            </p>
+            <p className="text-xs text-foreground-muted">
+              {getSubtitle()}
+            </p>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={onRefresh}
+            className="p-1.5 rounded-md text-foreground-muted hover:text-foreground hover:bg-surface-hover transition-colors"
+            title="Refresh connection"
+          >
+            <RefreshCw className="h-4 w-4" />
+          </button>
+          {isLoading ? (
+            <Badge variant="outline">Connecting...</Badge>
+          ) : (
+            <Badge variant={isConnected ? "success" : "error"}>
+              {isConnected ? "Connected" : "Disconnected"}
+            </Badge>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function AgentsSkeleton() {
+  return (
+    <div className="grid gap-3">
+      {[1, 2, 3].map((i) => (
+        <Card key={i} variant="bordered" className="p-4 min-h-[80px] flex items-center">
+          <div className="flex items-center justify-between flex-1">
+            <div className="flex items-center gap-3">
+              <div className="skeleton h-10 w-10 rounded-full" />
+              <div className="space-y-2">
+                <div className="skeleton h-4 w-24 rounded" />
+                <div className="skeleton h-3 w-32 rounded" />
+              </div>
+            </div>
+            <div className="skeleton h-5 w-14 rounded-full" />
+          </div>
+        </Card>
+      ))}
+    </div>
+  );
+}
+
+function EmptyState({ isConfigured }: { isConfigured: boolean }) {
+  return (
+    <Card variant="bordered" className="p-8">
+      <div className="flex flex-col items-center text-center gap-3">
+        {isConfigured ? (
+          <>
+            <AlertCircle className="h-8 w-8 text-foreground-muted" />
+            <div>
+              <p className="text-sm font-medium text-foreground">
+                No agents discovered
+              </p>
+              <p className="text-xs text-foreground-muted mt-1">
+                Make sure OpenClaw Gateway is running and agents are configured.
+              </p>
+            </div>
+          </>
+        ) : (
+          <>
+            <Bot className="h-8 w-8 text-foreground-muted" />
+            <div>
+              <p className="text-sm font-medium text-foreground">
+                Welcome to Castle
+              </p>
+              <p className="text-xs text-foreground-muted mt-1">
+                Run <code className="px-1 py-0.5 bg-surface-hover rounded text-xs">castle setup</code> to connect to your OpenClaw Gateway.
+              </p>
+            </div>
+          </>
+        )}
+      </div>
+    </Card>
+  );
+}
+
+export default function HomePage() {
+  const {
+    status,
+    isLoading,
+    isConnected,
+    isConfigured,
+    latency,
+    serverVersion,
+    agents,
+    agentsLoading,
+    refresh,
+  } = useOpenClaw();
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Sidebar variant="solid" />
+
+      <main className="min-h-screen ml-[80px]">
+        {/* Header — full width */}
+        <div className="px-8 py-5 flex items-center justify-between gap-4 border-b border-border">
+          <PageHeader
+            title="Castle"
+            subtitle="The multi-agent workspace"
+          />
+          <SearchTrigger />
+        </div>
+
+        <div className="p-8 max-w-4xl">
+          {/* OpenClaw Connection Status */}
+          <ConnectionCard
+            isConnected={isConnected}
+            isLoading={isLoading}
+            isConfigured={isConfigured}
+            serverVersion={serverVersion}
+            latency={latency}
+            error={status?.error}
+            onRefresh={refresh}
+          />
+
+          {/* Agents */}
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <h2 className="text-lg font-semibold text-foreground flex items-center gap-2">
+                <Bot className="h-5 w-5 text-foreground-secondary" />
+                Agents
+              </h2>
+              {!isLoading && agents.length > 0 && (
+                <span className="text-sm text-foreground-muted">
+                  {agents.length} agent{agents.length !== 1 ? "s" : ""} discovered
+                </span>
+              )}
+            </div>
+
+            {agentsLoading || (isLoading && agents.length === 0) ? (
+              <AgentsSkeleton />
+            ) : agents.length > 0 ? (
+              <div className="grid gap-3">
+                {agents.map((agent, idx) => (
+                  <AgentCard
+                    key={agent.id}
+                    agent={agent}
+                    isPrimary={idx === 0}
+                    isConnected={isConnected}
+                    onAvatarUpdated={refresh}
+                  />
+                ))}
+              </div>
+            ) : (
+              <EmptyState isConfigured={isConfigured} />
+            )}
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}

package/.next/standalone/src/app/settings/page.tsx

@@ -0,0 +1,300 @@
+"use client";
+
+import { useEffect, useState, useRef } from "react";
+import { Loader2, Check, ArrowLeft, Camera, Trash2, User } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { Sidebar } from "@/components/layout/sidebar";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { useUserSettings } from "@/lib/hooks/use-user-settings";
+import { cn } from "@/lib/utils";
+
+export default function SettingsPage() {
+  const router = useRouter();
+  const { displayName: savedName, avatarUrl: sharedAvatarUrl, tooltips: savedTooltips, isLoading: settingsLoading, refresh } = useUserSettings();
+  const [displayName, setDisplayName] = useState("");
+  const [avatarUrl, setAvatarUrl] = useState<string | null>(null);
+  const [initialized, setInitialized] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const [uploadingAvatar, setUploadingAvatar] = useState(false);
+  const [avatarSaved, setAvatarSaved] = useState(false);
+  const [avatarError, setAvatarError] = useState("");
+  const [tooltipsEnabled, setTooltipsEnabled] = useState<boolean | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // Sync from SWR on initial load
+  useEffect(() => {
+    if (!settingsLoading && !initialized) {
+      setDisplayName(savedName);
+      setAvatarUrl(sharedAvatarUrl);
+      setTooltipsEnabled(savedTooltips);
+      setInitialized(true);
+    }
+  }, [settingsLoading, savedName, sharedAvatarUrl, savedTooltips, initialized]);
+
+  const loading = settingsLoading && !initialized;
+
+  const handleSave = async () => {
+    setSaving(true);
+    setSaved(false);
+    try {
+      const res = await fetch("/api/settings", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ displayName }),
+      });
+      if (res.ok) {
+        setSaved(true);
+        refresh();
+        setTimeout(() => setSaved(false), 2000);
+      }
+    } catch {
+      // silent
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleAvatarUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    setAvatarError("");
+    setAvatarSaved(false);
+    setUploadingAvatar(true);
+
+    try {
+      const formData = new FormData();
+      formData.append("avatar", file);
+
+      const res = await fetch("/api/settings/avatar", {
+        method: "POST",
+        body: formData,
+      });
+
+      const data = await res.json();
+
+      if (res.ok) {
+        setAvatarUrl(data.avatar);
+        setAvatarSaved(true);
+        refresh();
+        setTimeout(() => setAvatarSaved(false), 2000);
+      } else {
+        setAvatarError(data.error || "Upload failed");
+      }
+    } catch {
+      setAvatarError("Upload failed");
+    } finally {
+      setUploadingAvatar(false);
+      // Reset file input so the same file can be re-selected
+      if (fileInputRef.current) fileInputRef.current.value = "";
+    }
+  };
+
+  const handleAvatarRemove = async () => {
+    try {
+      const res = await fetch("/api/settings/avatar", { method: "DELETE" });
+      if (res.ok) {
+        setAvatarUrl(null);
+        refresh();
+      }
+    } catch {
+      // silent
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Sidebar variant="solid" />
+
+      <div className="ml-[80px] p-8 max-w-2xl">
+        <div className="mb-8">
+          <button
+            onClick={() => router.push("/")}
+            className="inline-flex items-center gap-1.5 text-sm text-foreground-secondary hover:text-foreground transition-colors mb-4 cursor-pointer"
+          >
+            <ArrowLeft className="h-4 w-4" />
+            Back
+          </button>
+          <h1 className="text-2xl font-semibold text-foreground">Settings</h1>
+          <p className="text-sm text-foreground-secondary mt-1">
+            Configure your Castle preferences
+          </p>
+        </div>
+
+        {loading ? (
+          <div className="flex items-center justify-center py-12">
+            <Loader2 className="h-6 w-6 animate-spin text-foreground-secondary" />
+          </div>
+        ) : (
+          <div className="space-y-8">
+            {/* Profile section */}
+            <div className="panel p-6">
+              <h2 className="text-sm font-semibold text-foreground mb-4">
+                Profile
+              </h2>
+              <div className="space-y-6">
+                {/* Avatar */}
+                <div>
+                  <label className="block text-sm font-medium text-foreground-secondary mb-3">
+                    Avatar
+                  </label>
+                  <div className="flex items-center gap-4">
+                    {/* Avatar preview */}
+                    <div className="relative group">
+                      <div className="w-20 h-20 rounded-[4px] overflow-hidden bg-surface-hover border-2 border-border flex items-center justify-center">
+                        {uploadingAvatar ? (
+                          <Loader2 className="h-6 w-6 animate-spin text-foreground-secondary" />
+                        ) : avatarUrl ? (
+                          <img
+                            src={avatarUrl}
+                            alt="Your avatar"
+                            className="w-full h-full object-cover"
+                          />
+                        ) : (
+                          <User className="h-8 w-8 text-foreground-secondary" />
+                        )}
+                      </div>
+                      {/* Hover overlay */}
+                      <button
+                        onClick={() => fileInputRef.current?.click()}
+                        disabled={uploadingAvatar}
+                        className="absolute inset-0 w-20 h-20 rounded-[4px] bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center cursor-pointer"
+                      >
+                        <Camera className="h-5 w-5 text-white" />
+                      </button>
+                    </div>
+
+                    <div className="flex flex-col gap-2">
+                      <div className="flex items-center gap-2">
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => fileInputRef.current?.click()}
+                          disabled={uploadingAvatar}
+                        >
+                          {avatarUrl ? "Change" : "Upload"}
+                        </Button>
+                        {avatarUrl && (
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={handleAvatarRemove}
+                            className="text-foreground-secondary hover:text-red-400"
+                          >
+                            <Trash2 className="h-3.5 w-3.5" />
+                          </Button>
+                        )}
+                      </div>
+                      <p className="text-xs text-foreground-secondary">
+                        PNG, JPEG, WebP, or GIF. Max 5MB. Resized to 256x256.
+                      </p>
+                      {avatarSaved && (
+                        <p className="text-xs text-green-400 flex items-center gap-1">
+                          <Check className="h-3 w-3" />
+                          Avatar saved
+                        </p>
+                      )}
+                      {avatarError && (
+                        <p className="text-xs text-red-400">{avatarError}</p>
+                      )}
+                    </div>
+                  </div>
+                  <input
+                    ref={fileInputRef}
+                    type="file"
+                    accept="image/png,image/jpeg,image/webp,image/gif"
+                    onChange={handleAvatarUpload}
+                    className="hidden"
+                  />
+                </div>
+
+                {/* Display Name */}
+                <div>
+                  <label className="block text-sm font-medium text-foreground-secondary mb-1.5">
+                    Display Name
+                  </label>
+                  <div className="flex items-center gap-3">
+                    <Input
+                      value={displayName}
+                      onChange={(e) => setDisplayName(e.target.value)}
+                      placeholder="Your name"
+                      className="max-w-xs"
+                    />
+                    <Button
+                      onClick={handleSave}
+                      disabled={saving}
+                      size="sm"
+                    >
+                      {saving ? (
+                        <Loader2 className="h-4 w-4 animate-spin" />
+                      ) : saved ? (
+                        <>
+                          <Check className="h-4 w-4 mr-1.5" />
+                          Saved
+                        </>
+                      ) : (
+                        "Save"
+                      )}
+                    </Button>
+                  </div>
+                  <p className="text-xs text-foreground-secondary mt-1.5">
+                    Shown in chat channel headers and message attribution.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* Interface section */}
+            <div className="panel p-6">
+              <h2 className="text-sm font-semibold text-foreground mb-4">
+                Interface
+              </h2>
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium text-foreground">
+                    Menu tooltips
+                  </p>
+                  <p className="text-xs text-foreground-secondary mt-0.5">
+                    Show tooltips when hovering sidebar menu icons
+                  </p>
+                </div>
+                <button
+                  onClick={async () => {
+                    const newValue = !tooltipsEnabled;
+                    setTooltipsEnabled(newValue);
+                    try {
+                      await fetch("/api/settings", {
+                        method: "POST",
+                        headers: { "Content-Type": "application/json" },
+                        body: JSON.stringify({ tooltips: String(newValue) }),
+                      });
+                      refresh();
+                    } catch {
+                      setTooltipsEnabled(!newValue); // revert on error
+                    }
+                  }}
+                  className={cn(
+                    "relative inline-flex h-6 w-11 items-center rounded-full cursor-pointer",
+                    initialized && "transition-colors",
+                    tooltipsEnabled ? "bg-accent" : "bg-foreground-muted/30"
+                  )}
+                >
+                  <span
+                    className={cn(
+                      "inline-block h-4 w-4 rounded-full bg-white",
+                      initialized && "transition-transform",
+                      tooltipsEnabled ? "translate-x-6" : "translate-x-1"
+                    )}
+                  />
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}