@burdenoff/microfe-bigconsole 2026.729.1 → 2026.729.2

package/dist/bigconsole/components/datasink/RefreshTypeSelector.js

@@ -277,7 +277,7 @@ var u = e(function({ value: e, onChange: u, disabled: d = !1, error: f }) {
 			f && /* @__PURE__ */ o("div", {
 				className: "flex items-start gap-2",
 				children: [/* @__PURE__ */ a("svg", {
-					className: "w-4 h-4 text-state-error flex-shrink-0 mt-0.5",
+					className: "w-4 h-4 text-status-error-text flex-shrink-0 mt-0.5",
 					fill: "none",
 					stroke: "currentColor",
 					viewBox: "0 0 24 24",
@@ -288,7 +288,7 @@ var u = e(function({ value: e, onChange: u, disabled: d = !1, error: f }) {
 						d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
 					})
 				}), /* @__PURE__ */ a("p", {
-					className: "text-xs text-state-error",
+					className: "text-xs text-status-error-text",
 					children: f
 				})]
 			})

package/dist/bigconsole/components/datasink/RefreshTypeSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"RefreshTypeSelector.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/RefreshTypeSelector.tsx"],"sourcesContent":["/**\n * Refresh Type Selector\n *\n * Component for selecting data refresh type (manual or scheduled).\n */\n\nimport { memo, useState, useEffect, useCallback, useRef } from 'react';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface SchedulePreset {\n  label: string;\n  cron: string;\n  description: string;\n}\n\ninterface TimezoneOption {\n  value: string;\n  label: string;\n}\n\ninterface RefreshSchedule {\n  cron: string;\n  timezone: string;\n}\n\ninterface RefreshConfig {\n  type: 'manual' | 'scheduled';\n  schedule?: RefreshSchedule;\n}\n\ninterface RefreshTypeSelectorProps {\n  /** Current refresh configuration */\n  value?: RefreshConfig;\n  /** Callback when configuration changes */\n  onChange: (config: RefreshConfig) => void;\n  /** Whether selector is disabled */\n  disabled?: boolean;\n  /** Error message */\n  error?: string;\n}\n\n// ============================================================================\n// CONSTANTS\n// ============================================================================\n\nconst SCHEDULE_PRESETS: SchedulePreset[] = [\n  {\n    label: 'Every 5 minutes',\n    cron: '*/5 * * * *',\n    description: 'High frequency updates',\n  },\n  {\n    label: 'Every 15 minutes',\n    cron: '*/15 * * * *',\n    description: 'Balanced frequency',\n  },\n  {\n    label: 'Every hour',\n    cron: '0 * * * *',\n    description: 'Hourly updates',\n  },\n  {\n    label: 'Every day at midnight',\n    cron: '0 0 * * *',\n    description: 'Daily updates',\n  },\n];\n\nconst TIMEZONE_OPTIONS: TimezoneOption[] = [\n  { value: 'UTC', label: 'UTC' },\n  { value: 'America/New_York', label: 'Eastern Time (US)' },\n  { value: 'America/Los_Angeles', label: 'Pacific Time (US)' },\n  { value: 'Europe/London', label: 'London (UK)' },\n  { value: 'Europe/Paris', label: 'Paris (EU)' },\n  { value: 'Asia/Tokyo', label: 'Tokyo (Japan)' },\n  { value: 'Asia/Kolkata', label: 'India (IST)' },\n  { value: 'Australia/Sydney', label: 'Sydney (Australia)' },\n];\n\n// ============================================================================\n// HELPERS\n// ============================================================================\n\n/**\n * Find preset by cron expression\n */\nfunction findPresetByCron(cron: string): SchedulePreset | null {\n  return SCHEDULE_PRESETS.find((preset) => preset.cron === cron) || null;\n}\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const RefreshTypeSelector = memo(function RefreshTypeSelector({\n  value,\n  onChange,\n  disabled = false,\n  error,\n}: RefreshTypeSelectorProps) {\n  // State\n  const [refreshType, setRefreshType] = useState<'manual' | 'scheduled'>(value?.type || 'manual');\n  const [selectedPreset, setSelectedPreset] = useState<SchedulePreset | null>(\n    value?.schedule ? findPresetByCron(value.schedule.cron) || null : SCHEDULE_PRESETS[1]\n  );\n  const [isCustomSchedule, setIsCustomSchedule] = useState(\n    value?.schedule ? !findPresetByCron(value.schedule.cron) : false\n  );\n  const [customCron, setCustomCron] = useState(value?.schedule?.cron || '');\n  const [timezone, setTimezone] = useState(value?.schedule?.timezone || 'UTC');\n  const prevValueRef = useRef(value);\n\n  // Sync state when value changes (using deferred update to avoid cascading renders)\n  useEffect(() => {\n    if (prevValueRef.current !== value && value) {\n      prevValueRef.current = value;\n      // Defer state updates to avoid synchronous setState in effect\n      queueMicrotask(() => {\n        setRefreshType(value.type);\n        if (value.schedule) {\n          setTimezone(value.schedule.timezone);\n          const preset = findPresetByCron(value.schedule.cron);\n          if (preset) {\n            setSelectedPreset(preset);\n            setIsCustomSchedule(false);\n          } else {\n            setCustomCron(value.schedule.cron);\n            setIsCustomSchedule(true);\n          }\n        }\n      });\n    }\n  }, [value]);\n\n  // Handle refresh type change\n  const handleTypeChange = useCallback(\n    (type: 'manual' | 'scheduled') => {\n      if (disabled) return;\n      setRefreshType(type);\n      if (type === 'manual') {\n        onChange({ type: 'manual' });\n      } else {\n        const cron = isCustomSchedule ? customCron : selectedPreset?.cron || SCHEDULE_PRESETS[1].cron;\n        onChange({\n          type: 'scheduled',\n          schedule: { cron, timezone },\n        });\n      }\n    },\n    [disabled, onChange, isCustomSchedule, customCron, selectedPreset, timezone]\n  );\n\n  // Handle preset selection\n  const handlePresetSelect = useCallback(\n    (preset: SchedulePreset) => {\n      if (disabled) return;\n      setSelectedPreset(preset);\n      setIsCustomSchedule(false);\n      onChange({\n        type: 'scheduled',\n        schedule: { cron: preset.cron, timezone },\n      });\n    },\n    [disabled, onChange, timezone]\n  );\n\n  // Handle custom schedule toggle\n  const handleCustomToggle = useCallback(() => {\n    if (disabled) return;\n    setIsCustomSchedule(true);\n    setSelectedPreset(null);\n    if (customCron) {\n      onChange({\n        type: 'scheduled',\n        schedule: { cron: customCron, timezone },\n      });\n    }\n  }, [disabled, onChange, customCron, timezone]);\n\n  // Handle custom cron change\n  const handleCustomCronChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const cron = e.target.value;\n      setCustomCron(cron);\n      if (cron.trim()) {\n        onChange({\n          type: 'scheduled',\n          schedule: { cron, timezone },\n        });\n      }\n    },\n    [onChange, timezone]\n  );\n\n  // Handle timezone change\n  const handleTimezoneChange = useCallback(\n    (e: React.ChangeEvent<HTMLSelectElement>) => {\n      const tz = e.target.value;\n      setTimezone(tz);\n      if (refreshType === 'scheduled') {\n        const cron = isCustomSchedule ? customCron : selectedPreset?.cron || '';\n        onChange({\n          type: 'scheduled',\n          schedule: { cron, timezone: tz },\n        });\n      }\n    },\n    [onChange, refreshType, isCustomSchedule, customCron, selectedPreset]\n  );\n\n  return (\n    <div className=\"space-y-4\">\n      {/* Label */}\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-1\">Refresh Type</label>\n        <p className=\"text-xs text-text-secondary\">When should this data be updated?</p>\n      </div>\n\n      {/* Options */}\n      <div className=\"space-y-3\">\n        {/* Manual option */}\n        <label\n          className={`\n            flex items-start gap-3\n            p-4\n            border rounded-lg\n            cursor-pointer\n            transition-all\n            ${disabled ? 'opacity-50 cursor-not-allowed' : ''}\n            ${\n              refreshType === 'manual'\n                ? 'border-action-primary-bg bg-action-primary-bg/5'\n                : 'border-border-default hover:border-border-hover'\n            }\n          `}\n        >\n          <input\n            type=\"radio\"\n            name=\"refresh-type\"\n            checked={refreshType === 'manual'}\n            onChange={() => handleTypeChange('manual')}\n            disabled={disabled}\n            className={`\n              mt-0.5\n              w-4 h-4\n              text-action-primary-bg\n              border-border-default\n              focus:ring-action-primary-bg\n              focus:ring-offset-0\n            `}\n          />\n          <div className=\"flex-1\">\n            <span className=\"text-sm font-medium text-text-primary\">Manual</span>\n            <p className=\"text-xs text-text-secondary mt-0.5\">\n              Data refreshes only when you click the &quot;Refresh&quot; button\n            </p>\n          </div>\n        </label>\n\n        {/* Scheduled option */}\n        <div\n          className={`\n            border rounded-lg\n            transition-all\n            ${disabled ? 'opacity-50' : ''}\n            ${refreshType === 'scheduled' ? 'border-action-primary-bg bg-action-primary-bg/5' : 'border-border-default'}\n          `}\n        >\n          <label\n            className={`\n              flex items-start gap-3\n              p-4\n              cursor-pointer\n              ${disabled ? 'cursor-not-allowed' : ''}\n            `}\n          >\n            <input\n              type=\"radio\"\n              name=\"refresh-type\"\n              checked={refreshType === 'scheduled'}\n              onChange={() => handleTypeChange('scheduled')}\n              disabled={disabled}\n              className={`\n                mt-0.5\n                w-4 h-4\n                text-action-primary-bg\n                border-border-default\n                focus:ring-action-primary-bg\n                focus:ring-offset-0\n              `}\n            />\n            <div className=\"flex-1\">\n              <span className=\"text-sm font-medium text-text-primary\">Automatic</span>\n              <p className=\"text-xs text-text-secondary mt-0.5\">Data refreshes on a schedule</p>\n            </div>\n          </label>\n\n          {/* Schedule options (shown when scheduled is selected) */}\n          {refreshType === 'scheduled' && (\n            <div className=\"px-4 pb-4 space-y-4\">\n              {/* Schedule presets */}\n              <div className=\"border-t border-border-default pt-4\">\n                <label className=\"block text-xs font-medium text-text-secondary mb-2\">Schedule</label>\n                <div className=\"grid grid-cols-2 gap-2\">\n                  {SCHEDULE_PRESETS.map((preset) => (\n                    <button\n                      key={preset.cron}\n                      type=\"button\"\n                      onClick={() => handlePresetSelect(preset)}\n                      disabled={disabled}\n                      className={`\n                        px-3 py-2\n                        text-left\n                        border rounded-md\n                        transition-colors\n                        ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}\n                        ${\n                          !isCustomSchedule && selectedPreset?.cron === preset.cron\n                            ? 'border-action-primary-bg bg-action-primary-bg/10 text-action-primary-bg'\n                            : 'border-border-default hover:border-border-hover'\n                        }\n                      `}\n                    >\n                      <span className=\"text-sm font-medium\">{preset.label}</span>\n                    </button>\n                  ))}\n                </div>\n              </div>\n\n              {/* Custom schedule */}\n              <div>\n                <button\n                  type=\"button\"\n                  onClick={handleCustomToggle}\n                  disabled={disabled}\n                  className={`\n                    text-xs\n                    ${isCustomSchedule ? 'text-action-primary-bg' : 'text-text-secondary hover:text-text-primary'}\n                  `}\n                >\n                  {isCustomSchedule ? 'Using custom schedule' : 'Use custom schedule...'}\n                </button>\n                {isCustomSchedule && (\n                  <div className=\"mt-2\">\n                    <input\n                      type=\"text\"\n                      value={customCron}\n                      onChange={handleCustomCronChange}\n                      disabled={disabled}\n                      placeholder=\"*/15 * * * *\"\n                      className={`\n                        w-full px-3 py-2\n                        bg-bg-sunken\n                        border rounded-md\n                        text-sm text-text-primary\n                        placeholder-text-tertiary\n                        font-mono\n                        focus:outline-none\n                        focus:border-action-primary-bg\n                        focus:ring-2\n                        focus:ring-action-primary-bg/20\n                        border-border-default\n                      `}\n                    />\n                    <p className=\"mt-1 text-xs text-text-tertiary\">\n                      Enter a cron expression (e.g., */15 * * * * for every 15 minutes)\n                    </p>\n                  </div>\n                )}\n              </div>\n\n              {/* Timezone */}\n              <div>\n                <label className=\"block text-xs font-medium text-text-secondary mb-2\">Timezone</label>\n                <select\n                  value={timezone}\n                  onChange={handleTimezoneChange}\n                  disabled={disabled}\n                  className={`\n                    w-full px-3 py-2\n                    bg-bg-sunken\n                    border border-border-default rounded-md\n                    text-sm text-text-primary\n                    focus:outline-none\n                    focus:border-action-primary-bg\n                    focus:ring-2\n                    focus:ring-action-primary-bg/20\n                  `}\n                >\n                  {TIMEZONE_OPTIONS.map((tz) => (\n                    <option key={tz.value} value={tz.value}>\n                      {tz.label}\n                    </option>\n                  ))}\n                </select>\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n\n      {/* Error message */}\n      {error && (\n        <div className=\"flex items-start gap-2\">\n          <svg\n            className=\"w-4 h-4 text-state-error flex-shrink-0 mt-0.5\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\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          <p className=\"text-xs text-state-error\">{error}</p>\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default RefreshTypeSelector;\n"],"mappings":"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"}
+{"version":3,"file":"RefreshTypeSelector.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/RefreshTypeSelector.tsx"],"sourcesContent":["/**\n * Refresh Type Selector\n *\n * Component for selecting data refresh type (manual or scheduled).\n */\n\nimport { memo, useState, useEffect, useCallback, useRef } from 'react';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface SchedulePreset {\n  label: string;\n  cron: string;\n  description: string;\n}\n\ninterface TimezoneOption {\n  value: string;\n  label: string;\n}\n\ninterface RefreshSchedule {\n  cron: string;\n  timezone: string;\n}\n\ninterface RefreshConfig {\n  type: 'manual' | 'scheduled';\n  schedule?: RefreshSchedule;\n}\n\ninterface RefreshTypeSelectorProps {\n  /** Current refresh configuration */\n  value?: RefreshConfig;\n  /** Callback when configuration changes */\n  onChange: (config: RefreshConfig) => void;\n  /** Whether selector is disabled */\n  disabled?: boolean;\n  /** Error message */\n  error?: string;\n}\n\n// ============================================================================\n// CONSTANTS\n// ============================================================================\n\nconst SCHEDULE_PRESETS: SchedulePreset[] = [\n  {\n    label: 'Every 5 minutes',\n    cron: '*/5 * * * *',\n    description: 'High frequency updates',\n  },\n  {\n    label: 'Every 15 minutes',\n    cron: '*/15 * * * *',\n    description: 'Balanced frequency',\n  },\n  {\n    label: 'Every hour',\n    cron: '0 * * * *',\n    description: 'Hourly updates',\n  },\n  {\n    label: 'Every day at midnight',\n    cron: '0 0 * * *',\n    description: 'Daily updates',\n  },\n];\n\nconst TIMEZONE_OPTIONS: TimezoneOption[] = [\n  { value: 'UTC', label: 'UTC' },\n  { value: 'America/New_York', label: 'Eastern Time (US)' },\n  { value: 'America/Los_Angeles', label: 'Pacific Time (US)' },\n  { value: 'Europe/London', label: 'London (UK)' },\n  { value: 'Europe/Paris', label: 'Paris (EU)' },\n  { value: 'Asia/Tokyo', label: 'Tokyo (Japan)' },\n  { value: 'Asia/Kolkata', label: 'India (IST)' },\n  { value: 'Australia/Sydney', label: 'Sydney (Australia)' },\n];\n\n// ============================================================================\n// HELPERS\n// ============================================================================\n\n/**\n * Find preset by cron expression\n */\nfunction findPresetByCron(cron: string): SchedulePreset | null {\n  return SCHEDULE_PRESETS.find((preset) => preset.cron === cron) || null;\n}\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const RefreshTypeSelector = memo(function RefreshTypeSelector({\n  value,\n  onChange,\n  disabled = false,\n  error,\n}: RefreshTypeSelectorProps) {\n  // State\n  const [refreshType, setRefreshType] = useState<'manual' | 'scheduled'>(value?.type || 'manual');\n  const [selectedPreset, setSelectedPreset] = useState<SchedulePreset | null>(\n    value?.schedule ? findPresetByCron(value.schedule.cron) || null : SCHEDULE_PRESETS[1]\n  );\n  const [isCustomSchedule, setIsCustomSchedule] = useState(\n    value?.schedule ? !findPresetByCron(value.schedule.cron) : false\n  );\n  const [customCron, setCustomCron] = useState(value?.schedule?.cron || '');\n  const [timezone, setTimezone] = useState(value?.schedule?.timezone || 'UTC');\n  const prevValueRef = useRef(value);\n\n  // Sync state when value changes (using deferred update to avoid cascading renders)\n  useEffect(() => {\n    if (prevValueRef.current !== value && value) {\n      prevValueRef.current = value;\n      // Defer state updates to avoid synchronous setState in effect\n      queueMicrotask(() => {\n        setRefreshType(value.type);\n        if (value.schedule) {\n          setTimezone(value.schedule.timezone);\n          const preset = findPresetByCron(value.schedule.cron);\n          if (preset) {\n            setSelectedPreset(preset);\n            setIsCustomSchedule(false);\n          } else {\n            setCustomCron(value.schedule.cron);\n            setIsCustomSchedule(true);\n          }\n        }\n      });\n    }\n  }, [value]);\n\n  // Handle refresh type change\n  const handleTypeChange = useCallback(\n    (type: 'manual' | 'scheduled') => {\n      if (disabled) return;\n      setRefreshType(type);\n      if (type === 'manual') {\n        onChange({ type: 'manual' });\n      } else {\n        const cron = isCustomSchedule ? customCron : selectedPreset?.cron || SCHEDULE_PRESETS[1].cron;\n        onChange({\n          type: 'scheduled',\n          schedule: { cron, timezone },\n        });\n      }\n    },\n    [disabled, onChange, isCustomSchedule, customCron, selectedPreset, timezone]\n  );\n\n  // Handle preset selection\n  const handlePresetSelect = useCallback(\n    (preset: SchedulePreset) => {\n      if (disabled) return;\n      setSelectedPreset(preset);\n      setIsCustomSchedule(false);\n      onChange({\n        type: 'scheduled',\n        schedule: { cron: preset.cron, timezone },\n      });\n    },\n    [disabled, onChange, timezone]\n  );\n\n  // Handle custom schedule toggle\n  const handleCustomToggle = useCallback(() => {\n    if (disabled) return;\n    setIsCustomSchedule(true);\n    setSelectedPreset(null);\n    if (customCron) {\n      onChange({\n        type: 'scheduled',\n        schedule: { cron: customCron, timezone },\n      });\n    }\n  }, [disabled, onChange, customCron, timezone]);\n\n  // Handle custom cron change\n  const handleCustomCronChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const cron = e.target.value;\n      setCustomCron(cron);\n      if (cron.trim()) {\n        onChange({\n          type: 'scheduled',\n          schedule: { cron, timezone },\n        });\n      }\n    },\n    [onChange, timezone]\n  );\n\n  // Handle timezone change\n  const handleTimezoneChange = useCallback(\n    (e: React.ChangeEvent<HTMLSelectElement>) => {\n      const tz = e.target.value;\n      setTimezone(tz);\n      if (refreshType === 'scheduled') {\n        const cron = isCustomSchedule ? customCron : selectedPreset?.cron || '';\n        onChange({\n          type: 'scheduled',\n          schedule: { cron, timezone: tz },\n        });\n      }\n    },\n    [onChange, refreshType, isCustomSchedule, customCron, selectedPreset]\n  );\n\n  return (\n    <div className=\"space-y-4\">\n      {/* Label */}\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-1\">Refresh Type</label>\n        <p className=\"text-xs text-text-secondary\">When should this data be updated?</p>\n      </div>\n\n      {/* Options */}\n      <div className=\"space-y-3\">\n        {/* Manual option */}\n        <label\n          className={`\n            flex items-start gap-3\n            p-4\n            border rounded-lg\n            cursor-pointer\n            transition-all\n            ${disabled ? 'opacity-50 cursor-not-allowed' : ''}\n            ${\n              refreshType === 'manual'\n                ? 'border-action-primary-bg bg-action-primary-bg/5'\n                : 'border-border-default hover:border-border-hover'\n            }\n          `}\n        >\n          <input\n            type=\"radio\"\n            name=\"refresh-type\"\n            checked={refreshType === 'manual'}\n            onChange={() => handleTypeChange('manual')}\n            disabled={disabled}\n            className={`\n              mt-0.5\n              w-4 h-4\n              text-action-primary-bg\n              border-border-default\n              focus:ring-action-primary-bg\n              focus:ring-offset-0\n            `}\n          />\n          <div className=\"flex-1\">\n            <span className=\"text-sm font-medium text-text-primary\">Manual</span>\n            <p className=\"text-xs text-text-secondary mt-0.5\">\n              Data refreshes only when you click the &quot;Refresh&quot; button\n            </p>\n          </div>\n        </label>\n\n        {/* Scheduled option */}\n        <div\n          className={`\n            border rounded-lg\n            transition-all\n            ${disabled ? 'opacity-50' : ''}\n            ${refreshType === 'scheduled' ? 'border-action-primary-bg bg-action-primary-bg/5' : 'border-border-default'}\n          `}\n        >\n          <label\n            className={`\n              flex items-start gap-3\n              p-4\n              cursor-pointer\n              ${disabled ? 'cursor-not-allowed' : ''}\n            `}\n          >\n            <input\n              type=\"radio\"\n              name=\"refresh-type\"\n              checked={refreshType === 'scheduled'}\n              onChange={() => handleTypeChange('scheduled')}\n              disabled={disabled}\n              className={`\n                mt-0.5\n                w-4 h-4\n                text-action-primary-bg\n                border-border-default\n                focus:ring-action-primary-bg\n                focus:ring-offset-0\n              `}\n            />\n            <div className=\"flex-1\">\n              <span className=\"text-sm font-medium text-text-primary\">Automatic</span>\n              <p className=\"text-xs text-text-secondary mt-0.5\">Data refreshes on a schedule</p>\n            </div>\n          </label>\n\n          {/* Schedule options (shown when scheduled is selected) */}\n          {refreshType === 'scheduled' && (\n            <div className=\"px-4 pb-4 space-y-4\">\n              {/* Schedule presets */}\n              <div className=\"border-t border-border-default pt-4\">\n                <label className=\"block text-xs font-medium text-text-secondary mb-2\">Schedule</label>\n                <div className=\"grid grid-cols-2 gap-2\">\n                  {SCHEDULE_PRESETS.map((preset) => (\n                    <button\n                      key={preset.cron}\n                      type=\"button\"\n                      onClick={() => handlePresetSelect(preset)}\n                      disabled={disabled}\n                      className={`\n                        px-3 py-2\n                        text-left\n                        border rounded-md\n                        transition-colors\n                        ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}\n                        ${\n                          !isCustomSchedule && selectedPreset?.cron === preset.cron\n                            ? 'border-action-primary-bg bg-action-primary-bg/10 text-action-primary-bg'\n                            : 'border-border-default hover:border-border-hover'\n                        }\n                      `}\n                    >\n                      <span className=\"text-sm font-medium\">{preset.label}</span>\n                    </button>\n                  ))}\n                </div>\n              </div>\n\n              {/* Custom schedule */}\n              <div>\n                <button\n                  type=\"button\"\n                  onClick={handleCustomToggle}\n                  disabled={disabled}\n                  className={`\n                    text-xs\n                    ${isCustomSchedule ? 'text-action-primary-bg' : 'text-text-secondary hover:text-text-primary'}\n                  `}\n                >\n                  {isCustomSchedule ? 'Using custom schedule' : 'Use custom schedule...'}\n                </button>\n                {isCustomSchedule && (\n                  <div className=\"mt-2\">\n                    <input\n                      type=\"text\"\n                      value={customCron}\n                      onChange={handleCustomCronChange}\n                      disabled={disabled}\n                      placeholder=\"*/15 * * * *\"\n                      className={`\n                        w-full px-3 py-2\n                        bg-bg-sunken\n                        border rounded-md\n                        text-sm text-text-primary\n                        placeholder-text-tertiary\n                        font-mono\n                        focus:outline-none\n                        focus:border-action-primary-bg\n                        focus:ring-2\n                        focus:ring-action-primary-bg/20\n                        border-border-default\n                      `}\n                    />\n                    <p className=\"mt-1 text-xs text-text-tertiary\">\n                      Enter a cron expression (e.g., */15 * * * * for every 15 minutes)\n                    </p>\n                  </div>\n                )}\n              </div>\n\n              {/* Timezone */}\n              <div>\n                <label className=\"block text-xs font-medium text-text-secondary mb-2\">Timezone</label>\n                <select\n                  value={timezone}\n                  onChange={handleTimezoneChange}\n                  disabled={disabled}\n                  className={`\n                    w-full px-3 py-2\n                    bg-bg-sunken\n                    border border-border-default rounded-md\n                    text-sm text-text-primary\n                    focus:outline-none\n                    focus:border-action-primary-bg\n                    focus:ring-2\n                    focus:ring-action-primary-bg/20\n                  `}\n                >\n                  {TIMEZONE_OPTIONS.map((tz) => (\n                    <option key={tz.value} value={tz.value}>\n                      {tz.label}\n                    </option>\n                  ))}\n                </select>\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n\n      {/* Error message */}\n      {error && (\n        <div className=\"flex items-start gap-2\">\n          <svg\n            className=\"w-4 h-4 text-status-error-text flex-shrink-0 mt-0.5\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\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          <p className=\"text-xs text-status-error-text\">{error}</p>\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default RefreshTypeSelector;\n"],"mappings":"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"}

package/dist/bigconsole/components/datasink/SetupStateBadge.js

@@ -5,8 +5,8 @@ var r = {
 	workflow_pending: {
 		label: "Workflow Pending",
 		shortLabel: "Draft",
-		bgColor: "bg-state-warning/10",
-		textColor: "text-state-warning",
+		bgColor: "bg-status-warning-bg/10",
+		textColor: "text-status-warning-text",
 		icon: "pending"
 	},
 	workflow_running: {
@@ -19,22 +19,22 @@ var r = {
 	workflow_completed: {
 		label: "Workflow Completed",
 		shortLabel: "Config Needed",
-		bgColor: "bg-state-warning/10",
-		textColor: "text-state-warning",
+		bgColor: "bg-status-warning-bg/10",
+		textColor: "text-status-warning-text",
 		icon: "pending"
 	},
 	configuration_pending: {
 		label: "Configuration Pending",
 		shortLabel: "In Progress",
-		bgColor: "bg-state-warning/10",
-		textColor: "text-state-warning",
+		bgColor: "bg-status-warning-bg/10",
+		textColor: "text-status-warning-text",
 		icon: "pending"
 	},
 	completed: {
 		label: "Ready",
 		shortLabel: "Ready",
-		bgColor: "bg-state-success/10",
-		textColor: "text-state-success",
+		bgColor: "bg-status-success-bg/10",
+		textColor: "text-status-success-text",
 		icon: "completed"
 	}
 }, i = {

package/dist/bigconsole/components/datasink/SetupStateBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"SetupStateBadge.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/SetupStateBadge.tsx"],"sourcesContent":["/**\n * Setup State Badge\n *\n * Badge component showing DataSink setup state.\n */\n\nimport { memo, type ComponentType } from 'react';\nimport type { DataSinkSetupState } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface SetupStateBadgeProps {\n  /** Setup state */\n  state: DataSinkSetupState;\n  /** Whether to show abbreviated label */\n  abbreviated?: boolean;\n  /** Badge size */\n  size?: 'sm' | 'md';\n}\n\ninterface StateConfig {\n  label: string;\n  shortLabel: string;\n  bgColor: string;\n  textColor: string;\n  icon: 'pending' | 'running' | 'completed';\n}\n\n// ============================================================================\n// CONSTANTS\n// ============================================================================\n\nconst STATE_CONFIGS: Record<DataSinkSetupState, StateConfig> = {\n  workflow_pending: {\n    label: 'Workflow Pending',\n    shortLabel: 'Draft',\n    bgColor: 'bg-state-warning/10',\n    textColor: 'text-state-warning',\n    icon: 'pending',\n  },\n  workflow_running: {\n    label: 'Workflow Running',\n    shortLabel: 'Running',\n    bgColor: 'bg-action-primary-bg/10',\n    textColor: 'text-action-primary-bg',\n    icon: 'running',\n  },\n  workflow_completed: {\n    label: 'Workflow Completed',\n    shortLabel: 'Config Needed',\n    bgColor: 'bg-state-warning/10',\n    textColor: 'text-state-warning',\n    icon: 'pending',\n  },\n  configuration_pending: {\n    label: 'Configuration Pending',\n    shortLabel: 'In Progress',\n    bgColor: 'bg-state-warning/10',\n    textColor: 'text-state-warning',\n    icon: 'pending',\n  },\n  completed: {\n    label: 'Ready',\n    shortLabel: 'Ready',\n    bgColor: 'bg-state-success/10',\n    textColor: 'text-state-success',\n    icon: 'completed',\n  },\n};\n\n// ============================================================================\n// ICONS\n// ============================================================================\n\nconst PendingIcon = ({ 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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\"\n    />\n  </svg>\n);\n\nconst RunningIcon = ({ className }: { className?: string }) => (\n  <svg className={`${className} animate-spin`} 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);\n\nconst CompletedIcon = ({ 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 ICON_MAP: Record<string, ComponentType<{ className?: string }>> = {\n  pending: PendingIcon,\n  running: RunningIcon,\n  completed: CompletedIcon,\n};\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const SetupStateBadge = memo(function SetupStateBadge({\n  state,\n  abbreviated = false,\n  size = 'sm',\n}: SetupStateBadgeProps) {\n  const config = STATE_CONFIGS[state];\n\n  if (!config) {\n    return null;\n  }\n\n  const sizeClasses = {\n    sm: 'px-2 py-0.5 text-xs',\n    md: 'px-2.5 py-1 text-sm',\n  };\n\n  const iconSizes = {\n    sm: 'w-3 h-3',\n    md: 'w-4 h-4',\n  };\n\n  const IconComponent = ICON_MAP[config.icon];\n\n  return (\n    <span\n      className={`\n        inline-flex items-center gap-1\n        font-medium\n        rounded-full\n        ${sizeClasses[size]}\n        ${config.bgColor}\n        ${config.textColor}\n      `}\n    >\n      <IconComponent className={iconSizes[size]} />\n      <span>{abbreviated ? config.shortLabel : config.label}</span>\n    </span>\n  );\n});\n\nexport default SetupStateBadge;\n"],"mappings":";;;AAkCA,IAAM,IAAyD;CAC7D,kBAAkB;EAChB,OAAO;EACP,YAAY;EACZ,SAAS;EACT,WAAW;EACX,MAAM;EACP;CACD,kBAAkB;EAChB,OAAO;EACP,YAAY;EACZ,SAAS;EACT,WAAW;EACX,MAAM;EACP;CACD,oBAAoB;EAClB,OAAO;EACP,YAAY;EACZ,SAAS;EACT,WAAW;EACX,MAAM;EACP;CACD,uBAAuB;EACrB,OAAO;EACP,YAAY;EACZ,SAAS;EACT,WAAW;EACX,MAAM;EACP;CACD,WAAW;EACT,OAAO;EACP,YAAY;EACZ,SAAS;EACT,WAAW;EACX,MAAM;EACP;CACF,EAkCK,IAAkE;CACtE,UA7BmB,EAAE,mBACrB,kBAAC,OAAD;EAAgB;EAAW,MAAK;EAAO,QAAO;EAAe,SAAQ;YACnE,kBAAC,QAAD;GACE,eAAc;GACd,gBAAe;GACf,aAAa;GACb,GAAE;GACF,CAAA;EACE,CAAA;CAsBN,UAnBmB,EAAE,mBACrB,kBAAC,OAAD;EAAK,WAAW,GAAG,EAAU;EAAgB,MAAK;EAAO,SAAQ;YAAjE,CACE,kBAAC,UAAD;GAAQ,WAAU;GAAa,IAAG;GAAK,IAAG;GAAK,GAAE;GAAK,QAAO;GAAe,aAAY;GAAM,CAAA,EAC9F,kBAAC,QAAD;GACE,WAAU;GACV,MAAK;GACL,GAAE;GACF,CAAA,CACE;;CAYN,YATqB,EAAE,mBACvB,kBAAC,OAAD;EAAgB;EAAW,MAAK;EAAO,QAAO;EAAe,SAAQ;YACnE,kBAAC,QAAD;GAAM,eAAc;GAAQ,gBAAe;GAAQ,aAAa;GAAG,GAAE;GAAmB,CAAA;EACpF,CAAA;CAOP,EAMY,IAAkB,EAAK,SAAyB,EAC3D,UACA,iBAAc,IACd,UAAO,QACgB;CACvB,IAAM,IAAS,EAAc;AAE7B,KAAI,CAAC,EACH,QAAO;CAGT,IAAM,IAAc;EAClB,IAAI;EACJ,IAAI;EACL,EAEK,IAAY;EAChB,IAAI;EACJ,IAAI;EACL,EAEK,IAAgB,EAAS,EAAO;AAEtC,QACE,kBAAC,QAAD;EACE,WAAW;;;;UAIP,EAAY,GAAM;UAClB,EAAO,QAAQ;UACf,EAAO,UAAU;;YAPvB,CAUE,kBAAC,GAAD,EAAe,WAAW,EAAU,IAAS,CAAA,EAC7C,kBAAC,QAAD,EAAA,UAAO,IAAc,EAAO,aAAa,EAAO,OAAa,CAAA,CACxD;;EAET"}
+{"version":3,"file":"SetupStateBadge.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/SetupStateBadge.tsx"],"sourcesContent":["/**\n * Setup State Badge\n *\n * Badge component showing DataSink setup state.\n */\n\nimport { memo, type ComponentType } from 'react';\nimport type { DataSinkSetupState } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface SetupStateBadgeProps {\n  /** Setup state */\n  state: DataSinkSetupState;\n  /** Whether to show abbreviated label */\n  abbreviated?: boolean;\n  /** Badge size */\n  size?: 'sm' | 'md';\n}\n\ninterface StateConfig {\n  label: string;\n  shortLabel: string;\n  bgColor: string;\n  textColor: string;\n  icon: 'pending' | 'running' | 'completed';\n}\n\n// ============================================================================\n// CONSTANTS\n// ============================================================================\n\nconst STATE_CONFIGS: Record<DataSinkSetupState, StateConfig> = {\n  workflow_pending: {\n    label: 'Workflow Pending',\n    shortLabel: 'Draft',\n    bgColor: 'bg-status-warning-bg/10',\n    textColor: 'text-status-warning-text',\n    icon: 'pending',\n  },\n  workflow_running: {\n    label: 'Workflow Running',\n    shortLabel: 'Running',\n    bgColor: 'bg-action-primary-bg/10',\n    textColor: 'text-action-primary-bg',\n    icon: 'running',\n  },\n  workflow_completed: {\n    label: 'Workflow Completed',\n    shortLabel: 'Config Needed',\n    bgColor: 'bg-status-warning-bg/10',\n    textColor: 'text-status-warning-text',\n    icon: 'pending',\n  },\n  configuration_pending: {\n    label: 'Configuration Pending',\n    shortLabel: 'In Progress',\n    bgColor: 'bg-status-warning-bg/10',\n    textColor: 'text-status-warning-text',\n    icon: 'pending',\n  },\n  completed: {\n    label: 'Ready',\n    shortLabel: 'Ready',\n    bgColor: 'bg-status-success-bg/10',\n    textColor: 'text-status-success-text',\n    icon: 'completed',\n  },\n};\n\n// ============================================================================\n// ICONS\n// ============================================================================\n\nconst PendingIcon = ({ 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 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\"\n    />\n  </svg>\n);\n\nconst RunningIcon = ({ className }: { className?: string }) => (\n  <svg className={`${className} animate-spin`} 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);\n\nconst CompletedIcon = ({ 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 ICON_MAP: Record<string, ComponentType<{ className?: string }>> = {\n  pending: PendingIcon,\n  running: RunningIcon,\n  completed: CompletedIcon,\n};\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const SetupStateBadge = memo(function SetupStateBadge({\n  state,\n  abbreviated = false,\n  size = 'sm',\n}: SetupStateBadgeProps) {\n  const config = STATE_CONFIGS[state];\n\n  if (!config) {\n    return null;\n  }\n\n  const sizeClasses = {\n    sm: 'px-2 py-0.5 text-xs',\n    md: 'px-2.5 py-1 text-sm',\n  };\n\n  const iconSizes = {\n    sm: 'w-3 h-3',\n    md: 'w-4 h-4',\n  };\n\n  const IconComponent = ICON_MAP[config.icon];\n\n  return (\n    <span\n      className={`\n        inline-flex items-center gap-1\n        font-medium\n        rounded-full\n        ${sizeClasses[size]}\n        ${config.bgColor}\n        ${config.textColor}\n      `}\n    >\n      <IconComponent className={iconSizes[size]} />\n      <span>{abbreviated ? config.shortLabel : config.label}</span>\n    </span>\n  );\n});\n\nexport default SetupStateBadge;\n"],"mappings":";;;AAkCA,IAAM,IAAyD;CAC7D,kBAAkB;EAChB,OAAO;EACP,YAAY;EACZ,SAAS;EACT,WAAW;EACX,MAAM;EACP;CACD,kBAAkB;EAChB,OAAO;EACP,YAAY;EACZ,SAAS;EACT,WAAW;EACX,MAAM;EACP;CACD,oBAAoB;EAClB,OAAO;EACP,YAAY;EACZ,SAAS;EACT,WAAW;EACX,MAAM;EACP;CACD,uBAAuB;EACrB,OAAO;EACP,YAAY;EACZ,SAAS;EACT,WAAW;EACX,MAAM;EACP;CACD,WAAW;EACT,OAAO;EACP,YAAY;EACZ,SAAS;EACT,WAAW;EACX,MAAM;EACP;CACF,EAkCK,IAAkE;CACtE,UA7BmB,EAAE,mBACrB,kBAAC,OAAD;EAAgB;EAAW,MAAK;EAAO,QAAO;EAAe,SAAQ;YACnE,kBAAC,QAAD;GACE,eAAc;GACd,gBAAe;GACf,aAAa;GACb,GAAE;GACF,CAAA;EACE,CAAA;CAsBN,UAnBmB,EAAE,mBACrB,kBAAC,OAAD;EAAK,WAAW,GAAG,EAAU;EAAgB,MAAK;EAAO,SAAQ;YAAjE,CACE,kBAAC,UAAD;GAAQ,WAAU;GAAa,IAAG;GAAK,IAAG;GAAK,GAAE;GAAK,QAAO;GAAe,aAAY;GAAM,CAAA,EAC9F,kBAAC,QAAD;GACE,WAAU;GACV,MAAK;GACL,GAAE;GACF,CAAA,CACE;;CAYN,YATqB,EAAE,mBACvB,kBAAC,OAAD;EAAgB;EAAW,MAAK;EAAO,QAAO;EAAe,SAAQ;YACnE,kBAAC,QAAD;GAAM,eAAc;GAAQ,gBAAe;GAAQ,aAAa;GAAG,GAAE;GAAmB,CAAA;EACpF,CAAA;CAOP,EAMY,IAAkB,EAAK,SAAyB,EAC3D,UACA,iBAAc,IACd,UAAO,QACgB;CACvB,IAAM,IAAS,EAAc;AAE7B,KAAI,CAAC,EACH,QAAO;CAGT,IAAM,IAAc;EAClB,IAAI;EACJ,IAAI;EACL,EAEK,IAAY;EAChB,IAAI;EACJ,IAAI;EACL,EAEK,IAAgB,EAAS,EAAO;AAEtC,QACE,kBAAC,QAAD;EACE,WAAW;;;;UAIP,EAAY,GAAM;UAClB,EAAO,QAAQ;UACf,EAAO,UAAU;;YAPvB,CAUE,kBAAC,GAAD,EAAe,WAAW,EAAU,IAAS,CAAA,EAC7C,kBAAC,QAAD,EAAA,UAAO,IAAc,EAAO,aAAa,EAAO,OAAa,CAAA,CACxD;;EAET"}

package/dist/bigconsole/components/datasink/WorkflowStatusPanel.js

@@ -10,19 +10,19 @@ function a(e, t) {
 		dotColor: "bg-action-primary-bg"
 	} : t === "error" ? {
 		label: "Failed",
-		bgColor: "bg-state-error/10",
-		textColor: "text-state-error",
-		dotColor: "bg-state-error"
+		bgColor: "bg-status-error-bg/10",
+		textColor: "text-status-error-text",
+		dotColor: "bg-status-error-bg"
 	} : e === "workflow_pending" ? {
 		label: "Pending",
-		bgColor: "bg-state-warning/10",
-		textColor: "text-state-warning",
-		dotColor: "bg-state-warning"
+		bgColor: "bg-status-warning-bg/10",
+		textColor: "text-status-warning-text",
+		dotColor: "bg-status-warning-bg"
 	} : {
 		label: "Completed",
-		bgColor: "bg-state-success/10",
-		textColor: "text-state-success",
-		dotColor: "bg-state-success"
+		bgColor: "bg-status-success-bg/10",
+		textColor: "text-status-success-text",
+		dotColor: "bg-status-success-bg"
 	};
 }
 var o = ({ className: e }) => /* @__PURE__ */ n("svg", {
@@ -123,14 +123,14 @@ var o = ({ className: e }) => /* @__PURE__ */ n("svg", {
 					]
 				}),
 				p === "error" && m && /* @__PURE__ */ r("div", {
-					className: "flex items-start gap-2 p-3 bg-state-error/10 rounded-md",
-					children: [/* @__PURE__ */ n(l, { className: "w-4 h-4 text-state-error flex-shrink-0 mt-0.5" }), /* @__PURE__ */ r("div", {
+					className: "flex items-start gap-2 p-3 bg-status-error-bg/10 rounded-md",
+					children: [/* @__PURE__ */ n(l, { className: "w-4 h-4 text-status-error-text flex-shrink-0 mt-0.5" }), /* @__PURE__ */ r("div", {
 						className: "min-w-0",
 						children: [m.code && /* @__PURE__ */ n("p", {
-							className: "text-xs font-medium text-state-error",
+							className: "text-xs font-medium text-status-error-text",
 							children: m.code
 						}), /* @__PURE__ */ n("p", {
-							className: "text-xs text-state-error/80 mt-0.5",
+							className: "text-xs text-status-error-text/80 mt-0.5",
 							children: m.message || "An error occurred during workflow execution"
 						})]
 					})]

package/dist/bigconsole/components/datasink/WorkflowStatusPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"WorkflowStatusPanel.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/WorkflowStatusPanel.tsx"],"sourcesContent":["/**\n * Workflow Status Panel\n *\n * Panel showing FluidGrids workflow status and execution details.\n */\n\nimport { memo, useMemo } from 'react';\nimport { formatDistanceToNow } from 'date-fns';\nimport type { DataSinkSetupState, DataSinkStatus } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface WorkflowStatusPanelProps {\n  /** Workflow ID */\n  workflowId?: string;\n  /** Execution ID */\n  executionId?: string;\n  /** Last refreshed timestamp */\n  lastRefreshedAt?: string;\n  /** Setup state */\n  setupState?: DataSinkSetupState;\n  /** DataSink status */\n  status?: DataSinkStatus;\n  /** Error metadata */\n  errorMetadata?: {\n    code?: string;\n    message?: string;\n  };\n  /** Callback to re-run workflow */\n  onRerunWorkflow?: () => void;\n  /** Callback to view workflow */\n  onViewWorkflow?: () => void;\n  /** Whether controls are disabled */\n  disabled?: boolean;\n  /** Whether re-run is in progress */\n  isRerunning?: boolean;\n}\n\ninterface StatusConfig {\n  label: string;\n  bgColor: string;\n  textColor: string;\n  dotColor: string;\n}\n\n// ============================================================================\n// HELPERS\n// ============================================================================\n\n/**\n * Get status display configuration\n */\nfunction getStatusConfig(setupState?: DataSinkSetupState, status?: DataSinkStatus): StatusConfig {\n  if (status === 'refreshing' || setupState === 'workflow_running') {\n    return {\n      label: 'Running',\n      bgColor: 'bg-action-primary-bg/10',\n      textColor: 'text-action-primary-bg',\n      dotColor: 'bg-action-primary-bg',\n    };\n  }\n  if (status === 'error') {\n    return {\n      label: 'Failed',\n      bgColor: 'bg-state-error/10',\n      textColor: 'text-state-error',\n      dotColor: 'bg-state-error',\n    };\n  }\n  if (setupState === 'workflow_pending') {\n    return {\n      label: 'Pending',\n      bgColor: 'bg-state-warning/10',\n      textColor: 'text-state-warning',\n      dotColor: 'bg-state-warning',\n    };\n  }\n  return {\n    label: 'Completed',\n    bgColor: 'bg-state-success/10',\n    textColor: 'text-state-success',\n    dotColor: 'bg-state-success',\n  };\n}\n\n// ============================================================================\n// ICONS\n// ============================================================================\n\nconst WorkflowIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M13 10V3L4 14h7v7l9-11h-7z\" />\n  </svg>\n);\n\nconst RefreshIcon = ({ className, spinning }: { className?: string; spinning?: boolean }) => (\n  <svg\n    className={`${className} ${spinning ? 'animate-spin' : ''}`}\n    fill=\"none\"\n    stroke=\"currentColor\"\n    viewBox=\"0 0 24 24\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"\n    />\n  </svg>\n);\n\nconst ExternalLinkIcon = ({ 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=\"M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14\"\n    />\n  </svg>\n);\n\nconst AlertIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n    />\n  </svg>\n);\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const WorkflowStatusPanel = memo(function WorkflowStatusPanel({\n  workflowId,\n  executionId,\n  lastRefreshedAt,\n  setupState,\n  status,\n  errorMetadata,\n  onRerunWorkflow,\n  onViewWorkflow,\n  disabled = false,\n  isRerunning = false,\n}: WorkflowStatusPanelProps) {\n  // Get status config\n  const statusConfig = useMemo(() => getStatusConfig(setupState, status), [setupState, status]);\n\n  const isRunning = status === 'refreshing' || setupState === 'workflow_running' || isRerunning;\n\n  const lastRefreshedText = lastRefreshedAt\n    ? formatDistanceToNow(new Date(lastRefreshedAt), { addSuffix: true })\n    : 'Never';\n\n  return (\n    <div className=\"border border-border-default rounded-lg bg-bg-surface overflow-hidden\">\n      {/* Header */}\n      <div className=\"px-4 py-3 border-b border-border-default bg-bg-sunken flex items-center justify-between\">\n        <div className=\"flex items-center gap-2\">\n          <WorkflowIcon className=\"w-4 h-4 text-text-secondary\" />\n          <h3 className=\"text-sm font-semibold text-text-primary\">FluidGrids Workflow</h3>\n        </div>\n        <div className={`flex items-center gap-1.5 px-2 py-0.5 rounded-full ${statusConfig.bgColor}`}>\n          <span className={`w-1.5 h-1.5 rounded-full ${statusConfig.dotColor} ${isRunning ? 'animate-pulse' : ''}`} />\n          <span className={`text-xs font-medium ${statusConfig.textColor}`}>{statusConfig.label}</span>\n        </div>\n      </div>\n\n      {/* Content */}\n      <div className=\"p-4 space-y-4\">\n        {/* Details grid */}\n        <div className=\"grid grid-cols-2 gap-4 text-sm\">\n          <div>\n            <p className=\"text-text-secondary text-xs mb-1\">Workflow ID</p>\n            <p className=\"text-text-primary font-mono text-xs truncate\" title={workflowId}>\n              {workflowId || 'Not linked'}\n            </p>\n          </div>\n          <div>\n            <p className=\"text-text-secondary text-xs mb-1\">Last Execution</p>\n            <p className=\"text-text-primary text-xs\">{lastRefreshedText}</p>\n          </div>\n          {executionId && (\n            <div className=\"col-span-2\">\n              <p className=\"text-text-secondary text-xs mb-1\">Execution ID</p>\n              <p className=\"text-text-primary font-mono text-xs truncate\" title={executionId}>\n                {executionId}\n              </p>\n            </div>\n          )}\n        </div>\n\n        {/* Error display */}\n        {status === 'error' && errorMetadata && (\n          <div className=\"flex items-start gap-2 p-3 bg-state-error/10 rounded-md\">\n            <AlertIcon className=\"w-4 h-4 text-state-error flex-shrink-0 mt-0.5\" />\n            <div className=\"min-w-0\">\n              {errorMetadata.code && <p className=\"text-xs font-medium text-state-error\">{errorMetadata.code}</p>}\n              <p className=\"text-xs text-state-error/80 mt-0.5\">\n                {errorMetadata.message || 'An error occurred during workflow execution'}\n              </p>\n            </div>\n          </div>\n        )}\n\n        {/* Actions */}\n        <div className=\"flex items-center gap-2 pt-2 border-t border-border-muted\">\n          {onRerunWorkflow && (\n            <button\n              type=\"button\"\n              onClick={onRerunWorkflow}\n              disabled={disabled || isRunning}\n              className={`\n                flex items-center gap-1.5\n                px-3 py-1.5\n                text-xs font-medium\n                bg-action-primary-bg\n                text-action-primary-fg\n                rounded-md\n                hover:bg-action-primary-bgHover\n                disabled:opacity-50\n                disabled:cursor-not-allowed\n                transition-colors\n              `}\n            >\n              <RefreshIcon className=\"w-3.5 h-3.5\" spinning={isRunning} />\n              {isRunning ? 'Running...' : 'Re-run Workflow'}\n            </button>\n          )}\n          {onViewWorkflow && (\n            <button\n              type=\"button\"\n              onClick={onViewWorkflow}\n              className={`\n                flex items-center gap-1.5\n                px-3 py-1.5\n                text-xs font-medium\n                text-text-secondary\n                rounded-md\n                hover:bg-bg-sunken\n                transition-colors\n              `}\n            >\n              <ExternalLinkIcon className=\"w-3.5 h-3.5\" />\n              View in FluidGrids\n            </button>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport default WorkflowStatusPanel;\n"],"mappings":"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"}
+{"version":3,"file":"WorkflowStatusPanel.js","names":[],"sources":["../../../../src/bigconsole/components/datasink/WorkflowStatusPanel.tsx"],"sourcesContent":["/**\n * Workflow Status Panel\n *\n * Panel showing FluidGrids workflow status and execution details.\n */\n\nimport { memo, useMemo } from 'react';\nimport { formatDistanceToNow } from 'date-fns';\nimport type { DataSinkSetupState, DataSinkStatus } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface WorkflowStatusPanelProps {\n  /** Workflow ID */\n  workflowId?: string;\n  /** Execution ID */\n  executionId?: string;\n  /** Last refreshed timestamp */\n  lastRefreshedAt?: string;\n  /** Setup state */\n  setupState?: DataSinkSetupState;\n  /** DataSink status */\n  status?: DataSinkStatus;\n  /** Error metadata */\n  errorMetadata?: {\n    code?: string;\n    message?: string;\n  };\n  /** Callback to re-run workflow */\n  onRerunWorkflow?: () => void;\n  /** Callback to view workflow */\n  onViewWorkflow?: () => void;\n  /** Whether controls are disabled */\n  disabled?: boolean;\n  /** Whether re-run is in progress */\n  isRerunning?: boolean;\n}\n\ninterface StatusConfig {\n  label: string;\n  bgColor: string;\n  textColor: string;\n  dotColor: string;\n}\n\n// ============================================================================\n// HELPERS\n// ============================================================================\n\n/**\n * Get status display configuration\n */\nfunction getStatusConfig(setupState?: DataSinkSetupState, status?: DataSinkStatus): StatusConfig {\n  if (status === 'refreshing' || setupState === 'workflow_running') {\n    return {\n      label: 'Running',\n      bgColor: 'bg-action-primary-bg/10',\n      textColor: 'text-action-primary-bg',\n      dotColor: 'bg-action-primary-bg',\n    };\n  }\n  if (status === 'error') {\n    return {\n      label: 'Failed',\n      bgColor: 'bg-status-error-bg/10',\n      textColor: 'text-status-error-text',\n      dotColor: 'bg-status-error-bg',\n    };\n  }\n  if (setupState === 'workflow_pending') {\n    return {\n      label: 'Pending',\n      bgColor: 'bg-status-warning-bg/10',\n      textColor: 'text-status-warning-text',\n      dotColor: 'bg-status-warning-bg',\n    };\n  }\n  return {\n    label: 'Completed',\n    bgColor: 'bg-status-success-bg/10',\n    textColor: 'text-status-success-text',\n    dotColor: 'bg-status-success-bg',\n  };\n}\n\n// ============================================================================\n// ICONS\n// ============================================================================\n\nconst WorkflowIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M13 10V3L4 14h7v7l9-11h-7z\" />\n  </svg>\n);\n\nconst RefreshIcon = ({ className, spinning }: { className?: string; spinning?: boolean }) => (\n  <svg\n    className={`${className} ${spinning ? 'animate-spin' : ''}`}\n    fill=\"none\"\n    stroke=\"currentColor\"\n    viewBox=\"0 0 24 24\"\n  >\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"\n    />\n  </svg>\n);\n\nconst ExternalLinkIcon = ({ 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=\"M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14\"\n    />\n  </svg>\n);\n\nconst AlertIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth={2}\n      d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n    />\n  </svg>\n);\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const WorkflowStatusPanel = memo(function WorkflowStatusPanel({\n  workflowId,\n  executionId,\n  lastRefreshedAt,\n  setupState,\n  status,\n  errorMetadata,\n  onRerunWorkflow,\n  onViewWorkflow,\n  disabled = false,\n  isRerunning = false,\n}: WorkflowStatusPanelProps) {\n  // Get status config\n  const statusConfig = useMemo(() => getStatusConfig(setupState, status), [setupState, status]);\n\n  const isRunning = status === 'refreshing' || setupState === 'workflow_running' || isRerunning;\n\n  const lastRefreshedText = lastRefreshedAt\n    ? formatDistanceToNow(new Date(lastRefreshedAt), { addSuffix: true })\n    : 'Never';\n\n  return (\n    <div className=\"border border-border-default rounded-lg bg-bg-surface overflow-hidden\">\n      {/* Header */}\n      <div className=\"px-4 py-3 border-b border-border-default bg-bg-sunken flex items-center justify-between\">\n        <div className=\"flex items-center gap-2\">\n          <WorkflowIcon className=\"w-4 h-4 text-text-secondary\" />\n          <h3 className=\"text-sm font-semibold text-text-primary\">FluidGrids Workflow</h3>\n        </div>\n        <div className={`flex items-center gap-1.5 px-2 py-0.5 rounded-full ${statusConfig.bgColor}`}>\n          <span className={`w-1.5 h-1.5 rounded-full ${statusConfig.dotColor} ${isRunning ? 'animate-pulse' : ''}`} />\n          <span className={`text-xs font-medium ${statusConfig.textColor}`}>{statusConfig.label}</span>\n        </div>\n      </div>\n\n      {/* Content */}\n      <div className=\"p-4 space-y-4\">\n        {/* Details grid */}\n        <div className=\"grid grid-cols-2 gap-4 text-sm\">\n          <div>\n            <p className=\"text-text-secondary text-xs mb-1\">Workflow ID</p>\n            <p className=\"text-text-primary font-mono text-xs truncate\" title={workflowId}>\n              {workflowId || 'Not linked'}\n            </p>\n          </div>\n          <div>\n            <p className=\"text-text-secondary text-xs mb-1\">Last Execution</p>\n            <p className=\"text-text-primary text-xs\">{lastRefreshedText}</p>\n          </div>\n          {executionId && (\n            <div className=\"col-span-2\">\n              <p className=\"text-text-secondary text-xs mb-1\">Execution ID</p>\n              <p className=\"text-text-primary font-mono text-xs truncate\" title={executionId}>\n                {executionId}\n              </p>\n            </div>\n          )}\n        </div>\n\n        {/* Error display */}\n        {status === 'error' && errorMetadata && (\n          <div className=\"flex items-start gap-2 p-3 bg-status-error-bg/10 rounded-md\">\n            <AlertIcon className=\"w-4 h-4 text-status-error-text flex-shrink-0 mt-0.5\" />\n            <div className=\"min-w-0\">\n              {errorMetadata.code && <p className=\"text-xs font-medium text-status-error-text\">{errorMetadata.code}</p>}\n              <p className=\"text-xs text-status-error-text/80 mt-0.5\">\n                {errorMetadata.message || 'An error occurred during workflow execution'}\n              </p>\n            </div>\n          </div>\n        )}\n\n        {/* Actions */}\n        <div className=\"flex items-center gap-2 pt-2 border-t border-border-muted\">\n          {onRerunWorkflow && (\n            <button\n              type=\"button\"\n              onClick={onRerunWorkflow}\n              disabled={disabled || isRunning}\n              className={`\n                flex items-center gap-1.5\n                px-3 py-1.5\n                text-xs font-medium\n                bg-action-primary-bg\n                text-action-primary-fg\n                rounded-md\n                hover:bg-action-primary-bgHover\n                disabled:opacity-50\n                disabled:cursor-not-allowed\n                transition-colors\n              `}\n            >\n              <RefreshIcon className=\"w-3.5 h-3.5\" spinning={isRunning} />\n              {isRunning ? 'Running...' : 'Re-run Workflow'}\n            </button>\n          )}\n          {onViewWorkflow && (\n            <button\n              type=\"button\"\n              onClick={onViewWorkflow}\n              className={`\n                flex items-center gap-1.5\n                px-3 py-1.5\n                text-xs font-medium\n                text-text-secondary\n                rounded-md\n                hover:bg-bg-sunken\n                transition-colors\n              `}\n            >\n              <ExternalLinkIcon className=\"w-3.5 h-3.5\" />\n              View in FluidGrids\n            </button>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport default WorkflowStatusPanel;\n"],"mappings":"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"}

package/dist/bigconsole/components/parser/DataSinkSelector.js

@@ -59,7 +59,7 @@ var u = ({ className: e }) => /* @__PURE__ */ s("svg", {
           flex items-center justify-between gap-2
           transition-colors
           ${m ? "opacity-50 cursor-not-allowed" : "hover:border-action-primary-bg cursor-pointer"}
-          ${h ? "border-state-error" : "border-border-default"}
+          ${h ? "border-status-error-border" : "border-border-default"}
           ${_ ? "border-action-primary-bg ring-2 ring-action-primary-bg/20" : ""}
         `,
 				children: [/* @__PURE__ */ s("div", {
@@ -81,7 +81,7 @@ var u = ({ className: e }) => /* @__PURE__ */ s("svg", {
 				}), /* @__PURE__ */ s(u, { className: `w-4 h-4 text-text-secondary transition-transform ${_ ? "transform rotate-180" : ""}` })]
 			}),
 			h && g && /* @__PURE__ */ s("p", {
-				className: "mt-1 text-xs text-state-error",
+				className: "mt-1 text-xs text-status-error-text",
 				children: g
 			}),
 			_ && /* @__PURE__ */ c(n, { children: [/* @__PURE__ */ s("div", {

package/dist/bigconsole/components/parser/DataSinkSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataSinkSelector.js","names":[],"sources":["../../../../src/bigconsole/components/parser/DataSinkSelector.tsx"],"sourcesContent":["/**\n * DataSink Selector\n *\n * Dropdown component for selecting a DataSink as a parser's input source.\n */\n\nimport { memo, useState, useMemo, useCallback, Fragment } from 'react';\nimport { useDataSinkOperations } from '../../hooks/useDataSinkOperations';\nimport { DataSinkStatusBadge } from '../datasink/DataSinkStatusBadge';\nimport type { DataSinkStatus } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface DataSinkSelectorProps {\n  /** Currently selected DataSink key */\n  value: string | null;\n  /** Callback when selection changes */\n  onChange: (key: string | null) => void;\n  /** Filter by status */\n  filterStatus?: DataSinkStatus;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Whether the selector is disabled */\n  disabled?: boolean;\n  /** Whether to show error state */\n  error?: boolean;\n  /** Error message to display */\n  errorMessage?: string;\n}\n\n// ============================================================================\n// HELPERS\n// ============================================================================\n\n/**\n * Format relative time from date string\n */\nfunction formatRelativeTime(dateString: string | null | undefined): string {\n  if (!dateString) return 'Never';\n\n  const date = new Date(dateString);\n  const diff = Date.now() - date.getTime();\n  const minutes = Math.floor(diff / 60000);\n\n  if (minutes < 1) return 'Just now';\n  if (minutes < 60) return `${minutes}m ago`;\n\n  const hours = Math.floor(minutes / 60);\n  if (hours < 24) return `${hours}h ago`;\n\n  const days = Math.floor(hours / 24);\n  if (days < 7) return `${days}d ago`;\n\n  return date.toLocaleDateString();\n}\n\n// ============================================================================\n// ICONS\n// ============================================================================\n\nconst ChevronDownIcon = ({ 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\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const DataSinkSelector = memo(function DataSinkSelector({\n  value,\n  onChange,\n  filterStatus,\n  placeholder = 'Select a data source...',\n  disabled = false,\n  error = false,\n  errorMessage,\n}: DataSinkSelectorProps) {\n  const [isOpen, setIsOpen] = useState(false);\n  const [searchQuery, setSearchQuery] = useState('');\n\n  const { dataSinks, loading } = useDataSinkOperations({ skipFetch: false });\n\n  // Filter data sinks\n  const filteredDataSinks = useMemo(\n    () =>\n      dataSinks.filter((ds) => {\n        // Filter by status if specified\n        if (filterStatus && ds.status !== filterStatus) return false;\n\n        // Filter by search query\n        if (searchQuery) {\n          const query = searchQuery.toLowerCase();\n          return (\n            (ds.name || ds.key).toLowerCase().includes(query) ||\n            ds.key.toLowerCase().includes(query) ||\n            ds.description?.toLowerCase().includes(query)\n          );\n        }\n\n        return true;\n      }),\n    [dataSinks, filterStatus, searchQuery]\n  );\n\n  // Find selected DataSink\n  const selectedDataSink = useMemo(() => dataSinks.find((ds) => ds.key === value), [dataSinks, value]);\n\n  // Handle selection\n  const handleSelect = useCallback(\n    (key: string | null) => {\n      onChange(key);\n      setIsOpen(false);\n      setSearchQuery('');\n    },\n    [onChange]\n  );\n\n  // Toggle dropdown\n  const handleToggle = useCallback(() => {\n    if (!disabled) {\n      setIsOpen((prev) => !prev);\n    }\n  }, [disabled]);\n\n  // Close dropdown\n  const handleClose = useCallback(() => {\n    setIsOpen(false);\n  }, []);\n\n  return (\n    <div className=\"relative\">\n      {/* Trigger button */}\n      <button\n        type=\"button\"\n        onClick={handleToggle}\n        disabled={disabled}\n        className={`\n          w-full\n          px-3 py-2\n          bg-bg-surface\n          border rounded-md\n          text-left\n          flex items-center justify-between gap-2\n          transition-colors\n          ${disabled ? 'opacity-50 cursor-not-allowed' : 'hover:border-action-primary-bg cursor-pointer'}\n          ${error ? 'border-state-error' : 'border-border-default'}\n          ${isOpen ? 'border-action-primary-bg ring-2 ring-action-primary-bg/20' : ''}\n        `}\n      >\n        <div className=\"flex-1 min-w-0\">\n          {selectedDataSink ? (\n            <div className=\"flex items-center gap-2\">\n              <DataSinkStatusBadge status={selectedDataSink.status} size=\"sm\" showIcon={false} />\n              <span className=\"text-sm text-text-primary truncate\">\n                {selectedDataSink.name || selectedDataSink.key}\n              </span>\n            </div>\n          ) : (\n            <span className=\"text-sm text-text-tertiary\">{placeholder}</span>\n          )}\n        </div>\n\n        <ChevronDownIcon\n          className={`w-4 h-4 text-text-secondary transition-transform ${isOpen ? 'transform rotate-180' : ''}`}\n        />\n      </button>\n\n      {/* Error message */}\n      {error && errorMessage && <p className=\"mt-1 text-xs text-state-error\">{errorMessage}</p>}\n\n      {/* Dropdown */}\n      {isOpen && (\n        <Fragment>\n          {/* Backdrop */}\n          <div className=\"fixed inset-0 z-10\" onClick={handleClose} />\n\n          {/* Dropdown content */}\n          <div className=\"absolute left-0 right-0 top-full mt-1 z-20 bg-bg-surface border border-border-default rounded-md shadow-lg max-h-80 flex flex-col overflow-hidden\">\n            {/* Search input */}\n            <div className=\"p-2 border-b border-border-default\">\n              <input\n                type=\"text\"\n                placeholder=\"Search data sources...\"\n                value={searchQuery}\n                onChange={(e) => setSearchQuery(e.target.value)}\n                className={`\n                  w-full px-3 py-2\n                  bg-bg-sunken\n                  border border-border-default\n                  rounded-md\n                  text-sm text-text-primary\n                  placeholder-text-tertiary\n                  focus:outline-none\n                  focus:border-action-primary-bg\n                  focus:ring-2\n                  focus:ring-action-primary-bg/20\n                `}\n              />\n            </div>\n\n            {/* Options list */}\n            <div className=\"overflow-y-auto flex-1\">\n              {loading ? (\n                <div className=\"p-4 text-center text-sm text-text-secondary\">Loading data sources...</div>\n              ) : filteredDataSinks.length === 0 ? (\n                <div className=\"p-4 text-center text-sm text-text-secondary\">\n                  {searchQuery ? 'No matching data sources found' : 'No data sources available'}\n                </div>\n              ) : (\n                <Fragment>\n                  {/* None option */}\n                  <button\n                    type=\"button\"\n                    onClick={() => handleSelect(null)}\n                    className={`\n                      w-full px-3 py-2\n                      text-left text-sm\n                      hover:bg-bg-sunken\n                      transition-colors\n                      ${value === null ? 'bg-action-primary-bg/10 text-action-primary-bg' : 'text-text-secondary'}\n                    `}\n                  >\n                    <span className=\"italic\">None</span>\n                  </button>\n\n                  {/* DataSink options */}\n                  {filteredDataSinks.map((ds) => (\n                    <button\n                      key={ds.id}\n                      type=\"button\"\n                      onClick={() => handleSelect(ds.key)}\n                      className={`\n                        w-full px-3 py-2.5\n                        text-left\n                        hover:bg-bg-sunken\n                        transition-colors\n                        border-b border-border-default last:border-b-0\n                        ${value === ds.key ? 'bg-action-primary-bg/10' : ''}\n                      `}\n                    >\n                      <div className=\"flex items-start justify-between gap-2\">\n                        <div className=\"flex-1 min-w-0\">\n                          {/* Name and status */}\n                          <div className=\"flex items-center gap-2 mb-1\">\n                            <DataSinkStatusBadge status={ds.status} size=\"sm\" showIcon={false} />\n                            <span className=\"text-sm font-medium text-text-primary truncate\">{ds.name || ds.key}</span>\n                          </div>\n\n                          {/* Description */}\n                          {ds.description && (\n                            <p className=\"text-xs text-text-secondary line-clamp-1 mb-1\">{ds.description}</p>\n                          )}\n\n                          {/* Metadata */}\n                          <div className=\"flex items-center gap-2 text-xs text-text-tertiary\">\n                            <span>key: {ds.key}</span>\n                            <span>•</span>\n                            <span>Refreshed: {formatRelativeTime(ds.lastRefreshedAt)}</span>\n                          </div>\n                        </div>\n                      </div>\n                    </button>\n                  ))}\n                </Fragment>\n              )}\n            </div>\n          </div>\n        </Fragment>\n      )}\n    </div>\n  );\n});\n\nexport default DataSinkSelector;\n"],"mappings":";;;;;AAuCA,SAAS,EAAmB,GAA+C;AACzE,KAAI,CAAC,EAAY,QAAO;CAExB,IAAM,IAAO,IAAI,KAAK,EAAW,EAC3B,IAAO,KAAK,KAAK,GAAG,EAAK,SAAS,EAClC,IAAU,KAAK,MAAM,IAAO,IAAM;AAExC,KAAI,IAAU,EAAG,QAAO;AACxB,KAAI,IAAU,GAAI,QAAO,GAAG,EAAQ;CAEpC,IAAM,IAAQ,KAAK,MAAM,IAAU,GAAG;AACtC,KAAI,IAAQ,GAAI,QAAO,GAAG,EAAM;CAEhC,IAAM,IAAO,KAAK,MAAM,IAAQ,GAAG;AAGnC,QAFI,IAAO,IAAU,GAAG,EAAK,SAEtB,EAAK,oBAAoB;;AAOlC,IAAM,KAAmB,EAAE,mBACzB,kBAAC,OAAD;CAAgB;CAAW,MAAK;CAAO,QAAO;CAAe,SAAQ;WACnE,kBAAC,QAAD;EAAM,eAAc;EAAQ,gBAAe;EAAQ,aAAa;EAAG,GAAE;EAAmB,CAAA;CACpF,CAAA,EAOK,IAAmB,EAAK,SAA0B,EAC7D,UACA,aACA,iBACA,iBAAc,2BACd,cAAW,IACX,WAAQ,IACR,mBACwB;CACxB,IAAM,CAAC,GAAQ,KAAa,EAAS,GAAM,EACrC,CAAC,GAAa,KAAkB,EAAS,GAAG,EAE5C,EAAE,cAAW,eAAY,EAAsB,EAAE,WAAW,IAAO,CAAC,EAGpE,IAAoB,QAEtB,EAAU,QAAQ,MAAO;AAEvB,MAAI,KAAgB,EAAG,WAAW,EAAc,QAAO;AAGvD,MAAI,GAAa;GACf,IAAM,IAAQ,EAAY,aAAa;AACvC,WACG,EAAG,QAAQ,EAAG,KAAK,aAAa,CAAC,SAAS,EAAM,IACjD,EAAG,IAAI,aAAa,CAAC,SAAS,EAAM,IACpC,EAAG,aAAa,aAAa,CAAC,SAAS,EAAM;;AAIjD,SAAO;GACP,EACJ;EAAC;EAAW;EAAc;EAAY,CACvC,EAGK,IAAmB,QAAc,EAAU,MAAM,MAAO,EAAG,QAAQ,EAAM,EAAE,CAAC,GAAW,EAAM,CAAC,EAG9F,IAAe,GAClB,MAAuB;AAGtB,EAFA,EAAS,EAAI,EACb,EAAU,GAAM,EAChB,EAAe,GAAG;IAEpB,CAAC,EAAS,CACX,EAGK,IAAe,QAAkB;AACrC,EAAK,KACH,GAAW,MAAS,CAAC,EAAK;IAE3B,CAAC,EAAS,CAAC,EAGR,IAAc,QAAkB;AACpC,IAAU,GAAM;IACf,EAAE,CAAC;AAEN,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GAEE,kBAAC,UAAD;IACE,MAAK;IACL,SAAS;IACC;IACV,WAAW;;;;;;;;YAQP,IAAW,kCAAkC,gDAAgD;YAC7F,IAAQ,uBAAuB,wBAAwB;YACvD,IAAS,8DAA8D,GAAG;;cAdhF,CAiBE,kBAAC,OAAD;KAAK,WAAU;eACZ,IACC,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,GAAD;OAAqB,QAAQ,EAAiB;OAAQ,MAAK;OAAK,UAAU;OAAS,CAAA,EACnF,kBAAC,QAAD;OAAM,WAAU;iBACb,EAAiB,QAAQ,EAAiB;OACtC,CAAA,CACH;UAEN,kBAAC,QAAD;MAAM,WAAU;gBAA8B;MAAmB,CAAA;KAE/D,CAAA,EAEN,kBAAC,GAAD,EACE,WAAW,oDAAoD,IAAS,yBAAyB,MACjG,CAAA,CACK;;GAGR,KAAS,KAAgB,kBAAC,KAAD;IAAG,WAAU;cAAiC;IAAiB,CAAA;GAGxF,KACC,kBAAC,GAAD,EAAA,UAAA,CAEE,kBAAC,OAAD;IAAK,WAAU;IAAqB,SAAS;IAAe,CAAA,EAG5D,kBAAC,OAAD;IAAK,WAAU;cAAf,CAEE,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,SAAD;MACE,MAAK;MACL,aAAY;MACZ,OAAO;MACP,WAAW,MAAM,EAAe,EAAE,OAAO,MAAM;MAC/C,WAAW;MAYX,CAAA;KACE,CAAA,EAGN,kBAAC,OAAD;KAAK,WAAU;eACZ,IACC,kBAAC,OAAD;MAAK,WAAU;gBAA8C;MAA6B,CAAA,GACxF,EAAkB,WAAW,IAC/B,kBAAC,OAAD;MAAK,WAAU;gBACZ,IAAc,mCAAmC;MAC9C,CAAA,GAEN,kBAAC,GAAD,EAAA,UAAA,CAEE,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAa,KAAK;MACjC,WAAW;;;;;wBAKP,MAAU,OAAO,mDAAmD,sBAAsB;;gBAG9F,kBAAC,QAAD;OAAM,WAAU;iBAAS;OAAW,CAAA;MAC7B,CAAA,EAGR,EAAkB,KAAK,MACtB,kBAAC,UAAD;MAEE,MAAK;MACL,eAAe,EAAa,EAAG,IAAI;MACnC,WAAW;;;;;;0BAMP,MAAU,EAAG,MAAM,4BAA4B,GAAG;;gBAGtD,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,OAAD;QAAK,WAAU;kBAAf;SAEE,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,GAAD;WAAqB,QAAQ,EAAG;WAAQ,MAAK;WAAK,UAAU;WAAS,CAAA,EACrE,kBAAC,QAAD;WAAM,WAAU;qBAAkD,EAAG,QAAQ,EAAG;WAAW,CAAA,CACvF;;SAGL,EAAG,eACF,kBAAC,KAAD;UAAG,WAAU;oBAAiD,EAAG;UAAgB,CAAA;SAInF,kBAAC,OAAD;UAAK,WAAU;oBAAf;WACE,kBAAC,QAAD,EAAA,UAAA,CAAM,SAAM,EAAG,IAAW,EAAA,CAAA;WAC1B,kBAAC,QAAD,EAAA,UAAM,KAAQ,CAAA;WACd,kBAAC,QAAD,EAAA,UAAA,CAAM,eAAY,EAAmB,EAAG,gBAAgB,CAAQ,EAAA,CAAA;WAC5D;;SACF;;OACF,CAAA;MACC,EAjCF,EAAG,GAiCD,CACT,CACO,EAAA,CAAA;KAET,CAAA,CACF;MACG,EAAA,CAAA;GAET;;EAER"}
+{"version":3,"file":"DataSinkSelector.js","names":[],"sources":["../../../../src/bigconsole/components/parser/DataSinkSelector.tsx"],"sourcesContent":["/**\n * DataSink Selector\n *\n * Dropdown component for selecting a DataSink as a parser's input source.\n */\n\nimport { memo, useState, useMemo, useCallback, Fragment } from 'react';\nimport { useDataSinkOperations } from '../../hooks/useDataSinkOperations';\nimport { DataSinkStatusBadge } from '../datasink/DataSinkStatusBadge';\nimport type { DataSinkStatus } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface DataSinkSelectorProps {\n  /** Currently selected DataSink key */\n  value: string | null;\n  /** Callback when selection changes */\n  onChange: (key: string | null) => void;\n  /** Filter by status */\n  filterStatus?: DataSinkStatus;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Whether the selector is disabled */\n  disabled?: boolean;\n  /** Whether to show error state */\n  error?: boolean;\n  /** Error message to display */\n  errorMessage?: string;\n}\n\n// ============================================================================\n// HELPERS\n// ============================================================================\n\n/**\n * Format relative time from date string\n */\nfunction formatRelativeTime(dateString: string | null | undefined): string {\n  if (!dateString) return 'Never';\n\n  const date = new Date(dateString);\n  const diff = Date.now() - date.getTime();\n  const minutes = Math.floor(diff / 60000);\n\n  if (minutes < 1) return 'Just now';\n  if (minutes < 60) return `${minutes}m ago`;\n\n  const hours = Math.floor(minutes / 60);\n  if (hours < 24) return `${hours}h ago`;\n\n  const days = Math.floor(hours / 24);\n  if (days < 7) return `${days}d ago`;\n\n  return date.toLocaleDateString();\n}\n\n// ============================================================================\n// ICONS\n// ============================================================================\n\nconst ChevronDownIcon = ({ 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\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const DataSinkSelector = memo(function DataSinkSelector({\n  value,\n  onChange,\n  filterStatus,\n  placeholder = 'Select a data source...',\n  disabled = false,\n  error = false,\n  errorMessage,\n}: DataSinkSelectorProps) {\n  const [isOpen, setIsOpen] = useState(false);\n  const [searchQuery, setSearchQuery] = useState('');\n\n  const { dataSinks, loading } = useDataSinkOperations({ skipFetch: false });\n\n  // Filter data sinks\n  const filteredDataSinks = useMemo(\n    () =>\n      dataSinks.filter((ds) => {\n        // Filter by status if specified\n        if (filterStatus && ds.status !== filterStatus) return false;\n\n        // Filter by search query\n        if (searchQuery) {\n          const query = searchQuery.toLowerCase();\n          return (\n            (ds.name || ds.key).toLowerCase().includes(query) ||\n            ds.key.toLowerCase().includes(query) ||\n            ds.description?.toLowerCase().includes(query)\n          );\n        }\n\n        return true;\n      }),\n    [dataSinks, filterStatus, searchQuery]\n  );\n\n  // Find selected DataSink\n  const selectedDataSink = useMemo(() => dataSinks.find((ds) => ds.key === value), [dataSinks, value]);\n\n  // Handle selection\n  const handleSelect = useCallback(\n    (key: string | null) => {\n      onChange(key);\n      setIsOpen(false);\n      setSearchQuery('');\n    },\n    [onChange]\n  );\n\n  // Toggle dropdown\n  const handleToggle = useCallback(() => {\n    if (!disabled) {\n      setIsOpen((prev) => !prev);\n    }\n  }, [disabled]);\n\n  // Close dropdown\n  const handleClose = useCallback(() => {\n    setIsOpen(false);\n  }, []);\n\n  return (\n    <div className=\"relative\">\n      {/* Trigger button */}\n      <button\n        type=\"button\"\n        onClick={handleToggle}\n        disabled={disabled}\n        className={`\n          w-full\n          px-3 py-2\n          bg-bg-surface\n          border rounded-md\n          text-left\n          flex items-center justify-between gap-2\n          transition-colors\n          ${disabled ? 'opacity-50 cursor-not-allowed' : 'hover:border-action-primary-bg cursor-pointer'}\n          ${error ? 'border-status-error-border' : 'border-border-default'}\n          ${isOpen ? 'border-action-primary-bg ring-2 ring-action-primary-bg/20' : ''}\n        `}\n      >\n        <div className=\"flex-1 min-w-0\">\n          {selectedDataSink ? (\n            <div className=\"flex items-center gap-2\">\n              <DataSinkStatusBadge status={selectedDataSink.status} size=\"sm\" showIcon={false} />\n              <span className=\"text-sm text-text-primary truncate\">\n                {selectedDataSink.name || selectedDataSink.key}\n              </span>\n            </div>\n          ) : (\n            <span className=\"text-sm text-text-tertiary\">{placeholder}</span>\n          )}\n        </div>\n\n        <ChevronDownIcon\n          className={`w-4 h-4 text-text-secondary transition-transform ${isOpen ? 'transform rotate-180' : ''}`}\n        />\n      </button>\n\n      {/* Error message */}\n      {error && errorMessage && <p className=\"mt-1 text-xs text-status-error-text\">{errorMessage}</p>}\n\n      {/* Dropdown */}\n      {isOpen && (\n        <Fragment>\n          {/* Backdrop */}\n          <div className=\"fixed inset-0 z-10\" onClick={handleClose} />\n\n          {/* Dropdown content */}\n          <div className=\"absolute left-0 right-0 top-full mt-1 z-20 bg-bg-surface border border-border-default rounded-md shadow-lg max-h-80 flex flex-col overflow-hidden\">\n            {/* Search input */}\n            <div className=\"p-2 border-b border-border-default\">\n              <input\n                type=\"text\"\n                placeholder=\"Search data sources...\"\n                value={searchQuery}\n                onChange={(e) => setSearchQuery(e.target.value)}\n                className={`\n                  w-full px-3 py-2\n                  bg-bg-sunken\n                  border border-border-default\n                  rounded-md\n                  text-sm text-text-primary\n                  placeholder-text-tertiary\n                  focus:outline-none\n                  focus:border-action-primary-bg\n                  focus:ring-2\n                  focus:ring-action-primary-bg/20\n                `}\n              />\n            </div>\n\n            {/* Options list */}\n            <div className=\"overflow-y-auto flex-1\">\n              {loading ? (\n                <div className=\"p-4 text-center text-sm text-text-secondary\">Loading data sources...</div>\n              ) : filteredDataSinks.length === 0 ? (\n                <div className=\"p-4 text-center text-sm text-text-secondary\">\n                  {searchQuery ? 'No matching data sources found' : 'No data sources available'}\n                </div>\n              ) : (\n                <Fragment>\n                  {/* None option */}\n                  <button\n                    type=\"button\"\n                    onClick={() => handleSelect(null)}\n                    className={`\n                      w-full px-3 py-2\n                      text-left text-sm\n                      hover:bg-bg-sunken\n                      transition-colors\n                      ${value === null ? 'bg-action-primary-bg/10 text-action-primary-bg' : 'text-text-secondary'}\n                    `}\n                  >\n                    <span className=\"italic\">None</span>\n                  </button>\n\n                  {/* DataSink options */}\n                  {filteredDataSinks.map((ds) => (\n                    <button\n                      key={ds.id}\n                      type=\"button\"\n                      onClick={() => handleSelect(ds.key)}\n                      className={`\n                        w-full px-3 py-2.5\n                        text-left\n                        hover:bg-bg-sunken\n                        transition-colors\n                        border-b border-border-default last:border-b-0\n                        ${value === ds.key ? 'bg-action-primary-bg/10' : ''}\n                      `}\n                    >\n                      <div className=\"flex items-start justify-between gap-2\">\n                        <div className=\"flex-1 min-w-0\">\n                          {/* Name and status */}\n                          <div className=\"flex items-center gap-2 mb-1\">\n                            <DataSinkStatusBadge status={ds.status} size=\"sm\" showIcon={false} />\n                            <span className=\"text-sm font-medium text-text-primary truncate\">{ds.name || ds.key}</span>\n                          </div>\n\n                          {/* Description */}\n                          {ds.description && (\n                            <p className=\"text-xs text-text-secondary line-clamp-1 mb-1\">{ds.description}</p>\n                          )}\n\n                          {/* Metadata */}\n                          <div className=\"flex items-center gap-2 text-xs text-text-tertiary\">\n                            <span>key: {ds.key}</span>\n                            <span>•</span>\n                            <span>Refreshed: {formatRelativeTime(ds.lastRefreshedAt)}</span>\n                          </div>\n                        </div>\n                      </div>\n                    </button>\n                  ))}\n                </Fragment>\n              )}\n            </div>\n          </div>\n        </Fragment>\n      )}\n    </div>\n  );\n});\n\nexport default DataSinkSelector;\n"],"mappings":"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"}

package/dist/bigconsole/components/parser/ExpressionEditor.js

@@ -44,7 +44,7 @@ var o = e(function({ value: e, type: o, onChange: s, readOnly: c = !1, height: l
 			className: `
           border rounded-md overflow-hidden
           ${y ? "flex-1 min-h-0" : ""}
-          ${f ? "border-status-error-text" : "border-border-default"}
+          ${f ? "border-status-error-border" : "border-border-default"}
         `,
 			style: y ? { height: "100%" } : void 0,
 			children: /* @__PURE__ */ n(i, {

package/dist/bigconsole/components/parser/ExpressionEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpressionEditor.js","names":[],"sources":["../../../../src/bigconsole/components/parser/ExpressionEditor.tsx"],"sourcesContent":["/**\n * Expression Editor\n *\n * Monaco-based code editor for JQ/JSONata expressions.\n * Provides syntax highlighting, auto-completion, and error display.\n */\n\nimport { memo, useRef } from 'react';\nimport { Editor as MonacoEditor } from '@monaco-editor/react';\nimport type { ParserType } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface ExpressionEditorProps {\n  /** Current value */\n  value: string;\n  /** Parser type for syntax highlighting */\n  type?: ParserType;\n  /** Callback when value changes */\n  onChange?: (value: string) => void;\n  /** Whether editor is read-only */\n  readOnly?: boolean;\n  /** Editor height (CSS value) */\n  height?: string;\n  /** Show line numbers */\n  lineNumbers?: boolean;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Error message to display */\n  error?: string | null;\n  /** Override language (json, plaintext, etc.) */\n  language?: string;\n}\n\n// ============================================================================\n// HELPERS\n// ============================================================================\n\n/**\n * Get Monaco language for parser type\n */\nfunction getLanguageForParserType(type?: ParserType): string {\n  switch (type) {\n    case 'jq':\n      return 'plaintext'; // JQ doesn't have native Monaco support\n    case 'jsonata':\n      return 'javascript'; // JSONata is similar to JavaScript\n    default:\n      return 'plaintext';\n  }\n}\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const ExpressionEditor = memo(function ExpressionEditor({\n  value,\n  type,\n  onChange,\n  readOnly = false,\n  height = '300px',\n  lineNumbers = true,\n  placeholder,\n  error,\n  language,\n}: ExpressionEditorProps) {\n  const editorRef = useRef<unknown>(null);\n\n  // Configure Monaco theme before mount\n  const handleBeforeMount = (monaco: unknown) => {\n    const m = monaco as { editor: { defineTheme: (name: string, theme: unknown) => void } };\n    m.editor.defineTheme('bigconsole-dark', {\n      base: 'vs-dark',\n      inherit: true,\n      rules: [],\n      colors: {\n        'editorCursor.foreground': '#ffffff',\n        'editorCursor.background': '#000000',\n        'editor.background': '#1e1e1e',\n        'editor.lineHighlightBackground': '#2a2a2a',\n      },\n    });\n  };\n\n  // Handle editor mount\n  const handleMount = (editor: unknown) => {\n    editorRef.current = editor;\n    const ed = editor as {\n      setValue: (v: string) => void;\n      getModel: () => {\n        getLineCount: () => number;\n        getLineMaxColumn: (n: number) => number;\n      } | null;\n      setSelection: (s: {\n        startLineNumber: number;\n        startColumn: number;\n        endLineNumber: number;\n        endColumn: number;\n      }) => void;\n    };\n\n    // If no value but placeholder exists, set it\n    if (!value && placeholder) {\n      ed.setValue(placeholder);\n      onChange?.(placeholder);\n\n      // Select all text so user can easily replace\n      const model = ed.getModel();\n      if (model) {\n        ed.setSelection({\n          startLineNumber: 1,\n          startColumn: 1,\n          endLineNumber: model.getLineCount(),\n          endColumn: model.getLineMaxColumn(model.getLineCount()),\n        });\n      }\n    }\n  };\n\n  // Handle value change\n  const handleChange = (newValue: string | undefined) => {\n    if (onChange && newValue !== undefined) {\n      onChange(newValue);\n    }\n  };\n\n  const editorLanguage = language ?? getLanguageForParserType(type);\n  const isPercentHeight = height.includes('%');\n\n  return (\n    <div className={`relative ${isPercentHeight ? 'h-full flex flex-col' : ''}`}>\n      <div\n        className={`\n          border rounded-md overflow-hidden\n          ${isPercentHeight ? 'flex-1 min-h-0' : ''}\n          ${error ? 'border-status-error-text' : 'border-border-default'}\n        `}\n        style={isPercentHeight ? { height: '100%' } : undefined}\n      >\n        <MonacoEditor\n          height={isPercentHeight ? '100%' : height}\n          language={editorLanguage}\n          value={value}\n          onChange={handleChange}\n          beforeMount={handleBeforeMount}\n          onMount={handleMount}\n          options={{\n            readOnly,\n            minimap: { enabled: false },\n            lineNumbers: lineNumbers ? 'on' : 'off',\n            scrollBeyondLastLine: false,\n            fontSize: 13,\n            fontFamily: \"'JetBrains Mono', 'Fira Code', 'Courier New', monospace\",\n            wordWrap: 'on',\n            automaticLayout: true,\n            padding: { top: 16, bottom: 12 },\n            lineDecorationsWidth: 8,\n            lineNumbersMinChars: 3,\n            glyphMargin: false,\n            folding: true,\n            renderLineHighlight: 'line',\n            selectOnLineNumbers: true,\n            roundedSelection: false,\n            cursorStyle: 'line',\n            cursorWidth: 2,\n            cursorBlinking: 'smooth',\n            smoothScrolling: true,\n            contextmenu: true,\n            mouseWheelZoom: false,\n            quickSuggestions: !readOnly,\n            suggestOnTriggerCharacters: !readOnly,\n            acceptSuggestionOnEnter: 'on',\n            tabCompletion: 'on',\n            wordBasedSuggestions: 'matchingDocuments',\n            parameterHints: { enabled: !readOnly },\n            suggest: {\n              showKeywords: true,\n              showSnippets: true,\n            },\n          }}\n          theme=\"bigconsole-dark\"\n        />\n      </div>\n\n      {error && (\n        <div className=\"mt-2 flex items-start gap-2\">\n          <svg\n            className=\"w-4 h-4 text-status-error-text flex-shrink-0 mt-0.5\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\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          <p className=\"text-xs text-status-error-text\">{error}</p>\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default ExpressionEditor;\n"],"mappings":";;;;AA2CA,SAAS,EAAyB,GAA2B;AAC3D,SAAQ,GAAR;EACE,KAAK,KACH,QAAO;EACT,KAAK,UACH,QAAO;EACT,QACE,QAAO;;;AAQb,IAAa,IAAmB,EAAK,SAA0B,EAC7D,UACA,SACA,aACA,cAAW,IACX,YAAS,SACT,iBAAc,IACd,gBACA,UACA,eACwB;CACxB,IAAM,IAAY,EAAgB,KAAK,EAGjC,KAAqB,MAAoB;AACnC,IACR,OAAO,YAAY,mBAAmB;GACtC,MAAM;GACN,SAAS;GACT,OAAO,EAAE;GACT,QAAQ;IACN,2BAA2B;IAC3B,2BAA2B;IAC3B,qBAAqB;IACrB,kCAAkC;IACnC;GACF,CAAC;IAIE,KAAe,MAAoB;AACvC,IAAU,UAAU;EACpB,IAAM,IAAK;AAeX,MAAI,CAAC,KAAS,GAAa;AAEzB,GADA,EAAG,SAAS,EAAY,EACxB,IAAW,EAAY;GAGvB,IAAM,IAAQ,EAAG,UAAU;AAC3B,GAAI,KACF,EAAG,aAAa;IACd,iBAAiB;IACjB,aAAa;IACb,eAAe,EAAM,cAAc;IACnC,WAAW,EAAM,iBAAiB,EAAM,cAAc,CAAC;IACxD,CAAC;;IAMF,KAAgB,MAAiC;AACrD,EAAI,KAAY,MAAa,KAAA,KAC3B,EAAS,EAAS;IAIhB,IAAiB,KAAY,EAAyB,EAAK,EAC3D,IAAkB,EAAO,SAAS,IAAI;AAE5C,QACE,kBAAC,OAAD;EAAK,WAAW,YAAY,IAAkB,yBAAyB;YAAvE,CACE,kBAAC,OAAD;GACE,WAAW;;YAEP,IAAkB,mBAAmB,GAAG;YACxC,IAAQ,6BAA6B,wBAAwB;;GAEjE,OAAO,IAAkB,EAAE,QAAQ,QAAQ,GAAG,KAAA;aAE9C,kBAAC,GAAD;IACE,QAAQ,IAAkB,SAAS;IACnC,UAAU;IACH;IACP,UAAU;IACV,aAAa;IACb,SAAS;IACT,SAAS;KACP;KACA,SAAS,EAAE,SAAS,IAAO;KAC3B,aAAa,IAAc,OAAO;KAClC,sBAAsB;KACtB,UAAU;KACV,YAAY;KACZ,UAAU;KACV,iBAAiB;KACjB,SAAS;MAAE,KAAK;MAAI,QAAQ;MAAI;KAChC,sBAAsB;KACtB,qBAAqB;KACrB,aAAa;KACb,SAAS;KACT,qBAAqB;KACrB,qBAAqB;KACrB,kBAAkB;KAClB,aAAa;KACb,aAAa;KACb,gBAAgB;KAChB,iBAAiB;KACjB,aAAa;KACb,gBAAgB;KAChB,kBAAkB,CAAC;KACnB,4BAA4B,CAAC;KAC7B,yBAAyB;KACzB,eAAe;KACf,sBAAsB;KACtB,gBAAgB,EAAE,SAAS,CAAC,GAAU;KACtC,SAAS;MACP,cAAc;MACd,cAAc;MACf;KACF;IACD,OAAM;IACN,CAAA;GACE,CAAA,EAEL,KACC,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IACE,WAAU;IACV,MAAK;IACL,QAAO;IACP,SAAQ;cAER,kBAAC,QAAD;KACE,eAAc;KACd,gBAAe;KACf,aAAa;KACb,GAAE;KACF,CAAA;IACE,CAAA,EACN,kBAAC,KAAD;IAAG,WAAU;cAAkC;IAAU,CAAA,CACrD;KAEJ;;EAER"}
+{"version":3,"file":"ExpressionEditor.js","names":[],"sources":["../../../../src/bigconsole/components/parser/ExpressionEditor.tsx"],"sourcesContent":["/**\n * Expression Editor\n *\n * Monaco-based code editor for JQ/JSONata expressions.\n * Provides syntax highlighting, auto-completion, and error display.\n */\n\nimport { memo, useRef } from 'react';\nimport { Editor as MonacoEditor } from '@monaco-editor/react';\nimport type { ParserType } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface ExpressionEditorProps {\n  /** Current value */\n  value: string;\n  /** Parser type for syntax highlighting */\n  type?: ParserType;\n  /** Callback when value changes */\n  onChange?: (value: string) => void;\n  /** Whether editor is read-only */\n  readOnly?: boolean;\n  /** Editor height (CSS value) */\n  height?: string;\n  /** Show line numbers */\n  lineNumbers?: boolean;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Error message to display */\n  error?: string | null;\n  /** Override language (json, plaintext, etc.) */\n  language?: string;\n}\n\n// ============================================================================\n// HELPERS\n// ============================================================================\n\n/**\n * Get Monaco language for parser type\n */\nfunction getLanguageForParserType(type?: ParserType): string {\n  switch (type) {\n    case 'jq':\n      return 'plaintext'; // JQ doesn't have native Monaco support\n    case 'jsonata':\n      return 'javascript'; // JSONata is similar to JavaScript\n    default:\n      return 'plaintext';\n  }\n}\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const ExpressionEditor = memo(function ExpressionEditor({\n  value,\n  type,\n  onChange,\n  readOnly = false,\n  height = '300px',\n  lineNumbers = true,\n  placeholder,\n  error,\n  language,\n}: ExpressionEditorProps) {\n  const editorRef = useRef<unknown>(null);\n\n  // Configure Monaco theme before mount\n  const handleBeforeMount = (monaco: unknown) => {\n    const m = monaco as { editor: { defineTheme: (name: string, theme: unknown) => void } };\n    m.editor.defineTheme('bigconsole-dark', {\n      base: 'vs-dark',\n      inherit: true,\n      rules: [],\n      colors: {\n        'editorCursor.foreground': '#ffffff',\n        'editorCursor.background': '#000000',\n        'editor.background': '#1e1e1e',\n        'editor.lineHighlightBackground': '#2a2a2a',\n      },\n    });\n  };\n\n  // Handle editor mount\n  const handleMount = (editor: unknown) => {\n    editorRef.current = editor;\n    const ed = editor as {\n      setValue: (v: string) => void;\n      getModel: () => {\n        getLineCount: () => number;\n        getLineMaxColumn: (n: number) => number;\n      } | null;\n      setSelection: (s: {\n        startLineNumber: number;\n        startColumn: number;\n        endLineNumber: number;\n        endColumn: number;\n      }) => void;\n    };\n\n    // If no value but placeholder exists, set it\n    if (!value && placeholder) {\n      ed.setValue(placeholder);\n      onChange?.(placeholder);\n\n      // Select all text so user can easily replace\n      const model = ed.getModel();\n      if (model) {\n        ed.setSelection({\n          startLineNumber: 1,\n          startColumn: 1,\n          endLineNumber: model.getLineCount(),\n          endColumn: model.getLineMaxColumn(model.getLineCount()),\n        });\n      }\n    }\n  };\n\n  // Handle value change\n  const handleChange = (newValue: string | undefined) => {\n    if (onChange && newValue !== undefined) {\n      onChange(newValue);\n    }\n  };\n\n  const editorLanguage = language ?? getLanguageForParserType(type);\n  const isPercentHeight = height.includes('%');\n\n  return (\n    <div className={`relative ${isPercentHeight ? 'h-full flex flex-col' : ''}`}>\n      <div\n        className={`\n          border rounded-md overflow-hidden\n          ${isPercentHeight ? 'flex-1 min-h-0' : ''}\n          ${error ? 'border-status-error-border' : 'border-border-default'}\n        `}\n        style={isPercentHeight ? { height: '100%' } : undefined}\n      >\n        <MonacoEditor\n          height={isPercentHeight ? '100%' : height}\n          language={editorLanguage}\n          value={value}\n          onChange={handleChange}\n          beforeMount={handleBeforeMount}\n          onMount={handleMount}\n          options={{\n            readOnly,\n            minimap: { enabled: false },\n            lineNumbers: lineNumbers ? 'on' : 'off',\n            scrollBeyondLastLine: false,\n            fontSize: 13,\n            fontFamily: \"'JetBrains Mono', 'Fira Code', 'Courier New', monospace\",\n            wordWrap: 'on',\n            automaticLayout: true,\n            padding: { top: 16, bottom: 12 },\n            lineDecorationsWidth: 8,\n            lineNumbersMinChars: 3,\n            glyphMargin: false,\n            folding: true,\n            renderLineHighlight: 'line',\n            selectOnLineNumbers: true,\n            roundedSelection: false,\n            cursorStyle: 'line',\n            cursorWidth: 2,\n            cursorBlinking: 'smooth',\n            smoothScrolling: true,\n            contextmenu: true,\n            mouseWheelZoom: false,\n            quickSuggestions: !readOnly,\n            suggestOnTriggerCharacters: !readOnly,\n            acceptSuggestionOnEnter: 'on',\n            tabCompletion: 'on',\n            wordBasedSuggestions: 'matchingDocuments',\n            parameterHints: { enabled: !readOnly },\n            suggest: {\n              showKeywords: true,\n              showSnippets: true,\n            },\n          }}\n          theme=\"bigconsole-dark\"\n        />\n      </div>\n\n      {error && (\n        <div className=\"mt-2 flex items-start gap-2\">\n          <svg\n            className=\"w-4 h-4 text-status-error-text flex-shrink-0 mt-0.5\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\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          <p className=\"text-xs text-status-error-text\">{error}</p>\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default ExpressionEditor;\n"],"mappings":";;;;AA2CA,SAAS,EAAyB,GAA2B;AAC3D,SAAQ,GAAR;EACE,KAAK,KACH,QAAO;EACT,KAAK,UACH,QAAO;EACT,QACE,QAAO;;;AAQb,IAAa,IAAmB,EAAK,SAA0B,EAC7D,UACA,SACA,aACA,cAAW,IACX,YAAS,SACT,iBAAc,IACd,gBACA,UACA,eACwB;CACxB,IAAM,IAAY,EAAgB,KAAK,EAGjC,KAAqB,MAAoB;AACnC,IACR,OAAO,YAAY,mBAAmB;GACtC,MAAM;GACN,SAAS;GACT,OAAO,EAAE;GACT,QAAQ;IACN,2BAA2B;IAC3B,2BAA2B;IAC3B,qBAAqB;IACrB,kCAAkC;IACnC;GACF,CAAC;IAIE,KAAe,MAAoB;AACvC,IAAU,UAAU;EACpB,IAAM,IAAK;AAeX,MAAI,CAAC,KAAS,GAAa;AAEzB,GADA,EAAG,SAAS,EAAY,EACxB,IAAW,EAAY;GAGvB,IAAM,IAAQ,EAAG,UAAU;AAC3B,GAAI,KACF,EAAG,aAAa;IACd,iBAAiB;IACjB,aAAa;IACb,eAAe,EAAM,cAAc;IACnC,WAAW,EAAM,iBAAiB,EAAM,cAAc,CAAC;IACxD,CAAC;;IAMF,KAAgB,MAAiC;AACrD,EAAI,KAAY,MAAa,KAAA,KAC3B,EAAS,EAAS;IAIhB,IAAiB,KAAY,EAAyB,EAAK,EAC3D,IAAkB,EAAO,SAAS,IAAI;AAE5C,QACE,kBAAC,OAAD;EAAK,WAAW,YAAY,IAAkB,yBAAyB;YAAvE,CACE,kBAAC,OAAD;GACE,WAAW;;YAEP,IAAkB,mBAAmB,GAAG;YACxC,IAAQ,+BAA+B,wBAAwB;;GAEnE,OAAO,IAAkB,EAAE,QAAQ,QAAQ,GAAG,KAAA;aAE9C,kBAAC,GAAD;IACE,QAAQ,IAAkB,SAAS;IACnC,UAAU;IACH;IACP,UAAU;IACV,aAAa;IACb,SAAS;IACT,SAAS;KACP;KACA,SAAS,EAAE,SAAS,IAAO;KAC3B,aAAa,IAAc,OAAO;KAClC,sBAAsB;KACtB,UAAU;KACV,YAAY;KACZ,UAAU;KACV,iBAAiB;KACjB,SAAS;MAAE,KAAK;MAAI,QAAQ;MAAI;KAChC,sBAAsB;KACtB,qBAAqB;KACrB,aAAa;KACb,SAAS;KACT,qBAAqB;KACrB,qBAAqB;KACrB,kBAAkB;KAClB,aAAa;KACb,aAAa;KACb,gBAAgB;KAChB,iBAAiB;KACjB,aAAa;KACb,gBAAgB;KAChB,kBAAkB,CAAC;KACnB,4BAA4B,CAAC;KAC7B,yBAAyB;KACzB,eAAe;KACf,sBAAsB;KACtB,gBAAgB,EAAE,SAAS,CAAC,GAAU;KACtC,SAAS;MACP,cAAc;MACd,cAAc;MACf;KACF;IACD,OAAM;IACN,CAAA;GACE,CAAA,EAEL,KACC,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IACE,WAAU;IACV,MAAK;IACL,QAAO;IACP,SAAQ;cAER,kBAAC,QAAD;KACE,eAAc;KACd,gBAAe;KACf,aAAa;KACb,GAAE;KACF,CAAA;IACE,CAAA,EACN,kBAAC,KAAD;IAAG,WAAU;cAAkC;IAAU,CAAA,CACrD;KAEJ;;EAER"}

package/dist/bigconsole/components/parser/ParserCard.js

@@ -210,7 +210,7 @@ var l = ({ className: e }) => /* @__PURE__ */ a("svg", {
 							S && /* @__PURE__ */ a("button", {
 								type: "button",
 								onClick: O,
-								className: "\n                  p-1 rounded-md\n                  text-text-secondary\n                  hover:text-state-error\n                  hover:bg-state-error/10\n                  transition-colors\n                ",
+								className: "\n                  p-1 rounded-md\n                  text-text-secondary\n                  hover:text-status-error-text\n                  hover:bg-status-error-bg/10\n                  transition-colors\n                ",
 								title: "Delete Parser",
 								children: /* @__PURE__ */ a(h, { className: "w-4 h-4" })
 							})

package/dist/bigconsole/components/parser/ParserCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"ParserCard.js","names":[],"sources":["../../../../src/bigconsole/components/parser/ParserCard.tsx"],"sourcesContent":["/**\n * Parser Card\n *\n * Card component displaying parser information with action buttons.\n */\n\nimport { memo, useCallback, useMemo } from 'react';\nimport { ParserStatusBadge } from './ParserStatusBadge';\nimport { ParserTypeBadge } from './ParserTypeBadge';\nimport type { Parser } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface ParserCardProps {\n  /** Parser to display */\n  parser: Parser;\n  /** Callback when card is clicked (view) */\n  onView?: (id: string) => void;\n  /** Callback to edit parser */\n  onEdit?: (id: string) => void;\n  /** Callback to test parser */\n  onTest?: (id: string) => void;\n  /** Callback to execute parser */\n  onExecute?: (id: string) => void;\n  /** Callback to export parser */\n  onExport?: (id: string) => void;\n  /** Callback to delete parser */\n  onDelete?: (id: string) => void;\n  /** Whether this card's delete action is in progress */\n  isDeleting?: boolean;\n}\n\n// ============================================================================\n// HELPERS\n// ============================================================================\n\n/**\n * Format date to locale string\n */\nfunction formatDate(dateString: string): string {\n  const date = new Date(dateString);\n  return new Intl.DateTimeFormat('en-US', {\n    month: 'short',\n    day: 'numeric',\n    year: 'numeric',\n    hour: 'numeric',\n    minute: '2-digit',\n  }).format(date);\n}\n\n/**\n * Format relative time from date string\n */\nfunction formatRelativeTime(dateString: string): string {\n  const date = new Date(dateString);\n  const diff = Date.now() - date.getTime();\n  const minutes = Math.floor(diff / 60000);\n\n  if (minutes < 1) return 'just now';\n  if (minutes < 60) return `${minutes}m ago`;\n\n  const hours = Math.floor(minutes / 60);\n  if (hours < 24) return `${hours}h ago`;\n\n  const days = Math.floor(hours / 24);\n  if (days < 7) return `${days}d ago`;\n\n  return formatDate(dateString);\n}\n\n// ============================================================================\n// ICONS\n// ============================================================================\n\nconst JqIcon = ({ 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={1.5}\n      d=\"M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\"\n    />\n  </svg>\n);\n\nconst JsonataIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4\" />\n  </svg>\n);\n\nconst DefaultIcon = ({ 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={1.5}\n      d=\"M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4\"\n    />\n  </svg>\n);\n\nconst TestIcon = ({ 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=\"M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"\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 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 ExportIcon = ({ 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=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\"\n    />\n  </svg>\n);\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const ParserCard = memo(function ParserCard({\n  parser,\n  onView,\n  onEdit,\n  onTest,\n  onExecute,\n  onExport,\n  onDelete,\n}: ParserCardProps) {\n  // Handle card click\n  const handleCardClick = useCallback(() => {\n    onView?.(parser.id);\n  }, [onView, parser.id]);\n\n  // Handle action button clicks (stop propagation)\n  const handleTest = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onTest?.(parser.id);\n    },\n    [onTest, parser.id]\n  );\n\n  const handleExecute = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onExecute?.(parser.id);\n    },\n    [onExecute, parser.id]\n  );\n\n  const handleEdit = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onEdit?.(parser.id);\n    },\n    [onEdit, parser.id]\n  );\n\n  const handleExport = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onExport?.(parser.id);\n    },\n    [onExport, parser.id]\n  );\n\n  const handleDelete = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onDelete?.(parser.id);\n    },\n    [onDelete, parser.id]\n  );\n\n  // Get type icon - memoized to avoid creating component during render\n  const typeIcon = useMemo(() => {\n    const iconClass = 'w-10 h-10 text-text-secondary/50';\n    switch (parser.type) {\n      case 'jq':\n        return <JqIcon className={iconClass} />;\n      case 'jsonata':\n        return <JsonataIcon className={iconClass} />;\n      default:\n        return <DefaultIcon className={iconClass} />;\n    }\n  }, [parser.type]);\n\n  return (\n    <div\n      onClick={handleCardClick}\n      className={`\n        bg-bg-surface\n        border border-border-default\n        rounded-lg\n        overflow-hidden\n        cursor-pointer\n        hover:border-action-primary-bg\n        transition-colors\n      `}\n    >\n      {/* Header with icon and badges */}\n      <div className=\"h-24 bg-bg-sunken flex items-center justify-center relative\">\n        {typeIcon}\n\n        {/* Type badge */}\n        <div className=\"absolute top-2 left-2\">\n          <ParserTypeBadge type={parser.type} size=\"sm\" />\n        </div>\n\n        {/* Status badge */}\n        <div className=\"absolute top-2 right-2\">\n          <ParserStatusBadge status={parser.status} size=\"sm\" />\n        </div>\n      </div>\n\n      {/* Content */}\n      <div className=\"p-4\">\n        {/* Title and actions */}\n        <div className=\"flex items-start justify-between mb-2\">\n          <div className=\"flex-1 min-w-0\">\n            <h3 className=\"text-sm font-semibold text-text-primary truncate\">{parser.name || 'Untitled Parser'}</h3>\n            <p className=\"text-xs text-text-secondary truncate mt-0.5\">\n              {parser.inputSinkKey} → {parser.outputKey}\n            </p>\n          </div>\n\n          {/* Action buttons */}\n          <div className=\"flex items-center gap-1 ml-2\">\n            {onTest && (\n              <button\n                type=\"button\"\n                onClick={handleTest}\n                className={`\n                  p-1 rounded-md\n                  text-text-secondary\n                  hover:text-text-primary\n                  hover:bg-bg-sunken\n                  transition-colors\n                `}\n                title=\"Test Parser\"\n              >\n                <TestIcon className=\"w-4 h-4\" />\n              </button>\n            )}\n\n            {onExecute && (\n              <button\n                type=\"button\"\n                onClick={handleExecute}\n                className={`\n                  p-1 rounded-md\n                  text-text-secondary\n                  hover:text-text-primary\n                  hover:bg-bg-sunken\n                  transition-colors\n                `}\n                title=\"Execute Parser\"\n              >\n                <PlayIcon className=\"w-4 h-4\" />\n              </button>\n            )}\n\n            {onEdit && (\n              <button\n                type=\"button\"\n                onClick={handleEdit}\n                className={`\n                  p-1 rounded-md\n                  text-text-secondary\n                  hover:text-text-primary\n                  hover:bg-bg-sunken\n                  transition-colors\n                `}\n                title=\"Edit Parser\"\n              >\n                <EditIcon className=\"w-4 h-4\" />\n              </button>\n            )}\n\n            {onExport && (\n              <button\n                type=\"button\"\n                onClick={handleExport}\n                className={`\n                  p-1 rounded-md\n                  text-text-secondary\n                  hover:text-text-primary\n                  hover:bg-bg-sunken\n                  transition-colors\n                `}\n                title=\"Export Parser\"\n              >\n                <ExportIcon className=\"w-4 h-4\" />\n              </button>\n            )}\n\n            {onDelete && (\n              <button\n                type=\"button\"\n                onClick={handleDelete}\n                className={`\n                  p-1 rounded-md\n                  text-text-secondary\n                  hover:text-state-error\n                  hover:bg-state-error/10\n                  transition-colors\n                `}\n                title=\"Delete Parser\"\n              >\n                <DeleteIcon className=\"w-4 h-4\" />\n              </button>\n            )}\n          </div>\n        </div>\n\n        {/* Description */}\n        {parser.description && <p className=\"text-xs text-text-secondary mb-3 line-clamp-2\">{parser.description}</p>}\n\n        {/* Footer with version and timestamps */}\n        <div className=\"flex items-center justify-between text-xs text-text-secondary\">\n          <div className=\"flex items-center gap-3\">\n            <span>v{parser.version}</span>\n            {parser.ttl && <span title={`Cache TTL: ${parser.ttl} seconds`}>TTL: {parser.ttl}s</span>}\n          </div>\n          <span title={`Last updated: ${formatDate(parser.updatedAt)}`}>{formatRelativeTime(parser.updatedAt)}</span>\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport default ParserCard;\n"],"mappings":"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"}
+{"version":3,"file":"ParserCard.js","names":[],"sources":["../../../../src/bigconsole/components/parser/ParserCard.tsx"],"sourcesContent":["/**\n * Parser Card\n *\n * Card component displaying parser information with action buttons.\n */\n\nimport { memo, useCallback, useMemo } from 'react';\nimport { ParserStatusBadge } from './ParserStatusBadge';\nimport { ParserTypeBadge } from './ParserTypeBadge';\nimport type { Parser } from '../../types';\n\n// ============================================================================\n// TYPES\n// ============================================================================\n\ninterface ParserCardProps {\n  /** Parser to display */\n  parser: Parser;\n  /** Callback when card is clicked (view) */\n  onView?: (id: string) => void;\n  /** Callback to edit parser */\n  onEdit?: (id: string) => void;\n  /** Callback to test parser */\n  onTest?: (id: string) => void;\n  /** Callback to execute parser */\n  onExecute?: (id: string) => void;\n  /** Callback to export parser */\n  onExport?: (id: string) => void;\n  /** Callback to delete parser */\n  onDelete?: (id: string) => void;\n  /** Whether this card's delete action is in progress */\n  isDeleting?: boolean;\n}\n\n// ============================================================================\n// HELPERS\n// ============================================================================\n\n/**\n * Format date to locale string\n */\nfunction formatDate(dateString: string): string {\n  const date = new Date(dateString);\n  return new Intl.DateTimeFormat('en-US', {\n    month: 'short',\n    day: 'numeric',\n    year: 'numeric',\n    hour: 'numeric',\n    minute: '2-digit',\n  }).format(date);\n}\n\n/**\n * Format relative time from date string\n */\nfunction formatRelativeTime(dateString: string): string {\n  const date = new Date(dateString);\n  const diff = Date.now() - date.getTime();\n  const minutes = Math.floor(diff / 60000);\n\n  if (minutes < 1) return 'just now';\n  if (minutes < 60) return `${minutes}m ago`;\n\n  const hours = Math.floor(minutes / 60);\n  if (hours < 24) return `${hours}h ago`;\n\n  const days = Math.floor(hours / 24);\n  if (days < 7) return `${days}d ago`;\n\n  return formatDate(dateString);\n}\n\n// ============================================================================\n// ICONS\n// ============================================================================\n\nconst JqIcon = ({ 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={1.5}\n      d=\"M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\"\n    />\n  </svg>\n);\n\nconst JsonataIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4\" />\n  </svg>\n);\n\nconst DefaultIcon = ({ 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={1.5}\n      d=\"M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4\"\n    />\n  </svg>\n);\n\nconst TestIcon = ({ 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=\"M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\"\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 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 ExportIcon = ({ 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=\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\"\n    />\n  </svg>\n);\n\n// ============================================================================\n// COMPONENT\n// ============================================================================\n\nexport const ParserCard = memo(function ParserCard({\n  parser,\n  onView,\n  onEdit,\n  onTest,\n  onExecute,\n  onExport,\n  onDelete,\n}: ParserCardProps) {\n  // Handle card click\n  const handleCardClick = useCallback(() => {\n    onView?.(parser.id);\n  }, [onView, parser.id]);\n\n  // Handle action button clicks (stop propagation)\n  const handleTest = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onTest?.(parser.id);\n    },\n    [onTest, parser.id]\n  );\n\n  const handleExecute = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onExecute?.(parser.id);\n    },\n    [onExecute, parser.id]\n  );\n\n  const handleEdit = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onEdit?.(parser.id);\n    },\n    [onEdit, parser.id]\n  );\n\n  const handleExport = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onExport?.(parser.id);\n    },\n    [onExport, parser.id]\n  );\n\n  const handleDelete = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      onDelete?.(parser.id);\n    },\n    [onDelete, parser.id]\n  );\n\n  // Get type icon - memoized to avoid creating component during render\n  const typeIcon = useMemo(() => {\n    const iconClass = 'w-10 h-10 text-text-secondary/50';\n    switch (parser.type) {\n      case 'jq':\n        return <JqIcon className={iconClass} />;\n      case 'jsonata':\n        return <JsonataIcon className={iconClass} />;\n      default:\n        return <DefaultIcon className={iconClass} />;\n    }\n  }, [parser.type]);\n\n  return (\n    <div\n      onClick={handleCardClick}\n      className={`\n        bg-bg-surface\n        border border-border-default\n        rounded-lg\n        overflow-hidden\n        cursor-pointer\n        hover:border-action-primary-bg\n        transition-colors\n      `}\n    >\n      {/* Header with icon and badges */}\n      <div className=\"h-24 bg-bg-sunken flex items-center justify-center relative\">\n        {typeIcon}\n\n        {/* Type badge */}\n        <div className=\"absolute top-2 left-2\">\n          <ParserTypeBadge type={parser.type} size=\"sm\" />\n        </div>\n\n        {/* Status badge */}\n        <div className=\"absolute top-2 right-2\">\n          <ParserStatusBadge status={parser.status} size=\"sm\" />\n        </div>\n      </div>\n\n      {/* Content */}\n      <div className=\"p-4\">\n        {/* Title and actions */}\n        <div className=\"flex items-start justify-between mb-2\">\n          <div className=\"flex-1 min-w-0\">\n            <h3 className=\"text-sm font-semibold text-text-primary truncate\">{parser.name || 'Untitled Parser'}</h3>\n            <p className=\"text-xs text-text-secondary truncate mt-0.5\">\n              {parser.inputSinkKey} → {parser.outputKey}\n            </p>\n          </div>\n\n          {/* Action buttons */}\n          <div className=\"flex items-center gap-1 ml-2\">\n            {onTest && (\n              <button\n                type=\"button\"\n                onClick={handleTest}\n                className={`\n                  p-1 rounded-md\n                  text-text-secondary\n                  hover:text-text-primary\n                  hover:bg-bg-sunken\n                  transition-colors\n                `}\n                title=\"Test Parser\"\n              >\n                <TestIcon className=\"w-4 h-4\" />\n              </button>\n            )}\n\n            {onExecute && (\n              <button\n                type=\"button\"\n                onClick={handleExecute}\n                className={`\n                  p-1 rounded-md\n                  text-text-secondary\n                  hover:text-text-primary\n                  hover:bg-bg-sunken\n                  transition-colors\n                `}\n                title=\"Execute Parser\"\n              >\n                <PlayIcon className=\"w-4 h-4\" />\n              </button>\n            )}\n\n            {onEdit && (\n              <button\n                type=\"button\"\n                onClick={handleEdit}\n                className={`\n                  p-1 rounded-md\n                  text-text-secondary\n                  hover:text-text-primary\n                  hover:bg-bg-sunken\n                  transition-colors\n                `}\n                title=\"Edit Parser\"\n              >\n                <EditIcon className=\"w-4 h-4\" />\n              </button>\n            )}\n\n            {onExport && (\n              <button\n                type=\"button\"\n                onClick={handleExport}\n                className={`\n                  p-1 rounded-md\n                  text-text-secondary\n                  hover:text-text-primary\n                  hover:bg-bg-sunken\n                  transition-colors\n                `}\n                title=\"Export Parser\"\n              >\n                <ExportIcon className=\"w-4 h-4\" />\n              </button>\n            )}\n\n            {onDelete && (\n              <button\n                type=\"button\"\n                onClick={handleDelete}\n                className={`\n                  p-1 rounded-md\n                  text-text-secondary\n                  hover:text-status-error-text\n                  hover:bg-status-error-bg/10\n                  transition-colors\n                `}\n                title=\"Delete Parser\"\n              >\n                <DeleteIcon className=\"w-4 h-4\" />\n              </button>\n            )}\n          </div>\n        </div>\n\n        {/* Description */}\n        {parser.description && <p className=\"text-xs text-text-secondary mb-3 line-clamp-2\">{parser.description}</p>}\n\n        {/* Footer with version and timestamps */}\n        <div className=\"flex items-center justify-between text-xs text-text-secondary\">\n          <div className=\"flex items-center gap-3\">\n            <span>v{parser.version}</span>\n            {parser.ttl && <span title={`Cache TTL: ${parser.ttl} seconds`}>TTL: {parser.ttl}s</span>}\n          </div>\n          <span title={`Last updated: ${formatDate(parser.updatedAt)}`}>{formatRelativeTime(parser.updatedAt)}</span>\n        </div>\n      </div>\n    </div>\n  );\n});\n\nexport default ParserCard;\n"],"mappings":"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"}

package/dist/bigconsole/components/parser/ParserSelector.js

@@ -166,7 +166,7 @@ var d = "default", f = ({ className: e }) => /* @__PURE__ */ l("svg", {
           flex items-center justify-between gap-2
           transition-colors
           ${y ? "opacity-50 cursor-not-allowed" : "hover:border-action-primary-bg cursor-pointer"}
-          ${b ? "border-state-error" : "border-border-default"}
+          ${b ? "border-status-error-border" : "border-border-default"}
           ${S ? "border-action-primary-bg ring-2 ring-action-primary-bg/20" : ""}
         `,
 				children: [/* @__PURE__ */ l("div", {
@@ -187,7 +187,7 @@ var d = "default", f = ({ className: e }) => /* @__PURE__ */ l("svg", {
 				}), /* @__PURE__ */ l(f, { className: `w-4 h-4 text-text-secondary transition-transform ${S ? "transform rotate-180" : ""}` })]
 			}),
 			b && x && /* @__PURE__ */ l("p", {
-				className: "mt-1 text-xs text-state-error",
+				className: "mt-1 text-xs text-status-error-text",
 				children: x
 			}),
 			S && /* @__PURE__ */ u(r, { children: [/* @__PURE__ */ l("div", {