From fede66cac366f85970beef55a26be3b9bf7242dc Mon Sep 17 00:00:00 2001
From: Christian Moellmann <christian.moellmann@uni-hamburg.de>
Date: Sat, 23 May 2026 12:44:37 +0200
Subject: [PATCH] feat(interviews): Step4b Vue scaffold with five-tab
 navigation, API client, i18n keys

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/src/api/interview.js                 |  29 +++
 frontend/src/components/Step4bInterviews.vue  |  79 +++++++
 .../src/components/interviews/DelphiPanel.vue |   4 +
 .../components/interviews/DiversityPanel.vue  |   4 +
 .../interviews/LongitudinalPanel.vue          |   4 +
 .../components/interviews/ScenarioPanel.vue   |   4 +
 .../components/interviews/SynthesisPanel.vue  |   4 +
 frontend/src/router/index.js                  |   7 +
 frontend/src/views/InterviewView.vue          | 192 ++++++++++++++++++
 locales/de.json                               |  15 ++
 locales/en.json                               |  13 ++
 locales/zh.json                               |  13 ++
 12 files changed, 368 insertions(+)
 create mode 100644 frontend/src/api/interview.js
 create mode 100644 frontend/src/components/Step4bInterviews.vue
 create mode 100644 frontend/src/components/interviews/DelphiPanel.vue
 create mode 100644 frontend/src/components/interviews/DiversityPanel.vue
 create mode 100644 frontend/src/components/interviews/LongitudinalPanel.vue
 create mode 100644 frontend/src/components/interviews/ScenarioPanel.vue
 create mode 100644 frontend/src/components/interviews/SynthesisPanel.vue
 create mode 100644 frontend/src/views/InterviewView.vue
 create mode 100644 locales/de.json

diff --git a/frontend/src/api/interview.js b/frontend/src/api/interview.js
new file mode 100644
index 00000000..0f5cdbf5
--- /dev/null
+++ b/frontend/src/api/interview.js
@@ -0,0 +1,29 @@
+import service from './index'
+
+export async function startPre(simId) {
+  const r = await service.post(`/api/interview/${simId}/pre`)
+  return r
+}
+export async function startPost(simId) {
+  const r = await service.post(`/api/interview/${simId}/post`)
+  return r
+}
+export async function rerun(simId, subagent) {
+  const r = await service.post(`/api/interview/${simId}/rerun`, { subagent })
+  return r
+}
+export async function getStatus(simId, taskId) {
+  const r = await service.get(`/api/interview/${simId}/status`, { params: { task_id: taskId } })
+  return r
+}
+export async function getResults(simId, subagent) {
+  const r = await service.get(`/api/interview/${simId}/results/${subagent}`)
+  return r
+}
+export async function getSynthesis(simId) {
+  const r = await service.get(`/api/interview/${simId}/results/synthesis`)
+  return r
+}
+export function exportCsvUrl(simId) {
+  return `/api/interview/${simId}/export.csv`
+}
diff --git a/frontend/src/components/Step4bInterviews.vue b/frontend/src/components/Step4bInterviews.vue
new file mode 100644
index 00000000..d2aed844
--- /dev/null
+++ b/frontend/src/components/Step4bInterviews.vue
@@ -0,0 +1,79 @@
+<template>
+  <section class="step4b">
+    <header>
+      <h2>{{ t('interview.title') }}</h2>
+      <p class="subtitle">{{ t('interview.subtitle') }}</p>
+    </header>
+
+    <div class="actions">
+      <button :disabled="busy" @click="startPostRun">{{ t('interview.runAll') }}</button>
+      <a :href="csvUrl" target="_blank" rel="noopener">{{ t('interview.downloadCsv') }}</a>
+    </div>
+
+    <nav class="tabs">
+      <button v-for="tab in tabs" :key="tab.id"
+              :class="{ active: active === tab.id }"
+              @click="active = tab.id">
+        {{ tab.label }}
+      </button>
+    </nav>
+
+    <component :is="currentPanel" :sim-id="simId" :status="status" />
+  </section>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import LongitudinalPanel from './interviews/LongitudinalPanel.vue'
+import DiversityPanel from './interviews/DiversityPanel.vue'
+import DelphiPanel from './interviews/DelphiPanel.vue'
+import ScenarioPanel from './interviews/ScenarioPanel.vue'
+import SynthesisPanel from './interviews/SynthesisPanel.vue'
+import { startPost, getStatus, exportCsvUrl } from '../api/interview'
+
+const props = defineProps({ simId: { type: String, required: true } })
+const { t } = useI18n()
+const tabs = [
+  { id: 'longitudinal', label: t('interview.tab.longitudinal') },
+  { id: 'diversity',    label: t('interview.tab.diversity') },
+  { id: 'delphi',       label: t('interview.tab.delphi') },
+  { id: 'scenario',     label: t('interview.tab.scenario') },
+  { id: 'synthesis',    label: t('interview.tab.synthesis') },
+]
+const active = ref('longitudinal')
+const status = ref({ status: 'idle' })
+const busy = ref(false)
+const csvUrl = computed(() => exportCsvUrl(props.simId))
+
+const panels = {
+  longitudinal: LongitudinalPanel, diversity: DiversityPanel,
+  delphi: DelphiPanel, scenario: ScenarioPanel, synthesis: SynthesisPanel,
+}
+const currentPanel = computed(() => panels[active.value])
+
+async function startPostRun() {
+  busy.value = true
+  try {
+    const res = await startPost(props.simId)
+    if (!res.success) throw new Error(res.error || 'failed to start')
+    await poll(res.data.task_id)
+  } finally { busy.value = false }
+}
+
+async function poll(taskId) {
+  while (true) {
+    const r = await getStatus(props.simId, taskId)
+    status.value = r.data
+    if (['completed', 'failed'].includes(r.data.status)) break
+    await new Promise(resolve => setTimeout(resolve, 1500))
+  }
+}
+</script>
+
+<style scoped>
+.step4b { padding: 1rem; }
+.tabs { display: flex; gap: .5rem; margin: 1rem 0; }
+.tabs button.active { font-weight: 700; border-bottom: 2px solid #333; }
+.actions { display: flex; gap: 1rem; align-items: center; }
+</style>
diff --git a/frontend/src/components/interviews/DelphiPanel.vue b/frontend/src/components/interviews/DelphiPanel.vue
new file mode 100644
index 00000000..f8b27647
--- /dev/null
+++ b/frontend/src/components/interviews/DelphiPanel.vue
@@ -0,0 +1,4 @@
+<template><div class="panel">Delphi: results will appear here.</div></template>
+<script setup>
+defineProps({ simId: String, status: Object })
+</script>
diff --git a/frontend/src/components/interviews/DiversityPanel.vue b/frontend/src/components/interviews/DiversityPanel.vue
new file mode 100644
index 00000000..759114b3
--- /dev/null
+++ b/frontend/src/components/interviews/DiversityPanel.vue
@@ -0,0 +1,4 @@
+<template><div class="panel">Diversity: results will appear here.</div></template>
+<script setup>
+defineProps({ simId: String, status: Object })
+</script>
diff --git a/frontend/src/components/interviews/LongitudinalPanel.vue b/frontend/src/components/interviews/LongitudinalPanel.vue
new file mode 100644
index 00000000..189c2488
--- /dev/null
+++ b/frontend/src/components/interviews/LongitudinalPanel.vue
@@ -0,0 +1,4 @@
+<template><div class="panel">Longitudinal: results will appear here.</div></template>
+<script setup>
+defineProps({ simId: String, status: Object })
+</script>
diff --git a/frontend/src/components/interviews/ScenarioPanel.vue b/frontend/src/components/interviews/ScenarioPanel.vue
new file mode 100644
index 00000000..ea2686e3
--- /dev/null
+++ b/frontend/src/components/interviews/ScenarioPanel.vue
@@ -0,0 +1,4 @@
+<template><div class="panel">Scenarios: results will appear here.</div></template>
+<script setup>
+defineProps({ simId: String, status: Object })
+</script>
diff --git a/frontend/src/components/interviews/SynthesisPanel.vue b/frontend/src/components/interviews/SynthesisPanel.vue
new file mode 100644
index 00000000..7f3f7966
--- /dev/null
+++ b/frontend/src/components/interviews/SynthesisPanel.vue
@@ -0,0 +1,4 @@
+<template><div class="panel">Synthesis: results will appear here.</div></template>
+<script setup>
+defineProps({ simId: String, status: Object })
+</script>
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 62d23201..30b072b8 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -4,6 +4,7 @@ import Process from '../views/MainView.vue'
 import SimulationView from '../views/SimulationView.vue'
 import SimulationRunView from '../views/SimulationRunView.vue'
 import ReportView from '../views/ReportView.vue'
+import InterviewView from '../views/InterviewView.vue'
 import InteractionView from '../views/InteractionView.vue'
 
 const routes = [
@@ -36,6 +37,12 @@ const routes = [
     component: ReportView,
     props: true
   },
+  {
+    path: '/interview/:simulationId',
+    name: 'Interview',
+    component: InterviewView,
+    props: true
+  },
   {
     path: '/interaction/:reportId',
     name: 'Interaction',
diff --git a/frontend/src/views/InterviewView.vue b/frontend/src/views/InterviewView.vue
new file mode 100644
index 00000000..767ac9b7
--- /dev/null
+++ b/frontend/src/views/InterviewView.vue
@@ -0,0 +1,192 @@
+<template>
+  <div class="main-view">
+    <!-- Header -->
+    <header class="app-header">
+      <div class="header-left">
+        <div class="brand" @click="router.push('/')">MIROFISH</div>
+      </div>
+
+      <div class="header-center">
+        <div class="view-switcher">
+          <button
+            v-for="mode in ['graph', 'split', 'workbench']"
+            :key="mode"
+            class="switch-btn"
+            :class="{ active: viewMode === mode }"
+            @click="viewMode = mode"
+          >
+            {{ { graph: $t('main.layoutGraph'), split: $t('main.layoutSplit'), workbench: $t('main.layoutWorkbench') }[mode] }}
+          </button>
+        </div>
+      </div>
+
+      <div class="header-right">
+        <LanguageSwitcher />
+        <div class="step-divider"></div>
+        <div class="workflow-step">
+          <span class="step-num">Step 4b/5</span>
+          <span class="step-name">{{ $t('interview.title') }}</span>
+        </div>
+        <div class="step-divider"></div>
+        <span class="status-indicator idle">
+          <span class="dot"></span>
+          {{ $t('common.ready') }}
+        </span>
+      </div>
+    </header>
+
+    <!-- Main Content Area -->
+    <main class="content-area">
+      <!-- Right Panel fills workbench mode -->
+      <div class="panel-wrapper right" :style="rightPanelStyle">
+        <Step4bInterviews :sim-id="currentSimId" />
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import LanguageSwitcher from '../components/LanguageSwitcher.vue'
+import Step4bInterviews from '../components/Step4bInterviews.vue'
+
+const route = useRoute()
+const router = useRouter()
+
+const currentSimId = ref(route.params.simulationId)
+const viewMode = ref('workbench')
+
+const rightPanelStyle = computed(() => {
+  if (viewMode.value === 'workbench') return { width: '100%', opacity: 1, transform: 'translateX(0)' }
+  if (viewMode.value === 'graph') return { width: '0%', opacity: 0, transform: 'translateX(20px)' }
+  return { width: '50%', opacity: 1, transform: 'translateX(0)' }
+})
+</script>
+
+<style scoped>
+.main-view {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+  font-family: 'JetBrains Mono', 'Space Grotesk', 'Noto Sans SC', monospace;
+}
+
+.app-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 24px;
+  height: 56px;
+  background: #000;
+  color: #fff;
+  flex-shrink: 0;
+  z-index: 10;
+}
+
+.brand {
+  font-size: 1rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.brand:hover { opacity: 0.8; }
+
+.header-center {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.view-switcher {
+  display: flex;
+  gap: 2px;
+  background: #1a1a1a;
+  padding: 3px;
+  border-radius: 4px;
+}
+
+.switch-btn {
+  padding: 4px 12px;
+  font-size: 0.75rem;
+  background: transparent;
+  border: none;
+  color: #666;
+  cursor: pointer;
+  border-radius: 2px;
+  transition: all 0.15s;
+  font-family: inherit;
+}
+
+.switch-btn.active {
+  background: #fff;
+  color: #000;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.step-divider {
+  width: 1px;
+  height: 20px;
+  background: #333;
+}
+
+.workflow-step {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.step-num {
+  font-size: 0.65rem;
+  color: #666;
+  letter-spacing: 0.05em;
+}
+
+.step-name {
+  font-size: 0.75rem;
+  color: #fff;
+}
+
+.status-indicator {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.75rem;
+  color: #999;
+}
+
+.dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #666;
+}
+
+.status-indicator.idle .dot { background: #666; }
+
+.content-area {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+  position: relative;
+}
+
+.panel-wrapper {
+  overflow: hidden;
+  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+              opacity 0.3s ease,
+              transform 0.3s ease;
+}
+
+.panel-wrapper.right {
+  overflow-y: auto;
+}
+</style>
diff --git a/locales/de.json b/locales/de.json
new file mode 100644
index 00000000..4032d4db
--- /dev/null
+++ b/locales/de.json
@@ -0,0 +1,15 @@
+{
+  "interview": {
+    "title": "Stakeholder-Interviews",
+    "subtitle": "Vier unabhängige Befragungen der simulierten Stakeholder-Population.",
+    "runAll": "Alle Post-Simulations-Interviews starten",
+    "downloadCsv": "CSV herunterladen",
+    "tab": {
+      "longitudinal": "Längsschnitt (Δ)",
+      "diversity": "Diversität",
+      "delphi": "Delphi",
+      "scenario": "Szenarien",
+      "synthesis": "Synthese"
+    }
+  }
+}
diff --git a/locales/en.json b/locales/en.json
index 544c68b1..d22cf64f 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -661,5 +661,18 @@
     "llmSelectAgentFailed": "LLM agent selection failed, using default selection: {error}",
     "generateInterviewQuestionsFailed": "Failed to generate interview questions: {error}",
     "generateInterviewSummaryFailed": "Failed to generate interview summary: {error}"
+  },
+  "interview": {
+    "title": "Stakeholder interviews",
+    "subtitle": "Four independent surveys of the simulated stakeholder population.",
+    "runAll": "Run all post-simulation interviews",
+    "downloadCsv": "Download CSV",
+    "tab": {
+      "longitudinal": "Longitudinal (Δ)",
+      "diversity": "Diversity",
+      "delphi": "Delphi",
+      "scenario": "Scenarios",
+      "synthesis": "Synthesis"
+    }
   }
 }
diff --git a/locales/zh.json b/locales/zh.json
index cd747e2f..71ed6c4b 100644
--- a/locales/zh.json
+++ b/locales/zh.json
@@ -661,5 +661,18 @@
     "llmSelectAgentFailed": "LLM选择Agent失败，使用默认选择: {error}",
     "generateInterviewQuestionsFailed": "生成采访问题失败: {error}",
     "generateInterviewSummaryFailed": "生成采访摘要失败: {error}"
+  },
+  "interview": {
+    "title": "利益相关者访谈",
+    "subtitle": "对模拟利益相关者群体进行的四项独立调查。",
+    "runAll": "运行所有模拟后访谈",
+    "downloadCsv": "下载 CSV",
+    "tab": {
+      "longitudinal": "纵向分析 (Δ)",
+      "diversity": "多样性",
+      "delphi": "德尔菲法",
+      "scenario": "情景分析",
+      "synthesis": "综合分析"
+    }
   }
 }