-
- {agent.name}
- {agent.category} -{agent.description}
-
- ★ {agent.rating.toFixed(1)}
- {agent.downloads.toLocaleString()} downloads
+
+ {/* Top bar listing tags (like technologies list in portfolio cards) */}
+ {
+ size?: number
+ color?: string
+}
+
+export function ShieldAlertIcon({ size = 18, color = 'currentColor', ...props }: IconProps) {
+ return (
+
+ )
+}
+
+export function TerminalIcon({ size = 18, color = 'currentColor', ...props }: IconProps) {
+ return (
+
+ )
+}
+
+export function CodeIcon({ size = 18, color = 'currentColor', ...props }: IconProps) {
+ return (
+
+ )
+}
+
+export function CpuIcon({ size = 18, color = 'currentColor', ...props }: IconProps) {
+ return (
+
+ )
+}
+
+export function SearchIcon({ size = 18, color = 'currentColor', ...props }: IconProps) {
+ return (
+
+ )
+}
+
+export function DownloadIcon({ size = 18, color = 'currentColor', ...props }: IconProps) {
+ return (
+
+ )
+}
+
+export function StarIcon({ size = 18, color = 'currentColor', ...props }: IconProps) {
+ return (
+
+ )
+}
+
+export function GitForkIcon({ size = 18, color = 'currentColor', ...props }: IconProps) {
+ return (
+
+ )
+}
+
+// Category Specific Icons
+export function LightningIcon({ size = 18, color = 'currentColor', ...props }: IconProps) {
+ return (
+
+ )
+}
+
+export function TargetIcon({ size = 18, color = 'currentColor', ...props }: IconProps) {
+ return (
+
+ )
+}
+
+export function ChartIcon({ size = 18, color = 'currentColor', ...props }: IconProps) {
+ return (
+
+ )
+}
+
+export function GraduationIcon({ size = 18, color = 'currentColor', ...props }: IconProps) {
+ return (
+
+ )
+}
+
+export function PlaneIcon({ size = 18, color = 'currentColor', ...props }: IconProps) {
+ return (
+
+ )
+}
+
+export function MessageIcon({ size = 18, color = 'currentColor', ...props }: IconProps) {
+ return (
+
+ )
+}
+
+export function DollarIcon({ size = 18, color = 'currentColor', ...props }: IconProps) {
+ return (
+
+ )
+}
+
+export function BookOpenIcon({ size = 18, color = 'currentColor', ...props }: IconProps) {
+ return (
+
+ )
+}
+
+export function ToolIcon({ size = 18, color = 'currentColor', ...props }: IconProps) {
+ return (
+
+ )
+}
+
+export function KeyIcon({ size = 18, color = 'currentColor', ...props }: IconProps) {
+ return (
+
+ )
+}
+
+// Category map helper
+export function getCategoryIcon(category: string, size = 20, color = 'currentColor') {
+ switch (category.toLowerCase()) {
+ case 'productivity':
+ return (null)
+
+ const activeRating = hoverRating !== null ? hoverRating : rating
+
+ const handleMouseEnter = (index: number) => {
+ if (interactive) setHoverRating(index)
+ }
+
+ const handleMouseLeave = () => {
+ if (interactive) setHoverRating(null)
+ }
+
+ const handleClick = (index: number) => {
+ if (interactive && onChange) {
+ onChange(index)
+ }
+ }
+
+ const renderStar = (index: number) => {
+ // Determine fill percentage
+ let fill = 0
+ if (activeRating >= index) {
+ fill = 100
+ } else if (activeRating > index - 1) {
+ fill = (activeRating - (index - 1)) * 100
+ }
+
+ const starId = `star-grad-${index}-${fill}`
+
+ return (
+
+ )
+ }
+
+ return (
+ | null>(null)
- const [runResult, setRunResult] = useState(null)
+ const navigate = useNavigate()
+
+ const [agent, setAgent] = useState(null)
+ const [reviews, setReviews] = useState([])
const [loading, setLoading] = useState(true)
+ const [error, setError] = useState(null)
+
+ // Simulation run state
+ const [inputsState, setInputsState] = useState>({})
+ const [running, setRunning] = useState(false)
+ const [runTrace, setRunTrace] = useState(null)
+ const [currentStepIndex, setCurrentStepIndex] = useState(-1)
+ const terminalBottomRef = useRef(null)
+
+ // Remix Modal state
+ const [showRemix, setShowRemix] = useState(false)
+ const [remixName, setRemixName] = useState('')
+ const [remixing, setRemixing] = useState(false)
+
+ // Install State
+ const [installed, setInstalled] = useState(false)
+ const [installing, setInstalling] = useState(false)
+
+ // Review Form state
+ const [reviewName, setReviewName] = useState('')
+ const [reviewRating, setReviewRating] = useState(5)
+ const [reviewComment, setReviewComment] = useState('')
+ const [submittingReview, setSubmittingReview] = useState(false)
+
+ // JSON schema collapse states
+ const [inputsOpen, setInputsOpen] = useState(true)
+ const [outputsOpen, setOutputsOpen] = useState(true)
useEffect(() => {
if (!id) return
- fetchAgent(id)
- .then((a) => setAgent(a as unknown as Record))
- .catch(() => setAgent(null))
- .finally(() => setLoading(false))
+ setLoading(true)
+ Promise.all([fetchAgent(id), fetchReviews(id)])
+ .then(([agentData, reviewsData]) => {
+ setAgent(agentData)
+ setReviews(reviewsData)
+
+ // Initialize inputs default values
+ const defaults: Record = {}
+ if (agentData.inputs && agentData.inputs.properties) {
+ Object.entries(agentData.inputs.properties).forEach(([key, prop]) => {
+ defaults[key] = prop.enum ? prop.enum[0] : ''
+ })
+ }
+ setInputsState(defaults)
+ setError(null)
+ })
+ .catch((err) => {
+ setError(err.message)
+ setAgent(null)
+ })
+ .finally(() => {
+ setTimeout(() => setLoading(false), 500)
+ })
}, [id])
- const handleRun = async () => {
- if (!id) return
+ useEffect(() => {
+ if (running && terminalBottomRef.current) {
+ terminalBottomRef.current.scrollIntoView({ behavior: 'smooth' })
+ }
+ }, [currentStepIndex, running])
+
+ if (loading) return
+ {agent.tags.join(', ')}
- {agent.tools_required.length > 0 && (
-
- {agent.tools_required.map((tool) => (
- {tool}
- ))}
+
+
)
}
diff --git a/frontend/src/components/Icons.tsx b/frontend/src/components/Icons.tsx
new file mode 100644
index 0000000..4dd6f8d
--- /dev/null
+++ b/frontend/src/components/Icons.tsx
@@ -0,0 +1,206 @@
+import React from 'react'
+
+interface IconProps extends React.SVGProps
+
+
+
+
+ {agent.name}
+
+ {getCategoryIcon(agent.category, 14, 'var(--color-primary)')}
+ {agent.category}
+
+ {agent.description}
+ + {/* Rating and downloads stats in unified dashboard */} +
+
- )}
-
+
+
+
+ 📥 {agent.downloads.toLocaleString()} downloads
+
+ view <~>
+
+ {isTrending && (
+
+ trending!
+
+ )}
+
+
+
+ )
+}
+
+export function AgentGridSkeleton() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {Array.from({ length: 6 }).map((_, i) => (
+
+ )
+}
+
+export function AgentDetailSkeleton() {
+ return (
+
+
+
+ )
+}
+
+export function ToolCardSkeleton() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export function ToolGridSkeleton() {
+ return (
+
+
+
+
+
+
+
+
+ {Array.from({ length: 8 }).map((_, i) => (
+
+ )
+}
diff --git a/frontend/src/components/StarRating.tsx b/frontend/src/components/StarRating.tsx
new file mode 100644
index 0000000..120a177
--- /dev/null
+++ b/frontend/src/components/StarRating.tsx
@@ -0,0 +1,77 @@
+import { useState } from 'react'
+
+interface Props {
+ rating: number
+ interactive?: boolean
+ onChange?: (rating: number) => void
+ size?: number
+}
+
+export default function StarRating({ rating, interactive = false, onChange, size = 18 }: Props) {
+ const [hoverRating, setHoverRating] = useState
+ {[1, 2, 3, 4, 5].map((i) => renderStar(i))}
+
+ )
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index bbe08e4..f89c186 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,8 +1,42 @@
+@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap");
+
:root {
- font-family: system-ui, -apple-system, sans-serif;
- line-height: 1.5;
- color: #1a1a2e;
- background: #f8f9fc;
+ font-family: 'Fira Code', monospace;
+ line-height: 1.6;
+
+ /* Color Palette (One Dark + Retro Coder) */
+ --bg-primary: #282C33;
+ --bg-secondary: #21252b;
+ --bg-tertiary: #353b45;
+
+ --text-primary: #ffffff;
+ --text-secondary: #ABB2BF;
+ --text-muted: #828997;
+
+ --color-primary: #C778DD; /* One Dark Purple */
+ --color-secondary: #FF79C6; /* Pink */
+ --color-accent: #98C379; /* One Dark Green */
+ --color-warning: #E5C07B; /* One Dark Yellow */
+ --color-danger: #E06C75; /* One Dark Red */
+ --color-info: #61AFEF; /* One Dark Blue */
+
+ --gradient-primary: linear-gradient(135deg, #C778DD, #FF79C6);
+ --gradient-glow: linear-gradient(135deg, rgba(199, 120, 221, 0.15), rgba(255, 121, 198, 0.15));
+ --gradient-hover: linear-gradient(135deg, #b052c8, #ff4fa8);
+ --gradient-accent: linear-gradient(135deg, #98C379, #61AFEF);
+
+ /* Retro Coder Variables */
+ --glass-bg: #21252b;
+ --glass-border: #ABB2BF;
+ --glass-shadow: none;
+ --glass-hover-bg: #282C33;
+ --glass-hover-border: #C778DD;
+
+ /* Fonts */
+ --font-heading: 'Fira Code', monospace;
+ --font-mono: 'Fira Code', monospace;
+
+ color-scheme: dark;
}
* {
@@ -12,14 +46,60 @@
}
body {
+ background-color: var(--bg-primary);
+ color: var(--text-primary);
min-height: 100vh;
+ overflow-x: hidden;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+}
+::-webkit-scrollbar-track {
+ background: var(--bg-primary);
+}
+::-webkit-scrollbar-thumb {
+ background: var(--bg-tertiary);
+ border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+ background: var(--color-primary);
}
a {
- color: #4f46e5;
+ color: var(--color-primary);
text-decoration: none;
+ transition: all 0.2s ease;
}
a:hover {
- text-decoration: underline;
+ color: var(--color-secondary);
+ text-shadow: 0 0 8px rgba(168, 85, 247, 0.3);
+}
+
+/* Keyframe Animations */
+@keyframes fadeIn {
+ from { opacity: 0; transform: translateY(15px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes pulseGlow {
+ 0%, 100% { box-shadow: 0 0 15px rgba(99, 102, 241, 0.2); }
+ 50% { box-shadow: 0 0 25px rgba(168, 85, 247, 0.4); }
+}
+
+@keyframes shimmer {
+ 0% { background-position: -200% 0; }
+ 100% { background-position: 200% 0; }
+}
+
+@keyframes rotateGrad {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+}
+
+.fade-in {
+ animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
diff --git a/frontend/src/pages/AgentDetailPage.tsx b/frontend/src/pages/AgentDetailPage.tsx
index 088fd1c..f6e27a0 100644
--- a/frontend/src/pages/AgentDetailPage.tsx
+++ b/frontend/src/pages/AgentDetailPage.tsx
@@ -1,78 +1,859 @@
-import { useEffect, useState } from 'react'
-import { useParams, Link } from 'react-router-dom'
-import { fetchAgent, runAgent } from '../api/client'
-
-/**
- * AgentDetailPage — full agent detail view.
- *
- * TODO: Show tools required with links to tool pages
- * TODO: Show permissions, example prompts, reviews
- * TODO: Implement Run Agent button with trace viewer
- * TODO: Implement Remix/Fork button
- * TODO: Show version history
- */
+import { useEffect, useState, useRef } from 'react'
+import { useParams, Link, useNavigate } from 'react-router-dom'
+import { fetchAgent, runAgent, fetchReviews, addReview, forkAgent, type Agent, type Review, type Trace } from '../api/client'
+import StarRating from '../components/StarRating'
+import { AgentDetailSkeleton } from '../components/SkeletonLoader'
+import { getCategoryIcon, StarIcon, DownloadIcon, GitForkIcon, TerminalIcon, KeyIcon, ToolIcon } from '../components/Icons'
+
export default function AgentDetailPage() {
const { id } = useParams<{ id: string }>()
- const [agent, setAgent] = useState
+
+ )
+ }
+
+ // Handle run simulation
+ const handleExecute = async (e: React.FormEvent) => {
+ e.preventDefault()
+ if (running) return
+
+ setRunning(true)
+ setRunTrace(null)
+ setCurrentStepIndex(-1)
+
try {
- const result = await runAgent(id, {})
- setRunResult(result)
+ const trace = await runAgent(agent.id, inputsState)
+ setRunTrace(trace)
+
+ let stepIdx = 0
+ const interval = setInterval(() => {
+ setCurrentStepIndex(stepIdx)
+ stepIdx++
+ if (stepIdx >= trace.steps.length) {
+ clearInterval(interval)
+ setRunning(false)
+ }
+ }, 700)
} catch {
- setRunResult({ error: 'Run failed — is the backend running?' })
+ setRunning(false)
+ }
+ }
+
+ // Handle remix listing
+ const handleRemixSubmit = async (e: React.FormEvent) => {
+ e.preventDefault()
+ if (!remixName.trim()) return
+ setRemixing(true)
+ try {
+ const result = await forkAgent(agent.id, remixName.trim())
+ setTimeout(() => {
+ setRemixing(false)
+ setShowRemix(false)
+ setRemixName('')
+ navigate(`/agents/${result.id}`)
+ }, 1000)
+ } catch (err) {
+ setRemixing(false)
+ alert('Remix failed')
+ }
+ }
+
+ // Handle simulated install
+ const handleInstallToggle = () => {
+ if (installed) {
+ setInstalled(false)
+ } else {
+ setInstalling(true)
+ setTimeout(() => {
+ setInstalling(false)
+ setInstalled(true)
+ }, 1200)
}
}
- if (loading) return Agent Not Found
++ Could not locate listing ID: {id} +
+ + ← Back to Marketplace + +Loading...
- if (!agent) returnAgent not found. Back to agents
+ // Handle review submit + const handleReviewSubmit = async (e: React.FormEvent) => { + e.preventDefault() + if (!reviewComment.trim()) return + setSubmittingReview(true) + try { + const newReview = await addReview(agent.id, { + rating: reviewRating, + review: reviewComment.trim(), + user: reviewName.trim() || 'Anonymous Developer' + }) + + const updatedReviews = [newReview, ...reviews] + setReviews(updatedReviews) + + const sum = updatedReviews.reduce((acc, r) => acc + r.rating, 0) + const avg = sum / updatedReviews.length + setAgent({ + ...agent, + rating: avg + }) + + setReviewName('') + setReviewRating(5) + setReviewComment('') + } catch (err) { + alert('Could not submit review') + } finally { + setSubmittingReview(false) + } + } + + const totalReviews = reviews.length + const distribution = [0, 0, 0, 0, 0] // 5, 4, 3, 2, 1 + reviews.forEach((r) => { + const starIdx = 5 - Math.round(r.rating) + if (starIdx >= 0 && starIdx < 5) { + distribution[starIdx]++ + } + }) return ( -
- ← Back to agents
-
{String(agent.name)}
-{String(agent.description)}
- -
-
-
-
+
+
+ ← Back to Marketplace
+
+
+ {/* Hero Header */}
+
-
-
- {runResult && (
-
-
+ {/* Glowing avatar ring */}
+
-
+ {getCategoryIcon(agent.category, 36, 'var(--color-primary)')}
+
+
+
+
+
+ {agent.name}
+ + {agent.category} + ++ {agent.description} +
+
+
+
+
+
+
+
+
+ Details
--
-
- Category: {String(agent.category)} -
- Rating: ★ {Number(agent.rating).toFixed(1)} -
- Tools: {(agent.tools_required as string[])?.join(', ') || 'None'} -
- Example: {String(agent.example_use_case || 'N/A')} -
Run Result
-
- {JSON.stringify(runResult, null, 2)}
-
+ {/* Main Two-Column Layout */}
+
+ {/* Left Side: Actions and Details Metadata */}
+
+
+ {/* Right Side: Core Content Details */}
+
+
+ {/* Required Tools Hub */}
+
+
+
+ {/* Interactive JSON Schema Inspector */}
+ + #required-tools +
+ {agent.tools_required && agent.tools_required.length > 0 ? ( +
+ {agent.tools_required.map((toolId) => (
+ {
+ e.currentTarget.style.borderColor = 'var(--color-primary)'
+ e.currentTarget.style.background = 'rgba(199, 120, 221, 0.03)'
+ }}
+ onMouseLeave={(e) => {
+ e.currentTarget.style.borderColor = 'var(--glass-border)'
+ e.currentTarget.style.background = 'rgba(255, 255, 255, 0.02)'
+ }}
+ >
+
+ ) : (
+
+
+
+ ))}
+
+ {toolId.replace(/_/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase())}
+
+
+ view-schema ≥
+
+ This agent doesn't require any registry tools.
+ )}
+
+
+
+ {/* Running Terminal Simulator */}
+ + #data-schemas +
+ + {/* Input Schema */} +
+
+ {inputsOpen && (
+
+
+ {/* Output Schema */}
+
+ {JSON.stringify(agent.inputs, null, 2)}
+
+ )}
+
+
+ {outputsOpen && (
+
+
+ {JSON.stringify(agent.outputs, null, 2)}
+
+ )}
+
+ {/* Terminal Header */}
+
+
+ {/* Interactive Reviews Hub */}
+
+
+
+ {/* Inputs Config Forms */}
+
+
+ {/* Terminal Log Console */}
+
+
+
+
+ simulator_terminal.sh
+
+ active
+
+
+ // AgentStore simulated runtime debugger. Ready.
+ {agent.example_prompts && agent.example_prompts.length > 0 && (
+
+ Example Prompts: {agent.example_prompts.map(p => `"${p}"`).join(' | ')}
+
+ )}
+
+ {/* Trace steps */}
+ {runTrace && runTrace.steps && (
+
+
+ )}
+
+ {/* Show running state loader */}
+ {running && (
+ $ agentstore-cli --run {agent.id} --input '{JSON.stringify(inputsState)}'
+ {runTrace.steps.map((step, idx) => {
+ const show = idx <= currentStepIndex
+ if (!show) return null
+ return (
+
+ [{new Date(runTrace.started_at).toLocaleTimeString()}]{' '}
+ [Step {step.step}] {step.action}
+ {step.details && — {step.details}}
+ {step.tool && (Target Tool: {step.tool})}
+ {step.output_summary &&
+ )
+ })}
+ ↳ Tool Result: {step.output_summary}
}
+
+ ⏳ Processing remote node vectors
+
+
+ )}
+
+ {/* Output block display */}
+ {runTrace && currentStepIndex >= runTrace.steps.length - 1 && (
+
+
+ )}
+
+ 🟢 RUN COMPLETED [STATUS: 200 OK]
+
+ {JSON.stringify(runTrace.final_output, null, 2)}
+
+
+
+ #ratings-and-reviews +
+ +
+
+ {/* Ratings Distribution graph */}
+
+
+ {/* Write a review form */}
+
+
+
+ {/* Graphical bars */}
+
+ {agent.rating.toFixed(1)}
+ / 5.0
+
+
+
+ Based on {totalReviews} reviews
+
+ {distribution.map((count, idx) => {
+ const stars = 5 - idx
+ const pct = totalReviews > 0 ? (count / totalReviews) * 100 : 0
+ return (
+
+
+ {stars} Star
+
+ )
+ })}
+
+
+
+ {count}
+