Merge pull request #3 from twilio-labs/add-dashboard-cli

add dashboard as cli command

Author: ktalebian

dashboard/server.ts

@@ -16,11 +16,11 @@
   ],
   "scripts": {
     "build": "tsc -p tsconfig.build.json && tsc-esm-fix --ext .js ./dist && chmod +x dist/cli.js",
-    "cli:extract-metrics": "node --import tsx/esm src/cli.ts extract-metrics",
-    "cli:generate-summary": "node --import tsx/esm src/cli.ts generate-summary",
-    "dashboard": "node --watch --import tsx/esm dashboard/server.ts",
-    "lint": "eslint src/**/*.ts dashboard/**/*.ts",
-    "lint:fix": "eslint src/**/*.ts dashboard/**/*.ts --fix",
+    "cli:extract-metrics": "node --watch --import tsx/esm src/cli.ts extract-metrics",
+    "cli:generate-summary": "node --watch --import tsx/esm src/cli.ts generate-summary",
+    "cli:dashboard": "node --watch --import tsx/esm src/cli.ts dashboard",
+    "lint": "eslint src/**/*.ts",
+    "lint:fix": "eslint src/**/*.ts --fix",
     "prepare": "husky"
   },
   "lint-staged": {

package.json

@@ -2,6 +2,7 @@
 import { hideBin } from 'yargs/helpers';
 import yargs from 'yargs/yargs';
 
+import startDashboard from './dashboard';
 import ExtractMetrics from './extract-metrics';
 import GenerateSummary from './generate-summary';
 import { logger } from './utils';
@@ -54,6 +55,20 @@ yargs(hideBin(process.argv))
       }
     },
   )
+  .command(
+    'dashboard',
+    'Start the dashboard web server',
+    () => {},
+    async () => {
+      try {
+        const subArgs = process.argv.slice(0, 2).concat(process.argv.slice(3));
+        startDashboard(subArgs);
+      } catch (error) {
+        logger.error('Unexpected error while starting server:', error);
+        process.exit(1);
+      }
+    },
+  )
   .demandCommand(1, 'You must specify a command to run')
   .help()
   .alias('help', 'h')

src/cli.ts

@@ -0,0 +1,102 @@
+import fs from 'fs';
+import http from 'http';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+import { hideBin } from 'yargs/helpers';
+import yargs from 'yargs/yargs';
+
+import { logger } from './utils';
+
+interface MimeTypes {
+  [key: string]: string;
+}
+
+const MIME_TYPES: MimeTypes = {
+  '.html': 'text/html',
+  '.js': 'text/javascript',
+  '.css': 'text/css',
+  '.json': 'application/json',
+  '.png': 'image/png',
+  '.jpg': 'image/jpg',
+  '.gif': 'image/gif',
+  '.svg': 'image/svg+xml',
+  '.ico': 'image/x-icon',
+};
+const dirName = path.dirname(fileURLToPath(import.meta.url));
+const publicDir = path.join(dirName, '../public');
+
+const getPath = (url: string) => {
+  if (url === '/') {
+    return path.join(publicDir, 'dashboard.html');
+  }
+
+  if (url === '/index.js') {
+    return path.join(publicDir, 'index.js');
+  }
+
+  if (url === '/index.css') {
+    return path.join(publicDir, 'index.css');
+  }
+
+  if (url.startsWith('/metrics/')) {
+    return url === '/metrics/summary.json'
+      ? path.join(publicDir, '../metrics', url.replace('/metrics/', ''))
+      : path.join(publicDir, '../metrics/tasks', url.replace('/metrics/', ''));
+  }
+
+  if (url.startsWith('/docs/')) {
+    return path.join(publicDir, url);
+  }
+
+  return path.join(publicDir, url);
+};
+
+const server = http.createServer((req, res) => {
+  if (!req.url) {
+    res.writeHead(400);
+    res.end('Bad request: URL missing');
+    return;
+  }
+
+  const filePath = getPath(req.url);
+  const extname = path.extname(filePath);
+  const contentType = MIME_TYPES[extname] || 'application/octet-stream';
+
+  fs.readFile(filePath, (err, content) => {
+    if (err) {
+      if (err.code === 'ENOENT') {
+        res.writeHead(404);
+        res.end('404 Not Found');
+        return;
+      }
+
+      res.writeHead(500);
+      res.end(`Server Error: ${err.code}`);
+      return;
+    }
+
+    res.writeHead(200, { 'Content-Type': contentType });
+    res.end(content, 'utf-8');
+  });
+});
+
+export default function startServer(argv: string[]) {
+  const parsedArgs = yargs(hideBin(argv))
+    .option('port', {
+      alias: 'p',
+      type: 'number',
+      description: 'Port to run the server on',
+      default: 3001,
+    })
+    .help()
+    .alias('help', 'h')
+    .parseSync();
+
+  const { port } = parsedArgs;
+
+  server.listen(port, () => {
+    logger.info(`Server running at http://localhost:${port}/`);
+    logger.info('Press Ctrl+C to stop the server');
+  });
+}

src/dashboard.ts

@@ -39,7 +39,6 @@ class ChatProcessor {
    */
   async process(): Promise<TaskSegment[]> {
     try {
-      // Initialize and validate in a single step
       const initialized = await this.initialize();
       if (!initialized) {
         logger.error(
@@ -48,7 +47,6 @@ class ChatProcessor {
         return [];
       }
 
-      // Identify test type with validation
       const testType = this.getTestType();
       if (!testType) {
         logger.warn(
@@ -57,7 +55,6 @@ class ChatProcessor {
         return [];
       }
 
-      // Extract and process task segments
       return await this.extractTaskSegments(testType);
     } catch (error) {
       logger.error(
@@ -122,30 +119,24 @@ class ChatProcessor {
       return Promise.resolve([]);
     }
 
-    // Find task boundaries
     const taskBoundaries = findTaskBoundaries(
       this.uiMessages,
       this.directoryId,
       testType,
     );
 
-    // If no task boundaries found, return empty array
     if (taskBoundaries.length === 0) {
       logger.warn(`No task boundaries found in ${this.directoryId}`);
       return Promise.resolve([]);
     }
 
-    // Get the last valid message timestamp
     const lastValidMessageTs = getLastValidMessageTimestamp(this.uiMessages);
-
-    // Validate and set end boundaries
     const validatedBoundaries = validateTaskBoundaries(
       taskBoundaries,
       lastValidMessageTs,
       this.uiMessages.length,
     );
 
-    // Process task segments in parallel
     return Promise.all(
       validatedBoundaries.map((task) => this.processTaskSegment(task)),
     );
@@ -177,32 +168,25 @@ class ChatProcessor {
       `Processing ${messages.length} messages for task ${task.taskNumber}`,
     );
 
-    // Filter messages to include only relevant ones
     const relevantMessages = filterRelevantMessages(messages);
-
-    // Create timestamp boundaries for filtering API entries
     const [startBoundary, endBoundary] = createTimestampBoundaries(
       task.startTime,
       task.endTime as number,
     );
-
-    // Filter API entries that fall within this task's time boundaries
     const apiEntries = this.apiHistory.filter((entry) => {
       const timestamp = getTimestampFromApiEntry(entry);
       return (
         timestamp && timestamp >= startBoundary && timestamp <= endBoundary
       );
     });
 
-    // Extract conversation history index from UI messages
     for (const msg of relevantMessages) {
       const index = extractConversationHistoryIndex(msg);
       if (index !== undefined) {
         msg.conversationHistoryIndex = index;
       }
     }
 
-    // Return the processed task segment
     return {
       ...task,
       apiCalls: apiEntries,

src/metrics/chat-processor.ts

@@ -1,5 +1,3 @@
-// Types and interfaces for metrics processing
-
 export const CONTROL_MARKER = 'control_instructions.md';
 export const MCP_MARKER = 'mcp_instructions.md';
 export const TASK_START_MARKER = 'Complete Task';