npm - superagent-ai-agent - Versions diffs - 0.1.0 - Mend

superagent-ai-agent 0.1.0

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 (15) hide show

package/src/public/index.html ADDED Viewed

@@ -0,0 +1,1889 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link id="favicon" rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <title>个人助理</title>
+    <style>
+      :root {
+        color-scheme: light dark;
+        /* Luna 主题：薰衣草紫 + 月光粉 */
+        --primary: #9b87d4;
+        --primary-hover: #7d68b8;
+        --primary-soft: #f3eefe;
+        --primary-soft-2: #e5dcf5;
+        --accent-pink: #f0c2dc;
+        --bg: #faf8fd;
+        --surface: #ffffff;
+        --surface-elev: #ffffff;
+        --border: #ece8f3;
+        --border-strong: #d8d2e5;
+        --text: #1d1d1f;
+        --muted: #8e8b9a;
+        --tool-bg: #f5f3f9;
+        --shadow-sm: 0 1px 3px rgba(155, 135, 212, 0.06);
+        --shadow-md: 0 6px 20px rgba(155, 135, 212, 0.10);
+        --radius-bubble: 18px;
+        --radius-card: 14px;
+      }
+      @media (prefers-color-scheme: dark) {
+        :root {
+          --primary: #b29ce0;
+          --primary-hover: #c5b0ee;
+          --primary-soft: #2a233a;
+          --primary-soft-2: #38304a;
+          --accent-pink: #c39ab8;
+          --bg: #1a1820;
+          --surface: #25222e;
+          --surface-elev: #2c2935;
+          --border: #322f3d;
+          --border-strong: #403d4f;
+          --text: #f2f0f5;
+          --muted: #a09cae;
+          --tool-bg: #2a2735;
+          --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
+          --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.4);
+        }
+      }
+      * { box-sizing: border-box; }
+      html, body { height: 100%; margin: 0; }
+      body {
+        font: 14px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif;
+        color: var(--text);
+        background: var(--bg);
+        display: flex;
+        flex-direction: row;
+      }
+      .main-col {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+      }
+      /* ------- Sidebar (会话历史) ------- */
+      .sidebar {
+        width: 240px;
+        min-width: 240px;
+        border-right: 1px solid var(--border);
+        background: var(--surface);
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+      .sidebar-header {
+        padding: 14px 16px;
+        border-bottom: 1px solid var(--border);
+        font-weight: 700;
+        font-size: 13px;
+        color: var(--text);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      .sidebar-header .count {
+        font-weight: 400;
+        font-size: 11px;
+        color: var(--muted);
+        display: hidden;
+      }
+      .sidebar-newchat {
+        padding: 10px 12px 6px;
+      }
+      .sidebar-newchat button {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        padding: 10px 12px;
+        border: 0;
+        border-radius: 10px;
+        background: linear-gradient(135deg, var(--primary), var(--accent-pink));
+        color: #fff;
+        font: inherit;
+        font-weight: 600;
+        font-size: 13px;
+        cursor: pointer;
+        box-shadow: 0 2px 8px rgba(155, 135, 212, 0.35);
+        transition: transform 0.1s, box-shadow 0.15s, filter 0.15s;
+      }
+      .sidebar-newchat button:hover { filter: brightness(1.05); box-shadow: 0 4px 12px rgba(155, 135, 212, 0.45); }
+      .sidebar-newchat button:active { transform: scale(0.98); }
+      .sidebar-newchat button:disabled { opacity: 0.5; cursor: not-allowed; }
+      .sidebar-newchat svg { width: 14px; height: 14px; }
+      .sidebar-list {
+        flex: 1;
+        overflow-y: auto;
+        padding: 8px;
+      }
+      .sidebar-empty {
+        color: var(--muted);
+        text-align: center;
+        font-size: 12px;
+        padding: 28px 16px;
+      }
+      .session-item {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 10px 12px;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: background 0.12s;
+        margin-bottom: 4px;
+        border: 1px solid transparent;
+      }
+      .session-item:hover { background: var(--primary-soft); }
+      .session-item.active {
+        background: var(--primary-soft);
+        border-color: var(--primary-soft-2);
+      }
+      .session-item-body { flex: 1; min-width: 0; }
+      .session-item-title {
+        font-size: 13px;
+        font-weight: 500;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: var(--text);
+      }
+      .session-item-time {
+        font-size: 11px;
+        color: var(--muted);
+        margin-top: 2px;
+      }
+      .session-item-del {
+        flex-shrink: 0;
+        width: 22px;
+        height: 22px;
+        border: 0;
+        background: transparent;
+        color: var(--muted);
+        border-radius: 4px;
+        cursor: pointer;
+        display: grid;
+        place-items: center;
+        font-size: 16px;
+        opacity: 0;
+        transition: opacity 0.12s, background 0.12s, color 0.12s;
+        line-height: 1;
+      }
+      .session-item:hover .session-item-del,
+      .session-item.active .session-item-del { opacity: 1; }
+      .session-item-del:hover { background: var(--border-strong); color: var(--text); }
+      /* ------- App bar ------- */
+      .appbar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 12px 24px;
+        background: var(--surface);
+        border-bottom: 1px solid var(--border);
+        box-shadow: var(--shadow-sm);
+        z-index: 2;
+      }
+      .brand { display: flex; align-items: center; gap: 10px; }
+      .brand .logo {
+        min-width: 30px;
+        height: 30px;
+        padding: 0 10px;
+        border-radius: 9px;
+        background: linear-gradient(135deg, var(--primary), var(--accent-pink));
+        display: grid;
+        place-items: center;
+        color: #fff;
+        font-weight: 800;
+        font-size: 13px;
+        white-space: nowrap;
+        box-shadow: 0 2px 8px rgba(155, 135, 212, 0.35);
+      }
+      .brand .title { font-weight: 700; font-size: 15px; letter-spacing: 0.02em; }
+      .brand .subtitle { color: var(--muted); font-size: 12px; margin-left: 6px; }
+      .appbar .meta { display: flex; align-items: center; gap: 8px; }
+      .session-pill {
+        font-size: 12px;
+        color: var(--muted);
+        padding: 4px 10px;
+        background: var(--bg);
+        border-radius: 999px;
+        border: 1px solid var(--border);
+      }
+      .session-pill.active { color: var(--primary); border-color: var(--primary-soft-2); background: var(--primary-soft); }
+      .icon-btn {
+        width: 32px; height: 32px;
+        border-radius: 8px;
+        border: 1px solid var(--border);
+        background: var(--surface);
+        color: var(--muted);
+        cursor: pointer;
+        display: grid; place-items: center;
+        transition: all 0.15s;
+      }
+      .icon-btn:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
+      .icon-btn svg { width: 16px; height: 16px; }
+      /* ------- Chat log ------- */
+      #log {
+        flex: 1;
+        overflow-y: auto;
+        padding: 28px 20px 12px;
+      }
+      .stack {
+        max-width: 820px;
+        margin: 0 auto;
+        display: flex;
+        flex-direction: column;
+        gap: 18px;
+      }
+      .empty {
+        text-align: center;
+        color: var(--muted);
+        padding: 60px 20px;
+      }
+      .empty .hint {
+        display: inline-block;
+        margin-top: 12px;
+        padding: 6px 12px;
+        background: var(--primary-soft);
+        color: var(--primary);
+        border-radius: 999px;
+        font-size: 12px;
+      }
+      /* ------- Messages ------- */
+      .msg {
+        display: flex;
+        gap: 10px;
+        align-items: flex-start;
+        animation: fadeIn 0.2s ease-out;
+      }
+      .msg.user { flex-direction: row-reverse; }
+      .avatar {
+        flex-shrink: 0;
+        min-width: 32px; height: 32px;
+        padding: 0 9px;
+        border-radius: 9px;
+        display: grid; place-items: center;
+        font-size: 12px;
+        font-weight: 700;
+        color: #fff;
+        white-space: nowrap;
+        letter-spacing: 0.02em;
+      }
+      .avatar.assistant { background: linear-gradient(135deg, var(--primary), var(--accent-pink)); }
+      .avatar.user { background: linear-gradient(135deg, #6b6680, #918aa5); }
+      .msg .content {
+        max-width: calc(100% - 50px);
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        align-items: flex-start;
+      }
+      .msg.user .content { align-items: flex-end; }
+      .bubble {
+        padding: 12px 16px;
+        border-radius: var(--radius-bubble);
+        white-space: pre-wrap;
+        word-break: normal;            /* 不要按字符断中文 */
+        overflow-wrap: break-word;     /* 只在没办法时才断 */
+        line-height: 1.6;
+        box-shadow: var(--shadow-sm);
+        width: fit-content;            /* 关键：按内容宽度，不被父级 flex 撑大也不被压缩 */
+        max-width: 100%;
+      }
+      /* 用户气泡：max-width 限制最大宽度（短消息按内容，长消息截到 560） */
+      .msg.user .bubble {
+        background: linear-gradient(135deg, var(--primary-soft), var(--primary-soft-2));
+        color: var(--text);
+        border: 1px solid var(--primary-soft-2);
+        border-top-right-radius: 6px;
+        max-width: min(560px, 100%);
+      }
+      .msg.assistant .bubble {
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-top-left-radius: 6px;
+        white-space: normal; /* assistant: 走 markdown，由 HTML 结构决定换行 */
+      }
+      /* ------- Markdown rendering inside assistant bubbles ------- */
+      .msg.assistant .bubble > *:first-child { margin-top: 0; }
+      .msg.assistant .bubble > *:last-child { margin-bottom: 0; }
+      .msg.assistant .bubble p { margin: 0.5em 0; }
+      .msg.assistant .bubble h1,
+      .msg.assistant .bubble h2,
+      .msg.assistant .bubble h3,
+      .msg.assistant .bubble h4 {
+        margin: 0.8em 0 0.4em;
+        line-height: 1.3;
+      }
+      .msg.assistant .bubble h1 { font-size: 1.3em; }
+      .msg.assistant .bubble h2 { font-size: 1.18em; }
+      .msg.assistant .bubble h3 { font-size: 1.08em; }
+      .msg.assistant .bubble h4 { font-size: 1em; }
+      .msg.assistant .bubble ul,
+      .msg.assistant .bubble ol {
+        margin: 0.4em 0;
+        padding-left: 1.6em;
+      }
+      .msg.assistant .bubble li { margin: 0.18em 0; }
+      .msg.assistant .bubble li > p { margin: 0.18em 0; }
+      .msg.assistant .bubble code {
+        background: var(--tool-bg);
+        border: 1px solid var(--border);
+        border-radius: 4px;
+        padding: 1px 5px;
+        font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, monospace;
+        font-size: 0.9em;
+      }
+      .msg.assistant .bubble pre {
+        background: var(--tool-bg);
+        border: 1px solid var(--border);
+        border-radius: 8px;
+        padding: 10px 12px;
+        overflow-x: auto;
+        margin: 0.6em 0;
+      }
+      .msg.assistant .bubble pre code {
+        background: none;
+        border: 0;
+        padding: 0;
+        font-size: 0.88em;
+        line-height: 1.5;
+      }
+      .msg.assistant .bubble blockquote {
+        margin: 0.5em 0;
+        padding: 4px 12px;
+        border-left: 3px solid var(--border-strong);
+        color: var(--muted);
+      }
+      .msg.assistant .bubble hr {
+        border: 0;
+        border-top: 1px solid var(--border);
+        margin: 0.8em 0;
+      }
+      .msg.assistant .bubble a {
+        color: var(--primary);
+        text-decoration: none;
+        border-bottom: 1px dashed var(--primary);
+      }
+      .msg.assistant .bubble a:hover { border-bottom-style: solid; }
+      .msg.assistant .bubble table {
+        border-collapse: collapse;
+        margin: 0.5em 0;
+        font-size: 0.95em;
+      }
+      .msg.assistant .bubble th,
+      .msg.assistant .bubble td {
+        border: 1px solid var(--border);
+        padding: 4px 10px;
+      }
+      .msg.assistant .bubble th {
+        background: var(--tool-bg);
+        font-weight: 600;
+      }
+      /* ------- Tool blocks ------- */
+      .tool {
+        background: var(--tool-bg);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-card);
+        padding: 8px 12px;
+        font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, monospace;
+        font-size: 12px;
+        max-width: 100%;
+        width: 100%;
+      }
+      .tool summary {
+        cursor: pointer;
+        color: var(--muted);
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        list-style: none;
+      }
+      .tool summary::-webkit-details-marker { display: none; }
+      .tool summary::before {
+        content: "▸";
+        font-size: 10px;
+        transition: transform 0.15s;
+        color: var(--muted);
+      }
+      .tool[open] summary::before { transform: rotate(90deg); }
+      .tool summary .tag {
+        font-weight: 600;
+        color: var(--text);
+        padding: 1px 6px;
+        background: var(--surface);
+        border-radius: 4px;
+        border: 1px solid var(--border);
+      }
+      .tool summary .tag.result { color: #2a8a4a; }
+      .tool summary .tag.error { color: var(--primary); }
+      .tool summary .tag.recall { color: #7a4ed1; background: #f1eafd; border-color: #ddd0f3; }
+      .tool summary .tag.plan { color: #2563eb; background: #eef4ff; border-color: #cfe0ff; }
+      .tool summary .tag.reflection { color: #b9740f; background: #fdf3e6; border-color: #f0dcb6; }
+      /* ------- Plan / Reflection cards ------- */
+      .plan-steps { margin: 8px 0 0; padding: 0; list-style: none; }
+      .plan-steps li {
+        display: flex;
+        gap: 8px;
+        padding: 5px 0;
+        border-bottom: 1px dashed var(--border);
+        font-size: 12.5px;
+        line-height: 1.45;
+      }
+      .plan-steps li:last-child { border-bottom: 0; }
+      .plan-steps .step-num {
+        flex-shrink: 0;
+        min-width: 18px; height: 18px;
+        border-radius: 50%;
+        background: var(--primary);
+        color: #fff;
+        font-size: 10px;
+        font-weight: 700;
+        display: grid; place-items: center;
+        margin-top: 1px;
+      }
+      .plan-steps .step-body { flex: 1; min-width: 0; }
+      .plan-steps .step-goal { color: var(--text); }
+      .plan-steps .step-verify {
+        color: var(--muted);
+        font-size: 11px;
+        margin-top: 2px;
+      }
+      .reflection-failure {
+        margin: 6px 0 0;
+        padding: 8px 10px;
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-left: 3px solid #b9740f;
+        border-radius: 6px;
+        font-size: 11.5px;
+        color: var(--muted);
+        white-space: pre-wrap;
+        max-height: 160px;
+        overflow-y: auto;
+      }
+      @media (prefers-color-scheme: dark) {
+        .tool summary .tag.plan { background: #1e2a44; border-color: #2d3e63; }
+        .tool summary .tag.reflection { background: #2e2517; border-color: #4a3a22; }
+        .reflection-failure { border-left-color: #d4973a; }
+      }
+      .tool pre {
+        margin: 8px 0 0;
+        white-space: pre-wrap;
+        word-wrap: break-word;
+        max-height: 320px;
+        overflow-y: auto;
+        color: var(--text);
+        background: var(--surface);
+        padding: 8px 10px;
+        border-radius: 6px;
+        border: 1px solid var(--border);
+      }
+      /* ------- Error ------- */
+      .err {
+        color: var(--primary);
+        background: var(--primary-soft);
+        border: 1px solid var(--primary-soft-2);
+        border-radius: var(--radius-card);
+        padding: 8px 12px;
+        font-size: 13px;
+      }
+      /* ------- Thinking indicator ------- */
+      .thinking-bubble {
+        padding: 14px 16px;
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-bubble);
+        border-top-left-radius: 4px;
+        box-shadow: var(--shadow-sm);
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        min-height: 40px;
+      }
+      .thinking-bubble .dot {
+        width: 7px; height: 7px;
+        border-radius: 50%;
+        background: var(--primary);
+        opacity: 0.4;
+        animation: dotBounce 1.2s infinite ease-in-out;
+      }
+      .thinking-bubble .dot:nth-child(2) { animation-delay: 0.15s; }
+      .thinking-bubble .dot:nth-child(3) { animation-delay: 0.3s; }
+      .thinking-label {
+        margin-left: 8px;
+        font-size: 12px;
+        color: var(--muted);
+        font-style: italic;
+      }
+      /* 思考内容展示 */
+      .thinking-block {
+        background: var(--tool-bg); border: 1px solid var(--border);
+        border-radius: 10px; padding: 0; margin: 6px 0; font-size: 0.82rem;
+        overflow: hidden;
+      }
+      .thinking-block summary {
+        cursor: pointer; padding: 6px 12px; color: var(--muted);
+        font-style: italic; user-select: none; list-style: none;
+      }
+      .thinking-block summary::before { content: '💭 '; }
+      .thinking-block summary::marker { display: none; }
+      .thinking-block[open] summary { border-bottom: 1px solid var(--border); }
+      .thinking-block .thinking-content {
+        padding: 8px 12px; color: var(--text); white-space: pre-wrap;
+        word-break: break-word; max-height: 300px; overflow-y: auto;
+        font-size: 0.8rem; line-height: 1.5; opacity: 0.85;
+      }
+      @keyframes dotBounce {
+        0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
+        30% { transform: translateY(-5px); opacity: 1; }
+      }
+      @keyframes fadeIn {
+        from { opacity: 0; transform: translateY(4px); }
+        to { opacity: 1; transform: translateY(0); }
+      }
+      /* ------- Composer ------- */
+      .composer {
+        background: transparent;
+        padding: 12px 20px 20px;
+      }
+      .composer form {
+        max-width: 820px;
+        margin: 0 auto;
+      }
+      .composer-card {
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: 18px;
+        padding: 8px;
+        box-shadow: var(--shadow-md);
+        transition: border-color 0.15s, box-shadow 0.15s;
+      }
+      .composer-card:focus-within {
+        border-color: var(--primary);
+        box-shadow: 0 4px 18px rgba(231, 76, 60, 0.15);
+      }
+      .composer-card.dragover {
+        border-color: var(--primary);
+        background: var(--primary-soft);
+      }
+      .composer-row {
+        display: flex;
+        align-items: flex-end;
+        gap: 8px;
+        padding-left: 8px;
+      }
+      /* ---- pending image previews above textarea ---- */
+      .img-preview-strip {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px;
+        padding: 4px 4px 8px 8px;
+      }
+      .img-preview-strip:empty { display: none; }
+      .img-preview {
+        position: relative;
+        width: 60px; height: 60px;
+        border-radius: 8px;
+        overflow: hidden;
+        border: 1px solid var(--border);
+        background: var(--tool-bg);
+      }
+      .img-preview img {
+        width: 100%; height: 100%;
+        object-fit: cover;
+        display: block;
+      }
+      .img-preview .remove-btn {
+        position: absolute;
+        top: 2px; right: 2px;
+        width: 18px; height: 18px;
+        border: 0;
+        border-radius: 50%;
+        background: rgba(0,0,0,0.6);
+        color: #fff;
+        font-size: 12px;
+        line-height: 1;
+        cursor: pointer;
+        display: grid;
+        place-items: center;
+        padding: 0;
+      }
+      .img-preview .remove-btn:hover { background: var(--primary); }
+      /* ---- thumbnails in user message bubbles ---- */
+      .msg.user .img-strip {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px;
+        justify-content: flex-end;
+        max-width: 100%;
+      }
+      .msg.user .img-strip img {
+        width: 120px; height: 120px;
+        object-fit: cover;
+        border-radius: 10px;
+        border: 1px solid var(--border);
+        cursor: zoom-in;
+      }
+      /* ---- attach button ---- */
+      .attach-btn {
+        width: 36px; height: 36px;
+        border: 0;
+        border-radius: 12px;
+        background: transparent;
+        color: var(--muted);
+        cursor: pointer;
+        display: grid; place-items: center;
+        transition: color 0.15s, background 0.15s;
+        flex-shrink: 0;
+      }
+      .attach-btn:hover { color: var(--primary); background: var(--primary-soft); }
+      .attach-btn svg { width: 18px; height: 18px; }
+      .composer textarea {
+        flex: 1;
+        resize: none;
+        background: transparent;
+        border: 0;
+        outline: 0;
+        font: inherit;
+        color: inherit;
+        padding: 8px 0;
+        max-height: 200px;
+        line-height: 1.5;
+      }
+      .composer textarea::placeholder { color: var(--muted); }
+      .send-btn {
+        width: 36px; height: 36px;
+        border: 0;
+        border-radius: 12px;
+        background: var(--primary);
+        color: #fff;
+        cursor: pointer;
+        display: grid; place-items: center;
+        transition: background 0.15s, transform 0.1s;
+        flex-shrink: 0;
+      }
+      .send-btn:hover:not(:disabled) { background: var(--primary-hover); }
+      .send-btn:active:not(:disabled) { transform: scale(0.94); }
+      .send-btn:disabled { background: var(--border-strong); cursor: not-allowed; }
+      .send-btn svg { width: 16px; height: 16px; }
+      .send-btn svg.stop-icon { display: none; }
+      .send-btn.busy { animation: pulse 1.5s infinite; }
+      .send-btn.busy svg.send-icon { display: none; }
+      .send-btn.busy svg.stop-icon { display: block; width: 12px; height: 12px; }
+      @keyframes pulse {
+        0%, 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.5); }
+        50% { box-shadow: 0 0 0 6px rgba(231, 76, 60, 0); }
+      }
+      .composer-tip {
+        text-align: center;
+        font-size: 11px;
+        color: var(--muted);
+        margin-top: 8px;
+      }
+      .composer-tip kbd {
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: 3px;
+        padding: 1px 5px;
+        font-family: inherit;
+        font-size: 10px;
+      }
+      /* 队列条 */
+      .queue-strip { max-width: 820px; margin: 0 auto; }
+      .queue-strip:empty { display: none; }
+      .queue-item {
+        display: flex; align-items: center; gap: 8px;
+        background: var(--primary-soft); border: 1px solid var(--border);
+        border-radius: 10px; padding: 6px 12px; margin-bottom: 6px;
+        font-size: 0.85rem; color: var(--text); animation: fadeIn 0.15s;
+      }
+      .queue-item .q-badge {
+        flex-shrink: 0; font-size: 0.7rem; color: var(--muted);
+        background: var(--surface); border-radius: 4px; padding: 2px 6px;
+      }
+      .queue-item .q-text {
+        flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+        outline: none; border: none; background: transparent; font: inherit; color: inherit;
+      }
+      .queue-item .q-text:focus {
+        white-space: normal; word-break: break-all;
+        background: var(--surface); border-radius: 4px; padding: 2px 4px;
+      }
+      .queue-item .q-del {
+        flex-shrink: 0; width: 20px; height: 20px; border: 0; background: transparent;
+        color: var(--muted); cursor: pointer; font-size: 14px; line-height: 20px; text-align: center;
+        border-radius: 50%; transition: background 0.1s;
+      }
+      .queue-item .q-del:hover { background: var(--primary-soft-2); color: var(--text); }
+    </style>
+  </head>
+  <body>
+    <aside class="sidebar">
+      <div class="sidebar-newchat">
+        <button id="new-chat-btn" type="button" title="开启新会话(归档当前)">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="12" y1="5" x2="12" y2="19" />
+            <line x1="5" y1="12" x2="19" y2="12" />
+          </svg>
+          <span>新会话</span>
+        </button>
+      </div>
+      <div class="sidebar-header">
+        <span>会话历史</span>
+        <span class="count" id="session-count"></span>
+      </div>
+      <div class="sidebar-list" id="sidebar-list">
+        <div class="sidebar-empty">暂无历史</div>
+      </div>
+    </aside>
+    <div class="main-col">
+    <header class="appbar">
+      <div class="brand">
+        <span class="logo" id="brand-logo">个人助理</span>
+        <span class="subtitle">本地</span>
+      </div>
+      <div class="meta">
+        <span id="session-meta" class="session-pill">未开始</span>
+        <button id="clear-btn" class="icon-btn" title="清空聊天历史" aria-label="清空聊天历史">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M3 6h18" />
+            <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+            <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+            <line x1="10" y1="11" x2="10" y2="17" />
+            <line x1="14" y1="11" x2="14" y2="17" />
+          </svg>
+        </button>
+        <button id="reset-btn" class="icon-btn" title="新会话" aria-label="新会话">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M3 12a9 9 0 1 0 3-6.7" />
+            <polyline points="3 4 3 9 8 9" />
+          </svg>
+        </button>
+      </div>
+    </header>
+    <main id="log">
+      <div class="stack" id="stack">
+        <div class="empty">
+          <div style="font-size: 36px;">👋</div>
+          <div style="margin-top: 6px;">说点什么开始对话</div>
+          <div class="hint">能读写当前目录、执行 shell 命令</div>
+        </div>
+      </div>
+    </main>
+    <footer class="composer">
+      <form id="form">
+        <div class="queue-strip" id="queue-strip"></div>
+        <div class="composer-card" id="composer-card">
+          <div class="img-preview-strip" id="img-preview-strip"></div>
+          <div class="composer-row">
+            <button id="attach-btn" class="attach-btn" type="button" aria-label="添加图片" title="添加图片">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" />
+              </svg>
+            </button>
+            <input id="file-input" type="file" accept="image/jpeg,image/png,image/gif,image/webp" multiple hidden />
+            <textarea
+              id="input"
+              rows="1"
+              placeholder="发消息(可拖拽 / 粘贴 / 点📎加图)"
+              autofocus
+            ></textarea>
+            <button id="send" class="send-btn" type="submit" aria-label="发送" title="发送">
+              <svg class="send-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M5 12h14" />
+                <path d="M13 6l6 6-6 6" />
+              </svg>
+              <svg class="stop-icon" viewBox="0 0 24 24" fill="currentColor">
+                <rect x="4" y="4" width="16" height="16" rx="2" />
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div class="composer-tip"><kbd>Enter</kbd> 发送 · <kbd>Shift</kbd>+<kbd>Enter</kbd> 换行 · 支持拖拽/粘贴图片</div>
+      </form>
+    </footer>
+    </div>
+    <script src="/vendor/marked.umd.js"></script>
+    <script type="module">
+      // 配置 marked:GFM + 换行直转 <br>(贴合 Claude 输出习惯)
+      if (typeof marked !== 'undefined') {
+        marked.setOptions({ gfm: true, breaks: true });
+      }
+      function renderMarkdown(text) {
+        if (typeof marked === 'undefined') return text;
+        try {
+          const html = marked.parse(text);
+          // 所有链接都在新标签打开,并加 noopener/noreferrer 防钓鱼
+          const tmp = document.createElement('div');
+          tmp.innerHTML = html;
+          tmp.querySelectorAll('a[href]').forEach((a) => {
+            a.target = '_blank';
+            a.rel = 'noopener noreferrer';
+          });
+          return tmp.innerHTML;
+        } catch { return text; }
+      }
+      const stack = document.getElementById('stack');
+      const form = document.getElementById('form');
+      const input = document.getElementById('input');
+      const sendBtn = document.getElementById('send');
+      const sessionMeta = document.getElementById('session-meta');
+      const resetBtn = document.getElementById('reset-btn');
+      const clearBtn = document.getElementById('clear-btn');
+      const sidebarList = document.getElementById('sidebar-list');
+      const sessionCount = document.getElementById('session-count');
+      const newChatBtn = document.getElementById('new-chat-btn');
+      let sessionId = null;
+      let busy = false;
+      // ---------- 消息队列:busy 时新指令排队,执行完自动消费 ----------
+      const messageQueue = [];
+      // ---------- Server 自愈：发现 server 重启就自动 reload ----------
+      (async function autoReloadOnServerRestart() {
+        let initialStartTime = null;
+        try {
+          const r = await fetch('/api/version', { cache: 'no-store' });
+          initialStartTime = (await r.json()).startTime;
+        } catch { return; } // 拿不到就不启用
+        let unreachableCount = 0;
+        setInterval(async () => {
+          try {
+            const r = await fetch('/api/version', { cache: 'no-store' });
+            const { startTime } = await r.json();
+            unreachableCount = 0;
+            if (startTime !== initialStartTime) {
+              console.log('[Luna] server 重启，1 秒后刷新页面');
+              setTimeout(() => location.reload(), 1000);
+            }
+          } catch {
+            unreachableCount++;
+            // 连续 4 次（~12s）连不上才提示，避免短暂网络抖动
+            if (unreachableCount === 4) {
+              console.warn('[Luna] server 短暂不可达，等待恢复...');
+            }
+          }
+        }, 3000);
+      })();
+      // ---------- Names / config (单一来源 agent-config.json) ----------
+      const brandLogo = document.getElementById('brand-logo');
+      const attachBtn = document.getElementById('attach-btn');
+      const fileInput = document.getElementById('file-input');
+      const previewStrip = document.getElementById('img-preview-strip');
+      const composerCard = document.getElementById('composer-card');
+      let config = { agentName: '个人助理', userName: '你' };
+      // 待发送图片队列:{id, name, mediaType, base64, dataUrl}
+      let pendingImages = [];
+      const MAX_IMAGES = 8;
+      const MAX_PER_IMAGE_BYTES = 5 * 1024 * 1024; // 5MB 原图上限
+      const ALLOWED_TYPES = new Set(['image/jpeg', 'image/png', 'image/gif', 'image/webp']);
+      // 取一个字符串的第一个「字符」(正确处理多字节中文/emoji)
+      function firstChar(s) {
+        if (!s) return '';
+        return [...String(s)][0] || '';
+      }
+      function applyConfig(c) {
+        if (!c) return;
+        const prevName = config.agentName;
+        config = { ...config, ...c };
+        brandLogo.textContent = config.agentName || '助';
+        document.title = config.agentName;
+        // agentName 变化时,加 cache-bust 重新拉 favicon(浏览器对 favicon 缓存很狠)
+        if (config.agentName !== prevName) {
+          const fav = document.getElementById('favicon');
+          if (fav) fav.href = `/favicon.svg?v=${Date.now()}`;
+        }
+      }
+      async function loadConfig() {
+        try {
+          const r = await fetch('/api/config', { cache: 'no-store' });
+          if (r.ok) applyConfig(await r.json());
+        } catch { /* 静默,用默认值 */ }
+      }
+      // ---------- Persistence (last 10 user-turns survive refresh) ----------
+      const STORAGE_KEY = 'agent-state-v1';
+      const MAX_USER_TURNS = 10;
+      let historyItems = [];          // {kind: 'user'|'assistant_text'|'tool'|'error', ...}
+      let pendingAssistantHistory = null; // ref to in-progress assistant_text entry
+      function trimHistory() {
+        const userIdxs = [];
+        for (let i = 0; i < historyItems.length; i++) {
+          if (historyItems[i].kind === 'user') userIdxs.push(i);
+        }
+        if (userIdxs.length > MAX_USER_TURNS) {
+          historyItems.splice(0, userIdxs[userIdxs.length - MAX_USER_TURNS]);
+        }
+      }
+      function saveState() {
+        try {
+          localStorage.setItem(
+            STORAGE_KEY,
+            JSON.stringify({ sessionId, history: historyItems }),
+          );
+        } catch { /* quota / disabled */ }
+      }
+      function loadState() {
+        try {
+          const raw = localStorage.getItem(STORAGE_KEY);
+          return raw ? JSON.parse(raw) : null;
+        } catch { return null; }
+      }
+      // ---------- 历史会话归档（写入磁盘） ----------
+      // 从 historyItems 第一条 user 消息生成标题
+      function deriveTitle() {
+        for (const it of historyItems) {
+          if (it.kind === 'user' && it.text) {
+            return it.text.replace(/\s+/g, ' ').slice(0, 24);
+          }
+        }
+        return '(无标题)';
+      }
+      function formatTime(ts) {
+        if (!ts) return '';
+        const d = new Date(ts);
+        const now = new Date();
+        const diffMs = now - d;
+        if (diffMs < 60000) return '刚刚';
+        if (diffMs < 3600000) return `${Math.floor(diffMs / 60000)} 分钟前`;
+        const isToday = d.toDateString() === now.toDateString();
+        const hh = String(d.getHours()).padStart(2, '0');
+        const mm = String(d.getMinutes()).padStart(2, '0');
+        if (isToday) return `今天 ${hh}:${mm}`;
+        const sameYear = d.getFullYear() === now.getFullYear();
+        if (sameYear) return `${d.getMonth() + 1}-${d.getDate()} ${hh}:${mm}`;
+        return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;
+      }
+      // 把当前 historyItems 写到磁盘
+      // 返回 true = 已归档，false = 跳过
+      async function archiveCurrent() {
+        if (historyItems.length === 0) return false;
+        // 至少要有一条 user 消息才值得存（避免存空对话）
+        if (!historyItems.some((it) => it.kind === 'user')) return false;
+        // sessionId 可能还没从 SDK 回来（流式没结束就点新会话 / 历史里 hydrate 出来的）
+        // 用 fallback ID 兜底，保证不丢
+        const idToUse = sessionId || `local-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+        try {
+          const r = await fetch('/api/sessions', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+              sessionId: idToUse,
+              title: deriveTitle(),
+              history: historyItems,
+            }),
+          });
+          if (!r.ok) {
+            console.warn('[archive] POST 失败', r.status, await r.text().catch(() => ''));
+          }
+          return r.ok;
+        } catch (e) {
+          console.warn('[archive] 异常', e);
+          return false;
+        }
+      }
+      async function loadSessionsList() {
+        try {
+          const r = await fetch('/api/sessions');
+          if (!r.ok) return;
+          const items = await r.json();
+          renderSessionsList(items);
+        } catch { /* 静默 */ }
+      }
+      function renderSessionsList(items) {
+        sidebarList.innerHTML = '';
+        if (!items || items.length === 0) {
+          const empty = el('div', 'sidebar-empty', '暂无历史');
+          sidebarList.appendChild(empty);
+          sessionCount.textContent = '';
+          return;
+        }
+        sessionCount.textContent = items.length;
+        for (const it of items) {
+          const item = el('div', 'session-item');
+          if (it.sessionId === sessionId) item.classList.add('active');
+          item.dataset.id = it.sessionId;
+          const body = el('div', 'session-item-body');
+          body.appendChild(el('div', 'session-item-title', it.title || '(无标题)'));
+          body.appendChild(el('div', 'session-item-time', formatTime(it.updatedAt)));
+          item.appendChild(body);
+          const del = el('button', 'session-item-del', '×');
+          del.type = 'button';
+          del.title = '删除';
+          del.addEventListener('click', async (e) => {
+            e.stopPropagation();
+            if (!confirm(`删除「${it.title || '(无标题)'}」？`)) return;
+            try {
+              await fetch(`/api/sessions/${encodeURIComponent(it.sessionId)}`, { method: 'DELETE' });
+            } catch {}
+            // 删的是当前会话 → 同时清空 UI
+            if (it.sessionId === sessionId) doResetUi();
+            await loadSessionsList();
+          });
+          item.appendChild(del);
+          item.addEventListener('click', () => switchToSession(it.sessionId));
+          sidebarList.appendChild(item);
+        }
+      }
+      async function switchToSession(id) {
+        if (busy) return;
+        if (id === sessionId) return;
+        // 切换前归档当前会话（如果有内容）
+        await archiveCurrent();
+        try {
+          const r = await fetch(`/api/sessions/${encodeURIComponent(id)}`);
+          if (!r.ok) return;
+          const obj = await r.json();
+          sessionId = obj.sessionId;
+          historyItems = Array.isArray(obj.history) ? obj.history : [];
+          pendingAssistantHistory = null;
+          currentAssistantBubble = null;
+          saveState();
+          renderAllHistory();
+          sessionMeta.textContent = `session ${sessionId.slice(0, 8)}…`;
+          sessionMeta.classList.add('active');
+          await loadSessionsList();
+        } catch { /* 静默 */ }
+      }
+      function renderAllHistory() {
+        stack.innerHTML = '';
+        if (historyItems.length === 0) {
+          showEmpty();
+          return;
+        }
+        for (const item of historyItems) {
+          currentAssistantBubble = null;
+          if (item.kind === 'user') {
+            const ghosts = (item.imageNames || []).map((n) => ({ name: n, dataUrl: '' }));
+            appendUser(item.text, ghosts, false);
+          } else if (item.kind === 'assistant_text') {
+            const bubble = getAssistantBubble();
+            bubble._raw = item.text;
+            bubble.innerHTML = renderMarkdown(item.text);
+          } else if (item.kind === 'tool') {
+            appendToolCard(item.subtype, item.title, item.payload, false);
+          } else if (item.kind === 'plan') {
+            appendPlanCard({ needPlan: true, steps: item.steps, reason: item.reason }, false);
+          } else if (item.kind === 'reflection') {
+            appendReflectionCard({ phase: 'start', step: item.step, goal: item.goal, failure: item.failure }, false);
+          } else if (item.kind === 'error') {
+            appendError(item.message, false);
+          }
+        }
+        currentAssistantBubble = null;
+        pendingAssistantHistory = null;
+        scrollToBottom();
+      }
+      function showEmpty() {
+        stack.innerHTML = '';
+        const empty = el('div', 'empty');
+        empty.innerHTML = `
+          <div style="font-size: 36px;">👋</div>
+          <div style="margin-top: 6px;">新会话</div>
+          <div class="hint">说点什么开始</div>
+        `;
+        stack.appendChild(empty);
+      }
+      function doResetUi() {
+        sessionId = null;
+        historyItems = [];
+        pendingAssistantHistory = null;
+        currentAssistantBubble = null;
+        try { localStorage.removeItem(STORAGE_KEY); } catch {}
+        sessionMeta.textContent = '未开始';
+        sessionMeta.classList.remove('active');
+        showEmpty();
+      }
+      // ---------- DOM helpers ----------
+      function el(tag, cls, text) {
+        const e = document.createElement(tag);
+        if (cls) e.className = cls;
+        if (text != null) e.textContent = text;
+        return e;
+      }
+      function clearEmpty() {
+        const empty = stack.querySelector('.empty');
+        if (empty) empty.remove();
+      }
+      function scrollToBottom() {
+        document.getElementById('log').scrollTop = document.getElementById('log').scrollHeight;
+      }
+      // ---------- Thinking indicator ----------
+      let thinkingNode = null;
+      function showThinking(label = 'Luna 正在思考…') {
+        if (thinkingNode) return;
+        const msg = el('div', 'msg assistant');
+        msg.appendChild(buildAvatar('assistant'));
+        const content = el('div', 'content');
+        const bubble = el('div', 'thinking-bubble');
+        bubble.appendChild(el('span', 'dot'));
+        bubble.appendChild(el('span', 'dot'));
+        bubble.appendChild(el('span', 'dot'));
+        bubble.appendChild(el('span', 'thinking-label', label));
+        content.appendChild(bubble);
+        msg.appendChild(content);
+        stack.appendChild(msg);
+        thinkingNode = msg;
+        scrollToBottom();
+      }
+      function hideThinking() {
+        if (thinkingNode) {
+          thinkingNode.remove();
+          thinkingNode = null;
+        }
+      }
+      // Insert a node ABOVE the thinking indicator (so it stays anchored at bottom)
+      function insertBeforeThinking(node) {
+        if (thinkingNode && thinkingNode.parentNode === stack) {
+          stack.insertBefore(node, thinkingNode);
+        } else {
+          stack.appendChild(node);
+        }
+      }
+      // ---------- Message builders ----------
+      function buildAvatar(role) {
+        // assistant 角色且 config.avatar 配了图片 → 用图片头像
+        if (role === 'assistant' && config.avatar) {
+          const wrap = el('div', 'avatar assistant avatar-img');
+          const img = document.createElement('img');
+          img.src = `/avatar?v=${encodeURIComponent(config.avatar)}`;
+          img.alt = config.agentName || '助手';
+          img.style.cssText = 'width:32px;height:32px;border-radius:9px;object-fit:cover;display:block;cursor:pointer;';
+          wrap.style.cssText = 'padding:0;background:none;';
+          img.addEventListener('click', () => showAvatarModal(img.src));
+          wrap.appendChild(img);
+          return wrap;
+        }
+        const name = role === 'user'
+          ? (config.userName || '你')
+          : (config.agentName || '助手');
+        return el('div', `avatar ${role}`, name);
+      }
+      // 头像放大弹窗
+      function showAvatarModal(src) {
+        const overlay = document.createElement('div');
+        overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.6);display:grid;place-items:center;z-index:9999;cursor:zoom-out;animation:fadeIn 0.15s;';
+        const img = document.createElement('img');
+        img.src = src;
+        img.style.cssText = 'max-width:80vw;max-height:80vh;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,0.4);';
+        overlay.appendChild(img);
+        overlay.addEventListener('click', () => overlay.remove());
+        document.body.appendChild(overlay);
+      }
+      function appendUser(text, images = [], _record = true) {
+        clearEmpty();
+        const msg = el('div', 'msg user');
+        msg.appendChild(buildAvatar('user'));
+        const content = el('div', 'content');
+        if (images && images.length) {
+          const strip = el('div', 'img-strip');
+          for (const img of images) {
+            const i = document.createElement('img');
+            i.src = img.dataUrl || ''; // hydrated 时可能没 dataUrl
+            i.alt = img.name || 'image';
+            i.title = img.name || '';
+            if (img.dataUrl) i.addEventListener('click', () => window.open(img.dataUrl, '_blank'));
+            strip.appendChild(i);
+          }
+          content.appendChild(strip);
+        }
+        if (text) content.appendChild(el('div', 'bubble', text));
+        msg.appendChild(content);
+        stack.appendChild(msg);
+        scrollToBottom();
+        if (_record) {
+          pendingAssistantHistory = null;
+          // 历史里**不存** base64(localStorage 容量有限);只存文件名
+          historyItems.push({
+            kind: 'user',
+            text,
+            imageNames: (images || []).map((i) => i.name),
+          });
+          trimHistory();
+          saveState();
+        }
+      }
+      // Either reuse current assistant bubble (for streaming text) or create new one
+      let currentAssistantBubble = null;
+      function getAssistantBubble() {
+        if (currentAssistantBubble) return currentAssistantBubble;
+        clearEmpty();
+        const msg = el('div', 'msg assistant');
+        msg.appendChild(buildAvatar('assistant'));
+        const content = el('div', 'content');
+        const bubble = el('div', 'bubble');
+        content.appendChild(bubble);
+        msg.appendChild(content);
+        insertBeforeThinking(msg);
+        currentAssistantBubble = bubble;
+        return bubble;
+      }
+      function appendToolCard(kind, title, payload, _record = true) {
+        clearEmpty();
+        const tagCls =
+          kind === 'result' ? 'tag result' :
+          kind === 'error'  ? 'tag error'  :
+          kind === 'recall' ? 'tag recall' : 'tag';
+        const tagText =
+          kind === 'result' ? 'tool_result' :
+          kind === 'error'  ? 'tool_error'  :
+          kind === 'recall' ? 'memory'      : 'tool_use';
+        // Tools render as their own row (no bubble), but with an assistant avatar lane
+        const msg = el('div', 'msg assistant');
+        msg.appendChild(buildAvatar('assistant'));
+        const content = el('div', 'content');
+        const det = el('details', 'tool');
+        const sum = el('summary');
+        const tag = el('span', tagCls, tagText);
+        sum.appendChild(tag);
+        sum.appendChild(el('span', null, ` ${title}`));
+        det.appendChild(sum);
+        const pre = el('pre');
+        pre.textContent = typeof payload === 'string' ? payload : JSON.stringify(payload, null, 2);
+        det.appendChild(pre);
+        content.appendChild(det);
+        msg.appendChild(content);
+        insertBeforeThinking(msg);
+        // Tool blocks break the assistant text stream — next text starts in a new bubble
+        currentAssistantBubble = null;
+        pendingAssistantHistory = null;
+        scrollToBottom();
+        if (_record) {
+          const payloadText = typeof payload === 'string' ? payload : JSON.stringify(payload, null, 2);
+          historyItems.push({ kind: 'tool', subtype: kind, title, payload: payloadText });
+          saveState();
+        }
+      }
+      // ---------- Plan card ----------
+      function appendPlanCard(plan, _record = true) {
+        if (!plan || !plan.needPlan || !Array.isArray(plan.steps) || plan.steps.length === 0) return;
+        clearEmpty();
+        const msg = el('div', 'msg assistant');
+        msg.appendChild(buildAvatar('assistant'));
+        const content = el('div', 'content');
+        const det = el('details', 'tool');
+        det.open = true; // 计划默认展开,让主人看清执行路径
+        const sum = el('summary');
+        sum.appendChild(el('span', 'tag plan', 'plan'));
+        sum.appendChild(el('span', null, ` 执行计划 · ${plan.steps.length} 步${plan.reason ? ` · ${plan.reason}` : ''}`));
+        det.appendChild(sum);
+        const ol = el('ol', 'plan-steps');
+        for (const s of plan.steps) {
+          const li = el('li');
+          li.appendChild(el('span', 'step-num', String(s.id ?? '?')));
+          const body = el('div', 'step-body');
+          body.appendChild(el('div', 'step-goal', s.goal || '(无目标)'));
+          if (s.verifyHint) body.appendChild(el('div', 'step-verify', `验证: ${s.verifyHint}`));
+          li.appendChild(body);
+          ol.appendChild(li);
+        }
+        det.appendChild(ol);
+        content.appendChild(det);
+        msg.appendChild(content);
+        insertBeforeThinking(msg);
+        currentAssistantBubble = null; // 计划卡后正文起新 bubble
+        pendingAssistantHistory = null;
+        scrollToBottom();
+        if (_record) {
+          historyItems.push({ kind: 'plan', steps: plan.steps, reason: plan.reason || '' });
+          saveState();
+        }
+      }
+      // ---------- Reflection card ----------
+      function appendReflectionCard(data, _record = true) {
+        if (!data) return;
+        clearEmpty();
+        const msg = el('div', 'msg assistant');
+        msg.appendChild(buildAvatar('assistant'));
+        const content = el('div', 'content');
+        const det = el('details', 'tool');
+        const sum = el('summary');
+        if (data.phase === 'end') {
+          det.open = false;
+          sum.appendChild(el('span', 'tag reflection', 'reflection'));
+          sum.appendChild(el('span', null, ` step ${data.step} 反思完成`));
+        } else {
+          det.open = true;
+          sum.appendChild(el('span', 'tag reflection', 'reflection'));
+          sum.appendChild(el('span', null, ` step ${data.step ?? ''} 失败 → 反思中${data.goal ? ` · ${data.goal}` : ''}`));
+        }
+        det.appendChild(sum);
+        if (data.failure) {
+          const pre = el('div', 'reflection-failure', data.failure);
+          det.appendChild(pre);
+        }
+        content.appendChild(det);
+        msg.appendChild(content);
+        insertBeforeThinking(msg);
+        currentAssistantBubble = null;
+        pendingAssistantHistory = null;
+        scrollToBottom();
+        if (_record && data.phase !== 'end') {
+          historyItems.push({ kind: 'reflection', step: data.step, goal: data.goal || '', failure: data.failure || '' });
+          saveState();
+        }
+      }
+      function appendError(message, _record = true) {
+        clearEmpty();
+        const wrap = el('div', 'msg assistant');
+        wrap.appendChild(buildAvatar('assistant'));
+        const content = el('div', 'content');
+        content.appendChild(el('div', 'err', `[错误] ${message}`));
+        wrap.appendChild(content);
+        insertBeforeThinking(wrap);
+        scrollToBottom();
+        if (_record) {
+          pendingAssistantHistory = null;
+          historyItems.push({ kind: 'error', message });
+          saveState();
+        }
+      }
+      // ---------- Thinking 内容展示(可折叠) ----------
+      function appendThinkingBlock(text) {
+        if (!text || !text.trim()) return;
+        const details = document.createElement('details');
+        details.className = 'thinking-block';
+        const summary = document.createElement('summary');
+        // 截取前 40 字做摘要
+        const preview = text.trim().replace(/\s+/g, ' ').slice(0, 40) + (text.length > 40 ? '…' : '');
+        summary.textContent = preview;
+        details.appendChild(summary);
+        const content = el('div', 'thinking-content', text);
+        details.appendChild(content);
+        insertBeforeThinking(details);
+        scrollToBottom();
+      }
+      // ---------- SDK message dispatch ----------
+      function handleSdkMessage(msg) {
+        if (!msg || typeof msg !== 'object') return;
+        if (msg.type === 'assistant') {
+          const blocks = msg.message?.content ?? [];
+          for (const b of blocks) {
+            if (b.type === 'thinking' && b.thinking) {
+              // 扩展思考块:不展示(已禁用)
+              // appendThinkingBlock(b.thinking);
+            } else if (b.type === 'text' && b.text) {
+              const bubble = getAssistantBubble();
+              // 累积原始 markdown,每个 chunk 都重渲染一次(marked 容错足够好)
+              bubble._raw = (bubble._raw || '') + b.text;
+              bubble.innerHTML = renderMarkdown(bubble._raw);
+              // 同步累积到 history(每个连续 text 段共用一条 assistant_text)
+              if (!pendingAssistantHistory) {
+                pendingAssistantHistory = { kind: 'assistant_text', text: '' };
+                historyItems.push(pendingAssistantHistory);
+              }
+              pendingAssistantHistory.text += b.text;
+              trimHistory();
+              saveState();
+              scrollToBottom();
+            } else if (b.type === 'tool_use') {
+              appendToolCard('use', b.name, b.input);
+              // 自测中:看到 web 工具被调用就标记
+              if (selfTestActive && typeof b.name === 'string' && b.name.includes('web')) {
+                selfTestToolSeen = true;
+              }
+            }
+          }
+        } else if (msg.type === 'user') {
+          const blocks = msg.message?.content ?? [];
+          for (const b of blocks) {
+            if (b.type === 'tool_result') {
+              const text =
+                typeof b.content === 'string'
+                  ? b.content
+                  : (b.content ?? []).map((c) => c.text ?? JSON.stringify(c)).join('\n');
+              appendToolCard(b.is_error ? 'error' : 'result', '', text);
+            }
+          }
+        } else if (msg.type === 'result') {
+          if (msg.session_id) {
+            sessionId = msg.session_id;
+            sessionMeta.textContent = `session ${sessionId.slice(0, 8)}…`;
+            sessionMeta.classList.add('active');
+            saveState();
+          }
+        } else if (msg.type === 'system' && msg.subtype === 'memory_recall') {
+          const items = (msg.memories ?? []).map((m) => {
+            const name = (m.path ?? '').split('/').pop() || m.path || '(memory)';
+            const body = m.content ? `\n${m.content}` : '';
+            return `• [${m.scope}] ${name}${body}`;
+          });
+          appendToolCard(
+            'recall',
+            `🧠 Recalled from memory (${msg.mode})`,
+            items.join('\n\n') || '(empty)',
+          );
+        }
+      }
+      // ---------- SSE streaming ----------
+      let currentAbortController = null;
+      async function chat(prompt, images = []) {
+        const payload = { prompt, sessionId };
+        if (images.length) {
+          payload.images = images.map((i) => ({ mediaType: i.mediaType, base64: i.base64 }));
+        }
+        currentAbortController = new AbortController();
+        const res = await fetch('/api/chat', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload),
+          signal: currentAbortController.signal,
+        });
+        if (!res.ok) {
+          let detail = '';
+          try { detail = (await res.json()).error ?? ''; } catch {}
+          throw new Error(`HTTP ${res.status} ${detail}`);
+        }
+        const reader = res.body.getReader();
+        const decoder = new TextDecoder();
+        let buf = '';
+        let event = 'message';
+        let data = '';
+        const flush = () => {
+          if (!data) return;
+          let parsed;
+          try { parsed = JSON.parse(data); } catch { parsed = data; }
+          if (event === 'message') {
+            handleSdkMessage(parsed);
+          } else if (event === 'plan') {
+            appendPlanCard(parsed);
+          } else if (event === 'reflection') {
+            appendReflectionCard(parsed);
+          } else if (event === 'error') {
+            appendError(parsed.message ?? data);
+          }
+          event = 'message';
+          data = '';
+        };
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          buf += decoder.decode(value, { stream: true });
+          const lines = buf.split('\n');
+          buf = lines.pop() ?? '';
+          for (const line of lines) {
+            if (line === '') {
+              flush();
+            } else if (line.startsWith('event: ')) {
+              event = line.slice(7).trim();
+            } else if (line.startsWith('data: ')) {
+              data = line.slice(6);
+            }
+          }
+        }
+        flush();
+      }
+      // ---------- Image handling ----------
+      function readFileAsDataUrl(file) {
+        return new Promise((resolve, reject) => {
+          const r = new FileReader();
+          r.onload = () => resolve(r.result);
+          r.onerror = () => reject(r.error);
+          r.readAsDataURL(file);
+        });
+      }
+      function renderPreviews() {
+        previewStrip.innerHTML = '';
+        for (const img of pendingImages) {
+          const box = el('div', 'img-preview');
+          const i = document.createElement('img');
+          i.src = img.dataUrl;
+          box.appendChild(i);
+          const btn = el('button', 'remove-btn', '×');
+          btn.type = 'button';
+          btn.title = '移除';
+          btn.addEventListener('click', () => {
+            pendingImages = pendingImages.filter((x) => x.id !== img.id);
+            renderPreviews();
+          });
+          box.appendChild(btn);
+          previewStrip.appendChild(box);
+        }
+      }
+      async function addFiles(fileList) {
+        const files = [...(fileList || [])].filter((f) => ALLOWED_TYPES.has(f.type));
+        for (const f of files) {
+          if (pendingImages.length >= MAX_IMAGES) {
+            appendError(`图片最多 ${MAX_IMAGES} 张,后续已忽略`);
+            break;
+          }
+          if (f.size > MAX_PER_IMAGE_BYTES) {
+            appendError(`${f.name} 超过 5MB,已跳过`);
+            continue;
+          }
+          try {
+            const dataUrl = await readFileAsDataUrl(f);
+            const comma = dataUrl.indexOf(',');
+            pendingImages.push({
+              id: `${Date.now()}_${Math.random().toString(36).slice(2, 8)}`,
+              name: f.name || 'image',
+              mediaType: f.type,
+              base64: dataUrl.slice(comma + 1),
+              dataUrl,
+            });
+          } catch (e) {
+            appendError(`读取 ${f.name} 失败:${e.message ?? e}`);
+          }
+        }
+        renderPreviews();
+      }
+      attachBtn.addEventListener('click', () => fileInput.click());
+      fileInput.addEventListener('change', async (e) => {
+        await addFiles(e.target.files);
+        fileInput.value = '';
+      });
+      // 拖拽
+      ['dragenter', 'dragover'].forEach((ev) =>
+        composerCard.addEventListener(ev, (e) => {
+          if (e.dataTransfer?.types?.includes('Files')) {
+            e.preventDefault();
+            composerCard.classList.add('dragover');
+          }
+        }),
+      );
+      ['dragleave', 'drop'].forEach((ev) =>
+        composerCard.addEventListener(ev, (e) => {
+          e.preventDefault();
+          composerCard.classList.remove('dragover');
+        }),
+      );
+      composerCard.addEventListener('drop', async (e) => {
+        if (e.dataTransfer?.files?.length) await addFiles(e.dataTransfer.files);
+      });
+      // 粘贴(截图直接 Cmd+V)
+      input.addEventListener('paste', async (e) => {
+        const items = e.clipboardData?.items;
+        if (!items) return;
+        const files = [];
+        for (const it of items) {
+          if (it.kind === 'file' && ALLOWED_TYPES.has(it.type)) {
+            const f = it.getAsFile();
+            if (f) files.push(f);
+          }
+        }
+        if (files.length) await addFiles(files);
+      });
+      // ---------- Form ----------
+      function autoGrow() {
+        input.style.height = 'auto';
+        input.style.height = Math.min(input.scrollHeight, 200) + 'px';
+      }
+      input.addEventListener('input', autoGrow);
+      form.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const prompt = input.value.trim();
+        const imagesToSend = pendingImages.slice();
+        if (!prompt && imagesToSend.length === 0) return;
+        // 清空输入框(无论是否 busy 都立刻清,给用户"已收到"的反馈)
+        input.value = '';
+        autoGrow();
+        pendingImages = [];
+        renderPreviews();
+        // busy 时入队,渲染到输入框上方
+        if (busy) {
+          messageQueue.push({ prompt, images: imagesToSend });
+          renderQueue();
+          return;
+        }
+        await processMessage(prompt, imagesToSend, true);
+      });
+      // ---------- 队列 UI:渲染到输入框上方,支持编辑/删除 ----------
+      const queueStrip = document.getElementById('queue-strip');
+      function renderQueue() {
+        queueStrip.innerHTML = '';
+        messageQueue.forEach((item, idx) => {
+          const row = el('div', 'queue-item');
+          // 序号
+          const badge = el('span', 'q-badge', `#${idx + 1}`);
+          row.appendChild(badge);
+          // 可编辑文本
+          const txt = document.createElement('input');
+          txt.className = 'q-text';
+          txt.type = 'text';
+          txt.value = item.prompt;
+          txt.title = '点击编辑指令';
+          txt.addEventListener('change', () => {
+            messageQueue[idx].prompt = txt.value.trim() || item.prompt;
+          });
+          row.appendChild(txt);
+          // 图片数量提示
+          if (item.images && item.images.length) {
+            const imgBadge = el('span', 'q-badge', `📎${item.images.length}`);
+            row.appendChild(imgBadge);
+          }
+          // 删除按钮
+          const del = el('button', 'q-del', '×');
+          del.type = 'button';
+          del.title = '移除此指令';
+          del.addEventListener('click', () => {
+            messageQueue.splice(idx, 1);
+            renderQueue();
+          });
+          row.appendChild(del);
+          queueStrip.appendChild(row);
+        });
+      }
+      function clearQueue() {
+        queueStrip.innerHTML = '';
+      }
+      async function processMessage(prompt, images, showUser = true) {
+        busy = true;
+        // 注意:不再 disable button —— busy 时按钮变停止键,要可点
+        sendBtn.classList.add('busy');
+        sendBtn.title = '停止';
+        sendBtn.setAttribute('aria-label', '停止');
+        if (showUser) appendUser(prompt, images);
+        currentAssistantBubble = null;
+        showThinking();
+        try {
+          await chat(prompt, images);
+        } catch (err) {
+          // 用户点停止 -> AbortError;不当错误显示,加一条灰色提示即可
+          if (err?.name === 'AbortError') {
+            appendError('已停止');
+          } else {
+            appendError(err.message ?? String(err));
+          }
+        } finally {
+          hideThinking();
+          busy = false;
+          currentAbortController = null;
+          sendBtn.classList.remove('busy');
+          sendBtn.title = '发送';
+          sendBtn.setAttribute('aria-label', '发送');
+          currentAssistantBubble = null;
+          loadConfig();
+          // ---------- 消费队列中的下一条 ----------
+          if (messageQueue.length > 0) {
+            const next = messageQueue.shift();
+            renderQueue(); // 刷新队列 UI(减少一条)
+            // showUser=true: 队列消费时显示用户消息到对话区
+            await processMessage(next.prompt, next.images, true);
+          } else {
+            clearQueue();
+            input.focus();
+          }
+        }
+      }
+      // busy 时点按钮 = 中止;非 busy 时点 = 触发 form submit(默认)
+      sendBtn.addEventListener('click', (e) => {
+        if (busy && currentAbortController) {
+          e.preventDefault();
+          currentAbortController.abort();
+        }
+      });
+      // 拼音/中文 IME 组词期间,Enter 是给输入法用的(选候选/切英文),不能触发发送
+      let isComposing = false;
+      input.addEventListener('compositionstart', () => { isComposing = true; });
+      input.addEventListener('compositionend', () => { isComposing = false; });
+      input.addEventListener('keydown', (e) => {
+        if (e.key !== 'Enter' || e.shiftKey) return;
+        // 三重判断保兼容(原生 isComposing / IME keyCode 229 / 自己维护的 flag)
+        if (isComposing || e.isComposing || e.keyCode === 229) return;
+        e.preventDefault();
+        form.requestSubmit();
+      });
+      clearBtn.addEventListener('click', () => {
+        if (busy) return;
+        if (!confirm('确定清空所有聊天历史？此操作不可恢复。')) return;
+        try { localStorage.clear(); } catch {}
+        location.reload();
+      });
+      async function handleNewChat() {
+        if (busy) return;
+        await archiveCurrent();
+        doResetUi();
+        await loadSessionsList();
+        input.focus();
+      }
+      resetBtn.addEventListener('click', handleNewChat);
+      newChatBtn.addEventListener('click', handleNewChat);
+      // ---------- 初始化:先拿 config(名称),再 hydrate 历史 ----------
+      (async function init() {
+        await loadConfig();  // 等名称就绪,这样 hydrate 出的头像也是正确的字
+        loadSessionsList(); // 异步拉左侧历史，不阻塞主流程
+        const state = loadState();
+        if (!state || !Array.isArray(state.history) || state.history.length === 0) return;
+        sessionId = state.sessionId || null;
+        historyItems = state.history;
+        if (sessionId) {
+          sessionMeta.textContent = `session ${sessionId.slice(0, 8)}…`;
+          sessionMeta.classList.add('active');
+        }
+        clearEmpty();
+        for (const item of historyItems) {
+          currentAssistantBubble = null; // 每条都新起一个 bubble,不会跨条粘在一起
+          if (item.kind === 'user') {
+            // 恢复时 dataUrl 已丢,只用文件名展示一个占位 chip
+            const ghosts = (item.imageNames || []).map((n) => ({ name: n, dataUrl: '' }));
+            appendUser(item.text, ghosts, false);
+          } else if (item.kind === 'assistant_text') {
+            const bubble = getAssistantBubble();
+            bubble._raw = item.text;
+            bubble.innerHTML = renderMarkdown(item.text);
+          } else if (item.kind === 'tool') {
+            appendToolCard(item.subtype, item.title, item.payload, false);
+          } else if (item.kind === 'plan') {
+            appendPlanCard({ needPlan: true, steps: item.steps, reason: item.reason }, false);
+          } else if (item.kind === 'reflection') {
+            appendReflectionCard({ phase: 'start', step: item.step, goal: item.goal, failure: item.failure }, false);
+          } else if (item.kind === 'error') {
+            appendError(item.message, false);
+          }
+        }
+        currentAssistantBubble = null;
+        pendingAssistantHistory = null;
+        scrollToBottom();
+      })();
+      // ---------- 重启后自动自测 ----------
+      // Luna 改完代码重启前会写 .self-test-pending.json;页面加载时拉取,
+      // 有 pending 就自动发一条测试消息,验证 web 工具是否真能被调用,完成后上报清除
+      let selfTestActive = false;
+      let selfTestToolSeen = false;
+      async function runSelfTestIfPending() {
+        try {
+          const r = await fetch('/api/self-test', { cache: 'no-store' });
+          const task = await r.json();
+          if (!task || !task.pending || !task.prompt) return;
+          // 等 init 跑完再发,避免和 history restore 抢 bubble
+          await new Promise((res) => setTimeout(res, 300));
+          console.log('[Luna] 检测到待自测任务,自动发送:', task.prompt);
+          selfTestActive = true;
+          selfTestToolSeen = false;
+          appendUser(task.prompt, [], true);
+          try {
+            await chat(task.prompt, []);
+          } catch (e) {
+            appendError(`自测发送失败: ${e?.message ?? e}`);
+          }
+          // chat 跑完,检查是否真的调用了 web 工具
+          if (selfTestToolSeen) {
+            const bubble = getAssistantBubble();
+            bubble._raw = (bubble._raw || '') + '\n\n✅ **自测通过**:web 工具调用正常。';
+            bubble.innerHTML = renderMarkdown(bubble._raw);
+            selfTestActive = false;
+            await fetch('/api/self-test/done', { method: 'POST' });
+          } else {
+            appendError('⚠️ 自测未检测到 web 工具调用。最可能原因:当前是旧 session(resume),工具列表锁定在旧值。请在左侧点"新对话"开全新 session,pending 任务会保留,新会话里会自动重新自测。');
+            selfTestActive = false;
+            // 失败不清 pending,等用户开新会话时再自动触发(见 init 后的逻辑)
+            // 不在旧 session 上定时重试,避免空转烧 token
+          }
+        } catch (e) {
+          console.warn('[Luna] 自测流程异常:', e);
+        }
+      }
+      // 启动时触发一次
+      runSelfTestIfPending();
+    </script>
+  </body>
+</html>