project-knowledge 0.1.0 → 1.0.1

package/_site/index.html

@@ -4,8 +4,8 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>KB Control Center</title>
-  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
-  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="/vendor/vue.global.prod.js"></script>
+  <script src="/vendor/tailwind-browser.js"></script>
   <style>
     [v-cloak] { display: none; }
     body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; }
@@ -34,10 +34,26 @@
     .btn-primary { border: 1px solid transparent; background: var(--accent); color: white; border-radius: 9px; padding: 8px 11px; font-size: 13px; }
     .btn-primary:hover { background: var(--accent2); }
     .btn-danger { border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent); color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); border-radius: 9px; padding: 8px 11px; font-size: 13px; }
-    .input { background: var(--panel); border: 1px solid var(--line); color: var(--text); border-radius: 9px; padding: 9px 11px; }
+    .input { min-width: 0; box-sizing: border-box; background: var(--panel); border: 1px solid var(--line); color: var(--text); border-radius: 9px; padding: 9px 11px; }
+    label.grid .input { width: 100%; }
     .dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
     .good { background: var(--good); } .warn { background: var(--warn); } .bad { background: var(--bad); } .idle { background: var(--idle); }
     .chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; font-size: 11px; color: var(--muted); background: var(--panel2); }
+    .help-dot { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--panel2); font-size: 11px; line-height: 1; cursor: help; }
+    .field-label { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
+    .markdown-body { font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
+    .markdown-body > * + * { margin-top: 0.65rem; }
+    .markdown-body h1, .markdown-body h2, .markdown-body h3 { font-weight: 650; line-height: 1.25; }
+    .markdown-body h1 { font-size: 1.15rem; }
+    .markdown-body h2 { font-size: 1.05rem; }
+    .markdown-body h3 { font-size: 0.95rem; }
+    .markdown-body ul, .markdown-body ol { padding-left: 1.2rem; }
+    .markdown-body ul { list-style: disc; }
+    .markdown-body ol { list-style: decimal; }
+    .markdown-body code { border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; background: var(--panel2); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
+    .markdown-body pre { overflow: auto; border-radius: 8px; background: #020617; color: #e2e8f0; padding: 10px; }
+    .markdown-body pre code { border: 0; padding: 0; background: transparent; color: inherit; }
+    .markdown-body blockquote { border-left: 3px solid var(--line); padding-left: 10px; color: var(--muted); }
     .scrollbar-thin::-webkit-scrollbar { width: 7px; height: 7px; }
     .scrollbar-thin::-webkit-scrollbar-thumb { background: #73829666; border-radius: 999px; }
   </style>
@@ -108,20 +124,91 @@
             <option value="en">{{ t("english") }}</option>
           </select>
           <button @click="refreshAll" class="btn">{{ t("refresh") }}</button>
-          <button @click="activeView = 'import'" class="btn-primary">{{ t("importProject") }}</button>
         </div>
       </header>
 
       <section v-if="activeView === 'dashboard'" class="space-y-5">
         <div class="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
-          <div v-for="s in summaryCards" :key="s.label" class="panel rounded-xl border p-4">
+          <button v-for="s in summaryCards" :key="s.label" @click="openSummaryPanel(s.key)"
+            class="panel rounded-xl border p-4 text-left transition hover:brightness-[0.98]">
             <div class="text-sm muted">{{ s.label }}</div>
             <div class="mt-2 text-2xl font-semibold">{{ s.value }}</div>
             <div class="mt-1 text-xs muted">{{ s.note }}</div>
-          </div>
+          </button>
         </div>
 
-        <div class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_390px]">
+        <section v-if="summaryPanel === 'pending'" class="panel rounded-xl border p-5">
+          <div class="mb-4 flex items-center justify-between gap-3">
+            <div>
+              <h2 class="text-lg font-semibold">{{ t("pendingCommitDetails") }}</h2>
+              <div class="mt-1 text-sm muted">{{ t("pendingCommitDetailsHelp") }}</div>
+            </div>
+            <button @click="loadPendingCommits" class="btn">{{ t("refresh") }}</button>
+          </div>
+          <div class="grid gap-3">
+            <details v-for="item in pendingCommitItems" :key="item.slug" class="rounded-lg border p-3 panel2 group" :open="(item.pendingCount || 0) > 0 || !!item.error">
+              <summary class="flex cursor-pointer list-none flex-wrap items-center justify-between gap-2">
+                <div class="font-medium">{{ item.displayName }}</div>
+                <div class="flex items-center gap-2">
+                  <span class="chip">{{ item.pendingCount }} {{ t("pending") }}</span>
+                  <span class="muted transition group-open:rotate-90">›</span>
+                </div>
+              </summary>
+              <div class="mt-1 text-xs muted">{{ item.range || item.repoStatus || "-" }}</div>
+              <div v-if="item.error" class="mt-2 text-sm" style="color: var(--bad)">{{ item.error }}</div>
+              <div v-if="item.commits && item.commits.length" class="mt-3 overflow-auto">
+                <table class="w-full text-left text-xs">
+                  <thead class="muted"><tr><th class="py-1 pr-3">Hash</th><th class="py-1 pr-3">{{ t("time") }}</th><th class="py-1 pr-3">Author</th><th class="py-1">{{ t("subject") }}</th></tr></thead>
+                  <tbody>
+                    <tr v-for="c in item.commits" :key="c.hash" class="border-t line">
+                      <td class="py-1 pr-3 font-mono">{{ c.short || (c.hash || '').slice(0, 7) }}</td>
+                      <td class="py-1 pr-3">{{ c.date || "-" }}</td>
+                      <td class="py-1 pr-3">{{ c.author || "-" }}</td>
+                      <td class="py-1">{{ c.subject || "-" }}</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </details>
+          </div>
+        </section>
+
+        <section v-if="summaryPanel === 'issues'" class="panel rounded-xl border p-5">
+          <div class="mb-4 flex items-center justify-between gap-3">
+            <div>
+              <h2 class="text-lg font-semibold">{{ t("issueCenter") }}</h2>
+              <div class="mt-1 text-sm muted">{{ t("issueCenterHelp") }}</div>
+            </div>
+            <button @click="loadIssues" class="btn">{{ t("refresh") }}</button>
+          </div>
+          <div v-if="!supervisionIssues.length" class="rounded-lg border p-3 text-sm panel2">{{ t("noIssue") }}</div>
+          <div v-else class="grid gap-2">
+            <details v-for="group in issuesByProject" :key="group.slug" class="rounded-lg border p-3 panel2 group" :open="group.hasWarnOrError">
+              <summary class="flex cursor-pointer list-none flex-wrap items-center justify-between gap-2">
+                <div class="flex items-center gap-2">
+                  <span :class="['dot', group.levelClass]"></span>
+                  <span class="font-medium">{{ group.displayName }}</span>
+                </div>
+                <div class="flex items-center gap-2">
+                  <span class="chip">{{ group.issues.length }}</span>
+                  <span class="muted transition group-open:rotate-90">›</span>
+                </div>
+              </summary>
+              <div class="mt-3 grid gap-2">
+                <div v-for="issue in group.issues" :key="issue.issueId" class="rounded-lg border p-3 panel">
+                  <div class="flex flex-wrap items-center gap-2">
+                    <span :class="['dot', issue.level === 'error' ? 'bad' : issue.level === 'warn' ? 'warn' : 'idle']"></span>
+                    <span class="font-medium">{{ issue.message }}</span>
+                    <span class="chip">{{ issue.source }}</span>
+                  </div>
+                  <pre v-if="issue.meta && Object.keys(issue.meta).length" class="mt-2 max-h-32 overflow-auto rounded-lg bg-slate-950 p-2 text-xs text-slate-100">{{ JSON.stringify(issue.meta, null, 2) }}</pre>
+                </div>
+              </div>
+            </details>
+          </div>
+        </section>
+
+        <div v-if="!summaryPanel" class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_390px]">
           <section class="panel rounded-xl border p-5">
             <div v-if="!selectedProject" class="py-20 text-center muted">{{ t("selectProject") }}</div>
             <div v-else>
@@ -135,9 +222,10 @@
                   <div class="mt-2 break-all text-xs muted">{{ selectedProject.localPath }}</div>
                 </div>
                 <div class="flex flex-wrap gap-2">
-                  <button @click="validateGit(selectedSlug)" class="btn">{{ t("validateGit") }}</button>
-                  <button @click="scanProject(selectedSlug)" class="btn">{{ t("scan") }}</button>
-                  <button @click="runJob('safe', selectedSlug)" class="btn-primary">{{ t("safeAnalyze") }}</button>
+                  <button @click="runKnowledgeUpdate(selectedSlug)" class="btn-primary">{{ t("runKnowledgeUpdate") }}</button>
+                  <a :href="goalUrl(selectedSlug)" target="_blank" class="btn text-center">{{ t("editProjectGoal") }}</a>
+                  <a v-if="isKbInit(selectedSlug)" :href="kbUrl(selectedSlug)" target="_blank" class="btn text-center">{{ t("openKb") }}</a>
+                  <button @click="openRemoveProject(selectedSlug)" class="btn-danger">{{ t("removeProject") }}</button>
                 </div>
               </div>
 
@@ -154,15 +242,25 @@
                     <h3 class="font-medium">{{ t("projectOperations") }}</h3>
                     <span class="chip">{{ selectedProject.aiProfileId || "mock-agent" }}</span>
                   </div>
-                  <div class="grid gap-2 md:grid-cols-2">
-                    <button @click="initProject(selectedSlug)" class="btn">{{ t("initKb") }}</button>
-                    <button @click="migrateV2(selectedSlug)" class="btn">{{ t("migrateV2") }}</button>
-                    <button @click="runJob('scan', selectedSlug)" class="btn">{{ t("runScanJob") }}</button>
-                    <button @click="runJob('analyze-initial', selectedSlug)" class="btn">{{ t("initialAnalysis") }}</button>
-                    <button @click="runJob('analyze-commits', selectedSlug)" class="btn">{{ t("commitAnalysis") }}</button>
-                    <button @click="validateKb(selectedSlug)" class="btn">{{ t("validateKb") }}</button>
-                    <a v-if="isKbInit(selectedSlug)" :href="kbUrl(selectedSlug)" target="_blank" class="btn text-center">{{ t("openKb") }}</a>
-                    <a :href="goalUrl(selectedSlug)" target="_blank" class="btn text-center">{{ t("openGoal") }}</a>
+                  <div class="grid gap-2">
+                    <button @click="runKnowledgeUpdate(selectedSlug)" class="btn-primary">{{ t("runKnowledgeUpdate") }}</button>
+                    <button v-if="!isKbInit(selectedSlug)" @click="initProject(selectedSlug)" class="btn">{{ t("initKb") }}</button>
+                    <div class="grid gap-2 md:grid-cols-2">
+                      <a :href="goalUrl(selectedSlug)" target="_blank" class="btn text-center">{{ t("editProjectGoal") }}</a>
+                      <a v-if="isKbInit(selectedSlug)" :href="kbUrl(selectedSlug)" target="_blank" class="btn text-center">{{ t("openKb") }}</a>
+                    </div>
+                    <div v-if="actionMessage" class="rounded-lg border p-3 text-sm panel">{{ actionMessage }}</div>
+                    <button @click="advancedOpen = !advancedOpen" class="btn text-left">{{ advancedOpen ? t("hideAdvanced") : t("showAdvanced") }}</button>
+                    <div v-if="advancedOpen" class="grid gap-2 md:grid-cols-2">
+                      <button @click="validateGit(selectedSlug)" class="btn">{{ t("validateGit") }}</button>
+                      <button @click="scanProject(selectedSlug)" class="btn">{{ t("scan") }}</button>
+                      <button @click="runJob('scan', selectedSlug)" class="btn">{{ t("runScanJob") }}</button>
+                      <button @click="runJob('analyze-initial', selectedSlug)" class="btn">{{ t("initialAnalysis") }}</button>
+                      <button @click="runJob('analyze-commits', selectedSlug)" class="btn">{{ t("commitAnalysis") }}</button>
+                      <button @click="validateKb(selectedSlug)" class="btn">{{ t("validateKb") }}</button>
+                      <button @click="migrateV2(selectedSlug)" class="btn">{{ t("migrateV2") }}</button>
+                      <button @click="migrateV3(selectedSlug)" class="btn">{{ t("migrateV3") }}</button>
+                    </div>
                   </div>
                 </div>
 
@@ -209,24 +307,98 @@
           </section>
 
           <aside class="space-y-5">
-            <section class="panel rounded-xl border p-5">
-              <div class="mb-4 flex items-center justify-between">
-                <h2 class="font-semibold">{{ t("runningJobs") }}</h2>
-                <span class="chip">{{ runningJobs.length }}</span>
+            <section class="panel rounded-xl border p-0 overflow-hidden flex flex-col" style="height: 78vh; min-height: 520px">
+              <div class="flex items-center justify-between border-b px-3 py-2 line">
+                <div class="flex items-center gap-2 min-w-0">
+                  <span :class="['dot shrink-0', terminalStatusDot]"></span>
+                  <span class="text-sm font-semibold truncate">{{ t("claudeWorkbench") }}</span>
+                  <span class="chip shrink-0">{{ terminalSession.state || 'idle' }}</span>
+                  <span v-if="terminalSession.aiProfileId" class="chip shrink-0">{{ terminalSession.aiProfileId }}</span>
+                  <span v-if="terminalSession.model" class="chip shrink-0">{{ terminalSession.model }}</span>
+                  <span v-if="terminalSession.turns > 0" class="chip shrink-0">turn {{ terminalSession.turns }}</span>
+                </div>
+                <div class="flex shrink-0 items-center gap-1">
+                  <button @click="startClaudeAnalysis" :disabled="!selectedSlug || terminalSession.state === 'running' || terminalSession.state === 'spawning'"
+                          class="btn-primary text-xs px-2 py-1">{{ t("analyze") }}</button>
+                  <button @click="restoreLatestClaudeSession(false)" :disabled="!selectedSlug || !terminalSessions.length"
+                          class="btn text-xs px-2 py-1">{{ t("restoreSession") }}</button>
+                  <button @click="stopClaudeSession" :disabled="!terminalSessionId || (terminalSession.state !== 'running' && terminalSession.state !== 'spawning' && terminalSession.state !== 'pending-permission')"
+                          class="btn-danger text-xs px-2 py-1">{{ t("stop") }}</button>
+                  <button @click="clearTerminal" class="btn text-xs px-2 py-1">{{ t("clear") }}</button>
+                  <button @click="activeView = 'prompts'" class="btn text-xs px-2 py-1">{{ t("editPrompts") }}</button>
+                </div>
+              </div>
+              <div class="grid grid-cols-3 gap-2 border-b px-3 py-2 text-[11px] line">
+                <div class="panel2 rounded-lg border px-2 py-1.5">
+                  <div class="muted">{{ t("continuity") }}</div>
+                  <div class="mt-1 flex items-center gap-1.5">
+                    <span :class="['dot', terminalSession.claudeSessionId ? 'good' : 'idle']"></span>
+                    <span class="truncate">{{ terminalSession.claudeSessionId ? terminalSession.claudeSessionId.slice(0, 10) : '-' }}</span>
+                  </div>
+                </div>
+                <div class="panel2 rounded-lg border px-2 py-1.5">
+                  <div class="muted">{{ t("permissionStatus") }}</div>
+                  <div class="mt-1 flex items-center gap-1.5">
+                    <span :class="['dot', terminalPermission ? 'warn' : 'good']"></span>
+                    <span class="truncate">{{ terminalPermission ? t("pendingReview") : t("approvedStatus") }}</span>
+                  </div>
+                </div>
+                <div class="panel2 rounded-lg border px-2 py-1.5">
+                  <div class="muted">{{ t("recoveryStatus") }}</div>
+                  <div class="mt-1 flex items-center gap-1.5">
+                    <span :class="['dot', terminalSessions.length ? 'good' : 'idle']"></span>
+                    <span class="truncate">{{ terminalSessions.length ? t("recoverable") : '-' }}</span>
+                  </div>
+                </div>
               </div>
-              <div v-if="runningJobs.length" class="space-y-3">
-                <div v-for="job in runningJobs" :key="job.jobId" class="panel2 rounded-xl border p-3">
-                  <div class="flex items-center justify-between gap-2">
-                    <div class="truncate text-sm font-medium">{{ job.mode || "job" }} / {{ job.slug }}</div>
-                    <span class="dot warn"></span>
+              <div v-if="terminalSession.state === 'running' || terminalSession.state === 'spawning'"
+                   class="border-b px-3 py-1.5 text-[11px] flex items-center gap-2"
+                   style="background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn)">
+                <span class="dot warn"></span>
+                <span>{{ t("claudeHasWriteAccess") }}</span>
+              </div>
+              <div ref="terminalScrollRef" class="flex-1 overflow-auto p-3 scrollbar-thin text-sm leading-relaxed" style="background: var(--panel2)">
+                <div v-if="!terminalLines.length" class="rounded-lg border px-3 py-8 text-center text-sm panel muted">{{ t("terminalEmpty") }}</div>
+                <div v-for="(line, i) in terminalLines" :key="i" class="mb-3">
+                  <div v-if="line.kind === 'user'" class="flex justify-end">
+                    <div class="max-w-[88%] rounded-xl border px-3 py-2 text-sm whitespace-pre-wrap" style="background: color-mix(in srgb, var(--accent) 12%, var(--panel)); border-color: color-mix(in srgb, var(--accent) 30%, var(--line));">{{ line.text }}</div>
+                  </div>
+                  <div v-else-if="line.kind === 'assistant'" class="max-w-[94%] rounded-xl border bg-[var(--panel)] px-3 py-2">
+                    <div class="markdown-body" v-html="renderMarkdown(line.text)"></div>
                   </div>
-                  <div class="mt-2 h-1.5 overflow-hidden rounded-full bg-slate-500/20">
-                    <div class="h-full w-2/3 rounded-full" style="background: var(--warn)"></div>
+                  <details v-else-if="line.kind === 'tool'" class="max-w-[94%] rounded-xl border bg-[var(--panel)] px-3 py-2 text-xs" :open="line.open">
+                    <summary class="cursor-pointer select-none text-amber-600 dark:text-amber-300">
+                      {{ line.name || 'tool' }} <span class="muted">{{ line.summary || '' }}</span>
+                    </summary>
+                    <pre v-if="line.inputJson" class="mt-2 overflow-auto rounded bg-slate-950 p-2 text-slate-100 whitespace-pre-wrap">{{ line.inputJson }}</pre>
+                  </details>
+                  <div v-else-if="line.kind === 'thinking'" class="max-w-[94%] rounded-lg border px-3 py-2 text-xs italic muted whitespace-pre-wrap" style="background: color-mix(in srgb, var(--accent) 6%, transparent)">{{ line.text || t("thinking") }}</div>
+                  <div v-else-if="line.kind === 'permission'" class="max-w-[94%] rounded-xl border px-3 py-2 text-xs" style="background: color-mix(in srgb, var(--warn) 10%, var(--panel)); border-color: color-mix(in srgb, var(--warn) 35%, var(--line));">
+                    <div class="flex items-start gap-2">
+                      <span class="dot warn mt-1"></span>
+                      <div class="min-w-0 flex-1">
+                        <div class="font-semibold">{{ t("permissionRequired") }}</div>
+                        <div class="mt-1 muted whitespace-pre-wrap">{{ line.summaryText || permissionSummaryText }}</div>
+                      </div>
+                      <div v-if="terminalPermission && terminalPermission.requestId === line.requestId" class="flex shrink-0 gap-1">
+                        <button @click="approveClaudePermission(line.requestId)" :disabled="terminalPermissionBusy" class="btn-primary text-xs px-2 py-1">{{ t("approve") }}</button>
+                        <button @click="denyClaudePermission(line.requestId)" :disabled="terminalPermissionBusy" class="btn-danger text-xs px-2 py-1">{{ t("deny") }}</button>
+                      </div>
+                    </div>
                   </div>
-                  <div class="mt-2 text-xs muted">{{ job.status }} / {{ formatTime(job.startTime) }}</div>
+                  <div v-else-if="line.kind === 'error'" class="max-w-[94%] rounded-lg border px-3 py-2 text-xs text-red-500 whitespace-pre-wrap" style="background: color-mix(in srgb, var(--bad) 8%, var(--panel));">{{ line.text }}</div>
+                  <div v-else class="text-center text-[11px] muted">{{ line.text }}</div>
                 </div>
               </div>
-              <div v-else class="rounded-lg border px-3 py-6 text-center text-sm panel2 muted">{{ t("noRunningJob") }}</div>
+              <div class="border-t p-2 flex gap-2 bg-slate-900 line">
+                <input v-model="terminalInput" @keyup.enter="sendClaudeInput"
+                       :disabled="!terminalSessionId || terminalSession.claudeSessionId == null || terminalSession.state === 'pending-permission'"
+                       :placeholder="terminalInputPlaceholder"
+                       class="flex-1 rounded bg-slate-800 px-3 py-2 text-xs text-slate-100 font-mono border border-slate-700 focus:outline-none focus:border-slate-500" />
+                <button @click="sendClaudeInput"
+                        :disabled="!terminalSessionId || !terminalInput.trim() || terminalSession.state === 'running' || terminalSession.state === 'spawning' || terminalSession.state === 'pending-permission'"
+                        class="btn-primary text-xs px-3 py-2">{{ t("send") }}</button>
+              </div>
             </section>
 
             <section class="panel rounded-xl border p-5">
@@ -262,6 +434,27 @@
             <label class="grid gap-1 text-sm">{{ t("gitPath") }}
               <input v-model="form.gitPath" class="input font-mono text-xs" placeholder="Leave blank if same as local path" />
             </label>
+            <div class="rounded-lg border p-3 panel2">
+              <div class="mb-3 flex flex-wrap items-center justify-between gap-2">
+                <div>
+                  <div class="font-medium">{{ t("gitImportPreflight") }}</div>
+                  <div class="mt-1 text-xs muted">{{ t("gitImportPreflightHelp") }}</div>
+                </div>
+                <button type="button" @click="runImportPreflight" class="btn">{{ t("check") }}</button>
+              </div>
+              <div v-if="importPreflight" class="mb-3 rounded-lg border p-3 text-sm panel">
+                <div>{{ t("repo") }}: {{ importPreflight.inspection && importPreflight.inspection.repoStatus || "-" }}</div>
+                <div v-if="importPreflight.error" style="color: var(--bad)">{{ importPreflight.error }}</div>
+                <div v-if="importPreflight.needsGitInit" style="color: var(--warn)">{{ t("needsGitInit") }}</div>
+              </div>
+              <div class="grid gap-3">
+                <label class="flex items-center gap-2 text-sm"><input type="checkbox" v-model="form.initGit" /> {{ t("initLocalGit") }}</label>
+                <label class="flex items-center gap-2 text-sm"><input type="checkbox" v-model="form.createInitialCommit" /> {{ t("createInitialCommit") }}</label>
+                <label class="grid gap-1 text-sm">{{ t("existingRemoteUrl") }}
+                  <input v-model="form.remoteUrl" class="input font-mono text-xs" placeholder="https://github.com/org/repo.git" />
+                </label>
+              </div>
+            </div>
             <div class="grid gap-4 md:grid-cols-2">
               <label class="grid gap-1 text-sm">{{ t("primaryLanguage") }}
                 <input v-model="form.primaryLanguage" class="input" placeholder="TypeScript" />
@@ -305,17 +498,93 @@
               <h2 class="text-lg font-semibold">{{ t("aiProfiles") }}</h2>
               <p class="mt-1 text-sm muted">{{ t("backedByAi") }}</p>
             </div>
-            <button @click="saveAiProfiles" class="btn-primary">{{ t("save") }}</button>
+            <button type="button" @click="saveCurrentProfile" class="btn-primary">{{ t("save") }}</button>
           </div>
           <div class="mt-5 grid gap-4">
-            <label class="grid gap-1 text-sm">{{ t("defaultProfile") }}
+            <label class="grid gap-1 text-sm">
+              <span class="field-label">{{ t("defaultProfile") }} <span class="help-dot" :title="t('defaultProfileHelp')" tabindex="0">?</span></span>
               <select v-model="aiConfig.defaultProfileId" class="input">
-                <option v-for="p in aiConfig.profiles" :key="p.id" :value="p.id">{{ p.id }} - {{ p.name || p.id }}</option>
+                <option v-for="p in aiConfig.profiles" :key="p.id" :value="p.id" :disabled="p.enabled === false">{{ profileOptionLabel(p) }}</option>
               </select>
             </label>
+
+            <div class="panel2 rounded-xl border p-4">
+              <div class="mb-4 flex items-center justify-between gap-3">
+                <h3 class="font-medium">{{ t("profileEditor") }}</h3>
+                <div class="flex flex-wrap gap-2">
+                  <button type="button" @click="addProfile" class="btn">{{ t("addProfile") }}</button>
+                  <button type="button" @click="deleteCurrentProfile" class="btn-danger">{{ t("deleteProfile") }}</button>
+                  <button type="button" @click="saveCurrentProfile" class="btn">{{ t("saveProfileForm") }}</button>
+                </div>
+              </div>
+              <div class="grid gap-4 md:grid-cols-2">
+                <label class="grid gap-1 text-sm">
+                  <span class="field-label">{{ t("profileId") }} <span class="help-dot" :title="t('profileIdHelp')" tabindex="0">?</span></span>
+                  <select v-model="selectedConfigProfileId" @change="loadProfileForm" class="input">
+                    <option v-for="p in aiConfig.profiles" :key="p.id" :value="p.id">{{ profileOptionLabel(p) }}</option>
+                  </select>
+                </label>
+                <label class="grid gap-1 text-sm">{{ t("profileName") }}
+                  <input v-model="profileForm.name" class="input" />
+                </label>
+                <label class="grid gap-1 text-sm md:col-span-2">
+                  <span class="field-label">{{ t("implementation") }} <span class="help-dot" :title="t('implementationHelp')" tabindex="0">?</span></span>
+                  <select v-model="profileForm.implementation" class="input font-mono text-xs">
+                    <option v-for="adapter in adapters" :key="adapter.id" :value="adapter.id">{{ adapter.id }} - {{ adapter.name || adapter.id }}</option>
+                  </select>
+                </label>
+                <label class="flex items-center gap-2 py-2 text-sm">
+                  <input type="checkbox" v-model="profileForm.enabled" />
+                  {{ t("enabled") }}
+                  <span class="help-dot" :title="t('enabledHelp')" tabindex="0">?</span>
+                </label>
+                <label class="grid gap-1 text-sm md:col-span-2">{{ t("baseUrl") }}
+                  <input v-model="profileForm.baseUrl" class="input font-mono text-xs" placeholder="https://api.anthropic.com" />
+                </label>
+                <label class="grid gap-1 text-sm">{{ t("apiKey") }}
+                  <input v-model="profileForm.apiKey" type="password" class="input font-mono text-xs" autocomplete="off" />
+                </label>
+                <label class="grid gap-1 text-sm">{{ t("apiKeyEnv") }}
+                  <input v-model="profileForm.apiKeyEnv" class="input font-mono text-xs" placeholder="ANTHROPIC_AUTH_TOKEN" />
+                </label>
+                <label class="grid gap-1 text-sm">{{ t("modelName") }}
+                  <input v-model="profileForm.model" class="input font-mono text-xs" placeholder="claude-haiku-4-5" />
+                </label>
+                <label class="grid gap-1 text-sm">
+                  <span class="field-label">{{ t("anthropicVersion") }} <span class="help-dot" :title="t('apiVersionHelp')" tabindex="0">?</span></span>
+                  <input v-model="profileForm.version" class="input font-mono text-xs" placeholder="2023-06-01" />
+                </label>
+                <label class="grid gap-1 text-sm">
+                  <span class="field-label">{{ t("temperature") }} <span class="help-dot" :title="t('temperatureHelp')" tabindex="0">?</span></span>
+                  <input v-model.number="profileForm.temperature" type="number" min="0" max="2" step="0.1" class="input" />
+                </label>
+                <label class="grid gap-1 text-sm">
+                  <span class="field-label">{{ t("maxTokens") }} <span class="help-dot" :title="t('maxTokensHelp')" tabindex="0">?</span></span>
+                  <input v-model.number="profileForm.maxTokens" type="number" min="1" step="1" class="input" />
+                </label>
+                <label class="grid gap-1 text-sm">{{ t("timeoutMs") }}
+                  <input v-model.number="profileForm.timeoutMs" type="number" min="1000" step="1000" class="input" />
+                </label>
+              </div>
+              <div class="mt-4 grid gap-3">
+                <label class="grid gap-1 text-sm">{{ t("testPrompt") }}
+                  <input v-model="testPrompt" class="input" />
+                </label>
+                <div class="flex flex-wrap gap-2">
+                  <button type="button" @click="testCurrentProfile" :disabled="testingProfile" class="btn-primary disabled:opacity-50">
+                    {{ testingProfile ? t("testing") : t("testModel") }}
+                  </button>
+                </div>
+                <pre v-if="testResult" class="max-h-56 overflow-auto rounded-xl bg-slate-950 p-4 text-xs text-slate-100 whitespace-pre-wrap">{{ testResult }}</pre>
+              </div>
+            </div>
+
             <label class="grid gap-1 text-sm">{{ t("rawProfiles") }}
-              <textarea v-model="aiProfilesText" rows="16" class="input font-mono text-xs"></textarea>
+              <textarea v-model="aiProfilesText" rows="10" class="input font-mono text-xs"></textarea>
             </label>
+            <div class="flex justify-end">
+              <button type="button" @click="saveAiProfiles" class="btn">{{ t("saveRawProfiles") }}</button>
+            </div>
             <div v-if="aiMessage" class="rounded-lg border p-3 text-sm panel2">{{ aiMessage }}</div>
           </div>
         </div>
@@ -323,9 +592,10 @@
           <h2 class="font-semibold">{{ t("projectProfile") }}</h2>
           <div v-if="selectedProject" class="mt-4 grid gap-3">
             <div class="text-sm muted">{{ selectedProject.displayName }}</div>
-            <label class="grid gap-1 text-sm">{{ t("defaultProfile") }}
+            <label class="grid gap-1 text-sm">
+            <span class="field-label">{{ t("defaultProfile") }} <span class="help-dot" :title="t('projectProfileHelp')" tabindex="0">?</span></span>
             <select v-model="selectedAiProfileId" class="input">
-              <option v-for="p in aiConfig.profiles" :key="p.id" :value="p.id">{{ p.id }}</option>
+              <option v-for="p in aiConfig.profiles" :key="p.id" :value="p.id" :disabled="p.enabled === false">{{ profileOptionLabel(p) }}</option>
             </select>
             </label>
             <label class="grid gap-1 text-sm">{{ t("knowledgeLanguage") }}
@@ -338,6 +608,42 @@
             <div class="text-xs muted">{{ t("availableAdapters") }}: {{ adapters.map(a => a.id).join(", ") || "-" }}</div>
           </div>
         </aside>
+        <div v-if="false && removeDialog.open" class="fixed inset-0 z-50 flex items-center justify-center bg-black/45 p-4">
+          <div class="panel w-full max-w-2xl rounded-xl border p-5 shadow-xl">
+            <div class="flex items-start justify-between gap-4">
+              <div>
+                <h2 class="text-lg font-semibold">{{ t("removeProject") }}</h2>
+                <div class="mt-1 text-sm muted">{{ removeDialog.preview.displayName || removeDialog.slug }} / {{ removeDialog.slug }}</div>
+              </div>
+              <button @click="closeRemoveProject" class="btn">×</button>
+            </div>
+            <div class="mt-4 grid gap-3 text-sm">
+              <div class="rounded-lg border p-3 panel2 break-all">
+                <div class="muted">{{ t("kbPath") }}</div>
+                <div class="mt-1 font-mono text-xs">{{ removeDialog.preview.kbPath || "-" }}</div>
+                <div class="mt-2 text-xs muted">{{ removeDialog.preview.fileCount || 0 }} {{ t("files") }} · {{ formatBytes(removeDialog.preview.kbSizeBytes || 0) }}</div>
+              </div>
+              <label class="flex items-center gap-2">
+                <input type="checkbox" v-model="removeDialog.deleteKb" />
+                <span>{{ t("deleteKbFiles") }}</span>
+              </label>
+              <label class="grid gap-1">
+                <span class="muted">{{ t("removeReason") }}</span>
+                <input v-model="removeDialog.reason" class="input" />
+              </label>
+              <label v-if="removeDialog.deleteKb" class="grid gap-1">
+                <span class="muted">{{ t("typeSlugToConfirm") }}</span>
+                <input v-model="removeDialog.confirmText" class="input font-mono" />
+              </label>
+              <div v-if="removeDialog.error" class="rounded-lg border border-red-500/25 bg-red-500/10 p-3 text-sm" style="color: var(--bad)">{{ removeDialog.error }}</div>
+              <div v-if="removeDialog.preview.hasRunningJobs" class="rounded-lg border border-amber-500/25 bg-amber-500/10 p-3 text-sm" style="color: var(--warn)">{{ t("projectHasRunningJobs") }}</div>
+            </div>
+            <div class="mt-5 flex justify-end gap-2">
+              <button @click="closeRemoveProject" class="btn">{{ t("cancel") }}</button>
+              <button @click="confirmRemoveProject" :disabled="removeProjectDisabled" class="btn-danger">{{ removeDialog.deleteKb ? t("deleteProjectAndKb") : t("unregisterProject") }}</button>
+            </div>
+          </div>
+        </div>
       </section>
 
       <section v-else-if="activeView === 'runs'" class="grid gap-5 xl:grid-cols-[360px_minmax(0,1fr)]">
@@ -365,27 +671,34 @@
               </div>
               <div class="flex flex-wrap gap-2">
                 <button @click="loadRunDetail(selectedSlug, selectedRun.runId)" class="btn">{{ t("refreshRun") }}</button>
-                <button @click="applySelectedDrafts" class="btn-primary">{{ t("applySelected") }}</button>
+                <button @click="applySelectedDrafts" class="btn-primary">{{ applyDraftButtonLabel }}</button>
                 <button @click="rejectRun" class="btn-danger">{{ t("rejectRun") }}</button>
               </div>
             </div>
 
-            <div class="mt-4 flex items-center gap-3 text-sm">
+            <div class="mt-4 flex flex-wrap items-center gap-3 text-sm">
               <label class="flex items-center gap-2"><input type="checkbox" v-model="allowGoalEdit" /> {{ t("allowGoalEdit") }}</label>
-              <span class="muted">{{ drafts.length }} {{ t("draftFiles") }}</span>
+              <select v-model="draftBranchFilter" class="input py-2 text-sm">
+                <option value="">{{ t("allBranches") }}</option>
+                <option v-for="b in draftBranches" :key="b" :value="b">{{ b }}</option>
+              </select>
+              <span class="muted">{{ filteredDrafts.length }} / {{ drafts.length }} {{ t("draftFiles") }}</span>
             </div>
 
             <div class="mt-4 grid gap-4 xl:grid-cols-[320px_1fr]">
               <div class="space-y-2">
-                <label v-for="d in drafts" :key="d.path" class="flex cursor-pointer items-center justify-between gap-3 rounded-lg border p-3 text-sm panel2">
-                  <span class="truncate">{{ d.path }}</span>
+                <label v-for="d in filteredDrafts" :key="d.path" class="flex cursor-pointer items-center justify-between gap-3 rounded-lg border p-3 text-sm panel2">
+                  <span class="min-w-0">
+                    <span class="block truncate">{{ d.path }}</span>
+                    <span class="chip mt-1">{{ d.sourceBranch || t("unknownBranch") }}</span>
+                  </span>
                   <input type="checkbox" v-model="draftSelection[d.path]" />
                 </label>
               </div>
               <div>
                 <select v-model="previewDraftPath" @change="loadDraftPreview" class="input mb-3 w-full">
                   <option value="">{{ t("selectDraftPreview") }}</option>
-                  <option v-for="d in drafts" :key="d.path" :value="d.path">{{ d.path }}</option>
+                  <option v-for="d in filteredDrafts" :key="d.path" :value="d.path">{{ d.path }}</option>
                 </select>
                 <pre class="max-h-[62vh] overflow-auto rounded-xl bg-slate-950 p-4 text-xs text-slate-100 scrollbar-thin whitespace-pre-wrap">{{ draftPreview || t("noPreview") }}</pre>
               </div>
@@ -439,38 +752,184 @@
         </div>
       </section>
 
-      <section v-else-if="activeView === 'logs'" class="grid gap-5 xl:grid-cols-[360px_minmax(0,1fr)]">
-        <aside class="panel rounded-xl border p-5">
-          <div class="mb-3 flex items-center justify-between">
-            <h2 class="font-semibold">{{ t("jobHistory") }}</h2>
-            <button @click="loadJobs" class="btn">{{ t("reload") }}</button>
-          </div>
-          <div class="space-y-2">
-            <button v-for="job in jobHistory" :key="job.jobId" @click="loadJobDetail(job.jobId)"
-              class="w-full rounded-lg border p-3 text-left text-sm panel2">
-              <div class="font-medium">{{ job.mode }} / {{ job.status }}</div>
-              <div class="mt-1 truncate text-xs muted">{{ job.slug }} / {{ job.jobId }}</div>
-            </button>
-          </div>
-        </aside>
+      <section v-else-if="activeView === 'logs'" class="grid gap-5">
         <section class="panel rounded-xl border p-5">
-          <div class="mb-4 flex items-center justify-between">
+          <div class="mb-4 flex flex-col gap-3 xl:flex-row xl:items-end xl:justify-between">
             <div>
-              <h2 class="text-lg font-semibold">{{ t("logOutput") }}</h2>
-              <div class="mt-1 text-sm muted">{{ logTitle }}</div>
+              <h2 class="text-lg font-semibold">{{ t("logs") }}</h2>
+              <div class="mt-1 text-sm muted">{{ loggingConfig.rootPath || "-" }}</div>
+            </div>
+            <div class="grid gap-2 md:grid-cols-5 xl:min-w-[760px]">
+              <input v-model="logFilters.dateFrom" type="date" class="input text-sm" />
+              <select v-model="logFilters.level" class="input text-sm">
+                <option value="all">{{ t("allLevels") }}</option>
+                <option value="info">info</option>
+                <option value="warn">warn</option>
+                <option value="error">error</option>
+              </select>
+              <select v-model="logFilters.projectSlug" class="input text-sm">
+                <option value="all">{{ t("allProjects") }}</option>
+                <option v-for="p in projectList" :key="p.slug" :value="p.slug">{{ p.slug }}</option>
+              </select>
+              <input v-model="logFilters.q" class="input text-sm" :placeholder="t('searchLogs')" />
+              <button @click="loadStructuredLogs" class="btn">{{ t("search") }}</button>
             </div>
-            <button @click="refreshAll" class="btn">{{ t("refresh") }}</button>
           </div>
-          <pre class="max-h-[72vh] overflow-auto rounded-xl bg-slate-950 p-4 text-xs text-slate-100 scrollbar-thin whitespace-pre-wrap">{{ logOutput || t("noOutput") }}</pre>
+          <div class="overflow-auto rounded-lg border line">
+            <table class="w-full text-left text-sm">
+              <thead class="panel2 muted">
+                <tr>
+                  <th class="px-3 py-2">{{ t("time") }}</th>
+                  <th class="px-3 py-2">Level</th>
+                  <th class="px-3 py-2">{{ t("project") }}</th>
+                  <th class="px-3 py-2">Source</th>
+                  <th class="px-3 py-2">{{ t("message") }}</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="log in structuredLogs" :key="log.ts + log.event + log.message" @click="selectedLog = log"
+                  class="cursor-pointer border-t line hover:brightness-[0.98]">
+                  <td class="px-3 py-2 whitespace-nowrap text-xs">{{ formatTime(log.ts) }}</td>
+                  <td class="px-3 py-2"><span :class="['chip', log.level === 'error' ? 'text-red-500' : log.level === 'warn' ? 'text-amber-600' : '']">{{ log.level }}</span></td>
+                  <td class="px-3 py-2">{{ log.projectSlug || "-" }}</td>
+                  <td class="px-3 py-2">{{ log.source || "-" }}</td>
+                  <td class="px-3 py-2">{{ log.message }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div v-if="!structuredLogs.length" class="mt-4 rounded-lg border p-3 text-sm panel2">{{ t("noOutput") }}</div>
         </section>
+        <section v-if="selectedLog" class="panel rounded-xl border p-5">
+          <h3 class="font-semibold">{{ t("logDetail") }}</h3>
+          <pre class="mt-3 max-h-[42vh] overflow-auto rounded-xl bg-slate-950 p-4 text-xs text-slate-100 scrollbar-thin whitespace-pre-wrap">{{ JSON.stringify(selectedLog, null, 2) }}</pre>
+        </section>
+      </section>
+
+      <section v-else-if="activeView === 'settings'" class="grid gap-5 xl:grid-cols-2">
+        <div class="panel rounded-xl border p-5">
+          <h2 class="text-lg font-semibold">{{ t("knowledgeStoreSettings") }}</h2>
+          <div class="mt-4 grid gap-3">
+            <label class="grid gap-1 text-sm">{{ t("knowledgeStoreRoot") }}
+              <input v-model="knowledgeStoreConfig.rootPath" class="input font-mono text-xs" />
+            </label>
+            <label class="grid gap-1 text-sm">{{ t("remote") }}
+              <input v-model="knowledgeStoreConfig.git.remoteUrl" class="input font-mono text-xs" />
+            </label>
+            <label class="grid gap-1 text-sm">{{ t("branch") }}
+              <input v-model="knowledgeStoreConfig.git.branch" class="input font-mono text-xs" />
+            </label>
+            <div class="flex flex-wrap gap-2">
+              <button @click="saveKnowledgeStoreConfig" class="btn-primary">{{ t("save") }}</button>
+              <button @click="previewKnowledgeMigration" class="btn">{{ t("previewMigration") }}</button>
+              <button @click="executeKnowledgeMigration" class="btn">{{ t("executeMigration") }}</button>
+            </div>
+            <pre v-if="knowledgeMigrationPlan.length" class="max-h-64 overflow-auto rounded-xl bg-slate-950 p-3 text-xs text-slate-100">{{ JSON.stringify(knowledgeMigrationPlan, null, 2) }}</pre>
+          </div>
+        </div>
+        <div class="panel rounded-xl border p-5">
+          <h2 class="text-lg font-semibold">{{ t("loggingSettings") }}</h2>
+          <div class="mt-4 grid gap-3">
+            <label class="grid gap-1 text-sm">{{ t("logDirectory") }}
+              <input v-model="loggingConfig.rootPath" class="input font-mono text-xs" />
+            </label>
+            <label class="grid gap-1 text-sm">{{ t("retentionDays") }}
+              <input v-model.number="loggingConfig.retentionDays" type="number" min="1" class="input" />
+            </label>
+            <div class="flex flex-wrap gap-3 text-sm">
+              <label class="flex items-center gap-2"><input type="checkbox" value="info" v-model="loggingConfig.levels" /> info</label>
+              <label class="flex items-center gap-2"><input type="checkbox" value="warn" v-model="loggingConfig.levels" /> warn</label>
+              <label class="flex items-center gap-2"><input type="checkbox" value="error" v-model="loggingConfig.levels" /> error</label>
+            </div>
+            <button @click="saveLoggingConfig" class="btn-primary">{{ t("save") }}</button>
+          </div>
+        </div>
+      </section>
+
+      <section v-else-if="activeView === 'prompts'" class="grid gap-5">
+        <div class="panel rounded-xl border p-5">
+          <div class="mb-3 flex items-center justify-between">
+            <h2 class="text-lg font-semibold">{{ t("promptsConfig") }}</h2>
+            <div class="flex gap-2">
+              <button @click="loadPrompts" class="btn">{{ t("reload") }}</button>
+              <button @click="savePrompts" :disabled="promptsSaving" class="btn-primary">{{ promptsSaving ? t("saving") : t("save") }}</button>
+              <button @click="activeView = 'dashboard'" class="btn">{{ t("back") }}</button>
+            </div>
+          </div>
+          <p class="text-sm muted mb-4">Each entry controls how Claude is prompted for a step (initial analysis, commit batch, etc.). Use <code v-pre class="font-mono text-xs">{{SLUG}}</code>, <code v-pre class="font-mono text-xs">{{PROJECT_PATH}}</code>, <code v-pre class="font-mono text-xs">{{PRIMARY_LANGUAGE}}</code>, <code v-pre class="font-mono text-xs">{{KNOWLEDGE_LANGUAGE}}</code> placeholders.</p>
+          <div v-if="promptsError" class="mb-3 rounded-lg border px-3 py-2 text-sm" style="border-color: var(--bad); color: var(--bad)">{{ promptsError }}</div>
+          <div v-if="promptsSaved" class="mb-3 rounded-lg border px-3 py-2 text-sm" style="border-color: var(--good); color: var(--good)">saved.</div>
+          <div v-if="promptsConfig" class="space-y-5">
+            <div v-for="key in Object.keys(promptsConfig.prompts || {})" :key="key" class="rounded-lg border p-4 panel2">
+              <div class="mb-2 font-mono text-sm font-semibold">{{ key }}</div>
+              <div class="grid gap-2">
+                <label class="grid gap-1 text-xs">description
+                  <input v-model="promptsConfig.prompts[key].description" class="input font-mono text-xs" />
+                </label>
+                <label class="grid gap-1 text-xs">model
+                  <input v-model="promptsConfig.prompts[key].model" class="input font-mono text-xs" placeholder="sonnet" />
+                </label>
+                <label class="grid gap-1 text-xs">allowedTools (comma-separated)
+                  <input :value="(promptsConfig.prompts[key].allowedTools || []).join(', ')"
+                         @input="promptsConfig.prompts[key].allowedTools = $event.target.value.split(',').map(s=>s.trim()).filter(Boolean)"
+                         class="input font-mono text-xs" />
+                </label>
+                <label class="grid gap-1 text-xs">systemPrompt
+                  <textarea v-model="promptsConfig.prompts[key].systemPrompt" rows="6" class="input font-mono text-xs"></textarea>
+                </label>
+                <label class="grid gap-1 text-xs">userPrompt
+                  <textarea v-model="promptsConfig.prompts[key].userPrompt" rows="8" class="input font-mono text-xs"></textarea>
+                </label>
+              </div>
+            </div>
+          </div>
+          <div v-else class="text-sm muted">loading…</div>
+        </div>
       </section>
+
+      <div v-if="removeDialog.open" class="fixed inset-0 z-50 flex items-center justify-center bg-black/45 p-4">
+        <div class="panel w-full max-w-2xl rounded-xl border p-5 shadow-xl">
+          <div class="flex items-start justify-between gap-4">
+            <div>
+              <h2 class="text-lg font-semibold">{{ t("removeProject") }}</h2>
+              <div class="mt-1 text-sm muted">{{ removeDialog.preview.displayName || removeDialog.slug }} / {{ removeDialog.slug }}</div>
+            </div>
+            <button @click="closeRemoveProject" class="btn">×</button>
+          </div>
+          <div class="mt-4 grid gap-3 text-sm">
+            <div class="rounded-lg border p-3 panel2 break-all">
+              <div class="muted">{{ t("kbPath") }}</div>
+              <div class="mt-1 font-mono text-xs">{{ removeDialog.preview.kbPath || "-" }}</div>
+              <div class="mt-2 text-xs muted">{{ removeDialog.preview.fileCount || 0 }} {{ t("files") }} · {{ formatBytes(removeDialog.preview.kbSizeBytes || 0) }}</div>
+            </div>
+            <label class="flex items-center gap-2">
+              <input type="checkbox" v-model="removeDialog.deleteKb" />
+              <span>{{ t("deleteKbFiles") }}</span>
+            </label>
+            <label class="grid gap-1">
+              <span class="muted">{{ t("removeReason") }}</span>
+              <input v-model="removeDialog.reason" class="input" />
+            </label>
+            <label v-if="removeDialog.deleteKb" class="grid gap-1">
+              <span class="muted">{{ t("typeSlugToConfirm") }}</span>
+              <input v-model="removeDialog.confirmText" class="input font-mono" />
+            </label>
+            <div v-if="removeDialog.error" class="rounded-lg border border-red-500/25 bg-red-500/10 p-3 text-sm" style="color: var(--bad)">{{ removeDialog.error }}</div>
+            <div v-if="removeDialog.preview.hasRunningJobs" class="rounded-lg border border-amber-500/25 bg-amber-500/10 p-3 text-sm" style="color: var(--warn)">{{ t("projectHasRunningJobs") }}</div>
+          </div>
+          <div class="mt-5 flex justify-end gap-2">
+            <button @click="closeRemoveProject" class="btn">{{ t("cancel") }}</button>
+            <button @click="confirmRemoveProject" :disabled="removeProjectDisabled" class="btn-danger disabled:opacity-50">{{ removeDialog.deleteKb ? t("deleteProjectAndKb") : t("unregisterProject") }}</button>
+          </div>
+        </div>
+      </div>
     </main>
-    </div>
   </div>
 </div>
+</div>
 
 <script>
-const { createApp, reactive, ref, computed, onMounted, onUnmounted, watch } = Vue;
+const { createApp, reactive, ref, computed, onMounted, onUnmounted, watch, nextTick } = Vue;
 
 const I18N = {
   en: {
@@ -484,6 +943,7 @@ const I18N = {
     runsDrafts: "Runs / Drafts",
     schedule: "Schedule",
     logs: "Logs",
+    settings: "Settings",
     consoleSubtitle: "Backend-driven project supervision console",
     refreshing: "refreshing",
     refresh: "Refresh",
@@ -495,6 +955,13 @@ const I18N = {
     validateGit: "Validate Git",
     scan: "Scan",
     safeAnalyze: "Safe Analyze",
+    runKnowledgeUpdate: "Run Knowledge Update",
+    editProjectGoal: "Edit Project Goal",
+    showAdvanced: "Show advanced diagnostics",
+    hideAdvanced: "Hide advanced diagnostics",
+    knowledgeUpdateRunning: "Knowledge update is running...",
+    knowledgeUpdateDone: "Knowledge update completed.",
+    knowledgeUpdateReviewRequired: "Review required",
     repo: "Repo",
     pending: "Pending",
     goal: "Goal",
@@ -502,6 +969,17 @@ const I18N = {
     projectOperations: "Project Operations",
     initKb: "Init KB",
     migrateV2: "Migrate v2",
+    migrateV3: "Migrate v3",
+    removeProject: "Remove Project",
+    unregisterProject: "Unregister Project",
+    deleteProjectAndKb: "Delete Project and KB",
+    deleteKbFiles: "Also delete KB files",
+    removeReason: "Reason",
+    typeSlugToConfirm: "Type the project slug to confirm deletion",
+    projectHasRunningJobs: "This project has a running job and cannot be removed now.",
+    kbPath: "KB path",
+    files: "files",
+    cancel: "Cancel",
     runScanJob: "Run scan job",
     initialAnalysis: "Initial analysis",
     commitAnalysis: "Commit analysis",
@@ -525,6 +1003,42 @@ const I18N = {
     runningJobs: "Running Jobs",
     noRunningJob: "No running job.",
     lastResult: "Last Result",
+    claudeTerminal: "Claude Terminal",
+    claudeWorkbench: "Claude Workbench",
+    restoreSession: "Restore",
+    continuity: "Context",
+    permissionStatus: "Permission",
+    recoveryStatus: "Recovery",
+    pendingReview: "pending",
+    approvedStatus: "ready",
+    recoverable: "available",
+    permissionRequired: "Permission required",
+    approve: "Allow",
+    deny: "Deny",
+    permissionApproved: "Permission approved",
+    permissionDenied: "Permission denied",
+    permissionTurn: "Turn",
+    permissionMode: "Mode",
+    permissionTools: "Tools",
+    permissionCwd: "Working dir",
+    terminalNeedPermission: "Waiting for permission approval.",
+    sessionRecovered: "session restored",
+    noRestorableSession: "No previous Claude session for this project.",
+    analyze: "Analyze",
+    stop: "Stop",
+    clear: "Clear",
+    editPrompts: "Edit Prompts",
+    send: "Send",
+    claudeHasWriteAccess: "Claude has read/write access to this project's source tree.",
+    terminalEmpty: "Click Analyze to start a Claude Code session for the selected project.",
+    terminalNeedSession: "Start an analysis first.",
+    terminalWaitInit: "Waiting for Claude session to initialize…",
+    terminalBusy: "Claude is running, wait for the current turn to finish.",
+    terminalInputPlaceholder: "Type follow-up prompt, then press Enter…",
+    thinking: "Thinking...",
+    toolRunning: "running",
+    systemPromptLoaded: "System prompt loaded.",
+    promptsConfig: "Prompt Config",
     saving: "Saving",
     save: "Save",
     reset: "Reset",
@@ -538,13 +1052,56 @@ const I18N = {
     initKbDirs: "Init KB directories",
     importHelp: "The backend will persist the project, initialize KB files, and auto-validate Git on upsert.",
     importTarget: "Import target",
+    gitImportPreflight: "Git preflight",
+    gitImportPreflightHelp: "Check whether the selected path is already a Git repository before import.",
+    check: "Check",
+    needsGitInit: "This path is not a Git repository. You can initialize local Git during import.",
+    initLocalGit: "Initialize local Git repository",
+    createInitialCommit: "Create initial commit",
+    existingRemoteUrl: "Existing remote URL",
     kbPath: "KB path",
     schemaNormalized: "Schema fields are normalized by the backend.",
     gitPopulate: "Git validation will populate repoStatus, branch, remote and HEAD commit.",
     backedByAi: "Backed by /api/ai-profiles and project settings.",
     defaultProfile: "Default profile",
+    defaultProfileHelp: "Fallback AI profile for new projects or projects without an explicit selection. Disabled profiles cannot be default.",
     rawProfiles: "Raw ai-profiles.json",
+    profileEditor: "Profile editor",
+    profileId: "Profile",
+    profileIdHelp: "Choose which saved AI profile to edit.",
+    profileName: "Profile name",
+    enabled: "Enabled",
+    enabledStatus: "enabled",
+    disabledStatus: "disabled",
+    enabledHelp: "Disabled profiles can be edited and tested, but cannot run project analyses.",
+    defaultProfileDisabledError: "Default profile cannot be disabled.",
+    profileIdPrompt: "Profile ID, for example minimax-m3, glm-4, or gpt-4.1",
+    duplicateProfileError: "Profile ID already exists.",
+    deleteDefaultProfileError: "Default profile cannot be deleted.",
+    deleteProfileConfirm: "Delete this AI profile?",
+    implementation: "Implementation",
+    implementationHelp: "Backend adapter type. claude-code-agent calls an Anthropic-compatible Messages API.",
+    baseUrl: "Base URL",
+    apiKey: "API key",
+    apiKeyEnv: "API key env",
+    modelName: "Model name",
+    anthropicVersion: "API version",
+    apiVersionHelp: "Value sent as the anthropic-version header. Keep 2023-06-01 for most Anthropic-compatible endpoints.",
+    temperature: "Temperature",
+    temperatureHelp: "Sampling randomness. 0 is steadier; higher values are more creative but less stable.",
+    maxTokens: "Max tokens",
+    maxTokensHelp: "Maximum tokens the model may generate in one response.",
+    timeoutMs: "Timeout (ms)",
+    saveProfileForm: "Save profile",
+    addProfile: "Add profile",
+    deleteProfile: "Delete profile",
+    saveRawProfiles: "Save raw JSON",
+    testModel: "Test model",
+    testPrompt: "Test prompt",
+    testResult: "Test result",
+    testing: "Testing",
     projectProfile: "Project profile",
+    projectProfileHelp: "AI profile used by this selected project for initial and commit analysis.",
     assignProject: "Save project settings",
     availableAdapters: "Available adapters",
     knowledgeLanguage: "Knowledge output language",
@@ -552,11 +1109,14 @@ const I18N = {
     chinese: "Chinese",
     english: "English",
     reload: "Reload",
+    back: "Back",
     selectRun: "Select a run to review drafts.",
     refreshRun: "Refresh run",
     applySelected: "Apply selected",
     rejectRun: "Reject run",
-    allowGoalEdit: "allow project-goal.md edit",
+    allowGoalEdit: "allow GOAL / architecture edits",
+    allBranches: "All branches",
+    unknownBranch: "unknown",
     draftFiles: "draft files",
     selectDraftPreview: "Select draft preview",
     noPreview: "(no preview)",
@@ -582,6 +1142,25 @@ const I18N = {
     failedOrPartialJobs: "failed or partial jobs",
     recentIssues: "Recent issues",
     pendingCommits: "Pending commits",
+    pendingCommitDetails: "Pending commit details",
+    pendingCommitDetailsHelp: "Commits waiting to be analyzed into the project knowledge base.",
+    issueCenter: "Issue center",
+    issueCenterHelp: "Warnings and errors that may require manual intervention.",
+    subject: "Subject",
+    project: "Project",
+    message: "Message",
+    allLevels: "All levels",
+    allProjects: "All projects",
+    searchLogs: "Search logs",
+    search: "Search",
+    logDetail: "Log detail",
+    knowledgeStoreSettings: "Knowledge Store",
+    knowledgeStoreRoot: "Knowledge store root",
+    loggingSettings: "Logging",
+    logDirectory: "Log directory",
+    retentionDays: "Retention days",
+    previewMigration: "Preview migration",
+    executeMigration: "Execute migration",
   },
   zh: {
     appName: "AI 知识库",
@@ -612,6 +1191,16 @@ const I18N = {
     projectOperations: "项目操作",
     initKb: "初始化知识库",
     migrateV2: "迁移 v2",
+    migrateV3: "迁移 v3",
+    removeProject: "移除项目",
+    unregisterProject: "仅移除项目",
+    deleteProjectAndKb: "删除项目和知识库",
+    deleteKbFiles: "同时删除知识库文件",
+    removeReason: "移除原因",
+    typeSlugToConfirm: "输入项目标识确认删除",
+    projectHasRunningJobs: "当前项目有运行中的任务，暂时不能移除。",
+    files: "个文件",
+    cancel: "取消",
     runScanJob: "运行扫描任务",
     initialAnalysis: "整体分析",
     commitAnalysis: "提交分析",
@@ -635,6 +1224,42 @@ const I18N = {
     runningJobs: "运行中的任务",
     noRunningJob: "当前没有运行中的任务。",
     lastResult: "最近结果",
+    claudeTerminal: "Claude 终端",
+    claudeWorkbench: "Claude 工作台",
+    restoreSession: "恢复",
+    continuity: "上下文",
+    permissionStatus: "权限",
+    recoveryStatus: "恢复",
+    pendingReview: "待确认",
+    approvedStatus: "就绪",
+    recoverable: "可恢复",
+    permissionRequired: "需要授权",
+    approve: "允许",
+    deny: "拒绝",
+    permissionApproved: "已允许执行",
+    permissionDenied: "已拒绝执行",
+    permissionTurn: "轮次",
+    permissionMode: "模式",
+    permissionTools: "工具",
+    permissionCwd: "工作目录",
+    terminalNeedPermission: "等待权限确认。",
+    sessionRecovered: "会话已恢复",
+    noRestorableSession: "当前项目没有可恢复的 Claude 会话。",
+    analyze: "分析",
+    stop: "停止",
+    clear: "清屏",
+    editPrompts: "编辑提示词",
+    send: "发送",
+    claudeHasWriteAccess: "Claude 对当前项目源码有读写权限。",
+    terminalEmpty: "点击「分析」为选中项目启动一个 Claude Code 会话。",
+    terminalNeedSession: "请先开始分析。",
+    terminalWaitInit: "等待 Claude 会话初始化…",
+    terminalBusy: "Claude 正在运行，请等待当前轮次结束。",
+    terminalInputPlaceholder: "输入补充提示词，回车发送…",
+    thinking: "思考中...",
+    toolRunning: "运行中",
+    systemPromptLoaded: "系统提示词已加载。",
+    promptsConfig: "提示词配置",
     saving: "保存中",
     save: "保存",
     reset: "重置",
@@ -653,8 +1278,44 @@ const I18N = {
     gitPopulate: "Git 校验会写入 repoStatus、分支、远端和 HEAD commit。",
     backedByAi: "由 /api/ai-profiles 和项目级设置驱动。",
     defaultProfile: "默认模型配置",
+    defaultProfileHelp: "新项目或未单独指定模型的项目会使用它。禁用的配置不能设为默认。",
     rawProfiles: "原始 ai-profiles.json",
+    profileEditor: "模型配置编辑",
+    profileId: "配置项",
+    profileIdHelp: "选择当前要编辑的那一条模型配置。",
+    profileName: "配置名称",
+    enabled: "启用",
+    enabledStatus: "已启用",
+    disabledStatus: "已禁用",
+    enabledHelp: "禁用后仍可编辑和测试，但不能用于项目整体分析或提交分析。",
+    defaultProfileDisabledError: "默认模型配置不能是禁用状态。",
+    profileIdPrompt: "配置 ID，例如 minimax-m3、glm-4、gpt-4.1",
+    duplicateProfileError: "配置 ID 已存在。",
+    deleteDefaultProfileError: "默认模型配置不能删除。",
+    deleteProfileConfirm: "确定删除这个 AI 配置吗？",
+    implementation: "实现类型",
+    implementationHelp: "后端适配器类型。claude-code-agent 表示调用 Anthropic-compatible Messages API。",
+    baseUrl: "Base 地址",
+    apiKey: "API Key",
+    apiKeyEnv: "API Key 环境变量",
+    modelName: "模型名称",
+    anthropicVersion: "API 版本",
+    apiVersionHelp: "作为 anthropic-version 请求头发送。大多数兼容接口保持 2023-06-01 即可。",
+    temperature: "Temperature",
+    temperatureHelp: "控制输出随机性。0 更稳定，数值越高越发散。",
+    maxTokens: "最大 tokens",
+    maxTokensHelp: "限制模型单次最多生成多少 token。",
+    timeoutMs: "超时时间（毫秒）",
+    saveProfileForm: "保存模型配置",
+    addProfile: "新增配置",
+    deleteProfile: "删除配置",
+    saveRawProfiles: "保存原始 JSON",
+    testModel: "测试模型",
+    testPrompt: "测试提示词",
+    testResult: "测试结果",
+    testing: "测试中",
     projectProfile: "项目模型配置",
+    projectProfileHelp: "当前选中项目执行整体分析、提交分析时使用的模型配置。",
     assignProject: "保存项目设置",
     availableAdapters: "可用适配器",
     knowledgeLanguage: "知识库输出语言",
@@ -662,11 +1323,14 @@ const I18N = {
     chinese: "中文",
     english: "英文",
     reload: "重新加载",
+    back: "返回",
     selectRun: "选择一次运行来审核草稿。",
     refreshRun: "刷新运行",
     applySelected: "应用选中草稿",
     rejectRun: "拒绝运行",
-    allowGoalEdit: "允许修改 project-goal.md",
+    allowGoalEdit: "允许修改 GOAL / 架构",
+    allBranches: "全部分支",
+    unknownBranch: "未知分支",
     draftFiles: "个草稿文件",
     selectDraftPreview: "选择草稿预览",
     noPreview: "（暂无预览）",
@@ -695,6 +1359,43 @@ const I18N = {
   },
 };
 
+Object.assign(I18N.zh, {
+  settings: "设置",
+  pendingCommitDetails: "待分析提交明细",
+  pendingCommitDetailsHelp: "等待被分析并写入项目知识库的 Git 提交。",
+  issueCenter: "异常中心",
+  issueCenterHelp: "可能需要人工介入的警告和错误。",
+  subject: "主题",
+  project: "项目",
+  message: "消息",
+  allLevels: "全部级别",
+  allProjects: "全部项目",
+  searchLogs: "搜索日志",
+  search: "搜索",
+  logDetail: "日志详情",
+  knowledgeStoreSettings: "知识库存储",
+  knowledgeStoreRoot: "知识库根目录",
+  loggingSettings: "日志设置",
+  logDirectory: "日志目录",
+  retentionDays: "保留天数",
+  previewMigration: "预览迁移",
+  executeMigration: "执行迁移",
+  runKnowledgeUpdate: "运行知识库更新",
+  editProjectGoal: "编辑项目目标",
+  showAdvanced: "显示高级诊断",
+  hideAdvanced: "隐藏高级诊断",
+  knowledgeUpdateRunning: "知识库更新正在运行...",
+  knowledgeUpdateDone: "知识库更新完成。",
+  knowledgeUpdateReviewRequired: "需要人工审核",
+  gitImportPreflight: "Git 导入预检",
+  gitImportPreflightHelp: "导入前检查所选路径是否已经是 Git 仓库。",
+  check: "检查",
+  needsGitInit: "该路径还不是 Git 仓库，可以在导入时初始化本地 Git。",
+  initLocalGit: "初始化本地 Git 仓库",
+  createInitialCommit: "创建初始提交",
+  existingRemoteUrl: "已有远程仓库地址",
+});
+
 const StatusCard = {
   props: ["label", "value", "status"],
   template: `
@@ -718,6 +1419,15 @@ createApp({
     const runningJobs = ref([]);
     const jobHistory = ref([]);
     const selectedJob = ref(null);
+    const summaryPanel = ref("");
+    const pendingCommitItems = ref([]);
+    const supervisionIssues = ref([]);
+    const structuredLogs = ref([]);
+    const selectedLog = ref(null);
+    const logFilters = reactive({ dateFrom: new Date().toISOString().slice(0, 10), level: "all", projectSlug: "all", source: "all", q: "" });
+    const knowledgeStoreConfig = reactive({ schema: "knowledge-store/v1", rootPath: "", git: { enabled: false, remoteUrl: "", branch: "main", autoCommit: false, autoPush: false } });
+    const knowledgeMigrationPlan = ref([]);
+    const loggingConfig = reactive({ schema: "logging/v1", rootPath: "", retentionDays: 30, levels: ["info", "warn", "error"] });
     const loading = ref(false);
     const pollError = ref("");
     const activeView = ref("dashboard");
@@ -725,6 +1435,63 @@ createApp({
     const theme = ref(localStorage.getItem("kb-theme") || "light");
     const uiLanguage = ref(localStorage.getItem("kb-ui-language") || "zh");
 
+    // ---- Claude terminal state ----
+    const terminalLines = ref([]);
+    const terminalSessionId = ref(null);
+    const terminalSession = ref({ state: 'idle', model: null, aiProfileId: null, claudeSessionId: null, turns: 0 });
+    const terminalSessions = ref([]);
+    const terminalPermission = ref(null);
+    const terminalPermissionBusy = ref(false);
+    const terminalSystemPrompt = ref('');
+    const terminalInput = ref('');
+    const terminalScrollRef = ref(null);
+    let claudeEventSource = null;
+    // When assistant emits text deltas, accumulate into the last text-kind line so chunks
+    // render as continuous prose instead of N tiny lines.
+    let currentTextLineIdx = -1;
+    let currentThinkingLineIdx = -1;
+    let lastAssistantLineIdx = -1;
+    const currentToolLineById = new Map();
+
+    // ---- Prompts editor (Step 5) ----
+    const promptsConfig = ref(null);
+    const promptsSaving = ref(false);
+    const promptsError = ref('');
+    const promptsSaved = ref(false);
+
+    async function loadPrompts() {
+      promptsError.value = '';
+      try {
+        promptsConfig.value = await api("GET", "/api/prompts");
+      } catch (e) {
+        promptsError.value = e.message;
+      }
+    }
+    async function savePrompts() {
+      if (!promptsConfig.value) return;
+      promptsSaving.value = true;
+      promptsError.value = '';
+      promptsSaved.value = false;
+      try {
+        const r = await api("PUT", "/api/prompts", promptsConfig.value);
+        promptsSaved.value = true;
+        setTimeout(() => { promptsSaved.value = false; }, 2500);
+      } catch (e) {
+        promptsError.value = e.message;
+      } finally {
+        promptsSaving.value = false;
+      }
+    }
+    watch(() => activeView.value, (v) => {
+      if (v !== 'dashboard') summaryPanel.value = "";
+      if (v === 'prompts' && !promptsConfig.value) loadPrompts();
+      if (v === 'logs') loadStructuredLogs().catch(() => {});
+      if (v === 'settings') {
+        loadKnowledgeStoreConfig().catch(() => {});
+        loadLoggingConfig().catch(() => {});
+      }
+    });
+
     const runs = ref([]);
     const selectedRunId = ref("");
     const selectedRun = ref(null);
@@ -733,18 +1500,40 @@ createApp({
     const previewDraftPath = ref("");
     const draftPreview = ref("");
     const allowGoalEdit = ref(false);
+    const draftBranchFilter = ref("");
+    const removeDialog = reactive({ open: false, slug: "", preview: {}, deleteKb: false, reason: "", confirmText: "", error: "", busy: false });
 
     const aiConfig = reactive({ schema: "ai-profiles/v1", defaultProfileId: "mock-agent", profiles: [] });
     const aiProfilesText = ref("");
     const adapters = ref([]);
     const aiMessage = ref("");
+    const selectedConfigProfileId = ref("claude-code-agent");
+    const profileForm = reactive({
+      id: "",
+      name: "",
+      enabled: false,
+      implementation: "",
+      baseUrl: "",
+      apiKey: "",
+      apiKeyEnv: "",
+      model: "",
+      version: "2023-06-01",
+      temperature: 0.2,
+      maxTokens: 4096,
+      timeoutMs: 300000,
+    });
+    const testPrompt = ref("what model are you?");
+    const testResult = ref("");
+    const testingProfile = ref(false);
     const selectedAiProfileId = ref("mock-agent");
     const selectedKnowledgeLanguage = ref("zh-CN");
 
     const hookStatus = reactive({ installed: false, path: "", message: "" });
     const actionMessage = ref("");
+    const advancedOpen = ref(false);
+    const importPreflight = ref(null);
 
-    const form = reactive({ slug: "", displayName: "", localPath: "", gitPath: "", primaryLanguage: "", tagsStr: "", isReference: false, initNow: true, knowledgeLanguage: "zh-CN" });
+    const form = reactive({ slug: "", displayName: "", localPath: "", gitPath: "", primaryLanguage: "", tagsStr: "", isReference: false, initNow: true, initGit: false, createInitialCommit: false, remoteUrl: "", knowledgeLanguage: "zh-CN" });
     const submitting = ref(false);
     const formError = ref("");
     const formOk = ref("");
@@ -755,6 +1544,26 @@ createApp({
 
     const projectList = computed(() => Object.entries(projects.value || {}).map(([slug, cfg]) => ({ slug, cfg })));
     const selectedProject = computed(() => selectedSlug.value && projects.value ? projects.value[selectedSlug.value] : null);
+    const issuesByProject = computed(() => {
+      const map = new Map();
+      for (const issue of supervisionIssues.value || []) {
+        const slug = issue.projectSlug || "system";
+        if (!map.has(slug)) map.set(slug, { slug, displayName: slug === "system" ? "System" : ((projects.value && projects.value[slug] && projects.value[slug].displayName) || slug), issues: [] });
+        map.get(slug).issues.push(issue);
+      }
+      return [...map.values()].map(group => {
+        const hasError = group.issues.some(i => i.level === "error");
+        const hasWarn = group.issues.some(i => i.level === "warn");
+        return { ...group, hasWarnOrError: hasError || hasWarn, levelClass: hasError ? "bad" : hasWarn ? "warn" : "idle" };
+      });
+    });
+    const draftBranches = computed(() => [...new Set((drafts.value || []).map(d => d.sourceBranch || t("unknownBranch")))].sort());
+    const filteredDrafts = computed(() => {
+      if (!draftBranchFilter.value) return drafts.value || [];
+      return (drafts.value || []).filter(d => (d.sourceBranch || t("unknownBranch")) === draftBranchFilter.value);
+    });
+    const applyDraftButtonLabel = computed(() => draftBranchFilter.value ? `${t("applySelected")} · ${draftBranchFilter.value}` : t("applySelected"));
+    const removeProjectDisabled = computed(() => removeDialog.busy || removeDialog.preview.hasRunningJobs || (removeDialog.deleteKb && removeDialog.confirmText !== removeDialog.slug));
     function t(key) {
       return (I18N[uiLanguage.value] && I18N[uiLanguage.value][key]) || I18N.en[key] || key;
     }
@@ -765,7 +1574,8 @@ createApp({
       ai: t("aiProfiles"),
       runs: t("runsAndDrafts"),
       schedule: t("schedule"),
-      logs: t("logs")
+      logs: t("logs"),
+      settings: t("settings")
     }[activeView.value] || t("projectSupervision")));
 
     const summaryCards = computed(() => {
@@ -773,10 +1583,10 @@ createApp({
       const pending = list.reduce((sum, p) => sum + Number(p.cfg.lastScanPendingCount || 0), 0);
       const failed = jobHistory.value.filter(j => j.status === "failed" || j.status === "partial").length;
       return [
-        { label: t("projects"), value: list.length, note: t("registeredProjects") },
-        { label: t("runningJobs"), value: runningJobs.value.length, note: t("activeBackendJobs") },
-        { label: t("pendingCommits"), value: pending, note: t("pendingFromLastScan") },
-        { label: t("recentIssues"), value: failed, note: t("failedOrPartialJobs") }
+        { key: "projects", label: t("projects"), value: list.length, note: t("registeredProjects") },
+        { key: "running", label: t("runningJobs"), value: runningJobs.value.length, note: t("activeBackendJobs") },
+        { key: "pending", label: t("pendingCommits"), value: pending, note: t("pendingFromLastScan") },
+        { key: "issues", label: t("recentIssues"), value: supervisionIssues.value.length || failed, note: t("failedOrPartialJobs") }
       ];
     });
 
@@ -786,7 +1596,8 @@ createApp({
       { key: "ai", label: t("aiProfiles") },
       { key: "runs", label: t("runsDrafts"), badge: runs.value.length || "" },
       { key: "schedule", label: t("schedule") },
-      { key: "logs", label: t("logs"), badge: lastRun.value.status === "failed" ? "failed" : "" }
+      { key: "logs", label: t("logs"), badge: lastRun.value.status === "failed" ? "failed" : "" },
+      { key: "settings", label: t("settings") }
     ]);
 
     const logOutput = computed(() => selectedJob.value ? (selectedJob.value.output || "") : (lastRun.value.output || ""));
@@ -809,12 +1620,12 @@ createApp({
     }
 
     function projectKbPath(slug) {
-      const root = trimTrailingSlash(kbRoot.value || "D:\\SanQian.Xu\\project-knowledge-base");
-      return `${root}\\projects\\${slug}`;
+      const root = trimTrailingSlash(knowledgeStoreConfig.rootPath || `${kbRoot.value}\\projects`);
+      return `${root}\\${slug}`;
     }
 
     function displayProjectKbPath(slug) {
-      return `${trimTrailingSlash(kbRoot.value || "project-knowledge-base")}\\projects\\${slug}`;
+      return `${trimTrailingSlash(knowledgeStoreConfig.rootPath || "knowledge-store")}\\${slug}`;
     }
 
     function fileUrlFromPath(value) {
@@ -827,15 +1638,32 @@ createApp({
       try { return new Date(value).toLocaleString(); } catch { return value; }
     }
 
+    function formatBytes(bytes) {
+      const n = Number(bytes || 0);
+      if (n < 1024) return `${n} B`;
+      if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
+      if (n < 1024 * 1024 * 1024) return `${(n / 1024 / 1024).toFixed(1)} MB`;
+      return `${(n / 1024 / 1024 / 1024).toFixed(1)} GB`;
+    }
+
     function selectProject(slug) {
+      summaryPanel.value = "";
       selectedSlug.value = slug;
       selectedRunId.value = "";
       selectedRun.value = null;
       drafts.value = [];
+      draftBranchFilter.value = "";
       previewDraftPath.value = "";
       draftPreview.value = "";
+      closeEventSource();
+      terminalLines.value = [];
+      resetChatPointers();
+      terminalSessionId.value = null;
+      terminalPermission.value = null;
+      terminalSession.value = { state: 'idle', model: null, aiProfileId: projects.value && projects.value[slug] && projects.value[slug].aiProfileId || null, claudeSessionId: null, turns: 0 };
       loadRuns(slug);
       loadHookStatus(slug);
+      loadClaudeSessions(slug, true);
     }
 
     function isKbInit(slug) {
@@ -882,7 +1710,8 @@ createApp({
 
     function goalUrl(slug) {
       const cfg = projects.value && projects.value[slug];
-      return fileUrlFromPath(`${(cfg && cfg.kbPath) || projectKbPath(slug)}\\project-goal.md`);
+      const goalFile = cfg && cfg.kbSchemaVersion === "v3" ? "GOAL.md" : "project-goal.md";
+      return fileUrlFromPath(`${(cfg && cfg.kbPath) || projectKbPath(slug)}\\${goalFile}`);
     }
 
     async function api(method, url, body) {
@@ -911,9 +1740,11 @@ createApp({
         kbRoot.value = state.kbRoot;
         projects.value = state.projects;
         schedule.value = state.schedule;
+        if (state.knowledgeStore) Object.assign(knowledgeStoreConfig, state.knowledgeStore);
+        if (state.logging) Object.assign(loggingConfig, state.logging);
         lastRun.value = state.lastRun || lastRun.value;
         if (!selectedSlug.value && projectList.value.length) selectProject(projectList.value[0].slug);
-        await Promise.all([loadJobs(), loadAiProfiles(false)]);
+        await Promise.all([loadJobs(), loadAiProfiles(false), loadIssues()]);
       } catch (e) {
         pollError.value = e.message;
       } finally {
@@ -921,6 +1752,393 @@ createApp({
       }
     }
 
+    // ---- Claude terminal ----
+    const terminalStatusDot = computed(() => {
+      const s = terminalSession.value.state;
+      if (s === 'running' || s === 'spawning' || s === 'pending-permission') return 'warn';
+      if (s === 'failed' || s === 'aborted') return 'bad';
+      if (s === 'idle' && terminalSessionId.value) return 'good';
+      return 'idle';
+    });
+
+    const terminalInputPlaceholder = computed(() => {
+      if (!terminalSessionId.value) return t('terminalNeedSession');
+      if (!terminalSession.value.claudeSessionId) return t('terminalWaitInit');
+      if (terminalSession.value.state === 'pending-permission') return t('terminalNeedPermission');
+      if (terminalSession.value.state === 'running' || terminalSession.value.state === 'spawning') return t('terminalBusy');
+      return t('terminalInputPlaceholder');
+    });
+
+    const permissionSummaryText = computed(() => {
+      const req = terminalPermission.value;
+      if (!req) return '';
+      const s = req.summary || {};
+      const tools = Array.isArray(s.allowedTools) && s.allowedTools.length ? s.allowedTools.join(', ') : '-';
+      return [
+        `${t('permissionTurn')}: ${s.turnKind || '-'}`,
+        `${t('permissionMode')}: ${s.permissionMode || '-'}`,
+        `${t('permissionTools')}: ${tools}`,
+        `${t('permissionCwd')}: ${s.cwd || '-'}`,
+      ].join('\n');
+    });
+
+    function appendTerminalLine(line) {
+      terminalLines.value.push(line);
+      // Trim very long buffers
+      if (terminalLines.value.length > 4000) terminalLines.value.splice(0, 500);
+      nextTick(() => {
+        const el = terminalScrollRef.value;
+        if (el) el.scrollTop = el.scrollHeight;
+      });
+    }
+
+    function resetChatPointers() {
+      currentTextLineIdx = -1;
+      currentThinkingLineIdx = -1;
+      lastAssistantLineIdx = -1;
+      currentToolLineById.clear();
+    }
+
+    function escapeHtml(value) {
+      return String(value || '')
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+    }
+
+    function renderInlineMarkdown(value) {
+      return escapeHtml(value)
+        .replace(/`([^`]+)`/g, '<code>$1</code>')
+        .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
+        .replace(/\*([^*]+)\*/g, '<em>$1</em>');
+    }
+
+    function renderMarkdown(value) {
+      const text = String(value || '').replace(/\r\n/g, '\n');
+      const codeBlocks = [];
+      const protectedText = text.replace(/```([\w-]*)\n?([\s\S]*?)```/g, (_, lang, code) => {
+        const token = `@@CODE_BLOCK_${codeBlocks.length}@@`;
+        codeBlocks.push(`<pre><code>${escapeHtml(code.trimEnd())}</code></pre>`);
+        return token;
+      });
+      const blocks = protectedText.split(/\n{2,}/).map(block => block.trim()).filter(Boolean);
+      return blocks.map(block => {
+        const codeIndex = block.match(/^@@CODE_BLOCK_(\d+)@@$/);
+        if (codeIndex) return codeBlocks[Number(codeIndex[1])] || '';
+        if (/^###\s+/.test(block)) return `<h3>${renderInlineMarkdown(block.replace(/^###\s+/, ''))}</h3>`;
+        if (/^##\s+/.test(block)) return `<h2>${renderInlineMarkdown(block.replace(/^##\s+/, ''))}</h2>`;
+        if (/^#\s+/.test(block)) return `<h1>${renderInlineMarkdown(block.replace(/^#\s+/, ''))}</h1>`;
+        const lines = block.split('\n');
+        if (lines.every(line => /^\s*[-*]\s+/.test(line))) {
+          return `<ul>${lines.map(line => `<li>${renderInlineMarkdown(line.replace(/^\s*[-*]\s+/, ''))}</li>`).join('')}</ul>`;
+        }
+        if (lines.every(line => /^\s*\d+\.\s+/.test(line))) {
+          return `<ol>${lines.map(line => `<li>${renderInlineMarkdown(line.replace(/^\s*\d+\.\s+/, ''))}</li>`).join('')}</ol>`;
+        }
+        if (lines.every(line => /^\s*>\s?/.test(line))) {
+          return `<blockquote>${lines.map(line => renderInlineMarkdown(line.replace(/^\s*>\s?/, ''))).join('<br>')}</blockquote>`;
+        }
+        return `<p>${lines.map(renderInlineMarkdown).join('<br>')}</p>`;
+      }).join('');
+    }
+
+    function appendAssistantText(text) {
+      if (!text) return;
+      const idx = currentTextLineIdx >= 0 ? currentTextLineIdx : -1;
+      if (idx >= 0 && idx < terminalLines.value.length && terminalLines.value[idx].kind === 'assistant') {
+        terminalLines.value[idx].text += text;
+        lastAssistantLineIdx = idx;
+      } else {
+        currentTextLineIdx = terminalLines.value.length;
+        lastAssistantLineIdx = currentTextLineIdx;
+        appendTerminalLine({ kind: 'assistant', text });
+      }
+    }
+
+    function setAssistantResult(text) {
+      if (!text) return;
+      const idx = lastAssistantLineIdx >= 0 ? lastAssistantLineIdx : currentTextLineIdx;
+      if (idx >= 0 && idx < terminalLines.value.length && terminalLines.value[idx].kind === 'assistant') {
+        terminalLines.value[idx].text = text;
+      } else {
+        lastAssistantLineIdx = terminalLines.value.length;
+        appendTerminalLine({ kind: 'assistant', text });
+      }
+    }
+
+    function permissionSummary(req) {
+      if (!req) return '';
+      const s = req.summary || {};
+      const tools = Array.isArray(s.allowedTools) && s.allowedTools.length ? s.allowedTools.join(', ') : '-';
+      return [
+        `${t('permissionTurn')}: ${s.turnKind || '-'}`,
+        `${t('permissionMode')}: ${s.permissionMode || '-'}`,
+        `${t('permissionTools')}: ${tools}`,
+        `${t('permissionCwd')}: ${s.cwd || '-'}`,
+      ].join('\n');
+    }
+
+    function summaryOfToolInput(input) {
+      if (!input || typeof input !== 'object') return '';
+      const keys = Object.keys(input);
+      if (!keys.length) return '';
+      // Show short, common fields nicely
+      if (typeof input.path === 'string') return input.path;
+      if (typeof input.pattern === 'string') return `pattern=${input.pattern}`;
+      if (typeof input.command === 'string') return `$ ${input.command}`;
+      if (typeof input.prompt === 'string') return input.prompt.slice(0, 120);
+      // Fallback: short JSON
+      const s = JSON.stringify(input);
+      if (s.length > 200) return s.slice(0, 200) + '...';
+      return s;
+      return s.length > 200 ? s.slice(0, 200) + '…' : s;
+    }
+
+    function closeEventSource() {
+      if (claudeEventSource) {
+        try { claudeEventSource.close(); } catch {}
+        claudeEventSource = null;
+      }
+    }
+
+    function subscribeClaudeSession(sessionId) {
+      closeEventSource();
+      claudeEventSource = new EventSource(`/api/claude/sessions/${sessionId}/stream`);
+
+      const handle = (typeName, fn) => {
+        claudeEventSource.addEventListener(typeName, (e) => {
+          let data; try { data = JSON.parse(e.data); } catch { return; }
+          try { fn(data); } catch (err) { console.error('terminal handler', typeName, err); }
+        });
+      };
+
+      handle('claude/system-prompt', (d) => {
+        currentTextLineIdx = -1;
+        appendTerminalLine({ kind: 'status', text: t('systemPromptLoaded') });
+      });
+      handle('claude/user-prompt', (d) => {
+        currentTextLineIdx = -1;
+        appendTerminalLine({ kind: 'user', text: d.text || '' });
+      });
+      handle('claude/init', (d) => {
+        terminalSession.value = { ...terminalSession.value, claudeSessionId: d.claudeSessionId, model: d.model, aiProfileId: d.aiProfileId || terminalSession.value.aiProfileId };
+        appendTerminalLine({ kind: 'status', text: `Claude session initialized · ${d.model || '?'} · ${(d.claudeSessionId || '').slice(0, 8)}` });
+      });
+      handle('claude/restored', (d) => {
+        terminalSession.value = { ...terminalSession.value, state: d.state || terminalSession.value.state };
+        appendTerminalLine({ kind: 'status', text: `Session restored from ${d.fromState || 'disk'}` });
+      });
+      handle('claude/permission-request', (d) => {
+        terminalPermission.value = d;
+        terminalSession.value = { ...terminalSession.value, state: 'pending-permission', pendingPermission: d };
+        appendTerminalLine({ kind: 'permission', requestId: d.requestId, summaryText: permissionSummary(d) });
+      });
+      handle('claude/permission-resolved', (d) => {
+        if (terminalPermission.value && terminalPermission.value.requestId === d.requestId) {
+          terminalPermission.value = null;
+        }
+        appendTerminalLine({ kind: 'status', text: d.allow ? t('permissionApproved') : t('permissionDenied') });
+      });
+      handle('claude/message-start', () => {
+        currentTextLineIdx = -1;
+        currentThinkingLineIdx = -1;
+      });
+      handle('claude/thinking-start', () => {
+        currentThinkingLineIdx = terminalLines.value.length;
+        appendTerminalLine({ kind: 'thinking', text: '' });
+      });
+      handle('claude/thinking-delta', (d) => {
+        if (currentThinkingLineIdx >= 0 && currentThinkingLineIdx < terminalLines.value.length) {
+          terminalLines.value[currentThinkingLineIdx].text += d.text || '';
+        }
+      });
+      handle('claude/text-delta', (d) => {
+        appendAssistantText(d.text || '');
+      });
+      handle('claude/tool-use', (d) => {
+        currentTextLineIdx = -1;
+        const line = {
+          kind: 'tool',
+          id: d.id,
+          name: d.name,
+          summary: summaryOfToolInput(d.input),
+          inputJson: d.input ? JSON.stringify(d.input, null, 2) : '',
+          open: false,
+        };
+        if (d.id && currentToolLineById.has(d.id)) {
+          const idx = currentToolLineById.get(d.id);
+          terminalLines.value[idx] = { ...terminalLines.value[idx], ...line };
+        } else {
+          currentToolLineById.set(d.id || `tool-${terminalLines.value.length}`, terminalLines.value.length);
+          appendTerminalLine(line);
+        }
+      });
+      handle('claude/tool-use-start', (d) => {
+        currentTextLineIdx = -1;
+        const id = d.id || `tool-${terminalLines.value.length}`;
+        currentToolLineById.set(id, terminalLines.value.length);
+        appendTerminalLine({ kind: 'tool', id, name: d.name, summary: t('toolRunning'), inputJson: '', open: false });
+        return;
+        appendTerminalLine({ kind: 'tool', name: d.name, summary: '(input streaming…)' });
+      });
+      handle('claude/tool-input-delta', () => {
+        // Too chatty to print; the final tool-use event carries the assembled input.
+      });
+      handle('claude/message-stop', (d) => {
+        currentTextLineIdx = -1;
+        currentThinkingLineIdx = -1;
+        if (d.stopReason) appendTerminalLine({ kind: 'status', text: `message stop: ${d.stopReason}` });
+      });
+      handle('claude/state', (d) => {
+        terminalSession.value = { ...terminalSession.value, state: d.state };
+        if (d.turn != null) terminalSession.value.turns = d.turn;
+        if (d.state !== 'pending-permission') terminalPermission.value = null;
+        if (d.state === 'idle' || d.state === 'failed' || d.state === 'aborted') {
+          appendTerminalLine({ kind: 'status', text: `${d.state}${d.exitCode != null ? ` (exit ${d.exitCode})` : ''}` });
+        }
+      });
+      handle('claude/result', (d) => {
+        if (d.result) setAssistantResult(d.result);
+        return;
+        const head = (d.result || '').slice(0, 1500);
+        appendTerminalLine({ kind: 'result', text: head + (d.result && d.result.length > 1500 ? `\n… (+${d.result.length - 1500} chars)` : '') });
+      });
+      handle('claude/stderr', (d) => {
+        if (d.text && !d.text.includes('DeprecationWarning')) {
+          appendTerminalLine({ kind: 'error', text: d.text });
+        }
+      });
+      handle('claude/error', (d) => appendTerminalLine({ kind: 'error', text: d.message }));
+      handle('claude/aborted', () => appendTerminalLine({ kind: 'status', text: 'aborted by user' }));
+      handle('claude/exit', (d) => {
+        if (d.exitCode !== 0) appendTerminalLine({ kind: 'status', text: `Claude exited with code ${d.exitCode}` });
+      });
+      // Suppress claude/raw (hook lifecycle noise) — don't add a handler.
+
+      claudeEventSource.onerror = () => {
+        // EventSource auto-reconnects; only log
+      };
+    }
+
+    async function loadClaudeSessions(slug, autoRestore) {
+      if (!slug) return;
+      try {
+        const data = await api("GET", `/api/claude/sessions?slug=${encodeURIComponent(slug)}`);
+        terminalSessions.value = data.sessions || [];
+        if (autoRestore && terminalSessions.value.length && !terminalSessionId.value) {
+          await restoreLatestClaudeSession(true);
+        }
+      } catch (e) {
+        terminalSessions.value = [];
+      }
+    }
+
+    async function restoreLatestClaudeSession(silent) {
+      if (!selectedSlug.value) return;
+      if (!terminalSessions.value.length) {
+        await loadClaudeSessions(selectedSlug.value, false);
+      }
+      const latest = terminalSessions.value[0];
+      if (!latest) {
+        if (!silent) appendTerminalLine({ kind: 'state', text: t('noRestorableSession') });
+        return;
+      }
+      closeEventSource();
+      terminalLines.value = [];
+      resetChatPointers();
+      terminalPermission.value = latest.pendingPermission || null;
+      terminalSessionId.value = latest.sessionId;
+      terminalSession.value = {
+        state: latest.state || 'idle',
+        model: latest.model || null,
+        aiProfileId: latest.aiProfileId || (selectedProject.value && selectedProject.value.aiProfileId) || null,
+        claudeSessionId: latest.claudeSessionId || null,
+        turns: latest.turns || 0,
+        pendingPermission: latest.pendingPermission || null,
+        restored: latest.restored || false,
+      };
+      localStorage.setItem(`kb-claude-session-${selectedSlug.value}`, latest.sessionId);
+      subscribeClaudeSession(latest.sessionId);
+      if (!silent) appendTerminalLine({ kind: 'state', text: t('sessionRecovered') });
+    }
+
+    async function startClaudeAnalysis() {
+      if (!selectedSlug.value) return;
+      closeEventSource();
+      terminalLines.value = [];
+      resetChatPointers();
+      terminalPermission.value = null;
+      terminalSession.value = { state: 'spawning', model: null, aiProfileId: selectedProject.value && selectedProject.value.aiProfileId || null, claudeSessionId: null, turns: 0 };
+      try {
+        const r = await api("POST", `/api/projects/${selectedSlug.value}/analyze/initial?mode=cli`);
+        if (!r.sessionId) throw new Error('server returned no sessionId');
+        terminalSessionId.value = r.sessionId;
+        terminalPermission.value = r.pendingPermission || null;
+        terminalSession.value = { ...terminalSession.value, aiProfileId: r.aiProfileId || terminalSession.value.aiProfileId, pendingPermission: r.pendingPermission || null };
+        localStorage.setItem(`kb-claude-session-${selectedSlug.value}`, r.sessionId);
+        subscribeClaudeSession(r.sessionId);
+        await loadClaudeSessions(selectedSlug.value, false);
+      } catch (e) {
+        appendTerminalLine({ kind: 'error', text: 'failed to start: ' + e.message });
+        terminalSession.value.state = 'failed';
+      }
+    }
+
+    async function sendClaudeInput() {
+      const text = terminalInput.value.trim();
+      if (!text || !terminalSessionId.value) return;
+      if (terminalSession.value.state === 'running' || terminalSession.value.state === 'spawning') return;
+      terminalInput.value = '';
+      try {
+        const r = await api("POST", `/api/claude/sessions/${terminalSessionId.value}/input`, { text });
+        terminalPermission.value = r.pendingPermission || null;
+      } catch (e) {
+        appendTerminalLine({ kind: 'error', text: 'send failed: ' + e.message });
+      }
+    }
+
+    async function resolveClaudePermission(allow, requestId) {
+      if (!terminalSessionId.value || !terminalPermission.value) return;
+      const targetRequestId = requestId || terminalPermission.value.requestId;
+      if (!targetRequestId || targetRequestId !== terminalPermission.value.requestId) return;
+      terminalPermissionBusy.value = true;
+      try {
+        await api("POST", `/api/claude/sessions/${terminalSessionId.value}/permission`, {
+          requestId: targetRequestId,
+          allow,
+        });
+      } catch (e) {
+        appendTerminalLine({ kind: 'error', text: 'permission failed: ' + e.message });
+      } finally {
+        terminalPermissionBusy.value = false;
+      }
+    }
+
+    function approveClaudePermission(requestId) {
+      return resolveClaudePermission(true, requestId);
+    }
+
+    function denyClaudePermission(requestId) {
+      return resolveClaudePermission(false, requestId);
+    }
+
+    async function stopClaudeSession() {
+      if (!terminalSessionId.value) return;
+      try {
+        await api("POST", `/api/claude/sessions/${terminalSessionId.value}/abort`);
+      } catch (e) {
+        appendTerminalLine({ kind: 'error', text: 'abort failed: ' + e.message });
+      }
+    }
+
+    function clearTerminal() {
+      terminalLines.value = [];
+      terminalPermission.value = null;
+      resetChatPointers();
+    }
+
     async function loadJobs() {
       const data = await api("GET", "/api/jobs");
       runningJobs.value = data.running || [];
@@ -929,6 +2147,85 @@ createApp({
       return data;
     }
 
+    async function loadIssues() {
+      const data = await api("GET", "/api/supervision/issues");
+      supervisionIssues.value = data.issues || [];
+      return data;
+    }
+
+    async function loadPendingCommits() {
+      const data = await api("GET", "/api/supervision/pending-commits");
+      pendingCommitItems.value = data.items || [];
+      return data;
+    }
+
+    async function openSummaryPanel(key) {
+      if (key === "pending") {
+        summaryPanel.value = summaryPanel.value === "pending" ? "" : "pending";
+        if (summaryPanel.value) await loadPendingCommits();
+      } else if (key === "issues") {
+        summaryPanel.value = summaryPanel.value === "issues" ? "" : "issues";
+        if (summaryPanel.value) await loadIssues();
+      }
+    }
+
+    async function loadStructuredLogs() {
+      const params = new URLSearchParams();
+      if (logFilters.dateFrom) {
+        params.set("dateFrom", logFilters.dateFrom);
+        params.set("dateTo", logFilters.dateFrom);
+      }
+      if (logFilters.level) params.set("level", logFilters.level);
+      if (logFilters.projectSlug) params.set("projectSlug", logFilters.projectSlug);
+      if (logFilters.source) params.set("source", logFilters.source);
+      if (logFilters.q) params.set("q", logFilters.q);
+      const data = await api("GET", `/api/logs?${params.toString()}`);
+      structuredLogs.value = data.logs || [];
+      if (data.config) Object.assign(loggingConfig, data.config);
+      selectedLog.value = structuredLogs.value[0] || null;
+      return data;
+    }
+
+    async function loadKnowledgeStoreConfig() {
+      const data = await api("GET", "/api/knowledge-store/config");
+      if (data.config) Object.assign(knowledgeStoreConfig, data.config);
+      if (!knowledgeStoreConfig.git) knowledgeStoreConfig.git = { enabled: false, remoteUrl: "", branch: "main", autoCommit: false, autoPush: false };
+      return data;
+    }
+
+    async function saveKnowledgeStoreConfig() {
+      const data = await api("PUT", "/api/knowledge-store/config", knowledgeStoreConfig);
+      if (data.config) Object.assign(knowledgeStoreConfig, data.config);
+      await refreshAll();
+      return data;
+    }
+
+    async function previewKnowledgeMigration() {
+      const data = await api("POST", "/api/knowledge-store/migrate", { execute: false });
+      knowledgeMigrationPlan.value = data.plan || [];
+      return data;
+    }
+
+    async function executeKnowledgeMigration() {
+      const data = await api("POST", "/api/knowledge-store/migrate", { execute: true, overwrite: false, move: false });
+      knowledgeMigrationPlan.value = data.migrated || [];
+      await refreshAll();
+      return data;
+    }
+
+    async function loadLoggingConfig() {
+      const data = await api("GET", "/api/logging/config");
+      if (data.config) Object.assign(loggingConfig, data.config);
+      return data;
+    }
+
+    async function saveLoggingConfig() {
+      const data = await api("PUT", "/api/logging/config", loggingConfig);
+      if (data.config) Object.assign(loggingConfig, data.config);
+      await loadStructuredLogs();
+      return data;
+    }
+
     async function loadJobDetail(jobId) {
       const data = await api("GET", `/api/jobs/${jobId}`);
       selectedJob.value = data.job;
@@ -940,9 +2237,127 @@ createApp({
       Object.assign(aiConfig, data.config || {});
       adapters.value = data.adapters || [];
       if (updateText || !aiProfilesText.value.trim()) aiProfilesText.value = JSON.stringify(aiConfig, null, 2);
+      if (!aiConfig.profiles.find(p => p.id === selectedConfigProfileId.value)) {
+        selectedConfigProfileId.value = aiConfig.defaultProfileId || (aiConfig.profiles[0] && aiConfig.profiles[0].id) || "mock-agent";
+      }
+      loadProfileForm();
       return data;
     }
 
+    function loadProfileForm() {
+      const profile = aiConfig.profiles.find(p => p.id === selectedConfigProfileId.value) || {};
+      Object.assign(profileForm, {
+        id: profile.id || selectedConfigProfileId.value || "",
+        name: profile.name || profile.id || "",
+        enabled: !!profile.enabled,
+        implementation: profile.implementation || profile.id || "",
+        baseUrl: profile.baseUrl || "",
+        apiKey: profile.apiKey || "",
+        apiKeyEnv: profile.apiKeyEnv || "",
+        model: profile.model || "",
+        version: profile.version || "2023-06-01",
+        temperature: profile.temperature != null ? Number(profile.temperature) : 0.2,
+        maxTokens: profile.maxTokens != null ? Number(profile.maxTokens) : 4096,
+        timeoutMs: profile.timeoutMs != null ? Number(profile.timeoutMs) : 300000,
+      });
+      testResult.value = "";
+    }
+
+    function normalizeProfileId(value) {
+      return String(value || "")
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9._-]+/g, "-")
+        .replace(/^-+|-+$/g, "");
+    }
+
+    function profileOptionLabel(profile) {
+      if (!profile) return "-";
+      const state = profile.enabled === false ? t("disabledStatus") : t("enabledStatus");
+      return `${profile.id} - ${profile.name || profile.id} (${state})`;
+    }
+
+    function syncProfileFormToConfig() {
+      const profile = aiConfig.profiles.find(p => p.id === selectedConfigProfileId.value);
+      if (!profile) throw new Error(`Profile not found: ${selectedConfigProfileId.value}`);
+      profile.name = profileForm.name || profile.id;
+      profile.enabled = !!profileForm.enabled;
+      profile.implementation = profileForm.implementation || profile.id;
+      profile.baseUrl = profileForm.baseUrl || "";
+      profile.apiKey = profileForm.apiKey || "";
+      profile.apiKeyEnv = profileForm.apiKeyEnv || "";
+      profile.model = profileForm.model || "";
+      profile.version = profileForm.version || "2023-06-01";
+      profile.temperature = Number(profileForm.temperature || 0);
+      profile.maxTokens = Number(profileForm.maxTokens || 4096);
+      profile.timeoutMs = Number(profileForm.timeoutMs || 300000);
+      aiProfilesText.value = JSON.stringify(aiConfig, null, 2);
+      return profile;
+    }
+
+    function assertDefaultProfileEnabled() {
+      const defaultProfile = aiConfig.profiles.find(p => p.id === aiConfig.defaultProfileId);
+      if (defaultProfile && defaultProfile.enabled === false) {
+        throw new Error(t("defaultProfileDisabledError"));
+      }
+    }
+
+    async function saveCurrentProfile() {
+      try {
+        syncProfileFormToConfig();
+        assertDefaultProfileEnabled();
+        await saveAiProfiles();
+      } catch (e) {
+        aiMessage.value = `Save failed: ${e.message}`;
+      }
+    }
+
+    async function addProfile() {
+      const rawId = window.prompt(t("profileIdPrompt"));
+      const id = normalizeProfileId(rawId);
+      if (!id) return;
+      if (aiConfig.profiles.find(p => p.id === id)) {
+        aiMessage.value = t("duplicateProfileError");
+        return;
+      }
+      const realAdapter = adapters.value.find(a => a.id === "claude-code-agent") || adapters.value[0] || { id: "mock-agent" };
+      aiConfig.profiles.push({
+        id,
+        name: id,
+        enabled: false,
+        implementation: realAdapter.id,
+        baseUrl: realAdapter.id === "claude-code-agent" ? "https://api.anthropic.com" : "",
+        apiKey: "",
+        apiKeyEnv: "",
+        model: "",
+        version: "2023-06-01",
+        temperature: 0.2,
+        maxTokens: 4096,
+        timeoutMs: 300000,
+      });
+      selectedConfigProfileId.value = id;
+      loadProfileForm();
+      syncProfileFormToConfig();
+      aiMessage.value = "";
+    }
+
+    async function deleteCurrentProfile() {
+      const id = selectedConfigProfileId.value;
+      if (!id) return;
+      if (id === aiConfig.defaultProfileId) {
+        aiMessage.value = t("deleteDefaultProfileError");
+        return;
+      }
+      if (!window.confirm(t("deleteProfileConfirm"))) return;
+      const index = aiConfig.profiles.findIndex(p => p.id === id);
+      if (index === -1) return;
+      aiConfig.profiles.splice(index, 1);
+      selectedConfigProfileId.value = aiConfig.defaultProfileId || (aiConfig.profiles[0] && aiConfig.profiles[0].id) || "";
+      loadProfileForm();
+      aiProfilesText.value = JSON.stringify(aiConfig, null, 2);
+      await saveAiProfiles();
+    }
+
     async function saveAiProfiles() {
       try {
         const parsed = JSON.parse(aiProfilesText.value);
@@ -954,6 +2369,35 @@ createApp({
       }
     }
 
+    async function testCurrentProfile() {
+      testingProfile.value = true;
+      testResult.value = "";
+      aiMessage.value = "";
+      try {
+        syncProfileFormToConfig();
+        assertDefaultProfileEnabled();
+        await api("PUT", "/api/ai-profiles", JSON.parse(aiProfilesText.value));
+        const data = await api("POST", "/api/ai-profiles/test", {
+          profileId: selectedConfigProfileId.value,
+          prompt: testPrompt.value || "what model are you?"
+        });
+        testResult.value = JSON.stringify({
+          ok: data.ok,
+          profileId: data.profileId,
+          model: data.model,
+          baseUrl: data.baseUrl,
+          text: data.text,
+          usage: data.usage
+        }, null, 2);
+        aiMessage.value = "Model test completed.";
+      } catch (e) {
+        testResult.value = JSON.stringify({ ok: false, error: e.message }, null, 2);
+        aiMessage.value = `Model test failed: ${e.message}`;
+      } finally {
+        testingProfile.value = false;
+      }
+    }
+
     async function setProjectAiProfile(slug, aiProfileId) {
       await api("PUT", `/api/projects/${slug}/ai-profile`, { aiProfileId });
       await refreshAll();
@@ -990,6 +2434,75 @@ createApp({
       await refreshAll();
     }
 
+    async function migrateV3(slug) {
+      await api("POST", `/api/projects/${slug}/migrate-v3`);
+      await refreshAll();
+    }
+
+    async function openRemoveProject(slug) {
+      removeDialog.open = true;
+      removeDialog.slug = slug;
+      removeDialog.preview = {};
+      removeDialog.deleteKb = false;
+      removeDialog.reason = "";
+      removeDialog.confirmText = "";
+      removeDialog.error = "";
+      try {
+        const data = await api("GET", `/api/projects/${slug}/remove-preview`);
+        removeDialog.preview = data.preview || {};
+      } catch (e) {
+        removeDialog.error = e.message;
+      }
+    }
+
+    function closeRemoveProject() {
+      removeDialog.open = false;
+      removeDialog.slug = "";
+      removeDialog.preview = {};
+      removeDialog.deleteKb = false;
+      removeDialog.reason = "";
+      removeDialog.confirmText = "";
+      removeDialog.error = "";
+      removeDialog.busy = false;
+    }
+
+    async function confirmRemoveProject() {
+      if (removeProjectDisabled.value) return;
+      removeDialog.busy = true;
+      removeDialog.error = "";
+      try {
+        await api("POST", `/api/projects/${removeDialog.slug}/remove`, {
+          deleteKb: removeDialog.deleteKb,
+          reason: removeDialog.reason,
+        });
+        const removed = removeDialog.slug;
+        closeRemoveProject();
+        if (selectedSlug.value === removed) selectedSlug.value = "";
+        await refreshAll();
+      } catch (e) {
+        removeDialog.error = e.message;
+      } finally {
+        removeDialog.busy = false;
+      }
+    }
+
+    async function runKnowledgeUpdate(slug) {
+      if (!slug) return;
+      actionMessage.value = t("knowledgeUpdateRunning");
+      try {
+        const data = await api("POST", `/api/projects/${slug}/knowledge-update`, {});
+        actionMessage.value = data.reviewRequired
+          ? `${t("knowledgeUpdateReviewRequired")}: ${data.reviewReason || ""}`
+          : t("knowledgeUpdateDone");
+        await refreshAll();
+        if (data.reviewRequired) {
+          await loadRuns(slug);
+        }
+      } catch (e) {
+        actionMessage.value = e.message;
+      }
+    }
+
     async function initProject(slug) {
       busySlug.value = slug;
       try {
@@ -1028,9 +2541,25 @@ createApp({
     }
 
     function resetForm() {
-      Object.assign(form, { slug: "", displayName: "", localPath: "", gitPath: "", primaryLanguage: "", tagsStr: "", isReference: false, initNow: true, knowledgeLanguage: "zh-CN" });
+      Object.assign(form, { slug: "", displayName: "", localPath: "", gitPath: "", primaryLanguage: "", tagsStr: "", isReference: false, initNow: true, initGit: false, createInitialCommit: false, remoteUrl: "", knowledgeLanguage: "zh-CN" });
       formError.value = "";
       formOk.value = "";
+      importPreflight.value = null;
+    }
+
+    async function runImportPreflight() {
+      formError.value = "";
+      importPreflight.value = null;
+      try {
+        const data = await api("POST", "/api/projects/import-preflight", {
+          localPath: form.localPath,
+          gitPath: form.gitPath || form.localPath,
+        });
+        importPreflight.value = data;
+        if (data.needsGitInit) form.initGit = true;
+      } catch (e) {
+        formError.value = e.message;
+      }
     }
 
     async function addProject() {
@@ -1054,7 +2583,15 @@ createApp({
           kbSchemaVersion: "v1",
           goalStatus: "not-created"
         };
-        await api("PUT", "/api/projects", { slug: form.slug, config });
+        await api("PUT", "/api/projects", {
+          slug: form.slug,
+          config,
+          importOptions: {
+            initGit: !!form.initGit,
+            createInitialCommit: !!form.createInitialCommit,
+            remoteUrl: form.remoteUrl || "",
+          },
+        });
         if (form.initNow) await api("POST", `/api/projects/${form.slug}/init`);
         formOk.value = `Imported ${form.slug}.`;
         await refreshAll();
@@ -1086,6 +2623,7 @@ createApp({
       const data = await api("GET", `/api/projects/${slug}/runs/${runId}`);
       selectedRun.value = data.run;
       drafts.value = data.drafts || [];
+      if (draftBranchFilter.value && !draftBranches.value.includes(draftBranchFilter.value)) draftBranchFilter.value = "";
       for (const d of drafts.value) {
         if (!(d.path in draftSelection)) draftSelection[d.path] = true;
       }
@@ -1100,12 +2638,12 @@ createApp({
 
     async function applySelectedDrafts() {
       if (!selectedSlug.value || !selectedRunId.value) return;
-      const selected = drafts.value.filter(d => draftSelection[d.path]);
+      const selected = filteredDrafts.value.filter(d => draftSelection[d.path]);
       if (!selected.length) throw new Error("No selected drafts.");
       const draftPayload = [];
       for (const d of selected) {
         const raw = await api("GET", `/api/projects/${selectedSlug.value}/drafts/${selectedRunId.value}/raw?path=${encodeURIComponent(d.path)}`);
-        draftPayload.push({ path: d.path, content: raw.content || "" });
+        draftPayload.push({ path: d.path, content: raw.content || "", sourceBranch: d.sourceBranch, sourceHeadCommit: d.sourceHeadCommit });
       }
       await api("POST", `/api/projects/${selectedSlug.value}/drafts/${selectedRunId.value}/apply`, {
         drafts: draftPayload,
@@ -1147,17 +2685,29 @@ createApp({
 
     return {
       kbRoot, projects, schedule, lastRun, runningJobs, jobHistory, selectedJob, logOutput, logTitle,
+      summaryPanel, pendingCommitItems, supervisionIssues, issuesByProject, structuredLogs, selectedLog, logFilters,
+      knowledgeStoreConfig, knowledgeMigrationPlan, loggingConfig,
       loading, pollError, activeView, selectedSlug, selectedProject, pageTitle, projectList, summaryCards, navItems,
       theme, uiLanguage, t, toggleTheme, form, submitting, formError, formOk, addProject, resetForm, busySlug, initProject,
       freq, scheduleMsg, applySchedule, deleteSchedule,
-      runs, selectedRunId, selectedRun, drafts, draftSelection, previewDraftPath, draftPreview, allowGoalEdit,
-      aiConfig, aiProfilesText, adapters, aiMessage, selectedAiProfileId, selectedKnowledgeLanguage,
-      hookStatus, actionMessage,
+      runs, selectedRunId, selectedRun, drafts, filteredDrafts, draftBranches, draftBranchFilter, applyDraftButtonLabel, draftSelection, previewDraftPath, draftPreview, allowGoalEdit,
+      removeDialog, removeProjectDisabled,
+      aiConfig, aiProfilesText, adapters, aiMessage, selectedConfigProfileId, profileForm, testPrompt, testResult, testingProfile, selectedAiProfileId, selectedKnowledgeLanguage,
+      hookStatus, actionMessage, advancedOpen, importPreflight,
       selectProject, isKbInit, isProjectRunning, repoStatusLevel, projectStatusClass, projectIssues,
-      kbUrl, goalUrl, displayProjectKbPath, formatTime,
-      refreshAll, loadJobs, loadJobDetail, loadAiProfiles, saveAiProfiles, setProjectAiProfile, saveProjectSettings,
-      validateGit, scanProject, validateKb, migrateV2, runJob, loadHookStatus, installHook, uninstallHook,
-      loadRuns, selectRun, loadRunDetail, loadDraftPreview, applySelectedDrafts, rejectRun
+      kbUrl, goalUrl, displayProjectKbPath, formatTime, formatBytes,
+      profileOptionLabel,
+      refreshAll, loadJobs, loadJobDetail, loadAiProfiles, loadProfileForm, addProfile, deleteCurrentProfile, saveAiProfiles, saveCurrentProfile, testCurrentProfile, setProjectAiProfile, saveProjectSettings,
+      openSummaryPanel, loadPendingCommits, loadIssues, loadStructuredLogs,
+      loadKnowledgeStoreConfig, saveKnowledgeStoreConfig, previewKnowledgeMigration, executeKnowledgeMigration, loadLoggingConfig, saveLoggingConfig,
+      validateGit, scanProject, validateKb, migrateV2, migrateV3, runKnowledgeUpdate, runImportPreflight, runJob, loadHookStatus, installHook, uninstallHook,
+      openRemoveProject, closeRemoveProject, confirmRemoveProject,
+      loadRuns, selectRun, loadRunDetail, loadDraftPreview, applySelectedDrafts, rejectRun,
+      terminalLines, terminalSessionId, terminalSession, terminalSessions, terminalPermission, terminalPermissionBusy, terminalInput, terminalScrollRef,
+      terminalStatusDot, terminalInputPlaceholder, permissionSummaryText, renderMarkdown,
+      startClaudeAnalysis, sendClaudeInput, stopClaudeSession, clearTerminal, restoreLatestClaudeSession, approveClaudePermission, denyClaudePermission,
+      promptsConfig, promptsSaving, promptsError, promptsSaved,
+      loadPrompts, savePrompts
     };
   }
 }).mount("#app");