import {
  ChangeDetectionStrategy,
  Component,
  computed,
  effect,
  ElementRef,
  inject,
  signal,
  viewChild,
} from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import {
  UiAlert,
  UiAvatar,
  UiButton,
  UiEmpty,
  UiInput,
  UiModal,
  UiSkeleton,
  UiTooltip,
} from '../../../ui';
import { ComposerComponent } from '../../../components/domain/composer/composer';
import { NewSessionRequest } from '../../../components/domain/session-tree/session-tree';
import { MessageBubbleComponent } from '../../../components/domain/message-bubble/message-bubble';
import { TypingIndicatorComponent } from '../../../components/domain/typing-indicator/typing-indicator';
import { ToolActivityComponent } from '../../../components/domain/tool-activity/tool-activity';
import { FilePreviewComponent } from '../../../components/preview/file-preview/file-preview';
import { NewSessionModalService } from '../../../components/domain/new-session-modal/new-session-modal.service';
import { ImageLightboxComponent } from '../../../components/preview/image-lightbox/image-lightbox';
import { previewKindOf, type PreviewKind } from '../../../components/preview/file-kind';
import { PresenceBadgeComponent } from '../../../components/domain/presence-badge/presence-badge';
import { AgentPresence, agentPresence } from '../../../core/api/models';
import { StatusBadgeComponent } from '../../../components/domain/status-badge/status-badge';
import { ChatService } from '../../../core/chat.service';
import { Deliverable, TASK_STATUS_TEXT } from '../../../core/api/models';
import { DeliverablesService } from '../../../core/deliverables.service';
import { DeviceService } from '../../../core/device.service';
import { fmtPercent, fmtTokens, usageOf } from '../../../core/format';
import { TaskLine, TaskPulseService } from '../../../core/task-pulse.service';
import { ArtifactSyncService } from '../../../core/artifact-sync.service';
import { LoopGuardService } from '../../../core/loop-guard.service';
import { isToolActivityMessage, toolActivitySummary } from '../../../core/message-segments';
import { Block } from '../../../core/message-segments';
import { Message } from '../../../core/api/models';
import { fmtTime } from '../../../core/time';
import { LiveService } from '../../../core/live.service';
import { UnreadService } from '../../../core/unread.service';
import { TasksService } from '../../../core/tasks.service';
import { ChatSession } from '../../../core/chat-session';
import { ChatSessionService } from '../../../core/chat-session.service';
import { MatrixSessionService } from '../../../core/matrix-session.service';
import { WorkspaceService } from '../../../core/workspace.service';
import { AgentModalService } from '../../../components/domain/agent-modal/agent-modal.service';

/**
 * 桌面·会话（SPEC FR-04）—— 四栏（导航 + 会话列表 + 聊天区 + 成果栏）
 *
 * 实现纪律（2026-10-15 返工）：
 *   · 列表/空态/加载/提示条全部走底座组件（`ui-list` / `ui-empty` / `ui-skeleton` / `ui-alert`）
 *   · **流动布局**：栏宽用比例 + 最小宽兜底，窗口变宽时主区跟着变宽；
 *     仅当可用宽不足以容纳右栏时才降级（换形态，不删功能）
 *   · 无 demo 件
 *
 * AC：04.1 四栏 / 04.2 发送 / 04.3 上传进度 / 04.5 自增高 / 04.6 状态不重复
 *     / 04.8 失败可重试 / 04.9 连接状态 / 04.10 超长截断 / 04.11 三态
 */
/** 一条消息的渲染形态：普通气泡 or 终端活动折叠组 */
type MessageRow =
  | { kind: 'msg'; key: string; message: Message }
  | { kind: 'tool'; key: string; block: Extract<Block, { kind: 'process' }> };

/** 右栏标签 */
export type RailTab = 'tasks' | 'files' | 'results' | 'status';

/** 读上次选中的右栏标签（按用户隔离的 localStorage） */
function readRailTabPref(): RailTab {
  try {
    const v = localStorage.getItem('fmode_rail_tab');
    if (v === 'tasks' || v === 'files' || v === 'results' || v === 'status') return v;
  } catch {
    /* 隐私模式 */
  }
  // 默认「文件」：用户最关心本次对话产出了什么
  return 'files';
}

/**
 * 右栏宽度夹取 —— **纯函数**，便于单测。
 *
 * 下限 280：再窄右栏里「文件名 + 大小」会折行成两三行；
 * 上限 560：再宽就把对话区挤到不可读（主区最小可读宽约 480）。
 */
export function clampRailWidth(w: number): number {
  if (!Number.isFinite(w)) return 320;
  return Math.min(560, Math.max(280, Math.round(w)));
}

/**
 * 预览形态下的右栏宽度上限（2026-10-30）。
 * 看文档/表格时 560px 太窄；预览打开时放宽到 720，关闭后回到常规上限。
 */
export const RAIL_W_PREVIEW_MAX = 720;

export function clampPreviewRailWidth(w: number): number {
  return Math.min(RAIL_W_PREVIEW_MAX, Math.max(280, Math.round(Number.isFinite(w) ? w : 320)));
}

/** 左栏「容器行」—— 会话按容器分组时的分组头 */
interface ConversationRow {
  id: string;
  name: string;
  specialty?: string;
  currentTask?: string;
  unread?: number;
}

@Component({
  selector: 'app-dk-chat-page',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [
    UiAlert,
    UiAvatar,
    UiButton,
    UiEmpty,
    UiInput,
    UiModal,
    UiSkeleton,
    UiTooltip,
    ComposerComponent,
    MessageBubbleComponent,
    TypingIndicatorComponent,
    ToolActivityComponent,
    FilePreviewComponent,
    ImageLightboxComponent,
    PresenceBadgeComponent,
    StatusBadgeComponent,
  ],
  template: `
    <div class="conversation-layout" [style.--rail-w.px]="effectiveRailWidth()">
      <!--
        🔴 左栏（会话树）已提升到 DesktopShell 外壳组件（2026-10-30）——
        一级路由点击时左栏必须保持不变，所以它不能挂在某个页面里。
        页面这里只负责主体区（+ 右栏）。
      -->

      <!-- ===== 聊天区 ===== -->
      <section class="col main-col" aria-label="消息">
        @if (!chat.agentId()) {
          <div class="center-fill">
            <ui-empty title="选择一个会话" description="从左侧选择数字生命开始对话。" />
          </div>
        } @else {
          <header class="chat-head">
            @if (chat.agent(); as a) {
              <ui-avatar [name]="a.name" [size]="'md'" />
              <div class="chat-title">
                <strong>{{ a.name }}</strong>
                <!--
                  当前任务名（只读展示，2026-10-31 用户要求取消命名与改名）：
                  原来这里是可点击重命名的「对话名」。现在对话由容器命名，
                  用户不需要也不应该改 —— 去掉点击改名入口，只保留只读文案。
                -->
                @if (chat.currentSession(); as s) {
                  <small class="ellipsis session-name" [title]="s.title">
                    <i class="fa-solid fa-comment-dots" aria-hidden="true"></i>
                    {{ s.title }}
                    @if (s.archived) {
                      <span class="archived-tag">已归档</span>
                    }
                  </small>
                } @else {
                  <small class="ellipsis">{{ a.specialty || '数字生命' }}</small>
                }
              </div>
              <!--
                AC-04.6 的修正（2026-10-21）：原先在此放运行态徽标，但下方任务行
                已经表达了「在不在干活」→ 同一信息出现两次，且 idle 用 warning 色
                看起来像故障（用户实测：「空闲 空闲」两行、橙色像告警）。
                这里只保留任务行**不表达**的内容：容器不可用 / 通道未上报。
              -->
              @if (a.status === 'error' || a.status === 'offline' || a.status === 'stopped') {
                <app-status-badge [agent]="a" />
              }
            }
              <!--
              当前任务条（用户要求：先看到「它在做什么」，再往下看消息）。
              文案唯一实现是 TaskPulseService.describe()，列表/头部/右栏同一份。
              独立一行 → 任务名再长也不再挤压头像与标题。
            -->
            @if (chat.agent(); as a) {
              <!--
                当前任务：**收进标题栏**作为一行紧凑状态（2026-10-29）。
                原来它是一条横跨整列、带底色和左竖线的横条 —— 比标题还抢眼，
                而且把消息流整体往下推。参考 ChatGPT：状态属于页头，不属于内容。
              -->
              <!--
                任务状态固定占位（2026-10-30）：
                原来「无任务」时这个元素不存在、有任务时突然出现，
                把标题栏撑高 → 下方消息区整体下移一截，观感就是"发送后界面跳一下"。
                现在用固定宽高的槽位承载，文字在槽内截断。
              -->
              <span class="task-slot" [title]="taskLine(a.id).text">
                @if (taskLine(a.id).text) {
                  <span
                    class="task-line"
                    [class]="'tone-' + taskLine(a.id).tone"
                    [class.busy]="taskLine(a.id).active"
                  >
                    <span class="spin" aria-hidden="true"></span>
                    <span class="task-text ellipsis">{{ taskLine(a.id).text }}</span>
                  </span>
                }
              </span>
            }
            <div class="chat-actions">
              <!-- 新建对话:在当前容器下开一条新对话 -->
              @if (chat.agentId(); as aid) {
                <ui-tooltip content="新建对话">
                  <ui-button
                    variant="ghost"
                    shape="circle"
                    icon="fa-solid fa-square-plus"
                    ariaLabel="新建对话"
                    (click)="newSession(aid)"
                  />
                </ui-tooltip>
                <!-- 容器设置:进入该容器的详情/设置页 -->
                <ui-tooltip content="容器设置">
                  <ui-button
                    variant="ghost"
                    shape="circle"
                    icon="fa-solid fa-gear"
                    ariaLabel="容器设置"
                    (click)="openAgentSettings(aid)"
                  />
                </ui-tooltip>
              }
              <!--
                侧栏开合。标签切换收在右栏内部 ——
                原来中栏放了「任务 / 成果」两个圆钮,右栏只有两页,
                加标签条后再放两个钮就是重复入口（用户会分不清点哪个）。
              -->
              <ui-tooltip content="侧栏">
                <ui-button
                  variant="ghost"
                  shape="circle"
                  icon="fa-solid fa-table-columns"
                  ariaLabel="侧栏"
                  [class.on]="railOpen()"
                  (click)="railOpen.set(!railOpen())"
                />
              </ui-tooltip>
            </div>
          </header>

          <!--
            连接状态提示（AC-04.9）。
            🔴 区分两种「连不上」：容器离线 vs 自己在连接中 ——
               否则用户分不清是网络问题还是对方容器没跑（实测反馈）。
          -->
          @if (chat.connection() !== 'connected' || currentContainerState() === 'unreported') {
            <div class="banner-hold">
              @if (currentContainerState() === 'unreported' && chat.connection() === 'connected') {
                <ui-alert type="warning" title="容器状态未知，可能无法应答">
                  该容器还没有上报在线状态，发给它的消息可能无人处理。
                </ui-alert>
              } @else {
                <ui-alert
                  [type]="chat.connection() === 'connecting' ? 'info' : 'warning'"
                  [title]="chat.connection() === 'connecting' ? '正在连接…' : '连接已断开'"
                >
                  @if (chat.connection() === 'disconnected') {
                    <ui-button variant="outline" size="sm" (click)="reconnect()">重新连接</ui-button>
                  }
                </ui-alert>
              }
            </div>
          }

          <!--
            回环提示（2026-10-21 P0 实测：两个容器能互相 @，但没有任何停止条件，
            28 分钟内互发 96 条，最长连续 57 条无人类介入）。
            这里给用户一个**明确的出口**：看一眼就知道为什么「不回消息了」，
            发一句话或点按钮即可恢复。
          -->
          @if (loop.paused()) {
            <div class="banner-hold">
              <ui-alert type="warning" title="检测到自动对话循环，已暂停自动回复">
                <p class="loop-detail">{{ loop.pauseDetail() }}</p>
                <p class="loop-hint">你发一条消息即可恢复；或在设置里调整检测强度。</p>
                <ui-button variant="outline" size="sm" (click)="loop.resume()">继续协作</ui-button>
              </ui-alert>
            </div>
          }

          <div class="messages" #messages (scroll)="onMessagesScroll($event)">
            @switch (chat.state()) {
              @case ('loading') {
                <div class="skeleton-hold">
                  @for (i of [1, 2, 3]; track i) {
                    <ui-skeleton variant="rect" height="64px" />
                  }
                </div>
              }
              @case ('error') {
                <ui-empty
                  icon="fa-solid fa-triangle-exclamation"
                  title="消息加载失败"
                  [description]="chat.error() ?? ''"
                />
                <div class="center">
                  <ui-button variant="outline" size="sm" (click)="retryOpen()">重新加载</ui-button>
                </div>
              }
              @case ('empty') {
                @if (!chat.currentSession()) {
                  <!--
                    两种「没有当前会话」的情形，提示词必须分开（2026-11-01）：

                    ① 待建态（用户刚点「新建对话」选了容器，还没发第一条消息）
                       → 这是**正常的输入状态**，右侧应显示欢迎区 + 可用输入框，
                         而不是再让用户点一次「新建对话」（那是个死循环）。

                    ② 该容器确实一条会话都没有、也不是待建态
                       → 才提示「还没有对话 / 点击左侧新建」。
                  -->
                  @if (chat.pendingNewSession()) {
                    <div class="welcome">
                      <div class="welcome-inner">
                        <ui-avatar [icon]="'fa-solid fa-robot'" [size]="'lg'" />
                        <h2 class="welcome-title">
                          {{ greeting() }}，我是 {{ chat.agent()?.name ?? '你的数字生命' }}
                        </h2>
                        <p class="welcome-sub">直接输入第一条消息，就会开始这段对话。</p>
                        <div class="suggests">
                          @for (s of suggests; track s.title) {
                            <button
                              type="button"
                              class="suggest"
                              (click)="chat.setDraft(s.text)"
                            >
                              <i class="fa-solid" [class]="s.icon" aria-hidden="true"></i>
                              <span class="suggest-title">{{ s.title }}</span>
                              <span class="suggest-text">{{ s.text }}</span>
                            </button>
                          }
                        </div>
                      </div>
                    </div>
                  } @else {
                    <div class="no-session">
                      <i class="fa-solid fa-comments" aria-hidden="true"></i>
                      <h2 class="no-session-title">还没有对话</h2>
                      <p class="no-session-sub">点击左侧「新建对话」，选择一个数字生命后开始。</p>
                      <ui-button variant="primary" size="sm" (click)="requestNewSession()">
                        新建对话
                      </ui-button>
                    </div>
                  }
                } @else {
                <!--
                  空会话欢迎区（2026-10-29，参考 ChatGPT 落地页）：
                  给「该做什么」的具体引导，而不是一句泛泛的「还没有消息」。
                  建议项点一下即填入输入框（不直接发送，让用户能改）。
                -->
                <div class="welcome">
                  <div class="welcome-inner">
                    <!--
                      用图标而不是姓名首字（2026-10-30 用户反馈「这里为什么有个竖条」）：
                      容器名首字母是 l / I 时，渲染出来就是一根竖线，看着像渲染故障。
                    -->
                    <ui-avatar [icon]="'fa-solid fa-robot'" [size]="'lg'" />
                    <h2 class="welcome-title">
                      {{ greeting() }}，我是 {{ chat.agent()?.name ?? '你的数字生命' }}
                    </h2>
                    <p class="welcome-sub">
                      {{ chat.agent()?.specialty || '把要做的事直接说给我，我来干。' }}
                    </p>
                    <div class="suggests">
                      @for (s of suggests; track s.text) {
                        <button type="button" class="suggest" (click)="useSuggest(s.text)">
                          <i class="fa-solid" [class]="s.icon" aria-hidden="true"></i>
                          <span class="suggest-text">
                            <strong>{{ s.title }}</strong>
                            <small class="ellipsis">{{ s.text }}</small>
                          </span>
                        </button>
                      }
                    </div>
                  </div>
                </div>
                }
              }
              @default {
                <!-- AC-04.4：向上翻历史（滚动到顶部自动加载） -->
                <div class="history-hold">
                  @if (chat.paginating()) {
                    <ui-skeleton variant="rect" height="40px" />
                  } @else if (chat.hasMoreHistory()) {
                    <ui-button variant="ghost" size="sm" (click)="loadEarlier()">
                      加载更早的消息
                    </ui-button>
                  } @else {
                    <span class="history-end">已到最早</span>
                  }
                </div>
                @for (row of messageRows(); track row.key) {
                  @if (row.kind === 'tool') {
                    <!--
                      连续的终端活动消息（容器把 Hermes 每一步都单独发一条）
                      合并成一个折叠组：默认收起，点开才看命令细节。
                      用户实测反馈：这些内容把会话完全淹没了。
                    -->
                    <app-tool-activity [block]="row.block" />
                  } @else {
                    <app-message-bubble
                      [message]="row.message!"
                      [own]="row.message!.sender === 'me'"
                      (retry)="chat.retry($event)"
                      (openTask)="openTaskRail()"
                      (preview)="openFile($event)"
                    />
                  }
                }
                <!--
                  对方正在输入（2026-11-01 用户要求：放在**下一条消息的位置**）。
                  即消息流末尾、紧贴最后一条消息，而不是漂浮在输入框上方。
                  只在有内容时才渲染 —— 它出现在视口外时不可见，所以下面
                  的 stickToBottom 要跟着它一起滚到底。
                -->
                @if (chat.peerTyping()) {
                  <div class="typing-row" aria-live="polite">
                    <app-typing-indicator [name]="chat.agent()?.name ?? '对方'" />
                  </div>
                }
              }
            }
          </div>

          <!--
            输入区外层（2026-10-29）：与消息流同宽居中限宽 768px，
            卡片式输入框才不会被拉到整列宽度（宽屏下单行输入框横跨 1200px 很怪）。
          -->
          <!--
            正在输入指示器已移入消息流末尾（2026-11-01 用户要求）：
            它应该出现在「下一条消息」的位置，而不是漂浮在输入框上方。
            见 .typing-row。
          -->

          <!--
            🔴 没有选中会话时不显示输入区（2026-11-01 用户要求）。
               空态下仍摆一个可以打字的输入框，用户会以为「直接输入就能开始」，
               但此时没有线程根，发出去会走隐式建会话的旁路，容易产生语义混乱。
               空态只保留说明 + 「新建对话」按钮，入口唯一。
               例外：state 是 'ready'/'empty' 但有 currentSession（正常会话）→ 正常显示。
          -->
          @if (chat.currentSession() || chat.pendingNewSession()) {
          <div class="composer-hold">
          <!--
            暂存附件条：选文件后**先停在这里**，点发送才真正上传+发送。
            用户要求「先上传本地，点发送时随文字一起发」——
            早期实现选完就立刻上传并单发一条，不符合。
          -->
          @if (chat.pendingFiles().length > 0) {
            <div class="pending-holds" role="list" aria-label="待发送附件">
              @for (pf of chat.pendingFiles(); track pf.id) {
                <!--
                  图片附件（2026-10-31 按参考图重做）：
                  大缩略图 + 下方「解释图片 →」+ 右上角移除。
                  点缩略图直接打开图片预览（灯箱）。
                -->
                @if (pf.previewUrl) {
                  <div class="pending-card" role="listitem">
                    <button
                      type="button"
                      class="pending-card-img"
                      [attr.aria-label]="'预览 ' + pf.file.name"
                      (click)="previewPending(pf)"
                    >
                      <img [src]="pf.previewUrl" [alt]="pf.file.name" />
                    </button>
                    <span class="pending-card-act" aria-hidden="true">解释图片 →</span>
                    <button
                      type="button"
                      class="pending-x pending-x--float"
                      [attr.aria-label]="'移除 ' + pf.file.name"
                      (click)="chat.unstageFile(pf.id)"
                    >
                      <i class="fa-solid fa-xmark" aria-hidden="true"></i>
                    </button>
                  </div>
                } @else {
                  <span class="pending-chip" role="listitem">
                    <i class="fa-solid fa-paperclip" aria-hidden="true"></i>
                    <span class="pending-name ellipsis" [title]="pf.file.name">{{ pf.file.name }}</span>
                    <button
                      type="button"
                      class="pending-x"
                      [attr.aria-label]="'移除 ' + pf.file.name"
                      (click)="chat.unstageFile(pf.id)"
                    >
                      <i class="fa-solid fa-xmark" aria-hidden="true"></i>
                    </button>
                  </span>
                }
              }
            </div>
          }

          <app-composer
            [draft]="chat.draft()"
            [sending]="chat.sending()"
            [uploading]="chat.uploading()"
            [pct]="chat.uploadPct()"
            [disabled]="chat.connection() !== 'connected'"
            (draftChange)="chat.setDraft($event)"
            (send)="chat.sendText($event)"
            (attach)="chat.stageFiles($event)"
          />
          </div>
          }
        }
      </section>

      <!-- ===== 右栏（宽不足时折叠为浮层，不删功能）===== -->
      @if (chat.agentId() && railOpen()) {
        <!--
          拖宽手柄（2026-10-30 参照 DSH 右栏）：
          双栏布局里右栏宽固定、内容可窄可宽，用户会想按自己的内容调。
          手柄 5px 但叠了 8px 的点击热区（::after），不专门点中那一条线。
        -->
        <div
          class="rail-resizer"
          role="separator"
          aria-orientation="vertical"
          aria-label="拖动调整侧栏宽度，双击复原"
          [attr.aria-valuenow]="railWidth()"
          (pointerdown)="startResize($event)"
          (dblclick)="resetRailWidth()"
        ></div>
        <aside class="col rail-col" aria-label="侧栏面板">
          <!--
            标题行（参照 DSH）：标签条只有图标+文字时，默认激活哪一页不明显，
            整块区域看着像空的。用「图标 + 面板名 + 一句说明」把当前上下文说清楚。
          -->
          <header class="rail-head">
            <span class="rail-head-ico" aria-hidden="true">
              <i class="fa-solid" [class]="railCurrent().icon"></i>
            </span>
            <span class="rail-head-text">
              <strong>{{ railCurrent().label }}</strong>
              <small class="ellipsis">{{ railCurrent().hint }}</small>
            </span>
            <ui-button
              variant="ghost"
              shape="circle"
              size="sm"
              icon="fa-solid fa-xmark"
              ariaLabel="收起面板"
              (click)="railOpen.set(false)"
            />
          </header>
          <!--
            四标签（参考 DSH 右栏）：一个标签只讲一件事。
            原实现把「运行状态 / 最近动态」常驻在任务、成果两页里，
            面板语义混乱 —— 现在它们只在「状态」页出现。
          -->
          <div class="rail-tabs" role="tablist" aria-label="侧栏面板">
            @for (t of railTabs; track t.key) {
              <button
                type="button"
                class="rail-tab"
                role="tab"
                [class.on]="railTab() === t.key"
                [attr.aria-selected]="railTab() === t.key"
                (click)="railTab.set(t.key)"
              >
                <i class="fa-solid" [class]="t.icon" aria-hidden="true"></i>
                <span>{{ t.label }}</span>
                @if (t.key === 'files' && sessionFiles().length > 0) {
                  <span class="rail-tab-count">{{ sessionFiles().length }}</span>
                }
                @if (t.key === 'tasks' && agentTasks().length > 0) {
                  <span class="rail-tab-count">{{ agentTasks().length }}</span>
                }
              </button>
            }
          </div>
          <div class="rail-body" [class.has-preview]="!!previewFile()">
            <!--
              文件预览（2026-10-30 重构）：右栏内联，头部自带「右侧 | 全屏」切换。
              文件名与返回按钮已收进 app-file-preview 头部，这里不再重复一行。
              图片不进右栏（打开即走深色灯箱），见下方 app-image-lightbox。
            -->
            @if (previewFile(); as pf) {
              <div class="rail-preview">
                <app-file-preview
                  [open]="true"
                  [inline]="true"
                  [url]="pf.url"
                  [name]="pf.name"
                  [mimeType]="pf.mimeType"
                  (closed)="previewFile.set(null)"
                />
              </div>
            } @else if (chat.agent(); as a) {
              @if (railTab() === 'status') {
              <section class="rail-block">
                <h3>运行状态</h3>
                <dl class="kv">
                  <div>
                    <dt>当前任务</dt>
                    <dd [class]="'tone-ink-' + taskLine(a.id).tone">{{ taskLine(a.id).text }}</dd>
                  </div>
                  <div><dt>CPU</dt><dd>{{ pct(a.host?.cpuPercent) }}</dd></div>
                  <div><dt>内存</dt><dd>{{ pct(a.host?.memPercent) }}</dd></div>
                  <div><dt>Token 用量</dt><dd>{{ tokens(a) }}</dd></div>
                </dl>
              </section>

              <!--
                最近动态：只记录**观测到的**开始/结束（每次轮询对比得出）。
                只列本会话 —— 用户在这里关心的是「它刚才干了什么」。
              -->
              @if (pulses().length > 0) {
                <section class="rail-block">
                  <h3>最近动态</h3>
                  <ol class="pulse-list">
                    @for (p of pulses(); track p.at + p.kind) {
                      <li class="pulse-item">
                        <i
                          class="fa-solid"
                          [class.fa-play]="p.kind === 'started'"
                          [class.fa-check]="p.kind === 'finished'"
                          aria-hidden="true"
                        ></i>
                        <span class="pulse-text ellipsis">
                          {{ p.kind === 'started' ? (p.task || '开始处理') : '完成' }}
                        </span>
                        <small>{{ clock(p.at) }}</small>                      </li>
                    }
                  </ol>
                </section>
              }
              }

              @if (railTab() === 'tasks') {
                <section class="rail-block">
                  <h3>相关任务 <span class="count">{{ agentTasks().length }}</span></h3>
                  @if (agentTasks().length === 0) {
                    <p class="rail-empty">该数字生命暂无任务。</p>
                  } @else {
                    @for (t of agentTasks(); track t.id) {
                      <button type="button" class="rail-item task" (click)="goTask(t.id)">
                        <span class="file-icon task-ico" aria-hidden="true">
                          <i class="fa-solid fa-list-check"></i>
                        </span>
                        <span class="rail-meta">
                          <strong class="ellipsis">{{ t.title }}</strong>
                          <small class="ellipsis">
                            {{ t.id }} · {{ statusText(t.status) }}
                          </small>
                        </span>
                        <i class="fa-solid fa-chevron-right" aria-hidden="true"></i>
                      </button>
                    }
                  }
                </section>
              }

              @if (railTab() === 'files') {
              <!--
                本会话文件：从**对话消息**里汇总附件。
                成果栏原数据来自平台上报（容器还没上报时永远是 0），
                而容器交付的文件其实就在对话里 —— 这里直接列出来，用户马上能用。
              -->
              <section class="rail-block">
                <h3>本会话文件 <span class="count">{{ sessionFiles().length }}</span></h3>
                @if (sessionFiles().length === 0) {
                  <p class="rail-empty">这条对话里还没有文件。</p>
                } @else {
                  @for (f of sessionFiles(); track f.url + f.name) {
                    <button type="button" class="rail-item" (click)="openFile(f)">
                      <span class="file-icon" aria-hidden="true">
                        <i class="fa-solid" [class]="fileIconByMime(f.mimeType)"></i>
                      </span>
                      <span class="rail-meta">
                        <strong class="ellipsis">{{ f.name }}</strong>
                        <small class="ellipsis">{{ fmtSize(f.size) }}</small>
                      </span>
                      <i class="fa-solid fa-chevron-right" aria-hidden="true"></i>
                    </button>
                  }
                }
              </section>
              }

              @if (railTab() === 'results') {

              <section class="rail-block">
                <h3>相关成果 <span class="count">{{ agentDeliverables().length }}</span></h3>
                @if (agentDeliverables().length === 0) {
                  <p class="rail-empty">该数字生命暂无交付成果。</p>
                } @else {
                  @for (d of agentDeliverables(); track d.id) {
                    <!--
                      🔴 与「本会话文件」同一套卡片与交互（2026-11-01 用户要求）：
                      整行可点 = 直接打开预览，右侧给出明确的进入箭头。
                      原来是 div + 右侧两个小圆钮，点了不明显、和文件栏观感割裂。
                      下载仍保留为独立按钮（点行是预览，点下载是保存，语义不混）。
                    -->
                    <button type="button" class="rail-item" (click)="preview(d)">
                      <span class="file-icon" aria-hidden="true">
                        <i class="fa-solid" [class]="fileIcon(d.fileType)"></i>
                      </span>
                      <span class="rail-meta">
                        <strong class="ellipsis">{{ d.title }}</strong>
                        <!-- 🔴 无附件时不能渲染成「· 」空分隔符（曾显示成「仅有 · 的文档」） -->
                        <small class="ellipsis">
                          {{ d.filename || '暂无附件' }}
                          @if (d.filename && d.size) {
                            · {{ d.size }}
                          }
                        </small>
                        <!--
                          附件还在容器里（未上云盘）：如实说明，不给假下载按钮。
                          「正在同步到云盘」= 已登记；有同步失败原因时直接展示原因。
                        -->
                        @if (pendingOf(d); as a) {
                          <small class="ellipsis sync-hint" [title]="syncError(d.id, a) || ''">
                            @if (syncError(d.id, a); as err) {
                              <i class="fa-solid fa-circle-exclamation" aria-hidden="true"></i>
                              未上云：{{ err }}
                            } @else {
                              <i class="fa-solid fa-cloud-arrow-up" aria-hidden="true"></i>
                              排队搬往云盘…
                            }
                          </small>
                        }
                      </span>
                      <i class="fa-solid fa-chevron-right" aria-hidden="true"></i>
                    </button>
                  }
                }
              </section>
              }
            }
          </div>
        </aside>
      }
    </div>
    <!--
      成果预览（2026-10-31）：有 url 的走右栏内联（见 preview()）；
      这里只留「产物还没上云、暂无 url」的说明弹窗 —— 不假装能预览。
    -->
    <ui-modal
      [open]="!!previewing()"
      title="这份成果还没有可预览的文件"
      (openChange)="previewing.set(null)"
    >
      <p class="preview-pending-hint">
        容器还在把文件搬到云盘，完成后可以在右栏「成果」里直接预览。
      </p>
    </ui-modal>

    <!--
      消息附件预览已改为**右栏内联**（2026-10-30），不再使用全屏遮罩弹窗。
      见右栏 .rail-preview 区块。

      图片 / 音频 / 视频不进右栏，由 openFile 分流到下面两个轻量浮层：
    -->
    <app-image-lightbox
      [open]="!!lightboxFile()"
      [url]="lightboxFile()?.url ?? ''"
      [name]="lightboxFile()?.name ?? ''"
      [size]="lightboxFile()?.size ?? 0"
      (closed)="lightboxFile.set(null)"
    />
    <ui-modal
      [open]="!!mediaFile()"
      [title]="mediaFile()?.name ?? ''"
      (openChange)="onMediaOpenChange($event)"
    >
      @if (mediaFile(); as mf) {
        @if (mediaKind(mf) === 'video') {
          <video class="media-modal-el" [src]="mf.url" controls playsinline></video>
        } @else {
          <audio class="media-modal-el media-modal-el--audio" [src]="mf.url" controls></audio>
        }
      }
    </ui-modal>

    <!--
      新建对话模态框已移到外壳（app-new-session-modal）——
      新建入口收敛为左栏顶部唯一按钮，与页面解耦。
    -->

    <!--
      删除会话索引（规范:删除类二次确认一律走居中 ui-modal）。
      文案必须说清「消息不会被删除」—— 列表只是索引，正文在 Matrix 房间里。
    -->
    <ui-modal
      [open]="removing() !== null"
      title="从列表移除这条对话？"
      (openChange)="removing.set(null)"
    >
      <p class="remove-note">
        仅从左侧列表移除「{{ removing()?.title }}」。<br />
        <strong>消息内容不会被删除</strong>，仍在服务器上。
      </p>
      <div class="remove-acts">
        <ui-button variant="ghost" (click)="removing.set(null)">取消</ui-button>
        <ui-button variant="primary" (click)="doRemove()">移除</ui-button>
      </div>
    </ui-modal>

    <!-- 重命名弹层已移除（2026-10-31 用户要求：对话命名不可修改） -->
  `,
  styles: [
    `
      @use '../../../core/styles/breakpoints' as bp;

      :host {
        display: block;
        height: 100%;
        /* 参与父级网格时，默认的 min-height:auto 会被内容撑高 → 整页滚动 */
        min-height: 0;
        overflow: hidden;
      }
      /*
       * 拖动右栏宽度期间禁止选中文本 —— 否则鼠标划过整页文字全被刷蓝。
       * 用 :host-context 而不用全局样式：只在会话页生效，且不必动 styles.scss
       * （那里有行数预算，2026-10-30 已经顶到 300 行）。
       */
      :host-context(body.is-resizing-rail) {
        user-select: none;
        cursor: col-resize;
      }

      /*
        四栏：列表固定可读宽(min~max),主区吃掉全部剩余,右栏按比例但设上下限。
        —— 窗口变宽时主区跟着变宽(不是内容整体缩放),这是"流动布局"的要点。
      */
      /*
        列表栏用**固定可读宽**(280px)而非比例:列表项是纵向排列,
        宽度随窗口缩放会把名字/预览压到不可读。右栏才用比例。
      */
      /*
        列数随右栏显隐**动态变化** —— 否则右栏隐藏后那一列仍占位,聊天区不填满。
        用 :has() 检测 .rail-col 是否存在（存在才保留第三列）。
      */
      .conversation-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        height: 100%;
        min-height: 0;
      }
      /*
       * 有右栏时是三列：主区 | 拖宽手柄(5px) | 右栏。
       * 右栏宽度由 JS 写到 inline style，这里只给 1fr 之外的兜底 ——
       * 🔴 列数必须把 resizer 算进去，否则右栏会被挤到下一行（实测：掉到内容下方）。
       */
      .conversation-layout:has(> .rail-col) {
        grid-template-columns: minmax(0, 1fr) 5px var(--rail-w, 320px);
      }

      /*
       * 窄窗（<1150）压缩右栏宽度，但**不让它换行**（2026-10-30 用户要求）。
       *
       * 🔴 原实现把栅格改成单列 + 隐藏右栏；一旦隐藏规则因为任何原因没生效
       *    （选择器优先级、样式加载顺序），右栏就会掉到主区**下方**，
       *    表现为"右栏跑到页面底部"（实测现象）。
       *    现在的做法：列数恒定三列，只把第三列压到 280px 下限，
       *    从结构上排除"掉到下方"的可能。
       */
      @include bp.dk-below-4col {
        .conversation-layout:has(> .rail-col) {
          grid-template-columns: minmax(0, 1fr) 5px minmax(240px, var(--rail-w, 320px));
        }
      }

      .col {
        min-width: 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
        background: var(--surface);
      }
      .main-col {
        background: var(--surface);
        border-right: 1px solid var(--edge);
      }
      .rail-col {
        background: var(--rail-surface);
        /* 宽度来自栅格列（--rail-w 由容器上的 inline 变量传入） */
        min-width: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }

      /* ---- 拖宽手柄 ---- */
      .rail-resizer {
        position: relative;
        width: 5px;
        z-index: 2;
        cursor: col-resize;
        flex-shrink: 0;
        background: transparent;
        transition: background-color var(--motion-fast) var(--ease-standard);
      }
      /* 热区左右各扩 3px：5px 的线太细，很难点中 */
      .rail-resizer::after {
        content: '';
        position: absolute;
        inset: 0 -3px;
      }
      .rail-resizer:hover,
      .rail-resizer:active {
        background: var(--primary);
      }
      .rail-resizer:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: -1px;
      }

      /* ---- 右栏标题行 ---- */
      /* ---- 右栏内联预览 ---- */
      /*
       * 预览时 rail-body 不滚动、不留内边距（2026-10-31）：
       * rail-body 的滚动容器 + 预览面板的 100% 高度叠加，在浏览器整体缩放后
       * 会把底部状态栏挤出可视区（用户截图）。预览面板内部自己滚动即可。
       */
      .rail-body.has-preview {
        padding: 0;
        overflow: hidden;
        /* flex 列：让 .rail-preview 撑满，而不是按内容塌缩（block 下子元素无高度） */
        display: flex;
        flex-direction: column;
        gap: 0;
        align-content: normal;
      }
      .rail-preview {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        overflow: hidden;
      }
      /* 音视频模态 */
      .media-modal-el {
        display: block;
        width: 100%;
        max-height: 70dvh;
        border-radius: var(--r-sm);
        background: var(--surface-2);
      }
      .media-modal-el--audio {
        max-height: none;
      }
      .rail-preview app-file-preview {
        /* flex 链而非 display:block：块级宿主会按内容塌缩（实测面板高度随缩放变化） */
        flex: 1 1 0;
        min-height: 0;
        overflow: hidden;
      }
      /* 预览期间隐藏标签条 —— 已经在看具体文件了，切标签会让预览莫名消失 */
      .rail-col:has(.rail-preview) .rail-tabs {
        display: none;
      }

      .rail-head {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
        padding: var(--sp-3) var(--sp-3) var(--sp-2);
        flex-shrink: 0;
      }
      .rail-head-ico {
        display: grid;
        place-items: center;
        width: 28px;
        height: 28px;
        flex-shrink: 0;
        border-radius: var(--r-sm);
        background: var(--surface-hover);
        color: var(--ink-2);
        font-size: var(--fs-12);
      }
      .rail-head-text {
        display: grid;
        gap: 1px;
        flex: 1;
        min-width: 0;
        line-height: 1.35;
      }
      .rail-head-text strong {
        font-size: var(--fs-13);
        font-weight: 600;
        color: var(--ink);
      }
      .rail-head-text small {
        font-size: var(--fs-11);
        color: var(--muted);
      }

      .col-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-2);
        padding: var(--sp-4);
        border-bottom: 1px solid var(--edge);
      }
      .col-head h2 {
        margin: 0;
        font-size: var(--fs-15);
        color: var(--ink);
      }
      .count {
        font-size: var(--fs-11);
        color: var(--muted);
      }

      .search-hold {
        padding: var(--sp-3) var(--sp-4);
      }

      .list-scroll {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 0 var(--sp-2) var(--sp-3);
      }

      .skeleton-hold {
        display: grid;
        gap: var(--sp-2);
        padding: var(--sp-2);
      }
      .center {
        display: flex;
        justify-content: center;
        padding: var(--sp-3);
      }
      .center-fill {
        flex: 1;
        display: grid;
        place-content: center;
      }

      /* 会话行：与容器行缩进错开,一眼看出层级 */
      .session-row {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
        min-height: 40px;
        margin-left: var(--sp-6);
        padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-3);
        border-radius: var(--r-md);
        cursor: pointer;
      }
      .session-row:hover {
        background: var(--surface-hover);
      }
      .session-row.active {
        background: var(--surface-active);
      }
      .session-row.archived .session-title {
        color: var(--faint);
        text-decoration: line-through;
      }
      .session-title {
        flex: 1;
        min-width: 0;
        font-size: var(--fs-13);
        color: var(--ink-2);
      }
      .session-row.active .session-title {
        color: var(--ink);
        font-weight: 600;
      }
      .session-time {
        flex: none;
        font-size: var(--fs-11);
        color: var(--faint);
      }
      /*
       * 操作按钮默认隐藏,悬停或键盘聚焦时出现 —— 列表平时保持安静,
       * 但**不能只靠 hover**:触屏与键盘用户拿不到,所以 :focus-within 也触发。
       */
      .session-acts {
        display: none;
        align-items: center;
        gap: 2px;
      }
      .session-row:hover .session-acts,
      .session-row:focus-within .session-acts {
        display: flex;
      }
      /* 操作按钮出现时让位,避免标题被挤成一两个字 */
      .session-row:hover .session-time,
      .session-row:focus-within .session-time {
        display: none;
      }


      /* 移除确认弹窗 */
      .remove-note {
        margin: 0;
        font-size: var(--fs-13);
        line-height: 1.6;
        color: var(--ink-2);
      }
      .remove-acts {
        display: flex;
        justify-content: flex-end;
        gap: var(--sp-2);
        margin-top: var(--sp-4);
      }

      /* ---------- 空会话欢迎区（2026-10-29，参考 ChatGPT 落地页） ---------- */
      .welcome {
        display: grid;
        place-items: center;
        min-height: 100%;
        padding: var(--sp-6) var(--sp-4);
      }
      .welcome-inner {
        display: grid;
        justify-items: center;
        gap: var(--sp-3);
        width: 100%;
        max-width: 620px;
        text-align: center;
      }
      .welcome-title {
        margin: var(--sp-2) 0 0;
        font-size: var(--fs-20);
        font-weight: 600;
        color: var(--ink);
        line-height: 1.3;
      }
      .welcome-sub {
        margin: 0;
        max-width: 460px;
        font-size: var(--fs-14);
        color: var(--muted);
        line-height: 1.7;
      }
      .suggests {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--sp-2);
        width: 100%;
        margin-top: var(--sp-3);
      }
      /* 窄窗单列：两列会把标题压成一行省略号，信息全丢 */
      @include bp.dk-below-3col {
        .suggests {
          grid-template-columns: minmax(0, 1fr);
        }
      }
      .suggest {
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        min-height: var(--touch-min);
        padding: var(--sp-3);
        border: 1px solid var(--edge);
        border-radius: var(--r-md);
        background: var(--surface);
        text-align: left;
        cursor: pointer;
        transition: background-color var(--motion-fast) var(--ease-standard);
      }
      .suggest:hover {
        background: var(--surface-hover);
        border-color: var(--edge-strong);
      }
      .suggest > i {
        flex-shrink: 0;
        width: 16px;
        text-align: center;
        color: var(--primary);
      }
      .suggest-text {
        display: grid;
        min-width: 0;
        gap: 2px;
      }
      .suggest-text strong {
        font-size: var(--fs-13);
        font-weight: 600;
        color: var(--ink);
      }
      .suggest-text small {
        font-size: var(--fs-12);
        color: var(--muted);
      }

      /* ---------- 新建对话：选容器模态框（D3） ---------- */      .pick-note {
        margin: 0 0 var(--sp-3);
        font-size: var(--fs-13);
        color: var(--muted);
        line-height: 1.7;
      }
      .pick-list {
        display: grid;
        gap: var(--sp-1);
        max-height: 360px;
        overflow-y: auto;
      }
      .pick-row {
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        min-height: var(--touch-min);
        padding: var(--sp-2) var(--sp-3);
        border: 1px solid var(--edge);
        border-radius: var(--r-md);
        background: var(--surface);
        text-align: left;
        cursor: pointer;
      }
      .pick-row:hover {
        background: var(--surface-hover);
        border-color: var(--edge-strong);
      }
      .pick-row:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: -2px;
      }
      .pick-text {
        display: grid;
        min-width: 0;
        line-height: 1.3;
      }
      .pick-name {
        font-size: var(--fs-13);
        font-weight: 600;
        color: var(--ink);
      }
      .pick-sub {
        font-size: var(--fs-11);
        color: var(--muted);
      }
      .pick-empty {
        margin: 0;
        padding: var(--sp-4);
        font-size: var(--fs-13);
        color: var(--muted);
        text-align: center;
      }
      .pick-acts {
        display: flex;
        justify-content: flex-end;
        margin-top: var(--sp-3);
      }

      /* 无会话空态（2026-11-01）：提示先新建对话，不自动建空会话 */
      .no-session {
        display: grid;
        justify-items: center;
        gap: var(--sp-3);
        padding: var(--sp-8) var(--sp-4);
        text-align: center;
        color: var(--muted);
      }
      .no-session > i {
        font-size: var(--fs-26);
        color: var(--edge-strong, var(--muted));
      }
      .no-session-title {
        margin: 0;
        font-size: var(--fs-15);
        color: var(--ink);
      }
      .no-session-sub {
        margin: 0;
        font-size: var(--fs-13);
      }
      /* 已归档目录 */

      /* 待发送附件条 */
      .pending-holds {
        display: flex;
        flex-wrap: wrap;
        gap: var(--sp-2);
        padding: var(--sp-2) 0;
      }
      /* 输入区与消息流同宽：宽屏下居中，窄屏贴边留 16px */
      /*
        正在输入指示器：作为消息流的**最后一行**出现（2026-11-01）。
        与消息气泡同样的居中限宽，让它看起来就是「即将到来的这一条」，
        而不是浮在输入框上方的独立提示。
      */
      .typing-row {
        display: flex;
        align-items: flex-start;
        margin-bottom: var(--sp-4);
      }

      .composer-hold {
        flex-shrink: 0;
        padding: 0 max(var(--sp-4), calc((100% - 768px) / 2));
      }
      .pending-chip {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-2);
        max-width: 220px;
        padding: var(--sp-1) var(--sp-2);
        border: 1px solid var(--edge);
        border-radius: var(--r-md);
        background: var(--surface-2);
        font-size: var(--fs-12);
        color: var(--ink-2);
      }
      .pending-thumb {
        width: 32px;
        height: 32px;
        border-radius: var(--r-sm);
        object-fit: cover;
        flex: none;
        background: var(--surface-2);
      }
      /* 图片待发送卡片：缩略图铺满，操作条压底部，右上角移除 */
      .pending-card {
        position: relative;
        width: 132px;
        height: 96px;
        border-radius: var(--r-md);
        overflow: hidden;
        background: var(--surface-2);
        box-shadow: var(--shadow-soft, none);
      }
      .pending-card-img {
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        background: none;
        cursor: zoom-in;
        object-fit: cover;
      }
      .pending-card-act {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        min-height: 26px;
        padding: 0 var(--sp-2);
        font-size: var(--fs-11);
        color: var(--inverse);
        background: color-mix(in srgb, var(--canvas) 62%, transparent);
        backdrop-filter: blur(2px);
        white-space: nowrap;
        pointer-events: none;
      }
      .pending-x--float {
        position: absolute;
        top: 4px;
        right: 4px;
        border-radius: var(--r-tag);
        background: color-mix(in srgb, var(--canvas) 60%, transparent);
        color: var(--inverse);
        opacity: 0;
        transition: opacity var(--motion-fast) var(--ease-standard);
      }
      .pending-card:hover .pending-x--float,
      .pending-card:focus-within .pending-x--float {
        opacity: 1;
      }

      .pending-name {
        min-width: 0;
      }
      .pending-x {
        display: grid;
        place-items: center;
        flex: none;
        width: 20px;
        height: 20px;
        border: 0;
        border-radius: var(--r-sm);
        background: transparent;
        color: var(--faint);
        cursor: pointer;
      }
      .pending-x:hover {
        background: var(--surface-hover);
        color: var(--ink);
      }

      .archived-toggle {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
        width: calc(100% - var(--sp-6));
        margin-left: var(--sp-6);
        min-height: 32px;
        padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-3);
        border: 0;
        border-radius: var(--r-md);
        background: transparent;
        font: inherit;
        font-size: var(--fs-12);
        color: var(--faint);
        cursor: pointer;
      }
      .archived-toggle:hover {
        background: var(--surface-hover);
        color: var(--muted);
      }
      .archived-toggle:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: -2px;
      }
      .archived-toggle i {
        width: 12px;
        font-size: var(--fs-10);
      }
      .archived-count {
        padding: 0 6px;
        border-radius: 999px;
        background: var(--surface-2);
        font-size: var(--fs-11);
      }

      .session-empty {
        margin-left: var(--sp-6);
        padding: var(--sp-2) var(--sp-3);
        font-size: var(--fs-12);
        color: var(--faint);
      }

      /* 头部：当前任务名（只读，2026-10-31 取消改名） */
      .preview-pending-hint {
        margin: 0;
        color: var(--ink-2);
        font-size: var(--fs-13);
        line-height: 1.6;
      }
      .session-name {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-1);
        cursor: default;
      }
      .session-name:hover {
        color: var(--ink-2);
      }
      .archived-tag {
        margin-left: var(--sp-1);
        padding: 0 var(--sp-1);
        border-radius: var(--r-sm);
        background: var(--surface-2);
        color: var(--faint);
        font-size: var(--fs-11);
      }
      .conv-info {
        display: grid;
        gap: 2px;
        flex: 1;
        min-width: 0;
      }
      .conv-line {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
      }
      .conv-line strong {
        font-size: var(--fs-15);
        color: var(--ink);
      }
      /* 预览操作区：多个附件时按钮带文件名，过长截断 */
      .preview-actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--sp-2);
        margin-top: var(--sp-3);
      }
      .download {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-1);
        max-width: 240px;
        min-height: var(--touch-min);
        padding: 0 var(--sp-3);
        border-radius: var(--r-sm);
        background: var(--primary);
        color: var(--primary-content);
        font-size: var(--fs-13);
        text-decoration: none;
      }
      .dl-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .conv-preview {
        font-size: var(--fs-12);
        color: var(--muted);
      }
      /* 第二行：任务描述占满剩余宽度，接入态徽标靠右不换行 */
      .conv-subline {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
        min-width: 0;
      }
      .conv-task {
        flex: 1;
        min-width: 0;
        font-size: var(--fs-12);
        color: var(--muted);
      }
      .unread {
        min-width: 18px;
        padding: 0 5px;
        border-radius: var(--r-tag);
        background: var(--danger);
        color: var(--on-danger);
        font-size: var(--fs-11);
        line-height: 18px;
        text-align: center;
        flex-shrink: 0;
      }

      /*
        头部两行：① 头像 + 名称 + 状态徽标 + 操作  ② 当前任务整行。
        用 grid 显式分行，任务名再长也不会挤压头像/标题（此前挤成一排）。
      */
      /*
       * 标题栏（2026-10-29）：**单行**，高度 56px 与顶部导航一致。
       * 原来是「头像/标题/状态/操作」+「任务状态独占一行」的两行网格 ——
       * 多出来的那一行把整个消息区往下推，观感上就是"顶部被抬高了"。
       * 现在任务状态并入标题行右侧，作为紧凑标签。
       */
      .chat-head {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto auto auto;
        grid-template-areas: 'avatar title task status actions';
        align-items: center;
        column-gap: var(--sp-3);
        /*
         * 🔴 固定高度而不是 min-height：内容变化（任务状态出现/消失）不得改变栏高，
         *    否则下方消息区会跟着位移 —— 用户看到的"发送时跳动"。
         */
        height: var(--desk-topbar-h);
        padding: 0 var(--sp-4);
        border-bottom: 1px solid var(--edge);
      }
      /* 任务状态槽位：定宽定高，内部截断 */
      .task-slot {
        display: flex;
        align-items: center;
        min-width: 0;
        max-width: 220px;
        height: 100%;
      }
      .chat-head > ui-avatar {
        grid-area: avatar;
      }
      .chat-head > .chat-title {
        grid-area: title;
      }
      .chat-head > .task-line {
        grid-area: task;
      }
      /* 🔴 徽标与操作区各占一格 —— 曾经共用 status 格，操作按钮把徽标压住了 */
      .chat-head > app-status-badge {
        grid-area: status;
        justify-self: end;
      }
      .chat-head > .chat-actions {
        grid-area: actions;
        justify-self: end;
      }
      .chat-head > .task-line {
        grid-area: task;
      }
      .chat-title {
        display: grid;
        gap: 2px;
        flex: 1;
        min-width: 0;
      }
      .chat-title strong {
        font-size: var(--fs-15);
        color: var(--ink);
      }
      .chat-title small {
        font-size: var(--fs-12);
        color: var(--muted);
      }
      .chat-actions {
        display: flex;
        gap: var(--sp-1);
      }
      /*
        当前任务整行：一个会话一屏只出现一次「它在做什么」。
        左侧细色条 + 会转的小点表达「正在做」，完成态不转。
        用整行而非胶囊：任务描述通常较长，胶囊装不下只能省略。
      */
      .task-line {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-2);
        min-width: 0;
        max-width: 100%;
        padding: var(--sp-1) var(--sp-2);
        border-radius: var(--r-sm);
        font-size: var(--fs-12);
        color: var(--muted);
      }
      .task-line .spin {
        width: 8px;
        height: 8px;
        flex-shrink: 0;
        border-radius: 50%;
        background: var(--muted);
      }
      .task-line.busy .spin {
        background: var(--success);
        animation: pulse-dot 1.4s var(--ease-standard) infinite;
      }
      .task-line.tone-warning {
        color: var(--warning);
      }
      .task-line.tone-warning .spin {
        background: var(--warning);
      }
      .task-line.tone-danger {
        border-left-color: var(--danger);
        color: var(--danger);
      }
      .task-line.tone-danger .spin {
        background: var(--danger);
      }
      .task-line.tone-success,
      .task-line.tone-info {
        border-left-color: var(--success);
        color: var(--success);
      }
      .task-line.tone-success .spin,
      .task-line.tone-info .spin {
        background: var(--success);
      }
      @keyframes pulse-dot {
        0%,
        100% {
          opacity: 1;
          transform: scale(1);
        }
        50% {
          opacity: 0.35;
          transform: scale(0.8);
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .task-line.busy .spin {
          animation: none;
        }
      }

      /*
        运行态小标签：圆点 + 文字（不用底色块，避免标题行三个彩色块打架）。
        只有「执行中」的圆点会呼吸，其余是静态灰/黄点。
      */
      .run-chip {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        flex-shrink: 0;
        font-size: var(--fs-11);
        color: var(--muted);
        white-space: nowrap;
      }
      .run-chip .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--edge-strong);
      }
      .run-chip.tone-success .dot,
      .run-chip.tone-info .dot {
        background: var(--success);
      }
      .run-chip.tone-success,
      .run-chip.tone-info {
        color: var(--success);
      }
      .run-chip.tone-success .dot,
      .run-chip.tone-info .dot {
        animation: pulse-dot 1.4s var(--ease-standard) infinite;
      }      .run-chip.tone-warning {
        color: var(--warning);
      }
      .run-chip.tone-danger {
        color: var(--danger);
      }
      .run-chip.tone-danger .dot {
        background: var(--danger);
      }
      .run-chip.tone-warning .dot {
        background: var(--warning);
      }
      @media (prefers-reduced-motion: reduce) {
        .run-chip .dot {
          animation: none !important;
        }
      }

      /* 最近动态 */
      .pulse-list {
        margin: 0;
        padding: 0;
        list-style: none;
        display: grid;
        gap: var(--sp-2);
      }
      .pulse-item {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
        min-width: 0;
        font-size: var(--fs-12);
        color: var(--ink-2);
      }
      .pulse-item i {
        width: 12px;
        flex-shrink: 0;
        color: var(--muted);
        font-size: var(--fs-11);
      }
      .pulse-text {
        flex: 1;
        min-width: 0;
      }
      .pulse-item small {
        flex-shrink: 0;
        color: var(--muted);
        font-size: var(--fs-11);
      }
      .tone-ink-success {
        color: var(--success);
      }
      .tone-ink-warning {
        color: var(--warning);
      }
      /* 右栏切换按钮的激活态 */
      .chat-actions ui-button.on button {
        background: var(--primary-subtle);
        color: var(--primary);
      }
      .rail-item.task .task-ico {
        background: var(--info-subtle);
        color: var(--info);
      }
      .rail-item > i {
        color: var(--muted);
        flex-shrink: 0;
      }
      .loop-detail {
        margin: 0 0 var(--sp-1);
        font-size: var(--fs-12);
        color: var(--ink-2);
      }
      .loop-hint {
        margin: 0 0 var(--sp-2);
        font-size: var(--fs-12);
        color: var(--muted);
      }
      .banner-hold {
        padding: var(--sp-3) var(--sp-4) 0;
      }

      /*
       * 消息流（2026-10-29 对照 ChatGPT demo 重做）：
       *   · **居中限宽 768px** —— 原实现撑满整列，宽屏下长段落一行 1200px+，
       *     眼睛横跨屏幕读字极累；聊天类界面的阅读宽度上限是硬需求。
       *   · 间距 20px —— 原来 12px，相邻两块回复几乎粘在一起，分不清是两条消息。
       *   · 用 padding 让出左右留白，而不是给每个气泡加 margin（否则限宽容器跟着缩）。
       */
      .messages {
        flex: 1;
        min-height: 0;
        /*
         * 🔴 必须同时锁横向：只写 overflow-y:auto 时，x 轴默认是 visible →
         *    任一子元素（长 URL、宽表格、文件卡片）撑出宽度就会冒出横向滚动条
         *    （用户实测：消息区底部出现一条横条）。
         * 内容自身负责换行/裁剪（见 message-bubble 的 overflow-wrap）。
         */
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        display: grid;
        /* 消息间距 20 → 24（对齐参考实现的 ~28px 密度），条与条之间更容易分辨 */
        gap: var(--sp-6);
        align-content: start;
        /* 上下留白加大：滚到底时最后一条不贴着输入框 */
        padding: var(--sp-6) max(var(--sp-4), calc((100% - 768px) / 2)) var(--sp-8);
      }

      /* 顶部历史区 / 空态 / 骨架屏不吃限宽偏移，保持整列居中 */
      .messages > .history-hold,
      .messages > .center,
      .messages > .skeleton-hold,
      .messages > .welcome {
        width: 100%;
        max-width: 768px;
        margin-inline: auto;
      }

      /* AC-04.4：历史加载区（顶部） */
      .history-hold {
        display: flex;
        justify-content: center;
        padding: var(--sp-1) 0;
      }

      .history-end {
        font-size: var(--fs-12);
        color: var(--muted);
      }


      /* ---------- 右栏标签条（四标签，一个标签一件事） ---------- */
      .rail-tabs {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 2px;
        padding: var(--sp-2) var(--sp-2) 0;
        border-bottom: 1px solid var(--edge);
        flex-shrink: 0;
      }
      .rail-tab {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--sp-1);
        min-height: 36px;
        padding: 0 var(--sp-1);
        border: 0;
        border-bottom: 2px solid transparent;
        background: transparent;
        font: inherit;
        font-size: var(--fs-12);
        color: var(--muted);
        cursor: pointer;
        white-space: nowrap;
      }
      .rail-tab:hover {
        color: var(--ink-2);
        background: var(--surface-hover);
      }
      .rail-tab.on {
        color: var(--ink);
        border-bottom-color: var(--primary);
        font-weight: 600;
      }
      .rail-tab:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: -2px;
      }
      .rail-tab i {
        font-size: var(--fs-11);
      }
      .rail-tab-count {
        padding: 0 5px;
        border-radius: 999px;
        background: var(--surface-2);
        font-size: var(--fs-11);
        font-weight: 400;
        color: var(--muted);
      }

      .rail-body {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: var(--sp-4);
        display: grid;
        gap: var(--sp-5);
        align-content: start;
      }
      .rail-block h3 {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
        margin: 0 0 var(--sp-3);
        font-size: var(--fs-13);
        color: var(--ink-2);
      }
      .kv {
        margin: 0;
        display: grid;
        gap: var(--sp-2);
      }
      .kv > div {
        display: flex;
        justify-content: space-between;
        gap: var(--sp-3);
        font-size: var(--fs-12);
      }
      .kv dt {
        color: var(--muted);
        flex-shrink: 0;
      }
      .kv dd {
        margin: 0;
        color: var(--ink);
        text-align: right;
        min-width: 0;
        overflow-wrap: anywhere;
      }
      .rail-empty {
        margin: 0;
        font-size: var(--fs-12);
        color: var(--muted);
      }
      .rail-item {
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        width: 100%;
        min-height: var(--touch-min);
        padding: var(--sp-2);
        margin-bottom: var(--sp-2);
        border: 1px solid var(--edge);
        border-radius: var(--r-md);
        background: var(--surface);
        text-align: left;
        cursor: pointer;
      }
      .rail-item:hover {
        background: var(--surface-hover);
      }
      .file-icon {
        display: grid;
        place-items: center;
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        border-radius: var(--r-sm);
        background: var(--info-subtle);
        color: var(--info);
      }
      .rail-meta {
        display: grid;
        gap: 2px;
        min-width: 0;
        flex: 1;
      }
      .sync-hint {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-1);
        color: var(--muted);
      }
      .rail-meta strong {
        font-size: var(--fs-13);
        color: var(--ink);
      }
      .rail-meta small {
        font-size: var(--fs-11);
        color: var(--muted);
      }

      .ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    `,
  ],
})
export class DkChatPage {
  readonly chat = inject(ChatService);
  readonly live = inject(LiveService);
  /** 重连时重建常驻 Matrix 连接（登出/断线后需要） */
  private readonly matrixSession = inject(MatrixSessionService);
  private readonly unread = inject(UnreadService);
  private readonly deliverables = inject(DeliverablesService);
  private readonly tasks = inject(TasksService);
  private readonly pulse = inject(TaskPulseService);
  private readonly artifactSync = inject(ArtifactSyncService);
  readonly loop = inject(LoopGuardService);
  /** 多会话（线程）—— 左栏会话列表的唯一数据源 */
  readonly sessions = inject(ChatSessionService);
  private readonly workspaceSvc = inject(WorkspaceService);
  private readonly agentModal = inject(AgentModalService);
  private readonly route = inject(ActivatedRoute);
  private readonly router = inject(Router);
  private readonly device = inject(DeviceService);

  readonly keyword = signal('');
  /**
   * 新建对话时选定的工作区（D3 模态框）。
   * `undefined` = 未打开；`null` = 日常对话；`string` = 工作区 id。
   */
  readonly newSessionWorkspace = signal<string | null | undefined>(undefined);

  /** 「新建对话」模态框（左栏按钮与空态引导共用） */
  private readonly newSessionModal = inject(NewSessionModalService);

  /** 空态里点「新建对话」→ 打开容器选择框 */
  requestNewSession(): void {
    this.newSessionModal.open(null);
  }
  readonly railOpen = signal(true);
  /** 右栏内联预览的成果 */
  readonly previewing = signal<Deliverable | null>(null);
  /** 右栏当前面板：任务 / 成果 */
  /**
   * 右栏当前标签。
   *
   * 四个标签各管一件事（参考 DSH 右栏）：
   *   任务 = 该容器的任务 / 文件 = 本会话产出的文件 /
   *   成果 = 平台上报的交付成果 / 状态 = 运行状态与最近动态
   *
   * 默认「文件」—— 用户最关心「这次对话产出了什么」。
   */
  readonly railTab = signal<RailTab>(readRailTabPref());

  /** 标签定义（模板遍历用，避免在模板里重复写四份） */
  readonly railTabs: { key: RailTab; label: string; icon: string; hint: string }[] = [
    { key: 'tasks', label: '任务', icon: 'fa-list-check', hint: '该容器名下的任务' },
    { key: 'files', label: '文件', icon: 'fa-paperclip', hint: '本次对话产出的文件' },
    { key: 'results', label: '成果', icon: 'fa-box', hint: '平台上报的交付成果' },
    { key: 'status', label: '状态', icon: 'fa-gauge-high', hint: '运行指标与最近动态' },
  ];

  /** 当前标签的元信息（标题行用） */
  readonly railCurrent = computed(
    () => this.railTabs.find((t) => t.key === this.railTab()) ?? this.railTabs[0],
  );

  // ---- 右栏宽度（拖宽 + 本地记忆） ----
  private static readonly RAIL_W_KEY = 'fmode_rail_w';
  private static readonly RAIL_W_MIN = 280;
  private static readonly RAIL_W_MAX = 560;
  private static readonly RAIL_W_DEFAULT = 320;

  private readonly _railWidth = signal(this.readRailWidth());
  readonly railWidth = this._railWidth.asReadonly();

  private resizeFrom = 0;
  private resizeStartX = 0;
  private readonly onResizeMove = (e: PointerEvent) => {
    /* 向左拖 = 变宽：宽度增长量是「起点 X - 当前 X」 */
    const raw = this.resizeFrom + (this.resizeStartX - e.clientX);
    /* 预览形态下放宽上限；非预览形态回到 560 */
    const next = this.previewFile() ? clampPreviewRailWidth(raw) : clampRailWidth(raw);
    this._railWidth.set(next);
  };
  private readonly onResizeEnd = () => {
    document.removeEventListener('pointermove', this.onResizeMove);
    document.removeEventListener('pointerup', this.onResizeEnd);
    document.body.classList.remove('is-resizing-rail');
    try {
      localStorage.setItem(DkChatPage.RAIL_W_KEY, String(this._railWidth()));
    } catch {
      /* 隐私模式：只保留内存态 */
    }
  };

  startResize(e: PointerEvent): void {
    e.preventDefault();
    this.resizeFrom = this._railWidth();
    this.resizeStartX = e.clientX;
    document.addEventListener('pointermove', this.onResizeMove);
    document.addEventListener('pointerup', this.onResizeEnd);
    /* 拖动期间禁掉文本选中，否则整页文字会被刷蓝 */
    document.body.classList.add('is-resizing-rail');
  }

  resetRailWidth(): void {
    this._railWidth.set(DkChatPage.RAIL_W_DEFAULT);
    try {
      localStorage.setItem(DkChatPage.RAIL_W_KEY, String(DkChatPage.RAIL_W_DEFAULT));
    } catch {
      /* 忽略 */
    }
  }

  private readRailWidth(): number {
    try {
      const v = Number(localStorage.getItem(DkChatPage.RAIL_W_KEY));
      if (Number.isFinite(v) && v > 0) return clampRailWidth(v);
    } catch {
      /* 忽略 */
    }
    return DkChatPage.RAIL_W_DEFAULT;
  }
  /** 左栏：某 agent 的会话列表是否展开（收起时只显示容器行） */
  readonly expandedAgents = signal<Set<string>>(new Set());
  /** 左栏：哪些容器的「已归档」目录是展开的 */
  readonly archivedOpen = signal<Set<string>>(new Set());
  /** 待确认移除的会话（null = 无） */
  readonly removing = signal<ChatSession | null>(null);
  /** 当前数字生命的任务（右栏任务面板用） */
  readonly agentTasks = computed(() => {
    const id = this.chat.agentId();
    return id ? this.tasks.all().filter((t) => t.agentId === id) : [];
  });

  readonly pct = (v?: number) => fmtPercent(v);
  readonly tokens = (a: { usage?: { totalTokens?: number } }) => fmtTokens(usageOf(a as never).totalTokens);

  /**
   * 「当前任务」文案 —— **唯一实现**在 `TaskPulseService.describe()`。
   * 列表行、头部任务条、右栏运行状态**三处共用同一份**，保证左右同步。
   */
  taskLine(agentId: string): TaskLine {
    return this.pulse.describe(this.live.agentById(agentId));
  }

  /** 列表行紧凑标签：一次只答一个问题 —— 在不在干活 */
  runLabel(agentId: string): string {
    const line = this.taskLine(agentId);
    if (line.tone === 'danger') return '异常';
    if (line.active) return '执行中';
    if (line.tone === 'warning') return '未同步';
    return '空闲';
  }

  /**
   * 列表第二行文案 —— **不与标题行的运行态重复**。
   *
   * 有具体任务时显示任务；否则显示专长（更适合"没在忙"的时候告知用户它是谁）。
   */
  convSubline(agentId: string, specialty?: string): string {
    const line = this.taskLine(agentId);
    // 状态词（空闲/执行中/未同步/异常）已经在标题行，这里不再重复
    if (!line.active && (line.tone === 'neutral' || line.tone === 'danger')) {
      return specialty || '数字生命';
    }
    return line.text || specialty || '数字生命';
  }

  /** 本会话最近动态 */
  readonly pulses = computed(() => this.pulse.pulsesFor(this.chat.agentId()));

  /**
   * 消息 → 渲染行：**连续的终端活动消息合并成一个折叠组**。
   *
   * 容器把 Hermes 的每一步（`💻 terminal` + 命令、`✍️ Writing ...`）
   * 都作为独立消息发出来，一条回复能产生十几条 —— 会话被淹没。
   *
   * 规则：相邻且都属于终端活动的消息合成一组；遇到正常对话立即断开。
   */
  readonly messageRows = computed<MessageRow[]>(() => {
    const rows: MessageRow[] = [];
    /*
     * 🔴 工具组的 key 必须用**组内第一条消息的 id**，不能用 rows.length。
     *
     * 原实现 `tool-${rows.length}-${summary}`：流式追加消息时 rows.length 会变，
     * 导致同一个工具组在相邻两次渲染里 key 不同 → Angular 销毁重建整个组，
     * 表现为「内容一下出现、一下消失」（实测复现：气泡数 2→1→2）。
     */
    let group: { text: string; summary: string; id: string }[] = [];
    const flush = (): void => {
      if (group.length === 0) return;
      const first = group[0];
      rows.push({
        kind: 'tool',
        key: `tool-${first.id}`,
        block: {
          kind: 'process',
          steps: group.map((g) => ({ kind: 'tool' as const, label: g.summary, detail: g.text })),
        },
      });
      group = [];
    };
    for (const m of this.chat.messages()) {
      // 空消息（撤回 / 表情回应 / 空 body）不渲染 —— 实测占 7/12
      if (!m.text?.trim() && !m.file) continue;
      if (m.sender === 'agent' && isToolActivityMessage(m.text)) {
        group.push({ text: m.text!.slice(0, 400), summary: toolActivitySummary(m.text!), id: m.id });
        continue;
      }
      flush();
      rows.push({ kind: 'msg', key: m.id, message: m });
    }
    flush();
    return rows;
  });

  /** 某个成果里「还在容器里、未上云盘」的首个附件（没有则 undefined） */
  pendingOf(d: Deliverable): { name: string; source: string } | undefined {
    const a = d.artifacts.find((x) => !x.url && x.source);
    return a ? { name: a.name, source: a.source! } : undefined;
  }

  /** 附件同步失败原因（UI 如实展示，不假装正在同步） */
  syncError(deliverableId: string, a: { source: string }): string | undefined {
    return this.artifactSync.errorOf(deliverableId, a.source);
  }

  /** 动态里的时刻（本地毫秒 → HH:MM） */
  clock(ms: number): string {
    return fmtTime(ms);
  }

  private readonly messagesEl = viewChild<ElementRef<HTMLElement>>('messages');

  /** 会话列表：仅已接入的数字生命 */
  readonly conversations = computed(() =>
    this.live
      .agents()
      .filter((a) => a.matrixReady)
      .map((a) => ({
        id: a.id,
        name: a.name,
        specialty: a.specialty,
        currentTask: a.currentTask,
        unread: a.unread,
      }))
      /*
       * 🔴 **固定顺序**（用户实测反馈：选中项位置会乱跳）。
       *    曾按未读数排序 → 未读一变整列重排，用户正在看的会话会跳位。
       *    改为按 name 稳定排序（同 name 再按 id），顺序**不随运行期数据变化**。
       */
      .sort((x, y) => x.name.localeCompare(y.name, 'zh') || x.id.localeCompare(y.id)),
  );

  /** 待预览的消息附件（null = 关闭） */
  readonly previewFile = signal<{ url: string; name: string; mimeType: string } | null>(null);

  /**
   * 上一次「最后一条消息」的 id。
   *
   * 用于区分「尾部新增」（要滚底）与「头部插入」（分页，保持锚点）。
   */
  private lastTailId = '';
  /** 用户是否主动上翻离开了底部（true 时新消息不强行拉回） */
  private userScrolledAway = false;
  /** 正在加载更早历史：期间禁止任何「贴底」动作，否则锚点会被破坏 */
  private loadingEarlier = false;

  /**
   * 打开消息附件预览（按类型分发由 app-file-preview 负责）。
   *
   * 🔴 必须同时**打开右栏**：预览已经改成右栏内联，
   *    若用户之前收起了右栏，只设 previewFile 是看不到任何反应的（实测 bug）。
   */
  openFile(f: { url: string; name: string; mimeType: string; size?: number }): void {
    const kind = previewKindOf(f.name || f.url, f.mimeType);
    /*
     * 图片 / 音视频不进右栏（用户裁决 2026-10-30）：
     * - 图片 → 深色灯箱，占满视口
     * - 音视频 → 居中模态，原生控件自带全屏
     * 其余类型 → 右栏内联预览（可切全屏）。
     */
    if (kind === 'image') {
      this.lightboxFile.set({ url: f.url, name: f.name, size: f.size ?? 0 });
      return;
    }
    if (kind === 'video' || kind === 'audio') {
      this.mediaFile.set({ url: f.url, name: f.name, kind });
      return;
    }
    this.previewFile.set(f);
    this.railOpen.set(true);
  }

  /* ---- 图片灯箱 / 音视频模态（2026-10-30）---- */
  readonly lightboxFile = signal<{ url: string; name: string; size: number } | null>(null);

  /** 待发送图片点缩略图 → 用同一个灯箱预览（2026-10-31） */
  previewPending(pf: { file: File; previewUrl?: string }): void {
    const url = pf.previewUrl;
    if (!url) return;
    this.lightboxFile.set({ url, name: pf.file.name, size: pf.file.size });
  }
  readonly mediaFile = signal<{ url: string; name: string; kind: PreviewKind } | null>(null);

  mediaKind(m: { kind: PreviewKind }): 'video' | 'audio' {
    return m.kind === 'video' ? 'video' : 'audio';
  }

  onMediaOpenChange(open: boolean): void {
    if (!open) this.mediaFile.set(null);
  }

  /**
   * 预览形态下的右栏显示宽度。
   * 拖拽时已按预览上限夹取；这里再兜底一次，防止旧记忆值超出。
   */
  readonly effectiveRailWidth = computed(() =>
    this.previewFile() ? clampPreviewRailWidth(this.railWidth()) : this.railWidth(),
  );

  /** 真实未读数（UnreadService 唯一来源；不用 Agent.unread 的占位值） */
  unreadOf(agentId: string): number {
    return this.unread.countOf(agentId);
  }

  /** 可对话状态（判定唯一实现在 models.agentPresence） */
  containerState(agentId: string): AgentPresence {
    return agentPresence(this.live.agentById(agentId));
  }

  /** 当前打开会话的容器状态（用于区分「容器离线」与「自己在连接中」） */
  readonly currentContainerState = computed<AgentPresence>(() => {
    const id = this.chat.agentId();
    return id ? agentPresence(this.live.agentById(id)) : 'offline';
  });

  readonly filteredConversations = computed(() => {
    const q = this.keyword().trim().toLowerCase();
    if (!q) return this.conversations();
    return this.conversations().filter(
      (c) => c.name.toLowerCase().includes(q) || (c.specialty ?? '').toLowerCase().includes(q),
    );
  });

  /** 本会话里的全部文件（按出现顺序，同 url+name 去重） */
  readonly sessionFiles = computed(() => {
    const seen = new Set<string>();
    const out: { name: string; url: string; mimeType: string; size: number }[] = [];
    for (const m of this.chat.messages()) {
      const f = m.file;
      if (!f || !f.url) continue;
      const key = f.url + f.name;
      if (seen.has(key)) continue;
      seen.add(key);
      out.push({ name: f.name, url: f.url, mimeType: f.mimeType, size: f.size });
    }
    return out;
  });

  /** 按 mimeType 选图标（原生附件没有 fileType 字段） */
  fileIconByMime(mime: string): string {
    if (mime.startsWith('image/')) return 'fa-file-image';
    if (mime.includes('html')) return 'fa-file-code';
    if (mime.includes('pdf')) return 'fa-file-pdf';
    if (mime.includes('word') || mime.includes('officedocument.word')) return 'fa-file-word';
    if (mime.includes('sheet') || mime.includes('excel')) return 'fa-file-excel';
    if (mime.includes('zip')) return 'fa-file-zipper';
    return 'fa-file-lines';
  }

  /** 字节数 → 人类可读 */
  fmtSize(bytes: number): string {
    if (!bytes) return '';
    if (bytes < 1024) return `${bytes} B`;
    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
    return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
  }

  readonly agentDeliverables = computed(() => {
    const id = this.chat.agentId();
    return id ? this.deliverables.byAgent(id) : [];
  });

  constructor() {
    /*
     * AC-04.2：新消息到达后滚动到底。
     *
     * 🔴 **只在「尾部新增了消息」时滚底**（用户实测反馈：上翻历史时也被拉到底）。
     *    上翻历史走的是 `paginate()` → `messages` 变长但**尾部未变** →
     *    此处按「最后一条消息 id 是否变化」判定，分页时保持锚点不动。
     */
    effect(() => {
      const list = this.chat.messages();
      const tailId = list.length ? list[list.length - 1].id : '';
      const prev = this.lastTailId;
      this.lastTailId = tailId;
      // 首次（prev 为空）或尾部确实变了 → 滚底
      if (prev === '' || tailId !== prev) {
        this.stickToBottom();
      }
    });

    /*
     * 正在输入指示器出现时贴底（2026-11-01：已移入消息流末尾）。
     *
     * 🔴 它现在是消息流的最后一行，出现会让流的高度增加一截。
     *    用 rAF + 再等一帧：effect 执行时 DOM 还没插入，
     *    立即 scrollToBottom 会把「指示器还没占位」的高度当作终点，
     *    结果它出现在视口下方看不见（截图实测）。
     */
    effect(() => {
      if (!this.chat.peerTyping()) return;
      requestAnimationFrame(() => requestAnimationFrame(() => this.stickToBottom()));
    });

    // 窄窗默认收起右栏（<1150）
    if (typeof window !== 'undefined' && window.innerWidth < 1150) {
      this.railOpen.set(false);
    }

    // 🔴 监听**路由参数流**而非 snapshot —— 同一组件在 chat/:id 间复用时
    //    构造函数不会重跑，只读一次 snapshot 会导致「切换会话无反应」。
    this.route.paramMap.subscribe((params) => {
      void this.onRouteChange(params.get('id'), params.get('sessionId'));
    });

    /*
     * 成果附件同步：读到成果列表后，把「只有容器路径、没有云盘地址」的附件登记去同步。
     * 幂等（服务内部去重），每次列表刷新都可以安全调用。
     */
    effect(() => {
      const list = this.deliverables.all();
      if (list.length === 0) return;
      void this.artifactSync.syncPending(list);
    });

    /*
     * 待建态建出会话后，把 URL 从 /chat/:id/new 换成真实会话地址（2026-11-01）。
     *
     * 🔴 不换的话 URL 一直停在 `new`：刷新页面会重新进入待建态，
     *    用户看到刚发的会话「不见了」；分享/回退也会回到空白新建页。
     *    这里用 replaceUrl，不产生历史记录堆积。
     */
    effect(() => {
      const sid = this.chat.sessionId();
      const aid = this.chat.agentId();
      if (!sid || !aid) return;
      // 只在当前路由仍是待建态的 `new` 时替换，正常切会话不干预
      if (!this.router.url.includes(`/chat/${aid}/new`)) return;
      void this.router.navigateByUrl(
        `/${this.device.mode()}/chat/${aid}/${encodeURIComponent(sid)}`,
        { replaceUrl: true },
      );
    });
  }

  private async onRouteChange(id: string | null, sessionId: string | null): Promise<void> {
    this.sessions.load();
    await Promise.all([
      this.live.ensureLoaded(),
      this.deliverables.ensureLoaded(),
      // 右栏任务面板依赖全量任务（按 agentId 过滤）
      this.tasks.ensureAllLoaded(),
    ]);
    if (id) {
      /*
       * `sessionId === 'new'` = 「新建对话」的待建地址（不落任何数据）。
       * 2026-11-01：新建对话不再预建空会话，而是打开一个空白待建态，
       * 用户发出第一条消息时才真正创建会话。
       */
      if (sessionId === 'new') {
        const ws = this.route.snapshot.queryParamMap.get('ws');
        await this.chat.startBlank(id, ws || null);
      } else {
        await this.chat.open(id, sessionId ?? undefined);
      }
      // 打开后内容不满一屏 → 自动补历史（懒加载的另一半）
      void this.fillViewportIfNeeded();
    } else {
      const first = this.conversations()[0];
      if (first) void this.openConversation(first.id, true);
    }
  }

  openConversation(id: string, replace = false): void {
    void this.router.navigateByUrl(`/${this.device.mode()}/chat/${id}`, { replaceUrl: replace });
  }

  // ---------- 多会话（左栏两栏式：容器 → 会话） ----------

  /**
   * 左栏分组数据：每个可对话的容器 + 它下面的会话。
   *
   * 排序与 `conversations()` 一致（按名字稳定排序），
   * **不随消息变动重排** —— 用户正在看的行不会跳位。
   *
   * 搜索规则:匹配容器名 → 显示该容器下全部会话;只匹配会话名 → 只显示命中的会话。
   */
  readonly groups = computed<
    { agent: ConversationRow; sessions: ChatSession[]; archived: ChatSession[] }[]
  >(() => {
    const map = this.sessions.byAgent();
    const kw = this.keyword().trim().toLowerCase();
    const out: { agent: ConversationRow; sessions: ChatSession[]; archived: ChatSession[] }[] = [];
    for (const c of this.filteredConversations()) {
      /*
       * 🔴 活跃会话与已归档会话**分开两组渲染**,不是「归档就消失」。
       *
       * 用户要求:归档应当收进**独立目录**,而不是从界面上抹掉 ——
       * 抹掉会让用户以为对话被删了,也找不回来。
       */
      let list = (map.get(c.id) ?? []).filter((s) => !s.archived);
      let archived = (map.get(c.id) ?? []).filter((s) => s.archived);
      if (kw) {
        const selfMatch =
          c.name.toLowerCase().includes(kw) || (c.specialty ?? '').toLowerCase().includes(kw);
        if (!selfMatch) {
          list = list.filter((s) => s.title.toLowerCase().includes(kw));
          archived = archived.filter((s) => s.title.toLowerCase().includes(kw));
          if (list.length === 0 && archived.length === 0) continue;
        }
      }
      out.push({ agent: c, sessions: list, archived });
    }
    return out;
  });

  /** 容器是否展开（当前打开的容器默认展开） */
  isExpanded(agentId: string): boolean {
    return this.expandedAgents().has(agentId) || this.chat.agentId() === agentId;
  }

  /**
   * 展开 / 收起某容器的会话列表。
   *
   * 🔴 **没打开过的容器，首次点击要顺带打开它**。
   *    否则:点开 lj-test 只展开了一个空列表（它的会话要「进过这个容器」
   *    才会被扫描出来），用户以为这个容器没有对话（实测踩坑）。
   *
   *    `openConversation` 会触发 `chat.open()` → 扫描 Matrix 线程 →
   *    左栏立刻填上该容器已有的对话。用户不需要多点一次。
   */
  toggleExpand(agentId: string): void {
    const wasExpanded = this.isExpanded(agentId);
    const hasSessions = (this.sessions.byAgent().get(agentId) ?? []).length > 0;
    this.expandedAgents.update((set) => {
      const next = new Set(set);
      if (set.has(agentId)) next.delete(agentId);
      else next.add(agentId);
      return next;
    });
    // 从未打开过、且左栏没有它的会话 → 点一次就直接进去
    if (!wasExpanded && !hasSessions && this.chat.agentId() !== agentId) {
      this.openConversation(agentId);
    }
  }

  /** 打开指定会话 */
  openSession(agentId: string, sessionId: string): void {
    void this.router.navigateByUrl(
      `/${this.device.mode()}/chat/${agentId}/${encodeURIComponent(sessionId)}`,
    );
  }

  /**
   * 打开容器设置 —— 用**全局模态框**而不是跳整页（2026-10-30 用户反馈）。
   * 跳页会丢掉当前会话的滚动位置与上下文，关掉弹层就回到原处。
   */
  openAgentSettings(agentId: string): void {
    this.agentModal.open(agentId);
  }

  /**
   * 空会话欢迎区：按小时问候 + 4 条起点建议。
   *
   * 建议只「填入输入框」不直接发送 —— 用户通常要改成自己的口径再发，
   * 直接发出去反而要撤回。文案取自真实使用场景（交付文件 / 查状态 / 排查 / 同步进度）。
   */
  readonly suggests: { icon: string; title: string; text: string }[] = [
    { icon: 'fa-code', title: '做个单页', text: '把这周的数据整理成一个可以直接打开的 HTML 单页' },
    { icon: 'fa-magnifying-glass', title: '看看在忙什么', text: '你现在在做什么？列出正在推进的任务和卡住的地方' },
    { icon: 'fa-wrench', title: '排查问题', text: '刚才那次运行失败了，帮我看下日志里是什么原因' },
    { icon: 'fa-list-check', title: '同步进度', text: '把今天做完的内容整理成一份进度汇报' },
  ];

  readonly greeting = computed(() => {
    const h = new Date().getHours();
    if (h < 6) return '凌晨好';
    if (h < 12) return '上午好';
    if (h < 14) return '中午好';
    if (h < 18) return '下午好';
    return '晚上好';
  });

  /** 点建议 → 填入输入框（不直接发送） */
  useSuggest(text: string): void {
    this.chat.setDraft(text);
  }

  /**
   * 会话树发出「新建对话」请求 → 打开选容器模态框（D3）。
   *
   * 工作区归属本轮不做落库：`workspaceId` 只用于模态框里的提示文案，
   * 真正写入 `ChatSession` 在第 3 轮（见计划文档）。
   */
  onNewSessionRequest(req: NewSessionRequest): void {
    this.newSessionWorkspace.set(req.workspaceId);
  }

  /** 模态框里可选容器（与左栏 old 列表同源：已接入 Matrix 的数字生命） */
  readonly pickableAgents = computed(() => this.conversations());

  /**
   * 工作区名称（模态框提示用）。
   * 第 1 轮工作区由会话树组件持有内存态，页面拿不到 —— 先给中性文案，
   * 第 3 轮工作区下沉到 service 后改读 service。
   */
  workspaceName(wsId: string): string {
    if (!wsId) return '日常对话';
    return this.workspaceSvc.byId(wsId)?.name ?? '日常对话';
  }

  /** 选中容器 → 在该容器下新建对话（复用原有去重规则） */
  createInContainer(agentId: string): void {
    const targetWs = this.newSessionWorkspace();
    this.newSessionWorkspace.set(undefined);
    this.newSession(agentId, undefined, targetWs ?? null);
  }

  /**
   * 在指定容器下新建对话并立即打开。
   *
   * @param workspaceId 归属工作区（`null` = 日常对话）。只在从模态框选出容器时传入；
   *                    标题栏的「+」不传，沿用日常对话。
   */
  newSession(agentId: string, event?: Event, workspaceId: string | null = null): void {
    event?.stopPropagation();
    /*
     * 「新建对话」**不创建任何数据**，只是把界面切到该容器的空白待建态
     * （2026-11-01 用户裁决：首次发消息才建会话）。
     *
     * 这样点几次「+」就留几条空壳的问题从根上消失 —— 旧实现要么建空会话、
     * 要么得靠 `pruneEmpty` 事后清理，两者都会出错。
     * 工作区归属通过 URL 传过去，由聊天页在会话建出来那一刻落地。
     */
    this.expandedAgents.update((set) => new Set(set).add(agentId));
    const qs = workspaceId ? `?ws=${encodeURIComponent(workspaceId)}` : '';
    void this.router.navigateByUrl(`/${this.device.mode()}/chat/${agentId}/new${qs}`);
  }

  /** 点删除 → 先弹确认（删除类操作必须二次确认） */
  confirmRemove(s: ChatSession, event?: Event): void {
    event?.stopPropagation();
    this.removing.set(s);
  }

  /** 确认移除（只移除列表索引，Matrix 里的消息不动） */
  doRemove(): void {
    const s = this.removing();
    if (!s) return;
    this.sessions.remove(s.id);
    this.removing.set(null);
    /*
     * 移除的是当前打开的那条 → 回落到该容器的下一条，避免停在空白页。
     */
    if (this.chat.sessionId() === s.id) {
      const next = this.sessions.listFor(s.agentId)[0];
      if (next) this.openSession(s.agentId, next.id);
    }
  }

  /** 归档 / 取消归档（收进「已归档」目录,不删除、不隐藏） */
  toggleArchive(s: ChatSession, event?: Event): void {
    event?.stopPropagation();
    const next = !s.archived;
    this.sessions.archive(s.id, next);
    /*
     * 归档后自动展开该容器的「已归档」目录 ——
     * 让用户看到对话**去了哪里**,而不是以为它消失了。
     */
    if (next) {
      const aid = s.agentId;
      this.archivedOpen.update((set) => new Set(set).add(aid));
    }
  }

  /** 展开 / 收起某容器的「已归档」目录 */
  toggleArchivedGroup(agentId: string, event?: Event): void {
    event?.stopPropagation();
    this.archivedOpen.update((set) => {
      const next = new Set(set);
      if (next.has(agentId)) next.delete(agentId);
      else next.add(agentId);
      return next;
    });
  }

  /** 会话行的时间显示（今天显示时分，更早显示日期） */
  sessionTime(ts: number): string {
    if (!ts) return '';
    const d = new Date(ts);
    const now = new Date();
    const sameDay =
      d.getFullYear() === now.getFullYear() &&
      d.getMonth() === now.getMonth() &&
      d.getDate() === now.getDate();
    if (sameDay) {
      return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
    }
    const days = Math.floor((now.getTime() - d.getTime()) / 86400000);
    if (days === 1) return '昨天';
    if (days < 7) return `${days}天`;
    return `${d.getMonth() + 1}-${d.getDate()}`;
  }

  async reload(): Promise<void> {
    await this.live.refresh();
  }

  /**
   * 重连 / 重新加载。
   *
   * 🔴 必须走 `force`：`chat.open()` 在「同一 agent + 同一会话 + state=ready」时
   *    会短路返回，而断线时 state 仍是 ready —— 不 force 的话按了完全没有反应
   *    （用户实测：「点击这个重新连接没有任何效果」）。
   */
  reconnect(): void {
    const id = this.chat.agentId();
    if (id) void this.chat.open(id, this.chat.sessionId() || undefined, true);
    // Matrix 连接也可能已经断开，顺带重建一次（幂等，已连上时直接返回）
    void this.matrixSession.kick();
  }

  retryOpen(): void {
    const id = this.chat.agentId();
    if (id) void this.chat.open(id, this.chat.sessionId() || undefined, true);
  }

  /** 切换右栏面板：同面板再点则隐藏 */
  toggleRail(tab: RailTab): void {
    if (this.railOpen() && this.railTab() === tab) {
      this.railOpen.set(false);
      return;
    }
    this.railTab.set(tab);
    try {
      localStorage.setItem('fmode_rail_tab', tab);
    } catch {
      /* 隐私模式 */
    }
    this.railOpen.set(true);
  }

  /** 任务状态中文（右栏用） */
  statusText(status: string): string {
    return TASK_STATUS_TEXT[status as keyof typeof TASK_STATUS_TEXT] ?? status;
  }

  /** 消息里的「查看任务」→ 打开右栏任务面板 */
  openTaskRail(): void {
    this.railTab.set('tasks');
    this.railOpen.set(true);
  }

  goTasks(): void {
    const id = this.chat.agentId();
    if (id) void this.router.navigate(['/', this.device.mode(), 'tasks', id]);
  }

  /**
   * 成果预览（2026-10-31 用户要求）：改为**右栏内联**，与消息附件共用同一个预览面板。
   *
   * 原来走全屏遮罩弹窗，和右侧预览是两套观感；现在统一走 `previewFile` 这条链路。
   * 产物还没有 url（仍在容器里）时如实提示，不给空白预览。
   */
  preview(d: Deliverable): void {
    const url = d.artifacts?.[0]?.url ?? '';
    if (!url) {
      this.previewing.set(d);
      return;
    }
    this.openFile({
      url,
      name: d.filename ?? d.title ?? '成果',
      mimeType: d.artifacts?.[0]?.type ?? '',
    });
  }

  fileIcon(type?: string): string {
    return type === 'CSV' ? 'fa-file-csv' : 'fa-file-lines';
  }

  /** CSV 内容转表格行 */
  csvRows(d: Deliverable): string[][] {
    if (!d.content) return [];
    return d.content
      .split(/\r?\n/)
      .filter((l) => l.trim().length > 0)
      .map((l) => l.split(','));
  }

  goArtifact(id: string): void {
    void this.router.navigate(['/', this.device.mode(), 'deliverables'], {
      queryParams: { focus: id },
    });
  }

  goTask(id: string): void {
    void this.router.navigate(['/', this.device.mode(), 'tasks', id]);
  }

  /**
   * 贴底：**滚动两次**。
   *
   * 🔴 踩坑（2026-10-21 实测）：只滚一次时，消息已进 DOM 但 **markdown 还没渲染完**，
   *    那一刻 `scrollHeight` 偏小，滚完仍差 1700+ px —— 用户打开会话看到的是中间某处，
   *    而且之后**再也不动**（因为尾部 id 没再变，effect 不再触发）。
   *
   * 做法：立即滚一次（同步可见），下一个宏任务再滚一次（吃掉 md 渲染后的增量）。
   * 用 `requestAnimationFrame` 而非 `queueMicrotask`：后者在渲染前执行，量不到最终高度。
   */
  private stickToBottom(): void {
    // 用户主动上翻看历史时不要把他拽回来（但首次进入要贴底）
    if (this.userScrolledAway && this.lastTailId !== '') return;
    // 正在往前翻页：此时 layout 变化属于「向上插入」，绝不能贴底
    if (this.loadingEarlier) return;
    this.scrollToBottom();
    requestAnimationFrame(() => {
      this.scrollToBottom();
      // 图片/mermaid 等异步内容会继续长高，再补一次
      setTimeout(() => this.scrollToBottom(), 120);
    });
  }

  private scrollToBottom(): void {
    const el = this.messagesEl()?.nativeElement;
    if (el) el.scrollTop = el.scrollHeight;
  }

  /**
   * AC-04.4：滚动到顶部附近（<80px）自动加载更早历史。
   *
   * 加载前记录 `scrollHeight`，加载后按差值补偿 `scrollTop`，
   * 使视口**锚定在原来的消息上**（不跳变）。
   */
  onMessagesScroll(_e: Event): void {
    const el = this.messagesEl()?.nativeElement;
    if (!el) return;
    /*
     * 记住「用户是否主动离开底部」。
     * 距底 > 160px 视为用户在往上翻 —— 此时新消息到达**不要**把他拽回底部
     * （否则翻历史翻到一半就被弹走）；滚回接近底部时自动恢复贴底。
     */
    const gap = el.scrollHeight - el.scrollTop - el.clientHeight;
    this.userScrolledAway = gap > 160;
    if (el.scrollTop > 80) return;
    if (this.chat.paginating() || !this.chat.hasMoreHistory()) return;
    void this.loadEarlier();
  }

  /**
   * 首屏内容不满一屏时自动补齐（懒加载的另一半）。
   *
   * 🔴 场景:会话首屏固定取 30 条，但短消息一屏能放 40+ 条——
   *    用户打开会看到下方大片空白，还以为是「会话就这么多」。
   *    这里在渲染后测一次高度，不满就往前补一轮，最多 3 轮，
   *    避免一次把整个历史拉穿（那反而拖慢首次进入）。
   */
  private async fillViewportIfNeeded(): Promise<void> {
    const el = this.messagesEl()?.nativeElement;
    if (!el) return;
    for (let i = 0; i < 3; i++) {
      // 等渲染完成再量（markdown 渲染会撑高内容）
      await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)));
      const el2 = this.messagesEl()?.nativeElement;
      if (!el2) return;
      // 内容已经超出视口 → 不需要补
      if (el2.scrollHeight > el2.clientHeight + 8) return;
      // 没有更早的了 → 补也补不出来
      if (!this.chat.hasMoreHistory() || this.chat.paginating()) return;
      await this.loadEarlier();
    }
  }

  /** 加载更早历史，并保持滚动锚点 */
  /**
   * 加载更早历史，并**保持滚动锚点**（用户要求：位置不能动）。
   *
   * 🔴 踩坑：原实现用 `queueMicrotask` 补偿 —— 那一刻新消息还没渲染完，
   *    量到的 `scrollHeight` 仍是旧值，补偿量算成 0 → 视口被顶到上面去了。
   *
   * 正确做法：等**两帧**再量（首帧是布局，次帧含 markdown 渲染后的增量），
   * 用 `新高度 - 旧高度` 作为补偿量。两次测量都拿实时的 `scrollHeight`。
   */
  async loadEarlier(): Promise<void> {
    const el = this.messagesEl()?.nativeElement;
    if (!el) return;
    const beforeHeight = el.scrollHeight;
    const beforeTop = el.scrollTop;
    this.loadingEarlier = true;
    const grew = await this.chat.paginate();
    if (!grew) {
      this.loadingEarlier = false;
      return;
    }
    // 两帧之后再量：一帧可能还没完成 markdown 渲染
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        const added = el.scrollHeight - beforeHeight;
        if (added > 0) el.scrollTop = beforeTop + added;
        this.loadingEarlier = false;
      });
    });
  }
}