stagent 0.5.0 → 0.6.0

package/src/components/environment/environment-dashboard.tsx

@@ -17,7 +17,9 @@ import { CheckpointList } from "./checkpoint-list";
 import { TemplateList } from "./template-list";
 import { HealthScoreCard } from "./health-score-card";
 import { SuggestedProfiles } from "./suggested-profiles";
+import { ProfileCreateDialog } from "./profile-create-dialog";
 import type { HealthScore } from "@/lib/environment/health-scoring";
+import type { ProfileSuggestion } from "@/lib/environment/profile-rules";
 import { DiscoverWorkspaceDialog } from "@/components/workspace/discover-workspace-dialog";
 
 interface EnvironmentDashboardProps {
@@ -28,6 +30,7 @@ interface EnvironmentDashboardProps {
   checkpoints?: EnvironmentCheckpointRow[];
   templates?: EnvironmentTemplateRow[];
   healthScore?: HealthScore | null;
+  scanPath?: string;
 }
 
 export function EnvironmentDashboard({
@@ -38,6 +41,7 @@ export function EnvironmentDashboard({
   checkpoints = [],
   templates = [],
   healthScore,
+  scanPath,
 }: EnvironmentDashboardProps) {
   const router = useRouter();
   const [scanning, setScanning] = useState(false);
@@ -47,16 +51,46 @@ export function EnvironmentDashboard({
   const [scopeFilter, setScopeFilter] = useState<string | null>(null);
   const [searchQuery, setSearchQuery] = useState("");
   const [discoverOpen, setDiscoverOpen] = useState(false);
+  const [createProfileSuggestion, setCreateProfileSuggestion] = useState<ProfileSuggestion | null>(null);
+
+  /** Convert an unlinked skill artifact into a quick suggestion for profile creation. */
+  function artifactToSuggestion(artifact: EnvironmentArtifactRow): ProfileSuggestion {
+    const name = artifact.name
+      .replace(/-/g, " ")
+      .replace(/\b\w/g, (c) => c.toUpperCase());
+    let description = `Discovered skill: ${artifact.name}`;
+    if (artifact.metadata) {
+      try {
+        const meta = JSON.parse(artifact.metadata);
+        if (meta.description) description = meta.description;
+      } catch { /* ignore */ }
+    }
+    return {
+      ruleId: `discovered-${artifact.name}`,
+      name,
+      description,
+      confidence: 0.5,
+      tier: "discovered",
+      matchedArtifacts: [{ id: artifact.id, name: artifact.name, category: artifact.category }],
+      suggestedTools: ["Read", "Grep", "Glob", "Bash"],
+      systemPrompt: description,
+      tags: artifact.name.split("-").filter((t) => t.length > 2),
+    };
+  }
 
   const handleScan = useCallback(async () => {
     setScanning(true);
     try {
-      await fetch("/api/environment/scan", { method: "POST" });
+      await fetch("/api/environment/scan", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ projectDir: scanPath }),
+      });
       router.refresh();
     } finally {
       setScanning(false);
     }
-  }, [router]);
+  }, [router, scanPath]);
 
   // Filter artifacts client-side
   const filtered = artifacts.filter((a) => {
@@ -164,6 +198,11 @@ export function EnvironmentDashboard({
                   key={artifact.id}
                   artifact={artifact}
                   onClick={() => setSelectedArtifact(artifact)}
+                  onCreateProfile={
+                    artifact.category === "skill" && !artifact.linkedProfileId
+                      ? () => setCreateProfileSuggestion(artifactToSuggestion(artifact))
+                      : undefined
+                  }
                 />
               ))}
             </div>
@@ -195,6 +234,15 @@ export function EnvironmentDashboard({
         onOpenChange={setDiscoverOpen}
         onComplete={() => router.refresh()}
       />
+
+      {/* Profile creation from artifact card's "Create Profile" button */}
+      <ProfileCreateDialog
+        suggestion={createProfileSuggestion}
+        open={!!createProfileSuggestion}
+        onOpenChange={(open) => {
+          if (!open) setCreateProfileSuggestion(null);
+        }}
+      />
     </div>
   );
 }

package/src/components/environment/environment-summary-card.tsx

@@ -36,12 +36,15 @@ export function EnvironmentSummaryCard({
   const [scanning, setScanning] = useState(false);
 
   useEffect(() => {
-    fetch(`/api/environment/scan?projectId=${projectId}`)
+    // Auto-scan on mount: pass workingDirectory so the server can rescan if stale
+    const params = new URLSearchParams({ projectId });
+    if (workingDirectory) params.set("projectDir", workingDirectory);
+    fetch(`/api/environment/scan?${params}`)
       .then((res) => res.json())
       .then((json) => setData(json))
       .catch(() => setData(null))
       .finally(() => setLoading(false));
-  }, [projectId]);
+  }, [projectId, workingDirectory]);
 
   const handleScan = async () => {
     if (!workingDirectory) return;

package/src/components/environment/suggested-profiles.tsx

@@ -1,8 +1,7 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { useRouter } from "next/navigation";
-import { Bot, Sparkles } from "lucide-react";
+import { Bot, Sparkles, ChevronDown, ChevronRight } from "lucide-react";
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -13,22 +12,91 @@ interface SuggestedProfilesProps {
   scanId?: string;
 }
 
+function SuggestionCard({
+  suggestion,
+  onSelect,
+}: {
+  suggestion: ProfileSuggestion;
+  onSelect: () => void;
+}) {
+  return (
+    <Card className="elevation-1 hover:border-primary/40 transition-colors">
+      <CardContent className="p-4 space-y-2.5">
+        <div className="flex items-start justify-between">
+          <div className="flex items-center gap-2">
+            <Bot className="h-4 w-4 text-primary" />
+            <span className="text-sm font-medium">{suggestion.name}</span>
+          </div>
+          <div className="flex items-center gap-1.5 shrink-0">
+            {suggestion.tier === "discovered" && (
+              <Badge variant="secondary" className="text-[10px]">
+                Discovered
+              </Badge>
+            )}
+            <Badge variant="outline" className="text-[10px]">
+              {Math.round(suggestion.confidence * 100)}%
+            </Badge>
+          </div>
+        </div>
+
+        <p className="text-xs text-muted-foreground line-clamp-2">
+          {suggestion.description}
+        </p>
+
+        <div className="flex flex-wrap gap-1">
+          {suggestion.matchedArtifacts.map((a, i) => (
+            <Badge
+              key={`${a.id}-${i}`}
+              variant="secondary"
+              className="text-[10px] px-1.5 py-0"
+            >
+              {a.name}
+            </Badge>
+          ))}
+        </div>
+
+        <Button
+          variant="outline"
+          size="sm"
+          className="w-full"
+          onClick={onSelect}
+        >
+          Create Profile
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}
+
 export function SuggestedProfiles({ scanId }: SuggestedProfilesProps) {
-  const [suggestions, setSuggestions] = useState<ProfileSuggestion[]>([]);
+  const [curated, setCurated] = useState<ProfileSuggestion[]>([]);
+  const [discovered, setDiscovered] = useState<ProfileSuggestion[]>([]);
   const [loading, setLoading] = useState(true);
-  const [selectedSuggestion, setSelectedSuggestion] = useState<ProfileSuggestion | null>(null);
+  const [selectedSuggestion, setSelectedSuggestion] =
+    useState<ProfileSuggestion | null>(null);
+  const [discoveredExpanded, setDiscoveredExpanded] = useState(false);
 
   useEffect(() => {
-    if (!scanId) { setLoading(false); return; }
+    if (!scanId) {
+      setLoading(false);
+      return;
+    }
 
-    fetch(`/api/environment/profiles/suggest?scanId=${scanId}`)
+    fetch(`/api/environment/profiles/suggest?scanId=${scanId}&tiered=true`)
       .then((res) => res.json())
-      .then((data) => setSuggestions(data.suggestions || []))
-      .catch(() => setSuggestions([]))
+      .then((data) => {
+        setCurated(data.curated || []);
+        setDiscovered(data.discovered || []);
+      })
+      .catch(() => {
+        setCurated([]);
+        setDiscovered([]);
+      })
       .finally(() => setLoading(false));
   }, [scanId]);
 
-  if (loading || suggestions.length === 0) return null;
+  const totalCount = curated.length + discovered.length;
+  if (loading || totalCount === 0) return null;
 
   return (
     <div className="space-y-3">
@@ -36,54 +104,51 @@ export function SuggestedProfiles({ scanId }: SuggestedProfilesProps) {
         <Sparkles className="h-4 w-4 text-primary" />
         <h3 className="text-sm font-medium">Suggested Profiles</h3>
         <Badge variant="secondary" className="text-[10px]">
-          {suggestions.length} suggestion{suggestions.length !== 1 ? "s" : ""}
+          {totalCount} suggestion{totalCount !== 1 ? "s" : ""}
         </Badge>
       </div>
 
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
-        {suggestions.map((suggestion) => (
-          <Card
-            key={suggestion.ruleId}
-            className="elevation-1 hover:border-primary/40 transition-colors"
-          >
-            <CardContent className="p-4 space-y-2.5">
-              <div className="flex items-start justify-between">
-                <div className="flex items-center gap-2">
-                  <Bot className="h-4 w-4 text-primary" />
-                  <span className="text-sm font-medium">{suggestion.name}</span>
-                </div>
-                <Badge
-                  variant="outline"
-                  className="text-[10px] shrink-0"
-                >
-                  {Math.round(suggestion.confidence * 100)}%
-                </Badge>
-              </div>
-
-              <p className="text-xs text-muted-foreground line-clamp-2">
-                {suggestion.description}
-              </p>
+      {/* Tier 1: Curated suggestions */}
+      {curated.length > 0 && (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+          {curated.map((suggestion) => (
+            <SuggestionCard
+              key={suggestion.ruleId}
+              suggestion={suggestion}
+              onSelect={() => setSelectedSuggestion(suggestion)}
+            />
+          ))}
+        </div>
+      )}
 
-              <div className="flex flex-wrap gap-1">
-                {suggestion.matchedArtifacts.map((a, i) => (
-                  <Badge key={`${a.id}-${i}`} variant="secondary" className="text-[10px] px-1.5 py-0">
-                    {a.name}
-                  </Badge>
-                ))}
-              </div>
+      {/* Tier 2: Discovered suggestions (collapsible) */}
+      {discovered.length > 0 && (
+        <div className="space-y-2">
+          <button
+            onClick={() => setDiscoveredExpanded(!discoveredExpanded)}
+            className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
+          >
+            {discoveredExpanded ? (
+              <ChevronDown className="h-3 w-3" />
+            ) : (
+              <ChevronRight className="h-3 w-3" />
+            )}
+            {discovered.length} discoverable skill{discovered.length !== 1 ? "s" : ""}
+          </button>
 
-              <Button
-                variant="outline"
-                size="sm"
-                className="w-full"
-                onClick={() => setSelectedSuggestion(suggestion)}
-              >
-                Create Profile
-              </Button>
-            </CardContent>
-          </Card>
-        ))}
-      </div>
+          {discoveredExpanded && (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+              {discovered.map((suggestion) => (
+                <SuggestionCard
+                  key={suggestion.ruleId}
+                  suggestion={suggestion}
+                  onSelect={() => setSelectedSuggestion(suggestion)}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      )}
 
       <ProfileCreateDialog
         suggestion={selectedSuggestion}

package/src/components/handoffs/handoff-approval-card.tsx

@@ -0,0 +1,159 @@
+"use client";
+
+import { useState } from "react";
+import {
+  ArrowRight,
+  CheckCircle2,
+  XCircle,
+  Clock,
+  AlertTriangle,
+} from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+
+interface HandoffApprovalCardProps {
+  id: string;
+  fromProfileId: string;
+  toProfileId: string;
+  subject: string;
+  body: string;
+  priority: number;
+  chainDepth: number;
+  status: string;
+  requiresApproval: boolean;
+  onActionComplete?: () => void;
+}
+
+const PRIORITY_LABELS: Record<number, string> = {
+  0: "Critical",
+  1: "High",
+  2: "Medium",
+  3: "Low",
+};
+
+const PRIORITY_VARIANTS: Record<number, "destructive" | "default" | "secondary" | "outline"> = {
+  0: "destructive",
+  1: "default",
+  2: "secondary",
+  3: "outline",
+};
+
+const STATUS_ICONS: Record<string, typeof Clock> = {
+  pending: Clock,
+  accepted: CheckCircle2,
+  in_progress: Clock,
+  completed: CheckCircle2,
+  rejected: XCircle,
+  expired: AlertTriangle,
+};
+
+const STATUS_VARIANTS: Record<string, "default" | "secondary" | "destructive" | "outline"> = {
+  pending: "outline",
+  accepted: "default",
+  in_progress: "default",
+  completed: "secondary",
+  rejected: "destructive",
+  expired: "outline",
+};
+
+export function HandoffApprovalCard({
+  id,
+  fromProfileId,
+  toProfileId,
+  subject,
+  body,
+  priority,
+  chainDepth,
+  status,
+  requiresApproval,
+  onActionComplete,
+}: HandoffApprovalCardProps) {
+  const [acting, setActing] = useState(false);
+
+  const StatusIcon = STATUS_ICONS[status] ?? Clock;
+
+  const handleAction = async (action: "approve" | "reject") => {
+    setActing(true);
+    try {
+      const res = await fetch(`/api/handoffs/${id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action, approvedBy: "user" }),
+      });
+
+      if (res.ok) {
+        toast.success(`Handoff ${action === "approve" ? "approved" : "rejected"}`);
+        onActionComplete?.();
+      } else {
+        const data = await res.json();
+        toast.error(data.error ?? `Failed to ${action} handoff`);
+      }
+    } catch {
+      toast.error(`Failed to ${action} handoff`);
+    } finally {
+      setActing(false);
+    }
+  };
+
+  return (
+    <div className="rounded-lg border p-4 space-y-3">
+      <div className="flex items-start justify-between">
+        <div className="space-y-1">
+          <h4 className="text-sm font-medium">{subject}</h4>
+          <div className="flex items-center gap-2 text-xs text-muted-foreground">
+            <span className="font-mono">{fromProfileId}</span>
+            <ArrowRight className="h-3 w-3" />
+            <span className="font-mono">{toProfileId}</span>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <Badge variant={PRIORITY_VARIANTS[priority] ?? "secondary"}>
+            {PRIORITY_LABELS[priority] ?? "Medium"}
+          </Badge>
+          <Badge variant={STATUS_VARIANTS[status] ?? "outline"}>
+            <StatusIcon className="mr-1 h-3 w-3" />
+            {status}
+          </Badge>
+        </div>
+      </div>
+
+      <p className="text-sm text-muted-foreground line-clamp-3">{body}</p>
+
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+          {chainDepth > 0 && (
+            <span>Chain depth: {chainDepth}</span>
+          )}
+          {requiresApproval && status === "pending" && (
+            <Badge variant="outline" className="text-xs">
+              Awaiting approval
+            </Badge>
+          )}
+        </div>
+
+        {status === "pending" && requiresApproval && (
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => handleAction("reject")}
+              disabled={acting}
+            >
+              <XCircle className="mr-1 h-3.5 w-3.5" />
+              Reject
+            </Button>
+            <Button
+              size="sm"
+              onClick={() => handleAction("approve")}
+              disabled={acting}
+            >
+              <CheckCircle2 className="mr-1 h-3.5 w-3.5" />
+              Approve
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}