@burdenoff/microfe-bigconsole 2026.624.2 → 2026.626.1

package/dist/bigconsole/pages/PipelineViewPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"PipelineViewPage.js","names":[],"sources":["../../../src/bigconsole/pages/PipelineViewPage.tsx"],"sourcesContent":["/**\n * Pipeline View Page\n *\n * Display Pipeline details, stages, and execution history.\n * Supports testing pipeline with sample input.\n */\n\nimport { memo, useState, useCallback, useEffect } from 'react';\nimport { useParams, useSearchParams } from 'react-router-dom';\nimport { useAppNavigate } from '../contexts';\nimport { isNative, nativeNotify } from '../../utils/nativeBridge';\nimport { usePipelineOperations } from '../hooks/usePipelineOperations';\nimport { usePipelineStore } from '../store/pipelineStore';\nimport { PipelineStatusBadge } from '../components/pipeline/PipelineStatusBadge';\nimport { PipelineDeleteDialog } from '../components/pipeline/PipelineDeleteDialog';\nimport type { Pipeline, PipelineExecution, PipelineStage } from '../types';\n\n// ============================================================================\n// ICONS\n// ============================================================================\n\nconst BackIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M10 19l-7-7m0 0l7-7m-7 7h18\" />\n  </svg>\n);\n\nconst EditIcon = ({ 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=\"M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z\"\n    />\n  </svg>\n);\n\nconst DeleteIcon = ({ 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=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"\n    />\n  </svg>\n);\n\nconst PlayIcon = ({ 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=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z\"\n    />\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n  </svg>\n);\n\nconst ErrorIcon = ({ 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 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n    />\n  </svg>\n);\n\nconst CheckIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 13l4 4L19 7\" />\n  </svg>\n);\n\nconst ArrowRightIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M14 5l7 7m0 0l-7 7m7-7H3\" />\n  </svg>\n);\n\n// ============================================================================\n// STAGE ERROR BADGE\n// ============================================================================\n\nconst StageErrorBadge = ({ handling }: { handling: string }) => {\n  const config = {\n    fail: { label: 'Fail', className: 'bg-state-error/10 text-state-error' },\n    skip: { label: 'Skip', className: 'bg-state-warning/10 text-state-warning' },\n    fallback: { label: 'Fallback', className: 'bg-action-primary-bg/10 text-action-primary-bg' },\n  };\n  const c = config[handling as keyof typeof config] || config.fail;\n  return <span className={`px-1.5 py-0.5 text-xs font-medium rounded ${c.className}`}>{c.label}</span>;\n};\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const PipelineViewPage = memo(function PipelineViewPage() {\n  const { pipelineId } = useParams<{ pipelineId: string }>();\n  const navigate = useAppNavigate();\n  // Use default consoleId for now (should come from context in production)\n  const consoleId = 'default';\n  const [searchParams] = useSearchParams();\n\n  // Local state\n  const [pipeline, setPipeline] = useState<Pipeline | null>(null);\n  const [testInput, setTestInput] = useState('{\\n  \"data\": \"sample\"\\n}');\n  const [testResult, setTestResult] = useState<PipelineExecution | null>(null);\n  const [showTestPanel, setShowTestPanel] = useState(searchParams.get('test') === 'true');\n\n  // Store state\n  const deleteDialogOpen = usePipelineStore((state) => state.deleteDialogOpen);\n  const openDeleteDialog = usePipelineStore((state) => state.openDeleteDialog);\n  const closeDeleteDialog = usePipelineStore((state) => state.closeDeleteDialog);\n\n  // Operations\n  const { loading, error, fetchPipeline, deletePipeline, testPipeline } = usePipelineOperations({\n    consoleId,\n    skipFetch: true,\n  });\n\n  // Fetch pipeline on mount\n  useEffect(() => {\n    if (pipelineId) {\n      fetchPipeline(pipelineId).then((result) => {\n        if (result) {\n          setPipeline(result);\n        }\n      });\n    }\n  }, [pipelineId, fetchPipeline]);\n\n  // Handlers\n  const handleBack = useCallback(() => {\n    navigate(`/pipelines`);\n  }, [navigate]);\n\n  const handleEdit = useCallback(() => {\n    navigate(`/pipelines/${pipelineId}/edit`);\n  }, [navigate, pipelineId]);\n\n  const handleDeleteClick = useCallback(() => {\n    if (pipeline) {\n      openDeleteDialog(pipeline);\n    }\n  }, [pipeline, openDeleteDialog]);\n\n  const handleDeleteConfirm = useCallback(async () => {\n    if (pipeline) {\n      const success = await deletePipeline(pipeline.id);\n      if (success) {\n        if (isNative()) void nativeNotify('success');\n        closeDeleteDialog();\n        navigate(`/pipelines`);\n      } else if (isNative()) {\n        void nativeNotify('error');\n      }\n    }\n  }, [pipeline, deletePipeline, closeDeleteDialog, navigate]);\n\n  const handleViewParser = useCallback(\n    (parserId: string) => {\n      navigate(`/dashboards/${consoleId}/parsers/${parserId}`);\n    },\n    [navigate, consoleId]\n  );\n\n  const handleTest = useCallback(async () => {\n    if (!pipeline) return;\n\n    try {\n      const result = await testPipeline({\n        pipelineId: pipeline.id,\n        inputData: testInput,\n      });\n      if (result) {\n        setTestResult(result);\n      }\n    } catch (err) {}\n  }, [pipeline, testPipeline, testInput]);\n\n  // Loading state\n  if (loading && !pipeline) {\n    return (\n      <div className=\"p-6\">\n        <div className=\"flex flex-col items-center justify-center py-16\">\n          <svg className=\"w-8 h-8 text-action-primary-bg animate-spin mb-4\" fill=\"none\" viewBox=\"0 0 24 24\">\n            <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\n            <path\n              className=\"opacity-75\"\n              fill=\"currentColor\"\n              d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n            />\n          </svg>\n          <p className=\"text-sm text-text-secondary\">Loading Pipeline...</p>\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (error) {\n    return (\n      <div className=\"p-6\">\n        <div className=\"flex flex-col items-center justify-center py-16 text-center\">\n          <div className=\"p-3 rounded-full bg-state-error/10 mb-4\">\n            <ErrorIcon className=\"w-8 h-8 text-state-error\" />\n          </div>\n          <h3 className=\"text-lg font-medium text-text-primary mb-2\">Failed to load Pipeline</h3>\n          <p className=\"text-sm text-text-secondary mb-4\">{error.message}</p>\n          <button\n            type=\"button\"\n            onClick={handleBack}\n            className=\"px-4 py-2 text-sm font-medium text-action-primary-fg bg-action-primary-bg hover:bg-action-primary-bgHover rounded-md transition-colors\"\n          >\n            Back to Pipelines\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  // Not found state\n  if (!pipeline) {\n    return (\n      <div className=\"p-6\">\n        <div className=\"flex flex-col items-center justify-center py-16 text-center\">\n          <h3 className=\"text-lg font-medium text-text-primary mb-2\">Pipeline not found</h3>\n          <p className=\"text-sm text-text-secondary mb-4\">\n            The pipeline you&apos;re looking for doesn&apos;t exist or has been deleted.\n          </p>\n          <button\n            type=\"button\"\n            onClick={handleBack}\n            className=\"px-4 py-2 text-sm font-medium text-action-primary-fg bg-action-primary-bg hover:bg-action-primary-bgHover rounded-md transition-colors\"\n          >\n            Back to Pipelines\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"p-6\">\n      {/* Header */}\n      <div className=\"flex items-center justify-between mb-6\">\n        <div className=\"flex items-center gap-4\">\n          <button\n            type=\"button\"\n            onClick={handleBack}\n            className=\"p-2 text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-md transition-colors\"\n          >\n            <BackIcon className=\"w-5 h-5\" />\n          </button>\n          <div>\n            <div className=\"flex items-center gap-3\">\n              <h1 className=\"text-2xl font-bold text-text-primary\">{pipeline.name}</h1>\n              <PipelineStatusBadge status={pipeline.status} />\n            </div>\n            {pipeline.description && <p className=\"text-sm text-text-secondary mt-1\">{pipeline.description}</p>}\n          </div>\n        </div>\n\n        <div className=\"flex items-center gap-2\">\n          <button\n            type=\"button\"\n            onClick={() => setShowTestPanel(!showTestPanel)}\n            className=\"inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-state-success bg-state-success/10 hover:bg-state-success/20 rounded-md transition-colors\"\n          >\n            <PlayIcon className=\"w-4 h-4\" />\n            Test\n          </button>\n          <button\n            type=\"button\"\n            onClick={handleEdit}\n            className=\"inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-text-primary bg-bg-sunken hover:bg-border-default rounded-md transition-colors\"\n          >\n            <EditIcon className=\"w-4 h-4\" />\n            Edit\n          </button>\n          <button\n            type=\"button\"\n            onClick={handleDeleteClick}\n            className=\"inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-state-error bg-state-error/10 hover:bg-state-error/20 rounded-md transition-colors\"\n          >\n            <DeleteIcon className=\"w-4 h-4\" />\n            Delete\n          </button>\n        </div>\n      </div>\n\n      <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n        {/* Main Content */}\n        <div className=\"lg:col-span-2 space-y-6\">\n          {/* Stages */}\n          <div className=\"bg-bg-surface border border-border-default rounded-lg p-6\">\n            <h2 className=\"text-lg font-semibold text-text-primary mb-4\">\n              Pipeline Stages ({pipeline.stages?.length || 0})\n            </h2>\n\n            {!pipeline.stages || pipeline.stages.length === 0 ? (\n              <p className=\"text-sm text-text-secondary py-8 text-center\">\n                No stages defined. Edit the pipeline to add stages.\n              </p>\n            ) : (\n              <div className=\"space-y-3\">\n                {pipeline.stages.map((stage: PipelineStage, index: number) => (\n                  <div key={stage.id} className=\"flex items-center gap-3\">\n                    {/* Stage Card */}\n                    <div\n                      className={`\n                        flex-1 p-4 rounded-lg border\n                        ${stage.enabled ? 'bg-bg-surface border-border-default' : 'bg-bg-sunken border-border-default opacity-60'}\n                      `}\n                    >\n                      <div className=\"flex items-center justify-between mb-2\">\n                        <div className=\"flex items-center gap-2\">\n                          <span className=\"w-6 h-6 flex items-center justify-center text-xs font-medium bg-action-primary-bg/10 text-action-primary-bg rounded-full\">\n                            {index + 1}\n                          </span>\n                          <span className=\"font-medium text-text-primary\">\n                            {stage.parserName || `Stage ${index + 1}`}\n                          </span>\n                          {stage.parserType && (\n                            <span className=\"px-1.5 py-0.5 text-xs font-medium bg-bg-sunken text-text-secondary rounded\">\n                              {stage.parserType.toUpperCase()}\n                            </span>\n                          )}\n                        </div>\n                        <div className=\"flex items-center gap-2\">\n                          <StageErrorBadge handling={stage.onError} />\n                          {!stage.enabled && (\n                            <span className=\"px-1.5 py-0.5 text-xs font-medium bg-bg-sunken text-text-secondary rounded\">\n                              Disabled\n                            </span>\n                          )}\n                        </div>\n                      </div>\n\n                      <div className=\"flex items-center gap-2 text-xs text-text-secondary\">\n                        <span className=\"font-mono bg-bg-sunken px-1.5 py-0.5 rounded\">{stage.inputKey}</span>\n                        <ArrowRightIcon className=\"w-3 h-3\" />\n                        <span className=\"font-mono bg-bg-sunken px-1.5 py-0.5 rounded\">{stage.outputKey}</span>\n                      </div>\n\n                      {stage.description && <p className=\"text-xs text-text-secondary mt-2\">{stage.description}</p>}\n\n                      {stage.parserId && (\n                        <button\n                          type=\"button\"\n                          onClick={() => handleViewParser(stage.parserId)}\n                          className=\"mt-2 text-xs text-action-primary-bg hover:underline\"\n                        >\n                          View Parser\n                        </button>\n                      )}\n                    </div>\n\n                    {/* Arrow to next stage */}\n                    {index < (pipeline.stages?.length || 0) - 1 && (\n                      <ArrowRightIcon className=\"w-5 h-5 text-text-secondary flex-shrink-0 hidden md:block\" />\n                    )}\n                  </div>\n                ))}\n              </div>\n            )}\n          </div>\n\n          {/* Test Panel */}\n          {showTestPanel && (\n            <div className=\"bg-bg-surface border border-border-default rounded-lg p-6\">\n              <h2 className=\"text-lg font-semibold text-text-primary mb-4\">Test Pipeline</h2>\n\n              <div className=\"space-y-4\">\n                <div>\n                  <label className=\"block text-sm font-medium text-text-primary mb-2\">Input JSON</label>\n                  <textarea\n                    value={testInput}\n                    onChange={(e) => setTestInput(e.target.value)}\n                    className=\"w-full h-32 px-3 py-2 text-sm font-mono text-text-primary bg-bg-sunken border border-border-default rounded-md focus:outline-none focus:ring-2 focus:ring-action-primary-bg resize-none\"\n                    placeholder='{\"key\": \"value\"}'\n                  />\n                </div>\n\n                <button\n                  type=\"button\"\n                  onClick={handleTest}\n                  disabled={loading}\n                  className=\"inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-action-primary-fg bg-action-primary-bg hover:bg-action-primary-bgHover rounded-md transition-colors disabled:opacity-50\"\n                >\n                  <PlayIcon className=\"w-4 h-4\" />\n                  {loading ? 'Running...' : 'Run Test'}\n                </button>\n\n                {testResult && (\n                  <div className=\"mt-4\">\n                    <div className=\"flex items-center gap-2 mb-2\">\n                      {testResult.status === 'completed' ? (\n                        <>\n                          <CheckIcon className=\"w-4 h-4 text-state-success\" />\n                          <span className=\"text-sm font-medium text-state-success\">Test Passed</span>\n                        </>\n                      ) : (\n                        <>\n                          <ErrorIcon className=\"w-4 h-4 text-state-error\" />\n                          <span className=\"text-sm font-medium text-state-error\">Test Failed</span>\n                        </>\n                      )}\n                      {testResult.totalExecutionTimeMs && (\n                        <span className=\"text-xs text-text-secondary\">({testResult.totalExecutionTimeMs}ms)</span>\n                      )}\n                    </div>\n\n                    <div>\n                      <label className=\"block text-sm font-medium text-text-primary mb-2\">Output</label>\n                      <pre className=\"w-full p-3 text-xs font-mono text-text-primary bg-bg-sunken border border-border-default rounded-md overflow-auto max-h-48\">\n                        {JSON.stringify(testResult.outputData, null, 2) || 'null'}\n                      </pre>\n                    </div>\n\n                    {testResult.error && (\n                      <div className=\"mt-2\">\n                        <label className=\"block text-sm font-medium text-state-error mb-2\">Error</label>\n                        <pre className=\"w-full p-3 text-xs font-mono text-state-error bg-state-error/10 border border-state-error/20 rounded-md overflow-auto\">\n                          {testResult.error}\n                        </pre>\n                      </div>\n                    )}\n                  </div>\n                )}\n              </div>\n            </div>\n          )}\n        </div>\n\n        {/* Sidebar */}\n        <div className=\"space-y-6\">\n          {/* Details */}\n          <div className=\"bg-bg-surface border border-border-default rounded-lg p-6\">\n            <h2 className=\"text-lg font-semibold text-text-primary mb-4\">Details</h2>\n\n            <dl className=\"space-y-3\">\n              <div>\n                <dt className=\"text-xs text-text-secondary\">Status</dt>\n                <dd className=\"mt-1\">\n                  <PipelineStatusBadge status={pipeline.status} />\n                </dd>\n              </div>\n\n              <div>\n                <dt className=\"text-xs text-text-secondary\">Stages</dt>\n                <dd className=\"text-sm text-text-primary\">{pipeline.stages?.length || 0}</dd>\n              </div>\n\n              <div>\n                <dt className=\"text-xs text-text-secondary\">Last Executed</dt>\n                <dd className=\"text-sm text-text-primary\">\n                  {pipeline.lastExecutedAt ? new Date(pipeline.lastExecutedAt).toLocaleString() : 'Never'}\n                </dd>\n              </div>\n\n              <div>\n                <dt className=\"text-xs text-text-secondary\">Version</dt>\n                <dd className=\"text-sm text-text-primary\">{pipeline.version}</dd>\n              </div>\n\n              <div>\n                <dt className=\"text-xs text-text-secondary\">Created</dt>\n                <dd className=\"text-sm text-text-primary\">{new Date(pipeline.createdAt).toLocaleString()}</dd>\n              </div>\n\n              <div>\n                <dt className=\"text-xs text-text-secondary\">Updated</dt>\n                <dd className=\"text-sm text-text-primary\">{new Date(pipeline.updatedAt).toLocaleString()}</dd>\n              </div>\n            </dl>\n          </div>\n        </div>\n      </div>\n\n      {/* Delete Dialog */}\n      {pipeline && (\n        <PipelineDeleteDialog\n          pipeline={pipeline}\n          isOpen={deleteDialogOpen}\n          onClose={closeDeleteDialog}\n          onConfirm={handleDeleteConfirm}\n        />\n      )}\n    </div>\n  );\n});\n\nexport default PipelineViewPage;\n"],"mappings":"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"}
+{"version":3,"file":"PipelineViewPage.js","names":[],"sources":["../../../src/bigconsole/pages/PipelineViewPage.tsx"],"sourcesContent":["/**\n * Pipeline View Page\n *\n * Display Pipeline details, stages, and execution history.\n * Supports testing pipeline with sample input.\n */\n\nimport { memo, useState, useCallback, useEffect } from 'react';\nimport { useParams, useSearchParams } from 'react-router-dom';\nimport { GlassCard, IllustratedEmptyState, PagePurpose, NextSteps } from '@burdenoff/fe-libs/ui';\nimport { useAppNavigate } from '../contexts';\nimport { isNative, nativeNotify } from '../../utils/nativeBridge';\nimport { usePipelineOperations } from '../hooks/usePipelineOperations';\nimport { usePipelineStore } from '../store/pipelineStore';\nimport { PipelineStatusBadge } from '../components/pipeline/PipelineStatusBadge';\nimport { PipelineDeleteDialog } from '../components/pipeline/PipelineDeleteDialog';\nimport type { Pipeline, PipelineExecution, PipelineStage } from '../types';\n\n// ============================================================================\n// ICONS\n// ============================================================================\n\nconst BackIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M10 19l-7-7m0 0l7-7m-7 7h18\" />\n  </svg>\n);\n\nconst EditIcon = ({ 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=\"M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z\"\n    />\n  </svg>\n);\n\nconst DeleteIcon = ({ 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=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"\n    />\n  </svg>\n);\n\nconst PlayIcon = ({ 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=\"M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z\"\n    />\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />\n  </svg>\n);\n\nconst ErrorIcon = ({ 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 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n    />\n  </svg>\n);\n\nconst CheckIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 13l4 4L19 7\" />\n  </svg>\n);\n\nconst ArrowRightIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M14 5l7 7m0 0l-7 7m7-7H3\" />\n  </svg>\n);\n\n// ============================================================================\n// STAGE ERROR BADGE\n// ============================================================================\n\nconst StageErrorBadge = ({ handling }: { handling: string }) => {\n  const config = {\n    fail: { label: 'Fail', className: 'bg-state-error/10 text-state-error' },\n    skip: { label: 'Skip', className: 'bg-state-warning/10 text-state-warning' },\n    fallback: { label: 'Fallback', className: 'bg-action-primary-bg/10 text-action-primary-bg' },\n  };\n  const c = config[handling as keyof typeof config] || config.fail;\n  return <span className={`px-1.5 py-0.5 text-xs font-medium rounded ${c.className}`}>{c.label}</span>;\n};\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const PipelineViewPage = memo(function PipelineViewPage() {\n  const { pipelineId } = useParams<{ pipelineId: string }>();\n  const navigate = useAppNavigate();\n  // Use default consoleId for now (should come from context in production)\n  const consoleId = 'default';\n  const [searchParams] = useSearchParams();\n\n  // Local state\n  const [pipeline, setPipeline] = useState<Pipeline | null>(null);\n  const [testInput, setTestInput] = useState('{\\n  \"data\": \"sample\"\\n}');\n  const [testResult, setTestResult] = useState<PipelineExecution | null>(null);\n  const [showTestPanel, setShowTestPanel] = useState(searchParams.get('test') === 'true');\n\n  // Store state\n  const deleteDialogOpen = usePipelineStore((state) => state.deleteDialogOpen);\n  const openDeleteDialog = usePipelineStore((state) => state.openDeleteDialog);\n  const closeDeleteDialog = usePipelineStore((state) => state.closeDeleteDialog);\n\n  // Operations\n  const { loading, error, fetchPipeline, deletePipeline, testPipeline } = usePipelineOperations({\n    consoleId,\n    skipFetch: true,\n  });\n\n  // Fetch pipeline on mount\n  useEffect(() => {\n    if (pipelineId) {\n      fetchPipeline(pipelineId).then((result) => {\n        if (result) {\n          setPipeline(result);\n        }\n      });\n    }\n  }, [pipelineId, fetchPipeline]);\n\n  // Handlers\n  const handleBack = useCallback(() => {\n    navigate(`/pipelines`);\n  }, [navigate]);\n\n  const handleEdit = useCallback(() => {\n    navigate(`/pipelines/${pipelineId}/edit`);\n  }, [navigate, pipelineId]);\n\n  const handleDeleteClick = useCallback(() => {\n    if (pipeline) {\n      openDeleteDialog(pipeline);\n    }\n  }, [pipeline, openDeleteDialog]);\n\n  const handleDeleteConfirm = useCallback(async () => {\n    if (pipeline) {\n      const success = await deletePipeline(pipeline.id);\n      if (success) {\n        if (isNative()) void nativeNotify('success');\n        closeDeleteDialog();\n        navigate(`/pipelines`);\n      } else if (isNative()) {\n        void nativeNotify('error');\n      }\n    }\n  }, [pipeline, deletePipeline, closeDeleteDialog, navigate]);\n\n  const handleViewParser = useCallback(\n    (parserId: string) => {\n      navigate(`/dashboards/${consoleId}/parsers/${parserId}`);\n    },\n    [navigate, consoleId]\n  );\n\n  const handleTest = useCallback(async () => {\n    if (!pipeline) return;\n\n    try {\n      const result = await testPipeline({\n        pipelineId: pipeline.id,\n        inputData: testInput,\n      });\n      if (result) {\n        setTestResult(result);\n      }\n    } catch (err) {}\n  }, [pipeline, testPipeline, testInput]);\n\n  // Loading state\n  if (loading && !pipeline) {\n    return (\n      <div className=\"p-6\">\n        <div className=\"flex flex-col items-center justify-center py-16\">\n          <svg className=\"w-8 h-8 text-action-primary-bg animate-spin mb-4\" fill=\"none\" viewBox=\"0 0 24 24\">\n            <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\n            <path\n              className=\"opacity-75\"\n              fill=\"currentColor\"\n              d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n            />\n          </svg>\n          <p className=\"text-sm text-text-secondary\">Loading Pipeline...</p>\n        </div>\n      </div>\n    );\n  }\n\n  // Error state\n  if (error) {\n    return (\n      <div className=\"p-6\">\n        <div className=\"flex flex-col items-center justify-center py-16 text-center\">\n          <div className=\"p-3 rounded-full bg-state-error/10 mb-4\">\n            <ErrorIcon className=\"w-8 h-8 text-state-error\" />\n          </div>\n          <h3 className=\"text-lg font-medium text-text-primary mb-2\">Failed to load Pipeline</h3>\n          <p className=\"text-sm text-text-secondary mb-4\">{error.message}</p>\n          <button\n            type=\"button\"\n            onClick={handleBack}\n            className=\"px-4 py-2 text-sm font-medium text-action-primary-fg bg-action-primary-bg hover:bg-action-primary-bgHover rounded-md transition-colors\"\n          >\n            Back to Pipelines\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  // Not found state\n  if (!pipeline) {\n    return (\n      <div className=\"p-6\">\n        <IllustratedEmptyState\n          illustration=\"empty-data\"\n          title=\"Pipeline not found\"\n          description=\"The pipeline you're looking for doesn't exist or has been deleted.\"\n          action={\n            <button\n              type=\"button\"\n              onClick={handleBack}\n              className=\"px-4 py-2 text-sm font-medium text-action-primary-fg bg-action-primary-bg hover:bg-action-primary-bgHover rounded-md transition-colors\"\n            >\n              Back to Pipelines\n            </button>\n          }\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"p-6\">\n      {/* Header */}\n      <div className=\"flex items-center justify-between mb-6\">\n        <div className=\"flex items-center gap-4\">\n          <button\n            type=\"button\"\n            onClick={handleBack}\n            className=\"p-2 text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-md transition-colors\"\n          >\n            <BackIcon className=\"w-5 h-5\" />\n          </button>\n          <div>\n            <div className=\"flex items-center gap-3\">\n              <h1 className=\"text-2xl font-bold text-text-primary\">{pipeline.name}</h1>\n              <PipelineStatusBadge status={pipeline.status} />\n            </div>\n            {pipeline.description && <p className=\"text-sm text-text-secondary mt-1\">{pipeline.description}</p>}\n          </div>\n        </div>\n\n        <div className=\"flex items-center gap-2\">\n          <button\n            type=\"button\"\n            onClick={() => setShowTestPanel(!showTestPanel)}\n            className=\"inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-state-success bg-state-success/10 hover:bg-state-success/20 rounded-md transition-colors\"\n          >\n            <PlayIcon className=\"w-4 h-4\" />\n            Test\n          </button>\n          <button\n            type=\"button\"\n            onClick={handleEdit}\n            className=\"inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-text-primary bg-bg-sunken hover:bg-border-default rounded-md transition-colors\"\n          >\n            <EditIcon className=\"w-4 h-4\" />\n            Edit\n          </button>\n          <button\n            type=\"button\"\n            onClick={handleDeleteClick}\n            className=\"inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-state-error bg-state-error/10 hover:bg-state-error/20 rounded-md transition-colors\"\n          >\n            <DeleteIcon className=\"w-4 h-4\" />\n            Delete\n          </button>\n        </div>\n      </div>\n\n      <PagePurpose className=\"mb-6\">\n        A pipeline chains parsers and a data sink into a repeatable flow. Review its stages here, test it with sample\n        input to confirm the output, then edit the stages or run it to process real data into the connected sink.\n      </PagePurpose>\n\n      <NextSteps\n        storageKey=\"bigconsole-pipeline-view\"\n        steps={[\n          {\n            id: 'test',\n            label: 'Test with sample input',\n            description: 'Run the pipeline against a sample to verify each stage.',\n            onClick: () => setShowTestPanel(true),\n          },\n          {\n            id: 'edit',\n            label: 'Edit the stages',\n            description: 'Add, reorder, or configure the parsers in this pipeline.',\n            onClick: handleEdit,\n          },\n          {\n            id: 'sinks',\n            label: 'Review the target data sink',\n            description: 'See where the processed data lands.',\n            onClick: () => navigate('/datasinks'),\n          },\n        ]}\n      />\n\n      <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n        {/* Main Content */}\n        <div className=\"lg:col-span-2 space-y-6\">\n          {/* Stages — primary emphasis zone */}\n          <GlassCard treatment=\"glass\" glow className=\"p-6\">\n            <h2 className=\"text-lg font-semibold text-text-primary mb-4\">\n              Pipeline Stages ({pipeline.stages?.length || 0})\n            </h2>\n\n            {!pipeline.stages || pipeline.stages.length === 0 ? (\n              <IllustratedEmptyState\n                illustration=\"empty-generic\"\n                title=\"No stages defined\"\n                description=\"Edit the pipeline to add parser stages.\"\n              />\n            ) : (\n              <div className=\"space-y-3\">\n                {pipeline.stages.map((stage: PipelineStage, index: number) => (\n                  <div key={stage.id} className=\"flex items-center gap-3\">\n                    {/* Stage Card */}\n                    <div\n                      className={`\n                        flex-1 p-4 rounded-lg border\n                        ${stage.enabled ? 'bg-bg-surface border-border-default' : 'bg-bg-sunken border-border-default opacity-60'}\n                      `}\n                    >\n                      <div className=\"flex items-center justify-between mb-2\">\n                        <div className=\"flex items-center gap-2\">\n                          <span className=\"w-6 h-6 flex items-center justify-center text-xs font-medium bg-action-primary-bg/10 text-action-primary-bg rounded-full\">\n                            {index + 1}\n                          </span>\n                          <span className=\"font-medium text-text-primary\">\n                            {stage.parserName || `Stage ${index + 1}`}\n                          </span>\n                          {stage.parserType && (\n                            <span className=\"px-1.5 py-0.5 text-xs font-medium bg-bg-sunken text-text-secondary rounded\">\n                              {stage.parserType.toUpperCase()}\n                            </span>\n                          )}\n                        </div>\n                        <div className=\"flex items-center gap-2\">\n                          <StageErrorBadge handling={stage.onError} />\n                          {!stage.enabled && (\n                            <span className=\"px-1.5 py-0.5 text-xs font-medium bg-bg-sunken text-text-secondary rounded\">\n                              Disabled\n                            </span>\n                          )}\n                        </div>\n                      </div>\n\n                      <div className=\"flex items-center gap-2 text-xs text-text-secondary\">\n                        <span className=\"font-mono bg-bg-sunken px-1.5 py-0.5 rounded\">{stage.inputKey}</span>\n                        <ArrowRightIcon className=\"w-3 h-3\" />\n                        <span className=\"font-mono bg-bg-sunken px-1.5 py-0.5 rounded\">{stage.outputKey}</span>\n                      </div>\n\n                      {stage.description && <p className=\"text-xs text-text-secondary mt-2\">{stage.description}</p>}\n\n                      {stage.parserId && (\n                        <button\n                          type=\"button\"\n                          onClick={() => handleViewParser(stage.parserId)}\n                          className=\"mt-2 text-xs text-action-primary-bg hover:underline\"\n                        >\n                          View Parser\n                        </button>\n                      )}\n                    </div>\n\n                    {/* Arrow to next stage */}\n                    {index < (pipeline.stages?.length || 0) - 1 && (\n                      <ArrowRightIcon className=\"w-5 h-5 text-text-secondary flex-shrink-0 hidden md:block\" />\n                    )}\n                  </div>\n                ))}\n              </div>\n            )}\n          </GlassCard>\n\n          {/* Test Panel */}\n          {showTestPanel && (\n            <div className=\"bg-bg-surface border border-border-default rounded-lg p-6\">\n              <h2 className=\"text-lg font-semibold text-text-primary mb-4\">Test Pipeline</h2>\n\n              <div className=\"space-y-4\">\n                <div>\n                  <label className=\"block text-sm font-medium text-text-primary mb-2\">Input JSON</label>\n                  <textarea\n                    value={testInput}\n                    onChange={(e) => setTestInput(e.target.value)}\n                    className=\"w-full h-32 px-3 py-2 text-sm font-mono text-text-primary bg-bg-sunken border border-border-default rounded-md focus:outline-none focus:ring-2 focus:ring-action-primary-bg resize-none\"\n                    placeholder='{\"key\": \"value\"}'\n                  />\n                </div>\n\n                <button\n                  type=\"button\"\n                  onClick={handleTest}\n                  disabled={loading}\n                  className=\"inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-action-primary-fg bg-action-primary-bg hover:bg-action-primary-bgHover rounded-md transition-colors disabled:opacity-50\"\n                >\n                  <PlayIcon className=\"w-4 h-4\" />\n                  {loading ? 'Running...' : 'Run Test'}\n                </button>\n\n                {testResult && (\n                  <div className=\"mt-4\">\n                    <div className=\"flex items-center gap-2 mb-2\">\n                      {testResult.status === 'completed' ? (\n                        <>\n                          <CheckIcon className=\"w-4 h-4 text-state-success\" />\n                          <span className=\"text-sm font-medium text-state-success\">Test Passed</span>\n                        </>\n                      ) : (\n                        <>\n                          <ErrorIcon className=\"w-4 h-4 text-state-error\" />\n                          <span className=\"text-sm font-medium text-state-error\">Test Failed</span>\n                        </>\n                      )}\n                      {testResult.totalExecutionTimeMs && (\n                        <span className=\"text-xs text-text-secondary\">({testResult.totalExecutionTimeMs}ms)</span>\n                      )}\n                    </div>\n\n                    <div>\n                      <label className=\"block text-sm font-medium text-text-primary mb-2\">Output</label>\n                      <pre className=\"w-full p-3 text-xs font-mono text-text-primary bg-bg-sunken border border-border-default rounded-md overflow-auto max-h-48\">\n                        {JSON.stringify(testResult.outputData, null, 2) || 'null'}\n                      </pre>\n                    </div>\n\n                    {testResult.error && (\n                      <div className=\"mt-2\">\n                        <label className=\"block text-sm font-medium text-state-error mb-2\">Error</label>\n                        <pre className=\"w-full p-3 text-xs font-mono text-state-error bg-state-error/10 border border-state-error/20 rounded-md overflow-auto\">\n                          {testResult.error}\n                        </pre>\n                      </div>\n                    )}\n                  </div>\n                )}\n              </div>\n            </div>\n          )}\n        </div>\n\n        {/* Sidebar */}\n        <div className=\"space-y-6\">\n          {/* Details */}\n          <div className=\"bg-bg-surface border border-border-default rounded-lg p-6\">\n            <h2 className=\"text-lg font-semibold text-text-primary mb-4\">Details</h2>\n\n            <dl className=\"space-y-3\">\n              <div>\n                <dt className=\"text-xs text-text-secondary\">Status</dt>\n                <dd className=\"mt-1\">\n                  <PipelineStatusBadge status={pipeline.status} />\n                </dd>\n              </div>\n\n              <div>\n                <dt className=\"text-xs text-text-secondary\">Stages</dt>\n                <dd className=\"text-sm text-text-primary\">{pipeline.stages?.length || 0}</dd>\n              </div>\n\n              <div>\n                <dt className=\"text-xs text-text-secondary\">Last Executed</dt>\n                <dd className=\"text-sm text-text-primary\">\n                  {pipeline.lastExecutedAt ? new Date(pipeline.lastExecutedAt).toLocaleString() : 'Never'}\n                </dd>\n              </div>\n\n              <div>\n                <dt className=\"text-xs text-text-secondary\">Version</dt>\n                <dd className=\"text-sm text-text-primary\">{pipeline.version}</dd>\n              </div>\n\n              <div>\n                <dt className=\"text-xs text-text-secondary\">Created</dt>\n                <dd className=\"text-sm text-text-primary\">{new Date(pipeline.createdAt).toLocaleString()}</dd>\n              </div>\n\n              <div>\n                <dt className=\"text-xs text-text-secondary\">Updated</dt>\n                <dd className=\"text-sm text-text-primary\">{new Date(pipeline.updatedAt).toLocaleString()}</dd>\n              </div>\n            </dl>\n          </div>\n        </div>\n      </div>\n\n      {/* Delete Dialog */}\n      {pipeline && (\n        <PipelineDeleteDialog\n          pipeline={pipeline}\n          isOpen={deleteDialogOpen}\n          onClose={closeDeleteDialog}\n          onConfirm={handleDeleteConfirm}\n        />\n      )}\n    </div>\n  );\n});\n\nexport default PipelineViewPage;\n"],"mappings":"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"}

package/dist/bigconsole/pages/PipelinesPage.js

@@ -6,57 +6,57 @@ import { isNative as r, nativeNotify as i } from "../../utils/nativeBridge.js";
 import a from "../components/pipeline/PipelineDeleteDialog.js";
 import o from "../components/pipeline/PipelineCard.js";
 import { memo as s, useCallback as c, useMemo as l, useState as u } from "react";
-import { AlertCircle as d, FolderOpen as f, GitBranch as p, Plus as m, Search as h } from "lucide-react";
-import { jsx as g, jsxs as _ } from "react/jsx-runtime";
-import { Button as v, Card as y, CardContent as b, Input as x, Spinner as S } from "@burdenoff/fe-libs/ui";
+import { AlertCircle as d, GitBranch as f, Plus as p, Search as m } from "lucide-react";
+import { AuroraBackground as h, Button as g, Card as _, CardContent as v, GlassCard as y, GradientText as b, IllustratedEmptyState as x, Input as S, PagePurpose as C, Spinner as w } from "@burdenoff/fe-libs/ui";
+import { jsx as T, jsxs as E } from "react/jsx-runtime";
 //#region src/bigconsole/pages/PipelinesPage.tsx
-var C = s(function() {
-	let s = t(), [C, w] = u("all"), T = e((e) => e.searchQuery), E = e((e) => e.setSearchQuery), D = e((e) => e.deleteDialogOpen), O = e((e) => e.currentPipeline), k = e((e) => e.openDeleteDialog), A = e((e) => e.closeDeleteDialog), { loading: j, error: M, pipelines: N, deletePipeline: P, refetch: F } = n({ consoleId: "default" }), I = l(() => {
-		let e = [...N];
-		if (C !== "all" && (e = e.filter((e) => e.status === C)), T.trim()) {
-			let t = T.toLowerCase();
+var D = s(function() {
+	let s = t(), [D, O] = u("all"), k = e((e) => e.searchQuery), A = e((e) => e.setSearchQuery), j = e((e) => e.deleteDialogOpen), M = e((e) => e.currentPipeline), N = e((e) => e.openDeleteDialog), P = e((e) => e.closeDeleteDialog), { loading: F, error: I, pipelines: L, deletePipeline: R, refetch: z } = n({ consoleId: "default" }), B = l(() => {
+		let e = [...L];
+		if (D !== "all" && (e = e.filter((e) => e.status === D)), k.trim()) {
+			let t = k.toLowerCase();
 			e = e.filter((e) => e.name.toLowerCase().includes(t) || e.description?.toLowerCase().includes(t));
 		}
 		return e.sort((e, t) => new Date(t.updatedAt).getTime() - new Date(e.updatedAt).getTime());
 	}, [
-		N,
-		C,
-		T
-	]), L = c(() => {
+		L,
+		D,
+		k
+	]), V = c(() => {
 		s("/pipelines/new");
-	}, [s]), R = c((e) => {
+	}, [s]), H = c((e) => {
 		s(`/pipelines/${e}`);
-	}, [s]), z = c((e) => {
+	}, [s]), U = c((e) => {
 		s(`/pipelines/${e}/edit`);
-	}, [s]), B = c((e) => {
+	}, [s]), W = c((e) => {
 		s(`/pipelines/${e}?test=true`);
-	}, [s]), V = c((e) => {
-		let t = N.find((t) => t.id === e);
-		t && k(t);
-	}, [N, k]), H = c(async () => {
-		if (O) {
+	}, [s]), G = c((e) => {
+		let t = L.find((t) => t.id === e);
+		t && N(t);
+	}, [L, N]), K = c(async () => {
+		if (M) {
 			try {
-				await P(O.id), r() && i("success");
+				await R(M.id), r() && i("success");
 			} catch (e) {
 				throw r() && i("error"), e;
 			}
-			A();
+			P();
 		}
 	}, [
-		O,
-		P,
-		A
+		M,
+		R,
+		P
 	]);
-	return M ? /* @__PURE__ */ g("div", {
+	return I ? /* @__PURE__ */ T("div", {
 		style: { padding: "var(--space-pagePadding)" },
-		children: /* @__PURE__ */ g(y, {
+		children: /* @__PURE__ */ T(_, {
 			style: {
 				borderColor: "var(--color-status-error-border)",
 				backgroundColor: "var(--color-status-error-bgSubtle)"
 			},
-			children: /* @__PURE__ */ g(b, {
+			children: /* @__PURE__ */ T(v, {
 				style: { padding: "var(--space-pagePadding)" },
-				children: /* @__PURE__ */ _("div", {
+				children: /* @__PURE__ */ E("div", {
 					style: {
 						display: "flex",
 						flexDirection: "column",
@@ -64,20 +64,20 @@ var C = s(function() {
 						textAlign: "center"
 					},
 					children: [
-						/* @__PURE__ */ g("div", {
+						/* @__PURE__ */ T("div", {
 							style: {
 								padding: "var(--space-controlGap)",
 								borderRadius: "50%",
 								backgroundColor: "var(--color-status-error-bgSubtle)",
 								marginBottom: "var(--space-formGap)"
 							},
-							children: /* @__PURE__ */ g(d, { style: {
+							children: /* @__PURE__ */ T(d, { style: {
 								height: "var(--size-icon-xl)",
 								width: "var(--size-icon-xl)",
 								color: "var(--color-status-error-text)"
 							} })
 						}),
-						/* @__PURE__ */ g("h3", {
+						/* @__PURE__ */ T("h3", {
 							style: {
 								fontSize: "var(--font-size-body-lg)",
 								fontWeight: "var(--font-weight-medium)",
@@ -86,49 +86,46 @@ var C = s(function() {
 							},
 							children: "Failed to load Pipelines"
 						}),
-						/* @__PURE__ */ g("p", {
+						/* @__PURE__ */ T("p", {
 							style: {
 								fontSize: "var(--font-size-body-sm)",
 								color: "var(--color-text-secondary)",
 								marginBottom: "var(--space-formGap)"
 							},
-							children: M.message
+							children: I.message
 						}),
-						/* @__PURE__ */ g(v, {
+						/* @__PURE__ */ T(g, {
 							size: "sm",
-							onClick: () => F(),
+							onClick: () => z(),
 							children: "Try Again"
 						})
 					]
 				})
 			})
 		})
-	}) : /* @__PURE__ */ _("div", {
+	}) : /* @__PURE__ */ E("div", {
 		style: {
 			minHeight: "100vh",
 			backgroundColor: "var(--color-bg-canvas)"
 		},
 		children: [
-			/* @__PURE__ */ g("div", {
-				style: {
-					borderBottom: "1px solid var(--color-border)",
-					backgroundColor: "var(--color-bg-surface)"
-				},
-				children: /* @__PURE__ */ g("div", {
+			/* @__PURE__ */ E("div", {
+				className: "relative overflow-hidden border-b border-border-seam bg-gloss-card",
+				children: [/* @__PURE__ */ T(h, { intensity: "subtle" }), /* @__PURE__ */ T("div", {
 					style: { padding: "var(--space-pagePadding)" },
-					children: /* @__PURE__ */ _("div", {
+					children: /* @__PURE__ */ E("div", {
 						style: {
 							display: "flex",
 							alignItems: "center",
 							justifyContent: "space-between"
 						},
-						children: [/* @__PURE__ */ _("div", {
+						children: [/* @__PURE__ */ E("div", {
 							style: {
 								display: "flex",
 								alignItems: "center",
 								gap: "var(--space-formGap)"
 							},
-							children: [/* @__PURE__ */ g("div", {
+							children: [/* @__PURE__ */ T("div", {
 								style: {
 									display: "flex",
 									height: "var(--size-controlHeight-lg)",
@@ -138,20 +135,20 @@ var C = s(function() {
 									borderRadius: "var(--radius-card)",
 									backgroundColor: "var(--color-action-primary-bg)"
 								},
-								children: /* @__PURE__ */ g(p, { style: {
+								children: /* @__PURE__ */ T(f, { style: {
 									height: "var(--size-icon-lg)",
 									width: "var(--size-icon-lg)",
 									color: "var(--color-action-primary-text)"
 								} })
-							}), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("h1", {
+							}), /* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("h1", {
 								style: {
 									fontSize: "var(--font-size-heading-h4)",
 									fontWeight: "var(--font-weight-bold)",
 									margin: 0,
 									color: "var(--color-text-primary)"
 								},
-								children: "Pipelines"
-							}), /* @__PURE__ */ g("p", {
+								children: /* @__PURE__ */ T(b, { children: "Pipelines" })
+							}), /* @__PURE__ */ T("p", {
 								style: {
 									fontSize: "var(--font-size-body-sm)",
 									color: "var(--color-text-secondary)",
@@ -159,23 +156,27 @@ var C = s(function() {
 								},
 								children: "Create and manage sequential parser chains for data transformation"
 							})] })]
-						}), /* @__PURE__ */ _(v, {
-							onClick: L,
-							children: [/* @__PURE__ */ g(m, { style: {
+						}), /* @__PURE__ */ E(g, {
+							onClick: V,
+							children: [/* @__PURE__ */ T(p, { style: {
 								marginRight: "var(--space-iconGap)",
 								height: "var(--size-icon-sm)",
 								width: "var(--size-icon-sm)"
 							} }), "Create Pipeline"]
 						})]
 					})
-				})
+				})]
 			}),
-			/* @__PURE__ */ _("div", {
+			/* @__PURE__ */ E("div", {
 				style: { padding: "var(--space-pagePadding)" },
 				children: [
-					/* @__PURE__ */ g("div", {
+					/* @__PURE__ */ T(C, {
+						className: "mb-[var(--space-sectionGap)]",
+						children: "Pipelines chain parsers and data sinks into a repeatable flow — they take raw input, run it through your parsers, and route the structured result into a sink. Use them to turn messy logs, files, or API payloads into clean, queryable data your dashboards can use."
+					}),
+					/* @__PURE__ */ T("div", {
 						style: { marginBottom: "var(--space-formGap)" },
-						children: /* @__PURE__ */ g("div", {
+						children: /* @__PURE__ */ T("div", {
 							style: {
 								display: "flex",
 								alignItems: "center",
@@ -206,9 +207,9 @@ var C = s(function() {
 									value: "error",
 									label: "Error"
 								}
-							].map((e) => /* @__PURE__ */ g("button", {
+							].map((e) => /* @__PURE__ */ T("button", {
 								type: "button",
-								onClick: () => w(e.value),
+								onClick: () => O(e.value),
 								style: {
 									padding: "var(--space-controlGap) var(--space-formGap)",
 									fontSize: "var(--font-size-body-sm)",
@@ -217,22 +218,22 @@ var C = s(function() {
 									border: "none",
 									cursor: "pointer",
 									transition: "all 0.2s ease",
-									backgroundColor: C === e.value ? "var(--color-bg-surface)" : "transparent",
-									color: C === e.value ? "var(--color-text-primary)" : "var(--color-text-secondary)",
-									boxShadow: C === e.value ? "0 1px 2px rgba(0,0,0,0.05)" : "none"
+									backgroundColor: D === e.value ? "var(--color-bg-surface)" : "transparent",
+									color: D === e.value ? "var(--color-text-primary)" : "var(--color-text-secondary)",
+									boxShadow: D === e.value ? "0 1px 2px rgba(0,0,0,0.05)" : "none"
 								},
 								children: e.label
 							}, e.value))
 						})
 					}),
-					/* @__PURE__ */ g("div", {
+					/* @__PURE__ */ T("div", {
 						style: { marginBottom: "var(--space-sectionGap)" },
-						children: /* @__PURE__ */ _("div", {
+						children: /* @__PURE__ */ E("div", {
 							style: {
 								position: "relative",
 								maxWidth: "400px"
 							},
-							children: [/* @__PURE__ */ g(h, { style: {
+							children: [/* @__PURE__ */ T(m, { style: {
 								position: "absolute",
 								left: "var(--space-controlGap)",
 								top: "50%",
@@ -240,11 +241,11 @@ var C = s(function() {
 								height: "var(--size-icon-sm)",
 								width: "var(--size-icon-sm)",
 								color: "var(--color-text-muted)"
-							} }), /* @__PURE__ */ g(x, {
+							} }), /* @__PURE__ */ T(S, {
 								type: "text",
 								placeholder: "Search pipelines...",
-								value: T,
-								onChange: (e) => E(e.target.value),
+								value: k,
+								onChange: (e) => A(e.target.value),
 								style: {
 									paddingLeft: "var(--size-controlHeight-md)",
 									height: "var(--size-controlHeight-md)"
@@ -252,20 +253,20 @@ var C = s(function() {
 							})]
 						})
 					}),
-					j && N.length === 0 && /* @__PURE__ */ g("div", {
+					F && L.length === 0 && /* @__PURE__ */ T("div", {
 						style: {
 							display: "flex",
 							alignItems: "center",
 							justifyContent: "center",
 							padding: "80px 0"
 						},
-						children: /* @__PURE__ */ _("div", {
+						children: /* @__PURE__ */ E("div", {
 							style: { textAlign: "center" },
-							children: [/* @__PURE__ */ g(S, { style: {
+							children: [/* @__PURE__ */ T(w, { style: {
 								height: "var(--size-icon-xl)",
 								width: "var(--size-icon-xl)",
 								margin: "0 auto var(--space-formGap)"
-							} }), /* @__PURE__ */ g("p", {
+							} }), /* @__PURE__ */ T("p", {
 								style: {
 									fontSize: "var(--font-size-body-sm)",
 									color: "var(--color-text-muted)"
@@ -274,102 +275,58 @@ var C = s(function() {
 							})]
 						})
 					}),
-					!j && N.length === 0 && /* @__PURE__ */ g(y, {
-						className: "border-dashed",
-						children: /* @__PURE__ */ _(b, {
-							style: {
-								display: "flex",
-								flexDirection: "column",
-								alignItems: "center",
-								justifyContent: "center",
-								padding: "64px var(--space-pagePadding)"
-							},
-							children: [
-								/* @__PURE__ */ g("div", {
-									style: {
-										display: "flex",
-										height: "80px",
-										width: "80px",
-										alignItems: "center",
-										justifyContent: "center",
-										borderRadius: "50%",
-										backgroundColor: "var(--color-bg-sunken)",
-										marginBottom: "var(--space-sectionGap)"
-									},
-									children: /* @__PURE__ */ g(f, { style: {
-										height: "var(--size-icon-xl)",
-										width: "var(--size-icon-xl)",
-										color: "var(--color-text-muted)"
-									} })
-								}),
-								/* @__PURE__ */ g("h3", {
-									style: {
-										fontSize: "var(--font-size-heading-h4)",
-										fontWeight: "var(--font-weight-semibold)",
-										marginBottom: "var(--space-controlGap)"
-									},
-									children: "No Pipelines yet"
-								}),
-								/* @__PURE__ */ g("p", {
-									style: {
-										fontSize: "var(--font-size-body-sm)",
-										color: "var(--color-text-muted)",
-										marginBottom: "var(--space-sectionGap)",
-										textAlign: "center",
-										maxWidth: "400px"
-									},
-									children: "Create a pipeline to chain parsers together for sequential data transformation. Each stage processes the output of the previous stage."
-								}),
-								/* @__PURE__ */ _(v, {
-									onClick: L,
-									children: [/* @__PURE__ */ g(m, { style: {
-										marginRight: "var(--space-iconGap)",
-										height: "var(--size-icon-sm)",
-										width: "var(--size-icon-sm)"
-									} }), "Create Pipeline"]
-								})
-							]
+					!F && L.length === 0 && /* @__PURE__ */ T(y, {
+						treatment: "insight",
+						className: "border-border-seam",
+						children: /* @__PURE__ */ T(x, {
+							illustration: "empty-data",
+							title: "No Pipelines yet",
+							description: "Create a pipeline to chain parsers together for sequential data transformation. Each stage processes the output of the previous stage.",
+							action: /* @__PURE__ */ E(g, {
+								onClick: V,
+								children: [/* @__PURE__ */ T(p, { style: {
+									marginRight: "var(--space-iconGap)",
+									height: "var(--size-icon-sm)",
+									width: "var(--size-icon-sm)"
+								} }), "Create Pipeline"]
+							})
 						})
 					}),
-					!j && I.length === 0 && N.length > 0 && /* @__PURE__ */ g("div", {
-						style: {
-							padding: "64px 0",
-							textAlign: "center"
-						},
-						children: /* @__PURE__ */ g("p", {
-							style: {
-								fontSize: "var(--font-size-body-sm)",
-								color: "var(--color-text-muted)"
-							},
-							children: "No pipelines match your filters"
+					!F && B.length === 0 && L.length > 0 && /* @__PURE__ */ T(y, {
+						treatment: "insight",
+						className: "border-border-seam",
+						children: /* @__PURE__ */ T(x, {
+							illustration: "empty-search",
+							title: "No matching pipelines",
+							description: "No pipelines match your filters"
 						})
 					}),
-					I.length > 0 && /* @__PURE__ */ g("div", {
+					B.length > 0 && /* @__PURE__ */ T("div", {
 						style: {
 							display: "grid",
 							gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
 							gap: "var(--space-formGap)"
 						},
-						children: I.map((e) => /* @__PURE__ */ g(o, {
+						children: B.map((e) => /* @__PURE__ */ T(o, {
 							pipeline: e,
-							onView: R,
-							onEdit: z,
-							onTest: B,
-							onDelete: V
+							onView: H,
+							onEdit: U,
+							onTest: W,
+							onDelete: G
 						}, e.id))
 					})
 				]
 			}),
-			O && /* @__PURE__ */ g(a, {
-				pipeline: O,
-				isOpen: D,
-				onClose: A,
-				onConfirm: H
+			M && /* @__PURE__ */ T(a, {
+				pipeline: M,
+				isOpen: j,
+				onClose: P,
+				onConfirm: K
 			})
 		]
 	});
 });
 //#endregion
-export { C as PipelinesPage, C as default };
+export { D as PipelinesPage, D as default };
 
 //# sourceMappingURL=PipelinesPage.js.map