codexmate 0.0.18 → 0.0.20

package/web-ui/partials/index/panel-market.html

@@ -0,0 +1,174 @@
+                <div
+                    v-show="mainTab === 'market'"
+                    class="mode-content"
+                    id="panel-market"
+                    role="tabpanel"
+                    aria-labelledby="tab-market">
+                    <div class="selector-section market-overview-section">
+                        <div class="selector-header market-overview-header">
+                            <div>
+                                <span class="selector-title">Skills 概览</span>
+                                <div class="skills-panel-note">聚焦本地 skills：切换目标、查看已装项、跨应用导入与 ZIP 分发。</div>
+                            </div>
+                            <div class="settings-tab-actions market-header-actions">
+                                <button type="button" class="btn-tool btn-tool-compact" @click="loadSkillsMarketOverview({ forceRefresh: true, silent: false })" :disabled="loading || !!initError || skillsMarketBusy">
+                                    {{ skillsMarketLoading ? '刷新中...' : '刷新概览' }}
+                                </button>
+                                <button type="button" class="btn-tool btn-tool-compact" @click="openSkillsManager" :disabled="loading || !!initError || skillsMarketBusy">
+                                    打开 Skills 管理
+                                </button>
+                            </div>
+                        </div>
+
+                        <div class="market-target-switch" role="group" aria-label="选择 Skills 安装目标">
+                            <button
+                                type="button"
+                                :class="['market-target-chip', { active: skillsTargetApp === 'codex' }]"
+                                :aria-pressed="skillsTargetApp === 'codex'"
+                                :disabled="loading || !!initError || skillsMarketBusy"
+                                @click="setSkillsTargetApp('codex', { silent: false })">
+                                Codex
+                            </button>
+                            <button
+                                type="button"
+                                :class="['market-target-chip', { active: skillsTargetApp === 'claude' }]"
+                                :aria-pressed="skillsTargetApp === 'claude'"
+                                :disabled="loading || !!initError || skillsMarketBusy"
+                                @click="setSkillsTargetApp('claude', { silent: false })">
+                                Claude Code
+                            </button>
+                        </div>
+
+                        <div class="skills-root-box market-root-box">{{ skillsRootPath || skillsDefaultRootPath }}</div>
+
+                        <div class="skills-summary-strip market-summary-strip">
+                            <div class="skills-summary-item">
+                                <span class="skills-summary-label">安装目标</span>
+                                <strong class="skills-summary-value">{{ skillsTargetLabel }}</strong>
+                            </div>
+                            <div class="skills-summary-item">
+                                <span class="skills-summary-label">本地总数</span>
+                                <strong class="skills-summary-value">{{ skillsList.length }}</strong>
+                            </div>
+                            <div class="skills-summary-item">
+                                <span class="skills-summary-label">含 SKILL.md</span>
+                                <strong class="skills-summary-value">{{ skillsConfiguredCount }}</strong>
+                            </div>
+                            <div class="skills-summary-item">
+                                <span class="skills-summary-label">缺少 SKILL.md</span>
+                                <strong class="skills-summary-value">{{ skillsMissingSkillFileCount }}</strong>
+                            </div>
+                            <div class="skills-summary-item">
+                                <span class="skills-summary-label">可导入</span>
+                                <strong class="skills-summary-value">{{ skillsImportList.length }}</strong>
+                            </div>
+                            <div class="skills-summary-item">
+                                <span class="skills-summary-label">可直接导入</span>
+                                <strong class="skills-summary-value">{{ skillsImportConfiguredCount }}</strong>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="market-grid">
+                        <div class="skills-panel market-panel">
+                            <div class="skills-panel-header">
+                                <div class="skills-panel-title-wrap">
+                                    <div class="skills-panel-title">已安装 Skills</div>
+                                    <div class="skills-panel-note">展示当前目录前 6 项；更多操作请进管理弹窗。</div>
+                                </div>
+                                <button type="button" class="btn-mini" @click="refreshSkillsList({ silent: false })" :disabled="loading || !!initError || skillsMarketBusy">
+                                    {{ skillsLoading ? '刷新中...' : '刷新本地' }}
+                                </button>
+                            </div>
+                            <div v-if="skillsLoading && !skillsMarketLocalLoadedOnce" class="skills-empty-state">正在加载本地 Skills...</div>
+                            <div v-else-if="skillsList.length === 0" class="skills-empty-state">当前暂无已安装 skill，可通过 ZIP 或跨应用导入补充。</div>
+                            <div v-else class="market-preview-list">
+                                <div v-for="skill in skillsMarketInstalledPreview" :key="'market-local-' + skill.name" class="market-preview-item">
+                                    <div class="market-preview-main">
+                                        <div class="market-preview-title">{{ skill.displayName || skill.name }}</div>
+                                        <div class="market-preview-meta">{{ skill.description || skill.path }}</div>
+                                    </div>
+                                    <span :class="['pill', skill.hasSkillFile ? 'configured' : 'empty']">
+                                        {{ skill.hasSkillFile ? '已验证' : '待补 SKILL.md' }}
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="skills-panel market-panel">
+                            <div class="skills-panel-header">
+                                <div class="skills-panel-title-wrap">
+                                    <div class="skills-panel-title">可导入来源</div>
+                                    <div class="skills-panel-note">扫描其他应用中的未托管 skill，确认后批量导入到当前 {{ skillsTargetLabel }}。</div>
+                                </div>
+                                <button type="button" class="btn-mini" @click="scanImportableSkills({ silent: false })" :disabled="loading || !!initError || skillsMarketBusy">
+                                    {{ skillsScanningImports ? '扫描中...' : '扫描来源' }}
+                                </button>
+                            </div>
+                            <div v-if="skillsScanningImports && !skillsMarketImportLoadedOnce" class="skills-empty-state">正在扫描可导入 skill...</div>
+                            <div v-else-if="skillsImportList.length === 0" class="skills-empty-state">暂未扫描到可导入 skill，可点击“扫描来源”重试。</div>
+                            <div v-else class="market-preview-list">
+                                <div v-for="skill in skillsMarketImportPreview" :key="'market-import-' + buildSkillImportKey(skill)" class="market-preview-item">
+                                    <div class="market-preview-main">
+                                        <div class="market-preview-title">{{ skill.displayName || skill.name }}</div>
+                                        <div class="market-preview-meta">{{ skill.sourceLabel }} · {{ skill.sourcePath }}</div>
+                                    </div>
+                                    <span :class="['pill', skill.hasSkillFile ? 'configured' : 'empty']">
+                                        {{ skill.hasSkillFile ? '可直接导入' : '缺少 SKILL.md' }}
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="skills-panel market-panel market-actions-panel">
+                            <div class="skills-panel-header">
+                                <div class="skills-panel-title-wrap">
+                                    <div class="skills-panel-title">分发入口</div>
+                                    <div class="skills-panel-note">本地管理、跨应用导入与 ZIP 导入，均作用于当前安装目标。</div>
+                                </div>
+                            </div>
+                            <div class="market-action-grid">
+                                <button type="button" class="market-action-card" @click="openSkillsManager" :disabled="loading || !!initError || skillsMarketBusy">
+                                    <span class="market-action-title">本地 Skills 管理</span>
+                                    <span class="market-action-copy">查看并管理当前 {{ skillsTargetLabel }} 的已装 skills</span>
+                                </button>
+                                <button type="button" class="market-action-card" @click="scanImportableSkills({ silent: false })" :disabled="loading || !!initError || skillsMarketBusy">
+                                    <span class="market-action-title">跨应用导入</span>
+                                    <span class="market-action-copy">扫描其他应用并导入到当前 {{ skillsTargetLabel }}</span>
+                                </button>
+                                <button type="button" class="market-action-card" @click="triggerSkillsZipImport" :disabled="loading || !!initError || skillsMarketBusy">
+                                    <span class="market-action-title">ZIP 导入</span>
+                                    <span class="market-action-copy">从 ZIP 安装到当前目标</span>
+                                </button>
+                            </div>
+                        </div>
+
+                        <div class="skills-panel market-panel market-panel-wide">
+                            <div class="skills-panel-header">
+                                <div class="skills-panel-title-wrap">
+                                    <div class="skills-panel-title">市场说明</div>
+                                </div>
+                            </div>
+                            <div class="market-preview-list">
+                                <div class="market-preview-item">
+                                    <div class="market-preview-main">
+                                        <div class="market-preview-title">目标切换</div>
+                                        <div class="market-preview-meta">切换 Codex / Claude Code 后，后续操作都会落到当前 {{ skillsTargetLabel }} 目录。</div>
+                                    </div>
+                                </div>
+                                <div class="market-preview-item">
+                                    <div class="market-preview-main">
+                                        <div class="market-preview-title">跨应用导入</div>
+                                        <div class="market-preview-meta">扫描 `Codex`、`Claude Code` 与 `Agents` 中未托管的 skills，并导入到当前宿主。</div>
+                                    </div>
+                                </div>
+                                <div class="market-preview-item">
+                                    <div class="market-preview-main">
+                                        <div class="market-preview-title">ZIP 分发</div>
+                                        <div class="market-preview-meta">通过压缩包分发技能目录，保持本地可控，不依赖外部目录服务。</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>

package/web-ui/partials/index/panel-sessions.html

@@ -0,0 +1,387 @@
+                <!-- 会话浏览模式 -->
+                <div
+                    v-show="mainTab === 'sessions'"
+                    class="mode-content"
+                    id="panel-sessions"
+                    role="tabpanel"
+                    :aria-labelledby="'tab-sessions'">
+                <div v-if="sessionStandalone" class="session-standalone-page">
+                    <div v-if="sessionStandaloneLoading" class="state-message">
+                        加载中...
+                    </div>
+                    <div v-else-if="sessionStandaloneError" class="state-message error">
+                        {{ sessionStandaloneError }}
+                    </div>
+                    <div v-else>
+                        <div class="session-standalone-title">
+                            {{ sessionStandaloneTitle }}
+                            <span v-if="sessionStandaloneSourceLabel"> · {{ sessionStandaloneSourceLabel }}</span>
+                        </div>
+                        <pre class="session-standalone-text">{{ sessionStandaloneText }}</pre>
+                    </div>
+                </div>
+
+                <div v-else>
+                <div class="sessions-subtabs" role="tablist" aria-label="会话视图切换">
+                    <button
+                        class="sessions-subtab"
+                        :class="{ active: sessionsViewMode === 'browser' }"
+                        type="button"
+                        role="tab"
+                        :aria-selected="sessionsViewMode === 'browser'"
+                        @click="sessionsViewMode = 'browser'">
+                        Sessions
+                    </button>
+                    <button
+                        class="sessions-subtab"
+                        :class="{ active: sessionsViewMode === 'usage' }"
+                        type="button"
+                        role="tab"
+                        :aria-selected="sessionsViewMode === 'usage'"
+                        @click="sessionsViewMode = 'usage'">
+                        Usage
+                    </button>
+                </div>
+
+                <div v-if="sessionsViewMode === 'usage'">
+                    <div class="usage-toolbar">
+                        <div class="selector-header" style="padding:0;border:0;background:none;">
+                            <span class="selector-title">本地使用概览</span>
+                        </div>
+                        <div class="usage-range-group" role="group" aria-label="Usage 时间范围">
+                            <button type="button" class="usage-range-btn" :class="{ active: sessionsUsageTimeRange === '7d' }" @click="sessionsUsageTimeRange = '7d'">近 7 天</button>
+                            <button type="button" class="usage-range-btn" :class="{ active: sessionsUsageTimeRange === '30d' }" @click="sessionsUsageTimeRange = '30d'">近 30 天</button>
+                        </div>
+                    </div>
+
+                    <div v-if="!sessionsList.length" class="usage-empty">暂无可用于统计的会话数据</div>
+                    <template v-else>
+                        <div class="usage-summary-grid">
+                            <div v-for="card in sessionUsageSummaryCards" :key="card.key" class="usage-summary-card">
+                                <div class="usage-summary-label">{{ card.label }}</div>
+                                <div class="usage-summary-value">{{ card.value }}</div>
+                            </div>
+                        </div>
+
+                        <div class="usage-chart-grid">
+                            <section class="usage-card">
+                                <div class="usage-card-title">会话趋势</div>
+                                <div class="usage-legend">
+                                    <span><span class="usage-legend-dot" style="background:#4f8cff"></span>Codex</span>
+                                    <span><span class="usage-legend-dot" style="background:#b277ff"></span>Claude</span>
+                                </div>
+                                <div class="usage-bars">
+                                    <div v-for="bucket in sessionUsageCharts.buckets" :key="bucket.key" class="usage-bar-group">
+                                        <div class="usage-bar-stack">
+                                            <div class="usage-bar codex" :style="{ height: ((bucket.codex / Math.max(sessionUsageCharts.maxSessionBucket, 1)) * 100) + '%' }" :title="`Codex ${bucket.codex}`"></div>
+                                            <div class="usage-bar claude" :style="{ height: ((bucket.claude / Math.max(sessionUsageCharts.maxSessionBucket, 1)) * 100) + '%' }" :title="`Claude ${bucket.claude}`"></div>
+                                        </div>
+                                        <div class="usage-bar-label">{{ bucket.label }}</div>
+                                    </div>
+                                </div>
+                            </section>
+
+                            <section class="usage-card">
+                                <div class="usage-card-title">来源占比</div>
+                                <div class="usage-list">
+                                    <div v-for="item in sessionUsageCharts.sourceShare" :key="item.key" class="usage-list-row">
+                                        <div class="usage-list-label">{{ item.label }}</div>
+                                        <div class="usage-progress"><div class="usage-progress-fill" :style="{ width: item.percent + '%' }"></div></div>
+                                        <div class="usage-list-value">{{ item.percent }}%</div>
+                                    </div>
+                                </div>
+                            </section>
+
+                            <section class="usage-card">
+                                <div class="usage-card-title">消息趋势</div>
+                                <div class="usage-bars">
+                                    <div v-for="bucket in sessionUsageCharts.buckets" :key="bucket.key + '-messages'" class="usage-bar-group">
+                                        <div class="usage-bar-stack">
+                                            <div class="usage-bar codex" style="width:100%" :style="{ height: ((bucket.totalMessages / Math.max(sessionUsageCharts.maxMessageBucket, 1)) * 100) + '%' }" :title="`${bucket.totalMessages} messages`"></div>
+                                        </div>
+                                        <div class="usage-bar-label">{{ bucket.label }}</div>
+                                    </div>
+                                </div>
+                            </section>
+
+                            <section class="usage-card">
+                                <div class="usage-card-title">高频路径</div>
+                                <div v-if="!sessionUsageCharts.topPaths.length" class="usage-list-value">暂无路径数据</div>
+                                <div v-else class="usage-list">
+                                    <div v-for="item in sessionUsageCharts.topPaths" :key="item.path" class="usage-list-row">
+                                        <div class="usage-list-label">{{ item.count }} 次</div>
+                                        <div class="usage-progress"><div class="usage-progress-fill" :style="{ width: ((item.count / Math.max(sessionUsageCharts.topPaths[0]?.count || 1, 1)) * 100) + '%' }"></div></div>
+                                        <div class="usage-list-value" :title="item.path">{{ item.path }}</div>
+                                    </div>
+                                </div>
+                            </section>
+                        </div>
+                    </template>
+                </div>
+
+                <template v-else>
+                <div class="selector-section">
+                    <div class="selector-header">
+                        <span class="selector-title">会话来源</span>
+                        <div class="selector-actions">
+                            <button class="btn-tool btn-tool-compact" @click="loadSessions" :disabled="sessionsLoading">
+                                {{ sessionsLoading ? '刷新中...' : '刷新会话' }}
+                            </button>
+                        </div>
+                    </div>
+                    <div class="session-toolbar">
+                        <div class="session-toolbar-group">
+                            <select class="session-source-select" v-model="sessionFilterSource" @change="onSessionSourceChange" :disabled="sessionsLoading">
+                                <option value="all">全部</option>
+                                <option value="codex">Codex</option>
+                                <option value="claude">Claude Code</option>
+                            </select>
+                            <select
+                                class="session-path-select"
+                                v-model="sessionPathFilter"
+                                @change="onSessionPathFilterChange"
+                                :disabled="sessionsLoading">
+                                <option value="">全部路径</option>
+                                <option v-for="cwd in sessionPathOptions" :key="cwd" :value="cwd">{{ cwd }}</option>
+                            </select>
+                        </div>
+                        <div class="session-toolbar-group session-toolbar-grow">
+                            <input
+                                class="session-query-input"
+                                v-model="sessionQuery"
+                                @keyup.enter="loadSessions"
+                                :disabled="sessionsLoading || !isSessionQueryEnabled"
+                                :placeholder="sessionQueryPlaceholder">
+                        </div>
+                        <div class="session-toolbar-group">
+                            <select
+                                class="session-role-select"
+                                v-model="sessionRoleFilter"
+                                @change="onSessionFilterChange"
+                                disabled>
+                                <option value="all">全部角色</option>
+                                <option value="user">仅 User</option>
+                                <option value="assistant">仅 Assistant</option>
+                                <option value="system">仅 System</option>
+                            </select>
+                            <select
+                                class="session-time-select"
+                                v-model="sessionTimePreset"
+                                @change="onSessionFilterChange"
+                                disabled>
+                                <option value="all">全部时间</option>
+                                <option value="7d">近 7 天</option>
+                                <option value="30d">近 30 天</option>
+                                <option value="90d">近 90 天</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="session-toolbar-footer">
+                        <label class="quick-option">
+                            <input
+                                type="checkbox"
+                                v-model="sessionResumeWithYolo"
+                                @change="onSessionResumeYoloChange"
+                            >
+                            复制恢复命令附带 --yolo
+                        </label>
+                    </div>
+                </div>
+
+                <div v-if="sessionsLoading" class="state-message">
+                    会话加载中...
+                </div>
+
+                <div v-else-if="sessionsList.length === 0" class="session-empty">
+                    暂无可用会话记录
+                </div>
+
+                <div v-else class="session-layout">
+                    <div v-if="sessionListRenderEnabled" class="session-list">
+                        <div
+                            v-for="session in sortedSessionsList"
+                            :key="session.source + '-' + session.sessionId + '-' + session.filePath"
+                            v-memo="[activeSessionExportKey === getSessionExportKey(session), session.messageCount, session.updatedAt, session.title, session.sourceLabel, isSessionPinned(session), sessionsLoading]"
+                            :class="[
+                                'session-item',
+                                {
+                                    active: activeSessionExportKey === getSessionExportKey(session),
+                                    pinned: isSessionPinned(session)
+                                }
+                            ]"
+                            @click="selectSession(session)"
+                            @keydown.enter.self.prevent="selectSession(session)"
+                            @keydown.space.self.prevent="selectSession(session)"
+                            tabindex="0"
+                            role="button"
+                            :aria-current="activeSessionExportKey === getSessionExportKey(session) ? 'true' : null">
+                            <div class="session-item-header">
+                                <div class="session-item-main">
+                                    <div class="session-item-title">{{ session.title || session.sessionId }}</div>
+                                    <span class="session-count-badge">{{ session.messageCount ?? 0 }}</span>
+                                </div>
+                                <div class="session-item-actions">
+                                    <button
+                                        class="session-item-copy session-item-pin"
+                                        @click.stop="toggleSessionPin(session)"
+                                        :disabled="sessionsLoading"
+                                        :aria-label="isSessionPinned(session) ? '取消置顶' : '置顶'"
+                                        :title="isSessionPinned(session) ? '取消置顶' : '置顶'"
+                                        :aria-pressed="isSessionPinned(session)">
+                                        <svg v-if="isSessionPinned(session)" class="pin-icon" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.6">
+                                            <path d="M12 22s8-6 8-12a8 8 0 1 0-16 0c0 6 8 12 8 12z"></path>
+                                        </svg>
+                                        <svg v-else class="pin-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
+                                            <path d="M12 22s8-6 8-12a8 8 0 1 0-16 0c0 6 8 12 8 12z"></path>
+                                        </svg>
+                                    </button>
+                                    <button
+                                        v-if="isResumeCommandAvailable(session)"
+                                        class="session-item-copy"
+                                        @click.stop="copyResumeCommand(session)"
+                                        :disabled="sessionsLoading"
+                                        aria-label="复制恢复命令"
+                                        title="复制恢复命令">
+                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                            <rect x="8" y="8" width="12" height="12" rx="2"></rect>
+                                            <path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"></path>
+                                        </svg>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="session-item-meta">
+                                <span class="session-source">{{ session.sourceLabel }}</span>
+                                <span class="session-item-time">{{ session.updatedAt || 'unknown time' }}</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div v-else class="session-list session-list-placeholder"></div>
+
+                    <div :class="['session-preview', { active: !!activeSession }]" :ref="setSessionPreviewContainerRef">
+                        <template v-if="activeSession">
+                            <div class="session-preview-scroll" :ref="setSessionPreviewScrollRef" @scroll="onSessionPreviewScroll">
+                                <div class="session-preview-header" :ref="setSessionPreviewHeaderRef">
+                                    <div>
+                                        <div class="session-preview-title">{{ activeSession.title || activeSession.sessionId }}</div>
+                                        <div class="session-preview-meta">
+                                            <span class="session-preview-meta-item">{{ activeSession.sourceLabel }}</span>
+                                            <span class="session-preview-meta-item">{{ activeSession.updatedAt || 'unknown time' }}</span>
+                                        </div>
+                                        <div class="session-preview-meta" v-if="activeSession.cwd">
+                                            <span class="session-preview-meta-item">{{ activeSession.cwd }}</span>
+                                        </div>
+                                    </div>
+                                    <div class="session-actions">
+                                        <button class="btn-session-refresh" @click="loadActiveSessionDetail" :disabled="sessionDetailLoading || !activeSession">
+                                            {{ sessionDetailLoading ? '加载中...' : '刷新内容' }}
+                                        </button>
+                                        <button
+                                            v-if="isDeleteAvailable(activeSession)"
+                                            class="btn-session-delete"
+                                            @click="deleteSession(activeSession)"
+                                            :disabled="!activeSession || sessionsLoading || sessionDeleting[getSessionExportKey(activeSession)]">
+                                            {{ (activeSession && sessionDeleting[getSessionExportKey(activeSession)]) ? '移入中...' : '移入回收站' }}
+                                        </button>
+                                        <button
+                                            class="btn-session-export"
+                                            @click="exportSession(activeSession)"
+                                            :disabled="!activeSession || sessionExporting[getSessionExportKey(activeSession)]">
+                                            {{ (activeSession && sessionExporting[getSessionExportKey(activeSession)]) ? '导出中...' : '导出记录' }}
+                                        </button>
+                                        <button
+                                            class="btn-session-open"
+                                            @click="openSessionStandalone(activeSession)"
+                                            :disabled="!activeSession">
+                                            新页查看
+                                        </button>
+                                    </div>
+                                </div>
+
+                                <div v-if="sessionDetailLoading && !sessionPreviewLoadingMore" class="session-preview-empty">
+                                    正在加载会话内容...
+                                </div>
+
+                                <div v-else-if="activeSessionDetailError" class="session-preview-empty">
+                                    {{ activeSessionDetailError }}
+                                </div>
+
+                                <div v-else-if="!activeSessionMessages.length" class="session-preview-empty">
+                                    当前会话暂无可展示消息
+                                </div>
+
+                                <div v-else-if="sessionPreviewRenderEnabled && !activeSessionVisibleMessages.length" class="session-preview-empty">
+                                    <span>正在渲染会话内容...</span>
+                                    <button class="btn-session-refresh" @click="primeSessionPreviewMessageRender" :disabled="sessionDetailLoading">
+                                        重新渲染
+                                    </button>
+                                </div>
+
+                                <div v-else-if="!sessionPreviewRenderEnabled" class="session-preview-empty">
+                                    正在准备会话内容...
+                                </div>
+
+                                <div v-else class="session-preview-body">
+                                    <div class="session-preview-messages">
+                                        <div v-if="activeSessionDetailClipped" class="session-item-sub session-item-wrap">
+                                            仅展示最近 {{ activeSessionMessages.length }} 条消息。
+                                        </div>
+                                        <div
+                                            v-if="canLoadMoreSessionMessages"
+                                            class="session-item-sub session-item-wrap"
+                                            style="display:flex;align-items:center;justify-content:space-between;gap:8px;">
+                                            <span>已显示 {{ activeSessionVisibleMessages.length }} / {{ activeSessionMessages.length }} 条</span>
+                                            <button class="btn-session-refresh" @click="loadMoreSessionMessages()" :disabled="sessionDetailLoading || sessionPreviewLoadingMore">
+                                                {{ sessionPreviewLoadingMore ? '加载中...' : ('加载更多（剩余 ' + sessionPreviewRemainingCount + '）') }}
+                                            </button>
+                                        </div>
+                                        <div
+                                            v-if="sessionPreviewLoadingMore"
+                                            class="session-item-sub session-item-wrap">
+                                            正在加载更早消息...
+                                        </div>
+                                        <div
+                                            v-for="(msg, idx) in activeSessionVisibleMessages"
+                                            :key="getRecordRenderKey(msg, idx)"
+                                            v-memo="[msg.text, msg.timestamp, msg.roleLabel, msg.normalizedRole]"
+                                            :data-message-key="getRecordRenderKey(msg, idx)"
+                                            :ref="getSessionMessageRefBinder(getRecordRenderKey(msg, idx))"
+                                            :class="['session-msg', msg.normalizedRole === 'user' ? 'user' : (msg.normalizedRole === 'system' ? 'system' : 'assistant')]">
+                                            <div class="session-msg-header">
+                                                <div class="session-msg-meta">
+                                                    <span class="session-msg-role">{{ msg.roleLabel || (msg.normalizedRole === 'user' ? 'User' : (msg.normalizedRole === 'system' ? 'System' : 'Assistant')) }}</span>
+                                                    <span class="session-msg-time">{{ msg.timestamp || '' }}</span>
+                                                </div>
+                                            </div>
+                                            <div class="session-msg-content">{{ msg.text || '' }}</div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <aside v-if="sessionPreviewRenderEnabled && sessionTimelineNodes.length" class="session-timeline" aria-label="会话时间轴">
+                                <div class="session-timeline-track"></div>
+                                <button
+                                    v-for="node in sessionTimelineNodes"
+                                    :key="'timeline-' + node.key"
+                                    v-memo="[sessionTimelineActiveKey === node.key, node.safePercent, node.title]"
+                                    type="button"
+                                    :class="['session-timeline-node', { active: sessionTimelineActiveKey === node.key }]"
+                                    :aria-current="sessionTimelineActiveKey === node.key ? 'true' : null"
+                                    :style="{ top: `${node.safePercent}%` }"
+                                    :title="node.title"
+                                    @click="jumpToSessionTimelineNode(node.key)">
+                                    <span class="sr-only">{{ node.title }}</span>
+                                </button>
+                                <div class="session-timeline-current" v-if="sessionTimelineActiveTitle">
+                                    {{ sessionTimelineActiveTitle }}
+                                </div>
+                            </aside>
+                        </template>
+
+                    <div v-else class="session-preview-empty">
+                        <span>请先在左侧选择一个会话</span>
+                    </div>
+                </div>
+                </div>
+                </template>
+                </div>
+            </div>