From ded95f318012fb50249fb3c8a44cb56800776073 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=AF=BA=E5=A2=A8?= Date: Tue, 7 Apr 2026 18:19:48 +0800 Subject: [PATCH 1/4] refactor(ui): restructure navigation sidebar with Overview as primary entry MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Move Overview to first navigation item for better UX - Consolidate `Chat` into `Agents` section - Increase chevron and section title font sizes for improved readability - Adjust section title padding for better visual spacing Signed-off-by: 诺墨 --- crates/openfang-api/static/css/components.css | 2 +- crates/openfang-api/static/css/layout.css | 4 +- crates/openfang-api/static/index_body.html | 64 ++++++++----------- 3 files changed, 30 insertions(+), 40 deletions(-) diff --git a/crates/openfang-api/static/css/components.css b/crates/openfang-api/static/css/components.css index 7ead14ab..57006287 100644 --- a/crates/openfang-api/static/css/components.css +++ b/crates/openfang-api/static/css/components.css @@ -2693,7 +2693,7 @@ mark.search-highlight { justify-content: space-between; } .nav-section-chevron { - font-size: 8px; + font-size: 16px; transition: transform var(--transition-fast); color: var(--text-muted); } diff --git a/crates/openfang-api/static/css/layout.css b/crates/openfang-api/static/css/layout.css index e892a0a1..1be2872c 100644 --- a/crates/openfang-api/static/css/layout.css +++ b/crates/openfang-api/static/css/layout.css @@ -120,11 +120,11 @@ } .nav-section-title { - font-size: 9px; + font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-muted); - padding: 12px 12px 4px; + padding: 12px 12px 6px 3px; font-weight: 600; } diff --git a/crates/openfang-api/static/index_body.html b/crates/openfang-api/static/index_body.html index b8f7f3d8..22f82484 100644 --- a/crates/openfang-api/static/index_body.html +++ b/crates/openfang-api/static/index_body.html @@ -56,45 +56,11 @@ + +
+
+ Monitor + › +
+ +
+
@@ -869,7 +859,7 @@
From d3972b23c04ec001264b0dd68770709c8970ff66 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=AF=BA=E5=A2=A8?= Date: Tue, 7 Apr 2026 18:38:47 +0800 Subject: [PATCH 2/4] refactor(ui): introduce CSS theme tokens for consistent accent text contrast MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add `--text-on-accent` CSS variable (white) for text on accent backgrounds - Replace hardcoded `var(--bg-primary)` with `--text-on-accent` across components - Update dark theme surface, border, and text color tokens for better contrast - Adjust dark mode surface colors (`#1F1D1C` → `#242221`) for improved depth - Refine border and text-muted colors for better visual hierarchy Signed-off-by: 诺墨 --- crates/openfang-api/static/css/components.css | 20 +++++++++---------- crates/openfang-api/static/css/layout.css | 2 +- crates/openfang-api/static/css/theme.css | 20 ++++++++++--------- 3 files changed, 22 insertions(+), 20 deletions(-) diff --git a/crates/openfang-api/static/css/components.css b/crates/openfang-api/static/css/components.css index 57006287..ff8a74df 100644 --- a/crates/openfang-api/static/css/components.css +++ b/crates/openfang-api/static/css/components.css @@ -23,7 +23,7 @@ .btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; } .btn-primary { background: var(--accent); - color: var(--bg-primary); + color: var(--text-on-accent); box-shadow: var(--shadow-xs), var(--shadow-inset); } .btn-primary:hover { background: var(--accent-dim); box-shadow: var(--shadow-sm), var(--shadow-accent); transform: translateY(-1px); } @@ -538,7 +538,7 @@ tr:hover td { background: var(--surface2); } height: 14px; border-radius: 50%; background: var(--accent); - color: var(--bg-primary); + color: var(--text-on-accent); font-size: 9px; font-weight: 700; display: flex; @@ -864,7 +864,7 @@ mark.search-highlight { border-radius: 50%; border: none; background: var(--accent); - color: var(--bg-primary); + color: var(--text-on-accent); cursor: pointer; display: flex; align-items: center; @@ -1994,7 +1994,7 @@ mark.search-highlight { } .filter-pill:hover { border-color: var(--accent); color: var(--text); } -.filter-pill.active { background: var(--accent); color: var(--bg-primary); border-color: var(--accent); } +.filter-pill.active { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); } /* ── Difficulty badges ── */ .difficulty-badge { @@ -2258,7 +2258,7 @@ mark.search-highlight { .wizard-progress-step.wiz-active .wizard-progress-circle { border-color: var(--accent); background: var(--accent); - color: var(--bg-primary); + color: var(--text-on-accent); box-shadow: 0 0 0 4px var(--accent-glow); } @@ -2485,7 +2485,7 @@ mark.search-highlight { /* ── Try-It Mini Chat ── */ .tryit-messages { max-height: 200px; overflow-y: auto; margin: 12px 0; } .tryit-msg { padding: 6px 10px; border-radius: 6px; margin: 4px 0; font-size: 12px; line-height: 1.5; word-break: break-word; } -.tryit-msg-user { background: var(--accent); color: var(--bg-primary); margin-left: 40px; } +.tryit-msg-user { background: var(--accent); color: var(--text-on-accent); margin-left: 40px; } .tryit-msg-agent { background: var(--surface2); margin-right: 40px; } /* ── Suggested Message Chips ── */ @@ -2503,7 +2503,7 @@ mark.search-highlight { .channel-steps { display: flex; align-items: center; gap: 0; margin-bottom: 20px; } .channel-step-item { display: flex; align-items: center; gap: 6px; flex: 1; } .channel-step-num { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; border: 2px solid var(--border); color: var(--text-dim); flex-shrink: 0; transition: all 0.2s; } -.channel-step-num.active { border-color: var(--accent); background: var(--accent); color: var(--bg-primary); } +.channel-step-num.active { border-color: var(--accent); background: var(--accent); color: var(--text-on-accent); } .channel-step-num.done { border-color: var(--success); background: var(--success); color: #000; } .channel-step-label { font-size: 11px; color: var(--text-dim); } .channel-step-label.active { color: var(--accent); font-weight: 600; } @@ -2520,7 +2520,7 @@ mark.search-highlight { .wizard-category-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; } .wizard-category-pill { padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--text-dim); transition: all 0.15s; font-family: var(--font-mono); } .wizard-category-pill:hover { border-color: var(--accent); color: var(--text); } -.wizard-category-pill.active { background: var(--accent); color: var(--bg-primary); border-color: var(--accent); } +.wizard-category-pill.active { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); } /* ── Capability Preview Panel ── */ .capability-preview { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px; margin-top: 12px; } @@ -2626,7 +2626,7 @@ mark.search-highlight { .personality-pill.active { border-color: var(--accent); background: var(--accent); - color: var(--bg-primary); + color: var(--text-on-accent); box-shadow: 0 0 12px var(--accent-subtle); } @@ -2799,7 +2799,7 @@ mark.search-highlight { .hand-step-item.active .hand-step-num { border-color: var(--accent); background: var(--accent); - color: var(--bg-primary); + color: var(--text-on-accent); } .hand-step-item.done .hand-step-num { border-color: var(--success); diff --git a/crates/openfang-api/static/css/layout.css b/crates/openfang-api/static/css/layout.css index 1be2872c..6759aa07 100644 --- a/crates/openfang-api/static/css/layout.css +++ b/crates/openfang-api/static/css/layout.css @@ -154,7 +154,7 @@ .nav-item.active { background: var(--accent); - color: var(--bg-primary); + color: var(--text-on-accent); font-weight: 600; box-shadow: var(--shadow-sm), 0 2px 8px rgba(255, 92, 0, 0.2); } diff --git a/crates/openfang-api/static/css/theme.css b/crates/openfang-api/static/css/theme.css index 73a9f6ec..6e4f34ec 100644 --- a/crates/openfang-api/static/css/theme.css +++ b/crates/openfang-api/static/css/theme.css @@ -50,6 +50,7 @@ /* Chat-specific */ --agent-bg: #F5F4F2; --user-bg: #FFF3E6; + --text-on-accent: #FFFFFF; /* Layout */ --sidebar-width: 240px; @@ -91,16 +92,17 @@ --bg: #080706; --bg-primary: #0F0E0E; --bg-elevated: #161413; - --surface: #1F1D1C; - --surface2: #2A2725; + --surface: #242221; + --surface2: #2F2D2C; --surface3: #1A1817; - --border: #2D2A28; - --border-light: #3D3A38; - --border-subtle: #232120; - --text: #F0EFEE; - --text-secondary: #C4C0BC; - --text-dim: #8A8380; - --text-muted: #5C5754; + --border: #363230; + --border-light: #4A4644; + --border-subtle: #2D2A28; + --text: #FFFFFF; + --text-secondary: #D1D1D1; + --text-dim: #9FA0A0; + --text-muted: #6B6663; + --text-on-accent: #FFFFFF; --accent: #FF5C00; --accent-light: #FF7A2E; --accent-dim: #E05200; From ae32af1b06533abc24f7801d3b58927d824b71bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=AF=BA=E5=A2=A8?= Date: Tue, 7 Apr 2026 18:54:02 +0800 Subject: [PATCH 3/4] fix(manifest): align the `logo.png` with the icon size to resolve browser loading issues. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 诺墨 --- crates/openfang-api/static/manifest.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/crates/openfang-api/static/manifest.json b/crates/openfang-api/static/manifest.json index 353226bc..fa230c07 100644 --- a/crates/openfang-api/static/manifest.json +++ b/crates/openfang-api/static/manifest.json @@ -7,7 +7,6 @@ "background_color": "#0a0a0f", "theme_color": "#6366f1", "icons": [ - {"src": "/logo.png", "sizes": "192x192", "type": "image/png"}, - {"src": "/logo.png", "sizes": "512x512", "type": "image/png"} + {"src": "/logo.png", "sizes": "128x128", "type": "image/png"} ] } From c000392093b465038d1494697b8f846e7551a70e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=AF=BA=E5=A2=A8?= Date: Tue, 7 Apr 2026 19:13:38 +0800 Subject: [PATCH 4/4] refactor(ui): replace HTML entity icons with inline SVGs for consistent rendering MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Replace `×` close icons with SVG X icons across all modals and panels - Replace `✓` checkmarks with SVG check icons in setup checklist, step indicators, and success states - Replace `•` and `·` separators with small SVG dot icons for better visual consistency - Improve icon sizing, alignment, and stroke properties for crisp rendering Signed-off-by: 诺墨 --- crates/openfang-api/static/index_body.html | 108 ++++++++++++++------- 1 file changed, 71 insertions(+), 37 deletions(-) diff --git a/crates/openfang-api/static/index_body.html b/crates/openfang-api/static/index_body.html index 22f82484..27d4277a 100644 --- a/crates/openfang-api/static/index_body.html +++ b/crates/openfang-api/static/index_body.html @@ -247,8 +247,10 @@