diff --git a/apps/design-system/styles/globals.css b/apps/design-system/styles/globals.css
index 2f2e162c7a249..0b8e85d7e22b6 100644
--- a/apps/design-system/styles/globals.css
+++ b/apps/design-system/styles/globals.css
@@ -1,12 +1,12 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
@import './../../../packages/ui/build/css/source/global.css';
@import './../../../packages/ui/build/css/themes/dark.css';
@import './../../../packages/ui/build/css/themes/classic-dark.css';
@import './../../../packages/ui/build/css/themes/light.css';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
@layer base {
:root {
--chart-1: 12 76% 61%;
diff --git a/apps/studio/components/interfaces/Database/Replication/Pipeline.utils.ts b/apps/studio/components/interfaces/Database/Replication/Pipeline.utils.ts
index d15fe8040cc2a..2d3efaf233770 100644
--- a/apps/studio/components/interfaces/Database/Replication/Pipeline.utils.ts
+++ b/apps/studio/components/interfaces/Database/Replication/Pipeline.utils.ts
@@ -22,44 +22,44 @@ export const getStatusName = (
return undefined
}
-export const PIPELINE_STATE_MESSAGES = {
+const PIPELINE_STATE_MESSAGES = {
enabling: {
- title: 'Pipeline Enabling',
+ title: 'Pipeline enabling',
message: 'Starting the pipeline. Table replication will resume once enabled.',
badge: 'Enabling',
},
disabling: {
- title: 'Pipeline Disabling',
+ title: 'Pipeline disabling',
message: 'Stopping the pipeline. Table replication will be paused once disabled.',
badge: 'Disabling',
},
failed: {
- title: 'Pipeline Failed',
- message: 'Replication has encountered an error. Check the logs for details.',
+ title: 'Pipeline failed',
+ message: 'Replication has encountered an error.',
badge: 'Failed',
},
stopped: {
- title: 'Pipeline Stopped',
+ title: 'Pipeline stopped',
message: 'Replication is paused. Enable the pipeline to resume data synchronization.',
badge: 'Stopped',
},
starting: {
- title: 'Pipeline Starting',
+ title: 'Pipeline starting',
message: 'Initializing replication. Table status will be available once running.',
badge: 'Starting',
},
running: {
- title: 'Pipeline Running',
+ title: 'Pipeline running',
message: 'Replication is active and processing data',
badge: 'Running',
},
unknown: {
- title: 'Pipeline Status Unknown',
- message: 'Unable to determine replication status. Check the logs for more information.',
+ title: 'Pipeline status unknown',
+ message: 'Unable to determine replication status.',
badge: 'Unknown',
},
notRunning: {
- title: 'Pipeline Not Running',
+ title: 'Pipeline not running',
message: 'Replication is not active. Enable the pipeline to start data synchronization.',
badge: 'Disabled',
},
diff --git a/apps/studio/components/interfaces/Database/Replication/PipelineStatus.tsx b/apps/studio/components/interfaces/Database/Replication/PipelineStatus.tsx
index c33087468ad2a..69a988996d7d9 100644
--- a/apps/studio/components/interfaces/Database/Replication/PipelineStatus.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/PipelineStatus.tsx
@@ -1,3 +1,5 @@
+import { useParams } from 'common'
+import { InlineLink } from 'components/ui/InlineLink'
import { ReplicationPipelineStatusData } from 'data/replication/pipeline-status-query'
import { AlertTriangle, Loader2 } from 'lucide-react'
import { PipelineStatusRequestStatus } from 'state/replication-pipeline-request-status'
@@ -31,6 +33,8 @@ export const PipelineStatus = ({
isSuccess,
requestStatus,
}: PipelineStatusProps) => {
+ const { ref } = useParams()
+
// Map backend statuses to UX-friendly display
const getStatusConfig = () => {
const statusName =
@@ -138,7 +142,17 @@ export const PipelineStatus = ({
{statusConfig.label}
- {statusConfig.tooltip}
+
+ {statusConfig.tooltip}
+ {['unknown', 'failed'].includes(pipelineStatus?.name ?? '') && (
+ <>
+ {' '}
+ Check the{' '}
+ logs for
+ more information.
+ >
+ )}
+
)}
>
diff --git a/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus.tsx b/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus.tsx
index 6205fdfb4b90b..dd098652c769a 100644
--- a/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/ReplicationPipelineStatus.tsx
@@ -174,6 +174,9 @@ export const ReplicationPipelineStatus = () => {
}
/>
+