stagent 0.1.0

package/src/components/settings/data-management-section.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import { useState } from "react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { Badge } from "@/components/ui/badge";
+import { ConfirmDialog } from "@/components/shared/confirm-dialog";
+import { toast } from "sonner";
+import { Loader2, Trash2, Database } from "lucide-react";
+
+export function DataManagementSection() {
+  const [clearOpen, setClearOpen] = useState(false);
+  const [seedOpen, setSeedOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  async function handleClear() {
+    setLoading(true);
+    try {
+      const res = await fetch("/api/data/clear", { method: "POST" });
+      const data = await res.json();
+      if (data.success) {
+        const d = data.deleted;
+        toast.success(
+          `Cleared ${d.projects} projects, ${d.tasks} tasks, ${d.workflows} workflows, ${d.schedules} schedules, ${d.documents} documents, ${d.agentLogs} logs, ${d.notifications} notifications, ${d.sampleProfiles} sample profiles, ${d.files} files`
+        );
+      } else {
+        toast.error(`Clear failed: ${data.error}`);
+      }
+    } catch {
+      toast.error("Clear failed — network error");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleSeed() {
+    setLoading(true);
+    try {
+      const res = await fetch("/api/data/seed", { method: "POST" });
+      const data = await res.json();
+      if (data.success) {
+        const s = data.seeded;
+        toast.success(
+          `Seeded ${s.profiles} profiles, ${s.projects} projects, ${s.tasks} tasks, ${s.workflows} workflows, ${s.schedules} schedules, ${s.documents} documents, ${s.agentLogs} logs, ${s.notifications} notifications`
+        );
+      } else {
+        toast.error(`Seed failed: ${data.error}`);
+      }
+    } catch {
+      toast.error("Seed failed — network error");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <>
+      <Card className="surface-card">
+        <CardHeader>
+          <CardTitle>Data Management</CardTitle>
+          <CardDescription>
+            Reset or populate your Stagent instance
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="space-y-3">
+            <div className="flex items-center gap-2">
+              <p className="text-sm text-muted-foreground">
+                Delete all projects, tasks, workflows, schedules, documents,
+                agent logs, notifications, seeded sample profiles, and uploaded
+                files. Authentication settings are preserved.
+              </p>
+              <Badge variant="destructive" className="shrink-0">Irreversible</Badge>
+            </div>
+            <Button
+              variant="destructive"
+              onClick={() => setClearOpen(true)}
+              disabled={loading}
+            >
+              {loading ? (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              ) : (
+                <Trash2 className="mr-2 h-4 w-4" />
+              )}
+              Clear All Data
+            </Button>
+          </div>
+
+          <Separator />
+
+          <div className="space-y-3">
+            <p className="text-sm text-muted-foreground">
+              Populate with 3 custom profiles, 5 realistic projects, 25 tasks
+              across varied statuses, 5 workflows, 4 schedules, 12 documents
+              (XLSX, PDF, DOCX, PPTX), agent logs, and notifications. Existing
+              data is cleared first.
+            </p>
+            <Button
+              variant="outline"
+              onClick={() => setSeedOpen(true)}
+              disabled={loading}
+            >
+              {loading ? (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              ) : (
+                <Database className="mr-2 h-4 w-4" />
+              )}
+              Seed Sample Data
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      <ConfirmDialog
+        open={clearOpen}
+        onOpenChange={setClearOpen}
+        title="Clear all data?"
+        description="This will permanently delete all projects, tasks, workflows, schedules, documents, agent logs, notifications, seeded sample profiles, and uploaded files. Authentication settings will be preserved. This action cannot be undone."
+        confirmLabel="Clear All Data"
+        onConfirm={handleClear}
+        destructive
+      />
+
+      <ConfirmDialog
+        open={seedOpen}
+        onOpenChange={setSeedOpen}
+        title="Seed sample data?"
+        description="This will clear all existing data first, then populate with 3 custom profiles, 5 projects, 25 tasks, 5 workflows, 4 schedules, 12 documents (XLSX, PDF, DOCX, PPTX), agent logs, and notifications. Any current data will be lost."
+        confirmLabel="Seed Data"
+        onConfirm={handleSeed}
+      />
+    </>
+  );
+}

package/src/components/settings/openai-runtime-section.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { ApiKeyForm } from "./api-key-form";
+import { AuthStatusBadge } from "./auth-status-badge";
+
+interface OpenAISettings {
+  hasKey: boolean;
+  apiKeySource: "db" | "env" | "unknown";
+}
+
+export function OpenAIRuntimeSection() {
+  const [settings, setSettings] = useState<OpenAISettings>({
+    hasKey: false,
+    apiKeySource: "unknown",
+  });
+  const [connected, setConnected] = useState(false);
+
+  const fetchSettings = useCallback(async () => {
+    const res = await fetch("/api/settings/openai");
+    if (res.ok) {
+      const data = (await res.json()) as OpenAISettings;
+      setSettings(data);
+      setConnected(data.hasKey);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchSettings();
+  }, [fetchSettings]);
+
+  async function handleSaveKey(apiKey: string) {
+    const res = await fetch("/api/settings/openai", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ apiKey }),
+    });
+    if (res.ok) {
+      const data = (await res.json()) as OpenAISettings;
+      setSettings(data);
+      setConnected(true);
+    }
+  }
+
+  async function handleTestConnection() {
+    const res = await fetch("/api/settings/test", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ runtime: "openai-codex-app-server" }),
+    });
+    const data = await res.json();
+    setConnected(data.connected);
+    if (data.connected) {
+      setSettings((prev) => ({
+        ...prev,
+        apiKeySource: (data.apiKeySource || "unknown") as OpenAISettings["apiKeySource"],
+      }));
+    }
+    return data;
+  }
+
+  return (
+    <Card className="surface-card">
+      <CardHeader>
+        <div className="flex items-center justify-between gap-4">
+          <div>
+            <CardTitle>OpenAI Codex Runtime</CardTitle>
+            <CardDescription>
+              Configure the OpenAI API key used by the Codex app-server runtime.
+            </CardDescription>
+          </div>
+          <AuthStatusBadge
+            connected={connected}
+            apiKeySource={settings.apiKeySource}
+          />
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        <p className="text-sm text-muted-foreground">
+          This runtime uses `codex app-server` with resumable threads, inbox approvals, and the same workflow/schedule pipeline as Claude-backed tasks.
+        </p>
+        <Separator />
+        <ApiKeyForm
+          hasKey={settings.hasKey}
+          onSave={handleSaveKey}
+          onTest={handleTestConnection}
+          keyPrefix="sk-"
+          placeholder="sk-..."
+          maskedPrefix="sk-••••••"
+          envVarName="OPENAI_API_KEY"
+          testButtonLabel="Test Codex Runtime"
+        />
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/settings/permissions-section.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { ShieldCheck, X } from "lucide-react";
+
+export function PermissionsSection() {
+  const [permissions, setPermissions] = useState<string[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [revoking, setRevoking] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetchPermissions();
+  }, []);
+
+  async function fetchPermissions() {
+    try {
+      const res = await fetch("/api/permissions");
+      if (res.ok) {
+        const data = await res.json();
+        setPermissions(data.permissions ?? []);
+      }
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleRevoke(pattern: string) {
+    setRevoking(pattern);
+    try {
+      const res = await fetch("/api/permissions", {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ pattern }),
+      });
+      if (res.ok) {
+        setPermissions((prev) => prev.filter((p) => p !== pattern));
+      }
+    } finally {
+      setRevoking(null);
+    }
+  }
+
+  return (
+    <Card className="surface-card">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <ShieldCheck className="h-5 w-5" />
+          Tool Permissions
+        </CardTitle>
+        <CardDescription>
+          Tools matching these patterns are automatically approved when agents request permission.
+          Revoke a pattern to require manual approval again.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        {loading ? (
+          <p className="text-sm text-muted-foreground">Loading...</p>
+        ) : permissions.length === 0 ? (
+          <p className="text-sm text-muted-foreground">
+            No saved permissions. Click &quot;Always Allow&quot; on a tool permission request in the Inbox to add one.
+          </p>
+        ) : (
+          <div className="flex flex-wrap gap-2">
+            {permissions.map((pattern) => (
+              <Badge
+                key={pattern}
+                variant="secondary"
+                className="font-mono text-xs px-3 py-1.5 gap-1.5"
+              >
+                {pattern}
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-4 w-4 p-0 hover:bg-transparent"
+                  onClick={() => handleRevoke(pattern)}
+                  disabled={revoking === pattern}
+                  aria-label={`Revoke ${pattern}`}
+                >
+                  <X className="h-3 w-3" />
+                </Button>
+              </Badge>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/shared/app-sidebar.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import {
+  Home,
+  LayoutDashboard,
+  Inbox,
+  Activity,
+  FolderKanban,
+  GitBranch,
+  FileText,
+  Bot,
+  Clock,
+  Wallet,
+  Settings,
+} from "lucide-react";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarHeader,
+  SidebarTrigger,
+  SidebarRail,
+} from "@/components/ui/sidebar";
+import { ThemeToggle } from "@/components/shared/theme-toggle";
+import { UnreadBadge } from "@/components/notifications/unread-badge";
+import { AuthStatusDot } from "@/components/settings/auth-status-dot";
+import { StagentLogo } from "@/components/shared/stagent-logo";
+
+const navItems = [
+  { title: "Home", href: "/", icon: Home, badge: false },
+  { title: "Dashboard", href: "/dashboard", icon: LayoutDashboard, badge: false, alsoMatches: ["/tasks"] },
+  { title: "Inbox", href: "/inbox", icon: Inbox, badge: true },
+  { title: "Monitor", href: "/monitor", icon: Activity, badge: false },
+  { title: "Projects", href: "/projects", icon: FolderKanban, badge: false },
+  { title: "Workflows", href: "/workflows", icon: GitBranch, badge: false },
+  { title: "Documents", href: "/documents", icon: FileText, badge: false },
+  { title: "Profiles", href: "/profiles", icon: Bot, badge: false },
+  { title: "Schedules", href: "/schedules", icon: Clock, badge: false },
+  { title: "Cost & Usage", href: "/costs", icon: Wallet, badge: false },
+  { title: "Settings", href: "/settings", icon: Settings, badge: false },
+];
+
+export function AppSidebar() {
+  const pathname = usePathname();
+
+  return (
+    <Sidebar collapsible="icon" className="glass-sidebar">
+      <SidebarHeader className="px-4 py-3">
+        <div className="flex items-center justify-between">
+          <Link href="/" className="flex items-center gap-2 group-data-[collapsible=icon]:hidden">
+            <StagentLogo size={24} className="shrink-0" />
+            <span className="text-lg font-bold tracking-tight">Stagent</span>
+          </Link>
+          <Link href="/" className="hidden group-data-[collapsible=icon]:flex items-center justify-center" aria-label="Stagent home">
+            <StagentLogo size={20} />
+          </Link>
+          <SidebarTrigger className="group-data-[collapsible=icon]:hidden" />
+        </div>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {navItems.map((item) => (
+                <SidebarMenuItem key={item.href}>
+                  <SidebarMenuButton
+                    asChild
+                    tooltip={item.title}
+                    isActive={
+                      item.href === "/"
+                        ? pathname === "/"
+                        : pathname === item.href || pathname.startsWith(item.href + "/")
+                          || (item.alsoMatches?.some(p => pathname.startsWith(p)) ?? false)
+                    }
+                  >
+                    <Link href={item.href}>
+                      <item.icon className="h-4 w-4" aria-hidden="true" />
+                      <span>{item.title}</span>
+                      {item.badge && <span className="group-data-[collapsible=icon]:hidden"><UnreadBadge /></span>}
+                    </Link>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarFooter className="px-4 py-3">
+        <div className="flex items-center justify-between group-data-[collapsible=icon]:justify-center">
+          <div className="flex items-center gap-2 group-data-[collapsible=icon]:hidden">
+            <AuthStatusDot />
+          </div>
+          <div className="flex items-center gap-1">
+            <button
+              onClick={() =>
+                document.dispatchEvent(
+                  new KeyboardEvent("keydown", {
+                    key: "k",
+                    metaKey: true,
+                    bubbles: true,
+                  })
+                )
+              }
+              className="h-7 px-1.5 rounded-md border border-border/50 text-[10px] font-medium text-muted-foreground hover:bg-accent/50 transition-colors cursor-pointer group-data-[collapsible=icon]:hidden"
+              aria-label="Open command palette (⌘K)"
+            >
+              <kbd>⌘K</kbd>
+            </button>
+            <ThemeToggle />
+          </div>
+        </div>
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  );
+}

package/src/components/shared/card-skeleton.tsx

@@ -0,0 +1,42 @@
+import { Card, CardHeader, CardContent } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+
+interface CardSkeletonProps {
+  /** Width class for the title skeleton (default: "w-24") */
+  titleWidth?: string;
+  /** Number of body skeleton lines (default: 2) */
+  lines?: number;
+  /** Additional className on the Card */
+  className?: string;
+  /** Show a subtitle skeleton below the title */
+  subtitle?: boolean;
+  /** Custom skeleton content instead of default lines */
+  children?: React.ReactNode;
+}
+
+export function CardSkeleton({
+  titleWidth = "w-24",
+  lines = 2,
+  className,
+  subtitle,
+  children,
+}: CardSkeletonProps) {
+  return (
+    <Card className={cn(className)}>
+      <CardHeader className="pb-2">
+        <Skeleton className={cn("h-4", titleWidth)} />
+        {subtitle && <Skeleton className="h-3 w-32 mt-1" />}
+      </CardHeader>
+      <CardContent className="space-y-2">
+        {children ??
+          Array.from({ length: lines }, (_, i) => (
+            <Skeleton
+              key={i}
+              className={cn("h-3", i === lines - 1 ? "w-3/4" : "w-full")}
+            />
+          ))}
+      </CardContent>
+    </Card>
+  );
+}