@agentforge-ai/cli 0.4.0 → 0.4.1

package/templates/default/dashboard/app/routes/skills.tsx

@@ -0,0 +1,252 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { DashboardLayout } from '../components/DashboardLayout';
+import { useState, useMemo } from 'react';
+// import { useQuery, useMutation } from 'convex/react';
+// import { api } from '../../convex/_generated/api';
+import { Sparkles, Download, Trash2, Plus, Search, Filter, X } from 'lucide-react';
+
+// --- Mock Data and Types ---
+type SkillCategory = 'Tools' | 'Knowledge' | 'Workflows' | 'Integrations';
+
+interface Skill {
+  id: string;
+  name: string;
+  description: string;
+  category: SkillCategory;
+  version: string;
+  isInstalled: boolean;
+}
+
+const mockSkills: Skill[] = [
+  { id: '1', name: 'Web Scraper', description: 'Extracts data from websites using CSS selectors.', category: 'Tools', version: '1.2.0', isInstalled: true },
+  { id: '2', name: 'Sentiment Analysis', description: 'Analyzes text to determine emotional tone.', category: 'Knowledge', version: '2.0.1', isInstalled: false },
+  { id: '3', name: 'Daily Report', description: 'Generates a daily summary of activities.', category: 'Workflows', version: '1.0.0', isInstalled: true },
+  { id: '4', name: 'GitHub Integration', description: 'Connects to GitHub to manage repositories.', category: 'Integrations', version: '1.5.3', isInstalled: false },
+  { id: '5', name: 'Image Resizer', description: 'Resizes images to specified dimensions.', category: 'Tools', version: '1.1.0', isInstalled: false },
+  { id: '6', name: 'Company Financials', description: 'Provides financial data for public companies.', category: 'Knowledge', version: '3.1.0', isInstalled: true },
+];
+
+const CATEGORIES: SkillCategory[] = ['Tools', 'Knowledge', 'Workflows', 'Integrations'];
+
+// --- Components ---
+
+function CreateSkillDialog({ open, onOpenChange, onCreateSkill }: { open: boolean; onOpenChange: (open: boolean) => void; onCreateSkill: (skill: Omit<Skill, 'id' | 'isInstalled'>) => void; }) {
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [category, setCategory] = useState<SkillCategory>('Tools');
+  const [version, setVersion] = useState('1.0.0');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!name || !description || !version) return;
+    onCreateSkill({ name, description, category, version });
+    onOpenChange(false);
+    setName('');
+    setDescription('');
+    setCategory('Tools');
+    setVersion('1.0.0');
+  };
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4">
+      <div className="bg-card p-6 rounded-lg shadow-xl w-full max-w-md border border-border" onClick={(e) => e.stopPropagation()}>
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-xl font-semibold text-foreground">Create Custom Skill</h2>
+          <button onClick={() => onOpenChange(false)} className="text-muted-foreground hover:text-foreground"><X size={20} /></button>
+        </div>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label htmlFor="name" className="block text-sm font-medium text-muted-foreground mb-1">Skill Name</label>
+            <input id="name" value={name} onChange={(e) => setName(e.target.value)} required className="w-full bg-background border border-border rounded-md px-3 py-2 text-foreground focus:outline-none focus:ring-2 focus:ring-primary" />
+          </div>
+          <div>
+            <label htmlFor="description" className="block text-sm font-medium text-muted-foreground mb-1">Description</label>
+            <textarea id="description" value={description} onChange={(e) => setDescription(e.target.value)} required rows={3} className="w-full bg-background border border-border rounded-md px-3 py-2 text-foreground focus:outline-none focus:ring-2 focus:ring-primary"></textarea>
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label htmlFor="category" className="block text-sm font-medium text-muted-foreground mb-1">Category</label>
+              <select id="category" value={category} onChange={(e) => setCategory(e.target.value as SkillCategory)} className="w-full bg-background border border-border rounded-md px-3 py-2 text-foreground focus:outline-none focus:ring-2 focus:ring-primary">
+                {CATEGORIES.map(cat => <option key={cat} value={cat}>{cat}</option>)}
+              </select>
+            </div>
+            <div>
+              <label htmlFor="version" className="block text-sm font-medium text-muted-foreground mb-1">Version</label>
+              <input id="version" value={version} onChange={(e) => setVersion(e.target.value)} required className="w-full bg-background border border-border rounded-md px-3 py-2 text-foreground focus:outline-none focus:ring-2 focus:ring-primary" />
+            </div>
+          </div>
+          <div className="flex justify-end gap-2 pt-4">
+            <button type="button" onClick={() => onOpenChange(false)} className="px-4 py-2 rounded-md border border-border text-foreground hover:bg-zinc-800 transition-colors">Cancel</button>
+            <button type="submit" className="px-4 py-2 rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors">Create Skill</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+function SkillCard({ skill, onToggleInstall }: { skill: Skill; onToggleInstall: (id: string) => void; }) {
+  // const uninstallSkill = useMutation(api.skills.uninstall);
+  // const installSkill = useMutation(api.skills.install);
+
+  const handleToggle = () => {
+    onToggleInstall(skill.id);
+    // if (skill.isInstalled) {
+    //   uninstallSkill({ id: skill.id });
+    // } else {
+    //   installSkill({ id: skill.id });
+    // }
+  };
+
+  return (
+    <div className="bg-card border border-border rounded-lg p-4 flex flex-col h-full transition-shadow hover:shadow-lg hover:shadow-primary/10">
+      <div className="flex-grow">
+        <div className="flex items-start justify-between mb-2">
+          <div className="flex items-center gap-3">
+            <div className="bg-primary/10 p-2 rounded-md">
+              <Sparkles className="text-primary" size={20} />
+            </div>
+            <div>
+              <h3 className="font-semibold text-foreground">{skill.name}</h3>
+              <p className="text-xs text-muted-foreground">v{skill.version}</p>
+            </div>
+          </div>
+          <span className="text-xs bg-zinc-800 border border-zinc-700 text-muted-foreground px-2 py-0.5 rounded-full whitespace-nowrap">{skill.category}</span>
+        </div>
+        <p className="text-sm text-muted-foreground mt-3">
+          {skill.description}
+        </p>
+      </div>
+      <button
+        onClick={handleToggle}
+        className={`mt-4 w-full flex items-center justify-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-colors ${skill.isInstalled ? 'bg-destructive/10 text-destructive hover:bg-destructive/20' : 'bg-primary/10 text-primary hover:bg-primary/20'}`}>
+        {skill.isInstalled ? <Trash2 size={16} /> : <Download size={16} />}
+        {skill.isInstalled ? 'Uninstall' : 'Install'}
+      </button>
+    </div>
+  );
+}
+
+export const Route = createFileRoute('/skills')({ component: SkillsPage });
+
+function SkillsPage() {
+  const [skills, setSkills] = useState(mockSkills);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedCategories, setSelectedCategories] = useState<SkillCategory[]>([]);
+  const [isCreateDialogOpen, setCreateDialogOpen] = useState(false);
+
+  // const allSkillsQuery = useQuery(api.skills.list);
+  // const createSkillMutation = useMutation(api.skills.create);
+  // const isLoading = allSkillsQuery === undefined;
+  // const skillsData = allSkillsQuery || [];
+
+  const handleToggleCategory = (category: SkillCategory) => {
+    setSelectedCategories(prev =>
+      prev.includes(category)
+        ? prev.filter(c => c !== category)
+        : [...prev, category]
+    );
+  };
+
+  const handleCreateSkill = (newSkillData: Omit<Skill, 'id' | 'isInstalled'>) => {
+    const newSkill: Skill = {
+      ...newSkillData,
+      id: `custom-${Date.now()}`,
+      isInstalled: false,
+    };
+    setSkills(prev => [newSkill, ...prev]);
+    // createSkillMutation(newSkillData).catch(console.error);
+  };
+
+  const handleToggleInstall = (id: string) => {
+    setSkills(prev => prev.map(s => s.id === id ? { ...s, isInstalled: !s.isInstalled } : s));
+    // Note: The actual mutation would be called in SkillCard
+  };
+
+  const filteredSkills = useMemo(() => {
+    // Replace `skills` with `skillsData` when using Convex
+    return skills.filter(skill =>
+      skill.name.toLowerCase().includes(searchQuery.toLowerCase()) &&
+      (selectedCategories.length === 0 || selectedCategories.includes(skill.category))
+    );
+  }, [skills, searchQuery, selectedCategories]); // Replace `skills` with `skillsData`
+
+  const isLoading = false; // When using Convex, this would be `allSkillsQuery === undefined`
+
+  return (
+    <DashboardLayout>
+      <div className="p-4 sm:p-6 lg:p-8 bg-background text-foreground min-h-screen">
+        <header className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6">
+          <div>
+            <h1 className="text-2xl font-bold tracking-tight">Skills Marketplace</h1>
+            <p className="text-muted-foreground">Discover, install, and create new capabilities for your agents.</p>
+          </div>
+          <button onClick={() => setCreateDialogOpen(true)} className="flex items-center justify-center gap-2 px-4 py-2 rounded-md text-sm font-medium bg-primary text-primary-foreground hover:bg-primary/90 transition-colors">
+            <Plus size={16} /> Create Skill
+          </button>
+        </header>
+
+        <div className="mb-6 space-y-4">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" size={20} />
+            <input
+              type="text"
+              placeholder="Search skills by name..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="w-full bg-card border border-border rounded-md pl-10 pr-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary"
+            />
+          </div>
+          <div className="flex items-center gap-2 flex-wrap">
+            <Filter size={16} className="text-muted-foreground" />
+            <span className="text-sm font-medium text-muted-foreground">Filter by:</span>
+            {CATEGORIES.map(category => (
+              <button
+                key={category}
+                onClick={() => handleToggleCategory(category)}
+                className={`px-3 py-1 text-sm rounded-full border transition-colors ${selectedCategories.includes(category) ? 'bg-primary text-primary-foreground border-primary' : 'bg-card hover:bg-zinc-800 border-border'}`}>
+                {category}
+              </button>
+            ))}
+            {selectedCategories.length > 0 && (
+              <button onClick={() => setSelectedCategories([])} className="text-sm text-muted-foreground hover:text-foreground underline">Clear</button>
+            )}
+          </div>
+        </div>
+
+        {isLoading ? (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+            {[...Array(8)].map((_, i) => (
+              <div key={i} className="bg-card border border-border rounded-lg p-4 animate-pulse">
+                <div className="h-8 bg-zinc-800 rounded w-12 mb-3"></div>
+                <div className="h-5 bg-zinc-800 rounded w-3/4 mb-2"></div>
+                <div className="h-4 bg-zinc-800 rounded w-1/4 mb-4"></div>
+                <div className="h-4 bg-zinc-800 rounded w-full mb-1"></div>
+                <div className="h-4 bg-zinc-800 rounded w-5/6"></div>
+                <div className="h-10 bg-zinc-800 rounded mt-4"></div>
+              </div>
+            ))}
+          </div>
+        ) : filteredSkills.length > 0 ? (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+            {filteredSkills.map(skill => (
+              <SkillCard key={skill.id} skill={skill} onToggleInstall={handleToggleInstall} />
+            ))}
+          </div>
+        ) : (
+          <div className="text-center py-16 border-2 border-dashed border-border rounded-lg bg-card">
+            <Sparkles className="mx-auto h-12 w-12 text-muted-foreground" />
+            <h3 className="mt-2 text-lg font-medium text-foreground">No Skills Found</h3>
+            <p className="mt-1 text-sm text-muted-foreground">Your search or filter criteria did not match any skills. Try a different query.</p>
+            <button onClick={() => { setSearchQuery(''); setSelectedCategories([]); }} className="mt-4 px-4 py-2 rounded-md text-sm font-medium bg-primary text-primary-foreground hover:bg-primary/90 transition-colors">
+              Clear Filters
+            </button>
+          </div>
+        )}
+      </div>
+      <CreateSkillDialog open={isCreateDialogOpen} onOpenChange={setCreateDialogOpen} onCreateSkill={handleCreateSkill} />
+    </DashboardLayout>
+  );
+}

package/templates/default/dashboard/app/routes/usage.tsx

@@ -0,0 +1,181 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { DashboardLayout } from "../components/DashboardLayout";
+import { useState } from "react";
+import { BarChart3, DollarSign, Cpu, Activity, TrendingUp, Calendar, Bot, Zap } from "lucide-react";
+
+export const Route = createFileRoute("/usage")({ component: UsagePage });
+
+interface UsageRecord {
+  id: string; agentName: string; provider: string; model: string;
+  promptTokens: number; completionTokens: number; totalTokens: number;
+  cost: number; timestamp: number;
+}
+
+function UsagePage() {
+  const [dateRange, setDateRange] = useState<"7d" | "30d" | "90d">("30d");
+
+  const [records] = useState<UsageRecord[]>([
+    { id: "u1", agentName: "Customer Support", provider: "openai", model: "gpt-4o", promptTokens: 12500, completionTokens: 8200, totalTokens: 20700, cost: 0.62, timestamp: Date.now() - 3600000 },
+    { id: "u2", agentName: "Code Review", provider: "anthropic", model: "claude-3.5-sonnet", promptTokens: 45000, completionTokens: 15000, totalTokens: 60000, cost: 1.35, timestamp: Date.now() - 7200000 },
+    { id: "u3", agentName: "Data Analyst", provider: "openrouter", model: "mixtral-8x7b", promptTokens: 8000, completionTokens: 4500, totalTokens: 12500, cost: 0.08, timestamp: Date.now() - 14400000 },
+    { id: "u4", agentName: "Customer Support", provider: "openai", model: "gpt-4o-mini", promptTokens: 6000, completionTokens: 3200, totalTokens: 9200, cost: 0.09, timestamp: Date.now() - 28800000 },
+    { id: "u5", agentName: "Research Agent", provider: "google", model: "gemini-pro", promptTokens: 22000, completionTokens: 11000, totalTokens: 33000, cost: 0.17, timestamp: Date.now() - 43200000 },
+    { id: "u6", agentName: "Code Review", provider: "anthropic", model: "claude-3.5-sonnet", promptTokens: 38000, completionTokens: 12000, totalTokens: 50000, cost: 1.13, timestamp: Date.now() - 86400000 },
+    { id: "u7", agentName: "Writer Agent", provider: "openai", model: "gpt-4o", promptTokens: 15000, completionTokens: 20000, totalTokens: 35000, cost: 1.05, timestamp: Date.now() - 172800000 },
+    { id: "u8", agentName: "Data Analyst", provider: "xai", model: "grok-2", promptTokens: 10000, completionTokens: 5000, totalTokens: 15000, cost: 0.30, timestamp: Date.now() - 259200000 },
+  ]);
+
+  const totalTokens = records.reduce((s, r) => s + r.totalTokens, 0);
+  const totalCost = records.reduce((s, r) => s + r.cost, 0);
+  const uniqueAgents = new Set(records.map((r) => r.agentName)).size;
+  const totalSessions = records.length;
+
+  // Cost by provider
+  const costByProvider: Record<string, number> = {};
+  records.forEach((r) => { costByProvider[r.provider] = (costByProvider[r.provider] || 0) + r.cost; });
+  const maxProviderCost = Math.max(...Object.values(costByProvider), 1);
+  const providerColors: Record<string, string> = { openai: "bg-green-500", anthropic: "bg-orange-500", openrouter: "bg-blue-500", google: "bg-yellow-500", xai: "bg-purple-500" };
+
+  // Top agents by usage
+  const agentUsage: Record<string, { tokens: number; cost: number }> = {};
+  records.forEach((r) => {
+    if (!agentUsage[r.agentName]) agentUsage[r.agentName] = { tokens: 0, cost: 0 };
+    agentUsage[r.agentName].tokens += r.totalTokens;
+    agentUsage[r.agentName].cost += r.cost;
+  });
+  const topAgents = Object.entries(agentUsage).sort((a, b) => b[1].tokens - a[1].tokens);
+  const maxAgentTokens = topAgents.length > 0 ? topAgents[0][1].tokens : 1;
+
+  // Tokens over time (last 7 days)
+  const days = Array.from({ length: 7 }, (_, i) => {
+    const d = new Date(); d.setDate(d.getDate() - (6 - i));
+    return { label: d.toLocaleDateString("en-US", { weekday: "short" }), date: d.toDateString() };
+  });
+  const tokensByDay = days.map((day) => {
+    const dayTokens = records.filter((r) => new Date(r.timestamp).toDateString() === day.date).reduce((s, r) => s + r.totalTokens, 0);
+    return { ...day, tokens: dayTokens };
+  });
+  const maxDayTokens = Math.max(...tokensByDay.map((d) => d.tokens), 1);
+
+  const formatTokens = (n: number) => {
+    if (n >= 1000000) return (n / 1000000).toFixed(1) + "M";
+    if (n >= 1000) return (n / 1000).toFixed(1) + "K";
+    return n.toString();
+  };
+
+  return (
+    <DashboardLayout>
+      <div className="space-y-6">
+        <div className="flex items-center justify-between">
+          <div><h1 className="text-3xl font-bold">Usage & Metrics</h1><p className="text-muted-foreground mt-1">Monitor token usage, costs, and agent performance</p></div>
+          <div className="flex items-center gap-1 bg-card border rounded-lg p-1">
+            {(["7d", "30d", "90d"] as const).map((range) => (
+              <button key={range} onClick={() => setDateRange(range)} className={`px-3 py-1.5 text-sm rounded-md transition-colors ${dateRange === range ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground"}`}>
+                {range === "7d" ? "7 Days" : range === "30d" ? "30 Days" : "90 Days"}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Summary Cards */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+          {[
+            { label: "Total Tokens", value: formatTokens(totalTokens), icon: Zap, color: "text-blue-400", sub: `${records.length} requests` },
+            { label: "Total Cost", value: `$${totalCost.toFixed(2)}`, icon: DollarSign, color: "text-green-400", sub: `Avg $${(totalCost / Math.max(records.length, 1)).toFixed(3)}/req` },
+            { label: "Active Agents", value: uniqueAgents.toString(), icon: Bot, color: "text-purple-400", sub: "Using LLM providers" },
+            { label: "Total Requests", value: totalSessions.toString(), icon: Activity, color: "text-orange-400", sub: "In selected period" },
+          ].map((stat) => (
+            <div key={stat.label} className="bg-card border rounded-lg p-5">
+              <div className="flex items-center justify-between mb-3">
+                <span className="text-sm text-muted-foreground">{stat.label}</span>
+                <stat.icon className={`h-5 w-5 ${stat.color}`} />
+              </div>
+              <p className="text-2xl font-bold">{stat.value}</p>
+              <p className="text-xs text-muted-foreground mt-1">{stat.sub}</p>
+            </div>
+          ))}
+        </div>
+
+        {/* Charts Row */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {/* Tokens Over Time */}
+          <div className="bg-card border rounded-lg p-5">
+            <h3 className="text-sm font-medium mb-4 flex items-center gap-2"><BarChart3 className="h-4 w-4 text-muted-foreground" />Tokens Over Time</h3>
+            <div className="flex items-end gap-2 h-40">
+              {tokensByDay.map((day) => (
+                <div key={day.label} className="flex-1 flex flex-col items-center gap-1">
+                  <span className="text-xs text-muted-foreground">{day.tokens > 0 ? formatTokens(day.tokens) : ""}</span>
+                  <div className="w-full bg-primary/20 rounded-t-sm relative" style={{ height: `${Math.max((day.tokens / maxDayTokens) * 120, 4)}px` }}>
+                    <div className="absolute inset-0 bg-primary rounded-t-sm" style={{ height: "100%" }} />
+                  </div>
+                  <span className="text-xs text-muted-foreground">{day.label}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Cost by Provider */}
+          <div className="bg-card border rounded-lg p-5">
+            <h3 className="text-sm font-medium mb-4 flex items-center gap-2"><DollarSign className="h-4 w-4 text-muted-foreground" />Cost by Provider</h3>
+            <div className="space-y-3">
+              {Object.entries(costByProvider).sort((a, b) => b[1] - a[1]).map(([provider, cost]) => (
+                <div key={provider} className="space-y-1">
+                  <div className="flex items-center justify-between text-sm">
+                    <span className="capitalize">{provider}</span>
+                    <span className="font-medium">${cost.toFixed(2)}</span>
+                  </div>
+                  <div className="w-full h-2 bg-accent rounded-full overflow-hidden">
+                    <div className={`h-full rounded-full ${providerColors[provider] || "bg-primary"}`} style={{ width: `${(cost / maxProviderCost) * 100}%` }} />
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Top Agents */}
+        <div className="bg-card border rounded-lg p-5">
+          <h3 className="text-sm font-medium mb-4 flex items-center gap-2"><TrendingUp className="h-4 w-4 text-muted-foreground" />Top Agents by Usage</h3>
+          <div className="space-y-3">
+            {topAgents.map(([name, data], i) => (
+              <div key={name} className="flex items-center gap-4">
+                <span className="text-sm text-muted-foreground w-6 text-right">#{i + 1}</span>
+                <div className="flex-1">
+                  <div className="flex items-center justify-between text-sm mb-1">
+                    <span className="font-medium">{name}</span>
+                    <span className="text-muted-foreground">{formatTokens(data.tokens)} tokens · ${data.cost.toFixed(2)}</span>
+                  </div>
+                  <div className="w-full h-1.5 bg-accent rounded-full overflow-hidden">
+                    <div className="h-full bg-primary rounded-full" style={{ width: `${(data.tokens / maxAgentTokens) * 100}%` }} />
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Recent Usage Records */}
+        <div className="bg-card border rounded-lg overflow-hidden">
+          <div className="px-5 py-4 border-b"><h3 className="text-sm font-medium flex items-center gap-2"><Calendar className="h-4 w-4 text-muted-foreground" />Recent Usage Records</h3></div>
+          <table className="w-full text-sm">
+            <thead><tr className="border-b text-muted-foreground text-left"><th className="px-5 py-3 font-medium">Agent</th><th className="px-5 py-3 font-medium">Provider</th><th className="px-5 py-3 font-medium">Model</th><th className="px-5 py-3 font-medium text-right">Prompt</th><th className="px-5 py-3 font-medium text-right">Completion</th><th className="px-5 py-3 font-medium text-right">Total</th><th className="px-5 py-3 font-medium text-right">Cost</th><th className="px-5 py-3 font-medium">Time</th></tr></thead>
+            <tbody>
+              {records.map((r) => (
+                <tr key={r.id} className="border-b hover:bg-accent/50">
+                  <td className="px-5 py-3 font-medium">{r.agentName}</td>
+                  <td className="px-5 py-3"><span className="capitalize px-2 py-0.5 bg-accent rounded text-xs">{r.provider}</span></td>
+                  <td className="px-5 py-3 text-muted-foreground">{r.model}</td>
+                  <td className="px-5 py-3 text-right text-muted-foreground">{r.promptTokens.toLocaleString()}</td>
+                  <td className="px-5 py-3 text-right text-muted-foreground">{r.completionTokens.toLocaleString()}</td>
+                  <td className="px-5 py-3 text-right font-medium">{r.totalTokens.toLocaleString()}</td>
+                  <td className="px-5 py-3 text-right font-medium text-green-400">${r.cost.toFixed(3)}</td>
+                  <td className="px-5 py-3 text-muted-foreground">{new Date(r.timestamp).toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" })}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </DashboardLayout>
+  );
+}

package/templates/default/dashboard/app/styles/globals.css

@@ -0,0 +1,93 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  /* Default to dark theme (OpenClaw-style) */
+  :root {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 5.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 5.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 72.2% 50.6%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 0 72.2% 50.6%;
+    --radius: 0.5rem;
+    --sidebar: 240 10% 4.5%;
+    --sidebar-foreground: 240 5% 64.9%;
+    --sidebar-active: 0 72.2% 50.6%;
+  }
+
+  .light {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 0 72.2% 50.6%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 0 72.2% 50.6%;
+    --sidebar: 0 0% 98%;
+    --sidebar-foreground: 240 3.8% 46.1%;
+    --sidebar-active: 0 72.2% 50.6%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  html {
+    @apply antialiased;
+    color-scheme: dark;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+  /* Custom scrollbar */
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: hsl(var(--muted));
+    border-radius: 3px;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: hsl(var(--muted-foreground));
+  }
+}
+
+@layer utilities {
+  .sidebar-bg {
+    background-color: hsl(var(--sidebar));
+    color: hsl(var(--sidebar-foreground));
+  }
+}

package/templates/default/dashboard/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>AgentForge Dashboard</title>
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/app/main.tsx"></script>
+  </body>
+</html>

package/templates/default/dashboard/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "agentforge-dashboard",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.0",
+    "@radix-ui/react-select": "^2.1.0",
+    "@radix-ui/react-switch": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.0",
+    "@tanstack/react-router": "^1.120.20",
+    "clsx": "^2.1.0",
+    "convex": "^1.17.0",
+    "lucide-react": "^0.400.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "tailwind-merge": "^2.3.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.0",
+    "tailwindcss": "^3.4.0",
+    "typescript": "^5.5.0",
+    "vite": "^6.0.0",
+    "vite-tsconfig-paths": "^5.1.0"
+  }
+}

package/templates/default/dashboard/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/templates/default/dashboard/tailwind.config.js

@@ -0,0 +1,50 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: ["class"],
+  content: ["./app/**/*.{ts,tsx}"],
+  theme: {
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+};

package/templates/default/dashboard/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./app/*"]
+    }
+  },
+  "include": ["app", "app.config.ts"],
+  "exclude": ["node_modules", "dist", ".vinxi"]
+}