framer-code-link 0.1.2 → 0.1.4

package/dist/index.js

@@ -1,4 +1,5 @@
 #!/usr/bin/env node
+import "node:module";
 import { Command } from "commander";
 import fs from "fs/promises";
 import { WebSocketServer } from "ws";
@@ -9,10 +10,103 @@ import { createHash } from "crypto";
 import { setupTypeAcquisition } from "@typescript/ata";
 import ts from "typescript";
 
+//#region rolldown:runtime
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function() {
+	return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+
+//#endregion
+//#region ../../node_modules/picocolors/picocolors.js
+var require_picocolors = __commonJS({ "../../node_modules/picocolors/picocolors.js"(exports, module) {
+	let p = process || {}, argv = p.argv || [], env = p.env || {};
+	let isColorSupported = !(!!env.NO_COLOR || argv.includes("--no-color")) && (!!env.FORCE_COLOR || argv.includes("--color") || p.platform === "win32" || (p.stdout || {}).isTTY && env.TERM !== "dumb" || !!env.CI);
+	let formatter = (open, close, replace = open) => (input) => {
+		let string = "" + input, index = string.indexOf(close, open.length);
+		return ~index ? open + replaceClose(string, close, replace, index) + close : open + string + close;
+	};
+	let replaceClose = (string, close, replace, index) => {
+		let result = "", cursor = 0;
+		do {
+			result += string.substring(cursor, index) + replace;
+			cursor = index + close.length;
+			index = string.indexOf(close, cursor);
+		} while (~index);
+		return result + string.substring(cursor);
+	};
+	let createColors = (enabled = isColorSupported) => {
+		let f = enabled ? formatter : () => String;
+		return {
+			isColorSupported: enabled,
+			reset: f("\x1B[0m", "\x1B[0m"),
+			bold: f("\x1B[1m", "\x1B[22m", "\x1B[22m\x1B[1m"),
+			dim: f("\x1B[2m", "\x1B[22m", "\x1B[22m\x1B[2m"),
+			italic: f("\x1B[3m", "\x1B[23m"),
+			underline: f("\x1B[4m", "\x1B[24m"),
+			inverse: f("\x1B[7m", "\x1B[27m"),
+			hidden: f("\x1B[8m", "\x1B[28m"),
+			strikethrough: f("\x1B[9m", "\x1B[29m"),
+			black: f("\x1B[30m", "\x1B[39m"),
+			red: f("\x1B[31m", "\x1B[39m"),
+			green: f("\x1B[32m", "\x1B[39m"),
+			yellow: f("\x1B[33m", "\x1B[39m"),
+			blue: f("\x1B[34m", "\x1B[39m"),
+			magenta: f("\x1B[35m", "\x1B[39m"),
+			cyan: f("\x1B[36m", "\x1B[39m"),
+			white: f("\x1B[37m", "\x1B[39m"),
+			gray: f("\x1B[90m", "\x1B[39m"),
+			bgBlack: f("\x1B[40m", "\x1B[49m"),
+			bgRed: f("\x1B[41m", "\x1B[49m"),
+			bgGreen: f("\x1B[42m", "\x1B[49m"),
+			bgYellow: f("\x1B[43m", "\x1B[49m"),
+			bgBlue: f("\x1B[44m", "\x1B[49m"),
+			bgMagenta: f("\x1B[45m", "\x1B[49m"),
+			bgCyan: f("\x1B[46m", "\x1B[49m"),
+			bgWhite: f("\x1B[47m", "\x1B[49m"),
+			blackBright: f("\x1B[90m", "\x1B[39m"),
+			redBright: f("\x1B[91m", "\x1B[39m"),
+			greenBright: f("\x1B[92m", "\x1B[39m"),
+			yellowBright: f("\x1B[93m", "\x1B[39m"),
+			blueBright: f("\x1B[94m", "\x1B[39m"),
+			magentaBright: f("\x1B[95m", "\x1B[39m"),
+			cyanBright: f("\x1B[96m", "\x1B[39m"),
+			whiteBright: f("\x1B[97m", "\x1B[39m"),
+			bgBlackBright: f("\x1B[100m", "\x1B[49m"),
+			bgRedBright: f("\x1B[101m", "\x1B[49m"),
+			bgGreenBright: f("\x1B[102m", "\x1B[49m"),
+			bgYellowBright: f("\x1B[103m", "\x1B[49m"),
+			bgBlueBright: f("\x1B[104m", "\x1B[49m"),
+			bgMagentaBright: f("\x1B[105m", "\x1B[49m"),
+			bgCyanBright: f("\x1B[106m", "\x1B[49m"),
+			bgWhiteBright: f("\x1B[107m", "\x1B[49m")
+		};
+	};
+	module.exports = createColors();
+	module.exports.createColors = createColors;
+} });
+
+//#endregion
 //#region src/utils/logging.ts
-/**
-* Logging utilities for consistent output
-*/
+var import_picocolors = __toESM(require_picocolors(), 1);
 let LogLevel = /* @__PURE__ */ function(LogLevel$1) {
 	LogLevel$1[LogLevel$1["DEBUG"] = 0] = "DEBUG";
 	LogLevel$1[LogLevel$1["INFO"] = 1] = "INFO";
@@ -21,77 +115,335 @@ let LogLevel = /* @__PURE__ */ function(LogLevel$1) {
 	return LogLevel$1;
 }({});
 let currentLevel = LogLevel.INFO;
+let lastMessage = "";
+let lastMessageCount = 0;
+const CLEAR_LINE = "\x1B[2K";
+const MOVE_CURSOR_UP = "\x1B[1A";
+function rewriteLastLine(text) {
+	if (process.stdout.isTTY) process.stdout.write(`${MOVE_CURSOR_UP}\r${CLEAR_LINE}${text}\n`);
+	else process.stdout.write(`${text}\n`);
+}
+let disconnectTimer = null;
+let isShowingDisconnect = false;
+let hadRecentDisconnect = false;
+const DISCONNECT_DELAY_MS = 2e3;
 function setLogLevel(level) {
 	currentLevel = level;
 }
+function dedupeMessage(message, count) {
+	rewriteLastLine(`${message} ${import_picocolors.default.dim(`(x${count})`)}`);
+}
+/**
+* Flush any pending deduplicated message
+*/
+function flushDedupe() {
+	if (lastMessageCount > 1) dedupeMessage(lastMessage, lastMessageCount);
+	lastMessage = "";
+	lastMessageCount = 0;
+}
+/**
+* Log with deduplication - repeated messages within window get counted
+*/
+function logWithDedupe(message, writer) {
+	if (message === lastMessage) {
+		lastMessageCount++;
+		dedupeMessage(message, lastMessageCount);
+		return;
+	}
+	lastMessage = message;
+	lastMessageCount = 1;
+	writer();
+}
+/**
+* Print the startup banner - one colored line
+*/
+function banner(version, port) {
+	console.log();
+	let message = `  ${import_picocolors.default.cyan(import_picocolors.default.bold("⚡ Code Link"))} ${import_picocolors.default.dim(`v${version}`)}`;
+	if (currentLevel <= LogLevel.DEBUG) message += `  ${import_picocolors.default.dim("Port")} ${import_picocolors.default.yellow(port)}`;
+	console.log(message);
+	console.log();
+}
+/**
+* Debug-level logging - only shown with --verbose flag
+*/
 function debug(message, ...args) {
-	if (currentLevel <= LogLevel.DEBUG) console.debug(`[DEBUG] ${message}`, ...args);
+	if (currentLevel <= LogLevel.DEBUG) console.debug(import_picocolors.default.dim(`[DEBUG] ${message}`), ...args);
 }
+/**
+* Info-level logging - shown by default, no prefix
+*/
 function info(message, ...args) {
-	if (currentLevel <= LogLevel.INFO) console.info(`[INFO] ${message}`, ...args);
+	if (currentLevel <= LogLevel.INFO) {
+		const formatted = args.length > 0 ? `${message} ${args.join(" ")}` : message;
+		logWithDedupe(formatted, () => console.log(formatted));
+	}
 }
+/**
+* Warning-level logging
+*/
 function warn(message, ...args) {
-	if (currentLevel <= LogLevel.WARN) console.warn(`[WARN] ${message}`, ...args);
+	if (currentLevel <= LogLevel.WARN) {
+		flushDedupe();
+		console.warn(import_picocolors.default.yellow(`⚠ ${message}`), ...args);
+	}
 }
+/**
+* Error-level logging
+*/
 function error(message, ...args) {
-	if (currentLevel <= LogLevel.ERROR) console.error(`[ERROR] ${message}`, ...args);
+	if (currentLevel <= LogLevel.ERROR) {
+		flushDedupe();
+		console.error(import_picocolors.default.red(`✗ ${message}`), ...args);
+	}
 }
+/**
+* Success message with checkmark
+*/
 function success(message, ...args) {
-	if (currentLevel <= LogLevel.INFO) console.log(`✓ ${message}`, ...args);
+	if (currentLevel <= LogLevel.INFO) {
+		flushDedupe();
+		console.log(import_picocolors.default.green(`✓ ${message}`), ...args);
+	}
+}
+/**
+* File sync indicators
+*/
+function fileDown(fileName) {
+	if (currentLevel <= LogLevel.INFO) {
+		const msg = `  ${import_picocolors.default.blue("↓")} ${fileName}`;
+		logWithDedupe(msg, () => console.log(msg));
+	}
+}
+function fileUp(fileName) {
+	if (currentLevel <= LogLevel.INFO) {
+		const msg = `  ${import_picocolors.default.green("↑")} ${fileName}`;
+		logWithDedupe(msg, () => console.log(msg));
+	}
+}
+function fileDelete(fileName) {
+	if (currentLevel <= LogLevel.INFO) {
+		const msg = `  ${import_picocolors.default.red("×")} ${fileName}`;
+		logWithDedupe(msg, () => console.log(msg));
+	}
+}
+/**
+* Status message (dimmed, for "watching for changes..." etc)
+*/
+function status(message) {
+	if (currentLevel <= LogLevel.INFO) {
+		flushDedupe();
+		console.log(import_picocolors.default.dim(`  ${message}`));
+	}
+}
+/**
+* Schedule a delayed disconnect message.
+* If reconnection happens before the delay, the message is cancelled.
+*/
+function scheduleDisconnectMessage(callback) {
+	if (disconnectTimer) clearTimeout(disconnectTimer);
+	hadRecentDisconnect = true;
+	isShowingDisconnect = false;
+	disconnectTimer = setTimeout(() => {
+		isShowingDisconnect = true;
+		callback();
+		disconnectTimer = null;
+	}, DISCONNECT_DELAY_MS);
+}
+/**
+* Cancel pending disconnect message (called on reconnect)
+*/
+function cancelDisconnectMessage() {
+	if (disconnectTimer) {
+		clearTimeout(disconnectTimer);
+		disconnectTimer = null;
+	}
+}
+/**
+* Check if we showed a disconnect message (need to show reconnect)
+*/
+function didShowDisconnect() {
+	return isShowingDisconnect;
+}
+/**
+* Check if we recently saw a disconnect (even if the message was suppressed)
+*/
+function wasRecentlyDisconnected() {
+	return hadRecentDisconnect;
+}
+/**
+* Reset disconnect state after successful reconnect
+*/
+function resetDisconnectState() {
+	isShowingDisconnect = false;
+	hadRecentDisconnect = false;
 }
 
 //#endregion
 //#region src/helpers/connection.ts
 /**
 * Initializes a WebSocket server and returns a connection interface
+* Returns a Promise that resolves when the server is ready, or rejects on startup errors
 */
 function initConnection(port) {
-	const wss = new WebSocketServer({ port });
-	const handlers = {};
-	info(`WebSocket server listening on port ${port}`);
-	wss.on("connection", (ws) => {
-		info("Client connected");
-		ws.on("message", (data) => {
-			try {
-				const message = JSON.parse(data.toString());
-				if (message.type === "handshake") handlers.onHandshake?.(ws, message);
-				else handlers.onMessage?.(message);
-			} catch (err) {
-				error("Failed to parse message:", err);
+	return new Promise((resolve, reject) => {
+		const wss = new WebSocketServer({ port });
+		const handlers = {};
+		let connectionId = 0;
+		let isReady = false;
+		wss.on("error", (err) => {
+			if (!isReady) {
+				if (err.code === "EADDRINUSE") {
+					error(`Port ${port} is already in use.`);
+					error(`This usually means another instance of Code Link is already running.`);
+					error(``);
+					error(`To fix this:`);
+					error(`  1. Close any other terminal running Code Link for this project`);
+					error(`  2. Or run: lsof -i :${port} | grep LISTEN`);
+					error(`     Then kill the process: kill -9 <PID>`);
+					reject(new Error(`Port ${port} is already in use`));
+				} else {
+					error(`Failed to start WebSocket server: ${err.message}`);
+					reject(err);
+				}
+				return;
 			}
+			error(`WebSocket server error: ${err.message}`);
 		});
-		ws.on("close", () => {
-			info("Client disconnected");
-			handlers.onDisconnect?.();
-		});
-		ws.on("error", (err) => {
-			error("WebSocket error:", err);
+		wss.on("listening", () => {
+			isReady = true;
+			debug(`WebSocket server listening on port ${port}`);
+			wss.on("connection", (ws) => {
+				const connId = ++connectionId;
+				debug(`Client connected (conn ${connId})`);
+				ws.on("message", (data) => {
+					try {
+						const message = JSON.parse(data.toString());
+						if (message.type === "handshake") {
+							debug(`Received handshake (conn ${connId})`);
+							handlers.onHandshake?.(ws, message);
+						} else handlers.onMessage?.(message);
+					} catch (err) {
+						error(`Failed to parse message:`, err);
+					}
+				});
+				ws.on("close", (code, reason) => {
+					debug(`Client disconnected (code: ${code}, reason: ${reason?.toString() || "none"})`);
+					handlers.onDisconnect?.();
+				});
+				ws.on("error", (err) => {
+					error(`WebSocket error:`, err);
+				});
+			});
+			resolve({
+				on(event, handler) {
+					if (event === "handshake") handlers.onHandshake = handler;
+					else if (event === "message") handlers.onMessage = handler;
+					else if (event === "disconnect") handlers.onDisconnect = handler;
+					else if (event === "error") handlers.onError = handler;
+				},
+				close() {
+					wss.close();
+				}
+			});
 		});
 	});
-	return {
-		on(event, handler) {
-			if (event === "handshake") handlers.onHandshake = handler;
-			else if (event === "message") handlers.onMessage = handler;
-			else if (event === "disconnect") handlers.onDisconnect = handler;
-			else if (event === "error") handlers.onError = handler;
-		},
-		close() {
-			wss.close();
-		}
-	};
+}
+/**
+* WebSocket readyState constants for reference
+*/
+const READY_STATE = {
+	CONNECTING: 0,
+	OPEN: 1,
+	CLOSING: 2,
+	CLOSED: 3
+};
+function readyStateToString(state) {
+	switch (state) {
+		case 0: return "CONNECTING";
+		case 1: return "OPEN";
+		case 2: return "CLOSING";
+		case 3: return "CLOSED";
+		default: return `UNKNOWN(${state})`;
+	}
 }
 /**
 * Sends a message to a connected socket
+* Returns false if the socket is not open (instead of throwing)
 */
 function sendMessage(socket, message) {
-	return new Promise((resolve, reject) => {
+	return new Promise((resolve) => {
+		if (socket.readyState !== READY_STATE.OPEN) {
+			const stateStr = readyStateToString(socket.readyState);
+			debug(`Cannot send ${message.type}: socket is ${stateStr}`);
+			resolve(false);
+			return;
+		}
 		socket.send(JSON.stringify(message), (err) => {
-			if (err) reject(err);
-			else resolve();
+			if (err) {
+				debug(`Send error for ${message.type}: ${err.message}`);
+				resolve(false);
+			} else resolve(true);
 		});
 	});
 }
 
+//#endregion
+//#region ../shared/dist/hash.js
+/**
+* Base58 alphabet (no 0/O/I/l to avoid confusion)
+*/
+const BASE58 = "123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz";
+/**
+* Derive a short, deterministic hash from the full Framer project hash.
+* Uses a simple numeric hash encoded in base58 for compactness.
+* Idempotent: if input is already the target length, returns it unchanged.
+*/
+function shortProjectHash(fullHash, length = 8) {
+	if (fullHash.length === length) return fullHash;
+	let h1 = 0;
+	let h2 = 0;
+	for (let i = 0; i < fullHash.length; i++) {
+		const char = fullHash.charCodeAt(i);
+		h1 = Math.imul(h1 ^ char, 2246822507);
+		h2 = Math.imul(h2 ^ char, 3266489909);
+	}
+	h1 ^= h2 >>> 16;
+	h2 ^= h1 >>> 13;
+	let result = "";
+	const combined = [Math.abs(h1), Math.abs(h2)];
+	for (const num of combined) {
+		let n = num >>> 0;
+		while (n > 0 && result.length < length) {
+			result += BASE58[n % 58];
+			n = Math.floor(n / 58);
+		}
+	}
+	while (result.length < length) result += BASE58[0];
+	return result.slice(0, length);
+}
+
+//#endregion
+//#region ../shared/dist/ports.js
+/**
+* Generate a deterministic port number from a project hash (full or short).
+* Port range: 3847-4096 (250 possible ports)
+* Must match between CLI and plugin.
+*
+* Internally normalizes to the short id so both full and short inputs yield the same port.
+*/
+function getPortFromHash(projectHash) {
+	const shortId = shortProjectHash(projectHash);
+	let hash = 0;
+	for (let i = 0; i < shortId.length; i++) {
+		const char = shortId.charCodeAt(i);
+		hash = (hash << 5) - hash + char;
+		hash = hash & hash;
+	}
+	const portOffset = Math.abs(hash) % 250;
+	return 3847 + portOffset;
+}
+
 //#endregion
 //#region ../shared/dist/paths.js
 /**
@@ -195,6 +547,16 @@ function sanitizeFilePath(input, capitalizeReactComponent = true) {
 function isSupportedExtension$1(filePath) {
 	return /\.(tsx?|jsx?|json)$/i.test(filePath);
 }
+/**
+* Pluralize a word based on count
+* @example pluralize(1, "file") => "1 file"
+* @example pluralize(3, "file") => "3 files"
+* @example pluralize(0, "conflict") => "0 conflicts"
+*/
+function pluralize(count, singular, plural) {
+	const word = count === 1 ? singular : plural ?? `${singular}s`;
+	return `${count} ${word}`;
+}
 
 //#endregion
 //#region src/utils/paths.ts
@@ -240,7 +602,7 @@ function initWatcher(filesDir) {
 		persistent: true,
 		ignoreInitial: false
 	});
-	info(`Watching directory: ${filesDir}`);
+	debug(`Watching directory: ${filesDir}`);
 	const emitEvent = async (kind, absolutePath) => {
 		if (!isSupportedExtension$1(absolutePath)) return;
 		const rawRelativePath = normalizePath(getRelativePath(filesDir, absolutePath));
@@ -252,10 +614,10 @@ function initWatcher(filesDir) {
 			try {
 				await fs.mkdir(path.dirname(newAbsolutePath), { recursive: true });
 				await fs.rename(absolutePath, newAbsolutePath);
-				info(`Renamed ${rawRelativePath} -> ${relativePath} to match Framer rules`);
+				debug(`Renamed ${rawRelativePath} -> ${relativePath}`);
 				effectiveAbsolutePath = newAbsolutePath;
 			} catch (err) {
-				warn(`Failed to rename ${rawRelativePath} to ${relativePath}, syncing with original name`, err);
+				warn(`Failed to rename ${rawRelativePath}`, err);
 			}
 		}
 		let content;
@@ -366,6 +728,10 @@ const SUPPORTED_EXTENSIONS = [
 ];
 const DEFAULT_EXTENSION = ".tsx";
 const DEFAULT_REMOTE_DRIFT_MS = 2e3;
+/** Normalize file name for case-insensitive comparison (macOS/Windows compat) */
+function normalizeForComparison(fileName) {
+	return fileName.toLowerCase();
+}
 /**
 * Lists all supported files in the files directory
 */
@@ -409,19 +775,34 @@ async function detectConflicts(remoteFiles, filesDir, options = {}) {
 	const detect = options.detectConflicts ?? true;
 	const preferRemote = options.preferRemote ?? false;
 	const persistedState = options.persistedState;
+	const getPersistedState = (fileName) => persistedState?.get(normalizeForComparison(fileName)) ?? persistedState?.get(fileName);
 	debug(`Detecting conflicts for ${remoteFiles.length} remote files`);
 	const localFiles = await listFiles(filesDir);
-	const localFileMap = new Map(localFiles.map((f) => [f.name, f]));
+	const localFileMap = new Map(localFiles.map((f) => [normalizeForComparison(f.name), f]));
+	const remoteFileMap = new Map(remoteFiles.map((f) => {
+		const normalized = resolveRemoteReference(filesDir, f.name);
+		return [normalizeForComparison(normalized.relativePath), f];
+	}));
 	const processedFiles = /* @__PURE__ */ new Set();
 	for (const remote of remoteFiles) {
 		const normalized = resolveRemoteReference(filesDir, remote.name);
-		const local = localFileMap.get(normalized.relativePath);
-		processedFiles.add(normalized.relativePath);
-		const persisted = persistedState?.get(normalized.relativePath);
+		const normalizedKey = normalizeForComparison(normalized.relativePath);
+		const local = localFileMap.get(normalizedKey);
+		processedFiles.add(normalizedKey);
+		const persisted = getPersistedState(normalized.relativePath);
 		const localHash = local ? hashFileContent(local.content) : null;
 		const localMatchesPersisted = !!persisted && !!local && localHash === persisted.contentHash;
 		if (!local) {
-			writes.push({
+			if (persisted) {
+				debug(`Conflict: ${normalized.relativePath} deleted locally while offline`);
+				conflicts.push({
+					fileName: normalized.relativePath,
+					localContent: null,
+					remoteContent: remote.content,
+					remoteModifiedAt: remote.modifiedAt,
+					lastSyncedAt: persisted?.timestamp
+				});
+			} else writes.push({
 				name: normalized.relativePath,
 				content: remote.content,
 				modifiedAt: remote.modifiedAt
@@ -448,11 +829,32 @@ async function detectConflicts(remoteFiles, filesDir, options = {}) {
 			localClean
 		});
 	}
-	for (const local of localFiles) if (!processedFiles.has(local.name)) localOnly.push({
-		name: local.name,
-		content: local.content,
-		modifiedAt: local.modifiedAt
-	});
+	for (const local of localFiles) {
+		const localKey = normalizeForComparison(local.name);
+		if (!processedFiles.has(localKey)) {
+			const persisted = getPersistedState(local.name);
+			if (persisted) {
+				debug(`Conflict: ${local.name} deleted in Framer while offline`);
+				conflicts.push({
+					fileName: local.name,
+					localContent: local.content,
+					remoteContent: null,
+					localModifiedAt: local.modifiedAt,
+					lastSyncedAt: persisted?.timestamp
+				});
+			} else localOnly.push({
+				name: local.name,
+				content: local.content,
+				modifiedAt: local.modifiedAt
+			});
+		}
+	}
+	if (persistedState) for (const [fileName] of persistedState) {
+		const normalizedKey = normalizeForComparison(fileName);
+		const inLocal = localFileMap.has(normalizedKey);
+		const inRemote = remoteFileMap.has(normalizedKey);
+		if (!inLocal && !inRemote) debug(`[AUTO-RESOLVE] ${fileName}: deleted on both sides, no conflict`);
+	}
 	return {
 		conflicts,
 		writes,
@@ -468,30 +870,30 @@ function autoResolveConflicts(conflicts, versions, options = {}) {
 	for (const conflict of conflicts) {
 		const latestRemoteVersionMs = versionMap.get(conflict.fileName);
 		const lastSyncedAt = conflict.lastSyncedAt;
-		info(`[AUTO-RESOLVE] Checking ${conflict.fileName}...`);
+		debug(`Auto-resolve checking ${conflict.fileName}`);
 		if (!latestRemoteVersionMs) {
-			info(`-> No remote version data, keeping conflict`);
+			debug(`  No remote version data, keeping conflict`);
 			remainingConflicts.push(conflict);
 			continue;
 		}
 		if (!lastSyncedAt) {
-			info(`-> No last sync timestamp, keeping conflict`);
+			debug(`  No last sync timestamp, keeping conflict`);
 			remainingConflicts.push(conflict);
 			continue;
 		}
-		info(`-> Latest remote: ${new Date(latestRemoteVersionMs).toISOString()} (${latestRemoteVersionMs})`);
-		info(`-> Last synced: ${new Date(lastSyncedAt).toISOString()} (${lastSyncedAt})`);
+		debug(`  Remote: ${new Date(latestRemoteVersionMs).toISOString()}`);
+		debug(`  Synced: ${new Date(lastSyncedAt).toISOString()}`);
 		const remoteUnchanged = latestRemoteVersionMs <= lastSyncedAt + remoteDriftMs;
 		const localClean = conflict.localClean === true;
 		if (remoteUnchanged && !localClean) {
-			info(`  -> Remote unchanged, local changed. Auto-applying LOCAL.`);
+			debug(`  Remote unchanged, local changed -> LOCAL`);
 			autoResolvedLocal.push(conflict);
 		} else if (localClean && !remoteUnchanged) {
-			info(`  -> Local unchanged, remote changed. Auto-applying REMOTE.`);
+			debug(`  Local unchanged, remote changed -> REMOTE`);
 			autoResolvedRemote.push(conflict);
-		} else if (remoteUnchanged && localClean) info(`  -> Both unchanged. Skipping (no conflict).`);
+		} else if (remoteUnchanged && localClean) debug(`  Both unchanged, skipping`);
 		else {
-			info(`  -> Both sides changed. Real conflict.`);
+			debug(`  Both changed, real conflict`);
 			remainingConflicts.push(conflict);
 		}
 	}
@@ -506,7 +908,7 @@ function autoResolveConflicts(conflicts, versions, options = {}) {
 * CRITICAL: Update hashTracker BEFORE writing to disk
 */
 async function writeRemoteFiles(files, filesDir, hashTracker, installer) {
-	info(`Writing ${files.length} remote files`);
+	debug(`Writing ${files.length} remote files`);
 	for (const file of files) try {
 		const normalized = resolveRemoteReference(filesDir, file.name);
 		const fullPath = normalized.absolutePath;
@@ -528,12 +930,12 @@ async function deleteLocalFile(fileName, filesDir, hashTracker) {
 		hashTracker.markDelete(normalized.relativePath);
 		await fs.unlink(normalized.absolutePath);
 		hashTracker.forget(normalized.relativePath);
-		info(`Deleted file: ${normalized.relativePath}`);
+		debug(`Deleted file: ${normalized.relativePath}`);
 	} catch (err) {
 		const nodeError = err;
 		if (nodeError?.code === "ENOENT") {
 			hashTracker.forget(normalized.relativePath);
-			info(`File already deleted: ${normalized.relativePath}`);
+			debug(`File already deleted: ${normalized.relativePath}`);
 			return;
 		}
 		hashTracker.clearDelete(normalized.relativePath);
@@ -673,13 +1075,13 @@ var Installer = class {
 					} catch {}
 					if (pkgMatch && !seenPackages.has(pkgMatch[1])) {
 						seenPackages.add(pkgMatch[1]);
-						info(`📦 Types: ${pkgMatch[1]}`);
+						debug(`📦 Types: ${pkgMatch[1]}`);
 					}
 					await this.writeTypeFile(receivedPath, code);
 				}
 			}
 		});
-		info("Type installer initialized");
+		debug("Type installer initialized");
 	}
 	/**
 	* Ensure the project scaffolding exists (tsconfig, declarations, etc.)
@@ -727,7 +1129,7 @@ var Installer = class {
 		const hash = imports.map((imp) => imp.name).sort().join(",");
 		if (this.processedImports.has(hash)) return;
 		this.processedImports.add(hash);
-		info(`Processing imports for ${fileName} (${imports.length} packages)`);
+		debug(`Processing imports for ${fileName} (${imports.length} packages)`);
 		try {
 			await this.ata(content);
 		} catch (err) {
@@ -822,7 +1224,7 @@ var Installer = class {
 				include: ["files/**/*", "framer-modules.d.ts"]
 			};
 			await fs.writeFile(tsconfigPath, JSON.stringify(config, null, 2));
-			info("Created tsconfig.json");
+			debug("Created tsconfig.json");
 		}
 	}
 	async ensurePrettierConfig() {
@@ -837,7 +1239,7 @@ var Installer = class {
 				trailingComma: "es5"
 			};
 			await fs.writeFile(prettierPath, JSON.stringify(config, null, 2));
-			info("Created .prettierrc");
+			debug("Created .prettierrc");
 		}
 	}
 	async ensureFramerDeclarations() {
@@ -854,7 +1256,7 @@ declare module "https://framerusercontent.com/*"
 declare module "*.json"
 `;
 			await fs.writeFile(declarationsPath, declarations);
-			info("Created framer-modules.d.ts");
+			debug("Created framer-modules.d.ts");
 		}
 	}
 	async ensurePackageJson() {
@@ -870,7 +1272,7 @@ declare module "*.json"
 				description: "Framer files synced with framer-code-link"
 			};
 			await fs.writeFile(packagePath, JSON.stringify(pkg, null, 2));
-			info("Created package.json");
+			debug("Created package.json");
 		}
 	}
 	async ensureReact18Types() {
@@ -882,9 +1284,9 @@ declare module "*.json"
 			"jsx-runtime.d.ts",
 			"jsx-dev-runtime.d.ts"
 		];
-		if (await this.hasTypePackage(reactTypesDir, REACT_TYPES_VERSION, reactFiles)) info("📦 React types (from cache)");
+		if (await this.hasTypePackage(reactTypesDir, REACT_TYPES_VERSION, reactFiles)) debug("📦 React types (from cache)");
 		else {
-			info("Downloading React 18 types for Framer compatibility...");
+			debug("Downloading React 18 types...");
 			await this.downloadTypePackage("@types/react", REACT_TYPES_VERSION, reactTypesDir, reactFiles);
 		}
 		const reactDomDir = path.join(this.projectDir, "node_modules/@types/react-dom");
@@ -893,7 +1295,7 @@ declare module "*.json"
 			"index.d.ts",
 			"client.d.ts"
 		];
-		if (await this.hasTypePackage(reactDomDir, REACT_DOM_TYPES_VERSION, reactDomFiles)) info("📦 React DOM types (from cache)");
+		if (await this.hasTypePackage(reactDomDir, REACT_DOM_TYPES_VERSION, reactDomFiles)) debug("📦 React DOM types (from cache)");
 		else await this.downloadTypePackage("@types/react-dom", REACT_DOM_TYPES_VERSION, reactDomDir, reactDomFiles);
 	}
 	async hasTypePackage(destinationDir, version, files) {
@@ -958,7 +1360,7 @@ async function fetchWithRetry(url, init, retries = MAX_FETCH_RETRIES) {
 }
 
 //#endregion
-//#region src/utils/hashing.ts
+//#region src/utils/hash-tracker.ts
 /**
 * Creates a hash tracker instance for echo prevention
 */
@@ -1000,26 +1402,11 @@ function createHashTracker() {
 	};
 }
 /**
-* Computes a hash of file content for comparison
+* Computes a SHA256 hash of file content for comparison
 */
 function hashContent(content) {
 	return createHash("sha256").update(content).digest("hex");
 }
-/**
-* Generate a deterministic port number from a project hash
-* Port range: 3847-4096 (250 possible ports)
-* Uses simple hash to match client-side implementation
-*/
-function getPortFromHash(projectHash) {
-	let hash = 0;
-	for (let i = 0; i < projectHash.length; i++) {
-		const char = projectHash.charCodeAt(i);
-		hash = (hash << 5) - hash + char;
-		hash = hash & hash;
-	}
-	const portOffset = Math.abs(hash) % 250;
-	return 3847 + portOffset;
-}
 
 //#endregion
 //#region src/utils/file-metadata-cache.ts
@@ -1126,7 +1513,7 @@ var UserActionCoordinator = class {
 				return await confirmationPromise;
 			} catch (err) {
 				if (err instanceof PluginDisconnectedError) {
-					info(`[USER-ACTION] Plugin disconnected while waiting for delete confirmation: ${fileName}`);
+					debug(`Plugin disconnected while waiting for delete confirmation: ${fileName}`);
 					return false;
 				}
 				throw err;
@@ -1158,7 +1545,7 @@ var UserActionCoordinator = class {
 			return new Map(results);
 		} catch (err) {
 			if (err instanceof PluginDisconnectedError) {
-				info("[USER-ACTION] Plugin disconnected while awaiting conflict decisions");
+				debug("Plugin disconnected while awaiting conflict decisions");
 				return /* @__PURE__ */ new Map();
 			}
 			throw err;
@@ -1173,7 +1560,7 @@ var UserActionCoordinator = class {
 				resolve,
 				reject
 			});
-			info(`[USER-ACTION] Awaiting ${description}: ${actionId}`);
+			debug(`Awaiting ${description}: ${actionId}`);
 		});
 	}
 	/**
@@ -1182,12 +1569,12 @@ var UserActionCoordinator = class {
 	handleConfirmation(actionId, value) {
 		const pending = this.pendingActions.get(actionId);
 		if (!pending) {
-			warn(`[USER-ACTION] Unexpected confirmation for ${actionId}`);
+			debug(`Unexpected confirmation for ${actionId}`);
 			return false;
 		}
 		this.pendingActions.delete(actionId);
 		pending.resolve(value);
-		info(`[USER-ACTION] Confirmed: ${actionId}`);
+		debug(`Confirmed: ${actionId}`);
 		return true;
 	}
 	/**
@@ -1196,7 +1583,7 @@ var UserActionCoordinator = class {
 	cleanup() {
 		for (const [actionId, pending] of this.pendingActions.entries()) {
 			pending.reject(new PluginDisconnectedError());
-			warn(`[USER-ACTION] Cancelled pending action: ${actionId}`);
+			debug(`Cancelled pending action: ${actionId}`);
 		}
 		this.pendingActions.clear();
 	}
@@ -1243,6 +1630,19 @@ function validateIncomingChange(file, fileMeta, currentMode) {
 function toPackageName(name) {
 	return name.toLowerCase().replace(/[^a-z0-9-]/g, "-").replace(/^-+|-+$/g, "").replace(/-+/g, "-");
 }
+function toDirName(name) {
+	return name.replace(/[^a-zA-Z0-9- ]/g, "-").replace(/^[-\s]+|[-\s]+$/g, "").replace(/-+/g, "-");
+}
+async function getProjectHashFromCwd() {
+	try {
+		const packageJsonPath = path.join(process.cwd(), "package.json");
+		const content = await fs.readFile(packageJsonPath, "utf-8");
+		const pkg = JSON.parse(content);
+		return pkg.shortProjectHash ?? null;
+	} catch {
+		return null;
+	}
+}
 async function findOrCreateProjectDir(projectHash, projectName, explicitDir) {
 	if (explicitDir) {
 		const resolved = path.resolve(explicitDir);
@@ -1253,14 +1653,17 @@ async function findOrCreateProjectDir(projectHash, projectName, explicitDir) {
 	const existing = await findExistingProjectDir(cwd, projectHash);
 	if (existing) return existing;
 	if (!projectName) throw new Error("Project name is required when creating a new workspace. Pass --name <project name>.");
-	const dirName = toPackageName(projectName);
-	const projectDir = path.join(cwd, dirName || projectHash.slice(0, 6));
+	const dirName = toDirName(projectName);
+	const pkgName = toPackageName(projectName);
+	const shortId = shortProjectHash(projectHash);
+	const projectDir = path.join(cwd, dirName || shortId);
 	await fs.mkdir(path.join(projectDir, "files"), { recursive: true });
 	const pkg = {
-		name: dirName || projectHash,
+		name: pkgName || shortId,
 		version: "1.0.0",
 		private: true,
-		framerProjectId: projectHash,
+		shortProjectHash: shortId,
+		framerProjectHash: projectHash,
 		framerProjectName: projectName
 	};
 	await fs.writeFile(path.join(projectDir, "package.json"), JSON.stringify(pkg, null, 2));
@@ -1281,7 +1684,8 @@ async function matchesProject(packageJsonPath, projectHash) {
 	try {
 		const content = await fs.readFile(packageJsonPath, "utf-8");
 		const pkg = JSON.parse(content);
-		return pkg.framerProjectId === projectHash;
+		const inputShort = shortProjectHash(projectHash);
+		return pkg.shortProjectHash === inputShort;
 	} catch {
 		return false;
 	}
@@ -1329,7 +1733,7 @@ function transition(state, event) {
 			};
 		}
 		case "FILE_SYNCED": {
-			effects.push(log("info", `Remote confirmed sync: ${event.fileName}`), {
+			effects.push(log("debug", `Remote confirmed sync: ${event.fileName}`), {
 				type: "UPDATE_FILE_METADATA",
 				fileName: event.fileName,
 				remoteModifiedAt: event.remoteModifiedAt
@@ -1340,7 +1744,7 @@ function transition(state, event) {
 			};
 		}
 		case "DISCONNECT": {
-			effects.push({ type: "PERSIST_STATE" }, log("info", "Disconnected, persisting state"));
+			effects.push({ type: "PERSIST_STATE" }, log("debug", "Disconnected, persisting state"));
 			if (state.mode === "conflict_resolution") {
 				const { pendingConflicts: _discarded,...rest } = state;
 				return {
@@ -1369,7 +1773,7 @@ function transition(state, event) {
 					effects
 				};
 			}
-			effects.push(log("info", "Plugin requested file list"), { type: "LIST_LOCAL_FILES" });
+			effects.push(log("debug", "Plugin requested file list"), { type: "LIST_LOCAL_FILES" });
 			return {
 				state,
 				effects
@@ -1383,7 +1787,7 @@ function transition(state, event) {
 					effects
 				};
 			}
-			effects.push(log("info", `Received file list: ${event.files.length} files`));
+			effects.push(log("debug", `Received file list: ${event.files.length} files`));
 			effects.push({
 				type: "DETECT_CONFLICTS",
 				remoteFiles: event.files
@@ -1406,12 +1810,13 @@ function transition(state, event) {
 				};
 			}
 			const { conflicts, safeWrites, localOnly } = event;
-			if (safeWrites.length > 0) effects.push(log("info", `Applying ${safeWrites.length} safe writes`), {
+			if (safeWrites.length > 0) effects.push(log("debug", `Applying ${safeWrites.length} safe writes`), {
 				type: "WRITE_FILES",
-				files: safeWrites
+				files: safeWrites,
+				silent: true
 			});
 			if (localOnly.length > 0) {
-				effects.push(log("info", `Uploading ${localOnly.length} local-only files`));
+				effects.push(log("debug", `Uploading ${localOnly.length} local-only files`));
 				for (const file of localOnly) effects.push({
 					type: "SEND_MESSAGE",
 					payload: {
@@ -1422,7 +1827,7 @@ function transition(state, event) {
 				});
 			}
 			if (conflicts.length > 0) {
-				effects.push(log("warn", `${conflicts.length} conflicts require version verification`), log("info", "[CONFLICTS] Requesting remote version data from plugin..."), {
+				effects.push(log("debug", `${pluralize(conflicts.length, "conflict")} require version check`), {
 					type: "REQUEST_CONFLICT_VERSIONS",
 					conflicts
 				});
@@ -1435,7 +1840,17 @@ function transition(state, event) {
 					effects
 				};
 			}
-			effects.push(log("info", "Initial sync complete, entering watch mode"), { type: "PERSIST_STATE" });
+			const totalSynced = safeWrites.length + localOnly.length;
+			const remoteTotal = state.queuedDiffs.length;
+			const totalCount = remoteTotal + localOnly.length;
+			const updatedCount = safeWrites.length + localOnly.length;
+			const unchangedCount = Math.max(0, remoteTotal - safeWrites.length);
+			effects.push({ type: "PERSIST_STATE" }, {
+				type: "SYNC_COMPLETE",
+				totalCount,
+				updatedCount,
+				unchangedCount
+			});
 			return {
 				state: {
 					...state,
@@ -1464,7 +1879,7 @@ function transition(state, event) {
 					effects
 				};
 			}
-			effects.push(log("info", `Applying remote change: ${event.file.name}`), {
+			effects.push(log("debug", `Applying remote change: ${event.file.name}`), {
 				type: "WRITE_FILES",
 				files: [event.file]
 			});
@@ -1481,7 +1896,7 @@ function transition(state, event) {
 					effects
 				};
 			}
-			effects.push(log("info", `Remote delete applied: ${event.fileName}`), {
+			effects.push(log("debug", `Remote delete applied: ${event.fileName}`), {
 				type: "DELETE_LOCAL_FILES",
 				names: [event.fileName]
 			}, { type: "PERSIST_STATE" });
@@ -1491,7 +1906,7 @@ function transition(state, event) {
 			};
 		}
 		case "REMOTE_DELETE_CONFIRMED": {
-			effects.push(log("info", `Delete confirmed: ${event.fileName}`), {
+			effects.push(log("debug", `Delete confirmed: ${event.fileName}`), {
 				type: "DELETE_LOCAL_FILES",
 				names: [event.fileName]
 			}, { type: "PERSIST_STATE" });
@@ -1501,7 +1916,7 @@ function transition(state, event) {
 			};
 		}
 		case "REMOTE_DELETE_CANCELLED": {
-			effects.push(log("info", `Delete cancelled: ${event.fileName}`));
+			effects.push(log("debug", `Delete cancelled: ${event.fileName}`));
 			effects.push({
 				type: "WRITE_FILES",
 				files: [{
@@ -1524,18 +1939,28 @@ function transition(state, event) {
 				};
 			}
 			if (event.resolution === "remote") {
-				const remoteFiles = state.pendingConflicts.map((c) => ({
-					name: c.fileName,
-					content: c.remoteContent,
-					modifiedAt: c.remoteModifiedAt
-				}));
-				effects.push(log("info", `Applying ${remoteFiles.length} remote versions`), {
+				for (const conflict of state.pendingConflicts) if (conflict.remoteContent === null) effects.push({
+					type: "DELETE_LOCAL_FILES",
+					names: [conflict.fileName]
+				});
+				else effects.push({
 					type: "WRITE_FILES",
-					files: remoteFiles
+					files: [{
+						name: conflict.fileName,
+						content: conflict.remoteContent,
+						modifiedAt: conflict.remoteModifiedAt
+					}]
 				});
+				effects.push(log("debug", `Applied ${state.pendingConflicts.length} remote versions`));
 			} else {
-				effects.push(log("info", `Applying ${state.pendingConflicts.length} local versions`));
-				for (const conflict of state.pendingConflicts) effects.push({
+				for (const conflict of state.pendingConflicts) if (conflict.localContent === null) effects.push({
+					type: "SEND_MESSAGE",
+					payload: {
+						type: "file-delete",
+						fileNames: [conflict.fileName]
+					}
+				});
+				else effects.push({
 					type: "SEND_MESSAGE",
 					payload: {
 						type: "file-change",
@@ -1543,8 +1968,14 @@ function transition(state, event) {
 						content: conflict.localContent
 					}
 				});
+				effects.push(log("debug", `Applied ${state.pendingConflicts.length} local versions`));
 			}
-			effects.push(log("info", "All conflicts resolved, entering watch mode"), { type: "PERSIST_STATE" });
+			effects.push({ type: "PERSIST_STATE" }, {
+				type: "SYNC_COMPLETE",
+				totalCount: state.pendingConflicts.length,
+				updatedCount: state.pendingConflicts.length,
+				unchangedCount: 0
+			});
 			const { pendingConflicts: _discarded,...rest } = state;
 			return {
 				state: {
@@ -1573,7 +2004,6 @@ function transition(state, event) {
 							effects
 						};
 					}
-					effects.push(log("info", `Local change detected: ${relativePath}`));
 					effects.push({
 						type: "SEND_LOCAL_CHANGE",
 						fileName: relativePath,
@@ -1582,7 +2012,7 @@ function transition(state, event) {
 					break;
 				}
 				case "delete": {
-					effects.push(log("info", `Local delete detected: ${relativePath}`), {
+					effects.push(log("debug", `Local delete detected: ${relativePath}`), {
 						type: "REQUEST_LOCAL_DELETE_DECISION",
 						fileName: relativePath,
 						requireConfirmation: true
@@ -1605,23 +2035,37 @@ function transition(state, event) {
 			}
 			const { autoResolvedLocal, autoResolvedRemote, remainingConflicts } = autoResolveConflicts(state.pendingConflicts, event.versions);
 			if (autoResolvedLocal.length > 0) {
-				effects.push(log("info", `[AUTO-RESOLVE] Applying ${autoResolvedLocal.length} local changes`));
-				for (const conflict of autoResolvedLocal) effects.push({
+				effects.push(log("debug", `Auto-resolved ${autoResolvedLocal.length} local changes`));
+				for (const conflict of autoResolvedLocal) if (conflict.localContent === null) effects.push({
+					type: "SEND_MESSAGE",
+					payload: {
+						type: "file-delete",
+						fileNames: [conflict.fileName]
+					}
+				});
+				else effects.push({
 					type: "SEND_LOCAL_CHANGE",
 					fileName: conflict.fileName,
 					content: conflict.localContent
 				});
 			}
-			if (autoResolvedRemote.length > 0) effects.push(log("info", `[AUTO-RESOLVE] Applying ${autoResolvedRemote.length} remote changes`), {
-				type: "WRITE_FILES",
-				files: autoResolvedRemote.map((conflict) => ({
-					name: conflict.fileName,
-					content: conflict.remoteContent,
-					modifiedAt: conflict.remoteModifiedAt ?? Date.now()
-				}))
-			});
+			if (autoResolvedRemote.length > 0) {
+				effects.push(log("debug", `Auto-resolved ${autoResolvedRemote.length} remote changes`));
+				for (const conflict of autoResolvedRemote) if (conflict.remoteContent === null) effects.push({
+					type: "DELETE_LOCAL_FILES",
+					names: [conflict.fileName]
+				});
+				else effects.push({
+					type: "WRITE_FILES",
+					files: [{
+						name: conflict.fileName,
+						content: conflict.remoteContent,
+						modifiedAt: conflict.remoteModifiedAt ?? Date.now()
+					}]
+				});
+			}
 			if (remainingConflicts.length > 0) {
-				effects.push(log("warn", `[AUTO-RESOLVE] ${remainingConflicts.length} conflicts require user resolution`), {
+				effects.push(log("warn", `${pluralize(remainingConflicts.length, "conflict")} require resolution`), {
 					type: "REQUEST_CONFLICT_DECISIONS",
 					conflicts: remainingConflicts
 				});
@@ -1633,7 +2077,13 @@ function transition(state, event) {
 					effects
 				};
 			}
-			effects.push(log("info", "[AUTO-RESOLVE] All conflicts auto-resolved!"), { type: "PERSIST_STATE" });
+			const resolvedCount = autoResolvedLocal.length + autoResolvedRemote.length;
+			effects.push({ type: "PERSIST_STATE" }, {
+				type: "SYNC_COMPLETE",
+				totalCount: resolvedCount,
+				updatedCount: resolvedCount,
+				unchangedCount: 0
+			});
 			const { pendingConflicts: _discarded,...rest } = state;
 			return {
 				state: {
@@ -1665,7 +2115,7 @@ async function executeEffect(effect, context) {
 				const projectName = config.explicitName ?? effect.projectInfo.projectName;
 				config.projectDir = await findOrCreateProjectDir(config.projectHash, projectName, config.explicitDir);
 				config.filesDir = `${config.projectDir}/files`;
-				info(`Files directory: ${config.filesDir}`);
+				debug(`Files directory: ${config.filesDir}`);
 				await fs.mkdir(config.filesDir, { recursive: true });
 			}
 			return [];
@@ -1673,7 +2123,7 @@ async function executeEffect(effect, context) {
 		case "LOAD_PERSISTED_STATE": {
 			if (config.projectDir) {
 				await fileMetadataCache.initialize(config.projectDir);
-				info(`Loaded persisted metadata for ${fileMetadataCache.size()} files`);
+				debug(`Loaded persisted metadata for ${fileMetadataCache.size()} files`);
 			}
 			return [];
 		}
@@ -1697,13 +2147,17 @@ async function executeEffect(effect, context) {
 			}];
 		}
 		case "SEND_MESSAGE": {
-			if (syncState.socket) await sendMessage(syncState.socket, effect.payload);
+			if (syncState.socket) {
+				const sent = await sendMessage(syncState.socket, effect.payload);
+				if (!sent) warn(`Failed to send message: ${effect.payload.type}`);
+			} else warn(`No socket available to send: ${effect.payload.type}`);
 			return [];
 		}
 		case "WRITE_FILES": {
 			if (config.filesDir) {
 				await writeRemoteFiles(effect.files, config.filesDir, hashTracker, installer ?? void 0);
 				for (const file of effect.files) {
+					if (!effect.silent) fileDown(file.name);
 					const remoteTimestamp = file.modifiedAt ?? Date.now();
 					fileMetadataCache.recordRemoteWrite(file.name, file.content, remoteTimestamp);
 				}
@@ -1713,6 +2167,7 @@ async function executeEffect(effect, context) {
 		case "DELETE_LOCAL_FILES": {
 			if (config.filesDir) for (const fileName of effect.names) {
 				await deleteLocalFile(fileName, config.filesDir, hashTracker);
+				fileDelete(fileName);
 				fileMetadataCache.recordDelete(fileName);
 			}
 			return [];
@@ -1734,7 +2189,7 @@ async function executeEffect(effect, context) {
 					lastSyncedAt: conflict.lastSyncedAt ?? persisted?.timestamp
 				};
 			});
-			info(`[CONFLICTS] Requesting remote version data for ${versionRequests.length} file(s)`);
+			debug(`Requesting remote version data for ${pluralize(versionRequests.length, "file")}`);
 			await sendMessage(syncState.socket, {
 				type: "conflict-version-request",
 				conflicts: versionRequests
@@ -1759,17 +2214,27 @@ async function executeEffect(effect, context) {
 			return [];
 		}
 		case "SEND_LOCAL_CHANGE": {
+			const contentHash = hashFileContent(effect.content);
+			const metadata = fileMetadataCache.get(effect.fileName);
+			if (metadata?.lastSyncedHash === contentHash) {
+				debug(`Skipping local change for ${effect.fileName}: matches last synced content`);
+				return [];
+			}
 			if (hashTracker.shouldSkip(effect.fileName, effect.content)) return [];
+			debug(`Local change detected: ${effect.fileName}`);
 			try {
-				if (syncState.socket) await sendMessage(syncState.socket, {
-					type: "file-change",
-					fileName: effect.fileName,
-					content: effect.content
-				});
+				if (syncState.socket) {
+					await sendMessage(syncState.socket, {
+						type: "file-change",
+						fileName: effect.fileName,
+						content: effect.content
+					});
+					fileUp(effect.fileName);
+				}
 				hashTracker.remember(effect.fileName, effect.content);
 				if (installer) installer.process(effect.fileName, effect.content);
 			} catch (err) {
-				console.warn(`Failed to push change for ${effect.fileName}, will re-sync on next diff:`, err);
+				warn(`Failed to push ${effect.fileName}`);
 			}
 			return [];
 		}
@@ -1801,6 +2266,20 @@ async function executeEffect(effect, context) {
 			await fileMetadataCache.flush();
 			return [];
 		}
+		case "SYNC_COMPLETE": {
+			const wasDisconnected = wasRecentlyDisconnected();
+			if (wasDisconnected) {
+				if (didShowDisconnect()) {
+					success(`Reconnected, synced ${effect.totalCount} files (${effect.updatedCount} updated, ${effect.unchangedCount} unchanged)`);
+					status("Watching for changes...");
+				}
+				resetDisconnectState();
+				return [];
+			}
+			success(`Synced ${effect.totalCount} files (${effect.updatedCount} updated, ${effect.unchangedCount} unchanged)`);
+			status("Watching for changes...");
+			return [];
+		}
 		case "LOG": {
 			const logFn = effect.level === "info" ? info : effect.level === "warn" ? warn : debug;
 			logFn(effect.message);
@@ -1812,9 +2291,7 @@ async function executeEffect(effect, context) {
 * Starts the sync controller with the given configuration
 */
 async function start(config) {
-	info("🚀 Starting Code Link");
-	info(`Project: ${config.projectHash}`);
-	info(`Port: ${config.port} (auto-selected from project hash)`);
+	status("Waiting for Plugin connection...");
 	const hashTracker = createHashTracker();
 	const fileMetadataCache = new FileMetadataCache();
 	let installer = null;
@@ -1827,9 +2304,14 @@ async function start(config) {
 	};
 	const userActions = new UserActionCoordinator();
 	async function processEvent(event) {
+		const socketState = syncState.socket?.readyState;
+		debug(`[STATE] Processing event: ${event.type} (mode: ${syncState.mode}, socket: ${socketState ?? "none"})`);
 		const result = transition(syncState, event);
 		syncState = result.state;
+		if (result.effects.length > 0) debug(`[STATE] Event produced ${result.effects.length} effects: ${result.effects.map((e) => e.type).join(", ")}`);
 		for (const effect of result.effects) {
+			const currentSocketState = syncState.socket?.readyState;
+			if (currentSocketState !== void 0 && currentSocketState !== 1) debug(`[STATE] Socket not open (state: ${currentSocketState}) before executing ${effect.type}`);
 			const followUpEvents = await executeEffect(effect, {
 				config,
 				hashTracker,
@@ -1841,12 +2323,13 @@ async function start(config) {
 			for (const followUpEvent of followUpEvents) await processEvent(followUpEvent);
 		}
 	}
-	const connection = initConnection(config.port);
+	const connection = await initConnection(config.port);
 	connection.on("handshake", async (client, message) => {
-		info("Received handshake from plugin");
-		info(`Project: ${message.projectName} (${message.projectId})`);
-		if (message.projectId !== config.projectHash) {
-			warn(`Project ID mismatch: expected ${config.projectHash}, got ${message.projectId}`);
+		debug(`Received handshake: ${message.projectName} (${message.projectId})`);
+		const expectedShort = shortProjectHash(config.projectHash);
+		const receivedShort = shortProjectHash(message.projectId);
+		if (receivedShort !== expectedShort) {
+			warn(`Project ID mismatch: expected ${expectedShort}, got ${receivedShort}`);
 			client.close();
 			return;
 		}
@@ -1863,7 +2346,9 @@ async function start(config) {
 			await installer.initialize();
 			startWatcher();
 		}
-		success("Handshake successful - connection established");
+		cancelDisconnectMessage();
+		const wasDisconnected = wasRecentlyDisconnected();
+		if (!wasDisconnected && !didShowDisconnect()) success(`Connected to ${message.projectName}`);
 	});
 	async function handleMessage(message) {
 		if (!config.projectDir || !installer) {
@@ -1875,12 +2360,15 @@ async function start(config) {
 			case "request-files":
 				event = { type: "REQUEST_FILES" };
 				break;
-			case "file-list":
+			case "file-list": {
+				const totalSize = message.files.reduce((sum, f) => sum + (f.content?.length ?? 0), 0);
+				debug(`Received file list: ${message.files.length} files (${(totalSize / 1024).toFixed(1)}KB)`);
 				event = {
 					type: "FILE_LIST",
 					files: message.files
 				};
 				break;
+			}
 			case "file-change":
 				event = {
 					type: "FILE_CHANGE",
@@ -1955,10 +2443,11 @@ async function start(config) {
 		}
 	});
 	connection.on("disconnect", async () => {
-		warn("Plugin disconnected");
+		scheduleDisconnectMessage(() => {
+			status("Disconnected, waiting to reconnect...");
+		});
 		await processEvent({ type: "DISCONNECT" });
 		userActions.cleanup();
-		info("Will perform full diff on reconnect");
 	});
 	connection.on("error", (err) => {
 		error("Error on WebSocket connection:", err);
@@ -1974,10 +2463,9 @@ async function start(config) {
 			});
 		});
 	};
-	info("✓ Controller initialized and ready");
-	info(`Waiting for plugin connection on port ${config.port}...`);
 	process.on("SIGINT", async () => {
-		info("\nShutting down gracefully...");
+		console.log();
+		status("Shutting down...");
 		if (watcher) await watcher.close();
 		connection.close();
 		process.exit(0);
@@ -1994,7 +2482,16 @@ program.exitOverride((err) => {
 	}
 	throw err;
 });
-program.name("code-link").description("Sync Framer code components to your local filesystem").version("0.1.0").argument("<projectHash>", "Framer Project ID Hash").option("-n, --name <name>", "Project name (optional)").option("-d, --dir <directory>", "Explicit project directory").option("-v, --verbose", "Enable verbose logging").option("--log-level <level>", "Set log level (debug, info, warn, error)").option("--dangerously-auto-delete", "Automatically delete remote files without confirmation").action(async (projectHash, options) => {
+program.name("code-link").description("Sync Framer code components to your local filesystem").version("0.1.0").argument("[projectHash]", "Framer Project ID Hash (auto-detected from package.json if omitted)").option("-n, --name <name>", "Project name (optional)").option("-d, --dir <directory>", "Explicit project directory").option("-v, --verbose", "Enable verbose logging").option("--log-level <level>", "Set log level (debug, info, warn, error)").option("--dangerously-auto-delete", "Automatically delete remote files without confirmation").action(async (projectHash, options) => {
+	if (!projectHash) {
+		const detected = await getProjectHashFromCwd();
+		if (detected) projectHash = detected;
+		else {
+			console.error("No project ID provided and no framerProjectId found in package.json.");
+			console.error("Either run this command from a project directory or copy the command from the Code Link Plugin.");
+			process.exit(1);
+		}
+	}
 	const isDev = process.env.NODE_ENV === "development";
 	if (options.logLevel) {
 		const levelMap = {
@@ -2007,6 +2504,7 @@ program.name("code-link").description("Sync Framer code components to your local
 		if (level !== void 0) setLogLevel(level);
 	} else if (options.verbose || isDev) setLogLevel(LogLevel.DEBUG);
 	const port = getPortFromHash(projectHash);
+	banner("0.1.3", port);
 	const config = {
 		port,
 		projectHash,
@@ -2016,8 +2514,12 @@ program.name("code-link").description("Sync Framer code components to your local
 		explicitDir: options.dir,
 		explicitName: options.name
 	};
-	if (config.dangerouslyAutoDelete) info("⚠️  Auto-delete mode enabled - files will be deleted without confirmation");
-	await start(config);
+	if (config.dangerouslyAutoDelete) warn("Auto-delete mode enabled - files will be deleted without confirmation");
+	try {
+		await start(config);
+	} catch (err) {
+		process.exit(1);
+	}
 });
 program.parse();