ltcai 2.2.2 → 3.0.1

package/static/v3/js/views/admin-permissions.js

@@ -0,0 +1,178 @@
+/* ============================================================================
+ * View: Permissions — Administration · roles and capability mapping (RBAC).
+ * Renders the role → capability matrix and per-role summaries from the admin
+ * roles fixture. Capabilities map to product areas; "all" grants everything.
+ * Role editing is integration-ready (no backend logic here) — actions surface
+ * a clearly-labeled "pending backend" toast.
+ *
+ * View contract (shared by all views):
+ *   export async function render(ctx) -> single DOM node
+ *   ctx = { h, icon, api, store, c, route, params, navigate, toast }
+ * ========================================================================== */
+
+/* Capability columns, in product-area order. Each maps to a routable surface
+ * and a Tabler icon so the matrix reads at a glance. */
+const CAPS = [
+  { key: "chat", label: "Chat", icon: "message-2", route: "chat" },
+  { key: "search", label: "Search", icon: "arrows-join", route: "hybrid-search" },
+  { key: "files", label: "Files", icon: "folders", route: "files" },
+  { key: "pipeline", label: "Pipeline", icon: "git-branch", route: "pipeline" },
+  { key: "users", label: "Users", icon: "users", route: "admin/users" },
+  { key: "policies", label: "Policies", icon: "shield-lock", route: "admin/policies" },
+  { key: "audit", label: "Audit", icon: "history", route: "admin/audit" },
+  { key: "security", label: "Security", icon: "shield-check", route: "admin/security" },
+];
+
+const ROLE_META = {
+  owner: { icon: "crown", variant: "ok" },
+  admin: { icon: "shield-check", variant: "info" },
+  member: { icon: "user-check", variant: "" },
+  viewer: { icon: "eye", variant: "warn" },
+};
+const metaFor = (role) => ROLE_META[String(role).toLowerCase()] || { icon: "user", variant: "" };
+
+/** A role grants a capability when it holds "all" or that specific cap. */
+const grants = (caps, key) => Array.isArray(caps) && (caps.includes("all") || caps.includes(key));
+const capLabel = (key) => (CAPS.find((cc) => cc.key === key)?.label) || key;
+
+export async function render(ctx) {
+  const { h, icon, c, navigate, toast } = ctx;
+
+  // Live RBAC roles from /admin/roles; clearly-badged sample data on fallback.
+  const res = await ctx.api.adminRoles();
+  const roles = Array.isArray(res.data && res.data.roles) ? res.data.roles
+    : (Array.isArray(res.data) ? res.data : []);
+  const source = res.source;
+  const totalMembers = roles.reduce((sum, r) => sum + (r.members || 0), 0);
+
+  const root = h("div.lt3-stack-6",
+    c.viewHeader({
+      eyebrow: "Administration",
+      title: "Permissions",
+      sub: "Roles and capability mapping.",
+      actions: [
+        c.sourceBadge(source),
+        h("button.lt3-btn.lt3-btn--ghost", { on: { click: () => navigate("admin/users") } }, icon("users"), "Members"),
+        h("button.lt3-btn.lt3-btn--primary", { on: { click: () => pendingToast(toast, "Creating a role") } }, icon("plus"), "New role"),
+      ],
+    }),
+
+    c.banner(
+      "Access is role-based (RBAC): every member holds exactly one role, and each role grants a set of capabilities that map to product areas. The owner role grants all capabilities.",
+      "info",
+      "shield-lock",
+    ),
+
+    h("div.lt3-statrow",
+      c.stat({ label: "Roles", value: roles.length, icon: "id-badge-2" }),
+      c.stat({ label: "Members", value: c.fmtNum(totalMembers), icon: "users" }),
+      c.stat({ label: "Capabilities", value: CAPS.length, icon: "key" }),
+      c.stat({ label: "Full-access roles", value: roles.filter((r) => (r.caps || []).includes("all")).length, icon: "crown" }),
+    ),
+
+    c.panel({
+      eyebrow: "RBAC",
+      title: "Capability matrix",
+      sub: "Which product areas each role can reach. Scroll horizontally to see every capability.",
+      children: buildMatrix(ctx, roles),
+    }),
+
+    h("section",
+      c.sectionHead("Roles", c.sourceBadge(source)),
+      buildRoleGrid(ctx, roles),
+    ),
+  );
+
+  return root;
+}
+
+/* ── Capability matrix ──────────────────────────────────────────────────── */
+function buildMatrix(ctx, roles) {
+  const { h, icon, c } = ctx;
+
+  if (!roles.length) {
+    return c.emptyState({ icon: "lock-off", title: "No roles defined", body: "Define a role to start mapping capabilities." });
+  }
+
+  const columns = [
+    {
+      key: "role",
+      label: "Role",
+      width: "180px",
+      render: (r) => {
+        const m = metaFor(r.role);
+        return h("div.lt3-row-2", { style: { "align-items": "center" } },
+          h("span.lt3-result__rank", { style: { color: "var(--accent)" } }, icon(m.icon)),
+          h("div.lt3-stack",
+            h("b", { style: { "font-size": "var(--lt3-text-sm)", "text-transform": "capitalize" } }, r.role),
+            c.pill(`${c.fmtNum(r.members || 0)} ${(r.members === 1) ? "member" : "members"}`, m.variant || "", { dot: true }),
+          ),
+        );
+      },
+    },
+    ...CAPS.map((cap) => ({
+      key: cap.key,
+      label: cap.label,
+      render: (r) => cell(ctx, grants(r.caps, cap.key)),
+    })),
+  ];
+
+  return c.table(columns, roles);
+}
+
+/** A matrix cell: accent check when granted, muted dash when not. */
+function cell({ h, icon }, granted) {
+  return h("div", { style: { display: "grid", "place-items": "center" }, "aria-label": granted ? "granted" : "not granted" },
+    granted
+      ? h("span", { style: { color: "var(--accent)", "font-size": "var(--lt3-text-lg)", "line-height": "1" } }, icon("check"))
+      : h("span.lt3-faint", { style: { "font-size": "var(--lt3-text-lg)", "line-height": "1" }, "aria-hidden": "true" }, "–"),
+  );
+}
+
+/* ── Per-role summary cards ─────────────────────────────────────────────── */
+function buildRoleGrid(ctx, roles) {
+  const { h } = ctx;
+  if (!roles.length) {
+    return ctx.c.emptyState({ icon: "lock-off", title: "No roles defined", body: "Define a role to map capabilities." });
+  }
+  return h("div.lt3-grid-auto", roles.map((r) => roleCard(ctx, r)));
+}
+
+function roleCard(ctx, r) {
+  const { h, icon, c, toast } = ctx;
+  const m = metaFor(r.role);
+  const isAll = (r.caps || []).includes("all");
+  const grantedKeys = isAll ? CAPS.map((cc) => cc.key) : CAPS.filter((cc) => (r.caps || []).includes(cc.key)).map((cc) => cc.key);
+
+  return c.card(
+    h("div.lt3-stack-3",
+      h("div.lt3-row", { style: { "justify-content": "space-between", "align-items": "flex-start" } },
+        h("div.lt3-row-2", { style: { "align-items": "center" } },
+          h("span.lt3-quick__icon", icon(m.icon)),
+          h("div.lt3-stack",
+            h("b", { style: { "font-size": "var(--lt3-text-md)", "text-transform": "capitalize" } }, r.role),
+            h("div.lt3-faint", { style: { "font-size": "var(--lt3-text-2xs)" } }, `${c.fmtNum(r.members || 0)} ${(r.members === 1) ? "member" : "members"}`),
+          ),
+        ),
+        c.pill(isAll ? "Full access" : `${grantedKeys.length}/${CAPS.length}`, m.variant || "info"),
+      ),
+
+      h("div.lt3-cluster", { "aria-label": `${r.role} capabilities` },
+        isAll
+          ? h("span.lt3-chip", { dataset: { active: "true" } }, icon("infinity"), "All capabilities")
+          : (grantedKeys.length
+              ? grantedKeys.map((k) => h("span.lt3-chip", { dataset: { active: "true" } }, icon(CAPS.find((cc) => cc.key === k).icon), capLabel(k)))
+              : h("span.lt3-faint", { style: { "font-size": "var(--lt3-text-xs)" } }, "No capabilities")),
+      ),
+
+      h("button.lt3-btn.lt3-btn--subtle.lt3-btn--sm", { style: { "align-self": "flex-start" }, on: { click: () => pendingToast(toast, `Editing the ${r.role} role`) } },
+        icon("edit"), "Edit role"),
+    ),
+    { attrs: { "data-role": r.role } },
+  );
+}
+
+/* ── Pending-backend affordance ─────────────────────────────────────────── */
+function pendingToast(toast, what) {
+  toast(`${what} is not available in this build — roles are a fixed RBAC model (owner · admin · member · viewer).`, "warn");
+}

package/static/v3/js/views/admin-policies.js

@@ -0,0 +1,103 @@
+/* ============================================================================
+ * View: Policies — administration · governance and enforcement.
+ * Surfaces the local-first guardrails the workspace enforces and the open-core
+ * seam where Enterprise governance packs extend them. Policy state reflects the
+ * documented future contract (fx.ADMIN.policies); toggles are integration-ready
+ * and clearly defer their enforcement to the backend.
+ * ========================================================================== */
+
+// Governance capabilities that live behind the open-core Enterprise seam. These
+// are extension points, not implemented backend logic — labeled as sample data.
+const PACKS = [
+  { id: "siem", icon: "broadcast", title: "SIEM export", desc: "Stream the audit trail to an external SIEM (Splunk, Elastic, Sentinel)." },
+  { id: "retention", icon: "archive", title: "Compliance retention", desc: "Configurable retention windows and legal-hold for messages and traces." },
+  { id: "isolation", icon: "wall", title: "Tenant isolation", desc: "Hard multi-tenant boundaries with per-tenant keys and storage." },
+];
+
+export async function render(ctx) {
+  const { h, icon, c, toast } = ctx;
+
+  // Live governance posture from /admin/policies; sample data on fallback.
+  const res = await ctx.api.adminPolicies();
+  const policies = Array.isArray(res.data && res.data.policies) ? res.data.policies
+    : (Array.isArray(res.data) ? res.data : []);
+  const source = res.source;
+
+  const root = h("div.lt3-stack-6",
+    c.viewHeader({
+      eyebrow: "Administration",
+      title: "Policies",
+      sub: "Governance and enforcement.",
+      actions: [c.sourceBadge(source)],
+    }),
+
+    c.banner(
+      "Policies enforce Lattice's local-first guardrails. Enterprise packs extend them with org-wide governance.",
+      "info",
+      "shield-lock",
+    ),
+
+    h("section.lt3-stack-3",
+      c.sectionHead(
+        "Active guardrails",
+        c.sourceBadge(source),
+      ),
+      policies.length
+        ? h("div.lt3-stack-3", policies.map((p) => policyRow(ctx, p)))
+        : c.emptyState({ icon: "shield-off", title: "No policies defined", body: "Policies appear once the governance backend is connected." }),
+    ),
+
+    packsPanel(ctx),
+  );
+
+  return root;
+}
+
+/* ── One policy row: description and its real, runtime-enforced state ─────── */
+// Policies are enforced by the runtime (approval gating, local-only egress,
+// local storage). They are reported read-only — not user-toggleable — so the UI
+// never implies a guardrail can be relaxed from the browser.
+function policyRow({ h, icon, c }, p) {
+  return c.card(
+    h("div.lt3-row", { style: { "justify-content": "space-between", "align-items": "flex-start", "gap": "var(--lt3-space-4)", "flex-wrap": "wrap" } },
+      h("div.lt3-stack-2", { style: { "min-width": "0", "flex": "1 1 320px" } },
+        h("div.lt3-row-2",
+          h("span.lt3-card__icon", { style: { color: "var(--accent)" } }, icon("shield-check")),
+          h("h3", { style: { "font-size": "var(--lt3-text-base)", "font-weight": "var(--lt3-weight-semibold)", "margin": "0" } }, p.label),
+        ),
+        h("p.lt3-muted", { style: { "font-size": "var(--lt3-text-sm)", "margin": "0" } }, p.value),
+      ),
+      h("div.lt3-row-2", { style: { "flex": "none", "align-items": "center" } },
+        c.statePill(p.enforced ? "active" : "idle"),
+        h("span.lt3-faint", { style: { "font-size": "var(--lt3-text-2xs)" } }, p.enforced ? "Enforced" : "Not enforced"),
+      ),
+    ),
+  );
+}
+
+/* ── Enterprise governance packs (open-core extension points) ────────────── */
+function packsPanel({ h, icon, c }) {
+  return c.panel({
+    eyebrow: "Open core",
+    title: "Policy packs",
+    sub: "Governance capabilities available as Enterprise extension points on top of the local-first core.",
+    actions: c.sourceBadge("placeholder"),
+    children: h("div.lt3-stack-2",
+      PACKS.map((pk) => h("div.lt3-card.lt3-card--flat",
+        h("div.lt3-row", { style: { "justify-content": "space-between", "align-items": "center", "gap": "var(--lt3-space-4)", "flex-wrap": "wrap" } },
+          h("div.lt3-row-2", { style: { "min-width": "0", "flex": "1 1 320px" } },
+            h("span.lt3-card__icon", { style: { color: "var(--muted)" } }, icon(pk.icon)),
+            h("div.lt3-stack-2", { style: { "min-width": "0" } },
+              h("div", { style: { "font-weight": "var(--lt3-weight-medium)" } }, pk.title),
+              h("div.lt3-faint", { style: { "font-size": "var(--lt3-text-xs)" } }, pk.desc),
+            ),
+          ),
+          h("div.lt3-row-2", { style: { "flex": "none" } },
+            c.pill("Enterprise", "info"),
+            h("span.lt3-faint", { style: { "font-size": "var(--lt3-text-2xs)" } }, "Available as an extension point"),
+          ),
+        ),
+      )),
+    ),
+  });
+}

package/static/v3/js/views/admin-private-vpc.js

@@ -0,0 +1,138 @@
+/* ============================================================================
+ * View: Admin · Private VPC — network isolation and peering.
+ * Lattice is local-first: by default everything runs on-prem with no external
+ * network egress. Private VPC is an Enterprise networking extension for teams
+ * that need cloud peering. Reads /vpc/status (fallback-safe, badged) and never
+ * invents backend mutations — the peering control explains the write side is
+ * pending so the surface stays integration-ready.
+ * ========================================================================== */
+
+import * as fx from "../core/fixtures.js";
+
+const PENDING = "an Enterprise networking feature, not available in this build.";
+
+export async function render(ctx) {
+  const { h, icon, api, c, toast } = ctx;
+
+  const statusHost = h("div", c.loading({ lines: 4 }));
+  const subnetsHost = h("div", c.loading({ lines: 3 }));
+  const srcSlot = h("span", c.sourceBadge("pending"));
+
+  const root = h("div.lt3-stack-6",
+    c.viewHeader({
+      eyebrow: "Administration",
+      title: "Private VPC",
+      sub: "Network isolation and peering.",
+      actions: [
+        h("button.lt3-btn.lt3-btn--primary",
+          { on: { click: () => toast("Configure peering — " + PENDING, "info") } },
+          icon("network"), "Configure peering"),
+      ],
+    }),
+
+    c.banner(
+      "Lattice is local-first. By default everything runs on this machine with no external network egress — Private VPC is an Enterprise networking extension for teams that need cloud peering.",
+      "info", "shield-lock"),
+
+    c.panel({
+      eyebrow: "Network",
+      head: h("div.lt3-row", { style: { "justify-content": "space-between", width: "100%" } },
+        h("div",
+          h("div.lt3-eyebrow", "Network"),
+          h("h3.lt3-panel__title", "Connectivity status"),
+        ),
+        srcSlot,
+      ),
+      children: statusHost,
+    }),
+
+    c.panel({
+      eyebrow: "Topology",
+      title: "Private subnets",
+      sub: "Peered subnets exposed to this workspace.",
+      children: subnetsHost,
+    }),
+
+    buildPosture(ctx),
+  );
+
+  hydrate(ctx, { statusHost, subnetsHost, srcSlot });
+  return root;
+}
+
+/* ── Network posture summary (always-true, local-first facts) ─────────────── */
+function buildPosture({ h, icon, c }) {
+  const items = [
+    { icon: "plug-connected-x", label: "Egress", value: "None", variant: "ok", note: "No external network calls" },
+    { icon: "cpu", label: "Inference", value: "Local", variant: "ok", note: "On-device MLX runtime" },
+    { icon: "folder-lock", label: "Storage", value: "~/.ltcai", variant: "info", note: "Single-tenant on disk" },
+  ];
+  return h("section",
+    c.sectionHead("Network posture"),
+    h("div.lt3-grid-3",
+      items.map((it) => c.card(
+        h("div.lt3-stack-2",
+          h("div.lt3-row", { style: { "justify-content": "space-between", "align-items": "flex-start" } },
+            h("div.lt3-stat__label", icon(it.icon), it.label),
+            c.pill(it.value, it.variant, { dot: true }),
+          ),
+          h("div.lt3-faint", { style: { "font-size": "var(--lt3-text-2xs)" } }, it.note),
+        ),
+        { flat: true },
+      )),
+    ),
+  );
+}
+
+/* ── Hydration ────────────────────────────────────────────────────────────── */
+async function hydrate(ctx, hosts) {
+  const { h, icon, api, c } = ctx;
+  const { statusHost, subnetsHost, srcSlot } = hosts;
+
+  const res = await api.vpcStatus();
+  const vpc = (res.data && typeof res.data === "object") ? res.data : fx.ADMIN.vpc;
+  srcSlot.replaceChildren(c.sourceBadge(res.source));
+
+  const subnets = Array.isArray(vpc.private_subnets) ? vpc.private_subnets : [];
+
+  // Status key/value block.
+  const rows = [
+    { icon: "cloud", k: "Provider", v: vpc.provider || "local", mono: true },
+    { icon: "map-pin", k: "Region", v: vpc.region || "on-prem", mono: true },
+    { icon: "lock", k: "VPN status", node: c.statePill(vpc.vpn_status || "standby") },
+    { icon: "arrows-transfer-up", k: "Peering status", node: c.statePill(vpc.peering_status || "not_configured") },
+    { icon: "plug-connected-x", k: "Egress", node: c.pill("local-only", "ok", { dot: true }) },
+    { icon: "subtask", k: "Subnets", v: String(subnets.length) },
+  ];
+  statusHost.replaceChildren(
+    h("dl.lt3-keyval",
+      rows.flatMap((r) => [
+        h("dt", h("span.lt3-row-2", icon(r.icon), r.k)),
+        h("dd", r.node ? r.node : (r.mono ? h("span.lt3-mono", String(r.v)) : String(r.v))),
+      ]),
+    ),
+    !vpc.enabled && h("div.lt3-row-2", { style: { "margin-top": "var(--lt3-space-4)" } },
+      c.pill("Enterprise extension", "info", { dot: true }),
+      h("span.lt3-faint", { style: { "font-size": "var(--lt3-text-2xs)" } },
+        "Private VPC is inactive — Lattice is running fully local."),
+    ),
+  );
+
+  // Private subnets table / empty state.
+  if (!subnets.length) {
+    subnetsHost.replaceChildren(c.emptyState({
+      icon: "network-off",
+      title: "No private subnets",
+      body: "Peering is not configured. Lattice runs fully local by default.",
+    }));
+    return;
+  }
+
+  const columns = [
+    { key: "name", label: "Subnet", render: (s) => h("span.lt3-row-2", icon("subtask"), String(s.name || s.id || "subnet")) },
+    { key: "cidr", label: "CIDR", render: (s) => h("span.lt3-mono", String(s.cidr || s.range || "—")) },
+    { key: "zone", label: "Zone", render: (s) => String(s.zone || s.az || "—") },
+    { key: "state", label: "State", width: "120px", render: (s) => c.statePill(s.state || "active") },
+  ];
+  subnetsHost.replaceChildren(c.table(columns, subnets));
+}

package/static/v3/js/views/admin-security.js

@@ -0,0 +1,181 @@
+/* ============================================================================
+ * View: Admin · Security — sensitive-data signals and DLP.
+ * Surfaces the workspace's data-loss-prevention posture: how many messages
+ * tripped a sensitive-data signal, how severe, and which field patterns matched.
+ * Calm and local-first by design — every scan runs on this machine, so the
+ * reassurance ("nothing leaves the computer") is the headline, not a footnote.
+ * Reads fx.ADMIN.security (mirrors the documented /admin/security shape) and
+ * badges it as sample data until that endpoint is live.
+ * ========================================================================== */
+
+const SEVERITY = [
+  { key: "high", label: "High", variant: "warn", icon: "alert-triangle", desc: "Strong sensitive-data match" },
+  { key: "medium", label: "Medium", variant: "", icon: "alert-circle", desc: "Likely sensitive pattern" },
+  { key: "low", label: "Low", variant: "ok", icon: "info-circle", desc: "Low-confidence signal" },
+];
+
+export async function render(ctx) {
+  const { h, icon, c, navigate } = ctx;
+
+  // Live DLP overview from /admin/security/overview; clearly-badged sample data
+  // when the endpoint is unavailable (e.g. the viewer is not an admin).
+  const res = await ctx.api.adminSecurity();
+  const sec = normalizeSecurity(res.data);
+  const source = res.source;
+
+  const risky = num(sec.risky_messages);
+  const compliant = num(sec.compliant_messages);
+  const total = risky + compliant;
+  const sev = sec.severity_counts || { high: 0, medium: 0, low: 0 };
+  const sevMax = Math.max(1, sev.high || 0, sev.medium || 0, sev.low || 0);
+  const dlp = Array.isArray(sec.dlp_fields) ? sec.dlp_fields : [];
+  const dlpMax = Math.max(1, ...dlp.map((f) => num(f.hits)));
+
+  const root = h("div.lt3-stack-6",
+    c.viewHeader({
+      eyebrow: "Administration",
+      title: "Security",
+      sub: "Sensitive-data signals and DLP",
+      actions: [
+        c.sourceBadge(source),
+        h("button.lt3-btn.lt3-btn--ghost", {
+          on: { click: () => ctx.toast("DLP rule editing is not available in this build; rules are enforced by the runtime defaults.", "warn") },
+        }, icon("adjustments"), "Tune rules"),
+        h("button.lt3-btn.lt3-btn--primary", {
+          on: { click: () => navigate("admin/audit") },
+        }, icon("history"), "View audit log"),
+      ],
+    }),
+
+    c.banner("DLP scanning runs entirely on this machine. Messages are inspected locally before they ever reach a model — no content leaves your computer.", "info", "shield-lock"),
+
+    // ── Headline stats ──────────────────────────────────────────────────────
+    h("section",
+      c.sectionHead("Last scan window", c.sourceBadge(source)),
+      h("div.lt3-statrow",
+        c.stat({ label: "Risk rate", value: pct(sec.risk_rate), icon: "gauge", delta: `${c.fmtNum(risky)} of ${c.fmtNum(total)}` }),
+        c.stat({ label: "Risky messages", value: c.fmtNum(risky), icon: "alert-triangle" }),
+        c.stat({ label: "Compliant messages", value: c.fmtNum(compliant), icon: "circle-check" }),
+        c.stat({ label: "High severity", value: c.fmtNum(sev.high || 0), icon: "shield-exclamation", delta: (sev.high || 0) === 0 ? "All clear" : "Needs review", deltaDir: (sev.high || 0) === 0 ? "up" : "down" }),
+      ),
+    ),
+
+    h("div.lt3-grid-2",
+      buildSeverityPanel(ctx, sev, sevMax, source),
+      buildDlpPanel(ctx, dlp, dlpMax, total, source),
+    ),
+  );
+
+  return root;
+}
+
+/* ── Severity breakdown ──────────────────────────────────────────────────── */
+function buildSeverityPanel(ctx, sev, sevMax, source) {
+  const { h, icon, c } = ctx;
+  const totalSignals = (sev.high || 0) + (sev.medium || 0) + (sev.low || 0);
+
+  const rows = SEVERITY.map((s) => {
+    const count = num(sev[s.key]);
+    return h("div.lt3-stack-2",
+      h("div.lt3-row", { style: { "justify-content": "space-between", "align-items": "center" } },
+        h("div.lt3-row-2",
+          h("span.lt3-stat__label", { style: { margin: "0" } }, icon(s.icon), s.label),
+          h("span.lt3-faint", { style: { "font-size": "var(--lt3-text-2xs)" } }, s.desc),
+        ),
+        h("span.lt3-mono", { style: { "font-size": "var(--lt3-text-sm)", "font-weight": "var(--lt3-weight-semi)" } }, c.fmtNum(count)),
+      ),
+      c.meter(count / sevMax, s.variant),
+    );
+  });
+
+  return c.panel({
+    eyebrow: "Signals",
+    title: "Severity breakdown",
+    sub: totalSignals === 0
+      ? "No sensitive-data signals in this window — the workspace is clean."
+      : `${c.fmtNum(totalSignals)} ${totalSignals === 1 ? "signal" : "signals"} flagged, normalized to the busiest tier.`,
+    children: h("div.lt3-stack-4", rows),
+  });
+}
+
+/* ── DLP field hits ──────────────────────────────────────────────────────── */
+function buildDlpPanel(ctx, dlp, dlpMax, total, source) {
+  const { h, c } = ctx;
+
+  const columns = [
+    {
+      key: "field",
+      label: "Field",
+      render: (row) => h("span.lt3-mono", { style: { "font-size": "var(--lt3-text-sm)" } }, String(row.field || "—")),
+    },
+    {
+      key: "hits",
+      label: "Hits",
+      width: "72px",
+      render: (row) => h("span.lt3-weight-semi", c.fmtNum(num(row.hits))),
+    },
+    {
+      key: "share",
+      label: "Relative",
+      render: (row) => h("div", { style: { "min-width": "120px" } }, c.meter(num(row.hits) / dlpMax, "vector")),
+    },
+  ];
+
+  const totalHits = dlp.reduce((sum, f) => sum + num(f.hits), 0);
+
+  return c.panel({
+    eyebrow: "Patterns",
+    title: "DLP field hits",
+    sub: "Sensitive field patterns matched during local inspection.",
+    actions: c.sourceBadge(source),
+    children: h("div.lt3-stack-3",
+      dlp.length
+        ? c.table(columns, dlp)
+        : c.emptyState({ icon: "shield-check", title: "No field hits", body: "No sensitive field patterns matched in this window." }),
+      dlp.length
+        ? h("div.lt3-row-2", { style: { "justify-content": "space-between" } },
+            h("span.lt3-faint", { style: { "font-size": "var(--lt3-text-2xs)" } }, `${c.fmtNum(totalHits)} total ${totalHits === 1 ? "hit" : "hits"} across ${c.fmtNum(dlp.length)} ${dlp.length === 1 ? "pattern" : "patterns"}`),
+            c.sourceBadge(source),
+          )
+        : null,
+    ),
+  });
+}
+
+/* ── helpers ─────────────────────────────────────────────────────────────── */
+// Normalize the live /admin/security/overview payload and the fixture into one
+// shape: { risk_rate, risky_messages, compliant_messages, severity_counts, dlp_fields }.
+function normalizeSecurity(data) {
+  const d = data || {};
+  const cards = d.cards || {};
+  const risky = num(d.risky_messages != null ? d.risky_messages : cards.risky_chats);
+  const riskRate = num(d.risk_rate);
+  let compliant = num(d.compliant_messages);
+  if (d.compliant_messages == null && riskRate > 0) {
+    const total = Math.round(risky / (riskRate / 100));
+    compliant = Math.max(0, total - risky);
+  }
+  let dlp = Array.isArray(d.dlp_fields) ? d.dlp_fields : null;
+  if (!dlp && d.field_counts && typeof d.field_counts === "object") {
+    dlp = Object.entries(d.field_counts).map(([field, hits]) => ({ field, hits: num(hits) }));
+  }
+  return {
+    risk_rate: riskRate,
+    risky_messages: risky,
+    compliant_messages: compliant,
+    severity_counts: d.severity_counts || { high: 0, medium: 0, low: 0 },
+    dlp_fields: dlp || [],
+  };
+}
+
+function num(v) {
+  const n = Number(v);
+  return Number.isFinite(n) ? n : 0;
+}
+
+function pct(v) {
+  const n = Number(v);
+  if (!Number.isFinite(n)) return "—";
+  // Trim a trailing .0 so "1.2%" stays clean and "0%" doesn't read "0.0%".
+  return `${(Math.round(n * 10) / 10).toString().replace(/\.0$/, "")}%`;
+}