From 17f85cae47d6ef6b81161ab7c37517545abd4d78 Mon Sep 17 00:00:00 2001
From: Sergii Demianchuk <sergeydemjanchyk@gmail.com>
Date: Sat, 10 Oct 2026 13:37:32 -0400
Subject: [PATCH 1/2] web: a chat-first look, light and dark themes, and a
 layout switch

The browser edition now opens on the chat the way a chat app does, and one click
gives the editor layout (Explorer, files, chat docked on the right):

- web/theme/levelcode-web-theme: "LevelCode Web Dark" / "LevelCode Web Light",
  following the system; initialColorTheme paints the same colours before the
  theme has loaded. levelcode-themes' pinned default is stripped from the staged
  copy (an extension's configurationDefaults outrank the embedder's).
- web/ai-extension/skin*: a centred greeting with starters, a pill composer in a
  768px reading column and the conversation list docked as a rail from 1000px,
  cut into the browser build's COPY of media/chat.html at build time and scoped
  under body.lc-web. The desktop page and its suites are untouched.
- web/chrome.css, config defaults: floating panels, activity bar as a row, no
  source control / run / extensions, no Outline / Timeline, no minimap; the
  workbench's own chat view is told it is disabled; no Welcome walkthrough.
- web/workspace: levelcode.web.layout (chatFirst | split), a status-bar switch,
  three commands, Cmd/Ctrl+Alt+L. A docked layout is docked again after a reload.

Tests: skin, theme, layout and copy unit suites (mutation-checked), main.js's
new helpers, and web/test/e2e-look.mjs (21 checks, headless Chrome).
---
 CLAUDE.md                                     |   8 +-
 docs/WEB.md                                   |  51 +-
 scripts/build-web.mjs                         |  21 +-
 web/ai-extension/build.mjs                    |   6 +-
 web/ai-extension/copy.js                      |   5 +
 web/ai-extension/skin.js                      |  49 ++
 web/ai-extension/skin/chat.css                | 117 ++++
 web/ai-extension/skin/chat.js                 |  89 +++
 web/chrome.css                                |  19 +
 web/lib/config.mjs                            |  26 +-
 web/lib/extensions.mjs                        |  16 +
 web/main.js                                   |  36 ++
 web/test/e2e-look.mjs                         | 183 ++++++
 web/test/e2e.mjs                              |   8 +-
 web/test/unit/copy.test.js                    |  14 +
 web/test/unit/main.test.js                    |  45 ++
 web/test/unit/skin.test.js                    | 103 +++
 web/test/unit/theme.test.js                   | 134 ++++
 web/test/unit/workspace.test.js               | 112 +++-
 web/theme/levelcode-web-theme/package.json    |  28 +
 .../levelcode-web-theme/themes/web-dark.json  | 596 ++++++++++++++++++
 .../levelcode-web-theme/themes/web-light.json | 566 +++++++++++++++++
 web/workspace/extension.js                    | 107 +++-
 web/workspace/package.json                    |  23 +-
 24 files changed, 2345 insertions(+), 17 deletions(-)
 create mode 100644 web/ai-extension/skin.js
 create mode 100644 web/ai-extension/skin/chat.css
 create mode 100644 web/ai-extension/skin/chat.js
 create mode 100644 web/chrome.css
 create mode 100644 web/test/e2e-look.mjs
 create mode 100644 web/test/unit/skin.test.js
 create mode 100644 web/test/unit/theme.test.js
 create mode 100644 web/theme/levelcode-web-theme/package.json
 create mode 100644 web/theme/levelcode-web-theme/themes/web-dark.json
 create mode 100644 web/theme/levelcode-web-theme/themes/web-light.json

diff --git a/CLAUDE.md b/CLAUDE.md
index 1bc3149..50090b4 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -42,7 +42,7 @@ extensions/levelcode-updater/    notify-only update checker (polls the update fe
 patches/levelcode-core.patch     our core source edits, applied on bootstrap
 scripts/                    bootstrap.sh, apply-branding.mjs, run-dev.sh, editor-identity.mjs, build-macos.sh, make-dmg.sh, make-icon.sh, build-web.mjs; atom (CLI launcher) + install-level.sh
 tools/                      dependency-free reference servers: sync-server (/v1 Settings-Sync), update-server (/api/update feed)
-web/                        LevelCode in a browser tab: page entry + callback, scratch-workspace extension, browser build of levelcode-ai, dev server, tests (docs/WEB.md)
+web/                        LevelCode in a browser tab: page entry + callback, scratch-workspace extension, layout, themes + chat skin, browser build of levelcode-ai, dev server, tests (docs/WEB.md)
 vscode/                     GITIGNORED upstream Code-OSS checkout (generated)
 ```
 
@@ -101,6 +101,12 @@ the desktop app exactly as it was:
 - `web/main.js` is a plain ES module with a **top-level `await`**: a `const` declared lower in the file is not
   initialised until that await finishes (this cleared a saved session once). Declare constants above the
   `try`, and use function declarations for helpers it calls.
+- **The look is web-only and lives in `web/`** (theme package, `chrome.css`, the chat skin, the layout commands;
+  `docs/WEB.md` "The look and the layout"). The chat skin is cut into the browser build's **copy** of
+  `media/chat.html` by `web/ai-extension/skin.js`; never edit the desktop file for it (its suites pin the page).
+  Every skin rule is under `body.lc-web`. An extension's `configurationDefaults` outrank the embedder's, so
+  `levelcode-themes`' pinned default theme is stripped from the staged copy (`withoutConfigurationDefaults`).
+  `node web/test/e2e-look.mjs --dist dist-web --stub-port <port>` is the check; look at its screenshots (`--shots`).
 - The session store (`createSecretStorage`) belongs to every tab: no cache, one-key read-modify-write under a
   Web Lock. The refresh token is rotated on use; do not reintroduce a start-up snapshot.
 - Build: `node scripts/build-web.mjs --account <origin>` → `dist-web/`; serve with `node web/serve.mjs --dist dist-web`.
diff --git a/docs/WEB.md b/docs/WEB.md
index f0e8efa..81cbcb1 100644
--- a/docs/WEB.md
+++ b/docs/WEB.md
@@ -10,6 +10,7 @@ run. For the product's own page and copy see the account site (`/web`, `/docs/br
 
 - [What it is, and what it is not](#what-it-is-and-what-it-is-not)
 - [How it fits together](#how-it-fits-together)
+- [The look and the layout](#the-look-and-the-layout)
 - [Signing in](#signing-in)
 - [Build and run](#build-and-run)
 - [Deploying](#deploying) — origins, headers, backend settings
@@ -64,6 +65,8 @@ the same lines so it never promises one (`host.caps`, see below).
 | `web/ai-extension/` | The browser build of `levelcode-ai`: `build.mjs` (esbuild, `platform: browser`), `shims/` (`fs`, `path`, `os`, `crypto`, `child_process`, `process`), `manifest.js` (the desktop manifest minus what a tab cannot do), `copy.js` (the few strings that are true on a Mac and false in a tab). |
 | `extensions/levelcode-ai/host.js` | The one place the desktop/browser difference lives in the extension (see below). |
 | `web/workspace/` | The `levelcode-web` extension: the **scratch workspace** (`levelcode-scratch:` file system in IndexedDB, with file and text search), and the commands to open a local folder or the scratch. |
+| `web/theme/levelcode-web-theme/`, `web/chrome.css` | The two colour themes (dark and light) and the stylesheet that tidies the workbench's chrome. See [the look](#the-look-and-the-layout). |
+| `web/ai-extension/skin.js`, `skin/chat.css`, `skin/chat.js` | The chat's browser skin, cut into the browser build's copy of `media/chat.html` at build time. |
 | `web/serve.mjs` | Dev / end-to-end server. Serves a build (`--dist`) with its own `_headers`, or the pieces (`--static`, `--extensions`). |
 | `web/test/` | Unit tests (`unit/`) and the end-to-end checks (`e2e*.mjs`) with a hand-written CDP driver and a stand-in backend. |
 
@@ -88,6 +91,45 @@ The two rules that keep the desktop app exactly as it was:
 - **Nothing outside `host.js` asks "am I in a browser?".** A call site asks for a capability
   (`host.caps.shell`) or calls a function that already knows.
 
+## The look and the layout
+
+The first thing a visitor sees is the chat, not an IDE: a centred greeting with four starters and one rounded
+composer, with the list of conversations docked on its left when there is room, and the Explorer and the files one
+click away in the status bar. It is made **without forking the workbench** — every piece is a setting, a built-in
+extension, a stylesheet or a build-time edit of the browser build's own copy of a file.
+
+| Piece | Where | What it does, and what it depends on |
+| --- | --- | --- |
+| Colour themes | `web/theme/levelcode-web-theme/` (staged as a built-in extension by `build-web.mjs`) | "LevelCode Web Dark" / "LevelCode Web Light": neutral chrome with the editor one step lighter, hairline borders, one violet accent. They carry the `agentsPanel.*` keys the floating cards use. Follows the system (`window.autoDetectColorScheme` + the two preferred-theme settings). |
+| First paint | `initialColorTheme` in `web/lib/config.mjs`, picked by `pickInitialTheme` in `web/main.js` | The colours painted for the half second before the theme extension has loaded, so a dark visitor does not see a light flash. |
+| Default theme | `withoutConfigurationDefaults` in `web/lib/extensions.mjs` | An extension's `configurationDefaults` **outrank** the embedder's. `levelcode-themes` pins its own default theme, so the staged copy of it has that key removed (its two themes stay selectable). The desktop source is untouched. |
+| Panels, activity bar | `workbench.experimental.modernUI`, `workbench.activityBar.location: top`, `workbench.layoutControl.type: toggles` | Code-OSS's own switches. `modernUI` is **experimental**: if a bump renames or drops it the editor is still fine, only plainer (`e2e-look.mjs` still passes its theme and layout checks; its screenshots are the thing to look at). |
+| Chrome | `web/chrome.css`, linked by `main.js` **after** the workbench's stylesheet | Hides source control, run and extensions (this edition has none of them), the Outline and Timeline headers and the keyboard-layout status item. The selectors are workbench class names: when a bump stops matching them `e2e-look.mjs` fails on "not offered" rather than the icons quietly coming back. |
+| The workbench's own chat | `hideBuiltInChat` in `main.js` | Code-OSS's Copilot chat view appears in the secondary side bar on the web even with `chat.disableAIFeatures`; it is told it is disabled through an internal context key. Look for a "Chat" tab on the right on a bump. |
+| Welcome page | `web/ai-extension/copy.js` | The desktop opens its walkthrough once, in front of everything. In a tab the chat is the first thing there is; the walkthrough stays in the Command Palette. |
+| The chat page | `web/ai-extension/skin.js` + `skin/chat.css` + `skin/chat.js` | Three exact insertions into the **embedded copy** of `media/chat.html`: a style block, `class="lc-web"` on `<body>`, a nonce'd script. Every rule is under `body.lc-web`; the script sends only messages the page already sends. The build **fails** if chat.html stops having the places the skin is cut into. The desktop's `chat.html` is never edited for this (the desktop suites pin it). |
+
+**Layouts.** `levelcode.web.layout` is `chatFirst` (the chat alone, side bars closed, conversations on its
+left — the way a chat app is used) or `split` (Explorer, files on the left, the chat docked on the right — the
+way an editor is used). The status bar item at the left, **LevelCode: Layout: Switch** and `Cmd/Ctrl+Alt+L`
+change the setting; one listener applies it, so Settings does the same. The first start is `chatFirst`. The
+chat panel is not restored by a reload, so a `split` layout is applied again at start. Only existing workbench
+commands are used, so what the visitor then arranges by hand is an ordinary layout.
+
+**Widths.** The chat page decides by **its own width**, not the window's: from 1000 px it docks the
+conversation list as a 264 px rail; below 760 px it compacts; in between the list is the dialog it is on the
+desktop. In `split` the chat is a narrower column, so it will usually be in the dialog form. The *workbench* is
+not responsive: below about 760 px the Explorer, tabs and status bar are the desktop's, and a phone is not a
+supported size for this edition yet.
+
+Constraints worth knowing before changing it:
+
+- The chat webview's CSP has no `font-src`: the skin uses the system font stack only.
+- A group that is emptied by moving the chat out of it is closed, so `split` opens a file in the first group
+  **before** it moves the chat (`applyLayout`, pinned by `workspace.test.js`).
+- The rail asks the page for its conversations with `listSessions`; it must never call `openSessions()`,
+  which seeds the list with sample conversations when nothing has arrived yet.
+
 ## Signing in
 
 The extension's existing PKCE flow, with the browser's pieces in place of the OS's:
@@ -257,8 +299,9 @@ secret store then falls back to memory for the session.
 
 | Check | Command | What it proves |
 | --- | --- | --- |
-| Unit gate | `./scripts/test-extensions.sh` | Includes `web/test/unit/*.test.js`: the shims against Node, `host.js` on both sides, `main.js`'s functions (address check, delivery, the shared secret store, `?signin=1`), the manifest, the copy rewrites. Runs in CI on every PR (`test.yml`). Also run on Linux / Node 18 in a container with the network refused. |
+| Unit gate | `./scripts/test-extensions.sh` | Includes `web/test/unit/*.test.js`: the shims against Node, `host.js` on both sides, `main.js`'s functions (address check, delivery, the shared secret store, `?signin=1`), the manifest, the copy rewrites, the chat skin (what it inserts and that every rule is scoped), the themes (required colours, contrast of the text pairs, the page's defaults naming themes that exist) and the layout commands. Runs in CI on every PR (`test.yml`). Also run on Linux / Node 18 in a container with the network refused. |
 | End to end | `node web/test/e2e.mjs --dist dist-web --stub-port <port the build used>` | Real headless Chrome: boot from static files, the extension activates in the worker, sign in through the real callback page, agent tool calls (write / list / search / read / edit) against the scratch workspace, Quick Open, Keep and Undo, a reload that keeps the session and files. |
+| The look | `node web/test/e2e-look.mjs --dist dist-web --stub-port <port>` | The skinned chat (greeting, starters, composer in the reading column, the rail at 1440 px and the dialog at 900 px), light and dark following the system with this build's own colours (also in the chat's webview), no Welcome page, no second chat, source control / run / extensions not offered, the layout switch both ways, and the docked layout docked again after a reload. Release builds only. |
 | Same-tab sign-in | `node web/test/e2e-signin-tab.mjs --dist dist-web --stub-port <port>` | No second window; verifier survives the reload; no repeat; no sign-in for a signed-in editor; a second tab uses the same session; a stranded result is delivered, an old one dropped. |
 | Bring your own key | `node web/test/e2e-byok.mjs --static … --extensions …` | The request goes from the tab to the provider with the user's key and nothing of LevelCode's. |
 
@@ -315,6 +358,12 @@ the other repository's internals and is not part of this repo's checks.
 Say these out loud rather than discover them in production:
 
 - **A real browser other than headless Chrome.** Safari and Firefox are untested; so are phones.
+- **The look in Safari, Firefox and on a phone.** `e2e-look.mjs` and the screenshots are headless Chrome at 1440,
+  1100, 900 and 420 px wide. The chat page is responsive down to 420 px; the workbench around it is not (see
+  [widths](#the-look-and-the-layout)). No screen-reader pass was done on the skin; the rail is a labelled
+  landmark at wide widths and the dialog it already was below them.
+- **`workbench.experimental.modernUI` across a Code-OSS bump.** It is the workbench's own experimental flag; the
+  pinned checkout was the only one run.
 - **The operating system's folder picker itself.** It needs a person. Everything after it — the command, the
   workbench's `file` provider on a real `FileSystemDirectoryHandle`, the agent's list, read and write — is run
   (`web/test/e2e.mjs` section 5), with the origin-private file system standing in for the picker. Permission
diff --git a/scripts/build-web.mjs b/scripts/build-web.mjs
index 84d2b38..baffad3 100644
--- a/scripts/build-web.mjs
+++ b/scripts/build-web.mjs
@@ -22,7 +22,7 @@ import path from 'node:path';
 import { createHash } from 'node:crypto';
 import { fileURLToPath } from 'node:url';
 import { webConfig, renderIndex } from '../web/lib/config.mjs';
-import { stageDeclarativeExtensions, copyExtension } from '../web/lib/extensions.mjs';
+import { stageDeclarativeExtensions, copyExtension, withoutConfigurationDefaults } from '../web/lib/extensions.mjs';
 import { policy, toHeadersFile, toNginx } from '../web/lib/headers.mjs';
 import { hashTree } from '../web/lib/fingerprint.mjs';
 
@@ -68,13 +68,14 @@ for (const must of ['out/vs/workbench/workbench.web.main.internal.js', 'out/vs/w
 /* ----- 2. identity of this build ---------------------------------------------------------------- */
 const fingerprint = createHash('sha256');
 fingerprint.update(fs.readFileSync(path.join(staticDir, 'out/vs/workbench/workbench.web.main.internal.js')));
-for (const f of ['main.js', 'boot.css', 'index.html']) { fingerprint.update(fs.readFileSync(path.join(WEB, f))); }
+for (const f of ['main.js', 'boot.css', 'chrome.css', 'index.html']) { fingerprint.update(fs.readFileSync(path.join(WEB, f))); }
 // Everything that goes into /_/<id>/ and is not the web client itself: the extension (its sources, media and skills),
 // its browser build, the scratch workspace, and the page's own configuration code.
 const aiDir = path.join(REPO, 'extensions', 'levelcode-ai');
 hashTree(fingerprint, aiDir, { skip: ['test', 'node_modules', 'scripts', '.DS_Store'] });
 hashTree(fingerprint, path.join(WEB, 'ai-extension'), { skip: ['assets.generated.js', 'node_modules', '.DS_Store'] });
 hashTree(fingerprint, path.join(WEB, 'workspace'), { skip: ['node_modules', '.DS_Store'] });
+hashTree(fingerprint, path.join(WEB, 'theme'), { skip: ['.DS_Store'] });
 hashTree(fingerprint, path.join(WEB, 'lib'), { skip: ['.DS_Store'] });
 const id = String(args.id || fingerprint.digest('hex').slice(0, 12));
 let gitHead = 'unknown';
@@ -110,12 +111,19 @@ if (!declarative.includes('levelcode-themes')) {
 	const themes = path.join(REPO, 'extensions', 'levelcode-themes');
 	if (fs.existsSync(themes)) { copyExtension(themes, path.join(extOut, 'levelcode-themes')); declarative.push('levelcode-themes'); }
 }
-const extensions = ['levelcode-ai', 'levelcode-web', ...declarative.sort()];
-log(`${extensions.length} extensions: levelcode-ai, levelcode-web and ${declarative.length} declarative (${declarative.slice(0, 6).join(', ')}, ...)`);
+// The browser edition's own colour themes. The desktop's default theme is pinned by levelcode-themes' manifest
+// (an extension's defaults outrank the page's), so that one is dropped here; its themes stay selectable.
+const themeOut = path.join(extOut, 'levelcode-web-theme');
+copyExtension(path.join(WEB, 'theme', 'levelcode-web-theme'), themeOut);
+fs.writeFileSync(path.join(themeOut, 'package.nls.json'), '{}\n');
+const desktopThemes = path.join(extOut, 'levelcode-themes', 'package.json');
+if (fs.existsSync(desktopThemes)) { withoutConfigurationDefaults(desktopThemes); }
+const extensions = ['levelcode-ai', 'levelcode-web', 'levelcode-web-theme', ...declarative.sort()];
+log(`${extensions.length} extensions: levelcode-ai, levelcode-web, levelcode-web-theme and ${declarative.length} declarative (${declarative.slice(0, 6).join(', ')}, ...)`);
 
 log('writing the page');
 // main.js and boot.css are addressed by the build id like everything else; the page names them.
-for (const f of ['main.js', 'boot.css']) { fs.copyFileSync(path.join(WEB, f), path.join(root, f)); }
+for (const f of ['main.js', 'boot.css', 'chrome.css']) { fs.copyFileSync(path.join(WEB, f), path.join(root, f)); }
 
 const productConfiguration = {
 	// No gallery: nothing is installed from the Internet into the page's own origin.
@@ -166,7 +174,8 @@ if (!m) { die('index.html has no configuration'); }
 JSON.parse(m[1]);
 if (/\{\{[A-Z]+\}\}/.test(html)) { die('index.html still has an unfilled placeholder'); }
 for (const must of [`${prefix}/main.js`, `${prefix}/boot.css`, `${prefix}/static/out/nls.messages.js`, `${prefix}/extensions/levelcode-ai/extension.web.js`,
-	`${prefix}/extensions/levelcode-ai/package.json`, `${prefix}/extensions/levelcode-web/extension.js`]) {
+	`${prefix}/extensions/levelcode-ai/package.json`, `${prefix}/extensions/levelcode-web/extension.js`,
+	`${prefix}/chrome.css`, `${prefix}/extensions/levelcode-web-theme/package.json`]) {
 	if (!fs.existsSync(path.join(outDir, must))) { die('missing ' + must); }
 }
 log(`done: ${outDir}  ${mb(sizeOf(outDir))}  (client ${mb(sizeOf(path.join(root, 'static')))}, extensions ${mb(sizeOf(extOut))})`);
diff --git a/web/ai-extension/build.mjs b/web/ai-extension/build.mjs
index 94c4156..43de92b 100644
--- a/web/ai-extension/build.mjs
+++ b/web/ai-extension/build.mjs
@@ -37,6 +37,7 @@ const nodePaths = [path.join(vscodeDir, 'node_modules'), path.join(vscodeDir, 'b
 if (!nodePaths.some((p) => fs.existsSync(path.join(p, 'buffer')))) { console.error('the "buffer" package is missing from ' + vscodeDir + '/node_modules'); process.exit(2); }
 
 const { applyCopy } = createRequire(import.meta.url)('./copy.js');
+const { skinChat } = createRequire(import.meta.url)('./skin.js');
 
 const outDir = path.join(outRoot, 'levelcode-ai');
 fs.rmSync(outDir, { recursive: true, force: true });
@@ -52,7 +53,10 @@ function collect(rel, filter) {
 			if (e.isDirectory()) { walk(r); continue; }
 			if (filter && !filter(r)) { continue; }
 			const buf = fs.readFileSync(path.join(SRC, r));
-			out[r] = TEXT.has(path.extname(r)) ? applyCopy(r, buf.toString('utf8')) : { base64: buf.toString('base64') };
+			let text = TEXT.has(path.extname(r)) ? applyCopy(r, buf.toString('utf8')) : null;
+			// The browser's look for the chat goes into this embedded copy and nowhere else (skin.js).
+			if (text !== null && r === 'media/chat.html') { text = skinChat(text); }
+			out[r] = text !== null ? text : { base64: buf.toString('base64') };
 		}
 	};
 	if (fs.existsSync(path.join(SRC, rel))) { walk(rel); }
diff --git a/web/ai-extension/copy.js b/web/ai-extension/copy.js
index 4d733e6..86b53f9 100644
--- a/web/ai-extension/copy.js
+++ b/web/ai-extension/copy.js
@@ -19,6 +19,11 @@ const REPLACEMENTS = [
 	['extension.js',
 		"\tdbg('account.signin', { provider: provider || 'browser', create: !!create });\n\tawait vscode.env.openExternal(vscode.Uri.parse(url));",
 		"\tdbg('account.signin', { provider: provider || 'browser', create: !!create });\n\tawait host.openAuth(vscode.Uri.parse(url));"],
+	// The desktop opens its Welcome walkthrough once, in front of everything. In a tab the first thing a visitor
+	// should see is the chat; the walkthrough stays in the Command Palette (Help: Welcome).
+	['extension.js',
+		"\tif (!context.globalState.get('levelcode.ai.didShowWelcome')) {",
+		"\tif (false) {   // browser edition: the chat is the first thing a visitor sees (web/ai-extension/copy.js)"],
 	['media/chat.html',
 		'Bring your own API key, stored in your OS keychain.',
 		'Bring your own API key, stored encrypted in this browser.'],
diff --git a/web/ai-extension/skin.js b/web/ai-extension/skin.js
new file mode 100644
index 0000000..c32e53f
--- /dev/null
+++ b/web/ai-extension/skin.js
@@ -0,0 +1,49 @@
+// The browser's look for the chat — applied to the copy of media/chat.html that goes into the browser bundle, and
+// to nothing else. The desktop app packages extensions/* alone, so nothing under web/ can reach it, and chat.html
+// itself stays exactly as the desktop's suites pin it (a third <script>, a hover rule or a changed measure in the
+// shared file fails them).
+//
+// Three insertions, each at an exact, unique place; the build fails when one is missing, the way copy.js does,
+// so a change to chat.html says so here instead of quietly shipping the unskinned page:
+//   the skin's stylesheet   after chat.html's own <style>
+//   `lc-web` on <body>      the scope every rule of the skin is under
+//   the skin's script       after chat.html's own <script>, same nonce (the host replaces __NONCE__ everywhere)
+//
+// Plain CommonJS; web/test/unit/skin.test.js pins it against the real chat.html.
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+
+const STYLE_END = '</style>\n</head>';
+const BODY_OPEN = '</head>\n<body>\n';
+const SCRIPT_END = '</script>\n</body>';
+
+const read = (name) => fs.readFileSync(path.join(__dirname, 'skin', name), 'utf8');
+
+/**
+ * @param {string} html the desktop chat.html (after copy.js has rewritten its desktop-only words)
+ * @returns {string} the same page with the browser skin
+ * @throws if the page is not the shape this expects, or a skin file could end its own block early
+ */
+function skinChat(html) {
+	const css = read('chat.css');
+	const js = read('chat.js');
+	for (const [name, text] of [['chat.css', css], ['chat.js', js]]) {
+		if (/<\/(?:script|style)/i.test(text) || text.includes('<!--')) {
+			throw new Error(`browser skin: ${name} contains markup that would end its own block early`);
+		}
+	}
+	for (const anchor of [STYLE_END, BODY_OPEN, SCRIPT_END]) {
+		const n = html.split(anchor).length - 1;
+		if (n !== 1) {
+			throw new Error(`browser skin: expected exactly one ${JSON.stringify(anchor)} in media/chat.html, found ${n}; update web/ai-extension/skin.js`);
+		}
+	}
+	return html
+		.replace(STYLE_END, () => `</style>\n<style id="lcw-skin">\n${css}</style>\n</head>`)
+		.replace(BODY_OPEN, () => '</head>\n<body class="lc-web">\n')
+		.replace(SCRIPT_END, () => `</script>\n<script nonce="__NONCE__">\n${js}</script>\n</body>`);
+}
+
+module.exports = { skinChat, ANCHORS: { STYLE_END, BODY_OPEN, SCRIPT_END } };
diff --git a/web/ai-extension/skin/chat.css b/web/ai-extension/skin/chat.css
new file mode 100644
index 0000000..a8bd261
--- /dev/null
+++ b/web/ai-extension/skin/chat.css
@@ -0,0 +1,117 @@
+/* LevelCode in your browser — the chat's own look. Browser build only: web/ai-extension/skin.js puts this after
+   chat.html's stylesheet in the copy that ships in the browser bundle. The desktop app never sees it.
+
+   One idea: the conversation is the page. A centred reading column, answers printed straight on the ground, one
+   soft bubble for what you said, and a single strong shape — the rounded composer. Everything is derived from the
+   workbench's own colours (--vscode-*), so it follows whichever theme is active, light or dark.
+
+   Layout is chosen by WIDTH ALONE, as chat.html's own rules already are (the webview is as wide as its editor
+   group): wide = chat-first with the conversation list docked on the left; narrow = the compact column that sits
+   beside an editor. */
+body.lc-web {
+	--lcw-font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
+	--lcw-line: color-mix(in srgb, var(--vscode-foreground) 12%, transparent);
+	--lcw-line-strong: color-mix(in srgb, var(--vscode-foreground) 22%, transparent);
+	--lcw-soft: color-mix(in srgb, var(--vscode-foreground) 5%, transparent);
+	--lcw-soft-2: color-mix(in srgb, var(--vscode-foreground) 9%, transparent);
+	--lcw-dim: color-mix(in srgb, var(--vscode-foreground) 62%, transparent);
+	--lcw-rail: 264px;
+	--prose-max: 768px;
+	--prose-size: 15.5px;
+	--prose-leading: 1.7;
+	--shell-x: 20px;
+	font-family: var(--lcw-font);
+}
+body.lc-web ::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
+
+/* ---- the empty chat: a hero and the composer in the middle of the page --------------------------- */
+body.lc-web:has(#empty) { justify-content: center; }
+body.lc-web:has(#empty) #log { flex: 0 0 auto; overflow: visible; padding-bottom: 0; }
+body.lc-web #empty { opacity: 1; padding: 0 0 22px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
+body.lc-web #empty .lc-ascii-wrap, body.lc-web #empty .lc-ascii-sub { display: none; }
+body.lc-web .lcw-mark { width: 40px; height: 40px; color: var(--accent); margin-bottom: 6px; }
+body.lc-web .lcw-hero { margin: 0; font-size: 26px; line-height: 1.25; font-weight: 600; letter-spacing: -.012em; text-align: center; color: var(--vscode-foreground); text-wrap: balance; }
+body.lc-web .lcw-sub { margin: 0; font-size: 14px; line-height: 1.5; color: var(--lcw-dim); text-align: center; max-width: 46ch; text-wrap: balance; }
+body.lc-web #empty .starters { margin-top: 14px; gap: 8px; max-width: 640px; }
+body.lc-web #empty .starter {
+	border-radius: 999px; padding: 7px 14px; font-size: 13px; line-height: 1.3; background: transparent;
+	border: 1px solid var(--lcw-line); color: var(--vscode-foreground); opacity: .88; transition: background .12s, border-color .12s, opacity .12s;
+}
+body.lc-web #empty .starter:hover { background: var(--lcw-soft); border-color: var(--lcw-line-strong); opacity: 1; }
+
+/* ---- the composer: the one strong shape ---------------------------------------------------------- */
+body.lc-web #composer {
+	border-radius: 24px; padding: 12px 14px 10px; background: var(--vscode-input-background, var(--field-bg));
+	border: 1px solid var(--lcw-line-strong);
+	box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 10px 32px rgba(0, 0, 0, .14);
+	transition: border-color .15s, box-shadow .15s;
+}
+body.lc-web #composer:focus-within, body.lc-web #composer.focused {
+	border-color: color-mix(in srgb, var(--accent) 70%, var(--lcw-line-strong));
+	box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 10px 32px rgba(0, 0, 0, .18), 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
+}
+body.lc-web textarea#input { font-size: 15px; line-height: 1.5; min-height: 46px; background: transparent; border: 0; }
+body.lc-web #toolbar .tbtn { border-radius: 999px; }
+body.lc-web #toolbar .pill { border-radius: 999px; background: transparent; border-color: transparent; padding: 3px 10px; color: var(--lcw-dim); }
+body.lc-web #toolbar .pill:hover { background: var(--lcw-soft-2); color: var(--vscode-foreground); }
+body.lc-web #toolbar .pill.agent { color: var(--vscode-foreground); background: var(--lcw-soft); }
+body.lc-web #send, body.lc-web #send.stop {
+	width: 34px; height: 34px; border-radius: 50%; padding: 0; display: inline-flex; align-items: center; justify-content: center;
+	background: var(--vscode-foreground); color: var(--vscode-editor-background); border: 0; font-size: 16px;
+}
+body.lc-web #send:disabled { opacity: .35; }
+
+/* ---- the footer row: quiet, and the brand mark is not repeated ----------------------------------- */
+body.lc-web #status #lcLogo { display: none; }
+body.lc-web #status { opacity: .78; }
+
+/* ---- the conversation --------------------------------------------------------------------------- */
+body.lc-web .msg.user .body {
+	border: 0; border-radius: 20px; padding: 10px 16px; background: var(--lcw-soft-2); max-width: 82%; width: fit-content;
+}
+body.lc-web .msgcopy { opacity: .7; border-color: transparent; }
+body.lc-web pre, body.lc-web .codeblock { border-radius: 12px; }
+body.lc-web #reviewBar, body.lc-web #planBar { border-radius: 14px; }
+
+/* ---- narrow: the compact column that sits beside an editor --------------------------------------- */
+@media (max-width: 759px) {
+	body.lc-web { --prose-size: 14.5px; --shell-x: 12px; }
+	body.lc-web #composer { border-radius: 20px; padding: 10px 12px 8px; }
+	body.lc-web .lcw-hero { font-size: 20px; }
+	body.lc-web .lcw-mark { width: 30px; height: 30px; }
+	body.lc-web .lcw-sub { display: none; }
+}
+
+/* ---- wide: chat-first, the conversation list docked on the left ---------------------------------- */
+@media (min-width: 1000px) {
+	body.lc-web { padding-left: var(--lcw-rail); }
+	body.lc-web #sessOverlay {
+		display: flex !important; position: fixed; inset: 0 auto 0 0; width: var(--lcw-rail); padding: 0;
+		background: transparent; z-index: 30; align-items: stretch; justify-content: stretch;
+	}
+	body.lc-web #sessOverlay .sesspanel {
+		max-width: none; max-height: none; width: 100%; height: 100%; border-radius: 0; border-width: 0 1px 0 0; box-shadow: none;
+		background: color-mix(in srgb, var(--vscode-foreground) 3%, var(--vscode-editor-background));
+		display: flex; flex-direction: column;
+	}
+	body.lc-web #sessOverlay .ovclose { display: none; }
+	body.lc-web #sessOverlay .sessbar { padding: 14px 14px 8px; display: flex; align-items: center; gap: 8px; }
+	body.lc-web #sessOverlay .sesstitle { flex: 1; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--lcw-dim); }
+	body.lc-web #sessOverlay .sesslist { padding: 4px 8px 12px; flex: 1; overflow-y: auto; }
+	body.lc-web .lcw-new {
+		display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; cursor: pointer;
+		padding: 5px 11px; border-radius: 999px; color: var(--vscode-foreground); background: transparent; border: 1px solid var(--lcw-line-strong);
+	}
+	body.lc-web .lcw-new:hover { background: var(--lcw-soft-2); }
+	body.lc-web #sessOverlay .sesscard { border-radius: 10px; }
+	/* A narrow card has room for its title and one line, not for six buttons as well: they appear on hover or
+	   focus and take the place of the second line. */
+	body.lc-web #sessOverlay .sesscard .sessacts { display: none; }
+	body.lc-web #sessOverlay .sesscard:hover .sessacts, body.lc-web #sessOverlay .sesscard:focus-within .sessacts { display: flex; margin-left: 0; }
+	body.lc-web #sessOverlay .sesscard:hover .sesssub, body.lc-web #sessOverlay .sesscard:focus-within .sesssub { display: none; }
+}
+@media (max-width: 999px) { body.lc-web .lcw-new { display: none; } }
+
+@media (prefers-reduced-motion: reduce) {
+	body.lc-web #composer, body.lc-web #empty .starter { transition: none; }
+}
diff --git a/web/ai-extension/skin/chat.js b/web/ai-extension/skin/chat.js
new file mode 100644
index 0000000..d4957db
--- /dev/null
+++ b/web/ai-extension/skin/chat.js
@@ -0,0 +1,89 @@
+/* LevelCode in your browser — the chat skin's script. Runs after chat.html's own script, in the same page, and
+   uses only what that page already has: its DOM, its top-level `vscode` handle and the messages it already sends.
+   Nothing here talks to the host in a way the page does not already. */
+(function () {
+	'use strict';
+	if (!document.body || !document.body.classList.contains('lc-web')) { return; }
+
+	var STARTERS = [
+		['Build a small web page', 'Create an index.html with a simple, good-looking landing page.'],
+		['Explain this project', 'Look through the files here and explain what this project does.'],
+		['Fix a bug', 'Find and fix the bug in my selection.'],
+		['Write tests', 'Write tests for the current file.'],
+	];
+	var post = function (m) { try { vscode.postMessage(m); } catch (e) { /* the page is going away */ } };
+
+	/* ----- the empty chat ------------------------------------------------------------------------ */
+	function fill(q) {
+		var i = document.getElementById('input');
+		if (!i) { return; }
+		i.value = q;
+		i.dispatchEvent(new Event('input', { bubbles: true }));
+		i.focus();
+	}
+	function el(tag, cls, text) {
+		var n = document.createElement(tag);
+		if (cls) { n.className = cls; }
+		if (text) { n.textContent = text; }
+		return n;
+	}
+	function hero() {
+		var e = document.getElementById('empty');
+		if (!e || e.getAttribute('data-lcw')) { return; }
+		e.setAttribute('data-lcw', '1');
+		e.textContent = '';
+		var logo = document.getElementById('lcLogo');
+		if (logo) {
+			var m = logo.cloneNode(true);
+			m.removeAttribute('id');
+			m.setAttribute('class', 'lcw-mark');
+			m.setAttribute('aria-hidden', 'true');
+			e.appendChild(m);
+		}
+		e.appendChild(el('h1', 'lcw-hero', 'What do you want to build?'));
+		e.appendChild(el('p', 'lcw-sub', 'Describe a goal. LevelCode reads your files, makes a plan and edits them, and you keep or undo each change.'));
+		var row = el('div', 'starters');
+		STARTERS.forEach(function (s) {
+			var b = el('button', 'starter', s[0]);
+			b.type = 'button';
+			b.addEventListener('click', function () { fill(s[1]); });
+			row.appendChild(b);
+		});
+		e.appendChild(row);
+	}
+	var log = document.getElementById('log');
+	if (log && typeof MutationObserver === 'function') { new MutationObserver(hero).observe(log, { childList: true }); }
+	hero();
+
+	/* ----- the conversation list, docked on the left when there is room -------------------------- */
+	var rail = window.matchMedia('(min-width: 1000px)');
+	var timer = 0;
+	function ask() {
+		clearTimeout(timer);
+		// The list is the page's own (sessions / sessionAction); asking is all it takes. Never openSessions():
+		// it seeds the list with sample cards when nothing has arrived yet.
+		timer = setTimeout(function () { post({ type: 'listSessions' }); }, 150);
+	}
+	window.addEventListener('message', function (e) {
+		var t = e && e.data && e.data.type;
+		if (t === 'agentDone' || t === 'assistantDone' || t === 'reset' || t === 'sessionResumed' || t === 'sessionUndo') { ask(); }
+	});
+	var panel = document.querySelector('#sessOverlay .sesspanel');
+	var bar = document.querySelector('#sessOverlay .sessbar');
+	if (bar && !bar.querySelector('.lcw-new')) {
+		var nb = el('button', 'lcw-new', '+ New chat');
+		nb.type = 'button';
+		nb.title = 'Start a new chat';
+		nb.addEventListener('click', function () { post({ type: 'newChat' }); });
+		bar.appendChild(nb);
+	}
+	function sync() {
+		if (panel) {
+			panel.setAttribute('role', rail.matches ? 'complementary' : 'dialog');
+			panel.setAttribute('aria-modal', rail.matches ? 'false' : 'true');
+		}
+		if (rail.matches) { ask(); }
+	}
+	if (rail.addEventListener) { rail.addEventListener('change', sync); }
+	sync();
+})();
diff --git a/web/chrome.css b/web/chrome.css
new file mode 100644
index 0000000..35297c0
--- /dev/null
+++ b/web/chrome.css
@@ -0,0 +1,19 @@
+/* LevelCode in your browser: what configuration and the colour theme cannot do. Linked by web/main.js after the
+   workbench's own stylesheet. Every rule says why it exists; the selectors are the stable ones (action-item,
+   codicon names, aria labels), not the generated class names.
+
+   Keep this file short. Each line is a thing a Code-OSS bump can move. */
+
+/* There is no git, no debugger and no marketplace in a tab (extensionsGallery is null), so their entries in the
+   activity bar only lead to empty views. With the activity bar at the top (config.mjs) the items live in the side
+   bar's header; the selector does not care which. */
+.monaco-workbench li.action-item:has(> a.action-label.codicon-source-control-view-icon),
+.monaco-workbench li.action-item:has(> a.action-label.codicon-run-view-icon),
+.monaco-workbench li.action-item:has(> a.action-label.codicon-extensions-view-icon) { display: none !important; }
+
+/* Outline and Timeline have nothing to show in the scratch workspace and take half of the Explorer. */
+.monaco-workbench .part.sidebar .pane-header[aria-label^="Outline"],
+.monaco-workbench .part.sidebar .pane-header[aria-label^="Timeline"] { display: none !important; }
+
+/* The keyboard layout indicator is a desktop concern; in a page it is a US/UK label that means nothing. */
+.monaco-workbench .part.statusbar #status\.workbench\.keyboardLayout { display: none !important; }
diff --git a/web/lib/config.mjs b/web/lib/config.mjs
index 5f26681..1af031e 100644
--- a/web/lib/config.mjs
+++ b/web/lib/config.mjs
@@ -45,7 +45,25 @@ export function webConfig(o = {}) {
 			// LevelCode is the assistant here; the stock Copilot surfaces (status item, chat view, command
 			// center) are for an account this editor does not use. The desktop app sets the same.
 			'chat.disableAIFeatures': true,
-			'chat.commandCenter.enabled': false,
+			'chat.agentsControl.enabled': 'hidden',
+			// The look (web/theme, web/chrome.css, web/ai-extension/skin.js): floating rounded panels, the
+			// activity bar as an icon row, nothing on screen that a tab cannot use. modernUI is Code-OSS's own
+			// experimental switch for the first of those; if a Code-OSS bump renames it the editor is still fine,
+			// only plainer.
+			'workbench.experimental.modernUI': true,
+			'workbench.activityBar.location': 'top',
+			'workbench.layoutControl.type': 'toggles',
+			'workbench.editor.empty.hint': 'hidden',
+			'workbench.tips.enabled': false,
+			'breadcrumbs.enabled': false,
+			'editor.minimap.enabled': false,
+			// Light or dark follows the visitor's system; the dark one is where it starts.
+			'window.autoDetectColorScheme': true,
+			'workbench.colorTheme': 'LevelCode Web Dark',
+			'workbench.preferredDarkColorTheme': 'LevelCode Web Dark',
+			'workbench.preferredLightColorTheme': 'LevelCode Web Light',
+			// The chat keeps its own group: files the agent opens go beside it, never over it.
+			'workbench.editor.autoLockGroups': { 'mainThreadWebview-levelcode.ai.chat': true },
 			'workbench.startupEditor': 'none',
 			'telemetry.telemetryLevel': 'off',
 			'update.mode': 'none',
@@ -53,6 +71,12 @@ export function webConfig(o = {}) {
 			'extensions.autoCheckUpdates': false,
 			'security.workspace.trust.enabled': false,
 		}, o.configurationDefaults),
+		// The workbench paints these until the theme extension has loaded (about half a second): without them the
+		// page flashes the web default, a light theme, first.
+		initialColorTheme: {
+			dark: { themeType: 'dark', colors: { 'editor.background': '#1b1c22', 'sideBar.background': '#15161b', 'activityBar.background': '#15161b', 'statusBar.background': '#15161b', 'titleBar.activeBackground': '#15161b', foreground: '#e4e5ea' } },
+			light: { themeType: 'light', colors: { 'editor.background': '#ffffff', 'sideBar.background': '#f3f3f6', 'activityBar.background': '#f3f3f6', 'statusBar.background': '#f3f3f6', 'titleBar.activeBackground': '#f3f3f6', foreground: '#1b1c22' } },
+		},
 		development: !!o.development,
 	};
 }
diff --git a/web/lib/extensions.mjs b/web/lib/extensions.mjs
index 569b75e..d1f0848 100644
--- a/web/lib/extensions.mjs
+++ b/web/lib/extensions.mjs
@@ -60,3 +60,19 @@ export function copyExtension(from, to) {
 		else if (e.isFile()) { fs.copyFileSync(src, dst); }
 	}
 }
+
+/**
+ * Remove a staged extension's default settings from its manifest. An extension's `configurationDefaults` outrank the
+ * embedder's, and levelcode-themes pins the desktop's default theme; the browser edition has a theme of its own, so
+ * the page's configuration has to be the one that decides.
+ * @param {string} manifestPath
+ * @returns {boolean} whether anything was removed
+ */
+export function withoutConfigurationDefaults(manifestPath) {
+	const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));
+	const c = manifest.contributes;
+	if (!c || !Object.prototype.hasOwnProperty.call(c, 'configurationDefaults')) { return false; }
+	delete c.configurationDefaults;
+	fs.writeFileSync(manifestPath, JSON.stringify(manifest, null, '\t') + '\n');
+	return true;
+}
diff --git a/web/main.js b/web/main.js
index 584a28c..8d2eed8 100644
--- a/web/main.js
+++ b/web/main.js
@@ -59,6 +59,7 @@ try {
 		})),
 		productConfiguration: config.productConfiguration || {},
 		configurationDefaults: config.configurationDefaults || {},
+		initialColorTheme: pickInitialTheme(config),
 		enableWorkspaceTrust: false,
 		// The sign-in page is opened from the editor; it is ours, so it opens without a link-safety prompt.
 		additionalTrustedDomains: config.trustedDomains || [],
@@ -68,6 +69,8 @@ try {
 	// create() resolves once the workbench has been constructed. The splash goes when its DOM exists.
 	void workbench;
 	boot.whenWorkbenchReady();
+	addChromeStyles(config);
+	hideBuiltInChat(workbench);
 	startReturnFromSignIn(callbacks, URI);
 } catch (err) {
 	console.error('[levelcode-web] failed to start', err);
@@ -84,6 +87,39 @@ function readConfig() {
 
 function trimSlash(s) { return s.replace(/\/+$/, ''); }
 
+/* ----- the look ----------------------------------------------------------------------------- */
+
+/** The colours the workbench paints before its theme has loaded: the dark set unless the system is light. */
+function pickInitialTheme(cfg) {
+	const set = cfg.initialColorTheme;
+	if (!set) { return undefined; }
+	let light = false;
+	try { light = !!(window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches); } catch { /* dark */ }
+	return light ? set.light : set.dark;
+}
+
+/**
+ * chrome.css after the workbench's own stylesheet, so that rules of equal weight are ours. (index.html links
+ * boot.css before it, which is right for the splash and wrong for overrides.)
+ */
+function addChromeStyles(cfg) {
+	const link = document.createElement('link');
+	link.rel = 'stylesheet';
+	link.href = trimSlash(cfg.base || '') + '/chrome.css';
+	document.head.appendChild(link);
+}
+
+/**
+ * Code-OSS's own Chat view (the Copilot one) shows up in the secondary side bar on the web even with
+ * chat.disableAIFeatures, through an interaction of its account-policy gate with that setting. LevelCode's chat
+ * is the assistant here, so the built-in view is told it is disabled. It is an internal context key set through
+ * the underscore command, so the symptom (a "Chat" tab in the right side bar) is what to look for on a bump.
+ */
+function hideBuiltInChat(workbench) {
+	try { void Promise.resolve(workbench.commands.executeCommand('_setContext', 'chatSetupDisabledInWorkspace', true)).catch(() => undefined); }
+	catch { /* a Code-OSS without it has nothing to hide */ }
+}
+
 /* ----- signing in ------------------------------------------------------------------------- */
 
 /**
diff --git a/web/test/e2e-look.mjs b/web/test/e2e-look.mjs
new file mode 100644
index 0000000..5df2e50
--- /dev/null
+++ b/web/test/e2e-look.mjs
@@ -0,0 +1,183 @@
+#!/usr/bin/env node
+// What a visitor sees: the look of the browser edition, in a real (headless) Chrome.
+//
+//   - the page follows the system's light/dark setting, with the build's own two themes;
+//   - the chat is the first thing there is: a centred greeting with starters, a pill composer, and the list
+//     of conversations docked on its left when the window is wide, folded away when it is narrow;
+//   - nothing opens in front of it (no Welcome page, no second chat from the workbench, no source-control /
+//     run / extensions icons that lead to things this edition does not have);
+//   - the layout switch in the status bar moves between "the chat on its own" and "Explorer, files and the
+//     chat docked on the right", and a docked layout is docked again after a reload.
+//
+// The sign-in is the stand-in's (?signin=1), exactly as in e2e-signin-tab.mjs; the chat's empty state is what
+// a signed-in visitor sees.
+//
+//   node web/test/e2e-look.mjs --dist <release dir> --stub-port <the account port it was built with> [--shots <dir>]
+//
+// Release only: the look is a property of what the build ships (the theme package, chrome.css, the skinned chat
+// page), and the development server's pieces do not include them.
+import { spawn } from 'node:child_process';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { startStub } from './stub-backend.mjs';
+import { Chrome, sleep } from './cdp.mjs';
+
+const HERE = path.dirname(fileURLToPath(import.meta.url));
+const args = Object.fromEntries(process.argv.slice(2).reduce((a, v, i, all) => { if (v.startsWith('--')) { a.push([v.slice(2), all[i + 1] && !all[i + 1].startsWith('--') ? all[i + 1] : 'true']); } return a; }, []));
+const DIST = args.dist ? path.resolve(args.dist) : null;
+const SHOTS = args.shots ? path.resolve(args.shots) : null;
+const PORT = Number(args.port || 8807);
+const editorOrigin = `http://localhost:${PORT}`;
+if (!DIST || !fs.existsSync(DIST)) {
+	console.error('usage: e2e-look.mjs --dist <release dir> [--stub-port N] [--shots dir]');
+	process.exit(2);
+}
+if (SHOTS) { fs.mkdirSync(SHOTS, { recursive: true }); }
+
+const results = [];
+const check = (name, ok, detail = '') => { results.push(ok); console.log(`${ok ? 'PASS' : 'FAIL'}  ${name}${detail ? '  — ' + detail : ''}`); return ok; };
+
+const stub = await startStub({ editorOrigin, port: args['stub-port'] ? Number(args['stub-port']) : 0 });
+const server = spawn(process.execPath, [path.join(HERE, '..', 'serve.mjs'), '--port', String(PORT), '--dist', DIST], { stdio: 'inherit' });
+let chrome;
+const finish = async (code) => { try { chrome && chrome.close(); } catch {} try { server.kill(); } catch {} try { await stub.close(); } catch {} process.exit(code); };
+process.on('SIGINT', () => finish(130));
+
+try {
+	for (let i = 0; i < 50; i++) { try { if ((await fetch(editorOrigin + '/')).ok) { break; } } catch {} await sleep(100); }
+	chrome = await Chrome.launch({ port: Number(args['debug-port'] || 9558), width: 1440, height: 900, args: ['--ignore-certificate-errors'] });
+	const page = await chrome.newPage(editorOrigin + '/?signin=1');
+
+	const shot = async (name) => { if (SHOTS) { await page.screenshot(path.join(SHOTS, name + '.png')); } };
+	const resize = async (w, h) => { await page.send('Emulation.setDeviceMetricsOverride', { width: w, height: h, deviceScaleFactor: 1, mobile: false }); await sleep(900); };
+	const scheme = async (value) => { await page.send('Emulation.setEmulatedMedia', { features: [{ name: 'prefers-color-scheme', value }] }); await sleep(1800); };
+	const workbenchReady = () => page.waitFor(() => page.eval(`!!document.querySelector('.monaco-workbench .part.editor')`), { ms: 90000, label: 'workbench' });
+	/** Evaluate in the chat webview's document (`d`), whichever frame it is. */
+	const inChat = async (expr) => {
+		for (const [id, s] of page.sessions) {
+			if (s.type !== 'iframe') { continue; }
+			try {
+				const v = await page.eval(`(() => { const f = document.getElementById('active-frame'); if (!f || !f.contentDocument || !f.contentDocument.getElementById('input')) { return { __no: true }; } const d = f.contentDocument; return { v: (${expr}) }; })()`, { sessionId: id });
+				if (v && !v.__no) { return v.v; }
+			} catch { /* another frame */ }
+		}
+		return undefined;
+	};
+	const chatReady = () => page.waitFor(async () => (await inChat(`!!d.getElementById('send')`)) === true, { ms: 90000, label: 'the chat page' });
+	/** The groups of the editor area: how many, and which of them holds the chat. */
+	const groups = () => page.eval(`(() => {
+		const gs = [...document.querySelectorAll('.editor-group-container')].filter((g) => g.getBoundingClientRect().width > 0);
+		return gs.map((g) => { const b = g.getBoundingClientRect(); return { x: Math.round(b.x), w: Math.round(b.width), chat: [...g.querySelectorAll('.tab')].some((t) => /LevelCode AI/.test(t.getAttribute('aria-label') || '')), tabs: [...g.querySelectorAll('.tab')].map((t) => t.getAttribute('aria-label') || '') }; }).sort((a, b) => a.x - b.x);
+	})()`);
+	const visible = (sel) => page.eval(`(() => { const e = document.querySelector(${JSON.stringify(sel)}); if (!e) { return false; } const r = e.getBoundingClientRect(); return r.width > 0 && r.height > 0 && getComputedStyle(e).visibility !== 'hidden'; })()`);
+	const layoutItemText = () => page.eval(`(() => { const a = [...document.querySelectorAll('.statusbar-item')].find((x) => /Chat\\s*$|Editor \\+ chat/.test((x.textContent || '').trim())); return a ? (a.textContent || '').trim() : null; })()`);
+	const clickLayoutItem = async () => {
+		const r = await page.waitFor(() => page.eval(`(() => { const a = [...document.querySelectorAll('.statusbar-item')].find((x) => /Chat\\s*$|Editor \\+ chat/.test((x.textContent || '').trim())); if (!a) { return null; } const b = a.getBoundingClientRect(); return { x: b.x + b.width / 2, y: b.y + b.height / 2 }; })()`), { ms: 20000, label: 'the layout item in the status bar' });
+		await page.click(r.x, r.y);
+	};
+
+	/* 1. the first screen */
+	await workbenchReady();
+	await chatReady();
+	await sleep(5000);   // the layout is applied by the extension a moment after start
+	await shot('1-first-screen');
+	const chat = await inChat(`({
+		lcWeb: d.body.classList.contains('lc-web'),
+		hero: (d.querySelector('.lcw-hero') || {}).textContent || null,
+		starters: [...d.querySelectorAll('.starter')].map((b) => b.textContent),
+		railDisplay: getComputedStyle(d.getElementById('sessOverlay')).display,
+		railPosition: getComputedStyle(d.getElementById('sessOverlay')).position,
+		panelRole: (d.querySelector('#sessOverlay .sesspanel') || {}).getAttribute && d.querySelector('#sessOverlay .sesspanel').getAttribute('role'),
+		newChat: !!d.querySelector('#sessOverlay .lcw-new'),
+		width: innerWidth,
+		composer: (() => { const b = d.getElementById('composer').getBoundingClientRect(); return { x: Math.round(b.x), w: Math.round(b.width) }; })(),
+	})`);
+	check('the chat page carries the browser skin', chat && chat.lcWeb === true, JSON.stringify(chat && chat.lcWeb));
+	check('the empty chat greets with one question and four starters', !!chat && chat.hero === 'What do you want to build?' && chat.starters.length === 4, JSON.stringify(chat && { hero: chat.hero, starters: chat.starters }));
+	check('wide window: the conversations are docked on the left, as part of the page', !!chat && chat.width >= 1000 && chat.railDisplay !== 'none' && chat.railPosition === 'fixed' && chat.panelRole === 'complementary' && chat.newChat, JSON.stringify(chat && { w: chat.width, d: chat.railDisplay, p: chat.railPosition, r: chat.panelRole, n: chat.newChat }));
+	check('the composer sits in the reading column, not edge to edge', !!chat && chat.composer.w <= 800 && chat.composer.w > 300, JSON.stringify(chat && chat.composer));
+
+	const tabs = await page.eval(`[...document.querySelectorAll('.tabs-container .tab')].map((e) => e.getAttribute('aria-label') || '')`);
+	check('nothing was opened in front of the chat: no Welcome page, no second chat', Array.isArray(tabs) && !tabs.some((t) => /Welcome|Get Started|Walkthrough/i.test(t)) && tabs.filter((t) => /LevelCode AI/.test(t)).length === 1, JSON.stringify(tabs));
+	const g1 = await groups();
+	check('the first layout is the chat on its own: one editor group, side bars away', g1.length === 1 && !(await visible('.part.sidebar')) && !(await visible('.part.auxiliarybar')), JSON.stringify(g1.map((g) => g.w)));
+	check('the status bar offers the switch', (await layoutItemText()) === 'Chat', JSON.stringify(await layoutItemText()));
+
+	/* 2. a starter fills the composer and does not send it */
+	const before = stub.state.chats;
+	await inChat(`(() => { const b = d.querySelector('.starter'); b.click(); return true; })()`);
+	await sleep(400);
+	const filled = await inChat(`({ value: d.getElementById('input').value || d.getElementById('input').textContent })`);
+	check('a starter writes its prompt into the composer and leaves the sending to the visitor', !!filled && /index\.html/.test(filled.value) && stub.state.chats === before, JSON.stringify(filled));
+	await inChat(`(() => { const i = d.getElementById('input'); if ('value' in i) { i.value = ''; } else { i.textContent = ''; } i.dispatchEvent(new Event('input', { bubbles: true })); return true; })()`);
+
+	/* 3. light and dark follow the system */
+	// The theme is a class of the workbench element (`vs` / `vs-dark` and the theme's own id); the colours are on its parts.
+	const theme = () => page.eval(`(() => {
+		const wb = document.querySelector('.monaco-workbench');
+		const bg = (s) => { const e = document.querySelector(s); return e ? getComputedStyle(e).backgroundColor : null; };
+		return { light: wb.classList.contains('vs'), dark: wb.classList.contains('vs-dark'),
+			id: [...wb.classList].find((c) => /web-(dark|light)-json$/.test(c)) || null,
+			chrome: bg('.part.sidebar'), editor: bg('.part.editor > .content') };
+	})()`);
+	const chatVar = () => inChat(`getComputedStyle(d.documentElement).getPropertyValue('--vscode-editor-background').trim()`);
+	await scheme('light');
+	const light = await theme();
+	const chatLight = await chatVar();
+	await shot('2-light');
+	await scheme('dark');
+	const dark = await theme();
+	const chatDark = await chatVar();
+	await shot('3-dark');
+	check('the workbench follows the system: this build\'s light theme, then its dark one', light.light && !light.dark && /web-light-json$/.test(light.id) && dark.dark && !dark.light && /web-dark-json$/.test(dark.id), JSON.stringify({ light: light.id, dark: dark.id }));
+	check('dark: the editor is one step above the chrome', dark.editor === 'rgb(27, 28, 34)' && dark.chrome === 'rgb(21, 22, 27)', JSON.stringify(dark));
+	check('light: the editor is white on a pale chrome', light.editor === 'rgb(255, 255, 255)' && light.chrome === 'rgb(243, 243, 246)', JSON.stringify(light));
+	check('the chat page, a webview of its own, is handed the same palette', chatDark === '#1b1c22' && chatLight === '#ffffff', JSON.stringify({ light: chatLight, dark: chatDark }));
+
+	/* 4. narrow: the conversations fold away, the chat stays usable */
+	await resize(900, 800);
+	await sleep(600);
+	const narrow = await inChat(`({ docked: getComputedStyle(d.getElementById('sessOverlay')).display !== 'none', role: d.querySelector('#sessOverlay .sesspanel').getAttribute('role'), modal: d.querySelector('#sessOverlay .sesspanel').getAttribute('aria-modal') })`);
+	await shot('4-900');
+	check('below 1000 px the conversation list is a dialog again, closed until it is asked for', !!narrow && narrow.role === 'dialog' && narrow.modal === 'true' && narrow.docked === false, JSON.stringify(narrow));
+	await resize(1440, 900);
+
+	/* 5. the layout switch */
+	await clickLayoutItem();
+	const split = await page.waitFor(async () => { const g = await groups(); return g.length === 2 ? g : null; }, { ms: 30000, label: 'two editor groups' }).catch(() => null);
+	await sleep(1500);
+	await shot('5-split');
+	check('the switch gives files on the left and the chat docked on the right', !!split && !split[0].chat && split[1].chat && split[0].tabs.some((t) => /README/.test(t)), JSON.stringify(split));
+	check('with the Explorer open on the left', (await visible('.explorer-folders-view')) === true);
+	check('the status item now says which one it is', (await layoutItemText()) === 'Editor + chat', JSON.stringify(await layoutItemText()));
+	const hidden = await page.eval(`(() => {
+		const icons = ['source-control-view-icon', 'run-view-icon', 'extensions-view-icon'].map((c) => {
+			const a = document.querySelector('a.action-label.codicon-' + c);
+			if (!a) { return { c, found: false }; }
+			const li = a.closest('li') || a;
+			return { c, found: true, shown: li.getBoundingClientRect().width > 0 && getComputedStyle(li).display !== 'none' };
+		});
+		const explorer = document.querySelector('a.action-label.codicon-explorer-view-icon');
+		return { icons, explorer: !!explorer && explorer.closest('li').getBoundingClientRect().width > 0 };
+	})()`);
+	check('source control, run and extensions are not offered; the Explorer is', hidden.icons.every((i) => !i.shown) && hidden.explorer, JSON.stringify(hidden));
+	check('the chat stays out of the secondary side bar (the workbench\'s own chat is not shown)', !(await visible('.part.auxiliarybar')), '');
+
+	/* 6. a docked layout is docked again after a reload; switching back puts the chat on its own */
+	await page.goto(editorOrigin + '/');
+	await workbenchReady();
+	const again = await page.waitFor(async () => { const g = await groups(); return g.length === 2 && g[1].chat ? g : null; }, { ms: 60000, label: 'the docked layout after reload' }).catch(() => null);
+	check('after a reload the chat is docked on the right again', !!again, JSON.stringify(again));
+	await clickLayoutItem();
+	const single = await page.waitFor(async () => { const g = await groups(); return g.length === 1 && g[0].chat ? g : null; }, { ms: 30000, label: 'the chat on its own' }).catch(() => null);
+	check('switching back puts the chat in a single group again, as the tab on show', !!single, JSON.stringify(single));
+	check('and the side bar is put away', !(await visible('.part.sidebar')));
+	await shot('6-back');
+} catch (e) {
+	check('the run completed', false, String((e && e.stack) || e));
+}
+
+const failed = results.filter((r) => !r).length;
+console.log(`\n${results.length - failed}/${results.length} checks passed`);
+await finish(failed ? 1 : 0);
diff --git a/web/test/e2e.mjs b/web/test/e2e.mjs
index 22cbd9f..38d3164 100644
--- a/web/test/e2e.mjs
+++ b/web/test/e2e.mjs
@@ -126,9 +126,11 @@ try {
 	await shot(page, '1-boot');
 
 	/* 2. sign in: the user icon in the chat footer opens the account card, which has "Sign in with browser" */
-	// First-run Welcome opens a moment after startup and takes the focus; let it settle, then go to the chat.
-	await page.waitFor(async () => (await page.eval(`[...document.querySelectorAll('.tabs-container .tab')].some((e) => /Welcome/.test(e.getAttribute('aria-label') || ''))`)), { ms: 30000, label: 'Welcome tab' }).catch(() => null);
-	await sleep(1500);
+	// The desktop's first-run Welcome page opens a moment after startup and takes the focus; in the browser edition it
+	// is switched off (web/ai-extension/copy.js) and the chat is the first thing there is. Give it the time it needs
+	// on the desktop (the extension opens it 900 ms after activation), then check that it did not come.
+	await sleep(4000);
+	check('no Welcome page opens in front of the chat', !(await page.eval(`[...document.querySelectorAll('.tabs-container .tab')].some((e) => /Welcome/.test(e.getAttribute('aria-label') || ''))`)));
 	await activateTab(/LevelCode AI/);
 	await page.waitFor(async () => (await inChat('!!d.getElementById("acctBtn")')) === true, { ms: 30000, label: 'chat account button' });
 	await clickInChat('#acctBtn');
diff --git a/web/test/unit/copy.test.js b/web/test/unit/copy.test.js
index ddbfe50..887de2c 100644
--- a/web/test/unit/copy.test.js
+++ b/web/test/unit/copy.test.js
@@ -34,6 +34,20 @@ test('applying them changes the file and leaves no desktop-only claim about keys
 test('a replacement whose desktop text has gone is an error, not a silent skip', () => {
 	assert.throws(() => applyCopy('extension.js', 'nothing relevant here'), /no longer in extension\.js/);
 });
+test('the first-run walkthrough is switched off in the browser and nowhere else', () => {
+	const src = fs.readFileSync(path.join(SRC, 'extension.js'), 'utf8');
+	const out = applyCopy('extension.js', src);
+	const welcome = "if (!context.globalState.get('levelcode.ai.didShowWelcome')) {";
+	assert.strictEqual(src.split(welcome).length - 1, 1, 'the desktop text is in the source exactly once');
+	assert.ok(!out.includes(welcome));
+	assert.ok(out.includes('if (false) {'));
+	// Only the guard is rewritten: the block it guards, the flag it sets and the walkthrough's command stay as they are,
+	// dead in the browser build but still the desktop's text.
+	assert.ok(out.includes("context.globalState.update('levelcode.ai.didShowWelcome', true)"));
+	assert.ok(out.includes("'workbench.action.openWalkthrough', 'levelcode.levelcode-ai#welcome'"));
+	const lines = src.split('\n').length;
+	assert.strictEqual(out.split('\n').length, lines, 'one line replaced by one line, so a stack trace line number still means the same');
+});
 test('the browser text claims only what the browser build does', () => {
 	for (const [, , to] of REPLACEMENTS) {
 		assert.ok(!/keychain|your machine|OS\b/i.test(to), 'the browser text still talks like the desktop: ' + to);
diff --git a/web/test/unit/main.test.js b/web/test/unit/main.test.js
index 8820d6a..467b32a 100644
--- a/web/test/unit/main.test.js
+++ b/web/test/unit/main.test.js
@@ -10,6 +10,9 @@
  *    createUrlCallbackProvider  .drain / .whenListening: what is delivered when the page starts
  *    createSecretStorage      the session store, shared by every tab of the origin
  *    startReturnFromSignIn    ?signin=1 and the return from a sign-in
+ *    pickInitialTheme         the colours painted before the theme has loaded follow the system
+ *    addChromeStyles          chrome.css comes AFTER the workbench's own stylesheet, from the build's prefix
+ *    hideBuiltInChat          the workbench's own chat is told it is disabled; a workbench without it is fine
  *--------------------------------------------------------------------------------------------*/
 // @ts-check
 'use strict';
@@ -421,5 +424,47 @@ const ACCOUNT = 'https://levelcode.example';
 		assert.strictEqual(t.calls.fired.length, 1);
 	});
 
+
+	/* ---- the look ---- */
+	const THEMES = { dark: { themeType: 'dark', colors: { 'editor.background': '#111111' } }, light: { themeType: 'light', colors: { 'editor.background': '#ffffff' } } };
+	const makePick = (matchMedia) => new Function('window', extract('pickInitialTheme') + '\nreturn pickInitialTheme;')({ matchMedia });
+	await test('look: the colours before the theme loads are the light set when the system is light, the dark one otherwise', () => {
+		const asked = [];
+		const pick = makePick((q) => { asked.push(q); return { matches: /light/.test(q) }; });
+		assert.strictEqual(pick({ initialColorTheme: THEMES }), THEMES.light);
+		assert.deepStrictEqual(asked, ['(prefers-color-scheme: light)']);
+		assert.strictEqual(makePick(() => ({ matches: false }))({ initialColorTheme: THEMES }), THEMES.dark);
+	});
+	await test('look: no matchMedia, or one that throws, is dark and not an error', () => {
+		assert.strictEqual(makePick(undefined)({ initialColorTheme: THEMES }), THEMES.dark);
+		assert.strictEqual(makePick(() => { throw new Error('no'); })({ initialColorTheme: THEMES }), THEMES.dark);
+	});
+	await test('look: a page configured without colours gives the workbench none (it keeps its own default)', () => {
+		assert.strictEqual(makePick(() => ({ matches: true }))({}), undefined);
+	});
+	await test('look: chrome.css is linked from the build\'s prefix, at the end of the head', () => {
+		const added = [];
+		const head = { appendChild: (e) => added.push(e) };
+		const document = { head, createElement: (t) => ({ tagName: t }) };
+		const trimSlash = (x) => x.replace(/\/+$/, '');
+		const add = new Function('document', 'trimSlash', extract('addChromeStyles') + '\nreturn addChromeStyles;')(document, trimSlash);
+		add({ base: '/_/abc123/' });
+		assert.strictEqual(added.length, 1);
+		assert.deepStrictEqual({ tag: added[0].tagName, rel: added[0].rel, href: added[0].href }, { tag: 'link', rel: 'stylesheet', href: '/_/abc123/chrome.css' });
+		add({});
+		assert.strictEqual(added[1].href, '/chrome.css', 'a development page has no prefix');
+	});
+	await test('look: the built-in chat is told it is disabled, through the one context key, and a failure there is not an error', async () => {
+		const sent = [];
+		const hide = new Function(extract('hideBuiltInChat') + '\nreturn hideBuiltInChat;')();
+		hide({ commands: { executeCommand: async (...a) => { sent.push(a); } } });
+		await new Promise((r) => setTimeout(r, 0));
+		assert.deepStrictEqual(sent, [['_setContext', 'chatSetupDisabledInWorkspace', true]]);
+		assert.doesNotThrow(() => hide({ commands: { executeCommand: async () => { throw new Error('unknown command'); } } }));
+		assert.doesNotThrow(() => hide({ commands: { executeCommand: () => { throw new Error('sync'); } } }));
+		assert.doesNotThrow(() => hide({}));
+		await new Promise((r) => setTimeout(r, 0));   // the rejected promise was handled, or this run would die here
+	});
+
 	console.log(`\n${n} tests passed`);
 })().catch((e) => { console.error(e); process.exit(1); });
diff --git a/web/test/unit/skin.test.js b/web/test/unit/skin.test.js
new file mode 100644
index 0000000..3ddb185
--- /dev/null
+++ b/web/test/unit/skin.test.js
@@ -0,0 +1,103 @@
+/*---------------------------------------------------------------------------------------------
+ *  The chat's browser skin — run: node web/test/unit/skin.test.js
+ *
+ *  The skin is a stylesheet, a class on <body> and a script, inserted into the copy of media/chat.html that goes
+ *  into the browser bundle. What matters:
+ *    - the desktop's chat.html is untouched, and nothing of the skin lives under extensions/;
+ *    - the insertions are exactly the three, and taking them out gives the original back;
+ *    - every rule of the skin is under body.lc-web, so a stray rule cannot restyle the page without the class;
+ *    - the script only sends messages the page already sends;
+ *    - the build says so when chat.html stops having the places the skin is cut into.
+ *--------------------------------------------------------------------------------------------*/
+// @ts-check
+'use strict';
+
+const assert = require('assert');
+const fs = require('fs');
+const path = require('path');
+
+const REPO = path.join(__dirname, '..', '..', '..');
+const { skinChat, ANCHORS } = require(path.join(REPO, 'web', 'ai-extension', 'skin.js'));
+const { applyCopy } = require(path.join(REPO, 'web', 'ai-extension', 'copy.js'));
+
+const desktop = fs.readFileSync(path.join(REPO, 'extensions', 'levelcode-ai', 'media', 'chat.html'), 'utf8');
+const base = applyCopy('media/chat.html', desktop);
+const css = fs.readFileSync(path.join(REPO, 'web', 'ai-extension', 'skin', 'chat.css'), 'utf8');
+const js = fs.readFileSync(path.join(REPO, 'web', 'ai-extension', 'skin', 'chat.js'), 'utf8');
+
+let n = 0;
+function test(name, fn) { fn(); n++; console.log('  ok - ' + name); }
+const count = (text, needle) => text.split(needle).length - 1;
+
+test('the desktop page has no trace of the skin, and no file of it is under extensions/', () => {
+	assert.ok(!/lc-web|lcw-/.test(desktop), 'chat.html names the skin');
+	const walk = (d) => fs.readdirSync(d, { withFileTypes: true }).flatMap((e) => {
+		const p = path.join(d, e.name);
+		if (e.name === 'node_modules' || e.name === '.git') { return []; }
+		return e.isDirectory() ? walk(p) : [p];
+	});
+	const strays = walk(path.join(REPO, 'extensions')).filter((f) => /skin/i.test(path.basename(f)) || (/\.(js|css|html)$/.test(f) && fs.readFileSync(f, 'utf8').includes('lcw-skin')));
+	assert.deepStrictEqual(strays, []);
+});
+
+test('the skinned page is the original plus the three insertions, and nothing else', () => {
+	const out = skinChat(base);
+	assert.strictEqual(count(out, 'id="lcw-skin"'), 1);
+	assert.strictEqual(count(out, '<body class="lc-web">'), 1);
+	assert.strictEqual(count(out, '<script nonce="__NONCE__">'), count(base, '<script nonce="__NONCE__">') + 1);
+	const back = out
+		.replace(`</style>\n<style id="lcw-skin">\n${css}</style>\n</head>`, ANCHORS.STYLE_END)
+		.replace('</head>\n<body class="lc-web">\n', ANCHORS.BODY_OPEN)
+		.replace(`</script>\n<script nonce="__NONCE__">\n${js}</script>\n</body>`, ANCHORS.SCRIPT_END);
+	assert.strictEqual(back, base);
+});
+
+test('the skin script is the last thing to run, after the page\'s own', () => {
+	const out = skinChat(base);
+	const own = out.lastIndexOf('vscode.postMessage({ type: \'ready\' });');
+	assert.ok(own > 0, 'the page\'s own ready message');
+	assert.ok(out.indexOf(js.slice(0, 80)) > own, 'the skin script comes after it');
+});
+
+test('every rule of the stylesheet is under body.lc-web', () => {
+	const text = css.replace(/\/\*[\s\S]*?\*\//g, '');
+	let depth = 0; let head = '';
+	const bad = [];
+	for (const ch of text) {
+		if (ch === '{') {
+			const sel = head.trim();
+			if (depth === 0 && !sel.startsWith('@')) { sel.split(',').forEach((s) => { if (!s.trim().startsWith('body.lc-web')) { bad.push(s.trim()); } }); }
+			else if (depth === 1 && !sel.startsWith('@')) { sel.split(',').forEach((s) => { if (!s.trim().startsWith('body.lc-web')) { bad.push(s.trim()); } }); }
+			depth++; head = '';
+		} else if (ch === '}') { depth--; head = ''; }
+		else if (ch === ';' && depth > 0) { head = ''; }
+		else if (depth === 0 || (depth === 1 && head !== undefined)) { head += ch; }
+	}
+	assert.strictEqual(depth, 0, 'balanced braces');
+	assert.deepStrictEqual(bad.filter((s) => s && !/^\d/.test(s)), []);
+});
+
+test('neither file can end its own block early', () => {
+	for (const text of [css, js]) {
+		assert.ok(!/<\/(script|style)/i.test(text));
+		assert.ok(!text.includes('<!--'));
+	}
+});
+
+test('the script is valid and sends only messages the page already sends', () => {
+	assert.doesNotThrow(() => new Function(js));
+	const sent = new Set([...js.matchAll(/type:\s*'([A-Za-z]+)'/g)].map((m) => m[1]));
+	assert.ok(sent.size > 0);
+	for (const t of sent) {
+		assert.ok(new RegExp(`vscode\\.postMessage\\(\\{\\s*type:\\s*'${t}'`).test(desktop), `the page itself never sends ${t}`);
+	}
+});
+
+test('the build refuses a chat.html that is not the shape the skin is cut into', () => {
+	for (const anchor of [ANCHORS.STYLE_END, ANCHORS.BODY_OPEN, ANCHORS.SCRIPT_END]) {
+		assert.throws(() => skinChat(base.replace(anchor, '')), /expected exactly one/);
+		assert.throws(() => skinChat(base + anchor), /expected exactly one/);
+	}
+});
+
+console.log(`\n${n} tests passed`);
diff --git a/web/test/unit/theme.test.js b/web/test/unit/theme.test.js
new file mode 100644
index 0000000..48a7644
--- /dev/null
+++ b/web/test/unit/theme.test.js
@@ -0,0 +1,134 @@
+/*---------------------------------------------------------------------------------------------
+ *  The browser edition's colour themes and look configuration — run: node web/test/unit/theme.test.js
+ *
+ *  A theme is data, so what can go wrong is quiet: a colour that is missing and falls back to a default that
+ *  does not belong, text that cannot be read, a default that names a theme the page does not have, or a pinned
+ *  default somewhere else that outranks ours. These tests read the files the build ships.
+ *--------------------------------------------------------------------------------------------*/
+// @ts-check
+'use strict';
+
+const assert = require('assert');
+const fs = require('fs');
+const os = require('os');
+const path = require('path');
+const { pathToFileURL } = require('url');
+
+const REPO = path.join(__dirname, '..', '..', '..');
+const THEME_DIR = path.join(REPO, 'web', 'theme', 'levelcode-web-theme');
+const pkg = JSON.parse(fs.readFileSync(path.join(THEME_DIR, 'package.json'), 'utf8'));
+const themes = Object.fromEntries(pkg.contributes.themes.map((t) => [t.label, { ...t, json: JSON.parse(fs.readFileSync(path.join(THEME_DIR, t.path), 'utf8')) }]));
+
+let n = 0;
+async function test(name, fn) { await fn(); n++; console.log('  ok - ' + name); }
+
+/** WCAG relative luminance and contrast of two #rrggbb colours (an alpha channel, if any, is ignored). */
+function lum(hex) {
+	const v = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255).map((c) => (c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)));
+	return 0.2126 * v[0] + 0.7152 * v[1] + 0.0722 * v[2];
+}
+function contrast(a, b) { const [x, y] = [lum(a), lum(b)].sort((p, q) => q - p); return (x + 0.05) / (y + 0.05); }
+/** Composite a #rrggbbaa over a #rrggbb ground. */
+function over(top, ground) {
+	if (top.length === 7) { return top; }
+	const a = parseInt(top.slice(7, 9), 16) / 255;
+	const mix = (i) => Math.round(parseInt(top.slice(i, i + 2), 16) * a + parseInt(ground.slice(i, i + 2), 16) * (1 - a));
+	return '#' + [1, 3, 5].map((i) => mix(i).toString(16).padStart(2, '0')).join('');
+}
+
+(async () => {
+	const { webConfig } = await import(pathToFileURL(path.join(REPO, 'web', 'lib', 'config.mjs')).href);
+	const { withoutConfigurationDefaults } = await import(pathToFileURL(path.join(REPO, 'web', 'lib', 'extensions.mjs')).href);
+
+	await test('the package names two themes, one dark and one light, and their files exist', () => {
+		assert.deepStrictEqual(Object.keys(themes).sort(), ['LevelCode Web Dark', 'LevelCode Web Light']);
+		assert.strictEqual(themes['LevelCode Web Dark'].uiTheme, 'vs-dark');
+		assert.strictEqual(themes['LevelCode Web Light'].uiTheme, 'vs');
+		assert.strictEqual(themes['LevelCode Web Dark'].json.type, 'dark');
+		assert.strictEqual(themes['LevelCode Web Light'].json.type, 'light');
+		assert.ok(!pkg.contributes.configurationDefaults, 'a default theme pinned here would race the page\'s own');
+	});
+
+	await test('every colour is a hex value, and the surfaces the look is made of are all there', () => {
+		const MUST = ['foreground', 'focusBorder', 'editor.background', 'editor.foreground', 'sideBar.background', 'sideBar.border', 'activityBar.background', 'activityBar.foreground',
+			'titleBar.activeBackground', 'statusBar.background', 'panel.background', 'panel.border', 'tab.activeBackground', 'tab.inactiveBackground', 'editorGroupHeader.tabsBackground',
+			'input.background', 'input.border', 'button.background', 'button.foreground', 'list.hoverBackground', 'list.activeSelectionBackground', 'menu.background', 'quickInput.background',
+			'terminal.background', 'terminal.foreground', 'terminal.ansiRed', 'terminal.ansiBrightWhite', 'agentsPanel.background', 'agentsPanel.border', 'editorWidget.background', 'scrollbarSlider.background'];
+		for (const t of Object.values(themes)) {
+			for (const [k, v] of Object.entries(t.json.colors)) { assert.ok(/^#[0-9a-fA-F]{6}([0-9a-fA-F]{2})?$/.test(v), `${t.label}: ${k} = ${v}`); }
+			assert.deepStrictEqual(MUST.filter((k) => !t.json.colors[k]), [], t.label);
+			assert.ok(t.json.tokenColors.length > 20, 'syntax colours');
+		}
+	});
+
+	await test('text can be read: foreground, secondary text and the button label meet WCAG contrast on their grounds', () => {
+		for (const t of Object.values(themes)) {
+			const c = t.json.colors;
+			const editor = c['editor.background'];
+			const chrome = c['sideBar.background'];
+			assert.ok(contrast(c.foreground, editor) >= 7, `${t.label}: foreground on the editor ${contrast(c.foreground, editor).toFixed(2)}`);
+			assert.ok(contrast(c['sideBar.foreground'], chrome) >= 4.5, `${t.label}: side bar text ${contrast(c['sideBar.foreground'], chrome).toFixed(2)}`);
+			assert.ok(contrast(c['tab.inactiveForeground'], c['tab.inactiveBackground']) >= 4.5, `${t.label}: inactive tab`);
+			assert.ok(contrast(c['button.foreground'], c['button.background']) >= 4.5, `${t.label}: button label ${contrast(c['button.foreground'], c['button.background']).toFixed(2)}`);
+			assert.ok(contrast(c['input.placeholderForeground'], over(c['input.background'], editor)) >= 3, `${t.label}: placeholder`);
+			assert.ok(contrast(c['statusBar.foreground'], c['statusBar.background']) >= 4.5, `${t.label}: status bar`);
+		}
+	});
+
+	await test('the editor is one step apart from the chrome, in the right direction for each theme', () => {
+		const d = themes['LevelCode Web Dark'].json.colors;
+		const l = themes['LevelCode Web Light'].json.colors;
+		assert.ok(lum(d['editor.background']) > lum(d['sideBar.background']), 'dark: the editor is lighter than the chrome');
+		assert.ok(lum(l['editor.background']) > lum(l['sideBar.background']), 'light: the editor is lighter than the chrome');
+		for (const c of [d, l]) {
+			for (const k of ['activityBar.background', 'titleBar.activeBackground', 'statusBar.background', 'tab.inactiveBackground', 'editorGroupHeader.tabsBackground']) {
+				assert.strictEqual(c[k], c['sideBar.background'], `${k} is the same chrome as the side bar`);
+			}
+			assert.strictEqual(c['tab.activeBackground'], c['editor.background']);
+		}
+	});
+
+	await test('the page\'s configuration names themes that exist, and only the page decides the default', () => {
+		const cfg = webConfig({ account: 'https://levelcode.example' }).configurationDefaults;
+		for (const k of ['workbench.colorTheme', 'workbench.preferredDarkColorTheme', 'workbench.preferredLightColorTheme']) {
+			assert.ok(themes[cfg[k]], `${k} = ${cfg[k]} is not a theme the page ships`);
+		}
+		assert.strictEqual(cfg['workbench.preferredDarkColorTheme'], 'LevelCode Web Dark');
+		assert.strictEqual(cfg['workbench.preferredLightColorTheme'], 'LevelCode Web Light');
+		assert.strictEqual(cfg['window.autoDetectColorScheme'], true);
+		// the chat's group is kept apart under the same view type the layout code looks for
+		const ws = fs.readFileSync(path.join(REPO, 'web', 'workspace', 'extension.js'), 'utf8');
+		const viewType = (ws.match(/const CHAT_VIEW_TYPE = '([^']+)'/) || [])[1];
+		assert.ok(viewType && Object.keys(cfg['workbench.editor.autoLockGroups']).includes(viewType), `autoLockGroups does not name ${viewType}`);
+	});
+
+	await test('the colours painted before the theme loads are the theme\'s own', () => {
+		const init = webConfig({ account: 'https://levelcode.example' }).initialColorTheme;
+		const d = themes['LevelCode Web Dark'].json.colors;
+		const l = themes['LevelCode Web Light'].json.colors;
+		for (const [which, c] of [['dark', d], ['light', l]]) {
+			assert.strictEqual(init[which].colors['editor.background'], c['editor.background']);
+			assert.strictEqual(init[which].colors['sideBar.background'], c['sideBar.background']);
+			assert.strictEqual(init[which].colors.foreground, c.foreground);
+		}
+		assert.strictEqual(init.dark.themeType, 'dark');
+		assert.strictEqual(init.light.themeType, 'light');
+	});
+
+	await test('the desktop themes\' pinned default is removed from the staged copy, and only that', () => {
+		const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'lc-theme-'));
+		const file = path.join(dir, 'package.json');
+		const source = fs.readFileSync(path.join(REPO, 'extensions', 'levelcode-themes', 'package.json'), 'utf8');
+		assert.ok(/configurationDefaults/.test(source), 'the desktop extension still pins its default');
+		fs.writeFileSync(file, source);
+		assert.strictEqual(withoutConfigurationDefaults(file), true);
+		const staged = JSON.parse(fs.readFileSync(file, 'utf8'));
+		const original = JSON.parse(source);
+		assert.ok(!('configurationDefaults' in staged.contributes));
+		assert.deepStrictEqual(staged.contributes.themes, original.contributes.themes, 'both of its themes stay selectable');
+		assert.strictEqual(withoutConfigurationDefaults(file), false, 'nothing left to remove');
+		assert.ok(/configurationDefaults/.test(fs.readFileSync(path.join(REPO, 'extensions', 'levelcode-themes', 'package.json'), 'utf8')), 'the desktop source is not touched');
+	});
+
+	console.log(`\n${n} tests passed`);
+})().catch((e) => { console.error(e); process.exit(1); });
diff --git a/web/test/unit/workspace.test.js b/web/test/unit/workspace.test.js
index 18ba0ff..d136cc9 100644
--- a/web/test/unit/workspace.test.js
+++ b/web/test/unit/workspace.test.js
@@ -7,6 +7,9 @@
  *    openLocalFolder   must ask the dialog from the `file` scheme. From the scratch scheme the workbench shows its
  *                      own file browser instead of the browser's picker (the command did nothing useful until
  *                      it was run in a real browser).
+ *    applyLayout       arranges the window for the chat on its own or for the editor with the chat docked. It is
+ *                      only workbench commands, so what is pinned here is WHICH ones and in WHAT ORDER: a group
+ *                      that is emptied by moving the chat out of it is closed, so the file has to be opened first.
  *--------------------------------------------------------------------------------------------*/
 // @ts-check
 'use strict';
@@ -22,18 +25,40 @@ class Uri {
 }
 const calls = { dialogs: /** @type {any[]} */ ([]), commands: /** @type {any[][]} */ ([]) };
 let nextPick = /** @type {any} */ (undefined);
+const CHAT = 'mainThreadWebview-levelcode.ai.chat';
+/** What the window has open: groups of tabs, each tab `{ input: { viewType } | { uri } }`. */
+let groupsNow = /** @type {any[]} */ ([]);
+let config = /** @type {Record<string, any>} */ ({});
+let found = /** @type {any[]} */ ([]);
+const shown = /** @type {any[][]} */ ([]);
 const vscodeMock = {
 	Uri,
-	window: { async showOpenDialog(o) { calls.dialogs.push(o); return nextPick; } },
+	ViewColumn: { One: 1, Two: 2 },
+	window: {
+		async showOpenDialog(o) { calls.dialogs.push(o); return nextPick; },
+		get tabGroups() { return { all: groupsNow }; },
+		async showTextDocument(...a) { shown.push(a); calls.commands.push(['(show)', a[0] && a[0].path]); },
+	},
+	workspace: {
+		getConfiguration(section) { return { get: (k, d) => (config[section + '.' + k] !== undefined ? config[section + '.' + k] : d) }; },
+		async findFiles() { return found; },
+	},
 	commands: { async executeCommand(...a) { calls.commands.push(a); } },
 };
+const chatTab = { input: { viewType: CHAT } };
+const fileTab = { input: { uri: new Uri('levelcode-scratch', '/README.md') } };
 const origLoad = Module._load;
 // @ts-ignore
 Module._load = function (request, parent, isMain) { return request === 'vscode' ? vscodeMock : origLoad.call(this, request, parent, isMain); };
 const ext = require(path.join(__dirname, '..', '..', 'workspace', 'extension.js'));
 
 let n = 0;
-async function test(name, fn) { calls.dialogs.length = 0; calls.commands.length = 0; await fn(); n++; console.log('  ok - ' + name); }
+async function test(name, fn) {
+	calls.dialogs.length = 0; calls.commands.length = 0; shown.length = 0;
+	groupsNow = []; config = {}; found = [];
+	await fn(); n++; console.log('  ok - ' + name);
+}
+const ids = () => calls.commands.map((c) => c[0]);
 
 (async () => {
 	await test('the picker is asked for a folder, starting from the file scheme, not the scratch scheme', async () => {
@@ -60,5 +85,88 @@ async function test(name, fn) { calls.dialogs.length = 0; calls.commands.length
 			assert.deepStrictEqual(calls.commands, []);
 		}
 	});
+
+	/* ----- layout ----- */
+	await test('the layout is chatFirst unless the setting says split; anything else is chatFirst', async () => {
+		assert.strictEqual(ext.currentLayout(vscodeMock), 'chatFirst');
+		for (const [v, want] of [['split', 'split'], ['chatFirst', 'chatFirst'], ['sideways', 'chatFirst'], [null, 'chatFirst'], [3, 'chatFirst']]) {
+			config['levelcode.web.layout'] = v;
+			assert.strictEqual(ext.currentLayout(vscodeMock), want, String(v));
+		}
+		assert.deepStrictEqual(ext.LAYOUTS, ['chatFirst', 'split']);
+	});
+	await test('the chat\'s group is found by its view type, and a file\'s group is not it', async () => {
+		const left = { viewColumn: 1, tabs: [fileTab] };
+		const right = { viewColumn: 2, tabs: [chatTab] };
+		groupsNow = [left, right];
+		assert.strictEqual(ext.chatGroup(vscodeMock), right);
+		groupsNow = [left];
+		assert.strictEqual(ext.chatGroup(vscodeMock), undefined);
+		groupsNow = [{ viewColumn: 1, tabs: [{ input: { viewType: 'something.else' } }, { input: null }, {}] }];
+		assert.strictEqual(ext.chatGroup(vscodeMock), undefined);
+	});
+	await test('chatFirst, chat already alone: focus it and put the side bars away, nothing is moved', async () => {
+		groupsNow = [{ viewColumn: 1, tabs: [chatTab] }];
+		await ext.applyLayout(vscodeMock, 'chatFirst');
+		assert.deepStrictEqual(ids(), ['levelcode.ai.focus', 'workbench.action.closeSidebar', 'workbench.action.closePanel', 'workbench.action.closeAuxiliaryBar']);
+	});
+	await test('chatFirst, chat docked on the right: it is brought back to the first group', async () => {
+		groupsNow = [{ viewColumn: 1, tabs: [fileTab] }, { viewColumn: 2, tabs: [chatTab] }];
+		await ext.applyLayout(vscodeMock, 'chatFirst');
+		assert.deepStrictEqual(ids(), ['levelcode.ai.focus', 'workbench.action.moveEditorToFirstGroup', 'workbench.action.closeSidebar', 'workbench.action.closePanel', 'workbench.action.closeAuxiliaryBar']);
+	});
+	await test('chatFirst with the chat in the first of several groups leaves it where it is', async () => {
+		groupsNow = [{ viewColumn: 1, tabs: [chatTab] }, { viewColumn: 2, tabs: [fileTab] }];
+		await ext.applyLayout(vscodeMock, 'chatFirst');
+		assert.ok(!ids().includes('workbench.action.moveEditorToFirstGroup'));
+	});
+	await test('split, chat alone: a file is opened FIRST in column one, then the chat is moved right, then the Explorer', async () => {
+		groupsNow = [{ viewColumn: 1, tabs: [chatTab] }];
+		found = [new Uri('levelcode-scratch', '/README.md')];
+		await ext.applyLayout(vscodeMock, 'split');
+		assert.deepStrictEqual(ids(), ['levelcode.ai.focus', '(show)', 'levelcode.ai.focus', 'workbench.action.moveEditorToRightGroup', 'workbench.view.explorer']);
+		const [doc, opts] = shown[0];
+		assert.strictEqual(doc.path, '/README.md');
+		assert.strictEqual(opts.viewColumn, 1);
+		assert.strictEqual(opts.preserveFocus, true, 'the file must not take the focus: the chat is what is moved');
+		assert.strictEqual(opts.preview, false, 'a preview tab is replaced by the next file, which would leave the group empty again');
+	});
+	await test('split, chat alone and no README: still moves the chat and shows the Explorer', async () => {
+		groupsNow = [{ viewColumn: 1, tabs: [chatTab] }];
+		found = [];
+		await ext.applyLayout(vscodeMock, 'split');
+		assert.deepStrictEqual(ids(), ['levelcode.ai.focus', 'levelcode.ai.focus', 'workbench.action.moveEditorToRightGroup', 'workbench.view.explorer']);
+	});
+	await test('split, already two groups: only the Explorer is shown, nothing is moved or opened', async () => {
+		groupsNow = [{ viewColumn: 1, tabs: [fileTab] }, { viewColumn: 2, tabs: [chatTab] }];
+		await ext.applyLayout(vscodeMock, 'split');
+		assert.deepStrictEqual(ids(), ['levelcode.ai.focus', 'workbench.view.explorer']);
+		assert.strictEqual(shown.length, 0);
+	});
+	await test('split after a reload: the two groups are back but the chat opened in the first, beside a file — it is docked', async () => {
+		groupsNow = [{ viewColumn: 1, tabs: [fileTab, chatTab] }, { viewColumn: 2, tabs: [] }];
+		await ext.applyLayout(vscodeMock, 'split');
+		assert.deepStrictEqual(ids(), ['levelcode.ai.focus', 'workbench.action.moveEditorToRightGroup', 'workbench.view.explorer']);
+		assert.strictEqual(shown.length, 0, 'no file is opened: there is one already');
+	});
+	await test('split with the chat alone in the first group and files on the right is left as the visitor arranged it', async () => {
+		groupsNow = [{ viewColumn: 1, tabs: [chatTab] }, { viewColumn: 2, tabs: [fileTab] }];
+		await ext.applyLayout(vscodeMock, 'split');
+		assert.ok(!ids().includes('workbench.action.moveEditorToRightGroup'), 'moving it would merge it into the files\' group');
+	});
+	await test('split with the chat already in the last group, beside other chats or files, is not moved again', async () => {
+		groupsNow = [{ viewColumn: 1, tabs: [fileTab] }, { viewColumn: 2, tabs: [fileTab, chatTab] }];
+		await ext.applyLayout(vscodeMock, 'split');
+		assert.ok(!ids().includes('workbench.action.moveEditorToRightGroup'));
+	});
+	await test('no layout closes anything in the other: split never closes the side bars, chatFirst never opens the Explorer', async () => {
+		groupsNow = [{ viewColumn: 1, tabs: [chatTab] }];
+		await ext.applyLayout(vscodeMock, 'split');
+		assert.ok(!ids().some((i) => /close/.test(i)));
+		calls.commands.length = 0;
+		await ext.applyLayout(vscodeMock, 'chatFirst');
+		assert.ok(!ids().includes('workbench.view.explorer'));
+	});
+
 	console.log(`\n${n} tests passed`);
 })().catch((e) => { console.error(e); process.exit(1); });
diff --git a/web/theme/levelcode-web-theme/package.json b/web/theme/levelcode-web-theme/package.json
new file mode 100644
index 0000000..5a99599
--- /dev/null
+++ b/web/theme/levelcode-web-theme/package.json
@@ -0,0 +1,28 @@
+{
+	"name": "levelcode-web-theme",
+	"displayName": "LevelCode Web Themes",
+	"description": "The look of LevelCode in the browser: a quiet neutral chrome with the editor one step lighter, hairline borders and one violet accent.",
+	"publisher": "levelcode",
+	"version": "0.1.0",
+	"license": "MIT",
+	"engines": {
+		"vscode": "^1.126.0"
+	},
+	"categories": [
+		"Themes"
+	],
+	"contributes": {
+		"themes": [
+			{
+				"label": "LevelCode Web Dark",
+				"uiTheme": "vs-dark",
+				"path": "./themes/web-dark.json"
+			},
+			{
+				"label": "LevelCode Web Light",
+				"uiTheme": "vs",
+				"path": "./themes/web-light.json"
+			}
+		]
+	}
+}
diff --git a/web/theme/levelcode-web-theme/themes/web-dark.json b/web/theme/levelcode-web-theme/themes/web-dark.json
new file mode 100644
index 0000000..ccf6b32
--- /dev/null
+++ b/web/theme/levelcode-web-theme/themes/web-dark.json
@@ -0,0 +1,596 @@
+{
+	"name": "LevelCode Web Dark",
+	"type": "dark",
+	"semanticHighlighting": true,
+	"colors": {
+		"foreground": "#e4e5ea",
+		"descriptionForeground": "#a7a9b4",
+		"disabledForeground": "#6f7280",
+		"errorForeground": "#e5676f",
+		"focusBorder": "#7c5cd6cc",
+		"widget.shadow": "#00000066",
+		"widget.border": "#ffffff14",
+		"selection.background": "#7c5cd655",
+		"icon.foreground": "#a7a9b4",
+		"sash.hoverBorder": "#7c5cd6",
+		"toolbar.hoverBackground": "#ffffff0a",
+		"toolbar.activeBackground": "#ffffff14",
+		"textLink.foreground": "#9d86ea",
+		"textLink.activeForeground": "#9d86ea",
+		"textCodeBlock.background": "#24252d",
+		"textBlockQuote.background": "#24252d",
+		"textBlockQuote.border": "#ffffff1f",
+		"textPreformat.foreground": "#e4e5ea",
+		"progressBar.background": "#7c5cd6",
+		"sideBySideEditor.horizontalBorder": "#ffffff14",
+		"sideBySideEditor.verticalBorder": "#ffffff14",
+		"editor.background": "#1b1c22",
+		"editor.foreground": "#e4e5ea",
+		"editorLineNumber.foreground": "#6f7280",
+		"editorLineNumber.activeForeground": "#a7a9b4",
+		"editorCursor.foreground": "#7c5cd6",
+		"editor.lineHighlightBackground": "#ffffff0a",
+		"editor.lineHighlightBorder": "#00000000",
+		"editor.selectionBackground": "#7c5cd640",
+		"editor.inactiveSelectionBackground": "#7c5cd626",
+		"editor.selectionHighlightBackground": "#7c5cd626",
+		"editor.wordHighlightBackground": "#ffffff14",
+		"editor.wordHighlightStrongBackground": "#7c5cd633",
+		"editor.findMatchBackground": "#7c5cd655",
+		"editor.findMatchHighlightBackground": "#7c5cd633",
+		"editor.findRangeHighlightBackground": "#ffffff0a",
+		"editor.hoverHighlightBackground": "#ffffff0a",
+		"editor.rangeHighlightBackground": "#ffffff0a",
+		"editorWhitespace.foreground": "#ffffff14",
+		"editorIndentGuide.background1": "#ffffff14",
+		"editorIndentGuide.activeBackground1": "#ffffff33",
+		"editorBracketMatch.background": "#7c5cd633",
+		"editorBracketMatch.border": "#00000000",
+		"editorGutter.background": "#1b1c22",
+		"editorRuler.foreground": "#ffffff14",
+		"editorLink.activeForeground": "#9d86ea",
+		"editorOverviewRuler.border": "#00000000",
+		"editorError.foreground": "#e5676f",
+		"editorWarning.foreground": "#e0b25a",
+		"editorInfo.foreground": "#6aa7f0",
+		"editorWidget.background": "#24252d",
+		"editorWidget.border": "#ffffff1f",
+		"editorWidget.foreground": "#e4e5ea",
+		"editorSuggestWidget.background": "#24252d",
+		"editorSuggestWidget.border": "#ffffff1f",
+		"editorSuggestWidget.selectedBackground": "#ffffff14",
+		"editorSuggestWidget.highlightForeground": "#9d86ea",
+		"editorHoverWidget.background": "#24252d",
+		"editorHoverWidget.border": "#ffffff1f",
+		"editorGroup.border": "#ffffff14",
+		"editorGroup.dropBackground": "#7c5cd622",
+		"editorGroupHeader.tabsBackground": "#15161b",
+		"editorGroupHeader.tabsBorder": "#00000000",
+		"editorGroupHeader.noTabsBackground": "#1b1c22",
+		"breadcrumb.foreground": "#6f7280",
+		"breadcrumb.focusForeground": "#e4e5ea",
+		"breadcrumb.activeSelectionForeground": "#e4e5ea",
+		"breadcrumbPicker.background": "#24252d",
+		"minimap.background": "#1b1c22",
+		"diffEditor.insertedTextBackground": "#6fc08a24",
+		"diffEditor.removedTextBackground": "#e5676f24",
+		"diffEditor.insertedLineBackground": "#6fc08a14",
+		"diffEditor.removedLineBackground": "#e5676f14",
+		"editorGutter.addedBackground": "#6fc08a",
+		"editorGutter.modifiedBackground": "#6aa7f0",
+		"editorGutter.deletedBackground": "#e5676f",
+		"scrollbarSlider.background": "#e4e5ea1f",
+		"scrollbarSlider.hoverBackground": "#e4e5ea33",
+		"scrollbarSlider.activeBackground": "#e4e5ea47",
+		"scrollbar.shadow": "#00000000",
+		"tab.activeBackground": "#1b1c22",
+		"tab.inactiveBackground": "#15161b",
+		"tab.activeForeground": "#e4e5ea",
+		"tab.inactiveForeground": "#a7a9b4",
+		"tab.unfocusedActiveForeground": "#a7a9b4",
+		"tab.unfocusedInactiveForeground": "#6f7280",
+		"tab.border": "#15161b",
+		"tab.lastPinnedBorder": "#ffffff14",
+		"tab.activeBorder": "#00000000",
+		"tab.activeBorderTop": "#00000000",
+		"tab.unfocusedActiveBorder": "#00000000",
+		"tab.unfocusedActiveBorderTop": "#00000000",
+		"tab.hoverBackground": "#ffffff0a",
+		"tab.unfocusedHoverBackground": "#ffffff0a",
+		"tab.activeModifiedBorder": "#7c5cd6",
+		"tab.inactiveModifiedBorder": "#7c5cd699",
+		"sideBar.background": "#15161b",
+		"sideBar.foreground": "#a7a9b4",
+		"sideBar.border": "#ffffff14",
+		"sideBarTitle.foreground": "#e4e5ea",
+		"sideBarSectionHeader.background": "#00000000",
+		"sideBarSectionHeader.foreground": "#e4e5ea",
+		"sideBarSectionHeader.border": "#ffffff14",
+		"activityBar.background": "#15161b",
+		"activityBar.foreground": "#e4e5ea",
+		"activityBar.inactiveForeground": "#6f7280",
+		"activityBar.border": "#ffffff14",
+		"activityBar.activeBorder": "#7c5cd6",
+		"activityBar.activeBackground": "#00000000",
+		"activityBarBadge.background": "#7c5cd6",
+		"activityBarBadge.foreground": "#ffffff",
+		"titleBar.activeBackground": "#15161b",
+		"titleBar.activeForeground": "#a7a9b4",
+		"titleBar.inactiveBackground": "#15161b",
+		"titleBar.inactiveForeground": "#6f7280",
+		"titleBar.border": "#ffffff14",
+		"statusBar.background": "#15161b",
+		"statusBar.foreground": "#a7a9b4",
+		"statusBar.border": "#ffffff14",
+		"statusBar.noFolderBackground": "#15161b",
+		"statusBar.noFolderForeground": "#a7a9b4",
+		"statusBar.debuggingBackground": "#7c5cd6",
+		"statusBar.debuggingForeground": "#ffffff",
+		"statusBarItem.hoverBackground": "#ffffff14",
+		"statusBarItem.activeBackground": "#ffffff14",
+		"statusBarItem.remoteBackground": "#7c5cd6",
+		"statusBarItem.remoteForeground": "#ffffff",
+		"statusBarItem.prominentBackground": "#ffffff14",
+		"panel.background": "#1b1c22",
+		"panel.border": "#ffffff14",
+		"panelTitle.activeForeground": "#e4e5ea",
+		"panelTitle.inactiveForeground": "#6f7280",
+		"panelTitle.activeBorder": "#7c5cd6",
+		"panelSectionHeader.background": "#00000000",
+		"panelSection.border": "#ffffff14",
+		"agentsPanel.background": "#15161b",
+		"agentsPanel.foreground": "#a7a9b4",
+		"agentsPanel.border": "#ffffff14",
+		"input.background": "#24252d",
+		"input.foreground": "#e4e5ea",
+		"input.border": "#ffffff1f",
+		"input.placeholderForeground": "#6f7280",
+		"inputOption.activeBorder": "#7c5cd6",
+		"inputOption.activeBackground": "#7c5cd633",
+		"inputOption.activeForeground": "#e4e5ea",
+		"inputValidation.errorBackground": "#e5676f22",
+		"inputValidation.errorBorder": "#e5676f",
+		"inputValidation.warningBackground": "#e0b25a22",
+		"inputValidation.warningBorder": "#e0b25a",
+		"inputValidation.infoBackground": "#6aa7f022",
+		"inputValidation.infoBorder": "#6aa7f0",
+		"dropdown.background": "#24252d",
+		"dropdown.foreground": "#e4e5ea",
+		"dropdown.border": "#ffffff1f",
+		"dropdown.listBackground": "#24252d",
+		"button.background": "#7c5cd6",
+		"button.foreground": "#ffffff",
+		"button.hoverBackground": "#8d70e0",
+		"button.secondaryBackground": "#ffffff14",
+		"button.secondaryForeground": "#e4e5ea",
+		"button.secondaryHoverBackground": "#ffffff1f",
+		"button.border": "#00000000",
+		"badge.background": "#7c5cd6",
+		"badge.foreground": "#ffffff",
+		"checkbox.background": "#24252d",
+		"checkbox.border": "#ffffff33",
+		"checkbox.foreground": "#e4e5ea",
+		"list.activeSelectionBackground": "#7c5cd633",
+		"list.activeSelectionForeground": "#e4e5ea",
+		"list.inactiveSelectionBackground": "#ffffff14",
+		"list.inactiveSelectionForeground": "#e4e5ea",
+		"list.hoverBackground": "#ffffff0a",
+		"list.hoverForeground": "#e4e5ea",
+		"list.focusBackground": "#7c5cd626",
+		"list.focusOutline": "#7c5cd6aa",
+		"list.highlightForeground": "#9d86ea",
+		"list.errorForeground": "#e5676f",
+		"list.warningForeground": "#e0b25a",
+		"list.dropBackground": "#7c5cd622",
+		"tree.indentGuidesStroke": "#ffffff14",
+		"menu.background": "#24252d",
+		"menu.foreground": "#e4e5ea",
+		"menu.selectionBackground": "#ffffff14",
+		"menu.selectionForeground": "#e4e5ea",
+		"menu.separatorBackground": "#ffffff14",
+		"menu.border": "#ffffff1f",
+		"quickInput.background": "#24252d",
+		"quickInput.foreground": "#e4e5ea",
+		"quickInputTitle.background": "#24252d",
+		"quickInputList.focusBackground": "#7c5cd633",
+		"quickInputList.focusForeground": "#e4e5ea",
+		"pickerGroup.foreground": "#9d86ea",
+		"pickerGroup.border": "#ffffff14",
+		"notifications.background": "#24252d",
+		"notifications.foreground": "#e4e5ea",
+		"notifications.border": "#ffffff1f",
+		"notificationCenterHeader.background": "#24252d",
+		"notificationToast.border": "#ffffff1f",
+		"notificationLink.foreground": "#9d86ea",
+		"peekView.border": "#7c5cd6",
+		"peekViewEditor.background": "#1b1c22",
+		"peekViewResult.background": "#15161b",
+		"peekViewTitle.background": "#15161b",
+		"settings.headerForeground": "#e4e5ea",
+		"settings.modifiedItemIndicator": "#7c5cd6",
+		"settings.dropdownBackground": "#24252d",
+		"settings.textInputBackground": "#24252d",
+		"welcomePage.background": "#1b1c22",
+		"walkThrough.embeddedEditorBackground": "#24252d",
+		"gitDecoration.modifiedResourceForeground": "#6aa7f0",
+		"gitDecoration.untrackedResourceForeground": "#6fc08a",
+		"gitDecoration.deletedResourceForeground": "#e5676f",
+		"gitDecoration.ignoredResourceForeground": "#6f7280",
+		"gitDecoration.conflictingResourceForeground": "#e0b25a",
+		"terminal.background": "#1b1c22",
+		"terminal.foreground": "#e4e5ea",
+		"terminal.selectionBackground": "#7c5cd640",
+		"terminalCursor.foreground": "#7c5cd6",
+		"terminal.border": "#ffffff14",
+		"terminal.tab.activeBorder": "#7c5cd6",
+		"terminal.ansiBlack": "#2b2d36",
+		"terminal.ansiRed": "#e5676f",
+		"terminal.ansiGreen": "#6fc08a",
+		"terminal.ansiYellow": "#e0b25a",
+		"terminal.ansiBlue": "#6aa7f0",
+		"terminal.ansiMagenta": "#b48ef0",
+		"terminal.ansiCyan": "#5cc4cf",
+		"terminal.ansiWhite": "#c9cad2",
+		"terminal.ansiBrightBlack": "#5a5d6b",
+		"terminal.ansiBrightRed": "#f28a91",
+		"terminal.ansiBrightGreen": "#8fd4a5",
+		"terminal.ansiBrightYellow": "#ecc67a",
+		"terminal.ansiBrightBlue": "#8dbcf5",
+		"terminal.ansiBrightMagenta": "#c9aaf5",
+		"terminal.ansiBrightCyan": "#82d6de",
+		"terminal.ansiBrightWhite": "#f0f0f4"
+	},
+	"tokenColors": [
+		{
+			"scope": [
+				"comment",
+				"punctuation.definition.comment"
+			],
+			"settings": {
+				"foreground": "#5c6370",
+				"fontStyle": "italic"
+			}
+		},
+		{
+			"scope": [
+				"string",
+				"punctuation.definition.string"
+			],
+			"settings": {
+				"foreground": "#98c379"
+			}
+		},
+		{
+			"scope": [
+				"string.regexp",
+				"constant.character.escape"
+			],
+			"settings": {
+				"foreground": "#56b6c2"
+			}
+		},
+		{
+			"scope": [
+				"constant.numeric",
+				"constant.language",
+				"constant.character",
+				"constant.other"
+			],
+			"settings": {
+				"foreground": "#d19a66"
+			}
+		},
+		{
+			"scope": [
+				"constant.language.boolean",
+				"constant.language.null",
+				"constant.language.undefined"
+			],
+			"settings": {
+				"foreground": "#d19a66"
+			}
+		},
+		{
+			"scope": [
+				"variable",
+				"meta.definition.variable.name",
+				"support.variable",
+				"entity.name.variable"
+			],
+			"settings": {
+				"foreground": "#e06c75"
+			}
+		},
+		{
+			"scope": [
+				"variable.parameter",
+				"meta.function.parameters"
+			],
+			"settings": {
+				"foreground": "#abb2bf"
+			}
+		},
+		{
+			"scope": [
+				"variable.language",
+				"variable.language.this",
+				"variable.language.special"
+			],
+			"settings": {
+				"foreground": "#e06c75",
+				"fontStyle": "italic"
+			}
+		},
+		{
+			"scope": [
+				"variable.other.property",
+				"meta.object-literal.key",
+				"support.variable.property",
+				"support.type.property-name"
+			],
+			"settings": {
+				"foreground": "#e06c75"
+			}
+		},
+		{
+			"scope": [
+				"keyword",
+				"keyword.control",
+				"storage.type.class.jsdoc"
+			],
+			"settings": {
+				"foreground": "#c678dd"
+			}
+		},
+		{
+			"scope": [
+				"keyword.operator",
+				"keyword.operator.logical",
+				"keyword.operator.arithmetic",
+				"keyword.operator.assignment",
+				"keyword.operator.relational",
+				"keyword.operator.comparison"
+			],
+			"settings": {
+				"foreground": "#abb2bf"
+			}
+		},
+		{
+			"scope": [
+				"keyword.operator.new",
+				"keyword.operator.expression",
+				"keyword.operator.delete",
+				"keyword.operator.instanceof",
+				"keyword.operator.typeof"
+			],
+			"settings": {
+				"foreground": "#c678dd"
+			}
+		},
+		{
+			"scope": [
+				"storage",
+				"storage.type",
+				"storage.modifier",
+				"keyword.control.import",
+				"keyword.control.from",
+				"keyword.control.export"
+			],
+			"settings": {
+				"foreground": "#c678dd"
+			}
+		},
+		{
+			"scope": [
+				"entity.name.function",
+				"meta.function-call",
+				"support.function",
+				"meta.function-call.method"
+			],
+			"settings": {
+				"foreground": "#61afef"
+			}
+		},
+		{
+			"scope": [
+				"entity.name.class",
+				"entity.name.type",
+				"entity.name.type.class",
+				"support.class"
+			],
+			"settings": {
+				"foreground": "#e5c07b"
+			}
+		},
+		{
+			"scope": [
+				"entity.other.inherited-class"
+			],
+			"settings": {
+				"foreground": "#98c379"
+			}
+		},
+		{
+			"scope": [
+				"entity.name.tag",
+				"punctuation.definition.tag"
+			],
+			"settings": {
+				"foreground": "#e06c75"
+			}
+		},
+		{
+			"scope": [
+				"entity.other.attribute-name"
+			],
+			"settings": {
+				"foreground": "#d19a66"
+			}
+		},
+		{
+			"scope": [
+				"support.constant",
+				"support.type",
+				"support.type.builtin"
+			],
+			"settings": {
+				"foreground": "#56b6c2"
+			}
+		},
+		{
+			"scope": [
+				"punctuation",
+				"meta.brace",
+				"punctuation.separator",
+				"punctuation.terminator",
+				"punctuation.accessor"
+			],
+			"settings": {
+				"foreground": "#abb2bf"
+			}
+		},
+		{
+			"scope": [
+				"punctuation.definition.template-expression",
+				"punctuation.section.embedded"
+			],
+			"settings": {
+				"foreground": "#c678dd"
+			}
+		},
+		{
+			"scope": [
+				"meta.decorator",
+				"punctuation.decorator",
+				"entity.name.function.decorator"
+			],
+			"settings": {
+				"foreground": "#61afef"
+			}
+		},
+		{
+			"scope": [
+				"invalid",
+				"invalid.illegal"
+			],
+			"settings": {
+				"foreground": "#ffffff",
+				"background": "#e06c75"
+			}
+		},
+		{
+			"scope": [
+				"markup.heading",
+				"entity.name.section.markdown",
+				"punctuation.definition.heading.markdown"
+			],
+			"settings": {
+				"foreground": "#e06c75",
+				"fontStyle": "bold"
+			}
+		},
+		{
+			"scope": [
+				"markup.bold"
+			],
+			"settings": {
+				"foreground": "#d19a66",
+				"fontStyle": "bold"
+			}
+		},
+		{
+			"scope": [
+				"markup.italic"
+			],
+			"settings": {
+				"foreground": "#c678dd",
+				"fontStyle": "italic"
+			}
+		},
+		{
+			"scope": [
+				"markup.inline.raw",
+				"markup.fenced_code.block",
+				"markup.raw.block"
+			],
+			"settings": {
+				"foreground": "#98c379"
+			}
+		},
+		{
+			"scope": [
+				"markup.underline.link",
+				"markup.underline.link.image"
+			],
+			"settings": {
+				"foreground": "#61afef",
+				"fontStyle": "underline"
+			}
+		},
+		{
+			"scope": [
+				"markup.list",
+				"punctuation.definition.list.begin.markdown"
+			],
+			"settings": {
+				"foreground": "#e06c75"
+			}
+		},
+		{
+			"scope": [
+				"markup.quote"
+			],
+			"settings": {
+				"foreground": "#5c6370",
+				"fontStyle": "italic"
+			}
+		},
+		{
+			"scope": [
+				"meta.tag.sgml.doctype",
+				"comment.block.documentation"
+			],
+			"settings": {
+				"foreground": "#5c6370"
+			}
+		},
+		{
+			"scope": [
+				"support.type.property-name.json",
+				"support.type.property-name.json punctuation"
+			],
+			"settings": {
+				"foreground": "#e06c75"
+			}
+		},
+		{
+			"scope": [
+				"entity.name.tag.css",
+				"source.css support.type.property-name"
+			],
+			"settings": {
+				"foreground": "#e5c07b"
+			}
+		},
+		{
+			"scope": [
+				"meta.attribute-selector.css",
+				"entity.other.attribute-name.class.css",
+				"entity.other.attribute-name.id.css"
+			],
+			"settings": {
+				"foreground": "#d19a66"
+			}
+		}
+	],
+	"semanticTokenColors": {
+		"parameter": "#abb2bf",
+		"property": "#e06c75",
+		"variable.defaultLibrary": "#56b6c2",
+		"function.defaultLibrary": "#61afef",
+		"class": "#e5c07b",
+		"enum": "#e5c07b",
+		"interface": "#e5c07b",
+		"namespace": "#abb2bf"
+	}
+}
diff --git a/web/theme/levelcode-web-theme/themes/web-light.json b/web/theme/levelcode-web-theme/themes/web-light.json
new file mode 100644
index 0000000..9680f98
--- /dev/null
+++ b/web/theme/levelcode-web-theme/themes/web-light.json
@@ -0,0 +1,566 @@
+{
+	"name": "LevelCode Web Light",
+	"type": "light",
+	"semanticHighlighting": true,
+	"colors": {
+		"foreground": "#1b1c22",
+		"descriptionForeground": "#52555f",
+		"disabledForeground": "#8a8d99",
+		"errorForeground": "#c8343f",
+		"focusBorder": "#6847b8cc",
+		"widget.shadow": "#00000026",
+		"widget.border": "#0000001a",
+		"selection.background": "#6847b855",
+		"icon.foreground": "#52555f",
+		"sash.hoverBorder": "#6847b8",
+		"toolbar.hoverBackground": "#0000000a",
+		"toolbar.activeBackground": "#00000012",
+		"textLink.foreground": "#5b3fb0",
+		"textLink.activeForeground": "#5b3fb0",
+		"textCodeBlock.background": "#ffffff",
+		"textBlockQuote.background": "#ffffff",
+		"textBlockQuote.border": "#00000024",
+		"textPreformat.foreground": "#1b1c22",
+		"progressBar.background": "#6847b8",
+		"sideBySideEditor.horizontalBorder": "#0000001a",
+		"sideBySideEditor.verticalBorder": "#0000001a",
+		"editor.background": "#ffffff",
+		"editor.foreground": "#1b1c22",
+		"editorLineNumber.foreground": "#8a8d99",
+		"editorLineNumber.activeForeground": "#52555f",
+		"editorCursor.foreground": "#6847b8",
+		"editor.lineHighlightBackground": "#0000000a",
+		"editor.lineHighlightBorder": "#00000000",
+		"editor.selectionBackground": "#6847b840",
+		"editor.inactiveSelectionBackground": "#6847b826",
+		"editor.selectionHighlightBackground": "#6847b826",
+		"editor.wordHighlightBackground": "#00000012",
+		"editor.wordHighlightStrongBackground": "#6847b833",
+		"editor.findMatchBackground": "#6847b855",
+		"editor.findMatchHighlightBackground": "#6847b833",
+		"editor.findRangeHighlightBackground": "#0000000a",
+		"editor.hoverHighlightBackground": "#0000000a",
+		"editor.rangeHighlightBackground": "#0000000a",
+		"editorWhitespace.foreground": "#0000001a",
+		"editorIndentGuide.background1": "#0000001a",
+		"editorIndentGuide.activeBackground1": "#00000040",
+		"editorBracketMatch.background": "#6847b833",
+		"editorBracketMatch.border": "#00000000",
+		"editorGutter.background": "#ffffff",
+		"editorRuler.foreground": "#0000001a",
+		"editorLink.activeForeground": "#5b3fb0",
+		"editorOverviewRuler.border": "#00000000",
+		"editorError.foreground": "#c8343f",
+		"editorWarning.foreground": "#a36a00",
+		"editorInfo.foreground": "#2563c9",
+		"editorWidget.background": "#ffffff",
+		"editorWidget.border": "#00000024",
+		"editorWidget.foreground": "#1b1c22",
+		"editorSuggestWidget.background": "#ffffff",
+		"editorSuggestWidget.border": "#00000024",
+		"editorSuggestWidget.selectedBackground": "#00000012",
+		"editorSuggestWidget.highlightForeground": "#5b3fb0",
+		"editorHoverWidget.background": "#ffffff",
+		"editorHoverWidget.border": "#00000024",
+		"editorGroup.border": "#0000001a",
+		"editorGroup.dropBackground": "#6847b822",
+		"editorGroupHeader.tabsBackground": "#f3f3f6",
+		"editorGroupHeader.tabsBorder": "#00000000",
+		"editorGroupHeader.noTabsBackground": "#ffffff",
+		"breadcrumb.foreground": "#8a8d99",
+		"breadcrumb.focusForeground": "#1b1c22",
+		"breadcrumb.activeSelectionForeground": "#1b1c22",
+		"breadcrumbPicker.background": "#ffffff",
+		"minimap.background": "#ffffff",
+		"diffEditor.insertedTextBackground": "#2f8a4c24",
+		"diffEditor.removedTextBackground": "#c8343f24",
+		"diffEditor.insertedLineBackground": "#2f8a4c14",
+		"diffEditor.removedLineBackground": "#c8343f14",
+		"editorGutter.addedBackground": "#2f8a4c",
+		"editorGutter.modifiedBackground": "#2563c9",
+		"editorGutter.deletedBackground": "#c8343f",
+		"scrollbarSlider.background": "#1b1c221f",
+		"scrollbarSlider.hoverBackground": "#1b1c2233",
+		"scrollbarSlider.activeBackground": "#1b1c2247",
+		"scrollbar.shadow": "#00000000",
+		"tab.activeBackground": "#ffffff",
+		"tab.inactiveBackground": "#f3f3f6",
+		"tab.activeForeground": "#1b1c22",
+		"tab.inactiveForeground": "#52555f",
+		"tab.unfocusedActiveForeground": "#52555f",
+		"tab.unfocusedInactiveForeground": "#8a8d99",
+		"tab.border": "#f3f3f6",
+		"tab.lastPinnedBorder": "#0000001a",
+		"tab.activeBorder": "#00000000",
+		"tab.activeBorderTop": "#00000000",
+		"tab.unfocusedActiveBorder": "#00000000",
+		"tab.unfocusedActiveBorderTop": "#00000000",
+		"tab.hoverBackground": "#0000000a",
+		"tab.unfocusedHoverBackground": "#0000000a",
+		"tab.activeModifiedBorder": "#6847b8",
+		"tab.inactiveModifiedBorder": "#6847b899",
+		"sideBar.background": "#f3f3f6",
+		"sideBar.foreground": "#52555f",
+		"sideBar.border": "#0000001a",
+		"sideBarTitle.foreground": "#1b1c22",
+		"sideBarSectionHeader.background": "#00000000",
+		"sideBarSectionHeader.foreground": "#1b1c22",
+		"sideBarSectionHeader.border": "#0000001a",
+		"activityBar.background": "#f3f3f6",
+		"activityBar.foreground": "#1b1c22",
+		"activityBar.inactiveForeground": "#8a8d99",
+		"activityBar.border": "#0000001a",
+		"activityBar.activeBorder": "#6847b8",
+		"activityBar.activeBackground": "#00000000",
+		"activityBarBadge.background": "#6847b8",
+		"activityBarBadge.foreground": "#ffffff",
+		"titleBar.activeBackground": "#f3f3f6",
+		"titleBar.activeForeground": "#52555f",
+		"titleBar.inactiveBackground": "#f3f3f6",
+		"titleBar.inactiveForeground": "#8a8d99",
+		"titleBar.border": "#0000001a",
+		"statusBar.background": "#f3f3f6",
+		"statusBar.foreground": "#52555f",
+		"statusBar.border": "#0000001a",
+		"statusBar.noFolderBackground": "#f3f3f6",
+		"statusBar.noFolderForeground": "#52555f",
+		"statusBar.debuggingBackground": "#6847b8",
+		"statusBar.debuggingForeground": "#ffffff",
+		"statusBarItem.hoverBackground": "#00000012",
+		"statusBarItem.activeBackground": "#00000012",
+		"statusBarItem.remoteBackground": "#6847b8",
+		"statusBarItem.remoteForeground": "#ffffff",
+		"statusBarItem.prominentBackground": "#00000012",
+		"panel.background": "#ffffff",
+		"panel.border": "#0000001a",
+		"panelTitle.activeForeground": "#1b1c22",
+		"panelTitle.inactiveForeground": "#8a8d99",
+		"panelTitle.activeBorder": "#6847b8",
+		"panelSectionHeader.background": "#00000000",
+		"panelSection.border": "#0000001a",
+		"agentsPanel.background": "#f3f3f6",
+		"agentsPanel.foreground": "#52555f",
+		"agentsPanel.border": "#0000001a",
+		"input.background": "#ffffff",
+		"input.foreground": "#1b1c22",
+		"input.border": "#00000024",
+		"input.placeholderForeground": "#8a8d99",
+		"inputOption.activeBorder": "#6847b8",
+		"inputOption.activeBackground": "#6847b833",
+		"inputOption.activeForeground": "#1b1c22",
+		"inputValidation.errorBackground": "#c8343f22",
+		"inputValidation.errorBorder": "#c8343f",
+		"inputValidation.warningBackground": "#a36a0022",
+		"inputValidation.warningBorder": "#a36a00",
+		"inputValidation.infoBackground": "#2563c922",
+		"inputValidation.infoBorder": "#2563c9",
+		"dropdown.background": "#ffffff",
+		"dropdown.foreground": "#1b1c22",
+		"dropdown.border": "#00000024",
+		"dropdown.listBackground": "#ffffff",
+		"button.background": "#6847b8",
+		"button.foreground": "#ffffff",
+		"button.hoverBackground": "#5a3aa6",
+		"button.secondaryBackground": "#00000012",
+		"button.secondaryForeground": "#1b1c22",
+		"button.secondaryHoverBackground": "#00000024",
+		"button.border": "#00000000",
+		"badge.background": "#6847b8",
+		"badge.foreground": "#ffffff",
+		"checkbox.background": "#ffffff",
+		"checkbox.border": "#00000040",
+		"checkbox.foreground": "#1b1c22",
+		"list.activeSelectionBackground": "#6847b833",
+		"list.activeSelectionForeground": "#1b1c22",
+		"list.inactiveSelectionBackground": "#00000012",
+		"list.inactiveSelectionForeground": "#1b1c22",
+		"list.hoverBackground": "#0000000a",
+		"list.hoverForeground": "#1b1c22",
+		"list.focusBackground": "#6847b826",
+		"list.focusOutline": "#6847b8aa",
+		"list.highlightForeground": "#5b3fb0",
+		"list.errorForeground": "#c8343f",
+		"list.warningForeground": "#a36a00",
+		"list.dropBackground": "#6847b822",
+		"tree.indentGuidesStroke": "#0000001a",
+		"menu.background": "#ffffff",
+		"menu.foreground": "#1b1c22",
+		"menu.selectionBackground": "#00000012",
+		"menu.selectionForeground": "#1b1c22",
+		"menu.separatorBackground": "#0000001a",
+		"menu.border": "#00000024",
+		"quickInput.background": "#ffffff",
+		"quickInput.foreground": "#1b1c22",
+		"quickInputTitle.background": "#ffffff",
+		"quickInputList.focusBackground": "#6847b833",
+		"quickInputList.focusForeground": "#1b1c22",
+		"pickerGroup.foreground": "#5b3fb0",
+		"pickerGroup.border": "#0000001a",
+		"notifications.background": "#ffffff",
+		"notifications.foreground": "#1b1c22",
+		"notifications.border": "#00000024",
+		"notificationCenterHeader.background": "#ffffff",
+		"notificationToast.border": "#00000024",
+		"notificationLink.foreground": "#5b3fb0",
+		"peekView.border": "#6847b8",
+		"peekViewEditor.background": "#ffffff",
+		"peekViewResult.background": "#f3f3f6",
+		"peekViewTitle.background": "#f3f3f6",
+		"settings.headerForeground": "#1b1c22",
+		"settings.modifiedItemIndicator": "#6847b8",
+		"settings.dropdownBackground": "#ffffff",
+		"settings.textInputBackground": "#ffffff",
+		"welcomePage.background": "#ffffff",
+		"walkThrough.embeddedEditorBackground": "#ffffff",
+		"gitDecoration.modifiedResourceForeground": "#2563c9",
+		"gitDecoration.untrackedResourceForeground": "#2f8a4c",
+		"gitDecoration.deletedResourceForeground": "#c8343f",
+		"gitDecoration.ignoredResourceForeground": "#8a8d99",
+		"gitDecoration.conflictingResourceForeground": "#a36a00",
+		"terminal.background": "#ffffff",
+		"terminal.foreground": "#1b1c22",
+		"terminal.selectionBackground": "#6847b840",
+		"terminalCursor.foreground": "#6847b8",
+		"terminal.border": "#0000001a",
+		"terminal.tab.activeBorder": "#6847b8",
+		"terminal.ansiBlack": "#1b1c22",
+		"terminal.ansiRed": "#c8343f",
+		"terminal.ansiGreen": "#2f8a4c",
+		"terminal.ansiYellow": "#a36a00",
+		"terminal.ansiBlue": "#2563c9",
+		"terminal.ansiMagenta": "#7b4fc8",
+		"terminal.ansiCyan": "#0e7a86",
+		"terminal.ansiWhite": "#d6d7de",
+		"terminal.ansiBrightBlack": "#6f7280",
+		"terminal.ansiBrightRed": "#d9535c",
+		"terminal.ansiBrightGreen": "#43a363",
+		"terminal.ansiBrightYellow": "#b98100",
+		"terminal.ansiBrightBlue": "#3b7ae0",
+		"terminal.ansiBrightMagenta": "#9266de",
+		"terminal.ansiBrightCyan": "#1e91a0",
+		"terminal.ansiBrightWhite": "#ffffff"
+	},
+	"tokenColors": [
+		{
+			"scope": [
+				"comment",
+				"punctuation.definition.comment"
+			],
+			"settings": {
+				"foreground": "#a0a1a7",
+				"fontStyle": "italic"
+			}
+		},
+		{
+			"scope": [
+				"string",
+				"punctuation.definition.string"
+			],
+			"settings": {
+				"foreground": "#50a14f"
+			}
+		},
+		{
+			"scope": [
+				"string.regexp",
+				"constant.character.escape"
+			],
+			"settings": {
+				"foreground": "#0184bc"
+			}
+		},
+		{
+			"scope": [
+				"constant.numeric",
+				"constant.language",
+				"constant.character",
+				"constant.other"
+			],
+			"settings": {
+				"foreground": "#986801"
+			}
+		},
+		{
+			"scope": [
+				"constant.language.boolean",
+				"constant.language.null",
+				"constant.language.undefined"
+			],
+			"settings": {
+				"foreground": "#986801"
+			}
+		},
+		{
+			"scope": [
+				"variable",
+				"meta.definition.variable.name",
+				"support.variable",
+				"entity.name.variable"
+			],
+			"settings": {
+				"foreground": "#e45649"
+			}
+		},
+		{
+			"scope": [
+				"variable.parameter",
+				"meta.function.parameters"
+			],
+			"settings": {
+				"foreground": "#383a42"
+			}
+		},
+		{
+			"scope": [
+				"variable.language",
+				"variable.language.this",
+				"variable.language.special"
+			],
+			"settings": {
+				"foreground": "#e45649",
+				"fontStyle": "italic"
+			}
+		},
+		{
+			"scope": [
+				"variable.other.property",
+				"meta.object-literal.key",
+				"support.variable.property",
+				"support.type.property-name"
+			],
+			"settings": {
+				"foreground": "#e45649"
+			}
+		},
+		{
+			"scope": [
+				"keyword",
+				"keyword.control"
+			],
+			"settings": {
+				"foreground": "#a626a4"
+			}
+		},
+		{
+			"scope": [
+				"keyword.operator",
+				"keyword.operator.logical",
+				"keyword.operator.arithmetic",
+				"keyword.operator.assignment",
+				"keyword.operator.relational",
+				"keyword.operator.comparison"
+			],
+			"settings": {
+				"foreground": "#383a42"
+			}
+		},
+		{
+			"scope": [
+				"keyword.operator.new",
+				"keyword.operator.expression",
+				"keyword.operator.delete",
+				"keyword.operator.instanceof",
+				"keyword.operator.typeof"
+			],
+			"settings": {
+				"foreground": "#a626a4"
+			}
+		},
+		{
+			"scope": [
+				"storage",
+				"storage.type",
+				"storage.modifier",
+				"keyword.control.import",
+				"keyword.control.from",
+				"keyword.control.export"
+			],
+			"settings": {
+				"foreground": "#a626a4"
+			}
+		},
+		{
+			"scope": [
+				"entity.name.function",
+				"meta.function-call",
+				"support.function",
+				"meta.function-call.method"
+			],
+			"settings": {
+				"foreground": "#4078f2"
+			}
+		},
+		{
+			"scope": [
+				"entity.name.class",
+				"entity.name.type",
+				"entity.name.type.class",
+				"support.class"
+			],
+			"settings": {
+				"foreground": "#c18401"
+			}
+		},
+		{
+			"scope": [
+				"entity.other.inherited-class"
+			],
+			"settings": {
+				"foreground": "#50a14f"
+			}
+		},
+		{
+			"scope": [
+				"entity.name.tag",
+				"punctuation.definition.tag"
+			],
+			"settings": {
+				"foreground": "#e45649"
+			}
+		},
+		{
+			"scope": [
+				"entity.other.attribute-name"
+			],
+			"settings": {
+				"foreground": "#986801"
+			}
+		},
+		{
+			"scope": [
+				"support.constant",
+				"support.type",
+				"support.type.builtin"
+			],
+			"settings": {
+				"foreground": "#0184bc"
+			}
+		},
+		{
+			"scope": [
+				"punctuation",
+				"meta.brace",
+				"punctuation.separator",
+				"punctuation.terminator",
+				"punctuation.accessor"
+			],
+			"settings": {
+				"foreground": "#383a42"
+			}
+		},
+		{
+			"scope": [
+				"punctuation.definition.template-expression",
+				"punctuation.section.embedded"
+			],
+			"settings": {
+				"foreground": "#a626a4"
+			}
+		},
+		{
+			"scope": [
+				"meta.decorator",
+				"punctuation.decorator",
+				"entity.name.function.decorator"
+			],
+			"settings": {
+				"foreground": "#4078f2"
+			}
+		},
+		{
+			"scope": [
+				"invalid",
+				"invalid.illegal"
+			],
+			"settings": {
+				"foreground": "#ffffff",
+				"background": "#e45649"
+			}
+		},
+		{
+			"scope": [
+				"markup.heading",
+				"entity.name.section.markdown",
+				"punctuation.definition.heading.markdown"
+			],
+			"settings": {
+				"foreground": "#e45649",
+				"fontStyle": "bold"
+			}
+		},
+		{
+			"scope": [
+				"markup.bold"
+			],
+			"settings": {
+				"foreground": "#986801",
+				"fontStyle": "bold"
+			}
+		},
+		{
+			"scope": [
+				"markup.italic"
+			],
+			"settings": {
+				"foreground": "#a626a4",
+				"fontStyle": "italic"
+			}
+		},
+		{
+			"scope": [
+				"markup.inline.raw",
+				"markup.fenced_code.block",
+				"markup.raw.block"
+			],
+			"settings": {
+				"foreground": "#50a14f"
+			}
+		},
+		{
+			"scope": [
+				"markup.underline.link",
+				"markup.underline.link.image"
+			],
+			"settings": {
+				"foreground": "#4078f2",
+				"fontStyle": "underline"
+			}
+		},
+		{
+			"scope": [
+				"markup.quote"
+			],
+			"settings": {
+				"foreground": "#a0a1a7",
+				"fontStyle": "italic"
+			}
+		},
+		{
+			"scope": [
+				"support.type.property-name.json"
+			],
+			"settings": {
+				"foreground": "#e45649"
+			}
+		},
+		{
+			"scope": [
+				"entity.name.tag.css",
+				"source.css support.type.property-name"
+			],
+			"settings": {
+				"foreground": "#c18401"
+			}
+		}
+	],
+	"semanticTokenColors": {
+		"parameter": "#383a42",
+		"property": "#e45649",
+		"variable.defaultLibrary": "#0184bc",
+		"function.defaultLibrary": "#4078f2",
+		"class": "#c18401",
+		"enum": "#c18401",
+		"interface": "#c18401",
+		"namespace": "#383a42"
+	}
+}
diff --git a/web/workspace/extension.js b/web/workspace/extension.js
index 66fb217..2c96b1f 100644
--- a/web/workspace/extension.js
+++ b/web/workspace/extension.js
@@ -387,6 +387,46 @@ async function activate(context) {
 	refresh();
 	context.subscriptions.push(item, vscode.workspace.onDidChangeWorkspaceFolders(refresh));
 
+	// The layout switch: a status-bar item and three commands. The commands only change the setting; one listener
+	// applies it, so the same thing happens whether it was chosen here, in a menu or in Settings.
+	const layoutItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Left, 49);
+	layoutItem.command = 'levelcode.web.layout.toggle';
+	const showLayout = () => {
+		const mode = currentLayout(vscode);
+		layoutItem.text = mode === 'split' ? '$(layout-sidebar-right) Editor + chat' : '$(layout-centered) Chat';
+		layoutItem.tooltip = mode === 'split'
+			? 'Layout: Explorer, files and the chat on the right. Click for the chat on its own.'
+			: 'Layout: the chat on its own. Click for Explorer, files and the chat on the right.';
+	};
+	showLayout();
+	layoutItem.show();
+	const setLayout = (mode) => vscode.workspace.getConfiguration('levelcode.web').update('layout', mode, vscode.ConfigurationTarget.Global);
+	context.subscriptions.push(
+		layoutItem,
+		vscode.workspace.onDidChangeConfiguration((e) => {
+			if (!e.affectsConfiguration('levelcode.web.layout')) { return; }
+			showLayout();
+			applyLayout(vscode, currentLayout(vscode)).catch(() => undefined);
+		}),
+		vscode.commands.registerCommand('levelcode.web.layout.chatFirst', async () => {
+			if (currentLayout(vscode) === 'chatFirst') { await applyLayout(vscode, 'chatFirst'); } else { await setLayout('chatFirst'); }
+		}),
+		vscode.commands.registerCommand('levelcode.web.layout.split', async () => {
+			if (currentLayout(vscode) === 'split') { await applyLayout(vscode, 'split'); } else { await setLayout('split'); }
+		}),
+		vscode.commands.registerCommand('levelcode.web.layout.toggle', () => setLayout(currentLayout(vscode) === 'split' ? 'chatFirst' : 'split')),
+	);
+	// At start-up: the first time, the layout chosen by default; after that only the one the workbench does not
+	// remember by itself — the chat panel is not restored on reload, so a docked chat has to be docked again.
+	setTimeout(async () => {
+		try {
+			const mode = currentLayout(vscode);
+			const first = !context.globalState.get('levelcode.web.layoutApplied');
+			if (mode === 'split' || first) { await applyLayout(vscode, mode); }
+			await context.globalState.update('levelcode.web.layoutApplied', true);
+		} catch { /* the window is usable as it is */ }
+	}, 1800);
+
 	context.subscriptions.push(
 		vscode.commands.registerCommand('levelcode.web.openLocalFolder', () => openLocalFolder(vscode)),
 		vscode.commands.registerCommand('levelcode.web.openScratch', () => vscode.commands.executeCommand(
@@ -401,6 +441,71 @@ async function activate(context) {
 	);
 }
 
+/* ----- layout ----------------------------------------------------------------------------- */
+
+/** The view type the workbench gives LevelCode's chat panel (the key workbench.editor.autoLockGroups is set with). */
+const CHAT_VIEW_TYPE = 'mainThreadWebview-levelcode.ai.chat';
+const LAYOUTS = ['chatFirst', 'split'];
+
+/**
+ * The tab group holding LevelCode's chat, if it is open.
+ * @param {typeof import('vscode')} api
+ */
+function chatGroup(api) {
+	for (const g of api.window.tabGroups.all) {
+		for (const t of g.tabs) {
+			const input = t.input;
+			if (input && typeof input === 'object' && input.viewType === CHAT_VIEW_TYPE) { return g; }
+		}
+	}
+	return undefined;
+}
+
+/**
+ * Arrange the window for one of the two ways of working:
+ *   chatFirst  the chat alone, in the middle, with its conversation list on its left — the way a chat app is used
+ *   split      the Explorer, the files, and the chat docked on the right — the way an editor is used
+ * Only existing workbench commands are used, so the layout the user then adjusts by hand is an ordinary one.
+ *
+ * @param {typeof import('vscode')} api
+ * @param {'chatFirst'|'split'} mode
+ */
+async function applyLayout(api, mode) {
+	const run = (id, ...args) => api.commands.executeCommand(id, ...args);
+	await run('levelcode.ai.focus');   // the chat, taking the focus, in whichever group it is (or the active one)
+	const group = chatGroup(api);
+	const groups = api.window.tabGroups.all;
+	if (mode === 'chatFirst') {
+		// Bring the chat back from a side group, and put the side bars away: the page is the conversation.
+		if (group && groups.length > 1 && group.viewColumn !== groups[0].viewColumn) { await run('workbench.action.moveEditorToFirstGroup'); }
+		await run('workbench.action.closeSidebar');
+		await run('workbench.action.closePanel');
+		await run('workbench.action.closeAuxiliaryBar');
+		return;
+	}
+	// split: the chat in a group of its own on the right (the setting locks it there, so files open beside it),
+	// the Explorer on the left, and a file in the group that is left. The file comes FIRST: a group that is
+	// emptied by moving the chat out of it is closed, and the chat would be alone again.
+	if (group && groups.length < 2) {
+		const found = await api.workspace.findFiles('README.md', undefined, 1);
+		if (found.length) { await api.window.showTextDocument(found[0], { viewColumn: api.ViewColumn.One, preserveFocus: true, preview: false }); }
+		await run('levelcode.ai.focus');
+		await run('workbench.action.moveEditorToRightGroup');
+	} else if (group && group.tabs.length > 1 && group.viewColumn !== groups[groups.length - 1].viewColumn) {
+		// A reload brings the two groups back, but the chat is opened again in the first of them, next to a file
+		// (the right one is empty and, being empty, not the place the setting that keeps files out of the chat's
+		// group has had a chance to claim). Dock it.
+		await run('workbench.action.moveEditorToRightGroup');
+	}
+	await run('workbench.view.explorer');
+}
+
+/** @param {typeof import('vscode')} api */
+function currentLayout(api) {
+	const v = api.workspace.getConfiguration('levelcode.web').get('layout', 'chatFirst');
+	return LAYOUTS.includes(v) ? v : 'chatFirst';
+}
+
 /**
  * Open a folder from the user's computer: the browser's own directory picker, then that folder as the workspace.
  *
@@ -429,4 +534,4 @@ async function openLocalFolder(api) {
 
 function deactivate() { }
 
-module.exports = { activate, deactivate, openLocalFolder };
+module.exports = { activate, deactivate, openLocalFolder, applyLayout, currentLayout, chatGroup, LAYOUTS };
diff --git a/web/workspace/package.json b/web/workspace/package.json
index 601a191..2260913 100644
--- a/web/workspace/package.json
+++ b/web/workspace/package.json
@@ -18,7 +18,28 @@
 		"commands": [
 			{ "command": "levelcode.web.openLocalFolder", "title": "Open Folder from Your Computer…", "category": "LevelCode" },
 			{ "command": "levelcode.web.openScratch", "title": "Open the Scratch Workspace", "category": "LevelCode" },
-			{ "command": "levelcode.web.aboutScratch", "title": "About the Scratch Workspace", "category": "LevelCode" }
+			{ "command": "levelcode.web.aboutScratch", "title": "About the Scratch Workspace", "category": "LevelCode" },
+			{ "command": "levelcode.web.layout.chatFirst", "title": "Layout: Chat on Its Own", "category": "LevelCode" },
+			{ "command": "levelcode.web.layout.split", "title": "Layout: Explorer, Files and Chat", "category": "LevelCode" },
+			{ "command": "levelcode.web.layout.toggle", "title": "Layout: Switch", "category": "LevelCode" }
+		],
+		"configuration": {
+			"title": "LevelCode Web",
+			"properties": {
+				"levelcode.web.layout": {
+					"type": "string",
+					"enum": ["chatFirst", "split"],
+					"default": "chatFirst",
+					"enumDescriptions": [
+						"The chat on its own, with the conversation list beside it.",
+						"The Explorer and the files, with the chat docked on the right."
+					],
+					"markdownDescription": "How the window is arranged. Also in the status bar and in the Command Palette under **LevelCode: Layout**."
+				}
+			}
+		},
+		"keybindings": [
+			{ "command": "levelcode.web.layout.toggle", "key": "ctrl+alt+l", "mac": "cmd+alt+l" }
 		]
 	}
 }

From b10b6c979cacbc55945462f923f75991bb6fbfd0 Mon Sep 17 00:00:00 2001
From: Sergii Demianchuk <sergeydemjanchyk@gmail.com>
Date: Sat, 10 Oct 2026 15:36:38 -0400
Subject: [PATCH 2/2] web(look): fixes from an independent review of the look

An agent review that RAN the build (44 findings, each independently
verified) found real defects in the first commit. Fixed:

Layout (web/workspace)
- The switch read the tab model before the extension host had the chat's
  tab, so closing the chat and clicking "Editor + chat" left it undocked:
  wait on onDidChangeTabs, and for the chat to be the active editor.
- A later choice now stops an earlier arrangement still waiting (the
  start-up one resumed and put the chat back on the right).
- A reload's restored empty group is closed on the way to chat-first;
  columns, not list order, say which group is on the left.
- Start-up no longer reveals the Explorer or moves focus after the first
  time in a workspace (workspaceState, not globalState).
- The layout commands and the folder command are registered before the
  store is opened, so a browser that refuses IndexedDB still has them.
- Opening a folder from the computer sets the editor layout.
- No default key binding (Cmd+Alt+L is Find in Selection on macOS).

Chat skin
- Card actions revealed on hover only where there is hover; a tap landed
  on rename/delete. Enter/Space resume a card. aria-modal off the docked
  list; a /sessions-opened overlay no longer reappears as a modal.
- Accent text and the focus ring use the link colour (was 2.2-2.7:1).
- The footer row is no longer dimmed with opacity (it dimmed its popover).
- The rail and the account card take the theme's palette; the sign-in
  dialog scrolls in a short window; the empty state is not clipped; the
  chat paints its own ground; starters make sense with no file open.

Workbench
- Code-OSS's own Chat view is hidden for real: create() returns a
  disposable, so workbench.commands was undefined and the first attempt
  never ran. The gate key is set through the module's commands, again
  after the gate's own write at 5 s. The title-bar toggle is hidden.
- editor.padding.top: 24 (the scroll shadow washed out line one).
- No page-level color-scheme: stock webviews (Markdown preview) were
  white under a dark theme.
- The build id covers the declarative built-ins' sources.

Tests: unit 73 files on macOS and Linux Node 18; e2e-look 26 checks, ten
runs in a row; the other end-to-end checks unchanged. The test helper
retries F1 (a key sent while the chat takes the focus is lost).
---
 CLAUDE.md                        |   3 +
 docs/WEB.md                      |  36 +++++-
 scripts/build-web.mjs            |  17 ++-
 web/ai-extension/copy.js         |   4 +
 web/ai-extension/skin/chat.css   |  53 +++++++-
 web/ai-extension/skin/chat.js    |  24 +++-
 web/boot.css                     |   1 -
 web/chrome.css                   |   5 +
 web/index.html                   |   1 -
 web/lib/config.mjs               |   6 +-
 web/lib/extensions.mjs           |  33 +++--
 web/main.js                      |  26 ++--
 web/test/cdp.mjs                 |  16 +++
 web/test/e2e-byok.mjs            |   8 +-
 web/test/e2e-look.mjs            |  45 ++++++-
 web/test/e2e.mjs                 |  10 +-
 web/test/unit/extensions.test.js |  99 ++++++++++++++
 web/test/unit/main.test.js       |  17 ++-
 web/test/unit/skin.test.js       | 107 ++++++++++++++++
 web/test/unit/theme.test.js      |  26 ++--
 web/test/unit/workspace.test.js  | 146 ++++++++++++++++++++-
 web/workspace/extension.js       | 214 ++++++++++++++++++++++---------
 web/workspace/package.json       |   5 +-
 23 files changed, 768 insertions(+), 134 deletions(-)
 create mode 100644 web/test/unit/extensions.test.js

diff --git a/CLAUDE.md b/CLAUDE.md
index 50090b4..58b5c9b 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -107,6 +107,9 @@ the desktop app exactly as it was:
   Every skin rule is under `body.lc-web`. An extension's `configurationDefaults` outrank the embedder's, so
   `levelcode-themes`' pinned default theme is stripped from the staged copy (`withoutConfigurationDefaults`).
   `node web/test/e2e-look.mjs --dist dist-web --stub-port <port>` is the check; look at its screenshots (`--shots`).
+  The embedder's command API is the module's `commands` (`api.commands.executeCommand`): `create()` returns a
+  disposable, so `workbench.commands` is `undefined` — a helper that used it ran inside a `try` and silently did
+  nothing until a browser test asked for its effect.
 - The session store (`createSecretStorage`) belongs to every tab: no cache, one-key read-modify-write under a
   Web Lock. The refresh token is rotated on use; do not reintroduce a start-up snapshot.
 - Build: `node scripts/build-web.mjs --account <origin>` → `dist-web/`; serve with `node web/serve.mjs --dist dist-web`.
diff --git a/docs/WEB.md b/docs/WEB.md
index 81cbcb1..d4cdf03 100644
--- a/docs/WEB.md
+++ b/docs/WEB.md
@@ -104,21 +104,29 @@ extension, a stylesheet or a build-time edit of the browser build's own copy of
 | First paint | `initialColorTheme` in `web/lib/config.mjs`, picked by `pickInitialTheme` in `web/main.js` | The colours painted for the half second before the theme extension has loaded, so a dark visitor does not see a light flash. |
 | Default theme | `withoutConfigurationDefaults` in `web/lib/extensions.mjs` | An extension's `configurationDefaults` **outrank** the embedder's. `levelcode-themes` pins its own default theme, so the staged copy of it has that key removed (its two themes stay selectable). The desktop source is untouched. |
 | Panels, activity bar | `workbench.experimental.modernUI`, `workbench.activityBar.location: top`, `workbench.layoutControl.type: toggles` | Code-OSS's own switches. `modernUI` is **experimental**: if a bump renames or drops it the editor is still fine, only plainer (`e2e-look.mjs` still passes its theme and layout checks; its screenshots are the thing to look at). |
-| Chrome | `web/chrome.css`, linked by `main.js` **after** the workbench's stylesheet | Hides source control, run and extensions (this edition has none of them), the Outline and Timeline headers and the keyboard-layout status item. The selectors are workbench class names: when a bump stops matching them `e2e-look.mjs` fails on "not offered" rather than the icons quietly coming back. |
-| The workbench's own chat | `hideBuiltInChat` in `main.js` | Code-OSS's Copilot chat view appears in the secondary side bar on the web even with `chat.disableAIFeatures`; it is told it is disabled through an internal context key. Look for a "Chat" tab on the right on a bump. |
+| Chrome | `web/chrome.css`, linked by `main.js` **after** the workbench's stylesheet | Hides the activity-bar entries for source control, run and extensions (this edition has none of them), the Outline and Timeline headers, the keyboard-layout status item and the title bar's secondary-side-bar toggle. The selectors are workbench class names and aria labels: when a bump stops matching them `e2e-look.mjs` fails rather than the icons quietly coming back. Their **menus, palette entries and shortcuts are the workbench's own** and still lead to empty views (Run and Debug, Extensions, Source Control, an empty Terminal panel). |
+| The workbench's own chat | `hideBuiltInChat` in `main.js` | Code-OSS registers its Copilot Chat view on the web even with `chat.disableAIFeatures`, and opened it fills the window with a dead composer ("No default agent contributed"). Its `when` clause is gated by `chatAccountPolicyGateActive`, which nothing else reads; `main.js` sets it (and `chatSetupDisabledInWorkspace`) through the embedder's `commands.executeCommand('_setContext', …)` — the **module's** `commands`: `create()` returns a disposable, not the workbench — and again after five seconds, because the gate's own contribution writes its key again then. `e2e-look.mjs` opens the bar and fails on a "Chat" tab. |
+| Editor padding | `editor.padding.top: 24` | `modernUI` fades the top 24 px of every editor into the ground, line one included. |
+| No page-level `color-scheme` | `index.html`, `boot.css` | A page that declares `color-scheme: dark light` made every stock webview (the Markdown preview) paint an opaque *white* page under a dark theme. The chat page paints its own ground (`body.lc-web { background: … }`) for the same reason. |
 | Welcome page | `web/ai-extension/copy.js` | The desktop opens its walkthrough once, in front of everything. In a tab the chat is the first thing there is; the walkthrough stays in the Command Palette. |
 | The chat page | `web/ai-extension/skin.js` + `skin/chat.css` + `skin/chat.js` | Three exact insertions into the **embedded copy** of `media/chat.html`: a style block, `class="lc-web"` on `<body>`, a nonce'd script. Every rule is under `body.lc-web`; the script sends only messages the page already sends. The build **fails** if chat.html stops having the places the skin is cut into. The desktop's `chat.html` is never edited for this (the desktop suites pin it). |
 
 **Layouts.** `levelcode.web.layout` is `chatFirst` (the chat alone, side bars closed, conversations on its
 left — the way a chat app is used) or `split` (Explorer, files on the left, the chat docked on the right — the
-way an editor is used). The status bar item at the left, **LevelCode: Layout: Switch** and `Cmd/Ctrl+Alt+L`
-change the setting; one listener applies it, so Settings does the same. The first start is `chatFirst`. The
-chat panel is not restored by a reload, so a `split` layout is applied again at start. Only existing workbench
-commands are used, so what the visitor then arranges by hand is an ordinary layout.
+way an editor is used). The status bar item at the left and **LevelCode: Layout: Switch** change the setting
+(there is no default key binding: `Cmd+Alt+L` is Find in Selection on macOS); one listener applies it, so Settings
+does the same. The first start in a workspace is `chatFirst`. The chat panel is not restored by a reload, so a
+`split` layout docks the chat again at start — without revealing the Explorer or moving the focus (that is done
+once per workspace, `workspaceState`), so an Explorer the visitor closed stays closed. The start-up and a switch wait
+for the chat's tab to exist (`onDidChangeTabs`, 2.5 s) rather than reading the tab model at a guessed time. Only
+existing workbench commands are used, so what the visitor then arranges by hand is an ordinary layout. Files that are
+open when going back to `chatFirst` stay as tabs beside the chat.
 
 **Widths.** The chat page decides by **its own width**, not the window's: from 1000 px it docks the
 conversation list as a 264 px rail; below 760 px it compacts; in between the list is the dialog it is on the
-desktop. In `split` the chat is a narrower column, so it will usually be in the dialog form. The *workbench* is
+desktop. On a touch device (no hover) the rail's card actions are always shown, as in the dialog, and the second
+line gives way; with a mouse they appear on hover or focus. Enter and Space on a card resume it (the desktop's
+card is a `div` with a click handler only; the skin adds the keys). In `split` the chat is a narrower column, so it will usually be in the dialog form. The *workbench* is
 not responsive: below about 760 px the Explorer, tabs and status bar are the desktop's, and a phone is not a
 supported size for this edition yet.
 
@@ -129,6 +137,10 @@ Constraints worth knowing before changing it:
   **before** it moves the chat (`applyLayout`, pinned by `workspace.test.js`).
 - The rail asks the page for its conversations with `listSessions`; it must never call `openSessions()`,
   which seeds the list with sample conversations when nothing has arrived yet.
+- Text drawn in the theme's accent uses `textLink.foreground`, not `focusBorder` (which is translucent and a line
+  colour: 2.2–2.7:1 as text). The footer row is not dimmed with `opacity`: that dims its popovers as well.
+- `chat.html`'s own palettes for the conversation list and the account card (`--cc-*`, One Dark) are re-pointed at
+  the theme by the skin.
 
 ## Signing in
 
@@ -364,6 +376,16 @@ Say these out loud rather than discover them in production:
   landmark at wide widths and the dialog it already was below them.
 - **`workbench.experimental.modernUI` across a Code-OSS bump.** It is the workbench's own experimental flag; the
   pinned checkout was the only one run.
+- **The docked layout after a real browser reload.** `e2e-look.mjs` reloads through the debugger; the workbench
+  flushes the Explorer's visibility to its own storage on shutdown, and whether a closed tab always gets that
+  flush written was not measured. The layout is applied again at start (the chat docked), the side bar's state is
+  the workbench's.
+- **The Markdown preview's content.** The pane's ground is now the theme's (it was white); in headless Chrome the
+  preview's body rendered no text on the old and the new build alike, and that was not investigated.
+- **Known and left:** the Command Palette's "Chat: …" commands and the menus of features this edition lacks (above);
+  the empty Terminal panel behind the panel toggle (a terminal is the next stage, below); the chat page's
+  composer does not move with the soft keyboard on a phone; `levelcode.ai.chat.startLocation: none` is not
+  consulted by the layout.
 - **The operating system's folder picker itself.** It needs a person. Everything after it — the command, the
   workbench's `file` provider on a real `FileSystemDirectoryHandle`, the agent's list, read and write — is run
   (`web/test/e2e.mjs` section 5), with the origin-private file system standing in for the picker. Permission
diff --git a/scripts/build-web.mjs b/scripts/build-web.mjs
index baffad3..4772f16 100644
--- a/scripts/build-web.mjs
+++ b/scripts/build-web.mjs
@@ -22,7 +22,7 @@ import path from 'node:path';
 import { createHash } from 'node:crypto';
 import { fileURLToPath } from 'node:url';
 import { webConfig, renderIndex } from '../web/lib/config.mjs';
-import { stageDeclarativeExtensions, copyExtension, withoutConfigurationDefaults } from '../web/lib/extensions.mjs';
+import { stageDeclarativeExtensions, declarativeExtensionNames, copyExtension, withoutConfigurationDefaults, COPY_SKIP } from '../web/lib/extensions.mjs';
 import { policy, toHeadersFile, toNginx } from '../web/lib/headers.mjs';
 import { hashTree } from '../web/lib/fingerprint.mjs';
 
@@ -77,6 +77,21 @@ hashTree(fingerprint, path.join(WEB, 'ai-extension'), { skip: ['assets.generated
 hashTree(fingerprint, path.join(WEB, 'workspace'), { skip: ['node_modules', '.DS_Store'] });
 hashTree(fingerprint, path.join(WEB, 'theme'), { skip: ['.DS_Store'] });
 hashTree(fingerprint, path.join(WEB, 'lib'), { skip: ['.DS_Store'] });
+// The declarative built-ins are staged from the checkout's extensions/ (grammars, language configurations, the desktop's
+// themes — whose manifest this build rewrites): a changed grammar is a changed build, and so is the fallback copy of
+// the themes taken from this repository when the checkout has none.
+{
+	const baked = fs.existsSync(path.join(staticDir, 'extensions')) ? fs.readdirSync(path.join(staticDir, 'extensions')) : [];
+	const source = path.join(vscodeDir, 'extensions');
+	if (fs.existsSync(source)) {
+		for (const name of declarativeExtensionNames(source, [...baked, 'levelcode-ai', 'levelcode-web'])) {
+			fingerprint.update('\0ext\0' + name);
+			hashTree(fingerprint, path.join(source, name), { skip: [...COPY_SKIP, '.DS_Store'] });
+		}
+	}
+	const themes = path.join(REPO, 'extensions', 'levelcode-themes');
+	if (fs.existsSync(themes)) { hashTree(fingerprint, themes, { skip: [...COPY_SKIP, '.DS_Store'] }); }
+}
 const id = String(args.id || fingerprint.digest('hex').slice(0, 12));
 let gitHead = 'unknown';
 try { gitHead = execFileSync('git', ['-C', REPO, 'rev-parse', '--short=10', 'HEAD'], { encoding: 'utf8' }).trim(); } catch { /* not a checkout */ }
diff --git a/web/ai-extension/copy.js b/web/ai-extension/copy.js
index 86b53f9..eff43e2 100644
--- a/web/ai-extension/copy.js
+++ b/web/ai-extension/copy.js
@@ -24,6 +24,10 @@ const REPLACEMENTS = [
 	['extension.js',
 		"\tif (!context.globalState.get('levelcode.ai.didShowWelcome')) {",
 		"\tif (false) {   // browser edition: the chat is the first thing a visitor sees (web/ai-extension/copy.js)"],
+	// The conversation list is on the page's own rail in a tab, and the first thing beside an empty chat.
+	['media/chat.html',
+		'Every chat you have is saved here — automatically, on your machine.',
+		'Every chat you have is saved here — automatically, in this browser.'],
 	['media/chat.html',
 		'Bring your own API key, stored in your OS keychain.',
 		'Bring your own API key, stored encrypted in this browser.'],
diff --git a/web/ai-extension/skin/chat.css b/web/ai-extension/skin/chat.css
index a8bd261..a328c46 100644
--- a/web/ai-extension/skin/chat.css
+++ b/web/ai-extension/skin/chat.css
@@ -24,8 +24,18 @@ body.lc-web {
 }
 body.lc-web ::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
 
+/* The page paints its own ground. Left to the browser, a page that declares both colour schemes gets Chrome's
+   canvas (#121212 in dark), not the theme's editor colour. */
+body.lc-web { background: var(--vscode-editor-background); }
+
+/* --accent is the theme's focus border: translucent, and a line colour, not a text colour (2.2-2.7:1 as text on
+   the dark ground). Text that was drawn in it, and the focus ring, take the theme's link colour instead
+   (5.7:1 dark, 7.5:1 light). Fills keep --accent. */
+body.lc-web { --lcw-accent-text: var(--vscode-textLink-foreground, var(--accent)); }
+body.lc-web .msg .body a, body.lc-web .filechip .fcname, body.lc-web .modeopt.active .moname, body.lc-web #status .stap.autopilot { color: var(--lcw-accent-text); }
+
 /* ---- the empty chat: a hero and the composer in the middle of the page --------------------------- */
-body.lc-web:has(#empty) { justify-content: center; }
+body.lc-web:has(#empty) { justify-content: safe center; }
 body.lc-web:has(#empty) #log { flex: 0 0 auto; overflow: visible; padding-bottom: 0; }
 body.lc-web #empty { opacity: 1; padding: 0 0 22px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
 body.lc-web #empty .lc-ascii-wrap, body.lc-web #empty .lc-ascii-sub { display: none; }
@@ -47,8 +57,8 @@ body.lc-web #composer {
 	transition: border-color .15s, box-shadow .15s;
 }
 body.lc-web #composer:focus-within, body.lc-web #composer.focused {
-	border-color: color-mix(in srgb, var(--accent) 70%, var(--lcw-line-strong));
-	box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 10px 32px rgba(0, 0, 0, .18), 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
+	border-color: color-mix(in srgb, var(--lcw-accent-text) 80%, var(--lcw-line-strong));
+	box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 10px 32px rgba(0, 0, 0, .18), 0 0 0 3px color-mix(in srgb, var(--lcw-accent-text) 26%, transparent);
 }
 body.lc-web textarea#input { font-size: 15px; line-height: 1.5; min-height: 46px; background: transparent; border: 0; }
 body.lc-web #toolbar .tbtn { border-radius: 999px; }
@@ -63,16 +73,32 @@ body.lc-web #send:disabled { opacity: .35; }
 
 /* ---- the footer row: quiet, and the brand mark is not repeated ----------------------------------- */
 body.lc-web #status #lcLogo { display: none; }
-body.lc-web #status { opacity: .78; }
 
 /* ---- the conversation --------------------------------------------------------------------------- */
 body.lc-web .msg.user .body {
 	border: 0; border-radius: 20px; padding: 10px 16px; background: var(--lcw-soft-2); max-width: 82%; width: fit-content;
 }
-body.lc-web .msgcopy { opacity: .7; border-color: transparent; }
+body.lc-web .msgcopy { border-color: transparent; }
 body.lc-web pre, body.lc-web .codeblock { border-radius: 12px; }
 body.lc-web #reviewBar, body.lc-web #planBar { border-radius: 14px; }
 
+/* ---- the conversation list and the account card carry their own (One Dark) palette in chat.html; point it at the
+   theme, so the rail and the sign-in are the same family as the page next to them. */
+body.lc-web .sesspanel, body.lc-web .acctcard.classic {
+	--cc-bg: var(--vscode-editor-background);
+	--cc-surface: color-mix(in srgb, var(--vscode-foreground) 3%, var(--vscode-editor-background));
+	--cc-text: var(--vscode-foreground);
+	--cc-text2: color-mix(in srgb, var(--vscode-foreground) 82%, transparent);
+	--cc-text3: color-mix(in srgb, var(--vscode-foreground) 68%, transparent);
+	--cc-line: var(--lcw-line-strong);
+	--cc-accent: var(--vscode-button-background, var(--accent));
+}
+body.lc-web .acctcard.classic .signout { color: var(--lcw-accent-text); }
+body.lc-web .acctcard.classic .abtn.primary { color: var(--vscode-button-foreground, #fff); }
+
+/* A dialog taller than the window scrolls, with its top reachable (the sign-in card is 660px). */
+body.lc-web .overlay { overflow-y: auto; align-items: safe center; }
+
 /* ---- narrow: the compact column that sits beside an editor --------------------------------------- */
 @media (max-width: 759px) {
 	body.lc-web { --prose-size: 14.5px; --shell-x: 12px; }
@@ -80,6 +106,12 @@ body.lc-web #reviewBar, body.lc-web #planBar { border-radius: 14px; }
 	body.lc-web .lcw-hero { font-size: 20px; }
 	body.lc-web .lcw-mark { width: 30px; height: 30px; }
 	body.lc-web .lcw-sub { display: none; }
+	body.lc-web #status { gap: 6px; padding-inline: 6px; }
+}
+/* Short windows (a laptop at 200% zoom, a phone in landscape): the greeting gives up its mark and its sentence. */
+@media (max-height: 460px) {
+	body.lc-web .lcw-mark, body.lc-web .lcw-sub { display: none; }
+	body.lc-web #empty { padding-bottom: 12px; }
 }
 
 /* ---- wide: chat-first, the conversation list docked on the left ---------------------------------- */
@@ -104,12 +136,19 @@ body.lc-web #reviewBar, body.lc-web #planBar { border-radius: 14px; }
 	}
 	body.lc-web .lcw-new:hover { background: var(--lcw-soft-2); }
 	body.lc-web #sessOverlay .sesscard { border-radius: 10px; }
-	/* A narrow card has room for its title and one line, not for six buttons as well: they appear on hover or
-	   focus and take the place of the second line. */
+}
+/* A narrow card has room for its title and one line, not for six buttons as well. With a mouse they appear on hover
+   or focus and take the place of the second line. Without one (a tap applies :hover first, then lands on whatever
+   the layout change put under the finger — a rename, a delete) they are always there and the second line gives
+   way, as in the dialog. */
+@media (min-width: 1000px) and (hover: hover) and (pointer: fine) {
 	body.lc-web #sessOverlay .sesscard .sessacts { display: none; }
 	body.lc-web #sessOverlay .sesscard:hover .sessacts, body.lc-web #sessOverlay .sesscard:focus-within .sessacts { display: flex; margin-left: 0; }
 	body.lc-web #sessOverlay .sesscard:hover .sesssub, body.lc-web #sessOverlay .sesscard:focus-within .sesssub { display: none; }
 }
+@media (min-width: 1000px) and (hover: none), (min-width: 1000px) and (pointer: coarse) {
+	body.lc-web #sessOverlay .sesscard .sesssub { display: none; }
+}
 @media (max-width: 999px) { body.lc-web .lcw-new { display: none; } }
 
 @media (prefers-reduced-motion: reduce) {
diff --git a/web/ai-extension/skin/chat.js b/web/ai-extension/skin/chat.js
index d4957db..8a43dbd 100644
--- a/web/ai-extension/skin/chat.js
+++ b/web/ai-extension/skin/chat.js
@@ -5,11 +5,12 @@
 	'use strict';
 	if (!document.body || !document.body.classList.contains('lc-web')) { return; }
 
+	// Each one must make sense in an empty window: no open file, no selection (the first layout has no editor).
 	var STARTERS = [
 		['Build a small web page', 'Create an index.html with a simple, good-looking landing page.'],
 		['Explain this project', 'Look through the files here and explain what this project does.'],
-		['Fix a bug', 'Find and fix the bug in my selection.'],
-		['Write tests', 'Write tests for the current file.'],
+		['Fix a bug', 'Look through the files here for bugs, fix the most likely one and tell me what you changed.'],
+		['Write tests', 'Add tests for the main logic of this project, using the test setup that is already here or suggesting one.'],
 	];
 	var post = function (m) { try { vscode.postMessage(m); } catch (e) { /* the page is going away */ } };
 
@@ -77,13 +78,30 @@
 		nb.addEventListener('click', function () { post({ type: 'newChat' }); });
 		bar.appendChild(nb);
 	}
+	var overlay = document.getElementById('sessOverlay');
 	function sync() {
 		if (panel) {
 			panel.setAttribute('role', rail.matches ? 'complementary' : 'dialog');
-			panel.setAttribute('aria-modal', rail.matches ? 'false' : 'true');
+			// aria-modal is only meaningful on a dialog; on the docked list it is left off, not set to false.
+			if (rail.matches) { panel.removeAttribute('aria-modal'); } else { panel.setAttribute('aria-modal', 'true'); }
 		}
+		// /sessions opened while the list was docked leaves the overlay's inline display on; narrowing the window
+		// would then show it as a modal nobody asked for. Below the breakpoint it is closed until it is asked for.
+		if (overlay && !rail.matches) { overlay.style.display = 'none'; }
 		if (rail.matches) { ask(); }
 	}
+	// A card is a div with a role of button and a click handler only: Enter and Space do nothing on it. Do what a
+	// button does, for the card itself (its own buttons are real buttons and already work).
+	var list = document.getElementById('sessList');
+	if (list) {
+		list.addEventListener('keydown', function (e) {
+			var t = e.target;
+			if ((e.key === 'Enter' || e.key === ' ') && t && t.classList && t.classList.contains('sesscard')) {
+				e.preventDefault();
+				t.click();
+			}
+		});
+	}
 	if (rail.addEventListener) { rail.addEventListener('change', sync); }
 	sync();
 })();
diff --git a/web/boot.css b/web/boot.css
index 0ab7a0c..f52f284 100644
--- a/web/boot.css
+++ b/web/boot.css
@@ -1,7 +1,6 @@
 /* The splash that covers the page until the workbench has painted. Colours are literals on
    purpose: the workbench theme is not loaded yet, and a flash of the wrong ground is worse than
    a hard-coded one. */
-:root { color-scheme: dark light; }
 html, body { height: 100%; margin: 0; }
 body { background: #0b0d14; }
 @media (prefers-color-scheme: light) { body { background: #f4f1ea; } }
diff --git a/web/chrome.css b/web/chrome.css
index 35297c0..16eedd7 100644
--- a/web/chrome.css
+++ b/web/chrome.css
@@ -17,3 +17,8 @@
 
 /* The keyboard layout indicator is a desktop concern; in a page it is a US/UK label that means nothing. */
 .monaco-workbench .part.statusbar #status\.workbench\.keyboardLayout { display: none !important; }
+
+/* The title bar's toggle for the secondary side bar: the chat is an editor and its conversations are on the page's own
+   rail, so the bar has nothing of ours in it that the toggle is needed for (the built-in Chat view that was its
+   default is hidden by main.js). */
+.monaco-workbench li.action-item:has(> a.action-label[aria-label^="Toggle Secondary Side Bar"]) { display: none !important; }
diff --git a/web/index.html b/web/index.html
index bf444bd..ddcb323 100644
--- a/web/index.html
+++ b/web/index.html
@@ -4,7 +4,6 @@
 	<meta charset="utf-8">
 	<title>LevelCode</title>
 	<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
-	<meta name="color-scheme" content="dark light">
 	<meta name="theme-color" content="#0b0d14">
 	<meta name="description" content="LevelCode, the AI code editor, in your browser tab. Sign in with your LevelCode account and start.">
 	<link rel="icon" type="image/svg+xml" href="/icon.svg">
diff --git a/web/lib/config.mjs b/web/lib/config.mjs
index 1af031e..d9ad47f 100644
--- a/web/lib/config.mjs
+++ b/web/lib/config.mjs
@@ -57,12 +57,16 @@ export function webConfig(o = {}) {
 			'workbench.tips.enabled': false,
 			'breadcrumbs.enabled': false,
 			'editor.minimap.enabled': false,
+			// modernUI fades the top 24px of every editor into the ground (a scroll shadow that is there at scroll
+			// position zero too), which washes out line one. The editor starts below it.
+			'editor.padding.top': 24,
 			// Light or dark follows the visitor's system; the dark one is where it starts.
 			'window.autoDetectColorScheme': true,
 			'workbench.colorTheme': 'LevelCode Web Dark',
 			'workbench.preferredDarkColorTheme': 'LevelCode Web Dark',
 			'workbench.preferredLightColorTheme': 'LevelCode Web Light',
-			// The chat keeps its own group: files the agent opens go beside it, never over it.
+			// Once the chat is in a group of its own (the split layout) that group is locked: files the agent opens go
+			// beside it, never over it. The workbench only locks when there is more than one group.
 			'workbench.editor.autoLockGroups': { 'mainThreadWebview-levelcode.ai.chat': true },
 			'workbench.startupEditor': 'none',
 			'telemetry.telemetryLevel': 'off',
diff --git a/web/lib/extensions.mjs b/web/lib/extensions.mjs
index d1f0848..2b924ea 100644
--- a/web/lib/extensions.mjs
+++ b/web/lib/extensions.mjs
@@ -23,14 +23,14 @@ export function isDeclarativeWebExtension(manifest) {
 }
 
 /**
- * @param {string} extensionsDir Code-OSS's extensions/ directory
- * @param {string} outDir where to stage
- * @param {{ exclude?: Iterable<string> }} [opts] names to leave out (already baked into the bundle)
- * @returns {string[]} the staged extension names, sorted
+ * Which extensions of a Code-OSS `extensions/` directory are staged: the declarative ones that are not excluded.
+ * @param {string} extensionsDir
+ * @param {Iterable<string>} [excludeNames] names to leave out (already baked into the bundle)
+ * @returns {string[]} sorted
  */
-export function stageDeclarativeExtensions(extensionsDir, outDir, opts = {}) {
-	const exclude = new Set(opts.exclude || []);
-	const staged = [];
+export function declarativeExtensionNames(extensionsDir, excludeNames = []) {
+	const exclude = new Set(excludeNames);
+	const names = [];
 	for (const name of fs.readdirSync(extensionsDir).sort()) {
 		if (exclude.has(name) || DEV_ONLY.has(name)) { continue; }
 		const dir = path.join(extensionsDir, name);
@@ -39,7 +39,24 @@ export function stageDeclarativeExtensions(extensionsDir, outDir, opts = {}) {
 		let manifest;
 		try { manifest = JSON.parse(fs.readFileSync(pkgPath, 'utf8')); } catch { continue; }
 		if (!isDeclarativeWebExtension(manifest)) { continue; }
-		copyExtension(dir, path.join(outDir, name));
+		names.push(name);
+	}
+	return names;
+}
+
+/** Names `copyExtension` leaves out, for hashing the same inputs it copies. */
+export const COPY_SKIP = [...SKIP];
+
+/**
+ * @param {string} extensionsDir Code-OSS's extensions/ directory
+ * @param {string} outDir where to stage
+ * @param {{ exclude?: Iterable<string> }} [opts] names to leave out (already baked into the bundle)
+ * @returns {string[]} the staged extension names, sorted
+ */
+export function stageDeclarativeExtensions(extensionsDir, outDir, opts = {}) {
+	const staged = [];
+	for (const name of declarativeExtensionNames(extensionsDir, opts.exclude)) {
+		copyExtension(path.join(extensionsDir, name), path.join(outDir, name));
 		// The workbench asks every extension for a package.nls.json; an absent one is a 404 in the console.
 		const nls = path.join(outDir, name, 'package.nls.json');
 		if (!fs.existsSync(nls)) { fs.writeFileSync(nls, '{}\n'); }
diff --git a/web/main.js b/web/main.js
index 8d2eed8..fa528bd 100644
--- a/web/main.js
+++ b/web/main.js
@@ -70,7 +70,7 @@ try {
 	void workbench;
 	boot.whenWorkbenchReady();
 	addChromeStyles(config);
-	hideBuiltInChat(workbench);
+	hideBuiltInChat(api);
 	startReturnFromSignIn(callbacks, URI);
 } catch (err) {
 	console.error('[levelcode-web] failed to start', err);
@@ -110,14 +110,24 @@ function addChromeStyles(cfg) {
 }
 
 /**
- * Code-OSS's own Chat view (the Copilot one) shows up in the secondary side bar on the web even with
- * chat.disableAIFeatures, through an interaction of its account-policy gate with that setting. LevelCode's chat
- * is the assistant here, so the built-in view is told it is disabled. It is an internal context key set through
- * the underscore command, so the symptom (a "Chat" tab in the right side bar) is what to look for on a bump.
+ * Code-OSS's own Chat view (the Copilot one) is registered on the web even with chat.disableAIFeatures, and nothing
+ * behind it works (no default agent): opened, it fills the window with "Build with Agent" and a dead composer.
+ * Its `when` is `!chatAccountPolicyGateActive && (!chatSetupHidden && !chatSetupDisabledInWorkspace || ...)`, so the
+ * gate key — which has no other reader — hides it. Internal context keys, set through the underscore command; the
+ * gate's own contribution writes its key again five seconds after start (and when a policy changes, which there is
+ * none of in a tab), so it is set again after that. If a Code-OSS bump moves any of this, web/test/e2e-look.mjs
+ * opens the side bar and fails on the built-in "Chat" tab.
  */
-function hideBuiltInChat(workbench) {
-	try { void Promise.resolve(workbench.commands.executeCommand('_setContext', 'chatSetupDisabledInWorkspace', true)).catch(() => undefined); }
-	catch { /* a Code-OSS without it has nothing to hide */ }
+function hideBuiltInChat(api) {
+	// `create()` returns a disposable, not the workbench: the embedder's command API is the module's own `commands`.
+	const set = () => {
+		for (const key of ['chatAccountPolicyGateActive', 'chatSetupDisabledInWorkspace']) {
+			try { void Promise.resolve(api.commands.executeCommand('_setContext', key, true)).catch(() => undefined); }
+			catch { /* a Code-OSS without it has nothing to hide */ }
+		}
+	};
+	set();
+	setTimeout(set, 6500);
 }
 
 /* ----- signing in ------------------------------------------------------------------------- */
diff --git a/web/test/cdp.mjs b/web/test/cdp.mjs
index bd33ced..6792ffd 100644
--- a/web/test/cdp.mjs
+++ b/web/test/cdp.mjs
@@ -115,6 +115,22 @@ export class Page {
 }
 export { sleep };
 
+/**
+ * Run a command from the Command Palette: F1 until the quick input is up (a key pressed while the chat webview is
+ * still taking the focus at start-up is lost, as it would be for a person), type, wait for the list, Enter.
+ */
+Page.prototype.palette = async function (text, { tries = 6, settle = 900 } = {}) {
+	const open = () => this.eval(`!!document.querySelector('.quick-input-widget:not([style*="display: none"]) .quick-input-box input')`);
+	for (let i = 0; i < tries && !(await open()); i++) {
+		await this.key('F1', 'F1');
+		await sleep(1200);
+	}
+	if (!(await open())) { throw new Error('the command palette did not open'); }
+	await this.type(text);
+	await sleep(settle);
+	await this.key('Enter', 'Enter');
+};
+
 /** Find the CDP session id of the first attached target whose URL matches. */
 Page.prototype.sessionFor = function (re) {
 	for (const [id, s] of this.sessions) { if (re.test(s.url || '')) { return id; } }
diff --git a/web/test/e2e-byok.mjs b/web/test/e2e-byok.mjs
index 7b5c539..130181e 100644
--- a/web/test/e2e-byok.mjs
+++ b/web/test/e2e-byok.mjs
@@ -39,13 +39,7 @@ try {
 	await page.waitFor(async () => (await page.eval(`[...document.querySelectorAll('.tabs-container .tab')].some((e) => /LevelCode AI/.test(e.getAttribute('aria-label') || ''))`)), { ms: 60000, label: 'chat tab' });
 	await sleep(2500);
 
-	const palette = async (text) => {
-		await page.key('F1', 'F1');
-		await page.waitFor(() => page.eval(`!!document.querySelector('.quick-input-widget:not([style*="display: none"]) .quick-input-box input')`), { ms: 8000, label: 'command palette' });
-		await page.type(text);
-		await sleep(900);
-		await page.key('Enter', 'Enter');
-	};
+	const palette = (text) => page.palette(text);
 
 	await palette('Set API Key');
 	await page.waitFor(() => page.eval(`!!document.querySelector('.quick-input-widget:not([style*="display: none"]) .quick-input-box input[type=password]')`), { ms: 10000, label: 'key prompt' });
diff --git a/web/test/e2e-look.mjs b/web/test/e2e-look.mjs
index 5df2e50..75d8971 100644
--- a/web/test/e2e-look.mjs
+++ b/web/test/e2e-look.mjs
@@ -72,9 +72,22 @@ try {
 	})()`);
 	const visible = (sel) => page.eval(`(() => { const e = document.querySelector(${JSON.stringify(sel)}); if (!e) { return false; } const r = e.getBoundingClientRect(); return r.width > 0 && r.height > 0 && getComputedStyle(e).visibility !== 'hidden'; })()`);
 	const layoutItemText = () => page.eval(`(() => { const a = [...document.querySelectorAll('.statusbar-item')].find((x) => /Chat\\s*$|Editor \\+ chat/.test((x.textContent || '').trim())); return a ? (a.textContent || '').trim() : null; })()`);
+	/**
+	 * Click the layout item until it has done what it says. Straight after a start the status bar is still being
+	 * filled in (the window indicator, the scratch item), and an item moves between the moment it is measured and
+	 * the click: the click lands on its neighbour. A person clicks again; so does this.
+	 */
 	const clickLayoutItem = async () => {
-		const r = await page.waitFor(() => page.eval(`(() => { const a = [...document.querySelectorAll('.statusbar-item')].find((x) => /Chat\\s*$|Editor \\+ chat/.test((x.textContent || '').trim())); if (!a) { return null; } const b = a.getBoundingClientRect(); return { x: b.x + b.width / 2, y: b.y + b.height / 2 }; })()`), { ms: 20000, label: 'the layout item in the status bar' });
-		await page.click(r.x, r.y);
+		const before = await page.waitFor(() => layoutItemText(), { ms: 20000, label: 'the layout item in the status bar' });
+		for (let attempt = 0; attempt < 5; attempt++) {
+			await sleep(400);
+			const r = await page.eval(`(() => { const a = [...document.querySelectorAll('.statusbar-item')].find((x) => /^(\\$\\([^)]*\\)\\s*)?(Chat|Editor \\+ chat)\\s*$/.test((x.textContent || '').trim())); if (!a) { return null; } const b = a.getBoundingClientRect(); return { x: b.x + b.width / 2, y: b.y + b.height / 2 }; })()`);
+			if (!r) { continue; }
+			await page.click(r.x, r.y);
+			const changed = await page.waitFor(async () => (await layoutItemText()) !== before, { ms: 3000, label: 'the item to change' }).then(() => true).catch(() => false);
+			if (changed) { return; }
+		}
+		throw new Error('the layout item did not respond to five clicks');
 	};
 
 	/* 1. the first screen */
@@ -104,6 +117,29 @@ try {
 	check('the first layout is the chat on its own: one editor group, side bars away', g1.length === 1 && !(await visible('.part.sidebar')) && !(await visible('.part.auxiliarybar')), JSON.stringify(g1.map((g) => g.w)));
 	check('the status bar offers the switch', (await layoutItemText()) === 'Chat', JSON.stringify(await layoutItemText()));
 
+	/* 1b. the workbench's own chat is not offered next to LevelCode's, and the page does not make stock webviews unreadable */
+	const toggleShown = await page.eval(`(() => { const a = [...document.querySelectorAll('a.action-label')].find((x) => (x.getAttribute('aria-label') || '').startsWith('Toggle Secondary Side Bar')); if (!a) { return false; } const b = (a.closest('li') || a).getBoundingClientRect(); return b.width > 0; })()`);
+	check('the title bar has no toggle for the secondary side bar (it only leads to the workbench\'s own, dead, Chat view)', toggleShown === false, JSON.stringify(toggleShown));
+	await sleep(4000);   // the workbench's policy gate writes its context key again five seconds after start; the page sets it again after that
+	const palette = async (text) => {
+		await page.key('F1', 'F1');
+		await page.waitFor(() => page.eval(`!!document.querySelector('.quick-input-widget:not([style*="display: none"]) .quick-input-box input')`), { ms: 8000, label: 'command palette' });
+		await page.type(text);
+		await sleep(900);
+		await page.key('Enter', 'Enter');
+		await sleep(1500);
+	};
+	await palette('View: Toggle Secondary Side Bar Visibility');
+	const aux = await page.eval(`(() => { const p = document.querySelector('.part.auxiliarybar'); if (!p) { return null; } const r = p.getBoundingClientRect(); const shown = (e) => { const b = e.getBoundingClientRect(); return b.width > 0 && b.height > 0 && getComputedStyle(e).display !== 'none'; };
+		return { open: r.width > 0, builtIn: [...p.querySelectorAll('.composite-bar a.action-label.codicon-chat-view-icon')].some((a) => shown(a.closest('li') || a)), tabs: [...p.querySelectorAll('.composite-bar a.action-label')].filter((a) => shown(a.closest('li') || a)).map((a) => a.getAttribute('aria-label')) }; })()`);
+	await shot('1b-aux');
+	check('opened by the palette, the side bar on the right has only LevelCode\'s own container: the workbench\'s Chat view is not there', !!aux && aux.open && !aux.builtIn && aux.tabs.length === 1 && /LevelCode/.test(aux.tabs[0]), JSON.stringify(aux));
+	await palette('View: Toggle Secondary Side Bar Visibility');
+	const auxClosed = await page.waitFor(async () => !(await visible('.part.auxiliarybar')), { ms: 8000, label: 'the side bar to close' }).then(() => true).catch(() => false);
+	check('and it closes again', auxClosed, JSON.stringify(await page.eval(`(() => { const p = document.querySelector('.part.auxiliarybar'); return p ? Math.round(p.getBoundingClientRect().width) : null; })()`)));
+	const scheme0 = await page.eval(`getComputedStyle(document.documentElement).colorScheme`);
+	check('the page declares no colour scheme of its own (a stock webview, such as the Markdown preview, would paint a white page for a dark theme)', scheme0 === 'normal', JSON.stringify(scheme0));
+
 	/* 2. a starter fills the composer and does not send it */
 	const before = stub.state.chats;
 	await inChat(`(() => { const b = d.querySelector('.starter'); b.click(); return true; })()`);
@@ -150,6 +186,8 @@ try {
 	await shot('5-split');
 	check('the switch gives files on the left and the chat docked on the right', !!split && !split[0].chat && split[1].chat && split[0].tabs.some((t) => /README/.test(t)), JSON.stringify(split));
 	check('with the Explorer open on the left', (await visible('.explorer-folders-view')) === true);
+	const lineOne = await page.eval(`(() => { const ed = document.querySelector('.editor-group-container .monaco-editor'); const l = document.querySelector('.editor-group-container .view-line'); if (!ed || !l) { return null; } return Math.round(l.getBoundingClientRect().top - ed.getBoundingClientRect().top); })()`);
+	check('the first line of a file sits below the 24 px fade of the floating panels', typeof lineOne === 'number' && lineOne >= 24, JSON.stringify(lineOne));
 	check('the status item now says which one it is', (await layoutItemText()) === 'Editor + chat', JSON.stringify(await layoutItemText()));
 	const hidden = await page.eval(`(() => {
 		const icons = ['source-control-view-icon', 'run-view-icon', 'extensions-view-icon'].map((c) => {
@@ -171,13 +209,14 @@ try {
 	check('after a reload the chat is docked on the right again', !!again, JSON.stringify(again));
 	await clickLayoutItem();
 	const single = await page.waitFor(async () => { const g = await groups(); return g.length === 1 && g[0].chat ? g : null; }, { ms: 30000, label: 'the chat on its own' }).catch(() => null);
-	check('switching back puts the chat in a single group again, as the tab on show', !!single, JSON.stringify(single));
+	check('switching back puts the chat in a single group again, as the tab on show', !!single, JSON.stringify(single || await groups()));
 	check('and the side bar is put away', !(await visible('.part.sidebar')));
 	await shot('6-back');
 } catch (e) {
 	check('the run completed', false, String((e && e.stack) || e));
 }
 
+if (process.env.E2E_DEBUG) { console.log(stub.state.log.filter((e) => /__dbg/.test(e.path || '')).map((e) => decodeURIComponent(((e.url || e.path) || '').replace(/^.*[?&]m=/, ''))).join('\n')); }
 const failed = results.filter((r) => !r).length;
 console.log(`\n${results.length - failed}/${results.length} checks passed`);
 await finish(failed ? 1 : 0);
diff --git a/web/test/e2e.mjs b/web/test/e2e.mjs
index 38d3164..7536122 100644
--- a/web/test/e2e.mjs
+++ b/web/test/e2e.mjs
@@ -116,6 +116,10 @@ try {
 		return t.some((x) => /LevelCode AI/.test(x)) ? t : null;
 	}, { ms: 60000, label: 'LevelCode AI tab' }).catch(() => null);
 	check('the LevelCode AI extension activates in the web worker and opens its chat', !!tabs, JSON.stringify(tabs));
+	// The first layout is the chat on its own, side bars away; the Explorer is one command from there.
+	await sleep(3000);
+	check('the first screen is the chat on its own, with no side bar', !(await page.eval(`(() => { const s = document.querySelector('.part.sidebar'); return !!s && s.getBoundingClientRect().width > 0; })()`)));
+	await page.palette('View: Show Explorer');
 	const rows = await page.waitFor(async () => {
 		const r = await page.eval(`[...document.querySelectorAll('.explorer-folders-view .monaco-list-row')].map((e) => e.getAttribute('aria-label'))`);
 		return r.length ? r : null;
@@ -246,11 +250,7 @@ try {
 		window.showDirectoryPicker = async () => { const r = await navigator.storage.getDirectory(); return r.getDirectoryHandle('project', { create: true }); };
 		return true;
 	})()`);
-	await page.key('F1', 'F1');
-	await page.waitFor(() => page.eval(`!!document.querySelector('.quick-input-widget:not([style*="display: none"]) .quick-input-box input')`), { ms: 8000, label: 'command palette' });
-	await page.type('Open Folder from Your Computer');
-	await sleep(900);
-	await page.key('Enter', 'Enter');
+	await page.palette('Open Folder from Your Computer');
 	const folderRows = await page.waitFor(async () => {
 		const r = await page.eval(`[...document.querySelectorAll('.explorer-folders-view .monaco-list-row')].map((e) => e.getAttribute('aria-label'))`);
 		return r.some((x) => /main\.py/.test(x)) ? r : null;
diff --git a/web/test/unit/extensions.test.js b/web/test/unit/extensions.test.js
new file mode 100644
index 0000000..a2071de
--- /dev/null
+++ b/web/test/unit/extensions.test.js
@@ -0,0 +1,99 @@
+/*---------------------------------------------------------------------------------------------
+ *  web/lib/extensions.mjs — run: node web/test/unit/extensions.test.js
+ *
+ *  Which of Code-OSS's extensions the browser edition carries, how they are staged, and what the build id is made
+ *  of for them. The id must see exactly what is staged: a grammar that changed and an id that did not is a stale
+ *  file for a year under an immutable prefix.
+ *--------------------------------------------------------------------------------------------*/
+// @ts-check
+'use strict';
+
+const assert = require('assert');
+const fs = require('fs');
+const os = require('os');
+const path = require('path');
+const { createHash } = require('crypto');
+const { pathToFileURL } = require('url');
+
+let n = 0;
+async function test(name, fn) { await fn(); n++; console.log('  ok - ' + name); }
+const write = (root, rel, text) => { const f = path.join(root, rel); fs.mkdirSync(path.dirname(f), { recursive: true }); fs.writeFileSync(f, text); };
+
+(async () => {
+	const lib = path.join(__dirname, '..', '..', 'lib');
+	const { declarativeExtensionNames, stageDeclarativeExtensions, copyExtension, COPY_SKIP } = await import(pathToFileURL(path.join(lib, 'extensions.mjs')).href);
+	const { hashTree } = await import(pathToFileURL(path.join(lib, 'fingerprint.mjs')).href);
+
+	const checkout = () => {
+		const d = fs.mkdtempSync(path.join(os.tmpdir(), 'lc-ext-'));
+		write(d, 'json/package.json', JSON.stringify({ name: 'json', contributes: { grammars: [{ language: 'json' }] } }));
+		write(d, 'json/syntaxes/json.tmLanguage.json', '{}');
+		write(d, 'json/test/fixture.json', '{}');
+		write(d, 'json/package.nls.de.json', '{}');
+		write(d, 'themes/package.json', JSON.stringify({ name: 'themes', contributes: { themes: [{ label: 'T' }] } }));
+		write(d, 'typescript-language-features/package.json', JSON.stringify({ name: 'ts', main: './out/extension', browser: './dist/browser/extension' }));
+		write(d, 'debuggy/package.json', JSON.stringify({ name: 'debuggy', contributes: { debuggers: [{ type: 'x' }] } }));
+		write(d, 'copilot/package.json', JSON.stringify({ name: 'copilot', contributes: {} }));
+		write(d, 'baked/package.json', JSON.stringify({ name: 'baked', contributes: {} }));
+		write(d, 'not-an-extension/readme.txt', 'x');
+		write(d, 'broken/package.json', '{ nope');
+		return d;
+	};
+
+	await test('the declarative extensions are the ones with no code, not dev-only, not already baked in', () => {
+		const d = checkout();
+		try {
+			assert.deepStrictEqual(declarativeExtensionNames(d, ['baked']), ['json', 'themes']);
+			assert.deepStrictEqual(declarativeExtensionNames(d), ['baked', 'json', 'themes']);
+		} finally { fs.rmSync(d, { recursive: true, force: true }); }
+	});
+
+	await test('staging copies exactly those, without tests and translations, and answers with the same names', () => {
+		const d = checkout();
+		const out = fs.mkdtempSync(path.join(os.tmpdir(), 'lc-ext-out-'));
+		try {
+			const staged = stageDeclarativeExtensions(d, out, { exclude: ['baked'] });
+			assert.deepStrictEqual(staged, declarativeExtensionNames(d, ['baked']));
+			assert.deepStrictEqual(fs.readdirSync(out).sort(), ['json', 'themes']);
+			assert.ok(fs.existsSync(path.join(out, 'json', 'syntaxes', 'json.tmLanguage.json')));
+			assert.ok(!fs.existsSync(path.join(out, 'json', 'test')));
+			assert.ok(!fs.existsSync(path.join(out, 'json', 'package.nls.de.json')));
+			assert.ok(fs.existsSync(path.join(out, 'themes', 'package.nls.json')), 'the workbench asks every extension for one');
+		} finally { fs.rmSync(d, { recursive: true, force: true }); fs.rmSync(out, { recursive: true, force: true }); }
+	});
+
+	await test('the build id sees a changed grammar, a new extension and a removed one — and not a test file', () => {
+		const d = checkout();
+		const id = () => {
+			const h = createHash('sha256');
+			for (const name of declarativeExtensionNames(d, ['baked'])) { h.update('\0ext\0' + name); hashTree(h, path.join(d, name), { skip: [...COPY_SKIP, '.DS_Store'] }); }
+			return h.digest('hex');
+		};
+		try {
+			const base = id();
+			write(d, 'json/syntaxes/json.tmLanguage.json', '{"changed":true}');
+			const changed = id();
+			assert.notStrictEqual(changed, base, 'a grammar');
+			write(d, 'extra/package.json', JSON.stringify({ name: 'extra', contributes: {} }));
+			const added = id();
+			assert.notStrictEqual(added, changed, 'a new extension');
+			fs.rmSync(path.join(d, 'extra'), { recursive: true });
+			assert.strictEqual(id(), changed, 'and back');
+			write(d, 'json/test/fixture.json', '{"more":1}');
+			assert.strictEqual(id(), changed, 'a test file is not staged, so it is not part of the build');
+		} finally { fs.rmSync(d, { recursive: true, force: true }); }
+	});
+
+	await test('what the id skips is what the copy skips', () => {
+		for (const name of ['node_modules', 'test', 'src', '.git']) { assert.ok(COPY_SKIP.includes(name), name); }
+		const d = checkout();
+		const out = fs.mkdtempSync(path.join(os.tmpdir(), 'lc-ext-out-'));
+		try {
+			write(d, 'json/node_modules/x/index.js', 'x');
+			copyExtension(path.join(d, 'json'), path.join(out, 'json'));
+			assert.ok(!fs.existsSync(path.join(out, 'json', 'node_modules')));
+		} finally { fs.rmSync(d, { recursive: true, force: true }); fs.rmSync(out, { recursive: true, force: true }); }
+	});
+
+	console.log(`\n${n} tests passed`);
+})().catch((e) => { console.error(e); process.exit(1); });
diff --git a/web/test/unit/main.test.js b/web/test/unit/main.test.js
index 467b32a..318757f 100644
--- a/web/test/unit/main.test.js
+++ b/web/test/unit/main.test.js
@@ -12,7 +12,7 @@
  *    startReturnFromSignIn    ?signin=1 and the return from a sign-in
  *    pickInitialTheme         the colours painted before the theme has loaded follow the system
  *    addChromeStyles          chrome.css comes AFTER the workbench's own stylesheet, from the build's prefix
- *    hideBuiltInChat          the workbench's own chat is told it is disabled; a workbench without it is fine
+ *    hideBuiltInChat          the workbench's own chat is told it is disabled, again after the policy gate's own write
  *--------------------------------------------------------------------------------------------*/
 // @ts-check
 'use strict';
@@ -454,12 +454,21 @@ const ACCOUNT = 'https://levelcode.example';
 		add({});
 		assert.strictEqual(added[1].href, '/chrome.css', 'a development page has no prefix');
 	});
-	await test('look: the built-in chat is told it is disabled, through the one context key, and a failure there is not an error', async () => {
+
+	await test('look: the built-in chat is hidden through its two context keys, now and again after the policy gate\'s own write, and a failure is not an error', async () => {
 		const sent = [];
-		const hide = new Function(extract('hideBuiltInChat') + '\nreturn hideBuiltInChat;')();
+		const timers = [];
+		const hide = new Function('setTimeout', extract('hideBuiltInChat') + '\nreturn hideBuiltInChat;')((f, ms) => { timers.push([f, ms]); return 1; });
 		hide({ commands: { executeCommand: async (...a) => { sent.push(a); } } });
 		await new Promise((r) => setTimeout(r, 0));
-		assert.deepStrictEqual(sent, [['_setContext', 'chatSetupDisabledInWorkspace', true]]);
+		const keys = [['_setContext', 'chatAccountPolicyGateActive', true], ['_setContext', 'chatSetupDisabledInWorkspace', true]];
+		assert.deepStrictEqual(sent, keys);
+		assert.strictEqual(timers.length, 1);
+		assert.ok(timers[0][1] > 5000, 'after the gate\'s five-second write, not before it');
+		sent.length = 0;
+		timers[0][0]();
+		await new Promise((r) => setTimeout(r, 0));
+		assert.deepStrictEqual(sent, keys, 'set again');
 		assert.doesNotThrow(() => hide({ commands: { executeCommand: async () => { throw new Error('unknown command'); } } }));
 		assert.doesNotThrow(() => hide({ commands: { executeCommand: () => { throw new Error('sync'); } } }));
 		assert.doesNotThrow(() => hide({}));
diff --git a/web/test/unit/skin.test.js b/web/test/unit/skin.test.js
index 3ddb185..9665e7f 100644
--- a/web/test/unit/skin.test.js
+++ b/web/test/unit/skin.test.js
@@ -93,6 +93,113 @@ test('the script is valid and sends only messages the page already sends', () =>
 	}
 });
 
+/* ----- the script, run against a small stand-in for the page ----------------------------------- */
+function makePage({ railMatches }) {
+	class El {
+		constructor(tag) { this.tag = tag; this.children = []; this.attrs = {}; this.listeners = {}; this.style = {}; this.className = ''; this.textContent = ''; this.value = ''; this.classes = new Set(); }
+		setAttribute(k, v) { this.attrs[k] = String(v); }
+		getAttribute(k) { return k in this.attrs ? this.attrs[k] : null; }
+		removeAttribute(k) { delete this.attrs[k]; }
+		appendChild(c) { this.children.push(c); return c; }
+		addEventListener(t, f) { (this.listeners[t] = this.listeners[t] || []).push(f); }
+		dispatchEvent() { return true; }
+		cloneNode() { return new El('svg'); }
+		focus() {}
+		querySelector(sel) { return this.found && this.found[sel] || null; }
+		get classList() { const c = this.classes; return { contains: (x) => c.has(x), add: (x) => c.add(x) }; }
+	}
+	const ids = {};
+	for (const id of ['empty', 'log', 'input', 'sessOverlay', 'sessList', 'lcLogo']) { ids[id] = new El('div'); }
+	ids.empty.found = {};
+	const panel = new El('div');
+	const bar = new El('div');
+	bar.found = {};
+	const body = new El('body'); body.classes.add('lc-web');
+	const posted = [];
+	const mq = { matches: railMatches, listeners: [], addEventListener(t, f) { this.listeners.push(f); } };
+	const windowListeners = {};
+	const timers = [];
+	const document = {
+		body, getElementById: (id) => ids[id] || null,
+		createElement: (t) => new El(t),
+		querySelector: (sel) => (sel === '#sessOverlay .sesspanel' ? panel : sel === '#sessOverlay .sessbar' ? bar : null),
+	};
+	const window = { matchMedia: () => mq, addEventListener: (t, f) => { (windowListeners[t] = windowListeners[t] || []).push(f); } };
+	const run = new Function('document', 'window', 'vscode', 'MutationObserver', 'setTimeout', 'clearTimeout', 'Event', js);
+	run(document, window, { postMessage: (m) => posted.push(m) }, function () { this.observe = () => {}; }, (f) => { timers.push(f); return timers.length; }, () => {}, function Event() {});
+	return { ids, panel, bar, mq, posted, windowListeners, timers };
+}
+
+test('the keyboard: Enter and Space on a conversation card resume it; other keys and the card\'s own buttons are left alone', () => {
+	const { ids } = makePage({ railMatches: true });
+	const [onKey] = ids.sessList.listeners.keydown;
+	const card = { classList: { contains: (c) => c === 'sesscard' }, click() { this.clicked = (this.clicked || 0) + 1; } };
+	const inner = { classList: { contains: () => false }, click() { this.clicked = (this.clicked || 0) + 1; } };
+	let prevented = 0;
+	const ev = (key, target) => ({ key, target, preventDefault() { prevented++; } });
+	onKey(ev('Enter', card)); onKey(ev(' ', card));
+	assert.strictEqual(card.clicked, 2);
+	assert.strictEqual(prevented, 2, 'Space would otherwise scroll the list');
+	onKey(ev('a', card)); onKey(ev('Tab', card)); onKey(ev('Enter', inner));
+	assert.strictEqual(card.clicked, 2);
+	assert.strictEqual(inner.clicked, undefined, 'a real button already does its own thing');
+});
+
+test('docked: the list is a complementary region with no aria-modal; narrow: a modal dialog, closed until asked for', () => {
+	const wide = makePage({ railMatches: true });
+	assert.strictEqual(wide.panel.getAttribute('role'), 'complementary');
+	assert.strictEqual(wide.panel.getAttribute('aria-modal'), null, 'aria-modal="false" on a non-dialog is not valid');
+	const narrow = makePage({ railMatches: false });
+	assert.strictEqual(narrow.panel.getAttribute('role'), 'dialog');
+	assert.strictEqual(narrow.panel.getAttribute('aria-modal'), 'true');
+	assert.strictEqual(narrow.ids.sessOverlay.style.display, 'none');
+	// the window is widened, the list is opened with /sessions (the page sets display inline), and then narrowed again
+	const p = makePage({ railMatches: true });
+	p.ids.sessOverlay.style.display = 'flex';
+	p.mq.matches = false;
+	p.mq.listeners.forEach((f) => f());
+	assert.strictEqual(p.ids.sessOverlay.style.display, 'none', 'no modal the visitor did not ask for');
+	assert.strictEqual(p.panel.getAttribute('role'), 'dialog');
+	assert.strictEqual(p.panel.getAttribute('aria-modal'), 'true');
+});
+
+test('docked: the list is asked for (never the sample cards), once per burst of events', () => {
+	const p = makePage({ railMatches: true });
+	assert.strictEqual(p.timers.length, 1, 'once on start');
+	p.timers.length = 0; p.posted.length = 0;
+	const [onMessage] = p.windowListeners.message;
+	for (const type of ['agentDone', 'assistantDone', 'sessionResumed']) { onMessage({ data: { type } }); }
+	onMessage({ data: { type: 'somethingElse' } });
+	p.timers.forEach((f) => f());
+	assert.deepStrictEqual(p.posted.map((m) => m.type), ['listSessions', 'listSessions', 'listSessions'], 'the timers were set per event; the real one is cleared and set again, so the page sees them debounced');
+	assert.ok(p.posted.every((m) => m.type !== 'openSessions'));
+});
+
+test('the starters make sense in an empty window: none of them names a selection or an open file', () => {
+	const m = [...js.matchAll(/\['([^']+)',\s*'([^']+)'\]/g)].map((x) => x.slice(1));
+	assert.strictEqual(m.length, 4);
+	for (const [title, prompt] of m) {
+		assert.ok(!/\b(my selection|the selection|current file|open file|this file|selected)\b/i.test(prompt), title + ': ' + prompt);
+	}
+});
+
+test('hover reveals the card actions only where there is hover; touch keeps them and gives up the second line', () => {
+	const at = css.indexOf('.sesscard .sessacts { display: none; }');
+	assert.ok(at > 0);
+	const head = css.lastIndexOf('@media', at);
+	assert.ok(/@media \(min-width: 1000px\) and \(hover: hover\) and \(pointer: fine\)/.test(css.slice(head, at)), 'the hiding rule is not under the hover media query');
+	assert.ok(/@media \(min-width: 1000px\) and \(hover: none\), \(min-width: 1000px\) and \(pointer: coarse\)[^{]*\{\s*body\.lc-web #sessOverlay \.sesscard \.sesssub \{ display: none; \}/.test(css));
+});
+
+test('text that was drawn in the translucent focus colour is drawn in the link colour; the empty chat can be scrolled to its top', () => {
+	assert.ok(/--lcw-accent-text: var\(--vscode-textLink-foreground, var\(--accent\)\)/.test(css));
+	for (const sel of ['.msg .body a', '.filechip .fcname', '.modeopt.active .moname', '#status .stap.autopilot']) {
+		assert.ok(new RegExp(`body\\.lc-web ${sel.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}[^{]*\\{[^}]*color: var\\(--lcw-accent-text\\)`).test(css) || css.includes(`body.lc-web ${sel}, `) || css.includes(`, body.lc-web ${sel}`), sel);
+	}
+	assert.ok(/body\.lc-web:has\(#empty\) \{ justify-content: safe center; \}/.test(css), 'plain centre clips the top of a window shorter than its content');
+	assert.ok(!/#status \{ opacity/.test(css), 'opacity on the footer row dims its popovers too');
+});
+
 test('the build refuses a chat.html that is not the shape the skin is cut into', () => {
 	for (const anchor of [ANCHORS.STYLE_END, ANCHORS.BODY_OPEN, ANCHORS.SCRIPT_END]) {
 		assert.throws(() => skinChat(base.replace(anchor, '')), /expected exactly one/);
diff --git a/web/test/unit/theme.test.js b/web/test/unit/theme.test.js
index 48a7644..a7a242e 100644
--- a/web/test/unit/theme.test.js
+++ b/web/test/unit/theme.test.js
@@ -117,17 +117,21 @@ function over(top, ground) {
 
 	await test('the desktop themes\' pinned default is removed from the staged copy, and only that', () => {
 		const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'lc-theme-'));
-		const file = path.join(dir, 'package.json');
-		const source = fs.readFileSync(path.join(REPO, 'extensions', 'levelcode-themes', 'package.json'), 'utf8');
-		assert.ok(/configurationDefaults/.test(source), 'the desktop extension still pins its default');
-		fs.writeFileSync(file, source);
-		assert.strictEqual(withoutConfigurationDefaults(file), true);
-		const staged = JSON.parse(fs.readFileSync(file, 'utf8'));
-		const original = JSON.parse(source);
-		assert.ok(!('configurationDefaults' in staged.contributes));
-		assert.deepStrictEqual(staged.contributes.themes, original.contributes.themes, 'both of its themes stay selectable');
-		assert.strictEqual(withoutConfigurationDefaults(file), false, 'nothing left to remove');
-		assert.ok(/configurationDefaults/.test(fs.readFileSync(path.join(REPO, 'extensions', 'levelcode-themes', 'package.json'), 'utf8')), 'the desktop source is not touched');
+		try {
+			const file = path.join(dir, 'package.json');
+			const source = fs.readFileSync(path.join(REPO, 'extensions', 'levelcode-themes', 'package.json'), 'utf8');
+			assert.ok(/configurationDefaults/.test(source), 'the desktop extension still pins its default');
+			fs.writeFileSync(file, source);
+			assert.strictEqual(withoutConfigurationDefaults(file), true);
+			const staged = JSON.parse(fs.readFileSync(file, 'utf8'));
+			const original = JSON.parse(source);
+			assert.ok(!('configurationDefaults' in staged.contributes));
+			assert.deepStrictEqual(staged.contributes.themes, original.contributes.themes, 'both of its themes stay selectable');
+			assert.strictEqual(withoutConfigurationDefaults(file), false, 'nothing left to remove');
+			assert.ok(/configurationDefaults/.test(fs.readFileSync(path.join(REPO, 'extensions', 'levelcode-themes', 'package.json'), 'utf8')), 'the desktop source is not touched');
+		} finally {
+			fs.rmSync(dir, { recursive: true, force: true });   // a failed assertion must not leave it behind either
+		}
 	});
 
 	console.log(`\n${n} tests passed`);
diff --git a/web/test/unit/workspace.test.js b/web/test/unit/workspace.test.js
index d136cc9..4f12c6b 100644
--- a/web/test/unit/workspace.test.js
+++ b/web/test/unit/workspace.test.js
@@ -31,16 +31,30 @@ let groupsNow = /** @type {any[]} */ ([]);
 let config = /** @type {Record<string, any>} */ ({});
 let found = /** @type {any[]} */ ([]);
 const shown = /** @type {any[][]} */ ([]);
+const closed = /** @type {any[]} */ ([]);
+const updates = /** @type {any[][]} */ ([]);
+let tabListeners = /** @type {Function[]} */ ([]);
+/** The group that has the focus, when a test cares (undefined: the mock has no such property, like an older host). */
+let activeGroup = /** @type {any} */ (undefined);
+const fireTabs = () => tabListeners.slice().forEach((f) => f());
 const vscodeMock = {
 	Uri,
 	ViewColumn: { One: 1, Two: 2 },
 	window: {
 		async showOpenDialog(o) { calls.dialogs.push(o); return nextPick; },
-		get tabGroups() { return { all: groupsNow }; },
+		get tabGroups() {
+			return {
+				all: groupsNow,
+				...(activeGroup !== undefined ? { activeTabGroup: activeGroup, onDidChangeTabGroups: (fn) => { tabListeners.push(fn); return { dispose() { tabListeners = tabListeners.filter((x) => x !== fn); } }; } } : {}),
+				onDidChangeTabs: (fn) => { tabListeners.push(fn); return { dispose() { tabListeners = tabListeners.filter((x) => x !== fn); } }; },
+				close: async (g) => { closed.push(g); },
+			};
+		},
 		async showTextDocument(...a) { shown.push(a); calls.commands.push(['(show)', a[0] && a[0].path]); },
 	},
+	ConfigurationTarget: { Global: 1 },
 	workspace: {
-		getConfiguration(section) { return { get: (k, d) => (config[section + '.' + k] !== undefined ? config[section + '.' + k] : d) }; },
+		getConfiguration(section) { return { get: (k, d) => (config[section + '.' + k] !== undefined ? config[section + '.' + k] : d), update: async (k, v, t) => { updates.push([section + '.' + k, v, t]); } }; },
 		async findFiles() { return found; },
 	},
 	commands: { async executeCommand(...a) { calls.commands.push(a); } },
@@ -54,7 +68,7 @@ const ext = require(path.join(__dirname, '..', '..', 'workspace', 'extension.js'
 
 let n = 0;
 async function test(name, fn) {
-	calls.dialogs.length = 0; calls.commands.length = 0; shown.length = 0;
+	calls.dialogs.length = 0; calls.commands.length = 0; shown.length = 0; closed.length = 0; updates.length = 0; tabListeners = []; activeGroup = undefined;
 	groupsNow = []; config = {}; found = [];
 	await fn(); n++; console.log('  ok - ' + name);
 }
@@ -77,6 +91,19 @@ const ids = () => calls.commands.map((c) => c[0]);
 		assert.strictEqual(await ext.openLocalFolder(vscodeMock), true);
 		assert.deepStrictEqual(calls.commands, [['vscode.openFolder', picked, { forceReuseWindow: true }]]);
 	});
+	await test('choosing a folder is choosing to work on its files: the layout becomes the editor one, before the window is reused', async () => {
+		nextPick = [new Uri('file', '/my-project')];
+		await ext.openLocalFolder(vscodeMock);
+		assert.deepStrictEqual(updates, [['levelcode.web.layout', 'split', 1]]);
+		assert.deepStrictEqual(ids(), ['vscode.openFolder']);
+	});
+	await test('a layout setting that cannot be written does not stop the folder from opening', async () => {
+		nextPick = [new Uri('file', '/my-project')];
+		const real = vscodeMock.workspace.getConfiguration;
+		vscodeMock.workspace.getConfiguration = () => ({ get: () => 'chatFirst', update: async () => { throw new Error('read-only'); } });
+		try { assert.strictEqual(await ext.openLocalFolder(vscodeMock), true); } finally { vscodeMock.workspace.getConfiguration = real; }
+		assert.deepStrictEqual(ids(), ['vscode.openFolder']);
+	});
 	await test('cancelling the picker does nothing', async () => {
 		for (const none of [undefined, []]) {
 			nextPick = none;
@@ -159,6 +186,119 @@ const ids = () => calls.commands.map((c) => c[0]);
 		await ext.applyLayout(vscodeMock, 'split');
 		assert.ok(!ids().includes('workbench.action.moveEditorToRightGroup'));
 	});
+	await test('split with the chat not in the tab model yet: it is waited for, then docked (the status item click on a closed chat)', async () => {
+		groupsNow = [{ viewColumn: 1, tabs: [] }];
+		found = [new Uri('levelcode-scratch', '/README.md')];
+		const run = ext.applyLayout(vscodeMock, 'split', { waitMs: 2000 });
+		await new Promise((r) => setTimeout(r, 20));
+		assert.strictEqual(tabListeners.length, 1, 'it is listening for the tab');
+		groupsNow = [{ viewColumn: 1, tabs: [chatTab] }];   // the host is told about the new tab
+		fireTabs();
+		await run;
+		assert.strictEqual(tabListeners.length, 0, 'and stopped listening');
+		assert.deepStrictEqual(ids(), ['levelcode.ai.focus', '(show)', 'levelcode.ai.focus', 'workbench.action.moveEditorToRightGroup', 'workbench.view.explorer']);
+	});
+	await test('a chat that never comes is given up on after the wait, and the Explorer is still shown', async () => {
+		groupsNow = [{ viewColumn: 1, tabs: [] }];
+		const t0 = Date.now();
+		await ext.applyLayout(vscodeMock, 'split', { waitMs: 60 });
+		assert.ok(Date.now() - t0 >= 50 && Date.now() - t0 < 1500);
+		assert.deepStrictEqual(ids(), ['levelcode.ai.focus', 'workbench.view.explorer']);
+		assert.strictEqual(tabListeners.length, 0);
+	});
+	await test('a start-up does not reveal the Explorer when it is told not to (a visitor who closed it)', async () => {
+		groupsNow = [{ viewColumn: 1, tabs: [fileTab] }, { viewColumn: 2, tabs: [chatTab] }];
+		await ext.applyLayout(vscodeMock, 'split', { explorer: false });
+		assert.ok(!ids().includes('workbench.view.explorer'));
+	});
+	await test('chatFirst after a reload: the empty group that was restored is closed, and a window of only empty groups is left alone', async () => {
+		const emptyRight = { viewColumn: 2, tabs: [] };
+		groupsNow = [{ viewColumn: 1, tabs: [chatTab, fileTab] }, emptyRight];
+		await ext.applyLayout(vscodeMock, 'chatFirst');
+		assert.deepStrictEqual(closed, [[emptyRight]]);
+		closed.length = 0;
+		groupsNow = [{ viewColumn: 1, tabs: [] }, { viewColumn: 2, tabs: [] }];
+		await ext.applyLayout(vscodeMock, 'chatFirst', { waitMs: 10 });
+		assert.deepStrictEqual(closed, [], 'closing every group would leave nothing to put the chat in');
+	});
+	await test('columns, not the order of the list, say which group is on the left (the list is in creation order)', async () => {
+		// the chat's group was created second but sits first on screen
+		groupsNow = [{ viewColumn: 2, tabs: [fileTab, chatTab] }, { viewColumn: 1, tabs: [chatTab, fileTab] }];
+		const left = groupsNow[1];
+		groupsNow = [{ viewColumn: 2, tabs: [fileTab] }, left];
+		await ext.applyLayout(vscodeMock, 'chatFirst');
+		assert.ok(!ids().includes('workbench.action.moveEditorToFirstGroup'), 'the chat is already in column one');
+		calls.commands.length = 0;
+		await ext.applyLayout(vscodeMock, 'split');
+		assert.ok(ids().includes('workbench.action.moveEditorToRightGroup'), 'column one is not the last column: docked to the right');
+	});
+	await test('the move commands wait until the chat is the active editor, not just until its tab exists', async () => {
+		const chatGroup1 = { viewColumn: 2, tabs: [chatTab], activeTab: { input: fileTab.input } };
+		const files = { viewColumn: 1, tabs: [fileTab], activeTab: fileTab };
+		groupsNow = [files, chatGroup1];
+		activeGroup = files;   // the file's group has the focus: a move now would act on the file
+		const run = ext.applyLayout(vscodeMock, 'chatFirst', { waitMs: 1000 });
+		await new Promise((r) => setTimeout(r, 30));
+		assert.ok(!ids().includes('workbench.action.moveEditorToFirstGroup'), 'it moved before the chat was active');
+		activeGroup = { viewColumn: 2, tabs: [chatTab], activeTab: chatTab };
+		groupsNow = [files, { ...chatGroup1, activeTab: chatTab }];
+		fireTabs();
+		await run;
+		assert.ok(ids().includes('workbench.action.moveEditorToFirstGroup'));
+		assert.ok(ids().indexOf('workbench.action.moveEditorToFirstGroup') > ids().indexOf('levelcode.ai.focus'));
+	});
+	await test('an arrangement that is overtaken by a later choice stops: the start-up one does not put the chat back on the right', async () => {
+		groupsNow = [{ viewColumn: 1, tabs: [] }];
+		found = [new Uri('levelcode-scratch', '/README.md')];
+		const early = ext.applyLayout(vscodeMock, 'split', { waitMs: 1000 });   // waiting for the chat tab
+		await new Promise((r) => setTimeout(r, 20));
+		const later = ext.applyLayout(vscodeMock, 'chatFirst', { waitMs: 1000 });
+		await new Promise((r) => setTimeout(r, 20));
+		groupsNow = [{ viewColumn: 1, tabs: [chatTab] }];
+		fireTabs();
+		await Promise.all([early, later]);
+		assert.ok(!ids().includes('workbench.action.moveEditorToRightGroup'), 'the earlier split resumed and docked the chat');
+		assert.ok(!ids().includes('workbench.view.explorer'));
+		assert.ok(ids().includes('workbench.action.closeSidebar'), 'the later one was applied');
+		assert.strictEqual(shown.length, 0);
+	});
+	await test('a chat that never becomes active is given up on, and the layout goes on', async () => {
+		activeGroup = { viewColumn: 1, tabs: [fileTab], activeTab: fileTab };
+		groupsNow = [{ viewColumn: 1, tabs: [fileTab], activeTab: fileTab }, { viewColumn: 2, tabs: [chatTab], activeTab: { input: null } }];
+		const t0 = Date.now();
+		await ext.applyLayout(vscodeMock, 'chatFirst', { waitMs: 80 });
+		assert.ok(Date.now() - t0 < 1500);
+		assert.ok(ids().includes('workbench.action.closeSidebar'));
+		assert.strictEqual(tabListeners.length, 0);
+	});
+	/* ----- start-up ----- */
+	const state = () => { const m = new Map(); return { m, get: (k) => m.get(k), update: async (k, v) => { m.set(k, v); } }; };
+	await test('first start in a workspace: the chosen layout is applied, with the Explorer, and remembered for that workspace', async () => {
+		groupsNow = [{ viewColumn: 1, tabs: [chatTab] }];
+		const st = state();
+		await ext.applyAtStart(vscodeMock, st, { waitMs: 10 });
+		assert.ok(ids().includes('workbench.action.closeSidebar'));
+		assert.strictEqual(st.m.get(ext.APPLIED_KEY), true);
+	});
+	await test('a later start with chatFirst applies nothing: the workbench remembers its own side bars', async () => {
+		groupsNow = [{ viewColumn: 1, tabs: [chatTab] }];
+		const st = state(); st.m.set(ext.APPLIED_KEY, true);
+		await ext.applyAtStart(vscodeMock, st, { waitMs: 10 });
+		assert.deepStrictEqual(ids(), []);
+	});
+	await test('a later start with split docks the chat again and leaves the Explorer as the visitor left it', async () => {
+		config['levelcode.web.layout'] = 'split';
+		groupsNow = [{ viewColumn: 1, tabs: [fileTab, chatTab] }, { viewColumn: 2, tabs: [] }];
+		const st = state(); st.m.set(ext.APPLIED_KEY, true);
+		await ext.applyAtStart(vscodeMock, st, { waitMs: 10 });
+		assert.deepStrictEqual(ids(), ['levelcode.ai.focus', 'workbench.action.moveEditorToRightGroup']);
+	});
+	await test('the first start of a workspace in split reveals the Explorer', async () => {
+		config['levelcode.web.layout'] = 'split';
+		groupsNow = [{ viewColumn: 1, tabs: [fileTab] }, { viewColumn: 2, tabs: [chatTab] }];
+		await ext.applyAtStart(vscodeMock, state(), { waitMs: 10 });
+		assert.ok(ids().includes('workbench.view.explorer'));
+	});
 	await test('no layout closes anything in the other: split never closes the side bars, chatFirst never opens the Explorer', async () => {
 		groupsNow = [{ viewColumn: 1, tabs: [chatTab] }];
 		await ext.applyLayout(vscodeMock, 'split');
diff --git a/web/workspace/extension.js b/web/workspace/extension.js
index 2c96b1f..1c5377f 100644
--- a/web/workspace/extension.js
+++ b/web/workspace/extension.js
@@ -358,10 +358,27 @@ async function seedWelcome(fsp) {
 }
 
 async function activate(context) {
+	// These do not need the scratch store: a browser that refuses IndexedDB (the message below says to open a folder
+	// instead) must still have the command that does it, and the layout.
+	const startLayout = registerLayout(context);
+	context.subscriptions.push(
+		vscode.commands.registerCommand('levelcode.web.openLocalFolder', () => openLocalFolder(vscode)),
+		vscode.commands.registerCommand('levelcode.web.openScratch', () => vscode.commands.executeCommand(
+			'vscode.openFolder', vscode.Uri.from({ scheme: SCHEME, path: HOME }), { forceReuseWindow: true })),
+		vscode.commands.registerCommand('levelcode.web.aboutScratch', async () => {
+			const open = 'Open folder from your computer';
+			const pick = await vscode.window.showInformationMessage(
+				'This is your scratch workspace. Its files are saved in this browser on this computer, and nowhere else. To keep them, download them from the Explorer.',
+				open);
+			if (pick === open) { await vscode.commands.executeCommand('levelcode.web.openLocalFolder'); }
+		}),
+	);
+
 	let db;
 	try { db = await openDb(); }
 	catch (e) {
 		vscode.window.showWarningMessage('LevelCode could not open browser storage, so the scratch workspace is unavailable. Private windows in some browsers block it. Open a folder from your computer instead.');
+		startLayout();
 		return;
 	}
 	const fsp = new ScratchFileSystem(db);
@@ -387,58 +404,8 @@ async function activate(context) {
 	refresh();
 	context.subscriptions.push(item, vscode.workspace.onDidChangeWorkspaceFolders(refresh));
 
-	// The layout switch: a status-bar item and three commands. The commands only change the setting; one listener
-	// applies it, so the same thing happens whether it was chosen here, in a menu or in Settings.
-	const layoutItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Left, 49);
-	layoutItem.command = 'levelcode.web.layout.toggle';
-	const showLayout = () => {
-		const mode = currentLayout(vscode);
-		layoutItem.text = mode === 'split' ? '$(layout-sidebar-right) Editor + chat' : '$(layout-centered) Chat';
-		layoutItem.tooltip = mode === 'split'
-			? 'Layout: Explorer, files and the chat on the right. Click for the chat on its own.'
-			: 'Layout: the chat on its own. Click for Explorer, files and the chat on the right.';
-	};
-	showLayout();
-	layoutItem.show();
-	const setLayout = (mode) => vscode.workspace.getConfiguration('levelcode.web').update('layout', mode, vscode.ConfigurationTarget.Global);
-	context.subscriptions.push(
-		layoutItem,
-		vscode.workspace.onDidChangeConfiguration((e) => {
-			if (!e.affectsConfiguration('levelcode.web.layout')) { return; }
-			showLayout();
-			applyLayout(vscode, currentLayout(vscode)).catch(() => undefined);
-		}),
-		vscode.commands.registerCommand('levelcode.web.layout.chatFirst', async () => {
-			if (currentLayout(vscode) === 'chatFirst') { await applyLayout(vscode, 'chatFirst'); } else { await setLayout('chatFirst'); }
-		}),
-		vscode.commands.registerCommand('levelcode.web.layout.split', async () => {
-			if (currentLayout(vscode) === 'split') { await applyLayout(vscode, 'split'); } else { await setLayout('split'); }
-		}),
-		vscode.commands.registerCommand('levelcode.web.layout.toggle', () => setLayout(currentLayout(vscode) === 'split' ? 'chatFirst' : 'split')),
-	);
-	// At start-up: the first time, the layout chosen by default; after that only the one the workbench does not
-	// remember by itself — the chat panel is not restored on reload, so a docked chat has to be docked again.
-	setTimeout(async () => {
-		try {
-			const mode = currentLayout(vscode);
-			const first = !context.globalState.get('levelcode.web.layoutApplied');
-			if (mode === 'split' || first) { await applyLayout(vscode, mode); }
-			await context.globalState.update('levelcode.web.layoutApplied', true);
-		} catch { /* the window is usable as it is */ }
-	}, 1800);
-
-	context.subscriptions.push(
-		vscode.commands.registerCommand('levelcode.web.openLocalFolder', () => openLocalFolder(vscode)),
-		vscode.commands.registerCommand('levelcode.web.openScratch', () => vscode.commands.executeCommand(
-			'vscode.openFolder', vscode.Uri.from({ scheme: SCHEME, path: HOME }), { forceReuseWindow: true })),
-		vscode.commands.registerCommand('levelcode.web.aboutScratch', async () => {
-			const open = 'Open folder from your computer';
-			const pick = await vscode.window.showInformationMessage(
-				'This is your scratch workspace. Its files are saved in this browser on this computer, and nowhere else. To keep them, download them from the Explorer.',
-				open);
-			if (pick === open) { await vscode.commands.executeCommand('levelcode.web.openLocalFolder'); }
-		}),
-	);
+	// Last: the layout looks for the scratch workspace's README, so the file system has to be there.
+	startLayout();
 }
 
 /* ----- layout ----------------------------------------------------------------------------- */
@@ -446,6 +413,10 @@ async function activate(context) {
 /** The view type the workbench gives LevelCode's chat panel (the key workbench.editor.autoLockGroups is set with). */
 const CHAT_VIEW_TYPE = 'mainThreadWebview-levelcode.ai.chat';
 const LAYOUTS = ['chatFirst', 'split'];
+/** Set once per workspace, when the first layout has been applied (the workbench remembers its own state per workspace). */
+const APPLIED_KEY = 'levelcode.web.layoutApplied';
+/** How long to wait for the chat tab to exist before arranging around it. */
+const CHAT_WAIT_MS = 2500;
 
 /**
  * The tab group holding LevelCode's chat, if it is open.
@@ -461,6 +432,58 @@ function chatGroup(api) {
 	return undefined;
 }
 
+/**
+ * The chat's group, waiting for it if it is not there yet. `levelcode.ai.focus` returns before the extension host
+ * has been told about the new tab, and on a cold start the chat is opened by another extension a moment after
+ * this one is running, so the tab model is read when it changes, not at a guessed time.
+ * @param {typeof import('vscode')} api
+ * @param {number} ms
+ */
+function whenChatGroup(api, ms) {
+	const now = chatGroup(api);
+	const tabs = api.window.tabGroups;
+	if (now || !tabs.onDidChangeTabs) { return Promise.resolve(now); }
+	return new Promise((resolve) => {
+		let sub;
+		let timer;
+		const finish = () => { clearTimeout(timer); if (sub) { sub.dispose(); } resolve(chatGroup(api)); };
+		timer = setTimeout(finish, ms);
+		sub = tabs.onDidChangeTabs(() => { if (chatGroup(api)) { finish(); } });
+	});
+}
+
+/** Whether the chat is the tab on show in the group that has the focus: the editor the move commands act on. */
+function chatIsActive(api) {
+	const g = api.window.tabGroups.activeTabGroup;
+	const t = g && g.activeTab;
+	const input = t && t.input;
+	return !!(input && typeof input === 'object' && input.viewType === CHAT_VIEW_TYPE);
+}
+
+/**
+ * Wait for the chat to be the active editor. `levelcode.ai.focus` returns when the panel is revealed, not when the
+ * workbench has made it the active editor, and the move commands act on the active editor: moved too early they
+ * move the file next to it (or nothing). Gives up after `ms` and goes on — the layout is a courtesy.
+ * @param {typeof import('vscode')} api
+ * @param {number} ms
+ */
+function whenChatActive(api, ms) {
+	const tabs = api.window.tabGroups;
+	if (!tabs.activeTabGroup || chatIsActive(api) || !tabs.onDidChangeTabs) { return Promise.resolve(); }
+	return new Promise((resolve) => {
+		let timer;
+		const subs = [];
+		const finish = () => { clearTimeout(timer); subs.forEach((d) => d.dispose()); resolve(); };
+		timer = setTimeout(finish, ms);
+		const check = () => { if (chatIsActive(api)) { finish(); } };
+		subs.push(tabs.onDidChangeTabs(check));
+		if (tabs.onDidChangeTabGroups) { subs.push(tabs.onDidChangeTabGroups(check)); }
+	});
+}
+
+/** Each arrangement takes a number; one that finds a newer number has been overtaken by a later choice and stops. */
+let generation = 0;
+
 /**
  * Arrange the window for one of the two ways of working:
  *   chatFirst  the chat alone, in the middle, with its conversation list on its left — the way a chat app is used
@@ -469,15 +492,28 @@ function chatGroup(api) {
  *
  * @param {typeof import('vscode')} api
  * @param {'chatFirst'|'split'} mode
+ * @param {{ explorer?: boolean, waitMs?: number }} [opts] explorer: reveal the Explorer in `split` (default; a start-up
+ *   passes false so that an Explorer the visitor closed stays closed, and the focus is not taken from the composer)
  */
-async function applyLayout(api, mode) {
-	const run = (id, ...args) => api.commands.executeCommand(id, ...args);
+async function applyLayout(api, mode, opts = {}) {
+	// Two arrangements can be in flight (the start-up one is waiting for the chat to appear when the visitor clicks
+	// the switch): the later choice wins, and the earlier one must not resume and put things back.
+	const mine = ++generation;
+	const run = async (id, ...args) => { if (mine === generation) { await api.commands.executeCommand(id, ...args); } };
 	await run('levelcode.ai.focus');   // the chat, taking the focus, in whichever group it is (or the active one)
-	const group = chatGroup(api);
-	const groups = api.window.tabGroups.all;
+	const waitMs = opts.waitMs === undefined ? CHAT_WAIT_MS : opts.waitMs;
+	const group = await whenChatGroup(api, waitMs);
+	if (group) { await whenChatActive(api, Math.min(waitMs, 1500)); }
+	if (mine !== generation) { return; }
+	const columns = () => api.window.tabGroups.all.map((g) => g.viewColumn);
 	if (mode === 'chatFirst') {
 		// Bring the chat back from a side group, and put the side bars away: the page is the conversation.
-		if (group && groups.length > 1 && group.viewColumn !== groups[0].viewColumn) { await run('workbench.action.moveEditorToFirstGroup'); }
+		const all = api.window.tabGroups.all;
+		if (group && all.length > 1 && group.viewColumn !== Math.min(...columns())) { await run('workbench.action.moveEditorToFirstGroup'); }
+		// A reload brings back the groups it had; an empty one would take half the window.
+		const left = api.window.tabGroups.all;
+		const empty = left.filter((g) => g.tabs.length === 0);
+		if (empty.length && empty.length < left.length && api.window.tabGroups.close && mine === generation) { await api.window.tabGroups.close(empty); }
 		await run('workbench.action.closeSidebar');
 		await run('workbench.action.closePanel');
 		await run('workbench.action.closeAuxiliaryBar');
@@ -486,18 +522,20 @@ async function applyLayout(api, mode) {
 	// split: the chat in a group of its own on the right (the setting locks it there, so files open beside it),
 	// the Explorer on the left, and a file in the group that is left. The file comes FIRST: a group that is
 	// emptied by moving the chat out of it is closed, and the chat would be alone again.
+	const groups = api.window.tabGroups.all;
 	if (group && groups.length < 2) {
 		const found = await api.workspace.findFiles('README.md', undefined, 1);
+		if (mine !== generation) { return; }
 		if (found.length) { await api.window.showTextDocument(found[0], { viewColumn: api.ViewColumn.One, preserveFocus: true, preview: false }); }
 		await run('levelcode.ai.focus');
 		await run('workbench.action.moveEditorToRightGroup');
-	} else if (group && group.tabs.length > 1 && group.viewColumn !== groups[groups.length - 1].viewColumn) {
+	} else if (group && group.tabs.length > 1 && group.viewColumn !== Math.max(...columns())) {
 		// A reload brings the two groups back, but the chat is opened again in the first of them, next to a file
 		// (the right one is empty and, being empty, not the place the setting that keeps files out of the chat's
 		// group has had a chance to claim). Dock it.
 		await run('workbench.action.moveEditorToRightGroup');
 	}
-	await run('workbench.view.explorer');
+	if (opts.explorer !== false) { await run('workbench.view.explorer'); }
 }
 
 /** @param {typeof import('vscode')} api */
@@ -506,6 +544,59 @@ function currentLayout(api) {
 	return LAYOUTS.includes(v) ? v : 'chatFirst';
 }
 
+/**
+ * What to do at start-up. The first time in a workspace the chosen layout is applied (the Explorer included); after
+ * that only a docked layout is, because the chat panel is not restored by a reload and the workbench remembers
+ * everything else — a side bar the visitor closed stays closed.
+ *
+ * @param {typeof import('vscode')} api
+ * @param {{ get(k: string): any, update(k: string, v: any): Thenable<void> }} state the workspace's own state
+ * @param {{ waitMs?: number }} [opts]
+ */
+async function applyAtStart(api, state, opts = {}) {
+	const mode = currentLayout(api);
+	const first = !state.get(APPLIED_KEY);
+	if (mode === 'split' || first) { await applyLayout(api, mode, { explorer: first, waitMs: opts.waitMs }); }
+	await state.update(APPLIED_KEY, true);
+}
+
+/**
+ * The layout switch: a status-bar item and three commands. The commands only change the setting; one listener
+ * applies it, so the same thing happens whether it was chosen here, in a menu or in Settings.
+ * @param {import('vscode').ExtensionContext} context
+ * @returns {() => void} start-up: arranges the window once the rest of the extension is ready
+ */
+function registerLayout(context) {
+	const layoutItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Left, 49);
+	layoutItem.command = 'levelcode.web.layout.toggle';
+	const showLayout = () => {
+		const mode = currentLayout(vscode);
+		layoutItem.text = mode === 'split' ? '$(layout-sidebar-right) Editor + chat' : '$(layout-centered) Chat';
+		layoutItem.tooltip = mode === 'split'
+			? 'Layout: Explorer, files and the chat on the right. Click for the chat on its own.'
+			: 'Layout: the chat on its own. Click for Explorer, files and the chat on the right.';
+	};
+	showLayout();
+	layoutItem.show();
+	const setLayout = (mode) => vscode.workspace.getConfiguration('levelcode.web').update('layout', mode, vscode.ConfigurationTarget.Global);
+	context.subscriptions.push(
+		layoutItem,
+		vscode.workspace.onDidChangeConfiguration((e) => {
+			if (!e.affectsConfiguration('levelcode.web.layout')) { return; }
+			showLayout();
+			applyLayout(vscode, currentLayout(vscode)).catch(() => undefined);
+		}),
+		vscode.commands.registerCommand('levelcode.web.layout.chatFirst', async () => {
+			if (currentLayout(vscode) === 'chatFirst') { await applyLayout(vscode, 'chatFirst'); } else { await setLayout('chatFirst'); }
+		}),
+		vscode.commands.registerCommand('levelcode.web.layout.split', async () => {
+			if (currentLayout(vscode) === 'split') { await applyLayout(vscode, 'split'); } else { await setLayout('split'); }
+		}),
+		vscode.commands.registerCommand('levelcode.web.layout.toggle', () => setLayout(currentLayout(vscode) === 'split' ? 'chatFirst' : 'split')),
+	);
+	return () => { applyAtStart(vscode, context.workspaceState).catch(() => { /* the window is usable as it is */ }); };
+}
+
 /**
  * Open a folder from the user's computer: the browser's own directory picker, then that folder as the workspace.
  *
@@ -528,10 +619,13 @@ async function openLocalFolder(api) {
 		title: 'Open a folder from your computer',
 	});
 	if (!picked || picked.length === 0) { return false; }
+	// Choosing a folder is choosing to work on its files: the window that comes back has the Explorer and the chat
+	// beside the files, not the chat alone with the folder out of sight. One click on the status bar undoes it.
+	try { await api.workspace.getConfiguration('levelcode.web').update('layout', 'split', api.ConfigurationTarget.Global); } catch { /* the layout is a courtesy */ }
 	await api.commands.executeCommand('vscode.openFolder', picked[0], { forceReuseWindow: true });
 	return true;
 }
 
 function deactivate() { }
 
-module.exports = { activate, deactivate, openLocalFolder, applyLayout, currentLayout, chatGroup, LAYOUTS };
+module.exports = { activate, deactivate, openLocalFolder, applyLayout, applyAtStart, currentLayout, chatGroup, whenChatGroup, whenChatActive, LAYOUTS, APPLIED_KEY };
diff --git a/web/workspace/package.json b/web/workspace/package.json
index 2260913..3f467a7 100644
--- a/web/workspace/package.json
+++ b/web/workspace/package.json
@@ -37,9 +37,6 @@
 					"markdownDescription": "How the window is arranged. Also in the status bar and in the Command Palette under **LevelCode: Layout**."
 				}
 			}
-		},
-		"keybindings": [
-			{ "command": "levelcode.web.layout.toggle", "key": "ctrl+alt+l", "mac": "cmd+alt+l" }
-		]
+		}
 	}
 }