stagent 0.5.0 → 0.6.1

package/src/components/chat/chat-command-popover.tsx

@@ -21,7 +21,7 @@ import {
 } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import {
-  getToolCatalog,
+  getToolCatalogWithSkills,
   groupToolCatalog,
   TOOL_GROUP_ICONS,
   TOOL_GROUP_ORDER,
@@ -36,6 +36,7 @@ interface ChatCommandPopoverProps {
   anchorRect: { top: number; left: number; height: number } | null;
   entityResults: EntitySearchResult[];
   entityLoading: boolean;
+  projectProfiles?: Array<{ id: string; name: string; description: string }>;
   onSelect: (item: {
     type: "slash" | "mention";
     id: string;
@@ -81,6 +82,7 @@ export function ChatCommandPopover({
   anchorRect,
   entityResults,
   entityLoading,
+  projectProfiles,
   onSelect,
   onClose,
 }: ChatCommandPopoverProps) {
@@ -116,7 +118,7 @@ export function ChatCommandPopover({
       data-chat-autocomplete=""
       className="rounded-lg border bg-popover text-popover-foreground shadow-lg animate-in fade-in-0 zoom-in-95 slide-in-from-bottom-2"
     >
-      <Command shouldFilter={mode === "slash"} loop>
+      <Command shouldFilter loop>
         {/* Hidden input for cmdk filtering — synced to query */}
         <div className="sr-only">
           <CommandInput value={query} />
@@ -127,13 +129,17 @@ export function ChatCommandPopover({
             {mode === "slash" ? "No matching tools" : "No matching entities"}
           </CommandEmpty>
 
-          {mode === "slash" && <ToolCatalogItems onSelect={onSelect} />}
+          {mode === "slash" && (
+            <ToolCatalogItems
+              onSelect={onSelect}
+              projectProfiles={projectProfiles}
+            />
+          )}
 
           {mode === "mention" && (
             <MentionItems
               results={entityResults}
               loading={entityLoading}
-              query={query}
               onSelect={onSelect}
             />
           )}
@@ -147,10 +153,15 @@ export function ChatCommandPopover({
 
 function ToolCatalogItems({
   onSelect,
+  projectProfiles,
 }: {
   onSelect: ChatCommandPopoverProps["onSelect"];
+  projectProfiles?: ChatCommandPopoverProps["projectProfiles"];
 }) {
-  const catalog = getToolCatalog({ includeBrowser: true });
+  const catalog = getToolCatalogWithSkills({
+    includeBrowser: true,
+    projectProfiles,
+  });
   const groups = groupToolCatalog(catalog);
 
   return (
@@ -172,7 +183,9 @@ function ToolCatalogItems({
                     label: entry.name,
                     text: entry.behavior === "execute_immediately"
                       ? entry.name
-                      : `Use ${entry.name} to `,
+                      : entry.group === "Skills"
+                        ? `Use the ${entry.name} profile: `
+                        : `Use ${entry.name} to `,
                   })
                 }
               >
@@ -200,27 +213,17 @@ function ToolCatalogItems({
 function MentionItems({
   results,
   loading,
-  query,
   onSelect,
 }: {
   results: EntitySearchResult[];
   loading: boolean;
-  query: string;
   onSelect: ChatCommandPopoverProps["onSelect"];
 }) {
   if (loading && results.length === 0) {
     return (
       <div className="flex items-center gap-2 px-3 py-4 text-sm text-muted-foreground">
         <Loader2 className="h-4 w-4 animate-spin" />
-        Searching...
-      </div>
-    );
-  }
-
-  if (!query) {
-    return (
-      <div className="px-3 py-4 text-sm text-muted-foreground text-center">
-        Type to search entities...
+        Loading...
       </div>
     );
   }
@@ -228,7 +231,7 @@ function MentionItems({
   const grouped = groupByType(results);
   const entityTypes = Object.keys(grouped);
 
-  if (entityTypes.length === 0 && !loading) {
+  if (entityTypes.length === 0) {
     return null; // CommandEmpty will show
   }
 
@@ -242,7 +245,7 @@ function MentionItems({
             {grouped[type].map((entity) => (
               <CommandItem
                 key={`${entity.entityType}-${entity.entityId}`}
-                value={`${entity.entityType} ${entity.label}`}
+                value={`${entity.entityType} ${entity.label} ${entity.description ?? ""} ${entity.status ?? ""}`}
                 onSelect={() =>
                   onSelect({
                     type: "mention",

package/src/components/chat/chat-input.tsx

@@ -8,6 +8,7 @@ import { ChatModelSelector } from "./chat-model-selector";
 import { ChatCommandPopover } from "./chat-command-popover";
 import { useChatAutocomplete, type MentionReference } from "@/hooks/use-chat-autocomplete";
 import { getToolCatalog } from "@/lib/chat/tool-catalog";
+import { useProjectSkills } from "@/hooks/use-project-skills";
 import type { ChatModelOption } from "@/lib/chat/types";
 
 interface ChatInputProps {
@@ -19,6 +20,7 @@ interface ChatInputProps {
   modelId?: string;
   onModelChange?: (modelId: string) => void;
   availableModels?: ChatModelOption[];
+  projectId?: string | null;
 }
 
 export function ChatInput({
@@ -30,10 +32,12 @@ export function ChatInput({
   modelId,
   onModelChange,
   availableModels,
+  projectId,
 }: ChatInputProps) {
   const [value, setValue] = useState("");
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const autocomplete = useChatAutocomplete();
+  const { skills: projectSkills } = useProjectSkills(projectId);
 
   // Sync textarea ref with autocomplete hook
   useEffect(() => {
@@ -206,6 +210,7 @@ export function ChatInput({
         anchorRect={autocomplete.state.anchorRect}
         entityResults={autocomplete.entityResults}
         entityLoading={autocomplete.entityLoading}
+        projectProfiles={projectSkills.length > 0 ? projectSkills : undefined}
         onSelect={handlePopoverSelect}
         onClose={autocomplete.close}
       />

package/src/components/chat/chat-model-selector.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import { CHAT_MODELS, DEFAULT_CHAT_MODEL, type ChatModelOption } from "@/lib/chat/types";
 import { Button } from "@/components/ui/button";
 import {
@@ -24,6 +25,7 @@ const tierEmoji: Record<string, string> = {
   Fast: "\u26A1",
   Balanced: "\u2728",
   Best: "\uD83D\uDC8E",
+  Local: "\uD83C\uDFE0",
 };
 
 export function ChatModelSelector({
@@ -31,7 +33,27 @@ export function ChatModelSelector({
   onModelChange,
   models = CHAT_MODELS,
 }: ChatModelSelectorProps) {
-  const current = models.find((m) => m.id === modelId) ?? models[0] ?? { id: modelId, label: modelId, provider: "anthropic" as const, tier: "Balanced", costLabel: "$$" };
+  const [ollamaModels, setOllamaModels] = useState<ChatModelOption[]>([]);
+
+  // Fetch available Ollama models on mount
+  useEffect(() => {
+    fetch("/api/runtimes/ollama")
+      .then((r) => (r.ok ? r.json() : { models: [] }))
+      .then((data: { models?: Array<{ name: string; details?: { parameter_size?: string } }> }) => {
+        const models = (data.models ?? []).map((m) => ({
+          id: `ollama:${m.name}`,
+          label: m.name.replace(/:latest$/, ""),
+          provider: "ollama" as const,
+          tier: "Local",
+          costLabel: "Free",
+        }));
+        setOllamaModels(models);
+      })
+      .catch(() => {});
+  }, []);
+
+  const allModels = [...models, ...ollamaModels];
+  const current = allModels.find((m) => m.id === modelId) ?? allModels[0] ?? { id: modelId, label: modelId, provider: "anthropic" as const, tier: "Balanced", costLabel: "$$" };
 
   const anthropicModels = models.filter(
     (m) => m.provider === "anthropic"
@@ -83,6 +105,25 @@ export function ChatModelSelector({
             </DropdownMenuGroup>
           </>
         )}
+
+        {ollamaModels.length > 0 && (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
+              Ollama (Local)
+            </DropdownMenuLabel>
+            <DropdownMenuGroup>
+              {ollamaModels.map((m) => (
+                <ModelMenuItem
+                  key={m.id}
+                  model={m}
+                  isSelected={m.id === modelId}
+                  onSelect={onModelChange}
+                />
+              ))}
+            </DropdownMenuGroup>
+          </>
+        )}
       </DropdownMenuContent>
     </DropdownMenu>
   );

package/src/components/chat/chat-shell.tsx

@@ -515,6 +515,7 @@ export function ChatShell({
                 modelId={modelId}
                 onModelChange={handleModelChange}
                 availableModels={availableModels}
+                projectId={activeConversation?.projectId}
               />
             </ChatEmptyState>
           </div>
@@ -539,6 +540,7 @@ export function ChatShell({
               modelId={modelId}
               onModelChange={handleModelChange}
               availableModels={availableModels}
+              projectId={activeConversation?.projectId}
             />
           </>
         )}

package/src/components/dashboard/welcome-landing.tsx

@@ -1,22 +1,22 @@
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
-import { Shield, GitBranch, Wallet } from "lucide-react";
+import { Shield, Zap, Wallet } from "lucide-react";
 
 const pillars = [
   {
     icon: Shield,
-    title: "Governed Execution",
-    description: "Every agent action requires explicit approval. Full audit trail for every decision.",
+    title: "Your Rules, Enforced",
+    description: "Every agent action respects your policies. Full audit trail for every decision.",
   },
   {
-    icon: GitBranch,
-    title: "Reusable Automation",
-    description: "Build workflow templates once, run them many times. Profile-aware agent routing.",
+    icon: Zap,
+    title: "Business on Autopilot",
+    description: "Build workflow templates once, run them many times. 21 specialist profiles ready to deploy.",
   },
   {
     icon: Wallet,
-    title: "Cost & Visibility",
-    description: "Track spend per task, per runtime. Budget guardrails prevent surprise bills.",
+    title: "Know What You Spend",
+    description: "Track spend per task, per provider. Budget guardrails prevent surprise bills.",
   },
 ];
 
@@ -31,7 +31,7 @@ export function WelcomeLanding() {
         Welcome to Stagent
       </h1>
       <p className="text-base text-muted-foreground mb-8 max-w-lg">
-        The governed AI agent operations workspace. Execute tasks, manage workflows, and maintain full oversight of your AI agents.
+        Your AI Business Operating System. Deploy AI agents, automate business processes, and maintain full control of spend and execution.
       </p>
 
       <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 w-full mb-8">

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

@@ -2,6 +2,8 @@
 
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Bot, Link as LinkIcon } from "lucide-react";
 import type { EnvironmentArtifactRow } from "@/lib/db/schema";
 import { CATEGORY_META } from "./summary-cards-row";
 import { PersonaIndicator } from "./persona-indicator";
@@ -9,6 +11,7 @@ import { PersonaIndicator } from "./persona-indicator";
 interface ArtifactCardProps {
   artifact: EnvironmentArtifactRow;
   onClick: () => void;
+  onCreateProfile?: () => void;
 }
 
 function formatSize(bytes: number): string {
@@ -17,7 +20,7 @@ function formatSize(bytes: number): string {
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
 
-export function ArtifactCard({ artifact, onClick }: ArtifactCardProps) {
+export function ArtifactCard({ artifact, onClick, onCreateProfile }: ArtifactCardProps) {
   const meta = CATEGORY_META[artifact.category];
   const Icon = meta?.icon;
 
@@ -57,10 +60,33 @@ export function ArtifactCard({ artifact, onClick }: ArtifactCardProps) {
           <Badge variant="secondary" className="text-[10px] px-1.5 py-0">
             {artifact.scope}
           </Badge>
+          {/* Profile linkage indicator for skill artifacts */}
+          {artifact.category === "skill" && artifact.linkedProfileId && (
+            <Badge variant="default" className="text-[10px] px-1.5 py-0 gap-0.5">
+              <LinkIcon className="h-2.5 w-2.5" />
+              Profile
+            </Badge>
+          )}
           <span className="text-[10px] text-muted-foreground ml-auto">
             {formatSize(artifact.sizeBytes)}
           </span>
         </div>
+
+        {/* Create Profile button for unlinked skill artifacts */}
+        {artifact.category === "skill" && !artifact.linkedProfileId && onCreateProfile && (
+          <Button
+            variant="outline"
+            size="sm"
+            className="w-full text-xs gap-1.5"
+            onClick={(e) => {
+              e.stopPropagation();
+              onCreateProfile();
+            }}
+          >
+            <Bot className="h-3 w-3" />
+            Create Profile
+          </Button>
+        )}
       </CardContent>
     </Card>
   );

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}