@littlebearapps/platform-admin-sdk 2.1.0 → 2.3.0

package/templates/full/dashboard/src/components/reports/FeatureUsageReport.tsx

@@ -0,0 +1,339 @@
+/**
+ * Feature Usage Report Component
+ * Shows daily feature usage metrics with project column, filtering, and pagination
+ */
+import { useState, useEffect } from 'react';
+
+interface FeatureUsage {
+  feature_id: string;
+  project: string;
+  usage_date: string;
+  requests: number;
+  d1_reads: number;
+  d1_writes: number;
+  kv_reads: number;
+  kv_writes: number;
+  ai_neurons: number;
+  queue_messages: number;
+}
+
+interface FeatureSummary {
+  feature_id: string;
+  project: string;
+  total_requests: number;
+  total_d1_ops: number;
+  total_ai_neurons: number;
+  days_active: number;
+}
+
+function StatCard({ label, value, colour, subValue }: { label: string; value: number | string; colour: string; subValue?: string }) {
+  return (
+    <div className={`bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 ${colour}`}>
+      <p className="text-sm font-medium text-gray-600 dark:text-gray-400">{label}</p>
+      <p className="text-2xl font-bold mt-1">{value}</p>
+      {subValue && <p className="text-xs text-gray-500 mt-0.5">{subValue}</p>}
+    </div>
+  );
+}
+
+function formatNumber(n: number): string {
+  if (n >= 1000000) return `${(n / 1000000).toFixed(1)}M`;
+  if (n >= 1000) return `${(n / 1000).toFixed(1)}K`;
+  return n.toLocaleString();
+}
+
+function extractProject(featureKey: string): string {
+  const parts = featureKey.split(':');
+  return parts.length > 1 ? parts[0] : 'unknown';
+}
+
+export function FeatureUsageReport() {
+  const [usage, setUsage] = useState<FeatureUsage[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [days, setDays] = useState(7);
+  const [sortBy, setSortBy] = useState<'requests' | 'd1' | 'ai' | 'project'>('requests');
+  const [projectFilter, setProjectFilter] = useState<string>('all');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(25);
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        setLoading(true);
+        const response = await fetch(`/api/usage/features/history?days=${days}`);
+        if (!response.ok) throw new Error('Failed to fetch feature usage');
+        const data = await response.json();
+
+        // API returns { success, features: { [featureKey]: [{ date, d1Writes, d1Reads, ... }] } }
+        const featuresObj = data.features || {};
+        const usageData: FeatureUsage[] = [];
+        for (const [featureKey, entries] of Object.entries(featuresObj)) {
+          for (const entry of entries as Array<Record<string, unknown>>) {
+            usageData.push({
+              feature_id: featureKey,
+              project: extractProject(featureKey),
+              usage_date: (entry.date as string) || '',
+              requests: (entry.requests as number) || 0,
+              d1_reads: (entry.d1Reads as number) || 0,
+              d1_writes: (entry.d1Writes as number) || 0,
+              kv_reads: (entry.kvReads as number) || 0,
+              kv_writes: (entry.kvWrites as number) || 0,
+              ai_neurons: (entry.aiNeurons as number) || 0,
+              queue_messages: (entry.queueMessages as number) || 0,
+            });
+          }
+        }
+
+        setUsage(usageData);
+      } catch (e) {
+        setError(e instanceof Error ? e.message : 'Unknown error');
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchData();
+  }, [days]);
+
+  // Reset page when filters change
+  useEffect(() => { setPage(1); }, [sortBy, projectFilter, pageSize, days]);
+
+  if (loading) {
+    return (
+      <div className="space-y-4">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          {[...Array(4)].map((_, i) => (
+            <div key={i} className="bg-white dark:bg-gray-800 rounded-lg border p-4 animate-pulse">
+              <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-16 mb-2"></div>
+              <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-12"></div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 text-red-700 dark:text-red-300">
+        Error loading feature usage: {error}
+      </div>
+    );
+  }
+
+  // Aggregate by feature
+  const byFeature = new Map<string, FeatureSummary>();
+  usage.forEach(u => {
+    const existing = byFeature.get(u.feature_id);
+    const d1Ops = u.d1_reads + u.d1_writes;
+    if (existing) {
+      existing.total_requests += u.requests;
+      existing.total_d1_ops += d1Ops;
+      existing.total_ai_neurons += u.ai_neurons;
+      existing.days_active += 1;
+    } else {
+      byFeature.set(u.feature_id, {
+        feature_id: u.feature_id,
+        project: u.project,
+        total_requests: u.requests,
+        total_d1_ops: d1Ops,
+        total_ai_neurons: u.ai_neurons,
+        days_active: 1,
+      });
+    }
+  });
+
+  // Get unique projects for filter
+  const allFeatures = Array.from(byFeature.values());
+  const projects = [...new Set(allFeatures.map(f => f.project))].sort();
+
+  // Apply project filter
+  const filtered = projectFilter === 'all'
+    ? allFeatures
+    : allFeatures.filter(f => f.project === projectFilter);
+
+  // Sort
+  const features = [...filtered].sort((a, b) => {
+    if (sortBy === 'project') return a.project.localeCompare(b.project);
+    if (sortBy === 'requests') return b.total_requests - a.total_requests;
+    if (sortBy === 'd1') return b.total_d1_ops - a.total_d1_ops;
+    return b.total_ai_neurons - a.total_ai_neurons;
+  });
+
+  // Pagination
+  const totalPages = Math.ceil(features.length / pageSize);
+  const paginatedFeatures = features.slice((page - 1) * pageSize, page * pageSize);
+
+  const totalRequests = allFeatures.reduce((sum, f) => sum + f.total_requests, 0);
+  const totalD1Ops = allFeatures.reduce((sum, f) => sum + f.total_d1_ops, 0);
+  const totalAiNeurons = allFeatures.reduce((sum, f) => sum + f.total_ai_neurons, 0);
+
+  return (
+    <div className="space-y-6">
+      {/* Filters */}
+      <div className="flex flex-wrap items-center gap-4">
+        <div className="flex items-center gap-2">
+          <label className="text-sm text-gray-600 dark:text-gray-400">Time range:</label>
+          <select
+            value={days}
+            onChange={(e) => setDays(Number(e.target.value))}
+            className="px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-sm"
+          >
+            <option value={7}>Last 7 days</option>
+            <option value={14}>Last 14 days</option>
+            <option value={30}>Last 30 days</option>
+          </select>
+        </div>
+        <div className="flex items-center gap-2">
+          <label className="text-sm text-gray-600 dark:text-gray-400">Project:</label>
+          <select
+            value={projectFilter}
+            onChange={(e) => setProjectFilter(e.target.value)}
+            className="px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-sm"
+          >
+            <option value="all">All Projects ({projects.length})</option>
+            {projects.map(p => (
+              <option key={p} value={p}>{p}</option>
+            ))}
+          </select>
+        </div>
+        <div className="flex items-center gap-2">
+          <label className="text-sm text-gray-600 dark:text-gray-400">Sort by:</label>
+          <select
+            value={sortBy}
+            onChange={(e) => setSortBy(e.target.value as 'requests' | 'd1' | 'ai' | 'project')}
+            className="px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-sm"
+          >
+            <option value="requests">Requests</option>
+            <option value="d1">D1 Operations</option>
+            <option value="ai">AI Neurons</option>
+            <option value="project">Project</option>
+          </select>
+        </div>
+        <div className="flex items-center gap-2">
+          <label className="text-sm text-gray-600 dark:text-gray-400">Show:</label>
+          <select
+            value={pageSize}
+            onChange={(e) => setPageSize(Number(e.target.value))}
+            className="px-3 py-1.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-sm"
+          >
+            <option value={10}>10</option>
+            <option value={25}>25</option>
+            <option value={50}>50</option>
+            <option value={100}>100</option>
+          </select>
+        </div>
+      </div>
+
+      {/* Stats */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <StatCard label="Total Requests" value={formatNumber(totalRequests)} colour="border-l-4 border-l-blue-500" />
+        <StatCard label="D1 Operations" value={formatNumber(totalD1Ops)} colour="border-l-4 border-l-green-500" />
+        <StatCard label="AI Neurons" value={formatNumber(totalAiNeurons)} colour="border-l-4 border-l-orange-500" />
+        <StatCard
+          label="Active Features"
+          value={features.length}
+          colour="border-l-4 border-l-purple-500"
+          subValue={projectFilter !== 'all' ? `of ${allFeatures.length} total` : `across ${projects.length} projects`}
+        />
+      </div>
+
+      {/* Feature Table */}
+      <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+        <div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
+          <div>
+            <h3 className="font-semibold text-gray-900 dark:text-white">Feature Usage ({days} Days)</h3>
+            <p className="text-xs text-gray-500 mt-0.5">
+              {features.length} feature{features.length !== 1 ? 's' : ''}
+              {projectFilter !== 'all' && ` in ${projectFilter}`}
+            </p>
+          </div>
+          {totalPages > 1 && (
+            <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
+              <button
+                onClick={() => setPage(p => Math.max(1, p - 1))}
+                disabled={page === 1}
+                className="px-2 py-1 rounded border border-gray-300 dark:border-gray-600 disabled:opacity-40 hover:bg-gray-50 dark:hover:bg-gray-700"
+              >
+                Prev
+              </button>
+              <span>{page} / {totalPages}</span>
+              <button
+                onClick={() => setPage(p => Math.min(totalPages, p + 1))}
+                disabled={page === totalPages}
+                className="px-2 py-1 rounded border border-gray-300 dark:border-gray-600 disabled:opacity-40 hover:bg-gray-50 dark:hover:bg-gray-700"
+              >
+                Next
+              </button>
+            </div>
+          )}
+        </div>
+        {features.length === 0 ? (
+          <div className="p-8 text-center text-gray-500">No feature usage data available</div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead className="bg-gray-50 dark:bg-gray-900/50">
+                <tr>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Project</th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Feature</th>
+                  <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Requests</th>
+                  <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">D1 Ops</th>
+                  <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">AI Neurons</th>
+                  <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Days Active</th>
+                </tr>
+              </thead>
+              <tbody>
+                {paginatedFeatures.map((f) => {
+                  // Strip project prefix from feature_id for display
+                  const featureDisplay = f.feature_id.startsWith(f.project + ':')
+                    ? f.feature_id.slice(f.project.length + 1)
+                    : f.feature_id;
+                  return (
+                    <tr key={f.feature_id} className="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800/50">
+                      <td className="px-4 py-3">
+                        <span className="inline-block px-2 py-0.5 text-xs font-medium rounded bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
+                          {f.project}
+                        </span>
+                      </td>
+                      <td className="px-4 py-3 font-medium text-gray-900 dark:text-white text-sm">{featureDisplay}</td>
+                      <td className="px-4 py-3 text-right text-gray-600 dark:text-gray-400">{formatNumber(f.total_requests)}</td>
+                      <td className="px-4 py-3 text-right text-gray-600 dark:text-gray-400">{formatNumber(f.total_d1_ops)}</td>
+                      <td className="px-4 py-3 text-right text-gray-600 dark:text-gray-400">{formatNumber(f.total_ai_neurons)}</td>
+                      <td className="px-4 py-3 text-right text-gray-600 dark:text-gray-400">{f.days_active}</td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        )}
+        {/* Bottom pagination */}
+        {totalPages > 1 && (
+          <div className="px-4 py-3 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between text-sm text-gray-600 dark:text-gray-400">
+            <span>
+              Showing {(page - 1) * pageSize + 1}–{Math.min(page * pageSize, features.length)} of {features.length}
+            </span>
+            <div className="flex items-center gap-2">
+              <button
+                onClick={() => setPage(p => Math.max(1, p - 1))}
+                disabled={page === 1}
+                className="px-2 py-1 rounded border border-gray-300 dark:border-gray-600 disabled:opacity-40 hover:bg-gray-50 dark:hover:bg-gray-700"
+              >
+                Prev
+              </button>
+              <span>{page} / {totalPages}</span>
+              <button
+                onClick={() => setPage(p => Math.min(totalPages, p + 1))}
+                disabled={page === totalPages}
+                className="px-2 py-1 rounded border border-gray-300 dark:border-gray-600 disabled:opacity-40 hover:bg-gray-50 dark:hover:bg-gray-700"
+              >
+                Next
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/full/dashboard/src/components/search/SearchResultGroup.tsx

@@ -0,0 +1,46 @@
+/**
+ * SearchResultGroup Component
+ *
+ * Renders a group header for search results by content type.
+ *
+ * @module dashboard/components/search/SearchResultGroup
+ * @created 2026-02-03
+ * @task task-303.3
+ */
+
+import type { SearchContentType } from '../../lib/search/types';
+
+/** Labels for each content type */
+const CONTENT_TYPE_LABELS: Record<SearchContentType, string> = {
+  error: 'Errors',
+  pattern: 'Patterns',
+  setting: 'Settings',
+  page: 'Pages',
+  service: 'Services',
+  opportunity: 'Opportunities',
+  draft: 'Drafts',
+  project: 'Projects',
+};
+
+interface SearchResultGroupProps {
+  contentType: SearchContentType;
+  count: number;
+}
+
+export function SearchResultGroup({
+  contentType,
+  count,
+}: SearchResultGroupProps): JSX.Element {
+  const label = CONTENT_TYPE_LABELS[contentType] || contentType;
+
+  return (
+    <div className="px-3 py-2 flex items-center justify-between">
+      <span className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+        {label}
+      </span>
+      <span className="text-xs text-gray-400 dark:text-gray-500">
+        {count} {count === 1 ? 'result' : 'results'}
+      </span>
+    </div>
+  );
+}

package/templates/full/dashboard/src/components/search/SearchResultItem.tsx

@@ -0,0 +1,212 @@
+/**
+ * SearchResultItem Component
+ *
+ * Renders a single search result with icon, title, snippet, and content type indicator.
+ *
+ * @module dashboard/components/search/SearchResultItem
+ * @created 2026-02-03
+ * @task task-303.3
+ */
+
+import type { SearchResult, SearchContentType } from '../../lib/search/types';
+
+/** Icons for each content type */
+const CONTENT_TYPE_ICONS: Record<SearchContentType, JSX.Element> = {
+  error: (
+    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+    </svg>
+  ),
+  pattern: (
+    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
+    </svg>
+  ),
+  setting: (
+    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+    </svg>
+  ),
+  page: (
+    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+    </svg>
+  ),
+  service: (
+    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
+    </svg>
+  ),
+  opportunity: (
+    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+    </svg>
+  ),
+  draft: (
+    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+    </svg>
+  ),
+  project: (
+    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
+    </svg>
+  ),
+};
+
+/** Colour classes for each content type */
+const CONTENT_TYPE_COLORS: Record<SearchContentType, string> = {
+  error: 'text-red-500 dark:text-red-400 bg-red-100 dark:bg-red-900/30',
+  pattern: 'text-purple-500 dark:text-purple-400 bg-purple-100 dark:bg-purple-900/30',
+  setting: 'text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-700',
+  page: 'text-blue-500 dark:text-blue-400 bg-blue-100 dark:bg-blue-900/30',
+  service: 'text-green-500 dark:text-green-400 bg-green-100 dark:bg-green-900/30',
+  opportunity: 'text-orange-500 dark:text-orange-400 bg-orange-100 dark:bg-orange-900/30',
+  draft: 'text-cyan-500 dark:text-cyan-400 bg-cyan-100 dark:bg-cyan-900/30',
+  project: 'text-indigo-500 dark:text-indigo-400 bg-indigo-100 dark:bg-indigo-900/30',
+};
+
+/** Labels for each content type */
+const CONTENT_TYPE_LABELS: Record<SearchContentType, string> = {
+  error: 'Error',
+  pattern: 'Pattern',
+  setting: 'Setting',
+  page: 'Page',
+  service: 'Service',
+  opportunity: 'Opportunity',
+  draft: 'Draft',
+  project: 'Project',
+};
+
+interface SearchResultItemProps {
+  result: SearchResult;
+  isSelected: boolean;
+  query: string;
+  onClick: () => void;
+}
+
+export function SearchResultItem({
+  result,
+  isSelected,
+  query,
+  onClick,
+}: SearchResultItemProps): JSX.Element {
+  const icon = CONTENT_TYPE_ICONS[result.content_type] || CONTENT_TYPE_ICONS.page;
+  const colorClass = CONTENT_TYPE_COLORS[result.content_type] || CONTENT_TYPE_COLORS.page;
+  const label = CONTENT_TYPE_LABELS[result.content_type] || result.content_type;
+
+  // Highlight matching terms in the snippet - sanitized by only allowing alphanumeric matches wrapped in mark tags
+  const snippetText = result.snippet || result.content || '';
+  const highlightedParts = getHighlightedParts(snippetText, query);
+
+  return (
+    <a
+      href={result.url}
+      onClick={(e) => {
+        e.preventDefault();
+        onClick();
+      }}
+      className={`flex items-start gap-3 px-3 py-2 rounded-lg cursor-pointer transition-colors ${
+        isSelected
+          ? 'bg-blue-50 dark:bg-blue-900/30'
+          : 'hover:bg-gray-100 dark:hover:bg-gray-700'
+      }`}
+    >
+      {/* Icon */}
+      <span
+        className={`flex-shrink-0 w-8 h-8 rounded-lg flex items-center justify-center ${colorClass}`}
+      >
+        {icon}
+      </span>
+
+      {/* Content */}
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          <span className="font-medium text-gray-900 dark:text-white truncate">
+            {result.title}
+          </span>
+          <span
+            className={`text-xs px-1.5 py-0.5 rounded ${colorClass}`}
+          >
+            {label}
+          </span>
+        </div>
+        {snippetText && (
+          <p className="text-sm text-gray-500 dark:text-gray-400 line-clamp-2 mt-0.5">
+            {highlightedParts.map((part, i) =>
+              part.isMatch ? (
+                <mark key={i} className="bg-yellow-200 dark:bg-yellow-800 rounded px-0.5">
+                  {part.text}
+                </mark>
+              ) : (
+                <span key={i}>{part.text}</span>
+              )
+            )}
+          </p>
+        )}
+        {result.project && (
+          <span className="text-xs text-gray-400 dark:text-gray-500">
+            {result.project}
+          </span>
+        )}
+      </div>
+
+      {/* Arrow indicator when selected */}
+      {isSelected && (
+        <kbd className="flex-shrink-0 text-xs text-gray-400 border border-gray-200 dark:border-gray-600 rounded px-1.5 py-0.5">
+          ↵
+        </kbd>
+      )}
+    </a>
+  );
+}
+
+interface HighlightPart {
+  text: string;
+  isMatch: boolean;
+}
+
+/**
+ * Get highlighted parts of text matching search terms
+ * Returns array of parts with isMatch flag for safe rendering
+ */
+function getHighlightedParts(text: string, query: string): HighlightPart[] {
+  if (!text || !query.trim()) {
+    return [{ text, isMatch: false }];
+  }
+
+  const terms = query
+    .toLowerCase()
+    .split(/\s+/)
+    .filter((t) => t.length > 2);
+
+  if (terms.length === 0) {
+    return [{ text, isMatch: false }];
+  }
+
+  // Escape special regex characters
+  const escaped = terms.map((t) => t.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
+  const pattern = new RegExp(`(${escaped.join('|')})`, 'gi');
+
+  const parts: HighlightPart[] = [];
+  let lastIndex = 0;
+  let match: RegExpExecArray | null;
+
+  while ((match = pattern.exec(text)) !== null) {
+    // Add non-matching text before this match
+    if (match.index > lastIndex) {
+      parts.push({ text: text.slice(lastIndex, match.index), isMatch: false });
+    }
+    // Add the matching text
+    parts.push({ text: match[0], isMatch: true });
+    lastIndex = pattern.lastIndex;
+  }
+
+  // Add remaining text after last match
+  if (lastIndex < text.length) {
+    parts.push({ text: text.slice(lastIndex), isMatch: false });
+  }
+
+  return parts.length > 0 ? parts : [{ text, isMatch: false }];
+}

package/templates/full/dashboard/src/pages/api/patterns/[id]/approve.ts

@@ -0,0 +1,49 @@
+/**
+ * POST /api/patterns/:id/approve - Proxy to pattern-discovery /suggestions/:id?action=approve
+ * Approves a pending pattern suggestion
+ */
+import type { APIRoute } from 'astro';
+
+interface Env {
+  PATTERN_DISCOVERY_API?: Fetcher;
+}
+
+export const POST: APIRoute = async ({ locals, params, url }) => {
+  const api = (locals.runtime?.env as Env)?.PATTERN_DISCOVERY_API;
+
+  if (!api) {
+    return new Response(JSON.stringify({ error: 'Pattern Discovery API not configured' }), {
+      status: 503,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
+
+  const { id } = params;
+  if (!id) {
+    return new Response(JSON.stringify({ error: 'Missing suggestion ID' }), {
+      status: 400,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
+
+  try {
+    const by = url.searchParams.get('by') || 'dashboard';
+
+    const response = await api.fetch(
+      `https://pattern-discovery.littlebearapps.workers.dev/suggestions/${id}?action=approve&by=${by}`,
+      { method: 'POST' }
+    );
+
+    const data = await response.json();
+    return new Response(JSON.stringify(data), {
+      status: response.status,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  } catch (error) {
+    console.error('Error approving suggestion:', error);
+    return new Response(JSON.stringify({ error: 'Failed to approve suggestion' }), {
+      status: 500,
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
+};