@burdenoff/microfe-vibecontrols 2026.527.15 → 2026.528.1

package/dist/components/audit/AuditLogDetail.js

@@ -137,13 +137,26 @@ function h({ log: n, onClose: i }) {
 			className: "relative flex h-full w-full max-w-[480px] flex-col border-l border-border-default bg-bg-surface shadow-xl",
 			children: [/* @__PURE__ */ d("div", {
 				className: "flex items-center justify-between px-4 py-3 border-b border-border-default",
-				children: [/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("h3", {
-					className: "text-sm font-semibold",
-					children: "Audit Log Detail"
-				}), /* @__PURE__ */ u("span", {
-					className: "text-xs text-text-secondary font-mono",
-					children: n.id
-				})] }), /* @__PURE__ */ u("button", {
+				children: [/* @__PURE__ */ d("div", { children: [
+					/* @__PURE__ */ u("h3", {
+						className: "text-sm font-semibold",
+						children: n.action.replace(/_/g, " ")
+					}),
+					/* @__PURE__ */ d("p", {
+						className: "text-xs text-text-secondary",
+						children: [n.resourceType.replace(/_/g, " "), n.resourceName ? ` · ${n.resourceName}` : ""]
+					}),
+					/* @__PURE__ */ d("details", {
+						className: "mt-1",
+						children: [/* @__PURE__ */ u("summary", {
+							className: "cursor-pointer text-[10px] uppercase tracking-wider text-text-secondary hover:text-text-primary",
+							children: "Event ID"
+						}), /* @__PURE__ */ u("span", {
+							className: "mt-1 block break-all font-mono text-[11px] text-text-secondary",
+							children: n.id
+						})]
+					})
+				] }), /* @__PURE__ */ u("button", {
 					type: "button",
 					"aria-label": o("audit.closeDetail", "Close audit log detail"),
 					onClick: i,
@@ -201,17 +214,28 @@ function h({ log: n, onClose: i }) {
 									children: n.description || "-"
 								})]
 							}),
-							/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("span", {
-								className: "text-text-secondary text-xs",
-								children: "Actor"
-							}), /* @__PURE__ */ u("div", {
-								className: "font-mono text-xs",
-								children: n.actorId
-							})] }),
-							/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("span", {
-								className: "text-text-secondary text-xs",
-								children: "Actor Type"
-							}), /* @__PURE__ */ u("div", { children: n.actorType || "-" })] }),
+							/* @__PURE__ */ d("div", {
+								className: "col-span-2",
+								children: [/* @__PURE__ */ u("span", {
+									className: "text-text-secondary text-xs",
+									children: "Actor"
+								}), /* @__PURE__ */ d("div", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ u("span", {
+										className: "capitalize",
+										children: (n.actorType || "unknown").toLowerCase().replace(/_/g, " ")
+									}), /* @__PURE__ */ d("details", {
+										className: "text-xs text-text-secondary",
+										children: [/* @__PURE__ */ u("summary", {
+											className: "cursor-pointer hover:text-text-primary",
+											children: "ID"
+										}), /* @__PURE__ */ u("span", {
+											className: "ml-2 break-all font-mono text-[11px]",
+											children: n.actorId
+										})]
+									})]
+								})]
+							}),
 							/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("span", {
 								className: "text-text-secondary text-xs",
 								children: "Timestamp"

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

@@ -1 +1 @@
-{"version":3,"file":"AuditLogDetail.js","names":[],"sources":["../../../src/components/audit/AuditLogDetail.tsx"],"sourcesContent":["import { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useEffect, useState } from 'react';\nimport { X, ChevronDown, ChevronRight, Copy, Check, Terminal } from 'lucide-react';\nimport type { VibeAuditLogDetailFragment } from '@/generated/wspace-operations';\nimport { StatusBadge } from '@/components/shared';\n\ninterface AuditLogDetailProps {\n  log: VibeAuditLogDetailFragment;\n  onClose: () => void;\n}\n\nfunction JsonViewer({ data, label }: { data: unknown; label: string }) {\n  const [expanded, setExpanded] = useState(false);\n  if (!data) return null;\n\n  return (\n    <div className=\"border border-border-primary rounded-lg overflow-hidden\">\n      <button\n        type=\"button\"\n        onClick={() => setExpanded(!expanded)}\n        className=\"w-full flex items-center gap-2 px-3 py-2 text-sm font-medium bg-bg-secondary/50 hover:bg-bg-secondary\"\n      >\n        {expanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}\n        {label}\n      </button>\n      {expanded && (\n        <pre className=\"px-3 py-2 text-xs overflow-auto max-h-64 bg-bg-sunken\">\n          {JSON.stringify(data, null, 2)}\n        </pre>\n      )}\n    </div>\n  );\n}\n\nfunction CommandBlock({\n  command,\n  output,\n  exitCode,\n}: {\n  command?: string | null;\n  output?: string | null;\n  exitCode?: number | null;\n}) {\n  const [copied, setCopied] = useState(false);\n  if (!command && !output) return null;\n\n  const handleCopy = () => {\n    if (command) {\n      navigator.clipboard.writeText(command);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    }\n  };\n\n  return (\n    <div className=\"border border-border-primary rounded-lg overflow-hidden\">\n      <div className=\"flex items-center justify-between px-3 py-2 bg-bg-secondary/50\">\n        <span className=\"flex items-center gap-2 text-sm font-medium\">\n          <Terminal size={14} />\n          Command Execution\n          {exitCode !== null && exitCode !== undefined && (\n            <span\n              className={`px-1.5 py-0.5 rounded text-xs ${exitCode === 0 ? 'bg-status-success-bg text-status-success-text' : 'bg-status-error-bg text-status-error-text'}`}\n            >\n              exit {exitCode}\n            </span>\n          )}\n        </span>\n        {command && (\n          <button\n            type=\"button\"\n            onClick={handleCopy}\n            className=\"p-1 rounded hover:bg-bg-secondary text-text-secondary\"\n            title=\"Copy command\"\n          >\n            {copied ? <Check size={14} /> : <Copy size={14} />}\n          </button>\n        )}\n      </div>\n      {command && (\n        <div className=\"px-3 py-2 bg-bg-sunken text-text-secondary font-mono text-xs\">\n          <span className=\"text-status-success-text\">$</span> {command}\n        </div>\n      )}\n      {output && (\n        <pre className=\"px-3 py-2 text-xs bg-bg-sunken text-text-tertiary font-mono overflow-auto max-h-48\">\n          {output}\n        </pre>\n      )}\n    </div>\n  );\n}\n\nfunction ChangesetViewer({ changeset }: { changeset: Record<string, unknown> | null | undefined }) {\n  const [expanded, setExpanded] = useState(false);\n  if (!changeset || typeof changeset !== 'object') return null;\n\n  const changes = Object.entries(changeset as Record<string, { from: unknown; to: unknown }>);\n  if (changes.length === 0) return null;\n\n  return (\n    <div className=\"border border-border-primary rounded-lg overflow-hidden\">\n      <button\n        type=\"button\"\n        onClick={() => setExpanded(!expanded)}\n        className=\"w-full flex items-center gap-2 px-3 py-2 text-sm font-medium bg-bg-secondary/50 hover:bg-bg-secondary\"\n      >\n        {expanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}\n        Changes ({changes.length} field{changes.length !== 1 ? 's' : ''})\n      </button>\n      {expanded && (\n        <div className=\"px-3 py-2 space-y-2\">\n          {changes.map(([field, change]) => (\n            <div key={field} className=\"text-xs\">\n              <span className=\"font-medium text-text-primary\">{field}</span>\n              <div className=\"ml-4 mt-1 space-y-0.5\">\n                <div className=\"flex items-center gap-2\">\n                  <span className=\"text-status-error-text font-mono\">-</span>\n                  <span className=\"text-status-error-text\">\n                    {JSON.stringify((change as { from: unknown }).from)}\n                  </span>\n                </div>\n                <div className=\"flex items-center gap-2\">\n                  <span className=\"text-status-success-text font-mono\">+</span>\n                  <span className=\"text-status-success-text\">\n                    {JSON.stringify((change as { to: unknown }).to)}\n                  </span>\n                </div>\n              </div>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport function AuditLogDetail({ log, onClose }: AuditLogDetailProps) {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string) => {\n    const v = t(key);\n    return v === key ? fallback : v;\n  };\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        onClose();\n      }\n    };\n\n    window.addEventListener('keydown', handleKeyDown);\n    return () => window.removeEventListener('keydown', handleKeyDown);\n  }, [onClose]);\n\n  return (\n    <div className=\"fixed inset-0 z-[1000] flex justify-end bg-bg-overlay/40\">\n      <button\n        type=\"button\"\n        aria-label={tr('audit.closeDetailOverlay', 'Close audit log detail')}\n        className=\"absolute inset-0 cursor-default\"\n        onClick={onClose}\n      />\n      <aside className=\"relative flex h-full w-full max-w-[480px] flex-col border-l border-border-default bg-bg-surface shadow-xl\">\n        {/* Header */}\n        <div className=\"flex items-center justify-between px-4 py-3 border-b border-border-default\">\n          <div>\n            <h3 className=\"text-sm font-semibold\">Audit Log Detail</h3>\n            <span className=\"text-xs text-text-secondary font-mono\">{log.id}</span>\n          </div>\n          <button\n            type=\"button\"\n            aria-label={tr('audit.closeDetail', 'Close audit log detail')}\n            onClick={onClose}\n            className=\"flex size-10 items-center justify-center rounded hover:bg-bg-secondary\"\n          >\n            <X size={16} />\n          </button>\n        </div>\n\n        {/* Content */}\n        <div className=\"flex-1 overflow-y-auto p-4 space-y-4\">\n          {/* Summary */}\n          <div className=\"grid grid-cols-2 gap-3 text-sm\">\n            <div>\n              <span className=\"text-text-secondary text-xs\">Action</span>\n              <div className=\"font-medium\">{log.action}</div>\n            </div>\n            <div>\n              <span className=\"text-text-secondary text-xs\">Status</span>\n              <div>\n                <StatusBadge status={log.status} size=\"sm\" />\n              </div>\n            </div>\n            <div>\n              <span className=\"text-text-secondary text-xs\">Resource Type</span>\n              <div className=\"font-medium\">{log.resourceType.replace(/_/g, ' ')}</div>\n            </div>\n            <div>\n              <span className=\"text-text-secondary text-xs\">Resource ID</span>\n              <div className=\"font-mono text-xs truncate\">{log.resourceId || '-'}</div>\n            </div>\n            <div className=\"col-span-2\">\n              <span className=\"text-text-secondary text-xs\">Resource Name</span>\n              <div>{log.resourceName || '-'}</div>\n            </div>\n            <div className=\"col-span-2\">\n              <span className=\"text-text-secondary text-xs\">Description</span>\n              <div className=\"text-text-secondary\">{log.description || '-'}</div>\n            </div>\n            <div>\n              <span className=\"text-text-secondary text-xs\">Actor</span>\n              <div className=\"font-mono text-xs\">{log.actorId}</div>\n            </div>\n            <div>\n              <span className=\"text-text-secondary text-xs\">Actor Type</span>\n              <div>{log.actorType || '-'}</div>\n            </div>\n            <div>\n              <span className=\"text-text-secondary text-xs\">Timestamp</span>\n              <div className=\"text-xs\">{new Date(log.createdAt).toLocaleString()}</div>\n            </div>\n            <div>\n              <span className=\"text-text-secondary text-xs\">IP Address</span>\n              <div className=\"font-mono text-xs\">{log.ipAddress || '-'}</div>\n            </div>\n            {log.expiresAt && (\n              <div className=\"col-span-2\">\n                <span className=\"text-text-secondary text-xs\">Expires At</span>\n                <div className=\"text-xs text-status-warning-text\">\n                  {new Date(log.expiresAt).toLocaleString()}\n                </div>\n              </div>\n            )}\n            {log.errorMessage && (\n              <div className=\"col-span-2\">\n                <span className=\"text-text-secondary text-xs\">Error</span>\n                <div className=\"text-status-error-text text-xs\">{log.errorMessage}</div>\n              </div>\n            )}\n            {log.deleteReason && (\n              <div className=\"col-span-2\">\n                <span className=\"text-text-secondary text-xs\">Delete Reason</span>\n                <div className=\"text-xs\">{log.deleteReason}</div>\n              </div>\n            )}\n          </div>\n\n          {/* Command execution */}\n          <CommandBlock command={log.command} output={log.output} exitCode={log.exitCode} />\n\n          {/* Changeset */}\n          <ChangesetViewer changeset={log.changeset as Record<string, unknown> | null} />\n\n          {/* State snapshots */}\n          <JsonViewer data={log.previousState} label=\"Previous State\" />\n          <JsonViewer data={log.newState} label=\"New State\" />\n          <JsonViewer data={log.metadata} label=\"Metadata\" />\n        </div>\n      </aside>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"AuditLogDetail.js","names":[],"sources":["../../../src/components/audit/AuditLogDetail.tsx"],"sourcesContent":["import { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useEffect, useState } from 'react';\nimport { X, ChevronDown, ChevronRight, Copy, Check, Terminal } from 'lucide-react';\nimport type { VibeAuditLogDetailFragment } from '@/generated/wspace-operations';\nimport { StatusBadge } from '@/components/shared';\n\ninterface AuditLogDetailProps {\n  log: VibeAuditLogDetailFragment;\n  onClose: () => void;\n}\n\nfunction JsonViewer({ data, label }: { data: unknown; label: string }) {\n  const [expanded, setExpanded] = useState(false);\n  if (!data) return null;\n\n  return (\n    <div className=\"border border-border-primary rounded-lg overflow-hidden\">\n      <button\n        type=\"button\"\n        onClick={() => setExpanded(!expanded)}\n        className=\"w-full flex items-center gap-2 px-3 py-2 text-sm font-medium bg-bg-secondary/50 hover:bg-bg-secondary\"\n      >\n        {expanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}\n        {label}\n      </button>\n      {expanded && (\n        <pre className=\"px-3 py-2 text-xs overflow-auto max-h-64 bg-bg-sunken\">\n          {JSON.stringify(data, null, 2)}\n        </pre>\n      )}\n    </div>\n  );\n}\n\nfunction CommandBlock({\n  command,\n  output,\n  exitCode,\n}: {\n  command?: string | null;\n  output?: string | null;\n  exitCode?: number | null;\n}) {\n  const [copied, setCopied] = useState(false);\n  if (!command && !output) return null;\n\n  const handleCopy = () => {\n    if (command) {\n      navigator.clipboard.writeText(command);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    }\n  };\n\n  return (\n    <div className=\"border border-border-primary rounded-lg overflow-hidden\">\n      <div className=\"flex items-center justify-between px-3 py-2 bg-bg-secondary/50\">\n        <span className=\"flex items-center gap-2 text-sm font-medium\">\n          <Terminal size={14} />\n          Command Execution\n          {exitCode !== null && exitCode !== undefined && (\n            <span\n              className={`px-1.5 py-0.5 rounded text-xs ${exitCode === 0 ? 'bg-status-success-bg text-status-success-text' : 'bg-status-error-bg text-status-error-text'}`}\n            >\n              exit {exitCode}\n            </span>\n          )}\n        </span>\n        {command && (\n          <button\n            type=\"button\"\n            onClick={handleCopy}\n            className=\"p-1 rounded hover:bg-bg-secondary text-text-secondary\"\n            title=\"Copy command\"\n          >\n            {copied ? <Check size={14} /> : <Copy size={14} />}\n          </button>\n        )}\n      </div>\n      {command && (\n        <div className=\"px-3 py-2 bg-bg-sunken text-text-secondary font-mono text-xs\">\n          <span className=\"text-status-success-text\">$</span> {command}\n        </div>\n      )}\n      {output && (\n        <pre className=\"px-3 py-2 text-xs bg-bg-sunken text-text-tertiary font-mono overflow-auto max-h-48\">\n          {output}\n        </pre>\n      )}\n    </div>\n  );\n}\n\nfunction ChangesetViewer({ changeset }: { changeset: Record<string, unknown> | null | undefined }) {\n  const [expanded, setExpanded] = useState(false);\n  if (!changeset || typeof changeset !== 'object') return null;\n\n  const changes = Object.entries(changeset as Record<string, { from: unknown; to: unknown }>);\n  if (changes.length === 0) return null;\n\n  return (\n    <div className=\"border border-border-primary rounded-lg overflow-hidden\">\n      <button\n        type=\"button\"\n        onClick={() => setExpanded(!expanded)}\n        className=\"w-full flex items-center gap-2 px-3 py-2 text-sm font-medium bg-bg-secondary/50 hover:bg-bg-secondary\"\n      >\n        {expanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}\n        Changes ({changes.length} field{changes.length !== 1 ? 's' : ''})\n      </button>\n      {expanded && (\n        <div className=\"px-3 py-2 space-y-2\">\n          {changes.map(([field, change]) => (\n            <div key={field} className=\"text-xs\">\n              <span className=\"font-medium text-text-primary\">{field}</span>\n              <div className=\"ml-4 mt-1 space-y-0.5\">\n                <div className=\"flex items-center gap-2\">\n                  <span className=\"text-status-error-text font-mono\">-</span>\n                  <span className=\"text-status-error-text\">\n                    {JSON.stringify((change as { from: unknown }).from)}\n                  </span>\n                </div>\n                <div className=\"flex items-center gap-2\">\n                  <span className=\"text-status-success-text font-mono\">+</span>\n                  <span className=\"text-status-success-text\">\n                    {JSON.stringify((change as { to: unknown }).to)}\n                  </span>\n                </div>\n              </div>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport function AuditLogDetail({ log, onClose }: AuditLogDetailProps) {\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string) => {\n    const v = t(key);\n    return v === key ? fallback : v;\n  };\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        onClose();\n      }\n    };\n\n    window.addEventListener('keydown', handleKeyDown);\n    return () => window.removeEventListener('keydown', handleKeyDown);\n  }, [onClose]);\n\n  return (\n    <div className=\"fixed inset-0 z-[1000] flex justify-end bg-bg-overlay/40\">\n      <button\n        type=\"button\"\n        aria-label={tr('audit.closeDetailOverlay', 'Close audit log detail')}\n        className=\"absolute inset-0 cursor-default\"\n        onClick={onClose}\n      />\n      <aside className=\"relative flex h-full w-full max-w-[480px] flex-col border-l border-border-default bg-bg-surface shadow-xl\">\n        {/* Header */}\n        <div className=\"flex items-center justify-between px-4 py-3 border-b border-border-default\">\n          <div>\n            <h3 className=\"text-sm font-semibold\">\n              {log.action.replace(/_/g, ' ')}\n            </h3>\n            <p className=\"text-xs text-text-secondary\">\n              {log.resourceType.replace(/_/g, ' ')}\n              {log.resourceName ? ` · ${log.resourceName}` : ''}\n            </p>\n            <details className=\"mt-1\">\n              <summary className=\"cursor-pointer text-[10px] uppercase tracking-wider text-text-secondary hover:text-text-primary\">\n                Event ID\n              </summary>\n              <span className=\"mt-1 block break-all font-mono text-[11px] text-text-secondary\">\n                {log.id}\n              </span>\n            </details>\n          </div>\n          <button\n            type=\"button\"\n            aria-label={tr('audit.closeDetail', 'Close audit log detail')}\n            onClick={onClose}\n            className=\"flex size-10 items-center justify-center rounded hover:bg-bg-secondary\"\n          >\n            <X size={16} />\n          </button>\n        </div>\n\n        {/* Content */}\n        <div className=\"flex-1 overflow-y-auto p-4 space-y-4\">\n          {/* Summary */}\n          <div className=\"grid grid-cols-2 gap-3 text-sm\">\n            <div>\n              <span className=\"text-text-secondary text-xs\">Action</span>\n              <div className=\"font-medium\">{log.action}</div>\n            </div>\n            <div>\n              <span className=\"text-text-secondary text-xs\">Status</span>\n              <div>\n                <StatusBadge status={log.status} size=\"sm\" />\n              </div>\n            </div>\n            <div>\n              <span className=\"text-text-secondary text-xs\">Resource Type</span>\n              <div className=\"font-medium\">{log.resourceType.replace(/_/g, ' ')}</div>\n            </div>\n            <div>\n              <span className=\"text-text-secondary text-xs\">Resource ID</span>\n              <div className=\"font-mono text-xs truncate\">{log.resourceId || '-'}</div>\n            </div>\n            <div className=\"col-span-2\">\n              <span className=\"text-text-secondary text-xs\">Resource Name</span>\n              <div>{log.resourceName || '-'}</div>\n            </div>\n            <div className=\"col-span-2\">\n              <span className=\"text-text-secondary text-xs\">Description</span>\n              <div className=\"text-text-secondary\">{log.description || '-'}</div>\n            </div>\n            <div className=\"col-span-2\">\n              <span className=\"text-text-secondary text-xs\">Actor</span>\n              <div className=\"flex items-center gap-2\">\n                <span className=\"capitalize\">\n                  {(log.actorType || 'unknown').toLowerCase().replace(/_/g, ' ')}\n                </span>\n                <details className=\"text-xs text-text-secondary\">\n                  <summary className=\"cursor-pointer hover:text-text-primary\">\n                    ID\n                  </summary>\n                  <span className=\"ml-2 break-all font-mono text-[11px]\">\n                    {log.actorId}\n                  </span>\n                </details>\n              </div>\n            </div>\n            <div>\n              <span className=\"text-text-secondary text-xs\">Timestamp</span>\n              <div className=\"text-xs\">{new Date(log.createdAt).toLocaleString()}</div>\n            </div>\n            <div>\n              <span className=\"text-text-secondary text-xs\">IP Address</span>\n              <div className=\"font-mono text-xs\">{log.ipAddress || '-'}</div>\n            </div>\n            {log.expiresAt && (\n              <div className=\"col-span-2\">\n                <span className=\"text-text-secondary text-xs\">Expires At</span>\n                <div className=\"text-xs text-status-warning-text\">\n                  {new Date(log.expiresAt).toLocaleString()}\n                </div>\n              </div>\n            )}\n            {log.errorMessage && (\n              <div className=\"col-span-2\">\n                <span className=\"text-text-secondary text-xs\">Error</span>\n                <div className=\"text-status-error-text text-xs\">{log.errorMessage}</div>\n              </div>\n            )}\n            {log.deleteReason && (\n              <div className=\"col-span-2\">\n                <span className=\"text-text-secondary text-xs\">Delete Reason</span>\n                <div className=\"text-xs\">{log.deleteReason}</div>\n              </div>\n            )}\n          </div>\n\n          {/* Command execution */}\n          <CommandBlock command={log.command} output={log.output} exitCode={log.exitCode} />\n\n          {/* Changeset */}\n          <ChangesetViewer changeset={log.changeset as Record<string, unknown> | null} />\n\n          {/* State snapshots */}\n          <JsonViewer data={log.previousState} label=\"Previous State\" />\n          <JsonViewer data={log.newState} label=\"New State\" />\n          <JsonViewer data={log.metadata} label=\"Metadata\" />\n        </div>\n      </aside>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAWA,SAAS,EAAW,EAAE,SAAM,YAA2C;CACrE,IAAM,CAAC,GAAU,KAAe,EAAS,GAAM;AAG/C,QAFK,IAGH,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,UAAD;GACE,MAAK;GACL,eAAe,EAAY,CAAC,EAAS;GACrC,WAAU;aAHZ,CAKc,EAAX,IAAY,IAA4B,GAA7B,EAAa,MAAM,IAAM,CAA6B,EACjE,EACM;MACR,KACC,kBAAC,OAAD;GAAK,WAAU;aACZ,KAAK,UAAU,GAAM,MAAM,EAAE;GAC1B,CAAA,CAEJ;MAjBU;;AAqBpB,SAAS,EAAa,EACpB,YACA,WACA,eAKC;CACD,IAAM,CAAC,GAAQ,KAAa,EAAS,GAAM;AAW3C,QAVI,CAAC,KAAW,CAAC,IAAe,OAW9B,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,QAAD;KAAM,WAAU;eAAhB;MACE,kBAAC,GAAD,EAAU,MAAM,IAAM,CAAA;;MAErB,KAAa,QACZ,kBAAC,QAAD;OACE,WAAW,iCAAiC,MAAa,IAAI,kDAAkD;iBADjH,CAEC,SACO,EACD;;MAEJ;QACN,KACC,kBAAC,UAAD;KACE,MAAK;KACL,eAzBe;AACvB,MAAI,MACF,UAAU,UAAU,UAAU,EAAQ,EACtC,EAAU,GAAK,EACf,iBAAiB,EAAU,GAAM,EAAE,IAAK;;KAsBlC,WAAU;KACV,OAAM;eAEI,EAAT,IAAU,IAAsB,GAAvB,EAAO,MAAM,IAAM,CAAqB;KAC3C,CAAA,CAEP;;GACL,KACC,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,QAAD;MAAM,WAAU;gBAA2B;MAAQ,CAAA;;KAAE;KACjD;;GAEP,KACC,kBAAC,OAAD;IAAK,WAAU;cACZ;IACG,CAAA;GAEJ;;;AAIV,SAAS,EAAgB,EAAE,gBAAwE;CACjG,IAAM,CAAC,GAAU,KAAe,EAAS,GAAM;AAC/C,KAAI,CAAC,KAAa,OAAO,KAAc,SAAU,QAAO;CAExD,IAAM,IAAU,OAAO,QAAQ,EAA4D;AAG3F,QAFI,EAAQ,WAAW,IAAU,OAG/B,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,UAAD;GACE,MAAK;GACL,eAAe,EAAY,CAAC,EAAS;GACrC,WAAU;aAHZ;IAKc,EAAX,IAAY,IAA4B,GAA7B,EAAa,MAAM,IAAM,CAA6B;IAAC;IACzD,EAAQ;IAAO;IAAO,EAAQ,WAAW,IAAU,KAAN;IAAS;IACzD;MACR,KACC,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAQ,KAAK,CAAC,GAAO,OACpB,kBAAC,OAAD;IAAiB,WAAU;cAA3B,CACE,kBAAC,QAAD;KAAM,WAAU;eAAiC;KAAa,CAAA,EAC9D,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,QAAD;OAAM,WAAU;iBAAmC;OAAQ,CAAA,EAC3D,kBAAC,QAAD;OAAM,WAAU;iBACb,KAAK,UAAW,EAA6B,KAAK;OAC9C,CAAA,CACH;SACN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,QAAD;OAAM,WAAU;iBAAqC;OAAQ,CAAA,EAC7D,kBAAC,QAAD;OAAM,WAAU;iBACb,KAAK,UAAW,EAA2B,GAAG;OAC1C,CAAA,CACH;QACF;OACF;MAhBI,EAgBJ,CACN;GACE,CAAA,CAEJ;;;AAIV,SAAgB,EAAe,EAAE,QAAK,cAAgC;CACpE,IAAM,EAAE,SAAM,GAAS,EACjB,KAAM,GAAa,MAAqB;EAC5C,IAAM,IAAI,EAAE,EAAI;AAChB,SAAO,MAAM,IAAM,IAAW;;AAchC,QAXA,QAAgB;EACd,IAAM,KAAiB,MAAyB;AAC9C,GAAI,EAAM,QAAQ,YAChB,GAAS;;AAKb,SADA,OAAO,iBAAiB,WAAW,EAAc,QACpC,OAAO,oBAAoB,WAAW,EAAc;IAChE,CAAC,EAAQ,CAAC,EAGX,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,UAAD;GACE,MAAK;GACL,cAAY,EAAG,4BAA4B,yBAAyB;GACpE,WAAU;GACV,SAAS;GACT,CAAA,EACF,kBAAC,SAAD;GAAO,WAAU;aAAjB,CAEE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD,EAAA,UAAA;KACE,kBAAC,MAAD;MAAI,WAAU;gBACX,EAAI,OAAO,QAAQ,MAAM,IAAI;MAC3B,CAAA;KACL,kBAAC,KAAD;MAAG,WAAU;gBAAb,CACG,EAAI,aAAa,QAAQ,MAAM,IAAI,EACnC,EAAI,eAAe,MAAM,EAAI,iBAAiB,GAC7C;;KACJ,kBAAC,WAAD;MAAS,WAAU;gBAAnB,CACE,kBAAC,WAAD;OAAS,WAAU;iBAAkG;OAE3G,CAAA,EACV,kBAAC,QAAD;OAAM,WAAU;iBACb,EAAI;OACA,CAAA,CACC;;KACN,EAAA,CAAA,EACN,kBAAC,UAAD;KACE,MAAK;KACL,cAAY,EAAG,qBAAqB,yBAAyB;KAC7D,SAAS;KACT,WAAU;eAEV,kBAAC,GAAD,EAAG,MAAM,IAAM,CAAA;KACR,CAAA,CACL;OAGN,kBAAC,OAAD;IAAK,WAAU;cAAf;KAEE,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,QAAD;QAAM,WAAU;kBAA8B;QAAa,CAAA,EAC3D,kBAAC,OAAD;QAAK,WAAU;kBAAe,EAAI;QAAa,CAAA,CAC3C,EAAA,CAAA;OACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,QAAD;QAAM,WAAU;kBAA8B;QAAa,CAAA,EAC3D,kBAAC,OAAD,EAAA,UACE,kBAAC,GAAD;QAAa,QAAQ,EAAI;QAAQ,MAAK;QAAO,CAAA,EACzC,CAAA,CACF,EAAA,CAAA;OACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,QAAD;QAAM,WAAU;kBAA8B;QAAoB,CAAA,EAClE,kBAAC,OAAD;QAAK,WAAU;kBAAe,EAAI,aAAa,QAAQ,MAAM,IAAI;QAAO,CAAA,CACpE,EAAA,CAAA;OACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,QAAD;QAAM,WAAU;kBAA8B;QAAkB,CAAA,EAChE,kBAAC,OAAD;QAAK,WAAU;kBAA8B,EAAI,cAAc;QAAU,CAAA,CACrE,EAAA,CAAA;OACN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,QAAD;SAAM,WAAU;mBAA8B;SAAoB,CAAA,EAClE,kBAAC,OAAD,EAAA,UAAM,EAAI,gBAAgB,KAAU,CAAA,CAChC;;OACN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,QAAD;SAAM,WAAU;mBAA8B;SAAkB,CAAA,EAChE,kBAAC,OAAD;SAAK,WAAU;mBAAuB,EAAI,eAAe;SAAU,CAAA,CAC/D;;OACN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,QAAD;SAAM,WAAU;mBAA8B;SAAY,CAAA,EAC1D,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,QAAD;UAAM,WAAU;qBACZ,EAAI,aAAa,WAAW,aAAa,CAAC,QAAQ,MAAM,IAAI;UACzD,CAAA,EACP,kBAAC,WAAD;UAAS,WAAU;oBAAnB,CACE,kBAAC,WAAD;WAAS,WAAU;qBAAyC;WAElD,CAAA,EACV,kBAAC,QAAD;WAAM,WAAU;qBACb,EAAI;WACA,CAAA,CACC;YACN;WACF;;OACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,QAAD;QAAM,WAAU;kBAA8B;QAAgB,CAAA,EAC9D,kBAAC,OAAD;QAAK,WAAU;kBAAW,IAAI,KAAK,EAAI,UAAU,CAAC,gBAAgB;QAAO,CAAA,CACrE,EAAA,CAAA;OACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,QAAD;QAAM,WAAU;kBAA8B;QAAiB,CAAA,EAC/D,kBAAC,OAAD;QAAK,WAAU;kBAAqB,EAAI,aAAa;QAAU,CAAA,CAC3D,EAAA,CAAA;OACL,EAAI,aACH,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,QAAD;SAAM,WAAU;mBAA8B;SAAiB,CAAA,EAC/D,kBAAC,OAAD;SAAK,WAAU;mBACZ,IAAI,KAAK,EAAI,UAAU,CAAC,gBAAgB;SACrC,CAAA,CACF;;OAEP,EAAI,gBACH,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,QAAD;SAAM,WAAU;mBAA8B;SAAY,CAAA,EAC1D,kBAAC,OAAD;SAAK,WAAU;mBAAkC,EAAI;SAAmB,CAAA,CACpE;;OAEP,EAAI,gBACH,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,QAAD;SAAM,WAAU;mBAA8B;SAAoB,CAAA,EAClE,kBAAC,OAAD;SAAK,WAAU;mBAAW,EAAI;SAAmB,CAAA,CAC7C;;OAEJ;;KAGN,kBAAC,GAAD;MAAc,SAAS,EAAI;MAAS,QAAQ,EAAI;MAAQ,UAAU,EAAI;MAAY,CAAA;KAGlF,kBAAC,GAAD,EAAiB,WAAW,EAAI,WAA+C,CAAA;KAG/E,kBAAC,GAAD;MAAY,MAAM,EAAI;MAAe,OAAM;MAAmB,CAAA;KAC9D,kBAAC,GAAD;MAAY,MAAM,EAAI;MAAU,OAAM;MAAc,CAAA;KACpD,kBAAC,GAAD;MAAY,MAAM,EAAI;MAAU,OAAM;MAAa,CAAA;KAC/C;MACA;KACJ"}

package/dist/components/audit/AuditLogTable.js

@@ -79,9 +79,9 @@ function f({ items: f, total: p, hasMore: m, page: h, pageSize: g, onPageChange:
 						}),
 						/* @__PURE__ */ s("div", {
 							className: "mt-3 flex items-center justify-between gap-3",
-							children: [/* @__PURE__ */ o("p", {
-								className: "min-w-0 truncate font-mono text-xs text-text-secondary",
-								children: n.actorId
+							children: [/* @__PURE__ */ s("p", {
+								className: "min-w-0 truncate text-xs capitalize text-text-secondary",
+								children: [(n.actorType || "unknown").toLowerCase().replace(/_/g, " "), n.resourceName ? ` · ${n.resourceName}` : ""]
 							}), /* @__PURE__ */ o(e, {
 								status: n.status,
 								variant: c[n.status],
@@ -186,8 +186,9 @@ function f({ items: f, total: p, hasMore: m, page: h, pageSize: g, onPageChange:
 								children: n.resourceName || n.description || "-"
 							}),
 							/* @__PURE__ */ o("td", {
-								className: "max-w-[120px] truncate px-4 py-3 font-mono text-xs text-text-secondary",
-								children: n.actorId
+								className: "max-w-[140px] truncate px-4 py-3 text-xs capitalize text-text-secondary",
+								title: n.actorId,
+								children: (n.actorType || "unknown").toLowerCase().replace(/_/g, " ")
 							}),
 							/* @__PURE__ */ o("td", {
 								className: "px-4 py-3",

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

@@ -1 +1 @@
-{"version":3,"file":"AuditLogTable.js","names":[],"sources":["../../../src/components/audit/AuditLogTable.tsx"],"sourcesContent":["import { ChevronRight, Terminal, Trash2 } from 'lucide-react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { StatusBadge } from '@/components/shared';\nimport { SelectionCheckbox } from '@/components/shared/SelectionCheckbox';\nimport type { VibeAuditLogFieldsFragment } from '@/generated/wspace-operations';\n\ninterface AuditLogTableProps {\n  items: VibeAuditLogFieldsFragment[];\n  total: number;\n  hasMore: boolean;\n  page: number;\n  pageSize: number;\n  onPageChange: (page: number) => void;\n  onSelectLog: (id: string) => void;\n  onDeleteLog: (id: string) => void;\n  selectedLogId: string | null;\n  selectedLogIds: Set<string>;\n  allVisibleSelected: boolean;\n  partiallySelected: boolean;\n  onToggleLogSelection: (id: string, checked: boolean) => void;\n  onToggleAllVisible: (checked: boolean) => void;\n}\n\nconst statusVariantMap: Record<string, 'success' | 'error' | 'warning' | 'info'> = {\n  SUCCESS: 'success',\n  FAILURE: 'error',\n  DENIED: 'warning',\n  ERROR: 'error',\n};\n\nconst actionColors: Record<string, string> = {\n  CREATE: 'bg-status-success-bg text-status-success-text',\n  UPDATE: 'bg-status-info-bg text-status-info-text',\n  DELETE: 'bg-status-error-bg text-status-error-text',\n  EXECUTE: 'bg-action-primary-bg/15 text-action-primary-text',\n  EXPORT: 'bg-status-warning-bg text-status-warning-text',\n  SHARE: 'bg-status-success-bg text-status-success-text',\n  REVOKE: 'bg-status-warning-bg text-status-warning-text',\n  ARCHIVE: 'bg-bg-muted text-text-secondary',\n  RESTORE: 'bg-status-info-bg text-status-info-text',\n};\n\nfunction formatDate(dateString: string): string {\n  const date = new Date(dateString);\n  return date.toLocaleString('en-US', {\n    month: 'short',\n    day: 'numeric',\n    hour: '2-digit',\n    minute: '2-digit',\n    second: '2-digit',\n  });\n}\n\nfunction formatResourceType(type: string): string {\n  return type\n    .replace(/_/g, ' ')\n    .toLowerCase()\n    .replace(/\\b\\w/g, (character) => character.toUpperCase());\n}\n\nexport function AuditLogTable({\n  items,\n  total,\n  hasMore,\n  page,\n  pageSize,\n  onPageChange,\n  onSelectLog,\n  onDeleteLog,\n  selectedLogId,\n  selectedLogIds,\n  allVisibleSelected,\n  partiallySelected,\n  onToggleLogSelection,\n  onToggleAllVisible,\n}: AuditLogTableProps) {\n  const { t } = useI18n();\n  const totalPages = Math.max(1, Math.ceil(total / pageSize));\n\n  const tr = (key: string, fallback: string) => {\n    const value = t(key);\n    return value === key ? fallback : value;\n  };\n\n  return (\n    <div>\n      <div className=\"space-y-3 md:hidden\">\n        {items.map((item) => {\n          const isSelected = selectedLogIds.has(item.id);\n          return (\n            <article\n              key={item.id}\n              className={`rounded-lg border border-border-primary p-4 transition-colors ${\n                selectedLogId === item.id ? 'bg-bg-secondary/50' : 'bg-bg-surface'\n              }`}\n            >\n              <div className=\"flex items-start justify-between gap-3\">\n                <div className=\"flex items-start gap-3\">\n                  <SelectionCheckbox\n                    checked={isSelected}\n                    onChange={(checked) => onToggleLogSelection(item.id, checked)}\n                    ariaLabel={`Select audit log ${item.id}`}\n                    className=\"mt-1\"\n                  />\n                  <div className=\"min-w-0\">\n                    <p className=\"text-xs text-text-secondary\">{formatDate(item.createdAt)}</p>\n                    <p className=\"mt-1 truncate font-medium text-text-primary\">\n                      {item.resourceName || item.description || '-'}\n                    </p>\n                    <p className=\"mt-1 text-xs text-text-secondary\">\n                      {formatResourceType(item.resourceType)}\n                    </p>\n                  </div>\n                </div>\n                <span\n                  className={`inline-flex shrink-0 items-center gap-1 rounded px-2 py-0.5 text-xs font-medium ${\n                    actionColors[item.action] || 'bg-bg-secondary text-text-secondary'\n                  }`}\n                >\n                  {item.command ? <Terminal size={12} /> : null}\n                  {item.action}\n                </span>\n              </div>\n              <div className=\"mt-3 flex items-center justify-between gap-3\">\n                <p className=\"min-w-0 truncate font-mono text-xs text-text-secondary\">\n                  {item.actorId}\n                </p>\n                <StatusBadge\n                  status={item.status}\n                  variant={statusVariantMap[item.status]}\n                  size=\"sm\"\n                />\n              </div>\n              <div className=\"mt-4 flex items-center justify-end gap-2\">\n                <button\n                  type=\"button\"\n                  onClick={() => onSelectLog(item.id)}\n                  className=\"inline-flex items-center gap-1 rounded-md border border-border-primary px-3 py-1.5 text-sm text-text-primary transition-colors hover:bg-bg-secondary\"\n                >\n                  View details\n                  <ChevronRight size={14} />\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => onDeleteLog(item.id)}\n                  className=\"rounded p-1 text-text-secondary transition-colors hover:bg-status-error-bg hover:text-status-error-text\"\n                  title={tr('audit.deleteAuditLog', 'Delete audit log')}\n                >\n                  <Trash2 size={14} />\n                </button>\n              </div>\n            </article>\n          );\n        })}\n      </div>\n\n      <div className=\"hidden overflow-x-auto rounded-lg border border-border-primary md:block\">\n        <table className=\"w-full min-w-[860px] text-sm\">\n          <thead>\n            <tr className=\"border-b border-border-primary bg-bg-secondary/50\">\n              <th className=\"px-4 py-3 text-left font-medium text-text-secondary\">\n                <SelectionCheckbox\n                  checked={allVisibleSelected}\n                  indeterminate={partiallySelected}\n                  onChange={onToggleAllVisible}\n                  ariaLabel=\"Select all visible audit logs\"\n                />\n              </th>\n              <th className=\"px-4 py-3 text-left font-medium text-text-secondary\">\n                {tr('audit.time', 'Time')}\n              </th>\n              <th className=\"px-4 py-3 text-left font-medium text-text-secondary\">\n                {tr('audit.action', 'Action')}\n              </th>\n              <th className=\"px-4 py-3 text-left font-medium text-text-secondary\">\n                {tr('audit.resource', 'Resource')}\n              </th>\n              <th className=\"px-4 py-3 text-left font-medium text-text-secondary\">\n                {tr('audit.name', 'Name')}\n              </th>\n              <th className=\"px-4 py-3 text-left font-medium text-text-secondary\">\n                {tr('audit.actor', 'Actor')}\n              </th>\n              <th className=\"px-4 py-3 text-left font-medium text-text-secondary\">\n                {tr('audit.status', 'Status')}\n              </th>\n              <th className=\"px-4 py-3 text-right font-medium text-text-secondary\">\n                {tr('audit.actions', 'Actions')}\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            {items.map((item) => {\n              const isSelected = selectedLogIds.has(item.id);\n              return (\n                <tr\n                  key={item.id}\n                  className={`border-b border-border-primary/50 transition-colors hover:bg-bg-secondary/30 ${\n                    selectedLogId === item.id ? 'bg-bg-secondary/50' : ''\n                  }`}\n                >\n                  <td className=\"px-4 py-3 align-top\">\n                    <SelectionCheckbox\n                      checked={isSelected}\n                      onChange={(checked) => onToggleLogSelection(item.id, checked)}\n                      ariaLabel={`Select audit log ${item.id}`}\n                    />\n                  </td>\n                  <td className=\"whitespace-nowrap px-4 py-3 text-xs text-text-secondary\">\n                    {formatDate(item.createdAt)}\n                  </td>\n                  <td className=\"px-4 py-3\">\n                    <span\n                      className={`inline-flex items-center gap-1 rounded px-2 py-0.5 text-xs font-medium ${\n                        actionColors[item.action] || 'bg-bg-secondary text-text-secondary'\n                      }`}\n                    >\n                      {item.command ? <Terminal size={12} /> : null}\n                      {item.action}\n                    </span>\n                  </td>\n                  <td className=\"px-4 py-3 text-xs text-text-secondary\">\n                    {formatResourceType(item.resourceType)}\n                  </td>\n                  <td\n                    className=\"max-w-[220px] truncate px-4 py-3\"\n                    title={item.resourceName || item.description || ''}\n                  >\n                    {item.resourceName || item.description || '-'}\n                  </td>\n                  <td className=\"max-w-[120px] truncate px-4 py-3 font-mono text-xs text-text-secondary\">\n                    {item.actorId}\n                  </td>\n                  <td className=\"px-4 py-3\">\n                    <StatusBadge\n                      status={item.status}\n                      variant={statusVariantMap[item.status]}\n                      size=\"sm\"\n                    />\n                  </td>\n                  <td className=\"px-4 py-3 text-right\">\n                    <div className=\"flex items-center justify-end gap-1\">\n                      <button\n                        type=\"button\"\n                        onClick={() => onSelectLog(item.id)}\n                        className=\"rounded p-1 text-text-secondary transition-colors hover:bg-bg-secondary hover:text-text-primary\"\n                        title={tr('audit.viewAuditLog', 'View details')}\n                      >\n                        <ChevronRight size={14} />\n                      </button>\n                      <button\n                        type=\"button\"\n                        onClick={() => onDeleteLog(item.id)}\n                        className=\"rounded p-1 text-text-secondary transition-colors hover:bg-status-error-bg hover:text-status-error-text\"\n                        title={tr('audit.deleteAuditLog', 'Delete audit log')}\n                      >\n                        <Trash2 size={14} />\n                      </button>\n                    </div>\n                  </td>\n                </tr>\n              );\n            })}\n          </tbody>\n        </table>\n      </div>\n\n      <div className=\"mt-4 flex flex-col gap-3 text-sm text-text-secondary sm:flex-row sm:items-center sm:justify-between\">\n        <span>\n          {tr('audit.showing', 'Showing')} {page * pageSize + 1}-\n          {Math.min((page + 1) * pageSize, total)} {tr('audit.of', 'of')} {total}\n        </span>\n        <div className=\"flex flex-wrap items-center gap-2\">\n          <button\n            type=\"button\"\n            disabled={page === 0}\n            onClick={() => onPageChange(page - 1)}\n            className=\"rounded border border-border-primary px-3 py-1 transition-colors hover:bg-bg-secondary disabled:opacity-50\"\n          >\n            {tr('audit.previous', 'Previous')}\n          </button>\n          <span>\n            {tr('audit.page', 'Page')} {page + 1} {tr('audit.of', 'of')} {totalPages}\n          </span>\n          <button\n            type=\"button\"\n            disabled={!hasMore}\n            onClick={() => onPageChange(page + 1)}\n            className=\"rounded border border-border-primary px-3 py-1 transition-colors hover:bg-bg-secondary disabled:opacity-50\"\n          >\n            {tr('audit.next', 'Next')}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"AuditLogTable.js","names":[],"sources":["../../../src/components/audit/AuditLogTable.tsx"],"sourcesContent":["import { ChevronRight, Terminal, Trash2 } from 'lucide-react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { StatusBadge } from '@/components/shared';\nimport { SelectionCheckbox } from '@/components/shared/SelectionCheckbox';\nimport type { VibeAuditLogFieldsFragment } from '@/generated/wspace-operations';\n\ninterface AuditLogTableProps {\n  items: VibeAuditLogFieldsFragment[];\n  total: number;\n  hasMore: boolean;\n  page: number;\n  pageSize: number;\n  onPageChange: (page: number) => void;\n  onSelectLog: (id: string) => void;\n  onDeleteLog: (id: string) => void;\n  selectedLogId: string | null;\n  selectedLogIds: Set<string>;\n  allVisibleSelected: boolean;\n  partiallySelected: boolean;\n  onToggleLogSelection: (id: string, checked: boolean) => void;\n  onToggleAllVisible: (checked: boolean) => void;\n}\n\nconst statusVariantMap: Record<string, 'success' | 'error' | 'warning' | 'info'> = {\n  SUCCESS: 'success',\n  FAILURE: 'error',\n  DENIED: 'warning',\n  ERROR: 'error',\n};\n\nconst actionColors: Record<string, string> = {\n  CREATE: 'bg-status-success-bg text-status-success-text',\n  UPDATE: 'bg-status-info-bg text-status-info-text',\n  DELETE: 'bg-status-error-bg text-status-error-text',\n  EXECUTE: 'bg-action-primary-bg/15 text-action-primary-text',\n  EXPORT: 'bg-status-warning-bg text-status-warning-text',\n  SHARE: 'bg-status-success-bg text-status-success-text',\n  REVOKE: 'bg-status-warning-bg text-status-warning-text',\n  ARCHIVE: 'bg-bg-muted text-text-secondary',\n  RESTORE: 'bg-status-info-bg text-status-info-text',\n};\n\nfunction formatDate(dateString: string): string {\n  const date = new Date(dateString);\n  return date.toLocaleString('en-US', {\n    month: 'short',\n    day: 'numeric',\n    hour: '2-digit',\n    minute: '2-digit',\n    second: '2-digit',\n  });\n}\n\nfunction formatResourceType(type: string): string {\n  return type\n    .replace(/_/g, ' ')\n    .toLowerCase()\n    .replace(/\\b\\w/g, (character) => character.toUpperCase());\n}\n\nexport function AuditLogTable({\n  items,\n  total,\n  hasMore,\n  page,\n  pageSize,\n  onPageChange,\n  onSelectLog,\n  onDeleteLog,\n  selectedLogId,\n  selectedLogIds,\n  allVisibleSelected,\n  partiallySelected,\n  onToggleLogSelection,\n  onToggleAllVisible,\n}: AuditLogTableProps) {\n  const { t } = useI18n();\n  const totalPages = Math.max(1, Math.ceil(total / pageSize));\n\n  const tr = (key: string, fallback: string) => {\n    const value = t(key);\n    return value === key ? fallback : value;\n  };\n\n  return (\n    <div>\n      <div className=\"space-y-3 md:hidden\">\n        {items.map((item) => {\n          const isSelected = selectedLogIds.has(item.id);\n          return (\n            <article\n              key={item.id}\n              className={`rounded-lg border border-border-primary p-4 transition-colors ${\n                selectedLogId === item.id ? 'bg-bg-secondary/50' : 'bg-bg-surface'\n              }`}\n            >\n              <div className=\"flex items-start justify-between gap-3\">\n                <div className=\"flex items-start gap-3\">\n                  <SelectionCheckbox\n                    checked={isSelected}\n                    onChange={(checked) => onToggleLogSelection(item.id, checked)}\n                    ariaLabel={`Select audit log ${item.id}`}\n                    className=\"mt-1\"\n                  />\n                  <div className=\"min-w-0\">\n                    <p className=\"text-xs text-text-secondary\">{formatDate(item.createdAt)}</p>\n                    <p className=\"mt-1 truncate font-medium text-text-primary\">\n                      {item.resourceName || item.description || '-'}\n                    </p>\n                    <p className=\"mt-1 text-xs text-text-secondary\">\n                      {formatResourceType(item.resourceType)}\n                    </p>\n                  </div>\n                </div>\n                <span\n                  className={`inline-flex shrink-0 items-center gap-1 rounded px-2 py-0.5 text-xs font-medium ${\n                    actionColors[item.action] || 'bg-bg-secondary text-text-secondary'\n                  }`}\n                >\n                  {item.command ? <Terminal size={12} /> : null}\n                  {item.action}\n                </span>\n              </div>\n              <div className=\"mt-3 flex items-center justify-between gap-3\">\n                <p className=\"min-w-0 truncate text-xs capitalize text-text-secondary\">\n                  {(item.actorType || 'unknown')\n                    .toLowerCase()\n                    .replace(/_/g, ' ')}\n                  {item.resourceName ? ` · ${item.resourceName}` : ''}\n                </p>\n                <StatusBadge\n                  status={item.status}\n                  variant={statusVariantMap[item.status]}\n                  size=\"sm\"\n                />\n              </div>\n              <div className=\"mt-4 flex items-center justify-end gap-2\">\n                <button\n                  type=\"button\"\n                  onClick={() => onSelectLog(item.id)}\n                  className=\"inline-flex items-center gap-1 rounded-md border border-border-primary px-3 py-1.5 text-sm text-text-primary transition-colors hover:bg-bg-secondary\"\n                >\n                  View details\n                  <ChevronRight size={14} />\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => onDeleteLog(item.id)}\n                  className=\"rounded p-1 text-text-secondary transition-colors hover:bg-status-error-bg hover:text-status-error-text\"\n                  title={tr('audit.deleteAuditLog', 'Delete audit log')}\n                >\n                  <Trash2 size={14} />\n                </button>\n              </div>\n            </article>\n          );\n        })}\n      </div>\n\n      <div className=\"hidden overflow-x-auto rounded-lg border border-border-primary md:block\">\n        <table className=\"w-full min-w-[860px] text-sm\">\n          <thead>\n            <tr className=\"border-b border-border-primary bg-bg-secondary/50\">\n              <th className=\"px-4 py-3 text-left font-medium text-text-secondary\">\n                <SelectionCheckbox\n                  checked={allVisibleSelected}\n                  indeterminate={partiallySelected}\n                  onChange={onToggleAllVisible}\n                  ariaLabel=\"Select all visible audit logs\"\n                />\n              </th>\n              <th className=\"px-4 py-3 text-left font-medium text-text-secondary\">\n                {tr('audit.time', 'Time')}\n              </th>\n              <th className=\"px-4 py-3 text-left font-medium text-text-secondary\">\n                {tr('audit.action', 'Action')}\n              </th>\n              <th className=\"px-4 py-3 text-left font-medium text-text-secondary\">\n                {tr('audit.resource', 'Resource')}\n              </th>\n              <th className=\"px-4 py-3 text-left font-medium text-text-secondary\">\n                {tr('audit.name', 'Name')}\n              </th>\n              <th className=\"px-4 py-3 text-left font-medium text-text-secondary\">\n                {tr('audit.actor', 'Actor')}\n              </th>\n              <th className=\"px-4 py-3 text-left font-medium text-text-secondary\">\n                {tr('audit.status', 'Status')}\n              </th>\n              <th className=\"px-4 py-3 text-right font-medium text-text-secondary\">\n                {tr('audit.actions', 'Actions')}\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            {items.map((item) => {\n              const isSelected = selectedLogIds.has(item.id);\n              return (\n                <tr\n                  key={item.id}\n                  className={`border-b border-border-primary/50 transition-colors hover:bg-bg-secondary/30 ${\n                    selectedLogId === item.id ? 'bg-bg-secondary/50' : ''\n                  }`}\n                >\n                  <td className=\"px-4 py-3 align-top\">\n                    <SelectionCheckbox\n                      checked={isSelected}\n                      onChange={(checked) => onToggleLogSelection(item.id, checked)}\n                      ariaLabel={`Select audit log ${item.id}`}\n                    />\n                  </td>\n                  <td className=\"whitespace-nowrap px-4 py-3 text-xs text-text-secondary\">\n                    {formatDate(item.createdAt)}\n                  </td>\n                  <td className=\"px-4 py-3\">\n                    <span\n                      className={`inline-flex items-center gap-1 rounded px-2 py-0.5 text-xs font-medium ${\n                        actionColors[item.action] || 'bg-bg-secondary text-text-secondary'\n                      }`}\n                    >\n                      {item.command ? <Terminal size={12} /> : null}\n                      {item.action}\n                    </span>\n                  </td>\n                  <td className=\"px-4 py-3 text-xs text-text-secondary\">\n                    {formatResourceType(item.resourceType)}\n                  </td>\n                  <td\n                    className=\"max-w-[220px] truncate px-4 py-3\"\n                    title={item.resourceName || item.description || ''}\n                  >\n                    {item.resourceName || item.description || '-'}\n                  </td>\n                  <td\n                    className=\"max-w-[140px] truncate px-4 py-3 text-xs capitalize text-text-secondary\"\n                    title={item.actorId}\n                  >\n                    {(item.actorType || 'unknown')\n                      .toLowerCase()\n                      .replace(/_/g, ' ')}\n                  </td>\n                  <td className=\"px-4 py-3\">\n                    <StatusBadge\n                      status={item.status}\n                      variant={statusVariantMap[item.status]}\n                      size=\"sm\"\n                    />\n                  </td>\n                  <td className=\"px-4 py-3 text-right\">\n                    <div className=\"flex items-center justify-end gap-1\">\n                      <button\n                        type=\"button\"\n                        onClick={() => onSelectLog(item.id)}\n                        className=\"rounded p-1 text-text-secondary transition-colors hover:bg-bg-secondary hover:text-text-primary\"\n                        title={tr('audit.viewAuditLog', 'View details')}\n                      >\n                        <ChevronRight size={14} />\n                      </button>\n                      <button\n                        type=\"button\"\n                        onClick={() => onDeleteLog(item.id)}\n                        className=\"rounded p-1 text-text-secondary transition-colors hover:bg-status-error-bg hover:text-status-error-text\"\n                        title={tr('audit.deleteAuditLog', 'Delete audit log')}\n                      >\n                        <Trash2 size={14} />\n                      </button>\n                    </div>\n                  </td>\n                </tr>\n              );\n            })}\n          </tbody>\n        </table>\n      </div>\n\n      <div className=\"mt-4 flex flex-col gap-3 text-sm text-text-secondary sm:flex-row sm:items-center sm:justify-between\">\n        <span>\n          {tr('audit.showing', 'Showing')} {page * pageSize + 1}-\n          {Math.min((page + 1) * pageSize, total)} {tr('audit.of', 'of')} {total}\n        </span>\n        <div className=\"flex flex-wrap items-center gap-2\">\n          <button\n            type=\"button\"\n            disabled={page === 0}\n            onClick={() => onPageChange(page - 1)}\n            className=\"rounded border border-border-primary px-3 py-1 transition-colors hover:bg-bg-secondary disabled:opacity-50\"\n          >\n            {tr('audit.previous', 'Previous')}\n          </button>\n          <span>\n            {tr('audit.page', 'Page')} {page + 1} {tr('audit.of', 'of')} {totalPages}\n          </span>\n          <button\n            type=\"button\"\n            disabled={!hasMore}\n            onClick={() => onPageChange(page + 1)}\n            className=\"rounded border border-border-primary px-3 py-1 transition-colors hover:bg-bg-secondary disabled:opacity-50\"\n          >\n            {tr('audit.next', 'Next')}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/gitops/GitOpsProviderPicker.js

@@ -0,0 +1,29 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/components/gitops/GitOpsProviderPicker.tsx
+var n = {
+	github: "GitHub",
+	gitlab: "GitLab",
+	bitbucket: "Bitbucket",
+	azdevops: "Azure DevOps"
+}, r = ({ providers: r, selected: i, onChange: a }) => r.length === 0 ? null : r.length === 1 && r[0] ? /* @__PURE__ */ e("span", {
+	className: "inline-flex items-center px-2 py-0.5 text-xs rounded-md bg-bg-sunken text-text-secondary",
+	"data-testid": "gitops-provider-badge",
+	children: n[r[0]]
+}) : /* @__PURE__ */ t("select", {
+	"aria-label": "GitOps provider",
+	"data-testid": "gitops-provider-picker",
+	value: i ?? "",
+	onChange: (e) => a(e.target.value),
+	className: "px-2 py-1 text-xs rounded-md border border-border-default bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg/40",
+	children: [!i && /* @__PURE__ */ e("option", {
+		value: "",
+		children: "Select…"
+	}), r.map((t) => /* @__PURE__ */ e("option", {
+		value: t,
+		children: n[t]
+	}, t))]
+});
+//#endregion
+export { r as GitOpsProviderPicker };
+
+//# sourceMappingURL=GitOpsProviderPicker.js.map

package/dist/components/gitops/GitOpsProviderPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GitOpsProviderPicker.js","names":[],"sources":["../../../src/components/gitops/GitOpsProviderPicker.tsx"],"sourcesContent":["/**\n * GitOpsProviderPicker — small select to switch between authenticated\n * providers (github / gitlab / bitbucket / azdevops).\n *\n * Only providers that the user has authenticated against are surfaced.\n */\nimport type { FC } from 'react';\n\nimport type { ProviderName } from './types';\n\nconst LABELS: Record<ProviderName, string> = {\n  github: 'GitHub',\n  gitlab: 'GitLab',\n  bitbucket: 'Bitbucket',\n  azdevops: 'Azure DevOps',\n};\n\ninterface GitOpsProviderPickerProps {\n  providers: ProviderName[];\n  selected: ProviderName | null;\n  onChange: (next: ProviderName) => void;\n}\n\nexport const GitOpsProviderPicker: FC<GitOpsProviderPickerProps> = ({\n  providers,\n  selected,\n  onChange,\n}) => {\n  if (providers.length === 0) return null;\n  if (providers.length === 1 && providers[0]) {\n    return (\n      <span\n        className=\"inline-flex items-center px-2 py-0.5 text-xs rounded-md bg-bg-sunken text-text-secondary\"\n        data-testid=\"gitops-provider-badge\"\n      >\n        {LABELS[providers[0]]}\n      </span>\n    );\n  }\n  return (\n    <select\n      aria-label=\"GitOps provider\"\n      data-testid=\"gitops-provider-picker\"\n      value={selected ?? ''}\n      onChange={(e) => onChange(e.target.value as ProviderName)}\n      className=\"px-2 py-1 text-xs rounded-md border border-border-default bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg/40\"\n    >\n      {!selected && <option value=\"\">Select…</option>}\n      {providers.map((p) => (\n        <option key={p} value={p}>\n          {LABELS[p]}\n        </option>\n      ))}\n    </select>\n  );\n};\n"],"mappings":";;AAUA,IAAM,IAAuC;CAC3C,QAAQ;CACR,QAAQ;CACR,WAAW;CACX,UAAU;CACX,EAQY,KAAuD,EAClE,cACA,aACA,kBAEI,EAAU,WAAW,IAAU,OAC/B,EAAU,WAAW,KAAK,EAAU,KAEpC,kBAAC,QAAD;CACE,WAAU;CACV,eAAY;WAEX,EAAO,EAAU;CACb,CAAA,GAIT,kBAAC,UAAD;CACE,cAAW;CACX,eAAY;CACZ,OAAO,KAAY;CACnB,WAAW,MAAM,EAAS,EAAE,OAAO,MAAsB;CACzD,WAAU;WALZ,CAOG,CAAC,KAAY,kBAAC,UAAD;EAAQ,OAAM;YAAG;EAAgB,CAAA,EAC9C,EAAU,KAAK,MACd,kBAAC,UAAD;EAAgB,OAAO;YACpB,EAAO;EACD,EAFI,EAEJ,CACT,CACK"}

package/dist/components/gitops/GitOpsSetup.js

@@ -1,150 +1,196 @@
 import { useTr as e } from "../../shared/hooks/useTr.js";
-import { useCreateGitopsProviderMutation as t } from "../../generated/wspace-operations.js";
+import { useGitopsAuth as t } from "../../hooks/useGitops.js";
 import { useCallback as n, useMemo as r, useState as i } from "react";
-import { GitMerge as a, Loader2 as o } from "lucide-react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { ExternalLink as a, GitMerge as o, Loader2 as s } from "lucide-react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/components/gitops/GitOpsSetup.tsx
-var l = [
+var u = [
 	{
-		value: "GITHUB",
-		label: "GitHub"
+		value: "github",
+		label: "GitHub",
+		tokenLabel: "Personal Access Token",
+		tokenPlaceholder: "ghp_xxxxxxxxxxxxxxxxxxxx",
+		helpUrl: "https://github.com/settings/tokens",
+		helpText: "Required scopes: repo, workflow, read:org, security_events"
 	},
 	{
-		value: "GITLAB",
-		label: "GitLab"
+		value: "gitlab",
+		label: "GitLab",
+		tokenLabel: "Personal Access Token",
+		tokenPlaceholder: "glpat-xxxxxxxxxxxxxxxxxxxx",
+		helpUrl: "https://gitlab.com/-/profile/personal_access_tokens",
+		helpText: "Required scope: api. For self-hosted instances, set the host below.",
+		showHost: !0
 	},
 	{
-		value: "BITBUCKET",
-		label: "Bitbucket"
+		value: "bitbucket",
+		label: "Bitbucket Cloud",
+		tokenLabel: "username:app_password",
+		tokenPlaceholder: "vignesh:ATBBxxxxxxxxxxxxxx",
+		helpUrl: "https://bitbucket.org/account/settings/app-passwords/",
+		helpText: "Required permissions: Repositories Read, Pull Requests Read, Pipelines Read"
 	},
 	{
-		value: "AZURE_DEVOPS",
-		label: "Azure DevOps"
+		value: "azdevops",
+		label: "Azure DevOps",
+		tokenLabel: "Personal Access Token",
+		tokenPlaceholder: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
+		helpUrl: "https://dev.azure.com/_usersSettings/tokens",
+		helpText: "Required scopes: Code Read, Pull Request Read, Build Read",
+		showOrg: !0
 	}
-];
-function u(e) {
-	let t = e.toLowerCase();
-	return t.includes("github.com") || t.includes("github.") ? "GITHUB" : t.includes("gitlab.com") || t.includes("gitlab.") ? "GITLAB" : t.includes("bitbucket.org") || t.includes("bitbucket.") ? "BITBUCKET" : t.includes("dev.azure.com") || t.includes("visualstudio.com") ? "AZURE_DEVOPS" : null;
-}
-var d = ({ workspaceId: d, agents: f, onCreated: p }) => {
-	let m = e(), [h, g] = i(""), [_, v] = i(""), [y, b] = i("GITHUB"), [x, S] = i(f[0]?.id ?? ""), [C, w] = i(""), [T, { loading: E }] = t(), D = n((e) => {
-		v(e);
-		let t = u(e);
-		t && b(t);
-	}, []), O = r(() => h.trim().length > 0 && _.trim().length > 0 && x.length > 0, [
-		h,
-		_,
-		x
-	]), k = n(async (e) => {
-		if (e.preventDefault(), w(""), O) try {
-			await T({ variables: { input: {
-				name: h.trim(),
-				providerType: y,
-				repoUrl: _.trim()
-			} } }), p();
+], d = ({ ctx: d, onCreated: f, onCancel: p }) => {
+	let m = e(), [h, g] = i("github"), [_, v] = i(""), [y, b] = i(""), [x, S] = i(""), [C, w] = i(""), [T, E] = i(null), D = r(() => u.find((e) => e.value === h) ?? u[0], [h]), O = t(d), k = r(() => !(_.trim().length === 0 || D.showOrg && y.trim().length === 0), [
+		D.showOrg,
+		y,
+		_
+	]), A = n(async (e) => {
+		if (e.preventDefault(), w(""), E(null), !k) return;
+		let t = {};
+		D.showOrg && y && (t.organization = y.trim()), D.showHost && x && (t.host = x.trim());
+		try {
+			let e = await O.mutateAsync({
+				provider: h,
+				input: {
+					kind: "pat",
+					token: _.trim(),
+					meta: Object.keys(t).length ? t : void 0
+				}
+			});
+			E(e), e.ok ? (v(""), f()) : e.message && w(e.message);
 		} catch (e) {
-			w(e instanceof Error ? e.message : "Failed to connect repository");
+			w(e instanceof Error ? e.message : "Failed to save credentials");
 		}
 	}, [
 		O,
-		T,
-		d,
-		h,
-		y,
-		_,
 		x,
-		p
+		k,
+		f,
+		D.showHost,
+		D.showOrg,
+		y,
+		h,
+		_
 	]);
-	return /* @__PURE__ */ s("div", {
+	return /* @__PURE__ */ c("div", {
 		className: "max-w-xl mx-auto",
-		children: /* @__PURE__ */ c("div", {
+		children: /* @__PURE__ */ l("div", {
 			className: "bg-bg-surface border border-border-default rounded-xl shadow-sm p-6 sm:p-8",
-			children: [/* @__PURE__ */ c("div", {
+			children: [/* @__PURE__ */ l("div", {
 				className: "flex flex-col items-center text-center mb-6",
 				children: [
-					/* @__PURE__ */ s("div", {
+					/* @__PURE__ */ c("div", {
 						className: "size-12 rounded-xl bg-bg-sunken flex items-center justify-center mb-4",
-						children: /* @__PURE__ */ s(a, { className: "size-6 text-text-secondary" })
+						children: /* @__PURE__ */ c(o, { className: "size-6 text-text-secondary" })
 					}),
-					/* @__PURE__ */ s("h2", {
+					/* @__PURE__ */ c("h2", {
 						className: "text-lg font-semibold text-text-primary",
-						children: m("vibecontrols.gitops.setup.title", "Connect a Repository")
+						children: m("vibecontrols.gitops.setup.title", "Connect a provider")
 					}),
-					/* @__PURE__ */ s("p", {
+					/* @__PURE__ */ c("p", {
 						className: "text-sm text-text-secondary mt-1",
-						children: m("vibecontrols.gitops.setup.description", "Add a Git repository to monitor stats and CI/CD pipelines")
+						children: m("vibecontrols.gitops.setup.description", "Paste a personal access token. It is stored encrypted on your agent — never sent to the backend.")
 					})
 				]
-			}), /* @__PURE__ */ c("form", {
-				onSubmit: k,
+			}), /* @__PURE__ */ l("form", {
+				onSubmit: A,
 				className: "space-y-4",
 				children: [
-					/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("label", {
-						htmlFor: "gitops-name",
+					/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+						htmlFor: "gitops-provider",
 						className: "block text-sm font-medium text-text-primary mb-1",
-						children: m("vibecontrols.gitops.setup.name", "Name")
-					}), /* @__PURE__ */ s("input", {
-						"aria-label": "My Repository",
-						id: "gitops-name",
-						type: "text",
+						children: m("vibecontrols.gitops.setup.providerType", "Provider")
+					}), /* @__PURE__ */ c("select", {
+						id: "gitops-provider",
 						value: h,
 						onChange: (e) => g(e.target.value),
-						placeholder: "My Repository",
-						className: "w-full px-3 py-2 text-sm rounded-lg border border-border-default bg-bg-surface text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-action-primary-bg/40 focus:border-action-primary-bg transition-colors"
-					})] }),
-					/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("label", {
-						htmlFor: "gitops-url",
-						className: "block text-sm font-medium text-text-primary mb-1",
-						children: m("vibecontrols.gitops.setup.repoUrl", "Repository URL")
-					}), /* @__PURE__ */ s("input", {
-						"aria-label": "https://github.com/org/repo",
-						id: "gitops-url",
-						type: "url",
-						value: _,
-						onChange: (e) => D(e.target.value),
-						placeholder: "https://github.com/org/repo",
-						className: "w-full px-3 py-2 text-sm rounded-lg border border-border-default bg-bg-surface text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-action-primary-bg/40 focus:border-action-primary-bg transition-colors"
+						className: "w-full px-3 py-2 text-sm rounded-lg border border-border-default bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg/40",
+						children: u.map((e) => /* @__PURE__ */ c("option", {
+							value: e.value,
+							children: e.label
+						}, e.value))
 					})] }),
-					/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("label", {
-						htmlFor: "gitops-provider",
+					D.showOrg && /* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+						htmlFor: "gitops-org",
 						className: "block text-sm font-medium text-text-primary mb-1",
-						children: m("vibecontrols.gitops.setup.providerType", "Provider Type")
-					}), /* @__PURE__ */ s("select", {
-						id: "gitops-provider",
+						children: m("vibecontrols.gitops.setup.organization", "Organisation")
+					}), /* @__PURE__ */ c("input", {
+						id: "gitops-org",
+						type: "text",
 						value: y,
 						onChange: (e) => b(e.target.value),
-						className: "w-full px-3 py-2 text-sm rounded-lg border border-border-default bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg/40 focus:border-action-primary-bg transition-colors",
-						children: l.map((e) => /* @__PURE__ */ s("option", {
-							value: e.value,
-							children: e.label
-						}, e.value))
+						placeholder: "my-org",
+						"aria-label": "Azure DevOps organisation",
+						className: "w-full px-3 py-2 text-sm rounded-lg border border-border-default bg-bg-surface text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-action-primary-bg/40"
 					})] }),
-					/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("label", {
-						htmlFor: "gitops-agent",
+					D.showHost && /* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("label", {
+						htmlFor: "gitops-host",
 						className: "block text-sm font-medium text-text-primary mb-1",
-						children: m("vibecontrols.gitops.setup.agent", "Agent")
-					}), f.length === 0 ? /* @__PURE__ */ s("p", {
-						className: "text-sm text-status-warning-text",
-						children: m("vibecontrols.gitops.setup.noAgents", "No agents available. Please configure an agent first for CLI access.")
-					}) : /* @__PURE__ */ s("select", {
-						id: "gitops-agent",
+						children: m("vibecontrols.gitops.setup.host", "GitLab host (optional, for self-hosted)")
+					}), /* @__PURE__ */ c("input", {
+						id: "gitops-host",
+						type: "url",
 						value: x,
 						onChange: (e) => S(e.target.value),
-						className: "w-full px-3 py-2 text-sm rounded-lg border border-border-default bg-bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg/40 focus:border-action-primary-bg transition-colors",
-						children: f.map((e) => /* @__PURE__ */ s("option", {
-							value: e.id,
-							children: e.name
-						}, e.id))
+						placeholder: "https://gitlab.acme.com",
+						className: "w-full px-3 py-2 text-sm rounded-lg border border-border-default bg-bg-surface text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-action-primary-bg/40"
 					})] }),
-					C && /* @__PURE__ */ s("div", {
+					/* @__PURE__ */ l("div", { children: [
+						/* @__PURE__ */ c("label", {
+							htmlFor: "gitops-token",
+							className: "block text-sm font-medium text-text-primary mb-1",
+							children: D.tokenLabel
+						}),
+						/* @__PURE__ */ c("input", {
+							id: "gitops-token",
+							type: "password",
+							value: _,
+							onChange: (e) => v(e.target.value),
+							placeholder: D.tokenPlaceholder,
+							"aria-label": "Personal access token",
+							autoComplete: "off",
+							className: "w-full px-3 py-2 text-sm rounded-lg border border-border-default bg-bg-surface text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-action-primary-bg/40"
+						}),
+						/* @__PURE__ */ l("p", {
+							className: "text-xs text-text-secondary mt-1.5 flex items-center gap-1",
+							children: [
+								D.helpText,
+								" ",
+								/* @__PURE__ */ l("a", {
+									href: D.helpUrl,
+									target: "_blank",
+									rel: "noopener noreferrer",
+									className: "inline-flex items-center text-action-primary-bg hover:underline",
+									children: ["Create token ", /* @__PURE__ */ c(a, { className: "size-3 ml-0.5" })]
+								})
+							]
+						})
+					] }),
+					T?.ok && /* @__PURE__ */ l("div", {
+						className: "text-sm text-status-success-text bg-status-success-bg-subtle rounded-lg px-3 py-2",
+						children: [
+							m("vibecontrols.gitops.setup.validated", "Token validated"),
+							T.account ? ` — ${T.account}` : "",
+							T.scopes?.length ? ` (scopes: ${T.scopes.join(", ")})` : ""
+						]
+					}),
+					C && /* @__PURE__ */ c("div", {
 						className: "text-sm text-status-error-text bg-status-error-bg-subtle rounded-lg px-3 py-2",
 						children: C
 					}),
-					/* @__PURE__ */ c("button", {
-						type: "submit",
-						disabled: E || !O,
-						className: "w-full flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-medium rounded-lg bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
-						children: [E && /* @__PURE__ */ s(o, { className: "size-4 animate-spin" }), m("vibecontrols.gitops.setup.connect", "Connect Repository")]
+					/* @__PURE__ */ l("div", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ l("button", {
+							type: "submit",
+							disabled: O.isPending || !k,
+							className: "flex-1 flex items-center justify-center gap-2 px-4 py-2.5 text-sm font-medium rounded-lg bg-action-primary-bg text-action-primary-text hover:bg-action-primary-bg-hover disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+							children: [O.isPending && /* @__PURE__ */ c(s, { className: "size-4 animate-spin" }), m("vibecontrols.gitops.setup.connect", "Save and connect")]
+						}), p && /* @__PURE__ */ c("button", {
+							type: "button",
+							onClick: p,
+							className: "px-4 py-2.5 text-sm font-medium rounded-lg border border-border-default text-text-secondary hover:text-text-primary transition-colors",
+							children: m("vibecontrols.gitops.setup.cancel", "Cancel")
+						})]
 					})
 				]
 			})]