From 3e9fbc36c7bd90da5130c3cb8702d4ce6d2a0846 Mon Sep 17 00:00:00 2001
From: Kohaku-Blueleaf <59680068+KohakuBlueleaf@users.noreply.github.com>
Date: Mon, 27 Oct 2025 03:44:13 +0800
Subject: [PATCH] Re org kohakuboard ui routes

---
 src/kohaku-board-ui/src/App.vue               |   15 +-
 src/kohaku-board-ui/src/pages/index.vue       |   82 +-
 .../src/pages/projects/[project]/[id].vue     | 1087 +++++++++++++++++
 .../src/pages/projects/[project]/index.vue    |  140 +++
 .../src/pages/projects/index.vue              |   75 ++
 src/kohaku-board-ui/src/typed-router.d.ts     |   15 +
 src/kohaku-board-ui/src/utils/api.js          |  151 ++-
 7 files changed, 1501 insertions(+), 64 deletions(-)
 create mode 100644 src/kohaku-board-ui/src/pages/projects/[project]/[id].vue
 create mode 100644 src/kohaku-board-ui/src/pages/projects/[project]/index.vue
 create mode 100644 src/kohaku-board-ui/src/pages/projects/index.vue

diff --git a/src/kohaku-board-ui/src/App.vue b/src/kohaku-board-ui/src/App.vue
index 30bb421..0ecbe1a 100644
--- a/src/kohaku-board-ui/src/App.vue
+++ b/src/kohaku-board-ui/src/App.vue
@@ -2,11 +2,13 @@
 import { ref, onMounted } from "vue";
 import { initializeSliderSync } from "@/composables/useSliderSync";
 import { useAnimationPreference } from "@/composables/useAnimationPreference";
+import { getSystemInfo } from "@/utils/api";
 
 const darkMode = ref(false);
 const { animationsEnabled, toggleAnimations } = useAnimationPreference();
+const systemInfo = ref(null);
 
-onMounted(() => {
+onMounted(async () => {
   const savedTheme = localStorage.getItem("theme");
   darkMode.value =
     savedTheme === "dark" ||
@@ -15,6 +17,13 @@ onMounted(() => {
 
   // Initialize global slider synchronization
   initializeSliderSync();
+
+  // Fetch system info for mode detection
+  try {
+    systemInfo.value = await getSystemInfo();
+  } catch (error) {
+    console.error("Failed to fetch system info:", error);
+  }
 });
 
 function toggleDarkMode() {
@@ -59,13 +68,13 @@ function updateTheme() {
               to="/"
               class="px-3 py-1.5 rounded-md text-sm font-medium transition-colors text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-blue-600 dark:hover:text-blue-400"
             >
-              Dashboard
+              Projects
             </router-link>
             <router-link
               to="/experiments"
               class="px-3 py-1.5 rounded-md text-sm font-medium transition-colors text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-blue-600 dark:hover:text-blue-400"
             >
-              Experiments
+              Experiments (Legacy)
             </router-link>
           </div>
         </div>
diff --git a/src/kohaku-board-ui/src/pages/index.vue b/src/kohaku-board-ui/src/pages/index.vue
index 0e080e2..fb1b253 100644
--- a/src/kohaku-board-ui/src/pages/index.vue
+++ b/src/kohaku-board-ui/src/pages/index.vue
@@ -1,24 +1,25 @@
 <script setup>
 import { ref, onMounted } from "vue";
-import { fetchExperiments } from "@/utils/api";
+import { fetchProjects } from "@/utils/api";
 import { useRouter } from "vue-router";
 
 const router = useRouter();
-const experiments = ref([]);
+const projects = ref([]);
 const loading = ref(true);
 
 onMounted(async () => {
   try {
-    experiments.value = await fetchExperiments();
+    const result = await fetchProjects();
+    projects.value = result.projects;
   } catch (error) {
-    console.error("Failed to fetch experiments:", error);
+    console.error("Failed to fetch projects:", error);
   } finally {
     loading.value = false;
   }
 });
 
-function viewExperiment(id) {
-  router.push(`/experiments/${id}`);
+function viewProject(projectName) {
+  router.push(`/projects/${projectName}`);
 }
 
 function formatDate(timestamp) {
@@ -47,76 +48,37 @@ function formatSteps(steps) {
     </div>
 
     <div v-if="loading" class="text-center py-12">
-      <div class="text-gray-500 dark:text-gray-400">Loading experiments...</div>
+      <div class="text-gray-500 dark:text-gray-400">Loading projects...</div>
     </div>
 
     <div
-      v-else-if="experiments.length === 0"
+      v-else-if="projects.length === 0"
       class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-8 text-center border border-gray-200 dark:border-gray-800"
     >
-      <div class="text-gray-500 dark:text-gray-400 mb-4">No boards found</div>
+      <div class="text-gray-500 dark:text-gray-400 mb-4">No projects found</div>
       <p class="text-sm text-gray-400 dark:text-gray-500">
         Start tracking your ML experiments with KohakuBoard client library.
-        <br />
-        Boards are automatically discovered from:
-        <code class="bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded"
-          >./kohakuboard</code
-        >
       </p>
     </div>
 
     <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
       <div
-        v-for="experiment in experiments"
-        :key="experiment.id"
-        @click="viewExperiment(experiment.id)"
-        class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-4 cursor-pointer hover:shadow-lg transition-all border border-gray-200 dark:border-gray-800 hover:border-blue-400 dark:hover:border-blue-600"
+        v-for="project in projects"
+        :key="project.name"
+        @click="viewProject(project.name)"
+        class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-6 cursor-pointer hover:shadow-lg transition-all border border-gray-200 dark:border-gray-800 hover:border-blue-400 dark:hover:border-blue-600"
       >
-        <div class="flex items-start justify-between mb-3">
-          <h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100">
-            {{ experiment.name }}
-          </h3>
-          <span
-            class="px-2 py-1 text-xs rounded font-medium"
-            :class="{
-              'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400':
-                experiment.status === 'completed',
-              'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400':
-                experiment.status === 'running',
-              'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-400':
-                experiment.status === 'stopped',
-            }"
-          >
-            {{ experiment.status }}
-          </span>
+        <h3 class="font-semibold text-xl text-gray-900 dark:text-gray-100 mb-2">
+          {{ project.display_name }}
+        </h3>
+        <div class="text-gray-600 dark:text-gray-400 mb-4">
+          {{ project.run_count }} {{ project.run_count === 1 ? "run" : "runs" }}
         </div>
-
-        <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
-          {{ experiment.description }}
-        </p>
-
-        <div class="grid grid-cols-2 gap-2 text-sm">
-          <div>
-            <div class="text-gray-500 dark:text-gray-500">Board ID</div>
-            <div
-              class="font-mono text-xs text-gray-900 dark:text-gray-100 truncate"
-              :title="experiment.id"
-            >
-              {{ experiment.id }}
-            </div>
-          </div>
-          <div>
-            <div class="text-gray-500 dark:text-gray-500">Status</div>
-            <div class="font-medium text-gray-900 dark:text-gray-100">
-              {{ experiment.status }}
-            </div>
-          </div>
-        </div>
-
         <div
-          class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-800 text-xs text-gray-500 dark:text-gray-500"
+          v-if="project.updated_at"
+          class="text-xs text-gray-500 dark:text-gray-500"
         >
-          Created: {{ formatDate(experiment.created_at) }}
+          Updated: {{ formatDate(project.updated_at) }}
         </div>
       </div>
     </div>
diff --git a/src/kohaku-board-ui/src/pages/projects/[project]/[id].vue b/src/kohaku-board-ui/src/pages/projects/[project]/[id].vue
new file mode 100644
index 0000000..eb2139f
--- /dev/null
+++ b/src/kohaku-board-ui/src/pages/projects/[project]/[id].vue
@@ -0,0 +1,1087 @@
+<script setup>
+import { VueDraggable } from "vue-draggable-plus";
+import ConfigurableChartCard from "@/components/ConfigurableChartCard.vue";
+import { useAnimationPreference } from "@/composables/useAnimationPreference";
+import { useHoverSync } from "@/composables/useHoverSync";
+
+const route = useRoute();
+const { animationsEnabled } = useAnimationPreference();
+const { hoverSyncEnabled, toggleHoverSync } = useHoverSync();
+const metricDataCache = ref({});
+const availableMetrics = ref([]);
+
+const tabs = ref([{ name: "Metrics", cards: [] }]);
+const activeTab = ref("Metrics");
+const nextCardId = ref(1);
+const isEditingTabs = ref(false);
+const isUpdating = ref(false);
+const showAddTabDialog = ref(false);
+const newTabName = ref("");
+const showGlobalSettings = ref(false);
+
+// Pagination for WebGL context limit
+const currentPage = ref(0);
+const isMobile = ref(window.innerWidth <= 900); // Match CSS breakpoint
+
+// Realtime responsive detection
+const mediaQuery = window.matchMedia("(max-width: 900px)");
+const handleResize = (e) => {
+  isMobile.value = e.matches;
+  currentPage.value = 0; // Reset to first page when switching mobile/desktop
+};
+
+onMounted(() => {
+  mediaQuery.addEventListener("change", handleResize);
+});
+
+onUnmounted(() => {
+  mediaQuery.removeEventListener("change", handleResize);
+});
+
+// Global settings (apply to all cards in current tab)
+const globalSettings = ref({
+  xAxis: "global_step",
+  smoothing: "disabled",
+  smoothingValue: 0.9,
+  histogramMode: "flow",
+  downsampleRate: -1, // -1 = adaptive
+});
+
+const storageKey = computed(
+  () => `experiment-layout-${route.params.project}-${route.params.id}`,
+);
+
+onMounted(async () => {
+  try {
+    const projectName = route.params.project;
+    const runId = route.params.id;
+
+    // Fetch summary using new project-based API
+    const summaryResponse = await fetch(
+      `/api/projects/${projectName}/runs/${runId}/summary`,
+    );
+    const summary = await summaryResponse.json();
+
+    // Fetch available scalars
+    const scalarsResponse = await fetch(
+      `/api/projects/${projectName}/runs/${runId}/scalars`,
+    );
+    const scalarsData = await scalarsResponse.json();
+    availableMetrics.value = scalarsData.metrics;
+
+    // Add computed time metrics (will be calculated after fetching timestamp)
+    // These are not in the backend, but calculated on frontend
+    if (availableMetrics.value.includes("timestamp")) {
+      availableMetrics.value.push("walltime");
+      availableMetrics.value.push("relative_walltime");
+    }
+
+    // Try to load saved layout
+    const saved = localStorage.getItem(storageKey.value);
+    if (saved) {
+      const layout = JSON.parse(saved);
+      tabs.value = layout.tabs;
+      activeTab.value = layout.activeTab;
+      nextCardId.value = layout.nextCardId;
+
+      // Load global settings if saved
+      if (layout.globalSettings) {
+        globalSettings.value = layout.globalSettings;
+      }
+    } else {
+      // Default: one card per scalar metric + examples of other types
+      const cards = [];
+      let cardId = 1;
+
+      // Metrics that should NOT have default charts (only for axis selection)
+      const axisOnlyMetrics = new Set([
+        "step",
+        "global_step",
+        "timestamp",
+        "walltime",
+        "relative_walltime",
+      ]);
+
+      // Group metrics by namespace (before "/" is namespace)
+      const metricsByNamespace = new Map();
+      metricsByNamespace.set("", []); // Main namespace
+
+      for (const metric of summary.available_data.scalars) {
+        // Skip axis-only metrics - they shouldn't get default charts
+        if (axisOnlyMetrics.has(metric)) {
+          continue;
+        }
+
+        const slashIdx = metric.indexOf("/");
+        if (slashIdx > 0) {
+          // Has namespace: "train/loss" -> namespace="train", name="loss"
+          const namespace = metric.substring(0, slashIdx);
+          if (!metricsByNamespace.has(namespace)) {
+            metricsByNamespace.set(namespace, []);
+          }
+          metricsByNamespace.get(namespace).push(metric);
+        } else {
+          // No namespace, goes to main
+          metricsByNamespace.get("").push(metric);
+        }
+      }
+
+      // Create cards for main namespace
+      for (const metric of metricsByNamespace.get("")) {
+        cards.push({
+          id: `card-${cardId++}`,
+          config: {
+            type: "line",
+            title: metric,
+            widthPercent: 33,
+            height: 400,
+            xMetric: "step", // Will be updated to global_step if used
+            yMetrics: [metric],
+          },
+        });
+      }
+
+      tabs.value[0].cards = cards;
+
+      // Create tabs for each namespace (scalars + tables + histograms)
+      const tabsByNamespace = new Map();
+
+      // Add scalar metrics to tabs
+      for (const [namespace, metrics] of metricsByNamespace.entries()) {
+        if (namespace !== "") {
+          if (!tabsByNamespace.has(namespace)) {
+            tabsByNamespace.set(namespace, []);
+          }
+          for (const metric of metrics) {
+            tabsByNamespace.get(namespace).push({
+              id: `card-${cardId++}`,
+              config: {
+                type: "line",
+                title: metric,
+                widthPercent: 33,
+                height: 400,
+                xMetric: "step",
+                yMetrics: [metric],
+              },
+            });
+          }
+        }
+      }
+
+      // Add tables to namespace tabs
+      for (const tableName of summary.available_tables || []) {
+        const slashIdx = tableName.indexOf("/");
+        if (slashIdx > 0) {
+          const namespace = tableName.substring(0, slashIdx);
+          if (!tabsByNamespace.has(namespace)) {
+            tabsByNamespace.set(namespace, []);
+          }
+          tabsByNamespace.get(namespace).push({
+            id: `card-${cardId++}`,
+            config: {
+              type: "table",
+              title: tableName,
+              widthPercent: 50,
+              height: 400,
+              tableName: tableName,
+              currentStep: 0,
+            },
+          });
+        }
+      }
+
+      // Add histograms to namespace tabs
+      for (const histName of summary.available_histograms || []) {
+        const slashIdx = histName.indexOf("/");
+        if (slashIdx > 0) {
+          const namespace = histName.substring(0, slashIdx);
+          if (!tabsByNamespace.has(namespace)) {
+            tabsByNamespace.set(namespace, []);
+          }
+
+          // Default to flow mode for gradients/params
+          const defaultMode =
+            namespace === "gradients" || namespace === "params"
+              ? "flow"
+              : "single";
+
+          tabsByNamespace.get(namespace).push({
+            id: `card-${cardId++}`,
+            config: {
+              type: "histogram",
+              title: histName,
+              widthPercent: 33,
+              height: 400,
+              histogramName: histName,
+              currentStep: 0,
+              histogramMode: defaultMode, // Add mode to config
+            },
+          });
+        }
+      }
+
+      // Create tabs from collected cards
+      for (const [namespace, namespaceCards] of tabsByNamespace.entries()) {
+        if (namespaceCards.length > 0) {
+          tabs.value.push({ name: namespace, cards: namespaceCards });
+        }
+      }
+
+      // Media/tables/histograms without namespace go to main tab
+      for (const mediaName of summary.available_media || []) {
+        if (!mediaName.includes("/")) {
+          cards.push({
+            id: `card-${cardId++}`,
+            config: {
+              type: "media",
+              title: mediaName,
+              widthPercent: 33,
+              height: 400,
+              mediaName: mediaName,
+              currentStep: 0,
+            },
+          });
+        }
+      }
+
+      for (const tableName of summary.available_tables || []) {
+        if (!tableName.includes("/")) {
+          cards.push({
+            id: `card-${cardId++}`,
+            config: {
+              type: "table",
+              title: tableName,
+              widthPercent: 50,
+              height: 400,
+              tableName: tableName,
+              currentStep: 0,
+            },
+          });
+        }
+      }
+
+      for (const histName of summary.available_histograms || []) {
+        if (!histName.includes("/")) {
+          cards.push({
+            id: `card-${cardId++}`,
+            config: {
+              type: "histogram",
+              title: histName,
+              widthPercent: 33,
+              height: 400,
+              histogramName: histName,
+              currentStep: 0,
+            },
+          });
+        }
+      }
+
+      tabs.value[0].cards = cards;
+      nextCardId.value = cardId;
+    }
+
+    // Fetch all metrics needed by visible cards
+    await fetchMetricsForTab();
+
+    // Determine default x-axis (prefer global_step if it's used, otherwise step)
+    await determineDefaultXAxis();
+  } catch (error) {
+    console.error("Failed to load experiment:", error);
+  }
+});
+
+async function determineDefaultXAxis() {
+  // Check if global_step has any non-zero values
+  try {
+    const projectName = route.params.project;
+    const runId = route.params.id;
+    const response = await fetch(
+      `/api/projects/${projectName}/runs/${runId}/scalars/global_step`,
+    );
+    const result = await response.json();
+
+    // Check if any global_step value is non-zero
+    const hasNonZeroGlobalStep = result.data.some(
+      (item) => item.value !== 0 && item.value !== null,
+    );
+
+    // Update all cards to use global_step if it's being used
+    if (hasNonZeroGlobalStep) {
+      for (const tab of tabs.value) {
+        for (const card of tab.cards) {
+          if (card.config.type === "line" || !card.config.type) {
+            if (card.config.xMetric === "step") {
+              card.config.xMetric = "global_step";
+            }
+          }
+        }
+      }
+      saveLayout();
+    }
+  } catch (error) {
+    console.error("Failed to determine default x-axis:", error);
+  }
+}
+
+async function fetchMetricsForTab() {
+  try {
+    const tab = tabs.value.find((t) => t.name === activeTab.value);
+    if (!tab) return;
+
+    // Metrics that are computed on frontend (don't fetch from API)
+    const computedMetrics = new Set(["walltime", "relative_walltime"]);
+
+    const neededMetrics = new Set();
+    for (const card of tab.cards) {
+      // Only fetch for line plot cards
+      if (card.config.type === "line" || !card.config.type) {
+        if (card.config.xMetric && !computedMetrics.has(card.config.xMetric)) {
+          neededMetrics.add(card.config.xMetric);
+        }
+        if (card.config.yMetrics) {
+          for (const yMetric of card.config.yMetrics) {
+            if (!computedMetrics.has(yMetric)) {
+              neededMetrics.add(yMetric);
+            }
+          }
+        }
+      }
+    }
+
+    // Fetch missing metrics
+    const projectName = route.params.project;
+    const runId = route.params.id;
+
+    for (const metric of neededMetrics) {
+      if (!metricDataCache.value[metric]) {
+        try {
+          // URL-encode metric name (e.g., "train/loss" -> "train%2Floss")
+          const encodedMetric = encodeURIComponent(metric);
+          const response = await fetch(
+            `/api/projects/${projectName}/runs/${runId}/scalars/${encodedMetric}`,
+          );
+
+          if (!response.ok) {
+            console.warn(`Failed to fetch ${metric}: ${response.status}`);
+            // Set empty array so card can still render (just shows "no data")
+            metricDataCache.value[metric] = [];
+            continue;
+          }
+
+          const result = await response.json();
+
+          // Convert step-value pairs to sparse array
+          const sparseArray = new Array(
+            result.data[result.data.length - 1]?.step + 1 || 0,
+          ).fill(null);
+          for (const item of result.data) {
+            sparseArray[item.step] = item.value;
+          }
+
+          metricDataCache.value[metric] = sparseArray;
+
+          // Also store timestamp data if available
+          if (result.data[0]?.timestamp) {
+            const timestampArray = new Array(sparseArray.length).fill(null);
+            for (const item of result.data) {
+              timestampArray[item.step] = item.timestamp;
+            }
+            metricDataCache.value[`${metric}_timestamp`] = timestampArray;
+          }
+        } catch (error) {
+          console.error(`Failed to fetch metric ${metric}:`, error);
+          // Set empty array so card can still render
+          metricDataCache.value[metric] = [];
+        }
+      }
+    }
+
+    // Calculate walltime and relative_walltime from timestamps
+    if (metricDataCache.value.timestamp) {
+      const timestamps = metricDataCache.value.timestamp;
+      const walltime = [];
+      const relativeWalltime = [];
+      let startTime = null;
+
+      for (let i = 0; i < timestamps.length; i++) {
+        if (timestamps[i]) {
+          const ts = new Date(timestamps[i]).getTime() / 1000; // Convert to seconds
+          walltime[i] = ts;
+
+          if (startTime === null) {
+            startTime = ts;
+            relativeWalltime[i] = 0;
+          } else {
+            relativeWalltime[i] = ts - startTime;
+          }
+        } else {
+          walltime[i] = null;
+          relativeWalltime[i] = null;
+        }
+      }
+
+      metricDataCache.value.walltime = walltime;
+      metricDataCache.value.relative_walltime = relativeWalltime;
+    }
+  } catch (error) {
+    console.error("Error in fetchMetricsForTab:", error);
+    // Don't throw - allow page to render with partial data
+  }
+}
+
+const sparseData = computed(() => {
+  const data = { time: metricDataCache.value.step || [] };
+  for (const [key, values] of Object.entries(metricDataCache.value)) {
+    data[key] = values;
+  }
+  return data;
+});
+
+const currentTabCards = computed({
+  get() {
+    const tab = tabs.value.find((t) => t.name === activeTab.value);
+    return tab ? tab.cards : [];
+  },
+  set(newCards) {
+    const tab = tabs.value.find((t) => t.name === activeTab.value);
+    if (tab) {
+      tab.cards = newCards;
+      saveLayout();
+    }
+  },
+});
+
+// Pagination
+const webglChartsPerPage = computed(() => (isMobile.value ? 2 : 12));
+const defaultCardHeight = computed(() => (isMobile.value ? 280 : 400));
+
+const paginatedCards = computed(() => {
+  const allCards = currentTabCards.value;
+
+  // Count WebGL charts (line and histogram)
+  let webglCount = 0;
+  let pageCards = [];
+  let currentPageCards = [];
+
+  for (const card of allCards) {
+    const isWebGL =
+      card.config.type === "line" || card.config.type === "histogram";
+
+    if (isWebGL) {
+      webglCount++;
+      if (webglCount > webglChartsPerPage.value) {
+        pageCards.push(currentPageCards);
+        currentPageCards = [card];
+        webglCount = 1;
+      } else {
+        currentPageCards.push(card);
+      }
+    } else {
+      currentPageCards.push(card);
+    }
+  }
+
+  if (currentPageCards.length > 0) {
+    pageCards.push(currentPageCards);
+  }
+
+  return pageCards;
+});
+
+const totalPages = computed(() => paginatedCards.value.length);
+
+const visibleCards = computed(() => {
+  if (paginatedCards.value.length === 0) return [];
+  const page = Math.min(currentPage.value, paginatedCards.value.length - 1);
+  return paginatedCards.value[page] || [];
+});
+
+watch(activeTab, () => {
+  currentPage.value = 0;
+  fetchMetricsForTab();
+  saveLayout();
+});
+
+function saveLayout() {
+  const layout = {
+    tabs: tabs.value,
+    activeTab: activeTab.value,
+    nextCardId: nextCardId.value,
+    globalSettings: globalSettings.value,
+  };
+  localStorage.setItem(storageKey.value, JSON.stringify(layout));
+}
+
+function addCard() {
+  const tab = tabs.value.find((t) => t.name === activeTab.value);
+  if (!tab) return;
+
+  const newCard = {
+    id: `card-${nextCardId.value++}`,
+    config: {
+      title: `Chart ${nextCardId.value - 1}`,
+      widthPercent: 33,
+      height: 400,
+      xMetric: "step",
+      yMetrics: [],
+    },
+  };
+  tab.cards.push(newCard);
+  saveLayout();
+}
+
+function addTab() {
+  showAddTabDialog.value = true;
+  newTabName.value = "";
+}
+
+function confirmAddTab() {
+  if (newTabName.value.trim()) {
+    tabs.value.push({ name: newTabName.value.trim(), cards: [] });
+    saveLayout();
+    showAddTabDialog.value = false;
+    newTabName.value = "";
+  }
+}
+
+function removeTab(tabName) {
+  if (tabs.value.length <= 1) {
+    ElMessage.warning("Cannot remove the last tab");
+    return;
+  }
+  tabs.value = tabs.value.filter((t) => t.name !== tabName);
+  if (activeTab.value === tabName) {
+    activeTab.value = tabs.value[0].name;
+  }
+  saveLayout();
+}
+
+function calculateRows(cards) {
+  const rows = [];
+  let currentRow = [];
+  let rowWidth = 0;
+
+  for (let i = 0; i < cards.length; i++) {
+    const w = cards[i].config.widthPercent || 100;
+    if (rowWidth > 0 && rowWidth + w > 102) {
+      rows.push([...currentRow]);
+      currentRow = [];
+      rowWidth = 0;
+    }
+    currentRow.push(i);
+    rowWidth += w;
+  }
+  if (currentRow.length > 0) rows.push(currentRow);
+  return rows;
+}
+
+function updateCard({ id, config, syncAll, realtime }) {
+  if (!config) return;
+
+  const currentTab = tabs.value.find((t) => t.name === activeTab.value);
+  if (!currentTab) return;
+
+  const cardIndex = currentTab.cards.findIndex((c) => c.id === id);
+  if (cardIndex === -1) return;
+
+  const oldConfig = currentTab.cards[cardIndex].config;
+  const heightChanged = oldConfig.height !== config.height;
+  const widthChanged = oldConfig.widthPercent !== config.widthPercent;
+
+  // If syncAll flag is set (shift+resize), update ALL cards in tab
+  if (syncAll) {
+    // During realtime drag, skip if already updating to prevent jank
+    if (realtime && isUpdating.value) return;
+
+    // Only set updating flag for final update, not realtime
+    if (!realtime) {
+      if (isUpdating.value) return;
+      isUpdating.value = true;
+    }
+
+    try {
+      for (let i = 0; i < currentTab.cards.length; i++) {
+        const updates = {};
+        if (heightChanged) updates.height = config.height;
+        if (widthChanged) updates.widthPercent = config.widthPercent;
+
+        if (Object.keys(updates).length > 0) {
+          currentTab.cards[i].config = {
+            ...currentTab.cards[i].config,
+            ...updates,
+          };
+        }
+      }
+    } finally {
+      if (!realtime) {
+        nextTick(() => {
+          isUpdating.value = false;
+          saveLayout();
+        });
+      }
+    }
+    return;
+  }
+
+  currentTab.cards[cardIndex].config = config;
+
+  if (isUpdating.value) return;
+  isUpdating.value = true;
+
+  try {
+    if (heightChanged && !widthChanged) {
+      const rows = calculateRows(currentTab.cards);
+      const currentRow = rows.find((row) => row.includes(cardIndex));
+
+      if (currentRow && currentRow.length > 1) {
+        for (const idx of currentRow) {
+          if (idx !== cardIndex) {
+            currentTab.cards[idx].config = {
+              ...currentTab.cards[idx].config,
+              height: config.height,
+            };
+          }
+        }
+      }
+    } else if (widthChanged) {
+      const rows = calculateRows(currentTab.cards);
+
+      // Sync all rows (because width change can cause passive row wrapping)
+      for (const row of rows) {
+        if (row.length > 1) {
+          // Determine the target height for this row
+          // Priority: use height of existing cards (excluding the actively resized one if in this row)
+          const isActiveCardInRow = row.includes(cardIndex);
+
+          let targetHeight = null;
+
+          // First, try to find height from other cards (not the actively resized one)
+          const otherCards = row.filter((idx) => idx !== cardIndex);
+          if (otherCards.length > 0) {
+            // Use the first other card's height as the row's target height
+            targetHeight = currentTab.cards[otherCards[0]].config.height;
+          } else if (isActiveCardInRow) {
+            // If this row only has the actively resized card, use its current height
+            targetHeight = currentTab.cards[cardIndex].config.height;
+          }
+
+          if (targetHeight !== null) {
+            // Sync all cards in this row to the target height
+            for (const idx of row) {
+              if (currentTab.cards[idx].config.height !== targetHeight) {
+                console.log(
+                  `[Card ${idx}] Width change caused row wrap, syncing to row height: ${targetHeight}px`,
+                );
+                currentTab.cards[idx].config = {
+                  ...currentTab.cards[idx].config,
+                  height: targetHeight,
+                };
+              }
+            }
+          }
+        }
+      }
+    }
+  } finally {
+    nextTick(() => {
+      isUpdating.value = false;
+      saveLayout();
+    });
+  }
+}
+
+function removeCard(id) {
+  const tab = tabs.value.find((t) => t.name === activeTab.value);
+  if (tab) {
+    tab.cards = tab.cards.filter((c) => c.id !== id);
+    saveLayout();
+  }
+}
+
+// Global settings functions
+const hasCustomSettings = computed(() => {
+  const tab = tabs.value.find((t) => t.name === activeTab.value);
+  if (!tab) return false;
+
+  // Check if any card has custom settings different from global
+  return tab.cards.some((card) => {
+    if (card.config.type === "line") {
+      return (
+        card.config.xMetric !== globalSettings.value.xAxis ||
+        (card.config.smoothingMode !== undefined &&
+          card.config.smoothingMode !== globalSettings.value.smoothing)
+      );
+    }
+    if (card.config.type === "histogram") {
+      return (
+        card.config.histogramMode !== undefined &&
+        card.config.histogramMode !== globalSettings.value.histogramMode
+      );
+    }
+    return false;
+  });
+});
+
+function applyGlobalSettings() {
+  const tabIndex = tabs.value.findIndex((t) => t.name === activeTab.value);
+  if (tabIndex === -1) return;
+
+  // Create completely new tab object to force Vue reactivity
+  const newCards = tabs.value[tabIndex].cards.map((card) => {
+    const newConfig = { ...card.config };
+
+    if (card.config.type === "line") {
+      newConfig.xMetric = globalSettings.value.xAxis;
+      newConfig.smoothingMode = globalSettings.value.smoothing;
+      newConfig.smoothingValue = globalSettings.value.smoothingValue;
+      newConfig.downsampleRate = globalSettings.value.downsampleRate;
+    } else if (card.config.type === "histogram") {
+      newConfig.histogramMode = globalSettings.value.histogramMode;
+    }
+
+    return {
+      ...card,
+      config: newConfig,
+    };
+  });
+
+  // Replace entire tabs array to trigger reactivity
+  tabs.value = [
+    ...tabs.value.slice(0, tabIndex),
+    { ...tabs.value[tabIndex], cards: newCards },
+    ...tabs.value.slice(tabIndex + 1),
+  ];
+
+  nextTick(() => {
+    saveLayout();
+    showGlobalSettings.value = false;
+    ElMessage.success("Applied global settings to all cards");
+  });
+}
+
+function onDragEnd(evt) {
+  console.log("[DragEnd] Syncing heights after drag", evt);
+  const currentTab = tabs.value.find((t) => t.name === activeTab.value);
+  if (!currentTab) return;
+
+  const draggedIndex = evt.newIndex;
+  const oldIndex = evt.oldIndex;
+
+  if (draggedIndex === undefined || oldIndex === undefined) {
+    saveLayout();
+    return;
+  }
+
+  // Calculate rows after the drag
+  const newRows = calculateRows(currentTab.cards);
+
+  // Sync ALL rows that have multiple cards
+  for (const row of newRows) {
+    if (row.length > 1) {
+      // Find the "dominant" height: the most common height among cards in this row
+      const heightCounts = {};
+
+      for (const idx of row) {
+        const h = currentTab.cards[idx].config.height;
+        heightCounts[h] = (heightCounts[h] || 0) + 1;
+      }
+
+      // Find the most common height (the row's "original" height)
+      let dominantHeight = null;
+      let maxCount = 0;
+
+      for (const [height, count] of Object.entries(heightCounts)) {
+        if (count > maxCount) {
+          maxCount = count;
+          dominantHeight = parseInt(height);
+        }
+      }
+
+      if (dominantHeight !== null) {
+        // Sync ALL cards in this row to the dominant height
+        for (const idx of row) {
+          if (currentTab.cards[idx].config.height !== dominantHeight) {
+            const cardLabel = idx === draggedIndex ? "(dragged)" : "(in-row)";
+            console.log(
+              `[DragEnd] Card ${idx} ${cardLabel} syncing to dominant row height: ${dominantHeight}px`,
+            );
+            currentTab.cards[idx].config = {
+              ...currentTab.cards[idx].config,
+              height: dominantHeight,
+            };
+          }
+        }
+      }
+    }
+  }
+
+  saveLayout();
+}
+</script>
+
+<template>
+  <div class="container-main">
+    <div class="mb-6">
+      <!-- Desktop layout -->
+      <div v-if="!isMobile" class="flex items-center justify-between">
+        <div>
+          <h1 class="text-3xl font-bold">Run: {{ route.params.id }}</h1>
+          <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
+            Project: {{ route.params.project }}
+          </p>
+        </div>
+        <div class="flex gap-2">
+          <router-link
+            :to="`/projects/${route.params.project}`"
+            class="px-3 py-1.5 bg-gray-600 hover:bg-gray-700 text-white rounded text-sm"
+          >
+            ← Back
+          </router-link>
+          <el-button type="primary" size="small" @click="addCard"
+            >Add Chart</el-button
+          >
+          <el-button size="small" @click="addTab">Add Tab</el-button>
+          <el-button size="small" @click="isEditingTabs = !isEditingTabs">
+            {{ isEditingTabs ? "Done Editing" : "Edit Tabs" }}
+          </el-button>
+        </div>
+      </div>
+
+      <!-- Mobile layout -->
+      <div v-else>
+        <h1 class="text-xl font-bold mb-1">Run: {{ route.params.id }}</h1>
+        <p class="text-xs text-gray-500 dark:text-gray-400 mb-3">
+          Project: {{ route.params.project }}
+        </p>
+        <div class="flex gap-2">
+          <router-link
+            :to="`/projects/${route.params.project}`"
+            class="px-3 py-1.5 bg-gray-600 hover:bg-gray-700 text-white rounded text-sm"
+          >
+            ← Back
+          </router-link>
+          <el-button type="primary" size="small" @click="addCard" class="flex-1"
+            >Add Chart</el-button
+          >
+          <el-button size="small" @click="addTab">Add Tab</el-button>
+          <el-button size="small" @click="isEditingTabs = !isEditingTabs">
+            {{ isEditingTabs ? "Done" : "Edit" }}
+          </el-button>
+        </div>
+      </div>
+    </div>
+
+    <el-tabs v-model="activeTab" type="card">
+      <el-tab-pane
+        v-for="tab in tabs"
+        :key="tab.name"
+        :label="tab.name"
+        :name="tab.name"
+      >
+        <template #label>
+          <div class="flex items-center gap-2">
+            <span>{{ tab.name }}</span>
+            <!-- Hover sync toggle button for active tab -->
+            <el-button
+              v-if="tab.name === activeTab && !isEditingTabs"
+              size="small"
+              circle
+              @click.stop="toggleHoverSync"
+              :title="
+                hoverSyncEnabled ? 'Disable Hover Sync' : 'Enable Hover Sync'
+              "
+              :type="hoverSyncEnabled ? 'primary' : 'default'"
+            >
+              <i
+                :class="
+                  hoverSyncEnabled ? 'i-ep-connection' : 'i-ep-connection'
+                "
+              ></i>
+            </el-button>
+            <!-- Global settings button for active tab -->
+            <el-button
+              v-if="tab.name === activeTab && !isEditingTabs"
+              size="small"
+              circle
+              @click.stop="showGlobalSettings = true"
+              title="Global Tab Settings"
+            >
+              <i class="i-ep-setting"></i>
+            </el-button>
+            <!-- Remove tab button (edit mode) -->
+            <el-button
+              v-if="isEditingTabs && tabs.length > 1"
+              icon="Close"
+              size="small"
+              text
+              type="danger"
+              @click.stop="removeTab(tab.name)"
+            />
+          </div>
+        </template>
+      </el-tab-pane>
+    </el-tabs>
+
+    <!-- Pagination controls (if needed) -->
+    <div
+      v-if="totalPages > 1"
+      class="flex items-center justify-center gap-4 mb-4"
+    >
+      <el-button
+        size="small"
+        :disabled="currentPage === 0"
+        @click="currentPage--"
+        icon="ArrowLeft"
+      >
+        Previous
+      </el-button>
+      <span class="text-sm text-gray-600 dark:text-gray-400">
+        Page {{ currentPage + 1 }} / {{ totalPages }}
+        <span class="text-xs ml-2">
+          ({{ visibleCards.length }} charts, max {{ webglChartsPerPage }} WebGL
+          per page)
+        </span>
+      </span>
+      <el-button
+        size="small"
+        :disabled="currentPage >= totalPages - 1"
+        @click="currentPage++"
+        icon="ArrowRight"
+      >
+        Next
+      </el-button>
+    </div>
+
+    <VueDraggable
+      v-model="currentTabCards"
+      :animation="animationsEnabled ? 200 : 0"
+      handle=".card-drag-handle"
+      class="flex flex-wrap gap-4"
+      @end="onDragEnd"
+    >
+      <ConfigurableChartCard
+        v-for="card in visibleCards"
+        :key="card.id"
+        :card-id="card.id"
+        :experiment-id="route.params.id"
+        :sparse-data="sparseData"
+        :available-metrics="availableMetrics"
+        :initial-config="{
+          ...card.config,
+          height: isMobile ? defaultCardHeight : card.config.height,
+        }"
+        :tab-name="activeTab"
+        :hover-sync-enabled="hoverSyncEnabled"
+        @update:config="updateCard"
+        @remove="removeCard(card.id)"
+      />
+    </VueDraggable>
+
+    <el-empty
+      v-if="currentTabCards.length === 0"
+      description="No charts in this tab"
+    >
+      <el-button type="primary" @click="addCard">Add Chart</el-button>
+    </el-empty>
+
+    <el-dialog v-model="showAddTabDialog" title="Add Tab" width="400px">
+      <el-form @submit.prevent="confirmAddTab">
+        <el-form-item label="Tab Name">
+          <el-input
+            v-model="newTabName"
+            placeholder="Enter tab name"
+            @keyup.enter="confirmAddTab"
+            autofocus
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="showAddTabDialog = false">Cancel</el-button>
+        <el-button type="primary" @click="confirmAddTab">Add</el-button>
+      </template>
+    </el-dialog>
+
+    <!-- Global Tab Settings Dialog -->
+    <el-dialog
+      v-model="showGlobalSettings"
+      title="Global Tab Settings"
+      width="600px"
+    >
+      <el-alert
+        v-if="hasCustomSettings"
+        type="warning"
+        :closable="false"
+        class="mb-4"
+      >
+        <template #title> Some cards have custom settings </template>
+        Click "Apply to All Cards" below to reset all cards to these global
+        settings
+      </el-alert>
+
+      <el-form label-width="160px">
+        <el-divider content-position="left">Line Chart Settings</el-divider>
+
+        <el-form-item label="X-Axis">
+          <el-select v-model="globalSettings.xAxis" class="w-full">
+            <el-option
+              v-for="metric in availableMetrics"
+              :key="metric"
+              :label="metric"
+              :value="metric"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="Smoothing">
+          <el-select v-model="globalSettings.smoothing" class="w-full">
+            <el-option label="Disabled" value="disabled" />
+            <el-option label="EMA" value="ema" />
+            <el-option label="Moving Average" value="ma" />
+            <el-option label="Gaussian" value="gaussian" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item
+          v-if="globalSettings.smoothing !== 'disabled'"
+          label="Smoothing Value"
+        >
+          <el-input-number
+            v-model="globalSettings.smoothingValue"
+            :min="0"
+            :max="globalSettings.smoothing === 'ema' ? 1 : 1000"
+            :step="globalSettings.smoothing === 'ema' ? 0.01 : 1"
+            class="w-full"
+          />
+        </el-form-item>
+
+        <el-form-item label="Downsample Rate">
+          <el-input-number
+            v-model="globalSettings.downsampleRate"
+            :min="-1"
+            :max="100"
+            class="w-full"
+          />
+          <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">
+            -1 = Adaptive (recommended), 1 = No downsampling
+          </div>
+        </el-form-item>
+
+        <el-divider content-position="left">Histogram Settings</el-divider>
+
+        <el-form-item label="Histogram Mode">
+          <el-select v-model="globalSettings.histogramMode" class="w-full">
+            <el-option label="Single Step" value="single" />
+            <el-option label="Distribution Flow" value="flow" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <el-button @click="showGlobalSettings = false">Cancel</el-button>
+        <el-button type="primary" @click="applyGlobalSettings">
+          Apply to All Cards
+        </el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
diff --git a/src/kohaku-board-ui/src/pages/projects/[project]/index.vue b/src/kohaku-board-ui/src/pages/projects/[project]/index.vue
new file mode 100644
index 0000000..d5bb268
--- /dev/null
+++ b/src/kohaku-board-ui/src/pages/projects/[project]/index.vue
@@ -0,0 +1,140 @@
+<script setup>
+import { ref, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { fetchProjectRuns } from "@/utils/api";
+
+const route = useRoute();
+const router = useRouter();
+const project = ref(route.params.project);
+const runs = ref([]);
+const loading = ref(true);
+const projectOwner = ref(null);
+
+onMounted(async () => {
+  try {
+    const result = await fetchProjectRuns(project.value);
+    runs.value = result.runs;
+    projectOwner.value = result.owner;
+  } catch (error) {
+    console.error("Failed to fetch runs:", error);
+  } finally {
+    loading.value = false;
+  }
+});
+
+function viewRun(runId) {
+  // Use the main experiments viewer (the most important page!)
+  router.push(`/experiments/${runId}`);
+}
+
+function formatDate(timestamp) {
+  if (!timestamp) return "N/A";
+  return new Date(timestamp).toLocaleString();
+}
+
+function formatSize(bytes) {
+  if (!bytes) return "N/A";
+  const mb = bytes / 1024 / 1024;
+  if (mb < 1) return `${(bytes / 1024).toFixed(1)} KB`;
+  if (mb < 1024) return `${mb.toFixed(1)} MB`;
+  return `${(mb / 1024).toFixed(2)} GB`;
+}
+</script>
+
+<template>
+  <div>
+    <div class="flex items-center justify-between mb-6">
+      <div>
+        <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100">
+          {{ project }}
+        </h1>
+        <p
+          v-if="projectOwner"
+          class="text-sm text-gray-500 dark:text-gray-400 mt-1"
+        >
+          Owner: {{ projectOwner }}
+        </p>
+      </div>
+      <router-link
+        to="/projects"
+        class="px-4 py-2 bg-gray-600 hover:bg-gray-700 dark:bg-gray-500 dark:hover:bg-gray-600 text-white rounded-md font-medium transition-colors shadow-sm"
+      >
+        ← Back to Projects
+      </router-link>
+    </div>
+
+    <div v-if="loading" class="text-center py-12">
+      <div class="text-gray-500 dark:text-gray-400">Loading runs...</div>
+    </div>
+
+    <div
+      v-else-if="runs.length === 0"
+      class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-8 text-center border border-gray-200 dark:border-gray-800"
+    >
+      <div class="text-gray-500 dark:text-gray-400 mb-4">No runs found</div>
+      <p class="text-sm text-gray-400 dark:text-gray-500">
+        This project doesn't have any training runs yet.
+      </p>
+    </div>
+
+    <div v-else class="grid grid-cols-1 gap-4">
+      <div
+        v-for="run in runs"
+        :key="run.run_id"
+        @click="viewRun(run.run_id)"
+        class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-4 cursor-pointer hover:shadow-lg transition-all border border-gray-200 dark:border-gray-800 hover:border-blue-400 dark:hover:border-blue-600"
+      >
+        <div class="flex items-start justify-between">
+          <div class="flex-1">
+            <h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100">
+              {{ run.name }}
+            </h3>
+            <p class="text-sm text-gray-500 dark:text-gray-400 font-mono mt-1">
+              {{ run.run_id }}
+            </p>
+          </div>
+          <div v-if="run.private !== undefined" class="ml-4">
+            <span
+              class="px-2 py-1 text-xs rounded font-medium"
+              :class="{
+                'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-400':
+                  run.private,
+                'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400':
+                  !run.private,
+              }"
+            >
+              {{ run.private ? "Private" : "Public" }}
+            </span>
+          </div>
+        </div>
+
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4 text-sm">
+          <div>
+            <div class="text-gray-500 dark:text-gray-500">Created</div>
+            <div class="text-gray-900 dark:text-gray-100">
+              {{ formatDate(run.created_at) }}
+            </div>
+          </div>
+          <div v-if="run.last_synced_at">
+            <div class="text-gray-500 dark:text-gray-500">Last Synced</div>
+            <div class="text-gray-900 dark:text-gray-100">
+              {{ formatDate(run.last_synced_at) }}
+            </div>
+          </div>
+          <div v-if="run.total_size">
+            <div class="text-gray-500 dark:text-gray-500">Size</div>
+            <div class="text-gray-900 dark:text-gray-100">
+              {{ formatSize(run.total_size) }}
+            </div>
+          </div>
+          <div v-if="run.config && Object.keys(run.config).length > 0">
+            <div class="text-gray-500 dark:text-gray-500">Config</div>
+            <div class="text-gray-900 dark:text-gray-100 text-xs">
+              {{ Object.keys(run.config).length }} params
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/kohaku-board-ui/src/pages/projects/index.vue b/src/kohaku-board-ui/src/pages/projects/index.vue
new file mode 100644
index 0000000..da4c82b
--- /dev/null
+++ b/src/kohaku-board-ui/src/pages/projects/index.vue
@@ -0,0 +1,75 @@
+<script setup>
+import { ref, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import { fetchProjects } from "@/utils/api";
+
+const router = useRouter();
+const projects = ref([]);
+const loading = ref(true);
+
+onMounted(async () => {
+  try {
+    const result = await fetchProjects();
+    projects.value = result.projects;
+  } catch (error) {
+    console.error("Failed to fetch projects:", error);
+  } finally {
+    loading.value = false;
+  }
+});
+
+function viewProject(projectName) {
+  router.push(`/projects/${projectName}`);
+}
+
+function formatDate(timestamp) {
+  if (!timestamp) return "N/A";
+  return new Date(timestamp).toLocaleString();
+}
+</script>
+
+<template>
+  <div>
+    <div class="flex items-center justify-between mb-6">
+      <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100">
+        Projects
+      </h1>
+    </div>
+
+    <div v-if="loading" class="text-center py-12">
+      <div class="text-gray-500 dark:text-gray-400">Loading projects...</div>
+    </div>
+
+    <div
+      v-else-if="projects.length === 0"
+      class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-8 text-center border border-gray-200 dark:border-gray-800"
+    >
+      <div class="text-gray-500 dark:text-gray-400 mb-4">No projects found</div>
+      <p class="text-sm text-gray-400 dark:text-gray-500">
+        Start tracking your ML experiments with KohakuBoard client library.
+      </p>
+    </div>
+
+    <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      <div
+        v-for="project in projects"
+        :key="project.name"
+        @click="viewProject(project.name)"
+        class="bg-white dark:bg-gray-900 rounded-lg shadow-md p-6 cursor-pointer hover:shadow-lg transition-all border border-gray-200 dark:border-gray-800 hover:border-blue-400 dark:hover:border-blue-600"
+      >
+        <h3 class="font-semibold text-xl text-gray-900 dark:text-gray-100 mb-2">
+          {{ project.display_name }}
+        </h3>
+        <div class="text-gray-600 dark:text-gray-400 mb-4">
+          {{ project.run_count }} {{ project.run_count === 1 ? "run" : "runs" }}
+        </div>
+        <div
+          v-if="project.updated_at"
+          class="text-xs text-gray-500 dark:text-gray-500"
+        >
+          Updated: {{ formatDate(project.updated_at) }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/kohaku-board-ui/src/typed-router.d.ts b/src/kohaku-board-ui/src/typed-router.d.ts
index 43918f9..ebf3b90 100644
--- a/src/kohaku-board-ui/src/typed-router.d.ts
+++ b/src/kohaku-board-ui/src/typed-router.d.ts
@@ -22,6 +22,9 @@ declare module 'vue-router/auto-routes' {
     '/dashboard/[id]': RouteRecordInfo<'/dashboard/[id]', '/dashboard/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     '/experiments/': RouteRecordInfo<'/experiments/', '/experiments', Record<never, never>, Record<never, never>>,
     '/experiments/[id]': RouteRecordInfo<'/experiments/[id]', '/experiments/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
+    '/projects/': RouteRecordInfo<'/projects/', '/projects', Record<never, never>, Record<never, never>>,
+    '/projects/[project]/': RouteRecordInfo<'/projects/[project]/', '/projects/:project', { project: ParamValue<true> }, { project: ParamValue<false> }>,
+    '/projects/[project]/[id]': RouteRecordInfo<'/projects/[project]/[id]', '/projects/:project/:id', { project: ParamValue<true>, id: ParamValue<true> }, { project: ParamValue<false>, id: ParamValue<false> }>,
   }
 
   /**
@@ -51,6 +54,18 @@ declare module 'vue-router/auto-routes' {
       routes: '/experiments/[id]'
       views: never
     }
+    'src/pages/projects/index.vue': {
+      routes: '/projects/'
+      views: never
+    }
+    'src/pages/projects/[project]/index.vue': {
+      routes: '/projects/[project]/'
+      views: never
+    }
+    'src/pages/projects/[project]/[id].vue': {
+      routes: '/projects/[project]/[id]'
+      views: never
+    }
   }
 
   /**
diff --git a/src/kohaku-board-ui/src/utils/api.js b/src/kohaku-board-ui/src/utils/api.js
index 6116272..73c82aa 100644
--- a/src/kohaku-board-ui/src/utils/api.js
+++ b/src/kohaku-board-ui/src/utils/api.js
@@ -74,7 +74,43 @@ export async function generateMockData(config) {
 }
 
 // ============================================================================
-// BOARDS API - Real data from file system
+// SYSTEM API - Mode detection
+// ============================================================================
+
+/**
+ * Get system information (mode, auth requirements, user info)
+ * @returns {Promise<Object>} System info
+ */
+export async function getSystemInfo() {
+  const response = await api.get("/system/info");
+  return response.data;
+}
+
+// ============================================================================
+// PROJECTS API - Project and run management
+// ============================================================================
+
+/**
+ * Fetch all accessible projects
+ * @returns {Promise<Object>} Projects list
+ */
+export async function fetchProjects() {
+  const response = await api.get("/projects");
+  return response.data;
+}
+
+/**
+ * Fetch runs in a project
+ * @param {string} projectName - Project name
+ * @returns {Promise<Object>} Runs list with project info
+ */
+export async function fetchProjectRuns(projectName) {
+  const response = await api.get(`/projects/${projectName}/runs`);
+  return response.data;
+}
+
+// ============================================================================
+// BOARDS API - Real data from file system (LEGACY - kept for compatibility)
 // ============================================================================
 
 /**
@@ -106,6 +142,119 @@ export async function fetchBoardSummary(boardId) {
   return response.data;
 }
 
+// ============================================================================
+// RUN DATA API - Project-based run access
+// ============================================================================
+
+/**
+ * Fetch run summary
+ * @param {string} project - Project name
+ * @param {string} runId - Run ID
+ * @returns {Promise<Object>} Run summary
+ */
+export async function fetchRunSummary(project, runId) {
+  const response = await api.get(`/projects/${project}/runs/${runId}/summary`);
+  return response.data;
+}
+
+/**
+ * Fetch available scalar metrics for a run
+ * @param {string} project - Project name
+ * @param {string} runId - Run ID
+ * @returns {Promise<Object>} Object with metrics array
+ */
+export async function fetchRunScalars(project, runId) {
+  const response = await api.get(`/projects/${project}/runs/${runId}/scalars`);
+  return response.data;
+}
+
+/**
+ * Fetch scalar data for a specific metric
+ * @param {string} project - Project name
+ * @param {string} runId - Run ID
+ * @param {string} metric - Metric name
+ * @param {Object} params - Query parameters (limit, etc.)
+ * @returns {Promise<Object>} Object with metric name and data array
+ */
+export async function fetchRunScalarData(project, runId, metric, params = {}) {
+  const response = await api.get(
+    `/projects/${project}/runs/${runId}/scalars/${metric}`,
+    {
+      params,
+    },
+  );
+  return response.data;
+}
+
+/**
+ * Fetch available media log names
+ * @param {string} project - Project name
+ * @param {string} runId - Run ID
+ * @returns {Promise<Object>} Object with media array
+ */
+export async function fetchRunMedia(project, runId) {
+  const response = await api.get(`/projects/${project}/runs/${runId}/media`);
+  return response.data;
+}
+
+/**
+ * Fetch media data for a specific log name
+ * @param {string} project - Project name
+ * @param {string} runId - Run ID
+ * @param {string} name - Media log name
+ * @param {Object} params - Query parameters (limit, etc.)
+ * @returns {Promise<Object>} Object with name and data array
+ */
+export async function fetchRunMediaData(project, runId, name, params = {}) {
+  const response = await api.get(
+    `/projects/${project}/runs/${runId}/media/${name}`,
+    {
+      params,
+    },
+  );
+  return response.data;
+}
+
+/**
+ * Get media file URL
+ * @param {string} project - Project name
+ * @param {string} runId - Run ID
+ * @param {string} filename - Media filename
+ * @returns {string} Media file URL
+ */
+export function getRunMediaFileUrl(project, runId, filename) {
+  return `/api/projects/${project}/runs/${runId}/media/files/${filename}`;
+}
+
+/**
+ * Fetch available table log names
+ * @param {string} project - Project name
+ * @param {string} runId - Run ID
+ * @returns {Promise<Object>} Object with tables array
+ */
+export async function fetchRunTables(project, runId) {
+  const response = await api.get(`/projects/${project}/runs/${runId}/tables`);
+  return response.data;
+}
+
+/**
+ * Fetch table data for a specific log name
+ * @param {string} project - Project name
+ * @param {string} runId - Run ID
+ * @param {string} name - Table log name
+ * @param {Object} params - Query parameters (limit, etc.)
+ * @returns {Promise<Object>} Object with name and data array
+ */
+export async function fetchRunTableData(project, runId, name, params = {}) {
+  const response = await api.get(
+    `/projects/${project}/runs/${runId}/tables/${name}`,
+    {
+      params,
+    },
+  );
+  return response.data;
+}
+
 /**
  * Fetch available scalar metrics for a board
  * @param {string} boardId - Board identifier