cashclaw 1.0.0

package/src/dashboard/public/style.css

@@ -0,0 +1,464 @@
+/* ────────────────────────────────────────────────────────────────
+   CashClaw Dashboard - Dark Theme
+   Colors: #1A1A2E bg, #FF6B35 orange, #16C784 green
+   ──────────────────────────────────────────────────────────────── */
+
+:root {
+  --bg-primary: #1A1A2E;
+  --bg-secondary: #16213E;
+  --bg-card: #1E2A45;
+  --bg-hover: #253555;
+  --orange: #FF6B35;
+  --green: #16C784;
+  --red: #E74C3C;
+  --yellow: #F39C12;
+  --blue: #3498DB;
+  --text-primary: #E8E8E8;
+  --text-secondary: #8892A4;
+  --text-muted: #5A6678;
+  --border: #2A3A5C;
+  --shadow: rgba(0, 0, 0, 0.3);
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  min-height: 100vh;
+  line-height: 1.5;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+/* ─── Header ─────────────────────────────────────────────────────── */
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 0;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 24px;
+}
+
+.header-left {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+}
+
+.logo {
+  font-size: 24px;
+  font-weight: 800;
+  color: var(--orange);
+  letter-spacing: -0.5px;
+}
+
+.version {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.agent-name {
+  font-size: 14px;
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: var(--green);
+  display: inline-block;
+}
+
+.status-dot.offline {
+  background-color: var(--red);
+}
+
+/* ─── Cards ──────────────────────────────────────────────────────── */
+
+.cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.card {
+  background: var(--bg-card);
+  border-radius: 12px;
+  padding: 20px 24px;
+  border: 1px solid var(--border);
+  transition: border-color 0.2s;
+}
+
+.card:hover {
+  border-color: var(--orange);
+}
+
+.card-label {
+  font-size: 12px;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 6px;
+}
+
+.card-value {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.card-total .card-value {
+  color: var(--green);
+}
+
+.card-sub {
+  font-size: 12px;
+  color: var(--text-secondary);
+  margin-top: 4px;
+}
+
+/* ─── Main Grid ──────────────────────────────────────────────────── */
+
+.main-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  margin-bottom: 24px;
+}
+
+.chart-panel {
+  grid-column: 1 / -1;
+}
+
+/* ─── Panels ─────────────────────────────────────────────────────── */
+
+.panel {
+  background: var(--bg-card);
+  border-radius: 12px;
+  padding: 20px 24px;
+  border: 1px solid var(--border);
+}
+
+.panel-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.badge {
+  background: var(--orange);
+  color: white;
+  font-size: 11px;
+  font-weight: 700;
+  padding: 2px 8px;
+  border-radius: 10px;
+}
+
+/* ─── Chart ──────────────────────────────────────────────────────── */
+
+.chart-container {
+  width: 100%;
+  height: 200px;
+  position: relative;
+}
+
+.chart-container canvas {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+/* ─── Missions List ──────────────────────────────────────────────── */
+
+.missions-list {
+  max-height: 320px;
+  overflow-y: auto;
+}
+
+.mission-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.mission-item:last-child {
+  border-bottom: none;
+}
+
+.mission-info {
+  flex: 1;
+}
+
+.mission-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.mission-meta {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-top: 2px;
+}
+
+.mission-price {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--green);
+  margin-left: 16px;
+}
+
+.mission-status {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 3px 10px;
+  border-radius: 12px;
+  margin-left: 12px;
+  text-transform: uppercase;
+}
+
+.status-created { background: var(--blue); color: white; }
+.status-in_progress { background: var(--yellow); color: #1a1a2e; }
+.status-completed { background: var(--green); color: #1a1a2e; }
+.status-cancelled { background: var(--red); color: white; }
+.status-paid { background: var(--green); color: #1a1a2e; }
+
+/* ─── Services List ──────────────────────────────────────────────── */
+
+.service-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.service-item:last-child {
+  border-bottom: none;
+}
+
+.service-name {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.service-prices {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+/* ─── Skills List ────────────────────────────────────────────────── */
+
+.skill-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.skill-item:last-child {
+  border-bottom: none;
+}
+
+.skill-name {
+  font-size: 13px;
+  font-weight: 500;
+  font-family: monospace;
+}
+
+.skill-badge {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-weight: 600;
+}
+
+.skill-installed {
+  background: var(--green);
+  color: #1a1a2e;
+}
+
+.skill-available {
+  background: var(--border);
+  color: var(--text-secondary);
+}
+
+/* ─── Recent Earnings ────────────────────────────────────────────── */
+
+.recent-list {
+  max-height: 320px;
+  overflow-y: auto;
+}
+
+.recent-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.recent-item:last-child {
+  border-bottom: none;
+}
+
+.recent-info {
+  flex: 1;
+}
+
+.recent-service {
+  font-size: 13px;
+  color: var(--text-primary);
+}
+
+.recent-date {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.recent-amount {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--green);
+}
+
+/* ─── Agent Info ─────────────────────────────────────────────────── */
+
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.info-row:last-child {
+  border-bottom: none;
+}
+
+.info-label {
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+.info-value {
+  font-size: 13px;
+  color: var(--text-primary);
+  font-weight: 500;
+}
+
+.info-value.connected {
+  color: var(--green);
+}
+
+.info-value.disconnected {
+  color: var(--yellow);
+}
+
+/* ─── Empty State ────────────────────────────────────────────────── */
+
+.empty-state {
+  text-align: center;
+  padding: 24px;
+  color: var(--text-muted);
+  font-size: 13px;
+}
+
+/* ─── Footer ─────────────────────────────────────────────────────── */
+
+.footer {
+  text-align: center;
+  padding: 20px 0;
+  border-top: 1px solid var(--border);
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.footer a {
+  color: var(--orange);
+  text-decoration: none;
+}
+
+.footer a:hover {
+  text-decoration: underline;
+}
+
+.footer-sep {
+  margin: 0 8px;
+  opacity: 0.4;
+}
+
+/* ─── Scrollbar ──────────────────────────────────────────────────── */
+
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bg-secondary);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--text-muted);
+}
+
+/* ─── Responsive ─────────────────────────────────────────────────── */
+
+@media (max-width: 768px) {
+  .main-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .cards {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .card-value {
+    font-size: 22px;
+  }
+}
+
+@media (max-width: 480px) {
+  .cards {
+    grid-template-columns: 1fr;
+  }
+
+  .header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+}

package/src/dashboard/server.js

@@ -0,0 +1,224 @@
+import express from 'express';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { loadConfig, saveConfig } from '../cli/utils/config.js';
+import { listMissions, getMissionStats } from '../engine/mission-runner.js';
+import { getTotal, getMonthly, getWeekly, getToday, getHistory, getByService, getDailyTotals } from '../engine/earnings-tracker.js';
+import { listInstalledSkills, listAvailableSkills } from '../integrations/openclaw-bridge.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+/**
+ * Create and configure the Express dashboard server.
+ * @returns {express.Application}
+ */
+export function createDashboardServer() {
+  const app = express();
+
+  // Middleware
+  app.use(express.json());
+  app.use(express.urlencoded({ extended: false }));
+
+  // CORS for local development
+  app.use((req, res, next) => {
+    res.header('Access-Control-Allow-Origin', '*');
+    res.header('Access-Control-Allow-Headers', 'Content-Type');
+    res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
+    if (req.method === 'OPTIONS') {
+      return res.sendStatus(200);
+    }
+    next();
+  });
+
+  // Serve static files from public/
+  const publicDir = path.join(__dirname, 'public');
+  app.use(express.static(publicDir));
+
+  // ─── API Routes ────────────────────────────────────────────────────
+
+  /**
+   * GET /api/status
+   * Returns agent status, config summary, and overall stats.
+   */
+  app.get('/api/status', async (req, res) => {
+    try {
+      const config = await loadConfig();
+      const missionStats = await getMissionStats();
+      const total = await getTotal();
+      const monthly = await getMonthly();
+      const today = await getToday();
+
+      const enabledServices = Object.entries(config.services || {})
+        .filter(([_, svc]) => svc.enabled)
+        .map(([key, svc]) => ({
+          type: key,
+          pricing: svc.pricing,
+          description: svc.description,
+        }));
+
+      res.json({
+        agent: config.agent,
+        stripe: {
+          connected: config.stripe?.connected || false,
+          mode: config.stripe?.mode || 'test',
+        },
+        services: enabledServices,
+        services_count: enabledServices.length,
+        missions: missionStats,
+        earnings: {
+          total,
+          monthly: monthly.total,
+          monthly_count: monthly.count,
+          today: today.total,
+          today_count: today.count,
+        },
+        server: config.server,
+        hyrve: {
+          registered: config.hyrve?.registered || false,
+          agent_id: config.hyrve?.agent_id || null,
+        },
+        openclaw: {
+          workspace: config.openclaw?.workspace || null,
+          auto_detected: config.openclaw?.auto_detected || false,
+        },
+      });
+    } catch (err) {
+      res.status(500).json({ error: { code: 'INTERNAL_ERROR', message: err.message } });
+    }
+  });
+
+  /**
+   * GET /api/missions
+   * Returns list of all missions with optional status filter.
+   */
+  app.get('/api/missions', async (req, res) => {
+    try {
+      const statusFilter = req.query.status || null;
+      const missions = await listMissions(statusFilter);
+      const stats = await getMissionStats();
+
+      res.json({
+        missions,
+        stats,
+        total: missions.length,
+      });
+    } catch (err) {
+      res.status(500).json({ error: { code: 'INTERNAL_ERROR', message: err.message } });
+    }
+  });
+
+  /**
+   * GET /api/earnings
+   * Returns earnings summary, history, breakdown by service, and daily totals.
+   */
+  app.get('/api/earnings', async (req, res) => {
+    try {
+      const limit = parseInt(req.query.limit) || 50;
+      const days = parseInt(req.query.days) || 30;
+
+      const [total, monthly, weekly, today, history, byService, dailyTotals] = await Promise.all([
+        getTotal(),
+        getMonthly(),
+        getWeekly(),
+        getToday(),
+        getHistory(limit),
+        getByService(),
+        getDailyTotals(days),
+      ]);
+
+      res.json({
+        summary: {
+          total,
+          monthly: monthly.total,
+          monthly_count: monthly.count,
+          weekly: weekly.total,
+          weekly_count: weekly.count,
+          today: today.total,
+          today_count: today.count,
+        },
+        by_service: byService,
+        daily_totals: dailyTotals,
+        history,
+      });
+    } catch (err) {
+      res.status(500).json({ error: { code: 'INTERNAL_ERROR', message: err.message } });
+    }
+  });
+
+  /**
+   * GET /api/skills
+   * Returns available and installed CashClaw skills.
+   */
+  app.get('/api/skills', async (req, res) => {
+    try {
+      const config = await loadConfig();
+      const available = await listAvailableSkills();
+      const installed = await listInstalledSkills(config.openclaw?.skills_dir);
+
+      const skills = available.map((s) => ({
+        name: s.name,
+        installed: installed.includes(s.name),
+        has_skill_md: s.has_skill_md,
+      }));
+
+      res.json({
+        skills,
+        total_available: available.length,
+        total_installed: installed.length,
+        openclaw_detected: !!config.openclaw?.workspace,
+      });
+    } catch (err) {
+      res.status(500).json({ error: { code: 'INTERNAL_ERROR', message: err.message } });
+    }
+  });
+
+  /**
+   * POST /api/config
+   * Update configuration values.
+   * Body: { key: "dot.notation.key", value: "new value" }
+   */
+  app.post('/api/config', async (req, res) => {
+    try {
+      const { key, value } = req.body;
+
+      if (!key) {
+        return res.status(400).json({
+          error: { code: 'VALIDATION_ERROR', message: 'Key is required' },
+        });
+      }
+
+      const config = await loadConfig();
+      const keys = key.split('.');
+      let obj = config;
+      for (let i = 0; i < keys.length - 1; i++) {
+        if (!obj[keys[i]] || typeof obj[keys[i]] !== 'object') {
+          obj[keys[i]] = {};
+        }
+        obj = obj[keys[i]];
+      }
+      obj[keys[keys.length - 1]] = value;
+
+      await saveConfig(config);
+
+      res.json({ success: true, key, value });
+    } catch (err) {
+      res.status(500).json({ error: { code: 'INTERNAL_ERROR', message: err.message } });
+    }
+  });
+
+  /**
+   * GET /api/health
+   * Simple health check endpoint.
+   */
+  app.get('/api/health', (req, res) => {
+    res.json({ status: 'ok', version: '1.0.0', timestamp: new Date().toISOString() });
+  });
+
+  // Fallback: serve index.html for SPA routing
+  app.get('*', (req, res) => {
+    res.sendFile(path.join(publicDir, 'index.html'));
+  });
+
+  return app;
+}