| name | validating-ui-features |
| description | Provides step-by-step procedures for validating UI features - theme toggle, new chat, cancel stream, markdown rendering, and token usage info. |
Validating UI Features
CRITICAL: Load this skill before running any UI validation tests.
Prerequisites
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
- Select "Light" option
- Verify Theme changes back:
- Background becomes light (≈
rgb(255, 255, 255))
- Text becomes dark
- Select "System" option
- Verify Theme matches OS preference
- Close Settings panel (X button or click outside)
Console Evidence
localStorage.getItem('ai-foundry-theme')
DOM Changes
<body> FluentProvider styles update- CSS variables change:
--colorNeutralBackground1, --colorNeutralForeground1
Pass Criteria
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
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
- 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
Escape key 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
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>
</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
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
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")
- 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}
Pass Criteria
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
