stagent 0.1.0

package/src/components/tasks/content-preview.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { useState } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Copy, Download, Maximize2, Minimize2 } from "lucide-react";
+import { toast } from "sonner";
+
+interface ContentPreviewProps {
+  content: string;
+  contentType: "text" | "markdown" | "code" | "json" | "unknown";
+}
+
+export function ContentPreview({ content, contentType }: ContentPreviewProps) {
+  const [expanded, setExpanded] = useState(false);
+
+  if (!content) return null;
+
+  function copyToClipboard() {
+    navigator.clipboard.writeText(content);
+    toast.success("Copied to clipboard");
+  }
+
+  function downloadAsFile() {
+    const ext = contentType === "json" ? "json" : contentType === "code" ? "txt" : contentType === "markdown" ? "md" : "txt";
+    const blob = new Blob([content], { type: "text/plain" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `output.${ext}`;
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+
+  // M4: Safe JSON formatting
+  function formatJson(raw: string): string {
+    try {
+      return JSON.stringify(JSON.parse(raw), null, 2);
+    } catch {
+      return raw;
+    }
+  }
+
+  const heightClass = expanded ? "" : "max-h-80";
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-sm font-medium text-muted-foreground">
+            Output ({contentType})
+          </CardTitle>
+          <div className="flex gap-1">
+            <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => setExpanded(!expanded)} aria-label={expanded ? "Collapse output" : "Expand output"}>
+              {expanded ? <Minimize2 className="h-3 w-3" /> : <Maximize2 className="h-3 w-3" />}
+            </Button>
+            <Button variant="ghost" size="icon" className="h-7 w-7" onClick={copyToClipboard} aria-label="Copy to clipboard">
+              <Copy className="h-3 w-3" />
+            </Button>
+            <Button variant="ghost" size="icon" className="h-7 w-7" onClick={downloadAsFile} aria-label="Download as file">
+              <Download className="h-3 w-3" />
+            </Button>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        {contentType === "json" ? (
+          <pre className={`text-xs font-mono bg-muted p-3 rounded overflow-auto ${heightClass}`}>
+            {formatJson(content)}
+          </pre>
+        ) : contentType === "code" ? (
+          <pre className={`text-xs font-mono bg-muted p-3 rounded overflow-auto ${heightClass}`}>
+            {content}
+          </pre>
+        ) : contentType === "markdown" ? (
+          <div className={`prose prose-sm dark:prose-invert max-w-none overflow-auto ${heightClass}`}>
+            <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
+          </div>
+        ) : (
+          <p className={`text-sm whitespace-pre-wrap overflow-auto ${heightClass}`}>
+            {content}
+          </p>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/tasks/empty-board.tsx

@@ -0,0 +1,12 @@
+import { ClipboardList } from "lucide-react";
+import { EmptyState } from "@/components/shared/empty-state";
+
+export function EmptyBoard() {
+  return (
+    <EmptyState
+      icon={ClipboardList}
+      heading="No tasks yet"
+      description="Create your first task to get started with the kanban board."
+    />
+  );
+}

package/src/components/tasks/file-upload.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { useState, useRef } from "react";
+import { Button } from "@/components/ui/button";
+import { Upload, X, FileText, Image, FileCode } from "lucide-react";
+
+interface UploadedFile {
+  id: string;
+  filename: string;
+  originalName: string;
+  size: number;
+  type: string;
+}
+
+interface FileUploadProps {
+  onUploaded: (file: UploadedFile) => void;
+  uploads: UploadedFile[];
+  onRemove: (id: string) => 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(type: string) {
+  if (type.startsWith("image/")) return Image;
+  if (type.includes("pdf") || type.includes("document") || type.includes("text")) return FileText;
+  if (type.includes("javascript") || type.includes("typescript") || type.includes("json") || type.includes("xml")) return FileCode;
+  return FileText;
+}
+
+export function FileUpload({ onUploaded, uploads, onRemove }: FileUploadProps) {
+  const [uploading, setUploading] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  async function handleFile(file: File) {
+    setUploading(true);
+    try {
+      const formData = new FormData();
+      formData.append("file", file);
+
+      const res = await fetch("/api/uploads", {
+        method: "POST",
+        body: formData,
+      });
+
+      if (res.ok) {
+        const data = await res.json();
+        onUploaded(data);
+      }
+    } finally {
+      setUploading(false);
+    }
+  }
+
+  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (file) handleFile(file);
+    e.target.value = "";
+  }
+
+  function handleDrop(e: React.DragEvent) {
+    e.preventDefault();
+    const file = e.dataTransfer.files?.[0];
+    if (file) handleFile(file);
+  }
+
+  return (
+    <div className="space-y-2">
+      <div
+        role="button"
+        tabIndex={0}
+        aria-label="Upload a file — click or drag and drop"
+        className="border-2 border-dashed rounded-lg p-4 text-center cursor-pointer hover:bg-accent/50 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        onClick={() => inputRef.current?.click()}
+        onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); inputRef.current?.click(); } }}
+        onDrop={handleDrop}
+        onDragOver={(e) => e.preventDefault()}
+      >
+        <Upload className="h-5 w-5 mx-auto text-muted-foreground mb-1" />
+        <p className="text-xs text-muted-foreground">
+          {uploading ? "Uploading..." : "Click or drop a file"}
+        </p>
+        <p className="text-xs text-muted-foreground mt-0.5">Max 50MB per file</p>
+        <input
+          ref={inputRef}
+          type="file"
+          className="hidden"
+          onChange={handleChange}
+        />
+      </div>
+      {uploads.length > 0 && (
+        <div className="space-y-1">
+          {uploads.map((f) => {
+            const Icon = getFileIcon(f.type);
+            return (
+            <div key={f.id} className="flex items-center gap-2 text-sm">
+              <Icon className="h-3 w-3 text-muted-foreground" />
+              <span className="flex-1 truncate">{f.originalName}</span>
+              <span className="text-xs text-muted-foreground">{formatSize(f.size)}</span>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="h-5 w-5"
+                onClick={() => onRemove(f.id)}
+                aria-label={`Remove ${f.originalName}`}
+              >
+                <X className="h-3 w-3" />
+              </Button>
+            </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/tasks/kanban-board.tsx

@@ -0,0 +1,275 @@
+"use client";
+
+import { useId, useState, useCallback, useRef, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import {
+  DndContext,
+  DragEndEvent,
+  DragOverlay,
+  DragStartEvent,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import { sortableKeyboardCoordinates } from "@dnd-kit/sortable";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Button } from "@/components/ui/button";
+import { ChevronLeft, ChevronRight, Plus } from "lucide-react";
+import { KanbanColumn } from "./kanban-column";
+import { TaskCard, type TaskItem } from "./task-card";
+import { EmptyBoard } from "./empty-board";
+import { COLUMN_ORDER, isValidDragTransition, type TaskStatus } from "@/lib/constants/task-status";
+
+interface KanbanBoardProps {
+  initialTasks: TaskItem[];
+  projects: { id: string; name: string }[];
+}
+
+export function KanbanBoard({ initialTasks, projects }: KanbanBoardProps) {
+  const dndId = useId();
+  const router = useRouter();
+  const [tasks, setTasks] = useState<TaskItem[]>(initialTasks);
+  const [activeTask, setActiveTask] = useState<TaskItem | null>(null);
+  const [projectFilter, setProjectFilter] = useState("all");
+  const [statusFilter, setStatusFilter] = useState("all");
+  const [announcement, setAnnouncement] = useState(
+    `Showing ${initialTasks.length} task${initialTasks.length === 1 ? "" : "s"} on the kanban board.`
+  );
+  const hasAnnouncedFilters = useRef(false);
+
+  // I5: Scroll indicators
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+
+  const updateScrollIndicators = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    setCanScrollLeft(el.scrollLeft > 0);
+    setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
+  }, []);
+
+  useEffect(() => {
+    updateScrollIndicators();
+    const el = scrollRef.current;
+    if (!el) return;
+    const observer = new ResizeObserver(updateScrollIndicators);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [updateScrollIndicators, tasks]);
+
+  // Filter tasks by project and status
+  const filteredTasks = tasks.filter((t) => {
+    if (projectFilter !== "all" && t.projectId !== projectFilter) return false;
+    if (statusFilter !== "all" && t.status !== statusFilter) return false;
+    return true;
+  });
+
+  useEffect(() => {
+    if (!hasAnnouncedFilters.current) {
+      hasAnnouncedFilters.current = true;
+      return;
+    }
+
+    const projectName =
+      projectFilter === "all"
+        ? "all projects"
+        : projects.find((project) => project.id === projectFilter)?.name ?? "the selected project";
+    const statusName = statusFilter === "all" ? "all statuses" : statusFilter;
+    setAnnouncement(
+      `Showing ${filteredTasks.length} task${filteredTasks.length === 1 ? "" : "s"} for ${projectName} with ${statusName}.`
+    );
+  }, [filteredTasks.length, projectFilter, projects, statusFilter]);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
+
+  const refresh = useCallback(async () => {
+    const res = await fetch("/api/tasks");
+    if (res.ok) setTasks(await res.json());
+  }, []);
+
+  function handleDragStart(event: DragStartEvent) {
+    const task = tasks.find((t) => t.id === event.active.id);
+    setActiveTask(task ?? null);
+  }
+
+  async function handleDragEnd(event: DragEndEvent) {
+    setActiveTask(null);
+    const { active, over } = event;
+    if (!over) return;
+
+    const task = tasks.find((t) => t.id === active.id);
+    if (!task) return;
+
+    const targetStatus = over.id as TaskStatus;
+    if (task.status === targetStatus) return;
+
+    if (!isValidDragTransition(task.status as TaskStatus, targetStatus)) {
+      setAnnouncement(`Cannot move ${task.title} from ${task.status} to ${targetStatus}.`);
+      return;
+    }
+
+    // Optimistic update
+    const prevTasks = [...tasks];
+    setTasks((prev) =>
+      prev.map((t) => (t.id === task.id ? { ...t, status: targetStatus } : t))
+    );
+    setAnnouncement(`Moved ${task.title} to ${targetStatus}.`);
+
+    try {
+      const res = await fetch(`/api/tasks/${task.id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ status: targetStatus }),
+      });
+      if (!res.ok) {
+        setTasks(prevTasks);
+        setAnnouncement(`Move failed. ${task.title} returned to ${task.status}.`);
+      }
+    } catch {
+      setTasks(prevTasks);
+      setAnnouncement(`Move failed. ${task.title} returned to ${task.status}.`);
+    }
+  }
+
+  function handleTaskClick(task: TaskItem) {
+    router.push(`/tasks/${task.id}`);
+  }
+
+  const groupedTasks = COLUMN_ORDER.reduce(
+    (acc, status) => {
+      acc[status] = filteredTasks.filter((t) => t.status === status);
+      return acc;
+    },
+    {} as Record<TaskStatus, TaskItem[]>
+  );
+
+  const filterBar = (
+    <div className="flex items-center gap-2">
+      {projects.length > 0 && (
+        <Select value={projectFilter} onValueChange={setProjectFilter}>
+          <SelectTrigger className="w-[180px]">
+            <SelectValue placeholder="All projects" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All projects</SelectItem>
+            {projects.map((p) => (
+              <SelectItem key={p.id} value={p.id}>{p.name}</SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      )}
+      <Select value={statusFilter} onValueChange={setStatusFilter}>
+        <SelectTrigger className="w-[150px]">
+          <SelectValue placeholder="All statuses" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">All statuses</SelectItem>
+          {COLUMN_ORDER.map((s) => (
+            <SelectItem key={s} value={s} className="capitalize">{s}</SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+
+  const newTaskButton = (
+    <Link href="/tasks/new">
+      <Button>
+        <Plus className="h-4 w-4 mr-2" />
+        New Task
+      </Button>
+    </Link>
+  );
+
+  if (tasks.length === 0) {
+    return (
+      <div>
+        <div className="flex items-center justify-between mb-6 gap-4 flex-wrap">
+          <h1 className="text-2xl font-bold">Dashboard</h1>
+          <div className="flex items-center gap-3">
+            {filterBar}
+            {newTaskButton}
+          </div>
+        </div>
+        <EmptyBoard />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-6 gap-4 flex-wrap">
+        <h1 className="text-2xl font-bold">Dashboard</h1>
+        <div className="flex items-center gap-3">
+          {filterBar}
+          {newTaskButton}
+        </div>
+      </div>
+      <p id={`${dndId}-announcements`} className="sr-only" aria-live="polite" aria-atomic="true">
+        {announcement}
+      </p>
+      <DndContext
+        id={dndId}
+        sensors={sensors}
+        onDragStart={handleDragStart}
+        onDragEnd={handleDragEnd}
+      >
+        <div className="relative">
+          <button
+            type="button"
+            aria-label="Scroll left"
+            onClick={() => scrollRef.current?.scrollBy({ left: -280, behavior: "smooth" })}
+            className={`surface-control absolute left-1 top-0 z-20 h-8 w-8 rounded-full flex items-center justify-center transition-opacity duration-200 cursor-pointer hover:bg-accent/50 ${canScrollLeft ? "opacity-100" : "opacity-0 pointer-events-none"}`}
+          >
+            <ChevronLeft className="h-4 w-4 text-foreground" />
+          </button>
+          <button
+            type="button"
+            aria-label="Scroll right"
+            onClick={() => scrollRef.current?.scrollBy({ left: 280, behavior: "smooth" })}
+            className={`surface-control absolute right-1 top-0 z-20 h-8 w-8 rounded-full flex items-center justify-center transition-opacity duration-200 cursor-pointer hover:bg-accent/50 ${canScrollRight ? "opacity-100" : "opacity-0 pointer-events-none"}`}
+          >
+            <ChevronRight className="h-4 w-4 text-foreground" />
+          </button>
+          <div
+            ref={scrollRef}
+            onScroll={updateScrollIndicators}
+            className="flex gap-4 overflow-x-auto pb-4"
+            role="region"
+            aria-label="Kanban board"
+            aria-describedby={`${dndId}-announcements`}
+          >
+            {COLUMN_ORDER.map((status) => (
+              <KanbanColumn
+                key={status}
+                status={status}
+                tasks={groupedTasks[status]}
+                onTaskClick={handleTaskClick}
+                onAddTask={status === "planned" ? () => router.push("/tasks/new") : undefined}
+              />
+            ))}
+          </div>
+        </div>
+        <DragOverlay>
+          {activeTask ? (
+            <div className="w-64">
+              <TaskCard task={activeTask} onClick={() => {}} />
+            </div>
+          ) : null}
+        </DragOverlay>
+      </DndContext>
+    </div>
+  );
+}

package/src/components/tasks/kanban-column.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { useDroppable } from "@dnd-kit/core";
+import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Inbox, Plus } from "lucide-react";
+import { TaskCard, type TaskItem } from "./task-card";
+import type { TaskStatus } from "@/lib/constants/task-status";
+
+const columnLabels: Record<string, string> = {
+  planned: "Planned",
+  queued: "Queued",
+  running: "Running",
+  completed: "Completed",
+  failed: "Failed",
+};
+
+export function KanbanColumn({
+  status,
+  tasks,
+  onTaskClick,
+  onAddTask,
+}: {
+  status: TaskStatus;
+  tasks: TaskItem[];
+  onTaskClick: (task: TaskItem) => void;
+  onAddTask?: () => void;
+}) {
+  const { setNodeRef, isOver } = useDroppable({ id: status });
+  const label = columnLabels[status] ?? status;
+
+  return (
+    <div className="flex flex-col min-w-60 max-w-72 flex-1 shrink-0" role="group" aria-label={`${label} column, ${tasks.length} tasks`}>
+      <div className="flex items-center gap-2 mb-3 px-1">
+        <h3 className="text-sm font-medium">{label}</h3>
+        <Badge variant="secondary" className="text-xs">
+          {tasks.length}
+        </Badge>
+      </div>
+      <div
+        ref={setNodeRef}
+        aria-label={`Drop zone for ${label}`}
+        className={`surface-scroll flex-1 rounded-lg border border-dashed p-2 min-h-[200px] transition-colors ${
+          isOver ? "bg-accent/50 border-primary" : "border-border/40"
+        }`}
+      >
+        <SortableContext items={tasks.map((t) => t.id)} strategy={verticalListSortingStrategy}>
+          <div className="space-y-2">
+            {tasks.length === 0 ? (
+              <div className="flex flex-col items-center justify-center h-full min-h-[120px] text-muted-foreground border-2 border-dashed border-border/50 rounded-lg bg-background/35">
+                <Inbox className="h-5 w-5 mb-1 opacity-40" />
+                <span className="text-xs">No tasks</span>
+              </div>
+            ) : (
+              tasks.map((task) => (
+                <TaskCard key={task.id} task={task} onClick={onTaskClick} />
+              ))
+            )}
+          </div>
+        </SortableContext>
+        {onAddTask && (
+          <Button
+            variant="ghost"
+            className="w-full mt-2 border border-dashed border-border/50 text-muted-foreground hover:text-foreground"
+            onClick={onAddTask}
+          >
+            <Plus className="h-4 w-4 mr-1" />
+            Add task
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/tasks/skeleton-board.tsx

@@ -0,0 +1,21 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function SkeletonBoard() {
+  return (
+    <div className="flex gap-4 overflow-x-auto pb-4">
+      {Array.from({ length: 5 }).map((_, colIdx) => (
+        <div key={colIdx} className="w-64 shrink-0">
+          <div className="flex items-center gap-2 mb-3 px-1">
+            <Skeleton className="h-4 w-20" />
+            <Skeleton className="h-5 w-6 rounded-full" />
+          </div>
+          <div className="space-y-2 p-2">
+            {Array.from({ length: colIdx < 3 ? 3 : 2 }).map((_, cardIdx) => (
+              <Skeleton key={cardIdx} className="h-20 w-full rounded-lg" />
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}