Init: 第一个版本

static/app.js

@@ -0,0 +1,399 @@
+const EXAMPLES = [
+  "周末几点开门，几点关门？",
+  "柏卡会员年费多少，能借几本书？",
+  "买的书几天内可以退？",
+  "阅读区可以带外面的食物吗？",
+  "十月读书会的主题和票价是什么？",
+];
+
+const state = {
+  ready: false,
+  failed: false,
+  sending: false,
+  documents: [],
+  turns: [],
+};
+
+const messages = document.querySelector("#messages");
+const questionInput = document.querySelector("#question");
+const sendButton = document.querySelector("#send");
+const topK = document.querySelector("#top-k");
+const docForm = document.querySelector("#doc-form");
+const docTitle = document.querySelector("#doc-title");
+const docContent = document.querySelector("#doc-content");
+const saveDoc = document.querySelector("#save-doc");
+const pickFile = document.querySelector("#pick-file");
+const fileInput = document.querySelector("#file");
+const docList = document.querySelector("#doc-list");
+const pills = document.querySelector("#pills");
+const facts = document.querySelector("#facts");
+const libraryMeta = document.querySelector("#library-meta");
+
+messages.addEventListener("click", (event) => {
+  const chip = event.target.closest("[data-question]");
+  if (chip) {
+    ask(chip.dataset.question);
+    return;
+  }
+  const cite = event.target.closest(".cite");
+  if (!cite) return;
+  const turn = cite.closest(".turn");
+  turn.querySelectorAll(".cite").forEach((node) => node.classList.remove("is-on"));
+  turn.querySelectorAll(".slice").forEach((node) => node.classList.remove("is-active"));
+  cite.classList.add("is-on");
+  const slice = turn.querySelector(`.slice[data-n="${cite.dataset.n}"]`);
+  if (slice) {
+    slice.classList.add("is-active");
+    slice.scrollIntoView({ behavior: "smooth", block: "nearest" });
+  }
+});
+
+docList.addEventListener("click", (event) => {
+  const button = event.target.closest("[data-delete]");
+  if (!button) return;
+  removeDocument(button.dataset.delete, button.dataset.title);
+});
+
+document.querySelector("#composer").addEventListener("submit", (event) => {
+  event.preventDefault();
+  ask(questionInput.value);
+});
+
+questionInput.addEventListener("keydown", (event) => {
+  if (event.key === "Enter" && !event.shiftKey) {
+    event.preventDefault();
+    document.querySelector("#composer").requestSubmit();
+  }
+});
+
+docForm.addEventListener("submit", async (event) => {
+  event.preventDefault();
+  await createDocument(docTitle.value, docContent.value);
+});
+
+pickFile.addEventListener("click", () => fileInput.click());
+fileInput.addEventListener("change", async () => {
+  const file = fileInput.files && fileInput.files[0];
+  fileInput.value = "";
+  if (!file) return;
+  const body = new FormData();
+  body.append("file", file);
+  try {
+    const response = await fetch("/api/documents/upload", { method: "POST", body });
+    if (!response.ok) throw new Error(await readError(response));
+    const doc = await response.json();
+    toast(`已把《${doc.title}》切成 ${doc.chunk_count} 片并写入向量库`);
+    await refreshDocs();
+    await refreshStatus();
+  } catch (error) {
+    toast(error.message);
+  }
+});
+
+function el(tag, className, text) {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text != null) node.textContent = text;
+  return node;
+}
+
+function toast(message) {
+  const node = document.querySelector("#toast");
+  node.textContent = message;
+  node.classList.add("is-on");
+  clearTimeout(toast.timer);
+  toast.timer = setTimeout(() => node.classList.remove("is-on"), 3400);
+}
+
+async function readError(response) {
+  try {
+    const data = await response.json();
+    if (typeof data.detail === "string") return data.detail;
+  } catch {
+    /* 响应体不是 JSON */
+  }
+  return `请求失败（${response.status}）`;
+}
+
+function setBusy(busy) {
+  state.sending = busy;
+  const locked = busy || !state.ready;
+  questionInput.disabled = locked;
+  sendButton.disabled = locked;
+  topK.disabled = locked;
+  docTitle.disabled = !state.ready;
+  docContent.disabled = !state.ready;
+  saveDoc.disabled = !state.ready;
+  pickFile.disabled = !state.ready;
+  sendButton.textContent = busy ? "检索中" : "提问";
+}
+
+function renderStatus(data) {
+  pills.replaceChildren();
+  const model = el("span", "pill");
+  if (data.error) {
+    model.classList.add("is-bad");
+    model.textContent = "模型准备失败";
+  } else if (data.ready) {
+    model.classList.add("is-ok");
+    model.textContent = data.embedding_model;
+  } else {
+    model.classList.add("is-wait");
+    model.textContent = "正在下载并加载嵌入模型…";
+  }
+  const store = el("span", "pill");
+  store.append(`${data.vector_db} · `);
+  const strong = el("strong", null, `${data.documents} 篇 / ${data.chunks} 片`);
+  store.append(strong);
+  const llm = el("span", "pill");
+  if (data.llm_ready) {
+    llm.classList.add("is-ok");
+    llm.textContent = `生成模型 ${data.llm_model}`;
+  } else {
+    llm.textContent = "未配置大模型，先摘录原文";
+  }
+  pills.append(model, store, llm);
+  if (data.error) {
+    const retry = el("button", "chip", "重试");
+    retry.type = "button";
+    retry.addEventListener("click", async () => {
+      state.failed = false;
+      await fetch("/api/boot", { method: "POST" });
+      poll();
+    });
+    pills.append(retry);
+  }
+
+  facts.replaceChildren();
+  const rows = [
+    ["嵌入", data.embedding_model],
+    ["向量库", data.vector_db],
+    ["切片", `${data.chunk_size} 字，重叠 ${data.chunk_overlap} 字`],
+  ];
+  for (const [key, value] of rows) {
+    facts.append(el("dt", null, key), el("dd", null, value));
+  }
+  libraryMeta.textContent = data.ready
+    ? "示例资料是虚构的云栖书店。可以继续追加你自己的文本，提问时会一起检索。"
+    : "第一次启动会下载大约一百兆的中文嵌入模型，页面可以先开着。";
+}
+
+function renderDocs() {
+  docList.replaceChildren();
+  if (!state.documents.length) {
+    docList.append(el("p", "empty-docs quiet", "知识库还是空的。"));
+    return;
+  }
+  for (const doc of state.documents) {
+    const card = el("article", "doc");
+    const title = el("h3", "doc-title", doc.title);
+    const button = el("button", "icon-btn", "删");
+    button.type = "button";
+    button.dataset.delete = doc.id;
+    button.dataset.title = doc.title;
+    button.setAttribute("aria-label", `删除《${doc.title}》`);
+    const preview = el("p", "doc-preview", `${doc.chunk_count} 个切片 · ${doc.preview}`);
+    card.append(title, button, preview);
+    docList.append(card);
+  }
+}
+
+function appendRichText(container, text) {
+  const pattern = /〔来源(\d+)〕/g;
+  let cursor = 0;
+  for (const match of String(text || "").matchAll(pattern)) {
+    const index = match.index ?? 0;
+    if (index > cursor) container.append(text.slice(cursor, index));
+    const cite = el("button", "cite", `来源 ${match[1]}`);
+    cite.type = "button";
+    cite.dataset.n = match[1];
+    cite.title = `定位到第 ${match[1]} 条切片`;
+    container.append(cite);
+    cursor = index + match[0].length;
+  }
+  if (cursor < text.length) container.append(text.slice(cursor));
+}
+
+function renderSlice(chunk) {
+  const item = el("li", "slice");
+  item.dataset.n = String(chunk.n);
+  const top = el("div", "slice-top");
+  top.append(el("span", "slice-no", `来源 ${chunk.n}`));
+  const bar = el("div", "bar");
+  const fill = document.createElement("span");
+  fill.style.width = `${Math.max(6, Math.round(chunk.score * 100))}%`;
+  bar.append(fill);
+  top.append(bar, el("span", "slice-no", `${Math.round(chunk.score * 100)}%`));
+  const title = el("p", "slice-title", `《${chunk.title}》 · 第 ${chunk.chunk_index}/${chunk.chunk_total} 片`);
+  const body = el("p", "slice-text", chunk.text);
+  item.append(top, title, body);
+  return item;
+}
+
+function renderTurn(turn) {
+  const article = el("article", "turn");
+  const question = el("div", "question");
+  question.append(el("span", "label", "提问"), el("p", null, turn.question));
+  const row = el("div", "answer-row");
+  const answer = el("div", "answer");
+  answer.append(el("span", "label", "回答"));
+  if (turn.pending) {
+    answer.append(el("div", "pending"), el("div", "pending short"));
+  } else if (turn.error) {
+    answer.append(el("p", "warn", turn.error));
+  } else {
+    const body = el("div", "answer-body");
+    appendRichText(body, turn.answer);
+    answer.append(body);
+    const foot = el("div", "answer-foot");
+    const mode = el("span", turn.mode === "llm" ? "tag" : "tag is-extract", turn.mode === "llm" ? "模型生成" : "原文摘录");
+    foot.append(mode, el("span", null, `${turn.chunks.length} 条切片 · ${formatElapsed(turn.elapsed_ms)}`));
+    answer.append(foot);
+    if (turn.notice) answer.append(el("p", "quiet", turn.notice));
+  }
+
+  const slices = el("aside", "slices");
+  const head = el("div", "slices-head");
+  head.append(el("h3", null, "检索到的知识切片"), el("span", "quiet", turn.pending ? "检索中" : `${(turn.chunks || []).length} 条`));
+  slices.append(head);
+  if (turn.pending) {
+    slices.append(el("div", "pending"), el("div", "pending"));
+  } else if (turn.chunks && turn.chunks.length) {
+    if (turn.low_confidence) slices.append(el("p", "warn", "最高相关度偏低，请核对原文后再采信。"));
+    const list = el("ol", "slice-list");
+    turn.chunks.forEach((chunk) => list.append(renderSlice(chunk)));
+    slices.append(list);
+  } else if (!turn.error) {
+    slices.append(el("p", "quiet", "这次没有检索到切片。"));
+  }
+  row.append(answer, slices);
+  article.append(question, row);
+  return article;
+}
+
+function renderThread() {
+  messages.replaceChildren();
+  if (!state.turns.length) {
+    const empty = el("div", "empty");
+    empty.append(
+      el("h2", null, "先问一句，看证据从哪来"),
+      el("p", null, "预置了一家虚构书店的规章。回答出现在左侧，右侧是向量库检索到的原文切片。"),
+    );
+    const chips = el("div", "chips");
+    for (const sample of EXAMPLES) {
+      const button = el("button", "chip", sample);
+      button.type = "button";
+      button.dataset.question = sample;
+      button.disabled = !state.ready || state.sending;
+      chips.append(button);
+    }
+    empty.append(chips);
+    messages.append(empty);
+    return;
+  }
+  state.turns.forEach((turn) => messages.append(renderTurn(turn)));
+  messages.scrollTop = messages.scrollHeight;
+}
+
+function formatElapsed(ms) {
+  if (ms < 1000) return `${ms} ms`;
+  return `${(ms / 1000).toFixed(1)} s`;
+}
+
+async function refreshStatus() {
+  const response = await fetch("/api/status");
+  if (!response.ok) throw new Error(await readError(response));
+  const data = await response.json();
+  state.ready = Boolean(data.ready);
+  state.failed = Boolean(data.error);
+  renderStatus(data);
+  setBusy(state.sending);
+  return data;
+}
+
+async function refreshDocs() {
+  const response = await fetch("/api/documents");
+  if (!response.ok) throw new Error(await readError(response));
+  const data = await response.json();
+  state.documents = data.documents;
+  renderDocs();
+}
+
+async function poll() {
+  try {
+    const data = await refreshStatus();
+    if (data.ready) {
+      await refreshDocs();
+      renderThread();
+      questionInput.focus();
+      return;
+    }
+    if (!data.error) setTimeout(poll, 1000);
+    else renderThread();
+  } catch {
+    pills.replaceChildren(el("span", "pill is-bad", "暂时连不上问答服务"));
+    setTimeout(poll, 1500);
+  }
+}
+
+async function ask(raw) {
+  const question = (raw || "").trim();
+  if (!question || state.sending || !state.ready) return;
+  questionInput.value = "";
+  const turn = { id: crypto.randomUUID(), question, pending: true, chunks: [] };
+  state.turns.push(turn);
+  renderThread();
+  setBusy(true);
+  try {
+    const response = await fetch("/api/ask", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ question, top_k: Number(topK.value) }),
+    });
+    if (!response.ok) throw new Error(await readError(response));
+    Object.assign(turn, await response.json(), { pending: false, error: null });
+  } catch (error) {
+    turn.pending = false;
+    turn.error = error.message;
+    turn.chunks = [];
+  } finally {
+    setBusy(false);
+    renderThread();
+  }
+}
+
+async function createDocument(title, content) {
+  if (!state.ready) return;
+  try {
+    const response = await fetch("/api/documents", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ title: title.trim(), content }),
+    });
+    if (!response.ok) throw new Error(await readError(response));
+    const doc = await response.json();
+    docTitle.value = "";
+    docContent.value = "";
+    toast(`已把《${doc.title}》切成 ${doc.chunk_count} 片并写入向量库`);
+    await refreshDocs();
+    await refreshStatus();
+  } catch (error) {
+    toast(error.message);
+  }
+}
+
+async function removeDocument(id, title) {
+  if (!confirm(`从向量库删除《${title}》？`)) return;
+  try {
+    const response = await fetch(`/api/documents/${id}`, { method: "DELETE" });
+    if (!response.ok) throw new Error(await readError(response));
+    toast(`已删除《${title}》`);
+    await refreshDocs();
+    await refreshStatus();
+  } catch (error) {
+    toast(error.message);
+  }
+}
+
+renderThread();
+poll();

static/index.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>知迹 · 检索问答</title>
+  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect fill='%231f6a52' width='32' height='32' rx='6'/%3E%3Cpath d='M8 9.5h7.2c1.6 0 2.8 1 2.8 2.6S16.8 15 15.2 15H8V9.5zm0 7h7.6c1.8 0 3.1 1.1 3.1 2.8S17.4 22 15.6 22H8v-5.5z' fill='%23f6f1e6'/%3E%3C/svg%3E" />
+  <link rel="stylesheet" href="/static/styles.css?v=1" />
+</head>
+<body>
+  <div class="app">
+    <header class="top">
+      <div class="brand">
+        <span class="mark" aria-hidden="true">知</span>
+        <div>
+          <p class="kicker">Learn · RAG</p>
+          <h1>知迹</h1>
+        </div>
+      </div>
+      <p class="lede">提问之后，回答旁边留下这次真正检索到的知识切片。</p>
+      <div class="pills" id="pills" aria-live="polite">
+        <span class="pill" id="pill-model">正在准备嵌入模型…</span>
+      </div>
+    </header>
+
+    <div class="workspace">
+      <section class="chat">
+        <div id="messages" class="messages"></div>
+        <form id="composer" class="composer">
+          <label class="sr" for="question">问题</label>
+          <textarea id="question" rows="2" maxlength="2000" placeholder="问问云栖书店，例如：柏卡会员能借几本书？" disabled></textarea>
+          <div class="composer-bar">
+            <label class="topk">
+              切片数
+              <select id="top-k" disabled>
+                <option value="3">3</option>
+                <option value="4" selected>4</option>
+                <option value="6">6</option>
+              </select>
+            </label>
+            <p class="hint">Enter 发送，Shift+Enter 换行</p>
+            <button id="send" class="send" type="submit" disabled>提问</button>
+          </div>
+        </form>
+      </section>
+
+      <aside class="library">
+        <div class="library-head">
+          <div>
+            <p class="kicker">知识库</p>
+            <h2>写入资料，再拿去检索</h2>
+          </div>
+          <p id="library-meta" class="quiet">嵌入模型与向量库准备好之后，可以加入你自己的文本。</p>
+          <dl class="facts" id="facts"></dl>
+        </div>
+        <form id="doc-form" class="doc-form">
+          <label>
+            标题
+            <input id="doc-title" name="title" maxlength="80" placeholder="例如：退换货规则" disabled />
+          </label>
+          <label>
+            正文
+            <textarea id="doc-content" name="content" rows="6" placeholder="贴入一篇说明、规章或笔记。系统会切成小段，计算向量，存进 Chroma。" disabled></textarea>
+          </label>
+          <div class="doc-actions">
+            <button id="save-doc" type="submit" class="ghost" disabled>写入向量库</button>
+            <button id="pick-file" type="button" class="textish" disabled>导入 txt / md</button>
+            <input id="file" type="file" accept=".txt,.md,.markdown,text/plain" hidden />
+          </div>
+        </form>
+        <div id="doc-list" class="doc-list"></div>
+      </aside>
+    </div>
+  </div>
+  <div id="toast" class="toast" role="status"></div>
+  <script src="/static/app.js?v=1"></script>
+</body>
+</html>

static/styles.css

@@ -0,0 +1,368 @@
+:root {
+  --bg: #efe7d8;
+  --ink: #221c16;
+  --muted: #6f655b;
+  --line: #e0d3bf;
+  --paper: #fffaf2;
+  --paper-2: #f6efe3;
+  --green: #1d684f;
+  --green-deep: #144a38;
+  --green-soft: #e4f3ec;
+  --cinnabar: #b84324;
+  --gold: #8d6232;
+  --shadow: 0 16px 40px rgba(68, 42, 16, 0.08);
+  --serif: "Songti SC", "STSong", "Noto Serif SC", "Times New Roman", serif;
+  --sans: "PingFang SC", "Hiragino Sans GB", "Avenir Next", "Segoe UI", sans-serif;
+  --radius: 18px;
+}
+
+* { box-sizing: border-box; }
+html, body { height: 100%; }
+body {
+  margin: 0;
+  color: var(--ink);
+  font-family: var(--sans);
+  background:
+    radial-gradient(900px 420px at -10% -10%, rgba(196, 112, 52, 0.18), transparent 55%),
+    radial-gradient(800px 380px at 110% -20%, rgba(29, 104, 79, 0.16), transparent 50%),
+    linear-gradient(180deg, #f4eee4 0%, #e9e1d2 100%);
+}
+button, input, textarea, select { font: inherit; color: inherit; }
+button { cursor: pointer; }
+h1, h2, h3, p { margin: 0; }
+::selection { background: #d5eee3; }
+
+.app {
+  width: min(1240px, calc(100% - 28px));
+  height: 100vh;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  padding-top: 18px;
+}
+
+.top {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: 18px 28px;
+  align-items: end;
+  padding: 4px 6px 16px;
+}
+.brand { display: flex; gap: 12px; align-items: center; }
+.mark {
+  width: 44px;
+  height: 44px;
+  display: grid;
+  place-items: center;
+  border-radius: 12px;
+  background: var(--green-deep);
+  color: #f6f0e4;
+  font-family: var(--serif);
+  font-size: 24px;
+}
+.kicker {
+  font-size: 11px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--gold);
+}
+h1 {
+  font-family: var(--serif);
+  font-size: 32px;
+  font-weight: 600;
+  line-height: 1;
+}
+.lede {
+  max-width: 460px;
+  color: var(--muted);
+  line-height: 1.55;
+  padding-bottom: 4px;
+}
+.pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
+.pill {
+  border: 1px solid var(--line);
+  background: rgba(255, 250, 242, 0.8);
+  border-radius: 999px;
+  padding: 6px 10px;
+  font-size: 12px;
+  color: var(--muted);
+}
+.pill strong { color: var(--ink); font-weight: 600; }
+.pill.is-ok { color: var(--green-deep); border-color: #b7d7c8; background: var(--green-soft); }
+.pill.is-wait { color: var(--gold); }
+.pill.is-bad { color: var(--cinnabar); border-color: #f0c2b6; background: #fff1ec; }
+
+.workspace {
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 332px;
+  gap: 16px;
+  padding-bottom: 16px;
+}
+.chat, .library {
+  min-height: 0;
+  background: rgba(255, 250, 242, 0.78);
+  border: 1px solid rgba(255, 255, 255, 0.7);
+  box-shadow: var(--shadow);
+  border-radius: var(--radius);
+}
+.chat { display: flex; flex-direction: column; overflow: hidden; }
+.messages {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.empty {
+  margin: auto;
+  max-width: 640px;
+  text-align: center;
+  padding: 24px 8px 12px;
+}
+.empty h2 {
+  font-family: var(--serif);
+  font-size: 34px;
+  font-weight: 600;
+  letter-spacing: -0.03em;
+}
+.empty p { margin-top: 10px; color: var(--muted); line-height: 1.7; }
+.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
+.chip, .textish, .ghost, .send, .cite, .icon-btn {
+  border: 1px solid var(--line);
+  background: var(--paper);
+  border-radius: 999px;
+}
+.chip {
+  padding: 8px 12px;
+  color: var(--green-deep);
+}
+.chip:hover, .icon-btn:hover, .textish:hover, .ghost:hover { border-color: #b7d7c8; background: var(--green-soft); }
+.chip:disabled, .send:disabled, .ghost:disabled, .textish:disabled, textarea:disabled, input:disabled, select:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.turn {
+  border: 1px solid var(--line);
+  background: var(--paper);
+  border-radius: 16px;
+  overflow: hidden;
+}
+.question {
+  padding: 14px 16px 12px;
+  border-bottom: 1px solid var(--line);
+  background:
+    linear-gradient(90deg, rgba(184, 67, 36, 0.08), transparent 28%),
+    var(--paper-2);
+}
+.question p {
+  margin-top: 4px;
+  font-family: var(--serif);
+  font-size: 20px;
+  line-height: 1.45;
+}
+.label {
+  font-size: 11px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--gold);
+}
+.answer-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1.15fr) minmax(250px, 0.85fr);
+}
+.answer, .slices { padding: 14px 16px 16px; min-width: 0; }
+.slices {
+  background: #fbf6ee;
+  border-left: 1px solid var(--line);
+  max-height: 560px;
+  overflow: auto;
+}
+.answer-body {
+  margin-top: 8px;
+  font-family: var(--serif);
+  font-size: 16.5px;
+  line-height: 1.8;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.answer-foot, .quiet, .hint, .slice-meta, .doc-preview, .warn {
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.55;
+}
+.answer-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
+.tag {
+  border-radius: 999px;
+  padding: 2px 8px;
+  background: var(--green-soft);
+  color: var(--green-deep);
+}
+.tag.is-extract { background: #f8ead7; color: var(--gold); }
+.warn {
+  margin: 8px 0 0;
+  color: var(--cinnabar);
+}
+.cite {
+  display: inline-flex;
+  align-items: center;
+  margin: 0 2px;
+  padding: 0 6px;
+  height: 22px;
+  border-radius: 999px;
+  background: var(--green-soft);
+  color: var(--green-deep);
+  border-color: #b7d7c8;
+  font-family: var(--sans);
+  font-size: 12px;
+  vertical-align: 1px;
+}
+.cite:hover, .cite.is-on { background: var(--green); color: white; border-color: var(--green); }
+
+.slices-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  align-items: baseline;
+  margin-bottom: 10px;
+}
+.slices-head h3 { font-size: 14px; font-weight: 600; }
+.slice-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
+.slice {
+  border: 1px solid var(--line);
+  background: var(--paper);
+  border-radius: 12px;
+  padding: 10px 10px 11px;
+}
+.slice.is-active { border-color: var(--green); box-shadow: inset 3px 0 0 var(--green); }
+.slice-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
+.slice-no {
+  font-variant-numeric: tabular-nums;
+  font-size: 12px;
+  color: var(--cinnabar);
+  font-weight: 650;
+}
+.bar {
+  flex: 1;
+  height: 4px;
+  border-radius: 999px;
+  background: #efe4d4;
+  overflow: hidden;
+}
+.bar span { display: block; height: 100%; background: var(--cinnabar); border-radius: inherit; }
+.slice-title { margin-top: 6px; font-size: 13px; font-weight: 600; }
+.slice-text {
+  margin: 4px 0 0;
+  font-size: 13px;
+  line-height: 1.65;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.pending {
+  height: 12px;
+  margin-top: 12px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, #f3eadc, #e7f3ec, #f3eadc);
+  background-size: 200% 100%;
+  animation: sheen 1.1s linear infinite;
+}
+.pending.short { width: 46%; }
+@keyframes sheen { to { background-position: -200% 0; } }
+
+.composer { border-top: 1px solid var(--line); padding: 12px; background: rgba(255, 250, 242, 0.92); }
+textarea, input[type="text"], input:not([type="file"]), select {
+  width: 100%;
+  border: 1px solid var(--line);
+  background: white;
+  border-radius: 12px;
+  padding: 10px 12px;
+  outline: none;
+}
+textarea { resize: vertical; line-height: 1.55; }
+textarea:focus, input:focus, select:focus { border-color: #8fbfa8; }
+.composer textarea { min-height: 64px; }
+.composer-bar, .doc-actions { display: flex; align-items: center; gap: 10px; }
+.composer-bar { margin-top: 8px; }
+.hint { margin-right: auto; }
+.topk { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
+.topk select { width: auto; padding: 6px 8px; border-radius: 10px; }
+.send, .ghost {
+  border-radius: 12px;
+  padding: 9px 16px;
+  background: var(--green);
+  color: white;
+  border-color: var(--green-deep);
+}
+.ghost { background: transparent; color: var(--green-deep); }
+.textish { background: transparent; padding: 8px 10px; }
+
+.library { display: flex; flex-direction: column; overflow: hidden; }
+.library-head, .doc-form { padding: 14px 14px 0; }
+.library-head h2 { font-family: var(--serif); font-size: 22px; font-weight: 600; margin-top: 2px; }
+.library-head .quiet { margin-top: 8px; }
+.facts { display: grid; grid-template-columns: 72px 1fr; gap: 4px 8px; margin: 12px 0 0; font-size: 12px; }
+.facts dt { color: var(--muted); }
+.facts dd { margin: 0; }
+.doc-form { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; }
+.doc-form label, .sr { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
+.sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+}
+.doc-actions { margin: 2px 0 12px; }
+.doc-list { flex: 1; overflow: auto; padding: 0 10px 12px; display: flex; flex-direction: column; gap: 8px; }
+.doc {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 4px 8px;
+  padding: 10px;
+  border-radius: 12px;
+  background: var(--paper-2);
+}
+.doc-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.doc-preview { grid-column: 1 / -1; }
+.icon-btn {
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  color: var(--cinnabar);
+}
+.empty-docs { padding: 8px 6px 12px; }
+
+.toast {
+  position: fixed;
+  left: 50%;
+  bottom: 22px;
+  transform: translateX(-50%) translateY(12px);
+  background: var(--ink);
+  color: #f6f0e4;
+  padding: 10px 14px;
+  border-radius: 999px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  max-width: min(520px, calc(100% - 32px));
+}
+.toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
+
+@media (max-width: 980px) {
+  .app { height: auto; min-height: 100vh; }
+  .top, .workspace, .answer-row { grid-template-columns: 1fr; }
+  .pills { justify-content: flex-start; }
+  .workspace { display: flex; flex-direction: column; }
+  .chat { min-height: 70vh; }
+  .library { min-height: 520px; }
+  .slices { border-left: 0; border-top: 1px solid var(--line); max-height: none; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .pending { animation: none; }
+  .toast { transition: none; }
+}