diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index ced1dd5..c5a9dd3 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -5,15 +5,48 @@ on:
       - "main"
 
 jobs:
+  build-browser:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 8
+          run_install: false
+
+      - name: NodeJS
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: pnpm
+          cache-dependency-path: ./browser/pnpm-lock.yaml
+
+      - name: Install dependencies
+        working-directory: ./browser
+        run: pnpm i
+
+      - name: Check TypeScript
+        working-directory: ./browser
+        run: pnpm ts-check
+
+      - name: Build
+        working-directory: ./browser
+        run: pnpm build
+
   test:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+
       - name: Setup Python
         uses: actions/setup-python@v5
         with:
           python-version: "3.12.7"
+          cache: "pip"
 
       - name: Install dependencies
         run: |
diff --git a/browser/src/store/scanning_store.ts b/browser/src/store/scanning_store.ts
index 7bc92f5..89c6db0 100644
--- a/browser/src/store/scanning_store.ts
+++ b/browser/src/store/scanning_store.ts
@@ -2,7 +2,13 @@ import { val, derive, combine, Val, ReadonlyVal } from "value-enhancer";
 import { fetchJson, fetchJsonEvents, EventFetcher } from "../utils";
 
 type Event = {
-  readonly kind: "scanning" | "completed" | "interrupted" | "heartbeat";
+  readonly kind: (
+    "scanning" |
+    "completed" |
+    "interrupting" |
+    "interrupted" |
+    "heartbeat"
+  );
 } | {
   readonly kind: "scanCompleted";
   readonly count: number;
@@ -31,6 +37,8 @@ export type ScanningStore$ = {
   readonly handlingFile: ReadonlyVal<HandingFile | null>;
   readonly completedFiles: ReadonlyVal<readonly string[]>;
   readonly error: ReadonlyVal<string | null>;
+  readonly isInterrupting: ReadonlyVal<boolean>;
+  readonly isInterrupted: ReadonlyVal<boolean>;
   readonly isScanning: ReadonlyVal<boolean>;
 };
 
@@ -39,7 +47,6 @@ export enum ScanningPhase {
   Scanning,
   HandingFiles,
   Completed,
-  Error,
 }
 
 export type HandingFile = {
@@ -63,6 +70,8 @@ export class ScanningStore {
   readonly #handlingFile$: Val<HandingFile | null> = val<HandingFile | null>(null);
   readonly #completedFiles$: Val<readonly string[]> = val<readonly string[]>([]);
   readonly #error$: Val<string | null> = val<string | null>(null);
+  readonly #isInterrupting$: Val<boolean> = val(false);
+  readonly #isInterrupted$: Val<boolean> = val(false);
 
   public constructor() {
     this.#fetcher = fetchJsonEvents<Event>("/api/scanning");
@@ -72,18 +81,26 @@ export class ScanningStore {
       handlingFile: derive(this.#handlingFile$),
       completedFiles: derive(this.#completedFiles$),
       error: derive(this.#error$),
-      isScanning: derive(this.#phase$, phase => {
-        switch (phase) {
-          case ScanningPhase.Ready:
-          case ScanningPhase.Completed:
-          case ScanningPhase.Error: {
+      isInterrupting: derive(this.#isInterrupting$),
+      isInterrupted: derive(this.#isInterrupted$),
+      isScanning: combine(
+        [this.#phase$, this.#error$, this.#isInterrupted$],
+        ([phase, error, isInterrupted]) => {
+          switch (phase) {
+            case ScanningPhase.Ready:
+            case ScanningPhase.Completed: {
+              return false;
+            }
+          }
+          if (error) {
             return false;
           }
-          default: {
-            return true;
+          if (isInterrupted) {
+            return false;
           }
-        }
-      }),
+          return true;
+        },
+      ),
     };
   }
 
@@ -91,6 +108,10 @@ export class ScanningStore {
     await fetchJson("/api/scanning", { method: "POST" });
   }
 
+  public async interrupt(): Promise<void> {
+    await fetchJson("/api/scanning", { method: "DELETE" });
+  }
+
   public close(): void {
     this.#fetcher.close();
   }
@@ -108,6 +129,7 @@ export class ScanningStore {
           this.#handlingFile$.set(null);
           this.#completedFiles$.set([]);
           this.#error$.set(null);
+          this.#isInterrupted$.set(false);
           break;
         }
         case "scanCompleted": {
@@ -152,10 +174,18 @@ export class ScanningStore {
           break;
         }
         case "failure": {
-          this.#phase$.set(ScanningPhase.Error);
           this.#error$.set(event.error);
           break;
         }
+        case "interrupting": {
+          this.#isInterrupting$.set(true);
+          break;
+        }
+        case "interrupted": {
+          this.#isInterrupting$.set(false);
+          this.#isInterrupted$.set(true);
+          break;
+        }
       }
     }
   }
diff --git a/browser/src/views/ScannerPage.module.less b/browser/src/views/ScannerPage.module.less
index 840c34b..da69595 100644
--- a/browser/src/views/ScannerPage.module.less
+++ b/browser/src/views/ScannerPage.module.less
@@ -5,6 +5,7 @@
 
 .scan-button {
   width: 128px;
+  margin-right: 24px;
 }
 
 .steps-bar {
diff --git a/browser/src/views/ScannerPage.tsx b/browser/src/views/ScannerPage.tsx
index 76c7752..f0733dc 100644
--- a/browser/src/views/ScannerPage.tsx
+++ b/browser/src/views/ScannerPage.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import styles from "./ScannerPage.module.less";
 
 import { Skeleton, Result, Steps, List, Button, Divider, Progress, Typography } from "antd";
-import { ScanOutlined, ProfileTwoTone, SyncOutlined, FilePdfTwoTone } from "@ant-design/icons";
+import { ScanOutlined, ProfileTwoTone, SyncOutlined, FilePdfTwoTone, PauseOutlined } from "@ant-design/icons";
 import { val } from "value-enhancer";
 import { useVal } from "use-value-enhancer";
 import { ScannerStore, ScanningStore, ScanningPhase } from "../store";
@@ -49,10 +49,15 @@ type ScannerProps = {
 const Scanner: React.FC<ScannerProps> = ({ store }) => {
   const scanningStore = store.scanningStore;
   const isScanning = useVal(scanningStore.$.isScanning);
+  const isInterrupting = useVal(scanningStore.$.isInterrupting);
   const onClickScan = React.useCallback(
     () => scanningStore.scan(),
     [scanningStore],
   );
+  const onClickInterrupt = React.useCallback(
+    () => scanningStore.interrupt(),
+    [scanningStore],
+  );
   return <>
     <Typography>
       <Title>扫描</Title>
@@ -71,6 +76,18 @@ const Scanner: React.FC<ScannerProps> = ({ store }) => {
       onClick={onClickScan} >
       扫  描
     </Button>
+    {isScanning && (
+      <Button
+        shape="round"
+        size="large"
+        className={styles["scan-button"]}
+        disabled={isInterrupting}
+        loading={isInterrupting}
+        icon={<PauseOutlined />}
+        onClick={onClickInterrupt} >
+        中 断
+      </Button>
+    )}
   </>;
 }
 
@@ -91,6 +108,7 @@ const ScanningPanel: React.FC<ScanningPanelProps> = ({ store }) => {
   const completedFiles = useVal(store.$.completedFiles);
   const handlingFile = useVal(store.$.handlingFile);
   const error = useVal(store.$.error);
+  const isInterrupted = useVal(store.$.isInterrupted);
 
   let currentIndex: number;
   let status: "wait" | "process" | "finish" | "error" = "process";
@@ -112,11 +130,6 @@ const ScanningPanel: React.FC<ScanningPanelProps> = ({ store }) => {
       status = "finish";
       break;
     }
-    case ScanningPhase.Error: {
-      currentIndex = 2;
-      status = "error";
-      break;
-    }
   }
   if (phase === ScanningPhase.Scanning) {
     records.push({
@@ -157,7 +170,7 @@ const ScanningPanel: React.FC<ScanningPanelProps> = ({ store }) => {
       items={[
         { title: "扫描" },
         { title: "处理文件" },
-        { title: phase === ScanningPhase.Error ? "错误" : "完成" },
+        { title: "完成" },
       ]}
     />
     <List
@@ -178,9 +191,11 @@ const ScanningPanel: React.FC<ScanningPanelProps> = ({ store }) => {
     />
     <ProgressBar
       name="解析"
+      error={!!error || isInterrupted}
       pdfPage={handlingFile?.handlePdfPage} />
     <ProgressBar
       name="索引"
+      error={!!error || isInterrupted}
       pdfPage={handlingFile?.indexPdfPage} />
     {error && (
       <Result
@@ -189,24 +204,32 @@ const ScanningPanel: React.FC<ScanningPanelProps> = ({ store }) => {
         subTitle={error}
       />
     )}
+    {isInterrupted && (
+      <Result
+        status="info"
+        title="扫描中断"
+        subTitle="你可以继续使用知识库，但一些信息可能无法读取，另一些已失效的信息可能被错误读取。如果你希望知识库能正常运行，请继续扫描并等待完成。"
+      />
+    )}
   </>;
 };
 
 type ProgressBarProps = {
   readonly name: string;
+  readonly error: boolean;
   readonly pdfPage?: {
     readonly index: number;
     readonly total: number;
   };
 };
 
-const ProgressBar: React.FC<ProgressBarProps> = ({ name, pdfPage }) => {
+const ProgressBar: React.FC<ProgressBarProps> = ({ name, error, pdfPage }) => {
   if (!pdfPage) {
     return null;
   }
   const { index, total } = pdfPage;
   const percent = Math.floor(Math.min(index / total, 1.0) * 100);
-  const status = percent === 100 ? "success" : "active";
+  const status = error ? "exception" : (percent === 100 ? "success" : "active");
   return (
     <div className={styles["progress"]}>
       <label className={styles["progress-label"]}>
diff --git a/browser/src/views/Sources.tsx b/browser/src/views/Sources.tsx
index 5a47177..524dce1 100644
--- a/browser/src/views/Sources.tsx
+++ b/browser/src/views/Sources.tsx
@@ -149,6 +149,7 @@ const SourceAddition: React.FC<SourceAdditionProps> = ({ store }) => {
             该名字已存在！
           </>}>
           <Input
+            placeholder="名字"
             className={styles["source-input-name"]}
             value={addedSourceName}
             disabled={isSubmittingAddition}
@@ -156,6 +157,7 @@ const SourceAddition: React.FC<SourceAdditionProps> = ({ store }) => {
             onChange={onChangeNameInput} />
         </Popover>
         <Input
+          placeholder="知识库文件夹路径"
           ref={pathInputRef}
           value={addedSourcePath}
           disabled={isSubmittingAddition}
diff --git a/index_package/index/vector_db.py b/index_package/index/vector_db.py
index 42172da..724038b 100644
--- a/index_package/index/vector_db.py
+++ b/index_package/index/vector_db.py
@@ -9,8 +9,8 @@
 from chromadb.api.types import ID, EmbeddingFunction, IncludeEnum, Documents, Embedding, Embeddings, Document, Metadata
 from chromadb.utils import distance_functions
 
+from ..segmentation import Segment
 from .types import IndexNode, IndexSegment, IndexNodeMatching
-from ..segmentation.segmentation import Segment
 
 _DistanceFunction = Callable[[ArrayLike, ArrayLike], float]
 DistanceSpace = Literal["l2", "ip", "cosine"]
diff --git a/server/progress_events.py b/server/progress_events.py
index 8d683f1..6e47dcc 100644
--- a/server/progress_events.py
+++ b/server/progress_events.py
@@ -11,7 +11,11 @@ class ProgressPhase(IntEnum):
   SCANNING = 1
   HANDING_FILES = 2
   COMPLETED = 3
-  FAILURE = 4
+
+class InterruptionStatus(IntEnum):
+  No = 0
+  Interrupting = 1
+  Interrupted = 2
 
 @dataclass
 class HandingFile:
@@ -26,9 +30,10 @@ def __init__(self):
     self._scanned_count: int = 0
     self._handing_file: HandingFile | None = None
     self._error: str | None = None
+    self._interruption_status: InterruptionStatus = InterruptionStatus.No
     self._completed_files: list[str] = []
     self._fetcher_lock: Lock = Lock()
-    self._fetcher_queues: list[Queue[dict | None]] = []
+    self._fetcher_queues: list[Queue[dict]] = []
 
   @property
   def listeners(self) -> ProgressListeners:
@@ -46,6 +51,7 @@ def notify_scanning(self):
         self._scanned_count = 0
         self._handing_file = None
         self._error = None
+        self._interruption_status = InterruptionStatus.No
         self._completed_files.clear()
       self._phase = ProgressPhase.SCANNING
 
@@ -72,13 +78,8 @@ def _init_events(self) -> list[dict]:
           "path": path,
         })
       if self._phase == ProgressPhase.COMPLETED:
-        events.append({ "kind": "completed" })
+          events.append({ "kind": "completed" })
 
-      elif self._phase == ProgressPhase.FAILURE:
-        events.append({
-          "kind": "failure",
-          "error": self._error or "",
-        })
       elif self._phase == ProgressPhase.HANDING_FILES and \
            self._handing_file is not None:
         events.append({
@@ -99,6 +100,17 @@ def _init_events(self) -> list[dict]:
             "index": index,
             "total": total,
           })
+
+      if self._error is not None:
+        events.append({
+          "kind": "failure",
+          "error": self._error or "",
+        })
+      elif self._interruption_status == InterruptionStatus.Interrupting:
+        events.append({ "kind": "interrupting" })
+      elif self._interruption_status == InterruptionStatus.Interrupted:
+        events.append({ "kind": "interrupted" })
+
       return events
 
   def _on_after_scan(self, count: int):
@@ -162,14 +174,21 @@ def complete(self):
       "kind": "completed",
     })
 
-  def interrupt(self):
-    self._emit_event(None)
+  def set_interrupting(self):
+    with self._status_lock:
+      if self._interruption_status == InterruptionStatus.No:
+        self._interruption_status = InterruptionStatus.Interrupting
+
+    self._emit_event({ "kind": "interrupting" })
+
+  def set_interrupted(self):
+    with self._status_lock:
+      self._interruption_status = InterruptionStatus.Interrupted
+
+    self._emit_event({ "kind": "interrupted" })
 
   def fail(self, error: str):
     with self._status_lock:
-      self._phase = ProgressPhase.FAILURE
-      self._completed_files.clear()
-      self._handing_file = None
       self._error = error
 
     self._emit_event({
@@ -178,7 +197,7 @@ def fail(self, error: str):
     })
 
   def fetch_events(self) -> Generator[dict, None, None]:
-    queue: Queue[dict | None] = Queue()
+    queue: Queue[dict] = Queue()
     with self._fetcher_lock:
       init_events = self._init_events()
       self._fetcher_queues.append(queue)
@@ -188,18 +207,14 @@ def fetch_events(self) -> Generator[dict, None, None]:
       init_events.clear()
       while True:
         try:
-          event = queue.get(timeout=5.0)
-          if event is None:
-            yield { "kind": "interrupted" }
-            break
-          yield event
+          yield queue.get(timeout=5.0)
         except Empty:
           yield { "kind": "heartbeat"}
     finally:
       with self._fetcher_lock:
         self._fetcher_queues.remove(queue)
 
-  def _emit_event(self, event: dict | None) -> None:
+  def _emit_event(self, event: dict) -> None:
     with self._fetcher_lock:
       for queue in self._fetcher_queues:
         queue.put(event)
diff --git a/server/routes.py b/server/routes.py
index f2de8f8..a4deb65 100644
--- a/server/routes.py
+++ b/server/routes.py
@@ -29,11 +29,6 @@ def get_static_file(file_name: str):
 
     return send_from_directory(dir_path, file_name)
 
-  @app.route("/api/scanning", methods=["POST"])
-  def post_scanning():
-    service.start_scanning()
-    return jsonify(None), 201
-
   @app.route("/api/scanning", methods=["GET"])
   def get_scanning():
     return Response(
@@ -41,6 +36,16 @@ def get_scanning():
       content_type="text/event-stream",
     )
 
+  @app.route("/api/scanning", methods=["DELETE"])
+  def delete_scanning():
+    service.interrupt_scanning()
+    return jsonify(None), 204
+
+  @app.route("/api/scanning", methods=["POST"])
+  def post_scanning():
+    service.start_scanning()
+    return jsonify(None), 201
+
   @app.route("/api/sources", methods=["GET"])
   def get_sources():
     return jsonify([
diff --git a/server/service.py b/server/service.py
index 60892fa..aa27ce5 100644
--- a/server/service.py
+++ b/server/service.py
@@ -1,7 +1,7 @@
-from threading import Thread, Lock
+from threading import Thread, Lock, Event
 from typing import Generator
 from json import dumps
-from index_package import Service
+from index_package import Service, ServiceScanJob
 from .sources import Sources
 from .progress_events import ProgressEvents
 
@@ -14,6 +14,8 @@ def __init__(self, workspace_path: str, embedding_model: str, sources: Sources):
     self._lock: Lock = Lock()
     self._service: Service | None = None
     self._is_scanning: bool = False
+    self._scan_job: ServiceScanJob | None = None
+    self._scan_job_event: Event | None = None
     self._progress_events: ProgressEvents = ProgressEvents()
 
   @property
@@ -27,6 +29,12 @@ def ref(self) -> Service:
   def sources(self) -> Sources:
     return self._sources
 
+  def interrupt_scanning(self):
+    self._progress_events.set_interrupting()
+    scan_job = self._take_scan_job()
+    if scan_job is not None:
+      scan_job.interrupt()
+
   def gen_scanning_sse_lines(self) -> Generator[str, None, None]:
     for event in self._progress_events.fetch_events():
       yield f"data: {dumps(event, ensure_ascii=False)}\n\n"
@@ -37,6 +45,7 @@ def start_scanning(self):
         return
       self._is_scanning = True
       self._service = None
+      self._scan_job_event = Event()
 
     try:
       Thread(target=self._scan).start()
@@ -55,20 +64,48 @@ def _scan(self):
     scan_job = service.scan_job(
       progress_listeners=self._progress_events.listeners,
     )
+    with self._lock:
+      self._scan_job = scan_job
+      if self._scan_job_event is not None:
+        self._scan_job_event.set()
+        self._scan_job_event = None
+
     try:
-      completed = scan_job.start({
-        name: path
-        for name, path in self._sources.items()
-      })
-    except Exception as e:
-      self._progress_events.fail(str(e))
-      raise e
+      try:
+        completed = scan_job.start({
+          name: path
+          for name, path in self._sources.items()
+        })
+      except Exception as e:
+        self._progress_events.fail(str(e))
+        raise e
+
+      with self._lock:
+        self._service = service
+
+      if completed:
+        self._progress_events.complete()
+      else:
+        self._progress_events.set_interrupted()
+
+    finally:
+      with self._lock:
+        self._is_scanning = False
+        self._scan_job = None
 
-    if not completed:
-      self._progress_events.interrupt()
-      return
+  def _take_scan_job(self) -> ServiceScanJob | None:
+    event: Event
+    with self._lock:
+      if self._scan_job is not None:
+        scan_job = self._scan_job
+        self._scan_job = None
+        return scan_job
+      if self._scan_job_event is None:
+        return None
+      event = self._scan_job_event
 
+    event.wait()
     with self._lock:
-      self._service = service
-      self._is_scanning = False
-    self._progress_events.complete()
\ No newline at end of file
+      scan_job = self._scan_job
+      self._scan_job = None
+      return scan_job
\ No newline at end of file