Migrate from Flow to TypeScript and add end-to-end testing

.agents/rules/landing-the-plane.md

@@ -301,8 +301,8 @@ This rule should be used in conjunction with:
 
 - **Test command**: `mise run test` or `./node_modules/.bin/jest`
 - **Lint command**: `mise run lint` or ESLint directly
-- **Flow check**: `mise run flow` or `./node_modules/.bin/flow`
-- **Prettier**: `mise run pretty` or `./node_modules/.bin/pretty-quick`
+- **Type check**: `mise run typecheck` or `./node_modules/.bin/tsc --noEmit`
+- **Prettier**: `mise run prettier`
 - **Build validation**: `mise run build` (if changes affect build process)
 - **Issue prefix**: Use `gobbldygook-` for all issue IDs in this project
 - **Branch naming**: Follow existing patterns (e.g., `feature/`, `fix/`, `chore/`)

.github/workflows/ci.yml

@@ -11,8 +11,8 @@ on:
   workflow_dispatch:
 
 jobs:
-  flow:
-    name: Flow Type Checking
+  typecheck:
+    name: TypeScript Type Checking
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
@@ -21,8 +21,8 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
-      - name: Run Flow
-        run: mise run flow check --quiet
+      - name: Run TypeScript
+        run: mise run typecheck
 
   test:
     name: Jest Tests
@@ -77,7 +77,7 @@ jobs:
 
       - name: Check formatting
         run: |
-          mise run pretty
+          mise run prettier
           git diff --exit-code
 
   build:
@@ -99,3 +99,48 @@ jobs:
         with:
           name: web-build
           path: ./modules/gob-web/build
+
+  e2e:
+    name: End-to-End Tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+      - uses: jdx/mise-action@c37c93293d6b742fc901e1406b8f764f6fb19dac # v2
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps chromium
+
+      - name: Run Playwright tests
+        run: mise run test:e2e
+
+      - name: Upload Playwright Report
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
+
+  check-peg-parser:
+    name: Check PEG Parser is Up-to-Date
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+      - uses: jdx/mise-action@c37c93293d6b742fc901e1406b8f764f6fb19dac # v2
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build PEG parser
+        run: mise run build-peg
+
+      - name: Check for changes
+        run: |
+          if ! git diff --exit-code modules/gob-hanson-format/parse-hanson-string.js; then
+            echo "Error: parse-hanson-string.js is not up-to-date!"
+            echo "Please run 'mise run build-peg' and commit the changes."
+            exit 1
+          fi

.gitignore

@@ -20,3 +20,7 @@ node_modules/
 build*/
 coverage/
 flow-coverage*/
+
+# Playwright test artifacts
+test-results/
+playwright-report/

AGENTS.md

@@ -34,7 +34,7 @@ Repository tasks (build, test, lint, etc.) are defined in `mise.toml`. Use `mise
 - `mise run lint` - Run ESLint
 - `mise run flow` - Run Flow type checker
 - `mise run test` - Run Jest tests
-- `mise run pretty` - Format code with Prettier
+- `mise run prettier` - Format code with Prettier
 - `mise run build` - Build the web application
 
 Run `mise tasks` to see all available tasks.

babel.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   presets: [
     "@babel/preset-react",
-    "@babel/preset-flow",
+    "@babel/preset-typescript",
     [
       "@babel/preset-env",
       {

e2e/gobbldygook.spec.ts

@@ -0,0 +1,6 @@
+import { test, expect } from '@playwright/test';
+
+test('homepage loads with Gobbldygook text', async ({ page }) => {
+  await page.goto('http://localhost:3000/');
+  await expect(page.locator('body')).toContainText('Gobbldygook', { ignoreCase: true });
+});

eslint.config.js

@@ -1,7 +1,8 @@
 // @ts-check
 const babelParser = require("@babel/eslint-parser")
+const tseslint = require("@typescript-eslint/eslint-plugin")
+const tsParser = require("@typescript-eslint/parser")
 const react = require("eslint-plugin-react")
-const ftFlow = require("eslint-plugin-ft-flow")
 const importPlugin = require("eslint-plugin-import")
 const prettierConfig = require("eslint-config-prettier")
 const js = require("@eslint/js")
@@ -18,23 +19,19 @@ module.exports = [
       "**/.cache/**",
       "**/*.min.js",
       "**/parse-hanson-string.js", // Generated parser file
-      "**/flow-typed/**",
+      "**/parse-hanson-string.ts", // Generated parser file
     ],
   },
 
-  // Base configuration for all JS files
+  // Base configuration for legacy JS files (if any remain)
   {
     files: ["**/*.js", "**/*.jsx"],
     languageOptions: {
       parser: babelParser,
       parserOptions: {
         requireConfigFile: false,
         babelOptions: {
-          presets: [
-            "@babel/preset-react",
-            "@babel/preset-flow",
-            "@babel/preset-env",
-          ],
+          presets: ["@babel/preset-react", "@babel/preset-env"],
         },
       },
       ecmaVersion: 2021,
@@ -53,35 +50,67 @@ module.exports = [
     },
     plugins: {
       react,
-      "ft-flow": ftFlow,
       import: importPlugin,
     },
     settings: {
       react: {
         version: "16.5",
-        flowVersion: "0.81",
       },
     },
   },
 
-  // ESLint recommended rules
-  js.configs.recommended,
+  // TypeScript configuration
+  {
+    files: ["**/*.ts", "**/*.tsx"],
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: {
+        ecmaVersion: 2021,
+        sourceType: "module",
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.node,
 
-  // React recommended rules (flat config)
-  react.configs.flat.recommended,
+        // Webpack DefinePlugin
+        VERSION: "readonly",
+        APP_BASE: "readonly",
 
-  // Flow type rules (manual config since no flat config available)
-  {
-    files: ["**/*.js", "**/*.jsx"],
+        // Test globals
+        TESTING: "readonly",
+      },
+    },
+    plugins: {
+      "@typescript-eslint": tseslint,
+      react,
+      import: importPlugin,
+    },
+    settings: {
+      react: {
+        version: "16.5",
+      },
+    },
     rules: {
-      ...ftFlow.configs.recommended.rules,
-      "ft-flow/no-types-missing-file-annotation": "off",
+      ...tseslint.configs.recommended.rules,
+      // Allow any types for now during migration
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/ban-ts-comment": "off",
+      "@typescript-eslint/no-require-imports": "off",
+      "@typescript-eslint/no-empty-object-type": "off",
+      "@typescript-eslint/prefer-as-const": "off",
+      "@typescript-eslint/no-unused-expressions": "off",
     },
   },
 
-  // Custom project rules
+  // ESLint recommended rules
+  js.configs.recommended,
+
+  // React recommended rules (flat config)
+  react.configs.flat.recommended,
+
+  // Custom project rules for all files
   {
-    files: ["**/*.js", "**/*.jsx"],
+    files: ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"],
     rules: {
       // Best practices
       "array-callback-return": "warn",
@@ -113,16 +142,7 @@ module.exports = [
       "no-underscore-dangle": "off",
       "no-unmodified-loop-condition": "error",
       "no-unused-labels": "error",
-      "no-unused-vars": [
-        "warn",
-        {
-          args: "after-used",
-          varsIgnorePattern: "^_",
-          argsIgnorePattern: "^_",
-          caughtErrorsIgnorePattern: "^_",
-          ignoreRestSiblings: true,
-        },
-      ],
+      "no-unused-vars": "off", // Disabled in favor of TypeScript's unused variable checking
       "no-useless-constructor": "error",
       "no-var": "error",
       "prefer-spread": "warn",
@@ -139,12 +159,29 @@ module.exports = [
     },
   },
 
+  // TypeScript-specific rules
+  {
+    files: ["**/*.ts", "**/*.tsx"],
+    rules: {
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        {
+          args: "after-used",
+          varsIgnorePattern: "^_",
+          argsIgnorePattern: "^_",
+          caughtErrorsIgnorePattern: "^_",
+          ignoreRestSiblings: true,
+        },
+      ],
+    },
+  },
+
   // CLI-specific configuration
   {
     files: [
-      "modules/gob-cli/**/*.js",
-      "modules/gob-hanson-format-cli/**/*.js",
-      "modules/gob-search-queries-cli/**/*.js",
+      "modules/gob-cli/**/*.{js,ts}",
+      "modules/gob-hanson-format-cli/**/*.{js,ts}",
+      "modules/gob-search-queries-cli/**/*.{js,ts}",
     ],
     rules: {
       "no-process-exit": "off",
@@ -154,15 +191,24 @@ module.exports = [
 
   // Web Worker-specific configuration
   {
-    files: ["**/*.worker.js", "**/workers/**/*.js"],
+    files: ["**/*.worker.{js,ts}", "**/workers/**/*.{js,ts}"],
+    languageOptions: {
+      globals: {
+        DedicatedWorkerGlobalScope: "readonly",
+      },
+    },
     rules: {
       "consistent-this": "off",
     },
   },
 
   // Test-specific configuration
   {
-    files: ["**/__tests__/**/*.js", "**/*.test.js", "**/*.spec.js"],
+    files: [
+      "**/__tests__/**/*.{js,ts,tsx}",
+      "**/*.test.{js,ts,tsx}",
+      "**/*.spec.{js,ts,tsx}",
+    ],
     languageOptions: {
       globals: {
         ...globals.jest,