diff options
Diffstat (limited to 'crates/chat-server')
| -rw-r--r-- | crates/chat-server/Cargo.toml | 2 | ||||
| -rw-r--r-- | crates/chat-server/src/http.rs | 20 | ||||
| -rw-r--r-- | crates/chat-server/src/main.rs | 54 | ||||
| -rw-r--r-- | crates/chat-server/src/maintenance.rs | 61 | ||||
| -rw-r--r-- | crates/chat-server/src/store.rs | 13 | ||||
| -rw-r--r-- | crates/chat-server/tests/browser.mjs | 94 | ||||
| -rw-r--r-- | crates/chat-server/web/app.js | 140 | ||||
| -rw-r--r-- | crates/chat-server/web/index.html | 68 | ||||
| -rw-r--r-- | crates/chat-server/web/javascript.html | 6 | ||||
| -rw-r--r-- | crates/chat-server/web/style.css | 130 |
10 files changed, 453 insertions, 135 deletions
diff --git a/crates/chat-server/Cargo.toml b/crates/chat-server/Cargo.toml index eecebf6..709c37f 100644 --- a/crates/chat-server/Cargo.toml +++ b/crates/chat-server/Cargo.toml @@ -27,11 +27,11 @@ categories = ["web-programming"] publish = false [dependencies] +stack-config = { path = "../config", version = "0.1.0" } anyhow = "1" axum = { version = "0.8", default-features = false, features = ["http1", "tokio", "json"] } base64 = "0.22" clap = { version = "4.6", features = ["derive"] } -dotenvy = "0.15" hex = "0.4" openssl = "0.10" rusqlite = { version = "0.41", default-features = false, features = ["bundled", "backup"] } diff --git a/crates/chat-server/src/http.rs b/crates/chat-server/src/http.rs index bb618d9..1c7286f 100644 --- a/crates/chat-server/src/http.rs +++ b/crates/chat-server/src/http.rs @@ -33,6 +33,7 @@ struct App { permits: Arc<Semaphore>, root: PathBuf, origin: String, + public: std::collections::BTreeMap<String, String>, } fn secured(mut response: Response) -> Response { @@ -129,22 +130,33 @@ async fn asset(State(app): State<App>, uri: axum::http::Uri) -> Response { "/LICENSE" => ("LICENSE", "text/plain; charset=utf-8"), _ => return secured(StatusCode::NOT_FOUND.into_response()), }; - tokio::fs::read(app.root.join(path)).await.map_or_else( - |_| secured(StatusCode::NOT_FOUND.into_response()), - |bytes| secured(([("content-type", mime)], bytes).into_response()), - ) + let Ok(bytes) = tokio::fs::read(app.root.join(path)).await else { + return secured(StatusCode::NOT_FOUND.into_response()); + }; + if matches!(uri.path(), "/" | "/javascript.html") { + let rendered = String::from_utf8(bytes) + .map_err(anyhow::Error::from) + .and_then(|source| stack_config::render(&source, &app.public)); + return rendered.map_or_else( + |_| secured(StatusCode::INTERNAL_SERVER_ERROR.into_response()), + |html| secured(([("content-type", mime)], html).into_response()), + ); + } + secured(([("content-type", mime)], bytes).into_response()) } pub(crate) async fn serve( listener: tokio::net::TcpListener, service: Service, root: &Path, + public: std::collections::BTreeMap<String, String>, ) -> Result<()> { let app = App { origin: service.origin.clone(), service: Arc::new(Mutex::new(service)), permits: Arc::new(Semaphore::new(4)), root: root.to_path_buf(), + public, }; let routes = Router::new() .route("/api", post(api)) diff --git a/crates/chat-server/src/main.rs b/crates/chat-server/src/main.rs index 6c7f4e1..cfd3e7a 100644 --- a/crates/chat-server/src/main.rs +++ b/crates/chat-server/src/main.rs @@ -16,6 +16,7 @@ #![doc = "Local experimental chat server with ciphertext-only durable storage."] mod http; +mod maintenance; mod service; mod store; @@ -31,10 +32,18 @@ use std::process::ExitCode; struct Arguments { #[arg(long, default_value = ".")] root: PathBuf, - #[arg(long, default_value = "127.0.0.1:9080")] - bind: SocketAddr, #[arg(long)] + bind: Option<SocketAddr>, + #[arg(long, conflicts_with_all = ["reset_owner", "owner_fingerprint", "snapshot"])] init: bool, + #[arg(long, value_name = "FINGERPRINT", conflicts_with_all = ["owner_fingerprint", "snapshot"], help = "Permanently clear the matching owner registration and all chat history after key loss")] + reset_owner: Option<String>, + #[arg( + long, + conflicts_with = "snapshot", + help = "Print the registered owner's public fingerprint" + )] + owner_fingerprint: bool, #[arg(long)] snapshot: Option<PathBuf>, } @@ -64,7 +73,7 @@ fn initialize(root: &std::path::Path) -> Result<()> { { writeln!(file, "CHAT_ORIGIN=http://127.0.0.1:9080")?; } - Ok(()) + stack_config::initialize_public(root) } async fn run(arguments: Arguments) -> Result<()> { @@ -72,15 +81,28 @@ async fn run(arguments: Arguments) -> Result<()> { if arguments.init { return initialize(&root); } + let configuration = stack_config::Config::load(&root)?; + let bind = arguments.bind.unwrap_or(configuration.chat_bind()?); let data = root.join("var/data/chat"); std::fs::create_dir_all(&data)?; std::fs::set_permissions(&data, std::os::unix::fs::PermissionsExt::from_mode(0o700))?; let database = data.join("chat.sqlite"); - let store = store::Store::open(&database)?; + let _server_lock = if arguments.snapshot.is_none() && !arguments.owner_fingerprint { + Some(maintenance::lock(&data)?) + } else { + None + }; + let mut store = store::Store::open(&database)?; std::fs::set_permissions( &database, std::os::unix::fs::PermissionsExt::from_mode(0o600), )?; + if arguments.owner_fingerprint { + return maintenance::fingerprint(&store); + } + if let Some(expected) = arguments.reset_owner { + return maintenance::reset(&mut store, &expected, bind); + } if let Some(destination) = arguments.snapshot { store.snapshot(&destination)?; std::fs::set_permissions( @@ -90,28 +112,24 @@ async fn run(arguments: Arguments) -> Result<()> { return Ok(()); } ensure!( - arguments.bind.ip().is_loopback(), + bind.ip().is_loopback(), "Experimental server must bind to loopback" ); - let settings = dotenvy::from_path_iter(root.join(".env"))? - .collect::<std::result::Result<std::collections::HashMap<_, _>, _>>()?; - let origin = settings - .get("CHAT_ORIGIN") - .context("Run --init to configure chat")?; + let origin = configuration.value("CHAT_ORIGIN")?; ensure!( - origin == &format!("http://{}", arguments.bind), - "This development server requires CHAT_ORIGIN to match its loopback bind address" + origin == format!("http://{bind}"), + "CHAT_ORIGIN must match the loopback CHAT_BIND or --bind address" ); - let setup = settings - .get("CHAT_SETUP_TOKEN") - .context("Missing CHAT_SETUP_TOKEN")?; - let state = service::Service::new(store, origin.clone(), setup.clone()); - let listener = tokio::net::TcpListener::bind(arguments.bind).await?; + let setup = configuration + .value("CHAT_SETUP_TOKEN") + .context("Run --init to configure chat")?; + let state = service::Service::new(store, origin.to_owned(), setup.to_owned()); + let listener = tokio::net::TcpListener::bind(bind).await?; writeln!( std::io::stdout().lock(), "Experimental chat: {origin} (owner setup: /#setup)" )?; - http::serve(listener, state, &root).await + http::serve(listener, state, &root, configuration.public_values(None)?).await } #[tokio::main] diff --git a/crates/chat-server/src/maintenance.rs b/crates/chat-server/src/maintenance.rs new file mode 100644 index 0000000..eac689d --- /dev/null +++ b/crates/chat-server/src/maintenance.rs @@ -0,0 +1,61 @@ +// Copyright (C) 2026 Doan Luu Duc Tai <doan@luuduct.ai> +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as +// published by the Free Software Foundation, either version 3 of the +// License, or (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see <https://www.gnu.org/licenses/>. + +use crate::store::Store; +use anyhow::{Context, Result, ensure}; +use std::fs::{File, OpenOptions}; +use std::io::Write; +use std::net::{SocketAddr, TcpListener}; +use std::os::unix::fs::OpenOptionsExt; +use std::path::Path; + +pub(crate) fn lock(directory: &Path) -> Result<File> { + let file = OpenOptions::new() + .read(true) + .write(true) + .create(true) + .truncate(false) + .mode(0o600) + .open(directory.join("server.lock"))?; + file.try_lock().context( + "Chat is already running. Stop it before starting another server or resetting the owner.", + )?; + Ok(file) +} + +pub(crate) fn fingerprint(store: &Store) -> Result<()> { + let certificate = store.owner()?.context("No owner identity is registered")?; + writeln!( + std::io::stdout().lock(), + "{}", + stack_chat_crypto::public_identity(&certificate)? + )?; + Ok(()) +} + +pub(crate) fn reset(store: &mut Store, expected: &str, address: SocketAddr) -> Result<()> { + ensure!( + address.ip().is_loopback(), + "Reset must use the local chat address" + ); + let _port = + TcpListener::bind(address).context("Stop the chat server before resetting its owner")?; + store.reset_owner(expected)?; + writeln!( + std::io::stdout().lock(), + "Owner registration and chat history cleared. Restart chat and use OWNER SETUP to create a new owner file. Existing backup archives were not changed." + )?; + Ok(()) +} diff --git a/crates/chat-server/src/store.rs b/crates/chat-server/src/store.rs index fce3bb3..0e09de7 100644 --- a/crates/chat-server/src/store.rs +++ b/crates/chat-server/src/store.rs @@ -45,6 +45,19 @@ impl Store { Ok(()) } + pub(crate) fn reset_owner(&mut self, expected: &str) -> Result<()> { + let owner = self.owner()?.context("No owner identity is registered")?; + let fingerprint = stack_chat_crypto::public_identity(&owner)?; + ensure!( + expected.len() == 64 && expected.eq_ignore_ascii_case(&fingerprint), + "Owner fingerprint does not match; no data was cleared" + ); + let transaction = self.connection.transaction()?; + transaction.execute_batch("DELETE FROM messages; DELETE FROM conversations; DELETE FROM metadata WHERE key='owner'; DELETE FROM sqlite_sequence WHERE name='messages';")?; + transaction.commit()?; + Ok(()) + } + pub(crate) fn register(&self, id: &str, cert: &str) -> Result<()> { if self.connection.query_row( "SELECT EXISTS(SELECT 1 FROM conversations WHERE id=?1)", diff --git a/crates/chat-server/tests/browser.mjs b/crates/chat-server/tests/browser.mjs index a56c7cc..e12c3da 100644 --- a/crates/chat-server/tests/browser.mjs +++ b/crates/chat-server/tests/browser.mjs @@ -19,12 +19,12 @@ import { mkdtemp, readFile, writeFile, symlink, rm, mkdir, rename } from 'node:f import { tmpdir } from 'node:os'; import { resolve, join } from 'node:path'; import { randomBytes } from 'node:crypto'; -import { spawn, execFileSync } from 'node:child_process'; +import { spawn, execFileSync, spawnSync } from 'node:child_process'; import { chromium, firefox } from '../../../.tools/browser/node_modules/playwright/index.mjs'; const root = await mkdtemp(join(tmpdir(), 'stack-chat-e2e-')); const token = randomBytes(32).toString('hex'); -const origin = 'http://127.0.0.1:9080'; +const origin = `http://127.0.0.1:${process.env.CHAT_TEST_PORT || '9081'}`; const password = 'browser-test-only-unique-passphrase'; await writeFile(join(root, '.env'), `CHAT_ORIGIN=${origin}\nCHAT_SETUP_TOKEN=${token}\n`, {mode:0o600}); for (const path of ['crates','target','docs','web','LICENSE']) await symlink(resolve(path), join(root,path)); @@ -32,7 +32,7 @@ await mkdir(join(root,'var/build'), {recursive:true}); let server; let serverErrors = ''; async function launchServer() { - server = spawn(resolve('target/debug/stack-chat-server'), ['--root',root], {stdio:['ignore','pipe','pipe']}); + server = spawn(resolve('target/debug/stack-chat-server'), ['--root',root,'--bind',new URL(origin).host], {stdio:['ignore','pipe','pipe']}); server.stderr.on('data', bytes => { serverErrors += bytes.toString(); }); await Promise.race([ new Promise((ready, reject) => { server.stdout.once('data', ready); server.once('exit', () => reject(new Error(serverErrors || 'Server exited'))); }), @@ -78,8 +78,10 @@ async function page() { }); return page; } +async function waitEntry(page) { await page.locator('#create-choice').waitFor({state:'visible'}); } async function waitStatus(page, text) { await page.waitForFunction(value => document.getElementById('status').textContent.includes(value), text); } async function create(page, name, owner = false) { + const previousAuthentications = bodies.filter(body => body.op === 'authenticate').length; if (owner) await page.fill('#setup-token', token); else await page.click('#create-choice'); await page.fill('#name', name); await page.fill('#new-password', password); @@ -90,7 +92,7 @@ async function create(page, name, owner = false) { const bytes = await readFile(await download.path()); await waitStatus(page,'Reopen your downloaded'); assert.equal(await page.locator('#chat').isVisible(), false); - assert.equal(bodies.some(body => body.op === 'authenticate'), owner ? false : true); + assert.equal(bodies.filter(body => body.op === 'authenticate').length,previousAuthentications); return {name:'identity.chat',mimeType:'application/octet-stream',buffer:bytes}; } async function unlock(page, file, phrase = password) { @@ -126,17 +128,24 @@ async function verifyLibreJS() { try { if (libre) await verifyLibreJS(); const owner = await page(); - const response = await owner.goto(origin + '/#setup'); + const response = await owner.goto(origin); + await owner.locator('#owner-choice').waitFor({state:'visible'}); + await owner.click('#owner-choice'); assert.match(response.headers()['cache-control'], /no-store/); assert.match(response.headers()['content-security-policy'], /frame-ancestors 'none'/); - await waitStatus(owner,'Owner setup.'); + await owner.locator('#setup-token').waitFor({state:'visible'}); + assert.match(await owner.locator('#create-title').textContent(),/owner only/); + assert.equal(await owner.locator('.introduction h1').count(),0); + assert.equal(await owner.locator('.libre-badge a[rel=jslicense]').count(),1); + assert.equal(await owner.locator('.source-footer a[rel=jslicense]').count(),0); + assert.equal(await owner.evaluate(() => document.scrollingElement === document.documentElement),true); const ownerFile = await create(owner,'Doan',true); await unlock(owner,ownerFile); await waitStatus(owner,'Unlocked in memory only'); assert.match(await owner.locator('#who').textContent(), /OWNER/); const visitor = await page(); await visitor.goto(origin); - await waitStatus(visitor,'Choose CREATE'); + await waitEntry(visitor); const visitorFile = await create(visitor,'A friend'); assert.ok(!visitorFile.buffer.toString().includes('A friend')); await unlock(visitor,visitorFile,'wrong-but-long-password'); @@ -182,7 +191,7 @@ try { await waitStatus(visitor,'Encrypted message stored'); assert.match(await visitor.locator('#counts').textContent(),/Total: 3/); await visitor.reload(); - await waitStatus(visitor,'Choose CREATE'); + await waitEntry(visitor); assert.equal(await visitor.locator('#messages li').count(),0); assert.equal(await visitor.locator('#file').inputValue(),''); assert.equal(await visitor.locator('#password').inputValue(),''); @@ -209,7 +218,7 @@ try { await rename(snapshot,join(root,'var/data/chat/chat.sqlite')); await launchServer(); await visitor.reload(); - await waitStatus(visitor,'Choose CREATE'); + await waitEntry(visitor); await visitor.click('#open-choice'); await unlock(visitor,visitorFile); await waitStatus(visitor,'Unlocked in memory only'); @@ -219,9 +228,11 @@ try { await waitStatus(visitor,'Selected history decrypted'); assert.equal(await visitor.locator('#messages li').count(),3); assert.ok((await visitor.locator('#messages p').allTextContents()).includes(malicious)); - await owner.reload(); - await waitStatus(owner,'Choose CREATE'); - await owner.click('#open-choice'); + await owner.goto(origin); + await waitEntry(owner); + await owner.click('#owner-choice'); + await owner.locator('#owner-access').waitFor({state:'visible'}); + await owner.click('#owner-open'); await unlock(owner,ownerFile); await waitStatus(owner,'Unlocked in memory only'); assert.match(await owner.locator('#who').textContent(),/OWNER/); @@ -236,6 +247,30 @@ try { assert.equal(await visitor.locator('#messages li').count(),0); assert.equal(await visitor.locator('#password').inputValue(),''); assert.equal(await visitor.locator('#chat').isVisible(),false); + await visitor.click('#open-choice'); + await unlock(visitor,visitorFile); + await waitStatus(visitor,'Unlocked in memory only'); + for (let index = 1; index <= 51; index += 1) { + await visitor.fill('#text',`Batch fixture ${index}`); + await visitor.click('#send-form button'); + await waitStatus(visitor,'Encrypted message stored'); + } + assert.equal(await visitor.locator('#history-count').getAttribute('max'),'54'); + assert.equal(await visitor.locator('#history-range').textContent(),'Latest messages (0-54)'); + const historyStart = bodies.length; + await visitor.fill('#history-count','54'); + await visitor.click('#history-form button'); + await waitStatus(visitor,'Selected history decrypted'); + assert.equal(await visitor.locator('#messages li').count(),54); + const batches = bodies.slice(historyStart).filter(body => body.op === 'history' && body.count > 0).map(body => body.count); + assert.deepEqual(batches,[50,4]); + assert.equal(await visitor.locator('#messages p').last().textContent(),'Batch fixture 51'); + assert.equal(await visitor.locator('#older').isVisible(),false); + await visitor.fill('#history-count','0'); + await visitor.click('#history-form button'); + await waitStatus(visitor,'No message history loaded'); + assert.equal(await visitor.locator('#messages li').count(),0); + await visitor.click('#lock'); await storageEmpty(visitor); await storageEmpty(owner); assert.deepEqual(external,[]); @@ -245,9 +280,40 @@ try { assert.ok(!JSON.stringify(body).includes(malicious)); } const database = await readFile(join(root,'var/data/chat/chat.sqlite')); - for (const plaintext of [malicious,'A friend','Reply from owner','Safe retry after a lost response',password]) assert.ok(!database.includes(Buffer.from(plaintext)),`Plaintext persisted: ${plaintext}`); + for (const plaintext of [malicious,'A friend','Reply from owner','Safe retry after a lost response','Batch fixture 51',password]) assert.ok(!database.includes(Buffer.from(plaintext)),`Plaintext persisted: ${plaintext}`); const blocked = await visitor.request.post(origin + '/api',{data:{op:'config'},headers:{Origin:'https://foreign.invalid'}}); assert.equal(blocked.status(),403); + const administrative = (...args) => spawnSync(resolve('target/debug/stack-chat-server'),['--root',root,'--bind',new URL(origin).host,...args],{encoding:'utf8'}); + const registered = administrative('--owner-fingerprint'); + assert.equal(registered.status,0); + const fingerprint = registered.stdout.trim(); + assert.match(fingerprint,/^[0-9A-F]{64}$/); + const runningReset = administrative('--reset-owner',fingerprint); + assert.notEqual(runningReset.status,0,'Reset must refuse while the server runs'); + await stopServer(); + const mismatch = administrative('--reset-owner','0'.repeat(64)); + assert.notEqual(mismatch.status,0,'Wrong fingerprint must not reset the owner'); + assert.equal(administrative('--owner-fingerprint').stdout.trim(),fingerprint); + const preservedEnv = await readFile(join(root,'.env')); + const reset = administrative('--reset-owner',fingerprint); + assert.equal(reset.status,0); + assert.deepEqual(await readFile(join(root,'.env')),preservedEnv); + assert.notEqual(administrative('--owner-fingerprint').status,0); + await launchServer(); + await owner.goto(origin); + await owner.locator('#owner-choice').waitFor({state:'visible'}); + await owner.click('#owner-choice'); + const replacement = await create(owner,'Replacement owner',true); + await unlock(owner,replacement); + await waitStatus(owner,'Unlocked in memory only'); + assert.equal(await owner.locator('#conversations button').count(),0,'Reset must clear conversations'); + assert.notEqual(administrative('--owner-fingerprint').stdout.trim(),fingerprint); + await visitor.goto(origin); + await waitEntry(visitor); + await visitor.click('#open-choice'); + await unlock(visitor,visitorFile); + await waitStatus(visitor,'Pinned owner key differs'); + assert.equal(await visitor.locator('#chat').isVisible(),false); assert.equal(serverErrors,''); if (process.env.CHAT_SCREENSHOT) await visitor.screenshot({path:resolve('.tools/chat-preview.png'),fullPage:true}); if (libre) { @@ -256,7 +322,7 @@ try { assert.ok(addon?.active,'LibreJS must actually be active'); console.log(`LibreJS ${addon.version} is active in Firefox; complete chat workflow succeeded.`); } - console.log('PASS: real browser/WASI owner setup, protected file recovery, wrong password, visitor/owner encrypted messages, safe text rendering, N=0, counts, pagination, retry deduplication, reload, live SQLite snapshot restoration and both identity recoveries, explicit lock, origin rejection, no browser storage or external requests, no private uploads or database plaintext.'); + console.log('PASS: real browser/WASI owner setup, protected file recovery, wrong password, visitor/owner encrypted messages, safe text rendering, N=0, counts, dynamic 0-to-total selection and 50-row batching, pagination, retry deduplication, reload, live SQLite snapshot restoration and both identity recoveries, explicit lock, owner setup/access, backend-only reset guards and fresh registration, old key-pin rejection, origin rejection, no browser storage or external requests, no private uploads or database plaintext.'); } finally { clearTimeout(deadline); await browser.close(); diff --git a/crates/chat-server/web/app.js b/crates/chat-server/web/app.js index c06116b..3c97f66 100644 --- a/crates/chat-server/web/app.js +++ b/crates/chat-server/web/app.js @@ -86,12 +86,15 @@ function clearState() { pendingSend = undefined; setupToken = undefined; before = 0; + element('history-count').max = '0'; + element('history-range').textContent = 'Latest messages (0-0)'; for (const input of document.querySelectorAll('input,textarea')) { if (input.id === 'history-count') input.value = '0'; else input.value = ''; } for (const id of ['messages', 'conversations', 'who', 'fingerprint', 'counts', 'thread-name', 'conversation-fingerprint']) element(id).replaceChildren(); - for (const id of ['create', 'unlock', 'chat', 'thread', 'inbox', 'older', 'retry']) show(id, false); + for (const id of ['create', 'unlock', 'chat', 'thread', 'inbox', 'older', 'retry', 'owner-access']) show(id, false); show('entry', Boolean(config?.owner)); + show('owner-entry'); status('Locked. Select your file and enter its password to return.'); } @@ -127,7 +130,7 @@ function download(file) { async function createIdentity() { const password = element('new-password').value; if (password !== element('confirm-password').value) throw new Error('Passwords do not match'); - if (!config.owner && location.hash !== '#setup') throw new Error('Owner setup is required first'); + if (!config.owner && element('setup-label').hidden) throw new Error('Owner setup is required first'); setupToken = !config.owner ? element('setup-token').value : undefined; status('Generating your purpose-specific identity and protecting its file...'); const result = await cryptoOperation({ op: 'create', origin: location.origin, name: element('name').value, password, owner: config.owner || '' }); @@ -160,6 +163,8 @@ async function unlockIdentity() { setupToken = undefined; config = await api({ op: 'config' }); show('entry', false); + show('owner-entry', false); + show('owner-access', false); show('unlock', false); show('chat'); element('who').textContent = `${identity.name} [${session.owner === true ? 'OWNER' : 'VISITOR'}]`; @@ -176,7 +181,7 @@ async function unlockIdentity() { element('conversation-fingerprint').textContent = `Conversation: ${session.id}`; show('thread'); element('thread-name').textContent = 'You <-> Doan'; - await history(0); + await loadHistory(0); } status('Unlocked in memory only. No history loaded automatically. Lock or leave to forget this session.'); } @@ -217,7 +222,7 @@ async function inbox() { name = profile.name; } element('thread-name').textContent = `Doan <-> ${name}`; - await history(0); + await loadHistory(0); status('Conversation opened. Choose how many messages to load.'); } catch (error) { status(error.message); } finally { if (generation === current) busy = false; } @@ -227,42 +232,74 @@ async function inbox() { } function counters(conversation) { + if (!Number.isSafeInteger(conversation.total) || conversation.total < 0 || conversation.total > 10000) throw new Error('Invalid conversation count'); + element('history-count').max = String(conversation.total); + element('history-range').textContent = `Latest messages (0-${conversation.total})`; const sent = session.owner ? conversation.owner_sent : conversation.visitor_sent; const received = session.owner ? conversation.visitor_sent : conversation.owner_sent; element('counts').textContent = `Total: ${conversation.total} | Sent: ${sent} | Received: ${received}`; } -async function history(count, cursor = 0) { +async function renderHistoryBatch(messages) { + const requests = messages.map(message => ({ sender: message.sender === selected.id ? selected.public : config.owner, ciphertext: message.ciphertext })); + const decrypted = await cryptoOperation(protectRequest('decrypt_batch', { messages: requests })); + for (let index = 0; index < messages.length; index += 1) { + const message = messages[index]; + const item = document.createElement('li'); + const label = document.createElement('small'); + label.textContent = `#${message.seq} / ${message.sender === session.id ? 'YOU' : 'THEM'}`; + const text = document.createElement('p'); + try { + const entry = decrypted.messages[index]; + if (entry.signer !== message.sender) throw new Error('Sender fingerprint mismatch'); + if (entry.error) throw new Error('Invalid ciphertext or signature'); + const payload = checkedPayload(entry.payload, 'message', selected.id, message.sender); + if (payload.id !== message.id || typeof payload.text !== 'string' || new TextEncoder().encode(payload.text).length > 8192) throw new Error('Message binding mismatch'); + text.textContent = payload.text; + } catch { text.textContent = '[Message rejected: invalid ciphertext, signature, or conversation binding.]'; } + item.append(label, text); + element('messages').prepend(item); + } +} + +async function refreshCounts() { + const conversation = selected.id; + const result = await api({ op: 'history', conversation, count: 0, before: 0 }); + if (selected?.id === conversation) counters(result.conversation); + return result.conversation; +} + +async function loadHistory(count, cursor = 0) { if (!selected) throw new Error('Choose a conversation first'); - if (!Number.isSafeInteger(count) || count < 0 || count > 50) throw new Error('Choose 0 to 50 messages'); - const result = await api({ op: 'history', conversation: selected.id, count, before: cursor }); - counters(result.conversation); - if (!cursor) element('messages').replaceChildren(); - if (result.messages.length) { - status('Decrypting and verifying selected messages locally...'); - const requests = result.messages.map(message => ({ sender: message.sender === selected.id ? selected.public : config.owner, ciphertext: message.ciphertext })); - const decrypted = await cryptoOperation(protectRequest('decrypt_batch', { messages: requests })); - for (let index = 0; index < result.messages.length; index += 1) { - const message = result.messages[index]; - const item = document.createElement('li'); - const label = document.createElement('small'); - label.textContent = `#${message.seq} / ${message.sender === session.id ? 'YOU' : 'THEM'}`; - const text = document.createElement('p'); - try { - const entry = decrypted.messages[index]; - if (entry.signer !== message.sender) throw new Error('Sender fingerprint mismatch'); - if (entry.error) throw new Error('Invalid ciphertext or signature'); - const payload = checkedPayload(entry.payload, 'message', selected.id, message.sender); - if (payload.id !== message.id || typeof payload.text !== 'string' || new TextEncoder().encode(payload.text).length > 8192) throw new Error('Message binding mismatch'); - text.textContent = payload.text; - } catch { text.textContent = '[Message rejected: invalid ciphertext, signature, or conversation binding.]'; } - item.append(label, text); - element('messages').prepend(item); - } - before = Math.min(...result.messages.map(message => message.seq)); + const conversation = await refreshCounts(); + if (!Number.isSafeInteger(count) || count < 0 || count > conversation.total) throw new Error(`Choose 0 to ${conversation.total} messages`); + if (!cursor) { element('messages').replaceChildren(); before = 0; } + if (count === 0) { + element('history-count').value = '0'; + show('older', false); + status('No message history loaded.'); + return; + } + let remaining = count; + let next = cursor; + let exhausted = false; + while (remaining > 0) { + const size = Math.min(50, remaining); + const result = await api({ op: 'history', conversation: selected.id, count: size, before: next }); + counters(result.conversation); + if (!Array.isArray(result.messages) || result.messages.length > size) throw new Error('Invalid history response'); + if (!result.messages.length) { exhausted = true; break; } + const sequence = Math.min(...result.messages.map(message => message.seq)); + if (!Number.isSafeInteger(sequence) || sequence <= 0 || (next > 0 && sequence >= next)) throw new Error('Invalid history cursor'); + status(`Decrypting and verifying selected messages locally (${count - remaining + result.messages.length}/${count})...`); + await renderHistoryBatch(result.messages); + remaining -= result.messages.length; + next = sequence; + before = next; + if (result.messages.length < size) { exhausted = true; break; } } - show('older', count > 0 && result.messages.length === count); - status(count === 0 ? 'No message history loaded.' : 'Selected history decrypted and verified locally.'); + show('older', !exhausted && element('messages').children.length < Number(element('history-count').max)); + status('Selected history decrypted and verified locally.'); } async function submitPending() { @@ -289,15 +326,32 @@ async function send() { await submitPending(); } -action('create-choice', async () => { show('entry', false); show('create'); status('Create a purpose-specific protected identity file.'); }); -action('open-choice', async () => { show('entry', false); show('unlock'); status('Select your saved identity file.'); }); +function ownerSetup() { + show('entry', false); + show('owner-entry', false); + show('unlock', false); + show('create', !config.owner); + show('owner-access', Boolean(config.owner)); + show('setup-label', !config.owner); + element('create-title').textContent = 'Create the owner identity (owner only)'; + status(''); +} + +action('create-choice', async () => { show('entry', false); show('owner-entry', false); show('setup-label', false); element('create-title').textContent = 'Create a new chat'; show('create'); status(''); }); +action('open-choice', async () => { show('entry', false); show('owner-entry', false); show('unlock'); status(''); }); +action('owner-choice', async () => { window.history.replaceState(null, '', '#setup'); ownerSetup(); }); +action('owner-open', async () => { show('owner-access', false); show('unlock'); status(''); }); action('create-form', createIdentity); action('unlock-form', unlockIdentity); -action('history-form', () => history(Number(element('history-count').value))); +element('history-count').addEventListener('focus', () => { + const current = generation; + if (session && selected && !busy) refreshCounts().catch(error => { if (current === generation) status(error.message); }); +}); +action('history-form', () => loadHistory(Number(element('history-count').value))); action('send-form', send); action('retry', submitPending); action('refresh-inbox', inbox); -action('older', () => history(Number(element('history-count').value), before)); +action('older', () => loadHistory(Number(element('history-count').value), before)); element('lock').addEventListener('click', () => { if (session) api({ op: 'lock' }).catch(() => {}); clearState(); }); window.addEventListener('pagehide', clearState); window.addEventListener('pageshow', event => { if (event.persisted) clearState(); }); @@ -310,14 +364,10 @@ async function start() { await wasm; config = await api({ op: 'config' }); if (config.origin !== location.origin) throw new Error('Server origin mismatch'); - if (!config.owner) { - if (location.hash === '#setup') { - show('create'); - show('setup-label'); - element('create-title').textContent = 'Create the dedicated owner identity'; - status('Owner setup. Keep this identity separate from your canonical OpenPGP key.'); - } else { status('Owner setup is not complete. Please return later.'); } - } else { show('entry'); status('Choose CREATE NEW CHAT or OPEN CHAT FILE.'); } + show('owner-entry'); + show('entry', Boolean(config.owner)); + status(''); + if (location.hash === '#setup') ownerSetup(); } start().catch(error => status(error.message)); diff --git a/crates/chat-server/web/index.html b/crates/chat-server/web/index.html index 9783789..79026b0 100644 --- a/crates/chat-server/web/index.html +++ b/crates/chat-server/web/index.html @@ -25,32 +25,59 @@ along with this program. If not, see <https://www.gnu.org/licenses/>. </head> <body> <main> -<header><a href="https://doan.luuduct.ai/">~doan</a> / message me <span class="status">EXPERIMENTAL / LOCAL TEST</span></header> -<h1>[ private chat ]</h1> -<p>Text only. A dedicated identity file. Encrypted for you and Doan.</p> -<p class="notice">This is an experimental application, not an audited messenger. <a href="/LIMITATIONS.txt">Read its limitations</a> before use. Keep your file and password safe: there is no account recovery.</p> +<h1 class="sr-only">Message Me</h1> +<div class="libre-badge">[ <a href="https://www.gnu.org/software/librejs/" aria-describedby="js-warning">GNU LibreJS-compliant</a><span id="js-warning" role="tooltip">LibreJS compliance concerns software freedom, not a guarantee of privacy or security. Review the source code, dependencies, and scripts delivered to your browser. Server-delivered code can change between visits; free software can still track users or behave maliciously.</span> ] +<a class="script-licenses" href="/javascript.html" rel="jslicense">[ JAVASCRIPT LICENSES ]</a></div> +<header> +<pre class="logo-art"><a href="{{SITE_ORIGIN}}/" class="logo" aria-label="Doan Luu Duc Tai home"> + ____ ___ _ _ _ +| _ \ / _ \ / \ | \ | | +| | | | | | |/ _ \ | \| | +| |_| | |_| / ___ \| |\ | +|____/ \___/_/ \_\_| \_| LUU DUC TAI +</a></pre> +<nav class="site-nav" aria-label="Site navigation"><a href="{{SITE_ORIGIN}}/">Home</a><a href="{{SITE_ORIGIN}}/#services">Services</a><a href="/" aria-current="page">Message Me</a></nav> +</header> +<div class="ascii-panel introduction"> +<div class="ascii-bar" aria-hidden="true"><span>+</span><span class="ascii-rule">--------------------------------------------------------------------------------</span><span>+</span></div> +<div class="panel-body"> +<p class="build-status">EXPERIMENTAL / LOCAL TEST</p> +<p>Keep your file and password. There is no account recovery.<br><a href="/LIMITATIONS.txt">Read the limitations</a> before using this experimental messenger.</p> +</div> +<div class="ascii-bar" aria-hidden="true"><span>+</span><span class="ascii-rule">--------------------------------------------------------------------------------</span><span>+</span></div> +</div> <p id="status" role="status" aria-live="polite">Loading cryptographic module...</p> -<section id="entry" hidden> +<section id="entry" class="actions" hidden> <button id="create-choice">CREATE NEW CHAT</button> <button id="open-choice">OPEN CHAT FILE</button> </section> +<section id="owner-entry" class="owner-entry" hidden> +<button id="owner-choice">OWNER SETUP</button> +<span class="owner-note">/* Owner (Doan Luu Duc Tai) only. */</span> +</section> +<section id="owner-access" hidden> +<h2>Owner access (owner only)</h2> +<p>An owner identity is already registered. Open your saved owner file with its password.</p> +<p>If you lost that file, <a href="/LIMITATIONS.txt">reset the chat service from the backend</a> before creating a new owner identity. A reset clears the chat history; it cannot recover the lost key.</p> +<button id="owner-open">OPEN OWNER FILE</button> +</section> <section id="create" hidden> <h2 id="create-title">Create a new chat</h2> <form id="create-form" autocomplete="off"> -<label>Display name <input id="name" maxlength="80" required autocomplete="off"></label> -<label>Password <input id="new-password" type="password" minlength="12" maxlength="1024" required autocomplete="off"></label> -<label>Confirm password <input id="confirm-password" type="password" minlength="12" required autocomplete="off"></label> -<label id="setup-label" hidden>Owner setup token from the root .env <input id="setup-token" type="password" autocomplete="off"></label> +<div class="ascii-field"><div class="ascii-bar field-header"><span aria-hidden="true">+--[ </span><label class="field-heading" for="name">Display name</label><span aria-hidden="true"> ]</span><span class="ascii-rule" aria-hidden="true">--------------------------------------------------------------------------------</span><span aria-hidden="true">+</span></div><div class="field-row"><input id="name" maxlength="80" required autocomplete="off"></div><div class="ascii-bar field-end" aria-hidden="true"><span>+</span><span class="ascii-rule">--------------------------------------------------------------------------------</span><span>+</span></div></div> +<div class="ascii-field"><div class="ascii-bar field-header"><span aria-hidden="true">+--[ </span><label class="field-heading" for="new-password">Password</label><span aria-hidden="true"> ]</span><span class="ascii-rule" aria-hidden="true">--------------------------------------------------------------------------------</span><span aria-hidden="true">+</span></div><div class="field-row"><input id="new-password" type="password" minlength="12" maxlength="1024" required autocomplete="off"></div><div class="ascii-bar field-end" aria-hidden="true"><span>+</span><span class="ascii-rule">--------------------------------------------------------------------------------</span><span>+</span></div></div> +<div class="ascii-field"><div class="ascii-bar field-header"><span aria-hidden="true">+--[ </span><label class="field-heading" for="confirm-password">Confirm password</label><span aria-hidden="true"> ]</span><span class="ascii-rule" aria-hidden="true">--------------------------------------------------------------------------------</span><span aria-hidden="true">+</span></div><div class="field-row"><input id="confirm-password" type="password" minlength="12" required autocomplete="off"></div><div class="ascii-bar field-end" aria-hidden="true"><span>+</span><span class="ascii-rule">--------------------------------------------------------------------------------</span><span>+</span></div></div> +<div class="ascii-field" id="setup-label" hidden><p id="setup-help">Read CHAT_SETUP_TOKEN from your root .env.</p><div class="ascii-bar field-header"><span aria-hidden="true">+--[ </span><label class="field-heading" for="setup-token">Owner setup token</label><span aria-hidden="true"> ]</span><span class="ascii-rule" aria-hidden="true">--------------------------------------------------------------------------------</span><span aria-hidden="true">+</span></div><div class="field-row"><input aria-describedby="setup-help" id="setup-token" type="password" autocomplete="off"></div><div class="ascii-bar field-end" aria-hidden="true"><span>+</span><span class="ascii-rule">--------------------------------------------------------------------------------</span><span>+</span></div></div> <p>Use a strong, unique passphrase. This identity is solely for this chat; do not reuse it elsewhere.</p> -<button type="submit">GENERATE AND DOWNLOAD IDENTITY FILE</button> +<button type="submit">DOWNLOAD IDENTITY FILE</button> </form> </section> <section id="unlock" hidden> <h2>Open your saved identity file</h2> <p id="reopen-note">Your file is opened locally. The file and password are never uploaded.</p> <form id="unlock-form" autocomplete="off"> -<label>Identity file <input id="file" type="file" required></label> -<label>Password <input id="password" type="password" required autocomplete="off"></label> +<div class="ascii-field"><div class="ascii-bar field-header"><span aria-hidden="true">+--[ </span><label class="field-heading" for="file">Identity file</label><span aria-hidden="true"> ]</span><span class="ascii-rule" aria-hidden="true">--------------------------------------------------------------------------------</span><span aria-hidden="true">+</span></div><div class="field-row"><input id="file" type="file" required></div><div class="ascii-bar field-end" aria-hidden="true"><span>+</span><span class="ascii-rule">--------------------------------------------------------------------------------</span><span>+</span></div></div> +<div class="ascii-field"><div class="ascii-bar field-header"><span aria-hidden="true">+--[ </span><label class="field-heading" for="password">Password</label><span aria-hidden="true"> ]</span><span class="ascii-rule" aria-hidden="true">--------------------------------------------------------------------------------</span><span aria-hidden="true">+</span></div><div class="field-row"><input id="password" type="password" required autocomplete="off"></div><div class="ascii-bar field-end" aria-hidden="true"><span>+</span><span class="ascii-rule">--------------------------------------------------------------------------------</span><span>+</span></div></div> <button type="submit">UNLOCK CHAT</button> </form> </section> @@ -62,20 +89,19 @@ along with this program. If not, see <https://www.gnu.org/licenses/>. <h3 id="thread-name"></h3> <p id="conversation-fingerprint"></p> <p id="counts"></p> -<form id="history-form"><label>Latest messages to load (0–50) <input id="history-count" type="number" min="0" max="50" step="1" value="0" required></label><button type="submit">LOAD HISTORY</button></form> +<form id="history-form" novalidate><div class="ascii-field"><div class="ascii-bar field-header"><span aria-hidden="true">+--[ </span><label id="history-range" class="field-heading" for="history-count">Latest messages (0-0)</label><span aria-hidden="true"> ]</span><span class="ascii-rule" aria-hidden="true">--------------------------------------------------------------------------------</span><span aria-hidden="true">+</span></div><div class="field-row"><input id="history-count" type="number" min="0" max="0" step="1" value="0" required></div><div class="ascii-bar field-end" aria-hidden="true"><span>+</span><span class="ascii-rule">--------------------------------------------------------------------------------</span><span>+</span></div></div><button type="submit">LOAD HISTORY</button></form> <button id="older" hidden>LOAD OLDER</button> <ol id="messages" aria-label="Messages"></ol> -<form id="send-form" autocomplete="off"><label>Plain text message (up to 8192 UTF-8 bytes) <textarea id="text" rows="5" required maxlength="8192" autocomplete="off"></textarea></label><button type="submit">ENCRYPT AND SEND</button></form> -<button id="retry" hidden>RETRY THE SAME ENCRYPTED MESSAGE</button> +<p id="message-limit">Plain text only. Up to 8192 UTF-8 bytes per message.</p> +<form id="send-form" autocomplete="off"><div class="ascii-field"><div class="ascii-bar field-header"><span aria-hidden="true">+--[ </span><label class="field-heading" for="text">Message body</label><span aria-hidden="true"> ]</span><span class="ascii-rule" aria-hidden="true">--------------------------------------------------------------------------------</span><span aria-hidden="true">+</span></div><div class="field-row"><textarea aria-describedby="message-limit" id="text" rows="5" required maxlength="8192" autocomplete="off"></textarea></div><div class="ascii-bar field-end" aria-hidden="true"><span>+</span><span class="ascii-rule">--------------------------------------------------------------------------------</span><span>+</span></div></div><button type="submit">ENCRYPT AND SEND</button></form> +<button id="retry" hidden>RETRY MESSAGE</button> </section> </section> <noscript>This chat requires free JavaScript and WebAssembly for local cryptography. The main website remains JavaScript-free.</noscript> -<footer> -<p><a class="badge" href="https://www.gnu.org/software/librejs/" aria-describedby="js-warning">GNU LibreJS-compliant</a><span id="js-warning" role="tooltip">LibreJS compliance concerns software freedom, not a guarantee of privacy or security. Review the source code, dependencies, and scripts delivered to your browser. Server-delivered code can change between visits; free software can still track users or behave maliciously.</span></p> -<a href="https://www.gnu.org/licenses/agpl-3.0.html">LICENSE</a> -<a href="/THIRD-PARTY-LICENSES.html">THIRD PARTY LICENSES</a> -<a href="/SOURCE.tar.gz">CORRESPONDING SOURCE CODE</a> -<a href="/javascript.html" rel="jslicense">JAVASCRIPT LICENSES / RAW SOURCE</a> +<footer class="source-footer" aria-label="Licensing and source"> +<a class="project-license" href="https://www.gnu.org/licenses/agpl-3.0.html">[ LICENSE ]</a> +<a class="dependency-licenses" href="/THIRD-PARTY-LICENSES.html">[ THIRD PARTY LICENSES ]</a> +<a href="/SOURCE.tar.gz">[ SOURCE CODE ]</a> </footer> </main> </body> diff --git a/crates/chat-server/web/javascript.html b/crates/chat-server/web/javascript.html index 927a678..205a103 100644 --- a/crates/chat-server/web/javascript.html +++ b/crates/chat-server/web/javascript.html @@ -15,14 +15,14 @@ You should have received a copy of the GNU Affero General Public License along with this program. If not, see <https://www.gnu.org/licenses/>. --> <!doctype html> -<html lang="en"><head><meta charset="utf-8"><title>JavaScript licenses</title><link rel="stylesheet" href="/style.css"></head><body><main> +<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>JavaScript licenses</title><link rel="stylesheet" href="/style.css"></head><body><main class="license-page"> <h1>JavaScript licenses and source</h1> <p>All first-party scripts are available under the GNU Affero General Public License, version 3 or, at your option, any later version. The table uses the license identifiers recognized by GNU LibreJS.</p> -<table id="jslicense-labels1"><thead><tr><th>Script / raw file</th><th>License</th><th>Corresponding source</th></tr></thead><tbody> +<div class="license-table"><table id="jslicense-labels1"><thead><tr><th>Script / raw file</th><th>License</th><th>Corresponding source</th></tr></thead><tbody> <tr><td><a href="/app.js">app.js</a></td><td><a href="https://www.gnu.org/licenses/agpl-3.0.html">GNU-AGPL-3.0</a></td><td><a href="/SOURCE.tar.gz">Complete corresponding source</a></td></tr> <tr><td><a href="/worker.js">worker.js</a></td><td><a href="https://www.gnu.org/licenses/agpl-3.0.html">GNU-AGPL-3.0</a></td><td><a href="/SOURCE.tar.gz">Complete corresponding source</a></td></tr> <tr><td><a href="/wasi.mjs">wasi.mjs</a></td><td><a href="https://www.gnu.org/licenses/agpl-3.0.html">GNU-AGPL-3.0</a></td><td><a href="/SOURCE.tar.gz">Complete corresponding source</a></td></tr> -</tbody></table> +</tbody></table></div> <p>The WebAssembly module is compiled from the Rust workspace and unmodified OpenSSL 3.6.5, under their respective free software licenses. The source archive includes first-party sources, Cargo dependencies, the OpenSSL source archive, build scripts, and notices. General-purpose Rust and WASI SDK tools are documented with verified download locations in CHAT-OPENSSL-MIGRATION.txt.</p> <p><a href="/THIRD-PARTY-LICENSES.html">Third-party licenses</a> / <a href="/SOURCE.tar.gz">Source archive</a> / <a href="/">Return</a></p> </main></body></html> diff --git a/crates/chat-server/web/style.css b/crates/chat-server/web/style.css index 0983b2e..5587f58 100644 --- a/crates/chat-server/web/style.css +++ b/crates/chat-server/web/style.css @@ -14,36 +14,108 @@ GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program. If not, see <https://www.gnu.org/licenses/>. */ + +:root { + color-scheme: light dark; + --background: #fff; + --foreground: #000; + --link: #06c; + --logo: #a00; + --good: #090; + --warning: #806000; + --license: #923900; + --third-party: #355b3c; + --muted: #555; +} + * { box-sizing: border-box; } -:root { color-scheme: dark; font-family: "Courier New", monospace; background: #131715; color: #d4d8cd; line-height: 1.6; } -body { margin: 0; } -main { max-width: 58rem; margin: 2rem auto; padding: 0 1.25rem; } -header, footer { border-top: 1px solid #667367; padding-top: 1rem; } -header { display: flex; flex-wrap: wrap; gap: .6rem; } -h1 { font-size: 1.8rem; color: #e3e3ce; } -h2, h3 { font-size: 1.05rem; } -a { color: #aec2a5; text-underline-offset: .2rem; } -.status, .badge { color: #e0c46d; } -.status { margin-left: auto; } -.notice { border-left: 2px solid #c5ad68; padding-left: 1rem; } -button, input, textarea { font: inherit; color: inherit; background: #1c231e; border: 1px solid #667367; border-radius: 0; padding: .55rem .7rem; } -button { cursor: pointer; margin: .4rem .6rem .4rem 0; } -button:hover, button:focus-visible { border-color: #d7c884; color: #f0e5b0; } +html { overflow-y: scroll; scrollbar-gutter: stable; } +body { overflow: visible; font: 16px/1.5 monospace, monospace; margin: 0; background: var(--background); color: var(--foreground); } +main { width: 80ch; max-width: calc(100% - 32px); margin: 16px auto; position: relative; } +a { color: var(--link); text-decoration: none; } +a:hover { text-decoration: underline; } +a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; } +.logo-art { font: inherit; line-height: 1.2; margin: 0 0 2em; overflow: visible; } +.logo { color: var(--logo); display: inline-block; } +.logo:hover { text-decoration: none; } +.site-nav { display: flex; flex-wrap: wrap; gap: 2ch; margin: 0 0 2em; } +.site-nav [aria-current] { color: inherit; } +h1, h2, h3 { font: inherit; font-weight: bold; } +h1 { margin: 0; } +h2, h3 { margin: 0 0 1em; } +p { margin: 0 0 1em; } +.introduction { text-align: center; } +.introduction p:last-child { margin-bottom: 0; } +.build-status, .notice { color: var(--warning); } +.ascii-bar { display: flex; white-space: pre; line-height: 1.5; user-select: none; } +.ascii-rule { flex: 1; min-width: 0; overflow: hidden; } +.panel-body { padding: 1em 2ch; background-image: repeating-linear-gradient(to bottom, currentColor 0 1em, transparent 1em 1.5em), repeating-linear-gradient(to bottom, currentColor 0 1em, transparent 1em 1.5em); background-size: 1px 100%; background-position: .5ch 0, calc(100% - .5ch) 0; background-repeat: no-repeat; } +.ascii-panel { margin: 1.5em 0; } +.ascii-field { margin: 1.5em 0; } +.field-heading { white-space: nowrap; font-weight: normal; margin: 0; } +.field-row { background-image: repeating-linear-gradient(to bottom, currentColor 0 1em, transparent 1em 1.5em), repeating-linear-gradient(to bottom, currentColor 0 1em, transparent 1em 1.5em); background-size: 1px 100%; background-position: .5ch 0, calc(100% - .5ch) 0; background-repeat: no-repeat; padding: .25em 2ch; display: flex; gap: 1ch; align-items: baseline; } +.field-row::before { content: '>'; color: var(--good); font-weight: bold; } +.field-end { height: 1.5em; } +button, input, textarea { font: inherit; color: inherit; background: transparent; border-radius: 0; } +button { appearance: none; border: 0; padding: 0; margin: .5em 2ch .5em 0; color: var(--link); font-weight: bold; cursor: pointer; } +button::before { content: '[ < '; } +button::after { content: ' > ]'; } +button:hover { text-decoration: underline; } button:disabled { opacity: .5; cursor: wait; } -input, textarea { display: block; width: 100%; margin: .35rem 0 1rem; } -input[type=number] { width: 8rem; } +#create-choice, #create-form button, #unlock-form button, #send-form button { color: var(--good); } +#lock { color: var(--logo); } +#retry { color: var(--warning); } +input, textarea { appearance: none; border: 0; padding: 0; margin: 0; min-width: 0; width: 100%; line-height: 1.5; } +input[type=file] { font-size: .875em; } +input[type=file]::file-selector-button { font: inherit; color: var(--link); background: transparent; border: 1px dashed currentColor; margin-right: 1ch; padding: .2em 1ch; cursor: pointer; } +input[type=number] { width: 7ch; } +textarea { resize: vertical; min-height: 7.5em; } label { display: block; } -section { margin: 1.5rem 0; } +section { margin: 2em 0; } [hidden] { display: none !important; } -.chat-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } -#fingerprint, #conversation-fingerprint { overflow-wrap: anywhere; font-size: .8rem; } -#messages { padding: 0; list-style: none; } -#messages li { border-top: 1px dashed #48564a; padding: 1rem 0; } -#messages p { white-space: pre-wrap; overflow-wrap: anywhere; margin: .4rem 0; } -#messages small { color: #a8b39e; } -#status { min-height: 1.6rem; color: #e0c46d; } -footer { margin-top: 3rem; padding-bottom: 2rem; } -footer > a { display: block; width: fit-content; } -footer p { position: relative; } -#js-warning { display: none; max-width: 48rem; border: 1px solid #c5ad68; background: #1c231e; padding: 1rem; margin: .8rem 0; } -.badge:hover + #js-warning, .badge:focus-visible + #js-warning { display: block; } +.actions { display: flex; flex-wrap: wrap; gap: 0 2ch; } +.actions button { margin-right: 0; } +.chat-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 1ch; } +.chat-heading h2 { margin-bottom: 0; } +#fingerprint, #conversation-fingerprint { overflow-wrap: anywhere; font-size: .875em; color: var(--muted); margin-top: 1em; } +#thread { margin-top: 3em; } +#counts { color: var(--good); } +#history-form { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1ch 2ch; } +#history-form .ascii-field { flex: 0 1 31ch; min-width: 24ch; margin: .5em 0; } +#messages { padding: 0; list-style: none; margin: 2em 0; } +#messages li::before { content: '--------------------------------------------------------------------------------'; display: block; overflow: hidden; white-space: pre; margin: 1em 0; } +#messages p { white-space: pre-wrap; overflow-wrap: anywhere; margin: .5em 0 1em; } +#messages small { color: var(--link); font: inherit; } +#status:empty { display: none; } +#status { min-height: 1.5em; color: var(--link); margin: 2em 0 1em; padding-left: 2ch; position: relative; } +#status::before { content: '>'; color: var(--good); position: absolute; left: 0; font-weight: bold; } +.libre-badge { position: absolute; top: 0; right: 0; color: var(--warning); font-weight: bold; } +.libre-badge > a[aria-describedby] { color: inherit; text-decoration: underline wavy; text-underline-offset: .2em; } +#js-warning { display: none; position: absolute; top: 2em; right: 0; width: 48ch; max-width: calc(100vw - 32px); padding: 1em 2ch; background: var(--background); color: var(--foreground); border: 1px dashed var(--warning); z-index: 1; font-weight: normal; } +.libre-badge > a[aria-describedby]:hover + #js-warning, .libre-badge > a[aria-describedby]:focus-visible + #js-warning { display: block; } +.script-licenses { display: block; color: var(--link); font-size: .875em; text-align: right; margin-top: .5em; } +.owner-entry { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5em 1ch; margin: 1em 0; } +.owner-entry button { margin-right: 0; } +.owner-note { color: var(--muted); font-size: .875em; } +.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } +.source-footer { display: flex; flex-direction: column; align-items: flex-end; gap: .5em; text-align: right; margin: 3em 0 1em; font-weight: bold; } +.source-footer::before { content: '________________________________________________________________________________'; display: block; width: 100%; overflow: hidden; white-space: pre; margin-bottom: 1em; font-weight: normal; } +.project-license { color: var(--license); } +.dependency-licenses { color: var(--third-party); } +.license-page h1 { margin: 2em 0 1em; } +.license-table { overflow-x: auto; } +table { border-collapse: collapse; width: 100%; font: inherit; } +th, td { padding: .75em 1ch; text-align: left; border-bottom: 1px dashed currentColor; vertical-align: top; } + +@media (prefers-color-scheme: dark) { + :root { --background: #000; --foreground: #fff; --link: #6cf; --logo: #f33; --good: #0f0; --warning: #fc3; --license: #efb366; --third-party: #a3c7a8; --muted: #aaa; } +} + +@media (max-width: 600px) { + .libre-badge { position: relative; width: fit-content; margin: 0 0 2em auto; } + .logo-art { font-size: clamp(10px, 2.4vw, 16px); } + .field-heading { font-size: .875em; } + .panel-body { padding-inline: 2ch; } + .source-footer { align-items: flex-start; text-align: left; } + .actions { flex-direction: column; align-items: flex-start; } +} |