From 465b56fad8091cb11ee6f6279b9cd2e94810b222 Mon Sep 17 00:00:00 2001
From: jschoi <jschoi@cuuva.com>
Date: Tue, 21 Oct 2025 09:57:09 +0900
Subject: [PATCH] =?UTF-8?q?feat=20:=20Metrics=20=EB=B9=84=EA=B5=90=20?=
 =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20Deployment=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                               |    4 +
 src/components/atoms/button/IconDeployBtn.vue |   26 +
 .../atoms/organisms/CompareRunDialog.vue      |  387 +++++
 .../atoms/organisms/DeploymentDialog.vue      |  405 +++--
 .../atoms/organisms/ExternalDatasetDialog.vue |  180 +++
 src/components/common/LayoutComponent.vue     |  153 +-
 .../service/management/DatasetService.ts      |   35 +
 .../ExternalAuthControllerService.ts          |   22 +
 .../templates/Datasets/ListComponent.vue      |   35 +-
 .../templates/Datasets/ViewComponent.vue      |    2 +-
 .../templates/datagroup/ListComponent.vue     |    2 +-
 .../templates/deployment/ListComponent.vue    |  418 ++---
 .../templates/deployment/ViewComponent.vue    |    2 +-
 .../templates/projects/ListComponent.vue      |    2 +-
 .../run/executions/CompareComponent.vue       |    2 +-
 .../run/executions/ListComponent.vue          |    2 +-
 .../run/executions/ListComponentback.vue      |  563 -------
 .../run/executions/ViewComponent.vue          | 1361 ++++++++++++-----
 .../run/experiment/ListComponent.vue          |    2 +-
 .../run/experiment/ViewComponent.vue          |    2 +-
 .../templates/stepconfig/ListComponent.vue    |    2 +-
 .../templates/stepconfig/ViewComponent.vue    |    2 +-
 .../trainingscript/ListComponent.vue          |    2 +-
 .../trainingscript/ViewComponent.vue          |    2 +-
 .../trainingscriptgroup/ListComponent.vue     |    2 +-
 .../templates/users/ListComponent.vue         |    2 +-
 .../templates/workflow/ListComponent.vue      |    2 +-
 .../templates/workflow/ViewComponent.vue      |    2 +-
 src/utils/menuUtils.js                        |   12 +-
 29 files changed, 2359 insertions(+), 1274 deletions(-)
 create mode 100644 src/components/atoms/button/IconDeployBtn.vue
 create mode 100644 src/components/atoms/organisms/CompareRunDialog.vue
 create mode 100644 src/components/atoms/organisms/ExternalDatasetDialog.vue
 create mode 100644 src/components/service/management/DatasetService.ts
 create mode 100644 src/components/service/management/ExternalAuthControllerService.ts
 delete mode 100644 src/components/templates/run/executions/ListComponentback.vue

diff --git a/components.d.ts b/components.d.ts
index e522afd..9b1d7a2 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -10,6 +10,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     AppFooter: typeof import('./src/components/AppFooter.vue')['default']
     CompareComponent: typeof import('./src/components/templates/run/executions/CompareComponent.vue')['default']
+    CompareRunDialog: typeof import('./src/components/atoms/organisms/CompareRunDialog.vue')['default']
     copy: typeof import('./src/components/atoms/organisms/DatagroupBaseDoalog copy.vue')['default']
     DatagroupBaseDoalog: typeof import('./src/components/atoms/organisms/DatagroupBaseDoalog.vue')['default']
     DatasetBaseDoalog: typeof import('./src/components/atoms/organisms/DatasetBaseDoalog.vue')['default']
@@ -20,10 +21,12 @@ declare module 'vue' {
     ExecutionsViewComponent: typeof import('./src/components/templates/run/executions/ExecutionsViewComponent.vue')['default']
     ExperimentCreateDialog: typeof import('./src/components/atoms/organisms/ExperimentCreateDialog.vue')['default']
     ExperimentViewComponent: typeof import('./src/components/templates/run/experiment/ExperimentViewComponent.vue')['default']
+    ExternalDatasetDialog: typeof import('./src/components/atoms/organisms/ExternalDatasetDialog.vue')['default']
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
     IconArrowDown: typeof import('./src/components/atoms/button/IconArrowDown.vue')['default']
     IconArrowUp: typeof import('./src/components/atoms/button/IconArrowUp.vue')['default']
     IconDeleteBtn: typeof import('./src/components/atoms/button/IconDeleteBtn.vue')['default']
+    IconDeployBtn: typeof import('./src/components/atoms/button/IconDeployBtn.vue')['default']
     IconDeployment: typeof import('./src/components/atoms/button/IconDeployment.vue')['default']
     IconDownloadBtn: typeof import('./src/components/atoms/button/IconDownloadBtn.vue')['default']
     IconInfoBtn: typeof import('./src/components/atoms/button/IconInfoBtn.vue')['default']
@@ -35,6 +38,7 @@ declare module 'vue' {
     ListComponentback: typeof import('./src/components/templates/run/executions/ListComponentback.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    RunSearchBar: typeof import('./src/components/templates/run/executions/RunSearchBar.vue')['default']
     SidebarHeader: typeof import('./src/components/common/SidebarHeader.vue')['default']
     TrainingGroupBaseDoalog: typeof import('./src/components/atoms/organisms/TrainingGroupBaseDoalog.vue')['default']
     TrainingScriptBaseDoalog: typeof import('./src/components/atoms/organisms/TrainingScriptBaseDoalog.vue')['default']
diff --git a/src/components/atoms/button/IconDeployBtn.vue b/src/components/atoms/button/IconDeployBtn.vue
new file mode 100644
index 0000000..f104e37
--- /dev/null
+++ b/src/components/atoms/button/IconDeployBtn.vue
@@ -0,0 +1,26 @@
+<script setup>
+import { defineEmits } from "vue";
+
+const emit = defineEmits(["onClick"]);
+
+const onClick = () => {
+  emit("onClick");
+};
+</script>
+
+<template>
+  <v-tooltip location="bottom" text="Deploy">
+    <template #activator="{ props }">
+      <v-btn
+        @click="onClick"
+        class="ma-1"
+        icon="mdi-rocket-launch"
+        color="info"
+        density="comfortable"
+        elevation="0"
+        size="small"
+        v-bind="props"
+      />
+    </template>
+  </v-tooltip>
+</template>
diff --git a/src/components/atoms/organisms/CompareRunDialog.vue b/src/components/atoms/organisms/CompareRunDialog.vue
new file mode 100644
index 0000000..05a748a
--- /dev/null
+++ b/src/components/atoms/organisms/CompareRunDialog.vue
@@ -0,0 +1,387 @@
+<script setup lang="ts">
+import {
+  computed,
+  ref,
+  watch,
+  nextTick,
+  onMounted,
+  onBeforeUnmount,
+} from "vue";
+import Plotly from "plotly.js-dist-min";
+
+/** ===== Types ===== */
+type MetricKV = { key: string; value: number };
+type RunDetailType = {
+  info: any;
+  data: { metrics: MetricKV[]; params?: any[]; tags?: any[] };
+};
+
+/** ===== Props / Emits ===== */
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean;
+    items: Array<{ value: string; label: string }>;
+    selectedRunIds: string[];
+    selectedMetricKeys: string[];
+    ensureRunDetail: (runId: string) => Promise<RunDetailType | null>;
+    runDetailCache: Map<string, RunDetailType>;
+    compareChartMode?: "byMetric" | "byRun";
+    normalizeValues?: boolean;
+    baselineRunId?: string | null;
+  }>(),
+  {
+    modelValue: false,
+    items: () => [],
+    selectedRunIds: () => [],
+    selectedMetricKeys: () => [],
+    compareChartMode: "byMetric",
+    normalizeValues: false,
+    baselineRunId: null,
+  },
+);
+
+const emit = defineEmits<{
+  (e: "update:modelValue", v: boolean): void;
+  (e: "update:selectedRunIds", v: string[]): void;
+  (e: "update:selectedMetricKeys", v: string[]): void;
+}>();
+
+/** ===== local refs ===== */
+const dialogOpen = computed({
+  get: () => props.modelValue,
+  set: (v: boolean) => emit("update:modelValue", v),
+});
+const selectedRunIdsProxy = computed({
+  get: () => props.selectedRunIds,
+  set: (v: string[]) => emit("update:selectedRunIds", v),
+});
+const selectedMetricKeysProxy = computed({
+  get: () => props.selectedMetricKeys,
+  set: (v: string[]) => emit("update:selectedMetricKeys", v),
+});
+
+const elCompare = ref<HTMLDivElement | null>(null);
+const loading = ref(false);
+
+/** ===== helpers ===== */
+const fmtNumber = (v: number | null, digits = 3) => {
+  if (v == null || !Number.isFinite(v)) return "";
+  const abs = Math.abs(v);
+  if (abs >= 1000) return v.toLocaleString();
+  if (abs >= 1) return v.toFixed(digits);
+  if (abs >= 0.01) return v.toFixed(digits + 1);
+  return v.toExponential(2);
+};
+const normalizeArray = (vals: (number | null)[]) => {
+  const xs = vals.filter((v): v is number => Number.isFinite(v as number));
+  if (xs.length === 0) return vals;
+  const min = Math.min(...xs),
+    max = Math.max(...xs);
+  if (max === min) return vals.map((v) => (v == null ? v : 1));
+  return vals.map((v) => (v == null ? v : (v - min) / (max - min)));
+};
+const labelOfRun = (r: RunDetailType) => r.info.run_name || r.info.run_id;
+const valueOf = (run: RunDetailType, key: string): number | null => {
+  const m = run.data.metrics.find((x) => x.key === key)?.value;
+  return Number.isFinite(m as number) ? Number(m) : null;
+};
+
+/** ===== derived ===== */
+const compareRuns = computed<RunDetailType[]>(
+  () =>
+    selectedRunIdsProxy.value
+      .map((id) => props.runDetailCache.get(id))
+      .filter(Boolean) as RunDetailType[],
+);
+const metricsKeySetByRun = computed(() =>
+  compareRuns.value.map((r) => new Set(r.data.metrics.map((m) => m.key))),
+);
+const commonMetricKeys = computed<string[]>(() => {
+  if (metricsKeySetByRun.value.length === 0) return [];
+  const [first, ...rest] = metricsKeySetByRun.value;
+  let inter = new Set(first);
+  rest.forEach((s) => (inter = new Set([...inter].filter((k) => s.has(k)))));
+  return Array.from(inter).sort();
+});
+const activeMetricKeys = computed<string[]>(() =>
+  selectedMetricKeysProxy.value.length
+    ? selectedMetricKeysProxy.value
+    : commonMetricKeys.value,
+);
+
+/** ===== chart ===== */
+const commonLayout: Partial<any> = {
+  autosize: true,
+  margin: { t: 28, r: 12, b: 56, l: 56 },
+  paper_bgcolor: "rgba(0,0,0,0)",
+  plot_bgcolor: "rgba(0,0,0,0)",
+  font: { color: "#E0E0E0" },
+  xaxis: { automargin: true, gridcolor: "rgba(255,255,255,0.08)" },
+  yaxis: {
+    rangemode: "tozero",
+    gridcolor: "rgba(255,255,255,0.08)",
+    automargin: true,
+  },
+  legend: {
+    orientation: "h",
+    x: 0,
+    y: 1.12,
+    yanchor: "bottom",
+    xanchor: "left",
+  },
+};
+
+function createTracesByMetric(metricKeys: string[], runsData: RunDetailType[]) {
+  const runLabels = runsData.map(labelOfRun);
+  return runsData.map((run, i) => {
+    const yRaw = metricKeys.map((k) => valueOf(run, k));
+    const y = props.normalizeValues ? normalizeArray(yRaw) : yRaw;
+    const text = yRaw.map((v) => fmtNumber(v));
+    return {
+      type: "bar",
+      name: runLabels[i],
+      x: metricKeys,
+      y,
+      text: props.normalizeValues ? undefined : text,
+      textposition: "auto",
+      customdata: text,
+      hovertemplate: `${runLabels[i]}<br>%{x}: %{customdata}<extra></extra>`,
+    };
+  });
+}
+function createTracesByRun(metricKeys: string[], runsData: RunDetailType[]) {
+  const rowLabels = runsData.map(labelOfRun);
+  return metricKeys.map((key) => {
+    const yRaw = rowLabels.map((_, i) => valueOf(runsData[i], key));
+    const y = props.normalizeValues ? normalizeArray(yRaw) : yRaw;
+    const text = yRaw.map((v) => fmtNumber(v));
+    return {
+      type: "bar",
+      name: key,
+      x: rowLabels,
+      y,
+      text: props.normalizeValues ? undefined : text,
+      textposition: "auto",
+      customdata: text,
+      hovertemplate: `${key}: %{customdata}<extra>%{x}</extra>`,
+    };
+  });
+}
+function drawCompareChart() {
+  if (!elCompare.value) return;
+  const metricKeys = activeMetricKeys.value;
+  const runsData = compareRuns.value;
+  if (!metricKeys.length || !runsData.length) {
+    elCompare.value.innerHTML =
+      '<div style="padding:16px;color:#999;text-align:center;">No Data</div>';
+    return;
+  }
+  const traces =
+    props.compareChartMode === "byMetric"
+      ? createTracesByMetric(metricKeys, runsData)
+      : createTracesByRun(metricKeys, runsData);
+
+  if (props.compareChartMode === "byMetric") {
+    const varianceOrder = metricKeys
+      .map((k, idx) => {
+        const vals = traces
+          .map((t: any) => t.y[idx])
+          .filter((v: any) => v != null) as number[];
+        const min = Math.min(...vals),
+          max = Math.max(...vals);
+        return { k, spread: max - min };
+      })
+      .sort((a, b) => b.spread - a.spread)
+      .map((v) => v.k);
+
+    traces.forEach((t: any) => {
+      t.x = varianceOrder;
+      t.y = varianceOrder.map((mk: string) => t.y[metricKeys.indexOf(mk)]);
+      if (t.text)
+        t.text = varianceOrder.map(
+          (mk: string) => t.text[metricKeys.indexOf(mk)],
+        );
+      if (t.customdata)
+        t.customdata = varianceOrder.map(
+          (mk: string) => t.customdata[metricKeys.indexOf(mk)],
+        );
+    });
+  }
+
+  Plotly.react(
+    elCompare.value,
+    traces as any,
+    { ...commonLayout, barmode: "group" },
+    { displayModeBar: false, responsive: true },
+  );
+}
+
+/** ===== load & watch ===== */
+async function loadCompareData() {
+  if (!dialogOpen.value) return;
+  loading.value = true;
+  try {
+    await Promise.all(selectedRunIdsProxy.value.map(props.ensureRunDetail));
+    if (selectedMetricKeysProxy.value.length === 0) {
+      selectedMetricKeysProxy.value = commonMetricKeys.value.slice(0, 6);
+    }
+    await nextTick();
+    drawCompareChart();
+  } finally {
+    loading.value = false;
+  }
+}
+watch(
+  () => dialogOpen.value,
+  (open) => {
+    if (open) loadCompareData();
+  },
+);
+watch([selectedRunIdsProxy, selectedMetricKeysProxy], async () => {
+  if (!dialogOpen.value) return;
+  await loadCompareData();
+});
+
+const onResize = () => {
+  if (elCompare.value) Plotly.Plots.resize(elCompare.value);
+};
+onMounted(() => window.addEventListener("resize", onResize));
+onBeforeUnmount(() => window.removeEventListener("resize", onResize));
+</script>
+
+<template>
+  <v-dialog v-model="dialogOpen" max-width="1000">
+    <v-card class="rounded-lg overflow-hidden">
+      <!-- 헤더: Deploy Model 스타일 적용 -->
+      <v-card-title
+        class="text-white font-weight-bold text-h6"
+        style="background-color: #1976d2"
+      >
+        Compare Runs
+      </v-card-title>
+
+      <!-- 상단: 선택 섹션 -->
+      <v-card-text class="pa-6">
+        <v-row dense class="mb-2">
+          <v-col cols="12">
+            <v-subheader class="font-weight-medium mb-2"
+              >Select Runs</v-subheader
+            >
+            <v-autocomplete
+              v-model="selectedRunIdsProxy"
+              :items="items"
+              item-title="label"
+              item-value="value"
+              chips
+              multiple
+              closable-chips
+              variant="outlined"
+              density="comfortable"
+              hide-details
+              :disabled="loading"
+              placeholder="Select runs to compare"
+            />
+          </v-col>
+        </v-row>
+
+        <v-expand-transition>
+          <v-alert
+            v-if="!loading && selectedRunIdsProxy.length < 2"
+            type="info"
+            variant="tonal"
+            density="compact"
+            class="mt-2"
+          >
+            2개 이상의 Run을 선택해 주세요.
+          </v-alert>
+        </v-expand-transition>
+
+        <v-row dense class="mt-4">
+          <v-col cols="12">
+            <v-subheader class="font-weight-medium mb-2">Metrics</v-subheader>
+            <v-autocomplete
+              v-model="selectedMetricKeysProxy"
+              :items="activeMetricKeys.length ? activeMetricKeys : []"
+              :menu-props="{ maxHeight: 360 }"
+              chips
+              multiple
+              closable-chips
+              variant="outlined"
+              density="comfortable"
+              hide-details
+              :disabled="loading || compareRuns.length === 0"
+              placeholder="Select metrics (empty = all common)"
+            />
+            <div class="d-flex align-center mt-2 ga-2">
+              <v-chip size="small" color="primary" variant="tonal">
+                Mode:
+                {{
+                  props.compareChartMode === "byMetric" ? "By Metric" : "By Run"
+                }}
+              </v-chip>
+              <v-chip size="small" color="secondary" variant="tonal">
+                {{ props.normalizeValues ? "Normalized" : "Raw values" }}
+              </v-chip>
+              <v-chip
+                v-if="props.baselineRunId"
+                size="small"
+                color="info"
+                variant="tonal"
+              >
+                Baseline: {{ props.baselineRunId }}
+              </v-chip>
+            </div>
+          </v-col>
+        </v-row>
+      </v-card-text>
+
+      <!-- 차트 & 테이블 섹션 (톤 카드로 감싸기) -->
+      <v-card-text class="pt-0 px-6 pb-2">
+        <v-card variant="tonal" class="mb-4">
+          <v-card-title class="py-2 px-4">Metrics (grouped bar)</v-card-title>
+          <v-divider />
+          <v-card-text class="px-4">
+            <div v-if="loading" class="my-2">
+              <v-progress-linear indeterminate />
+            </div>
+            <div ref="elCompare" style="width: 100%; height: 420px"></div>
+          </v-card-text>
+        </v-card>
+
+        <v-card variant="tonal">
+          <v-card-title class="py-2 px-4">Comparison Table</v-card-title>
+          <v-divider />
+          <v-card-text class="px-0">
+            <v-table density="comfortable">
+              <thead>
+                <tr>
+                  <th style="width: 28%">Run</th>
+                  <th v-for="k in activeMetricKeys" :key="k">{{ k }}</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="r in compareRuns" :key="r.info.run_id">
+                  <td class="text-no-wrap">
+                    {{ r.info.run_name || r.info.run_id }}
+                  </td>
+                  <td v-for="k in activeMetricKeys" :key="k">
+                    {{ r.data.metrics.find((m) => m.key === k)?.value ?? "—" }}
+                  </td>
+                </tr>
+              </tbody>
+            </v-table>
+          </v-card-text>
+        </v-card>
+      </v-card-text>
+
+      <!-- 액션 -->
+      <v-card-actions class="justify-end">
+        <v-btn variant="text" class="text-white" @click="dialogOpen = false">
+          CLOSE
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<style scoped></style>
diff --git a/src/components/atoms/organisms/DeploymentDialog.vue b/src/components/atoms/organisms/DeploymentDialog.vue
index b932e53..f5ce076 100644
--- a/src/components/atoms/organisms/DeploymentDialog.vue
+++ b/src/components/atoms/organisms/DeploymentDialog.vue
@@ -1,168 +1,301 @@
 <script setup lang="ts">
-import IconArrowDown from "@/components/atoms/button/IconArrowDown.vue";
-import IconArrowUp from "@/components/atoms/button/IconArrowUp.vue";
-import IconDeleteBtn from "@/components/atoms/button/IconDeleteBtn.vue";
-import IconModifyBtn from "@/components/atoms/button/IconModifyBtn.vue";
-import { ref, watch } from "vue";
-
-const steps = ref([
-  { order: 1, stepName: "Data Load", type: "DataPrep", status: "Configured" },
-  {
-    order: 2,
-    stepName: "Preprocessing",
-    type: "Preprocess",
-    status: "Not Configured",
-  },
-  {
-    order: 3,
-    stepName: "Train Model",
-    type: "Train",
-    status: "Not Configured",
-  },
-]);
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
-const props = defineProps({
-  editData: Object,
-  mode: String,
-  userOption: Array,
-});
+type PackageOption = { label: string; value: string; raw: any };
 
-const emit = defineEmits(["handle-data", "close-modal"]);
+const props = defineProps<{
+  packages: PackageOption[];
+  packagesLoading?: boolean;
+  packagesError?: string;
+  artifactPath?: string;
+}>();
 
-const visible = ref(true);
+const emit = defineEmits<{
+  (e: "close-modal"): void;
+  (e: "handle-data", value: any): void;
+}>();
 
 const form = ref({
-  name: "",
-  description: "",
+  package_id: "",
+  sw_id: "",
+  sw_version: "",
+  software_name: "",
+  executed: true,
+  file_type: "bundle" as "bundle" | "single",
+  os: "" as "" | "Windows" | "Linux",
+
+  win_exe_name: "",
+  win_root_path: "",
+  linux_exe_name: "",
+  linux_root_path: "",
+
+  install_location: "",
+  private_only: false,
 });
 
-const submit = () => {
-  emit("handle-data", form.value);
-};
+const isWin = computed(() => form.value.os === "Windows");
+const isLinux = computed(() => form.value.os === "Linux");
+
+const selectedOption = computed(() =>
+  props.packages?.find((p) => p.value === form.value.package_id),
+);
+const selectedRaw = computed(() => selectedOption.value?.raw ?? null);
+
+const readonlyFields = computed(() => ({
+  swTypeName: selectedRaw.value?.sw_type_name ?? "",
+  swGroupName: selectedRaw.value?.sw_group_name ?? "",
+  manufacturer: selectedRaw.value?.sw_manufacturer ?? "",
+  packageId: selectedRaw.value?.package_id ?? "",
+}));
+
+function onPickPackage() {
+  form.value.win_exe_name = selectedRaw.value?.window_exe_name ?? "";
+  form.value.win_root_path = selectedRaw.value?.window_root_location ?? "";
+  form.value.linux_exe_name = selectedRaw.value?.linux_exe_name ?? "";
+  form.value.linux_root_path = selectedRaw.value?.linux_root_location ?? "";
+
+  if (form.value.win_exe_name || form.value.win_root_path)
+    form.value.os = "Windows";
+  else if (form.value.linux_exe_name || form.value.linux_root_path)
+    form.value.os = "Linux";
+}
+
+watch(
+  () => props.packages,
+  () => {
+    if (!props.packages?.some((p) => p.value === form.value.package_id)) {
+      form.value.package_id = "";
+      form.value.win_exe_name = "";
+      form.value.win_root_path = "";
+      form.value.linux_exe_name = "";
+      form.value.linux_root_path = "";
+      form.value.os = "";
+    }
+  },
+);
+
+function submit() {
+  if (!form.value.package_id) return;
+  emit("handle-data", {
+    ...form.value,
+    resolved: readonlyFields.value,
+    artifact_path: props.artifactPath ?? "",
+  });
+}
+
+function onEsc(e: KeyboardEvent) {
+  if (e.key === "Escape") emit("close-modal");
+}
+onMounted(() => window.addEventListener("keydown", onEsc));
+onBeforeUnmount(() => window.removeEventListener("keydown", onEsc));
 </script>
 
 <template>
-  <v-card class="rounded-lg overflow-hidden">
-    <!-- 타이틀 영역 -->
+  <v-card rounded="lg" elevation="4" max-height="85vh" class="overflow-auto">
     <v-card-title
-      class="text-white font-weight-bold text-h6"
-      style="background-color: #1976d2"
+      class="text-white text-h6 font-weight-bold"
+      style="background: #1976d2"
     >
-      Deploy Model
+      차량 지능 SW 등록
     </v-card-title>
 
-    <v-card-text class="pa-6">
-      <div class="text-subtitle-1 font-weight-medium mb-4">
-        Select Model : ImageClassifier
-      </div>
-      <VDivider class="my-2" />
-      <v-form @submit.prevent="submit">
-        <div class="mb-5">
-          <label class="text-subtitle-2 font-weight-medium mb-1 d-block"
-            >OTA
-          </label>
-          <v-row dense class="mb-6">
-            <v-col cols="12">
-              <v-subheader class="font-weight-medium white--text mb-2">
-                Select Package
-              </v-subheader>
-              <v-select
-                dense
-                hide-details
-                outlined
-                style="background: #1e1e1e; color: #fff"
-              />
-            </v-col>
-          </v-row>
-        </div>
-      </v-form>
-    </v-card-text>
-
-    <v-card-text class="pt-6 pb-4 px-6">
-      <v-subheader class="font-weight-medium mb-2">
-        Package Preview
-      </v-subheader>
-      <v-sheet class="pa-4 mb-6" elevation="1" rounded>
-        <v-row dense>
-          <!-- Linux -->
+    <v-defaults-provider
+      :defaults="{
+        VTextField: {
+          density: 'compact',
+          variant: 'outlined',
+          hideDetails: true,
+        },
+        VSelect: { density: 'compact', variant: 'outlined', hideDetails: true },
+        VRadioGroup: { density: 'compact' },
+        VCheckbox: { density: 'compact' },
+        VAlert: { density: 'compact' },
+      }"
+    >
+      <!-- 패키지 선택 & 자동 표기 -->
+      <v-card-text class="pa-4">
+        <v-row dense class="mb-2">
+          <v-col cols="12">
+            <div class="text-body-2 font-weight-medium mb-1">SW 패키지</div>
+            <v-select
+              v-model="form.package_id"
+              :items="packages"
+              item-title="label"
+              item-value="value"
+              :loading="packagesLoading"
+              :disabled="packagesLoading"
+              placeholder="선택해주세요."
+              @update:model-value="onPickPackage"
+            />
+            <v-alert
+              v-if="packagesError"
+              type="error"
+              variant="tonal"
+              class="mt-2"
+            >
+              {{ packagesError }}
+            </v-alert>
+          </v-col>
+        </v-row>
+
+        <!-- 자동 표기 (읽기 전용) -->
+        <v-row dense class="mb-2">
           <v-col cols="12" md="6">
-            <div class="font-weight-medium mb-2">Linux</div>
             <v-text-field
-              label="File Name"
-              placeholder="4_EdgeInfra_Perception.sh"
-              dense
-              outlined
-              hide-details
+              label="SW 종류"
+              :model-value="readonlyFields.swTypeName"
+              disabled
             />
+          </v-col>
+          <v-col cols="12" md="6">
             <v-text-field
-              label="File Path"
-              placeholder="/home/etri/TeslaSystem/EdgeInfraVision/RUN"
-              dense
-              outlined
-              hide-details
+              label="SW 상세 종류"
+              :model-value="readonlyFields.swGroupName"
+              disabled
+            />
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-text-field
+              label="제조사"
+              :model-value="readonlyFields.manufacturer"
+              disabled
             />
           </v-col>
+          <v-col cols="12" md="6">
+            <v-text-field
+              label="패키지 번호"
+              :model-value="readonlyFields.packageId"
+              disabled
+            />
+          </v-col>
+        </v-row>
+      </v-card-text>
 
-          <!-- Windows -->
+      <v-divider class="mx-4" />
+
+      <!-- 사용자 입력 -->
+      <v-card-text class="pa-4 pt-3">
+        <v-row dense class="mb-2">
           <v-col cols="12" md="6">
-            <div class="font-weight-medium mb-2">Windows</div>
+            <v-text-field label="SW ID" v-model="form.sw_id" />
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-text-field label="SW 버전" v-model="form.sw_version" />
+          </v-col>
+          <v-col cols="12">
             <v-text-field
-              label="File Name"
-              placeholder="4_EdgeInfra_Perception.exe"
-              dense
-              outlined
-              hide-details
+              label="SW 명칭 (Software Name)"
+              v-model="form.software_name"
+            />
+          </v-col>
+        </v-row>
+
+        <v-row dense class="mb-1">
+          <v-col cols="12" md="6">
+            <v-radio-group v-model="form.executed" inline>
+              <template #label
+                ><span class="text-body-2">실행 여부</span></template
+              >
+              <v-radio class="mr-13" label="실행" :value="true" />
+              <v-radio label="미실행" :value="false" />
+            </v-radio-group>
+          </v-col>
+          <v-col cols="12" md="3">
+            <v-radio-group v-model="form.file_type" inline>
+              <template #label
+                ><span class="text-body-2">파일 종류</span></template
+              >
+              <v-radio class="mr-13" label="묶음" value="bundle" />
+              <v-radio label="단일" value="single" />
+            </v-radio-group>
+          </v-col>
+        </v-row>
+
+        <v-row dense class="mb-1">
+          <v-col cols="12" md="6">
+            <v-radio-group v-model="form.os" inline>
+              <template #label><span class="text-body-2">OS</span></template>
+              <v-radio class="mr-4" label="Windows" value="Windows" />
+              <v-radio label="Linux" value="Linux" />
+            </v-radio-group>
+          </v-col>
+        </v-row>
+
+        <!-- Windows -->
+        <v-row dense v-if="isWin" class="mb-1">
+          <v-col cols="12"
+            ><div class="text-body-2 font-weight-medium mb-1">
+              Windows
+            </div></v-col
+          >
+          <v-col cols="12" md="6">
+            <v-text-field
+              label="윈도우 실행 파일명"
+              v-model="form.win_exe_name"
+              disabled
+            />
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-text-field
+              label="윈도우 경로"
+              v-model="form.win_root_path"
+              disabled
+            />
+          </v-col>
+        </v-row>
+
+        <!-- Linux -->
+        <v-row dense v-if="isLinux" class="mb-1">
+          <v-col cols="12"
+            ><div class="text-body-2 font-weight-medium mb-1">Linux</div></v-col
+          >
+          <v-col cols="12" md="6">
+            <v-text-field
+              label="리눅스 실행 파일명"
+              v-model="form.linux_exe_name"
+              disabled
             />
+          </v-col>
+          <v-col cols="12" md="6">
             <v-text-field
-              label="File Path"
-              placeholder="C:/etri/TeslaSystem/EdgeInfraVision/RUN"
-              dense
-              outlined
+              label="리눅스 경로"
+              v-model="form.linux_root_path"
+              disabled
+            />
+          </v-col>
+        </v-row>
+
+        <!-- Artifact Path -->
+        <v-row dense class="mb-1">
+          <v-col cols="12">
+            <v-text-field
+              label="차량 SW 파일 (Artifact Path)"
+              :model-value="props.artifactPath || '-'"
+              disabled
+            />
+          </v-col>
+        </v-row>
+
+        <!-- 설치 위치 & 등록인만 접근 -->
+        <v-row dense>
+          <v-col cols="12" md="8">
+            <v-text-field label="설치 위치" v-model="form.install_location" />
+          </v-col>
+          <v-col cols="12" md="4" class="d-flex align-center">
+            <v-checkbox
+              v-model="form.private_only"
+              label="등록인만 접근 여부"
               hide-details
             />
           </v-col>
         </v-row>
-      </v-sheet>
-      <!-- Package Preview 끝 -->
-
-      <!-- Software Name / Version -->
-      <v-row dense class="mb-4">
-        <v-col cols="12">
-          <v-text-field
-            label="Software Name"
-            placeholder="Enter software Name"
-            dense
-            outlined
-            hide-details
-          />
-        </v-col>
-        <v-col cols="12">
-          <v-text-field
-            label="Software Version"
-            placeholder="Enter software Version"
-            dense
-            outlined
-            hide-details
-          />
-        </v-col>
-      </v-row>
-
-      <!-- Executed 여부 -->
-      <v-row dense class="mb-6">
-        <v-col cols="12">
-          <v-radio-group row>
-            <v-radio label="Executed" value="executed" />
-            <v-radio label="Not Executed" value="not_executed" />
-          </v-radio-group>
-        </v-col>
-      </v-row>
-    </v-card-text>
-
-    <v-card-actions class="justify-end" style="padding: 16px 24px">
-      <v-btn color="success" @click="submit">Save</v-btn>
-      <v-btn text class="white--text" @click="$emit('close-modal')"
-        >Close</v-btn
-      >
-    </v-card-actions>
+      </v-card-text>
+
+      <v-card-actions class="py-2 px-3">
+        <v-spacer />
+        <v-btn color="success" @click="submit">SAVE</v-btn>
+        <v-btn variant="text" @click="$emit('close-modal')">CANCEL</v-btn>
+      </v-card-actions>
+    </v-defaults-provider>
   </v-card>
 </template>
diff --git a/src/components/atoms/organisms/ExternalDatasetDialog.vue b/src/components/atoms/organisms/ExternalDatasetDialog.vue
new file mode 100644
index 0000000..1ba4f70
--- /dev/null
+++ b/src/components/atoms/organisms/ExternalDatasetDialog.vue
@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import { ref, watch, onMounted } from "vue";
+import {
+  DatasetService,
+  type ExternalDatasetItem,
+} from "@/components/service/management/DatasetService";
+
+const props = defineProps<{
+  modelValue: boolean;
+  projectId: number;
+  refId?: number | null;
+}>();
+const emit = defineEmits<{
+  (e: "update:modelValue", v: boolean): void;
+  (e: "close"): void;
+  (e: "saved"): void; // 저장 완료시 부모 새로고침
+}>();
+
+const visible = ref(props.modelValue);
+watch(
+  () => props.modelValue,
+  (v) => (visible.value = v),
+);
+watch(visible, (v) => emit("update:modelValue", v));
+
+const loading = ref(false);
+const errorMsg = ref("");
+const rows = ref<ExternalDatasetItem[]>([]);
+const searchKeyword = ref("");
+const groupName = ref("");
+
+function unwrap<T = any>(res: any): T {
+  return res && res.data ? res.data : res;
+}
+
+async function fetchList() {
+  if (!props.projectId) return;
+  loading.value = true;
+  errorMsg.value = "";
+  try {
+    const res = await DatasetService.listExternal({
+      ds_prj_idx: props.projectId,
+      search_keyword: searchKeyword.value || undefined, // 서버 필터
+      grp_name: groupName.value || undefined,
+    });
+    const body = unwrap<any>(res);
+    const arr: ExternalDatasetItem[] = Array.isArray(body?.data)
+      ? body.data
+      : Array.isArray(body)
+        ? body
+        : [];
+
+    // ✅ ds_dataset_name 기준 로컬 필터 한 번 더
+    const kw = (searchKeyword.value || "").trim().toLowerCase();
+    rows.value =
+      kw.length === 0
+        ? arr
+        : arr.filter((r) =>
+            String(r.ds_dataset_name || "")
+              .toLowerCase()
+              .includes(kw),
+          );
+  } catch (e) {
+    errorMsg.value = "외부 데이터셋 조회에 실패했습니다.";
+  } finally {
+    loading.value = false;
+  }
+}
+
+function close() {
+  visible.value = false;
+  emit("close");
+}
+
+async function pick(item: ExternalDatasetItem) {
+  try {
+    // 필요시 여기서 DatasetService.saveExternal(...) 호출하고 emit("saved")
+    // 예시:
+    // await DatasetService.saveExternal({
+    //   datasetName: item.ds_dataset_name,
+    //   path: item.ds_dataset_base_path,
+    //   refId: props.refId ?? 0,
+    //   refType: "DATASET",
+    //   title: item.ds_dataset_name,
+    //   version: 1,
+    //   description: "",
+    //   regUserId: "currentUser",
+    //   projectId: props.projectId,
+    // });
+    emit("saved");
+  } finally {
+    close();
+  }
+}
+
+watch(() => props.projectId, fetchList);
+onMounted(fetchList);
+</script>
+
+<template>
+  <v-card rounded="lg" elevation="4">
+    <v-card-title
+      class="text-white text-h6 font-weight-bold"
+      style="background: #1976d2"
+    >
+      External Datasets
+    </v-card-title>
+
+    <v-card-text class="pa-4">
+      <!-- 🔧 검색바 한 줄 정렬 -->
+      <div class="d-flex align-center ga-2 mb-3" style="flex-wrap: wrap">
+        <v-text-field
+          v-model="searchKeyword"
+          label="데이터셋 이름 (ds_dataset_name)"
+          density="compact"
+          hide-details
+          style="min-width: 240px; flex: 1 1 240px"
+          @keyup.enter="fetchList"
+          clearable
+        />
+        <v-text-field
+          v-model="groupName"
+          label="그룹 이름"
+          density="compact"
+          hide-details
+          style="min-width: 240px; flex: 1 1 240px"
+          @keyup.enter="fetchList"
+          clearable
+        />
+        <v-btn color="primary" :loading="loading" @click="fetchList"
+          >검색</v-btn
+        >
+      </div>
+
+      <v-alert
+        v-if="errorMsg"
+        type="error"
+        variant="tonal"
+        density="compact"
+        class="mb-2"
+      >
+        {{ errorMsg }}
+      </v-alert>
+
+      <v-table density="compact" fixed-header height="360">
+        <thead>
+          <tr>
+            <th class="text-left">Dataset Name</th>
+            <th class="text-left">Images</th>
+            <th class="text-left">Label Type</th>
+            <th class="text-left">Base Path</th>
+            <th class="text-left">Action</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(r, i) in rows" :key="i">
+            <td>{{ r.ds_dataset_name }}</td>
+            <td>{{ r.ds_dataset_image_count }}</td>
+            <td>{{ r.labelling_tool_kr }}</td>
+            <td>{{ r.ds_dataset_base_path }}</td>
+            <td>
+              <v-btn size="small" color="primary" @click="pick(r)"
+                >Select</v-btn
+              >
+            </td>
+          </tr>
+          <tr v-if="!loading && rows.length === 0">
+            <td colspan="5" class="text-center text-medium-emphasis">
+              No data
+            </td>
+          </tr>
+        </tbody>
+      </v-table>
+    </v-card-text>
+
+    <v-card-actions class="justify-end px-4 py-2">
+      <v-btn variant="text" @click="close">Close</v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
diff --git a/src/components/common/LayoutComponent.vue b/src/components/common/LayoutComponent.vue
index bb2896e..f10b122 100644
--- a/src/components/common/LayoutComponent.vue
+++ b/src/components/common/LayoutComponent.vue
@@ -148,6 +148,7 @@ function logOut() {
     .catch(console.error)
     .finally(() => {
       localStorage.removeItem("autoflow-auth");
+      localStorage.removeItem("external-auth");
       localStorage.removeItem("projectName");
       localStorage.removeItem("projectId");
       sessionStorage.removeItem("initialRedirectDone");
@@ -206,9 +207,8 @@ onBeforeUnmount(() => {
 <template>
   <v-app>
     <!-- ===== 상단 탑바 ===== -->
-    <v-app-bar flat height="75" class="topbar">
-      <!-- 좌측: 홈(브랜드) 버튼 -->
-      <v-btn
+    <v-app-bar flat height="64" class="topbar">
+      <div
         variant="text"
         size="large"
         class="brand-btn text-h5 text-primary"
@@ -216,21 +216,59 @@ onBeforeUnmount(() => {
         aria-label="Home"
       >
         AUTOFLOW WEB CONSOLE
-      </v-btn>
+      </div>
 
       <!-- 중앙: 메뉴 그룹 (Settings 전/후 분기) -->
       <div class="center-nav d-none d-md-flex" v-if="!hideAllMenus">
         <!-- 관리자 메뉴: showAdminTabs 조건으로 표시 -->
+        <!-- 관리자 메뉴바: 기본 메뉴바와 1:1 동일 구조 -->
         <template v-if="showAdminTabs">
           <template v-for="(m, i) in adminMenus" :key="'am_' + i">
+            <!-- 드롭다운 있는 항목 -->
+            <v-menu
+              v-if="m.depth?.length"
+              open-on-hover
+              close-on-content-click
+              location="bottom"
+            >
+              <template #activator="{ props }">
+                <v-btn
+                  v-bind="props"
+                  variant="text"
+                  class="nav-btn"
+                  :class="{
+                    'nav-active': m.depth?.some((d: any) =>
+                      isLinkActive(d.path),
+                    ),
+                  }"
+                  append-icon="mdi-chevron-down"
+                >
+                  <v-icon start :icon="m.icon" class="mr-1" />
+                  {{ m.title }}
+                </v-btn>
+              </template>
+
+              <v-list density="compact" class="min-w-48">
+                <v-list-item
+                  v-for="(d, j) in m.depth"
+                  :key="'amd_' + j"
+                  :title="d.title"
+                  :to="d.path"
+                  :active="isLinkActive(d.path)"
+                  active-class="nav-active"
+                />
+              </v-list>
+            </v-menu>
+
+            <!-- 드롭다운 없는 단일 항목 -->
             <v-btn
+              v-else
               variant="text"
               class="nav-btn"
-              :prepend-icon="m.icon"
-              :to="m.path"
-              :color="isLinkActive(m.path) ? 'primary' : undefined"
               :class="{ 'nav-active': isLinkActive(m.path) }"
+              @click="m.path && router.push(m.path)"
             >
+              <v-icon start :icon="m.icon" class="mr-1" />
               {{ m.title }}
             </v-btn>
           </template>
@@ -244,12 +282,13 @@ onBeforeUnmount(() => {
               open-on-hover
               close-on-content-click
               location="bottom"
+              transition="scale-transition"
             >
               <template #activator="{ props }">
                 <v-btn
                   v-bind="props"
                   variant="text"
-                  class="nav-btn"
+                  class="nav-btn text-white"
                   :class="{
                     'nav-active': m.depth?.some((d: any) =>
                       isLinkActive(d.path),
@@ -261,16 +300,56 @@ onBeforeUnmount(() => {
                   {{ m.title }}
                 </v-btn>
               </template>
-              <v-list density="compact" class="min-w-48">
-                <v-list-item
-                  v-for="(d, j) in m.depth"
-                  :key="'d_' + j"
-                  :title="d.title"
-                  :to="d.path"
-                  :active="isLinkActive(d.path)"
-                  :color="isLinkActive(d.path) ? 'primary' : undefined"
-                />
-              </v-list>
+
+              <!-- ✅ 여기부터: Run 전용 디자인 -->
+              <template
+                v-if="
+                  (m.title && m.title.toLowerCase() === 'run') ||
+                  (m.path && m.path.startsWith('/run'))
+                "
+              >
+                <v-card
+                  rounded="lg"
+                  elevation="12"
+                  color="surface"
+                  class="px-2 py-2"
+                >
+                  <v-list density="comfortable" lines="one" class="min-w-48">
+                    <template v-for="(d, j) in m.depth" :key="'run_' + j">
+                      <v-hover v-slot="{ isHovering, props: liProps }">
+                        <v-list-item
+                          v-bind="liProps"
+                          :title="d.title"
+                          :to="d.path"
+                          :active="isLinkActive(d.path)"
+                          color="primary"
+                          :rounded="'lg'"
+                          :variant="
+                            isHovering || isLinkActive(d.path)
+                              ? 'tonal'
+                              : 'text'
+                          "
+                          class="mx-2 my-1 text-white"
+                        />
+                      </v-hover>
+                    </template>
+                  </v-list>
+                </v-card>
+              </template>
+
+              <!-- 기본 하위메뉴 (Run 이외는 기존 그대로) -->
+              <template v-else>
+                <v-list density="compact" class="min-w-48 subnav-list">
+                  <v-list-item
+                    v-for="(d, j) in m.depth"
+                    :key="'d_' + j"
+                    :title="d.title"
+                    :to="d.path"
+                    class="submenu-item text-white"
+                    :class="{ 'submenu-active': isLinkActive(d.path) }"
+                  />
+                </v-list>
+              </template>
             </v-menu>
 
             <v-btn
@@ -315,7 +394,7 @@ onBeforeUnmount(() => {
             v-bind="props"
             aria-label="Project"
           >
-            <v-icon>mdi-home</v-icon>
+            <v-icon>mdi-file-tree</v-icon>
           </v-btn>
         </template>
       </v-tooltip>
@@ -383,16 +462,42 @@ onBeforeUnmount(() => {
   align-items: center;
 }
 
-/* 네비게이션 버튼 스타일 */
 .nav-btn {
-  height: 40px;
   text-transform: none;
   border-radius: 10px;
-  padding: 0 10px;
-  font-size: 16px;
+  padding: 0 16px;
+  font-size: 14px;
+  color: #fff !important; /* 흰색 텍스트 통일 */
+}
+
+.nav-btn:hover {
+  background: rgba(59, 130, 246, 0.08);
 }
+
 .nav-active {
-  background: rgba(59, 130, 246, 0.15);
+  background: rgba(59, 130, 246, 0.22);
+  height: 46px;
+  color: #fff !important;
+}
+
+/* 드롭다운(하위 메뉴)도 동일 룩으로 */
+.subnav-list {
+  background: transparent; /* 탑바 느낌 유지 */
+}
+
+.submenu-item {
+  color: #fff !important;
+  border-radius: 10px;
+  margin: 2px 8px;
+}
+
+.submenu-item:hover {
+  background: rgba(59, 130, 246, 0.08);
+}
+
+.submenu-active {
+  background: rgba(59, 130, 246, 0.22);
+  color: #fff !important;
 }
 .min-w-48 {
   min-width: 12rem;
diff --git a/src/components/service/management/DatasetService.ts b/src/components/service/management/DatasetService.ts
new file mode 100644
index 0000000..34d2949
--- /dev/null
+++ b/src/components/service/management/DatasetService.ts
@@ -0,0 +1,35 @@
+// src/components/service/management/DatasetService.ts
+import { request } from "@/components/service/index";
+
+export interface ExternalListQuery {
+  ds_prj_idx: number;
+  search_keyword?: string;
+  grp_name?: string;
+}
+export interface ExternalDatasetItem {
+  ds_dataset_name: string;
+  ds_dataset_image_count: number;
+  labelling_tool_kr: string;
+  ds_dataset_base_path: string;
+}
+export interface SaveExternalDatasetPayload {
+  datasetName: string;
+  path: string;
+  refId: number;
+  refType: "DATASET";
+  title: string;
+  description?: string;
+  version: number;
+  regUserId: string;
+  projectId: number;
+}
+
+export const DatasetService = {
+  listExternal(query: ExternalListQuery) {
+    return request.get("/api/datasets/list", query as any);
+  },
+
+  saveExternal(payload: SaveExternalDatasetPayload) {
+    return request.post("/api/datasets/dataset/save", payload);
+  },
+};
diff --git a/src/components/service/management/ExternalAuthControllerService.ts b/src/components/service/management/ExternalAuthControllerService.ts
new file mode 100644
index 0000000..6952f78
--- /dev/null
+++ b/src/components/service/management/ExternalAuthControllerService.ts
@@ -0,0 +1,22 @@
+import { request } from "@/components/service/index";
+
+export const ExternalAuthControllerService = {
+  signIn: (id: string, password: string) => {
+    return request.post("/api/external-auth/signin", { id, password });
+  },
+
+  add: (token: string, edgePkgInfoVO: string, file: any) => {
+    return request.post("/api/external-auth/add", {
+      token,
+      edgePkgInfoVO,
+      file,
+    });
+  },
+
+  search: (id: string, token: string) => {
+    return request.get("/api/external-auth/edge-search", {
+      id,
+      token,
+    });
+  },
+};
diff --git a/src/components/templates/Datasets/ListComponent.vue b/src/components/templates/Datasets/ListComponent.vue
index 4d6f90e..824caa3 100644
--- a/src/components/templates/Datasets/ListComponent.vue
+++ b/src/components/templates/Datasets/ListComponent.vue
@@ -6,6 +6,7 @@ import { computed, onMounted, ref, watch } from "vue";
 import { storage } from "@/utils/storage";
 import ViewComponent from "@/components/templates/Datasets/ViewComponent.vue";
 import DatasetBaseDoalog from "@/components/atoms/organisms/DatasetBaseDoalog.vue";
+import ExternalDatasetDialog from "@/components/atoms/organisms/ExternalDatasetDialog.vue";
 import { AttachmentsService } from "@/components/service/management/AttachmentsService";
 import { commonStore } from "@/stores/commonStore";
 import { useRoute, useRouter } from "vue-router";
@@ -17,7 +18,7 @@ const activeRefName = computed(() => String(route.query.refName));
 const store = commonStore();
 const openView = ref(false);
 const openModify = ref(false);
-
+const externalVisible = ref(false);
 const username = ref<string>("");
 
 // ===== 검색/페이지네이션(워크플로우 화면과 동일 패턴) =====
@@ -68,6 +69,7 @@ const data = ref({
   allSelected: false,
   selected: [] as Array<{ deviceKey: number }>,
   isCreateVisible: false,
+  isExternalVisible: false,
   isUploadVisible: false,
   isModalVisible: false,
   isConfirmDialogVisible: false,
@@ -284,6 +286,14 @@ const removeData = (value?: Array<{ deviceKey: number }>) => {
   }
 };
 
+function openExternal() {
+  externalVisible.value = true;
+}
+
+function onPickExternal(item: any) {
+  console.log("picked external dataset:", item);
+}
+
 const closeDetail = () => {
   openView.value = false;
 };
@@ -329,6 +339,14 @@ const getSelectedAllData = () => {
     ? data.value.results.map((item: any) => ({ deviceKey: item.deviceKey }))
     : [];
 };
+function onPickExternalSaved() {
+  fetchList();
+  store.setSnackbarMsg({
+    color: "success",
+    text: "외부 데이터셋이 등록되었습니다.",
+    result: 200,
+  });
+}
 onMounted(() => {
   username.value = readUsernameFromStorage();
   activeRefId.value = getRefIdFromRoute(route.query);
@@ -356,7 +374,7 @@ watch(
         <v-card flat class="bg-shades-transparent w-100">
           <v-card-item class="text-h5 font-weight-bold pt-0 pa-5 pl-0">
             <div class="d-flex flex-row justify-start align-center">
-              <div class="text-primary">Datasets</div>
+              <div>Datasets</div>
             </div>
           </v-card-item>
         </v-card>
@@ -458,9 +476,12 @@ watch(
               </v-sheet>
             </v-sheet>
 
-            <v-sheet class="justify-end mb-2">
+            <v-sheet class="justify-end mb-2 mr-2">
               <v-btn color="info" @click="openCreateModal">Add Dataset</v-btn>
             </v-sheet>
+            <v-sheet class="justify-end mb-2">
+              <v-btn color="info" @click="openExternal">External Dataset</v-btn>
+            </v-sheet>
           </v-sheet>
 
           <!-- 목록 -->
@@ -551,6 +572,14 @@ watch(
         :user-option="data.userOption"
       />
     </v-dialog>
+    <v-dialog v-model="externalVisible" max-width="900" persistent>
+      <ExternalDatasetDialog
+        :project-id="getProjectId()"
+        :ref-id="activeRefId"
+        @close="externalVisible = false"
+        @saved="onPickExternalSaved"
+      />
+    </v-dialog>
   </div>
 
   <div class="w-100" v-else>
diff --git a/src/components/templates/Datasets/ViewComponent.vue b/src/components/templates/Datasets/ViewComponent.vue
index 220b3aa..cebca34 100644
--- a/src/components/templates/Datasets/ViewComponent.vue
+++ b/src/components/templates/Datasets/ViewComponent.vue
@@ -170,7 +170,7 @@ watch(
       <v-card flat class="bg-shades-transparent w-100">
         <v-card-item class="text-h5 font-weight-bold pt-0 pa-5 pl-0">
           <div class="d-flex flex-row justify-start align-center">
-            <div class="text-primary">View Details</div>
+            <div>View Details</div>
           </div>
         </v-card-item>
       </v-card>
diff --git a/src/components/templates/datagroup/ListComponent.vue b/src/components/templates/datagroup/ListComponent.vue
index 5d00678..8196f14 100644
--- a/src/components/templates/datagroup/ListComponent.vue
+++ b/src/components/templates/datagroup/ListComponent.vue
@@ -374,7 +374,7 @@ onMounted(fetchList);
         <v-card flat class="bg-shades-transparent w-100">
           <v-card-item class="text-h5 font-weight-bold pt-0 pa-5 pl-0">
             <div class="d-flex flex-row justify-start align-center">
-              <div class="text-primary">DataGroup</div>
+              <div>DataGroup</div>
             </div>
           </v-card-item>
         </v-card>
diff --git a/src/components/templates/deployment/ListComponent.vue b/src/components/templates/deployment/ListComponent.vue
index 6e4b911..743c720 100644
--- a/src/components/templates/deployment/ListComponent.vue
+++ b/src/components/templates/deployment/ListComponent.vue
@@ -2,14 +2,28 @@
 import IconDeleteBtn from "@/components/atoms/button/IconDeleteBtn.vue";
 import IconModifyBtn from "@/components/atoms/button/IconModifyBtn.vue";
 import IconSettingBtn from "@/components/atoms/button/IconSettingBtn.vue";
-// import FormComponent from "@/components/device/FormComponent.vue";
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref, nextTick } from "vue";
 import ViewComponent from "@/components/templates/deployment/ViewComponent.vue";
 import DeploymentDialog from "@/components/atoms/organisms/DeploymentDialog.vue";
-// const store = commonStore();
+import { ExternalAuthControllerService } from "@/components/service/management/ExternalAuthControllerService";
 
 const openView = ref(false);
 const isEditVisible = ref(false);
+const loginDialog = ref(false);
+const loginLoading = ref(false);
+const loginForm = ref({ id: "", password: "" });
+const loginError = ref("");
+const isAuthenticated = ref(false);
+
+type ExternalAuth = { id: string; name: string; token: string };
+const AUTH_KEY = "external-auth";
+const externalAuth = ref<ExternalAuth | null>(null);
+
+type PackageOption = { label: string; value: string; raw: any };
+const packageOptions = ref<PackageOption[]>([]);
+const packagesLoading = ref(false);
+const packagesError = ref("");
+
 const tableHeader = [
   { label: "No", width: "5%", style: "word-break: keep-all;" },
   { label: "Model Name", width: "20%", style: "word-break: keep-all;" },
@@ -38,33 +52,138 @@ const pageSizeOptions = [
 ];
 
 const data = ref({
-  params: {
-    pageNum: 1,
-    pageSize: 10,
-    searchType: "",
-    searchText: "",
-  },
-  results: [],
+  params: { pageNum: 1, pageSize: 10, searchType: "", searchText: "" },
+  results: [] as any[],
   totalDataLength: 0,
   pageLength: 0,
   modalMode: "",
-  selectedData: null,
+  selectedData: null as any,
   allSelected: false,
-  selected: [],
+  selected: [] as any[],
   isEditVisible: false,
   isModalVisible: false,
   isConfirmDialogVisible: false,
-  userOption: [],
+  userOption: [] as any[],
 });
 
-const getCodeList = () => {
-  // UserService.search(data.value.params).then((d) => {
-  //   if (d.status === 200) {
-  //     data.value.userOption = d.data.userList;
-  //   }
-  // });
+const handleLogin = async () => {
+  try {
+    loginLoading.value = true;
+    loginError.value = "";
+
+    const { id, password } = loginForm.value;
+    if (!id || !password) {
+      loginError.value = "ID와 비밀번호를 입력하세요.";
+      return;
+    }
+
+    const res = await ExternalAuthControllerService.signIn(id, password);
+    const raw = res?.data ?? res;
+    if (raw == null) {
+      loginError.value = "로그인에 실패했습니다. (서버 응답이 비어있습니다)";
+      return;
+    }
+    const payload = Object.prototype.hasOwnProperty.call(raw, "data")
+      ? raw.data
+      : raw;
+    if (!payload?.token) {
+      loginError.value = "로그인에 실패했습니다. 아이디/비밀번호를 확인하세요.";
+      return;
+    }
+
+    const toSave: ExternalAuth = {
+      id: payload.id ?? id,
+      name: payload.name ?? id,
+      token: payload.token,
+    };
+    localStorage.setItem(AUTH_KEY, JSON.stringify(toSave));
+    externalAuth.value = toSave;
+    isAuthenticated.value = true;
+
+    loginDialog.value = false;
+    loginForm.value = { id: "", password: "" };
+
+    await nextTick();
+    openDeploymentModal(); // ✅ 로그인 직후 자동 오픈
+  } catch (e: any) {
+    loginError.value =
+      e?.response?.data?.message || e?.message || "로그인에 실패했습니다.";
+  } finally {
+    loginLoading.value = false;
+  }
+};
+
+const handleLogout = () => {
+  localStorage.removeItem(AUTH_KEY);
+  isAuthenticated.value = false;
+  externalAuth.value = null;
+  packageOptions.value = [];
 };
 
+onMounted(() => {
+  const raw = localStorage.getItem(AUTH_KEY);
+  if (raw) {
+    try {
+      const parsed = JSON.parse(raw) as ExternalAuth;
+      if (parsed?.token) {
+        isAuthenticated.value = true;
+        externalAuth.value = parsed;
+      }
+    } catch {}
+  }
+  getData();
+  getCodeList();
+});
+
+const openDeploymentModal = async () => {
+  if (!isAuthenticated.value) {
+    loginDialog.value = true;
+    return;
+  }
+
+  data.value.selectedData = null;
+  data.value.modalMode = "create";
+  isEditVisible.value = true;
+
+  packagesError.value = "";
+  packageOptions.value = [];
+
+  const auth =
+    externalAuth.value ||
+    (() => {
+      try {
+        const raw = localStorage.getItem(AUTH_KEY);
+        return raw ? (JSON.parse(raw) as ExternalAuth) : null;
+      } catch {
+        return null;
+      }
+    })();
+
+  if (!auth?.id || !auth?.token) {
+    packagesError.value = "로그인 정보가 없습니다.";
+    return;
+  }
+
+  try {
+    packagesLoading.value = true;
+    const res = await ExternalAuthControllerService.search(auth.id, auth.token);
+    const body = res?.data ?? res;
+    const list = body?.data?.data ?? body?.data ?? body?.result ?? body ?? [];
+    const arr = Array.isArray(list) ? list : [];
+    packageOptions.value = arr.map((it: any) => ({
+      label: it?.package_name || it?.package_id || "Unknown",
+      value: it?.package_id,
+      raw: it,
+    }));
+  } catch (e: any) {
+    packagesError.value =
+      e?.response?.data?.message || e?.message || "패키지 조회 실패";
+  } finally {
+    packagesLoading.value = false;
+  }
+};
+
+const getCodeList = () => {};
 const getData = () => {
   data.value.results = [
     {
@@ -156,101 +275,10 @@ const setPaginationLength = () => {
   }
 };
 
-const saveData = (formData) => {
-  if (data.value.modalMode === "create") {
-    // DeviceService.add(formData).then((d) => {
-    //   if (d.status === 200) {
-    //     data.value.isModalVisible = false;
-    //     store.setSnackbarMsg({
-    //       text: "등록 되었습니다.",
-    //       result: 200,
-    //     });
-    //     changePageNum(1);
-    //   } else {
-    //     store.setSnackbarMsg({
-    //       text: d,
-    //       result: 500,
-    //     });
-    //   }
-    // });
-  } else {
-    // DeviceService.update(formData.deviceKey, formData).then((d) => {
-    //   if (d.status === 200) {
-    //     data.value.isModalVisible = false;
-    //     store.setSnackbarMsg({
-    //       text: "수정 되었습니다.",
-    //       result: 200,
-    //     });
-    //     changePageNum();
-    //   } else {
-    //     store.setSnackbarMsg({
-    //       text: d,
-    //       result: 500,
-    //     });
-    //   }
-    // });
-  }
-};
-
-const removeData = (value) => {
-  let removeList = value ? value : data.value.selected;
-  const remove = (code) => {
-    // return DeviceService.delete(code).then((d) => {
-    //   if (d.status !== 200) {
-    //     store.setSnackbarMsg({
-    //       text: d,
-    //       result: 500,
-    //     });
-    //   }
-    // });
-  };
-
-  if (removeList.length === 1) {
-    remove(removeList[0].deviceKey).then(() => {
-      // store.setSnackbarMsg({
-      //   text: "삭제되었습니다.",
-      //   result: 200,
-      // });
-      changePageNum();
-      data.value.isConfirmDialogVisible = false;
-      data.value.selected = [];
-      data.value.allSelected = false;
-    });
-  } else {
-    Promise.all(removeList.map((item) => remove(item.deviceKey))).finally(
-      () => {
-        // store.setSnackbarMsg({
-        //   text: "모두 삭제되었습니다.",
-        //   result: 200,
-        // });
-        changePageNum();
-        data.value.isConfirmDialogVisible = false;
-        data.value.selected = [];
-        data.value.allSelected = false;
-      },
-    );
-  }
-};
-
-const handleRemoveData = () => {
-  if (data.value.selected.length === 0) {
-    // store.setSnackbarMsg({
-    //   text: "삭제 할 데이터를 선택해주세요. ",
-    //   result: 500,
-    // });
-    return;
-  }
-  if (data.value.allSelected || data.value.selected.length !== 1) {
-    data.value.isConfirmDialogVisible = true;
-    return;
-  }
-  //리스트로 삭제 할때
-  removeData(undefined);
-};
-
-const handleRefresh = () => {
-  alert("Refresh 작업 진행중...");
-};
+const saveData = (_: any) => {};
+const removeData = (_: any) => {};
+const handleRemoveData = () => {};
+const handleRefresh = () => alert("Refresh 작업 진행중...");
 const openInfoModal = () => {
   data.value.modalMode = "info";
   openView.value = true;
@@ -258,69 +286,37 @@ const openInfoModal = () => {
 const closeDetail = () => {
   openView.value = false;
 };
-const changePageNum = (page) => {
+const changePageNum = (page: number) => {
   data.value.params.pageNum = page;
   getData();
 };
-const openSettingModal = (selectedItem) => {
+const openSettingModal = (selectedItem: any) => {
   data.value.selectedData = selectedItem;
   data.value.modalMode = "setting";
   openView.value = true;
 };
-const openModifyModal = (selectedItem) => {
+const openModifyModal = (selectedItem: any) => {
   data.value.selectedData = selectedItem;
   data.value.modalMode = "modify";
   data.value.isModalVisible = true;
 };
-
-const openDeploymentModal = () => {
-  data.value.selectedData = null;
-  data.value.modalMode = "create";
-  isEditVisible.value = true;
-};
-
 const closeModal = () => {
   data.value.isModalVisible = false;
   data.value.selectedData = null;
 };
 const closeCreateModal = () => {
   data.value.isModalVisible = false;
-  isEditVisible.value = null;
+  isEditVisible.value = false;
 };
 const getSelectedAllData = () => {
   data.value.selected = data.value.allSelected
-    ? data.value.results.map((item) => {
-        return {
-          deviceKey: item.deviceKey,
-        };
-      })
+    ? data.value.results.map((item: any) => ({ deviceKey: item.deviceKey }))
     : [];
 };
-
-onMounted(() => {
-  getData();
-  getCodeList();
-});
 </script>
 
 <template>
   <div class="w-100" v-if="!openView">
-    <!--  <v-dialog v-model="data.isModalVisible" max-width="600" persistent>-->
-    <!--    <FormComponent-->
-    <!--      :edit-data="data.selectedData"-->
-    <!--      :mode="data.modalMode"-->
-    <!--      @close-modal="closeModal"-->
-    <!--      @handle-data="saveData"-->
-    <!--      :user-option="data.userOption"-->
-    <!--    />-->
-    <!--  </v-dialog>-->
-    <!--  <v-dialog v-model="data.isConfirmDialogVisible" persistent max-width="300">-->
-    <!--    <ConfirmDialogComponent-->
-    <!--      @cancel="data.isConfirmDialogVisible = false"-->
-    <!--      @delete="removeData(undefined)"-->
-    <!--      @init="(data.selected = []), (data.allSelected = false)"-->
-    <!--    />-->
-    <!--  </v-dialog>-->
     <v-container fluid class="h-100 pa-5 d-flex flex-column align-center">
       <v-card
         flat
@@ -329,10 +325,11 @@ onMounted(() => {
         <v-card flat class="bg-shades-transparent w-100">
           <v-card-item class="text-h5 font-weight-bold pt-0 pa-5 pl-0">
             <div class="d-flex flex-row justify-start align-center">
-              <div class="text-primary">Deployment</div>
+              <div>Deployment</div>
             </div>
           </v-card-item>
         </v-card>
+
         <v-card flat class="bg-shades-transparent w-100">
           <v-card flat class="bg-shades-transparent mb-4">
             <div class="d-flex justify-center flex-wrap align-center">
@@ -349,8 +346,9 @@ onMounted(() => {
                   item-title="searchType"
                   item-value="searchText"
                   hide-details
-                ></v-select>
+                />
               </v-responsive>
+
               <v-responsive min-width="540" max-width="540">
                 <v-text-field
                   v-model="data.params.searchText"
@@ -361,7 +359,7 @@ onMounted(() => {
                   class="mt-3 mb-3"
                   hide-details
                   @keyup.enter="changePageNum(1)"
-                ></v-text-field>
+                />
               </v-responsive>
 
               <div class="ml-3">
@@ -371,7 +369,7 @@ onMounted(() => {
                   :rounded="5"
                   @click="changePageNum(1)"
                 >
-                  <v-icon> mdi-magnify</v-icon>
+                  <v-icon>mdi-magnify</v-icon>
                 </v-btn>
               </div>
             </div>
@@ -385,8 +383,8 @@ onMounted(() => {
                 class="d-flex align-center mr-3 mb-2 bg-shades-transparent"
               >
                 <v-chip color="primary"
-                  >총 {{ data.totalDataLength.toLocaleString() }}개
-                </v-chip>
+                  >총 {{ data.totalDataLength.toLocaleString() }}개</v-chip
+                >
               </v-sheet>
               <v-sheet class="bg-shades-transparent">
                 <v-responsive max-width="140" min-width="140" class="mb-2">
@@ -400,14 +398,26 @@ onMounted(() => {
                     color="primary"
                     hide-details
                     @update:model-value="changePageNum(1)"
-                  ></v-select>
+                  />
                 </v-responsive>
               </v-sheet>
             </v-sheet>
+
             <v-sheet class="justify-end mb-2">
-              <v-btn color="info" class="mr-4" @click="handleRefresh"
-                >Refresh
+              <v-btn
+                class="mr-4"
+                color="primary"
+                :rounded="5"
+                @click="isAuthenticated ? handleLogout() : (loginDialog = true)"
+              >
+                <v-icon start>{{
+                  isAuthenticated ? "mdi-logout" : "mdi-login"
+                }}</v-icon>
+                {{ isAuthenticated ? "Logout" : "Login" }}
               </v-btn>
+              <v-btn color="info" class="mr-4" @click="handleRefresh"
+                >Refresh</v-btn
+              >
               <v-btn color="info" @click="openDeploymentModal"
                 >Deployment</v-btn
               >
@@ -442,7 +452,7 @@ onMounted(() => {
                           :indeterminate="data.allSelected === true"
                           hide-details
                           @change="getSelectedAllData"
-                        ></v-checkbox>
+                        />
                       </th>
                       <th
                         v-for="(item, i) in tableHeader"
@@ -472,41 +482,35 @@ onMounted(() => {
                       <td class="text-start">{{ item.modelName }}</td>
                       <td>{{ item.version }}</td>
                       <td>{{ item.duration }}</td>
-
                       <td>
                         <v-icon
                           v-if="item.deployStatus === 'success'"
                           color="success"
+                          >mdi-checkbox-marked-circle</v-icon
                         >
-                          mdi-checkbox-marked-circle
-                        </v-icon>
                         <v-icon
                           v-else-if="item.deployStatus === 'in_progress'"
                           spin
+                          >mdi-loading</v-icon
                         >
-                          mdi-loading
-                        </v-icon>
-                        <v-icon v-else color="error"> mdi-close-circle </v-icon>
+                        <v-icon v-else color="error">mdi-close-circle</v-icon>
                       </td>
                       <td>
                         <v-icon
                           v-if="item.downloadStatus === 'success'"
                           color="success"
+                          >mdi-checkbox-marked-circle</v-icon
                         >
-                          mdi-checkbox-marked-circle
-                        </v-icon>
                         <v-icon
                           v-else-if="item.downloadStatus === 'in_progress'"
                           spin
+                          >mdi-loading</v-icon
                         >
-                          mdi-loading
-                        </v-icon>
                         <v-icon
                           v-else-if="item.downloadStatus === 'failure'"
                           color="error"
+                          >mdi-close-circle</v-icon
                         >
-                          mdi-close-circle
-                        </v-icon>
                         <span v-else>-</span>
                       </td>
                       <td>{{ item.deployedAt }}</td>
@@ -518,6 +522,7 @@ onMounted(() => {
                   </tbody>
                 </v-table>
               </v-sheet>
+
               <v-card-actions class="text-center mt-8 justify-center">
                 <v-pagination
                   v-model="data.params.pageNum"
@@ -526,23 +531,88 @@ onMounted(() => {
                   color="primary"
                   rounded="circle"
                   @update:model-value="getData"
-                ></v-pagination>
+                />
               </v-card-actions>
             </v-col>
           </v-card>
         </v-card>
       </v-card>
+
       <v-dialog v-model="isEditVisible" max-width="800" persistent>
         <DeploymentDialog
           :edit-data="data.selectedData"
           :mode="data.modalMode"
+          :packages="packageOptions"
+          :packages-loading="packagesLoading"
+          :packages-error="packagesError"
           @close-modal="closeCreateModal"
           @handle-data="saveData"
           :user-option="data.userOption"
         />
       </v-dialog>
+
+      <v-dialog v-model="loginDialog" max-width="450" persistent>
+        <v-card>
+          <v-card-title
+            class="text-white font-weight-bold text-h6"
+            style="background-color: #1976d2"
+            >외부 로그인</v-card-title
+          >
+          <v-card-text class="pa-6">
+            <v-form @submit.prevent="handleLogin">
+              <div class="mb-5">
+                <label class="text-subtitle-2 font-weight-medium mb-1 d-block"
+                  >ID</label
+                >
+                <v-text-field
+                  v-model="loginForm.id"
+                  variant="outlined"
+                  :disabled="loginLoading"
+                  dense
+                  hide-details="auto"
+                  autocomplete="username"
+                  required
+                  @keyup.enter.prevent="handleLogin"
+                />
+              </div>
+              <div class="mb-5">
+                <label class="text-subtitle-2 font-weight-medium mb-1 d-block"
+                  >Password</label
+                >
+                <v-text-field
+                  v-model="loginForm.password"
+                  variant="outlined"
+                  :disabled="loginLoading"
+                  dense
+                  hide-details="auto"
+                  type="password"
+                  autocomplete="current-password"
+                  required
+                  @keyup.enter.prevent="handleLogin"
+                />
+              </div>
+              <div v-if="loginError" class="mt-3 text-error">
+                {{ loginError }}
+              </div>
+            </v-form>
+          </v-card-text>
+          <v-card-actions class="justify-end" style="padding: 16px 24px">
+            <v-btn color="success" :loading="loginLoading" @click="handleLogin"
+              >Login</v-btn
+            >
+            <v-btn
+              text
+              class="white--text"
+              :disabled="loginLoading"
+              @click="loginDialog = false"
+              >Close</v-btn
+            >
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
     </v-container>
   </div>
+
   <div class="w-100" v-else>
     <ViewComponent @close="closeDetail" />
   </div>
diff --git a/src/components/templates/deployment/ViewComponent.vue b/src/components/templates/deployment/ViewComponent.vue
index 49bb278..7494129 100644
--- a/src/components/templates/deployment/ViewComponent.vue
+++ b/src/components/templates/deployment/ViewComponent.vue
@@ -236,7 +236,7 @@ onMounted(() => {
       <v-card flat class="bg-shades-transparent w-100">
         <v-card-item class="text-h5 font-weight-bold pt-0 pa-5 pl-0">
           <div class="d-flex flex-row justify-start align-center">
-            <div class="text-primary">View Details</div>
+            <div>View Details</div>
           </div>
         </v-card-item>
       </v-card>
diff --git a/src/components/templates/projects/ListComponent.vue b/src/components/templates/projects/ListComponent.vue
index 7c18da5..3a433ad 100644
--- a/src/components/templates/projects/ListComponent.vue
+++ b/src/components/templates/projects/ListComponent.vue
@@ -511,7 +511,7 @@ onMounted(async () => {
         <v-card flat class="bg-shades-transparent w-100">
           <v-card-item class="text-h5 font-weight-bold pt-0 pa-5 pl-0">
             <div class="d-flex flex-row justify-start align-center">
-              <div class="text-primary">Projects</div>
+              <div>Projects</div>
             </div>
           </v-card-item>
         </v-card>
diff --git a/src/components/templates/run/executions/CompareComponent.vue b/src/components/templates/run/executions/CompareComponent.vue
index b41ad54..1e58c53 100644
--- a/src/components/templates/run/executions/CompareComponent.vue
+++ b/src/components/templates/run/executions/CompareComponent.vue
@@ -264,7 +264,7 @@ onMounted(() => {
       <v-card flat class="bg-shades-transparent w-100">
         <v-card-item class="text-h5 font-weight-bold pt-0 pa-5 pl-0">
           <div class="d-flex flex-row justify-start align-center">
-            <div class="text-primary">Compare Executions</div>
+            <div>Compare Executions</div>
           </div>
         </v-card-item>
       </v-card>
diff --git a/src/components/templates/run/executions/ListComponent.vue b/src/components/templates/run/executions/ListComponent.vue
index d958e1a..b3366de 100644
--- a/src/components/templates/run/executions/ListComponent.vue
+++ b/src/components/templates/run/executions/ListComponent.vue
@@ -569,7 +569,7 @@ onMounted(() => {
         <v-card flat class="bg-shades-transparent w-100">
           <v-card-item class="text-h5 font-weight-bold pt-0 pa-5 pl-0">
             <div class="d-flex flex-row justify-start align-center">
-              <div class="text-primary">Executions</div>
+              <div>Executions</div>
             </div>
           </v-card-item>
         </v-card>
diff --git a/src/components/templates/run/executions/ListComponentback.vue b/src/components/templates/run/executions/ListComponentback.vue
deleted file mode 100644
index d0500d4..0000000
--- a/src/components/templates/run/executions/ListComponentback.vue
+++ /dev/null
@@ -1,563 +0,0 @@
-<script setup lang="ts">
-import IconInfoBtn from "@/components/atoms/button/IconInfoBtn.vue";
-import IconModifyBtn from "@/components/atoms/button/IconModifyBtn.vue";
-import { computed, onMounted, ref, watch } from "vue";
-import IconDownloadBtn from "@/components/atoms/button/IconDownloadBtn.vue";
-import CompareComponent from "@/components/templates/run/executions/CompareComponent.vue";
-import ViewComponent from "@/components/templates/run/executions/ViewComponent.vue";
-import ExecutionBaseDialog from "@/components/atoms/organisms/ExecutionBaseDialog.vue";
-import { ExecutionsService } from "@/components/service/management/ExecutionsService";
-// const store = commonStore();
-
-const openCompare = ref(false);
-const openView = ref(false);
-const runsLoading = ref(false);
-
-// ✅ 파라미터 없이 1회 호출만 해서 콘솔에 출력
-// ✅ 상태 라벨 매핑 (아이콘 로직이 'Succeeded'/'Failed' 기준이라 맞춰줌)
-function toUiStatus(state?: string) {
-  switch ((state || "").toUpperCase()) {
-    case "SUCCEEDED":
-      return "Succeeded";
-    case "FAILED":
-      return "Failed";
-    case "RUNNING":
-      return "Running";
-    case "PENDING":
-      return "Pending";
-    case "SKIPPED":
-      return "Skipped";
-    default:
-      return state || "-";
-  }
-}
-
-// ✅ 시간 포맷/지속시간 유틸
-function fmtStart(start?: string) {
-  if (!start) return "-";
-  const d = new Date(start);
-  if (isNaN(d.getTime())) return start;
-  const yyyy = d.getFullYear();
-  const MM = String(d.getMonth() + 1).padStart(2, "0");
-  const dd = String(d.getDate()).padStart(2, "0");
-  const hh = String(d.getHours()).padStart(2, "0");
-  const mi = String(d.getMinutes()).padStart(2, "0");
-  return `${yyyy}-${MM}-${dd} ${hh}:${mi}`;
-}
-function fmtDuration(start?: string, end?: string) {
-  if (!start || !end) return "-";
-  const ms = new Date(end).getTime() - new Date(start).getTime();
-  if (!isFinite(ms) || ms < 0) return "-";
-  const s = Math.floor(ms / 1000);
-  const h = Math.floor(s / 3600);
-  const m = Math.floor((s % 3600) / 60);
-  const sec = s % 60;
-  const pad = (n: number) => String(n).padStart(2, "0");
-  return `${h}:${pad(m)}:${pad(sec)}`;
-}
-const displayNo = (i: number) => {
-  const start = (data.value.params.pageNum - 1) * data.value.params.pageSize;
-  return data.value.totalDataLength - (start + i);
-};
-async function loadRunsAll() {
-  runsLoading.value = true;
-  try {
-    const all: any[] = [];
-
-    // 1페이지
-    let resp = await ExecutionsService.search({
-      page_size: 500,
-    } as any);
-    all.push(...(resp?.data?.runs ?? []));
-
-    // 다음 토큰 추출(스네이크/카멜 모두 대비)
-    let token: string | undefined =
-      resp?.data?.next_page_token ?? resp?.data?.nextPageToken;
-
-    // 다음 페이지들
-    const seen = new Set<string>();
-    while (token && !seen.has(token)) {
-      seen.add(token);
-
-      // ✅ 무조건 token을 넣어서 호출 (snake/camel 둘 다 넣기)
-      resp = await ExecutionsService.search({
-        page_token: token,
-        pageToken: token,
-        page_size: 500,
-      } as any);
-
-      all.push(...(resp?.data?.runs ?? []));
-      token = resp?.data?.next_page_token ?? resp?.data?.nextPageToken;
-    }
-
-    // 중복 방지
-    const dedup = Array.from(
-      new Map(all.map((r: any) => [r?.run_id ?? r?.id ?? r?.name, r])).values(),
-    );
-
-    // 테이블 행으로 매핑
-    data.value.results = dedup.map((r: any, idx: number) => ({
-      no: idx + 1,
-      name: r?.display_name ?? r?.name ?? r?.run_id ?? "(no name)",
-      status: toUiStatus(r?.state),
-      duration: fmtDuration(r?.created_at, r?.finished_at),
-      experiment: r?.experiment_id ?? "-",
-      workflow:
-        r?.pipeline_version_reference?.pipeline_id ??
-        r?.pipeline_version_reference?.pipeline_version_id ??
-        "-",
-      startTime: fmtStart(r?.created_at),
-      registryStatus: r?.storage_state ?? "-",
-      run_id: r?.run_id,
-      raw: r,
-    }));
-
-    experimentOptions.value = Array.from(
-      new Set(data.value.results.map((r: any) => String(r.experiment || "-"))),
-    ).filter((v) => v && v !== "-");
-
-    workflowOptions.value = Array.from(
-      new Set(data.value.results.map((r: any) => String(r.workflow || "-"))),
-    ).filter((v) => v && v !== "-");
-    data.value.totalDataLength = data.value.results.length;
-    setPaginationLength();
-  } catch (e: any) {
-    console.error("[Runs] 호출 실패:", e?.response?.data ?? e);
-  } finally {
-    runsLoading.value = false;
-  }
-}
-
-const pagedResults = computed(() => {
-  const { pageNum, pageSize } = data.value.params;
-  const start = (pageNum - 1) * pageSize;
-  return data.value.results.slice(start, start + pageSize);
-});
-const tableHeader = [
-  { label: "No", width: "5%", style: "word-break: keep-all;" },
-  { label: "Execution Name", width: "20%", style: "word-break: keep-all;" },
-  { label: "Status", width: "10%", style: "word-break: keep-all;" },
-  { label: "Duration", width: "10%", style: "word-break: keep-all;" },
-  { label: "Experiment", width: "15%", style: "word-break: keep-all;" },
-  { label: "Workflow", width: "15%", style: "word-break: keep-all;" },
-  { label: "Start Time", width: "15%", style: "word-break: keep-all;" },
-  { label: "Registry Status", width: "10%", style: "word-break: keep-all;" },
-  { label: "Action", width: "5%", style: "word-break: keep-all;" },
-];
-
-const searchOptions = [
-  { searchType: "All", searchText: "" },
-  { searchType: "Execution Name", searchText: "name" },
-  { searchType: "Status", searchText: "status" },
-  { searchType: "Duration", searchText: "duration" },
-  { searchType: "Experiment", searchText: "experiment" },
-  { searchType: "Workflow", searchText: "workflow" },
-  { searchType: "Registry Status", searchText: "registryStatus" },
-];
-
-const experimentOptions = ref<string[]>([]);
-const workflowOptions = ref<string[]>([]);
-const execDialogOpen = ref(false);
-const execMode = ref<"create" | "edit" | "clone">("create");
-const execSelected = ref<any>(null);
-const searchExperimentOptions = [{ searchType: "Experiment", searchText: "" }];
-const searchWorkflowOptions = [{ searchType: "Workflow", searchText: "" }];
-
-const workflowList = ref(["pipeline-a", "pipeline-b", "pipeline-c"]);
-const executionTypes = ref(["One-off", "Recurring"]);
-
-const pageSizeOptions = [
-  { text: "10 페이지", value: 10 },
-  { text: "50 페이지", value: 50 },
-  { text: "100 페이지", value: 100 },
-];
-
-const data = ref({
-  params: {
-    pageNum: 1,
-    pageSize: 10,
-    searchType: "",
-    searchText: "",
-    experimentFilter: "",
-    workflowFilter: "",
-  },
-  results: [],
-  totalDataLength: 0,
-  pageLength: 0,
-  modalMode: "",
-  selectedData: null,
-  allSelected: false,
-  selected: [],
-  isModalVisible: false,
-  isConfirmDialogVisible: false,
-  userOption: [],
-});
-
-const filteredResults = computed(() => {
-  const { searchType, searchText, experimentFilter, workflowFilter } =
-    data.value.params;
-
-  let list = data.value.results;
-
-  // 실드롭다운 필터
-  if (experimentFilter) {
-    list = list.filter((r) => String(r.experiment).includes(experimentFilter));
-  }
-  if (workflowFilter) {
-    list = list.filter((r) => String(r.workflow).includes(workflowFilter));
-  }
-
-  // 텍스트 검색
-  const q = (searchText || "").trim().toLowerCase();
-  if (q) {
-    if (!searchType) {
-      // All: 여러 필드 OR 매칭
-      list = list.filter((r) => {
-        const pool = [
-          r.name,
-          r.status,
-          r.duration,
-          r.experiment,
-          r.workflow,
-          r.registryStatus,
-          r.startTime,
-        ];
-        return pool.some((v) =>
-          String(v ?? "")
-            .toLowerCase()
-            .includes(q),
-        );
-      });
-    } else {
-      list = list.filter((r) =>
-        String(r[searchType] ?? "")
-          .toLowerCase()
-          .includes(q),
-      );
-    }
-  }
-
-  return list;
-});
-const setPaginationLength = () => {
-  if (data.value.totalDataLength % data.value.params.pageSize === 0) {
-    data.value.pageLength =
-      data.value.totalDataLength / data.value.params.pageSize;
-  } else {
-    data.value.pageLength = Math.ceil(
-      data.value.totalDataLength / data.value.params.pageSize,
-    );
-  }
-};
-
-const handleTerminate = () => {
-  alert("Terminate 작업 진행중...");
-};
-const handleRetry = () => {
-  alert("Retry 작업 진행중...");
-};
-const handleClone = () => {
-  alert("Clone 작업 진행중...");
-};
-
-const changePageNum = (page) => {
-  data.value.params.pageNum = page;
-};
-const openCreateExecution = () => {
-  execMode.value = "create";
-  execSelected.value = null;
-  execDialogOpen.value = true;
-};
-
-const openComparePage = () => {
-  openCompare.value = true;
-  openView.value = false;
-};
-const openInfoModal = (item: any) => {
-  execSelected.value = item;
-  openView.value = true;
-  openCompare.value = false;
-};
-const openModifyModal = (selectedItem) => {
-  execMode.value = "edit";
-  execDialogOpen.value = true;
-};
-
-const openDownloadModal = () => {
-  data.value.selectedData = null;
-  data.value.modalMode = "download";
-};
-function closeCompare() {
-  openCompare.value = false;
-}
-function closeView() {
-  openView.value = false;
-}
-
-const getSelectedAllData = () => {
-  data.value.selected = data.value.allSelected
-    ? data.value.results.map((item) => {
-        return {
-          deviceKey: item.deviceKey,
-        };
-      })
-    : [];
-};
-
-onMounted(() => {
-  loadRunsAll();
-});
-</script>
-
-<template>
-  <div class="w-100" v-if="!openCompare && !openView">
-    <v-container fluid class="h-100 pa-5 d-flex flex-column align-center">
-      <v-card
-        flat
-        class="bg-shades-transparent d-flex flex-column align-center justify-center w-100"
-      >
-        <v-card flat class="bg-shades-transparent w-100">
-          <v-card-item class="text-h5 font-weight-bold pt-0 pa-5 pl-0">
-            <div class="d-flex flex-row justify-start align-center">
-              <div class="text-primary">Executions</div>
-            </div>
-          </v-card-item>
-        </v-card>
-        <v-card flat class="bg-shades-transparent w-100">
-          <v-card flat class="bg-shades-transparent mb-4">
-            <div class="d-flex justify-center flex-wrap align-center">
-              <v-responsive
-                max-width="180"
-                min-width="180"
-                class="mr-3 mt-3 mb-3"
-              >
-                <v-select
-                  v-model="data.params.searchType"
-                  label="검색조건"
-                  density="compact"
-                  :items="searchOptions"
-                  item-title="searchType"
-                  item-value="searchText"
-                  hide-details
-                ></v-select>
-              </v-responsive>
-              <v-responsive
-                max-width="180"
-                min-width="180"
-                class="mr-3 mt-3 mb-3"
-              >
-                <v-select
-                  v-model="data.params.searchType"
-                  label="검색조건"
-                  density="compact"
-                  :items="searchExperimentOptions"
-                  item-title="searchType"
-                  item-value="searchText"
-                  hide-details
-                ></v-select>
-              </v-responsive>
-              <v-responsive
-                max-width="180"
-                min-width="180"
-                class="mr-3 mt-3 mb-3"
-              >
-                <v-select
-                  v-model="data.params.searchType"
-                  label="검색조건"
-                  density="compact"
-                  :items="searchWorkflowOptions"
-                  item-title="searchType"
-                  item-value="searchText"
-                  hide-details
-                ></v-select>
-              </v-responsive>
-              <v-responsive min-width="540" max-width="540">
-                <v-text-field
-                  v-model="data.params.searchText"
-                  label="검색어"
-                  density="compact"
-                  clearable
-                  required
-                  class="mt-3 mb-3"
-                  hide-details
-                  @keyup.enter="changePageNum(1)"
-                ></v-text-field>
-              </v-responsive>
-
-              <div class="ml-3">
-                <v-btn
-                  size="large"
-                  color="primary"
-                  :rounded="5"
-                  @click="changePageNum(1)"
-                >
-                  <v-icon> mdi-magnify</v-icon>
-                </v-btn>
-              </div>
-            </div>
-          </v-card>
-
-          <v-sheet
-            class="bg-shades-transparent d-flex flex-wrap align-center mb-2"
-          >
-            <v-sheet class="d-flex flex-wrap me-auto bg-shades-transparent">
-              <v-sheet
-                class="d-flex align-center mr-3 mb-2 bg-shades-transparent"
-              >
-                <v-chip color="primary"
-                  >총 {{ data.totalDataLength.toLocaleString() }}개
-                </v-chip>
-              </v-sheet>
-              <v-sheet class="bg-shades-transparent">
-                <v-responsive max-width="140" min-width="140" class="mb-2">
-                  <v-select
-                    v-model="data.params.pageSize"
-                    density="compact"
-                    :items="pageSizeOptions"
-                    item-title="text"
-                    item-value="value"
-                    variant="outlined"
-                    color="primary"
-                    hide-details
-                    @update:model-value="changePageNum(1)"
-                  ></v-select>
-                </v-responsive>
-              </v-sheet>
-            </v-sheet>
-            <v-sheet class="justify-end mb-2 mr-3" @click="handleTerminate">
-              <v-btn color="primary">Terminate </v-btn>
-            </v-sheet>
-            <v-sheet class="justify-end mb-2 mr-3" @click="handleRetry">
-              <v-btn color="primary">Retry </v-btn>
-            </v-sheet>
-            <v-sheet class="justify-end mb-2 mr-3" @click="handleClone">
-              <v-btn color="primary">Clone </v-btn>
-            </v-sheet>
-            <v-sheet class="justify-end mb-2 mr-3" @click="openComparePage">
-              <v-btn color="primary">Compare </v-btn>
-            </v-sheet>
-            <v-sheet class="justify-end mb-2" @click="openCreateExecution">
-              <v-btn color="primary">Execution </v-btn>
-            </v-sheet>
-          </v-sheet>
-
-          <v-card class="rounded-lg pa-8">
-            <v-col cols="12">
-              <v-sheet>
-                <v-table
-                  density="comfortable"
-                  fixed-header
-                  height="625"
-                  col-md-12
-                  col-12
-                  overflow-x-auto
-                >
-                  <colgroup>
-                    <col style="width: 5%" />
-                    <col
-                      v-for="(item, i) in tableHeader"
-                      :key="i"
-                      :style="`width:${item.width}`"
-                    />
-                  </colgroup>
-                  <thead>
-                    <tr>
-                      <th>
-                        <v-checkbox
-                          v-model="data.allSelected"
-                          style="min-width: 36px"
-                          :indeterminate="data.allSelected === true"
-                          hide-details
-                          @change="getSelectedAllData"
-                        ></v-checkbox>
-                      </th>
-                      <th
-                        v-for="(item, i) in tableHeader"
-                        :key="i"
-                        class="text-center font-weight-bold"
-                        :style="`${item.style}`"
-                      >
-                        {{ item.label }}
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody class="text-body-2">
-                    <tr
-                      v-for="(item, i) in pagedResults"
-                      :key="item.run_id || item.no || i"
-                      class="text-center"
-                    >
-                      <td>
-                        <v-checkbox
-                          v-model="data.selected"
-                          :value="{ deviceKey: item.deviceKey }"
-                          hide-details
-                          style="min-width: 36px"
-                        />
-                      </td>
-
-                      <td>{{ displayNo(i) }}</td>
-                      <td>{{ item.name }}</td>
-                      <td>
-                        <v-icon v-if="item.status === 'Succeeded'" color="green"
-                          >mdi-check-circle</v-icon
-                        >
-                        <v-icon v-else-if="item.status === 'Failed'" color="red"
-                          >mdi-close-circle</v-icon
-                        >
-                        <v-icon v-else color="grey">mdi-loading</v-icon>
-                      </td>
-                      <td>{{ item.duration }}</td>
-                      <td>{{ item.experiment }}</td>
-                      <td>{{ item.workflow }}</td>
-                      <td>{{ item.startTime }}</td>
-                      <td>{{ item.registryStatus }}</td>
-                      <td style="white-space: nowrap">
-                        <IconInfoBtn @on-click="openInfoModal(item)" />
-                        <IconModifyBtn @on-click="openModifyModal(item)" />
-                        <IconDownloadBtn @on-click="openDownloadModal(item)" />
-                      </td>
-                    </tr>
-                  </tbody>
-                </v-table>
-              </v-sheet>
-              <v-card-actions class="text-center mt-8 justify-center">
-                <v-pagination
-                  v-model="data.params.pageNum"
-                  :length="data.pageLength"
-                  :total-visible="10"
-                  color="primary"
-                  rounded="circle"
-                  @update:model-value="changePageNum"
-                ></v-pagination>
-              </v-card-actions>
-            </v-col>
-          </v-card>
-        </v-card>
-      </v-card>
-      <v-dialog v-model="execDialogOpen" max-width="800" persistent>
-        <ExecutionBaseDialog
-          :model-value="execDialogOpen"
-          :mode="execMode"
-          :selectedData="execSelected"
-          :workflowList="workflowList"
-          :executionTypes="executionTypes"
-          @update:modelValue="execDialogOpen = $event"
-        />
-      </v-dialog>
-    </v-container>
-  </div>
-  <div class="w-100" v-else-if="openCompare">
-    <CompareComponent @close="closeCompare" />
-  </div>
-
-  <div class="w-100" v-else-if="openView">
-    <ViewComponent
-      v-if="openView"
-      :experimentInfo="execSelected"
-      @close="closeView"
-    />
-  </div>
-</template>
-
-<style scoped></style>
diff --git a/src/components/templates/run/executions/ViewComponent.vue b/src/components/templates/run/executions/ViewComponent.vue
index e5bca28..0e6c9d6 100644
--- a/src/components/templates/run/executions/ViewComponent.vue
+++ b/src/components/templates/run/executions/ViewComponent.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
+/* ========= Imports ========= */
 import { MlflowService } from "@/components/service/mlflow/MlflowService";
+import { ExternalAuthControllerService } from "@/components/service/management/ExternalAuthControllerService";
 import {
   computed,
   watch,
@@ -9,145 +11,284 @@ import {
   onBeforeUnmount,
 } from "vue";
 import Plotly from "plotly.js-dist-min";
-
+import CompareRunsDialog from "@/components/atoms/organisms/CompareRunDialog.vue";
+/* ========= Constants & Types ========= */
+const AUTH_KEY = "external-auth";
+
+type ExternalAuth = { id: string; name: string; token: string };
+type PackageOption = { label: string; value: string; raw: any };
+type MetricKV = { key: string; value: number };
+type RunDetailType = {
+  info: any;
+  data: { metrics: MetricKV[]; params?: any[]; tags?: any[] };
+};
+type ArtifactRow = { path: string; is_dir?: boolean; file_size?: number };
+type ArtifactGroup = { base: string; items: ArtifactRow[] };
+
+/* ========= Props/Emits ========= */
 const props = defineProps<{ experimentInfo: any }>();
 const emit = defineEmits<{ (e: "close"): void }>();
 
-/* ============ Tabs ============ */
-const mainTab = ref<"details" | "viz">("details");
-const vizTab = ref<"metrics" | "scatter" | "box" | "contour">("metrics");
+/* ========= Auth State ========= */
+const loginDialog = ref(false);
+const loginLoading = ref(false);
+const loginForm = ref({ id: "", password: "" });
+const loginError = ref("");
+const isAuthenticated = ref(false);
+const externalAuth = ref<ExternalAuth | null>(null);
 
-/* ============ expName pick ============ */
-function pickExpName(v: any): string {
-  return v?.expName || v?.experiment || v?.name || v?.raw?.displayName || "";
-}
+/* ========= Deployment State ========= */
+const isEditVisible = ref(false);
+const lastArtifactUri = ref<string>(""); // 배포 모달에 표시될 최종 URI
+const pendingArtifactPath = ref<string | null>(null); // 로그인 전 임시 저장
+
+const packageOptions = ref<PackageOption[]>([]);
+const packagesLoading = ref(false);
+const packagesError = ref("");
 
-/* ============ MLflow state ============ */
+/* ========= MLflow State ========= */
 const runs = ref<any[]>([]);
 const loadingRuns = ref(false);
-
-/* --- 단건 조회 state --- */
 const selectedRunId = ref<string>("");
 const loadingRunDetail = ref(false);
-const runDetail = ref<any | null>(null);
+const runDetail = ref<RunDetailType | null>(null);
+const currentExperimentId = ref<string>("");
+const runDetailCache = ref<Map<string, RunDetailType>>(new Map());
 
-/* 표시용 라벨 */
-const selectedLabel = computed(
-  () => runDetail.value?.info?.run_name ?? runDetail.value?.info?.run_id ?? "-",
-);
+/* ========= UI Tabs / Compare ========= */
+const mainTab = ref<"details" | "viz" | "artifacts">("details");
+const vizTab = ref<"metrics" | "scatter" | "box" | "contour">("metrics");
 
-/* ============ Plotly refs ============ */
-const elMetrics = ref<HTMLDivElement | null>(null);
+const compareDialog = ref(false);
+const compareLoading = ref(false);
+const compareChartMode = ref<"byMetric" | "byRun">("byMetric");
+const compareSelectedRunIds = ref<string[]>([]);
+const compareSelectedMetricKeys = ref<string[]>([]);
+const normalizeValues = ref(false);
+const baselineRunId = ref<string | null>(null);
 
-/* ===== 유틸: 단건 값 꺼내기 ===== */
-function metricValue(key: "accuracy" | "precision" | "recall" | "f1_score") {
-  const m = (runDetail.value?.data?.metrics ?? []).find(
-    (x: any) => x.key === key,
-  );
-  return m?.value ?? null;
-}
+const elMetrics = ref<HTMLDivElement | null>(null);
+const elCompare = ref<HTMLDivElement | null>(null);
 
-/* 선택한 run의 메트릭 표 데이터 */
-const selectedMetrics = computed(() => {
-  const mm: Array<{ key: string; value: number }> =
-    runDetail.value?.data?.metrics ?? [];
-  return mm.map((m) => ({ key: m.key, value: m.value }));
-});
+/* ========= Helpers ========= */
+const safeParse = <T = any,>(v: any): T | null => {
+  try {
+    return typeof v === "string" ? (JSON.parse(v) as T) : (v as T);
+  } catch {
+    return null;
+  }
+};
+const unwrapAxiosLike = (res: any) => res?.data ?? res;
+
+const normalizeRun = (res: any): RunDetailType | null => {
+  let obj = unwrapAxiosLike(res);
+  if (!obj?.run && (res?.response || res?.responseText)) {
+    const parsed = safeParse(res.response) ?? safeParse(res.responseText);
+    if (parsed?.run) obj = parsed;
+  }
+  const v = obj?.run ?? obj;
+  return v?.info && v?.data ? v : null;
+};
 
-/* ===== 부모에서 내려온 runId 픽 ===== */
-function pickParentRunId(v: any): string {
-  const cand = [
-    v?.run_id,
-    v?.runId,
-    v?.raw?.run_id,
-    v?.raw?.runId,
-    v?.raw?.kfp_run_id,
-    v?.raw?.kubeflow_run_id,
-    v?.raw?.id,
-  ].filter(Boolean);
-  return String(cand[0] ?? "");
-}
+const pickExpName = (v: any) =>
+  v?.expName || v?.experiment || v?.name || v?.raw?.displayName || "";
 
-/* ===== MLflow 태그 읽기 (array or object 모두 대응) ===== */
-function getTag(run: any, key: string): string | undefined {
+const getTag = (run: any, key: string) => {
   const tags = run?.data?.tags;
   if (Array.isArray(tags)) return tags.find((t: any) => t?.key === key)?.value;
   if (tags && typeof tags === "object") return tags[key];
-  return undefined;
-}
-
-/* ===== 차트 렌더: 선택한 단건만 ===== */
-function drawCharts() {
-  const mm = selectedMetrics.value
-    // value가 숫자인 것만 필터링
-    .filter((m) => typeof m.value === "number" && isFinite(m.value));
+};
+
+const pickParentRunId = (v: any) =>
+  String(
+    [
+      v?.run_id,
+      v?.runId,
+      v?.raw?.run_id,
+      v?.raw?.runId,
+      v?.raw?.kfp_run_id,
+      v?.raw?.kubeflow_run_id,
+      v?.raw?.id,
+    ].filter(Boolean)[0] ?? "",
+  );
 
-  const x = mm.map((m) => m.key);
-  const y = mm.map((m) => m.value);
+const fmtNumber = (v: number | null, digits = 3) => {
+  if (v == null || !Number.isFinite(v)) return "";
+  const abs = Math.abs(v);
+  if (abs >= 1000) return v.toLocaleString();
+  if (abs >= 1) return v.toFixed(digits);
+  if (abs >= 0.01) return v.toFixed(digits + 1);
+  return v.toExponential(2);
+};
+
+const normalizeArray = (vals: (number | null)[]) => {
+  const xs = vals.filter((v): v is number => Number.isFinite(v as number));
+  if (xs.length === 0) return vals;
+  const min = Math.min(...xs),
+    max = Math.max(...xs);
+  if (max === min) return vals.map((v) => (v == null ? v : 1));
+  return vals.map((v) => (v == null ? v : (v - min) / (max - min)));
+};
+
+const labelOfRun = (r: RunDetailType) => r.info.run_name || r.info.run_id;
+const valueOf = (run: RunDetailType, key: string): number | null => {
+  const m = run.data.metrics.find((x) => x.key === key)?.value;
+  return Number.isFinite(m as number) ? Number(m) : null;
+};
+
+/* === File icon helpers (빨간 밑줄 원인: 누락/중복 정의 방지) === */
+const fileExt = (name: string) => {
+  const n = (name || "").toLowerCase().trim();
+  const idx = n.lastIndexOf(".");
+  return idx >= 0 ? n.slice(idx + 1) : "";
+};
+const fileIconByName = (name: string) => {
+  const n = (name || "").toLowerCase().trim();
+  // exact filename first
+  if (n === "mlmodel") return "mdi-file-cog-outline";
+  if (n === "conda.yaml" || n === "conda.yml")
+    return "mdi-file-settings-outline";
+  if (n === "requirements.txt") return "mdi-file-code-outline";
+  // folder-ish (no dot or slash)
+  if (!n.includes(".") && !n.includes("/")) return "mdi-file-outline";
+  // by extension
+  switch (fileExt(n)) {
+    case "json":
+      return "mdi-code-json";
+    case "yml":
+    case "yaml":
+      return "mdi-code-braces";
+    case "txt":
+      return "mdi-file-document-outline";
+    case "pkl":
+    case "pickle":
+      return "mdi-cube-outline";
+    case "onnx":
+      return "mdi-robot-outline";
+    case "pt":
+    case "pth":
+      return "mdi-chip";
+    case "bin":
+      return "mdi-database-outline";
+    case "joblib":
+    case "pmdarima":
+      return "mdi-archive-outline";
+    default:
+      return "mdi-file-outline";
+  }
+};
 
-  const layout: Partial<any> = {
-    margin: { t: 40, r: 20, b: 60, l: 50 },
-    height: 400,
-    showlegend: false,
-    paper_bgcolor: "rgba(0,0,0,0)",
-    plot_bgcolor: "rgba(0,0,0,0)",
+/* ========= Derived (computed) ========= */
+const runItems = computed(() =>
+  (runs.value || []).map((r: any) => ({
+    value: r?.info?.run_id || r?.info?.run_uuid || "",
+    label: r?.info?.run_name || r?.info?.run_id,
+  })),
+);
 
-    font: { color: "#E0E0E0" },
-    xaxis: {
-      automargin: true,
+const selectedMetrics = computed<MetricKV[]>(() =>
+  (runDetail.value?.data?.metrics ?? []).map((m) => ({
+    key: m.key,
+    value: m.value,
+  })),
+);
 
-      gridcolor: "rgba(255,255,255,0.08)",
-      zerolinecolor: "rgba(255,255,255,0.18)",
-      linecolor: "rgba(255,255,255,0.18)",
-    },
-    yaxis: {
-      rangemode: "tozero",
-      gridcolor: "rgba(255,255,255,0.08)",
-      zerolinecolor: "rgba(255,255,255,0.18)",
-      linecolor: "rgba(255,255,255,0.18)",
-    },
-  };
+/* ===== Artifacts (from tag: mlflow.log-model.history) ===== */
+const historyArtifacts = computed<any[]>(() => {
+  const tags = runDetail.value?.data?.tags;
+  let raw: string | undefined;
+  if (Array.isArray(tags))
+    raw = tags.find((t: any) => t?.key === "mlflow.log-model.history")?.value;
+  else if (tags && typeof tags === "object")
+    raw = tags["mlflow.log-model.history"];
+  const parsed = safeParse<any>(raw);
+  return parsed ? (Array.isArray(parsed) ? parsed : [parsed]) : [];
+});
 
-  const trace: any = {
-    type: "bar",
-    x,
-    y,
-    text: y.map((v) => (typeof v === "number" ? v.toFixed(4) : "")),
-    textposition: "auto",
-    hovertemplate: "%{x}: %{y}<extra></extra>",
-  };
+const artifactGroups = computed<ArtifactGroup[]>(() => {
+  const groups: ArtifactGroup[] = [];
+  for (const meta of historyArtifacts.value) {
+    const base = String(meta?.artifact_path ?? "");
+    if (!base) continue;
+    const flavors = meta.flavors ?? {};
+    const pf = flavors?.python_function ?? {};
+    const sk = flavors?.sklearn ?? {};
+    const files = new Set<string>();
+    files.add(`${base}/MLmodel`);
+    if (pf?.model_path) files.add(`${base}/${pf.model_path}`);
+    if (pf?.env?.conda) files.add(`${base}/${pf.env.conda}`);
+    if (pf?.env?.virtualenv) files.add(`${base}/${pf.env.virtualenv}`);
+    if (pf?.env?.requirements) files.add(`${base}/${pf.env.requirements}`);
+    if (sk?.pickled_model) files.add(`${base}/${sk.pickled_model}`);
+    const items: ArtifactRow[] = Array.from(files)
+      .sort((a, b) =>
+        a.endsWith("MLmodel")
+          ? -1
+          : b.endsWith("MLmodel")
+            ? 1
+            : a.localeCompare(b),
+      )
+      .map((p) => ({ path: p, is_dir: false }));
+    groups.push({ base, items });
+  }
+  return groups;
+});
 
-  const config = { displayModeBar: false, responsive: true };
+const historyArtifactMeta = computed(
+  () => historyArtifacts.value.at(-1) ?? null,
+);
+const historyArtifactPath = computed(() =>
+  String(historyArtifactMeta.value?.artifact_path ?? ""),
+);
+const artifactItems = computed<ArtifactRow[]>(() => {
+  const base = historyArtifactPath.value;
+  return artifactGroups.value.find((x) => x.base === base)?.items ?? [];
+});
 
-  if (elMetrics.value) {
-    if (x.length === 0) {
-      Plotly.purge(elMetrics.value);
-      elMetrics.value.innerHTML =
-        '<div style="padding:16px;color:#999;text-align:center;">No Data</div>';
-    } else {
-      Plotly.react(elMetrics.value, [trace], layout, config);
-    }
-  }
+/* ========= URI 조합기 & 클릭 핸들러 ========= */
+function buildArtifactUri(fullPath: string) {
+  const expId =
+    currentExperimentId.value ||
+    runDetail.value?.info?.experiment_id ||
+    runs.value[0]?.info?.experiment_id ||
+    "";
+  const runId = runDetail.value?.info?.run_id || selectedRunId.value || "";
+  return `/${expId}/${runId}/artifacts/${fullPath}`;
 }
-
-function resizeCharts() {
-  if (elMetrics.value) Plotly.Plots.resize(elMetrics.value);
+function onClickArtifact(fullPath: string) {
+  const uri = buildArtifactUri(fullPath);
+  console.log("[MLflow Artifact URI]", uri);
 }
 
-/* ===== 응답 정규화 + fallback ===== */
-function normalizeRun(res: any) {
-  const v = res?.data?.run ?? res?.run ?? res?.data ?? res;
-  return v?.info && v?.data ? v : null;
-}
-function findFromList(runId: string) {
-  return (
-    runs.value.find(
-      (r) =>
-        r?.info?.run_id === runId ||
-        r?.info?.run_uuid === runId ||
-        r?.info?.run_name === runId,
-    ) ?? null
-  );
+/* ========= Fetchers ========= */
+const findFromList = (runId: string) =>
+  runs.value.find(
+    (r: any) =>
+      r?.info?.run_id === runId ||
+      r?.info?.run_uuid === runId ||
+      r?.info?.run_name === runId,
+  ) ?? null;
+
+async function ensureRunDetail(runId: string): Promise<RunDetailType | null> {
+  if (!runId) return null;
+  const cached = runDetailCache.value.get(runId);
+  if (cached) return cached;
+  const res = await MlflowService.getExperimentRun(runId);
+  const v = normalizeRun(res) || findFromList(runId);
+  if (!v) return null;
+  const shaped: RunDetailType = {
+    info: v.info ?? {},
+    data: {
+      metrics: (v.data?.metrics ?? []).map((m: any) => ({
+        key: m.key,
+        value: Number(m.value),
+      })),
+      params: v.data?.params,
+      tags: v.data?.tags,
+    },
+  };
+  runDetailCache.value.set(runId, shaped);
+  return shaped;
 }
 
 async function fetchRuns(expName?: string) {
@@ -155,36 +296,33 @@ async function fetchRuns(expName?: string) {
   if (!expName) {
     runs.value = [];
     selectedRunId.value = "";
+    currentExperimentId.value = "";
     return;
   }
-
   loadingRuns.value = true;
   try {
-    // 1) 실험명으로 experiment_id 조회
-    const expRes = await MlflowService.getExperimentByName(expName);
-    const exp = expRes?.data ?? expRes;
+    const exp = unwrapAxiosLike(
+      await MlflowService.getExperimentByName(expName),
+    );
     const expId = String(
       exp?.experiment_id ?? exp?.experimentId ?? exp?.id ?? "",
     );
+    currentExperimentId.value = expId;
     if (!expId) {
       runs.value = [];
       selectedRunId.value = "";
       return;
     }
 
-    // 2) experiment_id로 runs 전체 조회
-    const runsRes = await MlflowService.getRuns(expId);
-    const body = runsRes?.data ?? runsRes;
+    const body = unwrapAxiosLike(await MlflowService.getRuns(expId));
     const list =
       body?.runs ?? body?.data?.runs ?? (Array.isArray(body) ? body : []);
+    console.log("bodybody", body);
 
-    // 3) 부모 runId 태그와 매칭 → 없으면 전체 리스트 사용(이전 동작처럼)
     const matched = (Array.isArray(list) ? list : []).filter(
       (r: any) => getTag(r, "kubeflow_run_id") === parentRunId,
     );
     const final = matched.length > 0 ? matched : list;
-
-    // 최신순 정렬 + 기본 선택
     const sorted = [...final].sort(
       (a, b) => (b?.info?.start_time ?? 0) - (a?.info?.start_time ?? 0),
     );
@@ -196,77 +334,353 @@ async function fetchRuns(expName?: string) {
   }
 }
 
-const runItems = computed(() =>
-  (runs.value || []).map((r: any) => {
-    const id = r?.info?.run_id || r?.info?.run_uuid || "";
-    const name = r?.info?.run_name || id; // ✅ 시간 제거, 이름만 표시
-    return { value: id, label: name };
-  }),
-);
-
 async function fetchRunDetail(runId: string) {
-  if (!runId) {
-    runDetail.value = null;
-    await nextTick();
-    drawCharts();
-    return;
-  }
   loadingRunDetail.value = true;
   try {
+    if (!runId) {
+      runDetail.value = null;
+      await nextTick();
+      drawSelectedRunChart();
+      return;
+    }
     const res = await MlflowService.getExperimentRun(runId);
     runDetail.value = normalizeRun(res) || findFromList(runId);
+    if (runDetail.value) runDetailCache.value.set(runId, runDetail.value);
     await nextTick();
-    drawCharts();
+    drawSelectedRunChart();
   } finally {
     loadingRunDetail.value = false;
   }
 }
 
-/* ============ 트리거 ============ */
-// 탭 전환 시 viz 탭이면 로드
-watch(
-  () => mainTab.value,
-  async (t) => {
-    if (t === "viz") {
-      await fetchRuns(pickExpName(props.experimentInfo));
-      await fetchRunDetail(selectedRunId.value);
-    }
-  },
-  { immediate: true },
-);
+/* ========= Charts ========= */
+function drawSelectedRunChart() {
+  if (!elMetrics.value) return;
+  const mm = selectedMetrics.value.filter(
+    (m) => typeof m.value === "number" && isFinite(m.value),
+  );
+  const x = mm.map((m) => m.key);
+  const y = mm.map((m) => m.value);
 
-// 부모 execution 바뀌면 viz 탭일 때만 재조회
-watch(
-  () => props.experimentInfo,
-  async () => {
-    if (mainTab.value === "viz") {
-      await fetchRuns(pickExpName(props.experimentInfo));
-      await fetchRunDetail(selectedRunId.value);
-    }
+  if (x.length === 0) {
+    Plotly.purge(elMetrics.value);
+    elMetrics.value.innerHTML =
+      '<div style="padding:16px;color:#999;text-align:center;">No Data</div>';
+    return;
+  }
+
+  Plotly.react(
+    elMetrics.value,
+    [
+      {
+        type: "bar",
+        x,
+        y,
+        text: y.map((v) => fmtNumber(v, 4)),
+        textposition: "auto",
+        hovertemplate: "%{x}: %{text}<extra></extra>",
+      },
+    ],
+    {
+      margin: { t: 40, r: 20, b: 60, l: 50 },
+      height: 400,
+      showlegend: false,
+      paper_bgcolor: "rgba(0,0,0,0)",
+      plot_bgcolor: "rgba(0,0,0,0)",
+      font: { color: "#E0E0E0" },
+      xaxis: {
+        automargin: true,
+        gridcolor: "rgba(255,255,255,0.08)",
+        zerolinecolor: "rgba(255,255,255,0.18)",
+        linecolor: "rgba(255,255,255,0.18)",
+      },
+      yaxis: {
+        rangemode: "tozero",
+        gridcolor: "rgba(255,255,255,0.08)",
+        zerolinecolor: "rgba(255,255,255,0.18)",
+        linecolor: "rgba(255,255,255,0.18)",
+      },
+    },
+    { displayModeBar: false, responsive: true },
+  );
+}
+
+const commonLayout: Partial<any> = {
+  autosize: true,
+  margin: { t: 28, r: 12, b: 56, l: 56 },
+  paper_bgcolor: "rgba(0,0,0,0)",
+  plot_bgcolor: "rgba(0,0,0,0)",
+  font: { color: "#E0E0E0" },
+  xaxis: { automargin: true, gridcolor: "rgba(255,255,255,0.08)" },
+  yaxis: {
+    rangemode: "tozero",
+    gridcolor: "rgba(255,255,255,0.08)",
+    automargin: true,
   },
-);
+  legend: {
+    orientation: "h",
+    x: 0,
+    y: 1.12,
+    yanchor: "bottom",
+    xanchor: "left",
+  },
+};
+
+function createTracesByMetric(metricKeys: string[], runsData: RunDetailType[]) {
+  const runLabels = runsData.map(labelOfRun);
+  return runsData.map((run, i) => {
+    const yRaw = metricKeys.map((k) => valueOf(run, k));
+    const y = normalizeValues.value ? normalizeArray(yRaw) : yRaw;
+    const text = yRaw.map((v) => fmtNumber(v));
+    return {
+      type: "bar",
+      name: runLabels[i],
+      x: metricKeys,
+      y,
+      text: normalizeValues.value ? undefined : text,
+      textposition: "auto",
+      customdata: text,
+      hovertemplate: `${runLabels[i]}<br>%{x}: %{customdata}<extra></extra>`,
+    };
+  });
+}
+function createTracesByRun(metricKeys: string[], runsData: RunDetailType[]) {
+  const rowLabels = runsData.map(labelOfRun);
+  return metricKeys.map((key) => {
+    const yRaw = rowLabels.map((_, i) => valueOf(runsData[i], key));
+    const y = normalizeValues.value ? normalizeArray(yRaw) : yRaw;
+    const text = yRaw.map((v) => fmtNumber(v));
+    return {
+      type: "bar",
+      name: key,
+      x: rowLabels,
+      y,
+      text: normalizeValues.value ? undefined : text,
+      textposition: "auto",
+      customdata: text,
+      hovertemplate: `${key}: %{customdata}<extra>%{x}</extra>`,
+    };
+  });
+}
+function drawCompareChart() {
+  if (!elCompare.value) return;
+  const metricKeys = activeMetricKeys.value;
+  const runsData = compareRuns.value;
+  if (!metricKeys.length || !runsData.length) {
+    elCompare.value.innerHTML =
+      '<div style="padding:16px;color:#999;text-align:center;">No Data</div>';
+    return;
+  }
+  const traces =
+    compareChartMode.value === "byMetric"
+      ? createTracesByMetric(metricKeys, runsData)
+      : createTracesByRun(metricKeys, runsData);
+
+  if (compareChartMode.value === "byMetric") {
+    const varianceOrder = metricKeys
+      .map((k, idx) => {
+        const vals = traces
+          .map((t) => t.y[idx])
+          .filter((v: any) => v != null) as number[];
+        const min = Math.min(...vals),
+          max = Math.max(...vals);
+        return { k, spread: max - min };
+      })
+      .sort((a, b) => b.spread - a.spread)
+      .map((v) => v.k);
+
+    traces.forEach((t) => {
+      t.x = varianceOrder;
+      t.y = varianceOrder.map((mk: string) => t.y[metricKeys.indexOf(mk)]);
+      if (t.text)
+        t.text = varianceOrder.map(
+          (mk: string) => t.text![metricKeys.indexOf(mk)],
+        );
+      if (t.customdata)
+        t.customdata = varianceOrder.map(
+          (mk: string) => t.customdata![metricKeys.indexOf(mk)],
+        );
+    });
+  }
 
-// 선택된 runId가 바뀌면 단건 상세 갱신
-watch(selectedRunId, (id) => fetchRunDetail(id));
+  Plotly.react(
+    elCompare.value,
+    traces,
+    { ...commonLayout, barmode: "group" },
+    { displayModeBar: false, responsive: true },
+  );
+}
 
-// metrics 서브탭일 때 리렌더
-watch(vizTab, async (t) => {
-  if (mainTab.value === "viz" && t === "metrics") {
+/* ========= Compare Actions ========= */
+function openCompareDialog() {
+  compareSelectedRunIds.value = Array.from(
+    new Set([selectedRunId.value].filter(Boolean)),
+  );
+  compareSelectedMetricKeys.value = [];
+  compareDialog.value = true;
+}
+async function loadCompareData() {
+  if (!compareDialog.value) return;
+  compareLoading.value = true;
+  try {
+    await Promise.all(compareSelectedRunIds.value.map(ensureRunDetail));
+    if (compareSelectedMetricKeys.value.length === 0) {
+      compareSelectedMetricKeys.value = commonMetricKeys.value.slice(0, 6);
+    }
     await nextTick();
-    drawCharts();
-    resizeCharts();
+    drawCompareChart();
+  } finally {
+    compareLoading.value = false;
   }
+}
+
+/* ========= Derived for Compare ========= */
+const compareRuns = computed<RunDetailType[]>(
+  () =>
+    compareSelectedRunIds.value
+      .map((id) => runDetailCache.value.get(id))
+      .filter(Boolean) as RunDetailType[],
+);
+const metricsKeySetByRun = computed(() =>
+  compareRuns.value.map((r) => new Set(r.data.metrics.map((m) => m.key))),
+);
+const commonMetricKeys = computed<string[]>(() => {
+  if (metricsKeySetByRun.value.length === 0) return [];
+  const [first, ...rest] = metricsKeySetByRun.value;
+  let inter = new Set(first);
+  rest.forEach((s) => (inter = new Set([...inter].filter((k) => s.has(k)))));
+  return Array.from(inter).sort();
 });
+const activeMetricKeys = computed(() =>
+  compareSelectedMetricKeys.value.length
+    ? compareSelectedMetricKeys.value
+    : commonMetricKeys.value,
+);
 
-function onResize() {
-  if (mainTab.value === "viz" && vizTab.value === "metrics") {
-    resizeCharts();
+/* ========= Auth ========= */
+function restoreAuthFromStorage() {
+  const raw = localStorage.getItem(AUTH_KEY);
+  if (!raw) return;
+  try {
+    const parsed = JSON.parse(raw) as ExternalAuth;
+    if (parsed?.token) {
+      isAuthenticated.value = true;
+      externalAuth.value = parsed;
+    }
+  } catch {
+    /* no-op */
   }
 }
-onMounted(() => window.addEventListener("resize", onResize));
-onBeforeUnmount(() => window.removeEventListener("resize", onResize));
+const handleLogout = () => {
+  localStorage.removeItem(AUTH_KEY);
+  isAuthenticated.value = false;
+  externalAuth.value = null;
+  packageOptions.value = [];
+};
+const handleLogin = async () => {
+  try {
+    loginLoading.value = true;
+    loginError.value = "";
+    const { id, password } = loginForm.value;
+    if (!id || !password) {
+      loginError.value = "ID와 비밀번호를 입력하세요.";
+      return;
+    }
+    const res = await ExternalAuthControllerService.signIn(id, password);
+    const raw = res?.data ?? res;
+    if (!raw) {
+      loginError.value = "로그인에 실패했습니다. (서버 응답이 비어있습니다)";
+      return;
+    }
+    const payload = Object.prototype.hasOwnProperty.call(raw, "data")
+      ? raw.data
+      : raw;
+    if (!payload?.token) {
+      loginError.value = "로그인에 실패했습니다. 아이디/비밀번호를 확인하세요.";
+      return;
+    }
 
-/* ============ State History (Details 탭) ============ */
+    const toSave: ExternalAuth = {
+      id: payload.id ?? id,
+      name: payload.name ?? id,
+      token: payload.token,
+    };
+    localStorage.setItem(AUTH_KEY, JSON.stringify(toSave));
+    externalAuth.value = toSave;
+    isAuthenticated.value = true;
+
+    loginDialog.value = false;
+    loginForm.value = { id: "", password: "" };
+    await nextTick();
+    openDeploymentModal(); // pendingArtifactPath 활용
+  } catch (e: any) {
+    loginError.value =
+      e?.response?.data?.message || e?.message || "로그인에 실패했습니다.";
+  } finally {
+    loginLoading.value = false;
+  }
+};
+
+/* ========= Deployment Modal ========= */
+const openDeploymentModal = async (fullPath?: string) => {
+  // 1) 경로가 들어오면 즉시 URI 조합/저장
+  if (fullPath) {
+    const uri = buildArtifactUri(fullPath);
+    lastArtifactUri.value = uri;
+    pendingArtifactPath.value = uri;
+  }
+  // 2) 비로그인 → 로그인 우선
+  if (!isAuthenticated.value) {
+    loginDialog.value = true;
+    return;
+  }
+  // 3) 로그인 후 pending 값 복원
+  if (!fullPath && pendingArtifactPath.value)
+    lastArtifactUri.value = pendingArtifactPath.value;
+
+  // 4) 모달 열고 패키지 로딩
+  isEditVisible.value = true;
+  packagesError.value = "";
+  packageOptions.value = [];
+  const auth =
+    externalAuth.value ||
+    (() => {
+      try {
+        const raw = localStorage.getItem(AUTH_KEY);
+        return raw ? (JSON.parse(raw) as ExternalAuth) : null;
+      } catch {
+        return null;
+      }
+    })();
+  if (!auth?.id || !auth?.token) {
+    packagesError.value = "로그인 정보가 없습니다.";
+    return;
+  }
+
+  try {
+    packagesLoading.value = true;
+    const res = await ExternalAuthControllerService.search(auth.id, auth.token);
+
+    const body = res?.data ?? res;
+    const list = body?.data?.data ?? body?.data ?? body?.result ?? body ?? [];
+    const arr = Array.isArray(list) ? list : [];
+    packageOptions.value = arr.map((it: any) => ({
+      label: it?.package_name || it?.package_id || "Unknown",
+      value: it?.package_id,
+      raw: it,
+    }));
+  } catch (e: any) {
+    packagesError.value =
+      e?.response?.data?.message || e?.message || "패키지 조회 실패";
+  } finally {
+    packagesLoading.value = false;
+  }
+};
+const closeCreateModal = () => {
+  isEditVisible.value = false;
+};
+
+/* ========= Timeline (fallback) ========= */
 const rawHistory = computed<any[]>(() => {
   const h =
     props.experimentInfo?.raw?.state_history ??
@@ -274,7 +688,6 @@ const rawHistory = computed<any[]>(() => {
     props.experimentInfo?.state_history ??
     props.experimentInfo?.stateHistory ??
     [];
-
   if (Array.isArray(h) && h.length > 0) return h;
 
   const startIso =
@@ -286,23 +699,19 @@ const rawHistory = computed<any[]>(() => {
   const latest = [...(runs.value ?? [])].sort(
     (a, b) => (b?.info?.start_time ?? 0) - (a?.info?.start_time ?? 0),
   )[0];
-
   const endIso =
     latest?.info?.end_time && isFinite(Number(latest.info.end_time))
       ? new Date(Number(latest.info.end_time)).toISOString()
       : undefined;
 
   const status = String(props.experimentInfo?.status ?? "").toUpperCase();
-
   const out: Array<{ state: string; update_time?: string }> = [];
   if (startIso) out.push({ state: "PENDING", update_time: startIso });
   if (startIso) out.push({ state: "RUNNING", update_time: startIso });
-  if (status === "SUCCEEDED" || status === "FAILED") {
+  if (status === "SUCCEEDED" || status === "FAILED")
     out.push({ state: status, update_time: endIso ?? startIso });
-  }
   return out;
 });
-
 const history = computed(() =>
   rawHistory.value
     .slice()
@@ -313,80 +722,56 @@ const history = computed(() =>
         new Date(b.update_time || 0).getTime(),
     ),
 );
+const fmt = (iso?: string) => (iso ? new Date(iso).toLocaleString() : "—");
 
-const hPending = computed(() =>
-  history.value.find((h) => (h.state || "").toUpperCase() === "PENDING"),
+/* ========= Lifecycle & Watchers ========= */
+async function refreshIfActive() {
+  await fetchRuns(pickExpName(props.experimentInfo));
+  await fetchRunDetail(selectedRunId.value);
+}
+watch(
+  () => mainTab.value,
+  async (t) => {
+    if (t === "viz" || t === "artifacts") await refreshIfActive();
+  },
+  { immediate: true },
 );
-const hRunning = computed(() =>
-  history.value.find((h) => (h.state || "").toUpperCase() === "RUNNING"),
+
+watch(
+  () => props.experimentInfo,
+  async () => {
+    if (mainTab.value === "viz" || mainTab.value === "artifacts")
+      await refreshIfActive();
+  },
 );
-const hTerminal = computed(() => {
-  const t = history.value
-    .slice()
-    .reverse()
-    .find((h) =>
-      ["SUCCEEDED", "FAILED", "COMPLETED"].includes(
-        (h.state || "").toUpperCase(),
-      ),
-    );
-  return t ?? null;
+watch(selectedRunId, (id) => fetchRunDetail(id));
+watch(vizTab, async (t) => {
+  if (mainTab.value === "viz" && t === "metrics") {
+    await nextTick();
+    drawSelectedRunChart();
+    if (elMetrics.value) Plotly.Plots.resize(elMetrics.value);
+  }
+});
+watch([compareSelectedRunIds, compareSelectedMetricKeys], async () => {
+  if (!compareDialog.value) return;
+  await loadCompareData();
+});
+watch(compareDialog, (open) => {
+  if (open) loadCompareData();
 });
 
-const steps = computed(() => {
-  const lastLabel = (
-    hTerminal.value?.state ||
-    props.experimentInfo?.status ||
-    "COMPLETED"
-  )
-    .toString()
-    .toUpperCase();
-
-  return [
-    {
-      key: "PENDING",
-      label: "PENDING",
-      active: !!(hPending.value || hRunning.value || hTerminal.value),
-      color: "primary",
-      icon: "mdi-clock-outline",
-      ts: hPending.value?.update_time,
-    },
-    {
-      key: "RUNNING",
-      label: "RUNNING",
-      active: !!(hRunning.value || hTerminal.value),
-      color: "info",
-      icon: "mdi-progress-clock",
-      ts: hRunning.value?.update_time,
-    },
-    {
-      key: "TERMINAL",
-      label: ["SUCCEEDED", "FAILED"].includes(lastLabel)
-        ? lastLabel
-        : "COMPLETED",
-      active: !!hTerminal.value || ["SUCCEEDED", "FAILED"].includes(lastLabel),
-      color:
-        lastLabel === "FAILED"
-          ? "error"
-          : lastLabel === "SUCCEEDED"
-            ? "success"
-            : "surface-variant",
-      icon:
-        lastLabel === "FAILED"
-          ? "mdi-close"
-          : lastLabel === "SUCCEEDED"
-            ? "mdi-check"
-            : "mdi-dots-horizontal",
-      ts: hTerminal.value?.update_time,
-    },
-  ];
+const onResize = () => {
+  if (mainTab.value === "viz" && vizTab.value === "metrics" && elMetrics.value)
+    Plotly.Plots.resize(elMetrics.value);
+  if (elCompare.value) Plotly.Plots.resize(elCompare.value);
+};
+onMounted(() => {
+  restoreAuthFromStorage();
+  window.addEventListener("resize", onResize);
 });
-const nSteps = 3;
-const activeIndex = computed(() =>
-  steps.value.map((s) => s.active).lastIndexOf(true),
-);
-const leftPct = (i: number) => (i / (nSteps - 1)) * 100;
-const segWidthPct = () => 100 / (nSteps - 1);
-const fmt = (iso?: string) => (iso ? new Date(iso).toLocaleString() : "—");
+onBeforeUnmount(() => window.removeEventListener("resize", onResize));
+
+const artifactsLoading = ref(false);
 </script>
 
 <template>
@@ -398,7 +783,7 @@ const fmt = (iso?: string) => (iso ? new Date(iso).toLocaleString() : "—");
       <v-card flat class="bg-shades-transparent w-100">
         <v-card-item class="text-h5 font-weight-bold pt-0 pa-5 pl-0">
           <div class="d-flex flex-row justify-start align-center">
-            <div class="text-primary">Compare Executions</div>
+            <div>Compare Executions</div>
           </div>
         </v-card-item>
       </v-card>
@@ -407,6 +792,7 @@ const fmt = (iso?: string) => (iso ? new Date(iso).toLocaleString() : "—");
       <v-tabs v-model="mainTab" density="comfortable" color="primary">
         <v-tab value="details">Details</v-tab>
         <v-tab value="viz">Metrics</v-tab>
+        <v-tab value="artifacts">Artifacts</v-tab>
       </v-tabs>
 
       <v-window v-model="mainTab">
@@ -482,7 +868,6 @@ const fmt = (iso?: string) => (iso ? new Date(iso).toLocaleString() : "—");
                   props.experimentInfo.registryStatus
                 }}</v-col>
               </v-row>
-              <VDivider class="my-2" />
 
               <!-- State History -->
               <v-row align="center" class="py-6">
@@ -490,53 +875,33 @@ const fmt = (iso?: string) => (iso ? new Date(iso).toLocaleString() : "—");
                   >State History</v-col
                 >
                 <v-col cols="9">
-                  <div class="history-rail">
-                    <div class="history-rail__line" />
-                    <template v-for="i in 2" :key="'seg-' + i">
-                      <div
-                        class="history-rail__seg"
-                        :style="{
-                          left: `calc(${leftPct(i - 1)}% + var(--dot-size)/2)`,
-                          width: `calc(${segWidthPct()}% - var(--dot-size))`,
-                          background:
-                            i - 1 < activeIndex
-                              ? 'var(--color-active)'
-                              : 'var(--color-idle)',
-                        }"
-                      />
-                    </template>
-
-                    <template v-for="(s, i) in steps" :key="'dot-' + s.key">
-                      <div
-                        class="history-rail__dot"
-                        :style="{ left: leftPct(i) + '%' }"
-                      >
-                        <v-avatar
-                          :color="s.active ? s.color : 'surface-variant'"
-                          size="28"
-                          class="elev-1"
-                        >
-                          <v-icon size="18">{{ s.icon }}</v-icon>
-                        </v-avatar>
+                  <v-timeline direction="horizontal">
+                    <v-timeline-item
+                      v-for="(h, idx) in history"
+                      :key="idx"
+                      :dot-color="
+                        (h.state || '').toUpperCase() === 'FAILED'
+                          ? 'error'
+                          : (h.state || '').toUpperCase() === 'SUCCEEDED'
+                            ? 'success'
+                            : 'primary'
+                      "
+                      :icon="
+                        (h.state || '').toUpperCase() === 'FAILED'
+                          ? 'mdi-close'
+                          : (h.state || '').toUpperCase() === 'SUCCEEDED'
+                            ? 'mdi-check'
+                            : 'mdi-progress-clock'
+                      "
+                    >
+                      <div class="text-caption text-medium-emphasis">
+                        {{ fmt(h.update_time) }}
                       </div>
-                      <div
-                        class="history-rail__label"
-                        :style="{ left: leftPct(i) + '%' }"
-                      >
-                        <v-chip
-                          size="small"
-                          :color="s.active ? s.color : undefined"
-                          variant="tonal"
-                          class="mb-1 text-uppercase font-weight-medium"
-                        >
-                          {{ s.label }}
-                        </v-chip>
-                        <div class="text-caption text-medium-emphasis">
-                          {{ fmt(s.ts) }}
-                        </div>
+                      <div class="text-body-2 font-weight-medium">
+                        {{ (h.state || "").toUpperCase() }}
                       </div>
-                    </template>
-                  </div>
+                    </v-timeline-item>
+                  </v-timeline>
                 </v-col>
               </v-row>
             </v-card-text>
@@ -575,17 +940,34 @@ const fmt = (iso?: string) => (iso ? new Date(iso).toLocaleString() : "—");
                         <strong>{{ runs.length.toLocaleString() }}</strong>
                       </div>
 
-                      <v-select
-                        v-model="selectedRunId"
-                        :items="runItems"
-                        item-title="label"
-                        item-value="value"
-                        density="comfortable"
-                        hide-details
-                        :clearable="false"
-                        clear-icon=""
-                        style="min-width: 280px; max-width: 440px"
-                      />
+                      <div
+                        class="d-flex align-center ga-2"
+                        style="min-width: 280px; max-width: 620px"
+                      >
+                        <v-select
+                          v-model="selectedRunId"
+                          :items="runItems"
+                          item-title="label"
+                          item-value="value"
+                          density="comfortable"
+                          hide-details
+                          :clearable="false"
+                          clear-icon=""
+                          style="min-width: 280px; max-width: 440px"
+                        />
+                        <!-- Compare button -->
+                        <v-btn
+                          color="primary"
+                          variant="elevated"
+                          density="comfortable"
+                          @click="openCompareDialog"
+                          :disabled="runs.length < 2"
+                          title="여러 Run을 골라 메트릭 비교"
+                        >
+                          Compare
+                        </v-btn>
+                      </div>
+
                       <v-progress-circular
                         v-if="loadingRuns || loadingRunDetail"
                         indeterminate
@@ -595,7 +977,7 @@ const fmt = (iso?: string) => (iso ? new Date(iso).toLocaleString() : "—");
                     </v-col>
                   </v-row>
 
-                  <!-- (A) 선택한 단건 run 상세 -->
+                  <!-- Selected Run -->
                   <v-card class="mb-6" variant="tonal">
                     <v-card-title class="py-2 px-4">Selected Run</v-card-title>
                     <v-card-text class="px-4 pb-4">
@@ -731,7 +1113,7 @@ const fmt = (iso?: string) => (iso ? new Date(iso).toLocaleString() : "—");
                     </v-card-text>
                   </v-card>
 
-                  <!-- (B) 선택한 run 기준의 간단 메트릭 표 -->
+                  <!-- Model Metrics table -->
                   <v-card flat class="mb-6">
                     <v-card-title
                       class="py-2 px-0 text-button text-medium-emphasis"
@@ -762,6 +1144,7 @@ const fmt = (iso?: string) => (iso ? new Date(iso).toLocaleString() : "—");
                     </v-table>
                   </v-card>
 
+                  <!-- Bar chart -->
                   <v-card flat class="mb-6">
                     <v-card-title
                       class="py-2 px-0 text-button text-medium-emphasis"
@@ -776,23 +1159,251 @@ const fmt = (iso?: string) => (iso ? new Date(iso).toLocaleString() : "—");
                 </v-card-text>
               </v-window-item>
 
-              <!-- placeholders -->
               <v-window-item value="scatter">
-                <v-card-text class="px-6 py-10 text-medium-emphasis"
-                  >(준비중) X/Y 축 선택 후 산점도 표시</v-card-text
-                >
+                <v-card-text class="px-6 py-10 text-medium-emphasis">
+                  (준비중) X/Y 축 선택 후 산점도 표시
+                </v-card-text>
               </v-window-item>
               <v-window-item value="box">
-                <v-card-text class="px-6 py-10 text-medium-emphasis"
-                  >(준비중) 메트릭 분포 Box Plot</v-card-text
-                >
+                <v-card-text class="px-6 py-10 text-medium-emphasis">
+                  (준비중) 메트릭 분포 Box Plot
+                </v-card-text>
               </v-window-item>
               <v-window-item value="contour">
-                <v-card-text class="px-6 py-10 text-medium-emphasis"
-                  >(준비중) 2D/3D Contour Plot</v-card-text
-                >
+                <v-card-text class="px-6 py-10 text-medium-emphasis">
+                  (준비중) 2D/3D Contour Plot
+                </v-card-text>
               </v-window-item>
             </v-window>
+
+            <v-sheet class="d-flex justify-end mb-2">
+              <v-btn color="primary" @click="emit('close')">Back to List</v-btn>
+            </v-sheet>
+          </v-card>
+        </v-window-item>
+
+        <!-- ========= Artifacts ========= -->
+        <v-window-item value="artifacts">
+          <v-card class="rounded-lg pa-8 w-100">
+            <v-card-text>
+              <v-row class="mb-4" align="center">
+                <v-col
+                  cols="12"
+                  class="d-flex align-center justify-between flex-wrap ga-3"
+                >
+                  <div class="text-body-2">
+                    Runs loaded:
+                    <strong>{{ runs.length.toLocaleString() }}</strong>
+                  </div>
+
+                  <v-select
+                    v-model="selectedRunId"
+                    :items="runItems"
+                    item-title="label"
+                    item-value="value"
+                    density="comfortable"
+                    hide-details
+                    :clearable="false"
+                    clear-icon=""
+                    style="min-width: 280px; max-width: 440px"
+                  />
+
+                  <!-- 로그인 상태 표시 -->
+                  <div class="d-flex align-center ga-2 ml-auto">
+                    <v-chip
+                      v-if="isAuthenticated"
+                      color="success"
+                      variant="tonal"
+                      size="small"
+                      class="text-body-2"
+                    >
+                      <v-icon start size="16">mdi-check-decagram</v-icon>
+                      {{ externalAuth?.name || externalAuth?.id }}
+                    </v-chip>
+
+                    <v-btn
+                      v-if="isAuthenticated"
+                      size="small"
+                      color="primary"
+                      variant="text"
+                      @click="handleLogout"
+                    >
+                      <v-icon start size="16">mdi-logout</v-icon> Logout
+                    </v-btn>
+                    <v-btn
+                      v-else
+                      size="small"
+                      color="primary"
+                      variant="text"
+                      @click="loginDialog = true"
+                    >
+                      <v-icon start size="16">mdi-login</v-icon> Login
+                    </v-btn>
+
+                    <v-progress-circular
+                      v-if="artifactsLoading || loadingRuns || loadingRunDetail"
+                      indeterminate
+                      size="16"
+                      class="ml-2"
+                    />
+                  </div>
+                </v-col>
+              </v-row>
+
+              <v-alert
+                v-if="!historyArtifactPath"
+                type="info"
+                variant="tonal"
+                class="mb-4"
+              >
+                이 실행에서 <code>mlflow.log-model.history</code> 태그를 찾을 수
+                없어요.
+              </v-alert>
+
+              <template v-else>
+                <div class="text-body-2 mb-2">
+                  Path:
+                  <v-chip size="small" variant="tonal" class="ml-1">{{
+                    historyArtifactPath
+                  }}</v-chip>
+                </div>
+
+                <v-card variant="tonal">
+                  <v-card-title class="py-2 px-4">Artifacts</v-card-title>
+                  <v-divider />
+
+                  <v-card-text class="px-0">
+                    <!-- 히스토리에 아무것도 없을 때 -->
+                    <v-alert
+                      v-if="!loadingRunDetail && artifactGroups.length === 0"
+                      type="info"
+                      variant="tonal"
+                      class="ma-3"
+                      density="comfortable"
+                    >
+                      No files
+                    </v-alert>
+
+                    <!-- 여러 폴더 -->
+                    <v-list
+                      v-else-if="artifactGroups.length > 1"
+                      lines="one"
+                      density="comfortable"
+                      class="file-list"
+                    >
+                      <template v-for="(g, gi) in artifactGroups" :key="g.base">
+                        <v-list-subheader class="d-flex align-center">
+                          <v-icon class="mr-2">mdi-folder</v-icon>
+                          {{ g.base }}
+                        </v-list-subheader>
+
+                        <v-list-item
+                          v-for="(f, i) in g.items"
+                          :key="f.path"
+                          :ripple="false"
+                          class="file-row pl-8"
+                        >
+                          <template #prepend>
+                            <v-icon
+                              :icon="
+                                fileIconByName(f.path.split('/').pop() || '')
+                              "
+                            />
+                          </template>
+
+                          <v-list-item-title class="file-name">
+                            {{ f.path.replace(g.base + "/", "") }}
+                          </v-list-item-title>
+
+                          <v-list-item-subtitle class="file-size">
+                            {{ (f.file_size ?? 0).toLocaleString() }} bytes
+                          </v-list-item-subtitle>
+
+                          <template #append>
+                            <IconDownloadBtn
+                              @onClick="onClickArtifact(f.path)"
+                            />
+                            <IconDeployBtn
+                              class="ml-2"
+                              :tooltip="
+                                isAuthenticated ? 'Deploy' : 'Login required'
+                              "
+                              @onClick="openDeploymentModal(f.path)"
+                            />
+                          </template>
+                        </v-list-item>
+
+                        <v-divider
+                          v-if="gi < artifactGroups.length - 1"
+                          class="my-2"
+                        />
+                      </template>
+                    </v-list>
+
+                    <!-- 폴더 1개 -->
+                    <v-list
+                      v-else
+                      lines="one"
+                      density="comfortable"
+                      class="file-list"
+                    >
+                      <v-list-subheader class="d-flex align-center">
+                        <v-icon class="mr-2">mdi-folder</v-icon>
+                        {{ historyArtifactPath }}
+                      </v-list-subheader>
+
+                      <template v-for="(f, i) in artifactItems" :key="f.path">
+                        <v-list-item :ripple="false" class="file-row pl-8">
+                          <template #prepend>
+                            <v-icon
+                              :icon="
+                                fileIconByName(
+                                  historyArtifactPath &&
+                                    f.path.startsWith(historyArtifactPath + '/')
+                                    ? f.path.slice(
+                                        historyArtifactPath.length + 1,
+                                      )
+                                    : f.path,
+                                )
+                              "
+                            />
+                          </template>
+
+                          <v-list-item-title class="file-name">
+                            {{
+                              historyArtifactPath &&
+                              f.path.startsWith(historyArtifactPath + "/")
+                                ? f.path.slice(historyArtifactPath.length + 1)
+                                : f.path
+                            }}
+                          </v-list-item-title>
+
+                          <v-list-item-subtitle class="file-size">
+                            {{ (f.file_size ?? 0).toLocaleString() }} bytes
+                          </v-list-item-subtitle>
+
+                          <template #append>
+                            <IconDownloadBtn
+                              @onClick="onClickArtifact(f.path)"
+                            />
+                            <IconDeployBtn
+                              class="ml-2"
+                              :tooltip="
+                                isAuthenticated ? 'Deploy' : 'Login required'
+                              "
+                              @onClick="openDeploymentModal(f.path)"
+                            />
+                          </template>
+                        </v-list-item>
+
+                        <v-divider v-if="i < artifactItems.length - 1" />
+                      </template>
+                    </v-list>
+                  </v-card-text>
+                </v-card>
+              </template>
+            </v-card-text>
+
             <v-sheet class="d-flex justify-end mb-2">
               <v-btn color="primary" @click="emit('close')">Back to List</v-btn>
             </v-sheet>
@@ -800,49 +1411,95 @@ const fmt = (iso?: string) => (iso ? new Date(iso).toLocaleString() : "—");
         </v-window-item>
       </v-window>
     </v-card>
+
+    <CompareRunsDialog
+      v-model="compareDialog"
+      :items="runItems"
+      v-model:selectedRunIds="compareSelectedRunIds"
+      v-model:selectedMetricKeys="compareSelectedMetricKeys"
+      :ensureRunDetail="ensureRunDetail"
+      :runDetailCache="runDetailCache"
+      :compareChartMode="compareChartMode"
+      :normalizeValues="normalizeValues"
+      :baselineRunId="baselineRunId"
+    />
   </v-container>
+
+  <v-dialog v-model="isEditVisible" max-width="800" persistent>
+    <DeploymentDialog
+      :edit-data="null"
+      :mode="'create'"
+      :packages="packageOptions"
+      :packages-loading="packagesLoading"
+      :packages-error="packagesError"
+      :artifact-path="lastArtifactUri"
+      @close-modal="closeCreateModal"
+      @handle-data="() => {}"
+      :user-option="[]"
+    />
+  </v-dialog>
+
+  <!-- 로그인 모달 -->
+  <v-dialog v-model="loginDialog" max-width="450" persistent>
+    <v-card>
+      <v-card-title
+        class="text-white font-weight-bold text-h6"
+        style="background-color: #1976d2"
+      >
+        External Login
+      </v-card-title>
+      <v-card-text class="pa-6">
+        <v-form @submit.prevent="handleLogin">
+          <div class="mb-5">
+            <label class="text-subtitle-2 font-weight-medium mb-1 d-block"
+              >ID</label
+            >
+            <v-text-field
+              v-model="loginForm.id"
+              variant="outlined"
+              :disabled="loginLoading"
+              dense
+              hide-details="auto"
+              autocomplete="username"
+              required
+              @keyup.enter.prevent="handleLogin"
+            />
+          </div>
+          <div class="mb-5">
+            <label class="text-subtitle-2 font-weight-medium mb-1 d-block"
+              >Password</label
+            >
+            <v-text-field
+              v-model="loginForm.password"
+              variant="outlined"
+              :disabled="loginLoading"
+              dense
+              hide-details="auto"
+              type="password"
+              autocomplete="current-password"
+              required
+              @keyup.enter.prevent="handleLogin"
+            />
+          </div>
+          <div v-if="loginError" class="mt-3 text-error">
+            {{ loginError }}
+          </div>
+        </v-form>
+      </v-card-text>
+      <v-card-actions class="justify-end" style="padding: 16px 24px">
+        <v-btn color="success" :loading="loginLoading" @click="handleLogin"
+          >Login</v-btn
+        >
+        <v-btn text :disabled="loginLoading" @click="loginDialog = false"
+          >Close</v-btn
+        >
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
 </template>
 
 <style scoped>
 :root {
   --dot-size: 28px;
 }
-.history-rail {
-  position: relative;
-  width: 40%;
-  padding: 12px 0 34px;
-  --color-rail: rgba(255, 255, 255, 0.12);
-  --color-idle: rgba(255, 255, 255, 0.12);
-  --color-active: rgb(98, 0, 238);
-}
-.history-rail__line {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 14px;
-  height: 4px;
-  background: var(--color-rail);
-  border-radius: 2px;
-}
-.history-rail__seg {
-  position: absolute;
-  top: 14px;
-  height: 4px;
-  border-radius: 2px;
-  transition:
-    width 0.24s ease,
-    background 0.24s ease;
-}
-.history-rail__dot {
-  position: absolute;
-  top: 0;
-  transform: translateX(-50%);
-}
-.history-rail__label {
-  position: absolute;
-  top: 28px;
-  transform: translateX(-50%);
-  text-align: center;
-  white-space: nowrap;
-}
 </style>
diff --git a/src/components/templates/run/experiment/ListComponent.vue b/src/components/templates/run/experiment/ListComponent.vue
index 6f052ef..38148b3 100644
--- a/src/components/templates/run/experiment/ListComponent.vue
+++ b/src/components/templates/run/experiment/ListComponent.vue
@@ -302,7 +302,7 @@ onMounted(() => {
         <v-card flat class="bg-shades-transparent w-100">
           <v-card-item class="text-h5 font-weight-bold pt-0 pa-5 pl-0">
             <div class="d-flex flex-row justify-start align-center">
-              <div class="text-primary">Experiment</div>
+              <div>Experiment</div>
             </div>
           </v-card-item>
         </v-card>
diff --git a/src/components/templates/run/experiment/ViewComponent.vue b/src/components/templates/run/experiment/ViewComponent.vue
index 34d675e..039b985 100644
--- a/src/components/templates/run/experiment/ViewComponent.vue
+++ b/src/components/templates/run/experiment/ViewComponent.vue
@@ -185,7 +185,7 @@ watch(
         <v-card flat class="bg-shades-transparent w-100">
           <v-card-item class="text-h5 font-weight-bold pt-0 pa-5 pl-0">
             <div class="d-flex flex-row justify-start align-center">
-              <div class="text-primary">View Details</div>
+              <div>View Details</div>
             </div>
           </v-card-item>
         </v-card>
diff --git a/src/components/templates/stepconfig/ListComponent.vue b/src/components/templates/stepconfig/ListComponent.vue
index 37759c7..7653716 100644
--- a/src/components/templates/stepconfig/ListComponent.vue
+++ b/src/components/templates/stepconfig/ListComponent.vue
@@ -317,7 +317,7 @@ onMounted(() => {
         <v-card flat class="bg-shades-transparent w-100">
           <v-card-item class="text-h5 font-weight-bold pt-0 pa-5 pl-0">
             <div class="d-flex flex-row justify-start align-center">
-              <div class="text-primary">Workflows Step Config</div>
+              <div>Workflows Step Config</div>
             </div>
           </v-card-item>
         </v-card>
diff --git a/src/components/templates/stepconfig/ViewComponent.vue b/src/components/templates/stepconfig/ViewComponent.vue
index 582cffd..4f2ece7 100644
--- a/src/components/templates/stepconfig/ViewComponent.vue
+++ b/src/components/templates/stepconfig/ViewComponent.vue
@@ -96,7 +96,7 @@ watch(
     <v-card flat class="bg-shades-transparent w-100 mb-6">
       <v-card-item class="text-h5 font-weight-bold pt-0 pa-5 pl-0">
         <div class="d-flex flex-row justify-start align-center">
-          <div class="text-primary">View Details</div>
+          <div>View Details</div>
         </div>
       </v-card-item>
     </v-card>
diff --git a/src/components/templates/trainingscript/ListComponent.vue b/src/components/templates/trainingscript/ListComponent.vue
index 816b8fa..a941e17 100644
--- a/src/components/templates/trainingscript/ListComponent.vue
+++ b/src/components/templates/trainingscript/ListComponent.vue
@@ -355,7 +355,7 @@ watch(
         <v-card flat class="bg-shades-transparent w-100">
           <v-card-item class="text-h5 font-weight-bold pt-0 pa-5 pl-0">
             <div class="d-flex flex-row justify-start align-center">
-              <div class="text-primary">TrainingScript</div>
+              <div>TrainingScript</div>
             </div>
           </v-card-item>
         </v-card>
diff --git a/src/components/templates/trainingscript/ViewComponent.vue b/src/components/templates/trainingscript/ViewComponent.vue
index ffdb147..a66c87a 100644
--- a/src/components/templates/trainingscript/ViewComponent.vue
+++ b/src/components/templates/trainingscript/ViewComponent.vue
@@ -110,7 +110,7 @@ onBeforeUnmount(() => {
     <v-card flat class="bg-shades-transparent w-100 mb-6">
       <v-card-item class="text-h5 font-weight-bold pt-0 pa-5 pl-0">
         <div class="d-flex flex-row justify-start align-center">
-          <div class="text-primary">View Details</div>
+          <div>View Details</div>
         </div>
       </v-card-item>
     </v-card>
diff --git a/src/components/templates/trainingscriptgroup/ListComponent.vue b/src/components/templates/trainingscriptgroup/ListComponent.vue
index 524675f..540a466 100644
--- a/src/components/templates/trainingscriptgroup/ListComponent.vue
+++ b/src/components/templates/trainingscriptgroup/ListComponent.vue
@@ -374,7 +374,7 @@ onMounted(fetchList);
         <v-card flat class="bg-shades-transparent w-100">
           <v-card-item class="text-h5 font-weight-bold pt-0 pa-5 pl-0">
             <div class="d-flex flex-row justify-start align-center">
-              <div class="text-primary">TrainingScriptGroup</div>
+              <div>TrainingScriptGroup</div>
             </div>
           </v-card-item>
         </v-card>
diff --git a/src/components/templates/users/ListComponent.vue b/src/components/templates/users/ListComponent.vue
index 3069487..0ea673d 100644
--- a/src/components/templates/users/ListComponent.vue
+++ b/src/components/templates/users/ListComponent.vue
@@ -401,7 +401,7 @@ onMounted(async () => {
         <v-card flat class="bg-shades-transparent w-100">
           <v-card-item class="text-h5 font-weight-bold pt-0 pa-5 pl-0">
             <div class="d-flex flex-row justify-start align-center">
-              <div class="text-primary">Users</div>
+              <div>Users</div>
             </div>
           </v-card-item>
         </v-card>
diff --git a/src/components/templates/workflow/ListComponent.vue b/src/components/templates/workflow/ListComponent.vue
index a45ce87..3d274f4 100644
--- a/src/components/templates/workflow/ListComponent.vue
+++ b/src/components/templates/workflow/ListComponent.vue
@@ -347,7 +347,7 @@ onMounted(() => {
         <v-card flat class="bg-shades-transparent w-100">
           <v-card-item class="text-h5 font-weight-bold pt-0 pa-5 pl-0">
             <div class="d-flex flex-row justify-start align-center">
-              <div class="text-primary">Workflows</div>
+              <div>Workflows</div>
             </div>
           </v-card-item>
         </v-card>
diff --git a/src/components/templates/workflow/ViewComponent.vue b/src/components/templates/workflow/ViewComponent.vue
index 1ac72c8..1ae28c6 100644
--- a/src/components/templates/workflow/ViewComponent.vue
+++ b/src/components/templates/workflow/ViewComponent.vue
@@ -204,7 +204,7 @@ const steps = ref<
       <v-card flat class="bg-shades-transparent w-100">
         <v-card-item class="text-h5 font-weight-bold pt-0 pa-5 pl-0">
           <div class="d-flex flex-row justify-start align-center">
-            <div class="text-primary">View Details</div>
+            <div>View Details</div>
           </div>
         </v-card-item>
       </v-card>
diff --git a/src/utils/menuUtils.js b/src/utils/menuUtils.js
index 2e5b344..834798b 100644
--- a/src/utils/menuUtils.js
+++ b/src/utils/menuUtils.js
@@ -23,12 +23,12 @@ export const menuUtils = {
         { title: "Executions", path: "/run/executions" },
       ],
     },
-    {
-      title: "Deployment",
-      path: "/deployment",
-      value: "deployment",
-      icon: "mdi-folder-search",
-    },
+    // {
+    //   title: "Deployment",
+    //   path: "/deployment",
+    //   value: "deployment",
+    //   icon: "mdi-folder-search",
+    // },
     {
       title: "TrainingScriptGroup",
       path: "/TrainingScriptGroup",