qc TUI: HD OpenEmoji + OpenIcon images (hqtui 0.9.0), qc 0.4.4 (#288)

Messages, reactions and the brand lock draw our artwork as real images via
hqtui's image store (Kitty Unicode placeholders), so they survive redraws,
scrolling and tmux. On in Kitty/Ghostty; QC_HD=1 over SSH or in tmux.
Plain characters everywhere else, as before.

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>

Author: ralyodio

bun.lock

@@ -1,7 +1,7 @@
 {
   "name": "qryptchat-web",
   "private": true,
-  "version": "0.5.4",
+  "version": "0.5.5",
   "type": "module",
   "bin": {
     "qc": "./bin/qc.js",
@@ -34,7 +34,7 @@
     "dependencies": "command -v pnpm && pnpm dlx @socketsecurity/socket-patch apply --silent --ecosystems npm || true"
   },
   "devDependencies": {
-    "@profullstack/hqtui": "^0.8.0",
+    "@profullstack/hqtui": "^0.9.0",
     "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.6.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@profullstack/qryptchat",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "description": "qc: qrypt.chat in your terminal. A full-screen end-to-end encrypted chat client (ML-KEM-1024), plus a scriptable CLI and an MCP server.",
   "type": "module",
   "bin": {
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@noble/ciphers": "^2.0.0",
-    "@profullstack/hqtui": "^0.8.0",
+    "@profullstack/hqtui": "^0.9.0",
     "mlkem": "^2.5.0"
   },
   "keywords": [

packages/qryptchat/package.json

@@ -22,7 +22,9 @@ Usage:
 
 <chat> is a chat id or part of its name. Options: --json, --url <server> (or QC_URL).
 Keys and tokens are sealed (ChaCha20-Poly1305) in ${'$'}QC_HOME or ~/.config/qc; the key is in your
-OS keychain, or comes from a passphrase (QC_PASSPHRASE for scripts and qc mcp).`;
+OS keychain, or comes from a passphrase (QC_PASSPHRASE for scripts and qc mcp).
+HD: emoji and icons are drawn as our OpenEmoji/OpenIcon images in Kitty and Ghostty. Over SSH or in
+tmux (set -g allow-passthrough on), run with QC_HD=1; QC_HD=0 turns it off.`;
 
 export function parseArgs(argv) {
 	const args = { _: [], flags: {} };

src/cli/commands.js

@@ -16,7 +16,7 @@
  * draw the real layout with renderToText. The controller (runTui) owns the
  * network: conversations, decrypted messages, sending, and the SSE stream.
  */
-import { createApp, editText, emojify, insertText, stringWidth, truncate, widgets, wrap } from '@profullstack/hqtui';
+import { createApp, createImageStore, drawIcon, drawRichText, editText, emojify, insertText, stringWidth, truncate, widgets, wrap } from '@profullstack/hqtui';
 import { readFileSync, writeFileSync } from 'node:fs';
 import { join } from 'node:path';
 import { configDir } from './config.js';
@@ -115,11 +115,12 @@ function drawTranscript(surface, state) {
 	for (let y = top; y < surface.height; y++) {
 		const line = lines[start + y - top];
 		if (!line) break;
+		// Emoji draw as our OpenEmoji artwork on terminals that show images (HD).
 		if (line.spans) {
 			let x = 0;
-			for (const span of line.spans) x += surface.text(x, y, span.text, { fg: span.fg, attrs: span.bold ? 1 : 0 });
+			for (const span of line.spans) x += drawRichText(surface, x, y, span.text, { fg: span.fg, attrs: span.bold ? 1 : 0 }, state.images);
 		} else {
-			surface.text(0, y, truncate(line.text, surface.width), { fg: line.fg });
+			drawRichText(surface, 0, y, truncate(line.text, surface.width), { fg: line.fg }, state.images);
 		}
 	}
 	if (state.scrollBack > 0) {
@@ -137,7 +138,10 @@ export function render({ ui, width, height, theme }, state, on = {}) {
 		bar.draw((s) => {
 			const t = s.theme;
 			s.fillRect(0, 0, s.width, 1, { bg: t.surface ?? t.background });
-			let x = s.text(0, 0, ' 🔒 qrypt.chat ', { fg: t.background, bg: t.primary, attrs: 1 });
+			const brand = { fg: t.background, bg: t.primary, attrs: 1 };
+			let x = s.text(0, 0, ' ', brand);
+			x += drawIcon(s, x, 0, 'lock', state.images, '🔒', brand);
+			x += s.text(x, 0, ' qrypt.chat ', brand);
 			x += s.text(x, 0, `  @${state.me?.username ?? '?'}`, { fg: t.foreground, bg: t.surface ?? t.background });
 			if (state.notice) s.text(x + 2, 0, truncate(state.notice, Math.max(0, s.width - x - 16)), { fg: t.warning, bg: t.surface ?? t.background });
 			const live = { live: ['●', 'live', t.success], connecting: ['◌', 'connecting', t.warning], offline: ['○', 'offline', t.danger] }[state.status] ?? ['○', state.status, t.muted];
@@ -245,6 +249,11 @@ export async function runTui(client, { initialChat } = {}) {
 	const abort = new AbortController();
 	const app = await createApp({ quitKeys: ['ctrl+c'], focusNavigation: false });
 	const redraw = () => app.invalidate();
+	// HD: our OpenEmoji/OpenIcon PNGs as real images where the terminal can show
+	// them. Kitty/Ghostty are detected; over SSH or in tmux say so with QC_HD=1
+	// (or HQTUI_IMAGES=1). Everywhere else the characters are drawn as before.
+	const env = process.env.QC_HD && !process.env.HQTUI_IMAGES ? { ...process.env, HQTUI_IMAGES: process.env.QC_HD } : process.env;
+	state.images = createImageStore({ write: (seq) => app.terminal.write(seq), onReady: redraw, env });
 	const note = (msg, { sticky = false } = {}) => {
 		state.notice = msg;
 		redraw();
@@ -410,7 +419,10 @@ export async function runTui(client, { initialChat } = {}) {
 		state.field = insertText(state.field, event.text);
 		redraw();
 	});
-	app.on('exit', () => abort.abort());
+	app.on('exit', () => {
+		state.images?.clear();
+		abort.abort();
+	});
 
 	app.render((args) => render(args, state, handlers));
 

src/cli/tui.js

@@ -43,6 +43,21 @@ describe('the qc client screen', () => {
 		expect(text).toMatch(/ENTER\s+send/i);
 	});
 
+	it('draws emoji and the brand lock as HD images when the terminal can show them', () => {
+		const s = state();
+		// Every emoji and icon is "loaded" as image 7.
+		s.images = { enabled: true, emoji: () => 7, icon: () => 7, clear: () => {} };
+		const screen = draw(s);
+		const rocket = screen.find('shipped it');
+		const cells = screen.buffer.chars;
+		const at = (x, y) => cells[y * screen.width + x];
+		// "shipped it " is 11 columns; the rocket's two cells follow as image placeholders.
+		expect(screen.text()).not.toContain('shipped it 🚀');
+		expect(at(rocket.x + 11, rocket.y)).not.toBe(at(rocket.x + 10, rocket.y));
+		expect(screen.text()).not.toContain('🔒');
+		expect(screen.text()).toContain('qrypt.chat');
+	});
+
 	it('groups a run of messages under one name line', () => {
 		const lines = transcriptLines(state().messages.c1, 60, { border: 0, primary: 1, muted: 2, foreground: 3, accent: 4, info: 5, success: 6, warning: 7, secondary: 8 });
 		const headers = lines.filter((l) => l.spans);