nothumanallowed 3.5.0 → 3.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nothumanallowed",
-  "version": "3.5.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,66 +342,134 @@ function renderEmails(el){
   el.innerHTML=h;
 }
 
-// ---- CALENDAR ----
-var calOffset = 0;
-function renderCalendar(el) {
-  var today = new Date();
-  var target = new Date(today);
-  target.setDate(today.getDate() + calOffset);
-  var yyyy = target.getFullYear();
-  var mm = String(target.getMonth() + 1).padStart(2, '0');
-  var dd = String(target.getDate()).padStart(2, '0');
-  var dateStr = yyyy + '-' + mm + '-' + dd;
-  var dayName = target.toLocaleDateString('en', { weekday: 'long', month: 'long', day: 'numeric' });
-  var isToday = calOffset === 0;
-
-  var h = '<div style="display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap">' +
-    '<button class="btn btn--secondary" onclick="calOffset--;renderCalendar(document.getElementById(\\x27content\\x27))">&larr; Prev</button>' +
-    '<div style="flex:1;text-align:center"><div style="font-size:16px;font-weight:700;color:var(--bright)">' + esc(dayName) + '</div>' +
-    '<div style="font-size:11px;color:var(--dim)">' + dateStr + (isToday ? ' (today)' : '') + '</div></div>' +
-    '<button class="btn btn--secondary" onclick="calOffset++;renderCalendar(document.getElementById(\\x27content\\x27))">Next &rarr;</button>' +
-    '</div>';
-
-  if (!isToday) {
-    h += '<div style="text-align:center;margin-bottom:12px"><button class="btn btn--secondary" onclick="calOffset=0;renderCalendar(document.getElementById(\\x27content\\x27))">Go to Today</button></div>';
+// ---- 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 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>';
 
-  h += '<div id="calEvents"><div style="text-align:center;padding:30px"><div class="spinner"></div><div style="color:var(--dim);margin-top:8px">Loading events...</div></div></div>';
-  el.innerHTML = h;
+  el.innerHTML=h;
+  loadMonthEvents();
+}
 
-  apiGet('/api/calendar?date=' + dateStr).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:30px">No events on ' + esc(dayName) + '</div>';
-      return;
+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);
     }
-    var out = '<div style="color:var(--cyan);font-size:11px;margin-bottom:8px">' + ev.length + ' event' + (ev.length > 1 ? 's' : '') + '</div>';
-    ev.forEach(function(x) {
-      var timeStr = x.isAllDay ? 'All day' : fmtTime(x.start) + ' — ' + fmtTime(x.end);
-      out += '<div class="card" style="padding:14px">' +
-        '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px">' +
-          '<span style="color:var(--amber);font-weight:700;font-size:13px">' + esc(timeStr) + '</span>' +
-        '</div>' +
-        '<div style="color:var(--bright);font-size:14px;font-weight:600;margin-bottom:4px">' + esc(x.summary) + '</div>';
-      if (x.location) {
-        out += '<div style="color:var(--dim);font-size:11px">📍 ' + esc(x.location) + '</div>';
+  }
+  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 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.attendees && x.attendees.length > 0) {
-        var names = x.attendees.map(function(a) { return a.name || a.email }).join(', ');
-        out += '<div style="color:var(--dim);font-size:11px;margin-top:4px">👥 ' + esc(names) + '</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.description) {
-        out += '<div style="color:var(--dim);font-size:11px;margin-top:4px;border-top:1px solid var(--border);padding-top:6px">' + esc(x.description.slice(0, 200)) + '</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.hangoutLink) {
-        out += '<div style="margin-top:6px"><a href="' + esc(x.hangoutLink) + '" target="_blank" style="color:var(--cyan);font-size:11px">🔗 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>';
       }
-      out += '</div>';
+      h+='</div>';
     });
-    ce.innerHTML = out;
-  });
+  }
+
+  // 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 ----
@@ -418,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(){