@burdenoff/microfe-vibecontrols 2026.521.3 → 2026.522.2

package/dist/components/assistant/AssistantMessageItem.js

@@ -2,83 +2,91 @@ import { useTr as e } from "../../shared/hooks/useTr.js";
 import { downloadAssistantArtifact as t } from "../../services/assistantApi.js";
 import { AssistantMarkdownRenderer as n } from "./AssistantMarkdownRenderer.js";
 import { useMemo as r, useState as i } from "react";
-import { Bot as a, Download as o, Loader2 as s, User as c } from "lucide-react";
-import { useGatewayClient as l } from "@burdenoff/fe-libs/shared/graphql";
-import { useAuthToken as u } from "@burdenoff/fe-libs/shared/providers/shell";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { Bot as a, User as o } from "lucide-react";
+import { useGatewayClient as s } from "@burdenoff/fe-libs/shared/graphql";
+import { useAuthToken as c } from "@burdenoff/fe-libs/shared/providers/shell";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { SaveToFilesButton as d } from "@burdenoff/fe-libs/storage";
 //#region src/components/assistant/AssistantMessageItem.tsx
-function p(e) {
+function f(e) {
 	return e.role === "assistant" ? e.metadata : void 0;
 }
-function m(e) {
+function p(e) {
 	return e?.artifacts ?? [];
 }
-function h(e) {
+function m(e) {
 	return window.atob(e);
 }
-function g(e, t, n) {
-	let r = h(e), i = new Uint8Array(r.length);
+function h(e, t, n) {
+	let r = m(e), i = new Uint8Array(r.length);
 	for (let e = 0; e < r.length; e += 1) i[e] = r.charCodeAt(e);
 	let a = new Blob([i], { type: n }), o = URL.createObjectURL(a), s = document.createElement("a");
 	s.href = o, s.download = t, document.body.appendChild(s), s.click(), document.body.removeChild(s), URL.revokeObjectURL(o);
 }
-var _ = ({ message: h, isStreaming: _ }) => {
-	let v = e(), y = l("workspace"), { getAccessToken: b, getWorkspaceToken: x } = u(), [S, C] = i(null), w = h.role === "user", T = r(() => p(h), [h]), E = r(() => m(T), [T]), D = async (e) => {
-		if (!T?.sandboxId || !T.sessionId) return;
+var g = ({ message: m, isStreaming: g }) => {
+	let _ = e(), v = s("workspace"), { getAccessToken: y, getWorkspaceToken: b } = c(), [x, S] = i(null), C = m.role === "user", w = r(() => f(m), [m]), T = r(() => p(w), [w]), E = async (e) => {
+		if (!w?.sandboxId || !w.sessionId) return;
 		let n = new URLSearchParams(window.location.search).get("workspace") ?? "";
 		if (n) {
-			C(e.path);
+			S(e.path);
 			try {
-				let r = await t(y, T.sandboxId, n, T.sessionId, e.path, {
-					accessToken: b(),
-					workspaceToken: x()
+				let r = await t(v, w.sandboxId, n, w.sessionId, e.path, {
+					accessToken: y(),
+					workspaceToken: b()
 				});
-				g(r.contentBase64, r.filename, r.mimeType);
+				h(r.contentBase64, r.filename, r.mimeType);
 			} finally {
-				C(null);
+				S(null);
 			}
 		}
 	};
-	return /* @__PURE__ */ f("div", {
-		className: `flex gap-2.5 ${w ? "flex-row-reverse" : "flex-row"}`,
-		children: [/* @__PURE__ */ d("div", {
-			className: `flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center mt-0.5 ${w ? "bg-action-primary-bg" : "bg-bg-elevated border border-border-default"}`,
-			children: w ? /* @__PURE__ */ d(c, { className: "w-3.5 h-3.5 text-action-primary-text" }) : /* @__PURE__ */ d(a, { className: "w-3.5 h-3.5 text-text-secondary" })
-		}), /* @__PURE__ */ f("div", {
-			className: `max-w-[85%] rounded-lg px-3 py-2 ${w ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-elevated border border-border-subtle"}`,
+	return /* @__PURE__ */ u("div", {
+		className: `flex gap-2.5 ${C ? "flex-row-reverse" : "flex-row"}`,
+		children: [/* @__PURE__ */ l("div", {
+			className: `flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center mt-0.5 ${C ? "bg-action-primary-bg" : "bg-bg-elevated border border-border-default"}`,
+			children: C ? /* @__PURE__ */ l(o, { className: "w-3.5 h-3.5 text-action-primary-text" }) : /* @__PURE__ */ l(a, { className: "w-3.5 h-3.5 text-text-secondary" })
+		}), /* @__PURE__ */ u("div", {
+			className: `max-w-[85%] rounded-lg px-3 py-2 ${C ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-elevated border border-border-subtle"}`,
 			children: [
-				w ? /* @__PURE__ */ d("p", {
+				C ? /* @__PURE__ */ l("p", {
 					className: "text-xs whitespace-pre-wrap leading-relaxed",
-					children: h.content
-				}) : /* @__PURE__ */ d(n, { content: h.content }),
-				E.length > 0 && !w && /* @__PURE__ */ f("div", {
+					children: m.content
+				}) : /* @__PURE__ */ l(n, { content: m.content }),
+				T.length > 0 && !C && w?.sandboxId && w.sessionId && /* @__PURE__ */ u("div", {
 					className: "mt-3 space-y-2 border-t border-border-subtle pt-2",
-					children: [/* @__PURE__ */ d("p", {
+					children: [/* @__PURE__ */ l("p", {
 						className: "text-[10px] font-medium uppercase tracking-wide text-text-muted",
-						children: v("vibecontrols.assistant.message.downloads", "Downloads")
-					}), /* @__PURE__ */ d("div", {
+						children: _("vibecontrols.assistant.message.downloads", "Downloads")
+					}), /* @__PURE__ */ l("div", {
 						className: "flex flex-wrap gap-2",
-						children: E.map((e) => {
-							let t = S === e.path;
-							return /* @__PURE__ */ f("button", {
-								onClick: () => void D(e),
-								disabled: t,
-								className: "inline-flex items-center gap-1.5 rounded-md border border-border-default bg-bg-sunken px-2 py-1 text-[11px] text-text-primary hover:bg-bg-surface disabled:opacity-60",
-								"data-testid": `assistant-artifact-${e.name}`,
-								children: [t ? /* @__PURE__ */ d(s, { className: "h-3 w-3 animate-spin" }) : /* @__PURE__ */ d(o, { className: "h-3 w-3" }), /* @__PURE__ */ f("span", { children: [e.name, e.type === "directory" ? ".tar.gz" : ""] })]
+						children: T.map((e) => {
+							let t = `${e.name}${e.type === "directory" ? ".tar.gz" : ""}`;
+							return /* @__PURE__ */ l(d, {
+								label: t,
+								disabled: x === e.path,
+								testId: `assistant-artifact-${e.name}`,
+								source: {
+									kind: "sandbox-artifact",
+									sandboxId: w.sandboxId,
+									sessionId: w.sessionId,
+									path: e.path,
+									filename: t
+								},
+								defaultFolderPath: "/Vibecontrols/AI Assistant/Artifacts",
+								onDownload: () => E(e)
 							}, e.path);
 						})
 					})]
 				}),
-				_ && !w && /* @__PURE__ */ d("span", { className: "inline-block w-1.5 h-3.5 bg-text-secondary animate-pulse ml-0.5 align-middle rounded-sm" }),
-				/* @__PURE__ */ f("div", {
-					className: `text-[10px] mt-1 ${w ? "text-action-primary-text/60" : "text-text-muted"}`,
-					children: [new Date(h.timestamp).toLocaleTimeString([], {
+				g && !C && /* @__PURE__ */ l("span", { className: "inline-block w-1.5 h-3.5 bg-text-secondary animate-pulse ml-0.5 align-middle rounded-sm" }),
+				/* @__PURE__ */ u("div", {
+					className: `text-[10px] mt-1 ${C ? "text-action-primary-text/60" : "text-text-muted"}`,
+					children: [new Date(m.timestamp).toLocaleTimeString([], {
 						hour: "2-digit",
 						minute: "2-digit"
-					}), h.tokens && !w && /* @__PURE__ */ f("span", {
+					}), m.tokens && !C && /* @__PURE__ */ u("span", {
 						className: "ml-2",
-						children: [h.tokens.input + h.tokens.output, " tokens"]
+						children: [m.tokens.input + m.tokens.output, " tokens"]
 					})]
 				})
 			]
@@ -86,6 +94,6 @@ var _ = ({ message: h, isStreaming: _ }) => {
 	});
 };
 //#endregion
-export { _ as AssistantMessageItem };
+export { g as AssistantMessageItem };
 
 //# sourceMappingURL=AssistantMessageItem.js.map

package/dist/components/assistant/AssistantMessageItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"AssistantMessageItem.js","names":[],"sources":["../../../src/components/assistant/AssistantMessageItem.tsx"],"sourcesContent":["import { useMemo, useState, type FC } from 'react';\nimport { Bot, Download, Loader2, User } from 'lucide-react';\nimport { useGatewayClient } from '@burdenoff/fe-libs/shared/graphql';\nimport { useAuthToken } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { AssistantMarkdownRenderer } from './AssistantMarkdownRenderer';\nimport { downloadAssistantArtifact } from '@/services/assistantApi';\nimport type { AssistantArtifact, AssistantMessageMetadata, Message } from '@/types/assistant';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface Props {\n  message: Message;\n  isStreaming?: boolean;\n}\n\nfunction getAssistantMetadata(message: Message): AssistantMessageMetadata | undefined {\n  return message.role === 'assistant' ? message.metadata : undefined;\n}\n\nfunction getArtifacts(metadata: AssistantMessageMetadata | undefined): AssistantArtifact[] {\n  return metadata?.artifacts ?? [];\n}\n\nfunction decodeBase64(base64: string): string {\n  return window.atob(base64);\n}\n\nfunction downloadBase64File(base64: string, filename: string, mimeType: string): void {\n  const binary = decodeBase64(base64);\n  const bytes = new Uint8Array(binary.length);\n\n  for (let index = 0; index < binary.length; index += 1) {\n    bytes[index] = binary.charCodeAt(index);\n  }\n\n  const blob = new Blob([bytes], { type: mimeType });\n  const url = URL.createObjectURL(blob);\n  const link = document.createElement('a');\n  link.href = url;\n  link.download = filename;\n  document.body.appendChild(link);\n  link.click();\n  document.body.removeChild(link);\n  URL.revokeObjectURL(url);\n}\n\nexport const AssistantMessageItem: FC<Props> = ({ message, isStreaming }) => {\n  const tr = useTr();\n  const apollo = useGatewayClient('workspace');\n  const { getAccessToken, getWorkspaceToken } = useAuthToken();\n  const [downloadingArtifactPath, setDownloadingArtifactPath] = useState<string | null>(null);\n  const isUser = message.role === 'user';\n  const metadata = useMemo(() => getAssistantMetadata(message), [message]);\n  const artifacts = useMemo(() => getArtifacts(metadata), [metadata]);\n\n  const handleArtifactDownload = async (artifact: AssistantArtifact) => {\n    if (!metadata?.sandboxId || !metadata.sessionId) return;\n\n    const workspaceId = new URLSearchParams(window.location.search).get('workspace') ?? '';\n    if (!workspaceId) return;\n\n    setDownloadingArtifactPath(artifact.path);\n\n    try {\n      const result = await downloadAssistantArtifact(\n        apollo,\n        metadata.sandboxId,\n        workspaceId,\n        metadata.sessionId,\n        artifact.path,\n        {\n          accessToken: getAccessToken(),\n          workspaceToken: getWorkspaceToken(),\n        }\n      );\n\n      downloadBase64File(result.contentBase64, result.filename, result.mimeType);\n    } finally {\n      setDownloadingArtifactPath(null);\n    }\n  };\n\n  return (\n    <div className={`flex gap-2.5 ${isUser ? 'flex-row-reverse' : 'flex-row'}`}>\n      <div\n        className={`flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center mt-0.5 ${\n          isUser ? 'bg-action-primary-bg' : 'bg-bg-elevated border border-border-default'\n        }`}\n      >\n        {isUser ? (\n          <User className=\"w-3.5 h-3.5 text-action-primary-text\" />\n        ) : (\n          <Bot className=\"w-3.5 h-3.5 text-text-secondary\" />\n        )}\n      </div>\n\n      <div\n        className={`max-w-[85%] rounded-lg px-3 py-2 ${\n          isUser\n            ? 'bg-action-primary-bg text-action-primary-text'\n            : 'bg-bg-elevated border border-border-subtle'\n        }`}\n      >\n        {isUser ? (\n          <p className=\"text-xs whitespace-pre-wrap leading-relaxed\">{message.content}</p>\n        ) : (\n          <AssistantMarkdownRenderer content={message.content} />\n        )}\n\n        {artifacts.length > 0 && !isUser && (\n          <div className=\"mt-3 space-y-2 border-t border-border-subtle pt-2\">\n            <p className=\"text-[10px] font-medium uppercase tracking-wide text-text-muted\">\n              {tr('vibecontrols.assistant.message.downloads', 'Downloads')}\n            </p>\n            <div className=\"flex flex-wrap gap-2\">\n              {artifacts.map((artifact) => {\n                const isDownloading = downloadingArtifactPath === artifact.path;\n                return (\n                  <button\n                    key={artifact.path}\n                    onClick={() => void handleArtifactDownload(artifact)}\n                    disabled={isDownloading}\n                    className=\"inline-flex items-center gap-1.5 rounded-md border border-border-default bg-bg-sunken px-2 py-1 text-[11px] text-text-primary hover:bg-bg-surface disabled:opacity-60\"\n                    data-testid={`assistant-artifact-${artifact.name}`}\n                  >\n                    {isDownloading ? (\n                      <Loader2 className=\"h-3 w-3 animate-spin\" />\n                    ) : (\n                      <Download className=\"h-3 w-3\" />\n                    )}\n                    <span>\n                      {artifact.name}\n                      {artifact.type === 'directory' ? '.tar.gz' : ''}\n                    </span>\n                  </button>\n                );\n              })}\n            </div>\n          </div>\n        )}\n\n        {isStreaming && !isUser && (\n          <span className=\"inline-block w-1.5 h-3.5 bg-text-secondary animate-pulse ml-0.5 align-middle rounded-sm\" />\n        )}\n\n        <div\n          className={`text-[10px] mt-1 ${\n            isUser ? 'text-action-primary-text/60' : 'text-text-muted'\n          }`}\n        >\n          {new Date(message.timestamp).toLocaleTimeString([], {\n            hour: '2-digit',\n            minute: '2-digit',\n          })}\n          {message.tokens && !isUser && (\n            <span className=\"ml-2\">{message.tokens.input + message.tokens.output} tokens</span>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"AssistantMessageItem.js","names":[],"sources":["../../../src/components/assistant/AssistantMessageItem.tsx"],"sourcesContent":["import { useMemo, useState, type FC } from 'react';\nimport { Bot, User } from 'lucide-react';\nimport { useGatewayClient } from '@burdenoff/fe-libs/shared/graphql';\nimport { useAuthToken } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { SaveToFilesButton } from '@burdenoff/fe-libs/storage';\nimport { AssistantMarkdownRenderer } from './AssistantMarkdownRenderer';\nimport { downloadAssistantArtifact } from '@/services/assistantApi';\nimport type { AssistantArtifact, AssistantMessageMetadata, Message } from '@/types/assistant';\nimport { useTr } from '../../shared/hooks/useTr';\n\ninterface Props {\n  message: Message;\n  isStreaming?: boolean;\n}\n\nfunction getAssistantMetadata(message: Message): AssistantMessageMetadata | undefined {\n  return message.role === 'assistant' ? message.metadata : undefined;\n}\n\nfunction getArtifacts(metadata: AssistantMessageMetadata | undefined): AssistantArtifact[] {\n  return metadata?.artifacts ?? [];\n}\n\nfunction decodeBase64(base64: string): string {\n  return window.atob(base64);\n}\n\nfunction downloadBase64File(base64: string, filename: string, mimeType: string): void {\n  const binary = decodeBase64(base64);\n  const bytes = new Uint8Array(binary.length);\n\n  for (let index = 0; index < binary.length; index += 1) {\n    bytes[index] = binary.charCodeAt(index);\n  }\n\n  const blob = new Blob([bytes], { type: mimeType });\n  const url = URL.createObjectURL(blob);\n  const link = document.createElement('a');\n  link.href = url;\n  link.download = filename;\n  document.body.appendChild(link);\n  link.click();\n  document.body.removeChild(link);\n  URL.revokeObjectURL(url);\n}\n\nexport const AssistantMessageItem: FC<Props> = ({ message, isStreaming }) => {\n  const tr = useTr();\n  const apollo = useGatewayClient('workspace');\n  const { getAccessToken, getWorkspaceToken } = useAuthToken();\n  const [downloadingArtifactPath, setDownloadingArtifactPath] = useState<string | null>(null);\n  const isUser = message.role === 'user';\n  const metadata = useMemo(() => getAssistantMetadata(message), [message]);\n  const artifacts = useMemo(() => getArtifacts(metadata), [metadata]);\n\n  const handleArtifactDownload = async (artifact: AssistantArtifact) => {\n    if (!metadata?.sandboxId || !metadata.sessionId) return;\n\n    const workspaceId = new URLSearchParams(window.location.search).get('workspace') ?? '';\n    if (!workspaceId) return;\n\n    setDownloadingArtifactPath(artifact.path);\n\n    try {\n      const result = await downloadAssistantArtifact(\n        apollo,\n        metadata.sandboxId,\n        workspaceId,\n        metadata.sessionId,\n        artifact.path,\n        {\n          accessToken: getAccessToken(),\n          workspaceToken: getWorkspaceToken(),\n        }\n      );\n\n      downloadBase64File(result.contentBase64, result.filename, result.mimeType);\n    } finally {\n      setDownloadingArtifactPath(null);\n    }\n  };\n\n  return (\n    <div className={`flex gap-2.5 ${isUser ? 'flex-row-reverse' : 'flex-row'}`}>\n      <div\n        className={`flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center mt-0.5 ${\n          isUser ? 'bg-action-primary-bg' : 'bg-bg-elevated border border-border-default'\n        }`}\n      >\n        {isUser ? (\n          <User className=\"w-3.5 h-3.5 text-action-primary-text\" />\n        ) : (\n          <Bot className=\"w-3.5 h-3.5 text-text-secondary\" />\n        )}\n      </div>\n\n      <div\n        className={`max-w-[85%] rounded-lg px-3 py-2 ${\n          isUser\n            ? 'bg-action-primary-bg text-action-primary-text'\n            : 'bg-bg-elevated border border-border-subtle'\n        }`}\n      >\n        {isUser ? (\n          <p className=\"text-xs whitespace-pre-wrap leading-relaxed\">{message.content}</p>\n        ) : (\n          <AssistantMarkdownRenderer content={message.content} />\n        )}\n\n        {artifacts.length > 0 && !isUser && metadata?.sandboxId && metadata.sessionId && (\n          <div className=\"mt-3 space-y-2 border-t border-border-subtle pt-2\">\n            <p className=\"text-[10px] font-medium uppercase tracking-wide text-text-muted\">\n              {tr('vibecontrols.assistant.message.downloads', 'Downloads')}\n            </p>\n            <div className=\"flex flex-wrap gap-2\">\n              {artifacts.map((artifact) => {\n                const displayName = `${artifact.name}${artifact.type === 'directory' ? '.tar.gz' : ''}`;\n                const isDownloading = downloadingArtifactPath === artifact.path;\n                return (\n                  <SaveToFilesButton\n                    key={artifact.path}\n                    label={displayName}\n                    disabled={isDownloading}\n                    testId={`assistant-artifact-${artifact.name}`}\n                    source={{\n                      kind: 'sandbox-artifact',\n                      sandboxId: metadata.sandboxId!,\n                      sessionId: metadata.sessionId!,\n                      path: artifact.path,\n                      filename: displayName,\n                    }}\n                    defaultFolderPath=\"/Vibecontrols/AI Assistant/Artifacts\"\n                    onDownload={() => handleArtifactDownload(artifact)}\n                  />\n                );\n              })}\n            </div>\n          </div>\n        )}\n\n        {isStreaming && !isUser && (\n          <span className=\"inline-block w-1.5 h-3.5 bg-text-secondary animate-pulse ml-0.5 align-middle rounded-sm\" />\n        )}\n\n        <div\n          className={`text-[10px] mt-1 ${\n            isUser ? 'text-action-primary-text/60' : 'text-text-muted'\n          }`}\n        >\n          {new Date(message.timestamp).toLocaleTimeString([], {\n            hour: '2-digit',\n            minute: '2-digit',\n          })}\n          {message.tokens && !isUser && (\n            <span className=\"ml-2\">{message.tokens.input + message.tokens.output} tokens</span>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/audit/AuditExportButton.js

@@ -2,30 +2,31 @@ import { useExportVibeAuditLogsMutation as e } from "../../generated/wspace-oper
 import { VibeAuditExportFormat as t } from "../../generated/wspace-types.js";
 import { useEffect as n, useRef as r, useState as i } from "react";
 import { useI18n as a } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { Download as o } from "lucide-react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Download as o, FolderInput as s } from "lucide-react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { SaveToFilesDialog as u } from "@burdenoff/fe-libs/storage";
 //#region src/components/audit/AuditExportButton.tsx
-function l({ filter: l }) {
-	let { t: u } = a(), d = r(null), [f, p] = i(!1), [m, { loading: h }] = e(), g = (e, t) => {
-		let n = u(e);
+function d({ filter: d }) {
+	let { t: f } = a(), p = r(null), [m, h] = i(!1), [g, _] = i(null), [v, { loading: y }] = e(), b = (e, t) => {
+		let n = f(e);
 		return n === e ? t : n;
 	};
 	n(() => {
-		if (!f) return;
+		if (!m) return;
 		let e = (e) => {
-			d.current?.contains(e.target) || p(!1);
+			p.current?.contains(e.target) || h(!1);
 		}, t = (e) => {
-			e.key === "Escape" && p(!1);
+			e.key === "Escape" && h(!1);
 		};
 		return window.addEventListener("mousedown", e), window.addEventListener("keydown", t), () => {
 			window.removeEventListener("mousedown", e), window.removeEventListener("keydown", t);
 		};
-	}, [f]);
-	let _ = async (e) => {
-		p(!1);
+	}, [m]);
+	let x = async (e) => {
+		h(!1);
 		try {
-			let t = (await m({ variables: { input: {
-				filter: l || {},
+			let t = (await v({ variables: { input: {
+				filter: d || {},
 				format: e
 			} } })).data?.exportVibeAuditLogs;
 			if (!t) return;
@@ -33,38 +34,83 @@ function l({ filter: l }) {
 			i.href = r, i.download = `vibe-audit-${(/* @__PURE__ */ new Date()).toISOString().slice(0, 10)}.${e.toLowerCase()}`, document.body.appendChild(i), i.click(), document.body.removeChild(i), URL.revokeObjectURL(r);
 		} catch {}
 	};
-	return /* @__PURE__ */ c("div", {
-		ref: d,
+	return /* @__PURE__ */ l("div", {
+		ref: p,
 		className: "relative",
-		children: [/* @__PURE__ */ c("button", {
-			type: "button",
-			"aria-haspopup": "menu",
-			"aria-expanded": f,
-			onClick: () => p((e) => !e),
-			disabled: h,
-			className: "inline-flex items-center gap-2 rounded-lg border border-border-primary px-3 py-2 text-sm transition-colors hover:bg-bg-secondary disabled:opacity-50",
-			children: [/* @__PURE__ */ s(o, { size: 14 }), h ? g("audit.exporting", "Exporting…") : g("audit.export", "Export")]
-		}), f ? /* @__PURE__ */ c("div", {
-			role: "menu",
-			"aria-label": g("audit.exportOptions", "Export options"),
-			className: "absolute right-0 top-full z-10 mt-1 min-w-[140px] rounded-lg border border-border-default bg-bg-surface py-1 shadow-lg",
-			children: [/* @__PURE__ */ s("button", {
+		children: [
+			/* @__PURE__ */ l("button", {
 				type: "button",
-				role: "menuitem",
-				onClick: () => _(t.Csv),
-				className: "w-full px-4 py-2 text-left text-sm transition-colors hover:bg-bg-secondary",
-				children: g("audit.exportCsv", "Export as CSV")
-			}), /* @__PURE__ */ s("button", {
-				type: "button",
-				role: "menuitem",
-				onClick: () => _(t.Json),
-				className: "w-full px-4 py-2 text-left text-sm transition-colors hover:bg-bg-secondary",
-				children: g("audit.exportJson", "Export as JSON")
-			})]
-		}) : null]
+				"aria-haspopup": "menu",
+				"aria-expanded": m,
+				onClick: () => h((e) => !e),
+				disabled: y,
+				className: "inline-flex items-center gap-2 rounded-lg border border-border-primary px-3 py-2 text-sm transition-colors hover:bg-bg-secondary disabled:opacity-50",
+				children: [/* @__PURE__ */ c(o, { size: 14 }), y ? b("audit.exporting", "Exporting…") : b("audit.export", "Export")]
+			}),
+			m ? /* @__PURE__ */ l("div", {
+				role: "menu",
+				"aria-label": b("audit.exportOptions", "Export options"),
+				className: "absolute right-0 top-full z-10 mt-1 min-w-[200px] rounded-lg border border-border-default bg-bg-surface py-1 shadow-lg",
+				children: [
+					/* @__PURE__ */ l("button", {
+						type: "button",
+						role: "menuitem",
+						onClick: () => x(t.Csv),
+						className: "flex w-full items-center gap-2 px-4 py-2 text-left text-sm transition-colors hover:bg-bg-secondary",
+						children: [/* @__PURE__ */ c(o, { size: 12 }), b("audit.exportCsv", "Download CSV")]
+					}),
+					/* @__PURE__ */ l("button", {
+						type: "button",
+						role: "menuitem",
+						onClick: () => x(t.Json),
+						className: "flex w-full items-center gap-2 px-4 py-2 text-left text-sm transition-colors hover:bg-bg-secondary",
+						children: [/* @__PURE__ */ c(o, { size: 12 }), b("audit.exportJson", "Download JSON")]
+					}),
+					/* @__PURE__ */ c("div", { className: "my-1 border-t border-border-subtle" }),
+					/* @__PURE__ */ l("button", {
+						type: "button",
+						role: "menuitem",
+						onClick: () => {
+							h(!1), _(t.Csv);
+						},
+						className: "flex w-full items-center gap-2 px-4 py-2 text-left text-sm transition-colors hover:bg-bg-secondary",
+						children: [/* @__PURE__ */ c(s, { size: 12 }), b("audit.saveCsvToFiles", "Save CSV to Files…")]
+					}),
+					/* @__PURE__ */ l("button", {
+						type: "button",
+						role: "menuitem",
+						onClick: () => {
+							h(!1), _(t.Json);
+						},
+						className: "flex w-full items-center gap-2 px-4 py-2 text-left text-sm transition-colors hover:bg-bg-secondary",
+						children: [/* @__PURE__ */ c(s, { size: 12 }), b("audit.saveJsonToFiles", "Save JSON to Files…")]
+					})
+				]
+			}) : null,
+			g && /* @__PURE__ */ c(u, {
+				open: !0,
+				onOpenChange: (e) => {
+					e || _(null);
+				},
+				defaultFolderPath: "/Vibecontrols/Audit Logs",
+				filename: `vibe-audit-${(/* @__PURE__ */ new Date()).toISOString().slice(0, 10)}.${g.toLowerCase()}`,
+				source: {
+					kind: "blob",
+					filename: `vibe-audit-${(/* @__PURE__ */ new Date()).toISOString().slice(0, 10)}.${g.toLowerCase()}`,
+					mimeType: g === t.Csv ? "text/csv" : "application/json",
+					getBlob: async () => {
+						let e = (await v({ variables: { input: {
+							filter: d || {},
+							format: g
+						} } })).data?.exportVibeAuditLogs?.data;
+						return e ? { blob: new Blob([e], { type: g === t.Csv ? "text/csv" : "application/json" }) } : null;
+					}
+				}
+			})
+		]
 	});
 }
 //#endregion
-export { l as AuditExportButton };
+export { d as AuditExportButton };
 
 //# sourceMappingURL=AuditExportButton.js.map

package/dist/components/audit/AuditExportButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"AuditExportButton.js","names":[],"sources":["../../../src/components/audit/AuditExportButton.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { Download } from 'lucide-react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useExportVibeAuditLogsMutation } from '@/generated/wspace-operations';\nimport { VibeAuditExportFormat, type VibeAuditLogFilterInput } from '@/generated/wspace-types';\n\ninterface AuditExportButtonProps {\n  filter?: VibeAuditLogFilterInput;\n}\n\nexport function AuditExportButton({ filter }: AuditExportButtonProps) {\n  const { t } = useI18n();\n  const menuRef = useRef<HTMLDivElement | null>(null);\n  const [showMenu, setShowMenu] = useState(false);\n  const [exportMutation, { loading }] = useExportVibeAuditLogsMutation();\n\n  const tr = (key: string, fallback: string) => {\n    const value = t(key);\n    return value === key ? fallback : value;\n  };\n\n  useEffect(() => {\n    if (!showMenu) return undefined;\n\n    const handlePointerDown = (event: MouseEvent) => {\n      if (!menuRef.current?.contains(event.target as Node)) {\n        setShowMenu(false);\n      }\n    };\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        setShowMenu(false);\n      }\n    };\n\n    window.addEventListener('mousedown', handlePointerDown);\n    window.addEventListener('keydown', handleKeyDown);\n    return () => {\n      window.removeEventListener('mousedown', handlePointerDown);\n      window.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [showMenu]);\n\n  const handleExport = async (format: VibeAuditExportFormat) => {\n    setShowMenu(false);\n    try {\n      const result = await exportMutation({\n        variables: {\n          input: { filter: filter || {}, format },\n        },\n      });\n\n      const exportData = result.data?.exportVibeAuditLogs;\n      if (!exportData) return;\n\n      const blob = new Blob([exportData.data], {\n        type: format === 'CSV' ? 'text/csv' : 'application/json',\n      });\n      const url = URL.createObjectURL(blob);\n      const anchor = document.createElement('a');\n      anchor.href = url;\n      anchor.download = `vibe-audit-${new Date().toISOString().slice(0, 10)}.${format.toLowerCase()}`;\n      document.body.appendChild(anchor);\n      anchor.click();\n      document.body.removeChild(anchor);\n      URL.revokeObjectURL(url);\n    } catch {\n      // Apollo error handling surfaces failures globally.\n    }\n  };\n\n  return (\n    <div ref={menuRef} className=\"relative\">\n      <button\n        type=\"button\"\n        aria-haspopup=\"menu\"\n        aria-expanded={showMenu}\n        onClick={() => setShowMenu((current) => !current)}\n        disabled={loading}\n        className=\"inline-flex items-center gap-2 rounded-lg border border-border-primary px-3 py-2 text-sm transition-colors hover:bg-bg-secondary disabled:opacity-50\"\n      >\n        <Download size={14} />\n        {loading ? tr('audit.exporting', 'Exporting…') : tr('audit.export', 'Export')}\n      </button>\n\n      {showMenu ? (\n        <div\n          role=\"menu\"\n          aria-label={tr('audit.exportOptions', 'Export options')}\n          className=\"absolute right-0 top-full z-10 mt-1 min-w-[140px] rounded-lg border border-border-default bg-bg-surface py-1 shadow-lg\"\n        >\n          <button\n            type=\"button\"\n            role=\"menuitem\"\n            onClick={() => handleExport(VibeAuditExportFormat.Csv)}\n            className=\"w-full px-4 py-2 text-left text-sm transition-colors hover:bg-bg-secondary\"\n          >\n            {tr('audit.exportCsv', 'Export as CSV')}\n          </button>\n          <button\n            type=\"button\"\n            role=\"menuitem\"\n            onClick={() => handleExport(VibeAuditExportFormat.Json)}\n            className=\"w-full px-4 py-2 text-left text-sm transition-colors hover:bg-bg-secondary\"\n          >\n            {tr('audit.exportJson', 'Export as JSON')}\n          </button>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAUA,SAAgB,EAAkB,EAAE,aAAkC;CACpE,IAAM,EAAE,SAAM,GAAS,EACjB,IAAU,EAA8B,KAAK,EAC7C,CAAC,GAAU,KAAe,EAAS,GAAM,EACzC,CAAC,GAAgB,EAAE,gBAAa,GAAgC,EAEhE,KAAM,GAAa,MAAqB;EAC5C,IAAM,IAAQ,EAAE,EAAI;AACpB,SAAO,MAAU,IAAM,IAAW;;AAGpC,SAAgB;AACd,MAAI,CAAC,EAAU;EAEf,IAAM,KAAqB,MAAsB;AAC/C,GAAK,EAAQ,SAAS,SAAS,EAAM,OAAe,IAClD,EAAY,GAAM;KAIhB,KAAiB,MAAyB;AAC9C,GAAI,EAAM,QAAQ,YAChB,EAAY,GAAM;;AAMtB,SAFA,OAAO,iBAAiB,aAAa,EAAkB,EACvD,OAAO,iBAAiB,WAAW,EAAc,QACpC;AAEX,GADA,OAAO,oBAAoB,aAAa,EAAkB,EAC1D,OAAO,oBAAoB,WAAW,EAAc;;IAErD,CAAC,EAAS,CAAC;CAEd,IAAM,IAAe,OAAO,MAAkC;AAC5D,IAAY,GAAM;AAClB,MAAI;GAOF,IAAM,KANS,MAAM,EAAe,EAClC,WAAW,EACT,OAAO;IAAE,QAAQ,KAAU,EAAE;IAAE;IAAQ,EACxC,EACF,CAAC,EAEwB,MAAM;AAChC,OAAI,CAAC,EAAY;GAEjB,IAAM,IAAO,IAAI,KAAK,CAAC,EAAW,KAAK,EAAE,EACvC,MAAM,MAAW,QAAQ,aAAa,oBACvC,CAAC,EACI,IAAM,IAAI,gBAAgB,EAAK,EAC/B,IAAS,SAAS,cAAc,IAAI;AAM1C,GALA,EAAO,OAAO,GACd,EAAO,WAAW,+BAAc,IAAI,MAAM,EAAC,aAAa,CAAC,MAAM,GAAG,GAAG,CAAC,GAAG,EAAO,aAAa,IAC7F,SAAS,KAAK,YAAY,EAAO,EACjC,EAAO,OAAO,EACd,SAAS,KAAK,YAAY,EAAO,EACjC,IAAI,gBAAgB,EAAI;UAClB;;AAKV,QACE,kBAAC,OAAD;EAAK,KAAK;EAAS,WAAU;YAA7B,CACE,kBAAC,UAAD;GACE,MAAK;GACL,iBAAc;GACd,iBAAe;GACf,eAAe,GAAa,MAAY,CAAC,EAAQ;GACjD,UAAU;GACV,WAAU;aANZ,CAQE,kBAAC,GAAD,EAAU,MAAM,IAAM,CAAA,EACrB,IAAU,EAAG,mBAAmB,aAAa,GAAG,EAAG,gBAAgB,SAAS,CACtE;MAER,IACC,kBAAC,OAAD;GACE,MAAK;GACL,cAAY,EAAG,uBAAuB,iBAAiB;GACvD,WAAU;aAHZ,CAKE,kBAAC,UAAD;IACE,MAAK;IACL,MAAK;IACL,eAAe,EAAa,EAAsB,IAAI;IACtD,WAAU;cAET,EAAG,mBAAmB,gBAAgB;IAChC,CAAA,EACT,kBAAC,UAAD;IACE,MAAK;IACL,MAAK;IACL,eAAe,EAAa,EAAsB,KAAK;IACvD,WAAU;cAET,EAAG,oBAAoB,iBAAiB;IAClC,CAAA,CACL;OACJ,KACA"}
+{"version":3,"file":"AuditExportButton.js","names":[],"sources":["../../../src/components/audit/AuditExportButton.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { Download, FolderInput } from 'lucide-react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { SaveToFilesDialog } from '@burdenoff/fe-libs/storage';\nimport { useExportVibeAuditLogsMutation } from '@/generated/wspace-operations';\nimport { VibeAuditExportFormat, type VibeAuditLogFilterInput } from '@/generated/wspace-types';\n\ninterface AuditExportButtonProps {\n  filter?: VibeAuditLogFilterInput;\n}\n\nexport function AuditExportButton({ filter }: AuditExportButtonProps) {\n  const { t } = useI18n();\n  const menuRef = useRef<HTMLDivElement | null>(null);\n  const [showMenu, setShowMenu] = useState(false);\n  const [saveFormat, setSaveFormat] = useState<VibeAuditExportFormat | null>(null);\n  const [exportMutation, { loading }] = useExportVibeAuditLogsMutation();\n\n  const tr = (key: string, fallback: string) => {\n    const value = t(key);\n    return value === key ? fallback : value;\n  };\n\n  useEffect(() => {\n    if (!showMenu) return undefined;\n\n    const handlePointerDown = (event: MouseEvent) => {\n      if (!menuRef.current?.contains(event.target as Node)) {\n        setShowMenu(false);\n      }\n    };\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        setShowMenu(false);\n      }\n    };\n\n    window.addEventListener('mousedown', handlePointerDown);\n    window.addEventListener('keydown', handleKeyDown);\n    return () => {\n      window.removeEventListener('mousedown', handlePointerDown);\n      window.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [showMenu]);\n\n  const handleExport = async (format: VibeAuditExportFormat) => {\n    setShowMenu(false);\n    try {\n      const result = await exportMutation({\n        variables: {\n          input: { filter: filter || {}, format },\n        },\n      });\n\n      const exportData = result.data?.exportVibeAuditLogs;\n      if (!exportData) return;\n\n      const blob = new Blob([exportData.data], {\n        type: format === 'CSV' ? 'text/csv' : 'application/json',\n      });\n      const url = URL.createObjectURL(blob);\n      const anchor = document.createElement('a');\n      anchor.href = url;\n      anchor.download = `vibe-audit-${new Date().toISOString().slice(0, 10)}.${format.toLowerCase()}`;\n      document.body.appendChild(anchor);\n      anchor.click();\n      document.body.removeChild(anchor);\n      URL.revokeObjectURL(url);\n    } catch {\n      // Apollo error handling surfaces failures globally.\n    }\n  };\n\n  return (\n    <div ref={menuRef} className=\"relative\">\n      <button\n        type=\"button\"\n        aria-haspopup=\"menu\"\n        aria-expanded={showMenu}\n        onClick={() => setShowMenu((current) => !current)}\n        disabled={loading}\n        className=\"inline-flex items-center gap-2 rounded-lg border border-border-primary px-3 py-2 text-sm transition-colors hover:bg-bg-secondary disabled:opacity-50\"\n      >\n        <Download size={14} />\n        {loading ? tr('audit.exporting', 'Exporting…') : tr('audit.export', 'Export')}\n      </button>\n\n      {showMenu ? (\n        <div\n          role=\"menu\"\n          aria-label={tr('audit.exportOptions', 'Export options')}\n          className=\"absolute right-0 top-full z-10 mt-1 min-w-[200px] rounded-lg border border-border-default bg-bg-surface py-1 shadow-lg\"\n        >\n          <button\n            type=\"button\"\n            role=\"menuitem\"\n            onClick={() => handleExport(VibeAuditExportFormat.Csv)}\n            className=\"flex w-full items-center gap-2 px-4 py-2 text-left text-sm transition-colors hover:bg-bg-secondary\"\n          >\n            <Download size={12} />\n            {tr('audit.exportCsv', 'Download CSV')}\n          </button>\n          <button\n            type=\"button\"\n            role=\"menuitem\"\n            onClick={() => handleExport(VibeAuditExportFormat.Json)}\n            className=\"flex w-full items-center gap-2 px-4 py-2 text-left text-sm transition-colors hover:bg-bg-secondary\"\n          >\n            <Download size={12} />\n            {tr('audit.exportJson', 'Download JSON')}\n          </button>\n          <div className=\"my-1 border-t border-border-subtle\" />\n          <button\n            type=\"button\"\n            role=\"menuitem\"\n            onClick={() => {\n              setShowMenu(false);\n              setSaveFormat(VibeAuditExportFormat.Csv);\n            }}\n            className=\"flex w-full items-center gap-2 px-4 py-2 text-left text-sm transition-colors hover:bg-bg-secondary\"\n          >\n            <FolderInput size={12} />\n            {tr('audit.saveCsvToFiles', 'Save CSV to Files…')}\n          </button>\n          <button\n            type=\"button\"\n            role=\"menuitem\"\n            onClick={() => {\n              setShowMenu(false);\n              setSaveFormat(VibeAuditExportFormat.Json);\n            }}\n            className=\"flex w-full items-center gap-2 px-4 py-2 text-left text-sm transition-colors hover:bg-bg-secondary\"\n          >\n            <FolderInput size={12} />\n            {tr('audit.saveJsonToFiles', 'Save JSON to Files…')}\n          </button>\n        </div>\n      ) : null}\n\n      {saveFormat && (\n        <SaveToFilesDialog\n          open\n          onOpenChange={(open: boolean) => {\n            if (!open) setSaveFormat(null);\n          }}\n          defaultFolderPath=\"/Vibecontrols/Audit Logs\"\n          filename={`vibe-audit-${new Date().toISOString().slice(0, 10)}.${saveFormat.toLowerCase()}`}\n          source={{\n            kind: 'blob',\n            filename: `vibe-audit-${new Date().toISOString().slice(0, 10)}.${saveFormat.toLowerCase()}`,\n            mimeType: saveFormat === VibeAuditExportFormat.Csv ? 'text/csv' : 'application/json',\n            getBlob: async () => {\n              const result = await exportMutation({\n                variables: { input: { filter: filter || {}, format: saveFormat } },\n              });\n              const data = result.data?.exportVibeAuditLogs?.data;\n              if (!data) return null;\n              return {\n                blob: new Blob([data], {\n                  type: saveFormat === VibeAuditExportFormat.Csv ? 'text/csv' : 'application/json',\n                }),\n              };\n            },\n          }}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/gitops/CIDurationChart.js

@@ -1,9 +1,9 @@
 import { useTr as e } from "../../shared/hooks/useTr.js";
-import { formatDuration as t } from "../../utils/relativeTime.js";
-import { Tooltip as n } from "../../node_modules/recharts/es6/component/Tooltip.js";
-import { ResponsiveContainer as r } from "../../node_modules/recharts/es6/component/ResponsiveContainer.js";
-import { Area as i } from "../../node_modules/recharts/es6/cartesian/Area.js";
-import { AreaChart as a } from "../../node_modules/recharts/es6/chart/AreaChart.js";
+import { Tooltip as t } from "../../node_modules/recharts/es6/component/Tooltip.js";
+import { ResponsiveContainer as n } from "../../node_modules/recharts/es6/component/ResponsiveContainer.js";
+import { Area as r } from "../../node_modules/recharts/es6/cartesian/Area.js";
+import { AreaChart as i } from "../../node_modules/recharts/es6/chart/AreaChart.js";
+import { formatDuration as a } from "../../utils/relativeTime.js";
 import { useMemo as o } from "react";
 import { Timer as s } from "lucide-react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
@@ -35,7 +35,7 @@ var u = "var(--color-text-link)", d = ({ averageDuration: d }) => {
 				className: "mb-3",
 				children: [/* @__PURE__ */ c("p", {
 					className: "text-3xl font-bold text-text-primary",
-					children: t(d)
+					children: a(d)
 				}), /* @__PURE__ */ c("p", {
 					className: "text-xs text-text-secondary mt-0.5",
 					children: f("vibecontrols.gitops.ciTab.perPipelineRun", "per pipeline run")
@@ -43,10 +43,10 @@ var u = "var(--color-text-link)", d = ({ averageDuration: d }) => {
 			}),
 			/* @__PURE__ */ c("div", {
 				className: "h-16",
-				children: /* @__PURE__ */ c(r, {
+				children: /* @__PURE__ */ c(n, {
 					width: "100%",
 					height: "100%",
-					children: /* @__PURE__ */ l(a, {
+					children: /* @__PURE__ */ l(i, {
 						data: p,
 						margin: {
 							top: 0,
@@ -71,17 +71,17 @@ var u = "var(--color-text-link)", d = ({ averageDuration: d }) => {
 									stopOpacity: 0
 								})]
 							}) }),
-							/* @__PURE__ */ c(n, {
+							/* @__PURE__ */ c(t, {
 								contentStyle: {
 									background: "var(--color-bg-surface)",
 									border: "1px solid var(--color-border-default)",
 									borderRadius: "6px",
 									fontSize: "11px"
 								},
-								formatter: (e) => [t(Math.round(e)), "Duration"],
+								formatter: (e) => [a(Math.round(e)), "Duration"],
 								labelFormatter: () => ""
 							}),
-							/* @__PURE__ */ c(i, {
+							/* @__PURE__ */ c(r, {
 								type: "monotone",
 								dataKey: "v",
 								stroke: u,

package/dist/components/security/SecurityEmptyState.js

@@ -0,0 +1,33 @@
+import "react";
+import { Shield as e } from "lucide-react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/security/SecurityEmptyState.tsx
+function r({ onConfigureProviders: r }) {
+	return /* @__PURE__ */ n("div", {
+		"data-testid": "security-empty-state",
+		className: "flex flex-col items-center justify-center gap-3 p-8 rounded-md border border-dashed border-border-default bg-bg-sunken text-center",
+		children: [
+			/* @__PURE__ */ t(e, {
+				className: "h-8 w-8 text-text-tertiary",
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ n("div", { children: [/* @__PURE__ */ t("h3", {
+				className: "text-sm font-semibold text-text-primary",
+				children: "No scans yet"
+			}), /* @__PURE__ */ t("p", {
+				className: "text-xs text-text-secondary mt-1",
+				children: "Configure a security provider per stage to begin orchestrating scans."
+			})] }),
+			/* @__PURE__ */ t("button", {
+				type: "button",
+				onClick: r,
+				className: "px-3 py-1.5 rounded-md bg-action-primary-bg text-action-primary-text text-xs font-medium",
+				children: "Configure providers"
+			})
+		]
+	});
+}
+//#endregion
+export { r as SecurityEmptyState };
+
+//# sourceMappingURL=SecurityEmptyState.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SecurityEmptyState.js","names":[],"sources":["../../../src/components/security/SecurityEmptyState.tsx"],"sourcesContent":["import React from 'react';\nimport { Shield } from 'lucide-react';\n\ninterface Props {\n  onConfigureProviders: () => void;\n}\n\nexport function SecurityEmptyState({ onConfigureProviders }: Props): React.ReactElement {\n  return (\n    <div\n      data-testid=\"security-empty-state\"\n      className=\"flex flex-col items-center justify-center gap-3 p-8 rounded-md border border-dashed border-border-default bg-bg-sunken text-center\"\n    >\n      <Shield className=\"h-8 w-8 text-text-tertiary\" aria-hidden=\"true\" />\n      <div>\n        <h3 className=\"text-sm font-semibold text-text-primary\">No scans yet</h3>\n        <p className=\"text-xs text-text-secondary mt-1\">\n          Configure a security provider per stage to begin orchestrating scans.\n        </p>\n      </div>\n      <button\n        type=\"button\"\n        onClick={onConfigureProviders}\n        className=\"px-3 py-1.5 rounded-md bg-action-primary-bg text-action-primary-text text-xs font-medium\"\n      >\n        Configure providers\n      </button>\n    </div>\n  );\n}\n"],"mappings":";;;;AAOA,SAAgB,EAAmB,EAAE,2BAAmD;AACtF,QACE,kBAAC,OAAD;EACE,eAAY;EACZ,WAAU;YAFZ;GAIE,kBAAC,GAAD;IAAQ,WAAU;IAA6B,eAAY;IAAS,CAAA;GACpE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;IAAI,WAAU;cAA0C;IAAiB,CAAA,EACzE,kBAAC,KAAD;IAAG,WAAU;cAAmC;IAE5C,CAAA,CACA,EAAA,CAAA;GACN,kBAAC,UAAD;IACE,MAAK;IACL,SAAS;IACT,WAAU;cACX;IAEQ,CAAA;GACL"}

package/dist/components/security/SecurityEvidenceList.js

@@ -0,0 +1,42 @@
+import "react";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/components/security/SecurityEvidenceList.tsx
+var n = {
+	SARIF: "SARIF report",
+	SBOM_CYCLONEDX: "CycloneDX SBOM",
+	SBOM_SPDX: "SPDX SBOM",
+	GRYPE_JSON: "Grype scan JSON",
+	COSIGN_BUNDLE: "Cosign bundle",
+	PROVENANCE: "SLSA provenance",
+	OPA_DECISION: "OPA decision"
+};
+function r({ evidence: r }) {
+	return r.length === 0 ? /* @__PURE__ */ e("p", {
+		className: "text-xs text-text-secondary",
+		children: "No evidence artifacts yet."
+	}) : /* @__PURE__ */ e("div", {
+		"data-testid": "security-evidence-list",
+		className: "space-y-1",
+		children: r.map((r) => /* @__PURE__ */ t("a", {
+			href: r.downloadUrl ?? "#",
+			className: "block px-3 py-2 rounded-md border border-border-subtle hover:border-border-default hover:bg-bg-sunken text-sm text-action-primary-bg hover:underline",
+			children: [/* @__PURE__ */ t("div", {
+				className: "flex items-center justify-between gap-2",
+				children: [/* @__PURE__ */ e("span", { children: n[r.type] ?? r.type }), /* @__PURE__ */ e("span", {
+					className: "text-xs text-text-tertiary",
+					children: i(r.sizeBytes)
+				})]
+			}), /* @__PURE__ */ t("div", {
+				className: "text-xs text-text-tertiary font-mono truncate",
+				children: [r.sha256.slice(0, 16), "…"]
+			})]
+		}, r.id))
+	});
+}
+function i(e) {
+	return e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(1)} KB` : `${(e / 1024 / 1024).toFixed(1)} MB`;
+}
+//#endregion
+export { r as SecurityEvidenceList };
+
+//# sourceMappingURL=SecurityEvidenceList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SecurityEvidenceList.js","names":[],"sources":["../../../src/components/security/SecurityEvidenceList.tsx"],"sourcesContent":["import React from 'react';\nimport type { SecurityEvidenceRow } from './types';\n\ninterface Props {\n  evidence: SecurityEvidenceRow[];\n}\n\nconst TYPE_LABEL: Record<string, string> = {\n  SARIF: 'SARIF report',\n  SBOM_CYCLONEDX: 'CycloneDX SBOM',\n  SBOM_SPDX: 'SPDX SBOM',\n  GRYPE_JSON: 'Grype scan JSON',\n  COSIGN_BUNDLE: 'Cosign bundle',\n  PROVENANCE: 'SLSA provenance',\n  OPA_DECISION: 'OPA decision',\n};\n\nexport function SecurityEvidenceList({ evidence }: Props): React.ReactElement {\n  if (evidence.length === 0) {\n    return <p className=\"text-xs text-text-secondary\">No evidence artifacts yet.</p>;\n  }\n  return (\n    <div data-testid=\"security-evidence-list\" className=\"space-y-1\">\n      {evidence.map((e) => (\n        <a\n          key={e.id}\n          href={e.downloadUrl ?? '#'}\n          className=\"block px-3 py-2 rounded-md border border-border-subtle hover:border-border-default hover:bg-bg-sunken text-sm text-action-primary-bg hover:underline\"\n        >\n          <div className=\"flex items-center justify-between gap-2\">\n            <span>{TYPE_LABEL[e.type] ?? e.type}</span>\n            <span className=\"text-xs text-text-tertiary\">{formatBytes(e.sizeBytes)}</span>\n          </div>\n          <div className=\"text-xs text-text-tertiary font-mono truncate\">\n            {e.sha256.slice(0, 16)}…\n          </div>\n        </a>\n      ))}\n    </div>\n  );\n}\n\nfunction formatBytes(b: number): string {\n  if (b < 1024) return `${b} B`;\n  if (b < 1024 * 1024) return `${(b / 1024).toFixed(1)} KB`;\n  return `${(b / 1024 / 1024).toFixed(1)} MB`;\n}\n"],"mappings":";;;AAOA,IAAM,IAAqC;CACzC,OAAO;CACP,gBAAgB;CAChB,WAAW;CACX,YAAY;CACZ,eAAe;CACf,YAAY;CACZ,cAAc;CACf;AAED,SAAgB,EAAqB,EAAE,eAAuC;AAI5E,QAHI,EAAS,WAAW,IACf,kBAAC,KAAD;EAAG,WAAU;YAA8B;EAA8B,CAAA,GAGhF,kBAAC,OAAD;EAAK,eAAY;EAAyB,WAAU;YACjD,EAAS,KAAK,MACb,kBAAC,KAAD;GAEE,MAAM,EAAE,eAAe;GACvB,WAAU;aAHZ,CAKE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,QAAD,EAAA,UAAO,EAAW,EAAE,SAAS,EAAE,MAAY,CAAA,EAC3C,kBAAC,QAAD;KAAM,WAAU;eAA8B,EAAY,EAAE,UAAU;KAAQ,CAAA,CAC1E;OACN,kBAAC,OAAD;IAAK,WAAU;cAAf,CACG,EAAE,OAAO,MAAM,GAAG,GAAG,EAAC,IACnB;MACJ;KAXG,EAAE,GAWL,CACJ;EACE,CAAA;;AAIV,SAAS,EAAY,GAAmB;AAGtC,QAFI,IAAI,OAAa,GAAG,EAAE,MACtB,IAAI,OAAO,OAAa,IAAI,IAAI,MAAM,QAAQ,EAAE,CAAC,OAC9C,IAAI,IAAI,OAAO,MAAM,QAAQ,EAAE,CAAC"}