nothumanallowed 3.5.0 → 3.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nothumanallowed",
-  "version": "3.5.0",
+  "version": "3.6.1",
   "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}
@@ -204,10 +204,11 @@ function loadDash(){
 }
 function loadAgents(){return apiGet('/api/agents').then(function(r){agentsList=(r&&r.agents)||[]})}
 function updateBadges(){
-  var eb=document.getElementById('emailBadge'),tb=document.getElementById('taskBadge');
-  var ue=dash.emails.length,ut=dash.tasks.filter(function(t){return t.status!=='done'}).length;
+  var eb=document.getElementById('emailBadge'),tb=document.getElementById('taskBadge'),cb=document.getElementById('calBadge');
+  var ue=dash.emails.length,ut=dash.tasks.filter(function(t){return t.status!=='done'}).length,uc=dash.events.length;
   if(eb){eb.textContent=ue;eb.style.display=ue>0?'':'none'}
   if(tb){tb.textContent=ut;tb.style.display=ut>0?'':'none'}
+  if(cb){cb.textContent=uc;cb.style.display=uc>0?'':'none'}
 }
 
 // ---- HELPERS ----
@@ -342,66 +343,140 @@ 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 — square cells
+  h+='<div style="display:grid;grid-template-columns:repeat(7,1fr);gap:3px">';
+  // Empty cells before first day
+  for(var i=0;i<startDay;i++){h+='<div style="aspect-ratio:1;background:var(--bg);border-radius:6px"></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 count=evts.length;
+    var bg=today?'var(--greendim)':'var(--bg2)';
+    var bdr=today?'var(--green3)':count>0?'var(--amber)':'var(--border)';
+    h+='<div onclick="openDayDetail(\\x27'+key+'\\x27)" style="aspect-ratio:1;background:'+bg+';border:1px solid '+bdr+';border-radius:6px;padding:6px;cursor:pointer;display:flex;flex-direction:column;overflow:hidden">';
+    h+='<div style="font-size:14px;font-weight:'+(today?'800':'500')+';color:'+(today?'var(--green)':'var(--text)')+'">'+d+'</div>';
+    if(count>0){
+      h+='<div style="flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:1px;min-height:0">';
+      evts.slice(0,2).forEach(function(x){
+        h+='<div style="font-size:8px;color:var(--amber);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;background:var(--bg3);border-radius:2px;padding:1px 3px">'+esc(x.summary)+'</div>';
+      });
+      if(count>2)h+='<div style="font-size:8px;color:var(--dim);text-align:center">+'+String(count-2)+'</div>';
+      h+='</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 +493,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(){
@@ -479,7 +558,7 @@ init();
     <div class="sidebar__section">
       <div class="sidebar__label">Data</div>
       <div class="nav-item" data-view="emails" onclick="switchView('emails')"><span class="nav-item__icon">&#9993;</span> Emails <span class="nav-item__badge" id="emailBadge" style="display:none">0</span></div>
-      <div class="nav-item" data-view="calendar" onclick="switchView('calendar')"><span class="nav-item__icon">&#128197;</span> Calendar</div>
+      <div class="nav-item" data-view="calendar" onclick="switchView('calendar')"><span class="nav-item__icon">&#128197;</span> Calendar <span class="nav-item__badge" id="calBadge" style="display:none;background:var(--amber)">0</span></div>
     </div>
     <div class="sidebar__section">
       <div class="sidebar__label">AI</div>