codexmate 0.1.28 → 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

@@ -18,8 +18,8 @@
     --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/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/theme-dark-tokens.css

@@ -20,8 +20,8 @@
     --color-surface-chip: rgba(30, 31, 34, 0.76);
     --color-text-primary: #ECE8E4;
     --color-text-secondary: #B5ABA4;
-    --color-text-tertiary: #8F847D;
-    --color-text-muted: #6E6259;
+    --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);

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

@@ -29,8 +29,8 @@
     --color-surface-chip: rgba(30, 31, 34, 0.76);
     --color-text-primary: #ECE8E4;
     --color-text-secondary: #B5ABA4;
-    --color-text-tertiary: #8F847D;
-    --color-text-muted: #6E6259;
+    --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);

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

@@ -0,0 +1,88 @@
+/*
+ * Codex Mate Web UI - ocean light theme tokens (hand maintained).
+ *
+ * Background layer adapted from the "dafy-whale-theme" project
+ * (https://github.com/DViridescent/dafy-whale-theme, MIT licensed).
+ * Only the static background layer (the ocean wash gradients) is reused:
+ * no mascot, no fish swarm, no bubble animation, no plugin dependency.
+ *
+ * The component section of theme-ocean.css is GENERATED - do not edit by hand.
+ * Regenerate after changing any stylesheet:
+ *   node scripts/generate-ocean-theme-css.mjs
+ */
+:root[data-theme="ocean"] {
+    color-scheme: light;
+
+    /* 品牌色：海洋蓝（源自 dafy-whale-theme 的 --dsw-alias-brand-primary） */
+    --color-brand: #3B62F6;
+    --color-brand-dark: #2B4BD0;
+    --color-brand-light: rgba(59, 98, 246, 0.13);
+    --color-brand-subtle: rgba(59, 98, 246, 0.2);
+
+    /* 中性蓝层级底色 */
+    --color-bg: #E9F3FC;
+    --color-surface: #F3F9FE;
+    --color-surface-alt: #E0EDF9;
+    --color-surface-elevated: #FFFFFF;
+    --color-surface-tint: rgba(243, 249, 254, 0.86);
+    --color-surface-chip: rgba(255, 255, 255, 0.76);
+    --color-text-primary: #0E2A5C;
+    --color-text-secondary: #3B5C85;
+    --color-text-tertiary: #45678F;
+    --color-text-muted: #476A90;
+    --color-border: rgba(31, 86, 150, 0.18);
+    --color-border-soft: rgba(31, 86, 150, 0.13);
+    --color-border-strong: rgba(31, 86, 150, 0.34);
+
+    --color-success: #127450;
+    --color-error: #B92A50;
+
+    /* Delta 指示色 */
+    --color-delta-up: #127450;
+    --color-delta-down: #B92A50;
+
+    /* 热力图色阶：海洋蓝 alpha 阶梯 */
+    --color-heatmap-1: rgba(59, 98, 246, 0.2);
+    --color-heatmap-2: rgba(59, 98, 246, 0.4);
+    --color-heatmap-3: rgba(59, 98, 246, 0.6);
+    --color-heatmap-4: rgba(59, 98, 246, 0.85);
+
+    /*
+     * 背景海面光晕：取自 dafy-whale-theme 的 .dafy-wash 三层径向渐变，
+     * 仅保留静态渐变层，颜色全部由下方 wash token 承载。
+     */
+    --color-ocean-wash-brand: rgba(59, 98, 246, 0.30);
+    --color-ocean-wash-cyan: rgba(87, 199, 232, 0.26);
+    --color-ocean-wash-teal: rgba(47, 208, 181, 0.14);
+
+    --bg-warm-gradient:
+        radial-gradient(circle at 14% 8%, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0) 26%),
+        radial-gradient(circle at 86% 18%, rgba(214, 236, 255, 0.55), rgba(214, 236, 255, 0) 30%),
+        linear-gradient(135deg, var(--color-bg) 0%, var(--color-surface-alt) 100%);
+
+    --color-bg-topbar-strong: rgba(233, 243, 252, 0.96);
+    --color-bg-topbar-soft: rgba(233, 243, 252, 0.86);
+    --color-bg-topbar-clear: rgba(233, 243, 252, 0);
+
+    /* 阴影系统：冷色蓝调 */
+    --shadow-subtle: 0 1px 2px rgba(16, 48, 92, 0.05);
+    --shadow-card: 0 12px 30px rgba(16, 48, 92, 0.08);
+    --shadow-card-hover: 0 18px 44px rgba(16, 48, 92, 0.14);
+    --shadow-float: 0 22px 56px rgba(12, 40, 80, 0.18);
+    --shadow-raised: 0 14px 30px rgba(16, 48, 92, 0.14);
+    --shadow-modal:
+        0 16px 42px rgba(12, 40, 80, 0.16),
+        0 34px 84px rgba(12, 40, 80, 0.16);
+    --shadow-input-focus:
+        0 0 0 3px var(--color-brand-light),
+        0 1px 2px rgba(16, 48, 92, 0.06);
+}
+
+/* 背景海面光晕：固定层，不参与滚动，避免长页面拉伸与错位 */
+:root[data-theme="ocean"] body::before {
+    background:
+        radial-gradient(1100px 620px at 88% -8%, var(--color-ocean-wash-brand), transparent 62%),
+        radial-gradient(900px 560px at -6% 108%, var(--color-ocean-wash-cyan), transparent 58%),
+        radial-gradient(520px 340px at 50% 46%, var(--color-ocean-wash-teal), transparent 70%);
+    mix-blend-mode: soft-light;
+}