stagent 0.6.2 → 0.6.3

package/src/components/projects/project-form-sheet.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import {
   Sheet,
   SheetContent,
@@ -19,9 +19,12 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { FolderOpen, AlignLeft, FolderCode, Trash2 } from "lucide-react";
+import { FolderOpen, AlignLeft, FolderCode, Trash2, Paperclip, Plus, X } from "lucide-react";
 import { toast } from "sonner";
+import { Badge } from "@/components/ui/badge";
 import { ConfirmDialog } from "@/components/shared/confirm-dialog";
+import { DocumentPickerSheet } from "@/components/shared/document-picker-sheet";
+import { getFileIcon, formatSize } from "@/components/documents/utils";
 
 interface Project {
   id: string;
@@ -53,6 +56,9 @@ export function ProjectFormSheet({
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [confirmDelete, setConfirmDelete] = useState(false);
+  const [selectedDocIds, setSelectedDocIds] = useState<Set<string>>(new Set());
+  const [selectedDocs, setSelectedDocs] = useState<Array<{ id: string; originalName: string; mimeType: string; size: number }>>([]);
+  const [pickerOpen, setPickerOpen] = useState(false);
 
   // Pre-fill form in edit mode
   useEffect(() => {
@@ -61,15 +67,68 @@ export function ProjectFormSheet({
       setDescription(project.description ?? "");
       setWorkingDirectory(project.workingDirectory ?? "");
       setStatus(project.status);
+      // Load existing default documents
+      fetch(`/api/projects/${project.id}/documents`)
+        .then((r) => r.json())
+        .then((docs: Array<Record<string, unknown>>) => {
+          const ids = new Set(docs.map((d) => d.id as string));
+          setSelectedDocIds(ids);
+          setSelectedDocs(
+            docs.map((d) => ({
+              id: d.id as string,
+              originalName: d.originalName as string,
+              mimeType: d.mimeType as string,
+              size: d.size as number,
+            }))
+          );
+        })
+        .catch(() => {
+          setSelectedDocIds(new Set());
+          setSelectedDocs([]);
+        });
     } else if (mode === "create") {
       setName("");
       setDescription("");
       setWorkingDirectory("");
       setStatus("active");
+      setSelectedDocIds(new Set());
+      setSelectedDocs([]);
     }
     setError(null);
   }, [mode, project, open]);
 
+  const handleDocPickerConfirm = useCallback(
+    (ids: string[]) => {
+      setSelectedDocIds(new Set(ids));
+      const newIds = ids.filter(
+        (id) => !selectedDocs.some((d) => d.id === id)
+      );
+      if (newIds.length > 0) {
+        const params = new URLSearchParams({ status: "ready" });
+        if (project?.id) params.set("projectId", project.id);
+        fetch(`/api/documents?${params}`)
+          .then((r) => r.json())
+          .then((allDocs: Array<Record<string, unknown>>) => {
+            const idSet = new Set(ids);
+            setSelectedDocs(
+              allDocs
+                .filter((d) => idSet.has(d.id as string))
+                .map((d) => ({
+                  id: d.id as string,
+                  originalName: d.originalName as string,
+                  mimeType: d.mimeType as string,
+                  size: d.size as number,
+                }))
+            );
+          })
+          .catch(() => {});
+      } else {
+        setSelectedDocs((prev) => prev.filter((d) => ids.includes(d.id)));
+      }
+    },
+    [project?.id, selectedDocs]
+  );
+
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     if (!name.trim()) return;
@@ -85,6 +144,7 @@ export function ProjectFormSheet({
             name: name.trim(),
             description: description.trim() || undefined,
             workingDirectory: workingDirectory.trim() || undefined,
+            documentIds: selectedDocIds.size > 0 ? [...selectedDocIds] : undefined,
           }),
         });
         if (res.ok) {
@@ -104,6 +164,7 @@ export function ProjectFormSheet({
             description: description.trim() || undefined,
             workingDirectory: workingDirectory.trim() || undefined,
             status,
+            documentIds: [...selectedDocIds],
           }),
         });
         if (res.ok) {
@@ -236,6 +297,76 @@ export function ProjectFormSheet({
                 </div>
               )}
 
+              {/* Default Documents */}
+              {(isEdit || selectedDocs.length > 0) && (
+                <div className="space-y-2">
+                  <Label className="flex items-center gap-1.5">
+                    <Paperclip className="h-3.5 w-3.5 text-muted-foreground" />
+                    Default Documents
+                  </Label>
+                  <p className="text-xs text-muted-foreground">
+                    Auto-attached to new tasks and workflows in this project
+                  </p>
+                  {selectedDocs.length > 0 && (
+                    <div className="flex flex-wrap gap-2">
+                      {selectedDocs.map((doc) => {
+                        const Icon = getFileIcon(doc.mimeType);
+                        return (
+                          <Badge
+                            key={doc.id}
+                            variant="secondary"
+                            className="flex items-center gap-1.5 pl-2 pr-1 py-1"
+                          >
+                            <Icon className="h-3 w-3" />
+                            <span className="text-xs max-w-[140px] truncate">
+                              {doc.originalName}
+                            </span>
+                            <span className="text-[10px] text-muted-foreground">
+                              {formatSize(doc.size)}
+                            </span>
+                            <button
+                              type="button"
+                              onClick={() => {
+                                setSelectedDocIds((prev) => {
+                                  const next = new Set(prev);
+                                  next.delete(doc.id);
+                                  return next;
+                                });
+                                setSelectedDocs((prev) => prev.filter((d) => d.id !== doc.id));
+                              }}
+                              className="ml-0.5 rounded-full p-0.5 hover:bg-muted transition-colors"
+                              aria-label={`Remove ${doc.originalName}`}
+                            >
+                              <X className="h-3 w-3" />
+                            </button>
+                          </Badge>
+                        );
+                      })}
+                    </div>
+                  )}
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setPickerOpen(true)}
+                    className="gap-1.5"
+                  >
+                    <Plus className="h-3.5 w-3.5" />
+                    {selectedDocs.length > 0 ? "Add More" : "Select Documents"}
+                  </Button>
+                </div>
+              )}
+
+              <DocumentPickerSheet
+                open={pickerOpen}
+                onOpenChange={setPickerOpen}
+                projectId={project?.id ?? null}
+                selectedIds={selectedDocIds}
+                onConfirm={handleDocPickerConfirm}
+                groupBy="source"
+                title="Select Default Documents"
+              />
+
               {error && (
                 <p className="text-sm text-destructive">{error}</p>
               )}

package/src/components/schedules/schedule-form.tsx

@@ -13,7 +13,10 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
-import { Clock, Bot, Heart, Plus, X, GripVertical, Sparkles, CheckCircle2, AlertCircle } from "lucide-react";
+import { Clock, Bot, Heart, Plus, X, GripVertical, Sparkles, CheckCircle2, AlertCircle, Paperclip } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { DocumentPickerSheet } from "@/components/shared/document-picker-sheet";
+import { getFileIcon, formatSize } from "@/components/documents/utils";
 import {
   type AgentRuntimeId,
   DEFAULT_AGENT_RUNTIME,
@@ -59,6 +62,7 @@ export interface ScheduleFormValues {
   activeHoursEnd: number | "";
   activeTimezone: string;
   heartbeatBudgetPerDay: number | "";
+  documentIds: string[];
 }
 
 export interface ScheduleFormInitialValues {
@@ -201,6 +205,43 @@ export function ScheduleForm({
   const [activeTimezone, setActiveTimezone] = useState("UTC");
   const [heartbeatBudgetPerDay, setHeartbeatBudgetPerDay] = useState<number | "">("");
 
+  // Document picker state
+  const [selectedDocIds, setSelectedDocIds] = useState<Set<string>>(new Set());
+  const [selectedDocs, setSelectedDocs] = useState<Array<{ id: string; originalName: string; mimeType: string; size: number }>>([]);
+  const [pickerOpen, setPickerOpen] = useState(false);
+
+  const handleDocPickerConfirm = useCallback(
+    (ids: string[]) => {
+      setSelectedDocIds(new Set(ids));
+      const newIds = ids.filter(
+        (id) => !selectedDocs.some((d) => d.id === id)
+      );
+      if (newIds.length > 0) {
+        const params = new URLSearchParams({ status: "ready" });
+        if (projectId) params.set("projectId", projectId);
+        fetch(`/api/documents?${params}`)
+          .then((r) => r.json())
+          .then((allDocs: Array<Record<string, unknown>>) => {
+            const idSet = new Set(ids);
+            setSelectedDocs(
+              allDocs
+                .filter((d) => idSet.has(d.id as string))
+                .map((d) => ({
+                  id: d.id as string,
+                  originalName: d.originalName as string,
+                  mimeType: d.mimeType as string,
+                  size: d.size as number,
+                }))
+            );
+          })
+          .catch(() => {});
+      } else {
+        setSelectedDocs((prev) => prev.filter((d) => ids.includes(d.id)));
+      }
+    },
+    [projectId, selectedDocs]
+  );
+
   useEffect(() => {
     fetch("/api/profiles")
       .then((r) => r.json())
@@ -261,6 +302,7 @@ export function ScheduleForm({
       activeHoursEnd,
       activeTimezone,
       heartbeatBudgetPerDay,
+      documentIds: [...selectedDocIds],
     });
   }
 
@@ -648,6 +690,76 @@ export function ScheduleForm({
         </div>
       )}
 
+      {/* Context Documents */}
+      <div className="space-y-2">
+        <Label className="flex items-center gap-1.5">
+          <Paperclip className="h-3.5 w-3.5 text-muted-foreground" />
+          Context Documents
+        </Label>
+        {selectedDocs.length > 0 && (
+          <div className="flex flex-wrap gap-2">
+            {selectedDocs.map((doc) => {
+              const Icon = getFileIcon(doc.mimeType);
+              return (
+                <Badge
+                  key={doc.id}
+                  variant="secondary"
+                  className="flex items-center gap-1.5 pl-2 pr-1 py-1"
+                >
+                  <Icon className="h-3 w-3" />
+                  <span className="text-xs max-w-[140px] truncate">
+                    {doc.originalName}
+                  </span>
+                  <span className="text-[10px] text-muted-foreground">
+                    {formatSize(doc.size)}
+                  </span>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setSelectedDocIds((prev) => {
+                        const next = new Set(prev);
+                        next.delete(doc.id);
+                        return next;
+                      });
+                      setSelectedDocs((prev) => prev.filter((d) => d.id !== doc.id));
+                    }}
+                    className="ml-0.5 rounded-full p-0.5 hover:bg-muted transition-colors"
+                    aria-label={`Remove ${doc.originalName}`}
+                  >
+                    <X className="h-3 w-3" />
+                  </button>
+                </Badge>
+              );
+            })}
+          </div>
+        )}
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={() => setPickerOpen(true)}
+          className="gap-1.5"
+        >
+          <Plus className="h-3.5 w-3.5" />
+          {selectedDocs.length > 0 ? "Add More" : "Select Documents"}
+        </Button>
+        {selectedDocs.length > 0 && (
+          <p className="text-xs text-muted-foreground">
+            {selectedDocs.length} document{selectedDocs.length !== 1 ? "s" : ""} will be provided as context for each firing
+          </p>
+        )}
+      </div>
+
+      <DocumentPickerSheet
+        open={pickerOpen}
+        onOpenChange={setPickerOpen}
+        projectId={projectId || null}
+        selectedIds={selectedDocIds}
+        onConfirm={handleDocPickerConfirm}
+        groupBy="source"
+        title="Select Context Documents"
+      />
+
       {/* Runtime */}
       <div className="space-y-2">
         <Label className="flex items-center gap-1.5">

package/src/components/shared/document-picker-sheet.tsx

@@ -0,0 +1,283 @@
+"use client";
+
+import { useState, useEffect, useMemo } from "react";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+} from "@/components/ui/sheet";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Badge } from "@/components/ui/badge";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { FileText, Search, Loader2 } from "lucide-react";
+import { getFileIcon, formatSize, getStatusDotColor } from "@/components/documents/utils";
+
+export interface PickerDocument {
+  id: string;
+  originalName: string;
+  mimeType: string;
+  size: number;
+  direction: string;
+  status: string;
+  category: string | null;
+  taskTitle: string | null;
+  projectName: string | null;
+  /** Source workflow name (if document was produced by a workflow task) */
+  sourceWorkflow?: string;
+  /** Parent workflow name (joined from tasks → workflows) */
+  workflowName?: string | null;
+  createdAt: number;
+}
+
+interface DocumentPickerSheetProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Scope documents to a project. Null = show all ready documents. */
+  projectId: string | null;
+  /** Currently selected document IDs (to pre-check) */
+  selectedIds: Set<string>;
+  /** Called when user confirms selection */
+  onConfirm: (selectedIds: string[]) => void;
+  /** Optional: scope to a step ID label */
+  stepLabel?: string;
+  /** Grouping mode: "workflow" groups by source workflow, "project" by project name, "source" by direction */
+  groupBy?: "workflow" | "project" | "source";
+  /** Override the sheet title */
+  title?: string;
+}
+
+export function DocumentPickerSheet({
+  open,
+  onOpenChange,
+  projectId,
+  selectedIds,
+  onConfirm,
+  stepLabel,
+  groupBy = "source",
+  title,
+}: DocumentPickerSheetProps) {
+  const [documents, setDocuments] = useState<PickerDocument[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [search, setSearch] = useState("");
+  const [localSelected, setLocalSelected] = useState<Set<string>>(new Set());
+
+  // Sync initial selection when sheet opens
+  useEffect(() => {
+    if (open) {
+      setLocalSelected(new Set(selectedIds));
+      fetchDocuments();
+    }
+  }, [open, projectId]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  async function fetchDocuments() {
+    setLoading(true);
+    try {
+      const params = new URLSearchParams({ status: "ready" });
+      if (projectId) params.set("projectId", projectId);
+      const res = await fetch(`/api/documents?${params}`);
+      if (res.ok) {
+        const data = await res.json();
+        setDocuments(data);
+      }
+    } catch {
+      // Silently fail — empty list shown
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  const filtered = useMemo(() => {
+    if (!search.trim()) return documents;
+    const q = search.toLowerCase();
+    return documents.filter(
+      (doc) =>
+        doc.originalName.toLowerCase().includes(q) ||
+        doc.category?.toLowerCase().includes(q) ||
+        doc.taskTitle?.toLowerCase().includes(q)
+    );
+  }, [documents, search]);
+
+  // Group documents based on the groupBy mode
+  const grouped = useMemo(() => {
+    const groups: Record<string, PickerDocument[]> = {};
+    for (const doc of filtered) {
+      let key: string;
+      switch (groupBy) {
+        case "workflow":
+          key =
+            doc.direction === "output"
+              ? doc.workflowName
+                ? `From: ${doc.workflowName}`
+                : doc.taskTitle
+                  ? `From: ${doc.taskTitle}`
+                  : "Agent Generated"
+              : "Uploaded";
+          break;
+        case "project":
+          key = doc.projectName ?? "No Project";
+          break;
+        case "source":
+        default:
+          key =
+            doc.direction === "output"
+              ? doc.taskTitle
+                ? "Task Output"
+                : "Agent Generated"
+              : "Uploaded";
+          break;
+      }
+      if (!groups[key]) groups[key] = [];
+      groups[key].push(doc);
+    }
+    return groups;
+  }, [filtered, groupBy]);
+
+  function toggleDocument(id: string) {
+    setLocalSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  }
+
+  function handleConfirm() {
+    onConfirm([...localSelected]);
+    onOpenChange(false);
+  }
+
+  const sheetTitle = title
+    ? title
+    : stepLabel
+      ? `Select Documents for "${stepLabel}"`
+      : "Select Input Documents";
+
+  const emptyMessage = search
+    ? "No documents match your search."
+    : projectId
+      ? "No documents available in this project."
+      : "No documents available. Upload files in the Documents view.";
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent side="right" className="w-full sm:max-w-lg">
+        <SheetHeader className="p-4">
+          <SheetTitle className="flex items-center gap-2">
+            <FileText className="h-4 w-4" />
+            {sheetTitle}
+          </SheetTitle>
+          <SheetDescription>
+            Choose documents to provide as context.
+          </SheetDescription>
+        </SheetHeader>
+
+        <div className="px-6 pb-6 flex flex-col gap-4 flex-1 min-h-0">
+          {/* Search */}
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <Input
+              placeholder="Search documents..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="pl-9"
+            />
+          </div>
+
+          {/* Document list */}
+          <ScrollArea className="flex-1 min-h-0 -mx-2">
+            {loading ? (
+              <div className="flex items-center justify-center py-12">
+                <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+              </div>
+            ) : Object.keys(grouped).length === 0 ? (
+              <div className="text-center text-sm text-muted-foreground py-12">
+                {emptyMessage}
+              </div>
+            ) : (
+              <div className="space-y-4 px-2">
+                {Object.entries(grouped).map(([source, docs]) => (
+                  <div key={source}>
+                    <p className="text-xs font-medium text-muted-foreground mb-2">
+                      {source}
+                    </p>
+                    <div className="space-y-1">
+                      {docs.map((doc) => {
+                        const Icon = getFileIcon(doc.mimeType);
+                        const isChecked = localSelected.has(doc.id);
+                        return (
+                          <div
+                            key={doc.id}
+                            role="button"
+                            tabIndex={0}
+                            onClick={() => toggleDocument(doc.id)}
+                            onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggleDocument(doc.id); } }}
+                            className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg text-left transition-colors cursor-pointer ${
+                              isChecked
+                                ? "bg-accent/50 border border-accent"
+                                : "hover:bg-muted/50 border border-transparent"
+                            }`}
+                          >
+                            <Checkbox
+                              checked={isChecked}
+                              aria-label={`Select ${doc.originalName}`}
+                            />
+                            <Icon className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
+                            <div className="flex-1 min-w-0">
+                              <p className="text-sm font-medium truncate">
+                                {doc.originalName}
+                              </p>
+                              <p className="text-xs text-muted-foreground">
+                                {formatSize(doc.size)}
+                                {doc.category && ` · ${doc.category}`}
+                              </p>
+                            </div>
+                            <div className="flex items-center gap-2">
+                              <div
+                                className={`h-2 w-2 rounded-full ${getStatusDotColor(doc.status)}`}
+                              />
+                              {doc.direction === "output" && (
+                                <Badge variant="outline" className="text-[10px] px-1.5">
+                                  output
+                                </Badge>
+                              )}
+                            </div>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </ScrollArea>
+
+          {/* Footer */}
+          <div className="flex items-center justify-between pt-2 border-t">
+            <span className="text-sm text-muted-foreground">
+              {localSelected.size} selected
+            </span>
+            <div className="flex gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => onOpenChange(false)}
+              >
+                Cancel
+              </Button>
+              <Button size="sm" onClick={handleConfirm}>
+                Confirm
+              </Button>
+            </div>
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}

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

@@ -5,7 +5,7 @@ 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, Trash2, Check, X, Loader2, Square, CheckSquare, Pencil } from "lucide-react";
+import { AlertCircle, Bot, ArrowUp, ArrowDown, Minus, Trash2, Check, X, Loader2, Square, CheckSquare, Pencil, FileText } from "lucide-react";
 import type { TaskStatus } from "@/lib/constants/task-status";
 
 export interface TaskItem {
@@ -28,6 +28,7 @@ export interface TaskItem {
   resumeCount: number;
   createdAt: string;
   updatedAt: string;
+  docCount?: number;
   usage?: {
     inputTokens: number | null;
     outputTokens: number | null;
@@ -165,6 +166,12 @@ export function TaskCard({
                   <span className="truncate">{task.assignedAgent}</span>
                 </Badge>
               )}
+              {task.docCount != null && task.docCount > 0 && (
+                <Badge variant="outline" className="text-xs gap-1 h-5">
+                  <FileText className="h-3 w-3 shrink-0" />
+                  {task.docCount}
+                </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">