npm - @templmf/temp-solf-lmf - Versions diffs - 0.0.162 → 0.0.164 - Mend

@templmf/temp-solf-lmf 0.0.162 → 0.0.164

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/aws/README.md +70 -0
package/aws/S3BucketExplorer.java +371 -0
package/aws/pom.xml +60 -0
package/package.json +1 -1
package/server/env.example +0 -13
package/server/package-lock.json +0 -861
package/server/package.json +0 -17
package/server/public/index.html +0 -683
package/server/src/index.js +0 -269
package/server/src/opencodeClient.js +0 -40
package/server/src/ownership.js +0 -60

package/server/public/index.html DELETED Viewed

@@ -1,683 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-<meta charset="UTF-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<title>opencode 多用户网关 · 演示</title>
-<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.4.31/vue.global.prod.js"></script>
-<style>
-  :root {
-    --bg: #14161a;
-    --panel: #1b1e24;
-    --panel-2: #21252c;
-    --border: #2a2e37;
-    --text: #e6e8eb;
-    --muted: #8b8f99;
-    --accent: #e8a33d;
-    --accent-dim: #a97a34;
-    --danger: #d9695f;
-    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
-  }
-  * { box-sizing: border-box; }
-  html, body { height: 100%; margin: 0; }
-  body {
-    background: var(--bg);
-    color: var(--text);
-    font-family: var(--sans);
-    font-size: 14px;
-    line-height: 1.5;
-  }
-  #app { height: 100vh; display: flex; flex-direction: column; }
-  .topbar {
-    display: flex; align-items: center; justify-content: space-between;
-    padding: 10px 16px;
-    border-bottom: 1px solid var(--border);
-    background: var(--panel);
-    flex-shrink: 0;
-  }
-  .topbar .brand { font-weight: 600; letter-spacing: 0.2px; }
-  .topbar .brand span { color: var(--accent); }
-  .identity {
-    display: flex; align-items: center; gap: 8px;
-    font-family: var(--mono); font-size: 12px; color: var(--muted);
-  }
-  .identity .dot {
-    width: 7px; height: 7px; border-radius: 50%;
-    background: #4ade80; box-shadow: 0 0 6px #4ade8080;
-  }
-  .identity .dot.off { background: #6b7280; box-shadow: none; }
-  .identity code {
-    background: var(--panel-2); border: 1px solid var(--border);
-    padding: 2px 6px; border-radius: 4px; color: var(--text);
-  }
-  .layout { flex: 1; display: flex; min-height: 0; }
-  .sidebar {
-    width: 280px; flex-shrink: 0;
-    border-right: 1px solid var(--border);
-    background: var(--panel);
-    display: flex; flex-direction: column;
-  }
-  .sidebar-head {
-    padding: 14px 16px 10px; display: flex; align-items: center; justify-content: space-between;
-  }
-  .sidebar-head h2 { font-size: 12px; text-transform: none; letter-spacing: 0.3px; color: var(--muted); margin: 0; font-weight: 500; }
-  .new-btn {
-    background: var(--accent); color: #1a1305; border: none;
-    padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: 600;
-    cursor: pointer;
-  }
-  .new-btn:hover { background: #f0ae4c; }
-  .new-btn:disabled { opacity: 0.5; cursor: default; }
-  .session-list { flex: 1; overflow-y: auto; padding: 4px 8px; }
-  .session-item {
-    padding: 10px 10px; border-radius: 8px; cursor: pointer;
-    border: 1px solid transparent;
-    margin-bottom: 2px;
-  }
-  .session-item:hover { background: var(--panel-2); }
-  .session-item.active { background: var(--panel-2); border-color: var(--border); }
-  .session-item .title { font-size: 13px; }
-  .session-item .id {
-    font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 2px;
-  }
-  .empty-hint { padding: 24px 16px; color: var(--muted); font-size: 12.5px; }
-  .chat { flex: 1; display: flex; flex-direction: column; min-width: 0; }
-  .chat-empty {
-    flex: 1; display: flex; align-items: center; justify-content: center;
-    color: var(--muted); font-size: 13px;
-  }
-  .messages { flex: 1; overflow-y: auto; padding: 20px 24px; }
-  .msg { max-width: 640px; margin-bottom: 16px; display: flex; }
-  .msg.user { justify-content: flex-end; margin-left: auto; }
-  .msg.assistant { flex-direction: column; }
-  .bubble {
-    padding: 10px 14px; border-radius: 10px; white-space: pre-wrap; word-break: break-word;
-  }
-  .msg.user .bubble { background: var(--accent-dim); color: #fff2de; border-bottom-right-radius: 2px; }
-  .msg.assistant .bubble { background: var(--panel-2); border: 1px solid var(--border); border-bottom-left-radius: 2px; }
-  .msg .role {
-    font-family: var(--mono); font-size: 10.5px; color: var(--muted);
-    margin-bottom: 4px;
-  }
-  /* 思考过程：默认折叠，用原生 <details>，不需要额外 JS 状态 */
-  .reasoning {
-    max-width: 640px; margin-bottom: 6px;
-    border: 1px dashed var(--border); border-radius: 8px;
-    background: #191c22;
-  }
-  .reasoning summary {
-    cursor: pointer; list-style: none; padding: 7px 12px;
-    font-size: 12px; color: var(--muted); font-family: var(--mono);
-    display: flex; align-items: center; gap: 6px;
-  }
-  .reasoning summary::-webkit-details-marker { display: none; }
-  .reasoning summary::before { content: "▸"; transition: transform 0.15s; }
-  .reasoning[open] summary::before { transform: rotate(90deg); }
-  .reasoning-text {
-    padding: 0 12px 10px; white-space: pre-wrap; word-break: break-word;
-    font-size: 12.5px; color: #a9adb6; border-top: 1px solid var(--border); padding-top: 8px;
-  }
-  .tool-line {
-    max-width: 640px; margin-bottom: 6px; font-size: 12px; color: var(--muted);
-    font-family: var(--mono); padding: 4px 12px; display: flex; align-items: center; gap: 6px;
-  }
-  .tool-line .status-running { color: var(--accent); }
-  .tool-line .status-error { color: var(--danger); }
-  .tool-line .status-completed { color: #6bbf87; }
-  .cursor {
-    display: inline-block; width: 7px; height: 14px; background: var(--accent);
-    margin-left: 2px; vertical-align: text-bottom; animation: blink 1s step-start infinite;
-  }
-  @keyframes blink { 50% { opacity: 0; } }
-  .status-pill {
-    font-family: var(--mono); font-size: 10px; color: var(--accent);
-    margin-left: 6px; letter-spacing: 0.2px;
-  }
-  .thinking-dots { display: inline-flex; align-items: center; gap: 5px; }
-  .thinking-dot {
-    width: 5px; height: 5px; border-radius: 50%; background: var(--muted);
-    animation: pulse 1.2s ease-in-out infinite;
-  }
-  .thinking-dot:nth-child(2) { animation-delay: 0.15s; }
-  .thinking-dot:nth-child(3) { animation-delay: 0.3s; }
-  @keyframes pulse { 0%, 60%, 100% { opacity: 0.25; transform: scale(0.85); } 30% { opacity: 1; transform: scale(1); } }
-  /* "正在处理" 占位气泡的淡入淡出，避免切换到真实内容时的突兀感 */
-  .thinking-fade-enter-active { transition: opacity 0.25s ease; }
-  .thinking-fade-leave-active { transition: opacity 0.45s ease; }
-  .thinking-fade-enter-from,
-  .thinking-fade-leave-to { opacity: 0; }
-  .composer {
-    border-top: 1px solid var(--border);
-    padding: 14px 24px 18px;
-    display: flex; flex-direction: column; gap: 10px; flex-shrink: 0;
-    background: var(--panel);
-  }
-  .composer-row { display: flex; gap: 10px; }
-  .model-select {
-    background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px;
-    color: var(--text); font-size: 12px; padding: 5px 8px; font-family: var(--mono);
-    max-width: 320px;
-  }
-  .model-select:focus { outline: none; border-color: var(--accent-dim); }
-  .composer textarea {
-    flex: 1; resize: none; min-height: 42px; max-height: 160px;
-    background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
-    color: var(--text); padding: 10px 12px; font-family: var(--sans); font-size: 13.5px;
-  }
-  .composer textarea:focus { outline: none; border-color: var(--accent-dim); }
-  .send-btn {
-    background: var(--accent); color: #1a1305; border: none;
-    padding: 0 18px; border-radius: 8px; font-weight: 600; cursor: pointer;
-  }
-  .send-btn:disabled { opacity: 0.4; cursor: default; }
-  .stop-btn {
-    background: transparent; color: var(--danger); border: 1px solid var(--danger);
-    padding: 0 16px; border-radius: 8px; font-weight: 600; cursor: pointer;
-  }
-  .stop-btn:hover { background: #d9695f1a; }
-  .session-item { position: relative; }
-  .session-item .close-btn {
-    position: absolute; right: 8px; top: 8px;
-    width: 18px; height: 18px; border-radius: 4px; border: none;
-    background: transparent; color: var(--muted); font-size: 13px; line-height: 1;
-    cursor: pointer; display: none; align-items: center; justify-content: center;
-  }
-  .session-item:hover .close-btn { display: flex; }
-  .session-item .close-btn:hover { background: #d9695f33; color: var(--danger); }
-</style>
-</head>
-<body>
-<div id="app"></div>
-<script type="module">
-const { createApp, ref, onMounted, nextTick } = Vue;
-createApp({
-  setup() {
-    const me = ref(null);
-    const sessions = ref([]);
-    const activeId = ref(null);
-    const messages = ref([]); // [{ id, role, done, parts: [{id, type, text}] }]
-    const draft = ref("");
-    const sending = ref(false);
-    const creating = ref(false);
-    const modelOptions = ref([]); // [{ providerID, modelID, label }]
-    const selectedModelKey = ref(""); // "providerID::modelID"
-    const eventsConnected = ref(false);
-    const awaitingFirst = ref(false); // 已发送、但还没收到任何事件反馈时为 true
-    const aborting = ref(false); // 用户主动点了"停止生成"，此时的请求失败不算错误
-    // partID -> type，用于在 message.part.delta（不带 type 字段）先于
-    // message.part.updated 到达时也能归类到正确的类型
-    const partTypeCache = {};
-    // messageID -> role，用于区分某个事件是"用户消息自己的回显"还是"assistant 的真实活动"，
-    // 避免用户消息的确认事件把"正在处理"占位提示提前清掉
-    const messageRoles = {};
-    async function api(url, opts = {}) {
-      const res = await fetch(url, {
-        credentials: "include",
-        headers: { "Content-Type": "application/json" },
-        ...opts,
-      });
-      if (!res.ok) {
-        const body = await res.json().catch(() => ({}));
-        throw new Error(body.error || `请求失败 (${res.status})`);
-      }
-      return res.status === 204 ? null : res.json();
-    }
-    async function loadMe() {
-      me.value = await api("/api/me");
-    }
-    async function loadModels() {
-      const { providers, defaults } = await api("/api/providers");
-      const options = [];
-      for (const p of providers) {
-        for (const modelID of Object.keys(p.models || {})) {
-          options.push({
-            providerID: p.id,
-            modelID,
-            label: `${p.name || p.id} / ${p.models[modelID]?.name || modelID}`,
-          });
-        }
-      }
-      modelOptions.value = options;
-      const firstProviderId = Object.keys(defaults || {})[0];
-      if (firstProviderId) {
-        const key = `${firstProviderId}::${defaults[firstProviderId]}`;
-        if (options.some((o) => `${o.providerID}::${o.modelID}` === key)) {
-          selectedModelKey.value = key;
-          return;
-        }
-      }
-      if (options[0]) {
-        selectedModelKey.value = `${options[0].providerID}::${options[0].modelID}`;
-      }
-    }
-    async function loadSessions() {
-      sessions.value = await api("/api/sessions");
-    }
-    async function createSession() {
-      creating.value = true;
-      try {
-        const s = await api("/api/sessions", {
-          method: "POST",
-          body: JSON.stringify({ title: `会话 ${new Date().toLocaleTimeString()}` }),
-        });
-        sessions.value.unshift(s);
-        await selectSession(s.id);
-      } catch (e) {
-        alert(e.message);
-      } finally {
-        creating.value = false;
-      }
-    }
-    async function selectSession(id) {
-      activeId.value = id;
-      messages.value = [];
-      awaitingFirst.value = false;
-      try {
-        const list = await api(`/api/sessions/${id}/messages`);
-        messages.value = list.map((entry) => {
-          messageRoles[entry.info.id] = entry.info.role;
-          return {
-            id: entry.info.id,
-            role: entry.info.role,
-            done: !!entry.info.time?.completed,
-            parts: (entry.parts || []).map((p) => ({
-              id: p.id,
-              type: p.type,
-              text: p.text || "",
-              tool: p.tool,
-              state: p.state ? { ...p.state } : undefined,
-            })),
-          };
-        });
-        scrollToBottom();
-      } catch (e) {
-        alert(e.message);
-      }
-    }
-    function findOrCreateMessage(id, role) {
-      let m = messages.value.find((x) => x.id === id);
-      if (!m) {
-        m = { id, role, done: false, parts: [] };
-        messages.value.push(m);
-      }
-      return m;
-    }
-    function findOrCreatePart(m, partId, type) {
-      let p = m.parts.find((x) => x.id === partId);
-      if (!p) {
-        p = { id: partId, type: type || "text", text: "" };
-        m.parts.push(p);
-      } else if (type) {
-        p.type = type;
-      }
-      return p;
-    }
-    // 把 message.part.updated 里 tool 相关的字段也同步进来（工具名、执行状态）
-    function applyToolFields(p, part) {
-      if (part.tool) p.tool = part.tool;
-      if (part.state) p.state = { ...part.state };
-    }
-    // ---- 只关心两种展示类型：text（正文）和 reasoning（思考过程） ----
-    function mainText(m) {
-      return m.parts.filter((p) => p.type === "text").map((p) => p.text).join("");
-    }
-    function reasoningText(m) {
-      return m.parts.filter((p) => p.type === "reasoning").map((p) => p.text).join("");
-    }
-    function toolCalls(m) {
-      return m.parts.filter((p) => p.type === "tool");
-    }
-    async function send() {
-      const text = draft.value.trim();
-      if (!text || !activeId.value || sending.value) return;
-      const sessionAtSend = activeId.value;
-      draft.value = "";
-      messages.value.push({
-        id: `local-user-${Date.now()}`,
-        role: "user",
-        done: true,
-        parts: [{ id: "t", type: "text", text }],
-      });
-      scrollToBottom();
-      sending.value = true;
-      awaitingFirst.value = true; // 发出去了，但还没收到任何事件——显示"正在处理"
-      try {
-        const [providerID, modelID] = selectedModelKey.value.split("::");
-        // 这个 await 会一直等到 opencode 完全生成结束才 resolve；
-        // 期间的增量内容靠下面 connectEvents() 的 SSE 实时渲染，不依赖这里。
-        await api(`/api/sessions/${activeId.value}/prompt`, {
-          method: "POST",
-          body: JSON.stringify({ text, providerID, modelID }),
-        });
-        // 兜底：SSE 是尽力而为的转发，个别事件可能丢失（网络抖动/重连间隙）。
-        // 生成结束后主动拉一次权威数据，把内容补全，避免"看起来没说完"。
-        if (activeId.value === sessionAtSend) await syncMessages(sessionAtSend);
-      } catch (e) {
-        if (aborting.value) {
-          // 用户主动点了"停止生成"——请求被打断是预期行为，不当作错误展示，
-          // 只需要把当前这条 assistant 消息标记为"已结束"即可。
-          const last = [...messages.value].reverse().find((m) => m.role === "assistant");
-          if (last) last.done = true;
-        } else {
-          messages.value.push({
-            id: `local-error-${Date.now()}`,
-            role: "assistant",
-            done: true,
-            parts: [{ id: "e", type: "text", text: `[出错] ${e.message}` }],
-          });
-        }
-        scrollToBottom();
-      } finally {
-        sending.value = false;
-        awaitingFirst.value = false;
-        aborting.value = false;
-      }
-    }
-    // 主动中止正在进行的生成
-    async function abortGeneration() {
-      if (!activeId.value || !sending.value) return;
-      aborting.value = true;
-      try {
-        await api(`/api/sessions/${activeId.value}/abort`, { method: "POST" });
-      } catch (e) {
-        console.error("中止失败:", e.message);
-        aborting.value = false; // 中止请求本身失败了，交回给正常的错误提示逻辑
-      }
-    }
-    // 结束并删除一个会话
-    async function endSession(id) {
-      if (!confirm("确定要结束并删除这个会话吗？此操作不可撤销。")) return;
-      try {
-        await api(`/api/sessions/${id}`, { method: "DELETE" });
-        sessions.value = sessions.value.filter((s) => s.id !== id);
-        if (activeId.value === id) {
-          activeId.value = null;
-          messages.value = [];
-          if (sessions.value[0]) await selectSession(sessions.value[0].id);
-        }
-      } catch (e) {
-        alert(e.message);
-      }
-    }
-    // 用服务端权威数据刷新当前会话的消息（合并进已有的响应式对象，减少画面跳动）
-    async function syncMessages(sessionId) {
-      try {
-        const list = await api(`/api/sessions/${sessionId}/messages`);
-        if (activeId.value !== sessionId) return; // 用户已经切走了，不覆盖
-        // 兜底：如果 message.updated（role: user）事件没收到，本地乐观回显不会被
-        // 正常清理掉，这里用服务端权威列表反查一次，防止残留导致重复显示。
-        messages.value = messages.value.filter((m) => !m.id.startsWith("local-user-"));
-        for (const entry of list) {
-          messageRoles[entry.info.id] = entry.info.role;
-          const m = findOrCreateMessage(entry.info.id, entry.info.role);
-          m.done = !!entry.info.time?.completed;
-          for (const part of entry.parts || []) {
-            const p = findOrCreatePart(m, part.id, part.type);
-            if (typeof part.text === "string") p.text = part.text;
-            applyToolFields(p, part);
-          }
-        }
-        scrollToBottom();
-      } catch {
-        // 兜底同步失败不影响已经通过 SSE 渲染出来的内容，静默即可
-      }
-    }
-    function handleKeydown(e) {
-      if (e.key === "Enter" && !e.shiftKey) {
-        e.preventDefault();
-        send();
-      }
-    }
-    function scrollToBottom() {
-      nextTick(() => {
-        const el = document.querySelector(".messages");
-        if (el) el.scrollTop = el.scrollHeight;
-      });
-    }
-    // ---- SSE：把 opencode 的增量事件实时映射到 messages ----
-    function handleEvent(evt) {
-      switch (evt.type) {
-        case "message.updated": {
-          const info = evt.properties?.info;
-          if (!info || info.sessionID !== activeId.value) return;
-          messageRoles[info.id] = info.role;
-          if (info.role === "user") {
-            // 这是服务端对"你刚发的那条消息"的权威确认，真实 id 和我们发送时
-            // 本地乐观回显用的临时 id 不一样——把临时那条清掉，避免重复显示。
-            messages.value = messages.value.filter((m) => !m.id.startsWith("local-user-"));
-          }
-          // 注意：这里不清除 awaitingFirst。message.updated 只说明 opencode
-          // 在内部创建/更新了一个消息对象（可能只是个还没有任何内容的空壳），
-          // 不代表已经有可以展示的真实内容——真正有内容出现要看下面的
-          // message.part.updated / message.part.delta。之前把清除逻辑放在这里，
-          // 导致"消息壳子"一创建（几乎瞬间）"..."就被撤掉了，但实际文字可能
-          // 还要再等几秒到几十秒才真正生成出来，中间出现一大段空白期。
-          const m = findOrCreateMessage(info.id, info.role);
-          m.done = !!info.time?.completed;
-          break;
-        }
-        case "message.part.updated": {
-          const part = evt.properties?.part;
-          if (!part || part.sessionID !== activeId.value) return;
-          if (messageRoles[part.messageID] !== "user") {
-            awaitingFirst.value = false; // 哪怕只是工具调用开始，也算"有动静"了
-          }
-          partTypeCache[part.id] = part.type;
-          const m = findOrCreateMessage(part.messageID, "assistant");
-          const p = findOrCreatePart(m, part.id, part.type);
-          if (typeof part.text === "string") p.text = part.text; // 全量快照，直接覆盖
-          applyToolFields(p, part);
-          scrollToBottom();
-          break;
-        }
-        case "message.part.delta": {
-          const props = evt.properties || {};
-          if (props.sessionID !== activeId.value) return;
-          if (messageRoles[props.messageID] !== "user") {
-            awaitingFirst.value = false;
-          }
-          if (props.field !== "text") return; // 目前只处理文本类增量
-          const m = findOrCreateMessage(props.messageID, "assistant");
-          const p = findOrCreatePart(m, props.partID, partTypeCache[props.partID]);
-          p.text += props.delta || ""; // 增量追加，做到打字机效果
-          scrollToBottom();
-          break;
-        }
-        case "message.removed": {
-          const props = evt.properties || {};
-          if (props.sessionID !== activeId.value) return;
-          messages.value = messages.value.filter((m) => m.id !== props.messageID);
-          break;
-        }
-        default:
-          break; // 其余事件类型（session 状态等）这个演示先不处理
-      }
-    }
-    function connectEvents() {
-      const es = new EventSource("/api/events");
-      es.onopen = () => (eventsConnected.value = true);
-      es.onerror = () => (eventsConnected.value = false);
-      let lastLogAt = performance.now();
-      es.onmessage = (e) => {
-        eventsConnected.value = true;
-        const evt = JSON.parse(e.data);
-        // 调试用：打印每条事件到达的时间点和与上一条的间隔。
-        // 正常应该是「发送后很快陆续到达，条目间隔几十~几百毫秒」；
-        // 如果发现一大串事件的时间戳几乎完全相同（间隔 <5ms），
-        // 说明事件是被中间某一层攒批之后一次性冲下来的，不是真·实时。
-        const now = performance.now();
-        console.log(
-          `[SSE ${now.toFixed(0)}ms +${(now - lastLogAt).toFixed(0)}ms] ${evt.type}`,
-          evt.properties
-        );
-        lastLogAt = now;
-        handleEvent(evt);
-      };
-    }
-    onMounted(async () => {
-      await loadMe();
-      await loadModels();
-      await loadSessions();
-      if (sessions.value[0]) await selectSession(sessions.value[0].id);
-      connectEvents();
-    });
-    return {
-      me, sessions, activeId, messages, draft, sending, creating,
-      modelOptions, selectedModelKey, eventsConnected, awaitingFirst,
-      createSession, selectSession, send, handleKeydown,
-      mainText, reasoningText, toolCalls,
-      abortGeneration, endSession,
-    };
-  },
-  template: `
-    <div class="topbar">
-      <div class="brand">opencode <span>网关</span> 演示</div>
-      <div class="identity" v-if="me">
-        <span class="dot" :class="{ off: !eventsConnected }"></span>
-        当前用户 <code>{{ me.userId.slice(0, 8) }}</code>
-        · server <code>{{ me.opencodeServer }}</code>
-      </div>
-    </div>
-    <div class="layout">
-      <div class="sidebar">
-        <div class="sidebar-head">
-          <h2>我的会话</h2>
-          <button class="new-btn" :disabled="creating" @click="createSession">
-            {{ creating ? '创建中…' : '+ 新建' }}
-          </button>
-        </div>
-        <div class="session-list">
-          <div v-if="sessions.length === 0" class="empty-hint">
-            还没有会话，点击右上角新建一个。<br/>
-            换个浏览器 / 无痕窗口打开本页，会得到不同的用户身份，
-            看到的会话列表也完全不同。
-          </div>
-          <div
-            v-for="s in sessions" :key="s.id"
-            class="session-item" :class="{ active: s.id === activeId }"
-            @click="selectSession(s.id)"
-          >
-            <div class="title">{{ s.title || '未命名会话' }}</div>
-            <div class="id">{{ s.id }}</div>
-            <button class="close-btn" title="结束并删除该会话" @click.stop="endSession(s.id)">✕</button>
-          </div>
-        </div>
-      </div>
-      <div class="chat">
-        <div v-if="!activeId" class="chat-empty">选择或新建一个会话开始对话</div>
-        <template v-else>
-          <div class="messages">
-            <template v-for="m in messages" :key="m.id">
-              <!-- 思考过程：折叠展示，仅当模型返回了 reasoning part 时出现 -->
-              <details class="reasoning" v-if="m.role === 'assistant' && reasoningText(m)">
-                <summary>思考过程</summary>
-                <div class="reasoning-text">{{ reasoningText(m) }}</div>
-              </details>
-              <!-- 工具调用：显示当前执行状态，随事件实时更新 -->
-              <div class="tool-line" v-for="t in toolCalls(m)" :key="t.id">
-                <template v-if="t.state?.status === 'running'">⚙️ <span class="status-running">正在执行 {{ t.tool || '工具' }}…</span></template>
-                <template v-else-if="t.state?.status === 'completed'">✅ <span class="status-completed">{{ t.tool || '工具' }} 执行完成</span></template>
-                <template v-else-if="t.state?.status === 'error'">⚠️ <span class="status-error">{{ t.tool || '工具' }} 执行出错</span></template>
-                <template v-else>⏳ 准备调用 {{ t.tool || '工具' }}</template>
-              </div>
-              <div class="msg" :class="m.role" v-if="mainText(m) || m.role === 'user'">
-                <div>
-                  <div class="role">
-                    {{ m.role === 'user' ? '我' : 'opencode' }}
-                    <span class="status-pill" v-if="m.role === 'assistant' && !m.done">生成中</span>
-                  </div>
-                  <div class="bubble">{{ mainText(m) }}<span class="cursor" v-if="m.role === 'assistant' && !m.done && mainText(m)"></span></div>
-                </div>
-              </div>
-            </template>
-            <!-- 发出请求后、还没收到任何事件反馈之前的占位提示；用过渡做平滑淡出，
-                 不是"首帧内容一出现就瞬间硬切掉" -->
-            <transition name="thinking-fade">
-              <div class="msg assistant" v-if="awaitingFirst">
-                <div>
-                  <div class="role">opencode</div>
-                  <div class="bubble thinking-dots">
-                    <span class="thinking-dot"></span><span class="thinking-dot"></span><span class="thinking-dot"></span>
-                  </div>
-                </div>
-              </div>
-            </transition>
-          </div>
-          <div class="composer">
-            <div class="composer-row" v-if="modelOptions.length">
-              <select class="model-select" v-model="selectedModelKey">
-                <option
-                  v-for="o in modelOptions"
-                  :key="o.providerID + '::' + o.modelID"
-                  :value="o.providerID + '::' + o.modelID"
-                >{{ o.label }}</option>
-              </select>
-            </div>
-            <div class="composer-row">
-              <textarea
-                v-model="draft"
-                placeholder="输入消息，Enter 发送，Shift+Enter 换行"
-                @keydown="handleKeydown"
-              ></textarea>
-              <button class="send-btn" v-if="!sending" :disabled="!draft.trim()" @click="send">
-                发送
-              </button>
-              <button class="stop-btn" v-else @click="abortGeneration">
-                ■ 停止生成
-              </button>
-            </div>
-          </div>
-        </template>
-      </div>
-    </div>
-  `,
-}).mount("#app");
-</script>
-</body>
-</html>