@burdenoff/microfe-bigconsole 2026.805.2 → 2026.812.1

package/dist/bigconsole/components/pipeline/PipelineDeleteDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"PipelineDeleteDialog.js","names":[],"sources":["../../../../src/bigconsole/components/pipeline/PipelineDeleteDialog.tsx"],"sourcesContent":["/**\n * PipelineDeleteDialog Component\n *\n * Confirmation dialog for deleting a Pipeline.\n * Shows warning about stages before deletion.\n */\n\nimport { memo, useCallback } from 'react';\nimport type { Pipeline } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface PipelineDeleteDialogProps {\n  pipeline: Pipeline;\n  isOpen: boolean;\n  onClose: () => void;\n  onConfirm: () => void | Promise<void>;\n}\n\n// ============================================================================\n// ICONS\n// ============================================================================\n\nconst WarningIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n    />\n  </svg>\n);\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const PipelineDeleteDialog = memo(function PipelineDeleteDialog({\n  pipeline,\n  isOpen,\n  onClose,\n  onConfirm,\n}: PipelineDeleteDialogProps) {\n  // Calculate stage count\n  const stageCount = pipeline.stages?.length ?? 0;\n\n  // Event handlers\n  const handleBackdropClick = useCallback(() => {\n    onClose();\n  }, [onClose]);\n\n  const handleConfirmClick = useCallback(() => {\n    onConfirm();\n  }, [onConfirm]);\n\n  // Don't render if not open\n  if (!isOpen) {\n    return null;\n  }\n\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-center justify-center\">\n      {/* Backdrop */}\n      <div className=\"absolute inset-0 bg-black/50\" onClick={handleBackdropClick} />\n\n      {/* Dialog */}\n      <div className=\"relative bg-bg-surface rounded-lg shadow-xl max-w-md w-full mx-4 p-6\">\n        {/* Header */}\n        <div className=\"flex items-center gap-3 mb-4\">\n          <div className=\"p-2 rounded-full bg-status-error-bg/10\">\n            <WarningIcon className=\"w-6 h-6 text-status-error-text\" />\n          </div>\n          <h2 className=\"text-lg font-semibold text-text-primary\">Delete Pipeline</h2>\n        </div>\n\n        {/* Content */}\n        <div className=\"mb-6\">\n          <p className=\"text-sm text-text-secondary mb-3\">\n            Are you sure you want to delete the pipeline{' '}\n            <span className=\"font-medium text-text-primary\">{pipeline.name}</span>?\n          </p>\n\n          {/* Warning about stages */}\n          {stageCount > 0 && (\n            <div className=\"p-3 bg-status-warning-bg/10 rounded-md\">\n              <p className=\"text-sm text-status-warning-text\">\n                This pipeline has {stageCount} stage{stageCount !== 1 ? 's' : ''}. All stages will be permanently\n                deleted.\n              </p>\n            </div>\n          )}\n\n          <p className=\"text-sm text-text-secondary mt-3\">This action cannot be undone.</p>\n        </div>\n\n        {/* Actions */}\n        <div className=\"flex justify-end gap-3\">\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className=\"\n              px-4 py-2\n              text-sm font-medium\n              text-text-primary\n              bg-bg-sunken\n              hover:bg-border-default\n              rounded-md\n              transition-colors\n            \"\n          >\n            Cancel\n          </button>\n          <button\n            type=\"button\"\n            onClick={handleConfirmClick}\n            className=\"\n              px-4 py-2\n              text-sm font-medium\n              text-white\n              bg-status-error-bg\n              hover:bg-status-error-bg/90\n              rounded-md\n              transition-colors\n            \"\n          >\n            Delete Pipeline\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport default PipelineDeleteDialog;\n"],"mappings":";;;AAyBA,IAAM,KAAe,EAAE,mBACrB,kBAAC,OAAD;CAAgB;CAAW,MAAK;CAAO,QAAO;CAAe,SAAQ;WACnE,kBAAC,QAAD;EACE,eAAc;EACd,gBAAe;EACf,aAAa;EACb,GAAE;EACF,CAAA;CACE,CAAA,EAOK,IAAuB,EAAK,SAA8B,EACrE,aACA,WACA,YACA,gBAC4B;CAE5B,IAAM,IAAa,EAAS,QAAQ,UAAU,GAGxC,IAAsB,QAAkB;AAC5C,KAAS;IACR,CAAC,EAAQ,CAAC,EAEP,IAAqB,QAAkB;AAC3C,KAAW;IACV,CAAC,EAAU,CAAC;AAOf,QAJK,IAKH,kBAAC,OAAD;EAAK,WAAU;YAAf,CAEE,kBAAC,OAAD;GAAK,WAAU;GAA+B,SAAS;GAAuB,CAAA,EAG9E,kBAAC,OAAD;GAAK,WAAU;aAAf;IAEE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,GAAD,EAAa,WAAU,kCAAmC,CAAA;MACtD,CAAA,EACN,kBAAC,MAAD;MAAI,WAAU;gBAA0C;MAAoB,CAAA,CACxE;;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,KAAD;OAAG,WAAU;iBAAb;QAAgD;QACD;QAC7C,kBAAC,QAAD;SAAM,WAAU;mBAAiC,EAAS;SAAY,CAAA;;QACpE;;MAGH,IAAa,KACZ,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,KAAD;QAAG,WAAU;kBAAb;SAAgD;SAC3B;SAAW;SAAO,MAAe,IAAU,KAAN;SAAS;SAE/D;;OACA,CAAA;MAGR,kBAAC,KAAD;OAAG,WAAU;iBAAmC;OAAiC,CAAA;MAC7E;;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;gBASX;MAEQ,CAAA,EACT,kBAAC,UAAD;MACE,MAAK;MACL,SAAS;MACT,WAAU;gBASX;MAEQ,CAAA,CACL;;IACF;KACF;MAxEC;EA0ET"}
+{"version":3,"file":"PipelineDeleteDialog.js","names":[],"sources":["../../../../src/bigconsole/components/pipeline/PipelineDeleteDialog.tsx"],"sourcesContent":["/**\n * PipelineDeleteDialog Component\n *\n * Confirmation dialog for deleting a Pipeline.\n * Shows warning about stages before deletion.\n *\n * BOFF-5635: this is a hand-rolled overlay (not fe-libs `Dialog`), so the\n * hierarchy work here is: a real `role=\"dialog\"` labelled by its heading, the\n * raw `bg-black/50` backdrop replaced with `--color-bg-overlay`, the stage-loss\n * warning promoted from a tinted paragraph to a `tone=\"warning\"` Section, and a\n * separated actions zone whose destructive commit reads as destructive.\n *\n * `aria-modal=\"true\"` hides the rest of the page from assistive tech, so this\n * overlay has to own the whole focus contract, not just the label:\n *   - on open, focus moves to Cancel — the least-destructive control, so a\n *     stray Enter/Space dismisses instead of deleting;\n *   - Tab / Shift+Tab cycle inside the panel while it is open (the browser\n *     still tabs into `aria-hidden` content otherwise);\n *   - on close, focus returns to whatever opened the dialog;\n *   - Escape still closes.\n *\n * It stays hand-rolled rather than migrating to the fe-libs `Dialog` /\n * `AlertDialog` primitives: those wrap Radix and would fix focus for free, but\n * their `DialogContent` ships `bg-bg-elevated`, `backdrop-blur-sm`, `p-6`,\n * `gap-4`, `sm:max-w-lg`, a close \"X\" and un-guarded `animate-in` / `zoom-in-95`\n * entry animation. That is a visual change and a new animation with no\n * `motion-safe` guard, and it would split this dialog from its two siblings\n * (WorkflowDeleteDialog, DataSinkDeleteDialog) which use exactly this markup.\n * The focus contract below is the same one Radix implements, scoped to this panel.\n */\n\nimport { memo, useCallback, useId, useRef } from 'react';\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { Section } from '../common';\nimport { useModalFocusTrap } from '../../hooks/useModalFocusTrap';\nimport type { Pipeline } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface PipelineDeleteDialogProps {\n  pipeline: Pipeline;\n  isOpen: boolean;\n  onClose: () => void;\n  onConfirm: () => void | Promise<void>;\n}\n\n// ============================================================================\n// FOCUS TRAP HELPERS\n// ============================================================================\n\n// ============================================================================\n// ICONS\n// ============================================================================\n\nconst WarningIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n    />\n  </svg>\n);\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const PipelineDeleteDialog = memo(function PipelineDeleteDialog({\n  pipeline,\n  isOpen,\n  onClose,\n  onConfirm,\n}: PipelineDeleteDialogProps) {\n  // Calculate stage count\n  const stageCount = pipeline.stages?.length ?? 0;\n  const titleId = useId();\n  const descriptionId = useId();\n  const panelRef = useRef<HTMLDivElement | null>(null);\n  const cancelRef = useRef<HTMLButtonElement | null>(null);\n\n  // Event handlers\n  const handleBackdropClick = useCallback(() => {\n    onClose();\n  }, [onClose]);\n\n  const handleConfirmClick = useCallback(() => {\n    onConfirm();\n  }, [onConfirm]);\n\n  useModalFocusTrap({ isOpen, panelRef, onClose, initialFocusRef: cancelRef });\n\n  // Don't render if not open\n  if (!isOpen) {\n    return null;\n  }\n\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4\">\n      {/* Backdrop */}\n      <div aria-hidden=\"true\" className=\"absolute inset-0 bg-[var(--color-bg-overlay)]\" onClick={handleBackdropClick} />\n\n      {/* Dialog */}\n      <div\n        ref={panelRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId}\n        aria-describedby={descriptionId}\n        tabIndex={-1}\n        data-testid=\"pipeline-delete-dialog\"\n        className=\"relative flex max-h-[calc(100dvh-2rem)] w-full max-w-md min-w-0 flex-col gap-form-gap overflow-y-auto rounded-card border border-[var(--color-border-subtle)] bg-bg-surface p-card-padding shadow-[var(--shadow-elevation-4)] focus:outline-none\"\n      >\n        {/* Header */}\n        <div className=\"flex items-center gap-icon-gap\">\n          <span aria-hidden=\"true\" className=\"rounded-pill bg-[var(--color-status-error-bgSubtle)] p-2\">\n            <WarningIcon className=\"h-icon-md w-icon-md text-status-error-text\" />\n          </span>\n          <h2 id={titleId} className=\"text-lg font-semibold text-text-primary\">\n            Delete Pipeline\n          </h2>\n        </div>\n\n        {/* Content */}\n        <div className=\"flex min-w-0 flex-col gap-form-gap\">\n          <p id={descriptionId} className=\"text-sm text-text-secondary\">\n            Are you sure you want to delete the pipeline{' '}\n            <span className=\"font-medium text-text-primary\">{pipeline.name}</span>? This action cannot be undone.\n          </p>\n\n          {/* Warning about stages */}\n          {stageCount > 0 && (\n            <Section\n              tone=\"warning\"\n              padding=\"compact\"\n              headingLevel={3}\n              title={`${stageCount} stage${stageCount !== 1 ? 's' : ''} will be deleted`}\n              icon={<WarningIcon className=\"h-icon-sm w-icon-sm\" />}\n              data-testid=\"pipeline-delete-stage-warning\"\n            >\n              <p className=\"text-sm text-text-secondary\">\n                Every stage in this pipeline is removed with it. The parsers themselves are not deleted.\n              </p>\n            </Section>\n          )}\n        </div>\n\n        {/* Actions */}\n        <div className=\"flex flex-wrap justify-end gap-control-gap border-t border-[var(--color-border-subtle)] pt-form-gap\">\n          <Button ref={cancelRef} type=\"button\" variant=\"secondary\" onClick={onClose}>\n            Cancel\n          </Button>\n          <Button type=\"button\" variant=\"destructive\" onClick={handleConfirmClick}>\n            Delete Pipeline\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport default PipelineDeleteDialog;\n"],"mappings":";;;;;;;AAwDA,IAAM,KAAe,EAAE,mBACrB,kBAAC,OAAD;CAAgB;CAAW,MAAK;CAAO,QAAO;CAAe,SAAQ;WACnE,kBAAC,QAAD;EACE,eAAc;EACd,gBAAe;EACf,aAAa;EACb,GAAE;EACF,CAAA;CACE,CAAA,EAOK,IAAuB,EAAK,SAA8B,EACrE,aACA,WACA,YACA,gBAC4B;CAE5B,IAAM,IAAa,EAAS,QAAQ,UAAU,GACxC,IAAU,GAAO,EACjB,IAAgB,GAAO,EACvB,IAAW,EAA8B,KAAK,EAC9C,IAAY,EAAiC,KAAK,EAGlD,IAAsB,QAAkB;AAC5C,KAAS;IACR,CAAC,EAAQ,CAAC,EAEP,IAAqB,QAAkB;AAC3C,KAAW;IACV,CAAC,EAAU,CAAC;AASf,QAPA,EAAkB;EAAE;EAAQ;EAAU;EAAS,iBAAiB;EAAW,CAAC,EAGvE,IAKH,kBAAC,OAAD;EAAK,WAAU;YAAf,CAEE,kBAAC,OAAD;GAAK,eAAY;GAAO,WAAU;GAAgD,SAAS;GAAuB,CAAA,EAGlH,kBAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,cAAW;GACX,mBAAiB;GACjB,oBAAkB;GAClB,UAAU;GACV,eAAY;GACZ,WAAU;aARZ;IAWE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,QAAD;MAAM,eAAY;MAAO,WAAU;gBACjC,kBAAC,GAAD,EAAa,WAAU,8CAA+C,CAAA;MACjE,CAAA,EACP,kBAAC,MAAD;MAAI,IAAI;MAAS,WAAU;gBAA0C;MAEhE,CAAA,CACD;;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,KAAD;MAAG,IAAI;MAAe,WAAU;gBAAhC;OAA8D;OACf;OAC7C,kBAAC,QAAD;QAAM,WAAU;kBAAiC,EAAS;QAAY,CAAA;;OACpE;SAGH,IAAa,KACZ,kBAAC,GAAD;MACE,MAAK;MACL,SAAQ;MACR,cAAc;MACd,OAAO,GAAG,EAAW,QAAQ,MAAe,IAAU,KAAN,IAAS;MACzD,MAAM,kBAAC,GAAD,EAAa,WAAU,uBAAwB,CAAA;MACrD,eAAY;gBAEZ,kBAAC,KAAD;OAAG,WAAU;iBAA8B;OAEvC,CAAA;MACI,CAAA,CAER;;IAGN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,GAAD;MAAQ,KAAK;MAAW,MAAK;MAAS,SAAQ;MAAY,SAAS;gBAAS;MAEnE,CAAA,EACT,kBAAC,GAAD;MAAQ,MAAK;MAAS,SAAQ;MAAc,SAAS;gBAAoB;MAEhE,CAAA,CACL;;IACF;KACF;MA/DC;EAiET"}

package/dist/bigconsole/components/pipeline/PipelineStatusBadge.js

@@ -4,29 +4,26 @@ import { jsx as t } from "react/jsx-runtime";
 var n = {
 	draft: {
 		label: "Draft",
-		className: "bg-bg-sunken text-text-secondary"
+		className: "bg-bg-sunken text-text-secondary border-[var(--color-border-subtle)]"
 	},
 	active: {
 		label: "Active",
-		className: "bg-status-success-bg/10 text-status-success-text"
+		className: "bg-[var(--color-status-success-bgSubtle)] text-status-success-text border-[var(--color-status-success-border)]"
 	},
 	inactive: {
 		label: "Inactive",
-		className: "bg-status-warning-bg/10 text-status-warning-text"
+		className: "bg-[var(--color-status-warning-bgSubtle)] text-[var(--color-status-warning-text)] border-[var(--color-status-warning-border)]"
 	},
 	error: {
 		label: "Error",
-		className: "bg-status-error-bg/10 text-status-error-text"
+		className: "bg-[var(--color-status-error-bgSubtle)] text-status-error-text border-[var(--color-status-error-border)]"
 	}
 }, r = e(function({ status: e, size: r = "md" }) {
 	let i = n[e] || n.draft;
 	return /* @__PURE__ */ t("span", {
-		className: `
-        inline-flex items-center
-        font-medium rounded-md
-        ${r === "sm" ? "px-1.5 py-0.5 text-xs" : "px-2 py-1 text-xs"}
-        ${i.className}
-      `,
+		"data-testid": "pipeline-status-badge",
+		"data-status": e,
+		className: `inline-flex shrink-0 items-center whitespace-nowrap rounded-pill border font-medium ${r === "sm" ? "px-2 py-0.5 text-xs" : "px-2.5 py-1 text-sm"} ${i.className}`,
 		children: i.label
 	});
 });

package/dist/bigconsole/components/pipeline/PipelineStatusBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"PipelineStatusBadge.js","names":[],"sources":["../../../../src/bigconsole/components/pipeline/PipelineStatusBadge.tsx"],"sourcesContent":["/**\n * PipelineStatusBadge Component\n *\n * Displays the status of a Pipeline with appropriate styling.\n */\n\nimport { memo } from 'react';\nimport type { PipelineStatus } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface PipelineStatusBadgeProps {\n  status: PipelineStatus;\n  size?: 'sm' | 'md';\n}\n\n// ============================================================================\n// STATUS CONFIG\n// ============================================================================\n\nconst STATUS_CONFIG: Record<PipelineStatus, { label: string; className: string }> = {\n  draft: {\n    label: 'Draft',\n    className: 'bg-bg-sunken text-text-secondary',\n  },\n  active: {\n    label: 'Active',\n    className: 'bg-status-success-bg/10 text-status-success-text',\n  },\n  inactive: {\n    label: 'Inactive',\n    className: 'bg-status-warning-bg/10 text-status-warning-text',\n  },\n  error: {\n    label: 'Error',\n    className: 'bg-status-error-bg/10 text-status-error-text',\n  },\n};\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const PipelineStatusBadge = memo(function PipelineStatusBadge({\n  status,\n  size = 'md',\n}: PipelineStatusBadgeProps) {\n  const config = STATUS_CONFIG[status] || STATUS_CONFIG.draft;\n\n  const sizeClasses = size === 'sm' ? 'px-1.5 py-0.5 text-xs' : 'px-2 py-1 text-xs';\n\n  return (\n    <span\n      className={`\n        inline-flex items-center\n        font-medium rounded-md\n        ${sizeClasses}\n        ${config.className}\n      `}\n    >\n      {config.label}\n    </span>\n  );\n});\n\nexport default PipelineStatusBadge;\n"],"mappings":";;;AAsBA,IAAM,IAA8E;CAClF,OAAO;EACL,OAAO;EACP,WAAW;EACZ;CACD,QAAQ;EACN,OAAO;EACP,WAAW;EACZ;CACD,UAAU;EACR,OAAO;EACP,WAAW;EACZ;CACD,OAAO;EACL,OAAO;EACP,WAAW;EACZ;CACF,EAMY,IAAsB,EAAK,SAA6B,EACnE,WACA,UAAO,QACoB;CAC3B,IAAM,IAAS,EAAc,MAAW,EAAc;AAItD,QACE,kBAAC,QAAD;EACE,WAAW;;;UAJK,MAAS,OAAO,0BAA0B,oBAO1C;UACZ,EAAO,UAAU;;YAGpB,EAAO;EACH,CAAA;EAET"}
+{"version":3,"file":"PipelineStatusBadge.js","names":[],"sources":["../../../../src/bigconsole/components/pipeline/PipelineStatusBadge.tsx"],"sourcesContent":["/**\n * PipelineStatusBadge Component\n *\n * Displays the status of a Pipeline with appropriate styling.\n *\n * BOFF-5635: the fills used to be `bg-status-*-bg/10`, which is almost invisible\n * against `bg-bg-surface` — the chip carried no signal at a glance. Each status\n * now uses its own `bgSubtle` fill plus a matching border, and `md` steps up to\n * `text-sm` so the badge holds its own next to a page `h1`.\n */\n\nimport { memo } from 'react';\nimport type { PipelineStatus } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface PipelineStatusBadgeProps {\n  status: PipelineStatus;\n  size?: 'sm' | 'md';\n}\n\n// ============================================================================\n// STATUS CONFIG\n// ============================================================================\n\nconst STATUS_CONFIG: Record<PipelineStatus, { label: string; className: string }> = {\n  draft: {\n    label: 'Draft',\n    className: 'bg-bg-sunken text-text-secondary border-[var(--color-border-subtle)]',\n  },\n  active: {\n    label: 'Active',\n    className:\n      'bg-[var(--color-status-success-bgSubtle)] text-status-success-text border-[var(--color-status-success-border)]',\n  },\n  inactive: {\n    label: 'Inactive',\n    className:\n      'bg-[var(--color-status-warning-bgSubtle)] text-[var(--color-status-warning-text)] border-[var(--color-status-warning-border)]',\n  },\n  error: {\n    label: 'Error',\n    className:\n      'bg-[var(--color-status-error-bgSubtle)] text-status-error-text border-[var(--color-status-error-border)]',\n  },\n};\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const PipelineStatusBadge = memo(function PipelineStatusBadge({\n  status,\n  size = 'md',\n}: PipelineStatusBadgeProps) {\n  const config = STATUS_CONFIG[status] || STATUS_CONFIG.draft;\n\n  const sizeClasses = size === 'sm' ? 'px-2 py-0.5 text-xs' : 'px-2.5 py-1 text-sm';\n\n  return (\n    <span\n      data-testid=\"pipeline-status-badge\"\n      data-status={status}\n      className={`inline-flex shrink-0 items-center whitespace-nowrap rounded-pill border font-medium ${sizeClasses} ${config.className}`}\n    >\n      {config.label}\n    </span>\n  );\n});\n\nexport default PipelineStatusBadge;\n"],"mappings":";;;AA2BA,IAAM,IAA8E;CAClF,OAAO;EACL,OAAO;EACP,WAAW;EACZ;CACD,QAAQ;EACN,OAAO;EACP,WACE;EACH;CACD,UAAU;EACR,OAAO;EACP,WACE;EACH;CACD,OAAO;EACL,OAAO;EACP,WACE;EACH;CACF,EAMY,IAAsB,EAAK,SAA6B,EACnE,WACA,UAAO,QACoB;CAC3B,IAAM,IAAS,EAAc,MAAW,EAAc;AAItD,QACE,kBAAC,QAAD;EACE,eAAY;EACZ,eAAa;EACb,WAAW,uFANK,MAAS,OAAO,wBAAwB,sBAMsD,GAAG,EAAO;YAEvH,EAAO;EACH,CAAA;EAET"}

package/dist/bigconsole/components/preview/AiPreviewContent.js

@@ -8,20 +8,20 @@ import { useEffect as o, useRef as s, useState as c } from "react";
 import { Spinner as l } from "@burdenoff/fe-libs/ui";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/bigconsole/components/preview/AiPreviewContent.tsx
-var f = 4e3, p = 6e4;
-function m({ label: e }) {
+var f = 4e3, p = 6e4, m = "flex min-h-[6rem] min-w-0 items-center justify-center gap-2 rounded-card bg-bg-sunken px-3 py-6 text-center text-sm text-text-muted";
+function h({ label: e }) {
 	return /* @__PURE__ */ d("div", {
-		className: "flex items-center gap-2 px-1 py-8 text-sm text-text-muted",
-		children: [/* @__PURE__ */ u(l, { className: "size-4" }), e]
+		className: m,
+		children: [/* @__PURE__ */ u(l, { className: "size-4 shrink-0" }), e]
 	});
 }
-function h({ text: e }) {
+function g({ text: e }) {
 	return /* @__PURE__ */ u("p", {
-		className: "px-1 py-8 text-sm text-text-muted",
+		className: m,
 		children: e
 	});
 }
-function g(e, t, n) {
+function _(e, t, n) {
 	let [r, i] = c(null), [a, l] = c(!0), u = s(e);
 	return u.current = e, o(() => {
 		if (!t) {
@@ -44,50 +44,49 @@ function g(e, t, n) {
 		loading: a
 	};
 }
-function _({ id: t, live: r }) {
-	let { getDataSinkData: i } = n({ skipFetch: !0 }), { data: a, loading: o } = g(async () => {
+function v({ id: t, live: r }) {
+	let { getDataSinkData: i } = n({ skipFetch: !0 }), { data: a, loading: o } = _(async () => {
 		let e = await i({ id: t }, { limit: 50 });
 		return e ? e.raw : null;
 	}, t, r);
-	return t ? o ? /* @__PURE__ */ u(m, { label: "Loading the data sink’s data…" }) : /* @__PURE__ */ u("div", {
+	return t ? o ? /* @__PURE__ */ u(h, { label: "Loading the data sink’s data…" }) : /* @__PURE__ */ u("div", {
 		"data-testid": "ai-preview-content-datasink",
+		className: "min-w-0",
 		children: /* @__PURE__ */ u(e, {
 			data: a,
 			maxHeight: "300px"
 		})
-	}) : /* @__PURE__ */ u(h, { text: "Waiting for the data sink to be created…" });
+	}) : /* @__PURE__ */ u(g, { text: "Waiting for the data sink to be created…" });
 }
-function v({ dashboardId: e }) {
+function y({ dashboardId: e }) {
 	return e ? /* @__PURE__ */ u("div", {
 		"data-testid": "ai-preview-content-dashboard",
-		className: "max-h-[340px] overflow-y-auto",
+		className: "min-w-0",
 		children: /* @__PURE__ */ u(a, {
 			dashboardId: e,
 			params: {}
 		})
-	}) : /* @__PURE__ */ u(h, { text: "Waiting for the dashboard to be created…" });
+	}) : /* @__PURE__ */ u(g, { text: "Waiting for the dashboard to be created…" });
 }
-function y({ parserId: t, live: n }) {
-	let { executeParser: i } = r({ skipFetch: !0 }), { data: a, loading: o } = g(async () => {
+function b({ parserId: t, live: n }) {
+	let { executeParser: i } = r({ skipFetch: !0 }), { data: a, loading: o } = _(async () => {
 		let e = await i(t ?? "");
 		return e ? e.output : null;
 	}, t, n);
-	return t ? o ? /* @__PURE__ */ u(m, { label: "Running the parser…" }) : /* @__PURE__ */ d("div", {
+	return t ? o ? /* @__PURE__ */ u(h, { label: "Running the parser…" }) : /* @__PURE__ */ u("div", {
 		"data-testid": "ai-preview-content-parser",
-		children: [/* @__PURE__ */ u("p", {
-			className: "mb-2 px-1 text-xs text-text-muted",
-			children: "Parser output (transformed rows):"
-		}), /* @__PURE__ */ u(e, {
+		className: "min-w-0",
+		children: /* @__PURE__ */ u(e, {
 			data: a,
 			maxHeight: "280px"
-		})]
-	}) : /* @__PURE__ */ u(h, { text: "No parser in this build — the rows were already shaped." });
+		})
+	}) : /* @__PURE__ */ u(g, { text: "No parser in this build — the rows were already shaped." });
 }
-function b(e) {
+function x(e) {
 	let t = e.toUpperCase();
-	return t.includes("METRIC") || t.includes("KPI") || t.includes("CARD") || t.includes("STAT") ? 160 : t.includes("TABLE") || t.includes("LIST") ? 280 : 320;
+	return t.includes("METRIC") || t.includes("KPI") || t.includes("CARD") || t.includes("STAT") ? "min(160px, 40vh)" : t.includes("TABLE") || t.includes("LIST") ? "min(280px, 50vh)" : "min(320px, 50vh)";
 }
-function x({ dashboardId: e, live: n }) {
+function S({ dashboardId: e, live: n }) {
 	let { widgets: r, loading: a, refetch: c } = t(void 0, e, { skipFetch: !e }), l = s(c);
 	return l.current = c, o(() => {
 		if (!e) return;
@@ -95,12 +94,12 @@ function x({ dashboardId: e, live: n }) {
 			!n || Date.now() - t > p || typeof document < "u" && document.visibilityState !== "visible" || l.current();
 		}, f);
 		return () => window.clearInterval(r);
-	}, [e, n]), e ? a && r.length === 0 ? /* @__PURE__ */ u(m, { label: "Loading widgets…" }) : r.length === 0 ? /* @__PURE__ */ u(h, { text: "No widgets on this dashboard yet." }) : /* @__PURE__ */ u("div", {
+	}, [e, n]), e ? a && r.length === 0 ? /* @__PURE__ */ u(h, { label: "Loading widgets…" }) : r.length === 0 ? /* @__PURE__ */ u(g, { text: "No widgets on this dashboard yet." }) : /* @__PURE__ */ u("div", {
 		"data-testid": "ai-preview-content-widget",
-		className: "space-y-3",
+		className: "flex min-w-0 flex-col gap-list-gap",
 		children: r.map((e) => /* @__PURE__ */ u("div", {
-			className: "overflow-hidden rounded-md border border-border-subtle bg-bg-surface",
-			style: { height: b(e.type) },
+			className: "min-w-0 overflow-hidden rounded-card border border-[var(--color-border-subtle)] bg-bg-canvas",
+			style: { height: x(e.type) },
 			children: /* @__PURE__ */ u(i, {
 				widget: e,
 				isLoading: !1,
@@ -108,9 +107,9 @@ function x({ dashboardId: e, live: n }) {
 				filterValues: {}
 			})
 		}, e.id))
-	}) : /* @__PURE__ */ u(h, { text: "Waiting for the dashboard — widgets live on it." });
+	}) : /* @__PURE__ */ u(g, { text: "Waiting for the dashboard — widgets live on it." });
 }
 //#endregion
-export { v as DashboardContent, _ as DataSinkContent, y as ParserContent, x as WidgetsContent };
+export { y as DashboardContent, v as DataSinkContent, b as ParserContent, S as WidgetsContent };
 
 //# sourceMappingURL=AiPreviewContent.js.map

package/dist/bigconsole/components/preview/AiPreviewContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"AiPreviewContent.js","names":[],"sources":["../../../../src/bigconsole/components/preview/AiPreviewContent.tsx"],"sourcesContent":["/**\n * Live content renderers for the AI preview tabs.\n *\n * Each tab shows the REAL content of the entity the assistant just built —\n * the data sink's rows, the live dashboard, the parser's transformed output,\n * the rendered widget charts — not a list with an Open button. They reuse the\n * same components the real pages use (DataSinkTableViewer, DrilldownDashboard-\n * Renderer, WidgetWrapper) so what you see in the preview is what you get.\n *\n * These require Apollo + the BigConsole providers, which is why they live only\n * in the full AiPreviewPanel (mounted inside BigConsoleRoot), never in the\n * store-only app-shell mini panel.\n */\nimport { useEffect, useRef, useState } from 'react';\nimport { Spinner } from '@burdenoff/fe-libs/ui';\n\nimport { DataSinkTableViewer } from '../datasink/DataSinkTableViewer';\nimport { DrilldownDashboardRenderer } from '../DrilldownDashboardRenderer';\nimport { WidgetWrapper } from '../widgets/WidgetWrapper';\nimport { useDataSinkOperations } from '../../hooks/useDataSinkOperations';\nimport { useParserOperations } from '../../hooks/useParserOperations';\nimport { useWidgetOperations } from '../../hooks/useWidgetOperations';\n\n/** While the build is live, re-pull content on this cadence so it fills in. */\nconst CONTENT_POLL_MS = 4000;\n/** Stop the live re-pull after this long even if the turn is still running. */\nconst CONTENT_POLL_WINDOW_MS = 60_000;\n\nfunction CenteredSpinner({ label }: { label: string }) {\n  return (\n    <div className=\"flex items-center gap-2 px-1 py-8 text-sm text-text-muted\">\n      <Spinner className=\"size-4\" />\n      {label}\n    </div>\n  );\n}\n\nfunction Waiting({ text }: { text: string }) {\n  return <p className=\"px-1 py-8 text-sm text-text-muted\">{text}</p>;\n}\n\n/**\n * Fetch-on-mount, then re-fetch every CONTENT_POLL_MS while `live`, bounded to\n * CONTENT_POLL_WINDOW_MS. Returns { data, loading, done }. `fetcher` must be\n * stable-ish; we hold it in a ref so the effect keys only on `key`/`live`.\n */\nfunction useLiveContent<T>(fetcher: () => Promise<T | null>, key: string | undefined, live: boolean) {\n  const [data, setData] = useState<T | null>(null);\n  const [loading, setLoading] = useState(true);\n  const fetcherRef = useRef(fetcher);\n  fetcherRef.current = fetcher;\n\n  useEffect(() => {\n    if (!key) {\n      setLoading(false);\n      return;\n    }\n    let cancelled = false;\n    const startedAt = Date.now();\n    const pull = async () => {\n      const result = await fetcherRef.current();\n      if (cancelled) return;\n      if (result !== null && result !== undefined) setData(result);\n      setLoading(false);\n    };\n    void pull();\n    const intervalId = window.setInterval(() => {\n      if (!live || Date.now() - startedAt > CONTENT_POLL_WINDOW_MS) return;\n      if (typeof document !== 'undefined' && document.visibilityState !== 'visible') return;\n      void pull();\n    }, CONTENT_POLL_MS);\n    return () => {\n      cancelled = true;\n      window.clearInterval(intervalId);\n    };\n  }, [key, live]);\n\n  return { data, loading };\n}\n\nexport function DataSinkContent({ id, live }: { id?: string; live: boolean }) {\n  const { getDataSinkData } = useDataSinkOperations({ skipFetch: true });\n  const { data, loading } = useLiveContent(\n    async () => {\n      const res = await getDataSinkData({ id }, { limit: 50 });\n      return res ? res.raw : null;\n    },\n    id,\n    live\n  );\n\n  if (!id) return <Waiting text=\"Waiting for the data sink to be created…\" />;\n  if (loading) return <CenteredSpinner label=\"Loading the data sink’s data…\" />;\n  return (\n    <div data-testid=\"ai-preview-content-datasink\">\n      <DataSinkTableViewer data={data} maxHeight=\"300px\" />\n    </div>\n  );\n}\n\nexport function DashboardContent({ dashboardId }: { dashboardId?: string }) {\n  if (!dashboardId) return <Waiting text=\"Waiting for the dashboard to be created…\" />;\n  return (\n    <div data-testid=\"ai-preview-content-dashboard\" className=\"max-h-[340px] overflow-y-auto\">\n      <DrilldownDashboardRenderer dashboardId={dashboardId} params={{}} />\n    </div>\n  );\n}\n\nexport function ParserContent({ parserId, live }: { parserId?: string; live: boolean }) {\n  const { executeParser } = useParserOperations({ skipFetch: true });\n  const { data, loading } = useLiveContent(\n    async () => {\n      const res = await executeParser(parserId ?? '');\n      return res ? res.output : null;\n    },\n    parserId,\n    live\n  );\n\n  if (!parserId) return <Waiting text=\"No parser in this build — the rows were already shaped.\" />;\n  if (loading) return <CenteredSpinner label=\"Running the parser…\" />;\n  return (\n    <div data-testid=\"ai-preview-content-parser\">\n      <p className=\"mb-2 px-1 text-xs text-text-muted\">Parser output (transformed rows):</p>\n      <DataSinkTableViewer data={data} maxHeight=\"280px\" />\n    </div>\n  );\n}\n\n/** Recharts needs a definite pixel height or it renders 0px tall. */\nfunction widgetBoxHeight(type: string): number {\n  const t = type.toUpperCase();\n  if (t.includes('METRIC') || t.includes('KPI') || t.includes('CARD') || t.includes('STAT')) return 160;\n  if (t.includes('TABLE') || t.includes('LIST')) return 280;\n  return 320;\n}\n\nexport function WidgetsContent({ dashboardId, live }: { dashboardId?: string; live: boolean }) {\n  const { widgets, loading, refetch } = useWidgetOperations(undefined, dashboardId, {\n    skipFetch: !dashboardId,\n  });\n\n  const refetchRef = useRef(refetch);\n  refetchRef.current = refetch;\n  useEffect(() => {\n    if (!dashboardId) return;\n    const startedAt = Date.now();\n    const intervalId = window.setInterval(() => {\n      if (!live || Date.now() - startedAt > CONTENT_POLL_WINDOW_MS) return;\n      if (typeof document !== 'undefined' && document.visibilityState !== 'visible') return;\n      void refetchRef.current();\n    }, CONTENT_POLL_MS);\n    return () => window.clearInterval(intervalId);\n  }, [dashboardId, live]);\n\n  if (!dashboardId) return <Waiting text=\"Waiting for the dashboard — widgets live on it.\" />;\n  if (loading && widgets.length === 0) return <CenteredSpinner label=\"Loading widgets…\" />;\n  if (widgets.length === 0) return <Waiting text=\"No widgets on this dashboard yet.\" />;\n\n  return (\n    <div data-testid=\"ai-preview-content-widget\" className=\"space-y-3\">\n      {widgets.map((widget) => (\n        <div\n          key={widget.id}\n          className=\"overflow-hidden rounded-md border border-border-subtle bg-bg-surface\"\n          style={{ height: widgetBoxHeight(widget.type) }}\n        >\n          <WidgetWrapper widget={widget} isLoading={false} error={null} filterValues={{}} />\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"AiPreviewContent.js","names":[],"sources":["../../../../src/bigconsole/components/preview/AiPreviewContent.tsx"],"sourcesContent":["/**\n * Live content renderers for the AI preview tabs.\n *\n * Each tab shows the REAL content of the entity the assistant just built —\n * the data sink's rows, the live dashboard, the parser's transformed output,\n * the rendered widget charts — not a list with an Open button. They reuse the\n * same components the real pages use (DataSinkTableViewer, DrilldownDashboard-\n * Renderer, WidgetWrapper) so what you see in the preview is what you get.\n *\n * These require Apollo + the BigConsole providers, which is why they live only\n * in the full AiPreviewPanel (mounted inside BigConsoleRoot), never in the\n * store-only app-shell mini panel.\n */\nimport { useEffect, useRef, useState } from 'react';\nimport { Spinner } from '@burdenoff/fe-libs/ui';\n\nimport { DataSinkTableViewer } from '../datasink/DataSinkTableViewer';\nimport { DrilldownDashboardRenderer } from '../DrilldownDashboardRenderer';\nimport { WidgetWrapper } from '../widgets/WidgetWrapper';\nimport { useDataSinkOperations } from '../../hooks/useDataSinkOperations';\nimport { useParserOperations } from '../../hooks/useParserOperations';\nimport { useWidgetOperations } from '../../hooks/useWidgetOperations';\n\n/** While the build is live, re-pull content on this cadence so it fills in. */\nconst CONTENT_POLL_MS = 4000;\n/** Stop the live re-pull after this long even if the turn is still running. */\nconst CONTENT_POLL_WINDOW_MS = 60_000;\n\n/**\n * Loading and waiting states share one recessed, height-reserved block so the\n * panel does not jump every time a tab fills in — previously each tab had its\n * own bare paragraph and its own height.\n */\nconst PLACEHOLDER_BOX =\n  'flex min-h-[6rem] min-w-0 items-center justify-center gap-2 rounded-card bg-bg-sunken px-3 py-6 text-center text-sm text-text-muted';\n\nfunction CenteredSpinner({ label }: { label: string }) {\n  return (\n    <div className={PLACEHOLDER_BOX}>\n      <Spinner className=\"size-4 shrink-0\" />\n      {label}\n    </div>\n  );\n}\n\nfunction Waiting({ text }: { text: string }) {\n  return <p className={PLACEHOLDER_BOX}>{text}</p>;\n}\n\n/**\n * Fetch-on-mount, then re-fetch every CONTENT_POLL_MS while `live`, bounded to\n * CONTENT_POLL_WINDOW_MS. Returns { data, loading, done }. `fetcher` must be\n * stable-ish; we hold it in a ref so the effect keys only on `key`/`live`.\n */\nfunction useLiveContent<T>(fetcher: () => Promise<T | null>, key: string | undefined, live: boolean) {\n  const [data, setData] = useState<T | null>(null);\n  const [loading, setLoading] = useState(true);\n  const fetcherRef = useRef(fetcher);\n  fetcherRef.current = fetcher;\n\n  useEffect(() => {\n    if (!key) {\n      setLoading(false);\n      return;\n    }\n    let cancelled = false;\n    const startedAt = Date.now();\n    const pull = async () => {\n      const result = await fetcherRef.current();\n      if (cancelled) return;\n      if (result !== null && result !== undefined) setData(result);\n      setLoading(false);\n    };\n    void pull();\n    const intervalId = window.setInterval(() => {\n      if (!live || Date.now() - startedAt > CONTENT_POLL_WINDOW_MS) return;\n      if (typeof document !== 'undefined' && document.visibilityState !== 'visible') return;\n      void pull();\n    }, CONTENT_POLL_MS);\n    return () => {\n      cancelled = true;\n      window.clearInterval(intervalId);\n    };\n  }, [key, live]);\n\n  return { data, loading };\n}\n\nexport function DataSinkContent({ id, live }: { id?: string; live: boolean }) {\n  const { getDataSinkData } = useDataSinkOperations({ skipFetch: true });\n  const { data, loading } = useLiveContent(\n    async () => {\n      const res = await getDataSinkData({ id }, { limit: 50 });\n      return res ? res.raw : null;\n    },\n    id,\n    live\n  );\n\n  if (!id) return <Waiting text=\"Waiting for the data sink to be created…\" />;\n  if (loading) return <CenteredSpinner label=\"Loading the data sink’s data…\" />;\n  return (\n    <div data-testid=\"ai-preview-content-datasink\" className=\"min-w-0\">\n      <DataSinkTableViewer data={data} maxHeight=\"300px\" />\n    </div>\n  );\n}\n\nexport function DashboardContent({ dashboardId }: { dashboardId?: string }) {\n  if (!dashboardId) return <Waiting text=\"Waiting for the dashboard to be created…\" />;\n  // No inner `max-h + overflow-y-auto`: the panel already owns a vertical\n  // scroll, and nesting a second one put two scrollbars in ~440px of space.\n  return (\n    <div data-testid=\"ai-preview-content-dashboard\" className=\"min-w-0\">\n      <DrilldownDashboardRenderer dashboardId={dashboardId} params={{}} />\n    </div>\n  );\n}\n\nexport function ParserContent({ parserId, live }: { parserId?: string; live: boolean }) {\n  const { executeParser } = useParserOperations({ skipFetch: true });\n  const { data, loading } = useLiveContent(\n    async () => {\n      const res = await executeParser(parserId ?? '');\n      return res ? res.output : null;\n    },\n    parserId,\n    live\n  );\n\n  if (!parserId) return <Waiting text=\"No parser in this build — the rows were already shaped.\" />;\n  if (loading) return <CenteredSpinner label=\"Running the parser…\" />;\n  // The \"Parser output (transformed rows)\" caption used to sit here; it now\n  // lives on the section header, so the tab does not label itself twice.\n  return (\n    <div data-testid=\"ai-preview-content-parser\" className=\"min-w-0\">\n      <DataSinkTableViewer data={data} maxHeight=\"280px\" />\n    </div>\n  );\n}\n\n/**\n * Recharts needs a definite height or it renders 0px tall, but a hard 320px box\n * eats a short viewport whole. `min(px, vh)` keeps the definite height Recharts\n * needs while letting the box shrink on small screens.\n */\nfunction widgetBoxHeight(type: string): string {\n  const t = type.toUpperCase();\n  if (t.includes('METRIC') || t.includes('KPI') || t.includes('CARD') || t.includes('STAT')) return 'min(160px, 40vh)';\n  if (t.includes('TABLE') || t.includes('LIST')) return 'min(280px, 50vh)';\n  return 'min(320px, 50vh)';\n}\n\nexport function WidgetsContent({ dashboardId, live }: { dashboardId?: string; live: boolean }) {\n  const { widgets, loading, refetch } = useWidgetOperations(undefined, dashboardId, {\n    skipFetch: !dashboardId,\n  });\n\n  const refetchRef = useRef(refetch);\n  refetchRef.current = refetch;\n  useEffect(() => {\n    if (!dashboardId) return;\n    const startedAt = Date.now();\n    const intervalId = window.setInterval(() => {\n      if (!live || Date.now() - startedAt > CONTENT_POLL_WINDOW_MS) return;\n      if (typeof document !== 'undefined' && document.visibilityState !== 'visible') return;\n      void refetchRef.current();\n    }, CONTENT_POLL_MS);\n    return () => window.clearInterval(intervalId);\n  }, [dashboardId, live]);\n\n  if (!dashboardId) return <Waiting text=\"Waiting for the dashboard — widgets live on it.\" />;\n  if (loading && widgets.length === 0) return <CenteredSpinner label=\"Loading widgets…\" />;\n  if (widgets.length === 0) return <Waiting text=\"No widgets on this dashboard yet.\" />;\n\n  return (\n    <div data-testid=\"ai-preview-content-widget\" className=\"flex min-w-0 flex-col gap-list-gap\">\n      {widgets.map((widget) => (\n        <div\n          key={widget.id}\n          // `border-border-subtle` is registered as a frozen light hex in this\n          // shell, so the box kept a light border in dark mode.\n          className=\"min-w-0 overflow-hidden rounded-card border border-[var(--color-border-subtle)] bg-bg-canvas\"\n          style={{ height: widgetBoxHeight(widget.type) }}\n        >\n          <WidgetWrapper widget={widget} isLoading={false} error={null} filterValues={{}} />\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/bigconsole/components/preview/AiPreviewMiniPanel.js

@@ -1,133 +1,182 @@
-import { useAssistantRunStore as e } from "../../assistant/assistantRunStore.js";
-import { StepRail as t, formatAgo as n, useAssistantSidebarWidth as r } from "./previewShared.js";
-import { useEffect as i, useState as a } from "react";
-import { ArrowUpRight as o, Loader2 as s, Sparkles as c, X as l } from "lucide-react";
-import { Button as u } from "@burdenoff/fe-libs/ui";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { Section as e } from "../common/Section.js";
+import "../common/index.js";
+import { useAssistantRunStore as t } from "../../assistant/assistantRunStore.js";
+import { PREVIEW_CHROME_DIVIDER as n, PREVIEW_PANEL_SHELL as r, StepRail as i, formatAgo as a, useAssistantSidebarWidth as o } from "./previewShared.js";
+import { useEffect as s, useState as c } from "react";
+import { AlertCircle as l, ArrowUpRight as u, Braces as d, Database as f, LayoutDashboard as p, Loader2 as m, Sparkles as h, X as g } from "lucide-react";
+import { useI18n as _ } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Button as v } from "@burdenoff/fe-libs/ui";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
 //#region src/bigconsole/components/preview/AiPreviewMiniPanel.tsx
-function p({ onNavigate: p }) {
-	let m = e((e) => e.isRunning), h = e((e) => e.previewOpen), g = e((e) => e.hasRun), _ = e((e) => e.richMounted), v = e((e) => e.steps), y = e((e) => e.entityIds), b = e((e) => e.caption), x = e((e) => e.error), S = e((e) => e.updatedAt), C = e((e) => e.openPreview), w = e((e) => e.closePreview), [T, E] = a(() => Date.now());
-	i(() => {
-		if (!m) return;
-		let e = window.setInterval(() => E(Date.now()), 1e3);
+function x({ onNavigate: x }) {
+	let { t: S } = _(), C = t((e) => e.isRunning), w = t((e) => e.previewOpen), T = t((e) => e.hasRun), E = t((e) => e.richMounted), D = t((e) => e.steps), O = t((e) => e.entityIds), k = t((e) => e.caption), A = t((e) => e.error), j = t((e) => e.updatedAt), M = t((e) => e.openPreview), N = t((e) => e.closePreview), [P, F] = c(() => Date.now());
+	s(() => {
+		if (!C) return;
+		let e = window.setInterval(() => F(Date.now()), 1e3);
 		return () => window.clearInterval(e);
-	}, [m]);
-	let D = r(), O = (e) => {
-		p ? p(e) : typeof window < "u" && window.location.assign(e);
+	}, [C]);
+	let I = o(), L = (e) => {
+		x ? x(e) : typeof window < "u" && window.location.assign(e);
 	};
-	if (!g || _) return null;
-	if (!h) return /* @__PURE__ */ d("div", {
-		className: "flex justify-end px-4 pt-1 md:px-6",
-		style: { marginRight: D },
-		children: /* @__PURE__ */ f(u, {
+	if (!T || E) return null;
+	if (!w) return /* @__PURE__ */ b("div", {
+		className: "flex flex-wrap items-center justify-end gap-control-gap px-4 pt-3 md:px-6",
+		style: { marginRight: I },
+		children: [/* @__PURE__ */ y("span", {
+			className: "text-xs text-text-muted",
+			children: C ? "AI build running" : "AI build finished"
+		}), /* @__PURE__ */ b(v, {
 			size: "sm",
 			variant: "outline",
-			onClick: C,
+			onClick: M,
 			"data-testid": "ai-preview-open",
 			children: [
-				/* @__PURE__ */ d(c, { className: "mr-1.5 size-4" }),
-				"Preview",
-				m ? /* @__PURE__ */ d(s, { className: "ml-1.5 size-3.5 animate-spin" }) : null
+				/* @__PURE__ */ y(h, { className: "mr-1.5 size-4" }),
+				S("bigconsole.widget.aiPreviewMini.previewButton", "Preview"),
+				C ? /* @__PURE__ */ y(m, { className: "ml-1.5 size-3.5 animate-spin" }) : null
 			]
-		})
+		})]
 	});
-	let k = S ? Math.max(0, Math.floor((T - S) / 1e3)) : 0, A = [];
-	return y.datasink && A.push({
+	let R = j ? Math.max(0, Math.floor((P - j) / 1e3)) : 0, z = [];
+	return O.datasink && z.push({
 		key: "datasink",
-		label: "Data Sink",
-		path: `/bigconsole/datasinks/${y.datasink}`
-	}), y.dashboard && A.push({
+		label: S("bigconsole.widget.aiPreviewMini.link.dataSink", "Data Sink"),
+		path: `/bigconsole/datasinks/${O.datasink}`,
+		icon: /* @__PURE__ */ y(f, {
+			className: "size-4 shrink-0 text-text-muted",
+			"aria-hidden": "true"
+		})
+	}), O.dashboard && z.push({
 		key: "dashboard",
-		label: "Dashboard",
-		path: `/bigconsole/dashboards/${y.dashboard}`
-	}), y.parser && A.push({
+		label: S("bigconsole.widget.aiPreviewMini.link.dashboard", "Dashboard"),
+		path: `/bigconsole/dashboards/${O.dashboard}`,
+		icon: /* @__PURE__ */ y(p, {
+			className: "size-4 shrink-0 text-text-muted",
+			"aria-hidden": "true"
+		})
+	}), O.parser && z.push({
 		key: "parser",
-		label: "Parser",
-		path: `/bigconsole/parsers/${y.parser}`
-	}), /* @__PURE__ */ f("section", {
+		label: S("bigconsole.widget.aiPreviewMini.link.parser", "Parser"),
+		path: `/bigconsole/parsers/${O.parser}`,
+		icon: /* @__PURE__ */ y(d, {
+			className: "size-4 shrink-0 text-text-muted",
+			"aria-hidden": "true"
+		})
+	}), /* @__PURE__ */ b("section", {
 		"data-testid": "ai-preview-panel",
 		"data-variant": "mini",
-		"aria-label": "AI preview",
-		style: { marginRight: D ? D + 16 : void 0 },
-		className: "mx-4 mt-1 mb-3 overflow-hidden rounded-lg border border-border-default bg-bg-sunken shadow-sm md:mx-6",
+		"aria-label": S("bigconsole.widget.aiPreviewMini.ariaLabel", "AI preview"),
+		style: { marginRight: I ? I + 16 : void 0 },
+		className: `${r} mx-4 mt-3 mb-3 md:mx-6`,
 		children: [
-			/* @__PURE__ */ f("div", {
-				className: "flex items-center justify-between gap-3 border-b border-border-subtle bg-bg-surface px-3 py-2",
-				children: [/* @__PURE__ */ f("div", {
-					className: "flex min-w-0 items-center gap-2",
-					children: [
-						/* @__PURE__ */ d(c, { className: "size-4 shrink-0 text-action-primary-bg" }),
-						/* @__PURE__ */ d("h2", {
-							className: "truncate text-sm font-semibold text-text-primary",
-							children: "AI Preview"
-						}),
-						m ? /* @__PURE__ */ f("span", {
-							className: "inline-flex items-center gap-1.5 rounded-full bg-status-success-bg px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-status-success-text",
-							"data-testid": "ai-preview-live",
-							children: [/* @__PURE__ */ f("span", {
-								className: "relative flex size-2",
-								children: [/* @__PURE__ */ d("span", { className: "absolute inline-flex size-full animate-ping rounded-full bg-status-success-text opacity-75" }), /* @__PURE__ */ d("span", { className: "relative inline-flex size-2 rounded-full bg-status-success-text" })]
-							}), "Live"]
-						}) : null,
-						/* @__PURE__ */ f("span", {
-							className: "truncate text-xs text-text-muted",
-							"data-testid": "ai-preview-ago",
-							children: [
-								m ? b || "Working…" : x ? "Stopped" : "Done",
-								" · updated",
-								" ",
-								n(k)
-							]
-						})
-					]
-				}), /* @__PURE__ */ d(u, {
+			/* @__PURE__ */ b("div", {
+				className: `flex items-start justify-between gap-control-gap bg-bg-surface px-3 py-2 ${n}`,
+				children: [/* @__PURE__ */ b("div", {
+					className: "flex min-w-0 flex-col gap-0.5",
+					children: [/* @__PURE__ */ b("div", {
+						className: "flex min-w-0 flex-wrap items-center gap-2",
+						children: [
+							/* @__PURE__ */ y(h, { className: "size-4 shrink-0 text-action-primary-bg" }),
+							/* @__PURE__ */ y("h2", {
+								className: "text-sm font-semibold text-text-primary",
+								children: S("bigconsole.widget.aiPreviewMini.title", "AI Preview")
+							}),
+							C ? /* @__PURE__ */ b("span", {
+								className: "inline-flex items-center gap-1.5 rounded-full bg-status-success-bg px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-status-success-text",
+								"data-testid": "ai-preview-live",
+								children: [/* @__PURE__ */ b("span", {
+									className: "relative flex size-2",
+									children: [/* @__PURE__ */ y("span", { className: "absolute inline-flex size-full rounded-full bg-status-success-text opacity-75 motion-safe:animate-ping" }), /* @__PURE__ */ y("span", { className: "relative inline-flex size-2 rounded-full bg-status-success-text" })]
+								}), S("bigconsole.widget.aiPreviewMini.live", "Live")]
+							}) : null
+						]
+					}), /* @__PURE__ */ b("span", {
+						className: "min-w-0 break-words text-xs text-text-muted",
+						"data-testid": "ai-preview-ago",
+						children: [
+							C ? k || S("bigconsole.widget.aiPreviewMini.working", "Working…") : A ? S("bigconsole.widget.aiPreviewMini.stopped", "Stopped") : S("bigconsole.widget.aiPreviewMini.done", "Done"),
+							" ",
+							"· ",
+							S("bigconsole.widget.aiPreviewMini.updated", "updated"),
+							" ",
+							a(R)
+						]
+					})]
+				}), /* @__PURE__ */ y(v, {
 					size: "sm",
 					variant: "ghost",
-					onClick: w,
-					"aria-label": "Close preview",
+					onClick: N,
+					"aria-label": S("bigconsole.widget.aiPreviewMini.closeAriaLabel", "Close preview"),
 					"data-testid": "ai-preview-close",
-					children: /* @__PURE__ */ d(l, { className: "size-4" })
+					children: /* @__PURE__ */ y(g, { className: "size-4" })
 				})]
 			}),
-			/* @__PURE__ */ d("div", {
-				className: "border-b border-border-subtle px-3 py-2",
-				children: /* @__PURE__ */ d(t, { steps: v })
+			/* @__PURE__ */ b("div", {
+				className: `px-3 py-2 ${n}`,
+				children: [/* @__PURE__ */ y("h3", {
+					className: "mb-1 text-[11px] font-semibold uppercase tracking-wide text-text-muted",
+					children: "Build progress"
+				}), /* @__PURE__ */ y(i, { steps: D })]
 			}),
-			/* @__PURE__ */ f("div", {
-				className: "space-y-2 p-3",
-				children: [A.length === 0 ? /* @__PURE__ */ d("p", {
-					className: "px-1 py-4 text-sm text-text-muted",
-					children: m ? "Building… links appear here as each piece is created." : "Nothing built yet."
-				}) : A.map((e) => /* @__PURE__ */ f("div", {
-					"data-testid": "ai-preview-row",
-					className: "flex items-center justify-between gap-3 rounded-md border border-border-subtle bg-bg-surface px-3 py-2",
-					children: [/* @__PURE__ */ f("p", {
-						className: "truncate text-sm font-medium text-text-primary",
-						children: [e.label, " ready"]
-					}), /* @__PURE__ */ f(u, {
+			/* @__PURE__ */ y("div", {
+				className: "p-3",
+				children: /* @__PURE__ */ b(e, {
+					emphasis: "standard",
+					padding: "compact",
+					headingLevel: 3,
+					title: "Built so far",
+					description: "Open any piece to see the real thing.",
+					bodyClassName: "flex flex-col gap-list-gap",
+					children: [z.length === 0 ? /* @__PURE__ */ y("p", {
+						className: "text-sm text-text-muted",
+						children: C ? S("bigconsole.widget.aiPreviewMini.building", "Building… links appear here as each piece is created.") : S("bigconsole.widget.aiPreviewMini.nothingBuilt", "Nothing built yet.")
+					}) : z.map((e) => /* @__PURE__ */ b("div", {
+						"data-testid": "ai-preview-row",
+						className: "flex min-w-0 items-center justify-between gap-control-gap rounded-card border border-[var(--color-border-subtle)] bg-bg-canvas px-3 py-2",
+						children: [/* @__PURE__ */ b("p", {
+							className: "flex min-w-0 items-center gap-icon-gap text-sm font-medium text-text-primary",
+							children: [e.icon, /* @__PURE__ */ y("span", {
+								className: "truncate",
+								children: S("bigconsole.widget.aiPreviewMini.linkReady", "{{label}} ready", { label: e.label })
+							})]
+						}), /* @__PURE__ */ b(v, {
+							size: "sm",
+							variant: "ghost",
+							onClick: () => L(e.path),
+							children: [S("bigconsole.widget.aiPreviewMini.open", "Open"), /* @__PURE__ */ y(u, { className: "ml-1 size-3.5" })]
+						})]
+					}, e.key)), O.dashboard ? /* @__PURE__ */ b(v, {
 						size: "sm",
-						variant: "ghost",
-						onClick: () => O(e.path),
-						children: ["Open", /* @__PURE__ */ d(o, { className: "ml-1 size-3.5" })]
-					})]
-				}, e.key)), y.dashboard ? /* @__PURE__ */ f(u, {
-					size: "sm",
-					variant: "outline",
-					className: "w-full",
-					"data-testid": "ai-preview-open-in-bigconsole",
-					onClick: () => O(`/bigconsole/dashboards/${y.dashboard ?? ""}`),
-					children: ["Open in BigConsole for the live view", /* @__PURE__ */ d(o, { className: "ml-1 size-3.5" })]
-				}) : null]
+						variant: "outline",
+						className: "h-auto w-full whitespace-normal py-1.5 text-center",
+						"data-testid": "ai-preview-open-in-bigconsole",
+						onClick: () => L(`/bigconsole/dashboards/${O.dashboard ?? ""}`),
+						children: [S("bigconsole.widget.aiPreviewMini.openInBigConsole", "Open in BigConsole for the live view"), /* @__PURE__ */ y(u, { className: "ml-1 size-3.5" })]
+					}) : null]
+				})
 			}),
-			x ? /* @__PURE__ */ d("p", {
-				className: "border-t border-border-subtle px-3 py-2 text-xs text-status-error-text",
-				"data-testid": "ai-preview-error",
-				children: x
+			A ? /* @__PURE__ */ b("div", {
+				role: "alert",
+				className: "border-t border-[var(--color-status-error-border)] bg-[var(--color-status-error-bgSubtle)] px-3 py-2",
+				children: [/* @__PURE__ */ y("h3", {
+					className: "text-[11px] font-semibold uppercase tracking-wide text-[var(--color-status-error-text)]",
+					children: "Build stopped"
+				}), /* @__PURE__ */ b("p", {
+					className: "mt-0.5 flex items-start gap-icon-gap text-xs text-[var(--color-status-error-text)]",
+					"data-testid": "ai-preview-error",
+					children: [/* @__PURE__ */ y(l, {
+						className: "mt-0.5 size-3.5 shrink-0",
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ y("span", {
+						className: "min-w-0 break-words",
+						children: A
+					})]
+				})]
 			}) : null
 		]
 	});
 }
 //#endregion
-export { p as default };
+export { x as default };
 
 //# sourceMappingURL=AiPreviewMiniPanel.js.map