diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index ac506e02f..95a7cbca6 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -98,33 +98,111 @@ jobs:
         if: steps.changed-files.outputs.any_changed == 'true'
         working-directory: ./smoke-tests/otel-collector
         run: bats .
-  app-smoke-test:
-    name: HyperDX App Smoke Test
-    runs-on: ubuntu-latest
+  e2e-tests:
+    name: End-to-End Tests
+    runs-on: ubuntu-24.04
+    timeout-minutes: 15
+    container:
+      image: mcr.microsoft.com/playwright:v1.55.0-jammy
     permissions:
+      contents: read
       pull-requests: write
-      contents: write
+
     steps:
       - name: Checkout
-        id: checkout
         uses: actions/checkout@v4
-      - name: Waiting for vercel preview to be ready
-        uses: patrickedqvist/wait-for-vercel-preview@v1.3.2
-        id: waitFor200
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache-dependency-path: 'yarn.lock'
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Build dependencies
+        run: npx nx run-many -t ci:build
+
+      - name: Run Playwright tests
+        run: |
+          cd packages/app
+          yarn test:e2e
+
+      - name: Upload Playwright report
+        uses: actions/upload-artifact@v4
+        if: always()
         with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          max_timeout: 1200
-          check_interval: 10
-      - run: echo ${{steps.waitFor200.outputs.url}}
+          name: playwright-report
+          path: packages/app/playwright-report/
+          retention-days: 30
 
-      - name: Stably Runner Action
-        uses: stablyhq/stably-runner-action@v3
+      - name: Upload test results
+        uses: actions/upload-artifact@v4
+        if: always()
         with:
-          test-suite-id: cmc548u5u0001la04q7y8ddj2
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          api-key: ${{ secrets.STABLY_API_KEY }}
-          environment: PRODUCTION
-          variable-overrides: |
-            {
-              "SITE_URL": "${{ steps.waitFor200.outputs.url }}"
+          name: test-results
+          path: packages/app/test-results/
+          retention-days: 30
+
+      - name: Generate test results message
+        id: test-results
+        if: always() && github.event_name == 'pull_request'
+        uses: actions/github-script@v7
+        with:
+          result-encoding: string
+          script: |
+            const fs = require('fs');
+            const path = require('path');
+
+            try {
+              const resultsPath = path.join('packages/app/test-results/results.json');
+              if (fs.existsSync(resultsPath)) {
+                const results = JSON.parse(fs.readFileSync(resultsPath, 'utf8'));
+                const { stats } = results;
+
+                const failed = stats.unexpected || 0;
+                const passed = stats.expected || 0;
+                const flaky = stats.flaky || 0;
+                const skipped = stats.skipped || 0;
+                const duration = Math.round((stats.duration || 0) / 1000);
+
+                const summary = failed > 0
+                  ? `❌ **${failed} test${failed > 1 ? 's' : ''} failed**`
+                  : `✅ **All tests passed**`;
+
+                return `## E2E Test Results
+
+            ${summary} • ${passed} passed • ${skipped} skipped • ${duration}s
+
+            | Status | Count |
+            |--------|-------|
+            | ✅ Passed | ${passed} |
+            | ❌ Failed | ${failed} |
+            | ⚠️ Flaky | ${flaky} |
+            | ⏭️ Skipped | ${skipped} |
+
+            [View full report →](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }})`;
+              } else {
+                return `## E2E Test Results
+
+            ❌ **Test results file not found**
+
+            [View full report →](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }})`;
+              }
+            } catch (error) {
+              console.log('Could not parse test results:', error.message);
+              return `## E2E Test Results
+
+            ❌ **Error reading test results**
+
+            [View full report →](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }})`;
             }
+
+      - name: Comment PR with test results
+        uses: mshick/add-pr-comment@v2
+        if: always() && github.event_name == 'pull_request'
+        with:
+          message: ${{ steps.test-results.outputs.result }}
+          message-id: e2e-test-results
diff --git a/.gitignore b/.gitignore
index 087234fd4..009925ccb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -57,6 +57,11 @@ e2e/cypress/screenshots/
 e2e/cypress/videos/
 e2e/cypress/results
 
+# playwright
+**/test-results/
+**/playwright-report/
+**/playwright/.cache/
+
 # scripts
 scripts/*.csv
 **/venv
diff --git a/Makefile b/Makefile
index 1663649d0..5aabc1b8c 100644
--- a/Makefile
+++ b/Makefile
@@ -59,6 +59,16 @@ dev-unit:
 ci-unit:
 	npx nx run-many -t ci:unit
 
+.PHONY: e2e
+e2e:
+	@if [ -z "$(tags)" ]; then \
+		echo "Running all E2E tests in local mode..."; \
+		cd packages/app && yarn test:e2e; \
+	else \
+		echo "Running E2E tests with tags: $(tags)"; \
+		cd packages/app && yarn test:e2e --grep "$(tags)"; \
+	fi
+
 # TODO: check db connections before running the migration CLIs
 .PHONY: dev-migrate-db
 dev-migrate-db:
diff --git a/package.json b/package.json
index 22f13b561..6d8e8d869 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,8 @@
   "packageManager": "yarn@4.5.1",
   "resolutions": {
     "@types/react": "18.3.1",
-    "@types/react-dom": "18.3.1"
+    "@types/react-dom": "18.3.1",
+    "@types/express": "4.17.21",
+    "@types/express-serve-static-core": "4.17.43"
   }
 }
diff --git a/packages/api/src/routers/external-api/v2/index.ts b/packages/api/src/routers/external-api/v2/index.ts
index 4c02d07e0..2e285a8b2 100644
--- a/packages/api/src/routers/external-api/v2/index.ts
+++ b/packages/api/src/routers/external-api/v2/index.ts
@@ -9,8 +9,8 @@ import rateLimiter from '@/utils/rateLimiter';
 
 const router = express.Router();
 
-const rateLimiterKeyGenerator = (req: express.Request) => {
-  return req.headers.authorization || req.ip;
+const rateLimiterKeyGenerator = (req: express.Request): string => {
+  return req.headers.authorization ?? req.ip ?? 'unknown';
 };
 
 const defaultRateLimiter = rateLimiter({
diff --git a/packages/app/.eslintrc.js b/packages/app/.eslintrc.js
index 91cfb928d..ee8e1e050 100644
--- a/packages/app/.eslintrc.js
+++ b/packages/app/.eslintrc.js
@@ -44,5 +44,15 @@ module.exports = {
         ],
       },
     },
+    {
+      // Disable strict rules for E2E test files
+      files: ['tests/e2e/**/*.ts', 'tests/e2e/**/*.js'],
+      rules: {
+        'no-console': 'off',
+        'no-empty': 'off',
+        '@typescript-eslint/no-explicit-any': 'off',
+        '@next/next/no-html-link-for-pages': 'off',
+      },
+    },
   ],
 };
diff --git a/packages/app/package.json b/packages/app/package.json
index b95632136..4b2c9cbe1 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -17,6 +17,9 @@
     "ci:lint": "yarn lint && yarn tsc --noEmit && yarn lint:styles --quiet",
     "ci:unit": "jest --ci --coverage",
     "dev:unit": "jest --watchAll --detectOpenHandles",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:debug": "playwright test --debug",
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build",
     "knip": "knip"
@@ -104,6 +107,7 @@
     "@chromatic-com/storybook": "^1.5.0",
     "@hookform/devtools": "^4.3.1",
     "@jedmao/location": "^3.0.0",
+    "@playwright/test": "^1.47.0",
     "@storybook/addon-essentials": "^8.1.5",
     "@storybook/addon-interactions": "^8.1.5",
     "@storybook/addon-links": "^8.1.5",
diff --git a/packages/app/playwright.config.ts b/packages/app/playwright.config.ts
new file mode 100644
index 000000000..3f1602ee2
--- /dev/null
+++ b/packages/app/playwright.config.ts
@@ -0,0 +1,59 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ */
+export default defineConfig({
+  testDir: './tests/e2e',
+  /* Global setup to ensure server is ready */
+  globalSetup: require.resolve('./global-setup.js'),
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 1,
+  /* Use multiple workers on CI for faster execution */
+  workers: undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: [
+    ['html'],
+    ['json', { outputFile: 'test-results/results.json' }],
+    ...(process.env.CI ? [['github', {}] as const] : []),
+  ],
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: process.env.PLAYWRIGHT_BASE_URL || 'http://localhost:8080',
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+    /* Take screenshot on failure */
+    screenshot: 'only-on-failure',
+    /* Record video on failure */
+    video: 'retain-on-failure',
+  },
+
+  /* Global test timeout - increased from default 30s to 60s to reduce flaky test failures */
+  timeout: 60 * 1000,
+
+  /* Configure projects for different test environments */
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+    },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command:
+      'NEXT_PUBLIC_IS_LOCAL_MODE=true NEXT_TELEMETRY_DISABLED=1 yarn run dev',
+    port: 8080,
+    reuseExistingServer: !process.env.CI,
+    timeout: 180 * 1000,
+    stdout: 'pipe',
+    stderr: 'pipe',
+  },
+});
diff --git a/packages/app/src/AutocompleteInput.tsx b/packages/app/src/AutocompleteInput.tsx
index 03110a485..4a0914135 100644
--- a/packages/app/src/AutocompleteInput.tsx
+++ b/packages/app/src/AutocompleteInput.tsx
@@ -25,6 +25,7 @@ export default function AutocompleteInput({
   showHotkey,
   onSubmit,
   queryHistoryType,
+  'data-testid': dataTestId,
 }: {
   inputRef: React.RefObject<HTMLInputElement>;
   value?: string;
@@ -42,6 +43,7 @@ export default function AutocompleteInput({
   language?: 'sql' | 'lucene';
   showHotkey?: boolean;
   queryHistoryType?: string;
+  'data-testid'?: string;
 }) {
   const suggestionsLimit = 10;
 
@@ -242,6 +244,7 @@ export default function AutocompleteInput({
         className="border-0 fs-8"
         value={value}
         size={size}
+        data-testid={dataTestId}
         onChange={e => onChange(e.target.value)}
         onFocus={() => {
           setSelectedAutocompleteIndex(-1);
diff --git a/packages/app/src/DBDashboardPage.tsx b/packages/app/src/DBDashboardPage.tsx
index ad656d8b6..638d5cbd4 100644
--- a/packages/app/src/DBDashboardPage.tsx
+++ b/packages/app/src/DBDashboardPage.tsx
@@ -944,6 +944,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
                 language="lucene"
                 placeholder="Search your events w/ Lucene ex. column:foo"
                 enableHotkey
+                data-testid="search-input"
               />
             )
           }
@@ -1047,6 +1048,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
         ) : null}
       </Box>
       <Button
+        data-testid="add-new-tile-button"
         variant="outline"
         mt="sm"
         color={dashboard?.tiles.length === 0 ? 'green' : 'dark.3'}
diff --git a/packages/app/src/DBSearchPage.tsx b/packages/app/src/DBSearchPage.tsx
index 98612c36d..f5e88d1e1 100644
--- a/packages/app/src/DBSearchPage.tsx
+++ b/packages/app/src/DBSearchPage.tsx
@@ -1223,6 +1223,7 @@ function DBSearchPage() {
               name="source"
               onCreate={openNewSourceModal}
               allowedSourceKinds={[SourceKind.Log, SourceKind.Trace]}
+              data-testid="source-selector"
             />
             <span className="ms-1">
               <SourceSchemaPreview
@@ -1444,6 +1445,7 @@ function DBSearchPage() {
                 placeholder="Search your events w/ Lucene ex. column:foo"
                 queryHistoryType={QUERY_LOCAL_STORAGE.SEARCH_LUCENE}
                 enableHotkey
+                data-testid="search-input"
               />
             }
           />
diff --git a/packages/app/src/SearchInputV2.tsx b/packages/app/src/SearchInputV2.tsx
index 3fc9eee4f..2b34e11b9 100644
--- a/packages/app/src/SearchInputV2.tsx
+++ b/packages/app/src/SearchInputV2.tsx
@@ -35,6 +35,7 @@ export default function SearchInputV2({
   onSubmit,
   additionalSuggestions,
   queryHistoryType,
+  'data-testid': dataTestId,
   ...props
 }: {
   tableConnections?: TableConnection | TableConnection[];
@@ -47,6 +48,7 @@ export default function SearchInputV2({
   onSubmit?: () => void;
   additionalSuggestions?: string[];
   queryHistoryType?: string;
+  'data-testid'?: string;
 } & UseControllerProps<any>) {
   const {
     field: { onChange, value },
@@ -95,6 +97,7 @@ export default function SearchInputV2({
       onLanguageChange={onLanguageChange}
       onSubmit={onSubmit}
       queryHistoryType={queryHistoryType}
+      data-testid={dataTestId}
       aboveSuggestions={
         <>
           <div className="text-muted fs-8 fw-bold me-1">Searching for:</div>
diff --git a/packages/app/src/components/DBEditTimeChartForm.tsx b/packages/app/src/components/DBEditTimeChartForm.tsx
index f0cf6ad2f..769d6e7e6 100644
--- a/packages/app/src/components/DBEditTimeChartForm.tsx
+++ b/packages/app/src/components/DBEditTimeChartForm.tsx
@@ -397,6 +397,7 @@ export default function EditTimeChartForm({
   onSave,
   onTimeRangeSelect,
   onClose,
+  'data-testid': dataTestId,
 }: {
   dashboardId?: string;
   chartConfig: SavedChartConfig;
@@ -409,6 +410,7 @@ export default function EditTimeChartForm({
   onSave?: (chart: SavedChartConfig) => void;
   onClose?: () => void;
   onTimeRangeSelect?: (start: Date, end: Date) => void;
+  'data-testid'?: string;
 }) {
   const { control, watch, setValue, handleSubmit, register } =
     useForm<SavedChartConfig>({
@@ -596,7 +598,7 @@ export default function EditTimeChartForm({
   const [parentRef, setParentRef] = useState<HTMLElement | null>(null);
 
   return (
-    <div ref={setParentRef}>
+    <div ref={setParentRef} data-testid={dataTestId}>
       <Controller
         control={control}
         name="displayType"
@@ -647,6 +649,7 @@ export default function EditTimeChartForm({
           w="100%"
           type="text"
           placeholder="My Chart Name"
+          data-testid="chart-name-input"
         />
       </Flex>
       <Divider my="md" />
@@ -678,7 +681,12 @@ export default function EditTimeChartForm({
             <Text c="gray.4" pe="md" size="sm">
               Data Source
             </Text>
-            <SourceSelectControlled size="xs" control={control} name="source" />
+            <SourceSelectControlled
+              size="xs"
+              control={control}
+              name="source"
+              data-testid="source-selector"
+            />
             <SourceSchemaPreview
               source={tableSource}
               iconStyles={{ color: 'dark.2' }}
@@ -907,6 +915,7 @@ export default function EditTimeChartForm({
         <Flex gap="sm">
           {onSave != null && (
             <Button
+              data-testid="chart-save-button"
               loading={isSaving}
               variant="outline"
               onClick={handleSubmit(handleSave)}
@@ -946,6 +955,7 @@ export default function EditTimeChartForm({
           )}
           {activeTab !== 'markdown' && (
             <Button
+              data-testid="chart-run-query-button"
               variant="outline"
               type="submit"
               color="green"
diff --git a/packages/app/src/components/DBRowTable.tsx b/packages/app/src/components/DBRowTable.tsx
index de5abc5a2..d2306034e 100644
--- a/packages/app/src/components/DBRowTable.tsx
+++ b/packages/app/src/components/DBRowTable.tsx
@@ -674,6 +674,7 @@ export const RawLogTable = memo(
 
     return (
       <div
+        data-testid="search-results-table"
         className="overflow-auto h-100 fs-8 bg-inherit"
         onScroll={e => {
           fetchMoreOnBottomReached(e.target as HTMLDivElement);
diff --git a/packages/app/src/components/DBSearchPageFilters.tsx b/packages/app/src/components/DBSearchPageFilters.tsx
index f6f045d5b..2c6489e5e 100644
--- a/packages/app/src/components/DBSearchPageFilters.tsx
+++ b/packages/app/src/components/DBSearchPageFilters.tsx
@@ -72,17 +72,20 @@ export const TextButton = ({
   label,
   ms,
   display,
+  'data-testid': dataTestId,
 }: {
   onClick?: VoidFunction;
   label: React.ReactNode;
   ms?: MantineStyleProps['ms'];
   display?: MantineStyleProps['display'];
+  'data-testid'?: string;
 }) => {
   return (
     <UnstyledButton
       display={display}
       onClick={onClick}
       className={classes.textButton}
+      data-testid={dataTestId}
     >
       <Text size="xxs" c="gray.6" lh={1} ms={ms}>
         {label}
@@ -102,7 +105,10 @@ export const FilterCheckbox = ({
   onClickPin,
 }: FilterCheckboxProps) => {
   return (
-    <div className={classes.filterCheckbox}>
+    <div
+      className={classes.filterCheckbox}
+      data-testid={`filter-checkbox-${label}`}
+    >
       <Group
         gap={8}
         onClick={() => onChange?.(!value)}
@@ -118,6 +124,7 @@ export const FilterCheckbox = ({
             emptyFn
           }
           indeterminate={value === 'excluded'}
+          data-testid={`filter-checkbox-input-${label}`}
         />
         <Tooltip
           openDelay={label.length > 22 ? 0 : 1500}
@@ -139,13 +146,24 @@ export const FilterCheckbox = ({
         </Tooltip>
       </Group>
       <div className={classes.filterActions}>
-        {onClickOnly && <TextButton onClick={onClickOnly} label="Only" />}
+        {onClickOnly && (
+          <TextButton
+            onClick={onClickOnly}
+            label="Only"
+            data-testid={`filter-only-${label}`}
+          />
+        )}
         {onClickExclude && (
-          <TextButton onClick={onClickExclude} label="Exclude" />
+          <TextButton
+            onClick={onClickExclude}
+            label="Exclude"
+            data-testid={`filter-exclude-${label}`}
+          />
         )}
         <TextButton
           onClick={onClickPin}
           label={<i className={`bi bi-pin-angle${pinned ? '-fill' : ''}`}></i>}
+          data-testid={`filter-pin-${label}`}
         />
       </div>
       {pinned && (
@@ -177,6 +195,7 @@ export type FilterGroupProps = {
   loadMoreLoading: boolean;
   hasLoadedMore: boolean;
   isDefaultExpanded?: boolean;
+  'data-testid'?: string;
 };
 
 const MAX_FILTER_GROUP_ITEMS = 10;
@@ -198,6 +217,7 @@ export const FilterGroup = ({
   loadMoreLoading,
   hasLoadedMore,
   isDefaultExpanded,
+  'data-testid': dataTestId,
 }: FilterGroupProps) => {
   const [search, setSearch] = useState('');
   // "Show More" button when there's lots of options
@@ -293,7 +313,7 @@ export const FilterGroup = ({
         setExpanded(v === name);
       }}
     >
-      <Accordion.Item value={name}>
+      <Accordion.Item value={name} data-testid={dataTestId}>
         <Stack gap={0}>
           <Center>
             <Accordion.Control
@@ -320,6 +340,7 @@ export const FilterGroup = ({
                   flex="1"
                   placeholder={name}
                   value={search}
+                  data-testid={`filter-search-${name}`}
                   onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
                     setSearch(event.currentTarget.value)
                   }
@@ -812,6 +833,7 @@ const DBSearchPageFiltersComponent = ({
           {shownFacets.map(facet => (
             <FilterGroup
               key={facet.key}
+              data-testid={`filter-group-${facet.key}`}
               name={cleanedFacetName(facet.key)}
               options={facet.value.map(value => ({
                 value,
diff --git a/packages/app/tests/e2e/README.md b/packages/app/tests/e2e/README.md
new file mode 100644
index 000000000..a270b17b9
--- /dev/null
+++ b/packages/app/tests/e2e/README.md
@@ -0,0 +1,190 @@
+# End-to-End Testing
+
+This directory contains Playwright-based end-to-end tests for the HyperDX application. The tests are organized into core functionality and feature-specific test suites.
+
+## Prerequisites
+
+- Node.js (>=22.16.0 as specified in package.json)
+- Dependencies installed via `yarn install`
+- Development server running (automatically handled by test configuration)
+
+## Running Tests
+
+### All Tests
+
+To run the complete test suite:
+
+```bash
+# From project root
+make e2e
+
+# Or from packages/app directory
+yarn test:e2e
+```
+
+### Tagged Tests
+
+Tests are organized using tags to allow selective execution:
+
+```bash
+# Run smoke tests only
+make e2e tags="@smoke"
+
+# Run search-related tests
+make e2e tags="@search"
+
+# Run dashboard tests
+make e2e tags="@dashboard"
+
+# Run local-mode tests
+make e2e tags="@local-mode"
+
+# Or using yarn directly with grep
+cd packages/app && yarn test:e2e --grep "@smoke"
+cd packages/app && yarn test:e2e --grep "@search"
+cd packages/app && yarn test:e2e --grep "@dashboard"
+```
+
+### Local Mode vs Full Server
+
+Tests tagged with `@local-mode` can run against the local development server without external dependencies. The test configuration automatically starts a local development server with `NEXT_PUBLIC_IS_LOCAL_MODE=true`.
+
+## Test Organization
+
+```
+tests/e2e/
+├── core/                 # Core application functionality
+│   └── navigation.spec.ts # Navigation and routing
+├── features/             # Feature-specific tests
+│   ├── alerts.spec.ts
+│   ├── chart-explorer.spec.ts
+│   ├── dashboard.spec.ts
+│   ├── search/
+│   │   ├── search.spec.ts
+│   │   ├── search-filters.spec.ts
+│   │   └── saved-search.spec.ts
+│   ├── sessions.spec.ts
+│   └── traces-workflow.spec.ts
+└── utils/                # Test utilities and helpers
+    └── base-test.ts
+```
+
+## Debugging Tests
+
+### Interactive Mode
+
+Run tests with the Playwright UI for interactive debugging:
+
+```bash
+yarn test:e2e:ui
+```
+
+### Debug Mode
+
+Run tests in debug mode with browser developer tools:
+
+```bash
+yarn test:e2e:debug
+```
+
+### Single Test Debugging
+
+To debug a specific test file:
+
+```bash
+yarn test:e2e tests/e2e/features/search/search.spec.ts --debug
+```
+
+### Headed Mode
+
+Run tests in headed mode (visible browser):
+
+```bash
+yarn test:e2e --headed
+```
+
+## Test Output and Reports
+
+### HTML Reports
+
+After test execution, view the detailed HTML report:
+
+```bash
+yarn playwright show-report
+```
+
+The report includes:
+- Test execution timeline
+- Screenshots of failures
+- Video recordings of failed tests
+- Network logs and console output
+
+### Test Results
+
+Test artifacts are stored in:
+- `test-results/` - Screenshots, videos, and traces for failed tests
+- `playwright-report/` - HTML report files
+
+### Trace Viewer
+
+For detailed debugging of failed tests, use the trace viewer:
+
+```bash
+yarn playwright show-trace test-results/[test-name]/trace.zip
+```
+
+## Configuration
+
+The test configuration is defined in `playwright.config.ts`:
+
+- **Base URL**: `http://localhost:8080` (configurable via `PLAYWRIGHT_BASE_URL`)
+- **Test Timeout**: 60 seconds (increased from default 30s to reduce flaky test failures)
+- **Retries**: 1 retry locally, 2 on CI
+- **Workers**: Undefined (uses Playwright defaults)
+- **Screenshots**: Captured on failure only
+- **Videos**: Recorded and retained on failure
+- **Traces**: Collected on first retry
+- **Global Setup**: Ensures server readiness before tests
+- **Web Server**: Automatically starts local dev server with local mode enabled
+
+## Test Development
+
+### Writing Tests
+
+Tests use the extended base test from `utils/base-test.ts` which provides:
+- Automatic handling of connection/sources
+- Tanstack Query devtools management
+- Network idle waiting after navigation
+
+### Best Practices
+
+- Use data test IDs for reliable element selection
+- Implement proper wait strategies for dynamic content
+- Group related assertions in test steps
+- Use descriptive test names and organize with appropriate tags
+- Clean up test data when necessary
+
+## Troubleshooting
+
+### Server Connection Issues
+
+If tests fail with connection errors:
+1. Ensure no other services are running on port 8080
+2. Check that the development server starts successfully
+3. Verify environment variables are properly configured
+
+### Flaky Tests
+
+For intermittent failures:
+1. Check the HTML report for timing issues
+2. Review network logs for failed requests
+3. Consider if individual test steps need longer wait times (global timeout is now 60s)
+4. Use the trace viewer to analyze test execution
+
+### CI/CD Integration
+
+Tests are configured to run in CI environments with:
+- 60-second test timeout (same as local)
+- Multiple retry attempts (2 retries on CI vs 1 locally)
+- Artifact collection for failed tests
+- GitHub Actions integration for PR comments
diff --git a/packages/app/tests/e2e/core/navigation.spec.ts b/packages/app/tests/e2e/core/navigation.spec.ts
new file mode 100644
index 000000000..a3ea4e269
--- /dev/null
+++ b/packages/app/tests/e2e/core/navigation.spec.ts
@@ -0,0 +1,133 @@
+import { expect, test } from '../utils/base-test';
+
+test.describe('Navigation', { tag: ['@core'] }, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/search');
+    await page.waitForLoadState();
+  });
+
+  test(
+    'should navigate between main pages',
+    { tag: '@smoke' },
+    async ({ page }) => {
+      await test.step('Wait for page to load', async () => {
+        await page.waitForLoadState('networkidle');
+        // Wait for the first navigation link to be visible instead of using a fixed timeout
+        await expect(
+          page.locator('[data-testid="nav-link-search"]'),
+        ).toBeVisible();
+      });
+
+      await test.step('Verify all main navigation links are present and have correct hrefs', async () => {
+        const navLinks = [
+          { testId: 'nav-link-search', href: '/search' },
+          { testId: 'nav-link-chart', href: '/chart' },
+          { testId: 'nav-link-sessions', href: '/sessions' },
+          { testId: 'nav-link-dashboards', href: '/dashboards' },
+        ];
+
+        for (const { testId, href } of navLinks) {
+          const locator = page.locator(`[data-testid="${testId}"]`);
+          await expect(locator).toBeVisible();
+          await expect(locator).toHaveAttribute('href', href);
+        }
+      });
+    },
+  );
+  test('should open user menu', async ({ page }) => {
+    await test.step('Navigate to and click user menu trigger', async () => {
+      // Wait for page to be fully loaded first
+      await page.waitForLoadState('networkidle');
+      await expect(
+        page.locator('[data-testid="nav-link-search"]'),
+      ).toBeVisible();
+
+      const userMenuTrigger = page.locator('[data-testid="user-menu-trigger"]');
+      await userMenuTrigger.scrollIntoViewIfNeeded();
+      await expect(userMenuTrigger).toBeVisible();
+
+      // Wait for the element to be fully interactive and click with extended timeout
+      await userMenuTrigger.waitFor({ state: 'attached' });
+      await userMenuTrigger.click({ timeout: 10000 });
+
+      // Wait for the menu to appear
+      await expect(
+        page.locator('[data-testid="user-preferences-menu-item"]'),
+      ).toBeVisible();
+    });
+
+    await test.step('Verify user menu items are accessible', async () => {
+      const userPreferencesItem = page.locator(
+        '[data-testid="user-preferences-menu-item"]',
+      );
+      await expect(userPreferencesItem).toBeVisible();
+    });
+
+    //todo: Add tests that verify user pref behavior
+  });
+
+  test('should open help menu', async ({ page }) => {
+    await test.step('Navigate to and click help menu trigger', async () => {
+      // Wait for page to be fully loaded first
+      await page.waitForLoadState('networkidle');
+      await expect(
+        page.locator('[data-testid="nav-link-search"]'),
+      ).toBeVisible();
+
+      const helpMenuTrigger = page.locator('[data-testid="help-menu-trigger"]');
+      await helpMenuTrigger.scrollIntoViewIfNeeded();
+      await expect(helpMenuTrigger).toBeVisible();
+
+      // Wait for the element to be fully interactive and click with extended timeout
+      await helpMenuTrigger.waitFor({ state: 'attached' });
+      await helpMenuTrigger.click({ timeout: 10000 });
+
+      // Wait for the menu items to appear
+      await expect(
+        page.locator('[data-testid="documentation-menu-item"]'),
+      ).toBeVisible();
+    });
+
+    await test.step('Verify help menu items are accessible', async () => {
+      const documentationItem = page.locator(
+        '[data-testid="documentation-menu-item"]',
+      );
+      const discordItem = page.locator('[data-testid="discord-menu-item"]');
+      const setupItem = page.locator(
+        '[data-testid="setup-instructions-menu-item"]',
+      );
+
+      await expect(documentationItem).toBeVisible();
+      await expect(discordItem).toBeVisible();
+      await expect(setupItem).toBeVisible();
+    });
+  });
+});
+
+// Full-server tests that require authentication and backend services
+test.skip('Navigation - Full Server Features', { tag: ['@core'] }, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/search');
+  });
+
+  test('should show full server navigation links', async ({ page }) => {
+    await test.step('Verify team settings link is visible', async () => {
+      const teamSettingsLink = page.locator(
+        '[data-testid="nav-link-team-settings"]',
+      );
+      await expect(teamSettingsLink).toBeVisible();
+      await expect(teamSettingsLink).toHaveAttribute('href', '/team-settings');
+    });
+
+    await test.step('Verify alerts link functionality', async () => {
+      const alertsLink = page.locator('[data-testid="nav-link-alerts"]');
+      await expect(alertsLink).toBeVisible();
+      await expect(alertsLink).toHaveAttribute('href', '/alerts');
+
+      // In full-server mode, we can actually navigate to alerts
+      await alertsLink.click();
+      await page.waitForURL('**/alerts**');
+      await expect(page).toHaveURL(/.*\/alerts/);
+    });
+  });
+});
diff --git a/packages/app/tests/e2e/features/alerts.spec.ts b/packages/app/tests/e2e/features/alerts.spec.ts
new file mode 100644
index 000000000..dd0d77c69
--- /dev/null
+++ b/packages/app/tests/e2e/features/alerts.spec.ts
@@ -0,0 +1,48 @@
+import { expect, test } from '../utils/base-test';
+
+test.skip('Alerts Functionality', { tag: ['@alerts', '@full-server'] }, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/alerts');
+  });
+
+  test('should load alerts page', async ({ page }) => {
+    await test.step('Navigate to alerts page', async () => {
+      await page.goto('/alerts');
+    });
+
+    await test.step('Verify alerts page loads with content', async () => {
+      const alertsPage = page.locator('[data-testid="alerts-page"]');
+      await expect(alertsPage).toBeVisible();
+
+      const alertCards = page.locator('[data-testid^="alert-card-"]');
+      const alertCount = await alertCards.count();
+      await expect(alertCount).toBeGreaterThan(0);
+    });
+
+    await test.step('Verify alert links are accessible', async () => {
+      const alertCards = page.locator('[data-testid^="alert-card-"]');
+      const firstAlert = alertCards.first();
+      const alertLink = firstAlert.locator('[data-testid^="alert-link-"]');
+      await expect(alertLink).toBeVisible();
+    });
+  });
+
+  test('should handle alerts creation from search', async ({ page }) => {
+    await test.step('Navigate to search page', async () => {
+      await page.goto('/search');
+      await page.waitForLoadState('networkidle');
+    });
+
+    await test.step('Open alerts creation modal', async () => {
+      const alertsButton = page.locator('[data-testid="alerts-button"]');
+      await expect(alertsButton).toBeVisible();
+      await alertsButton.scrollIntoViewIfNeeded();
+      await alertsButton.click({ force: true });
+      await page.waitForTimeout(1000);
+    });
+
+    await test.step('Verify alerts modal opens', async () => {
+      await expect(page.locator('[data-testid="alerts-modal"]')).toBeVisible();
+    });
+  });
+});
diff --git a/packages/app/tests/e2e/features/chart-explorer.spec.ts b/packages/app/tests/e2e/features/chart-explorer.spec.ts
new file mode 100644
index 000000000..0be7f37f2
--- /dev/null
+++ b/packages/app/tests/e2e/features/chart-explorer.spec.ts
@@ -0,0 +1,28 @@
+import { expect, test } from '../utils/base-test';
+
+test.describe('Chart Explorer Functionality', { tag: ['@charts'] }, () => {
+  test('should interact with chart configuration', async ({ page }) => {
+    // Navigate to chart explorer
+    await page.goto('/chart');
+    await page.waitForLoadState('networkidle');
+    await page.waitForTimeout(1000);
+
+    await test.step('Verify chart configuration form is accessible', async () => {
+      const chartForm = page.locator('[data-testid="chart-explorer-form"]');
+      await expect(chartForm).toBeVisible();
+    });
+
+    await test.step('Can run basic query and display chart', async () => {
+      const runQueryButton = page.locator(
+        '[data-testid="chart-run-query-button"]',
+      );
+      await expect(runQueryButton).toBeVisible();
+      await runQueryButton.click();
+      await page.waitForTimeout(2000);
+
+      // Verify chart is rendered
+      const chartContainer = page.locator('.recharts-responsive-container');
+      await expect(chartContainer).toBeVisible();
+    });
+  });
+});
diff --git a/packages/app/tests/e2e/features/dashboard.spec.ts b/packages/app/tests/e2e/features/dashboard.spec.ts
new file mode 100644
index 000000000..b3ef269fe
--- /dev/null
+++ b/packages/app/tests/e2e/features/dashboard.spec.ts
@@ -0,0 +1,224 @@
+import { expect, test } from '../utils/base-test';
+
+test.describe('Dashboard', { tag: ['@dashboard'] }, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/dashboards');
+  });
+  test('Comprehensive dashboard workflow - create, add tiles, configure, and test', async ({
+    page,
+  }) => {
+    test.setTimeout(60000);
+    await test.step('Create new dashboard', async () => {
+      const createDashboardButton = page.locator(
+        '[data-testid="create-dashboard-button"]',
+      );
+      await expect(createDashboardButton).toBeVisible();
+      await createDashboardButton.click();
+
+      await page.waitForURL('**/dashboards**');
+      await page.waitForLoadState('networkidle');
+      await page.waitForTimeout(1000);
+    });
+
+    await test.step('Add first tile to dashboard', async () => {
+      const addNewTileButton = page.locator(
+        '[data-testid="add-new-tile-button"]',
+      );
+      await expect(addNewTileButton).toBeVisible();
+      await addNewTileButton.click();
+      await page.waitForTimeout(1000);
+
+      const chartNameInput = page.locator('[data-testid="chart-name-input"]');
+      await expect(chartNameInput).toBeVisible();
+      await chartNameInput.fill('Test Chart');
+
+      const runQueryButton = page.locator(
+        '[data-testid="chart-run-query-button"]',
+      );
+      await expect(runQueryButton).toBeVisible();
+      await runQueryButton.click();
+      await page.waitForTimeout(2000);
+
+      const saveButton = page.locator('[data-testid="chart-save-button"]');
+      await expect(saveButton).toBeVisible();
+      await saveButton.click();
+      await page.waitForTimeout(2000);
+
+      const chartContainer = page.locator('.recharts-responsive-container');
+      await expect(chartContainer).toHaveCount(1);
+    });
+
+    await test.step('Add second tile with Demo Metrics', async () => {
+      const addSecondTileButton = page.locator(
+        '[data-testid="add-new-tile-button"]',
+      );
+      await expect(addSecondTileButton).toBeVisible();
+      await addSecondTileButton.click();
+      await page.waitForTimeout(1000);
+
+      const sourceSelector = page.locator('[data-testid="source-selector"]');
+      await expect(sourceSelector).toBeVisible();
+      await sourceSelector.click();
+      await page.waitForTimeout(500);
+
+      const demoMetricsOption = page.locator('text=Demo Metrics');
+      await expect(demoMetricsOption).toBeVisible();
+      await demoMetricsOption.click();
+
+      const metricSelector = page.locator(
+        'input[placeholder*="metric"], input[placeholder*="Select a metric"]',
+      );
+      await expect(metricSelector).toBeVisible();
+
+      // Click to open the dropdown first
+      await metricSelector.click();
+
+      // Type the metric name to filter options
+      await metricSelector.fill('k8s.container.cpu_limit');
+      await page.waitForTimeout(1500);
+
+      // Wait for and click the specific metric option we want
+      const targetMetricOption = page.locator(
+        '[data-combobox-option="true"][value="k8s.container.cpu_limit:::::::gauge"]',
+      );
+      await expect(targetMetricOption).toBeVisible({ timeout: 5000 });
+      await targetMetricOption.click();
+
+      const runSecondQueryButton = page.locator(
+        '[data-testid="chart-run-query-button"]',
+      );
+      await expect(runSecondQueryButton).toBeVisible();
+      await runSecondQueryButton.click();
+      await page.waitForTimeout(2000);
+
+      const saveSecondButton = page.locator(
+        '[data-testid="chart-save-button"]',
+      );
+      await expect(saveSecondButton).toBeVisible();
+      await saveSecondButton.click();
+      await page.waitForTimeout(2000);
+    });
+
+    await test.step('Verify dashboard tiles and interactions', async () => {
+      const dashboardTiles = page.locator('[data-testid^="dashboard-tile-"]');
+      const tileCount = await dashboardTiles.count();
+      await expect(tileCount).toBeGreaterThan(0);
+
+      const firstTile = dashboardTiles.first();
+      await expect(firstTile).toBeVisible();
+      await firstTile.hover();
+      await page.waitForTimeout(500);
+
+      const buttons = [
+        'tile-edit-button-',
+        'tile-duplicate-button-',
+        'tile-delete-button-',
+        'tile-alerts-button-',
+      ];
+      for (const button of buttons) {
+        const buttonLocator = page.locator(`[data-testid^="${button}"]`);
+        await expect(buttonLocator).toBeVisible();
+      }
+    });
+
+    await test.step('Test duplicate tile', async () => {
+      const dashboardTiles = page.locator('[data-testid^="dashboard-tile-"]');
+      const tileCount = await dashboardTiles.count();
+      const firstTile = dashboardTiles.first();
+      await expect(firstTile).toBeVisible();
+      await firstTile.hover();
+      await page.waitForTimeout(500);
+
+      const duplicateButton = page
+        .locator(`[data-testid^="tile-duplicate-button-"]`)
+        .first();
+      await expect(duplicateButton).toBeVisible();
+      await duplicateButton.click();
+      await page.waitForTimeout(500);
+
+      const confirmButton = page.locator(
+        '[data-testid="confirm-confirm-button"]',
+      );
+      await expect(confirmButton).toBeVisible();
+      await confirmButton.click();
+      await page.waitForTimeout(2000);
+
+      const dashboardTilesNow = page.locator(
+        '[data-testid^="dashboard-tile-"]',
+      );
+      const tileCountNow = await dashboardTilesNow.count();
+      await expect(tileCountNow).toBeGreaterThan(tileCount);
+    });
+
+    await test.step('Update time range to Last 12 hours', async () => {
+      const timePickerInput = page.locator('[data-testid="time-picker-input"]');
+      await expect(timePickerInput).toBeVisible();
+      await timePickerInput.click();
+      await page.waitForTimeout(500);
+
+      const last12HoursOption = page.locator('text=Last 12 hours');
+      await expect(last12HoursOption).toBeVisible();
+      await last12HoursOption.click();
+      await page.waitForTimeout(2000);
+    });
+
+    await test.step('Test Live view functionality', async () => {
+      const liveButton = page.locator(
+        'button:has-text("Live"), [data-testid*="live"]',
+      );
+      await expect(liveButton).toBeVisible();
+      await liveButton.click();
+      await page.waitForTimeout(2000);
+
+      // Turn off live mode to prevent continuous updates that can interfere with the test
+      const liveButtonAfterClick = page.locator(
+        'button:has-text("Live"), [data-testid*="live"]',
+      );
+      if (await liveButtonAfterClick.isVisible({ timeout: 1000 })) {
+        await liveButtonAfterClick.click();
+        await page.waitForTimeout(1000);
+      }
+    });
+
+    await test.step('Test global dashboard filters', async () => {
+      const searchInput = page.locator('[data-testid="search-input"]');
+      await expect(searchInput).toBeVisible();
+      await searchInput.fill('ServiceName:accounting');
+
+      const runButton = page
+        .locator(
+          '[data-testid="search-submit-button"], button:has-text("Search"), i.bi-play',
+        )
+        .first();
+      await expect(runButton).toBeVisible();
+      await runButton.click();
+      await page.waitForTimeout(1000);
+    });
+
+    await test.step('Delete the tile and confirm deletion', async () => {
+      const dashboardTiles = page.locator('[data-testid^="dashboard-tile-"]');
+      const tileCountBefore = await dashboardTiles.count();
+
+      const firstTile = dashboardTiles.first();
+      await expect(firstTile).toBeVisible();
+      await firstTile.hover();
+      await page.waitForTimeout(500);
+
+      const deleteButton = page
+        .locator('[data-testid^="tile-delete-button-"]')
+        .first();
+      await expect(deleteButton).toBeVisible();
+      await deleteButton.click();
+      await page.waitForTimeout(1000);
+
+      const confirmButton = page.locator(
+        '[data-testid="confirm-confirm-button"]',
+      );
+      await expect(confirmButton).toBeVisible();
+      await confirmButton.click();
+      await page.waitForTimeout(2000);
+      const tileCountNow = await dashboardTiles.count();
+      expect(tileCountNow).toBe(tileCountBefore - 1);
+    });
+  });
+});
diff --git a/packages/app/tests/e2e/features/search/saved-search.spec.ts b/packages/app/tests/e2e/features/search/saved-search.spec.ts
new file mode 100644
index 000000000..8b5d4c013
--- /dev/null
+++ b/packages/app/tests/e2e/features/search/saved-search.spec.ts
@@ -0,0 +1,22 @@
+import { expect, test } from '../../utils/base-test';
+
+test.skip('Saved Search Functionality', { tag: '@full-server' }, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/search');
+  });
+
+  test(
+    'should handle save search workflow',
+    { tag: '@full-server' },
+    async ({ page }) => {
+      const saveButton = page.locator('[data-testid="save-search-button"]');
+      await expect(saveButton).toBeVisible();
+      await saveButton.scrollIntoViewIfNeeded();
+      await saveButton.click({ force: true });
+      await page.waitForTimeout(1000);
+      await expect(
+        page.locator('[data-testid="save-search-modal"]'),
+      ).toBeVisible();
+    },
+  );
+});
diff --git a/packages/app/tests/e2e/features/search/search-filters.spec.ts b/packages/app/tests/e2e/features/search/search-filters.spec.ts
new file mode 100644
index 000000000..b11aa44ad
--- /dev/null
+++ b/packages/app/tests/e2e/features/search/search-filters.spec.ts
@@ -0,0 +1,93 @@
+import { expect, test } from '../../utils/base-test';
+
+test.describe('Search Filters', { tag: ['@search'] }, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/search');
+  });
+
+  test('should filter logs by severity level and persist pinned filters', async ({
+    page,
+  }) => {
+    await test.step('Apply Info severity filter', async () => {
+      // Open the Severity filter group
+      await page.locator('[data-testid="filter-group-SeverityText"]').click();
+
+      // Select the Info severity level
+      const infoCheckbox = page.locator(
+        '[data-testid="filter-checkbox-input-info"]',
+      );
+      await expect(infoCheckbox).toBeVisible();
+      await infoCheckbox.click();
+      await expect(infoCheckbox).toBeChecked();
+
+      // Verify search results are filtered
+      await expect(
+        page.locator('[data-testid="search-results-table"]'),
+      ).toBeVisible();
+    });
+
+    await test.step('Exclude Info severity level', async () => {
+      // Hover over the Info filter to show exclude button
+      const infoFilter = page.locator('[data-testid="filter-checkbox-info"]');
+      await infoFilter.hover();
+
+      // Click exclude button to invert the filter
+      await page.locator('[data-testid="filter-exclude-info"]').first().click();
+      await page.waitForTimeout(500);
+
+      // Verify filter shows as excluded (indeterminate state)
+      const infoInput = page.locator(
+        '[data-testid="filter-checkbox-input-info"]',
+      );
+      await expect(infoInput).toHaveAttribute('data-indeterminate', 'true');
+      await page.waitForLoadState('networkidle');
+    });
+
+    await test.step('Clear the filter', async () => {
+      // Click the filter again to clear it
+      await page.locator('[data-testid="filter-checkbox-info"]').click();
+      await page.waitForTimeout(500);
+    });
+
+    await test.step('Test using search to find and apply the filter', async () => {
+      // Search for "info" in the severity filter
+      const searchInput = page.locator(
+        '[data-testid="filter-search-SeverityText"]',
+      );
+      await searchInput.fill('info');
+      await page.waitForTimeout(500);
+
+      // Apply the Info filter from search results
+      await page.locator('[data-testid="filter-checkbox-info"]').click();
+      await page.waitForTimeout(500);
+
+      // Clear the search
+      await searchInput.clear();
+      await page.waitForTimeout(500);
+    });
+
+    await test.step('Pin filter and verify it persists after reload', async () => {
+      const infoFilter = page.locator('[data-testid="filter-checkbox-info"]');
+
+      // First exclude the filter, then pin it
+      await infoFilter.hover();
+      await page.locator('[data-testid="filter-exclude-info"]').click();
+      await infoFilter.hover();
+
+      // Pin the filter
+      await page.locator('[data-testid="filter-pin-info"]').click();
+      await page.waitForTimeout(500);
+
+      // Reload page and verify filter persists
+      await page.reload();
+      await page.waitForLoadState('networkidle');
+
+      await expect(
+        page.locator('[data-testid="filter-checkbox-info"]').first(),
+      ).toBeVisible();
+    });
+  });
+  //todo: test filter value pinning
+  //todo: text filter expand/collapse
+  //todo: test show more/show less
+});
diff --git a/packages/app/tests/e2e/features/search/search.spec.ts b/packages/app/tests/e2e/features/search/search.spec.ts
new file mode 100644
index 000000000..a40468af2
--- /dev/null
+++ b/packages/app/tests/e2e/features/search/search.spec.ts
@@ -0,0 +1,219 @@
+import { expect, test } from '../../utils/base-test';
+
+test.describe('Search', { tag: '@search' }, () => {
+  test.describe('Basic Functionality', () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/search');
+    });
+
+    test(
+      'should load search page with all components',
+      { tag: ['@local-mode', '@smoke'] },
+      async ({ page }) => {
+        await expect(page.locator('[data-testid="search-form"]')).toBeVisible();
+        await expect(
+          page.locator('[data-testid="time-picker-input"]'),
+        ).toBeVisible();
+        await expect(
+          page.locator('[data-testid="search-submit-button"]'),
+        ).toBeVisible();
+      },
+    );
+
+    test('should interact with time picker', async ({ page }) => {
+      await page.click('[data-testid="time-picker-input"]');
+      await expect(
+        page.locator('[data-testid="time-picker-apply"]'),
+      ).toBeVisible();
+      await expect(
+        page.locator('[data-testid="time-picker-1h-back"]'),
+      ).toBeVisible();
+      await expect(
+        page.locator('[data-testid="time-picker-1h-forward"]'),
+      ).toBeVisible();
+      await expect(
+        page.locator('[data-testid="time-picker-apply"]'),
+      ).toBeVisible();
+      await expect(
+        page.locator('[data-testid="time-picker-close"]'),
+      ).toBeVisible();
+      await expect(page.locator('text=Last 1 hour')).toBeVisible();
+      await page.click('[data-testid="time-picker-close"]');
+      await expect(
+        page.locator('[data-testid="time-picker-apply"]'),
+      ).not.toBeVisible();
+    });
+
+    test('should interact with search results and navigate side panel tabs', async ({
+      page,
+    }) => {
+      await test.step('Perform search and open side panel', async () => {
+        await page.click('[data-testid="search-submit-button"]');
+        await page.waitForTimeout(2000);
+
+        const tableRows = page.locator('[data-testid^="table-row-"]');
+        await expect(tableRows.first()).toBeVisible();
+        await tableRows.first().click();
+
+        const sidePanelTabs = page.locator('[data-testid="side-panel-tabs"]');
+        await expect(sidePanelTabs).toBeVisible();
+      });
+
+      await test.step('Navigate through all side panel tabs', async () => {
+        const overviewTab = page.locator('[data-testid="tab-overview"]');
+        const parsedTab = page.locator('[data-testid="tab-parsed"]');
+        const traceTab = page.locator('[data-testid="tab-trace"]');
+        const contextTab = page.locator('[data-testid="tab-context"]');
+
+        await parsedTab.click();
+        await expect(parsedTab).toBeVisible();
+
+        await traceTab.click();
+        await expect(traceTab).toBeVisible();
+
+        await contextTab.click();
+        await expect(contextTab).toBeVisible();
+
+        await overviewTab.click();
+        await expect(overviewTab).toBeVisible();
+      });
+    });
+  });
+
+  test.describe('Advanced Workflows', () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/search');
+    });
+
+    test('Search with Different Query Types - Lucene', async ({ page }) => {
+      await test.step('Test multiple search query types', async () => {
+        const searchInput = page.locator('[data-testid="search-input"]');
+        const searchSubmitButton = page.locator(
+          '[data-testid="search-submit-button"]',
+        );
+
+        const queries = ['error', 'status:200', '*exception*', 'level:"error"'];
+
+        for (const query of queries) {
+          await searchInput.fill('');
+          await page.waitForTimeout(500);
+
+          await searchInput.fill(query);
+          await searchSubmitButton.click();
+
+          await page.waitForLoadState('networkidle');
+          await page.waitForTimeout(3000);
+
+          const searchResultsTable = page.locator(
+            '[data-testid="search-results-table"]',
+          );
+          const tableVisible = await searchResultsTable.isVisible({
+            timeout: 2000,
+          });
+
+          // Results may or may not exist for each query - this is expected
+          expect(typeof tableVisible).toBe('boolean');
+        }
+      });
+    });
+
+    //TODO: Add query test using sql
+
+    test('Comprehensive Search Workflow - Search, View Results, Navigate Side Panel', async ({
+      page,
+    }) => {
+      await test.step('Setup and perform search', async () => {
+        const searchInput = page.locator('[data-testid="search-input"]');
+        await searchInput.fill('Order');
+
+        const searchSubmitButton = page.locator(
+          '[data-testid="search-submit-button"]',
+        );
+        await searchSubmitButton.click();
+
+        await page.waitForLoadState('networkidle');
+        await page.waitForTimeout(2000);
+      });
+
+      await test.step('Verify search results and interact with table rows', async () => {
+        const searchResultsTable = page.locator(
+          '[data-testid="search-results-table"]',
+        );
+        await expect(searchResultsTable).toBeVisible();
+
+        const rows = searchResultsTable.locator('tr');
+        const rowCount = await rows.count();
+        expect(rowCount).toBeGreaterThan(1);
+
+        await page.click(
+          `[data-testid="search-results-table"] tr:nth-child(2)`,
+        );
+        await page.waitForTimeout(1000);
+
+        const sidePanel = page.locator('nav[class*="EZDrawer__container"]');
+        await expect(sidePanel).toBeVisible();
+      });
+
+      await test.step('Navigate through all side panel tabs', async () => {
+        const overviewTab = page.locator('[data-testid="tab-overview"]');
+        const traceTab = page.locator('[data-testid="tab-trace"]');
+        const contextTab = page.locator('[data-testid="tab-context"]');
+        const infrastructureTab = page.locator(
+          '[data-testid="tab-infrastructure"]',
+        );
+
+        const tabs = [
+          { locator: traceTab, name: 'Trace' },
+          { locator: contextTab, name: 'Context' },
+          { locator: infrastructureTab, name: 'Infrastructure' },
+          { locator: overviewTab, name: 'Overview' },
+        ];
+
+        for (const tab of tabs) {
+          await tab.locator.scrollIntoViewIfNeeded();
+          await tab.locator.click({ timeout: 5000 });
+          await page.waitForTimeout(500);
+          await expect(tab.locator).toBeVisible();
+        }
+        await page.keyboard.press('Escape');
+      });
+    });
+
+    test('Time Picker Integration with Search', async ({ page }) => {
+      await test.step('Interact with time picker', async () => {
+        const timePicker = page.locator('[data-testid="time-picker-input"]');
+        await expect(timePicker).toBeVisible();
+        await timePicker.click();
+        await page.waitForTimeout(1000);
+
+        const lastHourOption = page.locator('text=Last 1 hour');
+        await expect(lastHourOption).toBeVisible();
+        await lastHourOption.click();
+        await page.waitForTimeout(500);
+      });
+
+      await test.step('Perform search with selected time range', async () => {
+        const searchInput = page.locator('[data-testid="search-input"]');
+        await searchInput.fill('');
+
+        const searchSubmitButton = page.locator(
+          '[data-testid="search-submit-button"]',
+        );
+        await searchSubmitButton.click();
+
+        await page.waitForLoadState('networkidle');
+        await page.waitForTimeout(2000);
+      });
+
+      await test.step('Verify search results', async () => {
+        const searchResultsTable = page.locator(
+          '[data-testid="search-results-table"]',
+        );
+        await expect(searchResultsTable).toBeVisible();
+        const rows = searchResultsTable.locator('tr');
+        const rowCount = await rows.count();
+        expect(rowCount).toBeGreaterThan(0);
+      });
+    });
+  });
+});
diff --git a/packages/app/tests/e2e/features/sessions.spec.ts b/packages/app/tests/e2e/features/sessions.spec.ts
new file mode 100644
index 000000000..2e43df6a4
--- /dev/null
+++ b/packages/app/tests/e2e/features/sessions.spec.ts
@@ -0,0 +1,56 @@
+import { expect, test } from '../utils/base-test';
+
+test.describe('Client Sessions Functionality', { tag: ['@sessions'] }, () => {
+  test('should load sessions page', async ({ page }) => {
+    await test.step('Navigate to sessions page', async () => {
+      await page.goto('/sessions');
+      await page.waitForLoadState('networkidle');
+      await page.waitForTimeout(1000);
+    });
+
+    await test.step('Verify sessions page components are present', async () => {
+      await page.waitForTimeout(1000);
+
+      const selectors = [
+        '[data-testid="sessions-search-form"]',
+        'input[placeholder="Data Source"]',
+        '.mantine-Select-input',
+      ];
+
+      for (const selector of selectors) {
+        expect(page.locator(selector)).toBeVisible();
+      }
+    });
+  });
+
+  test('should interact with session cards', async ({ page }) => {
+    await test.step('Navigate to sessions page and wait for load', async () => {
+      // First go to search page to trigger onboarding modal handling
+      await page.goto('/search');
+      await page.waitForLoadState('networkidle');
+      await page.waitForTimeout(1000);
+
+      // Then navigate to sessions page
+      await page.goto('/sessions');
+      await page.waitForLoadState('networkidle');
+      await page.waitForTimeout(2000);
+    });
+
+    await test.step('Find and interact with session cards', async () => {
+      const sessionCards = page.locator('[data-testid^="session-card-"]');
+      const sessionCount = await sessionCards.count();
+
+      if (sessionCount > 0) {
+        const firstSession = sessionCards.first();
+        await expect(firstSession).toBeVisible();
+        await firstSession.click();
+        await page.waitForTimeout(1000);
+      } else {
+        // If no session cards, at least verify the page structure is correct
+        await expect(
+          page.locator('input[placeholder="Data Source"]'),
+        ).toBeVisible();
+      }
+    });
+  });
+});
diff --git a/packages/app/tests/e2e/features/sources.spec.ts b/packages/app/tests/e2e/features/sources.spec.ts
new file mode 100644
index 000000000..6855843bc
--- /dev/null
+++ b/packages/app/tests/e2e/features/sources.spec.ts
@@ -0,0 +1,19 @@
+import { expect, test } from '../utils/base-test';
+
+test.describe('Sources Functionality', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/search');
+  });
+
+  test('should open source settings menu', async ({ page }) => {
+    await page.click('[data-testid="source-settings-menu"]');
+    await expect(
+      page.locator('[data-testid="create-new-source-menu-item"]'),
+    ).toBeVisible();
+
+    const editSourceMenuItems = page.locator(
+      '[data-testid="edit-source-menu-item"], [data-testid="edit-sources-menu-item"]',
+    );
+    await expect(editSourceMenuItems.first()).toBeVisible();
+  });
+});
diff --git a/packages/app/tests/e2e/features/traces-workflow.spec.ts b/packages/app/tests/e2e/features/traces-workflow.spec.ts
new file mode 100644
index 000000000..c0a5c6ce9
--- /dev/null
+++ b/packages/app/tests/e2e/features/traces-workflow.spec.ts
@@ -0,0 +1,129 @@
+import { expect, test } from '../utils/base-test';
+
+test.describe('Advanced Search Workflow - Traces', { tag: '@traces' }, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/search');
+  });
+
+  test('Comprehensive traces workflow - search, view waterfall, navigate trace details', async ({
+    page,
+  }) => {
+    await test.step('Select Demo Traces data source', async () => {
+      const sourceSelector = page.locator('[data-testid="source-selector"]');
+      await expect(sourceSelector).toBeVisible();
+      await sourceSelector.click();
+      await page.waitForTimeout(500);
+
+      const demoTracesOption = page.locator('text=Demo Traces');
+      await expect(demoTracesOption).toBeVisible();
+      await demoTracesOption.click();
+      await page.waitForTimeout(1000);
+    });
+
+    await test.step('Search for Order traces', async () => {
+      const searchInput = page.locator('[data-testid="search-input"]');
+      await expect(searchInput).toBeVisible();
+      await searchInput.fill('Order');
+
+      const searchSubmitButton = page.locator(
+        '[data-testid="search-submit-button"]',
+      );
+      await searchSubmitButton.click();
+
+      await page.waitForLoadState('networkidle');
+      await page.waitForTimeout(2000);
+    });
+
+    await test.step('Verify search results', async () => {
+      const searchResultsTable = page.locator(
+        '[data-testid="search-results-table"]',
+      );
+      await expect(searchResultsTable).toBeVisible();
+    });
+
+    await test.step('Click on first trace result and open side panel', async () => {
+      const searchResultsTable = page.locator(
+        '[data-testid="search-results-table"]',
+      );
+      const firstRow = searchResultsTable.locator('tr').nth(1);
+      await expect(firstRow).toBeVisible();
+
+      await firstRow.click();
+      await page.waitForTimeout(1000);
+
+      // Use the main side panel container (nav element with EZDrawer__container class)
+      const sidePanel = page.locator('nav[class*="EZDrawer__container"]');
+      await expect(sidePanel).toBeVisible();
+    });
+
+    await test.step('Navigate to trace tab and verify trace visualization', async () => {
+      const traceTab = page.locator('[data-testid="tab-trace"]');
+      await expect(traceTab).toBeVisible();
+      await traceTab.click();
+      await page.waitForTimeout(1000);
+
+      // Verify trace visualization is present - check for trace content
+      const tracePanel = page.locator('[data-testid="side-panel-tab-trace"]');
+      await expect(tracePanel).toBeVisible({ timeout: 5000 });
+
+      // Wait for trace data to load and verify trace content is displayed
+      await page.waitForTimeout(2000);
+
+      // Look for trace timeline elements (the spans/timeline labels that show in trace view)
+      const traceTimelineElements = page
+        .locator('[role="button"]')
+        .filter({ hasText: /\w+/ });
+      const timelineElementsCount = await traceTimelineElements.count();
+
+      // Verify we have trace timeline elements (spans) visible
+      expect(timelineElementsCount).toBeGreaterThan(0);
+    });
+
+    await test.step('Verify event details and navigation tabs', async () => {
+      const overviewTab = page.locator('text=Overview').first();
+      const columnValuesTab = page.locator('text=Column Values').first();
+
+      await expect(overviewTab).toBeVisible();
+      await expect(columnValuesTab).toBeVisible();
+    });
+
+    await test.step('Interact with span elements in trace waterfall', async () => {
+      // Look for clickable trace span elements (buttons with role="button")
+      const spanElements = page
+        .locator('[role="button"]')
+        .filter({ hasText: /CartService|AddItem|POST|span|trace/ });
+      const spanCount = await spanElements.count();
+      expect(spanCount).toBeGreaterThan(0);
+
+      if (spanCount > 1) {
+        const secondSpan = spanElements.nth(1);
+        await secondSpan.scrollIntoViewIfNeeded();
+        await secondSpan.click({ timeout: 3000 });
+        await page.waitForTimeout(1000);
+      }
+    });
+
+    await test.step('Verify trace attributes are displayed', async () => {
+      const traceAttributes = ['TraceId', 'SpanId', 'SpanName'];
+
+      for (const attribute of traceAttributes) {
+        const attributeElement = page
+          .locator(`div[class*="HyperJson_key__"]`)
+          .filter({ hasText: new RegExp(`^${attribute}$`) });
+        await expect(attributeElement).toBeVisible();
+      }
+
+      await page.keyboard.press('PageDown');
+      await page.waitForTimeout(500);
+
+      // Look for section headers that might not be in HyperJson_key divs
+      const topLevelAttributesSection = page.locator(
+        'text=Top Level Attributes',
+      );
+      await expect(topLevelAttributesSection).toBeVisible();
+
+      const spanAttributesSection = page.locator('text=Span Attributes');
+      await expect(spanAttributesSection).toBeVisible();
+    });
+  });
+});
diff --git a/packages/app/tests/e2e/utils/base-test.ts b/packages/app/tests/e2e/utils/base-test.ts
new file mode 100644
index 000000000..3c02bea46
--- /dev/null
+++ b/packages/app/tests/e2e/utils/base-test.ts
@@ -0,0 +1,150 @@
+import { expect, test as base } from '@playwright/test';
+
+// Extend the base test to automatically handle Tanstack devtools
+export const test = base.extend({
+  page: async ({ page }, use) => {
+    await page.addInitScript(() => {
+      window.localStorage.setItem('TanstackQueryDevtools.open', 'false');
+      window.sessionStorage.setItem(
+        'connections',
+        '[{"name":"Demo","host":"https://sql-clickhouse.clickhouse.com","username":"otel_demo","password":"","id":"local"}]',
+      );
+      window.localStorage.setItem(
+        'hdx-local-source',
+        JSON.stringify([
+          {
+            kind: 'log',
+            name: 'Demo Logs',
+            connection: 'local',
+            from: { databaseName: 'otel_v2', tableName: 'otel_logs' },
+            timestampValueExpression: 'TimestampTime',
+            defaultTableSelectExpression:
+              'Timestamp, ServiceName, SeverityText, Body',
+            serviceNameExpression: 'ServiceName',
+            severityTextExpression: 'SeverityText',
+            eventAttributesExpression: 'LogAttributes',
+            resourceAttributesExpression: 'ResourceAttributes',
+            traceIdExpression: 'TraceId',
+            spanIdExpression: 'SpanId',
+            implicitColumnExpression: 'Body',
+            displayedTimestampValueExpression: 'Timestamp',
+            id: 'l956912644',
+            sessionSourceId: 'l1155456738',
+            traceSourceId: 'l1073165478',
+            metricSourceId: 'l-517210123',
+          },
+          {
+            kind: 'trace',
+            name: 'Demo Traces',
+            connection: 'local',
+            from: { databaseName: 'otel_v2', tableName: 'otel_traces' },
+            timestampValueExpression: 'Timestamp',
+            defaultTableSelectExpression:
+              'Timestamp, ServiceName, StatusCode, round(Duration / 1e6), SpanName',
+            serviceNameExpression: 'ServiceName',
+            eventAttributesExpression: 'SpanAttributes',
+            resourceAttributesExpression: 'ResourceAttributes',
+            traceIdExpression: 'TraceId',
+            spanIdExpression: 'SpanId',
+            implicitColumnExpression: 'SpanName',
+            durationExpression: 'Duration',
+            durationPrecision: 9,
+            parentSpanIdExpression: 'ParentSpanId',
+            spanKindExpression: 'SpanKind',
+            spanNameExpression: 'SpanName',
+            logSourceId: 'l956912644',
+            statusCodeExpression: 'StatusCode',
+            statusMessageExpression: 'StatusMessage',
+            spanEventsValueExpression: 'Events',
+            id: 'l1073165478',
+            metricSourceId: 'l-517210123',
+            sessionSourceId: 'l1155456738',
+          },
+          {
+            kind: 'metric',
+            name: 'Demo Metrics',
+            connection: 'local',
+            from: { databaseName: 'otel_v2', tableName: '' },
+            timestampValueExpression: 'TimeUnix',
+            serviceNameExpression: 'ServiceName',
+            metricTables: {
+              gauge: 'otel_metrics_gauge',
+              histogram: 'otel_metrics_histogram',
+              sum: 'otel_metrics_sum',
+              summary: 'otel_metrics_summary',
+              'exponential histogram': 'otel_metrics_exponential_histogram',
+            },
+            resourceAttributesExpression: 'ResourceAttributes',
+            logSourceId: 'l956912644',
+            id: 'l-517210123',
+          },
+          {
+            kind: 'session',
+            name: 'Demo Sessions',
+            connection: 'local',
+            from: { databaseName: 'otel_v2', tableName: 'hyperdx_sessions' },
+            timestampValueExpression: 'TimestampTime',
+            defaultTableSelectExpression: 'Timestamp, ServiceName, Body',
+            serviceNameExpression: 'ServiceName',
+            severityTextExpression: 'SeverityText',
+            eventAttributesExpression: 'LogAttributes',
+            resourceAttributesExpression: 'ResourceAttributes',
+            traceSourceId: 'l1073165478',
+            traceIdExpression: 'TraceId',
+            spanIdExpression: 'SpanId',
+            implicitColumnExpression: 'Body',
+            id: 'l1155456738',
+          },
+          {
+            kind: 'trace',
+            name: 'ClickPy Traces',
+            connection: 'local',
+            from: { databaseName: 'otel_clickpy', tableName: 'otel_traces' },
+            timestampValueExpression: 'Timestamp',
+            defaultTableSelectExpression:
+              'Timestamp, ServiceName, StatusCode, round(Duration / 1e6), SpanName',
+            serviceNameExpression: 'ServiceName',
+            eventAttributesExpression: 'SpanAttributes',
+            resourceAttributesExpression: 'ResourceAttributes',
+            traceIdExpression: 'TraceId',
+            spanIdExpression: 'SpanId',
+            implicitColumnExpression: 'SpanName',
+            durationExpression: 'Duration',
+            durationPrecision: 9,
+            parentSpanIdExpression: 'ParentSpanId',
+            spanKindExpression: 'SpanKind',
+            spanNameExpression: 'SpanName',
+            statusCodeExpression: 'StatusCode',
+            statusMessageExpression: 'StatusMessage',
+            spanEventsValueExpression: 'Events',
+            id: 'l-1156687249',
+            sessionSourceId: 'l-1709901146',
+          },
+          {
+            kind: 'session',
+            name: 'ClickPy Sessions',
+            connection: 'local',
+            from: {
+              databaseName: 'otel_clickpy',
+              tableName: 'hyperdx_sessions',
+            },
+            timestampValueExpression: 'TimestampTime',
+            defaultTableSelectExpression: 'Timestamp, ServiceName, Body',
+            serviceNameExpression: 'ServiceName',
+            severityTextExpression: 'SeverityText',
+            eventAttributesExpression: 'LogAttributes',
+            resourceAttributesExpression: 'ResourceAttributes',
+            traceSourceId: 'l-1156687249',
+            traceIdExpression: 'TraceId',
+            spanIdExpression: 'SpanId',
+            implicitColumnExpression: 'Body',
+            id: 'l-1709901146',
+          },
+        ]),
+      );
+    });
+    await use(page);
+  },
+});
+
+export { expect };
diff --git a/yarn.lock b/yarn.lock
index ee50e676e..d89663a6c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4535,6 +4535,7 @@ __metadata:
     "@mantine/notifications": "npm:^7.9.2"
     "@mantine/spotlight": "npm:7.9.2"
     "@microsoft/fetch-event-source": "npm:^2.0.1"
+    "@playwright/test": "npm:^1.47.0"
     "@storybook/addon-essentials": "npm:^8.1.5"
     "@storybook/addon-interactions": "npm:^8.1.5"
     "@storybook/addon-links": "npm:^8.1.5"
@@ -7644,6 +7645,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@playwright/test@npm:^1.47.0":
+  version: 1.55.0
+  resolution: "@playwright/test@npm:1.55.0"
+  dependencies:
+    playwright: "npm:1.55.0"
+  bin:
+    playwright: cli.js
+  checksum: 10c0/e68b59cd8271f1b57c0649fc0562ab2d5f6bba8c3653dd7bd52ca1338dc380fde34588d0254e3cd3f0f2b20af04a80dfb080419ceb7475990bb2fc4d8c474984
+  languageName: node
+  linkType: hard
+
 "@pmmmwh/react-refresh-webpack-plugin@npm:^0.5.11":
   version: 0.5.13
   resolution: "@pmmmwh/react-refresh-webpack-plugin@npm:0.5.13"
@@ -9876,14 +9888,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/express-serve-static-core@npm:^4.17.33":
-  version: 4.17.33
-  resolution: "@types/express-serve-static-core@npm:4.17.33"
+"@types/express-serve-static-core@npm:4.17.43":
+  version: 4.17.43
+  resolution: "@types/express-serve-static-core@npm:4.17.43"
   dependencies:
     "@types/node": "npm:*"
     "@types/qs": "npm:*"
     "@types/range-parser": "npm:*"
-  checksum: 10c0/68f21adeb8cb7085014692daa8fd75b33be2cbb91f954f42fef4804e04cb34abbe8020918d7656243afec4882949ce0c4e8074eaf5a5f8dfbef704690799724a
+    "@types/send": "npm:*"
+  checksum: 10c0/12480527eef86ad9f748d785811c88e6bb89f4a76e531cf2e18f1f4f0743e46783cf4d27a939dec96aec8770c54c060d9e697bb8544ecd202098140688c3b222
   languageName: node
   linkType: hard
 
@@ -9896,19 +9909,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/express@npm:*, @types/express@npm:^4.17.13":
-  version: 4.17.17
-  resolution: "@types/express@npm:4.17.17"
-  dependencies:
-    "@types/body-parser": "npm:*"
-    "@types/express-serve-static-core": "npm:^4.17.33"
-    "@types/qs": "npm:*"
-    "@types/serve-static": "npm:*"
-  checksum: 10c0/5802a0a28f7473744dd6a118479440d8c5c801c973d34fb6f31b5ee645a41fee936193978a8e905d55deefda9b675d19924167bf11a31339874c3161a3fc2922
-  languageName: node
-  linkType: hard
-
-"@types/express@npm:^4.7.0":
+"@types/express@npm:4.17.21":
   version: 4.17.21
   resolution: "@types/express@npm:4.17.21"
   dependencies:
@@ -10144,6 +10145,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/mime@npm:^1":
+  version: 1.3.5
+  resolution: "@types/mime@npm:1.3.5"
+  checksum: 10c0/c2ee31cd9b993804df33a694d5aa3fa536511a49f2e06eeab0b484fef59b4483777dbb9e42a4198a0809ffbf698081fdbca1e5c2218b82b91603dfab10a10fbc
+  languageName: node
+  linkType: hard
+
 "@types/minimist@npm:^1.2.0, @types/minimist@npm:^1.2.2":
   version: 1.2.2
   resolution: "@types/minimist@npm:1.2.2"
@@ -10477,6 +10485,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/send@npm:*":
+  version: 0.17.5
+  resolution: "@types/send@npm:0.17.5"
+  dependencies:
+    "@types/mime": "npm:^1"
+    "@types/node": "npm:*"
+  checksum: 10c0/a86c9b89bb0976ff58c1cdd56360ea98528f4dbb18a5c2287bb8af04815513a576a42b4e0e1e7c4d14f7d6ea54733f6ef935ebff8c65e86d9c222881a71e1f15
+  languageName: node
+  linkType: hard
+
 "@types/serve-static@npm:*":
   version: 1.15.1
   resolution: "@types/serve-static@npm:1.15.1"
@@ -16995,7 +17013,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fsevents@npm:^2.3.2, fsevents@npm:~2.3.2":
+"fsevents@npm:2.3.2, fsevents@npm:^2.3.2, fsevents@npm:~2.3.2":
   version: 2.3.2
   resolution: "fsevents@npm:2.3.2"
   dependencies:
@@ -17005,7 +17023,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fsevents@patch:fsevents@npm%3A^2.3.2#optional!builtin<compat/fsevents>, fsevents@patch:fsevents@npm%3A~2.3.2#optional!builtin<compat/fsevents>":
+"fsevents@patch:fsevents@npm%3A2.3.2#optional!builtin<compat/fsevents>, fsevents@patch:fsevents@npm%3A^2.3.2#optional!builtin<compat/fsevents>, fsevents@patch:fsevents@npm%3A~2.3.2#optional!builtin<compat/fsevents>":
   version: 2.3.2
   resolution: "fsevents@patch:fsevents@npm%3A2.3.2#optional!builtin<compat/fsevents>::version=2.3.2&hash=df0bf1"
   dependencies:
@@ -23533,6 +23551,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"playwright-core@npm:1.55.0":
+  version: 1.55.0
+  resolution: "playwright-core@npm:1.55.0"
+  bin:
+    playwright-core: cli.js
+  checksum: 10c0/c39d6aa30e7a4e73965942ca5e13405ae05c9cb49f755a35f04248c864c0b24cf662d9767f1797b3ec48d1cf4e54774dce4a19c16534bd5cfd2aa3da81c9dc3a
+  languageName: node
+  linkType: hard
+
+"playwright@npm:1.55.0":
+  version: 1.55.0
+  resolution: "playwright@npm:1.55.0"
+  dependencies:
+    fsevents: "npm:2.3.2"
+    playwright-core: "npm:1.55.0"
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  bin:
+    playwright: cli.js
+  checksum: 10c0/51605b7e57a5650e57972c5fdfc09d7a9934cca1cbee5beacca716fa801e25cb5bb7c1663de90c22b300fde884e5545a2b13a0505a93270b660687791c478304
+  languageName: node
+  linkType: hard
+
 "plimit-lit@npm:^1.2.6":
   version: 1.6.1
   resolution: "plimit-lit@npm:1.6.1"