components/app: throttle our focus PINGs

parcel doesn't auto-detect that field properly due to "engines".

Closes: https://todo.sr.ht/~emersion/gamja/158

.build.yml

@@ -5,7 +5,7 @@ packages:
 sources:
 - https://git.sr.ht/~emersion/gamja
 secrets:
-- 5874ac5a-905e-4596-a117-fed1401c60ce # deploy SSH key
+- 77c7956b-003e-44f7-bb5c-2944b2047654 # deploy SSH key
 tasks:
 - setup: |
     cd gamja
@@ -16,4 +16,4 @@ tasks:
     [ "$(git rev-parse HEAD)" = "$(git rev-parse origin/master)" ] || complete-build
     rsync --rsh="ssh -o StrictHostKeyChecking=no" -rP \
       --delete --exclude=config.json \
-      . deploy@emersion.fr:/srv/http/gamja
+      . deploy@sheeta.emersion.fr:/srv/http/gamja

README.md

@@ -12,52 +12,7 @@ First install dependencies:
 
     npm install --production
 
-Then configure an HTTP server to serve the gamja files. Below are some
-server-specific instructions.
-
-### [soju]
-
-Add a WebSocket listener to soju, e.g. `listen wss://127.0.0.1:8080`.
-
-Configure your reverse proxy to serve gamja files and proxy `/socket` to soju.
-
-### [webircgateway]
-
-Setup webircgateway to serve gamja files:
-
-```ini
-[fileserving]
-enabled = true
-webroot = /path/to/gamja
-```
-
-Then connect to webircgateway and append `?server=/webirc/websocket/` to the
-URL.
-
-### nginx
-
-If you use nginx as a reverse HTTP proxy, make sure to bump the default read
-timeout to a value higher than the IRC server PING interval. Example:
-
-```
-location / {
-	root /path/to/gamja;
-}
-
-location /socket {
-	proxy_pass http://127.0.0.1:8080;
-	proxy_read_timeout 600s;
-	proxy_http_version 1.1;
-	proxy_set_header Upgrade $http_upgrade;
-	proxy_set_header Connection "Upgrade";
-	proxy_set_header X-Forwarded-For $remote_addr;
-	proxy_set_header X-Forwarded-Proto $scheme;
-}
-```
-
-If you are unable to configure the proxy timeout accordingly, or if your IRC
-server doesn't send PINGs, you can set the `server.ping` option in
-`config.json` (see below).
+Then [configure an HTTP server] to serve the gamja files.
 
 ### Development server
 
@@ -76,48 +31,9 @@ Optionally, [Parcel] can be used to build a minified version of gamja.
     npm install --include=dev
     npm run build
 
-## Query parameters
+## Configuration
 
-gamja settings can be overridden using URL query parameters:
-
-- `server`: path or URL to the WebSocket server
-- `nick`: nickname
-- `channels`: comma-separated list of channels to join (`#` needs to be escaped)
-- `open`: [IRC URL] to open
-- `debug`: if set to 1, debug mode is enabled
-
-Alternatively, the channels can be set with the URL fragment (ie, by just
-appending the channel name to the gamja URL).
-
-## Configuration file
-
-gamja default settings can be set using a `config.json` file at the root:
-
-```js
-{
-	// IRC server settings.
-	"server": {
-		// WebSocket URL or path to connect to (string).
-		"url": "wss://irc.example.org",
-		// Channel(s) to auto-join (string or array of strings).
-		"autojoin": "#gamja",
-		// Controls how the password UI is presented to the user. Set to
-		// "mandatory" to require a password, "optional" to accept one but not
-		// require it, "disabled" to never ask for a password, or "external" to
-		// use SASL EXTERNAL. Defaults to "optional".
-		"auth": "optional",
-		// Default nickname (string).
-		"nick": "asdf",
-		// Don't display the login UI, immediately connect to the server
-		// (boolean).
-		"autoconnect": true,
-		// Interval in seconds to send PING commands (number). Set to 0 to
-		// disable. Enabling PINGs can have an impact on client power usage and
-		// should only be enabled if necessary.
-		"ping": 60
-	}
-}
-```
+gamja can be configured via a [configuration file] and via [URL parameters].
 
 ## Contributing
 
@@ -131,10 +47,10 @@ AGPLv3, see LICENSE.
 Copyright (C) 2020 The gamja Contributors
 
 [gamja]: https://sr.ht/~emersion/gamja/
-[soju]: https://soju.im
-[webircgateway]: https://github.com/kiwiirc/webircgateway
 [mailing list]: https://lists.sr.ht/~emersion/public-inbox
 [issue tracker]: https://todo.sr.ht/~emersion/gamja
 [Parcel]: https://parceljs.org
-[IRC URL]: https://datatracker.ietf.org/doc/html/draft-butcher-irc-url-04
+[configure an HTTP server]: doc/setup.md
+[configuration file]: doc/config-file.md
+[URL parameters]: doc/url-params.md
 [#soju on Libera Chat]: ircs://irc.libera.chat/#soju

commands.js

@@ -25,21 +25,20 @@ function getActiveChannel(app) {
 	return activeBuffer.name;
 }
 
-function setUserHostMode(app, args, mode) {
+async function setUserHostMode(app, args, mode) {
 	let nick = args[0];
 	if (!nick) {
 		throw new Error("Missing nick");
 	}
 	let activeChannel = getActiveChannel(app);
 	let client = getActiveClient(app);
-	client.whois(nick).then((whois) => {
-		const info = whois[irc.RPL_WHOISUSER].params;
-		const user = info[2];
-		const host = info[3];
-		client.send({
-			command: "MODE",
-			params: [activeChannel, mode, `*!${user}@${host}`],
-		});
+	let whois = await client.whois(nick);
+	const info = whois[irc.RPL_WHOISUSER].params;
+	const user = info[2];
+	const host = info[3];
+	client.send({
+		command: "MODE",
+		params: [activeChannel, mode, `*!${user}@${host}`],
 	});
 }
 
@@ -54,19 +53,23 @@ function markServerBufferUnread(app) {
 }
 
 const join = {
-	usage: "<name>",
+	usage: "<name> [password]",
 	description: "Join a channel",
 	execute: (app, args) => {
 		let channel = args[0];
 		if (!channel) {
 			throw new Error("Missing channel name");
 		}
-		app.open(channel);
+		if (args.length > 1) {
+			app.open(channel, null, args[1]);
+		} else {
+			app.open(channel);
+		}
 	},
 };
 
 const kick = {
-	usage: "<nick>",
+	usage: "<nick> [comment]",
 	description: "Remove a user from the channel",
 	execute: (app, args) => {
 		let nick = args[0];
@@ -79,6 +82,22 @@ const kick = {
 	},
 };
 
+const ban = {
+	usage: "[nick]",
+	description: "Ban a user from the channel, or display the current ban list",
+	execute: (app, args) => {
+		if (args.length == 0) {
+			let activeChannel = getActiveChannel(app);
+			getActiveClient(app).send({
+				command: "MODE",
+				params: [activeChannel, "+b"],
+			});
+		} else {
+			return setUserHostMode(app, args, "+b");
+		}
+	},
+};
+
 function givemode(app, args, mode) {
 	// TODO: Handle several users at once
 	let nick = args[0];
@@ -104,21 +123,7 @@ export default {
 			getActiveClient(app).send({command: "AWAY", params});
 		},
 	},
-	"ban": {
-		usage: "[nick]",
-		description: "Ban a user from the channel, or display the current ban list",
-		execute: (app, args) => {
-			if (args.length == 0) {
-				let activeChannel = getActiveChannel(app);
-				getActiveClient(app).send({
-					command: "MODE",
-					params: [activeChannel, "+b"],
-				});
-			} else {
-				return setUserHostMode(app, args, "+b");
-			}
-		},
-	},
+	"ban": ban,
 	"buffer": {
 		usage: "<name>",
 		description: "Switch to a buffer",
@@ -393,7 +398,7 @@ export default {
 		execute: (app, args) => givemode(app, args, "+v"),
 	},
 	"who": {
-		usage: "[<mask> [o]]",
+		usage: "<mask>",
 		description: "Retrieve a list of users",
 		execute: (app, args) => {
 			getActiveClient(app).send({ command: "WHO", params: args });

components/auth-form.js

@@ -9,7 +9,7 @@ export default class NetworkForm extends Component {
 	constructor(props) {
 		super(props);
 
-		this.handleChange = this.handleChange.bind(this);
+		this.handleInput = this.handleInput.bind(this);
 		this.handleSubmit = this.handleSubmit.bind(this);
 
 		if (props.username) {
@@ -17,7 +17,7 @@ export default class NetworkForm extends Component {
 		}
 	}
 
-	handleChange(event) {
+	handleInput(event) {
 		let target = event.target;
 		let value = target.type == "checkbox" ? target.checked : target.value;
 		this.setState({ [target.name]: value });
@@ -31,7 +31,7 @@ export default class NetworkForm extends Component {
 
 	render() {
 		return html`
-			<form onChange=${this.handleChange} onSubmit=${this.handleSubmit}>
+			<form onInput=${this.handleInput} onSubmit=${this.handleSubmit}>
 				<label>
 					Username:<br/>
 					<input type="username" name="username" value=${this.state.username} required/>

components/buffer-header.js

@@ -44,6 +44,9 @@ export default function BufferHeader(props) {
 				switch (props.bouncerNetwork.state) {
 				case "disconnected":
 					description = "Bouncer disconnected from network";
+					if (props.bouncerNetwork.error) {
+						description += ": " + props.bouncerNetwork.error;
+					}
 					break;
 				case "connecting":
 					description = "Bouncer connecting to network...";
@@ -74,6 +77,12 @@ export default function BufferHeader(props) {
 				onClick=${props.onReconnect}
 			>Reconnect</button>
 		`;
+		let settingsButton = html`
+			<button
+				key="settings"
+				onClick="${props.onOpenSettings}"
+			>Settings</button>
+		`;
 
 		if (props.server.isBouncer) {
 			if (props.server.bouncerNetID) {
@@ -99,13 +108,7 @@ export default function BufferHeader(props) {
 				} else if (props.server.status === ServerStatus.DISCONNECTED) {
 					actions.push(reconnectButton);
 				}
-				actions.push(html`
-					<button
-						key="disconnect"
-						class="danger"
-						onClick=${props.onClose}
-					>Disconnect</button>
-				`);
+				actions.push(settingsButton);
 			}
 		} else {
 			if (fullyConnected) {
@@ -113,13 +116,7 @@ export default function BufferHeader(props) {
 			} else if (props.server.status === ServerStatus.DISCONNECTED) {
 				actions.push(reconnectButton);
 			}
-			actions.push(html`
-				<button
-					key="disconnect"
-					class="danger"
-					onClick=${props.onClose}
-				>Disconnect</button>
-			`);
+			actions.push(settingsButton);
 		}
 		break;
 	case BufferType.CHANNEL:
@@ -189,6 +186,10 @@ export default function BufferHeader(props) {
 				let desc = "This user is a server operator, they have administrator privileges.";
 				details.push(html`<abbr title=${desc}>server operator</abbr>`);
 			}
+			if (props.user.bot) {
+				let desc = "This user is an automated bot.";
+				details.push(html`<abbr title=${desc}>bot</abbr>`);
+			}
 			details = details.map((item, i) => {
 				if (i === 0) {
 					return item;

components/buffer-list.js

@@ -1,6 +1,6 @@
 import * as irc from "../lib/irc.js";
 import { html, Component } from "../lib/index.js";
-import { BufferType, Unread, getBufferURL, getServerName } from "../state.js";
+import { BufferType, Unread, ServerStatus, getBufferURL, getServerName } from "../state.js";
 
 function BufferItem(props) {
 	function handleClick(event) {
@@ -26,6 +26,15 @@ function BufferItem(props) {
 	if (props.buffer.unread != Unread.NONE) {
 		classes.push("unread-" + props.buffer.unread);
 	}
+	if (props.buffer.type === BufferType.SERVER) {
+		let isError = props.server.status === ServerStatus.DISCONNECTED;
+		if (props.bouncerNetwork && props.bouncerNetwork.error) {
+			isError = true;
+		}
+		if (isError) {
+			classes.push("error");
+		}
+	}
 
 	return html`
 		<li class="${classes.join(" ")}">
@@ -44,9 +53,8 @@ export default function BufferList(props) {
 		let server = props.servers.get(buf.server);
 
 		let bouncerNetwork = null;
-		let bouncerNetID = server.bouncerNetID;
-		if (bouncerNetID) {
-			bouncerNetwork = props.bouncerNetworks.get(bouncerNetID);
+		if (server.bouncerNetID) {
+			bouncerNetwork = props.bouncerNetworks.get(server.bouncerNetID);
 		}
 
 		return html`

components/buffer.js

@@ -2,7 +2,7 @@ import { html, Component } from "../lib/index.js";
 import linkify from "../lib/linkify.js";
 import * as irc from "../lib/irc.js";
 import { strip as stripANSI } from "../lib/ansi.js";
-import { BufferType, ServerStatus, getNickURL, getChannelURL, getMessageURL } from "../state.js";
+import { BufferType, ServerStatus, BufferEventsDisplayMode, getMessageURL, isMessageBeforeReceipt, SettingsContext } from "../state.js";
 import * as store from "../store.js";
 import Membership from "./membership.js";
 
@@ -23,19 +23,26 @@ function Nick(props) {
 
 	let colorIndex = djb2(props.nick) % 16 + 1;
 	return html`
-		<a href=${getNickURL(props.nick)} class="nick nick-${colorIndex}" onClick=${handleClick}>${props.nick}</a>
+		<a href=${irc.formatURL({ entity: props.nick })} class="nick nick-${colorIndex}" onClick=${handleClick}>${props.nick}</a>
 	`;
 }
 
-function Timestamp({ date, url }) {
+function _Timestamp({ date, url, showSeconds }) {
 	if (!date) {
-		return html`<spam class="timestamp">--:--:--</span>`;
+		let timestamp = "--:--";
+		if (showSeconds) {
+			timestamp += ":--";
+		}
+		return html`<spam class="timestamp">${timestamp}</span>`;
 	}
 
 	let hh = date.getHours().toString().padStart(2, "0");
 	let mm = date.getMinutes().toString().padStart(2, "0");
-	let ss = date.getSeconds().toString().padStart(2, "0");
-	let timestamp = `${hh}:${mm}:${ss}`;
+	let timestamp = `${hh}:${mm}`;
+	if (showSeconds) {
+		let ss = date.getSeconds().toString().padStart(2, "0");
+		timestamp += ":" + ss;
+	}
 	return html`
 		<a
 			href=${url}
@@ -48,6 +55,16 @@ function Timestamp({ date, url }) {
 	`;
 }
 
+function Timestamp(props) {
+	return html`
+		<${SettingsContext.Consumer}>
+			${(settings) => html`
+				<${_Timestamp} ...${props} showSeconds=${settings.secondsInTimestamps}/>
+			`}
+		</>
+	`;
+}
+
 /**
  * Check whether a message can be folded.
  *
@@ -85,12 +102,8 @@ class LogLine extends Component {
 			`;
 		}
 		function createChannel(channel) {
-			function onClick(event) {
-				event.preventDefault();
-				onChannelClick(channel);
-			}
 			return html`
-				<a href=${getChannelURL(channel)} onClick=${onClick}>
+				<a href=${irc.formatURL({ entity: channel })} onClick=${onChannelClick}>
 					${channel}
 				</a>
 			`;
@@ -133,6 +146,10 @@ class LogLine extends Component {
 				}
 			}
 
+			if (msg.tags["+draft/channel-context"]) {
+				content = html`<em>(only visible to you)</em> ${content}`;
+			}
+
 			if (msg.isHighlight) {
 				lineClass += " highlight";
 			}
@@ -250,6 +267,13 @@ class LogLine extends Component {
 			let date = new Date(parseInt(msg.params[2], 10) * 1000);
 			content = html`Channel was created on ${date.toLocaleString()}`;
 			break;
+		// MONITOR messages are only displayed in user buffers
+		case irc.RPL_MONONLINE:
+			content = html`${createNick(buf.name)} is online`;
+			break;
+		case irc.RPL_MONOFFLINE:
+			content = html`${createNick(buf.name)} is offline`;
+			break;
 		default:
 			if (irc.isError(msg.command) && msg.command != irc.ERR_NOMOTD) {
 				lineClass = "error";
@@ -531,10 +555,7 @@ class DateSeparator extends Component {
 
 	render() {
 		let date = this.props.date;
-		let YYYY = date.getFullYear().toString().padStart(4, "0");
-		let MM = (date.getMonth() + 1).toString().padStart(2, "0");
-		let DD = date.getDate().toString().padStart(2, "0");
-		let text = `${YYYY}-${MM}-${DD}`;
+		let text = date.toLocaleDateString([], { year: "numeric", month: "2-digit", day: "2-digit" });
 		return html`
 			<div class="separator date-separator">
 				${text}
@@ -553,7 +574,8 @@ function sameDate(d1, d2) {
 
 export default class Buffer extends Component {
 	shouldComponentUpdate(nextProps) {
-		return this.props.buffer !== nextProps.buffer;
+		return this.props.buffer !== nextProps.buffer ||
+			this.props.settings !== nextProps.settings;
 	}
 
 	render() {
@@ -564,6 +586,7 @@ export default class Buffer extends Component {
 
 		let server = this.props.server;
 		let bouncerNetwork = this.props.bouncerNetwork;
+		let settings = this.props.settings;
 		let serverName = server.name;
 
 		let children = [];
@@ -637,10 +660,23 @@ export default class Buffer extends Component {
 		let hasUnreadSeparator = false;
 		let prevDate = new Date();
 		let foldMessages = [];
+		let lastMonitor = null;
 		buf.messages.forEach((msg) => {
 			let sep = [];
 
-			if (!hasUnreadSeparator && buf.type != BufferType.SERVER && buf.prevReadReceipt && msg.tags.time > buf.prevReadReceipt.time) {
+			if (settings.bufferEvents === BufferEventsDisplayMode.HIDE && canFoldMessage(msg)) {
+				return;
+			}
+
+			if (msg.command === irc.RPL_MONONLINE || msg.command === irc.RPL_MONOFFLINE) {
+				let skip = !lastMonitor || msg.command === lastMonitor;
+				lastMonitor = msg.command;
+				if (skip) {
+					return;
+				}
+			}
+
+			if (!hasUnreadSeparator && buf.type != BufferType.SERVER && !isMessageBeforeReceipt(msg, buf.prevReadReceipt)) {
 				sep.push(html`<${UnreadSeparator} key="unread"/>`);
 				hasUnreadSeparator = true;
 			}
@@ -658,7 +694,7 @@ export default class Buffer extends Component {
 			}
 
 			// TODO: consider checking the time difference too
-			if (canFoldMessage(msg)) {
+			if (settings.bufferEvents === BufferEventsDisplayMode.FOLD && canFoldMessage(msg)) {
 				foldMessages.push(msg);
 				return;
 			}

components/composer.js

@@ -118,8 +118,14 @@ export default class Composer extends Component {
 
 	handleWindowKeyDown(event) {
 		// If an <input> or <button> is focused, ignore.
-		if (document.activeElement !== document.body && document.activeElement.tagName !== "SECTION") {
-			return;
+		if (document.activeElement && document.activeElement !== document.body) {
+			switch (document.activeElement.tagName.toLowerCase()) {
+			case "section":
+			case "a":
+				break;
+			default:
+				return;
+			}
 		}
 
 		// If a modifier is pressed, reserve for key bindings.
@@ -143,7 +149,7 @@ export default class Composer extends Component {
 			return;
 		}
 
-		if (this.props.readOnly && event.key !== "/") {
+		if (this.props.readOnly || (this.props.commandOnly && event.key !== "/")) {
 			return;
 		}
 
@@ -167,7 +173,7 @@ export default class Composer extends Component {
 			return;
 		}
 
-		let text = event.clipboardData.getData('text');
+		let text = event.clipboardData.getData("text");
 
 		event.preventDefault();
 		event.stopImmediatePropagation();
@@ -201,6 +207,11 @@ export default class Composer extends Component {
 			className = "read-only";
 		}
 
+		let placeholder = "Type a message";
+		if (this.props.commandOnly) {
+			placeholder = "Type a command (see /help)";
+		}
+
 		return html`
 			<form
 				id="composer"
@@ -214,9 +225,10 @@ export default class Composer extends Component {
 					ref=${this.textInput}
 					value=${this.state.text}
 					autocomplete="off"
-					placeholder="Type a message"
+					placeholder=${placeholder}
 					enterkeyhint="send"
 					onKeyDown=${this.handleInputKeyDown}
+					maxlength=${this.props.maxLen}
 				/>
 			</form>
 		`;

components/connect-form.js

@@ -17,7 +17,7 @@ export default class ConnectForm extends Component {
 	constructor(props) {
 		super(props);
 
-		this.handleChange = this.handleChange.bind(this);
+		this.handleInput = this.handleInput.bind(this);
 		this.handleSubmit = this.handleSubmit.bind(this);
 
 		if (props.params) {
@@ -32,7 +32,7 @@ export default class ConnectForm extends Component {
 		}
 	}
 
-	handleChange(event) {
+	handleInput(event) {
 		let target = event.target;
 		let value = target.type == "checkbox" ? target.checked : target.value;
 		this.setState({ [target.name]: value });
@@ -63,6 +63,8 @@ export default class ConnectForm extends Component {
 			};
 		} else if (this.props.auth === "external") {
 			params.saslExternal = true;
+		} else if (this.props.auth === "oauth2") {
+			params.saslOauthBearer = this.props.params.saslOauthBearer;
 		}
 
 		if (this.state.autojoin) {
@@ -110,7 +112,7 @@ export default class ConnectForm extends Component {
 		}
 
 		let auth = null;
-		if (this.props.auth !== "disabled" && this.props.auth !== "external") {
+		if (this.props.auth !== "disabled" && this.props.auth !== "external" && this.props.auth !== "oauth2") {
 			auth = html`
 				<label>
 					Password:<br/>
@@ -138,14 +140,14 @@ export default class ConnectForm extends Component {
 						name="autojoin"
 						checked=${this.state.autojoin}
 					/>
-					Auto-join channel${s} <strong>${channels.join(', ')}</strong>
+					Auto-join channel${s} <strong>${channels.join(", ")}</strong>
 				</label>
 				<br/><br/>
 			`;
 		}
 
 		return html`
-			<form onChange=${this.handleChange} onSubmit=${this.handleSubmit}>
+			<form onInput=${this.handleInput} onSubmit=${this.handleSubmit}>
 				<h2>Connect to IRC</h2>
 
 				<label>
@@ -157,6 +159,7 @@ export default class ConnectForm extends Component {
 						disabled=${disabled}
 						ref=${this.nickInput}
 						required
+						autofocus
 					/>
 				</label>
 				<br/><br/>
@@ -210,7 +213,7 @@ export default class ConnectForm extends Component {
 					<label>
 						Server password:<br/>
 						<input
-							type="text"
+							type="password"
 							name="pass"
 							value=${this.state.pass}
 							disabled=${disabled}

components/help.js

@@ -6,7 +6,7 @@ function KeyBindingsHelp() {
 	let l = keybindings.map((binding) => {
 		let keys = [];
 		if (binding.ctrlKey) {
-			keys.psuh("Ctrl");
+			keys.push("Ctrl");
 		}
 		if (binding.altKey) {
 			keys.push("Alt");
@@ -26,27 +26,27 @@ function KeyBindingsHelp() {
 		`;
 	});
 
-	return html`
-		<dl>
-			<dt><kbd>/</kbd></dt>
-			<dd>Start writing a command</dd>
+	if (!window.matchMedia("(pointer: none)").matches) {
+		l.push(html`
+			<dt><strong>Middle mouse click</strong></dt>
+			<dd>Close buffer</dd>
+		`);
+	}
 
-			${l}
-		</dl>
-	`;
+	return html`<dl>${l}</dl>`;
 }
 
 function CommandsHelp() {
 	let l = Object.keys(commands).map((name) => {
 		let cmd = commands[name];
 
-		let usage = "/" + name;
+		let usage = [html`<strong>/${name}</strong>`];
 		if (cmd.usage) {
-			usage += " " + cmd.usage;
+			usage.push(" " + cmd.usage);
 		}
 
 		return html`
-			<dt><strong><code>${usage}</code></strong></dt>
+			<dt><code>${usage}</code></dt>
 			<dd>${cmd.description}</dd>
 		`;
 	});

components/join-form.js

@@ -8,7 +8,7 @@ export default class JoinForm extends Component {
 	constructor(props) {
 		super(props);
 
-		this.handleChange = this.handleChange.bind(this);
+		this.handleInput = this.handleInput.bind(this);
 		this.handleSubmit = this.handleSubmit.bind(this);
 
 		if (props.channel) {
@@ -16,7 +16,7 @@ export default class JoinForm extends Component {
 		}
 	}
 
-	handleChange(event) {
+	handleInput(event) {
 		let target = event.target;
 		let value = target.type == "checkbox" ? target.checked : target.value;
 		this.setState({ [target.name]: value });
@@ -34,7 +34,7 @@ export default class JoinForm extends Component {
 
 	render() {
 		return html`
-			<form onChange=${this.handleChange} onSubmit=${this.handleSubmit}>
+			<form onInput=${this.handleInput} onSubmit=${this.handleSubmit}>
 				<label>
 					Channel:<br/>
 					<input type="text" name="channel" value=${this.state.channel} autofocus required/>

components/member-list.js

@@ -1,5 +1,4 @@
 import { html, Component } from "../lib/index.js";
-import { getNickURL } from "../state.js";
 import { strip as stripANSI } from "../lib/ansi.js";
 import Membership from "./membership.js";
 import * as irc from "../lib/irc.js";
@@ -73,7 +72,7 @@ class MemberItem extends Component {
 		return html`
 			<li>
 				<a
-					href=${getNickURL(this.props.nick)}
+					href=${irc.formatURL({ entity: this.props.nick, enttype: "user" })}
 					class=${classes.join(" ")}
 					title=${title}
 					onClick=${this.handleClick}
@@ -101,7 +100,7 @@ function sortMembers(a, b) {
 		return i - j;
 	}
 
-	return nickA < nickB ? -1 : 1;
+	return nickA.localeCompare(nickB);
 }
 
 export default class MemberList extends Component {

components/network-form.js

@@ -22,7 +22,7 @@ export default class NetworkForm extends Component {
 
 		this.prevParams = { ...defaultParams };
 
-		this.handleChange = this.handleChange.bind(this);
+		this.handleInput = this.handleInput.bind(this);
 		this.handleSubmit = this.handleSubmit.bind(this);
 
 		if (props.params) {
@@ -35,7 +35,7 @@ export default class NetworkForm extends Component {
 		}
 	}
 
-	handleChange(event) {
+	handleInput(event) {
 		let target = event.target;
 		let value = target.type == "checkbox" ? target.checked : target.value;
 		this.setState({ [target.name]: value });
@@ -85,7 +85,7 @@ export default class NetworkForm extends Component {
 		}
 
 		return html`
-			<form onChange=${this.handleChange} onSubmit=${this.handleSubmit}>
+			<form onInput=${this.handleInput} onSubmit=${this.handleSubmit}>
 				<label>
 					Hostname:<br/>
 					<input type="text" name="host" value=${this.state.host} autofocus required/>

components/register-form.js

@@ -9,11 +9,11 @@ export default class RegisterForm extends Component {
 	constructor(props) {
 		super(props);
 
-		this.handleChange = this.handleChange.bind(this);
+		this.handleInput = this.handleInput.bind(this);
 		this.handleSubmit = this.handleSubmit.bind(this);
 	}
 
-	handleChange(event) {
+	handleInput(event) {
 		let target = event.target;
 		let value = target.type == "checkbox" ? target.checked : target.value;
 		this.setState({ [target.name]: value });
@@ -27,7 +27,7 @@ export default class RegisterForm extends Component {
 
 	render() {
 		return html`
-			<form onChange=${this.handleChange} onSubmit=${this.handleSubmit}>
+			<form onInput=${this.handleInput} onSubmit=${this.handleSubmit}>
 				<label>
 					E-mail:<br/>
 					<input

components/scroll-manager.js

@@ -34,6 +34,9 @@ export default class ScrollManager extends Component {
 
 	restoreScrollPosition() {
 		let target = this.props.target.current;
+		if (!target.firstChild) {
+			return;
+		}
 
 		let stickToKey = store.get(this.props.scrollKey);
 		if (!stickToKey) {

components/settings-form.js

@@ -0,0 +1,112 @@
+import { html, Component } from "../lib/index.js";
+
+export default class SettingsForm extends Component {
+	state = {};
+
+	constructor(props) {
+		super(props);
+
+		this.state.secondsInTimestamps = props.settings.secondsInTimestamps;
+		this.state.bufferEvents = props.settings.bufferEvents;
+
+		this.handleInput = this.handleInput.bind(this);
+		this.handleSubmit = this.handleSubmit.bind(this);
+	}
+
+	handleInput(event) {
+		let target = event.target;
+		let value = target.type == "checkbox" ? target.checked : target.value;
+		this.setState({ [target.name]: value }, () => {
+			this.props.onChange(this.state);
+		});
+	}
+
+	handleSubmit(event) {
+		event.preventDefault();
+		this.props.onClose();
+	}
+
+	registerProtocol() {
+		let url = window.location.origin + window.location.pathname + "?open=%s";
+		try {
+			navigator.registerProtocolHandler("irc", url);
+			navigator.registerProtocolHandler("ircs", url);
+		} catch (err) {
+			console.error("Failed to register protocol handler: ", err);
+		}
+	}
+
+	render() {
+		let protocolHandler = null;
+		if (this.props.showProtocolHandler) {
+			protocolHandler = html`
+				<div class="protocol-handler">
+					<div class="left">
+						Set gamja as your default IRC client for this browser.
+						IRC links will be automatically opened here.
+					</div>
+					<div class="right">
+						<button type="button" onClick=${() => this.registerProtocol()}>
+							Enable
+						</button>
+					</div>
+				</div>
+				<br/><br/>
+			`;
+		}
+
+		return html`
+			<form onInput=${this.handleInput} onSubmit=${this.handleSubmit}>
+				<label>
+					<input
+						type="checkbox"
+						name="secondsInTimestamps"
+						checked=${this.state.secondsInTimestamps}
+					/>
+					Show seconds in time indicator
+				</label>
+				<br/><br/>
+
+				<label>
+					<input
+						type="radio"
+						name="bufferEvents"
+						value="fold"
+						checked=${this.state.bufferEvents === "fold"}
+					/>
+					Show and fold chat events
+				</label>
+				<br/>
+				<label>
+					<input
+						type="radio"
+						name="bufferEvents"
+						value="expand"
+						checked=${this.state.bufferEvents === "expand"}
+					/>
+					Show and expand chat events
+				</label>
+				<br/>
+				<label>
+					<input
+						type="radio"
+						name="bufferEvents"
+						value="hide"
+						checked=${this.state.bufferEvents === "hide"}
+					/>
+					Hide chat events
+				</label>
+				<br/><br/>
+
+				${protocolHandler}
+
+				<button type="button" class="danger" onClick=${() => this.props.onDisconnect()}>
+					Disconnect
+				</button>
+				<button>
+					Close
+				</button>
+			</form>
+		`;
+	}
+}

components/switcher-form.js

@@ -0,0 +1,171 @@
+import { html, Component } from "../lib/index.js";
+import { BufferType, getBufferURL, getServerName } from "../state.js";
+import * as irc from "../lib/irc.js";
+
+class SwitcherItem extends Component {
+	constructor(props) {
+		super(props);
+
+		this.handleClick = this.handleClick.bind(this);
+	}
+
+	handleClick(event) {
+		event.preventDefault();
+		this.props.onClick();
+	}
+
+	render() {
+		let class_ = this.props.selected ? "selected" : "";
+
+		return html`
+			<li>
+				<a
+					href=${getBufferURL(this.props.buffer)}
+					class=${class_}
+					onClick=${this.handleClick}
+				>
+					<span class="server">
+						${getServerName(this.props.server, this.props.bouncerNetwork)}
+					</span>
+					${this.props.buffer.name}
+				</a>
+			</li>
+		`;
+	}
+}
+
+function matchString(s, query) {
+	return s.toLowerCase().includes(query) ? 1 : 0;
+}
+
+function matchBuffer(buf, server, query) {
+	let score = 2 * matchString(buf.name, query);
+	switch (buf.type) {
+	case BufferType.CHANNEL:
+		score += matchString(buf.topic || "", query);
+		break;
+	case BufferType.NICK:
+		let user = server.users.get(buf.name);
+		if (user && user.realname && irc.isMeaningfulRealname(user.realname, buf.name)) {
+			score += matchString(user.realname, query);
+		}
+		break;
+	}
+	return score;
+}
+
+export default class SwitcherForm extends Component {
+	state = {
+		query: "",
+		selected: 0,
+	};
+
+	constructor(props) {
+		super(props);
+
+		this.handleInput = this.handleInput.bind(this);
+		this.handleSubmit = this.handleSubmit.bind(this);
+		this.handleKeyUp = this.handleKeyUp.bind(this);
+	}
+
+	getSuggestions() {
+		let query = this.state.query.toLowerCase();
+
+		let l = [];
+		let scores = new Map();
+		for (let buf of this.props.buffers.values()) {
+			if (buf.type === BufferType.SERVER) {
+				continue;
+			}
+			let score = 0;
+			if (query !== "") {
+				let server = this.props.servers.get(buf.server);
+				score = matchBuffer(buf, server, query);
+				if (!score) {
+					continue;
+				}
+			}
+			scores.set(buf.id, score);
+			l.push(buf);
+		}
+
+		l.sort((a, b) => {
+			return scores.get(b.id) - scores.get(a.id);
+		});
+
+		return l.slice(0, 20);
+	}
+
+	handleInput(event) {
+		let target = event.target;
+		this.setState({ [target.name]: target.value });
+	}
+
+	handleSubmit(event) {
+		event.preventDefault();
+		this.props.onSubmit(this.getSuggestions()[this.state.selected]);
+	}
+
+	handleKeyUp(event) {
+		switch (event.key) {
+		case "ArrowUp":
+			event.stopPropagation();
+			this.move(-1);
+			break;
+		case "ArrowDown":
+			event.stopPropagation();
+			this.move(1);
+			break;
+		}
+	}
+
+	move(delta) {
+		let numSuggestions = this.getSuggestions().length;
+		this.setState((state) => {
+			return {
+				selected: (state.selected + delta + numSuggestions) % numSuggestions,
+			};
+		});
+	}
+
+	render() {
+		let items = this.getSuggestions().map((buf, i) => {
+			let server = this.props.servers.get(buf.server);
+
+			let bouncerNetwork = null;
+			if (server.bouncerNetID) {
+				bouncerNetwork = this.props.bouncerNetworks.get(server.bouncerNetID);
+			}
+
+			return html`
+				<${SwitcherItem}
+					buffer=${buf}
+					server=${server}
+					bouncerNetwork=${bouncerNetwork}
+					selected=${this.state.selected === i}
+					onClick=${() => this.props.onSubmit(buf)}
+				/>
+			`;
+		});
+
+		return html`
+			<form
+				onInput=${this.handleInput}
+				onSubmit=${this.handleSubmit}
+				onKeyUp=${this.handleKeyUp}
+			>
+				<input
+					type="search"
+					name="query"
+					value=${this.state.query}
+					placeholder="Filter"
+					autocomplete="off"
+					autofocus
+				/>
+				<ul class="switcher-list">
+					${items}
+				</ul>
+			</form>
+		`;
+	}
+}

components/verify-form.js

@@ -9,11 +9,11 @@ export default class RegisterForm extends Component {
 	constructor(props) {
 		super(props);
 
-		this.handleChange = this.handleChange.bind(this);
+		this.handleInput = this.handleInput.bind(this);
 		this.handleSubmit = this.handleSubmit.bind(this);
 	}
 
-	handleChange(event) {
+	handleInput(event) {
 		let target = event.target;
 		let value = target.type == "checkbox" ? target.checked : target.value;
 		this.setState({ [target.name]: value });
@@ -27,7 +27,7 @@ export default class RegisterForm extends Component {
 
 	render() {
 		return html`
-			<form onChange=${this.handleChange} onSubmit=${this.handleSubmit}>
+			<form onInput=${this.handleInput} onSubmit=${this.handleSubmit}>
 				<p>Your account <strong>${this.props.account}</strong> has been created, but a verification code is required to complete the registration.</p>
 
 				<p>${linkify(this.props.message)}</p>

doc/config-file.md

@@ -0,0 +1,45 @@
+# Configuration file
+
+gamja can be configured using a `config.json` file at the root. Example:
+
+```json
+{
+	"server": {
+		"url": "wss://irc.example.org",
+		"autojoin": "#gamja"
+	},
+	"oauth2": {
+		"url": "https://auth.example.org",
+		"client_id": "asdf"
+	}
+}
+```
+
+## IRC server
+
+The `server` object configures the IRC server.
+
+- `url` (string): WebSocket URL or path to connect to. Defaults to `/socket`.
+- `autojoin` (string or array of strings): Channel(s) to automatically join
+  after connecting.
+- `auth` (string): configure how the password UI is presented to the user. Set
+  to `mandatory` to require a password, `optional` to accept one but not
+  require it, `disabled` to never ask for a password, `external` to use SASL
+  EXTERNAL, `oauth2` to use SASL OAUTHBEARER. Defaults to `optional`.
+- `nick` (string): default nickname. If it contains a `*` character, it will be
+  replaced with a random string.
+- `autoconnect` (boolean): don't display the login UI, immediately connect to
+  the server
+- `ping` (number): interval in seconds to send PING commands. Set to 0 to
+  disable, this is the default. Enabling PINGs can have an impact on client
+  power usage and should only be enabled if necessary.
+
+## OAuth 2.0
+
+The `oauth2` object configures OAuth 2.0 authentication.
+
+- `url` (string): OAuth 2.0 server URL. The server must support OAuth 2.0
+  Authorization Server Metadata (RFC 8414) or OpenID Connect Discovery.
+- `client_id` (string): OAuth 2.0 client ID.
+- `client_secret` (string): OAuth 2.0 client secret.
+- `scope` (string): OAuth 2.0 scope.

doc/setup.md

@@ -0,0 +1,66 @@
+# Setting up gamja
+
+An HTTP server must be configured to serve the gamja static files. Usually,
+the same HTTP server is used as a reverse proxy for the IRC WebSocket.
+
+## [soju]
+
+Add a WebSocket listener to soju, e.g. `listen wss://127.0.0.1:8080`. Then
+configure your reverse proxy to serve gamja files and proxy `/socket` to soju.
+
+## [webircgateway]
+
+Setup webircgateway to serve gamja files:
+
+```ini
+[fileserving]
+enabled = true
+webroot = /path/to/gamja
+```
+
+Then configure gamja to connect to `/webirc/websocket/` (either by setting
+`server.url` in the [configuration file], or by appending
+`?server=/webirc/websocket/` to the URL).
+
+## nginx
+
+If you use nginx as a reverse HTTP proxy, make sure to bump the default read
+timeout to a value higher than the IRC server PING interval. Example:
+
+```
+location / {
+	root /path/to/gamja;
+}
+
+location /socket {
+	proxy_pass http://127.0.0.1:8080;
+	proxy_read_timeout 600s;
+	proxy_http_version 1.1;
+	proxy_set_header Upgrade $http_upgrade;
+	proxy_set_header Connection "Upgrade";
+	proxy_set_header X-Forwarded-For $remote_addr;
+	proxy_set_header X-Forwarded-Proto $scheme;
+}
+```
+
+If you are unable to configure the proxy timeout accordingly, or if your IRC
+server doesn't send PINGs, you can set the `server.ping` option in
+`config.json` (see below).
+
+## [kimchi]
+
+Setup kimchi to serve gamja files and proxy the WebSocket connection:
+
+```
+site irc.example.org {
+	file_server /path/to/gamja
+}
+site irc.example.org/socket {
+	reverse_proxy http://127.0.0.1:8080
+}
+```
+
+[soju]: https://soju.im
+[webircgateway]: https://github.com/kiwiirc/webircgateway
+[kimchi]: https://sr.ht/~emersion/kimchi/
+[configuration file]: config-file.md

doc/url-params.md

@@ -0,0 +1,14 @@
+# URL parameters
+
+gamja settings can be overridden using URL query parameters:
+
+- `server`: path or URL to the WebSocket server
+- `nick`: nickname
+- `channels`: comma-separated list of channels to join (`#` needs to be escaped)
+- `open`: [IRC URL] to open
+- `debug`: if set to 1, debug mode is enabled
+
+Alternatively, the channels can be set with the URL fragment (ie, by just
+appending the channel name to the gamja URL).
+
+[IRC URL]: https://datatracker.ietf.org/doc/html/draft-butcher-irc-url-04

keybindings.js

@@ -1,4 +1,4 @@
-import { ReceiptType, Unread, BufferType, SERVER_BUFFER } from "./state.js";
+import { ReceiptType, Unread, BufferType, SERVER_BUFFER, receiptFromMessage } from "./state.js";
 
 function getSiblingBuffer(buffers, bufID, delta) {
 	let bufList = Array.from(buffers.values());
@@ -19,22 +19,24 @@ export const keybindings = [
 			app.setState((state) => {
 				let buffers = new Map();
 				state.buffers.forEach((buf) => {
-					if (buf.messages.length > 0) {
-						let lastMsg = buf.messages[buf.messages.length - 1];
-						app.setReceipt(buf.name, ReceiptType.READ, lastMsg);
-					}
-
 					buffers.set(buf.id, {
 						...buf,
 						unread: Unread.NONE,
 						prevReadReceipt: null,
 					});
 
+					let receipts = {};
+					if (buf.messages.length > 0) {
+						let lastMsg = buf.messages[buf.messages.length - 1];
+						receipts[ReceiptType.READ] = receiptFromMessage(lastMsg);
+					}
+
 					let client = app.clients.get(buf.server);
 					app.bufferStore.put({
 						name: buf.name,
 						server: client.params,
 						unread: Unread.NONE,
+						receipts,
 					});
 				});
 				return { buffers };
@@ -92,6 +94,14 @@ export const keybindings = [
 			}
 		},
 	},
+	{
+		key: "k",
+		ctrlKey: true,
+		description: "Switch to a buffer",
+		execute: (app) => {
+			app.openDialog("switch");
+		},
+	},
 ];
 
 export function setup(app) {

lib/ansi.js

@@ -10,10 +10,26 @@ const COLOR_HEX = "\x04";
 const REVERSE_COLOR = "\x16";
 const RESET = "\x0F";
 
+const HEX_COLOR_LENGTH = 6;
+
 function isDigit(ch) {
 	return ch >= "0" && ch <= "9";
 }
 
+function isHexColor(text) {
+	if (text.length < HEX_COLOR_LENGTH) {
+		return false;
+	}
+	for (let i = 0; i < HEX_COLOR_LENGTH; i++) {
+		let ch = text[i].toUpperCase();
+		let ok = (ch >= "0" && ch <= "9") || (ch >= "A" && ch <= "F");
+		if (!ok) {
+			return false;
+		}
+	}
+	return true;
+}
+
 export function strip(text) {
 	let out = "";
 	for (let i = 0; i < text.length; i++) {
@@ -43,7 +59,13 @@ export function strip(text) {
 			}
 			break;
 		case COLOR_HEX:
-			i += 6;
+			if (!isHexColor(text.slice(i + 1))) {
+				break;
+			}
+			i += HEX_COLOR_LENGTH;
+			if (text[i + 1] == "," && isHexColor(text.slice(i + 2))) {
+				i += 1 + HEX_COLOR_LENGTH;
+			}
 			break;
 		default:
 			out += ch;

lib/base64.js

@@ -0,0 +1,42 @@
+const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+
+/* The JS world is still in the stone age. We're in 2022 and we still don't
+ * have the technology to correctly base64-encode a UTF-8 string. Can't wait
+ * the next industrial revolution.
+ *
+ * For more info, see:
+ * https://developer.mozilla.org/en-US/docs/Glossary/Base64#the_unicode_problem
+ */
+export function encode(data) {
+	if (!window.TextEncoder) {
+		return btoa(data);
+	}
+
+	var encoder = new TextEncoder();
+	var bytes = encoder.encode(data);
+
+	var trailing = bytes.length % 3;
+	var out = "";
+	for (var i = 0; i < bytes.length - trailing; i += 3) {
+		var u24 = (bytes[i] << 16) + (bytes[i + 1] << 8) + bytes[i + 2];
+		out += alphabet[(u24 >> 18) & 0x3F];
+		out += alphabet[(u24 >> 12) & 0x3F];
+		out += alphabet[(u24 >> 6) & 0x3F];
+		out += alphabet[u24 & 0x3F];
+	}
+
+	if (trailing == 1) {
+		var u8 = bytes[bytes.length - 1];
+		out += alphabet[u8 >> 2];
+		out += alphabet[(u8 << 4) & 0x3F];
+		out += "==";
+	} else if (trailing == 2) {
+		var u16 = (bytes[bytes.length - 2] << 8) + bytes[bytes.length - 1];
+		out += alphabet[u16 >> 10];
+		out += alphabet[(u16 >> 4) & 0x3F];
+		out += alphabet[(u16 << 2) & 0x3F];
+		out += "=";
+	}
+
+	return out;
+}

lib/client.js

@@ -1,4 +1,5 @@
 import * as irc from "./irc.js";
+import * as base64 from "./base64.js";
 
 // Static list of capabilities that are always requested when supported by the
 // server
@@ -9,6 +10,7 @@ const permanentCaps = [
 	"chghost",
 	"echo-message",
 	"extended-join",
+	"extended-monitor",
 	"invite-notify",
 	"labeled-response",
 	"message-tags",
@@ -19,8 +21,8 @@ const permanentCaps = [
 
 	"draft/account-registration",
 	"draft/chathistory",
-	"draft/event-playback",
 	"draft/extended-monitor",
+	"draft/read-marker",
 
 	"soju.im/bouncer-networks",
 ];
@@ -47,6 +49,8 @@ const WHOX_FIELDS = {
 	"realname": "r",
 };
 
+const FALLBACK_SERVER_PREFIX = { name: "*" };
+
 let lastLabel = 0;
 let lastWhoxToken = 0;
 
@@ -106,7 +110,7 @@ export default class Client extends EventTarget {
 	};
 
 	status = Client.Status.DISCONNECTED;
-	serverPrefix = { name: "*" };
+	serverPrefix = FALLBACK_SERVER_PREFIX;
 	nick = null;
 	supportsCap = false;
 	caps = new irc.CapRegistry();
@@ -121,7 +125,10 @@ export default class Client extends EventTarget {
 		pass: null,
 		saslPlain: null,
 		saslExternal: false,
+		saslOauthBearer: null,
 		bouncerNetwork: null,
+		ping: 0,
+		eventPlayback: true,
 	};
 	debug = false;
 	batches = new Map();
@@ -185,7 +192,7 @@ export default class Client extends EventTarget {
 			this.ws = null;
 			this.setStatus(Client.Status.DISCONNECTED);
 			this.nick = null;
-			this.serverPrefix = null;
+			this.serverPrefix = FALLBACK_SERVER_PREFIX;
 			this.caps = new irc.CapRegistry();
 			this.batches = new Map();
 			Object.keys(this.pendingCmds).forEach((k) => {
@@ -244,6 +251,7 @@ export default class Client extends EventTarget {
 		this.setStatus(Client.Status.REGISTERING);
 
 		this.reconnectBackoff.reset();
+		this.setPingInterval(this.params.ping);
 
 		this.nick = this.params.nick;
 
@@ -289,6 +297,9 @@ export default class Client extends EventTarget {
 		if (!msg.prefix) {
 			msg.prefix = this.serverPrefix;
 		}
+		if (!msg.tags) {
+			msg.tags = {};
+		}
 
 		let msgBatch = null;
 		if (msg.tags["batch"]) {
@@ -457,11 +468,15 @@ export default class Client extends EventTarget {
 		let initialResp = null;
 		switch (mechanism) {
 		case "PLAIN":
-			let respStr = btoa("\0" + params.username + "\0" + params.password);
+			let respStr = base64.encode("\0" + params.username + "\0" + params.password);
 			initialResp = { command: "AUTHENTICATE", params: [respStr] };
 			break;
 		case "EXTERNAL":
-			initialResp = { command: "AUTHENTICATE", params: [btoa("")] };
+			initialResp = { command: "AUTHENTICATE", params: ["+"] };
+			break;
+		case "OAUTHBEARER":
+			let raw = "n,,\x01auth=Bearer " + params.token + "\x01\x01";
+			initialResp = { command: "AUTHENTICATE", params: [base64.encode(raw)] };
 			break;
 		default:
 			throw new Error(`Unknown authentication mechanism '${mechanism}'`);
@@ -621,6 +636,9 @@ export default class Client extends EventTarget {
 		if (!this.params.bouncerNetwork) {
 			wantCaps.push("soju.im/bouncer-networks-notify");
 		}
+		if (this.params.eventPlayback) {
+			wantCaps.push("draft/event-playback");
+		}
 
 		let msg = this.caps.requestAvailable(wantCaps);
 		if (msg) {
@@ -651,6 +669,8 @@ export default class Client extends EventTarget {
 						promise = this.authenticate("PLAIN", this.params.saslPlain);
 					} else if (this.params.saslExternal) {
 						promise = this.authenticate("EXTERNAL");
+					} else if (this.params.saslOauthBearer) {
+						promise = this.authenticate("OAUTHBEARER", this.params.saslOauthBearer);
 					}
 					(promise || Promise.resolve()).catch((err) => {
 						this.dispatchError(err);
@@ -713,6 +733,11 @@ export default class Client extends EventTarget {
 		return chanTypes.indexOf(name[0]) >= 0;
 	}
 
+	isNick(name) {
+		// A dollar sign is used for server-wide broadcasts
+		return !this.isServer(name) && !this.isChannel(name) && !name.startsWith('$');
+	}
+
 	setPingInterval(sec) {
 		clearInterval(this.pingIntervalID);
 		this.pingIntervalID = null;
@@ -802,10 +827,14 @@ export default class Client extends EventTarget {
 		});
 	}
 
-	join(channel) {
+	join(channel, password) {
+		let params = [channel];
+		if (password) {
+			params.push(password);
+		}
 		let msg = {
 			command: "JOIN",
-			params: [channel],
+			params: params,
 		};
 		return this.roundtrip(msg, (msg) => {
 			switch (msg.command) {
@@ -875,62 +904,56 @@ export default class Client extends EventTarget {
 	}
 
 	/* Fetch one page of history before the given date. */
-	fetchHistoryBefore(target, before, limit) {
+	async fetchHistoryBefore(target, before, limit) {
 		let max = Math.min(limit, this.isupport.chatHistory());
 		let params = ["BEFORE", target, "timestamp=" + before, max];
-		return this.roundtripChatHistory(params).then((messages) => {
-			return { more: messages.length >= max };
-		});
+		let messages = await this.roundtripChatHistory(params);
+		return { messages, more: messages.length >= max };
 	}
 
 	/* Fetch history in ascending order. */
-	fetchHistoryBetween(target, after, before, limit) {
+	async fetchHistoryBetween(target, after, before, limit) {
 		let max = Math.min(limit, this.isupport.chatHistory());
 		let params = ["AFTER", target, "timestamp=" + after.time, max];
-		return this.roundtripChatHistory(params).then((messages) => {
-			limit -= messages.length;
-			if (limit <= 0) {
-				throw new Error("Cannot fetch all chat history: too many messages");
-			}
-			if (messages.length == max) {
-				// There are still more messages to fetch
-				after.time = messages[messages.length - 1].tags.time;
-				return this.fetchHistoryBetween(target, after, before, limit);
-			}
-			return null;
-		});
+		let messages = await this.roundtripChatHistory(params);
+		limit -= messages.length;
+		if (limit <= 0) {
+			throw new Error("Cannot fetch all chat history: too many messages");
+		}
+		if (messages.length >= max) {
+			// There are still more messages to fetch
+			after.time = messages[messages.length - 1].tags.time;
+			return await this.fetchHistoryBetween(target, after, before, limit);
+		}
+		return { messages };
 	}
 
-	fetchHistoryTargets(t1, t2) {
+	async fetchHistoryTargets(t1, t2) {
 		let msg = {
 			command: "CHATHISTORY",
 			params: ["TARGETS", "timestamp=" + t1, "timestamp=" + t2, 1000],
 		};
-		return this.fetchBatch(msg, "draft/chathistory-targets").then((batch) => {
-			return batch.messages.map((msg) => {
-				if (msg.command != "CHATHISTORY" || msg.params[0] != "TARGETS") {
-					throw new Error("Cannot fetch chat history targets: unexpected message " + msg);
-				}
-				return {
-					name: msg.params[1],
-					latestMessage: msg.params[2],
-				};
-			});
+		let batch = await this.fetchBatch(msg, "draft/chathistory-targets");
+		return batch.messages.map((msg) => {
+			console.assert(msg.command === "CHATHISTORY" && msg.params[0] === "TARGETS");
+			return {
+				name: msg.params[1],
+				latestMessage: msg.params[2],
+			};
 		});
 	}
 
-	listBouncerNetworks() {
+	async listBouncerNetworks() {
 		let req = { command: "BOUNCER", params: ["LISTNETWORKS"] };
-		return this.fetchBatch(req, "soju.im/bouncer-networks").then((batch) => {
-			let networks = new Map();
-			for (let msg of batch.messages) {
-				console.assert(msg.command === "BOUNCER" && msg.params[0] === "NETWORK");
-				let id = msg.params[1];
-				let params = irc.parseTags(msg.params[2]);
-				networks.set(id, params);
-			}
-			return networks;
-		});
+		let batch = await this.fetchBatch(req, "soju.im/bouncer-networks");
+		let networks = new Map();
+		for (let msg of batch.messages) {
+			console.assert(msg.command === "BOUNCER" && msg.params[0] === "NETWORK");
+			let id = msg.params[1];
+			let params = irc.parseTags(msg.params[2]);
+			networks.set(id, params);
+		}
+		return networks;
 	}
 
 	monitor(target) {
@@ -1004,4 +1027,22 @@ export default class Client extends EventTarget {
 			return { message: msg.params[2] };
 		});
 	}
+
+	supportsReadMarker() {
+		return this.caps.enabled.has("draft/read-marker");
+	}
+
+	fetchReadMarker(target) {
+		this.send({
+			command: "MARKREAD",
+			params: [target],
+		});
+	}
+
+	setReadMarker(target, t) {
+		this.send({
+			command: "MARKREAD",
+			params: [target, "timestamp="+t],
+		});
+	}
 }

lib/irc.js

@@ -52,6 +52,7 @@ export const ERR_BADCHANNELKEY = "475";
 // RFC 2812
 export const ERR_UNAVAILRESOURCE = "437";
 // Other
+export const RPL_CHANNEL_URL = "328";
 export const RPL_CREATIONTIME = "329";
 export const RPL_QUIETLIST = "728";
 export const RPL_ENDOFQUIETLIST = "729";
@@ -73,7 +74,6 @@ export const ERR_SASLALREADY = "907";
 
 export const STD_MEMBERSHIPS = "~&@%+";
 export const STD_CHANTYPES = "#&+!";
-export const STD_CHANMODES = "beI,k,l,imnst";
 
 const tagEscapeMap = {
 	";": "\\:",
@@ -259,7 +259,7 @@ export function parseTargetPrefix(s, allowedPrefixes = STD_MEMBERSHIPS) {
 
 const alphaNum = (() => {
 	try {
-		return new RegExp(/^\p{L}$/, "u");
+		return new RegExp(/^[\p{L}0-9]$/, "u");
 	} catch (e) {
 		return new RegExp(/^[a-zA-Z0-9]$/, "u");
 	}
@@ -271,8 +271,6 @@ function isWordBoundary(ch) {
 	case "_":
 	case "|":
 		return false;
-	case "\u00A0":
-		return true;
 	default:
 		return !alphaNum.test(ch);
 	}
@@ -301,7 +299,7 @@ export function isHighlight(msg, nick, cm) {
 		if (i > 0) {
 			left = text[i - 1];
 		}
-		if (i < text.length) {
+		if (i + nick.length < text.length) {
 			right = text[i + nick.length];
 		}
 		if (isWordBoundary(left) && isWordBoundary(right)) {
@@ -464,6 +462,53 @@ export class Isupport {
 	bouncerNetID() {
 		return this.raw.get("BOUNCER_NETID");
 	}
+
+	chanModes() {
+		const stdChanModes = ["beI", "k", "l", "imnst"];
+		if (!this.raw.has("CHANMODES")) {
+			return stdChanModes;
+		}
+		let chanModes = this.raw.get("CHANMODES").split(",");
+		if (chanModes.length != 4) {
+			console.error("Invalid CHANMODES: ", this.raw.get("CHANMODES"));
+			return stdChanModes;
+		}
+		return chanModes;
+	}
+
+	bot() {
+		return this.raw.get("BOT");
+	}
+
+	userLen() {
+		if (!this.raw.has("USERLEN")) {
+			return 20;
+		}
+		return parseInt(this.raw.get("USERLEN"), 10);
+	}
+
+	hostLen() {
+		if (!this.raw.has("HOSTLEN")) {
+			return 63;
+		}
+		return parseInt(this.raw.get("HOSTLEN"), 10);
+	}
+
+	lineLen() {
+		if (!this.raw.has("LINELEN")) {
+			return 512;
+		}
+		return parseInt(this.raw.get("LINELEN"), 10);
+	}
+}
+
+export function getMaxPrivmsgLen(isupport, nick, target) {
+	let user = "_".repeat(isupport.userLen());
+	let host = "_".repeat(isupport.hostLen());
+	let prefix = { name: nick, user, host };
+	let msg = { prefix, command: "PRIVMSG", params: [target, ""] };
+	let raw = formatMessage(msg) + "\r\n";
+	return isupport.lineLen() - raw.length;
 }
 
 export const CaseMapping = {
@@ -672,11 +717,10 @@ export function getMessageLabel(msg) {
 }
 
 export function forEachChannelModeUpdate(msg, isupport, callback) {
-	let chanmodes = isupport.chanModes();
+	let [a, b, c, d] = isupport.chanModes();
 	let prefix = isupport.prefix();
 
 	let typeByMode = new Map();
-	let [a, b, c, d] = chanmodes.split(",");
 	Array.from(a).forEach((mode) => typeByMode.set(mode, "A"));
 	Array.from(b).forEach((mode) => typeByMode.set(mode, "B"));
 	Array.from(c).forEach((mode) => typeByMode.set(mode, "C"));
@@ -795,6 +839,17 @@ export function parseURL(str) {
 	return { host, enttype, entity };
 }
 
+export function formatURL({ host, enttype, entity } = {}) {
+	host = host || "";
+	entity = entity || "";
+
+	let s = "irc://" + host + "/" + encodeURIComponent(entity);
+	if (enttype) {
+		s += ",is" + enttype;
+	}
+	return s;
+}
+
 export class CapRegistry {
 	available = new Map();
 	enabled = new Set();
@@ -834,7 +889,6 @@ export class CapRegistry {
 			});
 			break;
 		case "ACK":
-			// TODO: handle `ACK -cap` to
 			args[0].split(" ").forEach((cap) => {
 				cap = cap.toLowerCase();
 				if (cap.startsWith("-")) {

lib/oauth2.js

@@ -0,0 +1,109 @@
+function formatQueryString(params) {
+	let l = [];
+	for (let k in params) {
+		l.push(encodeURIComponent(k) + "=" + encodeURIComponent(params[k]));
+	}
+	return l.join("&");
+}
+
+export async function fetchServerMetadata(url) {
+	// TODO: handle path in config.oauth2.url
+	let resp;
+	try {
+		resp = await fetch(url + "/.well-known/oauth-authorization-server");
+		if (!resp.ok) {
+			throw new Error(`HTTP error: ${resp.status} ${resp.statusText}`);
+		}
+	} catch (err) {
+		console.warn("OAuth 2.0 server doesn't support Authorization Server Metadata (retrying with OpenID Connect Discovery): ", err);
+		resp = await fetch(url + "/.well-known/openid-configuration");
+		if (!resp.ok) {
+			throw new Error(`HTTP error: ${resp.status} ${resp.statusText}`);
+		}
+	}
+
+	let data = await resp.json();
+	if (!data.issuer) {
+		throw new Error("Missing issuer in response");
+	}
+	if (!data.authorization_endpoint) {
+		throw new Error("Missing authorization_endpoint in response");
+	}
+	if (!data.token_endpoint) {
+		throw new Error("Missing authorization_endpoint in response");
+	}
+	if (!data.response_types_supported.includes("code")) {
+		throw new Error("Server doesn't support authorization code response type");
+	}
+	return data;
+}
+
+export function redirectAuthorize({ serverMetadata, clientId, redirectUri, scope }) {
+	// TODO: move fragment to query string in redirect_uri
+	// TODO: use the state param to prevent cross-site request
+	// forgery
+	let params = {
+		response_type: "code",
+		client_id: clientId,
+		redirect_uri: redirectUri,
+	};
+	if (scope) {
+		params.scope = scope;
+	}
+	window.location.assign(serverMetadata.authorization_endpoint + "?" + formatQueryString(params));
+}
+
+function buildPostHeaders(clientId, clientSecret) {
+	let headers = {
+		"Content-Type": "application/x-www-form-urlencoded",
+		"Accept": "application/json",
+	};
+	if (clientSecret) {
+		headers["Authorization"] = "Basic " + btoa(encodeURIComponent(clientId) + ":" + encodeURIComponent(clientSecret));
+	}
+	return headers;
+}
+
+export async function exchangeCode({ serverMetadata, redirectUri, code, clientId, clientSecret }) {
+	let data = {
+		grant_type: "authorization_code",
+		code,
+		redirect_uri: redirectUri,
+	};
+	if (!clientSecret) {
+		data.client_id = clientId;
+	}
+
+	let resp = await fetch(serverMetadata.token_endpoint, {
+		method: "POST",
+		headers: buildPostHeaders(clientId, clientSecret),
+		body: formatQueryString(data),
+	});
+
+	if (!resp.ok) {
+		throw new Error(`HTTP error: ${resp.status} ${resp.statusText}`);
+	}
+	data = await resp.json();
+
+	if (data.error) {
+		throw new Error("Authentication failed: " + (data.error_description || data.error));
+	}
+
+	return data;
+}
+
+export async function introspectToken({ serverMetadata, token, clientId, clientSecret }) {
+	let resp = await fetch(serverMetadata.introspection_endpoint, {
+		method: "POST",
+		headers: buildPostHeaders(clientId, clientSecret),
+		body: formatQueryString({ token }),
+	});
+	if (!resp.ok) {
+		throw new Error(`HTTP error: ${resp.status} ${resp.statusText}`);
+	}
+	let data = await resp.json();
+	if (!data.active) {
+		throw new Error("Expired token");
+	}
+	return data;
+}

package.json

@@ -22,7 +22,11 @@
   "targets": {
     "default": {
       "source": "index.html",
+      "context": "browser",
       "publicUrl": "."
     }
+  },
+  "engines": {
+    "node": ">=14.13.0"
   }
 }

state.js

@@ -1,5 +1,6 @@
 import * as irc from "./lib/irc.js";
 import Client from "./lib/client.js";
+import { createContext } from "./lib/index.js";
 
 export const SERVER_BUFFER = "*";
 
@@ -34,22 +35,22 @@ export const ReceiptType = {
 	READ: "read",
 };
 
-export function getNickURL(nick) {
-	return "irc:///" + encodeURIComponent(nick) + ",isuser";
-}
+export const BufferEventsDisplayMode = {
+	FOLD: "fold",
+	EXPAND: "expand",
+	HIDE: "hide",
+};
 
-export function getChannelURL(channel) {
-	return "irc:///" + encodeURIComponent(channel);
-}
+export const SettingsContext = createContext("settings");
 
 export function getBufferURL(buf) {
 	switch (buf.type) {
 	case BufferType.SERVER:
-		return "irc:///";
+		return irc.formatURL();
 	case BufferType.CHANNEL:
-		return getChannelURL(buf.name);
+		return irc.formatURL({ entity: buf.name });
 	case BufferType.NICK:
-		return getNickURL(buf.name);
+		return irc.formatURL({ entity: buf.name, enttype: "user" });
 	}
 	throw new Error("Unknown buffer type: " + buf.type);
 }
@@ -85,6 +86,42 @@ export function getServerName(server, bouncerNetwork) {
 	}
 }
 
+export function receiptFromMessage(msg) {
+	// At this point all messages are supposed to have a time tag.
+	// App.addMessage ensures this is the case even if the server doesn't
+	// support server-time.
+	if (!msg.tags.time) {
+		throw new Error("Missing time message tag");
+	}
+	return { time: msg.tags.time };
+}
+
+export function isReceiptBefore(a, b) {
+	if (!b) {
+		return false;
+	}
+	if (!a) {
+		return true;
+	}
+	if (!a.time || !b.time) {
+		throw new Error("Missing receipt time");
+	}
+	return a.time <= b.time;
+}
+
+export function isMessageBeforeReceipt(msg, receipt) {
+	if (!receipt) {
+		return false;
+	}
+	if (!msg.tags.time) {
+		throw new Error("Missing time message tag");
+	}
+	if (!receipt.time) {
+		throw new Error("Missing receipt time");
+	}
+	return msg.tags.time <= receipt.time;
+}
+
 function updateState(state, updater) {
 	let updated;
 	if (typeof updater === "function") {
@@ -112,7 +149,7 @@ function compareBuffers(a, b) {
 		return isServerBuffer(b) ? 1 : -1;
 	}
 	if (a.name != b.name) {
-		return a.name > b.name ? 1 : -1;
+		return a.name.localeCompare(b.name);
 	}
 	return 0;
 }
@@ -172,6 +209,11 @@ export const State = {
 			servers: new Map(),
 			buffers: new Map(),
 			activeBuffer: null,
+			bouncerNetworks: new Map(),
+			settings: {
+				secondsInTimestamps: true,
+				bufferEvents: BufferEventsDisplayMode.FOLD,
+			},
 		};
 	},
 	updateServer(state, id, updater) {
@@ -293,6 +335,7 @@ export const State = {
 			serverInfo: null, // if server
 			joined: false, // if channel
 			topic: null, // if channel
+			hasInitialWho: false, // if channel
 			members: new irc.CaseMapMap(null, client.cm), // if channel
 			messages: [],
 			unread: Unread.NONE,
@@ -302,6 +345,19 @@ export const State = {
 		let buffers = new Map(bufferList.map((buf) => [buf.id, buf]));
 		return [id, { buffers }];
 	},
+	storeBouncerNetwork(state, id, attrs) {
+		let bouncerNetworks = new Map(state.bouncerNetworks);
+		bouncerNetworks.set(id, {
+			...bouncerNetworks.get(id),
+			...attrs,
+		});
+		return { bouncerNetworks };
+	},
+	deleteBouncerNetwork(state, id) {
+		let bouncerNetworks = new Map(state.bouncerNetworks);
+		bouncerNetworks.delete(id);
+		return { bouncerNetworks };
+	},
 	handleMessage(state, msg, serverID, client) {
 		function updateServer(updater) {
 			return State.updateServer(state, serverID, updater);
@@ -397,19 +453,6 @@ export const State = {
 				return { members };
 			});
 			break;
-		case irc.RPL_WHOREPLY:
-		case irc.RPL_WHOSPCRPL:
-			who = client.parseWhoReply(msg);
-
-			if (who.flags !== undefined) {
-				who.away = who.flags.indexOf("G") >= 0; // H for here, G for gone
-				who.operator = who.flags.indexOf("*") >= 0;
-				delete who.flags;
-			}
-
-			who.offline = false;
-
-			return updateUser(who.nick, who);
 		case irc.RPL_ENDOFWHO:
 			target = msg.params[1];
 			if (msg.list.length == 0 && !client.isChannel(target) && target.indexOf("*") < 0) {
@@ -417,6 +460,28 @@ export const State = {
 				return updateUser(target, (user) => {
 					return { offline: true };
 				});
+			} else {
+				return updateServer((server) => {
+					let users = new irc.CaseMapMap(server.users);
+					for (let reply of msg.list) {
+						let who = client.parseWhoReply(reply);
+
+						if (who.flags !== undefined) {
+							who.away = who.flags.indexOf("G") >= 0; // H for here, G for gone
+							who.operator = who.flags.indexOf("*") >= 0;
+							let botFlag = client.isupport.bot();
+							if (botFlag) {
+								who.bot = who.flags.indexOf(botFlag) >= 0;
+							}
+							delete who.flags;
+						}
+
+						who.offline = false;
+
+						users.set(who.nick, who);
+					}
+					return { users };
+				});
 			}
 			break;
 		case "JOIN":
@@ -580,21 +645,12 @@ export const State = {
 				return { members };
 			});
 		case irc.RPL_MONONLINE:
-			targets = msg.params[1].split(",");
-
-			for (let target of targets) {
-				let prefix = irc.parsePrefix(target);
-				let update = updateUser(prefix.name, { offline: false });
-				state = { ...state, ...update };
-			}
-
-			return state;
 		case irc.RPL_MONOFFLINE:
 			targets = msg.params[1].split(",");
 
 			for (let target of targets) {
 				let prefix = irc.parsePrefix(target);
-				let update = updateUser(prefix.name, { offline: true });
+				let update = updateUser(prefix.name, { offline: msg.command == irc.RPL_MONOFFLINE });
 				state = { ...state, ...update };
 			}
 

store.js

@@ -1,3 +1,5 @@
+import { ReceiptType, Unread } from "./state.js";
+
 const PREFIX = "gamja_";
 
 class Item {
@@ -24,18 +26,18 @@ class Item {
 
 export const autoconnect = new Item("autoconnect");
 export const naggedProtocolHandler = new Item("naggedProtocolHandler");
+export const settings = new Item("settings");
 
-const rawReceipts = new Item("receipts");
-
-export const receipts = {
-	load() {
-		let v = rawReceipts.load();
-		return new Map(Object.entries(v || {}));
-	},
-	put(m) {
-		rawReceipts.put(Object.fromEntries(m));
-	},
-};
+function debounce(f, delay) {
+	let timeout = null;
+	return (...args) => {
+		clearTimeout(timeout);
+		timeout = setTimeout(() => {
+			timeout = null;
+			f(...args);
+		}, delay);
+	};
+}
 
 export class Buffer {
 	raw = new Item("buffers");
@@ -44,14 +46,22 @@ export class Buffer {
 	constructor() {
 		let obj = this.raw.load();
 		this.m = new Map(Object.entries(obj || {}));
+
+		let saveImmediately = this.save.bind(this);
+		this.save = debounce(saveImmediately, 500);
+
+		document.addEventListener("visibilitychange", () => {
+			if (document.visibilityState === "hidden") {
+				saveImmediately();
+			}
+		});
 	}
 
 	key(buf) {
+		// TODO: use case-mapping here somehow
 		return JSON.stringify({
-			name: buf.name,
+			name: buf.name.toLowerCase(),
 			server: {
-				url: buf.server.url,
-				nick: buf.server.nick,
 				bouncerNetwork: buf.server.bouncerNetwork,
 			},
 		});
@@ -72,22 +82,53 @@ export class Buffer {
 	put(buf) {
 		let key = this.key(buf);
 
-		let prev = this.m.get(key);
-		if (prev && prev.unread === buf.unread) {
-			return;
+		let updated = !this.m.has(key);
+		let prev = this.m.get(key) || {};
+
+		let unread = prev.unread || Unread.NONE;
+		if (buf.unread !== undefined && buf.unread !== prev.unread) {
+			unread = buf.unread;
+			updated = true;
+		}
+
+		let receipts = { ...prev.receipts };
+		if (buf.receipts) {
+			Object.keys(buf.receipts).forEach((k) => {
+				// Use a not-equals comparison here so that no-op receipt
+				// changes are correctly handled
+				if (!receipts[k] || receipts[k].time < buf.receipts[k].time) {
+					receipts[k] = buf.receipts[k];
+					updated = true;
+				}
+			});
+			if (receipts[ReceiptType.DELIVERED] < receipts[ReceiptType.READ]) {
+				receipts[ReceiptType.DELIVERED] = receipts[ReceiptType.READ];
+				updated = true;
+			}
+		}
+
+		let closed = prev.closed || false;
+		if (buf.closed !== undefined && buf.closed !== prev.closed) {
+			closed = buf.closed;
+			updated = true;
+		}
+
+		if (!updated) {
+			return false;
 		}
 
 		this.m.set(this.key(buf), {
 			name: buf.name,
-			unread: buf.unread,
+			unread,
+			receipts,
+			closed,
 			server: {
-				url: buf.server.url,
-				nick: buf.server.nick,
 				bouncerNetwork: buf.server.bouncerNetwork,
 			},
 		});
 
 		this.save();
+		return true;
 	}
 
 	delete(buf) {
@@ -96,19 +137,25 @@ export class Buffer {
 	}
 
 	list(server) {
+		// Some gamja versions would store the same buffer multiple times
+		let names = new Set();
 		let buffers = [];
 		for (const buf of this.m.values()) {
-			if (buf.server.url !== server.url || buf.server.nick !== server.nick || buf.server.bouncerNetwork !== server.bouncerNetwork) {
+			if (buf.server.bouncerNetwork !== server.bouncerNetwork) {
+				continue;
+			}
+			if (names.has(buf.name)) {
 				continue;
 			}
 			buffers.push(buf);
+			names.add(buf.name);
 		}
 		return buffers;
 	}
 
 	clear(server) {
 		if (server) {
-			for (const buf of this.m.values()) {
+			for (const buf of this.list(server)) {
 				this.m.delete(this.key(buf));
 			}
 		} else {

style.css

@@ -158,6 +158,9 @@ button.danger:hover {
 	color: white;
 	background-color: var(--gray);
 }
+#buffer-list li.error a {
+	color: red;
+}
 #buffer-list li.unread-message a {
 	color: #b37400;
 }
@@ -186,7 +189,7 @@ button.danger:hover {
 	grid-column: 2;
 
 	display: grid;
-	grid-template-rows: auto auto;
+	grid-template-rows: 1fr auto;
 	grid-template-columns: 1fr auto;
 }
 
@@ -202,6 +205,9 @@ button.danger:hover {
 	padding: 5px 10px;
 	grid-row: 2;
 	grid-column: 1;
+	max-height: 20vh;
+	overflow-y: auto;
+	word-break: break-word;
 }
 
 #buffer-header .actions {
@@ -346,9 +352,12 @@ form input[type="text"],
 form input[type="username"],
 form input[type="password"],
 form input[type="url"],
-form input[type="email"] {
+form input[type="email"],
+form input[type="search"] {
 	box-sizing: border-box;
 	width: 100%;
+	font-family: inherit;
+	font-size: inherit;
 }
 
 a {
@@ -530,6 +539,14 @@ details summary[role="button"] {
 	overflow: auto; /* hack to clear floating elements */
 }
 
+.dialog .protocol-handler {
+	display: flex;
+	flex-direction: row;
+}
+.dialog .protocol-handler .left {
+	flex-grow: 1;
+}
+
 kbd {
 	background-color: #f0f0f0;
 	border: 1px solid #bfbfbf;
@@ -545,6 +562,29 @@ kbd {
 	border-radius: 3px;
 }
 
+ul.switcher-list {
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+	margin-top: 10px;
+}
+ul.switcher-list li a {
+	display: inline-block;
+	width: 100%;
+	padding: 5px 10px;
+	margin: 4px 0;
+	box-sizing: border-box;
+	text-decoration: none;
+	color: inherit;
+}
+ul.switcher-list li a.selected {
+	background-color: rgba(0, 0, 0, 0.1);
+}
+ul.switcher-list .server {
+	float: right;
+	opacity: 0.8;
+}
+
 @media (prefers-color-scheme: dark) {
 	html {
 		scrollbar-color: var(--gray) transparent;
@@ -572,7 +612,8 @@ kbd {
 	form input[type="username"],
 	form input[type="password"],
 	form input[type="url"],
-	form input[type="email"] {
+	form input[type="email"],
+	form input[type="search"] {
 		color: #ffffff;
 		background: var(--sidebar-background);
 		border: 1px solid #495057;
@@ -582,7 +623,8 @@ kbd {
 	form input[type="username"]:focus,
 	form input[type="password"]:focus,
 	form input[type="url"]:focus,
-	form input[type="email"]:focus {
+	form input[type="email"]:focus,
+	form input[type="search"]:focus {
 		outline: 0;
 		border-color: #3897ff;
 	}
@@ -661,6 +703,10 @@ kbd {
 		border: 1px solid var(--outline-color);
 		box-shadow: inset 0 -1px 0 var(--outline-color);
 	}
+
+	ul.switcher-list li a.selected {
+		background-color: rgba(255, 255, 255, 0.1);
+	}
 }
 
 @media (max-width: 640px) {