stagent 0.1.0

package/src/components/shared/command-palette.tsx

@@ -0,0 +1,250 @@
+"use client";
+
+import { useEffect, useState, useCallback, useRef } from "react";
+import { useRouter } from "next/navigation";
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from "@/components/ui/command";
+import {
+  Home,
+  LayoutDashboard,
+  Inbox,
+  Activity,
+  FolderKanban,
+  GitBranch,
+  FileText,
+  Bot,
+  Clock,
+  Wallet,
+  Settings,
+  Plus,
+  Sun,
+  Moon,
+  CheckCheck,
+  Loader2,
+} from "lucide-react";
+
+interface RecentProject {
+  id: string;
+  name: string;
+  status: string;
+}
+
+interface RecentTask {
+  id: string;
+  title: string;
+  status: string;
+}
+
+const navigationItems = [
+  { title: "Home", href: "/", icon: Home, keywords: "landing welcome" },
+  { title: "Dashboard", href: "/dashboard", icon: LayoutDashboard, keywords: "tasks kanban board" },
+  { title: "Inbox", href: "/inbox", icon: Inbox, keywords: "notifications messages" },
+  { title: "Monitor", href: "/monitor", icon: Activity, keywords: "logs agents streaming" },
+  { title: "Projects", href: "/projects", icon: FolderKanban, keywords: "manage" },
+  { title: "Workflows", href: "/workflows", icon: GitBranch, keywords: "automation steps sequence" },
+  { title: "Documents", href: "/documents", icon: FileText, keywords: "files uploads attachments" },
+  { title: "Profiles", href: "/profiles", icon: Bot, keywords: "agents configuration" },
+  { title: "Schedules", href: "/schedules", icon: Clock, keywords: "cron recurring timer" },
+  { title: "Cost & Usage", href: "/costs", icon: Wallet, keywords: "spend tokens metering budget analytics" },
+  { title: "Settings", href: "/settings", icon: Settings, keywords: "preferences configuration" },
+];
+
+const createItems = [
+  { title: "New Task", href: "/dashboard?create=task", keywords: "create add task" },
+  { title: "New Project", href: "/projects?create=project", keywords: "create add project" },
+  { title: "New Workflow", href: "/workflows/new", keywords: "create add workflow automation" },
+  { title: "New Profile", href: "/profiles/new", keywords: "create add agent profile" },
+];
+
+function statusColorClass(status: string): string {
+  switch (status) {
+    case "running":
+      return "text-status-running";
+    case "completed":
+      return "text-status-completed";
+    case "failed":
+      return "text-status-failed";
+    default:
+      return "text-muted-foreground";
+  }
+}
+
+export function CommandPalette() {
+  const [open, setOpen] = useState(false);
+  const [recentProjects, setRecentProjects] = useState<RecentProject[]>([]);
+  const [recentTasks, setRecentTasks] = useState<RecentTask[]>([]);
+  const [loadingRecent, setLoadingRecent] = useState(false);
+  const abortRef = useRef<AbortController | null>(null);
+  const router = useRouter();
+
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault();
+        setOpen((prev) => !prev);
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, []);
+
+  // Fetch recent items when palette opens
+  useEffect(() => {
+    if (!open) {
+      abortRef.current?.abort();
+      abortRef.current = null;
+      return;
+    }
+
+    const controller = new AbortController();
+    abortRef.current = controller;
+    setLoadingRecent(true);
+
+    fetch("/api/command-palette/recent", { signal: controller.signal })
+      .then((res) => (res.ok ? res.json() : null))
+      .then((data) => {
+        if (data) {
+          setRecentProjects(data.projects);
+          setRecentTasks(data.tasks);
+        }
+      })
+      .catch(() => {
+        // Aborted or failed — ignore
+      })
+      .finally(() => setLoadingRecent(false));
+  }, [open]);
+
+  const navigate = useCallback(
+    (href: string) => {
+      setOpen(false);
+      router.push(href);
+    },
+    [router]
+  );
+
+  function toggleTheme() {
+    setOpen(false);
+    const isDark = document.documentElement.classList.contains("dark");
+    document.documentElement.classList.toggle("dark");
+    localStorage.setItem("stagent-theme", isDark ? "light" : "dark");
+  }
+
+  async function markAllRead() {
+    setOpen(false);
+    await fetch("/api/notifications/mark-all-read", { method: "PATCH" });
+    router.refresh();
+  }
+
+  const hasRecent = recentProjects.length > 0 || recentTasks.length > 0;
+
+  return (
+    <CommandDialog open={open} onOpenChange={setOpen}>
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+
+        {/* Recent Items */}
+        {(loadingRecent || hasRecent) && (
+          <CommandGroup heading="Recent">
+            {loadingRecent && !hasRecent ? (
+              <div className="flex items-center gap-2 px-2 py-3 text-sm text-muted-foreground">
+                <Loader2 className="h-4 w-4 animate-spin" />
+                Loading recent items...
+              </div>
+            ) : (
+              <>
+                {recentProjects.map((project) => (
+                  <CommandItem
+                    key={`project-${project.id}`}
+                    value={`recent-project-${project.name}`}
+                    onSelect={() => navigate(`/projects/${project.id}`)}
+                    keywords={["recent", "project"]}
+                  >
+                    <FolderKanban className="h-4 w-4" />
+                    <span className="flex-1 truncate">{project.name}</span>
+                    <span className={`text-xs ${statusColorClass(project.status)}`}>
+                      {project.status}
+                    </span>
+                  </CommandItem>
+                ))}
+                {recentTasks.map((task) => (
+                  <CommandItem
+                    key={`task-${task.id}`}
+                    value={`recent-task-${task.title}`}
+                    onSelect={() => navigate(`/dashboard?task=${task.id}`)}
+                    keywords={["recent", "task"]}
+                  >
+                    <LayoutDashboard className="h-4 w-4" />
+                    <span className="flex-1 truncate">{task.title}</span>
+                    <span className={`text-xs ${statusColorClass(task.status)}`}>
+                      {task.status}
+                    </span>
+                  </CommandItem>
+                ))}
+              </>
+            )}
+          </CommandGroup>
+        )}
+
+        {hasRecent && <CommandSeparator />}
+
+        {/* Navigation */}
+        <CommandGroup heading="Navigation">
+          {navigationItems.map((item) => (
+            <CommandItem
+              key={item.href}
+              value={item.title}
+              onSelect={() => navigate(item.href)}
+              keywords={[item.keywords]}
+            >
+              <item.icon className="h-4 w-4" />
+              {item.title}
+            </CommandItem>
+          ))}
+        </CommandGroup>
+
+        <CommandSeparator />
+
+        {/* Create */}
+        <CommandGroup heading="Create">
+          {createItems.map((item) => (
+            <CommandItem
+              key={item.href}
+              value={item.title}
+              onSelect={() => navigate(item.href)}
+              keywords={[item.keywords]}
+            >
+              <Plus className="h-4 w-4" />
+              {item.title}
+            </CommandItem>
+          ))}
+        </CommandGroup>
+
+        <CommandSeparator />
+
+        {/* Utility */}
+        <CommandGroup heading="Utility">
+          <CommandItem onSelect={toggleTheme} value="Toggle Theme" keywords={["dark", "light", "mode"]}>
+            <Sun className="h-4 w-4 dark:hidden" />
+            <Moon className="h-4 w-4 hidden dark:block" />
+            Toggle Theme
+            <CommandShortcut>Theme</CommandShortcut>
+          </CommandItem>
+          <CommandItem onSelect={markAllRead} value="Mark All Notifications Read" keywords={["clear", "inbox", "unread"]}>
+            <CheckCheck className="h-4 w-4" />
+            Mark All Read
+            <CommandShortcut>Inbox</CommandShortcut>
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </CommandDialog>
+  );
+}

package/src/components/shared/confirm-dialog.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+
+interface ConfirmDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  description: string;
+  confirmLabel?: string;
+  onConfirm: () => void;
+  destructive?: boolean;
+}
+
+export function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel = "Continue",
+  onConfirm,
+  destructive = false,
+}: ConfirmDialogProps) {
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogDescription>{description}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            variant={destructive ? "destructive" : "default"}
+            onClick={onConfirm}
+          >
+            {confirmLabel}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

package/src/components/shared/empty-state.tsx

@@ -0,0 +1,24 @@
+import { Card, CardContent } from "@/components/ui/card";
+import type { LucideIcon } from "lucide-react";
+
+interface EmptyStateProps {
+  icon: LucideIcon;
+  heading: string;
+  description: string;
+  action?: React.ReactNode;
+}
+
+export function EmptyState({ icon: Icon, heading, description, action }: EmptyStateProps) {
+  return (
+    <Card className="border-dashed">
+      <CardContent className="flex flex-col items-center justify-center py-12">
+        <Icon className="h-12 w-12 text-muted-foreground mb-4" />
+        <h3 className="text-lg font-medium mb-1">{heading}</h3>
+        <p className="text-sm text-muted-foreground text-center max-w-sm">
+          {description}
+        </p>
+        {action && <div className="mt-4">{action}</div>}
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/shared/error-state.tsx

@@ -0,0 +1,32 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { AlertTriangle } from "lucide-react";
+
+interface ErrorStateProps {
+  heading?: string;
+  description: string;
+  onRetry?: () => void;
+}
+
+export function ErrorState({
+  heading = "Something went wrong",
+  description,
+  onRetry,
+}: ErrorStateProps) {
+  return (
+    <Card className="border-l-4 border-l-destructive">
+      <CardContent className="flex items-start gap-4 py-6">
+        <AlertTriangle className="h-8 w-8 text-destructive shrink-0" />
+        <div className="flex-1 min-w-0">
+          <h3 className="text-sm font-semibold mb-1">{heading}</h3>
+          <p className="text-sm text-muted-foreground">{description}</p>
+          {onRetry && (
+            <Button variant="outline" size="sm" className="mt-3" onClick={onRetry}>
+              Try again
+            </Button>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/shared/form-section-card.tsx

@@ -0,0 +1,33 @@
+import type { LucideIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface FormSectionCardProps {
+  icon: LucideIcon;
+  title: string;
+  hint?: string;
+  className?: string;
+  children: React.ReactNode;
+}
+
+export function FormSectionCard({
+  icon: Icon,
+  title,
+  hint,
+  className,
+  children,
+}: FormSectionCardProps) {
+  return (
+    <section
+      className={cn("surface-card-muted rounded-lg p-4 space-y-3", className)}
+    >
+      <div className="flex items-center gap-2">
+        <Icon className="h-4 w-4 text-muted-foreground" />
+        <span className="text-sm font-medium">{title}</span>
+      </div>
+      {hint && (
+        <p className="text-xs text-muted-foreground -mt-1">{hint}</p>
+      )}
+      {children}
+    </section>
+  );
+}

package/src/components/shared/section-heading.tsx

@@ -0,0 +1,14 @@
+import { cn } from "@/lib/utils";
+
+interface SectionHeadingProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function SectionHeading({ children, className }: SectionHeadingProps) {
+  return (
+    <h3 className={cn("text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-3", className)}>
+      {children}
+    </h3>
+  );
+}

package/src/components/shared/stagent-logo.tsx

@@ -0,0 +1,21 @@
+import Image from "next/image";
+
+interface StagentLogoProps {
+  size?: number;
+  className?: string;
+  variant?: "icon" | "symbol";
+}
+
+export function StagentLogo({ size = 24, className, variant = "icon" }: StagentLogoProps) {
+  return (
+    <span className={`inline-flex items-center justify-center shrink-0 ${className ?? ""}`}>
+      <Image
+        src="/stagent-s-64.png"
+        alt=""
+        width={size}
+        height={size}
+        aria-hidden="true"
+      />
+    </span>
+  );
+}

package/src/components/shared/theme-toggle.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Moon, Sun } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+type ResolvedTheme = "light" | "dark";
+
+function resolveThemePreference(): ResolvedTheme {
+  const stored = localStorage.getItem("stagent-theme");
+  if (stored === "dark" || stored === "light") return stored;
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
+function applyTheme(theme: ResolvedTheme) {
+  const root = document.documentElement;
+  root.classList.toggle("dark", theme === "dark");
+  root.dataset.theme = theme;
+  root.style.colorScheme = theme;
+  root.style.backgroundColor =
+    theme === "dark" ? "oklch(0.09 0.02 265)" : "oklch(0.98 0.005 260)";
+  localStorage.setItem("stagent-theme", theme);
+  document.cookie = `stagent-theme=${theme};path=/;max-age=31536000;SameSite=Lax`;
+}
+
+export function ThemeToggle() {
+  const [dark, setDark] = useState(false);
+
+  useEffect(() => {
+    const theme = resolveThemePreference();
+    applyTheme(theme);
+    setDark(theme === "dark");
+  }, []);
+
+  function toggle() {
+    const next = !dark;
+    applyTheme(next ? "dark" : "light");
+    setDark(next);
+  }
+
+  return (
+    <Button variant="ghost" size="icon" onClick={toggle} aria-label="Toggle theme">
+      {dark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+    </Button>
+  );
+}

package/src/components/tasks/ai-assist-panel.tsx

@@ -0,0 +1,210 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Sparkles, Loader2, Check, X } from "lucide-react";
+
+interface TaskSuggestion {
+  title: string;
+  description: string;
+}
+
+interface AssistResult {
+  improvedDescription: string;
+  breakdown: TaskSuggestion[];
+  recommendedPattern: string;
+  complexity: string;
+  needsCheckpoint: boolean;
+  reasoning: string;
+}
+
+interface AIAssistPanelProps {
+  title: string;
+  description: string;
+  assignedAgent?: string;
+  onApplyDescription: (description: string) => void;
+  onCreateSubtasks: (subtasks: TaskSuggestion[]) => void;
+  onResultChange?: (hasResult: boolean) => void;
+}
+
+const patternLabels: Record<string, string> = {
+  single: "Single Task",
+  sequence: "Sequence",
+  "planner-executor": "Planner → Executor",
+  checkpoint: "Human Checkpoint",
+};
+
+const complexityColors: Record<string, string> = {
+  simple: "text-complexity-simple",
+  moderate: "text-complexity-moderate",
+  complex: "text-complexity-complex",
+};
+
+export function AIAssistPanel({
+  title,
+  description,
+  assignedAgent,
+  onApplyDescription,
+  onCreateSubtasks,
+  onResultChange,
+}: AIAssistPanelProps) {
+  const [loading, setLoading] = useState(false);
+  const [result, setResult] = useState<AssistResult | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [descriptionApplied, setDescriptionApplied] = useState(false);
+
+  async function analyze() {
+    if (!title.trim() && !description.trim()) return;
+    setLoading(true);
+    setError(null);
+    setResult(null);
+    setDescriptionApplied(false);
+
+    try {
+      const res = await fetch("/api/tasks/assist", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ title, description, assignedAgent }),
+      });
+
+      if (!res.ok) {
+        const data = await res.json().catch(() => null);
+        setError(data?.error ?? "AI assist failed");
+        return;
+      }
+
+      const data = await res.json();
+      setResult(data);
+      onResultChange?.(true);
+    } catch {
+      setError("Network error");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  if (!result) {
+    return (
+      <div className="pt-2">
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={analyze}
+          disabled={loading || (!title.trim() && !description.trim())}
+          className="w-full"
+        >
+          {loading ? (
+            <Loader2 className="h-3 w-3 mr-1 animate-spin" />
+          ) : (
+            <Sparkles className="h-3 w-3 mr-1" />
+          )}
+          {loading ? "Analyzing..." : "AI Assist"}
+        </Button>
+        {error && <p className="text-xs text-destructive mt-1">{error}</p>}
+        <p className="text-xs text-muted-foreground text-center mt-1.5">
+          Suggests improved descriptions, sub-task breakdowns, and workflow patterns
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="pt-2 space-y-3">
+      {/* Header row — full width */}
+      <div className="flex items-center gap-2 flex-wrap">
+        <Sparkles className="h-4 w-4 text-primary" />
+        <span className="text-sm font-medium">AI Suggestions</span>
+        <Badge variant="outline" className="text-xs">
+          {patternLabels[result.recommendedPattern] ?? result.recommendedPattern}
+        </Badge>
+        <span className={`text-xs ${complexityColors[result.complexity] ?? ""}`}>
+          {result.complexity}
+        </span>
+        {result.needsCheckpoint && (
+          <Badge variant="secondary" className="text-xs">needs checkpoint</Badge>
+        )}
+      </div>
+
+      {/* Two-column grid for cards */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+        {/* Improved description */}
+        <Card>
+          <CardContent className="p-3">
+            <div className="flex items-center justify-between mb-1">
+              <span className="text-xs font-medium text-muted-foreground">
+                Improved Description
+              </span>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="h-6 text-xs"
+                onClick={() => {
+                  onApplyDescription(result.improvedDescription);
+                  setDescriptionApplied(true);
+                }}
+                disabled={descriptionApplied}
+              >
+                {descriptionApplied ? (
+                  <><Check className="h-3 w-3 mr-1" /> Applied</>
+                ) : (
+                  "Apply"
+                )}
+              </Button>
+            </div>
+            <p className="text-sm">{result.improvedDescription}</p>
+          </CardContent>
+        </Card>
+
+        {/* Task breakdown */}
+        {result.breakdown.length > 0 && (
+          <Card>
+            <CardContent className="p-3">
+              <div className="flex items-center justify-between mb-2">
+                <span className="text-xs font-medium text-muted-foreground">
+                  Suggested Breakdown ({result.breakdown.length} sub-tasks)
+                </span>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className="h-6 text-xs"
+                  onClick={() => onCreateSubtasks(result.breakdown)}
+                >
+                  Create All
+                </Button>
+              </div>
+              <div className="max-h-60 overflow-y-auto space-y-1.5">
+                {result.breakdown.map((sub, i) => (
+                  <div key={i} className="text-sm">
+                    <span className="font-medium">{sub.title}</span>
+                    <p className="text-xs text-muted-foreground">{sub.description}</p>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+
+      {/* Reasoning + Dismiss — full width */}
+      <p className="text-xs text-muted-foreground">{result.reasoning}</p>
+
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        onClick={() => {
+          setResult(null);
+          onResultChange?.(false);
+        }}
+        className="w-full"
+      >
+        <X className="h-3 w-3 mr-1" /> Dismiss
+      </Button>
+    </div>
+  );
+}