Use CSS variables and redesign agent pages by pournasserian · Pull Request #1 · pournasserian/agent-framework-sample

pournasserian · 2026-03-11T21:41:44Z

Replace hard-coded colors, sizes and radii with CSS custom properties across layout and nav styles to enable theming and easier customization. Rework NavMenu to use category color variables and simplify prompting category markup. Revamp multiple Agent pages (Agent01–Agent09, Agent11–Agent23, etc.) with a consistent page header, two-column config/result layout, streaming indicators, clearer panels (config, result, log, thread), improved buttons and accessibility cues. Add a local image asset (wwwroot/image.jpg) and a UI design system draft (plans/ui-design-system.md). Minor readme update included. These changes improve visual consistency, theming, and UX for the AgentsWebUI.

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: ca4c63d5ae

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Copilot

Pull request overview

This PR centralizes the AgentsWebUI styling into a token-based design system (app.css) and refactors the Home, navigation, and multiple Agent sample pages to use consistent panels/layouts and category-based theming.

Changes:

Introduces a single, CSS-variable-driven design system in wwwroot/app.css and removes Home.razor.css.
Updates Home + NavMenu to use category theme classes/variables and shared components (hero banner, agent cards, nav headers).
Revamps Agent01–Agent23 pages (and error/not-found pages) with consistent headers, two-column layouts, panels, and streaming/loading indicators; Agent08 switches to a local image asset.

Reviewed changes

Copilot reviewed 33 out of 34 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
readme.md	Rewrites README with new project overview and configuration/run instructions.
plans/ui-design-system.md	Adds a design system spec aligned to the new centralized CSS approach.
0-Agents/AgentsWebUI/wwwroot/app.css	Adds the centralized design system (tokens + shared component/layout classes).
0-Agents/AgentsWebUI/Components/Pages/NotFound.razor	Updates NotFound UI to use page header + panel + alert styles.
0-Agents/AgentsWebUI/Components/Pages/Home.razor.css	Removes scoped Home CSS in favor of centralized `app.css`.
0-Agents/AgentsWebUI/Components/Pages/Home.razor	Refactors hero/category sections to use design-system classes and `btn-cat`.
0-Agents/AgentsWebUI/Components/Pages/Error.razor	Refactors error page to panel-based layout with clearer messaging.
0-Agents/AgentsWebUI/Components/Pages/Agent01.razor	Refactors Agent01 layout into header + config/result panels with streaming indicators.
0-Agents/AgentsWebUI/Components/Pages/Agent02.razor	Refactors Agent02 into header + config + chat-thread UI using shared chat styles.
0-Agents/AgentsWebUI/Components/Pages/Agent03.razor	Refactors Agent03 into consistent config/result/log panels.
0-Agents/AgentsWebUI/Components/Pages/Agent04.razor	Refactors Agent04 into consistent config/result/log panels with approval messaging.
0-Agents/AgentsWebUI/Components/Pages/Agent05.razor	Refactors Agent05 into consistent config/result panels plus structured-output callout.
0-Agents/AgentsWebUI/Components/Pages/Agent06.razor	Refactors Agent06 into consistent config/result/log/thread panels.
0-Agents/AgentsWebUI/Components/Pages/Agent07.razor	Refactors Agent07 into consistent config/result/log/thread panels.
0-Agents/AgentsWebUI/Components/Pages/Agent08.razor	Updates image sample UI and switches image handling toward a local asset.
0-Agents/AgentsWebUI/Components/Pages/Agent09.razor	Refactors Agent09 into consistent panels + MCP callout.
0-Agents/AgentsWebUI/Components/Pages/Agent10.razor	Refactors Agent10 into consistent panels + delegation callout.
0-Agents/AgentsWebUI/Components/Pages/Agent11.razor	Refactors Agent11 into consistent panels + reduction callout.
0-Agents/AgentsWebUI/Components/Pages/Agent12.razor	Refactors Agent12 into consistent panels + Azure-only warning.
0-Agents/AgentsWebUI/Components/Pages/Agent13.razor	Refactors Agent13 into consistent panels + DI/plugins callout.
0-Agents/AgentsWebUI/Components/Pages/Agent14.razor	Refactors Agent14 into consistent panels + middleware pipeline info.
0-Agents/AgentsWebUI/Components/Pages/Agent15.razor	Refactors Agent15 into panel layout and adds an in-page YAML definition block.
0-Agents/AgentsWebUI/Components/Pages/Agent16.razor	Refactors Agent16 into panel layout with reasoning/usage display.
0-Agents/AgentsWebUI/Components/Pages/Agent17.razor	Refactors prompting strategy pages into a consistent panel-based layout.
0-Agents/AgentsWebUI/Components/Pages/Agent18.razor	Refactors prompting strategy pages into a consistent panel-based layout.
0-Agents/AgentsWebUI/Components/Pages/Agent19.razor	Refactors prompting strategy pages into a consistent panel-based layout.
0-Agents/AgentsWebUI/Components/Pages/Agent20.razor	Refactors prompting strategy pages into a consistent panel-based layout.
0-Agents/AgentsWebUI/Components/Pages/Agent21.razor	Refactors prompting strategy pages into a consistent panel-based layout.
0-Agents/AgentsWebUI/Components/Pages/Agent22.razor	Refactors prompting strategy pages into a consistent panel-based layout.
0-Agents/AgentsWebUI/Components/Pages/Agent23.razor	Refactors prompting strategy pages into a consistent panel-based layout.
0-Agents/AgentsWebUI/Components/Layout/NavMenu.razor.css	Migrates key nav styles to CSS variables/tokens with fallbacks.
0-Agents/AgentsWebUI/Components/Layout/NavMenu.razor	Updates nav category headers to use CSS variable-based category colors.
0-Agents/AgentsWebUI/Components/Layout/MainLayout.razor.css	Migrates layout colors/sizes to design-system CSS variables with fallbacks.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

Copilot · 2026-03-11T21:46:16Z

+        // Load image binary from local image file at wwwroot/image.jpg
+
+        var imageData = await File.ReadAllBytesAsync("wwwroot/image.jpg");
+        var imageContent = new DataContent(imageData, "image/jpeg");


File.ReadAllBytesAsync("wwwroot/image.jpg") relies on the current working directory and will break when the app is hosted with a different content root. Prefer resolving the path via IWebHostEnvironment.WebRootPath / WebRootFileProvider (or inject IWebHostEnvironment) and combine with image.jpg.

@copilot open a new pull request to apply changes based on this feedback

Copilot · 2026-03-11T21:46:17Z

+                    <button class="btn" style="background-color:#e83e8c;color:white;" @onclick="OnSubmit" disabled="@isLoading">
+                        @(isLoading ? "Running..." : "🩷 Submit")
+                    </button>
+                    <button class="btn btn-outline-secondary" @onclick="OnSubmitStream" disabled="@isLoading">
+                        @(isLoading ? "Running..." : "📡 Stream")


These prompting-strategy pages are still using a hard-coded inline color (#e83e8c) for the primary action. Since this PR’s goal is to centralize colors via CSS custom properties, consider adding a reusable button class in app.css (e.g., .btn-pink or .btn-prompting using --color-cat-prompting) and switch to that class instead of inline styles.

@copilot open a new pull request to apply changes based on this feedback

Copilot · 2026-03-11T21:46:17Z

        <div class="d-flex align-items-center gap-3 mb-2">
-            <span style="font-size:2.5rem;" aria-hidden="true">🤖</span>
+            <span aria-hidden="true" style="font-size:2.5rem;">🤖</span>
            <h1 class="display-5 fw-bold mb-0">Microsoft Agent Framework Samples</h1>


The hero icon still uses an inline font-size. If the intent is to eliminate hard-coded sizes in markup, consider moving this to a CSS class (e.g., .hero-icon) and/or a design token-based size so it can be themed consistently.

@copilot open a new pull request to apply changes based on this feedback

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Copilot · 2026-03-11T23:46:13Z

@pournasserian I've opened a new pull request, #2, to work on those changes. Once the pull request is ready, I'll request review from you.

Copilot · 2026-03-11T23:46:46Z

@pournasserian I've opened a new pull request, #3, to work on those changes. Once the pull request is ready, I'll request review from you.

Copilot · 2026-03-11T23:47:02Z

@pournasserian I've opened a new pull request, #4, to work on those changes. Once the pull request is ready, I'll request review from you.

Co-authored-by: pournasserian <24959477+pournasserian@users.noreply.github.com>

…KEY fallback Co-authored-by: pournasserian <24959477+pournasserian@users.noreply.github.com>

Fix image path resolution in Agent08 using IWebHostEnvironment

Scope dark `pre` styling to `.code-block` opt-in class

Align API key configuration: OpenRouter:ApiKey with OPEN_ROUTER_API_KEY fallback

Copilot

Pull request overview

Copilot reviewed 34 out of 35 changed files in this pull request and generated 15 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

Copilot · 2026-03-12T00:03:29Z

-                <p class="card-text">@((MarkupString)RenderMarkdown(@response))</p>
+                <div class="mb-3">
+                    <label class="form-label">Instructions</label>
+                    <InputTextArea @bind-Value="instructions" class="form-control instructions-input" style="min-height: 300px;"></InputTextArea>


This inline style="min-height: 300px;" reintroduces per-page styling that the central design system is trying to eliminate. Consider adding a dedicated class/token-driven variant for tall instruction inputs (e.g., .instructions-input-lg) in app.css and use that instead.

Suggested change

<InputTextArea @bind-Value="instructions" class="form-control instructions-input" style="min-height: 300px;"></InputTextArea>

<InputTextArea @bind-Value="instructions" class="form-control instructions-input instructions-input-lg"></InputTextArea>

Copilot · 2026-03-12T00:03:30Z

+                <div class="card-body">
+                    <div class="response-text"> @((MarkupString)RenderMarkdown(response))</div>
+                </div>


The response is rendered as HTML via MarkupString after Markdown-to-HTML conversion. Markdig allows raw HTML by default, so model output that includes HTML/JS (e.g., <script> or onerror=) could be executed in the browser. Consider disabling HTML in the Markdig pipeline or sanitizing the generated HTML before rendering.

Copilot · 2026-03-12T00:03:30Z

+                    }
+                </div>
+                <div class="card-body">
+                    <div class="response-text">@((MarkupString)RenderMarkdown(@response))</div>


The AI response is converted from Markdown to HTML and rendered via MarkupString. Because Markdig allows raw HTML by default, untrusted model output could inject executable HTML/JS. Consider disabling HTML in the Markdig pipeline and/or sanitizing the generated HTML before rendering.

Suggested change

<div class="response-text">@((MarkupString)RenderMarkdown(@response))</div>

<div class="response-text">

@((MarkupString)new Ganss.Xss.HtmlSanitizer().Sanitize(RenderMarkdown(response)))

</div>

Copilot · 2026-03-12T00:03:30Z

+                    <div class="response-text">@((MarkupString)response)</div>
+                </div>


This renders model output as HTML via MarkupString. Since the HTML comes from Markdown.ToHtml(...) and Markdig permits raw HTML by default, this can open an XSS vector if the model returns HTML/JS. Consider disabling HTML in the Markdig pipeline or sanitizing the generated HTML before rendering.

Copilot · 2026-03-12T00:03:31Z

+                <div class="mb-2 small text-muted">
+                    Graph: <code>Input → Decomposer → Node1, Node2 → Synthesizer → Output</code>
+                </div>
+                <button class="btn" style="background-color:#e83e8c;color:white;" @onclick="OnSubmit" disabled="@isLoading">


This button uses an inline hard-coded color (#e83e8c). To support theming via CSS variables, consider moving this into a design-system class (e.g., .btn-prompting using var(--color-cat-prompting)) and removing the inline style.

Suggested change

<button class="btn" style="background-color:#e83e8c;color:white;" @onclick="OnSubmit" disabled="@isLoading">

<button class="btn btn-prompting" @onclick="OnSubmit" disabled="@isLoading">

Copilot · 2026-03-12T00:03:32Z

+                    Tools: <span class="badge badge-primary">SearchWeb</span> <span class="badge badge-success">Calculate</span> <span class="badge badge-primary">LookupFact</span>
+                </div>
+                <div class="d-flex gap-2 flex-wrap">
+                    <button class="btn" style="background-color:#e83e8c;color:white;" @onclick="OnSubmit" disabled="@isLoading">


The Submit button uses an inline hard-coded color (#e83e8c). To keep the prompting category theme centralized and configurable, consider using a design-system class (e.g., .btn-prompting using var(--color-cat-prompting)) instead of inline styling.

Suggested change

<button class="btn" style="background-color:#e83e8c;color:white;" @onclick="OnSubmit" disabled="@isLoading">

<button class="btn btn-prompting" @onclick="OnSubmit" disabled="@isLoading">

Copilot · 2026-03-12T00:03:32Z

+    <div class="hero-banner mb-5">
        <div class="d-flex align-items-center gap-3 mb-2">
-            <span style="font-size:2.5rem;" aria-hidden="true">🤖</span>
+            <span aria-hidden="true" style="font-size:2.5rem;">🤖</span>


There is still an inline style (font-size:2.5rem) in the hero banner. Since this PR centralizes styling in app.css, consider moving this to a reusable class (e.g., .hero-icon) so sizing can be adjusted via tokens without editing Razor markup.

Suggested change

<span aria-hidden="true" style="font-size:2.5rem;">🤖</span>

<span class="hero-icon" aria-hidden="true">🤖</span>

Copilot · 2026-03-12T00:03:32Z

-                    <label class="form-label fw-semibold">Message</label>
-                    <textarea class="form-control" rows="3" @bind="message"></textarea>
+                <div class="d-flex gap-2 flex-wrap">
+                    <button class="btn" style="background-color:#e83e8c;color:white;" @onclick="OnSubmit" disabled="@isLoading">


The primary action button uses an inline hard-coded color (#e83e8c). To keep theming centralized, consider replacing this with a design-system class (e.g., .btn-prompting using var(--color-cat-prompting)), or reuse an existing token-driven button variant instead of inline styles.

Suggested change

<button class="btn" style="background-color:#e83e8c;color:white;" @onclick="OnSubmit" disabled="@isLoading">

<button class="btn btn-primary" @onclick="OnSubmit" disabled="@isLoading">

Copilot · 2026-03-12T00:03:33Z

+                <div class="mb-2 small text-muted">
+                    Spawns 3 branches: <span class="badge badge-primary">Analytical</span> <span class="badge badge-success">Creative</span> <span class="badge badge-primary">Practical</span>
+                </div>
+                <button class="btn" style="background-color:#e83e8c;color:white;" @onclick="OnSubmit" disabled="@isLoading">


This button uses an inline hard-coded color (#e83e8c). Since the PR introduces category color tokens, consider using a token-driven CSS class (e.g., .btn-prompting / .btn-cat with var(--color-cat-prompting)) rather than inline styles to keep theming consistent.

Suggested change

<button class="btn" style="background-color:#e83e8c;color:white;" @onclick="OnSubmit" disabled="@isLoading">

<button class="btn btn-cat btn-prompting" @onclick="OnSubmit" disabled="@isLoading">

Copilot · 2026-03-12T00:03:33Z

+                <div class="card-body">
+                    <div class="response-text">@((MarkupString)RenderMarkdown(@response))</div>
+                </div>


RenderMarkdown(...) output is rendered via MarkupString, which will render any HTML produced by Markdig. Since the markdown comes from an AI response, this can enable XSS if the model outputs raw HTML. Consider disabling HTML in the Markdig pipeline and/or sanitizing the HTML before rendering it.

Copilot · 2026-03-12T00:04:13Z

@pournasserian I've opened a new pull request, #5, to work on those changes. Once the pull request is ready, I'll request review from you.

Copilot · 2026-03-12T00:04:19Z

@pournasserian I've opened a new pull request, #6, to work on those changes. Once the pull request is ready, I'll request review from you.

Copilot · 2026-03-12T00:04:22Z

@pournasserian I've opened a new pull request, #7, to work on those changes. Once the pull request is ready, I'll request review from you.

…gent pages Co-authored-by: pournasserian <24959477+pournasserian@users.noreply.github.com>

…oken Co-authored-by: pournasserian <24959477+pournasserian@users.noreply.github.com>

Move hero icon font-size from inline style to CSS design token

Replace inline pink color with reusable `.btn-prompting` CSS class on prompting agent pages

Fix image path resolution in Agent08 using IWebHostEnvironment

pournasserian requested a review from Copilot March 11, 2026 21:41

pournasserian self-assigned this Mar 11, 2026

pournasserian added the enhancement New feature or request label Mar 11, 2026

Copilot started reviewing on behalf of pournasserian March 11, 2026 21:42 View session

chatgpt-codex-connector Bot reviewed Mar 11, 2026

View reviewed changes

Comment thread 0-Agents/AgentsWebUI/Components/Pages/Agent08.razor Outdated

Copilot AI reviewed Mar 11, 2026

View reviewed changes

pournasserian and others added 2 commits March 11, 2026 18:11

Update 0-Agents/AgentsWebUI/Components/Pages/Agent14.razor

ad9a95e

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Initial plan

0c6a4a5

Copilot AI mentioned this pull request Mar 11, 2026

Align API key configuration: OpenRouter:ApiKey with OPEN_ROUTER_API_KEY fallback #2

Merged

Initial plan

5ecf839

Copilot AI mentioned this pull request Mar 11, 2026

Fix image path resolution in Agent08 using IWebHostEnvironment #3

Merged

Initial plan

b976cd9

Copilot AI mentioned this pull request Mar 11, 2026

Scope dark pre styling to .code-block opt-in class #4

Merged

Copilot AI and others added 6 commits March 11, 2026 23:48

Fix image path resolution using IWebHostEnvironment in Agent08.razor

1fe4341

Co-authored-by: pournasserian <24959477+pournasserian@users.noreply.github.com>

Scope global pre dark styling to .code-block class

60dbb2e

Co-authored-by: pournasserian <24959477+pournasserian@users.noreply.github.com>

Align API key config: support OpenRouter:ApiKey with OPEN_ROUTER_API_…

6b2da16

…KEY fallback Co-authored-by: pournasserian <24959477+pournasserian@users.noreply.github.com>

Merge pull request #3 from pournasserian/copilot/sub-pr-1-again

247dd72

Fix image path resolution in Agent08 using IWebHostEnvironment

Merge pull request #4 from pournasserian/copilot/sub-pr-1-another-one

26a04de

Scope dark `pre` styling to `.code-block` opt-in class

Merge pull request #2 from pournasserian/copilot/sub-pr-1

12784a3

Align API key configuration: OpenRouter:ApiKey with OPEN_ROUTER_API_KEY fallback

pournasserian requested a review from Copilot March 11, 2026 23:57

Copilot started reviewing on behalf of pournasserian March 11, 2026 23:57 View session

Copilot AI reviewed Mar 12, 2026

View reviewed changes

Initial plan

080ff1d

Copilot AI mentioned this pull request Mar 12, 2026

Fix image path resolution in Agent08 using IWebHostEnvironment #5

Merged

Initial plan

27b59fb

Copilot AI mentioned this pull request Mar 12, 2026

Replace inline pink color with reusable .btn-prompting CSS class on prompting agent pages #6

Merged

Initial plan

03318cb

Copilot AI mentioned this pull request Mar 12, 2026

Move hero icon font-size from inline style to CSS design token #7

Merged

Copilot AI and others added 5 commits March 12, 2026 00:06

Add .btn-prompting CSS class and replace inline styles in prompting a…

9d42064

…gent pages Co-authored-by: pournasserian <24959477+pournasserian@users.noreply.github.com>

Move hero icon font-size from inline style to CSS class with design t…

9d608e9

…oken Co-authored-by: pournasserian <24959477+pournasserian@users.noreply.github.com>

Merge pull request #7 from pournasserian/copilot/sub-pr-1-another-one

34266e1

Move hero icon font-size from inline style to CSS design token

Merge pull request #6 from pournasserian/copilot/sub-pr-1-again

e8d79f8

Replace inline pink color with reusable `.btn-prompting` CSS class on prompting agent pages

Merge pull request #5 from pournasserian/copilot/sub-pr-1

c18522a

Fix image path resolution in Agent08 using IWebHostEnvironment

pournasserian merged commit 5d2525c into master Mar 12, 2026

pournasserian deleted the ui-enhancement branch March 12, 2026 00:45

	<InputTextArea @bind-Value="instructions" class="form-control instructions-input" style="min-height: 300px;"></InputTextArea>
	<InputTextArea @bind-Value="instructions" class="form-control instructions-input instructions-input-lg"></InputTextArea>

		<div class="response-text">@((MarkupString)response)</div>
		</div>

	<button class="btn" style="background-color:#e83e8c;color:white;" @onclick="OnSubmit" disabled="@isLoading">
	<button class="btn btn-prompting" @onclick="OnSubmit" disabled="@isLoading">

	<span aria-hidden="true" style="font-size:2.5rem;">🤖</span>
	<span class="hero-icon" aria-hidden="true">🤖</span>

	<button class="btn" style="background-color:#e83e8c;color:white;" @onclick="OnSubmit" disabled="@isLoading">
	<button class="btn btn-primary" @onclick="OnSubmit" disabled="@isLoading">

	<button class="btn" style="background-color:#e83e8c;color:white;" @onclick="OnSubmit" disabled="@isLoading">
	<button class="btn btn-cat btn-prompting" @onclick="OnSubmit" disabled="@isLoading">

Conversation

pournasserian commented Mar 11, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Copilot AI Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

pournasserian Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

pournasserian Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

pournasserian Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

pournasserian Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented Mar 11, 2026

Uh oh!

Copilot AI commented Mar 11, 2026

Uh oh!

Copilot AI commented Mar 11, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented Mar 12, 2026

Uh oh!

Copilot AI commented Mar 12, 2026