feat: add sveltekit pages, generate reports
This commit is contained in:
@@ -0,0 +1,39 @@
|
||||
:root {
|
||||
--bg: #0f172a;
|
||||
--panel: #1e293b;
|
||||
--panel2: #273449;
|
||||
--text: #e2e8f0;
|
||||
--muted: #94a3b8;
|
||||
--ok: #10b981;
|
||||
--no: #f87171;
|
||||
--warn: #f59e0b;
|
||||
--border: #334155;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
code {
|
||||
background: var(--panel2);
|
||||
padding: 1px 6px;
|
||||
border-radius: 5px;
|
||||
font-size: 0.92em;
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: var(--muted);
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
import type {
|
||||
ReportRoot,
|
||||
PerTaskRow,
|
||||
ScenarioName,
|
||||
} from "@duck/types";
|
||||
import { SCENARIO_NAMES, SCENARIO_LABELS, SCENARIO_DESCS } from "@duck/types";
|
||||
|
||||
export { SCENARIO_NAMES, SCENARIO_LABELS, SCENARIO_DESCS };
|
||||
|
||||
export interface RowViewModel extends PerTaskRow {
|
||||
model: string;
|
||||
}
|
||||
|
||||
export function extractPerTask(report: ReportRoot): RowViewModel[] {
|
||||
return Object.entries(report.models).flatMap(([model, rep]) =>
|
||||
rep.perTask.map((row) => ({ ...row, model })),
|
||||
);
|
||||
}
|
||||
|
||||
export function modelShort(name: string): string {
|
||||
const [base, ver] = String(name).split(":");
|
||||
return ver ? `${base}:${ver}` : base;
|
||||
}
|
||||
|
||||
export type PctTone = "safe" | "warn" | "bad";
|
||||
|
||||
export function pctTone(p: number): PctTone {
|
||||
return p >= 70 ? "safe" : p >= 40 ? "warn" : "bad";
|
||||
}
|
||||
|
||||
export function getReviewTotals(report: ReportRoot): { reviewed: number; pending: number } {
|
||||
let reviewed = 0;
|
||||
let pending = 0;
|
||||
for (const rep of Object.values(report.models)) {
|
||||
for (const s of SCENARIO_NAMES) {
|
||||
const g = rep.scenarios[s];
|
||||
if (g) {
|
||||
reviewed += g.reviewed || 0;
|
||||
pending += g.pending || 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
return { reviewed, pending };
|
||||
}
|
||||
|
||||
export function scenarioOrder(): ScenarioName[] {
|
||||
return [...SCENARIO_NAMES];
|
||||
}
|
||||
@@ -1,11 +1,79 @@
|
||||
<script lang="ts">
|
||||
import '../app.css';
|
||||
import favicon from '$lib/assets/favicon.svg';
|
||||
import { page } from '$app/state';
|
||||
|
||||
let { children } = $props();
|
||||
|
||||
const links = [
|
||||
{ href: '/', label: 'Главная' },
|
||||
{ href: '/mcp', label: 'MCP' },
|
||||
{ href: '/reports', label: 'Отчёты' }
|
||||
];
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<link rel="icon" href={favicon} />
|
||||
</svelte:head>
|
||||
|
||||
{@render children()}
|
||||
<header class="topbar">
|
||||
<nav class="nav">
|
||||
<a class="brand" href="/">🦆 Rubber Duck</a>
|
||||
<div class="links">
|
||||
{#each links as link}
|
||||
<a class="link" class:active={page.url.pathname === link.href} href={link.href}>
|
||||
{link.label}
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="wrap">{@render children()}</main>
|
||||
|
||||
<style>
|
||||
.topbar {
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--panel);
|
||||
}
|
||||
.nav {
|
||||
max-width: 1160px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
height: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
.brand {
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
font-size: 15px;
|
||||
}
|
||||
.links {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
.link {
|
||||
color: var(--muted);
|
||||
text-decoration: none;
|
||||
padding: 6px 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.link:hover {
|
||||
color: var(--text);
|
||||
background: var(--panel2);
|
||||
}
|
||||
.link.active {
|
||||
color: #fff;
|
||||
background: #3b82f6;
|
||||
}
|
||||
.wrap {
|
||||
max-width: 1160px;
|
||||
margin: 0 auto;
|
||||
padding: 24px 20px 60px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
<h1>Welcome to SvelteKit</h1>
|
||||
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
|
||||
<h1>🦆 Rubber Duck Debugging as a Service</h1>
|
||||
<p class="muted">Главная страница в разработке. А пока — смотрите <a href="/reports">отчёты тестирования</a> и <a href="/mcp">MCP-сервер</a>.</p>
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
<h1>🩵 Rubber Duck MCP</h1>
|
||||
<p>
|
||||
MCP-сервер для техники «резиновая уточка»: когда ИИ застревает в логическом цикле
|
||||
или склонен к галлюцинациям, он вызывает инструмент <code>quack()</code>, чтобы
|
||||
сформулировать мысль и продолжить.
|
||||
</p>
|
||||
<p>
|
||||
Режим <strong>Streamable HTTP</strong> (stateless), на Vercel под
|
||||
<code>mcp-handler</code> + <code>@modelcontextprotocol/server</code>.
|
||||
</p>
|
||||
|
||||
<h2>Эндпоинт</h2>
|
||||
<p>Подключите как MCP-сервер (тип Streamable HTTP) в Cursor, Claude Desktop и других клиентах:</p>
|
||||
<pre><code>POST /api/mcp</code></pre>
|
||||
|
||||
<h2>Инструменты</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<code>quack</code> — возвращает кряк. Опциональный параметр
|
||||
<code>mood</code>: <code>happy | confused | excited | sleepy</code>.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2>Проверка</h2>
|
||||
<pre><code>curl -X POST https://rubber-duck-mcp.vercel.app/api/mcp \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "Accept: application/json, text/event-stream" \
|
||||
-d '{"jsonrpc":"2.0","id":1,"method":"tools/call","params"{"name":"quack","arguments"{"mood":"happy"}}}}'
|
||||
</code></pre>
|
||||
|
||||
<h2>Запуск локально</h2>
|
||||
<pre><code>pnpm install
|
||||
pnpm dev # http://localhost:5173
|
||||
</code></pre>
|
||||
<p class="muted">Локально эндпоинт доступен на <code>/api/mcp</code> того же dev-сервера.</p>
|
||||
|
||||
<style>
|
||||
pre {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 12px 14px;
|
||||
overflow: auto;
|
||||
}
|
||||
h2 {
|
||||
font-size: 17px;
|
||||
margin: 28px 0 10px;
|
||||
}
|
||||
code {
|
||||
color: #f8fafc;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,542 @@
|
||||
<script lang="ts">
|
||||
import type { ScenarioName } from '@duck/types';
|
||||
import {
|
||||
SCENARIO_NAMES,
|
||||
SCENARIO_LABELS,
|
||||
SCENARIO_DESCS,
|
||||
modelShort,
|
||||
pctTone
|
||||
} from '$lib/reports';
|
||||
import type { ReportsPageData } from './+page.ts';
|
||||
|
||||
let { data }: { data: ReportsPageData } = $props();
|
||||
|
||||
const { report, rows, review } = $derived(data);
|
||||
const models = $derived(Object.keys(report.aggregate.perModel));
|
||||
const perModel = $derived(report.aggregate.perModel);
|
||||
const perScenarioAgg = $derived(report.aggregate.perScenario);
|
||||
|
||||
let selModel = $state('all');
|
||||
let selScenario = $state('all');
|
||||
|
||||
const filtered = $derived(
|
||||
rows.filter(
|
||||
(r) =>
|
||||
(selModel === 'all' || r.model === selModel) &&
|
||||
(selScenario === 'all' || r.scenario === selScenario)
|
||||
)
|
||||
);
|
||||
|
||||
function scenarioAccuracy(m: string, s: ScenarioName): number {
|
||||
return report.models[m]?.scenarios[s]?.accuracy ?? 0;
|
||||
}
|
||||
|
||||
function toneClass(p: number): string {
|
||||
return `tone-${pctTone(p)}`;
|
||||
}
|
||||
|
||||
function resultText(correct: boolean | null): string {
|
||||
return correct === null || correct === undefined ? '?' : correct ? '✓' : '✗';
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Rubber Duck MCP — отчёты</title>
|
||||
</svelte:head>
|
||||
|
||||
<h1>🦆 Rubber Duck MCP — отчёт тестирования</h1>
|
||||
<p class="meta">
|
||||
MCP: <b>{report.mcpUrl}</b> · Моделей: <b>{models.length}</b> ·
|
||||
Дата: <b>{report.generatedAt}</b>
|
||||
</p>
|
||||
|
||||
<h2>Сводка по моделям</h2>
|
||||
<div class="shell">
|
||||
<table class="summary">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Модель</th>
|
||||
<th>Контроль</th>
|
||||
<th>Мысли</th>
|
||||
<th>Слепая</th>
|
||||
<th>Помощник</th>
|
||||
<th>Средняя acc</th>
|
||||
<th>Размечено</th>
|
||||
<th>Утка</th>
|
||||
<th>Вызовов</th>
|
||||
<th>ср. токены out</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each models as m (m)}
|
||||
{@const g = perModel[m]}
|
||||
<tr>
|
||||
<td class="pm-name">{modelShort(m)}</td>
|
||||
<td class="pm-num {toneClass(scenarioAccuracy(m, 'control'))}">
|
||||
{scenarioAccuracy(m, 'control')}%
|
||||
</td>
|
||||
<td class="pm-num {toneClass(scenarioAccuracy(m, 'thinking'))}">
|
||||
{scenarioAccuracy(m, 'thinking')}%
|
||||
</td>
|
||||
<td class="pm-num {toneClass(scenarioAccuracy(m, 'blind'))}">
|
||||
{scenarioAccuracy(m, 'blind')}%
|
||||
</td>
|
||||
<td class="pm-num {toneClass(scenarioAccuracy(m, 'mentor'))}">
|
||||
{scenarioAccuracy(m, 'mentor')}%
|
||||
</td>
|
||||
<td class="pm-num">{g.accuracy}%</td>
|
||||
<td class="pm-num">{g.reviewed}<span class="muted"> / {g.totalRows}</span></td>
|
||||
<td class="pm-num">{g.duckUsed}</td>
|
||||
<td class="pm-num">{g.toolCalls}</td>
|
||||
<td class="pm-num">{g.avgGenTokens}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{#if review.pending > 0}
|
||||
<div class="review-note">
|
||||
⚠ Не все ответы размечены: <b>{review.reviewed}</b> проверено,
|
||||
<b>{review.pending}</b> ожидают ревью (показаны символом «?»).
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<h2>Агрегат по сценариям (все модели)</h2>
|
||||
<div class="cards">
|
||||
{#each SCENARIO_NAMES as key (key)}
|
||||
{@const agg = perScenarioAgg[key]}
|
||||
{#if agg}
|
||||
<div class="card">
|
||||
<div class="scenario-head">
|
||||
<div>
|
||||
<div class="scenario-title">{SCENARIO_LABELS[key]}</div>
|
||||
<div class="scenario-desc">{SCENARIO_DESCS[key]}</div>
|
||||
</div>
|
||||
<div class="accuracy {toneClass(agg.accuracy)}">{agg.accuracy}%</div>
|
||||
</div>
|
||||
{#if agg.pending > 0}
|
||||
<div class="pending-badge">неразмечено: {agg.pending}</div>
|
||||
{/if}
|
||||
<div class="bar">
|
||||
<div class="bar-fill {toneClass(agg.accuracy)}" style="width: {agg.accuracy}%"></div>
|
||||
</div>
|
||||
<div class="metrics">
|
||||
<div class="metric">
|
||||
<span class="m-label">Верных</span>
|
||||
<span class="m-val">{agg.correct} <span class="m-mod">/ {agg.reviewed}</span></span>
|
||||
<span class="m-sub">размечено из {agg.tasks}</span>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<span class="m-label">Утка (MCP)</span>
|
||||
<span class="m-val">{agg.tasks ? Math.round((agg.duckUsed / agg.tasks) * 100) : 0}%</span>
|
||||
<span class="m-sub">в {agg.duckUsed} из {agg.tasks} задач</span>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<span class="m-label">quack / задачу</span>
|
||||
<span class="m-val">{agg.avgCalls}</span>
|
||||
<span class="m-sub">вызовов в среднем</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="agg-models">
|
||||
{#each Object.entries(agg.byModel) as [m, g] (m)}
|
||||
<div class="agg-model">
|
||||
<span class="agg-model-name">{modelShort(m)}{g.reviewed ? '' : ' <span class="muted">(?)</span>'}</span>
|
||||
<div class="bar">
|
||||
<div class="bar-fill {toneClass(g.accuracy)}" style="width: {g.reviewed ? g.accuracy : 0}%"></div>
|
||||
</div>
|
||||
<span class="agg-model-val {toneClass(g.accuracy)}">{g.accuracy}%</span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if Object.keys(report.prompts || {}).length}
|
||||
<details class="prompts" open>
|
||||
<summary>Промпты (то, что передаётся модели)</summary>
|
||||
<div class="prompts-body">
|
||||
{#each SCENARIO_NAMES as key (key)}
|
||||
{@const p = report.prompts?.[key]}
|
||||
{#if p}
|
||||
<div class="prompt-item">
|
||||
<div class="prompt-name">{SCENARIO_LABELS[key]}</div>
|
||||
<div class="prompt-text">{p}</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</details>
|
||||
{/if}
|
||||
|
||||
<div class="filters">
|
||||
<label>Модель:</label>
|
||||
<select bind:value={selModel}>
|
||||
<option value="all">Все модели</option>
|
||||
{#each models as m (m)}
|
||||
<option value={m}>{modelShort(m)}</option>
|
||||
{/each}
|
||||
</select>
|
||||
<button class:active={selScenario === 'all'} onclick={() => (selScenario = 'all')}>Все сценарии</button>
|
||||
{#each SCENARIO_NAMES as key (key)}
|
||||
<button class:active={selScenario === key} onclick={() => (selScenario = key)}>
|
||||
{SCENARIO_LABELS[key]}
|
||||
</button>
|
||||
{/each}
|
||||
<span class="count">показано: {filtered.length} из {rows.length}</span>
|
||||
</div>
|
||||
|
||||
<div class="tbl-shell">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Модель</th>
|
||||
<th>#</th>
|
||||
<th>Сценарий</th>
|
||||
<th>✓</th>
|
||||
<th>Утка</th>
|
||||
<th>Вопрос</th>
|
||||
<th>Ожид.</th>
|
||||
<th>in/out</th>
|
||||
<th>Ответ модели</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each filtered as r (r.model + r.id + r.scenario)}
|
||||
<tr class:ok={r.correct === true} class:no={r.correct === false} class:pend={r.correct === null || r.correct === undefined}>
|
||||
<td class="r-model">{modelShort(r.model)}</td>
|
||||
<td class="r-id">{r.id}</td>
|
||||
<td class="r-s">{SCENARIO_LABELS[r.scenario]}</td>
|
||||
<td class="r-result">{resultText(r.correct)}</td>
|
||||
<td class="r-duck">{r.duckUsed ? '🦆' : '—'} <span class="muted">({r.toolCalls})</span></td>
|
||||
<td class="r-question">{r.question}</td>
|
||||
<td class="r-expected">{r.expected}</td>
|
||||
<td class="r-tokens">{r.promptTokens}<span class="muted"> / </span>{r.genTokens}</td>
|
||||
<td class="r-answer">{r.response}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
h2 {
|
||||
font-size: 17px;
|
||||
margin: 26px 0 12px;
|
||||
}
|
||||
.meta {
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
.meta b {
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
}
|
||||
.shell {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
overflow: auto;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 13px;
|
||||
}
|
||||
thead th {
|
||||
background: var(--panel2);
|
||||
text-align: left;
|
||||
padding: 10px 14px;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
tbody td {
|
||||
padding: 10px 14px;
|
||||
border-top: 1px solid var(--border);
|
||||
vertical-align: top;
|
||||
}
|
||||
.pm-name {
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.pm-num {
|
||||
text-align: right;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.tone-safe {
|
||||
color: var(--ok);
|
||||
}
|
||||
.tone-warn {
|
||||
color: var(--warn);
|
||||
}
|
||||
.tone-bad {
|
||||
color: var(--no);
|
||||
}
|
||||
.review-note {
|
||||
margin: 14px 0;
|
||||
padding: 10px 14px;
|
||||
background: rgba(245, 158, 11, 0.12);
|
||||
border: 1px solid rgba(245, 158, 11, 0.4);
|
||||
border-radius: 10px;
|
||||
color: #fbbf24;
|
||||
font-size: 13px;
|
||||
}
|
||||
.cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16px;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
@media (max-width: 1100px) {
|
||||
.cards {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
.card {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
}
|
||||
.scenario-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
.scenario-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.scenario-desc {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.accuracy {
|
||||
font-size: 32px;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
}
|
||||
.pending-badge {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--muted);
|
||||
margin-top: 4px;
|
||||
}
|
||||
.bar {
|
||||
height: 8px;
|
||||
background: var(--panel2);
|
||||
border-radius: 99px;
|
||||
margin: 14px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 99px;
|
||||
background: currentColor;
|
||||
transition: width 0.4s;
|
||||
}
|
||||
.metrics {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
.metric {
|
||||
background: var(--panel2);
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
.m-label {
|
||||
display: block;
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.m-val {
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.m-mod {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--muted);
|
||||
}
|
||||
.m-sub {
|
||||
display: block;
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.agg-models {
|
||||
margin-top: 14px;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
.agg-model {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.agg-model .bar {
|
||||
margin: 0;
|
||||
}
|
||||
.agg-model-name {
|
||||
color: var(--muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.agg-model-val {
|
||||
font-weight: 700;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.prompts {
|
||||
margin: 20px 0;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.prompts summary {
|
||||
cursor: pointer;
|
||||
padding: 12px 16px;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
list-style: none;
|
||||
}
|
||||
.prompts summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
.prompts summary::before {
|
||||
content: '▸ ';
|
||||
color: var(--muted);
|
||||
}
|
||||
.prompts[open] summary::before {
|
||||
content: '▾ ';
|
||||
}
|
||||
.prompts-body {
|
||||
padding: 0 16px 14px;
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
.prompt-item {
|
||||
background: var(--panel2);
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
.prompt-name {
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.prompt-text {
|
||||
white-space: pre-wrap;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.filters {
|
||||
margin: 8px 0 16px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
.filters label {
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
.filters select {
|
||||
background: var(--panel);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border);
|
||||
padding: 7px 10px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.filters button {
|
||||
background: var(--panel);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border);
|
||||
padding: 7px 14px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
}
|
||||
.filters button.active {
|
||||
background: #3b82f6;
|
||||
border-color: #3b82f6;
|
||||
color: #fff;
|
||||
}
|
||||
.count {
|
||||
margin-left: auto;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
.tbl-shell {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
overflow: auto;
|
||||
}
|
||||
.r-model {
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.r-id {
|
||||
font-weight: 700;
|
||||
color: var(--muted);
|
||||
}
|
||||
.r-s {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.r-result {
|
||||
font-weight: 800;
|
||||
}
|
||||
tr.ok .r-result {
|
||||
color: var(--ok);
|
||||
}
|
||||
tr.no .r-result {
|
||||
color: var(--no);
|
||||
}
|
||||
tr.pend .r-result {
|
||||
color: var(--muted);
|
||||
}
|
||||
tr.pend {
|
||||
opacity: 0.75;
|
||||
}
|
||||
.r-duck {
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.r-question {
|
||||
max-width: 300px;
|
||||
color: var(--text);
|
||||
}
|
||||
.r-expected {
|
||||
max-width: 220px;
|
||||
}
|
||||
.r-answer {
|
||||
max-width: 380px;
|
||||
}
|
||||
.r-answer,
|
||||
.r-question {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,23 @@
|
||||
import type { ReportRoot } from '@duck/types';
|
||||
import { error } from '@sveltejs/kit';
|
||||
import type { Load } from '@sveltejs/kit';
|
||||
import { extractPerTask, getReviewTotals } from '$lib/reports';
|
||||
|
||||
export interface ReportsPageData {
|
||||
report: ReportRoot;
|
||||
rows: ReturnType<typeof extractPerTask>;
|
||||
review: { reviewed: number; pending: number };
|
||||
}
|
||||
|
||||
export const load: Load = async ({ fetch }): Promise<ReportsPageData> => {
|
||||
const res = await fetch('/report.json');
|
||||
if (!res.ok) {
|
||||
throw error(res.status, `report.json not found (${res.status})`);
|
||||
}
|
||||
const report = (await res.json()) as ReportRoot;
|
||||
return {
|
||||
report,
|
||||
rows: extractPerTask(report),
|
||||
review: getReviewTotals(report)
|
||||
};
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user