import { Hono } from "hono";
import { readFileSync } from "fs";
import { basename } from "path";
import open from "open";
import { z } from "zod";
import type { OntologyConfig, ResolverContext, EnvironmentConfig } from "../config/types.js";
import type { OntologyDiff } from "../lockfile/types.js";
import { writeLockfile } from "../lockfile/index.js";
import { serve, findAvailablePort } from "../runtime/index.js";
import { transformToGraphData, enhanceWithDiff, searchNodes, getNodeDetails, type EnhancedGraphData } from "./transform.js";
import { getFieldFromMetadata, hasUserContextMetadata, hasOrganizationContextMetadata } from "../config/categorical.js";
import { isZodObject, isZodOptional, isZodNullable, isZodDefault, isZodArray, getObjectShape, getInnerSchema, getArrayElement } from "../config/zod-utils.js";
import { browserAppHtml } from "./browser-app.js";

export interface BrowserServerOptions {
  config: OntologyConfig;
  /** Diff data for review mode (null = browse-only, no changes) */
  diff?: OntologyDiff | null;
  /** Directory to write the lockfile to on approval */
  configDir?: string;
  /** Path to the ontology.config.ts file */
  configPath?: string;
  port?: number;
  openBrowser?: boolean;
  /** If true, resolve immediately after starting (don't wait for approval). Useful for background review UI. */
  background?: boolean;
}

export interface BrowserServerResult {
  /** Whether changes were approved (only set if there were changes) */
  approved?: boolean;
}

/** Field info for form generation */
interface FieldInfo {
  name: string;
  type: string;
  required: boolean;
  isUserContext: boolean;
  isOrganizationContext: boolean;
  fieldFrom?: string;
  isQueryBased?: boolean;
  schema: Record<string, unknown>;
  innerSchema?: Record<string, unknown>;
}

/** Analyze a Zod input schema for form generation */
function analyzeInputSchema(schema: z.ZodTypeAny, functions?: Record<string, { inputs: z.ZodTypeAny }>): FieldInfo[] {
  const fields: FieldInfo[] = [];

  if (!isZodObject(schema)) {
    return fields;
  }

  const shape = getObjectShape(schema);
  if (!shape) {
    return fields;
  }

  for (const [name, fieldSchema] of Object.entries(shape)) {
    const field = analyzeField(name, fieldSchema as z.ZodTypeAny, functions);
    fields.push(field);
  }

  return fields;
}

/** Analyze a single field */
function analyzeField(name: string, schema: z.ZodTypeAny, functions?: Record<string, { inputs: z.ZodTypeAny }>): FieldInfo {
  let required = true;
  let unwrapped = schema;

  // Unwrap optional/nullable/default
  if (isZodOptional(schema)) {
    required = false;
    const inner = getInnerSchema(schema);
    if (inner) unwrapped = inner as z.ZodTypeAny;
  }
  if (isZodNullable(unwrapped)) {
    required = false;
    const inner = getInnerSchema(unwrapped);
    if (inner) unwrapped = inner as z.ZodTypeAny;
  }
  if (isZodDefault(unwrapped)) {
    required = false;
    const inner = getInnerSchema(unwrapped);
    if (inner) unwrapped = inner as z.ZodTypeAny;
  }

  // Check for userContext
  const isUserContext = hasUserContextMetadata(schema) || hasUserContextMetadata(unwrapped);

  // Check for organizationContext
  const isOrganizationContext = hasOrganizationContextMetadata(schema) || hasOrganizationContextMetadata(unwrapped);

  // Check for fieldFrom
  const fieldFromMeta = getFieldFromMetadata(schema) || getFieldFromMetadata(unwrapped);
  const fieldFrom = fieldFromMeta?.functionName;

  // Check if fieldFrom source function is query-based (has 'query' input)
  let isQueryBased = false;
  if (fieldFrom && functions && functions[fieldFrom]) {
    const sourceInputs = functions[fieldFrom].inputs;
    if (isZodObject(sourceInputs)) {
      const sourceShape = getObjectShape(sourceInputs);
      if (sourceShape && 'query' in sourceShape) {
        isQueryBased = true;
      }
    }
  }

  // Get JSON schema representation
  let jsonSchema: Record<string, unknown> = { type: "unknown" };
  try {
    jsonSchema = z.toJSONSchema(unwrapped, { reused: "inline", unrepresentable: "any" }) as Record<string, unknown>;
    delete jsonSchema.$schema;
  } catch {
    // Ignore schema conversion errors
  }

  // Get inner schema for userContext fields (the shape of the expected object)
  let innerSchema: Record<string, unknown> | undefined;
  if (isUserContext && isZodObject(unwrapped)) {
    innerSchema = jsonSchema;
  }
  // Get inner schema for organizationContext fields (the shape of the expected object)
  if (isOrganizationContext && isZodObject(unwrapped)) {
    innerSchema = jsonSchema;
  }

  // Determine field type
  let type = (jsonSchema.type as string) || "unknown";
  if (fieldFrom) {
    type = "fieldFrom";
  } else if (isUserContext) {
    type = "userContext";
  } else if (isOrganizationContext) {
    type = "organizationContext";
  } else if (jsonSchema.enum) {
    type = "enum";
  }

  return {
    name,
    type,
    required,
    isUserContext,
    isOrganizationContext,
    fieldFrom,
    isQueryBased: isQueryBased || undefined,
    schema: jsonSchema,
    innerSchema,
  };
}

export async function startBrowserServer(options: BrowserServerOptions): Promise<BrowserServerResult> {
  const { config, diff = null, configDir, configPath, port: preferredPort, openBrowser = true, background = false } = options;

  // Check if we're in a headless environment early
  const browserEnv = process.env.BROWSER;
  const isVsCodeBrowser = !!browserEnv && (browserEnv.includes("helpers/browser.sh") || browserEnv.includes("vscode"));
  const isHeadless = process.platform === "linux" && !process.env.DISPLAY && (!browserEnv || isVsCodeBrowser);
  console.log(
    `Environment: platform=${process.platform} display=${process.env.DISPLAY ?? ""} browser=${browserEnv ?? ""} isVsCodeBrowser=${isVsCodeBrowser} isHeadless=${isHeadless}`
  );

  // Transform config to graph data and enhance with diff info
  const baseGraphData = transformToGraphData(config);
  const graphData = enhanceWithDiff(baseGraphData, diff);

  return new Promise(async (resolve) => {
    const app = new Hono();

    // API: Get full graph data (enhanced with change status)
    app.get("/api/graph", (c) => c.json(graphData));

    // API: Get diff data
    app.get("/api/diff", (c) => c.json(diff));

    // API: Get node details
    app.get("/api/node/:type/:id", (c) => {
      const { type, id } = c.req.param();
      const nodeId = `${type}:${id}`;
      const details = getNodeDetails(baseGraphData, nodeId);
      if (!details.node) {
        return c.json({ error: "Node not found" }, 404);
      }
      return c.json(details);
    });

    // API: Search nodes
    app.get("/api/search", (c) => {
      const query = c.req.query("q") || "";
      if (query.length < 1) {
        return c.json({ results: [] });
      }
      const results = searchNodes(baseGraphData, query);
      return c.json({ results });
    });

    // API: Approve changes (only works if diff exists)
    app.post("/api/approve", async (c) => {
      if (!diff || !configDir) {
        return c.json({ error: "No changes to approve" }, 400);
      }
      try {
        await writeLockfile(configDir, diff.newOntology, diff.newHash);
        // Give time for response to be sent before resolving
        setTimeout(() => {
          resolve({ approved: true });
        }, 500);
        return c.json({ success: true });
      } catch (error) {
        return c.json(
          {
            error: "Failed to write lockfile",
            message: error instanceof Error ? error.message : "Unknown error",
          },
          500
        );
      }
    });

    // API: Reject changes
    app.post("/api/reject", (c) => {
      // Give time for response to be sent before resolving
      setTimeout(() => {
        resolve({ approved: false });
      }, 500);
      return c.json({ success: true });
    });

    // API: Get raw TypeScript source
    app.get("/api/source", (c) => {
      if (!configPath) {
        return c.json({ error: "Config path not available" }, 400);
      }
      try {
        const source = readFileSync(configPath, "utf-8");
        const filename = basename(configPath);
        return c.json({ source, filename, path: configPath });
      } catch (error) {
        return c.json(
          {
            error: "Failed to read config file",
            message: error instanceof Error ? error.message : "Unknown error",
          },
          500
        );
      }
    });

    // API: Get config info (environments, access groups) for test UI
    app.get("/api/config", (c) => {
      return c.json({
        environments: Object.keys(config.environments),
        accessGroups: Object.keys(config.accessGroups),
      });
    });

    // API: Get function schema for form generation
    app.get("/api/function/:name/schema", (c) => {
      const { name } = c.req.param();
      const fn = config.functions[name];
      if (!fn) {
        return c.json({ error: "Function not found" }, 404);
      }

      try {
        const schema = analyzeInputSchema(fn.inputs, config.functions);
        return c.json({
          name,
          description: fn.description,
          access: fn.access,
          entities: fn.entities,
          schema,
        });
      } catch (error) {
        return c.json({
          error: "Failed to analyze schema",
          message: error instanceof Error ? error.message : "Unknown error",
        }, 500);
      }
    });

    // API: Load options for fieldFrom fields
    app.post("/api/function/:name/options", async (c) => {
      const { name } = c.req.param();
      const fn = config.functions[name];
      if (!fn) {
        return c.json({ error: "Function not found" }, 404);
      }

      try {
        const body = await c.req.json() as { env: string; accessGroups: string[]; query?: string };
        const { env, accessGroups, query } = body;

        const envConfig = config.environments[env] || {};
        const ctx: ResolverContext = {
          env,
          envConfig,
          accessGroups,
          logger: {
            info: console.log,
            warn: console.warn,
            error: console.error,
            debug: console.log,
          },
        };

        // Check if this is a query-based (autocomplete) function
        const shape = isZodObject(fn.inputs) ? getObjectShape(fn.inputs) : null;
        const hasQueryInput = shape && 'query' in shape;

        const args = hasQueryInput ? { query: query || '' } : {};
        const result = await fn.resolver(ctx, args);

        return c.json({ options: result });
      } catch (error) {
        return c.json({
          error: "Failed to load options",
          message: error instanceof Error ? error.message : "Unknown error",
        }, 500);
      }
    });

    // API: Execute function with mocked context (TEST MODE ONLY)
    app.post("/api/test/:name", async (c) => {
      const { name } = c.req.param();
      const fn = config.functions[name];
      if (!fn) {
        return c.json({ error: "Function not found" }, 404);
      }

      try {
        const body = await c.req.json() as {
          env: string;
          accessGroups: string[];
          mockUserContext?: Record<string, unknown>;
          inputs: Record<string, unknown>;
        };
        const { env, accessGroups, mockUserContext, inputs } = body;

        const envConfig = config.environments[env] || {};
        const ctx: ResolverContext = {
          env,
          envConfig,
          accessGroups,
          logger: {
            info: console.log,
            warn: console.warn,
            error: console.error,
            debug: console.log,
          },
        };

        // Merge inputs with mocked user context
        const fullInputs = { ...inputs };
        if (mockUserContext) {
          // Inject mocked user context values into the inputs
          for (const [key, value] of Object.entries(mockUserContext)) {
            fullInputs[key] = value;
          }
        }

        // Validate inputs
        const parseResult = fn.inputs.safeParse(fullInputs);
        if (!parseResult.success) {
          // Zod 4 uses .issues
          const issues = parseResult.error.issues || [];
          return c.json({
            success: false,
            error: "Validation failed",
            validationErrors: issues.map((e) => ({
              path: e.path.map(String).join('.'),
              message: e.message,
            })),
          }, 400);
        }

        // Execute resolver
        const startTime = Date.now();
        const result = await fn.resolver(ctx, parseResult.data);
        const executionTime = Date.now() - startTime;

        return c.json({
          success: true,
          result,
          executionTime,
        });
      } catch (error) {
        return c.json({
          success: false,
          error: error instanceof Error ? error.message : "Unknown error",
          stack: error instanceof Error ? error.stack : undefined,
        }, 500);
      }
    });

    // Serve UI (use bundled browser-app HTML instead of generateBrowserUI)
    app.get("/", (c) => c.html(browserAppHtml));

    // Start server
    const port = preferredPort || (await findAvailablePort(3457));
    const server = await serve(app, port);

    const url = `http://localhost:${server.port}`;
    const hasChanges = diff?.hasChanges ?? false;
    console.log(`\nOntology ${hasChanges ? "Review" : "Browser"} available at: ${url}`);

    if (openBrowser && !background && !isHeadless) {
      console.log("Opening in browser...\n");
      try {
        await open(url);
      } catch (error) {
        // Silently handle browser open failures
        console.log("Could not open browser automatically.");
        console.log(`Please open ${url} manually.\n`);
      }
    } else if (openBrowser && (background || isHeadless)) {
      console.log(`Please open ${url} in your browser.\n`);
    }

    if (hasChanges) {
      if (background) {
        console.log("Review UI running in background at " + url);
        console.log("Approve changes to update the lockfile.\n");
        // Resolve immediately in background mode - server keeps running
        resolve({});
      } else {
        console.log("Waiting for review decision...\n");
      }
    } else {
      console.log("Press Ctrl+C to stop the server.\n");
      // If no changes, resolve immediately with no approval status
      // But keep server running for browsing
    }
  });
}

function generateBrowserUI(graphData: EnhancedGraphData): string {
  // For now, return the embedded HTML with inline data
  // In the future, this could be updated to use the React app
  // by serving static files and fetching data via /api/graph
  
  const userContextFilterBtn = graphData.meta.totalUserContextFunctions > 0
    ? `<button class="filter-btn" data-filter="userContext" title="Functions using userContext()">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px;vertical-align:middle;margin-right:4px;"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>User Context (${graphData.meta.totalUserContextFunctions})
        </button>`
    : '';

  const orgContextFilterBtn = graphData.meta.totalOrganizationContextFunctions > 0
    ? `<button class="filter-btn" data-filter="organizationContext" title="Functions using organizationContext()">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px;vertical-align:middle;margin-right:4px;"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18"/><path d="M15 3v18"/></svg>Org Context (${graphData.meta.totalOrganizationContextFunctions})
        </button>`
    : '';

  return `<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>${graphData.meta.ontologyName} - Ontology Browser</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600&family=Space+Mono&display=swap" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.28.1/cytoscape.min.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      /* Vanna Brand Colors */
      --vanna-navy: #023d60;
      --vanna-cream: #e7e1cf;
      --vanna-teal: #15a8a8;
      --vanna-orange: #fe5d26;
      --vanna-magenta: #bf1363;

      /* Change indicator colors (Vanna palette complements) */
      --change-added: #2a9d8f;
      --change-added-bg: rgba(42, 157, 143, 0.12);
      --change-removed: #c44536;
      --change-removed-bg: rgba(196, 69, 54, 0.1);
      --change-modified: var(--vanna-orange);
      --change-modified-bg: rgba(254, 93, 38, 0.1);

      /* Semantic mappings */
      --bg-primary: #f8f6f1;
      --bg-secondary: #ffffff;
      --bg-tertiary: var(--vanna-cream);
      --bg-hover: #f0ede5;
      --border-primary: rgba(2, 61, 96, 0.12);
      --border-highlight: var(--vanna-teal);
      --text-primary: var(--vanna-navy);
      --text-secondary: #475569;
      --text-muted: #64748b;

      /* Node colors */
      --node-entity: var(--vanna-teal);
      --node-function: var(--vanna-navy);
      --node-access: var(--vanna-magenta);

      /* Edge colors */
      --edge-operates: var(--vanna-teal);
      --edge-access: var(--vanna-magenta);
      --edge-depends: var(--vanna-orange);

      /* Accents */
      --accent-primary: var(--vanna-teal);
      --accent-success: var(--vanna-teal);
      --accent-warning: var(--vanna-orange);
    }

    body {
      font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: linear-gradient(to bottom, var(--vanna-cream), #ffffff, var(--vanna-cream));
      background-attachment: fixed;
      color: var(--text-primary);
      height: 100vh;
      overflow: hidden;
    }

    .layout {
      display: grid;
      grid-template-rows: 64px 1fr;
      grid-template-columns: 260px 1fr 340px;
      height: 100vh;
    }

    /* Header */
    .header {
      grid-column: 1 / -1;
      background: rgba(231, 225, 207, 0.9);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(21, 168, 168, 0.2);
      display: flex;
      align-items: center;
      padding: 0 24px;
      gap: 24px;
      position: relative;
      z-index: 1000;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 12px;
      font-family: 'Roboto Slab', serif;
      font-weight: 600;
      font-size: 18px;
      color: var(--vanna-navy);
    }

    .logo-icon {
      width: 36px;
      height: 36px;
      flex-shrink: 0;
    }

    .logo-icon svg {
      width: 100%;
      height: 100%;
      border-radius: 8px;
    }

    .search-container {
      flex: 1;
      max-width: 420px;
      position: relative;
    }

    .search-input {
      width: 100%;
      padding: 10px 14px 10px 40px;
      background: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(2, 61, 96, 0.15);
      border-radius: 9999px;
      color: var(--text-primary);
      font-family: 'Space Grotesk', sans-serif;
      font-size: 14px;
      outline: none;
      transition: all 0.2s ease;
    }

    .search-input:focus {
      background: white;
      border-color: var(--vanna-teal);
      box-shadow: 0 0 0 3px rgba(21, 168, 168, 0.15);
    }

    .search-input::placeholder {
      color: var(--text-muted);
    }

    .search-icon {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-muted);
      pointer-events: none;
    }

    .filter-buttons {
      display: flex;
      gap: 8px;
    }

    .filter-btn {
      padding: 8px 16px;
      background: rgba(255, 255, 255, 0.6);
      border: 1px solid rgba(2, 61, 96, 0.1);
      border-radius: 9999px;
      color: var(--text-secondary);
      font-family: 'Space Grotesk', sans-serif;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .filter-btn:hover {
      background: white;
      border-color: var(--vanna-teal);
      color: var(--vanna-navy);
      transform: translateY(-1px);
    }

    .filter-btn.active {
      background: var(--vanna-teal);
      border-color: var(--vanna-teal);
      color: white;
      box-shadow: 0 4px 15px rgba(21, 168, 168, 0.3);
    }

    .filter-btn .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }

    .filter-btn .dot.entity { background: var(--node-entity); }
    .filter-btn .dot.function { background: var(--node-function); }
    .filter-btn .dot.access { background: var(--node-access); }
    .filter-btn.active .dot { background: white; }

    .layout-selector {
      display: flex;
      gap: 4px;
      margin-left: auto;
      background: rgba(255, 255, 255, 0.5);
      padding: 4px;
      border-radius: 9999px;
    }

    .layout-btn {
      padding: 6px 12px;
      background: transparent;
      border: none;
      border-radius: 9999px;
      color: var(--text-muted);
      font-family: 'Space Grotesk', sans-serif;
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .layout-btn:hover {
      color: var(--vanna-navy);
    }

    .layout-btn.active {
      background: white;
      color: var(--vanna-teal);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    /* View Tabs */
    .view-tabs {
      display: flex;
      gap: 4px;
      background: rgba(255, 255, 255, 0.5);
      padding: 4px;
      border-radius: 9999px;
      margin-right: 16px;
    }

    .view-tab {
      padding: 8px 16px;
      background: transparent;
      border: none;
      border-radius: 9999px;
      color: var(--text-muted);
      font-family: 'Space Grotesk', sans-serif;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .view-tab:hover {
      color: var(--vanna-navy);
    }

    .view-tab.active {
      background: white;
      color: var(--vanna-teal);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    /* Change Indicators */
    .change-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      font-size: 12px;
      font-weight: 600;
      margin-left: 6px;
    }

    .change-badge.added {
      background: var(--change-added-bg);
      color: var(--change-added);
    }

    .change-badge.removed {
      background: var(--change-removed-bg);
      color: var(--change-removed);
    }

    .change-badge.modified {
      background: var(--change-modified-bg);
      color: var(--change-modified);
    }

    /* User Context Badge */
    .user-context-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 8px;
      border-radius: 9999px;
      font-size: 10px;
      font-weight: 500;
      background: rgba(21, 168, 168, 0.12);
      color: var(--vanna-teal);
      text-transform: uppercase;
      letter-spacing: 0.03em;
      margin-left: 8px;
    }

    .user-context-badge svg {
      width: 12px;
      height: 12px;
    }

    /* Organization Context Badge */
    .org-context-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 8px;
      border-radius: 9999px;
      font-size: 10px;
      font-weight: 500;
      background: rgba(191, 19, 99, 0.12);
      color: var(--vanna-magenta);
      text-transform: uppercase;
      letter-spacing: 0.03em;
      margin-left: 8px;
    }

    .org-context-badge svg {
      width: 12px;
      height: 12px;
    }

    /* Read-Only Badge */
    .readonly-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 8px;
      border-radius: 9999px;
      font-size: 10px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      margin-left: 8px;
    }

    .readonly-badge.query {
      background: rgba(34, 197, 94, 0.12);
      color: #16a34a;
    }

    .readonly-badge.mutation {
      background: rgba(249, 115, 22, 0.12);
      color: #ea580c;
    }

    /* Review Footer */
    .review-footer {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(12px);
      border-top: 1px solid rgba(21, 168, 168, 0.2);
      padding: 16px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      z-index: 1000;
    }

    .review-footer.hidden {
      display: none;
    }

    .changes-summary {
      display: flex;
      align-items: center;
      gap: 16px;
      font-size: 14px;
      color: var(--text-secondary);
    }

    .changes-summary .change-count {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .changes-summary .change-count.added { color: var(--change-added); }
    .changes-summary .change-count.removed { color: var(--change-removed); }
    .changes-summary .change-count.modified { color: var(--change-modified); }

    .review-actions {
      display: flex;
      gap: 12px;
    }

    .review-btn {
      padding: 10px 20px;
      border-radius: 9999px;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      border: 1px solid transparent;
    }

    .review-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .review-btn.reject {
      background: var(--change-removed-bg);
      border-color: rgba(196, 69, 54, 0.3);
      color: var(--change-removed);
    }

    .review-btn.reject:hover:not(:disabled) {
      background: rgba(196, 69, 54, 0.2);
    }

    .review-btn.approve {
      background: var(--vanna-teal);
      color: white;
      box-shadow: 0 4px 15px rgba(21, 168, 168, 0.3);
    }

    .review-btn.approve:hover:not(:disabled) {
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(21, 168, 168, 0.4);
    }

    /* Table View */
    .table-view {
      display: none;
      grid-column: 2 / 4;
      padding: 24px;
      overflow-y: auto;
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(231, 225, 207, 0.3));
    }

    .table-view.active {
      display: block;
    }

    .table-section {
      background: white;
      border: 1px solid rgba(2, 61, 96, 0.08);
      border-radius: 16px;
      margin-bottom: 20px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(15, 23, 42, 0.04);
    }

    .table-section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      background: rgba(231, 225, 207, 0.4);
      border-bottom: 1px solid rgba(2, 61, 96, 0.08);
      cursor: pointer;
      user-select: none;
    }

    .table-section-header:hover {
      background: rgba(231, 225, 207, 0.6);
    }

    .table-section-title {
      font-family: 'Roboto Slab', serif;
      font-size: 14px;
      font-weight: 600;
      color: var(--vanna-navy);
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .table-section-count {
      background: rgba(21, 168, 168, 0.1);
      color: var(--vanna-teal);
      padding: 2px 10px;
      border-radius: 9999px;
      font-size: 12px;
      font-weight: 500;
    }

    .table-section-toggle {
      color: var(--text-muted);
      transition: transform 0.2s ease;
    }

    .table-section.collapsed .table-section-toggle {
      transform: rotate(-90deg);
    }

    .table-section.collapsed .table-section-content {
      display: none;
    }

    .table-section-content {
      padding: 8px;
    }

    .table-item {
      display: flex;
      align-items: flex-start;
      padding: 12px 16px;
      border-radius: 12px;
      margin-bottom: 4px;
      transition: all 0.2s ease;
      border-left: 3px solid transparent;
    }

    .table-item:last-child {
      margin-bottom: 0;
    }

    .table-item:hover {
      background: rgba(231, 225, 207, 0.3);
    }

    .table-item.added {
      border-left-color: var(--change-added);
    }

    .table-item.removed {
      background: var(--change-removed-bg);
      border-left-color: var(--change-removed);
    }

    .table-item.modified {
      border-left-color: var(--change-modified);
    }

    .table-item-icon {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 600;
      margin-right: 12px;
      flex-shrink: 0;
    }

    .table-item.added .table-item-icon { color: var(--change-added); }
    .table-item.removed .table-item-icon { color: var(--change-removed); }
    .table-item.modified .table-item-icon { color: var(--change-modified); }

    .table-item-content {
      flex: 1;
      min-width: 0;
    }

    .table-item-name {
      font-weight: 600;
      color: var(--vanna-navy);
      margin-bottom: 4px;
    }

    .table-item.removed .table-item-name {
      text-decoration: line-through;
      opacity: 0.7;
    }

    .table-item-description {
      font-size: 13px;
      color: var(--text-secondary);
      margin-bottom: 8px;
    }

    .table-item-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .table-item-tag {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 10px;
      border-radius: 9999px;
      font-size: 11px;
      font-weight: 500;
    }

    .table-item-tag.access {
      background: rgba(191, 19, 99, 0.1);
      color: var(--vanna-magenta);
    }

    .table-item-tag.entity {
      background: rgba(21, 168, 168, 0.1);
      color: var(--vanna-teal);
    }

    .table-item-change {
      margin-top: 8px;
      padding: 8px 12px;
      background: rgba(0, 0, 0, 0.03);
      border-radius: 8px;
      font-size: 12px;
      color: var(--text-secondary);
    }

    .table-item-change .old {
      text-decoration: line-through;
      color: var(--change-removed);
    }

    .table-item-change .arrow {
      margin: 0 8px;
      color: var(--text-muted);
    }

    .table-item-change .new {
      color: var(--change-added);
    }

    /* Source View */
    .source-view {
      display: none;
      grid-column: 2 / 4;
      padding: 24px;
      overflow-y: auto;
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(231, 225, 207, 0.3));
    }

    .source-view.active {
      display: flex;
      flex-direction: column;
    }

    .source-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 20px;
      background: rgba(2, 61, 96, 0.95);
      border-radius: 12px 12px 0 0;
      color: white;
    }

    .source-filename {
      font-family: 'Space Mono', monospace;
      font-size: 13px;
      font-weight: 500;
    }

    .copy-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 6px;
      color: white;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .copy-btn:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .copy-btn.copied {
      background: rgba(21, 168, 168, 0.3);
      border-color: var(--vanna-teal);
    }

    .source-code {
      flex: 1;
      margin: 0;
      padding: 20px;
      background: #1e1e1e;
      border-radius: 0 0 12px 12px;
      overflow: auto;
      font-family: 'Space Mono', monospace;
      font-size: 13px;
      line-height: 1.6;
      color: #d4d4d4;
      tab-size: 2;
    }

    .source-code code {
      display: block;
      white-space: pre;
    }

    /* Syntax highlighting classes */
    .source-code .keyword { color: #569cd6; }
    .source-code .string { color: #ce9178; }
    .source-code .number { color: #b5cea8; }
    .source-code .comment { color: #6a9955; }
    .source-code .function { color: #dcdcaa; }
    .source-code .type { color: #4ec9b0; }
    .source-code .property { color: #9cdcfe; }
    .source-code .punctuation { color: #d4d4d4; }

    /* No Changes State */
    .no-changes {
      text-align: center;
      padding: 48px 24px;
      color: var(--text-muted);
    }

    .no-changes-icon {
      font-size: 48px;
      margin-bottom: 16px;
    }

    .no-changes-text {
      font-size: 16px;
      color: var(--text-secondary);
    }

    /* Sidebar */
    .sidebar {
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(12px);
      border-right: 1px solid rgba(21, 168, 168, 0.15);
      padding: 20px;
      overflow-y: auto;
    }

    .sidebar-section {
      margin-bottom: 28px;
    }

    .sidebar-title {
      font-family: 'Roboto Slab', serif;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--vanna-navy);
      margin-bottom: 14px;
      opacity: 0.7;
    }

    .stat-grid {
      display: grid;
      gap: 10px;
    }

    .stat-card {
      background: white;
      border: 1px solid rgba(2, 61, 96, 0.08);
      border-radius: 16px;
      padding: 16px;
      cursor: pointer;
      transition: all 0.25s ease;
      box-shadow: 0 4px 15px rgba(15, 23, 42, 0.04);
    }

    .stat-card:hover {
      border-color: var(--vanna-teal);
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(21, 168, 168, 0.12);
    }

    .stat-card.active {
      border-color: var(--vanna-teal);
      background: linear-gradient(135deg, white, rgba(21, 168, 168, 0.08));
      box-shadow: 0 8px 25px rgba(21, 168, 168, 0.15);
    }

    .stat-value {
      font-family: 'Roboto Slab', serif;
      font-size: 28px;
      font-weight: 700;
      color: var(--vanna-navy);
      margin-bottom: 4px;
    }

    .stat-label {
      font-size: 13px;
      color: var(--text-secondary);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .stat-label .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 0;
      border-bottom: 1px solid rgba(2, 61, 96, 0.06);
    }

    .legend-item:last-child {
      border-bottom: none;
    }

    .legend-shape {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .legend-shape.entity {
      width: 24px;
      height: 16px;
      border: 2px solid var(--node-entity);
      border-radius: 4px;
      background: rgba(21, 168, 168, 0.1);
    }

    .legend-shape.function {
      width: 22px;
      height: 22px;
      background: rgba(2, 61, 96, 0.1);
      border: 2px solid var(--node-function);
      clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    }

    .legend-shape.access {
      width: 20px;
      height: 20px;
      border: 2px solid var(--node-access);
      border-radius: 50%;
      background: rgba(191, 19, 99, 0.1);
    }

    .legend-text {
      font-size: 13px;
      color: var(--text-secondary);
      font-weight: 500;
    }

    .legend-edge {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px 0;
    }

    .legend-line {
      width: 28px;
      height: 3px;
      border-radius: 2px;
    }

    .legend-line.operates { background: var(--edge-operates); }
    .legend-line.access { background: var(--edge-access); }
    .legend-line.depends { background: var(--edge-depends); }

    /* Graph Container */
    .graph-container {
      background:
        radial-gradient(circle at 2px 2px, rgba(2, 61, 96, 0.3) 1px, transparent 0),
        radial-gradient(circle at 30% 20%, rgba(21, 168, 168, 0.06), transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(191, 19, 99, 0.04), transparent 50%),
        linear-gradient(135deg, #faf9f6, #f5f3ed);
      background-size: 32px 32px, 100% 100%, 100% 100%, 100% 100%;
      position: relative;
    }

    #cy {
      width: 100%;
      height: 100%;
    }

    .graph-controls {
      position: absolute;
      bottom: 20px;
      left: 20px;
      display: flex;
      gap: 8px;
    }

    .graph-control-btn {
      width: 40px;
      height: 40px;
      background: white;
      border: 1px solid rgba(2, 61, 96, 0.1);
      border-radius: 12px;
      color: var(--text-secondary);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      box-shadow: 0 4px 15px rgba(15, 23, 42, 0.06);
    }

    .graph-control-btn:hover {
      background: white;
      border-color: var(--vanna-teal);
      color: var(--vanna-teal);
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(21, 168, 168, 0.15);
    }

    /* Detail Panel */
    .detail-panel {
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(12px);
      border-left: 1px solid rgba(21, 168, 168, 0.15);
      overflow-y: auto;
      display: flex;
      flex-direction: column;
    }

    .detail-panel.empty {
      align-items: center;
      justify-content: center;
      padding: 40px;
      text-align: center;
    }

    .empty-state-icon {
      width: 56px;
      height: 56px;
      background: linear-gradient(135deg, rgba(21, 168, 168, 0.1), rgba(191, 19, 99, 0.05));
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      color: var(--vanna-teal);
    }

    .empty-state-title {
      font-family: 'Roboto Slab', serif;
      font-size: 16px;
      font-weight: 600;
      color: var(--vanna-navy);
      margin-bottom: 10px;
    }

    .empty-state-text {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.6;
      max-width: 220px;
    }

    .detail-header {
      padding: 24px;
      border-bottom: 1px solid rgba(2, 61, 96, 0.08);
      background: linear-gradient(135deg, white, rgba(231, 225, 207, 0.3));
    }

    .detail-type {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .detail-type.entity { color: var(--node-entity); }
    .detail-type.function { color: var(--node-function); }
    .detail-type.accessGroup { color: var(--node-access); }

    .detail-name {
      font-family: 'Roboto Slab', serif;
      font-size: 22px;
      font-weight: 700;
      color: var(--vanna-navy);
      margin-bottom: 10px;
      word-break: break-word;
    }

    .detail-description {
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.6;
    }

    .detail-change-badge {
      padding: 3px 10px;
      border-radius: 9999px;
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .detail-change-badge.added {
      background: var(--change-added-bg);
      color: var(--change-added);
    }

    .detail-change-badge.removed {
      background: var(--change-removed-bg);
      color: var(--change-removed);
    }

    .detail-change-badge.modified {
      background: var(--change-modified-bg);
      color: var(--change-modified);
    }

    .change-section {
      border-left: 3px solid var(--text-muted);
      margin: 0 24px 0 24px;
      padding: 16px 20px !important;
      border-radius: 0 12px 12px 0;
    }

    .change-section.added {
      background: var(--change-added-bg);
      border-left-color: var(--change-added);
    }

    .change-section.removed {
      background: var(--change-removed-bg);
      border-left-color: var(--change-removed);
    }

    .change-section.modified {
      background: var(--change-modified-bg);
      border-left-color: var(--change-modified);
    }

    .change-section .detail-section-title {
      opacity: 1;
      margin-bottom: 12px;
    }

    .change-section.added .detail-section-title { color: var(--change-added); }
    .change-section.removed .detail-section-title { color: var(--change-removed); }
    .change-section.modified .detail-section-title { color: var(--change-modified); }

    .change-summary {
      font-size: 13px;
      color: var(--text-secondary);
    }

    .change-item {
      font-size: 13px;
      color: var(--text-secondary);
      margin-bottom: 8px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
    }

    .change-item:last-child {
      margin-bottom: 0;
    }

    .change-label {
      font-weight: 500;
      color: var(--text-primary);
    }

    .change-old {
      color: var(--change-removed);
      text-decoration: line-through;
    }

    .change-arrow {
      color: var(--text-muted);
    }

    .change-new {
      color: var(--change-added);
      font-weight: 500;
    }

    .change-item-block {
      flex-direction: column;
      align-items: flex-start;
    }

    .change-description-diff {
      margin-top: 8px;
      width: 100%;
      font-size: 12px;
    }

    .change-description-diff .change-old,
    .change-description-diff .change-new {
      padding: 8px 12px;
      border-radius: 8px;
      text-decoration: none;
      font-weight: normal;
    }

    .change-description-diff .change-old {
      background: rgba(196, 69, 54, 0.08);
      border: 1px solid rgba(196, 69, 54, 0.2);
    }

    .change-description-diff .change-new {
      background: rgba(42, 157, 143, 0.08);
      border: 1px solid rgba(42, 157, 143, 0.2);
    }

    .change-description-diff .change-arrow {
      text-align: center;
      padding: 4px 0;
    }

    .detail-section {
      padding: 20px 24px;
      border-bottom: 1px solid rgba(2, 61, 96, 0.06);
    }

    .detail-section:last-child {
      border-bottom: none;
    }

    .detail-section-title {
      font-family: 'Roboto Slab', serif;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--vanna-navy);
      opacity: 0.6;
      margin-bottom: 14px;
    }

    .tag-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .tag {
      padding: 6px 12px;
      background: white;
      border: 1px solid rgba(2, 61, 96, 0.1);
      border-radius: 9999px;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 12px;
      font-weight: 500;
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .tag:hover {
      border-color: var(--vanna-teal);
      color: var(--vanna-teal);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(21, 168, 168, 0.15);
    }

    .tag.entity {
      border-color: rgba(21, 168, 168, 0.3);
      background: rgba(21, 168, 168, 0.08);
      color: var(--vanna-teal);
    }
    .tag.function {
      border-color: rgba(2, 61, 96, 0.2);
      background: rgba(2, 61, 96, 0.05);
      color: var(--vanna-navy);
    }
    .tag.access {
      border-color: rgba(191, 19, 99, 0.3);
      background: rgba(191, 19, 99, 0.08);
      color: var(--vanna-magenta);
    }

    .schema-viewer {
      background: linear-gradient(135deg, #faf9f6, #f5f3ed);
      border: 1px solid rgba(2, 61, 96, 0.08);
      border-radius: 12px;
      padding: 16px;
      font-family: 'Space Mono', monospace;
      font-size: 12px;
      line-height: 1.7;
      overflow-x: auto;
      color: var(--vanna-navy);
      max-height: 200px;
      overflow-y: auto;
    }

    .function-list {
      list-style: none;
    }

    .function-list li {
      padding: 10px 0;
      border-bottom: 1px solid rgba(2, 61, 96, 0.06);
    }

    .function-list li:last-child {
      border-bottom: none;
    }

    .function-link {
      color: var(--vanna-navy);
      text-decoration: none;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: color 0.2s ease;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .function-link:hover {
      color: var(--vanna-teal);
    }

    .function-cards {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .function-card {
      background: white;
      border: 1px solid rgba(2, 61, 96, 0.1);
      border-radius: 12px;
      padding: 14px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .function-card:hover {
      border-color: var(--vanna-teal);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(21, 168, 168, 0.12);
    }

    .function-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 6px;
    }

    .function-card-name {
      font-family: 'Space Mono', monospace;
      font-size: 13px;
      font-weight: 500;
      color: var(--vanna-navy);
    }

    .function-card-desc {
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.4;
      margin-bottom: 8px;
    }

    .function-card-returns {
      display: flex;
      align-items: center;
      gap: 6px;
      padding-top: 8px;
      border-top: 1px solid rgba(2, 61, 96, 0.06);
    }

    .returns-label {
      font-size: 11px;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .returns-type {
      font-family: 'Space Mono', monospace;
      font-size: 11px;
      color: var(--vanna-teal);
      background: rgba(21, 168, 168, 0.1);
      padding: 2px 8px;
      border-radius: 4px;
    }

    .returns-section .returns-display {
      margin-bottom: 12px;
    }

    .returns-type-large {
      font-family: 'Space Mono', monospace;
      font-size: 14px;
      font-weight: 500;
      color: var(--vanna-teal);
      background: rgba(21, 168, 168, 0.1);
      padding: 8px 14px;
      border-radius: 8px;
      display: inline-block;
      border: 1px solid rgba(21, 168, 168, 0.2);
    }

    .dependency-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 0;
      border-bottom: 1px solid rgba(2, 61, 96, 0.06);
      font-size: 13px;
    }

    .dependency-item:last-child {
      border-bottom: none;
    }

    .dependency-path {
      font-family: 'Space Mono', monospace;
      font-size: 11px;
      color: var(--vanna-teal);
      background: rgba(21, 168, 168, 0.1);
      padding: 3px 8px;
      border-radius: 6px;
    }

    .no-data {
      font-size: 13px;
      color: var(--text-muted);
      font-style: italic;
    }

    /* Test Modal Overlay */
    .test-modal-backdrop {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(2, 61, 96, 0.4);
      backdrop-filter: blur(4px);
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }

    .test-modal-backdrop.visible {
      opacity: 1;
      visibility: visible;
    }

    .test-modal {
      background: white;
      border-radius: 16px;
      box-shadow: 0 25px 80px rgba(2, 61, 96, 0.25);
      width: 90%;
      max-width: 680px;
      max-height: 90vh;
      display: flex;
      flex-direction: column;
      transform: translateY(20px) scale(0.95);
      transition: all 0.3s ease;
    }

    .test-modal-backdrop.visible .test-modal {
      transform: translateY(0) scale(1);
    }

    .test-modal-header {
      padding: 20px 24px;
      border-bottom: 1px solid rgba(2, 61, 96, 0.08);
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: linear-gradient(135deg, rgba(21, 168, 168, 0.05), rgba(191, 19, 99, 0.03));
      border-radius: 16px 16px 0 0;
    }

    .test-modal-title {
      font-family: 'Roboto Slab', serif;
      font-size: 16px;
      font-weight: 600;
      color: var(--vanna-navy);
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .test-mode-badge {
      background: rgba(254, 93, 38, 0.1);
      color: var(--vanna-orange);
      padding: 3px 10px;
      border-radius: 9999px;
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }

    .test-modal-close {
      background: transparent;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      padding: 8px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }

    .test-modal-close:hover {
      background: rgba(2, 61, 96, 0.08);
      color: var(--text-primary);
    }

    .test-modal-body {
      padding: 24px;
      overflow-y: auto;
      flex: 1;
    }

    .test-modal-description {
      color: var(--text-secondary);
      font-size: 13px;
      margin-bottom: 20px;
      line-height: 1.5;
    }

    /* Test Panel (legacy fallback) */
    .test-panel {
      border-top: 1px solid rgba(2, 61, 96, 0.08);
      background: linear-gradient(135deg, rgba(21, 168, 168, 0.03), rgba(191, 19, 99, 0.02));
    }

    .test-panel-header {
      padding: 16px 24px;
      border-bottom: 1px solid rgba(2, 61, 96, 0.06);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .test-panel-title {
      font-family: 'Roboto Slab', serif;
      font-size: 13px;
      font-weight: 600;
      color: var(--vanna-navy);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .test-panel-close {
      background: transparent;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      padding: 4px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .test-panel-close:hover {
      background: rgba(2, 61, 96, 0.05);
      color: var(--text-primary);
    }

    .test-panel-content {
      padding: 16px 24px;
    }

    .test-form-section {
      margin-bottom: 24px;
    }

    .test-form-section-title {
      font-family: 'Roboto Slab', serif;
      font-size: 13px;
      font-weight: 600;
      color: var(--vanna-navy);
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .test-form-section-title svg {
      color: var(--vanna-teal);
    }

    .test-form-group {
      margin-bottom: 16px;
    }

    .test-form-label {
      display: block;
      font-size: 12px;
      font-weight: 500;
      color: var(--text-secondary);
      margin-bottom: 6px;
    }

    .test-form-label .required {
      color: var(--vanna-magenta);
    }

    .test-form-hint {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 4px;
      font-style: italic;
    }

    .test-form-input,
    .test-form-select,
    .test-form-textarea {
      width: 100%;
      padding: 10px 14px;
      background: white;
      border: 1px solid rgba(2, 61, 96, 0.15);
      border-radius: 8px;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 13px;
      color: var(--text-primary);
      transition: all 0.2s ease;
    }

    .test-form-input:focus,
    .test-form-select:focus,
    .test-form-textarea:focus {
      outline: none;
      border-color: var(--vanna-teal);
      box-shadow: 0 0 0 3px rgba(21, 168, 168, 0.1);
    }

    .test-form-input::placeholder {
      color: var(--text-muted);
    }

    .test-form-textarea {
      min-height: 80px;
      resize: vertical;
      font-family: 'Space Mono', monospace;
      font-size: 12px;
    }

    .test-form-checkbox {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .test-form-checkbox input {
      width: 16px;
      height: 16px;
      accent-color: var(--vanna-teal);
    }

    .test-form-checkbox label {
      font-size: 13px;
      color: var(--text-primary);
      cursor: pointer;
    }

    /* Access Groups Checkbox Grid */
    .access-groups-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .access-group-checkbox {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      background: white;
      border: 1px solid rgba(2, 61, 96, 0.15);
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .access-group-checkbox:hover {
      border-color: var(--vanna-teal);
      background: rgba(21, 168, 168, 0.03);
    }

    .access-group-checkbox.checked {
      border-color: var(--vanna-teal);
      background: rgba(21, 168, 168, 0.08);
    }

    .access-group-checkbox input {
      width: 14px;
      height: 14px;
      accent-color: var(--vanna-teal);
      margin: 0;
    }

    .access-group-checkbox span {
      font-size: 12px;
      color: var(--text-primary);
    }

    .test-form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .test-context-section {
      background: rgba(21, 168, 168, 0.05);
      border: 1px solid rgba(21, 168, 168, 0.15);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 20px;
    }

    .test-context-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
    }

    .test-context-title {
      font-size: 11px;
      font-weight: 600;
      color: var(--vanna-teal);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .user-context-section {
      background: rgba(254, 93, 38, 0.05);
      border: 1px dashed rgba(254, 93, 38, 0.3);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 20px;
    }

    .user-context-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .user-context-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      font-weight: 600;
      color: var(--vanna-orange);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .user-context-field {
      background: rgba(254, 93, 38, 0.05);
      border: 1px dashed rgba(254, 93, 38, 0.3);
      border-radius: 8px;
      padding: 12px;
      margin-bottom: 12px;
    }

    .user-context-field-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }

    .mock-badge {
      background: rgba(254, 93, 38, 0.15);
      color: var(--vanna-orange);
      padding: 3px 8px;
      border-radius: 4px;
      font-size: 9px;
      font-weight: 600;
      text-transform: uppercase;
    }

    .fieldFrom-field {
      position: relative;
    }

    .fieldFrom-hint {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 10px;
      color: var(--text-muted);
      background: rgba(2, 61, 96, 0.05);
      padding: 2px 6px;
      border-radius: 4px;
      margin-left: 8px;
    }

    .fieldFrom-field .load-options-btn {
      margin-top: 8px;
      background: var(--vanna-teal);
      color: white;
      border: none;
      padding: 6px 14px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .fieldFrom-field .load-options-btn:hover {
      background: var(--vanna-navy);
    }

    .fieldFrom-field .load-options-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .test-execute-btn {
      width: 100%;
      padding: 12px;
      background: var(--vanna-teal);
      color: white;
      border: none;
      border-radius: 10px;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .test-execute-btn:hover:not(:disabled) {
      background: var(--vanna-navy);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(21, 168, 168, 0.3);
    }

    .test-execute-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .test-execute-btn.loading {
      background: var(--text-muted);
    }

    .test-result {
      margin-top: 20px;
      padding: 16px;
      border-radius: 12px;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 13px;
      line-height: 1.5;
      overflow-x: auto;
      max-height: 400px;
      overflow-y: auto;
    }

    .test-result.success {
      background: rgba(42, 157, 143, 0.08);
      border: 1px solid rgba(42, 157, 143, 0.25);
    }

    .test-result.error {
      background: rgba(196, 69, 54, 0.08);
      border: 1px solid rgba(196, 69, 54, 0.25);
    }

    .test-result-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
      font-weight: 600;
      font-size: 14px;
    }

    .test-result-header.success {
      color: #2a9d8f;
    }

    .test-result-header.error {
      color: #c44536;
    }

    .test-result-meta {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .test-result-time {
      font-size: 11px;
      color: var(--text-muted);
      font-weight: normal;
      background: rgba(0, 0, 0, 0.05);
      padding: 2px 8px;
      border-radius: 4px;
    }

    .test-result-count {
      font-size: 11px;
      color: var(--text-muted);
      font-weight: normal;
    }

    .test-result-content {
      white-space: pre-wrap;
      word-break: break-word;
      font-family: 'Space Mono', monospace;
      font-size: 12px;
    }

    /* Results Table */
    .test-results-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
      margin-top: 8px;
    }

    .test-results-table th {
      background: rgba(2, 61, 96, 0.08);
      text-align: left;
      padding: 10px 12px;
      font-weight: 600;
      color: var(--vanna-navy);
      border-bottom: 2px solid rgba(2, 61, 96, 0.15);
      white-space: nowrap;
    }

    .test-results-table td {
      padding: 10px 12px;
      border-bottom: 1px solid rgba(2, 61, 96, 0.08);
      color: var(--text-primary);
      vertical-align: top;
    }

    .test-results-table tr:hover td {
      background: rgba(21, 168, 168, 0.05);
    }

    .test-results-table td.cell-number {
      font-family: 'Space Mono', monospace;
      color: var(--vanna-teal);
    }

    .test-results-table td.cell-boolean {
      font-family: 'Space Mono', monospace;
    }

    .test-results-table td.cell-boolean.true {
      color: #2a9d8f;
    }

    .test-results-table td.cell-boolean.false {
      color: var(--text-muted);
    }

    .test-results-table td.cell-null {
      color: var(--text-muted);
      font-style: italic;
    }

    .test-results-table td.cell-object {
      font-family: 'Space Mono', monospace;
      font-size: 11px;
      max-width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Key-Value Display for Single Object */
    .test-results-kv {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 8px 16px;
      margin-top: 8px;
    }

    .test-results-kv dt {
      font-weight: 600;
      color: var(--vanna-navy);
      font-size: 12px;
    }

    .test-results-kv dd {
      margin: 0;
      color: var(--text-primary);
      font-size: 12px;
      word-break: break-word;
    }

    .test-results-kv dd.value-number {
      font-family: 'Space Mono', monospace;
      color: var(--vanna-teal);
    }

    .test-results-kv dd.value-boolean {
      font-family: 'Space Mono', monospace;
    }

    .test-results-kv dd.value-null {
      color: var(--text-muted);
      font-style: italic;
    }

    /* Primitive Result */
    .test-result-primitive {
      padding: 12px 16px;
      background: rgba(21, 168, 168, 0.05);
      border-radius: 8px;
      font-family: 'Space Mono', monospace;
      font-size: 14px;
      color: var(--vanna-navy);
      margin-top: 8px;
    }

    /* View Toggle */
    .test-result-view-toggle {
      display: flex;
      gap: 4px;
      background: rgba(0, 0, 0, 0.05);
      padding: 2px;
      border-radius: 6px;
    }

    .test-result-view-toggle button {
      background: transparent;
      border: none;
      padding: 4px 10px;
      font-size: 11px;
      color: var(--text-muted);
      cursor: pointer;
      border-radius: 4px;
      transition: all 0.2s ease;
    }

    .test-result-view-toggle button.active {
      background: white;
      color: var(--vanna-navy);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .test-result-view-toggle button:hover:not(.active) {
      color: var(--text-primary);
    }

    .test-validation-errors {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .test-validation-errors li {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      padding: 10px 12px;
      background: rgba(196, 69, 54, 0.05);
      border-radius: 6px;
      margin-bottom: 6px;
    }

    .test-validation-errors li:last-child {
      margin-bottom: 0;
    }

    .test-validation-icon {
      color: #c44536;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .test-validation-path {
      font-weight: 600;
      color: var(--vanna-navy);
      font-family: 'Space Mono', monospace;
      font-size: 12px;
    }

    .test-validation-message {
      color: var(--text-secondary);
      font-size: 12px;
    }

    /* Error Stack Trace */
    .test-error-stack {
      margin-top: 12px;
    }

    .test-error-stack-toggle {
      background: transparent;
      border: 1px solid rgba(196, 69, 54, 0.3);
      color: #c44536;
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 11px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s ease;
    }

    .test-error-stack-toggle:hover {
      background: rgba(196, 69, 54, 0.05);
    }

    .test-error-stack-content {
      margin-top: 8px;
      padding: 12px;
      background: rgba(0, 0, 0, 0.03);
      border-radius: 6px;
      font-family: 'Space Mono', monospace;
      font-size: 11px;
      color: var(--text-muted);
      white-space: pre-wrap;
      word-break: break-word;
      display: none;
    }

    .test-error-stack-content.visible {
      display: block;
    }

    .test-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      background: var(--vanna-teal);
      color: white;
      border: none;
      border-radius: 8px;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      margin-top: 12px;
    }

    .test-btn:hover {
      background: var(--vanna-navy);
      transform: translateY(-1px);
    }

    .test-btn svg {
      width: 14px;
      height: 14px;
    }

    /* Keyboard hint */
    .kbd {
      display: inline-block;
      padding: 3px 8px;
      background: white;
      border: 1px solid rgba(2, 61, 96, 0.15);
      border-radius: 6px;
      font-family: 'Space Mono', monospace;
      font-size: 11px;
      color: var(--vanna-navy);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    }

    /* Search Results Dropdown */
    .search-results {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: white;
      border: 1px solid rgba(21, 168, 168, 0.2);
      border-radius: 16px;
      margin-top: 8px;
      max-height: 320px;
      overflow-y: auto;
      z-index: 9999;
      box-shadow: 0 25px 55px rgba(21, 168, 168, 0.18);
      display: none;
    }

    .search-results.visible {
      display: block;
    }

    .search-result-item {
      padding: 12px 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 12px;
      border-bottom: 1px solid rgba(2, 61, 96, 0.06);
      transition: all 0.15s ease;
    }

    .search-result-item:last-child {
      border-bottom: none;
    }

    .search-result-item:hover {
      background: rgba(21, 168, 168, 0.06);
    }

    .search-result-type {
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }

    .search-result-type.entity { background: var(--node-entity); }
    .search-result-type.function { background: var(--node-function); }
    .search-result-type.accessGroup { background: var(--node-access); }

    .search-result-label {
      flex: 1;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 14px;
      font-weight: 500;
      color: var(--vanna-navy);
    }

    .search-result-match {
      font-size: 11px;
      color: var(--text-muted);
      background: rgba(2, 61, 96, 0.05);
      padding: 2px 8px;
      border-radius: 9999px;
    }

    /* Animations */
    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
  </style>
</head>
<body>
  <!-- Test Modal -->
  <div id="testModalBackdrop" class="test-modal-backdrop" onclick="if(event.target === this) closeTestModal()">
    <div class="test-modal">
      <div class="test-modal-header">
        <div class="test-modal-title">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polygon points="5 3 19 12 5 21 5 3"/>
          </svg>
          <span id="testModalFunctionName">Test Function</span>
          <span class="test-mode-badge">Test Mode</span>
        </div>
        <button class="test-modal-close" onclick="closeTestModal()">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
          </svg>
        </button>
      </div>
      <div class="test-modal-body" id="testModalBody">
        <!-- Content will be populated dynamically -->
      </div>
    </div>
  </div>

  <div class="layout">
    <header class="header">
      <div class="logo">
        <div class="logo-icon">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" zoomAndPan="magnify" viewBox="0 0 375 374.999991" height="500" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><g/><clipPath id="80f08af47a"><path d="M 4.902344 5.25 L 370.152344 5.25 L 370.152344 370.5 L 4.902344 370.5 Z M 4.902344 5.25 " clip-rule="nonzero"/></clipPath><clipPath id="723b9215da"><path d="M 103.148438 5.25 L 271.851562 5.25 C 273.457031 5.25 275.066406 5.289062 276.671875 5.367188 C 278.277344 5.445312 279.878906 5.566406 281.480469 5.722656 C 283.078125 5.878906 284.675781 6.078125 286.265625 6.3125 C 287.855469 6.546875 289.441406 6.824219 291.015625 7.136719 C 292.59375 7.449219 294.160156 7.800781 295.722656 8.191406 C 297.28125 8.582031 298.832031 9.011719 300.367188 9.480469 C 301.90625 9.945312 303.433594 10.449219 304.949219 10.992188 C 306.460938 11.535156 307.960938 12.113281 309.445312 12.726562 C 310.933594 13.34375 312.402344 13.996094 313.855469 14.679688 C 315.308594 15.367188 316.746094 16.089844 318.164062 16.851562 C 319.582031 17.609375 320.980469 18.398438 322.359375 19.226562 C 323.738281 20.054688 325.09375 20.914062 326.433594 21.804688 C 327.769531 22.699219 329.082031 23.625 330.375 24.582031 C 331.667969 25.539062 332.933594 26.53125 334.175781 27.550781 C 335.417969 28.570312 336.636719 29.621094 337.828125 30.699219 C 339.019531 31.777344 340.183594 32.886719 341.320312 34.023438 C 342.457031 35.160156 343.566406 36.324219 344.644531 37.515625 C 345.726562 38.707031 346.773438 39.925781 347.792969 41.167969 C 348.816406 42.410156 349.804688 43.679688 350.761719 44.96875 C 351.71875 46.261719 352.644531 47.574219 353.539062 48.914062 C 354.429688 50.25 355.292969 51.605469 356.117188 52.984375 C 356.945312 54.367188 357.738281 55.765625 358.496094 57.183594 C 359.253906 58.601562 359.976562 60.035156 360.664062 61.488281 C 361.351562 62.941406 362 64.414062 362.617188 65.898438 C 363.230469 67.382812 363.8125 68.882812 364.351562 70.398438 C 364.894531 71.910156 365.398438 73.4375 365.863281 74.976562 C 366.332031 76.515625 366.761719 78.0625 367.152344 79.621094 C 367.542969 81.183594 367.894531 82.75 368.207031 84.328125 C 368.519531 85.90625 368.796875 87.488281 369.03125 89.078125 C 369.269531 90.667969 369.464844 92.265625 369.621094 93.863281 C 369.78125 95.464844 369.898438 97.066406 369.976562 98.675781 C 370.054688 100.28125 370.09375 101.886719 370.09375 103.496094 L 370.09375 272.195312 C 370.09375 273.800781 370.054688 275.410156 369.976562 277.015625 C 369.898438 278.621094 369.78125 280.222656 369.621094 281.824219 C 369.464844 283.425781 369.269531 285.019531 369.03125 286.609375 C 368.796875 288.199219 368.519531 289.785156 368.207031 291.363281 C 367.894531 292.9375 367.542969 294.507812 367.152344 296.066406 C 366.761719 297.625 366.332031 299.175781 365.863281 300.714844 C 365.398438 302.253906 364.894531 303.777344 364.351562 305.292969 C 363.8125 306.804688 363.230469 308.304688 362.617188 309.792969 C 362 311.277344 361.351562 312.746094 360.664062 314.199219 C 359.976562 315.652344 359.253906 317.089844 358.496094 318.507812 C 357.738281 319.925781 356.945312 321.324219 356.117188 322.703125 C 355.292969 324.082031 354.429688 325.441406 353.539062 326.777344 C 352.644531 328.113281 351.71875 329.429688 350.761719 330.71875 C 349.804688 332.011719 348.816406 333.277344 347.792969 334.519531 C 346.773438 335.765625 345.726562 336.980469 344.644531 338.171875 C 343.566406 339.363281 342.457031 340.527344 341.320312 341.664062 C 340.183594 342.800781 339.019531 343.910156 337.828125 344.988281 C 336.636719 346.070312 335.417969 347.121094 334.175781 348.140625 C 332.933594 349.160156 331.667969 350.148438 330.375 351.105469 C 329.082031 352.0625 327.769531 352.988281 326.433594 353.882812 C 325.09375 354.777344 323.738281 355.636719 322.359375 356.460938 C 320.980469 357.289062 319.582031 358.082031 318.164062 358.839844 C 316.746094 359.597656 315.308594 360.320312 313.855469 361.007812 C 312.402344 361.695312 310.933594 362.347656 309.445312 362.960938 C 307.960938 363.578125 306.460938 364.15625 304.949219 364.695312 C 303.433594 365.238281 301.90625 365.742188 300.367188 366.210938 C 298.832031 366.675781 297.28125 367.105469 295.722656 367.496094 C 294.160156 367.886719 292.59375 368.238281 291.015625 368.550781 C 289.441406 368.867188 287.855469 369.140625 286.265625 369.378906 C 284.675781 369.613281 283.078125 369.808594 281.480469 369.96875 C 279.878906 370.125 278.277344 370.242188 276.671875 370.320312 C 275.066406 370.402344 273.457031 370.441406 271.851562 370.441406 L 103.148438 370.441406 C 101.542969 370.441406 99.933594 370.402344 98.328125 370.320312 C 96.722656 370.242188 95.121094 370.125 93.519531 369.96875 C 91.921875 369.808594 90.324219 369.613281 88.734375 369.378906 C 87.144531 369.140625 85.558594 368.867188 83.984375 368.550781 C 82.40625 368.238281 80.835938 367.886719 79.277344 367.496094 C 77.71875 367.105469 76.167969 366.675781 74.628906 366.210938 C 73.09375 365.742188 71.566406 365.238281 70.050781 364.695312 C 68.539062 364.15625 67.039062 363.578125 65.554688 362.960938 C 64.066406 362.347656 62.597656 361.695312 61.144531 361.007812 C 59.691406 360.320312 58.253906 359.597656 56.835938 358.839844 C 55.417969 358.082031 54.019531 357.289062 52.640625 356.460938 C 51.261719 355.636719 49.90625 354.777344 48.566406 353.882812 C 47.230469 352.988281 45.917969 352.0625 44.625 351.105469 C 43.332031 350.148438 42.066406 349.160156 40.824219 348.140625 C 39.582031 347.121094 38.363281 346.070312 37.171875 344.988281 C 35.980469 343.910156 34.816406 342.800781 33.679688 341.664062 C 32.542969 340.527344 31.433594 339.363281 30.355469 338.171875 C 29.273438 336.980469 28.226562 335.765625 27.203125 334.519531 C 26.183594 333.277344 25.195312 332.011719 24.238281 330.71875 C 23.28125 329.429688 22.355469 328.113281 21.460938 326.777344 C 20.566406 325.441406 19.707031 324.082031 18.882812 322.703125 C 18.054688 321.324219 17.261719 319.925781 16.503906 318.507812 C 15.746094 317.089844 15.023438 315.652344 14.335938 314.199219 C 13.648438 312.746094 12.996094 311.277344 12.382812 309.792969 C 11.765625 308.304688 11.1875 306.804688 10.648438 305.292969 C 10.105469 303.777344 9.601562 302.253906 9.132812 300.714844 C 8.667969 299.175781 8.238281 297.625 7.847656 296.066406 C 7.457031 294.507812 7.105469 292.9375 6.792969 291.363281 C 6.476562 289.785156 6.203125 288.199219 5.96875 286.609375 C 5.730469 285.019531 5.535156 283.425781 5.378906 281.824219 C 5.21875 280.222656 5.101562 278.621094 5.023438 277.015625 C 4.945312 275.410156 4.902344 273.800781 4.902344 272.195312 L 4.902344 103.496094 C 4.902344 101.886719 4.945312 100.28125 5.023438 98.675781 C 5.101562 97.066406 5.21875 95.464844 5.378906 93.863281 C 5.535156 92.265625 5.730469 90.667969 5.96875 89.078125 C 6.203125 87.488281 6.476562 85.90625 6.792969 84.328125 C 7.105469 82.75 7.457031 81.183594 7.847656 79.621094 C 8.238281 78.0625 8.667969 76.515625 9.132812 74.976562 C 9.601562 73.4375 10.105469 71.910156 10.648438 70.398438 C 11.1875 68.882812 11.765625 67.382812 12.382812 65.898438 C 12.996094 64.414062 13.648438 62.941406 14.335938 61.488281 C 15.023438 60.035156 15.746094 58.601562 16.503906 57.183594 C 17.261719 55.765625 18.054688 54.367188 18.882812 52.984375 C 19.707031 51.605469 20.566406 50.25 21.460938 48.914062 C 22.355469 47.574219 23.28125 46.261719 24.238281 44.96875 C 25.195312 43.679688 26.183594 42.410156 27.203125 41.167969 C 28.226562 39.925781 29.273438 38.707031 30.355469 37.515625 C 31.433594 36.324219 32.542969 35.160156 33.679688 34.023438 C 34.816406 32.886719 35.980469 31.777344 37.171875 30.699219 C 38.363281 29.621094 39.582031 28.570312 40.824219 27.550781 C 42.066406 26.53125 43.332031 25.539062 44.625 24.582031 C 45.917969 23.625 47.230469 22.699219 48.566406 21.804688 C 49.90625 20.914062 51.261719 20.054688 52.640625 19.226562 C 54.019531 18.398438 55.417969 17.609375 56.835938 16.851562 C 58.253906 16.089844 59.691406 15.367188 61.144531 14.679688 C 62.597656 13.996094 64.066406 13.34375 65.554688 12.726562 C 67.039062 12.113281 68.539062 11.535156 70.050781 10.992188 C 71.566406 10.449219 73.09375 9.945312 74.628906 9.480469 C 76.167969 9.011719 77.71875 8.582031 79.277344 8.191406 C 80.835938 7.800781 82.40625 7.449219 83.984375 7.136719 C 85.558594 6.824219 87.144531 6.546875 88.734375 6.3125 C 90.324219 6.078125 91.921875 5.878906 93.519531 5.722656 C 95.121094 5.566406 96.722656 5.445312 98.328125 5.367188 C 99.933594 5.289062 101.542969 5.25 103.148438 5.25 Z M 103.148438 5.25 " clip-rule="nonzero"/></clipPath><linearGradient x1="21.35189" gradientTransform="matrix(0, -1.547421, 1.547421, 0, 4.904122, 370.440392)" y1="-15.46228" x2="214.648932" gradientUnits="userSpaceOnUse" y2="251.461714" id="fc3e7af47d"><stop stop-opacity="1" stop-color="rgb(1.33667%, 27.052307%, 39.756775%)" offset="0"/><stop stop-opacity="1" stop-color="rgb(1.371765%, 27.253723%, 39.892578%)" offset="0.00390625"/><stop stop-opacity="1" stop-color="rgb(1.408386%, 27.456665%, 40.029907%)" offset="0.0078125"/><stop stop-opacity="1" stop-color="rgb(1.443481%, 27.659607%, 40.16571%)" offset="0.0117187"/><stop stop-opacity="1" stop-color="rgb(1.480103%, 27.862549%, 40.301514%)" offset="0.015625"/><stop stop-opacity="1" stop-color="rgb(1.515198%, 28.065491%, 40.437317%)" offset="0.0195312"/><stop stop-opacity="1" stop-color="rgb(1.551819%, 28.268433%, 40.574646%)" offset="0.0234375"/><stop stop-opacity="1" stop-color="rgb(1.58844%, 28.469849%, 40.710449%)" offset="0.0273437"/><stop stop-opacity="1" stop-color="rgb(1.625061%, 28.672791%, 40.847778%)" offset="0.03125"/><stop stop-opacity="1" stop-color="rgb(1.660156%, 28.875732%, 40.983582%)" offset="0.0351563"/><stop stop-opacity="1" stop-color="rgb(1.696777%, 29.078674%, 41.120911%)" offset="0.0390625"/><stop stop-opacity="1" stop-color="rgb(1.731873%, 29.28009%, 41.256714%)" offset="0.0429688"/><stop stop-opacity="1" stop-color="rgb(1.768494%, 29.483032%, 41.392517%)" offset="0.046875"/><stop stop-opacity="1" stop-color="rgb(1.803589%, 29.685974%, 41.52832%)" offset="0.0507812"/><stop stop-opacity="1" stop-color="rgb(1.84021%, 29.888916%, 41.665649%)" offset="0.0546875"/><stop stop-opacity="1" stop-color="rgb(1.875305%, 30.091858%, 41.801453%)" offset="0.0585938"/><stop stop-opacity="1" stop-color="rgb(1.911926%, 30.2948%, 41.938782%)" offset="0.0625"/><stop stop-opacity="1" stop-color="rgb(1.948547%, 30.496216%, 42.074585%)" offset="0.0664063"/><stop stop-opacity="1" stop-color="rgb(1.985168%, 30.699158%, 42.210388%)" offset="0.0703125"/><stop stop-opacity="1" stop-color="rgb(2.020264%, 30.9021%, 42.346191%)" offset="0.0742188"/><stop stop-opacity="1" stop-color="rgb(2.056885%, 31.105042%, 42.483521%)" offset="0.078125"/><stop stop-opacity="1" stop-color="rgb(2.09198%, 31.307983%, 42.619324%)" offset="0.0820312"/><stop stop-opacity="1" stop-color="rgb(2.128601%, 31.510925%, 42.756653%)" offset="0.0859375"/><stop stop-opacity="1" stop-color="rgb(2.163696%, 31.712341%, 42.892456%)" offset="0.0898438"/><stop stop-opacity="1" stop-color="rgb(2.200317%, 31.915283%, 43.028259%)" offset="0.09375"/><stop stop-opacity="1" stop-color="rgb(2.236938%, 32.118225%, 43.164062%)" offset="0.0976563"/><stop stop-opacity="1" stop-color="rgb(2.27356%, 32.321167%, 43.301392%)" offset="0.101562"/><stop stop-opacity="1" stop-color="rgb(2.308655%, 32.522583%, 43.437195%)" offset="0.105469"/><stop stop-opacity="1" stop-color="rgb(2.345276%, 32.725525%, 43.574524%)" offset="0.109375"/><stop stop-opacity="1" stop-color="rgb(2.380371%, 32.928467%, 43.710327%)" offset="0.113281"/><stop stop-opacity="1" stop-color="rgb(2.416992%, 33.131409%, 43.847656%)" offset="0.117188"/><stop stop-opacity="1" stop-color="rgb(2.452087%, 33.334351%, 43.983459%)" offset="0.121094"/><stop stop-opacity="1" stop-color="rgb(2.488708%, 33.537292%, 44.119263%)" offset="0.125"/><stop stop-opacity="1" stop-color="rgb(2.523804%, 33.738708%, 44.255066%)" offset="0.128906"/><stop stop-opacity="1" stop-color="rgb(2.560425%, 33.94165%, 44.392395%)" offset="0.132813"/><stop stop-opacity="1" stop-color="rgb(2.597046%, 34.144592%, 44.528198%)" offset="0.136719"/><stop stop-opacity="1" stop-color="rgb(2.633667%, 34.347534%, 44.665527%)" offset="0.140625"/><stop stop-opacity="1" stop-color="rgb(2.668762%, 34.54895%, 44.801331%)" offset="0.144531"/><stop stop-opacity="1" stop-color="rgb(2.705383%, 34.751892%, 44.937134%)" offset="0.148438"/><stop stop-opacity="1" stop-color="rgb(2.740479%, 34.954834%, 45.072937%)" offset="0.152344"/><stop stop-opacity="1" stop-color="rgb(2.7771%, 35.157776%, 45.210266%)" offset="0.15625"/><stop stop-opacity="1" stop-color="rgb(2.812195%, 35.360718%, 45.346069%)" offset="0.160156"/><stop stop-opacity="1" stop-color="rgb(2.848816%, 35.56366%, 45.483398%)" offset="0.164063"/><stop stop-opacity="1" stop-color="rgb(2.885437%, 35.765076%, 45.619202%)" offset="0.167969"/><stop stop-opacity="1" stop-color="rgb(2.922058%, 35.968018%, 45.756531%)" offset="0.171875"/><stop stop-opacity="1" stop-color="rgb(2.957153%, 36.170959%, 45.892334%)" offset="0.175781"/><stop stop-opacity="1" stop-color="rgb(2.993774%, 36.373901%, 46.028137%)" offset="0.179688"/><stop stop-opacity="1" stop-color="rgb(3.02887%, 36.576843%, 46.16394%)" offset="0.183594"/><stop stop-opacity="1" stop-color="rgb(3.065491%, 36.779785%, 46.30127%)" offset="0.1875"/><stop stop-opacity="1" stop-color="rgb(3.100586%, 36.981201%, 46.437073%)" offset="0.191406"/><stop stop-opacity="1" stop-color="rgb(3.137207%, 37.184143%, 46.574402%)" offset="0.195312"/><stop stop-opacity="1" stop-color="rgb(3.173828%, 37.387085%, 46.710205%)" offset="0.199219"/><stop stop-opacity="1" stop-color="rgb(3.210449%, 37.590027%, 46.846008%)" offset="0.203125"/><stop stop-opacity="1" stop-color="rgb(3.245544%, 37.791443%, 46.981812%)" offset="0.207031"/><stop stop-opacity="1" stop-color="rgb(3.282166%, 37.994385%, 47.119141%)" offset="0.210938"/><stop stop-opacity="1" stop-color="rgb(3.317261%, 38.197327%, 47.254944%)" offset="0.214844"/><stop stop-opacity="1" stop-color="rgb(3.353882%, 38.400269%, 47.392273%)" offset="0.21875"/><stop stop-opacity="1" stop-color="rgb(3.388977%, 38.60321%, 47.528076%)" offset="0.222656"/><stop stop-opacity="1" stop-color="rgb(3.425598%, 38.806152%, 47.663879%)" offset="0.226563"/><stop stop-opacity="1" stop-color="rgb(3.460693%, 39.007568%, 47.799683%)" offset="0.230469"/><stop stop-opacity="1" stop-color="rgb(3.497314%, 39.21051%, 47.937012%)" offset="0.234375"/><stop stop-opacity="1" stop-color="rgb(3.533936%, 39.413452%, 48.072815%)" offset="0.238281"/><stop stop-opacity="1" stop-color="rgb(3.570557%, 39.616394%, 48.210144%)" offset="0.242188"/><stop stop-opacity="1" stop-color="rgb(3.605652%, 39.819336%, 48.345947%)" offset="0.246094"/><stop stop-opacity="1" stop-color="rgb(3.642273%, 40.022278%, 48.483276%)" offset="0.25"/><stop stop-opacity="1" stop-color="rgb(3.677368%, 40.223694%, 48.61908%)" offset="0.253906"/><stop stop-opacity="1" stop-color="rgb(3.713989%, 40.426636%, 48.754883%)" offset="0.257812"/><stop stop-opacity="1" stop-color="rgb(3.749084%, 40.629578%, 48.890686%)" offset="0.261719"/><stop stop-opacity="1" stop-color="rgb(3.785706%, 40.83252%, 49.028015%)" offset="0.265625"/><stop stop-opacity="1" stop-color="rgb(3.822327%, 41.033936%, 49.163818%)" offset="0.269531"/><stop stop-opacity="1" stop-color="rgb(3.858948%, 41.236877%, 49.301147%)" offset="0.273438"/><stop stop-opacity="1" stop-color="rgb(3.894043%, 41.439819%, 49.436951%)" offset="0.277344"/><stop stop-opacity="1" stop-color="rgb(3.930664%, 41.642761%, 49.572754%)" offset="0.28125"/><stop stop-opacity="1" stop-color="rgb(3.965759%, 41.845703%, 49.708557%)" offset="0.285156"/><stop stop-opacity="1" stop-color="rgb(4.00238%, 42.048645%, 49.845886%)" offset="0.289063"/><stop stop-opacity="1" stop-color="rgb(4.037476%, 42.250061%, 49.981689%)" offset="0.292969"/><stop stop-opacity="1" stop-color="rgb(4.074097%, 42.453003%, 50.119019%)" offset="0.296875"/><stop stop-opacity="1" stop-color="rgb(4.109192%, 42.655945%, 50.254822%)" offset="0.300781"/><stop stop-opacity="1" stop-color="rgb(4.145813%, 42.858887%, 50.392151%)" offset="0.304688"/><stop stop-opacity="1" stop-color="rgb(4.182434%, 43.060303%, 50.527954%)" offset="0.308594"/><stop stop-opacity="1" stop-color="rgb(4.219055%, 43.263245%, 50.663757%)" offset="0.3125"/><stop stop-opacity="1" stop-color="rgb(4.25415%, 43.466187%, 50.799561%)" offset="0.316406"/><stop stop-opacity="1" stop-color="rgb(4.290771%, 43.669128%, 50.93689%)" offset="0.320313"/><stop stop-opacity="1" stop-color="rgb(4.325867%, 43.87207%, 51.072693%)" offset="0.324219"/><stop stop-opacity="1" stop-color="rgb(4.362488%, 44.075012%, 51.210022%)" offset="0.328125"/><stop stop-opacity="1" stop-color="rgb(4.397583%, 44.276428%, 51.345825%)" offset="0.332031"/><stop stop-opacity="1" stop-color="rgb(4.434204%, 44.47937%, 51.481628%)" offset="0.335938"/><stop stop-opacity="1" stop-color="rgb(4.470825%, 44.682312%, 51.617432%)" offset="0.339844"/><stop stop-opacity="1" stop-color="rgb(4.507446%, 44.885254%, 51.754761%)" offset="0.34375"/><stop stop-opacity="1" stop-color="rgb(4.542542%, 45.088196%, 51.890564%)" offset="0.347656"/><stop stop-opacity="1" stop-color="rgb(4.579163%, 45.291138%, 52.027893%)" offset="0.351562"/><stop stop-opacity="1" stop-color="rgb(4.614258%, 45.492554%, 52.163696%)" offset="0.355469"/><stop stop-opacity="1" stop-color="rgb(4.650879%, 45.695496%, 52.2995%)" offset="0.359375"/><stop stop-opacity="1" stop-color="rgb(4.685974%, 45.898438%, 52.435303%)" offset="0.363281"/><stop stop-opacity="1" stop-color="rgb(4.722595%, 46.101379%, 52.572632%)" offset="0.367188"/><stop stop-opacity="1" stop-color="rgb(4.75769%, 46.302795%, 52.708435%)" offset="0.371094"/><stop stop-opacity="1" stop-color="rgb(4.794312%, 46.505737%, 52.845764%)" offset="0.375"/><stop stop-opacity="1" stop-color="rgb(4.830933%, 46.708679%, 52.981567%)" offset="0.378906"/><stop stop-opacity="1" stop-color="rgb(4.867554%, 46.911621%, 53.118896%)" offset="0.382813"/><stop stop-opacity="1" stop-color="rgb(4.902649%, 47.114563%, 53.2547%)" offset="0.386719"/><stop stop-opacity="1" stop-color="rgb(4.93927%, 47.317505%, 53.390503%)" offset="0.390625"/><stop stop-opacity="1" stop-color="rgb(4.974365%, 47.518921%, 53.526306%)" offset="0.394531"/><stop stop-opacity="1" stop-color="rgb(5.010986%, 47.721863%, 53.663635%)" offset="0.398438"/><stop stop-opacity="1" stop-color="rgb(5.046082%, 47.924805%, 53.799438%)" offset="0.402344"/><stop stop-opacity="1" stop-color="rgb(5.082703%, 48.127747%, 53.936768%)" offset="0.40625"/><stop stop-opacity="1" stop-color="rgb(5.119324%, 48.330688%, 54.072571%)" offset="0.410156"/><stop stop-opacity="1" stop-color="rgb(5.155945%, 48.53363%, 54.208374%)" offset="0.414063"/><stop stop-opacity="1" stop-color="rgb(5.19104%, 48.735046%, 54.344177%)" offset="0.417969"/><stop stop-opacity="1" stop-color="rgb(5.227661%, 48.937988%, 54.481506%)" offset="0.421875"/><stop stop-opacity="1" stop-color="rgb(5.262756%, 49.14093%, 54.61731%)" offset="0.425781"/><stop stop-opacity="1" stop-color="rgb(5.299377%, 49.343872%, 54.754639%)" offset="0.429688"/><stop stop-opacity="1" stop-color="rgb(5.334473%, 49.545288%, 54.890442%)" offset="0.433594"/><stop stop-opacity="1" stop-color="rgb(5.371094%, 49.74823%, 55.026245%)" offset="0.4375"/><stop stop-opacity="1" stop-color="rgb(5.406189%, 49.951172%, 55.162048%)" offset="0.441406"/><stop stop-opacity="1" stop-color="rgb(5.44281%, 50.154114%, 55.299377%)" offset="0.445313"/><stop stop-opacity="1" stop-color="rgb(5.479431%, 50.357056%, 55.435181%)" offset="0.449219"/><stop stop-opacity="1" stop-color="rgb(5.516052%, 50.559998%, 55.57251%)" offset="0.453125"/><stop stop-opacity="1" stop-color="rgb(5.551147%, 50.761414%, 55.708313%)" offset="0.457031"/><stop stop-opacity="1" stop-color="rgb(5.587769%, 50.964355%, 55.845642%)" offset="0.460938"/><stop stop-opacity="1" stop-color="rgb(5.622864%, 51.167297%, 55.981445%)" offset="0.464844"/><stop stop-opacity="1" stop-color="rgb(5.659485%, 51.370239%, 56.117249%)" offset="0.46875"/><stop stop-opacity="1" stop-color="rgb(5.69458%, 51.573181%, 56.253052%)" offset="0.472656"/><stop stop-opacity="1" stop-color="rgb(5.731201%, 51.776123%, 56.390381%)" offset="0.476563"/><stop stop-opacity="1" stop-color="rgb(5.767822%, 51.977539%, 56.526184%)" offset="0.480469"/><stop stop-opacity="1" stop-color="rgb(5.804443%, 52.180481%, 56.663513%)" offset="0.484375"/><stop stop-opacity="1" stop-color="rgb(5.839539%, 52.383423%, 56.799316%)" offset="0.488281"/><stop stop-opacity="1" stop-color="rgb(5.87616%, 52.586365%, 56.93512%)" offset="0.492188"/><stop stop-opacity="1" stop-color="rgb(5.911255%, 52.787781%, 57.070923%)" offset="0.496094"/><stop stop-opacity="1" stop-color="rgb(5.947876%, 52.990723%, 57.208252%)" offset="0.5"/><stop stop-opacity="1" stop-color="rgb(5.982971%, 53.193665%, 57.344055%)" offset="0.503906"/><stop stop-opacity="1" stop-color="rgb(6.019592%, 53.396606%, 57.481384%)" offset="0.507813"/><stop stop-opacity="1" stop-color="rgb(6.054688%, 53.599548%, 57.617188%)" offset="0.511719"/><stop stop-opacity="1" stop-color="rgb(6.091309%, 53.80249%, 57.754517%)" offset="0.515625"/><stop stop-opacity="1" stop-color="rgb(6.12793%, 54.003906%, 57.89032%)" offset="0.519531"/><stop stop-opacity="1" stop-color="rgb(6.164551%, 54.206848%, 58.026123%)" offset="0.523438"/><stop stop-opacity="1" stop-color="rgb(6.199646%, 54.40979%, 58.161926%)" offset="0.527344"/><stop stop-opacity="1" stop-color="rgb(6.236267%, 54.612732%, 58.299255%)" offset="0.53125"/><stop stop-opacity="1" stop-color="rgb(6.271362%, 54.814148%, 58.435059%)" offset="0.535156"/><stop stop-opacity="1" stop-color="rgb(6.307983%, 55.01709%, 58.572388%)" offset="0.539063"/><stop stop-opacity="1" stop-color="rgb(6.343079%, 55.220032%, 58.708191%)" offset="0.542969"/><stop stop-opacity="1" stop-color="rgb(6.3797%, 55.422974%, 58.843994%)" offset="0.546875"/><stop stop-opacity="1" stop-color="rgb(6.416321%, 55.625916%, 58.979797%)" offset="0.550781"/><stop stop-opacity="1" stop-color="rgb(6.452942%, 55.828857%, 59.117126%)" offset="0.554688"/><stop stop-opacity="1" stop-color="rgb(6.488037%, 56.030273%, 59.25293%)" offset="0.558594"/><stop stop-opacity="1" stop-color="rgb(6.524658%, 56.233215%, 59.390259%)" offset="0.5625"/><stop stop-opacity="1" stop-color="rgb(6.559753%, 56.436157%, 59.526062%)" offset="0.566406"/><stop stop-opacity="1" stop-color="rgb(6.596375%, 56.639099%, 59.661865%)" offset="0.570313"/><stop stop-opacity="1" stop-color="rgb(6.63147%, 56.842041%, 59.797668%)" offset="0.574219"/><stop stop-opacity="1" stop-color="rgb(6.668091%, 57.044983%, 59.934998%)" offset="0.578125"/><stop stop-opacity="1" stop-color="rgb(6.703186%, 57.246399%, 60.070801%)" offset="0.582031"/><stop stop-opacity="1" stop-color="rgb(6.739807%, 57.449341%, 60.20813%)" offset="0.585938"/><stop stop-opacity="1" stop-color="rgb(6.776428%, 57.652283%, 60.343933%)" offset="0.589844"/><stop stop-opacity="1" stop-color="rgb(6.813049%, 57.855225%, 60.481262%)" offset="0.59375"/><stop stop-opacity="1" stop-color="rgb(6.848145%, 58.056641%, 60.617065%)" offset="0.597656"/><stop stop-opacity="1" stop-color="rgb(6.884766%, 58.259583%, 60.752869%)" offset="0.601563"/><stop stop-opacity="1" stop-color="rgb(6.919861%, 58.462524%, 60.888672%)" offset="0.605469"/><stop stop-opacity="1" stop-color="rgb(6.956482%, 58.665466%, 61.026001%)" offset="0.609375"/><stop stop-opacity="1" stop-color="rgb(6.991577%, 58.868408%, 61.161804%)" offset="0.613281"/><stop stop-opacity="1" stop-color="rgb(7.028198%, 59.07135%, 61.299133%)" offset="0.617188"/><stop stop-opacity="1" stop-color="rgb(7.064819%, 59.272766%, 61.434937%)" offset="0.621094"/><stop stop-opacity="1" stop-color="rgb(7.10144%, 59.475708%, 61.57074%)" offset="0.625"/><stop stop-opacity="1" stop-color="rgb(7.136536%, 59.67865%, 61.706543%)" offset="0.628906"/><stop stop-opacity="1" stop-color="rgb(7.173157%, 59.881592%, 61.843872%)" offset="0.632813"/><stop stop-opacity="1" stop-color="rgb(7.208252%, 60.084534%, 61.979675%)" offset="0.636719"/><stop stop-opacity="1" stop-color="rgb(7.244873%, 60.287476%, 62.117004%)" offset="0.640625"/><stop stop-opacity="1" stop-color="rgb(7.279968%, 60.488892%, 62.252808%)" offset="0.644531"/><stop stop-opacity="1" stop-color="rgb(7.316589%, 60.691833%, 62.390137%)" offset="0.648438"/><stop stop-opacity="1" stop-color="rgb(7.35321%, 60.894775%, 62.52594%)" offset="0.652344"/><stop stop-opacity="1" stop-color="rgb(7.389832%, 61.097717%, 62.661743%)" offset="0.65625"/><stop stop-opacity="1" stop-color="rgb(7.424927%, 61.299133%, 62.797546%)" offset="0.660156"/><stop stop-opacity="1" stop-color="rgb(7.461548%, 61.502075%, 62.934875%)" offset="0.664063"/><stop stop-opacity="1" stop-color="rgb(7.496643%, 61.705017%, 63.070679%)" offset="0.667969"/><stop stop-opacity="1" stop-color="rgb(7.533264%, 61.907959%, 63.208008%)" offset="0.671875"/><stop stop-opacity="1" stop-color="rgb(7.568359%, 62.110901%, 63.343811%)" offset="0.675781"/><stop stop-opacity="1" stop-color="rgb(7.60498%, 62.313843%, 63.479614%)" offset="0.679688"/><stop stop-opacity="1" stop-color="rgb(7.640076%, 62.515259%, 63.615417%)" offset="0.683594"/><stop stop-opacity="1" stop-color="rgb(7.676697%, 62.718201%, 63.752747%)" offset="0.6875"/><stop stop-opacity="1" stop-color="rgb(7.713318%, 62.921143%, 63.88855%)" offset="0.691406"/><stop stop-opacity="1" stop-color="rgb(7.749939%, 63.124084%, 64.025879%)" offset="0.695313"/><stop stop-opacity="1" stop-color="rgb(7.785034%, 63.3255%, 64.161682%)" offset="0.699219"/><stop stop-opacity="1" stop-color="rgb(7.821655%, 63.528442%, 64.297485%)" offset="0.703125"/><stop stop-opacity="1" stop-color="rgb(7.85675%, 63.731384%, 64.433289%)" offset="0.707031"/><stop stop-opacity="1" stop-color="rgb(7.893372%, 63.934326%, 64.570618%)" offset="0.710938"/><stop stop-opacity="1" stop-color="rgb(7.928467%, 64.137268%, 64.706421%)" offset="0.714844"/><stop stop-opacity="1" stop-color="rgb(7.965088%, 64.34021%, 64.84375%)" offset="0.71875"/><stop stop-opacity="1" stop-color="rgb(8.001709%, 64.541626%, 64.979553%)" offset="0.722656"/><stop stop-opacity="1" stop-color="rgb(8.03833%, 64.744568%, 65.116882%)" offset="0.726563"/><stop stop-opacity="1" stop-color="rgb(8.073425%, 64.94751%, 65.252686%)" offset="0.730469"/><stop stop-opacity="1" stop-color="rgb(8.110046%, 65.150452%, 65.388489%)" offset="0.734375"/><stop stop-opacity="1" stop-color="rgb(8.145142%, 65.353394%, 65.524292%)" offset="0.738281"/><stop stop-opacity="1" stop-color="rgb(8.181763%, 65.556335%, 65.661621%)" offset="0.742188"/><stop stop-opacity="1" stop-color="rgb(8.210754%, 65.718079%, 65.769958%)" offset="0.75"/><stop stop-opacity="1" stop-color="rgb(8.239746%, 65.879822%, 65.879822%)" offset="1"/></linearGradient></defs><g clip-path="url(#80f08af47a)"><g clip-path="url(#723b9215da)"><path fill="url(#fc3e7af47d)" d="M 4.902344 370.441406 L 370.09375 370.441406 L 370.09375 5.25 L 4.902344 5.25 Z M 4.902344 370.441406 " fill-rule="nonzero"/></g></g><g fill="#ffffff" fill-opacity="1"><g transform="translate(14.595707, 240.71852)"><g><path d="M 73.75 -113.28125 C 77.832031 -113.28125 81.632812 -112.507812 85.15625 -110.96875 C 88.6875 -109.425781 91.773438 -107.332031 94.421875 -104.6875 C 97.066406 -102.039062 99.160156 -98.953125 100.703125 -95.421875 C 102.253906 -91.890625 103.03125 -88.140625 103.03125 -84.171875 L 103.03125 -29.109375 C 103.03125 -25.140625 102.253906 -21.390625 100.703125 -17.859375 C 99.160156 -14.328125 97.066406 -11.238281 94.421875 -8.59375 C 91.773438 -5.945312 88.6875 -3.851562 85.15625 -2.3125 C 81.632812 -0.769531 77.832031 0 73.75 0 L 41.515625 0 C 37.429688 0 33.625 -0.769531 30.09375 -2.3125 C 26.570312 -3.851562 23.488281 -5.945312 20.84375 -8.59375 C 18.195312 -11.238281 16.097656 -14.328125 14.546875 -17.859375 C 13.003906 -21.390625 12.234375 -25.140625 12.234375 -29.109375 L 12.234375 -84.171875 C 12.234375 -88.140625 13.003906 -91.890625 14.546875 -95.421875 C 16.097656 -98.953125 18.195312 -102.039062 20.84375 -104.6875 C 23.488281 -107.332031 26.570312 -109.425781 30.09375 -110.96875 C 33.625 -112.507812 37.429688 -113.28125 41.515625 -113.28125 Z M 80.375 -84.171875 C 80.375 -86.046875 79.738281 -87.585938 78.46875 -88.796875 C 77.195312 -90.015625 75.625 -90.625 73.75 -90.625 L 41.515625 -90.625 C 39.640625 -90.625 38.066406 -90.015625 36.796875 -88.796875 C 35.523438 -87.585938 34.890625 -86.046875 34.890625 -84.171875 L 34.890625 -29.109375 C 34.890625 -27.234375 35.523438 -25.6875 36.796875 -24.46875 C 38.066406 -23.257812 39.640625 -22.65625 41.515625 -22.65625 L 73.75 -22.65625 C 75.625 -22.65625 77.195312 -23.257812 78.46875 -24.46875 C 79.738281 -25.6875 80.375 -27.234375 80.375 -29.109375 Z M 80.375 -84.171875 "/></g></g></g><g fill="#ffffff" fill-opacity="1"><g transform="translate(129.862068, 240.71852)"><g><path d="M 80.203125 -109.8125 C 80.203125 -110.800781 80.5625 -111.65625 81.28125 -112.375 C 82 -113.09375 82.851562 -113.453125 83.84375 -113.453125 L 99.390625 -113.453125 C 100.378906 -113.453125 101.234375 -113.09375 101.953125 -112.375 C 102.671875 -111.65625 103.03125 -110.800781 103.03125 -109.8125 L 103.03125 -3.640625 C 103.03125 -2.648438 102.671875 -1.796875 101.953125 -1.078125 C 101.234375 -0.359375 100.378906 0 99.390625 0 L 83.84375 0 C 82.851562 0 82 -0.359375 81.28125 -1.078125 C 80.5625 -1.796875 80.203125 -2.648438 80.203125 -3.640625 L 80.203125 -42.34375 L 34.890625 -83.015625 L 34.890625 -3.640625 C 34.890625 -2.648438 34.53125 -1.796875 33.8125 -1.078125 C 33.101562 -0.359375 32.25 0 31.25 0 L 15.875 0 C 14.882812 0 14.03125 -0.359375 13.3125 -1.078125 C 12.59375 -1.796875 12.234375 -2.648438 12.234375 -3.640625 L 12.234375 -109.8125 C 12.234375 -110.800781 12.59375 -111.65625 13.3125 -112.375 C 14.03125 -113.09375 14.882812 -113.453125 15.875 -113.453125 L 31.25 -113.453125 C 32.25 -113.453125 33.351562 -113.203125 34.5625 -112.703125 C 35.769531 -112.203125 36.765625 -111.625 37.546875 -110.96875 L 80.203125 -72.765625 Z M 80.203125 -109.8125 "/></g></g></g><g fill="#ffffff" fill-opacity="1"><g transform="translate(245.12843, 240.71852)"><g><path d="M 99.390625 -113.453125 C 100.378906 -113.453125 101.234375 -113.09375 101.953125 -112.375 C 102.671875 -111.65625 103.03125 -110.800781 103.03125 -109.8125 L 103.03125 -94.265625 C 103.03125 -93.273438 102.671875 -92.445312 101.953125 -91.78125 C 101.234375 -91.125 100.378906 -90.796875 99.390625 -90.796875 L 68.96875 -90.796875 L 68.96875 -3.640625 C 68.96875 -2.648438 68.609375 -1.796875 67.890625 -1.078125 C 67.171875 -0.359375 66.316406 0 65.328125 0 L 49.78125 0 C 48.789062 0 47.960938 -0.359375 47.296875 -1.078125 C 46.640625 -1.796875 46.3125 -2.648438 46.3125 -3.640625 L 46.3125 -90.796875 L 15.875 -90.796875 C 14.882812 -90.796875 14.03125 -91.125 13.3125 -91.78125 C 12.59375 -92.445312 12.234375 -93.273438 12.234375 -94.265625 L 12.234375 -109.8125 C 12.234375 -110.800781 12.59375 -111.65625 13.3125 -112.375 C 14.03125 -113.09375 14.882812 -113.453125 15.875 -113.453125 Z M 99.390625 -113.453125 "/></g></g></g></svg>
        </div>
        <span>${graphData.meta.ontologyName}</span>
      </div>

      <div class="search-container">
        <svg class="search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/>
        </svg>
        <input type="text" class="search-input" id="searchInput" placeholder="Search nodes... (press /)" />
        <div class="search-results" id="searchResults"></div>
      </div>

      <div class="view-tabs">
        <button class="view-tab active" data-view="graph">Graph</button>
        <button class="view-tab" data-view="table">Table</button>
        <button class="view-tab" data-view="source">Source</button>
      </div>

      <div class="filter-buttons" id="graphFilters">
        <button class="filter-btn active" data-filter="all">All</button>
        <button class="filter-btn" data-filter="function">
          <span class="dot function"></span> Functions
        </button>
        <button class="filter-btn" data-filter="entity">
          <span class="dot entity"></span> Entities
        </button>
        <button class="filter-btn" data-filter="accessGroup">
          <span class="dot access"></span> Access
        </button>
        ${userContextFilterBtn}
        ${orgContextFilterBtn}
      </div>

      <div class="layout-selector">
        <button class="layout-btn active" data-layout="cose" title="Force-directed">Force</button>
        <button class="layout-btn" data-layout="circle" title="Circular">Circle</button>
        <button class="layout-btn" data-layout="grid" title="Grid">Grid</button>
      </div>
    </header>

    <aside class="sidebar">
      <div class="sidebar-section">
        <div class="sidebar-title">Overview</div>
        <div class="stat-grid">
          <div class="stat-card" data-filter="function">
            <div class="stat-value">${graphData.meta.totalFunctions}</div>
            <div class="stat-label"><span class="dot" style="background: var(--node-function)"></span> Functions</div>
          </div>
          <div class="stat-card" data-filter="entity">
            <div class="stat-value">${graphData.meta.totalEntities}</div>
            <div class="stat-label"><span class="dot" style="background: var(--node-entity)"></span> Entities</div>
          </div>
          <div class="stat-card" data-filter="accessGroup">
            <div class="stat-value">${graphData.meta.totalAccessGroups}</div>
            <div class="stat-label"><span class="dot" style="background: var(--node-access)"></span> Access Groups</div>
          </div>
        </div>
      </div>

      <div class="sidebar-section">
        <div class="sidebar-title">Node Types</div>
        <div class="legend-item">
          <div class="legend-shape function"></div>
          <div class="legend-text">Function</div>
        </div>
        <div class="legend-item">
          <div class="legend-shape entity"></div>
          <div class="legend-text">Entity</div>
        </div>
        <div class="legend-item">
          <div class="legend-shape access"></div>
          <div class="legend-text">Access Group</div>
        </div>
      </div>

      <div class="sidebar-section">
        <div class="sidebar-title">Edge Types</div>
        <div class="legend-edge">
          <div class="legend-line operates"></div>
          <div class="legend-text">Operates on</div>
        </div>
        <div class="legend-edge">
          <div class="legend-line access"></div>
          <div class="legend-text">Requires access</div>
        </div>
        <div class="legend-edge">
          <div class="legend-line depends"></div>
          <div class="legend-text">Depends on</div>
        </div>
      </div>

      <div class="sidebar-section">
        <div class="sidebar-title">Keyboard Shortcuts</div>
        <div style="font-size: 12px; color: var(--text-secondary);">
          <p style="margin-bottom: 8px;"><span class="kbd">/</span> Search</p>
          <p style="margin-bottom: 8px;"><span class="kbd">Esc</span> Clear selection</p>
          <p style="margin-bottom: 8px;"><span class="kbd">F</span> Fit to view</p>
          <p><span class="kbd">1-4</span> Filter types</p>
        </div>
      </div>
    </aside>

    <main class="graph-container">
      <div id="cy"></div>
      <div class="graph-controls">
        <button class="graph-control-btn" id="zoomIn" title="Zoom in">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35M11 8v6M8 11h6"/>
          </svg>
        </button>
        <button class="graph-control-btn" id="zoomOut" title="Zoom out">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35M8 11h6"/>
          </svg>
        </button>
        <button class="graph-control-btn" id="fitView" title="Fit to view">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3M16 21h3a2 2 0 0 0 2-2v-3"/>
          </svg>
        </button>
      </div>
    </main>

    <aside class="detail-panel empty" id="detailPanel">
      <div class="empty-state-icon">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/>
        </svg>
      </div>
      <div class="empty-state-title">Select a node</div>
      <div class="empty-state-text">Click on any node in the graph to view its details, connections, and schema.</div>
    </aside>

    <!-- Table View -->
    <div class="table-view" id="tableView">
      <div id="tableContent"></div>
    </div>

    <!-- Source View -->
    <div class="source-view" id="sourceView">
      <div class="source-header">
        <span class="source-filename" id="sourceFilename">ontology.config.ts</span>
        <button class="copy-btn" id="copySourceBtn" title="Copy to clipboard">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
          </svg>
          Copy
        </button>
      </div>
      <pre class="source-code" id="sourceCode"><code>Loading...</code></pre>
    </div>
  </div>

  <!-- Review Footer -->
  <div class="review-footer ${graphData.meta.hasChanges ? '' : 'hidden'}" id="reviewFooter">
    <div class="changes-summary">
      <span>Pending changes:</span>
      ${graphData.meta.addedCount > 0 ? `<span class="change-count added">+${graphData.meta.addedCount} added</span>` : ''}
      ${graphData.meta.removedCount > 0 ? `<span class="change-count removed">−${graphData.meta.removedCount} removed</span>` : ''}
      ${graphData.meta.modifiedCount > 0 ? `<span class="change-count modified">~${graphData.meta.modifiedCount} modified</span>` : ''}
    </div>
    <div class="review-actions">
      <button class="review-btn reject" id="rejectBtn">Reject Changes</button>
      <button class="review-btn approve" id="approveBtn">Approve & Update Lockfile</button>
    </div>
  </div>

  <script>
    const graphData = ${JSON.stringify(graphData)};
    let cy;
    let selectedNode = null;
    let activeFilter = 'all';

    // Initialize Cytoscape
    function initGraph() {
      const elements = [];

      // Add nodes
      for (const node of graphData.nodes) {
        elements.push({
          group: 'nodes',
          data: {
            id: node.id,
            label: node.label,
            type: node.type,
            description: node.description,
            metadata: node.metadata,
            changeStatus: node.changeStatus || 'unchanged',
            changeDetails: node.changeDetails || null,
            usesUserContext: node.metadata?.usesUserContext || false,
            usesOrganizationContext: node.metadata?.usesOrganizationContext || false,
            isReadOnly: node.metadata?.isReadOnly,
          },
        });
      }

      // Add edges
      for (const edge of graphData.edges) {
        elements.push({
          group: 'edges',
          data: {
            id: edge.id,
            source: edge.source,
            target: edge.target,
            type: edge.type,
            label: edge.label || '',
          },
        });
      }

      cy = cytoscape({
        container: document.getElementById('cy'),
        elements,
        style: [
          // Base node style
          {
            selector: 'node',
            style: {
              'label': 'data(label)',
              'text-valign': 'center',
              'text-halign': 'center',
              'font-family': 'Space Grotesk, -apple-system, BlinkMacSystemFont, sans-serif',
              'font-size': 12,
              'font-weight': 500,
              'color': '#023d60',
              'text-outline-width': 2,
              'text-outline-color': '#ffffff',
              'background-color': '#ffffff',
              'border-width': 2,
              'width': 90,
              'height': 45,
            },
          },
          // Function nodes - Navy
          {
            selector: 'node[type="function"]',
            style: {
              'shape': 'round-hexagon',
              'border-color': '#023d60',
              'background-color': 'rgba(2, 61, 96, 0.08)',
              'width': 100,
              'height': 55,
            },
          },
          // Function nodes that are mutations (isReadOnly: false) - Orange accent
          {
            selector: 'node[type="function"][!isReadOnly]',
            style: {
              'border-color': '#fe5d26',
              'background-color': 'rgba(254, 93, 38, 0.08)',
            },
          },
          // Mutation function nodes - show edit indicator (when no userContext)
          {
            selector: 'node[type="function"][!isReadOnly]:not([?usesUserContext])',
            style: {
              'background-image': 'data:image/svg+xml,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><circle cx="16" cy="16" r="14" fill="#fff5f0" stroke="#fe5d26" stroke-width="1.5"/><g transform="translate(6, 6)" fill="none" stroke="#fe5d26" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 3.5a2.121 2.121 0 0 1 3 3L6 18l-4 1 1-4L14.5 3.5z"/></g></svg>'),
              'background-width': '18px',
              'background-height': '18px',
              'background-position-x': '50%',
              'background-position-y': '75%',
              'text-valign': 'center',
              'text-margin-y': -8,
            },
          },
          // Function nodes with userContext (read-only) - show indicator below label
          {
            selector: 'node[type="function"][?usesUserContext][?isReadOnly]',
            style: {
              'background-image': 'data:image/svg+xml,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><circle cx="16" cy="16" r="14" fill="#e8f4f8" stroke="#023d60" stroke-width="1.5"/><g transform="translate(4, 4)" fill="none" stroke="#023d60" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></g></svg>'),
              'background-width': '18px',
              'background-height': '18px',
              'background-position-x': '50%',
              'background-position-y': '75%',
              'text-valign': 'center',
              'text-margin-y': -8,
            },
          },
          // Function nodes with BOTH mutation AND userContext - show both icons
          {
            selector: 'node[type="function"][!isReadOnly][?usesUserContext]',
            style: {
              'border-color': '#fe5d26',
              'background-color': 'rgba(254, 93, 38, 0.08)',
              'background-image': [
                'data:image/svg+xml,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><circle cx="16" cy="16" r="14" fill="#fff5f0" stroke="#fe5d26" stroke-width="1.5"/><g transform="translate(6, 6)" fill="none" stroke="#fe5d26" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 3.5a2.121 2.121 0 0 1 3 3L6 18l-4 1 1-4L14.5 3.5z"/></g></svg>'),
                'data:image/svg+xml,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><circle cx="16" cy="16" r="14" fill="#e8f4f8" stroke="#023d60" stroke-width="1.5"/><g transform="translate(4, 4)" fill="none" stroke="#023d60" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></g></svg>')
              ],
              'background-width': ['16px', '16px'],
              'background-height': ['16px', '16px'],
              'background-position-x': ['35%', '65%'],
              'background-position-y': ['75%', '75%'],
              'text-valign': 'center',
              'text-margin-y': -8,
            },
          },
          // Entity nodes - Teal
          {
            selector: 'node[type="entity"]',
            style: {
              'shape': 'round-rectangle',
              'border-color': '#15a8a8',
              'background-color': 'rgba(21, 168, 168, 0.12)',
              'width': 95,
              'height': 45,
            },
          },
          // Access group nodes - Magenta
          {
            selector: 'node[type="accessGroup"]',
            style: {
              'shape': 'ellipse',
              'border-color': '#bf1363',
              'background-color': 'rgba(191, 19, 99, 0.1)',
              'width': 80,
              'height': 80,
            },
          },
          // Selected node
          {
            selector: 'node:selected',
            style: {
              'border-width': 3,
              'background-color': '#ffffff',
              'shadow-blur': 15,
              'shadow-color': 'rgba(21, 168, 168, 0.4)',
              'shadow-opacity': 1,
              'shadow-offset-x': 0,
              'shadow-offset-y': 4,
            },
          },
          // Highlighted node (connected to selected)
          {
            selector: 'node.highlighted',
            style: {
              'border-width': 3,
              'opacity': 1,
            },
          },
          // Dimmed node
          {
            selector: 'node.dimmed',
            style: {
              'opacity': 0.25,
            },
          },
          // Hidden node
          {
            selector: 'node.hidden',
            style: {
              'display': 'none',
            },
          },
          // Change status: Added - keep type color, add solid border + glow
          {
            selector: 'node[changeStatus="added"]',
            style: {
              'border-color': '#2a9d8f',
              'border-width': 3,
              'background-opacity': 0.5,
              'shadow-blur': 15,
              'shadow-color': 'rgba(42, 157, 143, 0.5)',
              'shadow-opacity': 1,
              'shadow-offset-x': 0,
              'shadow-offset-y': 0,
            },
          },
          // Change status: Removed - faded with dashed border
          {
            selector: 'node[changeStatus="removed"]',
            style: {
              'border-color': '#c44536',
              'border-width': 2,
              'border-style': 'dashed',
              'background-opacity': 0.3,
              'opacity': 0.6,
            },
          },
          // Change status: Modified - keep type color, add solid border + subtle glow
          {
            selector: 'node[changeStatus="modified"]',
            style: {
              'border-color': '#fe5d26',
              'border-width': 3,
              'background-opacity': 0.5,
              'shadow-blur': 12,
              'shadow-color': 'rgba(254, 93, 38, 0.4)',
              'shadow-opacity': 1,
              'shadow-offset-x': 0,
              'shadow-offset-y': 0,
            },
          },
          // Base edge style
          {
            selector: 'edge',
            style: {
              'width': 1.5,
              'line-color': 'rgba(2, 61, 96, 0.2)',
              'target-arrow-color': 'rgba(2, 61, 96, 0.3)',
              'target-arrow-shape': 'triangle',
              'curve-style': 'bezier',
              'arrow-scale': 0.8,
            },
          },
          // Operates-on edge - Teal
          {
            selector: 'edge[type="operates-on"]',
            style: {
              'line-color': '#15a8a8',
              'target-arrow-color': '#15a8a8',
              'width': 2,
            },
          },
          // Requires-access edge - Magenta
          {
            selector: 'edge[type="requires-access"]',
            style: {
              'line-color': '#bf1363',
              'target-arrow-color': '#bf1363',
              'line-style': 'dashed',
              'line-dash-pattern': [6, 3],
            },
          },
          // Depends-on edge - Orange
          {
            selector: 'edge[type="depends-on"]',
            style: {
              'line-color': '#fe5d26',
              'target-arrow-color': '#fe5d26',
              'line-style': 'dotted',
              'line-dash-pattern': [2, 4],
            },
          },
          // Highlighted edge
          {
            selector: 'edge.highlighted',
            style: {
              'width': 3,
              'opacity': 1,
            },
          },
          // Dimmed edge
          {
            selector: 'edge.dimmed',
            style: {
              'opacity': 0.12,
            },
          },
          // Hidden edge
          {
            selector: 'edge.hidden',
            style: {
              'display': 'none',
            },
          },
        ],
        layout: {
          name: 'cose',
          animate: false,
          nodeRepulsion: 8000,
          idealEdgeLength: 100,
          edgeElasticity: 100,
          gravity: 0.25,
          numIter: 1000,
          padding: 50,
        },
        minZoom: 0.2,
        maxZoom: 3,
        wheelSensitivity: 0.3,
      });

      // Node click handler
      cy.on('tap', 'node', function(evt) {
        const node = evt.target;
        selectNode(node);
      });

      // Background click handler
      cy.on('tap', function(evt) {
        if (evt.target === cy) {
          clearSelection();
        }
      });
    }

    function selectNode(node) {
      // Clear previous selection styling
      cy.elements().removeClass('highlighted dimmed');

      // Select node
      cy.nodes().unselect();
      node.select();
      selectedNode = node;

      // Highlight connected nodes and edges
      const connectedEdges = node.connectedEdges();
      const connectedNodes = connectedEdges.connectedNodes();

      node.addClass('highlighted');
      connectedNodes.addClass('highlighted');
      connectedEdges.addClass('highlighted');

      cy.elements().not(node).not(connectedNodes).not(connectedEdges).addClass('dimmed');

      // Update detail panel
      updateDetailPanel(node.data());
    }

    function selectNodeById(nodeId) {
      const node = cy.getElementById(nodeId);
      if (node.length > 0) {
        selectNode(node);
        cy.animate({
          center: { eles: node },
          zoom: 1.5,
          duration: 300,
        });
      }
    }

    function clearSelection() {
      cy.elements().removeClass('highlighted dimmed');
      cy.nodes().unselect();
      selectedNode = null;
      showEmptyState();
    }

    function showEmptyState() {
      const panel = document.getElementById('detailPanel');
      panel.className = 'detail-panel empty';
      panel.innerHTML = \`
        <div class="empty-state-icon">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/>
          </svg>
        </div>
        <div class="empty-state-title">Select a node</div>
        <div class="empty-state-text">Click on any node in the graph to view its details, connections, and schema.</div>
      \`;
    }

    async function updateDetailPanel(data) {
      const panel = document.getElementById('detailPanel');
      panel.className = 'detail-panel';

      // Fetch detailed node data
      const [type, id] = data.id.split(':');
      const response = await fetch(\`/api/node/\${type}/\${id}\`);
      const details = await response.json();

      // Build change status badge if applicable
      const changeStatus = data.changeStatus || 'unchanged';
      const changeBadge = changeStatus !== 'unchanged'
        ? \`<span class="detail-change-badge \${changeStatus}">\${changeStatus === 'added' ? 'New' : changeStatus === 'removed' ? 'Removed' : 'Modified'}</span>\`
        : '';

      // Build user context badge if applicable
      const userContextBadge = data.metadata?.usesUserContext
        ? \`<span class="user-context-badge"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>User Context</span>\`
        : '';

      // Build organization context badge if applicable
      const orgContextBadge = data.metadata?.usesOrganizationContext
        ? \`<span class="org-context-badge"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18"/><path d="M15 3v18"/></svg>Org Context</span>\`
        : '';

      // Build read-only badge for functions
      const readOnlyBadge = data.type === 'function' && data.isReadOnly !== undefined
        ? \`<span class="readonly-badge \${data.isReadOnly ? 'query' : 'mutation'}">\${data.isReadOnly ? 'Query' : 'Mutation'}</span>\`
        : '';

      let html = \`
        <div class="detail-header">
          <div class="detail-type \${data.type}">\${formatType(data.type)}\${changeBadge}\${readOnlyBadge}\${userContextBadge}\${orgContextBadge}</div>
          <div class="detail-name">\${data.label}</div>
          <div class="detail-description">\${data.description || 'No description'}</div>
        </div>
      \`;

      // Show change details if this node was modified
      if (changeStatus !== 'unchanged' && data.changeDetails) {
        html += buildChangeSection(changeStatus, data.changeDetails);
      } else if (changeStatus === 'added') {
        html += \`
          <div class="detail-section change-section added">
            <div class="detail-section-title">Change</div>
            <div class="change-summary">This is a newly added \${formatType(data.type).toLowerCase()}.</div>
          </div>
        \`;
      } else if (changeStatus === 'removed') {
        html += \`
          <div class="detail-section change-section removed">
            <div class="detail-section-title">Change</div>
            <div class="change-summary">This \${formatType(data.type).toLowerCase()} will be removed.</div>
          </div>
        \`;
      }

      if (data.type === 'function') {
        // Access Groups
        if (details.connections.accessGroups.length > 0) {
          html += \`
            <div class="detail-section">
              <div class="detail-section-title">Access Groups</div>
              <div class="tag-list">
                \${details.connections.accessGroups.map(g =>
                  \`<span class="tag access" onclick="selectNodeById('accessGroup:\${g}')">\${g}</span>\`
                ).join('')}
              </div>
            </div>
          \`;
        }

        // Entities
        if (details.connections.entities.length > 0) {
          html += \`
            <div class="detail-section">
              <div class="detail-section-title">Entities</div>
              <div class="tag-list">
                \${details.connections.entities.map(e =>
                  \`<span class="tag entity" onclick="selectNodeById('entity:\${e}')">\${e}</span>\`
                ).join('')}
              </div>
            </div>
          \`;
        }

        // Dependencies
        if (details.connections.dependsOn.length > 0) {
          html += \`
            <div class="detail-section">
              <div class="detail-section-title">Dependencies (fieldFrom)</div>
              \${details.connections.dependsOn.map(d => \`
                <div class="dependency-item">
                  <span class="function-link" onclick="selectNodeById('function:\${d.functionName}')">\${d.functionName}</span>
                  <span class="dependency-path">\${d.path}</span>
                </div>
              \`).join('')}
            </div>
          \`;
        }

        // Depended on by
        if (details.connections.dependedOnBy.length > 0) {
          html += \`
            <div class="detail-section">
              <div class="detail-section-title">Used By</div>
              <ul class="function-list">
                \${details.connections.dependedOnBy.map(f => \`
                  <li><span class="function-link" onclick="selectNodeById('function:\${f}')">\${f}</span></li>
                \`).join('')}
              </ul>
            </div>
          \`;
        }

        // Input Schema
        if (data.metadata.inputs) {
          html += \`
            <div class="detail-section">
              <div class="detail-section-title">Input Schema</div>
              <pre class="schema-viewer">\${formatSchema(data.metadata.inputs)}</pre>
            </div>
          \`;
        }

        // Returns (prominent display)
        if (data.metadata.outputs) {
          html += \`
            <div class="detail-section returns-section">
              <div class="detail-section-title">Returns</div>
              <div class="returns-display">
                <span class="returns-type-large">\${formatSchemaType(data.metadata.outputs)}</span>
              </div>
              <pre class="schema-viewer">\${formatSchema(data.metadata.outputs)}</pre>
            </div>
          \`;
        }

        // Test Function button (only for non-removed functions)
        if (changeStatus !== 'removed') {
          html += \`
            <div class="detail-section">
              <button class="test-btn" onclick="openTestPanel('\${data.label}')">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polygon points="5 3 19 12 5 21 5 3"/>
                </svg>
                Test Function
              </button>
            </div>
          \`;
        }

        // Test panel placeholder (will be populated when test button is clicked)
        html += '<div id="testPanel" class="test-panel" style="display: none;"></div>';
      } else if (data.type === 'accessGroup' || data.type === 'entity') {
        // Functions with details
        if (details.connections.functions.length > 0) {
          html += \`
            <div class="detail-section">
              <div class="detail-section-title">Functions (\${details.connections.functions.length})</div>
              <div class="function-cards">
                \${details.connections.functions.map(f => \`
                  <div class="function-card" onclick="selectNodeById('function:\${f.name}')">
                    <div class="function-card-header">
                      <span class="function-card-name">\${f.name}</span>
                    </div>
                    <div class="function-card-desc">\${f.description}</div>
                    \${f.outputs ? \`
                      <div class="function-card-returns">
                        <span class="returns-label">Returns:</span>
                        <span class="returns-type">\${formatSchemaType(f.outputs)}</span>
                      </div>
                    \` : ''}
                  </div>
                \`).join('')}
              </div>
            </div>
          \`;
        } else {
          html += \`
            <div class="detail-section">
              <div class="detail-section-title">Functions</div>
              <p class="no-data">No functions \${data.type === 'accessGroup' ? 'require this access' : 'operate on this entity'}</p>
            </div>
          \`;
        }
      }

      panel.innerHTML = html;
    }

    function formatType(type) {
      const labels = {
        function: 'Function',
        entity: 'Entity',
        accessGroup: 'Access Group',
      };
      return labels[type] || type;
    }

    function formatSchema(schema) {
      if (!schema) return 'No schema';

      // Simplified schema display
      if (schema.type === 'object' && schema.properties) {
        const lines = [];
        for (const [key, value] of Object.entries(schema.properties)) {
          const required = schema.required?.includes(key) ? '' : '?';
          const type = formatSchemaType(value);
          lines.push(\`  \${key}\${required}: \${type}\`);
        }
        return '{\\n' + lines.join(',\\n') + '\\n}';
      }

      return JSON.stringify(schema, null, 2);
    }

    function formatSchemaType(schema) {
      if (!schema) return 'unknown';
      if (schema.type === 'array') {
        return \`\${formatSchemaType(schema.items)}[]\`;
      }
      if (schema.type === 'object') {
        return 'object';
      }
      if (schema.enum) {
        return schema.enum.map(e => \`"\${e}"\`).join(' | ');
      }
      // Handle union/intersection schemas
      if (schema.anyOf) {
        return schema.anyOf.map(formatSchemaType).join(' | ');
      }
      if (schema.oneOf) {
        return schema.oneOf.map(formatSchemaType).join(' | ');
      }
      if (schema.allOf) {
        return schema.allOf.map(formatSchemaType).join(' & ');
      }
      let type = schema.type || 'unknown';
      if (schema.format) {
        type += \` (\${schema.format})\`;
      }
      return type;
    }

    function buildChangeSection(changeStatus, details) {
      if (!details) return '';

      let items = [];

      if (details.oldAccess && details.newAccess) {
        const oldList = details.oldAccess.join(', ');
        const newList = details.newAccess.join(', ');
        items.push(\`
          <div class="change-item">
            <span class="change-label">Access:</span>
            <span class="change-old">\${oldList}</span>
            <span class="change-arrow">→</span>
            <span class="change-new">\${newList}</span>
          </div>
        \`);
      }

      if (details.oldEntities && details.newEntities) {
        const oldList = details.oldEntities.join(', ') || '(none)';
        const newList = details.newEntities.join(', ') || '(none)';
        items.push(\`
          <div class="change-item">
            <span class="change-label">Entities:</span>
            <span class="change-old">\${oldList}</span>
            <span class="change-arrow">→</span>
            <span class="change-new">\${newList}</span>
          </div>
        \`);
      }

      if (details.oldDescription && details.newDescription) {
        items.push(\`
          <div class="change-item change-item-block">
            <span class="change-label">Description:</span>
            <div class="change-description-diff">
              <div class="change-old">\${details.oldDescription}</div>
              <div class="change-arrow">↓</div>
              <div class="change-new">\${details.newDescription}</div>
            </div>
          </div>
        \`);
      }

      if (details.inputsChanged) {
        items.push(\`
          <div class="change-item">
            <span class="change-label">Input schema changed</span>
          </div>
        \`);
      }

      if (details.outputsChanged) {
        items.push(\`
          <div class="change-item">
            <span class="change-label">Output schema changed</span>
          </div>
        \`);
      }

      if (items.length === 0) {
        items.push('<div class="change-item"><span class="change-label">Details modified</span></div>');
      }

      return \`
        <div class="detail-section change-section \${changeStatus}">
          <div class="detail-section-title">Changes</div>
          \${items.join('')}
        </div>
      \`;
    }

    // Filtering
    function setFilter(filter) {
      activeFilter = filter;

      // Update button states
      document.querySelectorAll('.filter-btn').forEach(btn => {
        btn.classList.toggle('active', btn.dataset.filter === filter);
      });
      document.querySelectorAll('.stat-card').forEach(card => {
        card.classList.toggle('active', card.dataset.filter === filter);
      });

      // Apply filter to graph
      if (filter === 'all') {
        cy.nodes().removeClass('hidden');
        cy.edges().removeClass('hidden');
      } else if (filter === 'userContext') {
        // Special filter: show only functions with userContext
        cy.nodes().forEach(node => {
          if (node.data('type') === 'function' && node.data('usesUserContext')) {
            node.removeClass('hidden');
          } else {
            node.addClass('hidden');
          }
        });
        cy.edges().addClass('hidden');
      } else if (filter === 'organizationContext') {
        // Special filter: show only functions with organizationContext
        cy.nodes().forEach(node => {
          if (node.data('type') === 'function' && node.data('usesOrganizationContext')) {
            node.removeClass('hidden');
          } else {
            node.addClass('hidden');
          }
        });
        cy.edges().addClass('hidden');
      } else {
        cy.nodes().forEach(node => {
          if (node.data('type') === filter) {
            node.removeClass('hidden');
          } else {
            node.addClass('hidden');
          }
        });
        cy.edges().forEach(edge => {
          const source = cy.getElementById(edge.data('source'));
          const target = cy.getElementById(edge.data('target'));
          if (source.hasClass('hidden') || target.hasClass('hidden')) {
            edge.addClass('hidden');
          } else {
            edge.removeClass('hidden');
          }
        });
      }
    }

    // Layout
    function setLayout(layoutName) {
      document.querySelectorAll('.layout-btn').forEach(btn => {
        btn.classList.toggle('active', btn.dataset.layout === layoutName);
      });

      const layouts = {
        cose: {
          name: 'cose',
          animate: true,
          animationDuration: 500,
          nodeRepulsion: 8000,
          idealEdgeLength: 100,
          gravity: 0.25,
          padding: 50,
        },
        circle: {
          name: 'circle',
          animate: true,
          animationDuration: 500,
          padding: 50,
        },
        grid: {
          name: 'grid',
          animate: true,
          animationDuration: 500,
          padding: 50,
          rows: Math.ceil(Math.sqrt(graphData.nodes.length)),
        },
      };

      cy.layout(layouts[layoutName]).run();
    }

    // Search
    let searchTimeout;
    const searchInput = document.getElementById('searchInput');
    const searchResults = document.getElementById('searchResults');

    searchInput.addEventListener('input', (e) => {
      clearTimeout(searchTimeout);
      const query = e.target.value.trim();

      if (query.length < 1) {
        searchResults.classList.remove('visible');
        return;
      }

      searchTimeout = setTimeout(async () => {
        const response = await fetch(\`/api/search?q=\${encodeURIComponent(query)}\`);
        const data = await response.json();

        if (data.results.length > 0) {
          searchResults.innerHTML = data.results.map(r => \`
            <div class="search-result-item" data-node-id="\${r.id}">
              <span class="search-result-type \${r.type}"></span>
              <span class="search-result-label">\${r.label}</span>
              <span class="search-result-match">\${r.matchType}</span>
            </div>
          \`).join('');
          searchResults.classList.add('visible');
        } else {
          searchResults.innerHTML = '<div class="search-result-item"><span class="search-result-label" style="color: var(--text-muted)">No results found</span></div>';
          searchResults.classList.add('visible');
        }
      }, 150);
    });

    searchResults.addEventListener('click', (e) => {
      const item = e.target.closest('.search-result-item');
      if (item && item.dataset.nodeId) {
        selectNodeById(item.dataset.nodeId);
        searchInput.value = '';
        searchResults.classList.remove('visible');
      }
    });

    searchInput.addEventListener('blur', () => {
      setTimeout(() => searchResults.classList.remove('visible'), 200);
    });

    // Event listeners
    document.querySelectorAll('.filter-btn').forEach(btn => {
      btn.addEventListener('click', () => setFilter(btn.dataset.filter));
    });

    document.querySelectorAll('.stat-card').forEach(card => {
      card.addEventListener('click', () => setFilter(card.dataset.filter));
    });

    document.querySelectorAll('.layout-btn').forEach(btn => {
      btn.addEventListener('click', () => setLayout(btn.dataset.layout));
    });

    document.getElementById('zoomIn').addEventListener('click', () => {
      cy.zoom(cy.zoom() * 1.3);
    });

    document.getElementById('zoomOut').addEventListener('click', () => {
      cy.zoom(cy.zoom() / 1.3);
    });

    document.getElementById('fitView').addEventListener('click', () => {
      cy.fit(50);
    });

    // Keyboard shortcuts
    document.addEventListener('keydown', (e) => {
      // Ignore if typing in input
      if (e.target.tagName === 'INPUT') {
        if (e.key === 'Escape') {
          e.target.blur();
          searchResults.classList.remove('visible');
        }
        return;
      }

      switch (e.key) {
        case '/':
          e.preventDefault();
          searchInput.focus();
          break;
        case 'Escape':
          clearSelection();
          break;
        case 'f':
        case 'F':
          cy.fit(50);
          break;
        case '1':
          setFilter('all');
          break;
        case '2':
          setFilter('function');
          break;
        case '3':
          setFilter('entity');
          break;
        case '4':
          setFilter('accessGroup');
          break;
      }
    });

    // Initialize - explicitly load fonts before rendering graph
    // document.fonts.ready is unreliable in Chromium, use document.fonts.load() instead
    async function loadFontsAndInit() {
      try {
        // Explicitly load the fonts we need for canvas
        await Promise.all([
          document.fonts.load('500 12px "Space Grotesk"'),
          document.fonts.load('600 12px "Space Grotesk"'),
          document.fonts.load('400 12px "Space Mono"'),
        ]);
        console.log('Fonts loaded:', document.fonts.check('500 12px "Space Grotesk"') ? 'Space Grotesk OK' : 'Space Grotesk FAILED');
      } catch (e) {
        console.warn('Font loading error:', e);
      }
      initGraph();
    }

    // Debug: Check font after render (call from console: checkFont())
    window.checkFont = function() {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');

      // Measure text with Space Grotesk vs fallback
      ctx.font = '500 12px "Space Grotesk", sans-serif';
      const spaceWidth = ctx.measureText('Hello World').width;

      ctx.font = '500 12px sans-serif';
      const fallbackWidth = ctx.measureText('Hello World').width;

      ctx.font = '500 12px Arial';
      const arialWidth = ctx.measureText('Hello World').width;

      console.log('Font widths:', {
        'Space Grotesk': spaceWidth,
        'sans-serif fallback': fallbackWidth,
        'Arial': arialWidth,
        'Using Space Grotesk': spaceWidth !== fallbackWidth && spaceWidth !== arialWidth
      });

      return document.fonts.check('500 12px "Space Grotesk"');
    };

    // View tab switching
    let currentView = 'graph';

    function switchView(view) {
      currentView = view;

      // Update tab buttons
      document.querySelectorAll('.view-tab').forEach(btn => {
        btn.classList.toggle('active', btn.dataset.view === view);
      });

      // Show/hide views
      const graphContainer = document.querySelector('.graph-container');
      const detailPanel = document.getElementById('detailPanel');
      const tableView = document.getElementById('tableView');
      const sourceView = document.getElementById('sourceView');
      const graphFilters = document.getElementById('graphFilters');
      const layoutSelector = document.querySelector('.layout-selector');

      if (view === 'graph') {
        graphContainer.style.display = 'block';
        detailPanel.style.display = 'block';
        tableView.classList.remove('active');
        sourceView.classList.remove('active');
        if (graphFilters) graphFilters.style.display = 'flex';
        if (layoutSelector) layoutSelector.style.display = 'flex';
      } else if (view === 'table') {
        graphContainer.style.display = 'none';
        detailPanel.style.display = 'none';
        tableView.classList.add('active');
        sourceView.classList.remove('active');
        if (graphFilters) graphFilters.style.display = 'none';
        if (layoutSelector) layoutSelector.style.display = 'none';
        renderTableView();
      } else if (view === 'source') {
        graphContainer.style.display = 'none';
        detailPanel.style.display = 'none';
        tableView.classList.remove('active');
        sourceView.classList.add('active');
        if (graphFilters) graphFilters.style.display = 'none';
        if (layoutSelector) layoutSelector.style.display = 'none';
        loadSourceView();
      }
    }

    document.querySelectorAll('.view-tab').forEach(btn => {
      btn.addEventListener('click', () => switchView(btn.dataset.view));
    });

    // Table view rendering
    function renderTableView() {
      const container = document.getElementById('tableContent');
      const nodes = graphData.nodes;
      const diff = graphData.diff;

      // Group nodes by type
      const accessGroups = nodes.filter(n => n.type === 'accessGroup');
      const entities = nodes.filter(n => n.type === 'entity');
      const functions = nodes.filter(n => n.type === 'function');

      let html = '';

      // Access Groups section
      html += renderTableSection('Access Groups', accessGroups, 'accessGroup');

      // Entities section
      if (entities.length > 0) {
        html += renderTableSection('Entities', entities, 'entity');
      }

      // Functions section
      html += renderTableSection('Functions', functions, 'function');

      container.innerHTML = html;

      // Add collapse/expand handlers
      container.querySelectorAll('.table-section-header').forEach(header => {
        header.addEventListener('click', () => {
          header.parentElement.classList.toggle('collapsed');
        });
      });
    }

    // Source view
    let sourceLoaded = false;
    let sourceContent = '';

    async function loadSourceView() {
      if (sourceLoaded) return;

      const codeEl = document.getElementById('sourceCode').querySelector('code');
      const filenameEl = document.getElementById('sourceFilename');

      try {
        const res = await fetch('/api/source');
        if (!res.ok) throw new Error('Failed to load source');
        const data = await res.json();

        sourceContent = data.source;
        filenameEl.textContent = data.filename;
        codeEl.innerHTML = highlightTypeScript(data.source);
        sourceLoaded = true;
      } catch (err) {
        codeEl.textContent = 'Error loading source: ' + err.message;
      }
    }

    function highlightTypeScript(code) {
      // Escape HTML first
      code = code.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');

      // Comments (single and multi-line)
      code = code.replace(/(\\/\\/.*$)/gm, '<span class="comment">$1</span>');
      code = code.replace(/(\\/\\*[\\s\\S]*?\\*\\/)/g, '<span class="comment">$1</span>');

      // Strings (double, single, and template)
      code = code.replace(/("(?:[^"\\\\]|\\\\.)*")/g, '<span class="string">$1</span>');
      code = code.replace(/('(?:[^'\\\\]|\\\\.)*')/g, '<span class="string">$1</span>');
      code = code.replace(/(\`(?:[^\`\\\\]|\\\\.)*\`)/g, '<span class="string">$1</span>');

      // Keywords
      const keywords = ['import', 'export', 'from', 'const', 'let', 'var', 'function', 'return', 'if', 'else', 'for', 'while', 'class', 'extends', 'new', 'this', 'true', 'false', 'null', 'undefined', 'typeof', 'instanceof', 'async', 'await', 'default', 'as', 'type', 'interface'];
      keywords.forEach(kw => {
        code = code.replace(new RegExp('\\\\b(' + kw + ')\\\\b', 'g'), '<span class="keyword">$1</span>');
      });

      // Numbers
      code = code.replace(/\\b(\\d+\\.?\\d*)\\b/g, '<span class="number">$1</span>');

      // Function calls
      code = code.replace(/\\b([a-zA-Z_][a-zA-Z0-9_]*)\\s*\\(/g, '<span class="function">$1</span>(');

      return code;
    }

    // Copy source button
    document.getElementById('copySourceBtn').addEventListener('click', async () => {
      const btn = document.getElementById('copySourceBtn');
      try {
        await navigator.clipboard.writeText(sourceContent);
        btn.classList.add('copied');
        btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> Copied!';
        setTimeout(() => {
          btn.classList.remove('copied');
          btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> Copy';
        }, 2000);
      } catch (err) {
        console.error('Failed to copy:', err);
      }
    });

    function renderTableSection(title, items, type) {
      const changedCount = items.filter(n => n.changeStatus !== 'unchanged').length;

      let html = '<div class="table-section">';
      html += '<div class="table-section-header">';
      html += '<div class="table-section-title">';
      html += '<span class="dot" style="background: var(--node-' + (type === 'accessGroup' ? 'access' : type) + ')"></span>';
      html += title;
      html += '<span class="table-section-count">' + items.length + '</span>';
      if (changedCount > 0) {
        html += '<span class="change-badge modified">' + changedCount + '</span>';
      }
      html += '</div>';
      html += '<svg class="table-section-toggle" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>';
      html += '</div>';
      html += '<div class="table-section-content">';

      // Sort: changed items first, then by name
      const sortedItems = [...items].sort((a, b) => {
        const aChanged = a.changeStatus !== 'unchanged' ? 0 : 1;
        const bChanged = b.changeStatus !== 'unchanged' ? 0 : 1;
        if (aChanged !== bChanged) return aChanged - bChanged;
        return a.label.localeCompare(b.label);
      });

      for (const item of sortedItems) {
        html += renderTableItem(item, type);
      }

      html += '</div></div>';
      return html;
    }

    function renderTableItem(item, type) {
      const statusClass = item.changeStatus !== 'unchanged' ? item.changeStatus : '';
      const icon = item.changeStatus === 'added' ? '+' : item.changeStatus === 'removed' ? '−' : item.changeStatus === 'modified' ? '~' : '';

      let html = '<div class="table-item ' + statusClass + '">';
      html += '<div class="table-item-icon">' + icon + '</div>';
      html += '<div class="table-item-content">';
      html += '<div class="table-item-name">' + escapeHtml(item.label) + '</div>';
      html += '<div class="table-item-description">' + escapeHtml(item.description) + '</div>';

      // Show tags for functions
      if (type === 'function' && graphData.edges) {
        const accessEdges = graphData.edges.filter(e => e.source === item.id && e.type === 'requires-access');
        const entityEdges = graphData.edges.filter(e => e.source === item.id && e.type === 'operates-on');

        if (accessEdges.length > 0 || entityEdges.length > 0) {
          html += '<div class="table-item-tags">';
          for (const edge of accessEdges) {
            const groupName = edge.target.replace('accessGroup:', '');
            html += '<span class="table-item-tag access">' + escapeHtml(groupName) + '</span>';
          }
          for (const edge of entityEdges) {
            const entityName = edge.target.replace('entity:', '');
            html += '<span class="table-item-tag entity">' + escapeHtml(entityName) + '</span>';
          }
          html += '</div>';
        }
      }

      // Show change details
      if (item.changeDetails && item.changeStatus === 'modified') {
        const details = item.changeDetails;
        html += '<div class="table-item-change">';
        if (details.oldAccess && details.newAccess) {
          html += '<div>Access: <span class="old">' + details.oldAccess.join(', ') + '</span><span class="arrow">→</span><span class="new">' + details.newAccess.join(', ') + '</span></div>';
        }
        if (details.inputsChanged) {
          html += '<div>Input schema changed</div>';
        }
        if (details.outputsChanged) {
          html += '<div>Output schema changed</div>';
        }
        if (details.entitiesChanged) {
          html += '<div>Entities: <span class="old">' + (details.oldEntities || []).join(', ') + '</span><span class="arrow">→</span><span class="new">' + (details.newEntities || []).join(', ') + '</span></div>';
        }
        html += '</div>';
      }

      html += '</div></div>';
      return html;
    }

    function escapeHtml(text) {
      const div = document.createElement('div');
      div.textContent = text || '';
      return div.innerHTML;
    }

    // Approve/Reject handlers
    const approveBtn = document.getElementById('approveBtn');
    const rejectBtn = document.getElementById('rejectBtn');

    if (approveBtn) {
      approveBtn.addEventListener('click', async () => {
        approveBtn.disabled = true;
        rejectBtn.disabled = true;
        try {
          const response = await fetch('/api/approve', { method: 'POST' });
          if (response.ok) {
            document.getElementById('reviewFooter').innerHTML =
              '<div class="changes-summary" style="color: var(--vanna-teal);">✓ Changes approved! Lockfile updated. You can close this window.</div>';
          } else {
            throw new Error('Failed to approve');
          }
        } catch (error) {
          alert('Failed to approve changes: ' + error.message);
          approveBtn.disabled = false;
          rejectBtn.disabled = false;
        }
      });
    }

    if (rejectBtn) {
      rejectBtn.addEventListener('click', async () => {
        approveBtn.disabled = true;
        rejectBtn.disabled = true;
        try {
          await fetch('/api/reject', { method: 'POST' });
          document.getElementById('reviewFooter').innerHTML =
            '<div class="changes-summary" style="color: var(--change-removed);">✕ Changes rejected. You can close this window.</div>';
        } catch (error) {
          alert('Failed to reject changes: ' + error.message);
          approveBtn.disabled = false;
          rejectBtn.disabled = false;
        }
      });
    }

    // ========== Test Function Modal ==========
    let testConfig = null;
    let currentTestFunction = null;
    let loadedFieldOptions = {};
    let currentResultData = null;
    let currentResultView = 'table'; // 'table' or 'json'

    // Load config (environments, access groups) on startup
    async function loadTestConfig() {
      try {
        const res = await fetch('/api/config');
        testConfig = await res.json();
      } catch (err) {
        console.error('Failed to load config:', err);
      }
    }
    loadTestConfig();

    // Open test modal for a function
    async function openTestPanel(functionName) {
      currentTestFunction = functionName;
      loadedFieldOptions = {};
      currentResultData = null;

      const backdrop = document.getElementById('testModalBackdrop');
      const nameEl = document.getElementById('testModalFunctionName');
      const body = document.getElementById('testModalBody');

      if (!backdrop || !body) return;

      nameEl.textContent = \`Test: \${functionName}\`;
      body.innerHTML = '<div style="text-align: center; padding: 40px; color: var(--text-muted);">Loading...</div>';
      backdrop.classList.add('visible');

      try {
        const res = await fetch(\`/api/function/\${functionName}/schema\`);
        const data = await res.json();

        if (data.error) {
          body.innerHTML = \`<div class="no-data" style="padding: 40px; text-align: center;">Error: \${data.error}</div>\`;
          return;
        }

        renderTestModal(data);
      } catch (err) {
        body.innerHTML = \`<div class="no-data" style="padding: 40px; text-align: center;">Error loading schema: \${err.message}</div>\`;
      }
    }
    window.openTestPanel = openTestPanel;

    function closeTestModal() {
      const backdrop = document.getElementById('testModalBackdrop');
      if (backdrop) {
        backdrop.classList.remove('visible');
      }
      currentTestFunction = null;
      currentResultData = null;
    }
    window.closeTestModal = closeTestModal;

    // Also keep closeTestPanel for backwards compatibility
    function closeTestPanel() {
      closeTestModal();
    }
    window.closeTestPanel = closeTestPanel;

    function renderTestModal(data) {
      const body = document.getElementById('testModalBody');
      const { name, description, schema } = data;

      // Separate fields into regular, fieldFrom, userContext, and organizationContext
      const regularFields = schema.filter(f => !f.isUserContext && !f.isOrganizationContext && !f.fieldFrom);
      const fieldFromFields = schema.filter(f => f.fieldFrom);
      const userContextFields = schema.filter(f => f.isUserContext);
      const orgContextFields = schema.filter(f => f.isOrganizationContext);

      let html = '';

      // Description if available
      if (description) {
        html += \`<p class="test-modal-description">\${description}</p>\`;
      }

      // Test Context Section
      html += \`
        <div class="test-context-section">
          <div class="test-context-header">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/>
            </svg>
            <span class="test-context-title">Test Context</span>
          </div>
          <div class="test-form-group">
            <label class="test-form-label">Environment</label>
            <select class="test-form-select" id="testEnv">
              \${testConfig?.environments?.map(e => \`<option value="\${e}">\${e}</option>\`).join('') || '<option value="dev">dev</option>'}
            </select>
          </div>
          <div class="test-form-group">
            <label class="test-form-label">Access Groups</label>
            <div class="access-groups-grid">
              \${testConfig?.accessGroups?.map(g => \`
                <label class="access-group-checkbox checked">
                  <input type="checkbox" name="accessGroup" value="\${g}" checked onchange="this.parentElement.classList.toggle('checked', this.checked)">
                  <span>\${g}</span>
                </label>
              \`).join('') || '<span style="color: var(--text-muted); font-size: 12px;">No access groups defined</span>'}
            </div>
          </div>
        </div>
      \`;

      // Function Inputs Section
      if (regularFields.length > 0 || fieldFromFields.length > 0) {
        html += \`
          <div class="test-form-section">
            <div class="test-form-section-title">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                <line x1="9" y1="9" x2="15" y2="9"/>
                <line x1="9" y1="15" x2="15" y2="15"/>
              </svg>
              Function Inputs
            </div>
        \`;

        for (const field of regularFields) {
          html += renderFormField(field);
        }

        for (const field of fieldFromFields) {
          html += renderFieldFromField(field);
        }

        html += '</div>';
      }

      // UserContext fields (mocked)
      if (userContextFields.length > 0) {
        html += \`
          <div class="user-context-section">
            <div class="user-context-header">
              <div class="user-context-title">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                  <circle cx="12" cy="7" r="4"/>
                </svg>
                Mock User Context
              </div>
              <span class="mock-badge">Test Only</span>
            </div>
        \`;

        for (const field of userContextFields) {
          html += renderUserContextField(field);
        }

        html += '</div>';
      }

      // OrganizationContext fields (mocked)
      if (orgContextFields.length > 0) {
        html += \`
          <div class="user-context-section">
            <div class="user-context-header">
              <div class="user-context-title">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <rect x="3" y="3" width="18" height="18" rx="2"/>
                  <path d="M9 3v18"/>
                  <path d="M15 3v18"/>
                </svg>
                Mock Organization Context
              </div>
              <span class="mock-badge">Test Only</span>
            </div>
        \`;

        for (const field of orgContextFields) {
          html += renderUserContextField(field); // Reuse same rendering function
        }

        html += '</div>';
      }

      // Execute Button and Results
      html += \`
        <button class="test-execute-btn" id="executeTestBtn" onclick="executeTest()">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polygon points="5 3 19 12 5 21 5 3"/>
          </svg>
          Execute Function
        </button>
        <div id="testResult"></div>
      \`;

      body.innerHTML = html;
    }

    function formatFieldName(name) {
      // Convert camelCase to Title Case with spaces
      return name
        .replace(/([A-Z])/g, ' $1')
        .replace(/^./, str => str.toUpperCase())
        .trim();
    }

    function getTypeHint(schema) {
      if (schema.enum) return \`One of: \${schema.enum.join(', ')}\`;
      if (schema.type === 'number' || schema.type === 'integer') {
        let hint = schema.type === 'integer' ? 'Integer' : 'Number';
        if (schema.minimum !== undefined) hint += \`, min: \${schema.minimum}\`;
        if (schema.maximum !== undefined) hint += \`, max: \${schema.maximum}\`;
        return hint;
      }
      if (schema.type === 'string') {
        if (schema.format === 'email') return 'Email address';
        if (schema.format === 'date') return 'Date (YYYY-MM-DD)';
        if (schema.format === 'date-time') return 'Date and time';
        if (schema.minLength || schema.maxLength) {
          const parts = [];
          if (schema.minLength) parts.push(\`min \${schema.minLength}\`);
          if (schema.maxLength) parts.push(\`max \${schema.maxLength}\`);
          return \`String (\${parts.join(', ')} chars)\`;
        }
        return 'Text';
      }
      if (schema.type === 'array') return 'Array (JSON format)';
      if (schema.type === 'object') return 'Object (JSON format)';
      return '';
    }

    function renderFormField(field) {
      const requiredMark = field.required ? '<span class="required">*</span>' : '';
      const inputId = \`test-input-\${field.name}\`;
      const displayName = formatFieldName(field.name);
      const typeHint = getTypeHint(field.schema);

      let inputHtml = '';

      if (field.schema.enum) {
        // Enum field - render as select
        inputHtml = \`
          <select class="test-form-select" id="\${inputId}" data-field="\${field.name}">
            <option value="">Select an option...</option>
            \${field.schema.enum.map(v => \`<option value="\${v}">\${v}</option>\`).join('')}
          </select>
        \`;
      } else if (field.schema.type === 'boolean') {
        // Boolean - render as checkbox
        inputHtml = \`
          <div class="test-form-checkbox">
            <input type="checkbox" id="\${inputId}" data-field="\${field.name}" data-type="boolean">
            <label for="\${inputId}">\${displayName}</label>
          </div>
        \`;
        return \`<div class="test-form-group">\${inputHtml}</div>\`;
      } else if (field.schema.type === 'number' || field.schema.type === 'integer') {
        // Number field
        const step = field.schema.type === 'integer' ? '1' : 'any';
        inputHtml = \`<input type="number" step="\${step}" class="test-form-input" id="\${inputId}" data-field="\${field.name}" data-type="number" placeholder="Enter a \${field.schema.type}...">\`;
      } else if (field.schema.type === 'object' || field.schema.type === 'array') {
        // Complex type - render as JSON textarea
        const placeholder = field.schema.type === 'array' ? '[]' : '{}';
        inputHtml = \`<textarea class="test-form-textarea" id="\${inputId}" data-field="\${field.name}" data-type="json" placeholder="\${placeholder}"></textarea>\`;
      } else {
        // Default: string input
        const inputType = field.schema.format === 'email' ? 'email' : 'text';
        const placeholder = field.schema.format === 'email' ? 'user@example.com' : \`Enter \${displayName.toLowerCase()}...\`;
        inputHtml = \`<input type="\${inputType}" class="test-form-input" id="\${inputId}" data-field="\${field.name}" placeholder="\${placeholder}">\`;
      }

      return \`
        <div class="test-form-group">
          <label class="test-form-label" for="\${inputId}">\${displayName} \${requiredMark}</label>
          \${inputHtml}
          \${typeHint ? \`<div class="test-form-hint">\${typeHint}</div>\` : ''}
        </div>
      \`;
    }

    function renderFieldFromField(field) {
      const requiredMark = field.required ? '<span class="required">*</span>' : '';
      const inputId = \`test-input-\${field.name}\`;
      const displayName = formatFieldName(field.name);

      if (field.isQueryBased) {
        // Query-based (autocomplete) field
        return \`
          <div class="test-form-group fieldFrom-field">
            <label class="test-form-label" for="\${inputId}">
              \${displayName} \${requiredMark}
              <span class="fieldFrom-hint">
                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/>
                </svg>
                \${field.fieldFrom}
              </span>
            </label>
            <input type="text" class="test-form-input" id="\${inputId}-search" placeholder="Type to search..." oninput="searchFieldOptions('\${field.name}', '\${field.fieldFrom}', this.value)">
            <select class="test-form-select" id="\${inputId}" data-field="\${field.name}" style="margin-top: 8px;">
              <option value="">Type above to search...</option>
            </select>
            <div class="test-form-hint">Search-based selection from \${field.fieldFrom}</div>
          </div>
        \`;
      } else {
        // Bulk options field
        return \`
          <div class="test-form-group fieldFrom-field">
            <label class="test-form-label" for="\${inputId}">
              \${displayName} \${requiredMark}
              <span class="fieldFrom-hint">
                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                  <polyline points="7 10 12 15 17 10"/>
                  <line x1="12" y1="15" x2="12" y2="3"/>
                </svg>
                \${field.fieldFrom}
              </span>
            </label>
            <select class="test-form-select" id="\${inputId}" data-field="\${field.name}" disabled>
              <option value="">Click "Load Options" to populate</option>
            </select>
            <button type="button" class="load-options-btn" onclick="loadFieldOptions('\${field.name}', '\${field.fieldFrom}')">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                <polyline points="7 10 12 15 17 10"/>
                <line x1="12" y1="15" x2="12" y2="3"/>
              </svg>
              Load Options
            </button>
            <div class="test-form-hint">Options loaded from \${field.fieldFrom}</div>
          </div>
        \`;
      }
    }

    function renderUserContextField(field) {
      const inputId = \`test-input-\${field.name}\`;
      const displayName = formatFieldName(field.name);

      // If we have inner schema, render individual fields
      if (field.innerSchema && field.innerSchema.type === 'object' && field.innerSchema.properties) {
        const props = field.innerSchema.properties;
        let fieldsHtml = '';

        for (const [key, prop] of Object.entries(props)) {
          const subInputId = \`\${inputId}-\${key}\`;
          const subDisplayName = formatFieldName(key);
          const defaultVal = getDefaultValueForType(prop);

          if (prop.type === 'boolean') {
            fieldsHtml += \`
              <div class="test-form-group" style="margin-bottom: 12px;">
                <div class="test-form-checkbox">
                  <input type="checkbox" id="\${subInputId}" data-usercontext-field="\${field.name}" data-usercontext-key="\${key}" \${defaultVal ? 'checked' : ''}>
                  <label for="\${subInputId}">\${subDisplayName}</label>
                </div>
              </div>
            \`;
          } else if (prop.type === 'number' || prop.type === 'integer') {
            fieldsHtml += \`
              <div class="test-form-group" style="margin-bottom: 12px;">
                <label class="test-form-label" for="\${subInputId}">\${subDisplayName}</label>
                <input type="number" class="test-form-input" id="\${subInputId}" data-usercontext-field="\${field.name}" data-usercontext-key="\${key}" value="\${defaultVal}" placeholder="Enter \${subDisplayName.toLowerCase()}...">
              </div>
            \`;
          } else {
            // String or other type
            const inputType = prop.format === 'email' ? 'email' : 'text';
            const placeholder = prop.format === 'email' ? 'user@example.com' : \`Enter \${subDisplayName.toLowerCase()}...\`;
            fieldsHtml += \`
              <div class="test-form-group" style="margin-bottom: 12px;">
                <label class="test-form-label" for="\${subInputId}">\${subDisplayName}</label>
                <input type="\${inputType}" class="test-form-input" id="\${subInputId}" data-usercontext-field="\${field.name}" data-usercontext-key="\${key}" value="\${defaultVal}" placeholder="\${placeholder}">
              </div>
            \`;
          }
        }

        return \`
          <div style="margin-bottom: 12px;">
            <div class="test-form-label" style="margin-bottom: 8px;">\${displayName}</div>
            <div style="padding-left: 12px; border-left: 2px solid rgba(254, 93, 38, 0.3);">
              \${fieldsHtml}
            </div>
          </div>
        \`;
      }

      // Fallback to JSON textarea for complex schemas
      const defaultValue = field.innerSchema ? JSON.stringify(generateDefaultFromSchema(field.innerSchema), null, 2) : '{}';

      return \`
        <div class="test-form-group">
          <label class="test-form-label" for="\${inputId}">\${displayName}</label>
          <textarea class="test-form-textarea" id="\${inputId}" data-field="\${field.name}" data-type="userContext">\${defaultValue}</textarea>
          <div class="test-form-hint">JSON object for user context simulation</div>
        </div>
      \`;
    }

    function getDefaultValueForType(prop) {
      if (prop.type === 'string') {
        return prop.format === 'email' ? 'test@example.com' : 'test-value';
      }
      if (prop.type === 'number' || prop.type === 'integer') {
        return 1;
      }
      if (prop.type === 'boolean') {
        return false;
      }
      return '';
    }

    function generateDefaultFromSchema(schema) {
      if (!schema || schema.type !== 'object' || !schema.properties) {
        return {};
      }
      const result = {};
      for (const [key, prop] of Object.entries(schema.properties)) {
        if (prop.type === 'string') {
          result[key] = prop.format === 'email' ? 'test@example.com' : 'test-' + key;
        } else if (prop.type === 'number' || prop.type === 'integer') {
          result[key] = 1;
        } else if (prop.type === 'boolean') {
          result[key] = false;
        }
      }
      return result;
    }

    async function loadFieldOptions(fieldName, sourceFunctionName) {
      const selectEl = document.getElementById(\`test-input-\${fieldName}\`);
      const btn = selectEl?.parentElement?.querySelector('.load-options-btn');
      if (!selectEl || !btn) return;

      btn.disabled = true;
      btn.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="animation: spin 1s linear infinite;"><circle cx="12" cy="12" r="10"/></svg> Loading...';

      try {
        const env = document.getElementById('testEnv')?.value || 'dev';
        const accessGroups = getSelectedAccessGroups();

        const res = await fetch(\`/api/function/\${sourceFunctionName}/options\`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ env, accessGroups }),
        });
        const data = await res.json();

        if (data.error) {
          throw new Error(data.error);
        }

        const options = data.options || [];
        loadedFieldOptions[fieldName] = options;

        selectEl.innerHTML = '<option value="">Select...</option>' +
          options.map(o => \`<option value="\${o.value}">\${o.label}</option>\`).join('');
        selectEl.disabled = false;
        btn.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 4v6h-6"/><path d="M1 20v-6h6"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg> Refresh';
      } catch (err) {
        selectEl.innerHTML = \`<option value="">Error: \${err.message}</option>\`;
        btn.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 4v6h-6"/><path d="M1 20v-6h6"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg> Retry';
      } finally {
        btn.disabled = false;
      }
    }
    window.loadFieldOptions = loadFieldOptions;

    // Helper function to get selected access groups from checkboxes
    function getSelectedAccessGroups() {
      const checkboxes = document.querySelectorAll('input[name="accessGroup"]:checked');
      return Array.from(checkboxes).map(cb => cb.value);
    }

    // Debounced search for query-based fieldFrom fields
    let fieldSearchTimeout = {};
    async function searchFieldOptions(fieldName, sourceFunctionName, query) {
      const selectEl = document.getElementById(\`test-input-\${fieldName}\`);
      if (!selectEl) return;

      // Debounce
      if (fieldSearchTimeout[fieldName]) {
        clearTimeout(fieldSearchTimeout[fieldName]);
      }

      if (!query || query.length < 2) {
        selectEl.innerHTML = '<option value="">Type at least 2 characters...</option>';
        return;
      }

      selectEl.innerHTML = '<option value="">Searching...</option>';

      fieldSearchTimeout[fieldName] = setTimeout(async () => {
        try {
          const env = document.getElementById('testEnv')?.value || 'dev';
          const accessGroups = getSelectedAccessGroups();

          const res = await fetch(\`/api/function/\${sourceFunctionName}/options\`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ env, accessGroups, query }),
          });
          const data = await res.json();

          if (data.error) {
            throw new Error(data.error);
          }

          const options = data.options || [];
          if (options.length === 0) {
            selectEl.innerHTML = '<option value="">No results found</option>';
          } else {
            selectEl.innerHTML = '<option value="">Select...</option>' +
              options.map(o => \`<option value="\${o.value}">\${o.label}</option>\`).join('');
          }
        } catch (err) {
          selectEl.innerHTML = \`<option value="">Error: \${err.message}</option>\`;
        }
      }, 300);
    }
    window.searchFieldOptions = searchFieldOptions;

    async function executeTest() {
      const btn = document.getElementById('executeTestBtn');
      const resultDiv = document.getElementById('testResult');
      if (!btn || !resultDiv || !currentTestFunction) return;

      btn.disabled = true;
      btn.classList.add('loading');
      btn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="animation: spin 1s linear infinite;"><circle cx="12" cy="12" r="10"/></svg> Executing...';
      resultDiv.innerHTML = '';

      try {
        const env = document.getElementById('testEnv')?.value || 'dev';
        const accessGroups = getSelectedAccessGroups();

        // Collect regular inputs
        const inputs = {};
        const mockUserContext = {};
        const formInputs = document.querySelectorAll('[data-field]');

        for (const input of formInputs) {
          const fieldName = input.dataset.field;
          const fieldType = input.dataset.type;
          let value;

          if (fieldType === 'boolean') {
            value = input.checked;
          } else if (fieldType === 'number') {
            value = input.value ? Number(input.value) : undefined;
          } else if (fieldType === 'json' || fieldType === 'userContext') {
            try {
              value = input.value.trim() ? JSON.parse(input.value) : undefined;
            } catch {
              throw new Error(\`Invalid JSON in field "\${fieldName}"\`);
            }
          } else {
            value = input.value || undefined;
          }

          if (value !== undefined) {
            if (fieldType === 'userContext') {
              mockUserContext[fieldName] = value;
            } else {
              inputs[fieldName] = value;
            }
          }
        }

        // Collect individual user context fields (new format)
        const userContextInputs = document.querySelectorAll('[data-usercontext-field]');
        for (const input of userContextInputs) {
          const fieldName = input.dataset.usercontextField;
          const key = input.dataset.usercontextKey;

          if (!mockUserContext[fieldName]) {
            mockUserContext[fieldName] = {};
          }

          let value;
          if (input.type === 'checkbox') {
            value = input.checked;
          } else if (input.type === 'number') {
            value = input.value ? Number(input.value) : undefined;
          } else {
            value = input.value || undefined;
          }

          if (value !== undefined) {
            mockUserContext[fieldName][key] = value;
          }
        }

        const res = await fetch(\`/api/test/\${currentTestFunction}\`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ env, accessGroups, mockUserContext, inputs }),
        });
        const data = await res.json();

        if (data.success) {
          currentResultData = data.result;
          currentResultView = 'table';
          resultDiv.innerHTML = renderSuccessResult(data.result, data.executionTime);
        } else if (data.validationErrors) {
          resultDiv.innerHTML = renderValidationErrors(data.validationErrors);
        } else {
          resultDiv.innerHTML = renderErrorResult(data.error, data.stack);
        }
      } catch (err) {
        resultDiv.innerHTML = renderErrorResult(err.message);
      } finally {
        btn.disabled = false;
        btn.classList.remove('loading');
        btn.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg> Execute Function';
      }
    }
    window.executeTest = executeTest;

    function renderSuccessResult(result, executionTime) {
      const isArray = Array.isArray(result);
      const isObject = result && typeof result === 'object' && !isArray;
      const isPrimitive = !isArray && !isObject;

      let contentHtml = '';
      let countInfo = '';

      if (isArray && result.length > 0 && typeof result[0] === 'object') {
        // Array of objects - render as table
        countInfo = \`<span class="test-result-count">\${result.length} item\${result.length !== 1 ? 's' : ''}</span>\`;
        contentHtml = \`
          <div class="test-result-meta">
            <span class="test-result-time">\${executionTime}ms</span>
            \${countInfo}
            <div class="test-result-view-toggle">
              <button class="active" onclick="switchResultView('table')">Table</button>
              <button onclick="switchResultView('json')">JSON</button>
            </div>
          </div>
          <div id="resultContent">\${renderResultAsTable(result)}</div>
        \`;
      } else if (isObject) {
        // Single object - render as key-value pairs
        contentHtml = \`
          <div class="test-result-meta">
            <span class="test-result-time">\${executionTime}ms</span>
            <div class="test-result-view-toggle">
              <button class="active" onclick="switchResultView('table')">Details</button>
              <button onclick="switchResultView('json')">JSON</button>
            </div>
          </div>
          <div id="resultContent">\${renderResultAsKeyValue(result)}</div>
        \`;
      } else if (isArray) {
        // Array of primitives
        countInfo = \`<span class="test-result-count">\${result.length} item\${result.length !== 1 ? 's' : ''}</span>\`;
        contentHtml = \`
          <div class="test-result-meta">
            <span class="test-result-time">\${executionTime}ms</span>
            \${countInfo}
          </div>
          <div class="test-result-primitive">\${JSON.stringify(result, null, 2)}</div>
        \`;
      } else {
        // Primitive value
        contentHtml = \`
          <div class="test-result-meta">
            <span class="test-result-time">\${executionTime}ms</span>
          </div>
          <div class="test-result-primitive">\${String(result)}</div>
        \`;
      }

      return \`
        <div class="test-result success">
          <div class="test-result-header success">
            <span>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align: middle; margin-right: 6px;">
                <polyline points="20 6 9 17 4 12"/>
              </svg>
              Success
            </span>
          </div>
          \${contentHtml}
        </div>
      \`;
    }

    function renderResultAsTable(data) {
      if (!Array.isArray(data) || data.length === 0) {
        return '<div class="test-result-primitive">[]</div>';
      }

      // Get all unique keys from all objects
      const allKeys = new Set();
      data.forEach(item => {
        if (item && typeof item === 'object') {
          Object.keys(item).forEach(key => allKeys.add(key));
        }
      });
      const keys = Array.from(allKeys);

      if (keys.length === 0) {
        return '<div class="test-result-primitive">' + JSON.stringify(data, null, 2) + '</div>';
      }

      let html = '<table class="test-results-table"><thead><tr>';
      keys.forEach(key => {
        html += \`<th>\${formatFieldName(key)}</th>\`;
      });
      html += '</tr></thead><tbody>';

      data.forEach(item => {
        html += '<tr>';
        keys.forEach(key => {
          const value = item ? item[key] : undefined;
          html += renderTableCell(value);
        });
        html += '</tr>';
      });

      html += '</tbody></table>';
      return html;
    }

    function renderTableCell(value) {
      if (value === null || value === undefined) {
        return '<td class="cell-null">-</td>';
      }
      if (typeof value === 'boolean') {
        return \`<td class="cell-boolean \${value}">\${value ? '✓' : '✗'}</td>\`;
      }
      if (typeof value === 'number') {
        return \`<td class="cell-number">\${value}</td>\`;
      }
      if (typeof value === 'object') {
        const str = JSON.stringify(value);
        const display = str.length > 50 ? str.substring(0, 47) + '...' : str;
        return \`<td class="cell-object" title="\${str.replace(/"/g, '&quot;')}">\${display}</td>\`;
      }
      return \`<td>\${String(value)}</td>\`;
    }

    function renderResultAsKeyValue(obj) {
      if (!obj || typeof obj !== 'object') {
        return '<div class="test-result-primitive">' + String(obj) + '</div>';
      }

      let html = '<dl class="test-results-kv">';
      for (const [key, value] of Object.entries(obj)) {
        const displayKey = formatFieldName(key);
        let valueClass = '';
        let displayValue = '';

        if (value === null || value === undefined) {
          valueClass = 'value-null';
          displayValue = 'null';
        } else if (typeof value === 'boolean') {
          valueClass = 'value-boolean';
          displayValue = value ? '✓ true' : '✗ false';
        } else if (typeof value === 'number') {
          valueClass = 'value-number';
          displayValue = String(value);
        } else if (typeof value === 'object') {
          displayValue = JSON.stringify(value, null, 2);
        } else {
          displayValue = String(value);
        }

        html += \`<dt>\${displayKey}</dt><dd class="\${valueClass}">\${displayValue}</dd>\`;
      }
      html += '</dl>';
      return html;
    }

    function switchResultView(view) {
      currentResultView = view;
      const contentDiv = document.getElementById('resultContent');
      const buttons = document.querySelectorAll('.test-result-view-toggle button');

      buttons.forEach(btn => {
        btn.classList.toggle('active', btn.textContent.toLowerCase().includes(view === 'table' ? 'table' : 'json') || btn.textContent.toLowerCase().includes(view === 'table' ? 'detail' : 'json'));
      });

      if (!contentDiv || !currentResultData) return;

      if (view === 'json') {
        contentDiv.innerHTML = '<div class="test-result-content">' + JSON.stringify(currentResultData, null, 2) + '</div>';
      } else {
        if (Array.isArray(currentResultData) && currentResultData.length > 0 && typeof currentResultData[0] === 'object') {
          contentDiv.innerHTML = renderResultAsTable(currentResultData);
        } else if (typeof currentResultData === 'object' && currentResultData !== null) {
          contentDiv.innerHTML = renderResultAsKeyValue(currentResultData);
        }
      }
    }
    window.switchResultView = switchResultView;

    function renderValidationErrors(errors) {
      return \`
        <div class="test-result error">
          <div class="test-result-header error">
            <span>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align: middle; margin-right: 6px;">
                <circle cx="12" cy="12" r="10"/>
                <line x1="15" y1="9" x2="9" y2="15"/>
                <line x1="9" y1="9" x2="15" y2="15"/>
              </svg>
              Validation Failed
            </span>
          </div>
          <ul class="test-validation-errors">
            \${errors.map(e => \`
              <li>
                <svg class="test-validation-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
                  <line x1="12" y1="9" x2="12" y2="13"/>
                  <line x1="12" y1="17" x2="12.01" y2="17"/>
                </svg>
                <div>
                  <span class="test-validation-path">\${e.path || 'root'}</span>
                  <span class="test-validation-message">\${e.message}</span>
                </div>
              </li>
            \`).join('')}
          </ul>
        </div>
      \`;
    }

    function renderErrorResult(error, stack) {
      let stackHtml = '';
      if (stack) {
        stackHtml = \`
          <div class="test-error-stack">
            <button class="test-error-stack-toggle" onclick="this.nextElementSibling.classList.toggle('visible'); this.textContent = this.nextElementSibling.classList.contains('visible') ? '▼ Hide Stack Trace' : '▶ Show Stack Trace'">
              ▶ Show Stack Trace
            </button>
            <div class="test-error-stack-content">\${stack}</div>
          </div>
        \`;
      }

      return \`
        <div class="test-result error">
          <div class="test-result-header error">
            <span>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align: middle; margin-right: 6px;">
                <circle cx="12" cy="12" r="10"/>
                <line x1="15" y1="9" x2="9" y2="15"/>
                <line x1="9" y1="9" x2="15" y2="15"/>
              </svg>
              Error
            </span>
          </div>
          <div class="test-result-content" style="color: #c44536;">\${error || 'Unknown error'}</div>
          \${stackHtml}
        </div>
      \`;
    }

    loadFontsAndInit();
  </script>
</body>
</html>`;
}