codexmate 0.1.27 → 0.1.29

package/web-ui/session-helpers.mjs

@@ -222,6 +222,7 @@ export async function loadSessions(api, options = {}) {
     const normalizedOptions = normalizeSessionLoadOptions(options);
     const includeActiveDetail = shouldIncludeActiveSessionDetail(this, normalizedOptions);
     this.sessionsLoading = true;
+    this.sessionSearchInfo = null;
     this.activeSessionDetailError = '';
     let loadSucceeded = false;
     const params = buildSessionListParams({
@@ -257,6 +258,7 @@ export async function loadSessions(api, options = {}) {
             clearSessionTimelineRefs(this);
         } else {
             loadSucceeded = true;
+            this.sessionSearchInfo = res.searchInfo || null;
             const rawSessions = Array.isArray(res.sessions) ? res.sessions : [];
             this.sessionsList = rawSessions.filter(s => s && typeof s === 'object');
             if (typeof this.clearSessionBatchSelection === 'function') {
@@ -313,6 +315,7 @@ export async function loadSessions(api, options = {}) {
             }
         }
     } catch (e) {
+        this.sessionSearchInfo = null;
         emitSessionLoadDebug(this, 'loadSessions:exception', e && e.message ? e.message : String(e));
         this.sessionsList = [];
         if (typeof this.primeSessionListRender === 'function') {

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

@@ -15,10 +15,11 @@
     --color-surface-alt: #F7EFE8;
     --color-surface-elevated: #FFFFFF;
     --color-surface-tint: rgba(255, 253, 250, 0.86);
+    --color-surface-chip: rgba(255, 255, 255, 0.76);
     --color-text-primary: #241F1C;
     --color-text-secondary: #5A504A;
-    --color-text-tertiary: #82746A;
-    --color-text-muted: #A99B91;
+    --color-text-tertiary: #74655B;
+    --color-text-muted: #77675C;
     --color-border: rgba(137, 111, 94, 0.18);
     --color-border-soft: rgba(137, 111, 94, 0.13);
     --color-border-strong: rgba(137, 111, 94, 0.34);

package/web-ui/styles/bridge-pool.css

@@ -32,7 +32,7 @@
 
 /* ---- 轮询池触发按钮 ---- */
 .bridge-pool-trigger {
-    color: var(--color-brand);
+    color: var(--color-brand-dark);
     background: rgba(200, 121, 99, 0.08);
 }
 

package/web-ui/styles/controls-forms.css

@@ -157,7 +157,7 @@
     line-height: 1 !important;
     border-radius: var(--radius-sm) !important;
     border: 1px solid var(--color-border-soft) !important;
-    background: rgba(255, 255, 255, 0.76) !important;
+    background: var(--color-surface-chip) !important;
     font-size: 12px !important;
     font-weight: var(--font-weight-secondary) !important;
     color: var(--color-text-secondary) !important;

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

@@ -377,7 +377,6 @@ body::after {
     text-transform: uppercase;
     padding: 0 8px;
     margin-bottom: 6px;
-    opacity: 0.72;
 }
 
 .side-item {

package/web-ui/styles/sessions-preview.css

@@ -758,3 +758,80 @@
     width: 14px;
     height: 14px;
 }
+
+/* Refined session workspace: preserve the list/detail structure and action contracts. */
+#panel-sessions.session-browser-refined .session-preview-header {
+    padding: 12px 16px 8px; gap: 8px 16px;
+    display: grid; grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas: "title export" "actions actions";
+    background: var(--color-surface); backdrop-filter: none;
+}
+#panel-sessions.session-browser-refined .session-preview-title {
+    font-size: 17px; line-height: 1.5; letter-spacing: -.015em;
+}
+#panel-sessions.session-browser-refined .session-preview-header > div:first-child { grid-area: title; min-width: 0; }
+#panel-sessions .session-preview-actions { grid-area: actions; gap: 10px; justify-content: flex-start; margin-top: 0; }
+#panel-sessions .session-export-control {
+    grid-area: export; justify-self: end; align-self: start;
+    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
+    padding: 2px; border: 1px solid var(--color-border-soft); border-radius: var(--radius-md);
+    background: var(--color-surface-alt); max-width: 100%;
+}
+#panel-sessions .session-export-label { font-size: 12px; line-height: 1; color: var(--color-text-secondary); padding-inline: 6px 0; margin-block: 0; }
+#panel-sessions #session-export-range {
+    min-height: 44px; min-width: 0; max-width: 100%; padding: 8px 28px 8px 10px;
+    border: 0; border-radius: var(--radius-sm); background: var(--color-surface);
+    color: var(--color-text-primary); font: inherit; font-size: 14px; cursor: pointer;
+}
+#panel-sessions .session-preview-actions button {
+    min-width: 44px; min-height: 44px; height: auto; width: auto; padding: 9px 12px;
+    border-radius: var(--radius-sm); box-shadow: none;
+    transition: background-color 120ms ease-out, transform 100ms ease-out, color 120ms ease-out;
+    touch-action: manipulation;
+}
+#panel-sessions .session-export-control .btn-session-export {
+    background: var(--color-text-primary); color: var(--color-surface);
+    border-color: transparent; font-weight: 600;
+}
+#panel-sessions .session-secondary-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
+#panel-sessions .session-secondary-actions button { background: transparent; border-color: transparent; color: var(--color-text-secondary); }
+#panel-sessions .session-secondary-actions .session-link-group { display: inline-flex; gap: 2px; }
+#panel-sessions .session-danger-action { margin-inline-start: auto; padding-inline-start: 12px; border-inline-start: 1px solid var(--color-border-soft); }
+#panel-sessions .session-danger-action button { background: transparent; border-color: transparent; }
+#panel-sessions .session-preview-actions button:hover:not(:disabled) { transform: none; background: var(--color-surface-alt); }
+#panel-sessions .session-export-control .btn-session-export:hover:not(:disabled) { background: var(--color-text-secondary); }
+#panel-sessions .session-preview-actions button:active:not(:disabled) { transform: scale(.97); }
+#panel-sessions .session-preview-actions :is(button, select):focus-visible,
+#panel-sessions .session-empty-refined button:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 3px; }
+#panel-sessions .session-preview-actions :disabled { opacity: .5; cursor: not-allowed; }
+#panel-sessions .session-export-feedback { padding: 0 16px 16px; color: var(--color-text-secondary); line-height: 1.6; }
+#panel-sessions .session-export-feedback small { display: block; font-size: 12px; }
+#panel-sessions .session-export-notice {
+    margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--color-border-soft);
+    border-radius: var(--radius-sm); background: var(--color-surface-alt); font-size: 13px;
+}
+#panel-sessions .session-search-status {
+    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
+    padding: 10px 2px 14px; font-size: 12px; line-height: 1.6; color: var(--color-text-secondary);
+}
+#panel-sessions .session-search-count { font-weight: 600; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
+#panel-sessions .session-search-partial { color: var(--color-text-secondary); }
+#panel-sessions .session-search-scope { font-size: inherit; margin-inline-start: auto; }
+#panel-sessions .session-empty-refined { padding: 40px 20px; border: 1px dashed var(--color-border-soft); background: transparent; }
+#panel-sessions .session-empty-refined::before { display: none; }
+#panel-sessions .session-empty-refined p { margin: 0 0 16px; line-height: 1.65; }
+#panel-sessions .session-empty-refined button { min-height: 44px; padding-inline: 16px; }
+@media (max-width: 640px) {
+    #panel-sessions .session-preview-actions { flex-direction: row; align-items: center; gap: 10px; }
+    #panel-sessions .session-export-control { justify-self: stretch; }
+    #panel-sessions #session-export-range { flex: 1 1 120px; }
+    #panel-sessions .session-secondary-actions { flex: 1 1 180px; }
+    #panel-sessions .session-preview-actions button { width: auto; }
+    #panel-sessions .session-search-scope { flex-basis: 100%; margin-inline-start: 0; }
+    #panel-sessions.session-browser-refined .session-preview-header { padding: 12px 12px 8px; gap: 8px; grid-template-columns: 1fr; grid-template-areas: "title" "export" "actions"; }
+    #panel-sessions .session-export-feedback { padding-inline: 12px; }
+}
+@media (prefers-reduced-motion: reduce) {
+    #panel-sessions .session-preview-actions button { transition: none; }
+    #panel-sessions .session-preview-actions button:active:not(:disabled) { transform: none; }
+}

package/web-ui/styles/sessions-toolbar-trash.css

@@ -179,7 +179,7 @@
     -webkit-tap-highlight-color: transparent;
 }
 
-.session-source-pill:hover:not(:disabled) {
+.session-source-pill:hover:not(:disabled):not(.active) {
     color: var(--color-text-secondary);
     background: var(--color-surface);
 }

package/web-ui/styles/sessions-usage.css

@@ -46,7 +46,7 @@
     -webkit-tap-highlight-color: transparent;
 }
 
-.usage-range-btn:hover:not(:disabled) {
+.usage-range-btn:hover:not(:disabled):not(.active) {
     color: var(--color-text-secondary);
     background: rgba(200, 121, 99, 0.08);
 }

package/web-ui/styles/settings-panel.css

@@ -171,7 +171,7 @@
     left: 3px;
     width: 20px;
     height: 20px;
-    background: white;
+    background: #fff;
     border-radius: 50%;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
     transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
@@ -229,7 +229,7 @@
     flex: 1;
 }
 
-.settings-toggle-group .toggle-btn:hover:not(:disabled) {
+.settings-toggle-group .toggle-btn:hover:not(:disabled):not(.active) {
     color: var(--color-text-secondary);
     background: var(--color-surface);
 }

package/web-ui/styles/theme-dark-tokens.css

@@ -0,0 +1,83 @@
+/* ============================================
+   Codex Mate Web UI - 暗色主题令牌覆盖
+   作用于 <html data-theme="dark">；浅色默认值见 base-theme.css
+   ============================================ */
+:root[data-theme="dark"] {
+    color-scheme: dark;
+
+    /* 品牌色：保留暖橙 accent，提亮适配暗底 */
+    --color-brand: #D68F79;
+    --color-brand-dark: #C07A63;
+    --color-brand-light: rgba(214, 143, 121, 0.16);
+    --color-brand-subtle: rgba(214, 143, 121, 0.24);
+
+    /* 中性灰层级底色 */
+    --color-bg: #17181A;
+    --color-surface: #1E1F22;
+    --color-surface-alt: #232427;
+    --color-surface-elevated: #26272B;
+    --color-surface-tint: rgba(30, 31, 34, 0.86);
+    --color-surface-chip: rgba(30, 31, 34, 0.76);
+    --color-text-primary: #ECE8E4;
+    --color-text-secondary: #B5ABA4;
+    --color-text-tertiary: #A59A91;
+    --color-text-muted: #9A8D83;
+    --color-border: rgba(255, 255, 255, 0.09);
+    --color-border-soft: rgba(255, 255, 255, 0.06);
+    --color-border-strong: rgba(255, 255, 255, 0.2);
+
+    --color-success: #6DB08E;
+    --color-error: #D6766B;
+
+    /* Delta 指示色 */
+    --color-delta-up: #6FBE7C;
+    --color-delta-down: #EE7B6E;
+
+    /* 热力图色阶：品牌橙 alpha 阶梯 */
+    --color-heatmap-1: rgba(214, 143, 121, 0.18);
+    --color-heatmap-2: rgba(214, 143, 121, 0.38);
+    --color-heatmap-3: rgba(214, 143, 121, 0.58);
+    --color-heatmap-4: rgba(214, 143, 121, 0.85);
+
+    --bg-warm-gradient:
+        radial-gradient(circle at 14% 8%, rgba(214, 143, 121, 0.05) 0%, rgba(214, 143, 121, 0) 32%),
+        radial-gradient(circle at 88% 0%, rgba(120, 132, 158, 0.05) 0%, rgba(120, 132, 158, 0) 30%),
+        linear-gradient(135deg, #1A1B1E 0%, #17181A 46%, #141517 100%);
+
+    --color-bg-topbar-strong: rgba(23, 24, 26, 0.96);
+    --color-bg-topbar-soft: rgba(23, 24, 26, 0.86);
+    --color-bg-topbar-clear: rgba(23, 24, 26, 0);
+
+    /* 阴影：黑色系浮层 */
+    --shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.3);
+    --shadow-card: 0 12px 30px rgba(0, 0, 0, 0.35);
+    --shadow-card-hover: 0 18px 44px rgba(0, 0, 0, 0.45);
+    --shadow-float: 0 22px 56px rgba(0, 0, 0, 0.5);
+    --shadow-raised: 0 14px 30px rgba(0, 0, 0, 0.4);
+    --shadow-modal:
+        0 16px 42px rgba(0, 0, 0, 0.45),
+        0 34px 84px rgba(0, 0, 0, 0.45);
+    --shadow-input-focus:
+        0 0 0 3px var(--color-brand-light),
+        0 1px 2px rgba(0, 0, 0, 0.4);
+}
+
+/* 全局背景光斑：暗色下收敛为微弱冷光 */
+:root[data-theme="dark"] body::before {
+    background:
+        radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0) 26%),
+        radial-gradient(circle at 86% 18%, rgba(214, 143, 121, 0.04), rgba(214, 143, 121, 0) 30%);
+}
+
+/* 滚动条 */
+:root[data-theme="dark"] * {
+    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
+}
+
+:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.22);
+}
+
+:root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.34);
+}