@littlebearapps/platform-admin-sdk 2.1.0 → 2.3.0

package/templates/shared/dashboard/src/components/usage/UnifiedResourceTable.astro

@@ -0,0 +1,1737 @@
+---
+/**
+ * UnifiedResourceTable Component (task-17.8)
+ *
+ * Main table component for unified resource display with multi-column sorting.
+ * Primary view in the Usage Dashboard showing all Cloudflare resources.
+ */
+
+import {
+  type ResourceType,
+  type ResourceStatus,
+  type UnifiedResource,
+  RESOURCE_TYPE_ICONS,
+  RESOURCE_TYPE_LABELS,
+  STATUS_COLOURS,
+  formatCurrency,
+  formatDeltaPct,
+  getDeltaClass,
+  formatLimitPct,
+  getLimitPctClass,
+} from './types';
+
+export interface Props {
+  resources: UnifiedResource[];
+  sortColumn: string;
+  sortDirection: 'asc' | 'desc';
+  tableId?: string;
+}
+
+const {
+  resources = [],
+  sortColumn = 'costCurrent',
+  sortDirection = 'desc',
+  tableId = 'unified-resource-table',
+} = Astro.props;
+
+// Use imported constants
+const typeIcons = RESOURCE_TYPE_ICONS;
+const typeLabels = RESOURCE_TYPE_LABELS;
+const statusColours = STATUS_COLOURS;
+
+// Column definitions
+const columns = [
+  { key: 'name', label: 'Resource Name', type: 'string', align: 'left' },
+  { key: 'type', label: 'Type', type: 'string', align: 'left' },
+  { key: 'project', label: 'Project', type: 'string', align: 'left' },
+  { key: 'usage', label: 'Usage', type: 'number', align: 'right' },
+  { key: 'limitPct', label: '% of Limit', type: 'number', align: 'right' },
+  { key: 'costCurrent', label: 'Cost', type: 'number', align: 'right' },
+  { key: 'costDeltaPct', label: 'Change', type: 'number', align: 'right' },
+  { key: 'status', label: 'Status', type: 'string', align: 'center' },
+];
+---
+
+<div class="unified-table-container" data-table-id={tableId}>
+  <div class="table-wrapper">
+    <table class="unified-resource-table" role="grid" aria-label="Resource usage table">
+      <thead>
+        <tr>
+          {
+            columns.map((col) => (
+              <th
+                data-sort={col.key}
+                data-type={col.type}
+                data-align={col.align}
+                class:list={[
+                  'sortable',
+                  col.key === sortColumn && 'sorted',
+                  col.key === sortColumn && sortDirection,
+                ]}
+                scope="col"
+                role="columnheader"
+                aria-sort={
+                  col.key === sortColumn
+                    ? sortDirection === 'asc'
+                      ? 'ascending'
+                      : 'descending'
+                    : 'none'
+                }
+                tabindex="0"
+              >
+                <span class="header-content">
+                  {col.label}
+                  <span class="sort-icon" aria-hidden="true" />
+                </span>
+              </th>
+            ))
+          }
+        </tr>
+      </thead>
+      <tbody id={`${tableId}-tbody`}>
+        {
+          resources.length === 0 && (
+            <tr class="empty-row">
+              <td colspan={columns.length} class="empty-cell">
+                <div class="empty-state">
+                  <span class="empty-icon">📊</span>
+                  <span class="empty-text">No resources found</span>
+                </div>
+              </td>
+            </tr>
+          )
+        }
+        {
+          resources.map((resource) => (
+            <tr
+              class="resource-row"
+              data-resource-id={resource.id}
+              data-resource-type={resource.type}
+              data-expandable="true"
+              tabindex="0"
+              role="row"
+            >
+              <td class="cell-name" data-label="Name">
+                <div class="name-content">
+                  <span class="resource-name">{resource.name}</span>
+                </div>
+              </td>
+              <td class="cell-type" data-label="Type">
+                <span class="type-badge" data-type={resource.type}>
+                  <span class="type-icon">{typeIcons[resource.type]}</span>
+                  <span class="type-label">{typeLabels[resource.type]}</span>
+                </span>
+              </td>
+              <td class="cell-project" data-label="Project">
+                {resource.repoUrl ? (
+                  <a
+                    href={resource.repoUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="project-link"
+                  >
+                    <span class="project-name">{resource.project || 'Unknown'}</span>
+                    <svg
+                      class="external-link-icon"
+                      width="12"
+                      height="12"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                    >
+                      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14L21 3" />
+                    </svg>
+                  </a>
+                ) : (
+                  <span class="project-name">{resource.project || 'Unknown'}</span>
+                )}
+              </td>
+              <td class="cell-usage" data-label="Usage" data-value={resource.usage.value}>
+                <div class="usage-content">
+                  <span class="usage-value">{resource.usage.formatted}</span>
+                  <span class="usage-unit">{resource.usage.unit}</span>
+                </div>
+              </td>
+              <td
+                class="cell-limit-pct"
+                data-label="% of Limit"
+                data-value={resource.limitPct ?? 0}
+              >
+                <span class:list={['limit-value', getLimitPctClass(resource.limitPct)]}>
+                  {formatLimitPct(resource.limitPct)}
+                </span>
+              </td>
+              <td class="cell-cost" data-label="Cost" data-value={resource.costCurrent}>
+                <span class="cost-value">{formatCurrency(resource.costCurrent)}</span>
+              </td>
+              <td class="cell-delta" data-label="Change" data-value={resource.costDeltaPct}>
+                <span class:list={['delta-value', getDeltaClass(resource.costDeltaPct)]}>
+                  {formatDeltaPct(resource.costDeltaPct)}
+                </span>
+              </td>
+              <td class="cell-status" data-label="Status">
+                <span
+                  class="status-indicator"
+                  data-status={resource.status}
+                  style={`display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: ${statusColours[resource.status]};`}
+                  title={`Status: ${resource.status}`}
+                />
+              </td>
+            </tr>
+          ))
+        }
+      </tbody>
+    </table>
+  </div>
+
+  <!-- Mobile card view -->
+  <div id={`${tableId}-cards`} class="mobile-cards">
+    {
+      resources.map((resource) => (
+        <div class="mobile-card" data-resource-id={resource.id}>
+          <div class="card-header-row">
+            <div class="card-title-area">
+              <span
+                class="status-dot"
+                style={`display: inline-block; width: 8px; height: 8px; border-radius: 50%; background-color: ${statusColours[resource.status]};`}
+              />
+              <span class="card-name">{resource.name}</span>
+            </div>
+            <span class="type-badge-mini" data-type={resource.type}>
+              {typeIcons[resource.type]} {typeLabels[resource.type]}
+            </span>
+          </div>
+          <div class="card-body">
+            <div class="card-metric">
+              <span class="metric-label">Project</span>
+              {resource.repoUrl ? (
+                <a
+                  href={resource.repoUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="metric-value project-link-mobile"
+                >
+                  {resource.project || 'Unknown'}
+                  <svg
+                    class="external-link-icon"
+                    width="10"
+                    height="10"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
+                    <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14L21 3" />
+                  </svg>
+                </a>
+              ) : (
+                <span class="metric-value">{resource.project || 'Unknown'}</span>
+              )}
+            </div>
+            <div class="card-metric">
+              <span class="metric-label">Usage</span>
+              <span class="metric-value">
+                {resource.usage.formatted} {resource.usage.unit}
+              </span>
+            </div>
+            <div class="card-metric">
+              <span class="metric-label">% of Limit</span>
+              <span class:list={['metric-value', getLimitPctClass(resource.limitPct)]}>
+                {formatLimitPct(resource.limitPct)}
+              </span>
+            </div>
+            <div class="card-metric highlight">
+              <span class="metric-label">Cost</span>
+              <span class="metric-value">{formatCurrency(resource.costCurrent)}</span>
+            </div>
+            <div class="card-metric">
+              <span class="metric-label">Change</span>
+              <span class:list={['metric-value', getDeltaClass(resource.costDeltaPct)]}>
+                {formatDeltaPct(resource.costDeltaPct)}
+              </span>
+            </div>
+          </div>
+        </div>
+      ))
+    }
+  </div>
+</div>
+
+<style>
+  /* ================================================
+   * UnifiedResourceTable - Theme-Aware Styling
+   * Uses CSS custom properties from design-tokens.ts
+   * ================================================ */
+
+  .unified-table-container {
+    width: 100%;
+    overflow-x: hidden;
+  }
+
+  .table-wrapper {
+    overflow-x: auto;
+    border: 1px solid var(--usage-border-default, #e5e7eb);
+    border-radius: var(--usage-radius-lg, 8px);
+    background-color: var(--usage-bg-primary, white);
+    box-shadow: var(--usage-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
+  }
+
+  .unified-resource-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-family: var(--usage-font-sans, -apple-system, BlinkMacSystemFont, sans-serif);
+    font-size: 0.875rem;
+  }
+
+  /* Header styles */
+  thead {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    background-color: var(--usage-bg-secondary, #f9fafb);
+  }
+
+  th {
+    padding: 0.75rem 1rem;
+    text-align: left;
+    font-weight: 600;
+    font-size: 0.75rem;
+    color: var(--usage-text-secondary, #656d76);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    border-bottom: 1px solid var(--usage-border-default, #e5e7eb);
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    transition:
+      background-color var(--usage-transition-fast, 150ms ease),
+      color var(--usage-transition-fast, 150ms ease);
+  }
+
+  th:hover {
+    background-color: var(--usage-bg-hover, #eaeef2);
+    color: var(--usage-text-primary, #1f2328);
+  }
+
+  th[data-align='right'] {
+    text-align: right;
+  }
+
+  th[data-align='center'] {
+    text-align: center;
+  }
+
+  .header-content {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+  }
+
+  .sort-icon {
+    opacity: 0.3;
+    font-size: 0.625rem;
+    transition: opacity var(--usage-transition-fast, 150ms ease);
+  }
+
+  .sort-icon::after {
+    content: '↕';
+  }
+
+  th.sorted .sort-icon {
+    opacity: 1;
+    color: var(--usage-accent-blue, #0969da);
+  }
+
+  th.sorted.asc .sort-icon::after {
+    content: '↑';
+  }
+
+  th.sorted.desc .sort-icon::after {
+    content: '↓';
+  }
+
+  th.sorted {
+    color: var(--usage-accent-blue, #0969da);
+  }
+
+  /* Body styles */
+  tbody tr {
+    border-bottom: 1px solid var(--usage-border-subtle, #e8ecef);
+    transition: background-color var(--usage-transition-fast, 150ms ease);
+  }
+
+  tbody tr:last-child {
+    border-bottom: none;
+  }
+
+  tbody tr:hover {
+    background-color: var(--usage-bg-hover, #eaeef2);
+  }
+
+  tbody tr:focus {
+    outline: 2px solid var(--usage-accent-blue, #0969da);
+    outline-offset: -2px;
+  }
+
+  td {
+    padding: 0.75rem 1rem;
+    vertical-align: middle;
+    color: var(--usage-text-primary, #1f2328);
+  }
+
+  /* Cell-specific styles */
+  .cell-name {
+    font-weight: 500;
+    max-width: 250px;
+  }
+
+  .resource-name {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-family: var(--usage-font-mono, 'JetBrains Mono', monospace);
+    font-size: 0.8125rem;
+  }
+
+  .cell-type {
+    padding-right: 0.5rem;
+  }
+
+  .type-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.25rem 0.625rem;
+    border-radius: 9999px;
+    background-color: var(--usage-bg-tertiary, #f0f2f4);
+    font-size: 0.75rem;
+    border: 1px solid var(--usage-border-subtle, #e8ecef);
+    transition: all var(--usage-transition-fast, 150ms ease);
+  }
+
+  .type-badge:hover {
+    background-color: var(--usage-bg-hover, #eaeef2);
+    border-color: var(--usage-border-default, #d1d9e0);
+  }
+
+  /* Resource type colours */
+  .type-badge[data-type='worker'] {
+    --badge-accent: var(--usage-accent-blue, #0969da);
+  }
+  .type-badge[data-type='d1'] {
+    --badge-accent: var(--usage-accent-purple, #8250df);
+  }
+  .type-badge[data-type='kv'] {
+    --badge-accent: var(--usage-accent-green, #1a7f37);
+  }
+  .type-badge[data-type='r2'] {
+    --badge-accent: var(--usage-accent-yellow, #9a6700);
+  }
+  .type-badge[data-type='pages'] {
+    --badge-accent: var(--usage-accent-blue, #0969da);
+  }
+  .type-badge[data-type='vectorize'] {
+    --badge-accent: var(--usage-accent-purple, #8250df);
+  }
+  .type-badge[data-type='ai-gateway'] {
+    --badge-accent: var(--usage-accent-green, #1a7f37);
+  }
+  .type-badge[data-type='queues'] {
+    --badge-accent: var(--usage-accent-yellow, #9a6700);
+  }
+  .type-badge[data-type='workflows'] {
+    --badge-accent: var(--usage-accent-purple, #8250df);
+  }
+  .type-badge[data-type='do'] {
+    --badge-accent: var(--usage-accent-red, #cf222e);
+  }
+
+  .type-icon {
+    font-size: 0.75rem;
+    line-height: 1;
+  }
+
+  .type-label {
+    color: var(--badge-accent, var(--usage-text-secondary, #656d76));
+    font-weight: 600;
+  }
+
+  .cell-project {
+    color: var(--usage-text-secondary, #656d76);
+    font-size: 0.8125rem;
+  }
+
+  .cell-usage,
+  .cell-cost,
+  .cell-delta {
+    text-align: right;
+    white-space: nowrap;
+  }
+
+  .usage-content {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 0.125rem;
+  }
+
+  .usage-value {
+    font-family: var(--usage-font-mono, 'JetBrains Mono', monospace);
+    font-size: 0.875rem;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    color: var(--usage-text-primary, #1f2328);
+  }
+
+  .usage-unit {
+    font-size: 0.625rem;
+    color: var(--usage-text-muted, #8c959f);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .cost-value {
+    font-family: var(--usage-font-mono, 'JetBrains Mono', monospace);
+    font-size: 0.875rem;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    color: var(--usage-text-primary, #1f2328);
+  }
+
+  .delta-value {
+    font-family: var(--usage-font-mono, 'JetBrains Mono', monospace);
+    font-size: 0.75rem;
+    font-weight: 600;
+    padding: 0.125rem 0.5rem;
+    border-radius: var(--usage-radius-sm, 4px);
+  }
+
+  .delta-up {
+    color: var(--usage-status-critical, #cf222e);
+    background-color: var(--usage-status-critical-bg, #ffebe9);
+  }
+
+  .delta-down {
+    color: var(--usage-status-ok, #1a7f37);
+    background-color: var(--usage-status-ok-bg, #dafbe1);
+  }
+
+  /* Project link styles */
+  .project-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    color: var(--usage-primary, #2563eb);
+    text-decoration: none;
+    transition: color 0.15s ease;
+  }
+
+  .project-link:hover {
+    color: var(--usage-primary-hover, #1d4ed8);
+    text-decoration: underline;
+  }
+
+  .external-link-icon {
+    opacity: 0.6;
+    flex-shrink: 0;
+  }
+
+  .project-link:hover .external-link-icon {
+    opacity: 1;
+  }
+
+  .project-link-mobile {
+    color: var(--usage-primary, #2563eb);
+    text-decoration: none;
+  }
+
+  /* Limit percentage styles */
+  .cell-limit-pct {
+    text-align: right;
+  }
+
+  .limit-value {
+    font-size: 0.8125rem;
+    font-weight: 500;
+    padding: 2px 8px;
+    border-radius: 4px;
+  }
+
+  .limit-ok {
+    color: var(--usage-status-ok, #1a7f37);
+    background-color: var(--usage-status-ok-bg, #dafbe1);
+  }
+
+  .limit-warning {
+    color: var(--usage-status-warning, #9a6700);
+    background-color: var(--usage-status-warning-bg, #fff8c5);
+  }
+
+  .limit-high {
+    color: var(--usage-status-high, #bc4c00);
+    background-color: var(--usage-status-high-bg, #fff1e5);
+  }
+
+  .limit-critical {
+    color: var(--usage-status-critical, #cf222e);
+    background-color: var(--usage-status-critical-bg, #ffebe9);
+  }
+
+  .limit-neutral {
+    color: var(--usage-text-muted, #656d76);
+    background-color: transparent;
+  }
+
+  .delta-neutral {
+    color: var(--usage-text-muted, #8c959f);
+    background-color: transparent;
+  }
+
+  .delta-new {
+    color: var(--usage-accent-blue, #0969da);
+    background-color: rgba(9, 105, 218, 0.1);
+    font-size: 0.625rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .cell-status {
+    text-align: center;
+  }
+
+  /* Use :global() to avoid Astro scoping mismatch in dynamic loops */
+  :global(.status-indicator) {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    box-shadow: 0 0 0 2px var(--usage-bg-primary, white);
+  }
+
+  /* Empty state */
+  .empty-row {
+    background-color: transparent !important;
+  }
+
+  .empty-cell {
+    padding: 3rem 1rem;
+    text-align: center;
+  }
+
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.75rem;
+    color: var(--usage-text-muted, #8c959f);
+  }
+
+  .empty-icon {
+    font-size: 2.5rem;
+    opacity: 0.5;
+  }
+
+  .empty-text {
+    font-size: 0.875rem;
+    font-family: var(--usage-font-sans);
+  }
+
+  /* Expanded row styles */
+  .resource-row.expanded {
+    background-color: rgba(9, 105, 218, 0.05);
+  }
+
+  .resource-row[data-expandable='true'] {
+    cursor: pointer;
+  }
+
+  .resource-row[data-expandable='true']:hover .resource-name {
+    color: var(--usage-accent-blue, #0969da);
+  }
+
+  .expansion-row {
+    background-color: var(--usage-bg-secondary, #f6f8fa);
+  }
+
+  .expansion-cell {
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid var(--usage-border-default, #d1d9e0);
+  }
+
+  .expansion-content {
+    animation: slideDown 0.2s ease-out;
+  }
+
+  @keyframes slideDown {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .sparkline-loading {
+    text-align: center;
+    padding: 1rem;
+    color: var(--usage-text-muted, #8c959f);
+    font-size: 0.875rem;
+    font-family: var(--usage-font-sans);
+  }
+
+  .sparklines-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr auto;
+    gap: 1.5rem;
+    align-items: start;
+  }
+
+  .sparkline-section {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .sparkline-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    gap: 0.5rem;
+  }
+
+  .sparkline-title {
+    font-family: var(--usage-font-sans);
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--usage-text-secondary, #656d76);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .sparkline-current {
+    font-family: var(--usage-font-mono, 'JetBrains Mono', monospace);
+    font-size: 0.875rem;
+    font-weight: 700;
+    color: var(--usage-text-primary, #1f2328);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .sparkline-svg {
+    width: 100%;
+    height: 40px;
+  }
+
+  .sparkline-stats {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 0.625rem 0.875rem;
+    background-color: var(--usage-bg-primary, white);
+    border: 1px solid var(--usage-border-default, #d1d9e0);
+    border-radius: var(--usage-radius-md, 6px);
+    min-width: 140px;
+  }
+
+  .stat-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  .stat-label {
+    font-family: var(--usage-font-sans);
+    font-size: 0.625rem;
+    color: var(--usage-text-muted, #8c959f);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .stat-value {
+    font-family: var(--usage-font-mono, 'JetBrains Mono', monospace);
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--usage-text-primary, #1f2328);
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* Cloudflare Deep Link */
+  .sparkline-right-section {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .cf-link-section {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .cf-dashboard-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.375rem 0.75rem;
+    border: 1px solid var(--usage-accent-yellow, #9a6700);
+    border-radius: var(--usage-radius-md, 6px);
+    background-color: var(--usage-status-warning-bg, #fff8c5);
+    color: var(--usage-accent-yellow, #9a6700);
+    font-family: var(--usage-font-sans);
+    font-size: 0.75rem;
+    font-weight: 500;
+    text-decoration: none;
+    transition: all var(--usage-transition-fast, 150ms ease);
+  }
+
+  .cf-dashboard-link:hover {
+    background-color: rgba(154, 103, 0, 0.15);
+    transform: translateY(-1px);
+  }
+
+  .cf-dashboard-link svg {
+    flex-shrink: 0;
+  }
+
+  @media (max-width: 640px) {
+    .sparklines-container {
+      grid-template-columns: 1fr;
+      gap: 1rem;
+    }
+
+    .sparkline-stats {
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: space-between;
+    }
+
+    .stat-item {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.125rem;
+      min-width: 80px;
+    }
+  }
+
+  /* Mobile cards (hidden by default on desktop) */
+  .mobile-cards {
+    display: none;
+  }
+
+  @media (max-width: 768px) {
+    .table-wrapper {
+      display: none;
+    }
+
+    .mobile-cards {
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+    }
+
+    .mobile-card {
+      background-color: var(--usage-bg-primary, white);
+      border: 1px solid var(--usage-border-default, #d1d9e0);
+      border-radius: var(--usage-radius-lg, 8px);
+      padding: 1rem;
+      transition: all var(--usage-transition-fast, 150ms ease);
+    }
+
+    .mobile-card:hover {
+      border-color: var(--usage-border-hover, #b3bcc6);
+      box-shadow: var(--usage-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
+    }
+
+    .card-header-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      margin-bottom: 0.75rem;
+      gap: 0.5rem;
+    }
+
+    .card-title-area {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      flex: 1;
+      min-width: 0;
+    }
+
+    :global(.status-dot) {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      flex-shrink: 0;
+    }
+
+    .card-name {
+      font-family: var(--usage-font-mono, 'JetBrains Mono', monospace);
+      font-weight: 600;
+      font-size: 0.875rem;
+      color: var(--usage-text-primary, #1f2328);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .type-badge-mini {
+      flex-shrink: 0;
+      font-family: var(--usage-font-sans);
+      font-size: 0.625rem;
+      font-weight: 600;
+      padding: 0.125rem 0.5rem;
+      border-radius: 9999px;
+      background-color: var(--usage-bg-tertiary, #f0f2f4);
+      color: var(--usage-text-secondary, #656d76);
+      border: 1px solid var(--usage-border-subtle, #e8ecef);
+    }
+
+    .card-body {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 0.625rem 1rem;
+    }
+
+    .card-metric {
+      display: flex;
+      flex-direction: column;
+      gap: 0.125rem;
+    }
+
+    .card-metric.highlight {
+      grid-column: span 2;
+      padding: 0.625rem;
+      background-color: var(--usage-bg-secondary, #f6f8fa);
+      border-radius: var(--usage-radius-md, 6px);
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      border: 1px solid var(--usage-border-subtle, #e8ecef);
+    }
+
+    .metric-label {
+      font-family: var(--usage-font-sans);
+      font-size: 0.625rem;
+      color: var(--usage-text-muted, #8c959f);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    .metric-value {
+      font-family: var(--usage-font-mono, 'JetBrains Mono', monospace);
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: var(--usage-text-primary, #1f2328);
+    }
+
+    .card-metric.highlight .metric-value {
+      font-size: 1.125rem;
+      font-weight: 700;
+    }
+  }
+
+  /* ================================================
+   * Dark Mode Overrides - GitHub Dark Theme
+   * ================================================ */
+
+  :global([data-theme='dark']) .table-wrapper,
+  :global(.dark) .table-wrapper {
+    background-color: #0d1117;
+    border-color: #30363d;
+  }
+
+  :global([data-theme='dark']) thead,
+  :global(.dark) thead {
+    background-color: #161b22;
+  }
+
+  :global([data-theme='dark']) th,
+  :global(.dark) th {
+    color: #8b949e;
+    border-bottom-color: #30363d;
+  }
+
+  :global([data-theme='dark']) th:hover,
+  :global(.dark) th:hover {
+    background-color: #21262d;
+    color: #e6edf3;
+  }
+
+  :global([data-theme='dark']) th.sorted,
+  :global(.dark) th.sorted {
+    color: #58a6ff;
+  }
+
+  :global([data-theme='dark']) th.sorted .sort-icon,
+  :global(.dark) th.sorted .sort-icon {
+    color: #58a6ff;
+  }
+
+  :global([data-theme='dark']) tbody tr,
+  :global(.dark) tbody tr {
+    border-bottom-color: #21262d;
+  }
+
+  :global([data-theme='dark']) tbody tr:hover,
+  :global(.dark) tbody tr:hover {
+    background-color: #161b22;
+  }
+
+  :global([data-theme='dark']) td,
+  :global(.dark) td {
+    color: #e6edf3;
+  }
+
+  :global([data-theme='dark']) .resource-name,
+  :global(.dark) .resource-name {
+    color: #e6edf3;
+  }
+
+  :global([data-theme='dark']) .type-badge,
+  :global(.dark) .type-badge {
+    background-color: #21262d;
+    border-color: #30363d;
+  }
+
+  :global([data-theme='dark']) .type-badge:hover,
+  :global(.dark) .type-badge:hover {
+    background-color: #30363d;
+    border-color: #484f58;
+  }
+
+  :global([data-theme='dark']) .type-label,
+  :global(.dark) .type-label {
+    color: var(--badge-accent, #8b949e);
+  }
+
+  :global([data-theme='dark']) .cell-project,
+  :global(.dark) .cell-project {
+    color: #8b949e;
+  }
+
+  :global([data-theme='dark']) .usage-value,
+  :global(.dark) .usage-value {
+    color: #e6edf3;
+  }
+
+  :global([data-theme='dark']) .usage-unit,
+  :global(.dark) .usage-unit {
+    color: #6e7681;
+  }
+
+  :global([data-theme='dark']) .cost-value,
+  :global(.dark) .cost-value {
+    color: #e6edf3;
+  }
+
+  :global([data-theme='dark']) .delta-up,
+  :global(.dark) .delta-up {
+    color: #f85149;
+    background-color: rgba(248, 81, 73, 0.15);
+  }
+
+  :global([data-theme='dark']) .delta-down,
+  :global(.dark) .delta-down {
+    color: #3fb950;
+    background-color: rgba(63, 185, 80, 0.15);
+  }
+
+  /* Dark mode: Project links */
+  :global([data-theme='dark']) .project-link,
+  :global(.dark) .project-link {
+    color: #58a6ff;
+  }
+
+  :global([data-theme='dark']) .project-link:hover,
+  :global(.dark) .project-link:hover {
+    color: #79c0ff;
+  }
+
+  :global([data-theme='dark']) .project-link-mobile,
+  :global(.dark) .project-link-mobile {
+    color: #58a6ff;
+  }
+
+  /* Dark mode: Limit percentages */
+  :global([data-theme='dark']) .limit-ok,
+  :global(.dark) .limit-ok {
+    color: #3fb950;
+    background-color: rgba(63, 185, 80, 0.15);
+  }
+
+  :global([data-theme='dark']) .limit-warning,
+  :global(.dark) .limit-warning {
+    color: #d29922;
+    background-color: rgba(210, 153, 34, 0.15);
+  }
+
+  :global([data-theme='dark']) .limit-high,
+  :global(.dark) .limit-high {
+    color: #db6d28;
+    background-color: rgba(219, 109, 40, 0.15);
+  }
+
+  :global([data-theme='dark']) .limit-critical,
+  :global(.dark) .limit-critical {
+    color: #f85149;
+    background-color: rgba(248, 81, 73, 0.15);
+  }
+
+  :global([data-theme='dark']) .limit-neutral,
+  :global(.dark) .limit-neutral {
+    color: #8b949e;
+  }
+
+  :global([data-theme='dark']) .delta-neutral,
+  :global(.dark) .delta-neutral {
+    color: #6e7681;
+  }
+
+  :global([data-theme='dark']) .delta-new,
+  :global(.dark) .delta-new {
+    color: #58a6ff;
+    background-color: rgba(88, 166, 255, 0.15);
+  }
+
+  :global([data-theme='dark']) .empty-state,
+  :global(.dark) .empty-state {
+    color: #6e7681;
+  }
+
+  :global([data-theme='dark']) .resource-row.expanded,
+  :global(.dark) .resource-row.expanded {
+    background-color: rgba(88, 166, 255, 0.08);
+  }
+
+  :global([data-theme='dark']) .resource-row[data-expandable='true']:hover .resource-name,
+  :global(.dark) .resource-row[data-expandable='true']:hover .resource-name {
+    color: #58a6ff;
+  }
+
+  :global([data-theme='dark']) .expansion-row,
+  :global(.dark) .expansion-row {
+    background-color: #161b22;
+  }
+
+  :global([data-theme='dark']) .expansion-cell,
+  :global(.dark) .expansion-cell {
+    border-bottom-color: #30363d;
+  }
+
+  :global([data-theme='dark']) .sparkline-loading,
+  :global(.dark) .sparkline-loading {
+    color: #8b949e;
+  }
+
+  :global([data-theme='dark']) .sparkline-title,
+  :global(.dark) .sparkline-title {
+    color: #8b949e;
+  }
+
+  :global([data-theme='dark']) .sparkline-current,
+  :global(.dark) .sparkline-current {
+    color: #e6edf3;
+  }
+
+  :global([data-theme='dark']) .sparkline-stats,
+  :global(.dark) .sparkline-stats {
+    background-color: #0d1117;
+    border-color: #30363d;
+  }
+
+  :global([data-theme='dark']) .stat-label,
+  :global(.dark) .stat-label {
+    color: #6e7681;
+  }
+
+  :global([data-theme='dark']) .stat-value,
+  :global(.dark) .stat-value {
+    color: #e6edf3;
+  }
+
+  :global([data-theme='dark']) .cf-dashboard-link,
+  :global(.dark) .cf-dashboard-link {
+    background-color: rgba(154, 103, 0, 0.2);
+    border-color: #9a6700;
+    color: #d29922;
+  }
+
+  :global([data-theme='dark']) .cf-dashboard-link:hover,
+  :global(.dark) .cf-dashboard-link:hover {
+    background-color: rgba(154, 103, 0, 0.3);
+  }
+
+  :global([data-theme='dark']) :global(.status-indicator),
+  :global(.dark) :global(.status-indicator) {
+    box-shadow: 0 0 0 2px #0d1117;
+  }
+
+  /* Mobile cards dark mode */
+  @media (max-width: 768px) {
+    :global([data-theme='dark']) .mobile-card,
+    :global(.dark) .mobile-card {
+      background-color: #0d1117;
+      border-color: #30363d;
+    }
+
+    :global([data-theme='dark']) .mobile-card:hover,
+    :global(.dark) .mobile-card:hover {
+      border-color: #484f58;
+    }
+
+    :global([data-theme='dark']) .card-name,
+    :global(.dark) .card-name {
+      color: #e6edf3;
+    }
+
+    :global([data-theme='dark']) .type-badge-mini,
+    :global(.dark) .type-badge-mini {
+      background-color: #21262d;
+      border-color: #30363d;
+      color: #8b949e;
+    }
+
+    :global([data-theme='dark']) .card-metric.highlight,
+    :global(.dark) .card-metric.highlight {
+      background-color: #161b22;
+      border-color: #30363d;
+    }
+
+    :global([data-theme='dark']) .metric-label,
+    :global(.dark) .metric-label {
+      color: #6e7681;
+    }
+
+    :global([data-theme='dark']) .metric-value,
+    :global(.dark) .metric-value {
+      color: #e6edf3;
+    }
+  }
+</style>
+
+<script define:vars={{ tableId, sortColumn: sortColumn, sortDirection: sortDirection }}>
+  // Sorting functionality
+  document.addEventListener('DOMContentLoaded', () => {
+    const table = document.querySelector(`[data-table-id="${tableId}"]`);
+    if (!table) return;
+
+    const headers = table.querySelectorAll('th.sortable');
+    let currentSort = { column: sortColumn, direction: sortDirection };
+
+    // Get value from row for sorting
+    function getSortValue(row, column, type) {
+      const cell =
+        row.querySelector(`[data-label="${getLabel(column)}"]`) ||
+        row.querySelector(`.cell-${column}`);
+      if (!cell) return null;
+
+      if (column === 'usage' || column === 'costCurrent' || column === 'costDeltaPct') {
+        const value = cell.getAttribute('data-value');
+        if (value === 'NEW') return Infinity; // NEW items sort to top
+        if (value === null || value === 'null') return -Infinity;
+        return parseFloat(value) || 0;
+      }
+
+      if (type === 'number') {
+        return parseFloat(cell.textContent.replace(/[^0-9.-]/g, '')) || 0;
+      }
+
+      return cell.textContent.trim().toLowerCase();
+    }
+
+    // Get label for column
+    function getLabel(column) {
+      const labels = {
+        name: 'Name',
+        type: 'Type',
+        project: 'Project',
+        usage: 'Usage',
+        costCurrent: 'Cost',
+        costDeltaPct: 'Change',
+        status: 'Status',
+      };
+      return labels[column] || column;
+    }
+
+    // Sort table rows
+    function sortTable(column, direction) {
+      const tbody = table.querySelector('tbody');
+      const rows = Array.from(tbody.querySelectorAll('tr.resource-row'));
+      const type =
+        table.querySelector(`th[data-sort="${column}"]`)?.getAttribute('data-type') || 'string';
+
+      rows.sort((a, b) => {
+        const aVal = getSortValue(a, column, type);
+        const bVal = getSortValue(b, column, type);
+
+        if (aVal === null) return 1;
+        if (bVal === null) return -1;
+
+        let comparison = 0;
+        if (type === 'number') {
+          comparison = aVal - bVal;
+        } else {
+          comparison = aVal.localeCompare(bVal);
+        }
+
+        return direction === 'asc' ? comparison : -comparison;
+      });
+
+      // Reorder DOM
+      rows.forEach((row) => tbody.appendChild(row));
+
+      // Update header classes
+      headers.forEach((h) => {
+        h.classList.remove('sorted', 'asc', 'desc');
+        h.setAttribute('aria-sort', 'none');
+      });
+
+      const activeHeader = table.querySelector(`th[data-sort="${column}"]`);
+      if (activeHeader) {
+        activeHeader.classList.add('sorted', direction);
+        activeHeader.setAttribute('aria-sort', direction === 'asc' ? 'ascending' : 'descending');
+      }
+
+      currentSort = { column, direction };
+    }
+
+    // Click handler for headers
+    headers.forEach((header) => {
+      header.addEventListener('click', () => {
+        const column = header.getAttribute('data-sort');
+        const newDirection =
+          currentSort.column === column && currentSort.direction === 'desc' ? 'asc' : 'desc';
+        sortTable(column, newDirection);
+      });
+
+      // Keyboard support
+      header.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          header.click();
+        }
+      });
+    });
+
+    // Row click for expansion (delegated to parent)
+    const tbody = table.querySelector('tbody');
+    tbody.addEventListener('click', (e) => {
+      const row = e.target.closest('tr[data-expandable="true"]');
+      if (row) {
+        const resourceId = row.getAttribute('data-resource-id');
+        const event = new CustomEvent('resource-expand', {
+          bubbles: true,
+          detail: { resourceId, row },
+        });
+        table.dispatchEvent(event);
+      }
+    });
+
+    tbody.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        const row = e.target.closest('tr[data-expandable="true"]');
+        if (row) {
+          e.preventDefault();
+          row.click();
+        }
+      }
+    });
+
+    // ========== Row Expansion with Sparklines (Task-17.11) ==========
+    const expandedRows = new Map();
+    const sparklineCache = new Map();
+
+    table.addEventListener('resource-expand', async (e) => {
+      const { resourceId, row } = e.detail;
+
+      // If already expanded, collapse it
+      if (expandedRows.has(resourceId)) {
+        const panel = expandedRows.get(resourceId);
+        panel.remove();
+        expandedRows.delete(resourceId);
+        row.classList.remove('expanded');
+        return;
+      }
+
+      // Collapse any other expanded rows
+      expandedRows.forEach((panel, id) => {
+        panel.remove();
+        const prevRow = tbody.querySelector(`tr[data-resource-id="${id}"]`);
+        if (prevRow) prevRow.classList.remove('expanded');
+      });
+      expandedRows.clear();
+
+      // Create expansion panel
+      const panel = createExpansionPanel(resourceId, row);
+      row.after(panel);
+      row.classList.add('expanded');
+      expandedRows.set(resourceId, panel);
+
+      // Load sparkline data
+      await loadSparklineData(resourceId, panel);
+    });
+
+    function createExpansionPanel(resourceId, row) {
+      const tr = document.createElement('tr');
+      tr.className = 'expansion-row';
+      tr.setAttribute('data-expansion-for', resourceId);
+
+      const td = document.createElement('td');
+      td.setAttribute('colspan', '7');
+      td.className = 'expansion-cell';
+
+      const content = document.createElement('div');
+      content.className = 'expansion-content';
+
+      // Loading state
+      const loading = document.createElement('div');
+      loading.className = 'sparkline-loading';
+      loading.textContent = 'Loading usage history...';
+      content.appendChild(loading);
+
+      td.appendChild(content);
+      tr.appendChild(td);
+      return tr;
+    }
+
+    async function loadSparklineData(resourceId, panel) {
+      const content = panel.querySelector('.expansion-content');
+      if (!content) return;
+
+      // Check cache first
+      if (sparklineCache.has(resourceId)) {
+        renderSparklines(content, sparklineCache.get(resourceId));
+        return;
+      }
+
+      try {
+        // Fetch historical data from API
+        const resourceType =
+          panel.previousElementSibling?.getAttribute('data-resource-type') || 'worker';
+        const resourceName =
+          panel.previousElementSibling?.querySelector('.resource-name')?.textContent || '';
+
+        const response = await fetch(
+          `/api/brand-copilot/usage/history?resourceId=${encodeURIComponent(resourceId)}&type=${resourceType}&name=${encodeURIComponent(resourceName)}&days=30`
+        );
+
+        if (!response.ok) {
+          // Generate mock data for demo purposes if API not available
+          const mockData = generateMockHistoryData();
+          sparklineCache.set(resourceId, mockData);
+          renderSparklines(content, mockData);
+          return;
+        }
+
+        const data = await response.json();
+        sparklineCache.set(resourceId, data);
+        renderSparklines(content, data);
+      } catch (err) {
+        // Fallback to mock data if API fails
+        const mockData = generateMockHistoryData();
+        sparklineCache.set(resourceId, mockData);
+        renderSparklines(content, mockData);
+      }
+    }
+
+    function generateMockHistoryData() {
+      // Generate 30 days of mock data with some variation
+      const days = 30;
+      const baseValue = Math.random() * 1000 + 100;
+      const usageData = [];
+      const costData = [];
+
+      for (let i = 0; i < days; i++) {
+        const variation = (Math.random() - 0.5) * 0.3; // ±15% variation
+        usageData.push(Math.max(0, baseValue * (1 + variation)));
+        costData.push(Math.max(0, baseValue * 0.0001 * (1 + variation)));
+      }
+
+      return {
+        usage: usageData,
+        cost: costData,
+        labels: Array.from({ length: days }, (_, i) => {
+          const d = new Date();
+          d.setDate(d.getDate() - (days - 1 - i));
+          return d.toISOString().slice(5, 10);
+        }),
+      };
+    }
+
+    // ========== Cloudflare Deep Links (Task-17.19) ==========
+    const CLOUDFLARE_ACCOUNT_ID = '55a0bf6d1396d90cbf9dcbf30fceeb14';
+
+    function getCloudflareUrl(resourceType, resourceName) {
+      const baseUrl = `https://dash.cloudflare.com/${CLOUDFLARE_ACCOUNT_ID}`;
+
+      switch (resourceType) {
+        case 'worker':
+          return `${baseUrl}/workers/services/view/${resourceName}/production/observability/logs`;
+        case 'd1':
+          return `${baseUrl}/d1/database/${resourceName}`;
+        case 'kv':
+          return `${baseUrl}/workers/kv/namespaces`;
+        case 'r2':
+          return `${baseUrl}/r2/overview/buckets/${resourceName}`;
+        case 'vectorize':
+          return `${baseUrl}/vectorize`;
+        case 'pages':
+          return `${baseUrl}/pages/view/${resourceName}`;
+        case 'do':
+          return `${baseUrl}/workers/services`;
+        case 'ai-gateway':
+          return `${baseUrl}/ai/ai-gateway`;
+        case 'queues':
+          return `${baseUrl}/queues`;
+        case 'workflows':
+          return `${baseUrl}/workflows`;
+        default:
+          return `${baseUrl}/workers-and-pages`;
+      }
+    }
+
+    function createCloudflareLink(resourceType, resourceName) {
+      const wrapper = document.createElement('div');
+      wrapper.className = 'cf-link-section';
+
+      const link = document.createElement('a');
+      link.href = getCloudflareUrl(resourceType, resourceName);
+      link.target = '_blank';
+      link.rel = 'noopener noreferrer';
+      link.className = 'cf-dashboard-link';
+      link.title = 'View in Cloudflare Dashboard';
+
+      // CF Logo SVG
+      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+      svg.setAttribute('width', '16');
+      svg.setAttribute('height', '16');
+      svg.setAttribute('viewBox', '0 0 128 128');
+      svg.setAttribute('fill', 'currentColor');
+
+      const path1 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+      path1.setAttribute(
+        'd',
+        'M99.4 76.4c1.5-.5 2.4-2.1 2.3-3.8-.7-5.9-4.5-11.1-9.9-13.2-2.3-.9-4.8-1.2-7.3-.9l-58.2 1.1c-.3 0-.6.2-.8.4-.2.2-.3.5-.3.8v.8c.1.3.2.6.4.8.2.2.5.4.8.4l57.8-1.1c4.5-.4 8.8 2.5 10.1 6.8.2.6.3 1.3.4 2-.1.4.2.8.6 1l4.1 4.9z'
+      );
+      svg.appendChild(path1);
+
+      const path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+      path2.setAttribute(
+        'd',
+        'M106.8 81.3l-3.7-4.3c-1.2 5.5-5.5 9.8-11.1 10.9-1.5.3-3 .3-4.5.1l-62.2.3c-.3 0-.6.2-.8.4-.2.2-.3.5-.3.8v.8c.1.3.2.6.4.8.2.2.5.4.8.4l61.7-.3c8.2.6 15.5-5.6 16.4-13.8l3.3 4.9z'
+      );
+      svg.appendChild(path2);
+
+      link.appendChild(svg);
+
+      const text = document.createElement('span');
+      text.textContent = 'Open in Cloudflare';
+      link.appendChild(text);
+
+      wrapper.appendChild(link);
+      return wrapper;
+    }
+
+    function renderSparklines(content, data) {
+      // Clear loading state
+      while (content.firstChild) {
+        content.removeChild(content.firstChild);
+      }
+
+      // Get resource info from parent row
+      const expansionRow = content.closest('.expansion-row');
+      const resourceRow = expansionRow?.previousElementSibling;
+      const resourceType = resourceRow?.getAttribute('data-resource-type') || 'worker';
+      const resourceName = resourceRow?.querySelector('.resource-name')?.textContent || '';
+
+      // Create sparkline container
+      const container = document.createElement('div');
+      container.className = 'sparklines-container';
+
+      // Usage sparkline
+      const usageSection = createSparklineSection(
+        'Usage (30 days)',
+        data.usage,
+        data.labels,
+        '#3b82f6'
+      );
+      container.appendChild(usageSection);
+
+      // Cost sparkline
+      const costSection = createSparklineSection(
+        'Cost (30 days)',
+        data.cost,
+        data.labels,
+        '#10b981',
+        '$'
+      );
+      container.appendChild(costSection);
+
+      // Stats + CF link container
+      const rightSection = document.createElement('div');
+      rightSection.className = 'sparkline-right-section';
+
+      // Stats summary
+      const stats = createStatsSummary(data);
+      rightSection.appendChild(stats);
+
+      // Cloudflare deep link (Task-17.19)
+      const cfLink = createCloudflareLink(resourceType, resourceName);
+      rightSection.appendChild(cfLink);
+
+      container.appendChild(rightSection);
+
+      content.appendChild(container);
+    }
+
+    function createSparklineSection(title, values, labels, colour, prefix = '') {
+      const section = document.createElement('div');
+      section.className = 'sparkline-section';
+
+      const header = document.createElement('div');
+      header.className = 'sparkline-header';
+
+      const titleEl = document.createElement('span');
+      titleEl.className = 'sparkline-title';
+      titleEl.textContent = title;
+      header.appendChild(titleEl);
+
+      const valueEl = document.createElement('span');
+      valueEl.className = 'sparkline-current';
+      const current = values[values.length - 1];
+      valueEl.textContent =
+        prefix + (current >= 1000 ? (current / 1000).toFixed(1) + 'K' : current.toFixed(2));
+      header.appendChild(valueEl);
+
+      section.appendChild(header);
+
+      // Create SVG sparkline
+      const svg = createSparklineSVG(values, colour);
+      section.appendChild(svg);
+
+      return section;
+    }
+
+    function createSparklineSVG(values, colour) {
+      const width = 200;
+      const height = 40;
+      const padding = 2;
+
+      const min = Math.min(...values);
+      const max = Math.max(...values);
+      const range = max - min || 1;
+
+      const points = values.map((v, i) => {
+        const x = padding + ((width - 2 * padding) * i) / (values.length - 1);
+        const y = height - padding - ((v - min) / range) * (height - 2 * padding);
+        return `${x},${y}`;
+      });
+
+      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+      svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
+      svg.setAttribute('class', 'sparkline-svg');
+      svg.setAttribute('aria-hidden', 'true');
+
+      // Create gradient
+      const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
+      const gradient = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
+      gradient.setAttribute('id', 'sparkline-gradient-' + Math.random().toString(36).slice(2));
+      gradient.setAttribute('x1', '0%');
+      gradient.setAttribute('y1', '0%');
+      gradient.setAttribute('x2', '0%');
+      gradient.setAttribute('y2', '100%');
+
+      const stop1 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
+      stop1.setAttribute('offset', '0%');
+      stop1.setAttribute('stop-color', colour);
+      stop1.setAttribute('stop-opacity', '0.2');
+
+      const stop2 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
+      stop2.setAttribute('offset', '100%');
+      stop2.setAttribute('stop-color', colour);
+      stop2.setAttribute('stop-opacity', '0');
+
+      gradient.appendChild(stop1);
+      gradient.appendChild(stop2);
+      defs.appendChild(gradient);
+      svg.appendChild(defs);
+
+      // Area fill
+      const areaPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+      const areaD = `M${padding},${height - padding} L${points.join(' L')} L${width - padding},${height - padding} Z`;
+      areaPath.setAttribute('d', areaD);
+      areaPath.setAttribute('fill', `url(#${gradient.id})`);
+      svg.appendChild(areaPath);
+
+      // Line
+      const linePath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+      linePath.setAttribute('d', `M${points.join(' L')}`);
+      linePath.setAttribute('fill', 'none');
+      linePath.setAttribute('stroke', colour);
+      linePath.setAttribute('stroke-width', '2');
+      linePath.setAttribute('stroke-linecap', 'round');
+      linePath.setAttribute('stroke-linejoin', 'round');
+      svg.appendChild(linePath);
+
+      // End dot
+      const lastPoint = points[points.length - 1].split(',');
+      const dot = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+      dot.setAttribute('cx', lastPoint[0]);
+      dot.setAttribute('cy', lastPoint[1]);
+      dot.setAttribute('r', '3');
+      dot.setAttribute('fill', colour);
+      svg.appendChild(dot);
+
+      return svg;
+    }
+
+    function createStatsSummary(data) {
+      const stats = document.createElement('div');
+      stats.className = 'sparkline-stats';
+
+      const usageMin = Math.min(...data.usage);
+      const usageMax = Math.max(...data.usage);
+      const usageAvg = data.usage.reduce((a, b) => a + b, 0) / data.usage.length;
+
+      const costMin = Math.min(...data.cost);
+      const costMax = Math.max(...data.cost);
+      const costTotal = data.cost.reduce((a, b) => a + b, 0);
+
+      const statItems = [
+        { label: 'Avg Usage', value: formatStatValue(usageAvg) },
+        { label: 'Peak Usage', value: formatStatValue(usageMax) },
+        { label: 'Min Usage', value: formatStatValue(usageMin) },
+        { label: '30d Total Cost', value: '$' + costTotal.toFixed(4) },
+      ];
+
+      statItems.forEach((item) => {
+        const stat = document.createElement('div');
+        stat.className = 'stat-item';
+
+        const label = document.createElement('span');
+        label.className = 'stat-label';
+        label.textContent = item.label;
+        stat.appendChild(label);
+
+        const value = document.createElement('span');
+        value.className = 'stat-value';
+        value.textContent = item.value;
+        stat.appendChild(value);
+
+        stats.appendChild(stat);
+      });
+
+      return stats;
+    }
+
+    function formatStatValue(num) {
+      if (num >= 1000000) return (num / 1000000).toFixed(2) + 'M';
+      if (num >= 1000) return (num / 1000).toFixed(1) + 'K';
+      return num.toFixed(2);
+    }
+  });
+</script>