ccdock 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ccdock",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A TUI sidebar to orchestrate VS Code windows and track Claude Code agents.",
   "type": "module",
   "bin": {

package/src/sidebar.ts

@@ -357,6 +357,13 @@ async function handleDeleteConfirmInput(state: SidebarState, data: Buffer): Prom
 	}
 }
 
+function getManagedEditorTitles(sessions: SidebarState["sessions"]): string[] {
+	return sessions
+		.filter((s) => s.editorState !== "closed")
+		.map((s) => s.worktreePath.split("/").pop() ?? "")
+		.filter((t) => t.length > 0);
+}
+
 export async function runSidebar(): Promise<void> {
 	const config = loadConfig();
 	const state = createInitialState();
@@ -374,8 +381,7 @@ export async function runSidebar(): Promise<void> {
 		state.rows = process.stdout.rows ?? 24;
 		state.cols = process.stdout.columns ?? 80;
 		render(state);
-		// Reposition all VS Code windows to fill remaining space
-		await repositionAllEditors();
+		await repositionAllEditors(getManagedEditorTitles(state.sessions));
 	});
 
 	// Animation timer (200ms) — only repaint when there's something animating
@@ -516,7 +522,7 @@ export async function runSidebar(): Promise<void> {
 				break;
 
 			case "realign":
-				await repositionAllEditors();
+				await repositionAllEditors(getManagedEditorTitles(state.sessions));
 				break;
 
 			case "mouse_click": {

package/src/tui/ansi.ts

@@ -44,7 +44,8 @@ export const COLORS = {
 	editorFocused: fg256(255), // bright white — focused editor
 	editorOpen: fg256(117), // cyan — open but not focused
 	editorClosed: fg256(240), // dark gray — closed
-	borderFocused: fg256(255), // bright white border
+	borderFocused: fg256(255), // bright white border — VS Code window focused
+	borderSelected: fg256(75), // soft blue border — J/K cursor selection
 	borderOpen: fg256(248), // light gray border
 	borderClosed: fg256(235), // very dark border
 } as const;

package/src/tui/render.ts

@@ -35,11 +35,9 @@ function padRight(str: string, len: number): string {
 	return str + " ".repeat(len - visible);
 }
 
-function renderDeleteConfirm(deleteConfirm: DeleteConfirm, cols: number): string[] {
+function renderDeleteConfirm(deleteConfirm: DeleteConfirm): string[] {
 	const lines: string[] = [];
-	const width = Math.max(cols - 6, 16);
 
-	lines.push(`  ${COLORS.border}${BOX.horizontal.repeat(width)}${RESET}`);
 	lines.push(`  ${BOLD}${COLORS.error} Delete session?${RESET}`);
 	lines.push("");
 
@@ -58,7 +56,6 @@ function renderDeleteConfirm(deleteConfirm: DeleteConfirm, cols: number): string
 
 	lines.push("");
 	lines.push(`  ${COLORS.muted}Enter: confirm | Esc: cancel${RESET}`);
-	lines.push(`  ${COLORS.border}${BOX.horizontal.repeat(width)}${RESET}`);
 
 	return lines;
 }
@@ -74,8 +71,6 @@ function renderCard(
 ): string[] {
 	const lines: string[] = [];
 	const width = Math.max(cols - 2, 20);
-	const bg = isSelected ? COLORS.bgSelected : "";
-	const resetBg = isSelected ? RESET : "";
 
 	// Colors based on editor state
 	// Focused: white border, normal title
@@ -85,11 +80,14 @@ function renderCard(
 	const isFocused = editorState === "focused";
 	const isClosed = editorState === "closed";
 	const isLaunching = editorState === "launching";
+	// Border color: VS Code focused > J/K selected > closed/open
 	const borderColor = isFocused
 		? COLORS.borderFocused
-		: isClosed
-			? COLORS.borderClosed
-			: COLORS.border;
+		: isSelected
+			? COLORS.borderSelected
+			: isClosed
+				? COLORS.borderClosed
+				: COLORS.border;
 	const titleColor = isClosed ? COLORS.editorClosed : COLORS.title;
 	const detailColor = isClosed ? COLORS.editorClosed : COLORS.subtitle;
 	const dimAll = isClosed ? DIM : "";
@@ -113,7 +111,7 @@ function renderCard(
 	const titleText = `${titleColor}${icon} ${session.repoName}:${session.branch}${RESET}`;
 	const title = `${sessionNum}${openDot}${titleText}`;
 	const titleTruncated = truncate(title, width - 4);
-	const titleLine = `${dimAll}${borderColor}${BOX.vertical}${RESET} ${bg}${padRight(titleTruncated, width - 4)}${resetBg}${RESET} ${dimAll}${borderColor}${BOX.vertical}${RESET}`;
+	const titleLine = `${dimAll}${borderColor}${BOX.vertical}${RESET} ${padRight(titleTruncated, width - 4)}${RESET} ${dimAll}${borderColor}${BOX.vertical}${RESET}`;
 	lines.push(titleLine);
 
 	if (!compact) {
@@ -121,13 +119,13 @@ function renderCard(
 		const shortPath = shortenHome(session.worktreePath);
 		const pathTruncated = truncate(shortPath, width - 4);
 		const pathColor = editorState === "closed" ? COLORS.editorClosed : COLORS.subtitle;
-		const pathLine = `${dimAll}${borderColor}${BOX.vertical}${RESET} ${bg}${pathColor}${padRight(pathTruncated, width - 4)}${resetBg}${RESET} ${dimAll}${borderColor}${BOX.vertical}${RESET}`;
+		const pathLine = `${dimAll}${borderColor}${BOX.vertical}${RESET} ${pathColor}${padRight(pathTruncated, width - 4)}${RESET} ${dimAll}${borderColor}${BOX.vertical}${RESET}`;
 		lines.push(pathLine);
 
 		// Agent status lines
 		if (session.agents.length === 0) {
 			const noAgent = `${DIM}no agents${RESET}`;
-			const agentLine = `${dimAll}${borderColor}${BOX.vertical}${RESET} ${bg}${padRight(noAgent, width - 4)}${resetBg}${RESET} ${dimAll}${borderColor}${BOX.vertical}${RESET}`;
+			const agentLine = `${dimAll}${borderColor}${BOX.vertical}${RESET} ${padRight(noAgent, width - 4)}${RESET} ${dimAll}${borderColor}${BOX.vertical}${RESET}`;
 			lines.push(agentLine);
 		} else {
 			for (const agent of session.agents) {
@@ -135,7 +133,7 @@ function renderCard(
 				const sColor = statusColor(agent.status);
 				const statusText = `${sColor}${sIcon} ${agent.status}${RESET}`;
 				const agentInfo = `${statusText} ${detailColor}${agent.agentType}${RESET}`;
-				const agentLine = `${dimAll}${borderColor}${BOX.vertical}${RESET} ${bg}${padRight(agentInfo, width - 4)}${resetBg}${RESET} ${dimAll}${borderColor}${BOX.vertical}${RESET}`;
+				const agentLine = `${dimAll}${borderColor}${BOX.vertical}${RESET} ${padRight(agentInfo, width - 4)}${RESET} ${dimAll}${borderColor}${BOX.vertical}${RESET}`;
 				lines.push(agentLine);
 
 				// Show latest tool activity
@@ -144,7 +142,7 @@ function renderCard(
 						? `${detailColor}${agent.toolName}${RESET} ${detailColor}${agent.toolDetail}${RESET}`
 						: `${detailColor}${agent.toolName}${RESET}`;
 					const detailTruncated = truncate(`  ${detail}`, width - 4);
-					const detailLine = `${dimAll}${borderColor}${BOX.vertical}${RESET} ${bg}${padRight(detailTruncated, width - 4)}${resetBg}${RESET} ${dimAll}${borderColor}${BOX.vertical}${RESET}`;
+					const detailLine = `${dimAll}${borderColor}${BOX.vertical}${RESET} ${padRight(detailTruncated, width - 4)}${RESET} ${dimAll}${borderColor}${BOX.vertical}${RESET}`;
 					lines.push(detailLine);
 				}
 			}
@@ -157,15 +155,15 @@ function renderCard(
 						.map((a) => `${statusColor(a.status)}${statusIcon(a.status, animFrame)}${RESET}`)
 						.join(" ")
 				: `${DIM}no agents${RESET}`;
-		const compactLine = `${dimAll}${borderColor}${BOX.vertical}${RESET} ${bg}${padRight(agentSummary, width - 4)}${resetBg}${RESET} ${dimAll}${borderColor}${BOX.vertical}${RESET}`;
+		const compactLine = `${dimAll}${borderColor}${BOX.vertical}${RESET} ${padRight(agentSummary, width - 4)}${RESET} ${dimAll}${borderColor}${BOX.vertical}${RESET}`;
 		lines.push(compactLine);
 	}
 
 	// Delete confirmation inline
 	if (isSelected && deleteConfirm && deleteConfirm.sessionId === session.id) {
-		const confirmLines = renderDeleteConfirm(deleteConfirm, cols);
+		const confirmLines = renderDeleteConfirm(deleteConfirm);
 		for (const cl of confirmLines) {
-			const confirmLine = `${borderColor}${BOX.vertical}${RESET} ${padRight(cl, width - 4)} ${borderColor}${BOX.vertical}${RESET}`;
+			const confirmLine = `${dimAll}${borderColor}${BOX.vertical}${RESET} ${padRight(cl, width - 4)}${RESET} ${dimAll}${borderColor}${BOX.vertical}${RESET}`;
 			lines.push(confirmLine);
 		}
 	}

package/src/workspace/window.ts

@@ -20,6 +20,16 @@ async function runOsascript(script: string): Promise<string> {
 	return out.trim();
 }
 
+async function runJXA(script: string): Promise<string> {
+	const proc = Bun.spawn(["osascript", "-l", "JavaScript", "-e", script], {
+		stdout: "pipe",
+		stderr: "pipe",
+	});
+	const out = await new Response(proc.stdout).text();
+	await proc.exited;
+	return out.trim();
+}
+
 /**
  * Get the bounds of the sidebar terminal window (the frontmost Ghostty window).
  */
@@ -44,27 +54,63 @@ end tell
 }
 
 /**
- * Get the screen bounds that the sidebar is on.
- * Returns the full screen dimensions for the monitor containing the sidebar.
+ * Get the right edge (x coordinate) of the screen containing the sidebar window.
+ * Uses JXA + NSScreen with proper coordinate conversion for multi-monitor setups.
+ *
+ * Coordinate systems:
+ *   NSScreen: origin at bottom-left of primary display, y increases upward.
+ *             Screens to the left have negative x.
+ *   AppleScript: origin at top-left of primary display, y increases downward.
+ *             x=0 is the left edge of the leftmost monitor.
+ *
+ * Conversions (using primaryH = height of primary NSScreen):
+ *   nsX = asX + nsMinX          (nsMinX = min x across all NSScreens)
+ *   nsY = primaryH - asCenterY  (Y axis is flipped)
  */
-export async function getScreenBounds(): Promise<WindowBounds | null> {
+async function getScreenRightEdge(sidebar: WindowBounds): Promise<number> {
+	// Fallback: typical MacBook Pro screen width from the sidebar's right edge
+	const fallback = 1512;
 	try {
-		const result = await runOsascript(`
-tell application "Finder"
-	set db to bounds of window of desktop
-	return "" & (item 1 of db) & "," & (item 2 of db) & "," & (item 3 of db) & "," & (item 4 of db)
-end tell
+		// Use the window center for a more robust screen hit-test
+		const asCenterX = sidebar.x + sidebar.width / 2;
+		const asCenterY = sidebar.y + sidebar.height / 2;
+		const result = await runJXA(`
+ObjC.import("AppKit");
+var asCenterX = ${asCenterX};
+var asCenterY = ${asCenterY};
+var screens = $.NSScreen.screens;
+var count = screens.count;
+var primaryH = $.NSScreen.mainScreen.frame.size.height;
+// NSScreen always places the primary display at x=0, same as AppleScript.
+// So AS.x == NS.x (no x offset needed).
+// Only Y is flipped: nsY = primaryH - asY.
+var nsX = asCenterX;
+var nsY = primaryH - asCenterY;
+// Find screen whose bounds contain the converted center point
+var found = false;
+var result = 1512;
+for (var i = 0; i < count; i++) {
+    var s = screens.objectAtIndex(i);
+    var left = s.frame.origin.x;
+    var bottom = s.frame.origin.y;
+    var width = s.frame.size.width;
+    var height = s.frame.size.height;
+    if (left <= nsX && nsX < left + width && bottom <= nsY && nsY < bottom + height) {
+        result = Math.round(left + width);
+        found = true;
+        break;
+    }
+}
+if (!found) {
+    var main = $.NSScreen.mainScreen;
+    result = Math.round(main.frame.origin.x + main.frame.size.width);
+}
+result;
 `);
-		const parts = result.split(",").map((s) => Number.parseInt(s.trim(), 10));
-		if (parts.length < 4) return null;
-		return {
-			x: parts[0]!,
-			y: parts[1]!,
-			width: parts[2]! - parts[0]!,
-			height: parts[3]! - parts[1]!,
-		};
+		const value = Number.parseInt(result, 10);
+		return Number.isNaN(value) || value <= 0 ? fallback : value;
 	} catch {
-		return null;
+		return fallback;
 	}
 }
 
@@ -80,10 +126,8 @@ export async function positionEditorWindow(
 	// Calculate editor position: right of sidebar, same height
 	const editorX = sidebarBounds.x + sidebarBounds.width + 4; // 4px gap
 	const editorY = sidebarBounds.y;
-	// Editor width: fill remaining screen width (estimate with a large number)
-	// We'll get the actual screen width for precision
-	const screen = await getScreenBounds();
-	const screenRight = screen ? screen.x + screen.width : 5120; // fallback
+	// Editor width: fill remaining space on the screen containing the sidebar
+	const screenRight = await getScreenRightEdge(sidebarBounds);
 	const editorWidth = screenRight - editorX;
 	const editorHeight = sidebarBounds.height;
 
@@ -292,27 +336,43 @@ end tell
 }
 
 /**
- * Reposition ALL VS Code windows to fill the area right of the sidebar.
+ * Reposition managed VS Code windows to fill the area right of the sidebar.
+ * Only windows whose title contains one of the managed titles are repositioned.
  * Called when the sidebar terminal is resized.
  */
-export async function repositionAllEditors(): Promise<void> {
-	if (!(await isEditorRunning())) return;
-	const [sidebar, screen] = await Promise.all([getSidebarBounds(), getScreenBounds()]);
-	if (!sidebar) return;
+export async function repositionAllEditors(managedTitles: string[]): Promise<void> {
+	if (managedTitles.length === 0) return;
+	const [running, sidebar] = await Promise.all([isEditorRunning(), getSidebarBounds()]);
+	if (!running || !sidebar) return;
 
 	try {
 		const editorX = sidebar.x + sidebar.width + 4;
 		const editorY = sidebar.y;
-		const screenRight = screen ? screen.x + screen.width : 5120;
+		const screenRight = await getScreenRightEdge(sidebar);
 		const editorWidth = screenRight - editorX;
 		const editorHeight = sidebar.height;
 
+		const titlesAppleScript = managedTitles
+			.map((t) => `"${t.replace(/"/g, '\\"')}"`)
+			.join(", ");
+
 		await runOsascript(`
 tell application "System Events"
 	tell process "Code"
+		set managedTitles to {${titlesAppleScript}}
 		repeat with w in every window
-			set position of w to {${editorX}, ${editorY}}
-			set size of w to {${editorWidth}, ${editorHeight}}
+			set wName to name of w
+			set isManaged to false
+			repeat with t in managedTitles
+				if wName contains t then
+					set isManaged to true
+					exit repeat
+				end if
+			end repeat
+			if isManaged then
+				set position of w to {${editorX}, ${editorY}}
+				set size of w to {${editorWidth}, ${editorHeight}}
+			end if
 		end repeat
 	end tell
 end tell