Browse the knowledge base from a single side panel menu

Add a read-only view of backend/knowledge_base/**.md so the files that get
injected into the system prompt can be inspected from the GUI:

- GET /api/kb/files lists the Markdown files (title, preview, size, mtime and
  whether the file is already embedded), GET /api/kb/file returns one in full.
  Paths are resolved against the knowledge base directory and rejected unless
  they stay inside it and end in .md.
- KnowledgeBasePanel.vue groups the files by folder (collapsible, so web_search
  can be folded away), filters by title/path/preview and renders the selected
  file with MarkdownContent.

The header had grown to four side panel toggles, so collapse them into one
menu: panels.ts now holds the list of panels along with the component each one
renders, App.vue picks it with <component :is>, and SidePanelMenu.vue shows the
active panel on its button. Re-picking the open panel (or "パネルを閉じる")
closes it; a click outside or Esc closes just the menu.

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

frontend/src/App.vue

@@ -1,27 +1,23 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import SessionList from './components/SessionList.vue'
 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 NotePanel from './components/NotePanel.vue'
+import SidePanelMenu from './components/SidePanelMenu.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'
 import LoginGate from './components/LoginGate.vue'
+import { SIDE_PANELS, type PanelId } from './panels'
 import { useAuthStore } from './stores/auth'
 
 const authStore = useAuthStore()
 
-type SidePanel = 'none' | 'logs' | 'settings' | 'notes'
-const activePanel = ref<SidePanel>('none')
-
-function togglePanel(panel: SidePanel) {
-  activePanel.value = activePanel.value === panel ? 'none' : panel
-}
+/** 右サイドに開いているパネル。null はどれも開いていない状態。 */
+const activePanel = ref<PanelId | null>(null)
+const activePanelDef = computed(() => SIDE_PANELS.find((p) => p.id === activePanel.value) ?? null)
 
 function handleUnauthorized() {
   authStore.markUnauthenticated()
@@ -51,32 +47,20 @@ onUnmounted(() => {
           <span class="title">PlayChat</span>
           <ModelSelector />
           <Clock />
-          <button class="log-toggle" :class="{ active: activePanel === 'notes' }" @click="togglePanel('notes')">
-            ノート
-          </button>
-          <button class="log-toggle" :class="{ active: activePanel === 'settings' }" @click="togglePanel('settings')">
-            設定
-          </button>
-          <button class="log-toggle" :class="{ active: activePanel === 'logs' }" @click="togglePanel('logs')">
-            ログ
-          </button>
-          <button v-if="authStore.required" class="log-toggle" @click="authStore.logout()">
-            ログアウト
-          </button>
+          <div class="header-actions">
+            <SidePanelMenu :active="activePanel" @select="activePanel = $event" />
+            <button v-if="authStore.required" class="log-toggle" @click="authStore.logout()">
+              ログアウト
+            </button>
+          </div>
         </header>
         <div class="body">
           <div class="chat-pane">
             <ChatWindow />
             <MessageInput />
           </div>
-          <div v-if="activePanel === 'logs'" class="log-pane">
-            <LogViewer />
-          </div>
-          <div v-else-if="activePanel === 'settings'" class="log-pane">
-            <SettingsPanel />
-          </div>
-          <div v-else-if="activePanel === 'notes'" class="log-pane">
-            <NotePanel />
+          <div v-if="activePanelDef" class="log-pane">
+            <component :is="activePanelDef.component" />
           </div>
         </div>
       </div>
@@ -101,11 +85,11 @@ header {
   border-bottom: 1px solid #333; background: #1a1a1a; flex-shrink: 0;
 }
 .title { font-size: 16px; font-weight: 600; color: #fff; }
+.header-actions { display: flex; align-items: center; gap: 8px; }
 .log-toggle {
   background: #2a2a2a; color: #aaa; border: 1px solid #444;
   border-radius: 6px; padding: 4px 14px; font-size: 13px; cursor: pointer;
 }
-.log-toggle.active { background: #1d3557; color: #93c5fd; border-color: #2563eb; }
 .body { flex: 1; display: flex; overflow: hidden; }
 .chat-pane { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
 .log-pane { width: 400px; min-width: 300px; border-left: 1px solid #2a2a2a; overflow: hidden; }

frontend/src/api/client.ts

@@ -395,3 +395,36 @@ export async function reorderNotePages(
   })
   return parseJson<{ reordered: number }>(res, 'ノート並べ替え')
 }
+
+/** ローカルナレッジベース（backend/knowledge_base/**.md）の1ファイル分のメタ情報。 */
+export interface KbFileInfo {
+  path: string
+  name: string
+  /** ナレッジベース直下は空文字。UI ではこの単位でグループ表示する。 */
+  directory: string
+  title: string
+  preview: string
+  size: number
+  updated_at: string
+  /** 埋め込み済み（＝話題に応じた自動注入の対象）か。 */
+  indexed: boolean
+}
+
+export interface KbFileContent {
+  path: string
+  name: string
+  title: string
+  content: string
+  size: number
+  updated_at: string
+}
+
+export async function fetchKbFiles(): Promise<KbFileInfo[]> {
+  const res = await fetch(`${BASE}/api/kb/files`)
+  return parseJson<KbFileInfo[]>(res, 'ナレッジベース取得')
+}
+
+export async function fetchKbFile(path: string): Promise<KbFileContent> {
+  const res = await fetch(`${BASE}/api/kb/file?path=${encodeURIComponent(path)}`)
+  return parseJson<KbFileContent>(res, 'ナレッジベースファイル取得')
+}

frontend/src/components/KnowledgeBasePanel.vue

@@ -0,0 +1,173 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import MarkdownContent from './MarkdownContent.vue'
+import { useKnowledgeBaseStore } from '../stores/knowledgeBase'
+
+const store = useKnowledgeBaseStore()
+
+onMounted(() => store.load())
+
+function formatSize(bytes: number): string {
+  return bytes < 1024 ? `${bytes} B` : `${Math.round(bytes / 1024)} KB`
+}
+
+function formatDate(iso: string): string {
+  return new Date(iso).toLocaleString('ja-JP', {
+    year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit',
+  })
+}
+</script>
+
+<template>
+  <div class="kb-panel">
+    <div class="toolbar">
+      <button v-if="store.openFile" class="back-btn" title="一覧に戻る" @click="store.close()">←</button>
+      <span class="title">{{ store.openFile ? store.openFile.title : 'ナレッジベース' }}</span>
+      <button class="reload-btn" :disabled="store.loading" title="再読み込み" @click="store.load()">⟳</button>
+    </div>
+
+    <div v-if="store.error" class="error">⚠ {{ store.error }}</div>
+
+    <!-- ファイル表示 -->
+    <template v-if="store.openFile">
+      <div class="file-meta">
+        <code class="path">{{ store.openFile.path }}</code>
+        <span>{{ formatSize(store.openFile.size) }} / {{ formatDate(store.openFile.updated_at) }}</span>
+      </div>
+      <div class="content">
+        <MarkdownContent :content="store.openFile.content" />
+      </div>
+    </template>
+
+    <!-- 一覧 -->
+    <template v-else>
+      <div class="search">
+        <input v-model="store.filter" type="search" placeholder="タイトル・パス・本文の先頭で絞り込み">
+        <span class="count">{{ store.filteredFiles.length }} / {{ store.files.length }}</span>
+      </div>
+
+      <div v-if="store.files.length === 0 && !store.loading" class="empty">
+        ナレッジベースに .md ファイルがありません。<br>
+        <code>backend/knowledge_base/</code> に置くと自動で読み込まれます。
+      </div>
+
+      <div v-else class="list">
+        <div v-for="group in store.groups" :key="group.directory" class="group">
+          <button class="group-header" @click="store.toggleGroup(group.directory)">
+            <span class="arrow">{{ store.collapsed.has(group.directory) ? '▸' : '▾' }}</span>
+            <span class="dir">{{ group.directory || '(ルート)' }}</span>
+            <span class="group-count">{{ group.files.length }}</span>
+          </button>
+          <template v-if="!store.collapsed.has(group.directory)">
+            <button
+              v-for="file in group.files"
+              :key="file.path"
+              class="file"
+              @click="store.open(file.path)"
+            >
+              <div class="file-title">
+                <span class="dot" :class="{ indexed: file.indexed }"
+                  :title="file.indexed ? '埋め込み済み（話題に応じて自動で参照される）' : '未埋め込み（次回のチャット時に取り込まれる）'" />
+                <span class="name">{{ file.title }}</span>
+                <span class="size">{{ formatSize(file.size) }}</span>
+              </div>
+              <div v-if="file.preview" class="file-preview">{{ file.preview }}</div>
+            </button>
+          </template>
+        </div>
+      </div>
+
+      <div class="hint">
+        <code>backend/knowledge_base/</code> 配下の Markdown です。話題との類似度が高い上位数件が、
+        システムプロンプトに<strong>全文</strong>そのまま注入されます。
+        <code>web_search/</code> は AI の Web 検索結果が自動保存されたものです。
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.kb-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  background: #111;
+}
+.toolbar {
+  display: flex; align-items: center; gap: 8px;
+  padding: 10px 12px; border-bottom: 1px solid #2a2a2a; flex-shrink: 0;
+}
+.title {
+  font-size: 13px; font-weight: 600; color: #aaa; flex: 1;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.back-btn, .reload-btn {
+  background: none; border: 1px solid #444; color: #aaa;
+  border-radius: 5px; padding: 2px 8px; cursor: pointer; font-size: 13px;
+}
+.back-btn:hover, .reload-btn:hover:not(:disabled) { color: #fff; }
+.error { padding: 8px 12px; color: #f87171; font-size: 12px; }
+
+.search {
+  display: flex; align-items: center; gap: 8px;
+  padding: 8px 12px; border-bottom: 1px solid #1e1e1e; flex-shrink: 0;
+}
+.search input {
+  flex: 1; background: #1a1a1a; color: #ddd; border: 1px solid #333;
+  border-radius: 5px; padding: 4px 8px; font-size: 12px;
+}
+.search input:focus { outline: none; border-color: #2563eb; }
+.count { font-size: 11px; color: #555; white-space: nowrap; }
+
+.list { flex: 1; overflow-y: auto; padding-bottom: 4px; }
+.group-header {
+  display: flex; align-items: center; gap: 6px; width: 100%;
+  background: #171717; border: none; border-bottom: 1px solid #1e1e1e;
+  color: #888; font-size: 11px; padding: 5px 12px; cursor: pointer;
+  position: sticky; top: 0;
+}
+.group-header:hover { color: #ccc; }
+.arrow { font-size: 9px; }
+.dir { flex: 1; text-align: left; font-family: 'Consolas', monospace; }
+.group-count { color: #555; }
+
+.file {
+  display: block; width: 100%; text-align: left;
+  background: none; border: none; border-bottom: 1px solid #1a1a1a;
+  padding: 8px 12px; cursor: pointer;
+}
+.file:hover { background: #1a1a1a; }
+.file-title { display: flex; align-items: center; gap: 7px; }
+.dot {
+  width: 6px; height: 6px; border-radius: 50%; background: #444; flex-shrink: 0;
+}
+.dot.indexed { background: #22c55e; }
+.name {
+  flex: 1; color: #ddd; font-size: 12px;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.size { color: #555; font-size: 11px; white-space: nowrap; }
+.file-preview {
+  margin-top: 3px; padding-left: 13px; color: #666; font-size: 11px;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+
+.file-meta {
+  display: flex; align-items: center; gap: 10px; justify-content: space-between;
+  padding: 6px 12px; border-bottom: 1px solid #1e1e1e;
+  color: #666; font-size: 11px; flex-shrink: 0;
+}
+.path {
+  color: #7dd3fc; font-family: 'Consolas', monospace;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.content { flex: 1; overflow-y: auto; padding: 12px 14px; color: #ddd; font-size: 13px; }
+
+.empty { padding: 20px; text-align: center; color: #555; font-size: 12px; line-height: 1.8; }
+.hint {
+  padding: 8px 12px; border-top: 1px solid #1e1e1e;
+  color: #666; font-size: 11px; line-height: 1.6; flex-shrink: 0;
+}
+.hint code { color: #9ca3af; font-family: 'Consolas', monospace; }
+</style>

frontend/src/components/SidePanelMenu.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { SIDE_PANELS, type PanelId } from '../panels'
+
+const props = defineProps<{ active: PanelId | null }>()
+const emit = defineEmits<{ (e: 'select', panel: PanelId | null): void }>()
+
+const open = ref(false)
+const root = ref<HTMLElement | null>(null)
+
+const activePanel = computed(() => SIDE_PANELS.find((p) => p.id === props.active) ?? null)
+
+/** 項目を選ぶ。開いているパネルをもう一度選んだら閉じる（従来のトグルと同じ操作感）。 */
+function select(id: PanelId) {
+  emit('select', props.active === id ? null : id)
+  open.value = false
+}
+
+function close() {
+  emit('select', null)
+  open.value = false
+}
+
+function onDocumentPointerDown(e: PointerEvent) {
+  if (open.value && !root.value?.contains(e.target as Node)) open.value = false
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape') open.value = false
+}
+
+onMounted(() => {
+  document.addEventListener('pointerdown', onDocumentPointerDown)
+  document.addEventListener('keydown', onKeydown)
+})
+onUnmounted(() => {
+  document.removeEventListener('pointerdown', onDocumentPointerDown)
+  document.removeEventListener('keydown', onKeydown)
+})
+</script>
+
+<template>
+  <div ref="root" class="panel-menu">
+    <button
+      class="menu-btn"
+      :class="{ active: activePanel !== null, open }"
+      :title="activePanel ? `${activePanel.label}を表示中` : 'パネルを開く'"
+      @click="open = !open"
+    >
+      <span class="menu-icon">{{ activePanel ? activePanel.icon : '☰' }}</span>
+      <span class="menu-label">{{ activePanel ? activePanel.label : 'パネル' }}</span>
+      <span class="caret">▾</span>
+    </button>
+
+    <div v-if="open" class="dropdown">
+      <button
+        v-for="panel in SIDE_PANELS"
+        :key="panel.id"
+        class="item"
+        :class="{ current: panel.id === active }"
+        @click="select(panel.id)"
+      >
+        <span class="item-icon">{{ panel.icon }}</span>
+        <span class="item-text">
+          <span class="item-label">{{ panel.label }}</span>
+          <span class="item-desc">{{ panel.description }}</span>
+        </span>
+        <span class="check">{{ panel.id === active ? '✓' : '' }}</span>
+      </button>
+      <button v-if="activePanel" class="item close-item" @click="close">
+        <span class="item-icon">✕</span>
+        <span class="item-text"><span class="item-label">パネルを閉じる</span></span>
+        <span class="check" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.panel-menu { position: relative; }
+.menu-btn {
+  display: flex; align-items: center; gap: 6px;
+  background: #2a2a2a; color: #aaa; border: 1px solid #444;
+  border-radius: 6px; padding: 4px 12px; font-size: 13px; cursor: pointer;
+}
+.menu-btn:hover { color: #ddd; }
+.menu-btn.active { background: #1d3557; color: #93c5fd; border-color: #2563eb; }
+.menu-btn.open { border-color: #666; }
+.menu-btn.active.open { border-color: #3b82f6; }
+.menu-icon { font-size: 13px; line-height: 1; }
+.menu-label { white-space: nowrap; }
+.caret { font-size: 9px; color: #777; }
+
+.dropdown {
+  position: absolute; top: calc(100% + 6px); right: 0; z-index: 50;
+  min-width: 260px;
+  background: #1c1c1c; border: 1px solid #3a3a3a; border-radius: 8px;
+  padding: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+}
+.item {
+  display: flex; align-items: center; gap: 10px; width: 100%;
+  background: none; border: none; border-radius: 6px;
+  padding: 7px 9px; cursor: pointer; text-align: left;
+}
+.item:hover { background: #262626; }
+.item.current { background: #1d3557; }
+.item-icon { font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; }
+.item-text { flex: 1; display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
+.item-label { color: #ddd; font-size: 13px; }
+.item.current .item-label { color: #93c5fd; }
+.item-desc {
+  color: #6b7280; font-size: 11px;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.check { color: #93c5fd; font-size: 11px; width: 10px; flex-shrink: 0; }
+.close-item { border-top: 1px solid #2a2a2a; border-radius: 0 0 6px 6px; margin-top: 2px; }
+.close-item .item-label { color: #888; }
+</style>

frontend/src/panels.ts

@@ -0,0 +1,28 @@
+import type { Component } from 'vue'
+import KnowledgeBasePanel from './components/KnowledgeBasePanel.vue'
+import LogViewer from './components/LogViewer.vue'
+import NotePanel from './components/NotePanel.vue'
+import SettingsPanel from './components/SettingsPanel.vue'
+
+/** 右サイドに開けるパネル。'none' はどれも開いていない状態。 */
+export type PanelId = 'notes' | 'kb' | 'settings' | 'logs'
+
+export interface SidePanelDef {
+  id: PanelId
+  label: string
+  icon: string
+  /** メニューに添える一行説明 */
+  description: string
+  component: Component
+}
+
+/**
+ * 右サイドパネルの一覧。ヘッダーのメニューの並びと、開いたときに描画されるコンポーネントを兼ねる。
+ * パネルを増やすときはここに1行足すだけでよい。
+ */
+export const SIDE_PANELS: SidePanelDef[] = [
+  { id: 'notes', label: 'ノート', icon: '📝', description: 'AIと共有するノートの編集', component: NotePanel },
+  { id: 'kb', label: 'ナレッジベース', icon: '📚', description: 'knowledge_base/ の Markdown を閲覧', component: KnowledgeBasePanel },
+  { id: 'settings', label: '設定', icon: '⚙️', description: 'APIキー・モデルプリセット', component: SettingsPanel },
+  { id: 'logs', label: 'ログ', icon: '📜', description: 'LLM API 呼び出しの履歴', component: LogViewer },
+]

frontend/src/stores/knowledgeBase.ts

@@ -0,0 +1,77 @@
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+import { fetchKbFile, fetchKbFiles, type KbFileContent, type KbFileInfo } from '../api/client'
+
+export interface KbGroup {
+  /** ナレッジベース直下は空文字。 */
+  directory: string
+  files: KbFileInfo[]
+}
+
+export const useKnowledgeBaseStore = defineStore('knowledgeBase', () => {
+  const files = ref<KbFileInfo[]>([])
+  /** 開いているファイルの全文。一覧に戻ると null に戻す。 */
+  const openFile = ref<KbFileContent | null>(null)
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+  /** タイトル・パス・プレビューに対する絞り込み文字列。 */
+  const filter = ref('')
+  /** 折りたたまれているフォルダ名。web_search のようにファイル数が多いフォルダを畳むために使う。 */
+  const collapsed = ref<Set<string>>(new Set())
+
+  const filteredFiles = computed(() => {
+    const q = filter.value.trim().toLowerCase()
+    if (!q) return files.value
+    return files.value.filter((f) =>
+      `${f.title} ${f.path} ${f.preview}`.toLowerCase().includes(q),
+    )
+  })
+
+  /** ディレクトリごとにまとめる。一覧はサーバー側でパス順に並んでいるので、そのままの順序でグループ化できる。 */
+  const groups = computed<KbGroup[]>(() => {
+    const result: KbGroup[] = []
+    for (const file of filteredFiles.value) {
+      const last = result[result.length - 1]
+      if (last && last.directory === file.directory) last.files.push(file)
+      else result.push({ directory: file.directory, files: [file] })
+    }
+    return result
+  })
+
+  async function load(): Promise<void> {
+    loading.value = true
+    error.value = null
+    try {
+      files.value = await fetchKbFiles()
+    } catch (e) {
+      error.value = e instanceof Error ? e.message : 'ナレッジベースの取得に失敗しました'
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function open(path: string): Promise<void> {
+    loading.value = true
+    error.value = null
+    try {
+      openFile.value = await fetchKbFile(path)
+    } catch (e) {
+      error.value = e instanceof Error ? e.message : 'ファイルの読み込みに失敗しました'
+    } finally {
+      loading.value = false
+    }
+  }
+
+  function close(): void {
+    openFile.value = null
+  }
+
+  function toggleGroup(directory: string): void {
+    const next = new Set(collapsed.value)
+    if (next.has(directory)) next.delete(directory)
+    else next.add(directory)
+    collapsed.value = next
+  }
+
+  return { files, openFile, loading, error, filter, collapsed, filteredFiles, groups, load, open, close, toggleGroup }
+})