                <!-- 会话浏览模式 -->
                <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">
                        {{ t('sessions.loading') }}
                    </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="selector-section">
                    <div class="selector-header" style="display:none">
                        <span class="selector-title">{{ t('sessions.sourceTitle') }}</span>
                        <div class="selector-actions sessions-header-actions"></div>
                    </div>
                    <div class="session-toolbar">
                        <div class="session-toolbar-group session-toolbar-primary">
                            <div class="session-source-pills" role="radiogroup" aria-label="Session source">
                                <button
                                    v-for="src in sessionSourceOptions"
                                    :key="src.value"
                                    :class="['session-source-pill', { active: sessionFilterSource === src.value }]"
                                    :data-source="src.value"
                                    @click="setSessionSource(src.value)"
                                    :disabled="sessionsLoading"
                                    :aria-pressed="sessionFilterSource === src.value"
                                    role="radio"
                                    type="button">
                                    <span class="session-source-pill-dot"></span>
                                    <span class="session-source-pill-label">{{ src.label }}</span>
                                </button>
                            </div>
                            <select
                                class="session-path-select"
                                v-model="sessionPathFilter"
                                @change="onSessionPathFilterChange"
                                @focus="loadSessionPathOptions({ source: sessionFilterSource })"
                                :disabled="sessionsLoading">
                                <option value="">{{ t('sessions.allPaths') }}</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="onSessionFilterChange"
                                :disabled="sessionsLoading || !isSessionQueryEnabled"
                                :placeholder="sessionQueryPlaceholder">
                        </div>
                        <div class="session-toolbar-group session-toolbar-secondary">
                            <select
                                class="session-role-select"
                                v-model="sessionRoleFilter"
                                @change="onSessionFilterChange"
                                :disabled="sessionsLoading">
                                <option value="all">{{ t('sessions.role.all') }}</option>
                                <option value="user">{{ t('sessions.role.user') }}</option>
                                <option value="assistant">{{ t('sessions.role.assistant') }}</option>
                                <option value="system">{{ t('sessions.role.system') }}</option>
                            </select>
                            <select
                                class="session-time-select"
                                v-model="sessionTimePreset"
                                @change="onSessionFilterChange"
                                :disabled="sessionsLoading">
                                <option value="all">{{ t('sessions.time.all') }}</option>
                                <option value="7d">{{ t('sessions.time.7d') }}</option>
                                <option value="30d">{{ t('sessions.time.30d') }}</option>
                                <option value="90d">{{ t('sessions.time.90d') }}</option>
                            </select>
                            <select
                                class="session-time-select"
                                v-model="sessionSortMode"
                                @change="onSessionSortChange"
                                :disabled="sessionsLoading">
                                <option value="time">{{ t('sessions.sort.time') }}</option>
                                <option value="hot">{{ t('sessions.sort.hot') }}</option>
                            </select>
                            <button class="btn-tool btn-tool-compact" @click="loadSessions({ forceRefresh: true })" :disabled="sessionsLoading" :title="t('sessions.refresh')">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="btn-icon-sm"><path d="M21 2v6h-6M3 12a9 9 0 0 1 15-6.7L21 8M3 22v-6h6M21 12a9 9 0 0 1-15 6.7L3 16"/></svg>
                            </button>
                            <button class="btn-tool btn-tool-compact" type="button" @click="switchMainTab('dashboard')" :title="t('dashboard.doctor.title')">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="btn-icon-sm"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
                            </button>
                            <button class="btn-tool btn-tool-compact" type="button" @click="copySessionsFilterShareUrl" :disabled="sessionsLoading">
                                {{ t('sessions.filters.copyLink') }}
                            </button>
                            <button class="btn-tool btn-tool-compact" type="button" @click="clearSessionFilters" :disabled="sessionsLoading">
                                {{ t('common.resetFilters') }}
                            </button>
                        </div>
                    </div>
                    <div v-if="hasActiveSessionFilters()" class="session-filter-chips" :aria-label="t('sessions.filters.copyLink')">
                        <button
                            v-for="chip in getSessionFilterChips()"
                            :key="'chip-' + chip.key"
                            type="button"
                            class="session-filter-chip"
                            @click="clearSessionFilterChip(chip.key)"
                            :title="`${chip.title}: ${chip.value}`">
                            <span class="session-filter-chip-title">{{ chip.title }}</span>
                            <span class="session-filter-chip-value">{{ chip.value }}</span>
                            <span class="session-filter-chip-close">×</span>
                        </button>
                    </div>
                </div>

                <div v-if="sessionsLoading" class="state-message">
                    {{ t('sessions.loadingList') }}
                </div>

                <div v-else-if="sessionsList.length === 0" class="session-empty">
                    {{ t('sessions.empty') }}
                </div>

                <div v-else class="session-layout">
                    <div
                        v-if="sessionListRenderEnabled"
                        class="session-list"
                        :ref="setSessionListRef"
                        @scroll.passive="onSessionListScroll">
                        <div
                            v-for="session in visibleSessionsList"
                            :key="session.source + '-' + session.sessionId + '-' + session.filePath"
                            v-memo="[activeSessionExportKey === getSessionExportKey(session), session.messageCount, session.updatedAt, session.title, session.sourceLabel, session.cwd, isSessionPinned(session), sessionsLoading, session.match && session.match.count]"
                            :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 == null ? '...' : session.messageCount }}</span>
                                    <span v-if="session.match && session.match.hit" class="session-match-badge">{{ session.match.count }}</span>
                                    <span
                                        v-if="sessionContextUtilization[getSessionExportKey(session)] && sessionContextUtilization[getSessionExportKey(session)].percent > 0"
                                        :class="['session-context-badge', 'session-context-' + sessionContextUtilization[getSessionExportKey(session)].level]"
                                        :title="'Context: ' + sessionContextUtilization[getSessionExportKey(session)].percent + '%'">
                                        {{ sessionContextUtilization[getSessionExportKey(session)].percent }}%
                                    </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) ? t('sessions.unpin') : t('sessions.pin')"
                                        :title="isSessionPinned(session) ? t('sessions.unpin') : t('sessions.pin')"
                                        :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="getResumeCommandTitle(session)"
                                        :title="getResumeCommandTitle(session)">
                                        <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" :data-source="session.source">{{ session.sourceLabel }}</span>
                                <span class="session-item-time">{{ session.updatedAt || t('sessions.unknownTime') }}</span>
                                <span v-if="getSessionHotLabel(session)" class="session-item-hot">{{ getSessionHotLabel(session) }}</span>
                                <span v-if="session.cwd" class="session-item-cwd session-item-sub">{{ session.cwd }}</span>
                                <div v-if="session.match && session.match.snippets && session.match.snippets.length" class="session-match-snippets">
                                    <div v-for="(snip, si) in session.match.snippets.slice(0, 2)" :key="si" class="session-match-snippet">{{ snip }}</div>
                                </div>
                            </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 session-source" :data-source="activeSession.source">{{ activeSession.sourceLabel }}</span>
                                            <span class="session-preview-meta-item">{{ activeSession.updatedAt || t('sessions.unknownTime') }}</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 ? t('sessions.preview.loading') : t('sessions.preview.refresh') }}
                                        </button>
                                        <button
                                            v-if="isDeleteAvailable(activeSession)"
                                            class="btn-session-delete"
                                            @click="deleteSession(activeSession)"
                                            :disabled="!activeSession || sessionsLoading || sessionDeleting[getSessionExportKey(activeSession)]">
                                            {{ (activeSession && sessionDeleting[getSessionExportKey(activeSession)]) ? (sessionTrashEnabled === false ? t('sessions.preview.deleting') : t('sessions.preview.moving')) : (sessionTrashEnabled === false ? t('sessions.preview.deleteHard') : t('sessions.preview.moveToTrash')) }}
                                        </button>
                                        <button
                                            class="btn-session-export"
                                            @click="exportSession(activeSession)"
                                            :disabled="!activeSession || sessionExporting[getSessionExportKey(activeSession)]">
                                            {{ (activeSession && sessionExporting[getSessionExportKey(activeSession)]) ? t('sessions.preview.exporting') : t('sessions.preview.export') }}
                                        </button>
                                        <button
                                            class="btn-session-open"
                                            @click="copySessionLink(activeSession)"
                                            :disabled="!activeSession">
                                            {{ t('sessions.preview.copyLink') }}
                                        </button>
                                    </div>
                                </div>

                                <div v-if="sessionDetailLoading && !sessionPreviewLoadingMore" class="session-preview-empty">
                                    {{ t('sessions.preview.loadingBody') }}
                                </div>

                                <div v-else-if="activeSessionDetailError" class="session-preview-empty">
                                    {{ activeSessionDetailError }}
                                </div>

                                <div v-else-if="!activeSessionMessages.length" class="session-preview-empty">
                                    {{ t('sessions.preview.emptyMsgs') }}
                                </div>

                                <div v-else-if="sessionPreviewRenderEnabled && !activeSessionVisibleMessages.length" class="session-preview-empty">
                                    <span>{{ t('sessions.preview.rendering') }}</span>
                                    <button class="btn-session-refresh" @click="primeSessionPreviewMessageRender" :disabled="sessionDetailLoading">
                                        {{ t('sessions.preview.rerender') }}
                                    </button>
                                </div>

                                <div v-else-if="!sessionPreviewRenderEnabled" class="session-preview-empty">
                                    {{ t('sessions.preview.preparing') }}
                                </div>

                                <div v-else class="session-preview-body">
                                    <div class="session-preview-messages">
                                        <div v-if="activeSessionDetailClipped" class="session-item-sub session-item-wrap">
                                            {{ t('sessions.preview.clipped', { count: activeSessionMessages.length }) }}
                                        </div>
                                        <div
                                            v-for="(msg, idx) in activeSessionMessages"
                                            :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' ? t('sessions.roleLabel.user') : (msg.normalizedRole === 'system' ? t('sessions.roleLabel.system') : t('sessions.roleLabel.assistant'))) }}</span>
                                                    <span class="session-msg-time">{{ msg.timestamp || '' }}</span>
                                                </div>
                                            </div>
                                            <div class="session-msg-content" v-html="highlightQueryText(msg.text) || ''"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <aside v-if="sessionPreviewRenderEnabled && sessionTimelineNodes.length" class="session-timeline" :aria-label="t('sessions.timeline.aria')">
                                <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>{{ t('sessions.selectHint') }}</span>
                    </div>
                </div>
                </div>
                </div>
            </div>
