Merge pull request #21 from HuynhThuong0711/codex/giai-thich-ma-goc-cho-nguoi-moi-7lss8n Merge pull request #16 from HuynhThuong0711/codex/github-mention-scaffold-add-web-next.js-app,-api-fastify-m-ixlftb Merge pull request #13 from HuynhThuong0711/codex/github-mention-scaffold-add-web-next.js-app,-api-fastify-m Merge pull request #12 from HuynhThuong0711/codex/giai-thich-ma-goc-cho-nguoi-moi-7lss8n Merge pull request #4 from HuynhThuong0711/codex/github-mention-scaffold-add-web-next.js-app,-api-fastify-m-ixlftb fix: add @codexpr/shared workspace and adjust config for scaffold validation

.gitignore

@@ -228,6 +228,9 @@ PublishScripts/
 *.snupkg
 # The packages folder can be ignored because of Package Restore
 **/[Pp]ackages/*
+!packages/
+!packages/shared/
+!packages/shared/**
 # except build/, which is used as an MSBuild target.
 !**/[Pp]ackages/build/
 # Uncomment if necessary however generally it will be regenerated when needed
@@ -427,3 +430,11 @@ FodyWeavers.xsd
 *.msix
 *.msm
 *.msp
+
+# Static build output
+dist/
+
+# Next.js build output
+.next/
+apps/web/.next/
+apps/api/dist/

README.md

@@ -1,4 +1,10 @@
-# CodeXPR 
+# CodeXPR — AI-Craft Studio
+
+AI-Craft Studio là nền tảng IDE thế hệ mới theo triết lý **Chat-to-Build**: người dùng mô tả ý tưởng bằng ngôn ngữ tự nhiên, AI Dev Agent đọc repository, tạo branch, chỉnh sửa mã, chạy kiểm thử, commit, push và tạo Pull Request.
+
+## Kiến trúc mục tiêu
+
+```text
 Frontend (Next.js + React)
         │
         ▼
@@ -19,63 +25,110 @@ Backend (Node.js/Fastify)
              Commit
              Push branch
              Create Pull Request
+```
+
+## Cấu trúc repository
+
+```text
+apps/web/                 # Frontend Next.js 15 + React
+  app/                    # App Router pages, layout và global styles
+  components/             # UI modules: app shell, workspace, operations, data, icons
+apps/api/                 # Backend Node.js/Fastify skeleton
+  src/server.ts           # REST + WebSocket endpoints
+  src/*-service.ts        # Agent, deploy, auth, analytics mock services
+packages/shared/          # Types dùng chung frontend/backend
+scripts/validate-structure.mjs
+vercel.json               # Cấu hình deploy frontend lên Vercel
+```
+
+## Pages đã bổ sung
+
+- `/` — landing tổng quan, workplace, operations, analytics và architecture.
+- `/dashboard` — bảng điều khiển dự án, repository, task log và analytics.
+- `/workplace` — không gian chat-to-build với AI Dev Agent, repository và logs.
+- `/tool-hub` — tab phụ trợ: Terminal, Configuration, Knowledge Base, Prompt Editor, Metrics, Playground.
+- `/run-management` — quản lý lệnh terminal, workflow và output realtime.
+- `/deploy` — thiết lập deploy Production/Staging, env vars, progress và activity logs.
+- `/auth-center` — phê duyệt quyền truy cập URL/Google/GitHub/Vercel cho AI Agent.
+- `/analytics` — dashboard phân tích realtime với cards và biểu đồ CSS.
+- `/settings` — cấu hình hệ thống theo hướng không tham số.
+
+## Chức năng đã dựng trong source
+
+- Frontend Next.js + React với bố cục IDE gồm Sidebar, Repositories, Chat, Tasks, Settings và Task Log.
+- Chat với AI Dev Agent, gợi ý xác nhận trước khi build và trạng thái Thinking / Working.
+- Khu task log mô phỏng luồng Clone Repository → Install → Edit code → Run tests → Commit → Push branch → Create Pull Request.
+- Tool Hub gồm Terminal, Configuration, Knowledge Base, Prompt Editor, Metrics và Playground.
+- Run Management, Deploy Setup, Authorization Center và Realtime Analytics Dashboard.
+- Backend Fastify skeleton với REST endpoints cho repositories, chat, build task, deploy setup, authorization, analytics, draft PR và WebSocket stream log.
+- Shared TypeScript contracts cho messages, repositories, tasks, PR drafts và deploy target.
+
+## Công nghệ
+
+- Frontend: Next.js 15, React, CSS responsive/glassmorphism.
+- Backend: Node.js, Fastify.
+- Queue/Cache dự kiến: Redis + BullMQ.
+- Database dự kiến: PostgreSQL.
+- Sandbox dự kiến: Docker hoặc Firecracker.
+- AI dự kiến: OpenAI Responses API.
+- Git dự kiến: GitHub App + GitHub API.
+- Deploy dự kiến: Vercel + VPS.
+
+## Chạy dự án
+
+Cài dependencies khi có quyền truy cập registry npm:
+
+```bash
+npm install
+```
+
+Chạy frontend:
+
+```bash
+npm run dev:web
+```
+
+Chạy backend:
+
+```bash
+npm run dev:api
+```
+
+Kiểm tra cấu trúc source không cần dependency ngoài:
+
+```bash
+npm run lint
+```
+
+Build production sau khi đã cài dependencies:
+
+```bash
+npm run build
+```
+
+## Deploy lên Vercel
+
+Repository đã có `vercel.json` trỏ Vercel build vào frontend Next.js:
+
+```bash
+npm run deploy:vercel
+```
+
+Trong môi trường CI/CD, cấu hình các biến sau trên Vercel trước khi deploy thật:
+
+- `OPENAI_API_KEY`
+- `GITHUB_APP_ID`
+- `GITHUB_APP_PRIVATE_KEY`
+- `DATABASE_URL`
+- `REDIS_URL`
+- `SANDBOX_DRIVER`
+
+Lưu ý: backend Fastify hiện là skeleton chạy riêng; khi deploy production cần chọn chiến lược server riêng/VPS hoặc chuyển các endpoint cần thiết thành Next.js Route Handlers/serverless functions.
 
-Chức năng chính
-🤖 Chat với AI.
-📂 Kết nối GitHub.
-🌿 Tự tạo branch.
-📝 AI đọc toàn bộ repository.
-🔧 Viết và sửa code.
-🧪 Chạy build, lint, test.
-📊 Hiển thị log thời gian thực.
-📄 Tạo Pull Request.
-🔄 Chạy nhiều task song song.
-💬 Lưu lịch sử hội thoại.
-Công nghệ
-Frontend: Next.js 15, React, Tailwind CSS, shadcn/ui.
-Backend: Node.js, Fastify.
-Database: PostgreSQL.
-Cache/Queue: Redis + BullMQ.
-Sandbox: Docker hoặc Firecracker.
-AI: OpenAI Responses API.
-Git: GitHub App + GitHub API.
-Deploy: Vercel + VPS.
-Giao diện
-Bố cục có thể gồm:
-+-----------------------------------------+
-| Sidebar                                 |
-| - Repositories                          |
-| - Chats                                 |
-| - Tasks                                 |
-| - Settings                              |
-+-------------+---------------------------+
-|             |                           |
-| Chat        | Task Log                  |
-|             |                           |
-| AI          | Build                     |
-|             | Tests                     |
-|             | Git                       |
-+-------------+---------------------------+
-Thương hiệu
-Không nên dùng các tên như:
-ChatGPT
-Codex
-OpenAI
-Có thể xây dựng thương hiệu riêng, ví dụ:
-RKix Studio
-RKix Agent
-RKix Build
-RKix Dev
-RKix Cloud
-Nova Build
-ForgeAI
-Khả năng
-Sản phẩm có thể đạt khoảng 90–95% trải nghiệm của Codex Cloud, nếu triển khai đầy đủ:
-GitHub App.
-Sandbox an toàn.
-Quản lý nhiều agent.
-Streaming phản hồi.
-Chỉnh sửa mã trực tiếp.
-Pull Request tự động.
-Đây là một dự án khá lớn, ước tính khoảng 30.000–50.000 dòng mã nếu xây dựng đầy đủ và ở mức production. Với mục tiêu của mày, nên phát triển theo từng giai đoạn: trước tiên hoàn thành MVP (chat + GitHub + chỉnh sửa mã + tạo PR), sau đó mới bổ sung sandbox nâng cao, chạy nhiều agent và các tính năng tự động hóa khác.
+## Lộ trình MVP
 
+1. Hoàn thiện chat + GitHub App + repository indexing.
+2. Thêm BullMQ worker để chạy clone/install/edit/test trong sandbox.
+3. Tích hợp OpenAI Responses API cho agent loop và self-review.
+4. Tạo Pull Request tự động sau khi build/lint/test thành công.
+5. Bổ sung sandbox nâng cao, multi-agent, deploy automation và authorization center thật.

apps/api/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@codexpr/api",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "tsx src/server.ts",
+    "build": "tsc -p tsconfig.json"
+  }
+}

apps/api/src/agent-service.ts

@@ -0,0 +1,40 @@
+import type { AgentTask, ChatMessage, PullRequestDraft, RepositorySummary } from '@codexpr/shared';
+
+export class AgentService {
+  private readonly repositories: RepositorySummary[] = [
+    { id: 'repo-1', name: 'nova-commerce', provider: 'github', defaultBranch: 'main', activeBranch: 'agent/checkout-flow', status: 'ready' },
+  ];
+
+  async listRepositories() {
+    return this.repositories;
+  }
+
+  async createChatTurn(content: string): Promise<ChatMessage> {
+    return {
+      id: `agent-${Date.now()}`,
+      role: 'agent',
+      content: `Đã nhận yêu cầu: "${content}". Gợi ý: chọn scope, xác nhận branch, chạy sandbox build.`,
+      createdAt: new Date().toISOString(),
+      suggestions: ['Xác nhận scope', 'Tạo branch', 'Chạy build', 'Mở PR'],
+    };
+  }
+
+  async queueBuildTask(repositoryId: string): Promise<AgentTask> {
+    return {
+      id: `task-${Date.now()}`,
+      title: `Build ${repositoryId}`,
+      status: 'queued',
+      progress: 0,
+      logs: ['Task queued for BullMQ worker', 'Waiting for sandbox capacity'],
+    };
+  }
+
+  async draftPullRequest(): Promise<PullRequestDraft> {
+    return {
+      repository: 'nova-commerce',
+      branch: 'agent/checkout-flow',
+      title: 'AI Agent build: checkout flow',
+      checks: ['build', 'lint', 'test', 'self-review'],
+    };
+  }
+}

apps/api/src/analytics-service.ts

@@ -0,0 +1,11 @@
+export class AnalyticsService {
+  summary() {
+    return {
+      tasks: 128,
+      pullRequests: 24,
+      successRate: 0.94,
+      estimatedCostUsd: 8.42,
+      updatedAt: new Date().toISOString(),
+    };
+  }
+}

apps/api/src/auth-service.ts

@@ -0,0 +1,14 @@
+export class AuthorizationService {
+  private readonly requests = [
+    { id: 'auth-1', app: 'Google Drive', url: 'https://drive.google.com', scope: 'Read docs', state: 'pending' },
+    { id: 'auth-2', app: 'GitHub', url: 'https://github.com/rkix/nova-commerce', scope: 'Create branch + PR', state: 'approved' },
+  ];
+
+  listRequests() {
+    return this.requests;
+  }
+
+  approve(id: string) {
+    return { id, state: 'approved', approvedAt: new Date().toISOString() };
+  }
+}

apps/api/src/config.ts

@@ -0,0 +1,7 @@
+export const config = {
+  port: Number(process.env.PORT ?? 4000),
+  databaseUrl: process.env.DATABASE_URL ?? 'postgres://localhost:5432/codexpr',
+  redisUrl: process.env.REDIS_URL ?? 'redis://localhost:6379',
+  githubAppId: process.env.GITHUB_APP_ID ?? 'local-dev',
+  sandboxDriver: process.env.SANDBOX_DRIVER ?? 'docker',
+};

apps/api/src/deployment-service.ts

@@ -0,0 +1,21 @@
+import type { DeployTarget } from '@codexpr/shared';
+
+export class DeploymentService {
+  private readonly targets: DeployTarget[] = [
+    { environment: 'production', status: 'processing', url: 'https://nova-commerce.vercel.app' },
+    { environment: 'staging', status: 'complete', url: 'https://nova-commerce-staging.vercel.app' },
+  ];
+
+  listTargets() {
+    return this.targets;
+  }
+
+  startSetup(environment: DeployTarget['environment']) {
+    return {
+      environment,
+      status: 'processing' as const,
+      progress: 12,
+      logs: ['Validate Vercel project', 'Sync encrypted environment variables', 'Prepare build command'],
+    };
+  }
+}

apps/api/src/server.ts

@@ -0,0 +1,63 @@
+import Fastify from 'fastify';
+import cors from '@fastify/cors';
+import websocket from '@fastify/websocket';
+import { z } from 'zod';
+import { AgentService } from './agent-service.js';
+import { AnalyticsService } from './analytics-service.js';
+import { AuthorizationService } from './auth-service.js';
+import { config } from './config.js';
+import { DeploymentService } from './deployment-service.js';
+
+const server = Fastify({ logger: true });
+const agentService = new AgentService();
+const deploymentService = new DeploymentService();
+const authorizationService = new AuthorizationService();
+const analyticsService = new AnalyticsService();
+
+await server.register(cors, { origin: true });
+await server.register(websocket);
+
+server.get('/health', async () => ({ status: 'ok', service: 'codexpr-api' }));
+
+server.get('/repositories', async () => agentService.listRepositories());
+
+server.post('/chat', async (request) => {
+  const body = z.object({ content: z.string().min(1) }).parse(request.body);
+  return agentService.createChatTurn(body.content);
+});
+
+server.post('/tasks/build', async (request) => {
+  const body = z.object({ repositoryId: z.string().min(1) }).parse(request.body);
+  return agentService.queueBuildTask(body.repositoryId);
+});
+
+server.post('/pull-requests/draft', async () => agentService.draftPullRequest());
+
+server.get('/deploy/targets', async () => deploymentService.listTargets());
+
+server.post('/deploy/setup', async (request) => {
+  const body = z.object({ environment: z.enum(['production', 'staging']) }).parse(request.body);
+  return deploymentService.startSetup(body.environment);
+});
+
+server.get('/auth/requests', async () => authorizationService.listRequests());
+
+server.post('/auth/requests/:id/approve', async (request) => {
+  const params = z.object({ id: z.string().min(1) }).parse(request.params);
+  return authorizationService.approve(params.id);
+});
+
+server.get('/analytics/summary', async () => analyticsService.summary());
+
+server.get('/logs/stream', { websocket: true }, (connection) => {
+  const events = ['Clone Repository', 'Install', 'Edit code', 'Run tests', 'Commit', 'Push branch', 'Create Pull Request'];
+  let index = 0;
+  const timer = setInterval(() => {
+    connection.socket.send(JSON.stringify({ event: events[index], at: new Date().toISOString() }));
+    index += 1;
+    if (index >= events.length) clearInterval(timer);
+  }, 1000);
+  connection.socket.on('close', () => clearInterval(timer));
+});
+
+server.listen({ port: config.port, host: '0.0.0.0' });

apps/api/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "../..",
+    "noEmit": false,
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts"]
+}

apps/web/app/analytics/page.tsx

@@ -0,0 +1,6 @@
+import { AppShell, PageHero } from '../../components/app-shell';
+import { AnalyticsDashboard } from '../../components/operations';
+
+export default function AnalyticsPage() {
+  return <AppShell><PageHero eyebrow="Analytics" title="Dashboard phân tích realtime" description="Tổng hợp task, Pull Request, tỉ lệ thành công, token cost và trạng thái workflow từ toàn bộ hệ thống." /><AnalyticsDashboard /></AppShell>;
+}