@burdenoff/microfe-vibecontrols 2026.521.3 → 2026.522.2

package/dist/components/security/SecurityFindingsTable.js

@@ -0,0 +1,201 @@
+import { CREATE_SECURITY_EXCEPTION_MUTATION as e, SECURITY_FINDINGS_QUERY as t, UPDATE_FINDING_STATUS_MUTATION as n } from "./gql.js";
+import { useState as r } from "react";
+import { X as i } from "lucide-react";
+import { useMutation as a, useQuery as o } from "@apollo/client/react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/security/SecurityFindingsTable.tsx
+var l = {
+	CRITICAL: "bg-status-error-bg-subtle text-status-error-text",
+	HIGH: "bg-status-warning-bg-subtle text-status-warning-text",
+	MEDIUM: "bg-status-warning-bg-subtle text-status-warning-text opacity-80",
+	LOW: "bg-bg-sunken text-text-secondary",
+	INFO: "bg-bg-sunken text-text-tertiary"
+};
+function u({ vibeId: u }) {
+	let { data: f, loading: p, refetch: m } = o(t, { variables: {
+		filter: { vibeId: u },
+		pagination: { limit: 100 }
+	} }), [h] = a(n), [g] = a(e), [_, v] = r(null), y = f?.securityFindings.items ?? [];
+	return /* @__PURE__ */ c("div", {
+		"data-testid": "security-findings-table",
+		className: "space-y-2",
+		children: [
+			/* @__PURE__ */ c("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ s("h4", {
+					className: "text-sm font-semibold text-text-primary",
+					children: "Findings"
+				}), /* @__PURE__ */ s("span", {
+					className: "text-xs text-text-secondary",
+					children: p ? "Loading…" : `${f?.securityFindings.total ?? 0} total`
+				})]
+			}),
+			/* @__PURE__ */ s("div", {
+				className: "overflow-hidden rounded-md border border-border-default",
+				children: /* @__PURE__ */ c("table", {
+					className: "w-full text-sm",
+					children: [/* @__PURE__ */ s("thead", {
+						className: "bg-bg-sunken text-text-secondary",
+						children: /* @__PURE__ */ c("tr", { children: [
+							/* @__PURE__ */ s("th", {
+								className: "px-3 py-2 text-left text-xs",
+								children: "Severity"
+							}),
+							/* @__PURE__ */ s("th", {
+								className: "px-3 py-2 text-left text-xs",
+								children: "Title"
+							}),
+							/* @__PURE__ */ s("th", {
+								className: "px-3 py-2 text-left text-xs",
+								children: "File / Package"
+							}),
+							/* @__PURE__ */ s("th", {
+								className: "px-3 py-2 text-left text-xs",
+								children: "Status"
+							})
+						] })
+					}), /* @__PURE__ */ c("tbody", { children: [y.length === 0 && /* @__PURE__ */ s("tr", { children: /* @__PURE__ */ s("td", {
+						colSpan: 4,
+						className: "px-3 py-6 text-center text-text-secondary text-xs",
+						children: "No findings yet. Run a scan to populate this table."
+					}) }), y.map((e) => /* @__PURE__ */ c("tr", {
+						"data-finding-id": e.id,
+						"data-severity": e.severity.toLowerCase(),
+						"data-status": e.status.toLowerCase(),
+						className: "border-t border-border-subtle hover:bg-bg-sunken cursor-pointer",
+						onClick: () => v(e),
+						children: [
+							/* @__PURE__ */ s("td", {
+								className: "px-3 py-2",
+								children: /* @__PURE__ */ s("span", {
+									className: `px-2 py-0.5 rounded text-xs font-semibold ${l[e.severity]}`,
+									children: e.severity
+								})
+							}),
+							/* @__PURE__ */ s("td", {
+								className: "px-3 py-2 text-text-primary truncate max-w-[24rem]",
+								children: e.title
+							}),
+							/* @__PURE__ */ s("td", {
+								className: "px-3 py-2 text-text-secondary text-xs",
+								children: e.packageName ? /* @__PURE__ */ c("span", { children: [
+									e.packageName,
+									"@",
+									e.packageVersion ?? "?"
+								] }) : /* @__PURE__ */ c("span", { children: [e.file, e.line ? `:${e.line}` : ""] })
+							}),
+							/* @__PURE__ */ s("td", {
+								className: "px-3 py-2 text-text-secondary text-xs",
+								children: e.status
+							})
+						]
+					}, e.id))] })]
+				})
+			}),
+			_ && /* @__PURE__ */ c("aside", {
+				"data-testid": "security-finding-drawer",
+				className: "fixed right-0 top-0 bottom-0 w-[28rem] bg-bg-elevated border-l border-border-default shadow-lg z-50 overflow-y-auto",
+				children: [/* @__PURE__ */ c("div", {
+					className: "flex items-center justify-between px-4 py-3 border-b border-border-subtle",
+					children: [/* @__PURE__ */ s("h3", {
+						className: "text-sm font-semibold text-text-primary",
+						children: _.title
+					}), /* @__PURE__ */ s("button", {
+						type: "button",
+						"aria-label": "Close drawer",
+						onClick: () => v(null),
+						className: "text-text-secondary hover:text-text-primary",
+						children: /* @__PURE__ */ s(i, { className: "h-4 w-4" })
+					})]
+				}), /* @__PURE__ */ c("div", {
+					className: "p-4 space-y-3 text-sm",
+					children: [
+						/* @__PURE__ */ s(d, {
+							label: "Rule",
+							value: _.ruleId
+						}),
+						/* @__PURE__ */ s(d, {
+							label: "Severity",
+							value: _.severity
+						}),
+						/* @__PURE__ */ s(d, {
+							label: "Category",
+							value: _.category
+						}),
+						/* @__PURE__ */ s(d, {
+							label: "Status",
+							value: _.status
+						}),
+						_.file && /* @__PURE__ */ s(d, {
+							label: "File",
+							value: `${_.file}:${_.line ?? "?"}`
+						}),
+						_.packageName && /* @__PURE__ */ s(d, {
+							label: "Package",
+							value: `${_.packageName}@${_.packageVersion ?? "?"}`
+						}),
+						_.fixedVersion && /* @__PURE__ */ s(d, {
+							label: "Fixed in",
+							value: _.fixedVersion
+						}),
+						_.redactedSample && /* @__PURE__ */ s(d, {
+							label: "Redacted sample",
+							value: _.redactedSample
+						}),
+						_.remediation && /* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("div", {
+							className: "text-xs uppercase text-text-tertiary mb-1",
+							children: "Remediation"
+						}), /* @__PURE__ */ s("div", {
+							className: "text-sm text-text-primary",
+							children: _.remediation
+						})] }),
+						/* @__PURE__ */ c("div", {
+							className: "flex gap-2 pt-3 border-t border-border-subtle",
+							children: [/* @__PURE__ */ s("button", {
+								type: "button",
+								"data-testid": "security-finding-action-accept-risk",
+								onClick: async () => {
+									await g({ variables: { input: {
+										findingFingerprint: _.fingerprint,
+										vibeId: u,
+										reason: "Accepted via Security tab",
+										expiresAt: new Date(Date.now() + 720 * 60 * 60 * 1e3).toISOString()
+									} } }), v(null), await m();
+								},
+								className: "flex-1 px-3 py-2 rounded-md border border-border-default text-text-primary hover:bg-bg-sunken text-xs",
+								children: "Accept risk (30d)"
+							}), /* @__PURE__ */ s("button", {
+								type: "button",
+								"data-testid": "security-finding-action-mark-fp",
+								onClick: async () => {
+									await h({ variables: {
+										id: _.id,
+										status: "FALSE_POSITIVE"
+									} }), v(null), await m();
+								},
+								className: "flex-1 px-3 py-2 rounded-md border border-border-default text-text-primary hover:bg-bg-sunken text-xs",
+								children: "Mark false positive"
+							})]
+						})
+					]
+				})]
+			})
+		]
+	});
+}
+function d({ label: e, value: t }) {
+	return /* @__PURE__ */ c("div", {
+		className: "flex justify-between gap-2 border-b border-border-subtle pb-1",
+		children: [/* @__PURE__ */ s("span", {
+			className: "text-xs uppercase text-text-tertiary",
+			children: e
+		}), /* @__PURE__ */ s("span", {
+			className: "text-text-primary text-xs text-right truncate",
+			children: t
+		})]
+	});
+}
+//#endregion
+export { u as SecurityFindingsTable };
+
+//# sourceMappingURL=SecurityFindingsTable.js.map

package/dist/components/security/SecurityFindingsTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SecurityFindingsTable.js","names":[],"sources":["../../../src/components/security/SecurityFindingsTable.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { useMutation, useQuery } from '@apollo/client/react';\nimport { X } from 'lucide-react';\n\nimport {\n  CREATE_SECURITY_EXCEPTION_MUTATION,\n  SECURITY_FINDINGS_QUERY,\n  UPDATE_FINDING_STATUS_MUTATION,\n} from './gql';\nimport type { SecurityFindingRow, SecuritySeverity } from './types';\n\ninterface FindingsResp {\n  securityFindings: { items: SecurityFindingRow[]; total: number; hasMore: boolean };\n}\n\nconst SEVERITY_BADGE: Record<SecuritySeverity, string> = {\n  CRITICAL: 'bg-status-error-bg-subtle text-status-error-text',\n  HIGH: 'bg-status-warning-bg-subtle text-status-warning-text',\n  MEDIUM: 'bg-status-warning-bg-subtle text-status-warning-text opacity-80',\n  LOW: 'bg-bg-sunken text-text-secondary',\n  INFO: 'bg-bg-sunken text-text-tertiary',\n};\n\nexport function SecurityFindingsTable({ vibeId }: { vibeId: string }): React.ReactElement {\n  const { data, loading, refetch } = useQuery<FindingsResp>(SECURITY_FINDINGS_QUERY, {\n    variables: { filter: { vibeId }, pagination: { limit: 100 } },\n  });\n  const [updateStatus] = useMutation(UPDATE_FINDING_STATUS_MUTATION);\n  const [createException] = useMutation(CREATE_SECURITY_EXCEPTION_MUTATION);\n  const [selected, setSelected] = useState<SecurityFindingRow | null>(null);\n\n  const items = data?.securityFindings.items ?? [];\n\n  return (\n    <div data-testid=\"security-findings-table\" className=\"space-y-2\">\n      <div className=\"flex items-center justify-between\">\n        <h4 className=\"text-sm font-semibold text-text-primary\">Findings</h4>\n        <span className=\"text-xs text-text-secondary\">\n          {loading ? 'Loading…' : `${data?.securityFindings.total ?? 0} total`}\n        </span>\n      </div>\n\n      <div className=\"overflow-hidden rounded-md border border-border-default\">\n        <table className=\"w-full text-sm\">\n          <thead className=\"bg-bg-sunken text-text-secondary\">\n            <tr>\n              <th className=\"px-3 py-2 text-left text-xs\">Severity</th>\n              <th className=\"px-3 py-2 text-left text-xs\">Title</th>\n              <th className=\"px-3 py-2 text-left text-xs\">File / Package</th>\n              <th className=\"px-3 py-2 text-left text-xs\">Status</th>\n            </tr>\n          </thead>\n          <tbody>\n            {items.length === 0 && (\n              <tr>\n                <td colSpan={4} className=\"px-3 py-6 text-center text-text-secondary text-xs\">\n                  No findings yet. Run a scan to populate this table.\n                </td>\n              </tr>\n            )}\n            {items.map((f) => (\n              <tr\n                key={f.id}\n                data-finding-id={f.id}\n                data-severity={f.severity.toLowerCase()}\n                data-status={f.status.toLowerCase()}\n                className=\"border-t border-border-subtle hover:bg-bg-sunken cursor-pointer\"\n                onClick={() => setSelected(f)}\n              >\n                <td className=\"px-3 py-2\">\n                  <span\n                    className={`px-2 py-0.5 rounded text-xs font-semibold ${SEVERITY_BADGE[f.severity]}`}\n                  >\n                    {f.severity}\n                  </span>\n                </td>\n                <td className=\"px-3 py-2 text-text-primary truncate max-w-[24rem]\">{f.title}</td>\n                <td className=\"px-3 py-2 text-text-secondary text-xs\">\n                  {f.packageName ? (\n                    <span>\n                      {f.packageName}@{f.packageVersion ?? '?'}\n                    </span>\n                  ) : (\n                    <span>\n                      {f.file}\n                      {f.line ? `:${f.line}` : ''}\n                    </span>\n                  )}\n                </td>\n                <td className=\"px-3 py-2 text-text-secondary text-xs\">{f.status}</td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n\n      {selected && (\n        <aside\n          data-testid=\"security-finding-drawer\"\n          className=\"fixed right-0 top-0 bottom-0 w-[28rem] bg-bg-elevated border-l border-border-default shadow-lg z-50 overflow-y-auto\"\n        >\n          <div className=\"flex items-center justify-between px-4 py-3 border-b border-border-subtle\">\n            <h3 className=\"text-sm font-semibold text-text-primary\">{selected.title}</h3>\n            <button\n              type=\"button\"\n              aria-label=\"Close drawer\"\n              onClick={() => setSelected(null)}\n              className=\"text-text-secondary hover:text-text-primary\"\n            >\n              <X className=\"h-4 w-4\" />\n            </button>\n          </div>\n          <div className=\"p-4 space-y-3 text-sm\">\n            <Row label=\"Rule\" value={selected.ruleId} />\n            <Row label=\"Severity\" value={selected.severity} />\n            <Row label=\"Category\" value={selected.category} />\n            <Row label=\"Status\" value={selected.status} />\n            {selected.file && (\n              <Row label=\"File\" value={`${selected.file}:${selected.line ?? '?'}`} />\n            )}\n            {selected.packageName && (\n              <Row\n                label=\"Package\"\n                value={`${selected.packageName}@${selected.packageVersion ?? '?'}`}\n              />\n            )}\n            {selected.fixedVersion && <Row label=\"Fixed in\" value={selected.fixedVersion} />}\n            {selected.redactedSample && (\n              <Row label=\"Redacted sample\" value={selected.redactedSample} />\n            )}\n            {selected.remediation && (\n              <div>\n                <div className=\"text-xs uppercase text-text-tertiary mb-1\">Remediation</div>\n                <div className=\"text-sm text-text-primary\">{selected.remediation}</div>\n              </div>\n            )}\n\n            <div className=\"flex gap-2 pt-3 border-t border-border-subtle\">\n              <button\n                type=\"button\"\n                data-testid=\"security-finding-action-accept-risk\"\n                onClick={async () => {\n                  await createException({\n                    variables: {\n                      input: {\n                        findingFingerprint: selected.fingerprint,\n                        vibeId,\n                        reason: 'Accepted via Security tab',\n                        expiresAt: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString(),\n                      },\n                    },\n                  });\n                  setSelected(null);\n                  await refetch();\n                }}\n                className=\"flex-1 px-3 py-2 rounded-md border border-border-default text-text-primary hover:bg-bg-sunken text-xs\"\n              >\n                Accept risk (30d)\n              </button>\n              <button\n                type=\"button\"\n                data-testid=\"security-finding-action-mark-fp\"\n                onClick={async () => {\n                  await updateStatus({\n                    variables: { id: selected.id, status: 'FALSE_POSITIVE' },\n                  });\n                  setSelected(null);\n                  await refetch();\n                }}\n                className=\"flex-1 px-3 py-2 rounded-md border border-border-default text-text-primary hover:bg-bg-sunken text-xs\"\n              >\n                Mark false positive\n              </button>\n            </div>\n          </div>\n        </aside>\n      )}\n    </div>\n  );\n}\n\nfunction Row({ label, value }: { label: string; value: string }): React.ReactElement {\n  return (\n    <div className=\"flex justify-between gap-2 border-b border-border-subtle pb-1\">\n      <span className=\"text-xs uppercase text-text-tertiary\">{label}</span>\n      <span className=\"text-text-primary text-xs text-right truncate\">{value}</span>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/security/SecurityHeaderStrip.js

@@ -0,0 +1,67 @@
+import "react";
+import { Settings as e } from "lucide-react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/security/SecurityHeaderStrip.tsx
+function r({ policyLevel: r, totals: i, lastScanAt: a, onPolicyChange: o, onOpenSettings: s, canEditPolicy: c }) {
+	return /* @__PURE__ */ n("div", {
+		"data-testid": "security-header",
+		className: "flex flex-wrap items-center justify-between gap-3 p-3 rounded-md border border-border-default bg-bg-surface",
+		children: [/* @__PURE__ */ n("div", {
+			className: "flex items-center gap-3",
+			children: [/* @__PURE__ */ n("span", {
+				className: `px-3 py-1 rounded-full text-xs font-semibold ${i.critical > 0 ? "bg-status-error-bg-subtle text-status-error-text" : i.high > 0 ? "bg-status-warning-bg-subtle text-status-warning-text" : "bg-status-success-bg-subtle text-status-success-text"}`,
+				children: [
+					i.critical > 0 && `${i.critical} critical`,
+					i.critical === 0 && i.high > 0 && `${i.high} high`,
+					i.critical === 0 && i.high === 0 && "clean"
+				]
+			}), /* @__PURE__ */ t("span", {
+				className: "text-xs text-text-secondary",
+				children: a ? `Last scan: ${new Date(a).toLocaleString()}` : "No scans yet"
+			})]
+		}), /* @__PURE__ */ n("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ n("label", {
+				"data-testid": "security-policy-selector",
+				className: `flex items-center gap-1 text-xs px-2 py-1 rounded-md bg-bg-sunken border border-border-subtle ${c ? "" : "opacity-50 cursor-not-allowed"}`,
+				children: [/* @__PURE__ */ t("span", {
+					className: "text-text-tertiary",
+					children: "Policy:"
+				}), /* @__PURE__ */ n("select", {
+					value: r,
+					disabled: !c,
+					onChange: (e) => o(e.target.value),
+					className: "bg-transparent text-text-primary text-xs outline-none",
+					"aria-label": "Security policy level",
+					children: [
+						/* @__PURE__ */ t("option", {
+							"data-testid": "security-policy-option-advisory",
+							value: "ADVISORY",
+							children: "advisory"
+						}),
+						/* @__PURE__ */ t("option", {
+							"data-testid": "security-policy-option-standard",
+							value: "WARN",
+							children: "warn"
+						}),
+						/* @__PURE__ */ t("option", {
+							"data-testid": "security-policy-option-strict",
+							value: "BLOCK",
+							children: "block"
+						})
+					]
+				})]
+			}), /* @__PURE__ */ t("button", {
+				type: "button",
+				onClick: s,
+				className: "p-1.5 rounded-md hover:bg-bg-sunken text-text-secondary hover:text-text-primary",
+				"aria-label": "Open security settings",
+				children: /* @__PURE__ */ t(e, { className: "h-4 w-4" })
+			})]
+		})]
+	});
+}
+//#endregion
+export { r as SecurityHeaderStrip };
+
+//# sourceMappingURL=SecurityHeaderStrip.js.map

package/dist/components/security/SecurityHeaderStrip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SecurityHeaderStrip.js","names":[],"sources":["../../../src/components/security/SecurityHeaderStrip.tsx"],"sourcesContent":["import React from 'react';\nimport { Settings } from 'lucide-react';\n\nimport type { SecurityPolicyLevel, SecuritySummary } from './types';\n\ninterface Props {\n  policyLevel: SecurityPolicyLevel;\n  totals: SecuritySummary;\n  lastScanAt?: string | null;\n  onPolicyChange: (level: SecurityPolicyLevel) => void;\n  onOpenSettings: () => void;\n  canEditPolicy: boolean;\n}\n\nexport function SecurityHeaderStrip({\n  policyLevel,\n  totals,\n  lastScanAt,\n  onPolicyChange,\n  onOpenSettings,\n  canEditPolicy,\n}: Props): React.ReactElement {\n  const chipClass =\n    totals.critical > 0\n      ? 'bg-status-error-bg-subtle text-status-error-text'\n      : totals.high > 0\n        ? 'bg-status-warning-bg-subtle text-status-warning-text'\n        : 'bg-status-success-bg-subtle text-status-success-text';\n\n  return (\n    <div\n      data-testid=\"security-header\"\n      className=\"flex flex-wrap items-center justify-between gap-3 p-3 rounded-md border border-border-default bg-bg-surface\"\n    >\n      <div className=\"flex items-center gap-3\">\n        <span className={`px-3 py-1 rounded-full text-xs font-semibold ${chipClass}`}>\n          {totals.critical > 0 && `${totals.critical} critical`}\n          {totals.critical === 0 && totals.high > 0 && `${totals.high} high`}\n          {totals.critical === 0 && totals.high === 0 && 'clean'}\n        </span>\n        <span className=\"text-xs text-text-secondary\">\n          {lastScanAt ? `Last scan: ${new Date(lastScanAt).toLocaleString()}` : 'No scans yet'}\n        </span>\n      </div>\n\n      <div className=\"flex items-center gap-2\">\n        <label\n          data-testid=\"security-policy-selector\"\n          className={`flex items-center gap-1 text-xs px-2 py-1 rounded-md bg-bg-sunken border border-border-subtle ${\n            canEditPolicy ? '' : 'opacity-50 cursor-not-allowed'\n          }`}\n        >\n          <span className=\"text-text-tertiary\">Policy:</span>\n          <select\n            value={policyLevel}\n            disabled={!canEditPolicy}\n            onChange={(e) => onPolicyChange(e.target.value as SecurityPolicyLevel)}\n            className=\"bg-transparent text-text-primary text-xs outline-none\"\n            aria-label=\"Security policy level\"\n          >\n            <option data-testid=\"security-policy-option-advisory\" value=\"ADVISORY\">\n              advisory\n            </option>\n            <option data-testid=\"security-policy-option-standard\" value=\"WARN\">\n              warn\n            </option>\n            <option data-testid=\"security-policy-option-strict\" value=\"BLOCK\">\n              block\n            </option>\n          </select>\n        </label>\n        <button\n          type=\"button\"\n          onClick={onOpenSettings}\n          className=\"p-1.5 rounded-md hover:bg-bg-sunken text-text-secondary hover:text-text-primary\"\n          aria-label=\"Open security settings\"\n        >\n          <Settings className=\"h-4 w-4\" />\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;AAcA,SAAgB,EAAoB,EAClC,gBACA,WACA,eACA,mBACA,mBACA,oBAC4B;AAQ5B,QACE,kBAAC,OAAD;EACE,eAAY;EACZ,WAAU;YAFZ,CAIE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,QAAD;IAAM,WAAW,gDAZrB,EAAO,WAAW,IACd,qDACA,EAAO,OAAO,IACZ,yDACA;cAQF;KACG,EAAO,WAAW,KAAK,GAAG,EAAO,SAAS;KAC1C,EAAO,aAAa,KAAK,EAAO,OAAO,KAAK,GAAG,EAAO,KAAK;KAC3D,EAAO,aAAa,KAAK,EAAO,SAAS,KAAK;KAC1C;OACP,kBAAC,QAAD;IAAM,WAAU;cACb,IAAa,cAAc,IAAI,KAAK,EAAW,CAAC,gBAAgB,KAAK;IACjE,CAAA,CACH;MAEN,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,SAAD;IACE,eAAY;IACZ,WAAW,iGACT,IAAgB,KAAK;cAHzB,CAME,kBAAC,QAAD;KAAM,WAAU;eAAqB;KAAc,CAAA,EACnD,kBAAC,UAAD;KACE,OAAO;KACP,UAAU,CAAC;KACX,WAAW,MAAM,EAAe,EAAE,OAAO,MAA6B;KACtE,WAAU;KACV,cAAW;eALb;MAOE,kBAAC,UAAD;OAAQ,eAAY;OAAkC,OAAM;iBAAW;OAE9D,CAAA;MACT,kBAAC,UAAD;OAAQ,eAAY;OAAkC,OAAM;iBAAO;OAE1D,CAAA;MACT,kBAAC,UAAD;OAAQ,eAAY;OAAgC,OAAM;iBAAQ;OAEzD,CAAA;MACF;OACH;OACR,kBAAC,UAAD;IACE,MAAK;IACL,SAAS;IACT,WAAU;IACV,cAAW;cAEX,kBAAC,GAAD,EAAU,WAAU,WAAY,CAAA;IACzB,CAAA,CACL;KACF"}

package/dist/components/security/SecurityLifecycleStepper.js

@@ -0,0 +1,66 @@
+import { ALL_STAGES as e, deriveStageStatus as t } from "./types.js";
+import "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/security/SecurityLifecycleStepper.tsx
+var i = {
+	"never-run": "bg-bg-sunken text-text-muted",
+	"in-progress": "bg-status-info-bg-subtle text-status-info-text animate-pulse",
+	passed: "bg-status-success-bg-subtle text-status-success-text",
+	warn: "bg-status-warning-bg-subtle text-status-warning-text",
+	failed: "bg-status-error-bg-subtle text-status-error-text",
+	skipped: "bg-bg-sunken text-text-tertiary"
+};
+function a({ status: a, activeStageId: s, onSelectStage: c }) {
+	return /* @__PURE__ */ n("div", {
+		"data-testid": "security-stepper",
+		className: "overflow-x-auto bg-bg-sunken border border-border-default rounded-md p-3",
+		children: /* @__PURE__ */ n("div", {
+			className: "flex gap-2 min-w-max",
+			children: e.map((e) => {
+				let l = a?.perStage?.[e.id], u = t(l ?? {}), d = l?.lastRun?.summary, f = s === e.id;
+				return /* @__PURE__ */ r("button", {
+					type: "button",
+					"data-testid": `security-stage-node-${e.slug}`,
+					"data-stage": e.slug,
+					"data-status": u,
+					onClick: () => c(e.id),
+					className: `flex flex-col items-start gap-1 px-3 py-2 rounded-md border min-w-[8rem] text-left transition-colors ${i[u]} ${f ? "border-action-primary-bg ring-1 ring-action-primary-bg" : "border-border-subtle hover:border-border-default"}`,
+					children: [
+						/* @__PURE__ */ n("span", {
+							className: "text-xs font-semibold uppercase tracking-wide",
+							children: e.label
+						}),
+						/* @__PURE__ */ n("span", {
+							className: "text-xs text-text-secondary",
+							children: o(u)
+						}),
+						d && (d.critical > 0 || d.high > 0) ? /* @__PURE__ */ r("span", {
+							className: "text-xs",
+							children: [d.critical > 0 && /* @__PURE__ */ r("span", {
+								className: "text-status-error-text mr-1",
+								children: [d.critical, "c"]
+							}), d.high > 0 && /* @__PURE__ */ r("span", {
+								className: "text-status-warning-text mr-1",
+								children: [d.high, "h"]
+							})]
+						}) : null
+					]
+				}, e.id);
+			})
+		})
+	});
+}
+function o(e) {
+	switch (e) {
+		case "never-run": return "never";
+		case "in-progress": return "running";
+		case "passed": return "passed";
+		case "warn": return "warn";
+		case "failed": return "failed";
+		case "skipped": return "skipped";
+	}
+}
+//#endregion
+export { a as SecurityLifecycleStepper };
+
+//# sourceMappingURL=SecurityLifecycleStepper.js.map

package/dist/components/security/SecurityLifecycleStepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SecurityLifecycleStepper.js","names":[],"sources":["../../../src/components/security/SecurityLifecycleStepper.tsx"],"sourcesContent":["import React from 'react';\n/**\n * Lifecycle stepper — 14 horizontal nodes, each with status + counts.\n * Uses only semantic tokens.\n */\nimport {\n  ALL_STAGES,\n  deriveStageStatus,\n  type SecurityStage,\n  type SecurityStatusPayload,\n  type StageNodeStatus,\n} from './types';\n\ninterface StepperProps {\n  status?: SecurityStatusPayload;\n  activeStageId: SecurityStage | null;\n  onSelectStage: (id: SecurityStage) => void;\n}\n\nconst STATUS_BG: Record<StageNodeStatus, string> = {\n  'never-run': 'bg-bg-sunken text-text-muted',\n  'in-progress': 'bg-status-info-bg-subtle text-status-info-text animate-pulse',\n  passed: 'bg-status-success-bg-subtle text-status-success-text',\n  warn: 'bg-status-warning-bg-subtle text-status-warning-text',\n  failed: 'bg-status-error-bg-subtle text-status-error-text',\n  skipped: 'bg-bg-sunken text-text-tertiary',\n};\n\nexport function SecurityLifecycleStepper({\n  status,\n  activeStageId,\n  onSelectStage,\n}: StepperProps): React.ReactElement {\n  return (\n    <div\n      data-testid=\"security-stepper\"\n      className=\"overflow-x-auto bg-bg-sunken border border-border-default rounded-md p-3\"\n    >\n      <div className=\"flex gap-2 min-w-max\">\n        {ALL_STAGES.map((s) => {\n          const perStage = status?.perStage?.[s.id];\n          const nodeStatus = deriveStageStatus(perStage ?? {});\n          const counts = perStage?.lastRun?.summary;\n          const isActive = activeStageId === s.id;\n          return (\n            <button\n              key={s.id}\n              type=\"button\"\n              data-testid={`security-stage-node-${s.slug}`}\n              data-stage={s.slug}\n              data-status={nodeStatus}\n              onClick={() => onSelectStage(s.id)}\n              className={`flex flex-col items-start gap-1 px-3 py-2 rounded-md border min-w-[8rem] text-left transition-colors ${STATUS_BG[nodeStatus]} ${\n                isActive\n                  ? 'border-action-primary-bg ring-1 ring-action-primary-bg'\n                  : 'border-border-subtle hover:border-border-default'\n              }`}\n            >\n              <span className=\"text-xs font-semibold uppercase tracking-wide\">{s.label}</span>\n              <span className=\"text-xs text-text-secondary\">{labelFor(nodeStatus)}</span>\n              {counts && (counts.critical > 0 || counts.high > 0) ? (\n                <span className=\"text-xs\">\n                  {counts.critical > 0 && (\n                    <span className=\"text-status-error-text mr-1\">{counts.critical}c</span>\n                  )}\n                  {counts.high > 0 && (\n                    <span className=\"text-status-warning-text mr-1\">{counts.high}h</span>\n                  )}\n                </span>\n              ) : null}\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nfunction labelFor(s: StageNodeStatus): string {\n  switch (s) {\n    case 'never-run':\n      return 'never';\n    case 'in-progress':\n      return 'running';\n    case 'passed':\n      return 'passed';\n    case 'warn':\n      return 'warn';\n    case 'failed':\n      return 'failed';\n    case 'skipped':\n      return 'skipped';\n  }\n}\n"],"mappings":";;;;AAmBA,IAAM,IAA6C;CACjD,aAAa;CACb,eAAe;CACf,QAAQ;CACR,MAAM;CACN,QAAQ;CACR,SAAS;CACV;AAED,SAAgB,EAAyB,EACvC,WACA,kBACA,oBACmC;AACnC,QACE,kBAAC,OAAD;EACE,eAAY;EACZ,WAAU;YAEV,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAW,KAAK,MAAM;IACrB,IAAM,IAAW,GAAQ,WAAW,EAAE,KAChC,IAAa,EAAkB,KAAY,EAAE,CAAC,EAC9C,IAAS,GAAU,SAAS,SAC5B,IAAW,MAAkB,EAAE;AACrC,WACE,kBAAC,UAAD;KAEE,MAAK;KACL,eAAa,uBAAuB,EAAE;KACtC,cAAY,EAAE;KACd,eAAa;KACb,eAAe,EAAc,EAAE,GAAG;KAClC,WAAW,wGAAwG,EAAU,GAAY,GACvI,IACI,2DACA;eAVR;MAaE,kBAAC,QAAD;OAAM,WAAU;iBAAiD,EAAE;OAAa,CAAA;MAChF,kBAAC,QAAD;OAAM,WAAU;iBAA+B,EAAS,EAAW;OAAQ,CAAA;MAC1E,MAAW,EAAO,WAAW,KAAK,EAAO,OAAO,KAC/C,kBAAC,QAAD;OAAM,WAAU;iBAAhB,CACG,EAAO,WAAW,KACjB,kBAAC,QAAD;QAAM,WAAU;kBAAhB,CAA+C,EAAO,UAAS,IAAQ;WAExE,EAAO,OAAO,KACb,kBAAC,QAAD;QAAM,WAAU;kBAAhB,CAAiD,EAAO,MAAK,IAAQ;UAElE;WACL;MACG;OAxBF,EAAE,GAwBA;KAEX;GACE,CAAA;EACF,CAAA;;AAIV,SAAS,EAAS,GAA4B;AAC5C,SAAQ,GAAR;EACE,KAAK,YACH,QAAO;EACT,KAAK,cACH,QAAO;EACT,KAAK,SACH,QAAO;EACT,KAAK,OACH,QAAO;EACT,KAAK,SACH,QAAO;EACT,KAAK,UACH,QAAO"}

package/dist/components/security/SecurityProviderDrawer.js

@@ -0,0 +1,112 @@
+import { RUN_SECURITY_SCAN_MUTATION as e, SECURITY_PROVIDERS_QUERY as t, SET_SECURITY_PROVIDER_MUTATION as n } from "./gql.js";
+import { STAGE_BY_ID as r } from "./types.js";
+import { useMemo as i, useState as a } from "react";
+import { X as o } from "lucide-react";
+import { useMutation as s, useQuery as c } from "@apollo/client/react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/security/SecurityProviderDrawer.tsx
+function d({ vibeId: d, stage: f, onClose: p }) {
+	let { data: m, loading: h } = c(t), [g, { loading: _ }] = s(n), [v, { loading: y }] = s(e), [b, x] = a(null), S = i(() => (m?.securityProviders ?? []).filter((e) => e.stage === f && e.enabled), [m, f]), C = r.get(f), w = C?.slug ?? f.toLowerCase().replace(/_/g, "-");
+	return /* @__PURE__ */ u("aside", {
+		"data-testid": "security-provider-drawer",
+		className: "fixed right-0 top-0 bottom-0 w-[28rem] bg-bg-elevated border-l border-border-default shadow-lg z-50 overflow-y-auto",
+		children: [/* @__PURE__ */ u("div", {
+			className: "flex items-center justify-between px-4 py-3 border-b border-border-subtle",
+			children: [/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("h3", {
+				className: "text-sm font-semibold text-text-primary",
+				children: C?.label
+			}), /* @__PURE__ */ l("p", {
+				className: "text-xs text-text-secondary",
+				children: "Configure provider for this stage"
+			})] }), /* @__PURE__ */ l("button", {
+				type: "button",
+				"aria-label": "Close drawer",
+				onClick: p,
+				className: "text-text-secondary hover:text-text-primary",
+				children: /* @__PURE__ */ l(o, { className: "h-4 w-4" })
+			})]
+		}), /* @__PURE__ */ u("div", {
+			className: "p-4 space-y-4",
+			"data-testid": "security-provider-config-form",
+			children: [
+				h && /* @__PURE__ */ l("p", {
+					className: "text-xs text-text-secondary",
+					children: "Loading providers…"
+				}),
+				!h && S.length === 0 && /* @__PURE__ */ u("p", {
+					className: "text-xs text-text-secondary",
+					children: [
+						"No providers registered for this stage. Install one via",
+						" ",
+						/* @__PURE__ */ l("code", {
+							className: "text-text-primary",
+							children: "vibe plugin install …"
+						}),
+						"."
+					]
+				}),
+				S.map((e) => /* @__PURE__ */ u("label", {
+					className: "flex items-start gap-3 p-3 rounded-md border border-border-subtle hover:border-border-default cursor-pointer",
+					children: [/* @__PURE__ */ l("input", {
+						type: "radio",
+						name: "provider",
+						value: e.providerName,
+						checked: b === e.providerName || b === null && e.isDefault,
+						onChange: () => x(e.providerName),
+						"aria-label": e.providerName
+					}), /* @__PURE__ */ u("div", {
+						className: "flex-1",
+						children: [/* @__PURE__ */ l("div", {
+							className: "text-sm font-medium text-text-primary",
+							children: e.providerName
+						}), /* @__PURE__ */ u("div", {
+							className: "text-xs text-text-secondary",
+							children: [
+								e.pluginName,
+								" · v",
+								e.toolVersion,
+								e.isDefault && /* @__PURE__ */ l("span", {
+									className: "ml-2 text-action-primary-bg",
+									children: "default"
+								})
+							]
+						})]
+					})]
+				}, e.id)),
+				/* @__PURE__ */ u("div", {
+					className: "flex gap-2 pt-2 border-t border-border-subtle",
+					children: [/* @__PURE__ */ l("button", {
+						type: "button",
+						disabled: !b || _,
+						onClick: async () => {
+							b && await g({ variables: { input: {
+								vibeId: d,
+								stage: f,
+								providerKey: b,
+								config: {}
+							} } });
+						},
+						className: "flex-1 px-3 py-2 rounded-md bg-action-primary-bg text-action-primary-text disabled:opacity-50",
+						children: "Save"
+					}), /* @__PURE__ */ l("button", {
+						type: "button",
+						disabled: y,
+						"data-testid": `security-run-scan-${w}`,
+						onClick: async () => {
+							await v({ variables: {
+								vibeId: d,
+								stage: f
+							} });
+						},
+						className: "flex-1 px-3 py-2 rounded-md border border-border-default bg-bg-sunken hover:bg-bg-surface text-text-primary disabled:opacity-50",
+						children: "Run scan"
+					})]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { d as SecurityProviderDrawer };
+
+//# sourceMappingURL=SecurityProviderDrawer.js.map

package/dist/components/security/SecurityProviderDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SecurityProviderDrawer.js","names":[],"sources":["../../../src/components/security/SecurityProviderDrawer.tsx"],"sourcesContent":["import { useMemo, useState } from 'react';\nimport { useMutation, useQuery } from '@apollo/client/react';\nimport { X } from 'lucide-react';\n\nimport {\n  RUN_SECURITY_SCAN_MUTATION,\n  SECURITY_PROVIDERS_QUERY,\n  SET_SECURITY_PROVIDER_MUTATION,\n} from './gql';\nimport { STAGE_BY_ID, type SecurityProviderRow, type SecurityStage } from './types';\n\ninterface DrawerProps {\n  vibeId: string;\n  stage: SecurityStage;\n  onClose: () => void;\n}\n\ninterface ProvidersResp {\n  securityProviders: SecurityProviderRow[];\n}\n\nexport function SecurityProviderDrawer({\n  vibeId,\n  stage,\n  onClose,\n}: DrawerProps): React.ReactElement {\n  const { data, loading } = useQuery<ProvidersResp>(SECURITY_PROVIDERS_QUERY);\n  const [setProvider, { loading: saving }] = useMutation(SET_SECURITY_PROVIDER_MUTATION);\n  const [runScan, { loading: scanning }] = useMutation(RUN_SECURITY_SCAN_MUTATION);\n  const [selected, setSelected] = useState<string | null>(null);\n\n  const available = useMemo(\n    () => (data?.securityProviders ?? []).filter((p) => p.stage === stage && p.enabled),\n    [data, stage]\n  );\n  const stageInfo = STAGE_BY_ID.get(stage);\n  const stageSlug = stageInfo?.slug ?? stage.toLowerCase().replace(/_/g, '-');\n\n  return (\n    <aside\n      data-testid=\"security-provider-drawer\"\n      className=\"fixed right-0 top-0 bottom-0 w-[28rem] bg-bg-elevated border-l border-border-default shadow-lg z-50 overflow-y-auto\"\n    >\n      <div className=\"flex items-center justify-between px-4 py-3 border-b border-border-subtle\">\n        <div>\n          <h3 className=\"text-sm font-semibold text-text-primary\">{stageInfo?.label}</h3>\n          <p className=\"text-xs text-text-secondary\">Configure provider for this stage</p>\n        </div>\n        <button\n          type=\"button\"\n          aria-label=\"Close drawer\"\n          onClick={onClose}\n          className=\"text-text-secondary hover:text-text-primary\"\n        >\n          <X className=\"h-4 w-4\" />\n        </button>\n      </div>\n\n      <div className=\"p-4 space-y-4\" data-testid=\"security-provider-config-form\">\n        {loading && <p className=\"text-xs text-text-secondary\">Loading providers…</p>}\n        {!loading && available.length === 0 && (\n          <p className=\"text-xs text-text-secondary\">\n            No providers registered for this stage. Install one via{' '}\n            <code className=\"text-text-primary\">vibe plugin install …</code>.\n          </p>\n        )}\n        {available.map((p) => (\n          <label\n            key={p.id}\n            className=\"flex items-start gap-3 p-3 rounded-md border border-border-subtle hover:border-border-default cursor-pointer\"\n          >\n            <input\n              type=\"radio\"\n              name=\"provider\"\n              value={p.providerName}\n              checked={selected === p.providerName || (selected === null && p.isDefault)}\n              onChange={() => setSelected(p.providerName)}\n              aria-label={p.providerName}\n            />\n            <div className=\"flex-1\">\n              <div className=\"text-sm font-medium text-text-primary\">{p.providerName}</div>\n              <div className=\"text-xs text-text-secondary\">\n                {p.pluginName} · v{p.toolVersion}\n                {p.isDefault && <span className=\"ml-2 text-action-primary-bg\">default</span>}\n              </div>\n            </div>\n          </label>\n        ))}\n\n        <div className=\"flex gap-2 pt-2 border-t border-border-subtle\">\n          <button\n            type=\"button\"\n            disabled={!selected || saving}\n            onClick={async () => {\n              if (!selected) return;\n              await setProvider({\n                variables: {\n                  input: { vibeId, stage, providerKey: selected, config: {} },\n                },\n              });\n            }}\n            className=\"flex-1 px-3 py-2 rounded-md bg-action-primary-bg text-action-primary-text disabled:opacity-50\"\n          >\n            Save\n          </button>\n          <button\n            type=\"button\"\n            disabled={scanning}\n            data-testid={`security-run-scan-${stageSlug}`}\n            onClick={async () => {\n              await runScan({ variables: { vibeId, stage } });\n            }}\n            className=\"flex-1 px-3 py-2 rounded-md border border-border-default bg-bg-sunken hover:bg-bg-surface text-text-primary disabled:opacity-50\"\n          >\n            Run scan\n          </button>\n        </div>\n      </div>\n    </aside>\n  );\n}\n"],"mappings":";;;;;;;AAqBA,SAAgB,EAAuB,EACrC,WACA,UACA,cACkC;CAClC,IAAM,EAAE,SAAM,eAAY,EAAwB,EAAyB,EACrE,CAAC,GAAa,EAAE,SAAS,OAAY,EAAY,EAA+B,EAChF,CAAC,GAAS,EAAE,SAAS,OAAc,EAAY,EAA2B,EAC1E,CAAC,GAAU,KAAe,EAAwB,KAAK,EAEvD,IAAY,SACT,GAAM,qBAAqB,EAAE,EAAE,QAAQ,MAAM,EAAE,UAAU,KAAS,EAAE,QAAQ,EACnF,CAAC,GAAM,EAAM,CACd,EACK,IAAY,EAAY,IAAI,EAAM,EAClC,IAAY,GAAW,QAAQ,EAAM,aAAa,CAAC,QAAQ,MAAM,IAAI;AAE3E,QACE,kBAAC,SAAD;EACE,eAAY;EACZ,WAAU;YAFZ,CAIE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;IAAI,WAAU;cAA2C,GAAW;IAAW,CAAA,EAC/E,kBAAC,KAAD;IAAG,WAAU;cAA8B;IAAqC,CAAA,CAC5E,EAAA,CAAA,EACN,kBAAC,UAAD;IACE,MAAK;IACL,cAAW;IACX,SAAS;IACT,WAAU;cAEV,kBAAC,GAAD,EAAG,WAAU,WAAY,CAAA;IAClB,CAAA,CACL;MAEN,kBAAC,OAAD;GAAK,WAAU;GAAgB,eAAY;aAA3C;IACG,KAAW,kBAAC,KAAD;KAAG,WAAU;eAA8B;KAAsB,CAAA;IAC5E,CAAC,KAAW,EAAU,WAAW,KAChC,kBAAC,KAAD;KAAG,WAAU;eAAb;MAA2C;MACe;MACxD,kBAAC,QAAD;OAAM,WAAU;iBAAoB;OAA4B,CAAA;;MAC9D;;IAEL,EAAU,KAAK,MACd,kBAAC,SAAD;KAEE,WAAU;eAFZ,CAIE,kBAAC,SAAD;MACE,MAAK;MACL,MAAK;MACL,OAAO,EAAE;MACT,SAAS,MAAa,EAAE,gBAAiB,MAAa,QAAQ,EAAE;MAChE,gBAAgB,EAAY,EAAE,aAAa;MAC3C,cAAY,EAAE;MACd,CAAA,EACF,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAyC,EAAE;OAAmB,CAAA,EAC7E,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACG,EAAE;QAAW;QAAK,EAAE;QACpB,EAAE,aAAa,kBAAC,QAAD;SAAM,WAAU;mBAA8B;SAAc,CAAA;QACxE;SACF;QACA;OAlBD,EAAE,GAkBD,CACR;IAEF,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,UAAD;MACE,MAAK;MACL,UAAU,CAAC,KAAY;MACvB,SAAS,YAAY;AACd,YACL,MAAM,EAAY,EAChB,WAAW,EACT,OAAO;QAAE;QAAQ;QAAO,aAAa;QAAU,QAAQ,EAAE;QAAE,EAC5D,EACF,CAAC;;MAEJ,WAAU;gBACX;MAEQ,CAAA,EACT,kBAAC,UAAD;MACE,MAAK;MACL,UAAU;MACV,eAAa,qBAAqB;MAClC,SAAS,YAAY;AACnB,aAAM,EAAQ,EAAE,WAAW;QAAE;QAAQ;QAAO,EAAE,CAAC;;MAEjD,WAAU;gBACX;MAEQ,CAAA,CACL;;IACF;KACA"}

package/dist/components/security/SecurityTabPanel.js

@@ -0,0 +1,105 @@
+import { ALL_SECURITY_SCANS_QUERY as e, SECURITY_STATUS_QUERY as t, UPDATE_FINDING_STATUS_MUTATION as n } from "./gql.js";
+import { SecurityEmptyState as r } from "./SecurityEmptyState.js";
+import { SecurityEvidenceList as i } from "./SecurityEvidenceList.js";
+import { SecurityFindingsTable as a } from "./SecurityFindingsTable.js";
+import { SecurityHeaderStrip as o } from "./SecurityHeaderStrip.js";
+import { SecurityLifecycleStepper as s } from "./SecurityLifecycleStepper.js";
+import { SecurityProviderDrawer as c } from "./SecurityProviderDrawer.js";
+import { useMemo as l, useState as u } from "react";
+import { useMutation as d, useQuery as f } from "@apollo/client/react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/security/SecurityTabPanel.tsx
+function g({ vibeId: g }) {
+	let { data: _, loading: v, refetch: y } = f(t, {
+		variables: { vibeId: g },
+		fetchPolicy: "cache-and-network",
+		errorPolicy: "all"
+	}), { data: b } = f(e, {
+		variables: {
+			filter: { vibeId: g },
+			pagination: { limit: 10 }
+		},
+		fetchPolicy: "cache-and-network",
+		errorPolicy: "all"
+	}), [x] = d(n), [S, C] = u(null), w = _?.securityStatus, T = b?.allSecurityScans.items ?? [], E = w?.totals ?? {
+		critical: 0,
+		high: 0,
+		medium: 0,
+		low: 0,
+		info: 0
+	}, D = T.length > 0, O = l(() => {
+		let e = [];
+		for (let t of T) for (let n of t.evidence ?? []) e.push(n);
+		return e.slice(0, 6);
+	}, [T]);
+	return /* @__PURE__ */ h("div", {
+		"data-testid": "security-tab-panel",
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ m(o, {
+				policyLevel: w?.policyLevel ?? "WARN",
+				totals: E,
+				lastScanAt: w?.lastScanAt,
+				canEditPolicy: !0,
+				onPolicyChange: (e) => {
+					x({ variables: {
+						id: "no-op",
+						status: "OPEN"
+					} }).catch(() => void 0);
+				},
+				onOpenSettings: () => C("PULL_REQUEST_FAST")
+			}),
+			/* @__PURE__ */ m(s, {
+				status: w,
+				activeStageId: S,
+				onSelectStage: (e) => C(e)
+			}),
+			!D && !v && /* @__PURE__ */ m(r, { onConfigureProviders: () => C("PULL_REQUEST_FAST") }),
+			D && /* @__PURE__ */ h(p, { children: [
+				/* @__PURE__ */ m(a, { vibeId: g }),
+				/* @__PURE__ */ h("div", {
+					className: "bg-bg-surface border border-border-default rounded-md p-3",
+					children: [/* @__PURE__ */ m("h4", {
+						className: "text-sm font-semibold text-text-primary mb-2",
+						children: "Recent evidence"
+					}), /* @__PURE__ */ m(i, { evidence: O })]
+				}),
+				/* @__PURE__ */ h("div", {
+					"data-testid": "security-run-history",
+					className: "bg-bg-surface border border-border-default rounded-md p-3",
+					children: [/* @__PURE__ */ m("h4", {
+						className: "text-sm font-semibold text-text-primary mb-2",
+						children: "Recent runs"
+					}), /* @__PURE__ */ m("ul", {
+						className: "space-y-1 text-sm",
+						children: T.slice(0, 5).map((e) => /* @__PURE__ */ h("li", {
+							className: "flex items-center justify-between gap-2 border-b border-border-subtle pb-1",
+							children: [/* @__PURE__ */ h("span", {
+								className: "text-text-primary text-xs",
+								children: [
+									e.stage,
+									" · ",
+									e.providerName
+								]
+							}), /* @__PURE__ */ h("span", {
+								className: "text-xs text-text-tertiary",
+								children: [e.conclusion ?? e.status, e.durationMs ? ` · ${(e.durationMs / 1e3).toFixed(1)}s` : ""]
+							})]
+						}, e.id))
+					})]
+				})
+			] }),
+			S && /* @__PURE__ */ m(c, {
+				vibeId: g,
+				stage: S,
+				onClose: () => {
+					C(null), y();
+				}
+			})
+		]
+	});
+}
+//#endregion
+export { g as SecurityTabPanel };
+
+//# sourceMappingURL=SecurityTabPanel.js.map

package/dist/components/security/SecurityTabPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SecurityTabPanel.js","names":[],"sources":["../../../src/components/security/SecurityTabPanel.tsx"],"sourcesContent":["/**\n * Root Security tab panel — pulls status + scans + findings, owns the\n * provider drawer state, and composes the sub-components.\n */\nimport { useMemo, useState } from 'react';\nimport { useMutation, useQuery } from '@apollo/client/react';\n\nimport {\n  ALL_SECURITY_SCANS_QUERY,\n  SECURITY_STATUS_QUERY,\n  UPDATE_FINDING_STATUS_MUTATION,\n} from './gql';\nimport { SecurityEmptyState } from './SecurityEmptyState';\nimport { SecurityEvidenceList } from './SecurityEvidenceList';\nimport { SecurityFindingsTable } from './SecurityFindingsTable';\nimport { SecurityHeaderStrip } from './SecurityHeaderStrip';\nimport { SecurityLifecycleStepper } from './SecurityLifecycleStepper';\nimport { SecurityProviderDrawer } from './SecurityProviderDrawer';\nimport type {\n  SecurityPolicyLevel,\n  SecurityScanRun,\n  SecurityStage,\n  SecurityStatusPayload,\n} from './types';\n\ninterface PanelProps {\n  vibeId: string;\n}\n\ninterface StatusResp {\n  securityStatus: SecurityStatusPayload;\n}\n\ninterface ScansResp {\n  allSecurityScans: { items: SecurityScanRun[]; total: number; hasMore: boolean };\n}\n\nexport function SecurityTabPanel({ vibeId }: PanelProps): React.ReactElement {\n  const {\n    data: statusData,\n    loading: statusLoading,\n    refetch: refetchStatus,\n  } = useQuery<StatusResp>(SECURITY_STATUS_QUERY, {\n    variables: { vibeId },\n    fetchPolicy: 'cache-and-network',\n    errorPolicy: 'all',\n  });\n  const { data: scansData } = useQuery<ScansResp>(ALL_SECURITY_SCANS_QUERY, {\n    variables: { filter: { vibeId }, pagination: { limit: 10 } },\n    fetchPolicy: 'cache-and-network',\n    errorPolicy: 'all',\n  });\n  const [updateStatus] = useMutation(UPDATE_FINDING_STATUS_MUTATION);\n\n  const [activeStage, setActiveStage] = useState<SecurityStage | null>(null);\n\n  const status = statusData?.securityStatus;\n  const recentScans = scansData?.allSecurityScans.items ?? [];\n  const totals = status?.totals ?? { critical: 0, high: 0, medium: 0, low: 0, info: 0 };\n  const hasAnyScans = recentScans.length > 0;\n\n  const evidence = useMemo(() => {\n    const flattened = [];\n    for (const run of recentScans) {\n      for (const ev of run.evidence ?? []) flattened.push(ev);\n    }\n    return flattened.slice(0, 6);\n  }, [recentScans]);\n\n  return (\n    <div data-testid=\"security-tab-panel\" className=\"space-y-4\">\n      <SecurityHeaderStrip\n        policyLevel={status?.policyLevel ?? 'WARN'}\n        totals={totals}\n        lastScanAt={status?.lastScanAt}\n        canEditPolicy={true}\n        onPolicyChange={(level: SecurityPolicyLevel) => {\n          void updateStatus({ variables: { id: 'no-op', status: 'OPEN' } }).catch(() => undefined);\n          void level;\n        }}\n        onOpenSettings={() => setActiveStage('PULL_REQUEST_FAST')}\n      />\n\n      <SecurityLifecycleStepper\n        status={status}\n        activeStageId={activeStage}\n        onSelectStage={(id) => setActiveStage(id)}\n      />\n\n      {!hasAnyScans && !statusLoading && (\n        <SecurityEmptyState onConfigureProviders={() => setActiveStage('PULL_REQUEST_FAST')} />\n      )}\n\n      {hasAnyScans && (\n        <>\n          <SecurityFindingsTable vibeId={vibeId} />\n          <div className=\"bg-bg-surface border border-border-default rounded-md p-3\">\n            <h4 className=\"text-sm font-semibold text-text-primary mb-2\">Recent evidence</h4>\n            <SecurityEvidenceList evidence={evidence} />\n          </div>\n          <div\n            data-testid=\"security-run-history\"\n            className=\"bg-bg-surface border border-border-default rounded-md p-3\"\n          >\n            <h4 className=\"text-sm font-semibold text-text-primary mb-2\">Recent runs</h4>\n            <ul className=\"space-y-1 text-sm\">\n              {recentScans.slice(0, 5).map((r) => (\n                <li\n                  key={r.id}\n                  className=\"flex items-center justify-between gap-2 border-b border-border-subtle pb-1\"\n                >\n                  <span className=\"text-text-primary text-xs\">\n                    {r.stage} · {r.providerName}\n                  </span>\n                  <span className=\"text-xs text-text-tertiary\">\n                    {r.conclusion ?? r.status}\n                    {r.durationMs ? ` · ${(r.durationMs / 1000).toFixed(1)}s` : ''}\n                  </span>\n                </li>\n              ))}\n            </ul>\n          </div>\n        </>\n      )}\n\n      {activeStage && (\n        <SecurityProviderDrawer\n          vibeId={vibeId}\n          stage={activeStage}\n          onClose={() => {\n            setActiveStage(null);\n            void refetchStatus();\n          }}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAqCA,SAAgB,EAAiB,EAAE,aAA0C;CAC3E,IAAM,EACJ,MAAM,GACN,SAAS,GACT,SAAS,MACP,EAAqB,GAAuB;EAC9C,WAAW,EAAE,WAAQ;EACrB,aAAa;EACb,aAAa;EACd,CAAC,EACI,EAAE,MAAM,MAAc,EAAoB,GAA0B;EACxE,WAAW;GAAE,QAAQ,EAAE,WAAQ;GAAE,YAAY,EAAE,OAAO,IAAI;GAAE;EAC5D,aAAa;EACb,aAAa;EACd,CAAC,EACI,CAAC,KAAgB,EAAY,EAA+B,EAE5D,CAAC,GAAa,KAAkB,EAA+B,KAAK,EAEpE,IAAS,GAAY,gBACrB,IAAc,GAAW,iBAAiB,SAAS,EAAE,EACrD,IAAS,GAAQ,UAAU;EAAE,UAAU;EAAG,MAAM;EAAG,QAAQ;EAAG,KAAK;EAAG,MAAM;EAAG,EAC/E,IAAc,EAAY,SAAS,GAEnC,IAAW,QAAc;EAC7B,IAAM,IAAY,EAAE;AACpB,OAAK,IAAM,KAAO,EAChB,MAAK,IAAM,KAAM,EAAI,YAAY,EAAE,CAAE,GAAU,KAAK,EAAG;AAEzD,SAAO,EAAU,MAAM,GAAG,EAAE;IAC3B,CAAC,EAAY,CAAC;AAEjB,QACE,kBAAC,OAAD;EAAK,eAAY;EAAqB,WAAU;YAAhD;GACE,kBAAC,GAAD;IACE,aAAa,GAAQ,eAAe;IAC5B;IACR,YAAY,GAAQ;IACpB,eAAe;IACf,iBAAiB,MAA+B;AACzC,OAAa,EAAE,WAAW;MAAE,IAAI;MAAS,QAAQ;MAAQ,EAAE,CAAC,CAAC,YAAY,KAAA,EAAU;;IAG1F,sBAAsB,EAAe,oBAAoB;IACzD,CAAA;GAEF,kBAAC,GAAD;IACU;IACR,eAAe;IACf,gBAAgB,MAAO,EAAe,EAAG;IACzC,CAAA;GAED,CAAC,KAAe,CAAC,KAChB,kBAAC,GAAD,EAAoB,4BAA4B,EAAe,oBAAoB,EAAI,CAAA;GAGxF,KACC,kBAAA,GAAA,EAAA,UAAA;IACE,kBAAC,GAAD,EAA+B,WAAU,CAAA;IACzC,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,MAAD;MAAI,WAAU;gBAA+C;MAAoB,CAAA,EACjF,kBAAC,GAAD,EAAgC,aAAY,CAAA,CACxC;;IACN,kBAAC,OAAD;KACE,eAAY;KACZ,WAAU;eAFZ,CAIE,kBAAC,MAAD;MAAI,WAAU;gBAA+C;MAAgB,CAAA,EAC7E,kBAAC,MAAD;MAAI,WAAU;gBACX,EAAY,MAAM,GAAG,EAAE,CAAC,KAAK,MAC5B,kBAAC,MAAD;OAEE,WAAU;iBAFZ,CAIE,kBAAC,QAAD;QAAM,WAAU;kBAAhB;SACG,EAAE;SAAM;SAAI,EAAE;SACV;WACP,kBAAC,QAAD;QAAM,WAAU;kBAAhB,CACG,EAAE,cAAc,EAAE,QAClB,EAAE,aAAa,OAAO,EAAE,aAAa,KAAM,QAAQ,EAAE,CAAC,KAAK,GACvD;UACJ;SAVE,EAAE,GAUJ,CACL;MACC,CAAA,CACD;;IACL,EAAA,CAAA;GAGJ,KACC,kBAAC,GAAD;IACU;IACR,OAAO;IACP,eAAe;AAER,KADL,EAAe,KAAK,EACf,GAAe;;IAEtB,CAAA;GAEA"}