GeneralBots/botbook
2
2
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Rename Auto Tasks to Tasks, fix SVG with proper PROMPT.md guidelines

Browse source
This commit is contained in:
Rodrigo Rodriguez (Pragmatismo) 2025-12-12 23:34:30 -03:00
parent d1dec9fe29
commit 89eef18cf6
9 changed files with 921 additions and 352 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/04-gbui/README.md
View file

@ -31,7 +31,7 @@ http://localhost:8080/console → Terminal mode
|-----|---------| |-----|---------|
| Chat | AI assistant conversations | | Chat | AI assistant conversations |
| Drive | File management | | Drive | File management |
| Auto Tasks | LLM-powered intelligent execution | | Tasks | LLM-powered intelligent execution |
| Mail | Email client | | Mail | Email client |
| Calendar | Scheduling | | Calendar | Scheduling |
| Meet | Video calls | | Meet | Video calls |

6
src/04-gbui/apps/README.md
View file

@ -12,7 +12,7 @@ Click any app icon in the top-right menu (⋮⋮⋮) to open it.
|-----|--------------| |-----|--------------|
| 💬 **Chat** | Talk to your AI assistant | | 💬 **Chat** | Talk to your AI assistant |
| 📁 **Drive** | Store and organize your files | | 📁 **Drive** | Store and organize your files |
| ⚡ **Auto Tasks** | LLM-powered intelligent task execution | | ⚡ **Tasks** | LLM-powered intelligent task execution |
| ✉ **Mail** | Send and receive emails | | ✉ **Mail** | Send and receive emails |
| 📅 **Calendar** | Schedule meetings and events | | 📅 **Calendar** | Schedule meetings and events |
| 🎥 **Meet** | Video calls with your team | | 🎥 **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 + 1` | Chat |
| `Alt + 2` | Drive | | `Alt + 2` | Drive |
| `Alt + 3` | Auto Tasks | | `Alt + 3` | Tasks |
| `Alt + 4` | Mail | | `Alt + 4` | Mail |
| `Alt + 5` | Calendar | | `Alt + 5` | Calendar |
| `Alt + 6` | Meet | | `Alt + 6` | Meet |
@ -59,7 +59,7 @@ Learn more about each app:
- [Chat](./chat.md) - Talk to your AI assistant - [Chat](./chat.md) - Talk to your AI assistant
- [Drive](./drive.md) - Manage your files - [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 - [Mail](./mail.md) - Handle your email
- [Calendar](./calendar.md) - Manage your schedule - [Calendar](./calendar.md) - Manage your schedule
- [Meet](./meet.md) - Join video calls - [Meet](./meet.md) - Join video calls

2
src/04-gbui/apps/suite.md
View file

@ -22,7 +22,7 @@ The Suite includes integrated applications:
|-----|---------| |-----|---------|
| 💬 Chat | AI assistant conversations | | 💬 Chat | AI assistant conversations |
| 📁 Drive | File management | | 📁 Drive | File management |
| ⚡ Auto Tasks | LLM-powered intelligent execution | | ⚡ Tasks | LLM-powered intelligent execution |
| ✉ Mail | Email client | | ✉ Mail | Email client |
| 📅 Calendar | Scheduling | | 📅 Calendar | Scheduling |
| 🎥 Meet | Video calls | | 🎥 Meet | Video calls |

211
src/04-gbui/apps/tasks.md
View file

@ -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 | Old Way | Tasks Way |
|---------|-----------|
**The Auto Tasks way:** Describe your goal → LLM plans it → System executes it → You approve critical steps | 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 | | Step | What Happens |
|------|--------------| |------|--------------|
| **1. Describe Intent** | Write what you want in plain English | | **1. Describe** | Write what you want in plain English |
| **2. Compile & Plan** | LLM analyzes intent, generates execution plan | | **2. Compile** | LLM analyzes intent, generates execution plan |
| **3. Review Plan** | See steps, estimates, risks before execution | | **3. Review** | See steps, estimates, risks before execution |
| **4. Execute** | System runs the plan, pausing for approvals | | **4. Execute** | System runs the plan, pausing for approvals |
| **5. Monitor** | Watch progress, make decisions when needed | | **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: In the intent box, describe what you want to accomplish:
**Good examples:** | Good Examples |
- "Make a financial CRM for Deloitte with client management and reporting" |---------------|
- "Create a website that collects leads and sends them to Salesforce" | "Make a financial CRM for Deloitte with client management and reporting" |
- "Build an automated email campaign for our product launch" | "Create a website that collects leads and sends them to Salesforce" |
- "Analyze Q4 sales data and generate a PDF report with charts" | "Build an automated email campaign for our product launch" |
| "Analyze Q4 sales data and generate a PDF report with charts" |
**Tips for better results:** **Tips for better results:**
- Be specific about the outcome you want - Be specific about the outcome you want
- Mention the client or project name - Mention the client or project name
- Include key features or requirements - Include key features or requirements
- Specify integrations if needed - Specify integrations if needed
### 2. Choose Execution Mode ### Choose Execution Mode
| Mode | Best For | How It Works | | 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 | | **Fully Automatic** | Trusted workflows | Runs everything without stopping |
| **Dry Run** | Testing | Simulates execution without making changes | | **Dry Run** | Testing | Simulates execution without making changes |
### 3. Set Priority ### Set Priority
| Priority | Meaning | | Priority | Meaning |
|----------|---------| |----------|---------|
@ -65,9 +70,10 @@ In the intent box, describe what you want to accomplish:
| **Low** | Run when resources available | | **Low** | Run when resources available |
| **Background** | Run during idle time | | **Background** | Run during idle time |
### 4. Click "Compile & Plan" ### Click Compile & Plan
The LLM will: The LLM will:
1. Extract entities (action, target, domain, client) 1. Extract entities (action, target, domain, client)
2. Generate an execution plan with ordered steps 2. Generate an execution plan with ordered steps
3. Assess risks and estimate resources 3. Assess risks and estimate resources
@ -77,44 +83,43 @@ The LLM will:
## Understanding the Execution Plan ## Understanding the Execution Plan
After compilation, you'll see a detailed plan: After compilation, you see a detailed plan:
### Plan Header ### Plan Header
- **Plan Name** - Auto-generated title for your task | Field | Description |
- **Description** - Summary of what will be accomplished |-------|-------------|
- **Confidence** - How confident the LLM is in the plan (aim for 80%+) | **Plan Name** | Auto-generated title for your task |
- **Risk Level** - Overall risk assessment (None/Low/Medium/High/Critical) | **Description** | Summary of what will be accomplished |
- **Estimated Duration** - How long execution should take | **Confidence** | How confident the LLM is in the plan (aim for 80%+) |
- **Estimated Cost** - API and compute costs | **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 ### Execution Steps
Each step shows: 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 | Field | Description |
|-------|-------------|
- **Compute** - Processing hours needed | **Step Number** | Order of execution |
- **Storage** - Disk space required | **Priority** | CRITICAL, HIGH, MEDIUM, LOW |
- **API Calls** - External API requests | **Step Name** | What this step does |
- **LLM Tokens** - Token consumption estimate | **Keywords** | BASIC keywords that will be used |
| **Risk Level** | Risk for this specific step |
### Plan Actions ### Plan Actions
| Button | Action | | Button | Action |
|--------|--------| |--------|--------|
| **🗑️ Discard** | Delete the plan, start over | | **Discard** | Delete the plan, start over |
| **✏️ Edit Plan** | Modify steps before execution | | **Edit Plan** | Modify steps before execution |
| **🔮 Simulate** | Preview impact without executing | | **Simulate** | Preview impact without executing |
| **🚀 Execute** | Start running the plan | | **Execute** | Start running the plan |
--- ---
## Monitoring Active Tasks ## Monitoring Tasks
### Task States ### Task States
@ -133,14 +138,17 @@ Each step shows:
### Filter Tabs ### Filter Tabs
- **All** - Every task regardless of status | Tab | Shows |
- **Running** - Currently executing tasks |-----|-------|
- **Need Approval** - Tasks waiting for your approval | **All** | Every task regardless of status |
- **Decisions** - Tasks needing your input | **Running** | Currently executing tasks |
| **Need Approval** | Tasks waiting for your approval |
| **Decisions** | Tasks needing your input |
### Progress Tracking ### Progress Tracking
Each task shows: Each task shows:
- Current step number and name - Current step number and name
- Progress bar with percentage - Progress bar with percentage
- Time elapsed and estimated remaining - Time elapsed and estimated remaining
@ -152,6 +160,7 @@ Each task shows:
### When Approvals Are Required ### When Approvals Are Required
High-impact actions require your approval: High-impact actions require your approval:
- Sending emails to many recipients - Sending emails to many recipients
- Modifying production databases - Modifying production databases
- Making external API calls with side effects - Making external API calls with side effects
@ -160,20 +169,27 @@ High-impact actions require your approval:
### Approval Dialog ### Approval Dialog
When approval is needed, you'll see: When approval is needed, you see:
- **Action description** - What will happen
- **Impact summary** - What could be affected | Field | Description |
- **Risk level** - How risky this step is |-------|-------------|
- **Simulation result** - Preview of the outcome | **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:** **Options:**
- ✅ **Approve** - Continue execution
- ⏸️ **Defer** - Decide later | Action | Result |
- ❌ **Reject** - Skip this step or stop execution |--------|--------|
| **Approve** | Continue execution |
| **Defer** | Decide later |
| **Reject** | Skip this step or stop execution |
### Making Decisions ### Making Decisions
Sometimes the system needs your input: Sometimes the system needs your input:
- Choosing between alternative approaches - Choosing between alternative approaches
- Selecting from multiple options - Selecting from multiple options
- Providing missing information - Providing missing information
@ -186,47 +202,36 @@ Each option shows pros, cons, and impact estimates.
| Action | When Available | What It Does | | Action | When Available | What It Does |
|--------|----------------|--------------| |--------|----------------|--------------|
| **👁️ Details** | Always | View full task information | | **Details** | Always | View full task information |
| **🔮 Simulate** | Before execution | Preview impact | | **Simulate** | Before execution | Preview impact |
| **⏸️ Pause** | While running | Temporarily stop execution | | **Pause** | While running | Temporarily stop execution |
| **▶️ Resume** | When paused | Continue execution | | **Resume** | When paused | Continue execution |
| **❌ Cancel** | Anytime | Stop and discard task | | **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
--- ---
## Creating Tasks from Chat ## 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" **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 - 5 steps, estimated 3 hours
- Includes: database setup, authentication, dashboard, API integration - Includes: database setup, authentication, dashboard, API integration
- Risk: Low - Risk: Low
-
Should I execute this plan?" Should I execute this plan?"
**You:** "Yes, go ahead" **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 ## 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 ```bas
' AUTO-GENERATED BASIC PROGRAM ' AUTO-GENERATED BASIC PROGRAM
@ -246,6 +251,7 @@ SAVE_TABLE
``` ```
This code can be: This code can be:
- Copied for manual execution - Copied for manual execution
- Modified and saved as a template - Modified and saved as a template
- Reused for similar projects - Reused for similar projects
@ -256,22 +262,20 @@ This code can be:
### Writing Good Intents ### Writing Good Intents
✅ **Do:** | Do | Don't |
- "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" | "Create a sales dashboard for Q4 data with charts showing revenue by region" | "Make something" |
- "Analyze customer feedback CSV and generate sentiment report" | "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" |
❌ **Don't:**
- "Make something" (too vague)
- "Do the thing we discussed" (no context)
- "Fix it" (what needs fixing?)
### Choosing Execution Mode ### Choosing Execution Mode
- **New to Auto Tasks?** Start with Supervised mode | Situation | Recommended Mode |
- **Routine tasks?** Use Semi-Automatic |-----------|------------------|
- **Trusted, tested workflows?** Fully Automatic is fine | New to Tasks | Supervised |
- **Experimenting?** Always use Dry Run first | Routine tasks | Semi-Automatic |
| Trusted, tested workflows | Fully Automatic |
| Experimenting | Dry Run |
### Managing Risk ### Managing Risk
@ -290,7 +294,7 @@ This code can be:
- Avoid ambiguous language - Avoid ambiguous language
- Include necessary context (client name, data sources) - Include necessary context (client name, data sources)
### Task Stuck on "Running" ### Task Stuck on Running
- Check if an approval is pending - Check if an approval is pending
- Look for decision requests - Look for decision requests
@ -302,30 +306,25 @@ This code can be:
- Use Dry Run to test first - Use Dry Run to test first
- Check the BASIC code for issues - Check the BASIC code for issues
### High Risk Warning
- Consider using Supervised mode
- Review each step carefully
- Use Simulate before Execute
--- ---
## Settings ## Settings
Configure Auto Tasks behavior in Settings: Configure Tasks behavior in Settings:
- **Default execution mode** - Your preferred mode | Setting | Description |
- **Approval thresholds** - When to require approval |---------|-------------|
- **Cost limits** - Maximum spend per task | **Default execution mode** | Your preferred mode |
- **Notification preferences** - How to alert you | **Approval thresholds** | When to require approval |
- **Auto-cleanup** - Remove completed tasks after X days | **Cost limits** | Maximum spend per task |
| **Notification preferences** | How to alert you |
| **Auto-cleanup** | Remove completed tasks after X days |
--- ---
## See Also ## See Also
- [Autonomous Task AI](../../07-gbapp/autonomous-tasks.md) - How the machine does the work - [Autonomous Task AI](../../07-gbapp/autonomous-tasks.md) - Architecture details
- [CREATE SITE Keyword](../../06-gbdialog/keyword-create-site.md) - App generation details - [CREATE SITE](../../06-gbdialog/keyword-create-site.md) - App generation
- [Calendar](./calendar.md) - Scheduled Auto Tasks appear here - [Calendar](./calendar.md) - Scheduled tasks
- [Chat](./chat.md) - Create tasks through conversation - [Chat](./chat.md) - Create tasks through conversation
- [Analytics](./analytics.md) - Task execution metrics

20
src/04-gbui/suite-manual.md
View file

@ -40,7 +40,7 @@ Click the **nine-dot grid** (⋮⋮⋮) in the top right to see all applications
|------|-----|--------------| |------|-----|--------------|
| 💬 | **Chat** | Talk with your AI assistant | | 💬 | **Chat** | Talk with your AI assistant |
| 📁 | **Drive** | Store and manage your files | | 📁 | **Drive** | Store and manage your files |
| ⚡ | **Auto Tasks** | LLM-powered intelligent task execution | | ⚡ | **Tasks** | LLM-powered intelligent task execution |
| ✉ | **Mail** | Send and receive emails | | ✉ | **Mail** | Send and receive emails |
| 📅 | **Calendar** | Schedule meetings and events | | 📅 | **Calendar** | Schedule meetings and events |
| 🎥 | **Meet** | Video calls and meetings | | 🎥 | **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") 1. **Describe your intent** in the text area (e.g., "Build a CRM for Deloitte with client management")
2. **Choose execution mode:** 2. **Choose execution mode:**
@ -240,17 +240,17 @@ High-impact actions pause for your approval:
Click **✅ Review & Approve** to see details and continue. Click **✅ Review & Approve** to see details and continue.
### Creating Auto Tasks from Chat ### Creating Tasks from Chat
In Chat, just say: In Chat, just say:
``` ```
You: I need to build a customer portal for Acme Corp 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 - 5 steps, estimated 3 hours
- Risk: Low - Risk: Low
Should I execute this plan? Should I execute this plan?
You: Yes, go ahead You: Yes, go ahead
Bot: 🚀 Auto Task started! Bot: 🚀 Task started!
``` ```
--- ---

2
src/SUMMARY.md
View file

@ -64,7 +64,7 @@
- [Suite - Full Desktop](./04-gbui/apps/suite.md) - [Suite - Full Desktop](./04-gbui/apps/suite.md)
- [Chat - AI Assistant](./04-gbui/apps/chat.md) - [Chat - AI Assistant](./04-gbui/apps/chat.md)
- [Drive - File Management](./04-gbui/apps/drive.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) - [Mail - Email Client](./04-gbui/apps/mail.md)
- [Calendar - Scheduling](./04-gbui/apps/calendar.md) - [Calendar - Scheduling](./04-gbui/apps/calendar.md)
- [Meet - Video Calls](./04-gbui/apps/meet.md) - [Meet - Video Calls](./04-gbui/apps/meet.md)

348
src/assets/chapter-04/autotask-interface.svg
View file

@ -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> <style>
.bg { fill: #f5f5f5; } .title-text { fill: #1E1B4B; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.frame { fill: none; stroke: #333; stroke-width: 2; } .main-text { fill: #334155; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.header-bg { fill: #1a1a2e; } .secondary-text { fill: #64748B; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.section-bg { fill: #ffffff; } .white-text { fill: #FFFFFF; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.main-text { fill: #1a1a1a; font-family: Arial, sans-serif; } .mono-text { fill: #475569; font-family: 'SF Mono', 'Fira Code', Consolas, monospace; }
.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; }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.bg { fill: #0d0d1a; } .title-text { fill: #F1F5F9; }
.frame { stroke: #333; } .main-text { fill: #E2E8F0; }
.header-bg { fill: #1a1a2e; } .secondary-text { fill: #94A3B8; }
.section-bg { fill: #1a1a2e; } .mono-text { fill: #CBD5E1; }
.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; }
} }
</style> </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 --> <!-- 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 --> <!-- Header Stats Bar -->
<rect x="20" y="50" width="960" height="680" rx="8" class="frame bg"/> <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>
<!-- Header Section --> <text x="120" y="145" font-size="20" font-weight="700" class="white-text">3</text>
<rect x="20" y="50" width="960" height="70" rx="8" class="header-bg"/> <text x="270" y="125" font-size="13" class="white-text">Pending</text>
<rect x="20" y="112" width="960" height="8" class="bg"/> <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>
<!-- Header Title --> <text x="420" y="145" font-size="20" font-weight="700" class="white-text">12</text>
<text x="50" y="85" font-size="22" font-weight="600" class="white-text">⚡ Auto Tasks</text> <rect x="550" y="105" width="130" height="35" rx="6" fill="#FFFFFF" opacity="0.2"/>
<rect x="175" y="70" width="70" height="22" rx="4" class="badge-premium"/> <text x="615" y="127" text-anchor="middle" font-size="13" font-weight="600" class="white-text">Need Approval: 2</text>
<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>
<!-- Intent Input Section --> <!-- Intent Input Section -->
<g transform="translate(40, 135)"> <rect x="50" y="170" width="900" height="130" rx="10" fill="#FFFFFF" stroke="#E2E8F0" filter="url(#cardShadow)"/>
<text x="0" y="20" font-size="14" font-weight="500" class="main-text">💡 What would you like to accomplish?</text> <text x="75" y="200" font-size="14" font-weight="600" class="main-text">What would you like to accomplish?</text>
<!-- Intent Textarea --> <!-- Input Field -->
<rect x="0" y="30" width="700" height="80" rx="8" class="input-field"/> <rect x="75" y="215" width="650" height="60" rx="8" fill="#F8FAFC" stroke="#E2E8F0"/>
<text x="15" y="55" font-size="13" class="main-text">Make a financial CRM for Deloitte with client management</text> <text x="90" y="240" 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="90" y="260" 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>
<!-- Controls Row --> <!-- Controls -->
<rect x="720" y="30" width="200" height="35" rx="6" class="input-field"/> <rect x="745" y="215" width="180" height="28" rx="6" fill="#F8FAFC" stroke="#E2E8F0"/>
<text x="735" y="53" font-size="12" class="main-text">Semi-Automatic ▼</text> <text x="760" y="234" font-size="12" class="main-text">Semi-Automatic</text>
<text x="730" y="78" font-size="10" class="secondary-text">Execution Mode</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"/> <rect x="745" y="250" width="180" height="32" rx="6" fill="url(#cyanGrad)"/>
<text x="820" y="98" text-anchor="middle" font-size="13" font-weight="500" fill="#1a1a1a">🚀 Compile & Plan</text> <text x="835" y="272" text-anchor="middle" font-size="13" font-weight="600" class="white-text">Compile &amp; Plan</text>
</g>
<!-- Compilation Result Section --> <!-- Execution Plan Card -->
<g transform="translate(40, 255)"> <rect x="50" y="320" width="900" height="180" rx="10" fill="#FFFFFF" stroke="#E2E8F0" filter="url(#cardShadow)"/>
<rect x="0" y="0" width="920" height="200" rx="8" class="card"/> <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 --> <!-- Badges -->
<text x="20" y="30" font-size="16" font-weight="600" class="main-text">Financial CRM for Deloitte</text> <rect x="75" y="385" width="100" height="24" rx="12" fill="url(#greenGrad)"/>
<text x="20" y="50" font-size="12" class="secondary-text">Client management and automated reporting system</text> <text x="125" y="402" text-anchor="middle" font-size="11" font-weight="500" class="white-text">Confidence: 94%</text>
<!-- Badges Row --> <rect x="185" y="385" width="80" height="24" rx="12" fill="url(#greenGrad)"/>
<g transform="translate(20, 60)"> <text x="225" y="402" text-anchor="middle" font-size="11" font-weight="500" class="white-text">Risk: Low</text>
<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="120" y="0" width="90" height="24" rx="4" class="risk-low"/> <rect x="275" y="385" width="100" height="24" rx="12" fill="#F1F5F9" stroke="#E2E8F0"/>
<text x="165" y="16" text-anchor="middle" font-size="11" class="white-text">Risk: Low</text> <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"/> <rect x="385" y="385" width="90" height="24" rx="12" fill="#F1F5F9" stroke="#E2E8F0"/>
<text x="280" y="16" text-anchor="middle" font-size="11" class="white-text">⏱️ Est: 2.5 hours</text> <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"/> <!-- Steps -->
<text x="400" y="16" text-anchor="middle" font-size="11" class="white-text">💰 Cost: $0.45</text> <text x="75" y="435" font-size="13" font-weight="600" class="main-text">Execution Plan (6 steps)</text>
</g>
<!-- Execution Plan Steps --> <!-- Step boxes -->
<text x="20" y="110" font-size="13" font-weight="500" class="main-text">📋 Execution Plan (6 steps)</text> <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)"> <rect x="215" y="445" width="130" height="45" rx="6" fill="#EEF2FF" stroke="#6366F1"/>
<!-- Step 1 --> <text x="225" y="462" font-size="9" font-weight="600" fill="#6366F1">STEP 2 • HIGH</text>
<rect x="0" y="0" width="140" height="55" rx="6" class="step-badge"/> <text x="225" y="478" font-size="11" class="main-text">Setup auth</text>
<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>
<!-- Step 2 --> <rect x="355" y="445" width="130" height="45" rx="6" fill="#EEF2FF" stroke="#6366F1"/>
<rect x="150" y="0" width="140" height="55" rx="6" class="step-badge"/> <text x="365" y="462" font-size="9" font-weight="600" fill="#6366F1">STEP 3 • HIGH</text>
<text x="160" y="18" font-size="10" font-weight="600" class="accent-text">STEP 2 • HIGH</text> <text x="365" y="478" font-size="11" class="main-text">Client module</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>
<!-- Step 3 --> <rect x="495" y="445" width="130" height="45" rx="6" fill="#FEF3C7" stroke="#F59E0B"/>
<rect x="300" y="0" width="140" height="55" rx="6" class="step-badge"/> <text x="505" y="462" font-size="9" font-weight="600" fill="#D97706">STEP 4 • MEDIUM</text>
<text x="310" y="18" font-size="10" font-weight="600" class="accent-text">STEP 3 • HIGH</text> <text x="505" y="478" font-size="11" class="main-text">Financial tracking</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>
<!-- Step 4 --> <rect x="635" y="445" width="130" height="45" rx="6" fill="#FEF3C7" stroke="#F59E0B"/>
<rect x="450" y="0" width="140" height="55" rx="6" class="step-badge"/> <text x="645" y="462" font-size="9" font-weight="600" fill="#D97706">STEP 5 • MEDIUM</text>
<text x="460" y="18" font-size="10" font-weight="600" style="fill: #FF9800;">STEP 4 • MEDIUM</text> <text x="645" y="478" font-size="11" class="main-text">Reports dashboard</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>
<!-- Step 5 --> <rect x="775" y="445" width="130" height="45" rx="6" fill="#DCFCE7" stroke="#10B981"/>
<rect x="600" y="0" width="140" height="55" rx="6" class="step-badge"/> <text x="785" y="462" font-size="9" font-weight="600" fill="#059669">STEP 6 • LOW</text>
<text x="610" y="18" font-size="10" font-weight="600" style="fill: #FF9800;">STEP 5 • MEDIUM</text> <text x="785" y="478" font-size="11" class="main-text">Deploy &amp; test</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>
<!-- Active Tasks Section --> <!-- Active Tasks Section -->
<g transform="translate(40, 470)"> <text x="75" y="535" font-size="16" font-weight="700" class="main-text">Active Tasks</text>
<text x="0" y="20" font-size="14" font-weight="500" class="main-text">📋 Active Tasks</text>
<!-- Filter Tabs --> <!-- Filter tabs -->
<g transform="translate(150, 5)"> <rect x="200" y="518" width="60" height="26" rx="4" fill="url(#cyanGrad)"/>
<rect x="0" y="0" width="70" height="28" rx="4" class="button-primary"/> <text x="230" y="536" text-anchor="middle" font-size="11" font-weight="500" class="white-text">All (8)</text>
<text x="35" y="19" text-anchor="middle" font-size="11" fill="#1a1a1a">All (8)</text>
<rect x="80" y="0" width="80" height="28" rx="4" class="input-field"/> <rect x="268" y="518" width="80" height="26" rx="4" fill="#F1F5F9" stroke="#E2E8F0"/>
<text x="120" y="19" text-anchor="middle" font-size="11" class="main-text">Running (3)</text> <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"/> <rect x="356" y="518" width="90" height="26" rx="4" fill="#F1F5F9" stroke="#E2E8F0"/>
<text x="220" y="19" text-anchor="middle" font-size="11" class="main-text">Approval (2)</text> <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 --> <!-- Task Item 1 - Running -->
<rect x="0" y="40" width="920" height="70" rx="8" class="card"/> <rect x="50" y="555" width="900" height="60" rx="8" fill="#FFFFFF" stroke="#E2E8F0" filter="url(#cardShadow)"/>
<rect x="15" y="52" width="70" height="20" rx="4" class="badge-running"/> <rect x="70" y="570" width="70" height="22" rx="4" fill="url(#cyanGrad)"/>
<text x="50" y="66" text-anchor="middle" font-size="10" fill="#1a1a1a">RUNNING</text> <text x="105" y="586" text-anchor="middle" font-size="10" font-weight="500" class="white-text">RUNNING</text>
<text x="100" y="66" font-size="14" font-weight="500" class="main-text">E-commerce Website for TechCorp</text> <text x="155" y="586" 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 --> <!-- Progress bar -->
<rect x="15" y="78" width="400" height="8" rx="4" class="progress-bg"/> <rect x="70" y="598" width="400" height="6" rx="3" fill="#E2E8F0"/>
<rect x="15" y="78" width="280" height="8" rx="4" class="progress-fill"/> <rect x="70" y="598" width="284" height="6" rx="3" fill="url(#cyanGrad)"/>
<text x="425" y="86" font-size="11" class="secondary-text">Step 5/7 (71%)</text> <text x="480" y="605" font-size="11" class="secondary-text">Step 5/7 (71%)</text>
<text x="15" y="102" font-size="11" class="secondary-text">▶️ Current: Building product catalog with search functionality</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 --> <!-- 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="50" y="625" width="900" height="60" rx="8" fill="#FFFFFF" stroke="#F59E0B" stroke-width="2" filter="url(#cardShadow)"/>
<rect x="15" y="132" width="110" height="20" rx="4" class="badge-approval"/> <rect x="70" y="640" width="110" height="22" rx="4" fill="url(#orangeGrad)"/>
<text x="70" y="146" text-anchor="middle" font-size="10" class="white-text">NEEDS APPROVAL</text> <text x="125" y="656" text-anchor="middle" font-size="10" font-weight="500" 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> <text x="195" y="656" 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;"/> <rect x="70" y="665" width="650" height="16" rx="3" fill="#FEF3C7"/>
<text x="25" y="175" font-size="11" style="fill: #E65100;">⚠️ Approval required: Send 50,000 emails to customer list (High impact action)</text> <text x="80" y="677" font-size="10" fill="#92400E">Approval required: Send 50,000 emails to customer list</text>
<g transform="translate(750, 135)"> <rect x="780" y="645" width="140" height="28" rx="6" fill="url(#greenGrad)"/>
<rect x="0" y="0" width="150" height="26" rx="4" class="button-primary"/> <text x="850" y="664" text-anchor="middle" font-size="11" font-weight="500" class="white-text">Review &amp; Approve</text>
<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>
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 9.3 KiB

461
src/assets/project-report.html Normal file
View 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
View 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>
Side by side

After

Width:  |  Height:  |  Size: 18 KiB