UI clean up

Author: Jeetski

utilities/dashboard/app.js

@@ -167,6 +167,144 @@ function setDockPinned(next) {
 
 function ready(fn) { if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', fn); else fn(); }
 
+function setupDarkTooltips() {
+  if (typeof document === 'undefined') return;
+  if (window.__chronosDarkTooltipsBound) return;
+  window.__chronosDarkTooltipsBound = true;
+
+  const style = document.createElement('style');
+  style.id = 'chronos-dark-tooltips-style';
+  style.textContent = `
+    .chronos-tooltip {
+      position: fixed;
+      z-index: 30000;
+      max-width: min(320px, calc(100vw - 24px));
+      padding: 8px 10px;
+      border-radius: 10px;
+      background: linear-gradient(180deg, rgba(15, 20, 29, 0.98) 0%, rgba(10, 14, 21, 0.98) 100%);
+      color: var(--text, #e6e8ef);
+      border: 1px solid rgba(255,255,255,0.12);
+      box-shadow: 0 12px 32px rgba(0,0,0,0.42);
+      font-size: 12px;
+      line-height: 1.35;
+      pointer-events: none;
+      opacity: 0;
+      transform: translateY(4px);
+      transition: opacity 120ms ease, transform 120ms ease;
+      backdrop-filter: blur(14px) saturate(120%);
+      -webkit-backdrop-filter: blur(14px) saturate(120%);
+      white-space: normal;
+    }
+    .chronos-tooltip.visible {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  `;
+  document.head.appendChild(style);
+
+  const tooltip = document.createElement('div');
+  tooltip.className = 'chronos-tooltip';
+  tooltip.setAttribute('role', 'tooltip');
+  document.body.appendChild(tooltip);
+
+  let activeEl = null;
+
+  function getTooltipText(el) {
+    if (!el) return '';
+    const explicit = el.getAttribute('data-chronos-tooltip');
+    if (explicit) return explicit;
+    const label = el.getAttribute('title');
+    if (label) return label;
+    return '';
+  }
+
+  function restoreTitle(el) {
+    if (!el) return;
+    const stored = el.getAttribute('data-chronos-tooltip-title');
+    if (stored != null) {
+      el.setAttribute('title', stored);
+      el.removeAttribute('data-chronos-tooltip-title');
+    }
+  }
+
+  function suppressNativeTitle(el) {
+    if (!el) return;
+    if (el.hasAttribute('title')) {
+      el.setAttribute('data-chronos-tooltip-title', el.getAttribute('title') || '');
+      el.removeAttribute('title');
+    }
+  }
+
+  function positionTooltip(el) {
+    if (!el || activeEl !== el) return;
+    const rect = el.getBoundingClientRect();
+    const pad = 10;
+    const tipRect = tooltip.getBoundingClientRect();
+    let left = rect.left + (rect.width / 2) - (tipRect.width / 2);
+    left = Math.max(pad, Math.min(left, window.innerWidth - tipRect.width - pad));
+    let top = rect.top - tipRect.height - 10;
+    if (top < pad) top = rect.bottom + 10;
+    if (top + tipRect.height > window.innerHeight - pad) {
+      top = Math.max(pad, window.innerHeight - tipRect.height - pad);
+    }
+    tooltip.style.left = `${Math.round(left)}px`;
+    tooltip.style.top = `${Math.round(top)}px`;
+  }
+
+  function showTooltip(el) {
+    const text = getTooltipText(el);
+    if (!text) return;
+    activeEl = el;
+    suppressNativeTitle(el);
+    tooltip.textContent = text;
+    tooltip.classList.add('visible');
+    positionTooltip(el);
+  }
+
+  function hideTooltip(el) {
+    if (el) restoreTitle(el);
+    if (activeEl && (!el || activeEl === el)) {
+      restoreTitle(activeEl);
+      activeEl = null;
+    }
+    tooltip.classList.remove('visible');
+  }
+
+  function tooltipTarget(start) {
+    return start?.closest?.('[data-chronos-tooltip], [title]') || null;
+  }
+
+  document.addEventListener('mouseover', (ev) => {
+    const target = tooltipTarget(ev.target);
+    if (!target) return;
+    if (activeEl === target) return;
+    hideTooltip(activeEl);
+    showTooltip(target);
+  }, true);
+
+  document.addEventListener('mouseout', (ev) => {
+    if (!activeEl) return;
+    const related = ev.relatedTarget;
+    if (related && activeEl.contains?.(related)) return;
+    if (ev.target === activeEl || activeEl.contains?.(ev.target)) hideTooltip(activeEl);
+  }, true);
+
+  document.addEventListener('focusin', (ev) => {
+    const target = tooltipTarget(ev.target);
+    if (!target) return;
+    hideTooltip(activeEl);
+    showTooltip(target);
+  }, true);
+
+  document.addEventListener('focusout', (ev) => {
+    if (!activeEl) return;
+    if (ev.target === activeEl || activeEl.contains?.(ev.target)) hideTooltip(activeEl);
+  }, true);
+
+  window.addEventListener('scroll', () => positionTooltip(activeEl), true);
+  window.addEventListener('resize', () => positionTooltip(activeEl));
+}
+
 if (typeof window !== 'undefined' && !window.__cockpitPanelDefinitions) {
   window.__cockpitPanelDefinitions = [];
 }
@@ -436,6 +574,7 @@ async function runCliCommandWithSleepInterrupt({ command, args = [], properties
 
 ready(async () => {
   console.log('[Chronos][app] Booting dashboard app');
+  try { setupDarkTooltips(); } catch { }
   let bootOverlay = null;
   let bootMessage = null;
   let bootFailed = false;

utilities/dashboard/core/runtime.js

@@ -188,8 +188,10 @@ const HELP_TEXT = {
   HabitTracker: 'Habits: Snapshot of habits, streaks, and today\'s status.',
   DebugConsole: 'Debug: Inspect/debug data and actions.',
   Achievements: 'Achievements: Review milestones you\'ve unlocked and mark awards/archives.',
+  Admin: 'Admin: Run dashboard maintenance and developer-facing actions from one place.',
   Rewards: 'Rewards: Review point balance/history and redeem reward items.',
   MP3Player: 'MP3 Player: Spin up playlists from user/media/mp3, shuffle or repeat tracks, and manage uploads without leaving the dashboard.',
+  NiaAssistant: 'Nia Assistant: Chat with Chronos assistance, ask for guidance, and trigger supported actions from the dashboard.',
   Settings: 'Settings: View and edit YAML files under user/settings via API.',
   Profile: 'Profile: View/Edit profile (nickname, theme, etc.).',
   Journal: 'Journal: Create/edit Journal or Dream entries. Autosaves; use Type/Date/Tags; Dream fields (lucid, signs, sleep) appear for dream type.',
@@ -199,6 +201,7 @@ const HELP_TEXT = {
   ResolutionTracker: 'Resolutions: Track yearly resolutions and link them to Chronos items.',
   Link: 'Link: Connect to a peer and sync a shared Canvas board (polling, last-write-wins).',
   Trends: 'Trends: View performance metrics including habits, goals, focus time, quality, and adherence stats.',
+  SleepSettings: 'Sleep Settings: Tune sleep targets, windows, and related templates used by Chronos scheduling.',
   // Views
   Calendar: 'Calendar View: Timeline of scheduled blocks. Use zoom/level controls and toolstrip to navigate and manage.',
   TemplateBuilder: 'Template Builder: Build templates via drag & drop. Indent/outdent to nest. Toggle Sequential/Parallel; Save to persist.',
@@ -208,6 +211,12 @@ const HELP_TEXT = {
   Tracker: 'Tracker View: Visualize a full-year calendar for a selected habit or commitment with done/not-done states.',
   Docs: 'Docs View: Browse the Docs tree, search content, and read files without leaving the dashboard.',
   ADUC: 'ADUC View: Launches ADUC (Chronos mode) and embeds it in a dashboard iframe.',
+  Atlas: 'Atlas View: Explore the broader Chronos workspace and navigate connected structures visually.',
+  Canvas: 'Canvas View: Freeform spatial workspace for laying out information and references.',
+  DayBuilder: 'Day Builder: Assemble and adjust a day plan by arranging blocks, timing, and sequencing.',
+  GoalPlanner: 'Goal Planner: Shape a goal into milestones, timelines, and supporting structure before saving.',
+  RoutineBuilder: 'Routine Builder: Design reusable routines and sub-steps with timing and nesting.',
+  WeekBuilder: 'Week Builder: Plan a week at a higher level before turning it into concrete daily structure.',
   // Panels
   schedule: 'Schedule Panel: Mirrors today\'s agenda, lets you refresh/reschedule, jump dates, and kick off the Chronos day timer.',
   matrix: 'Matrix Panel: Interactive pivot grid for Chronos data. Choose rows/cols/values/filters, save presets, and spawn additional panels.',
@@ -233,12 +242,20 @@ const HELP_TEXT = {
   RandomPicker: 'Random Picker Panel: Pull a random item from saved pools.',
   Schedule: 'Schedule Panel: Mirrors today\'s agenda inside the cockpit.',
   StatusStrip: 'Status Chart Panel: Live read-only radar chart of current status indicators.',
+  DataCards: 'Data Cards Panel: Summarize selected metrics or item groups in compact card form for the cockpit.',
   // Wizards
   Onboarding: 'Chronos Onboarding Wizard: Guided flow to set nickname, categories, statuses, templates, and starter goals/rewards.',
   GoalPlanning: 'Goal Planning Wizard: Capture intent, milestones, and supporting work to spin up a rich goal file.',
   ProjectLaunch: 'Project Launch Wizard: Draft a project brief, milestones, and kickoff actions before writing YAML.',
   BrainDump: 'Brain Dump Wizard: Rapid task capture, horizon buckets, and light refinement.',
-  LifeSetup: 'Life Setup Wizard: Build a schedule skeleton with anchors like sleep, meals, work, and exercise.'
+  LifeSetup: 'Life Setup Wizard: Build a schedule skeleton with anchors like sleep, meals, work, and exercise.',
+  Big5: 'Big5 Wizard: Run a personality inventory flow and save the resulting trait profile into Chronos.',
+  ChoreSetup: 'Chore Setup Wizard: Define recurring chores, cadence, and defaults without hand-writing templates.',
+  FutureSelfDialogue: 'Future Self Dialogue Wizard: Reflect through a guided conversation with a future-oriented lens.',
+  MapOfHappiness: 'Map of Happiness Wizard: Capture needs, rank them, and map item coverage against what matters most.',
+  NewYearResolutions: 'New Year Resolutions Wizard: Draft yearly resolutions and supporting structure for the coming year.',
+  SelfAuthoring: 'Self Authoring Wizard: Work through structured reflection and planning prompts across life areas.',
+  StatusMapping: 'Status Mapping Wizard: Configure dashboard status axes, labels, and available value options.'
 };
 
 function getHelpTip(name, fallback) {
@@ -247,7 +264,7 @@ function getHelpTip(name, fallback) {
   if (key && HELP_TEXT[key]) return HELP_TEXT[key];
   if (fallbackKey && HELP_TEXT[fallbackKey]) return HELP_TEXT[fallbackKey];
   const label = fallbackKey || key || 'Component';
-  return `${label}: No help available.`;
+  return `${label}: This dashboard surface opens a focused workspace for ${label.toLowerCase()}. Use the main controls in the header or toolbar, and refresh if the data looks stale.`;
 }
 
 function createHelpButton(name, options = {}) {

utilities/dashboard/dashboard.html

@@ -15,6 +15,13 @@
     html,
     body {
       height: 100%;
+      scrollbar-width: thin;
+      scrollbar-color: #293246 #0d1219;
+    }
+
+    * {
+      scrollbar-width: thin;
+      scrollbar-color: #293246 #0d1219;
     }
 
     body {
@@ -26,6 +33,31 @@
       padding-top: 36px;
     }
 
+    *::-webkit-scrollbar {
+      width: 12px;
+      height: 12px;
+      background: #0d1219;
+    }
+
+    *::-webkit-scrollbar-track {
+      background: linear-gradient(180deg, #0d1219 0%, #101722 100%);
+      border-radius: 999px;
+    }
+
+    *::-webkit-scrollbar-thumb {
+      background: linear-gradient(180deg, #2a3446 0%, #1f2837 100%);
+      border: 2px solid #0d1219;
+      border-radius: 999px;
+    }
+
+    *::-webkit-scrollbar-thumb:hover {
+      background: linear-gradient(180deg, #344057 0%, #273244 100%);
+    }
+
+    *::-webkit-scrollbar-corner {
+      background: #0d1219;
+    }
+
     #scaleRoot {
       position: fixed;
       inset: 0;

utilities/dashboard/views/calendar/inspector.js

@@ -1102,7 +1102,7 @@ export function Inspector() {
     });
 
     return `
-      ${renderCollapsibleSection('Resolutions', `${resolutionSummaries.length ? `
+      ${renderCollapsibleSection('Resolutions <span class="inspector-soon-badge">Coming soon</span>', `${resolutionSummaries.length ? `
           <div class="inspector-goal-rings">
             ${resolutionSummaries.slice(0, 12).map((summary) => {
       const percent = Math.max(0, Math.min(100, Number(summary.percent || 0)));
@@ -2355,6 +2355,20 @@ export function Inspector() {
       .inspector-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--chronos-text-muted, #9aa4b7); margin-bottom: 10px; }
       .inspector-collapsible > .inspector-section-title { margin-bottom: 0; cursor: pointer; list-style: none; user-select: none; }
       .inspector-collapsible > .inspector-section-title::-webkit-details-marker { display: none; }
+      .inspector-soon-badge {
+        display: inline-flex;
+        align-items: center;
+        margin-left: 8px;
+        padding: 2px 7px;
+        border-radius: 999px;
+        background: rgba(122, 162, 247, 0.14);
+        border: 1px solid rgba(122, 162, 247, 0.26);
+        color: var(--chronos-accent, #7aa2f7);
+        font-size: 10px;
+        font-weight: 700;
+        letter-spacing: 0.04em;
+        text-transform: uppercase;
+      }
       .inspector-collapsible > .inspector-section-title::after {
         content: '+';
         float: right;

utilities/dashboard/views/tracker/index.js

@@ -340,20 +340,25 @@ export function mount(el) {
         const known = state.dayStates[key];
         let cls = 'tracker-day';
         let inner = String(day);
+        let tooltip = key;
         if (future) {
           cls += ' future';
         } else if (!known) {
           cls += ' unknown';
           inner = `<span class="tracker-qmark">?</span>`;
+          tooltip = `No data logged for ${key}. This day has not been marked yet.`;
         } else if (known.state === 'done') {
           cls += ` done${badContext ? ' bad' : ''}`;
+          tooltip = `${key}: marked ${badContext ? 'bad' : 'done'}.`;
         } else if (known.state === 'not_done') {
           cls += ` not-done${badContext ? ' good' : ''}`;
+          tooltip = `${key}: marked ${badContext ? 'clean' : 'not done'}.`;
         } else {
           cls += ' unknown';
           inner = `<span class="tracker-qmark">?</span>`;
+          tooltip = `No data logged for ${key}. This day has not been marked yet.`;
         }
-        dayCells.push(`<div class="${cls}" title="${escapeHtml(key)}">${inner}</div>`);
+        dayCells.push(`<div class="${cls}" title="${escapeHtml(tooltip)}">${inner}</div>`);
       }
 
       card.innerHTML = `

utilities/dashboard/widgets/achievements/index.js

@@ -68,7 +68,21 @@ export function mount(el) {
       .ac-head { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:nowrap; cursor:pointer; }
       .ac-name { font-size:15px; font-weight:700; }
       .ac-pill { padding:2px 10px; border-radius:999px; font-size:11px; text-transform:uppercase; letter-spacing:0.05em; }
-      .ac-pill.pending { background:rgba(122,162,247,0.15); color:#7aa2f7; }
+      .ac-pill.icon {
+        width:28px;
+        height:28px;
+        padding:0;
+        display:inline-flex;
+        align-items:center;
+        justify-content:center;
+        font-size:15px;
+        font-weight:700;
+        letter-spacing:0;
+        text-transform:none;
+        border:1px solid rgba(255,255,255,0.08);
+        box-shadow:inset 0 0 0 1px rgba(255,255,255,0.02);
+      }
+      .ac-pill.pending { background:rgba(201,167,75,0.16); color:#f0c96c; }
       .ac-pill.awarded { background:rgba(91,220,130,0.18); color:#5bdc82; }
       .ac-pill.archived { background:rgba(239,106,106,0.18); color:#ef6a6a; }
       .ac-meta { font-size:12px; color:var(--text-dim); }
@@ -429,8 +443,19 @@ export function mount(el) {
       name.className = 'ac-name';
       name.textContent = expandText(itemName);
       const pill = document.createElement('div');
+      const stateLabel = state.charAt(0).toUpperCase() + state.slice(1);
       pill.className = `ac-pill ${state}`;
-      pill.textContent = state.charAt(0).toUpperCase() + state.slice(1);
+      pill.setAttribute('aria-label', stateLabel);
+      pill.title = stateLabel;
+      if (state === 'awarded') {
+        pill.classList.add('icon');
+        pill.textContent = '✓';
+      } else if (state === 'pending') {
+        pill.classList.add('icon');
+        pill.textContent = '⌛';
+      } else {
+        pill.textContent = stateLabel;
+      }
       headLeft.append(expander, name);
 
       const actions = document.createElement('div');