Rename Auto Tasks to Tasks, fix SVG with proper PROMPT.md guidelines
This commit is contained in:
parent
d1dec9fe29
commit
89eef18cf6
9 changed files with 921 additions and 352 deletions
|
|
@ -31,7 +31,7 @@ http://localhost:8080/console → Terminal mode
|
|||
|-----|---------|
|
||||
| Chat | AI assistant conversations |
|
||||
| Drive | File management |
|
||||
| Auto Tasks | LLM-powered intelligent execution |
|
||||
| Tasks | LLM-powered intelligent execution |
|
||||
| Mail | Email client |
|
||||
| Calendar | Scheduling |
|
||||
| Meet | Video calls |
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ Click any app icon in the top-right menu (⋮⋮⋮) to open it.
|
|||
|-----|--------------|
|
||||
| 💬 **Chat** | Talk to your AI assistant |
|
||||
| 📁 **Drive** | Store and organize your files |
|
||||
| ⚡ **Auto Tasks** | LLM-powered intelligent task execution |
|
||||
| ⚡ **Tasks** | LLM-powered intelligent task execution |
|
||||
| ✉ **Mail** | Send and receive emails |
|
||||
| 📅 **Calendar** | Schedule meetings and events |
|
||||
| 🎥 **Meet** | Video calls with your team |
|
||||
|
|
@ -38,7 +38,7 @@ Click any app icon in the top-right menu (⋮⋮⋮) to open it.
|
|||
|-------|-------|
|
||||
| `Alt + 1` | Chat |
|
||||
| `Alt + 2` | Drive |
|
||||
| `Alt + 3` | Auto Tasks |
|
||||
| `Alt + 3` | Tasks |
|
||||
| `Alt + 4` | Mail |
|
||||
| `Alt + 5` | Calendar |
|
||||
| `Alt + 6` | Meet |
|
||||
|
|
@ -59,7 +59,7 @@ Learn more about each app:
|
|||
|
||||
- [Chat](./chat.md) - Talk to your AI assistant
|
||||
- [Drive](./drive.md) - Manage your files
|
||||
- [Auto Tasks](./tasks.md) - LLM-powered intelligent execution
|
||||
- [Tasks](./tasks.md) - LLM-powered intelligent execution
|
||||
- [Mail](./mail.md) - Handle your email
|
||||
- [Calendar](./calendar.md) - Manage your schedule
|
||||
- [Meet](./meet.md) - Join video calls
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ The Suite includes integrated applications:
|
|||
|-----|---------|
|
||||
| 💬 Chat | AI assistant conversations |
|
||||
| 📁 Drive | File management |
|
||||
| ⚡ Auto Tasks | LLM-powered intelligent execution |
|
||||
| ⚡ Tasks | LLM-powered intelligent execution |
|
||||
| ✉ Mail | Email client |
|
||||
| 📅 Calendar | Scheduling |
|
||||
| 🎥 Meet | Video calls |
|
||||
|
|
|
|||
|
|
@ -1,18 +1,21 @@
|
|||
# Auto Tasks
|
||||
# Tasks
|
||||
|
||||
> **LLM-Powered Intelligent Task Execution**
|
||||
> **The machine does the work**
|
||||
|
||||
---
|
||||
|
||||
<img src="../../assets/chapter-04/autotask-interface.svg" alt="Auto Tasks Interface" style="max-width: 100%; height: auto;">
|
||||
<img src="../../assets/chapter-04/autotask-interface.svg" alt="Tasks Interface" style="max-width: 100%; height: auto;">
|
||||
|
||||
## What is Auto Tasks?
|
||||
## What is Tasks?
|
||||
|
||||
Auto Tasks is a revolutionary approach to task automation. Instead of manually creating to-do items, you describe what you want to accomplish in natural language, and the LLM compiles your intent into an executable plan with automatic step-by-step execution.
|
||||
Tasks is where the machine does the work for you. Instead of manually tracking to-do items, you describe what you want to accomplish in natural language, and the system compiles your intent into an executable plan with automatic step-by-step execution.
|
||||
|
||||
**The old way:** Create a task → Do it yourself → Mark complete
|
||||
|
||||
**The Auto Tasks way:** Describe your goal → LLM plans it → System executes it → You approve critical steps
|
||||
| Old Way | Tasks Way |
|
||||
|---------|-----------|
|
||||
| Create a task | Describe your goal |
|
||||
| Do it yourself | Machine plans it |
|
||||
| Mark complete | Machine executes it |
|
||||
| Repeat | You approve critical steps |
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -20,33 +23,35 @@ Auto Tasks is a revolutionary approach to task automation. Instead of manually c
|
|||
|
||||
| Step | What Happens |
|
||||
|------|--------------|
|
||||
| **1. Describe Intent** | Write what you want in plain English |
|
||||
| **2. Compile & Plan** | LLM analyzes intent, generates execution plan |
|
||||
| **3. Review Plan** | See steps, estimates, risks before execution |
|
||||
| **1. Describe** | Write what you want in plain English |
|
||||
| **2. Compile** | LLM analyzes intent, generates execution plan |
|
||||
| **3. Review** | See steps, estimates, risks before execution |
|
||||
| **4. Execute** | System runs the plan, pausing for approvals |
|
||||
| **5. Monitor** | Watch progress, make decisions when needed |
|
||||
|
||||
---
|
||||
|
||||
## Creating an Auto Task
|
||||
## Creating a Task
|
||||
|
||||
### 1. Write Your Intent
|
||||
### Write Your Intent
|
||||
|
||||
In the intent box, describe what you want to accomplish:
|
||||
|
||||
**Good examples:**
|
||||
- "Make a financial CRM for Deloitte with client management and reporting"
|
||||
- "Create a website that collects leads and sends them to Salesforce"
|
||||
- "Build an automated email campaign for our product launch"
|
||||
- "Analyze Q4 sales data and generate a PDF report with charts"
|
||||
| Good Examples |
|
||||
|---------------|
|
||||
| "Make a financial CRM for Deloitte with client management and reporting" |
|
||||
| "Create a website that collects leads and sends them to Salesforce" |
|
||||
| "Build an automated email campaign for our product launch" |
|
||||
| "Analyze Q4 sales data and generate a PDF report with charts" |
|
||||
|
||||
**Tips for better results:**
|
||||
|
||||
- Be specific about the outcome you want
|
||||
- Mention the client or project name
|
||||
- Include key features or requirements
|
||||
- Specify integrations if needed
|
||||
|
||||
### 2. Choose Execution Mode
|
||||
### Choose Execution Mode
|
||||
|
||||
| Mode | Best For | How It Works |
|
||||
|------|----------|--------------|
|
||||
|
|
@ -55,7 +60,7 @@ In the intent box, describe what you want to accomplish:
|
|||
| **Fully Automatic** | Trusted workflows | Runs everything without stopping |
|
||||
| **Dry Run** | Testing | Simulates execution without making changes |
|
||||
|
||||
### 3. Set Priority
|
||||
### Set Priority
|
||||
|
||||
| Priority | Meaning |
|
||||
|----------|---------|
|
||||
|
|
@ -65,9 +70,10 @@ In the intent box, describe what you want to accomplish:
|
|||
| **Low** | Run when resources available |
|
||||
| **Background** | Run during idle time |
|
||||
|
||||
### 4. Click "Compile & Plan"
|
||||
### Click Compile & Plan
|
||||
|
||||
The LLM will:
|
||||
|
||||
1. Extract entities (action, target, domain, client)
|
||||
2. Generate an execution plan with ordered steps
|
||||
3. Assess risks and estimate resources
|
||||
|
|
@ -77,44 +83,43 @@ The LLM will:
|
|||
|
||||
## Understanding the Execution Plan
|
||||
|
||||
After compilation, you'll see a detailed plan:
|
||||
After compilation, you see a detailed plan:
|
||||
|
||||
### Plan Header
|
||||
|
||||
- **Plan Name** - Auto-generated title for your task
|
||||
- **Description** - Summary of what will be accomplished
|
||||
- **Confidence** - How confident the LLM is in the plan (aim for 80%+)
|
||||
- **Risk Level** - Overall risk assessment (None/Low/Medium/High/Critical)
|
||||
- **Estimated Duration** - How long execution should take
|
||||
- **Estimated Cost** - API and compute costs
|
||||
| Field | Description |
|
||||
|-------|-------------|
|
||||
| **Plan Name** | Auto-generated title for your task |
|
||||
| **Description** | Summary of what will be accomplished |
|
||||
| **Confidence** | How confident the LLM is in the plan (aim for 80%+) |
|
||||
| **Risk Level** | Overall risk assessment (None/Low/Medium/High/Critical) |
|
||||
| **Estimated Duration** | How long execution should take |
|
||||
| **Estimated Cost** | API and compute costs |
|
||||
|
||||
### Execution Steps
|
||||
|
||||
Each step shows:
|
||||
- **Step Number & Priority** - Order and importance
|
||||
- **Step Name** - What this step does
|
||||
- **Keywords** - BASIC keywords that will be used
|
||||
- **Risk Level** - Risk for this specific step
|
||||
|
||||
### Resource Estimates
|
||||
|
||||
- **Compute** - Processing hours needed
|
||||
- **Storage** - Disk space required
|
||||
- **API Calls** - External API requests
|
||||
- **LLM Tokens** - Token consumption estimate
|
||||
| Field | Description |
|
||||
|-------|-------------|
|
||||
| **Step Number** | Order of execution |
|
||||
| **Priority** | CRITICAL, HIGH, MEDIUM, LOW |
|
||||
| **Step Name** | What this step does |
|
||||
| **Keywords** | BASIC keywords that will be used |
|
||||
| **Risk Level** | Risk for this specific step |
|
||||
|
||||
### Plan Actions
|
||||
|
||||
| Button | Action |
|
||||
|--------|--------|
|
||||
| **🗑️ Discard** | Delete the plan, start over |
|
||||
| **✏️ Edit Plan** | Modify steps before execution |
|
||||
| **🔮 Simulate** | Preview impact without executing |
|
||||
| **🚀 Execute** | Start running the plan |
|
||||
| **Discard** | Delete the plan, start over |
|
||||
| **Edit Plan** | Modify steps before execution |
|
||||
| **Simulate** | Preview impact without executing |
|
||||
| **Execute** | Start running the plan |
|
||||
|
||||
---
|
||||
|
||||
## Monitoring Active Tasks
|
||||
## Monitoring Tasks
|
||||
|
||||
### Task States
|
||||
|
||||
|
|
@ -133,14 +138,17 @@ Each step shows:
|
|||
|
||||
### Filter Tabs
|
||||
|
||||
- **All** - Every task regardless of status
|
||||
- **Running** - Currently executing tasks
|
||||
- **Need Approval** - Tasks waiting for your approval
|
||||
- **Decisions** - Tasks needing your input
|
||||
| Tab | Shows |
|
||||
|-----|-------|
|
||||
| **All** | Every task regardless of status |
|
||||
| **Running** | Currently executing tasks |
|
||||
| **Need Approval** | Tasks waiting for your approval |
|
||||
| **Decisions** | Tasks needing your input |
|
||||
|
||||
### Progress Tracking
|
||||
|
||||
Each task shows:
|
||||
|
||||
- Current step number and name
|
||||
- Progress bar with percentage
|
||||
- Time elapsed and estimated remaining
|
||||
|
|
@ -152,6 +160,7 @@ Each task shows:
|
|||
### When Approvals Are Required
|
||||
|
||||
High-impact actions require your approval:
|
||||
|
||||
- Sending emails to many recipients
|
||||
- Modifying production databases
|
||||
- Making external API calls with side effects
|
||||
|
|
@ -160,20 +169,27 @@ High-impact actions require your approval:
|
|||
|
||||
### Approval Dialog
|
||||
|
||||
When approval is needed, you'll see:
|
||||
- **Action description** - What will happen
|
||||
- **Impact summary** - What could be affected
|
||||
- **Risk level** - How risky this step is
|
||||
- **Simulation result** - Preview of the outcome
|
||||
When approval is needed, you see:
|
||||
|
||||
| Field | Description |
|
||||
|-------|-------------|
|
||||
| **Action description** | What will happen |
|
||||
| **Impact summary** | What could be affected |
|
||||
| **Risk level** | How risky this step is |
|
||||
| **Simulation result** | Preview of the outcome |
|
||||
|
||||
**Options:**
|
||||
- ✅ **Approve** - Continue execution
|
||||
- ⏸️ **Defer** - Decide later
|
||||
- ❌ **Reject** - Skip this step or stop execution
|
||||
|
||||
| Action | Result |
|
||||
|--------|--------|
|
||||
| **Approve** | Continue execution |
|
||||
| **Defer** | Decide later |
|
||||
| **Reject** | Skip this step or stop execution |
|
||||
|
||||
### Making Decisions
|
||||
|
||||
Sometimes the system needs your input:
|
||||
|
||||
- Choosing between alternative approaches
|
||||
- Selecting from multiple options
|
||||
- Providing missing information
|
||||
|
|
@ -186,47 +202,36 @@ Each option shows pros, cons, and impact estimates.
|
|||
|
||||
| Action | When Available | What It Does |
|
||||
|--------|----------------|--------------|
|
||||
| **👁️ Details** | Always | View full task information |
|
||||
| **🔮 Simulate** | Before execution | Preview impact |
|
||||
| **⏸️ Pause** | While running | Temporarily stop execution |
|
||||
| **▶️ Resume** | When paused | Continue execution |
|
||||
| **❌ Cancel** | Anytime | Stop and discard task |
|
||||
|
||||
---
|
||||
|
||||
## Execution Log
|
||||
|
||||
Expand any task to see its execution log:
|
||||
- Timestamp for each action
|
||||
- Step transitions
|
||||
- Approval/decision records
|
||||
- Error messages if any
|
||||
- Output from each step
|
||||
| **Details** | Always | View full task information |
|
||||
| **Simulate** | Before execution | Preview impact |
|
||||
| **Pause** | While running | Temporarily stop execution |
|
||||
| **Resume** | When paused | Continue execution |
|
||||
| **Cancel** | Anytime | Stop and discard task |
|
||||
|
||||
---
|
||||
|
||||
## Creating Tasks from Chat
|
||||
|
||||
You can also create Auto Tasks by talking to your bot:
|
||||
You can also create tasks by talking to your bot:
|
||||
|
||||
**You:** "I need to build a customer portal for Acme Corp"
|
||||
|
||||
**Bot:** "I'll create an Auto Task for that. Here's the plan:
|
||||
**Bot:** "I'll create a task for that. Here's the plan:
|
||||
- 5 steps, estimated 3 hours
|
||||
- Includes: database setup, authentication, dashboard, API integration
|
||||
- Risk: Low
|
||||
-
|
||||
|
||||
Should I execute this plan?"
|
||||
|
||||
**You:** "Yes, go ahead"
|
||||
|
||||
**Bot:** "🚀 Auto Task started. I'll notify you when approvals are needed."
|
||||
**Bot:** "Task started. I'll notify you when approvals are needed."
|
||||
|
||||
---
|
||||
|
||||
## Generated BASIC Code
|
||||
|
||||
Every Auto Task generates a BASIC program behind the scenes. You can view and copy this code:
|
||||
Every task generates a BASIC program behind the scenes. You can view and copy this code:
|
||||
|
||||
```bas
|
||||
' AUTO-GENERATED BASIC PROGRAM
|
||||
|
|
@ -246,6 +251,7 @@ SAVE_TABLE
|
|||
```
|
||||
|
||||
This code can be:
|
||||
|
||||
- Copied for manual execution
|
||||
- Modified and saved as a template
|
||||
- Reused for similar projects
|
||||
|
|
@ -256,22 +262,20 @@ This code can be:
|
|||
|
||||
### Writing Good Intents
|
||||
|
||||
✅ **Do:**
|
||||
- "Create a sales dashboard for Q4 data with charts showing revenue by region"
|
||||
- "Build an email drip campaign: welcome email, 3-day follow-up, 7-day offer"
|
||||
- "Analyze customer feedback CSV and generate sentiment report"
|
||||
|
||||
❌ **Don't:**
|
||||
- "Make something" (too vague)
|
||||
- "Do the thing we discussed" (no context)
|
||||
- "Fix it" (what needs fixing?)
|
||||
| Do | Don't |
|
||||
|----|-------|
|
||||
| "Create a sales dashboard for Q4 data with charts showing revenue by region" | "Make something" |
|
||||
| "Build an email drip campaign: welcome email, 3-day follow-up, 7-day offer" | "Do the thing we discussed" |
|
||||
| "Analyze customer feedback CSV and generate sentiment report" | "Fix it" |
|
||||
|
||||
### Choosing Execution Mode
|
||||
|
||||
- **New to Auto Tasks?** Start with Supervised mode
|
||||
- **Routine tasks?** Use Semi-Automatic
|
||||
- **Trusted, tested workflows?** Fully Automatic is fine
|
||||
- **Experimenting?** Always use Dry Run first
|
||||
| Situation | Recommended Mode |
|
||||
|-----------|------------------|
|
||||
| New to Tasks | Supervised |
|
||||
| Routine tasks | Semi-Automatic |
|
||||
| Trusted, tested workflows | Fully Automatic |
|
||||
| Experimenting | Dry Run |
|
||||
|
||||
### Managing Risk
|
||||
|
||||
|
|
@ -290,7 +294,7 @@ This code can be:
|
|||
- Avoid ambiguous language
|
||||
- Include necessary context (client name, data sources)
|
||||
|
||||
### Task Stuck on "Running"
|
||||
### Task Stuck on Running
|
||||
|
||||
- Check if an approval is pending
|
||||
- Look for decision requests
|
||||
|
|
@ -302,30 +306,25 @@ This code can be:
|
|||
- Use Dry Run to test first
|
||||
- Check the BASIC code for issues
|
||||
|
||||
### High Risk Warning
|
||||
|
||||
- Consider using Supervised mode
|
||||
- Review each step carefully
|
||||
- Use Simulate before Execute
|
||||
|
||||
---
|
||||
|
||||
## Settings
|
||||
|
||||
Configure Auto Tasks behavior in Settings:
|
||||
Configure Tasks behavior in Settings:
|
||||
|
||||
- **Default execution mode** - Your preferred mode
|
||||
- **Approval thresholds** - When to require approval
|
||||
- **Cost limits** - Maximum spend per task
|
||||
- **Notification preferences** - How to alert you
|
||||
- **Auto-cleanup** - Remove completed tasks after X days
|
||||
| Setting | Description |
|
||||
|---------|-------------|
|
||||
| **Default execution mode** | Your preferred mode |
|
||||
| **Approval thresholds** | When to require approval |
|
||||
| **Cost limits** | Maximum spend per task |
|
||||
| **Notification preferences** | How to alert you |
|
||||
| **Auto-cleanup** | Remove completed tasks after X days |
|
||||
|
||||
---
|
||||
|
||||
## See Also
|
||||
|
||||
- [Autonomous Task AI](../../07-gbapp/autonomous-tasks.md) - How the machine does the work
|
||||
- [CREATE SITE Keyword](../../06-gbdialog/keyword-create-site.md) - App generation details
|
||||
- [Calendar](./calendar.md) - Scheduled Auto Tasks appear here
|
||||
- [Chat](./chat.md) - Create tasks through conversation
|
||||
- [Analytics](./analytics.md) - Task execution metrics
|
||||
- [Autonomous Task AI](../../07-gbapp/autonomous-tasks.md) - Architecture details
|
||||
- [CREATE SITE](../../06-gbdialog/keyword-create-site.md) - App generation
|
||||
- [Calendar](./calendar.md) - Scheduled tasks
|
||||
- [Chat](./chat.md) - Create tasks through conversation
|
||||
|
|
@ -40,7 +40,7 @@ Click the **nine-dot grid** (⋮⋮⋮) in the top right to see all applications
|
|||
|------|-----|--------------|
|
||||
| 💬 | **Chat** | Talk with your AI assistant |
|
||||
| 📁 | **Drive** | Store and manage your files |
|
||||
| ⚡ | **Auto Tasks** | LLM-powered intelligent task execution |
|
||||
| ⚡ | **Tasks** | LLM-powered intelligent task execution |
|
||||
| ✉ | **Mail** | Send and receive emails |
|
||||
| 📅 | **Calendar** | Schedule meetings and events |
|
||||
| 🎥 | **Meet** | Video calls and meetings |
|
||||
|
|
@ -179,17 +179,17 @@ Drive is your file storage - like Google Drive or OneDrive. Store documents, ima
|
|||
|
||||
---
|
||||
|
||||
## Part IV: Auto Tasks - LLM-Powered Execution
|
||||
## Part IV: Tasks - LLM-Powered Execution
|
||||
|
||||
### What Auto Tasks Does
|
||||
### What Tasks Does
|
||||
|
||||
Auto Tasks revolutionizes how you work. Instead of manually tracking to-do items, you describe what you want to accomplish in natural language, and the LLM compiles your intent into an executable plan with automatic step-by-step execution.
|
||||
Tasks revolutionizes how you work. Instead of manually tracking to-do items, you describe what you want to accomplish in natural language, and the LLM compiles your intent into an executable plan with automatic step-by-step execution.
|
||||
|
||||
### The Auto Tasks Interface
|
||||
### The Tasks Interface
|
||||
|
||||
<img src="../assets/chapter-04/autotask-interface.svg" alt="Auto Tasks Interface" style="max-width: 100%; height: auto;">
|
||||
<img src="../assets/chapter-04/autotask-interface.svg" alt="Tasks Interface" style="max-width: 100%; height: auto;">
|
||||
|
||||
### Creating an Auto Task
|
||||
### Creating an Task
|
||||
|
||||
1. **Describe your intent** in the text area (e.g., "Build a CRM for Deloitte with client management")
|
||||
2. **Choose execution mode:**
|
||||
|
|
@ -240,17 +240,17 @@ High-impact actions pause for your approval:
|
|||
|
||||
Click **✅ Review & Approve** to see details and continue.
|
||||
|
||||
### Creating Auto Tasks from Chat
|
||||
### Creating Tasks from Chat
|
||||
|
||||
In Chat, just say:
|
||||
```
|
||||
You: I need to build a customer portal for Acme Corp
|
||||
Bot: I'll create an Auto Task for that. Here's the plan:
|
||||
Bot: I'll create an Task for that. Here's the plan:
|
||||
- 5 steps, estimated 3 hours
|
||||
- Risk: Low
|
||||
Should I execute this plan?
|
||||
You: Yes, go ahead
|
||||
Bot: 🚀 Auto Task started!
|
||||
Bot: 🚀 Task started!
|
||||
```
|
||||
|
||||
---
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@
|
|||
- [Suite - Full Desktop](./04-gbui/apps/suite.md)
|
||||
- [Chat - AI Assistant](./04-gbui/apps/chat.md)
|
||||
- [Drive - File Management](./04-gbui/apps/drive.md)
|
||||
- [Auto Tasks - LLM Execution](./04-gbui/apps/tasks.md)
|
||||
- [Tasks](./04-gbui/apps/tasks.md)
|
||||
- [Mail - Email Client](./04-gbui/apps/mail.md)
|
||||
- [Calendar - Scheduling](./04-gbui/apps/calendar.md)
|
||||
- [Meet - Video Calls](./04-gbui/apps/meet.md)
|
||||
|
|
|
|||
|
|
@ -1,265 +1,159 @@
|
|||
<svg width="1000" height="750" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg width="1000" height="700" xmlns="http://www.w3.org/2000/svg">
|
||||
<style>
|
||||
.bg { fill: #f5f5f5; }
|
||||
.frame { fill: none; stroke: #333; stroke-width: 2; }
|
||||
.header-bg { fill: #1a1a2e; }
|
||||
.section-bg { fill: #ffffff; }
|
||||
.main-text { fill: #1a1a1a; font-family: Arial, sans-serif; }
|
||||
.white-text { fill: #ffffff; font-family: Arial, sans-serif; }
|
||||
.secondary-text { fill: #666; font-family: Arial, sans-serif; }
|
||||
.accent-text { fill: #00D4FF; font-family: Arial, sans-serif; }
|
||||
.divider { stroke: #e0e0e0; stroke-width: 1; }
|
||||
.button-primary { fill: #00D4FF; }
|
||||
.button-secondary { fill: #2a2a3e; }
|
||||
.input-field { fill: #f8f9fa; stroke: #ddd; stroke-width: 1; }
|
||||
.card { fill: #ffffff; stroke: #e0e0e0; stroke-width: 1; }
|
||||
.badge-premium { fill: #FFD700; }
|
||||
.badge-running { fill: #00D4FF; }
|
||||
.badge-approval { fill: #FF6B35; }
|
||||
.badge-completed { fill: #4CAF50; }
|
||||
.badge-pending { fill: #9E9E9E; }
|
||||
.progress-bg { fill: #e0e0e0; }
|
||||
.progress-fill { fill: #00D4FF; }
|
||||
.risk-low { fill: #4CAF50; }
|
||||
.risk-medium { fill: #FF9800; }
|
||||
.risk-high { fill: #F44336; }
|
||||
.stat-card { fill: #2a2a3e; }
|
||||
.step-badge { fill: #e8f4fd; stroke: #00D4FF; stroke-width: 1; }
|
||||
.code-bg { fill: #1e1e1e; }
|
||||
.code-text { fill: #d4d4d4; font-family: 'Courier New', monospace; }
|
||||
.keyword { fill: #569cd6; }
|
||||
.string { fill: #ce9178; }
|
||||
.comment { fill: #6a9955; }
|
||||
.title-text { fill: #1E1B4B; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
|
||||
.main-text { fill: #334155; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
|
||||
.secondary-text { fill: #64748B; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
|
||||
.white-text { fill: #FFFFFF; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
|
||||
.mono-text { fill: #475569; font-family: 'SF Mono', 'Fira Code', Consolas, monospace; }
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.bg { fill: #0d0d1a; }
|
||||
.frame { stroke: #333; }
|
||||
.header-bg { fill: #1a1a2e; }
|
||||
.section-bg { fill: #1a1a2e; }
|
||||
.main-text { fill: #ffffff; }
|
||||
.secondary-text { fill: #aaa; }
|
||||
.divider { stroke: #333; }
|
||||
.input-field { fill: #2a2a3e; stroke: #444; }
|
||||
.card { fill: #1a1a2e; stroke: #333; }
|
||||
.step-badge { fill: #1a2a3e; stroke: #00D4FF; }
|
||||
.title-text { fill: #F1F5F9; }
|
||||
.main-text { fill: #E2E8F0; }
|
||||
.secondary-text { fill: #94A3B8; }
|
||||
.mono-text { fill: #CBD5E1; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<defs>
|
||||
<linearGradient id="primaryGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#6366F1"/>
|
||||
<stop offset="100%" style="stop-color:#8B5CF6"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="cyanGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#06B6D4"/>
|
||||
<stop offset="100%" style="stop-color:#0EA5E9"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="greenGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#10B981"/>
|
||||
<stop offset="100%" style="stop-color:#34D399"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="orangeGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#F59E0B"/>
|
||||
<stop offset="100%" style="stop-color:#FBBF24"/>
|
||||
</linearGradient>
|
||||
<pattern id="dots" patternUnits="userSpaceOnUse" width="20" height="20">
|
||||
<circle cx="2" cy="2" r="1" fill="#94A3B8"/>
|
||||
</pattern>
|
||||
<filter id="cardShadow" x="-10%" y="-10%" width="120%" height="120%">
|
||||
<feDropShadow dx="0" dy="2" stdDeviation="4" flood-opacity="0.1"/>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="1000" height="700" fill="#FAFBFC"/>
|
||||
<rect width="1000" height="700" fill="url(#dots)" opacity="0.08"/>
|
||||
|
||||
<!-- Title -->
|
||||
<text x="500" y="30" text-anchor="middle" font-size="20" font-weight="600" class="main-text">Auto Tasks - LLM-Powered Intelligent Task Execution</text>
|
||||
<text x="500" y="40" text-anchor="middle" font-size="24" font-weight="700" class="title-text">Tasks — The Machine Does the Work</text>
|
||||
<text x="500" y="65" text-anchor="middle" font-size="14" class="secondary-text">Describe your goal, the system executes it</text>
|
||||
|
||||
<!-- Main Frame -->
|
||||
<rect x="20" y="50" width="960" height="680" rx="8" class="frame bg"/>
|
||||
|
||||
<!-- Header Section -->
|
||||
<rect x="20" y="50" width="960" height="70" rx="8" class="header-bg"/>
|
||||
<rect x="20" y="112" width="960" height="8" class="bg"/>
|
||||
|
||||
<!-- Header Title -->
|
||||
<text x="50" y="85" font-size="22" font-weight="600" class="white-text">⚡ Auto Tasks</text>
|
||||
<rect x="175" y="70" width="70" height="22" rx="4" class="badge-premium"/>
|
||||
<text x="210" y="86" text-anchor="middle" font-size="11" font-weight="600" fill="#1a1a1a">PREMIUM</text>
|
||||
<text x="50" y="105" font-size="12" class="secondary-text">Intelligent self-executing tasks powered by AI</text>
|
||||
|
||||
<!-- Header Stats -->
|
||||
<g transform="translate(550, 60)">
|
||||
<rect x="0" y="0" width="100" height="50" rx="6" class="stat-card"/>
|
||||
<text x="50" y="22" text-anchor="middle" font-size="18" font-weight="600" class="accent-text">3</text>
|
||||
<text x="50" y="40" text-anchor="middle" font-size="11" class="secondary-text">Running</text>
|
||||
|
||||
<rect x="110" y="0" width="100" height="50" rx="6" class="stat-card"/>
|
||||
<text x="160" y="22" text-anchor="middle" font-size="18" font-weight="600" class="white-text">5</text>
|
||||
<text x="160" y="40" text-anchor="middle" font-size="11" class="secondary-text">Pending</text>
|
||||
|
||||
<rect x="220" y="0" width="100" height="50" rx="6" class="stat-card"/>
|
||||
<text x="270" y="22" text-anchor="middle" font-size="18" font-weight="600" class="white-text">12</text>
|
||||
<text x="270" y="40" text-anchor="middle" font-size="11" class="secondary-text">Completed</text>
|
||||
|
||||
<rect x="330" y="0" width="100" height="50" rx="6" class="stat-card" style="stroke: #FF6B35; stroke-width: 2;"/>
|
||||
<text x="380" y="22" text-anchor="middle" font-size="18" font-weight="600" style="fill: #FF6B35;">2</text>
|
||||
<text x="380" y="40" text-anchor="middle" font-size="11" class="secondary-text">Need Approval</text>
|
||||
</g>
|
||||
<!-- Header Stats Bar -->
|
||||
<rect x="50" y="90" width="900" height="60" rx="10" fill="url(#primaryGrad)" filter="url(#cardShadow)"/>
|
||||
<text x="120" y="125" font-size="13" class="white-text">Running</text>
|
||||
<text x="120" y="145" font-size="20" font-weight="700" class="white-text">3</text>
|
||||
<text x="270" y="125" font-size="13" class="white-text">Pending</text>
|
||||
<text x="270" y="145" font-size="20" font-weight="700" class="white-text">5</text>
|
||||
<text x="420" y="125" font-size="13" class="white-text">Completed</text>
|
||||
<text x="420" y="145" font-size="20" font-weight="700" class="white-text">12</text>
|
||||
<rect x="550" y="105" width="130" height="35" rx="6" fill="#FFFFFF" opacity="0.2"/>
|
||||
<text x="615" y="127" text-anchor="middle" font-size="13" font-weight="600" class="white-text">Need Approval: 2</text>
|
||||
|
||||
<!-- Intent Input Section -->
|
||||
<g transform="translate(40, 135)">
|
||||
<text x="0" y="20" font-size="14" font-weight="500" class="main-text">💡 What would you like to accomplish?</text>
|
||||
<rect x="50" y="170" width="900" height="130" rx="10" fill="#FFFFFF" stroke="#E2E8F0" filter="url(#cardShadow)"/>
|
||||
<text x="75" y="200" font-size="14" font-weight="600" class="main-text">What would you like to accomplish?</text>
|
||||
|
||||
<!-- Intent Textarea -->
|
||||
<rect x="0" y="30" width="700" height="80" rx="8" class="input-field"/>
|
||||
<text x="15" y="55" font-size="13" class="main-text">Make a financial CRM for Deloitte with client management</text>
|
||||
<text x="15" y="75" font-size="13" class="main-text">and automated reporting dashboards</text>
|
||||
<text x="15" y="98" font-size="11" class="secondary-text">Examples: • Create a website • Build an email campaign • Analyze sales data</text>
|
||||
<!-- Input Field -->
|
||||
<rect x="75" y="215" width="650" height="60" rx="8" fill="#F8FAFC" stroke="#E2E8F0"/>
|
||||
<text x="90" y="240" font-size="13" class="main-text">Make a financial CRM for Deloitte with client management</text>
|
||||
<text x="90" y="260" font-size="13" class="main-text">and automated reporting dashboards</text>
|
||||
|
||||
<!-- Controls Row -->
|
||||
<rect x="720" y="30" width="200" height="35" rx="6" class="input-field"/>
|
||||
<text x="735" y="53" font-size="12" class="main-text">Semi-Automatic ▼</text>
|
||||
<text x="730" y="78" font-size="10" class="secondary-text">Execution Mode</text>
|
||||
<!-- Controls -->
|
||||
<rect x="745" y="215" width="180" height="28" rx="6" fill="#F8FAFC" stroke="#E2E8F0"/>
|
||||
<text x="760" y="234" font-size="12" class="main-text">Semi-Automatic</text>
|
||||
<text x="910" y="234" font-size="12" class="secondary-text">▼</text>
|
||||
|
||||
<rect x="720" y="75" width="200" height="35" rx="6" class="button-primary"/>
|
||||
<text x="820" y="98" text-anchor="middle" font-size="13" font-weight="500" fill="#1a1a1a">🚀 Compile & Plan</text>
|
||||
</g>
|
||||
<rect x="745" y="250" width="180" height="32" rx="6" fill="url(#cyanGrad)"/>
|
||||
<text x="835" y="272" text-anchor="middle" font-size="13" font-weight="600" class="white-text">Compile & Plan</text>
|
||||
|
||||
<!-- Compilation Result Section -->
|
||||
<g transform="translate(40, 255)">
|
||||
<rect x="0" y="0" width="920" height="200" rx="8" class="card"/>
|
||||
<!-- Execution Plan Card -->
|
||||
<rect x="50" y="320" width="900" height="180" rx="10" fill="#FFFFFF" stroke="#E2E8F0" filter="url(#cardShadow)"/>
|
||||
<text x="75" y="350" font-size="16" font-weight="700" class="main-text">Financial CRM for Deloitte</text>
|
||||
<text x="75" y="372" font-size="12" class="secondary-text">Client management and automated reporting system</text>
|
||||
|
||||
<!-- Plan Header -->
|
||||
<text x="20" y="30" font-size="16" font-weight="600" class="main-text">Financial CRM for Deloitte</text>
|
||||
<text x="20" y="50" font-size="12" class="secondary-text">Client management and automated reporting system</text>
|
||||
<!-- Badges -->
|
||||
<rect x="75" y="385" width="100" height="24" rx="12" fill="url(#greenGrad)"/>
|
||||
<text x="125" y="402" text-anchor="middle" font-size="11" font-weight="500" class="white-text">Confidence: 94%</text>
|
||||
|
||||
<!-- Badges Row -->
|
||||
<g transform="translate(20, 60)">
|
||||
<rect x="0" y="0" width="110" height="24" rx="4" class="risk-low"/>
|
||||
<text x="55" y="16" text-anchor="middle" font-size="11" class="white-text">✓ Confidence: 94%</text>
|
||||
<rect x="185" y="385" width="80" height="24" rx="12" fill="url(#greenGrad)"/>
|
||||
<text x="225" y="402" text-anchor="middle" font-size="11" font-weight="500" class="white-text">Risk: Low</text>
|
||||
|
||||
<rect x="120" y="0" width="90" height="24" rx="4" class="risk-low"/>
|
||||
<text x="165" y="16" text-anchor="middle" font-size="11" class="white-text">Risk: Low</text>
|
||||
<rect x="275" y="385" width="100" height="24" rx="12" fill="#F1F5F9" stroke="#E2E8F0"/>
|
||||
<text x="325" y="402" text-anchor="middle" font-size="11" class="main-text">Est: 2.5 hours</text>
|
||||
|
||||
<rect x="220" y="0" width="120" height="24" rx="4" class="button-secondary"/>
|
||||
<text x="280" y="16" text-anchor="middle" font-size="11" class="white-text">⏱️ Est: 2.5 hours</text>
|
||||
<rect x="385" y="385" width="90" height="24" rx="12" fill="#F1F5F9" stroke="#E2E8F0"/>
|
||||
<text x="430" y="402" text-anchor="middle" font-size="11" class="main-text">Cost: $0.45</text>
|
||||
|
||||
<rect x="350" y="0" width="100" height="24" rx="4" class="button-secondary"/>
|
||||
<text x="400" y="16" text-anchor="middle" font-size="11" class="white-text">💰 Cost: $0.45</text>
|
||||
</g>
|
||||
<!-- Steps -->
|
||||
<text x="75" y="435" font-size="13" font-weight="600" class="main-text">Execution Plan (6 steps)</text>
|
||||
|
||||
<!-- Execution Plan Steps -->
|
||||
<text x="20" y="110" font-size="13" font-weight="500" class="main-text">📋 Execution Plan (6 steps)</text>
|
||||
<!-- Step boxes -->
|
||||
<rect x="75" y="445" width="130" height="45" rx="6" fill="#EEF2FF" stroke="#6366F1"/>
|
||||
<text x="85" y="462" font-size="9" font-weight="600" fill="#6366F1">STEP 1 • CRITICAL</text>
|
||||
<text x="85" y="478" font-size="11" class="main-text">Create database</text>
|
||||
|
||||
<g transform="translate(20, 120)">
|
||||
<!-- Step 1 -->
|
||||
<rect x="0" y="0" width="140" height="55" rx="6" class="step-badge"/>
|
||||
<text x="10" y="18" font-size="10" font-weight="600" class="accent-text">STEP 1 • CRITICAL</text>
|
||||
<text x="10" y="35" font-size="11" class="main-text">Create database</text>
|
||||
<text x="10" y="48" font-size="10" class="secondary-text">NEW_TABLE, COLUMN</text>
|
||||
<rect x="215" y="445" width="130" height="45" rx="6" fill="#EEF2FF" stroke="#6366F1"/>
|
||||
<text x="225" y="462" font-size="9" font-weight="600" fill="#6366F1">STEP 2 • HIGH</text>
|
||||
<text x="225" y="478" font-size="11" class="main-text">Setup auth</text>
|
||||
|
||||
<!-- Step 2 -->
|
||||
<rect x="150" y="0" width="140" height="55" rx="6" class="step-badge"/>
|
||||
<text x="160" y="18" font-size="10" font-weight="600" class="accent-text">STEP 2 • HIGH</text>
|
||||
<text x="160" y="35" font-size="11" class="main-text">Setup auth</text>
|
||||
<text x="160" y="48" font-size="10" class="secondary-text">OAUTH, JWT</text>
|
||||
<rect x="355" y="445" width="130" height="45" rx="6" fill="#EEF2FF" stroke="#6366F1"/>
|
||||
<text x="365" y="462" font-size="9" font-weight="600" fill="#6366F1">STEP 3 • HIGH</text>
|
||||
<text x="365" y="478" font-size="11" class="main-text">Client module</text>
|
||||
|
||||
<!-- Step 3 -->
|
||||
<rect x="300" y="0" width="140" height="55" rx="6" class="step-badge"/>
|
||||
<text x="310" y="18" font-size="10" font-weight="600" class="accent-text">STEP 3 • HIGH</text>
|
||||
<text x="310" y="35" font-size="11" class="main-text">Client module</text>
|
||||
<text x="310" y="48" font-size="10" class="secondary-text">FORM, DIALOG</text>
|
||||
<rect x="495" y="445" width="130" height="45" rx="6" fill="#FEF3C7" stroke="#F59E0B"/>
|
||||
<text x="505" y="462" font-size="9" font-weight="600" fill="#D97706">STEP 4 • MEDIUM</text>
|
||||
<text x="505" y="478" font-size="11" class="main-text">Financial tracking</text>
|
||||
|
||||
<!-- Step 4 -->
|
||||
<rect x="450" y="0" width="140" height="55" rx="6" class="step-badge"/>
|
||||
<text x="460" y="18" font-size="10" font-weight="600" style="fill: #FF9800;">STEP 4 • MEDIUM</text>
|
||||
<text x="460" y="35" font-size="11" class="main-text">Financial tracking</text>
|
||||
<text x="460" y="48" font-size="10" class="secondary-text">CHART, CALC</text>
|
||||
<rect x="635" y="445" width="130" height="45" rx="6" fill="#FEF3C7" stroke="#F59E0B"/>
|
||||
<text x="645" y="462" font-size="9" font-weight="600" fill="#D97706">STEP 5 • MEDIUM</text>
|
||||
<text x="645" y="478" font-size="11" class="main-text">Reports dashboard</text>
|
||||
|
||||
<!-- Step 5 -->
|
||||
<rect x="600" y="0" width="140" height="55" rx="6" class="step-badge"/>
|
||||
<text x="610" y="18" font-size="10" font-weight="600" style="fill: #FF9800;">STEP 5 • MEDIUM</text>
|
||||
<text x="610" y="35" font-size="11" class="main-text">Reports dashboard</text>
|
||||
<text x="610" y="48" font-size="10" class="secondary-text">REPORT, PDF</text>
|
||||
|
||||
<!-- Step 6 -->
|
||||
<rect x="750" y="0" width="140" height="55" rx="6" class="step-badge"/>
|
||||
<text x="760" y="18" font-size="10" font-weight="600" style="fill: #4CAF50;">STEP 6 • LOW</text>
|
||||
<text x="760" y="35" font-size="11" class="main-text">Deploy & test</text>
|
||||
<text x="760" y="48" font-size="10" class="secondary-text">DEPLOY, TEST</text>
|
||||
</g>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<g transform="translate(550, 185)">
|
||||
<rect x="0" y="0" width="90" height="32" rx="6" class="button-secondary"/>
|
||||
<text x="45" y="21" text-anchor="middle" font-size="12" class="white-text">🗑️ Discard</text>
|
||||
|
||||
<rect x="100" y="0" width="100" height="32" rx="6" class="button-secondary"/>
|
||||
<text x="150" y="21" text-anchor="middle" font-size="12" class="white-text">🔮 Simulate</text>
|
||||
|
||||
<rect x="210" y="0" width="120" height="32" rx="6" class="button-primary"/>
|
||||
<text x="270" y="21" text-anchor="middle" font-size="12" font-weight="500" fill="#1a1a1a">🚀 Execute Plan</text>
|
||||
</g>
|
||||
</g>
|
||||
<rect x="775" y="445" width="130" height="45" rx="6" fill="#DCFCE7" stroke="#10B981"/>
|
||||
<text x="785" y="462" font-size="9" font-weight="600" fill="#059669">STEP 6 • LOW</text>
|
||||
<text x="785" y="478" font-size="11" class="main-text">Deploy & test</text>
|
||||
|
||||
<!-- Active Tasks Section -->
|
||||
<g transform="translate(40, 470)">
|
||||
<text x="0" y="20" font-size="14" font-weight="500" class="main-text">📋 Active Tasks</text>
|
||||
<text x="75" y="535" font-size="16" font-weight="700" class="main-text">Active Tasks</text>
|
||||
|
||||
<!-- Filter Tabs -->
|
||||
<g transform="translate(150, 5)">
|
||||
<rect x="0" y="0" width="70" height="28" rx="4" class="button-primary"/>
|
||||
<text x="35" y="19" text-anchor="middle" font-size="11" fill="#1a1a1a">All (8)</text>
|
||||
<!-- Filter tabs -->
|
||||
<rect x="200" y="518" width="60" height="26" rx="4" fill="url(#cyanGrad)"/>
|
||||
<text x="230" y="536" text-anchor="middle" font-size="11" font-weight="500" class="white-text">All (8)</text>
|
||||
|
||||
<rect x="80" y="0" width="80" height="28" rx="4" class="input-field"/>
|
||||
<text x="120" y="19" text-anchor="middle" font-size="11" class="main-text">Running (3)</text>
|
||||
<rect x="268" y="518" width="80" height="26" rx="4" fill="#F1F5F9" stroke="#E2E8F0"/>
|
||||
<text x="308" y="536" text-anchor="middle" font-size="11" class="main-text">Running (3)</text>
|
||||
|
||||
<rect x="170" y="0" width="100" height="28" rx="4" class="input-field"/>
|
||||
<text x="220" y="19" text-anchor="middle" font-size="11" class="main-text">Approval (2)</text>
|
||||
<rect x="356" y="518" width="90" height="26" rx="4" fill="#F1F5F9" stroke="#E2E8F0"/>
|
||||
<text x="401" y="536" text-anchor="middle" font-size="11" class="main-text">Approval (2)</text>
|
||||
|
||||
<rect x="280" y="0" width="90" height="28" rx="4" class="input-field"/>
|
||||
<text x="325" y="19" text-anchor="middle" font-size="11" class="main-text">Decisions (1)</text>
|
||||
</g>
|
||||
<!-- Task Item 1 - Running -->
|
||||
<rect x="50" y="555" width="900" height="60" rx="8" fill="#FFFFFF" stroke="#E2E8F0" filter="url(#cardShadow)"/>
|
||||
<rect x="70" y="570" width="70" height="22" rx="4" fill="url(#cyanGrad)"/>
|
||||
<text x="105" y="586" text-anchor="middle" font-size="10" font-weight="500" class="white-text">RUNNING</text>
|
||||
<text x="155" y="586" font-size="14" font-weight="500" class="main-text">E-commerce Website for TechCorp</text>
|
||||
|
||||
<!-- Task Item 1 - Running -->
|
||||
<rect x="0" y="40" width="920" height="70" rx="8" class="card"/>
|
||||
<rect x="15" y="52" width="70" height="20" rx="4" class="badge-running"/>
|
||||
<text x="50" y="66" text-anchor="middle" font-size="10" fill="#1a1a1a">RUNNING</text>
|
||||
<text x="100" y="66" font-size="14" font-weight="500" class="main-text">E-commerce Website for TechCorp</text>
|
||||
<rect x="380" y="52" width="55" height="20" rx="4" class="risk-medium"/>
|
||||
<text x="407" y="66" text-anchor="middle" font-size="10" class="white-text">HIGH</text>
|
||||
<!-- Progress bar -->
|
||||
<rect x="70" y="598" width="400" height="6" rx="3" fill="#E2E8F0"/>
|
||||
<rect x="70" y="598" width="284" height="6" rx="3" fill="url(#cyanGrad)"/>
|
||||
<text x="480" y="605" font-size="11" class="secondary-text">Step 5/7 (71%)</text>
|
||||
|
||||
<!-- Progress Bar -->
|
||||
<rect x="15" y="78" width="400" height="8" rx="4" class="progress-bg"/>
|
||||
<rect x="15" y="78" width="280" height="8" rx="4" class="progress-fill"/>
|
||||
<text x="425" y="86" font-size="11" class="secondary-text">Step 5/7 (71%)</text>
|
||||
<!-- Task Item 2 - Needs Approval -->
|
||||
<rect x="50" y="625" width="900" height="60" rx="8" fill="#FFFFFF" stroke="#F59E0B" stroke-width="2" filter="url(#cardShadow)"/>
|
||||
<rect x="70" y="640" width="110" height="22" rx="4" fill="url(#orangeGrad)"/>
|
||||
<text x="125" y="656" text-anchor="middle" font-size="10" font-weight="500" class="white-text">NEEDS APPROVAL</text>
|
||||
<text x="195" y="656" font-size="14" font-weight="500" class="main-text">Automated Email Campaign - Product Launch</text>
|
||||
|
||||
<text x="15" y="102" font-size="11" class="secondary-text">▶️ Current: Building product catalog with search functionality</text>
|
||||
<rect x="70" y="665" width="650" height="16" rx="3" fill="#FEF3C7"/>
|
||||
<text x="80" y="677" font-size="10" fill="#92400E">Approval required: Send 50,000 emails to customer list</text>
|
||||
|
||||
<!-- Task Actions -->
|
||||
<g transform="translate(750, 55)">
|
||||
<rect x="0" y="0" width="70" height="26" rx="4" class="button-secondary"/>
|
||||
<text x="35" y="17" text-anchor="middle" font-size="10" class="white-text">⏸️ Pause</text>
|
||||
<rect x="80" y="0" width="70" height="26" rx="4" class="button-secondary"/>
|
||||
<text x="115" y="17" text-anchor="middle" font-size="10" class="white-text">👁️ Details</text>
|
||||
</g>
|
||||
|
||||
<!-- Task Item 2 - Needs Approval -->
|
||||
<rect x="0" y="120" width="920" height="70" rx="8" class="card" style="stroke: #FF6B35; stroke-width: 2;"/>
|
||||
<rect x="15" y="132" width="110" height="20" rx="4" class="badge-approval"/>
|
||||
<text x="70" y="146" text-anchor="middle" font-size="10" class="white-text">NEEDS APPROVAL</text>
|
||||
<text x="140" y="146" font-size="14" font-weight="500" class="main-text">Automated Email Campaign - Product Launch</text>
|
||||
<rect x="440" y="132" width="65" height="20" rx="4" class="risk-high"/>
|
||||
<text x="472" y="146" text-anchor="middle" font-size="10" class="white-text">CRITICAL</text>
|
||||
|
||||
<rect x="15" y="158" width="750" height="24" rx="4" style="fill: #fff3e0;"/>
|
||||
<text x="25" y="175" font-size="11" style="fill: #E65100;">⚠️ Approval required: Send 50,000 emails to customer list (High impact action)</text>
|
||||
|
||||
<g transform="translate(750, 135)">
|
||||
<rect x="0" y="0" width="150" height="26" rx="4" class="button-primary"/>
|
||||
<text x="75" y="17" text-anchor="middle" font-size="10" font-weight="500" fill="#1a1a1a">✅ Review & Approve</text>
|
||||
</g>
|
||||
|
||||
<!-- Task Item 3 - Completed -->
|
||||
<rect x="0" y="200" width="920" height="50" rx="8" class="card" style="opacity: 0.7;"/>
|
||||
<rect x="15" y="212" width="80" height="20" rx="4" class="badge-completed"/>
|
||||
<text x="55" y="226" text-anchor="middle" font-size="10" class="white-text">COMPLETED</text>
|
||||
<text x="110" y="226" font-size="14" class="main-text" style="opacity: 0.7;">Sales Data Analysis Q4 Report</text>
|
||||
|
||||
<rect x="15" y="238" width="300" height="6" rx="3" class="badge-completed"/>
|
||||
<text x="325" y="244" font-size="10" class="secondary-text">✓ All 4 steps completed • Duration: 45 min</text>
|
||||
</g>
|
||||
|
||||
<!-- Footer Legend -->
|
||||
<g transform="translate(40, 715)">
|
||||
<text x="0" y="0" font-size="11" class="secondary-text">Execution Modes:</text>
|
||||
<text x="100" y="0" font-size="10" class="main-text">Semi-Auto (recommended)</text>
|
||||
<text x="240" y="0" font-size="10" class="main-text">• Supervised</text>
|
||||
<text x="320" y="0" font-size="10" class="main-text">• Fully Auto</text>
|
||||
<text x="410" y="0" font-size="10" class="main-text">• Dry Run</text>
|
||||
|
||||
<text x="550" y="0" font-size="11" class="secondary-text">Priority:</text>
|
||||
<circle cx="600" cy="-3" r="5" class="risk-high"/>
|
||||
<text x="610" y="0" font-size="10" class="secondary-text">Critical</text>
|
||||
<circle cx="665" cy="-3" r="5" class="risk-medium"/>
|
||||
<text x="675" y="0" font-size="10" class="secondary-text">High</text>
|
||||
<circle cx="710" cy="-3" r="5" class="badge-running"/>
|
||||
<text x="720" y="0" font-size="10" class="secondary-text">Medium</text>
|
||||
<circle cx="770" cy="-3" r="5" class="badge-pending"/>
|
||||
<text x="780" y="0" font-size="10" class="secondary-text">Low</text>
|
||||
</g>
|
||||
<rect x="780" y="645" width="140" height="28" rx="6" fill="url(#greenGrad)"/>
|
||||
<text x="850" y="664" text-anchor="middle" font-size="11" font-weight="500" class="white-text">Review & Approve</text>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 9.3 KiB |
461
src/assets/project-report.html
Normal file
461
src/assets/project-report.html
Normal file
|
|
@ -0,0 +1,461 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>GB Project - Architecture Report</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
||||
min-height: 100vh;
|
||||
color: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.header h1 {
|
||||
font-size: 2.5rem;
|
||||
background: linear-gradient(90deg, #3498db, #9b59b6, #e74c3c);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
.header p {
|
||||
color: #888;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.treemap-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
background: rgba(255,255,255,0.03);
|
||||
border-radius: 20px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
|
||||
}
|
||||
.treemap {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
grid-template-rows: repeat(8, 80px);
|
||||
gap: 8px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.component {
|
||||
border-radius: 12px;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.component:hover {
|
||||
transform: scale(1.02);
|
||||
z-index: 10;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.4);
|
||||
}
|
||||
.component::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.component h3 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.component .stats {
|
||||
font-size: 0.75rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.component .percent {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 15px;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
/* Component positions and sizes */
|
||||
.botserver {
|
||||
grid-column: 1 / 7;
|
||||
grid-row: 1 / 6;
|
||||
background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
|
||||
}
|
||||
.botbook {
|
||||
grid-column: 7 / 13;
|
||||
grid-row: 1 / 4;
|
||||
background: linear-gradient(135deg, #27ae60 0%, #1e8449 100%);
|
||||
}
|
||||
.botui {
|
||||
grid-column: 7 / 10;
|
||||
grid-row: 4 / 6;
|
||||
background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
|
||||
}
|
||||
.botapp {
|
||||
grid-column: 10 / 13;
|
||||
grid-row: 4 / 6;
|
||||
background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
|
||||
}
|
||||
.botlib {
|
||||
grid-column: 1 / 4;
|
||||
grid-row: 6 / 9;
|
||||
background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
|
||||
}
|
||||
.botdevice {
|
||||
grid-column: 4 / 7;
|
||||
grid-row: 6 / 8;
|
||||
background: linear-gradient(135deg, #1abc9c 0%, #16a085 100%);
|
||||
}
|
||||
.botcoder {
|
||||
grid-column: 4 / 7;
|
||||
grid-row: 8 / 9;
|
||||
background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%);
|
||||
}
|
||||
.bottest {
|
||||
grid-column: 7 / 9;
|
||||
grid-row: 6 / 8;
|
||||
background: linear-gradient(135deg, #00bcd4 0%, #0097a7 100%);
|
||||
}
|
||||
.botmodels {
|
||||
grid-column: 9 / 11;
|
||||
grid-row: 6 / 8;
|
||||
background: linear-gradient(135deg, #ff5722 0%, #e64a19 100%);
|
||||
}
|
||||
.bottemplates {
|
||||
grid-column: 11 / 13;
|
||||
grid-row: 6 / 8;
|
||||
background: linear-gradient(135deg, #795548 0%, #5d4037 100%);
|
||||
}
|
||||
.botplugin {
|
||||
grid-column: 7 / 13;
|
||||
grid-row: 8 / 9;
|
||||
background: linear-gradient(135deg, #607d8b 0%, #455a64 100%);
|
||||
}
|
||||
|
||||
/* Sub-components inside botserver */
|
||||
.sub-components {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 4px;
|
||||
margin-top: 10px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.sub-component {
|
||||
background: rgba(255,255,255,0.15);
|
||||
border-radius: 6px;
|
||||
padding: 6px;
|
||||
font-size: 0.65rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Legend */
|
||||
.legend {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 15px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
background: rgba(255,255,255,0.05);
|
||||
border-radius: 8px;
|
||||
}
|
||||
.legend-color {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.legend-text {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.legend-text small {
|
||||
display: block;
|
||||
color: #888;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
/* Report section */
|
||||
.report {
|
||||
margin-top: 40px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
.report-card {
|
||||
background: rgba(255,255,255,0.05);
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
}
|
||||
.report-card h4 {
|
||||
color: #3498db;
|
||||
margin-bottom: 15px;
|
||||
font-size: 1rem;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.report-card ul {
|
||||
list-style: none;
|
||||
}
|
||||
.report-card li {
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||
font-size: 0.85rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.report-card li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.status {
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
.status.complete { background: #27ae60; }
|
||||
.status.progress { background: #f39c12; }
|
||||
.status.planned { background: #3498db; }
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid rgba(255,255,255,0.1);
|
||||
color: #666;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>🤖 GB Project Architecture</h1>
|
||||
<p>Component Space Allocation Visualization - Treemap Report</p>
|
||||
</div>
|
||||
|
||||
<div class="treemap-container">
|
||||
<div class="treemap">
|
||||
<!-- BOTSERVER - Main backend server -->
|
||||
<div class="component botserver">
|
||||
<h3>📦 botserver</h3>
|
||||
<div class="sub-components">
|
||||
<div class="sub-component">basic/keywords</div>
|
||||
<div class="sub-component">core/bot</div>
|
||||
<div class="sub-component">llm/models</div>
|
||||
<div class="sub-component">vector-db</div>
|
||||
<div class="sub-component">security</div>
|
||||
<div class="sub-component">compliance</div>
|
||||
<div class="sub-component">attendance</div>
|
||||
<div class="sub-component">drive</div>
|
||||
<div class="sub-component">email</div>
|
||||
<div class="sub-component">whatsapp</div>
|
||||
<div class="sub-component">calendar</div>
|
||||
<div class="sub-component">console</div>
|
||||
</div>
|
||||
<div class="stats">~100+ modules | Rust | Core Platform</div>
|
||||
<span class="percent">45%</span>
|
||||
</div>
|
||||
|
||||
<!-- BOTBOOK - Documentation -->
|
||||
<div class="component botbook">
|
||||
<h3>📚 botbook</h3>
|
||||
<div class="stats">20 chapters | 150+ docs | mdBook</div>
|
||||
<span class="percent">20%</span>
|
||||
</div>
|
||||
|
||||
<!-- BOTUI - Web Interface -->
|
||||
<div class="component botui">
|
||||
<h3>🎨 botui</h3>
|
||||
<div class="stats">HTMX | Tailwind | Admin UI</div>
|
||||
<span class="percent">8%</span>
|
||||
</div>
|
||||
|
||||
<!-- BOTAPP - Desktop Application -->
|
||||
<div class="component botapp">
|
||||
<h3>🖥️ botapp</h3>
|
||||
<div class="stats">Tauri | Cross-platform</div>
|
||||
<span class="percent">7%</span>
|
||||
</div>
|
||||
|
||||
<!-- BOTLIB - Shared Library -->
|
||||
<div class="component botlib">
|
||||
<h3>📖 botlib</h3>
|
||||
<div class="stats">Core types | HTTP | Models</div>
|
||||
<span class="percent">5%</span>
|
||||
</div>
|
||||
|
||||
<!-- BOTDEVICE - Embedded/IoT -->
|
||||
<div class="component botdevice">
|
||||
<h3>📱 botdevice</h3>
|
||||
<div class="stats">Embedded | Tauri | ROM</div>
|
||||
<span class="percent">4%</span>
|
||||
</div>
|
||||
|
||||
<!-- BOTCODER - AI Coding -->
|
||||
<div class="component botcoder">
|
||||
<h3>🧠 botcoder</h3>
|
||||
<div class="stats">AI Assistant</div>
|
||||
<span class="percent">2%</span>
|
||||
</div>
|
||||
|
||||
<!-- BOTTEST - Testing -->
|
||||
<div class="component bottest">
|
||||
<h3>🧪 bottest</h3>
|
||||
<div class="stats">Tests | Benches</div>
|
||||
<span class="percent">3%</span>
|
||||
</div>
|
||||
|
||||
<!-- BOTMODELS - ML Models -->
|
||||
<div class="component botmodels">
|
||||
<h3>🤖 botmodels</h3>
|
||||
<div class="stats">Python | ML</div>
|
||||
<span class="percent">3%</span>
|
||||
</div>
|
||||
|
||||
<!-- BOTTEMPLATES - Templates -->
|
||||
<div class="component bottemplates">
|
||||
<h3>📋 bottemplates</h3>
|
||||
<div class="stats">Bots | Dialogs</div>
|
||||
<span class="percent">2%</span>
|
||||
</div>
|
||||
|
||||
<!-- BOTPLUGIN - Browser Extension -->
|
||||
<div class="component botplugin">
|
||||
<h3>🔌 botplugin</h3>
|
||||
<div class="stats">Browser Extension | JS | Chrome/Firefox</div>
|
||||
<span class="percent">1%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Legend -->
|
||||
<div class="legend">
|
||||
<div class="legend-item">
|
||||
<div class="legend-color" style="background: linear-gradient(135deg, #3498db, #2980b9);"></div>
|
||||
<div class="legend-text">Backend Core<small>Server, API, Business Logic</small></div>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-color" style="background: linear-gradient(135deg, #27ae60, #1e8449);"></div>
|
||||
<div class="legend-text">Documentation<small>Guides, API Docs, Tutorials</small></div>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-color" style="background: linear-gradient(135deg, #9b59b6, #8e44ad);"></div>
|
||||
<div class="legend-text">User Interface<small>Web UI, Admin Panel</small></div>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-color" style="background: linear-gradient(135deg, #e74c3c, #c0392b);"></div>
|
||||
<div class="legend-text">Shared Libraries<small>Common Types, Utils</small></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project Report Section -->
|
||||
<div class="treemap-container report">
|
||||
<div class="report-card">
|
||||
<h4>🎯 Core Features Status</h4>
|
||||
<ul>
|
||||
<li>LLM Integration <span class="status complete">Complete</span></li>
|
||||
<li>Vector Database <span class="status complete">Complete</span></li>
|
||||
<li>BASIC Interpreter <span class="status complete">Complete</span></li>
|
||||
<li>WhatsApp Channel <span class="status complete">Complete</span></li>
|
||||
<li>Email Integration <span class="status complete">Complete</span></li>
|
||||
<li>MCP Client <span class="status progress">In Progress</span></li>
|
||||
<li>A2A Protocol <span class="status progress">In Progress</span></li>
|
||||
<li>Multi-Agent System <span class="status planned">Planned</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="report-card">
|
||||
<h4>📊 Component Breakdown</h4>
|
||||
<ul>
|
||||
<li>botserver <span>~100 modules</span></li>
|
||||
<li>botbook <span>150+ pages</span></li>
|
||||
<li>botui <span>Web components</span></li>
|
||||
<li>botapp <span>Desktop app</span></li>
|
||||
<li>botlib <span>7 core files</span></li>
|
||||
<li>botdevice <span>IoT/Embedded</span></li>
|
||||
<li>bottest <span>Test suite</span></li>
|
||||
<li>bottemplates <span>Bot templates</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="report-card">
|
||||
<h4>🔧 Technology Stack</h4>
|
||||
<ul>
|
||||
<li>Language <span>Rust</span></li>
|
||||
<li>Web Framework <span>Actix-Web</span></li>
|
||||
<li>UI Framework <span>HTMX + Tailwind</span></li>
|
||||
<li>Desktop <span>Tauri</span></li>
|
||||
<li>Database <span>PostgreSQL</span></li>
|
||||
<li>Vector DB <span>Custom + Hybrid</span></li>
|
||||
<li>ML/AI <span>Python + Rust</span></li>
|
||||
<li>Docs <span>mdBook</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="report-card">
|
||||
<h4>📁 Keywords (70+)</h4>
|
||||
<ul>
|
||||
<li>Data Operations <span>GET, SET, SAVE</span></li>
|
||||
<li>HTTP <span>POST, PUT, DELETE</span></li>
|
||||
<li>Messaging <span>TALK, HEAR, SMS</span></li>
|
||||
<li>Files <span>READ, WRITE, UPLOAD</span></li>
|
||||
<li>KB <span>USE KB, FIND</span></li>
|
||||
<li>AI <span>USE MODEL, LLM</span></li>
|
||||
<li>Control <span>FOR, SWITCH, ON</span></li>
|
||||
<li>Integration <span>WEBHOOK, MAIL</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="report-card">
|
||||
<h4>🏗️ Architecture Zones</h4>
|
||||
<ul>
|
||||
<li>Core Engine <span>botserver + botlib</span></li>
|
||||
<li>User Facing <span>botui + botapp</span></li>
|
||||
<li>Intelligence <span>botmodels + botcoder</span></li>
|
||||
<li>IoT/Edge <span>botdevice</span></li>
|
||||
<li>Quality <span>bottest</span></li>
|
||||
<li>Content <span>bottemplates + botbook</span></li>
|
||||
<li>Extension <span>botplugin</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="report-card">
|
||||
<h4>📈 Project Metrics</h4>
|
||||
<ul>
|
||||
<li>Total Lines <span>~868K</span></li>
|
||||
<li>Primary Language <span>Rust</span></li>
|
||||
<li>Secondary <span>Python, JS, TS</span></li>
|
||||
<li>Doc Coverage <span>~40%</span></li>
|
||||
<li>Test Coverage <span>~8.7%</span></li>
|
||||
<li>Active Modules <span>11</span></li>
|
||||
<li>BASIC Keywords <span>70+</span></li>
|
||||
<li>REST Endpoints <span>100+</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="footer">
|
||||
<p>🤖 General Bots Project Report | Generated December 2025</p>
|
||||
<p style="margin-top: 10px; font-size: 0.75rem;">
|
||||
Rust-based AI Platform | Multi-Channel Bots | LLM Integration | BASIC Scripting
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
215
src/assets/project-treemap.svg
Normal file
215
src/assets/project-treemap.svg
Normal file
|
|
@ -0,0 +1,215 @@
|
|||
<svg viewBox="0 0 1200 700" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="g1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3498db"/><stop offset="100%" stop-color="#2980b9"/></linearGradient>
|
||||
<linearGradient id="g2" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#27ae60"/><stop offset="100%" stop-color="#1e8449"/></linearGradient>
|
||||
<linearGradient id="g3" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#9b59b6"/><stop offset="100%" stop-color="#8e44ad"/></linearGradient>
|
||||
<linearGradient id="g4" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#00bcd4"/><stop offset="100%" stop-color="#0097a7"/></linearGradient>
|
||||
<linearGradient id="g5" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f39c12"/><stop offset="100%" stop-color="#e67e22"/></linearGradient>
|
||||
<linearGradient id="g6" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e74c3c"/><stop offset="100%" stop-color="#c0392b"/></linearGradient>
|
||||
<linearGradient id="g7" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#1abc9c"/><stop offset="100%" stop-color="#16a085"/></linearGradient>
|
||||
<linearGradient id="g8" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#ff5722"/><stop offset="100%" stop-color="#e64a19"/></linearGradient>
|
||||
<linearGradient id="g9" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e91e63"/><stop offset="100%" stop-color="#c2185b"/></linearGradient>
|
||||
<filter id="s"><feDropShadow dx="2" dy="2" stdDeviation="2" flood-opacity="0.2"/></filter>
|
||||
</defs>
|
||||
<rect width="1200" height="700" fill="#1a1a2e"/>
|
||||
<text x="600" y="35" text-anchor="middle" font-family="Arial" font-size="22" font-weight="bold" fill="#fff">GB Project - Treemap Architecture</text>
|
||||
<text x="600" y="55" text-anchor="middle" font-family="Arial" font-size="11" fill="#888">Component Space Allocation (~520K LOC)</text>
|
||||
|
||||
<!-- botserver 45% -->
|
||||
<g filter="url(#s)">
|
||||
<rect x="15" y="70" width="540" height="380" rx="8" fill="url(#g1)"/>
|
||||
<text x="30" y="95" font-family="Arial" font-size="16" font-weight="bold" fill="#fff">botserver</text>
|
||||
<text x="30" y="112" font-family="Arial" font-size="10" fill="rgba(255,255,255,0.7)">204,827 lines | 45% | Core Platform</text>
|
||||
<rect x="30" y="125" width="150" height="90" rx="5" fill="rgba(0,0,0,0.25)"/>
|
||||
<text x="40" y="148" font-family="Arial" font-size="11" font-weight="bold" fill="#fff">basic</text>
|
||||
<text x="40" y="163" font-family="Arial" font-size="8" fill="rgba(255,255,255,0.6)">46,189 lines</text>
|
||||
<text x="40" y="178" font-family="Arial" font-size="7" fill="rgba(255,255,255,0.5)">BASIC interpreter</text>
|
||||
<text x="40" y="190" font-family="Arial" font-size="7" fill="rgba(255,255,255,0.5)">Keywords, Dialogs</text>
|
||||
<rect x="190" y="125" width="100" height="90" rx="5" fill="rgba(0,0,0,0.25)"/>
|
||||
<text x="200" y="148" font-family="Arial" font-size="11" font-weight="bold" fill="#fff">core</text>
|
||||
<text x="200" y="163" font-family="Arial" font-size="8" fill="rgba(255,255,255,0.6)">21,662 lines</text>
|
||||
<text x="200" y="178" font-family="Arial" font-size="7" fill="rgba(255,255,255,0.5)">App bootstrap</text>
|
||||
<rect x="300" y="125" width="70" height="42" rx="4" fill="rgba(0,0,0,0.2)"/>
|
||||
<text x="308" y="145" font-family="Arial" font-size="9" font-weight="bold" fill="#fff">attendance</text>
|
||||
<text x="308" y="158" font-family="Arial" font-size="7" fill="rgba(255,255,255,0.5)">4,640</text>
|
||||
<rect x="380" y="125" width="60" height="42" rx="4" fill="rgba(0,0,0,0.2)"/>
|
||||
<text x="388" y="145" font-family="Arial" font-size="9" font-weight="bold" fill="#fff">email</text>
|
||||
<text x="388" y="158" font-family="Arial" font-size="7" fill="rgba(255,255,255,0.5)">4,573</text>
|
||||
<rect x="450" y="125" width="60" height="42" rx="4" fill="rgba(0,0,0,0.2)"/>
|
||||
<text x="458" y="145" font-family="Arial" font-size="9" font-weight="bold" fill="#fff">security</text>
|
||||
<text x="458" y="158" font-family="Arial" font-size="7" fill="rgba(255,255,255,0.5)">3,910</text>
|
||||
<rect x="300" y="175" width="70" height="40" rx="4" fill="rgba(0,0,0,0.2)"/>
|
||||
<text x="305" y="195" font-family="Arial" font-size="8" font-weight="bold" fill="#fff">compliance</text>
|
||||
<text x="310" y="207" font-family="Arial" font-size="7" fill="rgba(255,255,255,0.5)">3,726</text>
|
||||
<rect x="380" y="175" width="55" height="40" rx="4" fill="rgba(0,0,0,0.2)"/>
|
||||
<text x="390" y="195" font-family="Arial" font-size="9" font-weight="bold" fill="#fff">llm</text>
|
||||
<text x="390" y="207" font-family="Arial" font-size="7" fill="rgba(255,255,255,0.5)">3,102</text>
|
||||
<rect x="445" y="175" width="65" height="40" rx="4" fill="rgba(0,0,0,0.2)"/>
|
||||
<text x="455" y="195" font-family="Arial" font-size="9" font-weight="bold" fill="#fff">drive</text>
|
||||
<text x="455" y="207" font-family="Arial" font-size="7" fill="rgba(255,255,255,0.5)">3,043</text>
|
||||
<rect x="30" y="225" width="50" height="32" rx="3" fill="rgba(0,0,0,0.15)"/>
|
||||
<text x="35" y="243" font-family="Arial" font-size="7" font-weight="bold" fill="#fff">console</text>
|
||||
<text x="35" y="253" font-family="Arial" font-size="6" fill="rgba(255,255,255,0.5)">3,033</text>
|
||||
<rect x="88" y="225" width="45" height="32" rx="3" fill="rgba(0,0,0,0.15)"/>
|
||||
<text x="93" y="243" font-family="Arial" font-size="7" font-weight="bold" fill="#fff">tasks</text>
|
||||
<text x="93" y="253" font-family="Arial" font-size="6" fill="rgba(255,255,255,0.5)">2,145</text>
|
||||
<rect x="141" y="225" width="50" height="32" rx="3" fill="rgba(0,0,0,0.15)"/>
|
||||
<text x="145" y="243" font-family="Arial" font-size="6" font-weight="bold" fill="#fff">vector-db</text>
|
||||
<text x="148" y="253" font-family="Arial" font-size="6" fill="rgba(255,255,255,0.5)">1,950</text>
|
||||
<rect x="199" y="225" width="50" height="32" rx="3" fill="rgba(0,0,0,0.15)"/>
|
||||
<text x="204" y="243" font-family="Arial" font-size="7" font-weight="bold" fill="#fff">directory</text>
|
||||
<text x="207" y="253" font-family="Arial" font-size="6" fill="rgba(255,255,255,0.5)">1,692</text>
|
||||
<rect x="257" y="225" width="45" height="32" rx="3" fill="rgba(0,0,0,0.15)"/>
|
||||
<text x="262" y="243" font-family="Arial" font-size="7" font-weight="bold" fill="#fff">paper</text>
|
||||
<text x="265" y="253" font-family="Arial" font-size="6" fill="rgba(255,255,255,0.5)">1,648</text>
|
||||
<rect x="310" y="225" width="42" height="32" rx="3" fill="rgba(0,0,0,0.15)"/>
|
||||
<text x="315" y="243" font-family="Arial" font-size="7" font-weight="bold" fill="#fff">meet</text>
|
||||
<text x="318" y="253" font-family="Arial" font-size="6" fill="rgba(255,255,255,0.5)">1,513</text>
|
||||
<rect x="360" y="225" width="55" height="32" rx="3" fill="rgba(0,0,0,0.15)"/>
|
||||
<text x="365" y="243" font-family="Arial" font-size="6" font-weight="bold" fill="#fff">whatsapp</text>
|
||||
<text x="368" y="253" font-family="Arial" font-size="6" fill="rgba(255,255,255,0.5)">1,121</text>
|
||||
<rect x="423" y="225" width="87" height="32" rx="3" fill="rgba(0,0,0,0.12)"/>
|
||||
<text x="430" y="243" font-family="Arial" font-size="7" fill="rgba(255,255,255,0.6)">+12 more services</text>
|
||||
<text x="500" y="430" font-family="Arial" font-size="42" font-weight="bold" fill="rgba(255,255,255,0.1)">45%</text>
|
||||
</g>
|
||||
|
||||
<!-- botbook 20% -->
|
||||
<g filter="url(#s)">
|
||||
<rect x="565" y="70" width="280" height="180" rx="8" fill="url(#g2)"/>
|
||||
<text x="580" y="95" font-family="Arial" font-size="14" font-weight="bold" fill="#fff">botbook</text>
|
||||
<text x="580" y="110" font-family="Arial" font-size="9" fill="rgba(255,255,255,0.7)">105,697 lines | Documentation</text>
|
||||
<rect x="580" y="120" width="75" height="35" rx="4" fill="rgba(0,0,0,0.2)"/>
|
||||
<text x="588" y="138" font-family="Arial" font-size="8" font-weight="bold" fill="#fff">Dialogs</text>
|
||||
<text x="588" y="148" font-family="Arial" font-size="6" fill="rgba(255,255,255,0.5)">90+ keywords</text>
|
||||
<rect x="663" y="120" width="75" height="35" rx="4" fill="rgba(0,0,0,0.2)"/>
|
||||
<text x="671" y="138" font-family="Arial" font-size="8" font-weight="bold" fill="#fff">REST API</text>
|
||||
<text x="671" y="148" font-family="Arial" font-size="6" fill="rgba(255,255,255,0.5)">25+ endpoints</text>
|
||||
<rect x="746" y="120" width="75" height="35" rx="4" fill="rgba(0,0,0,0.2)"/>
|
||||
<text x="754" y="138" font-family="Arial" font-size="8" font-weight="bold" fill="#fff">Templates</text>
|
||||
<text x="754" y="148" font-family="Arial" font-size="6" fill="rgba(255,255,255,0.5)">20+ bots</text>
|
||||
<text x="795" y="235" font-family="Arial" font-size="30" font-weight="bold" fill="rgba(255,255,255,0.1)">20%</text>
|
||||
</g>
|
||||
|
||||
<!-- botui 14% -->
|
||||
<g filter="url(#s)">
|
||||
<rect x="855" y="70" width="330" height="180" rx="8" fill="url(#g3)"/>
|
||||
<text x="870" y="95" font-family="Arial" font-size="14" font-weight="bold" fill="#fff">botui</text>
|
||||
<text x="870" y="110" font-family="Arial" font-size="9" fill="rgba(255,255,255,0.7)">74,715 lines | Web Interface</text>
|
||||
<rect x="870" y="120" width="110" height="40" rx="4" fill="rgba(0,0,0,0.2)"/>
|
||||
<text x="880" y="140" font-family="Arial" font-size="8" font-weight="bold" fill="#fff">HTMX Components</text>
|
||||
<text x="880" y="152" font-family="Arial" font-size="6" fill="rgba(255,255,255,0.5)">Askama templates</text>
|
||||
<rect x="990" y="120" width="110" height="40" rx="4" fill="rgba(0,0,0,0.2)"/>
|
||||
<text x="1000" y="140" font-family="Arial" font-size="8" font-weight="bold" fill="#fff">Suite Apps</text>
|
||||
<text x="1000" y="152" font-family="Arial" font-size="6" fill="rgba(255,255,255,0.5)">Chat, Drive, Mail</text>
|
||||
<text x="1130" y="235" font-family="Arial" font-size="30" font-weight="bold" fill="rgba(255,255,255,0.1)">14%</text>
|
||||
</g>
|
||||
|
||||
<!-- bottest 14% -->
|
||||
<g filter="url(#s)">
|
||||
<rect x="565" y="260" width="180" height="190" rx="8" fill="url(#g4)"/>
|
||||
<text x="580" y="285" font-family="Arial" font-size="14" font-weight="bold" fill="#fff">bottest</text>
|
||||
<text x="580" y="300" font-family="Arial" font-size="9" fill="rgba(255,255,255,0.7)">74,894 lines | Testing</text>
|
||||
<rect x="580" y="310" width="70" height="35" rx="4" fill="rgba(0,0,0,0.2)"/>
|
||||
<text x="588" y="328" font-family="Arial" font-size="8" font-weight="bold" fill="#fff">Mocks</text>
|
||||
<text x="588" y="339" font-family="Arial" font-size="6" fill="rgba(255,255,255,0.5)">WA, LLM</text>
|
||||
<rect x="658" y="310" width="70" height="35" rx="4" fill="rgba(0,0,0,0.2)"/>
|
||||
<text x="666" y="328" font-family="Arial" font-size="8" font-weight="bold" fill="#fff">Services</text>
|
||||
<text x="666" y="339" font-family="Arial" font-size="6" fill="rgba(255,255,255,0.5)">DB, Redis</text>
|
||||
<text x="700" y="435" font-family="Arial" font-size="26" font-weight="bold" fill="rgba(255,255,255,0.1)">14%</text>
|
||||
</g>
|
||||
|
||||
<!-- botapp 10% -->
|
||||
<g filter="url(#s)">
|
||||
<rect x="755" y="260" width="170" height="190" rx="8" fill="url(#g5)"/>
|
||||
<text x="770" y="285" font-family="Arial" font-size="14" font-weight="bold" fill="#fff">botapp</text>
|
||||
<text x="770" y="300" font-family="Arial" font-size="9" fill="rgba(255,255,255,0.7)">53,353 lines | Desktop</text>
|
||||
<rect x="770" y="310" width="65" height="35" rx="4" fill="rgba(0,0,0,0.2)"/>
|
||||
<text x="778" y="328" font-family="Arial" font-size="8" font-weight="bold" fill="#fff">Tauri</text>
|
||||
<text x="778" y="339" font-family="Arial" font-size="6" fill="rgba(255,255,255,0.5)">Desktop</text>
|
||||
<rect x="843" y="310" width="65" height="35" rx="4" fill="rgba(0,0,0,0.2)"/>
|
||||
<text x="851" y="328" font-family="Arial" font-size="8" font-weight="bold" fill="#fff">JS Ext</text>
|
||||
<text x="851" y="339" font-family="Arial" font-size="6" fill="rgba(255,255,255,0.5)">Plugins</text>
|
||||
<text x="875" y="435" font-family="Arial" font-size="26" font-weight="bold" fill="rgba(255,255,255,0.1)">10%</text>
|
||||
</g>
|
||||
|
||||
<!-- botlib -->
|
||||
<g filter="url(#s)">
|
||||
<rect x="935" y="260" width="250" height="90" rx="8" fill="url(#g6)"/>
|
||||
<text x="950" y="285" font-family="Arial" font-size="12" font-weight="bold" fill="#fff">botlib</text>
|
||||
<text x="950" y="300" font-family="Arial" font-size="8" fill="rgba(255,255,255,0.7)">2,733 lines | Shared Library</text>
|
||||
<text x="950" y="315" font-family="Arial" font-size="7" fill="rgba(255,255,255,0.5)">Core types, HTTP, Models</text>
|
||||
<text x="1145" y="335" font-family="Arial" font-size="20" font-weight="bold" fill="rgba(255,255,255,0.1)">1%</text>
|
||||
</g>
|
||||
|
||||
<!-- botdevice -->
|
||||
<g filter="url(#s)">
|
||||
<rect x="15" y="460" width="180" height="105" rx="8" fill="url(#g7)"/>
|
||||
<text x="30" y="485" font-family="Arial" font-size="12" font-weight="bold" fill="#fff">botdevice</text>
|
||||
<text x="30" y="500" font-family="Arial" font-size="8" fill="rgba(255,255,255,0.7)">Embedded / IoT</text>
|
||||
<text x="30" y="515" font-family="Arial" font-size="7" fill="rgba(255,255,255,0.5)">Tauri + ROM</text>
|
||||
<text x="155" y="550" font-family="Arial" font-size="16" font-weight="bold" fill="rgba(255,255,255,0.1)">2%</text>
|
||||
</g>
|
||||
|
||||
<!-- botmodels -->
|
||||
<g filter="url(#s)">
|
||||
<rect x="205" y="460" width="180" height="105" rx="8" fill="url(#g8)"/>
|
||||
<text x="220" y="485" font-family="Arial" font-size="12" font-weight="bold" fill="#fff">botmodels</text>
|
||||
<text x="220" y="500" font-family="Arial" font-size="8" fill="rgba(255,255,255,0.7)">2,195 lines | Python ML</text>
|
||||
<text x="220" y="515" font-family="Arial" font-size="7" fill="rgba(255,255,255,0.5)">ML Models, Training</text>
|
||||
<text x="345" y="550" font-family="Arial" font-size="16" font-weight="bold" fill="rgba(255,255,255,0.1)">1%</text>
|
||||
</g>
|
||||
|
||||
<!-- botcoder -->
|
||||
<g filter="url(#s)">
|
||||
<rect x="395" y="460" width="160" height="105" rx="8" fill="url(#g9)"/>
|
||||
<text x="410" y="485" font-family="Arial" font-size="12" font-weight="bold" fill="#fff">botcoder</text>
|
||||
<text x="410" y="500" font-family="Arial" font-size="8" fill="rgba(255,255,255,0.7)">607 lines | AI Coding</text>
|
||||
<text x="410" y="515" font-family="Arial" font-size="7" fill="rgba(255,255,255,0.5)">AI Assistant</text>
|
||||
</g>
|
||||
|
||||
<!-- bottemplates -->
|
||||
<g filter="url(#s)">
|
||||
<rect x="565" y="460" width="185" height="105" rx="8" fill="#795548"/>
|
||||
<text x="580" y="485" font-family="Arial" font-size="12" font-weight="bold" fill="#fff">bottemplates</text>
|
||||
<text x="580" y="500" font-family="Arial" font-size="8" fill="rgba(255,255,255,0.7)">Bot Templates</text>
|
||||
<text x="580" y="515" font-family="Arial" font-size="7" fill="rgba(255,255,255,0.5)">Dialogs, Prompts, Themes</text>
|
||||
</g>
|
||||
|
||||
<!-- botplugin -->
|
||||
<g filter="url(#s)">
|
||||
<rect x="760" y="460" width="175" height="105" rx="8" fill="#607d8b"/>
|
||||
<text x="775" y="485" font-family="Arial" font-size="12" font-weight="bold" fill="#fff">botplugin</text>
|
||||
<text x="775" y="500" font-family="Arial" font-size="8" fill="rgba(255,255,255,0.7)">Browser Extension</text>
|
||||
<text x="775" y="515" font-family="Arial" font-size="7" fill="rgba(255,255,255,0.5)">Chrome/Firefox JS</text>
|
||||
</g>
|
||||
|
||||
<!-- Stack info -->
|
||||
<g filter="url(#s)">
|
||||
<rect x="945" y="360" width="240" height="205" rx="8" fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.1)"/>
|
||||
<text x="960" y="385" font-family="Arial" font-size="11" font-weight="bold" fill="#fff">Technology Stack</text>
|
||||
<text x="960" y="405" font-family="Arial" font-size="8" fill="#888">Language: Rust</text>
|
||||
<text x="960" y="420" font-family="Arial" font-size="8" fill="#888">Web: Actix-Web</text>
|
||||
<text x="960" y="435" font-family="Arial" font-size="8" fill="#888">UI: HTMX + Tailwind</text>
|
||||
<text x="960" y="450" font-family="Arial" font-size="8" fill="#888">Desktop: Tauri</text>
|
||||
<text x="960" y="465" font-family="Arial" font-size="8" fill="#888">DB: PostgreSQL</text>
|
||||
<text x="960" y="480" font-family="Arial" font-size="8" fill="#888">Vector: Custom Hybrid</text>
|
||||
<text x="960" y="495" font-family="Arial" font-size="8" fill="#888">ML: Python + Rust</text>
|
||||
<text x="960" y="510" font-family="Arial" font-size="8" fill="#888">Docs: mdBook</text>
|
||||
<text x="960" y="535" font-family="Arial" font-size="7" fill="#666">Total: ~520,000 lines</text>
|
||||
<text x="960" y="550" font-family="Arial" font-size="7" fill="#666">11 main components</text>
|
||||
</g>
|
||||
|
||||
<!-- Legend -->
|
||||
<rect x="15" y="580" width="920" height="105" rx="8" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.08)"/>
|
||||
<text x="30" y="605" font-family="Arial" font-size="11" font-weight="bold" fill="#fff">Legend</text>
|
||||
<rect x="30" y="620" width="14" height="14" rx="3" fill="url(#g1)"/><text x="50" y="631" font-family="Arial" font-size="8" fill="#aaa">Backend Core</text>
|
||||
<rect x="130" y="620" width="14" height="14" rx="3" fill="url(#g2)"/><text x="150" y="631" font-family="Arial" font-size="8" fill="#aaa">Documentation</text>
|
||||
<rect x="240" y="620" width="14" height="14" rx="3" fill="url(#g3)"/><text x="260" y="631" font-family="Arial" font-size="8" fill="#aaa">Web Interface</text>
|
||||
<rect x="340" y="620" width="14" height="14" rx="3" fill="url(#g4)"/><text x="360" y="631" font-family="Arial" font-size="8" fill="#aaa">Testing</text>
|
||||
<rect x="410" y="620" width="14" height="14" rx="3" fill="url(#g5)"/><text x="430" y="631" font-family="Arial" font-size="8" fill="#aaa">Desktop App</text>
|
||||
<rect x="510" y="620" width="14" height="14" rx="3" fill="url(#g6)"/><text x="530" y="631" font-family="Arial" font-size="8" fill="#aaa">Shared Lib</text>
|
||||
<rect x="600" y="620" width="14" height="14" rx="3" fill="url(#g7)"/><text x="620" y="631" font-family="Arial" font-size="8" fill="#aaa">Embedded</text>
|
||||
<rect x="690" y="620" width="14" height="14" rx="3" fill="url(#g8)"/><text x="710" y="631" font-family="Arial" font-size="8" fill="#aaa">ML Models</text>
|
||||
<rect x="780" y="620" width="14" height="14" rx="3" fill="url(#g9)"/><text x="800" y="631" font-family="Arial" font-size="8" fill="#aaa">AI Coder</text>
|
||||
<text x="30" y="665" font-family="Arial" font-size="9" fill="#666">Sizes proportional to lines of code. Inner boxes show sub-modules within each component.</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 18 KiB |
Loading…
Add table
Reference in a new issue