e697ec273a
* 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
145 lines
5.3 KiB
Markdown
145 lines
5.3 KiB
Markdown
# UI Dashboard — Verification Checklist
|
|
|
|
Run through this checklist after every change that touches `ui/` files.
|
|
Open the dashboard at `http://localhost:<port>` (or the gateway's configured UI URL).
|
|
|
|
## Login & Shell
|
|
|
|
- [ ] Login gate renders when not authenticated
|
|
- [ ] Login with valid password grants access
|
|
- [ ] Login with invalid password shows error
|
|
- [ ] App shell loads: sidebar, header, content area visible
|
|
- [ ] Sidebar shows all tab groups: Chat, Control, Agent, Settings
|
|
- [ ] Sidebar collapse/expand works; favicon logo shows when collapsed
|
|
- [ ] Router: clicking each sidebar tab navigates and updates URL
|
|
- [ ] Browser back/forward navigates between tabs
|
|
- [ ] Direct URL navigation (e.g. `/chat`, `/overview`) loads correct tab
|
|
|
|
## Themes
|
|
|
|
- [ ] Theme switcher cycles through all 5 themes:
|
|
- [ ] Dark (Obsidian)
|
|
- [ ] Light
|
|
- [ ] OpenKnot (Aurora)
|
|
- [ ] Field Manual
|
|
- [ ] OpenClaw (Chrome)
|
|
- [ ] Glass components (cards, panels, inputs) render correctly per theme
|
|
- [ ] Theme persists across page reload
|
|
|
|
## Overview
|
|
|
|
- [ ] Overview tab loads without errors
|
|
- [ ] Stat cards render: cost, sessions, skills, cron
|
|
- [ ] Cards show accent color borders per kind
|
|
- [ ] Cards show hover lift + shadow effect
|
|
- [ ] Cards are clickable and navigate to corresponding tab
|
|
- [ ] Responsive grid: 4 columns → 2 → 1 at breakpoints
|
|
- [ ] Attention items render with correct severity icons/colors (error, warning, info)
|
|
- [ ] Event log renders with timestamps
|
|
- [ ] Log tail section renders live gateway log lines
|
|
- [ ] Quick actions section renders
|
|
- [ ] Redact toggle in topbar redacts/reveals sensitive values in cards
|
|
|
|
## Chat
|
|
|
|
- [ ] Chat view renders message history
|
|
- [ ] Sending a message works and response streams in
|
|
- [ ] Markdown rendering works in responses (code blocks, lists, links)
|
|
- [ ] Tool call cards render collapsed by default
|
|
- [ ] Tool cards expand/collapse on click; summary shows tool name/count
|
|
- [ ] JSON messages render collapsed by default
|
|
- [ ] Delete message: trash icon appears on hover, click removes message group
|
|
- [ ] Deleted messages persist across reload (localStorage)
|
|
- [ ] Clear history button resets session via `sessions.reset` RPC
|
|
- [ ] Agent selector dropdown appears when multiple agents configured
|
|
- [ ] Switching agents updates session key and reloads history
|
|
- [ ] Session list panel: shows all sessions for current agent
|
|
- [ ] Session list: clicking a session switches to it
|
|
- [ ] Input history (up/down arrow) recalls previous messages
|
|
- [ ] Slash command menu opens on `/` keystroke
|
|
- [ ] Slash commands show icons, categories, and grouping
|
|
- [ ] Pinned messages render if present
|
|
|
|
## Command Palette
|
|
|
|
- [ ] Opens via keyboard shortcut or UI button
|
|
- [ ] Fuzzy search filters commands as you type
|
|
- [ ] Results grouped by category with labels
|
|
- [ ] Selecting a command executes it
|
|
- [ ] "No results" message when nothing matches
|
|
- [ ] Clicking overlay closes palette
|
|
- [ ] Escape key closes palette
|
|
|
|
## Agents
|
|
|
|
- [ ] Agent tab loads agent list
|
|
- [ ] Agent overview panel: identity card with name, ID, avatar color
|
|
- [ ] Agent config display: model, tools, skills shown
|
|
- [ ] Agent panels: overview, status/files, tools/skills tabs work
|
|
- [ ] Tab counts show for files, skills, channels, cron
|
|
- [ ] Sidebar agent filter input filters agents in multi-agent setup
|
|
- [ ] Agent actions menu: "copy ID" and "set as default" work
|
|
- [ ] Chip-based fallback input (model selection): Enter/comma adds chips
|
|
|
|
## Channels & Instances
|
|
|
|
- [ ] Channels tab lists connected channels
|
|
- [ ] Instances tab lists connected instances
|
|
- [ ] Host/IP blurred by default in Connected Instances
|
|
- [ ] Reveal toggle shows actual host/IP values
|
|
- [ ] Nostr profile form renders if nostr channel present
|
|
|
|
## Privacy & Redaction
|
|
|
|
- [ ] Topbar redact toggle visible; default is stream mode on
|
|
- [ ] Redact ON: sensitive values masked in overview cards
|
|
- [ ] Redact ON: cost digits blurred
|
|
- [ ] Redact ON: access card blurred
|
|
- [ ] Redact ON: raw config JSON masks sensitive values with count badge
|
|
- [ ] Redact OFF: all values visible
|
|
|
|
## Config
|
|
|
|
- [ ] Config tab renders current gateway configuration
|
|
- [ ] Config form fields editable
|
|
- [ ] Sensitive config values masked when redact is on
|
|
- [ ] Config analysis view loads
|
|
|
|
## Other Tabs
|
|
|
|
- [ ] Sessions tab loads session list
|
|
- [ ] Usage tab loads usage statistics with styled sections
|
|
- [ ] Cron tab lists cron jobs with status
|
|
- [ ] Skills tab lists skills with status report
|
|
- [ ] Nodes tab loads
|
|
- [ ] Debug tab renders debug info
|
|
- [ ] Logs tab renders
|
|
|
|
## i18n
|
|
|
|
- [ ] English locale loads by default
|
|
- [ ] All visible strings use i18n keys (no hardcoded English in templates)
|
|
- [ ] zh-CN locale keys present
|
|
- [ ] zh-TW locale keys present
|
|
- [ ] pt-BR locale keys present
|
|
|
|
## Responsive & Mobile
|
|
|
|
- [ ] Sidebar collapses on narrow viewport
|
|
- [ ] Bottom tabs render on mobile breakpoint
|
|
- [ ] Card grid reflows: 4 → 2 → 1 columns
|
|
- [ ] Chat input usable on mobile
|
|
- [ ] No horizontal overflow on any tab at 375px width
|
|
|
|
## Build & Tests
|
|
|
|
- [ ] `pnpm build` completes without errors
|
|
- [ ] `pnpm test` passes — specifically `ui/` test files:
|
|
- [ ] `app-gateway.node.test.ts`
|
|
- [ ] `app-settings.test.ts`
|
|
- [ ] `config-form.browser.test.ts`
|
|
- [ ] `config.browser.test.ts`
|
|
- [ ] `chat.test.ts`
|
|
- [ ] No new TypeScript errors: `pnpm tsgo`
|
|
- [ ] No lint/format issues: `pnpm check`
|