Release v0.0.29

## What's New

### Features
- **Windows Support (Experimental)** — 1Code now runs on Windows! Big thanks to [@jesus-mgtc](https://github.com/jesus-mgtc) and [@evgyur](https://github.com/evgyur) for their contributions making this possible.

### Improvements & Fixes
- Fixed sidebar loading spinners synchronization
- Fixed token metadata reading from flat structure

Author: serafimcloud

README.md

@@ -6,7 +6,7 @@ Best UI for Claude Code with local and remote agent execution.
 
 By [21st.dev](https://21st.dev) team
 
-> **Note:** Currently tested on macOS and Linux. Windows support is experimental and may have issues.
+> **Platforms:** macOS, Linux, and Windows. Windows support improved thanks to community contributions from [@jesus-mgtc](https://github.com/jesus-mgtc) and [@evgyur](https://github.com/evgyur).
 
 ## Features
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "21st-desktop",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "private": true,
   "description": "1Code - UI for parallel work with AI agents",
   "author": {

src/main/lib/git/worktree.ts

@@ -1,7 +1,7 @@
 import { execFile } from "node:child_process";
 import { randomBytes } from "node:crypto";
 import { mkdir, readFile, stat } from "node:fs/promises";
-import os from "node:os";
+import { homedir } from "node:os";
 import { join } from "node:path";
 import { promisify } from "node:util";
 import simpleGit from "simple-git";
@@ -907,8 +907,7 @@ export async function createWorktreeForChat(
 		const baseBranch = selectedBaseBranch || await getDefaultBranch(projectPath);
 
 		const branch = generateBranchName();
-		// Use os.homedir() for cross-platform compatibility (Windows uses USERPROFILE, not HOME)
-		const worktreesDir = join(os.homedir(), ".21st", "worktrees");
+		const worktreesDir = join(homedir(), ".21st", "worktrees");
 		const worktreePath = join(worktreesDir, projectId, chatId);
 
 		await createWorktree(projectPath, branch, worktreePath, `origin/${baseBranch}`);

src/main/lib/terminal/session.ts

@@ -1,4 +1,6 @@
+import fs from "node:fs"
 import os from "node:os"
+import path from "node:path"
 import * as pty from "node-pty"
 import { buildTerminalEnv, FALLBACK_SHELL, getDefaultShell } from "./env"
 import type { InternalCreateSessionParams, TerminalSession } from "./types"
@@ -16,6 +18,66 @@ function getShellArgs(shell: string): string[] {
 	return []
 }
 
+/**
+ * Validate and resolve cwd path (Windows compatibility)
+ * Falls back to home directory if path doesn't exist
+ */
+function validateAndResolveCwd(cwd: string): string {
+	if (!fs.existsSync(cwd)) {
+		const homeDir = os.homedir()
+		console.warn(`[Terminal] CWD does not exist: ${cwd}, using home directory: ${homeDir}`)
+		return homeDir
+	}
+
+	try {
+		const stat = fs.statSync(cwd)
+		if (!stat.isDirectory()) {
+			const homeDir = os.homedir()
+			console.warn(`[Terminal] CWD is not a directory: ${cwd}, using home directory: ${homeDir}`)
+			return homeDir
+		}
+	} catch {
+		const homeDir = os.homedir()
+		console.warn(`[Terminal] Error checking CWD: ${cwd}, using home directory: ${homeDir}`)
+		return homeDir
+	}
+
+	try {
+		return path.resolve(cwd)
+	} catch {
+		const homeDir = os.homedir()
+		console.warn(`[Terminal] Error resolving CWD: ${cwd}, using home directory: ${homeDir}`)
+		return homeDir
+	}
+}
+
+/**
+ * Resolve shell path for Windows
+ * Tries to find shell in common Windows locations
+ */
+function resolveShellPath(shell: string): string {
+	if (os.platform() !== "win32") return shell
+
+	// If shell already has a path, use it as-is
+	if (shell.includes("\\") || shell.includes("/")) return shell
+
+	// Try common Windows shell locations
+	const commonPaths = [
+		process.env.COMSPEC || "",
+		process.env.SystemRoot ? `${process.env.SystemRoot}\\System32\\WindowsPowerShell\\v1.0\\powershell.exe` : "",
+		process.env.SystemRoot ? `${process.env.SystemRoot}\\System32\\cmd.exe` : "",
+	].filter(Boolean)
+
+	for (const shellPath of commonPaths) {
+		if (fs.existsSync(shellPath)) {
+			return shellPath
+		}
+	}
+
+	// Return as-is, let node-pty handle PATH resolution
+	return shell
+}
+
 function spawnPty(params: {
 	shell: string
 	cols: number
@@ -25,14 +87,29 @@ function spawnPty(params: {
 }): pty.IPty {
 	const { shell, cols, rows, cwd, env } = params
 	const shellArgs = getShellArgs(shell)
+	const resolvedCwd = validateAndResolveCwd(cwd)
+	const resolvedShell = resolveShellPath(shell)
 
-	return pty.spawn(shell, shellArgs, {
-		name: "xterm-256color",
-		cols,
-		rows,
-		cwd,
-		env,
-	})
+	try {
+		return pty.spawn(resolvedShell, shellArgs, {
+			name: "xterm-256color",
+			cols,
+			rows,
+			cwd: resolvedCwd,
+			env,
+		})
+	} catch (error) {
+		console.error(`[Terminal] Failed to spawn PTY with ${resolvedShell}:`, error)
+		// Try with fallback shell
+		console.log(`[Terminal] Retrying with fallback shell: ${FALLBACK_SHELL}`)
+		return pty.spawn(FALLBACK_SHELL, [], {
+			name: "xterm-256color",
+			cols,
+			rows,
+			cwd: resolvedCwd,
+			env,
+		})
+	}
 }
 
 export async function createSession(
@@ -53,7 +130,7 @@ export async function createSession(
 	} = params
 
 	const shell = useFallbackShell ? FALLBACK_SHELL : getDefaultShell()
-	const workingDir = cwd || os.homedir()
+	const workingDir = validateAndResolveCwd(cwd || os.homedir())
 	const terminalCols = cols || DEFAULT_COLS
 	const terminalRows = rows || DEFAULT_ROWS
 

src/main/windows/main.ts

@@ -6,8 +6,10 @@ import {
   app,
   clipboard,
   session,
+  nativeImage,
 } from "electron"
 import { join } from "path"
+import { readFileSync, existsSync, writeFileSync, mkdirSync } from "fs"
 import { createIPCHandler } from "trpc-electron/main"
 import { createAppRouter } from "../lib/trpc/routers"
 import { getAuthManager, handleAuthCode, getBaseUrl } from "../index"
@@ -23,17 +25,92 @@ function registerIpcHandlers(getWindow: () => BrowserWindow | null): void {
   // App info
   ipcMain.handle("app:version", () => app.getVersion())
   ipcMain.handle("app:isPackaged", () => app.isPackaged)
+
+  // Windows: Frame preference persistence
+  ipcMain.handle("window:set-frame-preference", (_event, useNativeFrame: boolean) => {
+    try {
+      const settingsPath = join(app.getPath("userData"), "window-settings.json")
+      const settingsDir = app.getPath("userData")
+      mkdirSync(settingsDir, { recursive: true })
+      writeFileSync(settingsPath, JSON.stringify({ useNativeFrame }, null, 2))
+      return true
+    } catch (error) {
+      console.error("[Main] Failed to save frame preference:", error)
+      return false
+    }
+  })
+
+  // Windows: Get current window frame state
+  ipcMain.handle("window:get-frame-state", () => {
+    if (process.platform !== "win32") return false
+    try {
+      const settingsPath = join(app.getPath("userData"), "window-settings.json")
+      if (existsSync(settingsPath)) {
+        const settings = JSON.parse(readFileSync(settingsPath, "utf-8"))
+        return settings.useNativeFrame === true
+      }
+      return false // Default: frameless
+    } catch {
+      return false
+    }
+  })
+
   // Note: Update checking is now handled by auto-updater module (lib/auto-updater.ts)
   ipcMain.handle("app:set-badge", (_event, count: number | null) => {
+    const win = getWindow()
     if (process.platform === "darwin") {
       app.dock.setBadge(count ? String(count) : "")
+    } else if (process.platform === "win32" && win) {
+      // Windows: Update title with count as fallback
+      if (count !== null && count > 0) {
+        win.setTitle(`1Code (${count})`)
+      } else {
+        win.setTitle("1Code")
+        win.setOverlayIcon(null, "")
+      }
+    }
+  })
+
+  // Windows: Badge overlay icon
+  ipcMain.handle("app:set-badge-icon", (_event, imageData: string | null) => {
+    const win = getWindow()
+    if (process.platform === "win32" && win) {
+      if (imageData) {
+        const image = nativeImage.createFromDataURL(imageData)
+        win.setOverlayIcon(image, "New messages")
+      } else {
+        win.setOverlayIcon(null, "")
+      }
     }
   })
+
   ipcMain.handle(
     "app:show-notification",
     (_event, options: { title: string; body: string }) => {
-      const { Notification } = require("electron")
-      new Notification(options).show()
+      try {
+        const { Notification } = require("electron")
+        const iconPath = join(__dirname, "../../../build/icon.ico")
+        const icon = existsSync(iconPath) ? nativeImage.createFromPath(iconPath) : undefined
+
+        const notification = new Notification({
+          title: options.title,
+          body: options.body,
+          icon,
+          ...(process.platform === "win32" && { silent: false }),
+        })
+
+        notification.show()
+
+        notification.on("click", () => {
+          const win = getWindow()
+          if (win) {
+            if (win.isMinimized()) win.restore()
+            win.focus()
+          }
+        })
+      } catch (error) {
+        console.error("[Main] Failed to show notification:", error)
+      }
     },
   )
 
@@ -229,13 +306,35 @@ export function getWindow(): BrowserWindow | null {
   return currentWindow
 }
 
+/**
+ * Read window frame preference from settings file (Windows only)
+ * Returns true if native frame should be used, false for frameless
+ */
+function getUseNativeFramePreference(): boolean {
+  if (process.platform !== "win32") return false
+
+  try {
+    const settingsPath = join(app.getPath("userData"), "window-settings.json")
+    if (existsSync(settingsPath)) {
+      const settings = JSON.parse(readFileSync(settingsPath, "utf-8"))
+      return settings.useNativeFrame === true
+    }
+    return false // Default: frameless (dark title bar)
+  } catch {
+    return false
+  }
+}
+
 /**
  * Create the main application window
  */
 export function createMainWindow(): BrowserWindow {
   // Register IPC handlers before creating window
   registerIpcHandlers(getWindow)
 
+  // Read Windows frame preference
+  const useNativeFrame = getUseNativeFramePreference()
+
   const window = new BrowserWindow({
     width: 1400,
     height: 900,
@@ -250,6 +349,11 @@ export function createMainWindow(): BrowserWindow {
     titleBarStyle: process.platform === "darwin" ? "hiddenInset" : "default",
     trafficLightPosition:
       process.platform === "darwin" ? { x: 15, y: 12 } : undefined,
+    // Windows: Use native frame or frameless based on user preference
+    ...(process.platform === "win32" && {
+      frame: useNativeFrame,
+      autoHideMenuBar: true,
+    }),
     webPreferences: {
       preload: join(__dirname, "../preload/index.js"),
       nodeIntegration: false,

src/preload/index.ts

@@ -76,6 +76,11 @@ contextBridge.exposeInMainWorld("desktopApi", {
   setTrafficLightVisibility: (visible: boolean) =>
     ipcRenderer.invoke("window:set-traffic-light-visibility", visible),
 
+  // Windows-specific: Frame preference (native vs frameless)
+  setWindowFramePreference: (useNativeFrame: boolean) =>
+    ipcRenderer.invoke("window:set-frame-preference", useNativeFrame),
+  getWindowFrameState: () => ipcRenderer.invoke("window:get-frame-state"),
+
   // Window events
   onFullscreenChange: (callback: (isFullscreen: boolean) => void) => {
     const handler = (_event: unknown, isFullscreen: boolean) => callback(isFullscreen)
@@ -102,6 +107,7 @@ contextBridge.exposeInMainWorld("desktopApi", {
 
   // Native features
   setBadge: (count: number | null) => ipcRenderer.invoke("app:set-badge", count),
+  setBadgeIcon: (imageData: string | null) => ipcRenderer.invoke("app:set-badge-icon", imageData),
   showNotification: (options: { title: string; body: string }) =>
     ipcRenderer.invoke("app:show-notification", options),
   openExternal: (url: string) => ipcRenderer.invoke("shell:open-external", url),
@@ -196,6 +202,9 @@ export interface DesktopApi {
   windowToggleFullscreen: () => Promise<void>
   windowIsFullscreen: () => Promise<boolean>
   setTrafficLightVisibility: (visible: boolean) => Promise<void>
+  // Windows-specific frame preference
+  setWindowFramePreference: (useNativeFrame: boolean) => Promise<boolean>
+  getWindowFrameState: () => Promise<boolean>
   onFullscreenChange: (callback: (isFullscreen: boolean) => void) => () => void
   onFocusChange: (callback: (isFocused: boolean) => void) => () => void
   zoomIn: () => Promise<void>
@@ -205,6 +214,7 @@ export interface DesktopApi {
   toggleDevTools: () => Promise<void>
   setAnalyticsOptOut: (optedOut: boolean) => Promise<void>
   setBadge: (count: number | null) => Promise<void>
+  setBadgeIcon: (imageData: string | null) => Promise<void>
   showNotification: (options: { title: string; body: string }) => Promise<void>
   openExternal: (url: string) => Promise<void>
   getApiBaseUrl: () => Promise<string>

src/renderer/components/ui/icons.tsx

@@ -1363,21 +1363,15 @@ export function LoadingDot({
 }) {
   return (
     <div className={`relative ${className || ""}`}>
-      <style>{`
-        @keyframes spin {
-          from { transform: rotate(0deg); }
-          to { transform: rotate(360deg); }
-        }
-      `}</style>
-      {/* Spinner - visible when loading */}
+      {/* Spinner - visible when loading. Uses global synchronized-spin keyframes from globals.css */}
       <svg
         viewBox="0 0 24 24"
         fill="none"
         className={`absolute inset-0 w-full h-full transition-[opacity,transform] duration-200 ease-out ${
           isLoading ? "opacity-100 scale-100" : "opacity-0 scale-50"
         }`}
         style={{
-          animation: isLoading ? 'spin 1s linear infinite' : undefined,
+          animation: isLoading ? 'synchronized-spin 1s linear infinite' : undefined,
         }}
       >
         <circle