Validating UI Features

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)