Merge branch 'main' into feature/katex-math-rendering

frontend/src/components/ChatWindow.vue

@@ -2,6 +2,7 @@
 import { computed, ref, watch, nextTick } from 'vue'
 import { useChatStore } from '../stores/chat'
 import MarkdownContent from './MarkdownContent.vue'
+import ToolActivityList from './ToolActivityList.vue'
 import type { Source } from '../api/client'
 
 const store = useChatStore()
@@ -43,6 +44,7 @@ watch(
       :class="['message-wrap', msg.role, { archived: msg.archived }]"
       :title="msg.archived ? '要約済み: 内容は長期メモリに引き継がれ、この発言自体はモデルに渡りません' : undefined"
     >
+      <ToolActivityList v-if="msg.tools && msg.tools.length > 0" :tools="msg.tools" />
       <div :class="['message', msg.role, { error: msg.error }]">
         <div class="bubble">
           <!-- ユーザーメッセージはプレーンテキスト -->

frontend/src/components/NotePanel.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref, nextTick, computed } from 'vue'
 import { useNotesStore } from '../stores/notes'
+import { useChatStore } from '../stores/chat'
 import type { NotePage } from '../api/client'
 
 interface TabGroup {
@@ -9,7 +10,11 @@ interface TabGroup {
 }
 
 const store = useNotesStore()
+const chat = useChatStore()
 const renamingId = ref<number | null>(null)
+const fileInput = ref<HTMLInputElement | null>(null)
+/** ファイルを本文エリアの上までドラッグしてきているか（取り込み用のハイライト表示） */
+const fileOver = ref(false)
 // ref="renameInput" は入れ子の v-for の中にあるため、Vue 3 では単一要素ではなく配列になる
 const renameInput = ref<HTMLInputElement[]>([])
 
@@ -34,6 +39,40 @@ const groups = computed<TabGroup[]>(() => {
   return result
 })
 
+/** ファイルをページとして取り込む。取り込めた件数はトーストで知らせる。 */
+async function importFiles(files: FileList | File[] | null) {
+  const list = [...(files ?? [])]
+  if (list.length === 0) return
+  const created = await store.importFiles(list)
+  if (created.length > 0) {
+    chat.pushToast(`${created.length}ページを取り込みました: ${created.map((p) => p.title).join(', ')}`, 'success')
+  }
+}
+
+function onPickFiles(e: Event) {
+  const input = e.target as HTMLInputElement
+  void importFiles(input.files)
+  input.value = ''  // 同じファイルを続けて選び直せるようにする
+}
+
+/** タブのドラッグ&ドロップ（draggingId が立つ）とは別物。ファイルのドロップだけを拾う。 */
+function isFileDrag(e: DragEvent): boolean {
+  return !!e.dataTransfer && [...e.dataTransfer.types].includes('Files')
+}
+
+function onFileDragOver(e: DragEvent) {
+  if (!isFileDrag(e)) return
+  e.preventDefault()
+  fileOver.value = true
+}
+
+function onFileDrop(e: DragEvent) {
+  if (!isFileDrag(e)) return
+  e.preventDefault()
+  fileOver.value = false
+  void importFiles(e.dataTransfer!.files)
+}
+
 async function startRename(id: number) {
   renamingId.value = id
   await nextTick()
@@ -155,6 +194,7 @@ onUnmounted(() => {
           class="tab"
           :class="{
             active: page.id === store.activeId,
+            attached: store.attachedIds.has(page.id),
             dragging: draggingId === page.id,
             'drop-before': dropTarget?.id === page.id && dropTarget.place === 'before',
             'drop-after': dropTarget?.id === page.id && dropTarget.place === 'after',
@@ -181,6 +221,14 @@ onUnmounted(() => {
           <template v-else>
             <span class="tab-title" :title="page.title">{{ page.title }}</span>
             <span v-if="store.dirtyIds.has(page.id)" class="dot" title="未保存">●</span>
+            <button
+              class="tab-pin"
+              :class="{ on: store.attachedIds.has(page.id) }"
+              :title="store.attachedIds.has(page.id)
+                ? 'この会話のプロンプトに本文を載せている（クリックで解除）'
+                : 'この会話のプロンプトに本文を載せる'"
+              @click.stop="store.toggleAttached(page.id)"
+            >📌</button>
             <button class="tab-tag" title="セクションに割り当て" @click.stop="assignSection(page)">🏷</button>
             <button class="tab-del" title="削除" @click.stop="confirmRemove(page.id, page.title)">×</button>
           </template>
@@ -198,24 +246,68 @@ onUnmounted(() => {
 
     <div v-if="store.error" class="error">⚠ {{ store.error }}</div>
 
-    <textarea
-      v-if="store.activePage"
-      class="editor"
-      :value="store.activePage.content"
-      placeholder="ここに書いた内容はAIと共有されます。AIも read_note / write_note でこのページを読み書きできます。"
-      spellcheck="false"
-      @input="onContentInput"
-      @blur="store.flush()"
-    />
-    <div v-else class="empty">
-      <p>ページがありません。</p>
-      <button class="create-btn" @click="store.addPage()">＋ 最初のページを作成</button>
+    <div
+      class="body"
+      :class="{ 'file-over': fileOver }"
+      @dragover="onFileDragOver"
+      @dragleave="fileOver = false"
+      @drop="onFileDrop"
+    >
+      <textarea
+        v-if="store.activePage"
+        class="editor"
+        :value="store.activePage.content"
+        placeholder="ここに書いた内容はAIと共有されます。AIも read_note / write_note でこのページを読み書きできます。&#10;.md / .txt / .zip をここにドロップすると新しいページとして取り込みます。"
+        spellcheck="false"
+        @input="onContentInput"
+        @blur="store.flush()"
+      />
+      <div v-else class="empty">
+        <p>ページがありません。</p>
+        <button class="create-btn" @click="store.addPage()">＋ 最初のページを作成</button>
+        <p class="empty-hint">.md / .txt / .zip をここにドロップしても取り込めます。</p>
+      </div>
+      <div v-if="fileOver" class="drop-overlay">ドロップしてページとして取り込む</div>
+    </div>
+
+    <div class="actions">
+      <input
+        ref="fileInput"
+        type="file"
+        class="file-input"
+        multiple
+        accept=".md,.markdown,.txt,.text,.zip"
+        @change="onPickFiles"
+      >
+      <button
+        class="action-btn"
+        title=".md / .txt / .zip をページとして取り込む"
+        @click="fileInput?.click()"
+      >⬆ 取り込み</button>
+      <button
+        class="action-btn"
+        :disabled="store.activeId === null"
+        title="開いているページを Markdown ファイルとして保存"
+        @click="store.activeId !== null && store.downloadPage(store.activeId)"
+      >⬇ このページ (.md)</button>
+      <button
+        class="action-btn"
+        :disabled="store.pages.length === 0"
+        title="全ページを ZIP（1ページ1 Markdown、セクションはフォルダ）として保存"
+        @click="store.downloadAll()"
+      >⬇ すべて (.zip)</button>
     </div>
 
     <div class="hint">
       ページのタイトル一覧はAIのシステムプロンプトに常に含まれます。本文はAIが必要に応じて読み出します。
       🏷 でページをセクションにまとめられます（セクション名をクリックすると変更・解除）。
       タブはドラッグで並べ替え・他のセクションへの移動ができます。
+      ⬇ でノートを手元にダウンロードできます（未保存の編集は保存してから書き出します）。
+      ⬆ または本文エリアへのドロップで .md / .txt / .zip を取り込めます（⬇ で出した ZIP を戻せばセクションごと復元されます）。
+      <span class="hint-pin">
+        📌 を付けたページは、<strong>今開いているチャット</strong>のプロンプトに本文がそのまま載ります
+        （AIが read_note で読みに行くのを待たずに確実に参照されます）。指定はチャットごとに保存されます。
+      </span>
     </div>
   </div>
 </template>
@@ -279,6 +371,8 @@ onUnmounted(() => {
   max-width: 160px;
 }
 .tab.active { background: #2a2a2a; color: #fff; border-color: #444; }
+/* プロンプトに本文を載せているページ。タブ上端の線で「積んでいる」ことを示す */
+.tab.attached { box-shadow: inset 0 2px 0 #eab308; }
 .tab.dragging { opacity: 0.4; }
 .tab.drop-before { box-shadow: inset 2px 0 0 #93c5fd; }
 .tab.drop-after { box-shadow: inset -2px 0 0 #93c5fd; }
@@ -292,7 +386,7 @@ onUnmounted(() => {
 .drop-end.active { background: #93c5fd; opacity: 0.5; }
 .tab-title { overflow: hidden; text-overflow: ellipsis; }
 .dot { color: #eab308; font-size: 8px; }
-.tab-tag, .tab-del, .tab-add {
+.tab-pin, .tab-tag, .tab-del, .tab-add {
   background: none;
   border: none;
   color: #666;
@@ -301,9 +395,13 @@ onUnmounted(() => {
   padding: 0 2px;
   line-height: 1;
 }
-.tab-tag { font-size: 11px; opacity: 0; transition: opacity 0.15s; }
+.tab-pin, .tab-tag { font-size: 11px; opacity: 0; transition: opacity 0.15s; }
+.tab:hover .tab-pin, .tab.active .tab-pin,
 .tab:hover .tab-tag, .tab.active .tab-tag { opacity: 0.8; }
-.tab-tag:hover { opacity: 1 !important; }
+.tab-pin:hover, .tab-tag:hover { opacity: 1 !important; }
+/* 載せているページのピンは、タブが非アクティブでも常に見えるようにする */
+.tab-pin.on { opacity: 1; filter: none; }
+.tab-pin:not(.on) { filter: grayscale(1); }
 .tab-del:hover, .tab-add:hover { color: #f87171; }
 .tab-add { color: #888; padding: 0 8px; align-self: center; }
 .tab-add:hover { color: #93c5fd; }
@@ -323,6 +421,25 @@ onUnmounted(() => {
   background: #2a1414;
   border-bottom: 1px solid #7f1d1d;
 }
+.body {
+  flex: 1;
+  position: relative;
+  display: flex;
+  min-height: 0;
+}
+.body.file-over { outline: 2px dashed #93c5fd; outline-offset: -6px; }
+.drop-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(22, 22, 22, 0.85);
+  color: #93c5fd;
+  font-size: 13px;
+  pointer-events: none;  /* dragleave が誤発火しないように、当たり判定を持たせない */
+}
+.file-input { display: none; }
 .editor {
   flex: 1;
   resize: none;
@@ -336,6 +453,7 @@ onUnmounted(() => {
   line-height: 1.6;
 }
 .editor::placeholder { color: #555; }
+.empty-hint { color: #555; font-size: 11px; }
 .empty {
   flex: 1;
   display: flex;
@@ -355,6 +473,28 @@ onUnmounted(() => {
   font-size: 12px;
   cursor: pointer;
 }
+.actions {
+  flex-shrink: 0;
+  display: flex;
+  justify-content: flex-end;
+  gap: 6px;
+  padding: 6px 8px;
+  border-top: 1px solid #2a2a2a;
+}
+.action-btn {
+  background: #1f1f1f;
+  color: #aaa;
+  border: 1px solid #333;
+  border-radius: 6px;
+  padding: 4px 10px;
+  font-size: 11px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.action-btn:hover:not(:disabled) { background: #2a2a2a; color: #93c5fd; border-color: #444; }
+.action-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+.hint-pin { display: block; margin-top: 4px; color: #8a7a3a; }
+.hint-pin strong { color: #eab308; font-weight: 600; }
 .hint {
   flex-shrink: 0;
   padding: 8px 10px;

frontend/src/components/ToastList.vue

@@ -9,10 +9,10 @@ const store = useChatStore()
     <div
       v-for="toast in store.toasts"
       :key="toast.id"
-      class="toast"
+      :class="['toast', toast.kind]"
       @click="store.dismissToast(toast.id)"
     >
-      <span class="icon">⚠</span>
+      <span class="icon">{{ toast.kind === 'success' ? '✓' : '⚠' }}</span>
       <span class="msg">{{ toast.message }}</span>
       <button class="close">✕</button>
     </div>
@@ -46,9 +46,10 @@ const store = useChatStore()
   animation: slide-in 0.2s ease;
   box-shadow: 0 4px 12px rgba(0,0,0,0.4);
 }
+.toast.success { background: #0a1f14; border-color: #166534; color: #6ee7b7; }
 .icon { flex-shrink: 0; }
 .msg { flex: 1; word-break: break-word; }
-.close { background: none; border: none; color: #f87171; cursor: pointer; font-size: 11px; padding: 0; }
+.close { background: none; border: none; color: inherit; cursor: pointer; font-size: 11px; padding: 0; }
 @keyframes slide-in {
   from { opacity: 0; transform: translateY(8px); }
   to   { opacity: 1; transform: translateY(0); }

frontend/src/components/ToolActivityList.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+/** アシスタント応答の生成中に実行したツール（Web検索・ノート読み書きなど）を明示的に見せるリスト。 */
+import type { ToolActivity } from '../api/client'
+
+defineProps<{ tools: ToolActivity[] }>()
+
+const ICONS: Record<string, string> = {
+  web_search: '🔍',
+  read_note: '📖',
+  write_note: '✍️',
+  read_knowledge: '🧠',
+  save_knowledge: '💾',
+}
+
+function icon(tool: ToolActivity): string {
+  return ICONS[tool.name ?? ''] ?? '🛠'
+}
+</script>
+
+<template>
+  <div class="tool-activity">
+    <div v-for="tool in tools" :key="tool.id" :class="['tool-row', tool.status]">
+      <span class="icon">{{ icon(tool) }}</span>
+      <span class="label">{{ tool.label || tool.name }}</span>
+      <span v-if="tool.detail" class="detail" :title="tool.detail">{{ tool.detail }}</span>
+      <span v-if="tool.status === 'running'" class="spinner" aria-label="実行中" />
+      <span v-else class="result">{{ tool.status === 'error' ? '⚠' : '✓' }} {{ tool.result }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tool-activity {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-width: 72%;
+  padding: 6px 10px;
+  border-left: 2px solid #3f6212;
+  background: #1b2114;
+  border-radius: 0 8px 8px 0;
+  font-size: 11px;
+}
+.tool-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  color: #a3a3a3;
+}
+.tool-row.running .label { color: #d9f99d; }
+.icon { flex: none; }
+.label { flex: none; color: #bef264; }
+.detail {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #d4d4d4;
+  background: #262f1a;
+  border-radius: 8px;
+  padding: 1px 7px;
+}
+.result { flex: none; color: #86efac; }
+.tool-row.error .result { color: #f87171; }
+.spinner {
+  flex: none;
+  width: 10px;
+  height: 10px;
+  border: 2px solid #3f6212;
+  border-top-color: #bef264;
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+</style>