cacheplane · blove · May 15, 2026 · May 15, 2026 · May 15, 2026 · May 15, 2026
diff --git a/cockpit/chat/a2ui/angular/src/app/a2ui.component.ts b/cockpit/chat/a2ui/angular/src/app/a2ui.component.ts
@@ -1,14 +1,19 @@
 // SPDX-License-Identifier: MIT
 import { Component } from '@angular/core';
 import { ChatComponent, a2uiBasicCatalog } from '@ngaf/chat';
+import { ExampleChatLayoutComponent } from '@ngaf/example-layouts';
 import { agent } from '@ngaf/langgraph';
 import { environment } from '../environments/environment';
 
 @Component({
   selector: 'app-a2ui',
   standalone: true,
-  imports: [ChatComponent],
-  template: `<chat [agent]="agent" [views]="catalog" class="block h-screen" />`,
+  imports: [ChatComponent, ExampleChatLayoutComponent],
+  template: `
+    <example-chat-layout>
+      <chat main [agent]="agent" [views]="catalog" class="flex-1 min-w-0" />
+    </example-chat-layout>
+  `,
 })
 export class A2uiComponent {
   protected readonly agent = agent({

diff --git a/cockpit/chat/a2ui/angular/src/index.html b/cockpit/chat/a2ui/angular/src/index.html
@@ -5,9 +5,8 @@
   <title>Chat A2UI — Angular</title>
   <base href="/" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body class="bg-gray-950 text-gray-100 h-screen">
+<body>
   <app-a2ui></app-a2ui>
 </body>
 </html>
diff --git a/cockpit/chat/a2ui/angular/src/styles.css b/cockpit/chat/a2ui/angular/src/styles.css
@@ -1 +1,9 @@
-/* Global styles for the a2ui capability demo */
+@import "@ngaf/example-layouts/theme.css";
+
+html, body {
+  height: 100%;
+  margin: 0;
+  background: var(--ngaf-chat-bg);
+  color: var(--ngaf-chat-text);
+  font-family: var(--ngaf-chat-font-family);
+}
diff --git a/cockpit/chat/debug/angular/src/index.html b/cockpit/chat/debug/angular/src/index.html
@@ -5,9 +5,8 @@
   <title>Chat Debug — Angular</title>
   <base href="/" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body class="bg-gray-950 text-gray-100 h-screen">
+<body>
   <app-debug></app-debug>
 </body>
 </html>
diff --git a/cockpit/chat/debug/angular/src/styles.css b/cockpit/chat/debug/angular/src/styles.css
@@ -1 +1,9 @@
-/* Global styles for the debug capability demo */
+@import "@ngaf/example-layouts/theme.css";
+
+html, body {
+  height: 100%;
+  margin: 0;
+  background: var(--ngaf-chat-bg);
+  color: var(--ngaf-chat-text);
+  font-family: var(--ngaf-chat-font-family);
+}
diff --git a/cockpit/chat/generative-ui/angular/src/index.html b/cockpit/chat/generative-ui/angular/src/index.html
@@ -5,9 +5,8 @@
   <title>Chat Generative UI — Angular</title>
   <base href="/" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body class="bg-gray-950 text-gray-100 h-screen">
+<body>
   <app-generative-ui></app-generative-ui>
 </body>
 </html>
diff --git a/cockpit/chat/generative-ui/angular/src/styles.css b/cockpit/chat/generative-ui/angular/src/styles.css
@@ -1 +1,9 @@
-/* Global styles for the generative-ui capability demo */
+@import "@ngaf/example-layouts/theme.css";
+
+html, body {
+  height: 100%;
+  margin: 0;
+  background: var(--ngaf-chat-bg);
+  color: var(--ngaf-chat-text);
+  font-family: var(--ngaf-chat-font-family);
+}
diff --git a/cockpit/chat/input/angular/src/app/input.component.ts b/cockpit/chat/input/angular/src/app/input.component.ts
@@ -18,29 +18,29 @@ import { environment } from '../environments/environment';
   template: `
     <example-chat-layout sidebarWidth="w-72">
       <div main class="flex-1 flex flex-col min-w-0">
-        <header class="px-4 py-3 border-b" style="border-color: var(--ngaf-chat-separator, #333); background: var(--ngaf-chat-bg, #171717);">
-          <h1 class="text-sm font-semibold" style="color: var(--ngaf-chat-text, #e0e0e0);">Chat Input Demo</h1>
+        <header class="px-4 py-3 border-b" style="border-color: var(--ngaf-chat-separator); background: var(--ngaf-chat-bg);">
+          <h1 class="text-sm font-semibold" style="color: var(--ngaf-chat-text);">Chat Input Demo</h1>
         </header>
         <div class="flex-1 overflow-y-auto">
           <chat-message-list [agent]="agent" />
         </div>
-        <div class="px-4 py-2" style="background: var(--ngaf-chat-bg, #171717);">
+        <div class="px-4 py-2" style="background: var(--ngaf-chat-bg);">
           <chat-input [agent]="agent" placeholder="Try typing here..." (send)="submitMessage($event)" />
         </div>
       </div>
-      <div sidebar class="p-4 space-y-4" style="background: var(--ngaf-chat-bg, #171717); color: var(--ngaf-chat-text, #e0e0e0);">
+      <div sidebar class="p-4 space-y-4" style="background: var(--ngaf-chat-bg); color: var(--ngaf-chat-text);">
         <h3 class="text-xs font-semibold uppercase tracking-wide"
-            style="color: var(--ngaf-chat-text-muted, #777);">Input State</h3>
-        <dl class="text-xs space-y-2" style="color: var(--ngaf-chat-text-muted, #777);">
+            style="color: var(--ngaf-chat-text-muted);">Input State</h3>
+        <dl class="text-xs space-y-2" style="color: var(--ngaf-chat-text-muted);">
           <dt class="font-semibold">Stream Status</dt>
           <dd class="font-mono">{{ streamStatus() }}</dd>
           <dt class="font-semibold">Is Loading</dt>
           <dd class="font-mono">{{ isLoading() }}</dd>
         </dl>
         <div class="mt-4">
           <h4 class="text-xs font-semibold uppercase tracking-wide mb-2"
-              style="color: var(--ngaf-chat-text-muted, #777);">Features</h4>
-          <ul class="text-xs space-y-1 list-disc list-inside" style="color: var(--ngaf-chat-text-muted, #777);">
+              style="color: var(--ngaf-chat-text-muted);">Features</h4>
+          <ul class="text-xs space-y-1 list-disc list-inside" style="color: var(--ngaf-chat-text-muted);">
             <li>Custom placeholder text</li>
             <li>Enter to send</li>
             <li>Shift+Enter for newline</li>

diff --git a/cockpit/chat/input/angular/src/index.html b/cockpit/chat/input/angular/src/index.html
@@ -5,9 +5,8 @@
   <title>Chat Input — Angular</title>
   <base href="/" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body class="bg-gray-950 text-gray-100 h-screen">
+<body>
   <app-input></app-input>
 </body>
 </html>
diff --git a/cockpit/chat/input/angular/src/styles.css b/cockpit/chat/input/angular/src/styles.css
@@ -1 +1,9 @@
-/* Global styles for the input capability demo */
+@import "@ngaf/example-layouts/theme.css";
+
+html, body {
+  height: 100%;
+  margin: 0;
+  background: var(--ngaf-chat-bg);
+  color: var(--ngaf-chat-text);
+  font-family: var(--ngaf-chat-font-family);
+}
diff --git a/cockpit/chat/interrupts/angular/src/app/interrupts.component.ts b/cockpit/chat/interrupts/angular/src/app/interrupts.component.ts
@@ -19,14 +19,14 @@ import { environment } from '../environments/environment';
   template: `
     <example-chat-layout sidebarWidth="w-80">
       <chat main [agent]="agent" class="flex-1 min-w-0" />
-      <div sidebar class="p-4 space-y-4" style="background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
+      <div sidebar class="p-4 space-y-4" style="background: var(--ngaf-chat-bg); color: var(--ngaf-chat-text);">
         <h3 class="text-xs font-semibold uppercase tracking-wide"
-            style="color: var(--chat-text-muted, #777);">Interrupt Panel</h3>
+            style="color: var(--ngaf-chat-text-muted);">Interrupt Panel</h3>
         <chat-interrupt-panel [agent]="agent" />
         <div class="mt-4">
           <h4 class="text-xs font-semibold uppercase tracking-wide mb-2"
-              style="color: var(--chat-text-muted, #777);">Stream Status</h4>
-          <p class="text-xs font-mono" style="color: var(--chat-text-muted, #777);">{{ streamStatus() }}</p>
+              style="color: var(--ngaf-chat-text-muted);">Stream Status</h4>
+          <p class="text-xs font-mono" style="color: var(--ngaf-chat-text-muted);">{{ streamStatus() }}</p>
         </div>
       </div>
     </example-chat-layout>

diff --git a/cockpit/chat/interrupts/angular/src/index.html b/cockpit/chat/interrupts/angular/src/index.html
@@ -5,9 +5,8 @@
   <title>Chat Interrupts — Angular</title>
   <base href="/" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body class="bg-gray-950 text-gray-100 h-screen">
+<body>
   <app-interrupts></app-interrupts>
 </body>
 </html>
diff --git a/cockpit/chat/interrupts/angular/src/styles.css b/cockpit/chat/interrupts/angular/src/styles.css
@@ -1 +1,9 @@
-/* Global styles for the interrupts capability demo */
+@import "@ngaf/example-layouts/theme.css";
+
+html, body {
+  height: 100%;
+  margin: 0;
+  background: var(--ngaf-chat-bg);
+  color: var(--ngaf-chat-text);
+  font-family: var(--ngaf-chat-font-family);
+}
diff --git a/cockpit/chat/messages/angular/src/app/messages.component.ts b/cockpit/chat/messages/angular/src/app/messages.component.ts
@@ -23,21 +23,21 @@ import { environment } from '../environments/environment';
   template: `
     <example-chat-layout sidebarWidth="w-72">
       <div main class="flex-1 flex flex-col min-w-0">
-        <header class="px-4 py-3 border-b" style="border-color: var(--ngaf-chat-separator, #333); background: var(--ngaf-chat-bg, #171717);">
-          <h1 class="text-sm font-semibold" style="color: var(--ngaf-chat-text, #e0e0e0);">Chat Messages Primitives</h1>
+        <header class="px-4 py-3 border-b" style="border-color: var(--ngaf-chat-separator); background: var(--ngaf-chat-bg);">
+          <h1 class="text-sm font-semibold" style="color: var(--ngaf-chat-text);">Chat Messages Primitives</h1>
         </header>
         <div class="flex-1 overflow-y-auto">
           <chat-message-list [agent]="agent" />
         </div>
-        <div class="px-4 py-2" style="background: var(--ngaf-chat-bg, #171717);">
+        <div class="px-4 py-2" style="background: var(--ngaf-chat-bg);">
           <chat-typing-indicator [agent]="agent" />
           <chat-input [agent]="agent" (send)="submitMessage($event)" />
         </div>
       </div>
-      <div sidebar class="p-4 space-y-4" style="background: var(--ngaf-chat-bg, #171717); color: var(--ngaf-chat-text, #e0e0e0);">
+      <div sidebar class="p-4 space-y-4" style="background: var(--ngaf-chat-bg); color: var(--ngaf-chat-text);">
         <h3 class="text-xs font-semibold uppercase tracking-wide"
-            style="color: var(--ngaf-chat-text-muted, #777);">Primitives Used</h3>
-        <ul class="text-xs space-y-2" style="color: var(--ngaf-chat-text-muted, #777);">
+            style="color: var(--ngaf-chat-text-muted);">Primitives Used</h3>
+        <ul class="text-xs space-y-2" style="color: var(--ngaf-chat-text-muted);">
           <li>ChatMessageListComponent</li>
           <li>ChatInputComponent</li>
           <li>ChatTypingIndicatorComponent</li>

diff --git a/cockpit/chat/messages/angular/src/index.html b/cockpit/chat/messages/angular/src/index.html
@@ -5,9 +5,8 @@
   <title>Chat Messages — Angular</title>
   <base href="/" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body class="bg-gray-950 text-gray-100 h-screen">
+<body>
   <app-messages></app-messages>
 </body>
 </html>
diff --git a/cockpit/chat/messages/angular/src/styles.css b/cockpit/chat/messages/angular/src/styles.css
@@ -1 +1,9 @@
-/* Global styles for the messages capability demo */
+@import "@ngaf/example-layouts/theme.css";
+
+html, body {
+  height: 100%;
+  margin: 0;
+  background: var(--ngaf-chat-bg);
+  color: var(--ngaf-chat-text);
+  font-family: var(--ngaf-chat-font-family);
+}
diff --git a/cockpit/chat/subagents/angular/src/app/subagents.component.ts b/cockpit/chat/subagents/angular/src/app/subagents.component.ts
@@ -21,14 +21,14 @@ import { environment } from '../environments/environment';
   template: `
     <example-chat-layout sidebarWidth="w-80">
       <chat main [agent]="agent" class="flex-1 min-w-0" />
-      <div sidebar class="p-4 space-y-4" style="background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
+      <div sidebar class="p-4 space-y-4" style="background: var(--ngaf-chat-bg); color: var(--ngaf-chat-text);">
         <h3 class="text-xs font-semibold uppercase tracking-wide"
-            style="color: var(--chat-text-muted, #777);">Active Subagents</h3>
+            style="color: var(--ngaf-chat-text-muted);">Active Subagents</h3>
         <chat-subagents [agent]="agent" />
         <div class="mt-4">
           <h4 class="text-xs font-semibold uppercase tracking-wide mb-2"
-              style="color: var(--chat-text-muted, #777);">Agent Pipeline</h4>
-          <ol class="text-xs space-y-1 list-decimal list-inside" style="color: var(--chat-text-muted, #777);">
+              style="color: var(--ngaf-chat-text-muted);">Agent Pipeline</h4>
+          <ol class="text-xs space-y-1 list-decimal list-inside" style="color: var(--ngaf-chat-text-muted);">
             <li>Orchestrator</li>
             <li>Research Agent</li>
             <li>Analysis Agent</li>

diff --git a/cockpit/chat/subagents/angular/src/index.html b/cockpit/chat/subagents/angular/src/index.html
@@ -5,9 +5,8 @@
   <title>Chat Subagents — Angular</title>
   <base href="/" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body class="bg-gray-950 text-gray-100 h-screen">
+<body>
   <app-subagents></app-subagents>
 </body>
 </html>
diff --git a/cockpit/chat/subagents/angular/src/styles.css b/cockpit/chat/subagents/angular/src/styles.css
@@ -1 +1,9 @@
-/* Global styles for the subagents capability demo */
+@import "@ngaf/example-layouts/theme.css";
+
+html, body {
+  height: 100%;
+  margin: 0;
+  background: var(--ngaf-chat-bg);
+  color: var(--ngaf-chat-text);
+  font-family: var(--ngaf-chat-font-family);
+}
diff --git a/cockpit/chat/theming/angular/src/app/theming.component.ts b/cockpit/chat/theming/angular/src/app/theming.component.ts
@@ -53,24 +53,24 @@ const THEMES: Record<string, Record<string, string>> = {
   template: `
     <example-chat-layout sidebarWidth="w-72">
       <chat main [agent]="agent" class="flex-1 min-w-0" />
-      <div sidebar class="p-4 space-y-4" style="background: var(--ngaf-chat-bg, #171717); color: var(--ngaf-chat-text, #e0e0e0);">
+      <div sidebar class="p-4 space-y-4" style="background: var(--ngaf-chat-bg); color: var(--ngaf-chat-text);">
         <h3 class="text-xs font-semibold uppercase tracking-wide"
-            style="color: var(--ngaf-chat-text-muted, #777);">Theme Picker</h3>
+            style="color: var(--ngaf-chat-text-muted);">Theme Picker</h3>
         <div class="space-y-2">
           @for (name of themeNames; track name) {
             <button
               class="w-full px-3 py-2 rounded text-xs font-medium transition-colors"
-              [style.background]="activeTheme() === name ? 'var(--ngaf-chat-accent, #3b82f6)' : 'var(--ngaf-chat-surface-alt, #222)'"
-              [style.color]="activeTheme() === name ? '#fff' : 'var(--ngaf-chat-text, #e0e0e0)'"
+              [style.background]="activeTheme() === name ? 'var(--ngaf-chat-accent)' : 'var(--ngaf-chat-surface-alt)'"
+              [style.color]="activeTheme() === name ? '#fff' : 'var(--ngaf-chat-text)'"
               (click)="setTheme(name)">
               {{ name | titlecase }}
             </button>
           }
         </div>
         <div class="mt-4">
           <h4 class="text-xs font-semibold uppercase tracking-wide mb-2"
-              style="color: var(--ngaf-chat-text-muted, #777);">CSS Variables</h4>
-          <ul class="text-xs space-y-1 font-mono" style="color: var(--ngaf-chat-text-muted, #777);">
+              style="color: var(--ngaf-chat-text-muted);">CSS Variables</h4>
+          <ul class="text-xs space-y-1 font-mono" style="color: var(--ngaf-chat-text-muted);">
             <li>--ngaf-chat-bg</li>
             <li>--ngaf-chat-text</li>
             <li>--ngaf-chat-accent</li>

diff --git a/cockpit/chat/theming/angular/src/index.html b/cockpit/chat/theming/angular/src/index.html
@@ -5,9 +5,8 @@
   <title>Chat Theming — Angular</title>
   <base href="/" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body class="bg-gray-950 text-gray-100 h-screen">
+<body>
   <app-theming></app-theming>
 </body>
 </html>
diff --git a/cockpit/chat/theming/angular/src/styles.css b/cockpit/chat/theming/angular/src/styles.css
@@ -1 +1,9 @@
-/* Global styles for the theming capability demo */
+@import "@ngaf/example-layouts/theme.css";
+
+html, body {
+  height: 100%;
+  margin: 0;
+  background: var(--ngaf-chat-bg);
+  color: var(--ngaf-chat-text);
+  font-family: var(--ngaf-chat-font-family);
+}
diff --git a/cockpit/chat/threads/angular/src/app/threads.component.ts b/cockpit/chat/threads/angular/src/app/threads.component.ts
@@ -17,9 +17,9 @@ import { environment } from '../environments/environment';
     <example-chat-layout sidebarPosition="left" sidebarWidth="w-64">
       <chat main [agent]="agent" [threads]="threads()" [activeThreadId]="activeThreadId()" (threadSelected)="onThreadSelected($event)" class="flex-1 min-w-0" />
       <div sidebar class="p-4 space-y-4"
-           style="background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
+           style="background: var(--ngaf-chat-bg); color: var(--ngaf-chat-text);">
         <h3 class="text-xs font-semibold uppercase tracking-wide"
-            style="color: var(--chat-text-muted, #777);">Threads</h3>
+            style="color: var(--ngaf-chat-text-muted);">Threads</h3>
         <chat-thread-list
           [threads]="threads()"
           [activeThreadId]="activeThreadId()"

diff --git a/cockpit/chat/threads/angular/src/index.html b/cockpit/chat/threads/angular/src/index.html
@@ -5,9 +5,8 @@
   <title>Chat Threads — Angular</title>
   <base href="/" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body class="bg-gray-950 text-gray-100 h-screen">
+<body class="h-screen">
   <app-threads></app-threads>
 </body>
 </html>
diff --git a/cockpit/chat/threads/angular/src/styles.css b/cockpit/chat/threads/angular/src/styles.css
@@ -1 +1,9 @@
-/* Global styles for the threads capability demo */
+@import "@ngaf/example-layouts/theme.css";
+
+html, body {
+  height: 100%;
+  margin: 0;
+  background: var(--ngaf-chat-bg);
+  color: var(--ngaf-chat-text);
+  font-family: var(--ngaf-chat-font-family);
+}
diff --git a/cockpit/chat/tool-calls/angular/src/app/tool-calls.component.ts b/cockpit/chat/tool-calls/angular/src/app/tool-calls.component.ts
@@ -20,14 +20,14 @@ import { environment } from '../environments/environment';
   template: `
     <example-chat-layout sidebarWidth="w-80">
       <chat main [agent]="agent" class="flex-1 min-w-0" />
-      <div sidebar class="p-4 space-y-4" style="background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
+      <div sidebar class="p-4 space-y-4" style="background: var(--ngaf-chat-bg); color: var(--ngaf-chat-text);">
         <h3 class="text-xs font-semibold uppercase tracking-wide"
-            style="color: var(--chat-text-muted, #777);">Tool Calls</h3>
+            style="color: var(--ngaf-chat-text-muted);">Tool Calls</h3>
         <chat-tool-calls [agent]="agent" />
         <div class="mt-4 space-y-2">
           <h4 class="text-xs font-semibold uppercase tracking-wide"
-              style="color: var(--chat-text-muted, #777);">Available Tools</h4>
-          <ul class="text-xs space-y-1 list-disc list-inside" style="color: var(--chat-text-muted, #777);">
+              style="color: var(--ngaf-chat-text-muted);">Available Tools</h4>
+          <ul class="text-xs space-y-1 list-disc list-inside" style="color: var(--ngaf-chat-text-muted);">
             <li>search — Web search</li>
             <li>calculator — Math expressions</li>
             <li>weather — City weather</li>

diff --git a/cockpit/chat/tool-calls/angular/src/index.html b/cockpit/chat/tool-calls/angular/src/index.html
@@ -5,9 +5,8 @@
   <title>Chat Tool Calls — Angular</title>
   <base href="/" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body class="bg-gray-950 text-gray-100 h-screen">
+<body class="h-screen">
   <app-tool-calls></app-tool-calls>
 </body>
 </html>