@hecer/yoke 1.12.0 → 1.14.0

package/dist/dashboard/analytics.js

@@ -1,5 +1,6 @@
 import { readMeasurements } from '../observability/history.js';
-import { readEvents } from '../observability/events.js';
+import { EVENT_CAP, readEvents } from '../observability/events.js';
+import { DASHBOARD_LIMITS } from './contracts.js';
 export function parsePeriod(params, now = Date.now()) {
     const to = params.has('to') ? Date.parse(params.get('to')) : now;
     const from = params.has('from') ? Date.parse(params.get('from')) : to - 30 * 86400000;
@@ -9,7 +10,6 @@ export function parsePeriod(params, now = Date.now()) {
     return { from, to, bucket: bucket };
 }
 const finite = (value) => typeof value === 'number' && Number.isFinite(value) && value >= 0;
-const numeric = (value) => finite(value) ? value : 0;
 const name = (value) => typeof value === 'string' ? value.slice(0, 200) : 'unknown';
 function bucketOf(timestamp, bucket) {
     const date = new Date(timestamp);
@@ -20,12 +20,17 @@ function bucketOf(timestamp, bucket) {
     return date.toISOString().slice(0, 10);
 }
 function empty() {
-    return { inputTokens: 0, outputTokens: 0, cachedInputTokens: 0, cacheWriteInputTokens: 0, reportedCostUsd: 0,
-        measuredCalls: 0, unknownCalls: 0, costReportedCalls: 0, incompleteCosts: 0, callDurationMs: 0, attemptDurationMs: 0,
-        attempts: 0, successfulAttempts: 0, accepted: 0, repairs: 0, escalations: 0, unmeasuredAttempts: 0 };
+    return { inputTokens: null, outputTokens: null, cachedInputTokens: null, cacheWriteInputTokens: null, reasoningOutputTokens: null, reportedCostUsd: null,
+        measuredCalls: 0, unknownCalls: 0, costReportedCalls: 0, incompleteCosts: 0, callDurationMs: null, attemptDurationMs: null,
+        attempts: 0, successfulAttempts: 0, accepted: 0, repairs: 0, escalations: 0, unmeasuredAttempts: 0, activity: 0 };
+}
+function addMetric(target, key, value) {
+    if (finite(value))
+        target[key] = (target[key] ?? 0) + value;
 }
 export function aggregateMeasurements(events, period) {
-    const total = empty(), buckets = new Map(), models = new Map(), modelBuckets = new Map(), tasks = new Map(), phases = new Map();
+    const total = empty(), buckets = new Map(), models = new Map(), modelBuckets = new Map(), tasks = new Map();
+    const dimensions = { agents: new Map(), providers: new Map(), variants: new Map(), roles: new Map(), phases: new Map() };
     const modelDetails = new Map();
     const seen = new Set(), accepted = new Set();
     let earliest, latest;
@@ -42,23 +47,40 @@ export function aggregateMeasurements(events, period) {
             latest = event.timestamp;
         const data = event.data ?? {}, bucket = get(buckets, bucketOf(event.timestamp, period.bucket)), task = get(tasks, event.storyId ?? 'unattributed');
         const targets = [total, bucket, task];
+        for (const target of targets)
+            target.activity++;
         if (event.type === 'tokens') {
             const calls = Array.isArray(data.calls) && data.calls.length ? data.calls : [{ ...data, actualModel: data.model, durationMs: event.durationMs }];
             for (const item of calls) {
                 if (!item || typeof item !== 'object')
                     continue;
                 const call = item;
-                const provider = name(call.provider), model = name(call.actualModel), role = name(call.role);
+                const provider = name(call.provider ?? data.provider), model = name(call.actualModel ?? call.model ?? data.actualModel ?? data.model), role = name(call.role ?? data.role);
                 const key = JSON.stringify([provider, model, role]);
                 modelDetails.set(key, { provider, model, role });
-                for (const target of [...targets, get(models, key), get(modelBuckets, JSON.stringify([bucketOf(event.timestamp, period.bucket), provider, model, role]))]) {
-                    target.inputTokens += numeric(call.inputTokens);
-                    target.outputTokens += numeric(call.outputTokens);
-                    target.cachedInputTokens += numeric(call.cachedInputTokens);
-                    target.cacheWriteInputTokens += numeric(call.cacheWriteInputTokens);
-                    target.reportedCostUsd += numeric(call.totalCostUsd);
-                    target.callDurationMs += numeric(call.durationMs);
-                    const measured = finite(call.inputTokens) && finite(call.outputTokens) && call.usageAvailable !== false && call.measurementComplete !== false;
+                const dimensionTargets = [];
+                for (const [kind, value] of Object.entries({
+                    agents: name(call.agent ?? data.agent ?? data.agentName ?? data.provider),
+                    providers: provider,
+                    variants: name(call.variant ?? data.variant),
+                    roles: role,
+                })) {
+                    const dimension = get(dimensions[kind], value);
+                    dimension.activity++;
+                    dimensionTargets.push(dimension);
+                }
+                for (const target of [...targets, get(models, key), get(modelBuckets, JSON.stringify([bucketOf(event.timestamp, period.bucket), provider, model, role])), ...dimensionTargets]) {
+                    const usageAvailable = call.usageAvailable !== false && data.usageAvailable !== false && call.measurementComplete !== false && data.measurementComplete !== false;
+                    if (usageAvailable) {
+                        addMetric(target, 'inputTokens', call.inputTokens);
+                        addMetric(target, 'outputTokens', call.outputTokens);
+                        addMetric(target, 'cachedInputTokens', call.cachedInputTokens);
+                        addMetric(target, 'cacheWriteInputTokens', call.cacheWriteInputTokens);
+                        addMetric(target, 'reasoningOutputTokens', call.reasoningOutputTokens);
+                    }
+                    addMetric(target, 'reportedCostUsd', call.totalCostUsd);
+                    addMetric(target, 'callDurationMs', call.durationMs);
+                    const measured = finite(call.inputTokens) && finite(call.outputTokens) && usageAvailable;
                     if (measured)
                         target.measuredCalls++;
                     else
@@ -75,7 +97,11 @@ export function aggregateMeasurements(events, period) {
         }
         else if (event.type === 'phase-ended') {
             const phase = name(event.phase);
-            phases.set(phase, (phases.get(phase) ?? 0) + numeric(event.durationMs));
+            const phaseTarget = get(dimensions.phases, phase);
+            phaseTarget.activity++;
+            addMetric(phaseTarget, 'attemptDurationMs', event.durationMs);
+            if (phase === 'repairing')
+                phaseTarget.repairs++;
             if (phase === 'repairing')
                 for (const target of targets)
                     target.repairs++;
@@ -83,7 +109,7 @@ export function aggregateMeasurements(events, period) {
         else if (event.type === 'attempt-ended') {
             for (const target of targets) {
                 target.attempts++;
-                target.attemptDurationMs += numeric(event.durationMs);
+                addMetric(target, 'attemptDurationMs', event.durationMs);
                 if (['completed', 'passed'].includes(event.outcome ?? ''))
                     target.successfulAttempts++;
                 if (data.usageAvailable !== true)
@@ -99,25 +125,163 @@ export function aggregateMeasurements(events, period) {
             }
         }
     }
-    const decorate = (value) => ({ ...value,
-        tokensPerCallMinute: value.callDurationMs > 0 ? (value.inputTokens + value.outputTokens) / (value.callDurationMs / 60000) : null,
-        tokensPerAccepted: value.accepted ? (value.inputTokens + value.outputTokens) / value.accepted : null,
-        timePerAcceptedMs: value.accepted ? value.attemptDurationMs / value.accepted : null,
-        costState: value.costReportedCalls === 0 ? 'unknown' : value.costReportedCalls === value.measuredCalls && value.unknownCalls === 0 && value.unmeasuredAttempts === 0 && value.incompleteCosts === 0 ? 'measured' : 'partial',
-    });
-    return { total: { ...decorate(total), tokensPerElapsedMinute: (total.inputTokens + total.outputTokens) / ((period.to - period.from) / 60000) },
+    const decorate = (value) => {
+        const tokens = value.inputTokens !== null && value.outputTokens !== null ? value.inputTokens + value.outputTokens : null;
+        const costState = value.costReportedCalls === 0 ? 'unknown' : value.costReportedCalls === value.measuredCalls && value.unknownCalls === 0 && value.unmeasuredAttempts === 0 && value.incompleteCosts === 0 ? 'measured' : 'partial';
+        return { ...value,
+            tokensPerCallMinute: tokens !== null && value.callDurationMs !== null && value.callDurationMs > 0 ? tokens / (value.callDurationMs / 60000) : null,
+            tokensPerAccepted: tokens !== null && value.accepted ? tokens / value.accepted : null,
+            timePerAcceptedMs: value.accepted && value.attemptDurationMs !== null ? value.attemptDurationMs / value.accepted : null,
+            costState,
+            attention: value.unknownCalls + value.unmeasuredAttempts + value.incompleteCosts + Math.max(0, value.attempts - value.successfulAttempts) + value.repairs + value.escalations,
+            tokens: { input: value.inputTokens, output: value.outputTokens, cachedInput: value.cachedInputTokens, cacheWriteInput: value.cacheWriteInputTokens, reasoningOutput: value.reasoningOutputTokens, total: tokens },
+            calls: { measured: value.measuredCalls, unknown: value.unknownCalls, total: value.measuredCalls + value.unknownCalls },
+            outcomes: { attempts: value.attempts, successfulAttempts: value.successfulAttempts, accepted: value.accepted, repairs: value.repairs, escalations: value.escalations },
+            time: { callDurationMs: value.callDurationMs, attemptDurationMs: value.attemptDurationMs, elapsedMs: value.attemptDurationMs },
+            cost: { reportedUsd: value.reportedCostUsd, reportedCalls: value.costReportedCalls, incompleteCalls: value.incompleteCosts, state: costState, coverage: costState },
+        };
+    };
+    const dimensionRows = (kind) => [...dimensions[kind]].sort(([a], [b]) => a < b ? -1 : a > b ? 1 : 0).map(([name, value]) => ({ name, ...decorate(value) }));
+    const phaseRows = dimensionRows('phases').map(row => ({ phase: row.name, durationMs: row.time.attemptDurationMs, ...row }));
+    const decoratedTotal = decorate(total);
+    return { total: { ...decoratedTotal, tokensPerElapsedMinute: decoratedTotal.tokensPerCallMinute === null && (total.inputTokens === null || total.outputTokens === null) ? null : (total.inputTokens + total.outputTokens) / ((period.to - period.from) / 60000) },
         buckets: [...buckets].sort(([a], [b]) => a.localeCompare(b)).map(([label, value]) => ({ label, ...decorate(value) })),
         models: [...models].map(([key, value]) => ({ ...modelDetails.get(key), ...decorate(value) })),
         modelBuckets: [...modelBuckets].sort(([a], [b]) => a.localeCompare(b)).map(([key, value]) => { const [label, provider, model, role] = JSON.parse(key); return { label, provider, model, role, ...decorate(value) }; }),
         tasks: [...tasks].map(([storyId, value]) => ({ storyId, ...decorate(value) })),
-        phases: [...phases].map(([phase, durationMs]) => ({ phase, durationMs })), earliest, latest, };
+        phases: phaseRows, earliest, latest,
+        dimensions: { agents: dimensionRows('agents'), providers: dimensionRows('providers'), variants: dimensionRows('variants'), roles: dimensionRows('roles'), phases: phaseRows },
+        agents: dimensionRows('agents'), providers: dimensionRows('providers'), variants: dimensionRows('variants'), roles: dimensionRows('roles'), };
+}
+export function parseRanking(params) {
+    const value = params.get('sort') ?? 'attention';
+    if (!['attention', 'activity', 'tokens', 'cost', 'acceptance', 'name'].includes(value))
+        throw Error('Choose a valid ranking: attention, activity, tokens, cost, acceptance or name');
+    return value;
+}
+function compareNames(left, right) { return left < right ? -1 : left > right ? 1 : 0; }
+function compareMetric(left, right) {
+    if (left === null && right === null)
+        return 0;
+    if (left === null)
+        return 1;
+    if (right === null)
+        return -1;
+    return right - left;
+}
+function rankingComparator(key) {
+    return (left, right) => {
+        if (key === 'name')
+            return compareNames(left.name, right.name) || compareNames(JSON.stringify(left), JSON.stringify(right));
+        return compareMetric(left[key], right[key]) || compareNames(left.name, right.name) || compareNames(JSON.stringify(left), JSON.stringify(right));
+    };
+}
+export function rankProjections(rows) {
+    const views = {};
+    for (const key of ['attention', 'activity', 'tokens', 'cost', 'acceptance', 'name'])
+        views[key] = [...rows].sort(rankingComparator(key));
+    return views;
+}
+function rankingRow(name, value) {
+    return { name, attention: value.attention, activity: value.activity, tokens: value.tokens.total, cost: value.cost.reportedUsd, acceptance: value.outcomes.accepted, costState: value.costState, total: value };
+}
+function dimensionRankings(aggregate, runs = []) {
+    return {
+        agents: rankProjections(aggregate.agents.map(row => rankingRow(row.name, row))),
+        providers: rankProjections(aggregate.providers.map(row => rankingRow(row.name, row))),
+        models: rankProjections(aggregate.models.map(row => rankingRow(row.model, row))),
+        variants: rankProjections(aggregate.variants.map(row => rankingRow(row.name, row))),
+        roles: rankProjections(aggregate.roles.map(row => rankingRow(row.name, row))),
+        phases: rankProjections(aggregate.dimensions.phases.map(row => rankingRow(row.name, row))),
+        runs: rankProjections(runs.map(run => rankingRow(run.runId, run.total))),
+    };
+}
+function projectEvents(root, period) {
+    const history = readMeasurements(root, period.from, period.to), seen = new Set();
+    const events = [...history.events, ...readEvents(root, EVENT_CAP)].filter(event => {
+        const time = Date.parse(event.timestamp);
+        if (seen.has(event.id) || !Number.isFinite(time) || time < period.from || time >= period.to)
+            return false;
+        seen.add(event.id);
+        return true;
+    }).sort((a, b) => a.timestamp.localeCompare(b.timestamp));
+    return { events, errors: history.errors };
+}
+function textValue(value) { return typeof value === 'string' && value.length > 0 ? value.slice(0, 200) : undefined; }
+function eventMetadata(event) {
+    const direct = event, data = event.data ?? {};
+    const calls = Array.isArray(data.calls) ? data.calls.filter(item => item && typeof item === 'object') : [];
+    const sources = [direct, ...calls, data];
+    const first = (keys) => { for (const source of sources)
+        for (const key of keys) {
+            const value = textValue(source[key]);
+            if (value)
+                return value;
+        } return undefined; };
+    return { agent: first(['agent']), provider: first(['provider']), model: first(['actualModel', 'model']), variant: first(['variant']), role: first(['role']) };
+}
+function runProjections(events, period) {
+    const byRun = new Map();
+    for (const event of events)
+        byRun.set(event.runId, [...(byRun.get(event.runId) ?? []), event]);
+    return [...byRun].map(([runId, runEvents]) => {
+        const metadata = {}, phases = [], timestamps = runEvents.map(event => new Date(event.timestamp).toISOString());
+        for (const event of runEvents) {
+            const values = eventMetadata(event);
+            for (const key of ['agent', 'provider', 'model', 'variant', 'role'])
+                if (metadata[key] === undefined && values[key] !== undefined)
+                    metadata[key] = values[key];
+            const phase = textValue(event.phase ?? event.data?.phase);
+            if (phase && !phases.includes(phase))
+                phases.push(phase);
+        }
+        const total = aggregateMeasurements(runEvents, period).total;
+        return { runId, ...metadata, ...(phases.length ? { phase: phases[phases.length - 1], phases } : {}), timestamps, startedAt: timestamps[0], endedAt: timestamps[timestamps.length - 1], events: runEvents, total, analytics: total };
+    }).sort((left, right) => compareNames(left.startedAt, right.startedAt) || compareNames(left.runId, right.runId));
+}
+export function projectHistory(root, period, limit = DASHBOARD_LIMITS.events) {
+    if (!Number.isInteger(limit) || limit < 1 || limit > DASHBOARD_LIMITS.events)
+        throw Error('Limit must be an integer from 1 to ' + DASHBOARD_LIMITS.events);
+    const history = projectEvents(root, period), events = history.events.slice(-limit);
+    return { from: new Date(period.from).toISOString(), to: new Date(period.to).toISOString(), bucket: period.bucket, timezone: 'UTC', events, runs: runProjections(events, period), errors: history.errors,
+        coverage: 'Recorded measurements only. Earlier unrecorded or expired activity cannot be reconstructed. Usage is assigned to its reporting time; durations to their end time.' };
+}
+export function workspaceAnalytics(projects, period, sort = 'attention') {
+    const source = [];
+    const allEvents = [];
+    for (const project of projects.slice(0, DASHBOARD_LIMITS.projects)) {
+        if (project.error || !project.root) {
+            source.push({ project, analytics: null, errors: [project.error ?? 'Project directory is unavailable'] });
+            continue;
+        }
+        try {
+            const history = projectEvents(project.root, period);
+            allEvents.push(...history.events);
+            const aggregate = aggregateMeasurements(history.events, period);
+            source.push({ project, analytics: { ...aggregate, from: new Date(period.from).toISOString(), to: new Date(period.to).toISOString(), bucket: period.bucket, timezone: 'UTC', errors: history.errors, coverage: 'Recorded measurements only. Earlier unrecorded or expired activity cannot be reconstructed. Usage is assigned to its reporting time; durations to their end time.' }, errors: history.errors });
+        }
+        catch (error) {
+            source.push({ project, analytics: null, errors: [error.message] });
+        }
+    }
+    const aggregate = aggregateMeasurements(allEvents, period);
+    const runs = runProjections(allEvents, period);
+    const projectsWithMetrics = source.map(({ project, analytics, errors }) => {
+        const total = analytics?.total;
+        return { id: project.id, name: project.name, analytics, errors, attention: project.attention ?? ((project.error ? 1 : 0) + (total?.attention ?? 0)), activity: total?.activity ?? null, tokens: total?.tokens.total ?? null, cost: total?.cost.reportedUsd ?? null, acceptance: total?.outcomes.accepted ?? null, costState: total?.costState ?? 'unknown' };
+    });
+    const projectRankings = rankProjections(projectsWithMetrics);
+    const rankings = { projects: projectRankings, ...dimensionRankings(aggregate, runs) };
+    return { ...aggregate, from: new Date(period.from).toISOString(), to: new Date(period.to).toISOString(), bucket: period.bucket, timezone: 'UTC',
+        projects: projectRankings[sort], runs, rankings, errors: source.flatMap(row => row.errors) };
 }
 export function projectAnalytics(root, period) {
-    const history = readMeasurements(root, period.from, period.to);
-    const recent = readEvents(root, 1000);
-    return { ...aggregateMeasurements([...history.events, ...recent], period),
+    const history = projectEvents(root, period);
+    const aggregate = aggregateMeasurements(history.events, period);
+    const runs = runProjections(history.events, period);
+    return { ...aggregate,
         from: new Date(period.from).toISOString(), to: new Date(period.to).toISOString(), bucket: period.bucket, timezone: 'UTC',
-        errors: history.errors,
+        runs, rankings: dimensionRankings(aggregate, runs), errors: history.errors,
         coverage: 'Recorded measurements only. Earlier unrecorded or expired activity cannot be reconstructed. Usage is assigned to its reporting time; durations to their end time.',
     };
 }

package/dist/dashboard/contracts.js

@@ -0,0 +1,23 @@
+import { z } from 'zod';
+export const DASHBOARD_LIMITS = {
+    projects: 500,
+    events: 100,
+    historyBytes: 32 * 1024 * 1024,
+    requestBytes: 16 * 1024,
+    fileBytes: 1_048_576,
+    noteChars: 4000,
+    changeChars: 8000,
+};
+export const DashboardControlPayloadSchema = z.object({ action: z.literal('pause') }).strict();
+export const DashboardResumePayloadSchema = z.object({ action: z.literal('resume') }).strict();
+export const DashboardNotePayloadSchema = z.object({ note: z.string().trim().min(1).max(DASHBOARD_LIMITS.noteChars) }).strict();
+export const DashboardChangePayloadSchema = z.object({ request: z.string().trim().min(1).max(DASHBOARD_LIMITS.changeChars) }).strict();
+export const DashboardControlResponseSchema = z.object({ status: z.literal('pause-requested') });
+export function parseDashboardLimit(value) {
+    if (value === null)
+        return DASHBOARD_LIMITS.events;
+    const limit = Number(value);
+    if (!Number.isInteger(limit) || limit < 1 || limit > DASHBOARD_LIMITS.events)
+        throw Error(`Limit must be an integer from 1 to ${DASHBOARD_LIMITS.events}`);
+    return limit;
+}

package/dist/dashboard/page.js

@@ -3,126 +3,71 @@ export function dashboardPage(token, nonce) {
     if (!/^[a-f0-9]{64}$/u.test(token) || !/^[A-Za-z0-9+/=]+$/u.test(nonce))
         throw new Error('Invalid dashboard session');
     return `<!doctype html>
-<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Yoke · Project workspace</title>
+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="theme-color" content="#0b0f12"><title>Yoke · Control room</title>
 <style nonce="${nonce}">
-:root{color-scheme:light;--ink:#15242d;--muted:#647077;--line:#dce1df;--paper:#f4f5f0;--accent:#c34c27;--green:#167452}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 system-ui,sans-serif}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #dc734a;outline-offset:3px}.layout{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:100vh}aside{background:#142b32;color:#eef5f1;padding:34px 22px;display:flex;flex-direction:column;gap:30px}.brand{font-size:31px;font-weight:780;letter-spacing:-1.5px}.brand span{color:#ffb185}aside p{color:#afc3c6;font-size:13px}.label{text-transform:uppercase;font-size:11px;letter-spacing:1.7px;font-weight:750;color:var(--muted)}aside .label{color:#91a9ad}nav{display:grid;gap:7px}.nav-button{border:0;background:transparent;color:#cad8d9;text-align:left;padding:11px 12px;border-radius:8px;overflow-wrap:anywhere}.nav-button[aria-current=true]{background:#29444b;color:#fff}.aside-foot{margin-top:auto;border-top:1px solid #355057;padding-top:20px}main{max-width:1500px;width:100%;padding:40px 5vw 70px}.top{display:flex;justify-content:space-between;align-items:center;gap:20px}.local{font-size:12px;color:var(--green);background:#e2ece1;border-radius:30px;padding:6px 12px}.button{border:1px solid #bcc7c5;background:#fff;border-radius:7px;padding:9px 15px;color:var(--ink)}.button.primary{background:var(--ink);color:#fff;border-color:var(--ink)}h1{font-size:clamp(27px,3vw,40px);line-height:1.2;margin:17px 0 8px;letter-spacing:-1.4px}h2{font-size:18px;margin:0 0 18px}h3{font-size:16px;margin:0 0 8px}p{margin:6px 0}.muted{color:var(--muted)}.summary{max-width:850px;overflow-wrap:anywhere}.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:28px 0}.metric,.panel,.project-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px}.metric strong{display:block;font-size:28px;letter-spacing:-.8px;margin:8px 0 4px}.metric p{font-size:12px;color:var(--muted)}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:28px 0}.project-card{display:flex;flex-direction:column;align-items:flex-start;gap:12px}.project-card p{color:var(--muted);overflow-wrap:anywhere}.project-card button{margin-top:auto}.columns{display:grid;grid-template-columns:1.2fr 1fr;gap:22px}.panel{margin-bottom:22px}.row{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:13px 0;border-top:1px solid #edf0eb}.row:first-child{border-top:0}.row-main{min-width:0;overflow-wrap:anywhere}.row small{display:block;color:var(--muted);margin-top:4px}.badge{font-size:11px;font-weight:650;background:#edf0ed;padding:4px 9px;border-radius:20px;white-space:nowrap}.badge.good{color:#166343;background:#e4f0e7}.badge.attention{color:#a43e22;background:#fff0e7}.notice{padding:13px 16px;margin:18px 0;border-left:3px solid var(--accent);background:#fff2e9;overflow-wrap:anywhere}.actions{display:flex;align-items:center;gap:12px;margin:22px 0}.path{font:12px/1.5 ui-monospace,monospace;word-break:break-all}.empty{padding:26px 0;color:var(--muted)}details{font-size:12px;margin-top:8px}details p{white-space:pre-wrap;max-height:220px;overflow:auto}.timeline .row{font-size:13px}.loading{padding:50px;color:var(--muted)}.overview-tools{display:flex;flex-wrap:wrap;align-items:end;gap:14px;margin:24px 0}.field{display:grid;gap:5px;flex:1 1 260px}.field input{margin:0;width:100%}.filter-group{display:flex;flex-wrap:wrap;gap:7px}.filter-group .button[aria-pressed=true]{background:var(--ink);color:#fff}.state-line{font-size:13px}.comparison{font-weight:650}.chart-gap-note{margin-top:12px}@media(max-width:900px){.layout{grid-template-columns:1fr}aside{padding:16px 24px;gap:12px}.brand{font-size:25px}aside>p,.aside-foot,aside>.label{display:none}nav{display:flex;overflow:auto}.nav-button{white-space:nowrap}.metrics{gap:9px}.metric{padding:15px}.columns{grid-template-columns:1fr}main{padding:25px 22px}.metric strong{font-size:23px}}@media(max-width:520px){.metrics{grid-template-columns:1fr}.top{align-items:flex-start;flex-direction:column}.local{white-space:nowrap}.metric strong{font-size:26px}.metric p{font-size:13px}.overview-tools{align-items:stretch}.filter-group{display:grid;grid-template-columns:1fr}}
-main,aside,.panel{min-width:0}.actions{flex-wrap:wrap}.table-scroll{overflow-x:auto;max-width:100%}table{width:100%;border-collapse:collapse;font-size:13px}th,td{text-align:left;padding:10px;border-bottom:1px solid var(--line)}select,input{font:inherit;padding:8px;margin:4px;border:1px solid var(--line);border-radius:6px;max-width:100%}</style></head><body><div class="layout"><aside><div class="brand">yoke<span>.</span></div><p>Work you can verify.<br>Projects you can pick up again.</p><div class="label">Your workspace</div><nav id="navigation" aria-label="Projects"></nav><div class="aside-foot"><div class="label">Local workspace</div><p>Project data stays on this machine.</p></div></aside><main><div class="top"><div class="label">Project workspace</div><div><span class="local">● Local session</span> <button id="refresh" class="button">Refresh</button></div></div><div id="content" aria-live="polite"><p class="loading">Loading your projects…</p></div></main></div>
+:root{color-scheme:light;--canvas:#f1f4f3;--surface:#fff;--raised:#f7f9f8;--rule:#d4dddc;--text:#17242a;--muted:#61727a;--action:#a85f00;--signal:#087d79;--positive:#197345;--warning:#875b00;--danger:#ae3434;--focus:#087d79;--rail:#17242a;--rail-text:#e9eff1;--rail-muted:#a9b9bd}:root[data-theme=dark]{color-scheme:dark;--canvas:#0b0f12;--surface:#11171c;--raised:#172027;--rule:#2a3740;--text:#e9eff1;--muted:#91a0a8;--action:#ffb454;--signal:#69d6d0;--positive:#72d39a;--warning:#f2c66d;--danger:#ff8585;--focus:#69d6d0;--rail:#11171c;--rail-text:#e9eff1;--rail-muted:#91a0a8}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--canvas:#0b0f12;--surface:#11171c;--raised:#172027;--rule:#2a3740;--text:#e9eff1;--muted:#91a0a8;--action:#ffb454;--signal:#69d6d0;--positive:#72d39a;--warning:#f2c66d;--danger:#ff8585;--focus:#69d6d0;--rail:#11171c;--rail-text:#e9eff1;--rail-muted:#91a0a8}}*{box-sizing:border-box}body{margin:0;background:var(--canvas);color:var(--text);font:14px/1.5 'Instrument Sans',system-ui,sans-serif}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.control-room-shell{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}.rail{background:var(--rail);color:var(--rail-text);padding:24px 18px;display:flex;flex-direction:column;gap:22px}.brand{font-size:27px;font-weight:800;letter-spacing:-1.4px}.brand span{color:var(--action)}.rail-copy{color:var(--rail-muted);font-size:12px;margin:0}.rail-label,.label{color:var(--muted);font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase}.rail .rail-label{color:var(--rail-muted)}.rail nav{display:grid;gap:4px}.nav-button{border:0;border-left:2px solid transparent;background:transparent;border-radius:4px;color:var(--rail-muted);padding:10px 11px;text-align:left}.nav-button:hover,.nav-button[aria-current=true]{background:var(--raised);border-left-color:var(--action);color:var(--rail-text)}.rail-foot{border-top:1px solid var(--rule);color:var(--rail-muted);font-size:12px;margin-top:auto;padding-top:16px}.canvas{min-width:0;max-width:1600px;padding:24px clamp(20px,4vw,56px) 64px;width:100%}.command-bar{align-items:center;border-bottom:1px solid var(--rule);display:flex;gap:18px;justify-content:space-between;padding-bottom:16px}.command-scope{display:grid;gap:2px}.command-title{font-size:18px;font-weight:750}.command-actions{align-items:center;display:flex;gap:8px}.button{background:var(--surface);border:1px solid var(--rule);border-radius:5px;color:var(--text);padding:8px 12px}.button:hover{border-color:var(--action)}.button.primary{background:var(--action);border-color:var(--action);color:#111}.icon-button{white-space:nowrap}.page-heading{margin:30px 0 22px}.page-heading h1{font-size:clamp(26px,3vw,42px);letter-spacing:-1.7px;line-height:1.1;margin:0 0 7px}.summary{color:var(--muted);margin:0;max-width:760px}.attention-region,.command-panel,.metric-strip,.ranked-projects,.panel,.project-card{background:var(--surface);border:1px solid var(--rule);border-radius:7px}.attention-region{border-left:3px solid var(--action);margin:22px 0;padding:18px 20px}.attention-region h2,.ranked-projects h2{font-size:16px;margin:0}.attention-region>p{color:var(--muted);margin:5px 0 14px}.attention-list{display:grid;gap:0}.attention-item{align-items:center;border-top:1px solid var(--rule);display:flex;gap:14px;justify-content:space-between;padding:11px 0}.attention-item:first-child{border-top:0}.attention-item .row-main{min-width:0}.attention-item small{color:var(--muted);display:block;overflow-wrap:anywhere}.metric-strip{display:grid;gap:0;grid-template-columns:repeat(4,minmax(0,1fr));margin:18px 0}.metric{border-left:1px solid var(--rule);padding:16px 18px}.metric:first-child{border-left:0}.metric strong{display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:24px;font-variant-numeric:tabular-nums;margin:5px 0}.metric p{color:var(--muted);font-size:12px;margin:0}.overview-command-bar{align-items:end;display:grid;gap:12px;grid-template-columns:minmax(220px,2fr) repeat(5,minmax(112px,1fr));margin:22px 0}.field{display:grid;gap:5px;min-width:0}.field input,.field select{background:var(--surface);border:1px solid var(--rule);border-radius:4px;color:var(--text);margin:0;min-width:0;padding:9px;width:100%}.field input::placeholder{color:var(--muted)}.command-panel{padding:14px}.ranked-projects{overflow:hidden}.ranked-heading{align-items:center;display:flex;justify-content:space-between;padding:18px 20px}.ranked-heading p{color:var(--muted);font-size:12px;margin:0}.project-row{align-items:center;border-top:1px solid var(--rule);display:grid;gap:15px;grid-template-columns:34px minmax(190px,2fr) minmax(90px,1fr) minmax(100px,1fr) auto;padding:15px 20px}.project-row:hover{background:var(--raised)}.rank{color:var(--muted);font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px}.project-identity{min-width:0}.project-name{font-size:15px;font-weight:720;overflow-wrap:anywhere}.project-objective,.project-path,.project-stat{color:var(--muted);font-size:12px;overflow-wrap:anywhere}.project-path{font-family:'JetBrains Mono',ui-monospace,monospace;margin-top:3px}.project-stat{display:grid;gap:2px}.project-stat strong{color:var(--text);font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;font-weight:650}.badge{background:var(--raised);border-radius:20px;color:var(--muted);display:inline-block;font-size:11px;font-weight:750;padding:4px 9px;white-space:nowrap}.badge.good{background:color-mix(in srgb,var(--positive) 16%,var(--surface));color:var(--positive)}.badge.attention{background:color-mix(in srgb,var(--danger) 14%,var(--surface));color:var(--danger)}.empty{color:var(--muted);padding:28px 20px}.notice{background:color-mix(in srgb,var(--warning) 12%,var(--surface));border-left:3px solid var(--warning);color:var(--text);margin:12px 0;padding:11px 14px}.row{align-items:flex-start;border-top:1px solid var(--rule);display:flex;gap:18px;justify-content:space-between;padding:13px 0}.row:first-child{border-top:0}.row-main{min-width:0;overflow-wrap:anywhere}.row small{color:var(--muted);display:block;margin-top:4px}.loading{color:var(--muted);padding:50px 0}.actions{align-items:center;display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}.panel{margin-bottom:18px;padding:20px}.panel h2{font-size:16px;margin:0 0 15px}.muted{color:var(--muted)}.path{font-family:'JetBrains Mono',ui-monospace,monospace;overflow-wrap:anywhere}.table-scroll{max-width:100%;overflow-x:auto}table{border-collapse:collapse;font-size:12px;width:100%}th,td{border-bottom:1px solid var(--rule);padding:9px;text-align:left}select,input{max-width:100%}.columns{display:grid;gap:18px;grid-template-columns:1.2fr 1fr}details{font-size:12px;margin-top:8px}details p{max-height:220px;overflow:auto;white-space:pre-wrap}.timeline .row{font-size:13px}.comparison{font-weight:650}.chart-gap-note{margin-top:12px}@media(max-width:1100px){.overview-command-bar{grid-template-columns:repeat(3,minmax(0,1fr))}.overview-command-bar .field:first-child{grid-column:1/-1}}@media(max-width:820px){.control-room-shell{grid-template-columns:1fr}.rail{gap:12px;padding:15px 20px}.rail-copy,.rail-foot,.rail>.rail-label{display:none}.rail nav{display:flex;overflow-x:auto}.nav-button{white-space:nowrap}.canvas{padding:20px 18px 44px}.metric-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.metric:nth-child(3){border-left:0;border-top:1px solid var(--rule)}.metric:nth-child(4){border-top:1px solid var(--rule)}.project-row{grid-template-columns:24px minmax(0,1fr) auto}.project-row .project-stat{display:none}.columns{grid-template-columns:1fr}}@media(max-width:540px){.command-bar{align-items:flex-start;flex-direction:column}.command-actions{width:100%}.command-actions .button{flex:1}.overview-command-bar{grid-template-columns:1fr}.overview-command-bar .field:first-child{grid-column:auto}.metric-strip{grid-template-columns:1fr}.metric,.metric:nth-child(3),.metric:nth-child(4){border-left:0;border-top:1px solid var(--rule)}.metric:first-child{border-top:0}.project-row{align-items:start;grid-template-columns:22px minmax(0,1fr);padding:13px 15px}.project-row .badge,.project-row>.button{grid-column:2}.ranked-heading{align-items:flex-start;flex-direction:column;gap:4px}.attention-item{align-items:flex-start;flex-direction:column;gap:6px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:0.01ms!important;animation-duration:0.01ms!important}}
+</style></head><body><div class="control-room-shell"><aside class="rail"><div class="brand">yoke<span>.</span></div><p class="rail-copy">Verified work. Clear handoffs.<br>Local by default.</p><div class="rail-label">Workspace</div><nav id="navigation" aria-label="Workspace navigation"></nav><div class="rail-foot">Project data stays on this machine.</div></aside><main class="canvas"><header class="command-bar"><div class="command-scope"><span class="label">Yoke / control room</span><span class="command-title">Workspace overview</span></div><div class="command-actions"><button id="theme-toggle" class="button icon-button" type="button">Use dark theme</button><button id="refresh" class="button primary" type="button">Sync workspace</button></div></header><div id="content" aria-live="polite"><section id="attention-region" class="attention-region" hidden></section><div class="metric-strip" hidden></div><div class="project-row" hidden></div><span hidden>Ranked projects</span><p class="loading">Loading workspace…</p></div></main></div>
+<style nonce="${nonce}">.analytics-chart-grid{display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr))}.analytics-chart{border-top:1px solid var(--rule);padding-top:14px}.analytics-chart h3{font-size:13px;margin:0 0 10px}.analytics-chart svg{background:var(--raised);display:block;height:auto;min-height:140px;width:100%}.analytics-chart table{font-size:11px}.analytics-view>.metric-strip{margin-top:0}@media(max-width:820px){.analytics-chart-grid{grid-template-columns:1fr}}</style>
+<style nonce="${nonce}">textarea{background:var(--surface);border:1px solid var(--rule);border-radius:4px;color:var(--text);font:inherit;line-height:1.45;max-width:100%;padding:9px;resize:vertical;width:100%}textarea:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.compose-feedback{border-left:3px solid var(--signal);padding-left:12px}.compose-feedback.validation{border-color:var(--warning)}.compose-feedback.failure{border-color:var(--danger)}.status-line{align-items:center;display:flex;gap:8px}.status-line::before{background:var(--signal);border-radius:50%;content:'';display:inline-block;height:8px;width:8px}.status-line.stale::before{background:var(--warning)}.status-line.error::before{background:var(--danger)}.rail,.rail nav{min-width:0}.nav-button{max-width:100%;min-width:0;overflow-wrap:anywhere;white-space:normal}.nav-button:hover,.nav-button[aria-current=true]{color:var(--text)}@media(max-width:820px){.nav-button{flex:0 0 auto;max-width:240px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}</style>
 <script nonce="${nonce}">
 const sessionToken = ${JSON.stringify(token)};
-const content=document.getElementById('content'), navigation=document.getElementById('navigation');
+const content=document.getElementById('content'),navigation=document.getElementById('navigation'),themeToggle=document.getElementById('theme-toggle');
+function themeState(){return document.documentElement.dataset.theme||((typeof matchMedia==='function'&&matchMedia('(prefers-color-scheme: dark)').matches)?'dark':'light')}
+function setTheme(value,persist=true){const theme=value==='dark'?'dark':'light';document.documentElement.dataset.theme=theme;document.documentElement.style.colorScheme=theme;if(persist)localStorage.setItem('yoke-dashboard-theme',theme);themeToggle.textContent=theme==='dark'?'Use light theme':'Use dark theme'}
+function initializeTheme(){const saved=localStorage.getItem('yoke-dashboard-theme');setTheme(saved==='dark'||saved==='light'?saved:((typeof matchMedia==='function'&&matchMedia('(prefers-color-scheme: dark)').matches)?'dark':'light'),false)}
+initializeTheme();themeToggle.onclick=()=>setTheme(themeState()==='dark'?'light':'dark');
 const defaultNavigation={screen:'overview',project:null,view:'now',period:30,group:'day',from:'',to:''};
 let navigationState=parseNavigationHash(typeof location==='undefined'?'':location.hash);
-let selected=navigationState.screen==='project'?navigationState.project:null, projects=[];
+let selected=navigationState.screen==='project'?navigationState.project:null,projects=[],overviewMetrics=[],overviewAnalytics=null;
 let projectView=navigationState.view,periodDays=navigationState.period,bucket=navigationState.group,customFrom=navigationState.from,customTo=navigationState.to;
-let overviewQuery='',overviewFilter='all',requestVersion=0,activeController=null;
+let overviewQuery=navigationState.query||'',overviewFilter=navigationState.status||'all',overviewSort=navigationState.sort||'attention',requestVersion=0,activeController=null;
 function el(tag,text,cls){const node=document.createElement(tag);if(text!==undefined)node.textContent=String(text);if(cls)node.className=cls;return node}
-function append(parent,...children){for(const child of children)parent.append(child);return parent}
+function append(parent,...children){for(const child of children)if(child)parent.append(child);return parent}
 function badge(state){return el('span',state||'unknown','badge '+(['complete','passed'].includes(state)?'good':['blocked','failed','paused','unverified','unconfirmed','unavailable'].includes(state)?'attention':''))}
-function button(label,action,primary=false){const node=el('button',label,'button'+(primary?' primary':''));node.addEventListener('click',()=>Promise.resolve().then(action).catch(error=>content.append(el('p',error.message,'notice'))));return node}
+function button(label,action,primary=false){const node=el('button',label,'button'+(primary?' primary':''));node.type='button';node.addEventListener('click',()=>Promise.resolve().then(action).catch(error=>content.append(el('p',error.message,'notice'))));return node}
 function duration(ms){if(!Number.isFinite(ms))return 'Unknown';if(ms<60000)return Math.round(ms/1000)+'s';if(ms<3600000)return Math.round(ms/60000)+'m';return (ms/3600000).toFixed(1)+'h'}
 function tokenText(value){return Number.isFinite(value)?value.toLocaleString('en-US'):'Unknown'}
 function taskTiming(task,estimate){const planned=estimate?.available?estimate.tasks.find(item=>item.storyId===task.id):undefined;return planned?'Predicted '+duration(planned.endMs-planned.startMs)+' · planned start +'+duration(planned.startMs):task.passes?'Completed · timing unknown':'Duration and planned start unknown'}
 function unknownCallCount(status){return Number.isFinite(status?.measurement?.unknownCalls)?status.measurement.unknownCalls:Array.isArray(status?.tokens?.calls)?status.tokens.calls.filter(call=>call.usageAvailable!==true).length:undefined}
-function renderUsage(project){const status=project.status,usage=status?.tokens,measurement=status?.measurement;const panel=append(el('section',undefined,'panel'),el('h2','Token usage'));panel.append(el('p','Recorded input: '+tokenText(usage?.inputTokens)+' · recorded output: '+tokenText(usage?.outputTokens)));panel.append(el('p','Calls with unknown usage: '+tokenText(unknownCallCount(status))+' · unmeasured attempts: '+tokenText(measurement?.unmeasuredAttempts),'muted'));if(usage?.measurementComplete===false)panel.append(el('p','Partial measurement. These counts are the reported portion; total usage is unknown.','muted'));if(!usage)panel.append(el('p','No token totals have been reported.','muted'));content.append(panel)}
-function metric(title,value,note){return append(el('div',undefined,'metric'),el('div',title,'label'),el('strong',value),el('p',note))}
 function validDate(value){if(!/^\\d{4}-\\d{2}-\\d{2}$/u.test(value))return false;const time=Date.parse(value+'T00:00:00Z');return Number.isFinite(time)&&new Date(time).toISOString().slice(0,10)===value}
 function parseNavigationHash(hash){
-  const params=new URLSearchParams(String(hash||'').replace(/^#/u,''));
-  const screen=params.get('screen')||'overview',project=params.get('project'),view=params.get('view')||'now';
-  const period=Number(params.get('period')||30),group=params.get('group')||'day',from=params.get('from')||'',to=params.get('to')||'';
+  const params=new URLSearchParams(String(hash||'').replace(/^#/u,''));const screen=params.get('screen')||'overview',project=params.get('project'),view=params.get('view')||'now',period=Number(params.get('period')||30),group=params.get('group')||'day',from=params.get('from')||'',to=params.get('to')||'',query=params.get('query')||'',status=params.get('status')||'all',sort=params.get('sort')||'attention';
   const datesValid=(!from&&!to)||(validDate(from)&&validDate(to)&&from<=to&&Date.parse(to+'T00:00:00Z')-Date.parse(from+'T00:00:00Z')<=365*86400000);
-  if(!['overview','workspace','project'].includes(screen)||!['now','usage','results'].includes(view)||![1,7,30,90,365].includes(period)||!['day','week','month'].includes(group)||!datesValid||(screen==='project'&&!/^[a-f0-9]{32}$/u.test(project||'')))return {...defaultNavigation};
-  return {screen,project:screen==='project'?project:null,view,period,group,from,to};
-}
-function serializeNavigationHash(state){
-  const params=new URLSearchParams({screen:state.screen,view:state.view,period:String(state.period),group:state.group});
-  if(state.project)params.set('project',state.project);
-  if(state.from&&state.to){params.set('from',state.from);params.set('to',state.to)}
-  return '#'+params.toString();
-}
-function setNavigation(change,replace=false){
-  const next=parseNavigationHash(serializeNavigationHash({...navigationState,...change}));
-  navigationState=next;selected=next.screen==='project'?next.project:null;projectView=next.view;periodDays=next.period;bucket=next.group;customFrom=next.from;customTo=next.to;
-  if(typeof history!=='undefined'&&typeof location!=='undefined')history[replace?'replaceState':'pushState'](null,'',serializeNavigationHash(next));
-  renderRoute();
-}
-function restoreNavigation(){
-  const restored=parseNavigationHash(location.hash);
-  // Back/forward can emit both popstate and hashchange for one transition.
-  if(serializeNavigationHash(restored)===serializeNavigationHash(navigationState))return;
-  navigationState=restored;selected=navigationState.screen==='project'?navigationState.project:null;projectView=navigationState.view;periodDays=navigationState.period;bucket=navigationState.group;customFrom=navigationState.from;customTo=navigationState.to;
-  if(selected&&!projects.some(project=>project.id===selected)){navigationState={...navigationState,screen:'overview',project:null};selected=null}
-  if(typeof history!=='undefined'&&location.hash!==serializeNavigationHash(navigationState))history.replaceState(null,'',serializeNavigationHash(navigationState));
-  renderRoute();
+  if(!['overview','workspace','project'].includes(screen)||!['now','usage','results','history'].includes(view)||![1,7,30,90,365].includes(period)||!['day','week','month'].includes(group)||!['all','active','attention'].includes(status)||!['attention','activity','tokens','cost','acceptance','name'].includes(sort)||query.length>200||!datesValid||(screen==='project'&&!/^[a-f0-9]{32}$/u.test(project||'')))return {...defaultNavigation};
+  const state={screen,project:screen==='project'?project:null,view,period,group,from,to};if(params.has('query'))state.query=query;if(params.has('status'))state.status=status;if(params.has('sort'))state.sort=sort;return state;
 }
+function serializeNavigationHash(state){const params=new URLSearchParams({screen:state.screen||'overview',view:state.view||'now',period:String(state.period||30),group:state.group||'day'});if(state.project)params.set('project',state.project);if(state.from&&state.to){params.set('from',state.from);params.set('to',state.to)}if(state.query)params.set('query',state.query);if(state.status&&state.status!=='all')params.set('status',state.status);if(state.sort&&state.sort!=='attention')params.set('sort',state.sort);return '#'+params.toString()}
+function applyNavigation(next){navigationState=next;selected=next.screen==='project'?next.project:null;projectView=next.view;periodDays=next.period;bucket=next.group;customFrom=next.from;customTo=next.to;overviewQuery=next.query||'';overviewFilter=next.status||'all';overviewSort=next.sort||'attention'}
+function setNavigation(change,replace=false){const next=parseNavigationHash(serializeNavigationHash({...navigationState,...change}));applyNavigation(next);if(typeof history!=='undefined'&&typeof location!=='undefined')history[replace?'replaceState':'pushState'](null,'',serializeNavigationHash(next));renderRoute()}
+function updateOverviewNavigation(change){const next=parseNavigationHash(serializeNavigationHash({...navigationState,...change}));applyNavigation(next);if(typeof history!=='undefined'&&typeof location!=='undefined')history.replaceState(null,'',serializeNavigationHash(next))}
+function restoreNavigation(){const restored=parseNavigationHash(location.hash);if(serializeNavigationHash(restored)===serializeNavigationHash(navigationState))return;applyNavigation(restored);if(selected&&!projects.some(project=>project.id===selected))applyNavigation({...restored,screen:'overview',project:null});if(typeof history!=='undefined'&&location.hash!==serializeNavigationHash(navigationState))history.replaceState(null,'',serializeNavigationHash(navigationState));renderRoute()}
 function beginRequest(){requestVersion++;if(activeController)activeController.abort();activeController=new AbortController();return {version:requestVersion,signal:activeController.signal}}
 function currentRequest(version){return version===requestVersion}
 function isAbort(error){return error&&error.name==='AbortError'}
 async function api(path,options={},signal){const response=await fetch(path,{...options,signal});const data=await response.json();if(!response.ok)throw Error(data.error||'Request failed');return data}
 function projectStatus(project,now=Date.now()){
-  const goal=project.goal?.status||null,loop=project.status?.state||null,attentionStates=['blocked','failed','paused'],activeStates=['active','running'];
-  const observed=(project.status?.supervision||[]).filter(p=>p.liveness==='alive'&&now-Date.parse(p.heartbeatAt)<15000).map(p=>Date.parse(p.lastProgressAt||'')).filter(Number.isFinite);
-  const updated=Math.max(Date.parse(project.status?.updatedAt||''),...observed),stale=activeStates.includes(loop)&&Number.isFinite(updated)&&now-updated>20*60000;
-  const attention=Boolean(project.errors?.length)||attentionStates.includes(loop)||attentionStates.includes(goal)||stale;
-  const active=activeStates.includes(loop)||activeStates.includes(goal);
-  let primary=project.errors?.length?'unavailable':attentionStates.includes(loop)?loop:attentionStates.includes(goal)?goal:activeStates.includes(loop)?loop:activeStates.includes(goal)?goal:goal||loop||'ready';
-  if(stale&&!project.errors?.length&&!attentionStates.includes(goal))primary='unconfirmed';
-  return {primary,goal,loop,attention,active,stale};
+  const goal=project.goal?.status||null,loop=project.status?.state||null,attentionStates=['blocked','failed','paused'],activeStates=['active','running'];const observed=(project.status?.supervision||[]).filter(p=>p.liveness==='alive'&&now-Date.parse(p.heartbeatAt)<15000).map(p=>Date.parse(p.lastProgressAt||'')).filter(Number.isFinite),updated=Math.max(Date.parse(project.status?.updatedAt||''),...observed),stale=activeStates.includes(loop)&&Number.isFinite(updated)&&now-updated>20*60000;const attention=Boolean(project.errors?.length)||attentionStates.includes(loop)||attentionStates.includes(goal)||stale,active=activeStates.includes(loop)||activeStates.includes(goal);let primary=project.errors?.length?'unavailable':attentionStates.includes(loop)?loop:attentionStates.includes(goal)?goal:activeStates.includes(loop)?loop:activeStates.includes(goal)?goal:goal||loop||'ready';if(stale&&!project.errors?.length&&!attentionStates.includes(goal))primary='unconfirmed';return {primary,goal,loop,attention,active,stale}
 }
-function visibleProjects(values,query,filter,now=Date.now()){
-  const needle=query.trim().toLowerCase();
-  return values.filter(project=>{
-    const status=projectStatus(project,now),matches=!needle||[project.name,project.root,project.goal?.objective].some(value=>String(value||'').toLowerCase().includes(needle));
-    return matches&&(filter==='all'||filter==='active'&&status.active||filter==='attention'&&status.attention);
-  }).map((project,index)=>({project,index,status:projectStatus(project,now)})).sort((a,b)=>Number(b.status.attention)-Number(a.status.attention)||Number(b.status.active)-Number(a.status.active)||a.index-b.index).map(item=>item.project);
-}
-function nav(){
-  navigation.replaceChildren();
-  const all=el('button','All projects','nav-button');all.setAttribute('aria-current',String(navigationState.screen==='overview'));all.onclick=()=>setNavigation({screen:'overview',project:null});navigation.append(all);
-  const compare=el('button','Compare consumption','nav-button');compare.setAttribute('aria-current',String(navigationState.screen==='workspace'));compare.onclick=()=>setNavigation({screen:'workspace',project:null});navigation.append(compare);
-  for(const project of projects){const item=el('button',project.name,'nav-button');item.setAttribute('aria-current',String(navigationState.screen==='project'&&selected===project.id));item.onclick=()=>setNavigation({screen:'project',project:project.id});navigation.append(item)}
-}
-function heading(title,subtitle){content.replaceChildren(el('h1',title),el('p',subtitle,'summary muted'))}
+function rankingValue(project,key){if(key==='name')return project.name;if(Number.isFinite(project[key]))return project[key];const row=overviewMetrics.find(item=>item.id===project.id);if(row&&Number.isFinite(row[key]))return row[key];if(key==='attention')return projectStatus(project).attention?1:0;return null}
+function rankProjects(values,sort='attention'){return [...values].sort((a,b)=>{if(sort==='name')return String(a.name).localeCompare(String(b.name))||String(a.id).localeCompare(String(b.id));const left=rankingValue(a,sort),right=rankingValue(b,sort);if(left===null&&right!==null)return 1;if(left!==null&&right===null)return -1;if(left!==right)return (right??0)-(left??0);return String(a.name).localeCompare(String(b.name))||String(a.id).localeCompare(String(b.id))})}
+function visibleProjects(values,query,filter,now=Date.now(),sort='attention'){const needle=query.trim().toLowerCase();const filtered=values.filter(project=>{const status=projectStatus(project,now),matches=!needle||[project.name,project.root,project.goal?.objective].some(value=>String(value||'').toLowerCase().includes(needle));return matches&&(filter==='all'||filter==='active'&&status.active||filter==='attention'&&status.attention)});return rankProjects(filtered,sort)}
+function nav(){navigation.replaceChildren();const overview=el('button','Overview','nav-button');overview.type='button';overview.setAttribute('aria-current',String(navigationState.screen==='overview'));overview.onclick=()=>setNavigation({screen:'overview',project:null});navigation.append(overview);const compare=el('button','Workspace analytics','nav-button');compare.type='button';compare.setAttribute('aria-current',String(navigationState.screen==='workspace'));compare.onclick=()=>setNavigation({screen:'workspace',project:null});navigation.append(compare);for(const project of projects){const item=el('button',project.name,'nav-button');item.type='button';item.setAttribute('aria-current',String(navigationState.screen==='project'&&selected===project.id));item.onclick=()=>setNavigation({screen:'project',project:project.id});navigation.append(item)}}
+function heading(title,subtitle){content.setAttribute?.('aria-busy','false');content.replaceChildren(append(el('div',undefined,'page-heading'),el('h1',title),el('p',subtitle,'summary')))}
+function projectMetric(project,key){const value=rankingValue(project,key);return key==='cost'?(Number.isFinite(value)?'$'+value.toFixed(3):'Unknown'):key==='acceptance'?(Number.isFinite(value)?String(value):'Unknown'):key==='tokens'?tokenText(value):Number.isFinite(value)?String(value):'Unknown'}
 function renderOverview(){
-  beginRequest();nav();heading('A clear view of the work.','Goals, loops, independent checks and the next thing that needs your attention.');
-  const statuses=projects.map(project=>projectStatus(project)),attention=statuses.filter(status=>status.attention).length,active=statuses.filter(status=>status.active).length;
-  content.append(append(el('div',undefined,'metrics'),metric('Projects',projects.length,'Registered on this machine'),metric('In progress',active,'Active goals or reported loops'),metric('Needs attention',attention,'Blocked, paused, stale or unavailable')));
-  const tools=el('div',undefined,'overview-tools'),field=el('label',undefined,'field'),searchLabel=el('span','Search projects','label'),search=el('input');search.type='search';search.value=overviewQuery;search.placeholder='Name, path or objective';field.append(searchLabel,search);tools.append(field);
-  const filters=el('div',undefined,'filter-group');filters.setAttribute('role','group');filters.setAttribute('aria-label','Project status filter');
-  const cards=el('div',undefined,'cards');
-  function draw(){
-    cards.replaceChildren();
-    const visible=visibleProjects(projects,overviewQuery,overviewFilter);
-    for(const project of visible){const status=projectStatus(project),card=append(el('article',undefined,'project-card'),badge(status.primary),el('h2',project.name),el('p',project.goal?.objective||'No active objective yet.'),el('p',project.root,'path'));
-      if(status.goal&&status.loop&&status.goal!==status.loop)card.append(el('p','Goal: '+status.goal+' · Loop: '+(status.stale?'unconfirmed (last reported '+status.loop+')':status.loop),'state-line'));
-      else if(status.stale)card.append(el('p','Loop activity is unconfirmed; last report was '+status.loop+'.','state-line notice'));
-      if(['active','running'].includes(status.loop)&&project.status?.storyTitle)card.append(el('p','Reported task: '+project.status.storyTitle,'state-line'));
-      const reason=['blocked','failed','paused'].includes(status.loop)?project.status?.reason:['blocked','paused'].includes(status.goal)?project.goal?.reason:null;
-      if(reason)card.append(el('p',reason,'notice'));
-      if(project.errors.length)card.append(el('p',project.errors.join('; '),'notice'));
-      card.append(button('Open project →',()=>setNavigation({screen:'project',project:project.id})));cards.append(card);
-    }
-    if(!visible.length){const empty=append(el('div',undefined,'empty'),el('p',projects.length?'No projects match this search and filter.':'No registered projects. Run yoke dashboard from a project directory.'));if(projects.length)empty.append(button('Clear search and filters',()=>{overviewQuery='';overviewFilter='all';renderOverview()}));cards.append(empty)}
-    for(const child of filters.children)child.setAttribute('aria-pressed',String(child.dataset.filter===overviewFilter));
-  }
-  for(const [value,label] of [['all','All'],['active','Active'],['attention','Needs attention']]){const control=button(label,()=>{overviewFilter=value;draw()});control.dataset.filter=value;filters.append(control)}
-  search.oninput=()=>{overviewQuery=search.value;draw()};tools.append(filters);content.append(tools,cards);draw();
+  const request=beginRequest();nav();content.setAttribute('aria-busy','true');heading('Workspace control room','A ranked view of active work, attention signals, and recorded telemetry.');const statuses=projects.map(project=>projectStatus(project)),attentionProjects=projects.filter(project=>projectStatus(project).attention),active=statuses.filter(status=>status.active).length;
+  const attention=append(el('section',undefined,'attention-region'),el('h2','Attention'),el('p',attentionProjects.length?'Projects that need a decision or a fresh report.':'No projects need attention right now.'));attention.id='attention-region';const attentionList=el('div',undefined,'attention-list');for(const project of rankProjects(attentionProjects,'attention').slice(0,4)){const state=projectStatus(project),item=append(el('article',undefined,'attention-item'),append(el('div',undefined,'row-main'),el('strong',project.name),el('small',project.status?.reason||project.goal?.reason||state.primary)));item.append(button('Open',()=>setNavigation({screen:'project',project:project.id}),true));attentionList.append(item)}attention.append(attentionList);content.append(attention);
+  const strip=el('div',undefined,'metric-strip');content.append(strip);
+  const command=append(el('section',undefined,'command-panel overview-command-bar'),el('label',undefined,'field'),el('label',undefined,'field'),el('label',undefined,'field'),el('label',undefined,'field'),el('label',undefined,'field'),el('label',undefined,'field'));const searchField=command.children[0],statusField=command.children[1],sortField=command.children[2],scopeField=command.children[3],fromField=command.children[4],toField=command.children[5];searchField.append(el('span','Search','label'));const search=el('input');search.type='search';search.placeholder='Project, path or objective';search.value=overviewQuery;search.setAttribute('aria-label','Search projects');searchField.append(search);statusField.append(el('span','Status','label'));const status=el('select');status.setAttribute('aria-label','Project status');for(const [value,label] of [['all','All states'],['attention','Needs attention'],['active','Active work']]){const option=el('option',label);option.value=value;option.selected=value===overviewFilter;status.append(option)}statusField.append(status);sortField.append(el('span','Sort projects','label'));const sort=el('select');sort.setAttribute('aria-label','Sort projects');for(const [value,label] of [['attention','Attention'],['activity','Last activity'],['tokens','Token usage'],['cost','Reported cost'],['acceptance','Accepted work'],['name','Name']]){const option=el('option',label);option.value=value;option.selected=value===overviewSort;sort.append(option)}sortField.append(sort);scopeField.append(el('span','Date scope · UTC','label'));const scope=el('select');scope.setAttribute('aria-label','Date scope');for(const [value,label] of [[1,'Last 24 hours'],[7,'Last 7 days'],[30,'Last 30 days'],[90,'Last 90 days'],[365,'Last 365 days']]){const option=el('option',label);option.value=String(value);option.selected=value===periodDays&&!customFrom;scope.append(option)}scopeField.append(scope);fromField.append(el('span','From','label'));const from=el('input');from.type='date';from.value=customFrom;from.setAttribute('aria-label','From date UTC');fromField.append(from);toField.append(el('span','Through','label'));const to=el('input');to.type='date';to.value=customTo;to.setAttribute('aria-label','Through date UTC');toField.append(to);content.append(command);
+  const ranked=append(el('section',undefined,'ranked-projects'),append(el('div',undefined,'ranked-heading'),el('h2','Ranked projects'),el('p','Sorted by '+sort.options[sort.selectedIndex].textContent+' · recorded values only')));const rows=el('div');ranked.append(rows);content.append(ranked);
+  function draw(){const total=overviewAnalytics?.total,recorded=total?.tokens?.total;strip.replaceChildren(metric('Projects',String(projects.length),'Registered locally'),metric('In progress',String(active),'Active goals or loops'),metric('Needs attention',String(attentionProjects.length),'Blocked, stale, or unavailable'),metric('Recorded tokens',tokenText(recorded),'Selected UTC scope'));rows.replaceChildren();const visible=visibleProjects(projects,overviewQuery,overviewFilter,Date.now(),overviewSort);for(const [index,project] of visible.entries()){const state=projectStatus(project),row=append(el('article',undefined,'project-row'),el('span',String(index+1).padStart(2,'0'),'rank'),append(el('div',undefined,'project-identity'),el('div',project.name,'project-name'),el('div',project.goal?.objective||'No active objective yet.','project-objective'),el('div',project.root,'project-path')),append(el('div',undefined,'project-stat'),badge(state.primary)),append(el('div',undefined,'project-stat'),el('strong',projectMetric(project,'tokens')),el('span','tokens')),append(el('div',undefined,'project-stat'),el('strong',projectMetric(project,'acceptance')),el('span','accepted')),button('Open',()=>setNavigation({screen:'project',project:project.id})));rows.append(row)}if(!visible.length)rows.append(append(el('div',undefined,'empty'),el('p',projects.length?'No projects match these controls.':'No registered projects.'),projects.length?button('Reset controls',()=>{overviewQuery='';overviewFilter='all';overviewSort='attention';updateOverviewNavigation({query:'',status:'all',sort:'attention'});renderOverview()}):null))}
+  search.oninput=()=>{overviewQuery=search.value;updateOverviewNavigation({query:overviewQuery});draw()};status.onchange=()=>{overviewFilter=status.value;updateOverviewNavigation({status:overviewFilter});draw()};sort.onchange=()=>{overviewSort=sort.value;updateOverviewNavigation({sort:overviewSort});draw()};scope.onchange=()=>setNavigation({period:Number(scope.value),from:'',to:''});const applyDates=button('Apply dates',()=>{if(!validDate(from.value)||!validDate(to.value)||from.value>to.value||Date.parse(to.value+'T00:00:00Z')-Date.parse(from.value+'T00:00:00Z')>365*86400000){command.append(el('p','Choose both dates in chronological order within 366 days.','notice'));return}setNavigation({from:from.value,to:to.value})});toField.append(applyDates);draw();
+  const bounds=periodWindows(Date.now(),periodDays,customFrom,customTo);void api('/api/workspace/analytics?'+queryPeriod(bounds.current)+'&sort='+encodeURIComponent(overviewSort),{},request.signal).then(data=>{if(!currentRequest(request.version)||navigationState.screen!=='overview')return;overviewAnalytics=data;overviewMetrics=data.projects||[];draw()}).catch(error=>{if(!isAbort(error)&&currentRequest(request.version))ranked.append(el('p','Historical ranking unavailable; live project state remains visible.','notice'))});
 }
 function row(title,note,state){return append(el('div',undefined,'row'),append(el('div',undefined,'row-main'),el('div',title),el('small',note)),badge(state))}
-
 ${dashboardPanels()}
 function renderRoute(){if(navigationState.screen==='workspace')showWorkspaceUsage();else if(navigationState.screen==='project'&&selected&&projects.some(project=>project.id===selected))showProject(selected);else renderOverview()}
-async function refresh(){
-  const request=beginRequest();
-  try{
-    const loaded=await api('/api/projects',{},request.signal);if(!currentRequest(request.version))return;projects=loaded;
-    if(selected&&!projects.some(project=>project.id===selected)){navigationState={...navigationState,screen:'overview',project:null};selected=null}
-    if(typeof location!=='undefined'&&typeof history!=='undefined'&&location.hash!==serializeNavigationHash(navigationState))history.replaceState(null,'',serializeNavigationHash(navigationState));
-    renderRoute();
-  }catch(error){if(currentRequest(request.version)&&!isAbort(error))heading('Workspace unavailable',error.message)}
-}
-document.getElementById('refresh').onclick=refresh;
-if(typeof window!=='undefined'){window.addEventListener('popstate',restoreNavigation);window.addEventListener('hashchange',restoreNavigation)}
-refresh();
+async function refresh(){const request=beginRequest();content.setAttribute?.('aria-busy','true');try{const loaded=await api('/api/projects',{},request.signal);if(!currentRequest(request.version))return;projects=loaded;overviewMetrics=[];overviewAnalytics=null;if(selected&&!projects.some(project=>project.id===selected))applyNavigation({...navigationState,screen:'overview',project:null});if(typeof location!=='undefined'&&typeof history!=='undefined'&&location.hash!==serializeNavigationHash(navigationState))history.replaceState(null,'',serializeNavigationHash(navigationState));renderRoute()}catch(error){if(currentRequest(request.version)&&!isAbort(error)){heading('Workspace unavailable','Offline or unavailable: '+error.message);content.append(el('p','Saved local data could not be read. Retry when the local Yoke process is available.','notice'))}}}
+document.getElementById('refresh').onclick=refresh;if(typeof window!=='undefined'){window.addEventListener('popstate',restoreNavigation);window.addEventListener('hashchange',restoreNavigation)}refresh();
 </script></body></html>`;
 }