trae-starter 0.0.1

package/README.md

@@ -0,0 +1,45 @@
+# Trae Starter
+
+`trae-starter` 是一个用于快速启动和管理 Trae 项目的 CLI 工具。它提供了一个直观的 Web 界面，让你能够轻松管理工作区、创建新项目，并一键在 Trae IDE 中打开它们。
+
+## ✨ 主要功能
+
+- **可视化项目管理**：启动一个本地 Web 服务，在浏览器中直观地管理你的项目。
+- **工作区管理**：轻松选择和切换当前的工作区目录。
+- **项目创建**：支持基于预设模板（如 `proto` 模板）快速创建新项目。
+- **一键打开 Trae**：通过 `trae-cn://` 自定义协议，一键将项目在 Trae IDE 中打开。
+
+## 🚀 快速开始 (Get Started)
+
+最简单的使用方式是直接通过 `npx` 运行，无需全局安装：
+
+```bash
+npx trae-starter web
+```
+
+启动后，命令行会自动在浏览器中打开 `http://localhost:5050`。
+
+### 命令行选项
+
+- `-p, --port <number>`: 指定 Web 服务运行的端口（默认：5050）
+
+例如，要在 8080 端口启动服务：
+
+```bash
+npx trae-starter web -p 8080
+```
+
+## 📦 安装 (可选)
+
+如果你希望经常使用，也可以将其全局安装：
+
+```bash
+npm install -g trae-starter
+```
+
+安装后直接运行：
+
+```bash
+trae-starter web
+```
+

package/bin/cli.js

@@ -0,0 +1,33 @@
+#!/usr/bin/env node
+
+const { Command } = require('commander');
+const path = require('path');
+const { startServer } = require('../server/index');
+
+const program = new Command();
+
+program
+  .name('trae-starter')
+  .description('CLI to start Trae projects with a web UI')
+  .version('1.0.0');
+
+program
+  .command('web')
+  .description('Start the web interface')
+  .option('-p, --port <number>', 'Port to run the server on', '5050')
+  .action(async (options) => {
+    const port = parseInt(options.port, 10);
+    try {
+      const serverUrl = await startServer(port);
+      console.log(`Server started at ${serverUrl}`);
+      console.log('Opening browser...');
+      
+      const open = (await import('open')).default;
+      await open(serverUrl);
+    } catch (error) {
+      console.error('Failed to start server:', error);
+      process.exit(1);
+    }
+  });
+
+program.parse(process.argv);

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "trae-starter",
+  "version": "0.0.1",
+  "description": "A CLI tool to start Trae projects with a web UI",
+  "bin": {
+    "trae-starter": "./bin/cli.js"
+  },
+  "scripts": {
+    "start": "node bin/cli.js web"
+  },
+  "files": [
+    "bin",
+    "server",
+    "public",
+    "templates"
+  ],
+  "dependencies": {
+    "body-parser": "^1.20.2",
+    "commander": "^11.1.0",
+    "cors": "^2.8.5",
+    "express": "^4.18.2",
+    "fs-extra": "^11.2.0",
+    "open": "^10.0.3"
+  }
+}

package/public/app.js

@@ -0,0 +1,263 @@
+const API_BASE = '/api';
+
+// State
+let workspace = '';
+let projects = [];
+let templates = [];
+
+// DOM Elements
+const workspaceEl = document.getElementById('workspace-path');
+const changeWorkspaceBtn = document.getElementById('change-workspace-btn');
+const projectListEl = document.getElementById('project-list');
+const newProjectBtn = document.getElementById('new-project-btn');
+const modal = document.getElementById('modal');
+const closeModalBtn = document.getElementById('close-modal-btn');
+const cancelBtn = document.getElementById('cancel-btn');
+const newProjectForm = document.getElementById('new-project-form');
+const projectNameInput = document.getElementById('project-name');
+const projectTemplateSelect = document.getElementById('project-template');
+
+// Initialize
+async function init() {
+    await fetchWorkspace();
+    await fetchTemplates();
+    await fetchProjects();
+}
+
+// API Calls
+async function fetchWorkspace() {
+    try {
+        const res = await fetch(`${API_BASE}/workspace`);
+        const data = await res.json();
+        workspace = data.workspace;
+        workspaceEl.textContent = workspace;
+    } catch (err) {
+        console.error('Failed to fetch workspace', err);
+    }
+}
+
+async function updateWorkspace(newPath) {
+    try {
+        const res = await fetch(`${API_BASE}/workspace`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ workspace: newPath })
+        });
+        if (res.ok) {
+            await fetchWorkspace();
+            await fetchProjects();
+        } else {
+            alert('Failed to update workspace. Check if path exists.');
+        }
+    } catch (err) {
+        console.error('Failed to update workspace', err);
+    }
+}
+
+async function fetchProjects() {
+    try {
+        projectListEl.innerHTML = '<div class="col-span-full text-center py-12 text-gray-500">Loading projects...</div>';
+        const res = await fetch(`${API_BASE}/projects`);
+        const data = await res.json();
+        projects = data.projects || []; // Ensure projects is an array
+        renderProjects();
+    } catch (err) {
+        console.error('Failed to fetch projects', err);
+        projectListEl.innerHTML = '<div class="col-span-full text-center py-12 text-red-500">Error loading projects</div>';
+    }
+}
+
+async function fetchTemplates() {
+    try {
+        const res = await fetch(`${API_BASE}/templates`);
+        const data = await res.json();
+        templates = data.templates || []; // Ensure templates is an array
+        renderTemplates();
+    } catch (err) {
+        console.error('Failed to fetch templates', err);
+    }
+}
+
+async function createProject(name, template) {
+    try {
+        const res = await fetch(`${API_BASE}/projects`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ name, template })
+        });
+        
+        if (res.ok) {
+            closeModal();
+            await fetchProjects();
+            // Automatically open the new project? Maybe just list it.
+            // Let's ask if user wants to open it or just refresh list.
+            // For now, refresh list.
+        } else {
+            const data = await res.json();
+            alert(`Error: ${data.error}`);
+        }
+    } catch (err) {
+        console.error('Failed to create project', err);
+        alert('Failed to create project');
+    }
+}
+
+async function openInTrae(projectPath) {
+    try {
+        const res = await fetch(`${API_BASE}/open`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ projectPath })
+        });
+        
+        if (!res.ok) {
+            const data = await res.json();
+            alert(`Error: ${data.error}`);
+        }
+    } catch (err) {
+        console.error('Failed to open project', err);
+        alert('Failed to open project in Trae');
+    }
+}
+
+// Utility to generate a consistent neon color based on string (project name)
+function getNeonColor(str) {
+    const colors = [
+        { text: 'text-cyan-400', bg: 'bg-cyan-500/10', border: 'border-cyan-500/20', shadow: 'shadow-[0_0_10px_rgba(34,211,238,0.1)]' },
+        { text: 'text-purple-400', bg: 'bg-purple-500/10', border: 'border-purple-500/20', shadow: 'shadow-[0_0_10px_rgba(168,85,247,0.1)]' },
+        { text: 'text-emerald-400', bg: 'bg-emerald-500/10', border: 'border-emerald-500/20', shadow: 'shadow-[0_0_10px_rgba(52,211,153,0.1)]' },
+        { text: 'text-pink-400', bg: 'bg-pink-500/10', border: 'border-pink-500/20', shadow: 'shadow-[0_0_10px_rgba(244,114,182,0.1)]' },
+        { text: 'text-amber-400', bg: 'bg-amber-500/10', border: 'border-amber-500/20', shadow: 'shadow-[0_0_10px_rgba(251,191,36,0.1)]' },
+        { text: 'text-blue-400', bg: 'bg-blue-500/10', border: 'border-blue-500/20', shadow: 'shadow-[0_0_10px_rgba(96,165,250,0.1)]' },
+        { text: 'text-rose-400', bg: 'bg-rose-500/10', border: 'border-rose-500/20', shadow: 'shadow-[0_0_10px_rgba(251,113,133,0.1)]' }
+    ];
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        hash = str.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    return colors[Math.abs(hash) % colors.length];
+}
+
+// Rendering
+function renderProjects() {
+    if (projects.length === 0) {
+        projectListEl.innerHTML = `
+            <div class="col-span-full glass-panel rounded-2xl p-12 text-center flex flex-col items-center justify-center border border-dashed border-slate-700/50 relative overflow-hidden">
+                <div class="absolute inset-0 bg-gradient-to-b from-transparent to-cyan-900/5 opacity-50"></div>
+                <svg class="w-16 h-16 mb-4 text-slate-600 relative z-10 drop-shadow-lg" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path></svg>
+                <p class="text-slate-400 mb-5 font-medium relative z-10 text-lg">当前工作区暂无项目</p>
+                <button onclick="openModal()" class="relative z-10 text-cyan-400 hover:text-cyan-300 neon-text font-semibold flex items-center gap-2 transition-all duration-200 group">
+                    <svg class="w-5 h-5 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
+                    初始化您的第一个项目
+                </button>
+            </div>
+        `;
+        return;
+    }
+
+    projectListEl.innerHTML = projects.map(project => {
+        const theme = getNeonColor(project.name);
+        return `
+        <div class="glass-panel rounded-2xl overflow-hidden hover:-translate-y-1 transition-all duration-300 group hover:shadow-[0_8px_30px_rgba(34,211,238,0.15)] hover:border-cyan-500/30">
+            <div class="p-6 relative h-full flex flex-col">
+                <!-- Decorative top gradient -->
+                <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-slate-600 to-transparent group-hover:via-cyan-400 transition-all duration-300 opacity-50"></div>
+                
+                <div class="flex justify-between items-start mb-4">
+                    <div class="${theme.bg} ${theme.text} ${theme.border} text-[10px] font-bold px-2.5 py-1 rounded-lg uppercase tracking-wider border ${theme.shadow}">项目</div>
+                    <span class="text-[10px] font-medium text-slate-500 bg-slate-900/80 px-2 py-1 rounded-md border border-slate-800">${new Date(project.modified).toLocaleDateString()}</span>
+                </div>
+                <h3 class="text-xl font-bold text-slate-100 mb-3 truncate group-hover:text-cyan-300 transition-colors" title="${project.name}">${project.name}</h3>
+                
+                <div class="group/path relative flex items-center text-slate-500 mb-6 bg-slate-900/60 p-2.5 rounded-xl border border-slate-800/80 mt-auto cursor-help overflow-hidden">
+                    <svg class="w-4 h-4 mr-2.5 flex-shrink-0 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path></svg>
+                    
+                    <!-- Truncated text (RTL trick to show end of path) -->
+                    <p class="text-xs font-mono truncate text-slate-400 w-full transition-opacity duration-200 group-hover/path:opacity-0" style="direction: rtl; text-align: left;">
+                        <span style="direction: ltr; unicode-bidi: embed;">${project.path}</span>
+                    </p>
+                    
+                    <!-- Full path on hover (Absolute positioning) -->
+                    <div class="absolute inset-0 bg-slate-900/95 p-2.5 flex items-center opacity-0 group-hover/path:opacity-100 transition-opacity duration-200 z-10 overflow-x-auto whitespace-nowrap custom-scrollbar">
+                        <p class="text-[10px] font-mono text-cyan-300">${project.path}</p>
+                    </div>
+                </div>
+                
+                <button onclick="openInTrae('${project.path.replace(/\\/g, '\\\\')}')" class="w-full bg-slate-800/80 hover:bg-cyan-500/10 text-slate-300 hover:text-cyan-400 font-bold py-3 px-4 rounded-xl border border-slate-700 hover:border-cyan-500/40 flex justify-center items-center transition-all duration-200 hover:shadow-[0_0_15px_rgba(34,211,238,0.15)] group/btn">
+                    <svg class="w-5 h-5 mr-2 text-slate-500 group-hover/btn:text-cyan-400 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>
+                    在 Trae 中打开
+                </button>
+            </div>
+        </div>
+        `;
+    }).join('');
+}
+
+function renderTemplates() {
+    // Only show available templates, remove "Empty Project" option
+    const templateOptions = templates.map(t => `<option value="${t}">${t}</option>`).join('');
+    projectTemplateSelect.innerHTML = templateOptions;
+    
+    // Select the first template by default if available
+    if (templates.length > 0) {
+        projectTemplateSelect.value = templates[0];
+    }
+}
+
+// Event Listeners
+changeWorkspaceBtn.addEventListener('click', async () => {
+    try {
+        const res = await fetch(`${API_BASE}/choose-directory`, { method: 'POST' });
+        if (res.ok) {
+            const data = await res.json();
+            if (data.path) {
+                updateWorkspace(data.path);
+            }
+        } else {
+            // Fallback to manual entry if dialog fails or is cancelled
+            const newPath = prompt('Enter absolute path to workspace:', workspace);
+            if (newPath && newPath !== workspace) {
+                updateWorkspace(newPath);
+            }
+        }
+    } catch (err) {
+        console.error('Failed to open directory picker', err);
+        const newPath = prompt('Enter absolute path to workspace:', workspace);
+        if (newPath && newPath !== workspace) {
+            updateWorkspace(newPath);
+        }
+    }
+});
+
+newProjectBtn.addEventListener('click', openModal);
+closeModalBtn.addEventListener('click', closeModal);
+cancelBtn.addEventListener('click', closeModal);
+
+newProjectForm.addEventListener('submit', (e) => {
+    e.preventDefault();
+    const name = projectNameInput.value.trim();
+    const template = projectTemplateSelect.value;
+    if (name) {
+        createProject(name, template);
+    }
+});
+
+// Modal Helpers
+function openModal() {
+    modal.classList.remove('hidden');
+    modal.classList.add('flex');
+    projectNameInput.focus();
+}
+
+function closeModal() {
+    modal.classList.add('hidden');
+    modal.classList.remove('flex');
+    newProjectForm.reset();
+}
+
+// Make functions global for inline onclick handlers
+window.openModal = openModal;
+window.openInTrae = openInTrae;
+
+// Start
+init();

package/public/index.html

@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Trae 启动器</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
+        .glass-panel {
+            background: rgba(30, 41, 59, 0.7);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .neon-text {
+            text-shadow: 0 0 10px rgba(34, 211, 238, 0.5);
+        }
+        /* Custom Scrollbar for dark theme */
+        ::-webkit-scrollbar { width: 8px; }
+        ::-webkit-scrollbar-track { background: #0f172a; }
+        ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
+        ::-webkit-scrollbar-thumb:hover { background: #475569; }
+    </style>
+</head>
+<body class="bg-[#0B0F19] text-slate-200 min-h-screen relative overflow-x-hidden selection:bg-cyan-500/30 selection:text-cyan-200">
+    
+    <!-- Background Effects -->
+    <div class="fixed inset-0 z-[-1] bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-cyan-900/20 via-[#0B0F19] to-[#0B0F19]"></div>
+    <div class="fixed inset-0 z-[-1] bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMiIgY3k9IjIiIHI9IjEiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4wNSkiLz48L3N2Zz4=')] [mask-image:linear-gradient(to_bottom,white,transparent)]"></div>
+
+    <div id="app" class="container mx-auto px-4 py-12 max-w-5xl">
+        
+        <!-- Header -->
+        <header class="flex flex-col md:flex-row justify-between items-start md:items-center mb-12 gap-6">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-cyan-400 to-blue-600 flex items-center justify-center shadow-[0_0_20px_rgba(34,211,238,0.4)]">
+                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
+                </div>
+                <h1 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-blue-500 neon-text tracking-tight">Trae 启动器</h1>
+            </div>
+            
+            <div class="glass-panel px-4 py-3 rounded-2xl flex items-center space-x-4 shadow-lg">
+                <span class="text-xs font-medium text-slate-400 uppercase tracking-wider whitespace-nowrap">当前工作区</span>
+                <code id="workspace-path" class="bg-slate-900/50 px-3 py-1.5 rounded-lg border border-slate-700/50 text-sm font-mono text-cyan-300 max-w-[200px] md:max-w-xs truncate" style="direction: rtl; text-align: left;">加载中...</code>
+                <button id="change-workspace-btn" class="text-cyan-400 hover:text-cyan-300 hover:neon-text text-sm font-medium transition-all duration-200 shrink-0" title="更改工作区">
+                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
+                </button>
+            </div>
+        </header>
+
+        <!-- Actions -->
+        <div class="mb-8 flex justify-between items-end border-b border-slate-800 pb-6">
+            <div>
+                <h2 class="text-xl font-semibold text-slate-100 flex items-center gap-2">
+                    <svg class="w-5 h-5 text-cyan-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 002-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
+                    本地项目
+                </h2>
+                <p class="text-sm text-slate-500 mt-1">管理和启动您的 Vibe Coding 开发环境</p>
+            </div>
+            <button id="new-project-btn" class="group relative px-5 py-2.5 bg-cyan-500 hover:bg-cyan-400 text-slate-900 font-bold rounded-xl shadow-[0_0_15px_rgba(34,211,238,0.3)] hover:shadow-[0_0_25px_rgba(34,211,238,0.5)] transition-all duration-300 flex items-center gap-2 overflow-hidden">
+                <div class="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300 ease-out"></div>
+                <svg class="w-5 h-5 relative z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
+                <span class="relative z-10">新建项目</span>
+            </button>
+        </div>
+
+        <!-- Project List -->
+        <div id="project-list" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <!-- Projects will be injected here -->
+            <div class="col-span-full glass-panel rounded-2xl p-12 text-center text-slate-500 flex flex-col items-center justify-center">
+                <svg class="w-12 h-12 mb-4 text-slate-600 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"></path></svg>
+                <p>初始化环境列表...</p>
+            </div>
+        </div>
+
+    </div>
+
+    <!-- New Project Modal -->
+    <div id="modal" class="fixed inset-0 bg-[#0B0F19]/80 backdrop-blur-sm hidden items-center justify-center z-50 transition-opacity">
+        <div class="glass-panel rounded-2xl shadow-2xl w-full max-w-md p-8 transform transition-all scale-100 border border-slate-700/50 relative overflow-hidden">
+            <!-- Modal glow effect -->
+            <div class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-1 bg-gradient-to-r from-transparent via-cyan-500 to-transparent opacity-50"></div>
+            
+            <div class="flex justify-between items-center mb-6">
+                <h3 class="text-xl font-bold text-slate-100 flex items-center gap-2">
+                    <svg class="w-5 h-5 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
+                    初始化核心项目
+                </h3>
+                <button id="close-modal-btn" class="text-slate-500 hover:text-slate-300 transition-colors p-1 rounded-lg hover:bg-slate-800">
+                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
+                </button>
+            </div>
+            
+            <form id="new-project-form" class="space-y-5">
+                <div>
+                    <label class="block text-xs font-medium text-slate-400 mb-1.5 uppercase tracking-wider">项目名称</label>
+                    <input type="text" id="project-name" required class="w-full px-4 py-2.5 bg-slate-900/50 border border-slate-700 rounded-xl focus:outline-none focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500 text-slate-200 placeholder-slate-600 transition-all" placeholder="例如：nexus-ui">
+                </div>
+                
+                <div>
+                    <label class="block text-xs font-medium text-slate-400 mb-1.5 uppercase tracking-wider">基础模板</label>
+                    <div class="relative">
+                        <select id="project-template" class="w-full px-4 py-2.5 bg-slate-900/50 border border-slate-700 rounded-xl focus:outline-none focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500 text-slate-200 appearance-none transition-all">
+                            <!-- Templates will be injected here -->
+                        </select>
+                        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-4 text-slate-400">
+                            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="pt-6 flex justify-end space-x-3 border-t border-slate-800/50 mt-2">
+                    <button type="button" id="cancel-btn" class="px-5 py-2.5 text-slate-400 hover:text-slate-200 hover:bg-slate-800 rounded-xl transition-colors font-medium">取消</button>
+                    <button type="submit" class="px-5 py-2.5 bg-cyan-500 hover:bg-cyan-400 text-slate-900 font-bold rounded-xl shadow-[0_0_15px_rgba(34,211,238,0.2)] hover:shadow-[0_0_20px_rgba(34,211,238,0.4)] transition-all duration-200">创建项目</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <script src="app.js"></script>
+</body>
+</html>

package/server/api.js

@@ -0,0 +1,181 @@
+const express = require('express');
+const fs = require('fs-extra');
+const path = require('path');
+const { exec } = require('child_process');
+const os = require('os');
+const router = express.Router();
+
+// Config file path
+const CONFIG_FILE = path.join(os.homedir(), '.trae-starter-config.json');
+
+// Store current workspace in memory for simplicity (or could persist to a config file)
+let currentWorkspace = process.cwd();
+
+// Load workspace from config if exists
+try {
+  if (fs.existsSync(CONFIG_FILE)) {
+    const config = fs.readJsonSync(CONFIG_FILE);
+    if (config.workspace && fs.existsSync(config.workspace)) {
+      currentWorkspace = config.workspace;
+    }
+  }
+} catch (err) {
+  console.error('Failed to load config:', err);
+}
+
+// Helper to save config
+async function saveConfig(workspace) {
+  try {
+    await fs.writeJson(CONFIG_FILE, { workspace });
+  } catch (err) {
+    console.error('Failed to save config:', err);
+  }
+}
+
+// Get current workspace
+router.get('/workspace', (req, res) => {
+  res.json({ workspace: currentWorkspace });
+});
+
+// Set workspace
+router.post('/workspace', async (req, res) => {
+  const { workspace } = req.body;
+  if (!workspace) {
+    return res.status(400).json({ error: 'Workspace path is required' });
+  }
+  
+  try {
+    const exists = await fs.pathExists(workspace);
+    if (!exists) {
+      return res.status(404).json({ error: 'Directory does not exist' });
+    }
+    currentWorkspace = workspace;
+    await saveConfig(workspace);
+    res.json({ workspace: currentWorkspace });
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+// Choose directory (macOS only)
+router.post('/choose-directory', (req, res) => {
+  const command = `osascript -e 'POSIX path of (choose folder with prompt "Select a workspace folder")'`;
+  
+  exec(command, (error, stdout, stderr) => {
+    if (error) {
+      // User cancelled or other error
+      return res.status(400).json({ cancelled: true });
+    }
+    const selectedPath = stdout.trim();
+    if (selectedPath) {
+      res.json({ path: selectedPath });
+    } else {
+      res.status(400).json({ cancelled: true });
+    }
+  });
+});
+
+// List projects in workspace
+router.get('/projects', async (req, res) => {
+  try {
+    const items = await fs.readdir(currentWorkspace, { withFileTypes: true });
+    const projects = [];
+    
+    for (const item of items) {
+      if (item.isDirectory()) {
+        const projectPath = path.join(currentWorkspace, item.name);
+        // Simple check if it's a project (e.g., has package.json or just is a dir)
+        // For prototype projects, we'll assume any directory is a potential project
+        // Or check for specific marker if needed. Let's just list directories.
+        projects.push({
+          name: item.name,
+          path: projectPath,
+          modified: (await fs.stat(projectPath)).mtime
+        });
+      }
+    }
+    
+    // Sort by modified time desc
+    projects.sort((a, b) => b.modified - a.modified);
+    
+    res.json({ projects });
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+// Create new project
+router.post('/projects', async (req, res) => {
+  const { name, template } = req.body;
+  
+  if (!name) {
+    return res.status(400).json({ error: 'Project name is required' });
+  }
+  
+  const targetPath = path.join(currentWorkspace, name);
+  
+  try {
+    if (await fs.pathExists(targetPath)) {
+      return res.status(400).json({ error: 'Project already exists' });
+    }
+    
+    // Use template if provided
+    if (template) {
+      const templatePath = path.join(__dirname, '../templates', template);
+      if (await fs.pathExists(templatePath)) {
+        await fs.copy(templatePath, targetPath);
+      } else {
+        return res.status(400).json({ error: 'Template not found' });
+      }
+    } else {
+      await fs.ensureDir(targetPath);
+      // Create a basic index.html if no template
+      await fs.writeFile(path.join(targetPath, 'index.html'), '<h1>Hello Trae!</h1>');
+    }
+    
+    res.json({ success: true, path: targetPath });
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+// Open project in Trae
+router.post('/open', (req, res) => {
+  const { projectPath } = req.body;
+  
+  if (!projectPath) {
+    return res.status(400).json({ error: 'Project path is required' });
+  }
+  
+  // Use the trae-cn:// protocol
+  // Format: trae-cn://file/<path>?windowId=_blank
+  // Note: <path> should start with / if it's absolute, so it becomes trae-cn://file//path/to/project?windowId=_blank
+  
+  const protocolUrl = `trae-cn://file/${projectPath.startsWith('/') ? '' : '/'}${projectPath}?windowId=_blank`;
+  const command = `open "${protocolUrl}"`;
+  
+  exec(command, (error, stdout, stderr) => {
+    if (error) {
+      console.error(`exec error: ${error}`);
+      return res.status(500).json({ error: 'Failed to open Trae protocol URL.' });
+    }
+    res.json({ success: true });
+  });
+});
+
+// Get available templates
+router.get('/templates', async (req, res) => {
+  const templatesDir = path.join(__dirname, '../templates');
+  try {
+    await fs.ensureDir(templatesDir);
+    const items = await fs.readdir(templatesDir, { withFileTypes: true });
+    const templates = items
+      .filter(item => item.isDirectory())
+      .map(item => item.name);
+    res.json({ templates });
+  } catch (error) {
+    res.status(500).json({ error: error.message });
+  }
+});
+
+module.exports = router;