NutriBot — RUM + GenAI Tracing

// NutriBot — Application Insights singleton
// Inicializar UNA vez antes del router

import {
  ApplicationInsights,
  DistributedTracingModes,
  type ITelemetryItem
} from "@microsoft/applicationinsights-web";
import { ReactPlugin } from
  "@microsoft/applicationinsights-react-js";
import { ClickAnalyticsPlugin } from
  "@microsoft/applicationinsights-clickanalytics-js";
import { createBrowserHistory } from "history";

export const browserHistory = createBrowserHistory();
export const reactPlugin = new ReactPlugin();
const clickPlugin = new ClickAnalyticsPlugin();

export const appInsights = new ApplicationInsights({
  config: {
    connectionString:
      import.meta.env.VITE_APPINSIGHTS_CONNECTION_STRING,
    extensions: [reactPlugin, clickPlugin],
    extensionConfig: {
      [reactPlugin.identifier]: {
        history: browserHistory
      },
      [clickPlugin.identifier]: {
        autoCapture: true,
        dataTags: {
          useDefaultContentNameOrId: true,
          customDataPrefix: "data-ai-"
        }
      }
    },
    // Correlacion distribuida W3C
    distributedTracingMode:
      DistributedTracingModes.AI_AND_W3C,
    enableCorsCorrelation: true,
    enableRequestHeaderTracking: true,
    enableResponseHeaderTracking: true,
    autoTrackPageVisitTime: true,
    disableFetchTracking: false,
    // GDPR: cookies desactivadas por defecto
    isCookieUseDisabled: true,
    excludeRequestFromAutoTrackingPatterns: [
      /livemetrics\.azure\.com/i
    ]
  }
});

// Enriquecimiento global de telemetria
appInsights.addTelemetryInitializer(
  (item: ITelemetryItem) => {
    item.tags ??= {};
    item.tags["ai.cloud.role"] = "nutribot-web";
    item.tags["ai.cloud.roleInstance"] =
      window.location.hostname;
    item.data ??= {};
    item.data["app.version"] =
      import.meta.env.VITE_APP_VERSION;    // "2.4.1"
    item.data["app.build"] =
      import.meta.env.VITE_BUILD_SHA;     // "a3f9c12"

    // Scrub tokens de query string (GDPR)
    if (item.baseData?.uri) {
      item.baseData.uri = item.baseData.uri
        .replace(
          /([?&](token|sig|key)=)[^&]+/gi,
          "$1REDACTED"
        );
    }
    // Descartar healthcheck
    if (item.baseType === "PageviewData" &&
        item.baseData?.uri?.endsWith("/healthz"))
      return false;
  }
);

appInsights.loadAppInsights();
appInsights.trackPageView(); // inicial

// Activar cookies cuando el usuario acepta el banner
export function enableTelemetryCookies() {
  appInsights.getCookieMgr().setEnabled(true);
  appInsights.config.disableTelemetry = false;
}

// Hook React para trazas OTel GenAI del agente
// de planificacion de dieta (NutriBot)

import {
  SeverityLevel
} from "@microsoft/applicationinsights-web";
import { appInsights } from "./appInsights";

type GenAiAttrs = Record<
  string, string | number | boolean | undefined
>;

function startSpan(name: string, attrs: GenAiAttrs) {
  const id = crypto.randomUUID();
  const t0 = performance.now();
  return {
    end(
      ok: boolean,
      extra: GenAiAttrs = {},
      err?: Error
    ) {
      const ms = Math.round(performance.now() - t0);
      appInsights.trackDependencyData({
        id, name,
        duration: ms,
        success: ok,
        responseCode: err ? 500 : 200,
        type: "GenAI",
        target: String(
          attrs["gen_ai.provider.name"] ?? "genai"
        ),
        properties: {
          ...attrs, ...extra
        } as Record<string, string>
      });
      if (err)
        appInsights.trackException({
          exception: err,
          severityLevel: SeverityLevel.Error,
          properties: {
            "gen_ai.operation.name":
              String(attrs["gen_ai.operation.name"])
          }
        });
    }
  };
}

/** Invoca el agente de planificacion y emite
 *  trazas: invoke_agent → chat → execute_tool  */
export async function traceNutriBotAgent(
  prompt: string,
  tenantId: string
): Promise<string> {
  // 1. Span principal: invoke_agent
  const agent = startSpan(
    "invoke_agent NutriPlannerAgent", {
    "gen_ai.operation.name": "invoke_agent",
    "gen_ai.provider.name": "azure.ai.openai",
    "gen_ai.agent.name": "NutriPlannerAgent",
    "gen_ai.agent.id": "asst_nutri_v2_prod",
    "gen_ai.request.model": "gpt-4o-mini",
    "server.address":
      "nutribot.openai.azure.com",
    "tenant.id": tenantId
  });

  try {
    // 2. Span chat
    const chat = startSpan(
      "chat gpt-4o-mini", {
      "gen_ai.operation.name": "chat",
      "gen_ai.provider.name": "azure.ai.openai",
      "gen_ai.request.model": "gpt-4o-mini"
    });
    const res = await fetch(
      "/api/nutriplanner",
      { method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ prompt, tenantId }) }
    );
    const data = await res.json();
    chat.end(true, {
      "gen_ai.response.model": data.model,
      "gen_ai.response.id": data.id,
      "gen_ai.usage.input_tokens":
        data.usage.prompt_tokens,
      "gen_ai.usage.output_tokens":
        data.usage.completion_tokens,
      "gen_ai.output.type": "text"
    });

    // 3. Span tool: busqueda de alimentos
    const tool = startSpan(
      "execute_tool searchFoodDB", {
      "gen_ai.operation.name": "execute_tool",
      "gen_ai.tool.name": "searchFoodDB",
      "gen_ai.tool.type": "datastore",
      "gen_ai.tool.call.id": data.toolCallId
    });
    const foodRes = await fetch(
      `/api/foods?q=${data.foodQuery}`
    );
    tool.end(true);

    agent.end(true, {
      "gen_ai.usage.input_tokens":
        data.usage.prompt_tokens,
      "gen_ai.usage.output_tokens":
        data.usage.completion_tokens
    });
    return data.plan;
  } catch (err) {
    agent.end(false, {}, err as Error);
    throw err;
  }
}

// Core Web Vitals → Azure Monitor
// Ejecutar una vez, tras loadAppInsights()

import {
  onCLS, onLCP, onINP,
  type Metric
} from "web-vitals";
import { appInsights } from "./appInsights";

function sendVital(m: Metric) {
  appInsights.trackMetric(
    {
      name: `web_vitals.${m.name.toLowerCase()}`,
      average: m.value
    },
    {
      rating: m.rating,         // "good"|"needs-improvement"|"poor"
      navigationType: m.navigationType,
      id: m.id,
      // NutriBot custom dimensions
      "page.route": window.location.pathname,
      "tenant.id": sessionStorage.getItem(
        "nb_tenant"
      ) ?? "unknown"
    }
  );
}

export function registerWebVitals() {
  onCLS(sendVital);   // Cumulative Layout Shift
  onLCP(sendVital);   // Largest Contentful Paint
  onINP(sendVital);   // Interaction to Next Paint
}

/* Umbral de referencia NutriBot (v2.4.1):
   LCP  ≤ 2.5 s  → resultado actual: 1.4 s  ✅ GOOD
   CLS  ≤ 0.10   → resultado actual: 0.04  ✅ GOOD
   INP  ≤ 200 ms → resultado actual: 68 ms  ✅ GOOD  */

// Punto de entrada — NutriBot SPA
// Inicializa telemetria antes del render

import "./telemetry/appInsights";  // ① más temprano posible
import { registerWebVitals }
  from "./telemetry/webVitals";
import { traceNutriBotAgent }
  from "./telemetry/useAIAgentTracing";
import {
  appInsights, enableTelemetryCookies
} from "./telemetry/appInsights";
import { Router, Route, Routes }
  from "react-router-dom";

registerWebVitals();  // ② Web Vitals

export function App() {
  const { tenantId, userId } = useAuth();

  // Identidad autenticada (sin PII — usar IDs)
  React.useEffect(() => {
    if (userId)
      appInsights.setAuthenticatedUserContext(
        userId, tenantId, true
      );
    return () =>
      appInsights.clearAuthenticatedUserContext();
  }, [userId]);

  async function handlePlanRequest(
    prompt: string
  ) {
    appInsights.trackEvent(
      { name: "PlanRequestStarted" },
      { tenantId, promptLength: prompt.length }
    );
    try {
      const plan = await
        traceNutriBotAgent(prompt, tenantId);
      appInsights.trackEvent(
        { name: "PlanRequestCompleted" },
        { tenantId }
      );
      return plan;
    } catch (err) {
      appInsights.trackException({
        exception: err as Error,
        properties: { tenantId }
      });
    }
  }

  return (
    <Routes>
      <Route path="/"
        element={<Dashboard />} />
      <Route path="/plan"
        element={
          <PlannerPage
            onRequest={handlePlanRequest}
          />
        } />
      <Route path="/clinic/:id"
        element={<ClinicView />} />
    </Routes>
  );
}

// Boton CTA rastreado via Click Analytics
// (data-ai-* attributes en JSX)
function PlannerCTA() {
  return (
    <button
      data-ai-name="GenerarPlanBtn"
      data-ai-behavior="generate_plan"
      data-ai-parentid="planner_section"
      onClick={() =>
        handlePlanRequest("Plan semanal bajo en sodio")
      }
    >
      Generar plan nutricional ✨
    </button>
  );
}

// Banner GDPR → activa cookies al aceptar
function CookieBanner() {
  return (
    <button onClick={enableTelemetryCookies}>
      Aceptar cookies de analisis
    </button>
  );
}