stagent 0.1.0

package/src/components/projects/project-create-dialog.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import { useRef, useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import { Plus, FolderOpen, AlignLeft, FolderCode } from "lucide-react";
+import { toast } from "sonner";
+
+interface ProjectCreateDialogProps {
+  onCreated: () => void;
+}
+
+export function ProjectCreateDialog({ onCreated }: ProjectCreateDialogProps) {
+  const [open, setOpen] = useState(false);
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [workingDirectory, setWorkingDirectory] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!name.trim()) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch("/api/projects", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          name: name.trim(),
+          description: description.trim() || undefined,
+          workingDirectory: workingDirectory.trim() || undefined,
+        }),
+      });
+      if (res.ok) {
+        setName("");
+        setDescription("");
+        setWorkingDirectory("");
+        setOpen(false);
+        toast.success("Project created");
+        onCreated();
+      } else {
+        const data = await res.json().catch(() => null);
+        setError(data?.error ?? `Failed to create project (${res.status})`);
+      }
+    } catch (err) {
+      setError("Network error — could not reach server");
+      console.error("Project creation failed:", err);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button ref={triggerRef}>
+          <Plus className="h-4 w-4 mr-2" />
+          New Project
+        </Button>
+      </DialogTrigger>
+      <DialogContent
+        onCloseAutoFocus={(event) => {
+          event.preventDefault();
+          triggerRef.current?.focus();
+        }}
+      >
+        <DialogHeader>
+          <DialogTitle>Create Project</DialogTitle>
+          <DialogDescription>
+            Create a project workspace with optional context so tasks stay grouped and runnable in the right directory.
+          </DialogDescription>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="name" className="flex items-center gap-1.5">
+              <FolderOpen className="h-3.5 w-3.5 text-muted-foreground" />
+              Name
+            </Label>
+            <Input
+              id="name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Project name"
+              required
+            />
+            <p className="text-xs text-muted-foreground">Short, memorable name</p>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="description" className="flex items-center gap-1.5">
+              <AlignLeft className="h-3.5 w-3.5 text-muted-foreground" />
+              Description
+            </Label>
+            <Textarea
+              id="description"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="Optional description"
+              rows={3}
+            />
+            <p className="text-xs text-muted-foreground">Optional context for agents</p>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="working-dir" className="flex items-center gap-1.5">
+              <FolderCode className="h-3.5 w-3.5 text-muted-foreground" />
+              Working Directory
+            </Label>
+            <Input
+              id="working-dir"
+              value={workingDirectory}
+              onChange={(e) => setWorkingDirectory(e.target.value)}
+              placeholder="/path/to/project (optional)"
+            />
+            <p className="text-xs text-muted-foreground">
+              Agent tasks will execute in this directory. Defaults to the Stagent server directory if empty.
+            </p>
+          </div>
+          {error && (
+            <p className="text-sm text-destructive">{error}</p>
+          )}
+          <Button type="submit" disabled={loading || !name.trim()} className="w-full">
+            {loading ? "Creating..." : "Create Project"}
+          </Button>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/projects/project-detail.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import Link from "next/link";
+import { Badge } from "@/components/ui/badge";
+import { Card } from "@/components/ui/card";
+import { EmptyState } from "@/components/shared/empty-state";
+import { ClipboardList } from "lucide-react";
+import { taskStatusVariant } from "@/lib/constants/status-colors";
+import { SectionHeading } from "@/components/shared/section-heading";
+
+interface Task {
+  id: string;
+  title: string;
+  status: string;
+  priority: number;
+  description: string | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+interface ProjectDetailClientProps {
+  tasks: Task[];
+  projectId: string;
+}
+
+const priorityLabels = ["P0", "P1", "P2", "P3"];
+
+export function ProjectDetailClient({ tasks }: ProjectDetailClientProps) {
+  if (tasks.length === 0) {
+    return (
+      <EmptyState
+        icon={ClipboardList}
+        heading="No tasks yet"
+        description="Create a task and assign it to this project."
+      />
+    );
+  }
+
+  return (
+    <div>
+      <SectionHeading>Tasks ({tasks.length})</SectionHeading>
+      <div className="space-y-2">
+        {tasks.map((task) => (
+          <Link key={task.id} href={`/tasks/${task.id}`}>
+            <Card className="p-3 cursor-pointer transition-colors hover:bg-accent/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-xl">
+              <div className="flex items-center gap-3">
+                <span className="text-xs font-mono text-muted-foreground w-6">
+                  {priorityLabels[task.priority] ?? "P3"}
+                </span>
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium truncate">{task.title}</p>
+                  {task.description && (
+                    <p className="text-xs text-muted-foreground truncate">
+                      {task.description}
+                    </p>
+                  )}
+                </div>
+                <Badge variant={taskStatusVariant[task.status] ?? "secondary"} className="text-xs">
+                  {task.status}
+                </Badge>
+              </div>
+            </Card>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/projects/project-edit-dialog.tsx

@@ -0,0 +1,219 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { FolderOpen, AlignLeft, FolderCode } from "lucide-react";
+import { toast } from "sonner";
+import { ConfirmDialog } from "@/components/shared/confirm-dialog";
+
+interface Project {
+  id: string;
+  name: string;
+  description: string | null;
+  workingDirectory: string | null;
+  status: string;
+}
+
+interface ProjectEditDialogProps {
+  project: Project | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onUpdated: () => void;
+  restoreFocusElement?: HTMLElement | null;
+}
+
+export function ProjectEditDialog({
+  project,
+  open,
+  onOpenChange,
+  onUpdated,
+  restoreFocusElement,
+}: ProjectEditDialogProps) {
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [workingDirectory, setWorkingDirectory] = useState("");
+  const [status, setStatus] = useState("active");
+  const [loading, setLoading] = useState(false);
+  const [confirmDelete, setConfirmDelete] = useState(false);
+
+  useEffect(() => {
+    if (project) {
+      setName(project.name);
+      setDescription(project.description ?? "");
+      setWorkingDirectory(project.workingDirectory ?? "");
+      setStatus(project.status);
+    }
+  }, [project]);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!project || !name.trim()) return;
+    setLoading(true);
+    try {
+      const res = await fetch(`/api/projects/${project.id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          name: name.trim(),
+          description: description.trim() || undefined,
+          workingDirectory: workingDirectory.trim() || undefined,
+          status,
+        }),
+      });
+      if (res.ok) {
+        toast.success("Project saved");
+        onOpenChange(false);
+        onUpdated();
+      } else {
+        toast.error("Failed to save project");
+      }
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleDelete() {
+    if (!project) return;
+    setLoading(true);
+    try {
+      await fetch(`/api/projects/${project.id}`, { method: "DELETE" });
+      toast.success("Project deleted");
+      onOpenChange(false);
+      onUpdated();
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <>
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent
+          onCloseAutoFocus={(event) => {
+            if (!restoreFocusElement) return;
+            event.preventDefault();
+            restoreFocusElement.focus();
+          }}
+        >
+          <DialogHeader>
+            <DialogTitle>Edit Project</DialogTitle>
+            <DialogDescription>
+              Update the project name, status, and execution context without changing its associated tasks.
+            </DialogDescription>
+          </DialogHeader>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="edit-name" className="flex items-center gap-1.5">
+                <FolderOpen className="h-3.5 w-3.5 text-muted-foreground" />
+                Name
+              </Label>
+              <Input
+                id="edit-name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                required
+              />
+              <p className="text-xs text-muted-foreground">Short, memorable name</p>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="edit-description" className="flex items-center gap-1.5">
+                <AlignLeft className="h-3.5 w-3.5 text-muted-foreground" />
+                Description
+              </Label>
+              <Textarea
+                id="edit-description"
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                rows={3}
+              />
+              <p className="text-xs text-muted-foreground">Optional context for agents</p>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="edit-working-dir" className="flex items-center gap-1.5">
+                <FolderCode className="h-3.5 w-3.5 text-muted-foreground" />
+                Working Directory
+              </Label>
+              <Input
+                id="edit-working-dir"
+                value={workingDirectory}
+                onChange={(e) => setWorkingDirectory(e.target.value)}
+                placeholder="/path/to/project (optional)"
+              />
+              <p className="text-xs text-muted-foreground">
+                Agent tasks will execute in this directory.
+              </p>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="edit-status">Status</Label>
+              <Select value={status} onValueChange={setStatus}>
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="active">
+                    <span className="flex items-center gap-1.5">
+                      <span className="h-2 w-2 rounded-full bg-[var(--status-completed)] inline-block" />
+                      Active
+                    </span>
+                  </SelectItem>
+                  <SelectItem value="paused">
+                    <span className="flex items-center gap-1.5">
+                      <span className="h-2 w-2 rounded-full bg-[var(--status-warning)] inline-block" />
+                      Paused
+                    </span>
+                  </SelectItem>
+                  <SelectItem value="completed">
+                    <span className="flex items-center gap-1.5">
+                      <span className="h-2 w-2 rounded-full bg-[var(--status-running)] inline-block" />
+                      Completed
+                    </span>
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+              <p className="text-xs text-muted-foreground">Paused projects won&apos;t accept task executions</p>
+            </div>
+            <div className="flex gap-2">
+              <Button type="submit" disabled={loading || !name.trim()} className="flex-1">
+                {loading ? "Saving..." : "Save"}
+              </Button>
+              <Button
+                type="button"
+                variant="destructive"
+                onClick={() => setConfirmDelete(true)}
+                disabled={loading}
+              >
+                Delete
+              </Button>
+            </div>
+          </form>
+        </DialogContent>
+      </Dialog>
+      <ConfirmDialog
+        open={confirmDelete}
+        onOpenChange={setConfirmDelete}
+        title="Delete project?"
+        description="This will permanently delete the project. Tasks associated with it will not be deleted."
+        confirmLabel="Delete Project"
+        destructive
+        onConfirm={handleDelete}
+      />
+    </>
+  );
+}

package/src/components/projects/project-list.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { useState, useCallback, useRef } from "react";
+import { FolderKanban } from "lucide-react";
+import { ProjectCard } from "./project-card";
+import { ProjectCreateDialog } from "./project-create-dialog";
+import { ProjectEditDialog } from "./project-edit-dialog";
+import { EmptyState } from "@/components/shared/empty-state";
+import { SectionHeading } from "@/components/shared/section-heading";
+
+interface Project {
+  id: string;
+  name: string;
+  description: string | null;
+  workingDirectory: string | null;
+  status: string;
+  taskCount: number;
+}
+
+export function ProjectList({ initialProjects }: { initialProjects: Project[] }) {
+  const [projects, setProjects] = useState<Project[]>(initialProjects);
+  const [editProject, setEditProject] = useState<Project | null>(null);
+  const [editOpen, setEditOpen] = useState(false);
+  const restoreFocusRef = useRef<HTMLElement | null>(null);
+  const activeProjects = projects.filter((project) => project.status === "active").length;
+  const totalTasks = projects.reduce((sum, project) => sum + project.taskCount, 0);
+
+  const refresh = useCallback(async () => {
+    const res = await fetch("/api/projects");
+    if (res.ok) setProjects(await res.json());
+  }, []);
+
+  function handleEdit(id: string, trigger: HTMLElement | null) {
+    const project = projects.find((p) => p.id === id);
+    if (project) {
+      restoreFocusRef.current = trigger;
+      setEditProject(project);
+      setEditOpen(true);
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+        <div className="space-y-1">
+          <h1 className="text-2xl font-bold">Projects</h1>
+          <p className="max-w-2xl text-sm text-muted-foreground">
+            Keep agent work anchored to durable project spaces so tasks, files, and follow-up flows stay legible.
+          </p>
+        </div>
+        <ProjectCreateDialog onCreated={refresh} />
+      </div>
+
+      <div className="grid gap-3 md:grid-cols-3">
+        <div className="surface-control rounded-2xl p-4">
+          <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
+            Total Projects
+          </p>
+          <p className="mt-3 text-3xl font-semibold">{projects.length}</p>
+        </div>
+        <div className="surface-control rounded-2xl p-4">
+          <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
+            Active
+          </p>
+          <p className="mt-3 text-3xl font-semibold">{activeProjects}</p>
+        </div>
+        <div className="surface-control rounded-2xl p-4">
+          <p className="text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
+            Linked Tasks
+          </p>
+          <p className="mt-3 text-3xl font-semibold">{totalTasks}</p>
+        </div>
+      </div>
+
+      <section className="surface-panel rounded-[24px] p-4 sm:p-5">
+        <div className="mb-4 flex items-baseline justify-between gap-3">
+          <SectionHeading className="mb-0">All Projects</SectionHeading>
+          <p className="text-xs text-muted-foreground">{projects.length} visible</p>
+        </div>
+        {projects.length === 0 ? (
+          <EmptyState
+            icon={FolderKanban}
+            heading="No projects yet"
+            description="Create your first project to organize your tasks."
+          />
+        ) : (
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
+            {projects.map((project) => (
+              <ProjectCard
+                key={project.id}
+                project={project}
+                onEdit={handleEdit}
+              />
+            ))}
+          </div>
+        )}
+      </section>
+
+      <ProjectEditDialog
+        project={editProject}
+        open={editOpen}
+        onOpenChange={setEditOpen}
+        onUpdated={refresh}
+        restoreFocusElement={restoreFocusRef.current}
+      />
+    </div>
+  );
+}