codexmate 0.0.19 → 0.0.21

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

@@ -0,0 +1,292 @@
+                <!-- 会话浏览模式 -->
+                <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="selector-section">
+                    <div class="selector-header">
+                        <span class="selector-title">会话来源</span>
+                        <div class="selector-actions">
+                            <button class="btn-tool btn-tool-compact" @click="loadSessions({ forceRefresh: true })" :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"
+                                @focus="loadSessionPathOptions({ source: sessionFilterSource })"
+                                :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"
+                        :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, 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)]) ? (sessionTrashEnabled === false ? '删除中...' : '移入中...') : (sessionTrashEnabled === false ? '直接删除' : '移入回收站') }}
+                                        </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>
+                </div>
+            </div>

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

@@ -0,0 +1,190 @@
+                <!-- 设置面板 -->
+                <div
+                    v-show="mainTab === 'settings'"
+                    class="mode-content"
+                    id="panel-settings"
+                    role="tabpanel"
+                    :aria-labelledby="'tab-settings'">
+                    <div class="config-subtabs settings-subtabs" role="tablist" aria-label="设置子标签">
+                        <button
+                            id="settings-tab-backup"
+                            role="tab"
+                            aria-controls="settings-panel-backup"
+                            :aria-selected="settingsTab === 'backup'"
+                            :tabindex="settingsTab === 'backup' ? 0 : -1"
+                            :class="['config-subtab', { active: settingsTab === 'backup' }]"
+                            @click="onSettingsTabClick('backup')">
+                            备份与导入
+                        </button>
+                        <button
+                            id="settings-tab-trash"
+                            role="tab"
+                            aria-controls="settings-panel-trash"
+                            :aria-selected="settingsTab === 'trash'"
+                            :tabindex="settingsTab === 'trash' ? 0 : -1"
+                            :class="['config-subtab', { active: settingsTab === 'trash' }]"
+                            @click="onSettingsTabClick('trash')">
+                            回收站
+                            <span class="settings-tab-badge">{{ sessionTrashCount }}</span>
+                        </button>
+                        <button
+                            id="settings-tab-device"
+                            role="tab"
+                            aria-controls="settings-panel-device"
+                            :aria-selected="settingsTab === 'device'"
+                            :tabindex="settingsTab === 'device' ? 0 : -1"
+                            :class="['config-subtab', { active: settingsTab === 'device' }]"
+                            @click="onSettingsTabClick('device')">
+                            设备
+                        </button>
+                    </div>
+
+                    <div
+                        v-show="settingsTab === 'backup'"
+                        id="settings-panel-backup"
+                        role="tabpanel"
+                        aria-labelledby="settings-tab-backup">
+                        <div class="selector-section">
+                            <div class="selector-header">
+                                <span class="selector-title">分享命令前缀</span>
+                            </div>
+                            <select class="model-select" :value="shareCommandPrefix" @change="setShareCommandPrefix($event.target.value)">
+                                <option value="npm start">npm start</option>
+                                <option value="codexmate">codexmate</option>
+                            </select>
+                            <div class="config-template-hint">
+                                默认走项目内 <code>npm start</code>，也可切到全局 <code>codexmate</code>。该设置会缓存到浏览器本地。
+                            </div>
+                        </div>
+                        <div class="selector-section">
+                            <div class="selector-header">
+                                <span class="selector-title">Claude 配置</span>
+                            </div>
+                            <button class="btn-tool" @click="downloadClaudeDirectory" :disabled="claudeDownloadLoading">
+                                {{ claudeDownloadLoading ? ('备份中 ' + claudeDownloadProgress + '%') : '一键备份 ~/.claude' }}
+                            </button>
+                            <button class="btn-tool" @click="triggerClaudeImport" :disabled="claudeImportLoading">
+                                {{ claudeImportLoading ? '导入中...' : '导入 ~/.claude 备份' }}
+                            </button>
+                            <input
+                                ref="claudeImportInput"
+                                class="sr-only"
+                                type="file"
+                                accept=".zip"
+                                @change="handleClaudeImportChange">
+                        </div>
+                        <div class="selector-section">
+                            <div class="selector-header">
+                                <span class="selector-title">Codex 配置</span>
+                            </div>
+                            <button class="btn-tool" @click="downloadCodexDirectory" :disabled="codexDownloadLoading">
+                                {{ codexDownloadLoading ? ('备份中 ' + codexDownloadProgress + '%') : '一键备份 ~/.codex' }}
+                            </button>
+                            <button class="btn-tool" @click="triggerCodexImport" :disabled="codexImportLoading">
+                                {{ codexImportLoading ? '导入中...' : '导入 ~/.codex 备份' }}
+                            </button>
+                            <input
+                                ref="codexImportInput"
+                                class="sr-only"
+                                type="file"
+                                accept=".zip"
+                                @change="handleCodexImportChange">
+                        </div>
+                    </div>
+
+                    <div
+                        v-show="settingsTab === 'trash'"
+                        id="settings-panel-trash"
+                        role="tabpanel"
+                        aria-labelledby="settings-tab-trash">
+                        <div class="selector-section">
+                            <div class="selector-header">
+                                <span class="selector-title">会话删除行为</span>
+                            </div>
+                            <label class="health-remote-toggle">
+                                <input type="checkbox" :checked="sessionTrashEnabled" @change="setSessionTrashEnabled($event.target.checked)">
+                                <span>删除会话时先移入回收站</span>
+                            </label>
+                            <div class="config-template-hint">
+                                默认开启。关闭后，会话浏览里的删除会直接永久删除，不再进入回收站。
+                            </div>
+                        </div>
+                        <div class="selector-section">
+                            <div class="selector-header settings-tab-header">
+                                <div class="settings-tab-actions trash-header-actions">
+                                    <button class="btn-tool btn-tool-compact" @click="loadSessionTrash({ forceRefresh: true })" :disabled="sessionTrashLoading || sessionTrashClearing">
+                                        {{ sessionTrashLoading ? '刷新中...' : '刷新列表' }}
+                                    </button>
+                                    <button class="btn-tool btn-tool-compact" @click="clearSessionTrash" :disabled="sessionTrashClearing || sessionTrashLoading || !(Number(sessionTrashCount) > 0)">
+                                        {{ sessionTrashClearing ? '清空中...' : '清空回收站' }}
+                                    </button>
+                                </div>
+                            </div>
+
+                            <div v-if="getSessionTrashViewState() === 'loading'" class="session-empty">
+                                正在加载回收站...
+                            </div>
+                            <div v-else-if="getSessionTrashViewState() === 'empty'" class="session-empty">
+                                回收站为空
+                            </div>
+                            <div v-else-if="getSessionTrashViewState() === 'retry'" class="session-empty">
+                                回收站列表加载失败，请刷新重试
+                            </div>
+                            <div v-else class="trash-list">
+                                <div v-for="item in visibleSessionTrashItems" :key="item.trashId" class="trash-item session-item session-card">
+                                    <div class="trash-item-header session-item-header">
+                                        <div class="trash-item-main">
+                                            <div class="trash-item-mainline">
+                                                <div class="trash-item-title">{{ item.title || item.sessionId }}</div>
+                                                <span class="session-count-badge">{{ item.messageCount ?? 0 }}</span>
+                                            </div>
+                                            <div class="trash-item-meta session-item-meta">
+                                                <span class="session-source">{{ item.sourceLabel }}</span>
+                                            </div>
+                                        </div>
+                                        <div class="trash-item-side">
+                                            <div class="trash-item-actions session-item-actions">
+                                                <button class="btn-mini" @click="restoreSessionTrash(item)" :disabled="sessionTrashLoading || sessionTrashClearing || isSessionTrashActionBusy(item)">
+                                                    {{ sessionTrashRestoring[getSessionTrashActionKey(item)] ? '恢复中...' : '恢复' }}
+                                                </button>
+                                                <button class="btn-mini delete" @click="purgeSessionTrash(item)" :disabled="sessionTrashLoading || sessionTrashClearing || isSessionTrashActionBusy(item)">
+                                                    {{ sessionTrashPurging[getSessionTrashActionKey(item)] ? '删除中...' : '彻底删除' }}
+                                                </button>
+                                            </div>
+                                            <div class="trash-item-time session-item-time">{{ item.deletedAt || item.updatedAt || 'unknown time' }}</div>
+                                        </div>
+                                    </div>
+                                    <div v-if="item.cwd" class="trash-item-path session-item-sub session-item-wrap">
+                                        <span class="trash-item-label">工作区</span>
+                                        <span>{{ item.cwd }}</span>
+                                    </div>
+                                    <div class="trash-item-path session-item-sub session-item-wrap">
+                                        <span class="trash-item-label">原文件</span>
+                                        <span>{{ item.originalFilePath }}</span>
+                                    </div>
+                                </div>
+                                <div v-if="sessionTrashHasMoreItems" class="trash-list-footer">
+                                    <button class="btn-tool btn-tool-compact" @click="loadMoreSessionTrashItems" :disabled="sessionTrashLoading || sessionTrashClearing">
+                                        加载更多（剩余 {{ sessionTrashHiddenCount }} 项）
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div
+                        v-show="settingsTab === 'device'"
+                        id="settings-panel-device"
+                        role="tabpanel"
+                        aria-labelledby="settings-tab-device">
+                        <div class="selector-section">
+                            <div class="selector-header">
+                                <span class="selector-title">配置重置</span>
+                            </div>
+                            <div class="config-template-hint">先备份 config.toml，再写默认配置。</div>
+                            <button class="btn-tool" @click="resetConfig" :disabled="resetConfigLoading || loading || !!initError">
+                                {{ resetConfigLoading ? '重装中...' : '重装配置' }}
+                            </button>
+                        </div>
+                    </div>
+                </div>