stagent 0.1.11 → 0.1.13

package/src/components/settings/connection-test-control.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { useState } from "react";
+import { CheckCircle2, Loader2, XCircle } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+
+export interface ConnectionTestResult {
+  connected: boolean;
+  error?: string;
+}
+
+interface ConnectionTestControlProps {
+  onTest: () => Promise<ConnectionTestResult>;
+  buttonLabel?: string;
+}
+
+export function ConnectionTestControl({
+  onTest,
+  buttonLabel = "Test Connection",
+}: ConnectionTestControlProps) {
+  const [testing, setTesting] = useState(false);
+  const [testResult, setTestResult] = useState<ConnectionTestResult | null>(null);
+
+  async function handleTest() {
+    setTesting(true);
+    setTestResult(null);
+
+    try {
+      const result = await onTest();
+      setTestResult(result);
+    } finally {
+      setTesting(false);
+    }
+  }
+
+  return (
+    <div className="flex items-center gap-3">
+      <Button variant="outline" size="sm" onClick={handleTest} disabled={testing}>
+        {testing && <Loader2 className="mr-1 h-3 w-3 animate-spin" />}
+        {buttonLabel}
+      </Button>
+
+      {testResult && (
+        <span className="flex items-center gap-1.5 text-sm">
+          {testResult.connected ? (
+            <>
+              <CheckCircle2 className="h-4 w-4 text-success" />
+              <span className="text-success">Connected</span>
+            </>
+          ) : (
+            <>
+              <XCircle className="h-4 w-4 text-status-failed" />
+              <span className="text-status-failed">
+                {testResult.error || "Connection failed"}
+              </span>
+            </>
+          )}
+        </span>
+      )}
+    </div>
+  );
+}

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

@@ -1,91 +1,101 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { forwardRef, useEffect, useImperativeHandle, 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);
+export interface PermissionsSectionHandle {
+  refresh: () => void;
+}
 
-  useEffect(() => {
-    fetchPermissions();
-  }, []);
+export const PermissionsSection = forwardRef<PermissionsSectionHandle>(
+  function PermissionsSection(_props, ref) {
+    const [permissions, setPermissions] = useState<string[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [revoking, setRevoking] = useState<string | null>(null);
 
-  async function fetchPermissions() {
-    try {
-      const res = await fetch("/api/permissions");
-      if (res.ok) {
-        const data = await res.json();
-        setPermissions(data.permissions ?? []);
+    async function fetchPermissions() {
+      try {
+        const res = await fetch("/api/permissions");
+        if (res.ok) {
+          const data = await res.json();
+          setPermissions(data.permissions ?? []);
+        }
+      } finally {
+        setLoading(false);
       }
-    } 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));
+    useEffect(() => {
+      fetchPermissions();
+    }, []);
+
+    useImperativeHandle(ref, () => ({
+      refresh: fetchPermissions,
+    }));
+
+    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);
       }
-    } 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}`}
+    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"
                 >
-                  <X className="h-3 w-3" />
-                </Button>
-              </Badge>
-            ))}
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
-}
+                  {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/settings/permissions-sections.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { useCallback, useRef } from "react";
+import { PresetsSection } from "./presets-section";
+import { PermissionsSection } from "./permissions-section";
+
+/**
+ * Wrapper that coordinates presets and individual permissions.
+ * When a preset is toggled, the individual permissions list refreshes.
+ */
+export function PermissionsSections() {
+  const permissionsRef = useRef<{ refresh: () => void }>(null);
+
+  const handlePresetChange = useCallback(() => {
+    permissionsRef.current?.refresh();
+  }, []);
+
+  return (
+    <>
+      <PresetsSection onPresetChange={handlePresetChange} />
+      <PermissionsSection ref={permissionsRef} />
+    </>
+  );
+}

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

@@ -0,0 +1,159 @@
+"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 { Shield, ShieldAlert, ShieldCheck, Zap } from "lucide-react";
+
+interface PresetInfo {
+  id: string;
+  name: string;
+  description: string;
+  risk: "low" | "medium" | "high";
+  patterns: string[];
+  active: boolean;
+}
+
+const RISK_CONFIG = {
+  low: {
+    icon: ShieldCheck,
+    variant: "success" as const,
+    label: "Low Risk",
+  },
+  medium: {
+    icon: Shield,
+    variant: "default" as const,
+    label: "Medium Risk",
+  },
+  high: {
+    icon: ShieldAlert,
+    variant: "destructive" as const,
+    label: "High Risk",
+  },
+};
+
+export function PresetsSection({ onPresetChange }: { onPresetChange?: () => void }) {
+  const [presets, setPresets] = useState<PresetInfo[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [toggling, setToggling] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetchPresets();
+  }, []);
+
+  async function fetchPresets() {
+    try {
+      const res = await fetch("/api/permissions/presets");
+      if (res.ok) {
+        const data = await res.json();
+        setPresets(data.presets ?? []);
+      }
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleToggle(presetId: string, currentlyActive: boolean) {
+    setToggling(presetId);
+    try {
+      const res = await fetch("/api/permissions/presets", {
+        method: currentlyActive ? "DELETE" : "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ presetId }),
+      });
+      if (res.ok) {
+        await fetchPresets();
+        onPresetChange?.();
+      }
+    } finally {
+      setToggling(null);
+    }
+  }
+
+  return (
+    <Card className="surface-card">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Zap className="h-5 w-5" />
+          Permission Presets
+        </CardTitle>
+        <CardDescription>
+          One-click permission bundles for common use cases. Presets are additive
+          — enabling a higher-risk preset includes all lower-risk permissions.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        {loading ? (
+          <p className="text-sm text-muted-foreground">Loading...</p>
+        ) : (
+          <div className="grid gap-3 sm:grid-cols-3">
+            {presets.map((preset) => {
+              const config = RISK_CONFIG[preset.risk];
+              const Icon = config.icon;
+              const isToggling = toggling === preset.id;
+
+              return (
+                <div
+                  key={preset.id}
+                  className={`rounded-lg border p-4 space-y-3 transition-colors ${
+                    preset.active
+                      ? "border-primary/50 bg-primary/5"
+                      : "border-border"
+                  }`}
+                >
+                  <div className="flex items-start justify-between gap-2">
+                    <div className="space-y-1">
+                      <h3 className="font-medium text-sm flex items-center gap-1.5">
+                        <Icon className="h-4 w-4" />
+                        {preset.name}
+                      </h3>
+                      <Badge variant={config.variant} className="text-[10px]">
+                        {config.label}
+                      </Badge>
+                    </div>
+                  </div>
+
+                  <p className="text-xs text-muted-foreground leading-relaxed">
+                    {preset.description}
+                  </p>
+
+                  <div className="flex flex-wrap gap-1">
+                    {preset.patterns.map((p) => (
+                      <span
+                        key={p}
+                        className="inline-block font-mono text-[10px] bg-muted px-1.5 py-0.5 rounded"
+                      >
+                        {p}
+                      </span>
+                    ))}
+                  </div>
+
+                  <Button
+                    variant={preset.active ? "outline" : "default"}
+                    size="sm"
+                    className="w-full"
+                    disabled={isToggling}
+                    onClick={() => handleToggle(preset.id, preset.active)}
+                  >
+                    {isToggling
+                      ? "Updating..."
+                      : preset.active
+                        ? "Disable"
+                        : "Enable"}
+                  </Button>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/settings/pricing-registry-panel.tsx

@@ -0,0 +1,164 @@
+"use client";
+
+import { useState } from "react";
+import { CalendarClock, RefreshCcw } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import type { PricingRegistrySnapshot, PricingRow } from "@/lib/usage/pricing-registry";
+import { toast } from "sonner";
+
+interface PricingRegistryPanelProps {
+  initialSnapshot: PricingRegistrySnapshot;
+  showClaudePlans?: boolean;
+}
+
+function formatCurrencyUsd(value: number) {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: value >= 100 ? 0 : 2,
+    maximumFractionDigits: value >= 100 ? 0 : 2,
+  }).format(value);
+}
+
+function formatMicrosPerMillion(value: number) {
+  return `${formatCurrencyUsd(value / 1_000_000)} / 1M`;
+}
+
+function formatUpdatedAt(value: string | null) {
+  if (!value) {
+    return "Not refreshed yet";
+  }
+
+  return new Date(value).toLocaleString(undefined, {
+    dateStyle: "medium",
+    timeStyle: "short",
+  });
+}
+
+function providerRows(
+  rows: PricingRow[],
+  showClaudePlans: boolean | undefined
+) {
+  return rows.filter((row) =>
+    row.visible &&
+    (showClaudePlans ? true : row.kind === "api_model")
+  );
+}
+
+export function PricingRegistryPanel({
+  initialSnapshot,
+  showClaudePlans = false,
+}: PricingRegistryPanelProps) {
+  const [snapshot, setSnapshot] = useState(initialSnapshot);
+  const [refreshing, setRefreshing] = useState(false);
+
+  async function handleRefresh() {
+    setRefreshing(true);
+    try {
+      const response = await fetch("/api/settings/pricing", { method: "POST" });
+      const data = (await response.json()) as PricingRegistrySnapshot;
+      setSnapshot(data);
+      toast.success("Pricing refreshed");
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Failed to refresh pricing");
+    } finally {
+      setRefreshing(false);
+    }
+  }
+
+  const providerCards = [
+    snapshot.providers.anthropic,
+    snapshot.providers.openai,
+  ];
+
+  return (
+    <div className="surface-card-muted rounded-2xl p-4">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <div className="space-y-1">
+          <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.16em] text-muted-foreground">
+            <CalendarClock className="h-3.5 w-3.5" />
+            <span>Latest Pricing</span>
+          </div>
+          <p className="text-sm text-muted-foreground">
+            Official provider pricing with manual refresh and the last known update time.
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          {snapshot.stale ? (
+            <Badge
+              variant="outline"
+              className="border-status-warning/30 bg-status-warning/10 text-status-warning"
+            >
+              Stale
+            </Badge>
+          ) : null}
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={handleRefresh}
+            disabled={refreshing}
+          >
+            <RefreshCcw className={`h-3.5 w-3.5 ${refreshing ? "animate-spin" : ""}`} />
+            Refresh pricing
+          </Button>
+        </div>
+      </div>
+
+      <div className="mt-4 grid gap-3 lg:grid-cols-2">
+        {providerCards.map((provider) => (
+          <div key={provider.providerId} className="surface-panel rounded-xl p-3">
+            <div className="flex items-start justify-between gap-3">
+              <div>
+                <p className="text-sm font-semibold capitalize">{provider.providerId}</p>
+                <p className="text-xs text-muted-foreground">
+                  Updated {formatUpdatedAt(provider.fetchedAtIso)}
+                </p>
+              </div>
+              <Badge variant="outline">{provider.sourceLabel}</Badge>
+            </div>
+
+            <div className="mt-3 space-y-2">
+              {providerRows(provider.rows, showClaudePlans && provider.providerId === "anthropic").map(
+                (row) => (
+                  <div
+                    key={row.key}
+                    className="flex items-start justify-between gap-3 rounded-lg border border-border/60 bg-background/40 px-3 py-2"
+                  >
+                    <div>
+                      <p className="text-sm font-medium">{row.label}</p>
+                      <p className="text-xs text-muted-foreground">
+                        {row.kind === "subscription_plan" ? "Monthly plan" : "Input / output"}
+                      </p>
+                    </div>
+                    <div className="text-right text-sm">
+                      {row.kind === "subscription_plan" ? (
+                        <p className="font-medium">
+                          {formatCurrencyUsd(row.monthlyPriceUsd ?? 0)}
+                        </p>
+                      ) : (
+                        <>
+                          <p className="font-medium">
+                            {formatMicrosPerMillion(row.inputCostPerMillionMicros ?? 0)}
+                          </p>
+                          <p className="text-xs text-muted-foreground">
+                            {formatMicrosPerMillion(row.outputCostPerMillionMicros ?? 0)}
+                          </p>
+                        </>
+                      )}
+                    </div>
+                  </div>
+                )
+              )}
+            </div>
+
+            {provider.refreshError ? (
+              <p className="mt-3 text-xs text-status-warning">{provider.refreshError}</p>
+            ) : null}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -8,11 +8,12 @@ import {
   Inbox,
   Activity,
   FolderKanban,
-  GitBranch,
+  Workflow,
   FileText,
   Bot,
   Clock,
   Wallet,
+  BookMarked,
   Settings,
 } from "lucide-react";
 import {
@@ -39,11 +40,12 @@ const navItems = [
   { 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: "Workflows", href: "/workflows", icon: Workflow, 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: "Playbook", href: "/playbook", icon: BookMarked, badge: false },
   { title: "Settings", href: "/settings", icon: Settings, badge: false },
 ];
 

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

@@ -29,6 +29,7 @@ import {
   Moon,
   CheckCheck,
   Loader2,
+  BookOpen,
 } from "lucide-react";
 
 interface RecentProject {
@@ -43,6 +44,12 @@ interface RecentTask {
   status: string;
 }
 
+interface PlaybookItem {
+  slug: string;
+  title: string;
+  tags: string[];
+}
+
 const navigationItems = [
   { title: "Home", href: "/", icon: Home, keywords: "landing welcome" },
   { title: "Dashboard", href: "/dashboard", icon: LayoutDashboard, keywords: "tasks kanban board" },
@@ -54,6 +61,7 @@ const navigationItems = [
   { 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: "Playbook", href: "/playbook", icon: BookOpen, keywords: "docs guide documentation help" },
   { title: "Settings", href: "/settings", icon: Settings, keywords: "preferences configuration" },
 ];
 
@@ -81,6 +89,7 @@ export function CommandPalette() {
   const [open, setOpen] = useState(false);
   const [recentProjects, setRecentProjects] = useState<RecentProject[]>([]);
   const [recentTasks, setRecentTasks] = useState<RecentTask[]>([]);
+  const [playbookItems, setPlaybookItems] = useState<PlaybookItem[]>([]);
   const [loadingRecent, setLoadingRecent] = useState(false);
   const abortRef = useRef<AbortController | null>(null);
   const router = useRouter();
@@ -114,6 +123,7 @@ export function CommandPalette() {
         if (data) {
           setRecentProjects(data.projects);
           setRecentTasks(data.tasks);
+          setPlaybookItems(data.playbook ?? []);
         }
       })
       .catch(() => {
@@ -213,6 +223,26 @@ export function CommandPalette() {
 
         <CommandSeparator />
 
+        {/* Playbook */}
+        {playbookItems.length > 0 && (
+          <>
+            <CommandGroup heading="Playbook">
+              {playbookItems.map((item) => (
+                <CommandItem
+                  key={`playbook-${item.slug}`}
+                  value={`playbook-${item.title}`}
+                  onSelect={() => navigate(`/playbook/${item.slug}`)}
+                  keywords={["docs", "guide", ...item.tags]}
+                >
+                  <BookOpen className="h-4 w-4" />
+                  <span className="flex-1 truncate">{item.title}</span>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+            <CommandSeparator />
+          </>
+        )}
+
         {/* Create */}
         <CommandGroup heading="Create">
           {createItems.map((item) => (