feat: dynamic editor tabs.

.github/instructions/pr-review.md

@@ -24,6 +24,7 @@ You are reviewing changes for @knighted/develop. Be concise, technical, and spec
 ## What to verify
 
 - No generated artifacts are edited (dist/, coverage/, test-results/).
+- Duplicated logic paths are avoided when a shared helper/module already exists; prefer reusing the established implementation.
 - CDN import/fallback behavior is not bypassed with ad hoc URLs in feature modules.
 - Sensitive values (PAT/token) are not logged or exposed in UI/status output.
 - New UI behavior is covered in Playwright where appropriate.

.github/workflows/ci.yml

@@ -7,6 +7,7 @@ on:
   pull_request:
     branches:
       - main
+      - next
 
 jobs:
   ci:

.github/workflows/playwright.yml

@@ -4,6 +4,7 @@ on:
   pull_request:
     branches:
       - main
+      - next
     types:
       - opened
       - synchronize
@@ -38,20 +39,25 @@ jobs:
             shardIndex: 1
             shardTotal: 1
           - browser: webkit
-            jobName: E2E (Playwright, webkit, shard 1/3)
+            jobName: E2E (Playwright, webkit, shard 1/4)
             workers: 1
             shardIndex: 1
-            shardTotal: 3
+            shardTotal: 4
           - browser: webkit
-            jobName: E2E (Playwright, webkit, shard 2/3)
+            jobName: E2E (Playwright, webkit, shard 2/4)
             workers: 1
             shardIndex: 2
-            shardTotal: 3
+            shardTotal: 4
           - browser: webkit
-            jobName: E2E (Playwright, webkit, shard 3/3)
+            jobName: E2E (Playwright, webkit, shard 3/4)
             workers: 1
             shardIndex: 3
-            shardTotal: 3
+            shardTotal: 4
+          - browser: webkit
+            jobName: E2E (Playwright, webkit, shard 4/4)
+            workers: 1
+            shardIndex: 4
+            shardTotal: 4
 
     steps:
       - name: Checkout

AGENTS.md

@@ -40,15 +40,18 @@ Repository structure:
 
 - Preserve current project formatting: single quotes, no semicolons, print width 90, arrowParens avoid.
 - Do not use index files or barrel-file architecture; prefer explicit file names and explicit import paths.
+- Prefer modular, colocated architecture; split focused features into nearby files and avoid monolithic modules.
 - Keep UI changes intentional and lightweight; avoid broad visual rewrites unless requested.
 - Keep runtime logic defensive for flaky/slow CDN conditions.
 - Preserve progressive loading behavior (lazy-load optional compilers/runtime pieces where possible).
 - Do not introduce bundler-only assumptions into src/ runtime code.
 - Prefer async/await over promise chains.
+- Prefer const-assigned function expressions over function declarations, unless hoisting is explicitly required.
 - Do not use IIFE, find another pattern instead.
 - In Playwright tests, prefer accessible selectors first: `getByRole`, `getByLabel`, `getByText`, and explicit accessible names.
 - Avoid `locator()` for interactive controls when a semantic selector is available.
 - Use `locator()` only as a fallback for cases without reliable semantics (for example: document root `html`, structural class assertions, or implementation-only hooks).
+- For known WebKit HTML `<dialog>` top-layer issues, prefer a stable dialog id locator and `evaluate`-based click for dialog confirmation controls.
 - When testability needs improvement, prefer adding accessibility semantics (`role`, `aria-label`, `aria-labelledby`) over introducing new id-only selectors.
 
 ## CDN and runtime expectations

README.md

@@ -9,28 +9,39 @@ CDN-first UI component workbench for rapid prototyping with [`@knighted/jsx`](ht
 
 ## What it is
 
-`@knighted/develop` is a browser-native UI component workbench that demonstrates
-modern component authoring without a local bundler-first inner loop.
+`@knighted/develop` is a browser-native component editor/workbench for fast
+UI iteration without a local bundler-first inner loop.
 
 The app is designed to showcase two libraries:
 
 - [`@knighted/jsx`](https://github.com/knightedcodemonkey/jsx) for DOM-first and React-mode JSX authoring
 - [`@knighted/css`](https://github.com/knightedcodemonkey/css) for in-browser CSS compilation workflows
 
 Dependencies are delivered over CDN ESM with on-demand loading by mode, so the
-browser acts as the runtime host for render, lint, and typecheck flows.
+browser acts as the runtime host for editing, render, lint, and typecheck flows.
 
 ## Core capabilities
 
 `@knighted/develop` lets you:
 
-- write component code in the browser
+- write component code in dynamic editor tabs in the browser
+- add, rename, and remove tabs with entry-role protection for required tabs
+- keep per-tab dirty/synced state while iterating across files
 - switch render mode between DOM and React
 - switch style mode between native CSS, CSS Modules, Less, and Sass
 - run in-browser lint and type diagnostics
 - open diagnostics in a shared drawer and jump to source locations
-- toggle ShadowRoot preview isolation while iterating
-- switch layout and theme while preserving fast feedback loops
+- use iframe-isolated preview style encapsulation while iterating
+- connect a GitHub repository and run Open PR / Push Commit workflows
+- use AI chat with tab-aware proposals and apply/undo controls
+- switch theme and collapse the preview panel while preserving fast feedback loops
+
+## Why this shape
+
+The app started as a focused compile-and-preview loop and has grown into a
+more complete browser-native editor surface. The goal is still fast
+experimentation, now with practical multi-file editing and repository workflows
+in the same UI.
 
 ## Try it
 

docs/ai-chat-context-and-payload-strategy.md

@@ -0,0 +1,184 @@
+# AI Chat Context and Payload Strategy
+
+This document describes the current AI chat request construction approach in @knighted/develop, including context shaping, tool usage, payload-size controls, and known improvement opportunities.
+
+## Current Approach
+
+### 1. System prompt and mode-aware policy
+
+Each request includes a system prompt with policy guidance, then augments that prompt with mode-aware constraints:
+
+- Render mode guidance (DOM vs React)
+- Style mode guidance (css, module, less, sass)
+- DOM-mode JSX guidance for @knighted/jsx runtime
+- Explicit React-avoidance in DOM mode unless migration is requested
+- Dialect preservation guidance (avoid cross-dialect rewrites unless requested)
+
+Primary implementation:
+
+- src/modules/github/chat/payload.js
+
+### 2. Repository context
+
+Each request includes repository targeting context as a dedicated system message:
+
+- Selected repository full name
+- Repository URL
+- Default branch
+- Policy to treat selected repository as default unless overridden
+
+Primary implementation:
+
+- src/modules/github/chat/drawer.js
+
+### 3. Editor context (Send tab content)
+
+When enabled, the drawer includes active tab context as a system message:
+
+- Render mode and style mode
+- Active tab label/path
+- Available tab targets list (id/path/name/language), currently capped to 20
+- Active tab source code block
+
+This context is designed to support dynamic proposal targeting by tab id/path and reduce ambiguity.
+
+Primary implementation:
+
+- src/modules/github/chat/active-tab-context.js
+- src/modules/github/chat/drawer.js
+
+### 4. Tooling model
+
+AI proposal actions currently use a function tool:
+
+- propose_editor_update
+
+Contract:
+
+- target: tab id or path
+- content: full replacement tab content
+- language: optional disambiguation hint
+- rationale: optional explanation
+
+Primary implementation:
+
+- src/modules/github/chat/proposals.js
+- src/modules/github/chat/tab-target-resolver.js
+- src/modules/github/chat/drawer.js
+
+### 5. Apply and undo behavior
+
+- Apply is proposal-driven and tab-target-aware (id/path resolution)
+- Undo is scoped per tab (latest snapshot per tab)
+- Undo UI is visible for active tab snapshot only
+
+Primary implementation:
+
+- src/modules/github/chat/drawer.js
+- src/modules/github/chat/tab-scoped-undo-state.js
+
+### 6. Payload size controls and summary strategy
+
+The payload builder includes bounded-conversation controls:
+
+- Hard byte budget: 120_000 bytes
+- Direct conversation retention cap: latest 14 chat messages
+- Summary cap: 3_600 characters
+- Older dropped conversation turns are compacted into a rolling system summary
+
+Primary implementation:
+
+- src/modules/github/chat/payload.js
+
+### 7. Fallback and transport behavior
+
+- Streaming request path is attempted first
+- Non-stream fallback is attempted on streaming failure
+- Model access errors are surfaced with tailored status text
+
+Primary implementation:
+
+- src/modules/github/chat/drawer.js
+- src/modules/github/api/chat.js
+
+## Why this approach
+
+- Keeps active-tab workflows lightweight and responsive
+- Supports explicit user review before applying generated edits
+- Preserves model guidance quality with mode/dialect policy constraints
+- Reduces request-size growth with bounded message history and rolling summaries
+
+## Possible Areas for Improvement
+
+### 1. Hard-fit protection when system context alone is large
+
+Current shrinking behavior primarily trims conversation turns. Add a final hard-fit step that can selectively trim editor context sections when total payload still exceeds budget.
+
+Potential ideas:
+
+- Trim available tab target list length adaptively
+- Clip active tab source with clear truncation markers
+- Retry once on 413 with reduced context envelope
+
+### 2. Create-tab capability
+
+Add a dedicated tool for creating workspace tabs so requests like "create a new styles tab" can be completed in one interaction.
+
+Potential tool:
+
+- create_workspace_tab(path, language, initialContent?, activate?)
+
+### 3. Cross-tab source access
+
+Support workflows where the user references a non-active tab.
+
+Potential options:
+
+- Add Send all tabs mode with explicit byte budgeting
+- Add read_workspace_tab tool for targeted lookup
+
+### 4. Better summary fidelity
+
+Current summary is compact and bounded, but can lose nuanced intent over long sessions.
+
+Potential ideas:
+
+- Structured summary sections (goals, constraints, pending asks)
+- Weighted retention for user constraints and accepted decisions
+
+### 5. Context observability in UI
+
+Provide optional diagnostics showing what context is being sent in the next request.
+
+Potential ideas:
+
+- "Preview outgoing context" drawer section
+- Approximate byte-count indicator before send
+
+### 6. Tool-call UX clarity
+
+Continue improving copy and actions so users understand what is proposed versus what is already applied.
+
+Potential ideas:
+
+- Show target tab path in each action
+- Add optional diff preview before apply
+
+### 7. Optional stricter policy profiles
+
+Allow policy strictness presets depending on user goals.
+
+Potential ideas:
+
+- Conservative mode: fewer tool proposals, stronger minimal-change bias
+- Refactor mode: broader architectural proposal tolerance
+
+## Validation status
+
+Current strategy has focused Playwright coverage for the chat drawer behavior and context policy assertions in:
+
+- playwright/github-byot-ai.spec.ts
+
+## Scope note
+
+This document is intentionally implementation-oriented. It describes current behavior and practical next improvements without locking future UX or API contracts.