# Audit Analytics Dashboard Improvements

## Issues Identified
1. "Decisions over time" chart broken - groups by hour-of-day (0:00-23:00) across all 30 days
2. Too granular - hourly data not useful for 30-day period
3. Missing service health dashboard
4. Missing long-term violations view
5. Too much focus on recent decisions list

## Proposed Changes

### 1. Add Service Health (24h) Section
**Location:** Between service chart and timeline chart
**Purpose:** Show which services are healthy (allowed, no violations) in last 24 hours

**HTML to add:**
```html
<!-- Service Health (24h) -->
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-8">
  <h3 class="text-lg font-semibold text-gray-900 mb-4">Service Health (Last 24 Hours)</h3>
  <div id="service-health-24h" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <!-- Will be populated by JS -->
  </div>
</div>
```

**JavaScript function needed:**
- `renderServiceHealth24h()` - filter last 24h, group by service, show allowed counts + violations
- Green background if no blocks/violations, red if issues
- Show: Service name, ✓ or ⚠ icon, Allowed count, Blocked count (if > 0), Violations count (if > 0)

### 2. Add Violations & Blocks (7 days) Section
**Location:** After service health, before timeline
**Purpose:** Long-term view of violations and blocks

**HTML to add:**
```html
<!-- Violations & Blocks (7 days) -->
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-8">
  <h3 class="text-lg font-semibold text-gray-900 mb-4">Violations & Blocks (Last 7 Days)</h3>
  <div id="violations-7days" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
    <!-- Will be populated by JS -->
  </div>
</div>
```

**JavaScript function needed:**
- `renderViolations7days()` - filter last 7 days, group by day, show blocks + violations per day
- Red background for days with violations
- Green message if zero violations: "✓ No violations or blocks in the last 7 days"
- Show: Day label, event count, blocks count, violations count, services involved

### 3. Fix Timeline Chart with Tabs
**Location:** Existing timeline chart
**Purpose:** Replace broken hourly view with useful time bucketing

**HTML to modify:**
```html
<!-- Timeline Chart -->
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-8">
  <div class="flex items-center justify-between mb-4">
    <h3 class="text-lg font-semibold text-gray-900">Decisions Over Time</h3>
    <div class="flex gap-2">
      <button data-timeline-mode="6hourly" onclick="switchTimelineMode('6hourly')"
              class="px-3 py-1 text-sm rounded bg-gray-200 text-gray-700">
        6-Hourly (24h)
      </button>
      <button data-timeline-mode="daily" onclick="switchTimelineMode('daily')"
              class="px-3 py-1 text-sm rounded bg-purple-600 text-white">
        Daily (7d)
      </button>
      <button data-timeline-mode="weekly" onclick="switchTimelineMode('weekly')"
              class="px-3 py-1 text-sm rounded bg-gray-200 text-gray-700">
        Weekly (4w)
      </button>
    </div>
  </div>
  <div id="timeline-chart" class="chart-container">
    <!-- Chart will be rendered here -->
  </div>
</div>
```

**JavaScript changes:**
- Add `let timelineMode = 'daily';` at top
- Replace `renderTimelineChart()` to support 3 modes:
  - **6-hourly (24h):** 4 buckets (0-6h, 6-12h, 12-18h, 18-24h ago)
  - **Daily (7d):** 7 buckets (last 7 days, labeled "Jan 1", "Jan 2", etc.)
  - **Weekly (4w):** 4 buckets (Week 1, Week 2, Week 3, Week 4)
- Add `switchTimelineMode(mode)` function to toggle between modes
- Fix bar chart to show actual dates/time ranges, not hours-of-day

### 4. Remove or Simplify Recent Decisions Table
**Current:** Shows 50 recent decisions with full details
**Proposed:** Either remove entirely or reduce to 10 rows (less focus on individual decisions, more on patterns)

## Implementation Priority
1. Fix timeline chart (critical - currently broken)
2. Add service health 24h (high value)
3. Add violations 7 days (high value)
4. Simplify/remove recent decisions table (cleanup)

## Key Design Goals
- **Service Health:** Quick status check - which services are working correctly?
- **Violations:** Long-term tracking - any patterns in violations/blocks?
- **Timeline:** Useful time bucketing - how is usage changing over time?
- **Less detail noise:** Remove granular recent decisions list, focus on aggregate patterns

## Example Data Flow

**Service Health (24h):**
```
ContextPressureMonitor: ✓ Allowed: 45
BoundaryEnforcer: ✓ Allowed: 32
CrossReferenceValidator: ⚠ Allowed: 12, Violations: 3
```

**Violations (7 days):**
```
Fri, Oct 25: 2 blocks, 5 violations (BoundaryEnforcer, CrossReferenceValidator)
Thu, Oct 24: 0 blocks, 1 violation (MetacognitiveVerifier)
[other days with no violations not shown]
```

**Timeline (Daily 7d):**
```
Bar chart showing:
Oct 19: 45 decisions
Oct 20: 52 decisions
Oct 21: 38 decisions
...
Oct 25: 67 decisions
```

## CSP Compliance
- All styles via Tailwind classes (no inline styles)
- onclick handlers for timeline mode buttons only (simple, CSP-safe)
- All rendering via innerHTML (no eval/Function)

## Next Steps
1. Update audit-analytics.html with new HTML sections
2. Add new JavaScript functions
3. Update renderDashboard() to call new functions
4. Test with real audit data
5. Deploy to production