Prism-Notes-Main/logs/SESSION_LOG.txt

================================================================================
PRISM NOTES - SESSION LOG
Project history, decisions, and architectural milestones
================================================================================

[2026-01-14 16:30] ARCHITECTURE DECISION: Migrate to Vite Frontend + Bun Backend
- Decision: Adopt Vite as frontend bundler to enforce TypeScript everywhere
- Reasoning: Current .js tool deviation and CDN Tailwind are pragmatically expensive
  Triggers met: >5 tools, tools interact with PocketBase (type safety needed)
- Architecture (FINAL):
  * Backend: Bun + Hono (server.ts remains unchanged)
  * Frontend: TypeScript + Vite + PostCSS Tailwind
  * Tools: Convert to .ts, compiled by Vite bundler
  * Package Manager: Bun exclusively (one bun.lock, no npm/pnpm conflicts)
- Benefits:
  * Type safety everywhere (no vanilla JS)
  * HMR in dev (fast reloads <100ms)
  * Optimized bundles (minified, tree-shaken)
  * Tools scale cleanly as .ts modules
  * Removes CDN Tailwind and .js tool deviations
- Implementation Plan (Next Session):
  1. Setup Vite config + package.json scripts (~15 mins)
  2. Convert index.html to Vite entry point (~30 mins)
  3. Extract inline scripts to .ts modules (~1 hour)
  4. Convert all tools to .ts: screen-capture, screen-record, user-alert, user-email-lookup (~2 hours)
  5. Configure Tailwind with PostCSS for Vite (~15 mins)
  6. Update Monica persona (Bun backend + Vite frontend standard) (~20 mins)
  7. Clean DEVIATIONS.txt (remove CDN Tailwind, .js tools entries) (~10 mins)
  8. Test build pipeline and dev experience (~30 mins)
  Total: ~4-5 hours
- Current State:
  * User email lookup component created and integrated (NOT committed yet)
  * All other work committed and synced
  * Ready for Vite migration on next session
- Notes for Next Session:
  * Start with: `git status` to see uncommitted email-lookup work
  * Decide: Include email-lookup work in Vite migration OR commit first
  * Vite setup: Use `npm init vite@latest` as template, adapt to Bun
  * Key files to create: vite.config.ts, tailwind.config.js, postcss.config.js
  * Key files to convert: index.html → src/main.ts, all tools to .ts
  * Build commands: "build": "vite build", "dev": "bun run build && PORT=3030 bun run --watch server.ts"

[2026-01-14 16:00] MONICA SESSION: User Email Lookup Feature - New Standalone Component
- Feature Request: Add hover tooltips showing email addresses when hovering over names in sharing UI
- Architecture Decision: Created as standalone component in /tools/user-email-lookup/
  Reasoning: Self-contained, reusable utility with single responsibility (email lookup)
- Implementation:
  * Created /tools/user-email-lookup/index.js (window.setupUserEmailLookup API)
  * Created /tools/user-email-lookup/README.md (complete documentation)
  * Integrated into index.html noteForm and conversationForm
  * Uses existing Associations collection for first_name → email lookups
  * Implements email caching to minimize PocketBase queries
  * Uses MutationObserver for dynamic capsule detection
  * Shows email in native browser tooltip on hover
- Features:
  * On note creation, user types names (e.g., "John, Sarah, Mike")
  * Each name creates a capsule in selectedUsersContainer
  * Hovering over capsule shows email (first hover queries DB, subsequent cached)
  * Cache persists for page session, can be cleared via window.clearEmailLookupCache()
- Integration Points:
  * Script loaded: <script src="tools/user-email-lookup/index.js"></script>
  * Initialized: showNoteForm() and showConversationForm()
  * Container: #selectedUsersContainer (for both notes and conversations)
- Status: Implemented and integrated, NOT YET COMMITTED
- Note: Will be converted to .ts as part of Vite migration (next session)

[2026-01-14 15:45] MONICA SESSION: Standards Alignment Fixes
- Feature Request: Add hover tooltips showing email addresses when hovering over names in sharing UI
- Architecture Decision: Created as standalone component in /tools/user-email-lookup/
  Reasoning: Self-contained, reusable utility with single responsibility (email lookup)
- Implementation:
  * Created /tools/user-email-lookup/index.js (window.setupUserEmailLookup API)
  * Created /tools/user-email-lookup/README.md (complete documentation)
  * Integrated into index.html noteForm and conversationForm
  * Uses existing Associations collection for first_name → email lookups
  * Implements email caching to minimize PocketBase queries
  * Uses MutationObserver for dynamic capsule detection
  * Shows email in native browser tooltip on hover
- Features:
  * On note creation, user types names (e.g., "John, Sarah, Mike")
  * Each name creates a capsule in selectedUsersContainer
  * Hovering over capsule shows email (first hover queries DB, subsequent cached)
  * Cache persists for page session, can be cleared via window.clearEmailLookupCache()
- Integration Points:
  * Script loaded: <script src="tools/user-email-lookup/index.js"></script>
  * Initialized: showNoteForm() and showConversationForm()
  * Container: #selectedUsersContainer (for both notes and conversations)
- Status: Implemented and ready for testing
- Next: Test with real Associations data and refine if needed

[2026-01-14 15:45] MONICA SESSION: Standards Alignment Fixes
- Action: Addressed audit findings - minor alignment issues
- Fixes Applied:
  * Added DEVIATION entry for tool .js files (screen-capture, screen-record, user-alert)
    Reasoning: Standalone utilities with direct browser execution, not business logic
    Review date: 2026-03-01
  * Updated README.md: Fixed port references (5500 → 3030)
    Enforced port 3030 explicitly in documentation
  * Created tools/user-alert/README.md (was missing, had only index.js)
    Documentation: Features, usage, API, PocketBase schema, troubleshooting
  * Enhanced tool file comments:
    - screen-record/index.js: Added detailed @description, @usage, @dependencies, @integration
    - user-alert/index.js: Added detailed @description, @usage, @dependencies, @integration, @gotchas
  * Maintained screen-capture README.md (already present)
- Standards Violations Documented:
  * CDN Tailwind + Vanilla JS frontend → DEVIATIONS.txt (review 2026-02-14)
  * Tool files in .js → DEVIATIONS.txt (review 2026-03-01)
- Audit Status: All minor issues resolved
- Next: Frontend TypeScript + Bun build conversion deferred per user guidance

[2026-01-14 15:15] MONICA SESSION: Audit & Standards Enforcement Setup
- Action: Established formal audit process and standards compliance tracking
- Created logs/AUDIT_CHECKLIST.txt with 44 systematic compliance checks
- Created logs/DEVIATIONS.txt for quick-reference of non-standard but accepted deviations
- Updated git.instructions with:
  * RULE 8: User-controlled commits and syncs (no unprompted operations)
  * AUDIT PROCESS section: Mandatory at project start and before commits
  * COMPONENT-FIRST ARCHITECTURE: Evaluates new features for standalone component status
- Audit Result: 40 passes, 2 failures (both documented), 1 warning
- Findings:
  * package-lock.json present (npm violation of Bun-exclusive standard) — REMOVED
  * Vanilla JS frontend (documented deviation) — ACCEPTED
  * Tailwind CDN (documented deviation) — ACCEPTED
- Status: STANDARDS COMPLIANT after removal of npm lock file

[2026-01-11 TODO] Screen Capture Window Visibility Issue - INVESTIGATE LATER
- Issue: Prism Notes window still appears in getDisplayMedia() dialog options 
  even though visibility is hidden before dialog opens
- Attempted Fix: Used visibility:hidden on app elements before getDisplayMedia()
- Result: Not working - window still shows in screen selector
- Root Cause: Unclear - may be timing issue or browser caching of window list
- Workaround: User can manually select other screen/window instead
- Investigation Needed:
  * Try alternative hiding methods (display:none, opacity:0, positioning off-screen)
  * Check if timing delay needed before getDisplayMedia()
  * Verify with different browsers (Chrome vs Edge vs Firefox)
  * Consider if OS-level window management interferes
- Impact: Minor UX issue - doesn't prevent functionality, just less elegant
- Priority: LOW - defer until screen capture feature stabilized otherwise

[2026-01-10 20:10] MONICA SESSION: Fixed Container Injection Bug
- Issue: Refactor commit (cee9157) had CONTAINERS + initializeContainers() code
  but ALSO kept all old HTML in DOM, creating duplicates and preventing injection
- Root Cause: During refactor, old HTML wasn't removed before injection system added
- Fix Applied:
  * Removed all duplicate HTML container elements from DOM (login, notesList, 
    noteDetail, noteForm)
  * Restored CONTAINERS object with all 6 templates (login, notesList, noteDetail, 
    noteForm, conversationForm, conversationsList)
  * Restored initializeContainers() function to inject templates on page load
  * Called initializeContainers() BEFORE updateAuthUI() to ensure DOM ready
  * Added conversation feature support (was added in refactor, now working)
- Result: Page now dynamically injects all containers from template literals
- Status: Fixed and committed (c733930)
- Next: Verify rendering works correctly when accessing page

[2026-01-10 14:00] Container Refactoring: Template Literals (Option 1)
- Decision: Extracted all container HTML to template literals in index.html
- Reasoning: Allows independent container updates without touching markup
  Each container is now self-contained and versioned separately
- Implementation: 
  * Created CONTAINERS object with keys: login, notesList, noteDetail, noteForm, 
    conversationForm, conversationsList
  * Added initializeContainers() function that injects all templates on page load
  * Containers maintained in-file for simplicity during active development
- Future Intent: Migrate to Option 2 (separate files in containers/) when project 
  becomes more established and needs full file separation
- Status: Functional and ready for independent container updates

[2026-01-15 INVESTIGATION] PocketBase Associations Collection API Rules
- Problem: User email lookup queries Associations → "only superusers can perform this action"
- Root Cause: Associations collection LIST API rule is restricted (default deny all)
- Solution: Set Associations LIST API rule to `@request.auth.id != ""` (allow authenticated users)
- Forum Source: https://github.com/pocketbase/pocketbase/discussions/5948#5948-answer
  * Official pattern for "authenticate first" checks
  * Works for all read/write operations
  * Syntax: `@request.auth.id != ""` (empty string = anonymous/unauthenticated)
- Implementation (Manual in PocketBase Admin):
  1. Go to PocketBase Admin Console
  2. Select Associations collection
  3. API Rules tab → List action
  4. Set rule to: `@request.auth.id != ""`
  5. Save and test with authenticated user
- Why UserAlertSystem Works: Unknown at this point (may have different API rule set)
- Status: Solution identified, requires manual PocketBase admin console update

[2026-01-16 FEATURE] Note Creation Alerts - Notify Shared Users
- Problem: When a note is created and shared with users, those users should receive alerts
- Solution: Use existing UserAlertSystem realtime monitoring
- How it works:
  * When note is created, it's published with `shared: true` and `shared_with: [names]`
  * UserAlertSystem monitors Notes collection in realtime via PocketBase
  * When new note event arrives, system checks if current user is in shared_with
  * If match, plays notification sound automatically
- No code changes needed to submitNote - just ensure:
  * Note is created with `shared: true` and `shared_with` populated (already done)
  * UserAlertSystem is running in user's browser (via index.html)
  * Realtime subscription is active (UserAlertSystem handles this)
- Benefits:
  * No database records needed for alerts
  * Real-time notification (minimal latency)
  * Works for self-sharing (user shares note with self)
- Status: Simplified approach - removed unnecessary Alerts collection code

[2026-01-16 SESSION] FEATURE: Hidden Notes Management
- Feature Request: Create ability to hide notes from main list, view hidden notes, and unhide them
- Architecture Decision: Simple boolean flag (hidden) on Notes collection, dedicated view container
- Implementation:
  * Added "Hidden Notes" button (id="hiddenNotesBtn", gray-600 style) to notes header
  * Created hiddenNotesContainer (gray-200 bg, similar layout to notes list)
  * Added hide button (👁️‍🗨️ icon) to each note card in main list
    - Click handler: Update note.hidden=true, reload list
    - Styled: Gray text, hover red, positioned right of title
  * Added unhide button (👁️ icon) to each hidden note in hidden view
    - Click handler: Update note.hidden=false, reload both hidden notes and main list
    - Styled: Gray text, hover green, positioned right of title
  * Created renderHiddenNotes() function
    - Filters notesList for n.hidden === true
    - Renders cards similar to main list but with unhide buttons
    - Shows empty state "No hidden notes." if none exist
  * Created showHiddenNotes() view switcher
    - Hides all other containers, shows hiddenNotesContainer
    - Calls renderHiddenNotes() to populate
  * Updated showNotesList() to hide hiddenNotesContainer
  * Wired button click handlers:
    - hiddenNotesBtn → showHiddenNotes()
    - backToNotesFromHiddenBtn → showNotesList()
  * Updated applySearch() to filter hidden notes from main view (filter: !n.hidden)
- Features:
  * Hide any note from main list with single click
  * Dedicated gray-themed view for organizing hidden notes
  * Unhide with single click - returns to main list automatically
  * Maintains existing styling: light blue for shared-with-me notes, green for shared notes
  * No database schema changes needed - uses existing boolean field
- Status: Implemented and tested, NOT YET COMMITTED (awaiting user instruction)
- Database Schema: Notes.hidden (boolean, default false)
  * No migration needed (handled via PocketBase UI or default values)
  * Existing notes will have hidden=false implicitly
- UI State Flow:
  1. Main list: Shows all notes where !hidden, with hide button on each
  2. Hidden view: Shows all notes where hidden=true, with unhide button on each
  3. Clicking hide: Updates note, reloads, stays in main view
  4. Clicking unhide: Updates note, reloads both views, returns to main
  5. Search filtering: applySearch() respects hidden flag
- Next: Await user confirmation to commit

================================================================================