stagent 0.1.0

package/src/components/tasks/task-detail-view.tsx

@@ -0,0 +1,356 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { useRouter } from "next/navigation";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Play, Square, RotateCcw, ArrowRight, FastForward } from "lucide-react";
+import { toast } from "sonner";
+import { ConfirmDialog } from "@/components/shared/confirm-dialog";
+import { ContentPreview } from "./content-preview";
+import { TaskAttachments } from "./task-attachments";
+import { formatTimestamp } from "@/lib/utils/format-timestamp";
+import { MAX_RESUME_COUNT } from "@/lib/constants/task-status";
+import { taskStatusVariant } from "@/lib/constants/status-colors";
+import type { TaskItem } from "./task-card";
+import type { DocumentRow } from "@/lib/db/schema";
+
+function detectContentType(content: string): "text" | "markdown" | "code" | "json" | "unknown" {
+  if (content.startsWith("{") || content.startsWith("[")) {
+    try { JSON.parse(content); return "json"; } catch { /* not json */ }
+  }
+  if (content.includes("```") || content.includes("# ") || content.includes("**")) return "markdown";
+  if (content.includes("function ") || content.includes("const ") || content.includes("import ")) return "code";
+  return "text";
+}
+
+const priorityLabels: Record<number, string> = {
+  0: "P0 - Critical",
+  1: "P1 - High",
+  2: "P2 - Medium",
+  3: "P3 - Low",
+};
+
+interface TaskDetailViewProps {
+  taskId: string;
+  initialTask?: TaskItem;
+}
+
+export function TaskDetailView({ taskId, initialTask }: TaskDetailViewProps) {
+  const router = useRouter();
+  const [task, setTask] = useState<TaskItem | null>(initialTask ?? null);
+  const [loaded, setLoaded] = useState(!!initialTask);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [confirmCancel, setConfirmCancel] = useState(false);
+  const [docs, setDocs] = useState<DocumentRow[]>([]);
+
+  const fetchDocs = useCallback(async () => {
+    try {
+      const res = await fetch(`/api/documents?taskId=${taskId}`);
+      if (res.ok) {
+        setDocs(await res.json());
+      }
+    } catch {
+      // silent — attachments are supplementary
+    }
+  }, [taskId]);
+
+  const refresh = useCallback(async () => {
+    try {
+      const res = await fetch(`/api/tasks/${taskId}`);
+      if (res.ok) {
+        setTask(await res.json());
+      }
+    } catch {
+      // silent
+    }
+    await fetchDocs();
+    setLoaded(true);
+  }, [taskId, fetchDocs]);
+
+  useEffect(() => {
+    // If server provided initial data, only fetch supplementary data (docs)
+    // and skip the redundant task refresh
+    if (!initialTask) refresh();
+    fetchDocs();
+  }, [refresh, fetchDocs, initialTask]);
+
+  // Poll while running
+  useEffect(() => {
+    if (task?.status !== "running") return;
+    const interval = setInterval(refresh, 5_000);
+    return () => clearInterval(interval);
+  }, [task?.status, refresh]);
+
+  async function handleStatusChange(newStatus: string) {
+    if (!task) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch(`/api/tasks/${task.id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ status: newStatus }),
+      });
+      if (res.ok) {
+        toast.success(`Task ${newStatus === "queued" ? "queued" : "updated"}`);
+        refresh();
+      } else {
+        const data = await res.json().catch(() => null);
+        setError(data?.error ?? `Failed to update status (${res.status})`);
+      }
+    } catch {
+      setError("Network error — could not reach server");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleExecute() {
+    if (!task) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch(`/api/tasks/${task.id}/execute`, {
+        method: "POST",
+      });
+      if (res.ok) {
+        toast.success("Task execution started");
+        refresh();
+      } else {
+        const data = await res.json().catch(() => null);
+        setError(data?.error ?? `Failed to execute task (${res.status})`);
+      }
+    } catch {
+      setError("Network error — could not reach server");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleResume() {
+    if (!task) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch(`/api/tasks/${task.id}/resume`, {
+        method: "POST",
+      });
+      if (res.ok) {
+        toast.success("Task resumed with previous context");
+        refresh();
+      } else {
+        const data = await res.json().catch(() => null);
+        setError(data?.error ?? `Failed to resume task (${res.status})`);
+      }
+    } catch {
+      setError("Network error — could not reach server");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleCancel() {
+    if (!task) return;
+    setConfirmCancel(false);
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch(`/api/tasks/${task.id}/cancel`, { method: "POST" });
+      if (res.ok) {
+        toast.success("Task cancelled");
+        refresh();
+      } else {
+        setError("Failed to cancel task");
+      }
+    } catch {
+      setError("Network error — could not reach server");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  if (!loaded) {
+    return (
+      <div className="space-y-4">
+        <Skeleton className="h-8 w-64" />
+        <Skeleton className="h-32 w-full" />
+        <Skeleton className="h-48 w-full" />
+      </div>
+    );
+  }
+
+  if (!task) {
+    return <p className="text-muted-foreground">Task not found.</p>;
+  }
+
+  const inputDocs = docs.filter((doc) => doc.direction === "input");
+  const outputDocs = docs.filter((doc) => doc.direction === "output");
+
+  return (
+    <div className="space-y-6" aria-live="polite">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold">{task.title}</h1>
+          <div className="flex items-center gap-2 mt-1">
+            <Badge variant={taskStatusVariant[task.status] ?? "secondary"}>
+              {task.status}
+            </Badge>
+            <span className="text-sm text-muted-foreground">
+              {priorityLabels[task.priority] ?? `P${task.priority}`}
+            </span>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          {task.status === "planned" && (
+            <Button size="sm" onClick={() => handleStatusChange("queued")} disabled={loading}>
+              <ArrowRight className="h-3.5 w-3.5 mr-1" />
+              {loading ? "Queueing..." : "Queue"}
+            </Button>
+          )}
+          {task.status === "queued" && (
+            <Button size="sm" onClick={handleExecute} disabled={loading}>
+              <Play className="h-3.5 w-3.5 mr-1" />
+              {loading ? "Starting..." : "Run"}
+            </Button>
+          )}
+          {task.status === "running" && (
+            <Button
+              size="sm"
+              variant="destructive"
+              onClick={() => setConfirmCancel(true)}
+              disabled={loading}
+            >
+              <Square className="h-3.5 w-3.5 mr-1" />
+              {loading ? "Cancelling..." : "Cancel"}
+            </Button>
+          )}
+          {(task.status === "failed" || task.status === "cancelled") && (
+            <>
+              {task.sessionId && task.resumeCount < MAX_RESUME_COUNT && (
+                <Button size="sm" onClick={handleResume} disabled={loading}>
+                  <FastForward className="h-3.5 w-3.5 mr-1" />
+                  {loading ? "Resuming..." : "Resume"}
+                </Button>
+              )}
+              <Button
+                size="sm"
+                variant={task.sessionId ? "outline" : "default"}
+                onClick={() => handleStatusChange("queued")}
+                disabled={loading}
+              >
+                <RotateCcw className="h-3.5 w-3.5 mr-1" />
+                {loading ? "Retrying..." : "Retry"}
+              </Button>
+            </>
+          )}
+        </div>
+      </div>
+
+      {error && (
+        <p className="text-sm text-destructive">{error}</p>
+      )}
+
+      {/* Description */}
+      {task.description && (
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">Description</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="text-sm text-muted-foreground whitespace-pre-wrap">
+              {task.description}
+            </p>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Agent Info */}
+      {(task.assignedAgent || task.agentProfile) && (
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">Agent</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-1">
+            {task.assignedAgent && (
+              <p className="text-sm text-muted-foreground">{task.assignedAgent}</p>
+            )}
+            {task.agentProfile && (
+              <p className="text-sm text-muted-foreground">
+                Profile: {task.agentProfile}
+              </p>
+            )}
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Documents */}
+      {docs.length > 0 && (
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">
+              Documents ({docs.length})
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-5">
+            {inputDocs.length > 0 && (
+              <TaskAttachments
+                documents={inputDocs}
+                title={`Input Attachments (${inputDocs.length})`}
+                onDeleted={fetchDocs}
+              />
+            )}
+            {outputDocs.length > 0 && (
+              <TaskAttachments
+                documents={outputDocs}
+                title={`Generated Outputs (${outputDocs.length})`}
+                onDeleted={fetchDocs}
+              />
+            )}
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Result / Error */}
+      {task.result && (
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">
+              {task.status === "failed" ? "Error" : "Result"}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {task.status === "failed" ? (
+              <pre className="text-xs text-muted-foreground bg-muted p-3 rounded-md overflow-auto max-h-60 whitespace-pre-wrap">
+                {task.result}
+              </pre>
+            ) : (
+              <ContentPreview content={task.result} contentType={detectContentType(task.result)} />
+            )}
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Timestamps */}
+      <div className="text-xs text-muted-foreground">
+        <p>Created: {formatTimestamp(task.createdAt)}</p>
+        <p>Updated: {formatTimestamp(task.updatedAt)}</p>
+      </div>
+
+      <ConfirmDialog
+        open={confirmCancel}
+        onOpenChange={setConfirmCancel}
+        title="Cancel task?"
+        description="This will stop the running agent. Any partial progress may be lost."
+        confirmLabel="Cancel Task"
+        destructive
+        onConfirm={handleCancel}
+      />
+    </div>
+  );
+}

package/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,196 @@
+"use client"
+
+import * as React from "react"
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
+  size?: "default" | "sm"
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          "group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[size=default]:sm:max-w-lg",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "text-lg font-semibold sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Action
+        data-slot="alert-dialog-action"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Cancel
+        data-slot="alert-dialog-cancel"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+}

package/src/components/ui/badge.tsx

@@ -0,0 +1,50 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
+        success:
+          "bg-status-completed/15 text-status-completed border-status-completed/25 [a&]:hover:bg-status-completed/25",
+        outline:
+          "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 [a&]:hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

package/src/components/ui/button.tsx

@@ -0,0 +1,71 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const Button = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> &
+    VariantProps<typeof buttonVariants> & {
+      asChild?: boolean
+    }
+>(function Button(
+  {
+    className,
+    variant = "default",
+    size = "default",
+    asChild = false,
+    ...props
+  },
+  ref
+) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      ref={ref}
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+})
+
+export { Button, buttonVariants }