Skip to content

refactor(examples): Stage 2 PR-2 — langgraph wave (8 apps migrated) #343

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
blove merged 9 commits into from
May 15, 2026
Merged

refactor(examples): Stage 2 PR-2 — langgraph wave (8 apps migrated) #343

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
67b0c65
refactor(examples): migrate cockpit-langgraph-streaming-angular to St…
blove May 15, 2026
206e534
refactor(examples): migrate cockpit-langgraph-subgraphs-angular to St…
blove May 15, 2026
7b46fb3
refactor(examples): migrate cockpit-langgraph-time-travel-angular to …
blove May 15, 2026
54f9ea4
refactor(examples): migrate cockpit-langgraph-deployment-runtime-angu…
blove May 15, 2026
efc2474
refactor(examples): migrate cockpit-langgraph-memory-angular to Stage…
blove May 15, 2026
941c676
refactor(examples): migrate cockpit-langgraph-durable-execution-angul…
blove May 15, 2026
4e8796c
refactor(examples): migrate cockpit-langgraph-persistence-angular to …
blove May 15, 2026
e63ed1c
refactor(examples): migrate cockpit-langgraph-interrupts-angular to S…
blove May 15, 2026
1c9eece
refactor(examples): consistent --chat-* → --ngaf-chat-* sweep across …
blove May 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions cockpit/langgraph/deployment-runtime/angular/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,8 @@
<title>LangGraph Deployment & Runtime — 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-deployment-runtime></app-deployment-runtime>
</body>
</html>
33 changes: 6 additions & 27 deletions cockpit/langgraph/deployment-runtime/angular/src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
}
12 changes: 6 additions & 6 deletions cockpit/langgraph/durable-execution/angular/src/app/durable-execution.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,9 @@ const STEP_LABELS: Record<string, string> = {
<example-chat-layout sidebarWidth="w-64">
<chat main [agent]="agent" [views]="ui" [store]="uiStore" class="flex-1 min-w-0" />
<div sidebar class="p-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 mb-6"
style="color: var(--chat-text-muted, #777);">Pipeline</h3>
style="color: var(--ngaf-chat-text-muted);">Pipeline</h3>

<div class="space-y-0">
@for (step of steps(); track step.id; let last = $last) {
Expand All @@ -68,23 +68,23 @@ const STEP_LABELS: Record<string, string> = {
}
@default {
<div class="w-7 h-7 rounded-full border-2 flex items-center justify-center"
style="border-color: var(--chat-text-muted, #555);">
<div class="w-2 h-2 rounded-full" style="background: var(--chat-text-muted, #555);"></div>
style="border-color: var(--ngaf-chat-text-muted);">
<div class="w-2 h-2 rounded-full" style="background: var(--ngaf-chat-text-muted);"></div>
</div>
}
}
<!-- Connecting line -->
@if (!last) {
<div class="w-0.5 h-8"
[style.background]="step.status === 'complete' ? '#16a34a' : 'var(--chat-text-muted, #555)'">
[style.background]="step.status === 'complete' ? '#16a34a' : 'var(--ngaf-chat-text-muted)'">
</div>
}
</div>

<!-- Label -->
<span class="text-sm pt-1"
[class]="step.status === 'active' ? 'font-semibold text-amber-400' : step.status === 'complete' ? 'text-green-400' : ''"
[style.color]="step.status === 'pending' ? 'var(--chat-text-muted, #777)' : ''">
[style.color]="step.status === 'pending' ? 'var(--ngaf-chat-text-muted)' : ''">
{{ step.label }}
</span>
</div>
Expand Down
22 changes: 11 additions & 11 deletions cockpit/langgraph/durable-execution/angular/src/app/views/step-pipeline.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ interface PipelineStep {
selector: 'step-pipeline',
standalone: true,
template: `
<div class="border rounded-xl p-4 my-2 overflow-x-auto" style="border-color: var(--chat-border); background: var(--chat-bg-alt);">
<div class="border rounded-xl p-4 my-2 overflow-x-auto" style="border-color: var(--ngaf-chat-separator); background: var(--ngaf-chat-surface-alt);">
<div class="flex items-center gap-0 min-w-max">
@for (step of steps(); track step.label; let i = $index; let last = $last) {
<!-- Step node -->
Expand All @@ -18,32 +18,32 @@ interface PipelineStep {
@switch (step.status) {
@case ('complete') {
<div class="w-8 h-8 rounded-full flex items-center justify-center"
style="background: var(--chat-success, #16a34a);">
style="background: var(--ngaf-chat-success, #16a34a);">
<svg class="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg>
</div>
}
@case ('active') {
<div class="w-8 h-8 rounded-full border-2 flex items-center justify-center animate-spin"
style="border-color: var(--chat-warning-text, #f59e0b); animation-duration: 1.2s;">
<div class="w-2 h-2 rounded-full" style="background: var(--chat-warning-text, #f59e0b);"></div>
style="border-color: var(--ngaf-chat-warning-text, #f59e0b); animation-duration: 1.2s;">
<div class="w-2 h-2 rounded-full" style="background: var(--ngaf-chat-warning-text, #f59e0b);"></div>
</div>
}
@default {
<div class="w-8 h-8 rounded-full border-2 flex items-center justify-center"
style="border-color: var(--chat-text-muted, #555);">
<div class="w-2 h-2 rounded-full" style="background: var(--chat-text-muted, #555);"></div>
style="border-color: var(--ngaf-chat-text-muted, #555);">
<div class="w-2 h-2 rounded-full" style="background: var(--ngaf-chat-text-muted, #555);"></div>
</div>
}
}
<!-- Label -->
<span class="text-xs whitespace-nowrap"
[style.color]="step.status === 'active'
? 'var(--chat-warning-text, #f59e0b)'
? 'var(--ngaf-chat-warning-text, #f59e0b)'
: step.status === 'complete'
? 'var(--chat-success, #16a34a)'
: 'var(--chat-text-muted, #777)'"
? 'var(--ngaf-chat-success, #16a34a)'
: 'var(--ngaf-chat-text-muted, #777)'"
[class.font-semibold]="step.status === 'active'">
{{ step.label }}
</span>
Expand All @@ -53,8 +53,8 @@ interface PipelineStep {
@if (!last) {
<div class="w-10 h-0.5 -mt-5 mx-1"
[style.background]="step.status === 'complete'
? 'var(--chat-success, #16a34a)'
: 'var(--chat-text-muted, #555)'">
? 'var(--ngaf-chat-success, #16a34a)'
: 'var(--ngaf-chat-text-muted, #555)'">
</div>
}
}
Expand Down
3 changes: 1 addition & 2 deletions cockpit/langgraph/durable-execution/angular/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,8 @@
<title>LangGraph Durable Execution — 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-durable-execution></app-durable-execution>
</body>
</html>
33 changes: 6 additions & 27 deletions cockpit/langgraph/durable-execution/angular/src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
}
2 changes: 1 addition & 1 deletion cockpit/langgraph/interrupts/angular/src/app/interrupts.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ import { ApprovalCardComponent } from './views/approval-card.component';
<div main class="flex flex-col h-full">
<chat [agent]="agent" [views]="ui" [store]="uiStore" class="flex-1 min-w-0" />
@if (agent.interrupt()) {
<div class="p-4" style="border-top: 1px solid var(--chat-border, #333);">
<div class="p-4" style="border-top: 1px solid var(--ngaf-chat-separator);">
<chat-interrupt-panel [agent]="agent" (action)="onInterruptAction($event)" />
</div>
}
Expand Down
16 changes: 8 additions & 8 deletions cockpit/langgraph/interrupts/angular/src/app/views/approval-card.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@ import { Component, input } from '@angular/core';
selector: 'approval-card',
standalone: true,
template: `
<div class="border rounded-xl my-2 overflow-hidden" style="border-color: var(--chat-border); background: var(--chat-bg-alt);">
<div class="border rounded-xl my-2 overflow-hidden" style="border-color: var(--ngaf-chat-separator); background: var(--ngaf-chat-surface-alt);">
<!-- Warning header -->
<div class="flex items-center gap-2 px-4 py-2 text-sm font-semibold"
style="background: color-mix(in srgb, var(--chat-warning-text, #f59e0b) 15%, transparent); color: var(--chat-warning-text, #f59e0b);">
style="background: var(--ngaf-chat-warning-bg); color: var(--ngaf-chat-warning-text);">
<svg class="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
Expand All @@ -17,28 +17,28 @@ import { Component, input } from '@angular/core';

<!-- Body -->
<div class="px-4 py-3">
<p class="text-sm mb-4" style="color: var(--chat-text, #e0e0e0);">{{ description() }}</p>
<p class="text-sm mb-4" style="color: var(--ngaf-chat-text);">{{ description() }}</p>

<div class="flex items-center gap-2">
<button
(click)="emit()('approve')"
class="px-3 py-1.5 text-sm font-medium rounded-lg transition-colors"
style="background: var(--chat-success, #16a34a); color: #fff;"
style="background: var(--ngaf-chat-success); color: #fff;"
onmouseover="this.style.opacity='0.85'" onmouseout="this.style.opacity='1'">
Approve
</button>
<button
(click)="emit()('edit')"
class="px-3 py-1.5 text-sm font-medium rounded-lg border transition-colors"
style="border-color: var(--chat-border, #333); color: var(--chat-text, #e0e0e0); background: transparent;"
onmouseover="this.style.background='var(--chat-bg-hover, #222)'" onmouseout="this.style.background='transparent'">
style="border-color: var(--ngaf-chat-separator); color: var(--ngaf-chat-text); background: transparent;"
onmouseover="this.style.background='var(--ngaf-chat-surface-alt)'" onmouseout="this.style.background='transparent'">
Edit
</button>
<button
(click)="emit()('cancel')"
class="px-3 py-1.5 text-sm font-medium rounded-lg transition-colors"
style="color: var(--chat-text-muted, #777); background: transparent;"
onmouseover="this.style.background='var(--chat-bg-hover, #222)'" onmouseout="this.style.background='transparent'">
style="color: var(--ngaf-chat-text-muted); background: transparent;"
onmouseover="this.style.background='var(--ngaf-chat-surface-alt)'" onmouseout="this.style.background='transparent'">
Cancel
</button>
</div>
Expand Down
3 changes: 1 addition & 2 deletions cockpit/langgraph/interrupts/angular/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,8 @@
<title>LangGraph 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>
33 changes: 6 additions & 27 deletions cockpit/langgraph/interrupts/angular/src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
}
10 changes: 5 additions & 5 deletions cockpit/langgraph/memory/angular/src/app/memory.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,16 +25,16 @@ import { environment } from '../environments/environment';
<example-chat-layout>
<chat main [agent]="agent" class="flex-1 min-w-0" />
<div sidebar class="p-4 space-y-2"
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);">Learned Facts</h3>
style="color: var(--ngaf-chat-text-muted);">Learned Facts</h3>
@if (memoryEntries().length === 0) {
<p class="text-sm italic" style="color: var(--chat-text-muted, #777);">No facts learned yet</p>
<p class="text-sm italic" style="color: var(--ngaf-chat-text-muted);">No facts learned yet</p>
}
@for (entry of memoryEntries(); track entry[0]) {
<div class="text-sm py-1">
<span class="font-medium" style="color: var(--chat-text, #e0e0e0);">{{ entry[0] }}:</span>
<span style="color: var(--chat-text-muted, #777);"> {{ entry[1] }}</span>
<span class="font-medium" style="color: var(--ngaf-chat-text);">{{ entry[0] }}:</span>
<span style="color: var(--ngaf-chat-text-muted);"> {{ entry[1] }}</span>
</div>
}
</div>
Expand Down
3 changes: 1 addition & 2 deletions cockpit/langgraph/memory/angular/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,8 @@
<title>LangGraph Memory — 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-memory></app-memory>
</body>
</html>
33 changes: 6 additions & 27 deletions cockpit/langgraph/memory/angular/src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
}
Loading
Loading