feat(dashboard): add AI prediction demo with Kalshi markets

- Add Predict page with Claude AI-powered market predictions
- Integrate Kalshi API for real-time prediction market data
- Create ValidationV1 attestations for prediction confidence checks
- Add mainnet support with Dexter facilitator (x402.dexter.cash)
- Improve error logging with request IDs and detailed catch blocks
- Add SDK error handling layer (SatiError, transaction error parsing)
- Add Badge and Collapsible UI components
- Support multi-network x402 payments (devnet + mainnet)

Author: tenequm

apps/dashboard/package.json

@@ -17,7 +17,9 @@
     "clean": "rm -rf dist"
   },
   "dependencies": {
+    "@ai-sdk/anthropic": "^3.0.12",
     "@cascade-fyi/sati-sdk": "workspace:*",
+    "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -34,10 +36,11 @@
     "@solana/react-hooks": "^1.1.1",
     "@tailwindcss/vite": "^4.1.17",
     "@tanstack/react-query": "^5.90.11",
-    "@x402/core": "^2.1.0",
-    "@x402/fetch": "^2.1.0",
-    "@x402/hono": "^2.1.0",
-    "@x402/svm": "^2.1.0",
+    "@x402/core": "^2.2.0",
+    "@x402/fetch": "^2.2.0",
+    "@x402/hono": "^2.2.0",
+    "@x402/svm": "^2.2.0",
+    "ai": "^6.0.33",
     "bs58": "^6.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

apps/dashboard/src/env.ts

@@ -4,14 +4,26 @@ export type Network = "devnet" | "mainnet";
 export const DEMO_AGENT_MINT_DEVNET = "J7b9Ks4TNBDN1nMoPfSYnD39oCBL2hVSp1FAoiwdHyoC";
 export const DEMO_AGENT_MINT_MAINNET: string | undefined = undefined; // Not yet registered
 
+// Prediction agent (separate identity for Kalshi predictions)
+// Same mint address on both networks for consistency
+export const PREDICTION_AGENT_MINT_DEVNET = "2JoPSg3XkK77dyftS4L1A8GZvtKqiUrYtQtE6Xvagent";
+export const PREDICTION_AGENT_MINT_MAINNET = "2JoPSg3XkK77dyftS4L1A8GZvtKqiUrYtQtE6Xvagent";
+
 export const parse = (env: Record<string, unknown>) => {
   const key = (env.VITE_HELIUS_API_KEY as string) ?? "";
 
   return {
     VITE_HELIUS_API_KEY: env.VITE_HELIUS_API_KEY as string | undefined,
     SATI_AGENT_SIGNER_KEY: env.SATI_AGENT_SIGNER_KEY as string | undefined,
+    SATI_DEMO_VALIDATOR_SIGNER_KEY: env.SATI_DEMO_VALIDATOR_SIGNER_KEY as string | undefined,
+    KALSHI_API_KEY_ID: env.KALSHI_API_KEY_ID as string | undefined,
+    KALSHI_API_KEY_RSA_SECRET: env.KALSHI_API_KEY_RSA_SECRET as string | undefined,
+    // Anthropic API key for AI predictions
+    ANTHROPIC_API_KEY: env.ANTHROPIC_API_KEY as string | undefined,
     DEMO_AGENT_MINT_DEVNET,
     DEMO_AGENT_MINT_MAINNET,
+    PREDICTION_AGENT_MINT_DEVNET,
+    PREDICTION_AGENT_MINT_MAINNET,
     RPC_URLS: {
       devnet: {
         rpc: `https://devnet.helius-rpc.com/?api-key=${key}`,

apps/dashboard/src/react-app/components/GiveFeedbackDialog.tsx

@@ -40,10 +40,6 @@ import { Textarea } from "@/components/ui/textarea";
 import { Slider } from "@/components/ui/slider";
 import { Loader2, X } from "lucide-react";
 
-// Get deployed FeedbackPublic schema address (SingleSigner mode - no counterparty sig needed)
-const deployedConfig = loadDeployedConfig(getNetwork());
-const FEEDBACK_SCHEMA_ADDRESS = deployedConfig?.schemas?.feedbackPublic as Address | undefined;
-
 interface GiveFeedbackDialogProps {
   /** Agent mint address */
   agentMint: Address;
@@ -65,7 +61,7 @@ interface SubmitFeedbackRequest {
   outcome: number;
   counterparty: string;
   agentSignature: string; // User's SIWS signature (hex)
-  agentAddress: string; // User's wallet address
+  agentOwner: string; // User's wallet address
   counterpartyMessage: string; // SIWS message bytes (hex) - triggers server-paid mode
   content?: string;
   contentType?: number;
@@ -137,7 +133,12 @@ export function GiveFeedbackDialog({ agentMint, agentName, children, onSuccess }
   const feedbackMutation = useMutation({
     mutationFn: async (selectedOutcome: Outcome) => {
       if (!session) throw new Error("Wallet not connected");
-      if (!FEEDBACK_SCHEMA_ADDRESS) throw new Error("Feedback schema not configured");
+
+      // Load schema for current network (not cached at module level)
+      const network = getNetwork();
+      const deployedConfig = loadDeployedConfig(network);
+      const feedbackSchemaAddress = deployedConfig?.schemas?.feedbackPublic as Address | undefined;
+      if (!feedbackSchemaAddress) throw new Error("Feedback schema not configured");
 
       const toastId = toast.loading("Preparing feedback...");
 
@@ -190,15 +191,15 @@ export function GiveFeedbackDialog({ agentMint, agentName, children, onSuccess }
         toast.loading("Submitting feedback...", { id: toastId });
 
         const request: SubmitFeedbackRequest = {
-          network: getNetwork(),
-          sasSchema: FEEDBACK_SCHEMA_ADDRESS,
+          network,
+          sasSchema: feedbackSchemaAddress,
           taskRef: bytesToHex(taskRef),
           agentMint: agentMint,
           dataHash: bytesToHex(dataHash),
           outcome: selectedOutcome,
           counterparty: session.account.address,
           agentSignature: bytesToHex(signature), // User's SIWS signature
-          agentAddress: session.account.address, // User's wallet address
+          agentOwner: session.account.address, // User's wallet address
           counterpartyMessage: bytesToHex(new Uint8Array(siwsMessage.messageBytes)), // Triggers server-paid mode
           ...(contentJson && { content: contentJson, contentType: 1 }),
         };

apps/dashboard/src/react-app/components/Header.tsx

@@ -45,9 +45,20 @@ export function Header() {
               <NavLink to="/" end className={({ isActive }) => getNavLinkClasses(isActive)}>
                 Explore
               </NavLink>
+              <NavLink to="/predict" className={({ isActive }) => getNavLinkClasses(isActive)}>
+                Predict
+              </NavLink>
               <NavLink to="/profile" className={({ isActive }) => getNavLinkClasses(isActive)}>
                 My Profile
               </NavLink>
+              <a
+                href="https://cascade-protocol.github.io/sati/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="rounded-md px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
+              >
+                Docs
+              </a>
             </nav>
           </div>
 
@@ -90,9 +101,20 @@ export function Header() {
                     <NavLink to="/" end className={({ isActive }) => getMobileNavLinkClasses(isActive)}>
                       Explore
                     </NavLink>
+                    <NavLink to="/predict" className={({ isActive }) => getMobileNavLinkClasses(isActive)}>
+                      Predict
+                    </NavLink>
                     <NavLink to="/profile" className={({ isActive }) => getMobileNavLinkClasses(isActive)}>
                       My Profile
                     </NavLink>
+                    <a
+                      href="https://cascade-protocol.github.io/sati/"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="block rounded-md px-3 py-2 text-base text-muted-foreground transition-colors hover:text-foreground"
+                    >
+                      Docs
+                    </a>
                   </nav>
                   <Separator />
                   <div className="flex items-center gap-4">

apps/dashboard/src/react-app/components/VerifiedFeedbackDialog.tsx

@@ -2,7 +2,7 @@
  * VerifiedFeedbackDialog - DualSignature feedback demonstrating blind feedback model
  *
  * 2-Step Flow:
- * 1. INTERACT: User pays $0.01 USDC → Agent signs BLINDLY (doesn't know outcome)
+ * 1. INTERACT: User pays $0.001 USDC → Agent signs BLINDLY (doesn't know outcome)
  * 2. RATE & SUBMIT: User chooses outcome → Signs SIWS → Server submits transaction
  *
  * This demonstrates SATI's core innovation: unforgeable feedback where the agent
@@ -21,8 +21,9 @@ import {
   buildCounterpartyMessage,
   serializeFeedback,
   type FeedbackData,
+  handleTransactionError,
 } from "@cascade-fyi/sati-sdk";
-import { getNetwork, getSolscanUrl, getRpcUrl } from "@/lib/network";
+import { getChain, getNetwork, getSolscanUrl, getRpcUrl } from "@/lib/network";
 import { createPaymentFetch } from "@/lib/x402";
 
 import { Button } from "@/components/ui/button";
@@ -43,11 +44,24 @@ import { Loader2, CheckCircle2 } from "lucide-react";
 const deployedConfig = loadDeployedConfig(getNetwork());
 const FEEDBACK_SCHEMA_ADDRESS = deployedConfig?.schemas?.feedback as Address | undefined;
 
+// Pre-filled agent signature data (for skipping Step 1)
+interface PrefilledSignatureData {
+  taskRef: string; // hex
+  dataHash: string; // hex
+  agentSignature: string; // hex
+  agentOwner: string;
+}
+
 interface VerifiedFeedbackDialogProps {
   agentMint: Address;
   agentName: string;
-  children: ReactNode;
+  children?: ReactNode;
   onSuccess?: () => void;
+  // Controlled mode props
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  // Pre-filled data to skip Step 1 (agent already signed)
+  prefilledData?: PrefilledSignatureData;
 }
 
 // API types
@@ -61,7 +75,7 @@ interface EchoRequest {
 interface EchoResponse {
   success: boolean;
   data?: {
-    agentAddress: string;
+    agentOwner: string;
     interactionHash: string;
     signature: string;
     signatureBase58: string;
@@ -78,7 +92,7 @@ interface SubmitFeedbackRequest {
   outcome: number;
   counterparty: string;
   agentSignature: string;
-  agentAddress: string;
+  agentOwner: string;
   counterpartySignature: string;
   counterpartyMessage: string;
   content?: string;
@@ -117,18 +131,40 @@ interface AgentSignatureData {
   taskRef: string; // hex
   dataHash: string; // hex
   signature: string; // hex
-  agentAddress: string;
+  agentOwner: string;
 }
 
 type Step = "interact" | "rate";
 
-export function VerifiedFeedbackDialog({ agentMint, agentName, children, onSuccess }: VerifiedFeedbackDialogProps) {
-  const [open, setOpen] = useState(false);
+export function VerifiedFeedbackDialog({
+  agentMint,
+  agentName,
+  children,
+  onSuccess,
+  open: controlledOpen,
+  onOpenChange: controlledOnOpenChange,
+  prefilledData,
+}: VerifiedFeedbackDialogProps) {
+  // Support controlled mode
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isControlled = controlledOpen !== undefined;
+  const open = isControlled ? controlledOpen : internalOpen;
+
+  // Initialize step based on prefilledData
+  const initialStep: Step = prefilledData ? "rate" : "interact";
+  const initialAgentData: AgentSignatureData | null = prefilledData
+    ? {
+        taskRef: prefilledData.taskRef,
+        dataHash: prefilledData.dataHash,
+        signature: prefilledData.agentSignature,
+        agentOwner: prefilledData.agentOwner,
+      }
+    : null;
 
   // Step state
-  const [step, setStep] = useState<Step>("interact");
+  const [step, setStep] = useState<Step>(initialStep);
   const [isInteracting, setIsInteracting] = useState(false);
-  const [agentSignatureData, setAgentSignatureData] = useState<AgentSignatureData | null>(null);
+  const [agentSignatureData, setAgentSignatureData] = useState<AgentSignatureData | null>(initialAgentData);
 
   // Rating state (Step 2)
   const [outcome, setOutcome] = useState<string>("2"); // Default to Positive
@@ -139,10 +175,15 @@ export function VerifiedFeedbackDialog({ agentMint, agentName, children, onSucce
 
   // Reset state when dialog closes
   const handleOpenChange = (isOpen: boolean) => {
-    setOpen(isOpen);
+    if (isControlled) {
+      controlledOnOpenChange?.(isOpen);
+    } else {
+      setInternalOpen(isOpen);
+    }
     if (!isOpen) {
-      setStep("interact");
-      setAgentSignatureData(null);
+      // Reset to initial state (which depends on prefilledData)
+      setStep(initialStep);
+      setAgentSignatureData(initialAgentData);
       setOutcome("2");
       setMessage("");
       setIsInteracting(false);
@@ -177,9 +218,9 @@ export function VerifiedFeedbackDialog({ agentMint, agentName, children, onSucce
       const taskRef = bytesToHex(new Uint8Array(taskRefDigest));
       const dataHash = bytesToHex(new Uint8Array(dataHashDigest));
 
-      // Create x402 payment-enabled fetch
-      toast.loading("Approve payment ($0.01 USDC)...", { id: toastId });
-      const rpcUrl = getRpcUrl(getNetwork());
+      // Create x402 payment-enabled fetch using user's network
+      toast.loading("Approve payment ($0.001 USDC)...", { id: toastId });
+      const rpcUrl = getRpcUrl(getChain());
       const paymentFetch = createPaymentFetch(session, rpcUrl);
 
       // Call /api/echo with x402 payment - agent signs WITHOUT knowing outcome
@@ -211,7 +252,7 @@ export function VerifiedFeedbackDialog({ agentMint, agentName, children, onSucce
         taskRef,
         dataHash,
         signature: echoResult.data.signature,
-        agentAddress: echoResult.data.agentAddress,
+        agentOwner: echoResult.data.agentOwner,
       });
 
       toast.success("Agent signed! Now choose your rating.", { id: toastId });
@@ -289,7 +330,7 @@ export function VerifiedFeedbackDialog({ agentMint, agentName, children, onSucce
           outcome: selectedOutcome,
           counterparty: session.account.address,
           agentSignature: agentSignatureData.signature,
-          agentAddress: agentSignatureData.agentAddress,
+          agentOwner: agentSignatureData.agentOwner,
           counterpartySignature: bytesToHex(counterpartySig),
           counterpartyMessage: bytesToHex(new Uint8Array(siwsMessage.messageBytes)),
           ...(contentJson && { content: contentJson, contentType: 1 }),
@@ -329,8 +370,18 @@ export function VerifiedFeedbackDialog({ agentMint, agentName, children, onSucce
         };
       } catch (error) {
         toast.dismiss(toastId);
-        const errorMessage = error instanceof Error ? error.message : "Unknown error";
-        toast.error(`Failed: ${errorMessage}`);
+
+        // Use SDK error handler for consistent error messages
+        const result = handleTransactionError(error);
+
+        if (result.reason === "duplicate_attestation") {
+          toast.error(result.message, {
+            description: "Each prediction can only receive one feedback per user.",
+            duration: 6000,
+          });
+        } else {
+          toast.error(result.message);
+        }
         throw error;
       }
     },
@@ -358,7 +409,7 @@ export function VerifiedFeedbackDialog({ agentMint, agentName, children, onSucce
 
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogTrigger asChild>{children}</DialogTrigger>
+      {children && <DialogTrigger asChild>{children}</DialogTrigger>}
       <DialogContent className="sm:max-w-md">
         <DialogHeader>
           <DialogTitle>Verified Feedback</DialogTitle>
@@ -396,9 +447,9 @@ export function VerifiedFeedbackDialog({ agentMint, agentName, children, onSucce
         {step === "interact" && (
           <div className="space-y-4 py-4">
             <p className="text-sm text-muted-foreground">
-              Pay <span className="font-medium text-foreground">$0.01 USDC</span> to request a signature from the agent.
-              The agent signs <span className="font-medium text-foreground">without knowing</span> what feedback you'll
-              give.
+              Pay <span className="font-medium text-foreground">$0.001 USDC</span> to request a signature from the
+              agent. The agent signs <span className="font-medium text-foreground">without knowing</span> what feedback
+              you'll give.
             </p>
 
             <div className="p-3 rounded-lg bg-muted/50 border text-sm">
@@ -421,7 +472,7 @@ export function VerifiedFeedbackDialog({ agentMint, agentName, children, onSucce
                   Processing...
                 </>
               ) : (
-                "Pay & Get Signature ($0.01)"
+                "Pay & Get Signature ($0.001)"
               )}
             </Button>
 

apps/dashboard/src/react-app/components/ui/badge.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };