@castlekit/castle 0.1.6 → 0.3.0

package/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>
+  );
+}

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>
+  );
+}