@warmdrift/kgauto-compiler 2.0.0-alpha.7 → 2.0.0-alpha.71

package/dist/glassbox-routes/react/index.mjs

@@ -0,0 +1,754 @@
+import {
+  formatAgo,
+  formatCost,
+  formatMs,
+  formatMutation,
+  formatOrDash,
+  inputRatioLabel,
+  shortTraceId
+} from "../../chunk-P3TOAEG4.mjs";
+
+// src/glassbox-routes/react/theme.ts
+var DEFAULT_GLASSBOX_THEME = {
+  colors: {
+    surface: "#F8FAFC",
+    border: "#E2E8F0",
+    borderSoft: "#F1F5F9",
+    cardBg: "#FFFFFF",
+    text: "#1E293B",
+    textMuted: "#64748B",
+    textFaint: "#94A3B8",
+    ok: "#15803D",
+    warn: "#B45309",
+    fail: "#B91C1C",
+    info: "#1D4ED8"
+  },
+  fonts: {
+    sans: 'system-ui, -apple-system, "Segoe UI", sans-serif',
+    serif: 'Georgia, "Times New Roman", serif',
+    mono: "ui-monospace, Menlo, Consolas, monospace"
+  }
+};
+
+// src/glassbox-routes/react/GlassboxTraceCard.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function Card({ children, title, emphasis = "default", theme }) {
+  const { colors, fonts } = theme;
+  const accentColor = emphasis === "coaching" ? colors.warn : emphasis === "counterfactuals" ? colors.ok : emphasis === "mutations" ? colors.textMuted : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        background: colors.cardBg,
+        border: `1px solid ${colors.border}`,
+        borderLeft: accentColor ? `4px solid ${accentColor}` : `1px solid ${colors.border}`,
+        borderRadius: 6,
+        padding: 14,
+        marginBottom: 10
+      },
+      children: [
+        title && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontSize: 11,
+              fontWeight: 600,
+              textTransform: "uppercase",
+              letterSpacing: 0.4,
+              color: colors.textMuted,
+              fontFamily: fonts.sans,
+              marginBottom: 8
+            },
+            children: title
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+function HealthDot({
+  axis,
+  status,
+  theme
+}) {
+  const { colors } = theme;
+  const color = status === "green" ? colors.ok : status === "yellow" ? colors.warn : status === "red" ? colors.fail : colors.textFaint;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      title: `${axis}: ${status}`,
+      "aria-label": `${axis} ${status}`,
+      style: {
+        display: "inline-block",
+        width: 8,
+        height: 8,
+        borderRadius: "50%",
+        background: color,
+        marginRight: 6
+      }
+    }
+  );
+}
+function AdvisoryRow({
+  advisory,
+  theme
+}) {
+  const { colors, fonts } = theme;
+  const color = advisory.level === "critical" ? colors.fail : advisory.level === "warn" ? colors.warn : colors.info;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: 8,
+        alignItems: "baseline",
+        padding: "6px 0",
+        borderTop: `1px solid ${colors.borderSoft}`,
+        fontFamily: fonts.sans,
+        fontSize: 13
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontFamily: fonts.mono,
+              fontSize: 11,
+              color,
+              fontWeight: 600,
+              minWidth: 140
+            },
+            children: advisory.code
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { style: { color: colors.text, flex: 1 }, children: advisory.message }),
+        advisory.suggestedAdaptation && /* @__PURE__ */ jsxs(
+          "span",
+          {
+            style: {
+              fontFamily: fonts.mono,
+              fontSize: 11,
+              color: colors.textMuted
+            },
+            title: advisory.suggestedAdaptation.consequence,
+            children: [
+              "\u2192 try ",
+              advisory.suggestedAdaptation.parameter,
+              ":\xA0",
+              String(advisory.suggestedAdaptation.value)
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function SectionRewriteRow({
+  rewrite,
+  theme
+}) {
+  const { colors, fonts } = theme;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: 8,
+        alignItems: "baseline",
+        padding: "6px 0",
+        borderTop: `1px solid ${colors.borderSoft}`,
+        fontFamily: fonts.sans,
+        fontSize: 13
+      },
+      title: `${rewrite.rule} \xB7 ${rewrite.kind} \xB7 ${rewrite.sectionId}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontFamily: fonts.mono,
+              fontSize: 11,
+              color: colors.info,
+              fontWeight: 600,
+              minWidth: 140
+            },
+            children: "translator-rewrite"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { style: { color: colors.text, flex: 1 }, children: rewrite.summary })
+      ]
+    }
+  );
+}
+function CounterfactualAsAdvisoryRow({
+  cf,
+  theme
+}) {
+  const { colors, fonts } = theme;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexWrap: "wrap",
+        gap: 8,
+        alignItems: "baseline",
+        padding: "6px 0",
+        borderTop: `1px solid ${colors.borderSoft}`,
+        fontFamily: fonts.sans,
+        fontSize: 13
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontFamily: fonts.mono,
+              fontSize: 11,
+              color: colors.info,
+              fontWeight: 600,
+              minWidth: 140
+            },
+            children: "cheaper-alternative"
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { style: { color: colors.text, flex: 1 }, children: [
+          /* @__PURE__ */ jsx("span", { style: { fontFamily: fonts.serif, fontWeight: 600, fontSize: 15 }, children: cf.modelId }),
+          " ",
+          "would do this for ",
+          formatCost(cf.estimatedCostUsd),
+          " (saves",
+          " ",
+          formatCost(cf.savingsUsd),
+          " / ",
+          cf.savingsPercent,
+          "%)"
+        ] })
+      ]
+    }
+  );
+}
+function HeaderRow({
+  detail,
+  theme
+}) {
+  const { colors, fonts } = theme;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "baseline",
+        gap: 12,
+        flexWrap: "wrap"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontFamily: fonts.serif,
+              fontWeight: 600,
+              fontSize: 22,
+              color: colors.text
+            },
+            children: detail.archetype
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { style: { color: colors.textFaint }, children: "\xB7" }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontFamily: fonts.sans,
+              fontSize: 12,
+              color: colors.textMuted
+            },
+            children: formatAgo(detail.createdAt)
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { style: { color: colors.textFaint }, children: "\xB7" }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            title: detail.traceId,
+            style: {
+              fontFamily: fonts.mono,
+              fontSize: 11,
+              background: colors.surface,
+              border: `1px solid ${colors.border}`,
+              borderRadius: 999,
+              padding: "2px 10px",
+              color: colors.textMuted
+            },
+            children: shortTraceId(detail.traceId)
+          }
+        )
+      ]
+    }
+  );
+}
+function OutcomeCard({
+  detail,
+  theme
+}) {
+  const { colors, fonts } = theme;
+  const isFail = detail.finishReason !== void 0 && detail.finishReason !== "stop" && detail.finishReason !== "tool_use";
+  const statusColor = isFail ? colors.fail : colors.ok;
+  const totalLabel = detail.totalMs !== void 0 ? formatMs(detail.totalMs) : "\u2014";
+  const ttftLabel = detail.ttftMs !== void 0 ? ` \xB7 TTFT ${formatMs(detail.ttftMs)}` : "";
+  return /* @__PURE__ */ jsxs(Card, { theme, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "baseline",
+          gap: 14,
+          flexWrap: "wrap",
+          fontFamily: fonts.sans,
+          fontSize: 14
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                color: statusColor,
+                fontWeight: 700,
+                fontSize: 18
+              },
+              children: isFail ? "\u2717" : "\u2713"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                fontFamily: fonts.mono,
+                fontSize: 13,
+                color: colors.text,
+                fontWeight: 600
+              },
+              children: detail.target
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                fontFamily: fonts.serif,
+                fontWeight: 600,
+                fontSize: 18,
+                color: colors.text
+              },
+              children: formatCost(detail.estimatedCostUsd)
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { style: { color: colors.textMuted, fontSize: 12 }, children: [
+            totalLabel,
+            ttftLabel
+          ] })
+        ]
+      }
+    ),
+    detail.fellOverFrom && detail.fellOverFrom !== detail.target && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          marginTop: 6,
+          fontFamily: fonts.sans,
+          fontSize: 12,
+          color: colors.warn
+        },
+        children: [
+          "\u2191 fell over from",
+          " ",
+          /* @__PURE__ */ jsx("span", { style: { fontFamily: fonts.mono }, children: detail.fellOverFrom }),
+          detail.fallbackReason && ` (${detail.fallbackReason})`
+        ]
+      }
+    )
+  ] });
+}
+function CoachingCard({
+  detail,
+  theme
+}) {
+  const advisories = detail.advisories ?? [];
+  const sectionRewrites = detail.sectionRewritesApplied ?? [];
+  const counterfactuals = detail.counterfactuals ?? [];
+  const topCF = counterfactuals[0];
+  if (advisories.length === 0 && sectionRewrites.length === 0 && !topCF) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Card, { title: "\u26A0 Coaching", emphasis: "coaching", theme, children: /* @__PURE__ */ jsxs("div", { children: [
+    advisories.map((a, i) => /* @__PURE__ */ jsx(AdvisoryRow, { advisory: a, theme }, `adv-${i}`)),
+    sectionRewrites.map((r, i) => /* @__PURE__ */ jsx(SectionRewriteRow, { rewrite: r, theme }, `rw-${i}`)),
+    topCF && /* @__PURE__ */ jsx(CounterfactualAsAdvisoryRow, { cf: topCF, theme })
+  ] }) });
+}
+function ShapeCard({
+  detail,
+  theme
+}) {
+  const { colors, fonts } = theme;
+  const total = detail.tokensIn + detail.tokensOut;
+  const ratioPct = total > 0 ? Math.round(detail.tokensIn / total * 100) : 0;
+  const cachingOff = detail.historyCacheableTokens > 1e3 && detail.cacheReadInputTokens === 0;
+  return /* @__PURE__ */ jsxs(Card, { theme, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          marginBottom: 8
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                fontSize: 11,
+                fontWeight: 600,
+                textTransform: "uppercase",
+                letterSpacing: 0.4,
+                color: colors.textMuted,
+                fontFamily: fonts.sans
+              },
+              children: "\u{1F4CA} Shape"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(
+              HealthDot,
+              {
+                axis: "input",
+                status: detail.health.inputRatioStatus,
+                theme
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              HealthDot,
+              {
+                axis: "cache",
+                status: detail.health.cacheStatus,
+                theme
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              HealthDot,
+              {
+                axis: "fallback",
+                status: detail.health.fallbackStatus,
+                theme
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          fontFamily: fonts.sans,
+          fontSize: 13,
+          color: colors.text,
+          marginBottom: 4
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { style: { fontFamily: fonts.serif, fontWeight: 600, fontSize: 15 }, children: detail.tokensIn.toLocaleString() }),
+          " ",
+          "in \xB7",
+          " ",
+          /* @__PURE__ */ jsx("span", { style: { fontFamily: fonts.serif, fontWeight: 600, fontSize: 15 }, children: detail.tokensOut.toLocaleString() }),
+          " ",
+          "out (",
+          ratioPct,
+          "% input \u2014 ",
+          inputRatioLabel(detail.health.inputRatioStatus),
+          ")"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          fontFamily: fonts.sans,
+          fontSize: 12,
+          color: colors.textMuted,
+          marginBottom: 4
+        },
+        children: detail.historyCacheableTokens === 0 ? "cache: no cacheable history" : `cache: ${detail.cacheReadInputTokens.toLocaleString()} / ${detail.historyCacheableTokens.toLocaleString()} of cacheable history${cachingOff ? " (caching off)" : ""}`
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          fontFamily: fonts.sans,
+          fontSize: 12,
+          color: colors.textMuted
+        },
+        children: [
+          formatOrDash(detail.toolsCount),
+          " tools \xB7",
+          " ",
+          formatOrDash(detail.historyDepth),
+          " history msgs \xB7 system",
+          " ",
+          detail.systemPromptChars !== void 0 ? `${detail.systemPromptChars.toLocaleString()} chars` : "\u2014"
+        ]
+      }
+    )
+  ] });
+}
+function MutationsCard({
+  detail,
+  theme
+}) {
+  const { colors, fonts } = theme;
+  const mutations = detail.mutationsApplied ?? [];
+  if (mutations.length === 0) return null;
+  return /* @__PURE__ */ jsx(Card, { title: "\u{1F4CB} What kgauto did", emphasis: "mutations", theme, children: /* @__PURE__ */ jsx(
+    "ul",
+    {
+      style: {
+        margin: 0,
+        padding: 0,
+        listStyle: "none",
+        fontFamily: fonts.sans,
+        fontSize: 13,
+        color: colors.text
+      },
+      children: mutations.map((m, i) => /* @__PURE__ */ jsx(
+        "li",
+        {
+          style: {
+            padding: "4px 0",
+            borderTop: i === 0 ? "none" : `1px solid ${colors.borderSoft}`,
+            fontFamily: fonts.mono,
+            fontSize: 12
+          },
+          children: formatMutation(m)
+        },
+        `mut-${i}`
+      ))
+    }
+  ) });
+}
+function CounterfactualsCard({
+  detail,
+  coachingPresent,
+  theme
+}) {
+  const { colors, fonts } = theme;
+  const cfs = detail.counterfactuals ?? [];
+  if (cfs.length === 0) return null;
+  if (coachingPresent) return null;
+  return /* @__PURE__ */ jsx(Card, { title: "\u{1F4B0} Cheaper alternatives", emphasis: "counterfactuals", theme, children: /* @__PURE__ */ jsx(
+    "ul",
+    {
+      style: {
+        margin: 0,
+        padding: 0,
+        listStyle: "none",
+        fontFamily: fonts.sans,
+        fontSize: 13,
+        color: colors.text
+      },
+      children: cfs.slice(0, 2).map((cf, i) => {
+        const yearlySavings = detail.projectedDailyCostUsd !== void 0 && detail.estimatedCostUsd > 0 ? cf.savingsUsd * (detail.projectedDailyCostUsd / Math.max(detail.estimatedCostUsd, 1e-9)) * 365 : null;
+        return /* @__PURE__ */ jsxs(
+          "li",
+          {
+            style: {
+              padding: "6px 0",
+              borderTop: i === 0 ? "none" : `1px solid ${colors.borderSoft}`
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    fontFamily: fonts.serif,
+                    fontWeight: 600,
+                    fontSize: 16
+                  },
+                  children: cf.modelId
+                }
+              ),
+              " ",
+              /* @__PURE__ */ jsx("span", { style: { fontFamily: fonts.mono, fontSize: 12 }, children: formatCost(cf.estimatedCostUsd) }),
+              " ",
+              /* @__PURE__ */ jsxs("span", { style: { color: colors.textMuted, fontSize: 12 }, children: [
+                "(saves ",
+                formatCost(cf.savingsUsd),
+                " / ",
+                cf.savingsPercent,
+                "%",
+                yearlySavings !== null ? ` / $${yearlySavings.toFixed(0)}/year at current volume` : "",
+                ")"
+              ] })
+            ]
+          },
+          `cf-${i}`
+        );
+      })
+    }
+  ) });
+}
+function RawExpandCard({
+  detail,
+  theme
+}) {
+  const { colors, fonts } = theme;
+  if (detail.rawRequest === void 0 && detail.rawResponse === void 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Card, { theme, children: /* @__PURE__ */ jsxs("details", { children: [
+    /* @__PURE__ */ jsx(
+      "summary",
+      {
+        style: {
+          cursor: "pointer",
+          fontFamily: fonts.sans,
+          fontSize: 12,
+          color: colors.textMuted,
+          listStyle: "none"
+        },
+        children: "\u25B6 Request / Response"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: { marginTop: 8 }, children: [
+      detail.rawRequest !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontFamily: fonts.sans,
+              fontSize: 10,
+              fontWeight: 600,
+              textTransform: "uppercase",
+              letterSpacing: 0.4,
+              color: colors.textMuted,
+              marginTop: 6,
+              marginBottom: 4
+            },
+            children: "Request"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "pre",
+          {
+            style: {
+              fontFamily: fonts.mono,
+              fontSize: 11,
+              lineHeight: 1.5,
+              background: colors.surface,
+              border: `1px solid ${colors.border}`,
+              borderRadius: 6,
+              padding: 10,
+              maxHeight: 280,
+              overflow: "auto",
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-word",
+              color: colors.text,
+              margin: 0
+            },
+            children: detail.rawRequest
+          }
+        )
+      ] }),
+      detail.rawResponse !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontFamily: fonts.sans,
+              fontSize: 10,
+              fontWeight: 600,
+              textTransform: "uppercase",
+              letterSpacing: 0.4,
+              color: colors.textMuted,
+              marginTop: 10,
+              marginBottom: 4
+            },
+            children: "Response"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "pre",
+          {
+            style: {
+              fontFamily: fonts.mono,
+              fontSize: 11,
+              lineHeight: 1.5,
+              background: colors.surface,
+              border: `1px solid ${colors.border}`,
+              borderRadius: 6,
+              padding: 10,
+              maxHeight: 280,
+              overflow: "auto",
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-word",
+              color: colors.text,
+              margin: 0
+            },
+            children: detail.rawResponse
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+}
+function GlassboxTraceCard({
+  detail,
+  theme = DEFAULT_GLASSBOX_THEME
+}) {
+  const { colors } = theme;
+  const advisories = detail.advisories ?? [];
+  const sectionRewrites = detail.sectionRewritesApplied ?? [];
+  const counterfactuals = detail.counterfactuals ?? [];
+  const topCF = counterfactuals[0];
+  const coachingPresent = advisories.length > 0 || sectionRewrites.length > 0 || !!topCF;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        background: colors.surface,
+        border: `1px solid ${colors.border}`,
+        borderRadius: 8,
+        padding: 14,
+        marginBottom: 16
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { style: { marginBottom: 10 }, children: /* @__PURE__ */ jsx(HeaderRow, { detail, theme }) }),
+        /* @__PURE__ */ jsx(OutcomeCard, { detail, theme }),
+        coachingPresent && /* @__PURE__ */ jsx(CoachingCard, { detail, theme }),
+        /* @__PURE__ */ jsx(ShapeCard, { detail, theme }),
+        /* @__PURE__ */ jsx(MutationsCard, { detail, theme }),
+        /* @__PURE__ */ jsx(
+          CounterfactualsCard,
+          {
+            detail,
+            coachingPresent,
+            theme
+          }
+        ),
+        /* @__PURE__ */ jsx(RawExpandCard, { detail, theme })
+      ]
+    }
+  );
+}
+export {
+  DEFAULT_GLASSBOX_THEME,
+  GlassboxTraceCard
+};