prd.txt

<PRD>

# GENIE: Intelligent Campus Dashboard — Product Requirements Document

**Version:** 1.0  
**Date:** January 24, 2026  
**Status:** Hackathon MVP Specification  
**Author:** Product Management Team  

---

## 1. Introduction

### 1.1 Purpose of this document

This Product Requirements Document (PRD) defines the functional and technical specifications for GENIE, an intelligent campus dashboard designed for IIIT students. This document serves as the primary reference for development, design, and testing activities during the hackathon MVP phase. It outlines the core features, user stories, acceptance criteria, and technical requirements necessary to deliver a functional prototype within 24 hours.

### 1.2 Document scope

This PRD covers the minimum viable product (MVP) scope for the hackathon, focusing on delivering a modular widget-based dashboard with context-aware AI capabilities powered by a Retrieval-Augmented Generation (RAG) pipeline. Post-MVP features and enterprise integrations are explicitly marked as out of scope.

### 1.3 Background

IIIT students currently navigate multiple disconnected platforms to access their schedule, campus events, faculty information, and research opportunities. GENIE aims to unify these experiences into a single, intelligent start page that combines real-time information widgets with an AI assistant capable of answering research-related queries using institutional knowledge.

---

## 2. Product overview

### 2.1 Product vision

GENIE is a personalized, AI-enhanced campus dashboard that serves as the unified digital hub for IIIT students. By combining modular information widgets with a context-aware chatbot, GENIE reduces friction in accessing campus information and helps students discover research opportunities aligned with their interests.

### 2.2 Key value propositions

- **Unified access point:** Single dashboard replacing multiple bookmarks and logins
- **Real-time awareness:** Live updates on schedule, upcoming classes, and campus events
- **Intelligent discovery:** AI-powered faculty and lab recommendations based on research interests
- **Personalization:** Customizable widget subscriptions and persistent preferences
- **Trust and transparency:** Citation-backed AI responses grounded in institutional data

### 2.3 Success metrics (MVP)

- Functional prototype deployed within 24 hours
- Sub-2-second response time for AI queries
- Zero hallucinated faculty or lab recommendations
- Mobile-responsive interface across all widgets
- Persistent user preferences across sessions

---

## 3. Goals and objectives

### 3.1 Primary goals

1. **Deliver a working prototype** that demonstrates the core widget framework and AI chat functionality within hackathon time constraints
2. **Enable modular extensibility** through a widget architecture that supports future additions without code refactoring
3. **Provide trustworthy AI recommendations** using RAG to ground responses in verified IIIT faculty and lab data
4. **Create an intuitive user experience** with responsive design, skeleton loaders, and clear visual hierarchy

### 3.2 Secondary goals

1. Establish design patterns and component libraries for post-hackathon development
2. Validate technical feasibility of local vector database retrieval with acceptable latency
3. Gather implicit feedback on widget usefulness through usage patterns
4. Create a foundation for future authentication and backend integration

### 3.3 Non-goals (out of scope for MVP)

- Real authentication with IMS/Moodle systems
- Live grade synchronization or assignment tracking
- Multi-user backend with server-side persistence
- Community-driven content verification workflows
- Alumni network or mentorship features
- Mobile native applications (PWA only)

---

## 4. Target audience

### 4.1 Primary users

**IIIT Undergraduate and Graduate Students**
- Age range: 18-25 years
- Tech-savvy with high smartphone and laptop usage
- Active on campus with research interests in computer science, AI, and related fields
- Need quick access to schedule, events, and faculty information throughout the day

### 4.2 User personas

**Persona 1: Research-Oriented Undergraduate (Arjun)**
- 3rd year B.Tech student exploring ML research opportunities
- Wants to identify faculty whose work aligns with his interests in NLP
- Checks schedule multiple times daily, attends seminars and talks
- Prefers dark mode interfaces, uses laptop and phone interchangeably

**Persona 2: Course-Focused Graduate Student (Priya)**
- 1st year M.Tech student managing heavy course load
- Needs reliable class reminders and venue information
- Interested in campus events for networking
- Values clean, distraction-free interfaces with essential information

### 4.3 User environment

- **Devices:** Desktop/laptop (primary), smartphones (secondary), tablets (occasional)
- **Browsers:** Chrome, Firefox, Safari, Edge
- **Network:** Campus WiFi (high-speed), mobile data (variable)
- **Usage contexts:** Between classes, in dorm rooms, during commute, in labs

---

## 5. Features and requirements

### 5.1 Widget framework and dashboard

**FR-101: Modular widget architecture**
- The system shall render widgets in a responsive grid layout that adapts to screen size
- Widgets shall be independently loadable, updatable, and removable without affecting other widgets
- Each widget shall have its own loading, error, and empty states

**FR-102: Widget subscription management**
- The system shall provide a modal interface for toggling widget subscriptions on/off
- Widget visibility preferences shall persist across sessions using localStorage
- The system shall support a minimum of 5 concurrent active widgets without performance degradation

**FR-103: Responsive layout behavior**
- Desktop (≥1024px): Multi-column grid with 2-3 widgets per row
- Tablet (768-1023px): Two-column layout with appropriate spacing
- Mobile (<768px): Single-column vertical stack with full-width widgets

**FR-104: Loading and skeleton states**
- The system shall display skeleton loaders for each widget while data is being fetched
- Skeleton loaders shall visually approximate the final widget structure
- Loading states shall timeout after 10 seconds and display error messages

### 5.2 Timetable widget (next class)

**FR-201: Schedule data integration**
- The widget shall fetch schedule data from `/api/schedule` endpoint
- Data structure shall include: course name, venue, start time, end time, instructor
- The system shall handle schedule data for current day and next 7 days

**FR-202: Next class display**
- The widget shall identify and display the immediate next scheduled class
- Display shall include: course name, venue, start time
- If no classes remain today, the widget shall show "No more classes today" message

**FR-203: Time progress indicator**
- The widget shall show a visual progress bar indicating time until class starts
- Progress calculation: time_remaining / total_gap_since_previous_class
- The widget shall update the time remaining automatically every 60 seconds

**FR-204: Edge case handling**
- No classes scheduled: Display "No classes scheduled" with calendar icon
- Weekend/holiday: Display appropriate message
- Past classes: Exclude from "next class" calculation

### 5.3 Campus events widget

**FR-301: Events data integration**
- The widget shall fetch events data from `/api/events` endpoint
- Event data shall include: title, date, time, venue, description, category
- The system shall display events chronologically starting from current date

**FR-302: Events list display**
- The widget shall show a scrollable list of upcoming events (maximum 10 visible)
- Each event shall display: date badge, title, and time
- The widget shall support infinite scroll or "Load More" for additional events

**FR-303: Date formatting and grouping**
- Dates shall be formatted as "MMM DD" (e.g., "Jan 24")
- Events shall be grouped by date with visual separators
- Today's events shall be highlighted with distinct styling

### 5.4 AI chat interface

**FR-401: Chat UI components**
- The system shall provide a chat input field with send button
- The system shall display messages in a scrollable conversation area
- User messages shall be right-aligned with distinct background color
- AI messages shall be left-aligned with different styling

**FR-402: Markdown rendering**
- AI responses shall support markdown formatting: **bold**, *italic*, lists, links
- Code blocks and inline code shall be styled with monospace font
- Links shall be clickable and open in new tabs

**FR-403: Typing indicator**
- The system shall show animated dots while AI is generating a response
- The indicator shall appear immediately after user sends a message
- The indicator shall disappear when the full response is received

**FR-404: Sources and citations**
- The system shall display source references as styled chips/tags below AI responses
- Each source chip shall show: document title or faculty name
- Clicking a source chip shall display additional metadata (optional for MVP)

**FR-405: Chat persistence**
- Chat history shall persist across page navigation within the same session
- The system shall maintain conversation context for follow-up questions
- Chat history shall be stored in a global Svelte store

### 5.5 Context-aware AI (RAG pipeline)

**FR-501: Data ingestion and indexing**
- The system shall ingest curated IIIT faculty profiles and lab descriptions
- Each document shall include metadata: faculty name, research interests, lab affiliation, email, source URL
- The system shall generate vector embeddings for each document using a local embedding model
- Embeddings shall be stored in a vector database (e.g., ChromaDB, Qdrant)

**FR-502: Query processing**
- The system shall accept natural language queries about research interests, faculty expertise, or lab work
- User queries shall be converted to vector embeddings using the same model
- The system shall perform similarity search to retrieve top-k most relevant documents (k=5)

**FR-503: Response generation**
- The system shall use retrieved documents as context for LLM response generation
- The LLM shall generate responses grounded only in provided context documents
- The system shall not generate information about faculty or labs not present in retrieved documents

**FR-504: Citation mechanism**
- The system shall extract and return source documents used in response generation
- Each citation shall include: source type (faculty profile/lab page), name/title, URL
- Citations shall be displayed with corresponding response text

**FR-505: Hallucination prevention**
- The system shall explicitly instruct the LLM to only use provided context
- If no relevant documents are found, the system shall respond: "I couldn't find information about that in the IIIT database"
- The system shall not make up faculty names, research areas, or lab details

### 5.6 Theme and personalization

**FR-601: Dark mode support**
- The system shall support a dark theme using a "Midnight" color palette
- The dark mode toggle shall be accessible from the dashboard header
- Theme preference shall persist across sessions using localStorage

**FR-602: Color palette consistency**
- Primary colors: Deep blue/purple tones for accents
- Background: Near-black (#0a0a0f) with subtle gradients
- Text: High-contrast white/off-white for readability
- Surface colors: Dark grays (#1a1a24) for cards and widgets

**FR-603: Typography and spacing**
- Font family: System font stack with sans-serif fallback
- Base font size: 16px with responsive scaling
- Line height: 1.5 for body text, 1.2 for headings
- Consistent spacing scale: 4px, 8px, 16px, 24px, 32px, 48px

### 5.7 State management

**FR-701: LocalStorage persistence**
- The system shall store the following in localStorage:
  - Active widget subscriptions (array of widget IDs)
  - Dark mode preference (boolean)
  - Last known widget data (for offline fallback)
- The system shall validate and sanitize all localStorage data on read

**FR-702: Global state stores**
- Chat history shall be managed via a Svelte writable store
- Widget visibility shall be managed via a derived store from localStorage
- The system shall provide reactive updates when state changes

---

## 6. User stories and acceptance criteria

### 6.1 Dashboard and widgets

**ST-101: View personalized dashboard**
- **As a** student
- **I want to** see my personalized dashboard with selected widgets
- **So that** I can quickly access the information most relevant to me

**Acceptance criteria:**
- Given I am a logged-in student, when I load the dashboard, then I see all my subscribed widgets arranged in a responsive grid
- Given I have no subscribed widgets, when I load the dashboard, then I see a welcome message and prompt to subscribe to widgets
- Given I am on a mobile device, when I load the dashboard, then widgets stack vertically in a single column

---

**ST-102: Subscribe to widgets**
- **As a** student
- **I want to** select which widgets appear on my dashboard
- **So that** I can customize my experience based on my needs

**Acceptance criteria:**
- Given I click the "Manage Widgets" button, when the modal opens, then I see a list of all available widgets with on/off toggles
- Given I toggle a widget on, when I save and close the modal, then the widget appears on my dashboard
- Given I toggle a widget off, when I save, then the widget is removed from my dashboard
- Given I refresh the page, when the dashboard loads, then my widget preferences are preserved

---

**ST-103: View next scheduled class**
- **As a** student
- **I want to** see my next upcoming class with time remaining
- **So that** I don't miss classes and can plan my time accordingly

**Acceptance criteria:**
- Given I have classes scheduled today, when I view the timetable widget, then I see my next class with course name, venue, and start time
- Given my next class is in 30 minutes, when I view the widget, then I see "Starts in 30 min" with a progress bar
- Given I have no more classes today, when I view the widget, then I see "No more classes today"
- Given it's the weekend, when I view the widget, then I see "No classes scheduled"
- Given the time updates, when 60 seconds pass, then the time remaining automatically updates without page refresh

---

**ST-104: View campus events**
- **As a** student
- **I want to** see upcoming campus events
- **So that** I can participate in talks, seminars, and activities

**Acceptance criteria:**
- Given there are upcoming events, when I view the events widget, then I see a scrollable list of events with dates and titles
- Given an event is today, when I view the widget, then that event has distinct highlighting
- Given there are no upcoming events, when I view the widget, then I see "No upcoming events"
- Given there are more than 10 events, when I scroll, then additional events load seamlessly

---

### 6.2 AI chat and research discovery

**ST-201: Ask about faculty research interests**
- **As a** student
- **I want to** ask the AI about faculty who work on specific research topics
- **So that** I can find potential research advisors aligned with my interests

**Acceptance criteria:**
- Given I type "Who works on natural language processing?", when I send the message, then the AI responds with relevant faculty names and their NLP research areas
- Given the AI provides a recommendation, when I view the response, then I see source citations linking to faculty profile pages
- Given no faculty match my query, when I ask about an unavailable topic, then the AI responds "I couldn't find information about that in the IIIT database"
- Given I ask a follow-up question, when I send it, then the AI maintains context from previous messages

---

**ST-202: View AI response with citations**
- **As a** student
- **I want to** see sources cited in AI responses
- **So that** I can verify information and explore references further

**Acceptance criteria:**
- Given the AI mentions a faculty member, when the response is displayed, then I see a source chip showing the faculty name
- Given there are multiple sources, when I view the response, then all relevant sources are shown as separate chips
- Given I see a source chip, when I click it (optional for MVP), then additional metadata is displayed

---

**ST-203: Experience conversational AI interaction**
- **As a** student
- **I want to** have a natural conversation with the AI
- **So that** I can refine my search and get better recommendations

**Acceptance criteria:**
- Given I send a message, when the AI is generating, then I see an animated typing indicator
- Given the AI responds, when I view the message, then formatting (bold, lists) is properly rendered
- Given I navigate away and return, when I open the chat, then my conversation history is preserved
- Given I send a vague query, when the AI responds, then it asks clarifying questions if needed

---

**ST-204: Discover labs and research groups**
- **As a** student
- **I want to** learn about research labs at IIIT
- **So that** I can understand what projects they work on and how to get involved

**Acceptance criteria:**
- Given I ask "What labs work on computer vision?", when the AI responds, then I see lab names with descriptions of their CV work
- Given the AI mentions a lab, when I view the response, then I see source citations linking to lab pages
- Given I ask about a lab's recent work, when the AI responds, then information is grounded in indexed lab data

---

### 6.3 Responsive design and performance

**ST-301: Access dashboard on mobile**
- **As a** student
- **I want to** use GENIE on my smartphone
- **So that** I can check my schedule and events while on the move

**Acceptance criteria:**
- Given I open GENIE on a mobile browser, when the page loads, then all widgets display correctly in single-column layout
- Given I interact with the chat on mobile, when I type, then the keyboard doesn't obscure the input field
- Given I scroll through events on mobile, when I swipe, then scrolling is smooth without horizontal overflow

---

**ST-302: Experience fast loading times**
- **As a** student
- **I want to** see information load quickly
- **So that** I can access data without waiting

**Acceptance criteria:**
- Given I load the dashboard, when the page renders, then skeleton loaders appear within 100ms
- Given widgets are fetching data, when they complete, then content replaces skeletons within 2 seconds
- Given I send an AI query, when the response generates, then I receive an answer within 3 seconds
- Given a widget fails to load, when 10 seconds pass, then an error message is displayed

---

### 6.4 Theme and preferences

**ST-401: Enable dark mode**
- **As a** student
- **I want to** use a dark theme
- **So that** I can reduce eye strain during nighttime usage

**Acceptance criteria:**
- Given I click the dark mode toggle, when it activates, then the entire interface switches to dark colors
- Given I refresh the page, when it loads, then my dark mode preference is preserved
- Given I use dark mode, when viewing text, then contrast ratios meet accessibility standards (WCAG AA minimum)

---

**ST-402: Maintain preferences across sessions**
- **As a** student
- **I want to** have my settings remembered
- **So that** I don't need to reconfigure the dashboard each visit

**Acceptance criteria:**
- Given I have configured my widgets and theme, when I close and reopen the browser, then my preferences are preserved
- Given I clear my browser data, when I reload GENIE, then I see default settings
- Given localStorage is unavailable, when I use GENIE, then I see default settings without errors

---

### 6.5 Edge cases and error handling

**ST-501: Handle API failures gracefully**
- **As a** student
- **I want to** see meaningful error messages when data fails to load
- **So that** I understand what went wrong and can take action

**Acceptance criteria:**
- Given the schedule API is down, when the timetable widget loads, then I see "Unable to load schedule. Please try again later."
- Given the events API times out, when the events widget loads, then I see an error message with a retry button
- Given the AI service is unavailable, when I send a chat message, then I see "AI service is temporarily unavailable"

---

**ST-502: Handle empty data states**
- **As a** student
- **I want to** see informative messages when no data is available
- **So that** I understand the widget is working but there's simply nothing to display

**Acceptance criteria:**
- Given I have no classes scheduled, when I view the timetable widget, then I see "No classes scheduled" with an appropriate icon
- Given there are no upcoming events, when I view the events widget, then I see "No upcoming events. Check back later!"
- Given my AI query returns no results, when the response displays, then I see "I couldn't find information about that"

---

**ST-503: Handle network interruptions**
- **As a** student
- **I want to** still access cached information when offline
- **So that** I can view my last known schedule even without internet

**Acceptance criteria:**
- Given I viewed my schedule earlier, when I go offline and reload, then I see the last cached schedule data with an "offline" indicator
- Given I am offline, when I try to send a chat message, then I see "You appear to be offline. Please check your connection."
- Given my connection is restored, when widgets retry, then fresh data loads automatically

---

### 6.6 Authentication and session (MVP mock)

**ST-601: Access dashboard with mocked authentication**
- **As a** student in the MVP environment
- **I want to** access the dashboard without real login
- **So that** the team can demonstrate functionality during the hackathon

**Acceptance criteria:**
- Given I navigate to GENIE, when the page loads, then I am automatically "logged in" as a demo student
- Given I am using the MVP, when I view widgets, then data displayed is for a sample student profile
- Given this is the MVP, when I see the UI, then there is a note indicating "Demo Mode - Authentication coming soon"

---

### 6.7 Data persistence (MVP scope)

**ST-701: Maintain chat history during session**
- **As a** student
- **I want to** retain my conversation with the AI during my session
- **So that** I can refer back to previous recommendations

**Acceptance criteria:**
- Given I have a conversation with the AI, when I navigate to settings and back, then my chat history is preserved
- Given I send multiple messages, when I scroll up, then I can see all previous messages and responses
- Given I close the browser tab, when I reopen GENIE, then chat history is cleared (session-only for MVP)

---

## 7. Technical requirements and stack

### 7.1 Frontend framework

**Technology:** Svelte 4.x with SvelteKit
- **Rationale:** Lightweight, reactive framework with excellent performance and minimal bundle size
- **Routing:** SvelteKit file-based routing for dashboard and settings pages
- **State management:** Svelte stores (writable, readable, derived)
- **Build tool:** Vite for fast development and optimized production builds

### 7.2 Styling and UI

**Framework:** Tailwind CSS 3.x
- **Rationale:** Utility-first CSS for rapid prototyping with consistent design tokens
- **Configuration:** Custom color palette for "Midnight" theme
- **Components:** Custom reusable components (Button, Card, Modal, Skeleton)
- **Responsive:** Mobile-first approach with breakpoints at 640px, 768px, 1024px, 1280px

**Additional libraries:**
- **Markdown rendering:** `marked` or `markdown-it` for AI response formatting
- **Icons:** Lucide icons or Heroicons for consistent iconography

### 7.3 Backend and API

**Framework:** Node.js with Express or SvelteKit API routes
- **Rationale:** Simple REST API for widget data, leveraging SvelteKit's built-in API capabilities
- **Endpoints:**
  - `GET /api/schedule` - Returns student schedule data
  - `GET /api/events` - Returns campus events
  - `POST /api/chat` - Handles AI chat queries with RAG pipeline

**Data storage (MVP):**
- **Mock data:** JSON files for schedule and events
- **No database required:** All user preferences stored client-side in localStorage

### 7.4 AI and RAG pipeline

**Embedding model:** Sentence Transformers (e.g., `all-MiniLM-L6-v2`)
- **Rationale:** Fast, lightweight, runs locally without API costs
- **Dimensions:** 384-dimensional embeddings for balance of speed and accuracy

**Vector database:** ChromaDB or Qdrant (local instance)
- **Rationale:** Open-source, easy to set up, supports similarity search
- **Indexing:** Pre-index faculty and lab documents before deployment

**LLM:** Ollama with Llama 2 7B or Mistral 7B
- **Rationale:** Runs locally, no API rate limits, hackathon-friendly
- **Alternative:** OpenAI GPT-3.5 Turbo (if API keys available and acceptable)
- **Prompt engineering:** System prompt instructs LLM to only use provided context and cite sources

**RAG workflow:**
1. User sends query via `/api/chat` endpoint
2. Query is embedded using Sentence Transformers
3. Vector similarity search retrieves top 5 relevant documents from ChromaDB
4. Retrieved documents + user query sent to LLM with strict prompt
5. LLM generates response with citations
6. Response and sources returned to frontend

### 7.5 Development and deployment

**Version control:** Git with GitHub
- **Branch strategy:** `main` for stable code, `dev` for active development, feature branches for new widgets

**Package manager:** npm or pnpm
- **Scripts:** `npm run dev` (development server), `npm run build` (production build), `npm run preview` (preview build)

**Deployment (MVP):**
- **Platform:** Local deployment on organizer-provided machines or Vercel for quick hosting
- **Environment variables:** `.env` file for API keys (if needed), vector DB path, LLM model path

**Testing (minimal for hackathon):**
- **Manual testing:** Core user flows verified by team
- **Console error monitoring:** Ensure no critical errors in browser console

### 7.6 Performance requirements

**Frontend:**
- Initial page load: <2 seconds on 3G connection
- Time to interactive: <3 seconds
- Widget data fetch: <2 seconds per widget
- Smooth animations: 60fps on desktop, 30fps on mobile

**AI/RAG:**
- Query processing: <1 second (embedding + retrieval)
- LLM generation: <2 seconds for typical response
- Total chat latency: <3 seconds end-to-end

### 7.7 Browser and device support

**Browsers (latest 2 versions):**
- Chrome/Chromium
- Firefox
- Safari
- Edge

**Devices:**
- Desktop: 1920x1080 and 1366x768 resolutions
- Tablet: 768x1024 (iPad portrait/landscape)
- Mobile: 375x667 (iPhone SE), 414x896 (iPhone 11), 360x800 (Android)

**Accessibility:**
- Keyboard navigation for all interactive elements
- ARIA labels for screen readers (basic support)
- Color contrast ratios meeting WCAG AA standards

---

## 8. Design and user interface

### 8.1 Visual design principles

**Midnight theme aesthetic:**
- **Dark and sophisticated:** Deep blue-black backgrounds with subtle gradients
- **High contrast:** White text on dark surfaces for maximum readability
- **Accent colors:** Electric blue and purple highlights for interactive elements
- **Depth:** Subtle shadows and elevation to distinguish layers

**Typography hierarchy:**
- **Headings:** Bold, large font sizes with tight letter spacing
- **Body text:** Regular weight, 16px base, generous line height for readability
- **Metadata:** Smaller, muted text for secondary information

**Spacing and rhythm:**
- Generous whitespace between widgets to reduce visual clutter
- Consistent padding within widgets (16px mobile, 24px desktop)
- Align elements to an 8px grid for visual harmony

### 8.2 Component library

**Core components:**

**Button:**
- Variants: primary (filled), secondary (outlined), ghost (text only)
- States: default, hover, active, disabled, loading
- Sizes: small, medium, large

**Card:**
- Base widget container with rounded corners and subtle shadow
- Header section for widget title and actions
- Body section for main content
- Footer section for metadata or actions

**Modal:**
- Overlay with blur effect on background
- Centered dialog with close button
- Responsive: full-screen on mobile, centered on desktop

**Skeleton loader:**
- Animated gradient pulse effect
- Matches approximate shape of final content
- Consistent styling across all widgets

**Input field:**
- Rounded corners, focus ring on interaction
- Placeholder text with reduced opacity
- Error state with red border and message

### 8.3 Widget designs

**Timetable widget:**
- **Layout:** Card with gradient header showing "Next Class"
- **Content:**
  - Large course name in bold
  - Venue and time in smaller text below
  - Full-width progress bar at bottom showing time remaining
- **Color:** Progress bar uses accent blue gradient

**Events widget:**
- **Layout:** Card with scrollable content area
- **Content:**
  - Each event is a horizontal row with date badge on left, details on right
  - Date badges: Rounded squares with month/day in contrasting color
  - Event title in bold, time below in muted text
- **Scrolling:** Smooth vertical scroll with custom scrollbar styling

**Chat widget:**
- **Layout:** Full-height card with header, messages area, and input at bottom
- **Messages:**
  - User messages: Blue background, right-aligned, rounded bubble
  - AI messages: Dark gray background, left-aligned, rounded bubble
  - Markdown content rendered with proper spacing
  - Source chips: Small pills below AI messages in accent color
- **Input:** Fixed at bottom with send button, grows with multiline input

### 8.4 Responsive behavior

**Desktop (≥1024px):**
- Three-column grid for widgets
- Chat widget can occupy 1-2 columns depending on configuration
- Maximum content width: 1440px, centered

**Tablet (768-1023px):**
- Two-column grid
- Chat widget spans full width
- Reduced padding and font sizes

**Mobile (<768px):**
- Single column, full width
- Chat widget remains full width but input area sticks to bottom
- Hamburger menu for settings and widget management
- Collapsible widget headers to save space

### 8.5 Interaction patterns

**Loading states:**
- Skeleton loaders appear immediately on page load
- Smooth fade-in when real content replaces skeletons
- Spinner icon for inline loading (e.g., chat message sending)

**Error states:**
- Friendly error messages with icons
- Retry buttons where applicable
- Distinct red color for error backgrounds or borders

**Empty states:**
- Centered icon and text
- Call-to-action when relevant (e.g., "Subscribe to widgets")
- Light, friendly tone in messaging

**Transitions:**
- Modal slide-in from top with fade overlay
- Widget toggle animations (slide and fade)
- Smooth progress bar animation (linear gradient sweep)

### 8.6 Accessibility considerations

**Keyboard navigation:**
- Tab order follows logical flow (top to bottom, left to right)
- Focus indicators clearly visible on all interactive elements
- Enter key activates buttons, Escape closes modals

**Screen reader support:**
- ARIA labels on icon-only buttons
- Role attributes on custom components
- Alt text on images (if any)

**Color and contrast:**
- Text contrast: Minimum 4.5:1 for body text, 3:1 for large text
- Interactive elements have visible hover/focus states beyond color alone
- Error messages use icons in addition to color

### 8.7 Branding and personality

**Voice and tone:**
- Friendly and approachable, not overly formal
- Concise and informative
- Encouraging during errors or empty states

**Visual personality:**
- Modern and sleek, inspired by productivity tools like Notion or Linear
- Subtle sci-fi aesthetic with "intelligent assistant" feel
- Professional enough for academic context, but not boring

---

## 9. Appendices

### 9.1 Glossary

- **RAG (Retrieval-Augmented Generation):** AI technique that retrieves relevant documents before generating responses, grounding output in factual data
- **Widget:** Modular UI component displaying specific information (schedule, events, etc.)
- **Skeleton loader:** Placeholder UI shown while content is loading
- **Vector embedding:** Numerical representation of text that captures semantic meaning
- **ChromaDB:** Open-source vector database for storing and searching embeddings

### 9.2 References

- SvelteKit documentation: https://kit.svelte.dev/docs
- Tailwind CSS documentation: https://tailwindcss.com/docs
- ChromaDB documentation: https://docs.trychroma.com/
- Sentence Transformers: https://www.sbert.net/
- WCAG accessibility guidelines: https://www.w3.org/WAI/WCAG21/quickref/

### 9.3 Revision history

| Version | Date | Author | Changes |
|---------|------|--------|---------|
| 1.0 | Jan 24, 2026 | Product Team | Initial MVP specification for hackathon |

---

**Document End**

</PRD>