feat: Add new Frontend

frontend/.editorconfig

@@ -0,0 +1,23 @@
+[*.{js,jsx,ts,tsx}]
+indent_style = space
+indent_size = 4
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.html]
+indent_style = space
+indent_size = 4
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.json]
+indent_style = space
+indent_size = 4
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.yml]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true

frontend/.gitignore

@@ -10,6 +10,7 @@ lerna-debug.log*
 node_modules
 dist
 dist-ssr
+ssl
 *.local
 
 # Editor directories and files

frontend/.prettierrc

@@ -1,6 +1,26 @@
 {
-  "importOrder": ["^@/(.*)$", "^[./]"],
-  "importOrderSeparation": true,
-  "importOrderSortSpecifiers": true,
-  "plugins": ["@trivago/prettier-plugin-sort-imports"]
+    "printWidth": 120,
+    "tabWidth": 4,
+    "useTabs": false,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "all",
+    "singleAttributePerLine": true,
+    "endOfLine": "auto",
+    "plugins": ["prettier-plugin-tailwindcss", "prettier-plugin-organize-imports"],
+    "overrides": [
+        {
+            "files": ["*.yml"],
+            "options": {
+                "tabWidth": 2
+            }
+        },
+        {
+            "files": ["*.xml"],
+            "options": {
+                "parser": "xml",
+                "plugins": ["@prettier/plugin-xml"]
+            }
+        }
+    ]
 }

frontend/README.md

@@ -1,30 +1,124 @@
-# React + TypeScript + Vite
+# PegtAGI Frontend
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+A chat application built with React, TypeScript, and GraphQL that enables intelligent conversations with AI agents.
 
-Currently, two official plugins are available:
+## Features
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+-   💬 Real-time chat interface with AI agents
+-   🤖 Multiple AI agent support and management
+-   📊 Real-time terminal output monitoring
+-   🎯 Task and subtask tracking system
+-   🔍 Integrated search capabilities
+-   📚 Vector store for knowledge base management
+-   📸 Screenshot capture and management
+-   🌓 Dark/Light theme support
+-   📱 Responsive design (mobile, tablet, desktop)
+-   🔐 Authentication system with multiple providers
+-   🔄 Real-time updates via GraphQL subscriptions
+-   ⚡ High-performance React components
 
-## Expanding the ESLint configuration
+## Tech Stack
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+-   **Framework**: React 18 with TypeScript
+-   **Build Tool**: Vite
+-   **Styling**: Tailwind CSS
+-   **UI Components**:
+    -   shadcn/ui
+    -   Radix UI primitives
+    -   Lucide icons
+-   **State Management**:
+    -   React Context
+    -   Custom Hooks
+-   **API Integration**:
+    -   GraphQL
+    -   Apollo Client
+    -   WebSocket subscriptions
+-   **Type Safety**: TypeScript
+-   **Authentication**: Multiple provider support
+-   **Code Quality**:
+    -   ESLint
+    -   Prettier
+    -   TypeScript strict mode
 
-- Configure the top-level `parserOptions` property like this:
+## Project Structure
 
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: "latest",
-    sourceType: "module",
-    project: ["./tsconfig.json", "./tsconfig.node.json"],
-    tsconfigRootDir: __dirname,
-  },
-};
-```
+src/
+├── components/ # Shared UI components
+│ ├── ui/ # Base UI components
+│ └── icons/ # SVG icons and logo
+├── features/ # Feature-based modules
+│ ├── chat/ # Chat related components
+│ ├── authentication/ # Auth related components
+├── hooks/ # Custom React hooks
+├── lib/ # Utilities and configurations
+├── graphql/ # GraphQL operations and types
+├── models/ # TypeScript interfaces
+└── pages/ # Application routes
 
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+## Key Components
+
+### Chat Interface
+
+-   Split view with messages and tools panels
+-   Resizable panels for desktop
+-   Mobile-optimized view with tabs
+-   Real-time message updates
+
+### Task System
+
+-   Real-time task tracking
+-   Subtask management
+-   Progress monitoring
+-   Status updates
+
+### Terminal
+
+-   Command output display
+-   Real-time updates
+-   Scrollable history
+-   Syntax highlighting
+
+### Vector Store
+
+-   Knowledge base integration
+-   Search capabilities
+-   Data management
+
+### Agent System
+
+-   Multi-agent support
+-   Agent status monitoring
+-   Agent communication logs
+
+## Development
+
+### Prerequisites
+
+-   Node.js 18+
+-   npm 8+
+
+### Installation
+
+1. Clone the repository
+2. Install dependencies:
+   npm install
+3. Start the development server:
+   npm run dev
+
+### Building for Production
+
+npm run build
+
+### Environment Variables
+
+Create a .env file in the root directory:
+
+VITE_API_URL=your_api_url
+
+## Contributing
+
+1. Fork the repository
+2. Create your feature branch (git checkout -b feature/amazing-feature)
+3. Commit your changes (git commit -m 'Add some amazing feature')
+4. Push to the branch (git push origin feature/amazing-feature)
+5. Open a Pull Request

frontend/commitlint.config.ts

@@ -0,0 +1 @@
+export default { extends: ['@commitlint/config-conventional'] };

frontend/components.json

@@ -0,0 +1,20 @@
+{
+    "$schema": "https://ui.shadcn.com/schema.json",
+    "style": "new-york",
+    "rsc": false,
+    "tsx": true,
+    "tailwind": {
+        "config": "tailwind.config.ts",
+        "css": "src/styles/index.css",
+        "baseColor": "slate",
+        "cssVariables": true,
+        "prefix": ""
+    },
+    "aliases": {
+        "components": "@/components",
+        "utils": "@/lib/utils",
+        "ui": "@/components/ui",
+        "lib": "@/lib",
+        "hooks": "@/hooks"
+    }
+}

frontend/eslint.config.mjs

@@ -0,0 +1,40 @@
+// @ts-check
+import { defineConfig } from 'eslint-config-hyoban';
+
+export default defineConfig(
+    {
+        formatting: {
+            quotes: 'single',
+            arrowParens: true,
+            braceStyle: '1tbs',
+            lineBreak: 'after',
+            semi: true,
+            indent: 4,
+        },
+        lessOpinionated: true,
+        preferESM: false,
+        ignores: ['public/mockServiceWorker.js', 'src/components/ui', 'pnpm-lock.yaml'],
+    },
+    {
+        settings: {
+            tailwindcss: {
+                whitelist: ['center'],
+            },
+        },
+        rules: {
+            '@stylistic/indent': ['error', 4],
+            'unicorn/template-indent': ['error', { indent: 4 }],
+            '@stylistic/quote-props': ['error', 'as-needed'],
+            '@stylistic/operator-linebreak': [
+                'error',
+                'after',
+                {
+                    overrides: {
+                        '?': 'before',
+                        ':': 'before',
+                    },
+                },
+            ],
+        },
+    },
+);