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 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

1. Navigate to http://localhost:5173
2. Wait for authentication and agent metadata load
3. Find Settings button in ChatInput toolbar (gear icon, aria-label="Settings")
4. Click Settings button
5. Verify SettingsPanel drawer opens from right side
6. Verify "Appearance" section visible with ThemePicker
7. Click ThemePicker dropdown (currently shows "Light" or saved preference)
8. Select "Dark" option
9. Verify Theme changes:
   • Background becomes dark (≈ rgb(32, 31, 30))
   • Text becomes light
   • No console errors
10. Select "Light" option
11. Verify Theme changes back:
    • Background becomes light (≈ rgb(255, 255, 255))
    • Text becomes dark
12. Select "System" option
13. Verify Theme matches OS preference
14. 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

1. Send a test message: "Hello, testing new chat button"
2. Wait for assistant response to complete (status: idle)
3. Verify New Chat button is enabled (not grayed out)
4. Click New Chat button (ChatAdd icon, aria-label="New chat")
5. 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

1. Start a new chat (or use existing)
2. 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.

3. Immediately observe:
   • Status changes to streaming
   • Stop button becomes enabled (aria-label="Cancel response")
   • Send button becomes disabled
   • Text chunks appearing in assistant message
4. Click Stop button while streaming is active
5. 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

• 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

1. Start a new chat
2. Send a code generation prompt:

   Write a Python function to calculate fibonacci numbers with proper type hints

3. Wait for response to complete
4. 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)
5. Click "Copy" button
6. 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)

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

1. 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

2. Wait for response to complete
3. Verify each element:

Expected Elements

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

1. Send any message and wait for response to complete
2. 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")
3. Hover over info icon
4. 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

Troubleshooting

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