@kbve/droid 0.0.6 → 0.1.2

package/src/lib/workers/canvas-ui-renderer.ts

@@ -0,0 +1,266 @@
+import type {
+	ToastPayload,
+	TooltipPayload,
+	ModalPayload,
+} from '../types/ui-event-types';
+
+interface ThemeColors {
+	accent: string;
+	accentLow: string;
+	accentHigh: string;
+	bg: string;
+	bgAccent: string;
+	text: string;
+	textAccent: string;
+	border: string;
+	white: string;
+	black: string;
+	mode: 'light' | 'dark';
+}
+
+const SEVERITY_COLORS: Record<
+	string,
+	{ bg: string; border: string; text: string }
+> = {
+	success: { bg: '#065f46', border: '#10b981', text: '#d1fae5' },
+	warning: { bg: '#78350f', border: '#f59e0b', text: '#fef3c7' },
+	error: { bg: '#7f1d1d', border: '#ef4444', text: '#fee2e2' },
+	info: { bg: '#1e3a5f', border: '#3b82f6', text: '#dbeafe' },
+};
+
+interface ActiveToast extends ToastPayload {
+	createdAt: number;
+	opacity: number;
+	y: number;
+	targetY: number;
+}
+
+export class CanvasUIRenderer {
+	private ctx: OffscreenCanvasRenderingContext2D | null = null;
+	private canvas: OffscreenCanvas | null = null;
+	private toasts: ActiveToast[] = [];
+	private tooltip: TooltipPayload | null = null;
+	private modal: ModalPayload | null = null;
+	private theme: ThemeColors = {
+		accent: '#8b5cf6',
+		accentLow: '#1e1033',
+		accentHigh: '#c4b5fd',
+		bg: '#0a0a0a',
+		bgAccent: '#3b1f6e',
+		text: '#e0e0e0',
+		textAccent: '#a78bfa',
+		border: '#4c1d95',
+		white: '#ffffff',
+		black: '#000000',
+		mode: 'dark',
+	};
+	private animFrame: number | null = null;
+	private dbGet: ((key: string) => Promise<string | null>) | null = null;
+
+	async bind(
+		canvas: OffscreenCanvas,
+		dbGet: (key: string) => Promise<string | null>,
+	): Promise<void> {
+		this.canvas = canvas;
+		this.ctx = canvas.getContext('2d');
+		this.dbGet = dbGet;
+		await this.refreshTheme();
+		this.startLoop();
+	}
+
+	async refreshTheme(): Promise<void> {
+		if (!this.dbGet) return;
+		this.theme = {
+			accent: (await this.dbGet('theme:accent')) ?? '#8b5cf6',
+			accentLow: (await this.dbGet('theme:accent-low')) ?? '#1e1033',
+			accentHigh: (await this.dbGet('theme:accent-high')) ?? '#c4b5fd',
+			bg: (await this.dbGet('theme:bg')) ?? '#0a0a0a',
+			bgAccent: (await this.dbGet('theme:bg-accent')) ?? '#3b1f6e',
+			text: (await this.dbGet('theme:text')) ?? '#e0e0e0',
+			textAccent: (await this.dbGet('theme:text-accent')) ?? '#a78bfa',
+			border: (await this.dbGet('theme:border')) ?? '#4c1d95',
+			white: (await this.dbGet('theme:white')) ?? '#ffffff',
+			black: (await this.dbGet('theme:black')) ?? '#000000',
+			mode:
+				((await this.dbGet('theme:mode')) as 'light' | 'dark') ??
+				'dark',
+		};
+	}
+
+	addToast(payload: ToastPayload): void {
+		const yOffset = 20 + this.toasts.length * 80;
+		this.toasts.push({
+			...payload,
+			createdAt: Date.now(),
+			opacity: 0,
+			y: yOffset - 20,
+			targetY: yOffset,
+		});
+	}
+
+	removeToast(id: string): void {
+		const idx = this.toasts.findIndex((t) => t.id === id);
+		if (idx !== -1) this.toasts.splice(idx, 1);
+		this.recalcPositions();
+	}
+
+	showTooltip(payload: TooltipPayload | null): void {
+		this.tooltip = payload;
+	}
+
+	showModal(payload: ModalPayload | null): void {
+		this.modal = payload;
+	}
+
+	private recalcPositions(): void {
+		this.toasts.forEach((t, i) => {
+			t.targetY = 20 + i * 80;
+		});
+	}
+
+	private startLoop(): void {
+		const draw = () => {
+			this.render();
+			this.animFrame = requestAnimationFrame(draw);
+		};
+		draw();
+	}
+
+	private render(): void {
+		if (!this.ctx || !this.canvas) return;
+		const { width, height } = this.canvas;
+		this.ctx.clearRect(0, 0, width, height);
+
+		// Auto-dismiss expired toasts
+		const now = Date.now();
+		this.toasts = this.toasts.filter((t) => {
+			if (
+				t.duration &&
+				t.duration > 0 &&
+				now - t.createdAt > t.duration
+			) {
+				return false;
+			}
+			return true;
+		});
+		this.recalcPositions();
+
+		// Animate toasts
+		for (const toast of this.toasts) {
+			if (toast.opacity < 1)
+				toast.opacity = Math.min(1, toast.opacity + 0.05);
+			toast.y += (toast.targetY - toast.y) * 0.15;
+			this.drawToast(toast, width);
+		}
+
+		// Draw modal backdrop + content
+		if (this.modal) {
+			this.drawModal(width, height);
+		}
+	}
+
+	private drawToast(toast: ActiveToast, canvasWidth: number): void {
+		if (!this.ctx) return;
+		const ctx = this.ctx;
+		const w = 320;
+		const h = 64;
+		const x = canvasWidth - w - 20;
+		const y = toast.y;
+		const colors =
+			SEVERITY_COLORS[toast.severity] ?? SEVERITY_COLORS['info'];
+
+		ctx.globalAlpha = toast.opacity;
+
+		// Background
+		ctx.fillStyle = colors.bg;
+		this.roundRect(ctx, x, y, w, h, 8);
+		ctx.fill();
+
+		// Border
+		ctx.strokeStyle = colors.border;
+		ctx.lineWidth = 1.5;
+		this.roundRect(ctx, x, y, w, h, 8);
+		ctx.stroke();
+
+		// Text
+		ctx.fillStyle = colors.text;
+		ctx.font = '14px system-ui, -apple-system, sans-serif';
+		ctx.fillText(toast.message, x + 12, y + 24, w - 24);
+
+		// Severity label
+		ctx.font = 'bold 10px system-ui, sans-serif';
+		ctx.fillStyle = colors.border;
+		ctx.fillText(toast.severity.toUpperCase(), x + 12, y + 48);
+
+		ctx.globalAlpha = 1;
+	}
+
+	private drawModal(canvasWidth: number, canvasHeight: number): void {
+		if (!this.ctx || !this.modal) return;
+		const ctx = this.ctx;
+
+		// Backdrop
+		ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+		ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+
+		// Modal box
+		const w = Math.min(500, canvasWidth - 40);
+		const h = 300;
+		const x = (canvasWidth - w) / 2;
+		const y = (canvasHeight - h) / 2;
+
+		ctx.fillStyle = this.theme.bg;
+		this.roundRect(ctx, x, y, w, h, 12);
+		ctx.fill();
+
+		ctx.strokeStyle = this.theme.border;
+		ctx.lineWidth = 1;
+		this.roundRect(ctx, x, y, w, h, 12);
+		ctx.stroke();
+
+		// Title
+		if (this.modal.title) {
+			ctx.fillStyle = this.theme.text;
+			ctx.font = 'bold 18px system-ui, sans-serif';
+			ctx.fillText(this.modal.title, x + 20, y + 36, w - 40);
+		}
+
+		// ID label
+		ctx.fillStyle = this.theme.textAccent;
+		ctx.font = '12px system-ui, sans-serif';
+		ctx.fillText(this.modal.id, x + 20, y + 60, w - 40);
+	}
+
+	private roundRect(
+		ctx: OffscreenCanvasRenderingContext2D,
+		x: number,
+		y: number,
+		w: number,
+		h: number,
+		r: number,
+	): void {
+		ctx.beginPath();
+		ctx.moveTo(x + r, y);
+		ctx.lineTo(x + w - r, y);
+		ctx.quadraticCurveTo(x + w, y, x + w, y + r);
+		ctx.lineTo(x + w, y + h - r);
+		ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
+		ctx.lineTo(x + r, y + h);
+		ctx.quadraticCurveTo(x, y + h, x, y + h - r);
+		ctx.lineTo(x, y + r);
+		ctx.quadraticCurveTo(x, y, x + r, y);
+		ctx.closePath();
+	}
+
+	unbind(): void {
+		if (this.animFrame !== null) {
+			cancelAnimationFrame(this.animFrame);
+			this.animFrame = null;
+		}
+		this.ctx = null;
+		this.canvas = null;
+		this.toasts = [];
+		this.tooltip = null;
+		this.modal = null;
+	}
+}

package/src/lib/workers/canvas-worker.ts

@@ -1,8 +1,28 @@
 import { expose } from 'comlink';
+import { CanvasUIRenderer } from './canvas-ui-renderer';
+import type {
+	ToastPayload,
+	TooltipPayload,
+	ModalPayload,
+} from '../types/ui-event-types';
 
 export interface CanvasWorkerAPI {
-	bindCanvas(panelId: string, canvas: OffscreenCanvas, mode?: CanvasDrawMode): Promise<void>;
+	bindCanvas(
+		panelId: string,
+		canvas: OffscreenCanvas,
+		mode?: CanvasDrawMode,
+	): Promise<void>;
 	unbindCanvas(panelId: string): Promise<void>;
+	bindUICanvas(
+		canvas: OffscreenCanvas,
+		dbGet: (key: string) => Promise<string | null>,
+	): Promise<void>;
+	unbindUICanvas(): void;
+	addCanvasToast(payload: ToastPayload): void;
+	removeCanvasToast(id: string): void;
+	showCanvasTooltip(payload: TooltipPayload | null): void;
+	showCanvasModal(payload: ModalPayload | null): void;
+	refreshUITheme(): Promise<void>;
 }
 
 interface CanvasBinding {
@@ -15,18 +35,38 @@ interface CanvasBinding {
 
 export type CanvasDrawMode = 'static' | 'animated' | 'dynamic';
 
+const uiRenderer = new CanvasUIRenderer();
+
+// Listen for theme changes from main thread
+try {
+	const bc = new BroadcastChannel('kbve_theme');
+	bc.onmessage = () => {
+		void uiRenderer.refreshTheme();
+	};
+} catch {
+	// BroadcastChannel unavailable in this context
+}
+
 const CanvasManager = {
 	bindings: new Map<string, CanvasBinding>(),
 
-	async bindCanvas(panelId: string, canvas: OffscreenCanvas, mode: CanvasDrawMode = 'animated') {
+	async bindCanvas(
+		panelId: string,
+		canvas: OffscreenCanvas,
+		mode: CanvasDrawMode = 'animated',
+	) {
 		const ctx = canvas.getContext('2d');
 
 		if (!ctx) {
-			console.error(`[CanvasWorker] Failed to get 2D context for panel ${panelId}`);
+			console.error(
+				`[CanvasWorker] Failed to get 2D context for panel ${panelId}`,
+			);
 			return;
 		}
 
-		console.log(`[CanvasWorker] Successfully bound canvas for panel ${panelId} with mode ${mode}`);
+		console.log(
+			`[CanvasWorker] Successfully bound canvas for panel ${panelId} with mode ${mode}`,
+		);
 
 		this.bindings.set(panelId, { ctx, canvas, panelId, mode });
 
@@ -48,7 +88,9 @@ const CanvasManager = {
 				this.drawDynamic(binding);
 				break;
 			default:
-				console.warn(`[CanvasWorker] Unknown draw mode for panel ${panelId}`);
+				console.warn(
+					`[CanvasWorker] Unknown draw mode for panel ${panelId}`,
+				);
 		}
 	},
 
@@ -63,7 +105,12 @@ const CanvasManager = {
 		const drawFrame = () => {
 			hue = (hue + 1) % 360;
 			binding.ctx.fillStyle = `hsl(${hue}, 100%, 50%)`;
-			binding.ctx.fillRect(0, 0, binding.canvas.width, binding.canvas.height);
+			binding.ctx.fillRect(
+				0,
+				0,
+				binding.canvas.width,
+				binding.canvas.height,
+			);
 
 			binding.animationFrame = requestAnimationFrame(drawFrame);
 		};
@@ -76,18 +123,23 @@ const CanvasManager = {
 
 		const drawFrame = () => {
 			time += 0.05;
-			binding.ctx.clearRect(0, 0, binding.canvas.width, binding.canvas.height);
+			binding.ctx.clearRect(
+				0,
+				0,
+				binding.canvas.width,
+				binding.canvas.height,
+			);
 			binding.ctx.beginPath();
 			binding.ctx.arc(
 				binding.canvas.width / 2 + Math.sin(time) * 50,
 				binding.canvas.height / 2 + Math.cos(time) * 50,
 				30,
 				0,
-				Math.PI * 2
+				Math.PI * 2,
 			);
 			binding.ctx.fillStyle = 'orange';
 			binding.ctx.fill();
-	
+
 			binding.animationFrame = requestAnimationFrame(drawFrame);
 		};
 
@@ -102,6 +154,39 @@ const CanvasManager = {
 		this.bindings.delete(panelId);
 		console.log(`[CanvasWorker] Unbound canvas for panel ${panelId}`);
 	},
+
+	// ── UI Overlay Canvas ──
+
+	async bindUICanvas(
+		canvas: OffscreenCanvas,
+		dbGet: (key: string) => Promise<string | null>,
+	) {
+		await uiRenderer.bind(canvas, dbGet);
+	},
+
+	unbindUICanvas() {
+		uiRenderer.unbind();
+	},
+
+	addCanvasToast(payload: ToastPayload) {
+		uiRenderer.addToast(payload);
+	},
+
+	removeCanvasToast(id: string) {
+		uiRenderer.removeToast(id);
+	},
+
+	showCanvasTooltip(payload: TooltipPayload | null) {
+		uiRenderer.showTooltip(payload);
+	},
+
+	showCanvasModal(payload: ModalPayload | null) {
+		uiRenderer.showModal(payload);
+	},
+
+	refreshUITheme() {
+		return uiRenderer.refreshTheme();
+	},
 };
 
 expose(CanvasManager);

package/src/lib/workers/data.ts

@@ -1,8 +1,13 @@
-import { PayloadFormat, JediEnvelopeFlex, MessageKind } from '../types/jedi';
+import {
+	PayloadFormat,
+	type JediEnvelopeFlex,
+	MessageKind,
+} from '../types/jedi';
 import { builder, toReference } from './flexbuilder';
 
-
-function buildFlexPayload<T extends Record<string, any>>(payload: T): Uint8Array {
+function buildFlexPayload<T extends Record<string, unknown>>(
+	payload: T,
+): Uint8Array {
 	const b = builder();
 	b.startMap();
 
@@ -15,7 +20,7 @@ function buildFlexPayload<T extends Record<string, any>>(payload: T): Uint8Array
 	return b.finish();
 }
 
-export function wrapEnvelope<T extends Record<string, any>>(
+export function wrapEnvelope<T extends Record<string, unknown>>(
 	payload: T,
 	kind: number,
 	format: PayloadFormat,
@@ -34,22 +39,30 @@ export function wrapEnvelope<T extends Record<string, any>>(
 
 	const b = builder();
 	b.startMap();
-	b.addKey('version');  b.add(version);
-	b.addKey('kind');     b.add(kind);
-	b.addKey('format');   b.add(format);
-	b.addKey('payload');  b.add(serializedPayload);
-	b.addKey('metadata'); b.add(metadata ?? new Uint8Array());
+	b.addKey('version');
+	b.add(version);
+	b.addKey('kind');
+	b.add(kind);
+	b.addKey('format');
+	b.add(format);
+	b.addKey('payload');
+	b.add(serializedPayload);
+	b.addKey('metadata');
+	b.add(metadata ?? new Uint8Array());
 	b.end();
 
 	return b.finish();
 }
 
 export function unwrapEnvelope<T = unknown>(
-	buffer: Uint8Array | ArrayBuffer
+	buffer: Uint8Array | ArrayBuffer,
 ): { envelope: JediEnvelopeFlex; payload: T } {
 	const view = buffer instanceof Uint8Array ? buffer : new Uint8Array(buffer);
 
-	const root = toReference(view.buffer as ArrayBuffer).toObject() as Record<string, any>;
+	const root = toReference(view.buffer as ArrayBuffer).toObject() as Record<
+		string,
+		unknown
+	>;
 
 	if (
 		typeof root['version'] !== 'number' ||
@@ -65,8 +78,10 @@ export function unwrapEnvelope<T = unknown>(
 		version: root['version'],
 		kind: root['kind'],
 		format: root['format'],
-		payload: new Uint8Array(root['payload']),
-		metadata: root['metadata'] ? new Uint8Array(root['metadata']) : undefined,
+		payload: new Uint8Array(root['payload'] as ArrayLike<number>),
+		metadata: root['metadata']
+			? new Uint8Array(root['metadata'] as ArrayLike<number>)
+			: undefined,
 	};
 
 	let parsedPayload: T;
@@ -75,9 +90,13 @@ export function unwrapEnvelope<T = unknown>(
 		const ref = toReference(envelope.payload.buffer as ArrayBuffer);
 		parsedPayload = ref.toObject() as T;
 	} else if (envelope.format === PayloadFormat.JSON) {
-		parsedPayload = JSON.parse(new TextDecoder().decode(envelope.payload)) as T;
+		parsedPayload = JSON.parse(
+			new TextDecoder().decode(envelope.payload),
+		) as T;
 	} else {
-		throw new Error(`[unwrapEnvelope] Unsupported format: ${envelope.format}`);
+		throw new Error(
+			`[unwrapEnvelope] Unsupported format: ${envelope.format}`,
+		);
 	}
 
 	return { envelope, payload: parsedPayload };
@@ -89,7 +108,8 @@ export function unwrapFlexToJson(buffer: Uint8Array) {
 
 export function inspectFlex(buffer: Uint8Array | ArrayBuffer): void {
 	try {
-		const view = buffer instanceof Uint8Array ? buffer : new Uint8Array(buffer);
+		const view =
+			buffer instanceof Uint8Array ? buffer : new Uint8Array(buffer);
 		const obj = unwrapFlexToJson(view);
 		console.log('[FlexObject]', JSON.stringify(obj, null, 2));
 	} catch (err) {
@@ -101,14 +121,13 @@ export function hasKind(kind: number, flag: number): boolean {
 	return (kind & flag) === flag;
 }
 
-
 //	Redis Helpers
 
 export function wrapRedisSet(key: string, value: string): Uint8Array {
 	return wrapEnvelope(
 		{ key, value },
 		MessageKind.SET | MessageKind.REDIS,
-		PayloadFormat.FLEX
+		PayloadFormat.FLEX,
 	);
 }
 
@@ -116,7 +135,7 @@ export function wrapRedisGet(key: string): Uint8Array {
 	return wrapEnvelope(
 		{ key },
 		MessageKind.GET | MessageKind.REDIS,
-		PayloadFormat.FLEX
+		PayloadFormat.FLEX,
 	);
 }
 
@@ -124,11 +143,13 @@ export function wrapRedisDel(key: string): Uint8Array {
 	return wrapEnvelope(
 		{ key },
 		MessageKind.DEL | MessageKind.REDIS,
-		PayloadFormat.FLEX
+		PayloadFormat.FLEX,
 	);
 }
 
-export function parseRedisPayload<T = unknown>(envelopeBytes: Uint8Array): {
+export function parseRedisPayload<T = unknown>(
+	envelopeBytes: Uint8Array,
+): {
 	envelope: JediEnvelopeFlex;
 	payload: T;
 } {
@@ -156,25 +177,28 @@ export function wrapRedisXRead(
 	count?: number,
 	block?: number,
 ): Uint8Array {
-
 	const inner = builder();
 	inner.startMap();
 
 	inner.addKey('streams');
-	inner.startVector(); 
+	inner.startVector();
 	for (const { stream, id } of streams) {
 		inner.startMap();
-		inner.addKey('stream'); inner.add(stream);
-		inner.addKey('id');     inner.add(id);
+		inner.addKey('stream');
+		inner.add(stream);
+		inner.addKey('id');
+		inner.add(id);
 		inner.end();
-	  }
+	}
 	inner.end();
 
 	if (count !== undefined) {
-		inner.addKey('count'); inner.add(count);
+		inner.addKey('count');
+		inner.add(count);
 	}
 	if (block !== undefined) {
-		inner.addKey('block'); inner.add(block);
+		inner.addKey('block');
+		inner.add(block);
 	}
 
 	inner.end();
@@ -182,18 +206,21 @@ export function wrapRedisXRead(
 
 	const b = builder();
 	b.startMap();
-	b.addKey('version');  b.add(1);
-	b.addKey('kind');     b.add(MessageKind.READ | MessageKind.STREAM | MessageKind.REDIS);
-	b.addKey('format');   b.add(PayloadFormat.FLEX);
-	b.addKey('payload');  b.add(serializedPayload); 
-	b.addKey('metadata'); b.add(new Uint8Array());
+	b.addKey('version');
+	b.add(1);
+	b.addKey('kind');
+	b.add(MessageKind.READ | MessageKind.STREAM | MessageKind.REDIS);
+	b.addKey('format');
+	b.add(PayloadFormat.FLEX);
+	b.addKey('payload');
+	b.add(serializedPayload);
+	b.addKey('metadata');
+	b.add(new Uint8Array());
 	b.end();
 
 	return b.finish();
 }
 
-
-
 export const scopeData = {
 	wrapEnvelope,
 	unwrapEnvelope,
@@ -202,14 +229,14 @@ export const scopeData = {
 	unwrapFlexToJson,
 	inspectFlex,
 	hasKind,
-    redis: {
+	redis: {
 		wrapRedisSet,
 		wrapRedisGet,
 		wrapRedisDel,
 		wrapRedisXAdd,
 		wrapRedisXRead,
 		parseRedisPayload,
-	}
+	},
 };
 
 export type FlexDataAPI = typeof scopeData;