feat: add e2e test harness and accessibility polish (#88)

Introduce Playwright-driven Electron e2e runner with mock AI scenario to
capture deterministic transcripts and videos for review flows.
Seed test config via CMUX_TEST_ROOT, adjust Config to honor it, and
teach main process to boot against the dev server during e2e runs.
Stub mermaid in Vite to keep captures predictable and expand tsconfig
coverage for new test sources.
Harden Bash and StreamManager tests for CI timing variance.
Improve keyboard and screen-reader access across chat transcript,
command palette, slider, sidebar, and toast UI.

Signed-off-by: Thomas Kosiewski <tk@coder.com>

Author: ThomasK33

.gitignore

@@ -83,3 +83,5 @@ TESTING.md
 FEATURE_SUMMARY.md
 CODE_CHANGES.md
 README_COMPACT_HERE.md
+artifacts/
+tests/e2e/tmp/

Makefile

@@ -21,7 +21,7 @@
 .PHONY: all build dev start clean help
 .PHONY: build-main build-preload build-renderer
 .PHONY: lint lint-fix fmt fmt-check fmt-shell fmt-shell-check typecheck static-check
-.PHONY: test test-unit test-integration test-watch test-coverage
+.PHONY: test test-unit test-integration test-watch test-coverage test-e2e
 .PHONY: dist dist-mac dist-win dist-linux
 .PHONY: docs docs-build docs-watch
 
@@ -110,6 +110,9 @@ test-watch: ## Run tests in watch mode
 test-coverage: ## Run tests with coverage
 	@./scripts/test.sh --coverage
 
+test-e2e: ## Run end-to-end tests
+	@PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 bun x playwright test --project=electron
+
 ## Distribution
 dist: build ## Build distributable packages
 	@bun x electron-builder --publish never

bun.lock

@@ -0,0 +1,8 @@
+[test]
+root = "src"
+match = [
+  "**/*.test.ts",
+  "**/*.test.tsx",
+  "**/*.spec.ts",
+  "**/*.spec.tsx"
+]

bunfig.toml

@@ -19,6 +19,7 @@
     "test:watch": "make test-watch",
     "test:coverage": "make test-coverage",
     "test:integration": "make test-integration",
+    "test:e2e": "make test-e2e",
     "dist": "make dist",
     "dist:mac": "make dist-mac",
     "dist:win": "make dist-win",
@@ -59,6 +60,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.36.0",
+    "@playwright/test": "^1.56.0",
     "@testing-library/react": "^16.3.0",
     "@types/bun": "^1.2.23",
     "@types/diff": "^8.0.0",
@@ -81,6 +83,7 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "jest": "^30.1.3",
+    "playwright": "^1.56.0",
     "prettier": "^3.6.2",
     "ts-jest": "^29.4.4",
     "tsc-alias": "^1.8.16",

package.json

@@ -0,0 +1,34 @@
+import { defineConfig } from "@playwright/test";
+
+const isCI = process.env.CI === "true";
+
+export default defineConfig({
+  testDir: "./tests/e2e",
+  timeout: 120_000,
+  expect: {
+    timeout: 5_000,
+  },
+  fullyParallel: false,
+  forbidOnly: isCI,
+  retries: isCI ? 1 : 0,
+  reporter: [
+    ["list"],
+    ["html", { outputFolder: "artifacts/playwright-report", open: "never" }],
+  ],
+  workers: 1,
+  use: {
+    trace: isCI ? "on-first-retry" : "retain-on-failure",
+    screenshot: "only-on-failure",
+    video: {
+      mode: "on",
+      size: { width: 1280, height: 720 },
+    },
+  },
+  outputDir: "artifacts/playwright-output",
+  projects: [
+    {
+      name: "electron",
+      testDir: "./tests/e2e",
+    },
+  ],
+});

playwright.config.ts

@@ -142,7 +142,7 @@ const EditBarrier = styled.div`
   text-align: center;
 `;
 
-const JumpToBottomIndicator = styled.div`
+const JumpToBottomIndicator = styled.button`
   position: absolute;
   bottom: 8px;
   left: 50%;
@@ -391,6 +391,11 @@ const AIViewInner: React.FC<AIViewProps> = ({
               onWheel={markUserInteraction}
               onTouchMove={markUserInteraction}
               onScroll={handleScroll}
+              role="log"
+              aria-live={canInterrupt ? "polite" : "off"}
+              aria-busy={canInterrupt}
+              aria-label="Conversation transcript"
+              tabIndex={0}
             >
               {messages.length === 0 ? (
                 <EmptyState>
@@ -444,7 +449,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
               )}
             </OutputContent>
             {!autoScroll && (
-              <JumpToBottomIndicator onClick={jumpToBottom}>
+              <JumpToBottomIndicator onClick={jumpToBottom} type="button">
                 Press {formatKeybind(KEYBINDS.JUMP_TO_BOTTOM)} to jump to bottom
               </JumpToBottomIndicator>
             )}

src/components/AIView.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useCallback, useEffect } from "react";
+import React, { useState, useRef, useCallback, useEffect, useId } from "react";
 import styled from "@emotion/styled";
 import { CommandSuggestions, COMMAND_SUGGESTION_KEYS } from "./CommandSuggestions";
 import type { Toast } from "./ChatInputToast";
@@ -300,6 +300,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
   const modelSelectorRef = useRef<ModelSelectorRef>(null);
   const [mode, setMode] = useMode();
   const { recentModels } = useModelLRU();
+  const commandListId = useId();
 
   // Get current send message options from shared hook (must be at component top level)
   const sendMessageOptions = useSendMessageOptions(workspaceId);
@@ -731,6 +732,8 @@ export const ChatInput: React.FC<ChatInputProps> = ({
         onSelectSuggestion={handleCommandSelect}
         onDismiss={() => setShowCommandSuggestions(false)}
         isVisible={showCommandSuggestions}
+        ariaLabel="Slash command suggestions"
+        listId={commandListId}
       />
       <InputControls data-component="ChatInputControls">
         <VimTextArea
@@ -743,6 +746,12 @@ export const ChatInput: React.FC<ChatInputProps> = ({
           suppressKeys={showCommandSuggestions ? COMMAND_SUGGESTION_KEYS : undefined}
           placeholder={placeholder}
           disabled={disabled || isSending || isCompacting}
+          aria-label={editingMessage ? "Edit your last message" : "Message Claude"}
+          aria-autocomplete="list"
+          aria-controls={
+            showCommandSuggestions && commandSuggestions.length > 0 ? commandListId : undefined
+          }
+          aria-expanded={showCommandSuggestions && commandSuggestions.length > 0}
         />
       </InputControls>
       <ModeToggles data-component="ChatModeToggles">

src/components/ChatInput.tsx

@@ -202,7 +202,7 @@ export const ChatInputToast: React.FC<ChatInputToastProps> = ({ toast, onDismiss
   if (isRichError) {
     return (
       <ToastWrapper>
-        <ErrorContainer>
+        <ErrorContainer role="alert" aria-live="assertive">
           <div style={{ display: "flex", alignItems: "flex-start", gap: "6px" }}>
             <ToastIcon>⚠</ToastIcon>
             <div style={{ flex: 1 }}>
@@ -212,7 +212,9 @@ export const ChatInputToast: React.FC<ChatInputToastProps> = ({ toast, onDismiss
               <ErrorDetails>{toast.message}</ErrorDetails>
               {toast.solution && <ErrorSolution>{toast.solution}</ErrorSolution>}
             </div>
-            <CloseButton onClick={handleDismiss}>×</CloseButton>
+            <CloseButton onClick={handleDismiss} aria-label="Dismiss">
+              ×
+            </CloseButton>
           </div>
         </ErrorContainer>
       </ToastWrapper>
@@ -222,7 +224,12 @@ export const ChatInputToast: React.FC<ChatInputToastProps> = ({ toast, onDismiss
   // Regular toast for simple messages and success
   return (
     <ToastWrapper>
-      <ToastContainer type={toast.type} isLeaving={isLeaving}>
+      <ToastContainer
+        type={toast.type}
+        isLeaving={isLeaving}
+        role={toast.type === "error" ? "alert" : "status"}
+        aria-live={toast.type === "error" ? "assertive" : "polite"}
+      >
         <ToastIcon>{toast.type === "success" ? "✓" : "⚠"}</ToastIcon>
         <ToastContent>
           {toast.title && <ToastTitle>{toast.title}</ToastTitle>}

src/components/ChatInputToast.tsx

@@ -64,19 +64,49 @@ export const ChatMetaSidebar: React.FC<ChatMetaSidebarProps> = ({ workspaceId })
     "costs"
   );
 
+  const baseId = `chat-meta-${workspaceId}`;
+  const costsTabId = `${baseId}-tab-costs`;
+  const toolsTabId = `${baseId}-tab-tools`;
+  const costsPanelId = `${baseId}-panel-costs`;
+  const toolsPanelId = `${baseId}-panel-tools`;
+
   return (
-    <SidebarContainer>
-      <TabBar>
-        <TabButton active={selectedTab === "costs"} onClick={() => setSelectedTab("costs")}>
+    <SidebarContainer role="complementary" aria-label="Workspace insights">
+      <TabBar role="tablist" aria-label="Metadata views">
+        <TabButton
+          active={selectedTab === "costs"}
+          onClick={() => setSelectedTab("costs")}
+          id={costsTabId}
+          role="tab"
+          type="button"
+          aria-selected={selectedTab === "costs"}
+          aria-controls={costsPanelId}
+        >
           Costs
         </TabButton>
-        <TabButton active={selectedTab === "tools"} onClick={() => setSelectedTab("tools")}>
+        <TabButton
+          active={selectedTab === "tools"}
+          onClick={() => setSelectedTab("tools")}
+          id={toolsTabId}
+          role="tab"
+          type="button"
+          aria-selected={selectedTab === "tools"}
+          aria-controls={toolsPanelId}
+        >
           Tools
         </TabButton>
       </TabBar>
       <TabContent>
-        {selectedTab === "costs" && <CostsTab />}
-        {selectedTab === "tools" && <ToolsTab />}
+        {selectedTab === "costs" && (
+          <div role="tabpanel" id={costsPanelId} aria-labelledby={costsTabId}>
+            <CostsTab />
+          </div>
+        )}
+        {selectedTab === "tools" && (
+          <div role="tabpanel" id={toolsPanelId} aria-labelledby={toolsTabId}>
+            <ToolsTab />
+          </div>
+        )}
       </TabContent>
     </SidebarContainer>
   );