stagent 0.1.0

package/src/app/projects/page.tsx

@@ -0,0 +1,32 @@
+import { db } from "@/lib/db";
+import { projects, tasks } from "@/lib/db/schema";
+import { eq, count } from "drizzle-orm";
+import { ProjectList } from "@/components/projects/project-list";
+
+export const dynamic = "force-dynamic";
+
+export default async function ProjectsPage() {
+  const result = await db
+    .select({
+      id: projects.id,
+      name: projects.name,
+      description: projects.description,
+      workingDirectory: projects.workingDirectory,
+      status: projects.status,
+      createdAt: projects.createdAt,
+      updatedAt: projects.updatedAt,
+      taskCount: count(tasks.id),
+    })
+    .from(projects)
+    .leftJoin(tasks, eq(tasks.projectId, projects.id))
+    .groupBy(projects.id)
+    .orderBy(projects.createdAt);
+
+  return (
+    <div className="gradient-ocean-mist 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">
+        <ProjectList initialProjects={result} />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,47 @@
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import { db } from "@/lib/db";
+import { schedules } from "@/lib/db/schema";
+import { eq } from "drizzle-orm";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft } from "lucide-react";
+import { ScheduleDetailView } from "@/components/schedules/schedule-detail-view";
+
+export const dynamic = "force-dynamic";
+
+export default async function ScheduleDetailPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+
+  const [schedule] = await db
+    .select()
+    .from(schedules)
+    .where(eq(schedules.id, id));
+
+  if (!schedule) notFound();
+
+  // Serialize Date timestamps and add firing history placeholder for client component
+  const initialSchedule = {
+    ...schedule,
+    createdAt: schedule.createdAt instanceof Date ? schedule.createdAt.toISOString() : String(schedule.createdAt),
+    expiresAt: schedule.expiresAt instanceof Date ? schedule.expiresAt.toISOString() : schedule.expiresAt ? String(schedule.expiresAt) : null,
+    lastFiredAt: schedule.lastFiredAt instanceof Date ? schedule.lastFiredAt.toISOString() : schedule.lastFiredAt ? String(schedule.lastFiredAt) : null,
+    nextFireAt: schedule.nextFireAt instanceof Date ? schedule.nextFireAt.toISOString() : schedule.nextFireAt ? String(schedule.nextFireAt) : null,
+    firingHistory: [] as Array<{ id: string; title: string; status: string; createdAt: string; result: string | null }>,
+  };
+
+  return (
+    <div className="gradient-ocean-mist min-h-screen p-6">
+      <Link href="/schedules">
+        <Button variant="ghost" size="sm" className="mb-4">
+          <ArrowLeft className="h-4 w-4 mr-1" />
+          Back to Schedules
+        </Button>
+      </Link>
+      <ScheduleDetailView scheduleId={id} initialSchedule={initialSchedule} />
+    </div>
+  );
+}

package/src/app/schedules/page.tsx

@@ -0,0 +1,18 @@
+import { db } from "@/lib/db";
+import { projects } from "@/lib/db/schema";
+import { ScheduleList } from "@/components/schedules/schedule-list";
+
+export const dynamic = "force-dynamic";
+
+export default async function SchedulesPage() {
+  const allProjects = await db
+    .select({ id: projects.id, name: projects.name })
+    .from(projects)
+    .orderBy(projects.name);
+
+  return (
+    <div className="gradient-ocean-mist min-h-screen p-6">
+      <ScheduleList projects={allProjects} />
+    </div>
+  );
+}

package/src/app/settings/loading.tsx

@@ -0,0 +1,24 @@
+import { Skeleton } from "@/components/ui/skeleton";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+
+export default function SettingsLoading() {
+  return (
+    <div className="p-6 max-w-2xl space-y-6">
+      <div className="space-y-2">
+        <Skeleton className="h-8 w-32" />
+        <Skeleton className="h-4 w-56" />
+      </div>
+      <Card>
+        <CardHeader>
+          <Skeleton className="h-5 w-40" />
+          <Skeleton className="h-4 w-64" />
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <Skeleton className="h-10 w-full" />
+          <Skeleton className="h-10 w-full" />
+          <Skeleton className="h-8 w-32" />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/app/settings/page.tsx

@@ -0,0 +1,27 @@
+import { AuthConfigSection } from "@/components/settings/auth-config-section";
+import { OpenAIRuntimeSection } from "@/components/settings/openai-runtime-section";
+import { PermissionsSection } from "@/components/settings/permissions-section";
+import { DataManagementSection } from "@/components/settings/data-management-section";
+import { BudgetGuardrailsSection } from "@/components/settings/budget-guardrails-section";
+
+export const dynamic = "force-dynamic";
+
+export default function SettingsPage() {
+  return (
+    <div className="gradient-sunset-glow min-h-screen">
+      <div className="max-w-3xl mx-auto p-6 space-y-6">
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight">Settings</h1>
+          <p className="text-muted-foreground">
+            Manage your Stagent configuration
+          </p>
+        </div>
+        <AuthConfigSection />
+        <OpenAIRuntimeSection />
+        <BudgetGuardrailsSection />
+        <PermissionsSection />
+        <DataManagementSection />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,45 @@
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import { db } from "@/lib/db";
+import { tasks } from "@/lib/db/schema";
+import { eq } from "drizzle-orm";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft } from "lucide-react";
+import { TaskDetailView } from "@/components/tasks/task-detail-view";
+
+export const dynamic = "force-dynamic";
+
+export default async function TaskDetailPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+
+  const [task] = await db
+    .select()
+    .from(tasks)
+    .where(eq(tasks.id, id));
+
+  if (!task) notFound();
+
+  // Serialize Date timestamps to ISO strings for client component
+  const initialTask = {
+    ...task,
+    createdAt: task.createdAt instanceof Date ? task.createdAt.toISOString() : String(task.createdAt),
+    updatedAt: task.updatedAt instanceof Date ? task.updatedAt.toISOString() : String(task.updatedAt),
+    projectName: undefined,
+  };
+
+  return (
+    <div className="gradient-morning-sky min-h-screen p-6">
+      <Link href="/dashboard">
+        <Button variant="ghost" size="sm" className="mb-4">
+          <ArrowLeft className="h-4 w-4 mr-1" />
+          Back to Dashboard
+        </Button>
+      </Link>
+      <TaskDetailView taskId={id} initialTask={initialTask} />
+    </div>
+  );
+}

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

@@ -0,0 +1,27 @@
+import Link from "next/link";
+import { db } from "@/lib/db";
+import { projects } from "@/lib/db/schema";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft } from "lucide-react";
+import { TaskCreatePanel } from "@/components/tasks/task-create-panel";
+
+export const dynamic = "force-dynamic";
+
+export default async function NewTaskPage() {
+  const allProjects = await db
+    .select({ id: projects.id, name: projects.name })
+    .from(projects)
+    .orderBy(projects.name);
+
+  return (
+    <div className="gradient-morning-sky min-h-screen p-6">
+      <Link href="/dashboard">
+        <Button variant="ghost" size="sm" className="mb-4">
+          <ArrowLeft className="h-4 w-4 mr-1" />
+          Back to Dashboard
+        </Button>
+      </Link>
+      <TaskCreatePanel projects={allProjects} />
+    </div>
+  );
+}

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

@@ -0,0 +1,66 @@
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import { db } from "@/lib/db";
+import { projects, workflows } from "@/lib/db/schema";
+import { eq } from "drizzle-orm";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft } from "lucide-react";
+import { WorkflowFormView } from "@/components/workflows/workflow-form-view";
+import { listProfiles } from "@/lib/agents/profiles/registry";
+
+export const dynamic = "force-dynamic";
+
+export default async function EditWorkflowPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ id: string }>;
+  searchParams: Promise<{ clone?: string }>;
+}) {
+  const { id } = await params;
+  const { clone } = await searchParams;
+
+  const [workflow] = await db
+    .select()
+    .from(workflows)
+    .where(eq(workflows.id, id));
+
+  if (!workflow) notFound();
+
+  const allProjects = await db
+    .select({ id: projects.id, name: projects.name })
+    .from(projects)
+    .orderBy(projects.name);
+
+  const profiles = listProfiles().map((p) => ({
+    id: p.id,
+    name: p.name,
+    supportedRuntimes: p.supportedRuntimes,
+  }));
+
+  const workflowData = {
+    id: workflow.id,
+    name: workflow.name,
+    projectId: workflow.projectId,
+    definition: workflow.definition,
+  };
+
+  return (
+    <div className="gradient-ocean-mist min-h-screen p-6">
+      <div className="max-w-6xl mx-auto">
+        <Link href={clone === "true" ? "/workflows" : `/workflows/${id}`}>
+          <Button variant="ghost" size="sm" className="mb-4">
+            <ArrowLeft className="h-4 w-4 mr-1" />
+            {clone === "true" ? "Back to Workflows" : "Back to Workflow"}
+          </Button>
+        </Link>
+        <WorkflowFormView
+          workflow={workflowData}
+          projects={allProjects}
+          profiles={profiles}
+          clone={clone === "true"}
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,37 @@
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import { db } from "@/lib/db";
+import { workflows } from "@/lib/db/schema";
+import { eq } from "drizzle-orm";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft } from "lucide-react";
+import { WorkflowStatusView } from "@/components/workflows/workflow-status-view";
+
+export const dynamic = "force-dynamic";
+
+export default async function WorkflowDetailPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+
+  const [workflow] = await db
+    .select()
+    .from(workflows)
+    .where(eq(workflows.id, id));
+
+  if (!workflow) notFound();
+
+  return (
+    <div className="gradient-ocean-mist min-h-screen p-6">
+      <Link href="/workflows">
+        <Button variant="ghost" size="sm" className="mb-4">
+          <ArrowLeft className="h-4 w-4 mr-1" />
+          Back to Workflows
+        </Button>
+      </Link>
+      <WorkflowStatusView workflowId={id} />
+    </div>
+  );
+}

package/src/app/workflows/blueprints/[id]/page.tsx

@@ -0,0 +1,40 @@
+import Link from "next/link";
+import { db } from "@/lib/db";
+import { projects } from "@/lib/db/schema";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft } from "lucide-react";
+import { BlueprintPreview } from "@/components/workflows/blueprint-preview";
+import { getBlueprint } from "@/lib/workflows/blueprints/registry";
+import { notFound } from "next/navigation";
+
+export const dynamic = "force-dynamic";
+
+interface Props {
+  params: Promise<{ id: string }>;
+}
+
+export default async function BlueprintDetailPage({ params }: Props) {
+  const { id } = await params;
+  const blueprint = getBlueprint(id);
+
+  if (!blueprint) {
+    notFound();
+  }
+
+  const allProjects = await db
+    .select({ id: projects.id, name: projects.name })
+    .from(projects)
+    .orderBy(projects.name);
+
+  return (
+    <div className="gradient-ocean-mist min-h-screen p-6">
+      <Link href="/workflows/blueprints">
+        <Button variant="ghost" size="sm" className="mb-4">
+          <ArrowLeft className="h-4 w-4 mr-1" />
+          Back to Blueprints
+        </Button>
+      </Link>
+      <BlueprintPreview blueprint={blueprint} projects={allProjects} />
+    </div>
+  );
+}

package/src/app/workflows/blueprints/new/page.tsx

@@ -0,0 +1,20 @@
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft } from "lucide-react";
+import { BlueprintEditor } from "@/components/workflows/blueprint-editor";
+
+export const dynamic = "force-dynamic";
+
+export default function NewBlueprintPage() {
+  return (
+    <div className="gradient-ocean-mist min-h-screen p-6">
+      <Link href="/workflows/blueprints">
+        <Button variant="ghost" size="sm" className="mb-4">
+          <ArrowLeft className="h-4 w-4 mr-1" />
+          Back to Blueprints
+        </Button>
+      </Link>
+      <BlueprintEditor />
+    </div>
+  );
+}

package/src/app/workflows/blueprints/page.tsx

@@ -0,0 +1,11 @@
+import { BlueprintGallery } from "@/components/workflows/blueprint-gallery";
+
+export const dynamic = "force-dynamic";
+
+export default function BlueprintsPage() {
+  return (
+    <div className="gradient-ocean-mist min-h-screen p-6">
+      <BlueprintGallery />
+    </div>
+  );
+}

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

@@ -0,0 +1,36 @@
+import Link from "next/link";
+import { db } from "@/lib/db";
+import { projects } from "@/lib/db/schema";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft } from "lucide-react";
+import { WorkflowFormView } from "@/components/workflows/workflow-form-view";
+import { listProfiles } from "@/lib/agents/profiles/registry";
+
+export const dynamic = "force-dynamic";
+
+export default async function NewWorkflowPage() {
+  const allProjects = await db
+    .select({ id: projects.id, name: projects.name })
+    .from(projects)
+    .orderBy(projects.name);
+
+  const profiles = listProfiles().map((p) => ({
+    id: p.id,
+    name: p.name,
+    supportedRuntimes: p.supportedRuntimes,
+  }));
+
+  return (
+    <div className="gradient-ocean-mist min-h-screen p-6">
+      <div className="max-w-6xl mx-auto">
+        <Link href="/workflows">
+          <Button variant="ghost" size="sm" className="mb-4">
+            <ArrowLeft className="h-4 w-4 mr-1" />
+            Back to Workflows
+          </Button>
+        </Link>
+        <WorkflowFormView projects={allProjects} profiles={profiles} />
+      </div>
+    </div>
+  );
+}

package/src/app/workflows/page.tsx

@@ -0,0 +1,18 @@
+import { db } from "@/lib/db";
+import { projects } from "@/lib/db/schema";
+import { WorkflowList } from "@/components/workflows/workflow-list";
+
+export const dynamic = "force-dynamic";
+
+export default async function WorkflowsPage() {
+  const allProjects = await db
+    .select({ id: projects.id, name: projects.name })
+    .from(projects)
+    .orderBy(projects.name);
+
+  return (
+    <div className="gradient-ocean-mist min-h-screen p-6">
+      <WorkflowList projects={allProjects} />
+    </div>
+  );
+}

package/src/components/charts/donut-ring.tsx

@@ -0,0 +1,64 @@
+interface DonutRingProps {
+  value: number; // 0–100
+  size?: number;
+  strokeWidth?: number;
+  color?: string;
+  trackColor?: string;
+  label?: string;
+  className?: string;
+}
+
+export function DonutRing({
+  value,
+  size = 32,
+  strokeWidth = 3,
+  color = "var(--chart-1)",
+  trackColor = "var(--muted)",
+  label,
+  className,
+}: DonutRingProps) {
+  const clamped = Math.max(0, Math.min(100, value));
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const offset = circumference - (clamped / 100) * circumference;
+  const center = size / 2;
+  const ariaLabel = label ?? `${clamped}% complete`;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox={`0 0 ${size} ${size}`}
+      role="img"
+      aria-label={ariaLabel}
+      className={className}
+    >
+      <title>{ariaLabel}</title>
+      {/* Track */}
+      <circle
+        cx={center}
+        cy={center}
+        r={radius}
+        fill="none"
+        stroke={trackColor}
+        strokeWidth={strokeWidth}
+        opacity={0.3}
+      />
+      {/* Progress arc */}
+      {clamped > 0 && (
+        <circle
+          cx={center}
+          cy={center}
+          r={radius}
+          fill="none"
+          stroke={color}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeDasharray={circumference}
+          strokeDashoffset={offset}
+          transform={`rotate(-90 ${center} ${center})`}
+        />
+      )}
+    </svg>
+  );
+}

package/src/components/charts/mini-bar.tsx

@@ -0,0 +1,75 @@
+interface BarDatum {
+  value: number;
+  color?: string;
+  label?: string;
+}
+
+interface MiniBarProps {
+  data: BarDatum[];
+  width?: number;
+  height?: number;
+  gap?: number;
+  defaultColor?: string;
+  label?: string;
+  className?: string;
+}
+
+export function MiniBar({
+  data,
+  width = 200,
+  height = 32,
+  gap = 1,
+  defaultColor = "var(--chart-1)",
+  label = "Bar chart",
+  className,
+}: MiniBarProps) {
+  if (data.length === 0) {
+    return (
+      <svg
+        width={width}
+        height={height}
+        viewBox={`0 0 ${width} ${height}`}
+        role="img"
+        aria-label={label}
+        className={className}
+      >
+        <title>{label}</title>
+      </svg>
+    );
+  }
+
+  const max = Math.max(...data.map((d) => d.value));
+  const barWidth = (width - gap * (data.length - 1)) / data.length;
+  const padding = 2;
+  const chartHeight = height - padding;
+
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox={`0 0 ${width} ${height}`}
+      role="img"
+      aria-label={label}
+      className={className}
+    >
+      <title>{label}</title>
+      {data.map((d, i) => {
+        const barHeight = max > 0 ? (d.value / max) * chartHeight : 0;
+        const x = i * (barWidth + gap);
+        const y = height - barHeight;
+        return (
+          <rect
+            key={i}
+            x={x}
+            y={y}
+            width={barWidth}
+            height={Math.max(barHeight, 1)}
+            rx={1}
+            fill={d.color ?? defaultColor}
+            opacity={barHeight > 0 ? 0.8 : 0.15}
+          />
+        );
+      })}
+    </svg>
+  );
+}