Menu
Provides step-by-step procedures for validating UI features - theme toggle, new chat, cancel stream, markdown rendering, and token usage info.
Provides deployment commands and troubleshooting for Azure Container Apps. Use when running azd commands, deploying containers, debugging deployment failures, or updating infrastructure in this repository.
Provides research patterns for Azure AI Foundry Agent Service SDK. Use when implementing agent features, looking up SDK methods, finding code samples, or troubleshooting Azure.AI.Projects API usage.
Provides Playwright MCP testing workflow for the web application. Use when testing UI changes, verifying chat functionality, debugging frontend issues, or validating state transitions in the browser.
Provides authentication troubleshooting for MSAL, JWT, and Entra ID. Use when debugging 401 errors, token issues, MSAL configuration problems, or credential failures in this repository.
Provides C# and ASP.NET Core coding standards for this repository. Use when writing or modifying C# code, implementing API endpoints, configuring middleware, or working with authentication in the backend. Use when writing or modifying C# code, implementing API endpoints,
Provides TypeScript and React coding standards for this repository. Use when writing or modifying TypeScript code, creating React components, implementing MSAL authentication, or working with the frontend.
| 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. |
CRITICAL: Load this skill before running any UI validation tests.
| 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 |
Verify the Settings panel opens and theme switching works correctly.
ChatInput toolbar ā Settings button (gear) ā SettingsPanel drawer ā ThemePicker dropdown
http://localhost:5173rgb(32, 31, 30))rgb(255, 255, 255))// No errors should appear
// LocalStorage updated:
localStorage.getItem('ai-foundry-theme') // "Dark", "Light", or "System"
<body> FluentProvider styles update--colorNeutralBackground1, --colorNeutralForeground1Verify the New Chat button clears messages and resets conversation state.
Send message ā Wait for response ā Click New Chat button ā Verify reset
"Hello, testing new chat button"idle)š [timestamp] CHAT_CLEAR
Action: {type: CHAT_CLEAR}
Changes: {
chat.messages.length: N ā 0,
chat.currentConversationId: "conv_xxx" ā null,
chat.status: idle ā idle
}
Verify streaming can be cancelled mid-response.
Send long prompt ā While streaming ā Click Stop button ā Verify cancellation
Write a detailed 500-word essay about the history of software testing methodologies, including unit testing, integration testing, and end-to-end testing.
streamingidleEscape key during streaming ā should also cancelš [timestamp] CHAT_CANCEL_STREAM
Action: {type: CHAT_CANCEL_STREAM}
Changes: {
chat.status: streaming ā idle,
chat.streamingMessageId: "xxx" ā undefined
}
Verify code blocks render with syntax highlighting, line numbers, and copy button.
Send code request ā Wait for response ā Verify code block UI
Write a Python function to calculate fibonacci numbers with proper type hints
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"
]
<div class="codeBlock">
<div class="codeHeader">
<span class="codeLanguage">python</span>
<button>Copy</button>
</div>
<div> <!-- SyntaxHighlighter -->
<!-- Line numbers + highlighted code -->
</div>
</div>
| Element | Color |
|---|---|
Keywords (def, return, if) | Purple/Blue |
| Strings | Orange |
| Comments | Green |
| Function names | Yellow |
| Types | Cyan |
Verify tables, lists, headings, and text formatting render correctly.
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
| 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 |
Verify response footer shows timing, token counts, and expandable usage details.
Send message ā Wait for response ā Verify footer ā Click expand ā Verify breakdown
3575ms)848 tokens)Show token usage details)Input: 799 tokens)Output: 49 tokens)Action: {type: CHAT_STREAM_COMPLETE, usage: Object}
// usage object: { inputTokens, outputTokens, totalTokens }
| 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 |
| 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 |
ā” 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