Feat: Examplse tab for user guide & delete trees (#73)

Author: g3Bg2

docs/ARCHITECTURE.md

@@ -52,6 +52,11 @@ The main process runs Node.js and manages the application lifecycle. It's organi
   - `browser:runStep`, `browser:runConditional` → AutomationExecutor
   - `pick-selector` → SelectorPicker
   - `browser:closed` event → Main window notification
+  - `loopi:listTrees` → TreeStore: List all saved automations
+  - `loopi:loadTrees` → TreeStore: Load specific automation
+  - `loopi:saveTree` → TreeStore: Save/update automation
+  - `loopi:loadExample` → TreeStore: Load example from `docs/examples/`
+  - `loopi:deleteTree` → TreeStore: Delete automation file from disk
 
 ### Renderer Process (`src/`)
 
@@ -61,9 +66,14 @@ React-based UI running in Chromium with restricted privileges.
 
 ```
 App (root)
-├── Dashboard
-│   └── Automation list & management
-└── AutomationBuilder
+├── Dashboard (src/components/Dashboard.tsx)
+│   ├── Tabs: "Your Automations" | "Examples"
+│   ├── YourAutomations (src/components/dashboard/YourAutomations.tsx)
+│   │   └── Edit/Delete/Export actions
+│   └── Examples (src/components/dashboard/Examples.tsx)
+│       └── Load example automations
+│
+└── AutomationBuilder (src/components/AutomationBuilder.tsx)
     ├── BuilderHeader
     │   ├── Settings dialog (name, description, schedule)
     │   └── Execution controls (run, pause, stop)
@@ -168,6 +178,55 @@ ReactFlow re-renders updated node
 6. Complete: reset state, show success message
 ```
 
+### Delete Automation Flow
+
+```
+1. User clicks Delete button in YourAutomations
+   ↓
+2. Confirmation dialog: "Are you sure?"
+   ↓
+3. If confirmed:
+   window.electronAPI.tree.delete(automationId)  [IPC invoke]
+   ↓
+4. Main: ipcHandlers.handle("loopi:deleteTree")
+   ↓
+5. TreeStore.deleteAutomation(id, folder)
+   - Build file path: ~/.config/[AppName]/.trees/tree_[id].json
+   - fs.unlinkSync(filePath)  // Permanent deletion
+   - Return true/false
+   ↓
+6. If success:
+   - Renderer updates local state
+   - Remove automation from automations array
+   - UI re-renders without deleted item
+   ↓
+7. If error:
+   - User sees alert: "Failed to delete automation"
+   - Automation remains in list (no data loss)
+```
+
+### Load Example Flow
+
+```
+1. User clicks "Load Example" button on example card
+   ↓
+2. handleLoadExample(example)
+   ↓
+3. window.electronAPI.tree.loadExample(fileName)  [IPC invoke]
+   ↓
+4. Main: ipcHandlers.handle("loopi:loadExample")
+   ↓
+5. Read file: docs/examples/[fileName].json
+   ↓
+6. Return parsed automation JSON
+   ↓
+7. Renderer:
+   - Generate new ID: Date.now().toString()
+   - window.electronAPI.tree.save(automation)  [IPC invoke]
+   - Add to automations array
+   - Switch to "Your Automations" tab
+```
+
 ## Type System Design
 
 ### Variables System

docs/COMPONENT_GUIDE.md

@@ -9,8 +9,15 @@ App (src/app.tsx)
 ├── Router → Dashboard | AutomationBuilder | Credentials
 │
 ├── Dashboard (src/components/Dashboard.tsx)
-│   └── Lists all automations
-│   └── Edit/Delete/Export actions
+│   ├── Tabs: "Your Automations" | "Examples"
+│   │
+│   ├── YourAutomations (src/components/dashboard/YourAutomations.tsx)
+│   │   └── Lists user's automations
+│   │   └── Edit/Delete/Export actions
+│   │
+│   └── Examples (src/components/dashboard/Examples.tsx)
+│       └── Lists 7 example automations
+│       └── "Load Example" button for each
 │
 └── AutomationBuilder (src/components/AutomationBuilder.tsx)
     ├── BuilderHeader
@@ -63,23 +70,76 @@ const [currentAutomation, setCurrentAutomation] = useState<Automation>();
 
 #### Dashboard.tsx (src/components/Dashboard.tsx)
 
-List and manage automations.
+Container component managing automation list and examples with tab navigation.
 
 **Props:**
 ```typescript
 interface DashboardProps {
-  automations: Automation[];
-  onEdit: (automation: Automation) => void;
-  onDelete: (id: string) => void;
-  onNew: () => void;
+  automations: StoredAutomation[];
+  onCreateAutomation: () => void;
+  onEditAutomation: (automation: StoredAutomation) => void;
+  onUpdateAutomations: (automations: StoredAutomation[]) => void;
 }
 ```
 
 **Features:**
-- List all automations
+- Two-tab interface: "Your Automations" and "Examples"
+- Import automation from JSON file
+- Load example automations from `docs/examples/` folder (via IPC)
+- Delete automation with file system cleanup (via IPC)
+- Switches to "Your Automations" tab after import/load
+
+**Key Methods:**
+- `handleImportAutomation()` - Import automation JSON file
+- `handleLoadExample(example)` - Load example via `tree.loadExample()` IPC
+- `handleDeleteAutomation(automationId)` - Delete via `tree.delete()` IPC, removes file from disk
+
+#### YourAutomations.tsx (src/components/dashboard/YourAutomations.tsx)
+
+Tab component displaying user's saved automations.
+
+**Props:**
+```typescript
+interface YourAutomationsProps {
+  automations: StoredAutomation[];
+  totalAutomations: number;
+  onEditAutomation: (automation: StoredAutomation) => void;
+  onDeleteAutomation: (automationId: string) => Promise<void>;
+}
+```
+
+**Features:**
+- Card-based grid layout
+- Shows automation name, description, last update time
 - Edit button → open in builder
-- Delete button → confirm and remove
-- New Automation button → create new
+- Delete button (Trash2 icon) → confirmation dialog → IPC delete
+- Empty state when no automations exist
+
+**Key Methods:**
+- `handleDelete(automationId)` - Shows confirmation dialog, calls async delete callback
+
+#### Examples.tsx (src/components/dashboard/Examples.tsx)
+
+Tab component displaying example automations for user learning.
+
+**Props:**
+```typescript
+interface ExamplesProps {
+  automations: StoredAutomation[];
+  onLoadExample: (example) => Promise<void>;
+}
+```
+
+**Features:**
+- Grid layout with 7 curated example automations
+- Examples: Google Search, Contact Form, E-commerce Price Monitor, GitHub API, Hacker News, Multi-Page Scraper, Pagination Loop
+- "Load Example" button for each example
+- Creates new automation from example data
+- Hover shadow effect for interactivity
+
+**Example Data Source:**
+- Loaded from `docs/examples/*.json` via IPC handler `loopi:loadExample`
+- Files read by main process for security (no direct renderer file access)
 
 #### AutomationBuilder.tsx (src/components/AutomationBuilder.tsx)
 
@@ -289,6 +349,98 @@ const executeGraph = async (nodeId) => {
 };
 ```
 
+## Storage & Backend
+
+### TreeStore (src/main/treeStore.ts)
+
+File system layer for automation persistence.
+
+**Key Functions:**
+```typescript
+// List all saved automations
+listAutomations(folder: string): StoredAutomation[]
+
+// Load specific automation by ID
+loadAutomation(id: string, folder: string): StoredAutomation | null
+
+// Save/update automation to disk
+saveAutomation(automation: StoredAutomation, folder: string): string
+
+// Delete automation file permanently
+deleteAutomation(id: string, folder: string): boolean
+
+// Load example from docs/examples folder
+loadExample(fileName: string): StoredAutomation
+```
+
+**Storage Location:**
+- User automations: `~/.config/[AppName]/.trees/tree_[automationId].json`
+- Examples (read-only): `docs/examples/*.json`
+- File format: JSON with StoredAutomation schema
+
+**Example:**
+```typescript
+{
+  "id": "1734000000000",
+  "name": "Google Search Automation",
+  "description": "Search Google and take screenshot",
+  "createdAt": "2024-12-12 10:00:00",
+  "updatedAt": "2024-12-12 10:30:00",
+  "flow": { nodes: [...], edges: [...] }
+}
+```
+
+### IPC Bridge (src/preload.ts)
+
+Exposes secure API to renderer process.
+
+**Available Methods:**
+```typescript
+window.electronAPI.tree = {
+  list(): Promise<StoredAutomation[]>
+  load(): Promise<StoredAutomation | null>
+  save(automation: StoredAutomation): Promise<string>
+  loadExample(fileName: string): Promise<StoredAutomation>
+  delete(automationId: string): Promise<boolean>
+}
+```
+
+**Security Model:**
+- Renderer cannot access filesystem directly
+- All file I/O routed through main process
+- Context isolation prevents direct Node.js access
+- Preload script acts as secure gateway
+
+### IPC Handlers (src/main/ipcHandlers.ts)
+
+Routes IPC messages to appropriate services.
+
+**Automation Handlers:**
+- `loopi:listTrees` → TreeStore.listAutomations()
+- `loopi:loadTrees` → TreeStore.loadAutomation()
+- `loopi:saveTree` → TreeStore.saveAutomation()
+- `loopi:loadExample` → TreeStore.loadExample()
+- `loopi:deleteTree` → TreeStore.deleteAutomation()
+
+**Type Definitions (src/types/globals.d.ts):**
+```typescript
+interface ElectronAPI {
+  tree: {
+    list: () => Promise<StoredAutomation[]>;
+    load: () => Promise<StoredAutomation | null>;
+    save: (automation: StoredAutomation) => Promise<string>;
+    loadExample: (fileName: string) => Promise<StoredAutomation>;
+    delete: (automationId: string) => Promise<boolean>;
+  };
+}
+
+declare global {
+  interface Window {
+    electronAPI: ElectronAPI;
+  }
+}
+```
+
 ### UI Component Patterns
 
 #### Form Fields

package.json

@@ -1,7 +1,7 @@
 {
   "name": "loopi",
-  "version": "1.0.0",
-  "description": "A visual automation builder that lets you create, schedule, and run automations with secure credential management",
+  "version": "1.2.2",
+  "description": "Loopi — Visual Browser Automation for humans and teams",
   "author": "Dyan-Dev",
   "main": ".webpack/main",
   "scripts": {