Add Team Lead Risk Overview UI

css/simba.css

@@ -1027,6 +1027,9 @@
   .w-\[30px\] {
     width: 30px;
   }
+  .w-\[30rem\] {
+    width: 30rem;
+  }
   .w-\[120px\] {
     width: 120px;
   }
@@ -1123,6 +1126,9 @@
   .min-w-40 {
     min-width: calc(var(--spacing) * 40);
   }
+  .min-w-44 {
+    min-width: calc(var(--spacing) * 44);
+  }
   .min-w-45 {
     min-width: calc(var(--spacing) * 45);
   }
@@ -1443,6 +1449,9 @@
   .gap-x-5 {
     column-gap: calc(var(--spacing) * 5);
   }
+  .gap-x-6 {
+    column-gap: calc(var(--spacing) * 6);
+  }
   .gap-x-8 {
     column-gap: calc(var(--spacing) * 8);
   }
@@ -2152,6 +2161,9 @@
   .pt-0\.5 {
     padding-top: calc(var(--spacing) * 0.5);
   }
+  .pt-1 {
+    padding-top: calc(var(--spacing) * 1);
+  }
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
@@ -2345,6 +2357,9 @@
   .text-nowrap {
     text-wrap: nowrap;
   }
+  .break-words {
+    overflow-wrap: break-word;
+  }
   .whitespace-normal {
     white-space: normal;
   }
@@ -2660,6 +2675,9 @@
   .\[--placement\:bottom-right\] {
     --placement: bottom-right;
   }
+  .\[--placement\:right-end\] {
+    --placement: right-end;
+  }
   .\[--placement\:right\] {
     --placement: right;
   }
@@ -2675,6 +2693,9 @@
   .\[--strategy\:static\] {
     --strategy: static;
   }
+  .\[--trigger\:click\] {
+    --trigger: click;
+  }
   .\[--trigger\:focus\] {
     --trigger: focus;
   }
@@ -3479,6 +3500,12 @@
       background-color: var(--color-stone-800);
     }
   }
+  .after\:bg-stone-900 {
+    &::after {
+      content: var(--tw-content);
+      background-color: var(--color-stone-900);
+    }
+  }
   .after\:bg-transparent {
     &::after {
       content: var(--tw-content);
@@ -5970,6 +5997,11 @@
       color: var(--color-neutral-800);
     }
   }
+  .dark\:text-neutral-900 {
+    &:where(.dark, .dark *) {
+      color: var(--color-neutral-900);
+    }
+  }
   .dark\:text-orange-400 {
     &:where(.dark, .dark *) {
       color: var(--color-orange-400);
@@ -6222,6 +6254,14 @@
       }
     }
   }
+  .dark\:after\:bg-white {
+    &:where(.dark, .dark *) {
+      &::after {
+        content: var(--tw-content);
+        background-color: var(--color-white);
+      }
+    }
+  }
   .dark\:first\:border-transparent {
     &:where(.dark, .dark *) {
       &:first-child {

docs/superpowers/specs/2026-04-09-team-lead-risk-batch-ui-design.md

@@ -0,0 +1,248 @@
+# Team Lead Dashboard UI Design (Simba)
+
+Date: 2026-04-09  
+Scope: UI design only (no backend contracts, no threshold locking)
+
+## Context
+
+Existing Team Lead capabilities:
+- Mentor Performance dashboard
+- Mentor detail view
+- Assigned mentors view
+- Student detail page
+
+New UI design scope:
+1. Batch Performance page
+2. Risk Overview page (Mentors / Batches / Students at risk)
+3. Drill-down and action interaction flows
+
+Primary goal:
+- Help Team Leads identify issues fast and trigger mentor follow-up with minimal friction.
+
+Constraints:
+- Simple UI, minimal charts
+- Deterministic explanation in UI language
+- No alerting system in this phase
+- Must remain scannable at scale (1000+ students, 50+ mentors)
+
+## Scope Boundaries
+
+This document intentionally finalizes only UI structure and behavior.
+
+### In scope
+- Information architecture
+- Table and card layouts
+- Column definitions and visual priority
+- Reason tag placement and ordering
+- Drill-down interactions and action placement
+- Empty/loading/feedback states
+
+### Out of scope (placeholders)
+- Risk threshold values
+- Priority formulas
+- API contracts
+- Follow-up trigger backend behavior and SLA logic
+- Bucket definitions and scoring internals
+
+## Design Principles
+
+- Action-first over analytics-heavy
+- Explain "why" in-row via reason tags
+- Keep intervention count ("Needs Follow-up") visually primary
+- Preserve consistency across Mentor/Batch/Student views
+- Optimize for under-10-second scanability
+
+## Risk Overview (UI-Only)
+
+### Purpose
+Single prioritized workspace to answer:
+1) who needs attention, 2) why, 3) what to do now.
+
+### Structure
+- Page title: `Risk Overview`
+- Tabs: `Mentors | Batches | Students`
+- Controls row:
+  - Search
+  - Status filter (`Healthy`, `Needs Attention`, `Critical`)
+  - Reason tag filter (`Low Attempt`, `No Follow-up`, `Low Scores`, `Declining`)
+  - Sort selector (default `Priority`, optional overrides)
+
+### Table Columns
+- `Entity` (with contextual subtitle)
+  - Mentors tab: Mentor name (+ optional assigned batch count)
+  - Batches tab: Batch name + mentor name
+  - Students tab: Student name + batch name
+- `Status`
+- `At-Risk Students`
+- `Needs Follow-up` (primary action driver, visually emphasized)
+- `Reason Tags` (max 2 inline + `+N`)
+- `Priority` (label only: High/Medium/Low)
+- `Action`
+
+### Required Clarifications
+- `At-Risk Students` = all students contributing to risk context
+- `Needs Follow-up` = subset requiring immediate intervention
+- Add subtle helper tooltip to reinforce distinction
+
+### Reason Tag Rules (UI)
+- Tag order is deterministic:
+  1. `No Follow-up`
+  2. `Low Attempt`
+  3. `Low Scores`
+  4. `Declining`
+- Show highest-priority tags first when truncating
+- Use same style and ordering in all pages
+
+### Action Column Behavior
+- If `Needs Follow-up > 0`: show `Trigger follow-up`
+- If `Needs Follow-up = 0`: show fallback detail action (`View students` preferred, `View details` allowed by tab context)
+- Do not use disabled action buttons
+- Edge case handling: if `Status = Critical` and `Needs Follow-up = 0`, still show fallback detail action and keep row highlighted as critical
+
+### Row Click Behavior
+- Entire row is navigable to details
+- Action button click must not trigger row navigation
+- Event behavior requirement:
+  - Row click -> navigate
+  - Button click -> action only
+
+### Priority Presentation
+- Keep Priority visible but visually secondary to `Needs Follow-up`
+- No formula or numeric score exposed in this phase
+- Optional tooltip copy:
+  - "Priority combines severity, impact, and urgency"
+
+### Empty and Loading States
+- Empty:
+  - "All clear - no entities currently need intervention"
+- Loading:
+  - Skeleton table rows
+  - Filters temporarily disabled during load
+  - Avoid layout shift
+
+### State Persistence
+- Preserve tab/filter/sort/scroll in Risk Overview URL/state
+- Scope persistence only within Risk Overview
+- Do not carry Risk Overview filters into Mentor/Batch/Student detail pages
+
+## Batch Performance (UI-Only)
+
+### Purpose
+Batch-level intervention page to show health, reasons, and follow-up workload.
+
+### Header and Actions
+- Header context line:
+  - `Batch Name • Mentor Name • Active Students`
+- Header actions:
+  - Show `Trigger follow-up` only when `Needs Follow-up > 0`
+  - Always keep secondary actions (e.g., `View mentor`, `View students`)
+  - Do not replace primary action slot with unrelated CTA when no follow-up is needed
+
+### Top Summary Cards
+- `Status` (`Healthy`, `Needs Attention`, `Critical`)
+- `At-Risk Students`
+- `Needs Follow-up` (strongest visual emphasis)
+- `Reasons` (formerly "Reason Snapshot")
+
+### Student Distribution Block
+- Segmented distribution with counts:
+  - `Healthy`
+  - `Needs Attention`
+  - `Critical`
+- Interaction:
+  - Single-select segment filter only (one active at a time)
+  - Provide explicit reset state: `All students`
+  - Clicking segment filters student list below
+  - Persist selected segment while staying on Batch Performance
+  - Reset to `All students` when explicitly cleared or when entering a different batch
+
+### Core Metrics (Disciplined)
+- Insight line (short, always visible):
+  - One-sentence summary explaining why the batch is currently at risk (e.g., "Risk driven mainly by No Follow-up and Low Attempt in last period")
+- Attempt trend with explicit direction:
+  - e.g., arrow or delta format (`-12% vs baseline`)
+- Academic signal (simple, single primary indicator)
+  - `Low-score %` or `Median score band` (one at a time in UI)
+- Follow-up coverage with clear definition tooltip
+- Do not duplicate `Needs Follow-up` in this section (already in summary cards)
+
+### Students Needing Follow-up Panel
+- Compact list/table:
+  - Student
+  - Context
+  - Reason tags
+  - Single affordance: `View student`
+- Row itself clickable for fast navigation
+- Empty state:
+  - "No students currently need follow-up"
+  - Optional: "You're on track - no immediate action required"
+
+### Consistency Requirements
+- Same status labels/colors as Risk Overview
+- Same reason tag style and ordering
+- Same terminology across pages
+
+## Interaction Flows
+
+### Drill-down Paths
+- Risk Overview -> Mentor row -> Mentor Performance
+- Risk Overview -> Batch row -> Batch Performance
+- Risk Overview -> Student row -> Student Detail
+- Batch Performance -> student row -> Student Detail
+
+### Follow-up Action Surface (UI behavior only)
+- Available in:
+  - Risk Overview row action
+  - Batch Performance header action
+- Confirm interaction:
+  - Lightweight modal with concise copy
+  - Explicit impacted count in copy (e.g., "This will initiate follow-up for 14 students currently needing follow-up")
+  - Keyboard-friendly dismissal/confirmation
+  - Minimal click friction for repeated use
+
+### Post-Action Feedback (UI only)
+- Success toast:
+  - "Follow-up initiated"
+- Immediate UI feedback to prevent ambiguity:
+  - Optimistically update `Needs Follow-up` count, or
+  - Show subtle "Updated just now" indicator
+
+### Scroll and State Restoration
+- Returning to Risk Overview restores:
+  - active tab
+  - filters
+  - sort
+  - scroll position
+
+## What Not to Build in UI Phase
+
+- Formula visualizers or score explainers tied to locked math
+- Threshold tuning controls
+- Alert center/toast flood patterns
+- Multi-chart analytics-heavy layouts
+- Divergent terminology across pages
+
+## High-Impact UI Improvements (Phase-ready)
+
+1. Keep `Needs Follow-up` as the visual and interaction anchor in all risk tables.
+2. Make reason tags visible and deterministic to answer "why" without extra clicks.
+3. Add single-click drill-down paths and preserve list state on return.
+4. Use segment-driven filtering on Batch Performance for rapid triage.
+5. Provide optimistic post-action feedback so users trust that action succeeded.
+
+## Open Placeholders for Next Phase
+
+To be finalized after UI validation:
+- Exact rule conditions and thresholds
+- Priority computation internals
+- API payloads/contracts
+- Follow-up trigger backend semantics and SLA windows
+
+## UI Validation Checklist
+
+- Can a Team Lead identify the top intervention target in under 10 seconds?
+- Is `Needs Follow-up` always obvious and actionable?
+- Is "why at risk" understandable from visible tags alone?
+- Are row/action clicks conflict-free?
+- Are back-navigation state and scroll restored reliably?
+- Are empty/loading states stable and reassuring?