fix(frontend): replace placeholder states with coming-soon + modal fallbacks

- SettingsPage: disabled cards → 'coming-soon' badge (primary blue, opacity-75)
- LoginPage: Terms/Privacy # links → modal overlay (reuses SettingsPage dialog pattern)
- tokenManager: refreshToken TODO → @see GitHub issue reference
- i18n: added comingSoon + legal modal translations (zh-CN/en-US/ja-JP)
- npm run build: zero type errors

Author: chyinan

frontend/src/api/client/tokenManager.ts

@@ -19,6 +19,8 @@
 // entirely (the browser will attach the cookie automatically on refresh
 // requests). Until then, sessionStorage is the lowest-cost mitigation that
 // does not require backend changes.
+//
+// @see https://github.com/chyinan/AetherFlow/issues
 const REFRESH_STORAGE_KEY = 'af_auth_refresh'
 // Pre-fix keys kept only for one-time migration; new code never writes to
 // them.

frontend/src/i18n/locales/en-US.ts

@@ -206,6 +206,8 @@ export const enUS = {
     termsPrefix: 'By using AetherFlow, you agree to our',
     termsOfUse: 'Terms of Use',
     privacyPolicy: 'Privacy Policy',
+    termsModalPlaceholder: 'Terms of Service — Coming Soon',
+    privacyModalPlaceholder: 'Privacy Policy — Coming Soon',
     newToAetherFlow: 'New to AetherFlow?',
     createAccount: 'Create an account',
     signInWithPasskey: 'Sign in with a passkey',
@@ -1045,6 +1047,7 @@ export const enUS = {
       configured: 'configured',
       connected: 'connected',
       disabled: 'disabled',
+      'coming-soon': 'coming soon',
       installed: 'installed',
       invited: 'invited',
       missing: 'missing',
@@ -1203,6 +1206,7 @@ export const enUS = {
     developerGuardrailRealtime: 'SSE / WebSocket must pass through Nginx and Gateway, never direct container addresses.',
     developerGuardrailTimeout: 'Frontend request timeout is {timeout}ms; long tasks should recover through queues and realtime events.',
     configuredApiExtensions: 'Configured APIs',
+    comingSoon: 'Coming Soon',
     reserved: 'Reserved',
     configure: 'Configure',
     customizationTitle: 'Customization',

frontend/src/i18n/locales/ja-JP.ts

@@ -208,6 +208,8 @@ export const jaJP = {
     termsPrefix: '利用することで、以下に同意したものとみなされます：',
     termsOfUse: '利用規約',
     privacyPolicy: 'プライバシーポリシー',
+    termsModalPlaceholder: '利用規約 — 近日公開',
+    privacyModalPlaceholder: 'プライバシーポリシー — 近日公開',
     newToAetherFlow: 'AetherFlow を初めて使いますか？',
     createAccount: 'アカウントを作成',
     signInWithPasskey: 'パスキーでサインイン',
@@ -1047,6 +1049,7 @@ export const jaJP = {
       configured: '設定済み',
       connected: '接続済み',
       disabled: '無効',
+      'coming-soon': '近日公開',
       installed: 'インストール済み',
       invited: '招待済み',
       missing: '欠落',
@@ -1205,6 +1208,7 @@ export const jaJP = {
     developerGuardrailRealtime: 'SSE / WebSocket は Nginx と Gateway を経由し、コンテナの直接アドレスを使わないでください。',
     developerGuardrailTimeout: 'フロントエンドのタイムアウトは {timeout}ms です。長時間タスクはキューとリアルタイムイベントで回復させてください。',
     configuredApiExtensions: '設定済み API',
+    comingSoon: '近日公開',
     reserved: '予約済み',
     configure: '設定',
     customizationTitle: 'カスタマイズ',

frontend/src/i18n/locales/zh-CN.ts

@@ -206,6 +206,8 @@ export const zhCN = {
     termsPrefix: '使用即代表您同意我们的',
     termsOfUse: '使用协议',
     privacyPolicy: '隐私政策',
+    termsModalPlaceholder: '使用协议 — 即将上线',
+    privacyModalPlaceholder: '隐私政策 — 即将上线',
     newToAetherFlow: '第一次使用 AetherFlow？',
     createAccount: '创建账户',
     signInWithPasskey: '使用通行密钥登录',
@@ -1045,6 +1047,7 @@ export const zhCN = {
       configured: '已配置',
       connected: '已连接',
       disabled: '已停用',
+      'coming-soon': '即将上线',
       installed: '已安装',
       invited: '已邀请',
       missing: '缺失',
@@ -1203,6 +1206,7 @@ export const zhCN = {
     developerGuardrailRealtime: 'SSE / WebSocket 必须经过 Nginx 和 Gateway，避免浏览器访问内部容器地址。',
     developerGuardrailTimeout: '前端请求超时当前为 {timeout}ms，长任务应使用运行队列和实时事件恢复。',
     configuredApiExtensions: '已配置 API',
+    comingSoon: '即将上线',
     reserved: '预留',
     configure: '配置',
     customizationTitle: '定制',

frontend/src/pages/auth/LoginPage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Eye, EyeOff } from 'lucide-vue-next'
+import { Eye, EyeOff, X } from 'lucide-vue-next'
 import { computed, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
@@ -21,6 +21,7 @@ const form = reactive({
 const errorMessage = ref('')
 const showPassword = ref(false)
 const authMode = ref<'login' | 'register'>('login')
+const showLegalModal = ref<'none' | 'terms' | 'privacy'>('none')
 const canSubmitCredentials = computed(
   () =>
     form.username.trim().length > 0 &&
@@ -218,13 +219,49 @@ function toggleAuthMode() {
 
         <p class="mt-8 text-left text-sm font-medium leading-6 text-[#667085]">
           {{ t('auth.termsPrefix') }}
-          <a href="#" class="font-semibold text-[#111827] hover:text-[#2563eb]">{{ t('auth.termsOfUse') }}</a>
+          <button type="button" class="font-semibold text-[#111827] hover:text-[#2563eb]" @click="showLegalModal = 'terms'">{{ t('auth.termsOfUse') }}</button>
           <span class="px-1">&amp;</span>
-          <a href="#" class="font-semibold text-[#111827] hover:text-[#2563eb]">{{ t('auth.privacyPolicy') }}</a>
+          <button type="button" class="font-semibold text-[#111827] hover:text-[#2563eb]" @click="showLegalModal = 'privacy'">{{ t('auth.privacyPolicy') }}</button>
         </p>
       </div>
     </section>
 
+    <div
+      v-if="showLegalModal !== 'none'"
+      class="fixed inset-0 z-50 grid place-items-center bg-slate-950/55 p-4 backdrop-blur-sm"
+      @click.self="showLegalModal = 'none'"
+    >
+      <section class="w-full max-w-md overflow-hidden rounded-2xl border border-app-border bg-white shadow-panel">
+        <header class="flex items-start justify-between gap-4 border-b border-app-border px-5 py-4">
+          <p class="text-base font-semibold text-text-primary">
+            {{ showLegalModal === 'terms' ? t('auth.termsOfUse') : t('auth.privacyPolicy') }}
+          </p>
+          <button
+            type="button"
+            class="grid h-8 w-8 shrink-0 place-items-center rounded-md text-text-muted transition hover:bg-app-bg2 hover:text-text-primary"
+            :aria-label="t('settings.close')"
+            @click="showLegalModal = 'none'"
+          >
+            <X class="h-4 w-4" />
+          </button>
+        </header>
+        <div class="px-5 py-8 text-center">
+          <p class="text-sm leading-6 text-text-secondary">
+            {{ showLegalModal === 'terms' ? t('auth.termsModalPlaceholder') : t('auth.privacyModalPlaceholder') }}
+          </p>
+        </div>
+        <footer class="flex justify-end border-t border-app-border px-5 py-4">
+          <button
+            type="button"
+            class="rounded-md border border-app-border bg-white px-3 py-2 text-sm font-medium text-text-secondary transition hover:text-text-primary"
+            @click="showLegalModal = 'none'"
+          >
+            {{ t('settings.close') }}
+          </button>
+        </footer>
+      </section>
+    </div>
+
     <footer class="relative z-10 px-5 py-8 text-center text-base font-medium text-[#667085]">
       © 2026 AetherFlow. All rights reserved.
     </footer>

frontend/src/pages/settings/SettingsPage.vue

@@ -316,7 +316,7 @@ const dataAccessCards = computed(() => [
     titleKey: 'settings.dataAccessUrl',
     detailKey: 'settings.dataAccessUrlHint',
     endpoint: `${runtimeEnv.apiBase}/ingestion/url`,
-    status: 'disabled',
+    status: 'coming-soon',
     value: t('settings.reserved'),
     valueLabelKey: 'settings.dataAccessState',
     icon: ExternalLink,
@@ -325,7 +325,7 @@ const dataAccessCards = computed(() => [
     titleKey: 'settings.dataAccessVectorStore',
     detailKey: 'settings.dataAccessVectorStoreHint',
     endpoint: `${runtimeEnv.apiBase}/knowledge/vector-stores`,
-    status: 'disabled',
+    status: 'coming-soon',
     value: t('settings.reserved'),
     valueLabelKey: 'settings.dataAccessState',
     icon: Server,
@@ -618,6 +618,9 @@ function statusBadgeClass(status: string) {
   if (status === 'available' || status === 'invited' || status === 'rotating') {
     return 'border-status-warning/30 bg-status-warning/10 text-status-warning'
   }
+  if (status === 'coming-soon') {
+    return 'border-primary/30 bg-primary-soft text-primary'
+  }
   return 'border-status-paused/30 bg-status-paused/10 text-text-muted'
 }
 
@@ -1136,10 +1139,20 @@ watch(
             <article
               v-for="card in dataAccessCards"
               :key="card.titleKey"
-              class="rounded-xl border border-app-border bg-white p-4 shadow-sm transition hover:border-primary/40 hover:shadow-node"
+              class="relative rounded-xl border border-app-border bg-white p-4 shadow-sm transition hover:border-primary/40 hover:shadow-node"
+              :class="{ 'opacity-75': card.status === 'coming-soon' }"
             >
+              <span
+                v-if="card.status === 'coming-soon'"
+                class="absolute right-3 top-3 rounded-full border border-primary/25 bg-primary-soft px-2 py-0.5 text-[11px] font-medium text-primary"
+              >
+                {{ t('settings.comingSoon') }}
+              </span>
               <div class="flex items-start justify-between gap-3">
-                <span class="grid h-10 w-10 shrink-0 place-items-center rounded-lg bg-primary-soft text-primary">
+                <span
+                  class="grid h-10 w-10 shrink-0 place-items-center rounded-lg"
+                  :class="card.status === 'coming-soon' ? 'bg-primary-soft/60 text-primary/60' : 'bg-primary-soft text-primary'"
+                >
                   <component :is="card.icon" class="h-4 w-4" />
                 </span>
                 <span class="rounded-full border px-2 py-0.5 text-xs font-medium" :class="statusBadgeClass(card.status)">