@pablo2410/shared-ui 0.18.1 → 0.19.0

package/dist/insights/index.js

@@ -17,25 +17,45 @@ var defaultSkin = {
 function severityColor(severity) {
   switch (severity) {
     case "good":
-      return { text: "#10b981", bg: "rgba(16,185,129,0.1)", border: "rgba(16,185,129,0.25)" };
+      return {
+        text: "#10b981",
+        bg: "rgba(16,185,129,0.1)",
+        border: "rgba(16,185,129,0.25)"
+      };
     case "watch":
-      return { text: "#f59e0b", bg: "rgba(245,158,11,0.1)", border: "rgba(245,158,11,0.25)" };
+      return {
+        text: "#f59e0b",
+        bg: "rgba(245,158,11,0.1)",
+        border: "rgba(245,158,11,0.25)"
+      };
     case "gap":
-      return { text: "#ef4444", bg: "rgba(239,68,68,0.1)", border: "rgba(239,68,68,0.25)" };
+      return {
+        text: "#ef4444",
+        bg: "rgba(239,68,68,0.1)",
+        border: "rgba(239,68,68,0.25)"
+      };
   }
 }
-function OpiBadgeChip({ skin = defaultSkin }) {
+function OpiBadgeChip({
+  skin = defaultSkin
+}) {
   return /* @__PURE__ */ jsxs(
     "span",
     {
       className: "inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[9px] font-medium uppercase tracking-wide",
-      style: { background: "#0b0f1a", color: skin.accent, border: `1px solid ${skin.accent}33` },
+      style: {
+        background: "#0b0f1a",
+        color: skin.accent,
+        border: `1px solid ${skin.accent}33`
+      },
       children: [
         /* @__PURE__ */ jsx(
           "span",
           {
             className: "w-2.5 h-2.5 rounded-full",
-            style: { background: `radial-gradient(circle at 30% 30%, ${skin.accent}, #0d5a63 70%)` }
+            style: {
+              background: `radial-gradient(circle at 30% 30%, ${skin.accent}, #0d5a63 70%)`
+            }
           }
         ),
         "Powered by AI"
@@ -43,14 +63,27 @@ function OpiBadgeChip({ skin = defaultSkin }) {
     }
   );
 }
-function OpiScoreDial({ score, size = 56 }) {
+function OpiScoreDial({
+  score,
+  size = 56
+}) {
   const radius = (size - 6) / 2;
   const circumference = 2 * Math.PI * radius;
   const offset = circumference - score / 100 * circumference;
   const color = score >= 75 ? "#10b981" : score >= 45 ? "#f59e0b" : "#ef4444";
   return /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", style: { width: size, height: size }, children: [
     /* @__PURE__ */ jsxs("svg", { width: size, height: size, className: "-rotate-90", children: [
-      /* @__PURE__ */ jsx("circle", { cx: size / 2, cy: size / 2, r: radius, fill: "none", stroke: "rgba(255,255,255,0.06)", strokeWidth: 4 }),
+      /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx: size / 2,
+          cy: size / 2,
+          r: radius,
+          fill: "none",
+          stroke: "rgba(255,255,255,0.06)",
+          strokeWidth: 4
+        }
+      ),
       /* @__PURE__ */ jsx(
         "circle",
         {
@@ -77,7 +110,14 @@ function OpiSectionHeading({
 }) {
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2.5", children: [
     /* @__PURE__ */ jsx("span", { style: { color: skin.accent }, children: icon }),
-    /* @__PURE__ */ jsx("h4", { className: "text-[11px] font-bold uppercase tracking-wider", style: { color: skin.softText }, children: title })
+    /* @__PURE__ */ jsx(
+      "h4",
+      {
+        className: "text-[11px] font-bold uppercase tracking-wider",
+        style: { color: skin.softText },
+        children: title
+      }
+    )
   ] });
 }
 function OpiInsightsShell({
@@ -101,7 +141,11 @@ function OpiInsightsShell({
       {
         onClick: () => setOpen(true),
         className: "flex flex-col items-center gap-2 py-4 px-1.5 rounded-l-lg shrink-0 self-start sticky top-4 transition-colors hover:brightness-110",
-        style: { background: skin.panelBg, border: skin.panelBorder, borderRight: "none" },
+        style: {
+          background: skin.panelBg,
+          border: skin.panelBorder,
+          borderRight: "none"
+        },
         title: `Open ${title}`,
         children: [
           /* @__PURE__ */ jsx(Sparkles, { size: 14, style: { color: skin.accent } }),
@@ -128,7 +172,9 @@ function OpiInsightsShell({
           "div",
           {
             className: "flex items-center justify-between gap-2 px-4 py-3 shrink-0",
-            style: { background: "linear-gradient(135deg, #0d5a63 0%, #0b3a40 100%)" },
+            style: {
+              background: "linear-gradient(135deg, #0d5a63 0%, #0b3a40 100%)"
+            },
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
                 /* @__PURE__ */ jsx(
@@ -155,7 +201,14 @@ function OpiInsightsShell({
         ),
         /* @__PURE__ */ jsxs("div", { className: "overflow-y-auto px-4 py-3.5 space-y-5", children: [
           headline && /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("p", { className: "text-[12px] leading-relaxed mb-2", style: { color: skin.bodyText }, children: headline }),
+            /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: "text-[12px] leading-relaxed mb-2",
+                style: { color: skin.bodyText },
+                children: headline
+              }
+            ),
             /* @__PURE__ */ jsx(OpiBadgeChip, { skin })
           ] }),
           children
@@ -185,7 +238,11 @@ var defaultSkin2 = {
   bodyText: "#c0c6d0",
   softText: "#8890a0"
 };
-function OpiAskBar({ onAsk, placeholder = "Ask Opi about this\u2026", skin = defaultSkin2 }) {
+function OpiAskBar({
+  onAsk,
+  placeholder = "Ask Opi about this\u2026",
+  skin = defaultSkin2
+}) {
   const [thread, setThread] = useState2([]);
   const [input, setInput] = useState2("");
   const [pending, setPending] = useState2(false);
@@ -207,54 +264,86 @@ function OpiAskBar({ onAsk, placeholder = "Ask Opi about this\u2026", skin = def
       setPending(false);
     }
   };
-  return /* @__PURE__ */ jsxs2("div", { className: "pt-1 -mx-4 -mb-3.5 px-4 pb-3.5", style: { borderTop: skin.panelBorder }, children: [
-    thread.length > 0 && /* @__PURE__ */ jsxs2("div", { className: "space-y-2 py-3 max-h-64 overflow-y-auto", children: [
-      thread.map((m, i) => /* @__PURE__ */ jsxs2(
-        "div",
-        {
-          className: "text-[11px] leading-relaxed rounded-lg px-2.5 py-2",
-          style: m.role === "user" ? { background: "rgba(255,255,255,0.04)", color: skin.bodyText } : { background: `${skin.accent}14`, color: skin.bodyText, border: `1px solid ${skin.accent}26` },
-          children: [
-            m.role === "assistant" && /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1 mb-1", style: { color: skin.accent }, children: [
-              /* @__PURE__ */ jsx2(Sparkles2, { size: 10 }),
-              /* @__PURE__ */ jsx2("span", { className: "text-[9px] font-bold uppercase tracking-wide", children: "Opi" })
-            ] }),
-            m.content
-          ]
-        },
-        i
-      )),
-      pending && /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1.5 text-[10px]", style: { color: skin.mutedText }, children: [
-        /* @__PURE__ */ jsx2(Loader2, { size: 11, className: "animate-spin" }),
-        "Thinking\u2026"
-      ] })
-    ] }),
-    error && /* @__PURE__ */ jsx2("p", { className: "text-[10px] pb-2", style: { color: "#ef4444" }, children: error }),
-    /* @__PURE__ */ jsxs2("form", { onSubmit: handleSubmit, className: "flex items-center gap-1.5 pt-2", children: [
-      /* @__PURE__ */ jsx2(
-        "input",
-        {
-          value: input,
-          onChange: (e) => setInput(e.target.value),
-          placeholder,
-          disabled: pending,
-          className: "flex-1 min-w-0 rounded-md px-2.5 py-1.5 text-[11px] outline-none",
-          style: { background: "#0b0f1a", border: skin.panelBorder, color: skin.bodyText }
-        }
-      ),
-      /* @__PURE__ */ jsx2(
-        "button",
-        {
-          type: "submit",
-          disabled: !input.trim() || pending,
-          className: "shrink-0 w-7 h-7 rounded-md flex items-center justify-center transition-opacity disabled:opacity-40",
-          style: { background: `${skin.accent}26`, color: skin.accent },
-          title: "Ask Opi",
-          children: /* @__PURE__ */ jsx2(Send, { size: 12 })
-        }
-      )
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: "pt-1 -mx-4 -mb-3.5 px-4 pb-3.5",
+      style: { borderTop: skin.panelBorder },
+      children: [
+        thread.length > 0 && /* @__PURE__ */ jsxs2("div", { className: "space-y-2 py-3 max-h-64 overflow-y-auto", children: [
+          thread.map((m, i) => /* @__PURE__ */ jsxs2(
+            "div",
+            {
+              className: "text-[11px] leading-relaxed rounded-lg px-2.5 py-2",
+              style: m.role === "user" ? {
+                background: "rgba(255,255,255,0.04)",
+                color: skin.bodyText
+              } : {
+                background: `${skin.accent}14`,
+                color: skin.bodyText,
+                border: `1px solid ${skin.accent}26`
+              },
+              children: [
+                m.role === "assistant" && /* @__PURE__ */ jsxs2(
+                  "div",
+                  {
+                    className: "flex items-center gap-1 mb-1",
+                    style: { color: skin.accent },
+                    children: [
+                      /* @__PURE__ */ jsx2(Sparkles2, { size: 10 }),
+                      /* @__PURE__ */ jsx2("span", { className: "text-[9px] font-bold uppercase tracking-wide", children: "Opi" })
+                    ]
+                  }
+                ),
+                m.content
+              ]
+            },
+            i
+          )),
+          pending && /* @__PURE__ */ jsxs2(
+            "div",
+            {
+              className: "flex items-center gap-1.5 text-[10px]",
+              style: { color: skin.mutedText },
+              children: [
+                /* @__PURE__ */ jsx2(Loader2, { size: 11, className: "animate-spin" }),
+                "Thinking\u2026"
+              ]
+            }
+          )
+        ] }),
+        error && /* @__PURE__ */ jsx2("p", { className: "text-[10px] pb-2", style: { color: "#ef4444" }, children: error }),
+        /* @__PURE__ */ jsxs2("form", { onSubmit: handleSubmit, className: "flex items-center gap-1.5 pt-2", children: [
+          /* @__PURE__ */ jsx2(
+            "input",
+            {
+              value: input,
+              onChange: (e) => setInput(e.target.value),
+              placeholder,
+              disabled: pending,
+              className: "flex-1 min-w-0 rounded-md px-2.5 py-1.5 text-[11px] outline-none",
+              style: {
+                background: "#0b0f1a",
+                border: skin.panelBorder,
+                color: skin.bodyText
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "submit",
+              disabled: !input.trim() || pending,
+              className: "shrink-0 w-7 h-7 rounded-md flex items-center justify-center transition-opacity disabled:opacity-40",
+              style: { background: `${skin.accent}26`, color: skin.accent },
+              title: "Ask Opi",
+              children: /* @__PURE__ */ jsx2(Send, { size: 12 })
+            }
+          )
+        ] })
+      ]
+    }
+  );
 }
 export {
   OpiAskBar,

package/dist/insights/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/insights/OpiInsightsShell.tsx","../../src/insights/OpiAskBar.tsx"],"sourcesContent":["/**\n * OpiInsightsShell — the standard collapsible \"Opi Insights\" AI coaching\n * sidebar chrome, shared by every Oplytics subdomain service.\n *\n * This is deliberately shell-only: it owns the collapsible rail, header,\n * \"Powered by AI\" badge, and the small set of visual primitives every\n * service's AI panel tends to need (score dial, severity styling, section\n * heading, footer note). Each service supplies its OWN domain analysis and\n * renders its own content as children — same pattern as reportingToolbar\n * and hierarchyNavigator. Policy Deployment is the design source (see\n * OpiInsightsPanel there for the first real consumer) and the reference\n * for what a service-specific content tree looks like inside this shell.\n *\n * Services with their own dark-theme skin tokens (panel background, border,\n * text colors) should pass them via `skin` so the panel matches their other\n * views; omit it to fall back to the shared oplytics-theme teal/dark tokens.\n */\nimport { useState, type ReactNode } from \"react\";\nimport { Sparkles, ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { OPLYTICS_COLORS } from \"../theme\";\n\nexport type InsightSeverity = \"good\" | \"watch\" | \"gap\";\n\nexport interface OpiInsightsSkin {\n  accent: string;\n  panelBg: string;\n  panelBorder: string;\n  mutedText: string;\n  bodyText: string;\n  softText: string;\n}\n\nconst defaultSkin: OpiInsightsSkin = {\n  accent: OPLYTICS_COLORS.accentTeal,\n  panelBg: \"#0e1624\",\n  panelBorder: \"1px solid #1e2738\",\n  mutedText: \"#596475\",\n  bodyText: \"#c0c6d0\",\n  softText: \"#8890a0\",\n};\n\nexport function severityColor(severity: InsightSeverity): { text: string; bg: string; border: string } {\n  switch (severity) {\n    case \"good\":\n      return { text: \"#10b981\", bg: \"rgba(16,185,129,0.1)\", border: \"rgba(16,185,129,0.25)\" };\n    case \"watch\":\n      return { text: \"#f59e0b\", bg: \"rgba(245,158,11,0.1)\", border: \"rgba(245,158,11,0.25)\" };\n    case \"gap\":\n      return { text: \"#ef4444\", bg: \"rgba(239,68,68,0.1)\", border: \"rgba(239,68,68,0.25)\" };\n  }\n}\n\n/** Small \"Powered by AI\" chip — the standard cross-service Opi AI marker. */\nexport function OpiBadgeChip({ skin = defaultSkin }: { skin?: OpiInsightsSkin }) {\n  return (\n    <span\n      className=\"inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[9px] font-medium uppercase tracking-wide\"\n      style={{ background: \"#0b0f1a\", color: skin.accent, border: `1px solid ${skin.accent}33` }}\n    >\n      <span\n        className=\"w-2.5 h-2.5 rounded-full\"\n        style={{ background: `radial-gradient(circle at 30% 30%, ${skin.accent}, #0d5a63 70%)` }}\n      />\n      Powered by AI\n    </span>\n  );\n}\n\n/** Circular 0-100 score dial — green/amber/red by threshold, used for any composite score. */\nexport function OpiScoreDial({ score, size = 56 }: { score: number; size?: number }) {\n  const radius = (size - 6) / 2;\n  const circumference = 2 * Math.PI * radius;\n  const offset = circumference - (score / 100) * circumference;\n  const color = score >= 75 ? \"#10b981\" : score >= 45 ? \"#f59e0b\" : \"#ef4444\";\n  return (\n    <div className=\"relative shrink-0\" style={{ width: size, height: size }}>\n      <svg width={size} height={size} className=\"-rotate-90\">\n        <circle cx={size / 2} cy={size / 2} r={radius} fill=\"none\" stroke=\"rgba(255,255,255,0.06)\" strokeWidth={4} />\n        <circle\n          cx={size / 2} cy={size / 2} r={radius} fill=\"none\" stroke={color} strokeWidth={4}\n          strokeLinecap=\"round\" strokeDasharray={circumference} strokeDashoffset={offset}\n          style={{ transition: \"stroke-dashoffset 0.6s ease-out\" }}\n        />\n      </svg>\n      <div className=\"absolute inset-0 flex items-center justify-center\">\n        <span className=\"text-sm font-bold text-white\">{score}</span>\n      </div>\n    </div>\n  );\n}\n\n/** Section label with an icon — used to group the panel's content into named sections. */\nexport function OpiSectionHeading({\n  icon,\n  title,\n  skin = defaultSkin,\n}: {\n  icon: ReactNode;\n  title: string;\n  skin?: OpiInsightsSkin;\n}) {\n  return (\n    <div className=\"flex items-center gap-2 mb-2.5\">\n      <span style={{ color: skin.accent }}>{icon}</span>\n      <h4 className=\"text-[11px] font-bold uppercase tracking-wider\" style={{ color: skin.softText }}>\n        {title}\n      </h4>\n    </div>\n  );\n}\n\nexport interface OpiInsightsShellProps {\n  /** Panel content — build with OpiSectionHeading/OpiScoreDial/severityColor etc. */\n  children: ReactNode;\n  /** Optional headline shown above the badge (e.g. a one-line AI summary). */\n  headline?: ReactNode;\n  /** Footer note — defaults to the standard \"mocked pending real engine\" preview notice. */\n  footerNote?: ReactNode;\n  /** Service-specific dark-theme tokens; falls back to the shared theme's teal/dark defaults. */\n  skin?: OpiInsightsSkin;\n  /** Panel title in the header. Defaults to \"Opi Insights\". */\n  title?: string;\n  /** Controlled open state. Omit to let the shell manage its own collapse state. */\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\n/**\n * The collapsible teal Opi Insights rail. Renders nothing if collapsed\n * except a slim vertical tab; expanded, it's a fixed-width sticky sidebar\n * with a header, scrollable content area, and footer note.\n */\nexport function OpiInsightsShell({\n  children,\n  headline,\n  footerNote = \"Preview build — coaching logic is mocked pending the real Opi engine.\",\n  skin = defaultSkin,\n  title = \"Opi Insights\",\n  open: openProp,\n  onOpenChange,\n}: OpiInsightsShellProps) {\n  const [openState, setOpenState] = useState(true);\n  const open = openProp ?? openState;\n  const setOpen = (value: boolean) => {\n    setOpenState(value);\n    onOpenChange?.(value);\n  };\n\n  if (!open) {\n    return (\n      <button\n        onClick={() => setOpen(true)}\n        className=\"flex flex-col items-center gap-2 py-4 px-1.5 rounded-l-lg shrink-0 self-start sticky top-4 transition-colors hover:brightness-110\"\n        style={{ background: skin.panelBg, border: skin.panelBorder, borderRight: \"none\" }}\n        title={`Open ${title}`}\n      >\n        <Sparkles size={14} style={{ color: skin.accent }} />\n        <span\n          className=\"text-[10px] font-semibold uppercase tracking-wider\"\n          style={{ color: skin.accent, writingMode: \"vertical-rl\" }}\n        >\n          {title}\n        </span>\n        <ChevronLeft size={12} style={{ color: skin.mutedText }} />\n      </button>\n    );\n  }\n\n  return (\n    <aside\n      className=\"w-[300px] shrink-0 rounded-lg overflow-hidden self-start sticky top-4 max-h-[calc(100vh-6rem)] flex flex-col\"\n      style={{ background: skin.panelBg, border: skin.panelBorder }}\n    >\n      <div\n        className=\"flex items-center justify-between gap-2 px-4 py-3 shrink-0\"\n        style={{ background: \"linear-gradient(135deg, #0d5a63 0%, #0b3a40 100%)\" }}\n      >\n        <div className=\"flex items-center gap-2 min-w-0\">\n          <div\n            className=\"w-6 h-6 rounded-md flex items-center justify-center shrink-0\"\n            style={{ background: `${skin.accent}26` }}\n          >\n            <Sparkles size={13} style={{ color: skin.accent }} />\n          </div>\n          <span className=\"text-xs font-bold text-white truncate\">{title}</span>\n        </div>\n        <button\n          onClick={() => setOpen(false)}\n          className=\"p-1 rounded hover:bg-white/10 transition-colors shrink-0\"\n          title=\"Collapse\"\n        >\n          <ChevronRight size={14} className=\"text-white/70\" />\n        </button>\n      </div>\n\n      <div className=\"overflow-y-auto px-4 py-3.5 space-y-5\">\n        {headline && (\n          <div>\n            <p className=\"text-[12px] leading-relaxed mb-2\" style={{ color: skin.bodyText }}>\n              {headline}\n            </p>\n            <OpiBadgeChip skin={skin} />\n          </div>\n        )}\n        {children}\n      </div>\n\n      {footerNote && (\n        <div\n          className=\"px-4 py-2 text-[9px] text-center shrink-0\"\n          style={{ color: skin.mutedText, borderTop: skin.panelBorder }}\n        >\n          {footerNote}\n        </div>\n      )}\n    </aside>\n  );\n}\n","/**\n * OpiAskBar — the follow-up chat input for the Opi Insights panel.\n *\n * The shell and every service's analysis content are read-only displays;\n * this is the one interactive surface where a user can ask Opi a question\n * about what's on screen. Transport-agnostic by design: each consuming\n * app has its own way of reaching the portal's `ai.askOpi` endpoint (same-\n * origin tRPC in the portal itself, a cross-origin client elsewhere), so\n * this component takes a plain `onAsk(question)` callback rather than\n * knowing about tRPC. Renders its own short message thread above the\n * input; the shell just places it as the last child.\n */\nimport { useState, type FormEvent } from \"react\";\nimport { Sparkles, Send, Loader2 } from \"lucide-react\";\nimport type { OpiInsightsSkin } from \"./OpiInsightsShell\";\n\ninterface AskMessage {\n  role: \"user\" | \"assistant\";\n  content: string;\n}\n\nexport interface OpiAskBarProps {\n  /** Sends the question (with prior thread already appended by the caller if desired) and resolves with Opi's reply. */\n  onAsk: (question: string) => Promise<string>;\n  /** Placeholder for the input. Defaults to a generic prompt. */\n  placeholder?: string;\n  skin?: OpiInsightsSkin;\n}\n\nconst defaultSkin: OpiInsightsSkin = {\n  accent: \"#14b8a6\",\n  panelBg: \"#0e1624\",\n  panelBorder: \"1px solid #1e2738\",\n  mutedText: \"#596475\",\n  bodyText: \"#c0c6d0\",\n  softText: \"#8890a0\",\n};\n\nexport function OpiAskBar({ onAsk, placeholder = \"Ask Opi about this…\", skin = defaultSkin }: OpiAskBarProps) {\n  const [thread, setThread] = useState<AskMessage[]>([]);\n  const [input, setInput] = useState(\"\");\n  const [pending, setPending] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  const handleSubmit = async (e: FormEvent) => {\n    e.preventDefault();\n    const question = input.trim();\n    if (!question || pending) return;\n\n    setThread((prev) => [...prev, { role: \"user\", content: question }]);\n    setInput(\"\");\n    setPending(true);\n    setError(null);\n\n    try {\n      const reply = await onAsk(question);\n      setThread((prev) => [...prev, { role: \"assistant\", content: reply }]);\n    } catch {\n      setError(\"Couldn't reach Opi just then — give it another go.\");\n    } finally {\n      setPending(false);\n    }\n  };\n\n  return (\n    <div className=\"pt-1 -mx-4 -mb-3.5 px-4 pb-3.5\" style={{ borderTop: skin.panelBorder }}>\n      {thread.length > 0 && (\n        <div className=\"space-y-2 py-3 max-h-64 overflow-y-auto\">\n          {thread.map((m, i) => (\n            <div\n              key={i}\n              className=\"text-[11px] leading-relaxed rounded-lg px-2.5 py-2\"\n              style={\n                m.role === \"user\"\n                  ? { background: \"rgba(255,255,255,0.04)\", color: skin.bodyText }\n                  : { background: `${skin.accent}14`, color: skin.bodyText, border: `1px solid ${skin.accent}26` }\n              }\n            >\n              {m.role === \"assistant\" && (\n                <div className=\"flex items-center gap-1 mb-1\" style={{ color: skin.accent }}>\n                  <Sparkles size={10} />\n                  <span className=\"text-[9px] font-bold uppercase tracking-wide\">Opi</span>\n                </div>\n              )}\n              {m.content}\n            </div>\n          ))}\n          {pending && (\n            <div className=\"flex items-center gap-1.5 text-[10px]\" style={{ color: skin.mutedText }}>\n              <Loader2 size={11} className=\"animate-spin\" />\n              Thinking…\n            </div>\n          )}\n        </div>\n      )}\n\n      {error && (\n        <p className=\"text-[10px] pb-2\" style={{ color: \"#ef4444\" }}>\n          {error}\n        </p>\n      )}\n\n      <form onSubmit={handleSubmit} className=\"flex items-center gap-1.5 pt-2\">\n        <input\n          value={input}\n          onChange={(e) => setInput(e.target.value)}\n          placeholder={placeholder}\n          disabled={pending}\n          className=\"flex-1 min-w-0 rounded-md px-2.5 py-1.5 text-[11px] outline-none\"\n          style={{ background: \"#0b0f1a\", border: skin.panelBorder, color: skin.bodyText }}\n        />\n        <button\n          type=\"submit\"\n          disabled={!input.trim() || pending}\n          className=\"shrink-0 w-7 h-7 rounded-md flex items-center justify-center transition-opacity disabled:opacity-40\"\n          style={{ background: `${skin.accent}26`, color: skin.accent }}\n          title=\"Ask Opi\"\n        >\n          <Send size={12} />\n        </button>\n      </form>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAiBA,SAAS,gBAAgC;AACzC,SAAS,UAAU,aAAa,oBAAoB;AAqChD,SAIE,KAJF;AAvBJ,IAAM,cAA+B;AAAA,EACnC,QAAQ,gBAAgB;AAAA,EACxB,SAAS;AAAA,EACT,aAAa;AAAA,EACb,WAAW;AAAA,EACX,UAAU;AAAA,EACV,UAAU;AACZ;AAEO,SAAS,cAAc,UAAyE;AACrG,UAAQ,UAAU;AAAA,IAChB,KAAK;AACH,aAAO,EAAE,MAAM,WAAW,IAAI,wBAAwB,QAAQ,wBAAwB;AAAA,IACxF,KAAK;AACH,aAAO,EAAE,MAAM,WAAW,IAAI,wBAAwB,QAAQ,wBAAwB;AAAA,IACxF,KAAK;AACH,aAAO,EAAE,MAAM,WAAW,IAAI,uBAAuB,QAAQ,uBAAuB;AAAA,EACxF;AACF;AAGO,SAAS,aAAa,EAAE,OAAO,YAAY,GAA+B;AAC/E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,YAAY,WAAW,OAAO,KAAK,QAAQ,QAAQ,aAAa,KAAK,MAAM,KAAK;AAAA,MAEzF;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,YAAY,sCAAsC,KAAK,MAAM,iBAAiB;AAAA;AAAA,QACzF;AAAA,QAAE;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAGO,SAAS,aAAa,EAAE,OAAO,OAAO,GAAG,GAAqC;AACnF,QAAM,UAAU,OAAO,KAAK;AAC5B,QAAM,gBAAgB,IAAI,KAAK,KAAK;AACpC,QAAM,SAAS,gBAAiB,QAAQ,MAAO;AAC/C,QAAM,QAAQ,SAAS,KAAK,YAAY,SAAS,KAAK,YAAY;AAClE,SACE,qBAAC,SAAI,WAAU,qBAAoB,OAAO,EAAE,OAAO,MAAM,QAAQ,KAAK,GACpE;AAAA,yBAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,WAAU,cACxC;AAAA,0BAAC,YAAO,IAAI,OAAO,GAAG,IAAI,OAAO,GAAG,GAAG,QAAQ,MAAK,QAAO,QAAO,0BAAyB,aAAa,GAAG;AAAA,MAC3G;AAAA,QAAC;AAAA;AAAA,UACC,IAAI,OAAO;AAAA,UAAG,IAAI,OAAO;AAAA,UAAG,GAAG;AAAA,UAAQ,MAAK;AAAA,UAAO,QAAQ;AAAA,UAAO,aAAa;AAAA,UAC/E,eAAc;AAAA,UAAQ,iBAAiB;AAAA,UAAe,kBAAkB;AAAA,UACxE,OAAO,EAAE,YAAY,kCAAkC;AAAA;AAAA,MACzD;AAAA,OACF;AAAA,IACA,oBAAC,SAAI,WAAU,qDACb,8BAAC,UAAK,WAAU,gCAAgC,iBAAM,GACxD;AAAA,KACF;AAEJ;AAGO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA,OAAO;AACT,GAIG;AACD,SACE,qBAAC,SAAI,WAAU,kCACb;AAAA,wBAAC,UAAK,OAAO,EAAE,OAAO,KAAK,OAAO,GAAI,gBAAK;AAAA,IAC3C,oBAAC,QAAG,WAAU,kDAAiD,OAAO,EAAE,OAAO,KAAK,SAAS,GAC1F,iBACH;AAAA,KACF;AAEJ;AAuBO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AAAA,EACN;AACF,GAA0B;AACxB,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,IAAI;AAC/C,QAAM,OAAO,YAAY;AACzB,QAAM,UAAU,CAAC,UAAmB;AAClC,iBAAa,KAAK;AAClB,mBAAe,KAAK;AAAA,EACtB;AAEA,MAAI,CAAC,MAAM;AACT,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM,QAAQ,IAAI;AAAA,QAC3B,WAAU;AAAA,QACV,OAAO,EAAE,YAAY,KAAK,SAAS,QAAQ,KAAK,aAAa,aAAa,OAAO;AAAA,QACjF,OAAO,QAAQ,KAAK;AAAA,QAEpB;AAAA,8BAAC,YAAS,MAAM,IAAI,OAAO,EAAE,OAAO,KAAK,OAAO,GAAG;AAAA,UACnD;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,OAAO,KAAK,QAAQ,aAAa,cAAc;AAAA,cAEvD;AAAA;AAAA,UACH;AAAA,UACA,oBAAC,eAAY,MAAM,IAAI,OAAO,EAAE,OAAO,KAAK,UAAU,GAAG;AAAA;AAAA;AAAA,IAC3D;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,YAAY,KAAK,SAAS,QAAQ,KAAK,YAAY;AAAA,MAE5D;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,YAAY,oDAAoD;AAAA,YAEzE;AAAA,mCAAC,SAAI,WAAU,mCACb;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAU;AAAA,oBACV,OAAO,EAAE,YAAY,GAAG,KAAK,MAAM,KAAK;AAAA,oBAExC,8BAAC,YAAS,MAAM,IAAI,OAAO,EAAE,OAAO,KAAK,OAAO,GAAG;AAAA;AAAA,gBACrD;AAAA,gBACA,oBAAC,UAAK,WAAU,yCAAyC,iBAAM;AAAA,iBACjE;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAS,MAAM,QAAQ,KAAK;AAAA,kBAC5B,WAAU;AAAA,kBACV,OAAM;AAAA,kBAEN,8BAAC,gBAAa,MAAM,IAAI,WAAU,iBAAgB;AAAA;AAAA,cACpD;AAAA;AAAA;AAAA,QACF;AAAA,QAEA,qBAAC,SAAI,WAAU,yCACZ;AAAA,sBACC,qBAAC,SACC;AAAA,gCAAC,OAAE,WAAU,oCAAmC,OAAO,EAAE,OAAO,KAAK,SAAS,GAC3E,oBACH;AAAA,YACA,oBAAC,gBAAa,MAAY;AAAA,aAC5B;AAAA,UAED;AAAA,WACH;AAAA,QAEC,cACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,OAAO,KAAK,WAAW,WAAW,KAAK,YAAY;AAAA,YAE3D;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;;;AC7MA,SAAS,YAAAA,iBAAgC;AACzC,SAAS,YAAAC,WAAU,MAAM,eAAe;AAkExB,SACE,OAAAC,MADF,QAAAC,aAAA;AAlDhB,IAAMC,eAA+B;AAAA,EACnC,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,aAAa;AAAA,EACb,WAAW;AAAA,EACX,UAAU;AAAA,EACV,UAAU;AACZ;AAEO,SAAS,UAAU,EAAE,OAAO,cAAc,4BAAuB,OAAOA,aAAY,GAAmB;AAC5G,QAAM,CAAC,QAAQ,SAAS,IAAIJ,UAAuB,CAAC,CAAC;AACrD,QAAM,CAAC,OAAO,QAAQ,IAAIA,UAAS,EAAE;AACrC,QAAM,CAAC,SAAS,UAAU,IAAIA,UAAS,KAAK;AAC5C,QAAM,CAAC,OAAO,QAAQ,IAAIA,UAAwB,IAAI;AAEtD,QAAM,eAAe,OAAO,MAAiB;AAC3C,MAAE,eAAe;AACjB,UAAM,WAAW,MAAM,KAAK;AAC5B,QAAI,CAAC,YAAY,QAAS;AAE1B,cAAU,CAAC,SAAS,CAAC,GAAG,MAAM,EAAE,MAAM,QAAQ,SAAS,SAAS,CAAC,CAAC;AAClE,aAAS,EAAE;AACX,eAAW,IAAI;AACf,aAAS,IAAI;AAEb,QAAI;AACF,YAAM,QAAQ,MAAM,MAAM,QAAQ;AAClC,gBAAU,CAAC,SAAS,CAAC,GAAG,MAAM,EAAE,MAAM,aAAa,SAAS,MAAM,CAAC,CAAC;AAAA,IACtE,QAAQ;AACN,eAAS,yDAAoD;AAAA,IAC/D,UAAE;AACA,iBAAW,KAAK;AAAA,IAClB;AAAA,EACF;AAEA,SACE,gBAAAG,MAAC,SAAI,WAAU,kCAAiC,OAAO,EAAE,WAAW,KAAK,YAAY,GAClF;AAAA,WAAO,SAAS,KACf,gBAAAA,MAAC,SAAI,WAAU,2CACZ;AAAA,aAAO,IAAI,CAAC,GAAG,MACd,gBAAAA;AAAA,QAAC;AAAA;AAAA,UAEC,WAAU;AAAA,UACV,OACE,EAAE,SAAS,SACP,EAAE,YAAY,0BAA0B,OAAO,KAAK,SAAS,IAC7D,EAAE,YAAY,GAAG,KAAK,MAAM,MAAM,OAAO,KAAK,UAAU,QAAQ,aAAa,KAAK,MAAM,KAAK;AAAA,UAGlG;AAAA,cAAE,SAAS,eACV,gBAAAA,MAAC,SAAI,WAAU,gCAA+B,OAAO,EAAE,OAAO,KAAK,OAAO,GACxE;AAAA,8BAAAD,KAACD,WAAA,EAAS,MAAM,IAAI;AAAA,cACpB,gBAAAC,KAAC,UAAK,WAAU,gDAA+C,iBAAG;AAAA,eACpE;AAAA,YAED,EAAE;AAAA;AAAA;AAAA,QAdE;AAAA,MAeP,CACD;AAAA,MACA,WACC,gBAAAC,MAAC,SAAI,WAAU,yCAAwC,OAAO,EAAE,OAAO,KAAK,UAAU,GACpF;AAAA,wBAAAD,KAAC,WAAQ,MAAM,IAAI,WAAU,gBAAe;AAAA,QAAE;AAAA,SAEhD;AAAA,OAEJ;AAAA,IAGD,SACC,gBAAAA,KAAC,OAAE,WAAU,oBAAmB,OAAO,EAAE,OAAO,UAAU,GACvD,iBACH;AAAA,IAGF,gBAAAC,MAAC,UAAK,UAAU,cAAc,WAAU,kCACtC;AAAA,sBAAAD;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,UACxC;AAAA,UACA,UAAU;AAAA,UACV,WAAU;AAAA,UACV,OAAO,EAAE,YAAY,WAAW,QAAQ,KAAK,aAAa,OAAO,KAAK,SAAS;AAAA;AAAA,MACjF;AAAA,MACA,gBAAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAU,CAAC,MAAM,KAAK,KAAK;AAAA,UAC3B,WAAU;AAAA,UACV,OAAO,EAAE,YAAY,GAAG,KAAK,MAAM,MAAM,OAAO,KAAK,OAAO;AAAA,UAC5D,OAAM;AAAA,UAEN,0BAAAA,KAAC,QAAK,MAAM,IAAI;AAAA;AAAA,MAClB;AAAA,OACF;AAAA,KACF;AAEJ;","names":["useState","Sparkles","jsx","jsxs","defaultSkin"]}
+{"version":3,"sources":["../../src/insights/OpiInsightsShell.tsx","../../src/insights/OpiAskBar.tsx"],"sourcesContent":["/**\n * OpiInsightsShell — the standard collapsible \"Opi Insights\" AI coaching\n * sidebar chrome, shared by every Oplytics subdomain service.\n *\n * This is deliberately shell-only: it owns the collapsible rail, header,\n * \"Powered by AI\" badge, and the small set of visual primitives every\n * service's AI panel tends to need (score dial, severity styling, section\n * heading, footer note). Each service supplies its OWN domain analysis and\n * renders its own content as children — same pattern as reportingToolbar\n * and hierarchyNavigator. Policy Deployment is the design source (see\n * OpiInsightsPanel there for the first real consumer) and the reference\n * for what a service-specific content tree looks like inside this shell.\n *\n * Services with their own dark-theme skin tokens (panel background, border,\n * text colors) should pass them via `skin` so the panel matches their other\n * views; omit it to fall back to the shared oplytics-theme teal/dark tokens.\n */\nimport { useState, type ReactNode } from \"react\";\nimport { Sparkles, ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { OPLYTICS_COLORS } from \"../theme\";\n\nexport type InsightSeverity = \"good\" | \"watch\" | \"gap\";\n\nexport interface OpiInsightsSkin {\n  accent: string;\n  panelBg: string;\n  panelBorder: string;\n  mutedText: string;\n  bodyText: string;\n  softText: string;\n}\n\nconst defaultSkin: OpiInsightsSkin = {\n  accent: OPLYTICS_COLORS.accentTeal,\n  panelBg: \"#0e1624\",\n  panelBorder: \"1px solid #1e2738\",\n  mutedText: \"#596475\",\n  bodyText: \"#c0c6d0\",\n  softText: \"#8890a0\",\n};\n\nexport function severityColor(severity: InsightSeverity): {\n  text: string;\n  bg: string;\n  border: string;\n} {\n  switch (severity) {\n    case \"good\":\n      return {\n        text: \"#10b981\",\n        bg: \"rgba(16,185,129,0.1)\",\n        border: \"rgba(16,185,129,0.25)\",\n      };\n    case \"watch\":\n      return {\n        text: \"#f59e0b\",\n        bg: \"rgba(245,158,11,0.1)\",\n        border: \"rgba(245,158,11,0.25)\",\n      };\n    case \"gap\":\n      return {\n        text: \"#ef4444\",\n        bg: \"rgba(239,68,68,0.1)\",\n        border: \"rgba(239,68,68,0.25)\",\n      };\n  }\n}\n\n/** Small \"Powered by AI\" chip — the standard cross-service Opi AI marker. */\nexport function OpiBadgeChip({\n  skin = defaultSkin,\n}: {\n  skin?: OpiInsightsSkin;\n}) {\n  return (\n    <span\n      className=\"inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[9px] font-medium uppercase tracking-wide\"\n      style={{\n        background: \"#0b0f1a\",\n        color: skin.accent,\n        border: `1px solid ${skin.accent}33`,\n      }}\n    >\n      <span\n        className=\"w-2.5 h-2.5 rounded-full\"\n        style={{\n          background: `radial-gradient(circle at 30% 30%, ${skin.accent}, #0d5a63 70%)`,\n        }}\n      />\n      Powered by AI\n    </span>\n  );\n}\n\n/** Circular 0-100 score dial — green/amber/red by threshold, used for any composite score. */\nexport function OpiScoreDial({\n  score,\n  size = 56,\n}: {\n  score: number;\n  size?: number;\n}) {\n  const radius = (size - 6) / 2;\n  const circumference = 2 * Math.PI * radius;\n  const offset = circumference - (score / 100) * circumference;\n  const color = score >= 75 ? \"#10b981\" : score >= 45 ? \"#f59e0b\" : \"#ef4444\";\n  return (\n    <div className=\"relative shrink-0\" style={{ width: size, height: size }}>\n      <svg width={size} height={size} className=\"-rotate-90\">\n        <circle\n          cx={size / 2}\n          cy={size / 2}\n          r={radius}\n          fill=\"none\"\n          stroke=\"rgba(255,255,255,0.06)\"\n          strokeWidth={4}\n        />\n        <circle\n          cx={size / 2}\n          cy={size / 2}\n          r={radius}\n          fill=\"none\"\n          stroke={color}\n          strokeWidth={4}\n          strokeLinecap=\"round\"\n          strokeDasharray={circumference}\n          strokeDashoffset={offset}\n          style={{ transition: \"stroke-dashoffset 0.6s ease-out\" }}\n        />\n      </svg>\n      <div className=\"absolute inset-0 flex items-center justify-center\">\n        <span className=\"text-sm font-bold text-white\">{score}</span>\n      </div>\n    </div>\n  );\n}\n\n/** Section label with an icon — used to group the panel's content into named sections. */\nexport function OpiSectionHeading({\n  icon,\n  title,\n  skin = defaultSkin,\n}: {\n  icon: ReactNode;\n  title: string;\n  skin?: OpiInsightsSkin;\n}) {\n  return (\n    <div className=\"flex items-center gap-2 mb-2.5\">\n      <span style={{ color: skin.accent }}>{icon}</span>\n      <h4\n        className=\"text-[11px] font-bold uppercase tracking-wider\"\n        style={{ color: skin.softText }}\n      >\n        {title}\n      </h4>\n    </div>\n  );\n}\n\nexport interface OpiInsightsShellProps {\n  /** Panel content — build with OpiSectionHeading/OpiScoreDial/severityColor etc. */\n  children: ReactNode;\n  /** Optional headline shown above the badge (e.g. a one-line AI summary). */\n  headline?: ReactNode;\n  /** Footer note — defaults to the standard \"mocked pending real engine\" preview notice. */\n  footerNote?: ReactNode;\n  /** Service-specific dark-theme tokens; falls back to the shared theme's teal/dark defaults. */\n  skin?: OpiInsightsSkin;\n  /** Panel title in the header. Defaults to \"Opi Insights\". */\n  title?: string;\n  /** Controlled open state. Omit to let the shell manage its own collapse state. */\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\n/**\n * The collapsible teal Opi Insights rail. Renders nothing if collapsed\n * except a slim vertical tab; expanded, it's a fixed-width sticky sidebar\n * with a header, scrollable content area, and footer note.\n */\nexport function OpiInsightsShell({\n  children,\n  headline,\n  footerNote = \"Preview build — coaching logic is mocked pending the real Opi engine.\",\n  skin = defaultSkin,\n  title = \"Opi Insights\",\n  open: openProp,\n  onOpenChange,\n}: OpiInsightsShellProps) {\n  const [openState, setOpenState] = useState(true);\n  const open = openProp ?? openState;\n  const setOpen = (value: boolean) => {\n    setOpenState(value);\n    onOpenChange?.(value);\n  };\n\n  if (!open) {\n    return (\n      <button\n        onClick={() => setOpen(true)}\n        className=\"flex flex-col items-center gap-2 py-4 px-1.5 rounded-l-lg shrink-0 self-start sticky top-4 transition-colors hover:brightness-110\"\n        style={{\n          background: skin.panelBg,\n          border: skin.panelBorder,\n          borderRight: \"none\",\n        }}\n        title={`Open ${title}`}\n      >\n        <Sparkles size={14} style={{ color: skin.accent }} />\n        <span\n          className=\"text-[10px] font-semibold uppercase tracking-wider\"\n          style={{ color: skin.accent, writingMode: \"vertical-rl\" }}\n        >\n          {title}\n        </span>\n        <ChevronLeft size={12} style={{ color: skin.mutedText }} />\n      </button>\n    );\n  }\n\n  return (\n    <aside\n      className=\"w-[300px] shrink-0 rounded-lg overflow-hidden self-start sticky top-4 max-h-[calc(100vh-6rem)] flex flex-col\"\n      style={{ background: skin.panelBg, border: skin.panelBorder }}\n    >\n      <div\n        className=\"flex items-center justify-between gap-2 px-4 py-3 shrink-0\"\n        style={{\n          background: \"linear-gradient(135deg, #0d5a63 0%, #0b3a40 100%)\",\n        }}\n      >\n        <div className=\"flex items-center gap-2 min-w-0\">\n          <div\n            className=\"w-6 h-6 rounded-md flex items-center justify-center shrink-0\"\n            style={{ background: `${skin.accent}26` }}\n          >\n            <Sparkles size={13} style={{ color: skin.accent }} />\n          </div>\n          <span className=\"text-xs font-bold text-white truncate\">{title}</span>\n        </div>\n        <button\n          onClick={() => setOpen(false)}\n          className=\"p-1 rounded hover:bg-white/10 transition-colors shrink-0\"\n          title=\"Collapse\"\n        >\n          <ChevronRight size={14} className=\"text-white/70\" />\n        </button>\n      </div>\n\n      <div className=\"overflow-y-auto px-4 py-3.5 space-y-5\">\n        {headline && (\n          <div>\n            <p\n              className=\"text-[12px] leading-relaxed mb-2\"\n              style={{ color: skin.bodyText }}\n            >\n              {headline}\n            </p>\n            <OpiBadgeChip skin={skin} />\n          </div>\n        )}\n        {children}\n      </div>\n\n      {footerNote && (\n        <div\n          className=\"px-4 py-2 text-[9px] text-center shrink-0\"\n          style={{ color: skin.mutedText, borderTop: skin.panelBorder }}\n        >\n          {footerNote}\n        </div>\n      )}\n    </aside>\n  );\n}\n","/**\n * OpiAskBar — the follow-up chat input for the Opi Insights panel.\n *\n * The shell and every service's analysis content are read-only displays;\n * this is the one interactive surface where a user can ask Opi a question\n * about what's on screen. Transport-agnostic by design: each consuming\n * app has its own way of reaching the portal's `ai.askOpi` endpoint (same-\n * origin tRPC in the portal itself, a cross-origin client elsewhere), so\n * this component takes a plain `onAsk(question)` callback rather than\n * knowing about tRPC. Renders its own short message thread above the\n * input; the shell just places it as the last child.\n */\nimport { useState, type FormEvent } from \"react\";\nimport { Sparkles, Send, Loader2 } from \"lucide-react\";\nimport type { OpiInsightsSkin } from \"./OpiInsightsShell\";\n\ninterface AskMessage {\n  role: \"user\" | \"assistant\";\n  content: string;\n}\n\nexport interface OpiAskBarProps {\n  /** Sends the question (with prior thread already appended by the caller if desired) and resolves with Opi's reply. */\n  onAsk: (question: string) => Promise<string>;\n  /** Placeholder for the input. Defaults to a generic prompt. */\n  placeholder?: string;\n  skin?: OpiInsightsSkin;\n}\n\nconst defaultSkin: OpiInsightsSkin = {\n  accent: \"#14b8a6\",\n  panelBg: \"#0e1624\",\n  panelBorder: \"1px solid #1e2738\",\n  mutedText: \"#596475\",\n  bodyText: \"#c0c6d0\",\n  softText: \"#8890a0\",\n};\n\nexport function OpiAskBar({\n  onAsk,\n  placeholder = \"Ask Opi about this…\",\n  skin = defaultSkin,\n}: OpiAskBarProps) {\n  const [thread, setThread] = useState<AskMessage[]>([]);\n  const [input, setInput] = useState(\"\");\n  const [pending, setPending] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  const handleSubmit = async (e: FormEvent) => {\n    e.preventDefault();\n    const question = input.trim();\n    if (!question || pending) return;\n\n    setThread(prev => [...prev, { role: \"user\", content: question }]);\n    setInput(\"\");\n    setPending(true);\n    setError(null);\n\n    try {\n      const reply = await onAsk(question);\n      setThread(prev => [...prev, { role: \"assistant\", content: reply }]);\n    } catch {\n      setError(\"Couldn't reach Opi just then — give it another go.\");\n    } finally {\n      setPending(false);\n    }\n  };\n\n  return (\n    <div\n      className=\"pt-1 -mx-4 -mb-3.5 px-4 pb-3.5\"\n      style={{ borderTop: skin.panelBorder }}\n    >\n      {thread.length > 0 && (\n        <div className=\"space-y-2 py-3 max-h-64 overflow-y-auto\">\n          {thread.map((m, i) => (\n            <div\n              key={i}\n              className=\"text-[11px] leading-relaxed rounded-lg px-2.5 py-2\"\n              style={\n                m.role === \"user\"\n                  ? {\n                      background: \"rgba(255,255,255,0.04)\",\n                      color: skin.bodyText,\n                    }\n                  : {\n                      background: `${skin.accent}14`,\n                      color: skin.bodyText,\n                      border: `1px solid ${skin.accent}26`,\n                    }\n              }\n            >\n              {m.role === \"assistant\" && (\n                <div\n                  className=\"flex items-center gap-1 mb-1\"\n                  style={{ color: skin.accent }}\n                >\n                  <Sparkles size={10} />\n                  <span className=\"text-[9px] font-bold uppercase tracking-wide\">\n                    Opi\n                  </span>\n                </div>\n              )}\n              {m.content}\n            </div>\n          ))}\n          {pending && (\n            <div\n              className=\"flex items-center gap-1.5 text-[10px]\"\n              style={{ color: skin.mutedText }}\n            >\n              <Loader2 size={11} className=\"animate-spin\" />\n              Thinking…\n            </div>\n          )}\n        </div>\n      )}\n\n      {error && (\n        <p className=\"text-[10px] pb-2\" style={{ color: \"#ef4444\" }}>\n          {error}\n        </p>\n      )}\n\n      <form onSubmit={handleSubmit} className=\"flex items-center gap-1.5 pt-2\">\n        <input\n          value={input}\n          onChange={e => setInput(e.target.value)}\n          placeholder={placeholder}\n          disabled={pending}\n          className=\"flex-1 min-w-0 rounded-md px-2.5 py-1.5 text-[11px] outline-none\"\n          style={{\n            background: \"#0b0f1a\",\n            border: skin.panelBorder,\n            color: skin.bodyText,\n          }}\n        />\n        <button\n          type=\"submit\"\n          disabled={!input.trim() || pending}\n          className=\"shrink-0 w-7 h-7 rounded-md flex items-center justify-center transition-opacity disabled:opacity-40\"\n          style={{ background: `${skin.accent}26`, color: skin.accent }}\n          title=\"Ask Opi\"\n        >\n          <Send size={12} />\n        </button>\n      </form>\n    </div>\n  );\n}\n"],"mappings":"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","names":["useState","Sparkles","jsx","jsxs","defaultSkin"]}

package/dist/layout/index.d.ts

@@ -1,6 +1,6 @@
-import { S as SharedSidebarConfig } from '../HealthFooter-C5K9s38i.js';
-export { C as CrossServiceNav, d as CrossServiceNavProps, D as DashboardLayout, a as DashboardLayoutEnterprise, b as DashboardLayoutProps, c as DashboardLayoutUser, H as HealthFooter, e as HealthFooterEnterprise, f as HealthFooterProps, g as HealthFooterUser, M as MenuItem, h as MenuSection, i as SharedSidebarProps, j as getInitials, k as isAdminRole, l as isMenuItemActive, u as useSidebarResize } from '../HealthFooter-C5K9s38i.js';
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import { S as SharedSidebarConfig } from '../HealthFooter-BoOozbWG.js';
+export { C as CrossServiceNav, d as CrossServiceNavProps, D as DashboardLayout, a as DashboardLayoutEnterprise, b as DashboardLayoutProps, c as DashboardLayoutUser, H as HealthFooter, e as HealthFooterEnterprise, f as HealthFooterProps, g as HealthFooterUser, M as MenuItem, h as MenuSection, i as SharedSidebarProps, j as getInitials, k as isAdminRole, l as isMenuItemActive, u as useSidebarResize } from '../HealthFooter-BoOozbWG.js';
+import * as React$1 from 'react';
 import { ReactNode } from 'react';
 import '../crossNav-Bz0RXU_F.js';
 import '../orgHierarchy-Buky69YP.js';
@@ -8,7 +8,7 @@ import '../orgHierarchy-Buky69YP.js';
 interface DashboardLayoutSkeletonProps {
     className?: string;
 }
-declare function DashboardLayoutSkeleton({ className }: DashboardLayoutSkeletonProps): react_jsx_runtime.JSX.Element;
+declare function DashboardLayoutSkeleton({ className, }: DashboardLayoutSkeletonProps): React$1.JSX.Element;
 
 interface SharedPageHeaderProps {
     /** Page title */
@@ -32,7 +32,7 @@ interface SharedPageHeaderProps {
     /** Children rendered below the header row */
     children?: ReactNode;
 }
-declare function SharedPageHeader({ title, subtitle, icon, onBack, actions, breadcrumbs, showBorder, compact, className, children, }: SharedPageHeaderProps): react_jsx_runtime.JSX.Element;
+declare function SharedPageHeader({ title, subtitle, icon, onBack, actions, breadcrumbs, showBorder, compact, className, children, }: SharedPageHeaderProps): React$1.JSX.Element;
 
 interface EnterpriseDebugLabelProps {
     /**
@@ -48,7 +48,7 @@ interface EnterpriseDebugLabelProps {
     cookieEnterpriseName?: string | null;
     className?: string;
 }
-declare function EnterpriseDebugLabel({ selectionEnterpriseId, cookieEnterpriseName, className, }: EnterpriseDebugLabelProps): react_jsx_runtime.JSX.Element;
+declare function EnterpriseDebugLabel({ selectionEnterpriseId, cookieEnterpriseName, className, }: EnterpriseDebugLabelProps): React$1.JSX.Element;
 
 interface FooterService {
     name: string;
@@ -82,7 +82,7 @@ interface SharedFooterProps {
     /** Current year override (default: auto) */
     year?: number;
 }
-declare function SharedFooter({ services, showPricing, showSignIn, onServiceClick, onPricingClick, onSignInClick, children, className, useExternalUrls, year, }: SharedFooterProps): react_jsx_runtime.JSX.Element;
+declare function SharedFooter({ services, showPricing, showSignIn, onServiceClick, onPricingClick, onSignInClick, children, className, useExternalUrls, year, }: SharedFooterProps): React$1.JSX.Element;
 
 interface ServiceFooterProps {
     /** Enterprise ID for health monitor */
@@ -111,7 +111,7 @@ interface ServiceFooterProps {
     /** CSS class for the footer container */
     className?: string;
 }
-declare function ServiceFooter({ enterpriseId, enterpriseName, userRole, userEmail, environment, buildVersion, buildDate, commitHash, showHealthMonitor, className, }: ServiceFooterProps): react_jsx_runtime.JSX.Element;
+declare function ServiceFooter({ enterpriseId, enterpriseName, userRole, userEmail, environment, buildVersion, buildDate, commitHash, showHealthMonitor, className, }: ServiceFooterProps): React$1.JSX.Element;
 
 /**
  * createServiceLayout — Factory function that generates a complete DashboardLayout

package/dist/layout/index.js

@@ -19,15 +19,15 @@ import {
   policyDeploymentConfig,
   sqdcpConfig,
   useSidebarResize
-} from "../chunk-KXUNOSMZ.js";
+} from "../chunk-NLQ45OYS.js";
 import "../chunk-4QJMLQSH.js";
-import "../chunk-WTR6SNOE.js";
-import "../chunk-IEBZGU6X.js";
-import "../chunk-3G43UG63.js";
+import "../chunk-VJEXXX2P.js";
+import "../chunk-DMUQ5WNO.js";
+import "../chunk-A6UTXAPS.js";
 import "../chunk-HLMIR5UV.js";
-import "../chunk-PLCWXXUE.js";
+import "../chunk-K6FHU4HN.js";
 import "../chunk-JT3XLKKD.js";
-import "../chunk-R4NOLCSI.js";
+import "../chunk-BKGUIIN2.js";
 export {
   CrossServiceNav,
   DashboardLayout,