From 4e5ec874caf67e47080c6800fb7418f7824fe6c3 Mon Sep 17 00:00:00 2001
From: Adam Bodnar <abodnar@evilsockmonster.com>
Date: Wed, 14 Oct 2026 21:00:25 -0500
Subject: [PATCH 1/8] Add Chat Shortcuts add-on

Shortcuts like ;gg expand into the chat input on Space/Tab, or via
the emote autocomplete menu. Pure matcher with node:test coverage.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/chat-shortcuts/index.js                 | 241 ++++++++++++++++++++
 src/chat-shortcuts/manifest.json            |  13 ++
 src/chat-shortcuts/matcher.js               |  63 +++++
 src/chat-shortcuts/matcher.test.js          |  96 ++++++++
 src/chat-shortcuts/shortcut-list-editor.vue |  90 ++++++++
 5 files changed, 503 insertions(+)
 create mode 100644 src/chat-shortcuts/index.js
 create mode 100644 src/chat-shortcuts/manifest.json
 create mode 100644 src/chat-shortcuts/matcher.js
 create mode 100644 src/chat-shortcuts/matcher.test.js
 create mode 100644 src/chat-shortcuts/shortcut-list-editor.vue

diff --git a/src/chat-shortcuts/index.js b/src/chat-shortcuts/index.js
new file mode 100644
index 0000000..a4ea413
--- /dev/null
+++ b/src/chat-shortcuts/index.js
@@ -0,0 +1,241 @@
+'use strict';
+
+import { parseShortcuts, findExact, findMatches } from './matcher.js';
+
+const KeyHandler = Symbol('ChatShortcutsKeyHandler');
+const OriginalMatches = Symbol('ChatShortcutsOriginalMatches');
+
+const DEFAULT_PREFIX = ';';
+const PREVIEW_LENGTH = 60;
+
+class ChatShortcuts extends Addon {
+	constructor(...args) {
+		super(...args);
+
+		this.inject('settings');
+		this.inject('site');
+		this.inject('site.fine');
+		this.inject('site.chat.input');
+
+		this.shortcuts = [];
+
+		this.settings.add('addon.chat-shortcuts.prefix', {
+			default: DEFAULT_PREFIX,
+			ui: {
+				path: 'Add-Ons > Chat Shortcuts >> General',
+				title: 'Prefix',
+				description: 'Typed before a shortcut name, e.g. `;gg`. Must not contain spaces.',
+				component: 'setting-text-box'
+			}
+		});
+
+		this.settings.add('addon.chat-shortcuts.list', {
+			default: [],
+			changed: () => this.loadShortcuts()
+		});
+
+		this.settings.addUI('addon.chat-shortcuts.list-editor', {
+			path: 'Add-Ons > Chat Shortcuts >> Shortcuts',
+			component: () => import(/* webpackChunkName: 'chat-shortcuts' */ './shortcut-list-editor.vue')
+		});
+	}
+
+	onEnable() {
+		this.loadShortcuts();
+
+		this.input.ChatInput.on('mount', this.install, this);
+		this.input.ChatInput.on('update', this.install, this);
+		this.input.ChatInput.ready((cls, instances) => {
+			for(const inst of instances)
+				this.install(inst);
+		});
+	}
+
+	onDisable() {
+		this.input.ChatInput.off('mount', this.install, this);
+		this.input.ChatInput.off('update', this.install, this);
+
+		for(const inst of this.input.ChatInput.instances)
+			this.uninstall(inst);
+	}
+
+	loadShortcuts() {
+		this.shortcuts = parseShortcuts(this.settings.get('addon.chat-shortcuts.list'));
+	}
+
+	get prefix() {
+		const value = this.settings.get('addon.chat-shortcuts.prefix');
+		return typeof value === 'string' && value.trim() && ! /\s/.test(value.trim())
+			? value.trim()
+			: DEFAULT_PREFIX;
+	}
+
+	getElement(inst) {
+		if ( inst.chatInputRef instanceof Element )
+			return inst.chatInputRef;
+
+		return this.fine.getChildNode(inst)?.querySelector('.chat-wysiwyg-input__editor');
+	}
+
+	// Installation
+
+	install(inst) {
+		try {
+			this.installKeyHandler(inst);
+			this.installProvider(inst);
+		} catch(err) {
+			this.log.error('Unable to install chat shortcuts.', err);
+		}
+	}
+
+	uninstall(inst) {
+		try {
+			const handler = inst[KeyHandler];
+			if ( handler ) {
+				handler.el.removeEventListener('keydown', handler);
+				inst[KeyHandler] = null;
+			}
+
+			const provider = this.getEmoteProvider(inst);
+			if ( provider?.[OriginalMatches] ) {
+				provider.getMatches = provider[OriginalMatches];
+				provider[OriginalMatches] = null;
+			}
+		} catch(err) {
+			this.log.error('Unable to uninstall chat shortcuts.', err);
+		}
+	}
+
+	installKeyHandler(inst) {
+		const el = this.getElement(inst);
+		if ( ! el )
+			return;
+
+		// Twitch can swap the editor element on update; move the listener if so.
+		const existing = inst[KeyHandler];
+		if ( existing?.el === el )
+			return;
+		if ( existing )
+			existing.el.removeEventListener('keydown', existing);
+
+		const handler = event => this.handleKey(inst, event);
+		handler.el = el;
+		inst[KeyHandler] = handler;
+		el.addEventListener('keydown', handler);
+	}
+
+	getEmoteProvider(inst) {
+		const providers = inst.autocompleteInputRef?.providers;
+		if ( ! providers )
+			return null;
+
+		for(const provider of providers)
+			if ( provider?.autocompleteType === 'emote' && typeof provider.getMatches === 'function' )
+				return provider;
+
+		return null;
+	}
+
+	installProvider(inst) {
+		const provider = this.getEmoteProvider(inst);
+		if ( ! provider || provider[OriginalMatches] )
+			return;
+
+		const original = provider[OriginalMatches] = provider.getMatches;
+		const t = this;
+
+		provider.getMatches = function(input, ...rest) {
+			try {
+				const items = t.getSuggestions(input);
+				if ( items )
+					return items;
+			} catch(err) {
+				t.log.error('Error building shortcut suggestions.', err);
+			}
+
+			return original.call(this, input, ...rest);
+		}
+	}
+
+	// Inline expansion
+
+	handleKey(inst, event) {
+		try {
+			const is_space = event.key === ' ',
+				is_tab = event.key === 'Tab';
+
+			if ( ! (is_space || is_tab) || event.ctrlKey || event.altKey || event.metaKey || (is_tab && event.shiftKey) )
+				return;
+
+			const value = inst.ffzGetValue?.();
+			const [start, end] = inst.ffzGetSelection?.() ?? [];
+			if ( typeof value !== 'string' || start !== end || start == null )
+				return;
+
+			const before = value.slice(0, start),
+				after = value.slice(start),
+				word = /\S+$/.exec(before);
+
+			if ( ! word )
+				return;
+
+			const prefix = this.prefix;
+			if ( ! word[0].startsWith(prefix) )
+				return;
+
+			const text = findExact(this.shortcuts, word[0].slice(prefix.length));
+			if ( text == null )
+				return;
+
+			const pad = is_space && ! /^\s/.test(after) ? ' ' : '',
+				head = before.slice(0, word.index) + text + pad;
+
+			event.preventDefault();
+			event.stopPropagation();
+
+			inst.autocompleteInputRef.setValue(head + after);
+			inst.ffzSetSelection?.(head.length, head.length);
+
+		} catch(err) {
+			this.log.error('Error expanding shortcut.', err);
+		}
+	}
+
+	// Autocomplete menu
+
+	getSuggestions(input) {
+		const prefix = this.prefix;
+		if ( typeof input !== 'string' || ! input.startsWith(prefix) || input.length <= prefix.length )
+			return null;
+
+		const matches = findMatches(this.shortcuts, input.slice(prefix.length));
+		if ( ! matches.length )
+			return null;
+
+		return matches.map(match => ({
+			current: input,
+			replacement: match.text,
+			element: this.renderSuggestion(prefix + match.name, match.text)
+		}));
+	}
+
+	renderSuggestion(token, text) {
+		const createElement = this.site.getReact()?.createElement;
+		if ( ! createElement )
+			return token;
+
+		const preview = text.length > PREVIEW_LENGTH
+			? `${text.slice(0, PREVIEW_LENGTH - 1)}…`
+			: text;
+
+		const name = createElement('span', { className: 'tw-semibold tw-flex-shrink-0 tw-mg-r-1' }, token),
+			body = createElement('span', { className: 'tw-c-text-alt-2 tw-ellipsis' }, preview);
+
+		return createElement('div', {
+			className: 'tw-ellipsis tw-flex tw-align-items-center tw-pd-05',
+			title: text
+		}, name, body);
+	}
+}
+
+ChatShortcuts.register();
diff --git a/src/chat-shortcuts/manifest.json b/src/chat-shortcuts/manifest.json
new file mode 100644
index 0000000..9877451
--- /dev/null
+++ b/src/chat-shortcuts/manifest.json
@@ -0,0 +1,13 @@
+{
+	"enabled": false,
+	"requires": [],
+
+	"version": "0.1.0",
+
+	"short_name": "Shortcuts",
+	"name": "Chat Shortcuts",
+	"author": "abodnar",
+	"description": "Define shortcuts like ;gg that expand into text in the chat input. Expand inline with Space or Tab, or pick from the autocomplete menu. Nothing is ever sent automatically.",
+
+	"settings": "add_ons.chat_shortcuts"
+}
diff --git a/src/chat-shortcuts/matcher.js b/src/chat-shortcuts/matcher.js
new file mode 100644
index 0000000..6e50994
--- /dev/null
+++ b/src/chat-shortcuts/matcher.js
@@ -0,0 +1,63 @@
+// Pure shortcut matching. No FFZ / DOM dependencies so it can be unit tested with node.
+
+export const DEFAULT_LIMIT = 25;
+
+export function parseShortcuts(list) {
+	if ( ! Array.isArray(list) )
+		return [];
+
+	const seen = new Set,
+		out = [];
+
+	for(const entry of list) {
+		const name = typeof entry?.name === 'string' ? entry.name.trim() : '',
+			text = typeof entry?.text === 'string' ? entry.text : '';
+
+		if ( ! name || ! text || /\s/.test(name) || seen.has(name) )
+			continue;
+
+		seen.add(name);
+		out.push({ name, text });
+	}
+
+	return out;
+}
+
+export function findExact(shortcuts, name) {
+	if ( ! name )
+		return null;
+
+	const exact = shortcuts.find(s => s.name === name);
+	if ( exact )
+		return exact.text;
+
+	const lower = name.toLowerCase(),
+		loose = shortcuts.find(s => s.name.toLowerCase() === lower);
+
+	return loose ? loose.text : null;
+}
+
+export function findMatches(shortcuts, partial, limit = DEFAULT_LIMIT) {
+	if ( ! partial )
+		return [];
+
+	const term = partial.toLowerCase(),
+		groups = [[], [], []];
+
+	for(const s of shortcuts) {
+		const name = s.name.toLowerCase();
+		if ( name === term )
+			groups[0].push(s);
+		else if ( name.startsWith(term) )
+			groups[1].push(s);
+		else if ( name.includes(term) )
+			groups[2].push(s);
+	}
+
+	const byName = (a, b) => a.name.localeCompare(b.name);
+
+	return groups
+		.flatMap(group => group.sort(byName))
+		.slice(0, limit)
+		.map(({ name, text }) => ({ name, text }));
+}
diff --git a/src/chat-shortcuts/matcher.test.js b/src/chat-shortcuts/matcher.test.js
new file mode 100644
index 0000000..a709314
--- /dev/null
+++ b/src/chat-shortcuts/matcher.test.js
@@ -0,0 +1,96 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+
+import { parseShortcuts, findExact, findMatches } from './matcher.js';
+
+const LIST = parseShortcuts([
+	{ name: 'gg', text: 'good game everyone' },
+	{ name: 'GL', text: 'good luck' },
+	{ name: 'ggwp', text: 'good game, well played' },
+	{ name: 'egg', text: 'EGG EGG EGG' },
+	{ name: 'hype', text: 'PogChamp PogChamp' },
+]);
+
+test('parseShortcuts trims names and drops entries with empty name or text', () => {
+	const out = parseShortcuts([
+		{ name: '  hi  ', text: 'hello' },
+		{ name: '', text: 'orphan' },
+		{ name: 'blank', text: '' },
+		{ name: '   ', text: 'spaces' },
+	]);
+	assert.deepEqual(out, [{ name: 'hi', text: 'hello' }]);
+});
+
+test('parseShortcuts keeps the first occurrence of a duplicate name', () => {
+	const out = parseShortcuts([
+		{ name: 'a', text: 'first' },
+		{ name: 'a', text: 'second' },
+	]);
+	assert.deepEqual(out, [{ name: 'a', text: 'first' }]);
+});
+
+test('parseShortcuts tolerates non-array input', () => {
+	assert.deepEqual(parseShortcuts(undefined), []);
+	assert.deepEqual(parseShortcuts(null), []);
+	assert.deepEqual(parseShortcuts('nope'), []);
+});
+
+test('parseShortcuts rejects names containing whitespace', () => {
+	assert.deepEqual(parseShortcuts([{ name: 'two words', text: 'x' }]), []);
+});
+
+test('findExact returns text for an exact name', () => {
+	assert.equal(findExact(LIST, 'gg'), 'good game everyone');
+});
+
+test('findExact falls back to case-insensitive match', () => {
+	assert.equal(findExact(LIST, 'gl'), 'good luck');
+	assert.equal(findExact(LIST, 'GG'), 'good game everyone');
+});
+
+test('findExact prefers a case-sensitive match over a case-insensitive one', () => {
+	const list = parseShortcuts([
+		{ name: 'Hi', text: 'upper' },
+		{ name: 'hi', text: 'lower' },
+	]);
+	assert.equal(findExact(list, 'hi'), 'lower');
+	assert.equal(findExact(list, 'Hi'), 'upper');
+});
+
+test('findExact returns null for unknown or partial names', () => {
+	assert.equal(findExact(LIST, 'g'), null);
+	assert.equal(findExact(LIST, ')'), null);
+	assert.equal(findExact(LIST, ''), null);
+});
+
+test('findMatches ranks exact, then prefix, then substring', () => {
+	const names = findMatches(LIST, 'gg').map(m => m.name);
+	assert.deepEqual(names, ['gg', 'ggwp', 'egg']);
+});
+
+test('findMatches is case-insensitive', () => {
+	assert.deepEqual(findMatches(LIST, 'HY').map(m => m.name), ['hype']);
+});
+
+test('findMatches sorts alphabetically within a group', () => {
+	const list = parseShortcuts([
+		{ name: 'gz', text: '1' },
+		{ name: 'ga', text: '2' },
+		{ name: 'gm', text: '3' },
+	]);
+	assert.deepEqual(findMatches(list, 'g').map(m => m.name), ['ga', 'gm', 'gz']);
+});
+
+test('findMatches returns name and text', () => {
+	assert.deepEqual(findMatches(LIST, 'hype'), [{ name: 'hype', text: 'PogChamp PogChamp' }]);
+});
+
+test('findMatches respects the limit', () => {
+	const list = parseShortcuts(Array.from({ length: 40 }, (_, i) => ({ name: `s${i}`, text: 'x' })));
+	assert.equal(findMatches(list, 's').length, 25);
+	assert.equal(findMatches(list, 's', 3).length, 3);
+});
+
+test('findMatches returns nothing for an empty partial', () => {
+	assert.deepEqual(findMatches(LIST, ''), []);
+});
diff --git a/src/chat-shortcuts/shortcut-list-editor.vue b/src/chat-shortcuts/shortcut-list-editor.vue
new file mode 100644
index 0000000..7fe90c1
--- /dev/null
+++ b/src/chat-shortcuts/shortcut-list-editor.vue
@@ -0,0 +1,90 @@
+<!--
+	Shortcut List Editor
+
+	FFZ has no built-in editor for name → text pairs, so this renders a simple row editor.
+	Shortcuts are global: stored directly on the settings provider, not per-profile.
+-->
+<template>
+	<section class="ffz--widget tw-border-t tw-pd-y-1">
+		<div class="tw-c-text-alt-2 tw-font-size-6 tw-pd-b-1">
+			{{ t('addon.chat-shortcuts.editor.hint', 'Type the prefix plus a name (e.g. ;gg) then Space or Tab to expand. Names cannot contain spaces.') }}
+		</div>
+
+		<div
+			v-for="(row, idx) in rows"
+			:key="row.key"
+			class="tw-flex tw-align-items-center tw-mg-b-05"
+		>
+			<input
+				v-model="row.name"
+				type="text"
+				class="tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 tw-mg-r-05 ffz-input"
+				style="width: 12rem"
+				:placeholder="t('addon.chat-shortcuts.editor.name', 'name')"
+				@change="save"
+			>
+			<input
+				v-model="row.text"
+				type="text"
+				class="tw-flex-grow-1 tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 tw-mg-r-05 ffz-input"
+				:placeholder="t('addon.chat-shortcuts.editor.text', 'text to insert')"
+				@change="save"
+			>
+			<button
+				class="tw-button tw-button--text ffz-il-tooltip__container"
+				@click="remove(idx)"
+			>
+				<span class="tw-button__text ffz-i-trash" />
+				<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
+					{{ t('addon.chat-shortcuts.editor.remove', 'Remove') }}
+				</div>
+			</button>
+		</div>
+
+		<button class="tw-button tw-mg-t-05" @click="add">
+			<span class="tw-button__text ffz-i-plus">
+				{{ t('addon.chat-shortcuts.editor.add', 'Add Shortcut') }}
+			</span>
+		</button>
+	</section>
+</template>
+
+<script>
+const KEY = 'addon.chat-shortcuts.list';
+
+let next_key = 0;
+
+export default {
+	props: ['item', 'context'],
+
+	data() {
+		const stored = this.context.provider.get(KEY);
+		return {
+			rows: (Array.isArray(stored) ? stored : []).map(s => ({
+				key: next_key++,
+				name: s?.name ?? '',
+				text: s?.text ?? ''
+			}))
+		};
+	},
+
+	methods: {
+		add() {
+			this.rows.push({ key: next_key++, name: '', text: '' });
+		},
+
+		remove(idx) {
+			this.rows.splice(idx, 1);
+			this.save();
+		},
+
+		save() {
+			const value = this.rows
+				.filter(r => r.name.trim() || r.text)
+				.map(r => ({ name: r.name.trim(), text: r.text }));
+
+			this.context.provider.set(KEY, value);
+		}
+	}
+};
+</script>

From 9ac7d8f121906272cd1da43fba7a16fcc3dc965a Mon Sep 17 00:00:00 2001
From: Adam Bodnar <abodnar@evilsockmonster.com>
Date: Wed, 14 Oct 2026 21:33:14 -0500
Subject: [PATCH 2/8] Chat Shortcuts: read shortcut list from the settings
 provider

The editor writes the list directly to the provider, but the add-on read it
via settings.get(), which only sees profile-prefixed keys, so the list was
always empty and nothing expanded.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/chat-shortcuts/index.js | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/chat-shortcuts/index.js b/src/chat-shortcuts/index.js
index a4ea413..dae687c 100644
--- a/src/chat-shortcuts/index.js
+++ b/src/chat-shortcuts/index.js
@@ -17,7 +17,8 @@ class ChatShortcuts extends Addon {
 		this.inject('site.fine');
 		this.inject('site.chat.input');
 
-		this.shortcuts = [];
+		this._raw_list = undefined;
+		this._shortcuts = [];
 
 		this.settings.add('addon.chat-shortcuts.prefix', {
 			default: DEFAULT_PREFIX,
@@ -29,9 +30,10 @@ class ChatShortcuts extends Addon {
 			}
 		});
 
+		// Written by shortcut-list-editor.vue directly on the provider (global, not
+		// per-profile), so it must be read with provider.get(), not settings.get().
 		this.settings.add('addon.chat-shortcuts.list', {
-			default: [],
-			changed: () => this.loadShortcuts()
+			default: []
 		});
 
 		this.settings.addUI('addon.chat-shortcuts.list-editor', {
@@ -41,8 +43,6 @@ class ChatShortcuts extends Addon {
 	}
 
 	onEnable() {
-		this.loadShortcuts();
-
 		this.input.ChatInput.on('mount', this.install, this);
 		this.input.ChatInput.on('update', this.install, this);
 		this.input.ChatInput.ready((cls, instances) => {
@@ -59,8 +59,16 @@ class ChatShortcuts extends Addon {
 			this.uninstall(inst);
 	}
 
-	loadShortcuts() {
-		this.shortcuts = parseShortcuts(this.settings.get('addon.chat-shortcuts.list'));
+	// The provider only emits 'changed' for other tabs, so read on demand and
+	// re-parse only when the stored array changes.
+	get shortcuts() {
+		const raw = this.settings.provider.get('addon.chat-shortcuts.list');
+		if ( raw !== this._raw_list ) {
+			this._raw_list = raw;
+			this._shortcuts = parseShortcuts(raw);
+		}
+
+		return this._shortcuts;
 	}
 
 	get prefix() {

From f3aa26a312befcf749af70cf140fd0dcce9e531d Mon Sep 17 00:00:00 2001
From: Adam Bodnar <abodnar@evilsockmonster.com>
Date: Wed, 14 Oct 2026 21:38:39 -0500
Subject: [PATCH 3/8] Chat Shortcuts: render emotes in autocomplete previews

Previews resolve emote names against the Twitch and FFZ/BTTV/7TV
tab-completion caches FFZ keeps on the emote provider and render them
as inline images. Pure buildPreview() with node:test coverage.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/chat-shortcuts/index.js        | 75 ++++++++++++++++++++++++++----
 src/chat-shortcuts/preview.js      | 46 ++++++++++++++++++
 src/chat-shortcuts/preview.test.js | 59 +++++++++++++++++++++++
 3 files changed, 171 insertions(+), 9 deletions(-)
 create mode 100644 src/chat-shortcuts/preview.js
 create mode 100644 src/chat-shortcuts/preview.test.js

diff --git a/src/chat-shortcuts/index.js b/src/chat-shortcuts/index.js
index dae687c..38c2ff8 100644
--- a/src/chat-shortcuts/index.js
+++ b/src/chat-shortcuts/index.js
@@ -1,12 +1,13 @@
 'use strict';
 
 import { parseShortcuts, findExact, findMatches } from './matcher.js';
+import { buildPreview } from './preview.js';
 
 const KeyHandler = Symbol('ChatShortcutsKeyHandler');
 const OriginalMatches = Symbol('ChatShortcutsOriginalMatches');
+const FFZCacheKey = Symbol('ChatShortcutsFFZCacheKey');
 
 const DEFAULT_PREFIX = ';';
-const PREVIEW_LENGTH = 60;
 
 class ChatShortcuts extends Addon {
 	constructor(...args) {
@@ -154,7 +155,7 @@ class ChatShortcuts extends Addon {
 
 		provider.getMatches = function(input, ...rest) {
 			try {
-				const items = t.getSuggestions(input);
+				const items = t.getSuggestions(input, this);
 				if ( items )
 					return items;
 			} catch(err) {
@@ -211,7 +212,7 @@ class ChatShortcuts extends Addon {
 
 	// Autocomplete menu
 
-	getSuggestions(input) {
+	getSuggestions(input, provider) {
 		const prefix = this.prefix;
 		if ( typeof input !== 'string' || ! input.startsWith(prefix) || input.length <= prefix.length )
 			return null;
@@ -220,24 +221,80 @@ class ChatShortcuts extends Addon {
 		if ( ! matches.length )
 			return null;
 
+		let lookup = null;
+		try {
+			lookup = this.getEmoteLookup(provider);
+		} catch(err) {
+			this.log.error('Unable to build emote lookup for previews.', err);
+		}
+
 		return matches.map(match => ({
 			current: input,
 			replacement: match.text,
-			element: this.renderSuggestion(prefix + match.name, match.text)
+			element: this.renderSuggestion(prefix + match.name, match.text, lookup)
 		}));
 	}
 
-	renderSuggestion(token, text) {
+	// Map of emote name -> srcSet from the tab-completion caches FFZ keeps on the
+	// emote provider, building them with FFZ's own functions if FFZ hasn't yet.
+	// FFZ nulls its caches when emotes change; we additionally track the channel
+	// ourselves since FFZ's cache objects don't record it. Twitch emotes win name
+	// clashes, as in chat.
+	getEmoteLookup(provider) {
+		if ( ! provider )
+			return null;
+
+		const input = this.input;
+
+		let twitch = provider.ffz_twitch_cache;
+		if ( twitch?.length !== provider.props?.emotes?.length )
+			twitch = provider.ffz_twitch_cache = input.buildTwitchCache(provider.props?.emotes);
+
+		const user = provider._ffz_user,
+			channel_id = provider._ffz_channel_id,
+			channel_login = provider._ffz_channel_login;
+
+		const ffz_key = `${user?.id}|${user?.login}|${channel_id}|${channel_login}`;
+
+		let ffz = provider.ffz_ffz_cache;
+		if ( channel_login && (! ffz || provider[FFZCacheKey] !== ffz_key) ) {
+			ffz = provider.ffz_ffz_cache = input.buildFFZCache(user?.id, user?.login, channel_id, channel_login);
+			provider[FFZCacheKey] = ffz_key;
+		}
+
+		if ( this._lookup && this._lookup_twitch === twitch && this._lookup_ffz === ffz )
+			return this._lookup;
+
+		const lookup = new Map;
+		for(const cache of [twitch, ffz])
+			for(const emote of cache?.emotes ?? [])
+				if ( emote?.token && emote.srcSet && ! lookup.has(emote.token) )
+					lookup.set(emote.token, emote.srcSet);
+
+		this._lookup = lookup;
+		this._lookup_twitch = twitch;
+		this._lookup_ffz = ffz;
+		return lookup;
+	}
+
+	renderSuggestion(token, text, lookup) {
 		const createElement = this.site.getReact()?.createElement;
 		if ( ! createElement )
 			return token;
 
-		const preview = text.length > PREVIEW_LENGTH
-			? `${text.slice(0, PREVIEW_LENGTH - 1)}…`
-			: text;
+		const segments = buildPreview(text, lookup).map((seg, idx) => seg.emote
+			? createElement('img', {
+				key: idx,
+				srcSet: seg.srcSet,
+				alt: seg.emote,
+				title: seg.emote,
+				style: { height: '2rem', verticalAlign: 'middle' }
+			})
+			: createElement('span', { key: idx }, seg.text)
+		);
 
 		const name = createElement('span', { className: 'tw-semibold tw-flex-shrink-0 tw-mg-r-1' }, token),
-			body = createElement('span', { className: 'tw-c-text-alt-2 tw-ellipsis' }, preview);
+			body = createElement('span', { className: 'tw-c-text-alt-2 tw-ellipsis' }, ...segments);
 
 		return createElement('div', {
 			className: 'tw-ellipsis tw-flex tw-align-items-center tw-pd-05',
diff --git a/src/chat-shortcuts/preview.js b/src/chat-shortcuts/preview.js
new file mode 100644
index 0000000..f39d714
--- /dev/null
+++ b/src/chat-shortcuts/preview.js
@@ -0,0 +1,46 @@
+// Pure preview builder. No FFZ / DOM dependencies so it can be unit tested with node.
+
+export const DEFAULT_PREVIEW_LENGTH = 60;
+
+const ELLIPSIS = '…';
+
+function truncate(text, max) {
+	if ( text.length <= max )
+		return [text, false];
+
+	const cut = text.slice(0, max - 1),
+		boundary = cut.search(/\s\S*$/);
+
+	return [(boundary > 0 ? cut.slice(0, boundary) : cut).trimEnd(), true];
+}
+
+// Split text into [{text}] and [{emote, srcSet}] segments. `lookup` is a Map of
+// emote name -> srcSet; names only match whole whitespace-separated words.
+export function buildPreview(text, lookup, maxLength = DEFAULT_PREVIEW_LENGTH) {
+	const [body, truncated] = truncate(text, maxLength),
+		out = [];
+
+	const pushText = value => {
+		const last = out[out.length - 1];
+		if ( last && last.text != null )
+			last.text += value;
+		else
+			out.push({ text: value });
+	};
+
+	for(const part of body.split(/(\s+)/)) {
+		if ( ! part )
+			continue;
+
+		const srcSet = lookup?.get(part);
+		if ( srcSet )
+			out.push({ emote: part, srcSet });
+		else
+			pushText(part);
+	}
+
+	if ( truncated )
+		pushText(ELLIPSIS);
+
+	return out;
+}
diff --git a/src/chat-shortcuts/preview.test.js b/src/chat-shortcuts/preview.test.js
new file mode 100644
index 0000000..6511649
--- /dev/null
+++ b/src/chat-shortcuts/preview.test.js
@@ -0,0 +1,59 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+
+import { buildPreview } from './preview.js';
+
+const LOOKUP = new Map([
+	['PogChamp', 'pog.png 1x'],
+	['KEKW', 'kekw.png 1x'],
+]);
+
+test('buildPreview returns plain text as a single segment', () => {
+	assert.deepEqual(buildPreview('good game', LOOKUP), [{ text: 'good game' }]);
+});
+
+test('buildPreview turns emote names into emote segments', () => {
+	assert.deepEqual(buildPreview('PogChamp hype KEKW', LOOKUP), [
+		{ emote: 'PogChamp', srcSet: 'pog.png 1x' },
+		{ text: ' hype ' },
+		{ emote: 'KEKW', srcSet: 'kekw.png 1x' },
+	]);
+});
+
+test('buildPreview matches emote names case-sensitively', () => {
+	assert.deepEqual(buildPreview('kekw', LOOKUP), [{ text: 'kekw' }]);
+});
+
+test('buildPreview does not match emote names inside other words', () => {
+	assert.deepEqual(buildPreview('PogChamps', LOOKUP), [{ text: 'PogChamps' }]);
+});
+
+test('buildPreview preserves runs of whitespace', () => {
+	assert.deepEqual(buildPreview('KEKW  KEKW', LOOKUP), [
+		{ emote: 'KEKW', srcSet: 'kekw.png 1x' },
+		{ text: '  ' },
+		{ emote: 'KEKW', srcSet: 'kekw.png 1x' },
+	]);
+});
+
+test('buildPreview truncates long text at a word boundary with an ellipsis', () => {
+	const out = buildPreview('alpha beta gamma delta', LOOKUP, 13);
+	assert.deepEqual(out, [{ text: 'alpha beta…' }]);
+});
+
+test('buildPreview never splits an emote when truncating', () => {
+	const out = buildPreview('hi PogChamp PogChamp', LOOKUP, 15);
+	assert.deepEqual(out, [
+		{ text: 'hi ' },
+		{ emote: 'PogChamp', srcSet: 'pog.png 1x' },
+		{ text: '…' },
+	]);
+});
+
+test('buildPreview hard-cuts a single word longer than the limit', () => {
+	assert.deepEqual(buildPreview('abcdefghij', LOOKUP, 5), [{ text: 'abcd…' }]);
+});
+
+test('buildPreview works without a lookup', () => {
+	assert.deepEqual(buildPreview('PogChamp', null), [{ text: 'PogChamp' }]);
+});

From 8a7022f5eb8297acbc6e131fadefdecbd5786c10 Mon Sep 17 00:00:00 2001
From: Adam Bodnar <abodnar@evilsockmonster.com>
Date: Wed, 14 Oct 2026 21:48:12 -0500
Subject: [PATCH 4/8] Chat Shortcuts: editor validation and previews, Backspace
 undo

- validateShortcuts() flags rows parseShortcuts() would skip, plus names
  that include the prefix; shown inline in the editor.
- Editor rows show the emote-rendered preview using the open chat's emotes.
- Expansion logic moved to pure expandAt(); Backspace immediately after an
  expansion restores the original text.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/chat-shortcuts/index.js                 | 78 ++++++++++++-----
 src/chat-shortcuts/matcher.js               | 61 +++++++++++++
 src/chat-shortcuts/matcher.test.js          | 86 ++++++++++++++++++-
 src/chat-shortcuts/shortcut-list-editor.vue | 95 +++++++++++++++------
 4 files changed, 271 insertions(+), 49 deletions(-)

diff --git a/src/chat-shortcuts/index.js b/src/chat-shortcuts/index.js
index 38c2ff8..ab94436 100644
--- a/src/chat-shortcuts/index.js
+++ b/src/chat-shortcuts/index.js
@@ -1,11 +1,14 @@
 'use strict';
 
-import { parseShortcuts, findExact, findMatches } from './matcher.js';
+import { parseShortcuts, findMatches, expandAt } from './matcher.js';
 import { buildPreview } from './preview.js';
 
 const KeyHandler = Symbol('ChatShortcutsKeyHandler');
 const OriginalMatches = Symbol('ChatShortcutsOriginalMatches');
 const FFZCacheKey = Symbol('ChatShortcutsFFZCacheKey');
+const LastExpansion = Symbol('ChatShortcutsLastExpansion');
+
+const MODIFIER_KEYS = new Set(['Shift', 'Control', 'Alt', 'Meta', 'CapsLock']);
 
 const DEFAULT_PREFIX = ';';
 
@@ -105,6 +108,8 @@ class ChatShortcuts extends Addon {
 				inst[KeyHandler] = null;
 			}
 
+			inst[LastExpansion] = null;
+
 			const provider = this.getEmoteProvider(inst);
 			if ( provider?.[OriginalMatches] ) {
 				provider.getMatches = provider[OriginalMatches];
@@ -170,10 +175,22 @@ class ChatShortcuts extends Addon {
 
 	handleKey(inst, event) {
 		try {
+			if ( MODIFIER_KEYS.has(event.key) )
+				return;
+
+			// Any key other than an immediate Backspace forgets the last expansion.
+			const last = inst[LastExpansion];
+			inst[LastExpansion] = null;
+
+			const plain = ! event.ctrlKey && ! event.altKey && ! event.metaKey;
+			if ( ! plain )
+				return;
+
 			const is_space = event.key === ' ',
-				is_tab = event.key === 'Tab';
+				is_tab = event.key === 'Tab' && ! event.shiftKey,
+				is_backspace = event.key === 'Backspace';
 
-			if ( ! (is_space || is_tab) || event.ctrlKey || event.altKey || event.metaKey || (is_tab && event.shiftKey) )
+			if ( ! (is_space || is_tab || is_backspace) )
 				return;
 
 			const value = inst.ffzGetValue?.();
@@ -181,35 +198,34 @@ class ChatShortcuts extends Addon {
 			if ( typeof value !== 'string' || start !== end || start == null )
 				return;
 
-			const before = value.slice(0, start),
-				after = value.slice(start),
-				word = /\S+$/.exec(before);
-
-			if ( ! word )
-				return;
-
-			const prefix = this.prefix;
-			if ( ! word[0].startsWith(prefix) )
+			if ( is_backspace ) {
+				// Undo: only if the input is still exactly what we produced.
+				if ( last && value === last.to ) {
+					this.applyValue(inst, event, last.from, last.from_caret);
+				}
 				return;
+			}
 
-			const text = findExact(this.shortcuts, word[0].slice(prefix.length));
-			if ( text == null )
+			const result = expandAt(value, start, this.prefix, this.shortcuts, is_space);
+			if ( ! result )
 				return;
 
-			const pad = is_space && ! /^\s/.test(after) ? ' ' : '',
-				head = before.slice(0, word.index) + text + pad;
-
-			event.preventDefault();
-			event.stopPropagation();
-
-			inst.autocompleteInputRef.setValue(head + after);
-			inst.ffzSetSelection?.(head.length, head.length);
+			this.applyValue(inst, event, result.value, result.caret);
+			inst[LastExpansion] = { from: value, from_caret: start, to: result.value };
 
 		} catch(err) {
-			this.log.error('Error expanding shortcut.', err);
+			this.log.error('Error handling shortcut key.', err);
 		}
 	}
 
+	applyValue(inst, event, value, caret) {
+		event.preventDefault();
+		event.stopPropagation();
+
+		inst.autocompleteInputRef.setValue(value);
+		inst.ffzSetSelection?.(caret, caret);
+	}
+
 	// Autocomplete menu
 
 	getSuggestions(input, provider) {
@@ -235,6 +251,22 @@ class ChatShortcuts extends Addon {
 		}));
 	}
 
+	// Emote lookup for the settings editor's previews, from whichever chat input
+	// is currently mounted. Null when no chat is open.
+	getPreviewLookup() {
+		try {
+			for(const inst of this.input.ChatInput.instances) {
+				const provider = this.getEmoteProvider(inst);
+				if ( provider )
+					return this.getEmoteLookup(provider);
+			}
+		} catch(err) {
+			this.log.error('Unable to build emote lookup for the editor.', err);
+		}
+
+		return null;
+	}
+
 	// Map of emote name -> srcSet from the tab-completion caches FFZ keeps on the
 	// emote provider, building them with FFZ's own functions if FFZ hasn't yet.
 	// FFZ nulls its caches when emotes change; we additionally track the channel
diff --git a/src/chat-shortcuts/matcher.js b/src/chat-shortcuts/matcher.js
index 6e50994..29fa5c6 100644
--- a/src/chat-shortcuts/matcher.js
+++ b/src/chat-shortcuts/matcher.js
@@ -61,3 +61,64 @@ export function findMatches(shortcuts, partial, limit = DEFAULT_LIMIT) {
 		.slice(0, limit)
 		.map(({ name, text }) => ({ name, text }));
 }
+
+// Per-row problems for the settings editor: null for a valid (or fully blank) row,
+// otherwise a short message. Mirrors what parseShortcuts() will skip.
+export function validateShortcuts(list, prefix) {
+	if ( ! Array.isArray(list) )
+		return [];
+
+	const seen = new Set;
+
+	return list.map(entry => {
+		const name = typeof entry?.name === 'string' ? entry.name.trim() : '',
+			text = typeof entry?.text === 'string' ? entry.text : '';
+
+		if ( ! name && ! text )
+			return null;
+		if ( ! name )
+			return 'Missing name.';
+		if ( ! text )
+			return 'Missing text.';
+		if ( /\s/.test(name) )
+			return 'Names can\'t contain spaces.';
+		if ( seen.has(name) )
+			return 'Duplicate name — the earlier one is used.';
+
+		seen.add(name);
+
+		if ( prefix && name.startsWith(prefix) )
+			return `Don't include the prefix "${prefix}" in the name — this would need ${prefix}${name}.`;
+
+		return null;
+	});
+}
+
+// Expand the shortcut word ending at `caret`. Returns {value, caret} or null.
+// With addSpace, a space follows the expansion unless one is already there, in
+// which case the caret moves past it.
+export function expandAt(value, caret, prefix, shortcuts, addSpace) {
+	if ( typeof value !== 'string' || ! prefix )
+		return null;
+
+	const before = value.slice(0, caret),
+		after = value.slice(caret),
+		word = /\S+$/.exec(before);
+
+	if ( ! word || ! word[0].startsWith(prefix) )
+		return null;
+
+	const text = findExact(shortcuts, word[0].slice(prefix.length));
+	if ( text == null )
+		return null;
+
+	const head = before.slice(0, word.index) + text;
+
+	if ( ! addSpace )
+		return { value: head + after, caret: head.length };
+
+	if ( /^\s/.test(after) )
+		return { value: head + after, caret: head.length + 1 };
+
+	return { value: `${head} ${after}`, caret: head.length + 1 };
+}
diff --git a/src/chat-shortcuts/matcher.test.js b/src/chat-shortcuts/matcher.test.js
index a709314..51d6921 100644
--- a/src/chat-shortcuts/matcher.test.js
+++ b/src/chat-shortcuts/matcher.test.js
@@ -1,7 +1,7 @@
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
 
-import { parseShortcuts, findExact, findMatches } from './matcher.js';
+import { parseShortcuts, findExact, findMatches, validateShortcuts, expandAt } from './matcher.js';
 
 const LIST = parseShortcuts([
 	{ name: 'gg', text: 'good game everyone' },
@@ -94,3 +94,87 @@ test('findMatches respects the limit', () => {
 test('findMatches returns nothing for an empty partial', () => {
 	assert.deepEqual(findMatches(LIST, ''), []);
 });
+
+// validateShortcuts
+
+test('validateShortcuts returns null for valid rows and fully blank rows', () => {
+	assert.deepEqual(validateShortcuts([
+		{ name: 'gg', text: 'good game' },
+		{ name: '', text: '' },
+	], ';'), [null, null]);
+});
+
+test('validateShortcuts flags missing name or text', () => {
+	const out = validateShortcuts([
+		{ name: '', text: 'orphan' },
+		{ name: 'lonely', text: '' },
+	], ';');
+	assert.match(out[0], /name/i);
+	assert.match(out[1], /text/i);
+});
+
+test('validateShortcuts flags names containing spaces', () => {
+	assert.match(validateShortcuts([{ name: 'good game', text: 'x' }], ';')[0], /space/i);
+});
+
+test('validateShortcuts flags names that start with the prefix', () => {
+	const [msg] = validateShortcuts([{ name: ';gg', text: 'x' }], ';');
+	assert.match(msg, /prefix/i);
+	assert.ok(msg.includes(';'));
+});
+
+test('validateShortcuts flags later duplicates, not the first', () => {
+	const out = validateShortcuts([
+		{ name: 'gg', text: 'first' },
+		{ name: ' gg ', text: 'second' },
+	], ';');
+	assert.equal(out[0], null);
+	assert.match(out[1], /duplicate/i);
+});
+
+test('validateShortcuts does not count invalid rows as the first occurrence', () => {
+	const out = validateShortcuts([
+		{ name: 'gg', text: '' },
+		{ name: 'gg', text: 'real' },
+	], ';');
+	assert.equal(out[1], null);
+});
+
+test('validateShortcuts tolerates non-array input', () => {
+	assert.deepEqual(validateShortcuts(undefined, ';'), []);
+});
+
+// expandAt
+
+const EXPAND = parseShortcuts([{ name: 'gg', text: 'good game' }]);
+
+test('expandAt expands the word before the caret and adds a space', () => {
+	assert.deepEqual(expandAt(';gg', 3, ';', EXPAND, true), { value: 'good game ', caret: 10 });
+});
+
+test('expandAt without addSpace does not add a space', () => {
+	assert.deepEqual(expandAt(';gg', 3, ';', EXPAND, false), { value: 'good game', caret: 9 });
+});
+
+test('expandAt expands mid-message and keeps the rest of the text', () => {
+	assert.deepEqual(expandAt('hi ;gg there', 6, ';', EXPAND, false), { value: 'hi good game there', caret: 12 });
+});
+
+test('expandAt reuses existing whitespace after the caret instead of adding more', () => {
+	assert.deepEqual(expandAt('hi ;gg there', 6, ';', EXPAND, true), { value: 'hi good game there', caret: 13 });
+});
+
+test('expandAt returns null for unknown names, bare prefix, or no prefix', () => {
+	assert.equal(expandAt(';nope', 5, ';', EXPAND, true), null);
+	assert.equal(expandAt(';', 1, ';', EXPAND, true), null);
+	assert.equal(expandAt('gg', 2, ';', EXPAND, true), null);
+	assert.equal(expandAt('', 0, ';', EXPAND, true), null);
+});
+
+test('expandAt only looks at the word ending at the caret', () => {
+	assert.equal(expandAt(';gg x', 5, ';', EXPAND, true), null);
+});
+
+test('expandAt supports multi-character prefixes', () => {
+	assert.deepEqual(expandAt('!!gg', 4, '!!', EXPAND, false), { value: 'good game', caret: 9 });
+});
diff --git a/src/chat-shortcuts/shortcut-list-editor.vue b/src/chat-shortcuts/shortcut-list-editor.vue
index 7fe90c1..48b93a4 100644
--- a/src/chat-shortcuts/shortcut-list-editor.vue
+++ b/src/chat-shortcuts/shortcut-list-editor.vue
@@ -7,38 +7,65 @@
 <template>
 	<section class="ffz--widget tw-border-t tw-pd-y-1">
 		<div class="tw-c-text-alt-2 tw-font-size-6 tw-pd-b-1">
-			{{ t('addon.chat-shortcuts.editor.hint', 'Type the prefix plus a name (e.g. ;gg) then Space or Tab to expand. Names cannot contain spaces.') }}
+			{{ t('addon.chat-shortcuts.editor.hint', 'Type the prefix plus a name (e.g. {example}) then Space or Tab to expand. Press Backspace right after to undo.', { example: `${prefix}gg` }) }}
 		</div>
 
 		<div
 			v-for="(row, idx) in rows"
 			:key="row.key"
-			class="tw-flex tw-align-items-center tw-mg-b-05"
+			class="tw-mg-b-1"
 		>
-			<input
-				v-model="row.name"
-				type="text"
-				class="tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 tw-mg-r-05 ffz-input"
-				style="width: 12rem"
-				:placeholder="t('addon.chat-shortcuts.editor.name', 'name')"
-				@change="save"
-			>
-			<input
-				v-model="row.text"
-				type="text"
-				class="tw-flex-grow-1 tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 tw-mg-r-05 ffz-input"
-				:placeholder="t('addon.chat-shortcuts.editor.text', 'text to insert')"
-				@change="save"
+			<div class="tw-flex tw-align-items-center">
+				<input
+					v-model="row.name"
+					type="text"
+					class="tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 tw-mg-r-05 ffz-input"
+					style="width: 12rem"
+					:placeholder="t('addon.chat-shortcuts.editor.name', 'name')"
+					@change="save"
+				>
+				<input
+					v-model="row.text"
+					type="text"
+					class="tw-flex-grow-1 tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 tw-mg-r-05 ffz-input"
+					:placeholder="t('addon.chat-shortcuts.editor.text', 'text to insert')"
+					@change="save"
+				>
+				<button
+					class="tw-button tw-button--text ffz-il-tooltip__container"
+					@click="remove(idx)"
+				>
+					<span class="tw-button__text ffz-i-trash" />
+					<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
+						{{ t('addon.chat-shortcuts.editor.remove', 'Remove') }}
+					</div>
+				</button>
+			</div>
+
+			<div
+				v-if="problems[idx]"
+				class="tw-font-size-7 tw-mg-t-05"
+				style="color: var(--color-text-error, #eb0400)"
 			>
-			<button
-				class="tw-button tw-button--text ffz-il-tooltip__container"
-				@click="remove(idx)"
+				{{ problems[idx] }}
+			</div>
+			<div
+				v-else-if="row.text"
+				class="tw-font-size-6 tw-c-text-alt-2 tw-mg-t-05 tw-ellipsis"
 			>
-				<span class="tw-button__text ffz-i-trash" />
-				<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
-					{{ t('addon.chat-shortcuts.editor.remove', 'Remove') }}
-				</div>
-			</button>
+				<span class="tw-semibold tw-mg-r-1">{{ prefix }}{{ row.name.trim() }}</span>
+				<template v-for="(seg, sidx) in preview(row.text)">
+					<img
+						v-if="seg.emote"
+						:key="sidx"
+						:srcset="seg.srcSet"
+						:alt="seg.emote"
+						:title="seg.emote"
+						style="height: 2rem; vertical-align: middle"
+					>
+					<span v-else :key="sidx">{{ seg.text }}</span>
+				</template>
+			</div>
 		</div>
 
 		<button class="tw-button tw-mg-t-05" @click="add">
@@ -50,6 +77,9 @@
 </template>
 
 <script>
+import { validateShortcuts } from './matcher.js';
+import { buildPreview } from './preview.js';
+
 const KEY = 'addon.chat-shortcuts.list';
 
 let next_key = 0;
@@ -58,8 +88,13 @@ export default {
 	props: ['item', 'context'],
 
 	data() {
-		const stored = this.context.provider.get(KEY);
+		const stored = this.context.provider.get(KEY),
+			addon = this.context.getFFZ().resolve('addon.chat-shortcuts');
+
 		return {
+			// Snapshot of the emotes available in the open chat, if any.
+			lookup: addon?.getPreviewLookup?.() ?? null,
+			prefix: addon?.prefix ?? ';',
 			rows: (Array.isArray(stored) ? stored : []).map(s => ({
 				key: next_key++,
 				name: s?.name ?? '',
@@ -68,7 +103,17 @@ export default {
 		};
 	},
 
+	computed: {
+		problems() {
+			return validateShortcuts(this.rows, this.prefix);
+		}
+	},
+
 	methods: {
+		preview(text) {
+			return buildPreview(text, this.lookup);
+		},
+
 		add() {
 			this.rows.push({ key: next_key++, name: '', text: '' });
 		},

From 964cd8ade9934df2f91b0416ed9bb2031c04d4ce Mon Sep 17 00:00:00 2001
From: Adam Bodnar <abodnar@evilsockmonster.com>
Date: Wed, 14 Oct 2026 22:10:25 -0500
Subject: [PATCH 5/8] Chat Shortcuts: add logo

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/chat-shortcuts/logo.png | Bin 0 -> 9467 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 src/chat-shortcuts/logo.png

diff --git a/src/chat-shortcuts/logo.png b/src/chat-shortcuts/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..59158246f34e1396e6e83945d51bf93845fd5e0f
GIT binary patch
literal 9467
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

literal 0
HcmV?d00001


From 27b3b4f0266971f554874b35947823de274b9573 Mon Sep 17 00:00:00 2001
From: Adam Bodnar <abodnar@evilsockmonster.com>
Date: Wed, 14 Oct 2026 22:20:56 -0500
Subject: [PATCH 6/8] Chat Shortcuts: emote autocomplete in the editor, global
 emote fallback

- Editor text fields autocomplete emotes with ':' (or Tab without colon),
  following the user's FFZ tab-completion settings.
- With no chat open, the editor uses the user's global/personal FFZ, BTTV
  and 7TV emote sets.
- Pure emote matching (emotes.js) mirroring FFZ's rules, with tests.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/chat-shortcuts/emotes.js                | 118 +++++++++++++++
 src/chat-shortcuts/emotes.test.js           | 105 +++++++++++++
 src/chat-shortcuts/index.js                 |  65 +++++---
 src/chat-shortcuts/shortcut-list-editor.vue | 159 ++++++++++++++++++--
 4 files changed, 415 insertions(+), 32 deletions(-)
 create mode 100644 src/chat-shortcuts/emotes.js
 create mode 100644 src/chat-shortcuts/emotes.test.js

diff --git a/src/chat-shortcuts/emotes.js b/src/chat-shortcuts/emotes.js
new file mode 100644
index 0000000..7479515
--- /dev/null
+++ b/src/chat-shortcuts/emotes.js
@@ -0,0 +1,118 @@
+// Pure emote matching for the settings editor. Mirrors FFZ's tab-completion rules
+// (doesEmoteMatchTerm / sortEmotes in FFZ's chat input module) without FFZ deps.
+
+export const MATCH = {
+	NONE: 0,
+	ANY: 1,
+	NON_PREFIX: 2,
+	CASE_INSENSITIVE_PREFIX: 3,
+	EXACT_PREFIX: 4
+};
+
+const locale = new Intl.Collator(),
+	localeCaseInsensitive = new Intl.Collator(undefined, { sensitivity: 'accent' });
+
+export function emoteMatchType(name, term) {
+	if ( ! name || ! term )
+		return MATCH.NONE;
+
+	if ( name.startsWith(term) )
+		return MATCH.EXACT_PREFIX;
+
+	const name_lower = name.toLowerCase(),
+		term_lower = term.toLowerCase();
+
+	if ( name_lower.startsWith(term_lower) )
+		return MATCH.CASE_INSENSITIVE_PREFIX;
+
+	const idx = name.indexOf(term.charAt(0).toUpperCase());
+	if ( idx !== -1 && name_lower.slice(idx + 1).startsWith(term_lower.slice(1)) )
+		return MATCH.NON_PREFIX;
+
+	if ( name_lower.includes(term_lower) )
+		return MATCH.ANY;
+
+	return MATCH.NONE;
+}
+
+// entries: [{token, srcSet, source, favorite}]. Options mirror FFZ settings:
+// matching = chat.tab-complete.matching (1-3), limit = 25 when limit-results is on.
+export function findEmotes(entries, term, {
+	matching = 1,
+	limit = null,
+	preferFavorites = false,
+	prioritizePrefix = false
+} = {}) {
+	if ( ! term )
+		return [];
+
+	const results = [];
+	for(const entry of entries) {
+		const match_type = emoteMatchType(entry.token, term);
+		if ( match_type !== MATCH.NONE && match_type >= matching )
+			results.push({ ...entry, match_type });
+	}
+
+	results.sort((a, b) => {
+		if ( preferFavorites && (!! a.favorite !== !! b.favorite) )
+			return a.favorite ? -1 : 1;
+
+		if ( ! prioritizePrefix )
+			return 0;
+
+		for(const type of [MATCH.EXACT_PREFIX, MATCH.CASE_INSENSITIVE_PREFIX]) {
+			const a_is = a.match_type === type,
+				b_is = b.match_type === type;
+
+			if ( a_is && b_is )
+				return (type === MATCH.EXACT_PREFIX ? locale : localeCaseInsensitive).compare(a.token, b.token);
+			if ( a_is )
+				return -1;
+			if ( b_is )
+				return 1;
+		}
+
+		return locale.compare(a.token, b.token);
+	});
+
+	return limit ? results.slice(0, limit) : results;
+}
+
+// Merge FFZ tab-completion caches ({emotes: [...]}) in priority order.
+export function buildEmoteIndex(caches) {
+	const entries = [],
+		lookup = new Map;
+
+	for(const cache of caches)
+		for(const emote of cache?.emotes ?? []) {
+			if ( ! emote?.token || ! emote.srcSet || lookup.has(emote.token) )
+				continue;
+
+			lookup.set(emote.token, emote.srcSet);
+			entries.push({
+				token: emote.token,
+				srcSet: emote.srcSet,
+				source: emote.source,
+				extra: emote.extra,
+				favorite: !! emote.favorite
+			});
+		}
+
+	return { entries, lookup };
+}
+
+// The emote search term at the caret, or null. `:term` needs 2+ characters; a bare
+// word only counts when no-colon tab completion is on and Tab was pressed.
+export function emoteQuery(value, caret, { withoutColon = false, pressedTab = false } = {}) {
+	const word = /\S+$/.exec(value.slice(0, caret));
+	if ( ! word )
+		return null;
+
+	if ( word[0].startsWith(':') )
+		return word[0].length >= 3 ? { start: word.index, term: word[0].slice(1) } : null;
+
+	if ( withoutColon && pressedTab && word[0].length >= 2 )
+		return { start: word.index, term: word[0] };
+
+	return null;
+}
diff --git a/src/chat-shortcuts/emotes.test.js b/src/chat-shortcuts/emotes.test.js
new file mode 100644
index 0000000..9097efa
--- /dev/null
+++ b/src/chat-shortcuts/emotes.test.js
@@ -0,0 +1,105 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+
+import { emoteMatchType, findEmotes, buildEmoteIndex, emoteQuery, MATCH } from './emotes.js';
+
+const e = (token, extra = {}) => ({ token, srcSet: `${token}.png 1x`, source: 'ffz', ...extra });
+
+// emoteMatchType — mirrors FFZ's doesEmoteMatchTerm
+
+test('emoteMatchType ranks exact-case prefix highest', () => {
+	assert.equal(emoteMatchType('Kappa', 'Kap'), MATCH.EXACT_PREFIX);
+});
+
+test('emoteMatchType detects case-insensitive prefix', () => {
+	assert.equal(emoteMatchType('Kappa', 'kap'), MATCH.CASE_INSENSITIVE_PREFIX);
+});
+
+test('emoteMatchType detects non-prefix (capitalised word) matches', () => {
+	assert.equal(emoteMatchType('cohhSip', 'sip'), MATCH.NON_PREFIX);
+});
+
+test('emoteMatchType detects plain substring matches', () => {
+	assert.equal(emoteMatchType('Gossip', 'sip'), MATCH.ANY);
+});
+
+test('emoteMatchType returns NONE when unrelated', () => {
+	assert.equal(emoteMatchType('Kappa', 'xyz'), MATCH.NONE);
+});
+
+// findEmotes
+
+const ENTRIES = [e('Gossip'), e('cohhSip'), e('sipTea'), e('SipBig'), e('Kappa')];
+
+test('findEmotes with matching 1 includes substring matches', () => {
+	assert.deepEqual(findEmotes(ENTRIES, 'sip').map(x => x.token).sort(), ['Gossip', 'SipBig', 'cohhSip', 'sipTea'].sort());
+});
+
+test('findEmotes with matching 2 excludes plain substring matches', () => {
+	const names = findEmotes(ENTRIES, 'sip', { matching: 2 }).map(x => x.token);
+	assert.ok(! names.includes('Gossip'));
+	assert.ok(names.includes('cohhSip'));
+});
+
+test('findEmotes with matching 3 keeps only prefix matches', () => {
+	assert.deepEqual(findEmotes(ENTRIES, 'sip', { matching: 3 }).map(x => x.token).sort(), ['SipBig', 'sipTea']);
+});
+
+test('findEmotes prioritizePrefix orders exact prefix, then case-insensitive prefix, then alphabetical', () => {
+	const names = findEmotes(ENTRIES, 'sip', { prioritizePrefix: true }).map(x => x.token);
+	assert.deepEqual(names, ['sipTea', 'SipBig', 'cohhSip', 'Gossip']);
+});
+
+test('findEmotes preferFavorites puts favorites first', () => {
+	const list = [e('KappaA'), e('KappaB', { favorite: true })];
+	assert.deepEqual(findEmotes(list, 'Kap', { preferFavorites: true }).map(x => x.token), ['KappaB', 'KappaA']);
+});
+
+test('findEmotes applies the limit', () => {
+	const list = Array.from({ length: 30 }, (_, i) => e(`Pog${i}`));
+	assert.equal(findEmotes(list, 'Pog', { limit: 25 }).length, 25);
+	assert.equal(findEmotes(list, 'Pog').length, 30);
+});
+
+test('findEmotes returns nothing for an empty term', () => {
+	assert.deepEqual(findEmotes(ENTRIES, ''), []);
+});
+
+// buildEmoteIndex
+
+test('buildEmoteIndex merges caches with the first cache winning name clashes', () => {
+	const twitch = { emotes: [e('Kappa', { source: 'twitch-global' })] },
+		ffz = { emotes: [e('Kappa', { source: 'ffz', srcSet: 'other.png 1x' }), e('KEKW')] };
+
+	const { entries, lookup } = buildEmoteIndex([twitch, ffz]);
+	assert.deepEqual(entries.map(x => x.token), ['Kappa', 'KEKW']);
+	assert.equal(entries[0].source, 'twitch-global');
+	assert.equal(lookup.get('Kappa'), 'Kappa.png 1x');
+	assert.equal(lookup.get('KEKW'), 'KEKW.png 1x');
+});
+
+test('buildEmoteIndex skips missing caches and entries without a token or image', () => {
+	const { entries } = buildEmoteIndex([null, { emotes: [{ token: 'x' }, { srcSet: 'y' }, e('ok')] }]);
+	assert.deepEqual(entries.map(x => x.token), ['ok']);
+});
+
+// emoteQuery
+
+test('emoteQuery finds a colon term before the caret', () => {
+	assert.deepEqual(emoteQuery('hi :kek', 7), { start: 3, term: 'kek' });
+});
+
+test('emoteQuery needs at least two characters after the colon', () => {
+	assert.equal(emoteQuery(':k', 2), null);
+	assert.deepEqual(emoteQuery(':ke', 3), { start: 0, term: 'ke' });
+});
+
+test('emoteQuery ignores bare words unless no-colon tab completion applies', () => {
+	assert.equal(emoteQuery('hi kek', 6), null);
+	assert.equal(emoteQuery('hi kek', 6, { withoutColon: true }), null);
+	assert.deepEqual(emoteQuery('hi kek', 6, { withoutColon: true, pressedTab: true }), { start: 3, term: 'kek' });
+});
+
+test('emoteQuery only considers the word ending at the caret', () => {
+	assert.equal(emoteQuery(':kek x', 6), null);
+});
diff --git a/src/chat-shortcuts/index.js b/src/chat-shortcuts/index.js
index ab94436..fc43dbf 100644
--- a/src/chat-shortcuts/index.js
+++ b/src/chat-shortcuts/index.js
@@ -2,6 +2,7 @@
 
 import { parseShortcuts, findMatches, expandAt } from './matcher.js';
 import { buildPreview } from './preview.js';
+import { buildEmoteIndex } from './emotes.js';
 
 const KeyHandler = Symbol('ChatShortcutsKeyHandler');
 const OriginalMatches = Symbol('ChatShortcutsOriginalMatches');
@@ -239,7 +240,7 @@ class ChatShortcuts extends Addon {
 
 		let lookup = null;
 		try {
-			lookup = this.getEmoteLookup(provider);
+			lookup = this.getEmoteIndex(provider)?.lookup ?? null;
 		} catch(err) {
 			this.log.error('Unable to build emote lookup for previews.', err);
 		}
@@ -251,28 +252,56 @@ class ChatShortcuts extends Addon {
 		}));
 	}
 
-	// Emote lookup for the settings editor's previews, from whichever chat input
-	// is currently mounted. Null when no chat is open.
-	getPreviewLookup() {
+	// Emotes for the settings editor: the open chat's (Twitch + channel) if any,
+	// otherwise the user's global and personal FFZ/BTTV/7TV sets. Twitch emotes are
+	// only known while a chat is mounted. Returns {entries, lookup} or null.
+	getEditorEmotes() {
 		try {
 			for(const inst of this.input.ChatInput.instances) {
 				const provider = this.getEmoteProvider(inst);
 				if ( provider )
-					return this.getEmoteLookup(provider);
+					return this.getEmoteIndex(provider);
 			}
+
+			const user = this.site.getUser?.(),
+				key = `${user?.id}|${user?.login}`;
+
+			if ( ! this._global_cache || this._global_key !== key ) {
+				this._global_cache = this.input.buildFFZCache(user?.id, user?.login, null, null);
+				this._global_key = key;
+			}
+
+			return buildEmoteIndex([this._global_cache]);
+
 		} catch(err) {
-			this.log.error('Unable to build emote lookup for the editor.', err);
+			this.log.error('Unable to build emotes for the editor.', err);
 		}
 
 		return null;
 	}
 
-	// Map of emote name -> srcSet from the tab-completion caches FFZ keeps on the
-	// emote provider, building them with FFZ's own functions if FFZ hasn't yet.
+	// The user's FFZ tab-completion settings, for the editor's emote autocomplete.
+	getEmoteCompletionOptions() {
+		const get = key => this.settings.get(key),
+			enabled = get('chat.emotes.enabled');
+
+		return {
+			twitch: !! enabled,
+			ffz: enabled > 1 && !! get('chat.tab-complete.ffz-emotes'),
+			matching: get('chat.tab-complete.matching') || 1,
+			limit: get('chat.tab-complete.limit-results') ? 25 : null,
+			preferFavorites: !! get('chat.tab-complete.prioritize-favorites'),
+			prioritizePrefix: !! get('chat.tab-complete.prioritize-prefix-matches'),
+			withoutColon: !! get('chat.tab-complete.emotes-without-colon')
+		};
+	}
+
+	// Emote index ({entries, lookup}) from the tab-completion caches FFZ keeps on
+	// the emote provider, building them with FFZ's own functions if FFZ hasn't yet.
 	// FFZ nulls its caches when emotes change; we additionally track the channel
 	// ourselves since FFZ's cache objects don't record it. Twitch emotes win name
 	// clashes, as in chat.
-	getEmoteLookup(provider) {
+	getEmoteIndex(provider) {
 		if ( ! provider )
 			return null;
 
@@ -294,19 +323,13 @@ class ChatShortcuts extends Addon {
 			provider[FFZCacheKey] = ffz_key;
 		}
 
-		if ( this._lookup && this._lookup_twitch === twitch && this._lookup_ffz === ffz )
-			return this._lookup;
-
-		const lookup = new Map;
-		for(const cache of [twitch, ffz])
-			for(const emote of cache?.emotes ?? [])
-				if ( emote?.token && emote.srcSet && ! lookup.has(emote.token) )
-					lookup.set(emote.token, emote.srcSet);
+		if ( this._index && this._index_twitch === twitch && this._index_ffz === ffz )
+			return this._index;
 
-		this._lookup = lookup;
-		this._lookup_twitch = twitch;
-		this._lookup_ffz = ffz;
-		return lookup;
+		this._index = buildEmoteIndex([twitch, ffz]);
+		this._index_twitch = twitch;
+		this._index_ffz = ffz;
+		return this._index;
 	}
 
 	renderSuggestion(token, text, lookup) {
diff --git a/src/chat-shortcuts/shortcut-list-editor.vue b/src/chat-shortcuts/shortcut-list-editor.vue
index 48b93a4..cb594b0 100644
--- a/src/chat-shortcuts/shortcut-list-editor.vue
+++ b/src/chat-shortcuts/shortcut-list-editor.vue
@@ -3,11 +3,17 @@
 
 	FFZ has no built-in editor for name → text pairs, so this renders a simple row editor.
 	Shortcuts are global: stored directly on the settings provider, not per-profile.
+
+	The text field has its own emote autocomplete (Twitch's chat suggestion menu can't be
+	reused here) that follows the user's FFZ tab-completion settings.
 -->
 <template>
 	<section class="ffz--widget tw-border-t tw-pd-y-1">
 		<div class="tw-c-text-alt-2 tw-font-size-6 tw-pd-b-1">
-			{{ t('addon.chat-shortcuts.editor.hint', 'Type the prefix plus a name (e.g. {example}) then Space or Tab to expand. Press Backspace right after to undo.', { example: `${prefix}gg` }) }}
+			{{ t('addon.chat-shortcuts.editor.hint', 'Type the prefix plus a name (e.g. {example}) then Space or Tab to expand. Press Backspace right after to undo. Type : in the text to autocomplete emotes.', { example: `${prefix}gg` }) }}
+			<div v-if="! hasTwitch" class="tw-mg-t-05">
+				{{ t('addon.chat-shortcuts.editor.no-chat', 'Open a channel\'s chat to include your Twitch and channel emotes.') }}
+			</div>
 		</div>
 
 		<div
@@ -24,13 +30,42 @@
 					:placeholder="t('addon.chat-shortcuts.editor.name', 'name')"
 					@change="save"
 				>
-				<input
-					v-model="row.text"
-					type="text"
-					class="tw-flex-grow-1 tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 tw-mg-r-05 ffz-input"
-					:placeholder="t('addon.chat-shortcuts.editor.text', 'text to insert')"
-					@change="save"
-				>
+				<div class="tw-flex-grow-1 tw-relative tw-mg-r-05">
+					<input
+						ref="text"
+						v-model="row.text"
+						type="text"
+						class="tw-full-width tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input"
+						:placeholder="t('addon.chat-shortcuts.editor.text', 'text to insert')"
+						@input="onTextInput(idx, $event)"
+						@keydown="onTextKey(idx, $event)"
+						@blur="closeComplete(); save()"
+					>
+					<div
+						v-if="complete && complete.row === idx"
+						class="tw-absolute tw-full-width tw-c-background-base tw-border tw-border-radius-medium tw-elevation-2"
+						style="top: 100%; left: 0; z-index: 10; max-height: 24rem; overflow-y: auto"
+					>
+						<div
+							v-for="(emote, iidx) in complete.items"
+							:key="emote.token"
+							class="tw-flex tw-align-items-center tw-pd-x-1 tw-pd-y-05"
+							:class="{ 'tw-c-background-alt-2': iidx === complete.sel }"
+							style="cursor: pointer"
+							@mousedown.prevent="pick(iidx)"
+							@mouseenter="complete.sel = iidx"
+						>
+							<img
+								:srcset="emote.srcSet"
+								:alt="emote.token"
+								style="height: 2.4rem; min-width: 2.4rem; object-fit: contain"
+								class="tw-mg-r-1"
+							>
+							<span class="tw-flex-grow-1 tw-ellipsis">{{ emote.token }}</span>
+							<span class="tw-c-text-alt-2 tw-font-size-7 tw-mg-l-1">{{ sourceLabel(emote) }}</span>
+						</div>
+					</div>
+				</div>
 				<button
 					class="tw-button tw-button--text ffz-il-tooltip__container"
 					@click="remove(idx)"
@@ -79,22 +114,31 @@
 <script>
 import { validateShortcuts } from './matcher.js';
 import { buildPreview } from './preview.js';
+import { findEmotes, emoteQuery } from './emotes.js';
 
 const KEY = 'addon.chat-shortcuts.list';
 
 let next_key = 0;
 
+function isTwitch(entry) {
+	return typeof entry.source === 'string' && entry.source.startsWith('twitch');
+}
+
 export default {
 	props: ['item', 'context'],
 
 	data() {
 		const stored = this.context.provider.get(KEY),
-			addon = this.context.getFFZ().resolve('addon.chat-shortcuts');
+			addon = this.context.getFFZ().resolve('addon.chat-shortcuts'),
+			emotes = addon?.getEditorEmotes?.() ?? null;
 
 		return {
-			// Snapshot of the emotes available in the open chat, if any.
-			lookup: addon?.getPreviewLookup?.() ?? null,
+			// Snapshot of available emotes when the settings page was opened.
+			lookup: emotes?.lookup ?? null,
+			entries: emotes?.entries ?? [],
+			options: addon?.getEmoteCompletionOptions?.() ?? {},
 			prefix: addon?.prefix ?? ';',
+			complete: null,
 			rows: (Array.isArray(stored) ? stored : []).map(s => ({
 				key: next_key++,
 				name: s?.name ?? '',
@@ -106,6 +150,16 @@ export default {
 	computed: {
 		problems() {
 			return validateShortcuts(this.rows, this.prefix);
+		},
+
+		hasTwitch() {
+			return this.entries.some(isTwitch);
+		},
+
+		// Entries allowed by the user's emote / tab-completion settings.
+		completable() {
+			const { twitch = true, ffz = true } = this.options;
+			return this.entries.filter(e => isTwitch(e) ? twitch : ffz);
 		}
 	},
 
@@ -114,12 +168,95 @@ export default {
 			return buildPreview(text, this.lookup);
 		},
 
+		sourceLabel(item) {
+			if ( isTwitch(item) )
+				return 'Twitch';
+			return item.source === 'ffz' ? 'FFZ' : item.source;
+		},
+
+		// Emote autocomplete
+
+		openComplete(idx, el, pressedTab) {
+			const caret = el.selectionStart,
+				query = emoteQuery(el.value, caret, { withoutColon: this.options.withoutColon, pressedTab });
+
+			const items = query ? findEmotes(this.completable, query.term, this.options) : [];
+			if ( ! items.length ) {
+				this.complete = null;
+				return false;
+			}
+
+			this.complete = { row: idx, items, sel: 0, start: query.start, end: caret };
+			return true;
+		},
+
+		closeComplete() {
+			this.complete = null;
+		},
+
+		onTextInput(idx, event) {
+			this.openComplete(idx, event.target, false);
+		},
+
+		onTextKey(idx, event) {
+			const c = this.complete && this.complete.row === idx ? this.complete : null;
+
+			if ( ! c ) {
+				// No-colon emote completion only triggers on Tab, like chat.
+				if ( event.key === 'Tab' && ! event.shiftKey && this.options.withoutColon && this.openComplete(idx, event.target, true) )
+					event.preventDefault();
+				return;
+			}
+
+			if ( event.key === 'ArrowDown' || event.key === 'ArrowUp' ) {
+				const n = c.items.length;
+				c.sel = (c.sel + (event.key === 'ArrowDown' ? 1 : n - 1)) % n;
+				event.preventDefault();
+
+			} else if ( event.key === 'Tab' || event.key === 'Enter' ) {
+				this.pick(c.sel);
+				event.preventDefault();
+
+			} else if ( event.key === 'Escape' ) {
+				this.closeComplete();
+				event.preventDefault();
+				event.stopPropagation();
+			}
+		},
+
+		pick(iidx) {
+			const c = this.complete,
+				item = c?.items[iidx];
+			if ( ! item )
+				return;
+
+			const row = this.rows[c.row],
+				before = row.text.slice(0, c.start) + item.token,
+				after = row.text.slice(c.end),
+				pad = /^\s/.test(after) ? '' : ' ';
+
+			row.text = before + pad + after;
+			this.complete = null;
+			this.save();
+
+			const el = this.$refs.text?.[c.row];
+			this.$nextTick(() => {
+				if ( el ) {
+					el.focus();
+					el.setSelectionRange(before.length + 1, before.length + 1);
+				}
+			});
+		},
+
+		// Rows
+
 		add() {
 			this.rows.push({ key: next_key++, name: '', text: '' });
 		},
 
 		remove(idx) {
 			this.rows.splice(idx, 1);
+			this.complete = null;
 			this.save();
 		},
 

From 0e8621b4525af894205bdcb4eb24b6e9767af0d0 Mon Sep 17 00:00:00 2001
From: Adam Bodnar <abodnar@evilsockmonster.com>
Date: Wed, 14 Oct 2026 22:22:59 -0500
Subject: [PATCH 7/8] Chat Shortcuts: follow FFZ's Show Emote Source setting in
 the editor

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/chat-shortcuts/emotes.js                | 14 +++++++++++
 src/chat-shortcuts/emotes.test.js           | 28 ++++++++++++++++++++-
 src/chat-shortcuts/index.js                 |  3 ++-
 src/chat-shortcuts/shortcut-list-editor.vue | 10 +++-----
 4 files changed, 47 insertions(+), 8 deletions(-)

diff --git a/src/chat-shortcuts/emotes.js b/src/chat-shortcuts/emotes.js
index 7479515..4a0cd70 100644
--- a/src/chat-shortcuts/emotes.js
+++ b/src/chat-shortcuts/emotes.js
@@ -116,3 +116,17 @@ export function emoteQuery(value, caret, { withoutColon = false, pressedTab = fa
 
 	return null;
 }
+
+// Label for an emote's origin, following FFZ's chat.tab-complete.show-source
+// setting: 0 = none, 1 = short provider name, 2 = channel / set name.
+export function sourceLabel(entry, mode) {
+	if ( ! mode )
+		return null;
+
+	const source = entry?.source,
+		short = typeof source === 'string' && source.startsWith('twitch')
+			? 'Twitch'
+			: source === 'ffz' ? 'FFZ' : (source || null);
+
+	return mode === 2 ? (entry?.extra || short) : short;
+}
diff --git a/src/chat-shortcuts/emotes.test.js b/src/chat-shortcuts/emotes.test.js
index 9097efa..8ff8556 100644
--- a/src/chat-shortcuts/emotes.test.js
+++ b/src/chat-shortcuts/emotes.test.js
@@ -1,7 +1,7 @@
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
 
-import { emoteMatchType, findEmotes, buildEmoteIndex, emoteQuery, MATCH } from './emotes.js';
+import { emoteMatchType, findEmotes, buildEmoteIndex, emoteQuery, sourceLabel, MATCH } from './emotes.js';
 
 const e = (token, extra = {}) => ({ token, srcSet: `${token}.png 1x`, source: 'ffz', ...extra });
 
@@ -103,3 +103,29 @@ test('emoteQuery ignores bare words unless no-colon tab completion applies', ()
 test('emoteQuery only considers the word ending at the caret', () => {
 	assert.equal(emoteQuery(':kek x', 6), null);
 });
+
+// sourceLabel — mirrors FFZ's chat.tab-complete.show-source (0 off, 1 short, 2 long)
+
+test('sourceLabel returns null when show-source is disabled', () => {
+	assert.equal(sourceLabel(e('x', { source: 'BTTV' }), 0), null);
+});
+
+test('sourceLabel short mode names the provider', () => {
+	assert.equal(sourceLabel(e('x', { source: 'ffz' }), 1), 'FFZ');
+	assert.equal(sourceLabel(e('x', { source: 'BTTV' }), 1), 'BTTV');
+	assert.equal(sourceLabel(e('x', { source: 'twitch-123' }), 1), 'Twitch');
+});
+
+test('sourceLabel long mode uses the channel or set name', () => {
+	assert.equal(sourceLabel(e('x', { source: 'twitch-123', extra: 'nofairy' }), 2), 'nofairy');
+	assert.equal(sourceLabel(e('x', { source: 'BTTV', extra: 'BetterTTV Channel Emotes' }), 2), 'BetterTTV Channel Emotes');
+});
+
+test('sourceLabel long mode falls back to the short label', () => {
+	assert.equal(sourceLabel(e('x', { source: 'twitch-global' }), 2), 'Twitch');
+});
+
+test('buildEmoteIndex keeps extra for long labels', () => {
+	const { entries } = buildEmoteIndex([{ emotes: [e('x', { extra: 'nofairy' })] }]);
+	assert.equal(entries[0].extra, 'nofairy');
+});
diff --git a/src/chat-shortcuts/index.js b/src/chat-shortcuts/index.js
index fc43dbf..28b4bb2 100644
--- a/src/chat-shortcuts/index.js
+++ b/src/chat-shortcuts/index.js
@@ -292,7 +292,8 @@ class ChatShortcuts extends Addon {
 			limit: get('chat.tab-complete.limit-results') ? 25 : null,
 			preferFavorites: !! get('chat.tab-complete.prioritize-favorites'),
 			prioritizePrefix: !! get('chat.tab-complete.prioritize-prefix-matches'),
-			withoutColon: !! get('chat.tab-complete.emotes-without-colon')
+			withoutColon: !! get('chat.tab-complete.emotes-without-colon'),
+			showSource: get('chat.tab-complete.show-source') || 0
 		};
 	}
 
diff --git a/src/chat-shortcuts/shortcut-list-editor.vue b/src/chat-shortcuts/shortcut-list-editor.vue
index cb594b0..8249ea4 100644
--- a/src/chat-shortcuts/shortcut-list-editor.vue
+++ b/src/chat-shortcuts/shortcut-list-editor.vue
@@ -62,7 +62,7 @@
 								class="tw-mg-r-1"
 							>
 							<span class="tw-flex-grow-1 tw-ellipsis">{{ emote.token }}</span>
-							<span class="tw-c-text-alt-2 tw-font-size-7 tw-mg-l-1">{{ sourceLabel(emote) }}</span>
+							<span v-if="label(emote)" class="tw-c-text-alt-2 tw-font-size-7 tw-mg-l-1">{{ label(emote) }}</span>
 						</div>
 					</div>
 				</div>
@@ -114,7 +114,7 @@
 <script>
 import { validateShortcuts } from './matcher.js';
 import { buildPreview } from './preview.js';
-import { findEmotes, emoteQuery } from './emotes.js';
+import { findEmotes, emoteQuery, sourceLabel } from './emotes.js';
 
 const KEY = 'addon.chat-shortcuts.list';
 
@@ -168,10 +168,8 @@ export default {
 			return buildPreview(text, this.lookup);
 		},
 
-		sourceLabel(item) {
-			if ( isTwitch(item) )
-				return 'Twitch';
-			return item.source === 'ffz' ? 'FFZ' : item.source;
+		label(emote) {
+			return sourceLabel(emote, this.options.showSource);
 		},
 
 		// Emote autocomplete

From 1f80430f697a4833df1f66f15e50ff62a5185d37 Mon Sep 17 00:00:00 2001
From: Adam Bodnar <abodnar@evilsockmonster.com>
Date: Wed, 14 Oct 2026 22:27:30 -0500
Subject: [PATCH 8/8] Chat Shortcuts: enable for release, v1.0.0

---
 src/chat-shortcuts/manifest.json | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/chat-shortcuts/manifest.json b/src/chat-shortcuts/manifest.json
index 9877451..a53bbe4 100644
--- a/src/chat-shortcuts/manifest.json
+++ b/src/chat-shortcuts/manifest.json
@@ -1,13 +1,15 @@
 {
-	"enabled": false,
+	"enabled": true,
 	"requires": [],
 
-	"version": "0.1.0",
+	"version": "1.0.0",
 
 	"short_name": "Shortcuts",
 	"name": "Chat Shortcuts",
 	"author": "abodnar",
 	"description": "Define shortcuts like ;gg that expand into text in the chat input. Expand inline with Space or Tab, or pick from the autocomplete menu. Nothing is ever sent automatically.",
 
-	"settings": "add_ons.chat_shortcuts"
+	"settings": "add_ons.chat_shortcuts",
+	"created": "2026-10-14T00:00:00.000Z",
+	"updated": "2026-10-14T00:00:00.000Z"
 }