stagent 0.1.0

package/src/components/tasks/task-attachments.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { FileText, Download, Trash2, Image, FileCode, File } from "lucide-react";
+import { toast } from "sonner";
+import type { DocumentRow } from "@/lib/db/schema";
+
+interface TaskAttachmentsProps {
+  documents: DocumentRow[];
+  title?: string;
+  onDeleted?: () => void;
+}
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function getFileIcon(mimeType: string) {
+  if (mimeType.startsWith("image/")) return Image;
+  if (
+    mimeType.includes("javascript") ||
+    mimeType.includes("typescript") ||
+    mimeType.includes("python") ||
+    mimeType.includes("json")
+  )
+    return FileCode;
+  if (mimeType.startsWith("text/")) return FileText;
+  return File;
+}
+
+export function TaskAttachments({
+  documents,
+  title = "Attachments",
+  onDeleted,
+}: TaskAttachmentsProps) {
+  const [deleting, setDeleting] = useState<string | null>(null);
+
+  async function handleDelete(docId: string) {
+    setDeleting(docId);
+    try {
+      const res = await fetch(`/api/documents/${docId}`, { method: "DELETE" });
+      if (res.ok) {
+        toast.success("Document removed");
+        onDeleted?.();
+      } else {
+        toast.error("Failed to remove document");
+      }
+    } catch {
+      toast.error("Network error");
+    } finally {
+      setDeleting(null);
+    }
+  }
+
+  if (documents.length === 0) return null;
+
+  return (
+    <div>
+      <h4 className="text-sm font-medium mb-2">{title}</h4>
+      <div className="space-y-1.5">
+        {documents.map((doc) => {
+          const Icon = getFileIcon(doc.mimeType);
+          return (
+            <div
+              key={doc.id}
+              className="flex items-center gap-2 text-sm group"
+            >
+              <Icon className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+              <span className="flex-1 truncate">{doc.originalName}</span>
+              {doc.direction === "output" && (
+                <span className="rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
+                  v{doc.version}
+                </span>
+              )}
+              <span className="text-xs text-muted-foreground">
+                {formatSize(doc.size)}
+              </span>
+              <a
+                href={`/api/documents/${doc.id}/file`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="opacity-0 group-hover:opacity-100 transition-opacity"
+              >
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="h-6 w-6"
+                  aria-label={`Download ${doc.originalName}`}
+                >
+                  <Download className="h-3 w-3" />
+                </Button>
+              </a>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity"
+                onClick={() => handleDelete(doc.id)}
+                disabled={deleting === doc.id}
+                aria-label={`Delete ${doc.originalName}`}
+              >
+                <Trash2 className="h-3 w-3" />
+              </Button>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/components/tasks/task-card.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Card } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { AlertCircle, Bot, ArrowUp, ArrowDown, Minus } from "lucide-react";
+import type { TaskStatus } from "@/lib/constants/task-status";
+
+export interface TaskItem {
+  id: string;
+  title: string;
+  description: string | null;
+  status: string;
+  priority: number;
+  assignedAgent: string | null;
+  agentProfile: string | null;
+  projectId: string | null;
+  projectName?: string;
+  result: string | null;
+  sessionId: string | null;
+  resumeCount: number;
+  createdAt: string;
+  updatedAt: string;
+}
+
+const priorityConfig: Record<number, { color: string; label: string; Icon: typeof ArrowUp }> = {
+  0: { color: "text-destructive", label: "Critical", Icon: ArrowUp },
+  1: { color: "text-chart-5", label: "High", Icon: ArrowUp },
+  2: { color: "text-primary", label: "Medium", Icon: Minus },
+  3: { color: "text-muted-foreground", label: "Low", Icon: ArrowDown },
+};
+
+export function TaskCard({
+  task,
+  onClick,
+}: {
+  task: TaskItem;
+  onClick: (task: TaskItem) => void;
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } =
+    useSortable({ id: task.id, data: { status: task.status } });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  const isFailed = task.status === "failed";
+  const isRunning = task.status === "running";
+  const priority = priorityConfig[task.priority] ?? priorityConfig[3];
+
+  return (
+    <Card
+      ref={setNodeRef}
+      style={style}
+      {...attributes}
+      {...listeners}
+      role="button"
+      aria-label={`${task.title}, ${priority.label} priority, ${task.status}`}
+      className={`surface-card p-3 cursor-grab active:cursor-grabbing transition-shadow hover:shadow-md ${
+        isDragging ? "opacity-50 shadow-lg" : ""
+      } ${isFailed ? "border-l-4 border-l-destructive" : ""}`}
+      onClick={() => onClick(task)}
+    >
+      <div className="flex items-start gap-2">
+        <priority.Icon
+          className={`mt-1 h-3.5 w-3.5 shrink-0 ${priority.color}`}
+          aria-label={`${priority.label} priority`}
+        />
+        <div className="min-w-0 flex-1">
+          <p className="text-sm font-medium line-clamp-2">{task.title}</p>
+          {task.projectName && (
+            <p className="text-xs text-muted-foreground mt-0.5 truncate">{task.projectName}</p>
+          )}
+          <div className="flex items-center gap-2 mt-2">
+            {task.agentProfile && (
+              <Badge variant="outline" className="text-xs gap-1">
+                <Bot className="h-3 w-3" aria-hidden="true" />
+                {task.agentProfile}
+              </Badge>
+            )}
+            {task.assignedAgent && (
+              <Badge variant="secondary" className="text-xs gap-1">
+                <Bot className="h-3 w-3" aria-hidden="true" />
+                {task.assignedAgent}
+              </Badge>
+            )}
+            {isFailed && <AlertCircle className="h-3.5 w-3.5 text-destructive" aria-label="Task failed" />}
+            {isRunning && (
+              <span className="flex h-2 w-2" aria-label="Task running">
+                <span className="animate-ping absolute h-2 w-2 rounded-full bg-primary/60 opacity-75" />
+                <span className="relative rounded-full h-2 w-2 bg-primary" />
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+}

package/src/components/tasks/task-create-panel.tsx

@@ -0,0 +1,360 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+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 { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Bot, FileText, Settings, Paperclip } from "lucide-react";
+import { toast } from "sonner";
+import { AIAssistPanel } from "./ai-assist-panel";
+import { FileUpload } from "./file-upload";
+import { FormSectionCard } from "@/components/shared/form-section-card";
+import {
+  type AgentRuntimeId,
+  DEFAULT_AGENT_RUNTIME,
+  listRuntimeCatalog,
+} from "@/lib/agents/runtime/catalog";
+import {
+  getSupportedRuntimes,
+  profileSupportsRuntime,
+} from "@/lib/agents/profiles/compatibility";
+import type { AgentProfile } from "@/lib/agents/profiles/types";
+
+type ProfileOption = Pick<
+  AgentProfile,
+  "id" | "name" | "description" | "supportedRuntimes"
+>;
+
+interface UploadedFile {
+  id: string;
+  filename: string;
+  originalName: string;
+  size: number;
+  type: string;
+}
+
+interface TaskCreatePanelProps {
+  projects: { id: string; name: string }[];
+}
+
+const PRIORITY_COLORS: Record<string, string> = {
+  "0": "bg-[var(--priority-critical)]",
+  "1": "bg-[var(--priority-high)]",
+  "2": "bg-[var(--priority-medium)]",
+  "3": "bg-[var(--priority-low)]",
+};
+
+export function TaskCreatePanel({ projects }: TaskCreatePanelProps) {
+  const runtimeOptions = listRuntimeCatalog();
+  const runtimeLabelMap = new Map(
+    runtimeOptions.map((runtime) => [runtime.id, runtime.label])
+  );
+  const router = useRouter();
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [projectId, setProjectId] = useState<string>("");
+  const [assignedAgent, setAssignedAgent] = useState<string>("");
+  const [priority, setPriority] = useState("2");
+  const [agentProfile, setAgentProfile] = useState<string>("");
+  const [profiles, setProfiles] = useState<ProfileOption[]>([]);
+  const [uploads, setUploads] = useState<UploadedFile[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetch("/api/profiles")
+      .then((r) => r.json())
+      .then((data: ProfileOption[]) => setProfiles(data))
+      .catch(() => {});
+  }, []);
+
+  const selectedRuntimeId = (assignedAgent ||
+    DEFAULT_AGENT_RUNTIME) as AgentRuntimeId;
+  const selectedProfile = profiles.find((profile) => profile.id === agentProfile);
+  const profileCompatibilityError =
+    selectedProfile && !profileSupportsRuntime(selectedProfile, selectedRuntimeId)
+      ? `${selectedProfile.name} does not support ${
+          runtimeLabelMap.get(selectedRuntimeId) ?? selectedRuntimeId
+        }`
+      : null;
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!title.trim()) return;
+    if (profileCompatibilityError) {
+      setError(profileCompatibilityError);
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch("/api/tasks", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          title: title.trim(),
+          description: description.trim() || undefined,
+          projectId: projectId || undefined,
+          priority: parseInt(priority, 10),
+          assignedAgent: assignedAgent || undefined,
+          agentProfile: agentProfile || undefined,
+          fileIds: uploads.length > 0 ? uploads.map((f) => f.id) : undefined,
+        }),
+      });
+      if (res.ok) {
+        toast.success("Task created");
+        router.push("/dashboard");
+      } else {
+        const data = await res.json().catch(() => null);
+        setError(data?.error ?? `Failed to create task (${res.status})`);
+      }
+    } catch (err) {
+      setError("Network error — could not reach server");
+      console.error("Task creation failed:", err);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-lg">Create Task</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="space-y-4">
+              <FormSectionCard icon={FileText} title="Task Details">
+                <div className="space-y-3">
+                  <div className="space-y-1.5">
+                    <Label htmlFor="task-title">Title</Label>
+                    <Input
+                      id="task-title"
+                      value={title}
+                      onChange={(e) => setTitle(e.target.value)}
+                      placeholder="What needs to be done?"
+                      required
+                    />
+                    <p className="text-xs text-muted-foreground">Concise task summary</p>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label htmlFor="task-desc">Description</Label>
+                    <Textarea
+                      id="task-desc"
+                      value={description}
+                      onChange={(e) => setDescription(e.target.value)}
+                      placeholder="Detailed instructions for the agent"
+                      rows={3}
+                    />
+                    <p className="text-xs text-muted-foreground">Detailed agent instructions</p>
+                  </div>
+                </div>
+              </FormSectionCard>
+
+              <FormSectionCard icon={Settings} title="Configuration">
+                <div className="space-y-3">
+                  <div className="grid grid-cols-2 gap-3">
+                    <div className="space-y-1.5">
+                      <Label>Project</Label>
+                      <Select
+                        value={projectId || "none"}
+                        onValueChange={(value) =>
+                          setProjectId(value === "none" ? "" : value)
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="None" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="none">None</SelectItem>
+                          {projects.map((p) => (
+                            <SelectItem key={p.id} value={p.id}>
+                              {p.name}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                      <p className="text-xs text-muted-foreground">Working directory</p>
+                    </div>
+                    <div className="space-y-1.5">
+                      <Label>Priority</Label>
+                      <Select value={priority} onValueChange={setPriority}>
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {[
+                            { value: "0", label: "P0 - Critical" },
+                            { value: "1", label: "P1 - High" },
+                            { value: "2", label: "P2 - Medium" },
+                            { value: "3", label: "P3 - Low" },
+                          ].map((p) => (
+                            <SelectItem key={p.value} value={p.value}>
+                              <span className="flex items-center gap-1.5">
+                                <span className={`h-2 w-2 rounded-full ${PRIORITY_COLORS[p.value]} inline-block`} />
+                                {p.label}
+                              </span>
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label className="flex items-center gap-1.5">
+                      <Bot className="h-3.5 w-3.5 text-muted-foreground" />
+                      Runtime
+                    </Label>
+                    <Select
+                      value={assignedAgent || "default"}
+                      onValueChange={(value) =>
+                        setAssignedAgent(value === "default" ? "" : value)
+                      }
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Default runtime" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="default">Default runtime</SelectItem>
+                        {runtimeOptions.map((runtime) => (
+                          <SelectItem key={runtime.id} value={runtime.id}>
+                            {runtime.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <p className="text-xs text-muted-foreground">
+                      Which provider runtime should execute this task
+                    </p>
+                  </div>
+                  {profiles.length > 0 && (
+                    <div className="space-y-1.5">
+                      <Label className="flex items-center gap-1.5">
+                        <Bot className="h-3.5 w-3.5 text-muted-foreground" />
+                        Agent Profile
+                      </Label>
+                      <Select
+                        value={agentProfile || "auto"}
+                        onValueChange={(value) =>
+                          setAgentProfile(value === "auto" ? "" : value)
+                        }
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="Auto-detect" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="auto">Auto-detect</SelectItem>
+                          {profiles.map((p) => (
+                            <SelectItem
+                              key={p.id}
+                              value={p.id}
+                              disabled={!profileSupportsRuntime(p, selectedRuntimeId)}
+                            >
+                              <span className="flex items-center gap-1.5">
+                                <Bot className="h-3 w-3" />
+                                {p.name}
+                              </span>
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                      <p className="text-xs text-muted-foreground">
+                        Auto-detect only considers profiles compatible with the selected runtime
+                      </p>
+                      {selectedProfile && (
+                        <p
+                          className={`text-xs ${
+                            profileCompatibilityError
+                              ? "text-destructive"
+                              : "text-muted-foreground"
+                          }`}
+                        >
+                          {profileCompatibilityError ??
+                            `Supports ${getSupportedRuntimes(selectedProfile)
+                              .map(
+                                (runtimeId) =>
+                                  runtimeLabelMap.get(runtimeId) ?? runtimeId
+                              )
+                              .join(", ")}`}
+                        </p>
+                      )}
+                    </div>
+                  )}
+                </div>
+              </FormSectionCard>
+
+              <FormSectionCard icon={Paperclip} title="Attachments">
+                <FileUpload
+                  uploads={uploads}
+                  onUploaded={(f) => setUploads((prev) => [...prev, f])}
+                  onRemove={(id) => setUploads((prev) => prev.filter((f) => f.id !== id))}
+                />
+              </FormSectionCard>
+
+              {error && (
+                <p className="text-sm text-destructive">{error}</p>
+              )}
+              <Button type="submit" disabled={loading || !title.trim()} className="w-full">
+                {loading ? "Creating..." : "Create Task"}
+              </Button>
+            </div>
+            <div className="glass-card-light rounded-lg">
+              <AIAssistPanel
+                title={title}
+                description={description}
+                assignedAgent={assignedAgent || undefined}
+                onApplyDescription={(d) => setDescription(d)}
+                onCreateSubtasks={async (subtasks) => {
+                  let created = 0;
+                  const failures: string[] = [];
+                  for (const sub of subtasks) {
+                    toast.info(`Creating sub-task ${created + 1}/${subtasks.length}...`);
+                    try {
+                      const res = await fetch("/api/tasks", {
+                        method: "POST",
+                        headers: { "Content-Type": "application/json" },
+                        body: JSON.stringify({
+                          title: sub.title,
+                          description: sub.description,
+                          projectId: projectId || undefined,
+                          priority: parseInt(priority, 10),
+                          assignedAgent: assignedAgent || undefined,
+                          agentProfile: agentProfile || undefined,
+                        }),
+                      });
+                      if (res.ok) {
+                        created++;
+                      } else {
+                        failures.push(sub.title);
+                      }
+                    } catch {
+                      failures.push(sub.title);
+                    }
+                  }
+                  if (failures.length > 0) {
+                    toast.error(`Failed to create ${failures.length} sub-task(s): ${failures.join(", ")}`);
+                  }
+                  if (created > 0) {
+                    toast.success(`Created ${created} sub-task(s)`);
+                  }
+                  router.push("/dashboard");
+                }}
+              />
+            </div>
+          </div>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}