@burdenoff/microfe-bigconsole 2026.804.2 → 2026.805.2

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

@@ -1 +1 @@
-{"version":3,"file":"PipelineBuilderPage.js","names":[],"sources":["../../../src/bigconsole/pages/PipelineBuilderPage.tsx"],"sourcesContent":["/**\n * Pipeline Builder Page\n *\n * Create and edit Pipelines with stage management.\n * Supports adding, removing, and reordering stages.\n */\n\nimport { memo, useState, useCallback, useEffect, useMemo } from 'react';\nimport { useParams } from 'react-router';\nimport { GlassCard, IllustratedEmptyState, PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { useAppNavigate } from '../contexts';\nimport { usePipelineOperations } from '../hooks/usePipelineOperations';\nimport { useParserOperations } from '../hooks/useParserOperations';\nimport { PipelineStatusBadge } from '../components/pipeline/PipelineStatusBadge';\nimport type { PipelineStatus, StageErrorHandling, ParserType } from '../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface StageForm {\n  id?: string;\n  parserId: string;\n  parserName: string;\n  parserType: ParserType | null;\n  inputKey: string;\n  outputKey: string;\n  enabled: boolean;\n  onError: StageErrorHandling;\n  fallbackValue: string;\n  description: string;\n}\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 PlusIcon = ({ 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=\"M12 4v16m8-8H4\" />\n  </svg>\n);\n\nconst TrashIcon = ({ 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 ArrowUpIcon = ({ 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 15l7-7 7 7\" />\n  </svg>\n);\n\nconst ArrowDownIcon = ({ 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=\"M19 9l-7 7-7-7\" />\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\n// ============================================================================\n// CONSTANTS\n// ============================================================================\n\nconst STATUS_OPTIONS: { value: PipelineStatus; label: string }[] = [\n  { value: 'draft', label: 'Draft' },\n  { value: 'active', label: 'Active' },\n  { value: 'inactive', label: 'Inactive' },\n];\n\nconst ERROR_HANDLING_OPTIONS: { value: StageErrorHandling; label: string; description: string }[] = [\n  { value: 'fail', label: 'Fail', description: 'Stop pipeline execution on error' },\n  { value: 'skip', label: 'Skip', description: 'Skip this stage and continue' },\n  { value: 'fallback', label: 'Fallback', description: 'Use fallback value on error' },\n];\n\nconst DEFAULT_STAGE: StageForm = {\n  parserId: '',\n  parserName: '',\n  parserType: null,\n  inputKey: 'data',\n  outputKey: 'result',\n  enabled: true,\n  onError: 'fail',\n  fallbackValue: '',\n  description: '',\n};\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const PipelineBuilderPage = memo(function PipelineBuilderPage() {\n  const { pipelineId } = useParams<{ pipelineId: string }>();\n  const navigate = useAppNavigate();\n  const isEditMode = !!pipelineId && pipelineId !== 'new';\n  // Use default consoleId for now (should come from context in production)\n  const consoleId = 'default';\n\n  // Form state\n  const [name, setName] = useState('');\n  const [description, setDescription] = useState('');\n  const [status, setStatus] = useState<PipelineStatus>('draft');\n  const [stages, setStages] = useState<StageForm[]>([]);\n  const [version, setVersion] = useState(1);\n  const [isSaving, setIsSaving] = useState(false);\n  const [saveError, setSaveError] = useState<string | null>(null);\n\n  // Operations\n  const {\n    loading: pipelineLoading,\n    error: pipelineError,\n    fetchPipeline,\n    createPipeline,\n    updatePipeline,\n  } = usePipelineOperations({\n    consoleId,\n    skipFetch: true,\n  });\n\n  const { parsers } = useParserOperations({\n    consoleId,\n  });\n\n  // Load existing pipeline in edit mode\n  useEffect(() => {\n    if (isEditMode && pipelineId) {\n      fetchPipeline(pipelineId).then((pipeline) => {\n        if (pipeline) {\n          setName(pipeline.name);\n          setDescription(pipeline.description || '');\n          setStatus(pipeline.status);\n          setVersion(pipeline.version);\n          setStages(\n            (pipeline.stages || []).map((s) => ({\n              id: s.id,\n              parserId: s.parserId,\n              parserName: s.parserName || '',\n              parserType: s.parserType,\n              inputKey: s.inputKey,\n              outputKey: s.outputKey,\n              enabled: s.enabled,\n              onError: s.onError,\n              fallbackValue: s.fallbackValue ? JSON.stringify(s.fallbackValue) : '',\n              description: s.description || '',\n            }))\n          );\n        }\n      });\n    }\n  }, [isEditMode, pipelineId, fetchPipeline]);\n\n  // Validation\n  const isValid = useMemo(() => {\n    if (!name.trim()) return false;\n    if (stages.length === 0) return false;\n    return stages.every((s) => s.parserId && s.inputKey && s.outputKey);\n  }, [name, stages]);\n\n  // Handlers\n  const handleBack = useCallback(() => {\n    navigate(`/pipelines`);\n  }, [navigate]);\n\n  const handleAddStage = useCallback(() => {\n    setStages((prev) => [...prev, { ...DEFAULT_STAGE }]);\n  }, []);\n\n  const handleRemoveStage = useCallback((index: number) => {\n    setStages((prev) => prev.filter((_, i) => i !== index));\n  }, []);\n\n  const handleMoveStage = useCallback((index: number, direction: 'up' | 'down') => {\n    setStages((prev) => {\n      const newStages = [...prev];\n      const targetIndex = direction === 'up' ? index - 1 : index + 1;\n      if (targetIndex < 0 || targetIndex >= newStages.length) return prev;\n      [newStages[index], newStages[targetIndex]] = [newStages[targetIndex], newStages[index]];\n      return newStages;\n    });\n  }, []);\n\n  const handleUpdateStage = useCallback((index: number, updates: Partial<StageForm>) => {\n    setStages((prev) => prev.map((stage, i) => (i === index ? { ...stage, ...updates } : stage)));\n  }, []);\n\n  const handleParserSelect = useCallback(\n    (index: number, parserId: string) => {\n      const parser = parsers.find((p) => p.id === parserId);\n      if (parser) {\n        handleUpdateStage(index, {\n          parserId: parser.id,\n          parserName: parser.name,\n          parserType: parser.type,\n        });\n      }\n    },\n    [parsers, handleUpdateStage]\n  );\n\n  const handleSave = useCallback(async () => {\n    if (!isValid || !consoleId) return;\n\n    setIsSaving(true);\n    setSaveError(null);\n\n    try {\n      const stageInputs = stages.map((s) => ({\n        parserId: s.parserId,\n        parserName: s.parserName,\n        parserType: s.parserType || undefined,\n        inputKey: s.inputKey,\n        outputKey: s.outputKey,\n        enabled: s.enabled,\n        onError: s.onError,\n        fallbackValue: s.fallbackValue ? JSON.parse(s.fallbackValue) : undefined,\n        description: s.description || undefined,\n      }));\n\n      if (isEditMode && pipelineId) {\n        const result = await updatePipeline(\n          pipelineId,\n          {\n            name,\n            description: description || undefined,\n            status,\n          },\n          version\n        );\n        if (result) {\n          navigate(`/pipelines/${pipelineId}`);\n        }\n      } else {\n        const result = await createPipeline({\n          consoleId,\n          name,\n          description: description || undefined,\n          status,\n          stages: stageInputs,\n        });\n        if (result) {\n          navigate(`/pipelines/${result.id}`);\n        }\n      }\n    } catch (err) {\n      setSaveError(err instanceof Error ? err.message : 'Failed to save pipeline');\n    } finally {\n      setIsSaving(false);\n    }\n  }, [\n    isValid,\n    consoleId,\n    isEditMode,\n    pipelineId,\n    name,\n    description,\n    status,\n    stages,\n    version,\n    createPipeline,\n    updatePipeline,\n    navigate,\n  ]);\n\n  // Loading state\n  if (pipelineLoading && isEditMode) {\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 (pipelineError) {\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-status-error-bg/10 mb-4\">\n            <ErrorIcon className=\"w-8 h-8 text-status-error-text\" />\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\">{pipelineError.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  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            <h1 className=\"text-2xl font-bold text-text-primary\">{isEditMode ? 'Edit Pipeline' : 'Create Pipeline'}</h1>\n            <p className=\"text-sm text-text-secondary mt-1\">\n              {isEditMode ? 'Update pipeline settings and stages' : 'Create a new data transformation pipeline'}\n            </p>\n          </div>\n        </div>\n\n        <div className=\"flex items-center gap-2\">\n          <button\n            type=\"button\"\n            onClick={handleBack}\n            className=\"px-4 py-2 text-sm font-medium text-text-primary bg-bg-sunken hover:bg-border-default rounded-md transition-colors\"\n          >\n            Cancel\n          </button>\n          <button\n            type=\"button\"\n            onClick={handleSave}\n            disabled={!isValid || isSaving}\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 disabled:opacity-50\"\n          >\n            {isSaving ? 'Saving...' : isEditMode ? 'Save Changes' : 'Create Pipeline'}\n          </button>\n        </div>\n      </div>\n\n      <PagePurpose className=\"mb-6\">\n        Build a pipeline by chaining parser stages — each stage reads an input key, runs a parser, and writes a\n        structured output key that the next stage (or a data sink) can use. Name it, add your stages in order, then test\n        it before saving so your data flows end to end.\n      </PagePurpose>\n\n      {/* Error Message */}\n      {saveError && (\n        <div className=\"mb-6 p-4 bg-status-error-bg/10 border border-status-error-border/20 rounded-md\">\n          <p className=\"text-sm text-status-error-text\">{saveError}</p>\n        </div>\n      )}\n\n      <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n        {/* Main Form */}\n        <div className=\"lg:col-span-2 space-y-6\">\n          {/* Basic Info */}\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\">Basic Information</h2>\n\n            <div className=\"space-y-4\">\n              <div>\n                <label className=\"block text-sm font-medium text-text-primary mb-2\">\n                  Name <span className=\"text-status-error-text\">*</span>\n                </label>\n                <input\n                  type=\"text\"\n                  value={name}\n                  onChange={(e) => setName(e.target.value)}\n                  placeholder=\"My Pipeline\"\n                  className=\"w-full px-3 py-2 text-sm text-text-primary bg-bg-surface border border-border-default rounded-md focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n                />\n              </div>\n\n              <div>\n                <label className=\"block text-sm font-medium text-text-primary mb-2\">Description</label>\n                <textarea\n                  value={description}\n                  onChange={(e) => setDescription(e.target.value)}\n                  placeholder=\"What does this pipeline do?\"\n                  rows={3}\n                  className=\"w-full px-3 py-2 text-sm text-text-primary bg-bg-surface border border-border-default rounded-md focus:outline-none focus:ring-2 focus:ring-action-primary-bg resize-none\"\n                />\n              </div>\n\n              <div>\n                <label className=\"block text-sm font-medium text-text-primary mb-2\">Status</label>\n                <select\n                  value={status}\n                  onChange={(e) => setStatus(e.target.value as PipelineStatus)}\n                  className=\"w-full px-3 py-2 text-sm text-text-primary bg-bg-surface border border-border-default rounded-md focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n                >\n                  {STATUS_OPTIONS.map((opt) => (\n                    <option key={opt.value} value={opt.value}>\n                      {opt.label}\n                    </option>\n                  ))}\n                </select>\n              </div>\n            </div>\n          </div>\n\n          {/* Stages — primary emphasis zone */}\n          <GlassCard treatment=\"glass\" glow className=\"p-6\">\n            <div className=\"flex items-center justify-between mb-4\">\n              <h2 className=\"text-lg font-semibold text-text-primary\">Stages ({stages.length})</h2>\n              <button\n                type=\"button\"\n                onClick={handleAddStage}\n                className=\"inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-action-primary-fg bg-action-primary-bg hover:bg-action-primary-bgHover rounded-md transition-colors\"\n              >\n                <PlusIcon className=\"w-4 h-4\" />\n                Add Stage\n              </button>\n            </div>\n\n            {stages.length === 0 ? (\n              <IllustratedEmptyState\n                illustration=\"empty-generic\"\n                title=\"No stages yet\"\n                description=\"Add a stage to start building your pipeline.\"\n                action={\n                  <button\n                    type=\"button\"\n                    onClick={handleAddStage}\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\"\n                  >\n                    <PlusIcon className=\"w-4 h-4\" />\n                    Add First Stage\n                  </button>\n                }\n              />\n            ) : (\n              <div className=\"space-y-4\">\n                {stages.map((stage, index) => (\n                  <div key={index} className=\"p-4 bg-bg-sunken border border-border-default rounded-lg\">\n                    <div className=\"flex items-center justify-between mb-4\">\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                      </div>\n                      <div className=\"flex items-center gap-1\">\n                        <button\n                          type=\"button\"\n                          onClick={() => handleMoveStage(index, 'up')}\n                          disabled={index === 0}\n                          className=\"p-1 text-text-secondary hover:text-text-primary hover:bg-bg-surface rounded disabled:opacity-30\"\n                        >\n                          <ArrowUpIcon className=\"w-4 h-4\" />\n                        </button>\n                        <button\n                          type=\"button\"\n                          onClick={() => handleMoveStage(index, 'down')}\n                          disabled={index === stages.length - 1}\n                          className=\"p-1 text-text-secondary hover:text-text-primary hover:bg-bg-surface rounded disabled:opacity-30\"\n                        >\n                          <ArrowDownIcon className=\"w-4 h-4\" />\n                        </button>\n                        <button\n                          type=\"button\"\n                          onClick={() => handleRemoveStage(index)}\n                          className=\"p-1 text-text-secondary hover:text-status-error-text hover:bg-status-error-bg/10 rounded\"\n                        >\n                          <TrashIcon className=\"w-4 h-4\" />\n                        </button>\n                      </div>\n                    </div>\n\n                    <div className=\"grid grid-cols-2 gap-4\">\n                      <div className=\"col-span-2\">\n                        <label className=\"block text-xs font-medium text-text-secondary mb-1\">\n                          Parser <span className=\"text-status-error-text\">*</span>\n                        </label>\n                        <select\n                          value={stage.parserId}\n                          onChange={(e) => handleParserSelect(index, e.target.value)}\n                          className=\"w-full px-3 py-2 text-sm text-text-primary bg-bg-surface border border-border-default rounded-md focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n                        >\n                          <option value=\"\">Select a parser...</option>\n                          {parsers.map((p) => (\n                            <option key={p.id} value={p.id}>\n                              {p.name} ({p.type.toUpperCase()})\n                            </option>\n                          ))}\n                        </select>\n                      </div>\n\n                      <div>\n                        <label className=\"block text-xs font-medium text-text-secondary mb-1\">\n                          Input Key <span className=\"text-status-error-text\">*</span>\n                        </label>\n                        <input\n                          type=\"text\"\n                          value={stage.inputKey}\n                          onChange={(e) => handleUpdateStage(index, { inputKey: e.target.value })}\n                          placeholder=\"data\"\n                          className=\"w-full px-3 py-2 text-sm font-mono text-text-primary bg-bg-surface border border-border-default rounded-md focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n                        />\n                      </div>\n\n                      <div>\n                        <label className=\"block text-xs font-medium text-text-secondary mb-1\">\n                          Output Key <span className=\"text-status-error-text\">*</span>\n                        </label>\n                        <input\n                          type=\"text\"\n                          value={stage.outputKey}\n                          onChange={(e) => handleUpdateStage(index, { outputKey: e.target.value })}\n                          placeholder=\"result\"\n                          className=\"w-full px-3 py-2 text-sm font-mono text-text-primary bg-bg-surface border border-border-default rounded-md focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n                        />\n                      </div>\n\n                      <div>\n                        <label className=\"block text-xs font-medium text-text-secondary mb-1\">On Error</label>\n                        <select\n                          value={stage.onError}\n                          onChange={(e) =>\n                            handleUpdateStage(index, {\n                              onError: e.target.value as StageErrorHandling,\n                            })\n                          }\n                          className=\"w-full px-3 py-2 text-sm text-text-primary bg-bg-surface border border-border-default rounded-md focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n                        >\n                          {ERROR_HANDLING_OPTIONS.map((opt) => (\n                            <option key={opt.value} value={opt.value}>\n                              {opt.label}\n                            </option>\n                          ))}\n                        </select>\n                      </div>\n\n                      <div className=\"flex items-center\">\n                        <label className=\"flex items-center gap-2 cursor-pointer\">\n                          <input\n                            type=\"checkbox\"\n                            checked={stage.enabled}\n                            onChange={(e) => handleUpdateStage(index, { enabled: e.target.checked })}\n                            className=\"w-4 h-4 rounded border-border-default text-action-primary-bg focus:ring-action-primary-bg\"\n                          />\n                          <span className=\"text-sm text-text-primary\">Enabled</span>\n                        </label>\n                      </div>\n\n                      {stage.onError === 'fallback' && (\n                        <div className=\"col-span-2\">\n                          <label className=\"block text-xs font-medium text-text-secondary mb-1\">\n                            Fallback Value (JSON)\n                          </label>\n                          <input\n                            type=\"text\"\n                            value={stage.fallbackValue}\n                            onChange={(e) => handleUpdateStage(index, { fallbackValue: e.target.value })}\n                            placeholder='{\"default\": true}'\n                            className=\"w-full px-3 py-2 text-sm font-mono text-text-primary bg-bg-surface border border-border-default rounded-md focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n                          />\n                        </div>\n                      )}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            )}\n          </GlassCard>\n        </div>\n\n        {/* Sidebar */}\n        <div className=\"space-y-6\">\n          {/* Preview */}\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\">Preview</h2>\n\n            <div className=\"space-y-3\">\n              <div>\n                <span className=\"text-xs text-text-secondary\">Name</span>\n                <p className=\"text-sm text-text-primary\">{name || 'Untitled'}</p>\n              </div>\n\n              <div>\n                <span className=\"text-xs text-text-secondary\">Status</span>\n                <div className=\"mt-1\">\n                  <PipelineStatusBadge status={status} />\n                </div>\n              </div>\n\n              <div>\n                <span className=\"text-xs text-text-secondary\">Stages</span>\n                <p className=\"text-sm text-text-primary\">{stages.length}</p>\n              </div>\n\n              {stages.length > 0 && (\n                <div>\n                  <span className=\"text-xs text-text-secondary\">Data Flow</span>\n                  <div className=\"mt-1 text-xs font-mono text-text-secondary\">\n                    {stages.map((s, i) => (\n                      <span key={i}>\n                        {s.inputKey}\n                        {i < stages.length - 1 && ' → '}\n                      </span>\n                    ))}\n                    {stages.length > 0 && ` → ${stages[stages.length - 1].outputKey}`}\n                  </div>\n                </div>\n              )}\n            </div>\n          </div>\n\n          {/* Help */}\n          <div className=\"bg-bg-sunken border border-border-default rounded-lg p-6\">\n            <h3 className=\"text-sm font-semibold text-text-primary mb-2\">Tips</h3>\n            <ul className=\"text-xs text-text-secondary space-y-2\">\n              <li>• Each stage processes the output of the previous stage</li>\n              <li>• Use consistent input/output keys to chain data</li>\n              <li>• Set error handling per stage for robustness</li>\n              <li>• Disable stages to skip them during execution</li>\n            </ul>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport default PipelineBuilderPage;\n"],"mappings":"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"}
+{"version":3,"file":"PipelineBuilderPage.js","names":[],"sources":["../../../src/bigconsole/pages/PipelineBuilderPage.tsx"],"sourcesContent":["/**\n * Pipeline Builder Page\n *\n * Create and edit Pipelines with stage management.\n * Supports adding, removing, and reordering stages.\n */\n\nimport { memo, useState, useCallback, useEffect, useMemo } from 'react';\nimport { useParams } from 'react-router';\nimport { GlassCard, IllustratedEmptyState, PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { AccessDenied } from '@burdenoff/fe-libs/shared/components';\nimport { BIGCONSOLE_PERMISSIONS } from '../../constants/permissions';\nimport { useAppNavigate } from '../contexts';\nimport { usePipelineOperations } from '../hooks/usePipelineOperations';\nimport { useParserOperations } from '../hooks/useParserOperations';\nimport { PipelineStatusBadge } from '../components/pipeline/PipelineStatusBadge';\nimport type { PipelineStatus, StageErrorHandling, ParserType } from '../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface StageForm {\n  id?: string;\n  parserId: string;\n  parserName: string;\n  parserType: ParserType | null;\n  inputKey: string;\n  outputKey: string;\n  enabled: boolean;\n  onError: StageErrorHandling;\n  fallbackValue: string;\n  description: string;\n}\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 PlusIcon = ({ 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=\"M12 4v16m8-8H4\" />\n  </svg>\n);\n\nconst TrashIcon = ({ 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 ArrowUpIcon = ({ 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 15l7-7 7 7\" />\n  </svg>\n);\n\nconst ArrowDownIcon = ({ 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=\"M19 9l-7 7-7-7\" />\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\n// ============================================================================\n// CONSTANTS\n// ============================================================================\n\nconst STATUS_OPTIONS: { value: PipelineStatus; label: string }[] = [\n  { value: 'draft', label: 'Draft' },\n  { value: 'active', label: 'Active' },\n  { value: 'inactive', label: 'Inactive' },\n];\n\nconst ERROR_HANDLING_OPTIONS: { value: StageErrorHandling; label: string; description: string }[] = [\n  { value: 'fail', label: 'Fail', description: 'Stop pipeline execution on error' },\n  { value: 'skip', label: 'Skip', description: 'Skip this stage and continue' },\n  { value: 'fallback', label: 'Fallback', description: 'Use fallback value on error' },\n];\n\nconst DEFAULT_STAGE: StageForm = {\n  parserId: '',\n  parserName: '',\n  parserType: null,\n  inputKey: 'data',\n  outputKey: 'result',\n  enabled: true,\n  onError: 'fail',\n  fallbackValue: '',\n  description: '',\n};\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const PipelineBuilderPage = memo(function PipelineBuilderPage() {\n  const { pipelineId } = useParams<{ pipelineId: string }>();\n  const navigate = useAppNavigate();\n  const isEditMode = !!pipelineId && pipelineId !== 'new';\n  // Use default consoleId for now (should come from context in production)\n  const consoleId = 'default';\n\n  // Permissions\n  const { hasPermission, isLoading: permissionsLoading } = usePermissions();\n  const canRead = hasPermission(BIGCONSOLE_PERMISSIONS.PIPELINE_READ);\n  const canCreate = hasPermission(BIGCONSOLE_PERMISSIONS.PIPELINE_CREATE);\n  const canUpdate = hasPermission(BIGCONSOLE_PERMISSIONS.PIPELINE_UPDATE);\n  // Save gate depends on mode: creating a new pipeline vs. editing an existing one.\n  const canSave = isEditMode ? canUpdate : canCreate;\n\n  // Form state\n  const [name, setName] = useState('');\n  const [description, setDescription] = useState('');\n  const [status, setStatus] = useState<PipelineStatus>('draft');\n  const [stages, setStages] = useState<StageForm[]>([]);\n  const [version, setVersion] = useState(1);\n  const [isSaving, setIsSaving] = useState(false);\n  const [saveError, setSaveError] = useState<string | null>(null);\n\n  // Operations\n  const {\n    loading: pipelineLoading,\n    error: pipelineError,\n    fetchPipeline,\n    createPipeline,\n    updatePipeline,\n  } = usePipelineOperations({\n    consoleId,\n    skipFetch: true,\n  });\n\n  const { parsers } = useParserOperations({\n    consoleId,\n  });\n\n  // Load existing pipeline in edit mode\n  useEffect(() => {\n    if (isEditMode && pipelineId) {\n      fetchPipeline(pipelineId).then((pipeline) => {\n        if (pipeline) {\n          setName(pipeline.name);\n          setDescription(pipeline.description || '');\n          setStatus(pipeline.status);\n          setVersion(pipeline.version);\n          setStages(\n            (pipeline.stages || []).map((s) => ({\n              id: s.id,\n              parserId: s.parserId,\n              parserName: s.parserName || '',\n              parserType: s.parserType,\n              inputKey: s.inputKey,\n              outputKey: s.outputKey,\n              enabled: s.enabled,\n              onError: s.onError,\n              fallbackValue: s.fallbackValue ? JSON.stringify(s.fallbackValue) : '',\n              description: s.description || '',\n            }))\n          );\n        }\n      });\n    }\n  }, [isEditMode, pipelineId, fetchPipeline]);\n\n  // Validation\n  const isValid = useMemo(() => {\n    if (!name.trim()) return false;\n    if (stages.length === 0) return false;\n    return stages.every((s) => s.parserId && s.inputKey && s.outputKey);\n  }, [name, stages]);\n\n  // Handlers\n  const handleBack = useCallback(() => {\n    navigate(`/pipelines`);\n  }, [navigate]);\n\n  const handleAddStage = useCallback(() => {\n    setStages((prev) => [...prev, { ...DEFAULT_STAGE }]);\n  }, []);\n\n  const handleRemoveStage = useCallback((index: number) => {\n    setStages((prev) => prev.filter((_, i) => i !== index));\n  }, []);\n\n  const handleMoveStage = useCallback((index: number, direction: 'up' | 'down') => {\n    setStages((prev) => {\n      const newStages = [...prev];\n      const targetIndex = direction === 'up' ? index - 1 : index + 1;\n      if (targetIndex < 0 || targetIndex >= newStages.length) return prev;\n      [newStages[index], newStages[targetIndex]] = [newStages[targetIndex], newStages[index]];\n      return newStages;\n    });\n  }, []);\n\n  const handleUpdateStage = useCallback((index: number, updates: Partial<StageForm>) => {\n    setStages((prev) => prev.map((stage, i) => (i === index ? { ...stage, ...updates } : stage)));\n  }, []);\n\n  const handleParserSelect = useCallback(\n    (index: number, parserId: string) => {\n      const parser = parsers.find((p) => p.id === parserId);\n      if (parser) {\n        handleUpdateStage(index, {\n          parserId: parser.id,\n          parserName: parser.name,\n          parserType: parser.type,\n        });\n      }\n    },\n    [parsers, handleUpdateStage]\n  );\n\n  const handleSave = useCallback(async () => {\n    if (!isValid || !consoleId || !canSave) return;\n\n    setIsSaving(true);\n    setSaveError(null);\n\n    try {\n      const stageInputs = stages.map((s) => ({\n        parserId: s.parserId,\n        parserName: s.parserName,\n        parserType: s.parserType || undefined,\n        inputKey: s.inputKey,\n        outputKey: s.outputKey,\n        enabled: s.enabled,\n        onError: s.onError,\n        fallbackValue: s.fallbackValue ? JSON.parse(s.fallbackValue) : undefined,\n        description: s.description || undefined,\n      }));\n\n      if (isEditMode && pipelineId) {\n        const result = await updatePipeline(\n          pipelineId,\n          {\n            name,\n            description: description || undefined,\n            status,\n          },\n          version\n        );\n        if (result) {\n          navigate(`/pipelines/${pipelineId}`);\n        }\n      } else {\n        const result = await createPipeline({\n          consoleId,\n          name,\n          description: description || undefined,\n          status,\n          stages: stageInputs,\n        });\n        if (result) {\n          navigate(`/pipelines/${result.id}`);\n        }\n      }\n    } catch (err) {\n      setSaveError(err instanceof Error ? err.message : 'Failed to save pipeline');\n    } finally {\n      setIsSaving(false);\n    }\n  }, [\n    isValid,\n    consoleId,\n    canSave,\n    isEditMode,\n    pipelineId,\n    name,\n    description,\n    status,\n    stages,\n    version,\n    createPipeline,\n    updatePipeline,\n    navigate,\n  ]);\n\n  // Loading state\n  if (pipelineLoading && isEditMode) {\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  // Read gate — editing an existing pipeline requires read access to load it.\n  // Create mode ('new') is gated on the Save action (canCreate) instead.\n  if (isEditMode && !permissionsLoading && !canRead) {\n    return <AccessDenied title=\"Access Denied\" description=\"You don't have permission to view this pipeline.\" />;\n  }\n\n  // Error state\n  if (pipelineError) {\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-status-error-bg/10 mb-4\">\n            <ErrorIcon className=\"w-8 h-8 text-status-error-text\" />\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\">{pipelineError.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  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            <h1 className=\"text-2xl font-bold text-text-primary\">{isEditMode ? 'Edit Pipeline' : 'Create Pipeline'}</h1>\n            <p className=\"text-sm text-text-secondary mt-1\">\n              {isEditMode ? 'Update pipeline settings and stages' : 'Create a new data transformation pipeline'}\n            </p>\n          </div>\n        </div>\n\n        <div className=\"flex items-center gap-2\">\n          <button\n            type=\"button\"\n            onClick={handleBack}\n            className=\"px-4 py-2 text-sm font-medium text-text-primary bg-bg-sunken hover:bg-border-default rounded-md transition-colors\"\n          >\n            Cancel\n          </button>\n          <button\n            type=\"button\"\n            onClick={handleSave}\n            disabled={!isValid || isSaving || !canSave}\n            title={!canSave ? `You don't have permission to ${isEditMode ? 'update' : 'create'} pipelines.` : undefined}\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 disabled:opacity-50 disabled:cursor-not-allowed\"\n          >\n            {isSaving ? 'Saving...' : isEditMode ? 'Save Changes' : 'Create Pipeline'}\n          </button>\n        </div>\n      </div>\n\n      <PagePurpose className=\"mb-6\">\n        Build a pipeline by chaining parser stages — each stage reads an input key, runs a parser, and writes a\n        structured output key that the next stage (or a data sink) can use. Name it, add your stages in order, then test\n        it before saving so your data flows end to end.\n      </PagePurpose>\n\n      {/* Error Message */}\n      {saveError && (\n        <div className=\"mb-6 p-4 bg-status-error-bg/10 border border-status-error-border/20 rounded-md\">\n          <p className=\"text-sm text-status-error-text\">{saveError}</p>\n        </div>\n      )}\n\n      <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n        {/* Main Form */}\n        <div className=\"lg:col-span-2 space-y-6\">\n          {/* Basic Info */}\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\">Basic Information</h2>\n\n            <div className=\"space-y-4\">\n              <div>\n                <label className=\"block text-sm font-medium text-text-primary mb-2\">\n                  Name <span className=\"text-status-error-text\">*</span>\n                </label>\n                <input\n                  type=\"text\"\n                  value={name}\n                  onChange={(e) => setName(e.target.value)}\n                  placeholder=\"My Pipeline\"\n                  className=\"w-full px-3 py-2 text-sm text-text-primary bg-bg-surface border border-border-default rounded-md focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n                />\n              </div>\n\n              <div>\n                <label className=\"block text-sm font-medium text-text-primary mb-2\">Description</label>\n                <textarea\n                  value={description}\n                  onChange={(e) => setDescription(e.target.value)}\n                  placeholder=\"What does this pipeline do?\"\n                  rows={3}\n                  className=\"w-full px-3 py-2 text-sm text-text-primary bg-bg-surface border border-border-default rounded-md focus:outline-none focus:ring-2 focus:ring-action-primary-bg resize-none\"\n                />\n              </div>\n\n              <div>\n                <label className=\"block text-sm font-medium text-text-primary mb-2\">Status</label>\n                <select\n                  value={status}\n                  onChange={(e) => setStatus(e.target.value as PipelineStatus)}\n                  className=\"w-full px-3 py-2 text-sm text-text-primary bg-bg-surface border border-border-default rounded-md focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n                >\n                  {STATUS_OPTIONS.map((opt) => (\n                    <option key={opt.value} value={opt.value}>\n                      {opt.label}\n                    </option>\n                  ))}\n                </select>\n              </div>\n            </div>\n          </div>\n\n          {/* Stages — primary emphasis zone */}\n          <GlassCard treatment=\"glass\" glow className=\"p-6\">\n            <div className=\"flex items-center justify-between mb-4\">\n              <h2 className=\"text-lg font-semibold text-text-primary\">Stages ({stages.length})</h2>\n              <button\n                type=\"button\"\n                onClick={handleAddStage}\n                className=\"inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-action-primary-fg bg-action-primary-bg hover:bg-action-primary-bgHover rounded-md transition-colors\"\n              >\n                <PlusIcon className=\"w-4 h-4\" />\n                Add Stage\n              </button>\n            </div>\n\n            {stages.length === 0 ? (\n              <IllustratedEmptyState\n                illustration=\"empty-generic\"\n                title=\"No stages yet\"\n                description=\"Add a stage to start building your pipeline.\"\n                action={\n                  <button\n                    type=\"button\"\n                    onClick={handleAddStage}\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\"\n                  >\n                    <PlusIcon className=\"w-4 h-4\" />\n                    Add First Stage\n                  </button>\n                }\n              />\n            ) : (\n              <div className=\"space-y-4\">\n                {stages.map((stage, index) => (\n                  <div key={index} className=\"p-4 bg-bg-sunken border border-border-default rounded-lg\">\n                    <div className=\"flex items-center justify-between mb-4\">\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                      </div>\n                      <div className=\"flex items-center gap-1\">\n                        <button\n                          type=\"button\"\n                          onClick={() => handleMoveStage(index, 'up')}\n                          disabled={index === 0}\n                          className=\"p-1 text-text-secondary hover:text-text-primary hover:bg-bg-surface rounded disabled:opacity-30\"\n                        >\n                          <ArrowUpIcon className=\"w-4 h-4\" />\n                        </button>\n                        <button\n                          type=\"button\"\n                          onClick={() => handleMoveStage(index, 'down')}\n                          disabled={index === stages.length - 1}\n                          className=\"p-1 text-text-secondary hover:text-text-primary hover:bg-bg-surface rounded disabled:opacity-30\"\n                        >\n                          <ArrowDownIcon className=\"w-4 h-4\" />\n                        </button>\n                        <button\n                          type=\"button\"\n                          onClick={() => handleRemoveStage(index)}\n                          className=\"p-1 text-text-secondary hover:text-status-error-text hover:bg-status-error-bg/10 rounded\"\n                        >\n                          <TrashIcon className=\"w-4 h-4\" />\n                        </button>\n                      </div>\n                    </div>\n\n                    <div className=\"grid grid-cols-2 gap-4\">\n                      <div className=\"col-span-2\">\n                        <label className=\"block text-xs font-medium text-text-secondary mb-1\">\n                          Parser <span className=\"text-status-error-text\">*</span>\n                        </label>\n                        <select\n                          value={stage.parserId}\n                          onChange={(e) => handleParserSelect(index, e.target.value)}\n                          className=\"w-full px-3 py-2 text-sm text-text-primary bg-bg-surface border border-border-default rounded-md focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n                        >\n                          <option value=\"\">Select a parser...</option>\n                          {parsers.map((p) => (\n                            <option key={p.id} value={p.id}>\n                              {p.name} ({p.type.toUpperCase()})\n                            </option>\n                          ))}\n                        </select>\n                      </div>\n\n                      <div>\n                        <label className=\"block text-xs font-medium text-text-secondary mb-1\">\n                          Input Key <span className=\"text-status-error-text\">*</span>\n                        </label>\n                        <input\n                          type=\"text\"\n                          value={stage.inputKey}\n                          onChange={(e) => handleUpdateStage(index, { inputKey: e.target.value })}\n                          placeholder=\"data\"\n                          className=\"w-full px-3 py-2 text-sm font-mono text-text-primary bg-bg-surface border border-border-default rounded-md focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n                        />\n                      </div>\n\n                      <div>\n                        <label className=\"block text-xs font-medium text-text-secondary mb-1\">\n                          Output Key <span className=\"text-status-error-text\">*</span>\n                        </label>\n                        <input\n                          type=\"text\"\n                          value={stage.outputKey}\n                          onChange={(e) => handleUpdateStage(index, { outputKey: e.target.value })}\n                          placeholder=\"result\"\n                          className=\"w-full px-3 py-2 text-sm font-mono text-text-primary bg-bg-surface border border-border-default rounded-md focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n                        />\n                      </div>\n\n                      <div>\n                        <label className=\"block text-xs font-medium text-text-secondary mb-1\">On Error</label>\n                        <select\n                          value={stage.onError}\n                          onChange={(e) =>\n                            handleUpdateStage(index, {\n                              onError: e.target.value as StageErrorHandling,\n                            })\n                          }\n                          className=\"w-full px-3 py-2 text-sm text-text-primary bg-bg-surface border border-border-default rounded-md focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n                        >\n                          {ERROR_HANDLING_OPTIONS.map((opt) => (\n                            <option key={opt.value} value={opt.value}>\n                              {opt.label}\n                            </option>\n                          ))}\n                        </select>\n                      </div>\n\n                      <div className=\"flex items-center\">\n                        <label className=\"flex items-center gap-2 cursor-pointer\">\n                          <input\n                            type=\"checkbox\"\n                            checked={stage.enabled}\n                            onChange={(e) => handleUpdateStage(index, { enabled: e.target.checked })}\n                            className=\"w-4 h-4 rounded border-border-default text-action-primary-bg focus:ring-action-primary-bg\"\n                          />\n                          <span className=\"text-sm text-text-primary\">Enabled</span>\n                        </label>\n                      </div>\n\n                      {stage.onError === 'fallback' && (\n                        <div className=\"col-span-2\">\n                          <label className=\"block text-xs font-medium text-text-secondary mb-1\">\n                            Fallback Value (JSON)\n                          </label>\n                          <input\n                            type=\"text\"\n                            value={stage.fallbackValue}\n                            onChange={(e) => handleUpdateStage(index, { fallbackValue: e.target.value })}\n                            placeholder='{\"default\": true}'\n                            className=\"w-full px-3 py-2 text-sm font-mono text-text-primary bg-bg-surface border border-border-default rounded-md focus:outline-none focus:ring-2 focus:ring-action-primary-bg\"\n                          />\n                        </div>\n                      )}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            )}\n          </GlassCard>\n        </div>\n\n        {/* Sidebar */}\n        <div className=\"space-y-6\">\n          {/* Preview */}\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\">Preview</h2>\n\n            <div className=\"space-y-3\">\n              <div>\n                <span className=\"text-xs text-text-secondary\">Name</span>\n                <p className=\"text-sm text-text-primary\">{name || 'Untitled'}</p>\n              </div>\n\n              <div>\n                <span className=\"text-xs text-text-secondary\">Status</span>\n                <div className=\"mt-1\">\n                  <PipelineStatusBadge status={status} />\n                </div>\n              </div>\n\n              <div>\n                <span className=\"text-xs text-text-secondary\">Stages</span>\n                <p className=\"text-sm text-text-primary\">{stages.length}</p>\n              </div>\n\n              {stages.length > 0 && (\n                <div>\n                  <span className=\"text-xs text-text-secondary\">Data Flow</span>\n                  <div className=\"mt-1 text-xs font-mono text-text-secondary\">\n                    {stages.map((s, i) => (\n                      <span key={i}>\n                        {s.inputKey}\n                        {i < stages.length - 1 && ' → '}\n                      </span>\n                    ))}\n                    {stages.length > 0 && ` → ${stages[stages.length - 1].outputKey}`}\n                  </div>\n                </div>\n              )}\n            </div>\n          </div>\n\n          {/* Help */}\n          <div className=\"bg-bg-sunken border border-border-default rounded-lg p-6\">\n            <h3 className=\"text-sm font-semibold text-text-primary mb-2\">Tips</h3>\n            <ul className=\"text-xs text-text-secondary space-y-2\">\n              <li>• Each stage processes the output of the previous stage</li>\n              <li>• Use consistent input/output keys to chain data</li>\n              <li>• Set error handling per stage for robustness</li>\n              <li>• Disable stages to skip them during execution</li>\n            </ul>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport default PipelineBuilderPage;\n"],"mappings":"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"}