@littlebearapps/platform-admin-sdk 2.1.0 → 2.2.0

package/templates/full/dashboard/src/pages/feedback.astro

@@ -0,0 +1,365 @@
+---
+import DashboardLayout from '../layouts/DashboardLayout.astro';
+
+interface FeedbackEvent {
+  feedbackId: string;
+  repo: string;
+  issueNumber: number;
+  category: string;
+  sentiment: string | null;
+  relatedErrorCorrelation: string | null;
+  correlationConfidence: number;
+  correlationMethod: 'rule-based' | 'ml' | 'manual';
+  userContactEncrypted: string | null;
+  receivedAt: string;
+  updatedAt: string | null;
+}
+
+const runtime = (Astro.locals as App.Locals | undefined)?.runtime;
+const db = runtime?.env?.PLATFORM_DB;
+const kv = runtime?.env?.PLATFORM_CACHE;
+
+let recentFeedback: FeedbackEvent[] = [];
+let correlatedFeedback: FeedbackEvent[] = [];
+let feedbackByCategory: Record<string, number> = {
+  'feature-request': 0,
+  'bug-report': 0,
+  'ux-improvement': 0,
+  other: 0,
+};
+let totalFeedback = 0;
+
+if (db && kv) {
+  // Try KV cache first for recent feedback
+  const cachedRecent = await kv.get('feedback:recent:all');
+  if (cachedRecent) {
+    recentFeedback = JSON.parse(cachedRecent);
+  } else {
+    // Cache miss - query D1
+    const result = await db
+      .prepare(
+        `SELECT
+          feedback_id as feedbackId,
+          repo,
+          issue_number as issueNumber,
+          category,
+          sentiment,
+          related_error_correlation as relatedErrorCorrelation,
+          correlation_confidence as correlationConfidence,
+          correlation_method as correlationMethod,
+          user_contact_encrypted as userContactEncrypted,
+          received_at as receivedAt,
+          updated_at as updatedAt
+        FROM feedback_events
+        ORDER BY received_at DESC
+        LIMIT 20`
+      )
+      .all<FeedbackEvent>();
+
+    recentFeedback = result.results ?? [];
+
+    // Cache for 15 minutes
+    await kv.put('feedback:recent:all', JSON.stringify(recentFeedback), {
+      expirationTtl: 900,
+    });
+  }
+
+  // Get correlated feedback (linked to errors)
+  const cachedCorrelated = await kv.get('feedback:correlated:all');
+  if (cachedCorrelated) {
+    correlatedFeedback = JSON.parse(cachedCorrelated);
+  } else {
+    const result = await db
+      .prepare(
+        `SELECT
+          feedback_id as feedbackId,
+          repo,
+          issue_number as issueNumber,
+          category,
+          sentiment,
+          related_error_correlation as relatedErrorCorrelation,
+          correlation_confidence as correlationConfidence,
+          correlation_method as correlationMethod,
+          user_contact_encrypted as userContactEncrypted,
+          received_at as receivedAt,
+          updated_at as updatedAt
+        FROM feedback_events
+        WHERE related_error_correlation IS NOT NULL
+        ORDER BY correlation_confidence DESC, received_at DESC
+        LIMIT 20`
+      )
+      .all<FeedbackEvent>();
+
+    correlatedFeedback = result.results ?? [];
+
+    await kv.put('feedback:correlated:all', JSON.stringify(correlatedFeedback), {
+      expirationTtl: 900,
+    });
+  }
+
+  // Get counts by category
+  const categoryResult = await db
+    .prepare(
+      `SELECT category, COUNT(*) as count
+       FROM feedback_events
+       GROUP BY category`
+    )
+    .all<{ category: string; count: number }>();
+
+  for (const row of categoryResult.results ?? []) {
+    feedbackByCategory[row.category] = row.count;
+    totalFeedback += row.count;
+  }
+}
+
+// Calculate priority score for each feedback event
+// Higher correlation confidence = higher priority
+function getPriorityScore(feedback: FeedbackEvent): number {
+  let score = 0;
+
+  // Correlation confidence (0-100 points)
+  score += feedback.correlationConfidence * 100;
+
+  // Category weight
+  if (feedback.category === 'bug-report') score += 30;
+  if (feedback.category === 'feature-request') score += 20;
+  if (feedback.category === 'ux-improvement') score += 15;
+
+  // Sentiment weight (if available)
+  if (feedback.sentiment === 'negative') score += 25;
+  if (feedback.sentiment === 'positive') score += 5;
+
+  return Math.round(score);
+}
+
+// Sort by priority
+const prioritizedFeedback = [...recentFeedback].sort(
+  (a, b) => getPriorityScore(b) - getPriorityScore(a)
+);
+
+function formatDate(dateString: string): string {
+  const date = new Date(dateString);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMs / 3600000);
+  const diffDays = Math.floor(diffMs / 86400000);
+
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  if (diffDays < 7) return `${diffDays}d ago`;
+  return date.toLocaleDateString();
+}
+
+function getCategoryBadgeColor(category: string): string {
+  switch (category) {
+    case 'feature-request':
+      return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300';
+    case 'bug-report':
+      return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300';
+    case 'ux-improvement':
+      return 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300';
+    default:
+      return 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300';
+  }
+}
+
+function getPriorityBadgeColor(score: number): string {
+  if (score >= 120) return 'bg-red-500 text-white';
+  if (score >= 80) return 'bg-orange-500 text-white';
+  if (score >= 40) return 'bg-yellow-500 text-white';
+  return 'bg-green-500 text-white';
+}
+---
+
+<DashboardLayout title="Feedback">
+  <div class="space-y-6">
+    <h2 class="text-3xl font-bold text-gray-900 dark:text-white">User Feedback</h2>
+
+    <!-- Summary Cards -->
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-4">
+      <div class="metric-card">
+        <div class="metric-title">Total Feedback</div>
+        <div class="metric-value">{totalFeedback}</div>
+        <div class="mt-2 text-sm text-gray-600 dark:text-gray-400">All time</div>
+      </div>
+
+      <div class="metric-card">
+        <div class="metric-title">Feature Requests</div>
+        <div class="metric-value">{feedbackByCategory['feature-request']}</div>
+        <div class="mt-2 text-sm text-gray-600 dark:text-gray-400">
+          {((feedbackByCategory['feature-request'] / totalFeedback) * 100).toFixed(0)}%
+        </div>
+      </div>
+
+      <div class="metric-card">
+        <div class="metric-title">Bug Reports</div>
+        <div class="metric-value">{feedbackByCategory['bug-report']}</div>
+        <div class="mt-2 text-sm text-gray-600 dark:text-gray-400">
+          {((feedbackByCategory['bug-report'] / totalFeedback) * 100).toFixed(0)}%
+        </div>
+      </div>
+
+      <div class="metric-card">
+        <div class="metric-title">Correlated</div>
+        <div class="metric-value">{correlatedFeedback.length}</div>
+        <div class="mt-2 text-sm text-gray-600 dark:text-gray-400">Linked to errors</div>
+      </div>
+    </div>
+
+    <!-- Prioritized Feedback List -->
+    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+      <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Feedback by Priority</h3>
+
+      <div class="space-y-3">
+        {
+          prioritizedFeedback.length === 0 ? (
+            <p class="text-gray-600 dark:text-gray-400">No feedback events yet.</p>
+          ) : (
+            prioritizedFeedback.map((feedback) => {
+              const priorityScore = getPriorityScore(feedback);
+              return (
+                <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
+                  <div class="flex items-start justify-between">
+                    <div class="flex-1">
+                      <div class="flex items-center gap-2 mb-2">
+                        <span
+                          class={`px-2 py-1 rounded text-xs font-medium ${getCategoryBadgeColor(feedback.category)}`}
+                        >
+                          {feedback.category}
+                        </span>
+                        <span
+                          class={`px-2 py-1 rounded text-xs font-bold ${getPriorityBadgeColor(priorityScore)}`}
+                        >
+                          P{priorityScore}
+                        </span>
+                        {feedback.relatedErrorCorrelation && (
+                          <span class="px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">
+                            Correlated ({Math.round(feedback.correlationConfidence * 100)}%)
+                          </span>
+                        )}
+                      </div>
+
+                      <div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
+                        <span class="font-mono">{feedback.repo}</span>
+                        <span>•</span>
+                        <a
+                          href={`https://github.com/littlebearapps/${feedback.repo}/issues/${feedback.issueNumber}`}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          class="text-blue-600 dark:text-blue-400 hover:underline"
+                        >
+                          #{feedback.issueNumber}
+                        </a>
+                        <span>•</span>
+                        <span>{formatDate(feedback.receivedAt)}</span>
+                      </div>
+
+                      {feedback.relatedErrorCorrelation && (
+                        <div class="mt-2 text-xs text-gray-500 dark:text-gray-400">
+                          <span>Linked to error: </span>
+                          <span class="font-mono">
+                            {feedback.relatedErrorCorrelation.substring(0, 8)}...
+                          </span>
+                          <span class="ml-2">via {feedback.correlationMethod}</span>
+                        </div>
+                      )}
+
+                      {feedback.userContactEncrypted && (
+                        <div class="mt-2 text-xs text-gray-500 dark:text-gray-400">
+                          <span>User contact provided (encrypted)</span>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              );
+            })
+          )
+        }
+      </div>
+    </div>
+
+    <!-- Correlated Feedback Section -->
+    {
+      correlatedFeedback.length > 0 && (
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+          <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
+            High-Confidence Correlations
+          </h3>
+
+          <div class="space-y-3">
+            {correlatedFeedback.map((feedback) => (
+              <div class="border border-green-200 dark:border-green-700 rounded-lg p-4 bg-green-50 dark:bg-green-900/20">
+                <div class="flex items-start justify-between">
+                  <div class="flex-1">
+                    <div class="flex items-center gap-2 mb-2">
+                      <span
+                        class={`px-2 py-1 rounded text-xs font-medium ${getCategoryBadgeColor(feedback.category)}`}
+                      >
+                        {feedback.category}
+                      </span>
+                      <span class="px-2 py-1 rounded text-xs font-bold bg-green-600 text-white">
+                        {Math.round(feedback.correlationConfidence * 100)}% confident
+                      </span>
+                    </div>
+
+                    <div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
+                      <span class="font-mono">{feedback.repo}</span>
+                      <span>•</span>
+                      <a
+                        href={`https://github.com/littlebearapps/${feedback.repo}/issues/${feedback.issueNumber}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        class="text-blue-600 dark:text-blue-400 hover:underline"
+                      >
+                        #{feedback.issueNumber}
+                      </a>
+                      <span>•</span>
+                      <span>{formatDate(feedback.receivedAt)}</span>
+                    </div>
+
+                    <div class="mt-2 text-sm text-gray-700 dark:text-gray-300">
+                      <span>Linked to error: </span>
+                      <span class="font-mono bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded">
+                        {feedback.relatedErrorCorrelation}
+                      </span>
+                      <span class="ml-2 text-xs text-gray-500 dark:text-gray-400">
+                        (via {feedback.correlationMethod})
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )
+    }
+
+    <!-- Category Breakdown -->
+    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+      <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Feedback by Category</h3>
+
+      <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+        {
+          Object.entries(feedbackByCategory).map(([category, count]) => (
+            <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+              <div class="flex items-center justify-between">
+                <span
+                  class={`px-3 py-1 rounded text-sm font-medium ${getCategoryBadgeColor(category)}`}
+                >
+                  {category}
+                </span>
+                <span class="text-2xl font-bold text-gray-900 dark:text-white">{count}</span>
+              </div>
+              <div class="mt-2 text-sm text-gray-600 dark:text-gray-400">
+                {totalFeedback > 0 ? ((count / totalFeedback) * 100).toFixed(1) : 0}% of total
+              </div>
+            </div>
+          ))
+        }
+      </div>
+    </div>
+  </div>
+</DashboardLayout>

package/templates/full/dashboard/src/pages/kiosk.astro

@@ -0,0 +1,206 @@
+---
+const runtime = (Astro.locals as App.Locals | undefined)?.runtime;
+const db = runtime?.env?.PLATFORM_DB;
+
+let errors24h = 0;
+let mrr = 0;
+let activeUsers = 0;
+let alerts = 0;
+
+if (db) {
+  // Wrap each query in try/catch - tables may not exist yet
+  try {
+    const errorRow = await db
+      .prepare(
+        `SELECT COUNT(*) AS count FROM error_reports
+         WHERE timestamp > unixepoch() - 86400`
+      )
+      .first<{ count: number }>();
+    errors24h = errorRow?.count ?? 0;
+  } catch {
+    // Table doesn't exist yet
+  }
+
+  try {
+    const mrrRow = await db
+      .prepare(
+        `SELECT value FROM revenue_metrics
+         WHERE metric_type = 'mrr'
+         ORDER BY timestamp DESC
+         LIMIT 1`
+      )
+      .first<{ value: number }>();
+    mrr = mrrRow?.value ?? 0;
+  } catch {
+    // Table doesn't exist yet
+  }
+
+  try {
+    const activeUsersRow = await db
+      .prepare(
+        `SELECT value FROM product_metrics
+         WHERE metric_type = 'active_users'
+         ORDER BY timestamp DESC
+         LIMIT 1`
+      )
+      .first<{ value: number }>();
+    activeUsers = activeUsersRow?.value ?? 0;
+  } catch {
+    // Table doesn't exist yet
+  }
+
+  try {
+    const alertsRow = await db
+      .prepare(
+        `SELECT COUNT(*) AS count FROM alerts
+         WHERE resolved = 0 AND severity IN ('critical', 'high')`
+      )
+      .first<{ count: number }>();
+    alerts = alertsRow?.count ?? 0;
+  } catch {
+    // Table doesn't exist yet
+  }
+}
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Platform Kiosk</title>
+    <style>
+      body {
+        margin: 0;
+        padding: 2rem;
+        background: #111;
+        color: #fff;
+        font-family:
+          'Inter',
+          system-ui,
+          -apple-system,
+          BlinkMacSystemFont,
+          'Segoe UI',
+          sans-serif;
+      }
+
+      .kiosk-grid {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 2rem;
+        min-height: calc(100vh - 4rem);
+      }
+
+      .kiosk-tile {
+        background: #222;
+        border-radius: 1.25rem;
+        padding: 3rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.35);
+      }
+
+      .kiosk-label {
+        font-size: 2rem;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        opacity: 0.7;
+        margin-bottom: 1.5rem;
+      }
+
+      .kiosk-value {
+        font-size: clamp(4rem, 8vw, 7rem);
+        font-weight: 700;
+        line-height: 1;
+      }
+
+      .kiosk-unit {
+        font-size: 2rem;
+        opacity: 0.6;
+        margin-top: 1rem;
+      }
+
+      .status-ok {
+        color: #10b981;
+      }
+
+      .status-warning {
+        color: #f59e0b;
+      }
+
+      .status-error {
+        color: #ef4444;
+      }
+
+      .refresh-indicator {
+        position: fixed;
+        bottom: 2rem;
+        right: 2rem;
+        opacity: 0.5;
+        font-size: 1rem;
+      }
+
+      @media (max-width: 900px) {
+        body {
+          padding: 1.5rem;
+        }
+
+        .kiosk-grid {
+          grid-template-columns: 1fr;
+          gap: 1.5rem;
+        }
+
+        .kiosk-tile {
+          padding: 2rem;
+        }
+
+        .kiosk-label {
+          font-size: 1.5rem;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="kiosk-grid">
+      <div class="kiosk-tile">
+        <div class="kiosk-label">Errors (24h)</div>
+        <div class={`kiosk-value ${errors24h > 10 ? 'status-error' : 'status-ok'}`}>
+          {errors24h}
+        </div>
+      </div>
+
+      <div class="kiosk-tile">
+        <div class="kiosk-label">MRR</div>
+        <div class="kiosk-value status-ok">
+          ${mrr.toFixed(0)}
+        </div>
+      </div>
+
+      <div class="kiosk-tile">
+        <div class="kiosk-label">Active Users</div>
+        <div class="kiosk-value status-ok">
+          {activeUsers.toLocaleString()}
+        </div>
+        <div class="kiosk-unit">Last 30 Days</div>
+      </div>
+
+      <div class="kiosk-tile">
+        <div class="kiosk-label">Active Alerts</div>
+        <div class={`kiosk-value ${alerts > 0 ? 'status-error' : 'status-ok'}`}>
+          {alerts}
+        </div>
+      </div>
+    </div>
+
+    <div class="refresh-indicator">Auto-refresh: 60s</div>
+
+    <script>
+      setTimeout(() => {
+        window.location.reload();
+      }, 60000);
+    </script>
+  </body>
+</html>