Skip to content

Commit 623eb4f

Browse files
bloveblove
authored
feat(react): dogfood native repeat loops (#1243)
* feat(cockpit): dogfood native React keyed repeat loops * test(website): verify repeat preview fresh navigation * chore(react): align Repeat preview with merged State parent * fix(website): build native examples before server readiness
1 parent 53d9aea commit 623eb4f

37 files changed

Lines changed: 2572 additions & 30 deletions

‎apps/website/content/AGENTS.md.template‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,3 +101,5 @@ Build with `npx nx build cockpit-ag-ui-subagents-react` and verify with `npx nx
101101
Render Spec has an experimental local React preview at https://threadplane.ai/docs/render/guides/specs?frontend=react. Three authored samples stream through a private partial JSON parser and installed native RenderSpec. Four registered read-only views receive literal props and native children. Play/Pause, seek, Finish and Reset share one local owner; sample changes and page exit revoke old callbacks. Copied frozen partial trees leave parser state private, and Complete requires the finished output to match the validated source. No backend runtime, model request or execution configuration is used. Build with `npx nx build cockpit-render-spec-rendering-react` and verify with `npx nx e2e cockpit-render-spec-rendering-react`.
102102

103103
State Management has an experimental local React preview at https://threadplane.ai/docs/render/guides/state-store?frontend=react. The React host owns copied immutable name, age and theme state; installed native RenderSpec resolves the three authored $state paths in read-only views. Edits survive partial playback, seek, Reset and sample selection. Invalid age drafts keep the last valid value, and reload restores the seed. Parser callbacks cannot replace host state; unknown bindings and executable fields are excluded. No backend runtime, model request or execution configuration is used. Build with `npx nx build cockpit-render-state-management-react` and verify with `npx nx e2e cockpit-render-state-management-react`.
104+
105+
Repeat Loops has an experimental local React preview at https://threadplane.ai/docs/render/guides/repeat-loops?frontend=react. The host owns immutable items with stable ids; native RenderSpec renders a repeated Card once and repeats its child rows keyed by item id. Add, remove and reverse items while preserving row identity and playback source. The list is bounded at 32; edits survive seek, Reset and sample changes, and reload restores the seed. Partial repeat metadata waits for its exact path and key. Read-only views exclude unknown expressions, nested repeats and executable fields. No backend runtime, model request or execution configuration is used. Build with `npx nx build cockpit-render-repeat-loops-react` and verify with `npx nx e2e cockpit-render-repeat-loops-react`.

‎apps/website/content/CLAUDE.md.template‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,3 +101,5 @@ Build with `npx nx build cockpit-ag-ui-subagents-react` and verify with `npx nx
101101
Render Spec has an experimental local React preview at https://threadplane.ai/docs/render/guides/specs?frontend=react. Three authored samples stream through a private partial JSON parser and installed native RenderSpec. Four registered read-only views receive literal props and native children. Play/Pause, seek, Finish and Reset share one local owner; sample changes and page exit revoke old callbacks. Copied frozen partial trees leave parser state private, and Complete requires the finished output to match the validated source. No backend runtime, model request or execution configuration is used. Build with `npx nx build cockpit-render-spec-rendering-react` and verify with `npx nx e2e cockpit-render-spec-rendering-react`.
102102

103103
State Management has an experimental local React preview at https://threadplane.ai/docs/render/guides/state-store?frontend=react. The React host owns copied immutable name, age and theme state; installed native RenderSpec resolves the three authored $state paths in read-only views. Edits survive partial playback, seek, Reset and sample selection. Invalid age drafts keep the last valid value, and reload restores the seed. Parser callbacks cannot replace host state; unknown bindings and executable fields are excluded. No backend runtime, model request or execution configuration is used. Build with `npx nx build cockpit-render-state-management-react` and verify with `npx nx e2e cockpit-render-state-management-react`.
104+
105+
Repeat Loops has an experimental local React preview at https://threadplane.ai/docs/render/guides/repeat-loops?frontend=react. The host owns immutable items with stable ids; native RenderSpec renders a repeated Card once and repeats its child rows keyed by item id. Add, remove and reverse items while preserving row identity and playback source. The list is bounded at 32; edits survive seek, Reset and sample changes, and reload restores the seed. Partial repeat metadata waits for its exact path and key. Read-only views exclude unknown expressions, nested repeats and executable fields. No backend runtime, model request or execution configuration is used. Build with `npx nx build cockpit-render-repeat-loops-react` and verify with `npx nx e2e cockpit-render-repeat-loops-react`.

‎apps/website/e2e/react-repeat-loops-preview.spec.ts‎

Lines changed: 260 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,260 @@
1+
import { test, expect, type Page } from '@playwright/test';
2+
3+
const route = '/docs/render/guides/repeat-loops';
4+
const iframe = (page: Page) =>
5+
page.locator('iframe[title="Repeat Loops (React preview) live example"]');
6+
const frame = (page: Page) => iframe(page).contentFrame();
7+
8+
test.beforeEach(async ({ page }) => {
9+
const executions: string[] = [];
10+
const errors: string[] = [];
11+
page.on('request', (request) => {
12+
if (
13+
!['GET', 'HEAD'].includes(request.method()) &&
14+
/\/agent(?:\/|$)|\/api\/native(?:\/|$)|\/api\/threads(?:\/|$)|\/threads(?:\/|$)/.test(
15+
new URL(request.url()).pathname
16+
)
17+
)
18+
executions.push(request.url());
19+
});
20+
page.on('pageerror', (error) => errors.push(error.message));
21+
observers.set(page, { executions, errors });
22+
});
23+
24+
const observers = new WeakMap<
25+
Page,
26+
{ executions: string[]; errors: string[] }
27+
>();
28+
test.afterEach(async ({ page }) => {
29+
const observed = observers.get(page);
30+
expect(observed?.executions).toEqual([]);
31+
expect(observed?.errors).toEqual([]);
32+
});
33+
34+
async function expectFreshRun(page: Page) {
35+
await expect(page.locator('[data-workspace-shell]')).toHaveAttribute(
36+
'data-hydrated',
37+
'true'
38+
);
39+
await expect(page.locator('[data-workspace-shell]')).toHaveAttribute(
40+
'data-workspace-mode',
41+
'Run'
42+
);
43+
await expect(iframe(page)).toBeVisible();
44+
await expect(page.getByLabel('Example UI')).toHaveValue('react');
45+
await expect(page).toHaveURL(
46+
(url) =>
47+
url.pathname === route &&
48+
url.searchParams.get('frontend') === 'react' &&
49+
url.searchParams.get('mode') === 'run'
50+
);
51+
await expect(iframe(page)).toHaveAttribute(
52+
'src',
53+
/(?:localhost:4616(?:[/?#]|$)|\/render\/repeat-loops\/react\/?(?:[?#]|$))/
54+
);
55+
const example = frame(page);
56+
for (const name of ['Alpha', 'Beta', 'Gamma']) {
57+
await expect(
58+
example.getByRole('button', { name: `Remove ${name}`, exact: true })
59+
).toBeVisible();
60+
}
61+
await expect(
62+
example.getByRole('button', { name: 'Remove Item 1', exact: true })
63+
).toHaveCount(0);
64+
await expect(example.getByRole('status')).toHaveText('Paused · 0 characters');
65+
await expect(example.getByRole('combobox', { name: 'Sample' })).toHaveValue(
66+
'0'
67+
);
68+
await expect(
69+
example.getByRole('slider', { name: 'Playback position' })
70+
).toHaveValue('0');
71+
await expect(
72+
example.getByRole('region', { name: 'Streaming JSON' }).locator('pre')
73+
).toHaveText('');
74+
await expect(
75+
example.getByRole('region', { name: 'Render output' })
76+
).toContainText('Play a sample to see its view.');
77+
}
78+
79+
async function renderChangedSample(page: Page) {
80+
const example = frame(page);
81+
await example
82+
.getByRole('button', { name: 'Remove Alpha', exact: true })
83+
.click();
84+
await example.getByRole('button', { name: 'Add Item', exact: true }).click();
85+
await example
86+
.getByRole('button', { name: 'Reverse items', exact: true })
87+
.click();
88+
await expect(
89+
example.getByRole('button', { name: 'Remove Alpha', exact: true })
90+
).toHaveCount(0);
91+
await expect(
92+
example.getByRole('button', { name: 'Remove Item 1', exact: true })
93+
).toBeVisible();
94+
await example
95+
.getByRole('combobox', { name: 'Sample' })
96+
.selectOption({ label: 'Sections' });
97+
await example.getByRole('button', { name: 'Finish', exact: true }).click();
98+
await expect(
99+
example.getByRole('heading', { name: 'Multiple Sections', exact: true })
100+
).toBeVisible();
101+
await expect(
102+
example.getByRole('region', { name: 'Streaming JSON' }).locator('pre')
103+
).not.toHaveText('');
104+
}
105+
106+
test('React Repeat Loops keeps local Docs, Code and Run aligned', async ({
107+
page,
108+
}, testInfo) => {
109+
await page.goto(`${route}?frontend=react`, { waitUntil: 'domcontentloaded' });
110+
await expect(page.getByLabel('Example UI')).toHaveValue('react');
111+
await expect(
112+
page.getByRole('heading', {
113+
name: 'React Repeat Loops preview',
114+
exact: true,
115+
})
116+
).toBeVisible();
117+
await expect(
118+
page.locator(
119+
'[data-example-file="cockpit/render/repeat-loops/react/src/items.ts"]'
120+
)
121+
).toBeVisible();
122+
await expect(page.locator('[data-example-file*="/python/"]')).toHaveCount(0);
123+
await expect(page.locator('[data-workspace-shell]')).toHaveAttribute(
124+
'data-hydrated',
125+
'true'
126+
);
127+
const navigation = page.locator('[data-workspace-desktop-navigation]');
128+
await navigation.getByRole('button', { name: 'Code', exact: true }).click();
129+
await expect(page).toHaveURL(/frontend=react/);
130+
await expect(page).toHaveURL(/mode=code/);
131+
await navigation.getByRole('button', { name: /^Run(?:,|$)/ }).click();
132+
await expectFreshRun(page);
133+
await page.screenshot({
134+
path: testInfo.outputPath('react-repeat-loops-desktop.png'),
135+
});
136+
});
137+
138+
test('React Repeat Loops restores fresh playback through frontend history', async ({
139+
page,
140+
}) => {
141+
await page.goto(`${route}?frontend=react&mode=run`, {
142+
waitUntil: 'domcontentloaded',
143+
});
144+
await expectFreshRun(page);
145+
await renderChangedSample(page);
146+
await page.getByLabel('Example UI').selectOption('angular');
147+
await expect(page.getByLabel('Example UI')).toHaveValue('angular');
148+
await expect(page).toHaveURL(`${route}?mode=run`);
149+
await expect(page.locator('iframe')).toBeVisible();
150+
await expect(page.locator('iframe')).toHaveAttribute(
151+
'src',
152+
/(?:localhost:4405(?:[/?#]|$)|\/render\/repeat-loops\/?(?:[?#]|$))/
153+
);
154+
await page.goBack({ waitUntil: 'domcontentloaded' });
155+
await expectFreshRun(page);
156+
});
157+
158+
test('React Repeat Loops reloads fresh playback after rendering another sample', async ({
159+
page,
160+
}) => {
161+
await page.goto(`${route}?frontend=react&mode=run`, {
162+
waitUntil: 'domcontentloaded',
163+
});
164+
await expectFreshRun(page);
165+
await renderChangedSample(page);
166+
await page.reload({ waitUntil: 'domcontentloaded' });
167+
await expectFreshRun(page);
168+
const example = frame(page);
169+
await example.getByRole('button', { name: 'Finish', exact: true }).click();
170+
const rows = example.locator('[data-repeat-row]');
171+
await expect(rows).toHaveText(['1. Alpha', '2. Beta', '3. Gamma']);
172+
expect(
173+
await rows.evaluateAll((nodes) =>
174+
nodes.map((node) => node.getAttribute('data-repeat-row'))
175+
)
176+
).toEqual(['alpha', 'beta', 'gamma']);
177+
await example.getByRole('button', { name: 'Add Item', exact: true }).click();
178+
await expect(rows).toHaveText([
179+
'1. Alpha',
180+
'2. Beta',
181+
'3. Gamma',
182+
'4. Item 1',
183+
]);
184+
await expect(rows.nth(3)).toHaveAttribute('data-repeat-row', 'item-1');
185+
});
186+
187+
test('canonical Repeat Loops Run keeps native row identity, edits and samples without execution', async ({
188+
page,
189+
}) => {
190+
await page.goto(`${route}?frontend=react&mode=run`, {
191+
waitUntil: 'domcontentloaded',
192+
});
193+
await expectFreshRun(page);
194+
const frame = page.frameLocator('iframe');
195+
await expect(frame.getByRole('status')).toHaveText('Paused · 0 characters');
196+
await frame.getByRole('button', { name: 'Finish', exact: true }).click();
197+
const rows = frame.locator('[data-repeat-row]');
198+
await expect(rows).toHaveText(['1. Alpha', '2. Beta', '3. Gamma']);
199+
const alpha = await rows.first().elementHandle();
200+
const source = frame
201+
.getByRole('region', { name: 'Streaming JSON' })
202+
.locator('pre');
203+
const original = await source.textContent();
204+
await frame.getByRole('button', { name: 'Reverse items' }).click();
205+
await expect(rows).toHaveText(['1. Gamma', '2. Beta', '3. Alpha']);
206+
expect(await rows.nth(2).evaluate((node, old) => node === old, alpha)).toBe(
207+
true
208+
);
209+
await frame.getByRole('button', { name: 'Remove Beta', exact: true }).click();
210+
await frame.getByRole('button', { name: 'Add Item', exact: true }).click();
211+
await expect(rows).toHaveText(['1. Gamma', '2. Alpha', '3. Item 1']);
212+
await expect(source).toHaveText(original ?? '');
213+
for (const [label, heading] of [
214+
['Task List', 'Task List'],
215+
['Sections', 'Multiple Sections'],
216+
]) {
217+
await frame
218+
.getByRole('combobox', { name: 'Sample' })
219+
.selectOption({ label });
220+
await frame.getByRole('button', { name: 'Finish', exact: true }).click();
221+
await expect(
222+
frame.getByRole('heading', { name: heading, exact: true })
223+
).toBeVisible();
224+
await expect(rows).toHaveCount(0);
225+
}
226+
await frame.getByRole('combobox', { name: 'Sample' }).selectOption('0');
227+
await frame.getByRole('button', { name: 'Finish', exact: true }).click();
228+
await expect(rows).toHaveText(['1. Gamma', '2. Alpha', '3. Item 1']);
229+
await frame.getByRole('button', { name: 'Reset', exact: true }).click();
230+
await frame.getByRole('button', { name: 'Finish', exact: true }).click();
231+
await expect(rows).toHaveText(['1. Gamma', '2. Alpha', '3. Item 1']);
232+
});
233+
234+
test('local React Repeat Loops remains usable on a narrow screen', async ({
235+
page,
236+
}, testInfo) => {
237+
await page.setViewportSize({ width: 390, height: 844 });
238+
await page.goto(`${route}?frontend=react&mode=run`, {
239+
waitUntil: 'domcontentloaded',
240+
});
241+
await expectFreshRun(page);
242+
await expect(page.getByLabel('Example UI')).toBeVisible();
243+
const frame = page.frameLocator('iframe');
244+
await frame.getByRole('button', { name: 'Add Item', exact: true }).click();
245+
await frame.getByRole('button', { name: 'Finish', exact: true }).click();
246+
await expect(frame.locator('[data-repeat-row]')).toHaveText([
247+
'1. Alpha',
248+
'2. Beta',
249+
'3. Gamma',
250+
'4. Item 1',
251+
]);
252+
expect(
253+
await page.evaluate(
254+
() => document.documentElement.scrollWidth <= innerWidth
255+
)
256+
).toBe(true);
257+
await page.screenshot({
258+
path: testInfo.outputPath('react-repeat-loops-mobile.png'),
259+
});
260+
});

‎apps/website/playwright.config.ts‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -217,7 +217,10 @@ export const createWebsitePlaywrightConfig = (
217217
? [
218218
{
219219
command:
220-
'npx nx run-many -t build --projects=cockpit-langgraph-streaming-react,cockpit-langgraph-interrupts-react,cockpit-langgraph-memory-react,cockpit-langgraph-client-tools-react,cockpit-langgraph-persistence-react,cockpit-langgraph-durable-execution-react,cockpit-langgraph-subgraphs-react,cockpit-langgraph-time-travel-react,cockpit-langgraph-deployment-runtime-react,cockpit-ag-ui-streaming-react,cockpit-ag-ui-interrupts-react,cockpit-ag-ui-tool-views-react,cockpit-ag-ui-json-render-react,cockpit-ag-ui-subagents-react,cockpit-render-spec-rendering-react,cockpit-render-state-management-react --parallel=3 && node scripts/react-cockpit/serve.mjs',
220+
// website:e2e builds every installed React example first,
221+
// outside the server-readiness budget. Direct local
222+
// Playwright runs require those build outputs too.
223+
'node scripts/react-cockpit/serve.mjs',
221224
cwd: '../..',
222225
url: 'http://127.0.0.1:4600',
223226
reuseExistingServer,
@@ -336,6 +339,13 @@ export const createWebsitePlaywrightConfig = (
336339
reuseExistingServer,
337340
timeout: 180_000,
338341
},
342+
{
343+
command: 'node scripts/react-cockpit/serve.mjs render-repeat-loops --no-parent',
344+
cwd: '../..',
345+
url: 'http://127.0.0.1:4616',
346+
reuseExistingServer,
347+
timeout: 180_000,
348+
},
339349
]
340350
: []),
341351
]

‎apps/website/project.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,30 @@
7070
},
7171
"e2e": {
7272
"executor": "@nx/playwright:playwright",
73+
"dependsOn": [
74+
{
75+
"target": "build",
76+
"projects": [
77+
"cockpit-langgraph-streaming-react",
78+
"cockpit-langgraph-interrupts-react",
79+
"cockpit-langgraph-memory-react",
80+
"cockpit-langgraph-client-tools-react",
81+
"cockpit-langgraph-persistence-react",
82+
"cockpit-langgraph-durable-execution-react",
83+
"cockpit-langgraph-subgraphs-react",
84+
"cockpit-langgraph-time-travel-react",
85+
"cockpit-langgraph-deployment-runtime-react",
86+
"cockpit-ag-ui-streaming-react",
87+
"cockpit-ag-ui-interrupts-react",
88+
"cockpit-ag-ui-tool-views-react",
89+
"cockpit-ag-ui-json-render-react",
90+
"cockpit-ag-ui-subagents-react",
91+
"cockpit-render-spec-rendering-react",
92+
"cockpit-render-state-management-react",
93+
"cockpit-render-repeat-loops-react"
94+
]
95+
}
96+
],
7397
"options": {
7498
"config": "apps/website/playwright.config.ts"
7599
}

‎apps/website/public/AGENTS.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,3 +101,5 @@ Build with `npx nx build cockpit-ag-ui-subagents-react` and verify with `npx nx
101101
Render Spec has an experimental local React preview at https://threadplane.ai/docs/render/guides/specs?frontend=react. Three authored samples stream through a private partial JSON parser and installed native RenderSpec. Four registered read-only views receive literal props and native children. Play/Pause, seek, Finish and Reset share one local owner; sample changes and page exit revoke old callbacks. Copied frozen partial trees leave parser state private, and Complete requires the finished output to match the validated source. No backend runtime, model request or execution configuration is used. Build with `npx nx build cockpit-render-spec-rendering-react` and verify with `npx nx e2e cockpit-render-spec-rendering-react`.
102102

103103
State Management has an experimental local React preview at https://threadplane.ai/docs/render/guides/state-store?frontend=react. The React host owns copied immutable name, age and theme state; installed native RenderSpec resolves the three authored $state paths in read-only views. Edits survive partial playback, seek, Reset and sample selection. Invalid age drafts keep the last valid value, and reload restores the seed. Parser callbacks cannot replace host state; unknown bindings and executable fields are excluded. No backend runtime, model request or execution configuration is used. Build with `npx nx build cockpit-render-state-management-react` and verify with `npx nx e2e cockpit-render-state-management-react`.
104+
105+
Repeat Loops has an experimental local React preview at https://threadplane.ai/docs/render/guides/repeat-loops?frontend=react. The host owns immutable items with stable ids; native RenderSpec renders a repeated Card once and repeats its child rows keyed by item id. Add, remove and reverse items while preserving row identity and playback source. The list is bounded at 32; edits survive seek, Reset and sample changes, and reload restores the seed. Partial repeat metadata waits for its exact path and key. Read-only views exclude unknown expressions, nested repeats and executable fields. No backend runtime, model request or execution configuration is used. Build with `npx nx build cockpit-render-repeat-loops-react` and verify with `npx nx e2e cockpit-render-repeat-loops-react`.

0 commit comments

Comments
 (0)