Skip to content

Commit e697ec2

Browse files
BunsDevBunsDev
authored
UI: polish dashboard — agents overview, chat toolbar, debug & login UX (#23553)
* UI: polish dashboard — agents overview, chat toolbar, debug simplification, login UX * fix(ui): restore chat draft ordering, remove extra toolbar buttons * UI: replace agent avatar fallback with lobster emoji * style(ui): update layout styles for sidebar and shell, adjusting navigation widths for improved responsiveness * feat(ui): implement sidebar resizing functionality and enhance navigation with new search and sorting features for sessions * fix(ui): update references from ClawDash to OpenClaw in checklist and dashboard header * style(ui): adjust sidebar minimum width and add responsive behavior for narrow states * UI: minimal chat agent bar — remove sessions panel, strip chrome * style(ui): update light theme colors and add ambient gradient for Luxe Cream & Coral * UI: replace sparkle with OpenClaw lobster logo in chat * style(ui): rename theme toggle to theme select and update related styles; adjust layout and spacing for agents and chat components * style(ui): enhance agents panel layout with grid system, update toolbar styles, and refine usage chart presentation * style(ui): adjust sessions table column width and refine agent model fields layout for better responsiveness * style(ui): refine component styles for improved layout and responsiveness; adjust gradients, spacing, and element alignment across chat and agent interfaces * ui: align chat-controls session container * ui: enlarge agent controls for better touch targets * ui: pass basePath to avatar renderer in grouped chat * ui: formatting fixups from pre-commit hooks * style(ui): update layout and spacing for chat controls; enhance select component styles and improve responsiveness * UI: tighten chat header spacing and icon sizes * UI: widen chat attachment gap * style(ui): refine chat header layout and adjust icon sizes for improved visual consistency * style(ui): enhance component styles and layout; introduce new inline field styles, update overview card design, and improve session filters for better usability * style(ui): improve CSS formatting and consistency across components; adjust gradients, spacing, and layout for better readability and visual appeal * fix(ui): correct rendering of empty state in overview cards by replacing 'nothing' with an empty string
1 parent e578e83 commit e697ec2

42 files changed

Lines changed: 2087 additions & 1600 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎ui/CHECKLIST.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ Open the dashboard at `http://localhost:<port>` (or the gateway's configured UI
2222
- [ ] Light
2323
- [ ] OpenKnot (Aurora)
2424
- [ ] Field Manual
25-
- [ ] ClawDash (Chrome)
25+
- [ ] OpenClaw (Chrome)
2626
- [ ] Glass components (cards, panels, inputs) render correctly per theme
2727
- [ ] Theme persists across page reload
2828

‎ui/src/i18n/locales/en.ts‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export const en: TranslationMap = {
2121
settings: "Settings",
2222
expand: "Expand sidebar",
2323
collapse: "Collapse sidebar",
24+
resize: "Resize sidebar",
2425
},
2526
tabs: {
2627
agents: "Agents",
@@ -38,19 +39,19 @@ export const en: TranslationMap = {
3839
logs: "Logs",
3940
},
4041
subtitles: {
41-
agents: "Manage agent workspaces, tools, and identities.",
42-
overview: "Gateway status, entry points, and a fast health read.",
43-
channels: "Manage channels and settings.",
44-
instances: "Presence beacons from connected clients and nodes.",
45-
sessions: "Inspect active sessions and adjust per-session defaults.",
46-
usage: "Monitor API usage and costs.",
47-
cron: "Schedule wakeups and recurring agent runs.",
48-
skills: "Manage skill availability and API key injection.",
49-
nodes: "Paired devices, capabilities, and command exposure.",
50-
chat: "Direct gateway chat session for quick interventions.",
51-
config: "Edit ~/.openclaw/openclaw.json safely.",
52-
debug: "Gateway snapshots, events, and manual RPC calls.",
53-
logs: "Live tail of the gateway file logs.",
42+
agents: "Workspaces, tools, identities.",
43+
overview: "Status, entry points, health.",
44+
channels: "Channels and settings.",
45+
instances: "Connected clients and nodes.",
46+
sessions: "Active sessions and defaults.",
47+
usage: "API usage and costs.",
48+
cron: "Wakeups and recurring runs.",
49+
skills: "Skills and API keys.",
50+
nodes: "Paired devices and commands.",
51+
chat: "Gateway chat for quick interventions.",
52+
config: "Edit openclaw.json.",
53+
debug: "Snapshots, events, RPC.",
54+
logs: "Live gateway logs.",
5455
},
5556
overview: {
5657
access: {
@@ -140,7 +141,7 @@ export const en: TranslationMap = {
140141
},
141142
login: {
142143
subtitle: "Gateway Dashboard",
143-
tokenPlaceholder: "paste gateway token",
144+
passwordPlaceholder: "optional",
144145
},
145146
chat: {
146147
disconnected: "Disconnected from gateway.",

‎ui/src/i18n/locales/pt-BR.ts‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export const pt_BR: TranslationMap = {
2121
settings: "Configurações",
2222
expand: "Expandir barra lateral",
2323
collapse: "Recolher barra lateral",
24+
resize: "Redimensionar barra lateral",
2425
},
2526
tabs: {
2627
agents: "Agentes",
@@ -38,19 +39,19 @@ export const pt_BR: TranslationMap = {
3839
logs: "Logs",
3940
},
4041
subtitles: {
41-
agents: "Gerenciar espaços de trabalho, ferramentas e identidades de agentes.",
42-
overview: "Status do gateway, pontos de entrada e leitura rápida de saúde.",
43-
channels: "Gerenciar canais e configurações.",
44-
instances: "Beacons de presença de clientes e nós conectados.",
45-
sessions: "Inspecionar sessões ativas e ajustar padrões por sessão.",
46-
usage: "Monitorar uso e custos da API.",
47-
cron: "Agendar despertares e execuções recorrentes de agentes.",
48-
skills: "Gerenciar disponibilidade de habilidades e injeção de chaves de API.",
49-
nodes: "Dispositivos pareados, capacidades e exposição de comandos.",
50-
chat: "Sessão de chat direta com o gateway para intervenções rápidas.",
51-
config: "Editar ~/.openclaw/openclaw.json com segurança.",
52-
debug: "Snapshots do gateway, eventos e chamadas RPC manuais.",
53-
logs: "Acompanhamento ao vivo dos logs de arquivo do gateway.",
42+
agents: "Espaços, ferramentas, identidades.",
43+
overview: "Status, entrada, saúde.",
44+
channels: "Canais e configurações.",
45+
instances: "Clientes e nós conectados.",
46+
sessions: "Sessões ativas e padrões.",
47+
usage: "Uso e custos da API.",
48+
cron: "Despertares e execuções.",
49+
skills: "Habilidades e chaves API.",
50+
nodes: "Dispositivos e comandos.",
51+
chat: "Chat do gateway para intervenções rápidas.",
52+
config: "Editar openclaw.json.",
53+
debug: "Snapshots, eventos, RPC.",
54+
logs: "Logs ao vivo do gateway.",
5455
},
5556
overview: {
5657
access: {
@@ -142,7 +143,7 @@ export const pt_BR: TranslationMap = {
142143
},
143144
login: {
144145
subtitle: "Painel do Gateway",
145-
tokenPlaceholder: "cole o token do gateway",
146+
passwordPlaceholder: "opcional",
146147
},
147148
chat: {
148149
disconnected: "Desconectado do gateway.",

‎ui/src/i18n/locales/zh-CN.ts‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export const zh_CN: TranslationMap = {
2121
settings: "设置",
2222
expand: "展开侧边栏",
2323
collapse: "折叠侧边栏",
24+
resize: "调整侧边栏大小",
2425
},
2526
tabs: {
2627
agents: "代理",
@@ -38,19 +39,19 @@ export const zh_CN: TranslationMap = {
3839
logs: "日志",
3940
},
4041
subtitles: {
41-
agents: "管理代理工作区、工具和身份。",
42-
overview: "网关状态、入口点和快速健康读取。",
43-
channels: "管理频道和设置。",
44-
instances: "来自已连接客户端和节点的在线信号。",
45-
sessions: "检查活动会话并调整每个会话的默认设置。",
46-
usage: "监控 API 使用情况和成本。",
47-
cron: "安排唤醒和重复的代理运行。",
48-
skills: "管理技能可用性和 API 密钥注入。",
49-
nodes: "配对设备、功能和命令公开。",
50-
chat: "用于快速干预的直接网关聊天会话。",
51-
config: "安全地编辑 ~/.openclaw/openclaw.json。",
52-
debug: "网关快照、事件和手动 RPC 调用。",
53-
logs: "网关文件日志的实时追踪。",
42+
agents: "工作区、工具、身份。",
43+
overview: "状态、入口点、健康。",
44+
channels: "频道和设置。",
45+
instances: "已连接客户端和节点。",
46+
sessions: "活动会话和默认设置。",
47+
usage: "API 使用情况和成本。",
48+
cron: "唤醒和重复运行。",
49+
skills: "技能和 API 密钥。",
50+
nodes: "配对设备和命令。",
51+
chat: "网关聊天，快速干预。",
52+
config: "编辑 openclaw.json。",
53+
debug: "快照、事件、RPC。",
54+
logs: "实时网关日志。",
5455
},
5556
overview: {
5657
access: {
@@ -139,7 +140,7 @@ export const zh_CN: TranslationMap = {
139140
},
140141
login: {
141142
subtitle: "网关仪表盘",
142-
tokenPlaceholder: "粘贴网关令牌",
143+
passwordPlaceholder: "可选",
143144
},
144145
chat: {
145146
disconnected: "已断开与网关的连接。",

‎ui/src/i18n/locales/zh-TW.ts‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export const zh_TW: TranslationMap = {
2121
settings: "設置",
2222
expand: "展開側邊欄",
2323
collapse: "折疊側邊欄",
24+
resize: "調整側邊欄大小",
2425
},
2526
tabs: {
2627
agents: "代理",
@@ -38,19 +39,19 @@ export const zh_TW: TranslationMap = {
3839
logs: "日誌",
3940
},
4041
subtitles: {
41-
agents: "管理代理工作區、工具和身份。",
42-
overview: "網關狀態、入口點和快速健康讀取。",
43-
channels: "管理頻道和設置。",
44-
instances: "來自已連接客戶端和節點的在線信號。",
45-
sessions: "檢查活動會話並調整每個會話的默認設置。",
46-
usage: "監控 API 使用情況和成本。",
47-
cron: "安排喚醒和重複的代理運行。",
48-
skills: "管理技能可用性和 API 密鑰注入。",
49-
nodes: "配對設備、功能和命令公開。",
50-
chat: "用於快速干預的直接網關聊天會話。",
51-
config: "安全地編輯 ~/.openclaw/openclaw.json。",
52-
debug: "網關快照、事件和手動 RPC 調用。",
53-
logs: "網關文件日志的實時追蹤。",
42+
agents: "工作區、工具、身份。",
43+
overview: "狀態、入口點、健康。",
44+
channels: "頻道和設置。",
45+
instances: "已連接客戶端和節點。",
46+
sessions: "活動會話和默認設置。",
47+
usage: "API 使用情況和成本。",
48+
cron: "喚醒和重複運行。",
49+
skills: "技能和 API 密鑰。",
50+
nodes: "配對設備和命令。",
51+
chat: "網關聊天，快速干預。",
52+
config: "編輯 openclaw.json。",
53+
debug: "快照、事件、RPC。",
54+
logs: "實時網關日誌。",
5455
},
5556
overview: {
5657
access: {
@@ -139,7 +140,7 @@ export const zh_TW: TranslationMap = {
139140
},
140141
login: {
141142
subtitle: "閘道儀表板",
142-
tokenPlaceholder: "貼上閘道令牌",
143+
passwordPlaceholder: "可選",
143144
},
144145
chat: {
145146
disconnected: "已斷開與網關的連接。",

‎ui/src/styles/base.css‎

Lines changed: 70 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -96,55 +96,55 @@
9696
--radius-full: 9999px;
9797
}
9898

99-
/* ─── Theme: light (Docs) — Warm Editorial Dark ─── */
99+
/* ─── Theme: light — Luxe Cream & Coral ─── */
100100

101101
:root[data-theme="light"] {
102-
color-scheme: dark;
103-
104-
--vscode-bg: #0e0c0e;
105-
--vscode-sidebar: #131012;
106-
--vscode-panel: #161214;
107-
--vscode-panel-border: rgba(255, 255, 255, 0.06);
108-
--vscode-surface: #1a1618;
109-
--vscode-hover: #201c1e;
110-
--vscode-contrast: #080608;
111-
--vscode-text: #d5d0cf;
112-
--vscode-muted: #7a7472;
113-
--vscode-subtle: #4a4442;
114-
--vscode-ghost: #1a1616;
115-
--vscode-accent: #ca3a29;
116-
--vscode-accent-alpha: rgba(202, 58, 41, 0.14);
117-
--vscode-selection: #3d1418;
118-
--vscode-success: #00d4aa;
119-
--vscode-danger: #ca3a29;
120-
121-
--kn-claw: #ca3a29;
122-
--kn-claw-bright: #fd8e2e;
123-
--kn-claw-dim: rgba(202, 58, 41, 0.12);
124-
--kn-claw-ember: #fb9231;
125-
--kn-claw-deep: #9a2d1f;
126-
--kn-ocean: #0e0c0e;
127-
--kn-ocean-bright: #201c1e;
128-
--kn-ocean-mid: #161214;
129-
--kn-ocean-dim: rgba(14, 12, 14, 0.8);
130-
--kn-ocean-deep: #0e0c0e;
131-
--kn-silver: #8a7e72;
132-
--kn-silver-bright: #c0b4a8;
133-
--kn-silver-dim: rgba(138, 126, 114, 0.12);
134-
--kn-bioluminescence: #00d4aa;
135-
--kn-warm-dark: #1a1416;
136-
--kn-void: #1a1416;
102+
color-scheme: light;
103+
104+
--vscode-bg: #faf7f2;
105+
--vscode-sidebar: #f5f0e8;
106+
--vscode-panel: #fffef9;
107+
--vscode-panel-border: rgba(26, 22, 20, 0.08);
108+
--vscode-surface: #fffef9;
109+
--vscode-hover: #f0ebe3;
110+
--vscode-contrast: #f0ebe3;
111+
--vscode-text: #1a1614;
112+
--vscode-muted: #6b5d54;
113+
--vscode-subtle: #9c8f84;
114+
--vscode-ghost: #ebe6df;
115+
--vscode-accent: #c73526;
116+
--vscode-accent-alpha: rgba(199, 53, 38, 0.12);
117+
--vscode-selection: rgba(199, 53, 38, 0.18);
118+
--vscode-success: #0d9b7a;
119+
--vscode-danger: #c73526;
120+
121+
--kn-claw: #c73526;
122+
--kn-claw-bright: #e85a4a;
123+
--kn-claw-dim: rgba(199, 53, 38, 0.14);
124+
--kn-claw-ember: #d94a3a;
125+
--kn-claw-deep: #9a2a1e;
126+
--kn-ocean: #faf7f2;
127+
--kn-ocean-bright: #fffef9;
128+
--kn-ocean-mid: #f5f0e8;
129+
--kn-ocean-dim: rgba(250, 247, 242, 0.9);
130+
--kn-ocean-deep: #f0ebe3;
131+
--kn-silver: #6b5d54;
132+
--kn-silver-bright: #1a1614;
133+
--kn-silver-dim: rgba(107, 93, 84, 0.12);
134+
--kn-bioluminescence: #0d9b7a;
135+
--kn-warm-dark: #1a1614;
136+
--kn-void: #ebe6df;
137137

138-
--glass-blur: 0px;
139-
--glass-saturate: 100%;
140-
--glass-bg: rgba(22, 18, 20, 0.95);
141-
--glass-bg-elevated: rgba(26, 22, 24, 0.96);
142-
--glass-border: rgba(255, 255, 255, 0.06);
143-
--glass-border-hover: rgba(202, 58, 41, 0.25);
144-
--glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.03);
145-
--glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
146-
--glass-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
147-
--glass-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
138+
--glass-blur: 12px;
139+
--glass-saturate: 110%;
140+
--glass-bg: rgba(255, 254, 249, 0.88);
141+
--glass-bg-elevated: rgba(255, 255, 255, 0.95);
142+
--glass-border: rgba(26, 22, 20, 0.1);
143+
--glass-border-hover: rgba(199, 53, 38, 0.35);
144+
--glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9);
145+
--glass-shadow-sm: 0 2px 12px rgba(26, 22, 20, 0.06), 0 1px 3px rgba(26, 22, 20, 0.04);
146+
--glass-shadow-md: 0 8px 32px rgba(26, 22, 20, 0.08), 0 2px 8px rgba(26, 22, 20, 0.04);
147+
--glass-shadow-lg: 0 20px 56px rgba(26, 22, 20, 0.12), 0 4px 16px rgba(26, 22, 20, 0.06);
148148

149149
--radius-xs: 4px;
150150
--radius-sm: 8px;
@@ -491,6 +491,16 @@
491491
--agent-tab-hover-bg: var(--vscode-accent-alpha);
492492
}
493493

494+
/* Light theme semantic overrides (accent buttons need dark text) */
495+
:root[data-theme="light"] {
496+
--card-highlight: rgba(255, 255, 255, 0.85);
497+
--accent-foreground: #ffffff;
498+
--primary-foreground: #ffffff;
499+
--destructive-foreground: #ffffff;
500+
--focus-offset-color: var(--bg);
501+
--grid-line: rgba(26, 22, 20, 0.06);
502+
}
503+
494504
/* ─── Accessibility: High Contrast ─── */
495505

496506
@media (prefers-contrast: more) {
@@ -714,6 +724,20 @@ select {
714724
display: none;
715725
}
716726

727+
/* ─── light — Luxe Cream ambient gradient ─── */
728+
729+
:root[data-theme="light"] body {
730+
background:
731+
radial-gradient(ellipse 90% 60% at 50% -15%, rgba(199, 53, 38, 0.04) 0%, transparent 55%),
732+
radial-gradient(ellipse 70% 50% at 85% 40%, rgba(13, 155, 122, 0.03) 0%, transparent 50%),
733+
radial-gradient(ellipse 60% 40% at 15% 80%, rgba(199, 53, 38, 0.02) 0%, transparent 45%),
734+
var(--bg);
735+
}
736+
737+
:root[data-theme="light"] body::after {
738+
display: none;
739+
}
740+
717741
/* ─── clawdash — Chrome Metallic Overrides ─── */
718742

719743
:root[data-theme="clawdash"] body {

0 commit comments

Comments
 (0)