feat(desktop): add desktop mode support with Tauri integration

- Changed default feature to include 'desktop' in Cargo.toml
- Replaced --noui flag with --desktop flag in launch.json
- Added Tauri desktop mode implementation in main.rs
- Simplified command line argument handling
- Cleaned up code formatting in main.rs

The changes introduce a new mode for running the application as a desktop app using Tauri framework, while maintaining the existing server functionality. The desktop mode loads a webview window with a specific HTML interface.

.vscode/launch.json

@@ -13,7 +13,7 @@
           "kind": "bin"
         }
       },
-      "args": ["--noui"],
+      "args": ["--desktop"],
       "env": {
         "RUST_LOG": "trace,actix_web=off,aws_sigv4=off,aws_smithy_checksums=off,actix_http=off,mio=off,reqwest=off,aws_runtime=off,aws_smithy_http_client=off,rustls=off,actix_server=off,hyper_util=off,aws_smithy_runtime=off,aws_smithy_runtime_api=off,tracing=off,aws_sdk_s3=off"
       

Cargo.toml

@@ -37,7 +37,7 @@ license = "AGPL-3.0"
 repository = "https://github.com/GeneralBots/BotServer"
 
 [features]
-default = []
+default = ["desktop"]
 
 vectordb = ["qdrant-client"]
 email = ["imap"]

build.rs

@@ -0,0 +1,5 @@
+// build.rs
+fn main() {
+    // Tauri build script to generate the context required by `tauri::generate_context!()`
+    tauri_build::build()
+}

capabilities/default.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "../gen/schemas/desktop-schema.json",
+  "identifier": "default",
+  "description": "enables the default permissions",
+  "windows": [
+    "main"
+  ],
+  "permissions": [
+    "core:default"
+  ]
+}

gen/schemas/capabilities.json

@@ -0,0 +1 @@
+{"default":{"identifier":"default","description":"enables the default permissions","local":true,"windows":["main"],"permissions":["core:default"]}}

src/main.rs

@@ -71,31 +71,7 @@ async fn main() -> std::io::Result<()> {
     use botserver::config::ConfigManager;
     let args: Vec<String> = std::env::args().collect();
     let no_ui = args.contains(&"--noui".to_string());
-    if args.len() > 1 {
-        let command = &args[1];
-        match command.as_str() {
-            "install" | "remove" | "list" | "status" | "start" | "stop" | "restart" | "--help"
-            | "-h" => match package_manager::cli::run().await {
-                Ok(_) => return Ok(()),
-                Err(e) => {
-                    eprintln!("CLI error: {}", e);
-                    return Err(std::io::Error::new(
-                        std::io::ErrorKind::Other,
-                        format!("CLI command failed: {}", e),
-                    ));
-                }
-            },
-            "--noui" => {}
-            _ => {
-                eprintln!("Unknown command: {}", command);
-                eprintln!("Run 'botserver --help' for usage information");
-                return Err(std::io::Error::new(
-                    std::io::ErrorKind::InvalidInput,
-                    format!("Unknown command: {}", command),
-                ));
-            }
-        }
-    }
+    let desktop_mode = args.contains(&"--desktop".to_string());
     dotenv().ok();
     let (progress_tx, progress_rx) = tokio::sync::mpsc::unbounded_channel::<BootstrapProgress>();
     let (state_tx, state_rx) = tokio::sync::mpsc::channel::<Arc<AppState>>(1);
@@ -169,10 +145,8 @@ async fn main() -> std::io::Result<()> {
                 .send(BootstrapProgress::ConnectingDatabase)
                 .ok();
             match create_conn() {
-                Ok(pool) => {
-                    AppConfig::from_database(&pool)
-                        .unwrap_or_else(|_| AppConfig::from_env().expect("Failed to load config"))
-                }
+                Ok(pool) => AppConfig::from_database(&pool)
+                    .unwrap_or_else(|_| AppConfig::from_env().expect("Failed to load config")),
                 Err(_) => AppConfig::from_env().expect("Failed to load config from env"),
             }
         } else {
@@ -228,8 +202,8 @@ async fn main() -> std::io::Result<()> {
             ));
         }
     };
-    let cache_url = std::env::var("CACHE_URL")
-        .unwrap_or_else(|_| "redis://localhost:6379".to_string());
+    let cache_url =
+        std::env::var("CACHE_URL").unwrap_or_else(|_| "redis://localhost:6379".to_string());
     let redis_client = match redis::Client::open(cache_url.as_str()) {
         Ok(client) => Some(Arc::new(client)),
         Err(e) => {
@@ -311,6 +285,40 @@ async fn main() -> std::io::Result<()> {
             error!("Failed to start LLM servers: {}", e);
         }
     });
+    #[cfg(feature = "desktop")]
+    if desktop_mode {
+        // Tauri desktop mode
+        let tauri_app = tauri::Builder::default()
+            .setup(|app| {
+                use tauri::WebviewWindowBuilder;
+
+                match WebviewWindowBuilder::new(
+                    app,
+                    "main",
+                    tauri::WebviewUrl::App("../web/desktop/tables.html".into()),
+                )
+                .build() {
+                    Ok(_window) => Ok(()),
+                    Err(e) if e.to_string().contains("WebviewLabelAlreadyExists") => {
+                        log::warn!("Main window already exists, reusing existing window");
+                        Ok(())
+                    }
+                    Err(e) => Err(e.into())
+                }
+            })
+            .build(tauri::generate_context!())
+            .expect("error while running tauri application");
+
+        tauri_app.run(|_app_handle, event| match event {
+            tauri::RunEvent::ExitRequested { api, .. } => {
+                api.prevent_exit();
+            }
+            _ => {}
+        });
+        return Ok(());
+    }
+
+    // Normal server start continues here
     let server_result = HttpServer::new(move || {
         let cors = Cors::default()
             .allow_any_origin()

tauri.conf.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://schema.tauri.app/config/2",
+  "productName": "General Bots",
+  "version": "6.0.8",
+  "identifier": "br.com.pragmatismo",
+  "build": {
+    "frontendDist": "./web/desktop"
+  },
+  "app": {
+    "security": {
+      "csp": null
+    }
+  },
+  "bundle": {
+    "active": true,
+    "targets": "all",
+    "icon": [
+    ]
+  }
+}

web/desktop/components/Footer.html

@@ -0,0 +1,24 @@
+<template x-data="{ items: [] }">
+  <div class="todo-stats">
+    <span x-text="`${items.filter(i => !i.done).length} items left`"></span>
+    <button @click="$store.todo.clearCompleted()">
+      Clear completed
+    </button>
+  </div>
+</template>
+
+<style>
+  .todo-stats {
+    display: flex;
+    justify-content: space-between;
+    color: #666;
+    font-size: 14px;
+  }
+  
+  .todo-stats button {
+    background: none;
+    color: #666;
+    padding: 0;
+    text-decoration: underline;
+  }
+</style>

web/desktop/components/FormulaBar.html

@@ -0,0 +1,6 @@
+<template>
+  <div class="formula-bar">
+    <div class="cell-ref" id="cellRef">A1</div>
+    <input type="text" class="formula-input" id="formulaInput" placeholder="Enter value or formula (=SUM, =AVERAGE, etc.)">
+  </div>
+</template>

web/desktop/components/Header.html

@@ -0,0 +1,9 @@
+<template x-data>
+  <h3 x-text="title + ' App'"></h3>
+</template>
+
+<script>
+  export default {
+    title: 'Tables'
+  }
+</script>

web/desktop/components/Layout.html

@@ -0,0 +1,21 @@
+<template>
+  <div class="app-container">
+    <Header />
+    <Toolbar />
+    <FormulaBar />
+    <Spreadsheet />
+    <StatusBar />
+  </div>
+</template>
+
+<script>
+  import Header from './Header.html'
+  import Toolbar from './Toolbar.html'
+  import FormulaBar from './FormulaBar.html'
+  import Spreadsheet from './Spreadsheet.html'
+  import StatusBar from './StatusBar.html'
+
+  export default {
+    components: { Header, Toolbar, FormulaBar, Spreadsheet, StatusBar }
+  }
+</script>

web/desktop/components/Spreadsheet.html

@@ -0,0 +1,364 @@
+<template>
+  <div class="spreadsheet-container" id="spreadsheetContainer">
+    <table class="spreadsheet" id="spreadsheet">
+      <thead id="tableHead"></thead>
+      <tbody id="tableBody"></tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+  class TablesApp {
+    constructor() {
+      this.data = this.generateMockData(100, 26); // 100 rows, 26 columns (A-Z)
+      this.selectedCell = null;
+      this.cols = 26;
+      this.rows = 100;
+      this.visibleRows = 30;
+      this.rowOffset = 0;
+      
+      this.init();
+    }
+
+    generateMockData(rows, cols) {
+      const data = [];
+      const products = ['Laptop', 'Mouse', 'Keyboard', 'Monitor', 'Headphones', 'Webcam', 'Desk', 'Chair'];
+      const regions = ['North', 'South', 'East', 'West'];
+      
+      for (let i = 0; i < rows; i++) {
+        const row = {};
+        for (let j = 0; j < cols; j++) {
+          const col = this.getColumnName(j);
+          if (i === 0) {
+            // Header row
+            if (j === 0) row[col] = 'Product';
+            else if (j === 1) row[col] = 'Region';
+            else if (j === 2) row[col] = 'Q1';
+            else if (j === 3) row[col] = 'Q2';
+            else if (j === 4) row[col] = 'Q3';
+            else if (j === 5) row[col] = 'Q4';
+            else if (j === 6) row[col] = 'Total';
+            else row[col] = `Col ${col}`;
+          } else {
+            if (j === 0) row[col] = products[i % products.length];
+            else if (j === 1) row[col] = regions[i % regions.length];
+            else if (j >= 2 && j <= 5) row[col] = Math.floor(Math.random() * 10000) + 1000;
+            else if (j === 6) {
+              // Calculate total (this will be formatted as formula)
+              row[col] = `=C${i+1}+D${i+1}+E${i+1}+F${i+1}`;
+            }
+            else row[col] = Math.random() > 0.5 ? Math.floor(Math.random() * 1000) : '';
+          }
+        }
+        data.push(row);
+      }
+      return data;
+    }
+
+    getColumnName(index) {
+      let name = '';
+      while (index >= 0) {
+        name = String.fromCharCode(65 + (index % 26)) + name;
+        index = Math.floor(index / 26) - 1;
+      }
+      return name;
+    }
+
+    init() {
+      this.renderTable();
+      this.setupEventListeners();
+    }
+
+    renderTable() {
+      const thead = document.getElementById('tableHead');
+      const tbody = document.getElementById('tableBody');
+      
+      // Render header
+      let headerHTML = '<tr><th></th>';
+      for (let i = 0; i < this.cols; i++) {
+        headerHTML += `<th>${this.getColumnName(i)}</th>`;
+      }
+      headerHTML += '</tr>';
+      thead.innerHTML = headerHTML;
+
+      // Render visible rows
+      let bodyHTML = '';
+      const endRow = Math.min(this.rowOffset + this.visibleRows, this.rows);
+      
+      for (let i = this.rowOffset; i < endRow; i++) {
+        bodyHTML += `<tr><th>${i + 1}</th>`;
+        for (let j = 0; j < this.cols; j++) {
+          const col = this.getColumnName(j);
+          const value = this.data[i][col] || '';
+          const displayValue = this.calculateCell(value, i, j);
+          bodyHTML += `<td data-row="${i}" data-col="${j}" data-cell="${col}${i+1}">${displayValue}</td>`;
+        }
+        bodyHTML += '</tr>';
+      }
+      tbody.innerHTML = bodyHTML;
+    }
+
+    calculateCell(value, row, col) {
+      if (typeof value === 'string' && value.startsWith('=')) {
+        try {
+          const formula = value.substring(1).toUpperCase();
+          
+          // Handle SUM formula
+          if (formula.includes('SUM')) {
+            const match = formula.match(/SUM\(([A-Z]+\d+):([A-Z]+\d+)\)/);
+            if (match) {
+              const sum = this.calculateRange(match[1], match[2], 'sum');
+              return sum.toFixed(2);
+            }
+          }
+          
+          // Handle AVERAGE formula
+          if (formula.includes('AVERAGE')) {
+            const match = formula.match(/AVERAGE\(([A-Z]+\d+):([A-Z]+\d+)\)/);
+            if (match) {
+              const avg = this.calculateRange(match[1], match[2], 'avg');
+              return avg.toFixed(2);
+            }
+          }
+          
+          // Handle simple arithmetic (e.g., =C2+D2+E2+F2)
+          let expression = formula;
+          const cellRefs = expression.match(/[A-Z]+\d+/g);
+          if (cellRefs) {
+            cellRefs.forEach(ref => {
+              const val = this.getCellValue(ref);
+              expression = expression.replace(ref, val);
+            });
+            return eval(expression).toFixed(2);
+          }
+        } catch (e) {
+          return '#ERROR';
+        }
+      }
+      return value;
+    }
+
+    getCellValue(cellRef) {
+      const col = cellRef.match(/[A-Z]+/)[0];
+      const row = parseInt(cellRef.match(/\d+/)[0]) - 1;
+      const value = this.data[row][col];
+      
+      if (typeof value === 'string' && value.startsWith('=')) {
+        return this.calculateCell(value, row, this.getColIndex(col));
+      }
+      return parseFloat(value) || 0;
+    }
+
+    getColIndex(colName) {
+      let index = 0;
+      for (let i = 0; i < colName.length; i++) {
+        index = index * 26 + (colName.charCodeAt(i) - 64);
+      }
+      return index - 1;
+    }
+
+    calculateRange(start, end, operation) {
+      const startCol = start.match(/[A-Z]+/)[0];
+      const startRow = parseInt(start.match(/\d+/)[0]) - 1;
+      const endCol = end.match(/[A-Z]+/)[0];
+      const endRow = parseInt(end.match(/\d+/)[0]) - 1;
+      
+      let values = [];
+      for (let r = startRow; r <= endRow; r++) {
+        for (let c = this.getColIndex(startCol); c <= this.getColIndex(endCol); c++) {
+          const col = this.getColumnName(c);
+          const val = parseFloat(this.data[r][col]) || 0;
+          values.push(val);
+        }
+      }
+      
+      if (operation === 'sum') {
+        return values.reduce((a, b) => a + b, 0);
+      } else if (operation === 'avg') {
+        return values.reduce((a, b) => a + b, 0) / values.length;
+      }
+      return 0;
+    }
+
+    setupEventListeners() {
+      const container = document.getElementById('spreadsheetContainer');
+      const formulaInput = document.getElementById('formulaInput');
+
+      // Infinite scroll
+      container.addEventListener('scroll', () => {
+        const scrollPercentage = (container.scrollTop + container.clientHeight) / container.scrollHeight;
+        if (scrollPercentage > 0.8 && this.rowOffset + this.visibleRows < this.rows) {
+          this.rowOffset += 10;
+          this.renderTable();
+        }
+      });
+
+      // Cell selection
+      document.getElementById('tableBody').addEventListener('click', (e) => {
+        if (e.target.tagName === 'TD') {
+          this.selectCell(e.target);
+        }
+      });
+
+      // Cell editing
+      document.getElementById('tableBody').addEventListener('dblclick', (e) => {
+        if (e.target.tagName === 'TD') {
+          this.editCell(e.target);
+        }
+      });
+
+      // Formula bar
+      formulaInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter' && this.selectedCell) {
+          this.updateCellValue(formulaInput.value);
+        }
+      });
+    }
+
+    selectCell(cell) {
+      if (this.selectedCell) {
+        this.selectedCell.classList.remove('selected');
+      }
+      this.selectedCell = cell;
+      cell.classList.add('selected');
+      
+      const cellRef = cell.dataset.cell;
+      document.getElementById('cellRef').textContent = cellRef;
+      document.getElementById('selectedCell').textContent = cellRef;
+      
+      const row = parseInt(cell.dataset.row);
+      const col = this.getColumnName(parseInt(cell.dataset.col));
+      const value = this.data[row][col] || '';
+      document.getElementById('formulaInput').value = value;
+    }
+
+    editCell(cell) {
+      const row = parseInt(cell.dataset.row);
+      const col = this.getColumnName(parseInt(cell.dataset.col));
+      const value = this.data[row][col] || '';
+      
+      cell.classList.add('editing');
+      cell.innerHTML = `<input type="text" class="cell-editor" value="${value}" />`;
+      const input = cell.querySelector('.cell-editor');
+      input.focus();
+      input.select();
+      
+      input.addEventListener('blur', () => {
+        this.updateCellValue(input.value);
+      });
+      
+      input.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') {
+          this.updateCellValue(input.value);
+        }
+      });
+    }
+
+    updateCellValue(value) {
+      if (!this.selectedCell) return;
+      
+      const row = parseInt(this.selectedCell.dataset.row);
+      const col = this.getColumnName(parseInt(this.selectedCell.dataset.col));
+      
+      this.data[row][col] = value;
+      this.renderTable();
+      
+      // Reselect the cell
+      const newCell = document.querySelector(`td[data-row="${row}"][data-col="${this.selectedCell.dataset.col}"]`);
+      if (newCell) this.selectCell(newCell);
+    }
+
+    bold() {
+      if (this.selectedCell) {
+        this.selectedCell.style.fontWeight = this.selectedCell.style.fontWeight === 'bold' ? 'normal' : 'bold';
+      }
+    }
+
+    addRow() {
+      const newRow = {};
+      for (let i = 0; i < this.cols; i++) {
+        newRow[this.getColumnName(i)] = '';
+      }
+      this.data.push(newRow);
+      this.rows++;
+      this.renderTable();
+    }
+
+    addColumn() {
+      const newCol = this.getColumnName(this.cols);
+      this.data.forEach(row => row[newCol] = '');
+      this.cols++;
+      this.renderTable();
+    }
+
+    deleteRow() {
+      if (this.selectedCell && this.rows > 1) {
+        const row = parseInt(this.selectedCell.dataset.row);
+        this.data.splice(row, 1);
+        this.rows--;
+        this.renderTable();
+      }
+    }
+
+    deleteColumn() {
+      if (this.selectedCell && this.cols > 1) {
+        const col = this.getColumnName(parseInt(this.selectedCell.dataset.col));
+        this.data.forEach(row => delete row[col]);
+        this.cols--;
+        this.renderTable();
+      }
+    }
+
+    sort() {
+      if (this.selectedCell) {
+        const col = this.getColumnName(parseInt(this.selectedCell.dataset.col));
+        const header = this.data[0];
+        const dataRows = this.data.slice(1);
+        
+        dataRows.sort((a, b) => {
+          const aVal = a[col] || '';
+          const bVal = b[col] || '';
+          return aVal.toString().localeCompare(bVal.toString());
+        });
+        
+        this.data = [header, ...dataRows];
+        this.renderTable();
+      }
+    }
+
+    sum() {
+      if (this.selectedCell) {
+        const col = this.getColumnName(parseInt(this.selectedCell.dataset.col));
+        document.getElementById('formulaInput').value = `=SUM(${col}2:${col}${this.rows})`;
+      }
+    }
+
+    average() {
+      if (this.selectedCell) {
+        const col = this.getColumnName(parseInt(this.selectedCell.dataset.col));
+        document.getElementById('formulaInput').value = `=AVERAGE(${col}2:${col}${this.rows})`;
+      }
+    }
+
+    clearCell() {
+      if (this.selectedCell) {
+        this.updateCellValue('');
+      }
+    }
+
+    exportData() {
+      const csv = this.data.map(row => {
+        return Object.values(row).join(',');
+      }).join('\n');
+      
+      const blob = new Blob([csv], { type: 'text/csv' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = 'tables_export.csv';
+      a.click();
+    }
+  }
+
+  const app = new TablesApp();
+</script>

web/desktop/components/StatusBar.html

@@ -0,0 +1,10 @@
+<template>
+  <div class="status-bar">
+    <div class="stats">
+      <span>Rows: <strong id="rowCount">0</strong></span>
+      <span>Cols: <strong id="colCount">0</strong></span>
+      <span>Selected: <strong id="selectedCell">None</strong></span>
+    </div>
+    <div>Ready | Lotus 1-2-3 Mode Active ✨</div>
+  </div>
+</template>

web/desktop/components/Toolbar.html

@@ -0,0 +1,14 @@
+<template>
+  <div class="toolbar">
+    <button onclick="app.bold()">📝 Bold</button>
+    <button onclick="app.addRow()">➕ Add Row</button>
+    <button onclick="app.addColumn()">➕ Add Column</button>
+    <button onclick="app.deleteRow()">➖ Delete Row</button>
+    <button onclick="app.deleteColumn()">➖ Delete Column</button>
+    <button onclick="app.sort()">🔽 Sort A-Z</button>
+    <button onclick="app.sum()">Σ Sum</button>
+    <button onclick="app.average()">📊 Average</button>
+    <button onclick="app.clearCell()">🗑️ Clear</button>
+    <button onclick="app.exportData()">💾 Export</button>
+  </div>
+</template>

web/desktop/store.js

@@ -0,0 +1,32 @@
+document.addEventListener('alpine:init', () => {
+  Alpine.store('todo', {
+    title: 'Todo',
+    items: [],
+    nextId: 1,
+    
+    addTodo(text) {
+      if (!text.trim()) return;
+      
+      this.items.push({
+        id: this.nextId,
+        title: text.trim(),
+        done: false
+      });
+      this.nextId++;
+    },
+    
+    toggleTodo(id) {
+      this.items = this.items.map(item => 
+        item.id === id ? { ...item, done: !item.done } : item
+      );
+    },
+    
+    removeTodo(id) {
+      this.items = this.items.filter(item => item.id !== id);
+    },
+    
+    clearCompleted() {
+      this.items = this.items.filter(item => !item.done);
+    }
+  });
+});

web/desktop/tables.html

@@ -0,0 +1,589 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Tables - Excel Clone</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      background: #f0f0f0;
+      overflow: hidden;
+    }
+
+    .app-container {
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+      background: white;
+    }
+
+    .header {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: white;
+      padding: 15px 20px;
+      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    }
+
+    .header h1 {
+      font-size: 24px;
+      margin-bottom: 5px;
+    }
+
+    .header .subtitle {
+      font-size: 12px;
+      opacity: 0.9;
+    }
+
+    .toolbar {
+      display: flex;
+      gap: 10px;
+      padding: 10px;
+      background: #fafafa;
+      border-bottom: 1px solid #ddd;
+      flex-wrap: wrap;
+    }
+
+    .toolbar button {
+      padding: 8px 15px;
+      border: 1px solid #ccc;
+      background: white;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 13px;
+      transition: all 0.2s;
+    }
+
+    .toolbar button:hover {
+      background: #f0f0f0;
+      border-color: #999;
+    }
+
+    .toolbar button:active {
+      transform: scale(0.98);
+    }
+
+    .formula-bar {
+      display: flex;
+      align-items: center;
+      padding: 8px 10px;
+      background: white;
+      border-bottom: 2px solid #ddd;
+      gap: 10px;
+    }
+
+    .cell-ref {
+      font-weight: bold;
+      min-width: 60px;
+      padding: 6px 10px;
+      background: #f0f0f0;
+      border-radius: 4px;
+      font-family: monospace;
+    }
+
+    .formula-input {
+      flex: 1;
+      padding: 6px 10px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      font-family: monospace;
+      font-size: 14px;
+    }
+
+    .spreadsheet-container {
+      flex: 1;
+      overflow: auto;
+      position: relative;
+      background: #fff;
+    }
+
+    .spreadsheet {
+      display: inline-block;
+      border-collapse: collapse;
+      background: white;
+    }
+
+    .spreadsheet th,
+    .spreadsheet td {
+      border: 1px solid #d0d0d0;
+      min-width: 100px;
+      height: 25px;
+      padding: 4px 8px;
+      text-align: left;
+      position: relative;
+    }
+
+    .spreadsheet th {
+      background: #f0f0f0;
+      font-weight: 600;
+      text-align: center;
+      position: sticky;
+      z-index: 10;
+      font-size: 12px;
+    }
+
+    .spreadsheet thead th {
+      top: 0;
+    }
+
+    .spreadsheet tbody th {
+      left: 0;
+      min-width: 50px;
+      background: #f0f0f0;
+    }
+
+    .spreadsheet td {
+      cursor: cell;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .spreadsheet td.selected {
+      outline: 2px solid #667eea;
+      outline-offset: -2px;
+      background: #e8eaf6;
+    }
+
+    .spreadsheet td.editing {
+      padding: 0;
+    }
+
+    .cell-editor {
+      width: 100%;
+      height: 100%;
+      border: none;
+      padding: 4px 8px;
+      font-family: inherit;
+      font-size: inherit;
+      outline: 2px solid #667eea;
+    }
+
+    .status-bar {
+      display: flex;
+      justify-content: space-between;
+      padding: 6px 15px;
+      background: #f8f8f8;
+      border-top: 1px solid #ddd;
+      font-size: 12px;
+      color: #666;
+    }
+
+    .status-bar .stats {
+      display: flex;
+      gap: 20px;
+    }
+
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(-10px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+
+    .header {
+      animation: fadeIn 0.5s ease;
+    }
+  </style>
+</head>
+<body>
+  <div class="app-container">
+    <div class="header">
+      <h1>📊 Tables</h1>
+      <div class="subtitle">Excel Clone - Celebrating Lotus 1-2-3 Legacy 🎉</div>
+    </div>
+
+    <div class="toolbar">
+      <button onclick="app.bold()">📝 Bold</button>
+      <button onclick="app.addRow()">➕ Add Row</button>
+      <button onclick="app.addColumn()">➕ Add Column</button>
+      <button onclick="app.deleteRow()">➖ Delete Row</button>
+      <button onclick="app.deleteColumn()">➖ Delete Column</button>
+      <button onclick="app.sort()">🔽 Sort A-Z</button>
+      <button onclick="app.sum()">Σ Sum</button>
+      <button onclick="app.average()">📊 Average</button>
+      <button onclick="app.clearCell()">🗑️ Clear</button>
+      <button onclick="app.exportData()">💾 Export</button>
+    </div>
+
+    <div class="formula-bar">
+      <div class="cell-ref" id="cellRef">A1</div>
+      <input type="text" class="formula-input" id="formulaInput" placeholder="Enter value or formula (=SUM, =AVERAGE, etc.)">
+    </div>
+
+    <div class="spreadsheet-container" id="spreadsheetContainer">
+      <table class="spreadsheet" id="spreadsheet">
+        <thead id="tableHead"></thead>
+        <tbody id="tableBody"></tbody>
+      </table>
+    </div>
+
+    <div class="status-bar">
+      <div class="stats">
+        <span>Rows: <strong id="rowCount">0</strong></span>
+        <span>Cols: <strong id="colCount">0</strong></span>
+        <span>Selected: <strong id="selectedCell">None</strong></span>
+      </div>
+      <div>Ready | Lotus 1-2-3 Mode Active ✨</div>
+    </div>
+  </div>
+
+  <script>
+    class TablesApp {
+      constructor() {
+        this.data = this.generateMockData(100, 26);
+        this.selectedCell = null;
+        this.cols = 26;
+        this.rows = 100;
+        this.visibleRows = 30;
+        this.rowOffset = 0;
+        
+        this.init();
+      }
+
+      generateMockData(rows, cols) {
+        const data = [];
+        const products = ['Laptop', 'Mouse', 'Keyboard', 'Monitor', 'Headphones', 'Webcam', 'Desk', 'Chair'];
+        const regions = ['North', 'South', 'East', 'West'];
+        
+        for (let i = 0; i < rows; i++) {
+          const row = {};
+          for (let j = 0; j < cols; j++) {
+            const col = this.getColumnName(j);
+            if (i === 0) {
+              if (j === 0) row[col] = 'Product';
+              else if (j === 1) row[col] = 'Region';
+              else if (j === 2) row[col] = 'Q1';
+              else if (j === 3) row[col] = 'Q2';
+              else if (j === 4) row[col] = 'Q3';
+              else if (j === 5) row[col] = 'Q4';
+              else if (j === 6) row[col] = 'Total';
+              else row[col] = `Col ${col}`;
+            } else {
+              if (j === 0) row[col] = products[i % products.length];
+              else if (j === 1) row[col] = regions[i % regions.length];
+              else if (j >= 2 && j <= 5) row[col] = Math.floor(Math.random() * 10000) + 1000;
+              else if (j === 6) {
+                row[col] = `=C${i+1}+D${i+1}+E${i+1}+F${i+1}`;
+              }
+              else row[col] = Math.random() > 0.5 ? Math.floor(Math.random() * 1000) : '';
+            }
+          }
+          data.push(row);
+        }
+        return data;
+      }
+
+      getColumnName(index) {
+        let name = '';
+        while (index >= 0) {
+          name = String.fromCharCode(65 + (index % 26)) + name;
+          index = Math.floor(index / 26) - 1;
+        }
+        return name;
+      }
+
+      init() {
+        this.renderTable();
+        this.setupEventListeners();
+        this.updateStats();
+      }
+
+      renderTable() {
+        const thead = document.getElementById('tableHead');
+        const tbody = document.getElementById('tableBody');
+        
+        let headerHTML = '<tr><th></th>';
+        for (let i = 0; i < this.cols; i++) {
+          headerHTML += `<th>${this.getColumnName(i)}</th>`;
+        }
+        headerHTML += '</tr>';
+        thead.innerHTML = headerHTML;
+
+        let bodyHTML = '';
+        const endRow = Math.min(this.rowOffset + this.visibleRows, this.rows);
+        
+        for (let i = this.rowOffset; i < endRow; i++) {
+          bodyHTML += `<tr><th>${i + 1}</th>`;
+          for (let j = 0; j < this.cols; j++) {
+            const col = this.getColumnName(j);
+            const value = this.data[i][col] || '';
+            const displayValue = this.calculateCell(value, i, j);
+            bodyHTML += `<td data-row="${i}" data-col="${j}" data-cell="${col}${i+1}">${displayValue}</td>`;
+          }
+          bodyHTML += '</tr>';
+        }
+        tbody.innerHTML = bodyHTML;
+      }
+
+      calculateCell(value, row, col) {
+        if (typeof value === 'string' && value.startsWith('=')) {
+          try {
+            const formula = value.substring(1).toUpperCase();
+            
+            if (formula.includes('SUM')) {
+              const match = formula.match(/SUM\(([A-Z]+\d+):([A-Z]+\d+)\)/);
+              if (match) {
+                const sum = this.calculateRange(match[1], match[2], 'sum');
+                return sum.toFixed(2);
+              }
+            }
+            
+            if (formula.includes('AVERAGE')) {
+              const match = formula.match(/AVERAGE\(([A-Z]+\d+):([A-Z]+\d+)\)/);
+              if (match) {
+                const avg = this.calculateRange(match[1], match[2], 'avg');
+                return avg.toFixed(2);
+              }
+            }
+            
+            let expression = formula;
+            const cellRefs = expression.match(/[A-Z]+\d+/g);
+            if (cellRefs) {
+              cellRefs.forEach(ref => {
+                const val = this.getCellValue(ref);
+                expression = expression.replace(ref, val);
+              });
+              return eval(expression).toFixed(2);
+            }
+          } catch (e) {
+            return '#ERROR';
+          }
+        }
+        return value;
+      }
+
+      getCellValue(cellRef) {
+        const col = cellRef.match(/[A-Z]+/)[0];
+        const row = parseInt(cellRef.match(/\d+/)[0]) - 1;
+        const value = this.data[row][col];
+        
+        if (typeof value === 'string' && value.startsWith('=')) {
+          return this.calculateCell(value, row, this.getColIndex(col));
+        }
+        return parseFloat(value) || 0;
+      }
+
+      getColIndex(colName) {
+        let index = 0;
+        for (let i = 0; i < colName.length; i++) {
+          index = index * 26 + (colName.charCodeAt(i) - 64);
+        }
+        return index - 1;
+      }
+
+      calculateRange(start, end, operation) {
+        const startCol = start.match(/[A-Z]+/)[0];
+        const startRow = parseInt(start.match(/\d+/)[0]) - 1;
+        const endCol = end.match(/[A-Z]+/)[0];
+        const endRow = parseInt(end.match(/\d+/)[0]) - 1;
+        
+        let values = [];
+        for (let r = startRow; r <= endRow; r++) {
+          for (let c = this.getColIndex(startCol); c <= this.getColIndex(endCol); c++) {
+            const col = this.getColumnName(c);
+            const val = parseFloat(this.data[r][col]) || 0;
+            values.push(val);
+          }
+        }
+        
+        if (operation === 'sum') {
+          return values.reduce((a, b) => a + b, 0);
+        } else if (operation === 'avg') {
+          return values.reduce((a, b) => a + b, 0) / values.length;
+        }
+        return 0;
+      }
+
+      setupEventListeners() {
+        const container = document.getElementById('spreadsheetContainer');
+        const formulaInput = document.getElementById('formulaInput');
+
+        container.addEventListener('scroll', () => {
+          const scrollPercentage = (container.scrollTop + container.clientHeight) / container.scrollHeight;
+          if (scrollPercentage > 0.8 && this.rowOffset + this.visibleRows < this.rows) {
+            this.rowOffset += 10;
+            this.renderTable();
+          }
+        });
+
+        document.getElementById('tableBody').addEventListener('click', (e) => {
+          if (e.target.tagName === 'TD') {
+            this.selectCell(e.target);
+          }
+        });
+
+        document.getElementById('tableBody').addEventListener('dblclick', (e) => {
+          if (e.target.tagName === 'TD') {
+            this.editCell(e.target);
+          }
+        });
+
+        formulaInput.addEventListener('keypress', (e) => {
+          if (e.key === 'Enter' && this.selectedCell) {
+            this.updateCellValue(formulaInput.value);
+          }
+        });
+      }
+
+      selectCell(cell) {
+        if (this.selectedCell) {
+          this.selectedCell.classList.remove('selected');
+        }
+        this.selectedCell = cell;
+        cell.classList.add('selected');
+        
+        const cellRef = cell.dataset.cell;
+        document.getElementById('cellRef').textContent = cellRef;
+        document.getElementById('selectedCell').textContent = cellRef;
+        
+        const row = parseInt(cell.dataset.row);
+        const col = this.getColumnName(parseInt(cell.dataset.col));
+        const value = this.data[row][col] || '';
+        document.getElementById('formulaInput').value = value;
+      }
+
+      editCell(cell) {
+        const row = parseInt(cell.dataset.row);
+        const col = this.getColumnName(parseInt(cell.dataset.col));
+        const value = this.data[row][col] || '';
+        
+        cell.classList.add('editing');
+        cell.innerHTML = `<input type="text" class="cell-editor" value="${value}" />`;
+        const input = cell.querySelector('.cell-editor');
+        input.focus();
+        input.select();
+        
+        input.addEventListener('blur', () => {
+          this.updateCellValue(input.value);
+        });
+        
+        input.addEventListener('keypress', (e) => {
+          if (e.key === 'Enter') {
+            this.updateCellValue(input.value);
+          }
+        });
+      }
+
+      updateCellValue(value) {
+        if (!this.selectedCell) return;
+        
+        const row = parseInt(this.selectedCell.dataset.row);
+        const col = this.getColumnName(parseInt(this.selectedCell.dataset.col));
+        
+        this.data[row][col] = value;
+        this.renderTable();
+        
+        const newCell = document.querySelector(`td[data-row="${row}"][data-col="${this.selectedCell.dataset.col}"]`);
+        if (newCell) this.selectCell(newCell);
+      }
+
+      bold() {
+        if (this.selectedCell) {
+          this.selectedCell.style.fontWeight = this.selectedCell.style.fontWeight === 'bold' ? 'normal' : 'bold';
+        }
+      }
+
+      addRow() {
+        const newRow = {};
+        for (let i = 0; i < this.cols; i++) {
+          newRow[this.getColumnName(i)] = '';
+        }
+        this.data.push(newRow);
+        this.rows++;
+        this.renderTable();
+        this.updateStats();
+      }
+
+      addColumn() {
+        const newCol = this.getColumnName(this.cols);
+        this.data.forEach(row => row[newCol] = '');
+        this.cols++;
+        this.renderTable();
+        this.updateStats();
+      }
+
+      deleteRow() {
+        if (this.selectedCell && this.rows > 1) {
+          const row = parseInt(this.selectedCell.dataset.row);
+          this.data.splice(row, 1);
+          this.rows--;
+          this.renderTable();
+          this.updateStats();
+        }
+      }
+
+      deleteColumn() {
+        if (this.selectedCell && this.cols > 1) {
+          const col = this.getColumnName(parseInt(this.selectedCell.dataset.col));
+          this.data.forEach(row => delete row[col]);
+          this.cols--;
+          this.renderTable();
+          this.updateStats();
+        }
+      }
+
+      sort() {
+        if (this.selectedCell) {
+          const col = this.getColumnName(parseInt(this.selectedCell.dataset.col));
+          const header = this.data[0];
+          const dataRows = this.data.slice(1);
+          
+          dataRows.sort((a, b) => {
+            const aVal = a[col] || '';
+            const bVal = b[col] || '';
+            return aVal.toString().localeCompare(bVal.toString());
+          });
+          
+          this.data = [header, ...dataRows];
+          this.renderTable();
+        }
+      }
+
+      sum() {
+        if (this.selectedCell) {
+          const col = this.getColumnName(parseInt(this.selectedCell.dataset.col));
+          document.getElementById('formulaInput').value = `=SUM(${col}2:${col}${this.rows})`;
+        }
+      }
+
+      average() {
+        if (this.selectedCell) {
+          const col = this.getColumnName(parseInt(this.selectedCell.dataset.col));
+          document.getElementById('formulaInput').value = `=AVERAGE(${col}2:${col}${this.rows})`;
+        }
+      }
+
+      clearCell() {
+        if (this.selectedCell) {
+          this.updateCellValue('');
+        }
+      }
+
+      exportData() {
+        const csv = this.data.map(row => {
+          return Object.values(row).join(',');
+        }).join('\n');
+        
+        const blob = new Blob([csv], { type: 'text/csv' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'tables_export.csv';
+        a.click();
+      }
+
+      updateStats() {
+        document.getElementById('rowCount').textContent = this.rows;
+        document.getElementById('colCount').textContent = this.cols;
+      }
+    }
+
+    const app = new TablesApp();
+  </script>
+</body>
+</html>

web/desktop/todo.html

@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Todo App</title>
+  <script src="./store.js"></script>
+  <script defer src="js/cdn.min.js"></script>
+  <style>
+    .todo-container {
+      max-width: 500px;
+      margin: 0 auto;
+      padding: 20px;
+      background: #fff;
+      border-radius: 8px;
+      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    }
+    .todo-controls {
+      display: flex;
+      margin-bottom: 20px;
+    }
+    input[type="text"] {
+      flex: 1;
+      padding: 10px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      font-size: 16px;
+    }
+    button {
+      padding: 10px 15px;
+      margin-left: 10px;
+      background: #4CAF50;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+    .todo-item {
+      display: flex;
+      align-items: center;
+      padding: 10px 0;
+      border-bottom: 1px solid #eee;
+    }
+    .todo-list {
+      list-style: none;
+      padding: 0;
+      margin: 0 0 20px;
+    }
+    .completed span {
+      text-decoration: line-through;
+      opacity: 0.6;
+    }
+    .delete-btn {
+      background: #f44336;
+      padding: 2px 6px;
+      border-radius: 50%;
+      font-size: 14px;
+      line-height: 1;
+    }
+  </style>
+</head>
+<body>
+  <div x-data class="todo-container">
+    <h3 x-text="$store.todo.title + ' App'"></h3>
+    
+    <div class="todo-controls" x-data="{ text: '' }">
+      <input 
+        type="text" 
+        x-model="text" 
+        @keyup.enter="$store.todo.addTodo(text); text = ''"
+        placeholder="Add new todo..."
+      />
+      <button 
+        @click="$store.todo.addTodo(text); text = ''" 
+        :disabled="!text.trim()"
+      >
+        Add
+      </button>
+    </div>
+
+    <ul class="todo-list">
+      <template x-for="item in $store.todo.items" :key="item.id">
+        <li :class="{ 'completed': item.done }">
+          <div class="todo-item">
+            <input
+              type="checkbox"
+              :checked="item.done"
+              @click="$store.todo.toggleTodo(item.id)"
+            />
+            <span x-text="item.title"></span>
+            <button 
+              class="delete-btn" 
+              @click="$store.todo.removeTodo(item.id)"
+            >
+              ×
+            </button>
+          </div>
+        </li>
+      </template>
+    </ul>
+  </div>
+</body>
+</html>