@mimicai/explorer 0.7.1

package/src/App.tsx

@@ -0,0 +1,116 @@
+import { useEffect, useState } from 'react';
+import { api, type ExplorerConfig, type AdapterInfo, type PersonaDataSummary, type DataResponse } from './lib/api';
+import { Sidebar } from './components/layout/sidebar';
+import { Header } from './components/layout/header';
+import { Dashboard } from './pages/dashboard';
+import { AdapterView } from './pages/adapter-view';
+import { DataView } from './pages/data-view';
+import { EndpointTester } from './pages/endpoint-tester';
+
+export type Page =
+  | { type: 'dashboard' }
+  | { type: 'adapter'; adapterId: string }
+  | { type: 'data'; persona: string; source?: string; resource?: string }
+  | { type: 'tester'; adapterId: string; endpoint?: { method: string; path: string } };
+
+export function App() {
+  const [config, setConfig] = useState<ExplorerConfig | null>(null);
+  const [adapters, setAdapters] = useState<AdapterInfo[]>([]);
+  const [dataSummary, setDataSummary] = useState<PersonaDataSummary[]>([]);
+  const [personaData, setPersonaData] = useState<Record<string, DataResponse>>({});
+  const [page, setPage] = useState<Page>({ type: 'dashboard' });
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    Promise.all([api.getConfig(), api.getAdapters(), api.getDataSummary()])
+      .then(([cfg, adp, data]) => {
+        setConfig(cfg);
+        setAdapters(adp);
+        setDataSummary(data);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setError(err.message);
+        setLoading(false);
+      });
+  }, []);
+
+  const loadPersonaData = async (persona: string) => {
+    if (personaData[persona]) return personaData[persona];
+    const data = await api.getPersonaData(persona);
+    setPersonaData((prev) => ({ ...prev, [persona]: data }));
+    return data;
+  };
+
+  if (loading) {
+    return (
+      <div className="flex h-screen items-center justify-center">
+        <div className="text-center">
+          <div className="mb-4 text-4xl font-bold tracking-tight">mimic</div>
+          <div className="text-muted-foreground">Loading explorer...</div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex h-screen items-center justify-center">
+        <div className="text-center max-w-md">
+          <div className="mb-4 text-4xl font-bold tracking-tight text-destructive">Error</div>
+          <div className="text-muted-foreground mb-4">{error}</div>
+          <div className="text-sm text-muted-foreground">
+            Make sure <code className="bg-muted px-1 py-0.5 rounded">mimic host</code> is running first.
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-screen overflow-hidden">
+      <Sidebar
+        config={config!}
+        adapters={adapters}
+        dataSummary={dataSummary}
+        page={page}
+        onNavigate={setPage}
+      />
+      <div className="flex flex-1 flex-col overflow-hidden">
+        <Header config={config!} page={page} onNavigate={setPage} />
+        <main className="flex-1 overflow-auto p-6">
+          {page.type === 'dashboard' && (
+            <Dashboard
+              config={config!}
+              adapters={adapters}
+              dataSummary={dataSummary}
+              onNavigate={setPage}
+            />
+          )}
+          {page.type === 'adapter' && (
+            <AdapterView
+              adapter={adapters.find((a) => a.id === page.adapterId)!}
+              onNavigate={setPage}
+            />
+          )}
+          {page.type === 'data' && (
+            <DataView
+              persona={page.persona}
+              source={page.source}
+              resource={page.resource}
+              dataSummary={dataSummary}
+              loadPersonaData={loadPersonaData}
+            />
+          )}
+          {page.type === 'tester' && (
+            <EndpointTester
+              adapter={adapters.find((a) => a.id === page.adapterId)!}
+              initialEndpoint={page.endpoint}
+            />
+          )}
+        </main>
+      </div>
+    </div>
+  );
+}

package/src/components/explorer/json-viewer.tsx

@@ -0,0 +1,241 @@
+import { useState } from 'react';
+import { cn } from '@/lib/utils';
+
+interface JsonViewerProps {
+  data: unknown;
+  initialExpanded?: boolean;
+}
+
+export function JsonViewer({ data, initialExpanded = true }: JsonViewerProps) {
+  if (Array.isArray(data) && data.length > 0 && typeof data[0] === 'object' && data[0] !== null) {
+    return <TableView data={data as Record<string, unknown>[]}/>;
+  }
+  return (
+    <pre className="text-sm font-mono leading-relaxed">
+      <JsonNode value={data} depth={0} initialExpanded={initialExpanded} />
+    </pre>
+  );
+}
+
+function TableView({ data }: { data: Record<string, unknown>[] }) {
+  const [expanded, setExpanded] = useState<number | null>(null);
+
+  // Get column keys from first few items
+  const allKeys = new Set<string>();
+  data.slice(0, 10).forEach((item) => Object.keys(item).forEach((k) => allKeys.add(k)));
+  const columns = Array.from(allKeys).slice(0, 8);
+  const hasMore = allKeys.size > 8;
+
+  return (
+    <div className="space-y-2">
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="border-b">
+              <th className="px-2 py-1.5 text-left text-xs font-medium text-muted-foreground w-8">#</th>
+              {columns.map((col) => (
+                <th key={col} className="px-2 py-1.5 text-left text-xs font-medium text-muted-foreground">
+                  {col}
+                </th>
+              ))}
+              {hasMore && (
+                <th className="px-2 py-1.5 text-left text-xs font-medium text-muted-foreground">...</th>
+              )}
+            </tr>
+          </thead>
+          <tbody>
+            {data.map((row, i) => (
+              <>
+                <tr
+                  key={i}
+                  onClick={() => setExpanded(expanded === i ? null : i)}
+                  className={cn(
+                    'cursor-pointer transition-colors border-b border-border/50',
+                    'hover:bg-muted/30',
+                    expanded === i && 'bg-muted/50',
+                  )}
+                >
+                  <td className="px-2 py-1.5 text-xs text-muted-foreground">{i + 1}</td>
+                  {columns.map((col) => (
+                    <td key={col} className="px-2 py-1.5 font-mono text-xs max-w-[200px] truncate">
+                      <CellValue value={row[col]} />
+                    </td>
+                  ))}
+                  {hasMore && <td className="px-2 py-1.5 text-xs text-muted-foreground">...</td>}
+                </tr>
+                {expanded === i && (
+                  <tr key={`${i}-expanded`}>
+                    <td colSpan={columns.length + (hasMore ? 2 : 1)} className="p-3 bg-muted/20">
+                      <pre className="text-xs font-mono whitespace-pre-wrap">
+                        <JsonNode value={row} depth={0} initialExpanded={true} />
+                      </pre>
+                    </td>
+                  </tr>
+                )}
+              </>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      {data.length > 100 && (
+        <div className="text-xs text-muted-foreground text-center py-2">
+          Showing all {data.length} records
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Full pretty-printed JSON with syntax highlighting — used for API responses.
+ */
+export function RawJsonViewer({ data }: { data: unknown }) {
+  const json = JSON.stringify(data, null, 2) ?? '';
+  return (
+    <pre className="text-sm font-mono leading-relaxed whitespace-pre-wrap break-all">
+      {json.split('\n').map((line, i) => (
+        <span key={i}>
+          {highlightJsonLine(line)}
+          {'\n'}
+        </span>
+      ))}
+    </pre>
+  );
+}
+
+function highlightJsonLine(line: string): React.ReactNode {
+  // Match key-value patterns in JSON
+  const kvMatch = line.match(/^(\s*)"([^"]+)":\s*(.*)/);
+  if (kvMatch) {
+    const [, indent, key, rest] = kvMatch;
+    return (
+      <>
+        {indent}<span className="json-key">"{key}"</span>: {highlightValue(rest)}
+      </>
+    );
+  }
+  // Standalone value (array element)
+  const valMatch = line.match(/^(\s*)(.*)/);
+  if (valMatch) {
+    const [, indent, val] = valMatch;
+    return <>{indent}{highlightValue(val)}</>;
+  }
+  return line;
+}
+
+function highlightValue(val: string): React.ReactNode {
+  const trimmed = val.replace(/,\s*$/, '');
+  const comma = val.endsWith(',') ? ',' : '';
+
+  if (trimmed === 'null') return <><span className="json-null">null</span>{comma}</>;
+  if (trimmed === 'true' || trimmed === 'false') return <><span className="json-boolean">{trimmed}</span>{comma}</>;
+  if (/^-?\d/.test(trimmed)) return <><span className="json-number">{trimmed}</span>{comma}</>;
+  if (trimmed.startsWith('"')) return <><span className="json-string">{trimmed}</span>{comma}</>;
+  return <>{val}</>;
+}
+
+function CellValue({ value }: { value: unknown }) {
+  if (value === null || value === undefined) {
+    return <span className="json-null">null</span>;
+  }
+  if (typeof value === 'boolean') {
+    return <span className="json-boolean">{String(value)}</span>;
+  }
+  if (typeof value === 'number') {
+    return <span className="json-number">{value}</span>;
+  }
+  if (typeof value === 'string') {
+    if (value.length > 40) return <span className="json-string" title={value}>{value.slice(0, 37)}...</span>;
+    return <span className="json-string">{value}</span>;
+  }
+  if (typeof value === 'object') {
+    return <span className="text-muted-foreground">{Array.isArray(value) ? `[${value.length}]` : '{...}'}</span>;
+  }
+  return <span>{String(value)}</span>;
+}
+
+function JsonNode({
+  value,
+  depth,
+  initialExpanded,
+}: {
+  value: unknown;
+  depth: number;
+  initialExpanded: boolean;
+}) {
+  const [isExpanded, setIsExpanded] = useState(initialExpanded && depth < 4);
+
+  if (value === null) return <span className="json-null">null</span>;
+  if (value === undefined) return <span className="json-null">undefined</span>;
+  if (typeof value === 'boolean') return <span className="json-boolean">{String(value)}</span>;
+  if (typeof value === 'number') return <span className="json-number">{value}</span>;
+  if (typeof value === 'string') return <span className="json-string">"{value}"</span>;
+
+  if (Array.isArray(value)) {
+    if (value.length === 0) return <span>{'[]'}</span>;
+    const indent = '  '.repeat(depth);
+    const childIndent = '  '.repeat(depth + 1);
+
+    return (
+      <span>
+        <span
+          className="cursor-pointer hover:text-primary"
+          onClick={() => setIsExpanded(!isExpanded)}
+        >
+          {isExpanded ? '[' : `[${value.length} items]`}
+        </span>
+        {isExpanded && (
+          <>
+            {'\n'}
+            {value.map((item, i) => (
+              <span key={i}>
+                {childIndent}
+                <JsonNode value={item} depth={depth + 1} initialExpanded={initialExpanded} />
+                {i < value.length - 1 ? ',' : ''}
+                {'\n'}
+              </span>
+            ))}
+            {indent}]
+          </>
+        )}
+      </span>
+    );
+  }
+
+  if (typeof value === 'object') {
+    const entries = Object.entries(value as Record<string, unknown>);
+    if (entries.length === 0) return <span>{'{}'}</span>;
+    const indent = '  '.repeat(depth);
+    const childIndent = '  '.repeat(depth + 1);
+
+    return (
+      <span>
+        <span
+          className="cursor-pointer hover:text-primary"
+          onClick={() => setIsExpanded(!isExpanded)}
+        >
+          {isExpanded ? '{' : `{${entries.length} keys}`}
+        </span>
+        {isExpanded && (
+          <>
+            {'\n'}
+            {entries.map(([key, val], i) => (
+              <span key={key}>
+                {childIndent}
+                <span className="json-key">"{key}"</span>
+                {': '}
+                <JsonNode value={val} depth={depth + 1} initialExpanded={initialExpanded} />
+                {i < entries.length - 1 ? ',' : ''}
+                {'\n'}
+              </span>
+            ))}
+            {indent}
+            {'}'}
+          </>
+        )}
+      </span>
+    );
+  }
+
+  return <span>{String(value)}</span>;
+}

package/src/components/layout/header.tsx

@@ -0,0 +1,57 @@
+import type { ExplorerConfig } from '@/lib/api';
+import type { Page } from '@/App';
+
+interface HeaderProps {
+  config: ExplorerConfig;
+  page: Page;
+  onNavigate: (page: Page) => void;
+}
+
+export function Header({ config, page, onNavigate }: HeaderProps) {
+  const breadcrumbs = getBreadcrumbs(page);
+
+  return (
+    <header className="flex h-14 items-center justify-between border-b px-6">
+      <div className="flex items-center gap-2 text-sm">
+        {breadcrumbs.map((crumb, i) => (
+          <span key={i} className="flex items-center gap-2">
+            {i > 0 && <span className="text-muted-foreground">/</span>}
+            {crumb.onClick ? (
+              <button
+                onClick={crumb.onClick}
+                className="text-muted-foreground hover:text-foreground transition-colors"
+              >
+                {crumb.label}
+              </button>
+            ) : (
+              <span className="font-medium">{crumb.label}</span>
+            )}
+          </span>
+        ))}
+      </div>
+      <div className="flex items-center gap-3">
+        <span className="text-xs font-mono text-muted-foreground">
+          {config.domain}
+        </span>
+      </div>
+    </header>
+  );
+}
+
+function getBreadcrumbs(page: Page): Array<{ label: string; onClick?: () => void }> {
+  switch (page.type) {
+    case 'dashboard':
+      return [{ label: 'Dashboard' }];
+    case 'adapter':
+      return [{ label: 'Adapters' }, { label: page.adapterId }];
+    case 'data':
+      return [
+        { label: 'Data' },
+        { label: page.persona },
+        ...(page.source ? [{ label: page.source }] : []),
+        ...(page.resource ? [{ label: page.resource }] : []),
+      ];
+    case 'tester':
+      return [{ label: 'Adapters' }, { label: page.adapterId }, { label: 'Test' }];
+  }
+}

package/src/components/layout/sidebar.tsx

@@ -0,0 +1,132 @@
+import { cn } from '@/lib/utils';
+import type { ExplorerConfig, AdapterInfo, PersonaDataSummary } from '@/lib/api';
+import type { Page } from '@/App';
+
+interface SidebarProps {
+  config: ExplorerConfig;
+  adapters: AdapterInfo[];
+  dataSummary: PersonaDataSummary[];
+  page: Page;
+  onNavigate: (page: Page) => void;
+}
+
+export function Sidebar({ config, adapters, dataSummary, page, onNavigate }: SidebarProps) {
+  return (
+    <aside className="flex w-64 flex-col border-r bg-card">
+      {/* Logo */}
+      <div
+        className="flex h-14 items-center gap-2 border-b px-4 cursor-pointer"
+        onClick={() => onNavigate({ type: 'dashboard' })}
+      >
+        <span className="text-xl font-bold tracking-tight">mimic</span>
+        <span className="text-xs text-muted-foreground font-mono">explorer</span>
+      </div>
+
+      <nav className="flex-1 overflow-auto p-3 space-y-6">
+        {/* Adapters */}
+        <div>
+          <div className="mb-2 px-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+            API Adapters
+          </div>
+          <div className="space-y-0.5">
+            {adapters.map((adapter) => (
+              <button
+                key={adapter.id}
+                onClick={() => onNavigate({ type: 'adapter', adapterId: adapter.id })}
+                className={cn(
+                  'flex w-full items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors',
+                  'hover:bg-accent hover:text-accent-foreground',
+                  page.type === 'adapter' && page.adapterId === adapter.id
+                    ? 'bg-accent text-accent-foreground'
+                    : 'text-muted-foreground',
+                )}
+              >
+                <span className="truncate">{adapter.name}</span>
+                <span className="flex items-center gap-1.5">
+                  <span className="text-xs text-muted-foreground">{adapter.endpoints.length}</span>
+                  <span
+                    className={cn(
+                      'h-2 w-2 rounded-full',
+                      adapter.enabled ? 'bg-emerald-500' : 'bg-zinc-500',
+                    )}
+                  />
+                </span>
+              </button>
+            ))}
+            {adapters.length === 0 && (
+              <div className="px-2 py-3 text-xs text-muted-foreground">
+                No adapters configured
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Persona Data */}
+        <div>
+          <div className="mb-2 px-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+            Persona Data
+          </div>
+          <div className="space-y-0.5">
+            {dataSummary.map((ps) => {
+              const totalEntities = Object.values(ps.tables).reduce((s, n) => s + n, 0)
+                + Object.values(ps.apis).reduce(
+                    (s, resources) => s + Object.values(resources).reduce((s2, n) => s2 + n, 0),
+                    0,
+                  );
+
+              return (
+                <button
+                  key={ps.persona}
+                  onClick={() => onNavigate({ type: 'data', persona: ps.persona })}
+                  className={cn(
+                    'flex w-full items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors',
+                    'hover:bg-accent hover:text-accent-foreground',
+                    page.type === 'data' && page.persona === ps.persona
+                      ? 'bg-accent text-accent-foreground'
+                      : 'text-muted-foreground',
+                  )}
+                >
+                  <span className="truncate">{ps.persona}</span>
+                  <span className="text-xs text-muted-foreground">{totalEntities}</span>
+                </button>
+              );
+            })}
+            {dataSummary.length === 0 && (
+              <div className="px-2 py-3 text-xs text-muted-foreground">
+                No data generated yet. Run <code className="bg-muted px-1 rounded">mimic run</code>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Databases */}
+        {config.databases && Object.keys(config.databases).length > 0 && (
+          <div>
+            <div className="mb-2 px-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+              Databases
+            </div>
+            <div className="space-y-0.5">
+              {Object.entries(config.databases).map(([name, db]) => (
+                <div
+                  key={name}
+                  className="flex items-center justify-between rounded-md px-2 py-1.5 text-sm text-muted-foreground"
+                >
+                  <span className="truncate">{name}</span>
+                  <span className="text-xs font-mono">{db.type}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </nav>
+
+      {/* Footer */}
+      <div className="border-t p-3">
+        <div className="text-xs text-muted-foreground">
+          <div>{config.llm.provider} / {config.llm.model}</div>
+          <div className="mt-0.5">{config.domain}</div>
+        </div>
+      </div>
+    </aside>
+  );
+}

package/src/index.css

@@ -0,0 +1,69 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+    --radius: 0.5rem;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* JSON syntax highlighting */
+.json-key { color: hsl(210 80% 65%); }
+.json-string { color: hsl(120 50% 60%); }
+.json-number { color: hsl(35 90% 65%); }
+.json-boolean { color: hsl(280 60% 70%); }
+.json-null { color: hsl(0 0% 50%); }
+
+/* Scrollbar styling */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: hsl(var(--muted)); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground)); }

package/src/lib/api.ts

@@ -0,0 +1,57 @@
+const BASE = '/_api';
+
+export interface ExplorerConfig {
+  domain: string;
+  personas: Array<{ name: string; description: string; blueprint?: string }>;
+  llm: { provider: string; model: string };
+  apis: Record<string, { adapter?: string; enabled?: boolean; port?: number; mcp?: boolean }>;
+  databases: Record<string, { type: string; url?: string }>;
+}
+
+export interface AdapterInfo {
+  id: string;
+  name: string;
+  description: string;
+  type: string;
+  basePath: string;
+  versions: string[];
+  endpoints: Array<{ method: string; path: string; description: string }>;
+  enabled: boolean;
+  port?: number;
+}
+
+export interface PersonaDataSummary {
+  persona: string;
+  tables: Record<string, number>;
+  apis: Record<string, Record<string, number>>;
+}
+
+export interface DataResponse {
+  persona: string;
+  tables: Record<string, unknown[]>;
+  apiResponses: Record<string, { responses: Record<string, unknown[]> }>;
+  facts: Array<{ id: string; type: string; platform: string; severity: string; detail: string }>;
+}
+
+async function fetchJson<T>(path: string): Promise<T> {
+  const res = await fetch(`${BASE}${path}`);
+  if (!res.ok) throw new Error(`API error: ${res.status} ${res.statusText}`);
+  return res.json();
+}
+
+export const api = {
+  getConfig: () => fetchJson<ExplorerConfig>('/config'),
+  getAdapters: () => fetchJson<AdapterInfo[]>('/adapters'),
+  getDataSummary: () => fetchJson<PersonaDataSummary[]>('/data'),
+  getPersonaData: (persona: string) => fetchJson<DataResponse>(`/data/${persona}`),
+  testEndpoint: (port: number, method: string, path: string, body?: unknown) =>
+    fetch(`http://localhost:${port}${path}`, {
+      method,
+      headers: { 'Content-Type': 'application/json' },
+      ...(body ? { body: JSON.stringify(body) } : {}),
+    }).then(async (res) => ({
+      status: res.status,
+      headers: Object.fromEntries(res.headers.entries()),
+      body: await res.json().catch(() => res.text()),
+    })),
+};