@dyyz1993/create-agent 2.1.1 → 2.1.2

package/src/lib/copy.ts

@@ -7,11 +7,46 @@ import {
 	unlinkSync,
 	chmodSync,
 } from "fs";
-import { join, resolve } from "path";
-import { execSync } from "child_process";
+import { join, resolve, extname } from "path";
+import { homedir } from "os";
+import { execFileSync } from "child_process";
+import { getRootDir } from "./templates.js";
 
 const SKIP_DIRS = new Set(["node_modules", "build", "dist", ".git", ".husky", ".trae"]);
-const SKIP_FILES = new Set(["bun.lock", "rpc-browser.js"]);
+const SKIP_FILES = new Set(["bun.lock"]);
+
+const BINARY_EXTENSIONS = new Set([
+	".png",
+	".jpg",
+	".jpeg",
+	".gif",
+	".webp",
+	".ico",
+	".icns",
+	".ttf",
+	".otf",
+	".woff",
+	".woff2",
+	".mp3",
+	".mp4",
+	".wav",
+	".pdf",
+	".zip",
+	".gz",
+]);
+
+export function expandTilde(targetPath: string): string {
+	if (targetPath === "~") return homedir();
+	if (targetPath.startsWith("~/")) return join(homedir(), targetPath.slice(2));
+	return targetPath;
+}
+
+function isBinaryFile(filePath: string, buffer: Buffer): boolean {
+	if (BINARY_EXTENSIONS.has(extname(filePath).toLowerCase())) return true;
+	// A NUL byte in the first 8KB almost certainly means binary content;
+	// reading such a file as utf-8 would silently corrupt it.
+	return buffer.subarray(0, 8192).includes(0);
+}
 
 export interface CopyOptions {
 	projectName: string;
@@ -43,14 +78,20 @@ export function copyAndReplace(srcDir: string, destDir: string, projectName: str
 		} else {
 			if (SKIP_FILES.has(entry.name)) continue;
 
-			let content = readFileSync(srcPath, "utf-8");
+			const raw = readFileSync(srcPath);
+
+			if (isBinaryFile(entry.name, raw)) {
+				writeFileSync(destPath, raw);
+				continue;
+			}
+
+			let content = raw.toString("utf-8");
 
 			content = content.replace(/pi-agent-template/g, projectName);
 			content = content.replace(/Pi Agent Template/g, pascalName);
 			content = content.replace(/Pi Agent/g, pascalName);
 			content = content.replace(/com\.piagent\.template/g, identifier);
 			content = content.replace(/com\.piagent/g, shortId);
-			content = content.replace(/@pi-agent\//g, `@${projectName}/`);
 
 			writeFileSync(destPath, content);
 		}
@@ -74,8 +115,8 @@ function copyTraeRules(monorepoRoot: string, targetDir: string, projectName: str
 	}
 }
 
-function copySharedModules(monorepoRoot: string, targetDir: string, projectName: string): void {
-	const sharedDir = resolve(monorepoRoot, "templates", "shared");
+function copySharedModules(sourceRoot: string, targetDir: string, projectName: string): void {
+	const sharedDir = resolve(sourceRoot, "templates", "shared");
 	if (!existsSync(sharedDir)) return;
 
 	const destSharedDir = join(targetDir, "shared");
@@ -145,76 +186,83 @@ function cleanSharedViteConfig(sharedDir: string): void {
 	}
 }
 
-function resolvePackageVersion(packageName: string): string {
+function resolvePackageVersion(packageName: string, fallbackRange?: string): string {
 	try {
-		return execSync(`npm view ${packageName} version`, { encoding: "utf-8" }).trim();
+		const version = execFileSync("npm", ["view", packageName, "version"], {
+			encoding: "utf-8",
+		}).trim();
+		return `^${version}`;
 	} catch {
-		return "1.0.0";
+		// Offline / registry failure: keep a usable range instead of silently
+		// downgrading the project to an ancient version.
+		if (fallbackRange && fallbackRange !== "workspace:*") {
+			console.warn(`(Could not look up latest ${packageName}; keeping ${fallbackRange})`);
+			return fallbackRange;
+		}
+		const fallback = NPM_FALLBACK_VERSIONS[packageName];
+		if (fallback) {
+			console.warn(`(Could not look up latest ${packageName}; falling back to ${fallback})`);
+			return fallback;
+		}
+		console.warn(`(Could not look up latest ${packageName}; keeping ${String(fallbackRange)})`);
+		return fallbackRange ?? "*";
 	}
 }
 
+// Only used when the registry is unreachable AND no usable range is present;
+// bundled templates carry pinned versions via post-sync-templates.mjs.
+const NPM_FALLBACK_VERSIONS: Record<string, string> = {
+	"@dyyz1993/rpc-core": "^2.2.0",
+	"@dyyz1993/eslint-plugin-rpc": "^1.1.0",
+};
+
 const WORKSPACE_PACKAGES = ["@dyyz1993/rpc-core", "@dyyz1993/eslint-plugin-rpc"];
 
-function updatePackageJson(targetDir: string, _projectName: string): void {
+function updatePackageJson(targetDir: string, projectName: string): void {
 	const rootPkgPath = join(targetDir, "package.json");
 	if (!existsSync(rootPkgPath)) return;
 
 	const rootPkg = JSON.parse(readFileSync(rootPkgPath, "utf-8"));
 
 	delete rootPkg.workspaces;
+	rootPkg.name = projectName;
 
 	for (const depKey of ["dependencies", "devDependencies"] as const) {
 		if (!rootPkg[depKey]) continue;
 		for (const pkgName of WORKSPACE_PACKAGES) {
 			if (!rootPkg[depKey][pkgName]) continue;
-			if (pkgName === "@dyyz1993/rpc-core") {
-				const version = resolvePackageVersion(pkgName);
-				rootPkg[depKey][pkgName] = `^${version}`;
-			} else {
-				delete rootPkg[depKey][pkgName];
-			}
+			rootPkg[depKey][pkgName] = resolvePackageVersion(pkgName, rootPkg[depKey][pkgName]);
 		}
 	}
 
 	writeFileSync(rootPkgPath, JSON.stringify(rootPkg, null, "\t") + "\n");
+}
 
-	const eslintConfigPath = join(targetDir, "eslint.config.mjs");
-	if (existsSync(eslintConfigPath)) {
-		const lines = readFileSync(eslintConfigPath, "utf-8").split("\n");
-		const filteredLines: string[] = [];
-
-		let inRpcSection = false;
-		for (let i = 0; i < lines.length; i++) {
-			const line = lines[i];
-			if (line === undefined) continue;
-
-			if (line.includes("import rpcPlugin") && line.includes("@dyyz1993/eslint-plugin-rpc")) {
-				continue;
-			}
-
-			if (line.includes("RPC") && line.includes("规范规则")) {
-				inRpcSection = true;
-				continue;
-			}
-
-			if (inRpcSection) {
-				if (line.trim().startsWith("'rpc/") || line.trim().startsWith('"rpc/')) {
-					continue;
-				}
-				inRpcSection = false;
-			}
-
-			if (line.includes("rpc: rpcPlugin")) {
-				continue;
-			}
+/**
+ * Shared post-processing after raw template files land in the target project.
+ * Used by both `create` and `update --force`; skipping it used to leave
+ * `workspace:*` deps and `../shared` imports in user projects.
+ */
+export function postProcessTemplate(targetDir: string, projectName: string): void {
+	copySharedModules(getRootDir(), targetDir, projectName);
+	cleanViteConfig(targetDir);
+	updatePackageJson(targetDir, projectName);
+}
 
-			filteredLines.push(line);
+function precheckExternalTools(): void {
+	const missing: string[] = [];
+	for (const tool of ["git", "bun"]) {
+		try {
+			execFileSync(tool, ["--version"], { stdio: "pipe" });
+		} catch {
+			missing.push(tool);
 		}
-
-		let content = filteredLines.join("\n");
-		content = content.replace(/\n\s+plugins:\s*\{\s*\},?\s*\n/g, "\n");
-
-		writeFileSync(eslintConfigPath, content);
+	}
+	if (missing.length > 0) {
+		throw new Error(
+			`Required tools not found: ${missing.join(", ")}. ` +
+				`Install them before creating a project (bun: https://bun.sh).`
+		);
 	}
 }
 
@@ -227,6 +275,8 @@ export async function copyTemplate(options: CopyOptions): Promise<void> {
 		throw new Error(`Directory "${targetDir}" already exists.`);
 	}
 
+	precheckExternalTools();
+
 	const { identifier } = deriveNames(projectName);
 
 	console.log(`Creating project: ${projectName}`);
@@ -237,37 +287,18 @@ export async function copyTemplate(options: CopyOptions): Promise<void> {
 	copyAndReplace(templateDir, targetDir, projectName);
 	if (isMonorepo) {
 		copyTraeRules(localRoot, targetDir, projectName);
-		copySharedModules(localRoot, targetDir, projectName);
-	} else {
-		const publishedShared = resolve(import.meta.dir, "..", "..", "templates", "shared");
-		if (existsSync(publishedShared)) {
-			copyAndReplace(publishedShared, join(targetDir, "shared"), projectName);
-			for (const f of ["http-routes.ts", "logger.ts"]) {
-				const p = join(targetDir, "shared", f);
-				if (existsSync(p)) unlinkSync(p);
-			}
-			const tsconfigPath = join(targetDir, "tsconfig.json");
-			if (existsSync(tsconfigPath)) {
-				let tsconfig = readFileSync(tsconfigPath, "utf-8");
-				tsconfig = tsconfig.replace(/"\.\.\/shared\/\*"/g, '"./shared/*"');
-				tsconfig = tsconfig.replace(/"\.\.\/shared"/g, '"./shared"');
-				writeFileSync(tsconfigPath, tsconfig);
-			}
-			cleanSharedViteConfig(join(targetDir, "shared"));
-		}
 	}
-	cleanViteConfig(targetDir);
-	updatePackageJson(targetDir, projectName);
+	postProcessTemplate(targetDir, projectName);
 
 	console.log("Initializing git...");
-	execSync("git init", { cwd: targetDir, stdio: "pipe" });
+	execFileSync("git", ["init"], { cwd: targetDir, stdio: "pipe" });
 
 	console.log("Installing dependencies...");
-	execSync("bun install", { cwd: targetDir, stdio: "inherit" });
+	execFileSync("bun", ["install"], { cwd: targetDir, stdio: "inherit" });
 
 	console.log("Building browser bundle...");
 	try {
-		execSync("bun run build:browser", { cwd: targetDir, stdio: "pipe" });
+		execFileSync("bun", ["run", "build:browser"], { cwd: targetDir, stdio: "pipe" });
 	} catch {
 		console.log("(build:browser skipped - script not found)");
 	}
@@ -284,7 +315,7 @@ export async function copyTemplate(options: CopyOptions): Promise<void> {
 	hook(
 		"pre-commit",
 		`#!/bin/sh
-npx lint-staged
+bunx lint-staged
 
 STAGED_TS=$(git diff --cached --name-only --diff-filter=ACMR | grep -c '\\.tsx\\?$' || true)
 
@@ -300,7 +331,7 @@ echo "✅ Pre-commit checks passed"
 	hook(
 		"commit-msg",
 		`#!/bin/sh
-npx --no -- commitlint --edit "$1"
+bunx commitlint --edit "$1"
 `
 	);
 
@@ -311,7 +342,7 @@ echo "⏳ Linting..."
 bun run lint || { echo "❌ Lint failed."; exit 1; }
 
 echo "⏳ Checking lockfile sync..."
-git diff --name-only HEAD -- pnpm-lock.yaml | grep -q . && { echo "⚠️  pnpm-lock.yaml has uncommitted changes."; exit 1; }
+git diff --name-only HEAD -- bun.lock | grep -q . && { echo "⚠️  bun.lock has uncommitted changes."; exit 1; }
 
 echo "✅ Pre-push checks passed (full tests run in CI). Pushing..."
 `
@@ -356,9 +387,9 @@ fi
 echo "⏳ Checking for dependency changes..."
 CHANGED=$(git diff HEAD@{1} --name-only HEAD)
 
-if echo "$CHANGED" | grep -q "pnpm-lock.yaml\\|package.json"; then
-  echo "📦 Dependencies changed, running pnpm install..."
-  pnpm install
+if echo "$CHANGED" | grep -q "bun.lock\\|package.json"; then
+  echo "📦 Dependencies changed, running bun install..."
+  bun install
 fi
 `
 	);
@@ -372,26 +403,31 @@ IS_BRANCH="$3"
 
 if [ "$IS_BRANCH" = "1" ]; then
   CHANGED=$(git diff --name-only "$PREV_HEAD" "$NEW_HEAD" 2>/dev/null)
-  if echo "$CHANGED" | grep -q "pnpm-lock.yaml\\|package.json"; then
-    echo "📦 Dependencies changed between branches, running pnpm install..."
-    pnpm install
+  if echo "$CHANGED" | grep -q "bun.lock\\|package.json"; then
+    echo "📦 Dependencies changed between branches, running bun install..."
+    bun install
   fi
 fi
 `
 	);
 
 	console.log("Initializing husky...");
-	execSync("pnpm run prepare", { cwd: targetDir, stdio: "pipe" });
+	try {
+		execFileSync("bun", ["run", "prepare"], { cwd: targetDir, stdio: "pipe" });
+	} catch {
+		console.warn("(husky init skipped - prepare script failed; git hooks not installed)");
+	}
 
-	execSync("git add -A", { cwd: targetDir, stdio: "pipe" });
+	execFileSync("git", ["add", "-A"], { cwd: targetDir, stdio: "pipe" });
 
 	try {
-		execSync(`git commit --no-verify -m "feat: init ${projectName} from pi-agent-template"`, {
-			cwd: targetDir,
-			stdio: "pipe",
-		});
+		execFileSync(
+			"git",
+			["commit", "--no-verify", "-m", `feat: init ${projectName} from pi-agent-template`],
+			{ cwd: targetDir, stdio: "pipe" }
+		);
 	} catch {
-		console.log("(git commit skipped - no files to commit)");
+		console.log("(git commit skipped - check git user.name / user.email config)");
 	}
 
 	console.log("");

package/src/lib/templates.ts

@@ -27,6 +27,18 @@ const TEMPLATES: TemplateInfo[] = [
     available: true,
     dir: 'templates/agent',
   },
+  {
+    type: 'browser-agent',
+    description: 'Browser automation agent (AI-powered browser control + xbrowser + Desktop/Web)',
+    available: true,
+    dir: 'templates/browser-agent',
+  },
+  {
+    type: 'cowork',
+    description: 'Cowork task collaboration agent (Task orchestration + Progress tracking + Artifacts + Context management)',
+    available: true,
+    dir: 'templates/cowork',
+  },
 ];
 
 export function getTemplateInfo(type: string): TemplateInfo | undefined {

package/templates/agent/.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no -- commitlint --edit "$1"

package/templates/agent/.husky/pre-commit

@@ -0,0 +1,11 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+# Secret detection
+if git diff --cached --name-only --diff-filter=ACM -z | xargs -0 grep -ilE '(password|secret|api.key|private.key|token|credential).*=.*[A-Za-z0-9]{16,}' 2>/dev/null; then
+  echo "⚠️  Potential secrets detected in staged files!"
+  echo "Please review and remove any sensitive data before committing."
+  exit 1
+fi
+
+npx lint-staged

package/templates/agent/.husky/pre-push

@@ -0,0 +1,6 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+echo "⏳ Running lint..."
+pnpm run lint
+echo "✅ Pre-push checks passed. Pushing..."

package/templates/agent/CHANGELOG.md

@@ -0,0 +1,15 @@
+# pi-agent-app
+
+## 1.0.2
+
+### Patch Changes
+
+- Updated dependencies [[`29d2171`](https://github.com/dyyz1993/pi-agent-template/commit/29d217148f6e0b496cc06716e11847b3e522e266)]:
+  - @dyyz1993/rpc-core@2.2.1
+
+## 1.0.1
+
+### Patch Changes
+
+- Updated dependencies [[`29d2171`](https://github.com/dyyz1993/pi-agent-template/commit/29d217148f6e0b496cc06716e11847b3e522e266), [`724470a`](https://github.com/dyyz1993/pi-agent-template/commit/724470a784b48a66591e06299fab8ad72f023962)]:
+  - @dyyz1993/rpc-core@3.0.0

package/templates/agent/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "pi-agent-app",
-	"version": "1.0.0",
+	"version": "1.0.2",
 	"description": "Coding agent template with Bash, Rules, and Todo management",
 	"author": {
 		"name": "xuyingzhou",
@@ -75,7 +75,7 @@
 		"prepare": "husky"
 	},
 	"dependencies": {
-		"@dyyz1993/rpc-core": "^1.2.0",
+		"@dyyz1993/rpc-core": "^2.2.1",
 		"@tanstack/react-virtual": "^3.13.24",
 		"electrobun": "1.18.1",
 		"lucide-react": "^1.9.0",
@@ -91,7 +91,7 @@
 		"zustand": "^5.0.12"
 	},
 	"devDependencies": {
-		"@dyyz1993/eslint-plugin-rpc": "workspace:*",
+		"@dyyz1993/eslint-plugin-rpc": "^1.1.0",
 		"@eslint/js": "^9.0.0",
 		"@testing-library/jest-dom": "^6.9.1",
 		"@testing-library/react": "^16.3.2",

package/templates/agent/src/gateway/__tests__/ws-handler-token.test.ts

@@ -1,11 +1,13 @@
-import { describe, it, expect, vi, beforeEach } from "vitest";
-import { EventEmitter } from "events";
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { EventEmitter } from 'events';
+import type { Server } from 'http';
+import type { WebSocketServer } from 'ws';
 
-vi.mock("../../shared/register-all-handlers", () => ({
+vi.mock('../../shared/register-all-handlers', () => ({
 	registerAllHandlers: vi.fn(),
 }));
 
-vi.mock("../../shared/lib/logger", () => ({
+vi.mock('../../shared/lib/logger', () => ({
 	createLogger: () => ({
 		info: vi.fn(),
 		error: vi.fn(),
@@ -14,14 +16,22 @@ vi.mock("../../shared/lib/logger", () => ({
 	}),
 }));
 
-const MOCK_AUTH_TOKEN = "test-secure-token-123456";
+const MOCK_AUTH_TOKEN = 'test-secure-token-123456';
 
-function createMockWs() {
-	const ws = new EventEmitter();
-	(ws as any).readyState = 1;
-	(ws as any).close = vi.fn();
-	(ws as any).send = vi.fn();
-	(ws as any).ping = vi.fn();
+interface MockWs extends EventEmitter {
+	readyState: number;
+	close: ReturnType<typeof vi.fn>;
+	send: ReturnType<typeof vi.fn>;
+	ping: ReturnType<typeof vi.fn>;
+}
+
+function createMockWs(): MockWs {
+	const ws = Object.assign(new EventEmitter(), {
+		readyState: 1,
+		close: vi.fn(),
+		send: vi.fn(),
+		ping: vi.fn(),
+	}) as MockWs;
 	return ws;
 }
 
@@ -29,19 +39,19 @@ function createMockReq(url: string, headers: Record<string, string> = {}) {
 	return { url, headers };
 }
 
-describe("WS Handler Token 安全", () => {
-	let _wssInstance: EventEmitter & { clients: Set<any> };
+describe('WS Handler Token 安全', () => {
+	let _wssInstance: EventEmitter & { clients: Set<unknown> };
 
 	beforeEach(async () => {
 		vi.resetModules();
 
-		const { WebSocketServer } = await import("ws");
+		const { WebSocketServer } = await import('ws');
 		const _originalWSS = WebSocketServer;
 
-		vi.doMock("ws", () => {
+		vi.doMock('ws', () => {
 			class MockWSS extends EventEmitter {
-				clients = new Set();
-				constructor(_opts: any) {
+				clients = new Set<unknown>();
+				constructor(_opts: unknown) {
 					super();
 					// eslint-disable-next-line @typescript-eslint/no-this-alias
 					_wssInstance = this;
@@ -52,67 +62,71 @@ describe("WS Handler Token 安全", () => {
 	});
 
 	async function setupTest() {
-		const { createWsHandler } = await import("../ws-handler");
+		const { createWsHandler } = await import('../ws-handler');
 		const httpServer = new EventEmitter();
-		const wss = createWsHandler(httpServer as any, {
+		const wss = createWsHandler(httpServer as unknown as Server, {
 			config: { port: 3100, authToken: MOCK_AUTH_TOKEN, maxUploadSize: 50 * 1024 * 1024 },
 		});
 		return wss;
 	}
 
-	function emitConnection(wss: any, ws: any, req: any) {
-		wss.emit("connection", ws, req);
+	function emitConnection(
+		wss: WebSocketServer,
+		ws: MockWs,
+		req: { url: string; headers: Record<string, string> },
+	) {
+		wss.emit('connection', ws, req);
 	}
 
-	it("无 token 应被拒绝 (4001)", async () => {
+	it('无 token 应被拒绝 (4001)', async () => {
 		const wss = await setupTest();
 		const ws = createMockWs();
-		const req = createMockReq("/ws");
+		const req = createMockReq('/ws');
 		emitConnection(wss, ws, req);
-		expect((ws as any).close).toHaveBeenCalledWith(4001, "Unauthorized");
+		expect(ws.close).toHaveBeenCalledWith(4001, 'Unauthorized');
 	});
 
-	it("错误 token 应被拒绝 (4001)", async () => {
+	it('错误 token 应被拒绝 (4001)', async () => {
 		const wss = await setupTest();
 		const ws = createMockWs();
-		const req = createMockReq("/ws?token=wrong-token");
+		const req = createMockReq('/ws?token=wrong-token');
 		emitConnection(wss, ws, req);
-		expect((ws as any).close).toHaveBeenCalledWith(4001, "Unauthorized");
+		expect(ws.close).toHaveBeenCalledWith(4001, 'Unauthorized');
 	});
 
-	it("正确 token 通过 URL query 应被接受", async () => {
+	it('正确 token 通过 URL query 应被接受', async () => {
 		const wss = await setupTest();
 		const ws = createMockWs();
 		const req = createMockReq(`/ws?token=${MOCK_AUTH_TOKEN}`);
 		emitConnection(wss, ws, req);
-		expect((ws as any).close).not.toHaveBeenCalled();
+		expect(ws.close).not.toHaveBeenCalled();
 	});
 
-	it("正确 token 通过 Sec-WebSocket-Protocol header 应被接受", async () => {
+	it('正确 token 通过 Sec-WebSocket-Protocol header 应被接受', async () => {
 		const wss = await setupTest();
 		const ws = createMockWs();
-		const req = createMockReq("/ws", {
-			"sec-websocket-protocol": MOCK_AUTH_TOKEN,
+		const req = createMockReq('/ws', {
+			'sec-websocket-protocol': MOCK_AUTH_TOKEN,
 		});
 		emitConnection(wss, ws, req);
-		expect((ws as any).close).not.toHaveBeenCalled();
+		expect(ws.close).not.toHaveBeenCalled();
 	});
 
-	it("header 方式优先于 query 方式 (header 正确, query 错误)", async () => {
+	it('header 方式优先于 query 方式 (header 正确, query 错误)', async () => {
 		const wss = await setupTest();
 		const ws = createMockWs();
-		const req = createMockReq("/ws?token=wrong-token", {
-			"sec-websocket-protocol": MOCK_AUTH_TOKEN,
+		const req = createMockReq('/ws?token=wrong-token', {
+			'sec-websocket-protocol': MOCK_AUTH_TOKEN,
 		});
 		emitConnection(wss, ws, req);
-		expect((ws as any).close).not.toHaveBeenCalled();
+		expect(ws.close).not.toHaveBeenCalled();
 	});
 
-	it("token 验证使用 timingSafeEqual（长度不等返回 false）", async () => {
+	it('token 验证使用 timingSafeEqual（长度不等返回 false）', async () => {
 		const wss = await setupTest();
 		const ws = createMockWs();
 		const req = createMockReq(`/ws?token=short`);
 		emitConnection(wss, ws, req);
-		expect((ws as any).close).toHaveBeenCalledWith(4001, "Unauthorized");
+		expect(ws.close).toHaveBeenCalledWith(4001, 'Unauthorized');
 	});
 });

package/templates/agent/src/mainview/App.tsx

@@ -1,17 +1,19 @@
-import type { ReactNode } from "react";
-import { useState } from "react";
-import { useConnectionStore } from "./stores/use-connection-store";
-import { useBreakpointSync } from "./hooks/use-breakpoint";
-import { useRpcInit } from "./hooks/use-rpc-init";
-import { useSidebarResize } from "./hooks/use-sidebar-resize";
-import { AppLayout, type CenterTab } from "./components/layout/AppLayout";
-import { ErrorBoundary as _EB } from "./components/common/ErrorBoundary";
+import type { ReactNode } from 'react';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useConnectionStore } from './stores/use-connection-store';
+import { useBreakpointSync } from './hooks/use-breakpoint';
+import { useRpcInit } from './hooks/use-rpc-init';
+import { useSidebarResize } from './hooks/use-sidebar-resize';
+import { AppLayout, type CenterTab } from './components/layout/AppLayout';
+import { ErrorBoundary as _EB } from './components/common/ErrorBoundary';
 
 const ErrorBoundary = _EB as unknown as React.FC<{ children: ReactNode }>;
 
 function App() {
+	const { t } = useTranslation();
 	const ready = useConnectionStore((s) => s.ready);
-	const [centerTab, setCenterTab] = useState<CenterTab>("chat");
+	const [centerTab, setCenterTab] = useState<CenterTab>('chat');
 
 	useBreakpointSync();
 	useRpcInit();
@@ -20,10 +22,10 @@ function App() {
 
 	if (!ready) {
 		return (
-			<div className="h-screen bg-gray-900 flex items-center justify-center">
+			<div className="h-screen bg-[var(--color-bg-primary)] flex items-center justify-center">
 				<div className="text-center">
-					<div className="inline-block w-8 h-8 border-2 border-indigo-400 border-t-transparent rounded-full animate-spin mb-4" />
-					<div className="text-gray-400 text-sm">Connecting to RPC server...</div>
+					<div className="inline-block w-8 h-8 border-2 border-[var(--color-text-accent)] border-t-transparent rounded-full animate-spin mb-4" />
+					<div className="text-[var(--color-text-tertiary)] text-sm">{t('app.connecting')}</div>
 				</div>
 			</div>
 		);