@yxai/code 0.0.1 → 0.0.2

package/README.en.md

@@ -1,36 +1,148 @@
-# yxcode
+<div align="center">
 
-#### Description
-{**When you're done, you can delete the content in this README and update the file with details for others getting started with your repository**}
+<img src="./codelogo.png" alt="YXCode Logo" width="120" height="120">
 
-#### Software Architecture
-Software architecture description
+# @yxai/code
 
-#### Installation
+<p align="center">
+  <strong>YiXin Code</strong> - Zero-barrier Visual Lightweight Tool for Claude Code
+</p>
 
-1.  xxxx
-2.  xxxx
-3.  xxxx
+<p align="center">
+  <a href="./README.md">🇨🇳 简体中文</a> | <a href="./README.en.md">🇺🇸 English</a>
+</p>
 
-#### Instructions
+<p align="center">
+  <img src="https://img.shields.io/badge/node-%3E%3D22.0.0-brightgreen" alt="Node.js Version">
+  <img src="https://img.shields.io/badge/license-MIT-blue" alt="License">
+  <img src="https://img.shields.io/badge/code%20lines-%3C4000-orange" alt="Code Lines">
+</p>
 
-1.  xxxx
-2.  xxxx
-3.  xxxx
+</div>
 
-#### Contribution
+---
 
-1.  Fork the repository
-2.  Create Feat_xxx branch
-3.  Commit your code
-4.  Create Pull Request
+## ✨ Introduction
 
+A visual interaction interface based on **Node.js + WebSocket + HTML/CSS/JS**, allowing you to interact with Claude AI through a web interface.
 
-#### Gitee Feature
+- Consistent capabilities with Claude Code
+- Perfect for transitioning from Trae, Cursor, conversational, and plugin-based programming to Claude Code
+- Minimal dependencies - only requires Node.js
 
-1.  You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
-2.  Gitee blog [blog.gitee.com](https://blog.gitee.com)
-3.  Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
-4.  The most valuable open source project [GVP](https://gitee.com/gvp)
-5.  The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
-6.  The most popular members  [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
+---
+
+## 🚀 Features
+
+<table>
+<tr>
+<td width="50%">
+
+### 🎯 Minimalist Architecture
+- Node.js + WebSocket + HTML/CSS/JS
+- Less than 4,000 lines of code
+- Only depends on Node.js
+
+</td>
+<td width="50%">
+
+### 🎨 Visual Interface
+- Friendly and modern Web UI
+- Intuitive user experience
+- Clean and elegant design
+
+</td>
+</tr>
+<tr>
+<td width="50%">
+
+### ⚡ Extreme Performance
+- WebSocket real-time communication
+- Optimized for speed
+- Lightweight and fast
+
+</td>
+<td width="50%">
+
+### 📦 Full Tool Capabilities
+- Consistent with Claude Code capabilities
+- Fully based on Claude Code
+- Complete feature set
+
+</td>
+</tr>
+</table>
+
+---
+
+## 📦 Installation
+
+```bash
+npm install -g @yxai/code
+```
+
+---
+
+## 🎮 Usage
+
+After installation, simply run the command to start:
+
+```bash
+yxai
+```
+
+The program will automatically:
+1. Start the server (default port: 6060)
+2. Open your browser at http://localhost:6060
+
+### Command Line Options
+
+```bash
+# Display help information
+yxai --help
+
+# Display version number
+yxai --version
+
+# Specify port number
+yxai --port 6060
+```
+
+### Environment Variables
+
+```bash
+# Use environment variable to specify port
+PORT=8080 yxai
+```
+
+---
+
+## 💻 System Requirements
+
+| Requirement | Version |
+|-------------|---------|
+| Node.js     | >= 22.0.0 |
+
+---
+
+## 📄 License
+
+This project is licensed under the [MIT License](LICENSE).
+
+---
+
+## 👥 About Us
+
+This project is self-developed by **YiXin AI Team + Claude + Claude Code** using Vibecoding
+
+- 🌐 Official Website: [https://yxai.chat](https://yxai.chat)
+- 💬 Contact Us: You can add our contact information through the YiXin AI official website
+- 🐛 Issue Feedback: For tool-related issues, please submit an issue, and YiXin AI Lobster will review and complete your issue within 24 hours~
+
+---
+
+<div align="center">
+
+Made with ❤️ by YXAI Team
+
+</div>

package/README.md

@@ -1,77 +1,148 @@
+<div align="center">
+
+<img src="./codelogo.png" alt="YXCode Logo" width="120" height="120">
+
 # @yxai/code
 
-意心Code - Claude Code 可视化交互界面
+<p align="center">
+  <strong>意心 Code</strong> - 无门槛的 Claude Code 可视化轻量工具
+</p>
+
+<p align="center">
+  <a href="./README.md">🇨🇳 简体中文</a> | <a href="./README.en.md">🇺🇸 English</a>
+</p>
+
+<p align="center">
+  <img src="https://img.shields.io/badge/node-%3E%3D22.0.0-brightgreen" alt="Node.js 版本">
+  <img src="https://img.shields.io/badge/license-MIT-blue" alt="许可证">
+  <img src="https://img.shields.io/badge/code%20lines-%3C4000-orange" alt="代码行数">
+</p>
+
+</div>
+
+---
+
+## ✨ 简介
+
+一个基于 **Node.js + WebSocket + HTML/CSS/JS** 的可视化交互界面，让你可以通过 Web 界面与 Claude AI 进行交互。
+
+- 能力与 Claude Code 一致
+- 适合从 Trae、Cursor、对话式、插件式编程方式过渡到 Claude Code
+- 极简依赖，仅需 Node.js
+
+---
+
+## 🚀 特性
+
+<table>
+<tr>
+<td width="50%">
+
+### 🎯 极简架构
+- Node.js + WebSocket + HTML/CSS/JS
+- 代码行数小于 4000 行
+- 仅依赖 Node.js
 
-一个基于 Express + WebSocket + Claude Agent SDK 的可视化交互界面，让你可以通过 Web 界面与 Claude AI 进行交互。
+</td>
+<td width="50%">
 
-## 特性
+### 🎨 可视化界面
+- 友好的且现代化的 Web UI
+- 直观的用户体验
+- 简洁优雅的设计
 
-- 🚀 极简架构：Express 静态服务 + WebSocket + Claude Agent SDK
-- 🎨 可视化界面：友好的 Web UI
-- 🔌 WebSocket 实时通信
-- 📦 零构建：仅依赖 Node.js，无需构建工具
-- 🌐 自动打开浏览器
+</td>
+</tr>
+<tr>
+<td width="50%">
 
-## 安装
+### ⚡ 极致性能
+- 采用 WebSocket 实时通信
+- 极致优化
+- 轻量快速
+
+</td>
+<td width="50%">
+
+### 📦 完整工具能力
+- 能力与 Claude Code 一致
+- 底层完全基于 Claude Code
+- 功能完整
+
+</td>
+</tr>
+</table>
+
+---
+
+## 📦 安装
 
 ```bash
 npm install -g @yxai/code
 ```
 
-## 使用
+---
+
+## 🎮 使用
 
-安装后，直接运行命令：
+安装后，直接运行命令启动：
 
 ```bash
-yxaiCode
+yxai
 ```
 
 程序会自动：
-1. 启动服务器（默认端口 3456）
-2. 打开浏览器访问 http://localhost:3456
+1. 启动服务器（默认端口 6060）
+2. 打开浏览器访问 http://localhost:6060
 
 ### 命令行选项
 
 ```bash
 # 显示帮助信息
-yxaiCode --help
+yxai --help
 
 # 显示版本号
-yxaiCode --version
+yxai --version
 
 # 指定端口号
-yxaiCode --port 8080
+yxai --port 6060
 ```
 
 ### 环境变量
 
 ```bash
 # 使用环境变量指定端口
-PORT=8080 yxaiCode
+PORT=8080 yxai
 ```
 
-## 系统要求
+---
 
-- Node.js >= 18.0.0
+## 💻 系统要求
 
-## 开发
+| 要求 | 版本 |
+|------|------|
+| Node.js | >= 22.0.0 |
 
-```bash
-# 克隆仓库
-git clone https://gitee.com/ccnetcore/yxcode.git
-cd yxcode
+---
 
-# 安装依赖
-npm install
+## 📄 许可证
 
-# 本地测试
-npm link
-yxaiCode
+本项目采用 [MIT 许可证](LICENSE) 开源。
 
-# 取消链接
-npm unlink -g @yxai/code
-```
+---
+
+## 👥 关于我们
+
+本项目由 **意心Ai团队 + Claude + Claude Code** Vibecoding 自研
+
+- 🌐 官网：[https://yxai.chat](https://yxai.chat)
+- 💬 联系我们：可通过意心Ai官网添加我们联系方式
+- 🐛 问题反馈：如果是工具问题可提交 issue，意心Ai龙虾将会 24 小时审核并完成你的 issue~
+
+---
+
+<div align="center">
 
-## 许可证
+Made with ❤️ by YXAI Team
 
-MIT
+</div>

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@yxai/code",
-  "version": "0.0.1",
-  "description": "意心Code - Claude Code 可视化交互界面",
+  "version": "0.0.2",
+  "description": "意心Code - 无门槛的ClaudeCode可视化轻量工具",
   "type": "module",
   "main": "server.js",
   "bin": {
-    "yxaiCode": "server.js"
+    "yxai": "server.js"
   },
   "scripts": {
     "start": "node server.js",
@@ -26,7 +26,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://gitee.com/ccnetcore/yxcode.git"
+    "url": "https://github.com/ccnetcore/yxaicode.git"
   },
   "engines": {
     "node": ">=18.0.0"

package/public/index.html

@@ -4,6 +4,8 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>意心Code - yxcode</title>
+<link rel="icon" type="image/x-icon" href="/favicon.ico">
+<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
 <link rel="stylesheet" href="/vendor/github-dark.min.css">
 <script src="/vendor/marked.min.js"></script>
 <script src="/vendor/highlight.min.js"></script>
@@ -1376,7 +1378,7 @@ button:active::before {
   inset: 0;
   background: rgba(0, 0, 0, 0.75);
   backdrop-filter: blur(8px);
-  z-index: 100;
+  z-index: 2000;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1678,7 +1680,7 @@ button:active::before {
   inset: 0;
   background: rgba(0, 0, 0, 0.8);
   backdrop-filter: blur(8px);
-  z-index: 200;
+  z-index: 2000;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1743,7 +1745,7 @@ button:active::before {
   inset: 0;
   background: rgba(0, 0, 0, 0.75);
   backdrop-filter: blur(8px);
-  z-index: 150;
+  z-index: 2000;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1998,7 +2000,7 @@ button:active::before {
   <header id="header">
     <div class="header-left">
       <button id="sidebarToggle" class="btn-icon" title="会话列表">☰</button>
-      <span class="logo">意心Code</span><span class="version">v1.0</span>
+      <span class="logo">意心Code</span><span class="version">v0.0.2</span>
     </div>
     <div class="header-center">
       <div class="model-select-wrapper">

package/server.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 /**
  * 意心Code (yxcode) - Claude Code 可视化交互界面
  *
@@ -27,20 +27,20 @@ if (args.includes('--help') || args.includes('-h')) {
 意心Code (yxcode) - Claude Code 可视化交互界面
 
 用法:
-  yxaiCode [选项]
+  yxai [选项]
 
 选项:
   -h, --help     显示帮助信息
   -v, --version  显示版本号
-  -p, --port     指定端口号 (默认: 3456)
+  -p, --port     指定端口号 (默认: 6060)
 
 环境变量:
   PORT           自定义端口号
 
 示例:
-  yxaiCode
-  yxaiCode --port 8080
-  PORT=8080 yxaiCode
+  yxai
+  yxai --port 8080
+  PORT=8080 yxai
 `);
   process.exit(0);
 }
@@ -52,7 +52,7 @@ if (args.includes('--version') || args.includes('-v')) {
 }
 
 // --- Config ---
-let PORT = parseInt(process.env.PORT, 10) || 3456;
+let PORT = parseInt(process.env.PORT, 10) || 6060;
 const portIndex = args.findIndex(arg => arg === '--port' || arg === '-p');
 if (portIndex !== -1 && args[portIndex + 1]) {
   PORT = parseInt(args[portIndex + 1], 10);
@@ -545,31 +545,46 @@ wss.on('connection', (ws) => {
   ws.on('close', () => console.log('[WS] client disconnected'));
 });
 
-server.listen(PORT, () => {
-  const url = `http://localhost:${PORT}`;
-  console.log(`\n  意心Code (yxcode) 已启动`);
-  console.log(`  ${url}\n`);
-
-  // Auto-open browser
-  const open = (url) => {
-    const cmd = process.platform === 'win32' ? `start ${url}`
-      : process.platform === 'darwin' ? `open ${url}`
-      : `xdg-open ${url}`;
-    exec(cmd);
-  };
+// Try to start server, auto-increment port if in use
+const MAX_PORT_ATTEMPTS = 100;
+let currentPort = PORT;
+let portAttempts = 0;
+
+function startServer(port) {
+  server.listen(port, () => {
+    PORT = port;
+    const url = `http://localhost:${port}`;
+    console.log(`\n  意心Code (yxcode) 已启动`);
+    console.log(`  ${url}\n`);
+
+    // Auto-open browser
+    const open = (url) => {
+      const cmd = process.platform === 'win32' ? `start ${url}`
+        : process.platform === 'darwin' ? `open ${url}`
+        : `xdg-open ${url}`;
+      exec(cmd);
+    };
 
-  // Open browser after a short delay
-  setTimeout(() => open(url), 1000);
-});
+    // Open browser after a short delay
+    setTimeout(() => open(url), 1000);
+  });
+}
 
-// Handle port in use error
 server.on('error', (err) => {
   if (err.code === 'EADDRINUSE') {
-    console.error(`\n  错误: 端口 ${PORT} 已被占用`);
-    console.error(`  请尝试使用其他端口: yxaiCode --port 8080\n`);
-    process.exit(1);
+    portAttempts++;
+    if (portAttempts < MAX_PORT_ATTEMPTS) {
+      const nextPort = currentPort + portAttempts;
+      console.log(`  端口 ${currentPort + portAttempts - 1} 已被占用，尝试端口 ${nextPort}...`);
+      startServer(nextPort);
+    } else {
+      console.error(`\n  错误: 无法找到可用端口 (已尝试 ${MAX_PORT_ATTEMPTS} 次)\n`);
+      process.exit(1);
+    }
   } else {
     console.error(`\n  服务器错误: ${err.message}\n`);
     process.exit(1);
   }
 });
+
+startServer(currentPort);