stagent 0.5.0 → 0.6.1

package/src/components/handoffs/handoff-approval-card.tsx

@@ -0,0 +1,159 @@
+"use client";
+
+import { useState } from "react";
+import {
+  ArrowRight,
+  CheckCircle2,
+  XCircle,
+  Clock,
+  AlertTriangle,
+} from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+
+interface HandoffApprovalCardProps {
+  id: string;
+  fromProfileId: string;
+  toProfileId: string;
+  subject: string;
+  body: string;
+  priority: number;
+  chainDepth: number;
+  status: string;
+  requiresApproval: boolean;
+  onActionComplete?: () => void;
+}
+
+const PRIORITY_LABELS: Record<number, string> = {
+  0: "Critical",
+  1: "High",
+  2: "Medium",
+  3: "Low",
+};
+
+const PRIORITY_VARIANTS: Record<number, "destructive" | "default" | "secondary" | "outline"> = {
+  0: "destructive",
+  1: "default",
+  2: "secondary",
+  3: "outline",
+};
+
+const STATUS_ICONS: Record<string, typeof Clock> = {
+  pending: Clock,
+  accepted: CheckCircle2,
+  in_progress: Clock,
+  completed: CheckCircle2,
+  rejected: XCircle,
+  expired: AlertTriangle,
+};
+
+const STATUS_VARIANTS: Record<string, "default" | "secondary" | "destructive" | "outline"> = {
+  pending: "outline",
+  accepted: "default",
+  in_progress: "default",
+  completed: "secondary",
+  rejected: "destructive",
+  expired: "outline",
+};
+
+export function HandoffApprovalCard({
+  id,
+  fromProfileId,
+  toProfileId,
+  subject,
+  body,
+  priority,
+  chainDepth,
+  status,
+  requiresApproval,
+  onActionComplete,
+}: HandoffApprovalCardProps) {
+  const [acting, setActing] = useState(false);
+
+  const StatusIcon = STATUS_ICONS[status] ?? Clock;
+
+  const handleAction = async (action: "approve" | "reject") => {
+    setActing(true);
+    try {
+      const res = await fetch(`/api/handoffs/${id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action, approvedBy: "user" }),
+      });
+
+      if (res.ok) {
+        toast.success(`Handoff ${action === "approve" ? "approved" : "rejected"}`);
+        onActionComplete?.();
+      } else {
+        const data = await res.json();
+        toast.error(data.error ?? `Failed to ${action} handoff`);
+      }
+    } catch {
+      toast.error(`Failed to ${action} handoff`);
+    } finally {
+      setActing(false);
+    }
+  };
+
+  return (
+    <div className="rounded-lg border p-4 space-y-3">
+      <div className="flex items-start justify-between">
+        <div className="space-y-1">
+          <h4 className="text-sm font-medium">{subject}</h4>
+          <div className="flex items-center gap-2 text-xs text-muted-foreground">
+            <span className="font-mono">{fromProfileId}</span>
+            <ArrowRight className="h-3 w-3" />
+            <span className="font-mono">{toProfileId}</span>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <Badge variant={PRIORITY_VARIANTS[priority] ?? "secondary"}>
+            {PRIORITY_LABELS[priority] ?? "Medium"}
+          </Badge>
+          <Badge variant={STATUS_VARIANTS[status] ?? "outline"}>
+            <StatusIcon className="mr-1 h-3 w-3" />
+            {status}
+          </Badge>
+        </div>
+      </div>
+
+      <p className="text-sm text-muted-foreground line-clamp-3">{body}</p>
+
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+          {chainDepth > 0 && (
+            <span>Chain depth: {chainDepth}</span>
+          )}
+          {requiresApproval && status === "pending" && (
+            <Badge variant="outline" className="text-xs">
+              Awaiting approval
+            </Badge>
+          )}
+        </div>
+
+        {status === "pending" && requiresApproval && (
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => handleAction("reject")}
+              disabled={acting}
+            >
+              <XCircle className="mr-1 h-3.5 w-3.5" />
+              Reject
+            </Button>
+            <Button
+              size="sm"
+              onClick={() => handleAction("approve")}
+              disabled={acting}
+            >
+              <CheckCircle2 className="mr-1 h-3.5 w-3.5" />
+              Approve
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/memory/memory-browser.tsx

@@ -0,0 +1,315 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { EmptyState } from "@/components/shared/empty-state";
+import { Brain, Archive, XCircle, Check, Pencil } from "lucide-react";
+import { toast } from "sonner";
+import type { AgentMemoryRow } from "@/lib/db/schema";
+
+const CATEGORY_VARIANTS: Record<string, "default" | "secondary" | "outline" | "destructive"> = {
+  fact: "default",
+  preference: "secondary",
+  pattern: "outline",
+  outcome: "destructive",
+};
+
+const STATUS_VARIANTS: Record<string, "default" | "secondary" | "outline" | "destructive"> = {
+  active: "default",
+  decayed: "secondary",
+  archived: "outline",
+  rejected: "destructive",
+};
+
+interface MemoryBrowserProps {
+  profileId: string;
+}
+
+export function MemoryBrowser({ profileId }: MemoryBrowserProps) {
+  const [memories, setMemories] = useState<AgentMemoryRow[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [categoryFilter, setCategoryFilter] = useState<string>("all");
+  const [statusFilter, setStatusFilter] = useState<string>("active");
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editConfidence, setEditConfidence] = useState<string>("");
+
+  const fetchMemories = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params = new URLSearchParams({ profileId });
+      if (categoryFilter !== "all") params.set("category", categoryFilter);
+      if (statusFilter !== "all") params.set("status", statusFilter);
+
+      const res = await fetch(`/api/memory?${params}`);
+      if (res.ok) {
+        setMemories(await res.json());
+      }
+    } catch {
+      toast.error("Failed to load memories");
+    } finally {
+      setLoading(false);
+    }
+  }, [profileId, categoryFilter, statusFilter]);
+
+  useEffect(() => {
+    fetchMemories();
+  }, [fetchMemories]);
+
+  async function handleArchive(id: string) {
+    try {
+      const res = await fetch("/api/memory", {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ id }),
+      });
+      if (res.ok) {
+        toast.success("Memory archived");
+        fetchMemories();
+      }
+    } catch {
+      toast.error("Failed to archive memory");
+    }
+  }
+
+  async function handleReject(id: string) {
+    try {
+      const res = await fetch("/api/memory", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ id, status: "rejected" }),
+      });
+      if (res.ok) {
+        toast.success("Memory rejected");
+        fetchMemories();
+      }
+    } catch {
+      toast.error("Failed to reject memory");
+    }
+  }
+
+  async function handleSaveConfidence(id: string) {
+    const value = parseInt(editConfidence, 10);
+    if (isNaN(value) || value < 0 || value > 1000) {
+      toast.error("Confidence must be between 0 and 1000");
+      return;
+    }
+    try {
+      const res = await fetch("/api/memory", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ id, confidence: value }),
+      });
+      if (res.ok) {
+        toast.success("Confidence updated");
+        setEditingId(null);
+        fetchMemories();
+      }
+    } catch {
+      toast.error("Failed to update confidence");
+    }
+  }
+
+  function formatDate(dateValue: string | Date | null | undefined): string {
+    if (!dateValue) return "Never";
+    const d = typeof dateValue === "string" ? new Date(dateValue) : dateValue;
+    return d.toLocaleDateString();
+  }
+
+  if (!loading && memories.length === 0) {
+    return (
+      <div className="space-y-4">
+        <div className="flex items-center gap-2">
+          <Select value={statusFilter} onValueChange={setStatusFilter}>
+            <SelectTrigger className="w-[140px]">
+              <SelectValue placeholder="Status" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Status</SelectItem>
+              <SelectItem value="active">Active</SelectItem>
+              <SelectItem value="decayed">Decayed</SelectItem>
+              <SelectItem value="archived">Archived</SelectItem>
+              <SelectItem value="rejected">Rejected</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <EmptyState
+          icon={Brain}
+          heading="No memories yet"
+          description="Episodic memories are extracted from task results and stored as factual knowledge for this profile."
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* Filters */}
+      <div className="flex items-center gap-2">
+        <Select value={categoryFilter} onValueChange={setCategoryFilter}>
+          <SelectTrigger className="w-[140px]">
+            <SelectValue placeholder="Category" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All Categories</SelectItem>
+            <SelectItem value="fact">Fact</SelectItem>
+            <SelectItem value="preference">Preference</SelectItem>
+            <SelectItem value="pattern">Pattern</SelectItem>
+            <SelectItem value="outcome">Outcome</SelectItem>
+          </SelectContent>
+        </Select>
+        <Select value={statusFilter} onValueChange={setStatusFilter}>
+          <SelectTrigger className="w-[140px]">
+            <SelectValue placeholder="Status" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All Status</SelectItem>
+            <SelectItem value="active">Active</SelectItem>
+            <SelectItem value="decayed">Decayed</SelectItem>
+            <SelectItem value="archived">Archived</SelectItem>
+            <SelectItem value="rejected">Rejected</SelectItem>
+          </SelectContent>
+        </Select>
+        <span className="text-sm text-muted-foreground ml-auto">
+          {memories.length} {memories.length === 1 ? "memory" : "memories"}
+        </span>
+      </div>
+
+      {/* Table */}
+      <div className="rounded-lg border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[40%]">Content</TableHead>
+              <TableHead>Category</TableHead>
+              <TableHead>Confidence</TableHead>
+              <TableHead className="text-right">Accesses</TableHead>
+              <TableHead>Last Accessed</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead className="text-right">Actions</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {loading ? (
+              <TableRow>
+                <TableCell colSpan={7} className="text-center py-8 text-muted-foreground">
+                  Loading...
+                </TableCell>
+              </TableRow>
+            ) : (
+              memories.map((memory) => (
+                <TableRow key={memory.id}>
+                  <TableCell className="max-w-[300px]">
+                    <p className="text-sm truncate" title={memory.content}>
+                      {memory.content}
+                    </p>
+                  </TableCell>
+                  <TableCell>
+                    <Badge variant={CATEGORY_VARIANTS[memory.category] ?? "outline"}>
+                      {memory.category}
+                    </Badge>
+                  </TableCell>
+                  <TableCell>
+                    {editingId === memory.id ? (
+                      <div className="flex items-center gap-1">
+                        <Input
+                          type="number"
+                          min={0}
+                          max={1000}
+                          value={editConfidence}
+                          onChange={(e) => setEditConfidence(e.target.value)}
+                          className="w-20 h-7 text-xs"
+                        />
+                        <Button
+                          size="icon"
+                          variant="ghost"
+                          className="h-6 w-6"
+                          onClick={() => handleSaveConfidence(memory.id)}
+                        >
+                          <Check className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    ) : (
+                      <div className="flex items-center gap-2">
+                        <div className="w-16 h-1.5 rounded-full bg-muted overflow-hidden">
+                          <div
+                            className="h-full bg-primary rounded-full"
+                            style={{ width: `${(memory.confidence / 1000) * 100}%` }}
+                          />
+                        </div>
+                        <span className="text-xs text-muted-foreground">
+                          {Math.round((memory.confidence / 1000) * 100)}%
+                        </span>
+                      </div>
+                    )}
+                  </TableCell>
+                  <TableCell className="text-right text-sm">
+                    {memory.accessCount}
+                  </TableCell>
+                  <TableCell className="text-sm text-muted-foreground">
+                    {formatDate(memory.lastAccessedAt)}
+                  </TableCell>
+                  <TableCell>
+                    <Badge variant={STATUS_VARIANTS[memory.status] ?? "outline"}>
+                      {memory.status}
+                    </Badge>
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <div className="flex items-center justify-end gap-1">
+                      <Button
+                        size="icon"
+                        variant="ghost"
+                        className="h-7 w-7"
+                        title="Edit confidence"
+                        onClick={() => {
+                          setEditingId(memory.id);
+                          setEditConfidence(String(memory.confidence));
+                        }}
+                      >
+                        <Pencil className="h-3 w-3" />
+                      </Button>
+                      <Button
+                        size="icon"
+                        variant="ghost"
+                        className="h-7 w-7"
+                        title="Archive"
+                        onClick={() => handleArchive(memory.id)}
+                      >
+                        <Archive className="h-3 w-3" />
+                      </Button>
+                      <Button
+                        size="icon"
+                        variant="ghost"
+                        className="h-7 w-7 text-destructive"
+                        title="Reject"
+                        onClick={() => handleReject(memory.id)}
+                      >
+                        <XCircle className="h-3 w-3" />
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}

package/src/components/profiles/learned-context-panel.tsx

@@ -236,7 +236,7 @@ export function LearnedContextPanel({ profileId }: LearnedContextPanelProps) {
               <History className="h-3 w-3" />
               Version History
             </div>
-            <div className="max-h-72 space-y-2 overflow-y-auto">
+            <div className="max-h-[32rem] space-y-2 overflow-y-auto">
               {entries.map((entry) => {
                 const { row, snapshotContent, derivedDiff } = entry;
                 const badgeConfig = CHANGE_TYPE_BADGE[row.changeType] ?? {
@@ -327,13 +327,13 @@ export function LearnedContextPanel({ profileId }: LearnedContextPanelProps) {
                       </div>
 
                       {snapshotContent ? (
-                        <div className={`${PROSE_NOTIFICATION} max-h-28 overflow-auto rounded-md bg-background/50 p-2`}>
+                        <div className={`${PROSE_NOTIFICATION} max-h-48 overflow-auto rounded-md bg-background/50 p-2`}>
                           <ReactMarkdown remarkPlugins={[remarkGfm]}>
                             {snapshotContent}
                           </ReactMarkdown>
                         </div>
                       ) : row.diff ? (
-                        <div className={`${PROSE_NOTIFICATION} max-h-24 overflow-auto rounded-md bg-background/50 p-2`}>
+                        <div className={`${PROSE_NOTIFICATION} max-h-40 overflow-auto rounded-md bg-background/50 p-2`}>
                           <ReactMarkdown remarkPlugins={[remarkGfm]}>
                             {row.diff}
                           </ReactMarkdown>
@@ -353,7 +353,7 @@ export function LearnedContextPanel({ profileId }: LearnedContextPanelProps) {
                                 : `vs v${derivedDiff.previousVersion}`}
                             </span>
                           </div>
-                          <div className="max-h-44 space-y-1 overflow-y-auto font-mono text-xs">
+                          <div className="max-h-64 space-y-1 overflow-y-auto font-mono text-xs">
                             {derivedDiff.lines.map((line, index) => {
                               const toneClass =
                                 line.kind === "added"