@myrialabs/clopen 0.2.2 → 0.2.3

package/.dockerignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+logs
+.env
+.git

package/.env.example

@@ -1,6 +1,3 @@
-# Node Environment (development | production)
-NODE_ENV=production
-
 # Server configuration
 HOST=localhost
 
@@ -8,5 +5,5 @@ HOST=localhost
 PORT=9141
 
 # Development ports (two ports — Vite proxies to Elysia)
-PORT_BACKEND=9151
-PORT_FRONTEND=9141
+PORT_FRONTEND=9151
+PORT_BACKEND=9161

package/CONTRIBUTING.md

@@ -22,6 +22,10 @@ bun install
 bun run check
 ```
 
+### Data Directory
+
+When running `bun run dev`, Clopen stores data in `~/.clopen-dev` instead of `~/.clopen`. This keeps development data separate from any production instance — especially important since Clopen can be used to develop itself.
+
 ### Keep Updated
 
 ```bash

package/README.md

@@ -9,7 +9,7 @@
 
 ## Features
 
-- **Multi-Account Claude Code** - Manage multiple accounts (personal, work, team) and switch instantly per session, isolated under `~/.clopen/claude/user/` without touching system-level Claude config
+- **Multi-Account Claude Code** - Manage multiple accounts (personal, work, team) and switch instantly per session, isolated under `~/.clopen/claude/user/` (or `~/.clopen-dev/` in development) without touching system-level Claude config
 - **Multi-Engine Support** - Switch between Claude Code and OpenCode
 - **AI Chat Interface** - Streaming responses with tool use visualization
 - **Background Processing** - Chat, terminal, and other processes continue running even when you close the browser — come back later and pick up where you left off
@@ -92,6 +92,8 @@ bun run dev     # Start development server
 bun run check   # Type checking
 ```
 
+When running in development mode, Clopen uses `~/.clopen-dev` instead of `~/.clopen`, keeping dev data separate from any production instance.
+
 ---
 
 ## Architecture
@@ -123,7 +125,7 @@ Clopen uses an engine-agnostic adapter pattern — both engines normalize output
 ### Port 9141 Already in Use
 
 ```bash
-clopen --port 9150
+clopen --port 9145
 ```
 
 Or kill the existing process:

package/backend/database/queries/message-queries.ts

@@ -42,6 +42,48 @@ export const messageQueries = {
 		});
 	},
 
+	/**
+	 * Get minimal preview data for a session: first user msg, last assistant msg, and counts.
+	 * Used by the Sessions/History modal to avoid loading all messages.
+	 */
+	getSessionPreview(sessionId: string): {
+		firstUserMessage: DatabaseMessage | null;
+		lastAssistantMessage: DatabaseMessage | null;
+		userCount: number;
+		assistantCount: number;
+	} {
+		const db = getDatabase();
+
+		const firstUserMessage = db.prepare(`
+			SELECT * FROM messages
+			WHERE session_id = ? AND json_extract(sdk_message, '$.type') = 'user'
+			ORDER BY timestamp ASC
+			LIMIT 1
+		`).get(sessionId) as DatabaseMessage | null;
+
+		const lastAssistantMessage = db.prepare(`
+			SELECT * FROM messages
+			WHERE session_id = ? AND json_extract(sdk_message, '$.type') = 'assistant'
+			ORDER BY timestamp DESC
+			LIMIT 1
+		`).get(sessionId) as DatabaseMessage | null;
+
+		const counts = db.prepare(`
+			SELECT
+				SUM(CASE WHEN json_extract(sdk_message, '$.type') = 'user' THEN 1 ELSE 0 END) AS user_count,
+				SUM(CASE WHEN json_extract(sdk_message, '$.type') = 'assistant' THEN 1 ELSE 0 END) AS assistant_count
+			FROM messages
+			WHERE session_id = ?
+		`).get(sessionId) as { user_count: number; assistant_count: number } | null;
+
+		return {
+			firstUserMessage,
+			lastAssistantMessage,
+			userCount: counts?.user_count ?? 0,
+			assistantCount: counts?.assistant_count ?? 0
+		};
+	},
+
 	/**
 	 * Get all messages for a session including deleted ones (for timeline view)
 	 */

package/backend/database/utils/connection.ts

@@ -1,17 +1,17 @@
 import { join } from 'path';
-import { homedir } from 'os';
 import { Database } from 'bun:sqlite';
 import type { DatabaseConnection } from '$shared/types/database/connection';
 
 import { debug } from '$shared/utils/logger';
+import { getClopenDir } from '../../utils/index.js';
+
 export class DatabaseManager {
 	private static instance: DatabaseManager | null = null;
 	private db: DatabaseConnection | null = null;
 	private readonly dbPath: string;
 
 	private constructor() {
-		const clopenDir = join(homedir(), '.clopen');
-		this.dbPath = join(clopenDir, 'app.db');
+		this.dbPath = join(getClopenDir(), 'app.db');
 	}
 
 	static getInstance(): DatabaseManager {
@@ -29,8 +29,8 @@ export class DatabaseManager {
 		debug.log('database', '🔗 Connecting to database...');
 
 		try {
-			// Create ~/.clopen directory if it doesn't exist
-			const clopenDir = join(homedir(), '.clopen');
+			// Create clopen directory if it doesn't exist
+			const clopenDir = getClopenDir();
 			const dirFile = Bun.file(clopenDir);
 
 			// Check if directory exists, if not create it

package/backend/engine/adapters/claude/environment.ts

@@ -7,22 +7,21 @@
  * stream concurrently.
  */
 
-import { homedir } from 'os';
 import { join } from 'path';
 import { isWindows, findGitBash } from '../../../terminal/shell-utils.js';
 import { engineQueries } from '../../../database/queries';
 import { debug } from '$shared/utils/logger';
-import { getCleanSpawnEnv } from '../../../utils/env';
+import { getCleanSpawnEnv, getClopenDir } from '../../../utils/index.js';
 
 let _ready = false;
 let _initPromise: Promise<void> | null = null;
 let _envOverrides: Record<string, string> = {};
 
 /**
- * Returns the isolated Claude config directory under ~/.clopen/claude/user/
+ * Returns the isolated Claude config directory under {clopenDir}/claude/user/
  */
 export function getClaudeUserConfigDir(): string {
-  return join(homedir(), '.clopen', 'claude', 'user');
+  return join(getClopenDir(), 'claude', 'user');
 }
 
 /**

package/backend/engine/adapters/opencode/server.ts

@@ -11,6 +11,7 @@
 import type { OpencodeClient } from '@opencode-ai/sdk';
 import { getOpenCodeMcpConfig } from '../../../mcp';
 import { debug } from '$shared/utils/logger';
+import { findAvailablePort } from '../../../utils/port-utils';
 
 const OPENCODE_PORT = 4096;
 const OPENCODE_HOST = '127.0.0.1';
@@ -58,9 +59,14 @@ async function init(): Promise<void> {
 		}
 	}
 
+	const actualPort = await findAvailablePort(OPENCODE_PORT);
+	if (actualPort !== OPENCODE_PORT) {
+		debug.log('engine', `Open Code port ${OPENCODE_PORT} in use, using ${actualPort} instead`);
+	}
+
 	const result = await createOpencode({
 		hostname: OPENCODE_HOST,
-		port: OPENCODE_PORT,
+		port: actualPort,
 		...(Object.keys(mcpConfig).length > 0 && {
 			config: { mcp: mcpConfig },
 		}),

package/backend/git/git-executor.ts

@@ -22,7 +22,8 @@ export async function execGit(
 ): Promise<GitExecResult> {
 	debug.log('git', `Executing: git ${args.join(' ')} in ${cwd}`);
 
-	const proc = Bun.spawn(['git', ...args], {
+	const safeCwd = cwd.replace(/\\/g, '/');
+	const proc = Bun.spawn(['git', '-c', `safe.directory=${safeCwd}`, ...args], {
 		cwd,
 		stdout: 'pipe',
 		stderr: 'pipe',

package/backend/index.ts

@@ -20,7 +20,6 @@ import { loggerMiddleware } from './middleware/logger';
 import { initializeDatabase, closeDatabase } from './database';
 import { disposeAllEngines } from './engine';
 import { debug } from '$shared/utils/logger';
-import { findAvailablePort } from './utils/port-utils';
 import { networkInterfaces } from 'os';
 import { resolve } from 'node:path';
 import { statSync } from 'node:fs';
@@ -45,7 +44,7 @@ wsRouter.setAuthMiddleware(async (conn, action) => {
 /**
  * Clopen - Elysia Backend Server
  *
- * Development: Elysia runs on port 9151, Vite dev server proxies /api and /ws from port 9141
+ * Development: Elysia runs on port 9161, Vite dev server proxies /api and /ws from port 9151
  * Production: Elysia runs on port 9141, serves static files from dist/ + API + WebSocket
  */
 
@@ -117,11 +116,12 @@ if (!isDevelopment) {
 
 // Start server with proper initialization sequence
 async function startServer() {
-	// Find available port — auto-increment if desired port is in use
-	const actualPort = await findAvailablePort(PORT);
-	if (actualPort !== PORT) {
-		debug.log('server', `⚠️ Port ${PORT} in use, using ${actualPort} instead`);
-	}
+	// Port resolution is handled by the caller:
+	// - Development: scripts/dev.ts resolves ports and passes via PORT_BACKEND env
+	// - Production:  scripts/start.ts resolves port and passes via PORT env
+	// - CLI:         bin/clopen.ts resolves port and passes via PORT env
+	// This avoids double port-check race conditions (e.g. zombie processes on
+	// Windows causing silent desync between Vite proxy and backend).
 
 	// Initialize database first before accepting connections
 	try {
@@ -133,18 +133,18 @@ async function startServer() {
 
 	// Start listening after database is ready
 	app.listen({
-		port: actualPort,
+		port: PORT,
 		hostname: HOST
 	}, () => {
 		if (isDevelopment) {
 			console.log('🚀 Backend ready — waiting for frontend...');
 		} else {
-			console.log(`🚀 Clopen running at http://localhost:${actualPort}`);
+			console.log(`🚀 Clopen running at http://localhost:${PORT}`);
 		}
 		if (HOST === '0.0.0.0') {
 			const ips = getLocalIps();
 			for (const ip of ips) {
-				console.log(`🌐 Network access: http://${ip}:${actualPort}`);
+				console.log(`🌐 Network access: http://${ip}:${PORT}`);
 			}
 		}
 	});

package/backend/snapshot/blob-store.ts

@@ -11,12 +11,12 @@
  */
 
 import { join } from 'path';
-import { homedir } from 'os';
 import fs from 'fs/promises';
 import { gzipSync, gunzipSync } from 'zlib';
 import { debug } from '$shared/utils/logger';
+import { getClopenDir } from '../utils/index.js';
 
-const SNAPSHOTS_DIR = join(homedir(), '.clopen', 'snapshots');
+const SNAPSHOTS_DIR = join(getClopenDir(), 'snapshots');
 const BLOBS_DIR = join(SNAPSHOTS_DIR, 'blobs');
 const TREES_DIR = join(SNAPSHOTS_DIR, 'trees');
 

package/backend/utils/env.ts

@@ -22,12 +22,12 @@ const isDev = process.env.NODE_ENV !== 'production';
 
 export const SERVER_ENV = {
 	NODE_ENV: (process.env.NODE_ENV || 'development') as string,
-	/** Backend port — dev: PORT_BACKEND (default 9151), prod: PORT (default 9141) */
+	/** Backend port — dev: PORT_BACKEND (default 9161), prod: PORT (default 9141) */
 	PORT: isDev
-		? (process.env.PORT_BACKEND ? parseInt(process.env.PORT_BACKEND) : 9151)
+		? (process.env.PORT_BACKEND ? parseInt(process.env.PORT_BACKEND) : 9161)
 		: (process.env.PORT ? parseInt(process.env.PORT) : 9141),
 	/** Frontend port — only used in dev for Vite proxy coordination */
-	PORT_FRONTEND: process.env.PORT_FRONTEND ? parseInt(process.env.PORT_FRONTEND) : 9141,
+	PORT_FRONTEND: process.env.PORT_FRONTEND ? parseInt(process.env.PORT_FRONTEND) : 9151,
 	HOST: (process.env.HOST || 'localhost') as string,
 	isDevelopment: isDev,
 } as const;
@@ -35,15 +35,13 @@ export const SERVER_ENV = {
 // ── .env parsing ────────────────────────────────────────────────────
 
 /**
- * Parse .env file into key-value map.
- * Knowing both key AND value lets us compare against process.env
- * to determine if Bun's auto-load is still in effect or if the
- * system/runtime changed the value after loading.
+ * Parse a .env file at the given path into a key-value record.
+ * Returns an empty object if the file doesn't exist or can't be read.
  */
-function parseDotEnv(): Map<string, string> {
-	const entries = new Map<string, string>();
+export function loadEnvFile(envPath: string): Record<string, string> {
+	const result: Record<string, string> = {};
 	try {
-		const content = readFileSync(join(process.cwd(), '.env'), 'utf-8');
+		const content = readFileSync(envPath, 'utf-8');
 		for (const line of content.split('\n')) {
 			let trimmed = line.trim();
 			if (!trimmed || trimmed.startsWith('#')) continue;
@@ -51,22 +49,22 @@ function parseDotEnv(): Map<string, string> {
 			const eqIdx = trimmed.indexOf('=');
 			if (eqIdx <= 0) continue;
 			const key = trimmed.substring(0, eqIdx).trim();
-			// Strip surrounding quotes from value
 			let value = trimmed.substring(eqIdx + 1).trim();
 			if ((value.startsWith('"') && value.endsWith('"')) ||
 				(value.startsWith("'") && value.endsWith("'"))) {
 				value = value.slice(1, -1);
 			}
-			entries.set(key, value);
+			result[key] = value;
 		}
 	} catch {
 		// .env doesn't exist or can't be read
 	}
-	return entries;
+	return result;
 }
 
-// Capture once at import time
-const dotEnv = parseDotEnv();
+// Capture once at import time — read from CWD which is set to the clopen
+// installation directory when spawned via bin/clopen.ts (cwd: __dirname).
+const dotEnv = new Map(Object.entries(loadEnvFile(join(process.cwd(), '.env'))));
 
 // ── Filter definitions ──────────────────────────────────────────────
 

package/backend/utils/index.ts

@@ -2,4 +2,7 @@
 export * from './process-manager.js';
 
 // Export environment sanitizer
-export * from './env.js';
+export * from './env.js';
+
+// Export path utilities
+export * from './paths.js';

package/backend/utils/paths.ts

@@ -0,0 +1,11 @@
+import { join } from 'path';
+import { homedir } from 'os';
+
+/**
+ * Returns the Clopen data directory.
+ * - development: ~/.clopen-dev
+ * - everything else (production, undefined): ~/.clopen
+ */
+export function getClopenDir(): string {
+	return join(homedir(), process.env.NODE_ENV === 'development' ? '.clopen-dev' : '.clopen');
+}

package/backend/utils/port-utils.ts

@@ -1,14 +1,18 @@
 /**
  * Port utilities for checking ports before server start.
  * Bun-optimized: uses Bun.connect for fast cross-platform port check.
+ *
+ * Checks BOTH IPv4 (127.0.0.1) and IPv6 (::1) — on Windows, 'localhost'
+ * may resolve to either address. A zombie process listening on [::1] would
+ * go undetected by an IPv4-only check, causing the new server to bind to a
+ * port that can't actually serve traffic (connections hang indefinitely).
  */
 
-/** Check if a port is currently in use */
-export async function isPortInUse(port: number): Promise<boolean> {
+/** Try to connect to a specific host:port */
+async function tryConnect(hostname: string, port: number): Promise<boolean> {
 	try {
-		// Bun-native TCP connect — fast cross-platform check
 		const socket = await Bun.connect({
-			hostname: '127.0.0.1',
+			hostname,
 			port,
 			socket: {
 				data() {},
@@ -18,12 +22,21 @@ export async function isPortInUse(port: number): Promise<boolean> {
 			}
 		});
 		socket.end();
-		return true; // Connection succeeded = port in use
+		return true;
 	} catch {
-		return false; // Connection refused = port is free
+		return false;
 	}
 }
 
+/** Check if a port is currently in use on any localhost address (IPv4 + IPv6) */
+export async function isPortInUse(port: number): Promise<boolean> {
+	const [v4, v6] = await Promise.all([
+		tryConnect('127.0.0.1', port),
+		tryConnect('::1', port),
+	]);
+	return v4 || v6;
+}
+
 /** Find an available port starting from the given port, incrementing on collision */
 export async function findAvailablePort(startPort: number, maxAttempts = 8): Promise<number> {
 	let port = startPort;

package/backend/ws/messages/crud.ts

@@ -12,6 +12,15 @@ import { createRouter } from '$shared/utils/ws-server';
 import { messageQueries } from '../../database/queries';
 import { formatDatabaseMessage } from '$shared/utils/message-formatter';
 
+function extractTextContent(content: unknown): string {
+	if (typeof content === 'string') return content;
+	if (!Array.isArray(content)) return '';
+	return content
+		.filter((c: any) => c.type === 'text')
+		.map((b: any) => b.text || '')
+		.join(' ');
+}
+
 export const crudHandler = createRouter()
 	// List messages
 	.http('messages:list', {
@@ -33,6 +42,49 @@ export const crudHandler = createRouter()
 		}
 	})
 
+	// Bulk session preview — returns title, summary, and message counts for multiple sessions
+	// without loading all messages. Used by the Sessions/History modal.
+	.http('sessions:preview', {
+		data: t.Object({
+			session_ids: t.Array(t.String())
+		}),
+		response: t.Array(t.Any())
+	}, ({ data }) => {
+		return data.session_ids.map(sessionId => {
+			const preview = messageQueries.getSessionPreview(sessionId);
+
+			// Title from first user message
+			let title = 'New Conversation';
+			if (preview.firstUserMessage) {
+				const sdk = JSON.parse(preview.firstUserMessage.sdk_message);
+				const textContent = extractTextContent(sdk.message?.content).trim();
+				if (textContent) {
+					title = textContent.slice(0, 60) + (textContent.length > 60 ? '...' : '');
+				}
+			}
+
+			// Summary from last assistant message
+			let summary = 'No messages yet';
+			if (preview.lastAssistantMessage) {
+				const sdk = JSON.parse(preview.lastAssistantMessage.sdk_message);
+				const rawText = extractTextContent(sdk.message?.content);
+				const cleanText = rawText.replace(/```[\s\S]*?```/g, '').trim();
+				if (cleanText) {
+					summary = cleanText.slice(0, 100) + (cleanText.length > 100 ? '...' : '');
+				}
+			}
+
+			return {
+				session_id: sessionId,
+				title,
+				summary,
+				userCount: preview.userCount,
+				assistantCount: preview.assistantCount,
+				count: preview.userCount + preview.assistantCount
+			};
+		});
+	})
+
 	// Get message by ID
 	.http('messages:get', {
 		data: t.Object({

package/bin/clopen.ts

@@ -23,6 +23,7 @@ if (typeof globalThis.Bun === 'undefined') {
 
 import { existsSync, copyFileSync, readFileSync, writeFileSync } from 'fs';
 import { join } from 'path';
+import { loadEnvFile } from '../backend/utils/env';
 
 // CLI Options interface
 interface CLIOptions {
@@ -88,7 +89,7 @@ const MAX_PORT = 65535;
 
 function showHelp() {
 	console.log(`
-Clopen - Modern web UI for Claude Code
+Clopen - All-in-one web workspace for Claude Code & OpenCode
 
 USAGE:
   clopen [OPTIONS]
@@ -106,7 +107,7 @@ OPTIONS:
 
 EXAMPLES:
   clopen                  # Start with default settings (port ${DEFAULT_PORT})
-  clopen --port 9150      # Start on port 9150
+  clopen --port 9145      # Start on port 9145
   clopen --host 0.0.0.0   # Bind to all network interfaces
   clopen update           # Update to the latest version
   clopen reset-pat        # Regenerate admin login token
@@ -262,8 +263,8 @@ async function recoverAdminToken() {
 	console.log(`\x1b[36mClopen\x1b[0m v${version} — Admin Token Recovery\n`);
 
 	// Initialize database (import dynamically to avoid loading full backend)
-	const { initializeDatabase } = await import('../backend/lib/database/index');
-	const { listUsers, regeneratePAT } = await import('../backend/lib/auth/auth-service');
+	const { initializeDatabase } = await import('../backend/database/index');
+	const { listUsers, regeneratePAT } = await import('../backend/auth/auth-service');
 
 	await initializeDatabase();
 
@@ -367,21 +368,20 @@ async function startServer(options: CLIOptions) {
 	updateLoading('Starting server...');
 	await delay();
 
-	// Run server as subprocess to ensure it uses local node_modules
-	const serverPath = join(__dirname, 'backend/index.ts');
+	// Delegate to scripts/start.ts — handles port resolution (IPv4 + IPv6
+	// zombie detection) and starts backend in a single consistent path.
+	const startScript = join(__dirname, 'scripts/start.ts');
 
 	stopLoading();
 
-	// Prepare environment variables
-	const env = { ...process.env };
-	if (options.port) {
-		env.PORT = options.port.toString();
-	}
-	if (options.host) {
-		env.HOST = options.host;
-	}
+	// Overlay clopen's own .env on top of process.env to override any
+	// pollution from a .env file in the directory where `clopen` was invoked.
+	// CLI args take highest priority on top of that.
+	const env = { ...process.env, ...loadEnvFile(ENV_FILE) };
+	if (options.port) env.PORT = options.port.toString();
+	if (options.host) env.HOST = options.host;
 
-	const serverProc = Bun.spawn(['bun', serverPath], {
+	const serverProc = Bun.spawn(['bun', startScript], {
 		cwd: __dirname,
 		stdout: 'inherit',
 		stderr: 'inherit',

package/docker-compose.yml

@@ -0,0 +1,31 @@
+services:
+  clopen:
+    build:
+      context: .
+      dockerfile_inline: |
+        FROM oven/bun:latest
+        USER root
+        RUN apt-get update && apt-get install -y --no-install-recommends \
+            git \
+            curl \
+            chromium \
+            && rm -rf /var/lib/apt/lists/*
+        ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
+        ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium
+        RUN curl -fsSL https://claude.ai/install.sh | bash
+        ENV PATH="/root/.claude/local:$PATH"
+        RUN curl -fsSL https://opencode.ai/install | bash
+        RUN bun add -g @myrialabs/clopen
+        EXPOSE 9141
+        CMD ["clopen", "--host", "0.0.0.0"]
+    restart: unless-stopped
+    ports:
+      - "${PORT:-9141}:9141"
+    volumes:
+      - clopen_data:/root/.clopen
+      - ${PROJECTS_DIR:-./projects}:/root/projects
+    environment:
+      - NODE_ENV=production
+
+volumes:
+  clopen_data:

package/frontend/components/auth/SetupPage.svelte

@@ -100,14 +100,41 @@
 		authModeLoading = true;
 
 		try {
-			if (selectedAuthMode === 'none') {
-				await authStore.setupNoAuth();
-				completedSteps.add('auth-mode');
-				completedSteps.add('admin-account');
-				completedSteps = new Set(completedSteps);
-				currentStep = 'engines';
+			if (!isExistingUser) {
+				// Fresh setup — existing behavior
+				if (selectedAuthMode === 'none') {
+					await authStore.setupNoAuth();
+					completedSteps.add('auth-mode');
+					completedSteps.add('admin-account');
+					completedSteps = new Set(completedSteps);
+					currentStep = 'engines';
+				} else {
+					goToNextStep();
+				}
 			} else {
-				goToNextStep();
+				// Returning user (wizard shown again after refresh) — apply selected mode
+				const previousMode = authStore.authMode;
+				if (selectedAuthMode === 'none' && previousMode !== 'none') {
+					// with-auth → no-auth: update mode, skip admin-account
+					await authStore.switchToNoAuth();
+					completedSteps.add('auth-mode');
+					completedSteps.add('admin-account');
+					completedSteps = new Set(completedSteps);
+					currentStep = 'engines';
+				} else if (selectedAuthMode === 'required' && previousMode !== 'required') {
+					// no-auth → with-auth: update mode, regenerate PAT, go to admin-account
+					await authStore.switchToWithAuth();
+					goToNextStep();
+				} else if (selectedAuthMode === 'none') {
+					// Same mode (none) — skip admin-account, go to engines
+					completedSteps.add('auth-mode');
+					completedSteps.add('admin-account');
+					completedSteps = new Set(completedSteps);
+					currentStep = 'engines';
+				} else {
+					// Same mode (required) — advance to admin-account
+					goToNextStep();
+				}
 			}
 		} catch (err) {
 			authModeError = err instanceof Error ? err.message : 'Setup failed';
@@ -133,11 +160,16 @@
 		adminLoading = true;
 		try {
 			if (isExistingUser) {
-				// Existing user — just update name if changed and proceed
+				// Existing user — update name if changed
 				if (adminName.trim() !== existingUserName) {
 					await authStore.updateName(adminName.trim());
 				}
-				goToNextStep();
+				// If a PAT was just generated (e.g. switched from no-auth to with-auth), show it
+				if (authStore.personalAccessToken) {
+					showPAT = true;
+				} else {
+					goToNextStep();
+				}
 			} else {
 				await authStore.setup(adminName.trim());
 				showPAT = true;
@@ -324,8 +356,8 @@
 	});
 
 	// ─── Step 4: Preferences ───
-	const FONT_SIZE_MIN = 10;
-	const FONT_SIZE_MAX = 20;
+	const FONT_SIZE_MIN = 8;
+	const FONT_SIZE_MAX = 24;
 
 	function handleFontSizeChange(e: Event) {
 		const value = Number((e.target as HTMLInputElement).value);