@littlebearapps/platform-admin-sdk 2.1.0 → 2.2.0

package/templates/shared/dashboard/src/components/usage/filters/ProjectSelect.astro

@@ -0,0 +1,284 @@
+---
+/**
+ * ProjectSelect Component
+ *
+ * Project filter dropdown using nanostores for reactive state.
+ * Fetches projects dynamically from the D1 registry via /api/usage/projects.
+ * No page reload on selection.
+ *
+ * Part of task-21: Usage Dashboard Refactor Phase 3 - Integrated Filter Bar
+ * Updated: task-XX: D1-backed project registry
+ */
+
+interface Props {
+  /** Initial project from URL (for SSR hydration) */
+  initialProject?: string;
+}
+
+const { initialProject = 'all' } = Astro.props;
+
+// Fallback projects shown during initial render (before API response)
+const fallbackProjects = [{ value: 'all', label: 'All Projects' }];
+---
+
+<div class="project-select" data-component="project-select" data-initial={initialProject}>
+  <label for="project-filter" class="select-label">Project</label>
+  <div class="select-wrapper">
+    <select id="project-filter" class="select-input">
+      {
+        fallbackProjects.map((proj) => (
+          <option value={proj.value} selected={initialProject === proj.value}>
+            {proj.label}
+          </option>
+        ))
+      }
+    </select>
+    <svg
+      class="select-chevron"
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3 4.5L6 7.5L9 4.5"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"></path>
+    </svg>
+  </div>
+</div>
+
+<style>
+  .project-select {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .select-label {
+    font-size: 0.625rem;
+    font-weight: 600;
+    color: var(--usage-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .select-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  .select-input {
+    appearance: none;
+    padding: 0.5rem 2rem 0.5rem 0.75rem;
+    font-size: 0.8125rem;
+    font-family: inherit;
+    font-weight: 500;
+    color: var(--usage-text-primary);
+    background-color: var(--usage-bg-tertiary);
+    border: 1px solid var(--usage-border-primary);
+    border-radius: 0.5rem;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    min-width: 140px;
+  }
+
+  .select-input:hover {
+    border-color: var(--usage-border-hover);
+    background-color: var(--usage-bg-secondary);
+  }
+
+  .select-input:focus {
+    outline: none;
+    border-color: var(--usage-accent-primary);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--usage-accent-primary) 25%, transparent);
+  }
+
+  .select-chevron {
+    position: absolute;
+    right: 0.75rem;
+    pointer-events: none;
+    color: var(--usage-text-secondary);
+    transition: transform 0.15s ease;
+  }
+
+  .select-wrapper:has(.select-input:focus) .select-chevron {
+    transform: rotate(180deg);
+  }
+
+  @media (max-width: 640px) {
+    .select-input {
+      padding: 0.375rem 1.75rem 0.375rem 0.5rem;
+      font-size: 0.75rem;
+      min-width: 120px;
+    }
+
+    .select-chevron {
+      right: 0.5rem;
+    }
+  }
+
+  /* Dark mode overrides */
+  :global([data-theme='dark']) .select-label,
+  :global(.dark) .select-label {
+    color: #8b949e;
+  }
+
+  :global([data-theme='dark']) .select-input,
+  :global(.dark) .select-input {
+    background-color: #21262d;
+    border-color: #30363d;
+    color: #e6edf3;
+  }
+
+  :global([data-theme='dark']) .select-input:hover,
+  :global(.dark) .select-input:hover {
+    background-color: #161b22;
+    border-color: #484f58;
+  }
+
+  :global([data-theme='dark']) .select-input option,
+  :global(.dark) .select-input option {
+    background-color: #161b22;
+    color: #e6edf3;
+  }
+
+  :global([data-theme='dark']) .select-chevron,
+  :global(.dark) .select-chevron {
+    color: #8b949e;
+  }
+</style>
+
+<script>
+  import { $project } from '../state/usageStore';
+  import { setProject } from '../state/usageActions';
+
+  interface ProjectOption {
+    value: string;
+    label: string;
+    resourceCount?: number;
+  }
+
+  // Cache fetched projects
+  let projectsCache: ProjectOption[] | null = null;
+
+  /**
+   * Fetch projects from the D1 registry API
+   */
+  async function fetchProjects(): Promise<ProjectOption[]> {
+    if (projectsCache) return projectsCache;
+
+    try {
+      // Include credentials to pass Cloudflare Access JWT cookie
+      const response = await fetch('/api/usage/projects', {
+        credentials: 'include',
+      });
+      if (!response.ok) {
+        console.warn('[ProjectSelect] Failed to fetch projects, using fallback');
+        return getFallbackProjects();
+      }
+
+      const data = await response.json();
+      if (!data.success || !Array.isArray(data.projects)) {
+        return getFallbackProjects();
+      }
+
+      // Map to options: "All Projects" first, then sorted by resource count
+      const options: ProjectOption[] = [
+        { value: 'all', label: 'All Projects', resourceCount: data.totalResources },
+      ];
+
+      for (const project of data.projects) {
+        options.push({
+          value: project.projectId,
+          label: `${project.displayName} (${project.resourceCount})`,
+          resourceCount: project.resourceCount,
+        });
+      }
+
+      projectsCache = options;
+      return options;
+    } catch (error) {
+      console.error('[ProjectSelect] Error fetching projects:', error);
+      return getFallbackProjects();
+    }
+  }
+
+  /**
+   * Fallback projects if API fails
+   */
+  function getFallbackProjects(): ProjectOption[] {
+    return [
+      { value: 'all', label: 'All Projects' },
+      { value: 'brand-copilot', label: 'Brand Copilot' },
+      { value: 'scout', label: 'Scout' },
+      { value: 'platform', label: 'Platform' },
+      { value: 'aus-history', label: 'Australian History MCP' },
+      { value: 'cloakpipe', label: 'CloakPipe' },
+      { value: 'shared', label: 'Shared' },
+    ];
+  }
+
+  /**
+   * Populate the select element with project options
+   */
+  function populateSelect(
+    select: HTMLSelectElement,
+    projects: ProjectOption[],
+    currentValue: string
+  ): void {
+    // Clear existing options
+    select.innerHTML = '';
+
+    // Add options
+    for (const proj of projects) {
+      const option = document.createElement('option');
+      option.value = proj.value;
+      option.textContent = proj.label;
+      if (proj.value === currentValue) {
+        option.selected = true;
+      }
+      select.appendChild(option);
+    }
+  }
+
+  async function initProjectSelect(): Promise<void> {
+    const container = document.querySelector('[data-component="project-select"]');
+    if (!container) return;
+
+    const select = container.querySelector<HTMLSelectElement>('#project-filter');
+    if (!select) return;
+
+    const initialProject = container.getAttribute('data-initial') || 'all';
+
+    // Fetch and populate projects from D1 registry
+    const projects = await fetchProjects();
+    populateSelect(select, projects, initialProject);
+
+    // Handle selection changes
+    select.addEventListener('change', () => {
+      setProject(select.value);
+    });
+
+    // Subscribe to store changes and update UI
+    $project.subscribe((project) => {
+      if (select.value !== project) {
+        select.value = project;
+      }
+    });
+  }
+
+  // Initialize on DOM ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => initProjectSelect());
+  } else {
+    initProjectSelect();
+  }
+
+  // Re-initialize on Astro page transitions
+  document.addEventListener('astro:page-load', () => initProjectSelect());
+</script>

package/templates/shared/dashboard/src/components/usage/scripts/ai-tab-controller.ts

@@ -0,0 +1,419 @@
+/**
+ * AI Tab Controller
+ *
+ * Handles AI Gateway and Workers AI data loading and rendering.
+ * Extracted from index.astro for task-22.5 (slim to <300 lines)
+ */
+
+import { formatAINumber, formatAICurrency } from './formatters';
+
+// ========== Types ==========
+
+export interface AIGatewayData {
+  totalRequests: number;
+  totalCachedRequests: number;
+  cacheHitRate: number;
+  tokensIn: number;
+  tokensOut: number;
+  totalCostUsd: number;
+  byProvider: Record<
+    string,
+    {
+      requests: number;
+      cachedRequests: number;
+      tokensIn: number;
+      tokensOut: number;
+      costUsd: number;
+    }
+  >;
+  byModel: Record<
+    string,
+    {
+      requests: number;
+      cachedRequests: number;
+      tokensIn: number;
+      tokensOut: number;
+      costUsd: number;
+    }
+  >;
+}
+
+export interface WorkersAIData {
+  totalRequests: number;
+  totalInputTokens: number;
+  totalOutputTokens: number;
+  totalCostUsd: number;
+  byProject: Record<string, { requests: number; costUsd: number; isEstimated: boolean }>;
+  byModel: Record<string, { requests: number; costUsd: number }>;
+  aiGateway?: AIGatewayData;
+}
+
+// ========== State ==========
+
+let aiDataLoaded = false;
+let aiDataCache: WorkersAIData | null = null;
+
+// ========== DOM Helpers ==========
+
+function clearElement(el: HTMLElement): void {
+  while (el.firstChild) {
+    el.removeChild(el.firstChild);
+  }
+}
+
+function createLoadingIndicator(message: string): HTMLElement {
+  const div = document.createElement('div');
+  div.className = 'ai-loading-indicator';
+  div.textContent = message;
+  return div;
+}
+
+function createErrorState(message: string): HTMLElement {
+  const div = document.createElement('div');
+  div.className = 'ai-error-state';
+  div.textContent = message;
+  return div;
+}
+
+function createEmptyState(message: string): HTMLElement {
+  const div = document.createElement('div');
+  div.className = 'ai-empty-state';
+  div.textContent = message;
+  return div;
+}
+
+// ========== Data Loading ==========
+
+export async function loadAITabData(period: string = '7d'): Promise<void> {
+  if (aiDataLoaded && aiDataCache) {
+    renderAIData(aiDataCache);
+    return;
+  }
+
+  // Show loading state
+  const containers = ['ai-gateway-content', 'ai-by-project', 'ai-by-model'];
+  containers.forEach((id) => {
+    const el = document.getElementById(id);
+    if (el) {
+      clearElement(el);
+      el.appendChild(createLoadingIndicator('Loading AI data...'));
+    }
+  });
+
+  try {
+    // Include credentials to pass Cloudflare Access JWT cookie
+    const response = await fetch(`/api/usage/workersai?period=${period}`, {
+      credentials: 'include',
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+    }
+
+    const json = await response.json();
+
+    if (!json.success || !json.data) {
+      throw new Error(json.error || 'Invalid response');
+    }
+
+    aiDataCache = json.data;
+    aiDataLoaded = true;
+    renderAIData(json.data);
+  } catch (error) {
+    console.error('Failed to load AI data:', error);
+    const errorMsg = error instanceof Error ? error.message : 'Unknown error';
+    containers.forEach((id) => {
+      const el = document.getElementById(id);
+      if (el) {
+        clearElement(el);
+        el.appendChild(createErrorState('Failed to load AI data: ' + errorMsg));
+      }
+    });
+
+    const statIds = ['ai-total-requests', 'ai-total-cost', 'ai-input-tokens', 'ai-output-tokens'];
+    statIds.forEach((id) => {
+      const el = document.getElementById(id);
+      if (el) el.textContent = 'Error';
+    });
+  }
+}
+
+// ========== Rendering ==========
+
+function renderAIData(data: WorkersAIData): void {
+  // Update stats
+  const totalRequestsEl = document.getElementById('ai-total-requests');
+  const totalCostEl = document.getElementById('ai-total-cost');
+  const inputTokensEl = document.getElementById('ai-input-tokens');
+  const outputTokensEl = document.getElementById('ai-output-tokens');
+
+  if (totalRequestsEl) totalRequestsEl.textContent = formatAINumber(data.totalRequests);
+  if (totalCostEl) totalCostEl.textContent = formatAICurrency(data.totalCostUsd);
+  if (inputTokensEl) inputTokensEl.textContent = formatAINumber(data.totalInputTokens);
+  if (outputTokensEl) outputTokensEl.textContent = formatAINumber(data.totalOutputTokens);
+
+  // Render AI Gateway content with real data if available
+  renderAIGatewaySection(data.aiGateway);
+
+  // Render by project table
+  renderByProjectTable(data.byProject);
+
+  // Render by model table
+  renderByModelTable(data.byModel);
+}
+
+function renderAIGatewaySection(aiGateway?: AIGatewayData): void {
+  const gatewayEl = document.getElementById('ai-gateway-content');
+  if (!gatewayEl) return;
+
+  clearElement(gatewayEl);
+
+  // If no AI Gateway data, show placeholder
+  if (!aiGateway) {
+    const emptyDiv = createEmptyState('No AI Gateway data available for this period');
+    gatewayEl.appendChild(emptyDiv);
+    return;
+  }
+
+  // Create metrics grid
+  const metricsGrid = document.createElement('div');
+  metricsGrid.className = 'ai-gateway-metrics-grid';
+
+  const metrics = [
+    { value: formatAINumber(aiGateway.totalRequests), label: 'Gateway Requests' },
+    { value: `${aiGateway.cacheHitRate.toFixed(1)}%`, label: 'Cache Hit Rate' },
+    { value: formatAINumber(aiGateway.tokensIn), label: 'Tokens In' },
+    { value: formatAINumber(aiGateway.tokensOut), label: 'Tokens Out' },
+  ];
+
+  metrics.forEach((metric) => {
+    const metricDiv = document.createElement('div');
+    metricDiv.className = 'ai-gateway-metric';
+
+    const valueDiv = document.createElement('div');
+    valueDiv.className = 'metric-value';
+    valueDiv.textContent = metric.value;
+    metricDiv.appendChild(valueDiv);
+
+    const labelDiv = document.createElement('div');
+    labelDiv.className = 'metric-label';
+    labelDiv.textContent = metric.label;
+    metricDiv.appendChild(labelDiv);
+
+    metricsGrid.appendChild(metricDiv);
+  });
+
+  gatewayEl.appendChild(metricsGrid);
+
+  // Add provider breakdown if available
+  const providers = Object.entries(aiGateway.byProvider);
+  if (providers.length > 0) {
+    const providerSection = document.createElement('div');
+    providerSection.className = 'ai-gateway-providers';
+
+    const providerHeader = document.createElement('h4');
+    providerHeader.textContent = 'By Provider';
+    providerSection.appendChild(providerHeader);
+
+    const providerTable = document.createElement('table');
+    providerTable.className = 'ai-table ai-table-compact';
+
+    // Header
+    const thead = document.createElement('thead');
+    const headerRow = document.createElement('tr');
+    ['Provider', 'Requests', 'Cached', 'Cost'].forEach((text) => {
+      const th = document.createElement('th');
+      th.textContent = text;
+      headerRow.appendChild(th);
+    });
+    thead.appendChild(headerRow);
+    providerTable.appendChild(thead);
+
+    // Body
+    const tbody = document.createElement('tbody');
+    providers.sort((a, b) => b[1].requests - a[1].requests);
+    providers.forEach(([provider, data]) => {
+      const row = document.createElement('tr');
+
+      const nameCell = document.createElement('td');
+      nameCell.className = 'provider-name';
+      nameCell.textContent = provider;
+      row.appendChild(nameCell);
+
+      const requestsCell = document.createElement('td');
+      requestsCell.textContent = formatAINumber(data.requests);
+      row.appendChild(requestsCell);
+
+      const cachedCell = document.createElement('td');
+      cachedCell.textContent = formatAINumber(data.cachedRequests);
+      row.appendChild(cachedCell);
+
+      const costCell = document.createElement('td');
+      costCell.className = 'cost-cell';
+      costCell.textContent = formatAICurrency(data.costUsd);
+      row.appendChild(costCell);
+
+      tbody.appendChild(row);
+    });
+    providerTable.appendChild(tbody);
+    providerSection.appendChild(providerTable);
+    gatewayEl.appendChild(providerSection);
+  }
+}
+
+function renderByProjectTable(
+  byProject: Record<string, { requests: number; costUsd: number; isEstimated: boolean }>
+): void {
+  const containerEl = document.getElementById('ai-by-project');
+  if (!containerEl) return;
+
+  clearElement(containerEl);
+
+  const projects = Object.entries(byProject);
+  if (projects.length === 0) {
+    containerEl.appendChild(createEmptyState('No Workers AI usage data available'));
+    return;
+  }
+
+  // Sort by cost descending
+  projects.sort((a, b) => b[1].costUsd - a[1].costUsd);
+
+  const table = document.createElement('table');
+  table.className = 'ai-table';
+
+  // Header
+  const thead = document.createElement('thead');
+  const headerRow = document.createElement('tr');
+  ['Project', 'Requests', 'Est. Cost'].forEach((text) => {
+    const th = document.createElement('th');
+    th.textContent = text;
+    headerRow.appendChild(th);
+  });
+  thead.appendChild(headerRow);
+  table.appendChild(thead);
+
+  // Body
+  const tbody = document.createElement('tbody');
+  let hasEstimated = false;
+
+  projects.forEach(([projectName, projectData]) => {
+    const row = document.createElement('tr');
+
+    // Project name cell
+    const nameCell = document.createElement('td');
+    nameCell.className = 'project-name';
+    nameCell.textContent = projectName;
+
+    if (projectData.isEstimated) {
+      hasEstimated = true;
+      const badge = document.createElement('span');
+      badge.className = 'estimated-badge';
+      badge.textContent = '~estimated';
+      nameCell.appendChild(badge);
+    }
+    row.appendChild(nameCell);
+
+    // Requests cell
+    const requestsCell = document.createElement('td');
+    requestsCell.textContent = formatAINumber(projectData.requests);
+    row.appendChild(requestsCell);
+
+    // Cost cell
+    const costCell = document.createElement('td');
+    costCell.className = 'cost-cell';
+    costCell.textContent = formatAICurrency(projectData.costUsd);
+    row.appendChild(costCell);
+
+    tbody.appendChild(row);
+  });
+
+  table.appendChild(tbody);
+  containerEl.appendChild(table);
+
+  if (hasEstimated) {
+    const note = document.createElement('p');
+    note.className = 'ai-note';
+    note.textContent =
+      '* Estimated costs are calculated from request counts and average token usage.';
+    containerEl.appendChild(note);
+  }
+}
+
+function renderByModelTable(byModel: Record<string, { requests: number; costUsd: number }>): void {
+  const containerEl = document.getElementById('ai-by-model');
+  if (!containerEl) return;
+
+  clearElement(containerEl);
+
+  const models = Object.entries(byModel);
+  if (models.length === 0) {
+    containerEl.appendChild(createEmptyState('No model-level data available'));
+    return;
+  }
+
+  // Sort by cost descending
+  models.sort((a, b) => b[1].costUsd - a[1].costUsd);
+
+  const table = document.createElement('table');
+  table.className = 'ai-table';
+
+  // Header
+  const thead = document.createElement('thead');
+  const headerRow = document.createElement('tr');
+  ['Model', 'Requests', 'Est. Cost'].forEach((text) => {
+    const th = document.createElement('th');
+    th.textContent = text;
+    headerRow.appendChild(th);
+  });
+  thead.appendChild(headerRow);
+  table.appendChild(thead);
+
+  // Body
+  const tbody = document.createElement('tbody');
+
+  models.forEach(([modelName, modelData]) => {
+    const row = document.createElement('tr');
+
+    // Model name cell (formatted)
+    const nameCell = document.createElement('td');
+    nameCell.className = 'model-name';
+    nameCell.textContent = modelName.replace('@cf/', '').replace('meta/', '');
+    row.appendChild(nameCell);
+
+    // Requests cell
+    const requestsCell = document.createElement('td');
+    requestsCell.textContent = formatAINumber(modelData.requests);
+    row.appendChild(requestsCell);
+
+    // Cost cell
+    const costCell = document.createElement('td');
+    costCell.className = 'cost-cell';
+    costCell.textContent = formatAICurrency(modelData.costUsd);
+    row.appendChild(costCell);
+
+    tbody.appendChild(row);
+  });
+
+  table.appendChild(tbody);
+  containerEl.appendChild(table);
+}
+
+// ========== Reset State ==========
+
+export function resetAITabState(): void {
+  aiDataLoaded = false;
+  aiDataCache = null;
+}
+
+// ========== Event Listener Setup ==========
+
+export function setupAITabEventListeners(): void {
+  // Reload AI data when period changes
+  document.addEventListener('period-change', () => {
+    resetAITabState();
+    const aiPanel = document.getElementById('tab-ai');
+    if (aiPanel && aiPanel.style.display !== 'none') {
+      loadAITabData();
+    }
+  });
+}