From 5c17ceaf82f718adf0651a65f9aa90320d0f6f9e Mon Sep 17 00:00:00 2001
From: nfebe <fenn25.fn@gmail.com>
Date: Sat, 18 Jul 2026 22:31:33 +0100
Subject: [PATCH] feat(ui): Build the dashboard view over container and serving
 metrics

The dashboard endpoints and a typed client shipped with the observability work
but nothing consumed them, so the stored dashboards were unreachable. This adds
the view they were staged for.

Dashboards can be created, renamed, and deleted, and each one holds panels the
operator arranges on a twelve-column grid. A panel plots a container metric (CPU,
memory, network) or a serving metric (requests, errors, latency) for one
deployment or all of them, as a line chart or a single stat, over a selectable
time range. Panel data is read from the metric endpoints that already serve the
observability screens, so nothing new is collected.
---
 src/components/dashboards/PanelCard.test.ts   | 130 +++++++++
 src/components/dashboards/PanelCard.vue       | 199 ++++++++++++++
 .../dashboards/PanelEditorModal.vue           | 200 ++++++++++++++
 src/layouts/DashboardLayout.vue               |   9 +
 src/router/index.ts                           |  12 +
 src/views/DashboardDetailView.vue             | 211 +++++++++++++++
 src/views/DashboardsView.test.ts              |  58 ++++
 src/views/DashboardsView.vue                  | 249 ++++++++++++++++++
 8 files changed, 1068 insertions(+)
 create mode 100644 src/components/dashboards/PanelCard.test.ts
 create mode 100644 src/components/dashboards/PanelCard.vue
 create mode 100644 src/components/dashboards/PanelEditorModal.vue
 create mode 100644 src/views/DashboardDetailView.vue
 create mode 100644 src/views/DashboardsView.test.ts
 create mode 100644 src/views/DashboardsView.vue

diff --git a/src/components/dashboards/PanelCard.test.ts b/src/components/dashboards/PanelCard.test.ts
new file mode 100644
index 0000000..c1663fc
--- /dev/null
+++ b/src/components/dashboards/PanelCard.test.ts
@@ -0,0 +1,130 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { mount, flushPromises } from "@vue/test-utils";
+import PanelCard from "./PanelCard.vue";
+import { servingApi } from "@/services/api";
+import { observabilityApi } from "@/services/observability";
+
+vi.mock("@/services/api", () => ({
+  servingApi: { series: vi.fn() },
+}));
+vi.mock("@/services/observability", () => ({
+  observabilityApi: { timeseries: vi.fn() },
+}));
+
+// Stub the canvas chart; the test only checks the data handed to it.
+const TimeSeriesChartStub = {
+  name: "TimeSeriesChart",
+  props: ["containers", "timestamps", "values", "unit", "area"],
+  template: "<div class='chart-stub' />",
+};
+
+const mountPanel = (panel: any) =>
+  mount(PanelCard, {
+    props: { panel, since: "1h" },
+    global: { stubs: { TimeSeriesChart: TimeSeriesChartStub, Icon: true } },
+  });
+
+describe("PanelCard", () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it("adapts serving RED points into the chart's series shape", async () => {
+    vi.mocked(servingApi.series).mockResolvedValue({
+      data: {
+        deployment: "shop",
+        since: "1h",
+        points: [
+          { time: "2026-07-17T10:00:00Z", requests: 10, errors: 1, avg_time_ms: 40, p95_time_ms: 80 },
+          { time: "2026-07-17T10:01:00Z", requests: 20, errors: 0, avg_time_ms: 55, p95_time_ms: 90 },
+        ],
+      },
+    } as any);
+
+    const wrapper = mountPanel({
+      title: "Requests",
+      source: "serving",
+      series: "requests",
+      deployment: "shop",
+      type: "line",
+      width: 6,
+    });
+    await flushPromises();
+
+    expect(servingApi.series).toHaveBeenCalledWith("shop", "1h");
+    const chart = wrapper.findComponent(TimeSeriesChartStub);
+    expect(chart.exists()).toBe(true);
+    expect(chart.props("containers")).toEqual(["shop"]);
+    expect(chart.props("timestamps")).toEqual([
+      Date.parse("2026-07-17T10:00:00Z") / 1000,
+      Date.parse("2026-07-17T10:01:00Z") / 1000,
+    ]);
+    expect(chart.props("values")).toEqual([[10, 20]]);
+    expect(chart.props("unit")).toBe("count");
+  });
+
+  it("selects the latency field and ms unit for a latency panel", async () => {
+    vi.mocked(servingApi.series).mockResolvedValue({
+      data: { points: [{ time: "2026-07-17T10:00:00Z", requests: 5, errors: 0, avg_time_ms: 42, p95_time_ms: 90 }] },
+    } as any);
+
+    const wrapper = mountPanel({
+      title: "Latency",
+      source: "serving",
+      series: "latency",
+      deployment: "shop",
+      type: "line",
+      width: 6,
+    });
+    await flushPromises();
+
+    const chart = wrapper.findComponent(TimeSeriesChartStub);
+    expect(chart.props("values")).toEqual([[42]]);
+    expect(chart.props("unit")).toBe("ms");
+  });
+
+  it("pulls the named metric series out of a container timeseries response", async () => {
+    vi.mocked(observabilityApi.timeseries).mockResolvedValue({
+      data: {
+        metrics: {
+          "container.cpu.usage": { containers: ["shop-web"], timestamps: [1, 2], values: [[3.5, 4.0]] },
+        },
+      },
+    } as any);
+
+    const wrapper = mountPanel({
+      title: "CPU",
+      source: "container",
+      series: "container.cpu.usage",
+      deployment: "shop",
+      type: "line",
+      width: 6,
+    });
+    await flushPromises();
+
+    expect(observabilityApi.timeseries).toHaveBeenCalledWith("shop", "1h");
+    const chart = wrapper.findComponent(TimeSeriesChartStub);
+    expect(chart.props("values")).toEqual([[3.5, 4.0]]);
+    expect(chart.props("unit")).toBe("percent");
+  });
+
+  it("shows the latest value as a stat", async () => {
+    vi.mocked(observabilityApi.timeseries).mockResolvedValue({
+      data: {
+        metrics: {
+          "container.cpu.usage": { containers: ["shop-web"], timestamps: [1, 2], values: [[3.5, 7.25]] },
+        },
+      },
+    } as any);
+
+    const wrapper = mountPanel({
+      title: "CPU now",
+      source: "container",
+      series: "container.cpu.usage",
+      deployment: "shop",
+      type: "stat",
+      width: 3,
+    });
+    await flushPromises();
+
+    expect(wrapper.find(".stat-value").text()).toBe("7.3%");
+  });
+});
diff --git a/src/components/dashboards/PanelCard.vue b/src/components/dashboards/PanelCard.vue
new file mode 100644
index 0000000..2107665
--- /dev/null
+++ b/src/components/dashboards/PanelCard.vue
@@ -0,0 +1,199 @@
+<template>
+  <div class="panel-card" :style="{ gridColumn: `span ${clampWidth(panel.width)}` }">
+    <div class="panel-head">
+      <span class="panel-title">{{ panel.title }}</span>
+      <span class="panel-scope">{{ panel.deployment || "all deployments" }}</span>
+      <div v-if="editable" class="panel-actions">
+        <button class="icon-btn" title="Edit panel" @click="emit('edit')"><Icon name="pencil" :size="14" /></button>
+        <button class="icon-btn" title="Remove panel" @click="emit('remove')">
+          <Icon name="trash-2" :size="14" />
+        </button>
+      </div>
+    </div>
+
+    <div class="panel-body">
+      <div v-if="loading" class="panel-msg">Loading</div>
+      <div v-else-if="error" class="panel-msg error">{{ error }}</div>
+      <template v-else-if="panel.type === 'stat'">
+        <div class="stat-value">{{ statDisplay }}</div>
+        <div class="stat-sub">{{ seriesLabel }}</div>
+      </template>
+      <TimeSeriesChart
+        v-else-if="series && series.timestamps.length"
+        :containers="series.containers"
+        :timestamps="series.timestamps"
+        :values="series.values"
+        :unit="unit"
+        area
+      />
+      <div v-else class="panel-msg">No data in this range</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import Icon from "@/components/base/Icon.vue";
+import TimeSeriesChart from "@/components/charts/TimeSeriesChart.vue";
+import { observabilityApi, type MetricSeries } from "@/services/observability";
+import { servingApi, type DashboardPanel } from "@/services/api";
+
+const props = defineProps<{
+  panel: DashboardPanel;
+  since: string;
+  editable?: boolean;
+}>();
+
+const emit = defineEmits<{ edit: []; remove: [] }>();
+
+const loading = ref(false);
+const error = ref("");
+const series = ref<MetricSeries | null>(null);
+
+const unit = computed<"percent" | "bytes" | "ms" | "count">(() => {
+  if (props.panel.source === "serving") return props.panel.series === "latency" ? "ms" : "count";
+  if (props.panel.series.startsWith("container.cpu")) return "percent";
+  if (props.panel.series.startsWith("container.memory")) return "bytes";
+  if (props.panel.series.startsWith("container.network")) return "bytes";
+  return "count";
+});
+
+const seriesLabel = computed(() => {
+  if (props.panel.source === "serving") return `serving · ${props.panel.series}`;
+  return props.panel.series.replace("container.", "");
+});
+
+// The stat panel shows the most recent value across containers.
+const statDisplay = computed(() => {
+  if (!series.value) return "-";
+  let latest: number | null = null;
+  for (const row of series.value.values) {
+    for (let i = row.length - 1; i >= 0; i--) {
+      if (row[i] != null) {
+        latest = (latest ?? 0) + (row[i] as number);
+        break;
+      }
+    }
+  }
+  if (latest == null) return "-";
+  return formatStat(latest, unit.value);
+});
+
+function formatStat(v: number, u: string): string {
+  if (u === "percent") return `${v.toFixed(1)}%`;
+  if (u === "ms") return v >= 1000 ? `${(v / 1000).toFixed(2)}s` : `${v.toFixed(0)}ms`;
+  if (u === "bytes") {
+    if (v >= 1 << 30) return `${(v / (1 << 30)).toFixed(1)}G`;
+    if (v >= 1 << 20) return `${(v / (1 << 20)).toFixed(0)}M`;
+    if (v >= 1 << 10) return `${(v / (1 << 10)).toFixed(0)}K`;
+    return `${v}B`;
+  }
+  return v >= 1000 ? `${(v / 1000).toFixed(1)}k` : `${Math.round(v)}`;
+}
+
+function clampWidth(w: number): number {
+  if (!w || w < 1) return 6;
+  return Math.min(12, w);
+}
+
+async function load() {
+  loading.value = true;
+  error.value = "";
+  try {
+    if (props.panel.source === "serving") {
+      if (!props.panel.deployment) {
+        error.value = "No deployment set";
+        return;
+      }
+      const { data } = await servingApi.series(props.panel.deployment, props.since);
+      const points = data.points || [];
+      const field = props.panel.series;
+      series.value = {
+        containers: [props.panel.deployment],
+        timestamps: points.map((p) => Math.floor(Date.parse(p.time) / 1000)),
+        values: [points.map((p) => (field === "errors" ? p.errors : field === "latency" ? p.avg_time_ms : p.requests))],
+      };
+    } else {
+      const { data } = await observabilityApi.timeseries(props.panel.deployment || "", props.since);
+      series.value = data.metrics?.[props.panel.series] ?? { containers: [], timestamps: [], values: [] };
+    }
+  } catch (e: any) {
+    error.value = e.response?.data?.error || e.message || "Failed to load";
+  } finally {
+    loading.value = false;
+  }
+}
+
+watch(() => [props.panel.source, props.panel.series, props.panel.deployment, props.since], load, { immediate: true });
+</script>
+
+<style scoped>
+.panel-card {
+  display: flex;
+  flex-direction: column;
+  background: var(--surface-raised);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  min-height: 200px;
+  overflow: hidden;
+}
+.panel-head {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border-subtle);
+}
+.panel-title {
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+.panel-scope {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  margin-left: auto;
+}
+.panel-actions {
+  display: flex;
+  gap: 0.25rem;
+}
+.icon-btn {
+  display: inline-flex;
+  padding: 0.25rem;
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+}
+.icon-btn:hover {
+  color: var(--text);
+  background: var(--surface-inset);
+}
+.panel-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 1rem;
+  min-height: 140px;
+}
+.panel-msg {
+  color: var(--text-muted);
+  font-size: 0.85rem;
+  text-align: center;
+}
+.panel-msg.error {
+  color: var(--danger, #ef4444);
+}
+.stat-value {
+  font-size: 2.25rem;
+  font-weight: 700;
+  line-height: 1.1;
+}
+.stat-sub {
+  margin-top: 0.25rem;
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+</style>
diff --git a/src/components/dashboards/PanelEditorModal.vue b/src/components/dashboards/PanelEditorModal.vue
new file mode 100644
index 0000000..ad6c79d
--- /dev/null
+++ b/src/components/dashboards/PanelEditorModal.vue
@@ -0,0 +1,200 @@
+<template>
+  <Teleport to="body">
+    <div class="modal-overlay" @click.self="emit('cancel')">
+      <div class="modal-dialog">
+        <div class="modal-header">
+          <h3>{{ panel ? "Edit panel" : "Add panel" }}</h3>
+          <button class="icon-btn" @click="emit('cancel')"><Icon name="x" :size="16" /></button>
+        </div>
+
+        <div class="modal-body">
+          <div class="form-group">
+            <label>Title</label>
+            <input v-model="form.title" type="text" class="form-input" placeholder="CPU usage" />
+          </div>
+
+          <div class="form-row">
+            <div class="form-group">
+              <label>Source</label>
+              <select v-model="form.source" class="form-input" @change="onSourceChange">
+                <option value="container">Container metrics</option>
+                <option value="serving">Serving (proxy)</option>
+              </select>
+            </div>
+            <div class="form-group">
+              <label>Metric</label>
+              <select v-model="form.series" class="form-input">
+                <option v-for="opt in seriesOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
+              </select>
+            </div>
+          </div>
+
+          <div class="form-group">
+            <label>Deployment {{ form.source === "serving" ? "(required)" : "(optional, all if empty)" }}</label>
+            <select v-model="form.deployment" class="form-input">
+              <option value="">{{ form.source === "serving" ? "Select a deployment" : "All deployments" }}</option>
+              <option v-for="d in deployments" :key="d" :value="d">{{ d }}</option>
+            </select>
+          </div>
+
+          <div class="form-row">
+            <div class="form-group">
+              <label>Visualization</label>
+              <select v-model="form.type" class="form-input">
+                <option value="line">Line chart</option>
+                <option value="stat">Single stat</option>
+              </select>
+            </div>
+            <div class="form-group">
+              <label>Width (of 12)</label>
+              <input v-model.number="form.width" type="number" min="1" max="12" class="form-input" />
+            </div>
+          </div>
+
+          <p v-if="validationError" class="form-error">{{ validationError }}</p>
+        </div>
+
+        <div class="modal-footer">
+          <button class="btn btn-secondary" @click="emit('cancel')">Cancel</button>
+          <button class="btn btn-primary" :disabled="!!validationError" @click="save">Save panel</button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import Icon from "@/components/base/Icon.vue";
+import type { DashboardPanel } from "@/services/api";
+
+const props = defineProps<{
+  panel?: DashboardPanel | null;
+  deployments: string[];
+}>();
+
+const emit = defineEmits<{ save: [panel: DashboardPanel]; cancel: [] }>();
+
+const containerSeries = [
+  { value: "container.cpu.usage", label: "CPU usage" },
+  { value: "container.memory.usage", label: "Memory usage" },
+  { value: "container.memory.limit", label: "Memory limit" },
+  { value: "container.network.io.rx", label: "Network in" },
+  { value: "container.network.io.tx", label: "Network out" },
+];
+const servingSeries = [
+  { value: "requests", label: "Requests" },
+  { value: "errors", label: "Errors" },
+  { value: "latency", label: "Latency" },
+];
+
+const form = ref<DashboardPanel>({
+  id: props.panel?.id,
+  title: props.panel?.title ?? "",
+  source: props.panel?.source ?? "container",
+  series: props.panel?.series ?? "container.cpu.usage",
+  deployment: props.panel?.deployment ?? "",
+  type: props.panel?.type ?? "line",
+  width: props.panel?.width ?? 6,
+});
+
+const seriesOptions = computed(() => (form.value.source === "serving" ? servingSeries : containerSeries));
+
+function onSourceChange() {
+  // Keep series valid for the chosen source.
+  form.value.series = seriesOptions.value[0].value;
+}
+
+const validationError = computed(() => {
+  if (!form.value.title.trim()) return "A title is required.";
+  if (form.value.source === "serving" && !form.value.deployment) return "A serving panel needs a deployment.";
+  if (form.value.width < 1 || form.value.width > 12) return "Width must be between 1 and 12.";
+  return "";
+});
+
+function save() {
+  if (validationError.value) return;
+  emit("save", { ...form.value, title: form.value.title.trim() });
+}
+</script>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 1rem;
+}
+.modal-dialog {
+  background: var(--surface-raised);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xl);
+  width: 100%;
+  max-width: 520px;
+}
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid var(--border);
+}
+.modal-header h3 {
+  margin: 0;
+  font-size: 1rem;
+}
+.modal-body {
+  padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.form-row {
+  display: flex;
+  gap: 1rem;
+}
+.form-row .form-group {
+  flex: 1;
+}
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+.form-group label {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+.form-input {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--surface-inset);
+  color: var(--text);
+  font-size: 0.875rem;
+}
+.form-error {
+  margin: 0;
+  color: var(--danger, #ef4444);
+  font-size: 0.8rem;
+}
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  padding: 1rem 1.25rem;
+  border-top: 1px solid var(--border);
+}
+.icon-btn {
+  display: inline-flex;
+  padding: 0.25rem;
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+}
+</style>
diff --git a/src/layouts/DashboardLayout.vue b/src/layouts/DashboardLayout.vue
index 7a8d6da..581152d 100644
--- a/src/layouts/DashboardLayout.vue
+++ b/src/layouts/DashboardLayout.vue
@@ -203,6 +203,15 @@
               <Icon name="activity" :size="15" />
               Observability
             </router-link>
+            <router-link
+              v-if="authStore.hasPermission('deployments:read')"
+              to="/dashboards"
+              class="nav-subitem"
+              active-class="active"
+            >
+              <Icon name="layout-dashboard" :size="15" />
+              Dashboards
+            </router-link>
             <router-link
               v-if="authStore.hasPermission('deployments:read')"
               to="/observability/alerts"
diff --git a/src/router/index.ts b/src/router/index.ts
index aed780a..c15cc0b 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -112,6 +112,18 @@ const routes: RouteRecordRaw[] = [
         component: () => import("@/views/PluginsView.vue"),
         meta: { permission: "templates:read" },
       },
+      {
+        path: "dashboards",
+        name: "dashboards",
+        component: () => import("@/views/DashboardsView.vue"),
+        meta: { permission: "deployments:read" },
+      },
+      {
+        path: "dashboards/:id",
+        name: "dashboard-detail",
+        component: () => import("@/views/DashboardDetailView.vue"),
+        meta: { permission: "deployments:read" },
+      },
       {
         path: "observability",
         name: "observability",
diff --git a/src/views/DashboardDetailView.vue b/src/views/DashboardDetailView.vue
new file mode 100644
index 0000000..a0b0a2a
--- /dev/null
+++ b/src/views/DashboardDetailView.vue
@@ -0,0 +1,211 @@
+<template>
+  <div class="dashboard-detail">
+    <div v-if="loading" class="empty-state">Loading dashboard</div>
+    <div v-else-if="error" class="empty-state error">{{ error }}</div>
+    <template v-else-if="dashboard">
+      <div class="view-header">
+        <div class="title-block">
+          <router-link to="/dashboards" class="back-link"><Icon name="arrow-left" :size="16" /></router-link>
+          <input v-model="dashboard.name" class="name-input" @change="persist" />
+        </div>
+        <div class="header-actions">
+          <select v-model="since" class="range-select">
+            <option value="15m">Last 15m</option>
+            <option value="1h">Last 1h</option>
+            <option value="6h">Last 6h</option>
+            <option value="24h">Last 24h</option>
+          </select>
+          <button class="btn btn-primary" @click="addPanel">
+            <Icon name="plus" :size="16" />
+            Add panel
+          </button>
+        </div>
+      </div>
+
+      <div v-if="dashboard.panels.length === 0" class="empty-state">
+        <Icon name="layout-dashboard" :size="32" />
+        <p>This dashboard has no panels</p>
+        <span>Add a panel to plot a container or serving metric.</span>
+      </div>
+
+      <div v-else class="panel-grid">
+        <PanelCard
+          v-for="(p, i) in dashboard.panels"
+          :key="p.id || i"
+          :panel="p"
+          :since="since"
+          editable
+          @edit="editPanel(i)"
+          @remove="removePanel(i)"
+        />
+      </div>
+    </template>
+
+    <PanelEditorModal
+      v-if="editorOpen"
+      :panel="editing"
+      :deployments="deployments"
+      @cancel="editorOpen = false"
+      @save="onPanelSaved"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useRoute } from "vue-router";
+import Icon from "@/components/base/Icon.vue";
+import PanelCard from "@/components/dashboards/PanelCard.vue";
+import PanelEditorModal from "@/components/dashboards/PanelEditorModal.vue";
+import { dashboardsApi, deploymentsApi, type Dashboard, type DashboardPanel } from "@/services/api";
+
+const route = useRoute();
+const id = route.params.id as string;
+
+const dashboard = ref<Dashboard | null>(null);
+const deployments = ref<string[]>([]);
+const loading = ref(false);
+const error = ref("");
+const since = ref("1h");
+
+const editorOpen = ref(false);
+const editing = ref<DashboardPanel | null>(null);
+const editingIndex = ref(-1);
+
+async function fetchDashboard() {
+  loading.value = true;
+  error.value = "";
+  try {
+    const { data } = await dashboardsApi.get(id);
+    dashboard.value = data;
+  } catch (e: any) {
+    error.value = e.response?.data?.error || e.message || "Failed to load dashboard";
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function fetchDeployments() {
+  try {
+    const { data } = await deploymentsApi.list();
+    deployments.value = (data.deployments || []).map((d) => d.name);
+  } catch {
+    deployments.value = [];
+  }
+}
+
+// Every panel change is saved through the store's validation, and the returned
+// copy (with server-assigned ids) becomes the new state.
+async function persist() {
+  if (!dashboard.value) return;
+  try {
+    const { data } = await dashboardsApi.save(dashboard.value);
+    dashboard.value = data;
+  } catch (e: any) {
+    error.value = e.response?.data?.error || e.message || "Failed to save dashboard";
+    await fetchDashboard();
+  }
+}
+
+function addPanel() {
+  editing.value = null;
+  editingIndex.value = -1;
+  editorOpen.value = true;
+}
+
+function editPanel(i: number) {
+  if (!dashboard.value) return;
+  editing.value = { ...dashboard.value.panels[i] };
+  editingIndex.value = i;
+  editorOpen.value = true;
+}
+
+async function onPanelSaved(panel: DashboardPanel) {
+  if (!dashboard.value) return;
+  if (editingIndex.value >= 0) {
+    dashboard.value.panels[editingIndex.value] = panel;
+  } else {
+    dashboard.value.panels.push(panel);
+  }
+  editorOpen.value = false;
+  await persist();
+}
+
+async function removePanel(i: number) {
+  if (!dashboard.value) return;
+  dashboard.value.panels.splice(i, 1);
+  await persist();
+}
+
+onMounted(() => {
+  fetchDashboard();
+  fetchDeployments();
+});
+</script>
+
+<style scoped>
+.dashboard-detail {
+  padding: 1.5rem;
+}
+.view-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1.5rem;
+  gap: 1rem;
+}
+.title-block {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.back-link {
+  display: inline-flex;
+  color: var(--text-muted);
+}
+.name-input {
+  font-size: 1.35rem;
+  font-weight: 700;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--text);
+  border-radius: var(--radius-sm);
+  padding: 0.25rem 0.5rem;
+}
+.name-input:hover,
+.name-input:focus {
+  border-color: var(--border);
+  background: var(--surface-inset);
+  outline: none;
+}
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+.range-select {
+  padding: 0.4rem 0.65rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--surface-inset);
+  color: var(--text);
+  font-size: 0.85rem;
+}
+.panel-grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: 1rem;
+}
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 3rem;
+  color: var(--text-muted);
+  text-align: center;
+}
+.empty-state.error {
+  color: var(--danger, #ef4444);
+}
+</style>
diff --git a/src/views/DashboardsView.test.ts b/src/views/DashboardsView.test.ts
new file mode 100644
index 0000000..e785280
--- /dev/null
+++ b/src/views/DashboardsView.test.ts
@@ -0,0 +1,58 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { mount, flushPromises, type VueWrapper } from "@vue/test-utils";
+import DashboardsView from "./DashboardsView.vue";
+import { dashboardsApi } from "@/services/api";
+
+const push = vi.fn();
+vi.mock("vue-router", () => ({ useRouter: () => ({ push }) }));
+vi.mock("@/services/api", () => ({
+  dashboardsApi: { list: vi.fn(), save: vi.fn(), remove: vi.fn() },
+}));
+
+let wrapper: VueWrapper;
+const mountView = () => {
+  wrapper = mount(DashboardsView, { attachTo: document.body, global: { stubs: { Icon: true } } });
+  return wrapper;
+};
+
+describe("DashboardsView", () => {
+  beforeEach(() => vi.clearAllMocks());
+  afterEach(() => {
+    wrapper?.unmount();
+    document.body.innerHTML = "";
+  });
+
+  it("lists the stored dashboards", async () => {
+    vi.mocked(dashboardsApi.list).mockResolvedValue({
+      data: { dashboards: [{ id: "a", name: "Prod overview", panels: [{}, {}] }] },
+    } as any);
+
+    const wrapper = mountView();
+    await flushPromises();
+
+    expect(wrapper.text()).toContain("Prod overview");
+    expect(wrapper.text()).toContain("2 panels");
+  });
+
+  it("creates a dashboard and navigates to it", async () => {
+    vi.mocked(dashboardsApi.list).mockResolvedValue({ data: { dashboards: [] } } as any);
+    vi.mocked(dashboardsApi.save).mockResolvedValue({ data: { id: "new1", name: "Fresh", panels: [] } } as any);
+
+    const w = mountView();
+    await flushPromises();
+
+    await w.find(".btn-primary").trigger("click"); // open create modal (teleported to body)
+
+    const input = document.querySelector<HTMLInputElement>(".modal-dialog input")!;
+    input.value = "Fresh";
+    input.dispatchEvent(new Event("input"));
+    await flushPromises();
+
+    const buttons = Array.from(document.querySelectorAll<HTMLButtonElement>(".modal-footer .btn-primary"));
+    buttons[buttons.length - 1].click(); // confirm create
+    await flushPromises();
+
+    expect(dashboardsApi.save).toHaveBeenCalledWith({ name: "Fresh", panels: [] });
+    expect(push).toHaveBeenCalledWith("/dashboards/new1");
+  });
+});
diff --git a/src/views/DashboardsView.vue b/src/views/DashboardsView.vue
new file mode 100644
index 0000000..09e6467
--- /dev/null
+++ b/src/views/DashboardsView.vue
@@ -0,0 +1,249 @@
+<template>
+  <div class="dashboards-view">
+    <div class="view-header">
+      <div>
+        <h1>Dashboards</h1>
+        <p class="subtitle">Build your own views over container and serving metrics.</p>
+      </div>
+      <button class="btn btn-primary" @click="showCreate = true">
+        <Icon name="plus" :size="16" />
+        New dashboard
+      </button>
+    </div>
+
+    <div v-if="loading" class="empty-state">Loading dashboards</div>
+    <div v-else-if="error" class="empty-state error">{{ error }}</div>
+    <div v-else-if="dashboards.length === 0" class="empty-state">
+      <Icon name="layout-dashboard" :size="32" />
+      <p>No dashboards yet</p>
+      <span>Create one to arrange the metrics you care about.</span>
+    </div>
+
+    <div v-else class="dashboard-grid">
+      <div v-for="d in dashboards" :key="d.id" class="dashboard-card" @click="open(d)">
+        <div class="card-main">
+          <Icon name="layout-dashboard" :size="18" />
+          <span class="card-name">{{ d.name }}</span>
+        </div>
+        <div class="card-foot">
+          <span>{{ d.panels.length }} {{ d.panels.length === 1 ? "panel" : "panels" }}</span>
+          <button class="icon-btn" title="Delete dashboard" @click.stop="remove(d)">
+            <Icon name="trash-2" :size="15" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <Teleport to="body">
+      <div v-if="showCreate" class="modal-overlay" @click.self="showCreate = false">
+        <div class="modal-dialog">
+          <div class="modal-header">
+            <h3>New dashboard</h3>
+            <button class="icon-btn" @click="showCreate = false"><Icon name="x" :size="16" /></button>
+          </div>
+          <div class="modal-body">
+            <label>Name</label>
+            <input
+              v-model="newName"
+              type="text"
+              class="form-input"
+              placeholder="Production overview"
+              @keyup.enter="create"
+            />
+          </div>
+          <div class="modal-footer">
+            <button class="btn btn-secondary" @click="showCreate = false">Cancel</button>
+            <button class="btn btn-primary" :disabled="!newName.trim() || creating" @click="create">Create</button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import Icon from "@/components/base/Icon.vue";
+import { dashboardsApi, type Dashboard } from "@/services/api";
+
+const router = useRouter();
+const dashboards = ref<Dashboard[]>([]);
+const loading = ref(false);
+const error = ref("");
+const showCreate = ref(false);
+const newName = ref("");
+const creating = ref(false);
+
+async function fetchDashboards() {
+  loading.value = true;
+  error.value = "";
+  try {
+    const { data } = await dashboardsApi.list();
+    dashboards.value = data.dashboards || [];
+  } catch (e: any) {
+    error.value = e.response?.data?.error || e.message || "Failed to load dashboards";
+  } finally {
+    loading.value = false;
+  }
+}
+
+function open(d: Dashboard) {
+  router.push(`/dashboards/${d.id}`);
+}
+
+async function create() {
+  if (!newName.value.trim()) return;
+  creating.value = true;
+  try {
+    const { data } = await dashboardsApi.save({ name: newName.value.trim(), panels: [] });
+    showCreate.value = false;
+    newName.value = "";
+    router.push(`/dashboards/${data.id}`);
+  } catch (e: any) {
+    error.value = e.response?.data?.error || e.message || "Failed to create dashboard";
+  } finally {
+    creating.value = false;
+  }
+}
+
+async function remove(d: Dashboard) {
+  if (!d.id || !confirm(`Delete dashboard "${d.name}"?`)) return;
+  try {
+    await dashboardsApi.remove(d.id);
+    dashboards.value = dashboards.value.filter((x) => x.id !== d.id);
+  } catch (e: any) {
+    error.value = e.response?.data?.error || e.message || "Failed to delete dashboard";
+  }
+}
+
+onMounted(fetchDashboards);
+</script>
+
+<style scoped>
+.dashboards-view {
+  padding: 1.5rem;
+}
+.view-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 1.5rem;
+}
+.view-header h1 {
+  margin: 0;
+  font-size: 1.5rem;
+}
+.subtitle {
+  margin: 0.25rem 0 0;
+  color: var(--text-muted);
+  font-size: 0.875rem;
+}
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 1rem;
+}
+.dashboard-card {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  background: var(--surface-raised);
+  padding: 1rem;
+  cursor: pointer;
+  transition: border-color 0.15s;
+}
+.dashboard-card:hover {
+  border-color: var(--primary, #6366f1);
+}
+.card-main {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 600;
+}
+.card-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 0.75rem;
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 3rem;
+  color: var(--text-muted);
+  text-align: center;
+}
+.empty-state.error {
+  color: var(--danger, #ef4444);
+}
+.icon-btn {
+  display: inline-flex;
+  padding: 0.25rem;
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+}
+.icon-btn:hover {
+  color: var(--text);
+}
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 1rem;
+}
+.modal-dialog {
+  background: var(--surface-raised);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xl);
+  width: 100%;
+  max-width: 420px;
+}
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid var(--border);
+}
+.modal-header h3 {
+  margin: 0;
+  font-size: 1rem;
+}
+.modal-body {
+  padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.modal-body label {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+.form-input {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  background: var(--surface-inset);
+  color: var(--text);
+  font-size: 0.875rem;
+}
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  padding: 1rem 1.25rem;
+  border-top: 1px solid var(--border);
+}
+</style>