@kapeta/local-cluster-service 0.60.3 → 0.61.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# [0.61.0](https://github.com/kapetacom/local-cluster-service/compare/v0.60.3...v0.61.0) (2024-08-09)
+
+
+### Bug Fixes
+
+* Move UI server start to later ([fb75cb1](https://github.com/kapetacom/local-cluster-service/commit/fb75cb1b44e8047b9f451a12219d3c8295d9394e))
+
+
+### Features
+
+* Get UI shells and use them when creating pages ([de6dc6f](https://github.com/kapetacom/local-cluster-service/commit/de6dc6fcebeaad1522a9d280ee95cf163f73fb7f))
+
 ## [0.60.3](https://github.com/kapetacom/local-cluster-service/compare/v0.60.2...v0.60.3) (2024-08-07)
 
 

package/dist/cjs/src/storm/events.d.ts

@@ -280,6 +280,7 @@ export interface Page {
     method: string;
     conversationId: string;
     prompt: string;
+    shellPage?: string;
 }
 export interface StormEventPage {
     type: 'PAGE';
@@ -323,5 +324,23 @@ export interface StormEventUserJourney {
     created: number;
     payload: UserJourney;
 }
-export type StormEvent = StormEventCreateBlock | StormEventCreateConnection | StormEventCreatePlanProperties | StormEventInvalidResponse | StormEventPlanRetry | StormEventCreateDSL | StormEventCreateDSLResource | StormEventError | StormEventScreen | StormEventScreenCandidate | StormEventFileLogical | StormEventFileState | StormEventFileDone | StormEventFileFailed | StormEventFileChunk | StormEventDone | StormEventDefinitionChange | StormEventErrorClassifier | StormEventCodeFix | StormEventErrorDetails | StormEventBlockReady | StormEventPhases | StormEventBlockStatus | StormEventCreateDSLRetry | StormEventUserJourney | StormEventPage | StormEventPageUrl;
+export interface UIShell {
+    name: string;
+    content: string;
+    screens: string[];
+}
+export interface StormEventUIShell {
+    type: 'UI_SHELL';
+    reason: string;
+    created: number;
+    payload: UIShell;
+}
+export interface StormEventPromptImprove {
+    type: 'PROMPT_IMPROVE';
+    reason: string;
+    payload: {
+        prompt: string;
+    };
+}
+export type StormEvent = StormEventCreateBlock | StormEventCreateConnection | StormEventCreatePlanProperties | StormEventInvalidResponse | StormEventPlanRetry | StormEventCreateDSL | StormEventCreateDSLResource | StormEventError | StormEventScreen | StormEventScreenCandidate | StormEventFileLogical | StormEventFileState | StormEventFileDone | StormEventFileFailed | StormEventFileChunk | StormEventDone | StormEventDefinitionChange | StormEventErrorClassifier | StormEventCodeFix | StormEventErrorDetails | StormEventBlockReady | StormEventPhases | StormEventBlockStatus | StormEventCreateDSLRetry | StormEventUserJourney | StormEventUIShell | StormEventPage | StormEventPageUrl | StormEventPromptImprove;
 export {};

package/dist/cjs/src/storm/routes.js

@@ -110,24 +110,18 @@ router.post('/:handle/ui', async (req, res) => {
     try {
         const conversationId = req.headers[stormClient_1.ConversationIdHeader.toLowerCase()];
         const aiRequest = JSON.parse(req.stringBody ?? '{}');
+        // Get user journeys
         const userJourneysStream = await stormClient_1.stormClient.createUIUserJourneys(aiRequest.prompt, conversationId);
+        const outerConversationId = userJourneysStream.getConversationId();
         onRequestAborted(req, res, () => {
             userJourneysStream.abort();
         });
         res.set('Content-Type', 'application/x-ndjson');
         res.set('Access-Control-Expose-Headers', stormClient_1.ConversationIdHeader);
-        res.set(stormClient_1.ConversationIdHeader, userJourneysStream.getConversationId());
-        const promises = {};
-        const queue = new PromiseQueue_1.PromiseQueue(5);
-        onRequestAborted(req, res, () => {
-            queue.cancel();
-        });
-        const systemId = userJourneysStream.getConversationId();
-        UI_SERVERS[systemId] = new UIServer_1.UIServer(systemId);
-        await UI_SERVERS[systemId].start();
-        userJourneysStream.on('data', async (data) => {
+        res.set(stormClient_1.ConversationIdHeader, outerConversationId);
+        const uniqueUserJourneyScreens = {};
+        userJourneysStream.on('data', (data) => {
             try {
-                console.log('Processing user journey event', data);
                 sendEvent(res, data);
                 if (data.type !== 'USER_JOURNEY') {
                     return;
@@ -136,48 +130,109 @@ router.post('/:handle/ui', async (req, res) => {
                     return;
                 }
                 data.payload.screens.forEach((screen) => {
-                    if (screen.name in promises) {
-                        return;
+                    if (!uniqueUserJourneyScreens[screen.name]) {
+                        uniqueUserJourneyScreens[screen.name] = screen;
                     }
-                    promises[screen.name] = queue.add(() => new Promise(async (resolve, reject) => {
-                        try {
-                            const innerConversationId = node_uuid_1.default.v4();
-                            const screenStream = await stormClient_1.stormClient.createUIPage({
-                                prompt: screen.requirements,
-                                method: screen.method,
-                                path: screen.path,
-                                description: screen.requirements,
-                                name: screen.name,
-                                title: screen.title,
-                                filename: screen.filename,
-                                storage_prefix: userJourneysStream.getConversationId() + '_',
-                            }, innerConversationId);
-                            const promises = [];
-                            screenStream.on('data', (screenData) => {
-                                if (screenData.type === 'PAGE') {
-                                    screenData.payload.conversationId = innerConversationId;
-                                    promises.push(sendPageEvent(userJourneysStream.getConversationId(), screenData, res));
-                                }
-                                else {
-                                    sendEvent(res, screenData);
-                                }
-                            });
-                            screenStream.on('end', () => {
-                                Promise.allSettled(promises).finally(resolve);
-                            });
-                        }
-                        catch (e) {
-                            console.error('Failed to process screen', e);
-                            reject(e);
-                        }
-                    }));
                 });
             }
             catch (e) {
                 console.error('Failed to process event', e);
             }
         });
+        userJourneysStream.on('error', (error) => {
+            console.error('Error on userJourneysStream', error);
+            userJourneysStream.abort();
+            sendError(error, res);
+        });
         await waitForStormStream(userJourneysStream);
+        // Get the UI shells
+        const shellsStream = await stormClient_1.stormClient.createUIShells({
+            pages: Object.values(uniqueUserJourneyScreens).map((screen) => ({
+                name: screen.name,
+                title: screen.title,
+                filename: screen.filename,
+                path: screen.path,
+                method: screen.method,
+                requirements: screen.requirements,
+            })),
+        }, conversationId);
+        onRequestAborted(req, res, () => {
+            shellsStream.abort();
+        });
+        const uiShells = [];
+        shellsStream.on('data', (data) => {
+            console.log('Processing shell event', data);
+            sendEvent(res, data);
+            if (data.type !== 'UI_SHELL') {
+                return;
+            }
+            if (shellsStream.isAborted()) {
+                return;
+            }
+            uiShells.push(data.payload);
+        });
+        shellsStream.on('error', (error) => {
+            console.error('Error on shellsStream', error);
+            shellsStream.abort();
+            sendError(error, res);
+        });
+        await waitForStormStream(shellsStream);
+        UI_SERVERS[outerConversationId] = new UIServer_1.UIServer(outerConversationId);
+        await UI_SERVERS[outerConversationId].start();
+        // Get the pages (5 at a time)
+        const queue = new PromiseQueue_1.PromiseQueue(5);
+        onRequestAborted(req, res, () => {
+            queue.cancel();
+        });
+        for (const screen of Object.values(uniqueUserJourneyScreens)) {
+            await queue.add(() => new Promise(async (resolve, reject) => {
+                try {
+                    const innerConversationId = node_uuid_1.default.v4();
+                    const screenStream = await stormClient_1.stormClient.createUIPage({
+                        prompt: screen.requirements,
+                        method: screen.method,
+                        path: screen.path,
+                        description: screen.requirements,
+                        name: screen.name,
+                        title: screen.title,
+                        filename: screen.filename,
+                        storage_prefix: outerConversationId + '_',
+                        shell_page: uiShells.find((shell) => shell.screens.includes(screen.name))?.content,
+                    }, innerConversationId);
+                    const promiseList = [];
+                    screenStream.on('data', (screenData) => {
+                        if (screenData.type === 'PAGE') {
+                            promiseList.push(sendPageEvent(outerConversationId, {
+                                ...screenData,
+                                payload: {
+                                    ...screenData.payload,
+                                    conversationId: innerConversationId,
+                                },
+                            }, res));
+                        }
+                        else {
+                            sendEvent(res, screenData);
+                        }
+                    });
+                    screenStream.on('end', async () => {
+                        try {
+                            await Promise.allSettled(promiseList).finally(() => resolve(true));
+                        }
+                        catch (error) {
+                            console.error('Failed to process screen', error);
+                        }
+                    });
+                    screenStream.on('error', (error) => {
+                        console.error('Error on screenStream', error);
+                        screenStream.abort();
+                    });
+                }
+                catch (e) {
+                    console.error('Failed to process screen', e);
+                    reject(e);
+                }
+            }));
+        }
         await queue.wait();
         if (userJourneysStream.isAborted()) {
             return;

package/dist/cjs/src/storm/stormClient.d.ts

@@ -2,6 +2,16 @@ import { ConversationItem, StormFileImplementationPrompt, StormStream, StormUIIm
 import { Page, StormEventPageUrl } from './events';
 export declare const STORM_ID = "storm";
 export declare const ConversationIdHeader = "Conversation-Id";
+export interface UIShellsPrompt {
+    pages: {
+        name: string;
+        title: string;
+        filename: string;
+        path: string;
+        method: string;
+        requirements: string;
+    }[];
+}
 export interface UIPagePrompt {
     name: string;
     title: string;
@@ -11,6 +21,7 @@ export interface UIPagePrompt {
     method: string;
     description: string;
     storage_prefix: string;
+    shell_page?: string;
 }
 export interface UIPageEditPrompt {
     planDescription: string;
@@ -32,6 +43,7 @@ declare class StormClient {
     createMetadata(prompt: string, conversationId?: string): Promise<StormStream>;
     createUIPages(prompt: string, conversationId?: string): Promise<StormStream>;
     createUIUserJourneys(prompt: string, conversationId?: string): Promise<StormStream>;
+    createUIShells(prompt: UIShellsPrompt, conversationId?: string): Promise<StormStream>;
     createUIPage(prompt: UIPagePrompt, conversationId?: string): Promise<StormStream>;
     editPages(prompt: UIPageEditPrompt, conversationId?: string): Promise<StormStream>;
     listScreens(prompt: StormUIListPrompt, conversationId?: string): Promise<StormStream>;

package/dist/cjs/src/storm/stormClient.js

@@ -92,6 +92,12 @@ class StormClient {
             conversationId,
         });
     }
+    createUIShells(prompt, conversationId) {
+        return this.send('/v2/ui/shells', {
+            prompt: JSON.stringify(prompt),
+            conversationId,
+        });
+    }
     createUIPage(prompt, conversationId) {
         return this.send('/v2/ui/page', {
             prompt: prompt,

package/dist/esm/src/storm/events.d.ts

@@ -280,6 +280,7 @@ export interface Page {
     method: string;
     conversationId: string;
     prompt: string;
+    shellPage?: string;
 }
 export interface StormEventPage {
     type: 'PAGE';
@@ -323,5 +324,23 @@ export interface StormEventUserJourney {
     created: number;
     payload: UserJourney;
 }
-export type StormEvent = StormEventCreateBlock | StormEventCreateConnection | StormEventCreatePlanProperties | StormEventInvalidResponse | StormEventPlanRetry | StormEventCreateDSL | StormEventCreateDSLResource | StormEventError | StormEventScreen | StormEventScreenCandidate | StormEventFileLogical | StormEventFileState | StormEventFileDone | StormEventFileFailed | StormEventFileChunk | StormEventDone | StormEventDefinitionChange | StormEventErrorClassifier | StormEventCodeFix | StormEventErrorDetails | StormEventBlockReady | StormEventPhases | StormEventBlockStatus | StormEventCreateDSLRetry | StormEventUserJourney | StormEventPage | StormEventPageUrl;
+export interface UIShell {
+    name: string;
+    content: string;
+    screens: string[];
+}
+export interface StormEventUIShell {
+    type: 'UI_SHELL';
+    reason: string;
+    created: number;
+    payload: UIShell;
+}
+export interface StormEventPromptImprove {
+    type: 'PROMPT_IMPROVE';
+    reason: string;
+    payload: {
+        prompt: string;
+    };
+}
+export type StormEvent = StormEventCreateBlock | StormEventCreateConnection | StormEventCreatePlanProperties | StormEventInvalidResponse | StormEventPlanRetry | StormEventCreateDSL | StormEventCreateDSLResource | StormEventError | StormEventScreen | StormEventScreenCandidate | StormEventFileLogical | StormEventFileState | StormEventFileDone | StormEventFileFailed | StormEventFileChunk | StormEventDone | StormEventDefinitionChange | StormEventErrorClassifier | StormEventCodeFix | StormEventErrorDetails | StormEventBlockReady | StormEventPhases | StormEventBlockStatus | StormEventCreateDSLRetry | StormEventUserJourney | StormEventUIShell | StormEventPage | StormEventPageUrl | StormEventPromptImprove;
 export {};

package/dist/esm/src/storm/routes.js

@@ -110,24 +110,18 @@ router.post('/:handle/ui', async (req, res) => {
     try {
         const conversationId = req.headers[stormClient_1.ConversationIdHeader.toLowerCase()];
         const aiRequest = JSON.parse(req.stringBody ?? '{}');
+        // Get user journeys
         const userJourneysStream = await stormClient_1.stormClient.createUIUserJourneys(aiRequest.prompt, conversationId);
+        const outerConversationId = userJourneysStream.getConversationId();
         onRequestAborted(req, res, () => {
             userJourneysStream.abort();
         });
         res.set('Content-Type', 'application/x-ndjson');
         res.set('Access-Control-Expose-Headers', stormClient_1.ConversationIdHeader);
-        res.set(stormClient_1.ConversationIdHeader, userJourneysStream.getConversationId());
-        const promises = {};
-        const queue = new PromiseQueue_1.PromiseQueue(5);
-        onRequestAborted(req, res, () => {
-            queue.cancel();
-        });
-        const systemId = userJourneysStream.getConversationId();
-        UI_SERVERS[systemId] = new UIServer_1.UIServer(systemId);
-        await UI_SERVERS[systemId].start();
-        userJourneysStream.on('data', async (data) => {
+        res.set(stormClient_1.ConversationIdHeader, outerConversationId);
+        const uniqueUserJourneyScreens = {};
+        userJourneysStream.on('data', (data) => {
             try {
-                console.log('Processing user journey event', data);
                 sendEvent(res, data);
                 if (data.type !== 'USER_JOURNEY') {
                     return;
@@ -136,48 +130,109 @@ router.post('/:handle/ui', async (req, res) => {
                     return;
                 }
                 data.payload.screens.forEach((screen) => {
-                    if (screen.name in promises) {
-                        return;
+                    if (!uniqueUserJourneyScreens[screen.name]) {
+                        uniqueUserJourneyScreens[screen.name] = screen;
                     }
-                    promises[screen.name] = queue.add(() => new Promise(async (resolve, reject) => {
-                        try {
-                            const innerConversationId = node_uuid_1.default.v4();
-                            const screenStream = await stormClient_1.stormClient.createUIPage({
-                                prompt: screen.requirements,
-                                method: screen.method,
-                                path: screen.path,
-                                description: screen.requirements,
-                                name: screen.name,
-                                title: screen.title,
-                                filename: screen.filename,
-                                storage_prefix: userJourneysStream.getConversationId() + '_',
-                            }, innerConversationId);
-                            const promises = [];
-                            screenStream.on('data', (screenData) => {
-                                if (screenData.type === 'PAGE') {
-                                    screenData.payload.conversationId = innerConversationId;
-                                    promises.push(sendPageEvent(userJourneysStream.getConversationId(), screenData, res));
-                                }
-                                else {
-                                    sendEvent(res, screenData);
-                                }
-                            });
-                            screenStream.on('end', () => {
-                                Promise.allSettled(promises).finally(resolve);
-                            });
-                        }
-                        catch (e) {
-                            console.error('Failed to process screen', e);
-                            reject(e);
-                        }
-                    }));
                 });
             }
             catch (e) {
                 console.error('Failed to process event', e);
             }
         });
+        userJourneysStream.on('error', (error) => {
+            console.error('Error on userJourneysStream', error);
+            userJourneysStream.abort();
+            sendError(error, res);
+        });
         await waitForStormStream(userJourneysStream);
+        // Get the UI shells
+        const shellsStream = await stormClient_1.stormClient.createUIShells({
+            pages: Object.values(uniqueUserJourneyScreens).map((screen) => ({
+                name: screen.name,
+                title: screen.title,
+                filename: screen.filename,
+                path: screen.path,
+                method: screen.method,
+                requirements: screen.requirements,
+            })),
+        }, conversationId);
+        onRequestAborted(req, res, () => {
+            shellsStream.abort();
+        });
+        const uiShells = [];
+        shellsStream.on('data', (data) => {
+            console.log('Processing shell event', data);
+            sendEvent(res, data);
+            if (data.type !== 'UI_SHELL') {
+                return;
+            }
+            if (shellsStream.isAborted()) {
+                return;
+            }
+            uiShells.push(data.payload);
+        });
+        shellsStream.on('error', (error) => {
+            console.error('Error on shellsStream', error);
+            shellsStream.abort();
+            sendError(error, res);
+        });
+        await waitForStormStream(shellsStream);
+        UI_SERVERS[outerConversationId] = new UIServer_1.UIServer(outerConversationId);
+        await UI_SERVERS[outerConversationId].start();
+        // Get the pages (5 at a time)
+        const queue = new PromiseQueue_1.PromiseQueue(5);
+        onRequestAborted(req, res, () => {
+            queue.cancel();
+        });
+        for (const screen of Object.values(uniqueUserJourneyScreens)) {
+            await queue.add(() => new Promise(async (resolve, reject) => {
+                try {
+                    const innerConversationId = node_uuid_1.default.v4();
+                    const screenStream = await stormClient_1.stormClient.createUIPage({
+                        prompt: screen.requirements,
+                        method: screen.method,
+                        path: screen.path,
+                        description: screen.requirements,
+                        name: screen.name,
+                        title: screen.title,
+                        filename: screen.filename,
+                        storage_prefix: outerConversationId + '_',
+                        shell_page: uiShells.find((shell) => shell.screens.includes(screen.name))?.content,
+                    }, innerConversationId);
+                    const promiseList = [];
+                    screenStream.on('data', (screenData) => {
+                        if (screenData.type === 'PAGE') {
+                            promiseList.push(sendPageEvent(outerConversationId, {
+                                ...screenData,
+                                payload: {
+                                    ...screenData.payload,
+                                    conversationId: innerConversationId,
+                                },
+                            }, res));
+                        }
+                        else {
+                            sendEvent(res, screenData);
+                        }
+                    });
+                    screenStream.on('end', async () => {
+                        try {
+                            await Promise.allSettled(promiseList).finally(() => resolve(true));
+                        }
+                        catch (error) {
+                            console.error('Failed to process screen', error);
+                        }
+                    });
+                    screenStream.on('error', (error) => {
+                        console.error('Error on screenStream', error);
+                        screenStream.abort();
+                    });
+                }
+                catch (e) {
+                    console.error('Failed to process screen', e);
+                    reject(e);
+                }
+            }));
+        }
         await queue.wait();
         if (userJourneysStream.isAborted()) {
             return;

package/dist/esm/src/storm/stormClient.d.ts

@@ -2,6 +2,16 @@ import { ConversationItem, StormFileImplementationPrompt, StormStream, StormUIIm
 import { Page, StormEventPageUrl } from './events';
 export declare const STORM_ID = "storm";
 export declare const ConversationIdHeader = "Conversation-Id";
+export interface UIShellsPrompt {
+    pages: {
+        name: string;
+        title: string;
+        filename: string;
+        path: string;
+        method: string;
+        requirements: string;
+    }[];
+}
 export interface UIPagePrompt {
     name: string;
     title: string;
@@ -11,6 +21,7 @@ export interface UIPagePrompt {
     method: string;
     description: string;
     storage_prefix: string;
+    shell_page?: string;
 }
 export interface UIPageEditPrompt {
     planDescription: string;
@@ -32,6 +43,7 @@ declare class StormClient {
     createMetadata(prompt: string, conversationId?: string): Promise<StormStream>;
     createUIPages(prompt: string, conversationId?: string): Promise<StormStream>;
     createUIUserJourneys(prompt: string, conversationId?: string): Promise<StormStream>;
+    createUIShells(prompt: UIShellsPrompt, conversationId?: string): Promise<StormStream>;
     createUIPage(prompt: UIPagePrompt, conversationId?: string): Promise<StormStream>;
     editPages(prompt: UIPageEditPrompt, conversationId?: string): Promise<StormStream>;
     listScreens(prompt: StormUIListPrompt, conversationId?: string): Promise<StormStream>;

package/dist/esm/src/storm/stormClient.js

@@ -92,6 +92,12 @@ class StormClient {
             conversationId,
         });
     }
+    createUIShells(prompt, conversationId) {
+        return this.send('/v2/ui/shells', {
+            prompt: JSON.stringify(prompt),
+            conversationId,
+        });
+    }
     createUIPage(prompt, conversationId) {
         return this.send('/v2/ui/page', {
             prompt: prompt,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kapeta/local-cluster-service",
-    "version": "0.60.3",
+    "version": "0.61.0",
     "description": "Manages configuration, ports and service discovery for locally running Kapeta systems",
     "type": "commonjs",
     "exports": {

package/src/storm/events.ts

@@ -332,6 +332,7 @@ export interface Page {
     method: string;
     conversationId: string;
     prompt: string;
+    shellPage?: string;
 }
 
 // Event for creating a page
@@ -384,6 +385,27 @@ export interface StormEventUserJourney {
     payload: UserJourney;
 }
 
+export interface UIShell {
+    name: string;
+    content: string;
+    screens: string[];
+}
+
+export interface StormEventUIShell {
+    type: 'UI_SHELL';
+    reason: string;
+    created: number;
+    payload: UIShell;
+}
+
+export interface StormEventPromptImprove {
+    type: 'PROMPT_IMPROVE';
+    reason: string;
+    payload: {
+        prompt: string;
+    };
+}
+
 export type StormEvent =
     | StormEventCreateBlock
     | StormEventCreateConnection
@@ -410,5 +432,7 @@ export type StormEvent =
     | StormEventBlockStatus
     | StormEventCreateDSLRetry
     | StormEventUserJourney
+    | StormEventUIShell
     | StormEventPage
-    | StormEventPageUrl;
+    | StormEventPageUrl
+    | StormEventPromptImprove;

package/src/storm/routes.ts

@@ -13,7 +13,7 @@ import { stringBody } from '../middleware/stringBody';
 import { KapetaBodyRequest } from '../types';
 import { StormCodegenRequest, StormContextRequest, StormCreateBlockRequest, StormStream } from './stream';
 import { ConversationIdHeader, stormClient, UIPagePrompt, UIPageEditPrompt, UIPageEditRequest } from './stormClient';
-import { Page, StormEvent, StormEventPage, StormEventPhaseType } from './events';
+import { Page, StormEvent, StormEventPage, StormEventPhaseType, UIShell, UserJourneyScreen } from './events';
 import {
     createPhaseEndEvent,
     createPhaseStartEvent,
@@ -132,7 +132,9 @@ router.post('/:handle/ui', async (req: KapetaBodyRequest, res: Response) => {
 
         const aiRequest: StormContextRequest = JSON.parse(req.stringBody ?? '{}');
 
+        // Get user journeys
         const userJourneysStream = await stormClient.createUIUserJourneys(aiRequest.prompt, conversationId);
+        const outerConversationId = userJourneysStream.getConversationId();
 
         onRequestAborted(req, res, () => {
             userJourneysStream.abort();
@@ -140,23 +142,12 @@ router.post('/:handle/ui', async (req: KapetaBodyRequest, res: Response) => {
 
         res.set('Content-Type', 'application/x-ndjson');
         res.set('Access-Control-Expose-Headers', ConversationIdHeader);
-        res.set(ConversationIdHeader, userJourneysStream.getConversationId());
+        res.set(ConversationIdHeader, outerConversationId);
 
-        const promises: { [key: string]: Promise<void> } = {};
+        const uniqueUserJourneyScreens: Record<string, UserJourneyScreen> = {};
 
-        const queue = new PromiseQueue(5);
-        onRequestAborted(req, res, () => {
-            queue.cancel();
-        });
-
-        const systemId = userJourneysStream.getConversationId();
-
-        UI_SERVERS[systemId] = new UIServer(systemId);
-        await UI_SERVERS[systemId].start();
-
-        userJourneysStream.on('data', async (data: StormEvent) => {
+        userJourneysStream.on('data', (data: StormEvent) => {
             try {
-                console.log('Processing user journey event', data);
                 sendEvent(res, data);
                 if (data.type !== 'USER_JOURNEY') {
                     return;
@@ -167,54 +158,139 @@ router.post('/:handle/ui', async (req: KapetaBodyRequest, res: Response) => {
                 }
 
                 data.payload.screens.forEach((screen) => {
-                    if (screen.name in promises) {
-                        return;
+                    if (!uniqueUserJourneyScreens[screen.name]) {
+                        uniqueUserJourneyScreens[screen.name] = screen;
                     }
-                    promises[screen.name] = queue.add(
-                        () =>
-                            new Promise(async (resolve, reject) => {
-                                try {
-                                    const innerConversationId = uuid.v4();
-                                    const screenStream = await stormClient.createUIPage(
-                                        {
-                                            prompt: screen.requirements,
-                                            method: screen.method,
-                                            path: screen.path,
-                                            description: screen.requirements,
-                                            name: screen.name,
-                                            title: screen.title,
-                                            filename: screen.filename,
-                                            storage_prefix: userJourneysStream.getConversationId() + '_',
-                                        },
-                                        innerConversationId
-                                    );
-                                    const promises: Promise<void>[] = [];
-                                    screenStream.on('data', (screenData: StormEvent) => {
-                                        if (screenData.type === 'PAGE') {
-                                            screenData.payload.conversationId = innerConversationId;
-                                            promises.push(
-                                                sendPageEvent(userJourneysStream.getConversationId(), screenData, res)
-                                            );
-                                        } else {
-                                            sendEvent(res, screenData);
-                                        }
-                                    });
-                                    screenStream.on('end', () => {
-                                        Promise.allSettled(promises).finally(resolve);
-                                    });
-                                } catch (e: any) {
-                                    console.error('Failed to process screen', e);
-                                    reject(e);
-                                }
-                            })
-                    );
                 });
             } catch (e) {
                 console.error('Failed to process event', e);
             }
         });
 
+        userJourneysStream.on('error', (error) => {
+            console.error('Error on userJourneysStream', error);
+            userJourneysStream.abort();
+            sendError(error, res);
+        });
+
         await waitForStormStream(userJourneysStream);
+
+        // Get the UI shells
+        const shellsStream = await stormClient.createUIShells(
+            {
+                pages: Object.values(uniqueUserJourneyScreens).map((screen) => ({
+                    name: screen.name,
+                    title: screen.title,
+                    filename: screen.filename,
+                    path: screen.path,
+                    method: screen.method,
+                    requirements: screen.requirements,
+                })),
+            },
+            conversationId
+        );
+
+        onRequestAborted(req, res, () => {
+            shellsStream.abort();
+        });
+
+        const uiShells: UIShell[] = [];
+
+        shellsStream.on('data', (data: StormEvent) => {
+            console.log('Processing shell event', data);
+            sendEvent(res, data);
+
+            if (data.type !== 'UI_SHELL') {
+                return;
+            }
+
+            if (shellsStream.isAborted()) {
+                return;
+            }
+
+            uiShells.push(data.payload);
+        });
+
+        shellsStream.on('error', (error) => {
+            console.error('Error on shellsStream', error);
+            shellsStream.abort();
+            sendError(error, res);
+        });
+
+        await waitForStormStream(shellsStream);
+
+        UI_SERVERS[outerConversationId] = new UIServer(outerConversationId);
+        await UI_SERVERS[outerConversationId].start();
+
+        // Get the pages (5 at a time)
+        const queue = new PromiseQueue(5);
+
+        onRequestAborted(req, res, () => {
+            queue.cancel();
+        });
+
+        for (const screen of Object.values(uniqueUserJourneyScreens)) {
+            await queue.add(
+                () =>
+                    new Promise(async (resolve, reject) => {
+                        try {
+                            const innerConversationId = uuid.v4();
+                            const screenStream = await stormClient.createUIPage(
+                                {
+                                    prompt: screen.requirements,
+                                    method: screen.method,
+                                    path: screen.path,
+                                    description: screen.requirements,
+                                    name: screen.name,
+                                    title: screen.title,
+                                    filename: screen.filename,
+                                    storage_prefix: outerConversationId + '_',
+                                    shell_page: uiShells.find((shell) => shell.screens.includes(screen.name))?.content,
+                                },
+                                innerConversationId
+                            );
+
+                            const promiseList: Promise<void>[] = [];
+                            screenStream.on('data', (screenData: StormEvent) => {
+                                if (screenData.type === 'PAGE') {
+                                    promiseList.push(
+                                        sendPageEvent(
+                                            outerConversationId,
+                                            {
+                                                ...screenData,
+                                                payload: {
+                                                    ...screenData.payload,
+                                                    conversationId: innerConversationId,
+                                                },
+                                            },
+                                            res
+                                        )
+                                    );
+                                } else {
+                                    sendEvent(res, screenData);
+                                }
+                            });
+
+                            screenStream.on('end', async () => {
+                                try {
+                                    await Promise.allSettled(promiseList).finally(() => resolve(true));
+                                } catch (error) {
+                                    console.error('Failed to process screen', error);
+                                }
+                            });
+
+                            screenStream.on('error', (error) => {
+                                console.error('Error on screenStream', error);
+                                screenStream.abort();
+                            });
+                        } catch (e) {
+                            console.error('Failed to process screen', e);
+                            reject(e);
+                        }
+                    })
+            );
+        }
+
         await queue.wait();
 
         if (userJourneysStream.isAborted()) {
@@ -222,8 +298,8 @@ router.post('/:handle/ui', async (req: KapetaBodyRequest, res: Response) => {
         }
 
         sendDone(res);
-    } catch (err: any) {
-        sendError(err, res);
+    } catch (err) {
+        sendError(err as Error, res);
         if (!res.closed) {
             res.end();
         }

package/src/storm/stormClient.ts

@@ -21,6 +21,17 @@ export const STORM_ID = 'storm';
 
 export const ConversationIdHeader = 'Conversation-Id';
 
+export interface UIShellsPrompt {
+    pages: {
+        name: string;
+        title: string;
+        filename: string;
+        path: string;
+        method: string;
+        requirements: string;
+    }[];
+}
+
 export interface UIPagePrompt {
     name: string;
     title: string;
@@ -30,6 +41,7 @@ export interface UIPagePrompt {
     method: string;
     description: string;
     storage_prefix: string;
+    shell_page?: string;
 }
 
 export interface UIPageEditPrompt {
@@ -153,6 +165,13 @@ class StormClient {
         });
     }
 
+    public createUIShells(prompt: UIShellsPrompt, conversationId?: string) {
+        return this.send('/v2/ui/shells', {
+            prompt: JSON.stringify(prompt),
+            conversationId,
+        });
+    }
+
     public createUIPage(prompt: UIPagePrompt, conversationId?: string) {
         return this.send('/v2/ui/page', {
             prompt: prompt,