ai dev server status

Author: isaacroldan

packages/app/src/cli/constants.ts

@@ -42,6 +42,7 @@ export const blocks = {
 export const ports = {
   graphiql: 3457,
   localhost: 3458,
+  devStatusServer: 3459,
 } as const
 
 export const EsbuildEnvVarRegex = /^([a-zA-Z_$])([a-zA-Z0-9_$])*$/

packages/app/src/cli/services/dev/app-events/app-event-watcher.ts

@@ -204,6 +204,16 @@ export class AppEventWatcher extends EventEmitter {
     return this
   }
 
+  /**
+   * Get the current app instance.
+   * This will be the latest version of the app after any reloads due to configuration changes.
+   *
+   * @returns The current app instance
+   */
+  get currentApp(): AppLinkedInterface {
+    return this.app
+  }
+
   onError(listener: (error: Error) => Promise<void> | void) {
     // eslint-disable-next-line @typescript-eslint/no-misused-promises
     this.addListener('error', listener)

packages/app/src/cli/services/dev/processes/dev-session/dev-session-process.ts

@@ -3,7 +3,8 @@ import {DevSession} from './dev-session.js'
 import {BaseProcess, DevProcessFunction} from '../types.js'
 import {DeveloperPlatformClient} from '../../../../utilities/developer-platform-client.js'
 import {AppLinkedInterface} from '../../../../models/app/app.js'
-import {AppEventWatcher} from '../../app-events/app-event-watcher.js'
+import {AppEvent, AppEventWatcher} from '../../app-events/app-event-watcher.js'
+import {SerialBatchProcessor} from '@shopify/cli-kit/node/serial-batch-processor'
 
 export interface DevSessionProcessOptions {
   developerPlatformClient: DeveloperPlatformClient
@@ -17,6 +18,7 @@ export interface DevSessionProcessOptions {
   appPreviewURL: string
   appLocalProxyURL: string
   devSessionStatusManager: DevSessionStatusManager
+  appEventsProcessor: SerialBatchProcessor<AppEvent>
 }
 
 export interface DevSessionProcess extends BaseProcess<DevSessionProcessOptions> {

packages/app/src/cli/services/dev/processes/dev-session/dev-session-status-manager.ts

@@ -18,6 +18,7 @@ export interface DevSessionStatus {
   previewURL?: string
   graphiqlURL?: string
   statusMessage?: {message: string; type: DevSessionStatusMessageType}
+  logs: {timestamp: string; message: string; prefix?: string}[]
 }
 
 export class DevSessionStatusManager extends EventEmitter {
@@ -26,8 +27,11 @@ export class DevSessionStatusManager extends EventEmitter {
     previewURL: undefined,
     graphiqlURL: undefined,
     statusMessage: undefined,
+    logs: [],
   }
 
+  private readonly _logs: {timestamp: number; message: string; prefix?: string}[] = []
+
   constructor(defaultStatus?: DevSessionStatus) {
     super()
     if (defaultStatus) this.currentStatus = defaultStatus
@@ -42,6 +46,10 @@ export class DevSessionStatusManager extends EventEmitter {
     this.emit('dev-session-update', newStatus)
   }
 
+  addLog(log: {timestamp: number; message: string; prefix?: string}) {
+    this._logs.push(log)
+  }
+
   setMessage(message: keyof typeof DevSessionStaticMessages) {
     this.updateStatus({statusMessage: DevSessionStaticMessages[message]})
   }
@@ -50,12 +58,17 @@ export class DevSessionStatusManager extends EventEmitter {
     return this.currentStatus
   }
 
+  get logs(): {timestamp: number; message: string; prefix?: string}[] {
+    return this._logs
+  }
+
   reset() {
     this.currentStatus = {
       isReady: false,
       previewURL: undefined,
       graphiqlURL: undefined,
       statusMessage: undefined,
+      logs: [],
     }
   }
 }

packages/app/src/cli/services/dev/processes/dev-session/dev-session.ts

@@ -49,7 +49,8 @@ export class DevSession {
     this.options = processOptions
     this.appWatcher = processOptions.appWatcher
     this.bundlePath = processOptions.appWatcher.buildOutputPath
-    this.appEventsProcessor = new SerialBatchProcessor((events: AppEvent[]) => this.processEvents(events))
+    this.appEventsProcessor = processOptions.appEventsProcessor
+    this.appEventsProcessor.processBatch = (events: AppEvent[]) => this.processEvents(events)
   }
 
   private async start() {

packages/app/src/cli/services/dev/processes/dev-status-server.test.ts

@@ -0,0 +1,31 @@
+import {setupDevStatusServerProcess, launchDevStatusServer} from './dev-status-server.js'
+import {DevSessionStatusManager} from './dev-session/dev-session-status-manager.js'
+import {testAppLinked} from '../../../models/app/app.test-data.js'
+import {AppEventWatcher} from '../app-events/app-event-watcher.js'
+import {describe, expect, test} from 'vitest'
+
+describe('dev-status-server', () => {
+  test('setupDevStatusServerProcess returns the correct process definition', async () => {
+    // Given
+    const devSessionStatusManager = new DevSessionStatusManager()
+    const localApp = await testAppLinked()
+    const appWatcher = new AppEventWatcher(localApp)
+    const options = {
+      devSessionStatusManager,
+      localApp,
+      appWatcher,
+      graphiqlUrl: 'http://localhost:3000/graphiql',
+    }
+
+    // When
+    const process = await setupDevStatusServerProcess(options)
+
+    // Then
+    expect(process).toMatchObject({
+      type: 'dev-status-server',
+      prefix: 'status',
+      function: launchDevStatusServer,
+      options,
+    })
+  })
+})

packages/app/src/cli/services/dev/processes/dev-status-server.ts

@@ -0,0 +1,87 @@
+import {BaseProcess, DevProcessFunction} from './types.js'
+import {DevSessionStatusManager} from './dev-session/dev-session-status-manager.js'
+import {AppLinkedInterface} from '../../../models/app/app.js'
+import {AppEvent, AppEventWatcher} from '../app-events/app-event-watcher.js'
+import {ports} from '../../../constants.js'
+import {createApp, createRouter, defineEventHandler} from 'h3'
+import {outputInfo} from '@shopify/cli-kit/node/output'
+import {getAvailableTCPPort} from '@shopify/cli-kit/node/tcp'
+import {SerialBatchProcessor} from '@shopify/cli-kit/node/serial-batch-processor'
+import {createServer} from 'http'
+
+interface DevStatusServerProcessOptions {
+  devSessionStatusManager: DevSessionStatusManager
+  localApp: AppLinkedInterface
+  appWatcher: AppEventWatcher
+  graphiqlUrl?: string
+  appEventsProcessor: SerialBatchProcessor<AppEvent>
+}
+
+export interface DevStatusServerProcess extends BaseProcess<DevStatusServerProcessOptions> {
+  type: 'dev-status-server'
+}
+
+export async function setupDevStatusServerProcess(
+  options: DevStatusServerProcessOptions,
+): Promise<DevStatusServerProcess> {
+  return {
+    type: 'dev-status-server',
+    prefix: 'status',
+    options,
+    function: launchDevStatusServer,
+  }
+}
+
+let lastReportedTimestamp = 0
+
+export const launchDevStatusServer: DevProcessFunction<DevStatusServerProcessOptions> = async (
+  {stdout, abortSignal},
+  {devSessionStatusManager, appWatcher, graphiqlUrl, appEventsProcessor},
+) => {
+  const app = createApp()
+  const router = createRouter()
+  const port = await getAvailableTCPPort(ports.devStatusServer)
+
+  router.get(
+    '/dev-status',
+    defineEventHandler(async () => {
+      const status = devSessionStatusManager.status
+      const currentApp = appWatcher.currentApp
+      const manifest = await currentApp.manifest()
+
+      const lastLog = devSessionStatusManager.logs[devSessionStatusManager.logs.length - 1]
+
+      const filteredLogs = devSessionStatusManager.logs.filter((log) => log.timestamp > lastReportedTimestamp)
+
+      if (lastLog && lastLog.timestamp > lastReportedTimestamp) {
+        lastReportedTimestamp = lastLog.timestamp
+      }
+
+      await appEventsProcessor.waitForCompletion()
+
+      return {
+        status: status.isReady ? status.statusMessage?.type : 'NOT_READY',
+        previewURL: status.previewURL,
+        statusMessage: status.statusMessage?.message,
+        manifest,
+        graphiqlUrl,
+        appName: currentApp.name,
+        logs: filteredLogs,
+        cursor: lastReportedTimestamp,
+      }
+    }),
+  )
+
+  app.use(router)
+
+  // eslint-disable-next-line @typescript-eslint/no-misused-promises
+  const server = createServer(app)
+
+  outputInfo(`Dev status server started on port ${port}`, stdout)
+
+  abortSignal.addEventListener('abort', () => {
+    server.close()
+  })
+
+  await server.listen(port)
+}

packages/app/src/cli/services/dev/processes/setup-dev-processes.ts

@@ -9,6 +9,7 @@ import {DevSessionProcess, setupDevSessionProcess} from './dev-session/dev-sessi
 import {AppLogsSubscribeProcess, setupAppLogsPollingProcess} from './app-logs-polling.js'
 import {AppWatcherProcess, setupAppWatcherProcess} from './app-watcher-process.js'
 import {DevSessionStatusManager} from './dev-session/dev-session-status-manager.js'
+import {DevStatusServerProcess, setupDevStatusServerProcess} from './dev-status-server.js'
 import {environmentVariableNames} from '../../../constants.js'
 import {AppLinkedInterface, getAppScopes, WebType} from '../../../models/app/app.js'
 
@@ -18,12 +19,13 @@ import {LocalhostCert, getProxyingWebServer} from '../../../utilities/app/http-r
 import {buildAppURLForWeb} from '../../../utilities/app/app-url.js'
 import {ApplicationURLs} from '../urls.js'
 import {DeveloperPlatformClient} from '../../../utilities/developer-platform-client.js'
-import {AppEventWatcher} from '../app-events/app-event-watcher.js'
+import {AppEvent, AppEventWatcher} from '../app-events/app-event-watcher.js'
 import {reloadApp} from '../../../models/app/loader.js'
 import {getAvailableTCPPort} from '@shopify/cli-kit/node/tcp'
 import {isTruthy} from '@shopify/cli-kit/node/context/utilities'
 import {getEnvironmentVariables} from '@shopify/cli-kit/node/environment'
 import {outputInfo} from '@shopify/cli-kit/node/output'
+import {SerialBatchProcessor} from '@shopify/cli-kit/node/serial-batch-processor'
 
 interface ProxyServerProcess
   extends BaseProcess<{
@@ -45,6 +47,7 @@ type DevProcessDefinition =
   | DevSessionProcess
   | AppLogsSubscribeProcess
   | AppWatcherProcess
+  | DevStatusServerProcess
 
 export type DevProcesses = DevProcessDefinition[]
 
@@ -107,7 +110,14 @@ export async function setupDevProcesses({
     ? `http://localhost:${graphiqlPort}/graphiql${graphiqlKey ? `?key=${graphiqlKey}` : ''}`
     : undefined
 
-  const devSessionStatusManager = new DevSessionStatusManager({isReady: false, previewURL, graphiqlURL})
+  const devSessionStatusManager = new DevSessionStatusManager({
+    isReady: false,
+    previewURL,
+    graphiqlURL,
+    logs: [],
+  })
+
+  const appEventsProcessor = new SerialBatchProcessor<AppEvent>()
 
   const processes = [
     ...(await setupWebProcesses({
@@ -158,6 +168,7 @@ export async function setupDevProcesses({
           appPreviewURL: appPreviewUrl,
           appLocalProxyURL: devConsoleURL,
           devSessionStatusManager,
+          appEventsProcessor,
         })
       : await setupDraftableExtensionsProcess({
           localApp: reloadedApp,
@@ -198,6 +209,13 @@ export async function setupDevProcesses({
     await setupAppWatcherProcess({
       appWatcher,
     }),
+    await setupDevStatusServerProcess({
+      devSessionStatusManager,
+      localApp: reloadedApp,
+      appWatcher,
+      graphiqlUrl: graphiqlURL,
+      appEventsProcessor,
+    }),
   ].filter(stripUndefineds)
 
   // Add http server proxy & configure ports, for processes that need it

packages/app/src/cli/services/dev/ui/components/DevSessionUI.test.tsx

@@ -24,6 +24,7 @@ const initialStatus: DevSessionStatus = {
   isReady: true,
   previewURL: 'https://shopify.com',
   graphiqlURL: 'https://graphiql.shopify.com',
+  logs: [],
 }
 
 const onAbort = vi.fn()

packages/app/src/cli/services/dev/ui/components/DevSessionUI.tsx

@@ -134,6 +134,9 @@ const DevSessionUI: FunctionComponent<DevSesionUIProps> = ({
         abortSignal={abortController.signal}
         keepRunningAfterProcessesResolve={true}
         useAlternativeColorPalette={true}
+        onLogOutput={(log) => {
+          devSessionStatusManager.addLog(log)
+        }}
       />
       {shouldShowPersistentDevInfo && (
         <Box marginTop={1} flexDirection="column">

packages/cli-kit/src/private/node/ui/components/ConcurrentOutput.tsx

@@ -14,6 +14,7 @@ export interface ConcurrentOutputProps {
   showTimestamps?: boolean
   keepRunningAfterProcessesResolve?: boolean
   useAlternativeColorPalette?: boolean
+  onLogOutput?: (log: {timestamp: number; message: string; prefix?: string}) => void
 }
 
 interface Chunk {
@@ -89,6 +90,7 @@ const ConcurrentOutput: FunctionComponent<ConcurrentOutputProps> = ({
   showTimestamps = true,
   keepRunningAfterProcessesResolve = false,
   useAlternativeColorPalette = false,
+  onLogOutput,
 }) => {
   const [processOutput, setProcessOutput] = useState<Chunk[]>([])
   const {exit: unmountInk} = useApp()
@@ -149,10 +151,16 @@ const ConcurrentOutput: FunctionComponent<ConcurrentOutputProps> = ({
               lines,
             },
           ])
+          onLogOutput?.({
+            timestamp: new Date().getTime(),
+            message: log,
+            prefix,
+          })
           next()
         },
       })
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [lineColor],
   )
 

packages/cli-kit/src/public/node/serial-batch-processor.test.ts

@@ -10,7 +10,7 @@ describe('SerialBatchProcessor', () => {
   })
 
   test('should process a single item in a batch', async () => {
-    const processor = new SerialBatchProcessor<string>(processBatchMock)
+    const processor = new SerialBatchProcessor<string>()
     processor.enqueue('item1')
     await processor.waitForCompletion()
 
@@ -27,7 +27,7 @@ describe('SerialBatchProcessor', () => {
       })
     })
 
-    const processor = new SerialBatchProcessor<string>(processBatchMock)
+    const processor = new SerialBatchProcessor<string>()
 
     // Enqueue first item, processing will start and pause
     processor.enqueue('itemA')
@@ -56,7 +56,7 @@ describe('SerialBatchProcessor', () => {
       .mockImplementationOnce(async (_items) => firstBatchPromise)
       .mockImplementationOnce(async (_items) => secondBatchPromise)
 
-    const processor = new SerialBatchProcessor<string>(processBatchMock)
+    const processor = new SerialBatchProcessor<string>()
     // Starts first batch
     processor.enqueue('item1')
     // Queued for second batch
@@ -82,7 +82,7 @@ describe('SerialBatchProcessor', () => {
   })
 
   test('waitForCompletion should resolve immediately if no items are queued and no processing is active', async () => {
-    const processor = new SerialBatchProcessor<string>(processBatchMock)
+    const processor = new SerialBatchProcessor<string>()
     await processor.waitForCompletion()
     expect(processBatchMock).not.toHaveBeenCalled()
   })
@@ -93,7 +93,7 @@ describe('SerialBatchProcessor', () => {
       throw testError
     })
 
-    const processor = new SerialBatchProcessor<string>(processBatchMock)
+    const processor = new SerialBatchProcessor<string>()
 
     processor.enqueue('item1-fail')