Skip to content

web: a chat-first look, light/dark themes and a layout switch for the browser edition - #106

Draft
ndemianc wants to merge 2 commits into
feat/web-editionfrom
feat/web-look
Draft

ndemianc wants to merge 2 commits into
feat/web-editionfrom
feat/web-look

Conversation

@ndemianc

Copy link
Copy Markdown
Contributor

Stacked on #105 (feat/web-edition): merge that first, or retarget this at develop after it lands.

What

The browser edition opens on the chat, the way a chat app does, instead of on an IDE with a chat in it — and one click gives the editor layout (Explorer, files, the chat docked on the right).

  • Chat first. A centred greeting with four starters, one rounded composer in a 768 px reading column, the conversation list docked on the left from 1000 px wide.
  • Light and dark follow the system, with the build's own two themes (neutral chrome, the editor one step lighter, one violet accent).
  • Layout switch in the status bar (levelcode.web.layout: chatFirst | split), also as three commands. Opening a folder from the computer switches to the editor layout.
  • Quieter workbench: no Welcome page, no source control / run / extensions entries, no second (workbench) Chat view, no minimap or breadcrumbs.

How, without forking the workbench

Piece Where
Themes + first paint web/theme/levelcode-web-theme, initialColorTheme
Chat skin web/ai-extension/skin.js, skin/chat.{css,js} — three exact insertions into the browser build's copy of media/chat.html, every rule under body.lc-web; the build fails if the page stops having the places it is cut into
Chrome web/chrome.css, configuration defaults (web/lib/config.mjs)
Layout web/workspace/extension.js

docs/WEB.md has a new "The look and the layout" section with the levers, what each one depends on, and what to check on a Code-OSS bump.

The desktop app is unchanged

Nothing under extensions/, branding/ or patches/ is touched; extensions/levelcode-ai/media/chat.html and extensions/levelcode-themes/package.json are byte-identical to the parent. The only reachable path into the desktop gate is the two new unit suites (scripts/test-extensions.sh discovers web/test/unit/*.test.js).

Tests

  • Unit gate: 73 files, on macOS (Node 24) and Linux (Node 18, network refused). New: skin, theme, extensions suites; the layout, main.js helpers and copy rewrites extended. Mutation-checked: each defect put back turns its test red.
  • web/test/e2e-look.mjs (new, 26 checks, 10 consecutive runs green): the skin, the rail, light/dark, no Welcome page, no built-in Chat view, both layouts, docked again after a reload. e2e.mjs 30/30 (release and isolated-origin layouts), e2e-signin-tab.mjs 20/20, e2e-byok.mjs 5/5.
  • An independent five-lens review that ran the build (logic, desktop regression and build integrity, accessibility, visual QA of the chat page in every state, visual QA of the workbench): 44 findings, each independently verified, 0 refuted. The second commit fixes them; the ones left are listed below.

Found by running it, not reading it

  • create() returns a disposable: workbench.commands is undefined, the embedder's command API is the module's commands. My first "hide the built-in Chat" helper ran inside a try and did nothing, and a unit test with a stand-in of the same shape passed.
  • An extension's configurationDefaults outrank the embedder's: levelcode-themes pins the desktop's default theme, so the staged copy has that key removed.
  • A page-level color-scheme made the Markdown preview paint white under a dark theme.
  • modernUI fades the top 24 px of every editor, line one included.

Not done / not run

  • Phones: the chat page is responsive to 420 px, the workbench around it is not. Safari and Firefox are untested.
  • The workbench's own "Chat: …" palette commands and the menus of features this edition lacks still lead to empty views; the panel toggle opens an empty Terminal (a terminal is the next stage).
  • workbench.experimental.modernUI is Code-OSS's experimental flag; the pinned checkout is the only one run.
  • Whether a closed tab always flushes the Explorer's visibility before the next load was not measured.
  • The Markdown preview rendered an empty body in headless Chrome on the old and the new build alike; not investigated.

Draft: for review, not for merge until #105 is decided.

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).
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).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant