Initial

client/src/components/RelationshipGraph.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="rel-graph">
+    <div class="rel-col rel-supersedes">
+      <span class="rel-col-label">Supersedes</span>
+      <div v-for="rel in supersedence" :key="`s-${rel.targetAppId}`" class="rel-node rel-old">
+        <strong>{{ rel.targetName || rel.targetAppId }}</strong>
+        <small>{{ rel.mode === 'replace' ? 'replace' : 'update' }}</small>
+      </div>
+      <p v-if="!supersedence.length" class="rel-empty">none</p>
+    </div>
+
+    <div class="rel-arrow">→</div>
+
+    <div class="rel-center">
+      <div class="rel-node rel-current">
+        <strong>{{ deployment.name }}</strong>
+        <small>{{ deployment.graphAppId ? 'published' : 'unpublished' }}</small>
+      </div>
+    </div>
+
+    <div class="rel-arrow">→</div>
+
+    <div class="rel-col rel-depends">
+      <span class="rel-col-label">Depends on</span>
+      <div v-for="rel in dependencies" :key="`d-${rel.targetAppId}`" class="rel-node rel-dep">
+        <strong>{{ rel.targetName || rel.targetAppId }}</strong>
+        <small>{{ rel.mode === 'autoInstall' ? 'auto-install' : 'detect' }}</small>
+      </div>
+      <p v-if="!dependencies.length" class="rel-empty">none</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  deployment: { type: Object, required: true }
+});
+
+const relationships = computed(() => props.deployment.relationships || []);
+const supersedence = computed(() => relationships.value.filter((r) => r.kind === 'supersedence'));
+const dependencies = computed(() => relationships.value.filter((r) => r.kind === 'dependency'));
+</script>
+
+<style scoped>
+.rel-graph {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  flex-wrap: wrap;
+  padding: 0.6rem 0;
+}
+.rel-col,
+.rel-center {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  min-width: 120px;
+}
+.rel-col-label {
+  font-size: 0.68rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-muted, #8a93a6);
+}
+.rel-node {
+  display: flex;
+  flex-direction: column;
+  padding: 0.45rem 0.6rem;
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(255, 255, 255, 0.04);
+}
+.rel-node strong { font-size: 0.82rem; }
+.rel-node small { font-size: 0.68rem; color: var(--text-muted, #8a93a6); }
+.rel-current { border-color: rgba(120, 170, 255, 0.5); background: rgba(120, 170, 255, 0.12); }
+.rel-old { border-color: rgba(255, 196, 120, 0.4); }
+.rel-dep { border-color: rgba(140, 220, 170, 0.4); }
+.rel-arrow { color: var(--text-muted, #8a93a6); font-size: 1.1rem; }
+.rel-empty { font-size: 0.72rem; color: var(--text-muted, #8a93a6); margin: 0; }
+</style>