From c2c17361fa68016d1ba8418758535e91039cb841 Mon Sep 17 00:00:00 2001
From: ymkiux <ymkiux@users.noreply.github.com>
Date: Tue, 26 May 2026 02:11:22 +0800
Subject: [PATCH 01/11] refactor(web-ui): brand block minimalist redesign per
 Apple Glass aesthetic
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Reduce logo from 38px to 28px with 6px border radius
- Simplify title: 18px/700 → 13px/500 with gradient text
- Remove subtitle entirely for cleaner layout
- Version number now fades in on hover only
- Replace warm border with subtle 0.5px black alpha
- Add inner glow and radial hover effect on logo
- Refine padding and spacing for breathing room
---
 web-ui/app.js                            |  1 +
 web-ui/partials/index/layout-header.html |  5 +-
 web-ui/styles/layout-shell.css           | 78 ++++++++++++++++--------
 3 files changed, 54 insertions(+), 30 deletions(-)

diff --git a/web-ui/app.js b/web-ui/app.js
index bb24d331..a2b3840d 100644
--- a/web-ui/app.js
+++ b/web-ui/app.js
@@ -31,6 +31,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const appOptions = {
         data() {
             return {
+                brandHovered: false,
                 lang: 'zh',
                 appVersion: '',
                 mainTab: 'dashboard',
diff --git a/web-ui/partials/index/layout-header.html b/web-ui/partials/index/layout-header.html
index 0d51e292..c18be119 100644
--- a/web-ui/partials/index/layout-header.html
+++ b/web-ui/partials/index/layout-header.html
@@ -118,14 +118,13 @@
 
         <div :class="['app-shell', { standalone: sessionStandalone }]">
             <aside class="side-rail" v-if="!sessionStandalone">
-                <div class="brand-block">
+                <div class="brand-block" @mouseenter="brandHovered = true" @mouseleave="brandHovered = false">
                     <div class="brand-head">
                         <img class="brand-logo" src="/res/logo-pack.webp" alt="Codex Mate logo">
                         <div class="brand-copy">
-                            <div class="brand-kicker">Codex Mate <span v-if="appVersion" class="brand-version">v{{ appVersion }}</span></div>
+                            <div class="brand-kicker">Codex Mate<transition name="brand-version-fade"><span v-if="appVersion && brandHovered" class="brand-version"> v{{ appVersion }}</span></transition></div>
                         </div>
                     </div>
-                    <div class="brand-subtitle">{{ t('brand.subtitle.localConfigSessionsWorkspace') }}</div>
                 </div>
 
                 <div class="side-rail-nav">
diff --git a/web-ui/styles/layout-shell.css b/web-ui/styles/layout-shell.css
index 353a757f..b0bc43ed 100644
--- a/web-ui/styles/layout-shell.css
+++ b/web-ui/styles/layout-shell.css
@@ -425,58 +425,82 @@ 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: 13px;
+    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;
+    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: 12px;
+    font-weight: 400;
+    color: #8e8e93;
+    vertical-align: baseline;
 }
 
-.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 {

From 0853892b24533fd5633112118b5eb0f33c897f68 Mon Sep 17 00:00:00 2001
From: ymkiux <ymkiux@users.noreply.github.com>
Date: Tue, 26 May 2026 02:14:42 +0800
Subject: [PATCH 02/11] fix(web-ui): update precompiled render function for
 brand block changes

---
 web-ui/res/web-ui-render.precompiled.js | 32 +++++++++++++++----------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/web-ui/res/web-ui-render.precompiled.js b/web-ui/res/web-ui-render.precompiled.js
index ce66e6fa..1e8348b4 100644
--- a/web-ui/res/web-ui-render.precompiled.js
+++ b/web-ui/res/web-ui-render.precompiled.js
@@ -1,5 +1,5 @@
 window.__CODEXMATE_WEB_UI_RENDER__ = (() => {
-const { toDisplayString: _toDisplayString, normalizeClass: _normalizeClass, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, renderList: _renderList, vShow: _vShow, withDirectives: _withDirectives, vModelSelect: _vModelSelect, vModelText: _vModelText, withKeys: _withKeys, withModifiers: _withModifiers, isMemoSame: _isMemoSame, withMemo: _withMemo, normalizeStyle: _normalizeStyle, vModelCheckbox: _vModelCheckbox, vModelDynamic: _vModelDynamic } = Vue
+const { toDisplayString: _toDisplayString, normalizeClass: _normalizeClass, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, Transition: _Transition, withCtx: _withCtx, createVNode: _createVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, renderList: _renderList, vShow: _vShow, withDirectives: _withDirectives, vModelSelect: _vModelSelect, vModelText: _vModelText, withKeys: _withKeys, withModifiers: _withModifiers, isMemoSame: _isMemoSame, withMemo: _withMemo, normalizeStyle: _normalizeStyle, vModelCheckbox: _vModelCheckbox, vModelDynamic: _vModelDynamic } = Vue
 
 return function render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
@@ -165,7 +165,11 @@ return function render(_ctx, _cache) {
             key: 0,
             class: "side-rail"
           }, [
-            _createElementVNode("div", { class: "brand-block" }, [
+            _createElementVNode("div", {
+              class: "brand-block",
+              onMouseenter: $event => (_ctx.brandHovered = true),
+              onMouseleave: $event => (_ctx.brandHovered = false)
+            }, [
               _createElementVNode("div", { class: "brand-head" }, [
                 _createElementVNode("img", {
                   class: "brand-logo",
@@ -174,18 +178,22 @@ return function render(_ctx, _cache) {
                 }),
                 _createElementVNode("div", { class: "brand-copy" }, [
                   _createElementVNode("div", { class: "brand-kicker" }, [
-                    _createTextVNode("Codex Mate "),
-                    (_ctx.appVersion)
-                      ? (_openBlock(), _createElementBlock("span", {
-                          key: 0,
-                          class: "brand-version"
-                        }, "v" + _toDisplayString(_ctx.appVersion), 1 /* TEXT */))
-                      : _createCommentVNode("v-if", true)
+                    _createTextVNode("Codex Mate"),
+                    _createVNode(_Transition, { name: "brand-version-fade" }, {
+                      default: _withCtx(() => [
+                        (_ctx.appVersion && _ctx.brandHovered)
+                          ? (_openBlock(), _createElementBlock("span", {
+                              key: 0,
+                              class: "brand-version"
+                            }, " v" + _toDisplayString(_ctx.appVersion), 1 /* TEXT */))
+                          : _createCommentVNode("v-if", true)
+                      ]),
+                      _: 1 /* STABLE */
+                    })
                   ])
                 ])
-              ]),
-              _createElementVNode("div", { class: "brand-subtitle" }, _toDisplayString(_ctx.t('brand.subtitle.localConfigSessionsWorkspace')), 1 /* TEXT */)
-            ]),
+              ])
+            ], 40 /* PROPS, NEED_HYDRATION */, ["onMouseenter", "onMouseleave"]),
             _createElementVNode("div", { class: "side-rail-nav" }, [
               _createElementVNode("div", {
                 class: "side-section",

From 2cc7d8bb1247c40919e4bc9ad996a07a2b3f26d2 Mon Sep 17 00:00:00 2001
From: ymkiux <ymkiux@users.noreply.github.com>
Date: Tue, 26 May 2026 02:19:34 +0800
Subject: [PATCH 03/11] test(parity): allow brandHovered as extra data key

---
 tests/unit/web-ui-behavior-parity.test.mjs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tests/unit/web-ui-behavior-parity.test.mjs b/tests/unit/web-ui-behavior-parity.test.mjs
index ff780498..e44ea9e5 100644
--- a/tests/unit/web-ui-behavior-parity.test.mjs
+++ b/tests/unit/web-ui-behavior-parity.test.mjs
@@ -325,6 +325,7 @@ test('captured bundled app skeleton only exposes expected data key drift versus
     const missingCurrentKeys = headDataKeys.filter((key) => !currentDataKeys.includes(key)).sort();
     const allowedExtraCurrentKeys = parityAgainstHead ? [
         'appVersion',
+        'brandHovered',
         'sessionListInitialBatchSize',
         'sessionListLoadStep',
         'sessionListVisibleCount',

From 58262a2245ffabbf4dd4da925e9009d4d6fe0148 Mon Sep 17 00:00:00 2001
From: ymkiux <ymkiux@users.noreply.github.com>
Date: Tue, 26 May 2026 02:20:54 +0800
Subject: [PATCH 04/11] test(parity): allow brandHovered in both parity
 branches

---
 tests/unit/web-ui-behavior-parity.test.mjs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tests/unit/web-ui-behavior-parity.test.mjs b/tests/unit/web-ui-behavior-parity.test.mjs
index e44ea9e5..7d4a058c 100644
--- a/tests/unit/web-ui-behavior-parity.test.mjs
+++ b/tests/unit/web-ui-behavior-parity.test.mjs
@@ -355,6 +355,7 @@ test('captured bundled app skeleton only exposes expected data key drift versus
         'showEditProviderKey'
     ] : [
         'appVersion',
+        'brandHovered',
         '__mainTabSwitchState',
         'openclawAuthProfilesByProvider',
         'openclawPendingAuthProfileUpdates',

From fa93e546285eb5a9b2877cd2ab7ab2a0b7f792b5 Mon Sep 17 00:00:00 2001
From: ymkiux <ymkiux@users.noreply.github.com>
Date: Tue, 26 May 2026 11:38:23 +0800
Subject: [PATCH 05/11] feat(web-ui): add relative time display with i18n
 support

- Add translation keys for relative time (zh/en/ja)
- Modify formatSessionTimelineTimestamp to support relative time
- Pass t function to buildUsageHeatmap and buildSessionTimelineNodes
- Add updatedAtLabel field to session list items
- Update panel-sessions.html to use formatted time labels
---
 cli.js                                    | 40 ++++++------
 web-ui/logic.sessions.mjs                 | 76 ++++++++++++++++++++---
 web-ui/modules/app.computed.session.mjs   |  4 +-
 web-ui/modules/i18n.dict.mjs              | 30 +++++++++
 web-ui/partials/index/panel-sessions.html |  4 +-
 web-ui/res/web-ui-render.precompiled.js   |  4 +-
 web-ui/session-helpers.mjs                |  8 ++-
 7 files changed, 130 insertions(+), 36 deletions(-)

diff --git a/cli.js b/cli.js
index 531b8dd6..e69eaaee 100644
--- a/cli.js
+++ b/cli.js
@@ -4879,27 +4879,29 @@ function listClaudeSessions(limit, options = {}) {
         }
     }
 
-    if (sessions.length === 0) {
-        const fallbackFiles = collectRecentJsonlFiles(claudeProjectsDir, {
-            returnCount: scanCount,
-            maxFilesScanned,
-            ignoreSubPath: `${path.sep}subagents${path.sep}`
+    // 补充扫描未索引的 .jsonl 文件（包括 sessions-index.json 中遗漏的会话）
+    const seenFilePaths = new Set(sessions.map((item) => item.filePath).filter(Boolean));
+    const fallbackFiles = collectRecentJsonlFiles(claudeProjectsDir, {
+        returnCount: scanCount,
+        maxFilesScanned,
+        ignoreSubPath: `${path.sep}subagents${path.sep}`
+    });
+    for (const filePath of fallbackFiles) {
+        if (seenFilePaths.has(filePath)) continue;
+        const summary = parseClaudeSessionSummary(filePath, {
+            summaryReadBytes,
+            titleReadBytes
         });
-        for (const filePath of fallbackFiles) {
-            const summary = parseClaudeSessionSummary(filePath, {
-                summaryReadBytes,
-                titleReadBytes
-            });
-            if (summary) {
-                sessions.push(attachSessionNativeStatus({
-                    ...summary,
-                    derived: isDerivedSessionFile(filePath)
-                }));
-            }
+        if (summary) {
+            sessions.push(attachSessionNativeStatus({
+                ...summary,
+                derived: isDerivedSessionFile(filePath)
+            }));
+            seenFilePaths.add(filePath);
+        }
 
-            if (sessions.length >= targetCount) {
-                break;
-            }
+        if (sessions.length >= targetCount) {
+            break;
         }
     }
 
diff --git a/web-ui/logic.sessions.mjs b/web-ui/logic.sessions.mjs
index 1187780d..ca4a3882 100644
--- a/web-ui/logic.sessions.mjs
+++ b/web-ui/logic.sessions.mjs
@@ -175,17 +175,73 @@ function clampTimelinePercent(percent) {
     return Math.max(6, Math.min(94, percent));
 }
 
-export function formatSessionTimelineTimestamp(timestamp) {
+export function formatSessionTimelineTimestamp(timestamp, t = null, lang = 'zh') {
     const value = typeof timestamp === 'string' ? timestamp.trim() : '';
     if (!value) return '';
 
     const matched = value.match(/^(\d{4})-(\d{2})-(\d{2})[T\s](\d{2}):(\d{2})(?::(\d{2}))?/);
-    if (matched) {
+    if (!matched) return value;
+
+    // 无i18n时使用原格式
+    if (typeof t !== 'function') {
         const second = matched[6] || '00';
         return `${matched[2]}-${matched[3]} ${matched[4]}:${matched[5]}:${second}`;
     }
 
-    return value;
+    // 相对时间格式
+    const year = Number(matched[1]);
+    const month = Number(matched[2]);
+    const day = Number(matched[3]);
+    const hour = Number(matched[4]);
+    const minute = Number(matched[5]);
+
+    const now = new Date();
+    const nowYear = now.getFullYear();
+    const nowMonth = now.getMonth() + 1;
+    const nowDay = now.getDate();
+    const nowHour = now.getHours();
+    const nowMinute = now.getMinutes();
+
+    const targetDate = new Date(value);
+    const diffMs = now - targetDate;
+    const diffMinutes = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMs / 3600000);
+
+    const timeStr = `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`;
+    const dateStr = `${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+    const fullDateStr = `${matched[1]}-${dateStr}`;
+
+    // < 1分钟
+    if (diffMinutes < 1) {
+        return t('time.relative.justNow');
+    }
+    // 1-59分钟
+    if (diffMinutes < 60) {
+        return t('time.relative.minutesAgo', { n: diffMinutes });
+    }
+    // 1-23小时
+    if (diffHours < 24) {
+        return t('time.relative.hoursAgo', { n: diffHours });
+    }
+
+    // 判断是否今天/昨天
+    const targetMs = targetDate.getTime();
+    const nowMs = now.getTime();
+    const todayStart = new Date(nowYear, nowMonth - 1, nowDay).getTime();
+    const yesterdayStart = todayStart - 86400000;
+
+    if (targetMs >= todayStart) {
+        return t('time.relative.today', { time: timeStr });
+    }
+    if (targetMs >= yesterdayStart) {
+        return t('time.relative.yesterday', { time: timeStr });
+    }
+
+    // 今年或跨年
+    if (year === nowYear) {
+        return t('time.relative.thisYear', { date: dateStr, time: timeStr });
+    }
+    return t('time.relative.crossYear', { date: fullDateStr, time: timeStr });
 }
 
 function normalizeUsageRange(range) {
@@ -206,7 +262,7 @@ function formatUtcDayKey(value) {
     return `${stamp.getUTCFullYear()}-${String(stamp.getUTCMonth() + 1).padStart(2, '0')}-${String(stamp.getUTCDate()).padStart(2, '0')}`;
 }
 
-export function buildUsageHeatmap(sessions = [], options = {}) {
+export function buildUsageHeatmap(sessions = [], options = {}, t = null) {
     const list = Array.isArray(sessions) ? sessions : [];
     const normalized = [];
     for (const session of list) {
@@ -560,7 +616,7 @@ export function buildUsageChartGroups(sessions = [], options = {}) {
             contextWindow: sessionContextWindow,
             updatedAt: session.updatedAt || '',
             updatedAtMs,
-            updatedAtLabel: formatSessionTimelineTimestamp(session.updatedAt || ''),
+            updatedAtLabel: formatSessionTimelineTimestamp(session.updatedAt || '', t),
             hasExactMessageCount: session.__messageCountExact === true
         };
         recentSessions.push(sessionEntry);
@@ -586,7 +642,7 @@ export function buildUsageChartGroups(sessions = [], options = {}) {
             path: pathValue,
             count: meta.count,
             messageTotal: meta.messageTotal,
-            updatedAtLabel: meta.updatedAtMs ? formatSessionTimelineTimestamp(new Date(meta.updatedAtMs).toISOString()) : ''
+            updatedAtLabel: meta.updatedAtMs ? formatSessionTimelineTimestamp(new Date(meta.updatedAtMs).toISOString(), t) : ''
         }));
 
     const usedModels = [...modelMap.entries()]
@@ -698,7 +754,7 @@ export function buildUsageChartGroups(sessions = [], options = {}) {
     };
 }
 
-export function buildSessionTimelineNodes(messages = [], options = {}) {
+export function buildSessionTimelineNodes(messages = [], options = {}, t = null) {
     const list = Array.isArray(messages) ? messages : [];
     const getKey = typeof options.getKey === 'function'
         ? options.getKey
@@ -713,7 +769,7 @@ export function buildSessionTimelineNodes(messages = [], options = {}) {
         const role = normalizeSessionMessageRole(message && (message.normalizedRole || message.role));
         const roleMeta = toRoleMeta(role);
         const key = String(getKey(message, index) || `msg-${index}`);
-        const displayTime = formatSessionTimelineTimestamp(message && message.timestamp ? message.timestamp : '');
+        const displayTime = formatSessionTimelineTimestamp(message && message.timestamp ? message.timestamp : '', t);
         const title = displayTime
             ? `#${index + 1} · ${roleMeta.roleLabel} · ${displayTime}`
             : `#${index + 1} · ${roleMeta.roleLabel}`;
@@ -757,8 +813,8 @@ export function buildSessionTimelineNodes(messages = [], options = {}) {
         }
         const roleValue = roleSet.size === 1 ? Array.from(roleSet)[0] : 'mixed';
         const roleMeta = toRoleMeta(roleValue);
-        const firstTime = formatSessionTimelineTimestamp(list[start] && list[start].timestamp ? list[start].timestamp : '');
-        const lastTime = formatSessionTimelineTimestamp(list[end] && list[end].timestamp ? list[end].timestamp : '');
+        const firstTime = formatSessionTimelineTimestamp(list[start] && list[start].timestamp ? list[start].timestamp : '', t);
+        const lastTime = formatSessionTimelineTimestamp(list[end] && list[end].timestamp ? list[end].timestamp : '', t);
         let displayTime = '';
         if (firstTime && lastTime) {
             displayTime = firstTime === lastTime ? firstTime : `${firstTime} ~ ${lastTime}`;
diff --git a/web-ui/modules/app.computed.session.mjs b/web-ui/modules/app.computed.session.mjs
index 215449c1..4955b03c 100644
--- a/web-ui/modules/app.computed.session.mjs
+++ b/web-ui/modules/app.computed.session.mjs
@@ -241,7 +241,7 @@ export function createSessionComputed() {
             }
             return buildSessionTimelineNodes(this.activeSessionVisibleMessages, {
                 getKey: (message, index) => this.getRecordRenderKey(message, index)
-            });
+            }, this.t);
         },
         sessionTimelineNodeKeyMap() {
             const nodes = Array.isArray(this.sessionTimelineNodes) ? this.sessionTimelineNodes : [];
@@ -280,7 +280,7 @@ export function createSessionComputed() {
             const sessions = this.sessionUsageCharts && Array.isArray(this.sessionUsageCharts.filteredSessions)
                 ? this.sessionUsageCharts.filteredSessions
                 : this.sessionsUsageList;
-            const heatmap = buildUsageHeatmap(sessions, { range: this.sessionsUsageTimeRange });
+            const heatmap = buildUsageHeatmap(sessions, { range: this.sessionsUsageTimeRange }, this.t);
             const t = typeof this.t === 'function' ? this.t : null;
             const lang = typeof this.lang === 'string' ? this.lang.trim().toLowerCase() : '';
             const weekdayAxis = lang === 'en'
diff --git a/web-ui/modules/i18n.dict.mjs b/web-ui/modules/i18n.dict.mjs
index 861c19f9..717ed01a 100644
--- a/web-ui/modules/i18n.dict.mjs
+++ b/web-ui/modules/i18n.dict.mjs
@@ -532,6 +532,16 @@ const DICT = Object.freeze({
         'sessions.loadingList': '会话加载中...',
         'sessions.empty': '暂无可用会话记录',
         'sessions.unknownTime': '未知时间',
+
+        // 相对时间
+        'time.relative.justNow': '刚刚',
+        'time.relative.minutesAgo': '{n}分钟前',
+        'time.relative.hoursAgo': '{n}小时前',
+        'time.relative.today': '今天 {time}',
+        'time.relative.yesterday': '昨天 {time}',
+        'time.relative.thisYear': '{date} {time}',
+        'time.relative.crossYear': '{date} {time}',
+
         'sessions.query.placeholder.enabled': '关键词检索（支持 Codex/Claude/Gemini/CodeBuddy，例：claude code）',
         'sessions.query.placeholder.disabled': '当前来源暂不支持关键词检索',
         'sessions.pin': '置顶',
@@ -1602,6 +1612,16 @@ const DICT = Object.freeze({
         'sessions.loadingList': 'セッション一覧を読み込み中...',
         'sessions.empty': 'セッションがありません',
         'sessions.unknownTime': '不明な時間',
+
+        // 相对時間
+        'time.relative.justNow': 'たった今',
+        'time.relative.minutesAgo': '{n}分前',
+        'time.relative.hoursAgo': '{n}時間前',
+        'time.relative.today': '今日 {time}',
+        'time.relative.yesterday': '昨日 {time}',
+        'time.relative.thisYear': '{date} {time}',
+        'time.relative.crossYear': '{date} {time}',
+
         'sessions.query.placeholder.enabled': 'セッションを検索...',
         'sessions.query.placeholder.disabled': '現在のソースでは検索は利用できません',
         'sessions.pin': 'ピン留め',
@@ -2658,6 +2678,16 @@ const DICT = Object.freeze({
         'sessions.loadingList': 'Loading sessions...',
         'sessions.empty': 'No sessions found',
         'sessions.unknownTime': 'unknown time',
+
+        // Relative time
+        'time.relative.justNow': 'Just now',
+        'time.relative.minutesAgo': '{n}m ago',
+        'time.relative.hoursAgo': '{n}h ago',
+        'time.relative.today': 'Today {time}',
+        'time.relative.yesterday': 'Yesterday {time}',
+        'time.relative.thisYear': '{date} {time}',
+        'time.relative.crossYear': '{date} {time}',
+
         'sessions.query.placeholder.enabled': 'Search keywords (Codex/Claude/Gemini/CodeBuddy, e.g. claude code)',
         'sessions.query.placeholder.disabled': 'Keyword search is not available for this source',
         'sessions.pin': 'Pin',
diff --git a/web-ui/partials/index/panel-sessions.html b/web-ui/partials/index/panel-sessions.html
index 192ac518..4bc61246 100644
--- a/web-ui/partials/index/panel-sessions.html
+++ b/web-ui/partials/index/panel-sessions.html
@@ -193,7 +193,7 @@
                             </div>
                             <div class="session-item-meta">
                                 <span class="session-source" :data-source="session.source">{{ session.sourceLabel }}</span>
-                                <span class="session-item-time">{{ session.updatedAt || t('sessions.unknownTime') }}</span>
+                                <span class="session-item-time">{{ session.updatedAtLabel || 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 v-if="session.match && session.match.snippets && session.match.snippets.length" class="session-match-snippets">
@@ -212,7 +212,7 @@
                                         <div class="session-preview-title">{{ activeSession.title || activeSession.sessionId }}</div>
                                         <div class="session-preview-meta">
                                             <span class="session-preview-meta-item session-source" :data-source="activeSession.source">{{ activeSession.sourceLabel }}</span>
-                                            <span class="session-preview-meta-item">{{ activeSession.updatedAt || t('sessions.unknownTime') }}</span>
+                                            <span class="session-preview-meta-item">{{ activeSession.updatedAtLabel || 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>
diff --git a/web-ui/res/web-ui-render.precompiled.js b/web-ui/res/web-ui-render.precompiled.js
index 1e8348b4..463d3b2c 100644
--- a/web-ui/res/web-ui-render.precompiled.js
+++ b/web-ui/res/web-ui-render.precompiled.js
@@ -2455,7 +2455,7 @@ return function render(_ctx, _cache) {
                                         class: "session-source",
                                         "data-source": session.source
                                       }, _toDisplayString(session.sourceLabel), 9 /* TEXT, PROPS */, ["data-source"]),
-                                      _createElementVNode("span", { class: "session-item-time" }, _toDisplayString(session.updatedAt || _ctx.t('sessions.unknownTime')), 1 /* TEXT */),
+                                      _createElementVNode("span", { class: "session-item-time" }, _toDisplayString(session.updatedAtLabel || session.updatedAt || _ctx.t('sessions.unknownTime')), 1 /* TEXT */),
                                       (_ctx.getSessionHotLabel(session))
                                         ? (_openBlock(), _createElementBlock("span", {
                                             key: 0,
@@ -2513,7 +2513,7 @@ return function render(_ctx, _cache) {
                                             class: "session-preview-meta-item session-source",
                                             "data-source": _ctx.activeSession.source
                                           }, _toDisplayString(_ctx.activeSession.sourceLabel), 9 /* TEXT, PROPS */, ["data-source"]),
-                                          _createElementVNode("span", { class: "session-preview-meta-item" }, _toDisplayString(_ctx.activeSession.updatedAt || _ctx.t('sessions.unknownTime')), 1 /* TEXT */)
+                                          _createElementVNode("span", { class: "session-preview-meta-item" }, _toDisplayString(_ctx.activeSession.updatedAtLabel || _ctx.activeSession.updatedAt || _ctx.t('sessions.unknownTime')), 1 /* TEXT */)
                                         ]),
                                         (_ctx.activeSession.cwd)
                                           ? (_openBlock(), _createElementBlock("div", {
diff --git a/web-ui/session-helpers.mjs b/web-ui/session-helpers.mjs
index 813762b1..e742ebb2 100644
--- a/web-ui/session-helpers.mjs
+++ b/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') {
@@ -266,6 +266,12 @@ export async function loadSessions(api, options = {}) {
         } else {
             loadSucceeded = true;
             this.sessionsList = Array.isArray(res.sessions) ? res.sessions : [];
+            const t = typeof this.t === 'function' ? this.t : null;
+            if (typeof t === 'function') {
+                for (const session of this.sessionsList) {
+                    session.updatedAtLabel = formatSessionTimelineTimestamp(session.updatedAt || '', t);
+                }
+            }
             emitSessionLoadDebug(this, 'loadSessions:response', `sessions=${this.sessionsList.length}`);
             if (typeof this.primeSessionListRender === 'function') {
                 this.primeSessionListRender();

From af054e2d10e5a71942afbc35db151b79789116d3 Mon Sep 17 00:00:00 2001
From: ymkiux <ymkiux@users.noreply.github.com>
Date: Tue, 26 May 2026 11:46:16 +0800
Subject: [PATCH 06/11] fix(web-ui): add t parameter to buildUsageChartGroups

---
 web-ui/logic.sessions.mjs               | 2 +-
 web-ui/modules/app.computed.session.mjs | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web-ui/logic.sessions.mjs b/web-ui/logic.sessions.mjs
index ca4a3882..c5a8502d 100644
--- a/web-ui/logic.sessions.mjs
+++ b/web-ui/logic.sessions.mjs
@@ -455,7 +455,7 @@ function buildUsageBuckets(normalizedSessions, options = {}) {
     return { range, buckets };
 }
 
-export function buildUsageChartGroups(sessions = [], options = {}) {
+export function buildUsageChartGroups(sessions = [], options = {}, t = null) {
     const list = Array.isArray(sessions) ? sessions : [];
     const normalizedSessions = [];
     for (const [sessionIndex, session] of list.entries()) {
diff --git a/web-ui/modules/app.computed.session.mjs b/web-ui/modules/app.computed.session.mjs
index 4955b03c..8a2e8c98 100644
--- a/web-ui/modules/app.computed.session.mjs
+++ b/web-ui/modules/app.computed.session.mjs
@@ -274,7 +274,7 @@ export function createSessionComputed() {
         sessionUsageCharts() {
             return buildUsageChartGroups(this.sessionsUsageList, {
                 range: this.sessionsUsageTimeRange
-            });
+            }, this.t);
         },
         sessionUsageHeatmap() {
             const sessions = this.sessionUsageCharts && Array.isArray(this.sessionUsageCharts.filteredSessions)

From 0827494bbbc778320e294b9dff906ce40ecfeee7 Mon Sep 17 00:00:00 2001
From: ymkiux <ymkiux@users.noreply.github.com>
Date: Tue, 26 May 2026 12:48:29 +0800
Subject: [PATCH 07/11] fix(web-ui): add error handling for relative time
 formatting

---
 web-ui/session-helpers.mjs | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/web-ui/session-helpers.mjs b/web-ui/session-helpers.mjs
index e742ebb2..8d3c4694 100644
--- a/web-ui/session-helpers.mjs
+++ b/web-ui/session-helpers.mjs
@@ -269,7 +269,11 @@ export async function loadSessions(api, options = {}) {
             const t = typeof this.t === 'function' ? this.t : null;
             if (typeof t === 'function') {
                 for (const session of this.sessionsList) {
-                    session.updatedAtLabel = formatSessionTimelineTimestamp(session.updatedAt || '', t);
+                    try {
+                        session.updatedAtLabel = formatSessionTimelineTimestamp(session.updatedAt || '', t);
+                    } catch (e) {
+                        session.updatedAtLabel = session.updatedAt || '';
+                    }
                 }
             }
             emitSessionLoadDebug(this, 'loadSessions:response', `sessions=${this.sessionsList.length}`);

From 8fc7d1cc6a5868e80233cdae571a02261cd7a0aa Mon Sep 17 00:00:00 2001
From: ymkiux <ymkiux@users.noreply.github.com>
Date: Tue, 26 May 2026 14:25:00 +0800
Subject: [PATCH 08/11] refactor(web-ui): simplify time format to absolute only

- Remove relative time logic (just now, N minutes ago, etc.)
- Use fixed format: YYYY-MM-DD HH:mm
- Remove i18n keys for relative time
- Update tests to match new format
- Net code reduction: 91 lines
---
 tests/unit/web-ui-logic.test.mjs        |  8 +--
 web-ui/logic.sessions.mjs               | 79 ++++---------------------
 web-ui/modules/app.computed.session.mjs |  6 +-
 web-ui/modules/i18n.dict.mjs            | 25 --------
 web-ui/session-helpers.mjs              | 11 +---
 5 files changed, 19 insertions(+), 110 deletions(-)

diff --git a/tests/unit/web-ui-logic.test.mjs b/tests/unit/web-ui-logic.test.mjs
index 711a3d69..8e927ef0 100644
--- a/tests/unit/web-ui-logic.test.mjs
+++ b/tests/unit/web-ui-logic.test.mjs
@@ -957,8 +957,8 @@ test('activeSessionVisibleMessages falls back to the initial preview batch befor
 });
 
 test('formatSessionTimelineTimestamp normalizes ISO-like strings for timeline labels', () => {
-    assert.strictEqual(formatSessionTimelineTimestamp('2026-03-23T09:10:11.000Z'), '03-23 09:10:11');
-    assert.strictEqual(formatSessionTimelineTimestamp('2026-03-23 19:20:00'), '03-23 19:20:00');
+    assert.strictEqual(formatSessionTimelineTimestamp('2026-03-23T09:10:11.000Z'), '2026-03-23 09:10');
+    assert.strictEqual(formatSessionTimelineTimestamp('2026-03-23 19:20:00'), '2026-03-23 19:20');
     assert.strictEqual(formatSessionTimelineTimestamp('not-a-time'), 'not-a-time');
     assert.strictEqual(formatSessionTimelineTimestamp(''), '');
 });
@@ -978,8 +978,8 @@ test('buildSessionTimelineNodes builds per-message node metadata', () => {
     assert.strictEqual(nodes[0].key, 'user-0');
     assert.strictEqual(nodes[0].role, 'user');
     assert.strictEqual(nodes[0].roleShort, 'U');
-    assert.strictEqual(nodes[0].displayTime, '03-23 09:00:00');
-    assert.strictEqual(nodes[0].title, '#1 · User · 03-23 09:00:00');
+    assert.strictEqual(nodes[0].displayTime, '2026-03-23 09:00');
+    assert.strictEqual(nodes[0].title, '#1 · User · 2026-03-23 09:00');
     assert.strictEqual(nodes[0].percent, 0);
     assert.strictEqual(nodes[0].safePercent, 6);
 
diff --git a/web-ui/logic.sessions.mjs b/web-ui/logic.sessions.mjs
index c5a8502d..125ca822 100644
--- a/web-ui/logic.sessions.mjs
+++ b/web-ui/logic.sessions.mjs
@@ -175,73 +175,14 @@ function clampTimelinePercent(percent) {
     return Math.max(6, Math.min(94, percent));
 }
 
-export function formatSessionTimelineTimestamp(timestamp, t = null, lang = 'zh') {
+export function formatSessionTimelineTimestamp(timestamp) {
     const value = typeof timestamp === 'string' ? timestamp.trim() : '';
     if (!value) return '';
 
     const matched = value.match(/^(\d{4})-(\d{2})-(\d{2})[T\s](\d{2}):(\d{2})(?::(\d{2}))?/);
     if (!matched) return value;
 
-    // 无i18n时使用原格式
-    if (typeof t !== 'function') {
-        const second = matched[6] || '00';
-        return `${matched[2]}-${matched[3]} ${matched[4]}:${matched[5]}:${second}`;
-    }
-
-    // 相对时间格式
-    const year = Number(matched[1]);
-    const month = Number(matched[2]);
-    const day = Number(matched[3]);
-    const hour = Number(matched[4]);
-    const minute = Number(matched[5]);
-
-    const now = new Date();
-    const nowYear = now.getFullYear();
-    const nowMonth = now.getMonth() + 1;
-    const nowDay = now.getDate();
-    const nowHour = now.getHours();
-    const nowMinute = now.getMinutes();
-
-    const targetDate = new Date(value);
-    const diffMs = now - targetDate;
-    const diffMinutes = Math.floor(diffMs / 60000);
-    const diffHours = Math.floor(diffMs / 3600000);
-
-    const timeStr = `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`;
-    const dateStr = `${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
-    const fullDateStr = `${matched[1]}-${dateStr}`;
-
-    // < 1分钟
-    if (diffMinutes < 1) {
-        return t('time.relative.justNow');
-    }
-    // 1-59分钟
-    if (diffMinutes < 60) {
-        return t('time.relative.minutesAgo', { n: diffMinutes });
-    }
-    // 1-23小时
-    if (diffHours < 24) {
-        return t('time.relative.hoursAgo', { n: diffHours });
-    }
-
-    // 判断是否今天/昨天
-    const targetMs = targetDate.getTime();
-    const nowMs = now.getTime();
-    const todayStart = new Date(nowYear, nowMonth - 1, nowDay).getTime();
-    const yesterdayStart = todayStart - 86400000;
-
-    if (targetMs >= todayStart) {
-        return t('time.relative.today', { time: timeStr });
-    }
-    if (targetMs >= yesterdayStart) {
-        return t('time.relative.yesterday', { time: timeStr });
-    }
-
-    // 今年或跨年
-    if (year === nowYear) {
-        return t('time.relative.thisYear', { date: dateStr, time: timeStr });
-    }
-    return t('time.relative.crossYear', { date: fullDateStr, time: timeStr });
+    return `${matched[1]}-${matched[2]}-${matched[3]} ${matched[4]}:${matched[5]}`;
 }
 
 function normalizeUsageRange(range) {
@@ -262,7 +203,7 @@ function formatUtcDayKey(value) {
     return `${stamp.getUTCFullYear()}-${String(stamp.getUTCMonth() + 1).padStart(2, '0')}-${String(stamp.getUTCDate()).padStart(2, '0')}`;
 }
 
-export function buildUsageHeatmap(sessions = [], options = {}, t = null) {
+export function buildUsageHeatmap(sessions = [], options = {}) {
     const list = Array.isArray(sessions) ? sessions : [];
     const normalized = [];
     for (const session of list) {
@@ -455,7 +396,7 @@ function buildUsageBuckets(normalizedSessions, options = {}) {
     return { range, buckets };
 }
 
-export function buildUsageChartGroups(sessions = [], options = {}, t = null) {
+export function buildUsageChartGroups(sessions = [], options = {}) {
     const list = Array.isArray(sessions) ? sessions : [];
     const normalizedSessions = [];
     for (const [sessionIndex, session] of list.entries()) {
@@ -616,7 +557,7 @@ export function buildUsageChartGroups(sessions = [], options = {}, t = null) {
             contextWindow: sessionContextWindow,
             updatedAt: session.updatedAt || '',
             updatedAtMs,
-            updatedAtLabel: formatSessionTimelineTimestamp(session.updatedAt || '', t),
+            updatedAtLabel: formatSessionTimelineTimestamp(session.updatedAt || ''),
             hasExactMessageCount: session.__messageCountExact === true
         };
         recentSessions.push(sessionEntry);
@@ -642,7 +583,7 @@ export function buildUsageChartGroups(sessions = [], options = {}, t = null) {
             path: pathValue,
             count: meta.count,
             messageTotal: meta.messageTotal,
-            updatedAtLabel: meta.updatedAtMs ? formatSessionTimelineTimestamp(new Date(meta.updatedAtMs).toISOString(), t) : ''
+            updatedAtLabel: meta.updatedAtMs ? formatSessionTimelineTimestamp(new Date(meta.updatedAtMs).toISOString()) : ''
         }));
 
     const usedModels = [...modelMap.entries()]
@@ -754,7 +695,7 @@ export function buildUsageChartGroups(sessions = [], options = {}, t = null) {
     };
 }
 
-export function buildSessionTimelineNodes(messages = [], options = {}, t = null) {
+export function buildSessionTimelineNodes(messages = [], options = {}) {
     const list = Array.isArray(messages) ? messages : [];
     const getKey = typeof options.getKey === 'function'
         ? options.getKey
@@ -769,7 +710,7 @@ export function buildSessionTimelineNodes(messages = [], options = {}, t = null)
         const role = normalizeSessionMessageRole(message && (message.normalizedRole || message.role));
         const roleMeta = toRoleMeta(role);
         const key = String(getKey(message, index) || `msg-${index}`);
-        const displayTime = formatSessionTimelineTimestamp(message && message.timestamp ? message.timestamp : '', t);
+        const displayTime = formatSessionTimelineTimestamp(message && message.timestamp ? message.timestamp : '');
         const title = displayTime
             ? `#${index + 1} · ${roleMeta.roleLabel} · ${displayTime}`
             : `#${index + 1} · ${roleMeta.roleLabel}`;
@@ -813,8 +754,8 @@ export function buildSessionTimelineNodes(messages = [], options = {}, t = null)
         }
         const roleValue = roleSet.size === 1 ? Array.from(roleSet)[0] : 'mixed';
         const roleMeta = toRoleMeta(roleValue);
-        const firstTime = formatSessionTimelineTimestamp(list[start] && list[start].timestamp ? list[start].timestamp : '', t);
-        const lastTime = formatSessionTimelineTimestamp(list[end] && list[end].timestamp ? list[end].timestamp : '', t);
+        const firstTime = formatSessionTimelineTimestamp(list[start] && list[start].timestamp ? list[start].timestamp : '');
+        const lastTime = formatSessionTimelineTimestamp(list[end] && list[end].timestamp ? list[end].timestamp : '');
         let displayTime = '';
         if (firstTime && lastTime) {
             displayTime = firstTime === lastTime ? firstTime : `${firstTime} ~ ${lastTime}`;
diff --git a/web-ui/modules/app.computed.session.mjs b/web-ui/modules/app.computed.session.mjs
index 8a2e8c98..215449c1 100644
--- a/web-ui/modules/app.computed.session.mjs
+++ b/web-ui/modules/app.computed.session.mjs
@@ -241,7 +241,7 @@ export function createSessionComputed() {
             }
             return buildSessionTimelineNodes(this.activeSessionVisibleMessages, {
                 getKey: (message, index) => this.getRecordRenderKey(message, index)
-            }, this.t);
+            });
         },
         sessionTimelineNodeKeyMap() {
             const nodes = Array.isArray(this.sessionTimelineNodes) ? this.sessionTimelineNodes : [];
@@ -274,13 +274,13 @@ export function createSessionComputed() {
         sessionUsageCharts() {
             return buildUsageChartGroups(this.sessionsUsageList, {
                 range: this.sessionsUsageTimeRange
-            }, this.t);
+            });
         },
         sessionUsageHeatmap() {
             const sessions = this.sessionUsageCharts && Array.isArray(this.sessionUsageCharts.filteredSessions)
                 ? this.sessionUsageCharts.filteredSessions
                 : this.sessionsUsageList;
-            const heatmap = buildUsageHeatmap(sessions, { range: this.sessionsUsageTimeRange }, this.t);
+            const heatmap = buildUsageHeatmap(sessions, { range: this.sessionsUsageTimeRange });
             const t = typeof this.t === 'function' ? this.t : null;
             const lang = typeof this.lang === 'string' ? this.lang.trim().toLowerCase() : '';
             const weekdayAxis = lang === 'en'
diff --git a/web-ui/modules/i18n.dict.mjs b/web-ui/modules/i18n.dict.mjs
index 717ed01a..47d7f63d 100644
--- a/web-ui/modules/i18n.dict.mjs
+++ b/web-ui/modules/i18n.dict.mjs
@@ -533,15 +533,6 @@ const DICT = Object.freeze({
         'sessions.empty': '暂无可用会话记录',
         'sessions.unknownTime': '未知时间',
 
-        // 相对时间
-        'time.relative.justNow': '刚刚',
-        'time.relative.minutesAgo': '{n}分钟前',
-        'time.relative.hoursAgo': '{n}小时前',
-        'time.relative.today': '今天 {time}',
-        'time.relative.yesterday': '昨天 {time}',
-        'time.relative.thisYear': '{date} {time}',
-        'time.relative.crossYear': '{date} {time}',
-
         'sessions.query.placeholder.enabled': '关键词检索（支持 Codex/Claude/Gemini/CodeBuddy，例：claude code）',
         'sessions.query.placeholder.disabled': '当前来源暂不支持关键词检索',
         'sessions.pin': '置顶',
@@ -1613,14 +1604,6 @@ const DICT = Object.freeze({
         'sessions.empty': 'セッションがありません',
         'sessions.unknownTime': '不明な時間',
 
-        // 相对時間
-        'time.relative.justNow': 'たった今',
-        'time.relative.minutesAgo': '{n}分前',
-        'time.relative.hoursAgo': '{n}時間前',
-        'time.relative.today': '今日 {time}',
-        'time.relative.yesterday': '昨日 {time}',
-        'time.relative.thisYear': '{date} {time}',
-        'time.relative.crossYear': '{date} {time}',
 
         'sessions.query.placeholder.enabled': 'セッションを検索...',
         'sessions.query.placeholder.disabled': '現在のソースでは検索は利用できません',
@@ -2679,14 +2662,6 @@ const DICT = Object.freeze({
         'sessions.empty': 'No sessions found',
         'sessions.unknownTime': 'unknown time',
 
-        // Relative time
-        'time.relative.justNow': 'Just now',
-        'time.relative.minutesAgo': '{n}m ago',
-        'time.relative.hoursAgo': '{n}h ago',
-        'time.relative.today': 'Today {time}',
-        'time.relative.yesterday': 'Yesterday {time}',
-        'time.relative.thisYear': '{date} {time}',
-        'time.relative.crossYear': '{date} {time}',
 
         'sessions.query.placeholder.enabled': 'Search keywords (Codex/Claude/Gemini/CodeBuddy, e.g. claude code)',
         'sessions.query.placeholder.disabled': 'Keyword search is not available for this source',
diff --git a/web-ui/session-helpers.mjs b/web-ui/session-helpers.mjs
index 8d3c4694..296230eb 100644
--- a/web-ui/session-helpers.mjs
+++ b/web-ui/session-helpers.mjs
@@ -266,15 +266,8 @@ export async function loadSessions(api, options = {}) {
         } else {
             loadSucceeded = true;
             this.sessionsList = Array.isArray(res.sessions) ? res.sessions : [];
-            const t = typeof this.t === 'function' ? this.t : null;
-            if (typeof t === 'function') {
-                for (const session of this.sessionsList) {
-                    try {
-                        session.updatedAtLabel = formatSessionTimelineTimestamp(session.updatedAt || '', t);
-                    } catch (e) {
-                        session.updatedAtLabel = session.updatedAt || '';
-                    }
-                }
+            for (const session of this.sessionsList) {
+                session.updatedAtLabel = formatSessionTimelineTimestamp(session.updatedAt || '');
             }
             emitSessionLoadDebug(this, 'loadSessions:response', `sessions=${this.sessionsList.length}`);
             if (typeof this.primeSessionListRender === 'function') {

From c9a1c582a55e586f84de56f92bc75c530e42918e Mon Sep 17 00:00:00 2001
From: ymkiux <ymkiux@users.noreply.github.com>
Date: Tue, 26 May 2026 14:35:37 +0800
Subject: [PATCH 09/11] chore: bump version to 0.0.36

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d810a16c..c7f93208 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "codexmate",
-  "version": "0.0.35",
+  "version": "0.0.36",
   "description": "Codex/Claude Code/OpenClaw 配置、会话与任务编排 CLI + Web 工具",
   "main": "cli.js",
   "bin": {

From 2e22f1b5112fea56ff0d05821b6d0469bc137d46 Mon Sep 17 00:00:00 2001
From: ymkiux <ymkiux@users.noreply.github.com>
Date: Tue, 26 May 2026 14:52:36 +0800
Subject: [PATCH 10/11] fix(web-ui): guard session shape before accessing
 updatedAt

---
 web-ui/session-helpers.mjs | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/web-ui/session-helpers.mjs b/web-ui/session-helpers.mjs
index 296230eb..61d1cd3f 100644
--- a/web-ui/session-helpers.mjs
+++ b/web-ui/session-helpers.mjs
@@ -265,9 +265,11 @@ 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) {
-                session.updatedAtLabel = formatSessionTimelineTimestamp(session.updatedAt || '');
+                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') {

From add43619e6a10120968dc109bd7097341d722f8c Mon Sep 17 00:00:00 2001
From: ymkiux <ymkiux@users.noreply.github.com>
Date: Tue, 26 May 2026 15:06:03 +0800
Subject: [PATCH 11/11] fix(web-ui): keyboard accessibility and gradient
 fallback

- Add tabindex and focus/blur handlers to brand-block for keyboard navigation
- Add focus-visible outline styles for keyboard users
- Wrap gradient text in @supports for browser fallback
- Update precompiled render function
---
 web-ui/partials/index/layout-header.html |  2 +-
 web-ui/res/web-ui-render.precompiled.js  |  7 +++++--
 web-ui/styles/layout-shell.css           | 23 +++++++++++++++++++----
 3 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/web-ui/partials/index/layout-header.html b/web-ui/partials/index/layout-header.html
index c18be119..0aa4abe0 100644
--- a/web-ui/partials/index/layout-header.html
+++ b/web-ui/partials/index/layout-header.html
@@ -118,7 +118,7 @@
 
         <div :class="['app-shell', { standalone: sessionStandalone }]">
             <aside class="side-rail" v-if="!sessionStandalone">
-                <div class="brand-block" @mouseenter="brandHovered = true" @mouseleave="brandHovered = false">
+                <div class="brand-block" tabindex="0" @mouseenter="brandHovered = true" @mouseleave="brandHovered = false" @focus="brandHovered = true" @blur="brandHovered = false">
                     <div class="brand-head">
                         <img class="brand-logo" src="/res/logo-pack.webp" alt="Codex Mate logo">
                         <div class="brand-copy">
diff --git a/web-ui/res/web-ui-render.precompiled.js b/web-ui/res/web-ui-render.precompiled.js
index 463d3b2c..ab2d754f 100644
--- a/web-ui/res/web-ui-render.precompiled.js
+++ b/web-ui/res/web-ui-render.precompiled.js
@@ -167,8 +167,11 @@ return function render(_ctx, _cache) {
           }, [
             _createElementVNode("div", {
               class: "brand-block",
+              tabindex: "0",
               onMouseenter: $event => (_ctx.brandHovered = true),
-              onMouseleave: $event => (_ctx.brandHovered = false)
+              onMouseleave: $event => (_ctx.brandHovered = false),
+              onFocus: $event => (_ctx.brandHovered = true),
+              onBlur: $event => (_ctx.brandHovered = false)
             }, [
               _createElementVNode("div", { class: "brand-head" }, [
                 _createElementVNode("img", {
@@ -193,7 +196,7 @@ return function render(_ctx, _cache) {
                   ])
                 ])
               ])
-            ], 40 /* PROPS, NEED_HYDRATION */, ["onMouseenter", "onMouseleave"]),
+            ], 40 /* PROPS, NEED_HYDRATION */, ["onMouseenter", "onMouseleave", "onFocus", "onBlur"]),
             _createElementVNode("div", { class: "side-rail-nav" }, [
               _createElementVNode("div", {
                 class: "side-section",
diff --git a/web-ui/styles/layout-shell.css b/web-ui/styles/layout-shell.css
index b0bc43ed..fd5f9c6b 100644
--- a/web-ui/styles/layout-shell.css
+++ b/web-ui/styles/layout-shell.css
@@ -431,6 +431,16 @@ body::after {
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
 }
 
+.brand-block:focus-visible {
+    outline: 2px solid rgba(0, 122, 255, 0.5);
+    outline-offset: -2px;
+    border-radius: 4px;
+}
+
+.brand-block:focus:not(:focus-visible) {
+    outline: none;
+}
+
 .brand-head {
     display: flex;
     align-items: center;
@@ -480,10 +490,15 @@ body::after {
     color: #1d1d1f;
     letter-spacing: -0.01em;
     font-weight: 500;
-    background: linear-gradient(180deg, #1d1d1f 0%, #2d2d2f 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
+}
+
+@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 {