diff --git a/cockpit/langgraph/deployment-runtime/angular/src/index.html b/cockpit/langgraph/deployment-runtime/angular/src/index.html index 5290cf4af..3230a699b 100644 --- a/cockpit/langgraph/deployment-runtime/angular/src/index.html +++ b/cockpit/langgraph/deployment-runtime/angular/src/index.html @@ -5,9 +5,8 @@ LangGraph Deployment & Runtime — Angular - - + diff --git a/cockpit/langgraph/deployment-runtime/angular/src/styles.css b/cockpit/langgraph/deployment-runtime/angular/src/styles.css index 061c66cf8..d42cba930 100644 --- a/cockpit/langgraph/deployment-runtime/angular/src/styles.css +++ b/cockpit/langgraph/deployment-runtime/angular/src/styles.css @@ -1,30 +1,9 @@ -@import "../../../../../libs/design-tokens/src/lib/tokens.css"; -@import "tailwindcss"; -@source "../../../../../libs/chat/src/"; +@import "@ngaf/example-layouts/theme.css"; -@theme { - --color-bg: var(--ds-bg); - --color-surface: #ffffff; - --color-accent: var(--ds-accent); - --color-accent-light: var(--ds-accent-light); - --color-text-primary: var(--ds-text-primary); - --color-text-secondary: var(--ds-text-secondary); - --color-text-muted: var(--ds-text-muted); - --color-border: var(--ds-accent-border); - --color-error: #ef4444; - --color-success: #22c55e; - --font-sans: var(--ds-font-sans); - --font-serif: var(--ds-font-serif); - --font-mono: var(--ds-font-mono); -} - -*, *::before, *::after { box-sizing: border-box; } - -body { +html, body { + height: 100%; margin: 0; - font-family: var(--ds-font-sans); - background: var(--ds-bg); - color: var(--ds-text-primary); - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + background: var(--ngaf-chat-bg); + color: var(--ngaf-chat-text); + font-family: var(--ngaf-chat-font-family); } diff --git a/cockpit/langgraph/durable-execution/angular/src/app/durable-execution.component.ts b/cockpit/langgraph/durable-execution/angular/src/app/durable-execution.component.ts index 394994a06..5dfd93626 100644 --- a/cockpit/langgraph/durable-execution/angular/src/app/durable-execution.component.ts +++ b/cockpit/langgraph/durable-execution/angular/src/app/durable-execution.component.ts @@ -42,9 +42,9 @@ const STEP_LABELS: Record = {
+ style="background: var(--ngaf-chat-bg); color: var(--ngaf-chat-text);">

Pipeline

+ style="color: var(--ngaf-chat-text-muted);">Pipeline
@for (step of steps(); track step.id; let last = $last) { @@ -68,15 +68,15 @@ const STEP_LABELS: Record = { } @default {
-
+ style="border-color: var(--ngaf-chat-text-muted);"> +
} } @if (!last) {
+ [style.background]="step.status === 'complete' ? '#16a34a' : 'var(--ngaf-chat-text-muted)'">
}
@@ -84,7 +84,7 @@ const STEP_LABELS: Record = { + [style.color]="step.status === 'pending' ? 'var(--ngaf-chat-text-muted)' : ''"> {{ step.label }}
diff --git a/cockpit/langgraph/durable-execution/angular/src/app/views/step-pipeline.component.ts b/cockpit/langgraph/durable-execution/angular/src/app/views/step-pipeline.component.ts index d7a3db81d..cf8ff6c3d 100644 --- a/cockpit/langgraph/durable-execution/angular/src/app/views/step-pipeline.component.ts +++ b/cockpit/langgraph/durable-execution/angular/src/app/views/step-pipeline.component.ts @@ -9,7 +9,7 @@ interface PipelineStep { selector: 'step-pipeline', standalone: true, template: ` -
+
@for (step of steps(); track step.label; let i = $index; let last = $last) { @@ -18,7 +18,7 @@ interface PipelineStep { @switch (step.status) { @case ('complete') {
+ style="background: var(--ngaf-chat-success, #16a34a);"> @@ -26,24 +26,24 @@ interface PipelineStep { } @case ('active') {
-
+ style="border-color: var(--ngaf-chat-warning-text, #f59e0b); animation-duration: 1.2s;"> +
} @default {
-
+ style="border-color: var(--ngaf-chat-text-muted, #555);"> +
} } {{ step.label }} @@ -53,8 +53,8 @@ interface PipelineStep { @if (!last) {
+ ? 'var(--ngaf-chat-success, #16a34a)' + : 'var(--ngaf-chat-text-muted, #555)'">
} } diff --git a/cockpit/langgraph/durable-execution/angular/src/index.html b/cockpit/langgraph/durable-execution/angular/src/index.html index 014c5c510..5c9a85731 100644 --- a/cockpit/langgraph/durable-execution/angular/src/index.html +++ b/cockpit/langgraph/durable-execution/angular/src/index.html @@ -5,9 +5,8 @@ LangGraph Durable Execution — Angular - - + diff --git a/cockpit/langgraph/durable-execution/angular/src/styles.css b/cockpit/langgraph/durable-execution/angular/src/styles.css index 061c66cf8..d42cba930 100644 --- a/cockpit/langgraph/durable-execution/angular/src/styles.css +++ b/cockpit/langgraph/durable-execution/angular/src/styles.css @@ -1,30 +1,9 @@ -@import "../../../../../libs/design-tokens/src/lib/tokens.css"; -@import "tailwindcss"; -@source "../../../../../libs/chat/src/"; +@import "@ngaf/example-layouts/theme.css"; -@theme { - --color-bg: var(--ds-bg); - --color-surface: #ffffff; - --color-accent: var(--ds-accent); - --color-accent-light: var(--ds-accent-light); - --color-text-primary: var(--ds-text-primary); - --color-text-secondary: var(--ds-text-secondary); - --color-text-muted: var(--ds-text-muted); - --color-border: var(--ds-accent-border); - --color-error: #ef4444; - --color-success: #22c55e; - --font-sans: var(--ds-font-sans); - --font-serif: var(--ds-font-serif); - --font-mono: var(--ds-font-mono); -} - -*, *::before, *::after { box-sizing: border-box; } - -body { +html, body { + height: 100%; margin: 0; - font-family: var(--ds-font-sans); - background: var(--ds-bg); - color: var(--ds-text-primary); - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + background: var(--ngaf-chat-bg); + color: var(--ngaf-chat-text); + font-family: var(--ngaf-chat-font-family); } diff --git a/cockpit/langgraph/interrupts/angular/src/app/interrupts.component.ts b/cockpit/langgraph/interrupts/angular/src/app/interrupts.component.ts index 09a63e329..0067a4759 100644 --- a/cockpit/langgraph/interrupts/angular/src/app/interrupts.component.ts +++ b/cockpit/langgraph/interrupts/angular/src/app/interrupts.component.ts @@ -28,7 +28,7 @@ import { ApprovalCardComponent } from './views/approval-card.component';
@if (agent.interrupt()) { -
+
} diff --git a/cockpit/langgraph/interrupts/angular/src/app/views/approval-card.component.ts b/cockpit/langgraph/interrupts/angular/src/app/views/approval-card.component.ts index 40f0c6dba..87f521b01 100644 --- a/cockpit/langgraph/interrupts/angular/src/app/views/approval-card.component.ts +++ b/cockpit/langgraph/interrupts/angular/src/app/views/approval-card.component.ts @@ -4,10 +4,10 @@ import { Component, input } from '@angular/core'; selector: 'approval-card', standalone: true, template: ` -
+
+ style="background: var(--ngaf-chat-warning-bg); color: var(--ngaf-chat-warning-text);"> @@ -17,28 +17,28 @@ import { Component, input } from '@angular/core';
-

{{ description() }}

+

{{ description() }}

diff --git a/cockpit/langgraph/interrupts/angular/src/index.html b/cockpit/langgraph/interrupts/angular/src/index.html index d32fdb39e..2e3208a85 100644 --- a/cockpit/langgraph/interrupts/angular/src/index.html +++ b/cockpit/langgraph/interrupts/angular/src/index.html @@ -5,9 +5,8 @@ LangGraph Interrupts — Angular - - + diff --git a/cockpit/langgraph/interrupts/angular/src/styles.css b/cockpit/langgraph/interrupts/angular/src/styles.css index 061c66cf8..d42cba930 100644 --- a/cockpit/langgraph/interrupts/angular/src/styles.css +++ b/cockpit/langgraph/interrupts/angular/src/styles.css @@ -1,30 +1,9 @@ -@import "../../../../../libs/design-tokens/src/lib/tokens.css"; -@import "tailwindcss"; -@source "../../../../../libs/chat/src/"; +@import "@ngaf/example-layouts/theme.css"; -@theme { - --color-bg: var(--ds-bg); - --color-surface: #ffffff; - --color-accent: var(--ds-accent); - --color-accent-light: var(--ds-accent-light); - --color-text-primary: var(--ds-text-primary); - --color-text-secondary: var(--ds-text-secondary); - --color-text-muted: var(--ds-text-muted); - --color-border: var(--ds-accent-border); - --color-error: #ef4444; - --color-success: #22c55e; - --font-sans: var(--ds-font-sans); - --font-serif: var(--ds-font-serif); - --font-mono: var(--ds-font-mono); -} - -*, *::before, *::after { box-sizing: border-box; } - -body { +html, body { + height: 100%; margin: 0; - font-family: var(--ds-font-sans); - background: var(--ds-bg); - color: var(--ds-text-primary); - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + background: var(--ngaf-chat-bg); + color: var(--ngaf-chat-text); + font-family: var(--ngaf-chat-font-family); } diff --git a/cockpit/langgraph/memory/angular/src/app/memory.component.ts b/cockpit/langgraph/memory/angular/src/app/memory.component.ts index 4d0fcb791..148b4f212 100644 --- a/cockpit/langgraph/memory/angular/src/app/memory.component.ts +++ b/cockpit/langgraph/memory/angular/src/app/memory.component.ts @@ -25,16 +25,16 @@ import { environment } from '../environments/environment';
+ style="background: var(--ngaf-chat-bg); color: var(--ngaf-chat-text);">

Learned Facts

+ style="color: var(--ngaf-chat-text-muted);">Learned Facts @if (memoryEntries().length === 0) { -

No facts learned yet

+

No facts learned yet

} @for (entry of memoryEntries(); track entry[0]) {
- {{ entry[0] }}: - {{ entry[1] }} + {{ entry[0] }}: + {{ entry[1] }}
}
diff --git a/cockpit/langgraph/memory/angular/src/index.html b/cockpit/langgraph/memory/angular/src/index.html index ffaedb18d..4afbef36b 100644 --- a/cockpit/langgraph/memory/angular/src/index.html +++ b/cockpit/langgraph/memory/angular/src/index.html @@ -5,9 +5,8 @@ LangGraph Memory — Angular - - + diff --git a/cockpit/langgraph/memory/angular/src/styles.css b/cockpit/langgraph/memory/angular/src/styles.css index 061c66cf8..d42cba930 100644 --- a/cockpit/langgraph/memory/angular/src/styles.css +++ b/cockpit/langgraph/memory/angular/src/styles.css @@ -1,30 +1,9 @@ -@import "../../../../../libs/design-tokens/src/lib/tokens.css"; -@import "tailwindcss"; -@source "../../../../../libs/chat/src/"; +@import "@ngaf/example-layouts/theme.css"; -@theme { - --color-bg: var(--ds-bg); - --color-surface: #ffffff; - --color-accent: var(--ds-accent); - --color-accent-light: var(--ds-accent-light); - --color-text-primary: var(--ds-text-primary); - --color-text-secondary: var(--ds-text-secondary); - --color-text-muted: var(--ds-text-muted); - --color-border: var(--ds-accent-border); - --color-error: #ef4444; - --color-success: #22c55e; - --font-sans: var(--ds-font-sans); - --font-serif: var(--ds-font-serif); - --font-mono: var(--ds-font-mono); -} - -*, *::before, *::after { box-sizing: border-box; } - -body { +html, body { + height: 100%; margin: 0; - font-family: var(--ds-font-sans); - background: var(--ds-bg); - color: var(--ds-text-primary); - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + background: var(--ngaf-chat-bg); + color: var(--ngaf-chat-text); + font-family: var(--ngaf-chat-font-family); } diff --git a/cockpit/langgraph/persistence/angular/src/app/persistence.component.ts b/cockpit/langgraph/persistence/angular/src/app/persistence.component.ts index 0d98c1312..e3d97e0fb 100644 --- a/cockpit/langgraph/persistence/angular/src/app/persistence.component.ts +++ b/cockpit/langgraph/persistence/angular/src/app/persistence.component.ts @@ -30,11 +30,11 @@ interface Thread {
Threads
@@ -44,9 +44,9 @@ interface Thread {
-
+