chromeos · afq984 · May 20, 2026 · May 20, 2026 · May 20, 2026
diff --git a/.github/workflows/actions.yml b/.github/workflows/actions.yml
@@ -16,6 +16,11 @@ jobs:
     - run: npm ci && npm run build
       working-directory: src/ds-playground
     - run: cp -r src/ds-playground/dist out/ds-playground
+    - name: Build AECDump Viewer
+      run: yarn install --frozen-lockfile --registry https://registry.npmjs.org && yarn run build
+      working-directory: src/aecdump-viewer
+    - name: Copy AECDump Viewer to out
+      run: cp -r src/aecdump-viewer/dist out/aecdump-viewer
     - uses: actions/upload-artifact@v4
       with:
         name: out

diff --git a/src/aecdump-viewer/.editorconfig b/src/aecdump-viewer/.editorconfig
@@ -0,0 +1,29 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.json]
+indent_size = 2
+
+[*.{html,js,md}]
+block_comment_start = /**
+block_comment = *
+block_comment_end = */
diff --git a/src/aecdump-viewer/.eslintrc.json b/src/aecdump-viewer/.eslintrc.json
@@ -0,0 +1,40 @@
+{
+  "root": true,
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint"],
+  "env": {
+    "browser": true
+  },
+  "rules": {
+    "no-prototype-builtins": "off",
+    "@typescript-eslint/ban-types": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-explicit-any": "error",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        "argsIgnorePattern": "^_"
+      }
+    ]
+  },
+  "overrides": [
+    {
+      "files": ["rollup.config.js", "web-dev-server.config.mjs"],
+      "env": {
+        "node": true
+      }
+    }
+  ]
+}
diff --git a/src/aecdump-viewer/.gitignore b/src/aecdump-viewer/.gitignore
@@ -0,0 +1,34 @@
+# Dependencies
+node_modules/
+.pnp
+.pnp.js
+
+# Production builds
+dist/
+out-tsc/
+
+# Generated Protobuf files
+src/proto/debug.js
+src/proto/debug.d.ts
+
+# Playwright test artifacts
+test-results/
+playwright-report/
+blob-report/
+playwright/.cache/
+
+# Editor configs and OS files
+.DS_Store
+*.local
+.env
+.env.local
+.env.*.local
+
+# IDEs
+.idea/
+.vscode/
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.swp
diff --git a/src/aecdump-viewer/index.html b/src/aecdump-viewer/index.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+  <meta name="Description" content="AECDump Web Viewer V1">
+
+  <style>
+    html,
+    body {
+      margin: 0;
+      padding: 0;
+      background-color: #f1f3f4;
+      min-height: 100vh;
+    }
+  </style>
+  <title>AECDump Web Viewer</title>
+</head>
+
+<body>
+  <aecdump-viewer></aecdump-viewer>
+
+  <script type="module" src="./src/aecdump-viewer.ts"></script>
+</body>
+
+</html>
diff --git a/src/aecdump-viewer/package.json b/src/aecdump-viewer/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "aecdump-viewer",
+  "description": "Web-based AECDump Viewer",
+  "license": "Apache-2.0",
+  "author": "aaronyu",
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "build": "yarn run proto:generate && tsc && vite build",
+    "start": "yarn run proto:generate && vite",
+    "serve:dist": "vite preview --port 8080",
+    "serve:dev": "vite --port 8000",
+    "test": "playwright test",
+    "test:dev": "TEST_ENV=dev playwright test",
+    "proto:generate": "pbjs -t static-module -w es6 -o src/proto/debug.js src/proto/debug.proto && pbts -o src/proto/debug.d.ts src/proto/debug.js"
+  },
+  "dependencies": {
+    "lit": "^3.1.1",
+    "protobufjs": "^7.2.4",
+    "wavesurfer.js": "^7.7.15"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.41.2",
+    "protobufjs-cli": "^1.1.1",
+    "tslib": "^2.6.2",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.12"
+  }
+}
diff --git a/src/aecdump-viewer/playwright.config.ts b/src/aecdump-viewer/playwright.config.ts
@@ -0,0 +1,35 @@
+import { defineConfig, devices } from '@playwright/test';
+
+const isDev = process.env.TEST_ENV === 'dev';
+const port = isDev ? 8000 : 8080;
+const command = isDev ? 'yarn run serve:dev' : 'yarn run serve:dist';
+
+export default defineConfig({
+  testDir: './tests',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'list',
+  use: {
+    baseURL: `http://localhost:${port}`,
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+
+  /* Run local dev server before starting tests */
+  webServer: {
+    command: command,
+    url: `http://localhost:${port}`,
+    reuseExistingServer: !process.env.CI,
+    timeout: 20 * 1000, // Dev server compilation might take slightly longer
+  },
+});