platformatic
diff --git a/‎.gitignore‎
Lines changed: 3 additions & 0 deletions b/‎.gitignore‎
Lines changed: 3 additions & 0 deletions
diff --git a/‎lib/start.js‎
Lines changed: 6 additions & 5 deletions b/‎lib/start.js‎
Lines changed: 6 additions & 5 deletions
diff --git a/‎package-lock.json‎
Lines changed: 2 additions & 2 deletions b/‎package-lock.json‎
Lines changed: 2 additions & 2 deletions
diff --git a/‎test/start.test.ts‎
Lines changed: 9 additions & 7 deletions b/‎test/start.test.ts‎
Lines changed: 9 additions & 7 deletions
diff --git a/‎web/backend/routes/root.ts‎
Lines changed: 85 additions & 9 deletions b/‎web/backend/routes/root.ts‎
Lines changed: 85 additions & 9 deletions
diff --git a/‎web/backend/test/routes/root.test.ts‎
Lines changed: 89 additions & 0 deletions b/‎web/backend/test/routes/root.test.ts‎
Lines changed: 89 additions & 0 deletions
@@ -137,3 +137,6 @@ playwright-report
 
 # Backend
 web/backend/openapi.json
+
+# profiles
+watt-admin-*.html
@@ -5,7 +5,6 @@ import { join } from 'path'
 import { parseArgs, promisify } from 'util'
 import { request } from 'undici'
 import { exec } from 'child_process'
-import closeWithGrace from 'close-with-grace'
 
 const __dirname = import.meta.dirname
 
@@ -39,9 +38,9 @@ export async function start (client, selectedRuntime) {
     try {
       const { statusCode, body } = await requestRecord('stop')
       if (statusCode === 200) {
-        await body.dump()
-        const bundlePath = join(__dirname, '..', 'web', 'frontend', 'dist', 'index.html')
-        await execAsync(`${process.platform === 'win32' ? 'start' : 'open'} ${bundlePath}`)
+        const { path } = await body.json()
+        await execAsync(`${process.platform === 'win32' ? 'start' : 'open'} ${path}`)
+        return path
       } else {
         console.error(`Failure triggering the stop command: ${await body.text()}`)
       }
@@ -69,9 +68,11 @@ export async function start (client, selectedRuntime) {
     async function recordAndShutdown () {
       console.log('SIGINT received, recording metrics and shutting down...')
       clearTimeout(recordTimeout)
-      await recordMetrics(entrypointUrl)
+      const path = await recordMetrics(entrypointUrl)
       await shutdown()
       process.removeAllListeners('SIGINT')
+
+      console.log(`Profile recorded at ${path}`)
     }
 
     process.once('SIGINT', () => {
 
@@ -2,6 +2,7 @@ import { RuntimeApiClient } from '@platformatic/control'
 import { describe, it, beforeEach, afterEach, mock } from 'node:test'
 import assert from 'node:assert'
 import * as util from 'util'
+import { setImmediate as immediate } from 'node:timers/promises'
 
 interface MockServer {
   started: boolean
@@ -86,7 +87,8 @@ describe('start', () => {
           statusCode: 200,
           body: {
             dump: async () => {},
-            text: async () => 'success'
+            text: async () => 'success',
+            json: async () => ({ path: 'profile-data/index.html' })
           }
         }
       }
@@ -211,8 +213,8 @@ describe('start', () => {
       process.emit('SIGINT')
 
       // Wait for async operations to complete
-      await new Promise(resolve => setImmediate(resolve))
-      await new Promise(resolve => setImmediate(resolve))
+      await immediate()
+      await immediate()
 
       // 5. Check if the 'stop' record request was made
       assert.strictEqual(requestMock.mock.calls.length, 2, 'Should have made a second request to stop recording')
@@ -274,19 +276,19 @@ describe('start', () => {
 
       // First SIGINT - should trigger shutdown
       process.emit('SIGINT')
-      await new Promise(resolve => setImmediate(resolve))
+      await immediate()
 
       // During shutdown, there should be an ignoring handler
       const listenerCountDuringShutdown = process.listenerCount('SIGINT')
 
       // Send second SIGINT during shutdown
       process.emit('SIGINT')
-      await new Promise(resolve => setImmediate(resolve))
+      await immediate()
 
       // Send third SIGINT to be sure
       process.emit('SIGINT')
-      await new Promise(resolve => setImmediate(resolve))
-      await new Promise(resolve => setImmediate(resolve))
+      await immediate()
+      await immediate()
 
       // Verify shutdown was only called once
       const closeMock = mockServer.close as MockFunction<() => Promise<void>>
 
@@ -2,10 +2,15 @@ import type { FastifyInstance } from 'fastify'
 import type { JsonSchemaToTsProvider } from '@fastify/type-provider-json-schema-to-ts'
 import { RuntimeApiClient } from '@platformatic/control'
 import { getPidToLoad, getSelectableRuntimes } from '../utils/runtimes.ts'
-import { writeFile, readFile } from 'fs/promises'
+import { writeFile, readFile } from 'node:fs/promises'
+import { exec } from 'node:child_process'
+import { promisify } from 'node:util'
+
+const execAsync = promisify(exec)
 import { checkRecordState } from '../utils/states.ts'
 import { join } from 'path'
 import { pidParamSchema, selectableRuntimeSchema, modeSchema, profileSchema } from '../schemas/index.ts'
+import { generateDefaultFilename, getUniqueFilePath } from '../utils/output.ts'
 
 const __dirname = import.meta.dirname
 
@@ -80,7 +85,7 @@ export default async function (fastify: FastifyInstance) {
               items: {
                 anyOf: [
                   {
-                    additionalProperties: false,
+                    additionalProperties: true,
                     type: 'object',
                     required: ['id', 'type', 'status', 'version', 'localUrl', 'entrypoint', 'dependencies'],
                     properties: {
@@ -158,11 +163,24 @@ export default async function (fastify: FastifyInstance) {
       body: {
         type: 'object',
         additionalProperties: false,
-        properties: { mode: modeSchema, profile: profileSchema },
+        properties: {
+          mode: modeSchema,
+          profile: profileSchema,
+          outputPath: { type: 'string', description: 'Directory or file path for the output HTML. Defaults to cwd with auto-generated filename.' }
+        },
         required: ['mode', 'profile']
+      },
+      response: {
+        200: {
+          type: 'object',
+          additionalProperties: false,
+          properties: {
+            path: { type: 'string', description: 'Path to the saved recording HTML file' }
+          }
+        }
       }
     }
-  }, async ({ body: { mode, profile: type }, params: { pid } }) => {
+  }, async ({ body: { mode, profile: type, outputPath }, params: { pid } }, reply) => {
     const from = fastify.loaded.mode
     const to = mode
     if (!checkRecordState({ from, to })) {
@@ -177,27 +195,85 @@ export default async function (fastify: FastifyInstance) {
       }
       fastify.loaded.type = type
       fastify.loaded.metrics = {}
+      return {}
     }
 
     if (mode === 'stop') {
       try {
+        reply.log.trace({ pid, type, outputPath }, 'Stopping recording and generating output')
         const runtimes = getSelectableRuntimes(await api.getRuntimes(), false)
-        const services = await api.getRuntimeApplications(getPidToLoad(runtimes))
+        reply.log.trace({ pid }, 'Fetching services from runtime')
+        const pidToLoad = pid || getPidToLoad(runtimes)
+        reply.log.trace({ pidToLoad }, 'Determined PID to load for recording')
+        const services = await api.getRuntimeApplications(pidToLoad)
 
         const profile: Record<string, Uint8Array> = {}
         for (const { id } of applications) {
           const profileData = Buffer.from(await api.stopApplicationProfiling(pid, id, { type }))
-          await writeFile(join(__dirname, '..', '..', 'frontend', 'dist', `${fastify.loaded.type}-profile-${id}.pb`), profileData)
           profile[id] = new Uint8Array(profileData)
         }
 
+        reply.log.trace({ pid, type }, 'Profiling data collected from runtime')
+
         const loadedJson = JSON.stringify({ runtimes, services, metrics: fastify.loaded.metrics[getPidToLoad(runtimes)], profile, type })
 
         const scriptToAppend = `  <script>window.LOADED_JSON=${loadedJson}</script>\n</body>`
-        const bundlePath = join(__dirname, '..', '..', 'frontend', 'dist', 'index.html')
-        await writeFile(bundlePath, (await readFile(bundlePath, 'utf8')).replace('</body>', scriptToAppend), 'utf8')
+        const templatePath = join(__dirname, '..', '..', 'frontend', 'dist', 'index.html')
+        const fontsDir = join(__dirname, '..', '..', 'frontend', 'dist', 'fonts')
+        let templateHtml = await readFile(templatePath, 'utf8')
+
+        // Inline fonts as base64 data URIs for offline usage
+        const fontFiles = [
+          { path: 'Inter/Inter-VariableFont_wght.ttf', url: './fonts/Inter/Inter-VariableFont_wght.ttf' },
+          { path: 'Roboto_Mono/RobotoMono-VariableFont_wght.ttf', url: './fonts/Roboto_Mono/RobotoMono-VariableFont_wght.ttf' }
+        ]
+        for (const font of fontFiles) {
+          try {
+            const fontData = await readFile(join(fontsDir, font.path))
+            const base64Font = fontData.toString('base64')
+            const dataUri = `data:font/ttf;base64,${base64Font}`
+            templateHtml = templateHtml.replaceAll(font.url, dataUri)
+          } catch (err) {
+            reply.log.warn({ err, font: font.path }, 'Failed to inline font')
+          }
+        }
+
+        // Remove font preload links (not needed with inlined fonts)
+        templateHtml = templateHtml.replace(/<link rel="preload"[^>]*\.ttf"[^>]*>/g, '')
+
+        const outputHtml = templateHtml.replace('</body>', scriptToAppend)
+
+        // Determine output file path
+        let targetPath: string
+        if (outputPath) {
+          // If outputPath ends with .html, use it as-is; otherwise treat as directory
+          if (outputPath.endsWith('.html')) {
+            targetPath = outputPath
+          } else {
+            targetPath = join(outputPath, generateDefaultFilename())
+          }
+        } else {
+          // Default to current working directory
+          targetPath = join(process.cwd(), generateDefaultFilename())
+        }
+
+        // Ensure we never overwrite an existing file
+        reply.log.trace({ targetPath }, 'Saving recording to output path')
+        const uniquePath = await getUniqueFilePath(targetPath)
+        await writeFile(uniquePath, outputHtml, 'utf8')
+        reply.log.info({ path: uniquePath }, 'Recording saved')
+
+        // Open the file in the default browser (skip during CI/tests)
+        if (!process.env.CI && !process.env.NODE_TEST_CONTEXT) {
+          const openCommand = process.platform === 'win32' ? 'start' : 'open'
+          execAsync(`${openCommand} "${uniquePath}"`)
+            .then(() => reply.log.info({ path: uniquePath }, 'Recording opened in browser'))
+            .catch((err) => reply.log.warn({ err, path: uniquePath }, 'Failed to open recording in browser'))
+        }
+
+        return { path: uniquePath }
       } catch (err) {
-        fastify.log.error({ err }, 'Unable to save the loaded JSON')
+        reply.log.error({ err }, 'Unable to save the loaded JSON')
       }
     }
   })
 
@@ -1,6 +1,9 @@
 import test from 'node:test'
 import assert from 'node:assert'
 import { getServer, startWatt } from '../helper.ts'
+import { readFile, rm, readdir, mkdir } from 'node:fs/promises'
+import { join } from 'node:path'
+import { tmpdir } from 'node:os'
 
 test('no runtime running', async (t) => {
   const server = await getServer(t)
@@ -107,3 +110,89 @@ test('runtime is running', async (t) => {
   })
   assert.strictEqual(restart.statusCode, 200, 'check for restart endpoint')
 })
+
+test('record endpoint accepts outputPath parameter', async (t) => {
+  await startWatt(t)
+  const server = await getServer(t)
+  const res = await server.inject({ url: '/runtimes?includeAdmin=true' })
+  const [runtime] = res.json()
+  const runtimePid = runtime.pid
+
+  // Start recording
+  await server.inject({ url: `/record/${runtimePid}`, method: 'POST', body: { mode: 'start', profile: 'cpu' } })
+  assert.strictEqual(server.loaded.mode, 'start', 'start mode')
+
+  // Stop recording with outputPath parameter - should be accepted without validation error
+  const stopRes = await server.inject({
+    url: `/record/${runtimePid}`,
+    method: 'POST',
+    body: { mode: 'stop', profile: 'cpu', outputPath: '/tmp/test-output.html' }
+  })
+  assert.strictEqual(stopRes.statusCode, 200, 'outputPath parameter should be accepted')
+  assert.strictEqual(server.loaded.mode, 'stop', 'stop mode')
+})
+
+test('record endpoint accepts outputPath as directory path', async (t) => {
+  await startWatt(t)
+  const server = await getServer(t)
+  const res = await server.inject({ url: '/runtimes?includeAdmin=true' })
+  const [runtime] = res.json()
+  const runtimePid = runtime.pid
+
+  // Start recording first
+  await server.inject({ url: `/record/${runtimePid}`, method: 'POST', body: { mode: 'start', profile: 'cpu' } })
+
+  // Stop with outputPath as directory (no .html extension)
+  const stopRes = await server.inject({
+    url: `/record/${runtimePid}`,
+    method: 'POST',
+    body: { mode: 'stop', profile: 'cpu', outputPath: '/tmp/recordings' }
+  })
+  assert.strictEqual(stopRes.statusCode, 200, 'should accept directory path')
+  assert.strictEqual(server.loaded.mode, 'stop', 'stop mode')
+})
+
+test('record creates file with embedded JSON at custom outputPath', async (t) => {
+  await startWatt(t)
+  const server = await getServer(t)
+  const res = await server.inject({ url: '/runtimes?includeAdmin=true' })
+  const [runtime] = res.json()
+  const runtimePid = runtime.pid
+
+  // Create a temp directory for output
+  const tempDir = join(tmpdir(), `watt-admin-test-${Date.now()}`)
+  await mkdir(tempDir, { recursive: true })
+  t.after(async () => {
+    await rm(tempDir, { recursive: true, force: true })
+  })
+
+  // Start recording
+  const startRes = await server.inject({
+    url: `/record/${runtimePid}`,
+    method: 'POST',
+    body: { mode: 'start', profile: 'cpu' }
+  })
+  assert.strictEqual(startRes.statusCode, 200, 'start recording should succeed')
+  assert.strictEqual(server.loaded.mode, 'start', 'mode should be start')
+
+  // Stop recording with custom outputPath (directory)
+  const stopRes = await server.inject({
+    url: `/record/${runtimePid}`,
+    method: 'POST',
+    body: { mode: 'stop', profile: 'cpu', outputPath: tempDir }
+  })
+  assert.strictEqual(stopRes.statusCode, 200, 'stop recording should succeed')
+  assert.strictEqual(server.loaded.mode, 'stop', 'mode should be stop')
+
+  // Find the generated file in custom directory
+  const files = await readdir(tempDir)
+  const generatedFile = files.find(f => f.startsWith('watt-admin-') && f.endsWith('.html'))
+
+  assert.ok(generatedFile, 'Generated file should exist in custom directory')
+
+  // Verify file content contains the embedded JSON
+  const content = await readFile(join(tempDir, generatedFile), 'utf8')
+  assert.ok(content.includes('window.LOADED_JSON='), 'File should contain embedded JSON')
+  assert.ok(content.includes('</html>'), 'File should be valid HTML')
+})
+