@littlebearapps/platform-admin-sdk 2.0.0 → 2.2.0

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/components/usage/AIModelBreakdown.tsx

@@ -0,0 +1,364 @@
+/**
+ * AI Model Breakdown Component
+ *
+ * Displays per-model usage from Workers AI and AI Gateway.
+ * Shows costs, requests, and token counts by model.
+ */
+import { useState, useEffect } from 'react';
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+interface WorkersAIModel {
+  model: string;
+  project: string;
+  requests: number;
+  inputTokens: number;
+  outputTokens: number;
+  costUsd: number;
+}
+
+interface AIGatewayModel {
+  provider: string;
+  model: string;
+  gatewayId: string;
+  requests: number;
+  cachedRequests: number;
+  tokensIn: number;
+  tokensOut: number;
+  costUsd: number;
+}
+
+interface ApiResponse {
+  success: boolean;
+  workersAI?: {
+    models: WorkersAIModel[];
+    totalCostUsd: number;
+    totalRequests: number;
+  };
+  aiGateway?: {
+    models: AIGatewayModel[];
+    totalCostUsd: number;
+    totalRequests: number;
+    byProvider: Record<string, { requests: number; costUsd: number }>;
+  };
+  error?: string;
+}
+
+interface Props {
+  period: string;
+}
+
+// =============================================================================
+// CONSTANTS
+// =============================================================================
+
+const PROVIDER_COLORS: Record<string, string> = {
+  openai: 'bg-green-500',
+  anthropic: 'bg-orange-500',
+  'google-ai-studio': 'bg-blue-500',
+  'workers-ai': 'bg-amber-500',
+  deepseek: 'bg-cyan-500',
+  minimax: 'bg-indigo-500',
+};
+
+const PROVIDER_LABELS: Record<string, string> = {
+  openai: 'OpenAI',
+  anthropic: 'Anthropic',
+  'google-ai-studio': 'Google AI',
+  'workers-ai': 'Workers AI',
+  deepseek: 'DeepSeek',
+  minimax: 'MiniMax',
+};
+
+// =============================================================================
+// HELPERS
+// =============================================================================
+
+function formatNumber(n: number): string {
+  if (n >= 1_000_000) {
+    return `${(n / 1_000_000).toFixed(1)}M`;
+  }
+  if (n >= 1_000) {
+    return `${(n / 1_000).toFixed(1)}K`;
+  }
+  return n.toLocaleString();
+}
+
+function formatModelName(model: string): string {
+  // Shorten common model prefixes
+  return model
+    .replace('@cf/meta/', '')
+    .replace('@cf/mistral/', '')
+    .replace('@cf/', '')
+    .replace('gpt-', 'GPT-')
+    .replace('claude-', 'Claude ')
+    .replace('gemini-', 'Gemini ');
+}
+
+// =============================================================================
+// COMPONENTS
+// =============================================================================
+
+function LoadingState() {
+  return (
+    <div className="animate-pulse space-y-3">
+      <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/3" />
+      <div className="h-20 bg-gray-200 dark:bg-gray-700 rounded" />
+      <div className="h-20 bg-gray-200 dark:bg-gray-700 rounded" />
+    </div>
+  );
+}
+
+function EmptyState() {
+  return (
+    <div className="text-center py-8 text-gray-500 dark:text-gray-400">
+      <div className="text-3xl mb-2">🤖</div>
+      <p className="text-sm">No AI model usage data available</p>
+    </div>
+  );
+}
+
+function ProviderBar({
+  byProvider,
+  totalCost,
+}: {
+  byProvider: Record<string, { requests: number; costUsd: number }>;
+  totalCost: number;
+}) {
+  const providers = Object.entries(byProvider).sort((a, b) => b[1].costUsd - a[1].costUsd);
+
+  if (providers.length === 0 || totalCost === 0) return null;
+
+  return (
+    <div className="mb-4">
+      <div className="flex h-3 rounded-full overflow-hidden bg-gray-200 dark:bg-gray-700">
+        {providers.map(([provider, data]) => {
+          const width = (data.costUsd / totalCost) * 100;
+          if (width < 1) return null;
+          return (
+            <div
+              key={provider}
+              className={`${PROVIDER_COLORS[provider] || 'bg-gray-400'} transition-all`}
+              style={{ width: `${width}%` }}
+              title={`${PROVIDER_LABELS[provider] || provider}: $${data.costUsd.toFixed(2)}`}
+            />
+          );
+        })}
+      </div>
+      <div className="flex flex-wrap gap-3 mt-2">
+        {providers.map(([provider, data]) => (
+          <div key={provider} className="flex items-center gap-1.5 text-xs">
+            <span className={`w-2 h-2 rounded-full ${PROVIDER_COLORS[provider] || 'bg-gray-400'}`} />
+            <span className="text-gray-600 dark:text-gray-400">
+              {PROVIDER_LABELS[provider] || provider}
+            </span>
+            <span className="text-gray-900 dark:text-white font-medium">
+              ${data.costUsd.toFixed(2)}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function ModelTable({ models, type }: { models: (WorkersAIModel | AIGatewayModel)[]; type: 'workersai' | 'gateway' }) {
+  const [expanded, setExpanded] = useState(false);
+  const displayModels = expanded ? models : models.slice(0, 5);
+  const hasMore = models.length > 5;
+
+  return (
+    <div className="overflow-x-auto">
+      <table className="w-full text-sm">
+        <thead>
+          <tr className="text-left text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-700">
+            <th className="pb-2 font-medium">Model</th>
+            {type === 'gateway' && <th className="pb-2 font-medium">Provider</th>}
+            <th className="pb-2 font-medium text-right">Requests</th>
+            <th className="pb-2 font-medium text-right">Tokens</th>
+            <th className="pb-2 font-medium text-right">Cost</th>
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
+          {displayModels.map((m, idx) => {
+            const isGateway = 'provider' in m;
+            const tokens = isGateway
+              ? (m as AIGatewayModel).tokensIn + (m as AIGatewayModel).tokensOut
+              : (m as WorkersAIModel).inputTokens + (m as WorkersAIModel).outputTokens;
+
+            return (
+              <tr key={idx} className="text-gray-900 dark:text-white">
+                <td className="py-2">
+                  <code className="text-xs bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded">
+                    {formatModelName(m.model)}
+                  </code>
+                </td>
+                {type === 'gateway' && (
+                  <td className="py-2 text-gray-600 dark:text-gray-400">
+                    {PROVIDER_LABELS[(m as AIGatewayModel).provider] || (m as AIGatewayModel).provider}
+                  </td>
+                )}
+                <td className="py-2 text-right font-mono">{formatNumber(m.requests)}</td>
+                <td className="py-2 text-right font-mono text-gray-600 dark:text-gray-400">
+                  {formatNumber(tokens)}
+                </td>
+                <td className="py-2 text-right font-medium">${m.costUsd.toFixed(2)}</td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+      {hasMore && (
+        <button
+          onClick={() => setExpanded(!expanded)}
+          className="mt-2 text-xs text-blue-600 dark:text-blue-400 hover:underline"
+        >
+          {expanded ? 'Show less' : `Show ${models.length - 5} more models`}
+        </button>
+      )}
+    </div>
+  );
+}
+
+// =============================================================================
+// MAIN COMPONENT
+// =============================================================================
+
+export default function AIModelBreakdown({ period }: Props) {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [data, setData] = useState<ApiResponse | null>(null);
+  const [activeTab, setActiveTab] = useState<'gateway' | 'workersai'>('gateway');
+
+  useEffect(() => {
+    async function fetchData() {
+      setLoading(true);
+      setError(null);
+
+      try {
+        const response = await fetch(`/api/usage/ai-models?period=${period}`);
+        const result: ApiResponse = await response.json();
+
+        if (!result.success) {
+          throw new Error(result.error || 'Failed to load data');
+        }
+
+        setData(result);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Unknown error');
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchData();
+  }, [period]);
+
+  if (loading) {
+    return (
+      <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+        <h3 className="font-medium text-gray-900 dark:text-white mb-4">AI Model Usage</h3>
+        <LoadingState />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+        <h3 className="font-medium text-gray-900 dark:text-white mb-2">AI Model Usage</h3>
+        <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+      </div>
+    );
+  }
+
+  const hasGatewayData = (data?.aiGateway?.models?.length ?? 0) > 0;
+  const hasWorkersAIData = (data?.workersAI?.models?.length ?? 0) > 0;
+
+  if (!hasGatewayData && !hasWorkersAIData) {
+    return (
+      <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+        <h3 className="font-medium text-gray-900 dark:text-white mb-2">AI Model Usage</h3>
+        <EmptyState />
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+      {/* Header with tabs */}
+      <div className="border-b border-gray-200 dark:border-gray-700">
+        <div className="flex items-center justify-between p-4 pb-0">
+          <h3 className="font-medium text-gray-900 dark:text-white">AI Model Usage</h3>
+          <div className="text-sm">
+            <span className="text-gray-500 dark:text-gray-400">Total: </span>
+            <span className="font-semibold text-gray-900 dark:text-white">
+              ${((data?.aiGateway?.totalCostUsd ?? 0) + (data?.workersAI?.totalCostUsd ?? 0)).toFixed(2)}
+            </span>
+          </div>
+        </div>
+
+        {/* Tabs */}
+        <div className="flex px-4 mt-3">
+          <button
+            onClick={() => setActiveTab('gateway')}
+            className={`px-3 py-2 text-sm font-medium border-b-2 -mb-px transition-colors ${
+              activeTab === 'gateway'
+                ? 'border-blue-500 text-blue-600 dark:text-blue-400'
+                : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
+            }`}
+          >
+            AI Gateway
+            {hasGatewayData && (
+              <span className="ml-1.5 text-xs bg-gray-100 dark:bg-gray-700 px-1.5 py-0.5 rounded">
+                ${data?.aiGateway?.totalCostUsd?.toFixed(2)}
+              </span>
+            )}
+          </button>
+          <button
+            onClick={() => setActiveTab('workersai')}
+            className={`px-3 py-2 text-sm font-medium border-b-2 -mb-px transition-colors ${
+              activeTab === 'workersai'
+                ? 'border-blue-500 text-blue-600 dark:text-blue-400'
+                : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
+            }`}
+          >
+            Workers AI
+            {hasWorkersAIData && (
+              <span className="ml-1.5 text-xs bg-gray-100 dark:bg-gray-700 px-1.5 py-0.5 rounded">
+                ${data?.workersAI?.totalCostUsd?.toFixed(2)}
+              </span>
+            )}
+          </button>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="p-4">
+        {activeTab === 'gateway' && data?.aiGateway && (
+          <>
+            <ProviderBar
+              byProvider={data.aiGateway.byProvider}
+              totalCost={data.aiGateway.totalCostUsd}
+            />
+            {hasGatewayData ? (
+              <ModelTable models={data.aiGateway.models} type="gateway" />
+            ) : (
+              <EmptyState />
+            )}
+          </>
+        )}
+
+        {activeTab === 'workersai' && data?.workersAI && (
+          hasWorkersAIData ? (
+            <ModelTable models={data.workersAI.models} type="workersai" />
+          ) : (
+            <EmptyState />
+          )
+        )}
+      </div>
+    </div>
+  );
+}