nothumanallowed 3.4.0 → 3.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nothumanallowed",
-  "version": "3.4.0",
+  "version": "3.6.0",
   "description": "NotHumanAllowed — 38 AI agents for security, code, DevOps, data & daily ops. Ask agents directly, plan your day with 5 specialist agents, manage tasks, connect Gmail + Calendar.",
   "type": "module",
   "bin": {

package/src/services/web-ui.mjs

@@ -132,7 +132,7 @@ input:focus,textarea:focus{border-color:var(--green3)}
 /* ---- MODAL ---- */
 .modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:300;align-items:center;justify-content:center}
 .modal-overlay--open{display:flex}
-.modal{background:var(--bg2);border:1px solid var(--border2);border-radius:8px;width:90%;max-width:500px;max-height:80vh;display:flex;flex-direction:column}
+.modal{background:var(--bg2);border:1px solid var(--border2);border-radius:8px;width:92%;max-width:540px;max-height:90vh;display:flex;flex-direction:column}
 .modal__header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border)}
 .modal__header h2{font-size:16px;color:var(--green)}
 .modal__close{background:none;color:var(--dim);font-size:24px;padding:0 4px}
@@ -342,30 +342,134 @@ function renderEmails(el){
   el.innerHTML=h;
 }
 
-// ---- CALENDAR ----
-var calDate = new Date().toISOString().split('T')[0];
+// ---- CALENDAR (monthly grid + day detail modal) ----
+var calYear, calMonth;
+var calEventsCache = {};
+(function(){var d=new Date();calYear=d.getFullYear();calMonth=d.getMonth()})();
+
+function calKey(y,m,d){return y+'-'+String(m+1).padStart(2,'0')+'-'+String(d).padStart(2,'0')}
+function isToday(y,m,d){var t=new Date();return t.getFullYear()===y&&t.getMonth()===m&&t.getDate()===d}
+
 function renderCalendar(el){
-  var h='<div style="display:flex;gap:8px;align-items:center;margin-bottom:12px">'+
-    '<button class="btn btn--secondary" onclick="calNav(-1)">&lt;</button>'+
-    '<span style="flex:1;text-align:center;font-weight:700;color:var(--bright)">'+calDate+(calDate===new Date().toISOString().split('T')[0]?' (today)':'')+'</span>'+
-    '<button class="btn btn--secondary" onclick="calNav(1)">&gt;</button>'+
-    '<button class="btn btn--secondary" onclick="calDate=new Date().toISOString().split(\\x27T\\x27)[0];renderCalendar(document.getElementById(\\x27content\\x27))">Today</button>'+
-  '</div><div id="calEvents"><div style="text-align:center;padding:20px"><div class="spinner"></div></div></div>';
+  var firstDay=new Date(calYear,calMonth,1).getDay();
+  var daysInMonth=new Date(calYear,calMonth+1,0).getDate();
+  var monthName=new Date(calYear,calMonth,1).toLocaleDateString('en',{month:'long',year:'numeric'});
+  // Adjust so Monday=0
+  var startDay=(firstDay+6)%7;
+
+  var h='<div style="display:flex;align-items:center;gap:8px;margin-bottom:12px">'+
+    '<button class="btn btn--secondary" onclick="calPrev()">&larr;</button>'+
+    '<div style="flex:1;text-align:center;font-size:16px;font-weight:700;color:var(--bright)">'+esc(monthName)+'</div>'+
+    '<button class="btn btn--secondary" onclick="calNext()">&rarr;</button>'+
+  '</div>';
+
+  // Day headers
+  h+='<div style="display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px">';
+  ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'].forEach(function(d){
+    h+='<div style="text-align:center;font-size:10px;color:var(--dim);padding:4px">'+d+'</div>';
+  });
+  h+='</div>';
+
+  // Calendar grid
+  h+='<div style="display:grid;grid-template-columns:repeat(7,1fr);gap:2px">';
+  // Empty cells before first day
+  for(var i=0;i<startDay;i++){h+='<div style="min-height:48px;background:var(--bg);border-radius:4px"></div>'}
+  // Day cells
+  for(var d=1;d<=daysInMonth;d++){
+    var key=calKey(calYear,calMonth,d);
+    var today=isToday(calYear,calMonth,d);
+    var evts=calEventsCache[key]||[];
+    var hasDot=evts.length>0;
+    h+='<div onclick="openDayDetail(\\x27'+key+'\\x27)" style="min-height:48px;background:'+(today?'var(--greendim)':'var(--bg2)')+';border:1px solid '+(today?'var(--green3)':'var(--border)')+';border-radius:4px;padding:4px;cursor:pointer;position:relative">';
+    h+='<div style="font-size:12px;font-weight:'+(today?'700':'400')+';color:'+(today?'var(--green)':'var(--text)')+'">'+d+'</div>';
+    if(hasDot){
+      h+='<div style="font-size:8px;color:var(--amber);margin-top:2px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis">'+esc(evts[0].summary)+'</div>';
+      if(evts.length>1)h+='<div style="font-size:8px;color:var(--dim)">+'+String(evts.length-1)+' more</div>';
+    }
+    h+='</div>';
+  }
+  h+='</div>';
+
+  // Loading indicator
+  h+='<div id="calLoading" style="text-align:center;padding:8px;color:var(--dim);font-size:10px">Loading events...</div>';
+
   el.innerHTML=h;
-  apiGet('/api/calendar?date='+calDate).then(function(r){
-    var ev=(r&&r.events)||[];
-    var ce=document.getElementById('calEvents');if(!ce)return;
-    if(ev.length===0){ce.innerHTML='<div class="card" style="text-align:center;color:var(--dim);padding:20px">No events on '+calDate+'</div>';return}
-    var out='';ev.forEach(function(x){
-      out+='<div class="card event"><span class="event__time">'+(x.isAllDay?'All day':fmtTime(x.start)+' - '+fmtTime(x.end))+'</span><span class="event__title">'+esc(x.summary)+'</span>'+(x.location?'<span class="event__location">'+esc(x.location)+'</span>':'')+'</div>';
-    });
-    ce.innerHTML=out;
+  loadMonthEvents();
+}
+
+function loadMonthEvents(){
+  var daysInMonth=new Date(calYear,calMonth+1,0).getDate();
+  var promises=[];
+  for(var d=1;d<=daysInMonth;d++){
+    var key=calKey(calYear,calMonth,d);
+    if(!calEventsCache[key]){
+      (function(k,day){
+        promises.push(apiGet('/api/calendar?date='+k).then(function(r){
+          calEventsCache[k]=(r&&r.events)||[];
+        }));
+      })(key,d);
+    }
+  }
+  if(promises.length===0){
+    var li=document.getElementById('calLoading');if(li)li.style.display='none';
+    return;
+  }
+  Promise.all(promises).then(function(){
+    var li=document.getElementById('calLoading');if(li)li.style.display='none';
+    // Re-render just the grid cells with events
+    renderCalendar(document.getElementById('content'));
   });
 }
-function calNav(dir){
-  var d=new Date(calDate);d.setDate(d.getDate()+dir);
-  calDate=d.toISOString().split('T')[0];
-  renderCalendar(document.getElementById('content'));
+
+function calPrev(){calMonth--;if(calMonth<0){calMonth=11;calYear--}renderCalendar(document.getElementById('content'))}
+function calNext(){calMonth++;if(calMonth>11){calMonth=0;calYear++}renderCalendar(document.getElementById('content'))}
+
+function openDayDetail(dateStr){
+  var evts=calEventsCache[dateStr]||[];
+  var dayLabel=new Date(dateStr+'T12:00:00').toLocaleDateString('en',{weekday:'long',month:'long',day:'numeric',year:'numeric'});
+
+  var h='<h2 style="color:var(--green);margin-bottom:4px">'+esc(dayLabel)+'</h2>';
+  h+='<div style="color:var(--dim);font-size:11px;margin-bottom:12px">'+dateStr+'</div>';
+
+  if(evts.length===0){
+    h+='<div style="color:var(--dim);padding:20px;text-align:center">No events on this day</div>';
+  } else {
+    evts.forEach(function(x){
+      var timeStr=x.isAllDay?'All day':fmtTime(x.start)+' - '+fmtTime(x.end);
+      h+='<div style="border:1px solid var(--border);border-radius:6px;padding:12px;margin-bottom:10px;background:var(--bg3)">';
+      h+='<div style="color:var(--amber);font-weight:700;font-size:13px;margin-bottom:4px">'+esc(timeStr)+'</div>';
+      h+='<div style="color:var(--bright);font-size:15px;font-weight:700;margin-bottom:6px">'+esc(x.summary)+'</div>';
+      if(x.location)h+='<div style="color:var(--cyan);font-size:12px;margin-bottom:4px">Location: '+esc(x.location)+'</div>';
+      if(x.organizer)h+='<div style="color:var(--dim);font-size:11px;margin-bottom:4px">Organizer: '+esc(x.organizer)+'</div>';
+      if(x.attendees&&x.attendees.length>0){
+        h+='<div style="color:var(--dim);font-size:11px;margin-bottom:4px">Attendees:</div>';
+        x.attendees.forEach(function(a){
+          var status=a.responseStatus==='accepted'?'var(--green)':a.responseStatus==='declined'?'var(--red)':'var(--dim)';
+          h+='<div style="font-size:11px;color:'+status+';padding-left:8px">'+esc(a.name||a.email)+' ('+esc(a.responseStatus)+')</div>';
+        });
+      }
+      if(x.description){
+        h+='<div style="border-top:1px solid var(--border);margin-top:8px;padding-top:8px;color:var(--text);font-size:12px;white-space:pre-wrap;word-wrap:break-word">'+esc(x.description)+'</div>';
+      }
+      if(x.hangoutLink){
+        h+='<div style="margin-top:8px"><a href="'+esc(x.hangoutLink)+'" target="_blank" style="color:var(--cyan);font-size:12px;font-weight:700">Join Video Call</a></div>';
+      }
+      if(x.htmlLink){
+        h+='<div style="margin-top:4px"><a href="'+esc(x.htmlLink)+'" target="_blank" style="color:var(--dim);font-size:10px">Open in Google Calendar</a></div>';
+      }
+      h+='</div>';
+    });
+  }
+
+  // Use the agent modal for day detail
+  document.getElementById('modalName').textContent=dayLabel;
+  document.getElementById('modalPrompt').style.display='none';
+  document.getElementById('modalResponse').style.display='block';
+  document.getElementById('modalResponse').innerHTML=h;
+  document.getElementById('agentModal').classList.add('modal-overlay--open');
+  // Hide ask button
+  var sendBtn=document.getElementById('agentModal').querySelector('.btn--primary');
+  if(sendBtn)sendBtn.style.display='none';
 }
 
 // ---- AGENTS ----
@@ -382,8 +486,12 @@ function openAgent(name,display){
   selectedAgent=name;
   document.getElementById('modalName').textContent=display||name;
   document.getElementById('modalPrompt').value='';
+  document.getElementById('modalPrompt').style.display='';
   document.getElementById('modalResponse').style.display='none';
   document.getElementById('modalResponse').textContent='';
+  document.getElementById('modalResponse').innerHTML='';
+  var sendBtn=document.getElementById('agentModal').querySelector('.btn--primary');
+  if(sendBtn)sendBtn.style.display='';
   document.getElementById('agentModal').classList.add('modal-overlay--open');
 }
 function closeModal(){