feat: security fixes, performance optimizations, accessibility improvements, and cleanup

.env.example

@@ -18,10 +18,25 @@ OPENAI_TIMEOUT=60000
 # Optional: OpenAI max retries (defaults to 2)
 OPENAI_MAX_RETRIES=2
 
+# GitHub API Configuration
+# Optional: Batch size for README fetching (defaults to 10)
+GITHUB_BATCH_SIZE=10
+
+# Optional: Delay between batches in milliseconds (defaults to 100)
+GITHUB_BATCH_DELAY_MS=100
+
 # Vercel Deployment Configuration (optional)
 VERCEL_CLIENT_ID=your_vercel_client_id_here
 VERCEL_CLIENT_SECRET=your_vercel_client_secret_here
 
 # Application Configuration
 APP_URL=http://localhost:5000
-NODE_ENV=development
+NODE_ENV=development
+
+# Logging Configuration
+# Optional: Log level (debug, info, warn, error) - defaults to info
+LOG_LEVEL=info
+
+# Server Configuration
+# Optional: Request timeout in milliseconds (defaults to 30000)
+REQUEST_TIMEOUT_MS=30000

.github/workflows/ci.yml

@@ -0,0 +1,67 @@
+name: CI
+
+on:
+  push:
+    branches: [ main, develop ]
+  pull_request:
+    branches: [ main, develop ]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run TypeScript type check
+        run: npm run check
+
+      - name: Build project
+        run: npm run build
+
+      - name: Run tests
+        run: npm run test:run
+        continue-on-error: true
+
+      - name: Upload build artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: dist
+          path: dist/
+          retention-days: 7
+
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Check code formatting
+        run: |
+          echo "Note: Add prettier or eslint to package.json for formatting checks"
+          echo "Skipping formatting check for now"
+        continue-on-error: true

.gitignore

@@ -1,5 +1,7 @@
 # Dependencies
 node_modules
+pnpm-lock.yaml
+yarn.lock
 
 # Build outputs
 dist

ANALYSIS/EXECUTIVE_SUMMARY.md

@@ -0,0 +1,288 @@
+# Portfolio Selection & Storage - Executive Summary
+
+## The Big Picture
+
+The FolioLab application has **THREE LAYERS** for handling portfolio items from different sources:
+
+1. **Fetching Layer** - Works for all sources (GitHub, Blog, Medium, GitLab, Bitbucket)
+2. **Selection Layer** - Only works for GitHub
+3. **Display Layer** - Only works for GitHub
+
+## Current State
+
+### What Works (GitHub)
+
+Users can:
+1. Connect GitHub account
+2. Go to `/repos` page
+3. See all their GitHub repositories with checkboxes
+4. Search, filter, and select specific repositories
+5. See selections saved in real-time to localStorage
+6. Click "Generate Portfolio" button
+7. See a beautiful portfolio preview with all selected repos
+
+**Components involved:**
+- `repo-select.tsx` - Selection UI
+- `storage.ts` - Selection state management
+- `portfolio-preview.tsx` - Display
+
+### What's Broken (Everything Else)
+
+Users can:
+1. Go to `/data-sources` page
+2. Enter RSS feed URL, Medium username, etc.
+3. Click "Import"
+4. Get a success message ✓
+5. But then... **NOTHING**
+   - No UI to see what was imported
+   - No way to select specific posts
+   - Posts are stored but invisible
+   - Portfolio preview doesn't show them
+
+**Why it's broken:**
+- `data-sources.tsx` fetches items but immediately stores them
+- No selection UI exists for non-GitHub items
+- `portfolio-preview.tsx` hardcoded to only display GitHub repos
+
+## Data Flow Comparison
+
+### GitHub Flow (Complete)
+
+```
+GitHub OAuth
+    ↓
+/repos page shows repositories ✓
+    ↓
+User selects via checkboxes ✓
+    ↓
+Selection stored in localStorage ✓
+    ↓
+Click "Generate Portfolio" ✓
+    ↓
+/preview shows selected repos ✓
+```
+
+### Blog/RSS Flow (Incomplete)
+
+```
+User enters RSS URL
+    ↓
+Posts fetched from RSS
+    ↓
+Posts stored with selected: false ❌
+    ↓
+NO UI to browse/select posts ❌
+    ↓
+User goes to /preview (manually) ❌
+    ↓
+Portfolio shows only GitHub repos ❌
+Posts are invisible ❌
+```
+
+## Storage - The Interesting Part
+
+### Local Storage Structure
+
+```javascript
+// GitHub repos (legacy key)
+localStorage.foliolab_repositories = [
+  { id: 1, name: "repo", selected: true, source: "github" }
+]
+
+// ALL items (new unified key)
+localStorage.foliolab_portfolio_items = [
+  { id: 1, name: "repo", selected: true, source: "github" },
+  { id: "post-1", title: "Blog", selected: false, source: "blog_rss" },
+  { id: "med-1", title: "Medium", selected: false, source: "medium" }
+]
+```
+
+**Key insight:** The `selected` flag exists for ALL item types, but users can only toggle it for GitHub repos.
+
+### Storage Functions Available
+
+```typescript
+// Works for all sources
+getPortfolioItems()                    // Get all items
+addPortfolioItems([...])              // Add multiple items
+getPortfolioItemsBySource("medium")   // Filter by source
+togglePortfolioItemSelection(id)      // Toggle selected flag ← NOT USED!
+
+// Works for GitHub only
+getRepositories()                     // Legacy GitHub-only getter
+saveRepositories([...])               // Legacy GitHub-only setter
+toggleRepositorySelection(id)         // Legacy GitHub-only toggle
+```
+
+## The Three Critical Gaps
+
+### Gap #1: Missing Selection UI for Non-GitHub Sources
+
+**Problem:**
+- Blog posts, Medium articles, GitLab projects, Bitbucket repos are fetched and stored
+- But users never see them or get to choose which ones to include
+- Items are added with `selected: false` by default
+
+**Impact:**
+- User wastes time importing posts they didn't want
+- Can't curate portfolio content from multiple sources
+- Feature is incomplete for 5 out of 6 sources
+
+**Example:**
+```typescript
+// data-sources.tsx line 76
+addPortfolioItems(posts);  // ← Directly added, no UI shown!
+```
+
+### Gap #2: Portfolio Preview Doesn't Render Non-GitHub Items
+
+**Problem:**
+- `portfolio-preview.tsx` is hardcoded to only query and display GitHub repos
+- Even though blog posts are in localStorage, they're never displayed
+- Code assumes only Repository objects exist
+
+**Impact:**
+- Multi-source portfolios don't work
+- Users think their imports failed (they're just invisible)
+
+**Code example:**
+```typescript
+// portfolio-preview.tsx line 72-75
+const { data } = useQuery<{ repositories: Repository[] }>({
+  queryKey: ["/api/repositories"],
+  // ❌ Only queries GitHub repos, not portfolio items
+})
+```
+
+### Gap #3: No Navigation Between Layers
+
+**Problem:**
+- After importing blog posts, there's no link to view/select them
+- User must manually navigate to `/preview` to see anything
+- No workflow that ties data sources to selection to preview
+
+**Impact:**
+- Confusing user experience
+- Users don't know if their import worked
+- No clear path from "add data" to "build portfolio"
+
+## What's Actually Stored
+
+After user imports blog posts and Medium articles, their localStorage contains:
+
+```javascript
+{
+  id: "rss-post-1",
+  title: "My Blog Post",
+  description: "...",
+  url: "...",
+  selected: false,           // ← User cannot change this
+  source: "blog_rss",
+  publishedAt: "2024-01-15",
+  author: "John Doe",
+  tags: ["react", "javascript"]
+}
+```
+
+The infrastructure to manage `selected` flag exists:
+- `togglePortfolioItemSelection(id)` - Ready to use but never called
+- Schema has `selected: boolean` for all types
+- Storage layer handles it correctly
+
+**But the UI that lets users toggle it is missing.**
+
+## The Fix Strategy
+
+Three components need to be created/updated:
+
+### 1. Create `/portfolio-items` Selection Page
+- Display all portfolio items grouped by source
+- Show checkboxes for each item
+- Allow search and filtering
+- Use `togglePortfolioItemSelection()` to manage state
+- Show count of selected items per source
+
+**Template:** Copy from `repo-select.tsx`, adapt for multiple item types
+
+### 2. Update `/data-sources` Page
+- After fetching items, navigate to `/portfolio-items` page
+- OR: Show selection UI inline on same page
+- Give user feedback about what was imported
+
+### 3. Update `/preview` Page  
+- Query all portfolio items (not just repos)
+- Render items based on source type
+- Show only items with `selected: true`
+- Maintain existing editing capabilities
+
+### 4. Update Navigation
+- Add `/portfolio-items` route
+- Add navigation buttons between pages
+- Create logical workflow
+
+## Technical Debt
+
+1. **Dual storage keys:** Still maintaining both `foliolab_repositories` (legacy) and `foliolab_portfolio_items` (new)
+   - Migration logic in place but old code still used
+   - Could consolidate to single key
+
+2. **Unused storage functions:** `togglePortfolioItemSelection()` and `getPortfolioItemsBySource()` exist but never called
+   - These are ready to use once UI is added
+
+3. **Hardcoded GitHub-only rendering:** `portfolio-preview.tsx` assumes Repository[] 
+   - Would need refactoring to support discriminated union rendering
+
+## Files That Need Changes
+
+```
+client/src/
+├── pages/
+│   ├── data-sources.tsx       [ADD: Navigate to /portfolio-items after import]
+│   ├── portfolio-items-select.tsx   [NEW: Create this file]
+│   └── portfolio-preview.tsx  [UPDATE: Query and render all sources]
+└── App.tsx                    [ADD: Route for /portfolio-items]
+```
+
+## Summary
+
+**The Good:**
+- Storage layer supports multi-source items
+- All schema types defined with selection support
+- Data fetching works for all sources
+- Infrastructure for managing selection exists
+
+**The Bad:**
+- UI for selecting non-GitHub items is completely missing
+- Portfolio preview can't display non-GitHub items
+- No workflow connecting the layers
+- Users can't control portfolio composition from non-GitHub sources
+
+**The Status:**
+- GitHub: Feature complete and working
+- Everything else: Feature 70% done (data layer works, UI missing)
+
+---
+
+## Quick Reference
+
+| Aspect | Status | File | Key Function |
+|--------|--------|------|--------------|
+| GitHub Fetching | ✓ Complete | `github.ts` | `fetchRepositories()` |
+| GitHub Selection | ✓ Complete | `repo-select.tsx` | `toggleRepo()` |
+| GitHub Display | ✓ Complete | `portfolio-preview.tsx` | `renderPortfolioContent()` |
+| Blog Fetching | ✓ Complete | `sources.ts` | POST `/api/sources/rss` |
+| Blog Selection | ✗ Missing | N/A | Should use `togglePortfolioItemSelection()` |
+| Blog Display | ✗ Missing | N/A | Not queried or rendered |
+| Medium Fetching | ✓ Complete | `sources.ts` | POST `/api/sources/medium` |
+| Medium Selection | ✗ Missing | N/A | Should use `togglePortfolioItemSelection()` |
+| Medium Display | ✗ Missing | N/A | Not queried or rendered |
+| GitLab Fetching | ✓ Complete | `sources.ts` | POST `/api/sources/gitlab` |
+| GitLab Selection | ✗ Missing | N/A | Should use `togglePortfolioItemSelection()` |
+| GitLab Display | ✗ Missing | N/A | Not queried or rendered |
+| Bitbucket Fetching | ✓ Complete | `sources.ts` | POST `/api/sources/bitbucket` |
+| Bitbucket Selection | ✗ Missing | N/A | Should use `togglePortfolioItemSelection()` |
+| Bitbucket Display | ✗ Missing | N/A | Not queried or rendered |
+| Freeform Creation | ✓ Complete | `sources.ts` | POST `/api/sources/freeform` |
+| Freeform Selection | ✗ Missing | N/A | Should use `togglePortfolioItemSelection()` |
+| Freeform Display | ✗ Missing | N/A | Not queried or rendered |
+