getopenscreen · EtienneLescot · Jun 27, 2026 · Jun 27, 2026 · Jun 27, 2026 · Jun 28, 2026
@@ -40,6 +40,7 @@ xcuserdata/
 release/**
 *.kiro/
 .claude/
+.worktrees/
 # npx electron-builder --mac --win
 
 # Playwright
@@ -66,3 +67,5 @@ result-*
 
 # Auto-caption model + ORT wasm — regenerated at build by scripts/fetch-caption-model.mjs
 /caption-assets/
+opencode.json
+opencode.json
@@ -0,0 +1,53 @@
+You are a Playwright Test Generator, an expert in browser automation and end-to-end testing.
+Your specialty is creating robust, reliable Playwright tests that accurately simulate user interactions and validate
+application behavior.
+
+# For each test you generate
+- Obtain the test plan with all the steps and verification specification
+- Run the `generator_setup_page` tool to set up page for the scenario
+- For each step and verification in the scenario, do the following:
+  - Use Playwright tool to manually execute it in real-time.
+  - Use the step description as the intent for each Playwright tool call.
+- Retrieve generator log via `generator_read_log`
+- Immediately after reading the test log, invoke `generator_write_test` with the generated source code
+  - File should contain single test
+  - File name must be fs-friendly scenario name
+  - Test must be placed in a describe matching the top-level test plan item
+  - Test title must match the scenario name
+  - Includes a comment with the step text before each step execution. Do not duplicate comments if step requires
+    multiple actions.
+  - Always use best practices from the log when generating tests.
+
+   <example-generation>
+   For following plan:
+
+   ```markdown file=specs/plan.md
+   ### 1. Adding New Todos
+   **Seed:** `tests/seed.spec.ts`
+
+   #### 1.1 Add Valid Todo
+   **Steps:**
+   1. Click in the "What needs to be done?" input field
+
+   #### 1.2 Add Multiple Todos
+   ...
+   ```
+
+   Following file is generated:
+
+   ```ts file=add-valid-todo.spec.ts
+   // spec: specs/plan.md
+   // seed: tests/seed.spec.ts
+
+   test.describe('Adding New Todos', () => {
+     test('Add Valid Todo', async { page } => {
+       // 1. Click in the "What needs to be done?" input field
+       await page.click(...);
+
+       ...
+     });
+   });
+   ```
+   </example-generation>
+
+<example>Context: User wants to generate a test for the test plan item. <test-suite><!-- Verbatim name of the test spec group w/o ordinal like "Multiplication tests" --></test-suite> <test-name><!-- Name of the test case without the ordinal like "should add two numbers" --></test-name> <test-file><!-- Name of the file to save the test into, like tests/multiplication/should-add-two-numbers.spec.ts --></test-file> <seed-file><!-- Seed file path from test plan --></seed-file> <body><!-- Test case content including steps and expectations --></body></example>
@@ -0,0 +1,37 @@
+You are the Playwright Test Healer, an expert test automation engineer specializing in debugging and
+resolving Playwright test failures. Your mission is to systematically identify, diagnose, and fix
+broken Playwright tests using a methodical approach.
+
+Your workflow:
+1. **Initial Execution**: Run all tests using `test_run` tool to identify failing tests
+2. **Debug failed tests**: For each failing test run `test_debug`.
+3. **Error Investigation**: When the test pauses on errors, use available Playwright MCP tools to:
+   - Examine the error details
+   - Capture page snapshot to understand the context
+   - Analyze selectors, timing issues, or assertion failures
+4. **Root Cause Analysis**: Determine the underlying cause of the failure by examining:
+   - Element selectors that may have changed
+   - Timing and synchronization issues
+   - Data dependencies or test environment problems
+   - Application changes that broke test assumptions
+5. **Code Remediation**: Edit the test code to address identified issues, focusing on:
+   - Updating selectors to match current application state
+   - Fixing assertions and expected values
+   - Improving test reliability and maintainability
+   - For inherently dynamic data, utilize regular expressions to produce resilient locators
+6. **Verification**: Restart the test after each fix to validate the changes
+7. **Iteration**: Repeat the investigation and fixing process until the test passes cleanly
+
+Key principles:
+- Be systematic and thorough in your debugging approach
+- Document your findings and reasoning for each fix
+- Prefer robust, maintainable solutions over quick hacks
+- Use Playwright best practices for reliable test automation
+- If multiple errors exist, fix them one at a time and retest
+- Provide clear explanations of what was broken and how you fixed it
+- You will continue this process until the test runs successfully without any failures or errors.
+- If the error persists and you have high level of confidence that the test is correct, mark this test as test.fixme()
+  so that it is skipped during the execution. Add a comment before the failing step explaining what is happening instead
+  of the expected behavior.
+- Do not ask user questions, you are not interactive tool, do the most reasonable thing possible to pass the test.
+- Never wait for networkidle or use other discouraged or deprecated apis
@@ -0,0 +1,44 @@
+You are an expert web test planner with extensive experience in quality assurance, user experience testing, and test
+scenario design. Your expertise includes functional testing, edge case identification, and comprehensive test coverage
+planning.
+
+You will:
+
+1. **Navigate and Explore**
+   - Invoke the `planner_setup_page` tool once to set up page before using any other tools
+   - Explore the browser snapshot
+   - Do not take screenshots unless absolutely necessary
+   - Use `browser_*` tools to navigate and discover interface
+   - Thoroughly explore the interface, identifying all interactive elements, forms, navigation paths, and functionality
+
+2. **Analyze User Flows**
+   - Map out the primary user journeys and identify critical paths through the application
+   - Consider different user types and their typical behaviors
+
+3. **Design Comprehensive Scenarios**
+
+   Create detailed test scenarios that cover:
+   - Happy path scenarios (normal user behavior)
+   - Edge cases and boundary conditions
+   - Error handling and validation
+
+4. **Structure Test Plans**
+
+   Each scenario must include:
+   - Clear, descriptive title
+   - Detailed step-by-step instructions
+   - Expected outcomes where appropriate
+   - Assumptions about starting state (always assume blank/fresh state)
+   - Success criteria and failure conditions
+
+5. **Create Documentation**
+
+   Submit your test plan using `planner_save_plan` tool.
+
+**Quality Standards**:
+- Write steps that are specific enough for any tester to follow
+- Include negative testing scenarios
+- Ensure scenarios are independent and can be run in any order
+
+**Output Format**: Always save the complete test plan as a markdown file with clear headings, numbered steps, and
+professional formatting suitable for sharing with development and QA teams.
@@ -1,7 +1,10 @@
 {
 	"$schema": "https://biomejs.dev/schemas/2.4.12/schema.json",
 	"vcs": { "enabled": true, "clientKind": "git", "useIgnoreFile": true },
-	"files": { "ignoreUnknown": false, "includes": ["**", "!**/*.css"] },
+	"files": {
+		"ignoreUnknown": false,
+		"includes": ["**", "!**/*.css", "!**/design/**", "!**/.worktrees/**"]
+	},
 	"formatter": {
 		"enabled": true,
 		"indentStyle": "tab",
@@ -92,7 +95,14 @@
 				"useGetterReturn": "error"
 			}
 		},
-		"includes": ["**", "**/dist", "**/.eslintrc.cjs", "!**/*.css"]
+		"includes": [
+			"**",
+			"**/dist",
+			"**/.eslintrc.cjs",
+			"!**/*.css",
+			"!**/design/**",
+			"!**/.worktrees/**"
+		]
 	},
 	"javascript": { "formatter": { "quoteStyle": "double" } },
 	"overrides": [

@@ -0,0 +1,156 @@
+# OpenScreen Design System
+
+> Category: Video & Productivity Tools
+> Surface: Desktop web (Electron)
+> Source: tokens extracted from `openscreen-editor-2.html` (canonical)
+
+A high-fidelity, professional dark-and-light desktop application design system
+optimized for video recording, post-processing editing, and timeline
+manipulation. Mint is the single brand accent; red is reserved strictly for
+REC / cut / skip / trim / transcript-highlight states; amber covers warnings.
+
+---
+
+## Color Palette
+
+### Light theme (`:root`)
+
+| Role | Token | Hex | Notes |
+|---|---|---|---|
+| Canvas | `--bg` | `#fafbfc` | Off-white, never pure white; soft radial gradient |
+| Panel | `--surface` | `#ffffff` | Raised panels on canvas |
+| Card | `--surface-1` | `#f7f8fa` | Tier 1 raised |
+| Tier 2 | `--surface-2` | `#f3f5f8` | Raised on panel |
+| Hover | `--surface-3` | `#eef0f3` | Active/hover state |
+| Popover | `--surface-hi` | `#ffffff` | Highest elevation |
+| Border | `--border` | `#e7e9ee` | Soft hairline |
+| Border soft | `--border-soft` | `#f1f2f5` | Subtle dividers |
+| Border hi | `--border-hi` | `#d1d5db` | Emphasis lines |
+| Foreground | `--fg` | `#1f2937` | Slate, not pure black |
+| Foreground emphasis | `--fg-emphasis` | `#111827` | Headlines |
+| Muted | `--muted` | `#6b7280` | Body / labels |
+| Meta | `--meta` | `#9ca3af` | Timestamps, captions |
+| Brand (mint) | `--accent` | `#10b981` | Primary action, focus ring, toggle-on |
+| Brand glow | `--brand-glow` | `rgba(16,185,129,0.35)` | Focus / hover |
+| Danger | `--danger` | `#ef4444` | REC, skip, trim, transcript highlight |
+| Warning | `--warn` | `#f59e0b` | Soft amber |
+| Success | `--success` | `#10b981` | Alias of brand |
+
+### Dark theme (`:root[data-theme="dark"]`)
+
+| Role | Token | Hex | Notes |
+|---|---|---|---|
+| Canvas | `--bg` | `#0a0d12` | Near-black with faint blue cast |
+| Panel | `--surface` | `#14181f` | Tier 1 panel |
+| Card | `--surface-1` | `#14181f` | Same as panel base |
+| Tier 2 | `--surface-2` | `#1c2029` | Raised |
+| Hover | `--surface-3` | `#252a35` | Hover/active |
+| Popover | `--surface-hi` | `#2e3440` | Highest |
+| Border | `--border` | `#252a35` | Reads on canvas |
+| Foreground | `--fg` | `#e6e9ef` | Off-white, never pure `#ffffff` |
+| Muted | `--muted` | `#8b95a3` | Tuned for AA on dark |
+| Brand (mint) | `--accent` | `#10b981` | Same hue, brighter tone on `--brand-lo: #34d399` |
+| Danger | `--danger` | `#f87171` | Softer red for dark bg |
+
+### Traffic lights (macOS chrome)
+
+| Token | Hex |
+|---|---|
+| `--light-red` | `#ff5f57` |
+| `--light-yellow` | `#febc2e` |
+| `--light-green` | `#28c840` |
+
+---
+
+## Typography
+
+- **Display:** system-ui stack — `system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif`
+- **Body:** system-ui stack (same as display)
+- **Mono:** `ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace`
+
+### Type scale (desktop editor, base 13px)
+
+| Token | Size | Use |
+|---|---|---|
+| `--fs-app` | 13px | Base UI |
+| `--fs-app-sm` | 12px | Secondary |
+| `--fs-app-lg` | 14px | Primary UI |
+| `--fs-title` | 16px | Panel titles |
+| `--fs-section` | 11px | Section headers (uppercase, tracked) |
+| `--fs-display` | 24px | Hero numerals |
+
+Nothing below 11px.
+
+---
+
+## Layout
+
+- **Radius:** 8px standard; `--r-xs: 4px`, `--r-sm: 6px`, `--r-md: 8px`, `--r-lg: 12px`, `--r-pill: 9999px`
+- **Border weight:** 1px
+- **Spacing:** 4px baseline grid (`--sp-1` through `--sp-6`)
+- **Editor wireframe:**
+  - Titlebar: 34px
+  - Left utility rail: 48px
+  - Left panel: 320px
+  - Right properties: 320px
+  - Resize handle: 6px
+  - Bottom timeline/toolbar: 224px
+
+### Posture rules
+
+- **One accent, used at most twice per screen.** Default budget is eyebrow + primary CTA.
+- **Red is reserved** for REC, cut, skip, trim, and transcript highlight only. It is not a brand color.
+- **Mint is the single brand color** for active state, focus ring, toggle-on, and brand mark.
+- **Off-white canvas, tiered surfaces.** Never use pure `#000` or pure `#fff` for editorial chrome.
+- **Soft elevation, slate-based shadows.** Two `--elev-card` and `--elev-pop` are enough.
+- **System-ui type, mono numerics.** No web fonts loaded; ships the declared fallback stack.
+
+---
+
+## Motion
+
+- `--motion-fast: 120ms` — hover, focus ring
+- `--motion-base: 180ms` — state transitions
+- `--ease: cubic-bezier(0.2, 0, 0, 1)` — standard easing
+
+---
+
+## Voice & Tone
+
+- **Adjectives:** high-fidelity, professional, calm, restrained.
+- **Tone:** a confident dark-themed tool. Marketing prose is sparse; product UI carries the work.
+- **Messaging pillar:** video recording, post-processing editing, and timeline manipulation — same three jobs the editor does.
+
+### Vocabulary
+
+- **Use:** Record, Trim, Cut, Skip, Timeline, Clip, Track, Transcript.
+- **Avoid:** playful emoji feature labels (✨ 🚀 🎯), "AI-powered" in product chrome, generic SaaS copy ("supercharge your workflow").
+
+---
+
+## Imagery
+
+- **Style:** schematic, palette-derived. Scene illustration in preview is grayscale made from the same neutrals — not literal artwork.
+- **Treatment:** replace placeholder scenes with real project footage when shipping.
+- **Avoid:** stock photography, decorative illustration in tool chrome, hand-drawn mascots.
+
+---
+
+## Files in this directory
+
+| File | Role |
+|---|---|
+| `openscreen-editor-2.html` | Latest editor (light + dark themes in one file). Canonical source of tokens. |
+| `openscreen-editor.html` | First editor pass. Light-only. |
+| `editor.html` | Earlier experimental editor with red REC accent. |
+| `openscreen-landing.html` | Marketing landing page. |
+| `index.html` | Launcher / overview. |
+| `DESIGN.md` | This document. |
+
+---
+
+## Open questions / follow-ups
+
+- `editor.html` uses a different red-dominant accent and predates the mint brand color. Keep as historical reference; do not import its tokens into new work.
+- Landing page (`openscreen-landing.html`) is light-only; consider a dark variant once product photography is sourced.
+- No logo asset is committed yet. Brand mark should be a simple wordmark or geometric mark in mint on the dark canvas.