@@ -273,21 +433,35 @@ export default async function HomePage(): Promise
{
{'{'}
- {'\n '}"mcpServers": {'{'}
- {'\n '}"tpmjs": {'{'}
- {'\n '}"command": "npx",
- {'\n '}"args": ["-y", "@anthropic/mcp-remote",
- {'\n '}"https://tpmjs.com/api/mcp/ajax/ajax-collection/sse"]
- {'\n '}{'}'}
- {'\n '}{'}'}
- {'\n'}{'}'}
+ {'\n '}
+ "mcpServers":{' '}
+ {'{'}
+ {'\n '}
+ "tpmjs":{' '}
+ {'{'}
+ {'\n '}
+ "command":{' '}
+ "npx",{'\n '}
+ "args": [
+ "-y",{' '}
+ "@anthropic/mcp-remote",{'\n '}
+
+ "https://tpmjs.com/api/mcp/ajax/ajax-collection/sse"
+
+ ]{'\n '}
+ {'}'}
+ {'\n '}
+ {'}'}
+ {'\n'}
+ {'}'}
- add to config → instant access to 170+ tools
+ add to config → instant access to{' '}
+ 170+ tools
diff --git a/apps/web/src/app/scenarios/[id]/page.tsx b/apps/web/src/app/scenarios/[id]/page.tsx
new file mode 100644
index 0000000..3d9345f
--- /dev/null
+++ b/apps/web/src/app/scenarios/[id]/page.tsx
@@ -0,0 +1,468 @@
+'use client';
+
+import { Badge } from '@tpmjs/ui/Badge/Badge';
+import { Button } from '@tpmjs/ui/Button/Button';
+import { Icon } from '@tpmjs/ui/Icon/Icon';
+import Link from 'next/link';
+import { notFound, useParams } from 'next/navigation';
+import { useCallback, useEffect, useState } from 'react';
+import { AppHeader } from '~/components/AppHeader';
+
+interface ScenarioRun {
+ id: string;
+ status: string;
+ retryCount: number;
+ evaluator: {
+ model: string | null;
+ verdict: string | null;
+ reason: string | null;
+ };
+ assertions: { passed: string[]; failed: string[] } | null;
+ usage: {
+ inputTokens: number | null;
+ outputTokens: number | null;
+ totalTokens: number | null;
+ executionTimeMs: number | null;
+ estimatedCost: number | null;
+ };
+ timestamps: {
+ startedAt: string | null;
+ completedAt: string | null;
+ createdAt: string;
+ };
+ output?: string;
+ errorLog?: string;
+ conversation?: unknown[];
+}
+
+interface ScenarioDetail {
+ id: string;
+ collectionId: string | null;
+ prompt: string;
+ name: string | null;
+ description: string | null;
+ tags: string[];
+ qualityScore: number;
+ consecutivePasses: number;
+ consecutiveFails: number;
+ totalRuns: number;
+ lastRunAt: string | null;
+ lastRunStatus: string | null;
+ createdAt: string;
+ updatedAt: string;
+ isOwner: boolean;
+ collection: {
+ id: string;
+ name: string;
+ slug: string;
+ username: string;
+ } | null;
+ recentRuns: ScenarioRun[];
+ runCount: number;
+}
+
+function StatusBadge({ status }: { status: string | null }) {
+ if (!status) {
+ return
Not run;
+ }
+
+ switch (status) {
+ case 'pass':
+ return (
+
+
+ Pass
+
+ );
+ case 'fail':
+ return (
+
+
+ Fail
+
+ );
+ case 'error':
+ return (
+
+
+ Error
+
+ );
+ case 'running':
+ return (
+
+
+ Running
+
+ );
+ case 'pending':
+ return (
+
+
+ Pending
+
+ );
+ default:
+ return
{status};
+ }
+}
+
+function QualityIndicator({ score, showLabel = true }: { score: number; showLabel?: boolean }) {
+ const percentage = Math.round(score * 100);
+ const color =
+ percentage >= 70
+ ? 'text-success'
+ : percentage >= 40
+ ? 'text-warning'
+ : 'text-foreground-tertiary';
+
+ return (
+
+
+ {percentage}%
+ {showLabel && quality}
+
+ );
+}
+
+function formatDuration(ms: number | null): string {
+ if (!ms) return '—';
+ if (ms < 1000) return `${ms}ms`;
+ return `${(ms / 1000).toFixed(1)}s`;
+}
+
+function formatDate(dateString: string): string {
+ return new Date(dateString).toLocaleDateString('en-US', {
+ month: 'short',
+ day: 'numeric',
+ year: 'numeric',
+ hour: '2-digit',
+ minute: '2-digit',
+ });
+}
+
+export default function ScenarioDetailPage(): React.ReactElement {
+ const params = useParams();
+ const scenarioId = params.id as string;
+
+ const [scenario, setScenario] = useState
(null);
+ const [runs, setRuns] = useState([]);
+ const [isLoading, setIsLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [isRunning, setIsRunning] = useState(false);
+ const [runError, setRunError] = useState(null);
+ const [expandedRunId, setExpandedRunId] = useState(null);
+
+ const fetchScenario = useCallback(async () => {
+ try {
+ const response = await fetch(`/api/scenarios/${scenarioId}?runsLimit=50`);
+ if (response.status === 404) {
+ setError('not_found');
+ return;
+ }
+ const data = await response.json();
+
+ if (data.success) {
+ setScenario(data.data);
+ setRuns(data.data.recentRuns || []);
+ } else {
+ setError(data.error?.message || 'Failed to load scenario');
+ }
+ } catch {
+ setError('Failed to load scenario');
+ } finally {
+ setIsLoading(false);
+ }
+ }, [scenarioId]);
+
+ useEffect(() => {
+ fetchScenario();
+ }, [fetchScenario]);
+
+ const handleRunScenario = async () => {
+ setIsRunning(true);
+ setRunError(null);
+
+ try {
+ const response = await fetch(`/api/scenarios/${scenarioId}/run`, {
+ method: 'POST',
+ });
+
+ if (response.status === 429) {
+ const data = await response.json();
+ setRunError(`Rate limited. Try again in ${Math.ceil(data.retryAfter / 60)} minute(s).`);
+ return;
+ }
+
+ if (!response.ok) {
+ const data = await response.json();
+ throw new Error(data.error?.message || 'Failed to run scenario');
+ }
+
+ // Refresh to show updated status
+ await fetchScenario();
+ } catch (err) {
+ setRunError(err instanceof Error ? err.message : 'Failed to run scenario');
+ } finally {
+ setIsRunning(false);
+ }
+ };
+
+ if (error === 'not_found') {
+ notFound();
+ }
+
+ return (
+
+
+
+
+ {isLoading ? (
+
+
+
+ ) : error ? (
+
+ ) : scenario ? (
+
+ {/* Breadcrumb */}
+
+
+ {/* Header */}
+
+
+
+ {scenario.name || 'Unnamed Scenario'}
+
+ {scenario.description && (
+
{scenario.description}
+ )}
+
+ {scenario.isOwner && (
+
+ )}
+
+
+ {runError && (
+
+ {runError}
+
+ )}
+
+ {/* Prompt */}
+
+
+ Prompt
+
+
{scenario.prompt}
+
+
+ {/* Stats */}
+
+
+
+
Total Runs
+
{scenario.totalRuns}
+
+
+
Pass Streak
+
+
+ {scenario.consecutivePasses}
+
+
+
+
Fail Streak
+
+
+ {scenario.consecutiveFails}
+
+
+
+
+
+ {/* Tags */}
+ {scenario.tags.length > 0 && (
+
+ {scenario.tags.map((tag) => (
+
+ {tag}
+
+ ))}
+
+ )}
+
+ {/* Run History */}
+
+ Run History
+
+ {runs.length === 0 ? (
+
+
+
No runs yet
+ {scenario.isOwner && (
+
+ )}
+
+ {runs.map((run) => (
+
+ {/* Run Header */}
+
+
+ {/* Run Details (Expanded) */}
+ {expandedRunId === run.id && (
+
+
+ {/* Evaluator */}
+ {run.evaluator.verdict && (
+
+
+ LLM Evaluation
+
+
+
+ {run.evaluator.model && (
+
+ {run.evaluator.model}
+
+ )}
+
+ {run.evaluator.reason && (
+
+ {run.evaluator.reason}
+
+ )}
+
+ )}
+
+ {/* Usage Stats */}
+
+
+ Usage
+
+
+
+ Duration:{' '}
+
+ {formatDuration(run.usage.executionTimeMs)}
+
+
+
+ Tokens:{' '}
+
+ {run.usage.totalTokens?.toLocaleString() || '—'}
+
+
+
+ Retries:{' '}
+ {run.retryCount}
+
+
+
+
+
+ {/* Output (if owner) */}
+ {run.output && (
+
+
+ Output
+
+
+ {run.output}
+
+
+ )}
+
+ {/* Error Log (if owner and error) */}
+ {run.errorLog && (
+
+
+ Error Log
+
+
+ {run.errorLog}
+
+
+ )}
+
+ )}
+
+ ))}
+
+
+
+
+ {percentage}%
+
+ );
+}
+
+export default function ScenariosExplorerPage(): React.ReactElement {
+ const [search, setSearch] = useState('');
+ const [sort, setSort] = useState('qualityScore');
+
+ // Fetch scenarios using SWR
+ const { data, isLoading, error: swrError, mutate } = useScenarios({ sortBy: sort });
+
+ const scenarios = data?.scenarios ?? [];
+ const hasMore = data?.pagination.hasMore ?? false;
+ const error = swrError?.message ?? null;
+
+ // Filter and sort scenarios (client-side search)
+ const filteredScenarios = useMemo(() => {
+ let result = scenarios;
+
+ if (search) {
+ const query = search.toLowerCase();
+ result = result.filter(
+ (s: PublicScenario) =>
+ s.prompt.toLowerCase().includes(query) ||
+ s.name?.toLowerCase().includes(query) ||
+ s.tags.some((tag) => tag.toLowerCase().includes(query)) ||
+ s.collection?.name.toLowerCase().includes(query)
+ );
+ }
+
+ return sortScenarios(result, sort);
+ }, [scenarios, search, sort]);
+
+ const TableHeader = useCallback(
+ () => (
+
+ | Scenario |
+ Collection |
+ Quality |
+ Runs |
+ Status |
+ Tags |
+
+ ),
+ []
+ );
+
+ const TableRow = useCallback((_index: number, scenario: PublicScenario) => {
+ const detailUrl = scenario.collection
+ ? `/@${scenario.collection.username}/collections/${scenario.collection.slug}/scenarios/${scenario.id}`
+ : `/scenarios/${scenario.id}`;
+
+ return (
+ <>
+
+
+
+ {scenario.name || truncateText(scenario.prompt, 50)}
+
+ {scenario.name && (
+
+ {truncateText(scenario.prompt, 80)}
+
+ )}
+
+ |
+
+ {scenario.collection ? (
+
+ {scenario.collection.name}
+
+ ) : (
+ —
+ )}
+ |
+
+
+ |
+
+
+ {scenario.totalRuns}
+
+ |
+
+
+ |
+
+
+ {scenario.tags.slice(0, 2).map((tag) => (
+
+ {tag}
+
+ ))}
+ {scenario.tags.length > 2 && (
+
+ +{scenario.tags.length - 2}
+
+ )}
+
+ |
+
+ );
+ }, []);
+
+ return (
+
+
+
+
+
+
+ {/* Filters */}
+
+
+ setSearch(e.target.value)}
+ placeholder="Search scenarios..."
+ />
+
+
+
+ Sort:
+
+
+
(
+
+ ),
+ TableHead: (props) => (
+
+ ),
+ TableBody: (props) => ,
+ TableRow: (props) => (
+ |
+ ),
+ }}
+ />
+
+ Showing {filteredScenarios.length} scenario
+ {filteredScenarios.length !== 1 ? 's' : ''}
+ {search && ` matching "${search}"`}
+ {hasMore && ' (scroll for more)'}
+
+
+ )}
+
+