Add GUI settings panel for API keys, model presets, and embedding model

- Add a password-protected /api/settings endpoint (HTTP Basic auth,
  backend/app/core/auth.py) backed by a DB-stored allowlist of
  connection settings (OPENAI_API_KEY, ANTHROPIC_API_KEY, AWS creds,
  OLLAMA_API_BASE, TAVILY_API_KEY, LOCAL_KB_EMBEDDING_MODEL). Saved
  values override .env and apply immediately via os.environ, so
  Lightsail deployments no longer need SSH + `.env` edits to rotate
  keys. Values are always returned masked to the frontend.
- Replace ModelSelector.vue's hardcoded model list with a DB-backed
  /api/models CRUD API (read is public, writes reuse the settings
  password) so the chat model dropdown can be edited from the GUI;
  seed it once with the previous hardcoded presets on first boot.
- Fix local_knowledge.py reading LOCAL_KB_EMBEDDING_MODEL once at
  import time instead of per-call, which would have silently ignored
  GUI/DB overrides for the embedding model.
- Add SettingsPanel.vue (API keys + model management UI) and document
  the new SETTINGS_PASSWORD env var in .env.example and the Lightsail
  deploy guide.

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

frontend/src/App.vue

@@ -5,12 +5,18 @@ import ChatWindow from './components/ChatWindow.vue'
 import MessageInput from './components/MessageInput.vue'
 import ModelSelector from './components/ModelSelector.vue'
 import LogViewer from './components/LogViewer.vue'
+import SettingsPanel from './components/SettingsPanel.vue'
 import ToastList from './components/ToastList.vue'
 import MemoryMonitor from './components/MemoryMonitor.vue'
 import Clock from './components/Clock.vue'
 import WordPool from './components/WordPool.vue'
 
-const showLogs = ref(false)
+type SidePanel = 'none' | 'logs' | 'settings'
+const activePanel = ref<SidePanel>('none')
+
+function togglePanel(panel: SidePanel) {
+  activePanel.value = activePanel.value === panel ? 'none' : panel
+}
 </script>
 
 <template>
@@ -25,7 +31,10 @@ const showLogs = ref(false)
         <span class="title">PlayChat</span>
         <ModelSelector />
         <Clock />
-        <button class="log-toggle" :class="{ active: showLogs }" @click="showLogs = !showLogs">
+        <button class="log-toggle" :class="{ active: activePanel === 'settings' }" @click="togglePanel('settings')">
+          設定
+        </button>
+        <button class="log-toggle" :class="{ active: activePanel === 'logs' }" @click="togglePanel('logs')">
           ログ
         </button>
       </header>
@@ -34,9 +43,12 @@ const showLogs = ref(false)
           <ChatWindow />
           <MessageInput />
         </div>
-        <div v-if="showLogs" class="log-pane">
+        <div v-if="activePanel === 'logs'" class="log-pane">
           <LogViewer />
         </div>
+        <div v-else-if="activePanel === 'settings'" class="log-pane">
+          <SettingsPanel />
+        </div>
       </div>
     </div>
   </div>

frontend/src/api/client.ts

@@ -81,6 +81,72 @@ export async function deleteLog(logId: number): Promise<void> {
   await fetch(`${BASE}/logs/${logId}`, { method: 'DELETE' })
 }
 
+export interface SettingEntry {
+  key: string
+  is_set: boolean
+  masked: string | null
+  overridden: boolean
+}
+
+function authHeader(password: string): HeadersInit {
+  return { Authorization: `Basic ${btoa(`x:${password}`)}` }
+}
+
+export async function fetchSettings(password: string): Promise<SettingEntry[]> {
+  const res = await fetch(`${BASE}/api/settings`, { headers: authHeader(password) })
+  return parseJson<SettingEntry[]>(res, '設定取得')
+}
+
+export async function saveSettings(values: Record<string, string>, password: string): Promise<SettingEntry[]> {
+  const res = await fetch(`${BASE}/api/settings`, {
+    method: 'PUT',
+    headers: { ...authHeader(password), 'Content-Type': 'application/json' },
+    body: JSON.stringify({ values }),
+  })
+  return parseJson<SettingEntry[]>(res, '設定保存')
+}
+
+export async function clearSetting(key: string, password: string): Promise<SettingEntry[]> {
+  const res = await fetch(`${BASE}/api/settings/${key}`, {
+    method: 'DELETE',
+    headers: authHeader(password),
+  })
+  return parseJson<SettingEntry[]>(res, '設定クリア')
+}
+
+export interface ModelPreset {
+  id: number
+  label: string
+  value: string
+}
+
+export async function fetchModelPresets(): Promise<ModelPreset[]> {
+  const res = await fetch(`${BASE}/api/models`)
+  return parseJson<ModelPreset[]>(res, 'モデル一覧取得')
+}
+
+export async function createModelPreset(label: string, value: string, password: string): Promise<ModelPreset> {
+  const res = await fetch(`${BASE}/api/models`, {
+    method: 'POST',
+    headers: { ...authHeader(password), 'Content-Type': 'application/json' },
+    body: JSON.stringify({ label, value }),
+  })
+  return parseJson<ModelPreset>(res, 'モデル追加')
+}
+
+export async function updateModelPreset(id: number, label: string, value: string, password: string): Promise<ModelPreset> {
+  const res = await fetch(`${BASE}/api/models/${id}`, {
+    method: 'PUT',
+    headers: { ...authHeader(password), 'Content-Type': 'application/json' },
+    body: JSON.stringify({ label, value }),
+  })
+  return parseJson<ModelPreset>(res, 'モデル更新')
+}
+
+export async function deleteModelPreset(id: number, password: string): Promise<void> {
+  await fetch(`${BASE}/api/models/${id}`, { method: 'DELETE', headers: authHeader(password) })
+}
+
 export function streamChat(
   message: string,
   sessionId: string | null,

frontend/src/components/ModelSelector.vue

@@ -1,28 +1,29 @@
 <script setup lang="ts">
+import { computed, onMounted } from 'vue'
 import { useChatStore } from '../stores/chat'
+import { useSettingsStore } from '../stores/settings'
 
 const store = useChatStore()
+const settingsStore = useSettingsStore()
 
-const presets = [
-  { label: 'GPT-5.5', value: 'gpt-5.5' },
-  { label: 'GPT-5.4', value: 'gpt-5.4' },
-  { label: 'GPT-5.4 mini', value: 'gpt-5.4-mini' },
-  { label: 'Claude Sonnet 4.6', value: 'claude-sonnet-4-6' },
-  { label: 'Claude Haiku 4.5', value: 'claude-haiku-4-5-20251001' },
-  { label: 'Ollama llama3', value: 'ollama/llama3' },
-  { label: 'Ollama Gemma4', value: 'ollama/gemma4' },
-  { label: 'Gemma 4 12B (llama-server)', value: 'gpt-3.5-turbo' },
-  { label: 'Claude Sonnet 4.6 (Bedrock)', value: 'bedrock/jp.anthropic.claude-sonnet-4-6' },
-  { label: 'Llama 3 70B (Bedrock)', value: 'bedrock/meta.llama3-70b-instruct-v1:0' },
-  { label: 'Nova 2 Lite (Bedrock)', value: 'bedrock/jp.amazon.nova-2-lite-v1:0' },
-]
+// 選択中のモデルがプリセット一覧に無い場合（削除された/カスタム値）も表示が壊れないよう、
+// その場で追加のoptionとして補う。
+const options = computed(() => {
+  const presets = settingsStore.modelPresets
+  if (presets.some((p) => p.value === store.selectedModel)) return presets
+  return [...presets, { id: -1, label: store.selectedModel, value: store.selectedModel }]
+})
+
+onMounted(() => {
+  settingsStore.loadModelPresets()
+})
 </script>
 
 <template>
   <div class="model-selector">
     <label>モデル</label>
     <select v-model="store.selectedModel">
-      <option v-for="p in presets" :key="p.value" :value="p.value">{{ p.label }}</option>
+      <option v-for="p in options" :key="p.value" :value="p.value">{{ p.label }}</option>
     </select>
   </div>
 </template>

frontend/src/components/SettingsPanel.vue

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted, watch } from 'vue'
+import { useSettingsStore } from '../stores/settings'
+
+const store = useSettingsStore()
+
+const passwordInput = ref('')
+const drafts = reactive<Record<string, string>>({})
+
+const presetDrafts = reactive<Record<number, { label: string; value: string }>>({})
+const newLabel = ref('')
+const newValue = ref('')
+
+watch(
+  () => store.modelPresets,
+  (presets) => {
+    for (const key of Object.keys(presetDrafts)) delete presetDrafts[Number(key)]
+    for (const p of presets) presetDrafts[p.id] = { label: p.label, value: p.value }
+  },
+  { immediate: true },
+)
+
+async function saveModelPreset(id: number) {
+  const draft = presetDrafts[id]
+  if (!draft || !draft.label || !draft.value) return
+  await store.editModelPreset(id, draft.label, draft.value)
+}
+
+async function addModelPreset() {
+  if (!newLabel.value || !newValue.value) return
+  const ok = await store.addModelPreset(newLabel.value, newValue.value)
+  if (ok) {
+    newLabel.value = ''
+    newValue.value = ''
+  }
+}
+
+const KEY_LABELS: Record<string, string> = {
+  OPENAI_API_KEY: 'OpenAI APIキー',
+  ANTHROPIC_API_KEY: 'Anthropic APIキー',
+  AWS_ACCESS_KEY_ID: 'AWS Access Key ID',
+  AWS_SECRET_ACCESS_KEY: 'AWS Secret Access Key',
+  AWS_SESSION_TOKEN: 'AWS Session Token',
+  AWS_BEARER_TOKEN_BEDROCK: 'AWS Bedrock Bearer Token',
+  AWS_REGION_NAME: 'AWS Region',
+  OLLAMA_API_BASE: 'Ollama API Base URL',
+  TAVILY_API_KEY: 'Tavily APIキー',
+  LOCAL_KB_EMBEDDING_MODEL: '埋め込みモデル（ローカルナレッジベース検索用）',
+}
+
+// 秘匿情報ではないため、マスクせず通常のテキスト入力として表示するキー
+const PLAIN_TEXT_KEYS = new Set(['LOCAL_KB_EMBEDDING_MODEL', 'OLLAMA_API_BASE', 'AWS_REGION_NAME'])
+
+async function submitPassword() {
+  const ok = await store.unlock(passwordInput.value)
+  if (ok) passwordInput.value = ''
+}
+
+async function saveAll() {
+  const values: Record<string, string> = {}
+  for (const [key, value] of Object.entries(drafts)) {
+    if (value) values[key] = value
+  }
+  if (Object.keys(values).length === 0) return
+  const ok = await store.save(values)
+  if (ok) {
+    for (const key of Object.keys(drafts)) drafts[key] = ''
+  }
+}
+
+async function clearOne(key: string) {
+  await store.clear(key)
+}
+
+onMounted(() => {
+  store.tryAutoUnlock()
+  store.loadModelPresets()
+})
+</script>
+
+<template>
+  <div class="settings-panel">
+    <div class="toolbar">
+      <span class="title">API接続設定</span>
+      <button v-if="store.unlocked" class="lock-btn" @click="store.lock()">ロック</button>
+    </div>
+
+    <form v-if="!store.unlocked" class="login" @submit.prevent="submitPassword">
+      <p class="hint">APIキーを表示・変更するにはパスワードが必要です。</p>
+      <input
+        v-model="passwordInput"
+        type="password"
+        placeholder="パスワード"
+        autocomplete="current-password"
+      />
+      <button type="submit" :disabled="store.loading || !passwordInput">
+        {{ store.loading ? '確認中...' : 'ロック解除' }}
+      </button>
+      <p v-if="store.error" class="error">{{ store.error }}</p>
+    </form>
+
+    <div v-else class="entries">
+      <p v-if="store.error" class="error">{{ store.error }}</p>
+      <div v-for="entry in store.entries" :key="entry.key" class="entry">
+        <label>{{ KEY_LABELS[entry.key] ?? entry.key }}</label>
+        <div class="row">
+          <input
+            v-model="drafts[entry.key]"
+            :type="PLAIN_TEXT_KEYS.has(entry.key) ? 'text' : 'password'"
+            :placeholder="entry.is_set ? `設定済み ${entry.masked}` : '未設定'"
+            autocomplete="off"
+          />
+          <button
+            v-if="entry.overridden"
+            class="clear-btn"
+            title="GUIで設定した値をクリアして.envの値に戻す"
+            @click="clearOne(entry.key)"
+          >
+            クリア
+          </button>
+        </div>
+      </div>
+      <button class="save-btn" :disabled="store.loading" @click="saveAll">
+        {{ store.loading ? '保存中...' : '保存' }}
+      </button>
+
+      <hr />
+
+      <h3 class="section-title">モデル管理</h3>
+      <div v-for="p in store.modelPresets" :key="p.id" class="preset-row">
+        <input v-model="presetDrafts[p.id].label" placeholder="表示名" />
+        <input v-model="presetDrafts[p.id].value" placeholder="モデル文字列" />
+        <button class="mini-btn" @click="saveModelPreset(p.id)">保存</button>
+        <button class="mini-btn danger" @click="store.removeModelPreset(p.id)">削除</button>
+      </div>
+
+      <div class="preset-row new-preset">
+        <input v-model="newLabel" placeholder="表示名（例: GPT-5.5）" />
+        <input v-model="newValue" placeholder="モデル文字列（例: gpt-5.5）" />
+        <button class="mini-btn" @click="addModelPreset">追加</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.settings-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-y: auto;
+  background: #111;
+}
+.toolbar {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 10px 12px; border-bottom: 1px solid #2a2a2a; flex-shrink: 0;
+}
+.title { font-size: 13px; font-weight: 600; color: #aaa; }
+.lock-btn {
+  background: none; border: 1px solid #444; color: #aaa;
+  border-radius: 5px; padding: 2px 10px; font-size: 12px; cursor: pointer;
+}
+.login { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
+.hint { font-size: 12px; color: #888; }
+.error { font-size: 12px; color: #f87171; }
+input {
+  background: #2a2a2a; color: #eee; border: 1px solid #444;
+  border-radius: 6px; padding: 6px 10px; font-size: 13px; width: 100%;
+}
+button {
+  background: #1d3557; color: #93c5fd; border: 1px solid #2563eb;
+  border-radius: 6px; padding: 6px 10px; font-size: 13px; cursor: pointer;
+}
+button:disabled { opacity: 0.5; cursor: default; }
+.entries { padding: 12px; display: flex; flex-direction: column; gap: 14px; }
+.entry { display: flex; flex-direction: column; gap: 4px; }
+.entry label { font-size: 12px; color: #888; }
+.row { display: flex; gap: 6px; }
+.row input { flex: 1; }
+.clear-btn {
+  background: none; border: 1px solid #444; color: #aaa;
+  font-size: 12px; padding: 4px 8px; white-space: nowrap;
+}
+.save-btn { align-self: flex-start; padding: 6px 18px; }
+hr { border: none; border-top: 1px solid #2a2a2a; margin: 4px 0; }
+.section-title { font-size: 12px; color: #888; text-transform: uppercase; }
+.preset-row { display: flex; gap: 6px; align-items: center; }
+.preset-row input { flex: 1; min-width: 0; }
+.mini-btn {
+  background: none; border: 1px solid #444; color: #aaa;
+  font-size: 12px; padding: 6px 10px; white-space: nowrap;
+}
+.mini-btn.danger { border-color: #7f1d1d; color: #f87171; }
+.new-preset { padding-top: 4px; }
+</style>

frontend/src/stores/settings.ts

@@ -0,0 +1,138 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import {
+  fetchSettings,
+  saveSettings,
+  clearSetting,
+  fetchModelPresets,
+  createModelPreset,
+  updateModelPreset,
+  deleteModelPreset,
+  type SettingEntry,
+  type ModelPreset,
+} from '../api/client'
+
+const STORAGE_KEY = 'playchat_settings_password'
+
+export const useSettingsStore = defineStore('settings', () => {
+  const password = ref(sessionStorage.getItem(STORAGE_KEY) ?? '')
+  const unlocked = ref(false)
+  const entries = ref<SettingEntry[]>([])
+  const modelPresets = ref<ModelPreset[]>([])
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+
+  async function unlock(candidatePassword: string): Promise<boolean> {
+    loading.value = true
+    error.value = null
+    try {
+      entries.value = await fetchSettings(candidatePassword)
+      password.value = candidatePassword
+      sessionStorage.setItem(STORAGE_KEY, candidatePassword)
+      unlocked.value = true
+      return true
+    } catch (e) {
+      unlocked.value = false
+      error.value = e instanceof Error ? e.message : 'エラーが発生しました'
+      return false
+    } finally {
+      loading.value = false
+    }
+  }
+
+  /** ページ再読み込み時などに、保存済みパスワードで自動的に再認証を試みる。 */
+  async function tryAutoUnlock(): Promise<void> {
+    if (!password.value || unlocked.value) return
+    await unlock(password.value)
+  }
+
+  async function save(values: Record<string, string>): Promise<boolean> {
+    loading.value = true
+    error.value = null
+    try {
+      entries.value = await saveSettings(values, password.value)
+      return true
+    } catch (e) {
+      error.value = e instanceof Error ? e.message : 'エラーが発生しました'
+      return false
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function clear(key: string): Promise<void> {
+    error.value = null
+    try {
+      entries.value = await clearSetting(key, password.value)
+    } catch (e) {
+      error.value = e instanceof Error ? e.message : 'エラーが発生しました'
+    }
+  }
+
+  function lock() {
+    unlocked.value = false
+    password.value = ''
+    sessionStorage.removeItem(STORAGE_KEY)
+  }
+
+  /** モデル一覧は認証不要で誰でも取得できる（ModelSelectorから直接呼ばれる想定）。 */
+  async function loadModelPresets(): Promise<void> {
+    try {
+      modelPresets.value = await fetchModelPresets()
+    } catch (e) {
+      error.value = e instanceof Error ? e.message : 'エラーが発生しました'
+    }
+  }
+
+  async function addModelPreset(label: string, value: string): Promise<boolean> {
+    error.value = null
+    try {
+      const created = await createModelPreset(label, value, password.value)
+      modelPresets.value = [...modelPresets.value, created]
+      return true
+    } catch (e) {
+      error.value = e instanceof Error ? e.message : 'エラーが発生しました'
+      return false
+    }
+  }
+
+  async function editModelPreset(id: number, label: string, value: string): Promise<boolean> {
+    error.value = null
+    try {
+      const updated = await updateModelPreset(id, label, value, password.value)
+      modelPresets.value = modelPresets.value.map((p) => (p.id === id ? updated : p))
+      return true
+    } catch (e) {
+      error.value = e instanceof Error ? e.message : 'エラーが発生しました'
+      return false
+    }
+  }
+
+  async function removeModelPreset(id: number): Promise<void> {
+    error.value = null
+    try {
+      await deleteModelPreset(id, password.value)
+      modelPresets.value = modelPresets.value.filter((p) => p.id !== id)
+    } catch (e) {
+      error.value = e instanceof Error ? e.message : 'エラーが発生しました'
+    }
+  }
+
+  return {
+    password,
+    unlocked,
+    entries,
+    modelPresets,
+    loading,
+    error,
+    unlock,
+    tryAutoUnlock,
+    save,
+    clear,
+    lock,
+    loadModelPresets,
+    addModelPreset,
+    editModelPreset,
+    removeModelPreset,
+  }
+})