stagent 0.1.0

package/src/components/costs/cost-filters.tsx

@@ -0,0 +1,179 @@
+"use client";
+
+import { useTransition } from "react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { ListFilter, Loader2, RotateCcw } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+interface RuntimeOption {
+  id: string;
+  label: string;
+}
+
+interface CostFiltersProps {
+  dateRange: string;
+  runtimeId: string;
+  status: string;
+  activityType: string;
+  runtimeOptions: RuntimeOption[];
+}
+
+const DATE_RANGE_OPTIONS = [
+  { value: "7d", label: "Last 7 days" },
+  { value: "30d", label: "Last 30 days" },
+  { value: "90d", label: "Last 90 days" },
+  { value: "all", label: "All time" },
+];
+
+const STATUS_OPTIONS = [
+  { value: "all", label: "All statuses" },
+  { value: "completed", label: "Completed" },
+  { value: "failed", label: "Failed" },
+  { value: "cancelled", label: "Cancelled" },
+  { value: "blocked", label: "Blocked" },
+  { value: "unknown_pricing", label: "Unknown pricing" },
+];
+
+const ACTIVITY_OPTIONS = [
+  { value: "all", label: "All activities" },
+  { value: "task_run", label: "Task runs" },
+  { value: "task_resume", label: "Task resumes" },
+  { value: "workflow_step", label: "Workflow steps" },
+  { value: "scheduled_firing", label: "Scheduled firings" },
+  { value: "task_assist", label: "Task assist" },
+  { value: "profile_test", label: "Profile tests" },
+];
+
+export function CostFilters({
+  dateRange,
+  runtimeId,
+  status,
+  activityType,
+  runtimeOptions,
+}: CostFiltersProps) {
+  const pathname = usePathname();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [isPending, startTransition] = useTransition();
+
+  function replaceFilters(next: URLSearchParams) {
+    const href = next.size > 0 ? `${pathname}?${next.toString()}` : pathname;
+    startTransition(() => {
+      router.replace(href, { scroll: false });
+    });
+  }
+
+  function setFilter(
+    key: "range" | "runtime" | "status" | "activity",
+    value: string
+  ) {
+    const next = new URLSearchParams(searchParams.toString());
+    const defaultValue = key === "range" ? "30d" : "all";
+    if (value === defaultValue) {
+      next.delete(key);
+    } else {
+      next.set(key, value);
+    }
+    replaceFilters(next);
+  }
+
+  function resetFilters() {
+    replaceFilters(new URLSearchParams());
+  }
+
+  const hasCustomFilters =
+    dateRange !== "30d" ||
+    runtimeId !== "all" ||
+    status !== "all" ||
+    activityType !== "all";
+
+  return (
+    <div className="surface-panel flex flex-col gap-3 rounded-2xl p-4">
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground">
+          <ListFilter className="h-3.5 w-3.5" />
+          <span>Audit Filters</span>
+        </div>
+        <div className="flex items-center gap-2">
+          {isPending ? (
+            <span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
+              <Loader2 className="h-3.5 w-3.5 animate-spin" />
+              Updating
+            </span>
+          ) : null}
+          {hasCustomFilters ? (
+            <Button variant="ghost" size="sm" onClick={resetFilters}>
+              <RotateCcw className="h-3.5 w-3.5" />
+              Reset
+            </Button>
+          ) : null}
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-3 lg:flex-row lg:flex-wrap">
+        <Select value={dateRange} onValueChange={(value) => setFilter("range", value)}>
+          <SelectTrigger className="surface-control w-full justify-between lg:w-[170px]">
+            <SelectValue placeholder="Date range" />
+          </SelectTrigger>
+          <SelectContent>
+            {DATE_RANGE_OPTIONS.map((option) => (
+              <SelectItem key={option.value} value={option.value}>
+                {option.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        <Select value={runtimeId} onValueChange={(value) => setFilter("runtime", value)}>
+          <SelectTrigger className="surface-control w-full justify-between lg:w-[210px]">
+            <SelectValue placeholder="All runtimes" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All runtimes</SelectItem>
+            {runtimeOptions.map((runtime) => (
+              <SelectItem key={runtime.id} value={runtime.id}>
+                {runtime.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        <Select value={status} onValueChange={(value) => setFilter("status", value)}>
+          <SelectTrigger className="surface-control w-full justify-between lg:w-[180px]">
+            <SelectValue placeholder="All statuses" />
+          </SelectTrigger>
+          <SelectContent>
+            {STATUS_OPTIONS.map((option) => (
+              <SelectItem key={option.value} value={option.value}>
+                {option.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        <Select
+          value={activityType}
+          onValueChange={(value) => setFilter("activity", value)}
+        >
+          <SelectTrigger className="surface-control w-full justify-between lg:w-[190px]">
+            <SelectValue placeholder="All activities" />
+          </SelectTrigger>
+          <SelectContent>
+            {ACTIVITY_OPTIONS.map((option) => (
+              <SelectItem key={option.value} value={option.value}>
+                {option.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  );
+}

package/src/components/dashboard/activity-feed.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import Link from "next/link";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { ArrowRight } from "lucide-react";
+import { MiniBar } from "@/components/charts/mini-bar";
+
+export interface ActivityEntry {
+  id: string;
+  event: string;
+  payload: string | null;
+  timestamp: string;
+  taskTitle?: string;
+}
+
+interface ActivityFeedProps {
+  entries: ActivityEntry[];
+  hourlyActivity?: number[];
+}
+
+const eventColors: Record<string, string> = {
+  tool_start: "bg-status-running",
+  content_start: "bg-status-completed",
+  content_delta: "bg-status-completed/70",
+  completed: "bg-status-completed",
+  error: "bg-status-failed",
+};
+
+export function ActivityFeed({ entries, hourlyActivity }: ActivityFeedProps) {
+  return (
+    <Card className="surface-card">
+      <CardHeader className="pb-3">
+        <CardTitle className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+          Live Agent Activity
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        {hourlyActivity && hourlyActivity.some((v) => v > 0) && (
+          <div className="mb-3 pb-3 border-b border-border/50">
+            <p className="text-[10px] text-muted-foreground mb-1.5">24h activity</p>
+            <MiniBar
+              data={hourlyActivity.map((value) => ({ value }))}
+              width={200}
+              height={28}
+              defaultColor="var(--chart-1)"
+              label="Agent activity over last 24 hours"
+              className="w-full"
+            />
+          </div>
+        )}
+        {entries.length === 0 ? (
+          <p
+            className="text-sm text-muted-foreground py-4 text-center"
+            aria-live="polite"
+          >
+            No recent agent activity.
+          </p>
+        ) : (
+          <div className="space-y-1" aria-live="polite">
+            {entries.map((entry) => (
+              <div
+                key={entry.id}
+                className="flex items-start gap-3 py-2.5 border-b border-border/50 last:border-b-0"
+              >
+                <div
+                  className={`h-2 w-2 rounded-full mt-1.5 flex-shrink-0 ${eventColors[entry.event] ?? "bg-muted-foreground"}`}
+                />
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm truncate">
+                    <span className="font-medium">{entry.event}</span>
+                    {entry.taskTitle && (
+                      <span className="text-muted-foreground"> — {entry.taskTitle}</span>
+                    )}
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    {new Date(entry.timestamp).toLocaleTimeString()}
+                    {entry.payload && ` · ${entry.payload.slice(0, 60)}${entry.payload.length > 60 ? "..." : ""}`}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+        <div className="mt-3">
+          <Link href="/monitor">
+            <Button variant="outline" size="sm" className="w-full">
+              Open monitor <ArrowRight className="h-3 w-3 ml-1" />
+            </Button>
+          </Link>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/dashboard/greeting.tsx

@@ -0,0 +1,30 @@
+interface GreetingProps {
+  runningCount: number;
+  awaitingCount: number;
+  failedCount: number;
+}
+
+function getGreeting(): string {
+  const hour = new Date().getHours();
+  if (hour < 12) return "Good morning";
+  if (hour < 18) return "Good afternoon";
+  return "Good evening";
+}
+
+export function Greeting({ runningCount, awaitingCount, failedCount }: GreetingProps) {
+  const parts: string[] = [];
+  if (runningCount > 0) parts.push(`${runningCount} task${runningCount !== 1 ? "s" : ""} running`);
+  if (awaitingCount > 0) parts.push(`${awaitingCount} awaiting your review`);
+  if (failedCount > 0) parts.push(`${failedCount} failed task${failedCount !== 1 ? "s" : ""} to address`);
+
+  const summary = parts.length > 0
+    ? `You have ${parts.join(", ")}.`
+    : "All clear — no tasks need your attention.";
+
+  return (
+    <div className="glass-card rounded-xl p-5 mb-6">
+      <h2 className="text-xl font-bold">{getGreeting()}</h2>
+      <p className="text-sm text-muted-foreground mt-1">{summary}</p>
+    </div>
+  );
+}

package/src/components/dashboard/priority-queue.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import Link from "next/link";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { AlertTriangle, Clock, Shield, ArrowRight } from "lucide-react";
+import { taskStatusVariant } from "@/lib/constants/status-colors";
+
+export interface PriorityTask {
+  id: string;
+  title: string;
+  status: string;
+  priority: number;
+  projectName?: string;
+}
+
+interface PriorityQueueProps {
+  tasks: PriorityTask[];
+}
+
+const statusIcon: Record<string, typeof AlertTriangle> = {
+  failed: AlertTriangle,
+  running: Clock,
+};
+
+const priorityColors = ["text-priority-critical", "text-priority-high", "text-status-warning", "text-muted-foreground"];
+
+export function PriorityQueue({ tasks }: PriorityQueueProps) {
+  return (
+    <Card className="surface-card">
+      <CardHeader className="pb-3">
+        <CardTitle className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+          Needs Attention
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        {tasks.length === 0 ? (
+          <p
+            className="text-sm text-muted-foreground py-4 text-center"
+            aria-live="polite"
+          >
+            No tasks need attention right now.
+          </p>
+        ) : (
+          <div className="space-y-1" aria-live="polite">
+            {tasks.map((task) => {
+              const Icon = statusIcon[task.status] ?? Shield;
+              return (
+                <div
+                  key={task.id}
+                  className="flex items-center gap-3 py-2.5 border-b border-border/50 last:border-b-0"
+                >
+                  <Icon className={`h-4 w-4 flex-shrink-0 ${priorityColors[task.priority] ?? priorityColors[3]}`} />
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-medium truncate">{task.title}</p>
+                    {task.projectName && (
+                      <p className="text-xs text-muted-foreground">{task.projectName}</p>
+                    )}
+                  </div>
+                  <Badge variant={taskStatusVariant[task.status] ?? "secondary"} className="text-xs">
+                    {task.status}
+                  </Badge>
+                </div>
+              );
+            })}
+          </div>
+        )}
+        <div className="mt-3">
+          <Link href="/dashboard">
+            <Button variant="outline" size="sm" className="w-full">
+              View all tasks <ArrowRight className="h-3 w-3 ml-1" />
+            </Button>
+          </Link>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/dashboard/quick-actions.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { Card, CardContent } from "@/components/ui/card";
+import { Plus, FolderPlus, Inbox, Activity } from "lucide-react";
+import { SectionHeading } from "@/components/shared/section-heading";
+
+export function QuickActions() {
+  const router = useRouter();
+
+  const actions = [
+    {
+      label: "New Task",
+      description: "Create & queue an agent task",
+      icon: Plus,
+      onClick: () => router.push("/tasks/new"),
+    },
+    {
+      label: "New Project",
+      description: "Organize tasks into a project",
+      icon: FolderPlus,
+      onClick: () => router.push("/projects"),
+    },
+    {
+      label: "Open Inbox",
+      description: "Review pending notifications",
+      icon: Inbox,
+      onClick: () => router.push("/inbox"),
+    },
+    {
+      label: "Open Monitor",
+      description: "Watch live agent logs",
+      icon: Activity,
+      onClick: () => router.push("/monitor"),
+    },
+  ];
+
+  return (
+    <div className="mb-6">
+      <SectionHeading>Quick Actions</SectionHeading>
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+        {actions.map((action) => (
+          <Card
+            key={action.label}
+            tabIndex={0}
+            className="surface-card cursor-pointer transition-colors hover:bg-accent/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-xl"
+            onClick={action.onClick}
+            onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); action.onClick(); } }}
+          >
+            <CardContent className="flex flex-col items-center justify-center py-5 gap-2">
+              <action.icon className="h-8 w-8 text-muted-foreground" />
+              <span className="text-sm font-medium">{action.label}</span>
+              <span className="text-xs text-muted-foreground text-center">
+                {action.description}
+              </span>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/dashboard/recent-projects.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import Link from "next/link";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Progress } from "@/components/ui/progress";
+import { FolderPlus } from "lucide-react";
+import { SectionHeading } from "@/components/shared/section-heading";
+import { DonutRing } from "@/components/charts/donut-ring";
+
+export interface RecentProject {
+  id: string;
+  name: string;
+  totalTasks: number;
+  completedTasks: number;
+}
+
+interface RecentProjectsProps {
+  projects: RecentProject[];
+}
+
+export function RecentProjects({ projects }: RecentProjectsProps) {
+  if (projects.length === 0) {
+    return (
+      <div>
+        <SectionHeading>Recent Projects</SectionHeading>
+        <Card className="surface-card p-6 text-center">
+          <FolderPlus className="h-8 w-8 mx-auto text-muted-foreground mb-2" />
+          <p className="text-sm text-muted-foreground mb-3">No active projects yet.</p>
+          <Link href="/projects">
+            <Button variant="outline" size="sm">Create your first project</Button>
+          </Link>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="flex items-baseline justify-between mb-3">
+        <SectionHeading className="mb-0">Recent Projects</SectionHeading>
+        <Link href="/projects" className="text-xs text-muted-foreground underline hover:text-foreground">
+          View all
+        </Link>
+      </div>
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+        {projects.map((project) => {
+          const pct = project.totalTasks > 0
+            ? Math.round((project.completedTasks / project.totalTasks) * 100)
+            : 0;
+          return (
+            <Link key={project.id} href={`/projects/${project.id}`}>
+              <Card className="surface-card cursor-pointer transition-colors hover:bg-accent/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-xl">
+                <CardHeader className="pb-2">
+                  <div className="flex items-center gap-2">
+                    <DonutRing
+                      value={pct}
+                      size={28}
+                      strokeWidth={3}
+                      color="var(--chart-2)"
+                      label={`${project.name}: ${pct}% complete`}
+                    />
+                    <CardTitle className="text-base font-medium">{project.name}</CardTitle>
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <Progress value={pct} className="h-1.5 mb-2" />
+                  <p className="text-xs text-muted-foreground">
+                    {project.completedTasks}/{project.totalTasks} tasks completed
+                  </p>
+                </CardContent>
+              </Card>
+            </Link>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/components/dashboard/stats-cards.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import Link from "next/link";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Activity, CheckCircle, MessageSquare, FolderKanban } from "lucide-react";
+import { Sparkline } from "@/components/charts/sparkline";
+
+interface StatsCardsProps {
+  runningCount: number;
+  completedToday: number;
+  completedAllTime: number;
+  awaitingReview: number;
+  activeProjects: number;
+  sparklines?: {
+    completions: number[];
+    creations: number[];
+    projects: number[];
+    notifications: number[];
+  };
+}
+
+export function StatsCards({
+  runningCount,
+  completedToday,
+  completedAllTime,
+  awaitingReview,
+  activeProjects,
+  sparklines,
+}: StatsCardsProps) {
+  const stats = [
+    {
+      title: "Tasks Running",
+      value: runningCount,
+      subtitle: "Currently active",
+      icon: Activity,
+      color: "text-status-running",
+      chartColor: "var(--chart-1)",
+      href: "/monitor",
+      destination: "Monitor",
+      sparklineData: sparklines?.creations,
+    },
+    {
+      title: "Completed Today",
+      value: completedToday,
+      subtitle: `All-time: ${completedAllTime}`,
+      icon: CheckCircle,
+      color: "text-status-completed",
+      chartColor: "var(--chart-2)",
+      href: "/dashboard",
+      destination: "Dashboard",
+      sparklineData: sparklines?.completions,
+    },
+    {
+      title: "Awaiting Review",
+      value: awaitingReview,
+      subtitle: "Human-loop pending",
+      icon: MessageSquare,
+      color: "text-status-warning",
+      chartColor: "var(--chart-3)",
+      href: "/inbox",
+      destination: "Inbox",
+      sparklineData: sparklines?.notifications,
+    },
+    {
+      title: "Active Projects",
+      value: activeProjects,
+      subtitle: "In progress",
+      icon: FolderKanban,
+      color: "text-primary",
+      chartColor: "var(--chart-4)",
+      href: "/projects",
+      destination: "Projects",
+      sparklineData: sparklines?.projects,
+    },
+  ];
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+      {stats.map((s) => (
+        <Link key={s.title} href={s.href}>
+          <Card className="surface-card glass-shimmer cursor-pointer transition-colors hover:bg-accent/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-xl">
+            <CardHeader className="flex flex-row items-center justify-between pb-2">
+              <CardTitle className="text-sm font-medium text-muted-foreground">
+                {s.title}
+              </CardTitle>
+              <s.icon className={`h-4 w-4 ${s.color}`} />
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">{s.value}</div>
+              {s.sparklineData && (
+                <div className="hidden sm:block mt-1">
+                  <Sparkline
+                    data={s.sparklineData}
+                    width={100}
+                    height={24}
+                    color={s.chartColor}
+                    label={`${s.title} 7-day trend`}
+                    className="w-full"
+                  />
+                </div>
+              )}
+              <p className="text-xs text-muted-foreground mt-1">{s.subtitle}</p>
+              {s.destination && (
+                <p className="text-[10px] text-muted-foreground/60 mt-0.5">
+                  → {s.destination}
+                </p>
+              )}
+            </CardContent>
+          </Card>
+        </Link>
+      ))}
+    </div>
+  );
+}