codexmate 0.0.34 → 0.0.37

package/web-ui/session-helpers.mjs

@@ -1,4 +1,4 @@
-import { buildSessionListParams } from './logic.mjs';
+import { buildSessionListParams, formatSessionTimelineTimestamp } from './logic.mjs';
 
 function clearSessionTimelineRefs(vm) {
     if (typeof vm.clearSessionTimelineRefs === 'function') {
@@ -90,7 +90,7 @@ export function switchMainTab(tab) {
     emitSessionLoadDebug(this, 'switchMainTab:start', `from=${previousTab}\nto=${nextTab}`);
     this.mainTab = nextTab;
 
-    if (leavingSessions) {
+    if (leavingSessions && this.preserveSessionRenderOnTabLeave !== true) {
         const teardown = () => {
             if (this.mainTab === 'sessions') return;
             if (typeof this.finalizeSessionTabTeardown === 'function') {
@@ -156,7 +156,13 @@ export function switchMainTab(tab) {
     if (nextTab !== 'orchestration' && typeof this.stopTaskOrchestrationPolling === 'function') {
         this.stopTaskOrchestrationPolling();
     }
-    if (nextTab === 'sessions') {
+    if (
+        nextTab === 'sessions'
+        && (
+            !this.sessionListRenderEnabled
+            || !this.sessionPreviewRenderEnabled
+        )
+    ) {
         this.prepareSessionTabRender();
     }
     const shouldLoadTrashListOnSettingsEnter = nextTab === 'settings'
@@ -259,7 +265,12 @@ export async function loadSessions(api, options = {}) {
             clearSessionTimelineRefs(this);
         } else {
             loadSucceeded = true;
-            this.sessionsList = Array.isArray(res.sessions) ? res.sessions : [];
+            const rawSessions = Array.isArray(res.sessions) ? res.sessions : [];
+            this.sessionsList = rawSessions.filter(s => s && typeof s === 'object');
+            for (const session of this.sessionsList) {
+                const rawUpdatedAt = typeof session.updatedAt === 'string' ? session.updatedAt : '';
+                session.updatedAtLabel = formatSessionTimelineTimestamp(rawUpdatedAt);
+            }
             emitSessionLoadDebug(this, 'loadSessions:response', `sessions=${this.sessionsList.length}`);
             if (typeof this.primeSessionListRender === 'function') {
                 this.primeSessionListRender();

package/web-ui/source-bundle.cjs

@@ -7,6 +7,11 @@ const JS_IMPORT_RE = /(?:^|\n)\s*import\s+(?:[\s\S]*?\s+from\s+)?['"](\.[^'"]+)[
 const JS_EXPORT_FROM_RE = /(?:^|\n)\s*export\s+\*\s+from\s+['"](\.[^'"]+)['"]\s*;?/g;
 const JS_RELATIVE_IMPORT_STATEMENT_RE = /(^|\n)([ \t]*)import\s+([\s\S]*?)\s+from\s+['"](\.[^'"]+)['"]\s*;?[ \t]*/g;
 const IDENTIFIER_RE = /^[A-Za-z_$][\w$]*$/;
+const VOID_HTML_TAGS = new Set([
+    'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',
+    'link', 'meta', 'param', 'source', 'track', 'wbr'
+]);
+const PRECOMPILED_RENDER_PATH = path.join(__dirname, 'res', 'web-ui-render.precompiled.js');
 
 function stripBom(content) {
     return content.replace(/^\uFEFF/, '');
@@ -58,6 +63,69 @@ function bundleCssFile(filePath, stack = []) {
     });
 }
 
+function extractElementInnerHtmlById(html, id) {
+    const escapedId = String(id || '').replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const startRe = new RegExp(`<([A-Za-z][\\w:-]*)(?=[^>]*\\bid=["']${escapedId}["'])[^>]*>`, 'i');
+    const startMatch = startRe.exec(html);
+    if (!startMatch) {
+        throw new Error(`Unable to find #${id} in bundled Web UI HTML`);
+    }
+    const tagName = startMatch[1].toLowerCase();
+    const openEnd = startMatch.index + startMatch[0].length;
+    const tagRe = new RegExp(`</?${tagName}\\b[^>]*>`, 'ig');
+    tagRe.lastIndex = openEnd;
+    let depth = 1;
+    let match = tagRe.exec(html);
+    while (match) {
+        const rawTag = match[0];
+        const isClosing = rawTag.startsWith('</');
+        const isSelfClosing = rawTag.endsWith('/>') || VOID_HTML_TAGS.has(tagName);
+        if (isClosing) {
+            depth -= 1;
+        } else if (!isSelfClosing) {
+            depth += 1;
+        }
+        if (depth === 0) {
+            return html.slice(openEnd, match.index);
+        }
+        match = tagRe.exec(html);
+    }
+    throw new Error(`Unable to find closing </${tagName}> for #${id} in bundled Web UI HTML`);
+}
+
+function compileWebUiTemplateToRenderScript(htmlPath = path.join(__dirname, 'index.html')) {
+    let compile;
+    try {
+        ({ compile } = require('@vue/compiler-dom'));
+    } catch (e) {
+        throw new Error(`Unable to compile Web UI template: @vue/compiler-dom is required (${e.message})`);
+    }
+    const html = bundleHtmlFile(htmlPath);
+    const appTemplate = extractElementInnerHtmlById(html, 'app');
+    const result = compile(appTemplate, { mode: 'function', prefixIdentifiers: true });
+    return [
+        'window.__CODEXMATE_WEB_UI_RENDER__ = (() => {',
+        result.code.trimEnd(),
+        '})();',
+        ''
+    ].join('\n');
+}
+
+function readPrecompiledWebUiRenderScript(entryPath = PRECOMPILED_RENDER_PATH) {
+    const resolvedPath = path.isAbsolute(entryPath)
+        ? entryPath
+        : path.resolve(__dirname, entryPath);
+    try {
+        const source = readUtf8Text(resolvedPath).trimEnd();
+        return source ? `${source}\n` : '';
+    } catch (error) {
+        if (error && error.code === 'ENOENT') {
+            return '';
+        }
+        throw error;
+    }
+}
+
 function resolveJavaScriptDependencies(filePath) {
     const source = readUtf8Text(filePath);
     const dependencies = [];
@@ -212,7 +280,8 @@ function readBundledWebUiScript(entryPath = path.join(__dirname, 'app.js')) {
 }
 
 function readExecutableBundledWebUiScript(entryPath = path.join(__dirname, 'app.js')) {
-    return bundleExecutableJavaScriptFile(entryPath, { preserveExports: false });
+    const renderScript = readPrecompiledWebUiRenderScript() || compileWebUiTemplateToRenderScript();
+    return `${renderScript}\n${bundleExecutableJavaScriptFile(entryPath, { preserveExports: false })}`;
 }
 
 function readExecutableBundledJavaScriptModule(entryPath) {
@@ -224,6 +293,9 @@ function readExecutableBundledJavaScriptModule(entryPath) {
 
 module.exports = {
     collectJavaScriptFiles,
+    compileWebUiTemplateToRenderScript,
+    extractElementInnerHtmlById,
+    readPrecompiledWebUiRenderScript,
     readUtf8Text,
     readBundledWebUiHtml,
     readBundledWebUiCss,

package/web-ui/styles/base-theme.css

@@ -26,6 +26,16 @@
     --color-success: #4B8B6A;
     --color-error: #C44536;
 
+    /* Delta 指示色 */
+    --color-delta-up: #4caf50;
+    --color-delta-down: #f44336;
+
+    /* 热力图色阶 */
+    --color-heatmap-1: rgba(200, 121, 99, 0.2);
+    --color-heatmap-2: rgba(200, 121, 99, 0.4);
+    --color-heatmap-3: rgba(200, 121, 99, 0.6);
+    --color-heatmap-4: rgba(200, 121, 99, 0.85);
+
     --bg-warm-gradient:
         radial-gradient(circle at 14% 8%, rgba(255, 219, 196, 0.5) 0%, rgba(255, 219, 196, 0) 32%),
         radial-gradient(circle at 88% 0%, rgba(252, 239, 207, 0.58) 0%, rgba(252, 239, 207, 0) 30%),

package/web-ui/styles/layout-shell.css

@@ -415,6 +415,14 @@ body::after {
     word-break: break-word;
 }
 
+.side-item-ghost {
+    opacity: 0;
+    pointer-events: none;
+    user-select: none;
+    cursor: default;
+    flex: 0 0 auto;
+}
+
 @media (min-width: 721px) {
     body:not(.force-compact) #app > .top-tabs {
         display: none;
@@ -425,58 +433,88 @@ body::after {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    gap: 10px;
     margin-bottom: 0;
-    padding: 14px 10px 16px;
-    border-bottom: 1px solid rgba(137, 111, 94, 0.10);
+    padding: 16px 12px 20px;
+    border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
 }
 
 .brand-head {
     display: flex;
     align-items: center;
-    gap: 12px;
+    gap: 10px;
 }
 
 .brand-logo {
-    width: 38px;
-    height: 38px;
-    border-radius: 13px;
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
     object-fit: cover;
     flex-shrink: 0;
-    box-shadow:
-        0 8px 20px rgba(92, 68, 52, 0.10),
-        0 0 0 1px rgba(200, 121, 99, 0.08);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5);
+    transition: width 0.24s var(--ease-smooth), height 0.24s var(--ease-smooth), box-shadow 0.24s var(--ease-smooth);
+    position: relative;
+}
+
+.brand-logo::after {
+    content: "";
+    position: absolute;
+    inset: -4px;
+    background: radial-gradient(circle, rgba(0, 122, 255, 0.12), transparent 70%);
+    opacity: 0;
+    transition: opacity 0.3s var(--ease-smooth);
+    pointer-events: none;
+}
+
+.brand-block:hover .brand-logo {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
+}
+
+.brand-block:hover .brand-logo::after {
+    opacity: 1;
 }
 
 .brand-copy {
     display: flex;
     flex-direction: column;
-    gap: 4px;
+    gap: 0;
     min-width: 0;
 }
 
 .brand-kicker {
-    font-size: 18px;
-    line-height: 1.15;
-    font-family: var(--font-family-display);
-    color: var(--color-text-primary);
-    letter-spacing: -0.02em;
-    font-weight: 700;
+    font-size: 15px;
+    line-height: 1.2;
+    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
+    color: #1d1d1f;
+    letter-spacing: -0.01em;
+    font-weight: 500;
+}
+
+@supports (-webkit-background-clip: text) or (background-clip: text) {
+    .brand-kicker {
+        background: linear-gradient(180deg, #1d1d1f 0%, #2d2d2f 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+    }
 }
 
 .brand-version {
-    font-size: 11px;
-    font-weight: 500;
-    color: var(--color-text-muted);
-    vertical-align: middle;
-    margin-left: 4px;
+    font-size: 13px;
+    font-weight: 400;
+    color: #8e8e93;
+    vertical-align: baseline;
+    -webkit-text-fill-color: #8e8e93;
 }
 
-.brand-subtitle {
-    font-size: 12px;
-    line-height: 1.45;
-    color: var(--color-text-secondary);
-    max-width: 22ch;
+.brand-version-fade-enter-active,
+.brand-version-fade-leave-active {
+    transition: opacity 0.2s var(--ease-smooth);
+}
+
+.brand-version-fade-enter-from,
+.brand-version-fade-leave-to {
+    opacity: 0;
 }
 
 .github-badge {

package/web-ui/styles/navigation-panels.css

@@ -38,10 +38,18 @@
     margin: 0 0 12px;
 }
 
+.status-strip-placeholder {
+    visibility: hidden;
+    pointer-events: none;
+    user-select: none;
+}
+
 /* Give the status strip a bit more breathing room under the sticky header. */
 .main-panel-topbar .status-strip {
     margin-top: 10px;
     margin-bottom: 16px;
+    min-height: 36px;
+    align-items: center;
 }
 
 .lang-toggle {

package/web-ui/styles/responsive.css

@@ -85,11 +85,21 @@ textarea:focus-visible {
     :root {
         --side-rail-width: min(188px, 46vw);
     }
+
+    .container {
+        display: flex;
+        flex-direction: column;
+        height: 100vh;
+        min-height: 100vh;
+        overflow: hidden;
+    }
+
     .app-shell {
         grid-template-columns: 1fr;
-        min-height: auto;
+        flex: 1 1 auto;
+        min-height: 0;
         height: auto;
-        overflow: visible;
+        overflow: hidden;
     }
 
     .side-rail {
@@ -102,26 +112,34 @@ textarea:focus-visible {
 
     .top-tabs {
         display: flex !important;
+        flex: 0 0 auto;
         flex-wrap: nowrap;
         overflow-x: auto;
         overflow-y: hidden;
         padding-bottom: 2px;
         margin-left: -2px;
         margin-right: -2px;
+        background: rgba(255, 248, 241, 0.96);
+        position: relative;
+        z-index: 30;
     }
 
     .main-panel {
         padding: 0 12px 16px;
-        height: auto;
-        overflow-y: visible;
+        height: 100%;
+        min-height: 0;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
     }
 
     .main-panel-topbar {
-        position: static;
+        position: sticky;
+        top: 0;
+        z-index: 20;
         margin: 0 0 10px;
-        padding: 0;
-        background: transparent;
-        backdrop-filter: none;
+        padding: 0 0 8px;
+        background: rgba(255, 248, 241, 0.96);
+        backdrop-filter: blur(14px) saturate(130%);
     }
 
     .panel-header-refined {
@@ -155,10 +173,29 @@ textarea:focus-visible {
     }
 
     .status-strip {
-        grid-template-columns: 1fr;
         gap: 12px;
     }
 
+    .main-panel-topbar .status-strip {
+        display: flex;
+        flex-wrap: nowrap;
+        gap: 8px;
+        overflow-x: auto;
+        overflow-y: hidden;
+        padding-bottom: 2px;
+        scrollbar-width: none;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .main-panel-topbar .status-strip::-webkit-scrollbar {
+        display: none;
+    }
+
+    .main-panel-topbar .status-chip {
+        flex: 0 0 auto;
+        min-width: max-content;
+    }
+
     .market-grid {
         grid-template-columns: 1fr;
     }
@@ -212,6 +249,10 @@ textarea:focus-visible {
         min-width: 100%;
     }
 
+    .main-panel-topbar .status-chip {
+        min-width: max-content;
+    }
+
     .btn-add,
     .btn-tool,
     .card-action-btn,