Release v0.13.x — Moltworld platform, dashboard widgets, genome expansion

.changelog/v0.12.x.md → .changelog/v0.12.48.md

@@ -1,4 +1,4 @@
-# Release v0.12.x - Changelog
+# Release v0.12.48 - Changelog
 
 Released: YYYY-MM-DD
 

.gitignore

@@ -39,3 +39,4 @@ Thumbs.db
 
 # Browser service node_modules (code is committed)
 browser/node_modules/
+.pm2

CLAUDE.md

@@ -15,10 +15,10 @@ npm run dev
 cd server && npm test
 cd server && npm run test:watch  # Watch mode
 
-# Production
-npm run pm2:start
-npm run pm2:stop
-npm run pm2:logs
+# Production (npm scripts or pm2 directly)
+pm2 start ecosystem.config.cjs
+pm2 stop ecosystem.config.cjs
+pm2 logs
 ```
 
 ## Architecture

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "portos-client",
-  "version": "0.12.48",
+  "version": "0.13.20",
   "private": true,
   "type": "module",
   "scripts": {

client/src/App.jsx

@@ -1,6 +1,7 @@
 import { Suspense, lazy } from 'react';
 import { Routes, Route, Navigate } from 'react-router-dom';
 import Layout from './components/Layout';
+import BrailleSpinner from './components/BrailleSpinner';
 import Dashboard from './pages/Dashboard';
 import Apps from './pages/Apps';
 import CreateApp from './pages/CreateApp';
@@ -30,7 +31,7 @@ const CyberCity = lazy(() => import('./pages/CyberCity'));
 // Loading fallback for lazy-loaded pages
 const PageLoader = () => (
   <div className="flex items-center justify-center h-64">
-    <div className="text-gray-500">Loading...</div>
+    <BrailleSpinner text="Loading" />
   </div>
 );
 

client/src/components/BrailleSpinner.jsx

@@ -0,0 +1,19 @@
+import { useState, useEffect } from 'react';
+
+const FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+const INTERVAL_MS = 80;
+
+export default function BrailleSpinner({ text, className = '' }) {
+  const [frame, setFrame] = useState(0);
+
+  useEffect(() => {
+    const id = setInterval(() => setFrame(f => (f + 1) % FRAMES.length), INTERVAL_MS);
+    return () => clearInterval(id);
+  }, []);
+
+  return (
+    <span className={`text-port-accent ${className}`}>
+      {FRAMES[frame]}{text ? ` ${text}` : ''}
+    </span>
+  );
+}

client/src/components/CosDashboardWidget.jsx

@@ -11,7 +11,8 @@ import {
   Zap,
   Bot,
   XCircle,
-  History
+  History,
+  Activity
 } from 'lucide-react';
 import * as api from '../services/api';
 
@@ -23,19 +24,23 @@ const CosDashboardWidget = memo(function CosDashboardWidget() {
   const [summary, setSummary] = useState(null);
   const [learningSummary, setLearningSummary] = useState(null);
   const [recentTasks, setRecentTasks] = useState(null);
+  const [activityCalendar, setActivityCalendar] = useState(null);
   const [loading, setLoading] = useState(true);
   const [tasksExpanded, setTasksExpanded] = useState(false);
 
   useEffect(() => {
     const loadData = async () => {
-      const [quickData, learningData, tasksData] = await Promise.all([
-        api.getCosQuickSummary().catch(() => null),
-        api.getCosLearningSummary().catch(() => null),
-        api.getCosRecentTasks(5).catch(() => null)
+      const silent = { silent: true };
+      const [quickData, learningData, tasksData, calendarData] = await Promise.all([
+        api.getCosQuickSummary(silent).catch(() => null),
+        api.getCosLearningSummary(silent).catch(() => null),
+        api.getCosRecentTasks(5, silent).catch(() => null),
+        api.getCosActivityCalendar(8, silent).catch(() => null)
       ]);
       setSummary(quickData);
       setLearningSummary(learningData);
       setRecentTasks(tasksData);
+      setActivityCalendar(calendarData);
       setLoading(false);
     };
 
@@ -184,6 +189,11 @@ const CosDashboardWidget = memo(function CosDashboardWidget() {
         </Link>
       </div>
 
+      {/* Activity Calendar - GitHub-style heatmap */}
+      {activityCalendar?.weeks?.length > 0 && activityCalendar.summary.totalTasks > 0 && (
+        <ActivityCalendar data={activityCalendar} />
+      )}
+
       {/* Recent Tasks Section */}
       {recentTasks?.tasks?.length > 0 && (
         <div className="mt-4 pt-4 border-t border-port-border">
@@ -257,4 +267,112 @@ const CosDashboardWidget = memo(function CosDashboardWidget() {
   );
 });
 
+/**
+ * ActivityCalendar - Compact GitHub-style activity heatmap
+ * Shows daily task completion as colored squares
+ */
+function ActivityCalendar({ data }) {
+  // Calculate intensity level (0-4) based on tasks completed
+  const getIntensityLevel = (tasks) => {
+    if (tasks === 0) return 0;
+    if (tasks === 1) return 1;
+    const max = data.maxTasks || 1;
+    const ratio = tasks / max;
+    if (ratio >= 0.75) return 4;
+    if (ratio >= 0.5) return 3;
+    if (ratio >= 0.25) return 2;
+    return 1;
+  };
+
+  // Get color class based on intensity and success rate
+  const getColorClass = (day) => {
+    if (day.tasks === 0 || day.isFuture) return 'bg-port-border/20';
+    const intensity = getIntensityLevel(day.tasks);
+
+    // Color based on success rate
+    if (day.successRate >= 80) {
+      const shades = ['', 'bg-emerald-900/50', 'bg-emerald-700/60', 'bg-emerald-500/70', 'bg-emerald-400'];
+      return shades[intensity];
+    } else if (day.successRate >= 50) {
+      const shades = ['', 'bg-amber-900/50', 'bg-amber-700/60', 'bg-amber-500/70', 'bg-amber-400'];
+      return shades[intensity];
+    } else {
+      const shades = ['', 'bg-red-900/50', 'bg-red-700/60', 'bg-red-500/70', 'bg-red-400'];
+      return shades[intensity];
+    }
+  };
+
+  const formatDate = (dateStr) => {
+    const date = new Date(dateStr + 'T12:00:00');
+    return date.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
+  };
+
+  return (
+    <div className="mt-4 pt-4 border-t border-port-border">
+      <div className="flex items-center justify-between mb-2">
+        <div className="flex items-center gap-2">
+          <Activity size={14} className="text-port-accent" />
+          <span className="text-sm font-medium text-gray-300">Activity</span>
+          {data.currentStreak > 0 && (
+            <span className="flex items-center gap-1 text-xs px-1.5 py-0.5 rounded bg-orange-500/20 text-orange-400">
+              <Flame size={10} />
+              {data.currentStreak}d
+            </span>
+          )}
+        </div>
+        <Link
+          to="/cos/productivity"
+          className="flex items-center gap-1 text-xs text-gray-500 hover:text-port-accent transition-colors"
+        >
+          {data.summary.activeDays} active days
+          <ChevronRight size={12} />
+        </Link>
+      </div>
+
+      {/* Calendar Grid */}
+      <div className="overflow-x-auto scrollbar-hide">
+        <div className="flex gap-0.5" style={{ minWidth: 'max-content' }}>
+          {data.weeks.map((week, weekIdx) => (
+            <div key={weekIdx} className="flex flex-col gap-0.5">
+              {week.map((day) => (
+                <div
+                  key={day.date}
+                  className={`
+                    w-[9px] h-[9px] sm:w-[10px] sm:h-[10px]
+                    rounded-sm transition-colors cursor-default
+                    ${getColorClass(day)}
+                    ${day.isToday ? 'ring-1 ring-port-accent' : ''}
+                    ${day.isFuture ? 'opacity-30' : ''}
+                  `}
+                  title={day.isFuture ? '' : `${formatDate(day.date)}: ${day.tasks} task${day.tasks !== 1 ? 's' : ''} (${day.successRate}% success)`}
+                />
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Summary Row */}
+      <div className="flex items-center justify-between mt-2 text-xs text-gray-500">
+        <span>
+          <span className="text-white font-medium">{data.summary.totalTasks}</span> tasks,{' '}
+          <span className={`font-medium ${
+            data.summary.successRate >= 80 ? 'text-port-success' :
+            data.summary.successRate >= 50 ? 'text-port-warning' : 'text-port-error'
+          }`}>{data.summary.successRate}%</span> success
+        </span>
+        {/* Mini Legend */}
+        <div className="flex items-center gap-0.5">
+          <span className="mr-1 hidden sm:inline">Less</span>
+          <div className="w-2 h-2 rounded-sm bg-port-border/20" />
+          <div className="w-2 h-2 rounded-sm bg-emerald-900/50" />
+          <div className="w-2 h-2 rounded-sm bg-emerald-500/70" />
+          <div className="w-2 h-2 rounded-sm bg-emerald-400" />
+          <span className="ml-1 hidden sm:inline">More</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export default CosDashboardWidget;

client/src/components/GoalProgressWidget.jsx

@@ -0,0 +1,156 @@
+import { useState, useEffect, memo } from 'react';
+import { Link } from 'react-router-dom';
+import {
+  Target,
+  ChevronRight,
+  TrendingUp,
+  AlertTriangle
+} from 'lucide-react';
+import * as api from '../services/api';
+
+/**
+ * GoalProgressWidget - Shows progress toward user goals on the dashboard
+ * Maps completed CoS tasks to goal categories from COS-GOALS.md
+ */
+const GoalProgressWidget = memo(function GoalProgressWidget() {
+  const [progress, setProgress] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const loadData = async () => {
+      const data = await api.getCosGoalProgressSummary({ silent: true }).catch(() => null);
+      setProgress(data);
+      setLoading(false);
+    };
+
+    loadData();
+    // Refresh every 60 seconds
+    const interval = setInterval(loadData, 60000);
+    return () => clearInterval(interval);
+  }, []);
+
+  // Don't render while loading or if no goals
+  if (loading || !progress?.goals?.length) {
+    return null;
+  }
+
+  const { goals, summary } = progress;
+
+  // Color mappings for engagement levels
+  const getColorClasses = (color, engagement) => {
+    const intensityMap = {
+      high: { emerald: 'bg-emerald-500', purple: 'bg-purple-500', blue: 'bg-blue-500', pink: 'bg-pink-500', green: 'bg-green-500', gray: 'bg-gray-500' },
+      medium: { emerald: 'bg-emerald-500/60', purple: 'bg-purple-500/60', blue: 'bg-blue-500/60', pink: 'bg-pink-500/60', green: 'bg-green-500/60', gray: 'bg-gray-500/60' },
+      low: { emerald: 'bg-emerald-500/30', purple: 'bg-purple-500/30', blue: 'bg-blue-500/30', pink: 'bg-pink-500/30', green: 'bg-green-500/30', gray: 'bg-gray-500/30' }
+    };
+    return intensityMap[engagement]?.[color] || 'bg-gray-500/30';
+  };
+
+  const getTextColorClass = (color) => {
+    const colorMap = {
+      emerald: 'text-emerald-400',
+      purple: 'text-purple-400',
+      blue: 'text-blue-400',
+      pink: 'text-pink-400',
+      green: 'text-green-400',
+      gray: 'text-gray-400'
+    };
+    return colorMap[color] || 'text-gray-400';
+  };
+
+  return (
+    <div className="bg-port-card border border-port-border rounded-xl p-4 sm:p-6">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-3">
+          <div className="text-2xl" aria-hidden="true">
+            <Target className="w-6 h-6 text-port-accent" />
+          </div>
+          <div>
+            <h3 className="text-lg font-semibold text-white">Goal Progress</h3>
+            <p className="text-sm text-gray-500">
+              {summary.totalTasks} tasks toward {summary.totalGoals} goals
+            </p>
+          </div>
+        </div>
+        <Link
+          to="/cos/tasks"
+          className="flex items-center gap-1 text-sm text-port-accent hover:text-port-accent/80 transition-colors min-h-[40px] px-2"
+        >
+          <span className="hidden sm:inline">View Tasks</span>
+          <ChevronRight size={16} />
+        </Link>
+      </div>
+
+      {/* Goal Progress Bars */}
+      <div className="space-y-3">
+        {goals.map((goal) => (
+          <div key={goal.name} className="group">
+            <div className="flex items-center justify-between mb-1">
+              <div className="flex items-center gap-2">
+                <span className="text-base" aria-hidden="true">{goal.icon}</span>
+                <span className="text-sm font-medium text-gray-300">{goal.name}</span>
+              </div>
+              <div className="flex items-center gap-2">
+                {goal.successRate !== null && (
+                  <span className={`text-xs ${goal.successRate >= 80 ? 'text-port-success' : goal.successRate >= 50 ? 'text-port-warning' : 'text-port-error'}`}>
+                    {goal.successRate}%
+                  </span>
+                )}
+                <span className="text-xs text-gray-500">
+                  {goal.tasks} task{goal.tasks !== 1 ? 's' : ''}
+                </span>
+              </div>
+            </div>
+            {/* Progress bar */}
+            <div className="h-2 bg-port-border rounded-full overflow-hidden">
+              <div
+                className={`h-full rounded-full transition-all duration-500 ${getColorClasses(goal.color, goal.engagement)}`}
+                style={{
+                  width: `${Math.min(100, Math.max(5, (goal.tasks / Math.max(...goals.map(g => g.tasks), 1)) * 100))}%`
+                }}
+              />
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Insights Row */}
+      {(summary.mostActive || summary.leastActive) && (
+        <div className="mt-4 pt-4 border-t border-port-border">
+          <div className="flex flex-wrap gap-3 text-xs">
+            {summary.mostActive && (
+              <div className="flex items-center gap-1.5 text-port-success">
+                <TrendingUp size={12} />
+                <span>Most active: {summary.mostActive}</span>
+              </div>
+            )}
+            {summary.leastActive && (
+              <div className="flex items-center gap-1.5 text-port-warning">
+                <AlertTriangle size={12} />
+                <span>Needs attention: {summary.leastActive}</span>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Overall Success Rate */}
+      {summary.overallSuccessRate !== null && (
+        <div className="mt-3 text-center">
+          <span className="text-xs text-gray-500">
+            Overall success rate:{' '}
+            <span className={`font-medium ${
+              summary.overallSuccessRate >= 80 ? 'text-port-success' :
+              summary.overallSuccessRate >= 50 ? 'text-port-warning' : 'text-port-error'
+            }`}>
+              {summary.overallSuccessRate}%
+            </span>
+          </span>
+        </div>
+      )}
+    </div>
+  );
+});
+
+export default GoalProgressWidget;