framer-code-link 0.1.3 → 0.2.0

package/src/types.ts

@@ -2,7 +2,6 @@
  * Core types for the controller-centric CLI architecture
  */
 
-import type { WebSocket } from "ws"
 import type { PendingDelete } from "@code-link/shared"
 
 // Configuration
@@ -30,10 +29,14 @@ export interface LocalFile {
 }
 
 // Conflict detection
+// Deletions are represented by null content
+// For AI: Do NOT add remoteDeletes/localDeletes arrays - use localContent/remoteContent === null
 export interface Conflict {
   fileName: string
-  localContent: string
-  remoteContent: string
+  /** null means the file was deleted locally */
+  localContent: string | null
+  /** null means the file was deleted in Framer */
+  remoteContent: string | null
   localModifiedAt?: number
   remoteModifiedAt?: number
   lastSyncedAt?: number // Timestamp of last successful sync from CLI perspective
@@ -48,6 +51,7 @@ export interface ConflictResolution {
   conflicts: Conflict[]
   writes: FileInfo[]
   localOnly: FileInfo[]
+  unchanged: FileInfo[]
 }
 
 // Watcher events
@@ -105,3 +109,4 @@ export type OutgoingMessage =
       type: "conflict-version-request"
       conflicts: ConflictVersionRequest[]
     }
+  | { type: "sync-complete" }

package/src/utils/{hashing.ts → hash-tracker.ts}

@@ -72,24 +72,8 @@ export function createHashTracker(): HashTracker {
 }
 
 /**
- * Computes a hash of file content for comparison
+ * Computes a SHA256 hash of file content for comparison
  */
 function hashContent(content: string): string {
   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
- */
-export function getPortFromHash(projectHash: string): number {
-  let hash = 0
-  for (let i = 0; i < projectHash.length; i++) {
-    const char = projectHash.charCodeAt(i)
-    hash = (hash << 5) - hash + char
-    hash = hash & hash // Convert to 32bit integer
-  }
-  const portOffset = Math.abs(hash) % 250
-  return 3847 + portOffset
-}

package/src/utils/logging.ts

@@ -1,7 +1,16 @@
 /**
- * Logging utilities for consistent output
+ * Logging utilities for consistent, clean CLI output
+ *
+ * Features:
+ * - Log levels (DEBUG, INFO, WARN, ERROR)
+ * - Message deduplication with count suffix (x2), (x3)
+ * - Reconnect cycle suppression (collapses rapid disconnect/reconnect spam)
+ * - Clean prefixes (no [INFO] clutter at default level)
+ * - Colored startup banner
  */
 
+import pc from "picocolors"
+
 export enum LogLevel {
   DEBUG = 0,
   INFO = 1,
@@ -11,37 +20,216 @@ export enum LogLevel {
 
 let currentLevel = LogLevel.INFO
 
+// Deduplication state
+let lastMessage = ""
+let lastMessageCount = 0
+const CLEAR_LINE = "\u001b[2K"
+const MOVE_CURSOR_UP = "\u001b[1A"
+
+// Redraw the previous line with the updated message/count.
+function rewriteLastLine(text: string): void {
+  if (process.stdout.isTTY) {
+    process.stdout.write(`${MOVE_CURSOR_UP}\r${CLEAR_LINE}${text}\n`)
+  } else {
+    // Fallback for non-TTY (e.g., piping output) – just emit the line.
+    process.stdout.write(`${text}\n`)
+  }
+}
+
+// Reconnect suppression state
+let disconnectTimer: ReturnType<typeof setTimeout> | null = null
+let isShowingDisconnect = false
+let hadRecentDisconnect = false
+// Only show disconnect if down for 4+ seconds
+// Allows for swtiching between Canvas and Code Editor
+const DISCONNECT_DELAY_MS = 4000
+
 export function setLogLevel(level: LogLevel): void {
   currentLevel = level
 }
 
+export function getLogLevel(): LogLevel {
+  return currentLevel
+}
+
+function dedupeMessage(message: string, count: number): void {
+  rewriteLastLine(`${message} ${pc.dim(`(x${count})`)}`)
+}
+
+/**
+ * Flush any pending deduplicated message
+ */
+function flushDedupe(): void {
+  if (lastMessageCount > 1) {
+    dedupeMessage(lastMessage, lastMessageCount)
+  }
+  lastMessage = ""
+  lastMessageCount = 0
+}
+
+/**
+ * Log with deduplication - repeated messages within window get counted
+ */
+function logWithDedupe(message: string, writer: () => void): void {
+  if (message === lastMessage) {
+    // Same message - increment count regardless of gap
+    lastMessageCount++
+    // Overwrite previous line (move cursor up, clear, rewrite)
+    dedupeMessage(message, lastMessageCount)
+    return
+  }
+
+  lastMessage = message
+  lastMessageCount = 1
+  writer()
+}
+
+/**
+ * Print the startup banner - one colored line
+ */
+export function banner(version: string, port: number): void {
+  console.log()
+  let message = `  ${pc.cyan(pc.bold("⚡ Code Link"))} ${pc.dim(`v${version}`)}`
+  if (currentLevel <= LogLevel.DEBUG) {
+    message += `  ${pc.dim("Port")} ${pc.yellow(port)}`
+  }
+  console.log(message)
+  console.log()
+}
+
+/**
+ * Debug-level logging - only shown with --verbose flag
+ */
 export function debug(message: string, ...args: unknown[]): void {
   if (currentLevel <= LogLevel.DEBUG) {
-    console.debug(`[DEBUG] ${message}`, ...args)
+    console.debug(pc.dim(`[DEBUG] ${message}`), ...args)
   }
 }
 
+/**
+ * Info-level logging - shown by default, no prefix
+ */
 export function info(message: string, ...args: unknown[]): void {
   if (currentLevel <= LogLevel.INFO) {
-    console.info(`[INFO] ${message}`, ...args)
+    const formatted = args.length > 0 ? `${message} ${args.join(" ")}` : message
+    logWithDedupe(formatted, () => console.log(formatted))
   }
 }
 
+/**
+ * Warning-level logging
+ */
 export function warn(message: string, ...args: unknown[]): void {
   if (currentLevel <= LogLevel.WARN) {
-    console.warn(`[WARN] ${message}`, ...args)
+    if (message === lastMessage) return // Skip exact duplicates silently
+    flushDedupe()
+    lastMessage = message
+    lastMessageCount = 1
+    console.warn(pc.yellow(`⚠ ${message}`), ...args)
   }
 }
 
+/**
+ * Error-level logging
+ */
 export function error(message: string, ...args: unknown[]): void {
   if (currentLevel <= LogLevel.ERROR) {
-    console.error(`[ERROR] ${message}`, ...args)
+    flushDedupe()
+    console.error(pc.red(`✗ ${message}`), ...args)
   }
 }
 
+/**
+ * Success message with checkmark
+ */
 export function success(message: string, ...args: unknown[]): void {
   if (currentLevel <= LogLevel.INFO) {
-    console.log(`✓ ${message}`, ...args)
+    flushDedupe()
+    console.log(pc.green(`✓ ${message}`), ...args)
   }
 }
 
+/**
+ * File sync indicators
+ */
+export function fileDown(fileName: string): void {
+  if (currentLevel <= LogLevel.INFO) {
+    const msg = `  ${pc.blue("↓")} ${fileName}`
+    logWithDedupe(msg, () => console.log(msg))
+  }
+}
+
+export function fileUp(fileName: string): void {
+  if (currentLevel <= LogLevel.INFO) {
+    const msg = `  ${pc.green("↑")} ${fileName}`
+    logWithDedupe(msg, () => console.log(msg))
+  }
+}
+
+export function fileDelete(fileName: string): void {
+  if (currentLevel <= LogLevel.INFO) {
+    const msg = `  ${pc.red("×")} ${fileName}`
+    logWithDedupe(msg, () => console.log(msg))
+  }
+}
+
+/**
+ * Status message (dimmed, for "watching for changes..." etc)
+ */
+export function status(message: string): void {
+  if (currentLevel <= LogLevel.INFO) {
+    flushDedupe()
+    console.log(pc.dim(`  ${message}`))
+  }
+}
+
+/**
+ * Schedule a delayed disconnect message.
+ * If reconnection happens before the delay, the message is cancelled.
+ */
+export function scheduleDisconnectMessage(callback: () => void): void {
+  // Clear any existing timer
+  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)
+ */
+export function cancelDisconnectMessage(): void {
+  if (disconnectTimer) {
+    clearTimeout(disconnectTimer)
+    disconnectTimer = null
+  }
+}
+
+/**
+ * Check if we showed a disconnect message (need to show reconnect)
+ */
+export function didShowDisconnect(): boolean {
+  return isShowingDisconnect
+}
+
+/**
+ * Check if we recently saw a disconnect (even if the message was suppressed)
+ */
+export function wasRecentlyDisconnected(): boolean {
+  return hadRecentDisconnect
+}
+
+/**
+ * Reset disconnect state after successful reconnect
+ */
+export function resetDisconnectState(): void {
+  isShowingDisconnect = false
+  hadRecentDisconnect = false
+}

package/src/utils/project.ts

@@ -1,8 +1,10 @@
 import fs from "fs/promises"
 import path from "path"
+import { shortProjectHash } from "@code-link/shared"
 
 interface PackageJson {
-  framerProjectId?: string
+  shortProjectHash?: string // derived short id (8 chars base58)
+  framerProjectHash?: string // full 64-char hex hash from Framer API
   framerProjectName?: string
   name?: string
   version?: string
@@ -19,8 +21,8 @@ export function toPackageName(name: string): string {
 
 export function toDirName(name: string): string {
   return name
-    .replace(/[^a-zA-Z0-9-]/g, "-")
-    .replace(/^-+|-+$/g, "")
+    .replace(/[^a-zA-Z0-9- ]/g, "-")
+    .replace(/^[-\s]+|[-\s]+$/g, "")
     .replace(/-+/g, "-")
 }
 
@@ -29,7 +31,8 @@ export async function getProjectHashFromCwd(): Promise<string | null> {
     const packageJsonPath = path.join(process.cwd(), "package.json")
     const content = await fs.readFile(packageJsonPath, "utf-8")
     const pkg = JSON.parse(content) as PackageJson
-    return pkg.framerProjectId ?? null
+    // Return short id for port derivation
+    return pkg.shortProjectHash ?? null
   } catch {
     return null
   }
@@ -60,14 +63,16 @@ export async function findOrCreateProjectDir(
 
   const dirName = toDirName(projectName)
   const pkgName = toPackageName(projectName)
-  const projectDir = path.join(cwd, dirName || projectHash.slice(0, 6))
+  const shortId = shortProjectHash(projectHash)
+  const projectDir = path.join(cwd, dirName || shortId)
 
   await fs.mkdir(path.join(projectDir, "files"), { recursive: true })
   const pkg: PackageJson = {
-    name: pkgName || projectHash,
+    name: pkgName || shortId,
     version: "1.0.0",
     private: true,
-    framerProjectId: projectHash,
+    shortProjectHash: shortId,
+    framerProjectHash: projectHash,
     framerProjectName: projectName,
   }
   await fs.writeFile(
@@ -106,7 +111,9 @@ async function matchesProject(
   try {
     const content = await fs.readFile(packageJsonPath, "utf-8")
     const pkg = JSON.parse(content) as PackageJson
-    return pkg.framerProjectId === projectHash
+    const inputShort = shortProjectHash(projectHash)
+    // Match on short id (handles both full hash input and short id input)
+    return pkg.shortProjectHash === inputShort
   } catch {
     return false
   }

package/dist/project-DhpsFg77.js

@@ -1,53 +0,0 @@
-import fs from "fs/promises";
-import path from "path";
-
-//#region src/utils/project.ts
-function toPackageName(name) {
-	return name.toLowerCase().replace(/[^a-z0-9-]/g, "-").replace(/^-+|-+$/g, "").replace(/-+/g, "-");
-}
-async function findOrCreateProjectDir(projectHash, projectName, explicitDir) {
-	if (explicitDir) {
-		const resolved = path.resolve(explicitDir);
-		await fs.mkdir(path.join(resolved, "files"), { recursive: true });
-		return resolved;
-	}
-	const cwd = process.cwd();
-	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));
-	await fs.mkdir(path.join(projectDir, "files"), { recursive: true });
-	const pkg = {
-		name: dirName || projectHash,
-		version: "1.0.0",
-		private: true,
-		framerProjectId: projectHash,
-		framerProjectName: projectName
-	};
-	await fs.writeFile(path.join(projectDir, "package.json"), JSON.stringify(pkg, null, 2));
-	return projectDir;
-}
-async function findExistingProjectDir(baseDir, projectHash) {
-	const candidate = path.join(baseDir, "package.json");
-	if (await matchesProject(candidate, projectHash)) return baseDir;
-	const entries = await fs.readdir(baseDir, { withFileTypes: true });
-	for (const entry of entries) {
-		if (!entry.isDirectory()) continue;
-		const dir = path.join(baseDir, entry.name);
-		if (await matchesProject(path.join(dir, "package.json"), projectHash)) return dir;
-	}
-	return null;
-}
-async function matchesProject(packageJsonPath, projectHash) {
-	try {
-		const content = await fs.readFile(packageJsonPath, "utf-8");
-		const pkg = JSON.parse(content);
-		return pkg.framerProjectId === projectHash;
-	} catch {
-		return false;
-	}
-}
-
-//#endregion
-export { findOrCreateProjectDir };