stagent 0.1.0

package/src/components/monitoring/log-stream.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import { useEffect, useRef, useState, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { ArrowDown } from "lucide-react";
+import { LogEntry } from "./log-entry";
+import { LogFilters } from "./log-filters";
+import { ConnectionIndicator } from "./connection-indicator";
+
+interface LogEntryData {
+  id: string;
+  taskId: string | null;
+  agentType: string;
+  event: string;
+  payload: string | null;
+  timestamp: string;
+}
+
+interface LogStreamProps {
+  tasks: { id: string; title: string }[];
+}
+
+export function LogStream({ tasks }: LogStreamProps) {
+  const [entries, setEntries] = useState<LogEntryData[]>([]);
+  const [connected, setConnected] = useState(false);
+  const [isAutoScrolling, setIsAutoScrolling] = useState(true);
+  const [taskFilter, setTaskFilter] = useState("all");
+  const [eventFilter, setEventFilter] = useState("all");
+  const containerRef = useRef<HTMLDivElement>(null);
+  const eventSourceRef = useRef<EventSource | null>(null);
+
+  const connect = useCallback(() => {
+    if (eventSourceRef.current) {
+      eventSourceRef.current.close();
+    }
+
+    const params = new URLSearchParams();
+    if (taskFilter !== "all") params.set("taskId", taskFilter);
+    if (eventFilter !== "all") params.set("eventType", eventFilter);
+
+    const es = new EventSource(`/api/logs/stream?${params}`);
+    eventSourceRef.current = es;
+
+    es.onopen = () => setConnected(true);
+
+    es.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        setEntries((prev) => {
+          const next = [...prev, data];
+          return next.length > 500 ? next.slice(-500) : next;
+        });
+      } catch {
+        // Invalid JSON
+      }
+    };
+
+    es.onerror = () => {
+      setConnected(false);
+      es.close();
+      // Reconnect after 3s
+      setTimeout(connect, 3000);
+    };
+  }, [taskFilter, eventFilter]);
+
+  useEffect(() => {
+    connect();
+    return () => {
+      eventSourceRef.current?.close();
+    };
+  }, [connect]);
+
+  // Auto-scroll
+  useEffect(() => {
+    if (isAutoScrolling && containerRef.current) {
+      containerRef.current.scrollTop = containerRef.current.scrollHeight;
+    }
+  }, [entries, isAutoScrolling]);
+
+  function handleScroll() {
+    if (!containerRef.current) return;
+    const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
+    const isAtBottom = scrollHeight - scrollTop - clientHeight < 50;
+    setIsAutoScrolling(isAtBottom);
+  }
+
+  function jumpToLatest() {
+    if (containerRef.current) {
+      containerRef.current.scrollTop = containerRef.current.scrollHeight;
+      setIsAutoScrolling(true);
+    }
+  }
+
+  return (
+    <Card className="relative flex flex-col">
+      <div className="flex items-center justify-between p-4 border-b border-border/60">
+        <h3 className="text-sm font-medium">Log Stream</h3>
+        <div className="flex items-center gap-4">
+          <LogFilters
+            taskId={taskFilter}
+            eventType={eventFilter}
+            tasks={tasks}
+            onTaskChange={(v) => {
+              setTaskFilter(v);
+              setEntries([]);
+            }}
+            onEventTypeChange={(v) => {
+              setEventFilter(v);
+              setEntries([]);
+            }}
+          />
+          <ConnectionIndicator connected={connected} />
+        </div>
+      </div>
+      <div
+        ref={containerRef}
+        onScroll={handleScroll}
+        className="flex-1 min-h-[300px] max-h-[calc(100vh-20rem)] overflow-auto p-2"
+      >
+        {entries.length === 0 ? (
+          <div className="flex items-center justify-center h-full min-h-[200px] text-sm text-muted-foreground">
+            Waiting for agent activity...
+          </div>
+        ) : (
+          entries.map((entry) => {
+            const taskName = entry.taskId
+              ? tasks.find((t) => t.id === entry.taskId)?.title
+              : undefined;
+            return <LogEntry key={entry.id} entry={entry} taskName={taskName} />;
+          })
+        )}
+      </div>
+      {!isAutoScrolling && (
+        <div className="absolute bottom-4 left-1/2 -translate-x-1/2">
+          <Button size="sm" variant="secondary" onClick={jumpToLatest}>
+            <ArrowDown className="h-3.5 w-3.5 mr-1" />
+            Jump to latest
+          </Button>
+        </div>
+      )}
+    </Card>
+  );
+}

package/src/components/monitoring/monitor-overview-wrapper.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState, useTransition } from "react";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { RefreshCw } from "lucide-react";
+
+const AUTO_REFRESH_INTERVAL = 15_000; // 15 seconds
+
+export function MonitorRefreshButton() {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+  const [autoRefresh, setAutoRefresh] = useState(true);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const handleRefresh = useCallback(() => {
+    startTransition(() => {
+      router.refresh();
+    });
+  }, [router, startTransition]);
+
+  // Pause auto-refresh when tab is not visible
+  const [visible, setVisible] = useState(true);
+  useEffect(() => {
+    function onVisibilityChange() {
+      setVisible(document.visibilityState === "visible");
+    }
+    document.addEventListener("visibilitychange", onVisibilityChange);
+    return () => document.removeEventListener("visibilitychange", onVisibilityChange);
+  }, []);
+
+  useEffect(() => {
+    if (autoRefresh && visible) {
+      intervalRef.current = setInterval(handleRefresh, AUTO_REFRESH_INTERVAL);
+      return () => {
+        if (intervalRef.current) clearInterval(intervalRef.current);
+      };
+    } else {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    }
+  }, [autoRefresh, visible, handleRefresh]);
+
+  return (
+    <div className="flex items-center gap-2">
+      <Button
+        variant={autoRefresh ? "secondary" : "ghost"}
+        size="sm"
+        onClick={() => setAutoRefresh((prev) => !prev)}
+        aria-label={autoRefresh ? "Disable auto-refresh" : "Enable auto-refresh"}
+      >
+        {autoRefresh ? "Auto" : "Manual"}
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={handleRefresh}
+        disabled={isPending}
+        aria-label="Refresh metrics"
+      >
+        <RefreshCw className={`h-4 w-4 ${isPending || autoRefresh ? "animate-spin" : ""}`} />
+      </Button>
+    </div>
+  );
+}

package/src/components/monitoring/monitor-overview.tsx

@@ -0,0 +1,119 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { db } from "@/lib/db";
+import { tasks, agentLogs } from "@/lib/db/schema";
+import { eq, count, sql, gte, and } from "drizzle-orm";
+import { Activity, CheckCircle, Zap, Clock } from "lucide-react";
+import { DonutRing } from "@/components/charts/donut-ring";
+import { Sparkline } from "@/components/charts/sparkline";
+import { getAgentActivityByHour } from "@/lib/queries/chart-data";
+
+export async function MonitorOverview() {
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+
+  const [activeResult] = await db
+    .select({ count: count() })
+    .from(tasks)
+    .where(eq(tasks.status, "running"));
+
+  const [todayResult] = await db
+    .select({ count: count() })
+    .from(tasks)
+    .where(gte(tasks.createdAt, today));
+
+  const [completedResult] = await db
+    .select({ count: count() })
+    .from(tasks)
+    .where(eq(tasks.status, "completed"));
+
+  const [totalResult] = await db
+    .select({ count: count() })
+    .from(tasks)
+    .where(
+      sql`${tasks.status} IN ('completed', 'failed')`
+    );
+
+  const successRate =
+    totalResult.count > 0
+      ? Math.round((completedResult.count / totalResult.count) * 100)
+      : 0;
+
+  const [lastLog] = await db
+    .select()
+    .from(agentLogs)
+    .orderBy(sql`${agentLogs.timestamp} DESC`)
+    .limit(1);
+
+  const hourlyActivity = await getAgentActivityByHour();
+
+  return (
+    <div
+      className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6"
+      aria-live="polite"
+      aria-label="Monitor overview metrics"
+    >
+      {/* Active Agents */}
+      <Card className="surface-card">
+        <CardHeader className="flex flex-row items-center justify-between pb-2">
+          <CardTitle className="text-sm font-medium text-muted-foreground">Active Agents</CardTitle>
+          <Activity className="h-4 w-4 text-status-running" />
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">{activeResult.count}</div>
+          <Sparkline
+            data={hourlyActivity}
+            width={100}
+            height={20}
+            color="var(--chart-1)"
+            label="Agent activity over 24 hours"
+            className="w-full mt-1"
+          />
+        </CardContent>
+      </Card>
+
+      {/* Tasks Today */}
+      <Card className="surface-card">
+        <CardHeader className="flex flex-row items-center justify-between pb-2">
+          <CardTitle className="text-sm font-medium text-muted-foreground">Tasks Today</CardTitle>
+          <Zap className="h-4 w-4 text-status-warning" />
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">{todayResult.count}</div>
+        </CardContent>
+      </Card>
+
+      {/* Success Rate */}
+      <Card className="surface-card">
+        <CardHeader className="flex flex-row items-center justify-between pb-2">
+          <CardTitle className="text-sm font-medium text-muted-foreground">Success Rate</CardTitle>
+          <CheckCircle className="h-4 w-4 text-status-completed" />
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center gap-3">
+            <DonutRing
+              value={successRate}
+              size={36}
+              strokeWidth={4}
+              color="var(--chart-2)"
+              label={`Success rate: ${successRate}%`}
+            />
+            <div className="text-2xl font-bold">{successRate}%</div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Last Activity */}
+      <Card className="surface-card">
+        <CardHeader className="flex flex-row items-center justify-between pb-2">
+          <CardTitle className="text-sm font-medium text-muted-foreground">Last Activity</CardTitle>
+          <Clock className="h-4 w-4 text-muted-foreground" />
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">
+            {lastLog ? new Date(lastLog.timestamp).toLocaleTimeString() : "None"}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/components/notifications/failure-action.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { RotateCcw } from "lucide-react";
+
+interface FailureActionProps {
+  taskId: string;
+  onRetried: () => void;
+}
+
+export function FailureAction({ taskId, onRetried }: FailureActionProps) {
+  const [loading, setLoading] = useState(false);
+
+  async function handleRetry() {
+    setLoading(true);
+    try {
+      // Move back to queued
+      await fetch(`/api/tasks/${taskId}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ status: "queued" }),
+      });
+      // Then execute
+      await fetch(`/api/tasks/${taskId}/execute`, { method: "POST" });
+      onRetried();
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Button size="sm" variant="outline" onClick={handleRetry} disabled={loading} className="mt-2">
+      <RotateCcw className="h-3.5 w-3.5 mr-1" />
+      Retry
+    </Button>
+  );
+}

package/src/components/notifications/inbox-list.tsx

@@ -0,0 +1,165 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Button } from "@/components/ui/button";
+import { CheckCheck, Inbox, RefreshCw, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+import { NotificationItem } from "./notification-item";
+import { EmptyState } from "@/components/shared/empty-state";
+
+interface Notification {
+  id: string;
+  taskId: string | null;
+  type: string;
+  title: string;
+  body: string | null;
+  read: boolean;
+  toolName: string | null;
+  toolInput: string | null;
+  response: string | null;
+  respondedAt: string | null;
+  createdAt: string;
+}
+
+export function InboxList({
+  initialNotifications,
+}: {
+  initialNotifications: Notification[];
+}) {
+  const [notifications, setNotifications] =
+    useState<Notification[]>(initialNotifications);
+  const [tab, setTab] = useState("all");
+
+  const refresh = useCallback(async () => {
+    const res = await fetch("/api/notifications");
+    if (res.ok) setNotifications(await res.json());
+  }, []);
+
+  // Poll every 10 seconds (consolidated from 3s inbox + 5s badge)
+  useEffect(() => {
+    const interval = setInterval(refresh, 10_000);
+    return () => clearInterval(interval);
+  }, [refresh]);
+
+  async function markAllRead() {
+    await fetch("/api/notifications/mark-all-read", { method: "PATCH" });
+    toast.success("All notifications marked as read");
+    refresh();
+  }
+
+  async function dismissAllRead() {
+    const readNotifications = notifications.filter((n) => n.read);
+    if (readNotifications.length === 0) return;
+    await Promise.all(
+      readNotifications.map((n) =>
+        fetch(`/api/notifications/${n.id}`, { method: "DELETE" })
+      )
+    );
+    toast.success(`Dismissed ${readNotifications.length} read notification${readNotifications.length !== 1 ? "s" : ""}`);
+    refresh();
+  }
+
+  const filtered =
+    tab === "all"
+      ? notifications
+      : tab === "unread"
+        ? notifications.filter((n) => !n.read)
+        : tab === "permissions"
+          ? notifications.filter((n) => n.type === "permission_required")
+          : notifications.filter(
+              (n) => n.type === "agent_message" || n.type === "budget_alert"
+            );
+
+  const unreadCount = notifications.filter((n) => !n.read).length;
+  const filteredCount = filtered.length;
+  const readCount = notifications.length - unreadCount;
+
+  return (
+    <div className="space-y-4">
+      <div className="surface-toolbar rounded-[24px] p-3 sm:p-4">
+        <div className="flex flex-wrap items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
+          <span>Notification Queue</span>
+          <span className="rounded-full bg-background/75 px-2.5 py-1 text-[11px] font-medium normal-case tracking-normal text-foreground">
+            {filteredCount} shown
+          </span>
+          {unreadCount > 0 && (
+            <span className="rounded-full bg-primary/10 px-2.5 py-1 text-[11px] font-medium normal-case tracking-normal text-primary">
+              {unreadCount} unread
+            </span>
+          )}
+          {readCount > 0 && (
+            <span className="rounded-full bg-muted px-2.5 py-1 text-[11px] font-medium normal-case tracking-normal text-muted-foreground">
+              {readCount} read
+            </span>
+          )}
+        </div>
+
+        <div className="mt-3 flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
+          <Tabs value={tab} onValueChange={setTab}>
+            <TabsList className="h-auto flex-wrap justify-start gap-1 rounded-xl bg-background/75 p-1 shadow-none">
+              <TabsTrigger className="min-h-8 flex-none px-3 text-[13px]" value="all">
+                All
+              </TabsTrigger>
+              <TabsTrigger className="min-h-8 flex-none px-3 text-[13px]" value="unread">
+                Unread{unreadCount > 0 ? ` (${unreadCount})` : ""}
+              </TabsTrigger>
+              <TabsTrigger className="min-h-8 flex-none px-3 text-[13px]" value="permissions">
+                Permissions
+              </TabsTrigger>
+              <TabsTrigger className="min-h-8 flex-none px-3 text-[13px]" value="messages">
+                Messages
+              </TabsTrigger>
+            </TabsList>
+          </Tabs>
+
+          <div className="flex flex-wrap items-center gap-2">
+            <Button
+              variant="outline"
+              size="icon-sm"
+              onClick={refresh}
+              aria-label="Refresh notifications"
+            >
+              <RefreshCw className="h-4 w-4" />
+            </Button>
+            {unreadCount > 0 && (
+              <Button variant="secondary" size="sm" onClick={markAllRead}>
+                <CheckCheck className="h-4 w-4" />
+                Mark all read
+              </Button>
+            )}
+            {readCount > 0 && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={dismissAllRead}
+                className="text-muted-foreground hover:text-destructive"
+              >
+                <Trash2 className="h-4 w-4" />
+                Dismiss read
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-3" aria-live="polite">
+        {filtered.length === 0 ? (
+          <EmptyState
+            icon={Inbox}
+            heading="No notifications"
+            description={tab === "all" ? "You're all caught up." : `No ${tab} notifications to show.`}
+          />
+        ) : (
+          filtered.map((n) => (
+            <NotificationItem
+              key={n.id}
+              notification={n}
+              onUpdated={refresh}
+            />
+          ))
+        )}
+      </div>
+    </div>
+  );
+}