diff --git a/frontend/src/pages/studio/IngestionPipelinePage.vue b/frontend/src/pages/studio/IngestionPipelinePage.vue
index 546bc39..bd71041 100644
--- a/frontend/src/pages/studio/IngestionPipelinePage.vue
+++ b/frontend/src/pages/studio/IngestionPipelinePage.vue
@@ -25,8 +25,10 @@ import { ingestionSteps } from '@/data/studioMock';
- {{ step.name }}
- {{ step.description }}
+
+ {{ step.name }}
+ {{ step.description }}
+
diff --git a/frontend/src/pages/studio/ObservabilityPage.vue b/frontend/src/pages/studio/ObservabilityPage.vue
index bd6d58b..ec87537 100644
--- a/frontend/src/pages/studio/ObservabilityPage.vue
+++ b/frontend/src/pages/studio/ObservabilityPage.vue
@@ -25,7 +25,11 @@ import { recentRuns, traceSteps } from '@/data/studioMock';
{{ run.name }}
{{ run.type }}
- {{ run.status }}
+
+
+ {{ run.status }}
+
+
{{ run.latency }}
{{ run.cost }}
diff --git a/frontend/src/pages/studio/StudioDashboardPage.vue b/frontend/src/pages/studio/StudioDashboardPage.vue
index ae01a87..2bb19bc 100644
--- a/frontend/src/pages/studio/StudioDashboardPage.vue
+++ b/frontend/src/pages/studio/StudioDashboardPage.vue
@@ -76,7 +76,11 @@ import { lifecycleSteps, readinessChecklist, recentRuns } from '@/data/studioMoc
{{ run.name }}
{{ run.type }}
- {{ run.status }}
+
+
+ {{ run.status }}
+
+
{{ run.latency }}
{{ run.cost }}
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index 5bb59a4..9655f29 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -412,6 +412,7 @@ a {
display: grid;
grid-template-columns: 1.5fr 0.7fr 0.7fr 0.7fr 0.7fr;
align-items: center;
+ column-gap: 14px;
min-height: 44px;
border-bottom: 1px solid var(--app-border-soft);
color: #334155;
@@ -425,6 +426,14 @@ a {
font-weight: 800;
}
+.status-cell {
+ display: inline-flex;
+ align-items: center;
+ justify-self: start;
+ min-width: 74px;
+ max-width: 100%;
+}
+
.warning-panel {
display: flex;
gap: 14px;
@@ -562,18 +571,57 @@ a {
padding: 0 20px 18px;
}
+.status-pill {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 54px;
+ height: 24px;
+ padding: 0 10px;
+ border: 1px solid transparent;
+ border-radius: 6px;
+ font-size: 12px;
+ font-weight: 750;
+ line-height: 1;
+ white-space: nowrap;
+}
+
+.status-pill.is-success {
+ border-color: #bbf7d0;
+ color: #15803d;
+ background: #f0fdf4;
+}
+
+.status-pill.is-warning {
+ border-color: #fed7aa;
+ color: #c2410c;
+ background: #fff7ed;
+}
+
.pipeline-timeline article {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 10px;
+ align-items: start;
color: var(--app-text-muted);
}
+.timeline-content {
+ min-width: 0;
+}
+
.pipeline-timeline strong {
+ display: block;
color: var(--app-text);
font-size: 13px;
}
+.pipeline-timeline span {
+ display: block;
+ margin-top: 4px;
+ line-height: 1.45;
+}
+
.timeline-dot {
width: 12px;
height: 12px;