diff --git a/book.toml b/book.toml index 1ab88b9e..c121a725 100644 --- a/book.toml +++ b/book.toml @@ -12,7 +12,7 @@ build-dir = "book" default-theme = "light" preferred-dark-theme = "navy" smart-punctuation = true -additional-css = ["src/custom.css", "src/whatsapp-chat.css"] +additional-css = ["src/custom.css", "src/whatsapp-chat.css", "src/designer-panel.css"] additional-js = ["src/theme-sync.js"] [output.html.favicon] diff --git a/src/04-gbui/apps/tasks.md b/src/04-gbui/apps/tasks.md index 5c25562b..4d6c85fc 100644 --- a/src/04-gbui/apps/tasks.md +++ b/src/04-gbui/apps/tasks.md @@ -224,6 +224,6 @@ with status: received, diagnosing, repairing, ready, delivered" ## See Also -- [Autonomous Tasks](../../21-autonomous-tasks/README.md) - Complete guide +- [Autonomous Tasks](../../17-autonomous-tasks/README.md) - Complete guide - [Dev Chat Widget](../dev-chat.md) - Test while developing - [HTMX Architecture](../htmx-architecture.md) - How the UI works \ No newline at end of file diff --git a/src/04-gbui/dev-chat.md b/src/04-gbui/dev-chat.md index 67ee8d2b..1bcfa585 100644 --- a/src/04-gbui/dev-chat.md +++ b/src/04-gbui/dev-chat.md @@ -238,6 +238,6 @@ The dev chat widget: ## See Also -- [Autonomous Tasks](../21-autonomous-tasks/README.md) - How apps are generated +- [Autonomous Tasks](../17-autonomous-tasks/README.md) - How apps are generated - [HTMX Architecture](./htmx-architecture.md) - Frontend patterns - [REST API](../10-rest/README.md) - API reference \ No newline at end of file diff --git a/src/07-gbapp/autonomous-tasks.md b/src/07-gbapp/autonomous-tasks.md index eee82676..1a4f87fb 100644 --- a/src/07-gbapp/autonomous-tasks.md +++ b/src/07-gbapp/autonomous-tasks.md @@ -309,7 +309,7 @@ The dev chat uses the same `user_data` system for history storage. ## See Also -- [Autonomous Tasks Chapter](../21-autonomous-tasks/README.md) - Complete guide +- [Autonomous Tasks Chapter](../17-autonomous-tasks/README.md) - Complete guide - [CREATE SITE](../06-gbdialog/keyword-create-site.md) - The keyword behind it - [REST API](../10-rest/README.md) - API reference - [HTMX Architecture](../04-gbui/htmx-architecture.md) - Frontend patterns \ No newline at end of file diff --git a/src/17-autonomous-tasks/README.md b/src/17-autonomous-tasks/README.md new file mode 100644 index 00000000..cbbb6689 --- /dev/null +++ b/src/17-autonomous-tasks/README.md @@ -0,0 +1,166 @@ +# Autonomous Tasks + +Build complete applications through natural conversation. Describe what you want, and the system creates it automatically. + +The AutoTask system uses an LLM-powered intent classifier to understand your request and route it to the appropriate handler. Whether you need a full web application, a simple reminder, or automated monitoring, you describe it in plain language. + +![AutoTask Architecture](../assets/chapter-17/autotask-architecture.svg) + +--- + +## Intent Types + +| Type | Example | What Gets Created | +|------|---------|-------------------| +| `APP_CREATE` | "create app for clinic" | HTMX pages, tools, schedulers | +| `TODO` | "call John tomorrow" | Task saved to tasks table | +| `MONITOR` | "alert when IBM changes" | ON CHANGE event handler | +| `ACTION` | "email all customers" | Executes immediately | +| `SCHEDULE` | "daily 9am summary" | SET SCHEDULE automation | +| `GOAL` | "increase sales 20%" | Autonomous LLM loop with metrics | +| `TOOL` | "when I say X, do Y" | Voice/chat command | + +--- + +## Quick Start + +
+
+ +
+
+ +
+
+ +--- + +## Architecture Overview + +![Bot Database Architecture](../assets/chapter-17/bot-database-architecture.svg) + +One bot equals one database. All applications within a bot share the same data tables, tools, and schedulers. + +--- + +## File Structure + +| Path | Description | +|------|-------------| +| `.gbdrive/apps/{name}/` | Generated web application | +| `.gbdrive/apps/{name}/index.html` | Main HTMX page | +| `.gbdrive/apps/{name}/assets/` | CSS, images | +| `.gbdialog/tables.bas` | Database schema definitions | +| `.gbdialog/tools/` | Voice and chat commands | +| `.gbdialog/schedulers/` | Timed automations | +| `.gbdialog/events/` | Event triggers (ON CHANGE, ON EMAIL) | + +--- + +## Creating an Application + +
+
+ +
+
+ +
+
+ +--- + +## Modifying Your Application + +Use Designer to change anything about your app through conversation. + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +--- + +## Adding Automation + +
+
+ +
+
+ +
+
+ +--- + +## Keywords Reference + +| Keyword | Purpose | +|---------|---------| +| `TABLE` | Define data structure | +| `FIND` | Search records | +| `SAVE` | Create record | +| `UPDATE` | Modify record | +| `DELETE` | Remove record | +| `TALK` | Send message | +| `HEAR` | Wait for input | +| `SET SCHEDULE` | Create automation | +| `ON CHANGE` | Monitor for changes | +| `ON EMAIL` | Trigger on email received | + +--- + +## Next Steps + +- [Designer Guide](./designer.md) — Edit apps through conversation +- [Data Model](./data-model.md) — Understanding tables +- [Task Workflow](./workflow.md) — How tasks execute +- [Examples](./examples.md) — Real-world applications \ No newline at end of file diff --git a/src/17-autonomous-tasks/app-generation.md b/src/17-autonomous-tasks/app-generation.md new file mode 100644 index 00000000..f1a31643 --- /dev/null +++ b/src/17-autonomous-tasks/app-generation.md @@ -0,0 +1,117 @@ +# App Generation + +From natural language to complete application, the generation process handles database design, UI creation, and automation setup. + +![App Generation Flow](../assets/chapter-17/app-generation-flow.svg) + +--- + +## How It Works + +You describe what you need. The system analyzes your request, identifies the domain, extracts entities, and generates everything automatically. + +
+
+ +
+
+ +
+
+ +--- + +## What Gets Created + +| Component | Location | Description | +|-----------|----------|-------------| +| Database tables | `tables.bas` | Data schema with fields and types | +| Web pages | `/apps/{name}/` | HTMX-based user interface | +| Voice commands | `.gbdialog/tools/` | Activated by trigger phrases | +| Automations | `.gbdialog/schedulers/` | Timed tasks and reports | + +--- + +## Modifying Your App + +Use conversation to change any aspect of your application. + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +--- + +## Multiple Apps, Shared Data + +Create different applications that share the same database tables. + +
+
+ +
+
+ +
+
+ +--- + +## Generation Process + +| Phase | Description | +|-------|-------------| +| **Intent Analysis** | LLM identifies domain and required entities | +| **Schema Design** | Tables and relationships defined | +| **UI Generation** | HTMX pages created for each entity | +| **Tool Creation** | Voice commands for common actions | +| **Scheduler Setup** | Automations for reports and alerts | + +--- + +## Next Steps + +- [Designer Guide](./designer.md) — All modification commands +- [Data Model](./data-model.md) — Understanding table definitions \ No newline at end of file diff --git a/src/17-autonomous-tasks/data-model.md b/src/17-autonomous-tasks/data-model.md new file mode 100644 index 00000000..b7184328 --- /dev/null +++ b/src/17-autonomous-tasks/data-model.md @@ -0,0 +1,166 @@ +# Data Model + +Tables store your application data. When you describe what you need, the system creates table definitions automatically in `tables.bas`. + +![Data Model Flow](../assets/chapter-17/data-model-flow.svg) + +--- + +## What Is a Table? + +A table organizes related data into rows and columns, similar to a spreadsheet. + +| id | name | phone | email | +|----|------|-------|-------| +| 1 | John Smith | 555-1234 | john@email.com | +| 2 | Maria Garcia | 555-5678 | maria@email.com | + +--- + +## Creating Tables + +Describe what data you need to store. + +
+
+ +
+
+ +
+
+ +--- + +## Adding Fields + +Add new fields to existing tables through conversation. + +
+
+ +
+
+ +
+
+ +--- + +## Field Types + +| Type | Use For | Example | +|------|---------|---------| +| `STRING` | Short text | Names, phones | +| `TEXT` | Long text | Notes, descriptions | +| `INTEGER` | Whole numbers | Age, quantity | +| `DECIMAL` | Numbers with decimals | Price, weight | +| `BOOLEAN` | Yes/No values | Active, completed | +| `DATE` | Dates only | Birth date | +| `DATETIME` | Date and time | Appointment time | + +--- + +## Searching Data + +Use natural language to find records. + +
+
+ +
+
+ +
+
+ +--- + +## Linking Tables + +Create relationships between tables. + +
+
+ +
+
+ +
+
+ +--- + +## Shared Data + +All applications within a bot share the same tables. Change data in one app, and it updates everywhere. + +| Concept | Description | +|---------|-------------| +| One bot = one database | All apps share tables | +| Schema in tables.bas | Single source of truth | +| Auto-sync | Changes deploy automatically | + +--- + +## TABLE Keyword + +Tables are defined in `.gbdialog/tables.bas` using the TABLE keyword: + +| Syntax | Description | +|--------|-------------| +| `TABLE name` | Start table definition | +| `field AS TYPE` | Define a field | +| `END TABLE` | End table definition | + +--- + +## FIND Keyword + +Query data using the FIND keyword: + +| Syntax | Description | +|--------|-------------| +| `FIND * IN table` | Get all records | +| `FIND * IN table WHERE condition` | Filter records | +| `FIND field1, field2 IN table` | Select specific fields | + +--- + +## Next Steps + +- [Designer Guide](./designer.md) — Modify tables through conversation +- [Examples](./examples.md) — Real-world data models \ No newline at end of file diff --git a/src/17-autonomous-tasks/designer.md b/src/17-autonomous-tasks/designer.md new file mode 100644 index 00000000..9d707c7e --- /dev/null +++ b/src/17-autonomous-tasks/designer.md @@ -0,0 +1,377 @@ +# Designer + +Designer is an AI assistant that appears alongside your application. Use natural conversation to modify any aspect of your app without writing code. + +![Designer Workflow](../assets/chapter-17/designer-workflow.svg) + +--- + +## How It Works + +Designer understands the context of your application. When you make a request, it knows which app you are viewing, which page is active, and what tables exist. + +
+
+ +
+
+ +
+
+ +--- + +## What Designer Can Modify + +| Category | Examples | +|----------|----------| +| **Styles** | Colors, layout, fonts, spacing | +| **HTML Pages** | Forms, lists, buttons, elements | +| **Database** | Add fields, create tables | +| **Tools** | Voice commands, chat triggers | +| **Schedulers** | Automated tasks, reports | + +--- + +## Editing Styles + +
+
+ +
+
+ +
+
+ +--- + +## Adding Form Fields + +
+
+ +
+
+ +
+
+ +--- + +## Creating Voice Commands + +
+
+ +
+
+ +
+
+ +--- + +## Creating Schedulers + +
+
+ +
+
+ +
+
+ +--- + +## Adding Database Fields + +
+
+ +
+
+ +
+
+ +--- + +## Context Awareness + +Designer tracks your current location and correlates follow-up requests. + +| Context | How It Is Used | +|---------|----------------| +| **Current app** | Edits apply to that app's files | +| **Current page** | Defaults edits to that file | +| **Recent changes** | Correlates follow-up requests | +| **Available tables** | Knows your data structure | +| **Existing tools** | Knows voice commands already created | + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +--- + +## Handling Sensitive Information + +When Designer needs API keys or credentials: + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +--- + +## Preview Before Changes + +Designer shows what will change before applying destructive operations. + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +--- + +## Safety Features + +| Feature | Description | +|---------|-------------| +| Preview changes | Shows what will change before applying | +| Confirm destructive actions | Asks before deleting | +| Change history | All changes are logged | +| Undo support | Can undo recent changes | + +--- + +## Limitations + +| Limitation | Reason | +|------------|--------| +| Cannot delete entire app | Safety protection | +| Cannot access external systems without credentials | Security | +| Cannot modify system files | Isolation | +| Cannot execute arbitrary code | Security | + +--- + +## Available Keywords + +Designer uses GB BASIC keywords to implement changes: + +| Category | Keywords | +|----------|----------| +| **Communication** | TALK, HEAR, SEND MAIL, SEND TEMPLATE | +| **Data** | FIND, SAVE, UPDATE, DELETE | +| **Automation** | SET SCHEDULE, ON CHANGE, ON EMAIL | +| **AI** | LLM, USE KB | +| **Web** | SCRAPE, GET, POST, RSS | +| **Memory** | SET BOT MEMORY, GET BOT MEMORY | +| **Control** | IF/THEN/ELSE, FOR EACH/NEXT, WHILE/WEND | + +--- + +## Undoing Changes + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +--- + +## Tips for Better Results + +### Be Specific + +| Less Effective | More Effective | +|----------------|----------------| +| "improve the form" | "add email validation to the form" | +| "change the colors" | "change the main button to green" | +| "fix this" | "increase the font size in the table" | + +### Combine Requests + +
+
+ +
+
+ +
+
+ +--- + +## Next Steps + +- [App Generation](./app-generation.md) — How apps are created +- [Task Workflow](./workflow.md) — How tasks are processed +- [Data Model](./data-model.md) — TABLE keyword reference \ No newline at end of file diff --git a/src/17-autonomous-tasks/devchat.md b/src/17-autonomous-tasks/devchat.md new file mode 100644 index 00000000..98396c53 --- /dev/null +++ b/src/17-autonomous-tasks/devchat.md @@ -0,0 +1 @@ +# DevChat diff --git a/src/17-autonomous-tasks/examples.md b/src/17-autonomous-tasks/examples.md new file mode 100644 index 00000000..25008a3e --- /dev/null +++ b/src/17-autonomous-tasks/examples.md @@ -0,0 +1,248 @@ +# Examples + +Real-world applications built through natural conversation. + +--- + +## Example 1: Cellphone Store CRM + +**Request:** "Create a CRM for my cellphone store with customer tracking, inventory, sales, and repair status" + +**Generated URL:** `/apps/cellphone-crm` + +### Tables Created + +| Table | Fields | +|-------|--------| +| `customers` | id, name, phone, email, address, notes | +| `products` | id, name, brand, model, price, cost, stock | +| `sales` | id, customer_id, product_id, quantity, total, date | +| `repairs` | id, customer_id, device, problem, status, price | + +### Features + +| Feature | Description | +|---------|-------------| +| Customer search | Find by name or phone | +| Inventory alerts | Low stock notifications | +| Sales tracking | Linked to customer and product | +| Repair board | Status workflow tracking | +| Daily summary | Sales report automation | + +### Execution Steps + +| Step | Task | Time | +|------|------|------| +| 1 | Create database tables | 15s | +| 2 | Generate customer management UI | 45s | +| 3 | Generate product inventory UI | 30s | +| 4 | Generate sales tracking UI | 40s | +| 5 | Generate repair status board | 50s | +| 6 | Add search and filters | 25s | +| **Total** | | **3m 25s** | + +--- + +## Example 2: Restaurant Reservations + +**Request:** "Build a reservation system for my restaurant with table management and waitlist" + +**Generated URL:** `/apps/restaurant-reservations` + +### Tables Created + +| Table | Fields | +|-------|--------| +| `tables` | id, number, capacity, location, status | +| `reservations` | id, guest_name, phone, party_size, date, time, table_id, status | +| `waitlist` | id, guest_name, phone, party_size, added_at, estimated_wait | + +### Features + +| Feature | Description | +|---------|-------------| +| Table layout | Visual availability display | +| Calendar view | Reservation scheduling | +| Waitlist | Real-time queue management | +| SMS notifications | Guest alerts (if configured) | +| Daily bookings | Summary report | + +--- + +## Example 3: Property Management + +**Request:** "Create a system to manage rental properties with tenants, leases, and maintenance requests" + +**Generated URL:** `/apps/property-manager` + +### Tables Created + +| Table | Fields | +|-------|--------| +| `properties` | id, address, type, bedrooms, bathrooms, rent, status | +| `tenants` | id, name, phone, email, emergency_contact | +| `leases` | id, property_id, tenant_id, start_date, end_date, rent, deposit | +| `maintenance` | id, property_id, tenant_id, issue, priority, status, assigned_to | +| `payments` | id, lease_id, amount, date, method, status | + +### Features + +| Feature | Description | +|---------|-------------| +| Property listing | Filters by type, status, rent | +| Tenant directory | With lease history | +| Maintenance tracking | Priority and status workflow | +| Payment tracking | Due date alerts | +| Lease reminders | Expiration notifications | + +--- + +## Example 4: Gym Membership + +**Request:** "Build a gym membership system with class scheduling and attendance tracking" + +**Generated URL:** `/apps/gym-manager` + +### Tables Created + +| Table | Fields | +|-------|--------| +| `members` | id, name, phone, email, plan, start_date, expiry_date | +| `classes` | id, name, instructor, day, time, capacity, room | +| `enrollments` | id, member_id, class_id, enrolled_at | +| `attendance` | id, member_id, check_in, check_out | +| `payments` | id, member_id, amount, date, plan | + +### Features + +| Feature | Description | +|---------|-------------| +| Check-in/out | Member attendance tracking | +| Class schedule | With enrollment management | +| Attendance reports | Usage analytics | +| Expiry alerts | Membership renewal reminders | +| Revenue tracking | Payment summaries | + +--- + +## Example 5: Event Planning + +**Request:** "Create an event planning tool with guest lists, vendors, and budget tracking" + +**Generated URL:** `/apps/event-planner` + +### Tables Created + +| Table | Fields | +|-------|--------| +| `events` | id, name, date, venue, budget, status | +| `guests` | id, event_id, name, email, rsvp_status, dietary_needs, table | +| `vendors` | id, event_id, name, service, contact, cost, status | +| `tasks` | id, event_id, task, assignee, due_date, status | +| `expenses` | id, event_id, category, description, amount, paid | + +### Features + +| Feature | Description | +|---------|-------------| +| Event dashboard | Countdown and overview | +| Guest list | RSVP tracking | +| Vendor management | Contracts and payments | +| Task checklist | Assignment and due dates | +| Budget tracking | Budget vs actual spending | + +--- + +## Example 6: Medical Clinic + +**Request:** "Build a patient management system for a small clinic with appointments and medical records" + +**Generated URL:** `/apps/clinic-manager` + +### Tables Created + +| Table | Fields | +|-------|--------| +| `patients` | id, name, dob, phone, email, address, insurance | +| `appointments` | id, patient_id, doctor, date, time, reason, status | +| `records` | id, patient_id, date, diagnosis, treatment, notes, doctor | +| `prescriptions` | id, record_id, medication, dosage, duration | + +### Features + +| Feature | Description | +|---------|-------------| +| Patient search | With full history | +| Appointment calendar | Per doctor view | +| Medical records | Timeline per patient | +| Prescriptions | Medication tracking | +| Daily list | Appointments per doctor | + +--- + +## Example 7: Inventory System + +**Request:** "Simple inventory tracking with suppliers, purchase orders, and stock alerts" + +**Generated URL:** `/apps/inventory` + +### Tables Created + +| Table | Fields | +|-------|--------| +| `products` | id, sku, name, category, quantity, min_stock, location | +| `suppliers` | id, name, contact, email, phone, address | +| `purchase_orders` | id, supplier_id, status, total, created_at | +| `order_items` | id, order_id, product_id, quantity, unit_price | +| `stock_movements` | id, product_id, type, quantity, reason, date | + +### Features + +| Feature | Description | +|---------|-------------| +| Product list | With stock levels | +| Low stock alerts | Dashboard notifications | +| Supplier directory | Contact management | +| Purchase orders | Creation and tracking | +| Stock history | Movement audit trail | + +--- + +## Complexity Guide + +| Complexity | Tables | Time | Example | +|------------|--------|------|---------| +| Simple | 1-2 | 1-2 min | Contact list, tracker | +| Medium | 3-5 | 3-5 min | CRM, basic inventory | +| Complex | 6-10 | 5-10 min | Full business management | +| Large | 10+ | 10+ min | ERP-style systems | + +--- + +## Tips for Better Results + +### Be Specific + +| Less Effective | More Effective | +|----------------|----------------| +| "Business app" | "CRM for cellphone store with customers, products, sales, and repair tracking" | +| "Inventory system" | "Inventory system with low stock alerts when below 10 units" | +| "Track repairs" | "Repair tracking with statuses: received, diagnosing, repairing, ready, delivered" | + +### Include Key Details + +| Detail | Example | +|--------|---------| +| Entities | "customers, products, orders" | +| Relationships | "orders linked to customers" | +| Workflows | "status: pending, approved, shipped" | +| Automations | "daily report at 9am" | +| Alerts | "notify when stock below 10" | + +--- + +## Next Steps + +- [Task Workflow](./workflow.md) — How tasks execute +- [App Generation](./app-generation.md) — Technical details +- [Data Model](./data-model.md) — Table structure \ No newline at end of file diff --git a/src/17-autonomous-tasks/workflow.md b/src/17-autonomous-tasks/workflow.md new file mode 100644 index 00000000..26d71f93 --- /dev/null +++ b/src/17-autonomous-tasks/workflow.md @@ -0,0 +1,124 @@ +# Task Workflow + +From request to working application, the task workflow handles every step automatically. + +![Task Workflow](../assets/chapter-17/task-workflow.svg) + +--- + +## The Three Steps + +| Step | What Happens | +|------|--------------| +| 1. **Describe** | You tell the bot what you want in plain language | +| 2. **Plan** | System analyzes and creates an execution plan | +| 3. **Execute** | Steps run automatically, app is delivered | + +--- + +## Example Workflow + +
+
+ +
+
+ +
+
+ +
+
+ +--- + +## Error Handling + +When something goes wrong, the system asks what to do. + +
+
+ +
+
+ +
+
+ +
+
+ +--- + +## Approval Requests + +Some actions require confirmation before executing. + +
+
+ +
+
+ +
+
+ +
+
+ +--- + +## Actions Requiring Approval + +| Action | Reason | +|--------|--------| +| Bulk email sends | Prevents accidental spam | +| Data deletion | Prevents data loss | +| External API calls | Cost and security | +| Schema changes | Database integrity | + +--- + +## Next Steps + +- [Designer Guide](./designer.md) — Edit apps through conversation +- [Examples](./examples.md) — Real-world applications \ No newline at end of file diff --git a/src/21-autonomous-tasks/README.md b/src/21-autonomous-tasks/README.md deleted file mode 100644 index 66c82478..00000000 --- a/src/21-autonomous-tasks/README.md +++ /dev/null @@ -1,221 +0,0 @@ -# Autonomous Tasks - -> **From Intent to Application** - ---- - -## What Are Autonomous Tasks? - -Autonomous Tasks transform how applications are built. Instead of writing code manually, you describe what you want, and the system generates a complete working application. - -**Example:** -> "I want to create a CRM for my cellphone store" - -**Result:** -- A fully functional HTMX web application at `/apps/cellphone-crm` -- Database tables for `customers`, `products`, `sales`, `repairs` -- Forms, lists, filters, and reports - all working -- Connected to your bot for AI-assisted operations - ---- - -## How It Works - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ 1. DESCRIBE │ -│ "Create a CRM for my cellphone store with customer │ -│ tracking, sales, and repair status" │ -└─────────────────────────────────────────────────────────────────┘ - │ - ▼ -┌─────────────────────────────────────────────────────────────────┐ -│ 2. PLAN │ -│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ -│ │ Step 1 │ │ Step 2 │ │ Step 3 │ │ -│ │ Create │→│ Generate │→│ Setup │ │ -│ │ Tables │ │ UI │ │ Workflows │ │ -│ └──────────────┘ └──────────────┘ └──────────────┘ │ -└─────────────────────────────────────────────────────────────────┘ - │ - ▼ -┌─────────────────────────────────────────────────────────────────┐ -│ 3. EXECUTE │ -│ [████████████████░░░░░░░░░░] 60% - Generating UI... │ -│ Step 2 of 3 • ETA: 2 minutes │ -└─────────────────────────────────────────────────────────────────┘ - │ - ▼ -┌─────────────────────────────────────────────────────────────────┐ -│ 4. DONE │ -│ ✅ Application ready at /apps/cellphone-crm │ -│ ✅ Tables created: customers, products, sales, repairs │ -│ ✅ AI assistant connected │ -└─────────────────────────────────────────────────────────────────┘ -``` - ---- - -## The Stack - -| Layer | Technology | What It Does | -|-------|------------|--------------| -| **Frontend** | HTMX | Dynamic UI without writing JavaScript | -| **Backend** | botserver | API, authentication, business logic | -| **Database** | PostgreSQL | Stores your application data | -| **Storage** | MinIO/S3 | Files, documents, uploads | -| **AI** | LLM | Generates the app, powers the assistant | - -### No Middleware Needed - -Generated apps talk directly to botserver: - -``` -┌─────────────────────┐ ┌─────────────────────┐ -│ HTMX Frontend │──────│ botserver │ -│ │ HTTP │ │ -│ - Forms │◄────►│ - /api/db/table │ -│ - Lists │ │ - /api/drive/... │ -│ - Actions │ │ - /api/llm/... │ -└─────────────────────┘ └─────────────────────┘ -``` - ---- - -## Where Apps Live - -Generated applications are stored in `.gbdrive/apps`: - -``` -mybot.gbai/ -└── mybot.gbdrive/ - └── apps/ - └── cellphone-crm/ - ├── index.html # Main application - ├── _assets/ - │ ├── htmx.min.js - │ ├── app.js - │ └── styles.css - └── data/ - └── schema.json # Table definitions -``` - -Access your app at: `https://your-bot.com/apps/cellphone-crm` - ---- - -## Data Storage - -### The `user_data` Virtual Table - -Every app has access to a flexible data store through the `user_data` virtual table system. When your app needs a table like `customers`, botserver maps it to the underlying storage: - -``` -App request: POST /api/db/customers - │ - ▼ -botserver routes to: user_data table with namespace "cellphone-crm.customers" - │ - ▼ -PostgreSQL storage with proper indexing and relationships -``` - -### Your Tables Are Real - -When you create an app that needs `customers`, `products`, and `sales` tables, they're created as proper database entities: - -| Table | Fields | Purpose | -|-------|--------|---------| -| `customers` | id, name, phone, email, notes | Customer records | -| `products` | id, name, brand, model, price, stock | Inventory | -| `sales` | id, customer_id, product_id, date, amount | Transactions | -| `repairs` | id, customer_id, device, status, notes | Service tracking | - ---- - -## Task Steps - -Every task is broken into steps that are stored for: - -1. **Continuation** - Resume later if interrupted -2. **Progress tracking** - See exactly where you are -3. **Debugging** - Understand what happened -4. **Learning** - Improve future generations - -### Step Structure - -```json -{ - "task_id": "abc123", - "steps": [ - { - "order": 1, - "name": "Create database tables", - "status": "completed", - "started_at": "2024-01-15T10:00:00Z", - "completed_at": "2024-01-15T10:00:15Z" - }, - { - "order": 2, - "name": "Generate application UI", - "status": "running", - "started_at": "2024-01-15T10:00:16Z", - "progress": 60 - }, - { - "order": 3, - "name": "Configure workflows", - "status": "pending" - } - ] -} -``` - ---- - -## Chapter Contents - -- [Task Workflow](./workflow.md) - From intent to completion -- [App Generation](./app-generation.md) - How apps are created -- [Data Model](./data-model.md) - Tables and storage -- [Progress Tracking](./progress.md) - Monitoring and continuation -- [Examples](./examples.md) - Real-world autonomous tasks - ---- - -## Quick Example - -**You say:** -> "Create a CRM for my cellphone store with customers, sales tracking, and repair status" - -**The system:** - -1. **Analyzes your intent:** - - Type: CRM application - - Domain: Cellphone retail - - Entities: customers, products, sales, repairs - -2. **Creates the plan:** - - Step 1: Create `customers`, `products`, `sales`, `repairs` tables - - Step 2: Generate HTMX application with forms and lists - - Step 3: Add search, filters, and status workflows - -3. **Executes and reports:** - ``` - ✅ Step 1: Tables created - ⏳ Step 2: Generating UI... (60%) - ⏸ Step 3: Waiting - ``` - -4. **Delivers the app:** - - URL: `/apps/cellphone-crm` - - Features: Customer list, add customer form, sales tracking, repair status board - ---- - -## See Also - -- [CREATE SITE](../06-gbdialog/keyword-create-site.md) - The keyword behind app generation -- [.gbdrive Storage](../02-templates/gbdrive.md) - Where apps live -- [REST API](../10-rest/README.md) - The API your apps use -- [HTMX Architecture](../04-gbui/htmx-architecture.md) - Frontend patterns \ No newline at end of file diff --git a/src/21-autonomous-tasks/app-generation.md b/src/21-autonomous-tasks/app-generation.md deleted file mode 100644 index 1017d2d0..00000000 --- a/src/21-autonomous-tasks/app-generation.md +++ /dev/null @@ -1,373 +0,0 @@ -# App Generation - -> **HTMX Applications Connected to botserver** - ---- - -## Overview - -When you request an application, the system generates a complete HTMX frontend that communicates directly with botserver's API. No middleware, no separate backend - just HTML that talks to the API. - ---- - -## The Generated Stack - -``` -┌─────────────────────────────────────────────────────────────────┐ -│ Generated Application │ -│ ┌─────────────────────────────────────────────────────────┐ │ -│ │ index.html │ │ -│ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ │ -│ │ │ Lists │ │ Forms │ │ Actions │ │ Filters │ │ │ -│ │ └────┬────┘ └────┬────┘ └────┬────┘ └────┬────┘ │ │ -│ │ └───────────┬┴───────────┴┬───────────┘ │ │ -│ │ │ HTMX │ │ │ -│ └───────────────────┼─────────────┼──────────────────────┘ │ -└──────────────────────┼─────────────┼──────────────────────────┘ - │ │ - ▼ ▼ -┌─────────────────────────────────────────────────────────────────┐ -│ botserver API │ -│ ┌────────────┐ ┌────────────┐ ┌────────────┐ │ -│ │ /api/db/* │ │/api/drive/*│ │ /api/llm/* │ │ -│ │ CRUD │ │ Files │ │ AI │ │ -│ └─────┬──────┘ └─────┬──────┘ └─────┬──────┘ │ -│ └───────────────┼───────────────┘ │ -│ ▼ │ -│ PostgreSQL + MinIO │ -└─────────────────────────────────────────────────────────────────┘ -``` - ---- - -## Generated File Structure - -When you create an app called "cellphone-crm", this is created: - -``` -.gbdrive/apps/cellphone-crm/ -├── index.html # Main application -├── _assets/ -│ ├── htmx.min.js # HTMX library -│ ├── app.js # App-specific JavaScript -│ └── styles.css # Styling -└── schema.json # Table definitions -``` - ---- - -## HTMX Patterns Used - -### List View with Auto-Refresh - -```html -
- Loading customers... -
-``` - -### Create Form - -```html -
- - - - - - -
-``` - -### Edit in Place - -```html - - ${name} - ${phone} - ${email} - -``` - -### Delete with Confirmation - -```html - -``` - -### Search - -```html - -``` - -### Filter Dropdown - -```html - -``` - ---- - -## API Endpoints Your App Uses - -### App Context is Automatic - -Your app runs inside botui (Suite). The botui proxy automatically: - -1. Detects your app from the URL (`/apps/cellphone-crm/`) -2. Injects `X-App-Context: cellphone-crm` header -3. Forwards to botserver - -**You don't need to do anything special** - just use normal HTMX: - -```html - -
- - -
-``` - -### Endpoints - -| HTMX Call | Endpoint | What It Does | -|-----------|----------|--------------| -| `hx-get="/api/db/customers"` | GET | List all customers | -| `hx-get="/api/db/customers?q=john"` | GET | Search customers | -| `hx-post="/api/db/customers"` | POST | Create customer | -| `hx-put="/api/db/customers/123"` | PUT | Update customer | -| `hx-delete="/api/db/customers/123"` | DELETE | Delete customer | - -### Query Parameters - -| Parameter | Example | Purpose | -|-----------|---------|---------| -| `q` | `?q=john` | Full-text search | -| `sort` | `?sort=created_at` | Sort field | -| `order` | `?order=desc` | Sort direction | -| `limit` | `?limit=20` | Results per page | -| `offset` | `?offset=40` | Pagination | -| `{field}` | `?status=active` | Filter by field | - ---- - -## Example: Cellphone CRM - -For a cellphone store CRM, the generated app includes: - -### Customer List - -```html -
-
-

Customers

- - -
- - - - - - - - - - - - -
NamePhoneEmailActions
-
-``` - -### Sales Form - -```html -
- - - - - - - - -
-``` - -### Repair Status Board - -```html -
-
-

Received

-
-
-
- -
-

Diagnosing

-
-
-
- -
-

Repairing

-
-
-
- -
-

Ready for Pickup

-
-
-
-
-``` - ---- - -## Styling - -Generated apps use CSS custom properties for easy theming: - -```css -:root { - --primary: #0ea5e9; - --success: #22c55e; - --warning: #f59e0b; - --danger: #ef4444; - --bg: #ffffff; - --text: #1e293b; - --border: #e2e8f0; - --radius: 8px; -} - -/* Dark mode automatic */ -@media (prefers-color-scheme: dark) { - :root { - --bg: #0f172a; - --text: #f1f5f9; - --border: #334155; - } -} -``` - ---- - -## JavaScript Helpers - -`app.js` includes utilities for common operations: - -```javascript -// Toast notifications -function toast(message, type = 'info') { - // Shows a temporary notification -} - -// Modal management -function openModal(id) { ... } -function closeModal(id) { ... } - -// HTMX event handling -document.body.addEventListener('htmx:afterSwap', (e) => { - // Update UI after data changes -}); - -document.body.addEventListener('htmx:responseError', (e) => { - toast('Error: ' + e.detail.error, 'error'); -}); -``` - ---- - -## Bot Integration - -Your generated app can talk to the bot for AI features: - -```html - -
- - -
- - -
-``` - ---- - -## Customization After Generation - -Generated apps can be modified: - -1. **Edit directly** - Modify `index.html` in `.gbdrive/apps/` -2. **Use Designer** - Visual editor in Suite -3. **Regenerate** - Ask for changes, system updates the app - ---- - -## See Also - -- [Data Model](./data-model.md) - How tables are created -- [Progress Tracking](./progress.md) - Monitor generation -- [HTMX Architecture](../04-gbui/htmx-architecture.md) - Frontend patterns -- [REST API](../10-rest/README.md) - API reference \ No newline at end of file diff --git a/src/21-autonomous-tasks/data-model.md b/src/21-autonomous-tasks/data-model.md deleted file mode 100644 index 7230fb94..00000000 --- a/src/21-autonomous-tasks/data-model.md +++ /dev/null @@ -1,398 +0,0 @@ -# Data Model - -> **Tables Created for Your Application** - ---- - -## Overview - -When you create an autonomous task that generates an application, the system automatically creates the database tables needed to store your data. These tables are real PostgreSQL tables with proper types, indexes, and relationships. - ---- - -## The user_data System - -Under the hood, all application data is managed through the `user_data` virtual table system. This provides: - -- **Namespacing** - Each app's tables are isolated -- **Multi-tenancy** - Your data is separate from other users -- **Flexibility** - Tables can be created dynamically -- **Security** - Access control per table - -### How It Works - -Apps run inside botui (Suite), which proxies all API calls to botserver. The app context flows automatically: - -``` -┌─────────────────────────────────────────────────────────────┐ -│ botui (Suite) │ -│ │ -│ ┌───────────────────────────────────────────────────────┐ │ -│ │ Your App: /apps/cellphone-crm/ │ │ -│ │ │ │ -│ │
│ │ -│ │ │ │ -│ └───────────────────────────────────────────────────────┘ │ -│ │ │ -│ ▼ │ -│ ┌───────────────────────────────────────────────────────┐ │ -│ │ botui proxy │ │ -│ │ - Adds X-App-Context: cellphone-crm │ │ -│ │ - Forwards to botserver │ │ -│ └───────────────────────────────────────────────────────┘ │ -└─────────────────────────────────────────────────────────────┘ - │ - ▼ -┌─────────────────────────────────────────────────────────────┐ -│ botserver │ -│ │ -│ POST /api/db/customers │ -│ X-App-Context: cellphone-crm │ -│ │ │ -│ ▼ │ -│ Routes to: user_data WHERE app='cellphone-crm' │ -│ AND table='customers' │ -└─────────────────────────────────────────────────────────────┘ -``` - -### App Context Detection - -botui proxy determines the app from the request URL and injects the `X-App-Context` header: - -| Request From | App Context | -|--------------|-------------| -| `/apps/cellphone-crm/*` | `cellphone-crm` | -| `/apps/inventory/*` | `inventory` | -| Suite main (no app) | `default` | - -### Generated HTMX (No Special Headers Needed) - -```html - - - - -
- - -``` - -### For External API Clients - -```bash -# Must include X-App-Context header -curl -X POST https://bot.example.com/api/db/customers \ - -H "X-App-Context: cellphone-crm" \ - -H "Authorization: Bearer $TOKEN" \ - -d '{"name": "John"}' -``` - ---- - -## Table Creation - -When you describe your app, the system infers the tables needed: - -**Your description:** -> "CRM for cellphone store with customer tracking, sales, and repairs" - -**Tables created:** - -| Table | Purpose | -|-------|---------| -| `customers` | Customer records | -| `products` | Inventory items | -| `sales` | Transaction records | -| `repairs` | Service tickets | - ---- - -## Generated Schema - -### customers - -```sql -CREATE TABLE customers ( - id UUID PRIMARY KEY DEFAULT gen_random_uuid(), - name TEXT NOT NULL, - phone TEXT, - email TEXT, - address TEXT, - notes TEXT, - created_at TIMESTAMPTZ DEFAULT NOW(), - updated_at TIMESTAMPTZ DEFAULT NOW() -); - -CREATE INDEX idx_customers_name ON customers USING gin(name gin_trgm_ops); -CREATE INDEX idx_customers_phone ON customers(phone); -``` - -### products - -```sql -CREATE TABLE products ( - id UUID PRIMARY KEY DEFAULT gen_random_uuid(), - name TEXT NOT NULL, - brand TEXT, - model TEXT, - price DECIMAL(10,2), - cost DECIMAL(10,2), - stock INTEGER DEFAULT 0, - min_stock INTEGER DEFAULT 5, - category TEXT, - created_at TIMESTAMPTZ DEFAULT NOW(), - updated_at TIMESTAMPTZ DEFAULT NOW() -); - -CREATE INDEX idx_products_brand ON products(brand); -CREATE INDEX idx_products_category ON products(category); -``` - -### sales - -```sql -CREATE TABLE sales ( - id UUID PRIMARY KEY DEFAULT gen_random_uuid(), - customer_id UUID REFERENCES customers(id), - product_id UUID REFERENCES products(id), - quantity INTEGER NOT NULL DEFAULT 1, - unit_price DECIMAL(10,2), - total DECIMAL(10,2), - payment TEXT, - notes TEXT, - created_at TIMESTAMPTZ DEFAULT NOW() -); - -CREATE INDEX idx_sales_customer ON sales(customer_id); -CREATE INDEX idx_sales_date ON sales(created_at); -``` - -### repairs - -```sql -CREATE TABLE repairs ( - id UUID PRIMARY KEY DEFAULT gen_random_uuid(), - customer_id UUID REFERENCES customers(id), - device TEXT NOT NULL, - brand TEXT, - model TEXT, - problem TEXT, - diagnosis TEXT, - solution TEXT, - status TEXT DEFAULT 'received', - price DECIMAL(10,2), - received_at TIMESTAMPTZ DEFAULT NOW(), - completed_at TIMESTAMPTZ, - created_at TIMESTAMPTZ DEFAULT NOW(), - updated_at TIMESTAMPTZ DEFAULT NOW() -); - -CREATE INDEX idx_repairs_customer ON repairs(customer_id); -CREATE INDEX idx_repairs_status ON repairs(status); -``` - ---- - -## Data Types - -The system automatically selects appropriate types: - -| Field Pattern | SQL Type | Example | -|---------------|----------|---------| -| `name`, `title`, `description` | TEXT | Customer name | -| `email` | TEXT (validated) | john@example.com | -| `phone` | TEXT | +1-555-0123 | -| `price`, `cost`, `amount`, `total` | DECIMAL(10,2) | 299.99 | -| `quantity`, `stock`, `count` | INTEGER | 10 | -| `date`, `_at` suffix | TIMESTAMPTZ | 2024-01-15T10:30:00Z | -| `is_`, `has_` prefix | BOOLEAN | true | -| `id` | UUID | a1b2c3d4-... | -| `_id` suffix | UUID (FK) | References another table | - ---- - -## Relationships - -Foreign keys are created automatically when fields end with `_id`: - -``` -customers - │ - ├──< sales (customer_id → customers.id) - │ - └──< repairs (customer_id → customers.id) - -products - │ - └──< sales (product_id → products.id) -``` - ---- - -## Accessing Data - -### From Your App (HTMX) - -```html - -
- - -
- - -
- - - - - -