stagent 0.1.0

package/src/components/documents/document-preview.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import type { DocumentWithRelations } from "./types";
+
+interface DocumentPreviewProps {
+  document: DocumentWithRelations;
+}
+
+export function DocumentPreview({ document: doc }: DocumentPreviewProps) {
+  const isImage = doc.mimeType.startsWith("image/");
+  const isPdf = doc.mimeType === "application/pdf";
+  const isMarkdown = doc.mimeType === "text/markdown";
+  const isText =
+    doc.mimeType.startsWith("text/") ||
+    doc.mimeType === "application/json";
+
+  if (isImage) {
+    return (
+      <div className="rounded-md overflow-hidden border border-border bg-muted/30 flex items-center justify-center">
+        <img
+          src={`/api/documents/${doc.id}/file?inline=1`}
+          alt={doc.originalName}
+          className="max-h-64 object-contain"
+        />
+      </div>
+    );
+  }
+
+  if (isPdf) {
+    return (
+      <div className="rounded-md overflow-hidden border border-border">
+        <iframe
+          src={`/api/documents/${doc.id}/file?inline=1`}
+          className="w-full h-64"
+          title={doc.originalName}
+        />
+      </div>
+    );
+  }
+
+  if (isMarkdown && doc.extractedText) {
+    return (
+      <div className="rounded-md border border-border p-3 prose prose-sm dark:prose-invert max-h-64 overflow-y-auto">
+        <ReactMarkdown remarkPlugins={[remarkGfm]}>
+          {doc.extractedText.slice(0, 5000)}
+        </ReactMarkdown>
+      </div>
+    );
+  }
+
+  if (isText && doc.extractedText) {
+    return (
+      <pre className="text-xs bg-muted p-3 rounded-md max-h-64 overflow-y-auto whitespace-pre-wrap break-words border border-border">
+        {doc.extractedText.slice(0, 5000)}
+      </pre>
+    );
+  }
+
+  // Fallback — no preview
+  return (
+    <div className="rounded-md border border-border p-6 text-center text-muted-foreground">
+      <p className="text-sm">No preview available for this file type.</p>
+      <p className="text-xs mt-1">Download the file to view its contents.</p>
+    </div>
+  );
+}

package/src/components/documents/document-table.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { Checkbox } from "@/components/ui/checkbox";
+import { Badge } from "@/components/ui/badge";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Card } from "@/components/ui/card";
+import { getFileIcon, formatSize, getStatusColor } from "./utils";
+import type { DocumentWithRelations } from "./types";
+
+interface DocumentTableProps {
+  documents: DocumentWithRelations[];
+  selected: Set<string>;
+  onToggleSelect: (id: string) => void;
+  onToggleSelectAll: () => void;
+  onOpen: (doc: DocumentWithRelations) => void;
+}
+
+export function DocumentTable({
+  documents,
+  selected,
+  onToggleSelect,
+  onToggleSelectAll,
+  onOpen,
+}: DocumentTableProps) {
+  const allSelected = selected.size === documents.length && documents.length > 0;
+
+  return (
+    <Card className="overflow-hidden p-0 gap-0">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-10">
+              <Checkbox
+                checked={allSelected}
+                onCheckedChange={onToggleSelectAll}
+                aria-label="Select all documents"
+              />
+            </TableHead>
+            <TableHead>Name</TableHead>
+            <TableHead className="hidden md:table-cell">Size</TableHead>
+            <TableHead className="hidden md:table-cell">Direction</TableHead>
+            <TableHead className="hidden lg:table-cell">Task</TableHead>
+            <TableHead className="hidden lg:table-cell">Project</TableHead>
+            <TableHead>Status</TableHead>
+            <TableHead className="hidden md:table-cell">Date</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {documents.map((doc) => {
+            const Icon = getFileIcon(doc.mimeType);
+            return (
+              <TableRow
+                key={doc.id}
+                className="cursor-pointer"
+                onClick={() => onOpen(doc)}
+              >
+                <TableCell onClick={(e: React.MouseEvent) => e.stopPropagation()}>
+                  <Checkbox
+                    checked={selected.has(doc.id)}
+                    onCheckedChange={() => onToggleSelect(doc.id)}
+                    aria-label={`Select ${doc.originalName}`}
+                  />
+                </TableCell>
+                <TableCell>
+                  <div className="flex items-center gap-2">
+                    <Icon className="h-4 w-4 text-muted-foreground shrink-0" />
+                    <span className="truncate max-w-[200px]">{doc.originalName}</span>
+                  </div>
+                </TableCell>
+                <TableCell className="hidden md:table-cell text-muted-foreground text-sm">
+                  {formatSize(doc.size)}
+                </TableCell>
+                <TableCell className="hidden md:table-cell">
+                  <div className="flex items-center gap-2">
+                    <Badge variant="outline" className="capitalize">
+                      {doc.direction}
+                    </Badge>
+                    {doc.direction === "output" && (
+                      <span className="text-xs text-muted-foreground">v{doc.version}</span>
+                    )}
+                  </div>
+                </TableCell>
+                <TableCell className="hidden lg:table-cell text-sm">
+                  {doc.taskTitle ? (
+                    <span className="truncate max-w-[150px] block">{doc.taskTitle}</span>
+                  ) : (
+                    <span className="text-muted-foreground">—</span>
+                  )}
+                </TableCell>
+                <TableCell className="hidden lg:table-cell text-sm">
+                  {doc.projectName ? (
+                    <span className="truncate max-w-[120px] block">{doc.projectName}</span>
+                  ) : (
+                    <span className="text-muted-foreground">—</span>
+                  )}
+                </TableCell>
+                <TableCell>
+                  <Badge variant="outline" className={getStatusColor(doc.status)}>
+                    {doc.status}
+                  </Badge>
+                </TableCell>
+                <TableCell className="hidden md:table-cell text-muted-foreground text-sm">
+                  {new Date(doc.createdAt).toLocaleDateString()}
+                </TableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+    </Card>
+  );
+}

package/src/components/documents/document-upload-dialog.tsx

@@ -0,0 +1,153 @@
+"use client";
+
+import { useState, useRef } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Upload, CheckCircle, Loader2 } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { toast } from "sonner";
+
+interface DocumentUploadDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onUploaded: () => void;
+  restoreFocusElement?: HTMLElement | null;
+}
+
+export function DocumentUploadDialog({
+  open,
+  onClose,
+  onUploaded,
+  restoreFocusElement,
+}: DocumentUploadDialogProps) {
+  const [uploading, setUploading] = useState(false);
+  const [uploaded, setUploaded] = useState<string[]>([]);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  async function handleFiles(files: FileList) {
+    setUploading(true);
+    const names: string[] = [];
+
+    for (const file of Array.from(files)) {
+      try {
+        const formData = new FormData();
+        formData.append("file", file);
+
+        const res = await fetch("/api/uploads", {
+          method: "POST",
+          body: formData,
+        });
+
+        if (res.ok) {
+          names.push(file.name);
+        }
+      } catch {
+        toast.error(`Failed to upload ${file.name}`);
+      }
+    }
+
+    setUploaded((prev) => [...prev, ...names]);
+    setUploading(false);
+
+    if (names.length > 0) {
+      toast.success(`Uploaded ${names.length} file${names.length !== 1 ? "s" : ""}`);
+      onUploaded();
+    }
+  }
+
+  function handleClose() {
+    setUploaded([]);
+    onClose();
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={(o) => !o && handleClose()}>
+      <DialogContent
+        className="sm:max-w-md"
+        onCloseAutoFocus={(event) => {
+          if (!restoreFocusElement) return;
+          event.preventDefault();
+          restoreFocusElement.focus();
+        }}
+      >
+        <DialogHeader>
+          <DialogTitle>Upload Documents</DialogTitle>
+          <DialogDescription>
+            Add one or more files to the document library for processing and task attachment.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div
+          role="button"
+          tabIndex={0}
+          aria-label="Upload files — click or drag and drop"
+          className="border-2 border-dashed border-border rounded-lg p-8 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={(e) => {
+            e.preventDefault();
+            if (e.dataTransfer.files.length) handleFiles(e.dataTransfer.files);
+          }}
+          onDragOver={(e) => e.preventDefault()}
+        >
+          {uploading ? (
+            <Loader2 className="h-8 w-8 mx-auto text-muted-foreground mb-2 animate-spin" />
+          ) : (
+            <Upload className="h-8 w-8 mx-auto text-muted-foreground mb-2" />
+          )}
+          <p className="text-sm text-muted-foreground">
+            {uploading ? "Uploading..." : "Click or drop files here"}
+          </p>
+          <p className="text-xs text-muted-foreground mt-1">
+            Max 50MB per file. Multiple files supported.
+          </p>
+          <div className="flex flex-wrap justify-center gap-1 mt-2">
+            {["PDF", "DOCX", "XLSX", "TXT", "Images"].map((type) => (
+              <Badge key={type} variant="outline" className="text-xs">
+                {type}
+              </Badge>
+            ))}
+          </div>
+          <input
+            ref={inputRef}
+            type="file"
+            className="hidden"
+            multiple
+            onChange={(e) => {
+              if (e.target.files?.length) handleFiles(e.target.files);
+              e.target.value = "";
+            }}
+          />
+        </div>
+
+        {uploaded.length > 0 && (
+          <div className="space-y-1">
+            {uploaded.map((name, i) => (
+              <div key={i} className="flex items-center gap-2 text-sm">
+                <CheckCircle className="h-3.5 w-3.5 text-success shrink-0" />
+                <span className="truncate">{name}</span>
+              </div>
+            ))}
+          </div>
+        )}
+
+        <div className="flex justify-end">
+          <Button variant="outline" onClick={handleClose}>
+            Done
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/documents/types.ts

@@ -0,0 +1,6 @@
+import type { DocumentRow } from "@/lib/db/schema";
+
+export type DocumentWithRelations = DocumentRow & {
+  taskTitle: string | null;
+  projectName: string | null;
+};

package/src/components/documents/utils.ts

@@ -0,0 +1,57 @@
+import { Image, FileCode, FileText, File, FileSpreadsheet } from "lucide-react";
+
+export function getFileIcon(mimeType: string) {
+  if (mimeType.startsWith("image/")) return Image;
+  if (
+    mimeType.includes("javascript") ||
+    mimeType.includes("typescript") ||
+    mimeType.includes("python") ||
+    mimeType.includes("json") ||
+    mimeType.includes("html") ||
+    mimeType.includes("css")
+  )
+    return FileCode;
+  if (mimeType.includes("spreadsheet") || mimeType === "text/csv")
+    return FileSpreadsheet;
+  if (mimeType.startsWith("text/") || mimeType === "application/pdf")
+    return FileText;
+  return File;
+}
+
+export 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`;
+}
+
+export function formatRelativeTime(timestamp: number): string {
+  const now = Date.now();
+  const diff = now - timestamp;
+  const seconds = Math.floor(diff / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+
+  if (seconds < 60) return "just now";
+  if (minutes < 60) return `${minutes}m ago`;
+  if (hours < 24) return `${hours}h ago`;
+  if (days < 30) return `${days}d ago`;
+  const months = Math.floor(days / 30);
+  if (months < 12) return `${months}mo ago`;
+  return `${Math.floor(months / 12)}y ago`;
+}
+
+export function getStatusColor(status: string): string {
+  switch (status) {
+    case "ready":
+      return "text-status-completed border-status-completed/30";
+    case "processing":
+      return "text-status-running border-status-running/30";
+    case "error":
+      return "text-status-failed border-status-failed/30";
+    case "uploaded":
+      return "text-status-warning border-status-warning/30";
+    default:
+      return "";
+  }
+}

package/src/components/monitoring/connection-indicator.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+export function ConnectionIndicator({ connected }: { connected: boolean }) {
+  return (
+    <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+      <span
+        className={`h-2 w-2 rounded-full ${
+          connected ? "bg-success" : "bg-status-failed"
+        }`}
+      />
+      {connected ? "Connected" : "Disconnected"}
+    </div>
+  );
+}

package/src/components/monitoring/log-entry.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { formatTime } from "@/lib/utils/format-timestamp";
+
+export interface LogEntryData {
+  id: string;
+  taskId: string | null;
+  agentType: string;
+  event: string;
+  payload: string | null;
+  timestamp: string;
+}
+
+const eventColors: Record<string, string> = {
+  tool_start: "text-primary",
+  content_block_start: "text-primary",
+  message_start: "text-primary",
+  content_block_delta: "text-muted-foreground",
+  error: "text-destructive",
+  completed: "text-chart-2",
+};
+
+export function LogEntry({ entry, taskName }: { entry: LogEntryData; taskName?: string }) {
+  const [expanded, setExpanded] = useState(false);
+
+  const time = formatTime(entry.timestamp);
+
+  let preview = "";
+  try {
+    if (entry.payload) {
+      const parsed = JSON.parse(entry.payload);
+      if (parsed.tool) {
+        preview = `${parsed.tool}`;
+      } else if (parsed.text) {
+        preview = parsed.text.slice(0, 80);
+      } else if (parsed.error) {
+        preview = parsed.error.slice(0, 80);
+      } else if (parsed.result) {
+        preview = parsed.result.slice(0, 80);
+      }
+    }
+  } catch {
+    preview = entry.payload?.slice(0, 80) ?? "";
+  }
+
+  const color = eventColors[entry.event] ?? "text-muted-foreground";
+
+  return (
+    <button
+      type="button"
+      className="w-full text-left font-mono text-sm py-0.5 hover:bg-muted/50 px-2 rounded cursor-pointer"
+      onClick={() => setExpanded(!expanded)}
+      aria-expanded={expanded}
+      aria-label={`Log entry: ${entry.event} at ${time}`}
+    >
+      <span className="text-muted-foreground">[{time}]</span>{" "}
+      {taskName && entry.taskId && (
+        <>
+          <Link
+            href={`/tasks/${entry.taskId}`}
+            className="text-primary hover:underline"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {taskName}
+          </Link>{" "}
+        </>
+      )}
+      <span className={color}>[{entry.event}]</span>{" "}
+      <span className="text-foreground">{preview}</span>
+      {expanded && entry.payload && (
+        <pre className="text-xs text-muted-foreground bg-muted p-2 rounded mt-1 overflow-auto max-h-40 whitespace-pre-wrap">
+          {JSON.stringify(JSON.parse(entry.payload), null, 2)}
+        </pre>
+      )}
+    </button>
+  );
+}

package/src/components/monitoring/log-filters.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+interface LogFiltersProps {
+  taskId: string;
+  eventType: string;
+  tasks: { id: string; title: string }[];
+  onTaskChange: (value: string) => void;
+  onEventTypeChange: (value: string) => void;
+}
+
+export function LogFilters({
+  taskId,
+  eventType,
+  tasks,
+  onTaskChange,
+  onEventTypeChange,
+}: LogFiltersProps) {
+  return (
+    <div className="flex items-center gap-3">
+      <Select value={taskId} onValueChange={onTaskChange}>
+        <SelectTrigger className="w-[200px]">
+          <SelectValue placeholder="All Tasks" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">All Tasks</SelectItem>
+          {tasks.map((t) => (
+            <SelectItem key={t.id} value={t.id}>
+              {t.title}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+
+      <Select value={eventType} onValueChange={onEventTypeChange}>
+        <SelectTrigger className="w-[160px]">
+          <SelectValue placeholder="All Events" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">All Events</SelectItem>
+          <SelectItem value="tool_start">Tool Start</SelectItem>
+          <SelectItem value="content_block_start">Content Start</SelectItem>
+          <SelectItem value="content_block_delta">Content Delta</SelectItem>
+          <SelectItem value="completed">Completed</SelectItem>
+          <SelectItem value="error">Error</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}