Re-embed the knowledge base when the embedding model changes

Vectors from two different embedding models are not comparable — Titan v2 has
1024 dimensions where nomic-embed-text has 768 — and _cosine_similarity zips
them, so a mismatch produced quietly meaningless scores rather than an error.
Nothing forced a re-embed either: sync_local_kb only looked at the content
hash, so switching models left every cached vector in place.

local_knowledge_docs now records the model each vector came from, and a row is
re-embedded when its content hash OR its model differs. Saving a new
LOCAL_KB_EMBEDDING_MODEL from the settings panel starts a background pass over
every file; the knowledge base panel also has a button for it. While that pass
runs, the per-request sync steps aside so no file is embedded twice.

The panel now shows what the embedding model is doing: model name, vector
size, how many files are embedded with the current model, how many are still
on an older one, a progress bar while a pass runs, and the last error. A
"接続テスト" button embeds one short string so a broken or unreachable model
can be told apart from one that is merely slow to warm up.

Also read TAVILY_API_KEY from os.environ at call time. It was imported as a
config constant, which is evaluated before load_into_env() runs, so a key
saved from the settings panel was stored but never used — not even after a
restart.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

frontend/src/components/KnowledgeBasePanel.vue

@@ -1,11 +1,22 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { computed, onMounted, onUnmounted } from 'vue'
 import MarkdownContent from './MarkdownContent.vue'
 import { useKnowledgeBaseStore } from '../stores/knowledgeBase'
 
 const store = useKnowledgeBaseStore()
 
-onMounted(() => store.load())
+onMounted(() => {
+  store.load()
+  store.loadEmbedding()
+})
+// パネルを閉じている間もポーリングが回り続けないように止める
+onUnmounted(() => store.stopPolling())
+
+const progressPercent = computed(() => {
+  const e = store.embedding
+  if (!e || e.total === 0) return 0
+  return Math.round(((e.done + e.failed) / e.total) * 100)
+})
 
 function formatSize(bytes: number): string {
   return bytes < 1024 ? `${bytes} B` : `${Math.round(bytes / 1024)} KB`
@@ -41,6 +52,54 @@ function formatDate(iso: string): string {
 
     <!-- 一覧 -->
     <template v-else>
+      <div v-if="store.embedding" class="embedding">
+        <div class="embedding-head">
+          <span class="embedding-model" :title="`埋め込みモデル: ${store.embedding.model}`">
+            🧠 {{ store.embedding.model }}
+          </span>
+          <button class="mini-btn" :disabled="store.testing" title="このモデルに実際に1回リクエストして応答を確かめる"
+            @click="store.testEmbedding()">
+            {{ store.testing ? 'テスト中…' : '接続テスト' }}
+          </button>
+          <button class="mini-btn" :disabled="store.embedding.running" title="全ファイルを現在のモデルで埋め込み直す"
+            @click="store.reindex()">
+            埋め直し
+          </button>
+        </div>
+
+        <div class="embedding-stats">
+          <span :class="{ warn: store.embedding.indexed < store.embedding.file_count }">
+            埋め込み済み {{ store.embedding.indexed }} / {{ store.embedding.file_count }}
+          </span>
+          <span v-if="store.embedding.stale > 0" class="warn">
+            ・別モデルのまま {{ store.embedding.stale }}
+          </span>
+          <span v-if="store.embedding.dimensions">・{{ store.embedding.dimensions }} 次元</span>
+        </div>
+
+        <template v-if="store.embedding.running">
+          <div class="progress"><div class="progress-bar" :style="{ width: `${progressPercent}%` }" /></div>
+          <div class="embedding-note">
+            <template v-if="store.embedding.total === 0">準備中…</template>
+            <template v-else>
+              埋め込み中 {{ store.embedding.done + store.embedding.failed }} / {{ store.embedding.total }}
+              <span v-if="store.embedding.failed > 0" class="ng">（失敗 {{ store.embedding.failed }}）</span>
+            </template>
+          </div>
+        </template>
+
+        <div v-if="store.probe" class="probe" :class="store.probe.ok ? 'ok' : 'ng'">
+          <template v-if="store.probe.ok">
+            ✅ 応答あり — {{ store.probe.dimensions }} 次元 / {{ Math.round(store.probe.latency_ms) }} ms
+          </template>
+          <template v-else>❌ {{ store.probe.error }}</template>
+        </div>
+
+        <div v-if="store.embedding.last_error" class="probe ng">
+          直近の埋め込みエラー: {{ store.embedding.last_error }}
+        </div>
+      </div>
+
       <div class="search">
         <input v-model="store.filter" type="search" placeholder="タイトル・パス・本文の先頭で絞り込み">
         <span class="count">{{ store.filteredFiles.length }} / {{ store.files.length }}</span>
@@ -109,6 +168,30 @@ function formatDate(iso: string): string {
 .back-btn:hover, .reload-btn:hover:not(:disabled) { color: #fff; }
 .error { padding: 8px 12px; color: #f87171; font-size: 12px; }
 
+.embedding {
+  padding: 8px 12px; border-bottom: 1px solid #1e1e1e; flex-shrink: 0;
+  display: flex; flex-direction: column; gap: 6px;
+}
+.embedding-head { display: flex; align-items: center; gap: 6px; }
+.embedding-model {
+  flex: 1; color: #cbd5e1; font-size: 12px;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.mini-btn {
+  background: #2a2a2a; color: #aaa; border: 1px solid #444;
+  border-radius: 5px; padding: 2px 8px; font-size: 11px; cursor: pointer; white-space: nowrap;
+}
+.mini-btn:hover:not(:disabled) { color: #fff; }
+.mini-btn:disabled { opacity: 0.5; cursor: default; }
+.embedding-stats { color: #6b7280; font-size: 11px; }
+.embedding-stats .warn { color: #fbbf24; }
+.embedding-note { color: #6b7280; font-size: 11px; }
+.progress { height: 4px; background: #262626; border-radius: 2px; overflow: hidden; }
+.progress-bar { height: 100%; background: #2563eb; transition: width 0.3s; }
+.probe { font-size: 11px; line-height: 1.5; word-break: break-word; }
+.probe.ok { color: #4ade80; }
+.probe.ng, .ng { color: #f87171; }
+
 .search {
   display: flex; align-items: center; gap: 8px;
   padding: 8px 12px; border-bottom: 1px solid #1e1e1e; flex-shrink: 0;