feat(web-ui): claude local bridge, share command, session utilization & UI improvements

lib/cli-sessions.js

@@ -163,8 +163,9 @@ function matchTokensInText(text, tokens, mode) {
         return false;
     }
     var boundaryChars = "\\s_\\-.,;:!?(){}[\\]<>/\"'`";
+    var hasCjk = function(token) { return /[⺀-鿿\u{20000}-\u{2fa1f}]/u.test(token); };
     var matchToken = function(token) {
-        if (/^\d+$/.test(token)) {
+        if (/^\d+$/.test(token) || hasCjk(token)) {
             return haystack.indexOf(token) !== -1;
         }
         var escaped = token.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");

tests/e2e/test-install-status.js

@@ -2,7 +2,7 @@ const { assert } = require('./helpers');
 
 module.exports = async function testInstallStatus(ctx) {
     const { api } = ctx;
-    const report = await api('install-status');
+    const report = await api('install-status', undefined, 10000);
     assert(report && Array.isArray(report.targets), 'install-status should return targets');
     const claude = report.targets.find((item) => item && item.id === 'claude') || null;
     assert(claude, 'install-status should include claude target');

tests/unit/config-tabs-ui.test.mjs

@@ -328,7 +328,7 @@ test('config template keeps expected config tabs in top and side navigation', ()
     assert.match(html, /<button[\s\S]*?@click="deleteProvider\(provider\.name\)"[\s\S]*?:aria-label="t\('config\.provider\.delete\.aria', \{ name: provider\.name \}\)"[\s\S]*?:title="shouldShowProviderDelete\(provider\) \? t\('common\.delete'\) : t\('common\.notDeletable'\)">/);
     assert.match(html, /<button class="card-action-btn"[^>]*@click="openEditConfigModal\(name\)"[^>]*:aria-label="t\('claude\.action\.editAria', \{ name \}\)"[^>]*:title="t\('claude\.action\.edit'\)">/);
     assert.match(html, /<button class="card-action-btn delete"[^>]*@click="deleteClaudeConfig\(name\)"[^>]*:aria-label="t\('claude\.action\.deleteAria', \{ name \}\)"[^>]*:title="t\('claude\.action\.delete'\)">/);
-    assert.match(html, /<button class="card-action-btn"[^>]*@click="copyClaudeShareCommand\(name\)"[^>]*disabled[^>]*>/);
+    assert.match(html, /<button class="card-action-btn"[^>]*@click="copyClaudeShareCommand\(name\)"[^>]*>/);
     assert.match(html, /<button class="card-action-btn"[^>]*@click="openOpenclawEditModal\(name\)"[^>]*:aria-label="t\('openclaw\.action\.editAria', \{ name \}\)"[^>]*:title="t\('openclaw\.action\.edit'\)">/);
     assert.match(
         html,

tests/unit/web-ui-behavior-parity.test.mjs

@@ -690,7 +690,8 @@ test('captured bundled app skeleton only exposes expected data key drift versus
         'codexModelHasList',
         'codexProviderTemplates',
         'providersHealthSummary',
-        'providersHealthTone'
+        'providersHealthTone',
+        'sessionContextUtilization'
     ];
     const allowedMissingCurrentComputedKeys = [
         'hasLocalAndProxy',

web-ui/modules/app.computed.session.mjs

@@ -27,6 +27,18 @@ function formatCompactUsageSummaryNumber(value) {
     }).format(Math.floor(numeric));
 }
 
+function formatSignedUsageSummaryNumber(value) {
+    const numeric = Number(value);
+    if (!Number.isFinite(numeric)) {
+        return '0';
+    }
+    const abs = Math.floor(Math.abs(numeric));
+    const formatted = abs.toLocaleString('en-US');
+    if (numeric > 0) return `+${formatted}`;
+    if (numeric < 0) return `-${formatted}`;
+    return '0';
+}
+
 function formatUsageRangeLabel(range, t) {
     const normalized = typeof range === 'string' ? range.trim().toLowerCase() : '7d';
     if (typeof t === 'function') {
@@ -571,6 +583,7 @@ export function createSessionComputed() {
                     tokenPercent: maxTokens > 0 ? Math.round((row.tokenTotal / maxTokens) * 1000) / 10 : 0,
                     prevTokenPercent: row.compareEnabled && maxTokens > 0 ? Math.round(((row.prevTokenTotal || 0) / maxTokens) * 1000) / 10 : 0,
                     prevTokenTitle: row.compareEnabled ? formatUsageSummaryNumber(row.prevTokenTotal || 0) : '',
+                    prevCostTitle: row.compareEnabled ? formatUsageSummaryNumber(row.prevTokenTotal || 0) : '',
                 })),
                 maxTokens,
             };
@@ -688,6 +701,35 @@ export function createSessionComputed() {
                 return Math.max(0, Math.floor(totalCount));
             }
             return Array.isArray(this.sessionTrashItems) ? this.sessionTrashItems.length : 0;
+        },
+
+        sessionContextUtilization() {
+            const list = Array.isArray(this.sessionsList) ? this.sessionsList : [];
+            const utilizationMap = {};
+            for (const session of list) {
+                if (!session || typeof session !== 'object') continue;
+                const key = this.getSessionExportKey(session);
+                if (!key) continue;
+                const totalTokens = Number.isFinite(Number(session.totalTokens))
+                    ? Math.max(0, Math.floor(Number(session.totalTokens)))
+                    : 0;
+                const contextWindow = Number.isFinite(Number(session.contextWindow))
+                    ? Math.max(0, Math.floor(Number(session.contextWindow)))
+                    : 0;
+                if (contextWindow <= 0) {
+                    utilizationMap[key] = { percent: 0, level: 'normal' };
+                    continue;
+                }
+                const percent = Math.min(100, Math.round((totalTokens / contextWindow) * 100));
+                let level = 'normal';
+                if (percent >= 95) {
+                    level = 'critical';
+                } else if (percent >= 80) {
+                    level = 'warning';
+                }
+                utilizationMap[key] = { percent, level };
+            }
+            return utilizationMap;
         }
     };
 }

web-ui/modules/i18n.dict.mjs

@@ -1037,7 +1037,7 @@ const DICT = Object.freeze({
         'claude.notConfigured': '未配置',
         'claude.action.edit': '编辑',
         'claude.action.delete': '删除',
-        'claude.action.shareDisabled': '分享导入命令（暂时禁用）',
+        'claude.action.shareDisabled': '分享导入命令',
         'claude.action.editAria': '编辑 Claude 配置：{name}',
         'claude.action.deleteAria': '删除 Claude 配置：{name}',
         'claude.action.clone': '克隆',
@@ -2087,7 +2087,7 @@ const DICT = Object.freeze({
         'claude.notConfigured': '未設定',
         'claude.action.edit': '編集',
         'claude.action.delete': '削除',
-        'claude.action.shareDisabled': 'インポートコマンド共有（一時無効）',
+        'claude.action.shareDisabled': 'インポートコマンド共有',
         'claude.action.editAria': 'Claude 設定を編集：{name}',
         'claude.action.deleteAria': 'Claude 設定を削除：{name}',
         'claude.action.clone': 'クローン',
@@ -3147,7 +3147,7 @@ const DICT = Object.freeze({
         'claude.notConfigured': 'Not configured',
         'claude.action.edit': 'Edit',
         'claude.action.delete': 'Delete',
-        'claude.action.shareDisabled': 'Share import command (disabled)',
+        'claude.action.shareDisabled': 'Share import command',
         'claude.action.editAria': 'Edit Claude config: {name}',
         'claude.action.deleteAria': 'Delete Claude config: {name}',
         'claude.action.clone': 'Clone',

web-ui/partials/index/layout-header.html

@@ -122,8 +122,7 @@
                     <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">{{ t('brand.kicker.workspace') }}</div>
-                            <div class="brand-title">Codex Mate</div>
+                            <div class="brand-kicker">Codex Mate <span v-if="appVersion" class="brand-version">v{{ appVersion }}</span></div>
                         </div>
                     </div>
                     <div class="brand-subtitle">{{ t('brand.subtitle.localConfigSessionsWorkspace') }}</div>
@@ -340,9 +339,6 @@
                             :class="{ active: (lang || 'zh') === 'ja' }"
                             @click="setLang('ja')">日本語</button>
                     </div>
-                    <div class="side-rail-version" v-if="appVersion">
-                        <span class="side-rail-version-text">v{{ appVersion }}</span>
-                    </div>
                 </div>
             </aside>
             <main class="main-panel">

web-ui/partials/index/panel-config-claude.html

@@ -122,7 +122,7 @@
                                 <button class="card-action-btn" @click="openCloneClaudeConfigModal(name, config)" :aria-label="t('claude.action.cloneAria', { name })" :title="t('claude.action.clone')">
                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
                                 </button>
-                                <button class="card-action-btn" :class="{ loading: claudeShareLoading[name] }" @click="copyClaudeShareCommand(name)" disabled :title="t('claude.action.shareDisabled')" :aria-label="t('config.shareCommand.aria')">
+                                <button class="card-action-btn" :class="{ loading: claudeShareLoading[name] }" @click="copyClaudeShareCommand(name)" :title="t('config.shareCommand')" :aria-label="t('config.shareCommand.aria')">
                                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7"/><path d="M16 6l-4-4-4 4"/><path d="M12 2v14"/></svg>
                                 </button>
                                 <button class="card-action-btn delete" @click="deleteClaudeConfig(name)" :aria-label="t('claude.action.deleteAria', { name })" :title="t('claude.action.delete')">

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

@@ -155,6 +155,12 @@
                                     <div class="session-item-title">{{ session.title || session.sessionId }}</div>
                                     <span class="session-count-badge">{{ session.messageCount == null ? '...' : session.messageCount }}</span>
                                     <span v-if="session.match && session.match.hit" class="session-match-badge">{{ session.match.count }}</span>
+                                    <span
+                                        v-if="sessionContextUtilization[getSessionExportKey(session)] && sessionContextUtilization[getSessionExportKey(session)].percent > 0"
+                                        :class="['session-context-badge', 'session-context-' + sessionContextUtilization[getSessionExportKey(session)].level]"
+                                        :title="'Context: ' + sessionContextUtilization[getSessionExportKey(session)].percent + '%'">
+                                        {{ sessionContextUtilization[getSessionExportKey(session)].percent }}%
+                                    </span>
                                 </div>
                                 <div class="session-item-actions">
                                     <button

web-ui/styles/layout-shell.css

@@ -55,7 +55,6 @@ body::after {
     border-radius: 0;
     box-shadow: 8px 0 28px rgba(92, 68, 52, 0.05), 1px 0 0 rgba(255, 255, 255, 0.5);
     min-height: 100vh;
-    overflow-y: auto;
     scrollbar-width: none;
     -ms-overflow-style: none;
     backdrop-filter: blur(18px) saturate(130%);
@@ -65,11 +64,6 @@ body::after {
     display: none;
 }
 
-.side-rail .brand-title {
-    font-size: 22px;
-    margin-bottom: 0;
-}
-
 .side-section {
     display: flex;
     flex-direction: column;
@@ -84,8 +78,15 @@ body::after {
 .side-rail-nav {
     display: flex;
     flex-direction: column;
-    gap: 0;
     flex: 1 1 auto;
+    gap: 0;
+    overflow-y: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}
+
+.side-rail-nav::-webkit-scrollbar {
+    display: none;
 }
 
 .lang-fab {
@@ -205,10 +206,11 @@ body::after {
 }
 
 .side-rail-lang {
-    position: sticky;
+    position: absolute;
     bottom: 0;
+    left: 0;
+    right: 0;
     z-index: 2;
-    margin-top: auto;
     padding: 10px 4px 6px;
     background: linear-gradient(180deg, rgba(255, 248, 241, 0), rgba(255, 248, 241, 0.94) 28%);
     border-top: 1px solid rgba(137, 111, 94, 0.08);
@@ -225,17 +227,6 @@ body::after {
     backdrop-filter: none;
 }
 
-.side-rail-version {
-    padding: 4px 8px 8px;
-    text-align: center;
-}
-
-.side-rail-version-text {
-    font-size: 11px;
-    color: rgba(137, 111, 94, 0.45);
-    letter-spacing: 0.02em;
-}
-
 .lang-switch {
     width: 100%;
     border: none;
@@ -465,12 +456,20 @@ body::after {
 }
 
 .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;
+}
+
+.brand-version {
     font-size: 11px;
-    line-height: 1;
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
+    font-weight: 500;
     color: var(--color-text-muted);
-    font-weight: 700;
+    vertical-align: middle;
+    margin-left: 4px;
 }
 
 .brand-subtitle {
@@ -480,15 +479,6 @@ body::after {
     max-width: 22ch;
 }
 
-.brand-title {
-    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;
-}
-
 .github-badge {
     display: inline-flex;
     align-items: center;

web-ui/styles/sessions-list.css

@@ -645,3 +645,39 @@
     position: relative;
     transition: box-shadow var(--transition-normal) var(--ease-spring-soft);
 }
+
+.session-context-badge {
+    font-size: 10px;
+    padding: 1px 6px;
+    border-radius: 999px;
+    font-weight: 600;
+    line-height: 1.4;
+    white-space: nowrap;
+}
+
+.session-context-normal {
+    background: rgba(75, 139, 106, 0.12);
+    color: #4b8b6a;
+}
+
+.session-context-warning {
+    background: rgba(217, 119, 6, 0.15);
+    color: #b45309;
+    animation: context-warning-pulse 2s ease-in-out infinite;
+}
+
+.session-context-critical {
+    background: rgba(196, 69, 54, 0.18);
+    color: #c2410c;
+    animation: context-critical-pulse 1s ease-in-out infinite;
+}
+
+@keyframes context-warning-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.7; }
+}
+
+@keyframes context-critical-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.6; }
+}