@kapeta/local-cluster-service 0.53.5 → 0.54.0

package/.eslintrc.cjs

@@ -6,6 +6,7 @@ module.exports = {
     rules: {
         '@typescript-eslint/no-explicit-any': 'off',
         '@typescript-eslint/no-non-null-assertion': 'off',
+        '@typescript-eslint/no-use-before-define': 'off',
         '@typescript-eslint/no-unsafe-assignment': 'off',
         '@typescript-eslint/no-unsafe-member-access': 'off',
         '@typescript-eslint/no-unsafe-return': 'off',

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [0.54.0](https://github.com/kapetacom/local-cluster-service/compare/v0.53.5...v0.54.0) (2024-06-17)
+
+
+### Features
+
+* add support for split UI routes + screen context in AI service ([#178](https://github.com/kapetacom/local-cluster-service/issues/178)) ([4330a72](https://github.com/kapetacom/local-cluster-service/commit/4330a72eddb5fe82f9e7a9c2af412d47091cf9b0))
+
 ## [0.53.5](https://github.com/kapetacom/local-cluster-service/compare/v0.53.4...v0.53.5) (2024-06-17)
 
 

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

@@ -44,7 +44,6 @@ const path_2 = __importStar(require("path"));
 const node_os_1 = __importDefault(require("node:os"));
 const fs_1 = require("fs");
 const yaml_1 = __importDefault(require("yaml"));
-const fs = __importStar(require("node:fs"));
 const SIMULATED_DELAY = 1000;
 const ENABLE_SIMULATED_DELAY = false;
 class SimulatedFileDelay {
@@ -239,8 +238,11 @@ class StormCodegen {
             return;
         }
         const blockUri = (0, nodejs_utils_1.parseKapetaUri)(block.uri);
-        const relevantFiles = allFiles.filter((file) => file.type !== codegen_1.AIFileTypes.IGNORE && file.type !== codegen_1.AIFileTypes.WEB_SCREEN);
+        const relevantFiles = allFiles.filter((file) => file.type !== codegen_1.AIFileTypes.IGNORE &&
+            file.type !== codegen_1.AIFileTypes.WEB_SCREEN &&
+            file.type !== codegen_1.AIFileTypes.WEB_ROUTER);
         const uiTemplates = allFiles.filter((file) => file.type === codegen_1.AIFileTypes.WEB_SCREEN);
+        const webRouters = allFiles.filter((file) => file.type === codegen_1.AIFileTypes.WEB_ROUTER);
         const screenFiles = [];
         let filteredEvents = [];
         for (const event of this.events) {
@@ -249,14 +251,55 @@ class StormCodegen {
                 filteredEvents = [];
             }
         }
-        if (uiTemplates.length > 0) {
-            const uiStream = await stormClient_1.stormClient.createUIImplementation({
+        const screenEvents = [];
+        // generate screens
+        const screenStream = await stormClient_1.stormClient.listScreens({
+            events: filteredEvents,
+            templates: uiTemplates,
+            context: relevantFiles,
+            blockName: block.aiName,
+            prompt: this.userPrompt,
+        });
+        screenStream.on('data', (evt) => {
+            if (evt.type === 'SCREEN') {
+                screenEvents.push(evt);
+            }
+            this.handleUiOutput(blockUri, block.aiName, evt);
+        });
+        this.out.on('aborted', () => {
+            screenStream.abort();
+        });
+        await screenStream.waitForDone();
+        // screenfiles
+        const screenTemplates = screenEvents
+            .map((screenEvent) => ({
+            ...uiTemplates.find((template) => template.filename.endsWith(screenEvent.payload.template)),
+            filename: screenEvent.payload.filename,
+        }))
+            .filter((tpl) => !!tpl.content);
+        await Promise.all(screenTemplates.concat(webRouters).map(async (template) => {
+            const payload = {
                 events: filteredEvents,
-                templates: uiTemplates,
-                context: relevantFiles,
                 blockName: block.aiName,
+                filename: template.filename,
+                template: template,
+                context: relevantFiles.concat([
+                    {
+                        type: codegen_1.AIFileTypes.INSTRUCTIONS,
+                        mode: codegen_1.MODE_CREATE_ONLY,
+                        permissions: '0644',
+                        filename: '<screens>.md',
+                        content: `
+# Generated screens
+
+${JSON.stringify({ screenEvents })}
+
+`,
+                    },
+                ]),
                 prompt: this.userPrompt,
-            });
+            };
+            const uiStream = await stormClient_1.stormClient.createUIImplementation(payload);
             uiStream.on('data', (evt) => {
                 const uiFile = this.handleUiOutput(blockUri, block.aiName, evt);
                 if (uiFile != undefined) {
@@ -267,21 +310,34 @@ class StormCodegen {
                 uiStream.abort();
             });
             await uiStream.waitForDone();
-        }
+        }));
         if (this.isAborted()) {
             return;
         }
+        const basePath = this.getBasePath(block.content.metadata.name);
+        const screenFilesConverted = screenFiles.map((screenFile) => {
+            return {
+                filename: screenFile.payload.filename,
+                content: screenFile.payload.content,
+                mode: codegen_1.MODE_CREATE_ONLY,
+                permissions: '0644',
+                type: codegen_1.AIFileTypes.WEB_SCREEN,
+            };
+        });
         // Gather the context files for implementation. These will be all be passed to the AI
-        const contextFiles = relevantFiles.filter((file) => ![codegen_1.AIFileTypes.SERVICE, codegen_1.AIFileTypes.WEB_SCREEN].includes(file.type));
+        const contextFiles = relevantFiles.filter((file) => ![codegen_1.AIFileTypes.SERVICE, codegen_1.AIFileTypes.WEB_SCREEN, codegen_1.AIFileTypes.WEB_ROUTER].includes(file.type));
         // Send the service and UI templates to the AI. These will be sent one-by-one in addition to the context files
         const serviceFiles = allFiles.filter((file) => file.type === codegen_1.AIFileTypes.SERVICE);
         if (serviceFiles.length > 0) {
             await this.processTemplates(blockUri, block.aiName, stormClient_1.stormClient.createServiceImplementation.bind(stormClient_1.stormClient), serviceFiles, contextFiles);
         }
-        const basePath = this.getBasePath(block.content.metadata.name);
         if (this.isAborted()) {
             return;
         }
+        for (const screenFile of screenFilesConverted) {
+            const filePath = (0, path_2.join)(basePath, screenFile.filename);
+            await (0, promises_1.writeFile)(filePath, screenFile.content);
+        }
         for (const serviceFile of serviceFiles) {
             const filePath = (0, path_2.join)(basePath, serviceFile.filename);
             await (0, promises_1.writeFile)(filePath, serviceFile.content);
@@ -296,16 +352,6 @@ class StormCodegen {
             const filePath = (0, path_2.join)(basePath, screenFile.payload.filename);
             await (0, promises_1.writeFile)(filePath, screenFile.payload.content);
         }
-        const screenFilesConverted = screenFiles.map((screenFile) => {
-            return {
-                filename: screenFile.payload.filename,
-                content: screenFile.payload.content,
-                mode: codegen_1.MODE_CREATE_ONLY,
-                permissions: '0644',
-                type: codegen_1.AIFileTypes.WEB_SCREEN,
-            };
-        });
-        allFiles.push(...screenFilesConverted);
         const blockRef = block.uri;
         this.emitBlockStatus(blockUri, block.aiName, events_1.StormEventBlockStatusType.QA);
         const filesToBeFixed = serviceFiles.concat(contextFiles).concat(screenFilesConverted);
@@ -466,7 +512,7 @@ class StormCodegen {
         const files = new Set(filesForContext);
         files.add(filename);
         const requestedFiles = Array.from(files).flatMap((file) => {
-            if (fs.existsSync(file)) {
+            if ((0, fs_1.existsSync)(file)) {
                 return file;
             }
             // file does not exist - look for similar
@@ -551,7 +597,7 @@ class StormCodegen {
                 // They will need to be implemented by the AI
                 return;
             }
-            if (file.type === codegen_1.AIFileTypes.WEB_SCREEN) {
+            if ([codegen_1.AIFileTypes.WEB_ROUTER, codegen_1.AIFileTypes.WEB_SCREEN].includes(file.type)) {
                 // Don't send the web screen files to the stream yet
                 // They will need to be implemented by the AI
                 return;

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

@@ -159,6 +159,7 @@ export interface StormEventScreen {
         template: string;
         description: string;
         url: string;
+        filename: string;
     };
 }
 export interface StormEventScreenCandidate {

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

@@ -1,4 +1,4 @@
-import { ConversationItem, StormFileImplementationPrompt, StormStream, StormUIImplementationPrompt } from './stream';
+import { ConversationItem, StormFileImplementationPrompt, StormStream, StormUIImplementationPrompt, StormUIListPrompt } from './stream';
 export declare const STORM_ID = "storm";
 export declare const ConversationIdHeader = "Conversation-Id";
 declare class StormClient {
@@ -7,6 +7,7 @@ declare class StormClient {
     private createOptions;
     private send;
     createMetadata(prompt: string, conversationId?: string): Promise<StormStream>;
+    listScreens(prompt: StormUIListPrompt, conversationId?: string): Promise<StormStream>;
     createUIImplementation(prompt: StormUIImplementationPrompt, conversationId?: string): Promise<StormStream>;
     createServiceImplementation(prompt: StormFileImplementationPrompt, conversationId?: string): Promise<StormStream>;
     createErrorClassification(prompt: string, history?: ConversationItem[], conversationId?: string): Promise<StormStream>;

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

@@ -80,6 +80,12 @@ class StormClient {
             conversationId,
         });
     }
+    listScreens(prompt, conversationId) {
+        return this.send('/v2/ui/list', {
+            prompt,
+            conversationId,
+        });
+    }
     createUIImplementation(prompt, conversationId) {
         return this.send('/v2/ui/merge', {
             prompt,

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

@@ -50,6 +50,14 @@ export interface StormFileImplementationPrompt {
     prompt: string;
 }
 export interface StormUIImplementationPrompt {
+    events: StormEvent[];
+    template: StormFileInfo;
+    filename: string;
+    context: StormFileInfo[];
+    blockName: string;
+    prompt: string;
+}
+export interface StormUIListPrompt {
     events: StormEvent[];
     templates: StormFileInfo[];
     context: StormFileInfo[];

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

@@ -44,7 +44,6 @@ const path_2 = __importStar(require("path"));
 const node_os_1 = __importDefault(require("node:os"));
 const fs_1 = require("fs");
 const yaml_1 = __importDefault(require("yaml"));
-const fs = __importStar(require("node:fs"));
 const SIMULATED_DELAY = 1000;
 const ENABLE_SIMULATED_DELAY = false;
 class SimulatedFileDelay {
@@ -239,8 +238,11 @@ class StormCodegen {
             return;
         }
         const blockUri = (0, nodejs_utils_1.parseKapetaUri)(block.uri);
-        const relevantFiles = allFiles.filter((file) => file.type !== codegen_1.AIFileTypes.IGNORE && file.type !== codegen_1.AIFileTypes.WEB_SCREEN);
+        const relevantFiles = allFiles.filter((file) => file.type !== codegen_1.AIFileTypes.IGNORE &&
+            file.type !== codegen_1.AIFileTypes.WEB_SCREEN &&
+            file.type !== codegen_1.AIFileTypes.WEB_ROUTER);
         const uiTemplates = allFiles.filter((file) => file.type === codegen_1.AIFileTypes.WEB_SCREEN);
+        const webRouters = allFiles.filter((file) => file.type === codegen_1.AIFileTypes.WEB_ROUTER);
         const screenFiles = [];
         let filteredEvents = [];
         for (const event of this.events) {
@@ -249,14 +251,55 @@ class StormCodegen {
                 filteredEvents = [];
             }
         }
-        if (uiTemplates.length > 0) {
-            const uiStream = await stormClient_1.stormClient.createUIImplementation({
+        const screenEvents = [];
+        // generate screens
+        const screenStream = await stormClient_1.stormClient.listScreens({
+            events: filteredEvents,
+            templates: uiTemplates,
+            context: relevantFiles,
+            blockName: block.aiName,
+            prompt: this.userPrompt,
+        });
+        screenStream.on('data', (evt) => {
+            if (evt.type === 'SCREEN') {
+                screenEvents.push(evt);
+            }
+            this.handleUiOutput(blockUri, block.aiName, evt);
+        });
+        this.out.on('aborted', () => {
+            screenStream.abort();
+        });
+        await screenStream.waitForDone();
+        // screenfiles
+        const screenTemplates = screenEvents
+            .map((screenEvent) => ({
+            ...uiTemplates.find((template) => template.filename.endsWith(screenEvent.payload.template)),
+            filename: screenEvent.payload.filename,
+        }))
+            .filter((tpl) => !!tpl.content);
+        await Promise.all(screenTemplates.concat(webRouters).map(async (template) => {
+            const payload = {
                 events: filteredEvents,
-                templates: uiTemplates,
-                context: relevantFiles,
                 blockName: block.aiName,
+                filename: template.filename,
+                template: template,
+                context: relevantFiles.concat([
+                    {
+                        type: codegen_1.AIFileTypes.INSTRUCTIONS,
+                        mode: codegen_1.MODE_CREATE_ONLY,
+                        permissions: '0644',
+                        filename: '<screens>.md',
+                        content: `
+# Generated screens
+
+${JSON.stringify({ screenEvents })}
+
+`,
+                    },
+                ]),
                 prompt: this.userPrompt,
-            });
+            };
+            const uiStream = await stormClient_1.stormClient.createUIImplementation(payload);
             uiStream.on('data', (evt) => {
                 const uiFile = this.handleUiOutput(blockUri, block.aiName, evt);
                 if (uiFile != undefined) {
@@ -267,21 +310,34 @@ class StormCodegen {
                 uiStream.abort();
             });
             await uiStream.waitForDone();
-        }
+        }));
         if (this.isAborted()) {
             return;
         }
+        const basePath = this.getBasePath(block.content.metadata.name);
+        const screenFilesConverted = screenFiles.map((screenFile) => {
+            return {
+                filename: screenFile.payload.filename,
+                content: screenFile.payload.content,
+                mode: codegen_1.MODE_CREATE_ONLY,
+                permissions: '0644',
+                type: codegen_1.AIFileTypes.WEB_SCREEN,
+            };
+        });
         // Gather the context files for implementation. These will be all be passed to the AI
-        const contextFiles = relevantFiles.filter((file) => ![codegen_1.AIFileTypes.SERVICE, codegen_1.AIFileTypes.WEB_SCREEN].includes(file.type));
+        const contextFiles = relevantFiles.filter((file) => ![codegen_1.AIFileTypes.SERVICE, codegen_1.AIFileTypes.WEB_SCREEN, codegen_1.AIFileTypes.WEB_ROUTER].includes(file.type));
         // Send the service and UI templates to the AI. These will be sent one-by-one in addition to the context files
         const serviceFiles = allFiles.filter((file) => file.type === codegen_1.AIFileTypes.SERVICE);
         if (serviceFiles.length > 0) {
             await this.processTemplates(blockUri, block.aiName, stormClient_1.stormClient.createServiceImplementation.bind(stormClient_1.stormClient), serviceFiles, contextFiles);
         }
-        const basePath = this.getBasePath(block.content.metadata.name);
         if (this.isAborted()) {
             return;
         }
+        for (const screenFile of screenFilesConverted) {
+            const filePath = (0, path_2.join)(basePath, screenFile.filename);
+            await (0, promises_1.writeFile)(filePath, screenFile.content);
+        }
         for (const serviceFile of serviceFiles) {
             const filePath = (0, path_2.join)(basePath, serviceFile.filename);
             await (0, promises_1.writeFile)(filePath, serviceFile.content);
@@ -296,16 +352,6 @@ class StormCodegen {
             const filePath = (0, path_2.join)(basePath, screenFile.payload.filename);
             await (0, promises_1.writeFile)(filePath, screenFile.payload.content);
         }
-        const screenFilesConverted = screenFiles.map((screenFile) => {
-            return {
-                filename: screenFile.payload.filename,
-                content: screenFile.payload.content,
-                mode: codegen_1.MODE_CREATE_ONLY,
-                permissions: '0644',
-                type: codegen_1.AIFileTypes.WEB_SCREEN,
-            };
-        });
-        allFiles.push(...screenFilesConverted);
         const blockRef = block.uri;
         this.emitBlockStatus(blockUri, block.aiName, events_1.StormEventBlockStatusType.QA);
         const filesToBeFixed = serviceFiles.concat(contextFiles).concat(screenFilesConverted);
@@ -466,7 +512,7 @@ class StormCodegen {
         const files = new Set(filesForContext);
         files.add(filename);
         const requestedFiles = Array.from(files).flatMap((file) => {
-            if (fs.existsSync(file)) {
+            if ((0, fs_1.existsSync)(file)) {
                 return file;
             }
             // file does not exist - look for similar
@@ -551,7 +597,7 @@ class StormCodegen {
                 // They will need to be implemented by the AI
                 return;
             }
-            if (file.type === codegen_1.AIFileTypes.WEB_SCREEN) {
+            if ([codegen_1.AIFileTypes.WEB_ROUTER, codegen_1.AIFileTypes.WEB_SCREEN].includes(file.type)) {
                 // Don't send the web screen files to the stream yet
                 // They will need to be implemented by the AI
                 return;

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

@@ -159,6 +159,7 @@ export interface StormEventScreen {
         template: string;
         description: string;
         url: string;
+        filename: string;
     };
 }
 export interface StormEventScreenCandidate {

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

@@ -1,4 +1,4 @@
-import { ConversationItem, StormFileImplementationPrompt, StormStream, StormUIImplementationPrompt } from './stream';
+import { ConversationItem, StormFileImplementationPrompt, StormStream, StormUIImplementationPrompt, StormUIListPrompt } from './stream';
 export declare const STORM_ID = "storm";
 export declare const ConversationIdHeader = "Conversation-Id";
 declare class StormClient {
@@ -7,6 +7,7 @@ declare class StormClient {
     private createOptions;
     private send;
     createMetadata(prompt: string, conversationId?: string): Promise<StormStream>;
+    listScreens(prompt: StormUIListPrompt, conversationId?: string): Promise<StormStream>;
     createUIImplementation(prompt: StormUIImplementationPrompt, conversationId?: string): Promise<StormStream>;
     createServiceImplementation(prompt: StormFileImplementationPrompt, conversationId?: string): Promise<StormStream>;
     createErrorClassification(prompt: string, history?: ConversationItem[], conversationId?: string): Promise<StormStream>;

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

@@ -80,6 +80,12 @@ class StormClient {
             conversationId,
         });
     }
+    listScreens(prompt, conversationId) {
+        return this.send('/v2/ui/list', {
+            prompt,
+            conversationId,
+        });
+    }
     createUIImplementation(prompt, conversationId) {
         return this.send('/v2/ui/merge', {
             prompt,

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

@@ -50,6 +50,14 @@ export interface StormFileImplementationPrompt {
     prompt: string;
 }
 export interface StormUIImplementationPrompt {
+    events: StormEvent[];
+    template: StormFileInfo;
+    filename: string;
+    context: StormFileInfo[];
+    blockName: string;
+    prompt: string;
+}
+export interface StormUIListPrompt {
     events: StormEvent[];
     templates: StormFileInfo[];
     context: StormFileInfo[];

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kapeta/local-cluster-service",
-    "version": "0.53.5",
+    "version": "0.54.0",
     "description": "Manages configuration, ports and service discovery for locally running Kapeta systems",
     "type": "commonjs",
     "exports": {
@@ -50,7 +50,7 @@
     },
     "homepage": "https://github.com/kapetacom/local-cluster-service#readme",
     "dependencies": {
-        "@kapeta/codegen": "^1.6.0",
+        "@kapeta/codegen": "^1.6.1",
         "@kapeta/config-mapper": "^1.2.2",
         "@kapeta/kaplang-core": "^1.17.2",
         "@kapeta/local-cluster-config": "^0.4.2",

package/src/storm/codegen.ts

@@ -13,6 +13,7 @@ import {
     GeneratedResult,
     MODE_CREATE_ONLY,
 } from '@kapeta/codegen';
+
 import { BlockDefinition } from '@kapeta/schemas';
 import { codeGeneratorManager } from '../codeGeneratorManager';
 import { STORM_ID, stormClient } from './stormClient';
@@ -23,6 +24,7 @@ import {
     StormEventFileChunk,
     StormEventFileDone,
     StormEventFileLogical,
+    StormEventScreen,
 } from './events';
 import { BlockDefinitionInfo, StormEventParser } from './event-parser';
 import { ConversationItem, StormFileImplementationPrompt, StormFileInfo, StormStream } from './stream';
@@ -31,11 +33,14 @@ import { writeFile } from 'fs/promises';
 import path from 'path';
 import Path, { join } from 'path';
 import os from 'node:os';
-import { readFileSync, writeFileSync } from 'fs';
+import { readFileSync, writeFileSync, existsSync } from 'fs';
 import YAML from 'yaml';
-import * as fs from 'node:fs';
+import assert from 'assert';
 
-type ImplementationGenerator = (prompt: StormFileImplementationPrompt, conversationId?: string) => Promise<StormStream>;
+type ImplementationGenerator<T = StormFileImplementationPrompt> = (
+    prompt: T,
+    conversationId?: string
+) => Promise<StormStream>;
 
 interface ErrorClassification {
     error: string;
@@ -266,9 +271,13 @@ export class StormCodegen {
         const blockUri = parseKapetaUri(block.uri);
 
         const relevantFiles: StormFileInfo[] = allFiles.filter(
-            (file) => file.type !== AIFileTypes.IGNORE && file.type !== AIFileTypes.WEB_SCREEN
+            (file) =>
+                file.type !== AIFileTypes.IGNORE &&
+                file.type !== AIFileTypes.WEB_SCREEN &&
+                file.type !== AIFileTypes.WEB_ROUTER
         );
-        const uiTemplates: StormFileInfo[] = allFiles.filter((file) => file.type === AIFileTypes.WEB_SCREEN);
+        const uiTemplates = allFiles.filter((file) => file.type === AIFileTypes.WEB_SCREEN);
+        const webRouters = allFiles.filter((file) => file.type === AIFileTypes.WEB_ROUTER);
         const screenFiles: StormEventFileDone[] = [];
         let filteredEvents = [] as StormEvent[];
         for (const event of this.events) {
@@ -277,36 +286,96 @@ export class StormCodegen {
                 filteredEvents = [];
             }
         }
-        if (uiTemplates.length > 0) {
-            const uiStream = await stormClient.createUIImplementation({
-                events: filteredEvents,
-                templates: uiTemplates,
-                context: relevantFiles,
-                blockName: block.aiName,
-                prompt: this.userPrompt,
-            });
 
-            uiStream.on('data', (evt) => {
-                const uiFile = this.handleUiOutput(blockUri, block.aiName, evt);
-                if (uiFile != undefined) {
-                    screenFiles.push(uiFile);
-                }
-            });
+        const screenEvents: StormEventScreen[] = [];
+        // generate screens
+        const screenStream = await stormClient.listScreens({
+            events: filteredEvents,
+            templates: uiTemplates,
+            context: relevantFiles,
+            blockName: block.aiName,
+            prompt: this.userPrompt,
+        });
+        screenStream.on('data', (evt) => {
+            if (evt.type === 'SCREEN') {
+                screenEvents.push(evt);
+            }
+            this.handleUiOutput(blockUri, block.aiName, evt);
+        });
 
-            this.out.on('aborted', () => {
-                uiStream.abort();
-            });
+        this.out.on('aborted', () => {
+            screenStream.abort();
+        });
 
-            await uiStream.waitForDone();
-        }
+        await screenStream.waitForDone();
+
+        // screenfiles
+        const screenTemplates = screenEvents
+            .map((screenEvent) => ({
+                ...uiTemplates.find((template) => template.filename.endsWith(screenEvent.payload.template)),
+                filename: screenEvent.payload.filename,
+            }))
+            .filter((tpl): tpl is StormFileInfo => !!tpl.content);
+
+        await Promise.all(
+            screenTemplates.concat(webRouters).map(async (template) => {
+                const payload = {
+                    events: filteredEvents,
+                    blockName: block.aiName,
+                    filename: template.filename,
+                    template: template,
+                    context: relevantFiles.concat([
+                        {
+                            type: AIFileTypes.INSTRUCTIONS,
+                            mode: MODE_CREATE_ONLY,
+                            permissions: '0644',
+                            filename: '<screens>.md',
+                            content: `
+# Generated screens
+
+${JSON.stringify({ screenEvents })}
+
+`,
+                        },
+                    ]),
+                    prompt: this.userPrompt,
+                };
+
+                const uiStream = await stormClient.createUIImplementation(payload);
+
+                uiStream.on('data', (evt) => {
+                    const uiFile = this.handleUiOutput(blockUri, block.aiName, evt);
+                    if (uiFile != undefined) {
+                        screenFiles.push(uiFile);
+                    }
+                });
+
+                this.out.on('aborted', () => {
+                    uiStream.abort();
+                });
+
+                await uiStream.waitForDone();
+            })
+        );
 
         if (this.isAborted()) {
             return;
         }
+        const basePath = this.getBasePath(block.content.metadata.name);
+
+        const screenFilesConverted = screenFiles.map((screenFile) => {
+            return {
+                filename: screenFile.payload.filename,
+                content: screenFile.payload.content,
+                mode: MODE_CREATE_ONLY,
+                permissions: '0644',
+                type: AIFileTypes.WEB_SCREEN,
+            };
+        });
 
         // Gather the context files for implementation. These will be all be passed to the AI
         const contextFiles: StormFileInfo[] = relevantFiles.filter(
-            (file) => ![AIFileTypes.SERVICE, AIFileTypes.WEB_SCREEN].includes(file.type)
+            (file) => ![AIFileTypes.SERVICE, AIFileTypes.WEB_SCREEN, AIFileTypes.WEB_ROUTER].includes(file.type)
         );
 
         // Send the service and UI templates to the AI. These will be sent one-by-one in addition to the context files
@@ -321,12 +390,15 @@ export class StormCodegen {
             );
         }
 
-        const basePath = this.getBasePath(block.content.metadata.name);
-
         if (this.isAborted()) {
             return;
         }
 
+        for (const screenFile of screenFilesConverted) {
+            const filePath = join(basePath, screenFile.filename);
+            await writeFile(filePath, screenFile.content);
+        }
+
         for (const serviceFile of serviceFiles) {
             const filePath = join(basePath, serviceFile.filename);
             await writeFile(filePath, serviceFile.content);
@@ -345,16 +417,6 @@ export class StormCodegen {
             await writeFile(filePath, screenFile.payload.content);
         }
 
-        const screenFilesConverted = screenFiles.map((screenFile) => {
-            return {
-                filename: screenFile.payload.filename,
-                content: screenFile.payload.content,
-                mode: MODE_CREATE_ONLY,
-                permissions: '0644',
-                type: AIFileTypes.WEB_SCREEN,
-            };
-        });
-        allFiles.push(...screenFilesConverted);
         const blockRef = block.uri;
 
         this.emitBlockStatus(blockUri, block.aiName, StormEventBlockStatusType.QA);
@@ -594,7 +656,7 @@ export class StormCodegen {
         files.add(filename);
 
         const requestedFiles = Array.from(files).flatMap((file) => {
-            if (fs.existsSync(file)) {
+            if (existsSync(file)) {
                 return file;
             }
 
@@ -696,7 +758,7 @@ export class StormCodegen {
                 return;
             }
 
-            if (file.type === AIFileTypes.WEB_SCREEN) {
+            if ([AIFileTypes.WEB_ROUTER, AIFileTypes.WEB_SCREEN].includes(file.type)) {
                 // Don't send the web screen files to the stream yet
                 // They will need to be implemented by the AI
                 return;

package/src/storm/events.ts

@@ -193,6 +193,7 @@ export interface StormEventScreen {
         template: string;
         description: string;
         url: string;
+        filename: string;
     };
 }
 

package/src/storm/stormClient.ts

@@ -12,6 +12,7 @@ import {
     StormFileImplementationPrompt,
     StormStream,
     StormUIImplementationPrompt,
+    StormUIListPrompt,
 } from './stream';
 import { getRawAsset } from 'node:sea';
 
@@ -112,8 +113,15 @@ class StormClient {
         });
     }
 
+    public listScreens(prompt: StormUIListPrompt, conversationId?: string) {
+        return this.send('/v2/ui/list', {
+            prompt,
+            conversationId,
+        });
+    }
+
     public createUIImplementation(prompt: StormUIImplementationPrompt, conversationId?: string) {
-        return this.send<StormUIImplementationPrompt>('/v2/ui/merge', {
+        return this.send('/v2/ui/merge', {
             prompt,
             conversationId,
         });

package/src/storm/stream.ts

@@ -117,6 +117,15 @@ export interface StormFileImplementationPrompt {
 }
 
 export interface StormUIImplementationPrompt {
+    events: StormEvent[];
+    template: StormFileInfo;
+    filename: string;
+    context: StormFileInfo[];
+    blockName: string;
+    prompt: string;
+}
+
+export interface StormUIListPrompt {
     events: StormEvent[];
     templates: StormFileInfo[];
     context: StormFileInfo[];