@matt82198/aesop 0.1.0-beta.3 → 0.1.0-beta.5

package/ui/web/src/lib/api.ts

@@ -0,0 +1,218 @@
+/**
+ * Typed API client with CSRF header support.
+ * Fetches CSRF token from window.__AESOP_CSRF_TOKEN__ (set via sentinel in index.html)
+ * or falls back to GET /api/session if sentinel is unavailable (e.g., dev server without build).
+ */
+
+import type {
+  FullState,
+  CostSummary,
+  DashboardData,
+  AuditBacklog,
+  Agent,
+  AgentDetail,
+  TrackerItem,
+  SubmitResponse,
+} from './types';
+
+let _csrfTokenCache: string | null = null;
+let _csrfTokenPromise: Promise<string> | null = null;
+
+/**
+ * Get the CSRF token from the sentinel-injected global or /api/session endpoint.
+ * Caches the result to avoid repeated fetches.
+ */
+async function getCSRFToken(): Promise<string> {
+  // Fast path: check if token is already in the window object
+  if (typeof window !== 'undefined') {
+    const sentinel = (window as any).__AESOP_CSRF_TOKEN__;
+    if (sentinel && typeof sentinel === 'string') {
+      return sentinel;
+    }
+  }
+
+  // Avoid concurrent /api/session calls
+  if (_csrfTokenPromise) {
+    return _csrfTokenPromise;
+  }
+
+  if (_csrfTokenCache) {
+    return _csrfTokenCache;
+  }
+
+  _csrfTokenPromise = (async () => {
+    try {
+      const res = await fetch('/api/session', {
+        method: 'GET',
+        credentials: 'same-origin',
+      });
+      if (!res.ok) {
+        throw new Error(`/api/session returned ${res.status}`);
+      }
+      const data = await res.json();
+      const token = data.token ?? '';
+      _csrfTokenCache = token;
+      return token;
+    } catch (err) {
+      console.error('Failed to fetch CSRF token:', err);
+      return '';
+    }
+  })();
+
+  return _csrfTokenPromise;
+}
+
+interface FetchOptions extends RequestInit {
+  requireCSRF?: boolean;
+}
+
+/**
+ * Typed fetch wrapper that injects CSRF header for mutations.
+ */
+async function typedFetch<T>(
+  url: string,
+  options?: FetchOptions
+): Promise<T> {
+  const opts = { ...options };
+
+  // For POST/PUT/DELETE, inject CSRF header
+  if (opts.requireCSRF !== false && opts.method && ['POST', 'PUT', 'DELETE'].includes(opts.method)) {
+    const token = await getCSRFToken();
+    opts.headers = {
+      ...(opts.headers as Record<string, string>),
+      'X-Aesop-Token': token,
+      'Content-Type': 'application/json',
+    };
+  }
+
+  const res = await fetch(url, opts);
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(`HTTP ${res.status}: ${text}`);
+  }
+
+  return res.json() as Promise<T>;
+}
+
+/**
+ * GET /data — dashboard data snapshot
+ */
+export async function fetchData(): Promise<DashboardData> {
+  return typedFetch('/data', { method: 'GET', requireCSRF: false });
+}
+
+/**
+ * GET /api/state — consolidated first-paint snapshot (U2 adds this)
+ */
+export async function fetchState(): Promise<FullState> {
+  return typedFetch('/api/state', { method: 'GET', requireCSRF: false });
+}
+
+/**
+ * GET /api/backlog — audit backlog
+ */
+export async function fetchBacklog(): Promise<AuditBacklog> {
+  return typedFetch('/api/backlog', { method: 'GET', requireCSRF: false });
+}
+
+/**
+ * GET /api/agents — fleet agents list
+ */
+export async function fetchAgents(): Promise<Agent[]> {
+  return typedFetch('/api/agents', { method: 'GET', requireCSRF: false });
+}
+
+/**
+ * GET /api/tracker — tracker items with optional filters
+ */
+export async function fetchTrackerItems(
+  status?: string,
+  priority?: string
+): Promise<TrackerItem[]> {
+  const params = new URLSearchParams();
+  if (status) params.append('status', status);
+  if (priority) params.append('priority', priority);
+  const query = params.toString();
+  const url = `/api/tracker${query ? '?' + query : ''}`;
+  return typedFetch(url, { method: 'GET', requireCSRF: false });
+}
+
+/**
+ * GET /agent?id=<id> — agent dispatch prompt and metadata
+ */
+export async function fetchAgent(agentId: string): Promise<AgentDetail> {
+  const url = `/agent?id=${encodeURIComponent(agentId)}`;
+  return typedFetch(url, { method: 'GET', requireCSRF: false });
+}
+
+/**
+ * GET /api/cost — cost summary with token/verdict data (U3)
+ */
+export async function fetchCost(): Promise<CostSummary> {
+  return typedFetch('/api/cost', { method: 'GET', requireCSRF: false });
+}
+
+/**
+ * POST /submit — submit text to inbox
+ */
+export async function submitInbox(text: string): Promise<SubmitResponse> {
+  return typedFetch('/submit', {
+    method: 'POST',
+    requireCSRF: true,
+    body: JSON.stringify({ text }),
+  });
+}
+
+/**
+ * POST /api/tracker — create tracker item
+ */
+export async function createTrackerItem(data: {
+  title: string;
+  priority?: string;
+  status?: string;
+  lane?: string;
+  source?: string;
+  tags?: string[];
+  notes?: string;
+  pr_link?: string;
+}): Promise<TrackerItem> {
+  return typedFetch('/api/tracker', {
+    method: 'POST',
+    requireCSRF: true,
+    body: JSON.stringify(data),
+  });
+}
+
+/**
+ * POST /api/tracker/<id> — update tracker item
+ */
+export async function updateTrackerItem(
+  itemId: string,
+  data: Partial<{
+    status: string;
+    lane: string;
+    priority: string;
+    notes: string;
+    pr_link: string;
+    tags: string[];
+  }>
+): Promise<TrackerItem> {
+  const url = `/api/tracker/${encodeURIComponent(itemId)}`;
+  return typedFetch(url, {
+    method: 'POST',
+    requireCSRF: true,
+    body: JSON.stringify(data),
+  });
+}
+
+/**
+ * POST /api/tracker/<id>?action=delete — delete (archive) tracker item
+ */
+export async function deleteTrackerItem(itemId: string): Promise<TrackerItem> {
+  const url = `/api/tracker/${encodeURIComponent(itemId)}?action=delete`;
+  return typedFetch(url, {
+    method: 'POST',
+    requireCSRF: true,
+    body: '{}',
+  });
+}

package/ui/web/src/lib/format.test.ts

@@ -0,0 +1,89 @@
+import { describe, it, expect } from 'vitest';
+import { formatAge, formatTokens, formatTimestamp, formatCurrency, formatPercent, capitalize } from './format';
+
+describe('formatAge', () => {
+  it('returns unknown for negative ages', () => {
+    expect(formatAge(-1)).toBe('unknown');
+  });
+
+  it('formats seconds', () => {
+    expect(formatAge(0)).toBe('0s');
+    expect(formatAge(45)).toBe('45s');
+  });
+
+  it('formats minutes with seconds remainder', () => {
+    expect(formatAge(90)).toBe('1m 30s');
+    expect(formatAge(120)).toBe('2m');
+  });
+
+  it('formats hours with minutes remainder', () => {
+    expect(formatAge(3600)).toBe('1h');
+    expect(formatAge(3660)).toBe('1h 1m');
+  });
+
+  it('formats days with hours remainder', () => {
+    expect(formatAge(86400)).toBe('1d');
+    expect(formatAge(86400 + 3 * 3600)).toBe('1d 3h');
+  });
+});
+
+describe('formatTokens', () => {
+  it('leaves small counts alone', () => {
+    expect(formatTokens(0)).toBe('0');
+    expect(formatTokens(999)).toBe('999');
+  });
+
+  it('formats thousands', () => {
+    expect(formatTokens(1000)).toBe('1K');
+    expect(formatTokens(1200)).toBe('1.2K');
+    expect(formatTokens(999999)).toBe('999K');
+  });
+
+  it('formats millions', () => {
+    expect(formatTokens(1000000)).toBe('1M');
+    expect(formatTokens(1500000)).toBe('1.5M');
+  });
+});
+
+describe('formatTimestamp', () => {
+  it('says now for very recent timestamps', () => {
+    expect(formatTimestamp(new Date().toISOString())).toBe('now');
+  });
+
+  it('formats minutes ago', () => {
+    const t = new Date(Date.now() - 5 * 60 * 1000).toISOString();
+    expect(formatTimestamp(t)).toBe('5m ago');
+  });
+
+  it('formats hours ago', () => {
+    const t = new Date(Date.now() - 3 * 3600 * 1000).toISOString();
+    expect(formatTimestamp(t)).toBe('3h ago');
+  });
+
+  it('returns input on unparseable strings', () => {
+    // new Date('garbage') is Invalid Date; formatter must not throw
+    const out = formatTimestamp('garbage');
+    expect(typeof out).toBe('string');
+  });
+});
+
+describe('formatCurrency', () => {
+  it('formats dollars with two decimals', () => {
+    expect(formatCurrency(1.234)).toBe('$1.23');
+    expect(formatCurrency(0)).toBe('$0.00');
+  });
+});
+
+describe('formatPercent', () => {
+  it('formats fraction as percentage with one decimal', () => {
+    expect(formatPercent(0.456)).toBe('45.6%');
+    expect(formatPercent(1)).toBe('100.0%');
+  });
+});
+
+describe('capitalize', () => {
+  it('capitalizes first letter', () => {
+    expect(capitalize('running')).toBe('Running');
+    expect(capitalize('')).toBe('');
+  });
+});

package/ui/web/src/lib/format.ts

@@ -0,0 +1,103 @@
+/**
+ * Formatting utilities for display values.
+ */
+
+/**
+ * Format age in seconds as human-readable string.
+ * Examples: "2s", "1m 30s", "2h", "1d 3h"
+ */
+export function formatAge(ageSeconds: number): string {
+  if (ageSeconds < 0) return 'unknown';
+  if (ageSeconds < 60) return `${ageSeconds}s`;
+  if (ageSeconds < 3600) {
+    const minutes = Math.floor(ageSeconds / 60);
+    const seconds = ageSeconds % 60;
+    return seconds > 0 ? `${minutes}m ${seconds}s` : `${minutes}m`;
+  }
+  if (ageSeconds < 86400) {
+    const hours = Math.floor(ageSeconds / 3600);
+    const minutes = Math.floor((ageSeconds % 3600) / 60);
+    return minutes > 0 ? `${hours}h ${minutes}m` : `${hours}h`;
+  }
+  const days = Math.floor(ageSeconds / 86400);
+  const hours = Math.floor((ageSeconds % 86400) / 3600);
+  return hours > 0 ? `${days}d ${hours}h` : `${days}d`;
+}
+
+/**
+ * Format token count as human-readable string.
+ * Examples: "123", "1.2K", "1.5M"
+ */
+export function formatTokens(count: number): string {
+  if (count < 1000) return String(count);
+  if (count < 1000000) {
+    const k = (count / 1000).toFixed(1);
+    return k.endsWith('.0') ? `${Math.floor(count / 1000)}K` : `${k}K`;
+  }
+  const m = (count / 1000000).toFixed(1);
+  return m.endsWith('.0') ? `${Math.floor(count / 1000000)}M` : `${m}M`;
+}
+
+/**
+ * Format ISO 8601 timestamp as relative time or date.
+ * Examples: "now", "2m ago", "Today 14:30", "Jan 15 2026"
+ */
+export function formatTimestamp(isoString: string): string {
+  try {
+    const date = new Date(isoString);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffSecs = Math.floor(diffMs / 1000);
+    const diffMins = Math.floor(diffSecs / 60);
+    const diffHours = Math.floor(diffMins / 60);
+    const diffDays = Math.floor(diffHours / 24);
+
+    if (diffSecs < 60) return 'now';
+    if (diffMins < 60) return `${diffMins}m ago`;
+    if (diffHours < 24) return `${diffHours}h ago`;
+    if (diffDays === 0) {
+      // Today
+      const hours = String(date.getHours()).padStart(2, '0');
+      const mins = String(date.getMinutes()).padStart(2, '0');
+      return `Today ${hours}:${mins}`;
+    }
+    if (diffDays < 365) {
+      // This year: "Jan 15 14:30"
+      const monthStr = date.toLocaleString('en-US', { month: 'short' });
+      const day = date.getDate();
+      const hours = String(date.getHours()).padStart(2, '0');
+      const mins = String(date.getMinutes()).padStart(2, '0');
+      return `${monthStr} ${day} ${hours}:${mins}`;
+    }
+    // Different year: "Jan 15 2025"
+    const monthStr = date.toLocaleString('en-US', { month: 'short' });
+    const day = date.getDate();
+    const year = date.getFullYear();
+    return `${monthStr} ${day} ${year}`;
+  } catch (err) {
+    return isoString;
+  }
+}
+
+/**
+ * Format currency amount.
+ * Examples: "$1.23", "$0.01", "$123.45"
+ */
+export function formatCurrency(usd: number): string {
+  return `$${usd.toFixed(2)}`;
+}
+
+/**
+ * Format percentage with one decimal.
+ * Examples: "45.6%", "100.0%"
+ */
+export function formatPercent(fraction: number): string {
+  return `${(fraction * 100).toFixed(1)}%`;
+}
+
+/**
+ * Capitalize first letter of string.
+ */
+export function capitalize(s: string): string {
+  return s.charAt(0).toUpperCase() + s.slice(1);
+}

package/ui/web/src/lib/sanitizeUrl.test.ts

@@ -0,0 +1,84 @@
+import { describe, it, expect } from 'vitest';
+import { sanitizeUrl } from './sanitizeUrl';
+
+describe('sanitizeUrl', () => {
+  it('allows http URLs', () => {
+    const url = 'http://example.com/path';
+    expect(sanitizeUrl(url)).toBe(url);
+  });
+
+  it('allows https URLs', () => {
+    const url = 'https://github.com/owner/repo/pull/123';
+    expect(sanitizeUrl(url)).toBe(url);
+  });
+
+  it('allows https URLs with query params', () => {
+    const url = 'https://example.com/search?q=test&lang=en';
+    expect(sanitizeUrl(url)).toBe(url);
+  });
+
+  it('allows https URLs with explicit ports', () => {
+    const url = 'https://example.com:8443/path';
+    expect(sanitizeUrl(url)).toBe(url);
+  });
+
+  it('allows http URLs on localhost ports', () => {
+    const url = 'http://localhost:8770/data';
+    expect(sanitizeUrl(url)).toBe(url);
+  });
+
+  it('blocks javascript: URLs', () => {
+    expect(sanitizeUrl('javascript:alert("xss")')).toBeNull();
+  });
+
+  it('blocks javascript: URLs with mixed case', () => {
+    expect(sanitizeUrl('JaVaScRiPt:alert(1)')).toBeNull();
+  });
+
+  it('blocks data: URLs', () => {
+    expect(sanitizeUrl('data:text/html,<script>alert("xss")</script>')).toBeNull();
+  });
+
+  it('blocks vbscript: URLs', () => {
+    expect(sanitizeUrl('vbscript:msgbox("xss")')).toBeNull();
+  });
+
+  it('blocks mailto: URLs', () => {
+    expect(sanitizeUrl('mailto:attacker@example.com')).toBeNull();
+  });
+
+  it('blocks file: URLs', () => {
+    expect(sanitizeUrl('file:///etc/passwd')).toBeNull();
+  });
+
+  it('allows relative paths (resolve same-origin, matching old sanitizeURL)', () => {
+    // Old dashboard.html sanitizeURL parses with base location.href, so a
+    // relative path resolves to same-origin http and is safe/allowed.
+    expect(sanitizeUrl('/path/to/page')).toBe('/path/to/page');
+    expect(sanitizeUrl('relative/page')).toBe('relative/page');
+  });
+
+  it('returns the original string, not the resolved URL', () => {
+    expect(sanitizeUrl('/pr/123')).toBe('/pr/123');
+  });
+
+  it('returns null for empty strings', () => {
+    expect(sanitizeUrl('')).toBeNull();
+    expect(sanitizeUrl('   ')).toBeNull();
+  });
+
+  it('returns null for null/undefined', () => {
+    expect(sanitizeUrl(null)).toBeNull();
+    expect(sanitizeUrl(undefined)).toBeNull();
+  });
+
+  it('returns null for non-string input', () => {
+    expect(sanitizeUrl(123 as any)).toBeNull();
+    expect(sanitizeUrl({} as any)).toBeNull();
+  });
+
+  it('trims whitespace before validating', () => {
+    const url = '  https://example.com  ';
+    expect(sanitizeUrl(url)).toBe('https://example.com');
+  });
+});

package/ui/web/src/lib/sanitizeUrl.ts

@@ -0,0 +1,38 @@
+/**
+ * URL sanitization for safe rendering in anchor tags.
+ * Prevents XSS by allowlisting only http: and https: schemes.
+ *
+ * Semantics ported from the old dashboard.html sanitizeURL():
+ * - The URL is parsed with `location.href` as the base, so relative URLs
+ *   resolve same-origin (http/https) and are therefore allowed.
+ * - Anything whose resolved protocol is not http:/https: (javascript:,
+ *   data:, vbscript:, file:, mailto:, ...) is rejected.
+ * - Unparseable input is treated as unsafe.
+ *
+ * Returns the ORIGINAL string when safe (never the resolved form), or null
+ * when unsafe so the caller can render an inert, href-less element.
+ */
+
+export function sanitizeUrl(url: string | null | undefined): string | null {
+  if (!url || typeof url !== 'string') {
+    return null;
+  }
+
+  const trimmed = url.trim();
+  if (!trimmed) {
+    return null;
+  }
+
+  try {
+    const base =
+      typeof location !== 'undefined' ? location.href : 'http://localhost/';
+    const parsed = new URL(trimmed, base);
+    if (parsed.protocol === 'http:' || parsed.protocol === 'https:') {
+      return trimmed;
+    }
+    return null;
+  } catch (err) {
+    // Unparseable URL: treat as unsafe.
+    return null;
+  }
+}