@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.2

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, useMemo, useRef } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\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// COMPONENT\n// ============================================================================\n\nexport const RefreshTypeSelector = memo(function RefreshTypeSelector({\n  value,\n  onChange,\n  disabled = false,\n  error,\n}: RefreshTypeSelectorProps) {\n  const { t } = useI18n();\n\n  const SCHEDULE_PRESETS = useMemo<SchedulePreset[]>(\n    () => [\n      {\n        label: t('bigconsole.dataSinks.refreshType.presetEvery5MinutesLabel', 'Every 5 minutes'),\n        cron: '*/5 * * * *',\n        description: t('bigconsole.dataSinks.refreshType.presetEvery5MinutesDescription', 'High frequency updates'),\n      },\n      {\n        label: t('bigconsole.dataSinks.refreshType.presetEvery15MinutesLabel', 'Every 15 minutes'),\n        cron: '*/15 * * * *',\n        description: t('bigconsole.dataSinks.refreshType.presetEvery15MinutesDescription', 'Balanced frequency'),\n      },\n      {\n        label: t('bigconsole.dataSinks.refreshType.presetEveryHourLabel', 'Every hour'),\n        cron: '0 * * * *',\n        description: t('bigconsole.dataSinks.refreshType.presetEveryHourDescription', 'Hourly updates'),\n      },\n      {\n        label: t('bigconsole.dataSinks.refreshType.presetEveryDayLabel', 'Every day at midnight'),\n        cron: '0 0 * * *',\n        description: t('bigconsole.dataSinks.refreshType.presetEveryDayDescription', 'Daily updates'),\n      },\n    ],\n    [t]\n  );\n\n  const TIMEZONE_OPTIONS = useMemo<TimezoneOption[]>(\n    () => [\n      { value: 'UTC', label: t('bigconsole.dataSinks.refreshType.timezoneUtc', 'UTC') },\n      { value: 'America/New_York', label: t('bigconsole.dataSinks.refreshType.timezoneEastern', 'Eastern Time (US)') },\n      {\n        value: 'America/Los_Angeles',\n        label: t('bigconsole.dataSinks.refreshType.timezonePacific', 'Pacific Time (US)'),\n      },\n      { value: 'Europe/London', label: t('bigconsole.dataSinks.refreshType.timezoneLondon', 'London (UK)') },\n      { value: 'Europe/Paris', label: t('bigconsole.dataSinks.refreshType.timezoneParis', 'Paris (EU)') },\n      { value: 'Asia/Tokyo', label: t('bigconsole.dataSinks.refreshType.timezoneTokyo', 'Tokyo (Japan)') },\n      { value: 'Asia/Kolkata', label: t('bigconsole.dataSinks.refreshType.timezoneKolkata', 'India (IST)') },\n      { value: 'Australia/Sydney', label: t('bigconsole.dataSinks.refreshType.timezoneSydney', 'Sydney (Australia)') },\n    ],\n    [t]\n  );\n\n  // Find preset by cron expression\n  const findPresetByCron = useCallback(\n    (cron: string): SchedulePreset | null => SCHEDULE_PRESETS.find((preset) => preset.cron === cron) || null,\n    [SCHEDULE_PRESETS]\n  );\n\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, findPresetByCron]);\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, SCHEDULE_PRESETS]\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\">\n          {t('bigconsole.dataSinks.refreshType.heading', 'Refresh Type')}\n        </label>\n        <p className=\"text-xs text-text-secondary\">\n          {t('bigconsole.dataSinks.refreshType.headingDescription', 'When should this data be updated?')}\n        </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\">\n              {t('bigconsole.dataSinks.refreshType.manualLabel', 'Manual')}\n            </span>\n            <p className=\"text-xs text-text-secondary mt-0.5\">\n              {t(\n                'bigconsole.dataSinks.refreshType.manualDescription',\n                'Data refreshes only when you click the \"Refresh\" button'\n              )}\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\">\n                {t('bigconsole.dataSinks.refreshType.automaticLabel', 'Automatic')}\n              </span>\n              <p className=\"text-xs text-text-secondary mt-0.5\">\n                {t('bigconsole.dataSinks.refreshType.automaticDescription', 'Data refreshes on a schedule')}\n              </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\">\n                  {t('bigconsole.dataSinks.refreshType.scheduleLabel', 'Schedule')}\n                </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\n                    ? t('bigconsole.dataSinks.refreshType.usingCustomSchedule', 'Using custom schedule')\n                    : t('bigconsole.dataSinks.refreshType.useCustomSchedule', '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                      {t(\n                        'bigconsole.dataSinks.refreshType.customCronHelp',\n                        'Enter a cron expression (e.g., */15 * * * * for every 15 minutes)'\n                      )}\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\">\n                  {t('bigconsole.dataSinks.refreshType.timezoneLabel', 'Timezone')}\n                </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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"}
+{"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, useMemo, useRef } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { SECTION_FOCUS_RING } from '../common';\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// COMPONENT\n// ============================================================================\n\nexport const RefreshTypeSelector = memo(function RefreshTypeSelector({\n  value,\n  onChange,\n  disabled = false,\n  error,\n}: RefreshTypeSelectorProps) {\n  const { t } = useI18n();\n\n  const SCHEDULE_PRESETS = useMemo<SchedulePreset[]>(\n    () => [\n      {\n        label: t('bigconsole.dataSinks.refreshType.presetEvery5MinutesLabel', 'Every 5 minutes'),\n        cron: '*/5 * * * *',\n        description: t('bigconsole.dataSinks.refreshType.presetEvery5MinutesDescription', 'High frequency updates'),\n      },\n      {\n        label: t('bigconsole.dataSinks.refreshType.presetEvery15MinutesLabel', 'Every 15 minutes'),\n        cron: '*/15 * * * *',\n        description: t('bigconsole.dataSinks.refreshType.presetEvery15MinutesDescription', 'Balanced frequency'),\n      },\n      {\n        label: t('bigconsole.dataSinks.refreshType.presetEveryHourLabel', 'Every hour'),\n        cron: '0 * * * *',\n        description: t('bigconsole.dataSinks.refreshType.presetEveryHourDescription', 'Hourly updates'),\n      },\n      {\n        label: t('bigconsole.dataSinks.refreshType.presetEveryDayLabel', 'Every day at midnight'),\n        cron: '0 0 * * *',\n        description: t('bigconsole.dataSinks.refreshType.presetEveryDayDescription', 'Daily updates'),\n      },\n    ],\n    [t]\n  );\n\n  const TIMEZONE_OPTIONS = useMemo<TimezoneOption[]>(\n    () => [\n      { value: 'UTC', label: t('bigconsole.dataSinks.refreshType.timezoneUtc', 'UTC') },\n      { value: 'America/New_York', label: t('bigconsole.dataSinks.refreshType.timezoneEastern', 'Eastern Time (US)') },\n      {\n        value: 'America/Los_Angeles',\n        label: t('bigconsole.dataSinks.refreshType.timezonePacific', 'Pacific Time (US)'),\n      },\n      { value: 'Europe/London', label: t('bigconsole.dataSinks.refreshType.timezoneLondon', 'London (UK)') },\n      { value: 'Europe/Paris', label: t('bigconsole.dataSinks.refreshType.timezoneParis', 'Paris (EU)') },\n      { value: 'Asia/Tokyo', label: t('bigconsole.dataSinks.refreshType.timezoneTokyo', 'Tokyo (Japan)') },\n      { value: 'Asia/Kolkata', label: t('bigconsole.dataSinks.refreshType.timezoneKolkata', 'India (IST)') },\n      { value: 'Australia/Sydney', label: t('bigconsole.dataSinks.refreshType.timezoneSydney', 'Sydney (Australia)') },\n    ],\n    [t]\n  );\n\n  // Find preset by cron expression\n  const findPresetByCron = useCallback(\n    (cron: string): SchedulePreset | null => SCHEDULE_PRESETS.find((preset) => preset.cron === cron) || null,\n    [SCHEDULE_PRESETS]\n  );\n\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, findPresetByCron]);\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, SCHEDULE_PRESETS]\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\">\n          {t('bigconsole.dataSinks.refreshType.heading', 'Refresh Type')}\n        </label>\n        <p className=\"text-xs text-text-secondary\">\n          {t('bigconsole.dataSinks.refreshType.headingDescription', 'When should this data be updated?')}\n        </p>\n      </div>\n\n      {/* Options */}\n      <div className=\"space-y-list-gap\">\n        {/* Manual option */}\n        <label\n          className={`\n            flex cursor-pointer items-start gap-3\n            rounded-input\n            border p-4\n            motion-safe:transition-colors\n            ${disabled ? 'cursor-not-allowed opacity-50' : ''}\n            ${\n              refreshType === 'manual'\n                ? 'border-[var(--color-action-primary-bg)] bg-bg-accentSubtle'\n                : 'border-[var(--color-border-subtle)] hover:border-[var(--color-border-strong)]'\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              h-4 w-4\n              border-[var(--color-border-default)]\n              text-action-primary-bg\n              focus-visible:ring-2\n              focus-visible:ring-ring\n            `}\n          />\n          <div className=\"flex-1\">\n            <span className=\"text-sm font-medium text-text-primary\">\n              {t('bigconsole.dataSinks.refreshType.manualLabel', 'Manual')}\n            </span>\n            <p className=\"text-xs text-text-secondary mt-0.5\">\n              {t(\n                'bigconsole.dataSinks.refreshType.manualDescription',\n                'Data refreshes only when you click the \"Refresh\" button'\n              )}\n            </p>\n          </div>\n        </label>\n\n        {/* Scheduled option */}\n        <div\n          className={`\n            rounded-input border\n            motion-safe:transition-colors\n            ${disabled ? 'opacity-50' : ''}\n            ${\n              refreshType === 'scheduled'\n                ? 'border-[var(--color-action-primary-bg)] bg-bg-accentSubtle'\n                : 'border-[var(--color-border-subtle)]'\n            }\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                h-4 w-4\n                border-[var(--color-border-default)]\n                text-action-primary-bg\n                focus-visible:ring-2\n                focus-visible:ring-ring\n              `}\n            />\n            <div className=\"flex-1\">\n              <span className=\"text-sm font-medium text-text-primary\">\n                {t('bigconsole.dataSinks.refreshType.automaticLabel', 'Automatic')}\n              </span>\n              <p className=\"text-xs text-text-secondary mt-0.5\">\n                {t('bigconsole.dataSinks.refreshType.automaticDescription', 'Data refreshes on a schedule')}\n              </p>\n            </div>\n          </label>\n\n          {/* Schedule options (shown when scheduled is selected) */}\n          {refreshType === 'scheduled' && (\n            <div className=\"space-y-form-gap px-4 pb-4\">\n              {/* Schedule presets */}\n              <div className=\"border-t border-[var(--color-border-subtle)] pt-4\">\n                <label className=\"mb-2 block text-xs font-medium text-text-secondary\">\n                  {t('bigconsole.dataSinks.refreshType.scheduleLabel', 'Schedule')}\n                </label>\n                {/* Single column below `sm`: two \"Every day at midnight\"-length\n                    buttons never fit side by side inside a card at 390px. */}\n                <div className=\"grid grid-cols-1 gap-2 sm:grid-cols-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                        min-h-[var(--size-controlHeight-md)] rounded-input\n                        border\n                        px-3 py-2\n                        text-left\n                        motion-safe:transition-colors\n                        ${SECTION_FOCUS_RING}\n                        ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}\n                        ${\n                          !isCustomSchedule && selectedPreset?.cron === preset.cron\n                            ? 'border-[var(--color-action-primary-bg)] bg-bg-accentSubtle text-text-link'\n                            : 'border-[var(--color-border-subtle)] hover:border-[var(--color-border-strong)]'\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                    min-h-[var(--size-controlHeight-md)] rounded-button text-xs\n                    ${SECTION_FOCUS_RING}\n                    ${isCustomSchedule ? 'text-text-link' : 'text-text-secondary hover:text-text-primary'}\n                  `}\n                >\n                  {isCustomSchedule\n                    ? t('bigconsole.dataSinks.refreshType.usingCustomSchedule', 'Using custom schedule')\n                    : t('bigconsole.dataSinks.refreshType.useCustomSchedule', 'Use custom schedule...')}\n                </button>\n                {isCustomSchedule && (\n                  <div className=\"mt-2\">\n                    <input\n                      type=\"text\"\n                      aria-label=\"Custom cron expression\"\n                      value={customCron}\n                      onChange={handleCustomCronChange}\n                      disabled={disabled}\n                      placeholder=\"*/15 * * * *\"\n                      className={`\n                        h-control-md w-full min-w-0\n                        rounded-input\n                        border border-[var(--color-border-default)]\n                        bg-bg-sunken\n                        px-3\n                        font-mono\n                        text-sm text-text-primary\n                        focus-visible:outline-none\n                        focus-visible:ring-2\n                        focus-visible:ring-ring\n                      `}\n                    />\n                    <p className=\"mt-1 text-xs text-text-muted\">\n                      {t(\n                        'bigconsole.dataSinks.refreshType.customCronHelp',\n                        'Enter a cron expression (e.g., */15 * * * * for every 15 minutes)'\n                      )}\n                    </p>\n                  </div>\n                )}\n              </div>\n\n              {/* Timezone */}\n              <div>\n                <label htmlFor=\"refresh-timezone\" className=\"mb-2 block text-xs font-medium text-text-secondary\">\n                  {t('bigconsole.dataSinks.refreshType.timezoneLabel', 'Timezone')}\n                </label>\n                <select\n                  id=\"refresh-timezone\"\n                  value={timezone}\n                  onChange={handleTimezoneChange}\n                  disabled={disabled}\n                  className={`\n                    h-control-md w-full min-w-0\n                    rounded-input\n                    border border-[var(--color-border-default)]\n                    bg-bg-sunken\n                    px-3\n                    text-sm text-text-primary\n                    focus-visible:outline-none\n                    focus-visible:ring-2\n                    focus-visible:ring-ring\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

@@ -6,7 +6,7 @@ var r = {
 		label: "Workflow Pending",
 		shortLabel: "Draft",
 		bgColor: "bg-status-warning-bg/10",
-		textColor: "text-status-warning-text",
+		textColor: "text-[var(--color-status-warning-text)]",
 		icon: "pending"
 	},
 	workflow_running: {
@@ -20,14 +20,14 @@ var r = {
 		label: "Workflow Completed",
 		shortLabel: "Config Needed",
 		bgColor: "bg-status-warning-bg/10",
-		textColor: "text-status-warning-text",
+		textColor: "text-[var(--color-status-warning-text)]",
 		icon: "pending"
 	},
 	configuration_pending: {
 		label: "Configuration Pending",
 		shortLabel: "In Progress",
 		bgColor: "bg-status-warning-bg/10",
-		textColor: "text-status-warning-text",
+		textColor: "text-[var(--color-status-warning-text)]",
 		icon: "pending"
 	},
 	completed: {

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-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"}
+{"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-[var(--color-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-[var(--color-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-[var(--color-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

@@ -1,8 +1,11 @@
-import { memo as e, useMemo as t } from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { formatDistanceToNow as i } from "date-fns";
+import "../common/sectionStyles.js";
+import { Section as e } from "../common/Section.js";
+import "../common/index.js";
+import { memo as t, useMemo as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { formatDistanceToNow as a } from "date-fns";
 //#region src/bigconsole/components/datasink/WorkflowStatusPanel.tsx
-function a(e, t) {
+function o(e, t) {
 	return t === "refreshing" || e === "workflow_running" ? {
 		label: "Running",
 		bgColor: "bg-action-primary-bg/10",
@@ -16,7 +19,7 @@ function a(e, t) {
 	} : e === "workflow_pending" ? {
 		label: "Pending",
 		bgColor: "bg-status-warning-bg/10",
-		textColor: "text-status-warning-text",
+		textColor: "text-[var(--color-status-warning-text)]",
 		dotColor: "bg-status-warning-bg"
 	} : {
 		label: "Completed",
@@ -25,139 +28,136 @@ function a(e, t) {
 		dotColor: "bg-status-success-bg"
 	};
 }
-var o = ({ className: e }) => /* @__PURE__ */ n("svg", {
+var s = ({ className: e }) => /* @__PURE__ */ r("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ n("path", {
+	children: /* @__PURE__ */ r("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 1.5,
 		d: "M13 10V3L4 14h7v7l9-11h-7z"
 	})
-}), s = ({ className: e, spinning: t }) => /* @__PURE__ */ n("svg", {
+}), c = ({ className: e, spinning: t }) => /* @__PURE__ */ r("svg", {
 	className: `${e} ${t ? "animate-spin" : ""}`,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ n("path", {
+	children: /* @__PURE__ */ r("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		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"
 	})
-}), c = ({ className: e }) => /* @__PURE__ */ n("svg", {
+}), l = ({ className: e }) => /* @__PURE__ */ r("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ n("path", {
+	children: /* @__PURE__ */ r("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
 	})
-}), l = ({ className: e }) => /* @__PURE__ */ n("svg", {
+}), u = ({ className: e }) => /* @__PURE__ */ r("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ n("path", {
+	children: /* @__PURE__ */ r("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		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"
 	})
-}), u = e(function({ workflowId: e, executionId: u, lastRefreshedAt: d, setupState: f, status: p, errorMetadata: m, onRerunWorkflow: h, onViewWorkflow: g, disabled: _ = !1, isRerunning: v = !1 }) {
-	let y = t(() => a(f, p), [f, p]), b = p === "refreshing" || f === "workflow_running" || v, x = d ? i(new Date(d), { addSuffix: !0 }) : "Never";
-	return /* @__PURE__ */ r("div", {
-		className: "border border-border-default rounded-lg bg-bg-surface overflow-hidden",
-		children: [/* @__PURE__ */ r("div", {
-			className: "px-4 py-3 border-b border-border-default bg-bg-sunken flex items-center justify-between",
-			children: [/* @__PURE__ */ r("div", {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ n(o, { className: "w-4 h-4 text-text-secondary" }), /* @__PURE__ */ n("h3", {
-					className: "text-sm font-semibold text-text-primary",
-					children: "FluidGrids Workflow"
-				})]
-			}), /* @__PURE__ */ r("div", {
-				className: `flex items-center gap-1.5 px-2 py-0.5 rounded-full ${y.bgColor}`,
-				children: [/* @__PURE__ */ n("span", { className: `w-1.5 h-1.5 rounded-full ${y.dotColor} ${b ? "animate-pulse" : ""}` }), /* @__PURE__ */ n("span", {
-					className: `text-xs font-medium ${y.textColor}`,
-					children: y.label
-				})]
+}), d = t(function({ workflowId: t, executionId: d, lastRefreshedAt: f, setupState: p, status: m, errorMetadata: h, onRerunWorkflow: g, onViewWorkflow: _, disabled: v = !1, isRerunning: y = !1 }) {
+	let b = n(() => o(p, m), [p, m]), x = m === "refreshing" || p === "workflow_running" || y, S = f ? a(new Date(f), { addSuffix: !0 }) : "Never";
+	return /* @__PURE__ */ i(e, {
+		headingLevel: 2,
+		title: "FluidGrids workflow",
+		description: "The workflow that populates this sink, and how its last run went.",
+		icon: /* @__PURE__ */ r(s, { className: "h-icon-sm w-icon-sm" }),
+		meta: /* @__PURE__ */ i("span", {
+			className: `flex items-center gap-1.5 rounded-pill px-2 py-0.5 ${b.bgColor}`,
+			children: [/* @__PURE__ */ r("span", { className: `h-1.5 w-1.5 rounded-pill ${b.dotColor} ${x ? "animate-pulse" : ""}` }), /* @__PURE__ */ r("span", {
+				className: `text-xs font-medium ${b.textColor}`,
+				children: b.label
 			})]
-		}), /* @__PURE__ */ r("div", {
-			className: "p-4 space-y-4",
-			children: [
-				/* @__PURE__ */ r("div", {
-					className: "grid grid-cols-2 gap-4 text-sm",
-					children: [
-						/* @__PURE__ */ r("div", { children: [/* @__PURE__ */ n("p", {
-							className: "text-text-secondary text-xs mb-1",
+		}),
+		bodyClassName: "space-y-form-gap",
+		children: [
+			/* @__PURE__ */ i("div", {
+				className: "grid grid-cols-1 gap-form-gap text-sm sm:grid-cols-2",
+				children: [
+					/* @__PURE__ */ i("div", {
+						className: "min-w-0",
+						children: [/* @__PURE__ */ r("p", {
+							className: "mb-1 text-xs text-text-secondary",
 							children: "Workflow ID"
-						}), /* @__PURE__ */ n("p", {
-							className: "text-text-primary font-mono text-xs truncate",
-							title: e,
-							children: e || "Not linked"
-						})] }),
-						/* @__PURE__ */ r("div", { children: [/* @__PURE__ */ n("p", {
-							className: "text-text-secondary text-xs mb-1",
-							children: "Last Execution"
-						}), /* @__PURE__ */ n("p", {
-							className: "text-text-primary text-xs",
-							children: x
-						})] }),
-						u && /* @__PURE__ */ r("div", {
-							className: "col-span-2",
-							children: [/* @__PURE__ */ n("p", {
-								className: "text-text-secondary text-xs mb-1",
-								children: "Execution ID"
-							}), /* @__PURE__ */ n("p", {
-								className: "text-text-primary font-mono text-xs truncate",
-								title: u,
-								children: u
-							})]
-						})
-					]
-				}),
-				p === "error" && m && /* @__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", {
+						}), /* @__PURE__ */ r("p", {
+							className: "break-all font-mono text-xs text-text-primary",
+							title: t,
+							children: t || "Not linked"
+						})]
+					}),
+					/* @__PURE__ */ i("div", {
 						className: "min-w-0",
-						children: [m.code && /* @__PURE__ */ n("p", {
-							className: "text-xs font-medium text-status-error-text",
-							children: m.code
-						}), /* @__PURE__ */ n("p", {
-							className: "text-xs text-status-error-text/80 mt-0.5",
-							children: m.message || "An error occurred during workflow execution"
+						children: [/* @__PURE__ */ r("p", {
+							className: "mb-1 text-xs text-text-secondary",
+							children: "Last execution"
+						}), /* @__PURE__ */ r("p", {
+							className: "text-xs text-text-primary",
+							children: S
+						})]
+					}),
+					d && /* @__PURE__ */ i("div", {
+						className: "min-w-0 sm:col-span-2",
+						children: [/* @__PURE__ */ r("p", {
+							className: "mb-1 text-xs text-text-secondary",
+							children: "Execution ID"
+						}), /* @__PURE__ */ r("p", {
+							className: "break-all font-mono text-xs text-text-primary",
+							title: d,
+							children: d
 						})]
-					})]
-				}),
-				/* @__PURE__ */ r("div", {
-					className: "flex items-center gap-2 pt-2 border-t border-border-muted",
-					children: [h && /* @__PURE__ */ r("button", {
-						type: "button",
-						onClick: h,
-						disabled: _ || b,
-						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              ",
-						children: [/* @__PURE__ */ n(s, {
-							className: "w-3.5 h-3.5",
-							spinning: b
-						}), b ? "Running..." : "Re-run Workflow"]
-					}), g && /* @__PURE__ */ r("button", {
-						type: "button",
-						onClick: g,
-						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              ",
-						children: [/* @__PURE__ */ n(c, { className: "w-3.5 h-3.5" }), "View in FluidGrids"]
-					})]
+					})
+				]
+			}),
+			m === "error" && h && /* @__PURE__ */ r(e, {
+				tone: "danger",
+				padding: "compact",
+				headingLevel: 3,
+				title: h.code || "Last run failed",
+				icon: /* @__PURE__ */ r(u, { className: "h-icon-sm w-icon-sm" }),
+				children: /* @__PURE__ */ r("p", {
+					className: "text-xs text-[var(--color-status-error-text)]",
+					children: h.message || "An error occurred during workflow execution"
 				})
-			]
-		})]
+			}),
+			/* @__PURE__ */ i("div", {
+				className: "flex flex-wrap items-center gap-control-gap border-t border-[var(--color-border-subtle)] pt-form-gap",
+				children: [g && /* @__PURE__ */ i("button", {
+					type: "button",
+					onClick: g,
+					disabled: v || x,
+					className: "flex min-h-[var(--size-controlHeight-md)] items-center gap-1.5 rounded-button bg-action-primary-bg px-3 py-1.5 text-xs font-medium text-action-primary-text hover:bg-action-primary-bgHover disabled:cursor-not-allowed disabled:opacity-50 motion-safe:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface",
+					children: [/* @__PURE__ */ r(c, {
+						className: "h-3.5 w-3.5",
+						spinning: x
+					}), x ? "Running..." : "Re-run workflow"]
+				}), _ && /* @__PURE__ */ i("button", {
+					type: "button",
+					onClick: _,
+					className: "flex min-h-[var(--size-controlHeight-md)] items-center gap-1.5 rounded-button px-3 py-1.5 text-xs font-medium text-text-secondary hover:bg-bg-sunken motion-safe:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface",
+					children: [/* @__PURE__ */ r(l, { className: "h-3.5 w-3.5" }), "View in FluidGrids"]
+				})]
+			})
+		]
 	});
 });
 //#endregion
-export { u as default };
+export { d as default };
 
 //# sourceMappingURL=WorkflowStatusPanel.js.map

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-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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"}
+{"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 { Section, SECTION_FOCUS_RING } from '../common';\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-[var(--color-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    <Section\n      // Peer of the detail page's other level-2 panels (Details, Linked\n      // workflows, Linked parsers) — they must share a heading level or the\n      // outline implies this panel is nested inside the one before it.\n      headingLevel={2}\n      title=\"FluidGrids workflow\"\n      description=\"The workflow that populates this sink, and how its last run went.\"\n      icon={<WorkflowIcon className=\"h-icon-sm w-icon-sm\" />}\n      meta={\n        <span className={`flex items-center gap-1.5 rounded-pill px-2 py-0.5 ${statusConfig.bgColor}`}>\n          <span className={`h-1.5 w-1.5 rounded-pill ${statusConfig.dotColor} ${isRunning ? 'animate-pulse' : ''}`} />\n          <span className={`text-xs font-medium ${statusConfig.textColor}`}>{statusConfig.label}</span>\n        </span>\n      }\n      bodyClassName=\"space-y-form-gap\"\n    >\n      {/* Identifiers — supporting reference detail, so it steps down to `muted`. */}\n      <div className=\"grid grid-cols-1 gap-form-gap text-sm sm:grid-cols-2\">\n        <div className=\"min-w-0\">\n          <p className=\"mb-1 text-xs text-text-secondary\">Workflow ID</p>\n          <p className=\"break-all font-mono text-xs text-text-primary\" title={workflowId}>\n            {workflowId || 'Not linked'}\n          </p>\n        </div>\n        <div className=\"min-w-0\">\n          <p className=\"mb-1 text-xs text-text-secondary\">Last execution</p>\n          <p className=\"text-xs text-text-primary\">{lastRefreshedText}</p>\n        </div>\n        {executionId && (\n          <div className=\"min-w-0 sm:col-span-2\">\n            <p className=\"mb-1 text-xs text-text-secondary\">Execution ID</p>\n            <p className=\"break-all font-mono text-xs text-text-primary\" title={executionId}>\n              {executionId}\n            </p>\n          </div>\n        )}\n      </div>\n\n      {/* Error display — a real status section rather than a hand-rolled tint. */}\n      {status === 'error' && errorMetadata && (\n        <Section\n          tone=\"danger\"\n          padding=\"compact\"\n          headingLevel={3}\n          title={errorMetadata.code || 'Last run failed'}\n          icon={<AlertIcon className=\"h-icon-sm w-icon-sm\" />}\n        >\n          <p className=\"text-xs text-[var(--color-status-error-text)]\">\n            {errorMetadata.message || 'An error occurred during workflow execution'}\n          </p>\n        </Section>\n      )}\n\n      {/* Actions */}\n      <div className=\"flex flex-wrap items-center gap-control-gap border-t border-[var(--color-border-subtle)] pt-form-gap\">\n        {onRerunWorkflow && (\n          <button\n            type=\"button\"\n            onClick={onRerunWorkflow}\n            disabled={disabled || isRunning}\n            className={`flex min-h-[var(--size-controlHeight-md)] items-center gap-1.5 rounded-button bg-action-primary-bg px-3 py-1.5 text-xs font-medium text-action-primary-text hover:bg-action-primary-bgHover disabled:cursor-not-allowed disabled:opacity-50 motion-safe:transition-colors ${SECTION_FOCUS_RING}`}\n          >\n            <RefreshIcon className=\"h-3.5 w-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={`flex min-h-[var(--size-controlHeight-md)] items-center gap-1.5 rounded-button px-3 py-1.5 text-xs font-medium text-text-secondary hover:bg-bg-sunken motion-safe:transition-colors ${SECTION_FOCUS_RING}`}\n          >\n            <ExternalLinkIcon className=\"h-3.5 w-3.5\" />\n            View in FluidGrids\n          </button>\n        )}\n      </div>\n    </Section>\n  );\n});\n\nexport default WorkflowStatusPanel;\n"],"mappings":"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"}