feat: add e2e test harness and accessibility polish

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>

fix: align git status parser with ref order

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

fix: emit abort event and cancel existing mock streams

- Emit stream-abort event when stopping mock streams to mirror real streaming behavior
- Cancel any existing stream before starting a new one to prevent timer corruption
- Addresses Codex review comments about mock stream lifecycle management

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

fix: persist mock stream messages to history on completion

- Call HistoryService.updateHistory when stream-end fires in mock mode
- Mirrors real StreamManager behavior to persist completed messages
- Prevents empty assistant entries in chat.jsonl after mock runs
- Addresses Codex review comment about mock persistence

Change-Id: I4f4cd7fe27355a561cd4e2193a4045424918dd1e
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",
@@ -57,6 +58,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",
@@ -79,6 +81,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

@@ -138,7 +138,7 @@ const EditBarrier = styled.div`
   text-align: center;
 `;
 
-const JumpToBottomIndicator = styled.div`
+const JumpToBottomIndicator = styled.button`
   position: absolute;
   bottom: 8px;
   left: 50%;
@@ -355,6 +355,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>
@@ -398,7 +403,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";
@@ -308,6 +308,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
   const [mode, setMode] = useMode();
   const [use1M] = use1MContext();
   const { recentModels } = useModelLRU();
+  const commandListId = useId();
 
   const focusMessageInput = useCallback(() => {
     const element = inputRef.current;
@@ -743,6 +744,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
@@ -755,6 +758,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>
   );