stagent 0.1.0

package/src/app/icon.tsx

@@ -0,0 +1,30 @@
+import { ImageResponse } from "next/og";
+import { readFileSync } from "fs";
+import { join } from "path";
+
+export const size = { width: 32, height: 32 };
+export const contentType = "image/png";
+
+export default function Icon() {
+  const logoData = readFileSync(join(process.cwd(), "public/stagent-s-64.png"));
+  const logoSrc = `data:image/png;base64,${logoData.toString("base64")}`;
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          background: "transparent",
+        }}
+      >
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img src={logoSrc} width="30" height="30" alt="" />
+      </div>
+    ),
+    { ...size }
+  );
+}

package/src/app/inbox/loading.tsx

@@ -0,0 +1,15 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function InboxLoading() {
+  return (
+    <div className="p-6">
+      <Skeleton className="h-8 w-24 mb-6" />
+      <Skeleton className="h-10 w-80 mb-4 rounded-md" />
+      <div className="space-y-3">
+        {Array.from({ length: 5 }).map((_, i) => (
+          <Skeleton key={i} className="h-24 rounded-lg" />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/app/inbox/page.tsx

@@ -0,0 +1,35 @@
+import { db } from "@/lib/db";
+import { notifications } from "@/lib/db/schema";
+import { desc } from "drizzle-orm";
+import { InboxList } from "@/components/notifications/inbox-list";
+
+export const dynamic = "force-dynamic";
+
+export default async function InboxPage() {
+  const rows = await db
+    .select()
+    .from(notifications)
+    .orderBy(desc(notifications.createdAt))
+    .limit(100);
+
+  // Serialize Date objects for client component consumption
+  const initialNotifications = rows.map((n) => ({
+    ...n,
+    createdAt: n.createdAt.toISOString(),
+    respondedAt: n.respondedAt?.toISOString() ?? null,
+  }));
+
+  return (
+    <div className="gradient-sunset-glow min-h-screen p-4 sm:p-6">
+      <div className="surface-page surface-page-shell mx-auto min-h-[calc(100dvh-2rem)] max-w-6xl rounded-[30px] p-5 sm:p-6 lg:p-7">
+        <div className="mb-5 space-y-1">
+          <h1 className="text-2xl font-bold">Inbox</h1>
+          <p className="text-sm text-muted-foreground">
+            Review approvals, questions, failures, and completions without leaving the supervision flow.
+          </p>
+        </div>
+        <InboxList initialNotifications={initialNotifications} />
+      </div>
+    </div>
+  );
+}

package/src/app/layout.tsx

@@ -0,0 +1,78 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import { SidebarProvider, SidebarInset } from "@/components/ui/sidebar";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { AppSidebar } from "@/components/shared/app-sidebar";
+import { CommandPalette } from "@/components/shared/command-palette";
+import { PendingApprovalHost } from "@/components/notifications/pending-approval-host";
+import { Toaster } from "@/components/ui/sonner";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Stagent",
+  description: "AI agent task management",
+};
+
+// Inline theme bootstrap prevents a flash between the server render and local theme preference.
+const CRITICAL_THEME_CSS = `
+  :root {
+    color-scheme: light;
+    --background: oklch(0.98 0.005 260);
+    --foreground: oklch(0.15 0.02 260);
+    --surface-1: rgba(255, 255, 255, 0.92);
+    --surface-2: rgba(255, 255, 255, 0.82);
+    --border: oklch(0.82 0.01 260 / 0.2);
+  }
+  html.dark {
+    color-scheme: dark;
+    --background: oklch(0.09 0.02 265);
+    --foreground: oklch(0.93 0.015 270);
+    --surface-1: oklch(0.16 0.02 268 / 0.96);
+    --surface-2: oklch(0.14 0.018 272 / 0.9);
+    --border: oklch(0.36 0.03 270 / 0.28);
+  }
+  html { background: var(--background); }
+`.replace(/\s+/g, " ").trim();
+
+// Static theme initialization script — no user input, safe from XSS.
+const THEME_INIT_SCRIPT = `(function(){try{var d=document.documentElement;var s=localStorage.getItem('stagent-theme');var t=s==='dark'||s==='light'?s:(window.matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light');d.classList.toggle('dark',t==='dark');d.dataset.theme=t;d.style.colorScheme=t;d.style.backgroundColor=t==='dark'?'oklch(0.09 0.02 265)':'oklch(0.98 0.005 260)';document.cookie='stagent-theme='+t+';path=/;max-age=31536000;SameSite=Lax';}catch(e){}})()`;
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <style dangerouslySetInnerHTML={{ __html: CRITICAL_THEME_CSS }} />
+        <script dangerouslySetInnerHTML={{ __html: THEME_INIT_SCRIPT }} />
+      </head>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} font-sans antialiased bg-background text-foreground`}
+      >
+        <TooltipProvider>
+          <SidebarProvider>
+            <AppSidebar />
+            <SidebarInset className="min-w-0">
+              {children}
+            </SidebarInset>
+          </SidebarProvider>
+          <PendingApprovalHost />
+          <CommandPalette />
+          <Toaster />
+        </TooltipProvider>
+      </body>
+    </html>
+  );
+}

package/src/app/manifest.ts

@@ -0,0 +1,32 @@
+import type { MetadataRoute } from "next";
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: "Stagent",
+    short_name: "Stagent",
+    description: "AI agent task management",
+    start_url: "/",
+    display: "standalone",
+    background_color: "#0f172a",
+    theme_color: "#2563eb",
+    icons: [
+      {
+        src: "/icon-512.png",
+        sizes: "512x512",
+        type: "image/png",
+        purpose: "any",
+      },
+      {
+        src: "/icon-512.png",
+        sizes: "512x512",
+        type: "image/png",
+        purpose: "maskable",
+      },
+      {
+        src: "/icon.svg",
+        sizes: "any",
+        type: "image/svg+xml",
+      },
+    ],
+  };
+}

package/src/app/monitor/page.tsx

@@ -0,0 +1,37 @@
+import { Suspense } from "react";
+import { db } from "@/lib/db";
+import { tasks } from "@/lib/db/schema";
+import { MonitorOverview } from "@/components/monitoring/monitor-overview";
+import { MonitorRefreshButton } from "@/components/monitoring/monitor-overview-wrapper";
+import { LogStream } from "@/components/monitoring/log-stream";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export const dynamic = "force-dynamic";
+
+export default async function MonitorPage() {
+  const activeTasks = await db
+    .select({ id: tasks.id, title: tasks.title })
+    .from(tasks)
+    .orderBy(tasks.createdAt);
+
+  return (
+    <div className="gradient-forest-dawn min-h-screen p-6">
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-bold">Monitor</h1>
+        <MonitorRefreshButton />
+      </div>
+      <Suspense
+        fallback={
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+            {Array.from({ length: 4 }).map((_, i) => (
+              <Skeleton key={i} className="h-24 rounded-lg" />
+            ))}
+          </div>
+        }
+      >
+        <MonitorOverview />
+      </Suspense>
+      <LogStream tasks={activeTasks} />
+    </div>
+  );
+}

package/src/app/page.tsx

@@ -0,0 +1,162 @@
+import { db } from "@/lib/db";
+import { tasks, projects, agentLogs, notifications } from "@/lib/db/schema";
+import { eq, count, gte, and, desc, sql, inArray } from "drizzle-orm";
+import { Greeting } from "@/components/dashboard/greeting";
+import { StatsCards } from "@/components/dashboard/stats-cards";
+import { PriorityQueue } from "@/components/dashboard/priority-queue";
+import type { PriorityTask } from "@/components/dashboard/priority-queue";
+import { ActivityFeed } from "@/components/dashboard/activity-feed";
+import type { ActivityEntry } from "@/components/dashboard/activity-feed";
+import { QuickActions } from "@/components/dashboard/quick-actions";
+import { RecentProjects } from "@/components/dashboard/recent-projects";
+import type { RecentProject } from "@/components/dashboard/recent-projects";
+import {
+  getCompletionsByDay,
+  getTaskCreationsByDay,
+  getActiveProjectActivityByDay,
+  getAgentActivityByHour,
+  getNotificationsByDay,
+} from "@/lib/queries/chart-data";
+
+export const dynamic = "force-dynamic";
+
+export default async function HomePage() {
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+
+  // Run all DB queries in parallel
+  const [
+    [runningResult],
+    [failedResult],
+    [completedTodayResult],
+    [completedAllTimeResult],
+    [awaitingResult],
+    [activeProjectsResult],
+    priorityTasks,
+    recentLogs,
+    allProjects,
+    recentActiveProjects,
+    completionsByDay,
+    taskCreationsByDay,
+    projectCreationsByDay,
+    agentActivityByHour,
+    notificationsByDay,
+  ] = await Promise.all([
+    db.select({ count: count() }).from(tasks).where(eq(tasks.status, "running")),
+    db.select({ count: count() }).from(tasks).where(eq(tasks.status, "failed")),
+    db.select({ count: count() }).from(tasks).where(
+      and(eq(tasks.status, "completed"), gte(tasks.updatedAt, today))
+    ),
+    db.select({ count: count() }).from(tasks).where(eq(tasks.status, "completed")),
+    db.select({ count: count() }).from(notifications).where(
+      and(
+        eq(notifications.read, false),
+        inArray(notifications.type, [
+          "permission_required",
+          "agent_message",
+          "budget_alert",
+        ])
+      )
+    ),
+    db.select({ count: count() }).from(projects).where(eq(projects.status, "active")),
+    // Priority queue: failed + running tasks, sorted by priority
+    db.select().from(tasks).where(
+      inArray(tasks.status, ["failed", "running", "queued"])
+    ).orderBy(tasks.priority, desc(tasks.updatedAt)).limit(5),
+    // Recent agent logs
+    db.select().from(agentLogs).orderBy(desc(agentLogs.timestamp)).limit(6),
+    // All projects for quick actions
+    db.select({ id: projects.id, name: projects.name }).from(projects).orderBy(projects.name),
+    // Recent active projects with task counts
+    db.select({
+      id: projects.id,
+      name: projects.name,
+    }).from(projects)
+      .where(eq(projects.status, "active"))
+      .orderBy(desc(projects.updatedAt))
+      .limit(3),
+    // Chart data queries
+    getCompletionsByDay(7),
+    getTaskCreationsByDay(7),
+    getActiveProjectActivityByDay(7),
+    getAgentActivityByHour(),
+    getNotificationsByDay(7),
+  ]);
+
+  // Build project name lookup for priority tasks
+  const projectMap = new Map(allProjects.map((p) => [p.id, p.name]));
+
+  const serializedPriorityTasks: PriorityTask[] = priorityTasks.map((t) => ({
+    id: t.id,
+    title: t.title,
+    status: t.status,
+    priority: t.priority,
+    projectName: t.projectId ? projectMap.get(t.projectId) ?? undefined : undefined,
+  }));
+
+  // Get task titles for log entries
+  const logTaskIds = [...new Set(recentLogs.filter((l) => l.taskId).map((l) => l.taskId!))];
+  const logTasks = logTaskIds.length > 0
+    ? await db.select({ id: tasks.id, title: tasks.title }).from(tasks).where(inArray(tasks.id, logTaskIds))
+    : [];
+  const taskTitleMap = new Map(logTasks.map((t) => [t.id, t.title]));
+
+  const serializedLogs: ActivityEntry[] = recentLogs.map((l) => ({
+    id: l.id,
+    event: l.event,
+    payload: l.payload,
+    timestamp: l.timestamp.toISOString(),
+    taskTitle: l.taskId ? taskTitleMap.get(l.taskId) ?? undefined : undefined,
+  }));
+
+  // Get task counts per project for recent projects
+  const recentProjectData: RecentProject[] = await Promise.all(
+    recentActiveProjects.map(async (p) => {
+      const [total] = await db.select({ count: count() }).from(tasks).where(eq(tasks.projectId, p.id));
+      const [completed] = await db.select({ count: count() }).from(tasks).where(
+        and(eq(tasks.projectId, p.id), eq(tasks.status, "completed"))
+      );
+      return {
+        id: p.id,
+        name: p.name,
+        totalTasks: total.count,
+        completedTasks: completed.count,
+      };
+    })
+  );
+
+  return (
+    <div className="gradient-morning-sky min-h-screen p-4 sm:p-6">
+      <div className="surface-page surface-page-shell mx-auto min-h-[calc(100dvh-2rem)] max-w-7xl rounded-[30px] p-5 sm:p-6 lg:p-7">
+        <Greeting
+          runningCount={runningResult.count}
+          awaitingCount={awaitingResult.count}
+          failedCount={failedResult.count}
+        />
+        <StatsCards
+          runningCount={runningResult.count}
+          completedToday={completedTodayResult.count}
+          completedAllTime={completedAllTimeResult.count}
+          awaitingReview={awaitingResult.count}
+          activeProjects={activeProjectsResult.count}
+          sparklines={{
+            completions: completionsByDay,
+            creations: taskCreationsByDay,
+            projects: projectCreationsByDay,
+            notifications: notificationsByDay,
+          }}
+        />
+        <div className="grid grid-cols-1 gap-6 lg:grid-cols-5 mb-6">
+          <div className="lg:col-span-3">
+            <PriorityQueue tasks={serializedPriorityTasks} />
+          </div>
+          <div className="lg:col-span-2">
+            <ActivityFeed entries={serializedLogs} hourlyActivity={agentActivityByHour} />
+          </div>
+        </div>
+        <QuickActions />
+        <RecentProjects projects={recentProjectData} />
+      </div>
+    </div>
+  );
+}

package/src/app/profiles/[id]/edit/page.tsx

@@ -0,0 +1,39 @@
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import { getProfile, isBuiltin } from "@/lib/agents/profiles/registry";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft } from "lucide-react";
+import { ProfileFormView } from "@/components/profiles/profile-form-view";
+
+export const dynamic = "force-dynamic";
+
+export default async function EditProfilePage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ id: string }>;
+  searchParams: Promise<{ duplicate?: string }>;
+}) {
+  const { id } = await params;
+  const { duplicate } = await searchParams;
+
+  const profile = getProfile(id);
+  if (!profile) notFound();
+
+  // Builtins can't be edited, but can be duplicated
+  if (isBuiltin(id) && duplicate !== "true") notFound();
+
+  return (
+    <div className="gradient-ocean-mist min-h-screen p-6">
+      <div className="max-w-6xl mx-auto">
+        <Link href={duplicate === "true" ? "/profiles" : `/profiles/${id}`}>
+          <Button variant="ghost" size="sm" className="mb-4">
+            <ArrowLeft className="h-4 w-4 mr-1" />
+            {duplicate === "true" ? "Back to Profiles" : "Back to Profile"}
+          </Button>
+        </Link>
+        <ProfileFormView profileId={id} duplicate={duplicate === "true"} />
+      </div>
+    </div>
+  );
+}

package/src/app/profiles/[id]/page.tsx

@@ -0,0 +1,33 @@
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import { getProfile, isBuiltin } from "@/lib/agents/profiles/registry";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft } from "lucide-react";
+import { ProfileDetailView } from "@/components/profiles/profile-detail-view";
+
+export const dynamic = "force-dynamic";
+
+export default async function ProfileDetailPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+
+  const profile = getProfile(id);
+  if (!profile) notFound();
+
+  return (
+    <div className="gradient-ocean-mist min-h-[100dvh] p-4 sm:p-6">
+      <div className="surface-page mx-auto max-w-7xl rounded-[28px] border border-border/60 p-6 shadow-[0_18px_48px_oklch(0.12_0.02_260_/_0.08)]">
+        <Link href="/profiles">
+          <Button variant="ghost" size="sm" className="mb-4">
+            <ArrowLeft className="h-4 w-4 mr-1" />
+            Back to Profiles
+          </Button>
+        </Link>
+        <ProfileDetailView profileId={id} isBuiltin={isBuiltin(id)} initialProfile={profile} />
+      </div>
+    </div>
+  );
+}

package/src/app/profiles/new/page.tsx

@@ -0,0 +1,22 @@
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft } from "lucide-react";
+import { ProfileFormView } from "@/components/profiles/profile-form-view";
+
+export const dynamic = "force-dynamic";
+
+export default async function NewProfilePage() {
+  return (
+    <div className="gradient-ocean-mist min-h-screen p-6">
+      <div className="max-w-6xl mx-auto">
+        <Link href="/profiles">
+          <Button variant="ghost" size="sm" className="mb-4">
+            <ArrowLeft className="h-4 w-4 mr-1" />
+            Back to Profiles
+          </Button>
+        </Link>
+        <ProfileFormView />
+      </div>
+    </div>
+  );
+}

package/src/app/profiles/page.tsx

@@ -0,0 +1,19 @@
+import { listProfiles, isBuiltin } from "@/lib/agents/profiles/registry";
+import { ProfileBrowser } from "@/components/profiles/profile-browser";
+
+export const dynamic = "force-dynamic";
+
+export default async function ProfilesPage() {
+  const profiles = listProfiles().map((p) => ({
+    ...p,
+    isBuiltin: isBuiltin(p.id),
+  }));
+
+  return (
+    <div className="gradient-ocean-mist min-h-[100dvh] p-4 sm:p-6">
+      <div className="surface-page mx-auto max-w-7xl rounded-[28px] border border-border/60 p-6 shadow-[0_18px_48px_oklch(0.12_0.02_260_/_0.08)]">
+        <ProfileBrowser initialProfiles={profiles} />
+      </div>
+    </div>
+  );
+}

package/src/app/projects/[id]/page.tsx

@@ -0,0 +1,134 @@
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import { db } from "@/lib/db";
+import { projects, tasks } from "@/lib/db/schema";
+import { eq, count } from "drizzle-orm";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft } from "lucide-react";
+import { COLUMN_ORDER } from "@/lib/constants/task-status";
+import { ProjectDetailClient } from "@/components/projects/project-detail";
+import { Sparkline } from "@/components/charts/sparkline";
+import { getProjectCompletionTrend } from "@/lib/queries/chart-data";
+
+export const dynamic = "force-dynamic";
+
+export default async function ProjectDetailPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+
+  const [project] = await db
+    .select()
+    .from(projects)
+    .where(eq(projects.id, id));
+
+  if (!project) notFound();
+
+  const projectTasks = await db
+    .select()
+    .from(tasks)
+    .where(eq(tasks.projectId, id))
+    .orderBy(tasks.priority, tasks.createdAt);
+
+  // Status breakdown
+  const statusCounts: Record<string, number> = {};
+  for (const status of COLUMN_ORDER) {
+    statusCounts[status] = projectTasks.filter((t) => t.status === status).length;
+  }
+
+  const completionTrend = await getProjectCompletionTrend(id, 14);
+  const totalTasks = projectTasks.length;
+
+  const serializedTasks = projectTasks.map((t) => ({
+    ...t,
+    createdAt: t.createdAt.toISOString(),
+    updatedAt: t.updatedAt.toISOString(),
+  }));
+
+  const statusVariant: Record<string, "default" | "secondary" | "outline"> = {
+    active: "default",
+    paused: "secondary",
+    completed: "outline",
+  };
+
+  return (
+    <div className="gradient-ocean-mist min-h-screen p-6">
+      <div className="mb-6">
+        <Link href="/projects">
+          <Button variant="ghost" size="sm" className="mb-2">
+            <ArrowLeft className="h-4 w-4 mr-1" />
+            Back to Projects
+          </Button>
+        </Link>
+        <div className="flex items-center gap-3">
+          <h1 className="text-2xl font-bold">{project.name}</h1>
+          <Badge variant={statusVariant[project.status] ?? "secondary"}>
+            {project.status}
+          </Badge>
+        </div>
+        {project.description && (
+          <p className="text-muted-foreground mt-1">{project.description}</p>
+        )}
+      </div>
+
+      {/* Status breakdown */}
+      <div className="grid grid-cols-3 sm:grid-cols-6 gap-3 mb-6">
+        {COLUMN_ORDER.map((status) => (
+          <Card key={status}>
+            <CardHeader className="pb-1 pt-3 px-3">
+              <CardTitle className="text-xs font-medium text-muted-foreground capitalize">
+                {status}
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="px-3 pb-3">
+              <div className="text-xl font-bold">{statusCounts[status]}</div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      {/* Stacked status bar + completion sparkline */}
+      {totalTasks > 0 && (
+        <div className="mb-6 space-y-3">
+          <div className="flex h-1.5 rounded-full overflow-hidden" role="img" aria-label="Task status distribution">
+            {COLUMN_ORDER.map((status) => {
+              const pct = (statusCounts[status] / totalTasks) * 100;
+              if (pct === 0) return null;
+              const statusColors: Record<string, string> = {
+                planned: "var(--muted-foreground)",
+                queued: "var(--chart-4)",
+                running: "var(--chart-1)",
+                completed: "var(--chart-2)",
+                failed: "var(--destructive)",
+              };
+              return (
+                <div
+                  key={status}
+                  style={{ width: `${pct}%`, backgroundColor: statusColors[status] ?? "var(--muted)" }}
+                  title={`${status}: ${statusCounts[status]}`}
+                />
+              );
+            })}
+          </div>
+          <div className="flex items-center gap-3">
+            <span className="text-xs text-muted-foreground shrink-0">14-day completions</span>
+            <Sparkline
+              data={completionTrend}
+              width={200}
+              height={24}
+              color="var(--chart-2)"
+              label="14-day completion trend"
+              className="flex-1"
+            />
+          </div>
+        </div>
+      )}
+
+      <ProjectDetailClient tasks={serializedTasks} projectId={id} />
+    </div>
+  );
+}

package/src/app/projects/loading.tsx

@@ -0,0 +1,17 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function ProjectsLoading() {
+  return (
+    <div className="p-6">
+      <div className="flex items-center justify-between mb-6">
+        <Skeleton className="h-8 w-32" />
+        <Skeleton className="h-10 w-32 rounded-md" />
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <Skeleton key={i} className="h-32 rounded-lg" />
+        ))}
+      </div>
+    </div>
+  );
+}