codexmate 0.0.28 → 0.0.29

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

@@ -1,316 +1,316 @@
-                <!-- 会话浏览模式 -->
-                <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">
-                        <span class="selector-title">{{ t('sessions.sourceTitle') }}</span>
-                        <div class="selector-actions sessions-header-actions">
-                            <button class="btn-tool btn-tool-compact" @click="loadSessions({ forceRefresh: true })" :disabled="sessionsLoading">
-                                {{ sessionsLoading ? t('sessions.refreshing') : t('sessions.refresh') }}
-                            </button>
-                            <button class="btn-tool btn-tool-compact" type="button" @click="switchMainTab('dashboard')">
-                                {{ t('dashboard.doctor.title') }}
-                            </button>
-                        </div>
-                    </div>
-                    <div class="session-toolbar">
-                        <div class="session-toolbar-group session-toolbar-primary">
-                            <select class="session-source-select" v-model="sessionFilterSource" @change="onSessionSourceChange($event)" :disabled="sessionsLoading">
-                                <option value="all">{{ t('common.all') }}</option>
-                                <option value="codex">{{ t('sessions.source.codex') }}</option>
-                                <option value="claude">{{ t('sessions.source.claudeCode') }}</option>
-                                <option value="gemini">{{ t('sessions.source.gemini') }}</option>
-                                <option value="codebuddy">{{ t('sessions.source.codebuddy') }}</option>
-                            </select>
-                            <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" 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]"
-                            :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>
-                                </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="t('sessions.copyResume')"
-                                        :title="t('sessions.copyResume')">
-                                        <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 || 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>
-                        </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 || 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-export"
-                                            @click="convertSession(activeSession)"
-                                            :disabled="true">
-                                            {{ (activeSession && sessionConverting[getSessionExportKey(activeSession)]) ? t('sessions.preview.converting') : t('sessions.preview.convert') }}
-                                        </button>
-                                        <button
-                                            class="btn-session-open"
-                                            @click="openSessionStandalone(activeSession)"
-                                            :disabled="!activeSession">
-                                            {{ t('sessions.preview.openStandalone') }}
-                                        </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-if="canLoadMoreSessionMessages"
-                                            class="session-item-sub session-item-wrap"
-                                            style="display:flex;align-items:center;justify-content:space-between;gap:8px;">
-                                            <span>{{ t('sessions.preview.shownCount', { shown: activeSessionVisibleMessages.length, total: activeSessionMessages.length }) }}</span>
-                                            <span>{{ t('sessions.preview.loadMore', { remain: sessionPreviewRemainingCount }) }}</span>
-                                        </div>
-                                        <div v-if="sessionPreviewLoadingMore" class="session-item-sub session-item-wrap">{{ t('sessions.preview.loadingMore') }}</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' ? 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">{{ 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>
+                <!-- 会话浏览模式 -->
+                <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">
+                        <span class="selector-title">{{ t('sessions.sourceTitle') }}</span>
+                        <div class="selector-actions sessions-header-actions">
+                            <button class="btn-tool btn-tool-compact" @click="loadSessions({ forceRefresh: true })" :disabled="sessionsLoading">
+                                {{ sessionsLoading ? t('sessions.refreshing') : t('sessions.refresh') }}
+                            </button>
+                            <button class="btn-tool btn-tool-compact" type="button" @click="switchMainTab('dashboard')">
+                                {{ t('dashboard.doctor.title') }}
+                            </button>
+                        </div>
+                    </div>
+                    <div class="session-toolbar">
+                        <div class="session-toolbar-group session-toolbar-primary">
+                            <select class="session-source-select" v-model="sessionFilterSource" @change="onSessionSourceChange($event)" :disabled="sessionsLoading">
+                                <option value="all">{{ t('common.all') }}</option>
+                                <option value="codex">{{ t('sessions.source.codex') }}</option>
+                                <option value="claude">{{ t('sessions.source.claudeCode') }}</option>
+                                <option value="gemini">{{ t('sessions.source.gemini') }}</option>
+                                <option value="codebuddy">{{ t('sessions.source.codebuddy') }}</option>
+                            </select>
+                            <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" 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]"
+                            :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>
+                                </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="t('sessions.copyResume')"
+                                        :title="t('sessions.copyResume')">
+                                        <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 || 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>
+                        </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 || 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-export"
+                                            @click="convertSession(activeSession)"
+                                            :disabled="true">
+                                            {{ (activeSession && sessionConverting[getSessionExportKey(activeSession)]) ? t('sessions.preview.converting') : t('sessions.preview.convert') }}
+                                        </button>
+                                        <button
+                                            class="btn-session-open"
+                                            @click="openSessionStandalone(activeSession)"
+                                            :disabled="!activeSession">
+                                            {{ t('sessions.preview.openStandalone') }}
+                                        </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-if="canLoadMoreSessionMessages"
+                                            class="session-item-sub session-item-wrap"
+                                            style="display:flex;align-items:center;justify-content:space-between;gap:8px;">
+                                            <span>{{ t('sessions.preview.shownCount', { shown: activeSessionVisibleMessages.length, total: activeSessionMessages.length }) }}</span>
+                                            <span>{{ t('sessions.preview.loadMore', { remain: sessionPreviewRemainingCount }) }}</span>
+                                        </div>
+                                        <div v-if="sessionPreviewLoadingMore" class="session-item-sub session-item-wrap">{{ t('sessions.preview.loadingMore') }}</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' ? 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">{{ 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>