@mimicai/explorer 0.7.1

package/src/lib/group-endpoints.ts

@@ -0,0 +1,35 @@
+type Endpoint = { method: string; path: string; description: string };
+
+export interface EndpointGroup {
+  label: string;
+  endpoints: Endpoint[];
+}
+
+/**
+ * Groups endpoints by their top-level resource segment.
+ * e.g. /stripe/v1/customers/:id → "customers"
+ *      /stripe/v1/accounts/:account/bank_accounts → "accounts"
+ */
+export function groupEndpoints(endpoints: Endpoint[], basePath: string): EndpointGroup[] {
+  const map = new Map<string, Endpoint[]>();
+
+  for (const ep of endpoints) {
+    // Strip the basePath prefix, then extract the first segment
+    let rest = ep.path;
+    if (rest.startsWith(basePath)) {
+      rest = rest.slice(basePath.length);
+    }
+    // Remove leading slash and version prefix (e.g. "v1/")
+    rest = rest.replace(/^\//, '').replace(/^v\d+\//, '');
+    // First segment is the resource group
+    const seg = rest.split('/')[0] || 'other';
+    const key = seg.replace(/^:/, '');
+
+    if (!map.has(key)) map.set(key, []);
+    map.get(key)!.push(ep);
+  }
+
+  return Array.from(map.entries())
+    .sort(([a], [b]) => a.localeCompare(b))
+    .map(([label, endpoints]) => ({ label, endpoints }));
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { App } from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

package/src/pages/adapter-view.tsx

@@ -0,0 +1,128 @@
+import { useState, useMemo } from 'react';
+import { cn } from '@/lib/utils';
+import type { AdapterInfo } from '@/lib/api';
+import type { Page } from '@/App';
+import { groupEndpoints } from '@/lib/group-endpoints';
+
+interface AdapterViewProps {
+  adapter: AdapterInfo;
+  onNavigate: (page: Page) => void;
+}
+
+const METHOD_COLORS: Record<string, string> = {
+  GET: 'bg-blue-500/10 text-blue-500',
+  POST: 'bg-emerald-500/10 text-emerald-500',
+  PUT: 'bg-amber-500/10 text-amber-500',
+  PATCH: 'bg-orange-500/10 text-orange-500',
+  DELETE: 'bg-red-500/10 text-red-500',
+};
+
+export function AdapterView({ adapter, onNavigate }: AdapterViewProps) {
+  const groups = useMemo(() => groupEndpoints(adapter.endpoints, adapter.basePath), [adapter]);
+  const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
+
+  const toggle = (group: string) =>
+    setCollapsed((prev) => ({ ...prev, [group]: !prev[group] }));
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-start justify-between">
+        <div>
+          <h1 className="text-2xl font-bold">{adapter.name}</h1>
+          <p className="mt-1 text-muted-foreground">{adapter.description}</p>
+          <div className="mt-3 flex items-center gap-4 text-sm text-muted-foreground">
+            <span className="font-mono">@mimicai/adapter-{adapter.id}</span>
+            {adapter.port && <span>Port: {adapter.port}</span>}
+            {adapter.versions.length > 0 && (
+              <span>Versions: {adapter.versions.join(', ')}</span>
+            )}
+          </div>
+        </div>
+        <button
+          onClick={() => onNavigate({ type: 'tester', adapterId: adapter.id })}
+          className={cn(
+            'rounded-md border bg-primary px-4 py-2 text-sm font-medium text-primary-foreground',
+            'hover:bg-primary/90 transition-colors',
+          )}
+        >
+          Test Endpoints
+        </button>
+      </div>
+
+      {/* Endpoints grouped */}
+      <div>
+        <h2 className="mb-3 text-lg font-semibold">
+          Endpoints ({adapter.endpoints.length})
+        </h2>
+        <div className="space-y-2">
+          {groups.map(({ label, endpoints }) => {
+            const isCollapsed = collapsed[label] ?? false;
+            return (
+              <div key={label} className="rounded-lg border">
+                <button
+                  onClick={() => toggle(label)}
+                  className="flex w-full items-center gap-2 px-4 py-2.5 text-left hover:bg-muted/30 transition-colors"
+                >
+                  <span className={cn(
+                    'text-muted-foreground transition-transform text-xs',
+                    isCollapsed ? '' : 'rotate-90',
+                  )}>
+                    ▶
+                  </span>
+                  <span className="font-medium text-sm">{label}</span>
+                  <span className="ml-auto text-xs text-muted-foreground">
+                    {endpoints.length} endpoint{endpoints.length !== 1 ? 's' : ''}
+                  </span>
+                </button>
+                {!isCollapsed && (
+                  <table className="w-full">
+                    <tbody>
+                      {endpoints.map((ep, i) => (
+                        <tr
+                          key={i}
+                          className={cn(
+                            'transition-colors hover:bg-muted/30 border-t',
+                          )}
+                        >
+                          <td className="px-4 py-2.5 w-24">
+                            <span
+                              className={cn(
+                                'inline-block rounded px-2 py-0.5 text-xs font-bold',
+                                METHOD_COLORS[ep.method] ?? 'bg-muted text-muted-foreground',
+                              )}
+                            >
+                              {ep.method}
+                            </span>
+                          </td>
+                          <td className="px-4 py-2.5 font-mono text-sm">{ep.path}</td>
+                          <td className="px-4 py-2.5 text-sm text-muted-foreground">
+                            {ep.description}
+                          </td>
+                          <td className="px-4 py-2.5 text-right w-20">
+                            <button
+                              onClick={() =>
+                                onNavigate({
+                                  type: 'tester',
+                                  adapterId: adapter.id,
+                                  endpoint: { method: ep.method, path: ep.path },
+                                })
+                              }
+                              className="text-xs text-primary hover:underline"
+                            >
+                              Try it
+                            </button>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/pages/dashboard.tsx

@@ -0,0 +1,134 @@
+import { cn } from '@/lib/utils';
+import type { ExplorerConfig, AdapterInfo, PersonaDataSummary } from '@/lib/api';
+import type { Page } from '@/App';
+
+interface DashboardProps {
+  config: ExplorerConfig;
+  adapters: AdapterInfo[];
+  dataSummary: PersonaDataSummary[];
+  onNavigate: (page: Page) => void;
+}
+
+export function Dashboard({ config, adapters, dataSummary, onNavigate }: DashboardProps) {
+  const totalEndpoints = adapters.reduce((s, a) => s + a.endpoints.length, 0);
+  const totalEntities = dataSummary.reduce(
+    (s, ps) =>
+      s +
+      Object.values(ps.tables).reduce((s2, n) => s2 + n, 0) +
+      Object.values(ps.apis).reduce(
+        (s2, resources) => s2 + Object.values(resources).reduce((s3, n) => s3 + n, 0),
+        0,
+      ),
+    0,
+  );
+
+  return (
+    <div className="space-y-8">
+      {/* Stats */}
+      <div className="grid grid-cols-4 gap-4">
+        <StatCard label="Adapters" value={adapters.length} />
+        <StatCard label="Endpoints" value={totalEndpoints} />
+        <StatCard label="Personas" value={dataSummary.length} />
+        <StatCard label="Total Entities" value={totalEntities} />
+      </div>
+
+      {/* Adapters grid */}
+      <div>
+        <h2 className="mb-4 text-lg font-semibold">API Adapters</h2>
+        <div className="grid grid-cols-3 gap-4">
+          {adapters.map((adapter) => (
+            <button
+              key={adapter.id}
+              onClick={() => onNavigate({ type: 'adapter', adapterId: adapter.id })}
+              className={cn(
+                'rounded-lg border bg-card p-4 text-left transition-colors',
+                'hover:border-primary/30 hover:bg-accent',
+              )}
+            >
+              <div className="flex items-center justify-between mb-2">
+                <span className="font-semibold">{adapter.name}</span>
+                <span
+                  className={cn(
+                    'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
+                    adapter.enabled
+                      ? 'bg-emerald-500/10 text-emerald-500'
+                      : 'bg-zinc-500/10 text-zinc-500',
+                  )}
+                >
+                  {adapter.enabled ? 'active' : 'disabled'}
+                </span>
+              </div>
+              <p className="text-sm text-muted-foreground line-clamp-2 mb-3">
+                {adapter.description}
+              </p>
+              <div className="flex items-center gap-4 text-xs text-muted-foreground">
+                <span>{adapter.endpoints.length} endpoints</span>
+                {adapter.port && <span>:{adapter.port}</span>}
+              </div>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Persona data overview */}
+      {dataSummary.length > 0 && (
+        <div>
+          <h2 className="mb-4 text-lg font-semibold">Persona Data</h2>
+          <div className="grid grid-cols-2 gap-4">
+            {dataSummary.map((ps) => (
+              <button
+                key={ps.persona}
+                onClick={() => onNavigate({ type: 'data', persona: ps.persona })}
+                className={cn(
+                  'rounded-lg border bg-card p-4 text-left transition-colors',
+                  'hover:border-primary/30 hover:bg-accent',
+                )}
+              >
+                <div className="font-semibold mb-3">{ps.persona}</div>
+
+                {Object.keys(ps.tables).length > 0 && (
+                  <div className="mb-2">
+                    <div className="text-xs font-medium text-muted-foreground mb-1">Database Tables</div>
+                    <div className="flex flex-wrap gap-2">
+                      {Object.entries(ps.tables).map(([table, count]) => (
+                        <span key={table} className="inline-flex items-center gap-1 rounded bg-muted px-2 py-0.5 text-xs">
+                          <span className="text-muted-foreground">{table}</span>
+                          <span className="font-mono font-medium">{count}</span>
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {Object.keys(ps.apis).length > 0 && (
+                  <div>
+                    <div className="text-xs font-medium text-muted-foreground mb-1">API Resources</div>
+                    <div className="flex flex-wrap gap-2">
+                      {Object.entries(ps.apis).map(([adapterId, resources]) =>
+                        Object.entries(resources).map(([resource, count]) => (
+                          <span key={`${adapterId}-${resource}`} className="inline-flex items-center gap-1 rounded bg-muted px-2 py-0.5 text-xs">
+                            <span className="text-muted-foreground">{adapterId}/{resource}</span>
+                            <span className="font-mono font-medium">{count}</span>
+                          </span>
+                        )),
+                      )}
+                    </div>
+                  </div>
+                )}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function StatCard({ label, value }: { label: string; value: number }) {
+  return (
+    <div className="rounded-lg border bg-card p-4">
+      <div className="text-sm text-muted-foreground">{label}</div>
+      <div className="mt-1 text-3xl font-bold tracking-tight">{value}</div>
+    </div>
+  );
+}

package/src/pages/data-view.tsx

@@ -0,0 +1,202 @@
+import { useEffect, useState } from 'react';
+import { cn } from '@/lib/utils';
+import type { PersonaDataSummary, DataResponse } from '@/lib/api';
+import { JsonViewer } from '@/components/explorer/json-viewer';
+
+interface DataViewProps {
+  persona: string;
+  source?: string;
+  resource?: string;
+  dataSummary: PersonaDataSummary[];
+  loadPersonaData: (persona: string) => Promise<DataResponse>;
+}
+
+export function DataView({ persona, dataSummary, loadPersonaData }: DataViewProps) {
+  const [data, setData] = useState<DataResponse | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [selectedSource, setSelectedSource] = useState<string | null>(null);
+  const [selectedResource, setSelectedResource] = useState<string | null>(null);
+
+  useEffect(() => {
+    setLoading(true);
+    loadPersonaData(persona).then((d) => {
+      setData(d);
+      setLoading(false);
+    });
+  }, [persona]);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <span className="text-muted-foreground">Loading data...</span>
+      </div>
+    );
+  }
+
+  if (!data) return null;
+
+  // Build navigation tree
+  const sources: Array<{
+    id: string;
+    label: string;
+    type: 'table' | 'api';
+    resources: Array<{ id: string; label: string; count: number }>;
+  }> = [];
+
+  // DB tables
+  if (Object.keys(data.tables).length > 0) {
+    sources.push({
+      id: 'database',
+      label: 'Database',
+      type: 'table',
+      resources: Object.entries(data.tables).map(([name, rows]) => ({
+        id: name,
+        label: name,
+        count: (rows as unknown[]).length,
+      })),
+    });
+  }
+
+  // API adapters
+  for (const [adapterId, responseSet] of Object.entries(data.apiResponses)) {
+    const resources = Object.entries(responseSet.responses)
+      .filter(([, arr]) => (arr as unknown[]).length > 0)
+      .map(([resource, arr]) => ({
+        id: resource,
+        label: resource,
+        count: (arr as unknown[]).length,
+      }));
+    if (resources.length > 0) {
+      sources.push({ id: adapterId, label: adapterId, type: 'api', resources });
+    }
+  }
+
+  const activeSource = selectedSource ?? sources[0]?.id ?? null;
+  const sourceObj = sources.find((s) => s.id === activeSource);
+  const activeResource = selectedResource ?? sourceObj?.resources[0]?.id ?? null;
+
+  const getActiveData = (): unknown[] => {
+    if (!sourceObj || !activeResource) return [];
+    if (sourceObj.type === 'table') {
+      return (data.tables[activeResource] as unknown[]) ?? [];
+    }
+    return (data.apiResponses[activeSource!]?.responses[activeResource] as unknown[]) ?? [];
+  };
+
+  const activeData = getActiveData();
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold">{persona}</h1>
+        <p className="text-muted-foreground mt-1">
+          Generated data for this persona across all configured surfaces.
+        </p>
+      </div>
+
+      {/* Facts */}
+      {data.facts && data.facts.length > 0 && (
+        <div>
+          <h2 className="mb-3 text-lg font-semibold">Facts ({data.facts.length})</h2>
+          <div className="grid grid-cols-2 gap-3">
+            {data.facts.map((fact) => (
+              <div
+                key={fact.id}
+                className={cn(
+                  'rounded-lg border p-3',
+                  fact.severity === 'critical' && 'border-red-500/30 bg-red-500/5',
+                  fact.severity === 'warn' && 'border-amber-500/30 bg-amber-500/5',
+                  fact.severity === 'info' && 'border-blue-500/30 bg-blue-500/5',
+                )}
+              >
+                <div className="flex items-center gap-2 mb-1">
+                  <span
+                    className={cn(
+                      'text-xs font-medium rounded px-1.5 py-0.5',
+                      fact.severity === 'critical' && 'bg-red-500/10 text-red-500',
+                      fact.severity === 'warn' && 'bg-amber-500/10 text-amber-500',
+                      fact.severity === 'info' && 'bg-blue-500/10 text-blue-500',
+                    )}
+                  >
+                    {fact.severity}
+                  </span>
+                  <span className="text-xs text-muted-foreground">{fact.platform}</span>
+                  <span className="text-xs text-muted-foreground">{fact.type}</span>
+                </div>
+                <p className="text-sm">{fact.detail}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Source / Resource navigation + data viewer */}
+      <div className="flex gap-4 min-h-[500px]">
+        {/* Source tree */}
+        <div className="w-56 shrink-0 space-y-2">
+          {sources.map((source) => (
+            <div key={source.id}>
+              <div
+                className={cn(
+                  'px-2 py-1 text-xs font-semibold uppercase tracking-wider cursor-pointer rounded',
+                  activeSource === source.id
+                    ? 'text-foreground'
+                    : 'text-muted-foreground hover:text-foreground',
+                )}
+                onClick={() => {
+                  setSelectedSource(source.id);
+                  setSelectedResource(source.resources[0]?.id ?? null);
+                }}
+              >
+                {source.label}
+                <span className="ml-1.5 font-normal normal-case">
+                  ({source.type === 'api' ? 'api' : 'db'})
+                </span>
+              </div>
+              {activeSource === source.id && (
+                <div className="ml-2 mt-1 space-y-0.5">
+                  {source.resources.map((res) => (
+                    <button
+                      key={res.id}
+                      onClick={() => setSelectedResource(res.id)}
+                      className={cn(
+                        'flex w-full items-center justify-between rounded px-2 py-1 text-sm transition-colors',
+                        activeResource === res.id
+                          ? 'bg-accent text-accent-foreground'
+                          : 'text-muted-foreground hover:bg-accent/50',
+                      )}
+                    >
+                      <span className="truncate">{res.label}</span>
+                      <span className="text-xs font-mono">{res.count}</span>
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+
+        {/* Data panel */}
+        <div className="flex-1 rounded-lg border bg-card overflow-hidden">
+          <div className="flex items-center justify-between border-b bg-muted/50 px-4 py-2">
+            <span className="text-sm font-medium">
+              {activeResource ?? 'Select a resource'}
+            </span>
+            <span className="text-xs text-muted-foreground">
+              {activeData.length} {activeData.length === 1 ? 'record' : 'records'}
+            </span>
+          </div>
+          <div className="overflow-auto max-h-[600px] p-4">
+            {activeData.length > 0 ? (
+              <JsonViewer data={activeData} />
+            ) : (
+              <div className="text-center text-muted-foreground py-12">
+                No data available
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}