stagent 0.1.0

package/src/components/profiles/profile-browser.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import { useRouter } from "next/navigation";
+import { Plus, Search, Bot, Download } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { EmptyState } from "@/components/shared/empty-state";
+import { ProfileCard } from "@/components/profiles/profile-card";
+import { ProfileImportDialog } from "@/components/profiles/profile-import-dialog";
+import type { AgentProfile } from "@/lib/agents/profiles/types";
+
+interface ProfileWithBuiltin extends AgentProfile {
+  isBuiltin?: boolean;
+}
+
+interface ProfileBrowserProps {
+  initialProfiles: AgentProfile[];
+}
+
+export function ProfileBrowser({ initialProfiles }: ProfileBrowserProps) {
+  const router = useRouter();
+  const [profiles, setProfiles] = useState<ProfileWithBuiltin[]>(initialProfiles);
+  const [search, setSearch] = useState("");
+  const [domainFilter, setDomainFilter] = useState<
+    "all" | "work" | "personal"
+  >("all");
+  const [showImport, setShowImport] = useState(false);
+
+  const filteredProfiles = useMemo(() => {
+    const q = search.toLowerCase();
+    return profiles.filter((p) => {
+      if (domainFilter !== "all" && p.domain !== domainFilter) return false;
+      if (!q) return true;
+      return (
+        p.name.toLowerCase().includes(q) ||
+        p.description.toLowerCase().includes(q) ||
+        p.tags.some((t) => t.toLowerCase().includes(q))
+      );
+    });
+  }, [profiles, search, domainFilter]);
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight">Profiles</h1>
+          <p className="text-sm text-muted-foreground">
+            Browse and inspect agent profiles without blur-heavy detail surfaces.
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" onClick={() => setShowImport(true)}>
+            <Download className="mr-2 h-4 w-4" />
+            Import
+          </Button>
+          <Button onClick={() => router.push("/profiles/new")}>
+            <Plus className="mr-2 h-4 w-4" />
+            Create Profile
+          </Button>
+        </div>
+      </div>
+
+      {/* Search + Domain Filter */}
+      <div className="surface-panel flex flex-col gap-4 rounded-2xl p-4 sm:flex-row sm:items-center">
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            placeholder="Search profiles..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="surface-control pl-9"
+          />
+        </div>
+        <Tabs
+          value={domainFilter}
+          onValueChange={(v) =>
+            setDomainFilter(v as "all" | "work" | "personal")
+          }
+        >
+          <TabsList className="surface-control">
+            <TabsTrigger value="all">All</TabsTrigger>
+            <TabsTrigger value="work">Work</TabsTrigger>
+            <TabsTrigger value="personal">Personal</TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </div>
+
+      {/* Grid */}
+      <ProfileImportDialog
+        open={showImport}
+        onOpenChange={setShowImport}
+        onImported={() => router.refresh()}
+      />
+
+      {filteredProfiles.length === 0 ? (
+        <EmptyState
+          icon={Bot}
+          heading="No profiles found"
+          description="Try adjusting your search or filter, or create a new profile."
+        />
+      ) : (
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {filteredProfiles.map((profile) => (
+            <ProfileCard
+              key={profile.id}
+              profile={profile}
+              onClick={() => router.push(`/profiles/${profile.id}`)}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/profiles/profile-card.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { listRuntimeCatalog } from "@/lib/agents/runtime/catalog";
+import { getSupportedRuntimes } from "@/lib/agents/profiles/compatibility";
+import type { AgentProfile } from "@/lib/agents/profiles/types";
+
+interface ProfileCardProps {
+  profile: AgentProfile;
+  onClick: () => void;
+}
+
+export function ProfileCard({ profile, onClick }: ProfileCardProps) {
+  const runtimeLabelMap = new Map(
+    listRuntimeCatalog().map((runtime) => [
+      runtime.id,
+      runtime.label.includes("Codex") ? "Codex" : "Claude",
+    ])
+  );
+
+  return (
+    <Card
+      tabIndex={0}
+      role="button"
+      className="surface-card cursor-pointer rounded-xl transition-colors hover:bg-accent/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none"
+      onClick={onClick}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick();
+        }
+      }}
+    >
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle className="text-base font-medium">{profile.name}</CardTitle>
+        <Badge
+          variant={profile.domain === "work" ? "default" : "secondary"}
+        >
+          {profile.domain}
+        </Badge>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        <p className="line-clamp-2 text-sm text-muted-foreground">
+          {profile.description}
+        </p>
+
+        {profile.tags.length > 0 && (
+          <div className="flex flex-wrap gap-1">
+            {profile.tags.map((tag) => (
+              <Badge key={tag} variant="outline" className="text-xs">
+                {tag}
+              </Badge>
+            ))}
+          </div>
+        )}
+
+        <div className="flex flex-wrap gap-1">
+          {getSupportedRuntimes(profile).map((runtimeId) => (
+            <Badge key={runtimeId} variant="secondary" className="text-xs">
+              {runtimeLabelMap.get(runtimeId) ?? runtimeId}
+            </Badge>
+          ))}
+        </div>
+
+        <div className="flex items-center gap-3 text-xs text-muted-foreground">
+          {profile.version && <span>v{profile.version}</span>}
+          {profile.allowedTools && profile.allowedTools.length > 0 && (
+            <span>
+              {profile.allowedTools.length} tool
+              {profile.allowedTools.length !== 1 ? "s" : ""}
+            </span>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}