Use CSS variables and redesign agent pages

0-Agents/AgentsWebUI/Components/Layout/MainLayout.razor.css

@@ -9,21 +9,21 @@ main {
 }
 
 .sidebar {
-    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+    background-image: linear-gradient(180deg, var(--color-sidebar-start, #052767) 0%, var(--color-sidebar-end, #3a0647) 70%);
 }
 
 .top-row {
-    background-color: #f7f7f7;
-    border-bottom: 1px solid #d6d5d5;
+    background-color: var(--color-surface-alt, #f7f7f7);
+    border-bottom: 1px solid var(--color-border, #d6d5d5);
     justify-content: flex-end;
-    height: 3.5rem;
+    height: var(--toprow-height, 3.5rem);
     display: flex;
     align-items: center;
 }
 
     .top-row ::deep a, .top-row ::deep .btn-link {
         white-space: nowrap;
-        margin-left: 1.5rem;
+        margin-left: var(--space-6, 1.5rem);
         text-decoration: none;
     }
 
@@ -52,7 +52,7 @@ main {
     }
 
     .sidebar {
-        width: 250px;
+        width: var(--sidebar-width, 250px);
         height: 100vh;
         position: sticky;
         top: 0;

0-Agents/AgentsWebUI/Components/Layout/NavMenu.razor

@@ -20,7 +20,7 @@
 
         @* 🚀 Basics *@
         <div class="nav-item px-3">
-            <div class="nav-category-header" style="color: #0d6efd;">🚀 BASICS</div>
+            <div class="nav-category-header" style="color: var(--color-cat-basics);">🚀 BASICS</div>
             <NavLink class="nav-link" href="agent01">Basic</NavLink>
             <NavLink class="nav-link" href="agent02">Threads</NavLink>
             <NavLink class="nav-link" href="agent05">Structured Output</NavLink>
@@ -30,7 +30,7 @@
 
         @* 🔧 Functions & Tools *@
         <div class="nav-item px-3">
-            <div class="nav-category-header" style="color: #198754;">🔧 FUNCTIONS &amp; TOOLS</div>
+            <div class="nav-category-header" style="color: var(--color-cat-functions);">🔧 FUNCTIONS &amp; TOOLS</div>
             <NavLink class="nav-link" href="agent03">Functions/Tools</NavLink>
             <NavLink class="nav-link" href="agent04">Function Approval</NavLink>
             <NavLink class="nav-link" href="agent10">Agent as Function</NavLink>
@@ -41,7 +41,7 @@
 
         @* 💾 Storage & Persistence *@
         <div class="nav-item px-3">
-            <div class="nav-category-header" style="color: #087990;">💾 STORAGE &amp; PERSISTENCE</div>
+            <div class="nav-category-header" style="color: var(--color-cat-storage);">💾 STORAGE &amp; PERSISTENCE</div>
             <NavLink class="nav-link" href="agent06">Persisted Conversation</NavLink>
             <NavLink class="nav-link" href="agent07">Custom Thread Storage</NavLink>
             <NavLink class="nav-link" href="agent11">Chat Reduction</NavLink>
@@ -51,7 +51,7 @@
 
         @* 🌐 Multimodal & External *@
         <div class="nav-item px-3">
-            <div class="nav-category-header" style="color: #6f42c1;">🌐 MULTIMODAL &amp; EXTERNAL</div>
+            <div class="nav-category-header" style="color: var(--color-cat-multimodal);">🌐 MULTIMODAL &amp; EXTERNAL</div>
             <NavLink class="nav-link" href="agent08">Using Image</NavLink>
             <NavLink class="nav-link" href="agent09">Using MCP Server</NavLink>
             <NavLink class="nav-link" href="agent12">Background Responses</NavLink>
@@ -61,47 +61,35 @@
 
         @* ⚡ Advanced Features *@
         <div class="nav-item px-3">
-            <div class="nav-category-header" style="color: #fd7e14;">⚡ ADVANCED FEATURES</div>
+            <div class="nav-category-header" style="color: var(--color-cat-advanced);">⚡ ADVANCED FEATURES</div>
             <NavLink class="nav-link" href="agent14">Middleware</NavLink>
             <NavLink class="nav-link" href="agent15">Declarative Agent</NavLink>
             <NavLink class="nav-link" href="agent16">Reasoning</NavLink>
         </div>
 
         <hr class="nav-divider" />
-        <div class="nav-category-header" style="color: #e83e8c;">
-            <span>🧠</span> PROMPTING STRATEGIES
-        </div>
+
+        @* 🧠 Prompting Strategies *@
         <div class="nav-item px-3">
+            <div class="nav-category-header" style="color: var(--color-cat-prompting);">🧠 PROMPTING STRATEGIES</div>
             <NavLink class="nav-link" href="agent17">
                 <span class="nav-icon">🔗</span> Chain-of-Thought
             </NavLink>
-        </div>
-        <div class="nav-item px-3">
             <NavLink class="nav-link" href="agent18">
                 <span class="nav-icon">🌳</span> Tree of Thoughts
             </NavLink>
-        </div>
-        <div class="nav-item px-3">
             <NavLink class="nav-link" href="agent19">
                 <span class="nav-icon">🕸️</span> Graph of Thoughts
             </NavLink>
-        </div>
-        <div class="nav-item px-3">
             <NavLink class="nav-link" href="agent20">
                 <span class="nav-icon">💻</span> Program of Thoughts
             </NavLink>
-        </div>
-        <div class="nav-item px-3">
             <NavLink class="nav-link" href="agent21">
                 <span class="nav-icon">⚡</span> ReAct
             </NavLink>
-        </div>
-        <div class="nav-item px-3">
             <NavLink class="nav-link" href="agent22">
                 <span class="nav-icon">🪞</span> Reflection
             </NavLink>
-        </div>
-        <div class="nav-item px-3">
             <NavLink class="nav-link" href="agent23">
                 <span class="nav-icon">✨</span> Self-Refine
             </NavLink>

0-Agents/AgentsWebUI/Components/Layout/NavMenu.razor.css

@@ -16,12 +16,13 @@
 }
 
 .top-row {
-    min-height: 3.5rem;
+    min-height: var(--toprow-height, 3.5rem);
     background-color: rgba(0,0,0,0.4);
 }
 
 .navbar-brand {
-    font-size: 1.1rem;
+    font-size: var(--font-size-lg, 1.1rem);
+    font-weight: var(--font-weight-semibold, 600);
 }
 
 .bi {
@@ -47,23 +48,23 @@
 }
 
 .nav-item {
-    font-size: 0.9rem;
-    padding-bottom: 0.5rem;
+    font-size: var(--font-size-sm, 0.875rem);
+    padding-bottom: var(--space-2, 0.5rem);
 }
 
     .nav-item:first-of-type {
-        padding-top: 1rem;
+        padding-top: var(--space-4, 1rem);
     }
 
     .nav-item:last-of-type {
-        padding-bottom: 1rem;
+        padding-bottom: var(--space-4, 1rem);
     }
 
     .nav-item ::deep .nav-link {
         color: #d7d7d7;
         background: none;
         border: none;
-        border-radius: 4px;
+        border-radius: var(--radius-md, 4px);
         height: 3rem;
         display: flex;
         align-items: center;
@@ -99,20 +100,20 @@
         display: block;
 
         /* Allow sidebar to scroll for tall menus */
-        height: calc(100vh - 3.5rem);
+        height: calc(100vh - var(--toprow-height, 3.5rem));
         overflow-y: auto;
     }
 }
 
 /* ─── NavMenu Category Headers ─────────────────────────────────────────── */
 
 .nav-category-header {
-    font-size: 0.7rem;
-    font-weight: 700;
+    font-size: var(--font-size-xs, 0.7rem);
+    font-weight: var(--font-weight-bold, 700);
     letter-spacing: 0.08em;
     text-transform: uppercase;
-    padding: 0.5rem 0 0.25rem 0;
-    /* colour is set inline per category */
+    padding: var(--space-2, 0.5rem) 0 var(--space-1, 0.25rem) 0;
+    /* color is set inline per category using CSS variable: style="color: var(--color-cat-*)" */
     pointer-events: none;
     user-select: none;
 }

0-Agents/AgentsWebUI/Components/Pages/Agent01.razor

@@ -1,36 +1,76 @@
 @page "/agent01"
 @inject IConfiguration Configuration
 
-<PageTitle>Agent 01</PageTitle>
+<PageTitle>Agent 01 – Basic Agent</PageTitle>
 
-<h1>Agent 01 - Basic Agent</h1>
-
-<p>Demonstrates basic AI agent setup allowing users to configure instructions and messages, with Submit and Stream buttons for synchronous and real-time responses using OpenAI GPT-4.1-nano via OpenRouter.</p>
-
-<div class="form-group mb-3">
-    <label>Instructions</label>
-    <InputTextArea @bind-Value="instructions" class="form-control"></InputTextArea>
-</div>
-<div class="form-group mb-3">
-    <label>Message</label>
-    <InputTextArea @bind-Value="message" class="form-control"></InputTextArea>
-</div>
-<div class="form-group mb-3">
-    <button type="submit" class="btn btn-primary" disabled="@isLoading" onclick="@OnSubmit">Submit</button>
-    <button type="submit" class="btn btn-primary" disabled="@isLoading" onclick="@OnSubmitStream">Stream</button>
+<div class="page-header">
+    <h1 class="page-title">🤖 Agent 01 – Basic Agent</h1>
+    <p class="page-subtitle">Demonstrates basic AI agent setup allowing users to configure instructions and messages, with Submit and Stream buttons for synchronous and real-time responses using OpenAI GPT-4.1-nano via OpenRouter.</p>
 </div>
 
-@if (!string.IsNullOrEmpty(response))
-{
+<div class="agent-layout layout-4-8">
+
+    <!-- Left: Config Panel -->
     <div>
-        <div class="mb-3 card">
+        <div class="card panel panel-config mb-4">
+            <div class="card-header">⚙️ Configuration</div>
             <div class="card-body">
-                <h5 class="card-title">Response</h5>
-                <p class="card-text">@response</p>
+                <div class="mb-3">
+                    <label class="form-label">Instructions</label>
+                    <InputTextArea @bind-Value="instructions" class="form-control instructions-input"></InputTextArea>
+                </div>
+                <div class="mb-3">
+                    <label class="form-label">Message</label>
+                    <InputTextArea @bind-Value="message" class="form-control message-input"></InputTextArea>
+                </div>
+                <div class="d-flex gap-2 flex-wrap">
+                    <button class="btn btn-primary" disabled="@isLoading" @onclick="OnSubmit">
+                        @(isLoading ? "Running..." : "🚀 Submit")
+                    </button>
+                    <button class="btn btn-outline-primary" disabled="@isLoading" @onclick="OnSubmitStream">
+                        @(isLoading ? "Streaming..." : "📡 Stream")
+                    </button>
+                </div>
             </div>
         </div>
     </div>
-}
+
+    <!-- Right: Result Panel -->
+    <div>
+        @if (isLoading && string.IsNullOrEmpty(response))
+        {
+            <div class="card panel panel-result mb-4">
+                <div class="card-header">💬 Response</div>
+                <div class="card-body">
+                    <p class="response-pending">
+                        <span class="streaming-indicator" aria-label="Processing">
+                            <span></span><span></span><span></span>
+                        </span>
+                        Waiting for response...
+                    </p>
+                </div>
+            </div>
+        }
+        @if (!string.IsNullOrEmpty(response))
+        {
+            <div class="card panel panel-result mb-4">
+                <div class="card-header">
+                    💬 Response
+                    @if (isLoading)
+                    {
+                        <span class="streaming-indicator ms-2" aria-label="Streaming">
+                            <span></span><span></span><span></span>
+                        </span>
+                    }
+                </div>
+                <div class="card-body">
+                    <div class="response-text">@response</div>
+                </div>
+            </div>
+        }
+    </div>
+
+</div>
 
 @code {
     private string message = "Tell me a long joke about a pirate. It should be at least two pargraphs.";
@@ -44,8 +84,8 @@
 
     protected override Task OnInitializedAsync()
     {
-        var apiKey = Configuration["OPEN_ROUTER_API_KEY"] ??
-            throw new InvalidOperationException("OPEN_ROUTER_API_KEY is not set in.");
+        var apiKey = Configuration["OpenRouter:ApiKey"] ?? Configuration["OPEN_ROUTER_API_KEY"] ??
+            throw new InvalidOperationException("OpenRouter:ApiKey (or OPEN_ROUTER_API_KEY) is not configured.");
 
         var openAIClientOptions = new OpenAIClientOptions
         {