From aac2b1c0689aefeb140e08c24278ec486611fe10 Mon Sep 17 00:00:00 2001 From: Agando Date: Sat, 7 Nov 2026 18:19:47 +0100 Subject: feat(newos4): six interface modes (easy -> cockpit) over one terminal Symptom: newOS4 had exactly one layout. A first-time user had no way in that did not require learning commands, and an operator had no surface showing live runtime state; the only way to see heap/VFS/tool-call telemetry was to type cat /sys/... Root cause: no UI layer existed. main.html hard-codes one flex column, and terminal.js binds the stock nodes by id at construction, so an alternative layout had to either duplicate the output stream or reparent the real nodes. Fix: - modules/core/module-uishell.js (new): mode registry, #ui-root, stock-node snapshot/restore, identity check that reverts to classic when a mode removes or clones #terminal-container, shell-docked #ui-foot (the AI stop button exists in every mode), ui command, gated first-run picker, ?ui= honoured only if the mode actually registers, lazy mode loading via the same loader ext modules use. - modules/ext/ui-{easy,chat,studio,workspace,commander,cockpit}.js (new): six reparenting skins with scoped CSS. Workspace/commander/cockpit read real /sys/* mounts and captured command output; no value on screen is invented. - modules/test/test-ui-shell.js (new): 25 assertions - teardown, clone rejection, failed-mount fallback, footer docking, destructive-mode rejection. - terminal.js: register the shell; make one failing ext module stop aborting the rest of the serial load loop (it did, silently, which is why six ui-* files at the end of extKeys never loaded). - module-loader.js: LATEST_VER v4.6.152. The six ui-* keys are deliberately NOT in extKeys - see the rate-limit note below. - admin/scripts/probe-ui-modes.py (new): 6 modes x 2 viewports plus a --cycle pass that switches all seven states on ONE page and asserts the output node keeps its identity. Also fixed, found while testing (pre-existing, production-affecting): - nginx limit_req zone=webx11 burst 50 -> 200. One newOS4 boot fans out ~40 assets; the bucket emptied mid-boot and every later module got 503. Measured in webx11.error.log: "limiting requests, excess: 50.696 by zone webx11" against modules/ext/ui-chat.js. A reload within ~50 s silently broke modules. Sustained rate unchanged at 60r/m. Verified: node modules/test/test-ui-shell.js -> 25/25; removing both _restoreStock() calls measures 20/25 with five FAILs; probe-ui-modes.py --cycle against production -> ALL PASS, 13 checks; served bytes: v4.6.152 x3 in main.html, class UIShellModule x1 in core-bundle.js, six ui-* packages in packages.json. --- modules/ext/ui-chat.js | 99 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 99 insertions(+) create mode 100644 modules/ext/ui-chat.js (limited to 'modules/ext/ui-chat.js') diff --git a/modules/ext/ui-chat.js b/modules/ext/ui-chat.js new file mode 100644 index 0000000..32c67e7 --- /dev/null +++ b/modules/ext/ui-chat.js @@ -0,0 +1,99 @@ +// UI mode: chat (level 2). Single column, sticky composer, slash chips, raw-terminal drawer. +class UIChatMode { + constructor() { this.commands = {}; this.terminal = null; } + requirements() { return { met: true, missing: [] }; } + getHelpInfo() { return {}; } + registerCommands() {} + init(terminal) { + this.terminal = terminal; + if (!terminal.uiShell) return; + terminal.uiShell.registerMode({ + id: 'chat', label: 'Chat', level: 2, icon: '💬', + tagline: 'Conversation first.', + mount: (api) => this.mount(api) + }); + } + mount(api) { + api.injectCSS('chat', ` +body[data-ui-mode="chat"] #ui-root { display: flex; flex-direction: column; } +#chat-head { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 10px 14px; + border-bottom: 1px solid var(--border-color); background: var(--bg-secondary); } +#chat-head .title { font-weight: 600; flex: 1 1 auto; } +#chat-head button { min-height: 44px; } +#chat-stream { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 14px; + display: flex; flex-direction: column; gap: 6px; max-width: 860px; width: 100%; margin: 0 auto; } +#chat-stream .output-line { font-family: inherit; font-size: .95em; line-height: 1.5; + white-space: pre-wrap; word-break: break-word; padding: 10px 12px; border-radius: 14px; + background: var(--bg-secondary); border: 1px solid var(--border-color); max-width: 88%; } +#chat-stream .output-line.info { background: var(--ai-bg-color); border-color: var(--border-color); color: var(--ai-text-color); } +#chat-stream .output-line.error { border-color: var(--error-color); } +#chat-chips { flex: 0 0 auto; padding: 8px 14px 0; overflow-x: auto; white-space: nowrap; + max-width: 860px; margin: 0 auto; width: 100%; } +#chat-composer { flex: 0 0 auto; padding: 8px 14px 14px; max-width: 860px; margin: 0 auto; width: 100%; } +#chat-composer #input-area { display: flex; gap: 8px; align-items: flex-end; background: var(--bg-secondary); + border: 1px solid var(--border-color); border-radius: 16px; padding: 8px; } +#chat-composer .prompt-label { display: none; } +#chat-composer #command-input { width: 100%; font-family: inherit; font-size: 1em; min-height: 44px; background: transparent; border: 0; } +#chat-composer #autocomplete-dropdown { display: none; } +body[data-ui-mode="chat"] #raw-drawer { position: absolute; inset: 0 0 34px 0; z-index: 60; + background: var(--bg-color); display: none; flex-direction: column; padding: 10px; } +body[data-ui-mode="chat"] #raw-drawer.open { display: flex; } +body[data-ui-mode="chat"] #raw-drawer #terminal-container { flex: 1 1 auto; min-height: 0; overflow: auto; + font-family: var(--font-primary); font-size: .9em; } +`); + + const root = api.root; + root.innerHTML = ''; + const head = api.el('div', { id: 'chat-head' }); + head.appendChild(api.el('span', { class: 'title', text: 'newOS4' })); + const rawBtn = api.el('button', { class: 'wx11-btn', text: '⌨ Plain terminal' }); + const uiBtn = api.el('button', { class: 'wx11-btn', text: '⇄ Style' }); + uiBtn.addEventListener('click', () => api.exec('ui picker')); + head.appendChild(uiBtn); + head.appendChild(rawBtn); + + const stream = api.el('div', { id: 'chat-stream' }); + const chips = api.el('div', { id: 'chat-chips' }); + const composer = api.el('div', { id: 'chat-composer' }); + const drawer = api.el('div', { id: 'raw-drawer' }); + + const chipMap = { '/help': 'help', '/files': 'ls', '/modules': 'modules', '/sys': 'cat /sys/info' }; + ['/help', '/files', '/modules', '/sys', '/style'].forEach(label => { + const chip = api.el('span', { class: 'wx11-chip', text: label }); + chip.addEventListener('click', () => { + if (label === '/style') return void api.exec('ui picker'); + api.exec(chipMap[label]); + }); + chips.appendChild(chip); + }); + + root.appendChild(head); + root.appendChild(stream); + root.appendChild(chips); + root.appendChild(composer); + root.appendChild(drawer); + + api.attach(stream, api.stock.output); // visible stream first + api.attach(composer, api.stock.input); + // Do NOT attach the output to the drawer here: it is one node, the last attach wins, and + // the drawer starts hidden — the stream would render empty. The toggle moves it. + + const field = document.getElementById('command-input'); + if (field) field.placeholder = 'Message newOS4…'; + + let open = false; + rawBtn.addEventListener('click', () => { + open = !open; + if (open) { api.attach(drawer, api.stock.output); drawer.classList.add('open'); } + else { api.attach(stream, api.stock.output); drawer.classList.remove('open'); } + rawBtn.textContent = open ? '💬 Chat view' : '⌨ Plain terminal'; + }); + + return () => { + open = false; + drawer.classList.remove('open'); + const f = document.getElementById('command-input'); + if (f) f.placeholder = 'Type a command...'; // leave the next mode a clean prompt + }; + } +} -- cgit v1.2.3