tomevault-io Validating UI Features
CRITICAL: Load this skill before running any UI validation tests.
Prerequisites
- Local dev servers running (Backend: 8080, Frontend: 5173)
- Playwright MCP tools available
- Authenticated user session (MSAL popup completed)
Quick Test Commands
| Test | Command |
|---|---|
| Start servers | VS Code task: Start Dev (VS Code Terminals) |
| Navigate | browser_navigate to http://localhost:5173 |
| Check state | Look for 🔄 entries in browser console |
Test 1: Theme Toggle (Settings Panel)
Purpose
Verify the Settings panel opens and theme switching works correctly.
UI Flow
ChatInput toolbar → Settings button (gear) → SettingsPanel drawer → ThemePicker dropdown
Steps
- Navigate to
http://localhost:5173 - Wait for authentication and agent metadata load
- Find Settings button in ChatInput toolbar (gear icon, aria-label="Settings")
- Click Settings button
- Verify SettingsPanel drawer opens from right side
- Verify "Appearance" section visible with ThemePicker
- Click ThemePicker dropdown (currently shows "Light" or saved preference)
- Select "Dark" option
- Verify Theme changes:
- Background becomes dark (≈
rgb(32, 31, 30)) - Text becomes light
- No console errors
- Background becomes dark (≈
- Select "Light" option
- Verify Theme changes back:
- Background becomes light (≈
rgb(255, 255, 255)) - Text becomes dark
- Background becomes light (≈
- Select "System" option
- Verify Theme matches OS preference
- Close Settings panel (X button or click outside)
Console Evidence
// No errors should appear
// LocalStorage updated:
localStorage.getItem('ai-foundry-theme') // "Dark", "Light", or "System"
DOM Changes
<body>FluentProvider styles update- CSS variables change:
--colorNeutralBackground1,--colorNeutralForeground1
Pass Criteria
- Settings panel opens/closes without errors
- All three theme options selectable
- Visual theme changes immediately on selection
- Theme persists after closing panel
Test 2: New Chat Button
Purpose
Verify the New Chat button clears messages and resets conversation state.
UI Flow
Send message → Wait for response → Click New Chat button → Verify reset
Prerequisites
- At least one message exchange completed
Steps
- Send a test message:
"Hello, testing new chat button" - Wait for assistant response to complete (status:
idle) - Verify New Chat button is enabled (not grayed out)
- Click New Chat button (ChatAdd icon, aria-label="New chat")
- Verify immediate changes:
- Messages array cleared (empty chat area)
- StarterMessages component visible (agent intro + prompts)
- Input field focused and empty
- New Chat button now disabled (no messages to clear)
Console Evidence
🔄 [timestamp] CHAT_CLEAR
Action: {type: CHAT_CLEAR}
Changes: {
chat.messages.length: N → 0
}
Pass Criteria
- Button disabled when no messages
- Button enabled after first message
- Click clears all messages instantly
- StarterMessages reappear
- conversationId reset to null
- Input field receives focus
- No console errors
Test 3: Cancel Stream (Stop Button)
Purpose
Verify streaming can be cancelled mid-response.
UI Flow
Send long prompt → While streaming → Click Stop button → Verify cancellation
Steps
- Start a new chat (or use existing)
- Send a prompt that triggers a long code response:
Write a comprehensive Python script that calculates Fibonacci numbers using 5 different methods: recursive, memoized, iterative, matrix exponentiation, and Binet's formula. Include detailed docstrings, type hints, performance benchmarks, and unit tests for each method. - Immediately observe:
- Status changes to
streaming - Stop button becomes enabled (aria-label="Cancel response")
- Send button becomes disabled
- Text chunks appearing in assistant message
- Status changes to
- Click Stop button while streaming is active
- Verify cancellation:
- Streaming stops immediately
- Partial response preserved (not deleted)
- Status returns to
idle - Send button re-enabled
- Stop button disabled again
Keyboard Shortcut
- Press
Escapekey during streaming → should also cancel
Console Evidence
🔄 [timestamp] CHAT_CANCEL_STREAM
Action: {type: CHAT_CANCEL_STREAM}
Changes: {
chat.status: streaming → idle,
chat.streamingMessageId: "xxx" → undefined
}
Edge Cases
- Very fast response may complete before cancel → OK, not an error
- Multiple rapid clicks → should be idempotent
Pass Criteria
- Stop button disabled when not streaming
- Stop button enabled during streaming
- Click stops stream immediately
- Partial response text preserved
- Status returns to idle
- Escape key works as shortcut
- No errors in console
Test 4: Markdown Code Block Rendering
Purpose
Verify code blocks render with syntax highlighting, line numbers, and copy button.
UI Flow
Send code request → Wait for response → Verify code block UI
Steps
- Start a new chat
- Send a code generation prompt:
Write a Python function to calculate fibonacci numbers with proper type hints - Wait for response to complete
- Verify code block structure:
- Container with dark background
- Header bar showing "python" language label
- "Copy" button in header
- Line numbers on left side
- Syntax highlighting (keywords, strings, comments in different colors)
- Click "Copy" button
- Verify code copied (paste somewhere to confirm)
Additional Test Prompts
From test-files/test-prompts.json:
[
"Create a TypeScript interface for a user profile with nested preferences",
"Show me a bash script to backup a PostgreSQL database",
"Write a SQL query with a CTE to find duplicate customer records"
]
Expected Code Block DOM
<div class="codeBlock">
<div class="codeHeader">
<span class="codeLanguage">python</span>
<button>Copy</button>
</div>
<div> <!-- SyntaxHighlighter -->
<!-- Line numbers + highlighted code -->
</div>
</div>
Syntax Highlighting Colors (vscDarkPlus theme)
| Element | Color |
|---|---|
Keywords (def, return, if) |
Purple/Blue |
| Strings | Orange |
| Comments | Green |
| Function names | Yellow |
| Types | Cyan |
Pass Criteria
- Language label displayed correctly
- Copy button present and functional
- Syntax highlighting applied
- Line numbers visible
- Long lines wrap (no horizontal overflow)
- Multiple code blocks render independently
Test 5: Complex Markdown Rendering
Purpose
Verify tables, lists, headings, and text formatting render correctly.
Steps
- Send a complex markdown prompt:
Create a comprehensive guide with: - A comparison table of React, Vue, and Angular - Numbered installation steps - A code example - Bold and italic text formatting - A blockquote with a tip - Wait for response to complete
- Verify each element:
Expected Elements
| Element | Verification |
|---|---|
| Table | Borders visible, headers bold, rows alternate |
| Ordered list | Numbers 1, 2, 3... with proper indentation |
| Unordered list | Bullets with proper indentation |
| Nested list | Sub-items indented further |
| Bold text | text renders with heavier weight |
| Italic text | text renders with slant |
| Inline code | code has background highlight |
| Blockquote | Left border, indented, lighter text |
| Links | Underlined, opens in new tab |
Pass Criteria
- Tables render with visible structure
- Lists have proper indentation
- Text formatting (bold/italic) applied
- Inline code visually distinct
- Links functional and styled
- No raw markdown visible
Test 6: Token Usage Info
Purpose
Verify response footer shows timing, token counts, and expandable usage details.
UI Flow
Send message → Wait for response → Verify footer → Click expand → Verify breakdown
Steps
- Send any message and wait for response to complete
- Verify response footer displays:
- Response time (e.g.,
3575ms) - Total token count (e.g.,
848 tokens) - Info icon button (aria-label="Show token usage details")
- Response time (e.g.,
- Hover over info icon
- Verify usage details panel shows:
- "Usage Information" header
- Input tokens (e.g.,
Input: 799 tokens) - Output tokens (e.g.,
Output: 49 tokens)
Console Evidence
Action: {type: CHAT_STREAM_COMPLETE, usage: Object}
// usage object: { promptTokens, completionTokens, totalTokens }
Pass Criteria
- Response time displayed after completion
- Total token count displayed
- Info icon button present
- Input/Output breakdown shows on hover
- Values are non-zero numbers
Test Files Reference
| File | Purpose |
|---|---|
test-files/test-prompts.json |
Prompts for each test scenario |
test-files/code-sample.md |
Expected code block rendering |
test-files/complex-response.md |
Expected complex markdown |
test-files/test.txt |
Plain text upload test |
test-files/test.png |
Image upload test |
Troubleshooting
| Issue | Likely Cause | Solution |
|---|---|---|
| Theme not changing | ThemeContext not receiving update | Check FluentProvider wrapping |
| New chat button always disabled | hasMessages prop false |
Check messages array binding |
| Cancel not working | AbortController not set | Check currentStreamAbort in ChatService |
| Code not highlighted | Language not detected | Check regex pattern in Markdown.tsx |
| Copy button not working | copy-to-clipboard import |
Check package installed |
| Table not rendering | GFM plugin missing | Check remarkGfm in Markdown.tsx |
Quick Validation Checklist
□ Theme Toggle
□ Settings opens
□ Dark theme works
□ Light theme works
□ System theme works
□ Persists on refresh
□ New Chat
□ Button disabled initially
□ Enabled after message
□ Clears messages
□ Resets conversation
□ Cancel Stream
□ Stop enabled during stream
□ Cancels immediately
□ Preserves partial response
□ Escape key works
□ Code Blocks
□ Language label
□ Copy button works
□ Syntax highlighting
□ Line numbers
□ Complex Markdown
□ Tables
□ Lists
□ Formatting
□ Links
□ Token Usage
□ Response time shown
□ Token count shown
□ Info icon present
□ Input/Output breakdown on hover
Converted and distributed by TomeVault — claim your Tome and manage your conversions.