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

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

// 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,
  chat.currentConversationId: "conv_xxx" → null,
  chat.status: idle → idle
}

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

Write a detailed 500-word essay about the history of software testing methodologies, including unit testing, integration testing, and end-to-end testing.

Immediately observe:
- Status changes to streaming
- Stop button becomes enabled (red, 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

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)
- Expand button (Show token usage details)
Click "Show token usage details" button
Verify expanded 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: { inputTokens, outputTokens, totalTokens }

Pass Criteria

Response time displayed after completion
Total token count displayed
Expand button present and clickable
Input/Output breakdown shows on expand
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
  □ Expand button works
  □ Input/Output breakdown

validating-ui-features

SKILL.md

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

Prerequisites

Quick Test Commands

Test 1: Theme Toggle (Settings Panel)

Purpose

UI Flow

Steps

Console Evidence

DOM Changes

Pass Criteria

Test 2: New Chat Button

Purpose

UI Flow

Prerequisites

Steps

Console Evidence

Pass Criteria

Test 3: Cancel Stream (Stop Button)

Purpose

UI Flow

Steps

Keyboard Shortcut

Console Evidence

Edge Cases

Pass Criteria

Test 4: Markdown Code Block Rendering

Purpose

UI Flow

Steps

Additional Test Prompts

Expected Code Block DOM

Syntax Highlighting Colors (vscDarkPlus theme)

Pass Criteria

Test 5: Complex Markdown Rendering

Purpose

Steps

Expected Elements

Pass Criteria

Test 6: Token Usage Info

Purpose

UI Flow

Steps

Console Evidence

Pass Criteria

Test Files Reference

Troubleshooting

Quick Validation Checklist

Score

Reviews