From 52989fe6239a33ec19c4ed13a388f44c86837942 Mon Sep 17 00:00:00 2001 From: Brian Love Date: Fri, 15 May 2026 14:04:20 -0700 Subject: [PATCH 01/10] refactor(examples): migrate cockpit-chat-input-angular to Stage 2 theme sync --- .../input/angular/src/app/input.component.ts | 16 ++++++++-------- cockpit/chat/input/angular/src/index.html | 3 +-- cockpit/chat/input/angular/src/styles.css | 10 +++++++++- 3 files changed, 18 insertions(+), 11 deletions(-) diff --git a/cockpit/chat/input/angular/src/app/input.component.ts b/cockpit/chat/input/angular/src/app/input.component.ts index 2816df8cb..e36f619a8 100644 --- a/cockpit/chat/input/angular/src/app/input.component.ts +++ b/cockpit/chat/input/angular/src/app/input.component.ts @@ -18,20 +18,20 @@ import { environment } from '../environments/environment'; template: `
-
-

Chat Input Demo

+
+

Chat Input Demo

-
+
-
+

Input State

-
+ style="color: var(--ngaf-chat-text-muted);">Input State +
Stream Status
{{ streamStatus() }}
Is Loading
@@ -39,8 +39,8 @@ import { environment } from '../environments/environment';

Features

-
    + style="color: var(--ngaf-chat-text-muted);">Features +
    • Custom placeholder text
    • Enter to send
    • Shift+Enter for newline
      • diff --git a/cockpit/chat/input/angular/src/index.html b/cockpit/chat/input/angular/src/index.html index a09f29255..ae9903bcc 100644 --- a/cockpit/chat/input/angular/src/index.html +++ b/cockpit/chat/input/angular/src/index.html @@ -5,9 +5,8 @@ Chat Input — Angular - - + diff --git a/cockpit/chat/input/angular/src/styles.css b/cockpit/chat/input/angular/src/styles.css index d4e83d3e7..d42cba930 100644 --- 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); +} From 84977ec54b8faa616fa52820a62129904e474cf3 Mon Sep 17 00:00:00 2001 From: Brian Love Date: Fri, 15 May 2026 14:05:15 -0700 Subject: [PATCH 02/10] refactor(examples): migrate cockpit-chat-interrupts-angular to Stage 2 theme sync --- .../interrupts/angular/src/app/interrupts.component.ts | 8 ++++---- cockpit/chat/interrupts/angular/src/index.html | 3 +-- cockpit/chat/interrupts/angular/src/styles.css | 10 +++++++++- 3 files changed, 14 insertions(+), 7 deletions(-) diff --git a/cockpit/chat/interrupts/angular/src/app/interrupts.component.ts b/cockpit/chat/interrupts/angular/src/app/interrupts.component.ts index a06702046..11581d3da 100644 --- 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: ` -
      +

      Interrupt Panel

      + style="color: var(--ngaf-chat-text-muted);">Interrupt Panel

      Stream Status

      -

      {{ streamStatus() }}

      + style="color: var(--ngaf-chat-text-muted);">Stream Status +

      {{ streamStatus() }}

      diff --git a/cockpit/chat/interrupts/angular/src/index.html b/cockpit/chat/interrupts/angular/src/index.html index d4e08882c..49c9e4bf4 100644 --- a/cockpit/chat/interrupts/angular/src/index.html +++ b/cockpit/chat/interrupts/angular/src/index.html @@ -5,9 +5,8 @@ Chat Interrupts — Angular - - + diff --git a/cockpit/chat/interrupts/angular/src/styles.css b/cockpit/chat/interrupts/angular/src/styles.css index 0275e37b1..d42cba930 100644 --- 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); +} From 268194e433547d8eaf10a2bb90f263e92f352f9d Mon Sep 17 00:00:00 2001 From: Brian Love Date: Fri, 15 May 2026 14:05:34 -0700 Subject: [PATCH 03/10] refactor(examples): migrate cockpit-chat-a2ui-angular to Stage 2 theme sync (wrap in ExampleChatLayoutComponent) --- cockpit/chat/a2ui/angular/src/app/a2ui.component.ts | 9 +++++++-- cockpit/chat/a2ui/angular/src/index.html | 3 +-- cockpit/chat/a2ui/angular/src/styles.css | 10 +++++++++- 3 files changed, 17 insertions(+), 5 deletions(-) diff --git a/cockpit/chat/a2ui/angular/src/app/a2ui.component.ts b/cockpit/chat/a2ui/angular/src/app/a2ui.component.ts index 1bef15d66..8e5b477f7 100644 --- 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: ``, + imports: [ChatComponent, ExampleChatLayoutComponent], + template: ` + + + + `, }) 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 index b566e7a1a..c9723e559 100644 --- a/cockpit/chat/a2ui/angular/src/index.html +++ b/cockpit/chat/a2ui/angular/src/index.html @@ -5,9 +5,8 @@ Chat A2UI — Angular - - + diff --git a/cockpit/chat/a2ui/angular/src/styles.css b/cockpit/chat/a2ui/angular/src/styles.css index b17f1690e..d42cba930 100644 --- 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); +} From 67e5dd9b4964de6f92c455b8f04176307bf6da9a Mon Sep 17 00:00:00 2001 From: Brian Love Date: Fri, 15 May 2026 14:05:36 -0700 Subject: [PATCH 04/10] refactor(examples): migrate cockpit-chat-tool-calls-angular to Stage 2 theme sync --- .../tool-calls/angular/src/app/tool-calls.component.ts | 8 ++++---- cockpit/chat/tool-calls/angular/src/index.html | 3 +-- cockpit/chat/tool-calls/angular/src/styles.css | 10 +++++++++- 3 files changed, 14 insertions(+), 7 deletions(-) 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 index 41cefe5f6..ced5a5475 100644 --- 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: ` -
      +

      Tool Calls

      + style="color: var(--ngaf-chat-text-muted);">Tool Calls

      Available Tools

      -
        + style="color: var(--ngaf-chat-text-muted);">Available Tools +
        • search — Web search
        • calculator — Math expressions
        • weather — City weather
          • diff --git a/cockpit/chat/tool-calls/angular/src/index.html b/cockpit/chat/tool-calls/angular/src/index.html index d35828138..826d839ca 100644 --- a/cockpit/chat/tool-calls/angular/src/index.html +++ b/cockpit/chat/tool-calls/angular/src/index.html @@ -5,9 +5,8 @@ Chat Tool Calls — Angular - - + diff --git a/cockpit/chat/tool-calls/angular/src/styles.css b/cockpit/chat/tool-calls/angular/src/styles.css index 79c4e28fd..d42cba930 100644 --- a/cockpit/chat/tool-calls/angular/src/styles.css +++ b/cockpit/chat/tool-calls/angular/src/styles.css @@ -1 +1,9 @@ -/* Global styles for the tool-calls 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); +} From e02a1f7d46c0bc2d48c722961abf8e1ac40e3d5d Mon Sep 17 00:00:00 2001 From: Brian Love Date: Fri, 15 May 2026 14:05:49 -0700 Subject: [PATCH 05/10] refactor(examples): migrate cockpit-chat-threads-angular to Stage 2 theme sync --- .../chat/threads/angular/src/app/threads.component.ts | 4 ++-- cockpit/chat/threads/angular/src/index.html | 3 +-- cockpit/chat/threads/angular/src/styles.css | 10 +++++++++- 3 files changed, 12 insertions(+), 5 deletions(-) diff --git a/cockpit/chat/threads/angular/src/app/threads.component.ts b/cockpit/chat/threads/angular/src/app/threads.component.ts index ba5dc2577..222c26502 100644 --- 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';
          + style="background: var(--ngaf-chat-bg); color: var(--ngaf-chat-text);">

          Threads

          + style="color: var(--ngaf-chat-text-muted);">Threads Chat Threads — Angular - - + diff --git a/cockpit/chat/threads/angular/src/styles.css b/cockpit/chat/threads/angular/src/styles.css index 7f6c26701..d42cba930 100644 --- 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); +} From 82217402c8afe853e7c8bc14f7e21ef80fbf5c08 Mon Sep 17 00:00:00 2001 From: Brian Love Date: Fri, 15 May 2026 14:06:19 -0700 Subject: [PATCH 06/10] refactor(examples): migrate cockpit-chat-theming-angular to Stage 2 theme sync --- .../theming/angular/src/app/theming.component.ts | 12 ++++++------ cockpit/chat/theming/angular/src/index.html | 3 +-- cockpit/chat/theming/angular/src/styles.css | 10 +++++++++- 3 files changed, 16 insertions(+), 9 deletions(-) diff --git a/cockpit/chat/theming/angular/src/app/theming.component.ts b/cockpit/chat/theming/angular/src/app/theming.component.ts index 621b5b20d..c5fbce953 100644 --- a/cockpit/chat/theming/angular/src/app/theming.component.ts +++ b/cockpit/chat/theming/angular/src/app/theming.component.ts @@ -53,15 +53,15 @@ const THEMES: Record> = { template: ` -
          +

          Theme Picker

          + style="color: var(--ngaf-chat-text-muted);">Theme Picker
          @for (name of themeNames; track name) { @@ -69,8 +69,8 @@ const THEMES: Record> = {

          CSS Variables

          -
            + style="color: var(--ngaf-chat-text-muted);">CSS Variables +
            • --ngaf-chat-bg
            • --ngaf-chat-text
            • --ngaf-chat-accent
              • diff --git a/cockpit/chat/theming/angular/src/index.html b/cockpit/chat/theming/angular/src/index.html index cb6f574f4..f3bd95262 100644 --- a/cockpit/chat/theming/angular/src/index.html +++ b/cockpit/chat/theming/angular/src/index.html @@ -5,9 +5,8 @@ Chat Theming — Angular - - + diff --git a/cockpit/chat/theming/angular/src/styles.css b/cockpit/chat/theming/angular/src/styles.css index e31c63fdd..d42cba930 100644 --- 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); +} From 94d49167be0a76ffc6e220b7b26f012d59089608 Mon Sep 17 00:00:00 2001 From: Brian Love Date: Fri, 15 May 2026 14:06:57 -0700 Subject: [PATCH 07/10] refactor(examples): migrate cockpit-chat-messages-angular to Stage 2 theme sync --- .../messages/angular/src/app/messages.component.ts | 12 ++++++------ cockpit/chat/messages/angular/src/index.html | 3 +-- cockpit/chat/messages/angular/src/styles.css | 10 +++++++++- 3 files changed, 16 insertions(+), 9 deletions(-) diff --git a/cockpit/chat/messages/angular/src/app/messages.component.ts b/cockpit/chat/messages/angular/src/app/messages.component.ts index 450fb5d8a..59c2a4b69 100644 --- 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: `
              -
              -

              Chat Messages Primitives

              +
              +

              Chat Messages Primitives

              -
              +
              -
              +

              Primitives Used

              -
                + style="color: var(--ngaf-chat-text-muted);">Primitives Used +
                • ChatMessageListComponent
                • ChatInputComponent
                • ChatTypingIndicatorComponent
                  • diff --git a/cockpit/chat/messages/angular/src/index.html b/cockpit/chat/messages/angular/src/index.html index 96fef9bbe..0d47dc3d3 100644 --- a/cockpit/chat/messages/angular/src/index.html +++ b/cockpit/chat/messages/angular/src/index.html @@ -5,9 +5,8 @@ Chat Messages — Angular - - + diff --git a/cockpit/chat/messages/angular/src/styles.css b/cockpit/chat/messages/angular/src/styles.css index e80c54b41..d42cba930 100644 --- 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); +} From 7cdae2115a3e7b73404a9a7e2145910784e3d8be Mon Sep 17 00:00:00 2001 From: Brian Love Date: Fri, 15 May 2026 14:07:58 -0700 Subject: [PATCH 08/10] refactor(examples): migrate cockpit-chat-generative-ui-angular to Stage 2 theme sync --- cockpit/chat/generative-ui/angular/src/index.html | 3 +-- cockpit/chat/generative-ui/angular/src/styles.css | 10 +++++++++- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/cockpit/chat/generative-ui/angular/src/index.html b/cockpit/chat/generative-ui/angular/src/index.html index 8123c3b27..2b534d4de 100644 --- a/cockpit/chat/generative-ui/angular/src/index.html +++ b/cockpit/chat/generative-ui/angular/src/index.html @@ -5,9 +5,8 @@ Chat Generative UI — Angular - - + diff --git a/cockpit/chat/generative-ui/angular/src/styles.css b/cockpit/chat/generative-ui/angular/src/styles.css index 8b4b3f531..d42cba930 100644 --- 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); +} From fc5c13ab18cf43b26b4664eeeda875db268f010c Mon Sep 17 00:00:00 2001 From: Brian Love Date: Fri, 15 May 2026 14:09:18 -0700 Subject: [PATCH 09/10] refactor(examples): migrate cockpit-chat-debug-angular to Stage 2 theme sync --- cockpit/chat/debug/angular/src/index.html | 3 +-- cockpit/chat/debug/angular/src/styles.css | 10 +++++++++- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/cockpit/chat/debug/angular/src/index.html b/cockpit/chat/debug/angular/src/index.html index 996c3026f..f2ce61f79 100644 --- a/cockpit/chat/debug/angular/src/index.html +++ b/cockpit/chat/debug/angular/src/index.html @@ -5,9 +5,8 @@ Chat Debug — Angular - - + diff --git a/cockpit/chat/debug/angular/src/styles.css b/cockpit/chat/debug/angular/src/styles.css index 7260a5b65..d42cba930 100644 --- 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); +} From ddd82b7bb4ba9acea3f01335208b8a70c36b4fff Mon Sep 17 00:00:00 2001 From: Brian Love Date: Fri, 15 May 2026 14:11:57 -0700 Subject: [PATCH 10/10] refactor(examples): migrate cockpit-chat-subagents-angular to Stage 2 theme sync --- .../subagents/angular/src/app/subagents.component.ts | 8 ++++---- cockpit/chat/subagents/angular/src/index.html | 3 +-- cockpit/chat/subagents/angular/src/styles.css | 10 +++++++++- 3 files changed, 14 insertions(+), 7 deletions(-) diff --git a/cockpit/chat/subagents/angular/src/app/subagents.component.ts b/cockpit/chat/subagents/angular/src/app/subagents.component.ts index 25099aac8..06e1d5ef0 100644 --- 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: ` -
                  +

                  Active Subagents

                  + style="color: var(--ngaf-chat-text-muted);">Active Subagents

                  Agent Pipeline

                  -
                    + style="color: var(--ngaf-chat-text-muted);">Agent Pipeline +
                    1. Orchestrator
                    2. Research Agent
                    3. Analysis Agent
                      4. diff --git a/cockpit/chat/subagents/angular/src/index.html b/cockpit/chat/subagents/angular/src/index.html index 0e43c8531..82b6ebc95 100644 --- a/cockpit/chat/subagents/angular/src/index.html +++ b/cockpit/chat/subagents/angular/src/index.html @@ -5,9 +5,8 @@ Chat Subagents — Angular - - + diff --git a/cockpit/chat/subagents/angular/src/styles.css b/cockpit/chat/subagents/angular/src/styles.css index 315040f3b..d42cba930 100644 --- 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); +}