@cccarv82/freya 2.12.0 → 2.13.1

package/cli/web-ui.css

@@ -557,6 +557,30 @@ body {
   border-color: rgba(59, 130, 246, .35);
 }
 
+[data-theme="dark"] .pill.ok {
+  background: rgba(16, 185, 129, .18);
+  color: #6ee7b7;
+  border-color: rgba(16, 185, 129, .35);
+}
+
+[data-theme="dark"] .pill.warn {
+  background: rgba(245, 158, 11, .18);
+  color: #fbbf24;
+  border-color: rgba(245, 158, 11, .35);
+}
+
+[data-theme="dark"] .pill.info {
+  background: rgba(59, 130, 246, .18);
+  color: #93c5fd;
+  border-color: rgba(59, 130, 246, .35);
+}
+
+[data-theme="dark"] .pill.err {
+  background: rgba(239, 68, 68, .15);
+  color: #fca5a5;
+  border-color: rgba(239, 68, 68, .35);
+}
+
 .centerBody {
   padding: 16px 20px 20px;
   overflow: auto;
@@ -569,10 +593,11 @@ body {
 .promptShell {
   display: flex;
   justify-content: center;
+  width: 100%;
 }
 
 .promptBar {
-  width: min(720px, 100%);
+  width: min(960px, 100%);
   background: var(--paper);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
@@ -1312,6 +1337,163 @@ textarea:focus {
   }
 }
 
+/* ── Insight Pills (Blocker Severity) ── */
+.insight-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 8px;
+}
+
+.insight-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  font-weight: 700;
+  padding: 3px 10px;
+  border: 1px solid;
+  letter-spacing: 0.3px;
+}
+
+.insight-pill.critical { background: rgba(239,68,68,.12); color: #f87171; border-color: rgba(239,68,68,.3); }
+.insight-pill.high     { background: rgba(249,115,22,.12); color: #fb923c; border-color: rgba(249,115,22,.3); }
+.insight-pill.medium   { background: rgba(250,204,21,.12); color: #facc15; border-color: rgba(250,204,21,.3); }
+.insight-pill.low      { background: rgba(34,197,94,.10);  color: #4ade80; border-color: rgba(34,197,94,.25); }
+
+.insight-clear {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: #4ade80;
+  font-weight: 600;
+}
+
+.insight-section-title {
+  font-weight: 600;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--muted);
+  margin: 10px 0 6px;
+}
+
+.insight-steps {
+  margin: 0 0 0 2px;
+  padding: 0;
+  list-style: none;
+}
+
+.insight-steps li {
+  position: relative;
+  padding: 4px 0 4px 16px;
+  font-size: 12px;
+  color: var(--muted);
+  line-height: 1.4;
+}
+
+.insight-steps li::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 11px;
+  width: 6px;
+  height: 6px;
+  background: var(--accent);
+  opacity: 0.6;
+}
+
+/* ── Toast Notifications ── */
+.toast-container {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 8px;
+  pointer-events: none;
+}
+
+.toast {
+  pointer-events: auto;
+  padding: 10px 16px;
+  border: 1px solid var(--line2);
+  background: var(--paper);
+  backdrop-filter: blur(12px);
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 500;
+  font-family: var(--sans);
+  box-shadow: var(--shadow);
+  max-width: 360px;
+  opacity: 0;
+  transform: translateX(100%);
+  animation: toastIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.toast.out {
+  animation: toastOut 0.25s ease-in forwards;
+}
+
+.toast.ok   { border-left: 3px solid rgba(16, 185, 129, .85); }
+.toast.err  { border-left: 3px solid rgba(239, 68, 68, .85); }
+.toast.run  { border-left: 3px solid rgba(56, 189, 248, .9); }
+.toast.plan { border-left: 3px solid rgba(250, 204, 21, .9); }
+
+@keyframes toastIn {
+  from { opacity: 0; transform: translateX(100%); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes toastOut {
+  from { opacity: 1; transform: translateX(0); }
+  to   { opacity: 0; transform: translateX(100%); }
+}
+
+/* ── Loading Skeletons ── */
+.skeleton {
+  position: relative;
+  overflow: hidden;
+  min-height: 60px;
+  padding: 16px;
+}
+
+.skeleton::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
+  animation: shimmer 1.5s infinite;
+}
+
+@keyframes shimmer {
+  0%   { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+
+.skeleton-line {
+  height: 12px;
+  background: var(--line);
+  margin-bottom: 10px;
+}
+
+.skeleton-line:nth-child(1) { width: 80%; }
+.skeleton-line:nth-child(2) { width: 55%; }
+.skeleton-line:nth-child(3) { width: 70%; }
+
+/* ── Content Transitions ── */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(6px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.panelBody > *,
+.swimlaneContainer > * {
+  animation: fadeIn 0.2s ease-out;
+}
+
 * {
   border-radius: 0 !important;
 }

package/cli/web-ui.js

@@ -39,6 +39,37 @@
     if (pill) pill.textContent = text;
     const status = $('status');
     if (status) status.textContent = text;
+    // Forward important states to toast system
+    if (kind === 'err') showToast('err', text);
+    else if (kind === 'ok' && text !== 'pronto') showToast('ok', text);
+  }
+
+  /* ── Toast Notification System ── */
+  let _toastContainer = null;
+  function showToast(kind, text, duration) {
+    if (!_toastContainer) {
+      _toastContainer = document.createElement('div');
+      _toastContainer.className = 'toast-container';
+      document.body.appendChild(_toastContainer);
+    }
+    const el = document.createElement('div');
+    el.className = 'toast ' + kind;
+    el.textContent = text;
+    el.setAttribute('role', 'alert');
+    el.setAttribute('aria-live', 'polite');
+    _toastContainer.appendChild(el);
+    const ms = duration || (kind === 'err' ? 4000 : 2500);
+    setTimeout(() => {
+      el.classList.add('out');
+      setTimeout(() => el.remove(), 300);
+    }, ms);
+  }
+
+  /* ── Skeleton Loading Helper ── */
+  function showSkeleton(elId) {
+    const el = $(elId);
+    if (!el) return;
+    el.innerHTML = '<div class="skeleton"><div class="skeleton-line"></div><div class="skeleton-line"></div><div class="skeleton-line"></div></div>';
   }
 
   function escapeHtml(str) {
@@ -962,6 +993,7 @@
   }
 
   async function refreshProjects() {
+    showSkeleton('projectsGrid');
     try {
       const [r, b, t] = await Promise.all([
         api('/api/projects/list', { dir: dirOrDefault() }),
@@ -1125,6 +1157,7 @@
   }
 
   async function refreshTimeline() {
+    showSkeleton('timelineGrid');
     try {
       const r = await api('/api/timeline', { dir: dirOrDefault() });
       state.timeline = r.items || [];
@@ -1259,6 +1292,7 @@
   }
 
   async function refreshReportsPage() {
+    showSkeleton('reportsGrid');
     try {
       setPill('run', 'carregando…');
       const r = await api('/api/reports/list', { dir: dirOrDefault() });
@@ -1568,6 +1602,7 @@
   }
 
   async function refreshToday() {
+    showSkeleton('swimlaneContainer');
     try {
       const [t, b] = await Promise.all([
         api('/api/tasks/list', { dir: dirOrDefault(), category: 'DO_NOW', status: 'PENDING', limit: 50 }),
@@ -1586,22 +1621,58 @@
     if (!el) return;
 
     if (!payload || !payload.summary) {
-      // Hide the strip if no content
       if (wrap) wrap.style.display = 'none';
       return;
     }
 
     const lines = [];
-    lines.push('<div style="margin-bottom:6px; color:var(--text);">' + escapeHtml(payload.summary) + '</div>');
+    const summary = String(payload.summary || '');
+
+    // Parse severity counts from summary (e.g. "CRITICAL: 0, HIGH: 2, ...")
+    const sevRegex = /(\w+):\s*(\d+)/g;
+    let match;
+    const counts = [];
+    let totalActive = 0;
+    while ((match = sevRegex.exec(summary)) !== null) {
+      const sev = match[1].toUpperCase();
+      const count = parseInt(match[2], 10);
+      if (sev !== 'TOTAL') {
+        counts.push({ sev, count });
+        totalActive += count;
+      }
+    }
+
+    if (counts.length > 0) {
+      // Render as styled pills
+      if (totalActive === 0) {
+        lines.push('<div class="insight-clear"><span style="font-size:16px;">&#10003;</span> Nenhum bloqueio ativo</div>');
+      } else {
+        let pills = '<div class="insight-pills">';
+        for (const c of counts) {
+          if (c.count > 0) {
+            pills += '<span class="insight-pill ' + c.sev.toLowerCase() + '">' + escapeHtml(c.sev) + ': ' + c.count + '</span>';
+          }
+        }
+        pills += '</div>';
+        lines.push(pills);
+      }
+    } else {
+      // Fallback: summary doesn't match pattern, render as text
+      lines.push('<div style="color:var(--text); font-size:12px;">' + escapeHtml(summary) + '</div>');
+    }
+
     if (payload.suggestions && payload.suggestions.length) {
-      lines.push('<div style="font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:0.5px; color:var(--muted); margin:8px 0 4px;">Próximos passos</div>');
-      lines.push('<ul style="margin:0 0 0 14px; padding:0;">' + payload.suggestions.map((s) => '<li style="margin-bottom:3px;">' + escapeHtml(s) + '</li>').join('') + '</ul>');
+      lines.push('<div class="insight-section-title">Proximos passos</div>');
+      lines.push('<ul class="insight-steps">' + payload.suggestions.map(function (s) {
+        return '<li>' + escapeHtml(s) + '</li>';
+      }).join('') + '</ul>');
     }
     if (payload.top && payload.top.length) {
-      lines.push('<div style="font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:0.5px; color:var(--muted); margin:8px 0 4px;">Top blockers</div>');
-      lines.push('<ul style="margin:0 0 0 14px; padding:0;">' + payload.top.map((b) => {
-        const c = sevColor(String(b.severity || '').toUpperCase());
-        return '<li style="margin-bottom:3px;"><span style="color:' + c + '; font-weight:700;">' + escapeHtml(String(b.severity || '')) + '</span> — ' + escapeHtml(String(b.title || '')) + '</li>';
+      lines.push('<div class="insight-section-title">Top blockers</div>');
+      lines.push('<ul class="insight-steps">' + payload.top.map(function (b) {
+        const sev = String(b.severity || '').toUpperCase();
+        const cls = sev === 'CRITICAL' ? 'critical' : sev === 'HIGH' ? 'high' : sev === 'MEDIUM' ? 'medium' : 'low';
+        return '<li><span class="insight-pill ' + cls + '" style="font-size:10px; padding:1px 6px; margin-right:4px;">' + escapeHtml(sev) + '</span>' + escapeHtml(String(b.title || '')) + '</li>';
       }).join('') + '</ul>');
     }
     el.innerHTML = lines.join('');
@@ -2176,8 +2247,12 @@
       const ok = confirm(msg);
       if (!ok) return;
 
-      const webhookUrl = target === 'discord' ? $('discord').value.trim() : $('teams').value.trim();
-      if (!webhookUrl) throw new Error('Configure o webhook antes.');
+      const discordInput = $('discord');
+      const teamsInput = $('teams');
+      const webhookUrl = target === 'discord'
+        ? (discordInput ? discordInput.value.trim() : (state.discordUrl || ''))
+        : (teamsInput ? teamsInput.value.trim() : (state.teamsUrl || ''));
+      if (!webhookUrl) throw new Error('Configure o webhook em Settings antes de publicar.');
       setPill('run', 'publish…');
       const mode = state.prettyPublish ? 'pretty' : 'chunks';
       await api('/api/publish', { webhookUrl, text: state.lastText, mode, allowSecrets: true });
@@ -2389,10 +2464,13 @@
         if (side) side.textContent = defaults.workspaceDir;
       }
       if (defaults && defaults.settings) {
+        state.discordUrl = defaults.settings.discordWebhookUrl || '';
+        state.teamsUrl = defaults.settings.teamsWebhookUrl || '';
+        // Populate inputs if they exist (e.g. Settings page)
         const discord = $('discord');
         const teams = $('teams');
-        if (discord) discord.value = defaults.settings.discordWebhookUrl || '';
-        if (teams) teams.value = defaults.settings.teamsWebhookUrl || '';
+        if (discord) discord.value = state.discordUrl;
+        if (teams) teams.value = state.teamsUrl;
       }
     } catch (e) {
       // ignore
@@ -2449,6 +2527,27 @@
 
   setPill('ok', 'pronto');
 
+  /* ── Global Keyboard Shortcuts ── */
+  document.addEventListener('keydown', (e) => {
+    // Ctrl/Cmd+Enter: Save & Process from anywhere
+    if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+      e.preventDefault();
+      if (typeof saveAndPlan === 'function') saveAndPlan();
+      return;
+    }
+    // Ctrl/Cmd+K: Focus search/input on current page
+    if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+      e.preventDefault();
+      const target = $('inboxText') || $('reportsFilter') || $('projectsFilter') || $('timelineFilter');
+      if (target) target.focus();
+      return;
+    }
+    // Escape: Blur active element
+    if (e.key === 'Escape' && document.activeElement) {
+      document.activeElement.blur();
+    }
+  });
+
   // Expose handlers for inline onclick
   window.doInit = doInit;
   window.doUpdate = doUpdate;

package/cli/web.js

@@ -1021,7 +1021,7 @@ function buildDocsHtml(safeDefault, appVersion) {
     <div class="frame">
       <div class="shell">
 
-        <aside class="rail">
+        <aside class="rail" role="navigation" aria-label="Menu principal">
           <div class="railTop">
             <div class="railLogo">F</div>
           </div>
@@ -1053,7 +1053,7 @@ function buildDocsHtml(safeDefault, appVersion) {
           </div>
         </aside>
 
-        <main class="center">
+        <main class="center" role="main">
           <div class="topbar">
             <div class="brandLine">
               <span class="spark"></span>
@@ -1160,7 +1160,7 @@ function buildHtml(safeDefault, appVersion) {
     <div class="frame">
       <div class="shell">
 
-        <aside class="rail">
+        <aside class="rail" role="navigation" aria-label="Menu principal">
           <div class="railTop">
             <div class="railLogo">F</div>
           </div>
@@ -1190,7 +1190,7 @@ function buildHtml(safeDefault, appVersion) {
           </div>
         </aside>
 
-        <main class="center">
+        <main class="center" role="main">
           <div class="topbar">
             <div class="brandLine">
               <span class="spark"></span>
@@ -1208,7 +1208,8 @@ function buildHtml(safeDefault, appVersion) {
 
           <div class="centerBody">
             <!-- Unified Input Panel -->
-            <div class="promptBar" style="margin-bottom: 24px; border-radius: 16px; display: flex; flex-direction: column; overflow: hidden;">
+            <div class="promptShell">
+            <div class="promptBar" style="border-radius: 16px; display: flex; flex-direction: column; overflow: hidden;">
               <!-- Header -->
               <div class="promptMeta" style="flex-shrink:0;">
                 <div class="promptTitle" style="display: flex; align-items: center; gap: 8px;">
@@ -1222,7 +1223,7 @@ function buildHtml(safeDefault, appVersion) {
               </div>
 
               <!-- Textarea -->
-              <textarea id="inboxText" placeholder="Cole updates, decisões, blockers... ou faça uma pergunta à Freya.&#10;&#10;▸ Salvar & Processar → extrai tarefas e blockers do texto&#10;▸ Perguntar → consulta o histórico via busca semântica (RAG)" style="resize:none; min-height: 120px; border-radius: 0; border-left: none; border-right: none; border-top: none; border-bottom: 1px solid var(--border); padding: 14px 16px; font-size: 13px; line-height: 1.6;"
+              <textarea id="inboxText" aria-label="Entrada de texto para processar ou perguntar" placeholder="Cole updates, decisões, blockers... ou faça uma pergunta à Freya.&#10;&#10;▸ Salvar & Processar → extrai tarefas e blockers do texto&#10;▸ Perguntar → consulta o histórico via busca semântica (RAG)" style="resize:none; min-height: 160px; border-radius: 0; border-left: none; border-right: none; border-top: none; border-bottom: 1px solid var(--border); padding: 14px 16px; font-size: 13px; line-height: 1.6;"
                 onkeydown="if((event.metaKey||event.ctrlKey)&&event.key==='Enter'){event.preventDefault();window.saveAndPlan();}"></textarea>
 
               <!-- Actions bar -->
@@ -1258,6 +1259,7 @@ function buildHtml(safeDefault, appVersion) {
               <!-- Chat thread: responses appear here after actions -->
               <div id="chatThread" style="max-height: 280px; overflow-y:auto; overflow-x:hidden; padding:0 12px; display:flex; flex-direction:column; gap:8px; border-top: 1px solid var(--border);"></div>
             </div>
+            </div>
 
             <div class="centerHead">
               <div>
@@ -1309,24 +1311,6 @@ function buildHtml(safeDefault, appVersion) {
                 </div>
             </section>
 
-            <div class="panel">
-              <div class="panelHead"><b>Configurações de publicação</b></div>
-              <div class="panelBody">
-                <label>Discord webhook URL</label>
-                <input id="discord" placeholder="https://discord.com/api/webhooks/..." />
-                <div style="height:10px"></div>
-
-                <label>Teams webhook URL</label>
-                <input id="teams" placeholder="https://..." />
-                <div class="help">Os webhooks ficam salvos na workspace em <code>data/settings/settings.json</code>.</div>
-
-                <div style="height:10px"></div>
-                <label style="display:flex; align-items:center; gap:10px; user-select:none; margin: 6px 0 12px 0">
-                  <input id="prettyPublish" type="checkbox" checked style="width:auto" onchange="togglePrettyPublish()" />
-                  Publicação bonita (cards/embeds)
-                </label>
-              </div>
-            </div>
           </div>
         </main>
       </div>
@@ -1356,7 +1340,7 @@ function buildReportsHtml(safeDefault, appVersion) {
     <div class="frame">
       <div class="shell">
 
-        <aside class="rail">
+        <aside class="rail" role="navigation" aria-label="Menu principal">
           <div class="railTop">
             <div class="railLogo">F</div>
           </div>
@@ -1386,7 +1370,7 @@ function buildReportsHtml(safeDefault, appVersion) {
           </div>
         </aside>
 
-        <main class="center reportsPage" id="reportsPage">
+        <main class="center reportsPage" role="main" id="reportsPage">
           <div class="topbar">
             <div class="brandLine">
               <span class="spark"></span>
@@ -1469,7 +1453,7 @@ function buildProjectsHtml(safeDefault, appVersion) {
     <div class="frame">
       <div class="shell">
 
-        <aside class="rail">
+        <aside class="rail" role="navigation" aria-label="Menu principal">
           <div class="railTop">
             <div class="railLogo">F</div>
           </div>
@@ -1498,7 +1482,7 @@ function buildProjectsHtml(safeDefault, appVersion) {
           </div>
         </aside>
 
-        <main class="center reportsPage" id="projectsPage">
+        <main class="center reportsPage" role="main" id="projectsPage">
           <div class="topbar">
             <div class="brandLine">
               <span class="spark"></span>
@@ -1671,7 +1655,7 @@ function buildGraphHtml(safeDefault, appVersion) {
     <div class="frame">
       <div class="shell">
 
-        <aside class="rail">
+        <aside class="rail" role="navigation" aria-label="Menu principal">
           <div class="railTop">
             <div class="railLogo">F</div>
           </div>
@@ -1700,7 +1684,7 @@ function buildGraphHtml(safeDefault, appVersion) {
           </div>
         </aside>
 
-        <main class="center reportsPage" id="graphPage">
+        <main class="center reportsPage" role="main" id="graphPage">
           <div class="topbar">
             <div class="brandLine">
               <span class="spark"></span>
@@ -1762,7 +1746,7 @@ function buildCompanionHtml(safeDefault, appVersion) {
     <div class="frame">
       <div class="shell">
 
-        <aside class="rail">
+        <aside class="rail" role="navigation" aria-label="Menu principal">
           <div class="railTop">
             <div class="railLogo">F</div>
           </div>
@@ -1791,7 +1775,7 @@ function buildCompanionHtml(safeDefault, appVersion) {
           </div>
         </aside>
 
-        <main class="center reportsPage" id="healthPage">
+        <main class="center reportsPage" role="main" id="healthPage">
           <div class="topbar">
             <div class="brandLine">
               <span class="spark"></span>
@@ -3934,7 +3918,7 @@ function buildSettingsHtml(safeDefault, appVersion) {
     <div class="frame">
       <div class="shell">
 
-        <aside class="rail">
+        <aside class="rail" role="navigation" aria-label="Menu principal">
           <div class="railTop">
             <div class="railLogo">F</div>
           </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cccarv82/freya",
-  "version": "2.12.0",
+  "version": "2.13.1",
   "description": "Personal AI Assistant with local-first persistence",
   "scripts": {
     "health": "node scripts/validate-data.js && node scripts/validate-structure.js",
@@ -35,4 +35,4 @@
     "pdf-lib": "^1.17.1",
     "sql.js": "^1.12.0"
   }
-}
+}